@fluentui-react-native/menu 1.4.14 → 1.4.16

package/src/MenuItem/MenuItem.tsx

@@ -1,9 +1,10 @@
 /** @jsx withSlots */
 import React from 'react';
-import { I18nManager, Pressable, View } from 'react-native';
+import { I18nManager, Image, Pressable, View } from 'react-native';
 
 import type { UseSlots } from '@fluentui-react-native/framework';
 import { compose, memoize, 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';
 
@@ -19,6 +20,9 @@ export const MenuItem = compose<MenuItemType>({
     root: Pressable,
     checkmark: View,
     content: Text,
+    iconPlaceholder: View,
+    imgIcon: Image,
+    fontOrSvgIcon: Icon,
     submenuIndicator: SvgXml,
   },
   useRender: (userProps: MenuItemProps, useSlots: UseSlots<MenuItemType>) => {
@@ -26,7 +30,7 @@ export const MenuItem = compose<MenuItemType>({
     const Slots = useSlots(userProps, (layer): boolean => menuItem.state[layer] || userProps[layer]);
 
     return (final: MenuItemProps, children: React.ReactNode) => {
-      const { accessibilityLabel, tooltip, ...mergedProps } = mergeProps(menuItem.props, final);
+      const { accessibilityLabel, icon, tooltip, ...mergedProps } = mergeProps(menuItem.props, final);
       const chevronXml = I18nManager.isRTL
         ? `
           <svg>
@@ -44,6 +48,12 @@ export const MenuItem = compose<MenuItemType>({
       return (
         <Slots.root {...mergedProps} accessibilityLabel={label}>
           {menuItem.state.hasCheckmarks && <Slots.checkmark />}
+          {(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>}
           {menuItem.state.hasSubmenu && <Slots.submenuIndicator xml={chevronXml} />}
         </Slots.root>

package/src/MenuItem/MenuItem.types.ts

@@ -1,7 +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 { IFocusable, InteractionEvent, PressablePropsExtended, PressableState } from '@fluentui-react-native/interactive-hooks';
 import type { TextProps } from '@fluentui-react-native/text';
 import type { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/tokens';
@@ -20,6 +21,9 @@ export interface MenuItemTokens extends LayoutTokens, FontTokens, IBorderTokens,
    */
   gap?: number;
 
+  iconColor?: ColorValue;
+  iconSize?: number;
+
   /**
    * Color of the indicator that shows that an item has a submenu
    */
@@ -50,6 +54,11 @@ export interface MenuItemProps extends Omit<PressablePropsExtended, 'onPress'> {
    */
   componentRef?: React.RefObject<IFocusable>;
 
+  /*
+   * Source URL or name of the icon to show on the Button.
+   */
+  icon?: IconProps | ImageProps;
+
   /**
    * A callback to call on button click event
    */
@@ -63,6 +72,7 @@ export interface MenuItemProps extends Omit<PressablePropsExtended, 'onPress'> {
 
 export interface MenuItemState extends PressableState {
   hasCheckmarks?: boolean;
+  hasIcons?: boolean;
 
   /**
    * If the menu item is a trigger for a submenu
@@ -84,6 +94,9 @@ export interface MenuItemSlotProps {
   root: React.PropsWithRef<PressablePropsExtended>;
   content?: TextProps;
   checkmark?: React.PropsWithRef<IViewProps>;
+  iconPlaceholder?: React.PropsWithRef<IViewProps>;
+  imgIcon?: ImageProps;
+  fontOrSvgIcon?: IconProps;
   submenuIndicator?: XmlProps;
 }
 

package/src/MenuItem/MenuItemTokens.macos.ts

@@ -13,6 +13,8 @@ export const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme> = (t: T
   fontSize: 13, // aligning with NSMenu font size
   fontWeight: globalTokens.font.weight.regular as FontWeightValue,
   gap: globalTokens.size40,
+  iconColor: t.colors.neutralForeground1,
+  iconSize: 16,
   paddingHorizontal: 5, // hardcoded for now to match NSMenu
   paddingVertical: 3, // hardcoded for now to match NSMenu
   submenuIndicatorColor: t.colors.neutralForeground1,
@@ -21,13 +23,16 @@ export const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme> = (t: T
   focused: {
     backgroundColor: t.colors.menuItemBackgroundHovered,
     color: t.colors.menuItemTextHovered,
+    iconColor: t.colors.menuItemTextHovered,
   },
   pressed: {
     backgroundColor: t.colors.menuItemBackgroundPressed,
     color: t.colors.menuItemTextHovered,
+    iconColor: t.colors.menuItemTextHovered,
   },
   disabled: {
     backgroundColor: t.colors.menuBackground,
     color: t.colors.disabledText,
+    iconColor: t.colors.disabledText,
   },
 });

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,