@react-aria/menu 3.14.2-nightly.4674 → 3.14.2-nightly.4681
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/types.d.ts +6 -6
- package/dist/types.d.ts.map +1 -1
- package/dist/useMenu.main.js.map +1 -1
- package/dist/useMenu.module.js.map +1 -1
- package/dist/useMenuItem.main.js.map +1 -1
- package/dist/useMenuItem.module.js.map +1 -1
- package/dist/useMenuTrigger.main.js.map +1 -1
- package/dist/useMenuTrigger.module.js.map +1 -1
- package/dist/useSafelyMouseToSubmenu.main.js +5 -5
- package/dist/useSafelyMouseToSubmenu.main.js.map +1 -1
- package/dist/useSafelyMouseToSubmenu.mjs +5 -5
- package/dist/useSafelyMouseToSubmenu.module.js +5 -5
- package/dist/useSafelyMouseToSubmenu.module.js.map +1 -1
- package/dist/useSubmenuTrigger.main.js +1 -1
- package/dist/useSubmenuTrigger.main.js.map +1 -1
- package/dist/useSubmenuTrigger.mjs +1 -1
- package/dist/useSubmenuTrigger.module.js +1 -1
- package/dist/useSubmenuTrigger.module.js.map +1 -1
- package/package.json +16 -16
- package/src/useMenu.ts +1 -1
- package/src/useMenuItem.ts +1 -1
- package/src/useMenuTrigger.ts +1 -1
- package/src/useSafelyMouseToSubmenu.ts +7 -7
- package/src/useSubmenuTrigger.ts +4 -4
package/dist/types.d.ts
CHANGED
|
@@ -24,7 +24,7 @@ export interface AriaMenuOptions<T> extends Omit<AriaMenuProps<T>, 'children'>,
|
|
|
24
24
|
* @param props - Props for the menu.
|
|
25
25
|
* @param state - State for the menu, as returned by `useListState`.
|
|
26
26
|
*/
|
|
27
|
-
export function useMenu<T>(props: AriaMenuOptions<T>, state: TreeState<T>, ref: RefObject<HTMLElement>): MenuAria;
|
|
27
|
+
export function useMenu<T>(props: AriaMenuOptions<T>, state: TreeState<T>, ref: RefObject<HTMLElement | null>): MenuAria;
|
|
28
28
|
export interface AriaMenuTriggerProps {
|
|
29
29
|
/** The type of menu that the menu trigger opens. */
|
|
30
30
|
type?: 'menu' | 'listbox';
|
|
@@ -45,7 +45,7 @@ export interface MenuTriggerAria<T> {
|
|
|
45
45
|
* @param state - State for the menu trigger.
|
|
46
46
|
* @param ref - Ref to the HTML element trigger for the menu.
|
|
47
47
|
*/
|
|
48
|
-
export function useMenuTrigger<T>(props: AriaMenuTriggerProps, state: MenuTriggerState, ref: RefObject<Element>): MenuTriggerAria<T>;
|
|
48
|
+
export function useMenuTrigger<T>(props: AriaMenuTriggerProps, state: MenuTriggerState, ref: RefObject<Element | null>): MenuTriggerAria<T>;
|
|
49
49
|
export interface MenuItemAria {
|
|
50
50
|
/** Props for the menu item element. */
|
|
51
51
|
menuItemProps: DOMAttributes;
|
|
@@ -109,7 +109,7 @@ export interface AriaMenuItemProps extends DOMProps, PressEvents, HoverEvents, K
|
|
|
109
109
|
* @param props - Props for the item.
|
|
110
110
|
* @param state - State for the menu, as returned by `useTreeState`.
|
|
111
111
|
*/
|
|
112
|
-
export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, ref: RefObject<FocusableElement>): MenuItemAria;
|
|
112
|
+
export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, ref: RefObject<FocusableElement | null>): MenuItemAria;
|
|
113
113
|
export interface AriaMenuSectionProps {
|
|
114
114
|
/** The heading for the section. */
|
|
115
115
|
heading?: ReactNode;
|
|
@@ -141,9 +141,9 @@ export interface AriaSubmenuTriggerProps {
|
|
|
141
141
|
/** The type of the contents that the submenu trigger opens. */
|
|
142
142
|
type?: 'dialog' | 'menu';
|
|
143
143
|
/** Ref of the menu that contains the submenu trigger. */
|
|
144
|
-
parentMenuRef: RefObject<HTMLElement>;
|
|
144
|
+
parentMenuRef: RefObject<HTMLElement | null>;
|
|
145
145
|
/** Ref of the submenu opened by the submenu trigger. */
|
|
146
|
-
submenuRef: RefObject<HTMLElement>;
|
|
146
|
+
submenuRef: RefObject<HTMLElement | null>;
|
|
147
147
|
/**
|
|
148
148
|
* The delay time in milliseconds for the submenu to appear after hovering over the trigger.
|
|
149
149
|
* @default 200
|
|
@@ -172,7 +172,7 @@ export interface SubmenuTriggerAria<T> {
|
|
|
172
172
|
* @param state - State for the submenu trigger.
|
|
173
173
|
* @param ref - Ref to the submenu trigger element.
|
|
174
174
|
*/
|
|
175
|
-
export function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: SubmenuTriggerState, ref: RefObject<FocusableElement>): SubmenuTriggerAria<T>;
|
|
175
|
+
export function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: SubmenuTriggerState, ref: RefObject<FocusableElement | null>): SubmenuTriggerAria<T>;
|
|
176
176
|
export type { AriaMenuProps } from '@react-types/menu';
|
|
177
177
|
|
|
178
178
|
//# sourceMappingURL=types.d.ts.map
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;AAmBA;IACE,kCAAkC;IAClC,SAAS,EAAE,aAAa,CAAA;CACzB;AAED,iCAAiC,CAAC,CAAE,SAAQ,IAAI,CAAC,cAAc,CAAC,CAAC,EAAE,UAAU,CAAC,EAAE,cAAc;IAC5F,+CAA+C;IAC/C,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;CACpC;AASD;;;;;GAKG;AACH,wBAAwB,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,WAAW,CAAC,GAAG,QAAQ,
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/menu/src/packages/@react-aria/menu/src/useMenu.ts","packages/@react-aria/menu/src/packages/@react-aria/menu/src/useMenuTrigger.ts","packages/@react-aria/menu/src/packages/@react-aria/menu/src/useMenuItem.ts","packages/@react-aria/menu/src/packages/@react-aria/menu/src/useMenuSection.ts","packages/@react-aria/menu/src/packages/@react-aria/menu/src/useSafelyMouseToSubmenu.ts","packages/@react-aria/menu/src/packages/@react-aria/menu/src/useSubmenuTrigger.ts","packages/@react-aria/menu/src/packages/@react-aria/menu/src/index.ts","packages/@react-aria/menu/src/index.ts"],"sourcesContent":[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\nexport {useMenuTrigger} from './useMenuTrigger';\nexport {useMenu} from './useMenu';\nexport {useMenuItem} from './useMenuItem';\nexport {useMenuSection} from './useMenuSection';\nexport {useSubmenuTrigger} from './useSubmenuTrigger';\n\nexport type {AriaMenuProps} from '@react-types/menu';\nexport type {AriaMenuTriggerProps, MenuTriggerAria} from './useMenuTrigger';\nexport type {AriaMenuOptions, MenuAria} from './useMenu';\nexport type {AriaMenuItemProps, MenuItemAria} from './useMenuItem';\nexport type {AriaMenuSectionProps, MenuSectionAria} from './useMenuSection';\nexport type {AriaSubmenuTriggerProps, SubmenuTriggerAria} from './useSubmenuTrigger';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
package/dist/useMenu.main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;AA8BM,MAAM,4CAAW,IAAI;AAQrB,SAAS,0CAAW,KAAyB,EAAE,KAAmB,EAAE,
|
|
1
|
+
{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;AA8BM,MAAM,4CAAW,IAAI;AAQrB,SAAS,0CAAW,KAAyB,EAAE,KAAmB,EAAE,GAAkC;IAC3G,IAAI,mBACF,kBAAkB,iBAClB,SAAS,WACT,OAAO,EACP,GAAG,YACJ,GAAG;IAEJ,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,kBAAkB,EACnD,QAAQ,IAAI,CAAC;IAGf,IAAI,WAAW,CAAA,GAAA,oCAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IACrD,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,2CAAgB,EAAE;QAClC,GAAG,UAAU;aACb;QACA,kBAAkB,MAAM,gBAAgB;QACxC,YAAY,MAAM,UAAU;QAC5B,cAAc,MAAM,YAAY;yBAChC;QACA,cAAc;IAChB;IAEA,0CAAS,GAAG,CAAC,OAAO;QAClB,SAAS,MAAM,OAAO;QACtB,UAAU,MAAM,QAAQ;IAC1B;IAEA,OAAO;QACL,WAAW,CAAA,GAAA,gCAAS,EAAE,UAAU;uBAAC;qBAAW;QAAO,GAAG;YACpD,MAAM;YACN,GAAG,SAAS;YACZ,WAAW,CAAC;gBACV,gGAAgG;gBAChG,IAAI,EAAE,GAAG,KAAK,UACZ,UAAU,SAAS,CAAC;YAExB;QACF;IACF;AACF","sources":["packages/@react-aria/menu/src/useMenu.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 {AriaMenuProps} from '@react-types/menu';\nimport {DOMAttributes, Key, KeyboardDelegate, KeyboardEvents} from '@react-types/shared';\nimport {filterDOMProps, mergeProps} from '@react-aria/utils';\nimport {RefObject} from 'react';\nimport {TreeState} from '@react-stately/tree';\nimport {useSelectableList} from '@react-aria/selection';\n\nexport interface MenuAria {\n /** Props for the menu element. */\n menuProps: DOMAttributes\n}\n\nexport interface AriaMenuOptions<T> extends Omit<AriaMenuProps<T>, 'children'>, KeyboardEvents {\n /** Whether the menu uses virtual scrolling. */\n isVirtualized?: boolean,\n\n /**\n * An optional keyboard delegate implementation for type to select,\n * to override the default.\n */\n keyboardDelegate?: KeyboardDelegate\n}\n\ninterface MenuData {\n onClose?: () => void,\n onAction?: (key: Key) => void\n}\n\nexport const menuData = new WeakMap<TreeState<unknown>, MenuData>();\n\n/**\n * Provides the behavior and accessibility implementation for a menu component.\n * A menu displays a list of actions or options that a user can choose.\n * @param props - Props for the menu.\n * @param state - State for the menu, as returned by `useListState`.\n */\nexport function useMenu<T>(props: AriaMenuOptions<T>, state: TreeState<T>, ref: RefObject<HTMLElement | null>): MenuAria {\n let {\n shouldFocusWrap = true,\n onKeyDown,\n onKeyUp,\n ...otherProps\n } = props;\n\n if (!props['aria-label'] && !props['aria-labelledby']) {\n console.warn('An aria-label or aria-labelledby prop is required for accessibility.');\n }\n\n let domProps = filterDOMProps(props, {labelable: true});\n let {listProps} = useSelectableList({\n ...otherProps,\n ref,\n selectionManager: state.selectionManager,\n collection: state.collection,\n disabledKeys: state.disabledKeys,\n shouldFocusWrap,\n linkBehavior: 'override'\n });\n\n menuData.set(state, {\n onClose: props.onClose,\n onAction: props.onAction\n });\n\n return {\n menuProps: mergeProps(domProps, {onKeyDown, onKeyUp}, {\n role: 'menu',\n ...listProps,\n onKeyDown: (e) => {\n // don't clear the menu selected keys if the user is presses escape since escape closes the menu\n if (e.key !== 'Escape') {\n listProps.onKeyDown(e);\n }\n }\n })\n };\n}\n"],"names":[],"version":3,"file":"useMenu.main.js.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;AAAA;;;;;;;;;;CAUC;;AA8BM,MAAM,4CAAW,IAAI;AAQrB,SAAS,0CAAW,KAAyB,EAAE,KAAmB,EAAE,
|
|
1
|
+
{"mappings":";;;AAAA;;;;;;;;;;CAUC;;AA8BM,MAAM,4CAAW,IAAI;AAQrB,SAAS,0CAAW,KAAyB,EAAE,KAAmB,EAAE,GAAkC;IAC3G,IAAI,mBACF,kBAAkB,iBAClB,SAAS,WACT,OAAO,EACP,GAAG,YACJ,GAAG;IAEJ,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,kBAAkB,EACnD,QAAQ,IAAI,CAAC;IAGf,IAAI,WAAW,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IACrD,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,wBAAgB,EAAE;QAClC,GAAG,UAAU;aACb;QACA,kBAAkB,MAAM,gBAAgB;QACxC,YAAY,MAAM,UAAU;QAC5B,cAAc,MAAM,YAAY;yBAChC;QACA,cAAc;IAChB;IAEA,0CAAS,GAAG,CAAC,OAAO;QAClB,SAAS,MAAM,OAAO;QACtB,UAAU,MAAM,QAAQ;IAC1B;IAEA,OAAO;QACL,WAAW,CAAA,GAAA,iBAAS,EAAE,UAAU;uBAAC;qBAAW;QAAO,GAAG;YACpD,MAAM;YACN,GAAG,SAAS;YACZ,WAAW,CAAC;gBACV,gGAAgG;gBAChG,IAAI,EAAE,GAAG,KAAK,UACZ,UAAU,SAAS,CAAC;YAExB;QACF;IACF;AACF","sources":["packages/@react-aria/menu/src/useMenu.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 {AriaMenuProps} from '@react-types/menu';\nimport {DOMAttributes, Key, KeyboardDelegate, KeyboardEvents} from '@react-types/shared';\nimport {filterDOMProps, mergeProps} from '@react-aria/utils';\nimport {RefObject} from 'react';\nimport {TreeState} from '@react-stately/tree';\nimport {useSelectableList} from '@react-aria/selection';\n\nexport interface MenuAria {\n /** Props for the menu element. */\n menuProps: DOMAttributes\n}\n\nexport interface AriaMenuOptions<T> extends Omit<AriaMenuProps<T>, 'children'>, KeyboardEvents {\n /** Whether the menu uses virtual scrolling. */\n isVirtualized?: boolean,\n\n /**\n * An optional keyboard delegate implementation for type to select,\n * to override the default.\n */\n keyboardDelegate?: KeyboardDelegate\n}\n\ninterface MenuData {\n onClose?: () => void,\n onAction?: (key: Key) => void\n}\n\nexport const menuData = new WeakMap<TreeState<unknown>, MenuData>();\n\n/**\n * Provides the behavior and accessibility implementation for a menu component.\n * A menu displays a list of actions or options that a user can choose.\n * @param props - Props for the menu.\n * @param state - State for the menu, as returned by `useListState`.\n */\nexport function useMenu<T>(props: AriaMenuOptions<T>, state: TreeState<T>, ref: RefObject<HTMLElement | null>): MenuAria {\n let {\n shouldFocusWrap = true,\n onKeyDown,\n onKeyUp,\n ...otherProps\n } = props;\n\n if (!props['aria-label'] && !props['aria-labelledby']) {\n console.warn('An aria-label or aria-labelledby prop is required for accessibility.');\n }\n\n let domProps = filterDOMProps(props, {labelable: true});\n let {listProps} = useSelectableList({\n ...otherProps,\n ref,\n selectionManager: state.selectionManager,\n collection: state.collection,\n disabledKeys: state.disabledKeys,\n shouldFocusWrap,\n linkBehavior: 'override'\n });\n\n menuData.set(state, {\n onClose: props.onClose,\n onAction: props.onAction\n });\n\n return {\n menuProps: mergeProps(domProps, {onKeyDown, onKeyUp}, {\n role: 'menu',\n ...listProps,\n onKeyDown: (e) => {\n // don't clear the menu selected keys if the user is presses escape since escape closes the menu\n if (e.key !== 'Escape') {\n listProps.onKeyDown(e);\n }\n }\n })\n };\n}\n"],"names":[],"version":3,"file":"useMenu.module.js.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-aria/menu/src/useMenuItem.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 {DOMAttributes, DOMProps, FocusableElement, FocusEvents, HoverEvents, Key, KeyboardEvents, PressEvent, PressEvents, RouterOptions} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useLinkProps, useRouter, useSlotId} from '@react-aria/utils';\nimport {getItemCount} from '@react-stately/collections';\nimport {isFocusVisible, useFocus, useHover, useKeyboard, usePress} from '@react-aria/interactions';\nimport {menuData} from './useMenu';\nimport {RefObject} from 'react';\nimport {TreeState} from '@react-stately/tree';\nimport {useSelectableItem} from '@react-aria/selection';\n\nexport interface MenuItemAria {\n /** Props for the menu item element. */\n menuItemProps: DOMAttributes,\n\n /** Props for the main text element inside the menu item. */\n labelProps: DOMAttributes,\n\n /** Props for the description text element inside the menu item, if any. */\n descriptionProps: DOMAttributes,\n\n /** Props for the keyboard shortcut text element inside the item, if any. */\n keyboardShortcutProps: DOMAttributes,\n\n /** Whether the item is currently focused. */\n isFocused: boolean,\n /** Whether the item is currently selected. */\n isSelected: boolean,\n /** Whether the item is currently in a pressed state. */\n isPressed: boolean,\n /** Whether the item is disabled. */\n isDisabled: boolean\n}\n\nexport interface AriaMenuItemProps extends DOMProps, PressEvents, HoverEvents, KeyboardEvents, FocusEvents {\n /**\n * Whether the menu item is disabled.\n * @deprecated - pass disabledKeys to useTreeState instead.\n */\n isDisabled?: boolean,\n\n /**\n * Whether the menu item is selected.\n * @deprecated - pass selectedKeys to useTreeState instead.\n */\n isSelected?: boolean,\n\n /** A screen reader only label for the menu item. */\n 'aria-label'?: string,\n\n /** The unique key for the menu item. */\n key?: Key,\n\n /**\n * Handler that is called when the menu should close after selecting an item.\n * @deprecated - pass to the menu instead.\n */\n onClose?: () => void,\n\n /**\n * Whether the menu should close when the menu item is selected.\n * @default true\n */\n closeOnSelect?: boolean,\n\n /** Whether the menu item is contained in a virtual scrolling menu. */\n isVirtualized?: boolean,\n\n /**\n * Handler that is called when the user activates the item.\n * @deprecated - pass to the menu instead.\n */\n onAction?: (key: Key) => void,\n\n /** What kind of popup the item opens. */\n 'aria-haspopup'?: 'menu' | 'dialog',\n\n /** Indicates whether the menu item's popup element is expanded or collapsed. */\n 'aria-expanded'?: boolean | 'true' | 'false',\n\n /** Identifies the menu item's popup element whose contents or presence is controlled by the menu item. */\n 'aria-controls'?: string\n}\n\n/**\n * Provides the behavior and accessibility implementation for an item in a menu.\n * See `useMenu` for more details about menus.\n * @param props - Props for the item.\n * @param state - State for the menu, as returned by `useTreeState`.\n */\nexport function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, ref: RefObject<FocusableElement>): MenuItemAria {\n let {\n id,\n key,\n closeOnSelect,\n isVirtualized,\n 'aria-haspopup': hasPopup,\n onPressStart: pressStartProp,\n onPressUp: pressUpProp,\n onPress,\n onPressChange,\n onPressEnd,\n onHoverStart: hoverStartProp,\n onHoverChange,\n onHoverEnd,\n onKeyDown,\n onKeyUp,\n onFocus,\n onFocusChange,\n onBlur\n } = props;\n\n let isTrigger = !!hasPopup;\n let isDisabled = props.isDisabled ?? state.selectionManager.isDisabled(key);\n let isSelected = props.isSelected ?? state.selectionManager.isSelected(key);\n let data = menuData.get(state);\n let item = state.collection.getItem(key);\n let onClose = props.onClose || data.onClose;\n let router = useRouter();\n let performAction = (e: PressEvent) => {\n if (isTrigger) {\n return;\n }\n\n if (item?.props?.onAction) {\n item.props.onAction();\n }\n\n if (props.onAction) {\n props.onAction(key);\n } else if (data.onAction) {\n data.onAction(key);\n }\n\n if (e.target instanceof HTMLAnchorElement) {\n router.open(e.target, e, item.props.href, item.props.routerOptions as RouterOptions);\n }\n };\n\n let role = 'menuitem';\n if (!isTrigger) {\n if (state.selectionManager.selectionMode === 'single') {\n role = 'menuitemradio';\n } else if (state.selectionManager.selectionMode === 'multiple') {\n role = 'menuitemcheckbox';\n }\n }\n\n let labelId = useSlotId();\n let descriptionId = useSlotId();\n let keyboardId = useSlotId();\n\n let ariaProps = {\n id,\n 'aria-disabled': isDisabled || undefined,\n role,\n 'aria-label': props['aria-label'],\n 'aria-labelledby': labelId,\n 'aria-describedby': [descriptionId, keyboardId].filter(Boolean).join(' ') || undefined,\n 'aria-controls': props['aria-controls'],\n 'aria-haspopup': hasPopup,\n 'aria-expanded': props['aria-expanded']\n };\n\n if (state.selectionManager.selectionMode !== 'none' && !isTrigger) {\n ariaProps['aria-checked'] = isSelected;\n }\n\n if (isVirtualized) {\n ariaProps['aria-posinset'] = item?.index;\n ariaProps['aria-setsize'] = getItemCount(state.collection);\n }\n\n let onPressStart = (e: PressEvent) => {\n if (e.pointerType === 'keyboard') {\n performAction(e);\n }\n\n pressStartProp?.(e);\n };\n\n let onPressUp = (e: PressEvent) => {\n if (e.pointerType !== 'keyboard') {\n performAction(e);\n\n // Pressing a menu item should close by default in single selection mode but not multiple\n // selection mode, except if overridden by the closeOnSelect prop.\n if (!isTrigger && onClose && (closeOnSelect ?? (state.selectionManager.selectionMode !== 'multiple' || state.selectionManager.isLink(key)))) {\n onClose();\n }\n }\n\n pressUpProp?.(e);\n };\n\n let {itemProps, isFocused} = useSelectableItem({\n selectionManager: state.selectionManager,\n key,\n ref,\n shouldSelectOnPressUp: true,\n allowsDifferentPressOrigin: true,\n // Disable all handling of links in useSelectable item\n // because we handle it ourselves. The behavior of menus\n // is slightly different from other collections because\n // actions are performed on key down rather than key up.\n linkBehavior: 'none'\n });\n\n let {pressProps, isPressed} = usePress({\n onPressStart,\n onPress,\n onPressUp,\n onPressChange,\n onPressEnd,\n isDisabled\n });\n let {hoverProps} = useHover({\n isDisabled,\n onHoverStart(e) {\n if (!isFocusVisible()) {\n state.selectionManager.setFocused(true);\n state.selectionManager.setFocusedKey(key);\n }\n hoverStartProp?.(e);\n },\n onHoverChange,\n onHoverEnd\n });\n\n let {keyboardProps} = useKeyboard({\n onKeyDown: (e) => {\n // Ignore repeating events, which may have started on the menu trigger before moving\n // focus to the menu item. We want to wait for a second complete key press sequence.\n if (e.repeat) {\n e.continuePropagation();\n return;\n }\n\n switch (e.key) {\n case ' ':\n if (!isDisabled && state.selectionManager.selectionMode === 'none' && !isTrigger && closeOnSelect !== false && onClose) {\n onClose();\n }\n break;\n case 'Enter':\n // The Enter key should always close on select, except if overridden.\n if (!isDisabled && closeOnSelect !== false && !isTrigger && onClose) {\n onClose();\n }\n break;\n default:\n if (!isTrigger) {\n e.continuePropagation();\n }\n\n onKeyDown?.(e);\n break;\n }\n },\n onKeyUp\n });\n\n let {focusProps} = useFocus({onBlur, onFocus, onFocusChange});\n let domProps = filterDOMProps(item.props);\n delete domProps.id;\n let linkProps = useLinkProps(item.props);\n\n return {\n menuItemProps: {\n ...ariaProps,\n ...mergeProps(domProps, linkProps, isTrigger ? {onFocus: itemProps.onFocus, 'data-key': itemProps['data-key']} : itemProps, pressProps, hoverProps, keyboardProps, focusProps),\n tabIndex: itemProps.tabIndex != null ? -1 : undefined\n },\n labelProps: {\n id: labelId\n },\n descriptionProps: {\n id: descriptionId\n },\n keyboardShortcutProps: {\n id: keyboardId\n },\n isFocused,\n isSelected,\n isPressed,\n isDisabled\n };\n}\n"],"names":[],"version":3,"file":"useMenuItem.main.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/menu/src/useMenuItem.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 {DOMAttributes, DOMProps, FocusableElement, FocusEvents, HoverEvents, Key, KeyboardEvents, PressEvent, PressEvents, RouterOptions} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useLinkProps, useRouter, useSlotId} from '@react-aria/utils';\nimport {getItemCount} from '@react-stately/collections';\nimport {isFocusVisible, useFocus, useHover, useKeyboard, usePress} from '@react-aria/interactions';\nimport {menuData} from './useMenu';\nimport {RefObject} from 'react';\nimport {TreeState} from '@react-stately/tree';\nimport {useSelectableItem} from '@react-aria/selection';\n\nexport interface MenuItemAria {\n /** Props for the menu item element. */\n menuItemProps: DOMAttributes,\n\n /** Props for the main text element inside the menu item. */\n labelProps: DOMAttributes,\n\n /** Props for the description text element inside the menu item, if any. */\n descriptionProps: DOMAttributes,\n\n /** Props for the keyboard shortcut text element inside the item, if any. */\n keyboardShortcutProps: DOMAttributes,\n\n /** Whether the item is currently focused. */\n isFocused: boolean,\n /** Whether the item is currently selected. */\n isSelected: boolean,\n /** Whether the item is currently in a pressed state. */\n isPressed: boolean,\n /** Whether the item is disabled. */\n isDisabled: boolean\n}\n\nexport interface AriaMenuItemProps extends DOMProps, PressEvents, HoverEvents, KeyboardEvents, FocusEvents {\n /**\n * Whether the menu item is disabled.\n * @deprecated - pass disabledKeys to useTreeState instead.\n */\n isDisabled?: boolean,\n\n /**\n * Whether the menu item is selected.\n * @deprecated - pass selectedKeys to useTreeState instead.\n */\n isSelected?: boolean,\n\n /** A screen reader only label for the menu item. */\n 'aria-label'?: string,\n\n /** The unique key for the menu item. */\n key?: Key,\n\n /**\n * Handler that is called when the menu should close after selecting an item.\n * @deprecated - pass to the menu instead.\n */\n onClose?: () => void,\n\n /**\n * Whether the menu should close when the menu item is selected.\n * @default true\n */\n closeOnSelect?: boolean,\n\n /** Whether the menu item is contained in a virtual scrolling menu. */\n isVirtualized?: boolean,\n\n /**\n * Handler that is called when the user activates the item.\n * @deprecated - pass to the menu instead.\n */\n onAction?: (key: Key) => void,\n\n /** What kind of popup the item opens. */\n 'aria-haspopup'?: 'menu' | 'dialog',\n\n /** Indicates whether the menu item's popup element is expanded or collapsed. */\n 'aria-expanded'?: boolean | 'true' | 'false',\n\n /** Identifies the menu item's popup element whose contents or presence is controlled by the menu item. */\n 'aria-controls'?: string\n}\n\n/**\n * Provides the behavior and accessibility implementation for an item in a menu.\n * See `useMenu` for more details about menus.\n * @param props - Props for the item.\n * @param state - State for the menu, as returned by `useTreeState`.\n */\nexport function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, ref: RefObject<FocusableElement | null>): MenuItemAria {\n let {\n id,\n key,\n closeOnSelect,\n isVirtualized,\n 'aria-haspopup': hasPopup,\n onPressStart: pressStartProp,\n onPressUp: pressUpProp,\n onPress,\n onPressChange,\n onPressEnd,\n onHoverStart: hoverStartProp,\n onHoverChange,\n onHoverEnd,\n onKeyDown,\n onKeyUp,\n onFocus,\n onFocusChange,\n onBlur\n } = props;\n\n let isTrigger = !!hasPopup;\n let isDisabled = props.isDisabled ?? state.selectionManager.isDisabled(key);\n let isSelected = props.isSelected ?? state.selectionManager.isSelected(key);\n let data = menuData.get(state);\n let item = state.collection.getItem(key);\n let onClose = props.onClose || data.onClose;\n let router = useRouter();\n let performAction = (e: PressEvent) => {\n if (isTrigger) {\n return;\n }\n\n if (item?.props?.onAction) {\n item.props.onAction();\n }\n\n if (props.onAction) {\n props.onAction(key);\n } else if (data.onAction) {\n data.onAction(key);\n }\n\n if (e.target instanceof HTMLAnchorElement) {\n router.open(e.target, e, item.props.href, item.props.routerOptions as RouterOptions);\n }\n };\n\n let role = 'menuitem';\n if (!isTrigger) {\n if (state.selectionManager.selectionMode === 'single') {\n role = 'menuitemradio';\n } else if (state.selectionManager.selectionMode === 'multiple') {\n role = 'menuitemcheckbox';\n }\n }\n\n let labelId = useSlotId();\n let descriptionId = useSlotId();\n let keyboardId = useSlotId();\n\n let ariaProps = {\n id,\n 'aria-disabled': isDisabled || undefined,\n role,\n 'aria-label': props['aria-label'],\n 'aria-labelledby': labelId,\n 'aria-describedby': [descriptionId, keyboardId].filter(Boolean).join(' ') || undefined,\n 'aria-controls': props['aria-controls'],\n 'aria-haspopup': hasPopup,\n 'aria-expanded': props['aria-expanded']\n };\n\n if (state.selectionManager.selectionMode !== 'none' && !isTrigger) {\n ariaProps['aria-checked'] = isSelected;\n }\n\n if (isVirtualized) {\n ariaProps['aria-posinset'] = item?.index;\n ariaProps['aria-setsize'] = getItemCount(state.collection);\n }\n\n let onPressStart = (e: PressEvent) => {\n if (e.pointerType === 'keyboard') {\n performAction(e);\n }\n\n pressStartProp?.(e);\n };\n\n let onPressUp = (e: PressEvent) => {\n if (e.pointerType !== 'keyboard') {\n performAction(e);\n\n // Pressing a menu item should close by default in single selection mode but not multiple\n // selection mode, except if overridden by the closeOnSelect prop.\n if (!isTrigger && onClose && (closeOnSelect ?? (state.selectionManager.selectionMode !== 'multiple' || state.selectionManager.isLink(key)))) {\n onClose();\n }\n }\n\n pressUpProp?.(e);\n };\n\n let {itemProps, isFocused} = useSelectableItem({\n selectionManager: state.selectionManager,\n key,\n ref,\n shouldSelectOnPressUp: true,\n allowsDifferentPressOrigin: true,\n // Disable all handling of links in useSelectable item\n // because we handle it ourselves. The behavior of menus\n // is slightly different from other collections because\n // actions are performed on key down rather than key up.\n linkBehavior: 'none'\n });\n\n let {pressProps, isPressed} = usePress({\n onPressStart,\n onPress,\n onPressUp,\n onPressChange,\n onPressEnd,\n isDisabled\n });\n let {hoverProps} = useHover({\n isDisabled,\n onHoverStart(e) {\n if (!isFocusVisible()) {\n state.selectionManager.setFocused(true);\n state.selectionManager.setFocusedKey(key);\n }\n hoverStartProp?.(e);\n },\n onHoverChange,\n onHoverEnd\n });\n\n let {keyboardProps} = useKeyboard({\n onKeyDown: (e) => {\n // Ignore repeating events, which may have started on the menu trigger before moving\n // focus to the menu item. We want to wait for a second complete key press sequence.\n if (e.repeat) {\n e.continuePropagation();\n return;\n }\n\n switch (e.key) {\n case ' ':\n if (!isDisabled && state.selectionManager.selectionMode === 'none' && !isTrigger && closeOnSelect !== false && onClose) {\n onClose();\n }\n break;\n case 'Enter':\n // The Enter key should always close on select, except if overridden.\n if (!isDisabled && closeOnSelect !== false && !isTrigger && onClose) {\n onClose();\n }\n break;\n default:\n if (!isTrigger) {\n e.continuePropagation();\n }\n\n onKeyDown?.(e);\n break;\n }\n },\n onKeyUp\n });\n\n let {focusProps} = useFocus({onBlur, onFocus, onFocusChange});\n let domProps = filterDOMProps(item.props);\n delete domProps.id;\n let linkProps = useLinkProps(item.props);\n\n return {\n menuItemProps: {\n ...ariaProps,\n ...mergeProps(domProps, linkProps, isTrigger ? {onFocus: itemProps.onFocus, 'data-key': itemProps['data-key']} : itemProps, pressProps, hoverProps, keyboardProps, focusProps),\n tabIndex: itemProps.tabIndex != null ? -1 : undefined\n },\n labelProps: {\n id: labelId\n },\n descriptionProps: {\n id: descriptionId\n },\n keyboardShortcutProps: {\n id: keyboardId\n },\n isFocused,\n isSelected,\n isPressed,\n isDisabled\n };\n}\n"],"names":[],"version":3,"file":"useMenuItem.main.js.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-aria/menu/src/useMenuItem.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 {DOMAttributes, DOMProps, FocusableElement, FocusEvents, HoverEvents, Key, KeyboardEvents, PressEvent, PressEvents, RouterOptions} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useLinkProps, useRouter, useSlotId} from '@react-aria/utils';\nimport {getItemCount} from '@react-stately/collections';\nimport {isFocusVisible, useFocus, useHover, useKeyboard, usePress} from '@react-aria/interactions';\nimport {menuData} from './useMenu';\nimport {RefObject} from 'react';\nimport {TreeState} from '@react-stately/tree';\nimport {useSelectableItem} from '@react-aria/selection';\n\nexport interface MenuItemAria {\n /** Props for the menu item element. */\n menuItemProps: DOMAttributes,\n\n /** Props for the main text element inside the menu item. */\n labelProps: DOMAttributes,\n\n /** Props for the description text element inside the menu item, if any. */\n descriptionProps: DOMAttributes,\n\n /** Props for the keyboard shortcut text element inside the item, if any. */\n keyboardShortcutProps: DOMAttributes,\n\n /** Whether the item is currently focused. */\n isFocused: boolean,\n /** Whether the item is currently selected. */\n isSelected: boolean,\n /** Whether the item is currently in a pressed state. */\n isPressed: boolean,\n /** Whether the item is disabled. */\n isDisabled: boolean\n}\n\nexport interface AriaMenuItemProps extends DOMProps, PressEvents, HoverEvents, KeyboardEvents, FocusEvents {\n /**\n * Whether the menu item is disabled.\n * @deprecated - pass disabledKeys to useTreeState instead.\n */\n isDisabled?: boolean,\n\n /**\n * Whether the menu item is selected.\n * @deprecated - pass selectedKeys to useTreeState instead.\n */\n isSelected?: boolean,\n\n /** A screen reader only label for the menu item. */\n 'aria-label'?: string,\n\n /** The unique key for the menu item. */\n key?: Key,\n\n /**\n * Handler that is called when the menu should close after selecting an item.\n * @deprecated - pass to the menu instead.\n */\n onClose?: () => void,\n\n /**\n * Whether the menu should close when the menu item is selected.\n * @default true\n */\n closeOnSelect?: boolean,\n\n /** Whether the menu item is contained in a virtual scrolling menu. */\n isVirtualized?: boolean,\n\n /**\n * Handler that is called when the user activates the item.\n * @deprecated - pass to the menu instead.\n */\n onAction?: (key: Key) => void,\n\n /** What kind of popup the item opens. */\n 'aria-haspopup'?: 'menu' | 'dialog',\n\n /** Indicates whether the menu item's popup element is expanded or collapsed. */\n 'aria-expanded'?: boolean | 'true' | 'false',\n\n /** Identifies the menu item's popup element whose contents or presence is controlled by the menu item. */\n 'aria-controls'?: string\n}\n\n/**\n * Provides the behavior and accessibility implementation for an item in a menu.\n * See `useMenu` for more details about menus.\n * @param props - Props for the item.\n * @param state - State for the menu, as returned by `useTreeState`.\n */\nexport function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, ref: RefObject<FocusableElement>): MenuItemAria {\n let {\n id,\n key,\n closeOnSelect,\n isVirtualized,\n 'aria-haspopup': hasPopup,\n onPressStart: pressStartProp,\n onPressUp: pressUpProp,\n onPress,\n onPressChange,\n onPressEnd,\n onHoverStart: hoverStartProp,\n onHoverChange,\n onHoverEnd,\n onKeyDown,\n onKeyUp,\n onFocus,\n onFocusChange,\n onBlur\n } = props;\n\n let isTrigger = !!hasPopup;\n let isDisabled = props.isDisabled ?? state.selectionManager.isDisabled(key);\n let isSelected = props.isSelected ?? state.selectionManager.isSelected(key);\n let data = menuData.get(state);\n let item = state.collection.getItem(key);\n let onClose = props.onClose || data.onClose;\n let router = useRouter();\n let performAction = (e: PressEvent) => {\n if (isTrigger) {\n return;\n }\n\n if (item?.props?.onAction) {\n item.props.onAction();\n }\n\n if (props.onAction) {\n props.onAction(key);\n } else if (data.onAction) {\n data.onAction(key);\n }\n\n if (e.target instanceof HTMLAnchorElement) {\n router.open(e.target, e, item.props.href, item.props.routerOptions as RouterOptions);\n }\n };\n\n let role = 'menuitem';\n if (!isTrigger) {\n if (state.selectionManager.selectionMode === 'single') {\n role = 'menuitemradio';\n } else if (state.selectionManager.selectionMode === 'multiple') {\n role = 'menuitemcheckbox';\n }\n }\n\n let labelId = useSlotId();\n let descriptionId = useSlotId();\n let keyboardId = useSlotId();\n\n let ariaProps = {\n id,\n 'aria-disabled': isDisabled || undefined,\n role,\n 'aria-label': props['aria-label'],\n 'aria-labelledby': labelId,\n 'aria-describedby': [descriptionId, keyboardId].filter(Boolean).join(' ') || undefined,\n 'aria-controls': props['aria-controls'],\n 'aria-haspopup': hasPopup,\n 'aria-expanded': props['aria-expanded']\n };\n\n if (state.selectionManager.selectionMode !== 'none' && !isTrigger) {\n ariaProps['aria-checked'] = isSelected;\n }\n\n if (isVirtualized) {\n ariaProps['aria-posinset'] = item?.index;\n ariaProps['aria-setsize'] = getItemCount(state.collection);\n }\n\n let onPressStart = (e: PressEvent) => {\n if (e.pointerType === 'keyboard') {\n performAction(e);\n }\n\n pressStartProp?.(e);\n };\n\n let onPressUp = (e: PressEvent) => {\n if (e.pointerType !== 'keyboard') {\n performAction(e);\n\n // Pressing a menu item should close by default in single selection mode but not multiple\n // selection mode, except if overridden by the closeOnSelect prop.\n if (!isTrigger && onClose && (closeOnSelect ?? (state.selectionManager.selectionMode !== 'multiple' || state.selectionManager.isLink(key)))) {\n onClose();\n }\n }\n\n pressUpProp?.(e);\n };\n\n let {itemProps, isFocused} = useSelectableItem({\n selectionManager: state.selectionManager,\n key,\n ref,\n shouldSelectOnPressUp: true,\n allowsDifferentPressOrigin: true,\n // Disable all handling of links in useSelectable item\n // because we handle it ourselves. The behavior of menus\n // is slightly different from other collections because\n // actions are performed on key down rather than key up.\n linkBehavior: 'none'\n });\n\n let {pressProps, isPressed} = usePress({\n onPressStart,\n onPress,\n onPressUp,\n onPressChange,\n onPressEnd,\n isDisabled\n });\n let {hoverProps} = useHover({\n isDisabled,\n onHoverStart(e) {\n if (!isFocusVisible()) {\n state.selectionManager.setFocused(true);\n state.selectionManager.setFocusedKey(key);\n }\n hoverStartProp?.(e);\n },\n onHoverChange,\n onHoverEnd\n });\n\n let {keyboardProps} = useKeyboard({\n onKeyDown: (e) => {\n // Ignore repeating events, which may have started on the menu trigger before moving\n // focus to the menu item. We want to wait for a second complete key press sequence.\n if (e.repeat) {\n e.continuePropagation();\n return;\n }\n\n switch (e.key) {\n case ' ':\n if (!isDisabled && state.selectionManager.selectionMode === 'none' && !isTrigger && closeOnSelect !== false && onClose) {\n onClose();\n }\n break;\n case 'Enter':\n // The Enter key should always close on select, except if overridden.\n if (!isDisabled && closeOnSelect !== false && !isTrigger && onClose) {\n onClose();\n }\n break;\n default:\n if (!isTrigger) {\n e.continuePropagation();\n }\n\n onKeyDown?.(e);\n break;\n }\n },\n onKeyUp\n });\n\n let {focusProps} = useFocus({onBlur, onFocus, onFocusChange});\n let domProps = filterDOMProps(item.props);\n delete domProps.id;\n let linkProps = useLinkProps(item.props);\n\n return {\n menuItemProps: {\n ...ariaProps,\n ...mergeProps(domProps, linkProps, isTrigger ? {onFocus: itemProps.onFocus, 'data-key': itemProps['data-key']} : itemProps, pressProps, hoverProps, keyboardProps, focusProps),\n tabIndex: itemProps.tabIndex != null ? -1 : undefined\n },\n labelProps: {\n id: labelId\n },\n descriptionProps: {\n id: descriptionId\n },\n keyboardShortcutProps: {\n id: keyboardId\n },\n isFocused,\n isSelected,\n isPressed,\n isDisabled\n };\n}\n"],"names":[],"version":3,"file":"useMenuItem.module.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/menu/src/useMenuItem.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 {DOMAttributes, DOMProps, FocusableElement, FocusEvents, HoverEvents, Key, KeyboardEvents, PressEvent, PressEvents, RouterOptions} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useLinkProps, useRouter, useSlotId} from '@react-aria/utils';\nimport {getItemCount} from '@react-stately/collections';\nimport {isFocusVisible, useFocus, useHover, useKeyboard, usePress} from '@react-aria/interactions';\nimport {menuData} from './useMenu';\nimport {RefObject} from 'react';\nimport {TreeState} from '@react-stately/tree';\nimport {useSelectableItem} from '@react-aria/selection';\n\nexport interface MenuItemAria {\n /** Props for the menu item element. */\n menuItemProps: DOMAttributes,\n\n /** Props for the main text element inside the menu item. */\n labelProps: DOMAttributes,\n\n /** Props for the description text element inside the menu item, if any. */\n descriptionProps: DOMAttributes,\n\n /** Props for the keyboard shortcut text element inside the item, if any. */\n keyboardShortcutProps: DOMAttributes,\n\n /** Whether the item is currently focused. */\n isFocused: boolean,\n /** Whether the item is currently selected. */\n isSelected: boolean,\n /** Whether the item is currently in a pressed state. */\n isPressed: boolean,\n /** Whether the item is disabled. */\n isDisabled: boolean\n}\n\nexport interface AriaMenuItemProps extends DOMProps, PressEvents, HoverEvents, KeyboardEvents, FocusEvents {\n /**\n * Whether the menu item is disabled.\n * @deprecated - pass disabledKeys to useTreeState instead.\n */\n isDisabled?: boolean,\n\n /**\n * Whether the menu item is selected.\n * @deprecated - pass selectedKeys to useTreeState instead.\n */\n isSelected?: boolean,\n\n /** A screen reader only label for the menu item. */\n 'aria-label'?: string,\n\n /** The unique key for the menu item. */\n key?: Key,\n\n /**\n * Handler that is called when the menu should close after selecting an item.\n * @deprecated - pass to the menu instead.\n */\n onClose?: () => void,\n\n /**\n * Whether the menu should close when the menu item is selected.\n * @default true\n */\n closeOnSelect?: boolean,\n\n /** Whether the menu item is contained in a virtual scrolling menu. */\n isVirtualized?: boolean,\n\n /**\n * Handler that is called when the user activates the item.\n * @deprecated - pass to the menu instead.\n */\n onAction?: (key: Key) => void,\n\n /** What kind of popup the item opens. */\n 'aria-haspopup'?: 'menu' | 'dialog',\n\n /** Indicates whether the menu item's popup element is expanded or collapsed. */\n 'aria-expanded'?: boolean | 'true' | 'false',\n\n /** Identifies the menu item's popup element whose contents or presence is controlled by the menu item. */\n 'aria-controls'?: string\n}\n\n/**\n * Provides the behavior and accessibility implementation for an item in a menu.\n * See `useMenu` for more details about menus.\n * @param props - Props for the item.\n * @param state - State for the menu, as returned by `useTreeState`.\n */\nexport function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, ref: RefObject<FocusableElement | null>): MenuItemAria {\n let {\n id,\n key,\n closeOnSelect,\n isVirtualized,\n 'aria-haspopup': hasPopup,\n onPressStart: pressStartProp,\n onPressUp: pressUpProp,\n onPress,\n onPressChange,\n onPressEnd,\n onHoverStart: hoverStartProp,\n onHoverChange,\n onHoverEnd,\n onKeyDown,\n onKeyUp,\n onFocus,\n onFocusChange,\n onBlur\n } = props;\n\n let isTrigger = !!hasPopup;\n let isDisabled = props.isDisabled ?? state.selectionManager.isDisabled(key);\n let isSelected = props.isSelected ?? state.selectionManager.isSelected(key);\n let data = menuData.get(state);\n let item = state.collection.getItem(key);\n let onClose = props.onClose || data.onClose;\n let router = useRouter();\n let performAction = (e: PressEvent) => {\n if (isTrigger) {\n return;\n }\n\n if (item?.props?.onAction) {\n item.props.onAction();\n }\n\n if (props.onAction) {\n props.onAction(key);\n } else if (data.onAction) {\n data.onAction(key);\n }\n\n if (e.target instanceof HTMLAnchorElement) {\n router.open(e.target, e, item.props.href, item.props.routerOptions as RouterOptions);\n }\n };\n\n let role = 'menuitem';\n if (!isTrigger) {\n if (state.selectionManager.selectionMode === 'single') {\n role = 'menuitemradio';\n } else if (state.selectionManager.selectionMode === 'multiple') {\n role = 'menuitemcheckbox';\n }\n }\n\n let labelId = useSlotId();\n let descriptionId = useSlotId();\n let keyboardId = useSlotId();\n\n let ariaProps = {\n id,\n 'aria-disabled': isDisabled || undefined,\n role,\n 'aria-label': props['aria-label'],\n 'aria-labelledby': labelId,\n 'aria-describedby': [descriptionId, keyboardId].filter(Boolean).join(' ') || undefined,\n 'aria-controls': props['aria-controls'],\n 'aria-haspopup': hasPopup,\n 'aria-expanded': props['aria-expanded']\n };\n\n if (state.selectionManager.selectionMode !== 'none' && !isTrigger) {\n ariaProps['aria-checked'] = isSelected;\n }\n\n if (isVirtualized) {\n ariaProps['aria-posinset'] = item?.index;\n ariaProps['aria-setsize'] = getItemCount(state.collection);\n }\n\n let onPressStart = (e: PressEvent) => {\n if (e.pointerType === 'keyboard') {\n performAction(e);\n }\n\n pressStartProp?.(e);\n };\n\n let onPressUp = (e: PressEvent) => {\n if (e.pointerType !== 'keyboard') {\n performAction(e);\n\n // Pressing a menu item should close by default in single selection mode but not multiple\n // selection mode, except if overridden by the closeOnSelect prop.\n if (!isTrigger && onClose && (closeOnSelect ?? (state.selectionManager.selectionMode !== 'multiple' || state.selectionManager.isLink(key)))) {\n onClose();\n }\n }\n\n pressUpProp?.(e);\n };\n\n let {itemProps, isFocused} = useSelectableItem({\n selectionManager: state.selectionManager,\n key,\n ref,\n shouldSelectOnPressUp: true,\n allowsDifferentPressOrigin: true,\n // Disable all handling of links in useSelectable item\n // because we handle it ourselves. The behavior of menus\n // is slightly different from other collections because\n // actions are performed on key down rather than key up.\n linkBehavior: 'none'\n });\n\n let {pressProps, isPressed} = usePress({\n onPressStart,\n onPress,\n onPressUp,\n onPressChange,\n onPressEnd,\n isDisabled\n });\n let {hoverProps} = useHover({\n isDisabled,\n onHoverStart(e) {\n if (!isFocusVisible()) {\n state.selectionManager.setFocused(true);\n state.selectionManager.setFocusedKey(key);\n }\n hoverStartProp?.(e);\n },\n onHoverChange,\n onHoverEnd\n });\n\n let {keyboardProps} = useKeyboard({\n onKeyDown: (e) => {\n // Ignore repeating events, which may have started on the menu trigger before moving\n // focus to the menu item. We want to wait for a second complete key press sequence.\n if (e.repeat) {\n e.continuePropagation();\n return;\n }\n\n switch (e.key) {\n case ' ':\n if (!isDisabled && state.selectionManager.selectionMode === 'none' && !isTrigger && closeOnSelect !== false && onClose) {\n onClose();\n }\n break;\n case 'Enter':\n // The Enter key should always close on select, except if overridden.\n if (!isDisabled && closeOnSelect !== false && !isTrigger && onClose) {\n onClose();\n }\n break;\n default:\n if (!isTrigger) {\n e.continuePropagation();\n }\n\n onKeyDown?.(e);\n break;\n }\n },\n onKeyUp\n });\n\n let {focusProps} = useFocus({onBlur, onFocus, onFocusChange});\n let domProps = filterDOMProps(item.props);\n delete domProps.id;\n let linkProps = useLinkProps(item.props);\n\n return {\n menuItemProps: {\n ...ariaProps,\n ...mergeProps(domProps, linkProps, isTrigger ? {onFocus: itemProps.onFocus, 'data-key': itemProps['data-key']} : itemProps, pressProps, hoverProps, keyboardProps, focusProps),\n tabIndex: itemProps.tabIndex != null ? -1 : undefined\n },\n labelProps: {\n id: labelId\n },\n descriptionProps: {\n id: descriptionId\n },\n keyboardShortcutProps: {\n id: keyboardId\n },\n isFocused,\n isSelected,\n isPressed,\n isDisabled\n };\n}\n"],"names":[],"version":3,"file":"useMenuItem.module.js.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAqCM,SAAS,0CAAkB,KAA2B,EAAE,KAAuB,EAAE,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAqCM,SAAS,0CAAkB,KAA2B,EAAE,KAAuB,EAAE,GAA8B;IACpH,IAAI,QACF,OAAO,oBACP,UAAU,WACV,UAAU,SACX,GAAG;IAEJ,IAAI,gBAAgB,CAAA,GAAA,2BAAI;IACxB,IAAI,gBAAC,YAAY,gBAAE,YAAY,EAAC,GAAG,CAAA,GAAA,0CAAgB,EAAE;cAAC;IAAI,GAAG,OAAO;IAEpE,IAAI,YAAY,CAAC;QACf,IAAI,YACF;QAGF,IAAI,YAAY,eAAe,CAAC,EAAE,MAAM,EACtC;QAGF,IAAI,OAAO,IAAI,OAAO,EACpB,OAAQ,EAAE,GAAG;YACX,KAAK;YACL,KAAK;gBACH,IAAI,YAAY,aACd;YAEF,cAAc;YAChB,KAAK;gBACH,uEAAuE;gBACvE,IAAI,CAAE,CAAA,yBAAyB,CAAA,GAC7B,EAAE,eAAe;gBAEnB,EAAE,cAAc;gBAChB,MAAM,MAAM,CAAC;gBACb;YACF,KAAK;gBACH,IAAI,CAAE,CAAA,yBAAyB,CAAA,GAC7B,EAAE,eAAe;gBAEnB,EAAE,cAAc;gBAChB,MAAM,MAAM,CAAC;gBACb;YACF;gBACE,oBAAoB;gBACpB,IAAI,yBAAyB,GAC3B,EAAE,mBAAmB;QAE3B;IAEJ;IAEA,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,kBAAC,cAAc,EAAC,GAAG,CAAA,GAAA,yCAAW,EAAE;QAClC,YAAY,cAAc,YAAY;QACtC,0BAA0B,gBAAgB,MAAM,CAAC;QACjD;YACE,MAAM,KAAK;QACb;QACA;YACE,MAAM,IAAI,CAAC;QACb;IACF;IAEA,IAAI,aAAc;QAChB,cAAa,CAAC;YACZ,8EAA8E;YAC9E,IAAI,EAAE,WAAW,KAAK,WAAW,EAAE,WAAW,KAAK,cAAc,CAAC,YAChE,6DAA6D;YAC7D,8CAA8C;YAC9C,MAAM,IAAI,CAAC,EAAE,WAAW,KAAK,YAAY,UAAU;QAEvD;QACA,SAAQ,CAAC;YACP,IAAI,EAAE,WAAW,KAAK,WAAW,CAAC,YAChC,MAAM,MAAM;QAEhB;IACF;IAEA,6DAA6D;IAC7D,OAAO,aAAa,OAAO;IAE3B,OAAO;QACL,kBAAkB;YAChB,GAAG,YAAY;YACf,GAAI,YAAY,UAAU,aAAa,cAAc;YACrD,IAAI;uBACJ;QACF;QACA,WAAW;YACT,GAAG,YAAY;YACf,mBAAmB;YACnB,WAAW,MAAM,aAAa,IAAI;YAClC,SAAS,MAAM,KAAK;QACtB;IACF;AACF","sources":["packages/@react-aria/menu/src/useMenuTrigger.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 {AriaButtonProps} from '@react-types/button';\nimport {AriaMenuOptions} from './useMenu';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {MenuTriggerState} from '@react-stately/menu';\nimport {MenuTriggerType} from '@react-types/menu';\nimport {RefObject} from 'react';\nimport {useId} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useLongPress} from '@react-aria/interactions';\nimport {useOverlayTrigger} from '@react-aria/overlays';\n\nexport interface AriaMenuTriggerProps {\n /** The type of menu that the menu trigger opens. */\n type?: 'menu' | 'listbox',\n /** Whether menu trigger is disabled. */\n isDisabled?: boolean,\n /** How menu is triggered. */\n trigger?: MenuTriggerType\n}\n\nexport interface MenuTriggerAria<T> {\n /** Props for the menu trigger element. */\n menuTriggerProps: AriaButtonProps,\n\n /** Props for the menu. */\n menuProps: AriaMenuOptions<T>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a menu trigger.\n * @param props - Props for the menu trigger.\n * @param state - State for the menu trigger.\n * @param ref - Ref to the HTML element trigger for the menu.\n */\nexport function useMenuTrigger<T>(props: AriaMenuTriggerProps, state: MenuTriggerState, ref: RefObject<Element | null>): MenuTriggerAria<T> {\n let {\n type = 'menu' as AriaMenuTriggerProps['type'],\n isDisabled,\n trigger = 'press'\n } = props;\n\n let menuTriggerId = useId();\n let {triggerProps, overlayProps} = useOverlayTrigger({type}, state, ref);\n\n let onKeyDown = (e) => {\n if (isDisabled) {\n return;\n }\n\n if (trigger === 'longPress' && !e.altKey) {\n return;\n }\n\n if (ref && ref.current) {\n switch (e.key) {\n case 'Enter':\n case ' ':\n if (trigger === 'longPress') {\n return;\n }\n // fallthrough\n case 'ArrowDown':\n // Stop propagation, unless it would already be handled by useKeyboard.\n if (!('continuePropagation' in e)) {\n e.stopPropagation();\n }\n e.preventDefault();\n state.toggle('first');\n break;\n case 'ArrowUp':\n if (!('continuePropagation' in e)) {\n e.stopPropagation();\n }\n e.preventDefault();\n state.toggle('last');\n break;\n default:\n // Allow other keys.\n if ('continuePropagation' in e) {\n e.continuePropagation();\n }\n }\n }\n };\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/menu');\n let {longPressProps} = useLongPress({\n isDisabled: isDisabled || trigger !== 'longPress',\n accessibilityDescription: stringFormatter.format('longPressMessage'),\n onLongPressStart() {\n state.close();\n },\n onLongPress() {\n state.open('first');\n }\n });\n\n let pressProps = {\n onPressStart(e) {\n // For consistency with native, open the menu on mouse/key down, but touch up.\n if (e.pointerType !== 'touch' && e.pointerType !== 'keyboard' && !isDisabled) {\n // If opened with a screen reader, auto focus the first item.\n // Otherwise, the menu itself will be focused.\n state.open(e.pointerType === 'virtual' ? 'first' : null);\n }\n },\n onPress(e) {\n if (e.pointerType === 'touch' && !isDisabled) {\n state.toggle();\n }\n }\n };\n\n // omit onPress from triggerProps since we override it above.\n delete triggerProps.onPress;\n\n return {\n menuTriggerProps: {\n ...triggerProps,\n ...(trigger === 'press' ? pressProps : longPressProps),\n id: menuTriggerId,\n onKeyDown\n },\n menuProps: {\n ...overlayProps,\n 'aria-labelledby': menuTriggerId,\n autoFocus: state.focusStrategy || true,\n onClose: state.close\n }\n };\n}\n"],"names":[],"version":3,"file":"useMenuTrigger.main.js.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAqCM,SAAS,0CAAkB,KAA2B,EAAE,KAAuB,EAAE,
|
|
1
|
+
{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAqCM,SAAS,0CAAkB,KAA2B,EAAE,KAAuB,EAAE,GAA8B;IACpH,IAAI,QACF,OAAO,oBACP,UAAU,WACV,UAAU,SACX,GAAG;IAEJ,IAAI,gBAAgB,CAAA,GAAA,YAAI;IACxB,IAAI,gBAAC,YAAY,gBAAE,YAAY,EAAC,GAAG,CAAA,GAAA,wBAAgB,EAAE;cAAC;IAAI,GAAG,OAAO;IAEpE,IAAI,YAAY,CAAC;QACf,IAAI,YACF;QAGF,IAAI,YAAY,eAAe,CAAC,EAAE,MAAM,EACtC;QAGF,IAAI,OAAO,IAAI,OAAO,EACpB,OAAQ,EAAE,GAAG;YACX,KAAK;YACL,KAAK;gBACH,IAAI,YAAY,aACd;YAEF,cAAc;YAChB,KAAK;gBACH,uEAAuE;gBACvE,IAAI,CAAE,CAAA,yBAAyB,CAAA,GAC7B,EAAE,eAAe;gBAEnB,EAAE,cAAc;gBAChB,MAAM,MAAM,CAAC;gBACb;YACF,KAAK;gBACH,IAAI,CAAE,CAAA,yBAAyB,CAAA,GAC7B,EAAE,eAAe;gBAEnB,EAAE,cAAc;gBAChB,MAAM,MAAM,CAAC;gBACb;YACF;gBACE,oBAAoB;gBACpB,IAAI,yBAAyB,GAC3B,EAAE,mBAAmB;QAE3B;IAEJ;IAEA,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAChE,IAAI,kBAAC,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW,EAAE;QAClC,YAAY,cAAc,YAAY;QACtC,0BAA0B,gBAAgB,MAAM,CAAC;QACjD;YACE,MAAM,KAAK;QACb;QACA;YACE,MAAM,IAAI,CAAC;QACb;IACF;IAEA,IAAI,aAAc;QAChB,cAAa,CAAC;YACZ,8EAA8E;YAC9E,IAAI,EAAE,WAAW,KAAK,WAAW,EAAE,WAAW,KAAK,cAAc,CAAC,YAChE,6DAA6D;YAC7D,8CAA8C;YAC9C,MAAM,IAAI,CAAC,EAAE,WAAW,KAAK,YAAY,UAAU;QAEvD;QACA,SAAQ,CAAC;YACP,IAAI,EAAE,WAAW,KAAK,WAAW,CAAC,YAChC,MAAM,MAAM;QAEhB;IACF;IAEA,6DAA6D;IAC7D,OAAO,aAAa,OAAO;IAE3B,OAAO;QACL,kBAAkB;YAChB,GAAG,YAAY;YACf,GAAI,YAAY,UAAU,aAAa,cAAc;YACrD,IAAI;uBACJ;QACF;QACA,WAAW;YACT,GAAG,YAAY;YACf,mBAAmB;YACnB,WAAW,MAAM,aAAa,IAAI;YAClC,SAAS,MAAM,KAAK;QACtB;IACF;AACF","sources":["packages/@react-aria/menu/src/useMenuTrigger.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 {AriaButtonProps} from '@react-types/button';\nimport {AriaMenuOptions} from './useMenu';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {MenuTriggerState} from '@react-stately/menu';\nimport {MenuTriggerType} from '@react-types/menu';\nimport {RefObject} from 'react';\nimport {useId} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useLongPress} from '@react-aria/interactions';\nimport {useOverlayTrigger} from '@react-aria/overlays';\n\nexport interface AriaMenuTriggerProps {\n /** The type of menu that the menu trigger opens. */\n type?: 'menu' | 'listbox',\n /** Whether menu trigger is disabled. */\n isDisabled?: boolean,\n /** How menu is triggered. */\n trigger?: MenuTriggerType\n}\n\nexport interface MenuTriggerAria<T> {\n /** Props for the menu trigger element. */\n menuTriggerProps: AriaButtonProps,\n\n /** Props for the menu. */\n menuProps: AriaMenuOptions<T>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a menu trigger.\n * @param props - Props for the menu trigger.\n * @param state - State for the menu trigger.\n * @param ref - Ref to the HTML element trigger for the menu.\n */\nexport function useMenuTrigger<T>(props: AriaMenuTriggerProps, state: MenuTriggerState, ref: RefObject<Element | null>): MenuTriggerAria<T> {\n let {\n type = 'menu' as AriaMenuTriggerProps['type'],\n isDisabled,\n trigger = 'press'\n } = props;\n\n let menuTriggerId = useId();\n let {triggerProps, overlayProps} = useOverlayTrigger({type}, state, ref);\n\n let onKeyDown = (e) => {\n if (isDisabled) {\n return;\n }\n\n if (trigger === 'longPress' && !e.altKey) {\n return;\n }\n\n if (ref && ref.current) {\n switch (e.key) {\n case 'Enter':\n case ' ':\n if (trigger === 'longPress') {\n return;\n }\n // fallthrough\n case 'ArrowDown':\n // Stop propagation, unless it would already be handled by useKeyboard.\n if (!('continuePropagation' in e)) {\n e.stopPropagation();\n }\n e.preventDefault();\n state.toggle('first');\n break;\n case 'ArrowUp':\n if (!('continuePropagation' in e)) {\n e.stopPropagation();\n }\n e.preventDefault();\n state.toggle('last');\n break;\n default:\n // Allow other keys.\n if ('continuePropagation' in e) {\n e.continuePropagation();\n }\n }\n }\n };\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/menu');\n let {longPressProps} = useLongPress({\n isDisabled: isDisabled || trigger !== 'longPress',\n accessibilityDescription: stringFormatter.format('longPressMessage'),\n onLongPressStart() {\n state.close();\n },\n onLongPress() {\n state.open('first');\n }\n });\n\n let pressProps = {\n onPressStart(e) {\n // For consistency with native, open the menu on mouse/key down, but touch up.\n if (e.pointerType !== 'touch' && e.pointerType !== 'keyboard' && !isDisabled) {\n // If opened with a screen reader, auto focus the first item.\n // Otherwise, the menu itself will be focused.\n state.open(e.pointerType === 'virtual' ? 'first' : null);\n }\n },\n onPress(e) {\n if (e.pointerType === 'touch' && !isDisabled) {\n state.toggle();\n }\n }\n };\n\n // omit onPress from triggerProps since we override it above.\n delete triggerProps.onPress;\n\n return {\n menuTriggerProps: {\n ...triggerProps,\n ...(trigger === 'press' ? pressProps : longPressProps),\n id: menuTriggerId,\n onKeyDown\n },\n menuProps: {\n ...overlayProps,\n 'aria-labelledby': menuTriggerId,\n autoFocus: state.focusStrategy || true,\n onClose: state.close\n }\n };\n}\n"],"names":[],"version":3,"file":"useMenuTrigger.module.js.map"}
|
|
@@ -17,12 +17,12 @@ const $62347d8c4183e713$var$TIMEOUT_TIME = 1000;
|
|
|
17
17
|
const $62347d8c4183e713$var$ANGLE_PADDING = Math.PI / 12; // 15°
|
|
18
18
|
function $62347d8c4183e713$export$85ec83e04c95f50a(options) {
|
|
19
19
|
let { menuRef: menuRef, submenuRef: submenuRef, isOpen: isOpen, isDisabled: isDisabled } = options;
|
|
20
|
-
let prevPointerPos = (0, $g3RPq$react.useRef)();
|
|
21
|
-
let submenuRect = (0, $g3RPq$react.useRef)();
|
|
20
|
+
let prevPointerPos = (0, $g3RPq$react.useRef)(undefined);
|
|
21
|
+
let submenuRect = (0, $g3RPq$react.useRef)(undefined);
|
|
22
22
|
let lastProcessedTime = (0, $g3RPq$react.useRef)(0);
|
|
23
|
-
let timeout = (0, $g3RPq$react.useRef)();
|
|
24
|
-
let autoCloseTimeout = (0, $g3RPq$react.useRef)();
|
|
25
|
-
let submenuSide = (0, $g3RPq$react.useRef)();
|
|
23
|
+
let timeout = (0, $g3RPq$react.useRef)(undefined);
|
|
24
|
+
let autoCloseTimeout = (0, $g3RPq$react.useRef)(undefined);
|
|
25
|
+
let submenuSide = (0, $g3RPq$react.useRef)(undefined);
|
|
26
26
|
let movementsTowardsSubmenuCount = (0, $g3RPq$react.useRef)(2);
|
|
27
27
|
let [preventPointerEvents, setPreventPointerEvents] = (0, $g3RPq$react.useState)(false);
|
|
28
28
|
let updateSubmenuRect = ()=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;AAeA,MAAM,kDAA4B;AAClC,MAAM,sCAAgB;AACtB,MAAM,qCAAe;AACrB,MAAM,sCAAgB,KAAK,EAAE,GAAG,IAAI,MAAM;AAMnC,SAAS,0CAAwB,OAAoC;IAC1E,IAAI,WAAC,OAAO,cAAE,UAAU,UAAE,MAAM,cAAE,UAAU,EAAC,GAAG;IAChD,IAAI,iBAAiB,CAAA,GAAA,mBAAK;
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/menu/src/useSafelyMouseToSubmenu.ts"],"sourcesContent":["import {RefObject, useEffect, useRef, useState} from 'react';\nimport {useInteractionModality} from '@react-aria/interactions';\nimport {useResizeObserver} from '@react-aria/utils';\n\ninterface SafelyMouseToSubmenuOptions {\n /** Ref for the parent menu. */\n menuRef: RefObject<Element | null>,\n /** Ref for the submenu. */\n submenuRef: RefObject<Element | null>,\n /** Whether the submenu is open. */\n isOpen: boolean,\n /** Whether this feature is disabled. */\n isDisabled?: boolean\n}\n\nconst ALLOWED_INVALID_MOVEMENTS = 2;\nconst THROTTLE_TIME = 50;\nconst TIMEOUT_TIME = 1000;\nconst ANGLE_PADDING = Math.PI / 12; // 15°\n\n/**\n * Allows the user to move their pointer to the submenu without it closing when their mouse leaves the trigger element.\n * Prevents pointer events from going to the underlying menu if the user is moving their pointer towards the sub-menu.\n */\nexport function useSafelyMouseToSubmenu(options: SafelyMouseToSubmenuOptions) {\n let {menuRef, submenuRef, isOpen, isDisabled} = options;\n let prevPointerPos = useRef<{x: number, y: number} | undefined>(undefined);\n let submenuRect = useRef<DOMRect | undefined>(undefined);\n let lastProcessedTime = useRef<number>(0);\n let timeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n let autoCloseTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n let submenuSide = useRef<'left' | 'right' | undefined>(undefined);\n let movementsTowardsSubmenuCount = useRef<number>(2);\n let [preventPointerEvents, setPreventPointerEvents] = useState(false);\n\n let updateSubmenuRect = () => {\n if (submenuRef.current) {\n submenuRect.current = submenuRef.current.getBoundingClientRect();\n submenuSide.current = undefined;\n }\n };\n useResizeObserver({ref: submenuRef, onResize: updateSubmenuRect});\n\n let reset = () => {\n setPreventPointerEvents(false);\n movementsTowardsSubmenuCount.current = ALLOWED_INVALID_MOVEMENTS;\n prevPointerPos.current = undefined;\n };\n\n let modality = useInteractionModality();\n\n useEffect(() => {\n if (preventPointerEvents && menuRef.current) {\n (menuRef.current as HTMLElement).style.pointerEvents = 'none';\n } else {\n (menuRef.current as HTMLElement).style.pointerEvents = '';\n }\n }, [menuRef, preventPointerEvents]);\n\n useEffect(() => {\n let submenu = submenuRef.current;\n let menu = menuRef.current;\n\n if (isDisabled || !submenu || !isOpen || modality !== 'pointer') {\n reset();\n return;\n }\n submenuRect.current = submenu.getBoundingClientRect();\n\n let onPointerMove = (e: PointerEvent) => {\n if (e.pointerType === 'touch' || e.pointerType === 'pen') {\n return;\n }\n\n let currentTime = Date.now();\n\n // Throttle\n if (currentTime - lastProcessedTime.current < THROTTLE_TIME) {\n return;\n }\n clearTimeout(timeout.current);\n clearTimeout(autoCloseTimeout.current);\n\n let {clientX: mouseX, clientY: mouseY} = e;\n\n if (!prevPointerPos.current) {\n prevPointerPos.current = {x: mouseX, y: mouseY};\n return;\n }\n\n if (!submenuRect.current) {\n return;\n }\n\n if (!submenuSide.current) {\n submenuSide.current = mouseX > submenuRect.current.right ? 'left' : 'right';\n }\n\n // Pointer is outside of parent menu\n if (mouseX < menu.getBoundingClientRect().left || mouseX > menu.getBoundingClientRect().right || mouseY < menu.getBoundingClientRect().top || mouseY > menu.getBoundingClientRect().bottom) {\n reset();\n return;\n }\n\n /* Check if pointer is moving towards submenu.\n Uses the 2-argument arctangent (https://en.wikipedia.org/wiki/Atan2) to calculate:\n - angle between previous pointer and top of submenu\n - angle between previous pointer and bottom of submenu\n - angle between previous pointer and current pointer (delta)\n If the pointer delta angle value is between the top and bottom angle values, we know the pointer is moving towards the submenu.\n */\n let prevMouseX = prevPointerPos.current.x;\n let prevMouseY = prevPointerPos.current.y;\n let toSubmenuX = submenuSide.current === 'right' ? submenuRect.current.left - prevMouseX : prevMouseX - submenuRect.current.right;\n let angleTop = Math.atan2(prevMouseY - submenuRect.current.top, toSubmenuX) + ANGLE_PADDING;\n let angleBottom = Math.atan2(prevMouseY - submenuRect.current.bottom, toSubmenuX) - ANGLE_PADDING;\n let anglePointer = Math.atan2(prevMouseY - mouseY, (submenuSide.current === 'left' ? -(mouseX - prevMouseX) : mouseX - prevMouseX));\n let isMovingTowardsSubmenu = anglePointer < angleTop && anglePointer > angleBottom;\n\n movementsTowardsSubmenuCount.current = isMovingTowardsSubmenu ?\n Math.min(movementsTowardsSubmenuCount.current + 1, ALLOWED_INVALID_MOVEMENTS) :\n Math.max(movementsTowardsSubmenuCount.current - 1, 0);\n\n if (movementsTowardsSubmenuCount.current >= ALLOWED_INVALID_MOVEMENTS) {\n setPreventPointerEvents(true);\n } else {\n setPreventPointerEvents(false);\n }\n\n lastProcessedTime.current = currentTime;\n prevPointerPos.current = {x: mouseX, y: mouseY};\n\n // If the pointer is moving towards the submenu, start a timeout to close if no other movements are made after 500ms.\n if (isMovingTowardsSubmenu) {\n timeout.current = setTimeout(() => {\n reset();\n autoCloseTimeout.current = setTimeout(() => {\n // Fire a pointerover event to trigger the menu to close.\n // Wait until pointer-events:none is no longer applied\n let target = document.elementFromPoint(mouseX, mouseY);\n if (target && menu.contains(target)) {\n target.dispatchEvent(new PointerEvent('pointerover', {bubbles: true, cancelable: true}));\n }\n }, 100);\n }, TIMEOUT_TIME);\n }\n };\n\n window.addEventListener('pointermove', onPointerMove);\n\n return () => {\n window.removeEventListener('pointermove', onPointerMove);\n clearTimeout(timeout.current);\n clearTimeout(autoCloseTimeout.current);\n movementsTowardsSubmenuCount.current = ALLOWED_INVALID_MOVEMENTS;\n };\n\n }, [isDisabled, isOpen, menuRef, modality, setPreventPointerEvents, submenuRef]);\n}\n"],"names":[],"version":3,"file":"useSafelyMouseToSubmenu.main.js.map"}
|
|
@@ -11,12 +11,12 @@ const $d275435c250248f8$var$TIMEOUT_TIME = 1000;
|
|
|
11
11
|
const $d275435c250248f8$var$ANGLE_PADDING = Math.PI / 12; // 15°
|
|
12
12
|
function $d275435c250248f8$export$85ec83e04c95f50a(options) {
|
|
13
13
|
let { menuRef: menuRef, submenuRef: submenuRef, isOpen: isOpen, isDisabled: isDisabled } = options;
|
|
14
|
-
let prevPointerPos = (0, $fUfeP$useRef)();
|
|
15
|
-
let submenuRect = (0, $fUfeP$useRef)();
|
|
14
|
+
let prevPointerPos = (0, $fUfeP$useRef)(undefined);
|
|
15
|
+
let submenuRect = (0, $fUfeP$useRef)(undefined);
|
|
16
16
|
let lastProcessedTime = (0, $fUfeP$useRef)(0);
|
|
17
|
-
let timeout = (0, $fUfeP$useRef)();
|
|
18
|
-
let autoCloseTimeout = (0, $fUfeP$useRef)();
|
|
19
|
-
let submenuSide = (0, $fUfeP$useRef)();
|
|
17
|
+
let timeout = (0, $fUfeP$useRef)(undefined);
|
|
18
|
+
let autoCloseTimeout = (0, $fUfeP$useRef)(undefined);
|
|
19
|
+
let submenuSide = (0, $fUfeP$useRef)(undefined);
|
|
20
20
|
let movementsTowardsSubmenuCount = (0, $fUfeP$useRef)(2);
|
|
21
21
|
let [preventPointerEvents, setPreventPointerEvents] = (0, $fUfeP$useState)(false);
|
|
22
22
|
let updateSubmenuRect = ()=>{
|
|
@@ -11,12 +11,12 @@ const $d275435c250248f8$var$TIMEOUT_TIME = 1000;
|
|
|
11
11
|
const $d275435c250248f8$var$ANGLE_PADDING = Math.PI / 12; // 15°
|
|
12
12
|
function $d275435c250248f8$export$85ec83e04c95f50a(options) {
|
|
13
13
|
let { menuRef: menuRef, submenuRef: submenuRef, isOpen: isOpen, isDisabled: isDisabled } = options;
|
|
14
|
-
let prevPointerPos = (0, $fUfeP$useRef)();
|
|
15
|
-
let submenuRect = (0, $fUfeP$useRef)();
|
|
14
|
+
let prevPointerPos = (0, $fUfeP$useRef)(undefined);
|
|
15
|
+
let submenuRect = (0, $fUfeP$useRef)(undefined);
|
|
16
16
|
let lastProcessedTime = (0, $fUfeP$useRef)(0);
|
|
17
|
-
let timeout = (0, $fUfeP$useRef)();
|
|
18
|
-
let autoCloseTimeout = (0, $fUfeP$useRef)();
|
|
19
|
-
let submenuSide = (0, $fUfeP$useRef)();
|
|
17
|
+
let timeout = (0, $fUfeP$useRef)(undefined);
|
|
18
|
+
let autoCloseTimeout = (0, $fUfeP$useRef)(undefined);
|
|
19
|
+
let submenuSide = (0, $fUfeP$useRef)(undefined);
|
|
20
20
|
let movementsTowardsSubmenuCount = (0, $fUfeP$useRef)(2);
|
|
21
21
|
let [preventPointerEvents, setPreventPointerEvents] = (0, $fUfeP$useState)(false);
|
|
22
22
|
let updateSubmenuRect = ()=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;AAeA,MAAM,kDAA4B;AAClC,MAAM,sCAAgB;AACtB,MAAM,qCAAe;AACrB,MAAM,sCAAgB,KAAK,EAAE,GAAG,IAAI,MAAM;AAMnC,SAAS,0CAAwB,OAAoC;IAC1E,IAAI,WAAC,OAAO,cAAE,UAAU,UAAE,MAAM,cAAE,UAAU,EAAC,GAAG;IAChD,IAAI,iBAAiB,CAAA,GAAA,aAAK;
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/menu/src/useSafelyMouseToSubmenu.ts"],"sourcesContent":["import {RefObject, useEffect, useRef, useState} from 'react';\nimport {useInteractionModality} from '@react-aria/interactions';\nimport {useResizeObserver} from '@react-aria/utils';\n\ninterface SafelyMouseToSubmenuOptions {\n /** Ref for the parent menu. */\n menuRef: RefObject<Element | null>,\n /** Ref for the submenu. */\n submenuRef: RefObject<Element | null>,\n /** Whether the submenu is open. */\n isOpen: boolean,\n /** Whether this feature is disabled. */\n isDisabled?: boolean\n}\n\nconst ALLOWED_INVALID_MOVEMENTS = 2;\nconst THROTTLE_TIME = 50;\nconst TIMEOUT_TIME = 1000;\nconst ANGLE_PADDING = Math.PI / 12; // 15°\n\n/**\n * Allows the user to move their pointer to the submenu without it closing when their mouse leaves the trigger element.\n * Prevents pointer events from going to the underlying menu if the user is moving their pointer towards the sub-menu.\n */\nexport function useSafelyMouseToSubmenu(options: SafelyMouseToSubmenuOptions) {\n let {menuRef, submenuRef, isOpen, isDisabled} = options;\n let prevPointerPos = useRef<{x: number, y: number} | undefined>(undefined);\n let submenuRect = useRef<DOMRect | undefined>(undefined);\n let lastProcessedTime = useRef<number>(0);\n let timeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n let autoCloseTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n let submenuSide = useRef<'left' | 'right' | undefined>(undefined);\n let movementsTowardsSubmenuCount = useRef<number>(2);\n let [preventPointerEvents, setPreventPointerEvents] = useState(false);\n\n let updateSubmenuRect = () => {\n if (submenuRef.current) {\n submenuRect.current = submenuRef.current.getBoundingClientRect();\n submenuSide.current = undefined;\n }\n };\n useResizeObserver({ref: submenuRef, onResize: updateSubmenuRect});\n\n let reset = () => {\n setPreventPointerEvents(false);\n movementsTowardsSubmenuCount.current = ALLOWED_INVALID_MOVEMENTS;\n prevPointerPos.current = undefined;\n };\n\n let modality = useInteractionModality();\n\n useEffect(() => {\n if (preventPointerEvents && menuRef.current) {\n (menuRef.current as HTMLElement).style.pointerEvents = 'none';\n } else {\n (menuRef.current as HTMLElement).style.pointerEvents = '';\n }\n }, [menuRef, preventPointerEvents]);\n\n useEffect(() => {\n let submenu = submenuRef.current;\n let menu = menuRef.current;\n\n if (isDisabled || !submenu || !isOpen || modality !== 'pointer') {\n reset();\n return;\n }\n submenuRect.current = submenu.getBoundingClientRect();\n\n let onPointerMove = (e: PointerEvent) => {\n if (e.pointerType === 'touch' || e.pointerType === 'pen') {\n return;\n }\n\n let currentTime = Date.now();\n\n // Throttle\n if (currentTime - lastProcessedTime.current < THROTTLE_TIME) {\n return;\n }\n clearTimeout(timeout.current);\n clearTimeout(autoCloseTimeout.current);\n\n let {clientX: mouseX, clientY: mouseY} = e;\n\n if (!prevPointerPos.current) {\n prevPointerPos.current = {x: mouseX, y: mouseY};\n return;\n }\n\n if (!submenuRect.current) {\n return;\n }\n\n if (!submenuSide.current) {\n submenuSide.current = mouseX > submenuRect.current.right ? 'left' : 'right';\n }\n\n // Pointer is outside of parent menu\n if (mouseX < menu.getBoundingClientRect().left || mouseX > menu.getBoundingClientRect().right || mouseY < menu.getBoundingClientRect().top || mouseY > menu.getBoundingClientRect().bottom) {\n reset();\n return;\n }\n\n /* Check if pointer is moving towards submenu.\n Uses the 2-argument arctangent (https://en.wikipedia.org/wiki/Atan2) to calculate:\n - angle between previous pointer and top of submenu\n - angle between previous pointer and bottom of submenu\n - angle between previous pointer and current pointer (delta)\n If the pointer delta angle value is between the top and bottom angle values, we know the pointer is moving towards the submenu.\n */\n let prevMouseX = prevPointerPos.current.x;\n let prevMouseY = prevPointerPos.current.y;\n let toSubmenuX = submenuSide.current === 'right' ? submenuRect.current.left - prevMouseX : prevMouseX - submenuRect.current.right;\n let angleTop = Math.atan2(prevMouseY - submenuRect.current.top, toSubmenuX) + ANGLE_PADDING;\n let angleBottom = Math.atan2(prevMouseY - submenuRect.current.bottom, toSubmenuX) - ANGLE_PADDING;\n let anglePointer = Math.atan2(prevMouseY - mouseY, (submenuSide.current === 'left' ? -(mouseX - prevMouseX) : mouseX - prevMouseX));\n let isMovingTowardsSubmenu = anglePointer < angleTop && anglePointer > angleBottom;\n\n movementsTowardsSubmenuCount.current = isMovingTowardsSubmenu ?\n Math.min(movementsTowardsSubmenuCount.current + 1, ALLOWED_INVALID_MOVEMENTS) :\n Math.max(movementsTowardsSubmenuCount.current - 1, 0);\n\n if (movementsTowardsSubmenuCount.current >= ALLOWED_INVALID_MOVEMENTS) {\n setPreventPointerEvents(true);\n } else {\n setPreventPointerEvents(false);\n }\n\n lastProcessedTime.current = currentTime;\n prevPointerPos.current = {x: mouseX, y: mouseY};\n\n // If the pointer is moving towards the submenu, start a timeout to close if no other movements are made after 500ms.\n if (isMovingTowardsSubmenu) {\n timeout.current = setTimeout(() => {\n reset();\n autoCloseTimeout.current = setTimeout(() => {\n // Fire a pointerover event to trigger the menu to close.\n // Wait until pointer-events:none is no longer applied\n let target = document.elementFromPoint(mouseX, mouseY);\n if (target && menu.contains(target)) {\n target.dispatchEvent(new PointerEvent('pointerover', {bubbles: true, cancelable: true}));\n }\n }, 100);\n }, TIMEOUT_TIME);\n }\n };\n\n window.addEventListener('pointermove', onPointerMove);\n\n return () => {\n window.removeEventListener('pointermove', onPointerMove);\n clearTimeout(timeout.current);\n clearTimeout(autoCloseTimeout.current);\n movementsTowardsSubmenuCount.current = ALLOWED_INVALID_MOVEMENTS;\n };\n\n }, [isDisabled, isOpen, menuRef, modality, setPreventPointerEvents, submenuRef]);\n}\n"],"names":[],"version":3,"file":"useSafelyMouseToSubmenu.module.js.map"}
|
|
@@ -28,7 +28,7 @@ function $5f4753043c9f6cdf$export$7138b0d059a6e743(props, state, ref) {
|
|
|
28
28
|
let submenuTriggerId = (0, $23MMN$reactariautils.useId)();
|
|
29
29
|
let overlayId = (0, $23MMN$reactariautils.useId)();
|
|
30
30
|
let { direction: direction } = (0, $23MMN$reactariai18n.useLocale)();
|
|
31
|
-
let openTimeout = (0, $23MMN$react.useRef)();
|
|
31
|
+
let openTimeout = (0, $23MMN$react.useRef)(undefined);
|
|
32
32
|
let cancelOpenTimeout = (0, $23MMN$react.useCallback)(()=>{
|
|
33
33
|
if (openTimeout.current) {
|
|
34
34
|
clearTimeout(openTimeout.current);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AA0DM,SAAS,0CAAqB,KAA8B,EAAE,KAA0B,EAAE,GAAgC;IAC/H,IAAI,iBAAC,aAAa,cAAE,UAAU,QAAE,OAAO,oBAAQ,UAAU,SAAE,QAAQ,KAAI,GAAG;IAC1E,IAAI,mBAAmB,CAAA,GAAA,2BAAI;IAC3B,IAAI,YAAY,CAAA,GAAA,2BAAI;IACpB,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,8BAAQ;IAC1B,IAAI,cAAc,CAAA,GAAA,mBAAK;IACvB,IAAI,oBAAoB,CAAA,GAAA,wBAAU,EAAE;QAClC,IAAI,YAAY,OAAO,EAAE;YACvB,aAAa,YAAY,OAAO;YAChC,YAAY,OAAO,GAAG;QACxB;IACF,GAAG;QAAC;KAAY;IAEhB,IAAI,gBAAgB,CAAA,GAAA,oCAAa,EAAE,CAAC;QAClC;QACA,MAAM,IAAI,CAAC;IACb;IAEA,IAAI,iBAAiB,CAAA,GAAA,oCAAa,EAAE;QAClC;QACA,MAAM,KAAK;IACb;IAEA,CAAA,GAAA,qCAAc,EAAE;QACd,OAAO;YACL;QACF;IACF,GAAG;QAAC;KAAkB;IAEtB,IAAI,iBAAiB,CAAC;QACpB,OAAQ,EAAE,GAAG;YACX,KAAK;gBACH,IAAI,cAAc,SAAS,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAc;oBACxE,EAAE,eAAe;oBACjB;oBACA,IAAI,OAAO,CAAC,KAAK;gBACnB;gBACA;YACF,KAAK;gBACH,IAAI,cAAc,SAAS,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAc;oBACxE,EAAE,eAAe;oBACjB;oBACA,IAAI,OAAO,CAAC,KAAK;gBACnB;gBACA;YACF,KAAK;gBACH,EAAE,eAAe;gBACjB,MAAM,QAAQ;gBACd;QACJ;IACF;IAEA,IAAI,eAAe;QACjB,IAAI;QACJ,mBAAmB;QACnB,cAAc,MAAM,YAAY;QAChC,GAAI,SAAS,UAAU;YACrB,SAAS,MAAM,QAAQ;YACvB,WAAW,MAAM,aAAa;YAC9B,WAAW;QACb,CAAC;IACH;IAEA,IAAI,wBAAwB,CAAC;QAC3B,OAAQ,EAAE,GAAG;YACX,KAAK;gBACH,IAAI,CAAC,YAAY;oBACf,IAAI,cAAc,OAAO;wBACvB,IAAI,CAAC,MAAM,MAAM,EACf,cAAc;wBAGhB,IAAI,SAAS,UAAU,CAAC,EAAC,uBAAA,iCAAA,WAAY,OAAO,KAAI,SAAS,aAAa,MAAK,gBAAA,0BAAA,IAAK,OAAO,GACrF,WAAW,OAAO,CAAC,KAAK;oBAE5B,OAAO,IAAI,MAAM,MAAM,EACrB;yBAEA,EAAE,mBAAmB;gBAEzB;gBAEA;YACF,KAAK;gBACH,IAAI,CAAC,YAAY;oBACf,IAAI,cAAc,OAAO;wBACvB,IAAI,CAAC,MAAM,MAAM,EACf,cAAc;wBAGhB,IAAI,SAAS,UAAU,CAAC,EAAC,uBAAA,iCAAA,WAAY,OAAO,KAAI,SAAS,aAAa,MAAK,gBAAA,0BAAA,IAAK,OAAO,GACrF,WAAW,OAAO,CAAC,KAAK;oBAE5B,OAAO,IAAI,MAAM,MAAM,EACrB;yBAEA,EAAE,mBAAmB;gBAEzB;gBACA;YACF,KAAK;gBACH,MAAM,QAAQ;gBACd;YACF;gBACE,EAAE,mBAAmB;gBACrB;QACJ;IACF;IAEA,IAAI,eAAe,CAAC;QAClB,IAAI,CAAC,cAAe,CAAA,EAAE,WAAW,KAAK,aAAa,EAAE,WAAW,KAAK,UAAS,GAC5E,iFAAiF;QACjF,cAAc;IAElB;IAEA,IAAI,UAAU,CAAC;QACb,IAAI,CAAC,cAAe,CAAA,EAAE,WAAW,KAAK,WAAW,EAAE,WAAW,KAAK,OAAM,GACvE,kGAAkG;QAClG,oDAAoD;QACpD;IAEJ;IAEA,IAAI,gBAAgB,CAAC;QACnB,IAAI,CAAC,YAAY;YACf,IAAI,aAAa,CAAC,MAAM,MAAM,EAC5B;gBAAA,IAAI,CAAC,YAAY,OAAO,EACtB,YAAY,OAAO,GAAG,WAAW;oBAC/B;gBACF,GAAG;YACL,OACK,IAAI,CAAC,WACV;QAEJ;IACF;IAEA,IAAI,SAAS,CAAC;QACZ,IAAI,MAAM,MAAM,IAAI,cAAc,OAAO,CAAC,QAAQ,CAAC,EAAE,aAAa,GAChE;IAEJ;IAEA,IAAI,+BAA+B,CAAC;QAClC,IAAI,WAAW,IAAI,OAAO,EACxB,OAAO;QAGT,OAAO;IACT;IAEA,CAAA,GAAA,iDAAsB,EAAE;QAAC,SAAS;oBAAe;QAAY,QAAQ,MAAM,MAAM;QAAE,YAAY;IAAU;IAEzG,OAAO;QACL,qBAAqB;YACnB,IAAI;YACJ,iBAAiB,MAAM,MAAM,GAAG,YAAY;YAC5C,iBAAiB,CAAC,aAAa,OAAO;YACtC,iBAAiB,MAAM,MAAM,GAAG,SAAS;0BACzC;qBACA;2BACA;YACA,WAAW;oBACX;YACA,QAAQ,MAAM,MAAM;QACtB;sBACA;QACA,cAAc;YACZ,YAAY;YACZ,wBAAwB;0CACxB;QACF;IACF;AACF","sources":["packages/@react-aria/menu/src/useSubmenuTrigger.ts"],"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 {AriaMenuItemProps} from './useMenuItem';\nimport {AriaMenuOptions} from './useMenu';\nimport type {AriaPopoverProps, OverlayProps} from '@react-aria/overlays';\nimport {FocusableElement, FocusStrategy, KeyboardEvent, Node, PressEvent} from '@react-types/shared';\nimport {RefObject, useCallback, useRef} from 'react';\nimport type {SubmenuTriggerState} from '@react-stately/menu';\nimport {useEffectEvent, useId, useLayoutEffect} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSafelyMouseToSubmenu} from './useSafelyMouseToSubmenu';\n\nexport interface AriaSubmenuTriggerProps {\n /**\n * An object representing the submenu trigger menu item. Contains all the relevant information that makes up the menu item.\n * @deprecated\n */\n node?: Node<unknown>,\n /** Whether the submenu trigger is disabled. */\n isDisabled?: boolean,\n /** The type of the contents that the submenu trigger opens. */\n type?: 'dialog' | 'menu',\n /** Ref of the menu that contains the submenu trigger. */\n parentMenuRef: RefObject<HTMLElement>,\n /** Ref of the submenu opened by the submenu trigger. */\n submenuRef: RefObject<HTMLElement>,\n /**\n * The delay time in milliseconds for the submenu to appear after hovering over the trigger.\n * @default 200\n */\n delay?: number\n}\n\ninterface SubmenuTriggerProps extends AriaMenuItemProps {\n /** Whether the submenu trigger is in an expanded state. */\n isOpen: boolean\n}\n\ninterface SubmenuProps<T> extends AriaMenuOptions<T> {\n /** The level of the submenu. */\n submenuLevel: number\n}\n\nexport interface SubmenuTriggerAria<T> {\n /** Props for the submenu trigger menu item. */\n submenuTriggerProps: SubmenuTriggerProps,\n /** Props for the submenu controlled by the submenu trigger menu item. */\n submenuProps: SubmenuProps<T>,\n /** Props for the submenu's popover container. */\n popoverProps: Pick<AriaPopoverProps, 'isNonModal' | 'shouldCloseOnInteractOutside'> & Pick<OverlayProps, 'disableFocusManagement'>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a submenu trigger and its associated submenu.\n * @param props - Props for the submenu trigger and refs attach to its submenu and parent menu.\n * @param state - State for the submenu trigger.\n * @param ref - Ref to the submenu trigger element.\n */\nexport function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: SubmenuTriggerState, ref: RefObject<FocusableElement>): SubmenuTriggerAria<T> {\n let {parentMenuRef, submenuRef, type = 'menu', isDisabled, delay = 200} = props;\n let submenuTriggerId = useId();\n let overlayId = useId();\n let {direction} = useLocale();\n let openTimeout = useRef<ReturnType<typeof setTimeout> | undefined>();\n let cancelOpenTimeout = useCallback(() => {\n if (openTimeout.current) {\n clearTimeout(openTimeout.current);\n openTimeout.current = undefined;\n }\n }, [openTimeout]);\n\n let onSubmenuOpen = useEffectEvent((focusStrategy?: FocusStrategy) => {\n cancelOpenTimeout();\n state.open(focusStrategy);\n });\n\n let onSubmenuClose = useEffectEvent(() => {\n cancelOpenTimeout();\n state.close();\n });\n\n useLayoutEffect(() => {\n return () => {\n cancelOpenTimeout();\n };\n }, [cancelOpenTimeout]);\n\n let submenuKeyDown = (e: KeyboardEvent) => {\n switch (e.key) {\n case 'ArrowLeft':\n if (direction === 'ltr' && e.currentTarget.contains(e.target as Element)) {\n e.stopPropagation();\n onSubmenuClose();\n ref.current.focus();\n }\n break;\n case 'ArrowRight':\n if (direction === 'rtl' && e.currentTarget.contains(e.target as Element)) {\n e.stopPropagation();\n onSubmenuClose();\n ref.current.focus();\n }\n break;\n case 'Escape':\n e.stopPropagation();\n state.closeAll();\n break;\n }\n };\n\n let submenuProps = {\n id: overlayId,\n 'aria-labelledby': submenuTriggerId,\n submenuLevel: state.submenuLevel,\n ...(type === 'menu' && {\n onClose: state.closeAll,\n autoFocus: state.focusStrategy,\n onKeyDown: submenuKeyDown\n })\n };\n\n let submenuTriggerKeyDown = (e: KeyboardEvent) => {\n switch (e.key) {\n case 'ArrowRight':\n if (!isDisabled) {\n if (direction === 'ltr') {\n if (!state.isOpen) {\n onSubmenuOpen('first');\n }\n\n if (type === 'menu' && !!submenuRef?.current && document.activeElement === ref?.current) {\n submenuRef.current.focus();\n }\n } else if (state.isOpen) {\n onSubmenuClose();\n } else {\n e.continuePropagation();\n }\n }\n\n break;\n case 'ArrowLeft':\n if (!isDisabled) {\n if (direction === 'rtl') {\n if (!state.isOpen) {\n onSubmenuOpen('first');\n }\n\n if (type === 'menu' && !!submenuRef?.current && document.activeElement === ref?.current) {\n submenuRef.current.focus();\n }\n } else if (state.isOpen) {\n onSubmenuClose();\n } else {\n e.continuePropagation();\n }\n }\n break;\n case 'Escape':\n state.closeAll();\n break;\n default:\n e.continuePropagation();\n break;\n }\n };\n\n let onPressStart = (e: PressEvent) => {\n if (!isDisabled && (e.pointerType === 'virtual' || e.pointerType === 'keyboard')) {\n // If opened with a screen reader or keyboard, auto focus the first submenu item.\n onSubmenuOpen('first');\n }\n };\n\n let onPress = (e: PressEvent) => {\n if (!isDisabled && (e.pointerType === 'touch' || e.pointerType === 'mouse')) {\n // For touch or on a desktop device with a small screen open on press up to possible problems with\n // press up happening on the newly opened tray items\n onSubmenuOpen();\n }\n };\n\n let onHoverChange = (isHovered) => {\n if (!isDisabled) {\n if (isHovered && !state.isOpen) {\n if (!openTimeout.current) {\n openTimeout.current = setTimeout(() => {\n onSubmenuOpen();\n }, delay);\n }\n } else if (!isHovered) {\n cancelOpenTimeout();\n }\n }\n };\n\n let onBlur = (e) => {\n if (state.isOpen && parentMenuRef.current.contains(e.relatedTarget)) {\n onSubmenuClose();\n }\n };\n\n let shouldCloseOnInteractOutside = (target) => {\n if (target !== ref.current) {\n return true;\n }\n\n return false;\n };\n\n useSafelyMouseToSubmenu({menuRef: parentMenuRef, submenuRef, isOpen: state.isOpen, isDisabled: isDisabled});\n\n return {\n submenuTriggerProps: {\n id: submenuTriggerId,\n 'aria-controls': state.isOpen ? overlayId : undefined,\n 'aria-haspopup': !isDisabled ? type : undefined,\n 'aria-expanded': state.isOpen ? 'true' : 'false',\n onPressStart,\n onPress,\n onHoverChange,\n onKeyDown: submenuTriggerKeyDown,\n onBlur,\n isOpen: state.isOpen\n },\n submenuProps,\n popoverProps: {\n isNonModal: true,\n disableFocusManagement: true,\n shouldCloseOnInteractOutside\n }\n };\n}\n"],"names":[],"version":3,"file":"useSubmenuTrigger.main.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/menu/src/useSubmenuTrigger.ts"],"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 {AriaMenuItemProps} from './useMenuItem';\nimport {AriaMenuOptions} from './useMenu';\nimport type {AriaPopoverProps, OverlayProps} from '@react-aria/overlays';\nimport {FocusableElement, FocusStrategy, KeyboardEvent, Node, PressEvent} from '@react-types/shared';\nimport {RefObject, useCallback, useRef} from 'react';\nimport type {SubmenuTriggerState} from '@react-stately/menu';\nimport {useEffectEvent, useId, useLayoutEffect} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSafelyMouseToSubmenu} from './useSafelyMouseToSubmenu';\n\nexport interface AriaSubmenuTriggerProps {\n /**\n * An object representing the submenu trigger menu item. Contains all the relevant information that makes up the menu item.\n * @deprecated\n */\n node?: Node<unknown>,\n /** Whether the submenu trigger is disabled. */\n isDisabled?: boolean,\n /** The type of the contents that the submenu trigger opens. */\n type?: 'dialog' | 'menu',\n /** Ref of the menu that contains the submenu trigger. */\n parentMenuRef: RefObject<HTMLElement | null>,\n /** Ref of the submenu opened by the submenu trigger. */\n submenuRef: RefObject<HTMLElement | null>,\n /**\n * The delay time in milliseconds for the submenu to appear after hovering over the trigger.\n * @default 200\n */\n delay?: number\n}\n\ninterface SubmenuTriggerProps extends AriaMenuItemProps {\n /** Whether the submenu trigger is in an expanded state. */\n isOpen: boolean\n}\n\ninterface SubmenuProps<T> extends AriaMenuOptions<T> {\n /** The level of the submenu. */\n submenuLevel: number\n}\n\nexport interface SubmenuTriggerAria<T> {\n /** Props for the submenu trigger menu item. */\n submenuTriggerProps: SubmenuTriggerProps,\n /** Props for the submenu controlled by the submenu trigger menu item. */\n submenuProps: SubmenuProps<T>,\n /** Props for the submenu's popover container. */\n popoverProps: Pick<AriaPopoverProps, 'isNonModal' | 'shouldCloseOnInteractOutside'> & Pick<OverlayProps, 'disableFocusManagement'>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a submenu trigger and its associated submenu.\n * @param props - Props for the submenu trigger and refs attach to its submenu and parent menu.\n * @param state - State for the submenu trigger.\n * @param ref - Ref to the submenu trigger element.\n */\nexport function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: SubmenuTriggerState, ref: RefObject<FocusableElement | null>): SubmenuTriggerAria<T> {\n let {parentMenuRef, submenuRef, type = 'menu', isDisabled, delay = 200} = props;\n let submenuTriggerId = useId();\n let overlayId = useId();\n let {direction} = useLocale();\n let openTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n let cancelOpenTimeout = useCallback(() => {\n if (openTimeout.current) {\n clearTimeout(openTimeout.current);\n openTimeout.current = undefined;\n }\n }, [openTimeout]);\n\n let onSubmenuOpen = useEffectEvent((focusStrategy?: FocusStrategy) => {\n cancelOpenTimeout();\n state.open(focusStrategy);\n });\n\n let onSubmenuClose = useEffectEvent(() => {\n cancelOpenTimeout();\n state.close();\n });\n\n useLayoutEffect(() => {\n return () => {\n cancelOpenTimeout();\n };\n }, [cancelOpenTimeout]);\n\n let submenuKeyDown = (e: KeyboardEvent) => {\n switch (e.key) {\n case 'ArrowLeft':\n if (direction === 'ltr' && e.currentTarget.contains(e.target as Element)) {\n e.stopPropagation();\n onSubmenuClose();\n ref.current.focus();\n }\n break;\n case 'ArrowRight':\n if (direction === 'rtl' && e.currentTarget.contains(e.target as Element)) {\n e.stopPropagation();\n onSubmenuClose();\n ref.current.focus();\n }\n break;\n case 'Escape':\n e.stopPropagation();\n state.closeAll();\n break;\n }\n };\n\n let submenuProps = {\n id: overlayId,\n 'aria-labelledby': submenuTriggerId,\n submenuLevel: state.submenuLevel,\n ...(type === 'menu' && {\n onClose: state.closeAll,\n autoFocus: state.focusStrategy,\n onKeyDown: submenuKeyDown\n })\n };\n\n let submenuTriggerKeyDown = (e: KeyboardEvent) => {\n switch (e.key) {\n case 'ArrowRight':\n if (!isDisabled) {\n if (direction === 'ltr') {\n if (!state.isOpen) {\n onSubmenuOpen('first');\n }\n\n if (type === 'menu' && !!submenuRef?.current && document.activeElement === ref?.current) {\n submenuRef.current.focus();\n }\n } else if (state.isOpen) {\n onSubmenuClose();\n } else {\n e.continuePropagation();\n }\n }\n\n break;\n case 'ArrowLeft':\n if (!isDisabled) {\n if (direction === 'rtl') {\n if (!state.isOpen) {\n onSubmenuOpen('first');\n }\n\n if (type === 'menu' && !!submenuRef?.current && document.activeElement === ref?.current) {\n submenuRef.current.focus();\n }\n } else if (state.isOpen) {\n onSubmenuClose();\n } else {\n e.continuePropagation();\n }\n }\n break;\n case 'Escape':\n state.closeAll();\n break;\n default:\n e.continuePropagation();\n break;\n }\n };\n\n let onPressStart = (e: PressEvent) => {\n if (!isDisabled && (e.pointerType === 'virtual' || e.pointerType === 'keyboard')) {\n // If opened with a screen reader or keyboard, auto focus the first submenu item.\n onSubmenuOpen('first');\n }\n };\n\n let onPress = (e: PressEvent) => {\n if (!isDisabled && (e.pointerType === 'touch' || e.pointerType === 'mouse')) {\n // For touch or on a desktop device with a small screen open on press up to possible problems with\n // press up happening on the newly opened tray items\n onSubmenuOpen();\n }\n };\n\n let onHoverChange = (isHovered) => {\n if (!isDisabled) {\n if (isHovered && !state.isOpen) {\n if (!openTimeout.current) {\n openTimeout.current = setTimeout(() => {\n onSubmenuOpen();\n }, delay);\n }\n } else if (!isHovered) {\n cancelOpenTimeout();\n }\n }\n };\n\n let onBlur = (e) => {\n if (state.isOpen && parentMenuRef.current.contains(e.relatedTarget)) {\n onSubmenuClose();\n }\n };\n\n let shouldCloseOnInteractOutside = (target) => {\n if (target !== ref.current) {\n return true;\n }\n\n return false;\n };\n\n useSafelyMouseToSubmenu({menuRef: parentMenuRef, submenuRef, isOpen: state.isOpen, isDisabled: isDisabled});\n\n return {\n submenuTriggerProps: {\n id: submenuTriggerId,\n 'aria-controls': state.isOpen ? overlayId : undefined,\n 'aria-haspopup': !isDisabled ? type : undefined,\n 'aria-expanded': state.isOpen ? 'true' : 'false',\n onPressStart,\n onPress,\n onHoverChange,\n onKeyDown: submenuTriggerKeyDown,\n onBlur,\n isOpen: state.isOpen\n },\n submenuProps,\n popoverProps: {\n isNonModal: true,\n disableFocusManagement: true,\n shouldCloseOnInteractOutside\n }\n };\n}\n"],"names":[],"version":3,"file":"useSubmenuTrigger.main.js.map"}
|
|
@@ -22,7 +22,7 @@ function $0065b146e7192841$export$7138b0d059a6e743(props, state, ref) {
|
|
|
22
22
|
let submenuTriggerId = (0, $dXlYe$useId)();
|
|
23
23
|
let overlayId = (0, $dXlYe$useId)();
|
|
24
24
|
let { direction: direction } = (0, $dXlYe$useLocale)();
|
|
25
|
-
let openTimeout = (0, $dXlYe$useRef)();
|
|
25
|
+
let openTimeout = (0, $dXlYe$useRef)(undefined);
|
|
26
26
|
let cancelOpenTimeout = (0, $dXlYe$useCallback)(()=>{
|
|
27
27
|
if (openTimeout.current) {
|
|
28
28
|
clearTimeout(openTimeout.current);
|
|
@@ -22,7 +22,7 @@ function $0065b146e7192841$export$7138b0d059a6e743(props, state, ref) {
|
|
|
22
22
|
let submenuTriggerId = (0, $dXlYe$useId)();
|
|
23
23
|
let overlayId = (0, $dXlYe$useId)();
|
|
24
24
|
let { direction: direction } = (0, $dXlYe$useLocale)();
|
|
25
|
-
let openTimeout = (0, $dXlYe$useRef)();
|
|
25
|
+
let openTimeout = (0, $dXlYe$useRef)(undefined);
|
|
26
26
|
let cancelOpenTimeout = (0, $dXlYe$useCallback)(()=>{
|
|
27
27
|
if (openTimeout.current) {
|
|
28
28
|
clearTimeout(openTimeout.current);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-aria/menu/src/useSubmenuTrigger.ts"],"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 {AriaMenuItemProps} from './useMenuItem';\nimport {AriaMenuOptions} from './useMenu';\nimport type {AriaPopoverProps, OverlayProps} from '@react-aria/overlays';\nimport {FocusableElement, FocusStrategy, KeyboardEvent, Node, PressEvent} from '@react-types/shared';\nimport {RefObject, useCallback, useRef} from 'react';\nimport type {SubmenuTriggerState} from '@react-stately/menu';\nimport {useEffectEvent, useId, useLayoutEffect} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSafelyMouseToSubmenu} from './useSafelyMouseToSubmenu';\n\nexport interface AriaSubmenuTriggerProps {\n /**\n * An object representing the submenu trigger menu item. Contains all the relevant information that makes up the menu item.\n * @deprecated\n */\n node?: Node<unknown>,\n /** Whether the submenu trigger is disabled. */\n isDisabled?: boolean,\n /** The type of the contents that the submenu trigger opens. */\n type?: 'dialog' | 'menu',\n /** Ref of the menu that contains the submenu trigger. */\n parentMenuRef: RefObject<HTMLElement>,\n /** Ref of the submenu opened by the submenu trigger. */\n submenuRef: RefObject<HTMLElement>,\n /**\n * The delay time in milliseconds for the submenu to appear after hovering over the trigger.\n * @default 200\n */\n delay?: number\n}\n\ninterface SubmenuTriggerProps extends AriaMenuItemProps {\n /** Whether the submenu trigger is in an expanded state. */\n isOpen: boolean\n}\n\ninterface SubmenuProps<T> extends AriaMenuOptions<T> {\n /** The level of the submenu. */\n submenuLevel: number\n}\n\nexport interface SubmenuTriggerAria<T> {\n /** Props for the submenu trigger menu item. */\n submenuTriggerProps: SubmenuTriggerProps,\n /** Props for the submenu controlled by the submenu trigger menu item. */\n submenuProps: SubmenuProps<T>,\n /** Props for the submenu's popover container. */\n popoverProps: Pick<AriaPopoverProps, 'isNonModal' | 'shouldCloseOnInteractOutside'> & Pick<OverlayProps, 'disableFocusManagement'>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a submenu trigger and its associated submenu.\n * @param props - Props for the submenu trigger and refs attach to its submenu and parent menu.\n * @param state - State for the submenu trigger.\n * @param ref - Ref to the submenu trigger element.\n */\nexport function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: SubmenuTriggerState, ref: RefObject<FocusableElement>): SubmenuTriggerAria<T> {\n let {parentMenuRef, submenuRef, type = 'menu', isDisabled, delay = 200} = props;\n let submenuTriggerId = useId();\n let overlayId = useId();\n let {direction} = useLocale();\n let openTimeout = useRef<ReturnType<typeof setTimeout> | undefined>();\n let cancelOpenTimeout = useCallback(() => {\n if (openTimeout.current) {\n clearTimeout(openTimeout.current);\n openTimeout.current = undefined;\n }\n }, [openTimeout]);\n\n let onSubmenuOpen = useEffectEvent((focusStrategy?: FocusStrategy) => {\n cancelOpenTimeout();\n state.open(focusStrategy);\n });\n\n let onSubmenuClose = useEffectEvent(() => {\n cancelOpenTimeout();\n state.close();\n });\n\n useLayoutEffect(() => {\n return () => {\n cancelOpenTimeout();\n };\n }, [cancelOpenTimeout]);\n\n let submenuKeyDown = (e: KeyboardEvent) => {\n switch (e.key) {\n case 'ArrowLeft':\n if (direction === 'ltr' && e.currentTarget.contains(e.target as Element)) {\n e.stopPropagation();\n onSubmenuClose();\n ref.current.focus();\n }\n break;\n case 'ArrowRight':\n if (direction === 'rtl' && e.currentTarget.contains(e.target as Element)) {\n e.stopPropagation();\n onSubmenuClose();\n ref.current.focus();\n }\n break;\n case 'Escape':\n e.stopPropagation();\n state.closeAll();\n break;\n }\n };\n\n let submenuProps = {\n id: overlayId,\n 'aria-labelledby': submenuTriggerId,\n submenuLevel: state.submenuLevel,\n ...(type === 'menu' && {\n onClose: state.closeAll,\n autoFocus: state.focusStrategy,\n onKeyDown: submenuKeyDown\n })\n };\n\n let submenuTriggerKeyDown = (e: KeyboardEvent) => {\n switch (e.key) {\n case 'ArrowRight':\n if (!isDisabled) {\n if (direction === 'ltr') {\n if (!state.isOpen) {\n onSubmenuOpen('first');\n }\n\n if (type === 'menu' && !!submenuRef?.current && document.activeElement === ref?.current) {\n submenuRef.current.focus();\n }\n } else if (state.isOpen) {\n onSubmenuClose();\n } else {\n e.continuePropagation();\n }\n }\n\n break;\n case 'ArrowLeft':\n if (!isDisabled) {\n if (direction === 'rtl') {\n if (!state.isOpen) {\n onSubmenuOpen('first');\n }\n\n if (type === 'menu' && !!submenuRef?.current && document.activeElement === ref?.current) {\n submenuRef.current.focus();\n }\n } else if (state.isOpen) {\n onSubmenuClose();\n } else {\n e.continuePropagation();\n }\n }\n break;\n case 'Escape':\n state.closeAll();\n break;\n default:\n e.continuePropagation();\n break;\n }\n };\n\n let onPressStart = (e: PressEvent) => {\n if (!isDisabled && (e.pointerType === 'virtual' || e.pointerType === 'keyboard')) {\n // If opened with a screen reader or keyboard, auto focus the first submenu item.\n onSubmenuOpen('first');\n }\n };\n\n let onPress = (e: PressEvent) => {\n if (!isDisabled && (e.pointerType === 'touch' || e.pointerType === 'mouse')) {\n // For touch or on a desktop device with a small screen open on press up to possible problems with\n // press up happening on the newly opened tray items\n onSubmenuOpen();\n }\n };\n\n let onHoverChange = (isHovered) => {\n if (!isDisabled) {\n if (isHovered && !state.isOpen) {\n if (!openTimeout.current) {\n openTimeout.current = setTimeout(() => {\n onSubmenuOpen();\n }, delay);\n }\n } else if (!isHovered) {\n cancelOpenTimeout();\n }\n }\n };\n\n let onBlur = (e) => {\n if (state.isOpen && parentMenuRef.current.contains(e.relatedTarget)) {\n onSubmenuClose();\n }\n };\n\n let shouldCloseOnInteractOutside = (target) => {\n if (target !== ref.current) {\n return true;\n }\n\n return false;\n };\n\n useSafelyMouseToSubmenu({menuRef: parentMenuRef, submenuRef, isOpen: state.isOpen, isDisabled: isDisabled});\n\n return {\n submenuTriggerProps: {\n id: submenuTriggerId,\n 'aria-controls': state.isOpen ? overlayId : undefined,\n 'aria-haspopup': !isDisabled ? type : undefined,\n 'aria-expanded': state.isOpen ? 'true' : 'false',\n onPressStart,\n onPress,\n onHoverChange,\n onKeyDown: submenuTriggerKeyDown,\n onBlur,\n isOpen: state.isOpen\n },\n submenuProps,\n popoverProps: {\n isNonModal: true,\n disableFocusManagement: true,\n shouldCloseOnInteractOutside\n }\n };\n}\n"],"names":[],"version":3,"file":"useSubmenuTrigger.module.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/menu/src/useSubmenuTrigger.ts"],"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 {AriaMenuItemProps} from './useMenuItem';\nimport {AriaMenuOptions} from './useMenu';\nimport type {AriaPopoverProps, OverlayProps} from '@react-aria/overlays';\nimport {FocusableElement, FocusStrategy, KeyboardEvent, Node, PressEvent} from '@react-types/shared';\nimport {RefObject, useCallback, useRef} from 'react';\nimport type {SubmenuTriggerState} from '@react-stately/menu';\nimport {useEffectEvent, useId, useLayoutEffect} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSafelyMouseToSubmenu} from './useSafelyMouseToSubmenu';\n\nexport interface AriaSubmenuTriggerProps {\n /**\n * An object representing the submenu trigger menu item. Contains all the relevant information that makes up the menu item.\n * @deprecated\n */\n node?: Node<unknown>,\n /** Whether the submenu trigger is disabled. */\n isDisabled?: boolean,\n /** The type of the contents that the submenu trigger opens. */\n type?: 'dialog' | 'menu',\n /** Ref of the menu that contains the submenu trigger. */\n parentMenuRef: RefObject<HTMLElement | null>,\n /** Ref of the submenu opened by the submenu trigger. */\n submenuRef: RefObject<HTMLElement | null>,\n /**\n * The delay time in milliseconds for the submenu to appear after hovering over the trigger.\n * @default 200\n */\n delay?: number\n}\n\ninterface SubmenuTriggerProps extends AriaMenuItemProps {\n /** Whether the submenu trigger is in an expanded state. */\n isOpen: boolean\n}\n\ninterface SubmenuProps<T> extends AriaMenuOptions<T> {\n /** The level of the submenu. */\n submenuLevel: number\n}\n\nexport interface SubmenuTriggerAria<T> {\n /** Props for the submenu trigger menu item. */\n submenuTriggerProps: SubmenuTriggerProps,\n /** Props for the submenu controlled by the submenu trigger menu item. */\n submenuProps: SubmenuProps<T>,\n /** Props for the submenu's popover container. */\n popoverProps: Pick<AriaPopoverProps, 'isNonModal' | 'shouldCloseOnInteractOutside'> & Pick<OverlayProps, 'disableFocusManagement'>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a submenu trigger and its associated submenu.\n * @param props - Props for the submenu trigger and refs attach to its submenu and parent menu.\n * @param state - State for the submenu trigger.\n * @param ref - Ref to the submenu trigger element.\n */\nexport function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: SubmenuTriggerState, ref: RefObject<FocusableElement | null>): SubmenuTriggerAria<T> {\n let {parentMenuRef, submenuRef, type = 'menu', isDisabled, delay = 200} = props;\n let submenuTriggerId = useId();\n let overlayId = useId();\n let {direction} = useLocale();\n let openTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n let cancelOpenTimeout = useCallback(() => {\n if (openTimeout.current) {\n clearTimeout(openTimeout.current);\n openTimeout.current = undefined;\n }\n }, [openTimeout]);\n\n let onSubmenuOpen = useEffectEvent((focusStrategy?: FocusStrategy) => {\n cancelOpenTimeout();\n state.open(focusStrategy);\n });\n\n let onSubmenuClose = useEffectEvent(() => {\n cancelOpenTimeout();\n state.close();\n });\n\n useLayoutEffect(() => {\n return () => {\n cancelOpenTimeout();\n };\n }, [cancelOpenTimeout]);\n\n let submenuKeyDown = (e: KeyboardEvent) => {\n switch (e.key) {\n case 'ArrowLeft':\n if (direction === 'ltr' && e.currentTarget.contains(e.target as Element)) {\n e.stopPropagation();\n onSubmenuClose();\n ref.current.focus();\n }\n break;\n case 'ArrowRight':\n if (direction === 'rtl' && e.currentTarget.contains(e.target as Element)) {\n e.stopPropagation();\n onSubmenuClose();\n ref.current.focus();\n }\n break;\n case 'Escape':\n e.stopPropagation();\n state.closeAll();\n break;\n }\n };\n\n let submenuProps = {\n id: overlayId,\n 'aria-labelledby': submenuTriggerId,\n submenuLevel: state.submenuLevel,\n ...(type === 'menu' && {\n onClose: state.closeAll,\n autoFocus: state.focusStrategy,\n onKeyDown: submenuKeyDown\n })\n };\n\n let submenuTriggerKeyDown = (e: KeyboardEvent) => {\n switch (e.key) {\n case 'ArrowRight':\n if (!isDisabled) {\n if (direction === 'ltr') {\n if (!state.isOpen) {\n onSubmenuOpen('first');\n }\n\n if (type === 'menu' && !!submenuRef?.current && document.activeElement === ref?.current) {\n submenuRef.current.focus();\n }\n } else if (state.isOpen) {\n onSubmenuClose();\n } else {\n e.continuePropagation();\n }\n }\n\n break;\n case 'ArrowLeft':\n if (!isDisabled) {\n if (direction === 'rtl') {\n if (!state.isOpen) {\n onSubmenuOpen('first');\n }\n\n if (type === 'menu' && !!submenuRef?.current && document.activeElement === ref?.current) {\n submenuRef.current.focus();\n }\n } else if (state.isOpen) {\n onSubmenuClose();\n } else {\n e.continuePropagation();\n }\n }\n break;\n case 'Escape':\n state.closeAll();\n break;\n default:\n e.continuePropagation();\n break;\n }\n };\n\n let onPressStart = (e: PressEvent) => {\n if (!isDisabled && (e.pointerType === 'virtual' || e.pointerType === 'keyboard')) {\n // If opened with a screen reader or keyboard, auto focus the first submenu item.\n onSubmenuOpen('first');\n }\n };\n\n let onPress = (e: PressEvent) => {\n if (!isDisabled && (e.pointerType === 'touch' || e.pointerType === 'mouse')) {\n // For touch or on a desktop device with a small screen open on press up to possible problems with\n // press up happening on the newly opened tray items\n onSubmenuOpen();\n }\n };\n\n let onHoverChange = (isHovered) => {\n if (!isDisabled) {\n if (isHovered && !state.isOpen) {\n if (!openTimeout.current) {\n openTimeout.current = setTimeout(() => {\n onSubmenuOpen();\n }, delay);\n }\n } else if (!isHovered) {\n cancelOpenTimeout();\n }\n }\n };\n\n let onBlur = (e) => {\n if (state.isOpen && parentMenuRef.current.contains(e.relatedTarget)) {\n onSubmenuClose();\n }\n };\n\n let shouldCloseOnInteractOutside = (target) => {\n if (target !== ref.current) {\n return true;\n }\n\n return false;\n };\n\n useSafelyMouseToSubmenu({menuRef: parentMenuRef, submenuRef, isOpen: state.isOpen, isDisabled: isDisabled});\n\n return {\n submenuTriggerProps: {\n id: submenuTriggerId,\n 'aria-controls': state.isOpen ? overlayId : undefined,\n 'aria-haspopup': !isDisabled ? type : undefined,\n 'aria-expanded': state.isOpen ? 'true' : 'false',\n onPressStart,\n onPress,\n onHoverChange,\n onKeyDown: submenuTriggerKeyDown,\n onBlur,\n isOpen: state.isOpen\n },\n submenuProps,\n popoverProps: {\n isNonModal: true,\n disableFocusManagement: true,\n shouldCloseOnInteractOutside\n }\n };\n}\n"],"names":[],"version":3,"file":"useSubmenuTrigger.module.js.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/menu",
|
|
3
|
-
"version": "3.14.2-nightly.
|
|
3
|
+
"version": "3.14.2-nightly.4681+2fd87d9f1",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -22,26 +22,26 @@
|
|
|
22
22
|
"url": "https://github.com/adobe/react-spectrum"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@react-aria/focus": "3.0.0-nightly.
|
|
26
|
-
"@react-aria/i18n": "3.0.0-nightly.
|
|
27
|
-
"@react-aria/interactions": "3.0.0-nightly.
|
|
28
|
-
"@react-aria/overlays": "3.0.0-nightly.
|
|
29
|
-
"@react-aria/selection": "3.0.0-nightly.
|
|
30
|
-
"@react-aria/utils": "3.0.0-nightly.
|
|
31
|
-
"@react-stately/collections": "3.0.0-nightly.
|
|
32
|
-
"@react-stately/menu": "3.7.2-nightly.
|
|
33
|
-
"@react-stately/tree": "3.0.0-nightly.
|
|
34
|
-
"@react-types/button": "3.9.5-nightly.
|
|
35
|
-
"@react-types/menu": "3.9.10-nightly.
|
|
36
|
-
"@react-types/shared": "3.0.0-nightly.
|
|
25
|
+
"@react-aria/focus": "3.0.0-nightly.2969+2fd87d9f1",
|
|
26
|
+
"@react-aria/i18n": "3.0.0-nightly.2969+2fd87d9f1",
|
|
27
|
+
"@react-aria/interactions": "3.0.0-nightly.2969+2fd87d9f1",
|
|
28
|
+
"@react-aria/overlays": "3.0.0-nightly.2969+2fd87d9f1",
|
|
29
|
+
"@react-aria/selection": "3.0.0-nightly.2969+2fd87d9f1",
|
|
30
|
+
"@react-aria/utils": "3.0.0-nightly.2969+2fd87d9f1",
|
|
31
|
+
"@react-stately/collections": "3.0.0-nightly.2969+2fd87d9f1",
|
|
32
|
+
"@react-stately/menu": "3.7.2-nightly.4681+2fd87d9f1",
|
|
33
|
+
"@react-stately/tree": "3.0.0-nightly.2969+2fd87d9f1",
|
|
34
|
+
"@react-types/button": "3.9.5-nightly.4681+2fd87d9f1",
|
|
35
|
+
"@react-types/menu": "3.9.10-nightly.4681+2fd87d9f1",
|
|
36
|
+
"@react-types/shared": "3.0.0-nightly.2969+2fd87d9f1",
|
|
37
37
|
"@swc/helpers": "^0.5.0"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
40
|
-
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
|
|
41
|
-
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
|
|
40
|
+
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
|
|
41
|
+
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
|
|
42
42
|
},
|
|
43
43
|
"publishConfig": {
|
|
44
44
|
"access": "public"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "2fd87d9f1d894e6b00a595cce73c6e8828029132"
|
|
47
47
|
}
|
package/src/useMenu.ts
CHANGED
|
@@ -46,7 +46,7 @@ export const menuData = new WeakMap<TreeState<unknown>, MenuData>();
|
|
|
46
46
|
* @param props - Props for the menu.
|
|
47
47
|
* @param state - State for the menu, as returned by `useListState`.
|
|
48
48
|
*/
|
|
49
|
-
export function useMenu<T>(props: AriaMenuOptions<T>, state: TreeState<T>, ref: RefObject<HTMLElement>): MenuAria {
|
|
49
|
+
export function useMenu<T>(props: AriaMenuOptions<T>, state: TreeState<T>, ref: RefObject<HTMLElement | null>): MenuAria {
|
|
50
50
|
let {
|
|
51
51
|
shouldFocusWrap = true,
|
|
52
52
|
onKeyDown,
|
package/src/useMenuItem.ts
CHANGED
|
@@ -98,7 +98,7 @@ export interface AriaMenuItemProps extends DOMProps, PressEvents, HoverEvents, K
|
|
|
98
98
|
* @param props - Props for the item.
|
|
99
99
|
* @param state - State for the menu, as returned by `useTreeState`.
|
|
100
100
|
*/
|
|
101
|
-
export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, ref: RefObject<FocusableElement>): MenuItemAria {
|
|
101
|
+
export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, ref: RefObject<FocusableElement | null>): MenuItemAria {
|
|
102
102
|
let {
|
|
103
103
|
id,
|
|
104
104
|
key,
|
package/src/useMenuTrigger.ts
CHANGED
|
@@ -45,7 +45,7 @@ export interface MenuTriggerAria<T> {
|
|
|
45
45
|
* @param state - State for the menu trigger.
|
|
46
46
|
* @param ref - Ref to the HTML element trigger for the menu.
|
|
47
47
|
*/
|
|
48
|
-
export function useMenuTrigger<T>(props: AriaMenuTriggerProps, state: MenuTriggerState, ref: RefObject<Element>): MenuTriggerAria<T> {
|
|
48
|
+
export function useMenuTrigger<T>(props: AriaMenuTriggerProps, state: MenuTriggerState, ref: RefObject<Element | null>): MenuTriggerAria<T> {
|
|
49
49
|
let {
|
|
50
50
|
type = 'menu' as AriaMenuTriggerProps['type'],
|
|
51
51
|
isDisabled,
|
|
@@ -4,9 +4,9 @@ import {useResizeObserver} from '@react-aria/utils';
|
|
|
4
4
|
|
|
5
5
|
interface SafelyMouseToSubmenuOptions {
|
|
6
6
|
/** Ref for the parent menu. */
|
|
7
|
-
menuRef: RefObject<Element>,
|
|
7
|
+
menuRef: RefObject<Element | null>,
|
|
8
8
|
/** Ref for the submenu. */
|
|
9
|
-
submenuRef: RefObject<Element>,
|
|
9
|
+
submenuRef: RefObject<Element | null>,
|
|
10
10
|
/** Whether the submenu is open. */
|
|
11
11
|
isOpen: boolean,
|
|
12
12
|
/** Whether this feature is disabled. */
|
|
@@ -24,12 +24,12 @@ const ANGLE_PADDING = Math.PI / 12; // 15°
|
|
|
24
24
|
*/
|
|
25
25
|
export function useSafelyMouseToSubmenu(options: SafelyMouseToSubmenuOptions) {
|
|
26
26
|
let {menuRef, submenuRef, isOpen, isDisabled} = options;
|
|
27
|
-
let prevPointerPos = useRef<{x: number, y: number} | undefined>();
|
|
28
|
-
let submenuRect = useRef<DOMRect | undefined>();
|
|
27
|
+
let prevPointerPos = useRef<{x: number, y: number} | undefined>(undefined);
|
|
28
|
+
let submenuRect = useRef<DOMRect | undefined>(undefined);
|
|
29
29
|
let lastProcessedTime = useRef<number>(0);
|
|
30
|
-
let timeout = useRef<ReturnType<typeof setTimeout> | undefined>();
|
|
31
|
-
let autoCloseTimeout = useRef<ReturnType<typeof setTimeout> | undefined>();
|
|
32
|
-
let submenuSide = useRef<'left' | 'right' | undefined>();
|
|
30
|
+
let timeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
|
|
31
|
+
let autoCloseTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
|
|
32
|
+
let submenuSide = useRef<'left' | 'right' | undefined>(undefined);
|
|
33
33
|
let movementsTowardsSubmenuCount = useRef<number>(2);
|
|
34
34
|
let [preventPointerEvents, setPreventPointerEvents] = useState(false);
|
|
35
35
|
|
package/src/useSubmenuTrigger.ts
CHANGED
|
@@ -31,9 +31,9 @@ export interface AriaSubmenuTriggerProps {
|
|
|
31
31
|
/** The type of the contents that the submenu trigger opens. */
|
|
32
32
|
type?: 'dialog' | 'menu',
|
|
33
33
|
/** Ref of the menu that contains the submenu trigger. */
|
|
34
|
-
parentMenuRef: RefObject<HTMLElement>,
|
|
34
|
+
parentMenuRef: RefObject<HTMLElement | null>,
|
|
35
35
|
/** Ref of the submenu opened by the submenu trigger. */
|
|
36
|
-
submenuRef: RefObject<HTMLElement>,
|
|
36
|
+
submenuRef: RefObject<HTMLElement | null>,
|
|
37
37
|
/**
|
|
38
38
|
* The delay time in milliseconds for the submenu to appear after hovering over the trigger.
|
|
39
39
|
* @default 200
|
|
@@ -66,12 +66,12 @@ export interface SubmenuTriggerAria<T> {
|
|
|
66
66
|
* @param state - State for the submenu trigger.
|
|
67
67
|
* @param ref - Ref to the submenu trigger element.
|
|
68
68
|
*/
|
|
69
|
-
export function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: SubmenuTriggerState, ref: RefObject<FocusableElement>): SubmenuTriggerAria<T> {
|
|
69
|
+
export function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: SubmenuTriggerState, ref: RefObject<FocusableElement | null>): SubmenuTriggerAria<T> {
|
|
70
70
|
let {parentMenuRef, submenuRef, type = 'menu', isDisabled, delay = 200} = props;
|
|
71
71
|
let submenuTriggerId = useId();
|
|
72
72
|
let overlayId = useId();
|
|
73
73
|
let {direction} = useLocale();
|
|
74
|
-
let openTimeout = useRef<ReturnType<typeof setTimeout> | undefined>();
|
|
74
|
+
let openTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
|
|
75
75
|
let cancelOpenTimeout = useCallback(() => {
|
|
76
76
|
if (openTimeout.current) {
|
|
77
77
|
clearTimeout(openTimeout.current);
|