@fluentui-react-native/menu 1.15.0 → 1.15.1

package/lib/MenuItem/useMenuItem.js

@@ -9,120 +9,110 @@ import { useMenuItemTracking } from '../MenuList/useMenuList';
 export const triggerKeys = [' ', 'Enter'];
 export const submenuTriggerKeys = ['ArrowLeft', 'ArrowRight', ...triggerKeys];
 export 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 } = useMenuContext();
-  const { hasCheckmarks, hasIcons, hasTooltips, onArrowClose } = useMenuListContext();
-  const isTrigger = useMenuTriggerContext();
-  const shouldPersist = persistOnClick ?? persistOnItemClick;
-  const hasSubmenu = isSubmenu && isTrigger;
-  const onInvoke = React.useCallback(
-    (e) => {
-      const isRtl = I18nManager.isRTL;
-      const isArrowKey = isKeyPressEvent(e) && (e.nativeEvent.key === 'ArrowLeft' || e.nativeEvent.key === 'ArrowRight');
-      const isArrowOpen =
-        hasSubmenu &&
-        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 =
-        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 = usePressableState({ ...rest, onPress: onInvoke });
-  const itemRef = useViewCommandFocus(componentRef);
-  const keys = disabled ? [] : isSubmenu ? submenuTriggerKeys : triggerKeys;
-  // Explicitly override onKeyDown to override the native behavior of moving focus with arrow keys.
-  const onKeyDownProps = useKeyDownProps(onInvoke, ...keys);
-  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.
-  useMenuItemTracking(componentRef, disabled);
-  return {
-    props: {
-      ...pressable.props,
-      onHoverIn: Platform.select({
-        macos: pressable.props.onHoverIn,
-        default: onHoverIn, // win32
-      }),
-      onFocus: Platform.select({
-        macos: pressable.props.onFocus,
-        default: onFocus, // win32
-      }),
-      accessible: accessible ?? true,
-      accessibilityRole: 'menuitem',
-      onAccessibilityTap: props.onAccessibilityTap || onInvoke,
-      accessibilityState: getAccessibilityState(disabled, accessibilityState),
-      disabled,
-      enableFocusRing: Platform.select({
-        macos: false,
-        default: enableFocusRing, // win32
-      }),
-      focusable: 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 } = useMenuContext();
+    const { hasCheckmarks, hasIcons, hasTooltips, onArrowClose } = useMenuListContext();
+    const isTrigger = useMenuTriggerContext();
+    const shouldPersist = persistOnClick ?? persistOnItemClick;
+    const hasSubmenu = isSubmenu && isTrigger;
+    const onInvoke = React.useCallback((e) => {
+        const isRtl = I18nManager.isRTL;
+        const isArrowKey = isKeyPressEvent(e) && (e.nativeEvent.key === 'ArrowLeft' || e.nativeEvent.key === 'ArrowRight');
+        const isArrowOpen = hasSubmenu &&
+            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 = 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 = usePressableState({ ...rest, onPress: onInvoke });
+    const itemRef = useViewCommandFocus(componentRef);
+    const keys = disabled ? [] : isSubmenu ? submenuTriggerKeys : triggerKeys;
+    // Explicitly override onKeyDown to override the native behavior of moving focus with arrow keys.
+    const onKeyDownProps = useKeyDownProps(onInvoke, ...keys);
+    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.
+    useMenuItemTracking(componentRef, disabled);
+    return {
+        props: {
+            ...pressable.props,
+            onHoverIn: Platform.select({
+                macos: pressable.props.onHoverIn,
+                default: onHoverIn, // win32
+            }),
+            onFocus: Platform.select({
+                macos: pressable.props.onFocus,
+                default: onFocus, // win32
+            }),
+            accessible: accessible ?? true,
+            accessibilityRole: 'menuitem',
+            onAccessibilityTap: props.onAccessibilityTap || onInvoke,
+            accessibilityState: getAccessibilityState(disabled, accessibilityState),
+            disabled,
+            enableFocusRing: Platform.select({
+                macos: false,
+                default: enableFocusRing, // win32
+            }),
+            focusable: Platform.select({
+                macos: !disabled,
+                default: true, // win32
+            }),
+            ref: itemRef,
+            ...onKeyDownProps,
+        },
+        state: {
+            ...pressable.state,
+            hasSubmenu,
+            hasIcons,
+            hasCheckmarks,
+            hasTooltips,
+        },
+    };
 };
 const getAccessibilityState = memoize(getAccessibilityStateWorker);
 function getAccessibilityStateWorker(disabled, accessibilityState) {
-  if (accessibilityState) {
-    return { disabled, ...accessibilityState };
-  }
-  return { disabled };
+    if (accessibilityState) {
+        return { disabled, ...accessibilityState };
+    }
+    return { disabled };
 }
 export 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]);
 };
-//# sourceMappingURL=useMenuItem.js.map
+//# sourceMappingURL=useMenuItem.js.map

package/lib/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-base').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-base").ObjectBase>;
+export declare const menuItemFinalRender: (menuItem: MenuItemCheckboxInfo, Slots: Slots<MenuItemCheckboxSlotProps>) => FinalRender<MenuItemCheckboxProps>;
+//# sourceMappingURL=MenuItemCheckbox.d.ts.map

package/lib/MenuItemCheckbox/MenuItemCheckbox.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from '@fluentui-react-native/framework-base/jsx-runtime';
+import { jsx as _jsx, jsxs as _jsxs } from "@fluentui-react-native/framework-base/jsx-runtime";
 import { Image, Platform, Pressable, View } from 'react-native';
 import { compose, mergeProps } from '@fluentui-react-native/framework';
 import { IconV1 as Icon } from '@fluentui-react-native/icon';
@@ -9,65 +9,37 @@ import { menuItemCheckboxName } from './MenuItemCheckbox.types';
 import { useMenuItemCheckbox } from './useMenuItemCheckbox';
 import { getAccessibilityLabel, getTooltip } from '../MenuItem/MenuItem';
 export const MenuItemCheckbox = compose({
-  displayName: menuItemCheckboxName,
-  ...stylingSettings,
-  slots: {
-    root: Pressable,
-    ...(Platform.OS === 'android' && { checkbox: Pressable }),
-    checkmark: SvgXml,
-    content: Text,
-    iconPlaceholder: View,
-    imgIcon: Image,
-    fontOrSvgIcon: Icon,
-  },
-  useRender: (userProps, useSlots) => {
-    const menuItem = useMenuItemCheckbox(userProps);
-    const Slots = useSlots(userProps, (layer) => menuItem.state[layer] || userProps[layer]);
-    return menuItemFinalRender(menuItem, Slots);
-  },
+    displayName: menuItemCheckboxName,
+    ...stylingSettings,
+    slots: {
+        root: Pressable,
+        ...(Platform.OS === 'android' && { checkbox: Pressable }),
+        checkmark: SvgXml,
+        content: Text,
+        iconPlaceholder: View,
+        imgIcon: Image,
+        fontOrSvgIcon: Icon,
+    },
+    useRender: (userProps, useSlots) => {
+        const menuItem = useMenuItemCheckbox(userProps);
+        const Slots = useSlots(userProps, (layer) => menuItem.state[layer] || userProps[layer]);
+        return menuItemFinalRender(menuItem, Slots);
+    },
 });
 export const menuItemFinalRender = (menuItem, Slots) => {
-  return (final, ...children) => {
-    const { accessibilityLabel, icon, tooltip, ...mergedProps } = mergeProps(menuItem.props, final);
-    const checkmarkXml = `
+    return (final, ...children) => {
+        const { accessibilityLabel, icon, tooltip, ...mergedProps } = mergeProps(menuItem.props, final);
+        const checkmarkXml = `
     <svg>
       <path fill='currentColor' d='M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z' />
     </svg>`;
-    const androidCheckmarkPath = `
+        const androidCheckmarkPath = `
     <svg>
       <path fill='currentColor' d='M9.76497 3.20474C10.0661 3.48915 10.0797 3.96383 9.79526 4.26497L5.54526 8.76497C5.40613 8.91228 5.21332 8.99703 5.01071 8.99993C4.8081 9.00282 4.61295 8.92361 4.46967 8.78033L2.21967 6.53033C1.92678 6.23744 1.92678 5.76257 2.21967 5.46967C2.51256 5.17678 2.98744 5.17678 3.28033 5.46967L4.98463 7.17397L8.70474 3.23503C8.98915 2.9339 9.46383 2.92033 9.76497 3.20474Z' />
     </svg>`;
-    const label = getAccessibilityLabel(accessibilityLabel, children[0]);
-    const tooltipResult = getTooltip(tooltip, menuItem.state.hasTooltips, children[0]);
-    return _jsxs(Slots.root, {
-      ...mergedProps,
-      accessibilityLabel: label,
-      children: [
-        Platform.OS === 'android'
-          ? _jsx(Slots.checkbox, {
-              onPress: mergedProps.onPress,
-              accessible: false,
-              focusable: false,
-              children: _jsx(Slots.checkmark, { xml: androidCheckmarkPath }),
-            })
-          : _jsx(Slots.checkmark, { accessible: false, xml: checkmarkXml }),
-        (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,
-          }),
-      ],
-    });
-  };
+        const label = getAccessibilityLabel(accessibilityLabel, children[0]);
+        const tooltipResult = getTooltip(tooltip, menuItem.state.hasTooltips, children[0]);
+        return (_jsxs(Slots.root, { ...mergedProps, accessibilityLabel: label, children: [Platform.OS === 'android' ? (_jsx(Slots.checkbox, { onPress: mergedProps.onPress, accessible: false, focusable: false, children: _jsx(Slots.checkmark, { xml: androidCheckmarkPath }) })) : (_jsx(Slots.checkmark, { accessible: false, xml: checkmarkXml })), (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 }))] }));
+    };
 };
-//# sourceMappingURL=MenuItemCheckbox.js.map
+//# sourceMappingURL=MenuItemCheckbox.js.map

package/lib/MenuItemCheckbox/MenuItemCheckbox.styling.d.ts

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

package/lib/MenuItemCheckbox/MenuItemCheckbox.styling.js

@@ -6,86 +6,67 @@ import { defaultMenuItemCheckboxTokens } from './MenuItemCheckboxTokens';
 export const menuItemCheckboxStates = ['hovered', 'focused', 'pressed', 'disabled', 'checked'];
 const hasPressRententionForA11y = Platform.OS === 'android';
 export const stylingSettings = {
-  tokens: [defaultMenuItemCheckboxTokens, menuItemCheckboxName],
-  states: menuItemCheckboxStates,
-  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],
-    ),
-    ...(Platform.OS === 'android' && {
-      checkbox: buildProps(
-        (tokens) => ({
-          style: {
-            height: tokens.checkboxSize,
-            marginEnd: tokens.paddingHorizontal,
-            width: tokens.checkboxSize,
-            backgroundColor: tokens.checkboxBackgroundColor,
-            borderColor: tokens.checkboxBorderColor,
-            borderRadius: tokens.checkboxBorderRadius,
-            borderWidth: tokens.checkboxBorderWidth,
-            alignItems: 'center',
-            justifyContent: 'center',
-          },
-          ...(hasPressRententionForA11y && {
-            pressRetentionOffset:
-              typeof tokens.padding === 'number' ? tokens.padding : typeof tokens.padding === 'string' ? parseFloat(tokens.padding) : 0, /// Retention of the press area outside of the checkbox equal to padding to match accessibility requirement
-          }),
-          android_ripple: { color: tokens.rippleColor, radius: tokens.checkmarkSize, foreground: true },
+    tokens: [defaultMenuItemCheckboxTokens, menuItemCheckboxName],
+    states: menuItemCheckboxStates,
+    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]),
+        ...(Platform.OS === 'android' && {
+            checkbox: buildProps((tokens) => ({
+                style: {
+                    height: tokens.checkboxSize,
+                    marginEnd: tokens.paddingHorizontal,
+                    width: tokens.checkboxSize,
+                    backgroundColor: tokens.checkboxBackgroundColor,
+                    borderColor: tokens.checkboxBorderColor,
+                    borderRadius: tokens.checkboxBorderRadius,
+                    borderWidth: tokens.checkboxBorderWidth,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                },
+                ...(hasPressRententionForA11y && {
+                    pressRetentionOffset: typeof tokens.padding === 'number' ? tokens.padding : typeof tokens.padding === 'string' ? parseFloat(tokens.padding) : 0, /// Retention of the press area outside of the checkbox equal to padding to match accessibility requirement
+                }),
+                android_ripple: { color: tokens.rippleColor, radius: tokens.checkmarkSize, foreground: true },
+            }), ['checkboxBackgroundColor', 'checkboxBorderColor', 'checkboxBorderRadius', 'checkboxBorderWidth', 'checkboxSize', 'rippleColor']),
         }),
-        ['checkboxBackgroundColor', 'checkboxBorderColor', 'checkboxBorderRadius', 'checkboxBorderWidth', 'checkboxSize', 'rippleColor'],
-      ),
-    }),
-    checkmark: buildProps(
-      (tokens) => ({
-        opacity: tokens.checkmarkVisibility,
-        color: tokens.checkmarkColor ?? tokens.color,
-        height: tokens.checkmarkSize,
-        width: tokens.checkmarkSize,
-        viewBox: '0 0 ' + (tokens.checkmarkSize - tokens.checkmarkPadding * 2) + ' ' + (tokens.checkmarkSize - tokens.checkmarkPadding * 2),
-        ...(Platform.OS !== 'android' && { style: { marginEnd: tokens.gap } }),
-      }),
-      ['checkmarkPadding', 'checkmarkSize', 'checkmarkVisibility', 'color', 'gap'],
-    ),
-    content: buildProps(
-      (tokens, theme) => ({
-        style: {
-          flexGrow: 1,
-          color: tokens.color,
-          ...(Platform.OS === 'android' && { flexShrink: 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']),
-  },
+        checkmark: buildProps((tokens) => ({
+            opacity: tokens.checkmarkVisibility,
+            color: tokens.checkmarkColor ?? tokens.color,
+            height: tokens.checkmarkSize,
+            width: tokens.checkmarkSize,
+            viewBox: '0 0 ' + (tokens.checkmarkSize - tokens.checkmarkPadding * 2) + ' ' + (tokens.checkmarkSize - tokens.checkmarkPadding * 2),
+            ...(Platform.OS !== 'android' && { style: { marginEnd: tokens.gap } }),
+        }), ['checkmarkPadding', 'checkmarkSize', 'checkmarkVisibility', 'color', 'gap']),
+        content: buildProps((tokens, theme) => ({
+            style: {
+                flexGrow: 1,
+                color: tokens.color,
+                ...(Platform.OS === 'android' && { flexShrink: 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']),
+    },
 };
-//# sourceMappingURL=MenuItemCheckbox.styling.js.map
+//# sourceMappingURL=MenuItemCheckbox.styling.js.map