@fluentui-react-native/menu 1.4.34 → 1.6.0

package/src/MenuCallout/MenuCallout.android.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Animated, Modal, TouchableWithoutFeedback, View, StyleSheet, ScrollView } from 'react-native';
+
+import { stagedComponent } from '@fluentui-react-native/framework';
+import { mergeProps } from '@fluentui-react-native/framework';
+
+import type { MenuCalloutProps } from './MenuCallout.types';
+import { menuCalloutName } from './MenuCallout.types';
+import { useMenuContext } from '../context';
+
+const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
+
+export const MenuCallout = stagedComponent((props: MenuCalloutProps) => {
+  const context = useMenuContext();
+
+  return (_rest: MenuCalloutProps, children: React.ReactNode) => {
+    const mergedProps = mergeProps(props, _rest);
+    const tokens = props.tokens;
+
+    return (
+      <Modal
+        {...mergedProps}
+        visible={context.open}
+        onRequestClose={context.onRequestClose}
+        supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}
+        transparent
+      >
+        <TouchableWithoutFeedback onPress={context.onRequestClose} accessible={false}>
+          <View style={[StyleSheet.absoluteFill]}>
+            <Animated.View
+              onLayout={context.onMenuLayout}
+              style={[
+                context.shadowMenuContainerStyle,
+                {
+                  maxHeight: mergedProps.maxHeight ? mergedProps.maxHeight : tokens.maxHeight,
+                  maxWidth: tokens.maxWidth,
+                  position: 'absolute',
+                  borderRadius: tokens.cornerRadius,
+                  elevation: tokens.elevation,
+                  overflow: 'hidden',
+                },
+              ]}
+            >
+              {context.menuHeight + tokens.minPadding >= tokens.maxHeight ||
+              context.menuHeight + tokens.minPadding >= mergedProps.maxHeight ? (
+                <AnimatedScrollView style={[context.animationStarted && context.menuSize]}>{children}</AnimatedScrollView>
+              ) : (
+                <Animated.View style={[context.animationStarted && context.menuSize]}>{children}</Animated.View>
+              )}
+            </Animated.View>
+          </View>
+        </TouchableWithoutFeedback>
+      </Modal>
+    );
+  };
+});
+
+MenuCallout.displayName = menuCalloutName;
+
+export default MenuCallout;

package/src/MenuCallout/MenuCallout.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Callout } from '@fluentui-react-native/callout';
+import { stagedComponent } from '@fluentui-react-native/framework';
+import { mergeProps } from '@fluentui-react-native/framework';
+
+import type { MenuCalloutProps } from './MenuCallout.types';
+import { menuCalloutName } from './MenuCallout.types';
+
+export const MenuCallout = stagedComponent((props: MenuCalloutProps) => {
+  return (_rest: MenuCalloutProps, children: React.ReactNode) => {
+    const mergedProps = mergeProps(props, _rest);
+
+    return <Callout {...mergedProps}>{children}</Callout>;
+  };
+});
+
+MenuCallout.displayName = menuCalloutName;
+
+export default MenuCallout;

package/src/MenuCallout/MenuCallout.types.ts

@@ -0,0 +1,22 @@
+import type { ICalloutProps, ICalloutTokens } from '@fluentui-react-native/callout';
+
+export const menuCalloutName = 'MenuCallout';
+
+// Support for anchorRect and beakWidth will come at a later time.
+// Omitting dismissBehaviors as it doesn't seem to make sense as a token
+export type MenuCalloutTokens =
+  | Omit<ICalloutTokens, 'anchorRect' | 'beakWidth' | 'dismissBehaviors'> & {
+      /**
+       * The token for the corner radius for the Modal MenuPopover
+       * @platform android
+       */
+      cornerRadius?: number;
+
+      /**
+       * Shadown elevation token for the Modal MenuPopover
+       * @platform android
+       */
+      elevation?: number;
+    };
+
+export type MenuCalloutProps = ICalloutProps & { tokens: MenuCalloutTokens };

package/src/MenuCallout/index.ts

@@ -0,0 +1,3 @@
+export { MenuCallout } from './MenuCallout';
+export { menuCalloutName } from './MenuCallout.types';
+export type { MenuCalloutProps, MenuCalloutTokens } from './MenuCallout.types';

package/src/MenuDivider/MenuDivider.styling.ts

@@ -1,3 +1,5 @@
+import { Platform } from 'react-native';
+
 import type { UseStylingOptions } from '@fluentui-react-native/framework';
 import { buildProps } from '@fluentui-react-native/framework';
 
@@ -7,6 +9,7 @@ import { defaultMenuDividerTokens } from './MenuDividerTokens';
 
 export const stylingSettings: UseStylingOptions<MenuDividerProps, MenuDividerSlotProps, MenuDividerTokens> = {
   tokens: [defaultMenuDividerTokens, menuDividerName],
+  tokensThatAreAlsoProps: ['insetSize'],
   slotProps: {
     root: buildProps(
       (tokens: MenuDividerTokens) => ({
@@ -17,6 +20,7 @@ export const stylingSettings: UseStylingOptions<MenuDividerProps, MenuDividerSlo
           margin: tokens.margin,
           marginVertical: tokens.marginVertical,
           display: 'flex',
+          ...(Platform.OS === 'android' && { marginStart: tokens.insetSize }),
         },
       }),
       ['backgroundColor', 'height', 'margin', 'marginVertical', 'width'],

package/src/MenuDivider/MenuDivider.types.ts

@@ -6,14 +6,20 @@ import type { IBackgroundColorTokens } from '@fluentui-react-native/tokens';
 
 export const menuDividerName = 'MenuDivider';
 
+export const MenuDividerInsetSizes = [0, 16, 56, 68, 72, 108] as const;
+export type MenuDividerInsetSize = (typeof MenuDividerInsetSizes)[number];
+
 export type MenuDividerTokens = IBackgroundColorTokens & {
   height?: number;
   margin?: number;
   marginVertical?: number;
   width?: ViewStyle['width'];
+  insetSize?: MenuDividerInsetSize;
 };
 
-export type MenuDividerProps = IViewProps;
+export type MenuDividerProps = IViewProps & {
+  insetSize?: MenuDividerInsetSize;
+};
 
 export interface MenuDividerSlotProps {
   root: React.PropsWithRef<IViewProps>;

package/src/MenuDivider/MenuDividerTokens.android.ts

@@ -0,0 +1,11 @@
+import type { Theme } from '@fluentui-react-native/framework';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import type { TokenSettings } from '@fluentui-react-native/use-styling';
+
+import type { MenuDividerTokens } from './MenuDivider.types';
+
+export const defaultMenuDividerTokens: TokenSettings<MenuDividerTokens, Theme> = (t: Theme): MenuDividerTokens => ({
+  backgroundColor: t.colors.neutralStroke2,
+  height: globalTokens.stroke.width10,
+  insetSize: 0,
+});

package/src/MenuDivider/index.ts

@@ -1,3 +1,3 @@
 export { MenuDivider } from './MenuDivider';
 export { menuDividerName } from './MenuDivider.types';
-export type { MenuDividerProps, MenuDividerTokens, MenuDividerSlotProps, MenuDividerType } from './MenuDivider.types';
+export type { MenuDividerProps, MenuDividerTokens, MenuDividerSlotProps, MenuDividerType, MenuDividerInsetSize } from './MenuDivider.types';

package/src/MenuItem/MenuItem.styling.ts

@@ -1,3 +1,5 @@
+import { Platform } from 'react-native';
+
 import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework';
 import { buildProps } from '@fluentui-react-native/framework';
 import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/tokens';
@@ -30,7 +32,7 @@ export const stylingSettings: UseStylingOptions<MenuItemProps, MenuItemSlotProps
         style: {
           height: tokens.checkmarkSize,
           width: tokens.checkmarkSize,
-          marginEnd: tokens.gap,
+          marginEnd: Platform.OS === 'android' ? tokens.marginEndForCheckedAndroid : tokens.gap,
         },
       }),
       ['checkmarkSize', 'gap'],

package/src/MenuItem/MenuItem.types.ts

@@ -31,6 +31,12 @@ export interface MenuItemTokens extends LayoutTokens, FontTokens, IBorderTokens,
    */
   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
    */

package/src/MenuItem/MenuItemTokens.android.ts

@@ -0,0 +1,24 @@
+import type { Theme } from '@fluentui-react-native/framework';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import type { TokenSettings } from '@fluentui-react-native/use-styling';
+
+import type { MenuItemTokens } from './MenuItem.types';
+
+export const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme> = (t: Theme): MenuItemTokens => ({
+  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,
+});

package/src/MenuItem/useMenuItem.ts

@@ -28,7 +28,6 @@ export const useMenuItem = (props: MenuItemProps): MenuItemInfo => {
   const onInvoke = React.useCallback(
     (e: InteractionEvent) => {
       const isRtl = I18nManager.isRTL;
-
       const isArrowKey = isKeyPressEvent(e) && (e.nativeEvent.key === 'ArrowLeft' || e.nativeEvent.key === 'ArrowRight');
       const isArrowOpen =
         hasSubmenu &&

package/src/MenuItemCheckbox/MenuItemCheckbox.styling.ts

@@ -1,3 +1,5 @@
+import { Platform } from 'react-native';
+
 import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework';
 import { buildProps } from '@fluentui-react-native/framework';
 import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/tokens';
@@ -7,6 +9,7 @@ import { menuItemCheckboxName } from './MenuItemCheckbox.types';
 import { defaultMenuItemCheckboxTokens } from './MenuItemCheckboxTokens';
 
 export const menuItemCheckboxStates: (keyof MenuItemCheckboxTokens)[] = ['hovered', 'focused', 'pressed', 'disabled', 'checked'];
+const hasPressRententionForA11y = Platform.OS === 'android';
 
 export const stylingSettings: UseStylingOptions<MenuItemCheckboxProps, MenuItemCheckboxSlotProps, MenuItemCheckboxTokens> = {
   tokens: [defaultMenuItemCheckboxTokens, menuItemCheckboxName],
@@ -25,14 +28,37 @@ export const stylingSettings: UseStylingOptions<MenuItemCheckboxProps, MenuItemC
       }),
       ['backgroundColor', ...borderStyles.keys, ...layoutStyles.keys],
     ),
+    ...(Platform.OS === 'android' && {
+      checkbox: buildProps(
+        (tokens: MenuItemCheckboxTokens) => ({
+          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 : parseFloat(tokens.padding), /// 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'],
+      ),
+    }),
+
     checkmark: buildProps(
       (tokens: MenuItemCheckboxTokens) => ({
         opacity: tokens.checkmarkVisibility,
-        color: tokens.color,
+        color: tokens.checkmarkColor ?? tokens.color,
         height: tokens.checkmarkSize,
         width: tokens.checkmarkSize,
         viewBox: '0 0 ' + (tokens.checkmarkSize - tokens.checkmarkPadding * 2) + ' ' + (tokens.checkmarkSize - tokens.checkmarkPadding * 2),
-        style: { marginEnd: tokens.gap },
+        ...(Platform.OS !== 'android' && { style: { marginEnd: tokens.gap } }),
       }),
       ['checkmarkPadding', 'checkmarkSize', 'checkmarkVisibility', 'color', 'gap'],
     ),
@@ -41,6 +67,7 @@ export const stylingSettings: UseStylingOptions<MenuItemCheckboxProps, MenuItemC
         style: {
           flexGrow: 1,
           color: tokens.color,
+          ...(Platform.OS === 'android' && { flexShrink: 1 }),
           ...fontStyles.from(tokens, theme),
         },
       }),

package/src/MenuItemCheckbox/MenuItemCheckbox.tsx

@@ -1,6 +1,6 @@
 /** @jsx withSlots */
 import React from 'react';
-import { Image, Pressable, View } from 'react-native';
+import { Image, Platform, Pressable, View } from 'react-native';
 
 import type { Slots, UseSlots } from '@fluentui-react-native/framework';
 import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework';
@@ -24,6 +24,7 @@ export const MenuItemCheckbox = compose<MenuItemCheckboxType>({
   ...stylingSettings,
   slots: {
     root: Pressable,
+    ...(Platform.OS === 'android' && { checkbox: Pressable }),
     checkmark: SvgXml,
     content: Text,
     iconPlaceholder: View,
@@ -44,17 +45,29 @@ export const menuItemFinalRender = (
 ): React.FunctionComponent<MenuItemCheckboxProps> => {
   return (final: MenuItemCheckboxProps, children: React.ReactNode) => {
     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 = `
+    <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 (
       <Slots.root {...mergedProps} accessibilityLabel={label}>
-        <Slots.checkmark accessible={false} xml={checkmarkXml} />
+        {Platform.OS === 'android' ? (
+          <Slots.checkbox onPress={mergedProps.onPress} accessible={false} focusable={false}>
+            <Slots.checkmark xml={androidCheckmarkPath} />
+          </Slots.checkbox>
+        ) : (
+          <Slots.checkmark accessible={false} xml={checkmarkXml} />
+        )}
         {(icon || menuItem.state.hasIcons) && (
           <Slots.iconPlaceholder accessible={false}>
             {icon && icon.source && <Slots.imgIcon accessible={false} {...icon} />}

package/src/MenuItemCheckbox/MenuItemCheckbox.types.ts

@@ -38,6 +38,52 @@ export interface MenuItemCheckboxTokens
    */
   iconSize?: number;
 
+  /**
+   * Color of the background of the box containing the checkmark.
+   * @platform android
+   */
+  checkboxBackgroundColor?: ColorValue;
+
+  /**
+   * Color of the border of the box containing the checkmark.
+   * @platform android
+   */
+  checkboxBorderColor?: ColorValue;
+
+  /**
+   * Border radius of the box containing the checkmark.
+   * @platform android
+   */
+  checkboxBorderRadius?: number;
+
+  /**
+   * Width of the border around the box containing the checkmark.
+   * @platform android
+   */
+  checkboxBorderWidth?: number;
+
+  /**
+   * Height and width of the box containing the checkmark.
+   * @platform android
+   */
+  checkboxSize?: number;
+
+  /**
+   * Ripple color for Android.
+   *
+   * A ripple animation is shown on click for Android. This sets the color of the ripple.
+   * @platform android
+   */
+  rippleColor?: ColorValue;
+
+  /**
+   * Ripple radius for circular radio on Android.
+   *
+   * A ripple animation is shown on click for Android. This sets the radius of the circular ripple shown on the radio button.
+   * @platform android
+   */
+  rippleRadius?: number;
+
   /**
    * States of the item control
    */
@@ -62,6 +108,7 @@ export interface MenuItemCheckboxInfo {
 
 export interface MenuItemCheckboxSlotProps {
   root: React.PropsWithRef<PressablePropsExtended>;
+  checkbox?: PressablePropsExtended; // Android only
   checkmark?: XmlProps;
   content?: TextProps;
   iconPlaceholder?: React.PropsWithRef<IViewProps>;

package/src/MenuItemCheckbox/MenuItemCheckboxTokens.android.ts

@@ -0,0 +1,46 @@
+import type { Theme } from '@fluentui-react-native/framework';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import type { TokenSettings } from '@fluentui-react-native/use-styling';
+
+import type { MenuItemCheckboxTokens } from './MenuItemCheckbox.types';
+
+export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens, Theme> = (t: Theme): MenuItemCheckboxTokens => ({
+  checkmarkSize: globalTokens.size120,
+  checkmarkVisibility: 0,
+  color: t.colors.neutralForeground1,
+  variant: 'body1',
+  gap: globalTokens.size160,
+  iconColor: t.colors.neutralForeground2,
+  iconSize: globalTokens.size200,
+  maxWidth: 300,
+  paddingVertical: globalTokens.size60,
+  paddingHorizontal: globalTokens.size160,
+  checkmarkPadding: globalTokens.sizeNone,
+  checkboxBorderWidth: globalTokens.stroke.width15,
+  checkboxBorderRadius: globalTokens.corner.radius40,
+  checkboxSize: globalTokens.size200,
+  checkboxBorderColor: t.colors.neutralStrokeAccessible,
+
+  rippleColor: '#D4D4D4',
+  pressed: {
+    backgroundColor: t.colors.neutralBackground1Pressed,
+  },
+  disabled: {
+    backgroundColor: t.colors.neutralBackground1,
+    checkboxBorderColor: t.colors.neutralStrokeDisabled,
+    color: t.colors.neutralForegroundDisabled1,
+    iconColor: t.colors.neutralForegroundDisabled,
+    // Unselected, Disabled
+    rippleColor: '#D4D4D4',
+    checked: {
+      checkboxBackgroundColor: t.colors.brandBackgroundDisabled,
+      checkmarkVisibility: 1,
+    },
+  },
+  checked: {
+    checkmarkVisibility: 1,
+    checkboxBackgroundColor: t.colors.brandBackground,
+    checkboxBorderWidth: globalTokens.stroke.widthNone,
+    checkmarkColor: t.colors.neutralForegroundOnColor,
+  },
+});

package/src/MenuItemRadio/MenuItemRadio.styling.android.ts

@@ -0,0 +1,98 @@
+import { Platform } from 'react-native';
+
+import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework';
+import { buildProps } from '@fluentui-react-native/framework';
+import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/tokens';
+
+import type { MenuItemRadioProps, MenuItemRadioSlotProps } from './MenuItemRadio.types';
+import { menuItemRadioName } from './MenuItemRadio.types';
+import { defaultMenuItemRadioTokens } from './MenuItemRadioTokens';
+import type { MenuItemRadioTokens } from '../MenuItemRadio/MenuItemRadio.types';
+
+export const menuItemRadioStates: (keyof MenuItemRadioTokens)[] = ['hovered', 'focused', 'pressed', 'disabled', 'checked'];
+
+export const stylingSettings: UseStylingOptions<MenuItemRadioProps, MenuItemRadioSlotProps, MenuItemRadioTokens> = {
+  tokens: [defaultMenuItemRadioTokens, menuItemRadioName],
+  states: menuItemRadioStates,
+  slotProps: {
+    root: buildProps(
+      (tokens: MenuItemRadioTokens, theme: 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: MenuItemRadioTokens) => ({
+        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: MenuItemRadioTokens) => ({
+        style: {
+          opacity: tokens.radioVisibility,
+          borderRadius: tokens.radioInnerCircleSize / 2,
+          height: tokens.radioInnerCircleSize,
+          width: tokens.radioInnerCircleSize,
+          backgroundColor: tokens.radioFill,
+        },
+      }),
+      ['radioInnerCircleSize', 'radioVisibility', 'radioFill'],
+    ),
+
+    content: buildProps(
+      (tokens: MenuItemRadioTokens, theme: Theme) => ({
+        style: {
+          flexGrow: 1,
+          color: tokens.color,
+          ...(Platform.OS === 'android' && { flexShrink: 1 }),
+          ...fontStyles.from(tokens, theme),
+        },
+      }),
+      ['color', ...fontStyles.keys],
+    ),
+    iconPlaceholder: buildProps(
+      (tokens: MenuItemRadioTokens) => ({
+        style: {
+          minHeight: tokens.iconSize,
+          minWidth: tokens.iconSize,
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginEnd: tokens.gap,
+        },
+      }),
+      ['checkmarkSize', 'gap'],
+    ),
+    imgIcon: buildProps(
+      (tokens: MenuItemRadioTokens) => ({
+        style: { tintColor: tokens.iconColor, height: tokens.iconSize, width: tokens.iconSize },
+      }),
+      ['gap', 'iconColor', 'iconSize'],
+    ),
+    fontOrSvgIcon: buildProps(
+      (tokens: MenuItemRadioTokens) => ({ color: tokens.iconColor, size: tokens.iconSize }),
+      ['gap', 'iconColor', 'iconSize'],
+    ),
+  },
+};

package/src/MenuItemRadio/MenuItemRadio.styling.ts

@@ -0,0 +1,75 @@
+import { Platform } from 'react-native';
+
+import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework';
+import { buildProps } from '@fluentui-react-native/framework';
+import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/tokens';
+
+import type { MenuItemRadioProps, MenuItemRadioSlotProps, MenuItemRadioTokens } from './MenuItemRadio.types';
+import { menuItemRadioName } from './MenuItemRadio.types';
+import { defaultMenuItemRadioTokens } from './MenuItemRadioTokens';
+
+export const menuItemRadioStates: (keyof MenuItemRadioTokens)[] = ['hovered', 'focused', 'pressed', 'disabled', 'checked'];
+
+export const stylingSettings: UseStylingOptions<MenuItemRadioProps, MenuItemRadioSlotProps, MenuItemRadioTokens> = {
+  tokens: [defaultMenuItemRadioTokens, menuItemRadioName],
+  states: menuItemRadioStates,
+  slotProps: {
+    root: buildProps(
+      (tokens: MenuItemRadioTokens, theme: 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: MenuItemRadioTokens) => ({
+        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: MenuItemRadioTokens, theme: Theme) => ({
+        style: {
+          flexGrow: 1,
+          color: tokens.color,
+          ...(Platform.OS === 'android' && { flexShrink: 1 }),
+          ...fontStyles.from(tokens, theme),
+        },
+      }),
+      ['color', ...fontStyles.keys],
+    ),
+    iconPlaceholder: buildProps(
+      (tokens: MenuItemRadioTokens) => ({
+        style: {
+          minHeight: tokens.iconSize,
+          minWidth: tokens.iconSize,
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginEnd: tokens.gap,
+        },
+      }),
+      ['checkmarkSize', 'gap'],
+    ),
+    imgIcon: buildProps(
+      (tokens: MenuItemRadioTokens) => ({
+        style: { tintColor: tokens.iconColor, height: tokens.iconSize, width: tokens.iconSize },
+      }),
+      ['gap', 'iconColor', 'iconSize'],
+    ),
+    fontOrSvgIcon: buildProps(
+      (tokens: MenuItemRadioTokens) => ({ color: tokens.iconColor, size: tokens.iconSize }),
+      ['gap', 'iconColor', 'iconSize'],
+    ),
+  },
+};