@fluentui-react-native/menu 1.15.0 → 1.15.1

package/lib-commonjs/MenuItem/MenuItemTokens.macos.js

@@ -1,41 +1,41 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.defaultMenuItemTokens = void 0;
-const theme_tokens_1 = require('@fluentui-react-native/theme-tokens');
+const theme_tokens_1 = require("@fluentui-react-native/theme-tokens");
 const defaultMenuItemTokens = (t) => ({
-  backgroundColor: t.colors.transparentBackground,
-  borderRadius: 5, // hardcoded for now to match NSMenu
-  checkmarkSize: 16,
-  color: t.colors.neutralForeground1,
-  fontFamily: t.typography.families.primary,
-  fontSize: 13, // aligning with NSMenu font size
-  fontWeight: theme_tokens_1.globalTokens.font.weight.regular,
-  gap: theme_tokens_1.globalTokens.size40,
-  iconColor: t.colors.neutralForeground1,
-  iconSize: 16,
-  paddingHorizontal: 5, // hardcoded for now to match NSMenu
-  paddingVertical: 3, // hardcoded for now to match NSMenu
-  submenuIndicatorColor: t.colors.neutralForeground1,
-  submenuIndicatorPadding: theme_tokens_1.globalTokens.sizeNone,
-  submenuIndicatorSize: 16,
-  focused: {
-    backgroundColor: t.colors.menuItemBackgroundHovered,
-    color: t.colors.menuItemTextHovered,
-    iconColor: t.colors.menuItemTextHovered,
-    submenuIndicatorColor: t.colors.menuItemTextHovered,
-  },
-  pressed: {
-    backgroundColor: t.colors.menuItemBackgroundPressed,
-    color: t.colors.menuItemTextHovered,
-    iconColor: t.colors.menuItemTextHovered,
-    submenuIndicatorColor: t.colors.menuItemTextHovered,
-  },
-  disabled: {
-    backgroundColor: t.colors.menuBackground,
-    color: t.colors.disabledText,
-    iconColor: t.colors.disabledText,
-    submenuIndicatorColor: t.colors.disabledText,
-  },
+    backgroundColor: t.colors.transparentBackground,
+    borderRadius: 5, // hardcoded for now to match NSMenu
+    checkmarkSize: 16,
+    color: t.colors.neutralForeground1,
+    fontFamily: t.typography.families.primary,
+    fontSize: 13, // aligning with NSMenu font size
+    fontWeight: theme_tokens_1.globalTokens.font.weight.regular,
+    gap: theme_tokens_1.globalTokens.size40,
+    iconColor: t.colors.neutralForeground1,
+    iconSize: 16,
+    paddingHorizontal: 5, // hardcoded for now to match NSMenu
+    paddingVertical: 3, // hardcoded for now to match NSMenu
+    submenuIndicatorColor: t.colors.neutralForeground1,
+    submenuIndicatorPadding: theme_tokens_1.globalTokens.sizeNone,
+    submenuIndicatorSize: 16,
+    focused: {
+        backgroundColor: t.colors.menuItemBackgroundHovered,
+        color: t.colors.menuItemTextHovered,
+        iconColor: t.colors.menuItemTextHovered,
+        submenuIndicatorColor: t.colors.menuItemTextHovered,
+    },
+    pressed: {
+        backgroundColor: t.colors.menuItemBackgroundPressed,
+        color: t.colors.menuItemTextHovered,
+        iconColor: t.colors.menuItemTextHovered,
+        submenuIndicatorColor: t.colors.menuItemTextHovered,
+    },
+    disabled: {
+        backgroundColor: t.colors.menuBackground,
+        color: t.colors.disabledText,
+        iconColor: t.colors.disabledText,
+        submenuIndicatorColor: t.colors.disabledText,
+    },
 });
 exports.defaultMenuItemTokens = defaultMenuItemTokens;
-//# sourceMappingURL=MenuItemTokens.macos.js.map
+//# sourceMappingURL=MenuItemTokens.macos.js.map

package/lib-commonjs/MenuItem/MenuItemTokens.win32.d.ts

@@ -2,4 +2,4 @@ import type { Theme } from '@fluentui-react-native/framework';
 import type { TokenSettings } from '@fluentui-react-native/use-styling';
 import type { MenuItemTokens } from './MenuItem.types';
 export declare const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme>;
-//# sourceMappingURL=MenuItemTokens.win32.d.ts.map
+//# sourceMappingURL=MenuItemTokens.win32.d.ts.map

package/lib-commonjs/MenuItem/MenuItemTokens.win32.js

@@ -1,44 +1,44 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.defaultMenuItemTokens = void 0;
-const theme_tokens_1 = require('@fluentui-react-native/theme-tokens');
+const theme_tokens_1 = require("@fluentui-react-native/theme-tokens");
 const defaultMenuItemTokens = (t) => ({
-  backgroundColor: t.colors.neutralBackground1,
-  borderRadius: theme_tokens_1.globalTokens.corner.radiusNone,
-  checkmarkSize: 16,
-  color: t.colors.neutralForeground1,
-  fontFamily: t.typography.families.primary,
-  fontSize: theme_tokens_1.globalTokens.font.size200,
-  fontWeight: theme_tokens_1.globalTokens.font.weight.regular,
-  gap: theme_tokens_1.globalTokens.size40,
-  iconColor: t.colors.neutralForeground1,
-  iconSize: 16,
-  minHeight: 24,
-  minWidth: 128,
-  maxWidth: 300,
-  padding: theme_tokens_1.globalTokens.size40,
-  paddingHorizontal: theme_tokens_1.globalTokens.size80,
-  submenuIndicatorColor: t.colors.neutralForeground1,
-  submenuIndicatorPadding: theme_tokens_1.globalTokens.size20,
-  submenuIndicatorSize: 16,
-  pressed: {
-    backgroundColor: t.colors.neutralBackground1Pressed,
-    color: t.colors.neutralForeground1Pressed,
-    iconColor: t.colors.neutralForeground1Pressed,
-    submenuIndicatorColor: t.colors.neutralForeground1Pressed,
-  },
-  disabled: {
     backgroundColor: t.colors.neutralBackground1,
-    color: t.colors.neutralForegroundDisabled,
-    iconColor: t.colors.neutralForegroundDisabled,
-    submenuIndicatorColor: t.colors.neutralForegroundDisabled,
-  },
-  focused: {
-    backgroundColor: t.colors.neutralBackground1Hover,
-    color: t.colors.neutralForeground1Hover,
-    iconColor: t.colors.neutralForeground1Hover,
-    submenuIndicatorColor: t.colors.neutralForeground1Hover,
-  },
+    borderRadius: theme_tokens_1.globalTokens.corner.radiusNone,
+    checkmarkSize: 16,
+    color: t.colors.neutralForeground1,
+    fontFamily: t.typography.families.primary,
+    fontSize: theme_tokens_1.globalTokens.font.size200,
+    fontWeight: theme_tokens_1.globalTokens.font.weight.regular,
+    gap: theme_tokens_1.globalTokens.size40,
+    iconColor: t.colors.neutralForeground1,
+    iconSize: 16,
+    minHeight: 24,
+    minWidth: 128,
+    maxWidth: 300,
+    padding: theme_tokens_1.globalTokens.size40,
+    paddingHorizontal: theme_tokens_1.globalTokens.size80,
+    submenuIndicatorColor: t.colors.neutralForeground1,
+    submenuIndicatorPadding: theme_tokens_1.globalTokens.size20,
+    submenuIndicatorSize: 16,
+    pressed: {
+        backgroundColor: t.colors.neutralBackground1Pressed,
+        color: t.colors.neutralForeground1Pressed,
+        iconColor: t.colors.neutralForeground1Pressed,
+        submenuIndicatorColor: t.colors.neutralForeground1Pressed,
+    },
+    disabled: {
+        backgroundColor: t.colors.neutralBackground1,
+        color: t.colors.neutralForegroundDisabled,
+        iconColor: t.colors.neutralForegroundDisabled,
+        submenuIndicatorColor: t.colors.neutralForegroundDisabled,
+    },
+    focused: {
+        backgroundColor: t.colors.neutralBackground1Hover,
+        color: t.colors.neutralForeground1Hover,
+        iconColor: t.colors.neutralForeground1Hover,
+        submenuIndicatorColor: t.colors.neutralForeground1Hover,
+    },
 });
 exports.defaultMenuItemTokens = defaultMenuItemTokens;
-//# sourceMappingURL=MenuItemTokens.win32.js.map
+//# sourceMappingURL=MenuItemTokens.win32.js.map

package/lib-commonjs/MenuItem/index.d.ts

@@ -2,4 +2,4 @@ export { MenuItem } from './MenuItem';
 export { menuItemName } from './MenuItem.types';
 export type { MenuItemProps, MenuItemState, MenuItemInfo, MenuItemTokens, MenuItemSlotProps, MenuItemType } from './MenuItem.types';
 export { useMenuItem } from './useMenuItem';
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/lib-commonjs/MenuItem/index.js

@@ -1,25 +1,10 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMenuItem = exports.menuItemName = exports.MenuItem = void 0;
-const MenuItem_1 = require('./MenuItem');
-Object.defineProperty(exports, 'MenuItem', {
-  enumerable: true,
-  get: function () {
-    return MenuItem_1.MenuItem;
-  },
-});
-const MenuItem_types_1 = require('./MenuItem.types');
-Object.defineProperty(exports, 'menuItemName', {
-  enumerable: true,
-  get: function () {
-    return MenuItem_types_1.menuItemName;
-  },
-});
-const useMenuItem_1 = require('./useMenuItem');
-Object.defineProperty(exports, 'useMenuItem', {
-  enumerable: true,
-  get: function () {
-    return useMenuItem_1.useMenuItem;
-  },
-});
-//# sourceMappingURL=index.js.map
+const MenuItem_1 = require("./MenuItem");
+Object.defineProperty(exports, "MenuItem", { enumerable: true, get: function () { return MenuItem_1.MenuItem; } });
+const MenuItem_types_1 = require("./MenuItem.types");
+Object.defineProperty(exports, "menuItemName", { enumerable: true, get: function () { return MenuItem_types_1.menuItemName; } });
+const useMenuItem_1 = require("./useMenuItem");
+Object.defineProperty(exports, "useMenuItem", { enumerable: true, get: function () { return useMenuItem_1.useMenuItem; } });
+//# sourceMappingURL=index.js.map

package/lib-commonjs/MenuItem/useMenuItem.d.ts

@@ -4,4 +4,4 @@ export declare const triggerKeys: string[];
 export declare const submenuTriggerKeys: string[];
 export declare const useMenuItem: (props: MenuItemProps) => MenuItemInfo;
 export declare const useHoverFocusEffect: (hovered: boolean, componentRef: React.MutableRefObject<any>) => void;
-//# sourceMappingURL=useMenuItem.d.ts.map
+//# sourceMappingURL=useMenuItem.d.ts.map

package/lib-commonjs/MenuItem/useMenuItem.js

@@ -1,185 +1,156 @@
-'use strict';
-var __createBinding =
-  (this && this.__createBinding) ||
-  (Object.create
-    ? function (o, m, k, k2) {
-        if (k2 === undefined) k2 = k;
-        var desc = Object.getOwnPropertyDescriptor(m, k);
-        if (!desc || ('get' in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-          desc = {
-            enumerable: true,
-            get: function () {
-              return m[k];
-            },
-          };
-        }
-        Object.defineProperty(o, k2, desc);
-      }
-    : function (o, m, k, k2) {
-        if (k2 === undefined) k2 = k;
-        o[k2] = m[k];
-      });
-var __setModuleDefault =
-  (this && this.__setModuleDefault) ||
-  (Object.create
-    ? function (o, v) {
-        Object.defineProperty(o, 'default', { enumerable: true, value: v });
-      }
-    : function (o, v) {
-        o['default'] = v;
-      });
-var __importStar =
-  (this && this.__importStar) ||
-  (function () {
-    var ownKeys = function (o) {
-      ownKeys =
-        Object.getOwnPropertyNames ||
-        function (o) {
-          var ar = [];
-          for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-          return ar;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
         };
-      return ownKeys(o);
+        return ownKeys(o);
     };
     return function (mod) {
-      if (mod && mod.__esModule) return mod;
-      var result = {};
-      if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== 'default') __createBinding(result, mod, k[i]);
-      __setModuleDefault(result, mod);
-      return result;
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
     };
-  })();
-Object.defineProperty(exports, '__esModule', { value: true });
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.useHoverFocusEffect = exports.useMenuItem = exports.submenuTriggerKeys = exports.triggerKeys = void 0;
-const React = __importStar(require('react'));
-const react_native_1 = require('react-native');
-const framework_1 = require('@fluentui-react-native/framework');
-const interactive_hooks_1 = require('@fluentui-react-native/interactive-hooks');
-const menuContext_1 = require('../context/menuContext');
-const menuListContext_1 = require('../context/menuListContext');
-const menuTriggerContext_1 = require('../context/menuTriggerContext');
-const useMenuList_1 = require('../MenuList/useMenuList');
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const framework_1 = require("@fluentui-react-native/framework");
+const interactive_hooks_1 = require("@fluentui-react-native/interactive-hooks");
+const menuContext_1 = require("../context/menuContext");
+const menuListContext_1 = require("../context/menuListContext");
+const menuTriggerContext_1 = require("../context/menuTriggerContext");
+const useMenuList_1 = require("../MenuList/useMenuList");
 exports.triggerKeys = [' ', 'Enter'];
 exports.submenuTriggerKeys = ['ArrowLeft', 'ArrowRight', ...exports.triggerKeys];
 const useMenuItem = (props) => {
-  // attach the pressable state handlers
-  const defaultComponentRef = React.useRef(null);
-  const { accessible, onClick, accessibilityState, componentRef = defaultComponentRef, disabled = false, persistOnClick, ...rest } = props;
-  const { isSubmenu, persistOnItemClick, setOpen } = (0, menuContext_1.useMenuContext)();
-  const { hasCheckmarks, hasIcons, hasTooltips, onArrowClose } = (0, menuListContext_1.useMenuListContext)();
-  const isTrigger = (0, menuTriggerContext_1.useMenuTriggerContext)();
-  const shouldPersist = persistOnClick ?? persistOnItemClick;
-  const hasSubmenu = isSubmenu && isTrigger;
-  const onInvoke = React.useCallback(
-    (e) => {
-      const isRtl = react_native_1.I18nManager.isRTL;
-      const isArrowKey =
-        (0, interactive_hooks_1.isKeyPressEvent)(e) && (e.nativeEvent.key === 'ArrowLeft' || e.nativeEvent.key === 'ArrowRight');
-      const isArrowOpen =
-        hasSubmenu &&
-        (0, interactive_hooks_1.isKeyPressEvent)(e) &&
-        ((isRtl && e.nativeEvent.key === 'ArrowLeft') || (!isRtl && e.nativeEvent.key === 'ArrowRight'));
-      if (!disabled && (!isArrowKey || isArrowOpen)) {
-        componentRef?.current?.blur();
-        onClick?.(e);
-        // For RN, ENTER / SPACE keypresses are handled by both the `onKey` event handlers and `onPress` handler. Because we
-        // pass this callback into both `onKeyDown` and `onPress` props, we need to mark the event as handled for ENTER / SPACE
-        // key presses so that we don't have duplicate `onClick` calls.
-        e.preventDefault();
-      }
-      if (!hasSubmenu && !isArrowKey && !shouldPersist) {
-        setOpen(e, false /*isOpen*/, true /*bubble*/);
-      }
-      const isArrowClose =
-        (0, interactive_hooks_1.isKeyPressEvent)(e) &&
-        ((isRtl && e.nativeEvent.key === 'ArrowRight') || (!isRtl && e.nativeEvent.key === 'ArrowLeft'));
-      if (isArrowClose) {
-        onArrowClose?.(e);
-      }
-    },
-    [componentRef, disabled, hasSubmenu, onArrowClose, onClick, setOpen, shouldPersist],
-  );
-  const pressable = (0, interactive_hooks_1.usePressableState)({ ...rest, onPress: onInvoke });
-  const itemRef = (0, interactive_hooks_1.useViewCommandFocus)(componentRef);
-  const keys = disabled ? [] : isSubmenu ? exports.submenuTriggerKeys : exports.triggerKeys;
-  // Explicitly override onKeyDown to override the native behavior of moving focus with arrow keys.
-  const onKeyDownProps = (0, interactive_hooks_1.useKeyDownProps)(onInvoke, ...keys);
-  (0, exports.useHoverFocusEffect)(pressable.state.hovered, componentRef);
-  const [enableFocusRing, setEnableFocusRing] = React.useState(!pressable.state.hovered);
-  const onHoverIn = React.useCallback(
-    (e) => {
-      pressable.props.onHoverIn(e);
-      // when it's a hover focus, set enableFocusRing explicitly to false
-      if (!pressable.state.focused) {
-        setEnableFocusRing(false);
-      }
-    },
-    [pressable],
-  );
-  const onFocus = React.useCallback(
-    (e) => {
-      pressable.props.onFocus(e);
-      // when it's not a hover focus, set enableFocusRing explicitly to true
-      if (!pressable.state.focused) {
-        setEnableFocusRing(true);
-      }
-    },
-    [pressable],
-  );
-  // Track the ref and disabled props on this menu item so the MenuList can handle Home and End keypresses.
-  (0, useMenuList_1.useMenuItemTracking)(componentRef, disabled);
-  return {
-    props: {
-      ...pressable.props,
-      onHoverIn: react_native_1.Platform.select({
-        macos: pressable.props.onHoverIn,
-        default: onHoverIn, // win32
-      }),
-      onFocus: react_native_1.Platform.select({
-        macos: pressable.props.onFocus,
-        default: onFocus, // win32
-      }),
-      accessible: accessible ?? true,
-      accessibilityRole: 'menuitem',
-      onAccessibilityTap: props.onAccessibilityTap || onInvoke,
-      accessibilityState: getAccessibilityState(disabled, accessibilityState),
-      disabled,
-      enableFocusRing: react_native_1.Platform.select({
-        macos: false,
-        default: enableFocusRing, // win32
-      }),
-      focusable: react_native_1.Platform.select({
-        macos: !disabled,
-        default: true, // win32
-      }),
-      ref: itemRef,
-      ...onKeyDownProps,
-    },
-    state: {
-      ...pressable.state,
-      hasSubmenu,
-      hasIcons,
-      hasCheckmarks,
-      hasTooltips,
-    },
-  };
+    // attach the pressable state handlers
+    const defaultComponentRef = React.useRef(null);
+    const { accessible, onClick, accessibilityState, componentRef = defaultComponentRef, disabled = false, persistOnClick, ...rest } = props;
+    const { isSubmenu, persistOnItemClick, setOpen } = (0, menuContext_1.useMenuContext)();
+    const { hasCheckmarks, hasIcons, hasTooltips, onArrowClose } = (0, menuListContext_1.useMenuListContext)();
+    const isTrigger = (0, menuTriggerContext_1.useMenuTriggerContext)();
+    const shouldPersist = persistOnClick ?? persistOnItemClick;
+    const hasSubmenu = isSubmenu && isTrigger;
+    const onInvoke = React.useCallback((e) => {
+        const isRtl = react_native_1.I18nManager.isRTL;
+        const isArrowKey = (0, interactive_hooks_1.isKeyPressEvent)(e) && (e.nativeEvent.key === 'ArrowLeft' || e.nativeEvent.key === 'ArrowRight');
+        const isArrowOpen = hasSubmenu &&
+            (0, interactive_hooks_1.isKeyPressEvent)(e) &&
+            ((isRtl && e.nativeEvent.key === 'ArrowLeft') || (!isRtl && e.nativeEvent.key === 'ArrowRight'));
+        if (!disabled && (!isArrowKey || isArrowOpen)) {
+            componentRef?.current?.blur();
+            onClick?.(e);
+            // For RN, ENTER / SPACE keypresses are handled by both the `onKey` event handlers and `onPress` handler. Because we
+            // pass this callback into both `onKeyDown` and `onPress` props, we need to mark the event as handled for ENTER / SPACE
+            // key presses so that we don't have duplicate `onClick` calls.
+            e.preventDefault();
+        }
+        if (!hasSubmenu && !isArrowKey && !shouldPersist) {
+            setOpen(e, false /*isOpen*/, true /*bubble*/);
+        }
+        const isArrowClose = (0, interactive_hooks_1.isKeyPressEvent)(e) && ((isRtl && e.nativeEvent.key === 'ArrowRight') || (!isRtl && e.nativeEvent.key === 'ArrowLeft'));
+        if (isArrowClose) {
+            onArrowClose?.(e);
+        }
+    }, [componentRef, disabled, hasSubmenu, onArrowClose, onClick, setOpen, shouldPersist]);
+    const pressable = (0, interactive_hooks_1.usePressableState)({ ...rest, onPress: onInvoke });
+    const itemRef = (0, interactive_hooks_1.useViewCommandFocus)(componentRef);
+    const keys = disabled ? [] : isSubmenu ? exports.submenuTriggerKeys : exports.triggerKeys;
+    // Explicitly override onKeyDown to override the native behavior of moving focus with arrow keys.
+    const onKeyDownProps = (0, interactive_hooks_1.useKeyDownProps)(onInvoke, ...keys);
+    (0, exports.useHoverFocusEffect)(pressable.state.hovered, componentRef);
+    const [enableFocusRing, setEnableFocusRing] = React.useState(!pressable.state.hovered);
+    const onHoverIn = React.useCallback((e) => {
+        pressable.props.onHoverIn(e);
+        // when it's a hover focus, set enableFocusRing explicitly to false
+        if (!pressable.state.focused) {
+            setEnableFocusRing(false);
+        }
+    }, [pressable]);
+    const onFocus = React.useCallback((e) => {
+        pressable.props.onFocus(e);
+        // when it's not a hover focus, set enableFocusRing explicitly to true
+        if (!pressable.state.focused) {
+            setEnableFocusRing(true);
+        }
+    }, [pressable]);
+    // Track the ref and disabled props on this menu item so the MenuList can handle Home and End keypresses.
+    (0, useMenuList_1.useMenuItemTracking)(componentRef, disabled);
+    return {
+        props: {
+            ...pressable.props,
+            onHoverIn: react_native_1.Platform.select({
+                macos: pressable.props.onHoverIn,
+                default: onHoverIn, // win32
+            }),
+            onFocus: react_native_1.Platform.select({
+                macos: pressable.props.onFocus,
+                default: onFocus, // win32
+            }),
+            accessible: accessible ?? true,
+            accessibilityRole: 'menuitem',
+            onAccessibilityTap: props.onAccessibilityTap || onInvoke,
+            accessibilityState: getAccessibilityState(disabled, accessibilityState),
+            disabled,
+            enableFocusRing: react_native_1.Platform.select({
+                macos: false,
+                default: enableFocusRing, // win32
+            }),
+            focusable: react_native_1.Platform.select({
+                macos: !disabled,
+                default: true, // win32
+            }),
+            ref: itemRef,
+            ...onKeyDownProps,
+        },
+        state: {
+            ...pressable.state,
+            hasSubmenu,
+            hasIcons,
+            hasCheckmarks,
+            hasTooltips,
+        },
+    };
 };
 exports.useMenuItem = useMenuItem;
 const getAccessibilityState = (0, framework_1.memoize)(getAccessibilityStateWorker);
 function getAccessibilityStateWorker(disabled, accessibilityState) {
-  if (accessibilityState) {
-    return { disabled, ...accessibilityState };
-  }
-  return { disabled };
+    if (accessibilityState) {
+        return { disabled, ...accessibilityState };
+    }
+    return { disabled };
 }
 const useHoverFocusEffect = (hovered, componentRef) => {
-  React.useLayoutEffect(() => {
-    if (hovered) {
-      componentRef?.current?.focus();
-    } else {
-      componentRef?.current?.blur();
-    }
-  }, [hovered, componentRef]);
+    React.useLayoutEffect(() => {
+        if (hovered) {
+            componentRef?.current?.focus();
+        }
+        else {
+            componentRef?.current?.blur();
+        }
+    }, [hovered, componentRef]);
 };
 exports.useHoverFocusEffect = useHoverFocusEffect;
-//# sourceMappingURL=useMenuItem.js.map
+//# sourceMappingURL=useMenuItem.js.map

package/lib-commonjs/MenuItemCheckbox/MenuItemCheckbox.d.ts

@@ -1,13 +1,5 @@
 import type { Slots, FinalRender } from '@fluentui-react-native/framework';
 import type { MenuItemCheckboxProps, MenuItemCheckboxSlotProps, MenuItemCheckboxInfo } from './MenuItemCheckbox.types';
-export declare const MenuItemCheckbox: import('@fluentui-react-native/framework').ComposableComponent<
-  MenuItemCheckboxProps,
-  MenuItemCheckboxSlotProps,
-  import('./MenuItemCheckbox.types').MenuItemCheckboxTokens,
-  import('@fluentui-react-native/framework').ObjectBase
->;
-export declare const menuItemFinalRender: (
-  menuItem: MenuItemCheckboxInfo,
-  Slots: Slots<MenuItemCheckboxSlotProps>,
-) => FinalRender<MenuItemCheckboxProps>;
-//# sourceMappingURL=MenuItemCheckbox.d.ts.map
+export declare const MenuItemCheckbox: import("@fluentui-react-native/framework").ComposableComponent<MenuItemCheckboxProps, MenuItemCheckboxSlotProps, import("./MenuItemCheckbox.types").MenuItemCheckboxTokens, import("@fluentui-react-native/framework").ObjectBase>;
+export declare const menuItemFinalRender: (menuItem: MenuItemCheckboxInfo, Slots: Slots<MenuItemCheckboxSlotProps>) => FinalRender<MenuItemCheckboxProps>;
+//# sourceMappingURL=MenuItemCheckbox.d.ts.map