diff --git a/packages/mui-base/src/AlertDialog/Backdrop/AlertDialogBackdrop.tsx b/packages/mui-base/src/AlertDialog/Backdrop/AlertDialogBackdrop.tsx index 21bdb1f52..bcf0217cd 100644 --- a/packages/mui-base/src/AlertDialog/Backdrop/AlertDialogBackdrop.tsx +++ b/packages/mui-base/src/AlertDialog/Backdrop/AlertDialogBackdrop.tsx @@ -7,6 +7,21 @@ import { useDialogBackdrop } from '../../Dialog/Backdrop/useDialogBackdrop'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import type { TransitionStatus } from '../../utils/useTransitionStatus'; import type { BaseUIComponentProps } from '../../utils/types'; +import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps'; +import { popupOpenStateMapping as baseMapping } from '../../utils/popupOpenStateMapping'; + +const customStyleHookMapping: CustomStyleHookMapping = { + ...baseMapping, + transitionStatus: (value) => { + if (value === 'entering') { + return { 'data-entering': '' } as Record; + } + if (value === 'exiting') { + return { 'data-exiting': '' }; + } + return null; + }, +}; /** * @@ -44,18 +59,7 @@ const AlertDialogBackdrop = React.forwardRef(function AlertDialogBackdrop( ownerState, propGetter: getRootProps, extraProps: other, - customStyleHookMapping: { - open: (value) => ({ 'data-state': value ? 'open' : 'closed' }), - transitionStatus: (value) => { - if (value === 'entering') { - return { 'data-entering': '' } as Record; - } - if (value === 'exiting') { - return { 'data-exiting': '' }; - } - return null; - }, - }, + customStyleHookMapping, }); if (!mounted && !keepMounted) { diff --git a/packages/mui-base/src/AlertDialog/Close/AlertDialogClose.tsx b/packages/mui-base/src/AlertDialog/Close/AlertDialogClose.tsx index 88178cbd7..082b1bd12 100644 --- a/packages/mui-base/src/AlertDialog/Close/AlertDialogClose.tsx +++ b/packages/mui-base/src/AlertDialog/Close/AlertDialogClose.tsx @@ -6,6 +6,8 @@ import { useDialogClose } from '../../Dialog/Close/useDialogClose'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import type { BaseUIComponentProps } from '../../utils/types'; +const ownerState = {}; + /** * * Demos: @@ -24,10 +26,6 @@ const AlertDialogClose = React.forwardRef(function AlertDialogClose( const { open, onOpenChange } = useAlertDialogRootContext(); const { getRootProps } = useDialogClose({ open, onOpenChange }); - const ownerState: AlertDialogClose.OwnerState = { - open, - }; - const { renderElement } = useComponentRenderer({ render: render ?? 'button', className, @@ -43,9 +41,7 @@ const AlertDialogClose = React.forwardRef(function AlertDialogClose( namespace AlertDialogClose { export interface Props extends BaseUIComponentProps<'button', OwnerState> {} - export interface OwnerState { - open: boolean; - } + export interface OwnerState {} } AlertDialogClose.propTypes /* remove-proptypes */ = { diff --git a/packages/mui-base/src/AlertDialog/Description/AlertDialogDescription.tsx b/packages/mui-base/src/AlertDialog/Description/AlertDialogDescription.tsx index 3e5feda36..287a3b1a0 100644 --- a/packages/mui-base/src/AlertDialog/Description/AlertDialogDescription.tsx +++ b/packages/mui-base/src/AlertDialog/Description/AlertDialogDescription.tsx @@ -7,6 +7,8 @@ import { useEnhancedEffect } from '../../utils/useEnhancedEffect'; import { useId } from '../../utils/useId'; import type { BaseUIComponentProps } from '../../utils/types'; +const ownerState = {}; + /** * * Demos: @@ -22,11 +24,7 @@ const AlertDialogDescription = React.forwardRef(function AlertDialogDescription( forwardedRef: React.ForwardedRef, ) { const { render, className, id: idProp, ...other } = props; - const { setDescriptionElementId, open } = useAlertDialogRootContext(); - - const ownerState: AlertDialogDescription.OwnerState = { - open, - }; + const { setDescriptionElementId } = useAlertDialogRootContext(); const id = useId(idProp); @@ -51,9 +49,7 @@ const AlertDialogDescription = React.forwardRef(function AlertDialogDescription( namespace AlertDialogDescription { export interface Props extends BaseUIComponentProps<'p', OwnerState> {} - export interface OwnerState { - open: boolean; - } + export interface OwnerState {} } AlertDialogDescription.propTypes /* remove-proptypes */ = { diff --git a/packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.tsx b/packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.tsx index 494a6a507..8f5d9f729 100644 --- a/packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.tsx +++ b/packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.tsx @@ -8,6 +8,22 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { refType, HTMLElementType } from '../../utils/proptypes'; import type { BaseUIComponentProps } from '../../utils/types'; import type { TransitionStatus } from '../../utils/useTransitionStatus'; +import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps'; +import { popupOpenStateMapping as baseMapping } from '../../utils/popupOpenStateMapping'; + +const customStyleHookMapping: CustomStyleHookMapping = { + ...baseMapping, + nestedOpenDialogCount: (value) => ({ 'data-nested-dialogs': value.toString() }), + transitionStatus: (value) => { + if (value === 'entering') { + return { 'data-entering': '' } as Record; + } + if (value === 'exiting') { + return { 'data-exiting': '' }; + } + return null; + }, +}; /** * @@ -36,11 +52,14 @@ const AlertDialogPopup = React.forwardRef(function AlertDialogPopup( ...rootContext, }); - const ownerState: AlertDialogPopup.OwnerState = { - open, - nestedOpenDialogCount, - transitionStatus, - }; + const ownerState: AlertDialogPopup.OwnerState = React.useMemo( + () => ({ + open, + nestedOpenDialogCount, + transitionStatus, + }), + [open, nestedOpenDialogCount, transitionStatus], + ); const { renderElement } = useComponentRenderer({ render: render ?? 'div', @@ -52,19 +71,7 @@ const AlertDialogPopup = React.forwardRef(function AlertDialogPopup( style: { ...other.style, '--nested-dialogs': nestedOpenDialogCount }, role: 'alertdialog', }, - customStyleHookMapping: { - open: (value) => ({ 'data-state': value ? 'open' : 'closed' }), - nestedOpenDialogCount: (value) => ({ 'data-nested-dialogs': value.toString() }), - transitionStatus: (value) => { - if (value === 'entering') { - return { 'data-entering': '' } as Record; - } - if (value === 'exiting') { - return { 'data-exiting': '' }; - } - return null; - }, - }, + customStyleHookMapping, }); if (!keepMounted && !mounted) { diff --git a/packages/mui-base/src/AlertDialog/Title/AlertDialogTitle.tsx b/packages/mui-base/src/AlertDialog/Title/AlertDialogTitle.tsx index f9ba91fb5..1ac1d03a0 100644 --- a/packages/mui-base/src/AlertDialog/Title/AlertDialogTitle.tsx +++ b/packages/mui-base/src/AlertDialog/Title/AlertDialogTitle.tsx @@ -7,6 +7,8 @@ import { useEnhancedEffect } from '../../utils/useEnhancedEffect'; import { useId } from '../../utils/useId'; import type { BaseUIComponentProps } from '../../utils/types'; +const ownerState = {}; + /** * * Demos: @@ -22,11 +24,7 @@ const AlertDialogTitle = React.forwardRef(function AlertDialogTitle( forwardedRef: React.ForwardedRef, ) { const { render, className, id: idProp, ...other } = props; - const { setTitleElementId, open } = useAlertDialogRootContext(); - - const ownerState: AlertDialogTitle.OwnerState = { - open, - }; + const { setTitleElementId } = useAlertDialogRootContext(); const id = useId(idProp); @@ -51,9 +49,7 @@ const AlertDialogTitle = React.forwardRef(function AlertDialogTitle( namespace AlertDialogTitle { export interface Props extends BaseUIComponentProps<'h2', OwnerState> {} - export interface OwnerState { - open: boolean; - } + export interface OwnerState {} } AlertDialogTitle.propTypes /* remove-proptypes */ = { diff --git a/packages/mui-base/src/AlertDialog/Trigger/AlertDialogTrigger.tsx b/packages/mui-base/src/AlertDialog/Trigger/AlertDialogTrigger.tsx index 29c5b2371..737c55888 100644 --- a/packages/mui-base/src/AlertDialog/Trigger/AlertDialogTrigger.tsx +++ b/packages/mui-base/src/AlertDialog/Trigger/AlertDialogTrigger.tsx @@ -5,6 +5,7 @@ import { useDialogTrigger } from '../../Dialog/Trigger/useDialogTrigger'; import { useAlertDialogRootContext } from '../Root/AlertDialogRootContext'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import type { BaseUIComponentProps } from '../../utils/types'; +import { triggerOpenStateMapping } from '../../utils/popupOpenStateMapping'; /** * @@ -37,9 +38,7 @@ const AlertDialogTrigger = React.forwardRef(function AlertDialogTrigger( ownerState, propGetter: getRootProps, extraProps: other, - customStyleHookMapping: { - open: (value) => ({ 'data-state': value ? 'open' : 'closed' }), - }, + customStyleHookMapping: triggerOpenStateMapping, ref: forwardedRef, });