@react-spectrum/menu 3.22.9 → 3.22.10
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/dist/ContextualHelpTrigger.main.js +6 -5
- package/dist/ContextualHelpTrigger.main.js.map +1 -1
- package/dist/ContextualHelpTrigger.mjs +6 -5
- package/dist/ContextualHelpTrigger.module.js +6 -5
- package/dist/ContextualHelpTrigger.module.js.map +1 -1
- package/dist/SubmenuTrigger.main.js +1 -1
- package/dist/SubmenuTrigger.main.js.map +1 -1
- package/dist/SubmenuTrigger.mjs +2 -2
- package/dist/SubmenuTrigger.module.js +2 -2
- package/dist/SubmenuTrigger.module.js.map +1 -1
- package/dist/types.d.ts.map +1 -1
- package/dist/useCloseOnScroll.main.js +3 -1
- package/dist/useCloseOnScroll.main.js.map +1 -1
- package/dist/useCloseOnScroll.mjs +3 -1
- package/dist/useCloseOnScroll.module.js +3 -1
- package/dist/useCloseOnScroll.module.js.map +1 -1
- package/dist/useOverlayPosition.main.js +2 -2
- package/dist/useOverlayPosition.main.js.map +1 -1
- package/dist/useOverlayPosition.mjs +2 -2
- package/dist/useOverlayPosition.module.js +2 -2
- package/dist/useOverlayPosition.module.js.map +1 -1
- package/package.json +23 -23
- package/src/ContextualHelpTrigger.tsx +4 -3
- package/src/SubmenuTrigger.tsx +2 -2
- package/src/useCloseOnScroll.ts +2 -1
- package/src/useOverlayPosition.ts +2 -2
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
require("./menu.5b49954a.css");
|
|
2
2
|
var $a10e565ec42bcf96$exports = require("./contextualhelp_vars_css.main.js");
|
|
3
|
+
var $25179ade6a3f679b$exports = require("./Popover.main.js");
|
|
3
4
|
require("./menu.2ec1fdaf.css");
|
|
4
5
|
var $3deee0fd2b46e64f$exports = require("./menu_vars_css.main.js");
|
|
5
6
|
var $cac834c4bc0a51d3$exports = require("./context.main.js");
|
|
@@ -7,7 +8,7 @@ var $63a7dff9cbe2d046$exports = require("./Menu.main.js");
|
|
|
7
8
|
var $hdb2e$reactspectrumutils = require("@react-spectrum/utils");
|
|
8
9
|
var $hdb2e$reactariafocus = require("@react-aria/focus");
|
|
9
10
|
var $hdb2e$reactariainteractions = require("@react-aria/interactions");
|
|
10
|
-
var $hdb2e$
|
|
11
|
+
var $hdb2e$reactariautils = require("@react-aria/utils");
|
|
11
12
|
var $hdb2e$react = require("react");
|
|
12
13
|
var $hdb2e$reactdom = require("react-dom");
|
|
13
14
|
var $hdb2e$reactariamenu = require("@react-aria/menu");
|
|
@@ -45,6 +46,7 @@ $parcel$export(module.exports, "ContextualHelpTrigger", () => $db380858d398b658$
|
|
|
45
46
|
|
|
46
47
|
|
|
47
48
|
|
|
49
|
+
|
|
48
50
|
function $db380858d398b658$var$ContextualHelpTrigger(props) {
|
|
49
51
|
let { isUnavailable: isUnavailable = false, targetKey: targetKey } = props;
|
|
50
52
|
let triggerRef = (0, $hdb2e$react.useRef)(null);
|
|
@@ -90,8 +92,7 @@ function $db380858d398b658$var$ContextualHelpTrigger(props) {
|
|
|
90
92
|
let [trigger] = (0, ($parcel$interopDefault($hdb2e$react))).Children.toArray(props.children);
|
|
91
93
|
let [, content] = props.children;
|
|
92
94
|
let onBlurWithin = (e)=>{
|
|
93
|
-
|
|
94
|
-
if (e.relatedTarget && popoverRef.current && !((_popoverRef_current_UNSAFE_getDOMNode = popoverRef.current.UNSAFE_getDOMNode()) === null || _popoverRef_current_UNSAFE_getDOMNode === void 0 ? void 0 : _popoverRef_current_UNSAFE_getDOMNode.contains(e.relatedTarget)) && !(e.relatedTarget === triggerRef.current && (0, $hdb2e$reactariainteractions.getInteractionModality)() === 'pointer')) {
|
|
95
|
+
if (e.relatedTarget && popoverRef.current && !(0, $hdb2e$reactariautils.nodeContains)(popoverRef.current.UNSAFE_getDOMNode(), e.relatedTarget) && !(e.relatedTarget === triggerRef.current && (0, $hdb2e$reactariainteractions.getInteractionModality)() === 'pointer')) {
|
|
95
96
|
if (submenuTriggerState.isOpen) submenuTriggerState.close();
|
|
96
97
|
}
|
|
97
98
|
};
|
|
@@ -101,7 +102,7 @@ function $db380858d398b658$var$ContextualHelpTrigger(props) {
|
|
|
101
102
|
setTraySubmenuAnimation('spectrum-TraySubmenu-exit');
|
|
102
103
|
setTimeout(()=>{
|
|
103
104
|
submenuTriggerState.close();
|
|
104
|
-
if (parentMenuRef.current && !parentMenuRef.current
|
|
105
|
+
if (parentMenuRef.current && !(0, $hdb2e$reactariautils.nodeContains)(parentMenuRef.current, document.activeElement)) parentMenuRef.current.focus();
|
|
105
106
|
}, 220); // Matches transition duration
|
|
106
107
|
};
|
|
107
108
|
if (isMobile) {
|
|
@@ -131,7 +132,7 @@ function $db380858d398b658$var$ContextualHelpTrigger(props) {
|
|
|
131
132
|
submenuTriggerState.close();
|
|
132
133
|
(_parentMenuRef_current = parentMenuRef.current) === null || _parentMenuRef_current === void 0 ? void 0 : _parentMenuRef_current.focus();
|
|
133
134
|
};
|
|
134
|
-
overlay = /*#__PURE__*/ (0, ($parcel$interopDefault($hdb2e$react))).createElement((0, $
|
|
135
|
+
overlay = /*#__PURE__*/ (0, ($parcel$interopDefault($hdb2e$react))).createElement((0, $25179ade6a3f679b$exports.Popover), {
|
|
135
136
|
...popoverProps,
|
|
136
137
|
UNSAFE_style: {
|
|
137
138
|
clipPath: 'unset',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 {classNames, SlotProvider, unwrapDOMRef, useIsMobileDevice} from '@react-spectrum/utils';\nimport {DOMRefValue, ItemProps, Key} from '@react-types/shared';\nimport {FocusScope} from '@react-aria/focus';\nimport {getInteractionModality} from '@react-aria/interactions';\nimport helpStyles from '@adobe/spectrum-css-temp/components/contextualhelp/vars.css';\nimport {Popover} from '@react-spectrum/overlays';\nimport React, {JSX, KeyboardEventHandler, ReactElement, useEffect, useRef, useState} from 'react';\nimport ReactDOM from 'react-dom';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {SubmenuTriggerContext, useMenuStateContext} from './context';\nimport {TrayHeaderWrapper} from './Menu';\nimport {useSubmenuTrigger} from '@react-aria/menu';\nimport {useSubmenuTriggerState} from '@react-stately/menu';\n\ninterface MenuDialogTriggerProps {\n /** Whether the menu item is currently unavailable. */\n isUnavailable?: boolean,\n /** The triggering Item and the Dialog, respectively. */\n children: [ReactElement, ReactElement]\n}\n\ninterface InternalMenuDialogTriggerProps extends MenuDialogTriggerProps {\n targetKey: Key\n}\n\nexport interface SpectrumMenuDialogTriggerProps extends MenuDialogTriggerProps {}\n\nfunction ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElement {\n let {isUnavailable = false, targetKey} = props;\n\n let triggerRef = useRef<HTMLLIElement>(null);\n let popoverRef = useRef<DOMRefValue<HTMLDivElement> | null>(null);\n let {popoverContainer, trayContainerRef, rootMenuTriggerState, menu: parentMenuRef, state} = useMenuStateContext()!;\n let submenuTriggerState = useSubmenuTriggerState({triggerKey: targetKey}, {...rootMenuTriggerState!, ...state});\n let submenuRef = unwrapDOMRef(popoverRef);\n let {submenuTriggerProps, popoverProps} = useSubmenuTrigger({\n parentMenuRef,\n submenuRef,\n type: 'dialog',\n isDisabled: !isUnavailable\n }, submenuTriggerState, triggerRef);\n let isMobile = useIsMobileDevice();\n let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n useEffect(() => {\n if (submenuTriggerState.isOpen) {\n setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n }\n }, [submenuTriggerState.isOpen]);\n let slots = {};\n if (isUnavailable) {\n slots = {\n dialog: {\n UNSAFE_className: classNames(\n helpStyles,\n 'react-spectrum-ContextualHelp-dialog',\n {\n 'react-spectrum-ContextualHelp-dialog--isMobile': isMobile\n },\n classNames(\n styles,\n {\n 'spectrum-Menu-subdialog': !isMobile,\n [traySubmenuAnimation]: isMobile\n }\n )\n )\n },\n content: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-content']},\n footer: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-footer']}\n };\n }\n let [trigger] = React.Children.toArray(props.children);\n let [, content] = props.children as [ReactElement, ReactElement];\n\n let onBlurWithin = (e) => {\n if (e.relatedTarget && popoverRef.current && (!popoverRef.current.UNSAFE_getDOMNode()?.contains(e.relatedTarget) && !(e.relatedTarget === triggerRef.current && getInteractionModality() === 'pointer'))) {\n if (submenuTriggerState.isOpen) {\n submenuTriggerState.close();\n }\n }\n };\n\n let overlay;\n let tray;\n let onBackButtonPress = () => {\n setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n setTimeout(() => {\n submenuTriggerState.close();\n if (parentMenuRef.current && !parentMenuRef.current.contains(document.activeElement)) {\n parentMenuRef.current.focus();\n }\n }, 220); // Matches transition duration\n };\n\n if (isMobile) {\n delete submenuTriggerProps.onBlur;\n delete submenuTriggerProps.onHoverChange;\n if (trayContainerRef.current && submenuTriggerState.isOpen) {\n let subDialogKeyDown: KeyboardEventHandler = (e) => {\n switch (e.key) {\n case 'Escape':\n e.stopPropagation();\n onBackButtonPress();\n break;\n }\n };\n\n tray = (\n <TrayHeaderWrapper\n isSubmenu\n parentMenuTreeState={state}\n rootMenuTriggerState={rootMenuTriggerState}\n wrapperKeyDown={subDialogKeyDown}\n onBackButtonPress={onBackButtonPress}>\n {content}\n </TrayHeaderWrapper>\n );\n\n overlay = ReactDOM.createPortal(tray, trayContainerRef.current);\n }\n } else {\n let onDismissButtonPress = () => {\n submenuTriggerState.close();\n parentMenuRef.current?.focus();\n };\n\n overlay = (\n <Popover\n {...popoverProps}\n UNSAFE_style={{clipPath: 'unset', overflow: 'visible', filter: 'unset', borderWidth: '0px'}}\n UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}\n onDismissButtonPress={onDismissButtonPress}\n onBlurWithin={onBlurWithin}\n container={popoverContainer!}\n state={submenuTriggerState}\n ref={popoverRef}\n triggerRef={triggerRef}\n placement=\"end top\"\n containerPadding={0}\n hideArrow\n enableBothDismissButtons>\n <FocusScope restoreFocus contain>\n {content}\n </FocusScope>\n </Popover>\n );\n }\n\n return (\n <>\n <SubmenuTriggerContext.Provider value={{isUnavailable, triggerRef, ...submenuTriggerProps}}>{trigger}</SubmenuTriggerContext.Provider>\n <SlotProvider slots={slots}>\n {submenuTriggerState.isOpen && overlay}\n </SlotProvider>\n </>\n );\n}\n\nContextualHelpTrigger.getCollectionNode = function* getCollectionNode<T>(props: ItemProps<T>) {\n let childArray: ReactElement[] = [];\n React.Children.forEach(props.children, child => {\n if (React.isValidElement(child)) {\n childArray.push(child);\n }\n });\n let [trigger] = childArray;\n let [, content] = props.children as [ReactElement, ReactElement];\n\n yield {\n element: React.cloneElement(trigger, {...trigger.props as any, hasChildItems: true, isTrigger: true}),\n wrapper: (element) => (\n <ContextualHelpTrigger key={element.key} targetKey={element.key} {...props}>\n {element}\n {content}\n </ContextualHelpTrigger>\n )\n };\n};\n\nlet _Item = ContextualHelpTrigger as unknown as (props: SpectrumMenuDialogTriggerProps) => JSX.Element;\nexport {_Item as ContextualHelpTrigger};\n"],"names":[],"version":3,"file":"ContextualHelpTrigger.main.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 {classNames, SlotProvider, unwrapDOMRef, useIsMobileDevice} from '@react-spectrum/utils';\nimport {DOMRefValue, ItemProps, Key} from '@react-types/shared';\nimport {FocusScope} from '@react-aria/focus';\nimport {getInteractionModality} from '@react-aria/interactions';\nimport helpStyles from '@adobe/spectrum-css-temp/components/contextualhelp/vars.css';\nimport {nodeContains} from '@react-aria/utils';\nimport {Popover} from './Popover';\nimport React, {JSX, KeyboardEventHandler, ReactElement, useEffect, useRef, useState} from 'react';\nimport ReactDOM from 'react-dom';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {SubmenuTriggerContext, useMenuStateContext} from './context';\nimport {TrayHeaderWrapper} from './Menu';\nimport {useSubmenuTrigger} from '@react-aria/menu';\nimport {useSubmenuTriggerState} from '@react-stately/menu';\n\ninterface MenuDialogTriggerProps {\n /** Whether the menu item is currently unavailable. */\n isUnavailable?: boolean,\n /** The triggering Item and the Dialog, respectively. */\n children: [ReactElement, ReactElement]\n}\n\ninterface InternalMenuDialogTriggerProps extends MenuDialogTriggerProps {\n targetKey: Key\n}\n\nexport interface SpectrumMenuDialogTriggerProps extends MenuDialogTriggerProps {}\n\nfunction ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElement {\n let {isUnavailable = false, targetKey} = props;\n\n let triggerRef = useRef<HTMLLIElement>(null);\n let popoverRef = useRef<DOMRefValue<HTMLDivElement> | null>(null);\n let {popoverContainer, trayContainerRef, rootMenuTriggerState, menu: parentMenuRef, state} = useMenuStateContext()!;\n let submenuTriggerState = useSubmenuTriggerState({triggerKey: targetKey}, {...rootMenuTriggerState!, ...state});\n let submenuRef = unwrapDOMRef(popoverRef);\n let {submenuTriggerProps, popoverProps} = useSubmenuTrigger({\n parentMenuRef,\n submenuRef,\n type: 'dialog',\n isDisabled: !isUnavailable\n }, submenuTriggerState, triggerRef);\n let isMobile = useIsMobileDevice();\n let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n useEffect(() => {\n if (submenuTriggerState.isOpen) {\n setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n }\n }, [submenuTriggerState.isOpen]);\n let slots = {};\n if (isUnavailable) {\n slots = {\n dialog: {\n UNSAFE_className: classNames(\n helpStyles,\n 'react-spectrum-ContextualHelp-dialog',\n {\n 'react-spectrum-ContextualHelp-dialog--isMobile': isMobile\n },\n classNames(\n styles,\n {\n 'spectrum-Menu-subdialog': !isMobile,\n [traySubmenuAnimation]: isMobile\n }\n )\n )\n },\n content: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-content']},\n footer: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-footer']}\n };\n }\n let [trigger] = React.Children.toArray(props.children);\n let [, content] = props.children as [ReactElement, ReactElement];\n\n let onBlurWithin = (e) => {\n if (e.relatedTarget && popoverRef.current && (!nodeContains(popoverRef.current.UNSAFE_getDOMNode(), e.relatedTarget) && !(e.relatedTarget === triggerRef.current && getInteractionModality() === 'pointer'))) {\n if (submenuTriggerState.isOpen) {\n submenuTriggerState.close();\n }\n }\n };\n\n let overlay;\n let tray;\n let onBackButtonPress = () => {\n setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n setTimeout(() => {\n submenuTriggerState.close();\n if (parentMenuRef.current && !nodeContains(parentMenuRef.current, document.activeElement)) {\n parentMenuRef.current.focus();\n }\n }, 220); // Matches transition duration\n };\n\n if (isMobile) {\n delete submenuTriggerProps.onBlur;\n delete submenuTriggerProps.onHoverChange;\n if (trayContainerRef.current && submenuTriggerState.isOpen) {\n let subDialogKeyDown: KeyboardEventHandler = (e) => {\n switch (e.key) {\n case 'Escape':\n e.stopPropagation();\n onBackButtonPress();\n break;\n }\n };\n\n tray = (\n <TrayHeaderWrapper\n isSubmenu\n parentMenuTreeState={state}\n rootMenuTriggerState={rootMenuTriggerState}\n wrapperKeyDown={subDialogKeyDown}\n onBackButtonPress={onBackButtonPress}>\n {content}\n </TrayHeaderWrapper>\n );\n\n overlay = ReactDOM.createPortal(tray, trayContainerRef.current);\n }\n } else {\n let onDismissButtonPress = () => {\n submenuTriggerState.close();\n parentMenuRef.current?.focus();\n };\n\n overlay = (\n <Popover\n {...popoverProps}\n UNSAFE_style={{clipPath: 'unset', overflow: 'visible', filter: 'unset', borderWidth: '0px'}}\n UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}\n onDismissButtonPress={onDismissButtonPress}\n onBlurWithin={onBlurWithin}\n container={popoverContainer!}\n state={submenuTriggerState}\n ref={popoverRef}\n triggerRef={triggerRef}\n placement=\"end top\"\n containerPadding={0}\n hideArrow\n enableBothDismissButtons>\n <FocusScope restoreFocus contain>\n {content}\n </FocusScope>\n </Popover>\n );\n }\n\n return (\n <>\n <SubmenuTriggerContext.Provider value={{isUnavailable, triggerRef, ...submenuTriggerProps}}>{trigger}</SubmenuTriggerContext.Provider>\n <SlotProvider slots={slots}>\n {submenuTriggerState.isOpen && overlay}\n </SlotProvider>\n </>\n );\n}\n\nContextualHelpTrigger.getCollectionNode = function* getCollectionNode<T>(props: ItemProps<T>) {\n let childArray: ReactElement[] = [];\n React.Children.forEach(props.children, child => {\n if (React.isValidElement(child)) {\n childArray.push(child);\n }\n });\n let [trigger] = childArray;\n let [, content] = props.children as [ReactElement, ReactElement];\n\n yield {\n element: React.cloneElement(trigger, {...trigger.props as any, hasChildItems: true, isTrigger: true}),\n wrapper: (element) => (\n <ContextualHelpTrigger key={element.key} targetKey={element.key} {...props}>\n {element}\n {content}\n </ContextualHelpTrigger>\n )\n };\n};\n\nlet _Item = ContextualHelpTrigger as unknown as (props: SpectrumMenuDialogTriggerProps) => JSX.Element;\nexport {_Item as ContextualHelpTrigger};\n"],"names":[],"version":3,"file":"ContextualHelpTrigger.main.js.map"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import "./menu.5b49954a.css";
|
|
2
2
|
import $7Y1uy$contextualhelp_vars_cssmodulejs from "./contextualhelp_vars_css.mjs";
|
|
3
|
+
import {Popover as $bf810f3fb07f8592$export$5b6b19405a83ff9d} from "./Popover.mjs";
|
|
3
4
|
import "./menu.2ec1fdaf.css";
|
|
4
5
|
import $7Y1uy$menu_vars_cssmodulejs from "./menu_vars_css.mjs";
|
|
5
6
|
import {SubmenuTriggerContext as $d94604d52c3e3feb$export$8d97fe02339fc0e3, useMenuStateContext as $d94604d52c3e3feb$export$efa3856fc0e85e7f} from "./context.mjs";
|
|
@@ -7,7 +8,7 @@ import {TrayHeaderWrapper as $49b26f4b606348f6$export$3dfe97b5c32d8d8c} from "./
|
|
|
7
8
|
import {unwrapDOMRef as $7Y1uy$unwrapDOMRef, useIsMobileDevice as $7Y1uy$useIsMobileDevice, classNames as $7Y1uy$classNames, SlotProvider as $7Y1uy$SlotProvider} from "@react-spectrum/utils";
|
|
8
9
|
import {FocusScope as $7Y1uy$FocusScope} from "@react-aria/focus";
|
|
9
10
|
import {getInteractionModality as $7Y1uy$getInteractionModality} from "@react-aria/interactions";
|
|
10
|
-
import {
|
|
11
|
+
import {nodeContains as $7Y1uy$nodeContains} from "@react-aria/utils";
|
|
11
12
|
import $7Y1uy$react, {useRef as $7Y1uy$useRef, useState as $7Y1uy$useState, useEffect as $7Y1uy$useEffect} from "react";
|
|
12
13
|
import $7Y1uy$reactdom from "react-dom";
|
|
13
14
|
import {useSubmenuTrigger as $7Y1uy$useSubmenuTrigger} from "@react-aria/menu";
|
|
@@ -39,6 +40,7 @@ function $parcel$interopDefault(a) {
|
|
|
39
40
|
|
|
40
41
|
|
|
41
42
|
|
|
43
|
+
|
|
42
44
|
function $726fb1b478e356bf$var$ContextualHelpTrigger(props) {
|
|
43
45
|
let { isUnavailable: isUnavailable = false, targetKey: targetKey } = props;
|
|
44
46
|
let triggerRef = (0, $7Y1uy$useRef)(null);
|
|
@@ -84,8 +86,7 @@ function $726fb1b478e356bf$var$ContextualHelpTrigger(props) {
|
|
|
84
86
|
let [trigger] = (0, $7Y1uy$react).Children.toArray(props.children);
|
|
85
87
|
let [, content] = props.children;
|
|
86
88
|
let onBlurWithin = (e)=>{
|
|
87
|
-
|
|
88
|
-
if (e.relatedTarget && popoverRef.current && !((_popoverRef_current_UNSAFE_getDOMNode = popoverRef.current.UNSAFE_getDOMNode()) === null || _popoverRef_current_UNSAFE_getDOMNode === void 0 ? void 0 : _popoverRef_current_UNSAFE_getDOMNode.contains(e.relatedTarget)) && !(e.relatedTarget === triggerRef.current && (0, $7Y1uy$getInteractionModality)() === 'pointer')) {
|
|
89
|
+
if (e.relatedTarget && popoverRef.current && !(0, $7Y1uy$nodeContains)(popoverRef.current.UNSAFE_getDOMNode(), e.relatedTarget) && !(e.relatedTarget === triggerRef.current && (0, $7Y1uy$getInteractionModality)() === 'pointer')) {
|
|
89
90
|
if (submenuTriggerState.isOpen) submenuTriggerState.close();
|
|
90
91
|
}
|
|
91
92
|
};
|
|
@@ -95,7 +96,7 @@ function $726fb1b478e356bf$var$ContextualHelpTrigger(props) {
|
|
|
95
96
|
setTraySubmenuAnimation('spectrum-TraySubmenu-exit');
|
|
96
97
|
setTimeout(()=>{
|
|
97
98
|
submenuTriggerState.close();
|
|
98
|
-
if (parentMenuRef.current && !parentMenuRef.current
|
|
99
|
+
if (parentMenuRef.current && !(0, $7Y1uy$nodeContains)(parentMenuRef.current, document.activeElement)) parentMenuRef.current.focus();
|
|
99
100
|
}, 220); // Matches transition duration
|
|
100
101
|
};
|
|
101
102
|
if (isMobile) {
|
|
@@ -125,7 +126,7 @@ function $726fb1b478e356bf$var$ContextualHelpTrigger(props) {
|
|
|
125
126
|
submenuTriggerState.close();
|
|
126
127
|
(_parentMenuRef_current = parentMenuRef.current) === null || _parentMenuRef_current === void 0 ? void 0 : _parentMenuRef_current.focus();
|
|
127
128
|
};
|
|
128
|
-
overlay = /*#__PURE__*/ (0, $7Y1uy$react).createElement((0, $
|
|
129
|
+
overlay = /*#__PURE__*/ (0, $7Y1uy$react).createElement((0, $bf810f3fb07f8592$export$5b6b19405a83ff9d), {
|
|
129
130
|
...popoverProps,
|
|
130
131
|
UNSAFE_style: {
|
|
131
132
|
clipPath: 'unset',
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import "./menu.5b49954a.css";
|
|
2
2
|
import $7Y1uy$contextualhelp_vars_cssmodulejs from "./contextualhelp_vars_css.module.js";
|
|
3
|
+
import {Popover as $bf810f3fb07f8592$export$5b6b19405a83ff9d} from "./Popover.module.js";
|
|
3
4
|
import "./menu.2ec1fdaf.css";
|
|
4
5
|
import $7Y1uy$menu_vars_cssmodulejs from "./menu_vars_css.module.js";
|
|
5
6
|
import {SubmenuTriggerContext as $d94604d52c3e3feb$export$8d97fe02339fc0e3, useMenuStateContext as $d94604d52c3e3feb$export$efa3856fc0e85e7f} from "./context.module.js";
|
|
@@ -7,7 +8,7 @@ import {TrayHeaderWrapper as $49b26f4b606348f6$export$3dfe97b5c32d8d8c} from "./
|
|
|
7
8
|
import {unwrapDOMRef as $7Y1uy$unwrapDOMRef, useIsMobileDevice as $7Y1uy$useIsMobileDevice, classNames as $7Y1uy$classNames, SlotProvider as $7Y1uy$SlotProvider} from "@react-spectrum/utils";
|
|
8
9
|
import {FocusScope as $7Y1uy$FocusScope} from "@react-aria/focus";
|
|
9
10
|
import {getInteractionModality as $7Y1uy$getInteractionModality} from "@react-aria/interactions";
|
|
10
|
-
import {
|
|
11
|
+
import {nodeContains as $7Y1uy$nodeContains} from "@react-aria/utils";
|
|
11
12
|
import $7Y1uy$react, {useRef as $7Y1uy$useRef, useState as $7Y1uy$useState, useEffect as $7Y1uy$useEffect} from "react";
|
|
12
13
|
import $7Y1uy$reactdom from "react-dom";
|
|
13
14
|
import {useSubmenuTrigger as $7Y1uy$useSubmenuTrigger} from "@react-aria/menu";
|
|
@@ -39,6 +40,7 @@ function $parcel$interopDefault(a) {
|
|
|
39
40
|
|
|
40
41
|
|
|
41
42
|
|
|
43
|
+
|
|
42
44
|
function $726fb1b478e356bf$var$ContextualHelpTrigger(props) {
|
|
43
45
|
let { isUnavailable: isUnavailable = false, targetKey: targetKey } = props;
|
|
44
46
|
let triggerRef = (0, $7Y1uy$useRef)(null);
|
|
@@ -84,8 +86,7 @@ function $726fb1b478e356bf$var$ContextualHelpTrigger(props) {
|
|
|
84
86
|
let [trigger] = (0, $7Y1uy$react).Children.toArray(props.children);
|
|
85
87
|
let [, content] = props.children;
|
|
86
88
|
let onBlurWithin = (e)=>{
|
|
87
|
-
|
|
88
|
-
if (e.relatedTarget && popoverRef.current && !((_popoverRef_current_UNSAFE_getDOMNode = popoverRef.current.UNSAFE_getDOMNode()) === null || _popoverRef_current_UNSAFE_getDOMNode === void 0 ? void 0 : _popoverRef_current_UNSAFE_getDOMNode.contains(e.relatedTarget)) && !(e.relatedTarget === triggerRef.current && (0, $7Y1uy$getInteractionModality)() === 'pointer')) {
|
|
89
|
+
if (e.relatedTarget && popoverRef.current && !(0, $7Y1uy$nodeContains)(popoverRef.current.UNSAFE_getDOMNode(), e.relatedTarget) && !(e.relatedTarget === triggerRef.current && (0, $7Y1uy$getInteractionModality)() === 'pointer')) {
|
|
89
90
|
if (submenuTriggerState.isOpen) submenuTriggerState.close();
|
|
90
91
|
}
|
|
91
92
|
};
|
|
@@ -95,7 +96,7 @@ function $726fb1b478e356bf$var$ContextualHelpTrigger(props) {
|
|
|
95
96
|
setTraySubmenuAnimation('spectrum-TraySubmenu-exit');
|
|
96
97
|
setTimeout(()=>{
|
|
97
98
|
submenuTriggerState.close();
|
|
98
|
-
if (parentMenuRef.current && !parentMenuRef.current
|
|
99
|
+
if (parentMenuRef.current && !(0, $7Y1uy$nodeContains)(parentMenuRef.current, document.activeElement)) parentMenuRef.current.focus();
|
|
99
100
|
}, 220); // Matches transition duration
|
|
100
101
|
};
|
|
101
102
|
if (isMobile) {
|
|
@@ -125,7 +126,7 @@ function $726fb1b478e356bf$var$ContextualHelpTrigger(props) {
|
|
|
125
126
|
submenuTriggerState.close();
|
|
126
127
|
(_parentMenuRef_current = parentMenuRef.current) === null || _parentMenuRef_current === void 0 ? void 0 : _parentMenuRef_current.focus();
|
|
127
128
|
};
|
|
128
|
-
overlay = /*#__PURE__*/ (0, $7Y1uy$react).createElement((0, $
|
|
129
|
+
overlay = /*#__PURE__*/ (0, $7Y1uy$react).createElement((0, $bf810f3fb07f8592$export$5b6b19405a83ff9d), {
|
|
129
130
|
...popoverProps,
|
|
130
131
|
UNSAFE_style: {
|
|
131
132
|
clipPath: 'unset',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 {classNames, SlotProvider, unwrapDOMRef, useIsMobileDevice} from '@react-spectrum/utils';\nimport {DOMRefValue, ItemProps, Key} from '@react-types/shared';\nimport {FocusScope} from '@react-aria/focus';\nimport {getInteractionModality} from '@react-aria/interactions';\nimport helpStyles from '@adobe/spectrum-css-temp/components/contextualhelp/vars.css';\nimport {Popover} from '@react-spectrum/overlays';\nimport React, {JSX, KeyboardEventHandler, ReactElement, useEffect, useRef, useState} from 'react';\nimport ReactDOM from 'react-dom';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {SubmenuTriggerContext, useMenuStateContext} from './context';\nimport {TrayHeaderWrapper} from './Menu';\nimport {useSubmenuTrigger} from '@react-aria/menu';\nimport {useSubmenuTriggerState} from '@react-stately/menu';\n\ninterface MenuDialogTriggerProps {\n /** Whether the menu item is currently unavailable. */\n isUnavailable?: boolean,\n /** The triggering Item and the Dialog, respectively. */\n children: [ReactElement, ReactElement]\n}\n\ninterface InternalMenuDialogTriggerProps extends MenuDialogTriggerProps {\n targetKey: Key\n}\n\nexport interface SpectrumMenuDialogTriggerProps extends MenuDialogTriggerProps {}\n\nfunction ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElement {\n let {isUnavailable = false, targetKey} = props;\n\n let triggerRef = useRef<HTMLLIElement>(null);\n let popoverRef = useRef<DOMRefValue<HTMLDivElement> | null>(null);\n let {popoverContainer, trayContainerRef, rootMenuTriggerState, menu: parentMenuRef, state} = useMenuStateContext()!;\n let submenuTriggerState = useSubmenuTriggerState({triggerKey: targetKey}, {...rootMenuTriggerState!, ...state});\n let submenuRef = unwrapDOMRef(popoverRef);\n let {submenuTriggerProps, popoverProps} = useSubmenuTrigger({\n parentMenuRef,\n submenuRef,\n type: 'dialog',\n isDisabled: !isUnavailable\n }, submenuTriggerState, triggerRef);\n let isMobile = useIsMobileDevice();\n let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n useEffect(() => {\n if (submenuTriggerState.isOpen) {\n setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n }\n }, [submenuTriggerState.isOpen]);\n let slots = {};\n if (isUnavailable) {\n slots = {\n dialog: {\n UNSAFE_className: classNames(\n helpStyles,\n 'react-spectrum-ContextualHelp-dialog',\n {\n 'react-spectrum-ContextualHelp-dialog--isMobile': isMobile\n },\n classNames(\n styles,\n {\n 'spectrum-Menu-subdialog': !isMobile,\n [traySubmenuAnimation]: isMobile\n }\n )\n )\n },\n content: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-content']},\n footer: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-footer']}\n };\n }\n let [trigger] = React.Children.toArray(props.children);\n let [, content] = props.children as [ReactElement, ReactElement];\n\n let onBlurWithin = (e) => {\n if (e.relatedTarget && popoverRef.current && (!popoverRef.current.UNSAFE_getDOMNode()?.contains(e.relatedTarget) && !(e.relatedTarget === triggerRef.current && getInteractionModality() === 'pointer'))) {\n if (submenuTriggerState.isOpen) {\n submenuTriggerState.close();\n }\n }\n };\n\n let overlay;\n let tray;\n let onBackButtonPress = () => {\n setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n setTimeout(() => {\n submenuTriggerState.close();\n if (parentMenuRef.current && !parentMenuRef.current.contains(document.activeElement)) {\n parentMenuRef.current.focus();\n }\n }, 220); // Matches transition duration\n };\n\n if (isMobile) {\n delete submenuTriggerProps.onBlur;\n delete submenuTriggerProps.onHoverChange;\n if (trayContainerRef.current && submenuTriggerState.isOpen) {\n let subDialogKeyDown: KeyboardEventHandler = (e) => {\n switch (e.key) {\n case 'Escape':\n e.stopPropagation();\n onBackButtonPress();\n break;\n }\n };\n\n tray = (\n <TrayHeaderWrapper\n isSubmenu\n parentMenuTreeState={state}\n rootMenuTriggerState={rootMenuTriggerState}\n wrapperKeyDown={subDialogKeyDown}\n onBackButtonPress={onBackButtonPress}>\n {content}\n </TrayHeaderWrapper>\n );\n\n overlay = ReactDOM.createPortal(tray, trayContainerRef.current);\n }\n } else {\n let onDismissButtonPress = () => {\n submenuTriggerState.close();\n parentMenuRef.current?.focus();\n };\n\n overlay = (\n <Popover\n {...popoverProps}\n UNSAFE_style={{clipPath: 'unset', overflow: 'visible', filter: 'unset', borderWidth: '0px'}}\n UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}\n onDismissButtonPress={onDismissButtonPress}\n onBlurWithin={onBlurWithin}\n container={popoverContainer!}\n state={submenuTriggerState}\n ref={popoverRef}\n triggerRef={triggerRef}\n placement=\"end top\"\n containerPadding={0}\n hideArrow\n enableBothDismissButtons>\n <FocusScope restoreFocus contain>\n {content}\n </FocusScope>\n </Popover>\n );\n }\n\n return (\n <>\n <SubmenuTriggerContext.Provider value={{isUnavailable, triggerRef, ...submenuTriggerProps}}>{trigger}</SubmenuTriggerContext.Provider>\n <SlotProvider slots={slots}>\n {submenuTriggerState.isOpen && overlay}\n </SlotProvider>\n </>\n );\n}\n\nContextualHelpTrigger.getCollectionNode = function* getCollectionNode<T>(props: ItemProps<T>) {\n let childArray: ReactElement[] = [];\n React.Children.forEach(props.children, child => {\n if (React.isValidElement(child)) {\n childArray.push(child);\n }\n });\n let [trigger] = childArray;\n let [, content] = props.children as [ReactElement, ReactElement];\n\n yield {\n element: React.cloneElement(trigger, {...trigger.props as any, hasChildItems: true, isTrigger: true}),\n wrapper: (element) => (\n <ContextualHelpTrigger key={element.key} targetKey={element.key} {...props}>\n {element}\n {content}\n </ContextualHelpTrigger>\n )\n };\n};\n\nlet _Item = ContextualHelpTrigger as unknown as (props: SpectrumMenuDialogTriggerProps) => JSX.Element;\nexport {_Item as ContextualHelpTrigger};\n"],"names":[],"version":3,"file":"ContextualHelpTrigger.module.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 {classNames, SlotProvider, unwrapDOMRef, useIsMobileDevice} from '@react-spectrum/utils';\nimport {DOMRefValue, ItemProps, Key} from '@react-types/shared';\nimport {FocusScope} from '@react-aria/focus';\nimport {getInteractionModality} from '@react-aria/interactions';\nimport helpStyles from '@adobe/spectrum-css-temp/components/contextualhelp/vars.css';\nimport {nodeContains} from '@react-aria/utils';\nimport {Popover} from './Popover';\nimport React, {JSX, KeyboardEventHandler, ReactElement, useEffect, useRef, useState} from 'react';\nimport ReactDOM from 'react-dom';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {SubmenuTriggerContext, useMenuStateContext} from './context';\nimport {TrayHeaderWrapper} from './Menu';\nimport {useSubmenuTrigger} from '@react-aria/menu';\nimport {useSubmenuTriggerState} from '@react-stately/menu';\n\ninterface MenuDialogTriggerProps {\n /** Whether the menu item is currently unavailable. */\n isUnavailable?: boolean,\n /** The triggering Item and the Dialog, respectively. */\n children: [ReactElement, ReactElement]\n}\n\ninterface InternalMenuDialogTriggerProps extends MenuDialogTriggerProps {\n targetKey: Key\n}\n\nexport interface SpectrumMenuDialogTriggerProps extends MenuDialogTriggerProps {}\n\nfunction ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElement {\n let {isUnavailable = false, targetKey} = props;\n\n let triggerRef = useRef<HTMLLIElement>(null);\n let popoverRef = useRef<DOMRefValue<HTMLDivElement> | null>(null);\n let {popoverContainer, trayContainerRef, rootMenuTriggerState, menu: parentMenuRef, state} = useMenuStateContext()!;\n let submenuTriggerState = useSubmenuTriggerState({triggerKey: targetKey}, {...rootMenuTriggerState!, ...state});\n let submenuRef = unwrapDOMRef(popoverRef);\n let {submenuTriggerProps, popoverProps} = useSubmenuTrigger({\n parentMenuRef,\n submenuRef,\n type: 'dialog',\n isDisabled: !isUnavailable\n }, submenuTriggerState, triggerRef);\n let isMobile = useIsMobileDevice();\n let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n useEffect(() => {\n if (submenuTriggerState.isOpen) {\n setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n }\n }, [submenuTriggerState.isOpen]);\n let slots = {};\n if (isUnavailable) {\n slots = {\n dialog: {\n UNSAFE_className: classNames(\n helpStyles,\n 'react-spectrum-ContextualHelp-dialog',\n {\n 'react-spectrum-ContextualHelp-dialog--isMobile': isMobile\n },\n classNames(\n styles,\n {\n 'spectrum-Menu-subdialog': !isMobile,\n [traySubmenuAnimation]: isMobile\n }\n )\n )\n },\n content: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-content']},\n footer: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-footer']}\n };\n }\n let [trigger] = React.Children.toArray(props.children);\n let [, content] = props.children as [ReactElement, ReactElement];\n\n let onBlurWithin = (e) => {\n if (e.relatedTarget && popoverRef.current && (!nodeContains(popoverRef.current.UNSAFE_getDOMNode(), e.relatedTarget) && !(e.relatedTarget === triggerRef.current && getInteractionModality() === 'pointer'))) {\n if (submenuTriggerState.isOpen) {\n submenuTriggerState.close();\n }\n }\n };\n\n let overlay;\n let tray;\n let onBackButtonPress = () => {\n setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n setTimeout(() => {\n submenuTriggerState.close();\n if (parentMenuRef.current && !nodeContains(parentMenuRef.current, document.activeElement)) {\n parentMenuRef.current.focus();\n }\n }, 220); // Matches transition duration\n };\n\n if (isMobile) {\n delete submenuTriggerProps.onBlur;\n delete submenuTriggerProps.onHoverChange;\n if (trayContainerRef.current && submenuTriggerState.isOpen) {\n let subDialogKeyDown: KeyboardEventHandler = (e) => {\n switch (e.key) {\n case 'Escape':\n e.stopPropagation();\n onBackButtonPress();\n break;\n }\n };\n\n tray = (\n <TrayHeaderWrapper\n isSubmenu\n parentMenuTreeState={state}\n rootMenuTriggerState={rootMenuTriggerState}\n wrapperKeyDown={subDialogKeyDown}\n onBackButtonPress={onBackButtonPress}>\n {content}\n </TrayHeaderWrapper>\n );\n\n overlay = ReactDOM.createPortal(tray, trayContainerRef.current);\n }\n } else {\n let onDismissButtonPress = () => {\n submenuTriggerState.close();\n parentMenuRef.current?.focus();\n };\n\n overlay = (\n <Popover\n {...popoverProps}\n UNSAFE_style={{clipPath: 'unset', overflow: 'visible', filter: 'unset', borderWidth: '0px'}}\n UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}\n onDismissButtonPress={onDismissButtonPress}\n onBlurWithin={onBlurWithin}\n container={popoverContainer!}\n state={submenuTriggerState}\n ref={popoverRef}\n triggerRef={triggerRef}\n placement=\"end top\"\n containerPadding={0}\n hideArrow\n enableBothDismissButtons>\n <FocusScope restoreFocus contain>\n {content}\n </FocusScope>\n </Popover>\n );\n }\n\n return (\n <>\n <SubmenuTriggerContext.Provider value={{isUnavailable, triggerRef, ...submenuTriggerProps}}>{trigger}</SubmenuTriggerContext.Provider>\n <SlotProvider slots={slots}>\n {submenuTriggerState.isOpen && overlay}\n </SlotProvider>\n </>\n );\n}\n\nContextualHelpTrigger.getCollectionNode = function* getCollectionNode<T>(props: ItemProps<T>) {\n let childArray: ReactElement[] = [];\n React.Children.forEach(props.children, child => {\n if (React.isValidElement(child)) {\n childArray.push(child);\n }\n });\n let [trigger] = childArray;\n let [, content] = props.children as [ReactElement, ReactElement];\n\n yield {\n element: React.cloneElement(trigger, {...trigger.props as any, hasChildItems: true, isTrigger: true}),\n wrapper: (element) => (\n <ContextualHelpTrigger key={element.key} targetKey={element.key} {...props}>\n {element}\n {content}\n </ContextualHelpTrigger>\n )\n };\n};\n\nlet _Item = ContextualHelpTrigger as unknown as (props: SpectrumMenuDialogTriggerProps) => JSX.Element;\nexport {_Item as ContextualHelpTrigger};\n"],"names":[],"version":3,"file":"ContextualHelpTrigger.module.js.map"}
|
|
@@ -55,7 +55,7 @@ function $86ed235c4695ff3f$var$SubmenuTrigger(props) {
|
|
|
55
55
|
let isMobile = (0, $esjnM$reactspectrumutils.useIsMobileDevice)();
|
|
56
56
|
let onBackButtonPress = ()=>{
|
|
57
57
|
submenuTriggerState.close();
|
|
58
|
-
if (parentMenuRef.current && !parentMenuRef.current
|
|
58
|
+
if (parentMenuRef.current && !(0, $esjnM$reactariautils.nodeContains)(parentMenuRef.current, document.activeElement)) parentMenuRef.current.focus();
|
|
59
59
|
};
|
|
60
60
|
let { direction: direction } = (0, $esjnM$reactariai18n.useLocale)();
|
|
61
61
|
let mobileSubmenuKeyDown = (e)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAwBD,SAAS,qCAAe,KAA0B;IAChD,IAAI,aAAa,CAAA,GAAA,mBAAK,EAAkB;IACxC,IAAI,YACF,QAAQ,aACR,SAAS,EACV,GAAG;IAEJ,IAAI,CAAC,aAAa,KAAK,GAAG,CAAA,GAAA,sCAAI,EAAE,QAAQ,CAAC,OAAO,CAAC;IACjD,IAAI,oBAAC,gBAAgB,oBAAE,gBAAgB,EAAE,MAAM,aAAa,EAAE,SAAS,OAAO,wBAAE,oBAAoB,EAAC,GAAG,CAAA,GAAA,6CAAkB;IAC1H,IAAI,sBAAsB,CAAA,GAAA,8CAAqB,EAAE;QAAC,YAAY;IAAS,GAAG;IAC1E,IAAI,uBAAC,mBAAmB,gBAAE,YAAY,gBAAE,YAAY,EAAC,GAAG,CAAA,GAAA,sCAAgB,EAAE;uBACxE;QACA,YAAY;IACd,GAAG,qBAAqB;IACxB,IAAI,WAAW,CAAA,GAAA,2CAAgB;IAC/B,IAAI,oBAAoB;QACtB,oBAAoB,KAAK;QACzB,IAAI,cAAc,OAAO,IAAI,CAAC,cAAc,OAAO,
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/menu/src/SubmenuTrigger.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {classNames, useIsMobileDevice} from '@react-spectrum/utils';\nimport {Key} from '@react-types/shared';\nimport {MenuContext, SubmenuTriggerContext, useMenuStateContext} from './context';\nimport {mergeProps, nodeContains} from '@react-aria/utils';\nimport {Popover} from './Popover';\nimport React, {type JSX, ReactElement, useRef} from 'react';\nimport ReactDOM from 'react-dom';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSubmenuTrigger} from '@react-aria/menu';\nimport {useSubmenuTriggerState} from '@react-stately/menu';\n\ninterface SubmenuTriggerProps {\n /**\n * The contents of the SubmenuTrigger - an Item and a Menu.\n */\n children: ReactElement<any>[],\n targetKey: Key\n}\n\nexport interface SpectrumSubmenuTriggerProps extends Omit<SubmenuTriggerProps, 'targetKey'> {}\n\nfunction SubmenuTrigger(props: SubmenuTriggerProps) {\n let triggerRef = useRef<HTMLDivElement>(null);\n let {\n children,\n targetKey\n } = props;\n\n let [menuTrigger, menu] = React.Children.toArray(children);\n let {popoverContainer, trayContainerRef, menu: parentMenuRef, submenu: menuRef, rootMenuTriggerState} = useMenuStateContext()!;\n let submenuTriggerState = useSubmenuTriggerState({triggerKey: targetKey}, rootMenuTriggerState!);\n let {submenuTriggerProps, submenuProps, popoverProps} = useSubmenuTrigger({\n parentMenuRef,\n submenuRef: menuRef\n }, submenuTriggerState, triggerRef);\n let isMobile = useIsMobileDevice();\n let onBackButtonPress = () => {\n submenuTriggerState.close();\n if (parentMenuRef.current && !nodeContains(parentMenuRef.current, document.activeElement)) {\n parentMenuRef.current.focus();\n }\n };\n\n let {direction} = useLocale();\n let mobileSubmenuKeyDown = (e: KeyboardEvent) => {\n switch (e.key) {\n case 'ArrowLeft':\n if (direction === 'ltr') {\n triggerRef.current?.focus();\n }\n break;\n case 'ArrowRight':\n if (direction === 'rtl') {\n triggerRef.current?.focus();\n }\n break;\n }\n };\n\n let overlay;\n\n if (isMobile) {\n delete submenuTriggerProps.onBlur;\n delete submenuTriggerProps.onHoverChange;\n submenuProps.autoFocus ??= true;\n if (trayContainerRef.current && submenuTriggerState.isOpen) {\n overlay = ReactDOM.createPortal(menu, trayContainerRef.current);\n }\n } else {\n let onDismissButtonPress = () => {\n submenuTriggerState.close();\n parentMenuRef.current?.focus();\n };\n\n overlay = (\n <Popover\n {...popoverProps}\n onDismissButtonPress={onDismissButtonPress}\n UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}\n container={popoverContainer!}\n containerPadding={0}\n enableBothDismissButtons\n UNSAFE_style={{clipPath: 'unset', overflow: 'visible', borderWidth: '0px'}}\n state={submenuTriggerState}\n triggerRef={triggerRef}\n scrollRef={menuRef}\n placement=\"end top\"\n hideArrow>\n {menu}\n </Popover>\n );\n }\n\n let menuContext = {\n ...mergeProps(submenuProps, {\n ref: menuRef,\n UNSAFE_style: isMobile ? {\n width: '100%',\n maxHeight: 'inherit'\n } : undefined,\n UNSAFE_className: classNames(styles, {'spectrum-Menu-popover': !isMobile}),\n ...(isMobile && {\n onBackButtonPress,\n onKeyDown: mobileSubmenuKeyDown\n })\n })\n };\n\n return (\n <>\n <SubmenuTriggerContext.Provider value={{triggerRef, ...submenuTriggerProps}}>{menuTrigger}</SubmenuTriggerContext.Provider>\n <MenuContext.Provider value={menuContext}>\n {overlay}\n </MenuContext.Provider>\n </>\n );\n}\n\nSubmenuTrigger.getCollectionNode = function* (props: SpectrumSubmenuTriggerProps) {\n let childArray: ReactElement[] = [];\n React.Children.forEach(props.children, child => {\n if (React.isValidElement(child)) {\n childArray.push(child);\n }\n });\n let [trigger] = childArray;\n let [, content] = props.children as [ReactElement, ReactElement];\n\n yield {\n element: React.cloneElement(trigger, {...trigger.props as any, hasChildItems: true, isTrigger: true}),\n wrapper: (element) => (\n <SubmenuTrigger key={element.key} targetKey={element.key} {...props}>\n {element}\n {content}\n </SubmenuTrigger>\n )\n };\n};\n\nlet _SubmenuTrigger = SubmenuTrigger as unknown as (props: SpectrumSubmenuTriggerProps) => JSX.Element;\nexport {_SubmenuTrigger as SubmenuTrigger};\n"],"names":[],"version":3,"file":"SubmenuTrigger.main.js.map"}
|
package/dist/SubmenuTrigger.mjs
CHANGED
|
@@ -3,7 +3,7 @@ import {Popover as $bf810f3fb07f8592$export$5b6b19405a83ff9d} from "./Popover.mj
|
|
|
3
3
|
import "./menu.2ec1fdaf.css";
|
|
4
4
|
import $byZ4r$menu_vars_cssmodulejs from "./menu_vars_css.mjs";
|
|
5
5
|
import {useIsMobileDevice as $byZ4r$useIsMobileDevice, classNames as $byZ4r$classNames} from "@react-spectrum/utils";
|
|
6
|
-
import {mergeProps as $byZ4r$mergeProps} from "@react-aria/utils";
|
|
6
|
+
import {nodeContains as $byZ4r$nodeContains, mergeProps as $byZ4r$mergeProps} from "@react-aria/utils";
|
|
7
7
|
import $byZ4r$react, {useRef as $byZ4r$useRef} from "react";
|
|
8
8
|
import $byZ4r$reactdom from "react-dom";
|
|
9
9
|
import {useLocale as $byZ4r$useLocale} from "@react-aria/i18n";
|
|
@@ -49,7 +49,7 @@ function $3f13e15cf95c3893$var$SubmenuTrigger(props) {
|
|
|
49
49
|
let isMobile = (0, $byZ4r$useIsMobileDevice)();
|
|
50
50
|
let onBackButtonPress = ()=>{
|
|
51
51
|
submenuTriggerState.close();
|
|
52
|
-
if (parentMenuRef.current && !parentMenuRef.current
|
|
52
|
+
if (parentMenuRef.current && !(0, $byZ4r$nodeContains)(parentMenuRef.current, document.activeElement)) parentMenuRef.current.focus();
|
|
53
53
|
};
|
|
54
54
|
let { direction: direction } = (0, $byZ4r$useLocale)();
|
|
55
55
|
let mobileSubmenuKeyDown = (e)=>{
|
|
@@ -3,7 +3,7 @@ import {Popover as $bf810f3fb07f8592$export$5b6b19405a83ff9d} from "./Popover.mo
|
|
|
3
3
|
import "./menu.2ec1fdaf.css";
|
|
4
4
|
import $byZ4r$menu_vars_cssmodulejs from "./menu_vars_css.module.js";
|
|
5
5
|
import {useIsMobileDevice as $byZ4r$useIsMobileDevice, classNames as $byZ4r$classNames} from "@react-spectrum/utils";
|
|
6
|
-
import {mergeProps as $byZ4r$mergeProps} from "@react-aria/utils";
|
|
6
|
+
import {nodeContains as $byZ4r$nodeContains, mergeProps as $byZ4r$mergeProps} from "@react-aria/utils";
|
|
7
7
|
import $byZ4r$react, {useRef as $byZ4r$useRef} from "react";
|
|
8
8
|
import $byZ4r$reactdom from "react-dom";
|
|
9
9
|
import {useLocale as $byZ4r$useLocale} from "@react-aria/i18n";
|
|
@@ -49,7 +49,7 @@ function $3f13e15cf95c3893$var$SubmenuTrigger(props) {
|
|
|
49
49
|
let isMobile = (0, $byZ4r$useIsMobileDevice)();
|
|
50
50
|
let onBackButtonPress = ()=>{
|
|
51
51
|
submenuTriggerState.close();
|
|
52
|
-
if (parentMenuRef.current && !parentMenuRef.current
|
|
52
|
+
if (parentMenuRef.current && !(0, $byZ4r$nodeContains)(parentMenuRef.current, document.activeElement)) parentMenuRef.current.focus();
|
|
53
53
|
};
|
|
54
54
|
let { direction: direction } = (0, $byZ4r$useLocale)();
|
|
55
55
|
let mobileSubmenuKeyDown = (e)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAwBD,SAAS,qCAAe,KAA0B;IAChD,IAAI,aAAa,CAAA,GAAA,aAAK,EAAkB;IACxC,IAAI,YACF,QAAQ,aACR,SAAS,EACV,GAAG;IAEJ,IAAI,CAAC,aAAa,KAAK,GAAG,CAAA,GAAA,YAAI,EAAE,QAAQ,CAAC,OAAO,CAAC;IACjD,IAAI,oBAAC,gBAAgB,oBAAE,gBAAgB,EAAE,MAAM,aAAa,EAAE,SAAS,OAAO,wBAAE,oBAAoB,EAAC,GAAG,CAAA,GAAA,yCAAkB;IAC1H,IAAI,sBAAsB,CAAA,GAAA,6BAAqB,EAAE;QAAC,YAAY;IAAS,GAAG;IAC1E,IAAI,uBAAC,mBAAmB,gBAAE,YAAY,gBAAE,YAAY,EAAC,GAAG,CAAA,GAAA,wBAAgB,EAAE;uBACxE;QACA,YAAY;IACd,GAAG,qBAAqB;IACxB,IAAI,WAAW,CAAA,GAAA,wBAAgB;IAC/B,IAAI,oBAAoB;QACtB,oBAAoB,KAAK;QACzB,IAAI,cAAc,OAAO,IAAI,CAAC,cAAc,OAAO,
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/menu/src/SubmenuTrigger.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {classNames, useIsMobileDevice} from '@react-spectrum/utils';\nimport {Key} from '@react-types/shared';\nimport {MenuContext, SubmenuTriggerContext, useMenuStateContext} from './context';\nimport {mergeProps, nodeContains} from '@react-aria/utils';\nimport {Popover} from './Popover';\nimport React, {type JSX, ReactElement, useRef} from 'react';\nimport ReactDOM from 'react-dom';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSubmenuTrigger} from '@react-aria/menu';\nimport {useSubmenuTriggerState} from '@react-stately/menu';\n\ninterface SubmenuTriggerProps {\n /**\n * The contents of the SubmenuTrigger - an Item and a Menu.\n */\n children: ReactElement<any>[],\n targetKey: Key\n}\n\nexport interface SpectrumSubmenuTriggerProps extends Omit<SubmenuTriggerProps, 'targetKey'> {}\n\nfunction SubmenuTrigger(props: SubmenuTriggerProps) {\n let triggerRef = useRef<HTMLDivElement>(null);\n let {\n children,\n targetKey\n } = props;\n\n let [menuTrigger, menu] = React.Children.toArray(children);\n let {popoverContainer, trayContainerRef, menu: parentMenuRef, submenu: menuRef, rootMenuTriggerState} = useMenuStateContext()!;\n let submenuTriggerState = useSubmenuTriggerState({triggerKey: targetKey}, rootMenuTriggerState!);\n let {submenuTriggerProps, submenuProps, popoverProps} = useSubmenuTrigger({\n parentMenuRef,\n submenuRef: menuRef\n }, submenuTriggerState, triggerRef);\n let isMobile = useIsMobileDevice();\n let onBackButtonPress = () => {\n submenuTriggerState.close();\n if (parentMenuRef.current && !nodeContains(parentMenuRef.current, document.activeElement)) {\n parentMenuRef.current.focus();\n }\n };\n\n let {direction} = useLocale();\n let mobileSubmenuKeyDown = (e: KeyboardEvent) => {\n switch (e.key) {\n case 'ArrowLeft':\n if (direction === 'ltr') {\n triggerRef.current?.focus();\n }\n break;\n case 'ArrowRight':\n if (direction === 'rtl') {\n triggerRef.current?.focus();\n }\n break;\n }\n };\n\n let overlay;\n\n if (isMobile) {\n delete submenuTriggerProps.onBlur;\n delete submenuTriggerProps.onHoverChange;\n submenuProps.autoFocus ??= true;\n if (trayContainerRef.current && submenuTriggerState.isOpen) {\n overlay = ReactDOM.createPortal(menu, trayContainerRef.current);\n }\n } else {\n let onDismissButtonPress = () => {\n submenuTriggerState.close();\n parentMenuRef.current?.focus();\n };\n\n overlay = (\n <Popover\n {...popoverProps}\n onDismissButtonPress={onDismissButtonPress}\n UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}\n container={popoverContainer!}\n containerPadding={0}\n enableBothDismissButtons\n UNSAFE_style={{clipPath: 'unset', overflow: 'visible', borderWidth: '0px'}}\n state={submenuTriggerState}\n triggerRef={triggerRef}\n scrollRef={menuRef}\n placement=\"end top\"\n hideArrow>\n {menu}\n </Popover>\n );\n }\n\n let menuContext = {\n ...mergeProps(submenuProps, {\n ref: menuRef,\n UNSAFE_style: isMobile ? {\n width: '100%',\n maxHeight: 'inherit'\n } : undefined,\n UNSAFE_className: classNames(styles, {'spectrum-Menu-popover': !isMobile}),\n ...(isMobile && {\n onBackButtonPress,\n onKeyDown: mobileSubmenuKeyDown\n })\n })\n };\n\n return (\n <>\n <SubmenuTriggerContext.Provider value={{triggerRef, ...submenuTriggerProps}}>{menuTrigger}</SubmenuTriggerContext.Provider>\n <MenuContext.Provider value={menuContext}>\n {overlay}\n </MenuContext.Provider>\n </>\n );\n}\n\nSubmenuTrigger.getCollectionNode = function* (props: SpectrumSubmenuTriggerProps) {\n let childArray: ReactElement[] = [];\n React.Children.forEach(props.children, child => {\n if (React.isValidElement(child)) {\n childArray.push(child);\n }\n });\n let [trigger] = childArray;\n let [, content] = props.children as [ReactElement, ReactElement];\n\n yield {\n element: React.cloneElement(trigger, {...trigger.props as any, hasChildItems: true, isTrigger: true}),\n wrapper: (element) => (\n <SubmenuTrigger key={element.key} targetKey={element.key} {...props}>\n {element}\n {content}\n </SubmenuTrigger>\n )\n };\n};\n\nlet _SubmenuTrigger = SubmenuTrigger as unknown as (props: SpectrumSubmenuTriggerProps) => JSX.Element;\nexport {_SubmenuTrigger as SubmenuTrigger};\n"],"names":[],"version":3,"file":"SubmenuTrigger.module.js.map"}
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;ACwBA;;;GAGG;AACH,OAAO,MAAM,sHAgGX,CAAC;AOpGH;IACE;;OAEG;IACH,QAAQ,EAAE,aAAa,GAAG,CAAC,EAAE,CAAC;IAC9B,SAAS,EAAE,GAAG,CAAA;CACf;AAED,4CAA6C,SAAQ,IAAI,CAAC,mBAAmB,EAAE,WAAW,CAAC;CAAG;AAwH9F,OAAA,IAAI,gBAA+C,CAAC,KAAK,EAAE,2BAA2B,KAAK,IAAI,OAAO,CAAC;AGzHvG;;GAEG;AAGH,OAAO,MAAM,MAyFP,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,OAAO,cAAc,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;ACpGxF;;GAEG;AACH,OAAO,MAAM,YA6BP,CAAC,CAAC,EAAE,KAAK,EAAE,wBAAwB,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,aAAa,iBAAiB,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;
|
|
1
|
+
{"mappings":";;;ACwBA;;;GAGG;AACH,OAAO,MAAM,sHAgGX,CAAC;AOpGH;IACE;;OAEG;IACH,QAAQ,EAAE,aAAa,GAAG,CAAC,EAAE,CAAC;IAC9B,SAAS,EAAE,GAAG,CAAA;CACf;AAED,4CAA6C,SAAQ,IAAI,CAAC,mBAAmB,EAAE,WAAW,CAAC;CAAG;AAwH9F,OAAA,IAAI,gBAA+C,CAAC,KAAK,EAAE,2BAA2B,KAAK,IAAI,OAAO,CAAC;AGzHvG;;GAEG;AAGH,OAAO,MAAM,MAyFP,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,OAAO,cAAc,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;ACpGxF;;GAEG;AACH,OAAO,MAAM,YA6BP,CAAC,CAAC,EAAE,KAAK,EAAE,wBAAwB,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,aAAa,iBAAiB,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;AC9BvG;IACE,sDAAsD;IACtD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wDAAwD;IACxD,QAAQ,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAA;CACvC;AAMD,+CAAgD,SAAQ,sBAAsB;CAAG;AA0JjF,OAAA,IAAI,uBAA4C,CAAC,KAAK,EAAE,8BAA8B,KAAK,IAAI,OAAO,CAAC;AC7KvG,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,4BAA4B,CAAC;AACzD,YAAY,EAAC,uBAAuB,EAAE,iBAAiB,EAAE,wBAAwB,EAAC,MAAM,mBAAmB,CAAC","sources":["packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/context.ts","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/MenuTrigger.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/Underlay.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/calculatePosition.ts","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/useCloseOnScroll.ts","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/useOverlayPosition.ts","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/usePopover.ts","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/Popover.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/SubmenuTrigger.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/MenuItem.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/MenuSection.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/Menu.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/ActionMenu.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/index.ts","packages/@react-spectrum/menu/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,"/*\n * Copyright 2020 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\n/// <reference types=\"css-module-types\" />\n\nexport {MenuTrigger} from './MenuTrigger';\nexport {SubmenuTrigger} from './SubmenuTrigger';\nexport {Menu} from './Menu';\nexport {ActionMenu} from './ActionMenu';\nexport {ContextualHelpTrigger} from './ContextualHelpTrigger';\nexport {Item, Section} from '@react-stately/collections';\nexport type {SpectrumActionMenuProps, SpectrumMenuProps, SpectrumMenuTriggerProps} from '@react-types/menu';\nexport type {SpectrumMenuDialogTriggerProps} from './ContextualHelpTrigger';\nexport type {SpectrumSubmenuTriggerProps} from './SubmenuTrigger';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
var $7oo9n$reactariautils = require("@react-aria/utils");
|
|
1
2
|
var $7oo9n$react = require("react");
|
|
2
3
|
|
|
3
4
|
|
|
@@ -17,6 +18,7 @@ $parcel$export(module.exports, "useCloseOnScroll", () => $acb28858babbe848$expor
|
|
|
17
18
|
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
18
19
|
* governing permissions and limitations under the License.
|
|
19
20
|
*/
|
|
21
|
+
|
|
20
22
|
const $acb28858babbe848$export$f6211563215e3b37 = new WeakMap();
|
|
21
23
|
function $acb28858babbe848$export$18fc8428861184da(opts) {
|
|
22
24
|
let { triggerRef: triggerRef, isOpen: isOpen, onClose: onClose } = opts;
|
|
@@ -26,7 +28,7 @@ function $acb28858babbe848$export$18fc8428861184da(opts) {
|
|
|
26
28
|
// Ignore if scrolling an scrollable region outside the trigger's tree.
|
|
27
29
|
let target = e.target;
|
|
28
30
|
// window is not a Node and doesn't have contain, but window contains everything
|
|
29
|
-
if (!triggerRef.current || target instanceof Node && !
|
|
31
|
+
if (!triggerRef.current || target instanceof Node && !(0, $7oo9n$reactariautils.nodeContains)(target, triggerRef.current)) return;
|
|
30
32
|
// Ignore scroll events on any input or textarea as the cursor position can cause it to scroll
|
|
31
33
|
// such as in a combobox. Clicking the dropdown button places focus on the input, and if the
|
|
32
34
|
// text inside the input extends beyond the 'end', then it will scroll so the cursor is visible at the end.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;AAWM,MAAM,4CAA2C,IAAI;AASrD,SAAS,0CAAiB,IAA0B;IACzD,IAAI,cAAC,UAAU,UAAE,MAAM,WAAE,OAAO,EAAC,GAAG;IAEpC,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,CAAC,UAAU,YAAY,MACzB;QAGF,IAAI,WAAW,CAAC;YACd,uEAAuE;YACvE,IAAI,SAAS,EAAE,MAAM;YACrB,gFAAgF;YAChF,IAAI,CAAC,WAAW,OAAO,IAAK,AAAC,kBAAkB,QAAS,CAAC,CAAA,GAAA,kCAAW,EAAE,QAAQ,WAAW,OAAO,GAC9F;YAGF,8FAA8F;YAC9F,4FAA4F;YAC5F,2GAA2G;YAC3G,IAAI,EAAE,MAAM,YAAY,oBAAoB,EAAE,MAAM,YAAY,qBAC9D;YAGF,IAAI,iBAAiB,WAAW,0CAAW,GAAG,CAAC,WAAW,OAAO;YACjE,IAAI,gBACF;QAEJ;QAEA,OAAO,gBAAgB,CAAC,UAAU,UAAU;QAC5C,OAAO;YACL,OAAO,mBAAmB,CAAC,UAAU,UAAU;QACjD;IACF,GAAG;QAAC;QAAQ;QAAS;KAAW;AAClC","sources":["packages/@react-spectrum/menu/src/useCloseOnScroll.ts"],"sourcesContent":["/*\n * Copyright 2020 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 {nodeContains} from '@react-aria/utils';\nimport {RefObject} from '@react-types/shared';\nimport {useEffect} from 'react';\n\n// This behavior moved from useOverlayTrigger to useOverlayPosition.\n// For backward compatibility, where useOverlayTrigger handled hiding the popover on close,\n// it sets a close function here mapped from the trigger element. This way we can avoid\n// forcing users to pass an onClose function to useOverlayPosition which could be considered\n// a breaking change.\nexport const onCloseMap: WeakMap<Element, () => void> = new WeakMap();\n\ninterface CloseOnScrollOptions {\n triggerRef: RefObject<Element | null>,\n isOpen?: boolean,\n onClose?: (() => void) | null\n}\n\n/** @private */\nexport function useCloseOnScroll(opts: CloseOnScrollOptions): void {\n let {triggerRef, isOpen, onClose} = opts;\n\n useEffect(() => {\n if (!isOpen || onClose === null) {\n return;\n }\n\n let onScroll = (e: Event) => {\n // Ignore if scrolling an scrollable region outside the trigger's tree.\n let target = e.target;\n // window is not a Node and doesn't have contain, but window contains everything\n if (!triggerRef.current || ((target instanceof Node) && !nodeContains(target, triggerRef.current))) {\n return;\n }\n\n // Ignore scroll events on any input or textarea as the cursor position can cause it to scroll\n // such as in a combobox. Clicking the dropdown button places focus on the input, and if the\n // text inside the input extends beyond the 'end', then it will scroll so the cursor is visible at the end.\n if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {\n return;\n }\n\n let onCloseHandler = onClose || onCloseMap.get(triggerRef.current);\n if (onCloseHandler) {\n onCloseHandler();\n }\n };\n\n window.addEventListener('scroll', onScroll, true);\n return () => {\n window.removeEventListener('scroll', onScroll, true);\n };\n }, [isOpen, onClose, triggerRef]);\n}\n"],"names":[],"version":3,"file":"useCloseOnScroll.main.js.map"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import {nodeContains as $3WF3e$nodeContains} from "@react-aria/utils";
|
|
1
2
|
import {useEffect as $3WF3e$useEffect} from "react";
|
|
2
3
|
|
|
3
4
|
/*
|
|
@@ -11,6 +12,7 @@ import {useEffect as $3WF3e$useEffect} from "react";
|
|
|
11
12
|
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
12
13
|
* governing permissions and limitations under the License.
|
|
13
14
|
*/
|
|
15
|
+
|
|
14
16
|
const $ca3b77875a5017bc$export$f6211563215e3b37 = new WeakMap();
|
|
15
17
|
function $ca3b77875a5017bc$export$18fc8428861184da(opts) {
|
|
16
18
|
let { triggerRef: triggerRef, isOpen: isOpen, onClose: onClose } = opts;
|
|
@@ -20,7 +22,7 @@ function $ca3b77875a5017bc$export$18fc8428861184da(opts) {
|
|
|
20
22
|
// Ignore if scrolling an scrollable region outside the trigger's tree.
|
|
21
23
|
let target = e.target;
|
|
22
24
|
// window is not a Node and doesn't have contain, but window contains everything
|
|
23
|
-
if (!triggerRef.current || target instanceof Node && !target
|
|
25
|
+
if (!triggerRef.current || target instanceof Node && !(0, $3WF3e$nodeContains)(target, triggerRef.current)) return;
|
|
24
26
|
// Ignore scroll events on any input or textarea as the cursor position can cause it to scroll
|
|
25
27
|
// such as in a combobox. Clicking the dropdown button places focus on the input, and if the
|
|
26
28
|
// text inside the input extends beyond the 'end', then it will scroll so the cursor is visible at the end.
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import {nodeContains as $3WF3e$nodeContains} from "@react-aria/utils";
|
|
1
2
|
import {useEffect as $3WF3e$useEffect} from "react";
|
|
2
3
|
|
|
3
4
|
/*
|
|
@@ -11,6 +12,7 @@ import {useEffect as $3WF3e$useEffect} from "react";
|
|
|
11
12
|
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
12
13
|
* governing permissions and limitations under the License.
|
|
13
14
|
*/
|
|
15
|
+
|
|
14
16
|
const $ca3b77875a5017bc$export$f6211563215e3b37 = new WeakMap();
|
|
15
17
|
function $ca3b77875a5017bc$export$18fc8428861184da(opts) {
|
|
16
18
|
let { triggerRef: triggerRef, isOpen: isOpen, onClose: onClose } = opts;
|
|
@@ -20,7 +22,7 @@ function $ca3b77875a5017bc$export$18fc8428861184da(opts) {
|
|
|
20
22
|
// Ignore if scrolling an scrollable region outside the trigger's tree.
|
|
21
23
|
let target = e.target;
|
|
22
24
|
// window is not a Node and doesn't have contain, but window contains everything
|
|
23
|
-
if (!triggerRef.current || target instanceof Node && !target
|
|
25
|
+
if (!triggerRef.current || target instanceof Node && !(0, $3WF3e$nodeContains)(target, triggerRef.current)) return;
|
|
24
26
|
// Ignore scroll events on any input or textarea as the cursor position can cause it to scroll
|
|
25
27
|
// such as in a combobox. Clicking the dropdown button places focus on the input, and if the
|
|
26
28
|
// text inside the input extends beyond the 'end', then it will scroll so the cursor is visible at the end.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":";;;AAAA;;;;;;;;;;CAUC;;AAWM,MAAM,4CAA2C,IAAI;AASrD,SAAS,0CAAiB,IAA0B;IACzD,IAAI,cAAC,UAAU,UAAE,MAAM,WAAE,OAAO,EAAC,GAAG;IAEpC,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,CAAC,UAAU,YAAY,MACzB;QAGF,IAAI,WAAW,CAAC;YACd,uEAAuE;YACvE,IAAI,SAAS,EAAE,MAAM;YACrB,gFAAgF;YAChF,IAAI,CAAC,WAAW,OAAO,IAAK,AAAC,kBAAkB,QAAS,CAAC,CAAA,GAAA,mBAAW,EAAE,QAAQ,WAAW,OAAO,GAC9F;YAGF,8FAA8F;YAC9F,4FAA4F;YAC5F,2GAA2G;YAC3G,IAAI,EAAE,MAAM,YAAY,oBAAoB,EAAE,MAAM,YAAY,qBAC9D;YAGF,IAAI,iBAAiB,WAAW,0CAAW,GAAG,CAAC,WAAW,OAAO;YACjE,IAAI,gBACF;QAEJ;QAEA,OAAO,gBAAgB,CAAC,UAAU,UAAU;QAC5C,OAAO;YACL,OAAO,mBAAmB,CAAC,UAAU,UAAU;QACjD;IACF,GAAG;QAAC;QAAQ;QAAS;KAAW;AAClC","sources":["packages/@react-spectrum/menu/src/useCloseOnScroll.ts"],"sourcesContent":["/*\n * Copyright 2020 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 {nodeContains} from '@react-aria/utils';\nimport {RefObject} from '@react-types/shared';\nimport {useEffect} from 'react';\n\n// This behavior moved from useOverlayTrigger to useOverlayPosition.\n// For backward compatibility, where useOverlayTrigger handled hiding the popover on close,\n// it sets a close function here mapped from the trigger element. This way we can avoid\n// forcing users to pass an onClose function to useOverlayPosition which could be considered\n// a breaking change.\nexport const onCloseMap: WeakMap<Element, () => void> = new WeakMap();\n\ninterface CloseOnScrollOptions {\n triggerRef: RefObject<Element | null>,\n isOpen?: boolean,\n onClose?: (() => void) | null\n}\n\n/** @private */\nexport function useCloseOnScroll(opts: CloseOnScrollOptions): void {\n let {triggerRef, isOpen, onClose} = opts;\n\n useEffect(() => {\n if (!isOpen || onClose === null) {\n return;\n }\n\n let onScroll = (e: Event) => {\n // Ignore if scrolling an scrollable region outside the trigger's tree.\n let target = e.target;\n // window is not a Node and doesn't have contain, but window contains everything\n if (!triggerRef.current || ((target instanceof Node) && !nodeContains(target, triggerRef.current))) {\n return;\n }\n\n // Ignore scroll events on any input or textarea as the cursor position can cause it to scroll\n // such as in a combobox. Clicking the dropdown button places focus on the input, and if the\n // text inside the input extends beyond the 'end', then it will scroll so the cursor is visible at the end.\n if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {\n return;\n }\n\n let onCloseHandler = onClose || onCloseMap.get(triggerRef.current);\n if (onCloseHandler) {\n onCloseHandler();\n }\n };\n\n window.addEventListener('scroll', onScroll, true);\n return () => {\n window.removeEventListener('scroll', onScroll, true);\n };\n }, [isOpen, onClose, triggerRef]);\n}\n"],"names":[],"version":3,"file":"useCloseOnScroll.module.js.map"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
var $404994fca17f0d46$exports = require("./calculatePosition.main.js");
|
|
2
2
|
var $acb28858babbe848$exports = require("./useCloseOnScroll.main.js");
|
|
3
|
-
var $jkbw0$react = require("react");
|
|
4
3
|
var $jkbw0$reactariautils = require("@react-aria/utils");
|
|
4
|
+
var $jkbw0$react = require("react");
|
|
5
5
|
var $jkbw0$reactariai18n = require("@react-aria/i18n");
|
|
6
6
|
|
|
7
7
|
|
|
@@ -65,7 +65,7 @@ function $29af923830236f61$export$d39e1813b3bdd0e1(props) {
|
|
|
65
65
|
// so it can be restored after repositioning. This way if the overlay height
|
|
66
66
|
// changes, the focused element appears to stay in the same position.
|
|
67
67
|
let anchor = null;
|
|
68
|
-
if (scrollRef.current && scrollRef.current
|
|
68
|
+
if (scrollRef.current && (0, $jkbw0$reactariautils.nodeContains)(scrollRef.current, document.activeElement)) {
|
|
69
69
|
var _document_activeElement;
|
|
70
70
|
let anchorRect = (_document_activeElement = document.activeElement) === null || _document_activeElement === void 0 ? void 0 : _document_activeElement.getBoundingClientRect();
|
|
71
71
|
let scrollRect = scrollRef.current.getBoundingClientRect();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/menu/src/useOverlayPosition.ts"],"sourcesContent":["/*\n * Copyright 2020 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 {calculatePosition, getRect, PositionResult} from './calculatePosition';\nimport {DOMAttributes, RefObject} from '@react-types/shared';\nimport {Placement, PlacementAxis, PositionProps} from '@react-types/overlays';\nimport {useCallback, useEffect, useRef, useState} from 'react';\nimport {useCloseOnScroll} from './useCloseOnScroll';\nimport {useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface AriaPositionProps extends PositionProps {\n /**\n * Cross size of the overlay arrow in pixels.\n * @default 0\n */\n arrowSize?: number,\n /**\n * Element that that serves as the positioning boundary.\n * @default document.body\n */\n boundaryElement?: Element,\n /**\n * The ref for the element which the overlay positions itself with respect to.\n */\n targetRef: RefObject<Element | null>,\n /**\n * The ref for the overlay element.\n */\n overlayRef: RefObject<Element | null>,\n /**\n * The ref for the arrow element.\n */\n arrowRef?: RefObject<Element | null>,\n /**\n * A ref for the scrollable region within the overlay.\n * @default overlayRef\n */\n scrollRef?: RefObject<Element | null>,\n /**\n * Whether the overlay should update its position automatically.\n * @default true\n */\n shouldUpdatePosition?: boolean,\n /** Handler that is called when the overlay should close. */\n onClose?: (() => void) | null,\n /**\n * The maxHeight specified for the overlay element.\n * By default, it will take all space up to the current viewport height.\n */\n maxHeight?: number,\n /**\n * The minimum distance the arrow's edge should be from the edge of the overlay element.\n * @default 0\n */\n arrowBoundaryOffset?: number\n}\n\nexport interface PositionAria {\n /** Props for the overlay container element. */\n overlayProps: DOMAttributes,\n /** Props for the overlay tip arrow if any. */\n arrowProps: DOMAttributes,\n /** Placement of the overlay with respect to the overlay trigger. */\n placement: PlacementAxis | null,\n /** The origin of the target in the overlay's coordinate system. Useful for animations. */\n triggerAnchorPoint: {x: number, y: number} | null,\n /** Updates the position of the overlay. */\n updatePosition(): void\n}\n\ninterface ScrollAnchor {\n type: 'top' | 'bottom',\n offset: number\n}\n\nlet visualViewport = typeof document !== 'undefined' ? window.visualViewport : null;\n\n/**\n * Handles positioning overlays like popovers and menus relative to a trigger\n * element, and updating the position when the window resizes.\n */\nexport function useOverlayPosition(props: AriaPositionProps): PositionAria {\n let {direction} = useLocale();\n let {\n arrowSize,\n targetRef,\n overlayRef,\n arrowRef,\n scrollRef = overlayRef,\n placement = 'bottom' as Placement,\n containerPadding = 12,\n shouldFlip = true,\n boundaryElement = typeof document !== 'undefined' ? document.body : null,\n offset = 0,\n crossOffset = 0,\n shouldUpdatePosition = true,\n isOpen = true,\n onClose,\n maxHeight,\n arrowBoundaryOffset = 0\n } = props;\n let [position, setPosition] = useState<PositionResult | null>(null);\n\n let deps = [\n shouldUpdatePosition,\n placement,\n overlayRef.current,\n targetRef.current,\n arrowRef?.current,\n scrollRef.current,\n containerPadding,\n shouldFlip,\n boundaryElement,\n offset,\n crossOffset,\n isOpen,\n direction,\n maxHeight,\n arrowBoundaryOffset,\n arrowSize\n ];\n\n // Note, the position freezing breaks if body sizes itself dynamicly with the visual viewport but that might\n // just be a non-realistic use case\n // Upon opening a overlay, record the current visual viewport scale so we can freeze the overlay styles\n let lastScale = useRef(visualViewport?.scale);\n useEffect(() => {\n if (isOpen) {\n lastScale.current = visualViewport?.scale;\n }\n }, [isOpen]);\n\n let updatePosition = useCallback(() => {\n if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !boundaryElement) {\n return;\n }\n\n if (visualViewport?.scale !== lastScale.current) {\n return;\n }\n\n // Determine a scroll anchor based on the focused element.\n // This stores the offset of the anchor element from the scroll container\n // so it can be restored after repositioning. This way if the overlay height\n // changes, the focused element appears to stay in the same position.\n let anchor: ScrollAnchor | null = null;\n if (scrollRef.current && scrollRef.current.contains(document.activeElement)) {\n let anchorRect = document.activeElement?.getBoundingClientRect();\n let scrollRect = scrollRef.current.getBoundingClientRect();\n // Anchor from the top if the offset is in the top half of the scrollable element,\n // otherwise anchor from the bottom.\n anchor = {\n type: 'top',\n offset: (anchorRect?.top ?? 0) - scrollRect.top\n };\n if (anchor.offset > scrollRect.height / 2) {\n anchor.type = 'bottom';\n anchor.offset = (anchorRect?.bottom ?? 0) - scrollRect.bottom;\n }\n }\n\n // Always reset the overlay's previous max height if not defined by the user so that we can compensate for\n // RAC collections populating after a second render and properly set a correct max height + positioning when it populates.\n let overlay = (overlayRef.current as HTMLElement);\n if (!maxHeight && overlayRef.current) {\n overlay.style.top = '0px';\n overlay.style.bottom = '';\n overlay.style.maxHeight = (window.visualViewport?.height ?? window.innerHeight) + 'px';\n }\n\n let position = calculatePosition({\n placement: translateRTL(placement, direction),\n overlayNode: overlayRef.current,\n targetNode: targetRef.current,\n scrollNode: scrollRef.current || overlayRef.current,\n padding: containerPadding,\n shouldFlip,\n boundaryElement,\n offset,\n crossOffset,\n maxHeight,\n arrowSize: arrowSize ?? (arrowRef?.current ? getRect(arrowRef.current, true).width : 0),\n arrowBoundaryOffset\n });\n\n if (!position.position) {\n return;\n }\n\n // Modify overlay styles directly so positioning happens immediately without the need of a second render\n // This is so we don't have to delay autoFocus scrolling or delay applying preventScroll for popovers\n overlay.style.top = '';\n overlay.style.bottom = '';\n overlay.style.left = '';\n overlay.style.right = '';\n\n Object.keys(position.position).forEach(key => overlay.style[key] = (position.position!)[key] + 'px');\n overlay.style.maxHeight = position.maxHeight != null ? position.maxHeight + 'px' : '';\n\n // Restore scroll position relative to anchor element.\n if (anchor && document.activeElement && scrollRef.current) {\n let anchorRect = document.activeElement.getBoundingClientRect();\n let scrollRect = scrollRef.current.getBoundingClientRect();\n let newOffset = anchorRect[anchor.type] - scrollRect[anchor.type];\n scrollRef.current.scrollTop += newOffset - anchor.offset;\n }\n\n // Trigger a set state for a second render anyway for arrow positioning\n setPosition(position);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, deps);\n\n // Update position when anything changes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useLayoutEffect(updatePosition, deps);\n\n // Update position on window resize\n useResize(updatePosition);\n\n // Update position when the overlay changes size (might need to flip).\n useResizeObserver({\n ref: overlayRef,\n onResize: updatePosition\n });\n\n // Update position when the target changes size (might need to flip).\n useResizeObserver({\n ref: targetRef,\n onResize: updatePosition\n });\n\n // Reposition the overlay and do not close on scroll while the visual viewport is resizing.\n // This will ensure that overlays adjust their positioning when the iOS virtual keyboard appears.\n let isResizing = useRef(false);\n useLayoutEffect(() => {\n let timeout: ReturnType<typeof setTimeout>;\n let onResize = () => {\n isResizing.current = true;\n clearTimeout(timeout);\n\n timeout = setTimeout(() => {\n isResizing.current = false;\n }, 500);\n\n updatePosition();\n };\n\n // Only reposition the overlay if a scroll event happens immediately as a result of resize (aka the virtual keyboard has appears)\n // We don't want to reposition the overlay if the user has pinch zoomed in and is scrolling the viewport around.\n let onScroll = () => {\n if (isResizing.current) {\n onResize();\n }\n };\n\n visualViewport?.addEventListener('resize', onResize);\n visualViewport?.addEventListener('scroll', onScroll);\n return () => {\n visualViewport?.removeEventListener('resize', onResize);\n visualViewport?.removeEventListener('scroll', onScroll);\n };\n }, [updatePosition]);\n\n let close = useCallback(() => {\n if (!isResizing.current) {\n onClose?.();\n }\n }, [onClose, isResizing]);\n\n // When scrolling a parent scrollable region of the trigger (other than the body),\n // we hide the popover. Otherwise, its position would be incorrect.\n useCloseOnScroll({\n triggerRef: targetRef,\n isOpen,\n onClose: onClose && close\n });\n\n return {\n overlayProps: {\n style: {\n position: position ? 'absolute' : 'fixed',\n top: !position ? 0 : undefined,\n left: !position ? 0 : undefined,\n zIndex: 100000, // should match the z-index in ModalTrigger\n ...position?.position,\n maxHeight: position?.maxHeight ?? '100vh'\n }\n },\n placement: position?.placement ?? null,\n triggerAnchorPoint: position?.triggerAnchorPoint ?? null,\n arrowProps: {\n 'aria-hidden': 'true',\n role: 'presentation',\n style: {\n left: position?.arrowOffsetLeft,\n top: position?.arrowOffsetTop\n }\n },\n updatePosition\n };\n}\n\nfunction useResize(onResize) {\n useLayoutEffect(() => {\n window.addEventListener('resize', onResize, false);\n return () => {\n window.removeEventListener('resize', onResize, false);\n };\n }, [onResize]);\n}\n\nfunction translateRTL(position, direction) {\n if (direction === 'rtl') {\n return position.replace('start', 'right').replace('end', 'left');\n }\n return position.replace('start', 'left').replace('end', 'right');\n}\n"],"names":[],"version":3,"file":"useOverlayPosition.main.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/menu/src/useOverlayPosition.ts"],"sourcesContent":["/*\n * Copyright 2020 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 {calculatePosition, getRect, PositionResult} from './calculatePosition';\nimport {DOMAttributes, RefObject} from '@react-types/shared';\nimport {nodeContains, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {Placement, PlacementAxis, PositionProps} from '@react-types/overlays';\nimport {useCallback, useEffect, useRef, useState} from 'react';\nimport {useCloseOnScroll} from './useCloseOnScroll';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface AriaPositionProps extends PositionProps {\n /**\n * Cross size of the overlay arrow in pixels.\n * @default 0\n */\n arrowSize?: number,\n /**\n * Element that that serves as the positioning boundary.\n * @default document.body\n */\n boundaryElement?: Element,\n /**\n * The ref for the element which the overlay positions itself with respect to.\n */\n targetRef: RefObject<Element | null>,\n /**\n * The ref for the overlay element.\n */\n overlayRef: RefObject<Element | null>,\n /**\n * The ref for the arrow element.\n */\n arrowRef?: RefObject<Element | null>,\n /**\n * A ref for the scrollable region within the overlay.\n * @default overlayRef\n */\n scrollRef?: RefObject<Element | null>,\n /**\n * Whether the overlay should update its position automatically.\n * @default true\n */\n shouldUpdatePosition?: boolean,\n /** Handler that is called when the overlay should close. */\n onClose?: (() => void) | null,\n /**\n * The maxHeight specified for the overlay element.\n * By default, it will take all space up to the current viewport height.\n */\n maxHeight?: number,\n /**\n * The minimum distance the arrow's edge should be from the edge of the overlay element.\n * @default 0\n */\n arrowBoundaryOffset?: number\n}\n\nexport interface PositionAria {\n /** Props for the overlay container element. */\n overlayProps: DOMAttributes,\n /** Props for the overlay tip arrow if any. */\n arrowProps: DOMAttributes,\n /** Placement of the overlay with respect to the overlay trigger. */\n placement: PlacementAxis | null,\n /** The origin of the target in the overlay's coordinate system. Useful for animations. */\n triggerAnchorPoint: {x: number, y: number} | null,\n /** Updates the position of the overlay. */\n updatePosition(): void\n}\n\ninterface ScrollAnchor {\n type: 'top' | 'bottom',\n offset: number\n}\n\nlet visualViewport = typeof document !== 'undefined' ? window.visualViewport : null;\n\n/**\n * Handles positioning overlays like popovers and menus relative to a trigger\n * element, and updating the position when the window resizes.\n */\nexport function useOverlayPosition(props: AriaPositionProps): PositionAria {\n let {direction} = useLocale();\n let {\n arrowSize,\n targetRef,\n overlayRef,\n arrowRef,\n scrollRef = overlayRef,\n placement = 'bottom' as Placement,\n containerPadding = 12,\n shouldFlip = true,\n boundaryElement = typeof document !== 'undefined' ? document.body : null,\n offset = 0,\n crossOffset = 0,\n shouldUpdatePosition = true,\n isOpen = true,\n onClose,\n maxHeight,\n arrowBoundaryOffset = 0\n } = props;\n let [position, setPosition] = useState<PositionResult | null>(null);\n\n let deps = [\n shouldUpdatePosition,\n placement,\n overlayRef.current,\n targetRef.current,\n arrowRef?.current,\n scrollRef.current,\n containerPadding,\n shouldFlip,\n boundaryElement,\n offset,\n crossOffset,\n isOpen,\n direction,\n maxHeight,\n arrowBoundaryOffset,\n arrowSize\n ];\n\n // Note, the position freezing breaks if body sizes itself dynamicly with the visual viewport but that might\n // just be a non-realistic use case\n // Upon opening a overlay, record the current visual viewport scale so we can freeze the overlay styles\n let lastScale = useRef(visualViewport?.scale);\n useEffect(() => {\n if (isOpen) {\n lastScale.current = visualViewport?.scale;\n }\n }, [isOpen]);\n\n let updatePosition = useCallback(() => {\n if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !boundaryElement) {\n return;\n }\n\n if (visualViewport?.scale !== lastScale.current) {\n return;\n }\n\n // Determine a scroll anchor based on the focused element.\n // This stores the offset of the anchor element from the scroll container\n // so it can be restored after repositioning. This way if the overlay height\n // changes, the focused element appears to stay in the same position.\n let anchor: ScrollAnchor | null = null;\n if (scrollRef.current && nodeContains(scrollRef.current, document.activeElement)) {\n let anchorRect = document.activeElement?.getBoundingClientRect();\n let scrollRect = scrollRef.current.getBoundingClientRect();\n // Anchor from the top if the offset is in the top half of the scrollable element,\n // otherwise anchor from the bottom.\n anchor = {\n type: 'top',\n offset: (anchorRect?.top ?? 0) - scrollRect.top\n };\n if (anchor.offset > scrollRect.height / 2) {\n anchor.type = 'bottom';\n anchor.offset = (anchorRect?.bottom ?? 0) - scrollRect.bottom;\n }\n }\n\n // Always reset the overlay's previous max height if not defined by the user so that we can compensate for\n // RAC collections populating after a second render and properly set a correct max height + positioning when it populates.\n let overlay = (overlayRef.current as HTMLElement);\n if (!maxHeight && overlayRef.current) {\n overlay.style.top = '0px';\n overlay.style.bottom = '';\n overlay.style.maxHeight = (window.visualViewport?.height ?? window.innerHeight) + 'px';\n }\n\n let position = calculatePosition({\n placement: translateRTL(placement, direction),\n overlayNode: overlayRef.current,\n targetNode: targetRef.current,\n scrollNode: scrollRef.current || overlayRef.current,\n padding: containerPadding,\n shouldFlip,\n boundaryElement,\n offset,\n crossOffset,\n maxHeight,\n arrowSize: arrowSize ?? (arrowRef?.current ? getRect(arrowRef.current, true).width : 0),\n arrowBoundaryOffset\n });\n\n if (!position.position) {\n return;\n }\n\n // Modify overlay styles directly so positioning happens immediately without the need of a second render\n // This is so we don't have to delay autoFocus scrolling or delay applying preventScroll for popovers\n overlay.style.top = '';\n overlay.style.bottom = '';\n overlay.style.left = '';\n overlay.style.right = '';\n\n Object.keys(position.position).forEach(key => overlay.style[key] = (position.position!)[key] + 'px');\n overlay.style.maxHeight = position.maxHeight != null ? position.maxHeight + 'px' : '';\n\n // Restore scroll position relative to anchor element.\n if (anchor && document.activeElement && scrollRef.current) {\n let anchorRect = document.activeElement.getBoundingClientRect();\n let scrollRect = scrollRef.current.getBoundingClientRect();\n let newOffset = anchorRect[anchor.type] - scrollRect[anchor.type];\n scrollRef.current.scrollTop += newOffset - anchor.offset;\n }\n\n // Trigger a set state for a second render anyway for arrow positioning\n setPosition(position);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, deps);\n\n // Update position when anything changes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useLayoutEffect(updatePosition, deps);\n\n // Update position on window resize\n useResize(updatePosition);\n\n // Update position when the overlay changes size (might need to flip).\n useResizeObserver({\n ref: overlayRef,\n onResize: updatePosition\n });\n\n // Update position when the target changes size (might need to flip).\n useResizeObserver({\n ref: targetRef,\n onResize: updatePosition\n });\n\n // Reposition the overlay and do not close on scroll while the visual viewport is resizing.\n // This will ensure that overlays adjust their positioning when the iOS virtual keyboard appears.\n let isResizing = useRef(false);\n useLayoutEffect(() => {\n let timeout: ReturnType<typeof setTimeout>;\n let onResize = () => {\n isResizing.current = true;\n clearTimeout(timeout);\n\n timeout = setTimeout(() => {\n isResizing.current = false;\n }, 500);\n\n updatePosition();\n };\n\n // Only reposition the overlay if a scroll event happens immediately as a result of resize (aka the virtual keyboard has appears)\n // We don't want to reposition the overlay if the user has pinch zoomed in and is scrolling the viewport around.\n let onScroll = () => {\n if (isResizing.current) {\n onResize();\n }\n };\n\n visualViewport?.addEventListener('resize', onResize);\n visualViewport?.addEventListener('scroll', onScroll);\n return () => {\n visualViewport?.removeEventListener('resize', onResize);\n visualViewport?.removeEventListener('scroll', onScroll);\n };\n }, [updatePosition]);\n\n let close = useCallback(() => {\n if (!isResizing.current) {\n onClose?.();\n }\n }, [onClose, isResizing]);\n\n // When scrolling a parent scrollable region of the trigger (other than the body),\n // we hide the popover. Otherwise, its position would be incorrect.\n useCloseOnScroll({\n triggerRef: targetRef,\n isOpen,\n onClose: onClose && close\n });\n\n return {\n overlayProps: {\n style: {\n position: position ? 'absolute' : 'fixed',\n top: !position ? 0 : undefined,\n left: !position ? 0 : undefined,\n zIndex: 100000, // should match the z-index in ModalTrigger\n ...position?.position,\n maxHeight: position?.maxHeight ?? '100vh'\n }\n },\n placement: position?.placement ?? null,\n triggerAnchorPoint: position?.triggerAnchorPoint ?? null,\n arrowProps: {\n 'aria-hidden': 'true',\n role: 'presentation',\n style: {\n left: position?.arrowOffsetLeft,\n top: position?.arrowOffsetTop\n }\n },\n updatePosition\n };\n}\n\nfunction useResize(onResize) {\n useLayoutEffect(() => {\n window.addEventListener('resize', onResize, false);\n return () => {\n window.removeEventListener('resize', onResize, false);\n };\n }, [onResize]);\n}\n\nfunction translateRTL(position, direction) {\n if (direction === 'rtl') {\n return position.replace('start', 'right').replace('end', 'left');\n }\n return position.replace('start', 'left').replace('end', 'right');\n}\n"],"names":[],"version":3,"file":"useOverlayPosition.main.js.map"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {calculatePosition as $74be59a24b8d2173$export$b3ceb0cbf1056d98, getRect as $74be59a24b8d2173$export$4b834cebd9e5cebe} from "./calculatePosition.mjs";
|
|
2
2
|
import {useCloseOnScroll as $ca3b77875a5017bc$export$18fc8428861184da} from "./useCloseOnScroll.mjs";
|
|
3
|
+
import {nodeContains as $db9yU$nodeContains, useLayoutEffect as $db9yU$useLayoutEffect, useResizeObserver as $db9yU$useResizeObserver} from "@react-aria/utils";
|
|
3
4
|
import {useState as $db9yU$useState, useRef as $db9yU$useRef, useEffect as $db9yU$useEffect, useCallback as $db9yU$useCallback} from "react";
|
|
4
|
-
import {useLayoutEffect as $db9yU$useLayoutEffect, useResizeObserver as $db9yU$useResizeObserver} from "@react-aria/utils";
|
|
5
5
|
import {useLocale as $db9yU$useLocale} from "@react-aria/i18n";
|
|
6
6
|
|
|
7
7
|
/*
|
|
@@ -59,7 +59,7 @@ function $e235061053e33ff6$export$d39e1813b3bdd0e1(props) {
|
|
|
59
59
|
// so it can be restored after repositioning. This way if the overlay height
|
|
60
60
|
// changes, the focused element appears to stay in the same position.
|
|
61
61
|
let anchor = null;
|
|
62
|
-
if (scrollRef.current && scrollRef.current
|
|
62
|
+
if (scrollRef.current && (0, $db9yU$nodeContains)(scrollRef.current, document.activeElement)) {
|
|
63
63
|
var _document_activeElement;
|
|
64
64
|
let anchorRect = (_document_activeElement = document.activeElement) === null || _document_activeElement === void 0 ? void 0 : _document_activeElement.getBoundingClientRect();
|
|
65
65
|
let scrollRect = scrollRef.current.getBoundingClientRect();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {calculatePosition as $74be59a24b8d2173$export$b3ceb0cbf1056d98, getRect as $74be59a24b8d2173$export$4b834cebd9e5cebe} from "./calculatePosition.module.js";
|
|
2
2
|
import {useCloseOnScroll as $ca3b77875a5017bc$export$18fc8428861184da} from "./useCloseOnScroll.module.js";
|
|
3
|
+
import {nodeContains as $db9yU$nodeContains, useLayoutEffect as $db9yU$useLayoutEffect, useResizeObserver as $db9yU$useResizeObserver} from "@react-aria/utils";
|
|
3
4
|
import {useState as $db9yU$useState, useRef as $db9yU$useRef, useEffect as $db9yU$useEffect, useCallback as $db9yU$useCallback} from "react";
|
|
4
|
-
import {useLayoutEffect as $db9yU$useLayoutEffect, useResizeObserver as $db9yU$useResizeObserver} from "@react-aria/utils";
|
|
5
5
|
import {useLocale as $db9yU$useLocale} from "@react-aria/i18n";
|
|
6
6
|
|
|
7
7
|
/*
|
|
@@ -59,7 +59,7 @@ function $e235061053e33ff6$export$d39e1813b3bdd0e1(props) {
|
|
|
59
59
|
// so it can be restored after repositioning. This way if the overlay height
|
|
60
60
|
// changes, the focused element appears to stay in the same position.
|
|
61
61
|
let anchor = null;
|
|
62
|
-
if (scrollRef.current && scrollRef.current
|
|
62
|
+
if (scrollRef.current && (0, $db9yU$nodeContains)(scrollRef.current, document.activeElement)) {
|
|
63
63
|
var _document_activeElement;
|
|
64
64
|
let anchorRect = (_document_activeElement = document.activeElement) === null || _document_activeElement === void 0 ? void 0 : _document_activeElement.getBoundingClientRect();
|
|
65
65
|
let scrollRect = scrollRef.current.getBoundingClientRect();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/menu/src/useOverlayPosition.ts"],"sourcesContent":["/*\n * Copyright 2020 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 {calculatePosition, getRect, PositionResult} from './calculatePosition';\nimport {DOMAttributes, RefObject} from '@react-types/shared';\nimport {Placement, PlacementAxis, PositionProps} from '@react-types/overlays';\nimport {useCallback, useEffect, useRef, useState} from 'react';\nimport {useCloseOnScroll} from './useCloseOnScroll';\nimport {useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface AriaPositionProps extends PositionProps {\n /**\n * Cross size of the overlay arrow in pixels.\n * @default 0\n */\n arrowSize?: number,\n /**\n * Element that that serves as the positioning boundary.\n * @default document.body\n */\n boundaryElement?: Element,\n /**\n * The ref for the element which the overlay positions itself with respect to.\n */\n targetRef: RefObject<Element | null>,\n /**\n * The ref for the overlay element.\n */\n overlayRef: RefObject<Element | null>,\n /**\n * The ref for the arrow element.\n */\n arrowRef?: RefObject<Element | null>,\n /**\n * A ref for the scrollable region within the overlay.\n * @default overlayRef\n */\n scrollRef?: RefObject<Element | null>,\n /**\n * Whether the overlay should update its position automatically.\n * @default true\n */\n shouldUpdatePosition?: boolean,\n /** Handler that is called when the overlay should close. */\n onClose?: (() => void) | null,\n /**\n * The maxHeight specified for the overlay element.\n * By default, it will take all space up to the current viewport height.\n */\n maxHeight?: number,\n /**\n * The minimum distance the arrow's edge should be from the edge of the overlay element.\n * @default 0\n */\n arrowBoundaryOffset?: number\n}\n\nexport interface PositionAria {\n /** Props for the overlay container element. */\n overlayProps: DOMAttributes,\n /** Props for the overlay tip arrow if any. */\n arrowProps: DOMAttributes,\n /** Placement of the overlay with respect to the overlay trigger. */\n placement: PlacementAxis | null,\n /** The origin of the target in the overlay's coordinate system. Useful for animations. */\n triggerAnchorPoint: {x: number, y: number} | null,\n /** Updates the position of the overlay. */\n updatePosition(): void\n}\n\ninterface ScrollAnchor {\n type: 'top' | 'bottom',\n offset: number\n}\n\nlet visualViewport = typeof document !== 'undefined' ? window.visualViewport : null;\n\n/**\n * Handles positioning overlays like popovers and menus relative to a trigger\n * element, and updating the position when the window resizes.\n */\nexport function useOverlayPosition(props: AriaPositionProps): PositionAria {\n let {direction} = useLocale();\n let {\n arrowSize,\n targetRef,\n overlayRef,\n arrowRef,\n scrollRef = overlayRef,\n placement = 'bottom' as Placement,\n containerPadding = 12,\n shouldFlip = true,\n boundaryElement = typeof document !== 'undefined' ? document.body : null,\n offset = 0,\n crossOffset = 0,\n shouldUpdatePosition = true,\n isOpen = true,\n onClose,\n maxHeight,\n arrowBoundaryOffset = 0\n } = props;\n let [position, setPosition] = useState<PositionResult | null>(null);\n\n let deps = [\n shouldUpdatePosition,\n placement,\n overlayRef.current,\n targetRef.current,\n arrowRef?.current,\n scrollRef.current,\n containerPadding,\n shouldFlip,\n boundaryElement,\n offset,\n crossOffset,\n isOpen,\n direction,\n maxHeight,\n arrowBoundaryOffset,\n arrowSize\n ];\n\n // Note, the position freezing breaks if body sizes itself dynamicly with the visual viewport but that might\n // just be a non-realistic use case\n // Upon opening a overlay, record the current visual viewport scale so we can freeze the overlay styles\n let lastScale = useRef(visualViewport?.scale);\n useEffect(() => {\n if (isOpen) {\n lastScale.current = visualViewport?.scale;\n }\n }, [isOpen]);\n\n let updatePosition = useCallback(() => {\n if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !boundaryElement) {\n return;\n }\n\n if (visualViewport?.scale !== lastScale.current) {\n return;\n }\n\n // Determine a scroll anchor based on the focused element.\n // This stores the offset of the anchor element from the scroll container\n // so it can be restored after repositioning. This way if the overlay height\n // changes, the focused element appears to stay in the same position.\n let anchor: ScrollAnchor | null = null;\n if (scrollRef.current && scrollRef.current.contains(document.activeElement)) {\n let anchorRect = document.activeElement?.getBoundingClientRect();\n let scrollRect = scrollRef.current.getBoundingClientRect();\n // Anchor from the top if the offset is in the top half of the scrollable element,\n // otherwise anchor from the bottom.\n anchor = {\n type: 'top',\n offset: (anchorRect?.top ?? 0) - scrollRect.top\n };\n if (anchor.offset > scrollRect.height / 2) {\n anchor.type = 'bottom';\n anchor.offset = (anchorRect?.bottom ?? 0) - scrollRect.bottom;\n }\n }\n\n // Always reset the overlay's previous max height if not defined by the user so that we can compensate for\n // RAC collections populating after a second render and properly set a correct max height + positioning when it populates.\n let overlay = (overlayRef.current as HTMLElement);\n if (!maxHeight && overlayRef.current) {\n overlay.style.top = '0px';\n overlay.style.bottom = '';\n overlay.style.maxHeight = (window.visualViewport?.height ?? window.innerHeight) + 'px';\n }\n\n let position = calculatePosition({\n placement: translateRTL(placement, direction),\n overlayNode: overlayRef.current,\n targetNode: targetRef.current,\n scrollNode: scrollRef.current || overlayRef.current,\n padding: containerPadding,\n shouldFlip,\n boundaryElement,\n offset,\n crossOffset,\n maxHeight,\n arrowSize: arrowSize ?? (arrowRef?.current ? getRect(arrowRef.current, true).width : 0),\n arrowBoundaryOffset\n });\n\n if (!position.position) {\n return;\n }\n\n // Modify overlay styles directly so positioning happens immediately without the need of a second render\n // This is so we don't have to delay autoFocus scrolling or delay applying preventScroll for popovers\n overlay.style.top = '';\n overlay.style.bottom = '';\n overlay.style.left = '';\n overlay.style.right = '';\n\n Object.keys(position.position).forEach(key => overlay.style[key] = (position.position!)[key] + 'px');\n overlay.style.maxHeight = position.maxHeight != null ? position.maxHeight + 'px' : '';\n\n // Restore scroll position relative to anchor element.\n if (anchor && document.activeElement && scrollRef.current) {\n let anchorRect = document.activeElement.getBoundingClientRect();\n let scrollRect = scrollRef.current.getBoundingClientRect();\n let newOffset = anchorRect[anchor.type] - scrollRect[anchor.type];\n scrollRef.current.scrollTop += newOffset - anchor.offset;\n }\n\n // Trigger a set state for a second render anyway for arrow positioning\n setPosition(position);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, deps);\n\n // Update position when anything changes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useLayoutEffect(updatePosition, deps);\n\n // Update position on window resize\n useResize(updatePosition);\n\n // Update position when the overlay changes size (might need to flip).\n useResizeObserver({\n ref: overlayRef,\n onResize: updatePosition\n });\n\n // Update position when the target changes size (might need to flip).\n useResizeObserver({\n ref: targetRef,\n onResize: updatePosition\n });\n\n // Reposition the overlay and do not close on scroll while the visual viewport is resizing.\n // This will ensure that overlays adjust their positioning when the iOS virtual keyboard appears.\n let isResizing = useRef(false);\n useLayoutEffect(() => {\n let timeout: ReturnType<typeof setTimeout>;\n let onResize = () => {\n isResizing.current = true;\n clearTimeout(timeout);\n\n timeout = setTimeout(() => {\n isResizing.current = false;\n }, 500);\n\n updatePosition();\n };\n\n // Only reposition the overlay if a scroll event happens immediately as a result of resize (aka the virtual keyboard has appears)\n // We don't want to reposition the overlay if the user has pinch zoomed in and is scrolling the viewport around.\n let onScroll = () => {\n if (isResizing.current) {\n onResize();\n }\n };\n\n visualViewport?.addEventListener('resize', onResize);\n visualViewport?.addEventListener('scroll', onScroll);\n return () => {\n visualViewport?.removeEventListener('resize', onResize);\n visualViewport?.removeEventListener('scroll', onScroll);\n };\n }, [updatePosition]);\n\n let close = useCallback(() => {\n if (!isResizing.current) {\n onClose?.();\n }\n }, [onClose, isResizing]);\n\n // When scrolling a parent scrollable region of the trigger (other than the body),\n // we hide the popover. Otherwise, its position would be incorrect.\n useCloseOnScroll({\n triggerRef: targetRef,\n isOpen,\n onClose: onClose && close\n });\n\n return {\n overlayProps: {\n style: {\n position: position ? 'absolute' : 'fixed',\n top: !position ? 0 : undefined,\n left: !position ? 0 : undefined,\n zIndex: 100000, // should match the z-index in ModalTrigger\n ...position?.position,\n maxHeight: position?.maxHeight ?? '100vh'\n }\n },\n placement: position?.placement ?? null,\n triggerAnchorPoint: position?.triggerAnchorPoint ?? null,\n arrowProps: {\n 'aria-hidden': 'true',\n role: 'presentation',\n style: {\n left: position?.arrowOffsetLeft,\n top: position?.arrowOffsetTop\n }\n },\n updatePosition\n };\n}\n\nfunction useResize(onResize) {\n useLayoutEffect(() => {\n window.addEventListener('resize', onResize, false);\n return () => {\n window.removeEventListener('resize', onResize, false);\n };\n }, [onResize]);\n}\n\nfunction translateRTL(position, direction) {\n if (direction === 'rtl') {\n return position.replace('start', 'right').replace('end', 'left');\n }\n return position.replace('start', 'left').replace('end', 'right');\n}\n"],"names":[],"version":3,"file":"useOverlayPosition.module.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/menu/src/useOverlayPosition.ts"],"sourcesContent":["/*\n * Copyright 2020 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 {calculatePosition, getRect, PositionResult} from './calculatePosition';\nimport {DOMAttributes, RefObject} from '@react-types/shared';\nimport {nodeContains, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {Placement, PlacementAxis, PositionProps} from '@react-types/overlays';\nimport {useCallback, useEffect, useRef, useState} from 'react';\nimport {useCloseOnScroll} from './useCloseOnScroll';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface AriaPositionProps extends PositionProps {\n /**\n * Cross size of the overlay arrow in pixels.\n * @default 0\n */\n arrowSize?: number,\n /**\n * Element that that serves as the positioning boundary.\n * @default document.body\n */\n boundaryElement?: Element,\n /**\n * The ref for the element which the overlay positions itself with respect to.\n */\n targetRef: RefObject<Element | null>,\n /**\n * The ref for the overlay element.\n */\n overlayRef: RefObject<Element | null>,\n /**\n * The ref for the arrow element.\n */\n arrowRef?: RefObject<Element | null>,\n /**\n * A ref for the scrollable region within the overlay.\n * @default overlayRef\n */\n scrollRef?: RefObject<Element | null>,\n /**\n * Whether the overlay should update its position automatically.\n * @default true\n */\n shouldUpdatePosition?: boolean,\n /** Handler that is called when the overlay should close. */\n onClose?: (() => void) | null,\n /**\n * The maxHeight specified for the overlay element.\n * By default, it will take all space up to the current viewport height.\n */\n maxHeight?: number,\n /**\n * The minimum distance the arrow's edge should be from the edge of the overlay element.\n * @default 0\n */\n arrowBoundaryOffset?: number\n}\n\nexport interface PositionAria {\n /** Props for the overlay container element. */\n overlayProps: DOMAttributes,\n /** Props for the overlay tip arrow if any. */\n arrowProps: DOMAttributes,\n /** Placement of the overlay with respect to the overlay trigger. */\n placement: PlacementAxis | null,\n /** The origin of the target in the overlay's coordinate system. Useful for animations. */\n triggerAnchorPoint: {x: number, y: number} | null,\n /** Updates the position of the overlay. */\n updatePosition(): void\n}\n\ninterface ScrollAnchor {\n type: 'top' | 'bottom',\n offset: number\n}\n\nlet visualViewport = typeof document !== 'undefined' ? window.visualViewport : null;\n\n/**\n * Handles positioning overlays like popovers and menus relative to a trigger\n * element, and updating the position when the window resizes.\n */\nexport function useOverlayPosition(props: AriaPositionProps): PositionAria {\n let {direction} = useLocale();\n let {\n arrowSize,\n targetRef,\n overlayRef,\n arrowRef,\n scrollRef = overlayRef,\n placement = 'bottom' as Placement,\n containerPadding = 12,\n shouldFlip = true,\n boundaryElement = typeof document !== 'undefined' ? document.body : null,\n offset = 0,\n crossOffset = 0,\n shouldUpdatePosition = true,\n isOpen = true,\n onClose,\n maxHeight,\n arrowBoundaryOffset = 0\n } = props;\n let [position, setPosition] = useState<PositionResult | null>(null);\n\n let deps = [\n shouldUpdatePosition,\n placement,\n overlayRef.current,\n targetRef.current,\n arrowRef?.current,\n scrollRef.current,\n containerPadding,\n shouldFlip,\n boundaryElement,\n offset,\n crossOffset,\n isOpen,\n direction,\n maxHeight,\n arrowBoundaryOffset,\n arrowSize\n ];\n\n // Note, the position freezing breaks if body sizes itself dynamicly with the visual viewport but that might\n // just be a non-realistic use case\n // Upon opening a overlay, record the current visual viewport scale so we can freeze the overlay styles\n let lastScale = useRef(visualViewport?.scale);\n useEffect(() => {\n if (isOpen) {\n lastScale.current = visualViewport?.scale;\n }\n }, [isOpen]);\n\n let updatePosition = useCallback(() => {\n if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !boundaryElement) {\n return;\n }\n\n if (visualViewport?.scale !== lastScale.current) {\n return;\n }\n\n // Determine a scroll anchor based on the focused element.\n // This stores the offset of the anchor element from the scroll container\n // so it can be restored after repositioning. This way if the overlay height\n // changes, the focused element appears to stay in the same position.\n let anchor: ScrollAnchor | null = null;\n if (scrollRef.current && nodeContains(scrollRef.current, document.activeElement)) {\n let anchorRect = document.activeElement?.getBoundingClientRect();\n let scrollRect = scrollRef.current.getBoundingClientRect();\n // Anchor from the top if the offset is in the top half of the scrollable element,\n // otherwise anchor from the bottom.\n anchor = {\n type: 'top',\n offset: (anchorRect?.top ?? 0) - scrollRect.top\n };\n if (anchor.offset > scrollRect.height / 2) {\n anchor.type = 'bottom';\n anchor.offset = (anchorRect?.bottom ?? 0) - scrollRect.bottom;\n }\n }\n\n // Always reset the overlay's previous max height if not defined by the user so that we can compensate for\n // RAC collections populating after a second render and properly set a correct max height + positioning when it populates.\n let overlay = (overlayRef.current as HTMLElement);\n if (!maxHeight && overlayRef.current) {\n overlay.style.top = '0px';\n overlay.style.bottom = '';\n overlay.style.maxHeight = (window.visualViewport?.height ?? window.innerHeight) + 'px';\n }\n\n let position = calculatePosition({\n placement: translateRTL(placement, direction),\n overlayNode: overlayRef.current,\n targetNode: targetRef.current,\n scrollNode: scrollRef.current || overlayRef.current,\n padding: containerPadding,\n shouldFlip,\n boundaryElement,\n offset,\n crossOffset,\n maxHeight,\n arrowSize: arrowSize ?? (arrowRef?.current ? getRect(arrowRef.current, true).width : 0),\n arrowBoundaryOffset\n });\n\n if (!position.position) {\n return;\n }\n\n // Modify overlay styles directly so positioning happens immediately without the need of a second render\n // This is so we don't have to delay autoFocus scrolling or delay applying preventScroll for popovers\n overlay.style.top = '';\n overlay.style.bottom = '';\n overlay.style.left = '';\n overlay.style.right = '';\n\n Object.keys(position.position).forEach(key => overlay.style[key] = (position.position!)[key] + 'px');\n overlay.style.maxHeight = position.maxHeight != null ? position.maxHeight + 'px' : '';\n\n // Restore scroll position relative to anchor element.\n if (anchor && document.activeElement && scrollRef.current) {\n let anchorRect = document.activeElement.getBoundingClientRect();\n let scrollRect = scrollRef.current.getBoundingClientRect();\n let newOffset = anchorRect[anchor.type] - scrollRect[anchor.type];\n scrollRef.current.scrollTop += newOffset - anchor.offset;\n }\n\n // Trigger a set state for a second render anyway for arrow positioning\n setPosition(position);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, deps);\n\n // Update position when anything changes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useLayoutEffect(updatePosition, deps);\n\n // Update position on window resize\n useResize(updatePosition);\n\n // Update position when the overlay changes size (might need to flip).\n useResizeObserver({\n ref: overlayRef,\n onResize: updatePosition\n });\n\n // Update position when the target changes size (might need to flip).\n useResizeObserver({\n ref: targetRef,\n onResize: updatePosition\n });\n\n // Reposition the overlay and do not close on scroll while the visual viewport is resizing.\n // This will ensure that overlays adjust their positioning when the iOS virtual keyboard appears.\n let isResizing = useRef(false);\n useLayoutEffect(() => {\n let timeout: ReturnType<typeof setTimeout>;\n let onResize = () => {\n isResizing.current = true;\n clearTimeout(timeout);\n\n timeout = setTimeout(() => {\n isResizing.current = false;\n }, 500);\n\n updatePosition();\n };\n\n // Only reposition the overlay if a scroll event happens immediately as a result of resize (aka the virtual keyboard has appears)\n // We don't want to reposition the overlay if the user has pinch zoomed in and is scrolling the viewport around.\n let onScroll = () => {\n if (isResizing.current) {\n onResize();\n }\n };\n\n visualViewport?.addEventListener('resize', onResize);\n visualViewport?.addEventListener('scroll', onScroll);\n return () => {\n visualViewport?.removeEventListener('resize', onResize);\n visualViewport?.removeEventListener('scroll', onScroll);\n };\n }, [updatePosition]);\n\n let close = useCallback(() => {\n if (!isResizing.current) {\n onClose?.();\n }\n }, [onClose, isResizing]);\n\n // When scrolling a parent scrollable region of the trigger (other than the body),\n // we hide the popover. Otherwise, its position would be incorrect.\n useCloseOnScroll({\n triggerRef: targetRef,\n isOpen,\n onClose: onClose && close\n });\n\n return {\n overlayProps: {\n style: {\n position: position ? 'absolute' : 'fixed',\n top: !position ? 0 : undefined,\n left: !position ? 0 : undefined,\n zIndex: 100000, // should match the z-index in ModalTrigger\n ...position?.position,\n maxHeight: position?.maxHeight ?? '100vh'\n }\n },\n placement: position?.placement ?? null,\n triggerAnchorPoint: position?.triggerAnchorPoint ?? null,\n arrowProps: {\n 'aria-hidden': 'true',\n role: 'presentation',\n style: {\n left: position?.arrowOffsetLeft,\n top: position?.arrowOffsetTop\n }\n },\n updatePosition\n };\n}\n\nfunction useResize(onResize) {\n useLayoutEffect(() => {\n window.addEventListener('resize', onResize, false);\n return () => {\n window.removeEventListener('resize', onResize, false);\n };\n }, [onResize]);\n}\n\nfunction translateRTL(position, direction) {\n if (direction === 'rtl') {\n return position.replace('start', 'right').replace('end', 'left');\n }\n return position.replace('start', 'left').replace('end', 'right');\n}\n"],"names":[],"version":3,"file":"useOverlayPosition.module.js.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-spectrum/menu",
|
|
3
|
-
"version": "3.22.
|
|
3
|
+
"version": "3.22.10",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -40,27 +40,27 @@
|
|
|
40
40
|
"url": "https://github.com/adobe/react-spectrum"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@react-aria/focus": "^3.21.
|
|
44
|
-
"@react-aria/i18n": "^3.12.
|
|
45
|
-
"@react-aria/interactions": "^3.
|
|
46
|
-
"@react-aria/menu": "^3.
|
|
47
|
-
"@react-aria/overlays": "^3.31.
|
|
48
|
-
"@react-aria/separator": "^3.4.
|
|
49
|
-
"@react-aria/utils": "^3.
|
|
50
|
-
"@react-spectrum/button": "^3.17.
|
|
51
|
-
"@react-spectrum/layout": "^3.6.
|
|
52
|
-
"@react-spectrum/overlays": "^5.9.
|
|
53
|
-
"@react-spectrum/text": "^3.5.
|
|
54
|
-
"@react-spectrum/utils": "^3.12.
|
|
55
|
-
"@react-stately/collections": "^3.12.
|
|
56
|
-
"@react-stately/menu": "^3.9.
|
|
57
|
-
"@react-stately/overlays": "^3.6.
|
|
58
|
-
"@react-stately/tree": "^3.9.
|
|
59
|
-
"@react-types/menu": "^3.10.
|
|
60
|
-
"@react-types/overlays": "^3.9.
|
|
61
|
-
"@react-types/shared": "^3.
|
|
62
|
-
"@spectrum-icons/ui": "^3.6.
|
|
63
|
-
"@spectrum-icons/workflow": "^4.2.
|
|
43
|
+
"@react-aria/focus": "^3.21.4",
|
|
44
|
+
"@react-aria/i18n": "^3.12.15",
|
|
45
|
+
"@react-aria/interactions": "^3.27.0",
|
|
46
|
+
"@react-aria/menu": "^3.20.0",
|
|
47
|
+
"@react-aria/overlays": "^3.31.1",
|
|
48
|
+
"@react-aria/separator": "^3.4.15",
|
|
49
|
+
"@react-aria/utils": "^3.33.0",
|
|
50
|
+
"@react-spectrum/button": "^3.17.6",
|
|
51
|
+
"@react-spectrum/layout": "^3.6.21",
|
|
52
|
+
"@react-spectrum/overlays": "^5.9.2",
|
|
53
|
+
"@react-spectrum/text": "^3.5.24",
|
|
54
|
+
"@react-spectrum/utils": "^3.12.11",
|
|
55
|
+
"@react-stately/collections": "^3.12.9",
|
|
56
|
+
"@react-stately/menu": "^3.9.10",
|
|
57
|
+
"@react-stately/overlays": "^3.6.22",
|
|
58
|
+
"@react-stately/tree": "^3.9.5",
|
|
59
|
+
"@react-types/menu": "^3.10.6",
|
|
60
|
+
"@react-types/overlays": "^3.9.3",
|
|
61
|
+
"@react-types/shared": "^3.33.0",
|
|
62
|
+
"@spectrum-icons/ui": "^3.6.22",
|
|
63
|
+
"@spectrum-icons/workflow": "^4.2.27",
|
|
64
64
|
"@swc/helpers": "^0.5.0"
|
|
65
65
|
},
|
|
66
66
|
"devDependencies": {
|
|
@@ -74,5 +74,5 @@
|
|
|
74
74
|
"publishConfig": {
|
|
75
75
|
"access": "public"
|
|
76
76
|
},
|
|
77
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "66e51757606b43a89ed02c574ca24517323a2ab9"
|
|
78
78
|
}
|
|
@@ -15,7 +15,8 @@ import {DOMRefValue, ItemProps, Key} from '@react-types/shared';
|
|
|
15
15
|
import {FocusScope} from '@react-aria/focus';
|
|
16
16
|
import {getInteractionModality} from '@react-aria/interactions';
|
|
17
17
|
import helpStyles from '@adobe/spectrum-css-temp/components/contextualhelp/vars.css';
|
|
18
|
-
import {
|
|
18
|
+
import {nodeContains} from '@react-aria/utils';
|
|
19
|
+
import {Popover} from './Popover';
|
|
19
20
|
import React, {JSX, KeyboardEventHandler, ReactElement, useEffect, useRef, useState} from 'react';
|
|
20
21
|
import ReactDOM from 'react-dom';
|
|
21
22
|
import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
|
|
@@ -85,7 +86,7 @@ function ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElem
|
|
|
85
86
|
let [, content] = props.children as [ReactElement, ReactElement];
|
|
86
87
|
|
|
87
88
|
let onBlurWithin = (e) => {
|
|
88
|
-
if (e.relatedTarget && popoverRef.current && (!popoverRef.current.UNSAFE_getDOMNode()
|
|
89
|
+
if (e.relatedTarget && popoverRef.current && (!nodeContains(popoverRef.current.UNSAFE_getDOMNode(), e.relatedTarget) && !(e.relatedTarget === triggerRef.current && getInteractionModality() === 'pointer'))) {
|
|
89
90
|
if (submenuTriggerState.isOpen) {
|
|
90
91
|
submenuTriggerState.close();
|
|
91
92
|
}
|
|
@@ -98,7 +99,7 @@ function ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElem
|
|
|
98
99
|
setTraySubmenuAnimation('spectrum-TraySubmenu-exit');
|
|
99
100
|
setTimeout(() => {
|
|
100
101
|
submenuTriggerState.close();
|
|
101
|
-
if (parentMenuRef.current && !parentMenuRef.current
|
|
102
|
+
if (parentMenuRef.current && !nodeContains(parentMenuRef.current, document.activeElement)) {
|
|
102
103
|
parentMenuRef.current.focus();
|
|
103
104
|
}
|
|
104
105
|
}, 220); // Matches transition duration
|
package/src/SubmenuTrigger.tsx
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import {classNames, useIsMobileDevice} from '@react-spectrum/utils';
|
|
14
14
|
import {Key} from '@react-types/shared';
|
|
15
15
|
import {MenuContext, SubmenuTriggerContext, useMenuStateContext} from './context';
|
|
16
|
-
import {mergeProps} from '@react-aria/utils';
|
|
16
|
+
import {mergeProps, nodeContains} from '@react-aria/utils';
|
|
17
17
|
import {Popover} from './Popover';
|
|
18
18
|
import React, {type JSX, ReactElement, useRef} from 'react';
|
|
19
19
|
import ReactDOM from 'react-dom';
|
|
@@ -49,7 +49,7 @@ function SubmenuTrigger(props: SubmenuTriggerProps) {
|
|
|
49
49
|
let isMobile = useIsMobileDevice();
|
|
50
50
|
let onBackButtonPress = () => {
|
|
51
51
|
submenuTriggerState.close();
|
|
52
|
-
if (parentMenuRef.current && !parentMenuRef.current
|
|
52
|
+
if (parentMenuRef.current && !nodeContains(parentMenuRef.current, document.activeElement)) {
|
|
53
53
|
parentMenuRef.current.focus();
|
|
54
54
|
}
|
|
55
55
|
};
|
package/src/useCloseOnScroll.ts
CHANGED
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
* governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
|
+
import {nodeContains} from '@react-aria/utils';
|
|
13
14
|
import {RefObject} from '@react-types/shared';
|
|
14
15
|
import {useEffect} from 'react';
|
|
15
16
|
|
|
@@ -39,7 +40,7 @@ export function useCloseOnScroll(opts: CloseOnScrollOptions): void {
|
|
|
39
40
|
// Ignore if scrolling an scrollable region outside the trigger's tree.
|
|
40
41
|
let target = e.target;
|
|
41
42
|
// window is not a Node and doesn't have contain, but window contains everything
|
|
42
|
-
if (!triggerRef.current || ((target instanceof Node) && !target
|
|
43
|
+
if (!triggerRef.current || ((target instanceof Node) && !nodeContains(target, triggerRef.current))) {
|
|
43
44
|
return;
|
|
44
45
|
}
|
|
45
46
|
|
|
@@ -12,10 +12,10 @@
|
|
|
12
12
|
|
|
13
13
|
import {calculatePosition, getRect, PositionResult} from './calculatePosition';
|
|
14
14
|
import {DOMAttributes, RefObject} from '@react-types/shared';
|
|
15
|
+
import {nodeContains, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
|
|
15
16
|
import {Placement, PlacementAxis, PositionProps} from '@react-types/overlays';
|
|
16
17
|
import {useCallback, useEffect, useRef, useState} from 'react';
|
|
17
18
|
import {useCloseOnScroll} from './useCloseOnScroll';
|
|
18
|
-
import {useLayoutEffect, useResizeObserver} from '@react-aria/utils';
|
|
19
19
|
import {useLocale} from '@react-aria/i18n';
|
|
20
20
|
|
|
21
21
|
export interface AriaPositionProps extends PositionProps {
|
|
@@ -154,7 +154,7 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
|
|
|
154
154
|
// so it can be restored after repositioning. This way if the overlay height
|
|
155
155
|
// changes, the focused element appears to stay in the same position.
|
|
156
156
|
let anchor: ScrollAnchor | null = null;
|
|
157
|
-
if (scrollRef.current && scrollRef.current
|
|
157
|
+
if (scrollRef.current && nodeContains(scrollRef.current, document.activeElement)) {
|
|
158
158
|
let anchorRect = document.activeElement?.getBoundingClientRect();
|
|
159
159
|
let scrollRect = scrollRef.current.getBoundingClientRect();
|
|
160
160
|
// Anchor from the top if the offset is in the top half of the scrollable element,
|