AlertDialog

atomiks · Oct 10, 2024 · 826f4b0 · 826f4b0
1 parent 17abd70
commit 826f4b0
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 56 deletions.
diff --git 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<AlertDialogBackdrop.OwnerState> = {
+  ...baseMapping,
+  transitionStatus: (value) => {
+    if (value === 'entering') {
+      return { 'data-entering': '' } as Record<string, string>;
+    }
+    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<string, string>;
-        }
-        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
@@ -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
@@ -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<HTMLParagraphElement>,
 ) {
   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
@@ -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<AlertDialogPopup.OwnerState> = {
+  ...baseMapping,
+  nestedOpenDialogCount: (value) => ({ 'data-nested-dialogs': value.toString() }),
+  transitionStatus: (value) => {
+    if (value === 'entering') {
+      return { 'data-entering': '' } as Record<string, string>;
+    }
+    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<string, string>;
-        }
-        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
@@ -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<HTMLParagraphElement>,
 ) {
   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
@@ -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,
   });