@react-spectrum/menu 3.19.2-nightly.4701 → 3.19.2-nightly.4704
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/Menu.main.js +2 -4
- package/dist/Menu.main.js.map +1 -1
- package/dist/Menu.mjs +2 -4
- package/dist/Menu.module.js +2 -4
- package/dist/Menu.module.js.map +1 -1
- package/dist/MenuItem.main.js +1 -2
- package/dist/MenuItem.main.js.map +1 -1
- package/dist/MenuItem.mjs +1 -2
- package/dist/MenuItem.module.js +1 -2
- package/dist/MenuItem.module.js.map +1 -1
- package/dist/MenuSection.main.js +2 -3
- package/dist/MenuSection.main.js.map +1 -1
- package/dist/MenuSection.mjs +2 -3
- package/dist/MenuSection.module.js +2 -3
- package/dist/MenuSection.module.js.map +1 -1
- package/dist/context.main.js.map +1 -1
- package/dist/context.module.js.map +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +24 -24
- package/src/Menu.tsx +2 -4
- package/src/MenuItem.tsx +3 -6
- package/src/MenuSection.tsx +4 -6
- package/src/context.ts +2 -2
package/dist/Menu.main.js
CHANGED
|
@@ -129,14 +129,12 @@ function $63a7dff9cbe2d046$var$Menu(props, ref) {
|
|
|
129
129
|
if (item.type === 'section') return /*#__PURE__*/ (0, ($parcel$interopDefault($hl8gx$react))).createElement((0, $5793ff412227d2fc$exports.MenuSection), {
|
|
130
130
|
key: item.key,
|
|
131
131
|
item: item,
|
|
132
|
-
state: state
|
|
133
|
-
onAction: completeProps.onAction
|
|
132
|
+
state: state
|
|
134
133
|
});
|
|
135
134
|
let menuItem = /*#__PURE__*/ (0, ($parcel$interopDefault($hl8gx$react))).createElement((0, $1d718563708db5b5$exports.MenuItem), {
|
|
136
135
|
key: item.key,
|
|
137
136
|
item: item,
|
|
138
|
-
state: state
|
|
139
|
-
onAction: completeProps.onAction
|
|
137
|
+
state: state
|
|
140
138
|
});
|
|
141
139
|
if (item.wrapper) menuItem = item.wrapper(menuItem);
|
|
142
140
|
return menuItem;
|
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 onAction={completeProps.onAction} />\n );\n }\n\n let menuItem = (\n <MenuItem\n key={item.key}\n item={item}\n state={state}\n onAction={completeProps.onAction} />\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(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"}
|
package/dist/Menu.mjs
CHANGED
|
@@ -122,14 +122,12 @@ function $49b26f4b606348f6$var$Menu(props, ref) {
|
|
|
122
122
|
if (item.type === 'section') return /*#__PURE__*/ (0, $4oXwn$react).createElement((0, $b966e606890cc5ca$export$4b1545b4f2016d26), {
|
|
123
123
|
key: item.key,
|
|
124
124
|
item: item,
|
|
125
|
-
state: state
|
|
126
|
-
onAction: completeProps.onAction
|
|
125
|
+
state: state
|
|
127
126
|
});
|
|
128
127
|
let menuItem = /*#__PURE__*/ (0, $4oXwn$react).createElement((0, $48fb8f5e1202c980$export$2ce376c2cc3355c8), {
|
|
129
128
|
key: item.key,
|
|
130
129
|
item: item,
|
|
131
|
-
state: state
|
|
132
|
-
onAction: completeProps.onAction
|
|
130
|
+
state: state
|
|
133
131
|
});
|
|
134
132
|
if (item.wrapper) menuItem = item.wrapper(menuItem);
|
|
135
133
|
return menuItem;
|
package/dist/Menu.module.js
CHANGED
|
@@ -122,14 +122,12 @@ function $49b26f4b606348f6$var$Menu(props, ref) {
|
|
|
122
122
|
if (item.type === 'section') return /*#__PURE__*/ (0, $4oXwn$react).createElement((0, $b966e606890cc5ca$export$4b1545b4f2016d26), {
|
|
123
123
|
key: item.key,
|
|
124
124
|
item: item,
|
|
125
|
-
state: state
|
|
126
|
-
onAction: completeProps.onAction
|
|
125
|
+
state: state
|
|
127
126
|
});
|
|
128
127
|
let menuItem = /*#__PURE__*/ (0, $4oXwn$react).createElement((0, $48fb8f5e1202c980$export$2ce376c2cc3355c8), {
|
|
129
128
|
key: item.key,
|
|
130
129
|
item: item,
|
|
131
|
-
state: state
|
|
132
|
-
onAction: completeProps.onAction
|
|
130
|
+
state: state
|
|
133
131
|
});
|
|
134
132
|
if (item.wrapper) menuItem = item.wrapper(menuItem);
|
|
135
133
|
return menuItem;
|
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 onAction={completeProps.onAction} />\n );\n }\n\n let menuItem = (\n <MenuItem\n key={item.key}\n item={item}\n state={state}\n onAction={completeProps.onAction} />\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(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"}
|
package/dist/MenuItem.main.js
CHANGED
|
@@ -51,7 +51,7 @@ $parcel$export(module.exports, "MenuItem", () => $1d718563708db5b5$export$2ce376
|
|
|
51
51
|
|
|
52
52
|
|
|
53
53
|
function $1d718563708db5b5$export$2ce376c2cc3355c8(props) {
|
|
54
|
-
let { item: item, state: state, isVirtualized: isVirtualized
|
|
54
|
+
let { item: item, state: state, isVirtualized: isVirtualized } = props;
|
|
55
55
|
let { closeOnSelect: closeOnSelect } = (0, $cac834c4bc0a51d3$exports.useMenuContext)();
|
|
56
56
|
let { rendered: rendered, key: key } = item;
|
|
57
57
|
let stringFormatter = (0, $8PAEC$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($2f9ceea24fba5443$exports))), '@react-spectrum/menu');
|
|
@@ -77,7 +77,6 @@ function $1d718563708db5b5$export$2ce376c2cc3355c8(props) {
|
|
|
77
77
|
key: key,
|
|
78
78
|
closeOnSelect: closeOnSelect,
|
|
79
79
|
isVirtualized: isVirtualized,
|
|
80
|
-
onAction: onAction,
|
|
81
80
|
...submenuTriggerProps
|
|
82
81
|
}, state, ref);
|
|
83
82
|
let endId = (0, $8PAEC$reactariautils.useSlotId)();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;
|
|
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.main.js.map"}
|
package/dist/MenuItem.mjs
CHANGED
|
@@ -45,7 +45,7 @@ function $parcel$interopDefault(a) {
|
|
|
45
45
|
|
|
46
46
|
|
|
47
47
|
function $48fb8f5e1202c980$export$2ce376c2cc3355c8(props) {
|
|
48
|
-
let { item: item, state: state, isVirtualized: isVirtualized
|
|
48
|
+
let { item: item, state: state, isVirtualized: isVirtualized } = props;
|
|
49
49
|
let { closeOnSelect: closeOnSelect } = (0, $d94604d52c3e3feb$export$21c7ab35b39f78ec)();
|
|
50
50
|
let { rendered: rendered, key: key } = item;
|
|
51
51
|
let stringFormatter = (0, $bVyMs$useLocalizedStringFormatter)((0, ($parcel$interopDefault($bVyMs$intlStringsmodulejs))), '@react-spectrum/menu');
|
|
@@ -71,7 +71,6 @@ function $48fb8f5e1202c980$export$2ce376c2cc3355c8(props) {
|
|
|
71
71
|
key: key,
|
|
72
72
|
closeOnSelect: closeOnSelect,
|
|
73
73
|
isVirtualized: isVirtualized,
|
|
74
|
-
onAction: onAction,
|
|
75
74
|
...submenuTriggerProps
|
|
76
75
|
}, state, ref);
|
|
77
76
|
let endId = (0, $bVyMs$useSlotId)();
|
package/dist/MenuItem.module.js
CHANGED
|
@@ -45,7 +45,7 @@ function $parcel$interopDefault(a) {
|
|
|
45
45
|
|
|
46
46
|
|
|
47
47
|
function $48fb8f5e1202c980$export$2ce376c2cc3355c8(props) {
|
|
48
|
-
let { item: item, state: state, isVirtualized: isVirtualized
|
|
48
|
+
let { item: item, state: state, isVirtualized: isVirtualized } = props;
|
|
49
49
|
let { closeOnSelect: closeOnSelect } = (0, $d94604d52c3e3feb$export$21c7ab35b39f78ec)();
|
|
50
50
|
let { rendered: rendered, key: key } = item;
|
|
51
51
|
let stringFormatter = (0, $bVyMs$useLocalizedStringFormatter)((0, ($parcel$interopDefault($bVyMs$intlStringsmodulejs))), '@react-spectrum/menu');
|
|
@@ -71,7 +71,6 @@ function $48fb8f5e1202c980$export$2ce376c2cc3355c8(props) {
|
|
|
71
71
|
key: key,
|
|
72
72
|
closeOnSelect: closeOnSelect,
|
|
73
73
|
isVirtualized: isVirtualized,
|
|
74
|
-
onAction: onAction,
|
|
75
74
|
...submenuTriggerProps
|
|
76
75
|
}, state, ref);
|
|
77
76
|
let endId = (0, $bVyMs$useSlotId)();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;
|
|
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
|
@@ -36,7 +36,7 @@ $parcel$export(module.exports, "MenuSection", () => $5793ff412227d2fc$export$4b1
|
|
|
36
36
|
|
|
37
37
|
function $5793ff412227d2fc$export$4b1545b4f2016d26(props) {
|
|
38
38
|
var _filter_at;
|
|
39
|
-
let { item: item, state: state
|
|
39
|
+
let { item: item, state: state } = props;
|
|
40
40
|
let { itemProps: itemProps, headingProps: headingProps, groupProps: groupProps } = (0, $3nsTP$reactariamenu.useMenuSection)({
|
|
41
41
|
heading: item.rendered,
|
|
42
42
|
'aria-label': item['aria-label']
|
|
@@ -69,8 +69,7 @@ function $5793ff412227d2fc$export$4b1545b4f2016d26(props) {
|
|
|
69
69
|
let item = /*#__PURE__*/ (0, ($parcel$interopDefault($3nsTP$react))).createElement((0, $1d718563708db5b5$exports.MenuItem), {
|
|
70
70
|
key: node.key,
|
|
71
71
|
item: node,
|
|
72
|
-
state: state
|
|
73
|
-
onAction: onAction
|
|
72
|
+
state: state
|
|
74
73
|
});
|
|
75
74
|
if (node.wrapper) item = node.wrapper(item);
|
|
76
75
|
return item;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;
|
|
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,MAAM,UAAU,CAAC,UAAU,IAAI,SAAS,KAAK;IAEzH,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 sectionIsLast = lastSectionKey === item.key && state.collection.getItem(state.collection.getLastKey()).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
|
@@ -30,7 +30,7 @@ function $parcel$interopDefault(a) {
|
|
|
30
30
|
|
|
31
31
|
function $b966e606890cc5ca$export$4b1545b4f2016d26(props) {
|
|
32
32
|
var _filter_at;
|
|
33
|
-
let { item: item, state: state
|
|
33
|
+
let { item: item, state: state } = props;
|
|
34
34
|
let { itemProps: itemProps, headingProps: headingProps, groupProps: groupProps } = (0, $9353d$useMenuSection)({
|
|
35
35
|
heading: item.rendered,
|
|
36
36
|
'aria-label': item['aria-label']
|
|
@@ -63,8 +63,7 @@ function $b966e606890cc5ca$export$4b1545b4f2016d26(props) {
|
|
|
63
63
|
let item = /*#__PURE__*/ (0, $9353d$react).createElement((0, $48fb8f5e1202c980$export$2ce376c2cc3355c8), {
|
|
64
64
|
key: node.key,
|
|
65
65
|
item: node,
|
|
66
|
-
state: state
|
|
67
|
-
onAction: onAction
|
|
66
|
+
state: state
|
|
68
67
|
});
|
|
69
68
|
if (node.wrapper) item = node.wrapper(item);
|
|
70
69
|
return item;
|
|
@@ -30,7 +30,7 @@ function $parcel$interopDefault(a) {
|
|
|
30
30
|
|
|
31
31
|
function $b966e606890cc5ca$export$4b1545b4f2016d26(props) {
|
|
32
32
|
var _filter_at;
|
|
33
|
-
let { item: item, state: state
|
|
33
|
+
let { item: item, state: state } = props;
|
|
34
34
|
let { itemProps: itemProps, headingProps: headingProps, groupProps: groupProps } = (0, $9353d$useMenuSection)({
|
|
35
35
|
heading: item.rendered,
|
|
36
36
|
'aria-label': item['aria-label']
|
|
@@ -63,8 +63,7 @@ function $b966e606890cc5ca$export$4b1545b4f2016d26(props) {
|
|
|
63
63
|
let item = /*#__PURE__*/ (0, $9353d$react).createElement((0, $48fb8f5e1202c980$export$2ce376c2cc3355c8), {
|
|
64
64
|
key: node.key,
|
|
65
65
|
item: node,
|
|
66
|
-
state: state
|
|
67
|
-
onAction: onAction
|
|
66
|
+
state: state
|
|
68
67
|
});
|
|
69
68
|
if (node.wrapper) item = node.wrapper(item);
|
|
70
69
|
return item;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;
|
|
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,MAAM,UAAU,CAAC,UAAU,IAAI,SAAS,KAAK;IAEzH,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 sectionIsLast = lastSectionKey === item.key && state.collection.getItem(state.collection.getLastKey()).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/context.main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;AAkBM,MAAM,4CAAc,CAAA,GAAA,sCAAI,EAAE,aAAa,CAAmB,CAAC;AAE3D,SAAS;IACd,OAAO,CAAA,GAAA,uBAAS,EAAE;AACpB;AAWO,MAAM,4CAAwB,CAAA,GAAA,sCAAI,EAAE,aAAa,CAAyC;AAE1F,SAAS;IACd,OAAO,CAAA,GAAA,uBAAS,EAAE;AACpB;AAWO,MAAM,4CAAmB,CAAA,GAAA,sCAAI,EAAE,aAAa,CAA6B;AAEzE,SAAS;IACd,OAAO,CAAA,GAAA,uBAAS,EAAE;AACpB","sources":["packages/@react-spectrum/menu/src/context.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DOMProps, FocusStrategy, HoverEvents, KeyboardEvents, PressEvents} from '@react-types/shared';\nimport React, {HTMLAttributes, MutableRefObject,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;AAkBM,MAAM,4CAAc,CAAA,GAAA,sCAAI,EAAE,aAAa,CAAmB,CAAC;AAE3D,SAAS;IACd,OAAO,CAAA,GAAA,uBAAS,EAAE;AACpB;AAWO,MAAM,4CAAwB,CAAA,GAAA,sCAAI,EAAE,aAAa,CAAyC;AAE1F,SAAS;IACd,OAAO,CAAA,GAAA,uBAAS,EAAE;AACpB;AAWO,MAAM,4CAAmB,CAAA,GAAA,sCAAI,EAAE,aAAa,CAA6B;AAEzE,SAAS;IACd,OAAO,CAAA,GAAA,uBAAS,EAAE;AACpB","sources":["packages/@react-spectrum/menu/src/context.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DOMProps, FocusStrategy, HoverEvents, KeyboardEvents, PressEvents, RefObject} from '@react-types/shared';\nimport React, {HTMLAttributes, MutableRefObject, useContext} from 'react';\nimport {RootMenuTriggerState} from '@react-stately/menu';\nimport {TreeState} from '@react-stately/tree';\n\nexport interface MenuContextValue extends Omit<HTMLAttributes<HTMLElement>, 'autoFocus' | 'onKeyDown'>, Pick<KeyboardEvents, 'onKeyDown'> {\n onClose?: () => void,\n closeOnSelect?: boolean,\n shouldFocusWrap?: boolean,\n autoFocus?: boolean | FocusStrategy,\n ref?: MutableRefObject<HTMLDivElement>,\n state?: RootMenuTriggerState,\n onBackButtonPress?: () => void,\n submenuLevel?: number\n}\n\nexport const MenuContext = React.createContext<MenuContextValue>({});\n\nexport function useMenuContext(): MenuContextValue {\n return useContext(MenuContext);\n}\n\nexport interface SubmenuTriggerContextValue extends DOMProps, Pick<PressEvents, 'onPressStart' | 'onPress'>, Pick<HoverEvents, 'onHoverChange'>, Pick<KeyboardEvents, 'onKeyDown'> {\n isUnavailable?: boolean,\n triggerRef?: MutableRefObject<HTMLElement>,\n 'aria-expanded'?: boolean | 'true' | 'false',\n 'aria-controls'?: string,\n 'aria-haspopup'?: 'dialog' | 'menu',\n isOpen?: boolean\n}\n\nexport const SubmenuTriggerContext = React.createContext<SubmenuTriggerContextValue | undefined>(undefined);\n\nexport function useSubmenuTriggerContext(): SubmenuTriggerContextValue {\n return useContext(SubmenuTriggerContext);\n}\n\nexport interface MenuStateContextValue<T> {\n state?: TreeState<T>,\n popoverContainer?: HTMLElement,\n trayContainerRef?: RefObject<HTMLElement | null>,\n menu?: RefObject<HTMLDivElement | null>,\n submenu?: RefObject<HTMLDivElement | null>,\n rootMenuTriggerState?: RootMenuTriggerState\n}\n\nexport const MenuStateContext = React.createContext<MenuStateContextValue<any>>(undefined);\n\nexport function useMenuStateContext<T>(): MenuStateContextValue<T> {\n return useContext(MenuStateContext);\n}\n"],"names":[],"version":3,"file":"context.main.js.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;AAAA;;;;;;;;;;CAUC;AAkBM,MAAM,4CAAc,CAAA,GAAA,YAAI,EAAE,aAAa,CAAmB,CAAC;AAE3D,SAAS;IACd,OAAO,CAAA,GAAA,iBAAS,EAAE;AACpB;AAWO,MAAM,4CAAwB,CAAA,GAAA,YAAI,EAAE,aAAa,CAAyC;AAE1F,SAAS;IACd,OAAO,CAAA,GAAA,iBAAS,EAAE;AACpB;AAWO,MAAM,4CAAmB,CAAA,GAAA,YAAI,EAAE,aAAa,CAA6B;AAEzE,SAAS;IACd,OAAO,CAAA,GAAA,iBAAS,EAAE;AACpB","sources":["packages/@react-spectrum/menu/src/context.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DOMProps, FocusStrategy, HoverEvents, KeyboardEvents, PressEvents} from '@react-types/shared';\nimport React, {HTMLAttributes, MutableRefObject,
|
|
1
|
+
{"mappings":";;AAAA;;;;;;;;;;CAUC;AAkBM,MAAM,4CAAc,CAAA,GAAA,YAAI,EAAE,aAAa,CAAmB,CAAC;AAE3D,SAAS;IACd,OAAO,CAAA,GAAA,iBAAS,EAAE;AACpB;AAWO,MAAM,4CAAwB,CAAA,GAAA,YAAI,EAAE,aAAa,CAAyC;AAE1F,SAAS;IACd,OAAO,CAAA,GAAA,iBAAS,EAAE;AACpB;AAWO,MAAM,4CAAmB,CAAA,GAAA,YAAI,EAAE,aAAa,CAA6B;AAEzE,SAAS;IACd,OAAO,CAAA,GAAA,iBAAS,EAAE;AACpB","sources":["packages/@react-spectrum/menu/src/context.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DOMProps, FocusStrategy, HoverEvents, KeyboardEvents, PressEvents, RefObject} from '@react-types/shared';\nimport React, {HTMLAttributes, MutableRefObject, useContext} from 'react';\nimport {RootMenuTriggerState} from '@react-stately/menu';\nimport {TreeState} from '@react-stately/tree';\n\nexport interface MenuContextValue extends Omit<HTMLAttributes<HTMLElement>, 'autoFocus' | 'onKeyDown'>, Pick<KeyboardEvents, 'onKeyDown'> {\n onClose?: () => void,\n closeOnSelect?: boolean,\n shouldFocusWrap?: boolean,\n autoFocus?: boolean | FocusStrategy,\n ref?: MutableRefObject<HTMLDivElement>,\n state?: RootMenuTriggerState,\n onBackButtonPress?: () => void,\n submenuLevel?: number\n}\n\nexport const MenuContext = React.createContext<MenuContextValue>({});\n\nexport function useMenuContext(): MenuContextValue {\n return useContext(MenuContext);\n}\n\nexport interface SubmenuTriggerContextValue extends DOMProps, Pick<PressEvents, 'onPressStart' | 'onPress'>, Pick<HoverEvents, 'onHoverChange'>, Pick<KeyboardEvents, 'onKeyDown'> {\n isUnavailable?: boolean,\n triggerRef?: MutableRefObject<HTMLElement>,\n 'aria-expanded'?: boolean | 'true' | 'false',\n 'aria-controls'?: string,\n 'aria-haspopup'?: 'dialog' | 'menu',\n isOpen?: boolean\n}\n\nexport const SubmenuTriggerContext = React.createContext<SubmenuTriggerContextValue | undefined>(undefined);\n\nexport function useSubmenuTriggerContext(): SubmenuTriggerContextValue {\n return useContext(SubmenuTriggerContext);\n}\n\nexport interface MenuStateContextValue<T> {\n state?: TreeState<T>,\n popoverContainer?: HTMLElement,\n trayContainerRef?: RefObject<HTMLElement | null>,\n menu?: RefObject<HTMLDivElement | null>,\n submenu?: RefObject<HTMLDivElement | null>,\n rootMenuTriggerState?: RootMenuTriggerState\n}\n\nexport const MenuStateContext = React.createContext<MenuStateContextValue<any>>(undefined);\n\nexport function useMenuStateContext<T>(): MenuStateContextValue<T> {\n return useContext(MenuStateContext);\n}\n"],"names":[],"version":3,"file":"context.module.js.map"}
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;AC6GA;;;GAGG;AACH,OAAA,IAAI,sHAAsC,CAAC;ACzF3C;IACE;;OAEG;IACH,QAAQ,EAAE,aAAa,GAAG,CAAC,EAAE,CAAC;IAC9B,SAAS,EAAE,GAAG,CAAA;CACf;AAED,4CAA6C,SAAQ,IAAI,CAAC,mBAAmB,EAAE,WAAW,CAAC;CAAG;AAwH9F,OAAA,IAAI,gBAAoC,CAAC,KAAK,EAAE,2BAA2B,KAAK,IAAI,OAAO,CAAC;
|
|
1
|
+
{"mappings":";;;AC6GA;;;GAGG;AACH,OAAA,IAAI,sHAAsC,CAAC;ACzF3C;IACE;;OAEG;IACH,QAAQ,EAAE,aAAa,GAAG,CAAC,EAAE,CAAC;IAC9B,SAAS,EAAE,GAAG,CAAA;CACf;AAED,4CAA6C,SAAQ,IAAI,CAAC,mBAAmB,EAAE,WAAW,CAAC;CAAG;AAwH9F,OAAA,IAAI,gBAAoC,CAAC,KAAK,EAAE,2BAA2B,KAAK,IAAI,OAAO,CAAC;AG8D5F;;GAEG;AAGH,OAAA,MAAM,MAAkC,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,OAAO,cAAc,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;ACnK1H;;GAEG;AACH,OAAA,MAAM,YAAwC,CAAC,CAAC,EAAE,KAAK,EAAE,wBAAwB,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,aAAa,iBAAiB,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;ACjC/I;IACE,sDAAsD;IACtD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wDAAwD;IACxD,QAAQ,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAA;CACvC;AAMD,+CAAgD,SAAQ,sBAAsB;CAAG;AA0JjF,OAAA,IAAI,uBAAiC,CAAC,KAAK,EAAE,8BAA8B,KAAK,IAAI,OAAO,CAAC;AC5K5F,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,4BAA4B,CAAC;AACzD,YAAY,EAAC,uBAAuB,EAAE,iBAAiB,EAAE,wBAAwB,EAAC,MAAM,mBAAmB,CAAC","sources":["packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/context.ts","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/MenuTrigger.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/SubmenuTrigger.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/MenuItem.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/MenuSection.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/Menu.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/ActionMenu.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx","packages/@react-spectrum/menu/src/packages/@react-spectrum/menu/src/index.ts","packages/@react-spectrum/menu/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {MenuTrigger} from './MenuTrigger';\nexport {SubmenuTrigger} from './SubmenuTrigger';\nexport {Menu} from './Menu';\nexport {ActionMenu} from './ActionMenu';\nexport {ContextualHelpTrigger} from './ContextualHelpTrigger';\nexport {Item, Section} from '@react-stately/collections';\nexport type {SpectrumActionMenuProps, SpectrumMenuProps, SpectrumMenuTriggerProps} from '@react-types/menu';\nexport type {SpectrumMenuDialogTriggerProps} from './ContextualHelpTrigger';\nexport type {SpectrumSubmenuTriggerProps} from './SubmenuTrigger';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-spectrum/menu",
|
|
3
|
-
"version": "3.19.2-nightly.
|
|
3
|
+
"version": "3.19.2-nightly.4704+546ffa41f",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -36,31 +36,31 @@
|
|
|
36
36
|
"url": "https://github.com/adobe/react-spectrum"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@react-aria/focus": "3.0.0-nightly.
|
|
40
|
-
"@react-aria/i18n": "3.0.0-nightly.
|
|
41
|
-
"@react-aria/interactions": "3.0.0-nightly.
|
|
42
|
-
"@react-aria/menu": "3.14.2-nightly.
|
|
43
|
-
"@react-aria/overlays": "3.0.0-nightly.
|
|
44
|
-
"@react-aria/separator": "3.0.0-nightly.
|
|
45
|
-
"@react-aria/utils": "3.0.0-nightly.
|
|
46
|
-
"@react-spectrum/button": "3.0.0-nightly.
|
|
47
|
-
"@react-spectrum/layout": "3.6.6-nightly.
|
|
48
|
-
"@react-spectrum/overlays": "3.0.0-nightly.
|
|
49
|
-
"@react-spectrum/text": "3.5.6-nightly.
|
|
50
|
-
"@react-spectrum/utils": "3.0.0-nightly.
|
|
51
|
-
"@react-stately/collections": "3.0.0-nightly.
|
|
52
|
-
"@react-stately/menu": "3.7.2-nightly.
|
|
53
|
-
"@react-stately/overlays": "3.6.8-nightly.
|
|
54
|
-
"@react-stately/tree": "3.0.0-nightly.
|
|
55
|
-
"@react-types/menu": "3.9.10-nightly.
|
|
56
|
-
"@react-types/overlays": "3.8.8-nightly.
|
|
57
|
-
"@react-types/shared": "3.0.0-nightly.
|
|
58
|
-
"@spectrum-icons/ui": "3.0.0-nightly.
|
|
59
|
-
"@spectrum-icons/workflow": "3.0.0-nightly.
|
|
39
|
+
"@react-aria/focus": "3.0.0-nightly.2992+546ffa41f",
|
|
40
|
+
"@react-aria/i18n": "3.0.0-nightly.2992+546ffa41f",
|
|
41
|
+
"@react-aria/interactions": "3.0.0-nightly.2992+546ffa41f",
|
|
42
|
+
"@react-aria/menu": "3.14.2-nightly.4704+546ffa41f",
|
|
43
|
+
"@react-aria/overlays": "3.0.0-nightly.2992+546ffa41f",
|
|
44
|
+
"@react-aria/separator": "3.0.0-nightly.2992+546ffa41f",
|
|
45
|
+
"@react-aria/utils": "3.0.0-nightly.2992+546ffa41f",
|
|
46
|
+
"@react-spectrum/button": "3.0.0-nightly.2992+546ffa41f",
|
|
47
|
+
"@react-spectrum/layout": "3.6.6-nightly.4704+546ffa41f",
|
|
48
|
+
"@react-spectrum/overlays": "3.0.0-nightly.2992+546ffa41f",
|
|
49
|
+
"@react-spectrum/text": "3.5.6-nightly.4704+546ffa41f",
|
|
50
|
+
"@react-spectrum/utils": "3.0.0-nightly.2992+546ffa41f",
|
|
51
|
+
"@react-stately/collections": "3.0.0-nightly.2992+546ffa41f",
|
|
52
|
+
"@react-stately/menu": "3.7.2-nightly.4704+546ffa41f",
|
|
53
|
+
"@react-stately/overlays": "3.6.8-nightly.4704+546ffa41f",
|
|
54
|
+
"@react-stately/tree": "3.0.0-nightly.2992+546ffa41f",
|
|
55
|
+
"@react-types/menu": "3.9.10-nightly.4704+546ffa41f",
|
|
56
|
+
"@react-types/overlays": "3.8.8-nightly.4704+546ffa41f",
|
|
57
|
+
"@react-types/shared": "3.0.0-nightly.2992+546ffa41f",
|
|
58
|
+
"@spectrum-icons/ui": "3.0.0-nightly.2992+546ffa41f",
|
|
59
|
+
"@spectrum-icons/workflow": "3.0.0-nightly.2992+546ffa41f",
|
|
60
60
|
"@swc/helpers": "^0.5.0"
|
|
61
61
|
},
|
|
62
62
|
"devDependencies": {
|
|
63
|
-
"@adobe/spectrum-css-temp": "3.0.0-nightly.
|
|
63
|
+
"@adobe/spectrum-css-temp": "3.0.0-nightly.2992+546ffa41f"
|
|
64
64
|
},
|
|
65
65
|
"peerDependencies": {
|
|
66
66
|
"@react-spectrum/provider": "^3.0.0",
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"publishConfig": {
|
|
71
71
|
"access": "public"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "546ffa41f7d1d3a566950a14d8f46cf726891220"
|
|
74
74
|
}
|
package/src/Menu.tsx
CHANGED
|
@@ -98,8 +98,7 @@ function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDiv
|
|
|
98
98
|
<MenuSection
|
|
99
99
|
key={item.key}
|
|
100
100
|
item={item}
|
|
101
|
-
state={state}
|
|
102
|
-
onAction={completeProps.onAction} />
|
|
101
|
+
state={state} />
|
|
103
102
|
);
|
|
104
103
|
}
|
|
105
104
|
|
|
@@ -107,8 +106,7 @@ function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDiv
|
|
|
107
106
|
<MenuItem
|
|
108
107
|
key={item.key}
|
|
109
108
|
item={item}
|
|
110
|
-
state={state}
|
|
111
|
-
onAction={completeProps.onAction} />
|
|
109
|
+
state={state} />
|
|
112
110
|
);
|
|
113
111
|
|
|
114
112
|
if (item.wrapper) {
|
package/src/MenuItem.tsx
CHANGED
|
@@ -14,7 +14,7 @@ import CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';
|
|
|
14
14
|
import ChevronLeft from '@spectrum-icons/workflow/ChevronLeft';
|
|
15
15
|
import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
|
|
16
16
|
import {classNames, ClearSlots, SlotProvider} from '@react-spectrum/utils';
|
|
17
|
-
import {DOMAttributes,
|
|
17
|
+
import {DOMAttributes, Node} from '@react-types/shared';
|
|
18
18
|
import {FocusRing} from '@react-aria/focus';
|
|
19
19
|
import {Grid} from '@react-spectrum/layout';
|
|
20
20
|
import InfoOutline from '@spectrum-icons/workflow/InfoOutline';
|
|
@@ -32,8 +32,7 @@ import {useMenuItem} from '@react-aria/menu';
|
|
|
32
32
|
interface MenuItemProps<T> {
|
|
33
33
|
item: Node<T>,
|
|
34
34
|
state: TreeState<T>,
|
|
35
|
-
isVirtualized?: boolean
|
|
36
|
-
onAction?: (key: Key) => void
|
|
35
|
+
isVirtualized?: boolean
|
|
37
36
|
}
|
|
38
37
|
|
|
39
38
|
/** @private */
|
|
@@ -41,8 +40,7 @@ export function MenuItem<T>(props: MenuItemProps<T>) {
|
|
|
41
40
|
let {
|
|
42
41
|
item,
|
|
43
42
|
state,
|
|
44
|
-
isVirtualized
|
|
45
|
-
onAction
|
|
43
|
+
isVirtualized
|
|
46
44
|
} = props;
|
|
47
45
|
let {
|
|
48
46
|
closeOnSelect
|
|
@@ -83,7 +81,6 @@ export function MenuItem<T>(props: MenuItemProps<T>) {
|
|
|
83
81
|
key,
|
|
84
82
|
closeOnSelect,
|
|
85
83
|
isVirtualized,
|
|
86
|
-
onAction,
|
|
87
84
|
...submenuTriggerProps
|
|
88
85
|
},
|
|
89
86
|
state,
|
package/src/MenuSection.tsx
CHANGED
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
|
|
13
13
|
import {classNames} from '@react-spectrum/utils';
|
|
14
14
|
import {getChildNodes} from '@react-stately/collections';
|
|
15
|
-
import {Key, Node} from '@react-types/shared';
|
|
16
15
|
import {MenuItem} from './MenuItem';
|
|
16
|
+
import {Node} from '@react-types/shared';
|
|
17
17
|
import React, {Fragment} from 'react';
|
|
18
18
|
import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
|
|
19
19
|
import {TreeState} from '@react-stately/tree';
|
|
@@ -22,13 +22,12 @@ import {useSeparator} from '@react-aria/separator';
|
|
|
22
22
|
|
|
23
23
|
interface MenuSectionProps<T> {
|
|
24
24
|
item: Node<T>,
|
|
25
|
-
state: TreeState<T
|
|
26
|
-
onAction?: (key: Key) => void
|
|
25
|
+
state: TreeState<T>
|
|
27
26
|
}
|
|
28
27
|
|
|
29
28
|
/** @private */
|
|
30
29
|
export function MenuSection<T>(props: MenuSectionProps<T>) {
|
|
31
|
-
let {item, state
|
|
30
|
+
let {item, state} = props;
|
|
32
31
|
let {itemProps, headingProps, groupProps} = useMenuSection({
|
|
33
32
|
heading: item.rendered,
|
|
34
33
|
'aria-label': item['aria-label']
|
|
@@ -84,8 +83,7 @@ export function MenuSection<T>(props: MenuSectionProps<T>) {
|
|
|
84
83
|
<MenuItem
|
|
85
84
|
key={node.key}
|
|
86
85
|
item={node}
|
|
87
|
-
state={state}
|
|
88
|
-
onAction={onAction} />
|
|
86
|
+
state={state} />
|
|
89
87
|
);
|
|
90
88
|
|
|
91
89
|
if (node.wrapper) {
|
package/src/context.ts
CHANGED
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
* governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
|
-
import {DOMProps, FocusStrategy, HoverEvents, KeyboardEvents, PressEvents} from '@react-types/shared';
|
|
14
|
-
import React, {HTMLAttributes, MutableRefObject,
|
|
13
|
+
import {DOMProps, FocusStrategy, HoverEvents, KeyboardEvents, PressEvents, RefObject} from '@react-types/shared';
|
|
14
|
+
import React, {HTMLAttributes, MutableRefObject, useContext} from 'react';
|
|
15
15
|
import {RootMenuTriggerState} from '@react-stately/menu';
|
|
16
16
|
import {TreeState} from '@react-stately/tree';
|
|
17
17
|
|