@fluentui-react-native/menu 0.16.0 → 1.0.2

package/SPEC.md

@@ -0,0 +1,405 @@
+# Menu
+
+## Background
+
+A `Menu` is an component that displays a list of options on a temporary surface. They are invoked when users interact with a button, action, or other control.
+
+## Requirements
+
+If using FURN's theming, the `Menu` and its sub-components require use of the `ThemeProvider` from `@fluentui-react-native/theme` to work properly with themes. Please see [this page](../../../docs/pages/Guides/UpdateThemeProvider.md) for information on updating your `ThemeProvider` if using the version from `@uifabricshared/theming-react-native`.
+
+## Sample code
+
+The below samples do not represent the definitive props of the final implemented component, but represent the ideal final implementations. Can be subject to change during the implementation phase.
+
+### Basic Menu
+
+![Basic menu with three options](./assets/Menu.png)
+
+```tsx
+const menu = (
+  <Menu>
+    <MenuTrigger>
+      <Button>Open menu</Button>
+    </MenuTrigger>
+    <MenuPopover>
+      <MenuList>
+        <MenuItem>Option 1</MenuItem>
+        <MenuItem>Option 2</MenuItem>
+        <MenuItem>Option 3</MenuItem>
+      </MenuList>
+    </MenuPopover>
+  </Menu>
+);
+```
+
+### Submenus
+
+![A menu with a submenu with three options](./assets/Submenu.png)
+
+```tsx
+const menu = (
+  <Menu>
+    <MenuTrigger>
+      <Button>Open menu</Button>
+    </MenuTrigger>
+    <MenuPopover>
+      <MenuList>
+        <MenuItem>Option 1</MenuItem>
+        <Menu>
+          <MenuTrigger>
+            <MenuItem>Open submenu</MenuItem>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <MenuItem>Option 1</MenuItem>
+              <MenuItem>Option 2</MenuItem>
+              <MenuItem>Option 3</MenuItem>
+            </MenuList>
+          </MenuPopover>
+        </Menu>
+      </MenuList>
+    </MenuPopover>
+  </Menu>
+);
+```
+
+### Selection
+
+![A menu with three options that support selection](./assets/checkbox.png)
+
+```tsx
+const [selectedItems, setSelectedItems] = React.useState([]);
+const onCheckedChange = React.useCallback(
+  (e, checked) => {
+    setSelectedItems(checked);
+  },
+  [setSelectedItems],
+);
+
+const menuCheckbox = (
+  <Menu checked={selectedItems} onCheckedChange={onCheckedChange}>
+    <MenuTrigger>
+      <Button>Open menu</Button>
+    </MenuTrigger>
+    <MenuPopover>
+      <MenuList>
+        <MenuItemCheckbox name="checkbox1">Option 1</MenuItemCheckbox>
+        <MenuItemCheckbox name="checkbox2">Option 2</MenuItemCheckbox>
+        <MenuItemCheckbox name="checkbox3">Option 3</MenuItemCheckbox>
+      </MenuList>
+    </MenuPopover>
+  </Menu>
+);
+```
+
+## Variants
+
+### Nested menus
+
+A `Menu` should be able to trigger a submenu, or an additional instance of `Menu`, as a part of one or more of its options. The nested `Menu` component should have the same functional capabilities as the root `Menu` component, however it will have some default behavioral differences.
+
+Nested menus are by default triggered by hovering over a trigger, but can also be opened by invoking the trigger component for the nested `Menu`.
+
+### Selection state
+
+A `Menu` should be able to track and represent the selection, or checked, state of its options.
+
+When an option has a configurable selection state, it does not dismiss the `Menu` when toggled, as opposed to other options which close the `Menu` on being invoked by default.
+
+### Sections
+
+A `Menu` can be divided into sections using dividers. The `Menu` does not support `MenuGroups` yet, but can visually represent sections using `MenuDividers`.
+
+### Disabled option(s)
+
+All options in a `Menu` component can be disabled and should provide a visible indication for this purpose. Although disabled actions cannot be invoked, they are keyboard focusable for the purposes of accessibility.
+
+## API
+
+### Menu
+
+The root level component serves as a simplified interface for configuring the triggering of a Menu.
+
+```ts
+export interface MenuProps extends MenuListProps {
+  /**
+   * Whether the popup is open on mount
+   */
+  defaultOpen?: boolean;
+
+  /**
+   * How much delay to have between hover in and showing the menu, in ms.
+   */
+  hoverDelay?: number;
+
+  /**
+   * Whether the popup is open
+   */
+  open?: boolean;
+
+  /**
+   * Call back when the component requests to change value
+   */
+  onOpenChange?: (e: InteractionEvent, isOpen: boolean) => void;
+
+  /*
+   * Opens the menu on hovering over the trigger
+   */
+  openOnHover?: boolean;
+
+  /**
+   * Do not dismiss the menu when a menu item is clicked
+   */
+  persistOnItemClick?: boolean;
+}
+```
+
+### MenuTrigger
+
+A non-visual component that wraps its child and configures them to be the trigger that will open a menu. This component should only accept one child. Accepts no other props.
+
+### MenuPopover
+
+This component provides the temporary surface that will host the `Menu`'s options.
+
+```ts
+export type MenuPopoverProps = ICalloutProps;
+```
+
+### MenuList
+
+This component is used internally by `Menu` and manages the context and layout of its items.
+
+#### MenuList Props
+
+```ts
+export type MenuListProps = {
+  /**
+   * Array of all checked items
+   */
+  checked?: string[];
+
+  /**
+   * Default items to be checked on mount
+   */
+  defaultChecked?: string[];
+
+  /**
+   * States that menu items can contain selectable items and reserves space for item alignment
+   */
+  hasCheckmarks?: boolean;
+
+  /**
+   * Callback when checked items change
+   *
+   * @param checked Array of all currently checked values
+   */
+  onCheckedChange?: (e: InteractionEvent, checked[]) => void;
+
+};
+```
+
+#### MenuList Tokens
+
+```ts
+export interface MenuListTokens extends LayoutTokens, IBackgroundColorTokens {
+  /**
+   * Space between items in pixels
+   */
+  gap?: number;
+}
+```
+
+#### MenuList Slots
+
+- `root` - The container of the `Menu`'s options that wraps all `children`.
+
+### MenuDivider
+
+Creates a divider element in the `MenuList`. This divider is purely visual and does not handle any grouping logic of the options in the `MenuList`.
+
+### MenuItem
+
+#### MenuItem Props
+
+```ts
+export interface MenuItemProps extends Omit<IWithPressableOptions<ViewProps>, 'onPress'> {
+  /**
+   * A RefObject to access the IButton interface. Use this to access the public methods and properties of the component.
+   */
+  componentRef?: React.RefObject<IFocusable>;
+
+  /**
+   * A callback to call on button click event
+   */
+  onClick?: (e: InteractionEvent) => void;
+
+  /**
+   * Do not dismiss the menu when a menu item is clicked
+   */
+  persistOnClick?: boolean;
+}
+```
+
+#### MenuItem Tokens
+
+```ts
+export interface MenuItemTokens extends LayoutTokens, FontTokens, IBorderTokens, IColorTokens {
+  /**
+   * Height and width in pixels of the space that is reserved to align the item's text with other items which have checkmarks
+   */
+  checkmarkSize?: number;
+
+  /**
+   * Amount of space in pixels around the indicator that shows that an item has a submenu
+   */
+  submenuIndicatorPadding?: number;
+
+  /**
+   * Height and width in pixels of the indicator that shows that an item has a submenu
+   */
+  submenuIndicatorSize?: number;
+
+  /**
+   * Space between parts of the item control in pixels
+   */
+  gap?: number;
+
+  /**
+   * States of the item control
+   */
+  disabled?: MenuItemTokens;
+  focused?: MenuItemTokens;
+  hovered?: MenuItemTokens;
+  pressed?: MenuItemTokens;
+}
+```
+
+#### MenuItem Slots
+
+- `root` - The outer container representing the `MenuItem` itself that wraps everything passed via the `children` prop.
+- `content` - If specified, renders the `content` prop as text.
+- `checkmark` - If specified, renders space such that the `content` aligns with other items which have checkmarks. Only used when the `Menu` has `hasCheckmarks`.
+- `submenuIndicator` - If specified, renders an SVG which indicates that the `MenuItem` is a trigger for a nested `Menu`.
+
+### MenuItemCheckbox/Radio
+
+Variants of `MenuItem` that allows a single or multiple selection state based on the value that it represents. These `MenuItems` do not support submenus. `MenuItemCheckbox` and `MenuItemRadio` share the same types for props, tokens, and slots.
+
+#### MenuItemCheckbox/Radio Props
+
+```ts
+export interface MenuItemCheckboxProps extends Omit<IWithPressableOptions<ViewProps>, 'onPress'> {
+  /**
+   * A RefObject to access the IButton interface. Use this to access the public methods and properties of the component.
+   */
+  componentRef?: React.RefObject<IFocusable>;
+
+  /**
+   * Identifier for the control
+   */
+  name: string;
+
+  /**
+   * Do not dismiss the menu when a menu item is clicked
+   */
+  persistOnClick?: boolean;
+}
+```
+
+#### MenuItemCheckbox/Radio Tokens
+
+```ts
+export interface MenuItemCheckboxTokens extends LayoutTokens, FontTokens, IBorderTokens, IColorTokens {
+  /**
+   * Color of the checkmark icon
+   */
+  checkmarkColor?: ColorValue;
+
+  /**
+   * Amount of space in pixels around the checkmark icon
+   */
+  checkmarkPadding?: number;
+
+  /**
+   * Height and width in pixels of the checkmark icon
+   */
+  checkmarkSize?: number;
+
+  /**
+   * Opacity of the checkmark icon from 0 to 1
+   */
+  checkmarkVisibility?: number;
+
+  /**
+   * Space between parts of the item control in pixels
+   */
+  gap?: number;
+
+  /**
+   * States of the item control
+   */
+  checked?: MenuItemCheckboxTokens;
+  disabled?: MenuItemCheckboxTokens;
+  focused?: MenuItemCheckboxTokens;
+  hovered?: MenuItemCheckboxTokens;
+  pressed?: MenuItemCheckboxTokens;
+}
+```
+
+#### MenuItemCheckbox/Radio Slots
+
+- `root` - The outer container representing the `MenuItem` itself that wraps everything passed via the `children` prop.
+- `content` - If specified, renders the `content` prop as text.
+- `checkmark` - If specified, renders an SVG which indicates that the `MenuItem` is selected.
+
+## Behaviors
+
+### Mouse interactions
+
+- Clicking on a menu's trigger will open the menu
+- Clicking outside of a menu's trigger and popover will light dismiss the menu
+- Clicking on a `MenuItem` which is not configured to track selection will invoke the `MenuItem` and close the menu by default
+- Clicking on a `MenuItem` variant which is configured to track selection will toggle its selection state in the configured way and not close the menu.
+- If the menu is configured to open on hover, it will only close once the mouse leaves both the trigger and the popover. There is a delay for this behavior.
+- Submenus are configured to open on hover by default. If the mouse stops hovering over the submenu, only the submenu will close.
+
+### Keyboard interactions
+
+- When a menu is invoked via keyboard, open the menu and place focus on the first focusable element by default.
+- Up and down inside of the menu that has focus should navigate vertically between keyboard focusable elements
+- On win32, up and down should circularly navigate through a list of menu items. On MacOS, circular navigation does not occur.
+- Right key on a menu item that has an available submenu or split button should invoke the submenu, and move focus into it onto the first focusable item (Left in RTL)
+- Left key when in a submenu should close the submenu and place focus back on the parent menu's item that opened the submenu. (Right in RTL)
+- ESC on a menu should close the currently focused menu. If focus is in a submenu and ESC is hit, it should only close the current submenu and return focus to the parent's element where focus was previously.
+- Space and Enter key execute the action that is currently focused in the menu.
+
+### MenuItem selection
+
+Below are the interactions that should be supported for all menu items that are required to handle a selection state.
+
+In the event that the selection method is a radio, the previous selected item must be unselected.
+
+| Type          | Action | Result | Details                                      |
+| ------------- | ------ | ------ | -------------------------------------------- |
+| Keyboard      | Space  | Toggle | Toggle the selection status of the menu item |
+| Keyboard      | Enter  | Toggle | Toggle the selection status of the menu item |
+| Mouse         | Click  | Toggle | Toggle the selection status of the menu item |
+| Accessibility | Toggle | Toggle | Toggle the selection status of the menu item |
+
+### Positioning
+
+#### Menu positioning
+
+The default positioning for the root `Menu` is below the trigger and aligned with the left (or right in RTL) edge.
+
+#### Submenu positioning
+
+The default positioning for a submenu is to the right of the menu item trigger (or left in RTL) and aligned with the top edge.
+
+## Accessibility
+
+The `MenuTrigger` will set `expand` or `collapsed` state and will respond to actions which explicitly tell it to expand or collapse (win32 only)
+The `MenuPopover` has its role set to `menu`, and `MenuItmes` and variants have their role set to `menuitem`.
+The `MenuItem` variants which track selection have the `Toggle` pattern available.

package/lib/MenuItem/useMenuItem.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { MenuItemProps, MenuItemState } from './MenuItem.types';
+export declare const triggerKeys: string[];
+export declare const submenuTriggerKeys: string[];
 export declare const useMenuItem: (props: MenuItemProps) => MenuItemState;
 export declare const useHoverFocusEffect: (hovered: boolean, componentRef: React.MutableRefObject<any>) => void;
 //# sourceMappingURL=useMenuItem.d.ts.map

package/lib/MenuItem/useMenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuItem.d.ts","sourceRoot":"","sources":["../../src/MenuItem/useMenuItem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAgBhE,eAAO,MAAM,WAAW,UAAW,aAAa,KAAG,aAkFlD,CAAC;AAUF,eAAO,MAAM,mBAAmB,YAAa,OAAO,gBAAgB,MAAM,gBAAgB,CAAC,GAAG,CAAC,SAQ9F,CAAC"}
+{"version":3,"file":"useMenuItem.d.ts","sourceRoot":"","sources":["../../src/MenuItem/useMenuItem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAahE,eAAO,MAAM,WAAW,UAAiB,CAAC;AAC1C,eAAO,MAAM,kBAAkB,UAA8C,CAAC;AAE9E,eAAO,MAAM,WAAW,UAAW,aAAa,KAAG,aAqElD,CAAC;AAUF,eAAO,MAAM,mBAAmB,YAAa,OAAO,gBAAgB,MAAM,gBAAgB,CAAC,GAAG,CAAC,SAQ9F,CAAC"}

package/lib/MenuItem/useMenuItem.js

@@ -6,50 +6,39 @@ import { isKeyPressEvent, useAsPressable, useKeyDownProps, useViewCommandFocus,
 import { useMenuContext } from '../context/menuContext';
 import { useMenuListContext } from '../context/menuListContext';
 import { useMenuTriggerContext } from '../context/menuTriggerContext';
-var triggerKeys = [' ', 'Enter'];
-var submenuTriggerKeys = __spreadArray(__spreadArray([], triggerKeys, true), ['ArrowLeft', 'ArrowRight'], false);
+export var triggerKeys = [' ', 'Enter'];
+export var submenuTriggerKeys = __spreadArray(__spreadArray([], triggerKeys, true), ['ArrowLeft', 'ArrowRight'], false);
 export var useMenuItem = function (props) {
     // attach the pressable state handlers
     var defaultComponentRef = React.useRef(null);
     var onClick = props.onClick, accessibilityState = props.accessibilityState, _a = props.componentRef, componentRef = _a === void 0 ? defaultComponentRef : _a, disabled = props.disabled, persistOnClick = props.persistOnClick, rest = __rest(props, ["onClick", "accessibilityState", "componentRef", "disabled", "persistOnClick"]);
+    var _b = useMenuContext(), isSubmenu = _b.isSubmenu, persistOnItemClick = _b.persistOnItemClick, setOpen = _b.setOpen;
+    var _c = useMenuListContext(), hasCheckmarks = _c.hasCheckmarks, onArrowClose = _c.onArrowClose;
     var isTrigger = useMenuTriggerContext();
-    var isSubmenu = useMenuContext().isSubmenu;
+    var shouldPersist = persistOnClick !== null && persistOnClick !== void 0 ? persistOnClick : persistOnItemClick;
     var hasSubmenu = isSubmenu && isTrigger;
-    var isInSubmenu = isSubmenu && !isTrigger;
-    var shouldPersist = useMenuContext().persistOnItemClick;
-    shouldPersist = persistOnClick !== null && persistOnClick !== void 0 ? persistOnClick : shouldPersist;
-    var setOpen = useMenuContext().setOpen;
     var onInvoke = React.useCallback(function (e) {
-        if (disabled) {
-            return;
-        }
         var isRtl = I18nManager.isRTL;
-        if (isKeyPressEvent(e) &&
-            hasSubmenu &&
-            ((isRtl && e.nativeEvent.key === 'ArrowRight') || (!isRtl && e.nativeEvent.key === 'ArrowLeft'))) {
-            return;
+        var isArrowKey = isKeyPressEvent(e) && (e.nativeEvent.key === 'ArrowLeft' || e.nativeEvent.key === 'ArrowRight');
+        var isArrowOpen = hasSubmenu &&
+            isKeyPressEvent(e) &&
+            ((isRtl && e.nativeEvent.key === 'ArrowLeft') || (!isRtl && e.nativeEvent.key === 'ArrowRight'));
+        if (!disabled && (!isArrowKey || isArrowOpen)) {
+            onClick === null || onClick === void 0 ? void 0 : onClick(e);
         }
-        if (isKeyPressEvent(e) &&
-            isInSubmenu &&
-            ((isRtl && e.nativeEvent.key === 'ArrowLeft') || (!isRtl && e.nativeEvent.key === 'ArrowRight'))) {
-            return;
+        if (!hasSubmenu && !isArrowKey && !shouldPersist) {
+            setOpen(e, false /*isOpen*/, false /*bubble*/);
         }
-        onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        if (!hasSubmenu) {
-            var isArrowClose = isKeyPressEvent(e) &&
-                isInSubmenu &&
-                ((isRtl && e.nativeEvent.key === 'ArrowRight') || (!isRtl && e.nativeEvent.key === 'ArrowLeft'));
-            if (isArrowClose || !shouldPersist) {
-                setOpen(e, false /*isOpen*/, !isArrowClose /*bubble*/);
-            }
+        var isArrowClose = isKeyPressEvent(e) && ((isRtl && e.nativeEvent.key === 'ArrowRight') || (!isRtl && e.nativeEvent.key === 'ArrowLeft'));
+        if (isArrowClose) {
+            onArrowClose === null || onArrowClose === void 0 ? void 0 : onArrowClose(e);
         }
-    }, [disabled, hasSubmenu, isInSubmenu, onClick, setOpen, shouldPersist]);
+    }, [disabled, hasSubmenu, onArrowClose, onClick, setOpen, shouldPersist]);
     var pressable = useAsPressable(__assign(__assign({}, rest), { disabled: disabled, onPress: onInvoke }));
     var itemRef = useViewCommandFocus(componentRef);
     var keys = isSubmenu ? submenuTriggerKeys : triggerKeys;
     // Explicitly override onKeyDown to override the native behavior of moving focus with arrow keys.
     var onKeyDownProps = useKeyDownProps.apply(void 0, __spreadArray([onInvoke], keys, false));
-    var hasCheckmarks = useMenuListContext().hasCheckmarks;
     useHoverFocusEffect(pressable.state.hovered, componentRef);
     return {
         props: __assign(__assign(__assign({}, pressable.props), { accessible: true, accessibilityRole: 'menuitem', onAccessibilityTap: props.onAccessibilityTap || onInvoke, accessibilityState: getAccessibilityState(disabled, accessibilityState), enableFocusRing: Platform.select({

package/lib/MenuItem/useMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuItem.js","sourceRoot":"","sources":["../../src/MenuItem/useMenuItem.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useMenuItem.js","sourceRoot":"","sources":["../../src/MenuItem/useMenuItem.ts"],"names":[],"mappings":"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"}

package/lib/MenuItemCheckbox/useMenuItemCheckbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuItemCheckbox.d.ts","sourceRoot":"","sources":["../../src/MenuItemCheckbox/useMenuItemCheckbox.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAExF,OAAO,EACL,gBAAgB,EAKjB,MAAM,0CAA0C,CAAC;AAMlD,eAAO,MAAM,mBAAmB,UAAW,qBAAqB,KAAG,qBAgBlE,CAAC;AAUF;;;;;;;GAOG;AACH,eAAO,MAAM,0BAA0B,UAC9B,qBAAqB,sBACR,gBAAgB,KAAK,IAAI,KAC5C,qBAmEF,CAAC"}
+{"version":3,"file":"useMenuItemCheckbox.d.ts","sourceRoot":"","sources":["../../src/MenuItemCheckbox/useMenuItemCheckbox.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAExF,OAAO,EACL,gBAAgB,EAMjB,MAAM,0CAA0C,CAAC;AAOlD,eAAO,MAAM,mBAAmB,UAAW,qBAAqB,KAAG,qBAgBlE,CAAC;AAUF;;;;;;;GAOG;AACH,eAAO,MAAM,0BAA0B,UAC9B,qBAAqB,sBACR,gBAAgB,KAAK,IAAI,KAC5C,qBA0FF,CAAC"}

package/lib/MenuItemCheckbox/useMenuItemCheckbox.js

@@ -1,10 +1,11 @@
 import { __assign, __rest, __spreadArray } from "tslib";
 import * as React from 'react';
-import { Platform } from 'react-native';
+import { I18nManager, Platform } from 'react-native';
 import { memoize } from '@fluentui-react-native/framework';
-import { useAsPressable, useKeyProps, useOnPressWithFocus, useViewCommandFocus, } from '@fluentui-react-native/interactive-hooks';
+import { useAsPressable, useKeyDownProps, useOnPressWithFocus, useViewCommandFocus, } from '@fluentui-react-native/interactive-hooks';
 import { useMenuListContext } from '../context/menuListContext';
-import { useHoverFocusEffect } from '../MenuItem/useMenuItem';
+import { submenuTriggerKeys, triggerKeys, useHoverFocusEffect } from '../MenuItem/useMenuItem';
+import { useMenuContext } from '../context/menuContext';
 var defaultAccessibilityActions = [{ name: 'Toggle' }];
 export var useMenuItemCheckbox = function (props) {
     var _a;
@@ -35,16 +36,29 @@ function getAccessibilityStateWorker(disabled, checked, accessibilityState) {
  * @returns Props and additional state needed to render the component
  */
 export var useMenuCheckboxInteraction = function (props, toggleCallback) {
-    var _a;
     var defaultComponentRef = React.useRef(null);
-    var accessibilityActions = props.accessibilityActions, accessibilityLabel = props.accessibilityLabel, accessibilityState = props.accessibilityState, _b = props.componentRef, componentRef = _b === void 0 ? defaultComponentRef : _b, disabled = props.disabled, name = props.name, onAccessibilityAction = props.onAccessibilityAction, rest = __rest(props, ["accessibilityActions", "accessibilityLabel", "accessibilityState", "componentRef", "disabled", "name", "onAccessibilityAction"]);
-    var context = useMenuListContext();
-    var checked = (_a = context.checked) === null || _a === void 0 ? void 0 : _a[name];
+    var accessibilityActions = props.accessibilityActions, accessibilityLabel = props.accessibilityLabel, accessibilityState = props.accessibilityState, _a = props.componentRef, componentRef = _a === void 0 ? defaultComponentRef : _a, disabled = props.disabled, name = props.name, onAccessibilityAction = props.onAccessibilityAction, rest = __rest(props, ["accessibilityActions", "accessibilityLabel", "accessibilityState", "componentRef", "disabled", "name", "onAccessibilityAction"]);
+    var isSubmenu = useMenuContext().isSubmenu;
+    var _b = useMenuListContext(), checked = _b.checked, onArrowClose = _b.onArrowClose;
+    var isChecked = checked === null || checked === void 0 ? void 0 : checked[name];
     // Ensure focus is placed on checkbox after click
     var toggleCheckedWithFocus = useOnPressWithFocus(componentRef, toggleCallback);
     var pressable = useAsPressable(__assign(__assign({}, rest), { disabled: disabled, onPress: toggleCheckedWithFocus }));
     var buttonRef = useViewCommandFocus(componentRef);
-    var onKeyProps = useKeyProps(toggleCallback, ' ', 'Enter');
+    var onKeysPressed = React.useCallback(function (e) {
+        var invokeKey = e.nativeEvent.key === ' ' || e.nativeEvent.key === 'Enter';
+        if (!disabled && invokeKey) {
+            toggleCallback(e);
+            return;
+        }
+        var isRtl = I18nManager.isRTL;
+        var isArrowClose = isSubmenu && ((isRtl && e.nativeEvent.key === 'ArrowRight') || (!isRtl && e.nativeEvent.key === 'ArrowLeft'));
+        if (isArrowClose) {
+            onArrowClose === null || onArrowClose === void 0 ? void 0 : onArrowClose(e);
+        }
+    }, [disabled, isSubmenu, onArrowClose, toggleCallback]);
+    var keys = isSubmenu ? submenuTriggerKeys : triggerKeys;
+    var onKeyProps = useKeyDownProps.apply(void 0, __spreadArray([onKeysPressed], keys, false));
     var accessibilityActionsProp = accessibilityActions
         ? __spreadArray(__spreadArray([], defaultAccessibilityActions, true), accessibilityActions, true) : defaultAccessibilityActions;
     var onAccessibilityActionProp = React.useCallback(function (event) {
@@ -56,7 +70,7 @@ export var useMenuCheckboxInteraction = function (props, toggleCallback) {
         }
     }, [disabled, toggleCallback, onAccessibilityAction]);
     useHoverFocusEffect(pressable.state.hovered, componentRef);
-    var state = __assign(__assign({}, pressable.state), { disabled: !!props.disabled, checked: checked });
+    var state = __assign(__assign({}, pressable.state), { disabled: !!props.disabled, checked: isChecked });
     return {
         props: __assign(__assign(__assign({}, pressable.props), { accessible: true, accessibilityActions: accessibilityActionsProp, accessibilityLabel: accessibilityLabel, accessibilityRole: 'menuitem', accessibilityState: getAccessibilityState(disabled, state.checked, accessibilityState), enableFocusRing: Platform.select({
                 macos: false,

package/lib/MenuItemCheckbox/useMenuItemCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuItemCheckbox.js","sourceRoot":"","sources":["../../src/MenuItemCheckbox/useMenuItemCheckbox.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useMenuItemCheckbox.js","sourceRoot":"","sources":["../../src/MenuItemCheckbox/useMenuItemCheckbox.ts"],"names":[],"mappings":"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"}

package/lib/MenuList/MenuList.types.d.ts

@@ -33,6 +33,7 @@ export interface MenuListState extends Omit<MenuListProps, 'checked' | 'onChecke
     props: MenuListProps;
     checked?: Record<string, boolean>;
     isCheckedControlled: boolean;
+    onArrowClose?: (e: InteractionEvent) => void;
     onCheckedChange?: (e: InteractionEvent, name: string, isChecked: boolean) => void;
     selectRadio?: (e: InteractionEvent, name: string) => void;
     addRadioItem: (name: string) => void;

package/lib/MenuList/MenuList.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuList.types.d.ts","sourceRoot":"","sources":["../../src/MenuList/MenuList.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACrF,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,YAAY,aAAa,CAAC;AAEvC,MAAM,WAAW,cAAe,SAAQ,YAAY,EAAE,sBAAsB;IAC1E;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC;IAChE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACpE;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,iBAAiB,CAAC;IACvF,KAAK,EAAE,aAAa,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAClF,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACzD;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;IACvB,SAAS,EAAE,iBAAiB,CAAC;CAC9B"}
+{"version":3,"file":"MenuList.types.d.ts","sourceRoot":"","sources":["../../src/MenuList/MenuList.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACrF,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,YAAY,aAAa,CAAC;AAEvC,MAAM,WAAW,cAAe,SAAQ,YAAY,EAAE,sBAAsB;IAC1E;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC;IAChE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACpE;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,iBAAiB,CAAC;IACvF,KAAK,EAAE,aAAa,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7C,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAClF,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACzD;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;IACvB,SAAS,EAAE,iBAAiB,CAAC;CAC9B"}

package/lib/MenuList/useMenuList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuList.d.ts","sourceRoot":"","sources":["../../src/MenuList/useMenuList.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAchE,eAAO,MAAM,WAAW,WAAY,aAAa,KAAG,aAyFnD,CAAC"}
+{"version":3,"file":"useMenuList.d.ts","sourceRoot":"","sources":["../../src/MenuList/useMenuList.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAchE,eAAO,MAAM,WAAW,WAAY,aAAa,KAAG,aA0GnD,CAAC"}