@fluentui-react-native/menu 1.4.14 → 1.4.15

package/src/MenuItem/MenuItemTokens.ts

@@ -13,6 +13,8 @@ export const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme> = (t: T
   fontSize: globalTokens.font.size300,
   fontWeight: globalTokens.font.weight.regular as FontWeightValue,
   gap: globalTokens.size40,
+  iconColor: t.colors.neutralForeground2,
+  iconSize: 16,
   minHeight: 32,
   minWidth: 128,
   maxWidth: 300,
@@ -23,16 +25,19 @@ export const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme> = (t: T
   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,
   },
 });

package/src/MenuItem/MenuItemTokens.win32.ts

@@ -13,6 +13,8 @@ export const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme> = (t: T
   fontSize: globalTokens.font.size200,
   fontWeight: globalTokens.font.weight.regular as FontWeightValue,
   gap: globalTokens.size40,
+  iconColor: t.colors.neutralForeground1,
+  iconSize: 16,
   minHeight: 24,
   minWidth: 128,
   maxWidth: 300,
@@ -24,21 +26,25 @@ export const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme> = (t: T
   hovered: {
     backgroundColor: t.colors.neutralBackground1Hover,
     color: t.colors.neutralForeground1Hover,
+    iconColor: t.colors.neutralForeground1Hover,
     submenuIndicatorColor: t.colors.neutralForeground1Hover,
   },
   pressed: {
     backgroundColor: t.colors.neutralBackground1Pressed,
     color: t.colors.neutralForeground1Pressed,
+    iconColor: t.colors.neutralForeground1Pressed,
     submenuIndicatorColor: t.colors.neutralForeground1Pressed,
   },
   disabled: {
     backgroundColor: t.colors.neutralBackground1,
     color: t.colors.neutralForegroundDisabled,
+    iconColor: t.colors.neutralForegroundDisabled,
     submenuIndicatorColor: t.colors.neutralForegroundDisabled,
   },
   focused: {
     backgroundColor: t.colors.neutralBackground1Hover,
     color: t.colors.neutralForeground1Hover,
+    iconColor: t.colors.neutralForeground1Hover,
     submenuIndicatorColor: t.colors.neutralForeground1Hover,
   },
 });

package/src/MenuItem/useMenuItem.ts

@@ -19,7 +19,7 @@ export const useMenuItem = (props: MenuItemProps): MenuItemInfo => {
   const defaultComponentRef = React.useRef(null);
   const { onClick, accessibilityState, componentRef = defaultComponentRef, disabled, persistOnClick, ...rest } = props;
   const { isSubmenu, persistOnItemClick, setOpen } = useMenuContext();
-  const { hasCheckmarks, hasTooltips, onArrowClose } = useMenuListContext();
+  const { hasCheckmarks, hasIcons, hasTooltips, onArrowClose } = useMenuListContext();
   const isTrigger = useMenuTriggerContext();
   const shouldPersist = persistOnClick ?? persistOnItemClick;
 
@@ -84,6 +84,7 @@ export const useMenuItem = (props: MenuItemProps): MenuItemInfo => {
     state: {
       ...pressable.state,
       hasSubmenu,
+      hasIcons,
       hasCheckmarks,
       hasTooltips,
     },

package/src/MenuItemCheckbox/MenuItemCheckbox.styling.ts

@@ -46,5 +46,27 @@ export const stylingSettings: UseStylingOptions<MenuItemCheckboxProps, MenuItemC
       }),
       ['color', ...fontStyles.keys],
     ),
+    iconPlaceholder: buildProps(
+      (tokens: MenuItemCheckboxTokens) => ({
+        style: {
+          minHeight: tokens.iconSize,
+          minWidth: tokens.iconSize,
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginEnd: tokens.gap,
+        },
+      }),
+      ['checkmarkSize', 'gap'],
+    ),
+    imgIcon: buildProps(
+      (tokens: MenuItemCheckboxTokens) => ({
+        style: { tintColor: tokens.iconColor, height: tokens.iconSize, width: tokens.iconSize },
+      }),
+      ['gap', 'iconColor', 'iconSize'],
+    ),
+    fontOrSvgIcon: buildProps(
+      (tokens: MenuItemCheckboxTokens) => ({ color: tokens.iconColor, size: tokens.iconSize }),
+      ['gap', 'iconColor', 'iconSize'],
+    ),
   },
 };

package/src/MenuItemCheckbox/MenuItemCheckbox.tsx

@@ -1,9 +1,10 @@
 /** @jsx withSlots */
 import React from 'react';
-import { Pressable } from 'react-native';
+import { Image, Pressable, View } from 'react-native';
 
 import type { Slots, UseSlots } from '@fluentui-react-native/framework';
 import { compose, mergeProps, withSlots } 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';
 
@@ -25,6 +26,9 @@ export const MenuItemCheckbox = compose<MenuItemCheckboxType>({
     root: Pressable,
     checkmark: SvgXml,
     content: Text,
+    iconPlaceholder: View,
+    imgIcon: Image,
+    fontOrSvgIcon: Icon,
   },
   useRender: (userProps: MenuItemCheckboxProps, useSlots: UseSlots<MenuItemCheckboxType>) => {
     const menuItem = useMenuItemCheckbox(userProps);
@@ -39,7 +43,7 @@ export const menuItemFinalRender = (
   Slots: Slots<MenuItemCheckboxSlotProps>,
 ): React.FunctionComponent<MenuItemCheckboxProps> => {
   return (final: MenuItemCheckboxProps, children: React.ReactNode) => {
-    const { accessibilityLabel, tooltip, ...mergedProps } = mergeProps(menuItem.props, final);
+    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' />
@@ -51,6 +55,12 @@ export const menuItemFinalRender = (
     return (
       <Slots.root {...mergedProps} accessibilityLabel={label}>
         <Slots.checkmark xml={checkmarkXml} />
+        {(icon || menuItem.state.hasIcons) && (
+          <Slots.iconPlaceholder>
+            {icon && icon.source && <Slots.imgIcon {...icon} />}
+            {icon && (icon.svgSource || icon.fontSource) && <Slots.fontOrSvgIcon {...icon} />}
+          </Slots.iconPlaceholder>
+        )}
         {children && <Slots.content tooltip={tooltipResult}>{children}</Slots.content>}
       </Slots.root>
     );

package/src/MenuItemCheckbox/MenuItemCheckbox.types.ts

@@ -1,6 +1,8 @@
 import type * as React from 'react';
-import type { ColorValue } from 'react-native';
+import type { ColorValue, ImageProps } from 'react-native';
 
+import type { IViewProps } from '@fluentui-react-native/adapters';
+import type { IconPropsV1 as IconProps } from '@fluentui-react-native/icon';
 import type { PressablePropsExtended, PressableState } from '@fluentui-react-native/interactive-hooks';
 import type { TextProps } from '@fluentui-react-native/text';
 import type { XmlProps } from 'react-native-svg';
@@ -26,6 +28,9 @@ export interface MenuItemCheckboxTokens
    */
   checkmarkVisibility?: number;
 
+  iconColor?: ColorValue;
+  iconSize?: number;
+
   /**
    * States of the item control
    */
@@ -44,13 +49,16 @@ export interface MenuItemCheckboxProps extends MenuItemProps {
 }
 export interface MenuItemCheckboxInfo {
   props: MenuItemCheckboxProps & React.ComponentPropsWithRef<any>;
-  state: PressableState & { hasTooltips: boolean };
+  state: PressableState & { hasIcons: boolean; hasTooltips: boolean };
 }
 
 export interface MenuItemCheckboxSlotProps {
   root: React.PropsWithRef<PressablePropsExtended>;
   checkmark?: XmlProps;
   content?: TextProps;
+  iconPlaceholder?: React.PropsWithRef<IViewProps>;
+  imgIcon?: ImageProps;
+  fontOrSvgIcon?: IconProps;
 }
 
 export interface MenuItemCheckboxType {

package/src/MenuItemCheckbox/MenuItemCheckboxTokens.macos.ts

@@ -15,11 +15,14 @@ export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens
   fontSize: globalTokens.font.size300,
   fontWeight: globalTokens.font.weight.regular as FontWeightValue,
   gap: globalTokens.size40,
+  iconColor: t.colors.neutralForeground2,
+  iconSize: 16,
   paddingHorizontal: 5,
   paddingVertical: 3,
   focused: {
     backgroundColor: t.colors.brandBackground,
     color: t.colors.brandedContent,
+    iconColor: t.colors.brandedContent,
     checked: {
       checkmarkColor: t.colors.neutralForeground2Hover,
       checkmarkVisibility: 1,
@@ -28,6 +31,7 @@ export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens
   pressed: {
     backgroundColor: t.colors.brandBackgroundPressed,
     color: t.colors.brandedPressedContent,
+    iconColor: t.colors.brandedPressedContent,
     checked: {
       checkmarkColor: t.colors.brandedPressedContent,
       checkmarkVisibility: 1,
@@ -36,6 +40,7 @@ export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens
   disabled: {
     backgroundColor: t.colors.transparentBackground,
     color: t.colors.brandForeground1Disabled,
+    iconColor: t.colors.brandForeground1Disabled,
     checked: {
       checkmarkColor: t.colors.brandForeground1Disabled,
       checkmarkVisibility: 1,

package/src/MenuItemCheckbox/MenuItemCheckboxTokens.ts

@@ -15,6 +15,8 @@ export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens
   fontSize: globalTokens.font.size300,
   fontWeight: globalTokens.font.weight.regular as FontWeightValue,
   gap: globalTokens.size40,
+  iconColor: t.colors.neutralForeground2,
+  iconSize: 16,
   minHeight: 32,
   minWidth: 160,
   maxWidth: 300,
@@ -22,6 +24,7 @@ export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens
   hovered: {
     backgroundColor: t.colors.neutralBackground1Hover,
     color: t.colors.neutralForeground2Hover,
+    iconColor: t.colors.neutralForeground2Hover,
     checked: {
       checkmarkColor: t.colors.neutralForeground2Hover,
       checkmarkVisibility: 1,
@@ -30,6 +33,7 @@ export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens
   pressed: {
     backgroundColor: t.colors.neutralBackground1Pressed,
     color: t.colors.neutralForeground2Pressed,
+    iconColor: t.colors.neutralForeground2Pressed,
     checked: {
       checkmarkColor: t.colors.neutralForeground2Pressed,
       checkmarkVisibility: 1,
@@ -38,6 +42,7 @@ export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens
   disabled: {
     backgroundColor: t.colors.neutralBackground1,
     color: t.colors.neutralForegroundDisabled,
+    iconColor: t.colors.neutralForegroundDisabled,
     checked: {
       checkmarkColor: t.colors.neutralForegroundDisabled,
       checkmarkVisibility: 1,

package/src/MenuItemCheckbox/MenuItemCheckboxTokens.win32.ts

@@ -15,6 +15,8 @@ export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens
   fontSize: globalTokens.font.size200,
   fontWeight: globalTokens.font.weight.regular as FontWeightValue,
   gap: globalTokens.size40,
+  iconColor: t.colors.neutralForeground1,
+  iconSize: 16,
   minHeight: 24,
   minWidth: 160,
   maxWidth: 300,
@@ -23,6 +25,7 @@ export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens
   hovered: {
     backgroundColor: t.colors.neutralBackground1Hover,
     color: t.colors.neutralForeground1Hover,
+    iconColor: t.colors.neutralForeground1Hover,
     checked: {
       checkmarkColor: t.colors.neutralForeground1Hover,
       checkmarkVisibility: 1,
@@ -31,6 +34,7 @@ export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens
   pressed: {
     backgroundColor: t.colors.neutralBackground1Pressed,
     color: t.colors.neutralForeground1Pressed,
+    iconColor: t.colors.neutralForeground1Pressed,
     checked: {
       checkmarkColor: t.colors.neutralForeground1Pressed,
       checkmarkVisibility: 1,
@@ -39,6 +43,7 @@ export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens
   disabled: {
     backgroundColor: t.colors.neutralBackground1,
     color: t.colors.neutralForegroundDisabled,
+    iconColor: t.colors.neutralForegroundDisabled,
     checked: {
       checkmarkColor: t.colors.neutralForegroundDisabled,
       checkmarkVisibility: 1,
@@ -47,6 +52,7 @@ export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens
   focused: {
     backgroundColor: t.colors.neutralBackground1Hover,
     color: t.colors.neutralForeground1Hover,
+    iconColor: t.colors.neutralForeground1Hover,
     checked: {
       checkmarkColor: t.colors.neutralForeground1Hover,
       checkmarkVisibility: 1,

package/src/MenuItemCheckbox/useMenuItemCheckbox.ts

@@ -65,7 +65,7 @@ export const useMenuCheckboxInteraction = (
 
   const isSubmenu = useMenuContext().isSubmenu;
 
-  const { checked, hasTooltips, onArrowClose } = useMenuListContext();
+  const { checked, hasIcons, hasTooltips, onArrowClose } = useMenuListContext();
   const isChecked = checked?.[name];
 
   // Ensure focus is placed on checkbox after click
@@ -116,6 +116,7 @@ export const useMenuCheckboxInteraction = (
     ...pressable.state,
     checked: isChecked,
     disabled,
+    hasIcons,
     hasTooltips,
   };
 

package/src/MenuList/MenuList.types.ts

@@ -32,6 +32,11 @@ export interface MenuListProps extends Omit<IViewProps, 'onPress'> {
    */
   hasCheckmarks?: boolean;
 
+  /**
+   * States that menu items can contain icons and reserves space for item alignment
+   */
+  hasIcons?: boolean;
+
   /**
    * States that menu items all have tooltips with its text by default.
    *

package/src/MenuList/useMenuListContextValue.ts

@@ -2,5 +2,5 @@ import type { MenuListState } from './MenuList.types';
 import type { MenuListContextValue } from '../context/menuListContext';
 
 export const useMenuListContextValue = (state: MenuListState): MenuListContextValue => {
-  return { hasCheckmarks: state.props.hasCheckmarks, hasTooltips: state.props.hasTooltips, ...state };
+  return { hasCheckmarks: state.props.hasCheckmarks, hasIcons: state.props.hasIcons, hasTooltips: state.props.hasTooltips, ...state };
 };

package/src/context/menuContext.ts

@@ -17,6 +17,7 @@ export const MenuContext = React.createContext<MenuContextValue>({
   checked: [],
   defaultChecked: [],
   hasCheckmarks: false,
+  hasIcons: false,
   hasTooltips: false,
   isSubmenu: false,
   open: false,

package/src/context/menuListContext.ts

@@ -7,6 +7,7 @@ import type { MenuListState } from '../MenuList/MenuList.types';
  */
 export type MenuListContextValue = Omit<MenuListState, 'props'> & {
   hasCheckmarks: boolean;
+  hasIcons: boolean;
   hasTooltips: boolean;
 };
 
@@ -14,6 +15,7 @@ export const MenuListContext = React.createContext<MenuListContextValue>({
   isCheckedControlled: false,
   checked: {},
   hasCheckmarks: false,
+  hasIcons: false,
   hasTooltips: false,
   onCheckedChange: () => false,
   onArrowClose: () => false,