@fluentui-react-native/menu 1.15.0 → 1.15.1

package/lib/MenuItemCheckbox/useMenuItemCheckbox.js

@@ -8,26 +8,23 @@ import { submenuTriggerKeys, triggerKeys, useHoverFocusEffect } from '../MenuIte
 import { useMenuItemTracking } from '../MenuList/useMenuList';
 const defaultAccessibilityActions = [{ name: 'Toggle' }];
 export const useMenuItemCheckbox = (props) => {
-  const { disabled = false, name } = props;
-  const context = useMenuListContext();
-  const checked = context.checked?.[name];
-  const onCheckedChange = context.onCheckedChange;
-  const toggleChecked = React.useCallback(
-    (e) => {
-      if (!disabled) {
-        onCheckedChange(e, name, !checked);
-      }
-    },
-    [checked, disabled, name, onCheckedChange],
-  );
-  return useMenuCheckboxInteraction(props, toggleChecked);
+    const { disabled = false, name } = props;
+    const context = useMenuListContext();
+    const checked = context.checked?.[name];
+    const onCheckedChange = context.onCheckedChange;
+    const toggleChecked = React.useCallback((e) => {
+        if (!disabled) {
+            onCheckedChange(e, name, !checked);
+        }
+    }, [checked, disabled, name, onCheckedChange]);
+    return useMenuCheckboxInteraction(props, toggleChecked);
 };
 const getAccessibilityState = memoize(getAccessibilityStateWorker);
 function getAccessibilityStateWorker(disabled, checked, accessibilityState) {
-  if (accessibilityState) {
-    return { disabled, checked, ...accessibilityState };
-  }
-  return { disabled, checked };
+    if (accessibilityState) {
+        return { disabled, checked, ...accessibilityState };
+    }
+    return { disabled, checked };
 }
 /**
  * Create interactivity and accessibility props to be passed into the inner render.
@@ -38,117 +35,95 @@ function getAccessibilityStateWorker(disabled, checked, accessibilityState) {
  * @returns Props and additional state needed to render the component
  */
 export const useMenuCheckboxInteraction = (props, toggleCallback) => {
-  const defaultComponentRef = React.useRef(null);
-  const {
-    accessibilityActions,
-    accessibilityLabel,
-    accessibilityState,
-    accessible,
-    componentRef = defaultComponentRef,
-    disabled = false,
-    name,
-    onAccessibilityAction,
-    ...rest
-  } = props;
-  const isSubmenu = useMenuContext().isSubmenu;
-  const { checked, hasIcons, hasTooltips, onArrowClose } = useMenuListContext();
-  const isChecked = checked?.[name];
-  // Ensure focus is placed on checkbox after click
-  const toggleCheckedWithFocus = useOnPressWithFocus(componentRef, toggleCallback);
-  const pressable = usePressableState({ ...rest, onPress: toggleCheckedWithFocus });
-  const buttonRef = useViewCommandFocus(componentRef);
-  const onKeysPressed = React.useCallback(
-    (e) => {
-      const invokeKey = e.nativeEvent.key === ' ' || e.nativeEvent.key === 'Enter';
-      if (!disabled && invokeKey) {
-        toggleCallback(e);
-        return;
-      }
-      const isRtl = I18nManager.isRTL;
-      const isArrowClose = isSubmenu && ((isRtl && e.nativeEvent.key === 'ArrowRight') || (!isRtl && e.nativeEvent.key === 'ArrowLeft'));
-      if (isArrowClose) {
-        onArrowClose?.(e);
-      }
-    },
-    [disabled, isSubmenu, onArrowClose, toggleCallback],
-  );
-  const keys = disabled ? [] : isSubmenu ? submenuTriggerKeys : triggerKeys;
-  const onKeyProps = useKeyDownProps(onKeysPressed, ...keys);
-  const accessibilityActionsProp = accessibilityActions
-    ? [...defaultAccessibilityActions, ...accessibilityActions]
-    : defaultAccessibilityActions;
-  const onAccessibilityActionProp = React.useCallback(
-    (event) => {
-      if (!disabled) {
-        if (event.nativeEvent.actionName === 'Toggle') {
-          toggleCallback(event);
+    const defaultComponentRef = React.useRef(null);
+    const { accessibilityActions, accessibilityLabel, accessibilityState, accessible, componentRef = defaultComponentRef, disabled = false, name, onAccessibilityAction, ...rest } = props;
+    const isSubmenu = useMenuContext().isSubmenu;
+    const { checked, hasIcons, hasTooltips, onArrowClose } = useMenuListContext();
+    const isChecked = checked?.[name];
+    // Ensure focus is placed on checkbox after click
+    const toggleCheckedWithFocus = useOnPressWithFocus(componentRef, toggleCallback);
+    const pressable = usePressableState({ ...rest, onPress: toggleCheckedWithFocus });
+    const buttonRef = useViewCommandFocus(componentRef);
+    const onKeysPressed = React.useCallback((e) => {
+        const invokeKey = e.nativeEvent.key === ' ' || e.nativeEvent.key === 'Enter';
+        if (!disabled && invokeKey) {
+            toggleCallback(e);
+            return;
+        }
+        const isRtl = I18nManager.isRTL;
+        const isArrowClose = isSubmenu && ((isRtl && e.nativeEvent.key === 'ArrowRight') || (!isRtl && e.nativeEvent.key === 'ArrowLeft'));
+        if (isArrowClose) {
+            onArrowClose?.(e);
+        }
+    }, [disabled, isSubmenu, onArrowClose, toggleCallback]);
+    const keys = disabled ? [] : isSubmenu ? submenuTriggerKeys : triggerKeys;
+    const onKeyProps = useKeyDownProps(onKeysPressed, ...keys);
+    const accessibilityActionsProp = accessibilityActions
+        ? [...defaultAccessibilityActions, ...accessibilityActions]
+        : defaultAccessibilityActions;
+    const onAccessibilityActionProp = React.useCallback((event) => {
+        if (!disabled) {
+            if (event.nativeEvent.actionName === 'Toggle') {
+                toggleCallback(event);
+            }
+            onAccessibilityAction && onAccessibilityAction(event);
+        }
+    }, [disabled, toggleCallback, onAccessibilityAction]);
+    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);
         }
-        onAccessibilityAction && onAccessibilityAction(event);
-      }
-    },
-    [disabled, toggleCallback, onAccessibilityAction],
-  );
-  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);
-  const state = {
-    ...pressable.state,
-    checked: isChecked,
-    disabled,
-    hasIcons,
-    hasTooltips,
-  };
-  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,
-      accessibilityActions: accessibilityActionsProp,
-      accessibilityLabel,
-      accessibilityRole: 'menuitem',
-      accessibilityState: getAccessibilityState(disabled, state.checked, accessibilityState),
-      disabled,
-      enableFocusRing: Platform.select({
-        macos: false,
-        default: enableFocusRing, // win32
-      }),
-      focusable: Platform.select({
-        macos: !disabled,
-        default: true, // win32
-      }),
-      onAccessibilityAction: onAccessibilityActionProp,
-      ref: buttonRef,
-      ...onKeyProps,
-    },
-    state: state,
-  };
+    }, [pressable]);
+    // Track the ref and disabled props on this menu item so the MenuList can handle Home and End keypresses.
+    useMenuItemTracking(componentRef, disabled);
+    const state = {
+        ...pressable.state,
+        checked: isChecked,
+        disabled,
+        hasIcons,
+        hasTooltips,
+    };
+    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,
+            accessibilityActions: accessibilityActionsProp,
+            accessibilityLabel,
+            accessibilityRole: 'menuitem',
+            accessibilityState: getAccessibilityState(disabled, state.checked, accessibilityState),
+            disabled,
+            enableFocusRing: Platform.select({
+                macos: false,
+                default: enableFocusRing, // win32
+            }),
+            focusable: Platform.select({
+                macos: !disabled,
+                default: true, // win32
+            }),
+            onAccessibilityAction: onAccessibilityActionProp,
+            ref: buttonRef,
+            ...onKeyProps,
+        },
+        state: state,
+    };
 };
-//# sourceMappingURL=useMenuItemCheckbox.js.map
+//# sourceMappingURL=useMenuItemCheckbox.js.map

package/lib/MenuItemRadio/MenuItemRadio.d.ts

@@ -1,13 +1,5 @@
 import type { Slots, FinalRender } from '@fluentui-react-native/framework';
 import type { MenuItemRadioInfo, MenuItemRadioProps, MenuItemRadioSlotProps } from './MenuItemRadio.types';
-export declare const MenuItemRadio: import('@fluentui-react-native/framework').ComposableComponent<
-  MenuItemRadioProps,
-  MenuItemRadioSlotProps,
-  import('./MenuItemRadio.types').MenuItemRadioTokens,
-  import('@fluentui-react-native/framework-base').ObjectBase
->;
-export declare const menuItemRadioFinalRender: (
-  menuItem: MenuItemRadioInfo,
-  Slots: Slots<MenuItemRadioSlotProps>,
-) => FinalRender<MenuItemRadioProps>;
-//# sourceMappingURL=MenuItemRadio.d.ts.map
+export declare const MenuItemRadio: import("@fluentui-react-native/framework").ComposableComponent<MenuItemRadioProps, MenuItemRadioSlotProps, import("./MenuItemRadio.types").MenuItemRadioTokens, import("@fluentui-react-native/framework-base").ObjectBase>;
+export declare const menuItemRadioFinalRender: (menuItem: MenuItemRadioInfo, Slots: Slots<MenuItemRadioSlotProps>) => FinalRender<MenuItemRadioProps>;
+//# sourceMappingURL=MenuItemRadio.d.ts.map

package/lib/MenuItemRadio/MenuItemRadio.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,62 +9,34 @@ import { menuItemRadioName } from './MenuItemRadio.types';
 import { useMenuItemRadio } from './useMenuItemRadio';
 import { getAccessibilityLabel, getTooltip } from '../MenuItem/MenuItem';
 export const MenuItemRadio = compose({
-  displayName: menuItemRadioName,
-  ...stylingSettings,
-  slots: {
-    root: Pressable,
-    radioInnerCircle: View,
-    radioButton: Pressable,
-    checkmark: SvgXml,
-    content: Text,
-    iconPlaceholder: View,
-    imgIcon: Image,
-    fontOrSvgIcon: Icon,
-  },
-  useRender: (userProps, useSlots) => {
-    const menuItem = useMenuItemRadio(userProps);
-    const Slots = useSlots(userProps, (layer) => menuItem.state[layer] || userProps[layer]);
-    return menuItemRadioFinalRender(menuItem, Slots);
-  },
+    displayName: menuItemRadioName,
+    ...stylingSettings,
+    slots: {
+        root: Pressable,
+        radioInnerCircle: View,
+        radioButton: Pressable,
+        checkmark: SvgXml,
+        content: Text,
+        iconPlaceholder: View,
+        imgIcon: Image,
+        fontOrSvgIcon: Icon,
+    },
+    useRender: (userProps, useSlots) => {
+        const menuItem = useMenuItemRadio(userProps);
+        const Slots = useSlots(userProps, (layer) => menuItem.state[layer] || userProps[layer]);
+        return menuItemRadioFinalRender(menuItem, Slots);
+    },
 });
 export const menuItemRadioFinalRender = (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 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.radioButton, {
-              onPress: mergedProps.onPress,
-              accessible: false,
-              focusable: false,
-              children: _jsx(Slots.radioInnerCircle, {}),
-            })
-          : _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.radioButton, { onPress: mergedProps.onPress, accessible: false, focusable: false, children: _jsx(Slots.radioInnerCircle, {}) })) : (_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=MenuItemRadio.js.map
+//# sourceMappingURL=MenuItemRadio.js.map

package/lib/MenuItemRadio/MenuItemRadio.styling.android.d.ts

@@ -3,4 +3,4 @@ import type { MenuItemRadioProps, MenuItemRadioSlotProps } from './MenuItemRadio
 import type { MenuItemRadioTokens } from '../MenuItemRadio/MenuItemRadio.types';
 export declare const menuItemRadioStates: (keyof MenuItemRadioTokens)[];
 export declare const stylingSettings: UseStylingOptions<MenuItemRadioProps, MenuItemRadioSlotProps, MenuItemRadioTokens>;
-//# sourceMappingURL=MenuItemRadio.styling.android.d.ts.map
+//# sourceMappingURL=MenuItemRadio.styling.android.d.ts.map

package/lib/MenuItemRadio/MenuItemRadio.styling.android.js

@@ -5,82 +5,64 @@ import { menuItemRadioName } from './MenuItemRadio.types';
 import { defaultMenuItemRadioTokens } from './MenuItemRadioTokens';
 export const menuItemRadioStates = ['hovered', 'focused', 'pressed', 'disabled', 'checked'];
 export const stylingSettings = {
-  tokens: [defaultMenuItemRadioTokens, menuItemRadioName],
-  states: menuItemRadioStates,
-  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],
-    ),
-    radioButton: buildProps(
-      (tokens) => ({
-        style: {
-          backgroundColor: 'transparent',
-          alignItems: 'center',
-          justifyContent: 'center',
-          marginEnd: tokens.paddingHorizontal,
-          width: tokens.radioOuterCircleSize,
-          height: tokens.radioOuterCircleSize,
-          borderWidth: tokens.radioBorderWidth,
-          borderStyle: tokens.radioBorderStyle,
-          borderRadius: tokens.radioOuterCircleSize / 2,
-          borderColor: tokens.radioBorder,
-        },
-        android_ripple: { color: tokens.rippleColor, radius: tokens.rippleRadius, borderless: true },
-      }),
-      ['radioBorderWidth', 'radioBorderStyle', 'radioOuterCircleSize', 'rippleColor', 'rippleRadius', 'radioBorder'],
-    ),
-    radioInnerCircle: buildProps(
-      (tokens) => ({
-        style: {
-          opacity: tokens.radioVisibility,
-          borderRadius: tokens.radioInnerCircleSize / 2,
-          height: tokens.radioInnerCircleSize,
-          width: tokens.radioInnerCircleSize,
-          backgroundColor: tokens.radioFill,
-        },
-      }),
-      ['radioInnerCircleSize', 'radioVisibility', 'radioFill'],
-    ),
-    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']),
-  },
+    tokens: [defaultMenuItemRadioTokens, menuItemRadioName],
+    states: menuItemRadioStates,
+    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]),
+        radioButton: buildProps((tokens) => ({
+            style: {
+                backgroundColor: 'transparent',
+                alignItems: 'center',
+                justifyContent: 'center',
+                marginEnd: tokens.paddingHorizontal,
+                width: tokens.radioOuterCircleSize,
+                height: tokens.radioOuterCircleSize,
+                borderWidth: tokens.radioBorderWidth,
+                borderStyle: tokens.radioBorderStyle,
+                borderRadius: tokens.radioOuterCircleSize / 2,
+                borderColor: tokens.radioBorder,
+            },
+            android_ripple: { color: tokens.rippleColor, radius: tokens.rippleRadius, borderless: true },
+        }), ['radioBorderWidth', 'radioBorderStyle', 'radioOuterCircleSize', 'rippleColor', 'rippleRadius', 'radioBorder']),
+        radioInnerCircle: buildProps((tokens) => ({
+            style: {
+                opacity: tokens.radioVisibility,
+                borderRadius: tokens.radioInnerCircleSize / 2,
+                height: tokens.radioInnerCircleSize,
+                width: tokens.radioInnerCircleSize,
+                backgroundColor: tokens.radioFill,
+            },
+        }), ['radioInnerCircleSize', 'radioVisibility', 'radioFill']),
+        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=MenuItemRadio.styling.android.js.map
+//# sourceMappingURL=MenuItemRadio.styling.android.js.map

package/lib/MenuItemRadio/MenuItemRadio.styling.d.ts

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

package/lib/MenuItemRadio/MenuItemRadio.styling.js

@@ -5,63 +5,48 @@ import { menuItemRadioName } from './MenuItemRadio.types';
 import { defaultMenuItemRadioTokens } from './MenuItemRadioTokens';
 export const menuItemRadioStates = ['hovered', 'focused', 'pressed', 'disabled', 'checked'];
 export const stylingSettings = {
-  tokens: [defaultMenuItemRadioTokens, menuItemRadioName],
-  states: menuItemRadioStates,
-  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) => ({
-        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']),
-  },
+    tokens: [defaultMenuItemRadioTokens, menuItemRadioName],
+    states: menuItemRadioStates,
+    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) => ({
+            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=MenuItemRadio.styling.js.map
+//# sourceMappingURL=MenuItemRadio.styling.js.map