From b64e1ddbf7984c7b5c1422bd82d624cc0ee5fb39 Mon Sep 17 00:00:00 2001 From: atomiks Date: Thu, 5 Dec 2024 10:44:15 +1100 Subject: [PATCH] [popups] Use `data-anchor-hidden` attribute (#934) --- docs/data/api/menu-positioner.json | 1 - docs/data/api/popover-positioner.json | 1 - docs/data/api/preview-card-positioner.json | 1 - docs/data/api/select-positioner.json | 1 - docs/data/api/tooltip-positioner.json | 1 - .../menu-positioner/menu-positioner.json | 3 --- .../popover-positioner.json | 3 --- .../preview-card-positioner.json | 3 --- .../select-positioner/select-positioner.json | 3 --- .../tooltip-positioner.json | 3 --- docs/reference/generated/menu-positioner.json | 5 ---- .../generated/popover-positioner.json | 5 ---- .../generated/preview-card-positioner.json | 5 ---- .../generated/select-positioner.json | 5 ---- .../generated/tooltip-positioner.json | 5 ---- .../app/experiments/anchor-positioning.tsx | 11 -------- .../backdrop/AlertDialogBackdrop.tsx | 2 +- .../alert-dialog/popup/AlertDialogPopup.tsx | 2 +- .../trigger/AlertDialogTrigger.tsx | 2 +- .../src/dialog/backdrop/DialogBackdrop.tsx | 2 +- .../react/src/dialog/popup/DialogPopup.tsx | 2 +- .../src/dialog/trigger/DialogTrigger.tsx | 2 +- packages/react/src/menu/arrow/MenuArrow.tsx | 4 +-- packages/react/src/menu/popup/MenuPopup.tsx | 2 +- .../src/menu/positioner/MenuPositioner.tsx | 24 +++++++---------- .../src/menu/positioner/useMenuPositioner.ts | 18 ++++++------- .../menu/submenu-trigger/SubmenuTrigger.tsx | 2 +- .../react/src/menu/trigger/MenuTrigger.tsx | 2 +- .../react/src/popover/arrow/PopoverArrow.tsx | 4 +-- .../src/popover/backdrop/PopoverBackdrop.tsx | 2 +- .../react/src/popover/popup/PopoverPopup.tsx | 2 +- .../popover/positioner/PopoverPositioner.tsx | 16 ++++------- .../positioner/usePopoverPositioner.tsx | 18 ++++++------- .../src/popover/trigger/PopoverTrigger.tsx | 2 +- .../preview-card/arrow/PreviewCardArrow.tsx | 4 +-- .../backdrop/PreviewCardBackdrop.tsx | 2 +- .../preview-card/popup/PreviewCardPopup.tsx | 2 +- .../positioner/PreviewCardPositioner.tsx | 16 ++++------- .../positioner/usePreviewCardPositioner.ts | 18 ++++++------- .../trigger/PreviewCardTrigger.tsx | 2 +- .../react/src/select/arrow/SelectArrow.tsx | 4 +-- .../src/select/backdrop/SelectBackdrop.tsx | 4 +-- .../react/src/select/popup/SelectPopup.tsx | 4 +-- .../select/positioner/SelectPositioner.tsx | 16 ++++------- .../select/positioner/useSelectPositioner.ts | 18 ++++++------- .../src/select/trigger/SelectTrigger.tsx | 2 +- .../react/src/tooltip/arrow/TooltipArrow.tsx | 4 +-- .../react/src/tooltip/popup/TooltipPopup.tsx | 2 +- .../tooltip/positioner/TooltipPositioner.tsx | 16 ++++------- .../positioner/useTooltipPositioner.ts | 27 ++++++++++++------- .../src/tooltip/trigger/TooltipTrigger.tsx | 2 +- ...enStateMapping.ts => popupStateMapping.ts} | 14 ++++++++-- .../react/src/utils/useAnchorPositioning.ts | 24 +++++------------ 53 files changed, 133 insertions(+), 212 deletions(-) rename packages/react/src/utils/{popupOpenStateMapping.ts => popupStateMapping.ts} (72%) diff --git a/docs/data/api/menu-positioner.json b/docs/data/api/menu-positioner.json index a28c0e0dce..36bfc78afe 100644 --- a/docs/data/api/menu-positioner.json +++ b/docs/data/api/menu-positioner.json @@ -31,7 +31,6 @@ "default": "5" }, "container": { "type": { "name": "union", "description": "HTML element
| func" } }, - "hideWhenDetached": { "type": { "name": "bool" }, "default": "false" }, "keepMounted": { "type": { "name": "bool" }, "default": "false" }, "positionMethod": { "type": { "name": "enum", "description": "'absolute'
| 'fixed'" }, diff --git a/docs/data/api/popover-positioner.json b/docs/data/api/popover-positioner.json index b1904aaae2..52f4116562 100644 --- a/docs/data/api/popover-positioner.json +++ b/docs/data/api/popover-positioner.json @@ -31,7 +31,6 @@ "default": "5" }, "container": { "type": { "name": "union", "description": "HTML element
| func" } }, - "hideWhenDetached": { "type": { "name": "bool" }, "default": "false" }, "keepMounted": { "type": { "name": "bool" }, "default": "false" }, "positionMethod": { "type": { "name": "enum", "description": "'absolute'
| 'fixed'" }, diff --git a/docs/data/api/preview-card-positioner.json b/docs/data/api/preview-card-positioner.json index e49dcf37c3..37b1e840a1 100644 --- a/docs/data/api/preview-card-positioner.json +++ b/docs/data/api/preview-card-positioner.json @@ -31,7 +31,6 @@ "default": "5" }, "container": { "type": { "name": "union", "description": "HTML element
| func" } }, - "hideWhenDetached": { "type": { "name": "bool" }, "default": "false" }, "keepMounted": { "type": { "name": "bool" }, "default": "false" }, "positionMethod": { "type": { "name": "enum", "description": "'absolute'
| 'fixed'" }, diff --git a/docs/data/api/select-positioner.json b/docs/data/api/select-positioner.json index ba8bea64fd..63d453d2ec 100644 --- a/docs/data/api/select-positioner.json +++ b/docs/data/api/select-positioner.json @@ -36,7 +36,6 @@ "description": "(props, propName) => {\n if (props[propName] == null) {\n return new Error(`Prop '${propName}' is required but wasn't specified`);\n }\n if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {\n return new Error(`Expected prop '${propName}' to be of type Element`);\n }\n return null;\n}
| { current?: (props, propName) => {\n if (props[propName] == null) {\n return null;\n }\n if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {\n return new Error(`Expected prop '${propName}' to be of type Element`);\n }\n return null;\n} }" } }, - "hideWhenDetached": { "type": { "name": "bool" }, "default": "false" }, "positionMethod": { "type": { "name": "enum", "description": "'absolute'
| 'fixed'" }, "default": "'absolute'" diff --git a/docs/data/api/tooltip-positioner.json b/docs/data/api/tooltip-positioner.json index 24bec18e43..336ae915dd 100644 --- a/docs/data/api/tooltip-positioner.json +++ b/docs/data/api/tooltip-positioner.json @@ -31,7 +31,6 @@ "default": "5" }, "container": { "type": { "name": "union", "description": "HTML element
| func" } }, - "hideWhenDetached": { "type": { "name": "bool" }, "default": "false" }, "keepMounted": { "type": { "name": "bool" }, "default": "false" }, "positionMethod": { "type": { "name": "enum", "description": "'absolute'
| 'fixed'" }, diff --git a/docs/data/translations/api-docs/menu-positioner/menu-positioner.json b/docs/data/translations/api-docs/menu-positioner/menu-positioner.json index 64ce1523f9..5bd1e9e1e3 100644 --- a/docs/data/translations/api-docs/menu-positioner/menu-positioner.json +++ b/docs/data/translations/api-docs/menu-positioner/menu-positioner.json @@ -19,9 +19,6 @@ "container": { "description": "The container element to which the Menu popup will be appended to." }, - "hideWhenDetached": { - "description": "If true, the Menu will be hidden if it is detached from its anchor element due to differing clipping contexts." - }, "keepMounted": { "description": "Whether the menu popup remains mounted in the DOM while closed." }, diff --git a/docs/data/translations/api-docs/popover-positioner/popover-positioner.json b/docs/data/translations/api-docs/popover-positioner/popover-positioner.json index 66b20de227..0c71aca8b9 100644 --- a/docs/data/translations/api-docs/popover-positioner/popover-positioner.json +++ b/docs/data/translations/api-docs/popover-positioner/popover-positioner.json @@ -19,9 +19,6 @@ "description": "The padding between the popover element and the edges of the collision boundary to add whitespace between them to prevent them from touching." }, "container": { "description": "The element the popover positioner element is appended to." }, - "hideWhenDetached": { - "description": "Whether the popover element is hidden if it appears detached from its anchor element due to the anchor element being clipped (or hidden) from view." - }, "keepMounted": { "description": "Whether the popover remains mounted in the DOM while closed." }, diff --git a/docs/data/translations/api-docs/preview-card-positioner/preview-card-positioner.json b/docs/data/translations/api-docs/preview-card-positioner/preview-card-positioner.json index a681d78488..32380499ca 100644 --- a/docs/data/translations/api-docs/preview-card-positioner/preview-card-positioner.json +++ b/docs/data/translations/api-docs/preview-card-positioner/preview-card-positioner.json @@ -23,9 +23,6 @@ "container": { "description": "The container element to which the preview card popup will be appended to." }, - "hideWhenDetached": { - "description": "If true, the preview card will be hidden if it is detached from its anchor element due to differing clipping contexts." - }, "keepMounted": { "description": "If true, preview card stays mounted in the DOM when closed." }, diff --git a/docs/data/translations/api-docs/select-positioner/select-positioner.json b/docs/data/translations/api-docs/select-positioner/select-positioner.json index e6c801d704..a2773be66f 100644 --- a/docs/data/translations/api-docs/select-positioner/select-positioner.json +++ b/docs/data/translations/api-docs/select-positioner/select-positioner.json @@ -19,9 +19,6 @@ "container": { "description": "The container element to which the Select popup will be appended to." }, - "hideWhenDetached": { - "description": "If true, the Select will be hidden if it is detached from its anchor element due to differing clipping contexts." - }, "positionMethod": { "description": "The CSS position method for positioning the Select popup element." }, diff --git a/docs/data/translations/api-docs/tooltip-positioner/tooltip-positioner.json b/docs/data/translations/api-docs/tooltip-positioner/tooltip-positioner.json index 09f76feeb0..8384ce0c64 100644 --- a/docs/data/translations/api-docs/tooltip-positioner/tooltip-positioner.json +++ b/docs/data/translations/api-docs/tooltip-positioner/tooltip-positioner.json @@ -19,9 +19,6 @@ "description": "The padding between the tooltip element and the edges of the collision boundary to add whitespace between them to prevent them from touching." }, "container": { "description": "The container element the tooltip positioner is appended to." }, - "hideWhenDetached": { - "description": "Whether the tooltip element is hidden if it appears detached from its anchor element due to the anchor element being clipped (or hidden) from view." - }, "keepMounted": { "description": "Whether the tooltip remains mounted in the DOM while closed." }, diff --git a/docs/reference/generated/menu-positioner.json b/docs/reference/generated/menu-positioner.json index 72012d7cc4..39bca1fff8 100644 --- a/docs/reference/generated/menu-positioner.json +++ b/docs/reference/generated/menu-positioner.json @@ -39,11 +39,6 @@ "type": "React.Ref | HTMLElement | null", "description": "The container element to which the Menu popup will be appended to." }, - "hideWhenDetached": { - "type": "boolean", - "default": "false", - "description": "If `true`, the Menu will be hidden if it is detached from its anchor element due to\ndiffering clipping contexts." - }, "keepMounted": { "type": "boolean", "default": "false", diff --git a/docs/reference/generated/popover-positioner.json b/docs/reference/generated/popover-positioner.json index d7e50ed5d3..c72502ebbd 100644 --- a/docs/reference/generated/popover-positioner.json +++ b/docs/reference/generated/popover-positioner.json @@ -39,11 +39,6 @@ "type": "React.Ref | HTMLElement | null", "description": "The element the popover positioner element is appended to." }, - "hideWhenDetached": { - "type": "boolean", - "default": "false", - "description": "Whether the popover element is hidden if it appears detached from its anchor element due\nto the anchor element being clipped (or hidden) from view." - }, "keepMounted": { "type": "boolean", "default": "false", diff --git a/docs/reference/generated/preview-card-positioner.json b/docs/reference/generated/preview-card-positioner.json index da3076d253..0f086297d4 100644 --- a/docs/reference/generated/preview-card-positioner.json +++ b/docs/reference/generated/preview-card-positioner.json @@ -39,11 +39,6 @@ "type": "React.Ref | HTMLElement | null", "description": "The container element to which the preview card popup will be appended to." }, - "hideWhenDetached": { - "type": "boolean", - "default": "false", - "description": "If `true`, the preview card will be hidden if it is detached from its anchor element due to\ndiffering clipping contexts." - }, "keepMounted": { "type": "boolean", "default": "false", diff --git a/docs/reference/generated/select-positioner.json b/docs/reference/generated/select-positioner.json index 54eebac524..ebd95d034d 100644 --- a/docs/reference/generated/select-positioner.json +++ b/docs/reference/generated/select-positioner.json @@ -39,11 +39,6 @@ "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'", diff --git a/docs/reference/generated/tooltip-positioner.json b/docs/reference/generated/tooltip-positioner.json index de72697fdd..e171ee24b0 100644 --- a/docs/reference/generated/tooltip-positioner.json +++ b/docs/reference/generated/tooltip-positioner.json @@ -39,11 +39,6 @@ "type": "React.Ref | HTMLElement | null", "description": "The container element the tooltip positioner is appended to." }, - "hideWhenDetached": { - "type": "boolean", - "default": "false", - "description": "Whether the tooltip element is hidden if it appears detached from its anchor element due\nto the anchor element being clipped (or hidden) from view." - }, "keepMounted": { "type": "boolean", "default": "false", diff --git a/docs/src/app/experiments/anchor-positioning.tsx b/docs/src/app/experiments/anchor-positioning.tsx index c4dc6675cc..f2ca268dd5 100644 --- a/docs/src/app/experiments/anchor-positioning.tsx +++ b/docs/src/app/experiments/anchor-positioning.tsx @@ -22,7 +22,6 @@ export default function AnchorPositioning() { const [alignOffset, setAlignOffset] = React.useState(0); const [collisionPadding, setCollisionPadding] = React.useState(5); const [arrowPadding, setArrowPadding] = React.useState(5); - const [hideWhenDetached, setHideWhenDetached] = React.useState(false); const [arrow, setArrow] = React.useState(true); const [hideArrowWhenUncentered, setHideArrowWhenUncentered] = React.useState(false); @@ -44,7 +43,6 @@ export default function AnchorPositioning() { sideOffset, alignOffset, collisionPadding, - hideWhenDetached, sticky, arrowPadding, trackAnchor, @@ -272,15 +270,6 @@ export default function AnchorPositioning() { Constrain size - -