@depup/react-aria-components 1.19.0-depup.27 → 1.21.0-depup.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/NavigationTree/package.json +5 -0
- package/PreviewTrigger/package.json +5 -0
- package/README.md +2 -2
- package/TokenField/package.json +5 -0
- package/changes.json +1 -1
- package/dist/exports/GridList.cjs.map +1 -1
- package/dist/exports/GridList.js.map +1 -1
- package/dist/exports/GridList.mjs.map +1 -1
- package/dist/exports/Menu.cjs +1 -0
- package/dist/exports/Menu.cjs.map +1 -1
- package/dist/exports/Menu.js +2 -2
- package/dist/exports/Menu.js.map +1 -1
- package/dist/exports/Menu.mjs +2 -2
- package/dist/exports/Menu.mjs.map +1 -1
- package/dist/exports/NavigationTree.cjs +37 -0
- package/dist/exports/NavigationTree.cjs.map +1 -0
- package/dist/exports/NavigationTree.js +25 -0
- package/dist/exports/NavigationTree.js.map +1 -0
- package/dist/exports/NavigationTree.mjs +25 -0
- package/dist/exports/NavigationTree.mjs.map +1 -0
- package/dist/exports/PreviewTrigger.cjs +26 -0
- package/dist/exports/PreviewTrigger.cjs.map +1 -0
- package/dist/exports/PreviewTrigger.js +21 -0
- package/dist/exports/PreviewTrigger.js.map +1 -0
- package/dist/exports/PreviewTrigger.mjs +21 -0
- package/dist/exports/PreviewTrigger.mjs.map +1 -0
- package/dist/exports/TokenField.cjs +31 -0
- package/dist/exports/TokenField.cjs.map +1 -0
- package/dist/exports/TokenField.js +21 -0
- package/dist/exports/TokenField.js.map +1 -0
- package/dist/exports/TokenField.mjs +21 -0
- package/dist/exports/TokenField.mjs.map +1 -0
- package/dist/exports/Tree.cjs.map +1 -1
- package/dist/exports/Tree.js.map +1 -1
- package/dist/exports/Tree.mjs.map +1 -1
- package/dist/exports/index.cjs +25 -0
- package/dist/exports/index.cjs.map +1 -1
- package/dist/exports/index.js +12 -2
- package/dist/exports/index.js.map +1 -1
- package/dist/exports/index.mjs +12 -2
- package/dist/exports/index.mjs.map +1 -1
- package/dist/private/Checkbox.cjs.map +1 -1
- package/dist/private/Checkbox.js.map +1 -1
- package/dist/private/Checkbox.mjs.map +1 -1
- package/dist/private/ComboBox.cjs +21 -2
- package/dist/private/ComboBox.cjs.map +1 -1
- package/dist/private/ComboBox.js +21 -2
- package/dist/private/ComboBox.js.map +1 -1
- package/dist/private/ComboBox.mjs +21 -2
- package/dist/private/ComboBox.mjs.map +1 -1
- package/dist/private/Dialog.cjs +21 -1
- package/dist/private/Dialog.cjs.map +1 -1
- package/dist/private/Dialog.js +21 -1
- package/dist/private/Dialog.js.map +1 -1
- package/dist/private/Dialog.mjs +21 -1
- package/dist/private/Dialog.mjs.map +1 -1
- package/dist/private/DragAndDrop.cjs +1 -0
- package/dist/private/DragAndDrop.cjs.map +1 -1
- package/dist/private/DragAndDrop.js +1 -0
- package/dist/private/DragAndDrop.js.map +1 -1
- package/dist/private/DragAndDrop.mjs +1 -0
- package/dist/private/DragAndDrop.mjs.map +1 -1
- package/dist/private/DropZone.cjs +5 -2
- package/dist/private/DropZone.cjs.map +1 -1
- package/dist/private/DropZone.js +5 -3
- package/dist/private/DropZone.js.map +1 -1
- package/dist/private/DropZone.mjs +5 -2
- package/dist/private/DropZone.mjs.map +1 -1
- package/dist/private/FileTrigger.cjs +1 -0
- package/dist/private/FileTrigger.cjs.map +1 -1
- package/dist/private/FileTrigger.js +1 -0
- package/dist/private/FileTrigger.js.map +1 -1
- package/dist/private/FileTrigger.mjs +1 -0
- package/dist/private/FileTrigger.mjs.map +1 -1
- package/dist/private/GridLayout.cjs +3 -1
- package/dist/private/GridLayout.cjs.map +1 -1
- package/dist/private/GridLayout.js +3 -1
- package/dist/private/GridLayout.js.map +1 -1
- package/dist/private/GridLayout.mjs +3 -1
- package/dist/private/GridLayout.mjs.map +1 -1
- package/dist/private/GridList.cjs +12 -1
- package/dist/private/GridList.cjs.map +1 -1
- package/dist/private/GridList.js +12 -1
- package/dist/private/GridList.js.map +1 -1
- package/dist/private/GridList.mjs +12 -1
- package/dist/private/GridList.mjs.map +1 -1
- package/dist/private/ListBox.cjs +9 -1
- package/dist/private/ListBox.cjs.map +1 -1
- package/dist/private/ListBox.js +9 -1
- package/dist/private/ListBox.js.map +1 -1
- package/dist/private/ListBox.mjs +9 -1
- package/dist/private/ListBox.mjs.map +1 -1
- package/dist/private/Menu.cjs +59 -2
- package/dist/private/Menu.cjs.map +1 -1
- package/dist/private/Menu.js +60 -4
- package/dist/private/Menu.js.map +1 -1
- package/dist/private/Menu.mjs +60 -4
- package/dist/private/Menu.mjs.map +1 -1
- package/dist/private/Meter.cjs +2 -1
- package/dist/private/Meter.cjs.map +1 -1
- package/dist/private/Meter.js +2 -1
- package/dist/private/Meter.js.map +1 -1
- package/dist/private/Meter.mjs +2 -1
- package/dist/private/Meter.mjs.map +1 -1
- package/dist/private/Modal.cjs +2 -0
- package/dist/private/Modal.cjs.map +1 -1
- package/dist/private/Modal.js +2 -0
- package/dist/private/Modal.js.map +1 -1
- package/dist/private/Modal.mjs +2 -0
- package/dist/private/Modal.mjs.map +1 -1
- package/dist/private/NavigationTree.cjs +272 -0
- package/dist/private/NavigationTree.cjs.map +1 -0
- package/dist/private/NavigationTree.js +258 -0
- package/dist/private/NavigationTree.js.map +1 -0
- package/dist/private/NavigationTree.mjs +257 -0
- package/dist/private/NavigationTree.mjs.map +1 -0
- package/dist/private/Popover.cjs +34 -9
- package/dist/private/Popover.cjs.map +1 -1
- package/dist/private/Popover.js +34 -9
- package/dist/private/Popover.js.map +1 -1
- package/dist/private/Popover.mjs +34 -9
- package/dist/private/Popover.mjs.map +1 -1
- package/dist/private/PreviewTrigger.cjs +88 -0
- package/dist/private/PreviewTrigger.cjs.map +1 -0
- package/dist/private/PreviewTrigger.js +80 -0
- package/dist/private/PreviewTrigger.js.map +1 -0
- package/dist/private/PreviewTrigger.mjs +79 -0
- package/dist/private/PreviewTrigger.mjs.map +1 -0
- package/dist/private/ProgressBar.cjs +6 -1
- package/dist/private/ProgressBar.cjs.map +1 -1
- package/dist/private/ProgressBar.js +6 -1
- package/dist/private/ProgressBar.js.map +1 -1
- package/dist/private/ProgressBar.mjs +6 -1
- package/dist/private/ProgressBar.mjs.map +1 -1
- package/dist/private/RadioGroup.cjs.map +1 -1
- package/dist/private/RadioGroup.js.map +1 -1
- package/dist/private/RadioGroup.mjs.map +1 -1
- package/dist/private/Select.cjs.map +1 -1
- package/dist/private/Select.js.map +1 -1
- package/dist/private/Select.mjs.map +1 -1
- package/dist/private/Switch.cjs +8 -2
- package/dist/private/Switch.cjs.map +1 -1
- package/dist/private/Switch.js +9 -3
- package/dist/private/Switch.js.map +1 -1
- package/dist/private/Switch.mjs +9 -3
- package/dist/private/Switch.mjs.map +1 -1
- package/dist/private/Table.cjs +26 -14
- package/dist/private/Table.cjs.map +1 -1
- package/dist/private/Table.js +26 -14
- package/dist/private/Table.js.map +1 -1
- package/dist/private/Table.mjs +26 -14
- package/dist/private/Table.mjs.map +1 -1
- package/dist/private/TableLayout.cjs +3 -1
- package/dist/private/TableLayout.cjs.map +1 -1
- package/dist/private/TableLayout.js +3 -1
- package/dist/private/TableLayout.js.map +1 -1
- package/dist/private/TableLayout.mjs +3 -1
- package/dist/private/TableLayout.mjs.map +1 -1
- package/dist/private/TagGroup.cjs +1 -0
- package/dist/private/TagGroup.cjs.map +1 -1
- package/dist/private/TagGroup.js +1 -0
- package/dist/private/TagGroup.js.map +1 -1
- package/dist/private/TagGroup.mjs +1 -0
- package/dist/private/TagGroup.mjs.map +1 -1
- package/dist/private/Text.cjs +3 -1
- package/dist/private/Text.cjs.map +1 -1
- package/dist/private/Text.js +4 -2
- package/dist/private/Text.js.map +1 -1
- package/dist/private/Text.mjs +4 -2
- package/dist/private/Text.mjs.map +1 -1
- package/dist/private/ToggleButton.cjs.map +1 -1
- package/dist/private/ToggleButton.js.map +1 -1
- package/dist/private/ToggleButton.mjs.map +1 -1
- package/dist/private/TokenField.cjs +235 -0
- package/dist/private/TokenField.cjs.map +1 -0
- package/dist/private/TokenField.js +225 -0
- package/dist/private/TokenField.js.map +1 -0
- package/dist/private/TokenField.mjs +223 -0
- package/dist/private/TokenField.mjs.map +1 -0
- package/dist/private/Tooltip.cjs +10 -2
- package/dist/private/Tooltip.cjs.map +1 -1
- package/dist/private/Tooltip.js +10 -2
- package/dist/private/Tooltip.js.map +1 -1
- package/dist/private/Tooltip.mjs +10 -2
- package/dist/private/Tooltip.mjs.map +1 -1
- package/dist/private/Tree.cjs +11 -1
- package/dist/private/Tree.cjs.map +1 -1
- package/dist/private/Tree.js +11 -1
- package/dist/private/Tree.js.map +1 -1
- package/dist/private/Tree.mjs +11 -1
- package/dist/private/Tree.mjs.map +1 -1
- package/dist/private/TreeDropTargetDelegate.cjs +11 -6
- package/dist/private/TreeDropTargetDelegate.cjs.map +1 -1
- package/dist/private/TreeDropTargetDelegate.js +11 -6
- package/dist/private/TreeDropTargetDelegate.js.map +1 -1
- package/dist/private/TreeDropTargetDelegate.mjs +11 -6
- package/dist/private/TreeDropTargetDelegate.mjs.map +1 -1
- package/dist/private/Virtualizer.cjs +18 -16
- package/dist/private/Virtualizer.cjs.map +1 -1
- package/dist/private/Virtualizer.js +18 -16
- package/dist/private/Virtualizer.js.map +1 -1
- package/dist/private/Virtualizer.mjs +18 -16
- package/dist/private/Virtualizer.mjs.map +1 -1
- package/dist/private/useDragAndDrop.cjs +7 -0
- package/dist/private/useDragAndDrop.cjs.map +1 -1
- package/dist/private/useDragAndDrop.js +7 -0
- package/dist/private/useDragAndDrop.js.map +1 -1
- package/dist/private/useDragAndDrop.mjs +7 -0
- package/dist/private/useDragAndDrop.mjs.map +1 -1
- package/dist/private/utils.cjs.map +1 -1
- package/dist/private/utils.js.map +1 -1
- package/dist/private/utils.mjs.map +1 -1
- package/dist/types/exports/GridList.d.ts +1 -1
- package/dist/types/exports/Menu.d.ts +2 -2
- package/dist/types/exports/NavigationTree.d.ts +8 -0
- package/dist/types/exports/PreviewTrigger.d.ts +3 -0
- package/dist/types/exports/TokenField.d.ts +5 -0
- package/dist/types/exports/Tree.d.ts +1 -1
- package/dist/types/exports/index.d.ts +14 -5
- package/dist/types/src/Breadcrumbs.d.ts +2 -2
- package/dist/types/src/Button.d.ts +1 -1
- package/dist/types/src/Calendar.d.ts +6 -6
- package/dist/types/src/Checkbox.d.ts +8 -8
- package/dist/types/src/Collection.d.ts +1 -1
- package/dist/types/src/ComboBox.d.ts +6 -3
- package/dist/types/src/DateField.d.ts +4 -4
- package/dist/types/src/DatePicker.d.ts +2 -2
- package/dist/types/src/Dialog.d.ts +2 -2
- package/dist/types/src/Disclosure.d.ts +2 -2
- package/dist/types/src/GridList.d.ts +18 -7
- package/dist/types/src/Group.d.ts +1 -1
- package/dist/types/src/Header.d.ts +1 -1
- package/dist/types/src/Input.d.ts +1 -1
- package/dist/types/src/Label.d.ts +1 -1
- package/dist/types/src/Link.d.ts +1 -1
- package/dist/types/src/ListBox.d.ts +6 -6
- package/dist/types/src/Menu.d.ts +25 -6
- package/dist/types/src/Meter.d.ts +1 -1
- package/dist/types/src/Modal.d.ts +2 -2
- package/dist/types/src/NavigationTree.d.ts +80 -0
- package/dist/types/src/NumberField.d.ts +1 -1
- package/dist/types/src/OverlayArrow.d.ts +1 -1
- package/dist/types/src/Popover.d.ts +8 -1
- package/dist/types/src/PreviewTrigger.d.ts +23 -0
- package/dist/types/src/RadioGroup.d.ts +8 -8
- package/dist/types/src/SearchField.d.ts +1 -1
- package/dist/types/src/Select.d.ts +3 -3
- package/dist/types/src/Separator.d.ts +1 -1
- package/dist/types/src/Slider.d.ts +5 -5
- package/dist/types/src/Switch.d.ts +7 -7
- package/dist/types/src/Table.d.ts +32 -8
- package/dist/types/src/Tabs.d.ts +5 -5
- package/dist/types/src/TagGroup.d.ts +3 -3
- package/dist/types/src/Text.d.ts +1 -1
- package/dist/types/src/TextField.d.ts +1 -1
- package/dist/types/src/Toast.d.ts +3 -3
- package/dist/types/src/ToggleButton.d.ts +1 -1
- package/dist/types/src/ToggleButtonGroup.d.ts +1 -1
- package/dist/types/src/TokenField.d.ts +111 -0
- package/dist/types/src/Toolbar.d.ts +1 -1
- package/dist/types/src/Tooltip.d.ts +1 -1
- package/dist/types/src/Tree.d.ts +12 -10
- package/dist/types/src/Virtualizer.d.ts +4 -0
- package/dist/types/src/utils.d.ts +19 -5
- package/i18n/ar-AE.js +1 -1
- package/i18n/ar-AE.mjs +1 -1
- package/i18n/bg-BG.js +1 -1
- package/i18n/bg-BG.mjs +1 -1
- package/i18n/cs-CZ.js +1 -1
- package/i18n/cs-CZ.mjs +1 -1
- package/i18n/da-DK.js +1 -1
- package/i18n/da-DK.mjs +1 -1
- package/i18n/de-DE.js +1 -1
- package/i18n/de-DE.mjs +1 -1
- package/i18n/el-GR.js +1 -1
- package/i18n/el-GR.mjs +1 -1
- package/i18n/en-US.js +1 -1
- package/i18n/en-US.mjs +1 -1
- package/i18n/es-ES.js +1 -1
- package/i18n/es-ES.mjs +1 -1
- package/i18n/et-EE.js +1 -1
- package/i18n/et-EE.mjs +1 -1
- package/i18n/fi-FI.js +1 -1
- package/i18n/fi-FI.mjs +1 -1
- package/i18n/fr-FR.js +1 -1
- package/i18n/fr-FR.mjs +1 -1
- package/i18n/he-IL.js +1 -1
- package/i18n/he-IL.mjs +1 -1
- package/i18n/hr-HR.js +1 -1
- package/i18n/hr-HR.mjs +1 -1
- package/i18n/hu-HU.js +1 -1
- package/i18n/hu-HU.mjs +1 -1
- package/i18n/it-IT.js +1 -1
- package/i18n/it-IT.mjs +1 -1
- package/i18n/ja-JP.js +1 -1
- package/i18n/ja-JP.mjs +1 -1
- package/i18n/ko-KR.js +1 -1
- package/i18n/ko-KR.mjs +1 -1
- package/i18n/lt-LT.js +1 -1
- package/i18n/lt-LT.mjs +1 -1
- package/i18n/lv-LV.js +1 -1
- package/i18n/lv-LV.mjs +1 -1
- package/i18n/nb-NO.js +1 -1
- package/i18n/nb-NO.mjs +1 -1
- package/i18n/nl-NL.js +1 -1
- package/i18n/nl-NL.mjs +1 -1
- package/i18n/pl-PL.js +1 -1
- package/i18n/pl-PL.mjs +1 -1
- package/i18n/pt-BR.js +1 -1
- package/i18n/pt-BR.mjs +1 -1
- package/i18n/pt-PT.js +1 -1
- package/i18n/pt-PT.mjs +1 -1
- package/i18n/ro-RO.js +1 -1
- package/i18n/ro-RO.mjs +1 -1
- package/i18n/ru-RU.js +1 -1
- package/i18n/ru-RU.mjs +1 -1
- package/i18n/sk-SK.js +1 -1
- package/i18n/sk-SK.mjs +1 -1
- package/i18n/sl-SI.js +1 -1
- package/i18n/sl-SI.mjs +1 -1
- package/i18n/sr-SP.js +1 -1
- package/i18n/sr-SP.mjs +1 -1
- package/i18n/sv-SE.js +1 -1
- package/i18n/sv-SE.mjs +1 -1
- package/i18n/tr-TR.js +1 -1
- package/i18n/tr-TR.mjs +1 -1
- package/i18n/uk-UA.js +1 -1
- package/i18n/uk-UA.mjs +1 -1
- package/i18n/zh-CN.js +1 -1
- package/i18n/zh-CN.mjs +1 -1
- package/i18n/zh-TW.js +1 -1
- package/i18n/zh-TW.mjs +1 -1
- package/package.json +33 -31
package/dist/private/Popover.cjs
CHANGED
|
@@ -62,7 +62,10 @@ const $74e35a768d38d46b$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $kmEDY$react
|
|
|
62
62
|
let contextState = (0, $kmEDY$react.useContext)((0, $88595bf043e542ec$exports.OverlayTriggerStateContext));
|
|
63
63
|
let localState = (0, $kmEDY$reactstatelyuseOverlayTriggerState.useOverlayTriggerState)(props);
|
|
64
64
|
let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
|
|
65
|
-
|
|
65
|
+
// Skip the automatic exit animation when closing instantly (e.g. swapping between previews
|
|
66
|
+
// during warmup). An explicitly provided isExiting prop still takes precedence.
|
|
67
|
+
let exitAnimation = (0, $kmEDY$reactariaprivateutilsanimation.useExitAnimation)(ref, state.isOpen);
|
|
68
|
+
let isExiting = props.isExiting || !props.shouldSkipAnimation && exitAnimation || false;
|
|
66
69
|
let isHidden = (0, $kmEDY$reactariaprivatecollectionsHidden.useIsHidden)();
|
|
67
70
|
let { direction: direction } = (0, $kmEDY$reactariaI18nProvider.useLocale)();
|
|
68
71
|
// If we are in a hidden tree, we still need to preserve our children.
|
|
@@ -103,21 +106,32 @@ function $74e35a768d38d46b$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
103
106
|
groupRef: isSubPopover ? groupCtx : containerRef
|
|
104
107
|
}, state);
|
|
105
108
|
let ref = props.popoverRef;
|
|
106
|
-
|
|
109
|
+
// Skip the automatic entry animation when opening instantly (e.g. swapping between previews
|
|
110
|
+
// during warmup). An explicitly provided isEntering prop still takes precedence.
|
|
111
|
+
let enterAnimation = (0, $kmEDY$reactariaprivateutilsanimation.useEnterAnimation)(ref, !!placement);
|
|
112
|
+
// oxlint-disable-next-line react/react-compiler
|
|
113
|
+
let isEntering = props.isEntering || !props.shouldSkipAnimation && enterAnimation || false;
|
|
114
|
+
// oxlint-disable-next-line react/react-compiler
|
|
107
115
|
let renderProps = (0, $048d76b84370f141$exports.useRenderProps)({
|
|
116
|
+
// oxlint-disable-next-line react/react-compiler
|
|
108
117
|
...props,
|
|
109
118
|
defaultClassName: 'react-aria-Popover',
|
|
119
|
+
// oxlint-disable-next-line react/react-compiler
|
|
110
120
|
values: {
|
|
121
|
+
// oxlint-disable-next-line react/react-compiler
|
|
111
122
|
trigger: props.trigger || null,
|
|
112
123
|
placement: placement,
|
|
113
|
-
isEntering:
|
|
124
|
+
isEntering: // oxlint-disable-next-line react/react-compiler
|
|
125
|
+
isEntering,
|
|
114
126
|
isExiting: isExiting
|
|
115
127
|
}
|
|
116
128
|
});
|
|
117
129
|
// Automatically render Popover with role=dialog except when isNonModal is true,
|
|
118
130
|
// or a dialog is already nested inside the popover.
|
|
119
|
-
let shouldBeDialog =
|
|
120
|
-
|
|
131
|
+
let shouldBeDialog = // oxlint-disable-next-line react/react-compiler
|
|
132
|
+
!props.isNonModal || props.trigger === 'SubmenuTrigger' || props.trigger === 'PreviewTrigger';
|
|
133
|
+
// oxlint-disable-next-line react/react-compiler
|
|
134
|
+
let [isDialog, setDialog] = (0, $kmEDY$react.useState)(props.trigger === 'PreviewTrigger');
|
|
121
135
|
(0, $kmEDY$reactariaprivateutilsuseLayoutEffect.useLayoutEffect)(()=>{
|
|
122
136
|
if (ref.current) setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));
|
|
123
137
|
}, [
|
|
@@ -126,13 +140,15 @@ function $74e35a768d38d46b$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
126
140
|
]);
|
|
127
141
|
// Focus the popover itself on mount, unless a child element is already focused.
|
|
128
142
|
// Skip this for submenus since hovering a submenutrigger should keep focus on the trigger
|
|
143
|
+
// oxlint-disable react/react-compiler
|
|
129
144
|
(0, $kmEDY$react.useEffect)(()=>{
|
|
130
|
-
if (isDialog && (props.trigger !== 'SubmenuTrigger' || (0, $kmEDY$reactariaprivateinteractionsuseFocusVisible.getInteractionModality)() !== 'pointer') && ref.current && !(0, $kmEDY$reactariaprivateutilsshadowdomDOMFunctions.isFocusWithin)(ref.current)) (0, $kmEDY$reactariaprivateinteractionsfocusSafely.focusSafely)(ref.current);
|
|
145
|
+
if (isDialog && props.trigger !== 'PreviewTrigger' && (props.trigger !== 'SubmenuTrigger' || (0, $kmEDY$reactariaprivateinteractionsuseFocusVisible.getInteractionModality)() !== 'pointer') && ref.current && !(0, $kmEDY$reactariaprivateutilsshadowdomDOMFunctions.isFocusWithin)(ref.current)) (0, $kmEDY$reactariaprivateinteractionsfocusSafely.focusSafely)(ref.current);
|
|
131
146
|
}, [
|
|
132
147
|
isDialog,
|
|
133
148
|
ref,
|
|
134
149
|
props.trigger
|
|
135
150
|
]);
|
|
151
|
+
// oxlint-enable react/react-compiler
|
|
136
152
|
let children = (0, $kmEDY$react.useMemo)(()=>{
|
|
137
153
|
let children = renderProps.children;
|
|
138
154
|
if (clearContexts) for (let Context of clearContexts)children = /*#__PURE__*/ (0, ($parcel$interopDefault($kmEDY$react))).createElement(Context.Provider, {
|
|
@@ -144,6 +160,7 @@ function $74e35a768d38d46b$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
144
160
|
clearContexts
|
|
145
161
|
]);
|
|
146
162
|
let [triggerWidth, setTriggerWidth] = (0, $kmEDY$react.useState)(null);
|
|
163
|
+
// oxlint-disable-next-line react/react-compiler
|
|
147
164
|
let onResize = (0, $kmEDY$react.useCallback)(()=>{
|
|
148
165
|
if (props.triggerRef.current) setTriggerWidth(props.triggerRef.current.getBoundingClientRect().width + 'px');
|
|
149
166
|
}, [
|
|
@@ -152,7 +169,9 @@ function $74e35a768d38d46b$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
152
169
|
(0, $kmEDY$reactariaprivateutilsuseLayoutEffect.useLayoutEffect)(onResize, [
|
|
153
170
|
onResize
|
|
154
171
|
]);
|
|
172
|
+
// oxlint-disable-next-line react/react-compiler
|
|
155
173
|
(0, $kmEDY$reactariaprivateutilsuseResizeObserver.useResizeObserver)({
|
|
174
|
+
// oxlint-disable-next-line react/react-compiler
|
|
156
175
|
ref: renderProps.style?.['--trigger-width'] ? undefined : props.triggerRef,
|
|
157
176
|
onResize: onResize
|
|
158
177
|
});
|
|
@@ -162,11 +181,13 @@ function $74e35a768d38d46b$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
162
181
|
...renderProps.style,
|
|
163
182
|
'--trigger-width': renderProps.style?.['--trigger-width'] || triggerWidth
|
|
164
183
|
};
|
|
184
|
+
// oxlint-disable react/react-compiler
|
|
165
185
|
let overlay = /*#__PURE__*/ (0, ($parcel$interopDefault($kmEDY$react))).createElement((0, $048d76b84370f141$exports.dom).div, {
|
|
166
186
|
...(0, $kmEDY$reactariamergeProps.mergeProps)((0, $kmEDY$reactariafilterDOMProps.filterDOMProps)(props, {
|
|
167
187
|
global: true
|
|
168
188
|
}), popoverProps),
|
|
169
189
|
...renderProps,
|
|
190
|
+
id: isDialog ? props.id : undefined,
|
|
170
191
|
role: isDialog ? 'dialog' : undefined,
|
|
171
192
|
tabIndex: isDialog ? -1 : undefined,
|
|
172
193
|
"aria-label": props['aria-label'],
|
|
@@ -190,10 +211,12 @@ function $74e35a768d38d46b$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
190
211
|
}, children), /*#__PURE__*/ (0, ($parcel$interopDefault($kmEDY$react))).createElement((0, $kmEDY$reactariaOverlay.DismissButton), {
|
|
191
212
|
onDismiss: state.close
|
|
192
213
|
}));
|
|
214
|
+
// oxlint-enable react/react-compiler
|
|
193
215
|
// If this is a root popover, render an extra div to act as the portal container for submenus/subdialogs.
|
|
194
|
-
if (!isSubPopover)
|
|
216
|
+
if (!isSubPopover) // oxlint-disable react/react-compiler
|
|
217
|
+
return /*#__PURE__*/ (0, ($parcel$interopDefault($kmEDY$react))).createElement((0, $kmEDY$reactariaOverlay.Overlay), {
|
|
195
218
|
...props,
|
|
196
|
-
shouldContainFocus: isDialog,
|
|
219
|
+
shouldContainFocus: isDialog && props.trigger !== 'PreviewTrigger',
|
|
197
220
|
isExiting: isExiting,
|
|
198
221
|
portalContainer: UNSTABLE_portalContainer
|
|
199
222
|
}, !props.isNonModal && state.isOpen && /*#__PURE__*/ (0, ($parcel$interopDefault($kmEDY$react))).createElement("div", {
|
|
@@ -212,12 +235,14 @@ function $74e35a768d38d46b$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
212
235
|
value: containerRef
|
|
213
236
|
}, overlay)));
|
|
214
237
|
// Submenus/subdialogs are mounted into the root popover's container.
|
|
238
|
+
// oxlint-disable react/react-compiler
|
|
215
239
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($kmEDY$react))).createElement((0, $kmEDY$reactariaOverlay.Overlay), {
|
|
216
240
|
...props,
|
|
217
|
-
shouldContainFocus: isDialog,
|
|
241
|
+
shouldContainFocus: isDialog && props.trigger !== 'PreviewTrigger',
|
|
218
242
|
isExiting: isExiting,
|
|
219
243
|
portalContainer: UNSTABLE_portalContainer ?? groupCtx?.current ?? undefined
|
|
220
244
|
}, overlay);
|
|
245
|
+
// oxlint-enable react/react-compiler
|
|
221
246
|
}
|
|
222
247
|
|
|
223
248
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/react-aria-components/src/Popover.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n AriaLabelingProps,\n forwardRefType,\n GlobalDOMAttributes,\n RefObject\n} from '@react-types/shared';\nimport {AriaPopoverProps, usePopover} from 'react-aria/usePopover';\nimport {\n ClassNameOrFunction,\n ContextValue,\n dom,\n RenderProps,\n SlotProps,\n useContextProps,\n useRenderProps\n} from './utils';\nimport {DismissButton, Overlay} from 'react-aria/Overlay';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {focusSafely} from 'react-aria/private/interactions/focusSafely';\nimport {getInteractionModality} from 'react-aria/private/interactions/useFocusVisible';\nimport {isFocusWithin} from 'react-aria/private/utils/shadowdom/DOMFunctions';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {OverlayArrowContext} from './OverlayArrow';\nimport {\n OverlayTriggerProps,\n OverlayTriggerState,\n useOverlayTriggerState\n} from 'react-stately/useOverlayTriggerState';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport {PlacementAxis, PositionProps} from 'react-aria/useOverlayPosition';\nimport React, {\n Context,\n createContext,\n ForwardedRef,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';\nimport {useIsHidden} from 'react-aria/private/collections/Hidden';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface PopoverProps\n extends\n Omit<PositionProps, 'isOpen'>,\n Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef' | 'groupRef' | 'offset' | 'arrowSize'>,\n OverlayTriggerProps,\n RenderProps<PopoverRenderProps>,\n SlotProps,\n AriaLabelingProps,\n GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\n * element. A function may be provided to compute the class based on component state.\n *\n * @default 'react-aria-Popover'\n */\n className?: ClassNameOrFunction<PopoverRenderProps>;\n /**\n * The name of the component that triggered the popover. This is reflected on the element\n * as the `data-trigger` attribute, and can be used to provide specific\n * styles for the popover depending on which element triggered it.\n */\n trigger?: string;\n /**\n * The ref for the element which the popover positions itself with respect to.\n *\n * When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc.,\n * this is set automatically. It is only required when used standalone.\n */\n triggerRef?: RefObject<Element | null>;\n /**\n * Whether the popover is currently performing an entry animation.\n */\n isEntering?: boolean;\n /**\n * Whether the popover is currently performing an exit animation.\n */\n isExiting?: boolean;\n /**\n * The container element in which the overlay portal will be placed. This may have unknown\n * behavior depending on where it is portalled to.\n *\n * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.\n * @default document.body\n */\n UNSTABLE_portalContainer?: Element;\n /**\n * The additional offset applied along the main axis between the element and its\n * anchor element.\n *\n * @default 8\n */\n offset?: number;\n}\n\nexport interface PopoverRenderProps {\n /**\n * The name of the component that triggered the popover, e.g. \"DialogTrigger\" or \"ComboBox\".\n *\n * @selector [data-trigger=\"...\"]\n */\n trigger: string | null;\n /**\n * The placement of the popover relative to the trigger.\n *\n * @selector [data-placement=\"left | right | top | bottom\"]\n */\n placement: PlacementAxis | null;\n /**\n * Whether the popover is currently entering. Use this to apply animations.\n *\n * @selector [data-entering]\n */\n isEntering: boolean;\n /**\n * Whether the popover is currently exiting. Use this to apply animations.\n *\n * @selector [data-exiting]\n */\n isExiting: boolean;\n}\n\ninterface PopoverContextValue extends PopoverProps {\n /** Contexts to clear. */\n clearContexts?: Context<any>[];\n}\n\nexport const PopoverContext = createContext<ContextValue<PopoverContextValue, HTMLElement>>(null);\n\n// Stores a ref for the portal container for a group of popovers (e.g. submenus).\nconst PopoverGroupContext = createContext<RefObject<Element | null> | null>(null);\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(function Popover(\n props: PopoverProps,\n ref: ForwardedRef<HTMLElement>\n) {\n [props, ref] = useContextProps(props, ref, PopoverContext);\n let contextState = useContext(OverlayTriggerStateContext);\n let localState = useOverlayTriggerState(props);\n let state =\n props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;\n let isExiting = useExitAnimation(ref, state.isOpen) || props.isExiting || false;\n let isHidden = useIsHidden();\n let {direction} = useLocale();\n\n // If we are in a hidden tree, we still need to preserve our children.\n if (isHidden) {\n let children = props.children;\n if (typeof children === 'function') {\n children = children({\n trigger: props.trigger || null,\n placement: 'bottom',\n isEntering: false,\n isExiting: false,\n defaultChildren: null\n });\n }\n\n return <>{children}</>;\n }\n\n if (state && !state.isOpen && !isExiting) {\n return null;\n }\n\n return (\n <PopoverInner\n {...props}\n triggerRef={props.triggerRef!}\n state={state}\n popoverRef={ref}\n isExiting={isExiting}\n dir={direction}\n />\n );\n});\n\ninterface PopoverInnerProps extends AriaPopoverProps, RenderProps<PopoverRenderProps>, SlotProps {\n state: OverlayTriggerState;\n isEntering?: boolean;\n isExiting: boolean;\n UNSTABLE_portalContainer?: Element;\n trigger?: string;\n dir?: 'ltr' | 'rtl';\n clearContexts?: Context<any>[];\n}\n\nfunction PopoverInner({\n state,\n isExiting,\n UNSTABLE_portalContainer,\n clearContexts,\n ...props\n}: PopoverInnerProps) {\n // Calculate the arrow size internally (and remove props.arrowSize from PopoverProps)\n // Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx\n let arrowRef = useRef<HTMLDivElement>(null);\n let containerRef = useRef<HTMLDivElement | null>(null);\n let groupCtx = useContext(PopoverGroupContext);\n let isSubPopover = groupCtx && props.trigger === 'SubmenuTrigger';\n\n let {popoverProps, underlayProps, arrowProps, placement, triggerAnchorPoint} = usePopover(\n {\n ...props,\n offset: props.offset ?? 8,\n arrowRef,\n // If this is a submenu/subdialog, use the root popover's container\n // to detect outside interaction and add aria-hidden.\n groupRef: isSubPopover ? groupCtx! : containerRef\n },\n state\n );\n\n let ref = props.popoverRef as RefObject<HTMLDivElement | null>;\n let isEntering = useEnterAnimation(ref, !!placement) || props.isEntering || false;\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-Popover',\n values: {\n trigger: props.trigger || null,\n placement,\n isEntering,\n isExiting\n }\n });\n\n // Automatically render Popover with role=dialog except when isNonModal is true,\n // or a dialog is already nested inside the popover.\n let shouldBeDialog = !props.isNonModal || props.trigger === 'SubmenuTrigger';\n let [isDialog, setDialog] = useState(false);\n useLayoutEffect(() => {\n if (ref.current) {\n setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));\n }\n }, [ref, shouldBeDialog]);\n\n // Focus the popover itself on mount, unless a child element is already focused.\n // Skip this for submenus since hovering a submenutrigger should keep focus on the trigger\n useEffect(() => {\n if (\n isDialog &&\n (props.trigger !== 'SubmenuTrigger' || getInteractionModality() !== 'pointer') &&\n ref.current &&\n !isFocusWithin(ref.current)\n ) {\n focusSafely(ref.current);\n }\n }, [isDialog, ref, props.trigger]);\n\n let children = useMemo(() => {\n let children = renderProps.children;\n if (clearContexts) {\n for (let Context of clearContexts) {\n children = <Context.Provider value={null}>{children}</Context.Provider>;\n }\n }\n return children;\n }, [renderProps.children, clearContexts]);\n\n let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (props.triggerRef.current) {\n setTriggerWidth(props.triggerRef.current.getBoundingClientRect().width + 'px');\n }\n }, [props.triggerRef]);\n\n useLayoutEffect(onResize, [onResize]);\n useResizeObserver({\n ref: renderProps.style?.['--trigger-width'] ? undefined : props.triggerRef,\n onResize: onResize\n });\n\n let style = {\n ...popoverProps.style,\n '--trigger-anchor-point': triggerAnchorPoint\n ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px`\n : undefined,\n ...renderProps.style,\n '--trigger-width': renderProps.style?.['--trigger-width'] || triggerWidth\n };\n\n let overlay = (\n <dom.div\n {...mergeProps(filterDOMProps(props, {global: true}), popoverProps)}\n {...renderProps}\n role={isDialog ? 'dialog' : undefined}\n tabIndex={isDialog ? -1 : undefined}\n aria-label={props['aria-label']}\n aria-labelledby={props['aria-labelledby']}\n ref={ref}\n slot={props.slot || undefined}\n style={style}\n dir={props.dir}\n data-trigger={props.trigger}\n data-placement={placement}\n data-entering={isEntering || undefined}\n data-exiting={isExiting || undefined}>\n {!props.isNonModal && <DismissButton onDismiss={state.close} />}\n <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>\n {children}\n </OverlayArrowContext.Provider>\n <DismissButton onDismiss={state.close} />\n </dom.div>\n );\n\n // If this is a root popover, render an extra div to act as the portal container for submenus/subdialogs.\n if (!isSubPopover) {\n return (\n <Overlay\n {...props}\n shouldContainFocus={isDialog}\n isExiting={isExiting}\n portalContainer={UNSTABLE_portalContainer}>\n {!props.isNonModal && state.isOpen && (\n <div data-testid=\"underlay\" {...underlayProps} style={{position: 'fixed', inset: 0}} />\n )}\n <div ref={containerRef} style={{display: 'contents'}}>\n <PopoverGroupContext.Provider value={containerRef}>\n {overlay}\n </PopoverGroupContext.Provider>\n </div>\n </Overlay>\n );\n }\n\n // Submenus/subdialogs are mounted into the root popover's container.\n return (\n <Overlay\n {...props}\n shouldContainFocus={isDialog}\n isExiting={isExiting}\n portalContainer={UNSTABLE_portalContainer ?? groupCtx?.current ?? undefined}>\n {overlay}\n </Overlay>\n );\n}\n"],"names":[],"version":3,"file":"Popover.cjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/react-aria-components/src/Popover.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n AriaLabelingProps,\n forwardRefType,\n GlobalDOMAttributes,\n RefObject\n} from '@react-types/shared';\nimport {AriaPopoverProps, usePopover} from 'react-aria/usePopover';\nimport {\n ClassNameOrFunction,\n ContextValue,\n dom,\n RenderProps,\n SlotProps,\n useContextProps,\n useRenderProps\n} from './utils';\nimport {DismissButton, Overlay} from 'react-aria/Overlay';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {focusSafely} from 'react-aria/private/interactions/focusSafely';\nimport {getInteractionModality} from 'react-aria/private/interactions/useFocusVisible';\nimport {isFocusWithin} from 'react-aria/private/utils/shadowdom/DOMFunctions';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {OverlayArrowContext} from './OverlayArrow';\nimport {\n OverlayTriggerProps,\n OverlayTriggerState,\n useOverlayTriggerState\n} from 'react-stately/useOverlayTriggerState';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport {PlacementAxis, PositionProps} from 'react-aria/useOverlayPosition';\nimport React, {\n Context,\n createContext,\n ForwardedRef,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';\nimport {useIsHidden} from 'react-aria/private/collections/Hidden';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface PopoverProps\n extends\n Omit<PositionProps, 'isOpen'>,\n Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef' | 'groupRef' | 'offset' | 'arrowSize'>,\n OverlayTriggerProps,\n RenderProps<PopoverRenderProps>,\n SlotProps,\n AriaLabelingProps,\n GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\n * element. A function may be provided to compute the class based on component state.\n *\n * @default 'react-aria-Popover'\n */\n className?: ClassNameOrFunction<PopoverRenderProps>;\n /**\n * The name of the component that triggered the popover. This is reflected on the element\n * as the `data-trigger` attribute, and can be used to provide specific\n * styles for the popover depending on which element triggered it.\n */\n trigger?: string;\n /**\n * The ref for the element which the popover positions itself with respect to.\n *\n * When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc.,\n * this is set automatically. It is only required when used standalone.\n */\n triggerRef?: RefObject<Element | null>;\n /**\n * Whether the popover is currently performing an entry animation.\n */\n isEntering?: boolean;\n /**\n * Whether the popover is currently performing an exit animation.\n */\n isExiting?: boolean;\n /**\n * Whether the popover should appear and disappear without an entry or exit animation. This is\n * used by components such as PreviewTrigger to skip animations when quickly swapping between\n * overlays.\n */\n shouldSkipAnimation?: boolean;\n /**\n * The container element in which the overlay portal will be placed. This may have unknown\n * behavior depending on where it is portalled to.\n *\n * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.\n * @default document.body\n */\n UNSTABLE_portalContainer?: Element;\n /**\n * The additional offset applied along the main axis between the element and its\n * anchor element.\n *\n * @default 8\n */\n offset?: number;\n}\n\nexport interface PopoverRenderProps {\n /**\n * The name of the component that triggered the popover, e.g. \"DialogTrigger\" or \"ComboBox\".\n *\n * @selector [data-trigger=\"...\"]\n */\n trigger: string | null;\n /**\n * The placement of the popover relative to the trigger.\n *\n * @selector [data-placement=\"left | right | top | bottom\"]\n */\n placement: PlacementAxis | null;\n /**\n * Whether the popover is currently entering. Use this to apply animations.\n *\n * @selector [data-entering]\n */\n isEntering: boolean;\n /**\n * Whether the popover is currently exiting. Use this to apply animations.\n *\n * @selector [data-exiting]\n */\n isExiting: boolean;\n}\n\ninterface PopoverContextValue extends PopoverProps {\n id?: string;\n /** Contexts to clear. */\n clearContexts?: Context<any>[];\n}\n\nexport const PopoverContext = createContext<ContextValue<PopoverContextValue, HTMLElement>>(null);\n\n// Stores a ref for the portal container for a group of popovers (e.g. submenus).\nconst PopoverGroupContext = createContext<RefObject<Element | null> | null>(null);\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(function Popover(\n props: PopoverProps,\n ref: ForwardedRef<HTMLElement>\n) {\n [props, ref] = useContextProps(props, ref, PopoverContext);\n let contextState = useContext(OverlayTriggerStateContext);\n let localState = useOverlayTriggerState(props);\n let state =\n props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;\n // Skip the automatic exit animation when closing instantly (e.g. swapping between previews\n // during warmup). An explicitly provided isExiting prop still takes precedence.\n let exitAnimation = useExitAnimation(ref, state.isOpen);\n let isExiting = props.isExiting || (!props.shouldSkipAnimation && exitAnimation) || false;\n let isHidden = useIsHidden();\n let {direction} = useLocale();\n\n // If we are in a hidden tree, we still need to preserve our children.\n if (isHidden) {\n let children = props.children;\n if (typeof children === 'function') {\n children = children({\n trigger: props.trigger || null,\n placement: 'bottom',\n isEntering: false,\n isExiting: false,\n defaultChildren: null\n });\n }\n\n return <>{children}</>;\n }\n\n if (state && !state.isOpen && !isExiting) {\n return null;\n }\n\n return (\n <PopoverInner\n {...props}\n triggerRef={props.triggerRef!}\n state={state}\n popoverRef={ref}\n isExiting={isExiting}\n dir={direction}\n />\n );\n});\n\ninterface PopoverInnerProps extends AriaPopoverProps, RenderProps<PopoverRenderProps>, SlotProps {\n state: OverlayTriggerState;\n isEntering?: boolean;\n isExiting: boolean;\n shouldSkipAnimation?: boolean;\n UNSTABLE_portalContainer?: Element;\n trigger?: string;\n dir?: 'ltr' | 'rtl';\n clearContexts?: Context<any>[];\n id?: string;\n}\n\nfunction PopoverInner({\n state,\n isExiting,\n UNSTABLE_portalContainer,\n clearContexts,\n ...props\n}: PopoverInnerProps) {\n // Calculate the arrow size internally (and remove props.arrowSize from PopoverProps)\n // Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx\n let arrowRef = useRef<HTMLDivElement>(null);\n let containerRef = useRef<HTMLDivElement | null>(null);\n let groupCtx = useContext(PopoverGroupContext);\n let isSubPopover = groupCtx && props.trigger === 'SubmenuTrigger';\n\n let {popoverProps, underlayProps, arrowProps, placement, triggerAnchorPoint} = usePopover(\n {\n ...props,\n offset: props.offset ?? 8,\n arrowRef,\n // If this is a submenu/subdialog, use the root popover's container\n // to detect outside interaction and add aria-hidden.\n groupRef: isSubPopover ? groupCtx! : containerRef\n },\n state\n );\n\n let ref = props.popoverRef as RefObject<HTMLDivElement | null>;\n // Skip the automatic entry animation when opening instantly (e.g. swapping between previews\n // during warmup). An explicitly provided isEntering prop still takes precedence.\n let enterAnimation = useEnterAnimation(ref, !!placement);\n // oxlint-disable-next-line react/react-compiler\n let isEntering = props.isEntering || (!props.shouldSkipAnimation && enterAnimation) || false;\n // oxlint-disable-next-line react/react-compiler\n let renderProps = useRenderProps({\n // oxlint-disable-next-line react/react-compiler\n ...props,\n defaultClassName: 'react-aria-Popover',\n // oxlint-disable-next-line react/react-compiler\n values: {\n // oxlint-disable-next-line react/react-compiler\n trigger: props.trigger || null,\n placement,\n // oxlint-disable-next-line react/react-compiler\n isEntering,\n isExiting\n }\n });\n\n // Automatically render Popover with role=dialog except when isNonModal is true,\n // or a dialog is already nested inside the popover.\n let shouldBeDialog =\n // oxlint-disable-next-line react/react-compiler\n !props.isNonModal || props.trigger === 'SubmenuTrigger' || props.trigger === 'PreviewTrigger';\n // oxlint-disable-next-line react/react-compiler\n let [isDialog, setDialog] = useState(props.trigger === 'PreviewTrigger');\n useLayoutEffect(() => {\n if (ref.current) {\n setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));\n }\n }, [ref, shouldBeDialog]);\n\n // Focus the popover itself on mount, unless a child element is already focused.\n // Skip this for submenus since hovering a submenutrigger should keep focus on the trigger\n // oxlint-disable react/react-compiler\n useEffect(() => {\n if (\n isDialog &&\n props.trigger !== 'PreviewTrigger' &&\n (props.trigger !== 'SubmenuTrigger' || getInteractionModality() !== 'pointer') &&\n ref.current &&\n !isFocusWithin(ref.current)\n ) {\n focusSafely(ref.current);\n }\n }, [isDialog, ref, props.trigger]);\n // oxlint-enable react/react-compiler\n\n let children = useMemo(() => {\n let children = renderProps.children;\n if (clearContexts) {\n for (let Context of clearContexts) {\n children = <Context.Provider value={null}>{children}</Context.Provider>;\n }\n }\n return children;\n }, [renderProps.children, clearContexts]);\n\n let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n // oxlint-disable-next-line react/react-compiler\n let onResize = useCallback(() => {\n if (props.triggerRef.current) {\n setTriggerWidth(props.triggerRef.current.getBoundingClientRect().width + 'px');\n }\n }, [props.triggerRef]);\n\n useLayoutEffect(onResize, [onResize]);\n // oxlint-disable-next-line react/react-compiler\n useResizeObserver({\n // oxlint-disable-next-line react/react-compiler\n ref: renderProps.style?.['--trigger-width'] ? undefined : props.triggerRef,\n onResize: onResize\n });\n\n let style = {\n ...popoverProps.style,\n '--trigger-anchor-point': triggerAnchorPoint\n ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px`\n : undefined,\n ...renderProps.style,\n '--trigger-width': renderProps.style?.['--trigger-width'] || triggerWidth\n };\n\n // oxlint-disable react/react-compiler\n let overlay = (\n <dom.div\n {...mergeProps(filterDOMProps(props, {global: true}), popoverProps)}\n {...renderProps}\n id={isDialog ? props.id : undefined}\n role={isDialog ? 'dialog' : undefined}\n tabIndex={isDialog ? -1 : undefined}\n aria-label={props['aria-label']}\n aria-labelledby={props['aria-labelledby']}\n ref={ref}\n slot={props.slot || undefined}\n style={style}\n dir={props.dir}\n data-trigger={props.trigger}\n data-placement={placement}\n data-entering={isEntering || undefined}\n data-exiting={isExiting || undefined}>\n {/* oxlint-disable-next-line react/react-compiler */}\n {!props.isNonModal && <DismissButton onDismiss={state.close} />}\n <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>\n {children}\n </OverlayArrowContext.Provider>\n <DismissButton onDismiss={state.close} />\n </dom.div>\n );\n // oxlint-enable react/react-compiler\n\n // If this is a root popover, render an extra div to act as the portal container for submenus/subdialogs.\n if (!isSubPopover) {\n // oxlint-disable react/react-compiler\n return (\n <Overlay\n {...props}\n shouldContainFocus={isDialog && props.trigger !== 'PreviewTrigger'}\n isExiting={isExiting}\n portalContainer={UNSTABLE_portalContainer}>\n {/* oxlint-disable-next-line react/react-compiler */}\n {!props.isNonModal && state.isOpen && (\n <div data-testid=\"underlay\" {...underlayProps} style={{position: 'fixed', inset: 0}} />\n )}\n <div ref={containerRef} style={{display: 'contents'}}>\n <PopoverGroupContext.Provider value={containerRef}>\n {overlay}\n </PopoverGroupContext.Provider>\n </div>\n </Overlay>\n );\n // oxlint-enable react/react-compiler\n }\n\n // Submenus/subdialogs are mounted into the root popover's container.\n // oxlint-disable react/react-compiler\n return (\n <Overlay\n {...props}\n shouldContainFocus={isDialog && props.trigger !== 'PreviewTrigger'}\n isExiting={isExiting}\n portalContainer={UNSTABLE_portalContainer ?? groupCtx?.current ?? undefined}>\n {overlay}\n </Overlay>\n );\n // oxlint-enable react/react-compiler\n}\n"],"names":[],"version":3,"file":"Popover.cjs.map"}
|
package/dist/private/Popover.js
CHANGED
|
@@ -51,7 +51,10 @@ const $03df2f2d3cffb62f$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $jx81S$forwa
|
|
|
51
51
|
let contextState = (0, $jx81S$useContext)((0, $acf8e70c2f419f18$export$d2f961adcb0afbe));
|
|
52
52
|
let localState = (0, $jx81S$useOverlayTriggerState)(props);
|
|
53
53
|
let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
|
|
54
|
-
|
|
54
|
+
// Skip the automatic exit animation when closing instantly (e.g. swapping between previews
|
|
55
|
+
// during warmup). An explicitly provided isExiting prop still takes precedence.
|
|
56
|
+
let exitAnimation = (0, $jx81S$useExitAnimation)(ref, state.isOpen);
|
|
57
|
+
let isExiting = props.isExiting || !props.shouldSkipAnimation && exitAnimation || false;
|
|
55
58
|
let isHidden = (0, $jx81S$useIsHidden)();
|
|
56
59
|
let { direction: direction } = (0, $jx81S$useLocale)();
|
|
57
60
|
// If we are in a hidden tree, we still need to preserve our children.
|
|
@@ -94,21 +97,32 @@ function $03df2f2d3cffb62f$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
94
97
|
groupRef: isSubPopover ? groupCtx : containerRef
|
|
95
98
|
}, state);
|
|
96
99
|
let ref = props.popoverRef;
|
|
97
|
-
|
|
100
|
+
// Skip the automatic entry animation when opening instantly (e.g. swapping between previews
|
|
101
|
+
// during warmup). An explicitly provided isEntering prop still takes precedence.
|
|
102
|
+
let enterAnimation = (0, $jx81S$useEnterAnimation)(ref, !!placement);
|
|
103
|
+
// oxlint-disable-next-line react/react-compiler
|
|
104
|
+
let isEntering = props.isEntering || !props.shouldSkipAnimation && enterAnimation || false;
|
|
105
|
+
// oxlint-disable-next-line react/react-compiler
|
|
98
106
|
let renderProps = (0, $b7b7a92703138c9b$export$4d86445c2cf5e3)({
|
|
107
|
+
// oxlint-disable-next-line react/react-compiler
|
|
99
108
|
...props,
|
|
100
109
|
defaultClassName: 'react-aria-Popover',
|
|
110
|
+
// oxlint-disable-next-line react/react-compiler
|
|
101
111
|
values: {
|
|
112
|
+
// oxlint-disable-next-line react/react-compiler
|
|
102
113
|
trigger: props.trigger || null,
|
|
103
114
|
placement: placement,
|
|
104
|
-
isEntering:
|
|
115
|
+
isEntering: // oxlint-disable-next-line react/react-compiler
|
|
116
|
+
isEntering,
|
|
105
117
|
isExiting: isExiting
|
|
106
118
|
}
|
|
107
119
|
});
|
|
108
120
|
// Automatically render Popover with role=dialog except when isNonModal is true,
|
|
109
121
|
// or a dialog is already nested inside the popover.
|
|
110
|
-
let shouldBeDialog =
|
|
111
|
-
|
|
122
|
+
let shouldBeDialog = // oxlint-disable-next-line react/react-compiler
|
|
123
|
+
!props.isNonModal || props.trigger === 'SubmenuTrigger' || props.trigger === 'PreviewTrigger';
|
|
124
|
+
// oxlint-disable-next-line react/react-compiler
|
|
125
|
+
let [isDialog, setDialog] = (0, $jx81S$useState)(props.trigger === 'PreviewTrigger');
|
|
112
126
|
(0, $jx81S$useLayoutEffect)(()=>{
|
|
113
127
|
if (ref.current) setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));
|
|
114
128
|
}, [
|
|
@@ -117,13 +131,15 @@ function $03df2f2d3cffb62f$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
117
131
|
]);
|
|
118
132
|
// Focus the popover itself on mount, unless a child element is already focused.
|
|
119
133
|
// Skip this for submenus since hovering a submenutrigger should keep focus on the trigger
|
|
134
|
+
// oxlint-disable react/react-compiler
|
|
120
135
|
(0, $jx81S$useEffect)(()=>{
|
|
121
|
-
if (isDialog && (props.trigger !== 'SubmenuTrigger' || (0, $jx81S$getInteractionModality)() !== 'pointer') && ref.current && !(0, $jx81S$isFocusWithin)(ref.current)) (0, $jx81S$focusSafely)(ref.current);
|
|
136
|
+
if (isDialog && props.trigger !== 'PreviewTrigger' && (props.trigger !== 'SubmenuTrigger' || (0, $jx81S$getInteractionModality)() !== 'pointer') && ref.current && !(0, $jx81S$isFocusWithin)(ref.current)) (0, $jx81S$focusSafely)(ref.current);
|
|
122
137
|
}, [
|
|
123
138
|
isDialog,
|
|
124
139
|
ref,
|
|
125
140
|
props.trigger
|
|
126
141
|
]);
|
|
142
|
+
// oxlint-enable react/react-compiler
|
|
127
143
|
let children = (0, $jx81S$useMemo)(()=>{
|
|
128
144
|
let children = renderProps.children;
|
|
129
145
|
if (clearContexts) for (let Context of clearContexts)children = /*#__PURE__*/ (0, $jx81S$react).createElement(Context.Provider, {
|
|
@@ -135,6 +151,7 @@ function $03df2f2d3cffb62f$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
135
151
|
clearContexts
|
|
136
152
|
]);
|
|
137
153
|
let [triggerWidth, setTriggerWidth] = (0, $jx81S$useState)(null);
|
|
154
|
+
// oxlint-disable-next-line react/react-compiler
|
|
138
155
|
let onResize = (0, $jx81S$useCallback)(()=>{
|
|
139
156
|
if (props.triggerRef.current) setTriggerWidth(props.triggerRef.current.getBoundingClientRect().width + 'px');
|
|
140
157
|
}, [
|
|
@@ -143,7 +160,9 @@ function $03df2f2d3cffb62f$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
143
160
|
(0, $jx81S$useLayoutEffect)(onResize, [
|
|
144
161
|
onResize
|
|
145
162
|
]);
|
|
163
|
+
// oxlint-disable-next-line react/react-compiler
|
|
146
164
|
(0, $jx81S$useResizeObserver)({
|
|
165
|
+
// oxlint-disable-next-line react/react-compiler
|
|
147
166
|
ref: ((_renderProps_style = renderProps.style) === null || _renderProps_style === void 0 ? void 0 : _renderProps_style['--trigger-width']) ? undefined : props.triggerRef,
|
|
148
167
|
onResize: onResize
|
|
149
168
|
});
|
|
@@ -153,11 +172,13 @@ function $03df2f2d3cffb62f$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
153
172
|
...renderProps.style,
|
|
154
173
|
'--trigger-width': ((_renderProps_style1 = renderProps.style) === null || _renderProps_style1 === void 0 ? void 0 : _renderProps_style1['--trigger-width']) || triggerWidth
|
|
155
174
|
};
|
|
175
|
+
// oxlint-disable react/react-compiler
|
|
156
176
|
let overlay = /*#__PURE__*/ (0, $jx81S$react).createElement((0, $b7b7a92703138c9b$export$df3a06d6289f983e).div, {
|
|
157
177
|
...(0, $jx81S$mergeProps)((0, $jx81S$filterDOMProps)(props, {
|
|
158
178
|
global: true
|
|
159
179
|
}), popoverProps),
|
|
160
180
|
...renderProps,
|
|
181
|
+
id: isDialog ? props.id : undefined,
|
|
161
182
|
role: isDialog ? 'dialog' : undefined,
|
|
162
183
|
tabIndex: isDialog ? -1 : undefined,
|
|
163
184
|
"aria-label": props['aria-label'],
|
|
@@ -181,10 +202,12 @@ function $03df2f2d3cffb62f$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
181
202
|
}, children), /*#__PURE__*/ (0, $jx81S$react).createElement((0, $jx81S$DismissButton), {
|
|
182
203
|
onDismiss: state.close
|
|
183
204
|
}));
|
|
205
|
+
// oxlint-enable react/react-compiler
|
|
184
206
|
// If this is a root popover, render an extra div to act as the portal container for submenus/subdialogs.
|
|
185
|
-
if (!isSubPopover)
|
|
207
|
+
if (!isSubPopover) // oxlint-disable react/react-compiler
|
|
208
|
+
return /*#__PURE__*/ (0, $jx81S$react).createElement((0, $jx81S$Overlay), {
|
|
186
209
|
...props,
|
|
187
|
-
shouldContainFocus: isDialog,
|
|
210
|
+
shouldContainFocus: isDialog && props.trigger !== 'PreviewTrigger',
|
|
188
211
|
isExiting: isExiting,
|
|
189
212
|
portalContainer: UNSTABLE_portalContainer
|
|
190
213
|
}, !props.isNonModal && state.isOpen && /*#__PURE__*/ (0, $jx81S$react).createElement("div", {
|
|
@@ -204,12 +227,14 @@ function $03df2f2d3cffb62f$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
204
227
|
}, overlay)));
|
|
205
228
|
var _ref;
|
|
206
229
|
// Submenus/subdialogs are mounted into the root popover's container.
|
|
230
|
+
// oxlint-disable react/react-compiler
|
|
207
231
|
return /*#__PURE__*/ (0, $jx81S$react).createElement((0, $jx81S$Overlay), {
|
|
208
232
|
...props,
|
|
209
|
-
shouldContainFocus: isDialog,
|
|
233
|
+
shouldContainFocus: isDialog && props.trigger !== 'PreviewTrigger',
|
|
210
234
|
isExiting: isExiting,
|
|
211
235
|
portalContainer: (_ref = UNSTABLE_portalContainer !== null && UNSTABLE_portalContainer !== void 0 ? UNSTABLE_portalContainer : groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.current) !== null && _ref !== void 0 ? _ref : undefined
|
|
212
236
|
}, overlay);
|
|
237
|
+
// oxlint-enable react/react-compiler
|
|
213
238
|
}
|
|
214
239
|
|
|
215
240
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/react-aria-components/src/Popover.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n AriaLabelingProps,\n forwardRefType,\n GlobalDOMAttributes,\n RefObject\n} from '@react-types/shared';\nimport {AriaPopoverProps, usePopover} from 'react-aria/usePopover';\nimport {\n ClassNameOrFunction,\n ContextValue,\n dom,\n RenderProps,\n SlotProps,\n useContextProps,\n useRenderProps\n} from './utils';\nimport {DismissButton, Overlay} from 'react-aria/Overlay';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {focusSafely} from 'react-aria/private/interactions/focusSafely';\nimport {getInteractionModality} from 'react-aria/private/interactions/useFocusVisible';\nimport {isFocusWithin} from 'react-aria/private/utils/shadowdom/DOMFunctions';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {OverlayArrowContext} from './OverlayArrow';\nimport {\n OverlayTriggerProps,\n OverlayTriggerState,\n useOverlayTriggerState\n} from 'react-stately/useOverlayTriggerState';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport {PlacementAxis, PositionProps} from 'react-aria/useOverlayPosition';\nimport React, {\n Context,\n createContext,\n ForwardedRef,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';\nimport {useIsHidden} from 'react-aria/private/collections/Hidden';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface PopoverProps\n extends\n Omit<PositionProps, 'isOpen'>,\n Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef' | 'groupRef' | 'offset' | 'arrowSize'>,\n OverlayTriggerProps,\n RenderProps<PopoverRenderProps>,\n SlotProps,\n AriaLabelingProps,\n GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\n * element. A function may be provided to compute the class based on component state.\n *\n * @default 'react-aria-Popover'\n */\n className?: ClassNameOrFunction<PopoverRenderProps>;\n /**\n * The name of the component that triggered the popover. This is reflected on the element\n * as the `data-trigger` attribute, and can be used to provide specific\n * styles for the popover depending on which element triggered it.\n */\n trigger?: string;\n /**\n * The ref for the element which the popover positions itself with respect to.\n *\n * When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc.,\n * this is set automatically. It is only required when used standalone.\n */\n triggerRef?: RefObject<Element | null>;\n /**\n * Whether the popover is currently performing an entry animation.\n */\n isEntering?: boolean;\n /**\n * Whether the popover is currently performing an exit animation.\n */\n isExiting?: boolean;\n /**\n * The container element in which the overlay portal will be placed. This may have unknown\n * behavior depending on where it is portalled to.\n *\n * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.\n * @default document.body\n */\n UNSTABLE_portalContainer?: Element;\n /**\n * The additional offset applied along the main axis between the element and its\n * anchor element.\n *\n * @default 8\n */\n offset?: number;\n}\n\nexport interface PopoverRenderProps {\n /**\n * The name of the component that triggered the popover, e.g. \"DialogTrigger\" or \"ComboBox\".\n *\n * @selector [data-trigger=\"...\"]\n */\n trigger: string | null;\n /**\n * The placement of the popover relative to the trigger.\n *\n * @selector [data-placement=\"left | right | top | bottom\"]\n */\n placement: PlacementAxis | null;\n /**\n * Whether the popover is currently entering. Use this to apply animations.\n *\n * @selector [data-entering]\n */\n isEntering: boolean;\n /**\n * Whether the popover is currently exiting. Use this to apply animations.\n *\n * @selector [data-exiting]\n */\n isExiting: boolean;\n}\n\ninterface PopoverContextValue extends PopoverProps {\n /** Contexts to clear. */\n clearContexts?: Context<any>[];\n}\n\nexport const PopoverContext = createContext<ContextValue<PopoverContextValue, HTMLElement>>(null);\n\n// Stores a ref for the portal container for a group of popovers (e.g. submenus).\nconst PopoverGroupContext = createContext<RefObject<Element | null> | null>(null);\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(function Popover(\n props: PopoverProps,\n ref: ForwardedRef<HTMLElement>\n) {\n [props, ref] = useContextProps(props, ref, PopoverContext);\n let contextState = useContext(OverlayTriggerStateContext);\n let localState = useOverlayTriggerState(props);\n let state =\n props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;\n let isExiting = useExitAnimation(ref, state.isOpen) || props.isExiting || false;\n let isHidden = useIsHidden();\n let {direction} = useLocale();\n\n // If we are in a hidden tree, we still need to preserve our children.\n if (isHidden) {\n let children = props.children;\n if (typeof children === 'function') {\n children = children({\n trigger: props.trigger || null,\n placement: 'bottom',\n isEntering: false,\n isExiting: false,\n defaultChildren: null\n });\n }\n\n return <>{children}</>;\n }\n\n if (state && !state.isOpen && !isExiting) {\n return null;\n }\n\n return (\n <PopoverInner\n {...props}\n triggerRef={props.triggerRef!}\n state={state}\n popoverRef={ref}\n isExiting={isExiting}\n dir={direction}\n />\n );\n});\n\ninterface PopoverInnerProps extends AriaPopoverProps, RenderProps<PopoverRenderProps>, SlotProps {\n state: OverlayTriggerState;\n isEntering?: boolean;\n isExiting: boolean;\n UNSTABLE_portalContainer?: Element;\n trigger?: string;\n dir?: 'ltr' | 'rtl';\n clearContexts?: Context<any>[];\n}\n\nfunction PopoverInner({\n state,\n isExiting,\n UNSTABLE_portalContainer,\n clearContexts,\n ...props\n}: PopoverInnerProps) {\n // Calculate the arrow size internally (and remove props.arrowSize from PopoverProps)\n // Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx\n let arrowRef = useRef<HTMLDivElement>(null);\n let containerRef = useRef<HTMLDivElement | null>(null);\n let groupCtx = useContext(PopoverGroupContext);\n let isSubPopover = groupCtx && props.trigger === 'SubmenuTrigger';\n\n let {popoverProps, underlayProps, arrowProps, placement, triggerAnchorPoint} = usePopover(\n {\n ...props,\n offset: props.offset ?? 8,\n arrowRef,\n // If this is a submenu/subdialog, use the root popover's container\n // to detect outside interaction and add aria-hidden.\n groupRef: isSubPopover ? groupCtx! : containerRef\n },\n state\n );\n\n let ref = props.popoverRef as RefObject<HTMLDivElement | null>;\n let isEntering = useEnterAnimation(ref, !!placement) || props.isEntering || false;\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-Popover',\n values: {\n trigger: props.trigger || null,\n placement,\n isEntering,\n isExiting\n }\n });\n\n // Automatically render Popover with role=dialog except when isNonModal is true,\n // or a dialog is already nested inside the popover.\n let shouldBeDialog = !props.isNonModal || props.trigger === 'SubmenuTrigger';\n let [isDialog, setDialog] = useState(false);\n useLayoutEffect(() => {\n if (ref.current) {\n setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));\n }\n }, [ref, shouldBeDialog]);\n\n // Focus the popover itself on mount, unless a child element is already focused.\n // Skip this for submenus since hovering a submenutrigger should keep focus on the trigger\n useEffect(() => {\n if (\n isDialog &&\n (props.trigger !== 'SubmenuTrigger' || getInteractionModality() !== 'pointer') &&\n ref.current &&\n !isFocusWithin(ref.current)\n ) {\n focusSafely(ref.current);\n }\n }, [isDialog, ref, props.trigger]);\n\n let children = useMemo(() => {\n let children = renderProps.children;\n if (clearContexts) {\n for (let Context of clearContexts) {\n children = <Context.Provider value={null}>{children}</Context.Provider>;\n }\n }\n return children;\n }, [renderProps.children, clearContexts]);\n\n let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (props.triggerRef.current) {\n setTriggerWidth(props.triggerRef.current.getBoundingClientRect().width + 'px');\n }\n }, [props.triggerRef]);\n\n useLayoutEffect(onResize, [onResize]);\n useResizeObserver({\n ref: renderProps.style?.['--trigger-width'] ? undefined : props.triggerRef,\n onResize: onResize\n });\n\n let style = {\n ...popoverProps.style,\n '--trigger-anchor-point': triggerAnchorPoint\n ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px`\n : undefined,\n ...renderProps.style,\n '--trigger-width': renderProps.style?.['--trigger-width'] || triggerWidth\n };\n\n let overlay = (\n <dom.div\n {...mergeProps(filterDOMProps(props, {global: true}), popoverProps)}\n {...renderProps}\n role={isDialog ? 'dialog' : undefined}\n tabIndex={isDialog ? -1 : undefined}\n aria-label={props['aria-label']}\n aria-labelledby={props['aria-labelledby']}\n ref={ref}\n slot={props.slot || undefined}\n style={style}\n dir={props.dir}\n data-trigger={props.trigger}\n data-placement={placement}\n data-entering={isEntering || undefined}\n data-exiting={isExiting || undefined}>\n {!props.isNonModal && <DismissButton onDismiss={state.close} />}\n <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>\n {children}\n </OverlayArrowContext.Provider>\n <DismissButton onDismiss={state.close} />\n </dom.div>\n );\n\n // If this is a root popover, render an extra div to act as the portal container for submenus/subdialogs.\n if (!isSubPopover) {\n return (\n <Overlay\n {...props}\n shouldContainFocus={isDialog}\n isExiting={isExiting}\n portalContainer={UNSTABLE_portalContainer}>\n {!props.isNonModal && state.isOpen && (\n <div data-testid=\"underlay\" {...underlayProps} style={{position: 'fixed', inset: 0}} />\n )}\n <div ref={containerRef} style={{display: 'contents'}}>\n <PopoverGroupContext.Provider value={containerRef}>\n {overlay}\n </PopoverGroupContext.Provider>\n </div>\n </Overlay>\n );\n }\n\n // Submenus/subdialogs are mounted into the root popover's container.\n return (\n <Overlay\n {...props}\n shouldContainFocus={isDialog}\n isExiting={isExiting}\n portalContainer={UNSTABLE_portalContainer ?? groupCtx?.current ?? undefined}>\n {overlay}\n </Overlay>\n );\n}\n"],"names":[],"version":3,"file":"Popover.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/react-aria-components/src/Popover.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n AriaLabelingProps,\n forwardRefType,\n GlobalDOMAttributes,\n RefObject\n} from '@react-types/shared';\nimport {AriaPopoverProps, usePopover} from 'react-aria/usePopover';\nimport {\n ClassNameOrFunction,\n ContextValue,\n dom,\n RenderProps,\n SlotProps,\n useContextProps,\n useRenderProps\n} from './utils';\nimport {DismissButton, Overlay} from 'react-aria/Overlay';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {focusSafely} from 'react-aria/private/interactions/focusSafely';\nimport {getInteractionModality} from 'react-aria/private/interactions/useFocusVisible';\nimport {isFocusWithin} from 'react-aria/private/utils/shadowdom/DOMFunctions';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {OverlayArrowContext} from './OverlayArrow';\nimport {\n OverlayTriggerProps,\n OverlayTriggerState,\n useOverlayTriggerState\n} from 'react-stately/useOverlayTriggerState';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport {PlacementAxis, PositionProps} from 'react-aria/useOverlayPosition';\nimport React, {\n Context,\n createContext,\n ForwardedRef,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';\nimport {useIsHidden} from 'react-aria/private/collections/Hidden';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface PopoverProps\n extends\n Omit<PositionProps, 'isOpen'>,\n Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef' | 'groupRef' | 'offset' | 'arrowSize'>,\n OverlayTriggerProps,\n RenderProps<PopoverRenderProps>,\n SlotProps,\n AriaLabelingProps,\n GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\n * element. A function may be provided to compute the class based on component state.\n *\n * @default 'react-aria-Popover'\n */\n className?: ClassNameOrFunction<PopoverRenderProps>;\n /**\n * The name of the component that triggered the popover. This is reflected on the element\n * as the `data-trigger` attribute, and can be used to provide specific\n * styles for the popover depending on which element triggered it.\n */\n trigger?: string;\n /**\n * The ref for the element which the popover positions itself with respect to.\n *\n * When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc.,\n * this is set automatically. It is only required when used standalone.\n */\n triggerRef?: RefObject<Element | null>;\n /**\n * Whether the popover is currently performing an entry animation.\n */\n isEntering?: boolean;\n /**\n * Whether the popover is currently performing an exit animation.\n */\n isExiting?: boolean;\n /**\n * Whether the popover should appear and disappear without an entry or exit animation. This is\n * used by components such as PreviewTrigger to skip animations when quickly swapping between\n * overlays.\n */\n shouldSkipAnimation?: boolean;\n /**\n * The container element in which the overlay portal will be placed. This may have unknown\n * behavior depending on where it is portalled to.\n *\n * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.\n * @default document.body\n */\n UNSTABLE_portalContainer?: Element;\n /**\n * The additional offset applied along the main axis between the element and its\n * anchor element.\n *\n * @default 8\n */\n offset?: number;\n}\n\nexport interface PopoverRenderProps {\n /**\n * The name of the component that triggered the popover, e.g. \"DialogTrigger\" or \"ComboBox\".\n *\n * @selector [data-trigger=\"...\"]\n */\n trigger: string | null;\n /**\n * The placement of the popover relative to the trigger.\n *\n * @selector [data-placement=\"left | right | top | bottom\"]\n */\n placement: PlacementAxis | null;\n /**\n * Whether the popover is currently entering. Use this to apply animations.\n *\n * @selector [data-entering]\n */\n isEntering: boolean;\n /**\n * Whether the popover is currently exiting. Use this to apply animations.\n *\n * @selector [data-exiting]\n */\n isExiting: boolean;\n}\n\ninterface PopoverContextValue extends PopoverProps {\n id?: string;\n /** Contexts to clear. */\n clearContexts?: Context<any>[];\n}\n\nexport const PopoverContext = createContext<ContextValue<PopoverContextValue, HTMLElement>>(null);\n\n// Stores a ref for the portal container for a group of popovers (e.g. submenus).\nconst PopoverGroupContext = createContext<RefObject<Element | null> | null>(null);\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(function Popover(\n props: PopoverProps,\n ref: ForwardedRef<HTMLElement>\n) {\n [props, ref] = useContextProps(props, ref, PopoverContext);\n let contextState = useContext(OverlayTriggerStateContext);\n let localState = useOverlayTriggerState(props);\n let state =\n props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;\n // Skip the automatic exit animation when closing instantly (e.g. swapping between previews\n // during warmup). An explicitly provided isExiting prop still takes precedence.\n let exitAnimation = useExitAnimation(ref, state.isOpen);\n let isExiting = props.isExiting || (!props.shouldSkipAnimation && exitAnimation) || false;\n let isHidden = useIsHidden();\n let {direction} = useLocale();\n\n // If we are in a hidden tree, we still need to preserve our children.\n if (isHidden) {\n let children = props.children;\n if (typeof children === 'function') {\n children = children({\n trigger: props.trigger || null,\n placement: 'bottom',\n isEntering: false,\n isExiting: false,\n defaultChildren: null\n });\n }\n\n return <>{children}</>;\n }\n\n if (state && !state.isOpen && !isExiting) {\n return null;\n }\n\n return (\n <PopoverInner\n {...props}\n triggerRef={props.triggerRef!}\n state={state}\n popoverRef={ref}\n isExiting={isExiting}\n dir={direction}\n />\n );\n});\n\ninterface PopoverInnerProps extends AriaPopoverProps, RenderProps<PopoverRenderProps>, SlotProps {\n state: OverlayTriggerState;\n isEntering?: boolean;\n isExiting: boolean;\n shouldSkipAnimation?: boolean;\n UNSTABLE_portalContainer?: Element;\n trigger?: string;\n dir?: 'ltr' | 'rtl';\n clearContexts?: Context<any>[];\n id?: string;\n}\n\nfunction PopoverInner({\n state,\n isExiting,\n UNSTABLE_portalContainer,\n clearContexts,\n ...props\n}: PopoverInnerProps) {\n // Calculate the arrow size internally (and remove props.arrowSize from PopoverProps)\n // Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx\n let arrowRef = useRef<HTMLDivElement>(null);\n let containerRef = useRef<HTMLDivElement | null>(null);\n let groupCtx = useContext(PopoverGroupContext);\n let isSubPopover = groupCtx && props.trigger === 'SubmenuTrigger';\n\n let {popoverProps, underlayProps, arrowProps, placement, triggerAnchorPoint} = usePopover(\n {\n ...props,\n offset: props.offset ?? 8,\n arrowRef,\n // If this is a submenu/subdialog, use the root popover's container\n // to detect outside interaction and add aria-hidden.\n groupRef: isSubPopover ? groupCtx! : containerRef\n },\n state\n );\n\n let ref = props.popoverRef as RefObject<HTMLDivElement | null>;\n // Skip the automatic entry animation when opening instantly (e.g. swapping between previews\n // during warmup). An explicitly provided isEntering prop still takes precedence.\n let enterAnimation = useEnterAnimation(ref, !!placement);\n // oxlint-disable-next-line react/react-compiler\n let isEntering = props.isEntering || (!props.shouldSkipAnimation && enterAnimation) || false;\n // oxlint-disable-next-line react/react-compiler\n let renderProps = useRenderProps({\n // oxlint-disable-next-line react/react-compiler\n ...props,\n defaultClassName: 'react-aria-Popover',\n // oxlint-disable-next-line react/react-compiler\n values: {\n // oxlint-disable-next-line react/react-compiler\n trigger: props.trigger || null,\n placement,\n // oxlint-disable-next-line react/react-compiler\n isEntering,\n isExiting\n }\n });\n\n // Automatically render Popover with role=dialog except when isNonModal is true,\n // or a dialog is already nested inside the popover.\n let shouldBeDialog =\n // oxlint-disable-next-line react/react-compiler\n !props.isNonModal || props.trigger === 'SubmenuTrigger' || props.trigger === 'PreviewTrigger';\n // oxlint-disable-next-line react/react-compiler\n let [isDialog, setDialog] = useState(props.trigger === 'PreviewTrigger');\n useLayoutEffect(() => {\n if (ref.current) {\n setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));\n }\n }, [ref, shouldBeDialog]);\n\n // Focus the popover itself on mount, unless a child element is already focused.\n // Skip this for submenus since hovering a submenutrigger should keep focus on the trigger\n // oxlint-disable react/react-compiler\n useEffect(() => {\n if (\n isDialog &&\n props.trigger !== 'PreviewTrigger' &&\n (props.trigger !== 'SubmenuTrigger' || getInteractionModality() !== 'pointer') &&\n ref.current &&\n !isFocusWithin(ref.current)\n ) {\n focusSafely(ref.current);\n }\n }, [isDialog, ref, props.trigger]);\n // oxlint-enable react/react-compiler\n\n let children = useMemo(() => {\n let children = renderProps.children;\n if (clearContexts) {\n for (let Context of clearContexts) {\n children = <Context.Provider value={null}>{children}</Context.Provider>;\n }\n }\n return children;\n }, [renderProps.children, clearContexts]);\n\n let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n // oxlint-disable-next-line react/react-compiler\n let onResize = useCallback(() => {\n if (props.triggerRef.current) {\n setTriggerWidth(props.triggerRef.current.getBoundingClientRect().width + 'px');\n }\n }, [props.triggerRef]);\n\n useLayoutEffect(onResize, [onResize]);\n // oxlint-disable-next-line react/react-compiler\n useResizeObserver({\n // oxlint-disable-next-line react/react-compiler\n ref: renderProps.style?.['--trigger-width'] ? undefined : props.triggerRef,\n onResize: onResize\n });\n\n let style = {\n ...popoverProps.style,\n '--trigger-anchor-point': triggerAnchorPoint\n ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px`\n : undefined,\n ...renderProps.style,\n '--trigger-width': renderProps.style?.['--trigger-width'] || triggerWidth\n };\n\n // oxlint-disable react/react-compiler\n let overlay = (\n <dom.div\n {...mergeProps(filterDOMProps(props, {global: true}), popoverProps)}\n {...renderProps}\n id={isDialog ? props.id : undefined}\n role={isDialog ? 'dialog' : undefined}\n tabIndex={isDialog ? -1 : undefined}\n aria-label={props['aria-label']}\n aria-labelledby={props['aria-labelledby']}\n ref={ref}\n slot={props.slot || undefined}\n style={style}\n dir={props.dir}\n data-trigger={props.trigger}\n data-placement={placement}\n data-entering={isEntering || undefined}\n data-exiting={isExiting || undefined}>\n {/* oxlint-disable-next-line react/react-compiler */}\n {!props.isNonModal && <DismissButton onDismiss={state.close} />}\n <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>\n {children}\n </OverlayArrowContext.Provider>\n <DismissButton onDismiss={state.close} />\n </dom.div>\n );\n // oxlint-enable react/react-compiler\n\n // If this is a root popover, render an extra div to act as the portal container for submenus/subdialogs.\n if (!isSubPopover) {\n // oxlint-disable react/react-compiler\n return (\n <Overlay\n {...props}\n shouldContainFocus={isDialog && props.trigger !== 'PreviewTrigger'}\n isExiting={isExiting}\n portalContainer={UNSTABLE_portalContainer}>\n {/* oxlint-disable-next-line react/react-compiler */}\n {!props.isNonModal && state.isOpen && (\n <div data-testid=\"underlay\" {...underlayProps} style={{position: 'fixed', inset: 0}} />\n )}\n <div ref={containerRef} style={{display: 'contents'}}>\n <PopoverGroupContext.Provider value={containerRef}>\n {overlay}\n </PopoverGroupContext.Provider>\n </div>\n </Overlay>\n );\n // oxlint-enable react/react-compiler\n }\n\n // Submenus/subdialogs are mounted into the root popover's container.\n // oxlint-disable react/react-compiler\n return (\n <Overlay\n {...props}\n shouldContainFocus={isDialog && props.trigger !== 'PreviewTrigger'}\n isExiting={isExiting}\n portalContainer={UNSTABLE_portalContainer ?? groupCtx?.current ?? undefined}>\n {overlay}\n </Overlay>\n );\n // oxlint-enable react/react-compiler\n}\n"],"names":[],"version":3,"file":"Popover.js.map"}
|
package/dist/private/Popover.mjs
CHANGED
|
@@ -51,7 +51,10 @@ const $542a13ca2fa5b484$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $g4jvP$forwa
|
|
|
51
51
|
let contextState = (0, $g4jvP$useContext)((0, $f2ff30fde7b014be$export$d2f961adcb0afbe));
|
|
52
52
|
let localState = (0, $g4jvP$useOverlayTriggerState)(props);
|
|
53
53
|
let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
|
|
54
|
-
|
|
54
|
+
// Skip the automatic exit animation when closing instantly (e.g. swapping between previews
|
|
55
|
+
// during warmup). An explicitly provided isExiting prop still takes precedence.
|
|
56
|
+
let exitAnimation = (0, $g4jvP$useExitAnimation)(ref, state.isOpen);
|
|
57
|
+
let isExiting = props.isExiting || !props.shouldSkipAnimation && exitAnimation || false;
|
|
55
58
|
let isHidden = (0, $g4jvP$useIsHidden)();
|
|
56
59
|
let { direction: direction } = (0, $g4jvP$useLocale)();
|
|
57
60
|
// If we are in a hidden tree, we still need to preserve our children.
|
|
@@ -92,21 +95,32 @@ function $542a13ca2fa5b484$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
92
95
|
groupRef: isSubPopover ? groupCtx : containerRef
|
|
93
96
|
}, state);
|
|
94
97
|
let ref = props.popoverRef;
|
|
95
|
-
|
|
98
|
+
// Skip the automatic entry animation when opening instantly (e.g. swapping between previews
|
|
99
|
+
// during warmup). An explicitly provided isEntering prop still takes precedence.
|
|
100
|
+
let enterAnimation = (0, $g4jvP$useEnterAnimation)(ref, !!placement);
|
|
101
|
+
// oxlint-disable-next-line react/react-compiler
|
|
102
|
+
let isEntering = props.isEntering || !props.shouldSkipAnimation && enterAnimation || false;
|
|
103
|
+
// oxlint-disable-next-line react/react-compiler
|
|
96
104
|
let renderProps = (0, $7230ffa83bc0c2cf$export$4d86445c2cf5e3)({
|
|
105
|
+
// oxlint-disable-next-line react/react-compiler
|
|
97
106
|
...props,
|
|
98
107
|
defaultClassName: 'react-aria-Popover',
|
|
108
|
+
// oxlint-disable-next-line react/react-compiler
|
|
99
109
|
values: {
|
|
110
|
+
// oxlint-disable-next-line react/react-compiler
|
|
100
111
|
trigger: props.trigger || null,
|
|
101
112
|
placement: placement,
|
|
102
|
-
isEntering:
|
|
113
|
+
isEntering: // oxlint-disable-next-line react/react-compiler
|
|
114
|
+
isEntering,
|
|
103
115
|
isExiting: isExiting
|
|
104
116
|
}
|
|
105
117
|
});
|
|
106
118
|
// Automatically render Popover with role=dialog except when isNonModal is true,
|
|
107
119
|
// or a dialog is already nested inside the popover.
|
|
108
|
-
let shouldBeDialog =
|
|
109
|
-
|
|
120
|
+
let shouldBeDialog = // oxlint-disable-next-line react/react-compiler
|
|
121
|
+
!props.isNonModal || props.trigger === 'SubmenuTrigger' || props.trigger === 'PreviewTrigger';
|
|
122
|
+
// oxlint-disable-next-line react/react-compiler
|
|
123
|
+
let [isDialog, setDialog] = (0, $g4jvP$useState)(props.trigger === 'PreviewTrigger');
|
|
110
124
|
(0, $g4jvP$useLayoutEffect)(()=>{
|
|
111
125
|
if (ref.current) setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));
|
|
112
126
|
}, [
|
|
@@ -115,13 +129,15 @@ function $542a13ca2fa5b484$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
115
129
|
]);
|
|
116
130
|
// Focus the popover itself on mount, unless a child element is already focused.
|
|
117
131
|
// Skip this for submenus since hovering a submenutrigger should keep focus on the trigger
|
|
132
|
+
// oxlint-disable react/react-compiler
|
|
118
133
|
(0, $g4jvP$useEffect)(()=>{
|
|
119
|
-
if (isDialog && (props.trigger !== 'SubmenuTrigger' || (0, $g4jvP$getInteractionModality)() !== 'pointer') && ref.current && !(0, $g4jvP$isFocusWithin)(ref.current)) (0, $g4jvP$focusSafely)(ref.current);
|
|
134
|
+
if (isDialog && props.trigger !== 'PreviewTrigger' && (props.trigger !== 'SubmenuTrigger' || (0, $g4jvP$getInteractionModality)() !== 'pointer') && ref.current && !(0, $g4jvP$isFocusWithin)(ref.current)) (0, $g4jvP$focusSafely)(ref.current);
|
|
120
135
|
}, [
|
|
121
136
|
isDialog,
|
|
122
137
|
ref,
|
|
123
138
|
props.trigger
|
|
124
139
|
]);
|
|
140
|
+
// oxlint-enable react/react-compiler
|
|
125
141
|
let children = (0, $g4jvP$useMemo)(()=>{
|
|
126
142
|
let children = renderProps.children;
|
|
127
143
|
if (clearContexts) for (let Context of clearContexts)children = /*#__PURE__*/ (0, $g4jvP$react).createElement(Context.Provider, {
|
|
@@ -133,6 +149,7 @@ function $542a13ca2fa5b484$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
133
149
|
clearContexts
|
|
134
150
|
]);
|
|
135
151
|
let [triggerWidth, setTriggerWidth] = (0, $g4jvP$useState)(null);
|
|
152
|
+
// oxlint-disable-next-line react/react-compiler
|
|
136
153
|
let onResize = (0, $g4jvP$useCallback)(()=>{
|
|
137
154
|
if (props.triggerRef.current) setTriggerWidth(props.triggerRef.current.getBoundingClientRect().width + 'px');
|
|
138
155
|
}, [
|
|
@@ -141,7 +158,9 @@ function $542a13ca2fa5b484$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
141
158
|
(0, $g4jvP$useLayoutEffect)(onResize, [
|
|
142
159
|
onResize
|
|
143
160
|
]);
|
|
161
|
+
// oxlint-disable-next-line react/react-compiler
|
|
144
162
|
(0, $g4jvP$useResizeObserver)({
|
|
163
|
+
// oxlint-disable-next-line react/react-compiler
|
|
145
164
|
ref: renderProps.style?.['--trigger-width'] ? undefined : props.triggerRef,
|
|
146
165
|
onResize: onResize
|
|
147
166
|
});
|
|
@@ -151,11 +170,13 @@ function $542a13ca2fa5b484$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
151
170
|
...renderProps.style,
|
|
152
171
|
'--trigger-width': renderProps.style?.['--trigger-width'] || triggerWidth
|
|
153
172
|
};
|
|
173
|
+
// oxlint-disable react/react-compiler
|
|
154
174
|
let overlay = /*#__PURE__*/ (0, $g4jvP$react).createElement((0, $7230ffa83bc0c2cf$export$df3a06d6289f983e).div, {
|
|
155
175
|
...(0, $g4jvP$mergeProps)((0, $g4jvP$filterDOMProps)(props, {
|
|
156
176
|
global: true
|
|
157
177
|
}), popoverProps),
|
|
158
178
|
...renderProps,
|
|
179
|
+
id: isDialog ? props.id : undefined,
|
|
159
180
|
role: isDialog ? 'dialog' : undefined,
|
|
160
181
|
tabIndex: isDialog ? -1 : undefined,
|
|
161
182
|
"aria-label": props['aria-label'],
|
|
@@ -179,10 +200,12 @@ function $542a13ca2fa5b484$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
179
200
|
}, children), /*#__PURE__*/ (0, $g4jvP$react).createElement((0, $g4jvP$DismissButton), {
|
|
180
201
|
onDismiss: state.close
|
|
181
202
|
}));
|
|
203
|
+
// oxlint-enable react/react-compiler
|
|
182
204
|
// If this is a root popover, render an extra div to act as the portal container for submenus/subdialogs.
|
|
183
|
-
if (!isSubPopover)
|
|
205
|
+
if (!isSubPopover) // oxlint-disable react/react-compiler
|
|
206
|
+
return /*#__PURE__*/ (0, $g4jvP$react).createElement((0, $g4jvP$Overlay), {
|
|
184
207
|
...props,
|
|
185
|
-
shouldContainFocus: isDialog,
|
|
208
|
+
shouldContainFocus: isDialog && props.trigger !== 'PreviewTrigger',
|
|
186
209
|
isExiting: isExiting,
|
|
187
210
|
portalContainer: UNSTABLE_portalContainer
|
|
188
211
|
}, !props.isNonModal && state.isOpen && /*#__PURE__*/ (0, $g4jvP$react).createElement("div", {
|
|
@@ -201,12 +224,14 @@ function $542a13ca2fa5b484$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
201
224
|
value: containerRef
|
|
202
225
|
}, overlay)));
|
|
203
226
|
// Submenus/subdialogs are mounted into the root popover's container.
|
|
227
|
+
// oxlint-disable react/react-compiler
|
|
204
228
|
return /*#__PURE__*/ (0, $g4jvP$react).createElement((0, $g4jvP$Overlay), {
|
|
205
229
|
...props,
|
|
206
|
-
shouldContainFocus: isDialog,
|
|
230
|
+
shouldContainFocus: isDialog && props.trigger !== 'PreviewTrigger',
|
|
207
231
|
isExiting: isExiting,
|
|
208
232
|
portalContainer: UNSTABLE_portalContainer ?? groupCtx?.current ?? undefined
|
|
209
233
|
}, overlay);
|
|
234
|
+
// oxlint-enable react/react-compiler
|
|
210
235
|
}
|
|
211
236
|
|
|
212
237
|
|