@react-spectrum/menu 3.20.5 → 3.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/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/Menu.main.js +7 -2
- package/dist/Menu.main.js.map +1 -1
- package/dist/Menu.mjs +7 -2
- package/dist/Menu.module.js +7 -2
- package/dist/Menu.module.js.map +1 -1
- package/dist/MenuItem.main.js.map +1 -1
- package/dist/MenuItem.module.js.map +1 -1
- package/dist/MenuSection.main.js +2 -1
- package/dist/MenuSection.main.js.map +1 -1
- package/dist/MenuSection.mjs +2 -1
- package/dist/MenuSection.module.js +2 -1
- package/dist/MenuSection.module.js.map +1 -1
- package/dist/MenuTrigger.main.js +2 -2
- package/dist/MenuTrigger.main.js.map +1 -1
- package/dist/MenuTrigger.mjs +2 -2
- package/dist/MenuTrigger.module.js +2 -2
- package/dist/MenuTrigger.module.js.map +1 -1
- package/dist/SubmenuTrigger.main.js +5 -3
- package/dist/SubmenuTrigger.main.js.map +1 -1
- package/dist/SubmenuTrigger.mjs +5 -3
- package/dist/SubmenuTrigger.module.js +5 -3
- package/dist/SubmenuTrigger.module.js.map +1 -1
- package/dist/ar-AE.main.js.map +1 -1
- package/dist/ar-AE.module.js.map +1 -1
- package/dist/bg-BG.main.js.map +1 -1
- package/dist/bg-BG.module.js.map +1 -1
- package/dist/context.main.js.map +1 -1
- package/dist/context.module.js.map +1 -1
- package/dist/cs-CZ.main.js.map +1 -1
- package/dist/cs-CZ.module.js.map +1 -1
- package/dist/da-DK.main.js.map +1 -1
- package/dist/da-DK.module.js.map +1 -1
- package/dist/de-DE.main.js.map +1 -1
- package/dist/de-DE.module.js.map +1 -1
- package/dist/el-GR.main.js.map +1 -1
- package/dist/el-GR.module.js.map +1 -1
- package/dist/en-US.main.js.map +1 -1
- package/dist/en-US.module.js.map +1 -1
- package/dist/es-ES.main.js.map +1 -1
- package/dist/es-ES.module.js.map +1 -1
- package/dist/et-EE.main.js.map +1 -1
- package/dist/et-EE.module.js.map +1 -1
- package/dist/fi-FI.main.js.map +1 -1
- package/dist/fi-FI.module.js.map +1 -1
- package/dist/fr-FR.main.js.map +1 -1
- package/dist/fr-FR.module.js.map +1 -1
- package/dist/he-IL.main.js.map +1 -1
- package/dist/he-IL.module.js.map +1 -1
- package/dist/hr-HR.main.js.map +1 -1
- package/dist/hr-HR.module.js.map +1 -1
- package/dist/hu-HU.main.js.map +1 -1
- package/dist/hu-HU.module.js.map +1 -1
- package/dist/it-IT.main.js.map +1 -1
- package/dist/it-IT.module.js.map +1 -1
- package/dist/ja-JP.main.js.map +1 -1
- package/dist/ja-JP.module.js.map +1 -1
- package/dist/ko-KR.main.js.map +1 -1
- package/dist/ko-KR.module.js.map +1 -1
- package/dist/lt-LT.main.js.map +1 -1
- package/dist/lt-LT.module.js.map +1 -1
- package/dist/lv-LV.main.js.map +1 -1
- package/dist/lv-LV.module.js.map +1 -1
- package/dist/menu_vars_css.main.js.map +1 -1
- package/dist/menu_vars_css.module.js.map +1 -1
- package/dist/nb-NO.main.js.map +1 -1
- package/dist/nb-NO.module.js.map +1 -1
- package/dist/nl-NL.main.js.map +1 -1
- package/dist/nl-NL.module.js.map +1 -1
- package/dist/pl-PL.main.js.map +1 -1
- package/dist/pl-PL.module.js.map +1 -1
- package/dist/pt-BR.main.js.map +1 -1
- package/dist/pt-BR.module.js.map +1 -1
- package/dist/pt-PT.main.js.map +1 -1
- package/dist/pt-PT.module.js.map +1 -1
- package/dist/ro-RO.main.js.map +1 -1
- package/dist/ro-RO.module.js.map +1 -1
- package/dist/ru-RU.main.js.map +1 -1
- package/dist/ru-RU.module.js.map +1 -1
- package/dist/sk-SK.main.js.map +1 -1
- package/dist/sk-SK.module.js.map +1 -1
- package/dist/sl-SI.main.js.map +1 -1
- package/dist/sl-SI.module.js.map +1 -1
- package/dist/sr-SP.main.js.map +1 -1
- package/dist/sr-SP.module.js.map +1 -1
- package/dist/sv-SE.main.js.map +1 -1
- package/dist/sv-SE.module.js.map +1 -1
- package/dist/tr-TR.main.js.map +1 -1
- package/dist/tr-TR.module.js.map +1 -1
- package/dist/types.d.ts.map +1 -1
- package/dist/uk-UA.main.js.map +1 -1
- package/dist/uk-UA.module.js.map +1 -1
- package/dist/zh-CN.main.js.map +1 -1
- package/dist/zh-CN.module.js.map +1 -1
- package/dist/zh-TW.main.js.map +1 -1
- package/dist/zh-TW.module.js.map +1 -1
- package/package.json +25 -25
- package/src/ContextualHelpTrigger.tsx +8 -8
- package/src/Menu.tsx +13 -8
- package/src/MenuItem.tsx +1 -1
- package/src/MenuSection.tsx +2 -1
- package/src/MenuTrigger.tsx +2 -2
- package/src/SubmenuTrigger.tsx +7 -7
- package/src/context.ts +11 -11
|
@@ -90,8 +90,8 @@ function $db380858d398b658$var$ContextualHelpTrigger(props) {
|
|
|
90
90
|
let [trigger] = (0, ($parcel$interopDefault($hdb2e$react))).Children.toArray(props.children);
|
|
91
91
|
let [, content] = props.children;
|
|
92
92
|
let onBlurWithin = (e)=>{
|
|
93
|
-
var _popoverRef_current_UNSAFE_getDOMNode
|
|
94
|
-
if (e.relatedTarget && popoverRef.current && !(
|
|
93
|
+
var _popoverRef_current_UNSAFE_getDOMNode;
|
|
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
95
|
if (submenuTriggerState.isOpen) submenuTriggerState.close();
|
|
96
96
|
}
|
|
97
97
|
};
|
|
@@ -151,7 +151,8 @@ function $db380858d398b658$var$ContextualHelpTrigger(props) {
|
|
|
151
151
|
hideArrow: true,
|
|
152
152
|
enableBothDismissButtons: true
|
|
153
153
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($hdb2e$react))).createElement((0, $hdb2e$reactariafocus.FocusScope), {
|
|
154
|
-
restoreFocus: true
|
|
154
|
+
restoreFocus: true,
|
|
155
|
+
contain: true
|
|
155
156
|
}, content));
|
|
156
157
|
}
|
|
157
158
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($hdb2e$react))).createElement((0, ($parcel$interopDefault($hdb2e$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($hdb2e$react))).createElement((0, $cac834c4bc0a51d3$exports.SubmenuTriggerContext).Provider, {
|
|
@@ -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 {FocusScope} from '@react-aria/focus';\nimport {getInteractionModality} from '@react-aria/interactions';\nimport helpStyles from '@adobe/spectrum-css-temp/components/contextualhelp/vars.css';\nimport {ItemProps, Key} from '@react-types/shared';\nimport {Popover} from '@react-spectrum/overlays';\nimport React, {JSX, 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(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 = (e: KeyboardEvent) => {\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>\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 (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 {Popover} from '@react-spectrum/overlays';\nimport React, {JSX, 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 = (e: KeyboardEvent) => {\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"}
|
|
@@ -84,8 +84,8 @@ function $726fb1b478e356bf$var$ContextualHelpTrigger(props) {
|
|
|
84
84
|
let [trigger] = (0, $7Y1uy$react).Children.toArray(props.children);
|
|
85
85
|
let [, content] = props.children;
|
|
86
86
|
let onBlurWithin = (e)=>{
|
|
87
|
-
var _popoverRef_current_UNSAFE_getDOMNode
|
|
88
|
-
if (e.relatedTarget && popoverRef.current && !(
|
|
87
|
+
var _popoverRef_current_UNSAFE_getDOMNode;
|
|
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
89
|
if (submenuTriggerState.isOpen) submenuTriggerState.close();
|
|
90
90
|
}
|
|
91
91
|
};
|
|
@@ -145,7 +145,8 @@ function $726fb1b478e356bf$var$ContextualHelpTrigger(props) {
|
|
|
145
145
|
hideArrow: true,
|
|
146
146
|
enableBothDismissButtons: true
|
|
147
147
|
}, /*#__PURE__*/ (0, $7Y1uy$react).createElement((0, $7Y1uy$FocusScope), {
|
|
148
|
-
restoreFocus: true
|
|
148
|
+
restoreFocus: true,
|
|
149
|
+
contain: true
|
|
149
150
|
}, content));
|
|
150
151
|
}
|
|
151
152
|
return /*#__PURE__*/ (0, $7Y1uy$react).createElement((0, $7Y1uy$react).Fragment, null, /*#__PURE__*/ (0, $7Y1uy$react).createElement((0, $d94604d52c3e3feb$export$8d97fe02339fc0e3).Provider, {
|
|
@@ -84,8 +84,8 @@ function $726fb1b478e356bf$var$ContextualHelpTrigger(props) {
|
|
|
84
84
|
let [trigger] = (0, $7Y1uy$react).Children.toArray(props.children);
|
|
85
85
|
let [, content] = props.children;
|
|
86
86
|
let onBlurWithin = (e)=>{
|
|
87
|
-
var _popoverRef_current_UNSAFE_getDOMNode
|
|
88
|
-
if (e.relatedTarget && popoverRef.current && !(
|
|
87
|
+
var _popoverRef_current_UNSAFE_getDOMNode;
|
|
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
89
|
if (submenuTriggerState.isOpen) submenuTriggerState.close();
|
|
90
90
|
}
|
|
91
91
|
};
|
|
@@ -145,7 +145,8 @@ function $726fb1b478e356bf$var$ContextualHelpTrigger(props) {
|
|
|
145
145
|
hideArrow: true,
|
|
146
146
|
enableBothDismissButtons: true
|
|
147
147
|
}, /*#__PURE__*/ (0, $7Y1uy$react).createElement((0, $7Y1uy$FocusScope), {
|
|
148
|
-
restoreFocus: true
|
|
148
|
+
restoreFocus: true,
|
|
149
|
+
contain: true
|
|
149
150
|
}, content));
|
|
150
151
|
}
|
|
151
152
|
return /*#__PURE__*/ (0, $7Y1uy$react).createElement((0, $7Y1uy$react).Fragment, null, /*#__PURE__*/ (0, $7Y1uy$react).createElement((0, $d94604d52c3e3feb$export$8d97fe02339fc0e3).Provider, {
|
|
@@ -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 {FocusScope} from '@react-aria/focus';\nimport {getInteractionModality} from '@react-aria/interactions';\nimport helpStyles from '@adobe/spectrum-css-temp/components/contextualhelp/vars.css';\nimport {ItemProps, Key} from '@react-types/shared';\nimport {Popover} from '@react-spectrum/overlays';\nimport React, {JSX, 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(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 = (e: KeyboardEvent) => {\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>\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 (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 {Popover} from '@react-spectrum/overlays';\nimport React, {JSX, 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 = (e: KeyboardEvent) => {\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"}
|
package/dist/Menu.main.js
CHANGED
|
@@ -88,12 +88,17 @@ function $63a7dff9cbe2d046$var$Menu(props, ref) {
|
|
|
88
88
|
]);
|
|
89
89
|
var _contextProps_submenuLevel;
|
|
90
90
|
let menuLevel = (_contextProps_submenuLevel = contextProps.submenuLevel) !== null && _contextProps_submenuLevel !== void 0 ? _contextProps_submenuLevel : -1;
|
|
91
|
-
let
|
|
91
|
+
let nextMenuLevelKey = rootMenuTriggerState === null || rootMenuTriggerState === void 0 ? void 0 : rootMenuTriggerState.expandedKeysStack[menuLevel + 1];
|
|
92
|
+
let hasOpenSubmenu = false;
|
|
93
|
+
if (nextMenuLevelKey != null) {
|
|
94
|
+
let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);
|
|
95
|
+
hasOpenSubmenu = nextMenuLevel != null;
|
|
96
|
+
}
|
|
92
97
|
(0, $hl8gx$reactariainteractions.useInteractOutside)({
|
|
93
98
|
ref: domRef,
|
|
94
99
|
onInteractOutside: (e)=>{
|
|
95
100
|
var _trayContainerRef_current;
|
|
96
|
-
if (!(popoverContainer === null || popoverContainer === void 0 ? void 0 : popoverContainer.contains(e.target)) && !((_trayContainerRef_current = trayContainerRef.current) === null || _trayContainerRef_current === void 0 ? void 0 : _trayContainerRef_current.contains(e.target))) rootMenuTriggerState.close();
|
|
101
|
+
if (!(popoverContainer === null || popoverContainer === void 0 ? void 0 : popoverContainer.contains(e.target)) && !((_trayContainerRef_current = trayContainerRef.current) === null || _trayContainerRef_current === void 0 ? void 0 : _trayContainerRef_current.contains(e.target))) rootMenuTriggerState === null || rootMenuTriggerState === void 0 ? void 0 : rootMenuTriggerState.close();
|
|
97
102
|
},
|
|
98
103
|
isDisabled: isSubmenu || !hasOpenSubmenu
|
|
99
104
|
});
|
package/dist/Menu.main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/menu/src/Menu.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 {ActionButton} from '@react-spectrum/button';\nimport ArrowDownSmall from '@spectrum-icons/ui/ArrowDownSmall';\nimport {classNames, useDOMRef, useIsMobileDevice, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport {FocusScope} from '@react-aria/focus';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {MenuContext, MenuStateContext, useMenuStateContext} from './context';\nimport {MenuItem} from './MenuItem';\nimport {MenuSection} from './MenuSection';\nimport {mergeProps, useLayoutEffect, useSlotId, useSyncRef} from '@react-aria/utils';\nimport React, {ReactElement, useContext, useEffect, useRef, useState} from 'react';\nimport {SpectrumMenuProps} from '@react-types/menu';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useInteractOutside} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenu} from '@react-aria/menu';\nimport {useTreeState} from '@react-stately/tree';\n\nfunction Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDivElement>) {\n let isSubmenu = true;\n let contextProps = useContext(MenuContext);\n let parentMenuContext = useMenuStateContext();\n let {rootMenuTriggerState, state: parentMenuTreeState} = parentMenuContext || {rootMenuTriggerState: contextProps.state};\n if (!parentMenuContext) {\n isSubmenu = false;\n }\n let completeProps = {\n ...mergeProps(contextProps, props)\n };\n let domRef = useDOMRef(ref);\n let [popoverContainer, setPopoverContainer] = useState(null);\n let trayContainerRef = useRef(null);\n let state = useTreeState(completeProps);\n let submenuRef = useRef<HTMLDivElement>(null);\n let {menuProps} = useMenu(completeProps, state, domRef);\n let {styleProps} = useStyleProps(completeProps);\n useSyncRef(contextProps, domRef);\n let [leftOffset, setLeftOffset] = useState({left: 0});\n let prevPopoverContainer = useRef(null);\n useEffect(() => {\n if (popoverContainer && prevPopoverContainer.current !== popoverContainer && leftOffset.left === 0) {\n prevPopoverContainer.current = popoverContainer;\n let {left} = popoverContainer.getBoundingClientRect();\n setLeftOffset({left: -1 * left});\n }\n }, [leftOffset, popoverContainer]);\n\n let menuLevel = contextProps.submenuLevel ?? -1;\n let hasOpenSubmenu = state.collection.getItem(rootMenuTriggerState?.expandedKeysStack[menuLevel + 1]) != null;\n useInteractOutside({\n ref: domRef,\n onInteractOutside: (e) => {\n if (!popoverContainer?.contains(e.target) && !trayContainerRef.current?.contains(e.target)) {\n rootMenuTriggerState.close();\n }\n },\n isDisabled: isSubmenu || !hasOpenSubmenu\n });\n\n return (\n <MenuStateContext.Provider value={{popoverContainer, trayContainerRef, menu: domRef, submenu: submenuRef, rootMenuTriggerState, state}}>\n <div style={{height: hasOpenSubmenu ? '100%' : undefined}} ref={trayContainerRef} />\n <FocusScope>\n <TrayHeaderWrapper\n onBackButtonPress={contextProps.onBackButtonPress}\n hasOpenSubmenu={hasOpenSubmenu}\n isSubmenu={isSubmenu}\n parentMenuTreeState={parentMenuTreeState}\n rootMenuTriggerState={rootMenuTriggerState}\n menuRef={domRef}>\n <div\n {...menuProps}\n style={mergeProps(styleProps.style, menuProps.style)}\n ref={domRef}\n className={\n classNames(\n styles,\n 'spectrum-Menu',\n styleProps.className\n )\n }>\n {[...state.collection].map(item => {\n if (item.type === 'section') {\n return (\n <MenuSection\n key={item.key}\n item={item}\n state={state} />\n );\n }\n\n let menuItem = (\n <MenuItem\n key={item.key}\n item={item}\n state={state} />\n );\n\n if (item.wrapper) {\n menuItem = item.wrapper(menuItem);\n }\n\n return menuItem;\n })}\n </div>\n </TrayHeaderWrapper>\n {rootMenuTriggerState?.isOpen && <div ref={setPopoverContainer} style={{width: '100vw', position: 'absolute', top: -5, ...leftOffset}} /> }\n </FocusScope>\n </MenuStateContext.Provider>\n );\n}\n\nexport function TrayHeaderWrapper(props) {\n let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown, menuRef} = props;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n let backButtonText = parentMenuTreeState?.collection.getItem(rootMenuTriggerState?.expandedKeysStack.slice(-1)[0])?.textValue;\n let backButtonLabel = stringFormatter.format('backButton', {\n prevMenuButton: backButtonText\n });\n let headingId = useSlotId();\n let isMobile = useIsMobileDevice();\n let {direction} = useLocale();\n\n let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n useLayoutEffect(() => {\n if (!hasOpenSubmenu) {\n setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n }\n }, [hasOpenSubmenu, isMobile]);\n\n let timeoutRef = useRef(null);\n let handleBackButtonPress = () => {\n setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n timeoutRef.current = setTimeout(() => {\n onBackButtonPress();\n }, 220); // Matches transition duration\n };\n\n useEffect(() => {\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n }, []);\n\n // When opening submenu in tray, focus the first item in the submenu after animation completes\n // This fixes an issue with iOS VO where the closed submenu was getting focus\n let focusTimeoutRef = useRef(null);\n useEffect(() => {\n if (isMobile && isSubmenu && !hasOpenSubmenu && traySubmenuAnimation === 'spectrum-TraySubmenu-enter') {\n focusTimeoutRef.current = setTimeout(() => {\n let firstItem = menuRef.current.querySelector('[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]') as HTMLElement;\n firstItem?.focus();\n }, 220);\n }\n return () => {\n if (focusTimeoutRef.current) {\n clearTimeout(focusTimeoutRef.current);\n }\n };\n }, [hasOpenSubmenu, isMobile, isSubmenu, menuRef, traySubmenuAnimation]);\n\n return (\n <>\n <div\n role={headingId ? 'dialog' : undefined}\n aria-labelledby={headingId}\n aria-hidden={isMobile && hasOpenSubmenu}\n data-testid=\"menu-wrapper\"\n className={\n classNames(\n styles,\n 'spectrum-Menu-wrapper',\n {\n 'spectrum-Menu-wrapper--isMobile': isMobile,\n 'is-expanded': hasOpenSubmenu,\n [traySubmenuAnimation]: isMobile\n }\n )\n }>\n <div role=\"presentation\" className={classNames(styles, 'spectrum-Submenu-wrapper', {'spectrum-Submenu-wrapper--isMobile': isMobile})} onKeyDown={wrapperKeyDown}>\n {isMobile && isSubmenu && !hasOpenSubmenu && (\n <div className={classNames(styles, 'spectrum-Submenu-headingWrapper')}>\n <ActionButton\n aria-label={backButtonLabel}\n isQuiet\n onPress={handleBackButtonPress}>\n {/* We don't have a ArrowLeftSmall so make due with ArrowDownSmall and transforms */}\n {direction === 'rtl' ? <ArrowDownSmall UNSAFE_style={{rotate: '270deg'}} /> : <ArrowDownSmall UNSAFE_style={{rotate: '90deg'}} />}\n </ActionButton>\n <h1 id={headingId} className={classNames(styles, 'spectrum-Submenu-heading')}>{backButtonText}</h1>\n </div>\n )}\n {children}\n </div>\n </div>\n </>\n );\n}\n\n/**\n * Menus display a list of actions or options that a user can choose.\n */\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nconst _Menu = React.forwardRef(Menu) as <T>(props: SpectrumMenuProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_Menu as Menu};\n"],"names":[],"version":3,"file":"Menu.main.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/menu/src/Menu.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 {ActionButton} from '@react-spectrum/button';\nimport ArrowDownSmall from '@spectrum-icons/ui/ArrowDownSmall';\nimport {classNames, useDOMRef, useIsMobileDevice, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport {FocusScope} from '@react-aria/focus';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {MenuContext, MenuStateContext, useMenuStateContext} from './context';\nimport {MenuItem} from './MenuItem';\nimport {MenuSection} from './MenuSection';\nimport {mergeProps, useLayoutEffect, useSlotId, useSyncRef} from '@react-aria/utils';\nimport React, {ReactElement, useContext, useEffect, useRef, useState} from 'react';\nimport {SpectrumMenuProps} from '@react-types/menu';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useInteractOutside} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenu} from '@react-aria/menu';\nimport {useTreeState} from '@react-stately/tree';\n\nfunction Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDivElement>) {\n let isSubmenu = true;\n let contextProps = useContext(MenuContext);\n let parentMenuContext = useMenuStateContext();\n let {rootMenuTriggerState, state: parentMenuTreeState} = parentMenuContext || {rootMenuTriggerState: contextProps.state};\n if (!parentMenuContext) {\n isSubmenu = false;\n }\n let completeProps = {\n ...mergeProps(contextProps, props)\n };\n let domRef = useDOMRef(ref);\n let [popoverContainer, setPopoverContainer] = useState<HTMLElement | null>(null);\n let trayContainerRef = useRef<HTMLDivElement | null>(null);\n let state = useTreeState(completeProps);\n let submenuRef = useRef<HTMLDivElement>(null);\n let {menuProps} = useMenu(completeProps, state, domRef);\n let {styleProps} = useStyleProps(completeProps);\n useSyncRef(contextProps, domRef);\n let [leftOffset, setLeftOffset] = useState({left: 0});\n let prevPopoverContainer = useRef<HTMLElement | null>(null);\n useEffect(() => {\n if (popoverContainer && prevPopoverContainer.current !== popoverContainer && leftOffset.left === 0) {\n prevPopoverContainer.current = popoverContainer;\n let {left} = popoverContainer.getBoundingClientRect();\n setLeftOffset({left: -1 * left});\n }\n }, [leftOffset, popoverContainer]);\n\n let menuLevel = contextProps.submenuLevel ?? -1;\n let nextMenuLevelKey = rootMenuTriggerState?.expandedKeysStack[menuLevel + 1];\n let hasOpenSubmenu = false;\n if (nextMenuLevelKey != null) {\n let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);\n hasOpenSubmenu = nextMenuLevel != null;\n }\n useInteractOutside({\n ref: domRef,\n onInteractOutside: (e) => {\n if (!popoverContainer?.contains(e.target as Node) && !trayContainerRef.current?.contains(e.target as Node)) {\n rootMenuTriggerState?.close();\n }\n },\n isDisabled: isSubmenu || !hasOpenSubmenu\n });\n\n return (\n <MenuStateContext.Provider value={{popoverContainer, trayContainerRef, menu: domRef, submenu: submenuRef, rootMenuTriggerState, state}}>\n <div style={{height: hasOpenSubmenu ? '100%' : undefined}} ref={trayContainerRef} />\n <FocusScope>\n <TrayHeaderWrapper\n onBackButtonPress={contextProps.onBackButtonPress}\n hasOpenSubmenu={hasOpenSubmenu}\n isSubmenu={isSubmenu}\n parentMenuTreeState={parentMenuTreeState}\n rootMenuTriggerState={rootMenuTriggerState}\n menuRef={domRef}>\n <div\n {...menuProps}\n style={mergeProps(styleProps.style, menuProps.style)}\n ref={domRef}\n className={\n classNames(\n styles,\n 'spectrum-Menu',\n styleProps.className\n )\n }>\n {[...state.collection].map(item => {\n if (item.type === 'section') {\n return (\n <MenuSection\n key={item.key}\n item={item}\n state={state} />\n );\n }\n\n let menuItem = (\n <MenuItem\n key={item.key}\n item={item}\n state={state} />\n );\n\n if (item.wrapper) {\n menuItem = item.wrapper(menuItem);\n }\n\n return menuItem;\n })}\n </div>\n </TrayHeaderWrapper>\n {rootMenuTriggerState?.isOpen && <div ref={setPopoverContainer} style={{width: '100vw', position: 'absolute', top: -5, ...leftOffset}} /> }\n </FocusScope>\n </MenuStateContext.Provider>\n );\n}\n\nexport function TrayHeaderWrapper(props) {\n let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown, menuRef} = props;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n let backButtonText = parentMenuTreeState?.collection.getItem(rootMenuTriggerState?.expandedKeysStack.slice(-1)[0])?.textValue;\n let backButtonLabel = stringFormatter.format('backButton', {\n prevMenuButton: backButtonText\n });\n let headingId = useSlotId();\n let isMobile = useIsMobileDevice();\n let {direction} = useLocale();\n\n let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n useLayoutEffect(() => {\n if (!hasOpenSubmenu) {\n setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n }\n }, [hasOpenSubmenu, isMobile]);\n\n let timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n let handleBackButtonPress = () => {\n setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n timeoutRef.current = setTimeout(() => {\n onBackButtonPress();\n }, 220); // Matches transition duration\n };\n\n useEffect(() => {\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n }, []);\n\n // When opening submenu in tray, focus the first item in the submenu after animation completes\n // This fixes an issue with iOS VO where the closed submenu was getting focus\n let focusTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n useEffect(() => {\n if (isMobile && isSubmenu && !hasOpenSubmenu && traySubmenuAnimation === 'spectrum-TraySubmenu-enter') {\n focusTimeoutRef.current = setTimeout(() => {\n let firstItem = menuRef.current.querySelector('[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]') as HTMLElement;\n firstItem?.focus();\n }, 220);\n }\n return () => {\n if (focusTimeoutRef.current) {\n clearTimeout(focusTimeoutRef.current);\n }\n };\n }, [hasOpenSubmenu, isMobile, isSubmenu, menuRef, traySubmenuAnimation]);\n\n return (\n <>\n <div\n role={headingId ? 'dialog' : undefined}\n aria-labelledby={headingId}\n aria-hidden={isMobile && hasOpenSubmenu}\n data-testid=\"menu-wrapper\"\n className={\n classNames(\n styles,\n 'spectrum-Menu-wrapper',\n {\n 'spectrum-Menu-wrapper--isMobile': isMobile,\n 'is-expanded': hasOpenSubmenu,\n [traySubmenuAnimation]: isMobile\n }\n )\n }>\n <div role=\"presentation\" className={classNames(styles, 'spectrum-Submenu-wrapper', {'spectrum-Submenu-wrapper--isMobile': isMobile})} onKeyDown={wrapperKeyDown}>\n {isMobile && isSubmenu && !hasOpenSubmenu && (\n <div className={classNames(styles, 'spectrum-Submenu-headingWrapper')}>\n <ActionButton\n aria-label={backButtonLabel}\n isQuiet\n onPress={handleBackButtonPress}>\n {/* We don't have a ArrowLeftSmall so make due with ArrowDownSmall and transforms */}\n {direction === 'rtl' ? <ArrowDownSmall UNSAFE_style={{rotate: '270deg'}} /> : <ArrowDownSmall UNSAFE_style={{rotate: '90deg'}} />}\n </ActionButton>\n <h1 id={headingId} className={classNames(styles, 'spectrum-Submenu-heading')}>{backButtonText}</h1>\n </div>\n )}\n {children}\n </div>\n </div>\n </>\n );\n}\n\n/**\n * Menus display a list of actions or options that a user can choose.\n */\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nconst _Menu = React.forwardRef(Menu) as <T>(props: SpectrumMenuProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_Menu as Menu};\n"],"names":[],"version":3,"file":"Menu.main.js.map"}
|
package/dist/Menu.mjs
CHANGED
|
@@ -81,12 +81,17 @@ function $49b26f4b606348f6$var$Menu(props, ref) {
|
|
|
81
81
|
]);
|
|
82
82
|
var _contextProps_submenuLevel;
|
|
83
83
|
let menuLevel = (_contextProps_submenuLevel = contextProps.submenuLevel) !== null && _contextProps_submenuLevel !== void 0 ? _contextProps_submenuLevel : -1;
|
|
84
|
-
let
|
|
84
|
+
let nextMenuLevelKey = rootMenuTriggerState === null || rootMenuTriggerState === void 0 ? void 0 : rootMenuTriggerState.expandedKeysStack[menuLevel + 1];
|
|
85
|
+
let hasOpenSubmenu = false;
|
|
86
|
+
if (nextMenuLevelKey != null) {
|
|
87
|
+
let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);
|
|
88
|
+
hasOpenSubmenu = nextMenuLevel != null;
|
|
89
|
+
}
|
|
85
90
|
(0, $4oXwn$useInteractOutside)({
|
|
86
91
|
ref: domRef,
|
|
87
92
|
onInteractOutside: (e)=>{
|
|
88
93
|
var _trayContainerRef_current;
|
|
89
|
-
if (!(popoverContainer === null || popoverContainer === void 0 ? void 0 : popoverContainer.contains(e.target)) && !((_trayContainerRef_current = trayContainerRef.current) === null || _trayContainerRef_current === void 0 ? void 0 : _trayContainerRef_current.contains(e.target))) rootMenuTriggerState.close();
|
|
94
|
+
if (!(popoverContainer === null || popoverContainer === void 0 ? void 0 : popoverContainer.contains(e.target)) && !((_trayContainerRef_current = trayContainerRef.current) === null || _trayContainerRef_current === void 0 ? void 0 : _trayContainerRef_current.contains(e.target))) rootMenuTriggerState === null || rootMenuTriggerState === void 0 ? void 0 : rootMenuTriggerState.close();
|
|
90
95
|
},
|
|
91
96
|
isDisabled: isSubmenu || !hasOpenSubmenu
|
|
92
97
|
});
|
package/dist/Menu.module.js
CHANGED
|
@@ -81,12 +81,17 @@ function $49b26f4b606348f6$var$Menu(props, ref) {
|
|
|
81
81
|
]);
|
|
82
82
|
var _contextProps_submenuLevel;
|
|
83
83
|
let menuLevel = (_contextProps_submenuLevel = contextProps.submenuLevel) !== null && _contextProps_submenuLevel !== void 0 ? _contextProps_submenuLevel : -1;
|
|
84
|
-
let
|
|
84
|
+
let nextMenuLevelKey = rootMenuTriggerState === null || rootMenuTriggerState === void 0 ? void 0 : rootMenuTriggerState.expandedKeysStack[menuLevel + 1];
|
|
85
|
+
let hasOpenSubmenu = false;
|
|
86
|
+
if (nextMenuLevelKey != null) {
|
|
87
|
+
let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);
|
|
88
|
+
hasOpenSubmenu = nextMenuLevel != null;
|
|
89
|
+
}
|
|
85
90
|
(0, $4oXwn$useInteractOutside)({
|
|
86
91
|
ref: domRef,
|
|
87
92
|
onInteractOutside: (e)=>{
|
|
88
93
|
var _trayContainerRef_current;
|
|
89
|
-
if (!(popoverContainer === null || popoverContainer === void 0 ? void 0 : popoverContainer.contains(e.target)) && !((_trayContainerRef_current = trayContainerRef.current) === null || _trayContainerRef_current === void 0 ? void 0 : _trayContainerRef_current.contains(e.target))) rootMenuTriggerState.close();
|
|
94
|
+
if (!(popoverContainer === null || popoverContainer === void 0 ? void 0 : popoverContainer.contains(e.target)) && !((_trayContainerRef_current = trayContainerRef.current) === null || _trayContainerRef_current === void 0 ? void 0 : _trayContainerRef_current.contains(e.target))) rootMenuTriggerState === null || rootMenuTriggerState === void 0 ? void 0 : rootMenuTriggerState.close();
|
|
90
95
|
},
|
|
91
96
|
isDisabled: isSubmenu || !hasOpenSubmenu
|
|
92
97
|
});
|
package/dist/Menu.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/menu/src/Menu.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 {ActionButton} from '@react-spectrum/button';\nimport ArrowDownSmall from '@spectrum-icons/ui/ArrowDownSmall';\nimport {classNames, useDOMRef, useIsMobileDevice, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport {FocusScope} from '@react-aria/focus';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {MenuContext, MenuStateContext, useMenuStateContext} from './context';\nimport {MenuItem} from './MenuItem';\nimport {MenuSection} from './MenuSection';\nimport {mergeProps, useLayoutEffect, useSlotId, useSyncRef} from '@react-aria/utils';\nimport React, {ReactElement, useContext, useEffect, useRef, useState} from 'react';\nimport {SpectrumMenuProps} from '@react-types/menu';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useInteractOutside} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenu} from '@react-aria/menu';\nimport {useTreeState} from '@react-stately/tree';\n\nfunction Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDivElement>) {\n let isSubmenu = true;\n let contextProps = useContext(MenuContext);\n let parentMenuContext = useMenuStateContext();\n let {rootMenuTriggerState, state: parentMenuTreeState} = parentMenuContext || {rootMenuTriggerState: contextProps.state};\n if (!parentMenuContext) {\n isSubmenu = false;\n }\n let completeProps = {\n ...mergeProps(contextProps, props)\n };\n let domRef = useDOMRef(ref);\n let [popoverContainer, setPopoverContainer] = useState(null);\n let trayContainerRef = useRef(null);\n let state = useTreeState(completeProps);\n let submenuRef = useRef<HTMLDivElement>(null);\n let {menuProps} = useMenu(completeProps, state, domRef);\n let {styleProps} = useStyleProps(completeProps);\n useSyncRef(contextProps, domRef);\n let [leftOffset, setLeftOffset] = useState({left: 0});\n let prevPopoverContainer = useRef(null);\n useEffect(() => {\n if (popoverContainer && prevPopoverContainer.current !== popoverContainer && leftOffset.left === 0) {\n prevPopoverContainer.current = popoverContainer;\n let {left} = popoverContainer.getBoundingClientRect();\n setLeftOffset({left: -1 * left});\n }\n }, [leftOffset, popoverContainer]);\n\n let menuLevel = contextProps.submenuLevel ?? -1;\n let hasOpenSubmenu = state.collection.getItem(rootMenuTriggerState?.expandedKeysStack[menuLevel + 1]) != null;\n useInteractOutside({\n ref: domRef,\n onInteractOutside: (e) => {\n if (!popoverContainer?.contains(e.target) && !trayContainerRef.current?.contains(e.target)) {\n rootMenuTriggerState.close();\n }\n },\n isDisabled: isSubmenu || !hasOpenSubmenu\n });\n\n return (\n <MenuStateContext.Provider value={{popoverContainer, trayContainerRef, menu: domRef, submenu: submenuRef, rootMenuTriggerState, state}}>\n <div style={{height: hasOpenSubmenu ? '100%' : undefined}} ref={trayContainerRef} />\n <FocusScope>\n <TrayHeaderWrapper\n onBackButtonPress={contextProps.onBackButtonPress}\n hasOpenSubmenu={hasOpenSubmenu}\n isSubmenu={isSubmenu}\n parentMenuTreeState={parentMenuTreeState}\n rootMenuTriggerState={rootMenuTriggerState}\n menuRef={domRef}>\n <div\n {...menuProps}\n style={mergeProps(styleProps.style, menuProps.style)}\n ref={domRef}\n className={\n classNames(\n styles,\n 'spectrum-Menu',\n styleProps.className\n )\n }>\n {[...state.collection].map(item => {\n if (item.type === 'section') {\n return (\n <MenuSection\n key={item.key}\n item={item}\n state={state} />\n );\n }\n\n let menuItem = (\n <MenuItem\n key={item.key}\n item={item}\n state={state} />\n );\n\n if (item.wrapper) {\n menuItem = item.wrapper(menuItem);\n }\n\n return menuItem;\n })}\n </div>\n </TrayHeaderWrapper>\n {rootMenuTriggerState?.isOpen && <div ref={setPopoverContainer} style={{width: '100vw', position: 'absolute', top: -5, ...leftOffset}} /> }\n </FocusScope>\n </MenuStateContext.Provider>\n );\n}\n\nexport function TrayHeaderWrapper(props) {\n let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown, menuRef} = props;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n let backButtonText = parentMenuTreeState?.collection.getItem(rootMenuTriggerState?.expandedKeysStack.slice(-1)[0])?.textValue;\n let backButtonLabel = stringFormatter.format('backButton', {\n prevMenuButton: backButtonText\n });\n let headingId = useSlotId();\n let isMobile = useIsMobileDevice();\n let {direction} = useLocale();\n\n let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n useLayoutEffect(() => {\n if (!hasOpenSubmenu) {\n setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n }\n }, [hasOpenSubmenu, isMobile]);\n\n let timeoutRef = useRef(null);\n let handleBackButtonPress = () => {\n setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n timeoutRef.current = setTimeout(() => {\n onBackButtonPress();\n }, 220); // Matches transition duration\n };\n\n useEffect(() => {\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n }, []);\n\n // When opening submenu in tray, focus the first item in the submenu after animation completes\n // This fixes an issue with iOS VO where the closed submenu was getting focus\n let focusTimeoutRef = useRef(null);\n useEffect(() => {\n if (isMobile && isSubmenu && !hasOpenSubmenu && traySubmenuAnimation === 'spectrum-TraySubmenu-enter') {\n focusTimeoutRef.current = setTimeout(() => {\n let firstItem = menuRef.current.querySelector('[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]') as HTMLElement;\n firstItem?.focus();\n }, 220);\n }\n return () => {\n if (focusTimeoutRef.current) {\n clearTimeout(focusTimeoutRef.current);\n }\n };\n }, [hasOpenSubmenu, isMobile, isSubmenu, menuRef, traySubmenuAnimation]);\n\n return (\n <>\n <div\n role={headingId ? 'dialog' : undefined}\n aria-labelledby={headingId}\n aria-hidden={isMobile && hasOpenSubmenu}\n data-testid=\"menu-wrapper\"\n className={\n classNames(\n styles,\n 'spectrum-Menu-wrapper',\n {\n 'spectrum-Menu-wrapper--isMobile': isMobile,\n 'is-expanded': hasOpenSubmenu,\n [traySubmenuAnimation]: isMobile\n }\n )\n }>\n <div role=\"presentation\" className={classNames(styles, 'spectrum-Submenu-wrapper', {'spectrum-Submenu-wrapper--isMobile': isMobile})} onKeyDown={wrapperKeyDown}>\n {isMobile && isSubmenu && !hasOpenSubmenu && (\n <div className={classNames(styles, 'spectrum-Submenu-headingWrapper')}>\n <ActionButton\n aria-label={backButtonLabel}\n isQuiet\n onPress={handleBackButtonPress}>\n {/* We don't have a ArrowLeftSmall so make due with ArrowDownSmall and transforms */}\n {direction === 'rtl' ? <ArrowDownSmall UNSAFE_style={{rotate: '270deg'}} /> : <ArrowDownSmall UNSAFE_style={{rotate: '90deg'}} />}\n </ActionButton>\n <h1 id={headingId} className={classNames(styles, 'spectrum-Submenu-heading')}>{backButtonText}</h1>\n </div>\n )}\n {children}\n </div>\n </div>\n </>\n );\n}\n\n/**\n * Menus display a list of actions or options that a user can choose.\n */\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nconst _Menu = React.forwardRef(Menu) as <T>(props: SpectrumMenuProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_Menu as Menu};\n"],"names":[],"version":3,"file":"Menu.module.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/menu/src/Menu.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 {ActionButton} from '@react-spectrum/button';\nimport ArrowDownSmall from '@spectrum-icons/ui/ArrowDownSmall';\nimport {classNames, useDOMRef, useIsMobileDevice, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport {FocusScope} from '@react-aria/focus';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {MenuContext, MenuStateContext, useMenuStateContext} from './context';\nimport {MenuItem} from './MenuItem';\nimport {MenuSection} from './MenuSection';\nimport {mergeProps, useLayoutEffect, useSlotId, useSyncRef} from '@react-aria/utils';\nimport React, {ReactElement, useContext, useEffect, useRef, useState} from 'react';\nimport {SpectrumMenuProps} from '@react-types/menu';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useInteractOutside} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenu} from '@react-aria/menu';\nimport {useTreeState} from '@react-stately/tree';\n\nfunction Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDivElement>) {\n let isSubmenu = true;\n let contextProps = useContext(MenuContext);\n let parentMenuContext = useMenuStateContext();\n let {rootMenuTriggerState, state: parentMenuTreeState} = parentMenuContext || {rootMenuTriggerState: contextProps.state};\n if (!parentMenuContext) {\n isSubmenu = false;\n }\n let completeProps = {\n ...mergeProps(contextProps, props)\n };\n let domRef = useDOMRef(ref);\n let [popoverContainer, setPopoverContainer] = useState<HTMLElement | null>(null);\n let trayContainerRef = useRef<HTMLDivElement | null>(null);\n let state = useTreeState(completeProps);\n let submenuRef = useRef<HTMLDivElement>(null);\n let {menuProps} = useMenu(completeProps, state, domRef);\n let {styleProps} = useStyleProps(completeProps);\n useSyncRef(contextProps, domRef);\n let [leftOffset, setLeftOffset] = useState({left: 0});\n let prevPopoverContainer = useRef<HTMLElement | null>(null);\n useEffect(() => {\n if (popoverContainer && prevPopoverContainer.current !== popoverContainer && leftOffset.left === 0) {\n prevPopoverContainer.current = popoverContainer;\n let {left} = popoverContainer.getBoundingClientRect();\n setLeftOffset({left: -1 * left});\n }\n }, [leftOffset, popoverContainer]);\n\n let menuLevel = contextProps.submenuLevel ?? -1;\n let nextMenuLevelKey = rootMenuTriggerState?.expandedKeysStack[menuLevel + 1];\n let hasOpenSubmenu = false;\n if (nextMenuLevelKey != null) {\n let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);\n hasOpenSubmenu = nextMenuLevel != null;\n }\n useInteractOutside({\n ref: domRef,\n onInteractOutside: (e) => {\n if (!popoverContainer?.contains(e.target as Node) && !trayContainerRef.current?.contains(e.target as Node)) {\n rootMenuTriggerState?.close();\n }\n },\n isDisabled: isSubmenu || !hasOpenSubmenu\n });\n\n return (\n <MenuStateContext.Provider value={{popoverContainer, trayContainerRef, menu: domRef, submenu: submenuRef, rootMenuTriggerState, state}}>\n <div style={{height: hasOpenSubmenu ? '100%' : undefined}} ref={trayContainerRef} />\n <FocusScope>\n <TrayHeaderWrapper\n onBackButtonPress={contextProps.onBackButtonPress}\n hasOpenSubmenu={hasOpenSubmenu}\n isSubmenu={isSubmenu}\n parentMenuTreeState={parentMenuTreeState}\n rootMenuTriggerState={rootMenuTriggerState}\n menuRef={domRef}>\n <div\n {...menuProps}\n style={mergeProps(styleProps.style, menuProps.style)}\n ref={domRef}\n className={\n classNames(\n styles,\n 'spectrum-Menu',\n styleProps.className\n )\n }>\n {[...state.collection].map(item => {\n if (item.type === 'section') {\n return (\n <MenuSection\n key={item.key}\n item={item}\n state={state} />\n );\n }\n\n let menuItem = (\n <MenuItem\n key={item.key}\n item={item}\n state={state} />\n );\n\n if (item.wrapper) {\n menuItem = item.wrapper(menuItem);\n }\n\n return menuItem;\n })}\n </div>\n </TrayHeaderWrapper>\n {rootMenuTriggerState?.isOpen && <div ref={setPopoverContainer} style={{width: '100vw', position: 'absolute', top: -5, ...leftOffset}} /> }\n </FocusScope>\n </MenuStateContext.Provider>\n );\n}\n\nexport function TrayHeaderWrapper(props) {\n let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown, menuRef} = props;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n let backButtonText = parentMenuTreeState?.collection.getItem(rootMenuTriggerState?.expandedKeysStack.slice(-1)[0])?.textValue;\n let backButtonLabel = stringFormatter.format('backButton', {\n prevMenuButton: backButtonText\n });\n let headingId = useSlotId();\n let isMobile = useIsMobileDevice();\n let {direction} = useLocale();\n\n let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n useLayoutEffect(() => {\n if (!hasOpenSubmenu) {\n setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n }\n }, [hasOpenSubmenu, isMobile]);\n\n let timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n let handleBackButtonPress = () => {\n setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n timeoutRef.current = setTimeout(() => {\n onBackButtonPress();\n }, 220); // Matches transition duration\n };\n\n useEffect(() => {\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n }, []);\n\n // When opening submenu in tray, focus the first item in the submenu after animation completes\n // This fixes an issue with iOS VO where the closed submenu was getting focus\n let focusTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n useEffect(() => {\n if (isMobile && isSubmenu && !hasOpenSubmenu && traySubmenuAnimation === 'spectrum-TraySubmenu-enter') {\n focusTimeoutRef.current = setTimeout(() => {\n let firstItem = menuRef.current.querySelector('[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]') as HTMLElement;\n firstItem?.focus();\n }, 220);\n }\n return () => {\n if (focusTimeoutRef.current) {\n clearTimeout(focusTimeoutRef.current);\n }\n };\n }, [hasOpenSubmenu, isMobile, isSubmenu, menuRef, traySubmenuAnimation]);\n\n return (\n <>\n <div\n role={headingId ? 'dialog' : undefined}\n aria-labelledby={headingId}\n aria-hidden={isMobile && hasOpenSubmenu}\n data-testid=\"menu-wrapper\"\n className={\n classNames(\n styles,\n 'spectrum-Menu-wrapper',\n {\n 'spectrum-Menu-wrapper--isMobile': isMobile,\n 'is-expanded': hasOpenSubmenu,\n [traySubmenuAnimation]: isMobile\n }\n )\n }>\n <div role=\"presentation\" className={classNames(styles, 'spectrum-Submenu-wrapper', {'spectrum-Submenu-wrapper--isMobile': isMobile})} onKeyDown={wrapperKeyDown}>\n {isMobile && isSubmenu && !hasOpenSubmenu && (\n <div className={classNames(styles, 'spectrum-Submenu-headingWrapper')}>\n <ActionButton\n aria-label={backButtonLabel}\n isQuiet\n onPress={handleBackButtonPress}>\n {/* We don't have a ArrowLeftSmall so make due with ArrowDownSmall and transforms */}\n {direction === 'rtl' ? <ArrowDownSmall UNSAFE_style={{rotate: '270deg'}} /> : <ArrowDownSmall UNSAFE_style={{rotate: '90deg'}} />}\n </ActionButton>\n <h1 id={headingId} className={classNames(styles, 'spectrum-Submenu-heading')}>{backButtonText}</h1>\n </div>\n )}\n {children}\n </div>\n </div>\n </>\n );\n}\n\n/**\n * Menus display a list of actions or options that a user can choose.\n */\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nconst _Menu = React.forwardRef(Menu) as <T>(props: SpectrumMenuProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_Menu as Menu};\n"],"names":[],"version":3,"file":"Menu.module.js.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;AA4BM,SAAS,0CAAY,KAAuB;IACjD,IAAI,QACF,IAAI,SACJ,KAAK,iBACL,aAAa,EACd,GAAG;IACJ,IAAI,iBACF,aAAa,EACd,GAAG,CAAA,GAAA,wCAAa;IACjB,IAAI,YACF,QAAQ,OACR,GAAG,EACJ,GAAG;IAEJ,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,8BAAQ;IAE1B,IAAI,wBAAwB,CAAA,GAAA,kDAAuB;IACnD,IAAI,cAAC,UAAU,EAAE,GAAG,qBAAoB,GAAG,yBAAyB,CAAC;IACrE,IAAI,mBAAmB,CAAC,CAAC;IACzB,IAAI;IACJ,IAAI,cAAiC,KAAK,KAAK,CAAC,IAAI,GAAG,MAAM;IAE7D,IAAI,kBACF,gBAAgB,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;AA4BM,SAAS,0CAAY,KAAuB;IACjD,IAAI,QACF,IAAI,SACJ,KAAK,iBACL,aAAa,EACd,GAAG;IACJ,IAAI,iBACF,aAAa,EACd,GAAG,CAAA,GAAA,wCAAa;IACjB,IAAI,YACF,QAAQ,OACR,GAAG,EACJ,GAAG;IAEJ,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,8BAAQ;IAE1B,IAAI,wBAAwB,CAAA,GAAA,kDAAuB;IACnD,IAAI,cAAC,UAAU,EAAE,GAAG,qBAAoB,GAAG,yBAAyB,CAAC;IACrE,IAAI,mBAAmB,CAAC,CAAC;IACzB,IAAI;IACJ,IAAI,cAAiC,KAAK,KAAK,CAAC,IAAI,GAAG,MAAM;IAE7D,IAAI,kBACF,gBAAgB,sBAAuB,aAAa;IAGtD,IAAI,aAAa,MAAM,YAAY,CAAC,GAAG,CAAC;IACxC,IAAI,eAAe,CAAC,oBAAoB,MAAM,gBAAgB,CAAC,aAAa,KAAK;IACjF,IAAI,aAAa,gBAAgB,MAAM,gBAAgB,CAAC,UAAU,CAAC;IACnE,IAAI,UAAU,CAAA,GAAA,mBAAK,EAAO;IAC1B,IAAI,MAAM,CAAA,GAAA,kCAAW,EAAE,CAAA,GAAA,oBAAM,EAAE,IAAM,CAAA,GAAA,+BAAQ,EAAE,SAAS,aAAa;QAAC;QAAS;KAAW;IAC1F,IAAI,iBACF,aAAa,cACb,UAAU,oBACV,gBAAgB,yBAChB,qBAAqB,EACtB,GAAG,CAAA,GAAA,gCAAU,EACZ;oBACE;oBACA;QACA,cAAc,IAAI,CAAC,aAAa;aAChC;uBACA;uBACA;QACA,GAAG,mBAAmB;IACxB,GACA,OACA;IAEF,IAAI,QAAQ,CAAA,GAAA,+BAAQ;IACpB,IAAI,WAA0B,CAAC;IAC/B,IAAI,OAAO;QACT,SAAS,EAAE,GAAG;QACd,aAAa,CAAC,mBAAmB,GAAG;YAAC,aAAa,CAAC,mBAAmB;YAAE;SAAM,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC;IACtG;IAEA,IAAI,WAAW,OAAO,aAAa,yBAC/B,0DAAC,CAAA,GAAA,6BAAG,SAAG,YACP;IAEJ,qBACE,0DAAC,CAAA,GAAA,+BAAQ;QAAE,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBAC5C,0DAAC;QACE,GAAG,aAAa;QACjB,KAAK;QACL,WAAW,CAAA,GAAA,oCAAS,EAClB,CAAA,GAAA,mDAAK,GACL,sBACA;YACE,eAAe;YACf,eAAe;YACf,iBAAiB;YACjB,WAAW,oBAAoB,MAAM;QACvC;qBAEF,0DAAC,CAAA,GAAA,+BAAG;QACF,kBACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL;qBAGJ,0DAAC,CAAA,GAAA,oCAAS,uBACR,0DAAC,CAAA,GAAA,sCAAW;QACV,OAAO;YACL,MAAM;gBAAC,kBAAkB,CAAA,GAAA,mDAAK,CAAC,CAAC,0BAA0B;gBAAE,GAAG,UAAU;YAAA;YACzE,KAAK;gBAAC,kBAAkB,CAAA,GAAA,mDAAK,CAAC,CAAC,oBAAoB;gBAAE,GAAG,QAAQ;YAAA;YAChE,MAAM;gBAAC,kBAAkB,CAAA,GAAA,mDAAK,CAAC,CAAC,qBAAqB;gBAAE,MAAM;YAAG;YAChE,aAAa;gBAAC,kBAAkB,CAAA,GAAA,mDAAK,CAAC,CAAC,4BAA4B;gBAAE,GAAG,gBAAgB;YAAA;YACxF,UAAU;gBAAC,kBAAkB,CAAA,GAAA,mDAAK,CAAC,CAAC,yBAAyB;gBAAE,GAAG,qBAAqB;YAAA;YACvF,SAAS;gBAAC,kBAAkB,CAAA,GAAA,mDAAK,CAAC,CAAC,wBAAwB;gBAAE,MAAM;YAAG;QACxE;OACC,UACA,4BACC,0DAAC,CAAA,GAAA,+DAAc;QACb,MAAK;QACL,kBACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL;QAKN,+BAAiB,0DAAC,CAAA,GAAA,iEAAU;QAAE,MAAK;QAAM,MAAK;QAAK,WAAU;QAAS,cAAY,gBAAgB,MAAM,CAAC;QAGzG,iBAAiB,QAAQ,oBAAqB,CAAA,cAAc,sBAAQ,0DAAC,CAAA,GAAA,iEAAU;QAAE,MAAK;uBAAe,0DAAC,CAAA,GAAA,kEAAW;QAAE,MAAK;MAAW;AAQnJ","sources":["packages/@react-spectrum/menu/src/MenuItem.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 CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';\nimport ChevronLeft from '@spectrum-icons/workflow/ChevronLeft';\nimport ChevronRight from '@spectrum-icons/workflow/ChevronRight';\nimport {classNames, ClearSlots, SlotProvider} from '@react-spectrum/utils';\nimport {DOMAttributes, Node} from '@react-types/shared';\nimport {FocusRing} from '@react-aria/focus';\nimport {Grid} from '@react-spectrum/layout';\nimport InfoOutline from '@spectrum-icons/workflow/InfoOutline';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeRefs, useObjectRef, useSlotId} from '@react-aria/utils';\nimport React, {useMemo, useRef} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {Text} from '@react-spectrum/text';\nimport {TreeState} from '@react-stately/tree';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenuContext, useSubmenuTriggerContext} from './context';\nimport {useMenuItem} from '@react-aria/menu';\n\ninterface MenuItemProps<T> {\n item: Node<T>,\n state: TreeState<T>,\n isVirtualized?: boolean\n}\n\n/** @private */\nexport function MenuItem<T>(props: MenuItemProps<T>) {\n let {\n item,\n state,\n isVirtualized\n } = props;\n let {\n closeOnSelect\n } = useMenuContext();\n let {\n rendered,\n key\n } = item;\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n let {direction} = useLocale();\n\n let submenuTriggerContext = useSubmenuTriggerContext();\n let {triggerRef, ...submenuTriggerProps} = submenuTriggerContext || {};\n let isSubmenuTrigger = !!submenuTriggerContext;\n let isUnavailable;\n let ElementType: React.ElementType = item.props.href ? 'a' : 'div';\n\n if (isSubmenuTrigger) {\n isUnavailable = submenuTriggerContext!.isUnavailable;\n }\n\n let isDisabled = state.disabledKeys.has(key);\n let isSelectable = !isSubmenuTrigger && state.selectionManager.selectionMode !== 'none';\n let isSelected = isSelectable && state.selectionManager.isSelected(key);\n let itemref = useRef<any>(null);\n let ref = useObjectRef(useMemo(() => mergeRefs(itemref, triggerRef), [itemref, triggerRef]));\n let {\n menuItemProps,\n labelProps,\n descriptionProps,\n keyboardShortcutProps\n } = useMenuItem(\n {\n isSelected,\n isDisabled,\n 'aria-label': item['aria-label'],\n key,\n closeOnSelect,\n isVirtualized,\n ...submenuTriggerProps\n },\n state,\n ref\n );\n let endId = useSlotId();\n let endProps: DOMAttributes = {};\n if (endId) {\n endProps.id = endId;\n menuItemProps['aria-describedby'] = [menuItemProps['aria-describedby'], endId].filter(Boolean).join(' ');\n }\n\n let contents = typeof rendered === 'string'\n ? <Text>{rendered}</Text>\n : rendered;\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <ElementType\n {...menuItemProps}\n ref={ref}\n className={classNames(\n styles,\n 'spectrum-Menu-item',\n {\n 'is-disabled': isDisabled,\n 'is-selected': isSelected,\n 'is-selectable': isSelectable,\n 'is-open': submenuTriggerProps.isOpen\n }\n )}>\n <Grid\n UNSAFE_className={\n classNames(\n styles,\n 'spectrum-Menu-itemGrid'\n )\n }>\n <ClearSlots>\n <SlotProvider\n slots={{\n text: {UNSAFE_className: styles['spectrum-Menu-itemLabel'], ...labelProps},\n end: {UNSAFE_className: styles['spectrum-Menu-end'], ...endProps},\n icon: {UNSAFE_className: styles['spectrum-Menu-icon'], size: 'S'},\n description: {UNSAFE_className: styles['spectrum-Menu-description'], ...descriptionProps},\n keyboard: {UNSAFE_className: styles['spectrum-Menu-keyboard'], ...keyboardShortcutProps},\n chevron: {UNSAFE_className: styles['spectrum-Menu-chevron'], size: 'S'}\n }}>\n {contents}\n {isSelected &&\n <CheckmarkMedium\n slot=\"checkmark\"\n UNSAFE_className={\n classNames(\n styles,\n 'spectrum-Menu-checkmark'\n )\n } />\n }\n {\n isUnavailable && <InfoOutline slot=\"end\" size=\"XS\" alignSelf=\"center\" aria-label={stringFormatter.format('unavailable')} />\n }\n {\n isUnavailable == null && isSubmenuTrigger && (direction === 'rtl' ? <ChevronLeft slot=\"chevron\" /> : <ChevronRight slot=\"chevron\" />)\n }\n </SlotProvider>\n </ClearSlots>\n </Grid>\n </ElementType>\n </FocusRing>\n );\n}\n"],"names":[],"version":3,"file":"MenuItem.main.js.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;AA4BM,SAAS,0CAAY,KAAuB;IACjD,IAAI,QACF,IAAI,SACJ,KAAK,iBACL,aAAa,EACd,GAAG;IACJ,IAAI,iBACF,aAAa,EACd,GAAG,CAAA,GAAA,yCAAa;IACjB,IAAI,YACF,QAAQ,OACR,GAAG,EACJ,GAAG;IAEJ,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAChE,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAE1B,IAAI,wBAAwB,CAAA,GAAA,yCAAuB;IACnD,IAAI,cAAC,UAAU,EAAE,GAAG,qBAAoB,GAAG,yBAAyB,CAAC;IACrE,IAAI,mBAAmB,CAAC,CAAC;IACzB,IAAI;IACJ,IAAI,cAAiC,KAAK,KAAK,CAAC,IAAI,GAAG,MAAM;IAE7D,IAAI,kBACF,gBAAgB,
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/menu/src/MenuItem.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 CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';\nimport ChevronLeft from '@spectrum-icons/workflow/ChevronLeft';\nimport ChevronRight from '@spectrum-icons/workflow/ChevronRight';\nimport {classNames, ClearSlots, SlotProvider} from '@react-spectrum/utils';\nimport {DOMAttributes, Node} from '@react-types/shared';\nimport {FocusRing} from '@react-aria/focus';\nimport {Grid} from '@react-spectrum/layout';\nimport InfoOutline from '@spectrum-icons/workflow/InfoOutline';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeRefs, useObjectRef, useSlotId} from '@react-aria/utils';\nimport React, {useMemo, useRef} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {Text} from '@react-spectrum/text';\nimport {TreeState} from '@react-stately/tree';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenuContext, useSubmenuTriggerContext} from './context';\nimport {useMenuItem} from '@react-aria/menu';\n\ninterface MenuItemProps<T> {\n item: Node<T>,\n state: TreeState<T>,\n isVirtualized?: boolean\n}\n\n/** @private */\nexport function MenuItem<T>(props: MenuItemProps<T>) {\n let {\n item,\n state,\n isVirtualized\n } = props;\n let {\n closeOnSelect\n } = useMenuContext();\n let {\n rendered,\n key\n } = item;\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n let {direction} = useLocale();\n\n let submenuTriggerContext = useSubmenuTriggerContext();\n let {triggerRef, ...submenuTriggerProps} = submenuTriggerContext || {};\n let isSubmenuTrigger = !!submenuTriggerContext;\n let isUnavailable;\n let ElementType: React.ElementType = item.props.href ? 'a' : 'div';\n\n if (isSubmenuTrigger) {\n isUnavailable = submenuTriggerContext!.isUnavailable;\n }\n\n let isDisabled = state.disabledKeys.has(key);\n let isSelectable = !isSubmenuTrigger && state.selectionManager.selectionMode !== 'none';\n let isSelected = isSelectable && state.selectionManager.isSelected(key);\n let itemref = useRef<any>(null);\n let ref = useObjectRef(useMemo(() => mergeRefs(itemref, triggerRef), [itemref, triggerRef]));\n let {\n menuItemProps,\n labelProps,\n descriptionProps,\n keyboardShortcutProps\n } = useMenuItem(\n {\n isSelected,\n isDisabled,\n 'aria-label': item['aria-label'],\n key,\n closeOnSelect,\n isVirtualized,\n ...submenuTriggerProps\n },\n state,\n ref\n );\n let endId = useSlotId();\n let endProps: DOMAttributes = {};\n if (endId) {\n endProps.id = endId;\n menuItemProps['aria-describedby'] = [menuItemProps['aria-describedby'], endId].filter(Boolean).join(' ');\n }\n\n let contents = typeof rendered === 'string'\n ? <Text>{rendered}</Text>\n : rendered;\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <ElementType\n {...menuItemProps}\n ref={ref}\n className={classNames(\n styles,\n 'spectrum-Menu-item',\n {\n 'is-disabled': isDisabled,\n 'is-selected': isSelected,\n 'is-selectable': isSelectable,\n 'is-open': submenuTriggerProps.isOpen\n }\n )}>\n <Grid\n UNSAFE_className={\n classNames(\n styles,\n 'spectrum-Menu-itemGrid'\n )\n }>\n <ClearSlots>\n <SlotProvider\n slots={{\n text: {UNSAFE_className: styles['spectrum-Menu-itemLabel'], ...labelProps},\n end: {UNSAFE_className: styles['spectrum-Menu-end'], ...endProps},\n icon: {UNSAFE_className: styles['spectrum-Menu-icon'], size: 'S'},\n description: {UNSAFE_className: styles['spectrum-Menu-description'], ...descriptionProps},\n keyboard: {UNSAFE_className: styles['spectrum-Menu-keyboard'], ...keyboardShortcutProps},\n chevron: {UNSAFE_className: styles['spectrum-Menu-chevron'], size: 'S'}\n }}>\n {contents}\n {isSelected &&\n <CheckmarkMedium\n slot=\"checkmark\"\n UNSAFE_className={\n classNames(\n styles,\n 'spectrum-Menu-checkmark'\n )\n } />\n }\n {\n isUnavailable && <InfoOutline slot=\"end\" size=\"XS\" alignSelf=\"center\" aria-label={stringFormatter.format('unavailable')} />\n }\n {\n isUnavailable == null && isSubmenuTrigger && (direction === 'rtl' ? <ChevronLeft slot=\"chevron\" /> : <ChevronRight slot=\"chevron\" />)\n }\n </SlotProvider>\n </ClearSlots>\n </Grid>\n </ElementType>\n </FocusRing>\n );\n}\n"],"names":[],"version":3,"file":"MenuItem.module.js.map"}
|
package/dist/MenuSection.main.js
CHANGED
|
@@ -49,7 +49,8 @@ function $5793ff412227d2fc$export$4b1545b4f2016d26(props) {
|
|
|
49
49
|
...state.collection
|
|
50
50
|
].filter((node)=>node.type === 'section').at(-1)) === null || _filter_at === void 0 ? void 0 : _filter_at.key;
|
|
51
51
|
let sectionIsFirst = firstSectionKey === item.key && state.collection.getFirstKey() === firstSectionKey;
|
|
52
|
-
let
|
|
52
|
+
let lastKey = state.collection.getLastKey();
|
|
53
|
+
let sectionIsLast = lastSectionKey === item.key && lastKey != null && state.collection.getItem(lastKey).parentKey === lastSectionKey;
|
|
53
54
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($3nsTP$react))).createElement((0, $3nsTP$react.Fragment), null, item.key !== state.collection.getFirstKey() && /*#__PURE__*/ (0, ($parcel$interopDefault($3nsTP$react))).createElement("div", {
|
|
54
55
|
...separatorProps,
|
|
55
56
|
className: (0, $3nsTP$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3deee0fd2b46e64f$exports))), 'spectrum-Menu-divider')
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAkBM,SAAS,0CAAe,KAA0B;QAYlC;IAXrB,IAAI,QAAC,IAAI,SAAE,KAAK,EAAC,GAAG;IACpB,IAAI,aAAC,SAAS,gBAAE,YAAY,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,mCAAa,EAAE;QACzD,SAAS,KAAK,QAAQ;QACtB,cAAc,IAAI,CAAC,aAAa;IAClC;IAEA,IAAI,kBAAC,cAAc,EAAC,GAAG,CAAA,GAAA,sCAAW,EAAE;QAClC,aAAa;IACf;IAEA,IAAI,kBAAkB,MAAM,UAAU,CAAC,WAAW;IAClD,IAAI,kBAAiB,aAAA;WAAI,MAAM,UAAU;KAAC,CAAC,MAAM,CAAC,CAAA,OAAQ,KAAK,IAAI,KAAK,WAAW,EAAE,CAAC,CAAC,gBAAlE,iCAAA,WAAsE,GAAG;IAC9F,IAAI,iBAAiB,oBAAoB,KAAK,GAAG,IAAI,MAAM,UAAU,CAAC,WAAW,OAAO;IACxF,IAAI,gBAAgB,mBAAmB,KAAK,GAAG,IAAI,MAAM,UAAU,CAAC,OAAO,CAAC,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAkBM,SAAS,0CAAe,KAA0B;QAYlC;IAXrB,IAAI,QAAC,IAAI,SAAE,KAAK,EAAC,GAAG;IACpB,IAAI,aAAC,SAAS,gBAAE,YAAY,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,mCAAa,EAAE;QACzD,SAAS,KAAK,QAAQ;QACtB,cAAc,IAAI,CAAC,aAAa;IAClC;IAEA,IAAI,kBAAC,cAAc,EAAC,GAAG,CAAA,GAAA,sCAAW,EAAE;QAClC,aAAa;IACf;IAEA,IAAI,kBAAkB,MAAM,UAAU,CAAC,WAAW;IAClD,IAAI,kBAAiB,aAAA;WAAI,MAAM,UAAU;KAAC,CAAC,MAAM,CAAC,CAAA,OAAQ,KAAK,IAAI,KAAK,WAAW,EAAE,CAAC,CAAC,gBAAlE,iCAAA,WAAsE,GAAG;IAC9F,IAAI,iBAAiB,oBAAoB,KAAK,GAAG,IAAI,MAAM,UAAU,CAAC,WAAW,OAAO;IACxF,IAAI,UAAU,MAAM,UAAU,CAAC,UAAU;IACzC,IAAI,gBAAgB,mBAAmB,KAAK,GAAG,IAAI,WAAW,QAAQ,MAAM,UAAU,CAAC,OAAO,CAAC,SAAU,SAAS,KAAK;IAEvH,qBACE,0DAAC,CAAA,GAAA,qBAAO,SACL,KAAK,GAAG,KAAK,MAAM,UAAU,CAAC,WAAW,oBACxC,0DAAC;QACE,GAAG,cAAc;QAClB,WAAW,CAAA,GAAA,oCAAS,EAClB,CAAA,GAAA,mDAAK,GACL;sBAGN,0DAAC,OAAQ,WACN,KAAK,QAAQ,kBACZ,0DAAC;QACE,GAAG,YAAY;QAChB,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL;OAGH,KAAK,QAAQ,iBAGlB,0DAAC;QACE,GAAG,UAAU;QACd,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACH,iBACF;YACE,oCAAoC,KAAK,QAAQ,IAAI;YACrD,kCAAkC;YAClC,iCAAiC;QACnC;OAGH;WAAI,CAAA,GAAA,4CAAY,EAAE,MAAM,MAAM,UAAU;KAAE,CAAC,GAAG,CAAC,CAAA;QAC9C,IAAI,qBACF,0DAAC,CAAA,GAAA,kCAAO;YACN,KAAK,KAAK,GAAG;YACb,MAAM;YACN,OAAO;;QAGX,IAAI,KAAK,OAAO,EACd,OAAO,KAAK,OAAO,CAAC;QAGtB,OAAO;IACT;AAKV","sources":["packages/@react-spectrum/menu/src/MenuSection.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} from '@react-spectrum/utils';\nimport {getChildNodes} from '@react-stately/collections';\nimport {MenuItem} from './MenuItem';\nimport {Node} from '@react-types/shared';\nimport React, {Fragment} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {TreeState} from '@react-stately/tree';\nimport {useMenuSection} from '@react-aria/menu';\nimport {useSeparator} from '@react-aria/separator';\n\ninterface MenuSectionProps<T> {\n item: Node<T>,\n state: TreeState<T>\n}\n\n/** @private */\nexport function MenuSection<T>(props: MenuSectionProps<T>) {\n let {item, state} = props;\n let {itemProps, headingProps, groupProps} = useMenuSection({\n heading: item.rendered,\n 'aria-label': item['aria-label']\n });\n\n let {separatorProps} = useSeparator({\n elementType: 'div'\n });\n\n let firstSectionKey = state.collection.getFirstKey();\n let lastSectionKey = [...state.collection].filter(node => node.type === 'section').at(-1)?.key;\n let sectionIsFirst = firstSectionKey === item.key && state.collection.getFirstKey() === firstSectionKey;\n let lastKey = state.collection.getLastKey();\n let sectionIsLast = lastSectionKey === item.key && lastKey != null && state.collection.getItem(lastKey)!.parentKey === lastSectionKey;\n\n return (\n <Fragment>\n {item.key !== state.collection.getFirstKey() &&\n <div\n {...separatorProps}\n className={classNames(\n styles,\n 'spectrum-Menu-divider'\n )} />\n }\n <div {...itemProps}>\n {item.rendered &&\n <span\n {...headingProps}\n className={\n classNames(\n styles,\n 'spectrum-Menu-sectionHeading'\n )\n }>\n {item.rendered}\n </span>\n }\n <div\n {...groupProps}\n className={\n classNames(\n styles,\n 'spectrum-Menu',\n {\n 'spectrum-Menu-section--noHeading': item.rendered == null,\n 'spectrum-Menu-section--isFirst': sectionIsFirst,\n 'spectrum-Menu-section--isLast': sectionIsLast\n }\n )\n }>\n {[...getChildNodes(item, state.collection)].map(node => {\n let item = (\n <MenuItem\n key={node.key}\n item={node}\n state={state} />\n );\n\n if (node.wrapper) {\n item = node.wrapper(item);\n }\n\n return item;\n })}\n </div>\n </div>\n </Fragment>\n );\n}\n"],"names":[],"version":3,"file":"MenuSection.main.js.map"}
|
package/dist/MenuSection.mjs
CHANGED
|
@@ -43,7 +43,8 @@ function $b966e606890cc5ca$export$4b1545b4f2016d26(props) {
|
|
|
43
43
|
...state.collection
|
|
44
44
|
].filter((node)=>node.type === 'section').at(-1)) === null || _filter_at === void 0 ? void 0 : _filter_at.key;
|
|
45
45
|
let sectionIsFirst = firstSectionKey === item.key && state.collection.getFirstKey() === firstSectionKey;
|
|
46
|
-
let
|
|
46
|
+
let lastKey = state.collection.getLastKey();
|
|
47
|
+
let sectionIsLast = lastSectionKey === item.key && lastKey != null && state.collection.getItem(lastKey).parentKey === lastSectionKey;
|
|
47
48
|
return /*#__PURE__*/ (0, $9353d$react).createElement((0, $9353d$Fragment), null, item.key !== state.collection.getFirstKey() && /*#__PURE__*/ (0, $9353d$react).createElement("div", {
|
|
48
49
|
...separatorProps,
|
|
49
50
|
className: (0, $9353d$classNames)((0, ($parcel$interopDefault($9353d$menu_vars_cssmodulejs))), 'spectrum-Menu-divider')
|
|
@@ -43,7 +43,8 @@ function $b966e606890cc5ca$export$4b1545b4f2016d26(props) {
|
|
|
43
43
|
...state.collection
|
|
44
44
|
].filter((node)=>node.type === 'section').at(-1)) === null || _filter_at === void 0 ? void 0 : _filter_at.key;
|
|
45
45
|
let sectionIsFirst = firstSectionKey === item.key && state.collection.getFirstKey() === firstSectionKey;
|
|
46
|
-
let
|
|
46
|
+
let lastKey = state.collection.getLastKey();
|
|
47
|
+
let sectionIsLast = lastSectionKey === item.key && lastKey != null && state.collection.getItem(lastKey).parentKey === lastSectionKey;
|
|
47
48
|
return /*#__PURE__*/ (0, $9353d$react).createElement((0, $9353d$Fragment), null, item.key !== state.collection.getFirstKey() && /*#__PURE__*/ (0, $9353d$react).createElement("div", {
|
|
48
49
|
...separatorProps,
|
|
49
50
|
className: (0, $9353d$classNames)((0, ($parcel$interopDefault($9353d$menu_vars_cssmodulejs))), 'spectrum-Menu-divider')
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAkBM,SAAS,0CAAe,KAA0B;QAYlC;IAXrB,IAAI,QAAC,IAAI,SAAE,KAAK,EAAC,GAAG;IACpB,IAAI,aAAC,SAAS,gBAAE,YAAY,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;QACzD,SAAS,KAAK,QAAQ;QACtB,cAAc,IAAI,CAAC,aAAa;IAClC;IAEA,IAAI,kBAAC,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW,EAAE;QAClC,aAAa;IACf;IAEA,IAAI,kBAAkB,MAAM,UAAU,CAAC,WAAW;IAClD,IAAI,kBAAiB,aAAA;WAAI,MAAM,UAAU;KAAC,CAAC,MAAM,CAAC,CAAA,OAAQ,KAAK,IAAI,KAAK,WAAW,EAAE,CAAC,CAAC,gBAAlE,iCAAA,WAAsE,GAAG;IAC9F,IAAI,iBAAiB,oBAAoB,KAAK,GAAG,IAAI,MAAM,UAAU,CAAC,WAAW,OAAO;IACxF,IAAI,gBAAgB,mBAAmB,KAAK,GAAG,IAAI,MAAM,UAAU,CAAC,OAAO,CAAC,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAkBM,SAAS,0CAAe,KAA0B;QAYlC;IAXrB,IAAI,QAAC,IAAI,SAAE,KAAK,EAAC,GAAG;IACpB,IAAI,aAAC,SAAS,gBAAE,YAAY,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;QACzD,SAAS,KAAK,QAAQ;QACtB,cAAc,IAAI,CAAC,aAAa;IAClC;IAEA,IAAI,kBAAC,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW,EAAE;QAClC,aAAa;IACf;IAEA,IAAI,kBAAkB,MAAM,UAAU,CAAC,WAAW;IAClD,IAAI,kBAAiB,aAAA;WAAI,MAAM,UAAU;KAAC,CAAC,MAAM,CAAC,CAAA,OAAQ,KAAK,IAAI,KAAK,WAAW,EAAE,CAAC,CAAC,gBAAlE,iCAAA,WAAsE,GAAG;IAC9F,IAAI,iBAAiB,oBAAoB,KAAK,GAAG,IAAI,MAAM,UAAU,CAAC,WAAW,OAAO;IACxF,IAAI,UAAU,MAAM,UAAU,CAAC,UAAU;IACzC,IAAI,gBAAgB,mBAAmB,KAAK,GAAG,IAAI,WAAW,QAAQ,MAAM,UAAU,CAAC,OAAO,CAAC,SAAU,SAAS,KAAK;IAEvH,qBACE,gCAAC,CAAA,GAAA,eAAO,SACL,KAAK,GAAG,KAAK,MAAM,UAAU,CAAC,WAAW,oBACxC,gCAAC;QACE,GAAG,cAAc;QAClB,WAAW,CAAA,GAAA,iBAAS,EAClB,CAAA,GAAA,sDAAK,GACL;sBAGN,gCAAC,OAAQ,WACN,KAAK,QAAQ,kBACZ,gCAAC;QACE,GAAG,YAAY;QAChB,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,sDAAK,GACL;OAGH,KAAK,QAAQ,iBAGlB,gCAAC;QACE,GAAG,UAAU;QACd,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,sDAAK,GACH,iBACF;YACE,oCAAoC,KAAK,QAAQ,IAAI;YACrD,kCAAkC;YAClC,iCAAiC;QACnC;OAGH;WAAI,CAAA,GAAA,oBAAY,EAAE,MAAM,MAAM,UAAU;KAAE,CAAC,GAAG,CAAC,CAAA;QAC9C,IAAI,qBACF,gCAAC,CAAA,GAAA,yCAAO;YACN,KAAK,KAAK,GAAG;YACb,MAAM;YACN,OAAO;;QAGX,IAAI,KAAK,OAAO,EACd,OAAO,KAAK,OAAO,CAAC;QAGtB,OAAO;IACT;AAKV","sources":["packages/@react-spectrum/menu/src/MenuSection.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} from '@react-spectrum/utils';\nimport {getChildNodes} from '@react-stately/collections';\nimport {MenuItem} from './MenuItem';\nimport {Node} from '@react-types/shared';\nimport React, {Fragment} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {TreeState} from '@react-stately/tree';\nimport {useMenuSection} from '@react-aria/menu';\nimport {useSeparator} from '@react-aria/separator';\n\ninterface MenuSectionProps<T> {\n item: Node<T>,\n state: TreeState<T>\n}\n\n/** @private */\nexport function MenuSection<T>(props: MenuSectionProps<T>) {\n let {item, state} = props;\n let {itemProps, headingProps, groupProps} = useMenuSection({\n heading: item.rendered,\n 'aria-label': item['aria-label']\n });\n\n let {separatorProps} = useSeparator({\n elementType: 'div'\n });\n\n let firstSectionKey = state.collection.getFirstKey();\n let lastSectionKey = [...state.collection].filter(node => node.type === 'section').at(-1)?.key;\n let sectionIsFirst = firstSectionKey === item.key && state.collection.getFirstKey() === firstSectionKey;\n let lastKey = state.collection.getLastKey();\n let sectionIsLast = lastSectionKey === item.key && lastKey != null && state.collection.getItem(lastKey)!.parentKey === lastSectionKey;\n\n return (\n <Fragment>\n {item.key !== state.collection.getFirstKey() &&\n <div\n {...separatorProps}\n className={classNames(\n styles,\n 'spectrum-Menu-divider'\n )} />\n }\n <div {...itemProps}>\n {item.rendered &&\n <span\n {...headingProps}\n className={\n classNames(\n styles,\n 'spectrum-Menu-sectionHeading'\n )\n }>\n {item.rendered}\n </span>\n }\n <div\n {...groupProps}\n className={\n classNames(\n styles,\n 'spectrum-Menu',\n {\n 'spectrum-Menu-section--noHeading': item.rendered == null,\n 'spectrum-Menu-section--isFirst': sectionIsFirst,\n 'spectrum-Menu-section--isLast': sectionIsLast\n }\n )\n }>\n {[...getChildNodes(item, state.collection)].map(node => {\n let item = (\n <MenuItem\n key={node.key}\n item={node}\n state={state} />\n );\n\n if (node.wrapper) {\n item = node.wrapper(item);\n }\n\n return item;\n })}\n </div>\n </div>\n </Fragment>\n );\n}\n"],"names":[],"version":3,"file":"MenuSection.module.js.map"}
|
package/dist/MenuTrigger.main.js
CHANGED
|
@@ -37,10 +37,10 @@ $parcel$export(module.exports, "MenuTrigger", () => $e56311f7204399c7$export$27d
|
|
|
37
37
|
|
|
38
38
|
|
|
39
39
|
function $e56311f7204399c7$var$MenuTrigger(props, ref) {
|
|
40
|
-
let triggerRef = (0, $6doGq$react.useRef)(
|
|
40
|
+
let triggerRef = (0, $6doGq$react.useRef)(null);
|
|
41
41
|
let domRef = (0, $6doGq$reactspectrumutils.useDOMRef)(ref);
|
|
42
42
|
let menuTriggerRef = domRef || triggerRef;
|
|
43
|
-
let menuRef = (0, $6doGq$react.useRef)(
|
|
43
|
+
let menuRef = (0, $6doGq$react.useRef)(null);
|
|
44
44
|
let { children: children, align: align = 'start', shouldFlip: shouldFlip = true, direction: direction = 'bottom', closeOnSelect: closeOnSelect, trigger: trigger = 'press' } = props;
|
|
45
45
|
let [menuTrigger, menu] = (0, ($parcel$interopDefault($6doGq$react))).Children.toArray(children);
|
|
46
46
|
let state = (0, $6doGq$reactstatelymenu.useMenuTriggerState)(props);
|