@react-spectrum/menu 3.22.9 → 3.22.11
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 +4 -3
- package/dist/ContextualHelpTrigger.main.js.map +1 -1
- package/dist/ContextualHelpTrigger.mjs +4 -3
- package/dist/ContextualHelpTrigger.module.js +4 -3
- package/dist/ContextualHelpTrigger.module.js.map +1 -1
- package/dist/SubmenuTrigger.main.js +3 -3
- package/dist/SubmenuTrigger.main.js.map +1 -1
- package/dist/SubmenuTrigger.mjs +4 -4
- package/dist/SubmenuTrigger.module.js +4 -4
- package/dist/SubmenuTrigger.module.js.map +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +23 -23
- package/src/ContextualHelpTrigger.tsx +3 -2
- package/src/SubmenuTrigger.tsx +3 -3
- package/src/useCloseOnScroll.ts +4 -3
- package/dist/Popover.main.js +0 -196
- package/dist/Popover.main.js.map +0 -1
- package/dist/Popover.mjs +0 -191
- package/dist/Popover.module.js +0 -191
- package/dist/Popover.module.js.map +0 -1
- package/dist/Underlay.main.js +0 -54
- package/dist/Underlay.main.js.map +0 -1
- package/dist/Underlay.mjs +0 -49
- package/dist/Underlay.module.js +0 -49
- package/dist/Underlay.module.js.map +0 -1
- package/dist/calculatePosition.main.js +0 -392
- package/dist/calculatePosition.main.js.map +0 -1
- package/dist/calculatePosition.mjs +0 -386
- package/dist/calculatePosition.module.js +0 -386
- package/dist/calculatePosition.module.js.map +0 -1
- package/dist/menu.2259a533.css +0 -210
- package/dist/menu.2259a533.css.map +0 -1
- package/dist/menu.359a0c0a.css +0 -131
- package/dist/menu.359a0c0a.css.map +0 -1
- package/dist/menu.57b3a408.css +0 -12
- package/dist/menu.57b3a408.css.map +0 -1
- package/dist/overlays_css.main.js +0 -35
- package/dist/overlays_css.main.js.map +0 -1
- package/dist/overlays_css.mjs +0 -37
- package/dist/overlays_css.module.js +0 -37
- package/dist/overlays_css.module.js.map +0 -1
- package/dist/popover_vars_css.main.js +0 -83
- package/dist/popover_vars_css.main.js.map +0 -1
- package/dist/popover_vars_css.mjs +0 -85
- package/dist/popover_vars_css.module.js +0 -85
- package/dist/popover_vars_css.module.js.map +0 -1
- package/dist/underlay_vars_css.main.js +0 -50
- package/dist/underlay_vars_css.main.js.map +0 -1
- package/dist/underlay_vars_css.mjs +0 -52
- package/dist/underlay_vars_css.module.js +0 -52
- package/dist/underlay_vars_css.module.js.map +0 -1
- package/dist/useCloseOnScroll.main.js +0 -49
- package/dist/useCloseOnScroll.main.js.map +0 -1
- package/dist/useCloseOnScroll.mjs +0 -44
- package/dist/useCloseOnScroll.module.js +0 -44
- package/dist/useCloseOnScroll.module.js.map +0 -1
- package/dist/useOverlayPosition.main.js +0 -225
- package/dist/useOverlayPosition.main.js.map +0 -1
- package/dist/useOverlayPosition.mjs +0 -220
- package/dist/useOverlayPosition.module.js +0 -220
- package/dist/useOverlayPosition.module.js.map +0 -1
- package/dist/usePopover.main.js +0 -73
- package/dist/usePopover.main.js.map +0 -1
- package/dist/usePopover.mjs +0 -68
- package/dist/usePopover.module.js +0 -68
- package/dist/usePopover.module.js.map +0 -1
- package/src/Popover.tsx +0 -240
- package/src/Underlay.tsx +0 -43
- package/src/calculatePosition.ts +0 -627
- package/src/useOverlayPosition.ts +0 -327
- package/src/usePopover.ts +0 -136
|
@@ -7,6 +7,7 @@ var $63a7dff9cbe2d046$exports = require("./Menu.main.js");
|
|
|
7
7
|
var $hdb2e$reactspectrumutils = require("@react-spectrum/utils");
|
|
8
8
|
var $hdb2e$reactariafocus = require("@react-aria/focus");
|
|
9
9
|
var $hdb2e$reactariainteractions = require("@react-aria/interactions");
|
|
10
|
+
var $hdb2e$reactariautils = require("@react-aria/utils");
|
|
10
11
|
var $hdb2e$reactspectrumoverlays = require("@react-spectrum/overlays");
|
|
11
12
|
var $hdb2e$react = require("react");
|
|
12
13
|
var $hdb2e$reactdom = require("react-dom");
|
|
@@ -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.isFocusWithin)(parentMenuRef.current)) parentMenuRef.current.focus();
|
|
105
106
|
}, 220); // Matches transition duration
|
|
106
107
|
};
|
|
107
108
|
if (isMobile) {
|
|
@@ -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 {isFocusWithin, nodeContains} from '@react-aria/utils';\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 && (!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 && !isFocusWithin(parentMenuRef.current)) {\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"}
|
|
@@ -7,6 +7,7 @@ import {TrayHeaderWrapper as $49b26f4b606348f6$export$3dfe97b5c32d8d8c} from "./
|
|
|
7
7
|
import {unwrapDOMRef as $7Y1uy$unwrapDOMRef, useIsMobileDevice as $7Y1uy$useIsMobileDevice, classNames as $7Y1uy$classNames, SlotProvider as $7Y1uy$SlotProvider} from "@react-spectrum/utils";
|
|
8
8
|
import {FocusScope as $7Y1uy$FocusScope} from "@react-aria/focus";
|
|
9
9
|
import {getInteractionModality as $7Y1uy$getInteractionModality} from "@react-aria/interactions";
|
|
10
|
+
import {nodeContains as $7Y1uy$nodeContains, isFocusWithin as $7Y1uy$isFocusWithin} from "@react-aria/utils";
|
|
10
11
|
import {Popover as $7Y1uy$Popover} from "@react-spectrum/overlays";
|
|
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";
|
|
@@ -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$isFocusWithin)(parentMenuRef.current)) parentMenuRef.current.focus();
|
|
99
100
|
}, 220); // Matches transition duration
|
|
100
101
|
};
|
|
101
102
|
if (isMobile) {
|
|
@@ -7,6 +7,7 @@ import {TrayHeaderWrapper as $49b26f4b606348f6$export$3dfe97b5c32d8d8c} from "./
|
|
|
7
7
|
import {unwrapDOMRef as $7Y1uy$unwrapDOMRef, useIsMobileDevice as $7Y1uy$useIsMobileDevice, classNames as $7Y1uy$classNames, SlotProvider as $7Y1uy$SlotProvider} from "@react-spectrum/utils";
|
|
8
8
|
import {FocusScope as $7Y1uy$FocusScope} from "@react-aria/focus";
|
|
9
9
|
import {getInteractionModality as $7Y1uy$getInteractionModality} from "@react-aria/interactions";
|
|
10
|
+
import {nodeContains as $7Y1uy$nodeContains, isFocusWithin as $7Y1uy$isFocusWithin} from "@react-aria/utils";
|
|
10
11
|
import {Popover as $7Y1uy$Popover} from "@react-spectrum/overlays";
|
|
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";
|
|
@@ -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$isFocusWithin)(parentMenuRef.current)) parentMenuRef.current.focus();
|
|
99
100
|
}, 220); // Matches transition duration
|
|
100
101
|
};
|
|
101
102
|
if (isMobile) {
|
|
@@ -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 {isFocusWithin, nodeContains} from '@react-aria/utils';\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 && (!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 && !isFocusWithin(parentMenuRef.current)) {\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,9 +1,9 @@
|
|
|
1
1
|
var $cac834c4bc0a51d3$exports = require("./context.main.js");
|
|
2
|
-
var $25179ade6a3f679b$exports = require("./Popover.main.js");
|
|
3
2
|
require("./menu.2ec1fdaf.css");
|
|
4
3
|
var $3deee0fd2b46e64f$exports = require("./menu_vars_css.main.js");
|
|
5
4
|
var $esjnM$reactspectrumutils = require("@react-spectrum/utils");
|
|
6
5
|
var $esjnM$reactariautils = require("@react-aria/utils");
|
|
6
|
+
var $esjnM$reactspectrumoverlays = require("@react-spectrum/overlays");
|
|
7
7
|
var $esjnM$react = require("react");
|
|
8
8
|
var $esjnM$reactdom = require("react-dom");
|
|
9
9
|
var $esjnM$reactariai18n = require("@react-aria/i18n");
|
|
@@ -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.isFocusWithin)(parentMenuRef.current)) parentMenuRef.current.focus();
|
|
59
59
|
};
|
|
60
60
|
let { direction: direction } = (0, $esjnM$reactariai18n.useLocale)();
|
|
61
61
|
let mobileSubmenuKeyDown = (e)=>{
|
|
@@ -84,7 +84,7 @@ function $86ed235c4695ff3f$var$SubmenuTrigger(props) {
|
|
|
84
84
|
submenuTriggerState.close();
|
|
85
85
|
(_parentMenuRef_current = parentMenuRef.current) === null || _parentMenuRef_current === void 0 ? void 0 : _parentMenuRef_current.focus();
|
|
86
86
|
};
|
|
87
|
-
overlay = /*#__PURE__*/ (0, ($parcel$interopDefault($esjnM$react))).createElement((0, $
|
|
87
|
+
overlay = /*#__PURE__*/ (0, ($parcel$interopDefault($esjnM$react))).createElement((0, $esjnM$reactspectrumoverlays.Popover), {
|
|
88
88
|
...popoverProps,
|
|
89
89
|
onDismissButtonPress: onDismissButtonPress,
|
|
90
90
|
UNSAFE_className: (0, $esjnM$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3deee0fd2b46e64f$exports))), 'spectrum-Submenu-popover'),
|
|
@@ -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,
|
|
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,CAAA,GAAA,mCAAY,EAAE,cAAc,OAAO,GAC/D,cAAc,OAAO,CAAC,KAAK;IAE/B;IAEA,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,8BAAQ;IAC1B,IAAI,uBAAuB,CAAC;QAC1B,OAAQ,EAAE,GAAG;YACX,KAAK;oBAED;gBADF,IAAI,cAAc,QAChB,sBAAA,WAAW,OAAO,cAAlB,0CAAA,oBAAoB,KAAK;gBAE3B;YACF,KAAK;oBAED;gBADF,IAAI,cAAc,QAChB,uBAAA,WAAW,OAAO,cAAlB,2CAAA,qBAAoB,KAAK;gBAE3B;QACJ;IACF;IAEA,IAAI;IAEJ,IAAI,UAAW;YAGb;QAFA,OAAO,oBAAoB,MAAM;QACjC,OAAO,oBAAoB,aAAa;;QACxC,eAAA,gBAAA,cAAa,4DAAb,cAAa,YAAc;QAC3B,IAAI,iBAAiB,OAAO,IAAI,oBAAoB,MAAM,EACxD,wBAAU,CAAA,GAAA,yCAAO,EAAE,YAAY,CAAC,MAAM,iBAAiB,OAAO;IAElE,OAAO;QACL,IAAI,uBAAuB;gBAEzB;YADA,oBAAoB,KAAK;aACzB,yBAAA,cAAc,OAAO,cAArB,6CAAA,uBAAuB,KAAK;QAC9B;QAEA,wBACE,0DAAC,CAAA,GAAA,oCAAM;YACJ,GAAG,YAAY;YAChB,sBAAsB;YACtB,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YACrC,WAAW;YACX,kBAAkB;YAClB,0BAAA;YACA,cAAc;gBAAC,UAAU;gBAAS,UAAU;gBAAW,aAAa;YAAK;YACzE,OAAO;YACP,YAAY;YACZ,WAAW;YACX,WAAU;YACV,WAAA;WACC;IAGP;IAEA,IAAI,cAAc;QAChB,GAAG,CAAA,GAAA,gCAAS,EAAE,cAAc;YAC1B,KAAK;YACL,cAAc,WAAW;gBACvB,OAAO;gBACP,WAAW;YACb,IAAI;YACJ,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;gBAAC,yBAAyB,CAAC;YAAQ;YACxE,GAAI,YAAY;mCACd;gBACA,WAAW;YACb,CAAC;QACH,EAAE;IACJ;IAEA,qBACE,oIACE,0DAAC,CAAA,GAAA,+CAAoB,EAAE,QAAQ;QAAC,OAAO;wBAAC;YAAY,GAAG,mBAAmB;QAAA;OAAI,4BAC9E,0DAAC,CAAA,GAAA,qCAAU,EAAE,QAAQ;QAAC,OAAO;OAC1B;AAIT;AAEA,qCAAe,iBAAiB,GAAG,UAAW,KAAkC;IAC9E,IAAI,aAA6B,EAAE;IACnC,CAAA,GAAA,sCAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,QAAQ,EAAE,CAAA;QACrC,kBAAI,CAAA,GAAA,sCAAI,EAAE,cAAc,CAAC,QACvB,WAAW,IAAI,CAAC;IAEpB;IACA,IAAI,CAAC,QAAQ,GAAG;IAChB,IAAI,GAAG,QAAQ,GAAG,MAAM,QAAQ;IAEhC,MAAM;QACJ,uBAAS,CAAA,GAAA,sCAAI,EAAE,YAAY,CAAC,SAAS;YAAC,GAAG,QAAQ,KAAK;YAAS,eAAe;YAAM,WAAW;QAAI;QACnG,SAAS,CAAC,wBACR,0DAAC;gBAAe,KAAK,QAAQ,GAAG;gBAAE,WAAW,QAAQ,GAAG;gBAAG,GAAG,KAAK;eAChE,SACA;IAGP;AACF;AAEA,IAAI,4CAAkB","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 {isFocusWithin, mergeProps} from '@react-aria/utils';\nimport {Key} from '@react-types/shared';\nimport {MenuContext, SubmenuTriggerContext, useMenuStateContext} from './context';\nimport {Popover} from '@react-spectrum/overlays';\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 && !isFocusWithin(parentMenuRef.current)) {\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
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {MenuContext as $d94604d52c3e3feb$export$c7e742effb1c51e2, SubmenuTriggerContext as $d94604d52c3e3feb$export$8d97fe02339fc0e3, useMenuStateContext as $d94604d52c3e3feb$export$efa3856fc0e85e7f} from "./context.mjs";
|
|
2
|
-
import {Popover as $bf810f3fb07f8592$export$5b6b19405a83ff9d} from "./Popover.mjs";
|
|
3
2
|
import "./menu.2ec1fdaf.css";
|
|
4
3
|
import $byZ4r$menu_vars_cssmodulejs from "./menu_vars_css.mjs";
|
|
5
4
|
import {useIsMobileDevice as $byZ4r$useIsMobileDevice, classNames as $byZ4r$classNames} from "@react-spectrum/utils";
|
|
6
|
-
import {mergeProps as $byZ4r$mergeProps} from "@react-aria/utils";
|
|
5
|
+
import {isFocusWithin as $byZ4r$isFocusWithin, mergeProps as $byZ4r$mergeProps} from "@react-aria/utils";
|
|
6
|
+
import {Popover as $byZ4r$Popover} from "@react-spectrum/overlays";
|
|
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$isFocusWithin)(parentMenuRef.current)) parentMenuRef.current.focus();
|
|
53
53
|
};
|
|
54
54
|
let { direction: direction } = (0, $byZ4r$useLocale)();
|
|
55
55
|
let mobileSubmenuKeyDown = (e)=>{
|
|
@@ -78,7 +78,7 @@ function $3f13e15cf95c3893$var$SubmenuTrigger(props) {
|
|
|
78
78
|
submenuTriggerState.close();
|
|
79
79
|
(_parentMenuRef_current = parentMenuRef.current) === null || _parentMenuRef_current === void 0 ? void 0 : _parentMenuRef_current.focus();
|
|
80
80
|
};
|
|
81
|
-
overlay = /*#__PURE__*/ (0, $byZ4r$react).createElement((0, $
|
|
81
|
+
overlay = /*#__PURE__*/ (0, $byZ4r$react).createElement((0, $byZ4r$Popover), {
|
|
82
82
|
...popoverProps,
|
|
83
83
|
onDismissButtonPress: onDismissButtonPress,
|
|
84
84
|
UNSAFE_className: (0, $byZ4r$classNames)((0, ($parcel$interopDefault($byZ4r$menu_vars_cssmodulejs))), 'spectrum-Submenu-popover'),
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {MenuContext as $d94604d52c3e3feb$export$c7e742effb1c51e2, SubmenuTriggerContext as $d94604d52c3e3feb$export$8d97fe02339fc0e3, useMenuStateContext as $d94604d52c3e3feb$export$efa3856fc0e85e7f} from "./context.module.js";
|
|
2
|
-
import {Popover as $bf810f3fb07f8592$export$5b6b19405a83ff9d} from "./Popover.module.js";
|
|
3
2
|
import "./menu.2ec1fdaf.css";
|
|
4
3
|
import $byZ4r$menu_vars_cssmodulejs from "./menu_vars_css.module.js";
|
|
5
4
|
import {useIsMobileDevice as $byZ4r$useIsMobileDevice, classNames as $byZ4r$classNames} from "@react-spectrum/utils";
|
|
6
|
-
import {mergeProps as $byZ4r$mergeProps} from "@react-aria/utils";
|
|
5
|
+
import {isFocusWithin as $byZ4r$isFocusWithin, mergeProps as $byZ4r$mergeProps} from "@react-aria/utils";
|
|
6
|
+
import {Popover as $byZ4r$Popover} from "@react-spectrum/overlays";
|
|
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$isFocusWithin)(parentMenuRef.current)) parentMenuRef.current.focus();
|
|
53
53
|
};
|
|
54
54
|
let { direction: direction } = (0, $byZ4r$useLocale)();
|
|
55
55
|
let mobileSubmenuKeyDown = (e)=>{
|
|
@@ -78,7 +78,7 @@ function $3f13e15cf95c3893$var$SubmenuTrigger(props) {
|
|
|
78
78
|
submenuTriggerState.close();
|
|
79
79
|
(_parentMenuRef_current = parentMenuRef.current) === null || _parentMenuRef_current === void 0 ? void 0 : _parentMenuRef_current.focus();
|
|
80
80
|
};
|
|
81
|
-
overlay = /*#__PURE__*/ (0, $byZ4r$react).createElement((0, $
|
|
81
|
+
overlay = /*#__PURE__*/ (0, $byZ4r$react).createElement((0, $byZ4r$Popover), {
|
|
82
82
|
...popoverProps,
|
|
83
83
|
onDismissButtonPress: onDismissButtonPress,
|
|
84
84
|
UNSAFE_className: (0, $byZ4r$classNames)((0, ($parcel$interopDefault($byZ4r$menu_vars_cssmodulejs))), 'spectrum-Submenu-popover'),
|
|
@@ -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,
|
|
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 {isFocusWithin, mergeProps} from '@react-aria/utils';\nimport {Key} from '@react-types/shared';\nimport {MenuContext, SubmenuTriggerContext, useMenuStateContext} from './context';\nimport {Popover} from '@react-spectrum/overlays';\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 && !isFocusWithin(parentMenuRef.current)) {\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;
|
|
1
|
+
{"mappings":";;;ACwBA;;;GAGG;AACH,OAAO,MAAM,sHAgGX,CAAC;ACpGH;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/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,"/*\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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-spectrum/menu",
|
|
3
|
-
"version": "3.22.
|
|
3
|
+
"version": "3.22.11",
|
|
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.5",
|
|
44
|
+
"@react-aria/i18n": "^3.12.16",
|
|
45
|
+
"@react-aria/interactions": "^3.27.1",
|
|
46
|
+
"@react-aria/menu": "^3.21.0",
|
|
47
|
+
"@react-aria/overlays": "^3.31.2",
|
|
48
|
+
"@react-aria/separator": "^3.4.16",
|
|
49
|
+
"@react-aria/utils": "^3.33.1",
|
|
50
|
+
"@react-spectrum/button": "^3.17.7",
|
|
51
|
+
"@react-spectrum/layout": "^3.6.22",
|
|
52
|
+
"@react-spectrum/overlays": "^5.9.3",
|
|
53
|
+
"@react-spectrum/text": "^3.5.25",
|
|
54
|
+
"@react-spectrum/utils": "^3.12.12",
|
|
55
|
+
"@react-stately/collections": "^3.12.10",
|
|
56
|
+
"@react-stately/menu": "^3.9.11",
|
|
57
|
+
"@react-stately/overlays": "^3.6.23",
|
|
58
|
+
"@react-stately/tree": "^3.9.6",
|
|
59
|
+
"@react-types/menu": "^3.10.7",
|
|
60
|
+
"@react-types/overlays": "^3.9.4",
|
|
61
|
+
"@react-types/shared": "^3.33.1",
|
|
62
|
+
"@spectrum-icons/ui": "^3.6.23",
|
|
63
|
+
"@spectrum-icons/workflow": "^4.2.28",
|
|
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": "8df187370053aa35f553cb388ad670f65e1ab371"
|
|
78
78
|
}
|
|
@@ -15,6 +15,7 @@ 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 {isFocusWithin, nodeContains} from '@react-aria/utils';
|
|
18
19
|
import {Popover} from '@react-spectrum/overlays';
|
|
19
20
|
import React, {JSX, KeyboardEventHandler, ReactElement, useEffect, useRef, useState} from 'react';
|
|
20
21
|
import ReactDOM from 'react-dom';
|
|
@@ -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 && !isFocusWithin(parentMenuRef.current)) {
|
|
102
103
|
parentMenuRef.current.focus();
|
|
103
104
|
}
|
|
104
105
|
}, 220); // Matches transition duration
|
package/src/SubmenuTrigger.tsx
CHANGED
|
@@ -11,10 +11,10 @@
|
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
import {classNames, useIsMobileDevice} from '@react-spectrum/utils';
|
|
14
|
+
import {isFocusWithin, mergeProps} from '@react-aria/utils';
|
|
14
15
|
import {Key} from '@react-types/shared';
|
|
15
16
|
import {MenuContext, SubmenuTriggerContext, useMenuStateContext} from './context';
|
|
16
|
-
import {
|
|
17
|
-
import {Popover} from './Popover';
|
|
17
|
+
import {Popover} from '@react-spectrum/overlays';
|
|
18
18
|
import React, {type JSX, ReactElement, useRef} from 'react';
|
|
19
19
|
import ReactDOM from 'react-dom';
|
|
20
20
|
import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
|
|
@@ -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 && !isFocusWithin(parentMenuRef.current)) {
|
|
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 {getEventTarget, nodeContains} from '@react-aria/utils';
|
|
13
14
|
import {RefObject} from '@react-types/shared';
|
|
14
15
|
import {useEffect} from 'react';
|
|
15
16
|
|
|
@@ -37,16 +38,16 @@ export function useCloseOnScroll(opts: CloseOnScrollOptions): void {
|
|
|
37
38
|
|
|
38
39
|
let onScroll = (e: Event) => {
|
|
39
40
|
// Ignore if scrolling an scrollable region outside the trigger's tree.
|
|
40
|
-
let target = e
|
|
41
|
+
let target = getEventTarget(e);
|
|
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
|
|
|
46
47
|
// Ignore scroll events on any input or textarea as the cursor position can cause it to scroll
|
|
47
48
|
// such as in a combobox. Clicking the dropdown button places focus on the input, and if the
|
|
48
49
|
// text inside the input extends beyond the 'end', then it will scroll so the cursor is visible at the end.
|
|
49
|
-
if (e
|
|
50
|
+
if (getEventTarget(e) instanceof HTMLInputElement || getEventTarget(e) instanceof HTMLTextAreaElement) {
|
|
50
51
|
return;
|
|
51
52
|
}
|
|
52
53
|
|