From 0a0eb8e3db82fb7c4c5a8e2db20213f79afe7f8d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Thu, 13 Jun 2024 22:03:51 +0200 Subject: [PATCH] Use layout effect to set ids --- .../Description/AlertDialogDescription.tsx | 8 ++++++-- .../src/AlertDialog/Popup/AlertDialogPopup.tsx | 4 ++-- .../src/AlertDialog/Title/AlertDialogTitle.tsx | 8 ++++++-- .../mui-base/src/Dialog/Backdrop/useDialogBackdrop.ts | 3 ++- .../src/Dialog/Description/DialogDescription.tsx | 11 ++++++++--- packages/mui-base/src/Dialog/Popup/DialogPopup.tsx | 4 ++-- packages/mui-base/src/Dialog/Popup/useDialogPopup.tsx | 3 ++- packages/mui-base/src/Dialog/Title/DialogTitle.tsx | 10 +++++++--- 8 files changed, 35 insertions(+), 16 deletions(-) diff --git a/packages/mui-base/src/AlertDialog/Description/AlertDialogDescription.tsx b/packages/mui-base/src/AlertDialog/Description/AlertDialogDescription.tsx index 90f2d3fe0..8c97ef167 100644 --- a/packages/mui-base/src/AlertDialog/Description/AlertDialogDescription.tsx +++ b/packages/mui-base/src/AlertDialog/Description/AlertDialogDescription.tsx @@ -6,19 +6,23 @@ import type { } from './AlertDialogDescription.types'; import { useAlertDialogRootContext } from '../Root/AlertDialogRootContext'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; +import { useEnhancedEffect } from '../../utils/useEnhancedEffect'; +import { useId } from '../../utils/useId'; const AlertDialogDescription = React.forwardRef(function AlertDialogDescription( props: AlertDialogDescriptionProps, forwardedRef: React.ForwardedRef, ) { - const { render, className, id, ...other } = props; + const { render, className, id: idProp, ...other } = props; const { setDescriptionElementId, open } = useAlertDialogRootContext(); const ownerState: AlertDialogDescriptionOwnerState = { open, }; - React.useEffect(() => { + const id = useId(idProp); + + useEnhancedEffect(() => { setDescriptionElementId(id); return () => { setDescriptionElementId(undefined); diff --git a/packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.tsx b/packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.tsx index 17211bcf7..d9af50778 100644 --- a/packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.tsx +++ b/packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.tsx @@ -15,7 +15,7 @@ const AlertDialogPopup = React.forwardRef(function AlertDialogPopup( animated = true, className, container, - id: idProp, + id, keepMounted = false, render, ...other @@ -25,7 +25,7 @@ const AlertDialogPopup = React.forwardRef(function AlertDialogPopup( const { open, nestedOpenDialogCount } = rootContext; const { getRootProps, floatingContext, mounted, transitionStatus } = useDialogPopup({ - id: idProp, + id, animated, ref: forwardedRef, dismissible: false, diff --git a/packages/mui-base/src/AlertDialog/Title/AlertDialogTitle.tsx b/packages/mui-base/src/AlertDialog/Title/AlertDialogTitle.tsx index 6a00f2cab..e5301b06c 100644 --- a/packages/mui-base/src/AlertDialog/Title/AlertDialogTitle.tsx +++ b/packages/mui-base/src/AlertDialog/Title/AlertDialogTitle.tsx @@ -3,19 +3,23 @@ import PropTypes from 'prop-types'; import type { AlertDialogTitleOwnerState, AlertDialogTitleProps } from './AlertDialogTitle.types'; import { useAlertDialogRootContext } from '../Root/AlertDialogRootContext'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; +import { useEnhancedEffect } from '../../utils/useEnhancedEffect'; +import { useId } from '../../utils/useId'; const AlertDialogTitle = React.forwardRef(function AlertDialogTitle( props: AlertDialogTitleProps, forwardedRef: React.ForwardedRef, ) { - const { render, className, id, ...other } = props; + const { render, className, id: idProp, ...other } = props; const { setTitleElementId, open } = useAlertDialogRootContext(); const ownerState: AlertDialogTitleOwnerState = { open, }; - React.useEffect(() => { + const id = useId(idProp); + + useEnhancedEffect(() => { setTitleElementId(id); return () => { setTitleElementId(undefined); diff --git a/packages/mui-base/src/Dialog/Backdrop/useDialogBackdrop.ts b/packages/mui-base/src/Dialog/Backdrop/useDialogBackdrop.ts index ada83e85d..36fe16375 100644 --- a/packages/mui-base/src/Dialog/Backdrop/useDialogBackdrop.ts +++ b/packages/mui-base/src/Dialog/Backdrop/useDialogBackdrop.ts @@ -4,6 +4,7 @@ import { mergeReactProps } from '../../utils/mergeReactProps'; import { useAnimatedElement } from '../../utils/useAnimatedElement'; import { useForkRef } from '../../utils/useForkRef'; import { useEventCallback } from '../../utils/useEventCallback'; +import { useEnhancedEffect } from '../../utils/useEnhancedEffect'; /** * @@ -26,7 +27,7 @@ export function useDialogBackdrop(params: UseDialogBackdropParams): UseDialogBac const onMount = useEventCallback(onMountParam); const onUnmount = useEventCallback(onUnmountParam); - React.useEffect(() => { + useEnhancedEffect(() => { onMount(); return onUnmount; diff --git a/packages/mui-base/src/Dialog/Description/DialogDescription.tsx b/packages/mui-base/src/Dialog/Description/DialogDescription.tsx index ed069f4a1..e556681f6 100644 --- a/packages/mui-base/src/Dialog/Description/DialogDescription.tsx +++ b/packages/mui-base/src/Dialog/Description/DialogDescription.tsx @@ -1,21 +1,26 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import type { DialogDescriptionProps } from './DialogDescription.types'; -import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { useDialogRootContext } from '../Root/DialogRootContext'; +import { useComponentRenderer } from '../../utils/useComponentRenderer'; +import { useEnhancedEffect } from '../../utils/useEnhancedEffect'; +import { useId } from '../../utils/useId'; const DialogDescription = React.forwardRef(function DialogDescription( props: DialogDescriptionProps, forwardedRef: React.ForwardedRef, ) { - const { render, className, id, ...other } = props; + const { render, className, id: idProp, ...other } = props; const { setDescriptionElementId, open, modal } = useDialogRootContext(); + const ownerState = { open, modal, }; - React.useEffect(() => { + const id = useId(idProp); + + useEnhancedEffect(() => { setDescriptionElementId(id); return () => { setDescriptionElementId(undefined); diff --git a/packages/mui-base/src/Dialog/Popup/DialogPopup.tsx b/packages/mui-base/src/Dialog/Popup/DialogPopup.tsx index 8d19a1e5f..4723cf87e 100644 --- a/packages/mui-base/src/Dialog/Popup/DialogPopup.tsx +++ b/packages/mui-base/src/Dialog/Popup/DialogPopup.tsx @@ -15,7 +15,7 @@ const DialogPopup = React.forwardRef(function DialogPopup( animated = true, className, container, - id: idProp, + id, keepMounted = false, render, ...other @@ -24,7 +24,7 @@ const DialogPopup = React.forwardRef(function DialogPopup( const { open, modal, nestedOpenDialogCount, dismissible } = rootContext; const { getRootProps, floatingContext, mounted, transitionStatus } = useDialogPopup({ - id: idProp, + id, animated, ref: forwardedRef, isTopmost: nestedOpenDialogCount === 0, diff --git a/packages/mui-base/src/Dialog/Popup/useDialogPopup.tsx b/packages/mui-base/src/Dialog/Popup/useDialogPopup.tsx index d6b033516..311bf249b 100644 --- a/packages/mui-base/src/Dialog/Popup/useDialogPopup.tsx +++ b/packages/mui-base/src/Dialog/Popup/useDialogPopup.tsx @@ -6,6 +6,7 @@ import { useForkRef } from '../../utils/useForkRef'; import { mergeReactProps } from '../../utils/mergeReactProps'; import { useAnimatedElement } from '../../utils/useAnimatedElement'; import { useScrollLock } from '../../utils/useScrollLock'; +import { useEnhancedEffect } from '../../utils/useEnhancedEffect'; /** * @@ -57,7 +58,7 @@ export function useDialogPopup(parameters: UseDialogPopupParameters): UseDialogP useScrollLock(modal && mounted); - React.useEffect(() => { + useEnhancedEffect(() => { setPopupElementId(id); return () => { setPopupElementId(undefined); diff --git a/packages/mui-base/src/Dialog/Title/DialogTitle.tsx b/packages/mui-base/src/Dialog/Title/DialogTitle.tsx index 3e61522f3..c6714698b 100644 --- a/packages/mui-base/src/Dialog/Title/DialogTitle.tsx +++ b/packages/mui-base/src/Dialog/Title/DialogTitle.tsx @@ -1,14 +1,16 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import type { DialogTitleProps } from './DialogTitle.types'; -import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { useDialogRootContext } from '../Root/DialogRootContext'; +import { useComponentRenderer } from '../../utils/useComponentRenderer'; +import { useEnhancedEffect } from '../../utils/useEnhancedEffect'; +import { useId } from '../../utils/useId'; const DialogTitle = React.forwardRef(function DialogTitle( props: DialogTitleProps, forwardedRef: React.ForwardedRef, ) { - const { render, className, id, ...other } = props; + const { render, className, id: idProp, ...other } = props; const { setTitleElementId, open, modal } = useDialogRootContext(); const ownerState = { @@ -16,7 +18,9 @@ const DialogTitle = React.forwardRef(function DialogTitle( modal, }; - React.useEffect(() => { + const id = useId(idProp); + + useEnhancedEffect(() => { setTitleElementId(id); return () => { setTitleElementId(undefined);