From 6d7156ae2e078ec9b5e0c35621d17ab8102bac9b Mon Sep 17 00:00:00 2001 From: atomiks Date: Tue, 15 Oct 2024 22:50:09 +1100 Subject: [PATCH 1/7] [core] Refactor popup component style hooks to `data-popup-open`, `data-open` (#731) --- docs/app/experiments/dialog.module.css | 8 ++-- docs/app/experiments/tooltip.tsx | 14 +++--- .../AlertDialogWithTransitions.js | 4 +- .../AlertDialogWithTransitions.tsx | 4 +- .../alert-dialog/NestedAlertDialogs.js | 4 +- .../alert-dialog/NestedAlertDialogs.tsx | 4 +- .../components/alert-dialog/alert-dialog.mdx | 4 +- .../dialog/DialogWithTransitions.js | 4 +- .../dialog/DialogWithTransitions.tsx | 4 +- docs/data/components/dialog/NestedDialogs.js | 4 +- docs/data/components/dialog/NestedDialogs.tsx | 4 +- docs/data/components/dialog/dialog.mdx | 4 +- docs/data/components/menu/CheckboxItems.js | 2 +- docs/data/components/menu/CheckboxItems.tsx | 2 +- .../css-modules/Menu.module.css | 2 +- docs/data/components/menu/NestedMenu.js | 2 +- docs/data/components/menu/NestedMenu.tsx | 2 +- docs/data/components/menu/RadioItems.js | 2 +- docs/data/components/menu/RadioItems.tsx | 2 +- docs/data/components/menu/menu.mdx | 4 +- .../system/index.js | 2 +- .../system/index.tsx | 2 +- .../popover/UnstyledPopoverTransition.js | 4 +- .../popover/UnstyledPopoverTransition.tsx | 4 +- docs/data/components/popover/popover.mdx | 4 +- .../UnstyledPreviewCardTransition.js | 2 +- .../UnstyledPreviewCardTransition.tsx | 2 +- .../components/preview-card/preview-card.mdx | 4 +- .../tooltip/UnstyledTooltipDelayGroup.js | 2 +- .../tooltip/UnstyledTooltipDelayGroup.tsx | 2 +- .../tooltip/UnstyledTooltipFollowCursor.js | 2 +- .../tooltip/UnstyledTooltipFollowCursor.tsx | 2 +- .../system/index.js | 2 +- .../system/index.tsx | 2 +- .../tooltip/UnstyledTooltipTransition.js | 4 +- .../tooltip/UnstyledTooltipTransition.tsx | 4 +- docs/data/components/tooltip/tooltip.mdx | 4 +- .../Backdrop/AlertDialogBackdrop.tsx | 28 ++++++------ .../AlertDialog/Close/AlertDialogClose.tsx | 10 ++--- .../Description/AlertDialogDescription.tsx | 12 ++---- .../AlertDialog/Popup/AlertDialogPopup.tsx | 43 +++++++++++-------- .../AlertDialog/Title/AlertDialogTitle.tsx | 12 ++---- .../Trigger/AlertDialogTrigger.tsx | 5 +-- .../src/Dialog/Backdrop/DialogBackdrop.tsx | 28 ++++++------ .../mui-base/src/Dialog/Close/DialogClose.tsx | 14 ++---- .../Dialog/Description/DialogDescription.tsx | 14 ++---- .../mui-base/src/Dialog/Popup/DialogPopup.tsx | 30 +++++++------ .../src/Dialog/Root/DialogRoot.test.tsx | 2 +- .../mui-base/src/Dialog/Title/DialogTitle.tsx | 14 ++---- .../src/Dialog/Trigger/DialogTrigger.tsx | 5 +-- .../mui-base/src/Menu/Arrow/MenuArrow.tsx | 8 ++-- .../CheckboxItem/MenuCheckboxItem.test.tsx | 14 +++--- .../Menu/CheckboxItem/MenuCheckboxItem.tsx | 8 +--- .../MenuCheckboxItemIndicator.tsx | 10 ++--- .../mui-base/src/Menu/Group/MenuGroup.tsx | 6 ++- .../src/Menu/GroupLabel/MenuGroupLabel.tsx | 5 +-- packages/mui-base/src/Menu/Item/MenuItem.tsx | 5 ++- .../mui-base/src/Menu/Popup/MenuPopup.tsx | 41 ++++++++++-------- .../src/Menu/Positioner/MenuPositioner.tsx | 4 +- .../src/Menu/RadioItem/MenuRadioItem.test.tsx | 6 +-- .../src/Menu/RadioItem/MenuRadioItem.tsx | 8 +--- .../MenuRadioItemIndicator.tsx | 10 ++--- .../Menu/SubmenuTrigger/SubmenuTrigger.tsx | 9 ++-- .../src/Menu/Trigger/MenuTrigger.test.tsx | 2 +- .../mui-base/src/Menu/Trigger/MenuTrigger.tsx | 8 ++-- .../src/Menu/utils/commonStyleHooks.ts | 3 -- .../src/Menu/utils/styleHookMapping.ts | 14 ++++++ .../src/Popover/Arrow/PopoverArrow.tsx | 12 +----- .../src/Popover/Backdrop/PopoverBackdrop.tsx | 28 +++++++++++- .../src/Popover/Popup/PopoverPopup.tsx | 27 ++++++------ .../Popover/Positioner/PopoverPositioner.tsx | 2 + .../src/Popover/Trigger/PopoverTrigger.tsx | 12 +----- .../PreviewCard/Arrow/PreviewCardArrow.tsx | 2 + .../Backdrop/PreviewCardBackdrop.tsx | 28 +++++++++++- .../PreviewCard/Popup/PreviewCardPopup.tsx | 27 ++++++------ .../Positioner/PreviewCardPositioner.tsx | 2 + .../Trigger/PreviewCardTrigger.tsx | 2 + .../src/Tooltip/Arrow/TooltipArrow.tsx | 12 +----- .../src/Tooltip/Popup/TooltipPopup.tsx | 27 ++++++------ .../Tooltip/Positioner/TooltipPositioner.tsx | 2 + .../src/Tooltip/Trigger/TooltipTrigger.tsx | 12 +----- .../src/utils/popupOpenStateMapping.ts | 23 ++++++++++ 82 files changed, 381 insertions(+), 343 deletions(-) delete mode 100644 packages/mui-base/src/Menu/utils/commonStyleHooks.ts create mode 100644 packages/mui-base/src/Menu/utils/styleHookMapping.ts create mode 100644 packages/mui-base/src/utils/popupOpenStateMapping.ts diff --git a/docs/app/experiments/dialog.module.css b/docs/app/experiments/dialog.module.css index a9f470680..c43bbca81 100644 --- a/docs/app/experiments/dialog.module.css +++ b/docs/app/experiments/dialog.module.css @@ -88,7 +88,7 @@ opacity var(--transition-duration) ease-in, visibility var(--transition-duration) step-end; - &[data-state='open'] { + &[data-open] { @starting-style { & { transform: translate(-50%, -35%) scale(0.8) translateY(0); @@ -112,7 +112,7 @@ visibility: hidden; opacity: 0; - &[data-state='open'] { + &[data-open] { animation: dialog-opening-transform var(--transition-duration) ease-out, dialog-opening-opacity var(--transition-duration) ease-out forwards; @@ -149,7 +149,7 @@ opacity 300ms ease-in, visibility 300ms step-end; - &[data-state='open'] { + &[data-open] { @starting-style { & { opacity: 0; @@ -167,7 +167,7 @@ } &.withAnimations { - &[data-state='open'] { + &[data-open] { animation: backdrop-opening 500ms ease-out forwards; } diff --git a/docs/app/experiments/tooltip.tsx b/docs/app/experiments/tooltip.tsx index 40f010864..26d5b9126 100644 --- a/docs/app/experiments/tooltip.tsx +++ b/docs/app/experiments/tooltip.tsx @@ -40,7 +40,7 @@ export const TooltipPopup = styled(Tooltip.Popup)` } &[data-type='css-animation'] { - &[data-state='open'] { + &[data-open] { visibility: visible; animation: ${scaleIn} 0.2s forwards; } @@ -53,7 +53,7 @@ export const TooltipPopup = styled(Tooltip.Popup)` &[data-type='css-animation-keep-mounted'] { visibility: hidden; - &[data-state='open'] { + &[data-open] { visibility: visible; animation: ${scaleIn} 0.2s forwards; } @@ -70,7 +70,7 @@ export const TooltipPopup = styled(Tooltip.Popup)` opacity: 0; transform: scale(0); - &[data-state='open'] { + &[data-open] { opacity: 1; transform: scale(1); } @@ -88,7 +88,7 @@ export const TooltipPopup = styled(Tooltip.Popup)` transform: scale(0.8); visibility: hidden; - &[data-state='open'] { + &[data-open] { opacity: 1; transform: scale(1); visibility: visible; @@ -106,13 +106,13 @@ export const TooltipPopup = styled(Tooltip.Popup)` opacity: 0; transform: scale(0); - &[data-state='open'] { + &[data-open] { opacity: 1; transform: scale(1); } @starting-style { - &[data-state='open'] { + &[data-open] { opacity: 0; transform: scale(0.8); } @@ -134,7 +134,7 @@ export const AnchorButton = styled(Tooltip.Trigger)` } &:hover, - &[data-state='open'] { + &[data-popup-open] { background: ${blue[800]}; } `; diff --git a/docs/data/components/alert-dialog/AlertDialogWithTransitions.js b/docs/data/components/alert-dialog/AlertDialogWithTransitions.js index 321e5e713..cdd336c99 100644 --- a/docs/data/components/alert-dialog/AlertDialogWithTransitions.js +++ b/docs/data/components/alert-dialog/AlertDialogWithTransitions.js @@ -51,7 +51,7 @@ const Popup = styled(BaseAlertDialog.Popup)( opacity: 0; transform: translate(-50%, -35%) scale(0.8); - &[data-state='open'] { + &[data-open] { opacity: 1; transform: translate(-50%, -50%) scale(1); transition-timing-function: ease-out; @@ -75,7 +75,7 @@ const Backdrop = styled(BaseAlertDialog.Backdrop)` transition-duration: 250ms; transition-timing-function: ease-in; - &[data-state='open'] { + &[data-open] { backdrop-filter: blur(6px); opacity: 1; transition-timing-function: ease-out; diff --git a/docs/data/components/alert-dialog/AlertDialogWithTransitions.tsx b/docs/data/components/alert-dialog/AlertDialogWithTransitions.tsx index 321e5e713..cdd336c99 100644 --- a/docs/data/components/alert-dialog/AlertDialogWithTransitions.tsx +++ b/docs/data/components/alert-dialog/AlertDialogWithTransitions.tsx @@ -51,7 +51,7 @@ const Popup = styled(BaseAlertDialog.Popup)( opacity: 0; transform: translate(-50%, -35%) scale(0.8); - &[data-state='open'] { + &[data-open] { opacity: 1; transform: translate(-50%, -50%) scale(1); transition-timing-function: ease-out; @@ -75,7 +75,7 @@ const Backdrop = styled(BaseAlertDialog.Backdrop)` transition-duration: 250ms; transition-timing-function: ease-in; - &[data-state='open'] { + &[data-open] { backdrop-filter: blur(6px); opacity: 1; transition-timing-function: ease-out; diff --git a/docs/data/components/alert-dialog/NestedAlertDialogs.js b/docs/data/components/alert-dialog/NestedAlertDialogs.js index 4fc25e829..470e31655 100644 --- a/docs/data/components/alert-dialog/NestedAlertDialogs.js +++ b/docs/data/components/alert-dialog/NestedAlertDialogs.js @@ -72,7 +72,7 @@ const Popup = styled(BaseAlertDialog.Popup)( opacity var(--transition-duration) ease-in, visibility var(--transition-duration) step-end; - &[data-state='open'] { + &[data-open] { @starting-style { & { transform: translate(-50%, -35%) scale(0.8) translateY(0); @@ -124,7 +124,7 @@ const Backdrop = styled(BaseAlertDialog.Backdrop)` transition-duration: 250ms; transition-timing-function: ease-in; - &[data-state='open'] { + &[data-open] { backdrop-filter: blur(6px); opacity: 1; transition-timing-function: ease-out; diff --git a/docs/data/components/alert-dialog/NestedAlertDialogs.tsx b/docs/data/components/alert-dialog/NestedAlertDialogs.tsx index 4fc25e829..470e31655 100644 --- a/docs/data/components/alert-dialog/NestedAlertDialogs.tsx +++ b/docs/data/components/alert-dialog/NestedAlertDialogs.tsx @@ -72,7 +72,7 @@ const Popup = styled(BaseAlertDialog.Popup)( opacity var(--transition-duration) ease-in, visibility var(--transition-duration) step-end; - &[data-state='open'] { + &[data-open] { @starting-style { & { transform: translate(-50%, -35%) scale(0.8) translateY(0); @@ -124,7 +124,7 @@ const Backdrop = styled(BaseAlertDialog.Backdrop)` transition-duration: 250ms; transition-timing-function: ease-in; - &[data-state='open'] { + &[data-open] { backdrop-filter: blur(6px); opacity: 1; transition-timing-function: ease-out; diff --git a/docs/data/components/alert-dialog/alert-dialog.mdx b/docs/data/components/alert-dialog/alert-dialog.mdx index c25240ee5..2f0578fa8 100644 --- a/docs/data/components/alert-dialog/alert-dialog.mdx +++ b/docs/data/components/alert-dialog/alert-dialog.mdx @@ -129,7 +129,7 @@ Here is an example of how to apply a symmetric scale and fade transition with th } /* Represents the final styles once entered */ -.AlertDialogPopup[data-state='open'] { +.AlertDialogPopup[data-open] { opacity: 1; transform: translate(-50%, -50%) scale(1); } @@ -160,7 +160,7 @@ In newer browsers, there is a feature called `@starting-style` which allows tran /* Official Browser API - no Firefox support as of May 2024 */ @starting-style { - .AlertDialogPopup[data-state='open'] { + .AlertDialogPopup[data-open] { opacity: 0; transform: translate(-50%, -35%) scale(0.8); } diff --git a/docs/data/components/dialog/DialogWithTransitions.js b/docs/data/components/dialog/DialogWithTransitions.js index 933fe38fa..07d9f834c 100644 --- a/docs/data/components/dialog/DialogWithTransitions.js +++ b/docs/data/components/dialog/DialogWithTransitions.js @@ -51,7 +51,7 @@ const Popup = styled(BaseDialog.Popup)( opacity: 0; transform: translate(-50%, -35%) scale(0.8); - &[data-state='open'] { + &[data-open] { opacity: 1; transform: translate(-50%, -50%) scale(1); transition-timing-function: ease-out; @@ -75,7 +75,7 @@ const Backdrop = styled(BaseDialog.Backdrop)` transition-duration: 250ms; transition-timing-function: ease-in; - &[data-state='open'] { + &[data-open] { backdrop-filter: blur(6px); opacity: 1; transition-timing-function: ease-out; diff --git a/docs/data/components/dialog/DialogWithTransitions.tsx b/docs/data/components/dialog/DialogWithTransitions.tsx index 933fe38fa..07d9f834c 100644 --- a/docs/data/components/dialog/DialogWithTransitions.tsx +++ b/docs/data/components/dialog/DialogWithTransitions.tsx @@ -51,7 +51,7 @@ const Popup = styled(BaseDialog.Popup)( opacity: 0; transform: translate(-50%, -35%) scale(0.8); - &[data-state='open'] { + &[data-open] { opacity: 1; transform: translate(-50%, -50%) scale(1); transition-timing-function: ease-out; @@ -75,7 +75,7 @@ const Backdrop = styled(BaseDialog.Backdrop)` transition-duration: 250ms; transition-timing-function: ease-in; - &[data-state='open'] { + &[data-open] { backdrop-filter: blur(6px); opacity: 1; transition-timing-function: ease-out; diff --git a/docs/data/components/dialog/NestedDialogs.js b/docs/data/components/dialog/NestedDialogs.js index b154fdf96..32839c7da 100644 --- a/docs/data/components/dialog/NestedDialogs.js +++ b/docs/data/components/dialog/NestedDialogs.js @@ -72,7 +72,7 @@ const Popup = styled(BaseDialog.Popup)( opacity var(--transition-duration) ease-in, visibility var(--transition-duration) step-end; - &[data-state='open'] { + &[data-open] { @starting-style { & { transform: translate(-50%, -35%) scale(0.8) translateY(0); @@ -140,7 +140,7 @@ const Backdrop = styled(BaseDialog.Backdrop)` transition-duration: 250ms; transition-timing-function: ease-in; - &[data-state='open'] { + &[data-open] { backdrop-filter: blur(6px); opacity: 1; transition-timing-function: ease-out; diff --git a/docs/data/components/dialog/NestedDialogs.tsx b/docs/data/components/dialog/NestedDialogs.tsx index b154fdf96..32839c7da 100644 --- a/docs/data/components/dialog/NestedDialogs.tsx +++ b/docs/data/components/dialog/NestedDialogs.tsx @@ -72,7 +72,7 @@ const Popup = styled(BaseDialog.Popup)( opacity var(--transition-duration) ease-in, visibility var(--transition-duration) step-end; - &[data-state='open'] { + &[data-open] { @starting-style { & { transform: translate(-50%, -35%) scale(0.8) translateY(0); @@ -140,7 +140,7 @@ const Backdrop = styled(BaseDialog.Backdrop)` transition-duration: 250ms; transition-timing-function: ease-in; - &[data-state='open'] { + &[data-open] { backdrop-filter: blur(6px); opacity: 1; transition-timing-function: ease-out; diff --git a/docs/data/components/dialog/dialog.mdx b/docs/data/components/dialog/dialog.mdx index d89325c59..f9a970b9b 100644 --- a/docs/data/components/dialog/dialog.mdx +++ b/docs/data/components/dialog/dialog.mdx @@ -152,7 +152,7 @@ Here is an example of how to apply a symmetric scale and fade transition with th } /* Represents the final styles once entered */ -.DialogPopup[data-state='open'] { +.DialogPopup[data-open] { opacity: 1; transform: translate(-50%, -50%) scale(1); } @@ -183,7 +183,7 @@ In newer browsers, there is a feature called `@starting-style` which allows tran /* Official Browser API - no Firefox support as of May 2024 */ @starting-style { - .DialogPopup[data-state='open'] { + .DialogPopup[data-open] { opacity: 0; transform: translate(-50%, -35%) scale(0.8); } diff --git a/docs/data/components/menu/CheckboxItems.js b/docs/data/components/menu/CheckboxItems.js index 0dd752b86..ffb55c157 100644 --- a/docs/data/components/menu/CheckboxItems.js +++ b/docs/data/components/menu/CheckboxItems.js @@ -150,7 +150,7 @@ const Indicator = styled(Menu.CheckboxItemIndicator)( border-radius: 2px; - &[data-checkboxitem=checked] { + &[data-checked] { background: ${theme.palette.mode === 'dark' ? grey[800] : grey[700]}; box-shadow: 0 0 0 2px ${theme.palette.mode === 'dark' ? grey[900] : '#fff'} inset; } diff --git a/docs/data/components/menu/CheckboxItems.tsx b/docs/data/components/menu/CheckboxItems.tsx index 1efbbd4de..9ff75dd55 100644 --- a/docs/data/components/menu/CheckboxItems.tsx +++ b/docs/data/components/menu/CheckboxItems.tsx @@ -150,7 +150,7 @@ const Indicator = styled(Menu.CheckboxItemIndicator)( border-radius: 2px; - &[data-checkboxitem=checked] { + &[data-checked] { background: ${theme.palette.mode === 'dark' ? grey[800] : grey[700]}; box-shadow: 0 0 0 2px ${theme.palette.mode === 'dark' ? grey[900] : '#fff'} inset; } diff --git a/docs/data/components/menu/MenuIntroduction/css-modules/Menu.module.css b/docs/data/components/menu/MenuIntroduction/css-modules/Menu.module.css index e0608b11f..70d8f0908 100644 --- a/docs/data/components/menu/MenuIntroduction/css-modules/Menu.module.css +++ b/docs/data/components/menu/MenuIntroduction/css-modules/Menu.module.css @@ -41,7 +41,7 @@ transform 200ms ease-in; } - &[data-state='open'] { + &[data-open] { opacity: 1; transform: scale(1, 1); transition: diff --git a/docs/data/components/menu/NestedMenu.js b/docs/data/components/menu/NestedMenu.js index 32a7cca1f..6abf610cd 100644 --- a/docs/data/components/menu/NestedMenu.js +++ b/docs/data/components/menu/NestedMenu.js @@ -208,7 +208,7 @@ const SubmenuTrigger = styled(Menu.SubmenuTrigger)( float: right; } - &[data-state='open'] { + &[data-popup-open] { background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]}; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } diff --git a/docs/data/components/menu/NestedMenu.tsx b/docs/data/components/menu/NestedMenu.tsx index b13f069b1..b7d7aac3b 100644 --- a/docs/data/components/menu/NestedMenu.tsx +++ b/docs/data/components/menu/NestedMenu.tsx @@ -208,7 +208,7 @@ const SubmenuTrigger = styled(Menu.SubmenuTrigger)( float: right; } - &[data-state='open'] { + &[data-popup-open] { background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]}; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } diff --git a/docs/data/components/menu/RadioItems.js b/docs/data/components/menu/RadioItems.js index e00fdf1fd..ee54e7cb2 100644 --- a/docs/data/components/menu/RadioItems.js +++ b/docs/data/components/menu/RadioItems.js @@ -143,7 +143,7 @@ const Indicator = styled(Menu.RadioItemIndicator)( box-sizing: border-box; border-radius: 50%; - &[data-radioitem=checked] { + &[data-checked] { background: ${theme.palette.mode === 'dark' ? grey[800] : grey[700]}; box-shadow: 0 0 0 2px ${theme.palette.mode === 'dark' ? grey[900] : '#fff'} inset; } diff --git a/docs/data/components/menu/RadioItems.tsx b/docs/data/components/menu/RadioItems.tsx index e00fdf1fd..ee54e7cb2 100644 --- a/docs/data/components/menu/RadioItems.tsx +++ b/docs/data/components/menu/RadioItems.tsx @@ -143,7 +143,7 @@ const Indicator = styled(Menu.RadioItemIndicator)( box-sizing: border-box; border-radius: 50%; - &[data-radioitem=checked] { + &[data-checked] { background: ${theme.palette.mode === 'dark' ? grey[800] : grey[700]}; box-shadow: 0 0 0 2px ${theme.palette.mode === 'dark' ? grey[900] : '#fff'} inset; } diff --git a/docs/data/components/menu/menu.mdx b/docs/data/components/menu/menu.mdx index 5448c7984..d6187401b 100644 --- a/docs/data/components/menu/menu.mdx +++ b/docs/data/components/menu/menu.mdx @@ -308,7 +308,7 @@ Here is an example of how to apply a symmetric scale and fade transition with th } /* Represents the final styles once entered */ -.MenuPopup[data-state='open'] { +.MenuPopup[data-open] { opacity: 1; transform: scale(1); } @@ -337,7 +337,7 @@ In newer browsers, there is a feature called `@starting-style` which allows tran /* Official Browser API - no Firefox support as of May 2024 */ @starting-style { - .MenuPopup[data-state='open'] { + .MenuPopup[data-open] { opacity: 0; transform: scale(0.9); } diff --git a/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.js b/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.js index dc7cdccd4..97a02c133 100644 --- a/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.js +++ b/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.js @@ -58,7 +58,7 @@ export const AnchorButton = styled(Popover.Trigger)` } &:hover, - &[data-state='open'] { + &[data-popup-open] { background: ${blue[800]}; } `; diff --git a/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.tsx b/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.tsx index dc7cdccd4..97a02c133 100644 --- a/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.tsx +++ b/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.tsx @@ -58,7 +58,7 @@ export const AnchorButton = styled(Popover.Trigger)` } &:hover, - &[data-state='open'] { + &[data-popup-open] { background: ${blue[800]}; } `; diff --git a/docs/data/components/popover/UnstyledPopoverTransition.js b/docs/data/components/popover/UnstyledPopoverTransition.js index b0af18359..fa0abe43e 100644 --- a/docs/data/components/popover/UnstyledPopoverTransition.js +++ b/docs/data/components/popover/UnstyledPopoverTransition.js @@ -40,7 +40,7 @@ export const PopoverPopup = styled(Popover.Popup)` transform: scale(0.9); transform-origin: var(--transform-origin); - &[data-state='open'] { + &[data-open] { opacity: 1; transform: scale(1); } @@ -75,7 +75,7 @@ export const AnchorButton = styled(Popover.Trigger)` } &:hover, - &[data-state='open'] { + &[data-popup-open] { background: ${blue[800]}; } `; diff --git a/docs/data/components/popover/UnstyledPopoverTransition.tsx b/docs/data/components/popover/UnstyledPopoverTransition.tsx index b0af18359..fa0abe43e 100644 --- a/docs/data/components/popover/UnstyledPopoverTransition.tsx +++ b/docs/data/components/popover/UnstyledPopoverTransition.tsx @@ -40,7 +40,7 @@ export const PopoverPopup = styled(Popover.Popup)` transform: scale(0.9); transform-origin: var(--transform-origin); - &[data-state='open'] { + &[data-open] { opacity: 1; transform: scale(1); } @@ -75,7 +75,7 @@ export const AnchorButton = styled(Popover.Trigger)` } &:hover, - &[data-state='open'] { + &[data-popup-open] { background: ${blue[800]}; } `; diff --git a/docs/data/components/popover/popover.mdx b/docs/data/components/popover/popover.mdx index 603efd660..f851aba31 100644 --- a/docs/data/components/popover/popover.mdx +++ b/docs/data/components/popover/popover.mdx @@ -309,7 +309,7 @@ Here is an example of how to apply a symmetric scale and fade transition with th } /* Represents the final styles once entered */ -.PopoverPopup[data-state='open'] { +.PopoverPopup[data-open] { opacity: 1; transform: scale(1); } @@ -340,7 +340,7 @@ In newer browsers, there is a feature called `@starting-style` which allows tran /* Official Browser API - no Firefox support as of May 2024 */ @starting-style { - .PopoverPopup[data-state='open'] { + .PopoverPopup[data-open] { opacity: 0; transform: scale(0.9); } diff --git a/docs/data/components/preview-card/UnstyledPreviewCardTransition.js b/docs/data/components/preview-card/UnstyledPreviewCardTransition.js index 0c40c7588..ea5f5aad6 100644 --- a/docs/data/components/preview-card/UnstyledPreviewCardTransition.js +++ b/docs/data/components/preview-card/UnstyledPreviewCardTransition.js @@ -54,7 +54,7 @@ export const PreviewCardPopup = styled(PreviewCard.Popup)` opacity: 0; transform-origin: var(--transform-origin); - &[data-state='open'] { + &[data-open] { opacity: 1; transform: scale(1); } diff --git a/docs/data/components/preview-card/UnstyledPreviewCardTransition.tsx b/docs/data/components/preview-card/UnstyledPreviewCardTransition.tsx index 0c40c7588..ea5f5aad6 100644 --- a/docs/data/components/preview-card/UnstyledPreviewCardTransition.tsx +++ b/docs/data/components/preview-card/UnstyledPreviewCardTransition.tsx @@ -54,7 +54,7 @@ export const PreviewCardPopup = styled(PreviewCard.Popup)` opacity: 0; transform-origin: var(--transform-origin); - &[data-state='open'] { + &[data-open] { opacity: 1; transform: scale(1); } diff --git a/docs/data/components/preview-card/preview-card.mdx b/docs/data/components/preview-card/preview-card.mdx index 196550fcd..51bf0f086 100644 --- a/docs/data/components/preview-card/preview-card.mdx +++ b/docs/data/components/preview-card/preview-card.mdx @@ -259,7 +259,7 @@ Here is an example of how to apply a symmetric scale and fade transition with th } /* Represents the final styles once entered */ -.PreviewCardPopup[data-state='open'] { +.PreviewCardPopup[data-open] { opacity: 1; transform: scale(1); } @@ -290,7 +290,7 @@ In newer browsers, there is a feature called `@starting-style` which allows tran /* Official Browser API - no Firefox support as of May 2024 */ @starting-style { - .PreviewCardPopup[data-state='open'] { + .PreviewCardPopup[data-open] { opacity: 0; transform: scale(0.9); } diff --git a/docs/data/components/tooltip/UnstyledTooltipDelayGroup.js b/docs/data/components/tooltip/UnstyledTooltipDelayGroup.js index e886d41b7..2b07bcd78 100644 --- a/docs/data/components/tooltip/UnstyledTooltipDelayGroup.js +++ b/docs/data/components/tooltip/UnstyledTooltipDelayGroup.js @@ -55,7 +55,7 @@ export const AnchorButton = styled(Tooltip.Trigger)` } &:hover, - &[data-state='open'] { + &[data-popup-open] { background: ${blue[800]}; } `; diff --git a/docs/data/components/tooltip/UnstyledTooltipDelayGroup.tsx b/docs/data/components/tooltip/UnstyledTooltipDelayGroup.tsx index e886d41b7..2b07bcd78 100644 --- a/docs/data/components/tooltip/UnstyledTooltipDelayGroup.tsx +++ b/docs/data/components/tooltip/UnstyledTooltipDelayGroup.tsx @@ -55,7 +55,7 @@ export const AnchorButton = styled(Tooltip.Trigger)` } &:hover, - &[data-state='open'] { + &[data-popup-open] { background: ${blue[800]}; } `; diff --git a/docs/data/components/tooltip/UnstyledTooltipFollowCursor.js b/docs/data/components/tooltip/UnstyledTooltipFollowCursor.js index cd2f93ed0..f162061f2 100644 --- a/docs/data/components/tooltip/UnstyledTooltipFollowCursor.js +++ b/docs/data/components/tooltip/UnstyledTooltipFollowCursor.js @@ -47,7 +47,7 @@ export const AnchorButton = styled(Tooltip.Trigger)` } &:hover, - &[data-state='open'] { + &[data-popup-open] { background: ${blue[800]}; } `; diff --git a/docs/data/components/tooltip/UnstyledTooltipFollowCursor.tsx b/docs/data/components/tooltip/UnstyledTooltipFollowCursor.tsx index cd2f93ed0..f162061f2 100644 --- a/docs/data/components/tooltip/UnstyledTooltipFollowCursor.tsx +++ b/docs/data/components/tooltip/UnstyledTooltipFollowCursor.tsx @@ -47,7 +47,7 @@ export const AnchorButton = styled(Tooltip.Trigger)` } &:hover, - &[data-state='open'] { + &[data-popup-open] { background: ${blue[800]}; } `; diff --git a/docs/data/components/tooltip/UnstyledTooltipIntroduction/system/index.js b/docs/data/components/tooltip/UnstyledTooltipIntroduction/system/index.js index f729f3763..f87518c9f 100644 --- a/docs/data/components/tooltip/UnstyledTooltipIntroduction/system/index.js +++ b/docs/data/components/tooltip/UnstyledTooltipIntroduction/system/index.js @@ -70,7 +70,7 @@ export const AnchorButton = styled(Tooltip.Trigger)` } &:hover, - &[data-state='open'] { + &[data-popup-open] { background: ${blue[800]}; } diff --git a/docs/data/components/tooltip/UnstyledTooltipIntroduction/system/index.tsx b/docs/data/components/tooltip/UnstyledTooltipIntroduction/system/index.tsx index f729f3763..f87518c9f 100644 --- a/docs/data/components/tooltip/UnstyledTooltipIntroduction/system/index.tsx +++ b/docs/data/components/tooltip/UnstyledTooltipIntroduction/system/index.tsx @@ -70,7 +70,7 @@ export const AnchorButton = styled(Tooltip.Trigger)` } &:hover, - &[data-state='open'] { + &[data-popup-open] { background: ${blue[800]}; } diff --git a/docs/data/components/tooltip/UnstyledTooltipTransition.js b/docs/data/components/tooltip/UnstyledTooltipTransition.js index d07593a93..c9f530f54 100644 --- a/docs/data/components/tooltip/UnstyledTooltipTransition.js +++ b/docs/data/components/tooltip/UnstyledTooltipTransition.js @@ -36,7 +36,7 @@ export const TooltipPopup = styled(Tooltip.Popup)` transform: scale(0.9); transform-origin: var(--transform-origin); - &[data-state='open'] { + &[data-open] { opacity: 1; transform: scale(1); } @@ -62,7 +62,7 @@ export const AnchorButton = styled(Tooltip.Trigger)` } &:hover, - &[data-state='open'] { + &[data-popup-open] { background: ${blue[800]}; } `; diff --git a/docs/data/components/tooltip/UnstyledTooltipTransition.tsx b/docs/data/components/tooltip/UnstyledTooltipTransition.tsx index d07593a93..c9f530f54 100644 --- a/docs/data/components/tooltip/UnstyledTooltipTransition.tsx +++ b/docs/data/components/tooltip/UnstyledTooltipTransition.tsx @@ -36,7 +36,7 @@ export const TooltipPopup = styled(Tooltip.Popup)` transform: scale(0.9); transform-origin: var(--transform-origin); - &[data-state='open'] { + &[data-open] { opacity: 1; transform: scale(1); } @@ -62,7 +62,7 @@ export const AnchorButton = styled(Tooltip.Trigger)` } &:hover, - &[data-state='open'] { + &[data-popup-open] { background: ${blue[800]}; } `; diff --git a/docs/data/components/tooltip/tooltip.mdx b/docs/data/components/tooltip/tooltip.mdx index 77d74b24c..e2a7cad95 100644 --- a/docs/data/components/tooltip/tooltip.mdx +++ b/docs/data/components/tooltip/tooltip.mdx @@ -237,7 +237,7 @@ Here is an example of how to apply a symmetric scale and fade transition with th } /* Represents the final styles once entered */ -.TooltipPopup[data-state='open'] { +.TooltipPopup[data-open] { opacity: 1; transform: scale(1); } @@ -268,7 +268,7 @@ In newer browsers, there is a feature called `@starting-style` which allows tran /* Official Browser API - no Firefox support as of May 2024 */ @starting-style { - .TooltipPopup[data-state='open'] { + .TooltipPopup[data-open] { opacity: 0; transform: scale(0.9); } 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, }); diff --git a/packages/mui-base/src/Dialog/Backdrop/DialogBackdrop.tsx b/packages/mui-base/src/Dialog/Backdrop/DialogBackdrop.tsx index 60d233e79..fe497aaff 100644 --- a/packages/mui-base/src/Dialog/Backdrop/DialogBackdrop.tsx +++ b/packages/mui-base/src/Dialog/Backdrop/DialogBackdrop.tsx @@ -7,6 +7,21 @@ import { useDialogRootContext } from '../Root/DialogRootContext'; 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; + }, +}; /** * @@ -47,18 +62,7 @@ const DialogBackdrop = React.forwardRef(function DialogBackdrop( 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/Dialog/Close/DialogClose.tsx b/packages/mui-base/src/Dialog/Close/DialogClose.tsx index 17da0a68d..f1a2b67a3 100644 --- a/packages/mui-base/src/Dialog/Close/DialogClose.tsx +++ b/packages/mui-base/src/Dialog/Close/DialogClose.tsx @@ -6,6 +6,8 @@ import { useDialogRootContext } from '../Root/DialogRootContext'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import type { BaseUIComponentProps } from '../../utils/types'; +const ownerState = {}; + /** * * Demos: @@ -21,14 +23,9 @@ const DialogClose = React.forwardRef(function DialogClose( forwardedRef: React.ForwardedRef, ) { const { render, className, ...other } = props; - const { open, onOpenChange, modal } = useDialogRootContext(); + const { open, onOpenChange } = useDialogRootContext(); const { getRootProps } = useDialogClose({ open, onOpenChange }); - const ownerState: DialogClose.OwnerState = { - open, - modal, - }; - const { renderElement } = useComponentRenderer({ render: render ?? 'button', className, @@ -44,10 +41,7 @@ const DialogClose = React.forwardRef(function DialogClose( namespace DialogClose { export interface Props extends BaseUIComponentProps<'button', OwnerState> {} - export interface OwnerState { - open: boolean; - modal: boolean; - } + export interface OwnerState {} } DialogClose.propTypes /* remove-proptypes */ = { diff --git a/packages/mui-base/src/Dialog/Description/DialogDescription.tsx b/packages/mui-base/src/Dialog/Description/DialogDescription.tsx index 505d6837e..40183668a 100644 --- a/packages/mui-base/src/Dialog/Description/DialogDescription.tsx +++ b/packages/mui-base/src/Dialog/Description/DialogDescription.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,12 +24,7 @@ const DialogDescription = React.forwardRef(function DialogDescription( forwardedRef: React.ForwardedRef, ) { const { render, className, id: idProp, ...other } = props; - const { setDescriptionElementId, open, modal } = useDialogRootContext(); - - const ownerState = { - open, - modal, - }; + const { setDescriptionElementId } = useDialogRootContext(); const id = useId(idProp); @@ -52,10 +49,7 @@ const DialogDescription = React.forwardRef(function DialogDescription( namespace DialogDescription { export interface Props extends BaseUIComponentProps<'p', OwnerState> {} - export interface OwnerState { - open: boolean; - modal: boolean; - } + export interface OwnerState {} } DialogDescription.propTypes /* remove-proptypes */ = { diff --git a/packages/mui-base/src/Dialog/Popup/DialogPopup.tsx b/packages/mui-base/src/Dialog/Popup/DialogPopup.tsx index 88c9593fe..b3d990e35 100644 --- a/packages/mui-base/src/Dialog/Popup/DialogPopup.tsx +++ b/packages/mui-base/src/Dialog/Popup/DialogPopup.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; + }, +}; /** * @@ -50,19 +66,7 @@ const DialogPopup = React.forwardRef(function DialogPopup( ...other, style: { ...other.style, '--nested-dialogs': nestedOpenDialogCount }, }, - 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/Dialog/Root/DialogRoot.test.tsx b/packages/mui-base/src/Dialog/Root/DialogRoot.test.tsx index 6ae50fd2a..6b7ec6174 100644 --- a/packages/mui-base/src/Dialog/Root/DialogRoot.test.tsx +++ b/packages/mui-base/src/Dialog/Root/DialogRoot.test.tsx @@ -136,7 +136,7 @@ describe('', () => { transition: opacity 200ms; } - .dialog[data-state='open'] { + .dialog[data-open] { opacity: 1; } `; diff --git a/packages/mui-base/src/Dialog/Title/DialogTitle.tsx b/packages/mui-base/src/Dialog/Title/DialogTitle.tsx index 06fba7380..2c4b05495 100644 --- a/packages/mui-base/src/Dialog/Title/DialogTitle.tsx +++ b/packages/mui-base/src/Dialog/Title/DialogTitle.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,12 +24,7 @@ const DialogTitle = React.forwardRef(function DialogTitle( forwardedRef: React.ForwardedRef, ) { const { render, className, id: idProp, ...other } = props; - const { setTitleElementId, open, modal } = useDialogRootContext(); - - const ownerState = { - open, - modal, - }; + const { setTitleElementId } = useDialogRootContext(); const id = useId(idProp); @@ -52,10 +49,7 @@ const DialogTitle = React.forwardRef(function DialogTitle( namespace DialogTitle { export interface Props extends BaseUIComponentProps<'h2', OwnerState> {} - export interface OwnerState { - open: boolean; - modal: boolean; - } + export interface OwnerState {} } DialogTitle.propTypes /* remove-proptypes */ = { diff --git a/packages/mui-base/src/Dialog/Trigger/DialogTrigger.tsx b/packages/mui-base/src/Dialog/Trigger/DialogTrigger.tsx index e0621df3c..5da69b0e1 100644 --- a/packages/mui-base/src/Dialog/Trigger/DialogTrigger.tsx +++ b/packages/mui-base/src/Dialog/Trigger/DialogTrigger.tsx @@ -5,6 +5,7 @@ import { useDialogTrigger } from './useDialogTrigger'; import { useDialogRootContext } from '../Root/DialogRootContext'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import type { BaseUIComponentProps } from '../../utils/types'; +import { triggerOpenStateMapping } from '../../utils/popupOpenStateMapping'; /** * @@ -40,9 +41,7 @@ const DialogTrigger = React.forwardRef(function DialogTrigger( ownerState, propGetter: getRootProps, extraProps: other, - customStyleHookMapping: { - open: (value) => ({ 'data-state': value ? 'open' : 'closed' }), - }, + customStyleHookMapping: triggerOpenStateMapping, ref: forwardedRef, }); diff --git a/packages/mui-base/src/Menu/Arrow/MenuArrow.tsx b/packages/mui-base/src/Menu/Arrow/MenuArrow.tsx index 0baa22e8d..924ed047a 100644 --- a/packages/mui-base/src/Menu/Arrow/MenuArrow.tsx +++ b/packages/mui-base/src/Menu/Arrow/MenuArrow.tsx @@ -4,11 +4,11 @@ import PropTypes from 'prop-types'; import { useMenuArrow } from './useMenuArrow'; import { useMenuPositionerContext } from '../Positioner/MenuPositionerContext'; import { useMenuRootContext } from '../Root/MenuRootContext'; -import { commonStyleHooks } from '../utils/commonStyleHooks'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { useForkRef } from '../../utils/useForkRef'; import type { Side, Alignment } from '../../utils/useAnchorPositioning'; import type { BaseUIComponentProps } from '../../utils/types'; +import { popupOpenStateMapping } from '../../utils/popupOpenStateMapping'; /** * Renders an arrow that points to the center of the anchor element. @@ -54,19 +54,19 @@ const MenuArrow = React.forwardRef(function MenuArrow( ownerState, ref: mergedRef, extraProps: otherProps, - customStyleHookMapping: commonStyleHooks, + customStyleHookMapping: popupOpenStateMapping, }); return renderElement(); }); namespace MenuArrow { - export type OwnerState = { + export interface OwnerState { open: boolean; side: Side; alignment: Alignment; arrowUncentered: boolean; - }; + } export interface Props extends BaseUIComponentProps<'div', OwnerState> { /** diff --git a/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.test.tsx b/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.test.tsx index b8b598b18..c962d100d 100644 --- a/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.test.tsx +++ b/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.test.tsx @@ -147,7 +147,7 @@ describe('', () => { const item = getByRole('menuitemcheckbox'); expect(item).to.have.attribute('aria-checked', ariaChecked); - expect(item).to.have.attribute('data-checkboxitem', dataState); + expect(item).to.have.attribute(`data-${dataState}`, ''); }), ); @@ -170,12 +170,12 @@ describe('', () => { await user.click(item); expect(item).to.have.attribute('aria-checked', 'true'); - expect(item).to.have.attribute('data-checkboxitem', 'checked'); + expect(item).to.have.attribute('data-checked', ''); await user.click(item); expect(item).to.have.attribute('aria-checked', 'false'); - expect(item).to.have.attribute('data-checkboxitem', 'unchecked'); + expect(item).to.have.attribute('data-unchecked', ''); }); it(`toggles the checked state when Space is pressed`, async () => { @@ -202,10 +202,10 @@ describe('', () => { }); await user.keyboard(`[Space]`); - expect(item).to.have.attribute('data-checkboxitem', 'checked'); + expect(item).to.have.attribute('data-checked', ''); await user.keyboard(`[Space]`); - expect(item).to.have.attribute('data-checkboxitem', 'unchecked'); + expect(item).to.have.attribute('data-unchecked', ''); }); it(`toggles the checked state and closes the menu when Enter is pressed`, async () => { @@ -236,7 +236,7 @@ describe('', () => { expect(queryByRole('menu', { hidden: false })).to.equal(null); await user.click(trigger); - expect(item).to.have.attribute('data-checkboxitem', 'checked'); + expect(item).to.have.attribute('data-checked', ''); }); it('calls `onCheckedChange` when the item is clicked', async () => { @@ -291,7 +291,7 @@ describe('', () => { const itemAfterReopen = getByRole('menuitemcheckbox'); expect(itemAfterReopen).to.have.attribute('aria-checked', 'true'); - expect(itemAfterReopen).to.have.attribute('data-checkboxitem', 'checked'); + expect(itemAfterReopen).to.have.attribute('data-checked'); }); }); diff --git a/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.tsx b/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.tsx index 6fa0f0457..93495b7a1 100644 --- a/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.tsx +++ b/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.tsx @@ -6,14 +6,10 @@ import { useMenuCheckboxItem } from './useMenuCheckboxItem'; import { MenuCheckboxItemContext } from './MenuCheckboxItemContext'; import { useMenuRootContext } from '../Root/MenuRootContext'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; -import { CustomStyleHookMapping } from '../../utils/getStyleHookProps'; import { useId } from '../../utils/useId'; import type { BaseUIComponentProps, GenericHTMLProps } from '../../utils/types'; import { useForkRef } from '../../utils/useForkRef'; - -const customStyleHookMapping: CustomStyleHookMapping = { - checked: (value: boolean) => ({ 'data-checkboxitem': value ? 'checked' : 'unchecked' }), -}; +import { itemMapping } from '../utils/styleHookMapping'; const InnerMenuCheckboxItem = React.memo( React.forwardRef(function InnerMenuItem( @@ -61,7 +57,7 @@ const InnerMenuCheckboxItem = React.memo( className, ownerState, propGetter: (externalProps) => propGetter(getRootProps(externalProps)), - customStyleHookMapping, + customStyleHookMapping: itemMapping, extraProps: other, }); diff --git a/packages/mui-base/src/Menu/CheckboxItemIndicator/MenuCheckboxItemIndicator.tsx b/packages/mui-base/src/Menu/CheckboxItemIndicator/MenuCheckboxItemIndicator.tsx index 5f72304f5..20399a7d1 100644 --- a/packages/mui-base/src/Menu/CheckboxItemIndicator/MenuCheckboxItemIndicator.tsx +++ b/packages/mui-base/src/Menu/CheckboxItemIndicator/MenuCheckboxItemIndicator.tsx @@ -1,14 +1,10 @@ +'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import { MenuCheckboxItem } from '../CheckboxItem/MenuCheckboxItem'; import { useMenuCheckboxItemContext } from '../CheckboxItem/MenuCheckboxItemContext'; -import { CustomStyleHookMapping } from '../../utils/getStyleHookProps'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { BaseUIComponentProps } from '../../utils/types'; - -const customStyleHookMapping: CustomStyleHookMapping = { - checked: (value: boolean) => ({ 'data-checkboxitem': value ? 'checked' : 'unchecked' }), -}; +import { itemMapping } from '../utils/styleHookMapping'; /** * @@ -32,7 +28,7 @@ const MenuCheckboxItemIndicator = React.forwardRef(function MenuCheckboxItemIndi render: render || 'span', className, ownerState, - customStyleHookMapping, + customStyleHookMapping: itemMapping, extraProps: other, ref: forwardedRef, }); diff --git a/packages/mui-base/src/Menu/Group/MenuGroup.tsx b/packages/mui-base/src/Menu/Group/MenuGroup.tsx index 64f9a8342..498bd0a1b 100644 --- a/packages/mui-base/src/Menu/Group/MenuGroup.tsx +++ b/packages/mui-base/src/Menu/Group/MenuGroup.tsx @@ -1,10 +1,11 @@ +'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; import { BaseUIComponentProps } from '../../utils/types'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { MenuGroupContext } from './MenuGroupContext'; -const EMPTY_OBJECT = {}; +const ownerState = {}; /** * @@ -23,12 +24,13 @@ const MenuGroup = React.forwardRef(function MenuGroup( const { render, className, ...other } = props; const [labelId, setLabelId] = React.useState(undefined); + const context = React.useMemo(() => ({ setLabelId }), [setLabelId]); const { renderElement } = useComponentRenderer({ render: render || 'div', className, - ownerState: EMPTY_OBJECT, + ownerState, extraProps: { role: 'group', 'aria-labelledby': labelId, diff --git a/packages/mui-base/src/Menu/GroupLabel/MenuGroupLabel.tsx b/packages/mui-base/src/Menu/GroupLabel/MenuGroupLabel.tsx index 8203ca283..542eef990 100644 --- a/packages/mui-base/src/Menu/GroupLabel/MenuGroupLabel.tsx +++ b/packages/mui-base/src/Menu/GroupLabel/MenuGroupLabel.tsx @@ -7,7 +7,7 @@ import { useId } from '../../utils/useId'; import { useMenuGroupRootContext } from '../Group/MenuGroupContext'; import { useEnhancedEffect } from '../../utils/useEnhancedEffect'; -const EMPTY_OBJECT = {}; +const ownerState = {}; /** * @@ -31,7 +31,6 @@ const MenuGroupLabel = React.forwardRef(function MenuGroupLabelComponent( useEnhancedEffect(() => { setLabelId(id); - return () => { setLabelId(undefined); }; @@ -40,7 +39,7 @@ const MenuGroupLabel = React.forwardRef(function MenuGroupLabelComponent( const { renderElement } = useComponentRenderer({ render: render ?? 'div', className, - ownerState: EMPTY_OBJECT, + ownerState, extraProps: { role: 'group', id, ...other }, ref: forwardedRef, }); diff --git a/packages/mui-base/src/Menu/Item/MenuItem.tsx b/packages/mui-base/src/Menu/Item/MenuItem.tsx index 22a762023..3de44f3d6 100644 --- a/packages/mui-base/src/Menu/Item/MenuItem.tsx +++ b/packages/mui-base/src/Menu/Item/MenuItem.tsx @@ -39,7 +39,10 @@ const InnerMenuItem = React.memo( typingRef, }); - const ownerState: MenuItem.OwnerState = { disabled, highlighted }; + const ownerState: MenuItem.OwnerState = React.useMemo( + () => ({ disabled, highlighted }), + [disabled, highlighted], + ); const { renderElement } = useComponentRenderer({ render: render || 'div', diff --git a/packages/mui-base/src/Menu/Popup/MenuPopup.tsx b/packages/mui-base/src/Menu/Popup/MenuPopup.tsx index e8563436e..ec85814f3 100644 --- a/packages/mui-base/src/Menu/Popup/MenuPopup.tsx +++ b/packages/mui-base/src/Menu/Popup/MenuPopup.tsx @@ -5,19 +5,23 @@ import { Side, useFloatingTree } from '@floating-ui/react'; import { useMenuPopup } from './useMenuPopup'; import { useMenuRootContext } from '../Root/MenuRootContext'; import { useMenuPositionerContext } from '../Positioner/MenuPositionerContext'; -import { commonStyleHooks } from '../utils/commonStyleHooks'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { useForkRef } from '../../utils/useForkRef'; -import { BaseUIComponentProps } from '../../utils/types'; -import { CustomStyleHookMapping } from '../../utils/getStyleHookProps'; +import type { BaseUIComponentProps } from '../../utils/types'; +import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps'; +import type { TransitionStatus } from '../../utils/useTransitionStatus'; +import { popupOpenStateMapping as baseMapping } from '../../utils/popupOpenStateMapping'; const customStyleHookMapping: CustomStyleHookMapping = { - ...commonStyleHooks, - entering(value) { - return value ? { 'data-menu-entering': '' } : null; - }, - exiting(value) { - return value ? { 'data-menu-exiting': '' } : null; + ...baseMapping, + transitionStatus(value) { + if (value === 'entering') { + return { 'data-entering': '' } as Record; + } + if (value === 'exiting') { + return { 'data-exiting': '' }; + } + return null; }, }; @@ -47,13 +51,15 @@ const MenuPopup = React.forwardRef(function MenuPopup( const mergedRef = useForkRef(forwardedRef, popupRef); - const ownerState: MenuPopup.OwnerState = { - entering: transitionStatus === 'entering', - exiting: transitionStatus === 'exiting', - side, - alignment, - open, - }; + const ownerState: MenuPopup.OwnerState = React.useMemo( + () => ({ + transitionStatus, + side, + alignment, + open, + }), + [transitionStatus, side, alignment, open], + ); const { renderElement } = useComponentRenderer({ render: render || 'div', @@ -77,8 +83,7 @@ namespace MenuPopup { } export type OwnerState = { - entering: boolean; - exiting: boolean; + transitionStatus: TransitionStatus; side: Side; alignment: 'start' | 'end' | 'center'; open: boolean; diff --git a/packages/mui-base/src/Menu/Positioner/MenuPositioner.tsx b/packages/mui-base/src/Menu/Positioner/MenuPositioner.tsx index 681118cf2..2dcfbe062 100644 --- a/packages/mui-base/src/Menu/Positioner/MenuPositioner.tsx +++ b/packages/mui-base/src/Menu/Positioner/MenuPositioner.tsx @@ -11,12 +11,12 @@ import { } from '@floating-ui/react'; import { MenuPositionerContext } from './MenuPositionerContext'; import { useMenuRootContext } from '../Root/MenuRootContext'; -import { commonStyleHooks } from '../utils/commonStyleHooks'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { useForkRef } from '../../utils/useForkRef'; import { useMenuPositioner } from './useMenuPositioner'; import { HTMLElementType } from '../../utils/proptypes'; import { BaseUIComponentProps, GenericHTMLProps } from '../../utils/types'; +import { popupOpenStateMapping } from '../../utils/popupOpenStateMapping'; /** * Renders the element that positions the Menu popup. @@ -121,7 +121,7 @@ const MenuPositioner = React.forwardRef(function MenuPositioner( render: render ?? 'div', className, ownerState, - customStyleHookMapping: commonStyleHooks, + customStyleHookMapping: popupOpenStateMapping, ref: mergedRef, extraProps: otherProps, }); diff --git a/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.test.tsx b/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.test.tsx index 0a0c1e1c4..ba44c1972 100644 --- a/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.test.tsx +++ b/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.test.tsx @@ -173,7 +173,7 @@ describe('', () => { await user.click(item); expect(item).to.have.attribute('aria-checked', 'true'); - expect(item).to.have.attribute('data-radioitem', 'checked'); + expect(item).to.have.attribute('data-checked', ''); }); ['Space', 'Enter'].forEach((key) => { @@ -201,7 +201,7 @@ describe('', () => { }); await user.keyboard(`[${key}]`); - expect(item).to.have.attribute('data-radioitem', 'checked'); + expect(item).to.have.attribute('data-checked', ''); }); }); @@ -256,7 +256,7 @@ describe('', () => { const itemAfterReopen = getByRole('menuitemradio'); expect(itemAfterReopen).to.have.attribute('aria-checked', 'true'); - expect(itemAfterReopen).to.have.attribute('data-radioitem', 'checked'); + expect(itemAfterReopen).to.have.attribute('data-checked', ''); }); }); diff --git a/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.tsx b/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.tsx index d9fc70fa2..73400cb14 100644 --- a/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.tsx +++ b/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.tsx @@ -5,16 +5,12 @@ import { FloatingEvents, useFloatingTree, useListItem } from '@floating-ui/react import { useMenuRadioItem } from './useMenuRadioItem'; import { useMenuRootContext } from '../Root/MenuRootContext'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; -import { CustomStyleHookMapping } from '../../utils/getStyleHookProps'; import { useId } from '../../utils/useId'; import type { BaseUIComponentProps, GenericHTMLProps } from '../../utils/types'; import { useForkRef } from '../../utils/useForkRef'; import { useMenuRadioGroupContext } from '../RadioGroup/MenuRadioGroupContext'; import { MenuRadioItemContext } from './MenuRadioItemContext'; - -const customStyleHookMapping: CustomStyleHookMapping = { - checked: (value: boolean) => ({ 'data-radioitem': value ? 'checked' : 'unchecked' }), -}; +import { itemMapping } from '../utils/styleHookMapping'; const InnerMenuRadioItem = React.memo( React.forwardRef(function InnerMenuItem( @@ -57,7 +53,7 @@ const InnerMenuRadioItem = React.memo( className, ownerState, propGetter: (externalProps) => propGetter(getRootProps(externalProps)), - customStyleHookMapping, + customStyleHookMapping: itemMapping, extraProps: other, }); diff --git a/packages/mui-base/src/Menu/RadioItemIndicator/MenuRadioItemIndicator.tsx b/packages/mui-base/src/Menu/RadioItemIndicator/MenuRadioItemIndicator.tsx index 2afe03d28..393fee7ac 100644 --- a/packages/mui-base/src/Menu/RadioItemIndicator/MenuRadioItemIndicator.tsx +++ b/packages/mui-base/src/Menu/RadioItemIndicator/MenuRadioItemIndicator.tsx @@ -1,14 +1,10 @@ +'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import { MenuRadioItem } from '../RadioItem/MenuRadioItem'; import { useMenuRadioItemContext } from '../RadioItem/MenuRadioItemContext'; -import { CustomStyleHookMapping } from '../../utils/getStyleHookProps'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { BaseUIComponentProps } from '../../utils/types'; - -const customStyleHookMapping: CustomStyleHookMapping = { - checked: (value: boolean) => ({ 'data-radioitem': value ? 'checked' : 'unchecked' }), -}; +import { itemMapping } from '../utils/styleHookMapping'; /** * @@ -32,7 +28,7 @@ const MenuRadioItemIndicator = React.forwardRef(function MenuRadioItemIndicatorC render: render || 'span', className, ownerState, - customStyleHookMapping, + customStyleHookMapping: itemMapping, extraProps: other, ref: forwardedRef, }); diff --git a/packages/mui-base/src/Menu/SubmenuTrigger/SubmenuTrigger.tsx b/packages/mui-base/src/Menu/SubmenuTrigger/SubmenuTrigger.tsx index c9a8e162f..4a32fdfde 100644 --- a/packages/mui-base/src/Menu/SubmenuTrigger/SubmenuTrigger.tsx +++ b/packages/mui-base/src/Menu/SubmenuTrigger/SubmenuTrigger.tsx @@ -4,11 +4,11 @@ import PropTypes from 'prop-types'; import { useFloatingTree, useListItem } from '@floating-ui/react'; import { BaseUIComponentProps, GenericHTMLProps } from '../../utils/types'; import { useMenuRootContext } from '../Root/MenuRootContext'; -import { commonStyleHooks } from '../utils/commonStyleHooks'; import { useId } from '../../utils/useId'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { useSubmenuTrigger } from './useSubmenuTrigger'; import { useForkRef } from '../../utils/useForkRef'; +import { triggerOpenStateMapping } from '../../utils/popupOpenStateMapping'; /** * @@ -60,7 +60,10 @@ const SubmenuTrigger = React.forwardRef(function SubmenuTriggerComponent( typingRef, }); - const ownerState: SubmenuTrigger.OwnerState = { disabled, highlighted, open }; + const ownerState: SubmenuTrigger.OwnerState = React.useMemo( + () => ({ disabled, highlighted, open }), + [disabled, highlighted, open], + ); const { renderElement } = useComponentRenderer({ render: render || 'div', @@ -68,7 +71,7 @@ const SubmenuTrigger = React.forwardRef(function SubmenuTriggerComponent( ownerState, propGetter: (externalProps: GenericHTMLProps) => getTriggerProps(getItemProps(getRootProps(externalProps))), - customStyleHookMapping: commonStyleHooks, + customStyleHookMapping: triggerOpenStateMapping, extraProps: other, }); diff --git a/packages/mui-base/src/Menu/Trigger/MenuTrigger.test.tsx b/packages/mui-base/src/Menu/Trigger/MenuTrigger.test.tsx index 1ee512071..305d9ad81 100644 --- a/packages/mui-base/src/Menu/Trigger/MenuTrigger.test.tsx +++ b/packages/mui-base/src/Menu/Trigger/MenuTrigger.test.tsx @@ -91,7 +91,7 @@ describe('', () => { const menuPopup = queryByRole('menu', { hidden: false }); expect(menuPopup).not.to.equal(null); - expect(menuPopup).to.have.attribute('data-menu', 'open'); + expect(menuPopup).to.have.attribute('data-open', ''); }); describe('keyboard navigation', () => { diff --git a/packages/mui-base/src/Menu/Trigger/MenuTrigger.tsx b/packages/mui-base/src/Menu/Trigger/MenuTrigger.tsx index 4e977f9f8..3d503ab03 100644 --- a/packages/mui-base/src/Menu/Trigger/MenuTrigger.tsx +++ b/packages/mui-base/src/Menu/Trigger/MenuTrigger.tsx @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import { useFloatingTree } from '@floating-ui/react'; import { useMenuTrigger } from './useMenuTrigger'; import { useMenuRootContext } from '../Root/MenuRootContext'; -import { commonStyleHooks } from '../utils/commonStyleHooks'; +import { triggerOpenStateMapping } from '../../utils/popupOpenStateMapping'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { BaseUIComponentProps } from '../../utils/types'; @@ -45,16 +45,14 @@ const MenuTrigger = React.forwardRef(function MenuTrigger( setClickAndDragEnabled, }); - const ownerState: MenuTrigger.OwnerState = { - open, - }; + const ownerState: MenuTrigger.OwnerState = React.useMemo(() => ({ open }), [open]); const { renderElement } = useComponentRenderer({ render: render || 'button', className, ownerState, propGetter: (externalProps) => getTriggerProps(getRootProps(externalProps)), - customStyleHookMapping: commonStyleHooks, + customStyleHookMapping: triggerOpenStateMapping, extraProps: other, }); diff --git a/packages/mui-base/src/Menu/utils/commonStyleHooks.ts b/packages/mui-base/src/Menu/utils/commonStyleHooks.ts deleted file mode 100644 index ca6997419..000000000 --- a/packages/mui-base/src/Menu/utils/commonStyleHooks.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const commonStyleHooks = { - open: (value: boolean) => ({ 'data-menu': value ? 'open' : 'closed' }), -}; diff --git a/packages/mui-base/src/Menu/utils/styleHookMapping.ts b/packages/mui-base/src/Menu/utils/styleHookMapping.ts new file mode 100644 index 000000000..35eb7e38d --- /dev/null +++ b/packages/mui-base/src/Menu/utils/styleHookMapping.ts @@ -0,0 +1,14 @@ +import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps'; + +export const itemMapping: CustomStyleHookMapping<{ checked: boolean }> = { + checked(value): Record { + if (value) { + return { + 'data-checked': '', + }; + } + return { + 'data-unchecked': '', + }; + }, +}; diff --git a/packages/mui-base/src/Popover/Arrow/PopoverArrow.tsx b/packages/mui-base/src/Popover/Arrow/PopoverArrow.tsx index d0ab6c5df..aefb6210e 100644 --- a/packages/mui-base/src/Popover/Arrow/PopoverArrow.tsx +++ b/packages/mui-base/src/Popover/Arrow/PopoverArrow.tsx @@ -8,15 +8,7 @@ import { useForkRef } from '../../utils/useForkRef'; import { usePopoverArrow } from './usePopoverArrow'; import type { Alignment, Side } from '../../utils/useAnchorPositioning'; import type { BaseUIComponentProps } from '../../utils/types'; -import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps'; - -const customStyleHookMapping: CustomStyleHookMapping = { - open(value) { - return { - 'data-state': value ? 'open' : 'closed', - }; - }, -}; +import { popupOpenStateMapping } from '../../utils/popupOpenStateMapping'; /** * Renders an arrow that points to the center of the anchor element. @@ -62,7 +54,7 @@ const PopoverArrow = React.forwardRef(function PopoverArrow( ownerState, ref: mergedRef, extraProps: otherProps, - customStyleHookMapping, + customStyleHookMapping: popupOpenStateMapping, }); return renderElement(); diff --git a/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.tsx b/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.tsx index f7732dd34..429d6be4f 100644 --- a/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.tsx +++ b/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.tsx @@ -7,6 +7,22 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { HTMLElementType } from '../../utils/proptypes'; import { usePopoverBackdrop } from './usePopoverBackdrop'; import type { BaseUIComponentProps } from '../../utils/types'; +import { type CustomStyleHookMapping } from '../../utils/getStyleHookProps'; +import { popupOpenStateMapping as baseMapping } from '../../utils/popupOpenStateMapping'; +import type { TransitionStatus } from '../../utils/useTransitionStatus'; + +const customStyleHookMapping: CustomStyleHookMapping = { + ...baseMapping, + transitionStatus(value) { + if (value === 'entering') { + return { 'data-entering': '' } as Record; + } + if (value === 'exiting') { + return { 'data-exiting': '' }; + } + return null; + }, +}; /** * Renders a backdrop for the popover. @@ -25,11 +41,17 @@ const PopoverBackdrop = React.forwardRef(function PopoverBackdrop( ) { const { className, render, keepMounted = false, container, ...otherProps } = props; - const { open, mounted } = usePopoverRootContext(); + const { open, mounted, transitionStatus } = usePopoverRootContext(); const { getBackdropProps } = usePopoverBackdrop(); - const ownerState = React.useMemo(() => ({ open }), [open]); + const ownerState = React.useMemo( + () => ({ + open, + transitionStatus, + }), + [open, transitionStatus], + ); const { renderElement } = useComponentRenderer({ propGetter: getBackdropProps, @@ -38,6 +60,7 @@ const PopoverBackdrop = React.forwardRef(function PopoverBackdrop( ownerState, ref: forwardedRef, extraProps: otherProps, + customStyleHookMapping, }); const shouldRender = keepMounted || mounted; @@ -51,6 +74,7 @@ const PopoverBackdrop = React.forwardRef(function PopoverBackdrop( namespace PopoverBackdrop { export interface OwnerState { open: boolean; + transitionStatus: TransitionStatus; } export interface Props extends BaseUIComponentProps<'div', OwnerState> { diff --git a/packages/mui-base/src/Popover/Popup/PopoverPopup.tsx b/packages/mui-base/src/Popover/Popup/PopoverPopup.tsx index aead56124..d919d9994 100644 --- a/packages/mui-base/src/Popover/Popup/PopoverPopup.tsx +++ b/packages/mui-base/src/Popover/Popup/PopoverPopup.tsx @@ -9,18 +9,19 @@ import { useForkRef } from '../../utils/useForkRef'; import type { Side, Alignment } from '../../utils/useAnchorPositioning'; import type { BaseUIComponentProps } from '../../utils/types'; import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps'; +import type { TransitionStatus } from '../../utils/useTransitionStatus'; +import { popupOpenStateMapping as baseMapping } from '../../utils/popupOpenStateMapping'; const customStyleHookMapping: CustomStyleHookMapping = { - entering(value) { - return value ? { 'data-entering': '' } : null; - }, - exiting(value) { - return value ? { 'data-exiting': '' } : null; - }, - open(value) { - return { - 'data-state': value ? 'open' : 'closed', - }; + ...baseMapping, + transitionStatus(value) { + if (value === 'entering') { + return { 'data-entering': '' } as Record; + } + if (value === 'exiting') { + return { 'data-exiting': '' }; + } + return null; }, }; @@ -64,8 +65,7 @@ const PopoverPopup = React.forwardRef(function PopoverPopup( side, alignment, instant: instantType, - entering: transitionStatus === 'entering', - exiting: transitionStatus === 'exiting', + transitionStatus, }), [open, side, alignment, instantType, transitionStatus], ); @@ -90,8 +90,7 @@ namespace PopoverPopup { open: boolean; side: Side; alignment: Alignment; - entering: boolean; - exiting: boolean; + transitionStatus: TransitionStatus; } export interface Props extends BaseUIComponentProps<'div', OwnerState> {} diff --git a/packages/mui-base/src/Popover/Positioner/PopoverPositioner.tsx b/packages/mui-base/src/Popover/Positioner/PopoverPositioner.tsx index 25399963d..e8ff43bac 100644 --- a/packages/mui-base/src/Popover/Positioner/PopoverPositioner.tsx +++ b/packages/mui-base/src/Popover/Positioner/PopoverPositioner.tsx @@ -10,6 +10,7 @@ import { PopoverPositionerContext } from './PopoverPositionerContext'; import { HTMLElementType } from '../../utils/proptypes'; import type { BaseUIComponentProps } from '../../utils/types'; import type { Side, Alignment } from '../../utils/useAnchorPositioning'; +import { popupOpenStateMapping } from '../../utils/popupOpenStateMapping'; /** * The popover positioner element. @@ -93,6 +94,7 @@ const PopoverPositioner = React.forwardRef(function PopoverPositioner( ownerState, ref: mergedRef, extraProps: otherProps, + customStyleHookMapping: popupOpenStateMapping, }); const shouldRender = keepMounted || mounted; diff --git a/packages/mui-base/src/Popover/Trigger/PopoverTrigger.tsx b/packages/mui-base/src/Popover/Trigger/PopoverTrigger.tsx index f350bb1cf..42906c985 100644 --- a/packages/mui-base/src/Popover/Trigger/PopoverTrigger.tsx +++ b/packages/mui-base/src/Popover/Trigger/PopoverTrigger.tsx @@ -5,15 +5,7 @@ import { usePopoverRootContext } from '../Root/PopoverRootContext'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { useForkRef } from '../../utils/useForkRef'; import type { BaseUIComponentProps } from '../../utils/types'; -import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps'; - -const customStyleHookMapping: CustomStyleHookMapping = { - open(value) { - return { - 'data-state': value ? 'open' : 'closed', - }; - }, -}; +import { triggerOpenStateMapping } from '../../utils/popupOpenStateMapping'; /** * Renders a trigger element that opens the popover. @@ -45,7 +37,7 @@ const PopoverTrigger = React.forwardRef(function PopoverTrigger( ownerState, ref: mergedRef, extraProps: otherProps, - customStyleHookMapping, + customStyleHookMapping: triggerOpenStateMapping, }); return renderElement(); diff --git a/packages/mui-base/src/PreviewCard/Arrow/PreviewCardArrow.tsx b/packages/mui-base/src/PreviewCard/Arrow/PreviewCardArrow.tsx index d15181638..b7f46824b 100644 --- a/packages/mui-base/src/PreviewCard/Arrow/PreviewCardArrow.tsx +++ b/packages/mui-base/src/PreviewCard/Arrow/PreviewCardArrow.tsx @@ -8,6 +8,7 @@ import { useForkRef } from '../../utils/useForkRef'; import { usePreviewCardRootContext } from '../Root/PreviewCardContext'; import type { BaseUIComponentProps } from '../../utils/types'; import type { Alignment, Side } from '../../utils/useAnchorPositioning'; +import { popupOpenStateMapping } from '../../utils/popupOpenStateMapping'; /** * @@ -52,6 +53,7 @@ const PreviewCardArrow = React.forwardRef(function PreviewCardArrow( ownerState, ref: mergedRef, extraProps: otherProps, + customStyleHookMapping: popupOpenStateMapping, }); return renderElement(); diff --git a/packages/mui-base/src/PreviewCard/Backdrop/PreviewCardBackdrop.tsx b/packages/mui-base/src/PreviewCard/Backdrop/PreviewCardBackdrop.tsx index 0c24d5246..fea035ea5 100644 --- a/packages/mui-base/src/PreviewCard/Backdrop/PreviewCardBackdrop.tsx +++ b/packages/mui-base/src/PreviewCard/Backdrop/PreviewCardBackdrop.tsx @@ -7,6 +7,22 @@ import { usePreviewCardRootContext } from '../Root/PreviewCardContext'; import { usePreviewCardBackdrop } from './usePreviewCardBackdrop'; import { HTMLElementType } from '../../utils/proptypes'; import type { BaseUIComponentProps } from '../../utils/types'; +import { type CustomStyleHookMapping } from '../../utils/getStyleHookProps'; +import { popupOpenStateMapping as baseMapping } from '../../utils/popupOpenStateMapping'; +import type { TransitionStatus } from '../../utils/useTransitionStatus'; + +const customStyleHookMapping: CustomStyleHookMapping = { + ...baseMapping, + transitionStatus(value) { + if (value === 'entering') { + return { 'data-entering': '' } as Record; + } + if (value === 'exiting') { + return { 'data-exiting': '' }; + } + return null; + }, +}; /** * @@ -24,10 +40,16 @@ const PreviewCardBackdrop = React.forwardRef(function PreviewCardBackdrop( ) { const { render, className, keepMounted = false, container, ...otherProps } = props; - const { open, mounted } = usePreviewCardRootContext(); + const { open, mounted, transitionStatus } = usePreviewCardRootContext(); const { getBackdropProps } = usePreviewCardBackdrop(); - const ownerState: PreviewCardBackdrop.OwnerState = React.useMemo(() => ({ open }), [open]); + const ownerState: PreviewCardBackdrop.OwnerState = React.useMemo( + () => ({ + open, + transitionStatus, + }), + [open, transitionStatus], + ); const { renderElement } = useComponentRenderer({ propGetter: getBackdropProps, @@ -36,6 +58,7 @@ const PreviewCardBackdrop = React.forwardRef(function PreviewCardBackdrop( ownerState, ref: forwardedRef, extraProps: otherProps, + customStyleHookMapping, }); const shouldRender = keepMounted || mounted; @@ -49,6 +72,7 @@ const PreviewCardBackdrop = React.forwardRef(function PreviewCardBackdrop( namespace PreviewCardBackdrop { export interface OwnerState { open: boolean; + transitionStatus: TransitionStatus; } export interface Props extends BaseUIComponentProps<'div', OwnerState> { diff --git a/packages/mui-base/src/PreviewCard/Popup/PreviewCardPopup.tsx b/packages/mui-base/src/PreviewCard/Popup/PreviewCardPopup.tsx index f2f858a14..606c8575a 100644 --- a/packages/mui-base/src/PreviewCard/Popup/PreviewCardPopup.tsx +++ b/packages/mui-base/src/PreviewCard/Popup/PreviewCardPopup.tsx @@ -9,18 +9,19 @@ import { useForkRef } from '../../utils/useForkRef'; import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps'; import type { Alignment, Side } from '../../utils/useAnchorPositioning'; import type { BaseUIComponentProps } from '../../utils/types'; +import { popupOpenStateMapping as baseMapping } from '../../utils/popupOpenStateMapping'; +import type { TransitionStatus } from '../../utils/useTransitionStatus'; const customStyleHookMapping: CustomStyleHookMapping = { - entering(value) { - return value ? { 'data-entering': '' } : null; - }, - exiting(value) { - return value ? { 'data-exiting': '' } : null; - }, - open(value) { - return { - 'data-state': value ? 'open' : 'closed', - }; + ...baseMapping, + transitionStatus(value) { + if (value === 'entering') { + return { 'data-entering': '' } as Record; + } + if (value === 'exiting') { + return { 'data-exiting': '' }; + } + return null; }, }; @@ -52,8 +53,7 @@ const PreviewCardPopup = React.forwardRef(function PreviewCardPopup( open, side, alignment, - entering: transitionStatus === 'entering', - exiting: transitionStatus === 'exiting', + transitionStatus, }), [open, side, alignment, transitionStatus], ); @@ -78,8 +78,7 @@ namespace PreviewCardPopup { open: boolean; side: Side; alignment: Alignment; - entering: boolean; - exiting: boolean; + transitionStatus: TransitionStatus; } export interface Props extends BaseUIComponentProps<'div', OwnerState> {} diff --git a/packages/mui-base/src/PreviewCard/Positioner/PreviewCardPositioner.tsx b/packages/mui-base/src/PreviewCard/Positioner/PreviewCardPositioner.tsx index 8c0f2c4ce..e19173a40 100644 --- a/packages/mui-base/src/PreviewCard/Positioner/PreviewCardPositioner.tsx +++ b/packages/mui-base/src/PreviewCard/Positioner/PreviewCardPositioner.tsx @@ -10,6 +10,7 @@ import { useForkRef } from '../../utils/useForkRef'; import { HTMLElementType } from '../../utils/proptypes'; import type { Side, Alignment } from '../../utils/useAnchorPositioning'; import type { BaseUIComponentProps } from '../../utils/types'; +import { popupOpenStateMapping } from '../../utils/popupOpenStateMapping'; /** * @@ -101,6 +102,7 @@ const PreviewCardPositioner = React.forwardRef(function PreviewCardPositioner( ownerState, ref: mergedRef, extraProps: otherProps, + customStyleHookMapping: popupOpenStateMapping, }); const shouldRender = keepMounted || mounted; diff --git a/packages/mui-base/src/PreviewCard/Trigger/PreviewCardTrigger.tsx b/packages/mui-base/src/PreviewCard/Trigger/PreviewCardTrigger.tsx index 19a5b07b0..df558fb5e 100644 --- a/packages/mui-base/src/PreviewCard/Trigger/PreviewCardTrigger.tsx +++ b/packages/mui-base/src/PreviewCard/Trigger/PreviewCardTrigger.tsx @@ -5,6 +5,7 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { usePreviewCardRootContext } from '../Root/PreviewCardContext'; import { useForkRef } from '../../utils/useForkRef'; import type { BaseUIComponentProps } from '../../utils/types'; +import { triggerOpenStateMapping } from '../../utils/popupOpenStateMapping'; /** * @@ -35,6 +36,7 @@ const PreviewCardTrigger = React.forwardRef(function PreviewCardTrigger( ownerState, ref: mergedRef, extraProps: otherProps, + customStyleHookMapping: triggerOpenStateMapping, }); return renderElement(); diff --git a/packages/mui-base/src/Tooltip/Arrow/TooltipArrow.tsx b/packages/mui-base/src/Tooltip/Arrow/TooltipArrow.tsx index c6d948fa5..33951b87b 100644 --- a/packages/mui-base/src/Tooltip/Arrow/TooltipArrow.tsx +++ b/packages/mui-base/src/Tooltip/Arrow/TooltipArrow.tsx @@ -5,17 +5,9 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { useForkRef } from '../../utils/useForkRef'; import { useTooltipPositionerContext } from '../Positioner/TooltipPositionerContext'; import { useTooltipArrow } from './useTooltipArrow'; -import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps'; import type { BaseUIComponentProps } from '../../utils/types'; import type { Side, Alignment } from '../../utils/useAnchorPositioning'; - -const customStyleHookMapping: CustomStyleHookMapping = { - open(value) { - return { - 'data-state': value ? 'open' : 'closed', - }; - }, -}; +import { popupOpenStateMapping } from '../../utils/popupOpenStateMapping'; /** * Renders an arrow that points to the center of the anchor element. @@ -60,7 +52,7 @@ const TooltipArrow = React.forwardRef(function TooltipArrow( className, ref: mergedRef, extraProps: otherProps, - customStyleHookMapping, + customStyleHookMapping: popupOpenStateMapping, }); return renderElement(); diff --git a/packages/mui-base/src/Tooltip/Popup/TooltipPopup.tsx b/packages/mui-base/src/Tooltip/Popup/TooltipPopup.tsx index 08a788d5b..7c062a8f8 100644 --- a/packages/mui-base/src/Tooltip/Popup/TooltipPopup.tsx +++ b/packages/mui-base/src/Tooltip/Popup/TooltipPopup.tsx @@ -8,18 +8,19 @@ import { useForkRef } from '../../utils/useForkRef'; import type { BaseUIComponentProps } from '../../utils/types'; import type { Alignment, Side } from '../../utils/useAnchorPositioning'; import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps'; +import { popupOpenStateMapping as baseMapping } from '../../utils/popupOpenStateMapping'; +import type { TransitionStatus } from '../../utils/useTransitionStatus'; const customStyleHookMapping: CustomStyleHookMapping = { - entering(value) { - return value ? { 'data-entering': '' } : null; - }, - exiting(value) { - return value ? { 'data-exiting': '' } : null; - }, - open(value) { - return { - 'data-state': value ? 'open' : 'closed', - }; + ...baseMapping, + transitionStatus(value) { + if (value === 'entering') { + return { 'data-entering': '' } as Record; + } + if (value === 'exiting') { + return { 'data-exiting': '' }; + } + return null; }, }; @@ -50,8 +51,7 @@ const TooltipPopup = React.forwardRef(function TooltipPopup( side, alignment, instant: instantType, - entering: transitionStatus === 'entering', - exiting: transitionStatus === 'exiting', + transitionStatus, }), [open, side, alignment, instantType, transitionStatus], ); @@ -79,8 +79,7 @@ namespace TooltipPopup { side: Side; alignment: Alignment; instant: 'delay' | 'focus' | 'dismiss' | undefined; - entering: boolean; - exiting: boolean; + transitionStatus: TransitionStatus; } export interface Props extends BaseUIComponentProps<'div', OwnerState> {} diff --git a/packages/mui-base/src/Tooltip/Positioner/TooltipPositioner.tsx b/packages/mui-base/src/Tooltip/Positioner/TooltipPositioner.tsx index 76e9e0542..980a83fb7 100644 --- a/packages/mui-base/src/Tooltip/Positioner/TooltipPositioner.tsx +++ b/packages/mui-base/src/Tooltip/Positioner/TooltipPositioner.tsx @@ -10,6 +10,7 @@ import { TooltipPositionerContext } from './TooltipPositionerContext'; import { useTooltipPositioner } from './useTooltipPositioner'; import type { BaseUIComponentProps } from '../../utils/types'; import type { Side, Alignment } from '../../utils/useAnchorPositioning'; +import { popupOpenStateMapping } from '../../utils/popupOpenStateMapping'; /** * The tooltip positioner element. @@ -100,6 +101,7 @@ const TooltipPositioner = React.forwardRef(function TooltipPositioner( ownerState, ref: mergedRef, extraProps: otherProps, + customStyleHookMapping: popupOpenStateMapping, }); const shouldRender = keepMounted || mounted; diff --git a/packages/mui-base/src/Tooltip/Trigger/TooltipTrigger.tsx b/packages/mui-base/src/Tooltip/Trigger/TooltipTrigger.tsx index 129609602..6bbe0f039 100644 --- a/packages/mui-base/src/Tooltip/Trigger/TooltipTrigger.tsx +++ b/packages/mui-base/src/Tooltip/Trigger/TooltipTrigger.tsx @@ -5,15 +5,7 @@ import { useTooltipRootContext } from '../Root/TooltipRootContext'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { useForkRef } from '../../utils/useForkRef'; import type { BaseUIComponentProps } from '../../utils/types'; -import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps'; - -const customStyleHookMapping: CustomStyleHookMapping = { - open(value: boolean) { - return { - 'data-state': value ? 'open' : 'closed', - }; - }, -}; +import { triggerOpenStateMapping } from '../../utils/popupOpenStateMapping'; /** * Renders a trigger element that opens the tooltip. @@ -45,7 +37,7 @@ const TooltipTrigger = React.forwardRef(function TooltipTrigger( ownerState, ref: mergedRef, extraProps: otherProps, - customStyleHookMapping, + customStyleHookMapping: triggerOpenStateMapping, }); return renderElement(); diff --git a/packages/mui-base/src/utils/popupOpenStateMapping.ts b/packages/mui-base/src/utils/popupOpenStateMapping.ts new file mode 100644 index 000000000..a17d2248f --- /dev/null +++ b/packages/mui-base/src/utils/popupOpenStateMapping.ts @@ -0,0 +1,23 @@ +import type { CustomStyleHookMapping } from './getStyleHookProps'; + +export const triggerOpenStateMapping: CustomStyleHookMapping<{ open: boolean }> = { + open(value) { + if (value) { + return { + 'data-popup-open': '', + }; + } + return null; + }, +}; + +export const popupOpenStateMapping: CustomStyleHookMapping<{ open: boolean }> = { + open(value) { + if (value) { + return { + 'data-open': '', + }; + } + return null; + }, +}; From 18256f6b4bae644d0d4561fe2b426b1bf008e5cf Mon Sep 17 00:00:00 2001 From: atomiks Date: Tue, 15 Oct 2024 22:50:25 +1100 Subject: [PATCH 2/7] [core] Remove `delayType` prop across hoverable popup components (#730) --- docs/data/api/popover-root.json | 4 --- docs/data/api/preview-card-root.json | 4 --- docs/data/api/tooltip-root.json | 4 --- docs/data/components/popover/popover.mdx | 6 ----- .../components/preview-card/preview-card.mdx | 6 ----- docs/data/components/tooltip/tooltip.mdx | 6 ----- .../api-docs/popover-root/popover-root.json | 3 --- .../preview-card-root/preview-card-root.json | 3 --- .../api-docs/tooltip-root/tooltip-root.json | 3 --- .../src/Popover/Root/PopoverRoot.test.tsx | 26 ------------------- .../mui-base/src/Popover/Root/PopoverRoot.tsx | 13 +--------- .../src/Popover/Root/PopoverRootContext.ts | 1 - .../src/Popover/Root/usePopoverRoot.ts | 17 +----------- .../PreviewCard/Root/PreviewCardContext.ts | 1 - .../PreviewCard/Root/PreviewCardRoot.test.tsx | 26 ------------------- .../src/PreviewCard/Root/PreviewCardRoot.tsx | 13 +--------- .../PreviewCard/Root/usePreviewCardRoot.ts | 17 +----------- .../src/Tooltip/Root/TooltipRoot.test.tsx | 26 ------------------- .../mui-base/src/Tooltip/Root/TooltipRoot.tsx | 19 +------------- .../src/Tooltip/Root/TooltipRootContext.ts | 1 - .../src/Tooltip/Root/useTooltipRoot.ts | 25 +----------------- 21 files changed, 6 insertions(+), 218 deletions(-) diff --git a/docs/data/api/popover-root.json b/docs/data/api/popover-root.json index a18b9808e..33a7ac57a 100644 --- a/docs/data/api/popover-root.json +++ b/docs/data/api/popover-root.json @@ -4,10 +4,6 @@ "closeDelay": { "type": { "name": "number" }, "default": "0" }, "defaultOpen": { "type": { "name": "bool" }, "default": "false" }, "delay": { "type": { "name": "number" }, "default": "300" }, - "delayType": { - "type": { "name": "enum", "description": "'hover'
| 'rest'" }, - "default": "'rest'" - }, "onOpenChange": { "type": { "name": "func" } }, "open": { "type": { "name": "bool" }, "default": "false" }, "openOnHover": { "type": { "name": "bool" }, "default": "false" } diff --git a/docs/data/api/preview-card-root.json b/docs/data/api/preview-card-root.json index df36fdd35..5de5a028c 100644 --- a/docs/data/api/preview-card-root.json +++ b/docs/data/api/preview-card-root.json @@ -4,10 +4,6 @@ "closeDelay": { "type": { "name": "number" }, "default": "300" }, "defaultOpen": { "type": { "name": "bool" }, "default": "false" }, "delay": { "type": { "name": "number" }, "default": "600" }, - "delayType": { - "type": { "name": "enum", "description": "'hover'
| 'rest'" }, - "default": "'rest'" - }, "onOpenChange": { "type": { "name": "func" } }, "open": { "type": { "name": "bool" }, "default": "false" } }, diff --git a/docs/data/api/tooltip-root.json b/docs/data/api/tooltip-root.json index fb548b9ca..1c6fcd687 100644 --- a/docs/data/api/tooltip-root.json +++ b/docs/data/api/tooltip-root.json @@ -4,10 +4,6 @@ "closeDelay": { "type": { "name": "number" }, "default": "0" }, "defaultOpen": { "type": { "name": "bool" }, "default": "false" }, "delay": { "type": { "name": "number" }, "default": "600" }, - "delayType": { - "type": { "name": "enum", "description": "'hover'
| 'rest'" }, - "default": "'rest'" - }, "hoverable": { "type": { "name": "bool" }, "default": "true" }, "onOpenChange": { "type": { "name": "func" } }, "open": { "type": { "name": "bool" }, "default": "false" }, diff --git a/docs/data/components/popover/popover.mdx b/docs/data/components/popover/popover.mdx index f851aba31..b39bc3e84 100644 --- a/docs/data/components/popover/popover.mdx +++ b/docs/data/components/popover/popover.mdx @@ -111,12 +111,6 @@ To change how long the popover waits until it opens or closes when `openOnHover` ``` -The delay type can be changed from `"rest"` (user's cursor is static over the trigger for the given timeout in milliseconds) to `"hover"` (the user's cursor has entered the trigger): - -```jsx - -``` - ## Controlled To control the popover with external state, use the `open` and `onOpenChange` props: diff --git a/docs/data/components/preview-card/preview-card.mdx b/docs/data/components/preview-card/preview-card.mdx index 51bf0f086..1c708b9a5 100644 --- a/docs/data/components/preview-card/preview-card.mdx +++ b/docs/data/components/preview-card/preview-card.mdx @@ -104,12 +104,6 @@ To change how long the Preview Card waits until it opens or closes, use the `del ``` -The delay type can be changed from `"rest"` (user's cursor is static over the trigger for the given timeout in milliseconds) to `"hover"` (the user's cursor has entered the trigger): - -```jsx - -``` - ## Controlled To control the Preview Card with external state, use the `open` and `onOpenChange` props: diff --git a/docs/data/components/tooltip/tooltip.mdx b/docs/data/components/tooltip/tooltip.mdx index e2a7cad95..758d3339b 100644 --- a/docs/data/components/tooltip/tooltip.mdx +++ b/docs/data/components/tooltip/tooltip.mdx @@ -126,12 +126,6 @@ To change how long the tooltip waits until it opens or closes, use the `delay` a ``` -The delay type can be changed from `"rest"` (user's cursor is static over the trigger for the given timeout in milliseconds) to `"hover"` (the user's cursor has entered the trigger): - -```jsx - -``` - ## Controlled To control the tooltip with external state, use the `open` and `onOpenChange` props: diff --git a/docs/data/translations/api-docs/popover-root/popover-root.json b/docs/data/translations/api-docs/popover-root/popover-root.json index 0029313ff..9c1d22710 100644 --- a/docs/data/translations/api-docs/popover-root/popover-root.json +++ b/docs/data/translations/api-docs/popover-root/popover-root.json @@ -13,9 +13,6 @@ "delay": { "description": "The delay in milliseconds until the popover popup is opened when openOnHover is true." }, - "delayType": { - "description": "The delay type to use when openOnHover is true. rest means the delay represents how long the user's cursor must rest on the trigger before the popover popup is opened. hover means the delay represents how long to wait as soon as the user's cursor has entered the trigger." - }, "onOpenChange": { "description": "Callback fired when the popover popup is requested to be opened or closed. Use when controlled." }, diff --git a/docs/data/translations/api-docs/preview-card-root/preview-card-root.json b/docs/data/translations/api-docs/preview-card-root/preview-card-root.json index 548715836..6baba1c2d 100644 --- a/docs/data/translations/api-docs/preview-card-root/preview-card-root.json +++ b/docs/data/translations/api-docs/preview-card-root/preview-card-root.json @@ -13,9 +13,6 @@ "delay": { "description": "The delay in milliseconds until the preview card popup is opened when openOnHover is true." }, - "delayType": { - "description": "The delay type to use when the preview card is triggered by hover. rest means the delay represents how long the user's cursor must rest on the trigger before the preview card popup is opened. hover means the delay represents how long to wait as soon as the user's cursor has entered the trigger." - }, "onOpenChange": { "description": "Callback fired when the preview card popup is requested to be opened or closed. Use when controlled." }, diff --git a/docs/data/translations/api-docs/tooltip-root/tooltip-root.json b/docs/data/translations/api-docs/tooltip-root/tooltip-root.json index 137b9daae..3040a2297 100644 --- a/docs/data/translations/api-docs/tooltip-root/tooltip-root.json +++ b/docs/data/translations/api-docs/tooltip-root/tooltip-root.json @@ -9,9 +9,6 @@ "description": "Whether the tooltip popup is open by default. Use when uncontrolled." }, "delay": { "description": "The delay in milliseconds until the tooltip popup is opened." }, - "delayType": { - "description": "The delay type to use. rest means the delay represents how long the user's cursor must rest on the trigger before the tooltip popup is opened. hover means the delay represents how long to wait as soon as the user's cursor has entered the trigger." - }, "hoverable": { "description": "Whether the user can move their cursor from the trigger element toward the tooltip popup element without it closing using a "safe polygon" technique." }, diff --git a/packages/mui-base/src/Popover/Root/PopoverRoot.test.tsx b/packages/mui-base/src/Popover/Root/PopoverRoot.test.tsx index 029c349c1..495fc2f1a 100644 --- a/packages/mui-base/src/Popover/Root/PopoverRoot.test.tsx +++ b/packages/mui-base/src/Popover/Root/PopoverRoot.test.tsx @@ -263,32 +263,6 @@ describe('', () => { expect(screen.getByText('Content')).not.to.equal(null); }); - - it('should open after delay with hover type', async () => { - await render( - - - - Content - - , - ); - - const anchor = screen.getByRole('button'); - - fireEvent.mouseEnter(anchor); - clock.tick(OPEN_DELAY / 2); - - await flushMicrotasks(); - - expect(screen.queryByText('Content')).to.equal(null); - - clock.tick(OPEN_DELAY / 2); - - await flushMicrotasks(); - - expect(screen.getByText('Content')).not.to.equal(null); - }); }); describe('prop: closeDelay', () => { diff --git a/packages/mui-base/src/Popover/Root/PopoverRoot.tsx b/packages/mui-base/src/Popover/Root/PopoverRoot.tsx index cfc4c2d24..905deebde 100644 --- a/packages/mui-base/src/Popover/Root/PopoverRoot.tsx +++ b/packages/mui-base/src/Popover/Root/PopoverRoot.tsx @@ -17,7 +17,7 @@ import { OPEN_DELAY } from '../utils/constants'; * - [PopoverRoot API](https://base-ui.netlify.app/components/react-popover/#api-reference-PopoverRoot) */ const PopoverRoot: React.FC = function PopoverRoot(props) { - const { openOnHover = false, delayType = 'rest', delay, closeDelay = 0, animated = true } = props; + const { openOnHover = false, delay, closeDelay = 0, animated = true } = props; const delayWithDefault = delay ?? OPEN_DELAY; @@ -43,7 +43,6 @@ const PopoverRoot: React.FC = function PopoverRoot(props) { } = usePopoverRoot({ openOnHover, delay: delayWithDefault, - delayType, closeDelay, animated, open: props.open, @@ -55,7 +54,6 @@ const PopoverRoot: React.FC = function PopoverRoot(props) { () => ({ openOnHover, delay: delayWithDefault, - delayType, closeDelay, open, setOpen, @@ -79,7 +77,6 @@ const PopoverRoot: React.FC = function PopoverRoot(props) { [ openOnHover, delayWithDefault, - delayType, closeDelay, open, setOpen, @@ -145,14 +142,6 @@ PopoverRoot.propTypes /* remove-proptypes */ = { * @default 300 */ delay: PropTypes.number, - /** - * The delay type to use when `openOnHover` is `true`. `rest` means the `delay` represents how - * long the user's cursor must rest on the trigger before the popover popup is opened. `hover` - * means the `delay` represents how long to wait as soon as the user's cursor has entered the - * trigger. - * @default 'rest' - */ - delayType: PropTypes.oneOf(['hover', 'rest']), /** * Callback fired when the popover popup is requested to be opened or closed. Use when * controlled. diff --git a/packages/mui-base/src/Popover/Root/PopoverRootContext.ts b/packages/mui-base/src/Popover/Root/PopoverRootContext.ts index 3e696ad04..a6f621d8a 100644 --- a/packages/mui-base/src/Popover/Root/PopoverRootContext.ts +++ b/packages/mui-base/src/Popover/Root/PopoverRootContext.ts @@ -15,7 +15,6 @@ export interface PopoverRootContext { popupRef: React.RefObject; delay: number; closeDelay: number; - delayType: 'rest' | 'hover'; instantType: 'dismiss' | 'click' | undefined; mounted: boolean; setMounted: React.Dispatch>; diff --git a/packages/mui-base/src/Popover/Root/usePopoverRoot.ts b/packages/mui-base/src/Popover/Root/usePopoverRoot.ts index a1b201177..b8b609abb 100644 --- a/packages/mui-base/src/Popover/Root/usePopoverRoot.ts +++ b/packages/mui-base/src/Popover/Root/usePopoverRoot.ts @@ -25,7 +25,6 @@ export function usePopoverRoot(params: usePopoverRoot.Parameters): usePopoverRoo onOpenChange: onOpenChangeProp = () => {}, defaultOpen = false, keepMounted = false, - delayType = 'rest', delay, closeDelay, openOnHover = false, @@ -96,12 +95,7 @@ export function usePopoverRoot(params: usePopoverRoot.Parameters): usePopoverRoo }, }); - const computedRestMs = delayType === 'rest' ? delayWithDefault : undefined; - let computedOpenDelay: number | undefined = delayType === 'hover' ? delayWithDefault : undefined; - - if (delayType === 'hover') { - computedOpenDelay = delay == null ? delayWithDefault : delay; - } + const computedRestMs = delayWithDefault; const hover = useHover(context, { enabled: openOnHover, @@ -110,7 +104,6 @@ export function usePopoverRoot(params: usePopoverRoot.Parameters): usePopoverRoo handleClose: safePolygon(), restMs: computedRestMs, delay: { - open: computedOpenDelay, close: closeDelayWithDefault, }, }); @@ -191,14 +184,6 @@ export namespace usePopoverRoot { * @default 0 */ closeDelay?: number; - /** - * The delay type to use when `openOnHover` is `true`. `rest` means the `delay` represents how - * long the user's cursor must rest on the trigger before the popover popup is opened. `hover` - * means the `delay` represents how long to wait as soon as the user's cursor has entered the - * trigger. - * @default 'rest' - */ - delayType?: 'rest' | 'hover'; /** * Whether the popover popup element stays mounted in the DOM when closed. * @default false diff --git a/packages/mui-base/src/PreviewCard/Root/PreviewCardContext.ts b/packages/mui-base/src/PreviewCard/Root/PreviewCardContext.ts index f3e6b1291..4e87ed603 100644 --- a/packages/mui-base/src/PreviewCard/Root/PreviewCardContext.ts +++ b/packages/mui-base/src/PreviewCard/Root/PreviewCardContext.ts @@ -13,7 +13,6 @@ export interface PreviewCardRootContext { setPositionerElement: (el: HTMLElement | null) => void; delay: number; closeDelay: number; - delayType: 'rest' | 'hover'; mounted: boolean; setMounted: React.Dispatch>; getRootTriggerProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps; diff --git a/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.test.tsx b/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.test.tsx index b379c31fe..33949b762 100644 --- a/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.test.tsx +++ b/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.test.tsx @@ -330,32 +330,6 @@ describe('', () => { expect(screen.getByText('Content')).not.to.equal(null); }); - - it('should open after delay with hover type', async () => { - await render( - - - - Content - - , - ); - - const trigger = screen.getByRole('link'); - - fireEvent.mouseEnter(trigger); - clock.tick(OPEN_DELAY - 100); - - await flushMicrotasks(); - - expect(screen.queryByText('Content')).to.equal(null); - - clock.tick(100); - - await flushMicrotasks(); - - expect(screen.getByText('Content')).not.to.equal(null); - }); }); describe('prop: closeDelay', () => { diff --git a/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.tsx b/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.tsx index 39922404c..9894946c0 100644 --- a/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.tsx +++ b/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.tsx @@ -16,7 +16,7 @@ import { CLOSE_DELAY, OPEN_DELAY } from '../utils/constants'; * - [PreviewCardRoot API](https://base-ui.netlify.app/components/react-preview-card/#api-reference-PreviewCardRoot) */ const PreviewCardRoot: React.FC = function PreviewCardRoot(props) { - const { delayType = 'rest', delay, closeDelay, animated = true } = props; + const { delay, closeDelay, animated = true } = props; const delayWithDefault = delay ?? OPEN_DELAY; const closeDelayWithDefault = closeDelay ?? CLOSE_DELAY; @@ -39,7 +39,6 @@ const PreviewCardRoot: React.FC = function PreviewCardRoo } = usePreviewCardRoot({ animated, delay, - delayType, closeDelay, open: props.open, onOpenChange: props.onOpenChange, @@ -49,7 +48,6 @@ const PreviewCardRoot: React.FC = function PreviewCardRoo const contextValue = React.useMemo( () => ({ delay: delayWithDefault, - delayType, closeDelay: closeDelayWithDefault, open, setOpen, @@ -68,7 +66,6 @@ const PreviewCardRoot: React.FC = function PreviewCardRoo }), [ delayWithDefault, - delayType, closeDelayWithDefault, open, setOpen, @@ -132,14 +129,6 @@ PreviewCardRoot.propTypes /* remove-proptypes */ = { * @default 600 */ delay: PropTypes.number, - /** - * The delay type to use when the preview card is triggered by hover. `rest` means the `delay` - * represents how long the user's cursor must rest on the trigger before the preview card popup is - * opened. `hover` means the `delay` represents how long to wait as soon as the user's cursor has - * entered the trigger. - * @default 'rest' - */ - delayType: PropTypes.oneOf(['hover', 'rest']), /** * Callback fired when the preview card popup is requested to be opened or closed. Use when * controlled. diff --git a/packages/mui-base/src/PreviewCard/Root/usePreviewCardRoot.ts b/packages/mui-base/src/PreviewCard/Root/usePreviewCardRoot.ts index 1e9e3dc64..33f0be50c 100644 --- a/packages/mui-base/src/PreviewCard/Root/usePreviewCardRoot.ts +++ b/packages/mui-base/src/PreviewCard/Root/usePreviewCardRoot.ts @@ -27,7 +27,6 @@ export function usePreviewCardRoot( defaultOpen = false, keepMounted = false, animated = true, - delayType = 'rest', delay, closeDelay, } = params; @@ -98,12 +97,7 @@ export function usePreviewCardRoot( }); const instantType = instantTypeState; - const computedRestMs = delayType === 'rest' ? delayWithDefault : undefined; - let computedOpenDelay: number | undefined = delayType === 'hover' ? delayWithDefault : undefined; - - if (delayType === 'hover') { - computedOpenDelay = delay == null ? delayWithDefault : delay; - } + const computedRestMs = delayWithDefault; const hover = useHover(context, { mouseOnly: true, @@ -111,7 +105,6 @@ export function usePreviewCardRoot( handleClose: safePolygon(), restMs: computedRestMs, delay: { - open: computedOpenDelay, close: closeDelayWithDefault, }, }); @@ -186,14 +179,6 @@ export namespace usePreviewCardRoot { * @default 300 */ closeDelay?: number; - /** - * The delay type to use when the preview card is triggered by hover. `rest` means the `delay` - * represents how long the user's cursor must rest on the trigger before the preview card popup is - * opened. `hover` means the `delay` represents how long to wait as soon as the user's cursor has - * entered the trigger. - * @default 'rest' - */ - delayType?: 'rest' | 'hover'; /** * Whether the preview card popup element stays mounted in the DOM when closed. * @default false diff --git a/packages/mui-base/src/Tooltip/Root/TooltipRoot.test.tsx b/packages/mui-base/src/Tooltip/Root/TooltipRoot.test.tsx index 809bc2ce6..e95ceb633 100644 --- a/packages/mui-base/src/Tooltip/Root/TooltipRoot.test.tsx +++ b/packages/mui-base/src/Tooltip/Root/TooltipRoot.test.tsx @@ -328,32 +328,6 @@ describe('', () => { expect(screen.getByText('Content')).not.to.equal(null); }); - - it('should open after delay with hover type', async () => { - await render( - - - - Content - - , - ); - - const trigger = screen.getByRole('button'); - - fireEvent.mouseEnter(trigger); - clock.tick(OPEN_DELAY - 100); - - await flushMicrotasks(); - - expect(screen.queryByText('Content')).to.equal(null); - - clock.tick(100); - - await flushMicrotasks(); - - expect(screen.getByText('Content')).not.to.equal(null); - }); }); describe('prop: closeDelay', () => { diff --git a/packages/mui-base/src/Tooltip/Root/TooltipRoot.tsx b/packages/mui-base/src/Tooltip/Root/TooltipRoot.tsx index 71cf3d7b3..b44e3360d 100644 --- a/packages/mui-base/src/Tooltip/Root/TooltipRoot.tsx +++ b/packages/mui-base/src/Tooltip/Root/TooltipRoot.tsx @@ -17,14 +17,7 @@ import { OPEN_DELAY } from '../utils/constants'; * - [TooltipRoot API](https://base-ui.netlify.app/components/react-tooltip/#api-reference-TooltipRoot) */ const TooltipRoot: React.FC = function TooltipRoot(props) { - const { - delayType = 'rest', - delay, - closeDelay, - hoverable = true, - animated = true, - trackCursorAxis = 'none', - } = props; + const { delay, closeDelay, hoverable = true, animated = true, trackCursorAxis = 'none' } = props; const delayWithDefault = delay ?? OPEN_DELAY; const closeDelayWithDefault = closeDelay ?? 0; @@ -49,7 +42,6 @@ const TooltipRoot: React.FC = function TooltipRoot(props) { animated, trackCursorAxis, delay, - delayType, closeDelay, open: props.open, onOpenChange: props.onOpenChange, @@ -59,7 +51,6 @@ const TooltipRoot: React.FC = function TooltipRoot(props) { const contextValue = React.useMemo( () => ({ delay: delayWithDefault, - delayType, closeDelay: closeDelayWithDefault, open, setOpen, @@ -79,7 +70,6 @@ const TooltipRoot: React.FC = function TooltipRoot(props) { }), [ delayWithDefault, - delayType, closeDelayWithDefault, open, setOpen, @@ -142,13 +132,6 @@ TooltipRoot.propTypes /* remove-proptypes */ = { * @default 600 */ delay: PropTypes.number, - /** - * The delay type to use. `rest` means the `delay` represents how long the user's cursor must - * rest on the trigger before the tooltip popup is opened. `hover` means the `delay` represents - * how long to wait as soon as the user's cursor has entered the trigger. - * @default 'rest' - */ - delayType: PropTypes.oneOf(['hover', 'rest']), /** * Whether the user can move their cursor from the trigger element toward the tooltip popup element * without it closing using a "safe polygon" technique. diff --git a/packages/mui-base/src/Tooltip/Root/TooltipRootContext.ts b/packages/mui-base/src/Tooltip/Root/TooltipRootContext.ts index b8e57e7f2..05e581963 100644 --- a/packages/mui-base/src/Tooltip/Root/TooltipRootContext.ts +++ b/packages/mui-base/src/Tooltip/Root/TooltipRootContext.ts @@ -14,7 +14,6 @@ export interface TooltipRootContext { popupRef: React.RefObject; delay: number; closeDelay: number; - delayType: 'rest' | 'hover'; mounted: boolean; setMounted: React.Dispatch>; getRootTriggerProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps; diff --git a/packages/mui-base/src/Tooltip/Root/useTooltipRoot.ts b/packages/mui-base/src/Tooltip/Root/useTooltipRoot.ts index 3933352e5..5072dbc7a 100644 --- a/packages/mui-base/src/Tooltip/Root/useTooltipRoot.ts +++ b/packages/mui-base/src/Tooltip/Root/useTooltipRoot.ts @@ -29,7 +29,6 @@ export function useTooltipRoot(params: useTooltipRoot.Parameters): useTooltipRoo hoverable = true, animated = true, trackCursorAxis = 'none', - delayType = 'rest', delay, closeDelay, } = params; @@ -110,23 +109,9 @@ export function useTooltipRoot(params: useTooltipRoot.Parameters): useTooltipRoo instantType = instantTypeState; } - const computedRestMs = delayType === 'rest' ? openGroupDelay || delayWithDefault : undefined; - let computedOpenDelay: number | undefined = delayType === 'hover' ? delayWithDefault : undefined; + const computedRestMs = openGroupDelay || delayWithDefault; let computedCloseDelay: number | undefined = closeDelayWithDefault; - if (delayType === 'hover') { - if (delay == null) { - computedOpenDelay = - groupDelay === 0 - ? // A provider is not present. - delayWithDefault - : // A provider is present. - openGroupDelay; - } else { - computedOpenDelay = delay; - } - } - // A provider is present and the close delay is not set. if (closeDelay == null && groupDelay !== 0) { computedCloseDelay = closeGroupDelay; @@ -138,7 +123,6 @@ export function useTooltipRoot(params: useTooltipRoot.Parameters): useTooltipRoo handleClose: hoverable && trackCursorAxis !== 'both' ? safePolygon() : null, restMs: computedRestMs, delay: { - open: computedOpenDelay, close: computedCloseDelay, }, }); @@ -228,13 +212,6 @@ export namespace useTooltipRoot { * @default 0 */ closeDelay?: number; - /** - * The delay type to use. `rest` means the `delay` represents how long the user's cursor must - * rest on the trigger before the tooltip popup is opened. `hover` means the `delay` represents - * how long to wait as soon as the user's cursor has entered the trigger. - * @default 'rest' - */ - delayType?: 'rest' | 'hover'; /** * Whether the tooltip popup element stays mounted in the DOM when closed. * @default false From ad51a00a3daa2c3c8b08fed87d8d2fbbf31b1ebd Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 16 Oct 2024 12:42:42 +0200 Subject: [PATCH 3/7] Bump MUI (#736) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Michał Dudak --- docs/app/experiments/anchor-positioning.tsx | 8 +- docs/app/experiments/scroll-lock.tsx | 6 +- .../tailwind/index.js | 2 +- .../tailwind/index.tsx | 2 +- .../components/field/UnstyledFieldAsync.js | 2 +- .../components/field/UnstyledFieldAsync.tsx | 2 +- .../menu-checkbox-item.json | 2 +- .../menu-radio-item/menu-radio-item.json | 2 +- docs/package.json | 8 +- package.json | 10 +- .../src/Field/Validity/FieldValidity.tsx | 3 +- .../Menu/CheckboxItem/MenuCheckboxItem.tsx | 205 +++++-- packages/mui-base/src/Menu/Item/MenuItem.tsx | 175 ++++-- .../src/Menu/RadioItem/MenuRadioItem.tsx | 187 ++++-- .../mui-base/src/NumberField/Root/useScrub.ts | 4 +- pnpm-lock.yaml | 562 ++++++++++-------- test/package.json | 2 +- 17 files changed, 742 insertions(+), 440 deletions(-) diff --git a/docs/app/experiments/anchor-positioning.tsx b/docs/app/experiments/anchor-positioning.tsx index d5442a32f..0ca6ddac3 100644 --- a/docs/app/experiments/anchor-positioning.tsx +++ b/docs/app/experiments/anchor-positioning.tsx @@ -206,7 +206,7 @@ export default function AnchorPositioning() { min={0} max={50} value={sideOffset} - onChange={(e) => setSideOffset(Number(e.target.value))} + onChange={(event) => setSideOffset(Number(event.target.value))} /> {sideOffset} @@ -218,7 +218,7 @@ export default function AnchorPositioning() { min={0} max={50} value={alignmentOffset} - onChange={(e) => setAlignmentOffset(Number(e.target.value))} + onChange={(event) => setAlignmentOffset(Number(event.target.value))} /> {alignmentOffset} @@ -230,7 +230,7 @@ export default function AnchorPositioning() { min={0} max={50} value={collisionPadding} - onChange={(e) => setCollisionPadding(Number(e.target.value))} + onChange={(event) => setCollisionPadding(Number(event.target.value))} /> {collisionPadding} @@ -242,7 +242,7 @@ export default function AnchorPositioning() { min={0} max={20} value={arrowPadding} - onChange={(e) => setArrowPadding(Number(e.target.value))} + onChange={(event) => setArrowPadding(Number(event.target.value))} /> {arrowPadding} diff --git a/docs/app/experiments/scroll-lock.tsx b/docs/app/experiments/scroll-lock.tsx index d845e59e2..d35ea8e8b 100644 --- a/docs/app/experiments/scroll-lock.tsx +++ b/docs/app/experiments/scroll-lock.tsx @@ -32,7 +32,7 @@ export default function ScrollLock() { setEnabled(e.target.checked)} + onChange={(event) => setEnabled(event.target.checked)} /> Scroll lock @@ -42,7 +42,7 @@ export default function ScrollLock() { setBodyScrollY(e.target.checked)} + onChange={(event) => setBodyScrollY(event.target.checked)} /> body `overflow` @@ -52,7 +52,7 @@ export default function ScrollLock() { setLongContent(e.target.checked)} + onChange={(event) => setLongContent(event.target.checked)} /> Long content diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js index 2dd01a12d..a4e58b231 100644 --- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js +++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js @@ -20,7 +20,7 @@ function Label(props) { // eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/no-noninteractive-element-interactions