@fluentui-react-native/menu 1.14.41 → 1.15.0

package/lib/MenuItem/MenuItem.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from '@fluentui-react-native/framework-base/jsx-runtime';
 import { I18nManager, Image, Pressable, View } from 'react-native';
-import { compose, memoize, mergeProps, withSlots } from '@fluentui-react-native/framework';
+import { compose, memoize, mergeProps } from '@fluentui-react-native/framework';
 import { IconV1 as Icon } from '@fluentui-react-native/icon';
 import { TextV1 as Text } from '@fluentui-react-native/text';
 import { SvgXml } from 'react-native-svg';
@@ -7,62 +8,78 @@ import { stylingSettings } from './MenuItem.styling';
 import { menuItemName } from './MenuItem.types';
 import { useMenuItem } from './useMenuItem';
 export const MenuItem = compose({
-    displayName: menuItemName,
-    ...stylingSettings,
-    slots: {
-        root: Pressable,
-        checkmark: View,
-        content: Text,
-        iconPlaceholder: View,
-        imgIcon: Image,
-        fontOrSvgIcon: Icon,
-        submenuIndicator: SvgXml,
-    },
-    useRender: (userProps, useSlots) => {
-        const menuItem = useMenuItem(userProps);
-        const Slots = useSlots(userProps, (layer) => menuItem.state[layer] || userProps[layer]);
-        return (final, children) => {
-            const { accessibilityLabel, icon, tooltip, ...mergedProps } = mergeProps(menuItem.props, final);
-            const chevronXml = I18nManager.isRTL
-                ? `
+  displayName: menuItemName,
+  ...stylingSettings,
+  slots: {
+    root: Pressable,
+    checkmark: View,
+    content: Text,
+    iconPlaceholder: View,
+    imgIcon: Image,
+    fontOrSvgIcon: Icon,
+    submenuIndicator: SvgXml,
+  },
+  useRender: (userProps, useSlots) => {
+    const menuItem = useMenuItem(userProps);
+    const Slots = useSlots(userProps, (layer) => menuItem.state[layer] || userProps[layer]);
+    return (final, children) => {
+      const { accessibilityLabel, icon, tooltip, ...mergedProps } = mergeProps(menuItem.props, final);
+      const chevronXml = I18nManager.isRTL
+        ? `
           <svg>
           <path fill='currentColor' d="M10.2603 3.20041C10.5639 3.48226 10.5814 3.95681 10.2996 4.26034L6.77348 8L10.2996 11.7397C10.5814 12.0432 10.5639 12.5177 10.2603 12.7996C9.9568 13.0815 9.48226 13.0639 9.2004 12.7603L5.2004 8.51034C4.9332 8.22258 4.9332 7.77743 5.2004 7.48966L9.20041 3.23966C9.48226 2.93613 9.95681 2.91856 10.2603 3.20041Z"/>
           </svg>`
-                : `
+        : `
           <svg>
           <path fill='currentColor' d="M5.73966 3.20041C5.43613 3.48226 5.41856 3.95681 5.70041 4.26034L9.22652 8L5.70041 11.7397C5.41856 12.0432 5.43613 12.5177 5.73967 12.7996C6.0432 13.0815 6.51775 13.0639 6.7996 12.7603L10.7996 8.51034C11.0668 8.22258 11.0668 7.77743 10.7996 7.48966L6.7996 3.23966C6.51775 2.93613 6.0432 2.91856 5.73966 3.20041Z"/>
           </svg>`;
-            // We only automatically support the one child string.
-            const label = getAccessibilityLabel(accessibilityLabel, children[0]);
-            const tooltipResult = getTooltip(tooltip, menuItem.state.hasTooltips, children[0]);
-            return (withSlots(Slots.root, { ...mergedProps, accessibilityLabel: label },
-                menuItem.state.hasCheckmarks && withSlots(Slots.checkmark, { accessible: false }),
-                (icon || menuItem.state.hasIcons) && (withSlots(Slots.iconPlaceholder, { accessible: false },
-                    icon && icon.source && withSlots(Slots.imgIcon, { accessible: false, ...icon }),
-                    icon && (icon.svgSource || icon.fontSource) && withSlots(Slots.fontOrSvgIcon, { accessible: false, ...icon }))),
-                children && (withSlots(Slots.content, { accessible: false, tooltip: tooltipResult, ...(tooltipResult && { alwaysShowToolTip: true }) }, children)),
-                menuItem.state.hasSubmenu && withSlots(Slots.submenuIndicator, { accessible: false, xml: chevronXml })));
-        };
-    },
+      // We only automatically support the one child string.
+      const label = getAccessibilityLabel(accessibilityLabel, children[0]);
+      const tooltipResult = getTooltip(tooltip, menuItem.state.hasTooltips, children[0]);
+      return _jsxs(Slots.root, {
+        ...mergedProps,
+        accessibilityLabel: label,
+        children: [
+          menuItem.state.hasCheckmarks && _jsx(Slots.checkmark, { accessible: false }),
+          (icon || menuItem.state.hasIcons) &&
+            _jsxs(Slots.iconPlaceholder, {
+              accessible: false,
+              children: [
+                icon && icon.source && _jsx(Slots.imgIcon, { accessible: false, ...icon }),
+                icon && (icon.svgSource || icon.fontSource) && _jsx(Slots.fontOrSvgIcon, { accessible: false, ...icon }),
+              ],
+            }),
+          children &&
+            _jsx(Slots.content, {
+              accessible: false,
+              tooltip: tooltipResult,
+              ...(tooltipResult && { alwaysShowToolTip: true }),
+              children: children,
+            }),
+          menuItem.state.hasSubmenu && _jsx(Slots.submenuIndicator, { accessible: false, xml: chevronXml }),
+        ],
+      });
+    };
+  },
 });
 const getAccessibilityLabelWorker = (accessibilityLabel, child) => {
-    if (accessibilityLabel !== undefined) {
-        return accessibilityLabel;
-    }
-    if (typeof child === 'string') {
-        return child;
-    }
-    return undefined;
+  if (accessibilityLabel !== undefined) {
+    return accessibilityLabel;
+  }
+  if (typeof child === 'string') {
+    return child;
+  }
+  return undefined;
 };
 export const getAccessibilityLabel = memoize(getAccessibilityLabelWorker);
 const getTooltipWorker = (tooltip, hasTooltips, child) => {
-    if (tooltip !== undefined) {
-        return tooltip;
-    }
-    if (hasTooltips && typeof child === 'string') {
-        return child;
-    }
-    return undefined;
+  if (tooltip !== undefined) {
+    return tooltip;
+  }
+  if (hasTooltips && typeof child === 'string') {
+    return child;
+  }
+  return undefined;
 };
 export const getTooltip = memoize(getTooltipWorker);
-//# sourceMappingURL=MenuItem.js.map
+//# sourceMappingURL=MenuItem.js.map

package/lib/MenuItem/MenuItem.js.map

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

package/lib/MenuItem/MenuItem.styling.d.ts

@@ -2,4 +2,4 @@ import type { UseStylingOptions } from '@fluentui-react-native/framework';
 import type { MenuItemProps, MenuItemTokens, MenuItemSlotProps } from './MenuItem.types';
 export declare const menuItemStates: (keyof MenuItemTokens)[];
 export declare const stylingSettings: UseStylingOptions<MenuItemProps, MenuItemSlotProps, MenuItemTokens>;
-//# sourceMappingURL=MenuItem.styling.d.ts.map
+//# sourceMappingURL=MenuItem.styling.d.ts.map

package/lib/MenuItem/MenuItem.styling.js

@@ -5,56 +5,74 @@ import { menuItemName } from './MenuItem.types';
 import { defaultMenuItemTokens } from './MenuItemTokens';
 export const menuItemStates = ['hovered', 'focused', 'pressed', 'disabled'];
 export const stylingSettings = {
-    tokens: [defaultMenuItemTokens, menuItemName],
-    states: menuItemStates,
-    slotProps: {
-        root: buildProps((tokens, theme) => ({
-            style: {
-                alignItems: 'center',
-                backgroundColor: tokens.backgroundColor,
-                display: 'flex',
-                flexDirection: 'row',
-                ...layoutStyles.from(tokens, theme),
-                ...borderStyles.from(tokens, theme),
-            },
-        }), ['backgroundColor', ...borderStyles.keys, ...layoutStyles.keys]),
-        checkmark: buildProps((tokens) => ({
-            style: {
-                height: tokens.checkmarkSize,
-                width: tokens.checkmarkSize,
-                marginEnd: Platform.OS === 'android' ? tokens.marginEndForCheckedAndroid : tokens.gap,
-            },
-        }), ['checkmarkSize', 'gap']),
-        content: buildProps((tokens, theme) => {
-            return {
-                color: tokens.color,
-                style: {
-                    flexGrow: 1,
-                    ...fontStyles.from(tokens, theme),
-                },
-            };
-        }, ['color', ...fontStyles.keys]),
-        iconPlaceholder: buildProps((tokens) => ({
-            style: {
-                minHeight: tokens.iconSize,
-                minWidth: tokens.iconSize,
-                alignItems: 'center',
-                justifyContent: 'center',
-                marginEnd: tokens.gap,
-            },
-        }), ['checkmarkSize', 'gap']),
-        imgIcon: buildProps((tokens) => ({
-            style: { tintColor: tokens.iconColor, height: tokens.iconSize, width: tokens.iconSize },
-        }), ['gap', 'iconColor', 'iconSize']),
-        fontOrSvgIcon: buildProps((tokens) => ({ color: tokens.iconColor, size: tokens.iconSize }), ['gap', 'iconColor', 'iconSize']),
-        submenuIndicator: buildProps((tokens) => {
-            return {
-                color: tokens.submenuIndicatorColor,
-                height: tokens.submenuIndicatorSize,
-                width: tokens.submenuIndicatorSize,
-                viewBox: `0 0 ${tokens.submenuIndicatorSize} ${tokens.submenuIndicatorSize}`,
-            };
-        }, ['submenuIndicatorColor', 'submenuIndicatorPadding', 'submenuIndicatorSize']),
-    },
+  tokens: [defaultMenuItemTokens, menuItemName],
+  states: menuItemStates,
+  slotProps: {
+    root: buildProps(
+      (tokens, theme) => ({
+        style: {
+          alignItems: 'center',
+          backgroundColor: tokens.backgroundColor,
+          display: 'flex',
+          flexDirection: 'row',
+          ...layoutStyles.from(tokens, theme),
+          ...borderStyles.from(tokens, theme),
+        },
+      }),
+      ['backgroundColor', ...borderStyles.keys, ...layoutStyles.keys],
+    ),
+    checkmark: buildProps(
+      (tokens) => ({
+        style: {
+          height: tokens.checkmarkSize,
+          width: tokens.checkmarkSize,
+          marginEnd: Platform.OS === 'android' ? tokens.marginEndForCheckedAndroid : tokens.gap,
+        },
+      }),
+      ['checkmarkSize', 'gap'],
+    ),
+    content: buildProps(
+      (tokens, theme) => {
+        return {
+          color: tokens.color,
+          style: {
+            flexGrow: 1,
+            ...fontStyles.from(tokens, theme),
+          },
+        };
+      },
+      ['color', ...fontStyles.keys],
+    ),
+    iconPlaceholder: buildProps(
+      (tokens) => ({
+        style: {
+          minHeight: tokens.iconSize,
+          minWidth: tokens.iconSize,
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginEnd: tokens.gap,
+        },
+      }),
+      ['checkmarkSize', 'gap'],
+    ),
+    imgIcon: buildProps(
+      (tokens) => ({
+        style: { tintColor: tokens.iconColor, height: tokens.iconSize, width: tokens.iconSize },
+      }),
+      ['gap', 'iconColor', 'iconSize'],
+    ),
+    fontOrSvgIcon: buildProps((tokens) => ({ color: tokens.iconColor, size: tokens.iconSize }), ['gap', 'iconColor', 'iconSize']),
+    submenuIndicator: buildProps(
+      (tokens) => {
+        return {
+          color: tokens.submenuIndicatorColor,
+          height: tokens.submenuIndicatorSize,
+          width: tokens.submenuIndicatorSize,
+          viewBox: `0 0 ${tokens.submenuIndicatorSize} ${tokens.submenuIndicatorSize}`,
+        };
+      },
+      ['submenuIndicatorColor', 'submenuIndicatorPadding', 'submenuIndicatorSize'],
+    ),
+  },
 };
-//# sourceMappingURL=MenuItem.styling.js.map
+//# sourceMappingURL=MenuItem.styling.js.map

package/lib/MenuItem/MenuItem.styling.js.map

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

package/lib/MenuItem/MenuItem.types.d.ts

@@ -6,98 +6,98 @@ import type { IFocusable, InteractionEvent, PressablePropsExtended, PressableSta
 import type { TextProps } from '@fluentui-react-native/text';
 import type { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/tokens';
 import type { XmlProps } from 'react-native-svg';
-export declare const menuItemName = "MenuItem";
+export declare const menuItemName = 'MenuItem';
 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;
-    /**
-     * Space between parts of the item control in pixels
-     */
-    gap?: number;
-    /**
-     * Color of the icon
-     */
-    iconColor?: ColorValue;
-    /**
-     * Size of the icon. Pixels for SVG and points for font icon.
-     */
-    iconSize?: number;
-    /**
-     * Amount of space in pixels at the end of the item control that is reserved to align the item's text with other items which have checkmarks
-     * @platform android
-     */
-    marginEndForCheckedAndroid?: number;
-    /**
-     * Color of the indicator that shows that an item has a submenu
-     */
-    submenuIndicatorColor?: ColorValue;
-    /**
-     * 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;
-    /**
-     * States of the item control
-     */
-    disabled?: MenuItemTokens;
-    focused?: MenuItemTokens;
-    hovered?: MenuItemTokens;
-    pressed?: MenuItemTokens;
+  /**
+   * 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;
+  /**
+   * Space between parts of the item control in pixels
+   */
+  gap?: number;
+  /**
+   * Color of the icon
+   */
+  iconColor?: ColorValue;
+  /**
+   * Size of the icon. Pixels for SVG and points for font icon.
+   */
+  iconSize?: number;
+  /**
+   * Amount of space in pixels at the end of the item control that is reserved to align the item's text with other items which have checkmarks
+   * @platform android
+   */
+  marginEndForCheckedAndroid?: number;
+  /**
+   * Color of the indicator that shows that an item has a submenu
+   */
+  submenuIndicatorColor?: ColorValue;
+  /**
+   * 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;
+  /**
+   * States of the item control
+   */
+  disabled?: MenuItemTokens;
+  focused?: MenuItemTokens;
+  hovered?: MenuItemTokens;
+  pressed?: MenuItemTokens;
 }
 export interface MenuItemProps extends Omit<PressablePropsExtended, 'onPress'> {
-    /**
-     * A RefObject to access the IButton interface. Use this to access the public methods and properties of the component.
-     */
-    componentRef?: React.RefObject<IFocusable>;
-    icon?: IconProps | ImageProps;
-    /**
-     * 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;
+  /**
+   * A RefObject to access the IButton interface. Use this to access the public methods and properties of the component.
+   */
+  componentRef?: React.RefObject<IFocusable>;
+  icon?: IconProps | ImageProps;
+  /**
+   * 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;
 }
 export interface MenuItemState extends PressableState {
-    /**
-     * Whether Menu has other items that are checkbox or radio.
-     */
-    hasCheckmarks?: boolean;
-    /**
-     * Whether Menu has items with icons.
-     */
-    hasIcons?: boolean;
-    /**
-     * If the menu item is a trigger for a submenu
-     */
-    hasSubmenu?: boolean;
-    /**
-     * States that menu items all have tooltips with its text by default.
-     */
-    hasTooltips?: boolean;
+  /**
+   * Whether Menu has other items that are checkbox or radio.
+   */
+  hasCheckmarks?: boolean;
+  /**
+   * Whether Menu has items with icons.
+   */
+  hasIcons?: boolean;
+  /**
+   * If the menu item is a trigger for a submenu
+   */
+  hasSubmenu?: boolean;
+  /**
+   * States that menu items all have tooltips with its text by default.
+   */
+  hasTooltips?: boolean;
 }
 export interface MenuItemInfo {
-    props: MenuItemProps & React.ComponentPropsWithRef<any>;
-    state: MenuItemState;
+  props: MenuItemProps & React.ComponentPropsWithRef<any>;
+  state: MenuItemState;
 }
 export interface MenuItemSlotProps {
-    root: React.PropsWithRef<PressablePropsExtended>;
-    content?: TextProps;
-    checkmark?: React.PropsWithRef<IViewProps>;
-    iconPlaceholder?: React.PropsWithRef<IViewProps>;
-    imgIcon?: ImageProps;
-    fontOrSvgIcon?: IconProps;
-    submenuIndicator?: XmlProps;
+  root: React.PropsWithRef<PressablePropsExtended>;
+  content?: TextProps;
+  checkmark?: React.PropsWithRef<IViewProps>;
+  iconPlaceholder?: React.PropsWithRef<IViewProps>;
+  imgIcon?: ImageProps;
+  fontOrSvgIcon?: IconProps;
+  submenuIndicator?: XmlProps;
 }
 export interface MenuItemType {
-    props: MenuItemProps;
-    tokens: MenuItemTokens;
-    slotProps: MenuItemSlotProps;
+  props: MenuItemProps;
+  tokens: MenuItemTokens;
+  slotProps: MenuItemSlotProps;
 }
-//# sourceMappingURL=MenuItem.types.d.ts.map
+//# sourceMappingURL=MenuItem.types.d.ts.map

package/lib/MenuItem/MenuItem.types.js

@@ -1,2 +1,2 @@
 export const menuItemName = 'MenuItem';
-//# sourceMappingURL=MenuItem.types.js.map
+//# sourceMappingURL=MenuItem.types.js.map

package/lib/MenuItem/MenuItemTokens.android.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.android.d.ts.map
+//# sourceMappingURL=MenuItemTokens.android.d.ts.map

package/lib/MenuItem/MenuItemTokens.android.js

@@ -1,20 +1,20 @@
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
 export const defaultMenuItemTokens = (t) => ({
-    color: t.colors.neutralForeground1,
-    variant: 'body1',
-    paddingHorizontal: globalTokens.size160,
-    paddingVertical: globalTokens.size60,
-    iconColor: t.colors.neutralForeground3,
-    iconSize: globalTokens.size240,
-    marginEndForCheckedAndroid: globalTokens.size360,
-    pressed: {
-        backgroundColor: t.colors.neutralBackground1Pressed,
-    },
-    disabled: {
-        backgroundColor: t.colors.neutralBackground1,
-        color: t.colors.neutralForegroundDisabled1,
-        iconColor: t.colors.disabledText,
-    },
-    gap: globalTokens.size160,
+  color: t.colors.neutralForeground1,
+  variant: 'body1',
+  paddingHorizontal: globalTokens.size160,
+  paddingVertical: globalTokens.size60,
+  iconColor: t.colors.neutralForeground3,
+  iconSize: globalTokens.size240,
+  marginEndForCheckedAndroid: globalTokens.size360,
+  pressed: {
+    backgroundColor: t.colors.neutralBackground1Pressed,
+  },
+  disabled: {
+    backgroundColor: t.colors.neutralBackground1,
+    color: t.colors.neutralForegroundDisabled1,
+    iconColor: t.colors.disabledText,
+  },
+  gap: globalTokens.size160,
 });
-//# sourceMappingURL=MenuItemTokens.android.js.map
+//# sourceMappingURL=MenuItemTokens.android.js.map

package/lib/MenuItem/MenuItemTokens.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.d.ts.map
+//# sourceMappingURL=MenuItemTokens.d.ts.map

package/lib/MenuItem/MenuItemTokens.js

@@ -1,39 +1,39 @@
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
 export const defaultMenuItemTokens = (t) => ({
+  backgroundColor: t.colors.neutralBackground1,
+  borderRadius: globalTokens.corner.radius40,
+  checkmarkSize: 16,
+  color: t.colors.neutralForeground2,
+  fontFamily: t.typography.families.primary,
+  fontSize: globalTokens.font.size300,
+  fontWeight: globalTokens.font.weight.regular,
+  gap: globalTokens.size40,
+  iconColor: t.colors.neutralForeground2,
+  iconSize: 16,
+  minHeight: 32,
+  minWidth: 128,
+  maxWidth: 300,
+  padding: globalTokens.size60,
+  submenuIndicatorColor: t.colors.neutralForeground2,
+  submenuIndicatorPadding: globalTokens.sizeNone,
+  submenuIndicatorSize: 16,
+  hovered: {
+    backgroundColor: t.colors.neutralBackground1Hover,
+    color: t.colors.neutralForeground2Hover,
+    iconColor: t.colors.neutralForeground2Hover,
+    submenuIndicatorColor: t.colors.neutralForeground2Hover,
+  },
+  pressed: {
+    backgroundColor: t.colors.neutralBackground1Pressed,
+    color: t.colors.neutralForeground2Pressed,
+    iconColor: t.colors.neutralForeground2Pressed,
+    submenuIndicatorColor: t.colors.neutralForeground2Pressed,
+  },
+  disabled: {
     backgroundColor: t.colors.neutralBackground1,
-    borderRadius: globalTokens.corner.radius40,
-    checkmarkSize: 16,
-    color: t.colors.neutralForeground2,
-    fontFamily: t.typography.families.primary,
-    fontSize: globalTokens.font.size300,
-    fontWeight: globalTokens.font.weight.regular,
-    gap: globalTokens.size40,
-    iconColor: t.colors.neutralForeground2,
-    iconSize: 16,
-    minHeight: 32,
-    minWidth: 128,
-    maxWidth: 300,
-    padding: globalTokens.size60,
-    submenuIndicatorColor: t.colors.neutralForeground2,
-    submenuIndicatorPadding: globalTokens.sizeNone,
-    submenuIndicatorSize: 16,
-    hovered: {
-        backgroundColor: t.colors.neutralBackground1Hover,
-        color: t.colors.neutralForeground2Hover,
-        iconColor: t.colors.neutralForeground2Hover,
-        submenuIndicatorColor: t.colors.neutralForeground2Hover,
-    },
-    pressed: {
-        backgroundColor: t.colors.neutralBackground1Pressed,
-        color: t.colors.neutralForeground2Pressed,
-        iconColor: t.colors.neutralForeground2Pressed,
-        submenuIndicatorColor: t.colors.neutralForeground2Pressed,
-    },
-    disabled: {
-        backgroundColor: t.colors.neutralBackground1,
-        color: t.colors.neutralForegroundDisabled,
-        iconColor: t.colors.neutralForegroundDisabled,
-        submenuIndicatorColor: t.colors.neutralForegroundDisabled,
-    },
+    color: t.colors.neutralForegroundDisabled,
+    iconColor: t.colors.neutralForegroundDisabled,
+    submenuIndicatorColor: t.colors.neutralForegroundDisabled,
+  },
 });
-//# sourceMappingURL=MenuItemTokens.js.map
+//# sourceMappingURL=MenuItemTokens.js.map

package/lib/MenuItem/MenuItemTokens.macos.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.macos.d.ts.map
+//# sourceMappingURL=MenuItemTokens.macos.d.ts.map