From b68cb18562bcf9547d24db529f51bab46c455f47 Mon Sep 17 00:00:00 2001 From: atomiks Date: Fri, 15 Nov 2024 17:18:02 +1100 Subject: [PATCH 1/2] [core] Rename CSS vars to include component name --- docs/data/components/menu/CheckboxItems.js | 2 +- docs/data/components/menu/CheckboxItems.tsx | 2 +- .../css-modules/Menu.module.css | 2 +- .../menu/MenuIntroduction/system/index.js | 2 +- .../menu/MenuIntroduction/system/index.tsx | 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 | 2 +- .../popover/UnstyledPopoverTransition.js | 2 +- .../popover/UnstyledPopoverTransition.tsx | 2 +- docs/data/components/popover/popover.mdx | 26 +++---- .../system/index.js | 2 +- .../system/index.tsx | 2 +- .../UnstyledPreviewCardTransition.js | 4 +- .../UnstyledPreviewCardTransition.tsx | 4 +- .../components/preview-card/preview-card.mdx | 26 +++---- docs/data/components/select/SelectAlign.js | 6 +- docs/data/components/select/SelectAlign.tsx | 6 +- docs/data/components/select/SelectEmpty.js | 4 +- docs/data/components/select/SelectEmpty.tsx | 4 +- docs/data/components/select/SelectGroup.js | 4 +- docs/data/components/select/SelectGroup.tsx | 4 +- .../select/SelectIntroduction/system/index.js | 4 +- .../SelectIntroduction/system/index.tsx | 4 +- docs/data/components/select/select.mdx | 2 +- .../tooltip/UnstyledTooltipTransition.js | 2 +- .../tooltip/UnstyledTooltipTransition.tsx | 2 +- docs/data/components/tooltip/tooltip.mdx | 12 +-- docs/reference/generated/select-arrow.json | 19 +++++ docs/reference/generated/select-backdrop.json | 24 ++++++ .../generated/select-group-label.json | 14 ++++ docs/reference/generated/select-group.json | 14 ++++ docs/reference/generated/select-icon.json | 14 ++++ .../generated/select-option-indicator.json | 19 +++++ .../generated/select-option-text.json | 5 ++ docs/reference/generated/select-option.json | 20 +++++ docs/reference/generated/select-popup.json | 18 +++++ .../generated/select-positioner.json | 77 +++++++++++++++++++ docs/reference/generated/select-root.json | 61 +++++++++++++++ .../generated/select-scroll-down-arrow.json | 11 +++ .../generated/select-scroll-up-arrow.json | 11 +++ docs/reference/generated/select-trigger.json | 28 +++++++ docs/reference/generated/select-value.json | 18 +++++ .../app/experiments/anchor-positioning.tsx | 5 +- docs/src/app/experiments/tooltip.tsx | 2 +- docs/src/components/Popup.css | 6 +- .../mui-base/src/Dialog/Popup/DialogPopup.tsx | 5 +- .../src/Menu/Positioner/useMenuPositioner.ts | 5 +- .../Positioner/usePopoverPositioner.tsx | 5 +- .../Positioner/usePreviewCardPositioner.ts | 5 +- .../Select/Positioner/useSelectPositioner.ts | 1 + .../Positioner/useTooltipPositioner.ts | 7 +- .../src/utils/useAnchorPositioning.ts | 16 ++-- 55 files changed, 461 insertions(+), 91 deletions(-) create mode 100644 docs/reference/generated/select-arrow.json create mode 100644 docs/reference/generated/select-backdrop.json create mode 100644 docs/reference/generated/select-group-label.json create mode 100644 docs/reference/generated/select-group.json create mode 100644 docs/reference/generated/select-icon.json create mode 100644 docs/reference/generated/select-option-indicator.json create mode 100644 docs/reference/generated/select-option-text.json create mode 100644 docs/reference/generated/select-option.json create mode 100644 docs/reference/generated/select-popup.json create mode 100644 docs/reference/generated/select-positioner.json create mode 100644 docs/reference/generated/select-root.json create mode 100644 docs/reference/generated/select-scroll-down-arrow.json create mode 100644 docs/reference/generated/select-scroll-up-arrow.json create mode 100644 docs/reference/generated/select-trigger.json create mode 100644 docs/reference/generated/select-value.json diff --git a/docs/data/components/menu/CheckboxItems.js b/docs/data/components/menu/CheckboxItems.js index ffb55c1572..c2ec3a4a04 100644 --- a/docs/data/components/menu/CheckboxItems.js +++ b/docs/data/components/menu/CheckboxItems.js @@ -77,7 +77,7 @@ const MenuPopup = styled(Menu.Popup)( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]}; z-index: 1; - transform-origin: var(--transform-origin); + transform-origin: var(--menu-arrow-origin); opacity: 0; transform: scale(0.8); transition: opacity 100ms ease-in, transform 100ms ease-in; diff --git a/docs/data/components/menu/CheckboxItems.tsx b/docs/data/components/menu/CheckboxItems.tsx index 9ff75dd551..339bf67490 100644 --- a/docs/data/components/menu/CheckboxItems.tsx +++ b/docs/data/components/menu/CheckboxItems.tsx @@ -77,7 +77,7 @@ const MenuPopup = styled(Menu.Popup)( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]}; z-index: 1; - transform-origin: var(--transform-origin); + transform-origin: var(--menu-arrow-origin); opacity: 0; transform: scale(0.8); transition: opacity 100ms ease-in, transform 100ms ease-in; 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 37344890ec..cb279e3b84 100644 --- a/docs/data/components/menu/MenuIntroduction/css-modules/Menu.module.css +++ b/docs/data/components/menu/MenuIntroduction/css-modules/Menu.module.css @@ -20,7 +20,7 @@ border: 1px solid var(--gray-200); color: var(--gray-900); box-shadow: 0px 4px 30px var(--gray-200); - transform-origin: var(--transform-origin); + transform-origin: var(--menu-arrow-origin); opacity: 0; transform: scale(0.95, 0.8); transition: diff --git a/docs/data/components/menu/MenuIntroduction/system/index.js b/docs/data/components/menu/MenuIntroduction/system/index.js index 49bdce1cbd..97aa3b853f 100644 --- a/docs/data/components/menu/MenuIntroduction/system/index.js +++ b/docs/data/components/menu/MenuIntroduction/system/index.js @@ -72,7 +72,7 @@ const MenuPopup = styled(Menu.Popup)( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]}; z-index: 1; - transform-origin: var(--transform-origin); + transform-origin: var(--menu-arrow-origin); opacity: 1; transform: scale(1, 1); transition: opacity 100ms ease-in, transform 100ms ease-in; diff --git a/docs/data/components/menu/MenuIntroduction/system/index.tsx b/docs/data/components/menu/MenuIntroduction/system/index.tsx index fdeaa085b2..80885d90e9 100644 --- a/docs/data/components/menu/MenuIntroduction/system/index.tsx +++ b/docs/data/components/menu/MenuIntroduction/system/index.tsx @@ -72,7 +72,7 @@ const MenuPopup = styled(Menu.Popup)( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]}; z-index: 1; - transform-origin: var(--transform-origin); + transform-origin: var(--menu-arrow-origin); opacity: 1; transform: scale(1, 1); transition: opacity 100ms ease-in, transform 100ms ease-in; diff --git a/docs/data/components/menu/NestedMenu.js b/docs/data/components/menu/NestedMenu.js index 04b306fb1a..93423abb4a 100644 --- a/docs/data/components/menu/NestedMenu.js +++ b/docs/data/components/menu/NestedMenu.js @@ -133,7 +133,7 @@ const MenuPopup = styled(Menu.Popup)( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]}; z-index: 1; - transform-origin: var(--transform-origin); + transform-origin: var(--menu-arrow-origin); opacity: 1; transform: scale(1, 1); transition: opacity 100ms ease-in, transform 100ms ease-in; diff --git a/docs/data/components/menu/NestedMenu.tsx b/docs/data/components/menu/NestedMenu.tsx index 9aa56b8f9e..0d636c1965 100644 --- a/docs/data/components/menu/NestedMenu.tsx +++ b/docs/data/components/menu/NestedMenu.tsx @@ -133,7 +133,7 @@ const MenuPopup = styled(Menu.Popup)( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]}; z-index: 1; - transform-origin: var(--transform-origin); + transform-origin: var(--menu-arrow-origin); opacity: 1; transform: scale(1, 1); transition: opacity 100ms ease-in, transform 100ms ease-in; diff --git a/docs/data/components/menu/RadioItems.js b/docs/data/components/menu/RadioItems.js index ee54e7cb22..7e08d1ff15 100644 --- a/docs/data/components/menu/RadioItems.js +++ b/docs/data/components/menu/RadioItems.js @@ -95,7 +95,7 @@ const MenuPopup = styled(Menu.Popup)( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]}; z-index: 1; - transform-origin: var(--transform-origin); + transform-origin: var(--menu-arrow-origin); opacity: 0; transform: scale(0.8); transition: opacity 100ms ease-in, transform 100ms ease-in; diff --git a/docs/data/components/menu/RadioItems.tsx b/docs/data/components/menu/RadioItems.tsx index ee54e7cb22..7e08d1ff15 100644 --- a/docs/data/components/menu/RadioItems.tsx +++ b/docs/data/components/menu/RadioItems.tsx @@ -95,7 +95,7 @@ const MenuPopup = styled(Menu.Popup)( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]}; z-index: 1; - transform-origin: var(--transform-origin); + transform-origin: var(--menu-arrow-origin); opacity: 0; transform: scale(0.8); transition: opacity 100ms ease-in, transform 100ms ease-in; diff --git a/docs/data/components/menu/menu.mdx b/docs/data/components/menu/menu.mdx index a489187043..6f1fe6e483 100644 --- a/docs/data/components/menu/menu.mdx +++ b/docs/data/components/menu/menu.mdx @@ -299,7 +299,7 @@ Here is an example of how to apply a symmetric scale and fade transition with th ```css .MenuPopup { - transform-origin: var(--transform-origin); + transform-origin: var(--menu-arrow-origin); transition-property: opacity, transform; transition-duration: 0.2s; /* Represents the final styles once exited */ diff --git a/docs/data/components/popover/UnstyledPopoverTransition.js b/docs/data/components/popover/UnstyledPopoverTransition.js index fa0abe43e5..ebbc87e08d 100644 --- a/docs/data/components/popover/UnstyledPopoverTransition.js +++ b/docs/data/components/popover/UnstyledPopoverTransition.js @@ -38,7 +38,7 @@ export const PopoverPopup = styled(Popover.Popup)` transition-duration: 0.2s; opacity: 0; transform: scale(0.9); - transform-origin: var(--transform-origin); + transform-origin: var(--popover-arrow-origin); &[data-open] { opacity: 1; diff --git a/docs/data/components/popover/UnstyledPopoverTransition.tsx b/docs/data/components/popover/UnstyledPopoverTransition.tsx index fa0abe43e5..ebbc87e08d 100644 --- a/docs/data/components/popover/UnstyledPopoverTransition.tsx +++ b/docs/data/components/popover/UnstyledPopoverTransition.tsx @@ -38,7 +38,7 @@ export const PopoverPopup = styled(Popover.Popup)` transition-duration: 0.2s; opacity: 0; transform: scale(0.9); - transform-origin: var(--transform-origin); + transform-origin: var(--popover-arrow-origin); &[data-open] { opacity: 1; diff --git a/docs/data/components/popover/popover.mdx b/docs/data/components/popover/popover.mdx index 1927691bb4..6c08f28369 100644 --- a/docs/data/components/popover/popover.mdx +++ b/docs/data/components/popover/popover.mdx @@ -225,20 +225,20 @@ By default, the `Trigger` acts as the anchor, but this can be changed to another The `Popover.Positioner` element receives the following CSS variables, which can be used by `Popover.Popup`: -- `--anchor-width`: Specifies the width of the anchor element. You can use this to match the width of the popover with its anchor. -- `--anchor-height`: Specifies the height of the anchor element. You can use this to match the height of the popover with its anchor. -- `--available-width`: Specifies the available width of the popup before it overflows the viewport. -- `--available-height`: Specifies the available height of the popup before it overflows the viewport. -- `--transform-origin`: Specifies the origin of the popup element that represents the point of the anchor element's center. When animating scale, this allows it to correctly emanate from the center of the anchor. +- `--popover-anchor-width`: Specifies the width of the anchor element. You can use this to match the width of the popover with its anchor. +- `--popover-anchor-height`: Specifies the height of the anchor element. You can use this to match the height of the popover with its anchor. +- `--popover-available-width`: Specifies the available width of the popup before it overflows the viewport. +- `--popover-available-height`: Specifies the available height of the popup before it overflows the viewport. +- `--popover-arrow-origin`: Specifies the origin of the popup element that represents the point of the anchor element's center where the arrow points. When animating scale, this allows it to correctly emanate from the center of the anchor. ### Large content -If your popover is large enough that it cannot fit inside the viewport (especially on small or narrow screens as on mobile devices), the `--available-width` and `--available-height` properties are useful to constrain its size to prevent it from overflowing. +If your popover is large enough that it cannot fit inside the viewport (especially on small or narrow screens as on mobile devices), the `--popover-available-width` and `--popover-available-height` properties are useful to constrain its size to prevent it from overflowing. ```css .PopoverPopup { - max-width: var(--available-width); - max-height: var(--available-height); + max-width: var(--popover-available-width); + max-height: var(--popover-available-height); overflow: auto; } ``` @@ -254,8 +254,8 @@ The `overflow: auto` property will prevent the `Arrow` from appearing, if specif ```css .PopoverPopup-content { - max-width: var(--available-width); - max-height: var(--available-height); + max-width: var(--popover-available-width); + max-height: var(--popover-available-height); overflow: auto; } ``` @@ -264,8 +264,8 @@ Absolute maximums can also be specified if the popover's size can be too large o ```css .PopoverPopup-content { - max-width: min(500px, var(--available-width)); - max-height: min(500px, var(--available-height)); + max-width: min(500px, var(--popover-available-width)); + max-height: min(500px, var(--popover-available-height)); overflow: auto; } ``` @@ -288,7 +288,7 @@ Here is an example of how to apply a symmetric scale and fade transition with th ```css .PopoverPopup { - transform-origin: var(--transform-origin); + transform-origin: var(--popover-arrow-origin); transition-property: opacity, transform; transition-duration: 0.2s; /* Represents the final styles once exited */ diff --git a/docs/data/components/preview-card/UnstyledPreviewCardIntroduction/system/index.js b/docs/data/components/preview-card/UnstyledPreviewCardIntroduction/system/index.js index 98e97754b0..5de48c9103 100644 --- a/docs/data/components/preview-card/UnstyledPreviewCardIntroduction/system/index.js +++ b/docs/data/components/preview-card/UnstyledPreviewCardIntroduction/system/index.js @@ -47,7 +47,7 @@ export const PreviewCardPopup = styled(PreviewCard.Popup)` filter: drop-shadow(0 2px 4px rgb(0 10 20 / 0.25)); outline: 0; padding: 12px 16px; - max-width: min(300px, var(--available-width)); + max-width: min(300px, var(--preview-card-available-width)); `; export const TriggerLink = styled(PreviewCard.Trigger)` diff --git a/docs/data/components/preview-card/UnstyledPreviewCardIntroduction/system/index.tsx b/docs/data/components/preview-card/UnstyledPreviewCardIntroduction/system/index.tsx index 98e97754b0..5de48c9103 100644 --- a/docs/data/components/preview-card/UnstyledPreviewCardIntroduction/system/index.tsx +++ b/docs/data/components/preview-card/UnstyledPreviewCardIntroduction/system/index.tsx @@ -47,7 +47,7 @@ export const PreviewCardPopup = styled(PreviewCard.Popup)` filter: drop-shadow(0 2px 4px rgb(0 10 20 / 0.25)); outline: 0; padding: 12px 16px; - max-width: min(300px, var(--available-width)); + max-width: min(300px, var(--preview-card-available-width)); `; export const TriggerLink = styled(PreviewCard.Trigger)` diff --git a/docs/data/components/preview-card/UnstyledPreviewCardTransition.js b/docs/data/components/preview-card/UnstyledPreviewCardTransition.js index ea5f5aad64..8029d4e08f 100644 --- a/docs/data/components/preview-card/UnstyledPreviewCardTransition.js +++ b/docs/data/components/preview-card/UnstyledPreviewCardTransition.js @@ -48,11 +48,11 @@ export const PreviewCardPopup = styled(PreviewCard.Popup)` filter: drop-shadow(0 0.1rem 0.25rem rgb(0 10 20 / 0.25)); outline: 0; padding: 12px 16px; - max-width: min(300px, var(--available-width)); + max-width: min(300px, var(--preview-card-available-width)); transition-property: opacity, transform; transition-duration: 0.2s; opacity: 0; - transform-origin: var(--transform-origin); + transform-origin: var(--preview-card-arrow-origin); &[data-open] { opacity: 1; diff --git a/docs/data/components/preview-card/UnstyledPreviewCardTransition.tsx b/docs/data/components/preview-card/UnstyledPreviewCardTransition.tsx index ea5f5aad64..8029d4e08f 100644 --- a/docs/data/components/preview-card/UnstyledPreviewCardTransition.tsx +++ b/docs/data/components/preview-card/UnstyledPreviewCardTransition.tsx @@ -48,11 +48,11 @@ export const PreviewCardPopup = styled(PreviewCard.Popup)` filter: drop-shadow(0 0.1rem 0.25rem rgb(0 10 20 / 0.25)); outline: 0; padding: 12px 16px; - max-width: min(300px, var(--available-width)); + max-width: min(300px, var(--preview-card-available-width)); transition-property: opacity, transform; transition-duration: 0.2s; opacity: 0; - transform-origin: var(--transform-origin); + transform-origin: var(--preview-card-arrow-origin); &[data-open] { opacity: 1; diff --git a/docs/data/components/preview-card/preview-card.mdx b/docs/data/components/preview-card/preview-card.mdx index b50113b88c..bc845ff957 100644 --- a/docs/data/components/preview-card/preview-card.mdx +++ b/docs/data/components/preview-card/preview-card.mdx @@ -181,20 +181,20 @@ By default, the `Trigger` acts as the anchor, but this can be changed to another The `PreviewCard.Positioner` element receives the following CSS variables, which can be used by `PreviewCard.Popup`: -- `--anchor-width`: Specifies the width of the anchor element. You can use this to match the width of the Preview Card with its anchor. -- `--anchor-height`: Specifies the height of the anchor element. You can use this to match the height of the Preview Card with its anchor. -- `--available-width`: Specifies the available width of the popup before it overflows the viewport. -- `--available-height`: Specifies the available height of the popup before it overflows the viewport. -- `--transform-origin`: Specifies the origin of the popup element that represents the point of the anchor element's center. When animating scale, this allows it to correctly emanate from the center of the anchor. +- `--preview-card-anchor-width`: Specifies the width of the anchor element. You can use this to match the width of the Preview Card with its anchor. +- `--preview-card-anchor-height`: Specifies the height of the anchor element. You can use this to match the height of the Preview Card with its anchor. +- `--preview-card-available-width`: Specifies the available width of the popup before it overflows the viewport. +- `--preview-card-available-height`: Specifies the available height of the popup before it overflows the viewport. +- `--preview-card-arrow-origin`: Specifies the origin of the popup element that represents the point of the anchor element's center, where the arrow points. When animating scale, this allows it to correctly emanate from the center of the anchor. ### Large content -If your Preview Card is large enough that it cannot fit inside the viewport (especially on small or narrow screens as on mobile devices), the `--available-width` and `--available-height` properties are useful to constrain its size to prevent it from overflowing. +If your Preview Card is large enough that it cannot fit inside the viewport (especially on small or narrow screens as on mobile devices), the `--preview-card-available-width` and `--preview-card-available-height` properties are useful to constrain its size to prevent it from overflowing. ```css .PreviewCardPopup { - max-width: var(--available-width); - max-height: var(--available-height); + max-width: var(--preview-card-available-width); + max-height: var(--preview-card-available-height); overflow: auto; } ``` @@ -210,8 +210,8 @@ The `overflow: auto` property will prevent the `Arrow` from appearing, if specif ```css .PreviewCardPopup-content { - max-width: var(--available-width); - max-height: var(--available-height); + max-width: var(--preview-card-available-width); + max-height: var(--preview-card-available-height); overflow: auto; } ``` @@ -220,8 +220,8 @@ Absolute maximums can also be specified if the Preview Card's size can be too la ```css .PreviewCardPopup-content { - max-width: min(500px, var(--available-width)); - max-height: min(500px, var(--available-height)); + max-width: min(500px, var(--preview-card-available-width)); + max-height: min(500px, var(--preview-card-available-height)); overflow: auto; } ``` @@ -244,7 +244,7 @@ Here is an example of how to apply a symmetric scale and fade transition with th ```css .PreviewCardPopup { - transform-origin: var(--transform-origin); + transform-origin: var(--preview-card-arrow-origin); transition-property: opacity, transform; transition-duration: 0.2s; /* Represents the final styles once exited */ diff --git a/docs/data/components/select/SelectAlign.js b/docs/data/components/select/SelectAlign.js index 51e94317e0..6fea345723 100644 --- a/docs/data/components/select/SelectAlign.js +++ b/docs/data/components/select/SelectAlign.js @@ -151,10 +151,10 @@ const SelectPopup = styled(Select.Popup)` box-shadow: 0 2px 4px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(0 0 0 / 0.1); - max-height: var(--available-height); + max-height: var(--select-available-height); min-width: min( - calc(var(--available-width) - ${popupPadding * 2}px), - calc(var(--anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px) + calc(var(--select-available-width) - ${popupPadding * 2}px), + calc(var(--select-anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px) ); scroll-padding: ${popupPadding}px; diff --git a/docs/data/components/select/SelectAlign.tsx b/docs/data/components/select/SelectAlign.tsx index 526e3e22ab..9db0a0be10 100644 --- a/docs/data/components/select/SelectAlign.tsx +++ b/docs/data/components/select/SelectAlign.tsx @@ -151,10 +151,10 @@ const SelectPopup = styled(Select.Popup)` box-shadow: 0 2px 4px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(0 0 0 / 0.1); - max-height: var(--available-height); + max-height: var(--select-available-height); min-width: min( - calc(var(--available-width) - ${popupPadding * 2}px), - calc(var(--anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px) + calc(var(--select-available-width) - ${popupPadding * 2}px), + calc(var(--select-anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px) ); scroll-padding: ${popupPadding}px; diff --git a/docs/data/components/select/SelectEmpty.js b/docs/data/components/select/SelectEmpty.js index f7cd3a0ca9..e831918af3 100644 --- a/docs/data/components/select/SelectEmpty.js +++ b/docs/data/components/select/SelectEmpty.js @@ -104,8 +104,8 @@ const SelectPopup = styled(Select.Popup)` 0 0 0 1px rgb(0 0 0 / 0.1); max-height: var(--available-height); min-width: min( - calc(var(--available-width) - ${popupPadding * 2}px), - calc(var(--anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px) + calc(var(--select-available-width) - ${popupPadding * 2}px), + calc(var(--select-anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px) ); scroll-padding: ${popupPadding}px; diff --git a/docs/data/components/select/SelectEmpty.tsx b/docs/data/components/select/SelectEmpty.tsx index 12e3670711..f1cd1d24ce 100644 --- a/docs/data/components/select/SelectEmpty.tsx +++ b/docs/data/components/select/SelectEmpty.tsx @@ -104,8 +104,8 @@ const SelectPopup = styled(Select.Popup)` 0 0 0 1px rgb(0 0 0 / 0.1); max-height: var(--available-height); min-width: min( - calc(var(--available-width) - ${popupPadding * 2}px), - calc(var(--anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px) + calc(var(--select-available-width) - ${popupPadding * 2}px), + calc(var(--select-anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px) ); scroll-padding: ${popupPadding}px; diff --git a/docs/data/components/select/SelectGroup.js b/docs/data/components/select/SelectGroup.js index f8c936d43e..d14d7f4cc7 100644 --- a/docs/data/components/select/SelectGroup.js +++ b/docs/data/components/select/SelectGroup.js @@ -135,8 +135,8 @@ const SelectPopup = styled(Select.Popup)` 0 0 0 1px rgb(0 0 0 / 0.1); max-height: var(--available-height); min-width: min( - calc(var(--available-width) - ${popupPadding * 2}px), - calc(var(--anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px) + calc(var(--select-available-width) - ${popupPadding * 2}px), + calc(var(--select-anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px) ); scroll-padding: ${popupPadding}px; diff --git a/docs/data/components/select/SelectGroup.tsx b/docs/data/components/select/SelectGroup.tsx index 905e28e517..09da6b39d7 100644 --- a/docs/data/components/select/SelectGroup.tsx +++ b/docs/data/components/select/SelectGroup.tsx @@ -135,8 +135,8 @@ const SelectPopup = styled(Select.Popup)` 0 0 0 1px rgb(0 0 0 / 0.1); max-height: var(--available-height); min-width: min( - calc(var(--available-width) - ${popupPadding * 2}px), - calc(var(--anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px) + calc(var(--select-available-width) - ${popupPadding * 2}px), + calc(var(--select-anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px) ); scroll-padding: ${popupPadding}px; diff --git a/docs/data/components/select/SelectIntroduction/system/index.js b/docs/data/components/select/SelectIntroduction/system/index.js index 3874e0299f..a15154ca02 100644 --- a/docs/data/components/select/SelectIntroduction/system/index.js +++ b/docs/data/components/select/SelectIntroduction/system/index.js @@ -100,8 +100,8 @@ const SelectPopup = styled(Select.Popup)` 0 0 0 1px rgb(0 0 0 / 0.1); max-height: var(--available-height); min-width: min( - calc(var(--available-width) - ${popupPadding * 2}px), - calc(var(--anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px) + calc(var(--select-available-width) - ${popupPadding * 2}px), + calc(var(--select-anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px) ); scroll-padding: ${popupPadding}px; diff --git a/docs/data/components/select/SelectIntroduction/system/index.tsx b/docs/data/components/select/SelectIntroduction/system/index.tsx index 14b1f1698b..084a4b3f23 100644 --- a/docs/data/components/select/SelectIntroduction/system/index.tsx +++ b/docs/data/components/select/SelectIntroduction/system/index.tsx @@ -100,8 +100,8 @@ const SelectPopup = styled(Select.Popup)` 0 0 0 1px rgb(0 0 0 / 0.1); max-height: var(--available-height); min-width: min( - calc(var(--available-width) - ${popupPadding * 2}px), - calc(var(--anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px) + calc(var(--select-available-width) - ${popupPadding * 2}px), + calc(var(--select-anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px) ); scroll-padding: ${popupPadding}px; diff --git a/docs/data/components/select/select.mdx b/docs/data/components/select/select.mdx index 78ff14e62d..fdde67f2e1 100644 --- a/docs/data/components/select/select.mdx +++ b/docs/data/components/select/select.mdx @@ -215,7 +215,7 @@ Here is an example of how to apply a symmetric scale and fade transition with th ```css .SelectPopup { - transform-origin: var(--transform-origin); + transform-origin: var(--select-arrow-origin); transition-property: opacity, transform; transition-duration: 0.2s; /* Represents the final styles once exited */ diff --git a/docs/data/components/tooltip/UnstyledTooltipTransition.js b/docs/data/components/tooltip/UnstyledTooltipTransition.js index c9f530f54e..67060ddfa9 100644 --- a/docs/data/components/tooltip/UnstyledTooltipTransition.js +++ b/docs/data/components/tooltip/UnstyledTooltipTransition.js @@ -34,7 +34,7 @@ export const TooltipPopup = styled(Tooltip.Popup)` transition-duration: 0.2s; opacity: 0; transform: scale(0.9); - transform-origin: var(--transform-origin); + transform-origin: var(--tooltip-arrow-origin); &[data-open] { opacity: 1; diff --git a/docs/data/components/tooltip/UnstyledTooltipTransition.tsx b/docs/data/components/tooltip/UnstyledTooltipTransition.tsx index c9f530f54e..67060ddfa9 100644 --- a/docs/data/components/tooltip/UnstyledTooltipTransition.tsx +++ b/docs/data/components/tooltip/UnstyledTooltipTransition.tsx @@ -34,7 +34,7 @@ export const TooltipPopup = styled(Tooltip.Popup)` transition-duration: 0.2s; opacity: 0; transform: scale(0.9); - transform-origin: var(--transform-origin); + transform-origin: var(--tooltip-arrow-origin); &[data-open] { opacity: 1; diff --git a/docs/data/components/tooltip/tooltip.mdx b/docs/data/components/tooltip/tooltip.mdx index 6763ea3202..58212f9215 100644 --- a/docs/data/components/tooltip/tooltip.mdx +++ b/docs/data/components/tooltip/tooltip.mdx @@ -196,11 +196,11 @@ By default, the `Trigger` acts as the anchor, but this can be changed to another The `Tooltip.Positioner` element receives the following CSS variables, which can be used by `Tooltip.Popup`: -- `--anchor-width`: Specifies the width of the anchor element. You can use this to match the width of the tooltip with its anchor. -- `--anchor-height`: Specifies the height of the anchor element. You can use this to match the height of the tooltip with its anchor. -- `--available-width`: Specifies the available width of the popup element before it overflows the viewport. -- `--available-height`: Specifies the available height of the popup element before it overflows the viewport. -- `--transform-origin`: Specifies the origin of the popup element that represents the point of the anchor element's center. When animating scale, this allows it to correctly emanate from the center of the anchor. +- `--tooltip-anchor-width`: Specifies the width of the anchor element. You can use this to match the width of the tooltip with its anchor. +- `--tooltip-anchor-height`: Specifies the height of the anchor element. You can use this to match the height of the tooltip with its anchor. +- `--tooltip-available-width`: Specifies the available width of the popup element before it overflows the viewport. +- `--tooltip-available-height`: Specifies the available height of the popup element before it overflows the viewport. +- `--tooltip-arrow-origin`: Specifies the origin of the popup element that represents the point of the anchor element's center, where the arrow points. When animating scale, this allows it to correctly emanate from the center of the anchor. By default, `maxWidth` and `maxHeight` are already specified on the positioner using `--available-{width,height}` to prevent the tooltip from being too big to fit on the screen. @@ -222,7 +222,7 @@ Here is an example of how to apply a symmetric scale and fade transition with th ```css .TooltipPopup { - transform-origin: var(--transform-origin); + transform-origin: var(--tooltip-arrow-origin); transition-property: opacity, transform; transition-duration: 0.2s; /* Represents the final styles once exited */ diff --git a/docs/reference/generated/select-arrow.json b/docs/reference/generated/select-arrow.json new file mode 100644 index 0000000000..bc1d46efd2 --- /dev/null +++ b/docs/reference/generated/select-arrow.json @@ -0,0 +1,19 @@ +{ + "name": "SelectArrow", + "description": "", + "props": { + "className": { + "type": "string | (state) => string", + "description": "Class names applied to the element or a function that returns them based on the component's state." + }, + "hideWhenUncentered": { + "type": "boolean", + "default": "false", + "description": "If `true`, the arrow is hidden when it can't point to the center of the anchor element." + }, + "render": { + "type": "React.ReactElement | (props, state) => React.ReactElement", + "description": "A function to customize rendering of the component." + } + } +} diff --git a/docs/reference/generated/select-backdrop.json b/docs/reference/generated/select-backdrop.json new file mode 100644 index 0000000000..a90d3453d2 --- /dev/null +++ b/docs/reference/generated/select-backdrop.json @@ -0,0 +1,24 @@ +{ + "name": "SelectBackdrop", + "description": "", + "props": { + "className": { + "type": "string | (state) => string", + "description": "Class names applied to the element or a function that returns them based on the component's state." + }, + "container": { + "type": "React.Ref | HTMLElement | null", + "default": "false", + "description": "The container element to which the Backdrop is appended to." + }, + "keepMounted": { + "type": "boolean", + "default": "false", + "description": "If `true`, the Backdrop remains mounted when the Select popup is closed." + }, + "render": { + "type": "React.ReactElement | (props, state) => React.ReactElement", + "description": "A function to customize rendering of the component." + } + } +} diff --git a/docs/reference/generated/select-group-label.json b/docs/reference/generated/select-group-label.json new file mode 100644 index 0000000000..206636b1be --- /dev/null +++ b/docs/reference/generated/select-group-label.json @@ -0,0 +1,14 @@ +{ + "name": "SelectGroupLabel", + "description": "", + "props": { + "className": { + "type": "string | (state) => string", + "description": "Class names applied to the element or a function that returns them based on the component's state." + }, + "render": { + "type": "React.ReactElement | (props, state) => React.ReactElement", + "description": "A function to customize rendering of the component." + } + } +} diff --git a/docs/reference/generated/select-group.json b/docs/reference/generated/select-group.json new file mode 100644 index 0000000000..45137972ba --- /dev/null +++ b/docs/reference/generated/select-group.json @@ -0,0 +1,14 @@ +{ + "name": "SelectGroup", + "description": "", + "props": { + "className": { + "type": "string | (state) => string", + "description": "Class names applied to the element or a function that returns them based on the component's state." + }, + "render": { + "type": "React.ReactElement | (props, state) => React.ReactElement", + "description": "A function to customize rendering of the component." + } + } +} diff --git a/docs/reference/generated/select-icon.json b/docs/reference/generated/select-icon.json new file mode 100644 index 0000000000..cc45a1789a --- /dev/null +++ b/docs/reference/generated/select-icon.json @@ -0,0 +1,14 @@ +{ + "name": "SelectIcon", + "description": "", + "props": { + "className": { + "type": "string | (state) => string", + "description": "Class names applied to the element or a function that returns them based on the component's state." + }, + "render": { + "type": "React.ReactElement | (props, state) => React.ReactElement", + "description": "A function to customize rendering of the component." + } + } +} diff --git a/docs/reference/generated/select-option-indicator.json b/docs/reference/generated/select-option-indicator.json new file mode 100644 index 0000000000..fca900b096 --- /dev/null +++ b/docs/reference/generated/select-option-indicator.json @@ -0,0 +1,19 @@ +{ + "name": "SelectOptionIndicator", + "description": "", + "props": { + "className": { + "type": "string | (state) => string", + "description": "Class names applied to the element or a function that returns them based on the component's state." + }, + "keepMounted": { + "type": "boolean", + "default": "false", + "description": "If `true`, the item indicator remains mounted when the item is not\nselected." + }, + "render": { + "type": "React.ReactElement | (props, state) => React.ReactElement", + "description": "A function to customize rendering of the component." + } + } +} diff --git a/docs/reference/generated/select-option-text.json b/docs/reference/generated/select-option-text.json new file mode 100644 index 0000000000..154388a990 --- /dev/null +++ b/docs/reference/generated/select-option-text.json @@ -0,0 +1,5 @@ +{ + "name": "SelectOptionText", + "description": "", + "props": {} +} diff --git a/docs/reference/generated/select-option.json b/docs/reference/generated/select-option.json new file mode 100644 index 0000000000..ed2e0c9116 --- /dev/null +++ b/docs/reference/generated/select-option.json @@ -0,0 +1,20 @@ +{ + "name": "SelectOption", + "description": "", + "props": { + "disabled": { + "type": "boolean", + "default": "false", + "description": "If `true`, the select option will be disabled." + }, + "label": { + "type": "string", + "description": "A text representation of the select option's content.\nUsed for keyboard text navigation matching." + }, + "value": { + "type": "any", + "default": "null", + "description": "The value of the select option." + } + } +} diff --git a/docs/reference/generated/select-popup.json b/docs/reference/generated/select-popup.json new file mode 100644 index 0000000000..81eb4dde51 --- /dev/null +++ b/docs/reference/generated/select-popup.json @@ -0,0 +1,18 @@ +{ + "name": "SelectPopup", + "description": "", + "props": { + "className": { + "type": "string | (state) => string", + "description": "Class names applied to the element or a function that returns them based on the component's state." + }, + "id": { + "type": "string", + "description": "The id of the popup element." + }, + "render": { + "type": "React.ReactElement | (props, state) => React.ReactElement", + "description": "A function to customize rendering of the component." + } + } +} diff --git a/docs/reference/generated/select-positioner.json b/docs/reference/generated/select-positioner.json new file mode 100644 index 0000000000..9f26988621 --- /dev/null +++ b/docs/reference/generated/select-positioner.json @@ -0,0 +1,77 @@ +{ + "name": "SelectPositioner", + "description": "", + "props": { + "alignment": { + "type": "'start' | 'center' | 'end'", + "default": "'start'", + "description": "The alignment of the Select element to the anchor element along its cross axis." + }, + "alignmentOffset": { + "type": "number", + "default": "0", + "description": "The offset of the Select element along its alignment axis." + }, + "anchor": { + "type": "React.Ref | Element | VirtualElement | (() => Element | VirtualElement | null) | null", + "description": "The anchor element to which the Select popup will be placed at." + }, + "arrowPadding": { + "type": "number", + "default": "5", + "description": "Determines the padding between the arrow and the Select popup's edges. Useful when the popover\npopup has rounded corners via `border-radius`." + }, + "className": { + "type": "string | (state) => string", + "description": "Class names applied to the element or a function that returns them based on the component's state." + }, + "collisionBoundary": { + "type": "'clippingAncestors' | Element | Element[] | Rect", + "default": "'clippingAncestors'", + "description": "The boundary that the Select element should be constrained to." + }, + "collisionPadding": { + "type": "number | Rect", + "default": "5", + "description": "The padding of the collision boundary." + }, + "container": { + "type": "React.Ref | HTMLElement | null", + "description": "The container element to which the Select popup will be appended to." + }, + "hideWhenDetached": { + "type": "boolean", + "default": "false", + "description": "If `true`, the Select will be hidden if it is detached from its anchor element due to\ndiffering clipping contexts." + }, + "positionMethod": { + "type": "'absolute' | 'fixed'", + "default": "'absolute'", + "description": "The CSS position method for positioning the Select popup element." + }, + "render": { + "type": "React.ReactElement | (props, state) => React.ReactElement", + "description": "A function to customize rendering of the component." + }, + "side": { + "type": "'top' | 'bottom' | 'left' | 'right'", + "default": "'bottom'", + "description": "The side of the anchor element that the Select element should align to." + }, + "sideOffset": { + "type": "number", + "default": "0", + "description": "The gap between the anchor element and the Select element." + }, + "sticky": { + "type": "boolean", + "default": "false", + "description": "If `true`, allow the Select to remain in stuck view while the anchor element is scrolled out\nof view." + }, + "trackAnchor": { + "type": "boolean", + "default": "true", + "description": "Whether the select popup continuously tracks its anchor after the initial positioning upon mount." + } + } +} diff --git a/docs/reference/generated/select-root.json b/docs/reference/generated/select-root.json new file mode 100644 index 0000000000..cb26d3dfdf --- /dev/null +++ b/docs/reference/generated/select-root.json @@ -0,0 +1,61 @@ +{ + "name": "SelectRoot", + "description": "", + "props": { + "alignOptionToTrigger": { + "type": "boolean", + "default": "true", + "description": "Determines if the selected option inside the popup should align to the trigger element." + }, + "animated": { + "type": "boolean", + "default": "true", + "description": "If `true`, the Select supports CSS-based animations and transitions.\nIt is kept in the DOM until the animation completes." + }, + "defaultOpen": { + "type": "boolean", + "default": "false", + "description": "If `true`, the Select is initially open." + }, + "defaultValue": { + "type": "any", + "default": "null", + "description": "The default value of the select." + }, + "disabled": { + "type": "boolean", + "default": "false", + "description": "If `true`, the Select is disabled." + }, + "name": { + "type": "string", + "description": "The name of the Select in the owning form." + }, + "onOpenChange": { + "type": "function", + "description": "Callback fired when the component requests to be opened or closed." + }, + "onValueChange": { + "type": "function", + "description": "Callback fired when the value of the select changes. Use when controlled." + }, + "open": { + "type": "boolean", + "description": "Allows to control whether the dropdown is open.\nThis is a controlled counterpart of `defaultOpen`." + }, + "readOnly": { + "type": "boolean", + "default": "false", + "description": "If `true`, the Select is read-only." + }, + "required": { + "type": "boolean", + "default": "false", + "description": "If `true`, the Select is required." + }, + "value": { + "type": "any", + "description": "The value of the select." + } + } +} diff --git a/docs/reference/generated/select-scroll-down-arrow.json b/docs/reference/generated/select-scroll-down-arrow.json new file mode 100644 index 0000000000..5bd4ed803c --- /dev/null +++ b/docs/reference/generated/select-scroll-down-arrow.json @@ -0,0 +1,11 @@ +{ + "name": "SelectScrollDownArrow", + "description": "", + "props": { + "keepMounted": { + "type": "boolean", + "default": "false", + "description": "Whether the component should be kept mounted when it is not rendered." + } + } +} diff --git a/docs/reference/generated/select-scroll-up-arrow.json b/docs/reference/generated/select-scroll-up-arrow.json new file mode 100644 index 0000000000..6a28db98e3 --- /dev/null +++ b/docs/reference/generated/select-scroll-up-arrow.json @@ -0,0 +1,11 @@ +{ + "name": "SelectScrollUpArrow", + "description": "", + "props": { + "keepMounted": { + "type": "boolean", + "default": "false", + "description": "Whether the component should be kept mounted when it is not rendered." + } + } +} diff --git a/docs/reference/generated/select-trigger.json b/docs/reference/generated/select-trigger.json new file mode 100644 index 0000000000..24a9b98b9e --- /dev/null +++ b/docs/reference/generated/select-trigger.json @@ -0,0 +1,28 @@ +{ + "name": "SelectTrigger", + "description": "", + "props": { + "className": { + "type": "string | (state) => string", + "description": "Class names applied to the element or a function that returns them based on the component's state." + }, + "disabled": { + "type": "boolean", + "default": "false", + "description": "If `true`, the component is disabled." + }, + "focusableWhenDisabled": { + "type": "boolean", + "default": "false", + "description": "If `true`, allows a disabled button to receive focus." + }, + "label": { + "type": "string", + "description": "Label of the button" + }, + "render": { + "type": "React.ReactElement | (props, state) => React.ReactElement", + "description": "A function to customize rendering of the component." + } + } +} diff --git a/docs/reference/generated/select-value.json b/docs/reference/generated/select-value.json new file mode 100644 index 0000000000..6874711e88 --- /dev/null +++ b/docs/reference/generated/select-value.json @@ -0,0 +1,18 @@ +{ + "name": "SelectValue", + "description": "", + "props": { + "className": { + "type": "string | (state) => string", + "description": "Class names applied to the element or a function that returns them based on the component's state." + }, + "placeholder": { + "type": "string", + "description": "The placeholder value to display when the value is empty (such as during SSR)." + }, + "render": { + "type": "React.ReactElement | (props, state) => React.ReactElement", + "description": "A function to customize rendering of the component." + } + } +} diff --git a/docs/src/app/experiments/anchor-positioning.tsx b/docs/src/app/experiments/anchor-positioning.tsx index db7995cfca..303ffa2a81 100644 --- a/docs/src/app/experiments/anchor-positioning.tsx +++ b/docs/src/app/experiments/anchor-positioning.tsx @@ -50,6 +50,7 @@ export default function AnchorPositioning() { sticky, arrowPadding, trackAnchor, + name: 'test', }); const handleInitialScroll = React.useCallback((node: HTMLDivElement | null) => { @@ -82,8 +83,8 @@ export default function AnchorPositioning() { boxSizing: 'border-box', padding: 10, ...(constrainSize && { - maxWidth: 'var(--available-width)', - maxHeight: 'var(--available-height)', + maxWidth: 'var(--test-available-width)', + maxHeight: 'var(--test-available-height)', overflow: 'auto', }), }} diff --git a/docs/src/app/experiments/tooltip.tsx b/docs/src/app/experiments/tooltip.tsx index b7fbf2602e..9b489ba0f2 100644 --- a/docs/src/app/experiments/tooltip.tsx +++ b/docs/src/app/experiments/tooltip.tsx @@ -32,7 +32,7 @@ export const TooltipPopup = styled(Tooltip.Popup)` border-radius: 4px; font-size: 95%; cursor: default; - transform-origin: var(--transform-origin); + transform-origin: var(--tooltip-arrow-origin); &[data-instant] { transition-duration: 0s !important; diff --git a/docs/src/components/Popup.css b/docs/src/components/Popup.css index 23a0ac1f7a..84ccd615b7 100644 --- a/docs/src/components/Popup.css +++ b/docs/src/components/Popup.css @@ -1,7 +1,7 @@ @layer components { .Popup { - max-width: var(--available-width); - max-height: var(--available-height); + max-width: var(--popover-available-width); + max-height: var(--popover-available-height); border-radius: 0.375rem; background-color: var(--color-popup); overflow: hidden; @@ -16,7 +16,7 @@ outline-offset: -1px; } - transform-origin: var(--transform-origin); + transform-origin: var(--popover-arrow-origin); transition-property: opacity, transform; transition-timing-function: cubic-bezier(0.3, 1.065, 0.01, 0.975); diff --git a/packages/mui-base/src/Dialog/Popup/DialogPopup.tsx b/packages/mui-base/src/Dialog/Popup/DialogPopup.tsx index ea2bacfc52..8196f46003 100644 --- a/packages/mui-base/src/Dialog/Popup/DialogPopup.tsx +++ b/packages/mui-base/src/Dialog/Popup/DialogPopup.tsx @@ -104,7 +104,10 @@ const DialogPopup = React.forwardRef(function DialogPopup( propGetter: getRootProps, extraProps: { ...other, - style: { ...other.style, '--nested-dialogs': nestedOpenDialogCount }, + style: { + ...other.style, + '--dialog-nested-count': nestedOpenDialogCount, + }, }, customStyleHookMapping, }); diff --git a/packages/mui-base/src/Menu/Positioner/useMenuPositioner.ts b/packages/mui-base/src/Menu/Positioner/useMenuPositioner.ts index 2e95b8b269..f2eb8669d7 100644 --- a/packages/mui-base/src/Menu/Positioner/useMenuPositioner.ts +++ b/packages/mui-base/src/Menu/Positioner/useMenuPositioner.ts @@ -27,7 +27,10 @@ export function useMenuPositioner( renderedSide, renderedAlignment, positionerContext: floatingContext, - } = useAnchorPositioning(params); + } = useAnchorPositioning({ + ...params, + name: 'menu', + }); const getPositionerProps: useMenuPositioner.ReturnValue['getPositionerProps'] = React.useCallback( (externalProps = {}) => { diff --git a/packages/mui-base/src/Popover/Positioner/usePopoverPositioner.tsx b/packages/mui-base/src/Popover/Positioner/usePopoverPositioner.tsx index 1fcfa6e81a..c0bafd45f3 100644 --- a/packages/mui-base/src/Popover/Positioner/usePopoverPositioner.tsx +++ b/packages/mui-base/src/Popover/Positioner/usePopoverPositioner.tsx @@ -26,7 +26,10 @@ export function usePopoverPositioner( renderedSide, renderedAlignment, positionerContext, - } = useAnchorPositioning(params); + } = useAnchorPositioning({ + ...params, + name: 'popover', + }); // Default initial focus logic: // If opened by touch, focus the popup element to prevent the virtual keyboard from opening diff --git a/packages/mui-base/src/PreviewCard/Positioner/usePreviewCardPositioner.ts b/packages/mui-base/src/PreviewCard/Positioner/usePreviewCardPositioner.ts index 348d39b2de..fa911eee60 100644 --- a/packages/mui-base/src/PreviewCard/Positioner/usePreviewCardPositioner.ts +++ b/packages/mui-base/src/PreviewCard/Positioner/usePreviewCardPositioner.ts @@ -24,7 +24,10 @@ export function usePreviewCardPositioner( renderedSide, renderedAlignment, positionerContext, - } = useAnchorPositioning(params); + } = useAnchorPositioning({ + ...params, + name: 'preview-card', + }); const getPositionerProps: usePreviewCardPositioner.ReturnValue['getPositionerProps'] = React.useCallback( diff --git a/packages/mui-base/src/Select/Positioner/useSelectPositioner.ts b/packages/mui-base/src/Select/Positioner/useSelectPositioner.ts index 0d9ad530f7..812bffaa63 100644 --- a/packages/mui-base/src/Select/Positioner/useSelectPositioner.ts +++ b/packages/mui-base/src/Select/Positioner/useSelectPositioner.ts @@ -42,6 +42,7 @@ export function useSelectPositioner( keepMounted: true, enabled: mounted, trackAnchor: params.trackAnchor ?? !alignOptionToTrigger, + name: 'select', }); const positionerStyles: React.CSSProperties = React.useMemo( diff --git a/packages/mui-base/src/Tooltip/Positioner/useTooltipPositioner.ts b/packages/mui-base/src/Tooltip/Positioner/useTooltipPositioner.ts index 02896a1db5..dc1d0f51b2 100644 --- a/packages/mui-base/src/Tooltip/Positioner/useTooltipPositioner.ts +++ b/packages/mui-base/src/Tooltip/Positioner/useTooltipPositioner.ts @@ -17,7 +17,10 @@ export function useTooltipPositioner( arrowUncentered, renderedSide, renderedAlignment, - } = useAnchorPositioning(params); + } = useAnchorPositioning({ + ...params, + name: 'tooltip', + }); const getPositionerProps: useTooltipPositioner.ReturnValue['getPositionerProps'] = React.useCallback( @@ -37,8 +40,6 @@ export function useTooltipPositioner( style: { ...positionerStyles, ...hiddenStyles, - maxWidth: 'var(--available-width)', - maxHeight: 'var(--available-height)', }, }); }, diff --git a/packages/mui-base/src/utils/useAnchorPositioning.ts b/packages/mui-base/src/utils/useAnchorPositioning.ts index bd289623f4..9477fcd067 100644 --- a/packages/mui-base/src/utils/useAnchorPositioning.ts +++ b/packages/mui-base/src/utils/useAnchorPositioning.ts @@ -50,6 +50,7 @@ interface UseAnchorPositioningParameters { trackAnchor?: boolean; nodeId?: string; allowAxisFlip?: boolean; + name: string; } interface UseAnchorPositioningReturnValue { @@ -71,7 +72,7 @@ interface UseAnchorPositioningReturnValue { * @ignore - internal hook. */ export function useAnchorPositioning( - params: UseAnchorPositioningParameters = {}, + params: UseAnchorPositioningParameters, ): UseAnchorPositioningReturnValue { const { enabled = true, @@ -94,6 +95,7 @@ export function useAnchorPositioning( allowAxisFlip = true, open, nodeId, + name, } = params; const placement = alignment === 'center' ? side : (`${side}-${alignment}` as Placement); @@ -148,10 +150,10 @@ export function useAnchorPositioning( ...commonCollisionProps, apply({ elements: { floating }, rects: { reference }, availableWidth, availableHeight }) { Object.entries({ - '--available-width': `${availableWidth}px`, - '--available-height': `${availableHeight}px`, - '--anchor-width': `${reference.width}px`, - '--anchor-height': `${reference.height}px`, + [`--${name}-available-width`]: `${availableWidth}px`, + [`--${name}-available-height`]: `${availableHeight}px`, + [`--${name}-anchor-width`]: `${reference.width}px`, + [`--${name}-anchor-height`]: `${reference.height}px`, }).forEach(([key, value]) => { floating.style.setProperty(key, value); }); @@ -179,14 +181,14 @@ export function useAnchorPositioning( const transformX = arrowX + arrowWidth / 2; const transformY = arrowY + arrowHeight; - const transformOrigin = { + const arrowOrigin = { top: `${transformX}px calc(100% + ${arrowHeight}px)`, bottom: `${transformX}px ${-arrowHeight}px`, left: `calc(100% + ${arrowHeight}px) ${transformY}px`, right: `${-arrowHeight}px ${transformY}px`, }[currentRenderedSide]; - elements.floating.style.setProperty('--transform-origin', transformOrigin); + elements.floating.style.setProperty(`--${name}-arrow-origin`, arrowOrigin); return {}; }, From 1e67f26fbd39c3f882083e514c70aa9c705d308d Mon Sep 17 00:00:00 2001 From: atomiks Date: Fri, 15 Nov 2024 17:20:45 +1100 Subject: [PATCH 2/2] --dialog-nested-count --- .../alert-dialog/NestedAlertDialogs.js | 8 +++--- .../alert-dialog/NestedAlertDialogs.tsx | 8 +++--- docs/data/components/dialog/NestedDialogs.js | 8 +++--- docs/data/components/dialog/NestedDialogs.tsx | 8 +++--- docs/src/app/experiments/dialog.module.css | 26 +++++++++---------- .../components/dialog/NestedDialogs.tsx | 8 +++--- 6 files changed, 33 insertions(+), 33 deletions(-) diff --git a/docs/data/components/alert-dialog/NestedAlertDialogs.js b/docs/data/components/alert-dialog/NestedAlertDialogs.js index 470e316552..6610813a3b 100644 --- a/docs/data/components/alert-dialog/NestedAlertDialogs.js +++ b/docs/data/components/alert-dialog/NestedAlertDialogs.js @@ -63,8 +63,8 @@ const Popup = styled(BaseAlertDialog.Popup)( font-family: IBM Plex Sans; padding: 16px; z-index: 2100; - transform: translate(-50%, -35%) scale(0.8, calc(pow(0.95, var(--nested-dialogs)))) - translateY(calc(-30px * var(--nested-dialogs))); + transform: translate(-50%, -35%) scale(0.8, calc(pow(0.95, var(--dialog-nested-count)))) + translateY(calc(-30px * var(--dialog-nested-count))); visibility: hidden; opacity: 0.5; transition: @@ -82,8 +82,8 @@ const Popup = styled(BaseAlertDialog.Popup)( visibility: visible; opacity: 1; - transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--nested-dialogs)))) - translateY(calc(-30px * var(--nested-dialogs))); + transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--dialog-nested-count)))) + translateY(calc(-30px * var(--dialog-nested-count))); transition: transform var(--transition-duration) ease-out, opacity var(--transition-duration) ease-out, diff --git a/docs/data/components/alert-dialog/NestedAlertDialogs.tsx b/docs/data/components/alert-dialog/NestedAlertDialogs.tsx index 470e316552..6610813a3b 100644 --- a/docs/data/components/alert-dialog/NestedAlertDialogs.tsx +++ b/docs/data/components/alert-dialog/NestedAlertDialogs.tsx @@ -63,8 +63,8 @@ const Popup = styled(BaseAlertDialog.Popup)( font-family: IBM Plex Sans; padding: 16px; z-index: 2100; - transform: translate(-50%, -35%) scale(0.8, calc(pow(0.95, var(--nested-dialogs)))) - translateY(calc(-30px * var(--nested-dialogs))); + transform: translate(-50%, -35%) scale(0.8, calc(pow(0.95, var(--dialog-nested-count)))) + translateY(calc(-30px * var(--dialog-nested-count))); visibility: hidden; opacity: 0.5; transition: @@ -82,8 +82,8 @@ const Popup = styled(BaseAlertDialog.Popup)( visibility: visible; opacity: 1; - transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--nested-dialogs)))) - translateY(calc(-30px * var(--nested-dialogs))); + transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--dialog-nested-count)))) + translateY(calc(-30px * var(--dialog-nested-count))); transition: transform var(--transition-duration) ease-out, opacity var(--transition-duration) ease-out, diff --git a/docs/data/components/dialog/NestedDialogs.js b/docs/data/components/dialog/NestedDialogs.js index 32839c7da2..422eba9137 100644 --- a/docs/data/components/dialog/NestedDialogs.js +++ b/docs/data/components/dialog/NestedDialogs.js @@ -63,8 +63,8 @@ const Popup = styled(BaseDialog.Popup)( font-family: IBM Plex Sans; padding: 16px; z-index: 2100; - transform: translate(-50%, -35%) scale(0.8, calc(pow(0.95, var(--nested-dialogs)))) - translateY(calc(-30px * var(--nested-dialogs))); + transform: translate(-50%, -35%) scale(0.8, calc(pow(0.95, var(--dialog-nested-count)))) + translateY(calc(-30px * var(--dialog-nested-count))); visibility: hidden; opacity: 0.5; transition: @@ -82,8 +82,8 @@ const Popup = styled(BaseDialog.Popup)( visibility: visible; opacity: 1; - transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--nested-dialogs)))) - translateY(calc(-30px * var(--nested-dialogs))); + transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--dialog-nested-count)))) + translateY(calc(-30px * var(--dialog-nested-count))); transition: transform var(--transition-duration) ease-out, opacity var(--transition-duration) ease-out, diff --git a/docs/data/components/dialog/NestedDialogs.tsx b/docs/data/components/dialog/NestedDialogs.tsx index 32839c7da2..422eba9137 100644 --- a/docs/data/components/dialog/NestedDialogs.tsx +++ b/docs/data/components/dialog/NestedDialogs.tsx @@ -63,8 +63,8 @@ const Popup = styled(BaseDialog.Popup)( font-family: IBM Plex Sans; padding: 16px; z-index: 2100; - transform: translate(-50%, -35%) scale(0.8, calc(pow(0.95, var(--nested-dialogs)))) - translateY(calc(-30px * var(--nested-dialogs))); + transform: translate(-50%, -35%) scale(0.8, calc(pow(0.95, var(--dialog-nested-count)))) + translateY(calc(-30px * var(--dialog-nested-count))); visibility: hidden; opacity: 0.5; transition: @@ -82,8 +82,8 @@ const Popup = styled(BaseDialog.Popup)( visibility: visible; opacity: 1; - transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--nested-dialogs)))) - translateY(calc(-30px * var(--nested-dialogs))); + transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--dialog-nested-count)))) + translateY(calc(-30px * var(--dialog-nested-count))); transition: transform var(--transition-duration) ease-out, opacity var(--transition-duration) ease-out, diff --git a/docs/src/app/experiments/dialog.module.css b/docs/src/app/experiments/dialog.module.css index 2f6bd62891..991b1ce6ad 100644 --- a/docs/src/app/experiments/dialog.module.css +++ b/docs/src/app/experiments/dialog.module.css @@ -3,8 +3,8 @@ transform: translate(-50%, -35%) scale(0.8) translateY(0); } to { - transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--nested-dialogs)))) - translateY(calc(-30px * var(--nested-dialogs))); + transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--dialog-nested-count)))) + translateY(calc(-30px * var(--dialog-nested-count))); } } @@ -20,15 +20,15 @@ @keyframes dialog-closing { from { - transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--nested-dialogs)))) - translateY(calc(-30px * var(--nested-dialogs))); + transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--dialog-nested-count)))) + translateY(calc(-30px * var(--dialog-nested-count))); opacity: 1; visibility: visible; } to { - transform: translate(-50%, -35%) scale(0.8, calc(pow(0.95, var(--nested-dialogs)))) - translateY(calc(-30px * var(--nested-dialogs))); + transform: translate(-50%, -35%) scale(0.8, calc(pow(0.95, var(--dialog-nested-count)))) + translateY(calc(-30px * var(--dialog-nested-count))); opacity: 0.5; visibility: hidden; } @@ -76,11 +76,11 @@ font-family: IBM Plex Sans; z-index: 1; transform: translate(-50%, -50%); - opacity: calc(pow(0.95, var(--nested-dialogs))); + opacity: calc(pow(0.95, var(--dialog-nested-count))); &.withTransitions { - transform: translate(-50%, -35%) scale(0.8, calc(pow(0.95, var(--nested-dialogs)))) - translateY(calc(-30px * var(--nested-dialogs))); + transform: translate(-50%, -35%) scale(0.8, calc(pow(0.95, var(--dialog-nested-count)))) + translateY(calc(-30px * var(--dialog-nested-count))); visibility: hidden; opacity: 0; transition: @@ -98,8 +98,8 @@ visibility: visible; opacity: 1; - transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--nested-dialogs)))) - translateY(calc(-30px * var(--nested-dialogs))); + transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--dialog-nested-count)))) + translateY(calc(-30px * var(--dialog-nested-count))); transition: transform var(--transition-duration) ease-out, opacity var(--transition-duration) ease-out, @@ -116,8 +116,8 @@ animation: dialog-opening-transform var(--transition-duration) ease-out, dialog-opening-opacity var(--transition-duration) ease-out forwards; - transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--nested-dialogs)))) - translateY(calc(-30px * var(--nested-dialogs))); + transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--dialog-nested-count)))) + translateY(calc(-30px * var(--dialog-nested-count))); transition: transform var(--transition-duration) ease-out; } diff --git a/docs/src/app/new/(content)/components/dialog/NestedDialogs.tsx b/docs/src/app/new/(content)/components/dialog/NestedDialogs.tsx index 32839c7da2..422eba9137 100644 --- a/docs/src/app/new/(content)/components/dialog/NestedDialogs.tsx +++ b/docs/src/app/new/(content)/components/dialog/NestedDialogs.tsx @@ -63,8 +63,8 @@ const Popup = styled(BaseDialog.Popup)( font-family: IBM Plex Sans; padding: 16px; z-index: 2100; - transform: translate(-50%, -35%) scale(0.8, calc(pow(0.95, var(--nested-dialogs)))) - translateY(calc(-30px * var(--nested-dialogs))); + transform: translate(-50%, -35%) scale(0.8, calc(pow(0.95, var(--dialog-nested-count)))) + translateY(calc(-30px * var(--dialog-nested-count))); visibility: hidden; opacity: 0.5; transition: @@ -82,8 +82,8 @@ const Popup = styled(BaseDialog.Popup)( visibility: visible; opacity: 1; - transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--nested-dialogs)))) - translateY(calc(-30px * var(--nested-dialogs))); + transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--dialog-nested-count)))) + translateY(calc(-30px * var(--dialog-nested-count))); transition: transform var(--transition-duration) ease-out, opacity var(--transition-duration) ease-out,