@react-aria/menu
Advanced tools
Comparing version 3.0.0-alpha.1 to 3.0.0-nightly-641446f65-240905
275
dist/main.js
@@ -1,261 +0,34 @@ | ||
var _babelRuntimeHelpersObjectSpread = $parcel$interopDefault(require("@babel/runtime/helpers/objectSpread2")); | ||
var $7211ab9328763fb9$exports = require("./useMenuTrigger.main.js"); | ||
var $a3815f0132802737$exports = require("./useMenu.main.js"); | ||
var $38191ed02615ec07$exports = require("./useMenuItem.main.js"); | ||
var $63008655e23408c5$exports = require("./useMenuSection.main.js"); | ||
var $5f4753043c9f6cdf$exports = require("./useSubmenuTrigger.main.js"); | ||
var _temp = require("@react-aria/utils"); | ||
var useId = _temp.useId; | ||
var mergeProps = _temp.mergeProps; | ||
var useSlotId = _temp.useSlotId; | ||
var useOverlayTrigger = require("@react-aria/overlays").useOverlayTrigger; | ||
var _babelRuntimeHelpersObjectWithoutProperties = $parcel$interopDefault(require("@babel/runtime/helpers/objectWithoutProperties")); | ||
var _temp2 = require("@react-aria/selection"); | ||
var useSelectableList = _temp2.useSelectableList; | ||
var useSelectableItem = _temp2.useSelectableItem; | ||
var _temp3 = require("@react-aria/interactions"); | ||
var useHover = _temp3.useHover; | ||
var usePress = _temp3.usePress; | ||
function $parcel$interopDefault(a) { | ||
return a && a.__esModule ? a.default : a; | ||
function $parcel$export(e, n, v, s) { | ||
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true}); | ||
} | ||
function useMenuTrigger(props, state) { | ||
var ref = props.ref, | ||
_props$type = props.type, | ||
type = _props$type === void 0 ? 'menu' : _props$type; | ||
var menuTriggerId = useId(); | ||
$parcel$export(module.exports, "useMenuTrigger", () => $7211ab9328763fb9$exports.useMenuTrigger); | ||
$parcel$export(module.exports, "useMenu", () => $a3815f0132802737$exports.useMenu); | ||
$parcel$export(module.exports, "useMenuItem", () => $38191ed02615ec07$exports.useMenuItem); | ||
$parcel$export(module.exports, "useMenuSection", () => $63008655e23408c5$exports.useMenuSection); | ||
$parcel$export(module.exports, "useSubmenuTrigger", () => $5f4753043c9f6cdf$exports.useSubmenuTrigger); | ||
/* | ||
* Copyright 2020 Adobe. All rights reserved. | ||
* This file is licensed to you under the Apache License, Version 2.0 (the "License"); | ||
* you may not use this file except in compliance with the License. You may obtain a copy | ||
* of the License at http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software distributed under | ||
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS | ||
* OF ANY KIND, either express or implied. See the License for the specific language | ||
* governing permissions and limitations under the License. | ||
*/ | ||
var _useOverlayTrigger = useOverlayTrigger({ | ||
ref: ref, | ||
type: type, | ||
onClose: state.close, | ||
isOpen: state.isOpen | ||
}), | ||
triggerProps = _useOverlayTrigger.triggerProps, | ||
overlayProps = _useOverlayTrigger.overlayProps; | ||
var _onPress = function onPress() { | ||
state.toggle('first'); | ||
}; | ||
var onKeyDown = function onKeyDown(e) { | ||
if (typeof e.isDefaultPrevented === 'function' && e.isDefaultPrevented() || e.defaultPrevented) { | ||
return; | ||
} | ||
if (ref && ref.current) { | ||
switch (e.key) { | ||
case 'ArrowDown': | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
_onPress(); | ||
break; | ||
case 'ArrowUp': | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
_onPress(); // If no menu item is selected, focus last item when opening menu with ArrowDown | ||
state.setFocusStrategy('last'); | ||
break; | ||
} | ||
} | ||
}; | ||
return { | ||
menuTriggerProps: _babelRuntimeHelpersObjectSpread({}, triggerProps, { | ||
id: menuTriggerId, | ||
onPressStart: function onPressStart(e) { | ||
// For consistency with native, open the menu on mouse/key down, but touch up. | ||
if (e.pointerType !== 'touch') { | ||
_onPress(); | ||
} | ||
}, | ||
onPress: function onPress(e) { | ||
if (e.pointerType === 'touch') { | ||
_onPress(); | ||
} | ||
}, | ||
onKeyDown: onKeyDown | ||
}), | ||
menuProps: _babelRuntimeHelpersObjectSpread({}, overlayProps, { | ||
'aria-labelledby': menuTriggerId, | ||
onMouseDown: function onMouseDown(e) { | ||
// Safari blurs the focused item on mousedown on the scrollbar, when the menu is inside an iframe, | ||
// which casues the menu to close (see onBlurWithin above). | ||
// Preventing default on the event solves this. | ||
e.preventDefault(); | ||
} | ||
}) | ||
}; | ||
} | ||
exports.useMenuTrigger = useMenuTrigger; | ||
function useMenu(props, state) { | ||
var _props$shouldFocusWra = props.shouldFocusWrap, | ||
shouldFocusWrap = _props$shouldFocusWra === void 0 ? true : _props$shouldFocusWra, | ||
otherProps = _babelRuntimeHelpersObjectWithoutProperties(props, ["shouldFocusWrap"]); | ||
var _useSelectableList = useSelectableList(_babelRuntimeHelpersObjectSpread({}, otherProps, { | ||
selectionManager: state.selectionManager, | ||
collection: state.collection, | ||
shouldFocusWrap: shouldFocusWrap | ||
})), | ||
listProps = _useSelectableList.listProps; | ||
return { | ||
menuProps: _babelRuntimeHelpersObjectSpread({ | ||
role: 'menu' | ||
}, listProps) | ||
}; | ||
} | ||
exports.useMenu = useMenu; | ||
function useMenuItem(props, state) { | ||
var isSelected = props.isSelected, | ||
isDisabled = props.isDisabled, | ||
key = props.key, | ||
onClose = props.onClose, | ||
closeOnSelect = props.closeOnSelect, | ||
ref = props.ref, | ||
isVirtualized = props.isVirtualized, | ||
onAction = props.onAction; | ||
var role = 'menuitem'; | ||
if (state.selectionManager.selectionMode === 'single') { | ||
role = 'menuitemradio'; | ||
} else if (state.selectionManager.selectionMode === 'multiple') { | ||
role = 'menuitemcheckbox'; | ||
} | ||
var labelId = useSlotId(); | ||
var descriptionId = useSlotId(); | ||
var keyboardId = useSlotId(); | ||
var ariaProps = { | ||
'aria-disabled': isDisabled, | ||
role: role, | ||
'aria-label': props['aria-label'], | ||
'aria-labelledby': labelId, | ||
'aria-describedby': [descriptionId, keyboardId].filter(Boolean).join(' ') || undefined | ||
}; | ||
if (state.selectionManager.selectionMode !== 'none') { | ||
ariaProps['aria-checked'] = isSelected; | ||
} | ||
if (isVirtualized) { | ||
ariaProps['aria-posinset'] = state.collection.getItem(key).index; | ||
ariaProps['aria-setsize'] = state.collection.size; | ||
} | ||
var onKeyDown = function onKeyDown(e) { | ||
switch (e.key) { | ||
case ' ': | ||
if (!isDisabled && state.selectionManager.selectionMode === 'none' && closeOnSelect && onClose) { | ||
onClose(); | ||
} | ||
break; | ||
case 'Enter': | ||
if (!isDisabled && closeOnSelect && onClose) { | ||
onClose(); | ||
} | ||
break; | ||
} | ||
}; | ||
var onPressStart = function onPressStart(e) { | ||
if (e.pointerType === 'keyboard' && onAction) { | ||
onAction(key); | ||
} | ||
}; | ||
var onPressUp = function onPressUp(e) { | ||
if (e.pointerType !== 'keyboard') { | ||
if (onAction) { | ||
onAction(key); | ||
} | ||
if (closeOnSelect && onClose) { | ||
onClose(); | ||
} | ||
} | ||
}; | ||
var _useSelectableItem = useSelectableItem({ | ||
selectionManager: state.selectionManager, | ||
itemKey: key, | ||
itemRef: ref, | ||
shouldSelectOnPressUp: true | ||
}), | ||
itemProps = _useSelectableItem.itemProps; | ||
var _usePress = usePress(mergeProps({ | ||
onPressStart: onPressStart, | ||
onPressUp: onPressUp, | ||
onKeyDown: onKeyDown, | ||
isDisabled: isDisabled | ||
}, itemProps)), | ||
pressProps = _usePress.pressProps; | ||
var _useHover = useHover({ | ||
isDisabled: isDisabled, | ||
onHover: function onHover() { | ||
state.selectionManager.setFocusedKey(key); | ||
} | ||
}), | ||
hoverProps = _useHover.hoverProps; | ||
return { | ||
menuItemProps: _babelRuntimeHelpersObjectSpread({}, ariaProps, {}, pressProps, {}, hoverProps), | ||
labelProps: { | ||
id: labelId | ||
}, | ||
descriptionProps: { | ||
id: descriptionId | ||
}, | ||
keyboardShortcutProps: { | ||
id: keyboardId | ||
} | ||
}; | ||
} | ||
exports.useMenuItem = useMenuItem; | ||
function useMenuSection(props) { | ||
var heading = props.heading, | ||
ariaLabel = props['aria-label']; | ||
var headingId = useId(); | ||
return { | ||
itemProps: { | ||
role: 'presentation' | ||
}, | ||
headingProps: heading ? { | ||
// Techincally, menus cannot contain headings according to ARIA. | ||
// We hide the heading from assistive technology, and only use it | ||
// as a label for the nested group. | ||
id: headingId, | ||
'aria-hidden': true | ||
} : {}, | ||
groupProps: { | ||
role: 'group', | ||
'aria-label': ariaLabel, | ||
'aria-labelledby': heading ? headingId : undefined | ||
} | ||
}; | ||
} | ||
exports.useMenuSection = useMenuSection; | ||
//# sourceMappingURL=main.js.map |
@@ -1,239 +0,25 @@ | ||
import _babelRuntimeHelpersEsmObjectSpread from "@babel/runtime/helpers/esm/objectSpread2"; | ||
import { useId, mergeProps, useSlotId } from "@react-aria/utils"; | ||
import { useOverlayTrigger } from "@react-aria/overlays"; | ||
import _babelRuntimeHelpersEsmObjectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties"; | ||
import { useSelectableList, useSelectableItem } from "@react-aria/selection"; | ||
import { useHover, usePress } from "@react-aria/interactions"; | ||
export function useMenuTrigger(props, state) { | ||
let { | ||
ref, | ||
type = 'menu' | ||
} = props; | ||
let menuTriggerId = useId(); | ||
let { | ||
triggerProps, | ||
overlayProps | ||
} = useOverlayTrigger({ | ||
ref, | ||
type, | ||
onClose: state.close, | ||
isOpen: state.isOpen | ||
}); | ||
import {useMenuTrigger as $168583247155ddda$export$dc9c12ed27dd1b49} from "./useMenuTrigger.module.js"; | ||
import {useMenu as $d5336fe17ce95402$export$38eaa17faae8f579} from "./useMenu.module.js"; | ||
import {useMenuItem as $a2e5df62f93c7633$export$9d32628fc2aea7da} from "./useMenuItem.module.js"; | ||
import {useMenuSection as $3e5eb2498db5b506$export$73f7a44322579622} from "./useMenuSection.module.js"; | ||
import {useSubmenuTrigger as $0065b146e7192841$export$7138b0d059a6e743} from "./useSubmenuTrigger.module.js"; | ||
let onPress = () => { | ||
state.toggle('first'); | ||
}; | ||
/* | ||
* Copyright 2020 Adobe. All rights reserved. | ||
* This file is licensed to you under the Apache License, Version 2.0 (the "License"); | ||
* you may not use this file except in compliance with the License. You may obtain a copy | ||
* of the License at http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software distributed under | ||
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS | ||
* OF ANY KIND, either express or implied. See the License for the specific language | ||
* governing permissions and limitations under the License. | ||
*/ | ||
let onKeyDown = e => { | ||
if (typeof e.isDefaultPrevented === 'function' && e.isDefaultPrevented() || e.defaultPrevented) { | ||
return; | ||
} | ||
if (ref && ref.current) { | ||
switch (e.key) { | ||
case 'ArrowDown': | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
onPress(); | ||
break; | ||
case 'ArrowUp': | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
onPress(); // If no menu item is selected, focus last item when opening menu with ArrowDown | ||
state.setFocusStrategy('last'); | ||
break; | ||
} | ||
} | ||
}; | ||
return { | ||
menuTriggerProps: _babelRuntimeHelpersEsmObjectSpread({}, triggerProps, { | ||
id: menuTriggerId, | ||
onPressStart(e) { | ||
// For consistency with native, open the menu on mouse/key down, but touch up. | ||
if (e.pointerType !== 'touch') { | ||
onPress(); | ||
} | ||
}, | ||
onPress(e) { | ||
if (e.pointerType === 'touch') { | ||
onPress(); | ||
} | ||
}, | ||
onKeyDown | ||
}), | ||
menuProps: _babelRuntimeHelpersEsmObjectSpread({}, overlayProps, { | ||
'aria-labelledby': menuTriggerId, | ||
onMouseDown(e) { | ||
// Safari blurs the focused item on mousedown on the scrollbar, when the menu is inside an iframe, | ||
// which casues the menu to close (see onBlurWithin above). | ||
// Preventing default on the event solves this. | ||
e.preventDefault(); | ||
} | ||
}) | ||
}; | ||
} | ||
export function useMenu(props, state) { | ||
let { | ||
shouldFocusWrap = true | ||
} = props, | ||
otherProps = _babelRuntimeHelpersEsmObjectWithoutProperties(props, ["shouldFocusWrap"]); | ||
let { | ||
listProps | ||
} = useSelectableList(_babelRuntimeHelpersEsmObjectSpread({}, otherProps, { | ||
selectionManager: state.selectionManager, | ||
collection: state.collection, | ||
shouldFocusWrap | ||
})); | ||
return { | ||
menuProps: _babelRuntimeHelpersEsmObjectSpread({ | ||
role: 'menu' | ||
}, listProps) | ||
}; | ||
} | ||
export function useMenuItem(props, state) { | ||
let { | ||
isSelected, | ||
isDisabled, | ||
key, | ||
onClose, | ||
closeOnSelect, | ||
ref, | ||
isVirtualized, | ||
onAction | ||
} = props; | ||
let role = 'menuitem'; | ||
if (state.selectionManager.selectionMode === 'single') { | ||
role = 'menuitemradio'; | ||
} else if (state.selectionManager.selectionMode === 'multiple') { | ||
role = 'menuitemcheckbox'; | ||
} | ||
let labelId = useSlotId(); | ||
let descriptionId = useSlotId(); | ||
let keyboardId = useSlotId(); | ||
let ariaProps = { | ||
'aria-disabled': isDisabled, | ||
role, | ||
'aria-label': props['aria-label'], | ||
'aria-labelledby': labelId, | ||
'aria-describedby': [descriptionId, keyboardId].filter(Boolean).join(' ') || undefined | ||
}; | ||
if (state.selectionManager.selectionMode !== 'none') { | ||
ariaProps['aria-checked'] = isSelected; | ||
} | ||
if (isVirtualized) { | ||
ariaProps['aria-posinset'] = state.collection.getItem(key).index; | ||
ariaProps['aria-setsize'] = state.collection.size; | ||
} | ||
let onKeyDown = e => { | ||
switch (e.key) { | ||
case ' ': | ||
if (!isDisabled && state.selectionManager.selectionMode === 'none' && closeOnSelect && onClose) { | ||
onClose(); | ||
} | ||
break; | ||
case 'Enter': | ||
if (!isDisabled && closeOnSelect && onClose) { | ||
onClose(); | ||
} | ||
break; | ||
} | ||
}; | ||
let onPressStart = e => { | ||
if (e.pointerType === 'keyboard' && onAction) { | ||
onAction(key); | ||
} | ||
}; | ||
let onPressUp = e => { | ||
if (e.pointerType !== 'keyboard') { | ||
if (onAction) { | ||
onAction(key); | ||
} | ||
if (closeOnSelect && onClose) { | ||
onClose(); | ||
} | ||
} | ||
}; | ||
let { | ||
itemProps | ||
} = useSelectableItem({ | ||
selectionManager: state.selectionManager, | ||
itemKey: key, | ||
itemRef: ref, | ||
shouldSelectOnPressUp: true | ||
}); | ||
let { | ||
pressProps | ||
} = usePress(mergeProps({ | ||
onPressStart, | ||
onPressUp, | ||
onKeyDown, | ||
isDisabled | ||
}, itemProps)); | ||
let { | ||
hoverProps | ||
} = useHover({ | ||
isDisabled, | ||
onHover() { | ||
state.selectionManager.setFocusedKey(key); | ||
} | ||
}); | ||
return { | ||
menuItemProps: _babelRuntimeHelpersEsmObjectSpread({}, ariaProps, {}, pressProps, {}, hoverProps), | ||
labelProps: { | ||
id: labelId | ||
}, | ||
descriptionProps: { | ||
id: descriptionId | ||
}, | ||
keyboardShortcutProps: { | ||
id: keyboardId | ||
} | ||
}; | ||
} | ||
export function useMenuSection(props) { | ||
let { | ||
heading, | ||
'aria-label': ariaLabel | ||
} = props; | ||
let headingId = useId(); | ||
return { | ||
itemProps: { | ||
role: 'presentation' | ||
}, | ||
headingProps: heading ? { | ||
// Techincally, menus cannot contain headings according to ARIA. | ||
// We hide the heading from assistive technology, and only use it | ||
// as a label for the nested group. | ||
id: headingId, | ||
'aria-hidden': true | ||
} : {}, | ||
groupProps: { | ||
role: 'group', | ||
'aria-label': ariaLabel, | ||
'aria-labelledby': heading ? headingId : undefined | ||
} | ||
}; | ||
} | ||
export {$168583247155ddda$export$dc9c12ed27dd1b49 as useMenuTrigger, $d5336fe17ce95402$export$38eaa17faae8f579 as useMenu, $a2e5df62f93c7633$export$9d32628fc2aea7da as useMenuItem, $3e5eb2498db5b506$export$73f7a44322579622 as useMenuSection, $0065b146e7192841$export$7138b0d059a6e743 as useSubmenuTrigger}; | ||
//# sourceMappingURL=module.js.map |
@@ -1,58 +0,178 @@ | ||
import { HTMLAttributes, RefObject, Key, ReactNode } from "react"; | ||
import { MenuTriggerState } from "@react-stately/menu"; | ||
import { PressProps } from "@react-aria/interactions"; | ||
import { KeyboardDelegate } from "@react-types/shared"; | ||
import { MenuProps } from "@react-types/menu"; | ||
import { AriaMenuProps, MenuTriggerType } from "@react-types/menu"; | ||
import { DOMAttributes, KeyboardDelegate, KeyboardEvents, RefObject, DOMProps, FocusableElement, FocusEvents, HoverEvents, Key, PressEvents, Node } from "@react-types/shared"; | ||
import { TreeState } from "@react-stately/tree"; | ||
interface MenuTriggerAriaProps { | ||
type?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid'; | ||
ref?: RefObject<HTMLElement | null>; | ||
import { AriaButtonProps } from "@react-types/button"; | ||
import { MenuTriggerState, SubmenuTriggerState } from "@react-stately/menu"; | ||
import { ReactNode } from "react"; | ||
import { AriaPopoverProps, OverlayProps } from "@react-aria/overlays"; | ||
export interface MenuAria { | ||
/** Props for the menu element. */ | ||
menuProps: DOMAttributes; | ||
} | ||
interface MenuTriggerAria { | ||
menuTriggerProps: HTMLAttributes<HTMLElement> & PressProps; | ||
menuProps: HTMLAttributes<HTMLElement>; | ||
} | ||
export function useMenuTrigger(props: MenuTriggerAriaProps, state: MenuTriggerState): MenuTriggerAria; | ||
interface MenuAria { | ||
menuProps: HTMLAttributes<HTMLElement>; | ||
} | ||
interface MenuState<T> extends TreeState<T> { | ||
} | ||
interface AriaMenuProps<T> extends MenuProps<T> { | ||
ref?: RefObject<HTMLElement>; | ||
export interface AriaMenuOptions<T> extends Omit<AriaMenuProps<T>, 'children'>, KeyboardEvents { | ||
/** Whether the menu uses virtual scrolling. */ | ||
isVirtualized?: boolean; | ||
/** | ||
* An optional keyboard delegate implementation for type to select, | ||
* to override the default. | ||
*/ | ||
keyboardDelegate?: KeyboardDelegate; | ||
} | ||
export function useMenu<T>(props: AriaMenuProps<T>, state: MenuState<T>): MenuAria; | ||
interface MenuItemAria { | ||
menuItemProps: HTMLAttributes<HTMLElement>; | ||
labelProps: HTMLAttributes<HTMLElement>; | ||
descriptionProps: HTMLAttributes<HTMLElement>; | ||
keyboardShortcutProps: HTMLAttributes<HTMLElement>; | ||
/** | ||
* Provides the behavior and accessibility implementation for a menu component. | ||
* A menu displays a list of actions or options that a user can choose. | ||
* @param props - Props for the menu. | ||
* @param state - State for the menu, as returned by `useListState`. | ||
*/ | ||
export function useMenu<T>(props: AriaMenuOptions<T>, state: TreeState<T>, ref: RefObject<HTMLElement | null>): MenuAria; | ||
export interface AriaMenuTriggerProps { | ||
/** The type of menu that the menu trigger opens. */ | ||
type?: 'menu' | 'listbox'; | ||
/** Whether menu trigger is disabled. */ | ||
isDisabled?: boolean; | ||
/** How menu is triggered. */ | ||
trigger?: MenuTriggerType; | ||
} | ||
interface _MenuState1<T> extends TreeState<T> { | ||
export interface MenuTriggerAria<T> { | ||
/** Props for the menu trigger element. */ | ||
menuTriggerProps: AriaButtonProps; | ||
/** Props for the menu. */ | ||
menuProps: AriaMenuOptions<T>; | ||
} | ||
interface MenuItemProps { | ||
/** | ||
* Provides the behavior and accessibility implementation for a menu trigger. | ||
* @param props - Props for the menu trigger. | ||
* @param state - State for the menu trigger. | ||
* @param ref - Ref to the HTML element trigger for the menu. | ||
*/ | ||
export function useMenuTrigger<T>(props: AriaMenuTriggerProps, state: MenuTriggerState, ref: RefObject<Element | null>): MenuTriggerAria<T>; | ||
export interface MenuItemAria { | ||
/** Props for the menu item element. */ | ||
menuItemProps: DOMAttributes; | ||
/** Props for the main text element inside the menu item. */ | ||
labelProps: DOMAttributes; | ||
/** Props for the description text element inside the menu item, if any. */ | ||
descriptionProps: DOMAttributes; | ||
/** Props for the keyboard shortcut text element inside the item, if any. */ | ||
keyboardShortcutProps: DOMAttributes; | ||
/** Whether the item is currently focused. */ | ||
isFocused: boolean; | ||
/** Whether the item is currently selected. */ | ||
isSelected: boolean; | ||
/** Whether the item is currently in a pressed state. */ | ||
isPressed: boolean; | ||
/** Whether the item is disabled. */ | ||
isDisabled: boolean; | ||
} | ||
export interface AriaMenuItemProps extends DOMProps, PressEvents, HoverEvents, KeyboardEvents, FocusEvents { | ||
/** | ||
* Whether the menu item is disabled. | ||
* @deprecated - pass disabledKeys to useTreeState instead. | ||
*/ | ||
isDisabled?: boolean; | ||
/** | ||
* Whether the menu item is selected. | ||
* @deprecated - pass selectedKeys to useTreeState instead. | ||
*/ | ||
isSelected?: boolean; | ||
/** A screen reader only label for the menu item. */ | ||
'aria-label'?: string; | ||
/** The unique key for the menu item. */ | ||
key?: Key; | ||
ref?: RefObject<HTMLElement>; | ||
/** | ||
* Handler that is called when the menu should close after selecting an item. | ||
* @deprecated - pass to the menu instead. | ||
*/ | ||
onClose?: () => void; | ||
/** | ||
* Whether the menu should close when the menu item is selected. | ||
* @default true | ||
*/ | ||
closeOnSelect?: boolean; | ||
/** Whether the menu item is contained in a virtual scrolling menu. */ | ||
isVirtualized?: boolean; | ||
/** | ||
* Handler that is called when the user activates the item. | ||
* @deprecated - pass to the menu instead. | ||
*/ | ||
onAction?: (key: Key) => void; | ||
/** What kind of popup the item opens. */ | ||
'aria-haspopup'?: 'menu' | 'dialog'; | ||
/** Indicates whether the menu item's popup element is expanded or collapsed. */ | ||
'aria-expanded'?: boolean | 'true' | 'false'; | ||
/** Identifies the menu item's popup element whose contents or presence is controlled by the menu item. */ | ||
'aria-controls'?: string; | ||
} | ||
export function useMenuItem<T>(props: MenuItemProps, state: _MenuState1<T>): MenuItemAria; | ||
interface MenuSectionProps { | ||
/** | ||
* Provides the behavior and accessibility implementation for an item in a menu. | ||
* See `useMenu` for more details about menus. | ||
* @param props - Props for the item. | ||
* @param state - State for the menu, as returned by `useTreeState`. | ||
*/ | ||
export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, ref: RefObject<FocusableElement | null>): MenuItemAria; | ||
export interface AriaMenuSectionProps { | ||
/** The heading for the section. */ | ||
heading?: ReactNode; | ||
/** An accessibility label for the section. Required if `heading` is not present. */ | ||
'aria-label'?: string; | ||
} | ||
interface MenuSectionAria { | ||
itemProps: HTMLAttributes<HTMLElement>; | ||
headingProps: HTMLAttributes<HTMLElement>; | ||
groupProps: HTMLAttributes<HTMLElement>; | ||
export interface MenuSectionAria { | ||
/** Props for the wrapper list item. */ | ||
itemProps: DOMAttributes; | ||
/** Props for the heading element, if any. */ | ||
headingProps: DOMAttributes; | ||
/** Props for the group element. */ | ||
groupProps: DOMAttributes; | ||
} | ||
export function useMenuSection(props: MenuSectionProps): MenuSectionAria; | ||
/** | ||
* Provides the behavior and accessibility implementation for a section in a menu. | ||
* See `useMenu` for more details about menus. | ||
* @param props - Props for the section. | ||
*/ | ||
export function useMenuSection(props: AriaMenuSectionProps): MenuSectionAria; | ||
export interface AriaSubmenuTriggerProps { | ||
/** | ||
* An object representing the submenu trigger menu item. Contains all the relevant information that makes up the menu item. | ||
* @deprecated | ||
*/ | ||
node?: Node<unknown>; | ||
/** Whether the submenu trigger is disabled. */ | ||
isDisabled?: boolean; | ||
/** The type of the contents that the submenu trigger opens. */ | ||
type?: 'dialog' | 'menu'; | ||
/** Ref of the menu that contains the submenu trigger. */ | ||
parentMenuRef: RefObject<HTMLElement | null>; | ||
/** Ref of the submenu opened by the submenu trigger. */ | ||
submenuRef: RefObject<HTMLElement | null>; | ||
/** | ||
* The delay time in milliseconds for the submenu to appear after hovering over the trigger. | ||
* @default 200 | ||
*/ | ||
delay?: number; | ||
} | ||
interface SubmenuTriggerProps extends AriaMenuItemProps { | ||
/** Whether the submenu trigger is in an expanded state. */ | ||
isOpen: boolean; | ||
} | ||
interface SubmenuProps<T> extends AriaMenuOptions<T> { | ||
/** The level of the submenu. */ | ||
submenuLevel: number; | ||
} | ||
export interface SubmenuTriggerAria<T> { | ||
/** Props for the submenu trigger menu item. */ | ||
submenuTriggerProps: SubmenuTriggerProps; | ||
/** Props for the submenu controlled by the submenu trigger menu item. */ | ||
submenuProps: SubmenuProps<T>; | ||
/** Props for the submenu's popover container. */ | ||
popoverProps: Pick<AriaPopoverProps, 'isNonModal' | 'shouldCloseOnInteractOutside'> & Pick<OverlayProps, 'disableFocusManagement'>; | ||
} | ||
/** | ||
* Provides the behavior and accessibility implementation for a submenu trigger and its associated submenu. | ||
* @param props - Props for the submenu trigger and refs attach to its submenu and parent menu. | ||
* @param state - State for the submenu trigger. | ||
* @param ref - Ref to the submenu trigger element. | ||
*/ | ||
export function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: SubmenuTriggerState, ref: RefObject<FocusableElement | null>): SubmenuTriggerAria<T>; | ||
export type { AriaMenuProps } from '@react-types/menu'; | ||
//# sourceMappingURL=types.d.ts.map |
{ | ||
"name": "@react-aria/menu", | ||
"version": "3.0.0-alpha.1", | ||
"version": "3.0.0-nightly-641446f65-240905", | ||
"description": "Spectrum UI components in React", | ||
@@ -8,6 +8,12 @@ "license": "Apache-2.0", | ||
"module": "dist/module.js", | ||
"exports": { | ||
"types": "./dist/types.d.ts", | ||
"import": "./dist/import.mjs", | ||
"require": "./dist/main.js" | ||
}, | ||
"types": "dist/types.d.ts", | ||
"source": "src/index.ts", | ||
"files": [ | ||
"dist" | ||
"dist", | ||
"src" | ||
], | ||
@@ -17,18 +23,22 @@ "sideEffects": false, | ||
"type": "git", | ||
"url": "https://github.com/adobe-private/react-spectrum-v3" | ||
"url": "https://github.com/adobe/react-spectrum" | ||
}, | ||
"dependencies": { | ||
"@babel/runtime": "^7.6.2", | ||
"@react-aria/interactions": "^3.0.0-rc.2", | ||
"@react-aria/overlays": "^3.0.0-alpha.1", | ||
"@react-aria/selection": "^3.0.0-alpha.1", | ||
"@react-aria/utils": "^3.0.0-rc.2", | ||
"@react-stately/collections": "^3.0.0-alpha.1", | ||
"@react-stately/menu": "^3.0.0-alpha.1", | ||
"@react-stately/tree": "^3.0.0-alpha.1", | ||
"@react-types/menu": "^3.0.0-alpha.1", | ||
"@react-types/shared": "^3.0.0-rc.2" | ||
"@react-aria/focus": "^3.0.0-nightly-641446f65-240905", | ||
"@react-aria/i18n": "^3.0.0-nightly-641446f65-240905", | ||
"@react-aria/interactions": "^3.0.0-nightly-641446f65-240905", | ||
"@react-aria/overlays": "^3.0.0-nightly-641446f65-240905", | ||
"@react-aria/selection": "^3.0.0-nightly-641446f65-240905", | ||
"@react-aria/utils": "^3.0.0-nightly-641446f65-240905", | ||
"@react-stately/collections": "^3.0.0-nightly-641446f65-240905", | ||
"@react-stately/menu": "^3.0.0-nightly-641446f65-240905", | ||
"@react-stately/tree": "^3.0.0-nightly-641446f65-240905", | ||
"@react-types/button": "^3.0.0-nightly-641446f65-240905", | ||
"@react-types/menu": "^3.0.0-nightly-641446f65-240905", | ||
"@react-types/shared": "^3.0.0-nightly-641446f65-240905", | ||
"@swc/helpers": "^0.5.0" | ||
}, | ||
"peerDependencies": { | ||
"react": "^16.8.0" | ||
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0", | ||
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" | ||
}, | ||
@@ -38,3 +48,3 @@ "publishConfig": { | ||
}, | ||
"gitHead": "207e6ee9076905c96638a7f81a367758872e1410" | ||
} | ||
"stableVersion": "3.15.3" | ||
} |
# @react-aria/menu | ||
This package is part of [react-spectrum](https://github.com/adobe-private/react-spectrum-v3). See the repo for more details. | ||
This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details. |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
306113
221
3812
15
1
+ Added@swc/helpers@^0.5.0
- Removed@babel/runtime@^7.6.2
- Removed@babel/runtime@7.25.6(transitive)
- Removedobject-assign@4.1.1(transitive)
- Removedprop-types@15.8.1(transitive)
- Removedreact@16.14.0(transitive)
- Removedreact-is@16.13.1(transitive)
- Removedregenerator-runtime@0.14.1(transitive)
Updated@react-aria/interactions@^3.0.0-nightly-641446f65-240905
Updated@react-aria/selection@^3.0.0-nightly-641446f65-240905
Updated@react-stately/collections@^3.0.0-nightly-641446f65-240905