@fluentui-react-native/menu 0.14.7 → 0.15.1

package/src/MenuItem/MenuItem.types.ts

@@ -9,11 +9,29 @@ import { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui
 export const menuItemName = 'MenuItem';
 
 export interface MenuItemTokens extends LayoutTokens, FontTokens, IBorderTokens, IColorTokens {
+  /**
+   * Height and width in pixels of the space that is reserved to align the item's text with other items which have checkmarks
+   */
   checkmarkSize?: number;
+
+  /**
+   * Amount of space in pixels around the indicator that shows that an item has a submenu
+   */
   submenuIndicatorPadding?: number;
+
+  /**
+   * Height and width in pixels of the indicator that shows that an item has a submenu
+   */
   submenuIndicatorSize?: number;
+
+  /**
+   * Space between parts of the item control in pixels
+   */
   gap?: number;
 
+  /**
+   * States of the item control
+   */
   disabled?: MenuItemTokens;
   focused?: MenuItemTokens;
   hovered?: MenuItemTokens;
@@ -21,13 +39,6 @@ export interface MenuItemTokens extends LayoutTokens, FontTokens, IBorderTokens,
 }
 
 export interface MenuItemProps extends Omit<IWithPressableOptions<ViewProps>, 'onPress'> {
-  content: string;
-
-  /**
-   * Applies disabled styles to menu item but remains focusable
-   */
-  disabled?: boolean;
-
   /**
    * A RefObject to access the IButton interface. Use this to access the public methods and properties of the component.
    */

package/src/MenuItem/useMenuItem.ts

@@ -68,7 +68,6 @@ export const useMenuItem = (props: MenuItemProps): MenuItemState => {
       accessible: true,
       accessibilityRole: 'menuitem',
       onAccessibilityTap: props.onAccessibilityTap || onInvoke,
-      accessibilityLabel: props.accessibilityLabel || props.content,
       accessibilityState: getAccessibilityState(disabled, accessibilityState),
       enableFocusRing: Platform.select({
         macos: false,

package/src/MenuItemCheckbox/MenuItemCheckbox.tsx

@@ -12,6 +12,8 @@ import {
 } from './MenuItemCheckbox.types';
 import { useMenuItemCheckbox } from './useMenuItemCheckbox';
 import { stylingSettings } from './MenuItemCheckbox.styling';
+import { getAccessibilityLabel } from '../MenuItem/MenuItem';
+import React from 'react';
 
 export const MenuItemCheckbox = compose<MenuItemCheckboxType>({
   displayName: menuItemCheckboxName,
@@ -33,17 +35,19 @@ export const menuItemFinalRender = (
   menuItem: MenuItemCheckboxState,
   Slots: Slots<MenuItemCheckboxSlotProps>,
 ): React.FunctionComponent<MenuItemCheckboxProps> => {
-  return (final: MenuItemCheckboxProps) => {
-    const mergedProps = mergeProps(menuItem.props, final);
+  return (final: MenuItemCheckboxProps, children: React.ReactNode) => {
+    const { accessibilityLabel, ...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]);
+
     return (
-      <Slots.root {...mergedProps}>
+      <Slots.root {...mergedProps} accessibilityLabel={label}>
         <Slots.checkmark xml={checkmarkXml} />
-        {mergedProps.content && <Slots.content>{mergedProps.content}</Slots.content>}
+        {children && <Slots.content>{children}</Slots.content>}
       </Slots.root>
     );
   };

package/src/MenuItemCheckbox/MenuItemCheckbox.types.ts

@@ -9,12 +9,34 @@ import { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui
 export const menuItemCheckboxName = 'MenuItemCheckbox';
 
 export interface MenuItemCheckboxTokens extends LayoutTokens, FontTokens, IBorderTokens, IColorTokens {
+  /**
+   * Color of the checkmark icon
+   */
   checkmarkColor?: ColorValue;
+
+  /**
+   * Amount of space in pixels around the checkmark icon
+   */
   checkmarkPadding?: number;
+
+  /**
+   * Height and width in pixels of the checkmark icon
+   */
   checkmarkSize?: number;
+
+  /**
+   * Visibility of the checkmark icon from 0 to 1
+   */
   checkmarkVisibility?: number;
+
+  /**
+   * Space between parts of the item control in pixels
+   */
   gap?: number;
 
+  /**
+   * States of the item control
+   */
   checked?: MenuItemCheckboxTokens;
   disabled?: MenuItemCheckboxTokens;
   focused?: MenuItemCheckboxTokens;
@@ -23,13 +45,6 @@ export interface MenuItemCheckboxTokens extends LayoutTokens, FontTokens, IBorde
 }
 
 export interface MenuItemCheckboxProps extends Omit<IWithPressableOptions<ViewProps>, 'onPress'> {
-  content: string;
-
-  /**
-   * Applies disabled styles to menu item but remains focusable
-   */
-  disabled?: boolean;
-
   /**
    * A RefObject to access the IButton interface. Use this to access the public methods and properties of the component.
    */

package/src/MenuItemCheckbox/useMenuItemCheckbox.ts

@@ -54,6 +54,7 @@ export const useMenuCheckboxInteraction = (
   const defaultComponentRef = React.useRef(null);
   const {
     accessibilityActions,
+    accessibilityLabel,
     accessibilityState,
     componentRef = defaultComponentRef,
     disabled,
@@ -97,7 +98,7 @@ export const useMenuCheckboxInteraction = (
       ...pressable.props,
       accessible: true,
       accessibilityActions: accessibilityActionsProp,
-      accessibilityLabel: props.accessibilityLabel || props.content,
+      accessibilityLabel,
       accessibilityRole: 'menuitem',
       accessibilityState: getAccessibilityState(disabled, state.checked, accessibilityState),
       enableFocusRing: Platform.select({

package/src/MenuList/MenuList.types.ts

@@ -6,13 +6,33 @@ import React from 'react';
 export const menuListName = 'MenuList';
 
 export interface MenuListTokens extends LayoutTokens, IBackgroundColorTokens {
+  /**
+   * Space between items in pixels
+   */
   gap?: number;
 }
 
 export interface MenuListProps extends Omit<IViewProps, 'onPress'> {
+  /**
+   * Array of all checked items
+   */
   checked?: string[];
+
+  /**
+   * Default items to be checked on mount
+   */
   defaultChecked?: string[];
+
+  /**
+   * States that menu items can contain selectable items and reserves space for item alignment
+   */
   hasCheckmarks?: boolean;
+
+  /**
+   * Callback when checked items change
+   *
+   * @param checked Array of all currently checked values
+   */
   onCheckedChange?: (e: InteractionEvent, checked: string[]) => void;
 }
 

package/src/__tests__/Menu.test.tsx

@@ -22,7 +22,7 @@ describe('Checkbox component tests', () => {
           </MenuTrigger>
           <MenuPopover>
             <MenuList>
-              <MenuItem content="Option 1" />
+              <MenuItem>Option 1</MenuItem>
             </MenuList>
           </MenuPopover>
         </Menu>,
@@ -40,7 +40,7 @@ describe('Checkbox component tests', () => {
           </MenuTrigger>
           <MenuPopover>
             <MenuList>
-              <MenuItem content="Option 1" />
+              <MenuItem>Option 1</MenuItem>
             </MenuList>
           </MenuPopover>
         </Menu>,
@@ -58,8 +58,8 @@ describe('Checkbox component tests', () => {
           </MenuTrigger>
           <MenuPopover>
             <MenuList>
-              <MenuItem content="Option 1" />
-              <MenuItem disabled content="Option 2" />
+              <MenuItem>Option 1</MenuItem>
+              <MenuItem disabled>Option 2</MenuItem>
             </MenuList>
           </MenuPopover>
         </Menu>,
@@ -77,9 +77,11 @@ describe('Checkbox component tests', () => {
           </MenuTrigger>
           <MenuPopover>
             <MenuList>
-              <MenuItemCheckbox content="Option 1" name="Option 1" />
+              <MenuItemCheckbox name="Option 1">Option 1</MenuItemCheckbox>
               <MenuDivider />
-              <MenuItemCheckbox disabled content="Option 2" name="Option 2" />
+              <MenuItemCheckbox disabled name="Option 2">
+                Option 2
+              </MenuItemCheckbox>
             </MenuList>
           </MenuPopover>
         </Menu>,
@@ -97,8 +99,8 @@ describe('Checkbox component tests', () => {
           </MenuTrigger>
           <MenuPopover>
             <MenuList>
-              <MenuItemRadio content="Option 1" name="Option 1" />
-              <MenuItemRadio content="Option 2" name="Option 2" />
+              <MenuItemRadio name="Option 1">Option 1</MenuItemRadio>
+              <MenuItemRadio name="Option 2">Option 2</MenuItemRadio>
             </MenuList>
           </MenuPopover>
         </Menu>,
@@ -116,9 +118,9 @@ describe('Checkbox component tests', () => {
           </MenuTrigger>
           <MenuPopover>
             <MenuList>
-              <MenuItemCheckbox content="Option 1" name="Option 1" />
+              <MenuItemCheckbox name="Option 1">Option 1</MenuItemCheckbox>
               <MenuDivider />
-              <MenuItemCheckbox content="Option 2" name="Option 2" />
+              <MenuItemCheckbox name="Option 2">Option 2</MenuItemCheckbox>
             </MenuList>
           </MenuPopover>
         </Menu>,
@@ -136,9 +138,9 @@ describe('Checkbox component tests', () => {
           </MenuTrigger>
           <MenuPopover>
             <MenuList>
-              <MenuItemCheckbox content="Option 1" name="Option 1" />
+              <MenuItemCheckbox name="Option 1">Option 1</MenuItemCheckbox>
               <MenuDivider />
-              <MenuItemCheckbox content="Option 2" name="Option 2" />
+              <MenuItemCheckbox name="Option 2">Option 2</MenuItemCheckbox>
             </MenuList>
           </MenuPopover>
         </Menu>,
@@ -156,14 +158,14 @@ describe('Checkbox component tests', () => {
           </MenuTrigger>
           <MenuPopover>
             <MenuList>
-              <MenuItem content="Option 1" />
+              <MenuItem>Option 1</MenuItem>
               <Menu>
                 <MenuTrigger>
-                  <MenuItem content="Option 2" />
+                  <MenuItem>Option 2</MenuItem>
                 </MenuTrigger>
                 <MenuPopover>
                   <MenuList>
-                    <MenuItem content="Option 1" />
+                    <MenuItem>Option 1</MenuItem>
                   </MenuList>
                 </MenuPopover>
               </Menu>
@@ -186,7 +188,7 @@ describe('Menu rerender tests', () => {
           </MenuTrigger>
           <MenuPopover>
             <MenuList>
-              <MenuItem content="Option 1" />
+              <MenuItem>Option 1</MenuItem>
             </MenuList>
           </MenuPopover>
         </Menu>
@@ -205,7 +207,7 @@ describe('Menu rerender tests', () => {
           </MenuTrigger>
           <MenuPopover>
             <MenuList>
-              <MenuItem content="Option 1" />
+              <MenuItem>Option 1</MenuItem>
             </MenuList>
           </MenuPopover>
         </Menu>
@@ -224,7 +226,7 @@ describe('Menu rerender tests', () => {
           </MenuTrigger>
           <MenuPopover>
             <MenuList>
-              <MenuItem accessibilityActions={action} content="Option 1" />
+              <MenuItem accessibilityActions={action}>Option 1</MenuItem>
             </MenuList>
           </MenuPopover>
         </Menu>

package/src/__tests__/__snapshots__/Menu.test.tsx.snap

@@ -178,7 +178,6 @@ Array [
             }
           }
           accessible={true}
-          content="Option 1"
           enableFocusRing={true}
           focusable={true}
           onAccessibilityTap={[Function]}
@@ -232,7 +231,6 @@ Array [
             }
           }
           accessible={true}
-          content="Option 2"
           disabled={true}
           enableFocusRing={true}
           focusable={true}
@@ -400,7 +398,6 @@ Array [
             }
           }
           accessible={true}
-          content="Option 1"
           enableFocusRing={true}
           focusable={true}
           onAccessibilityTap={[Function]}
@@ -574,7 +571,6 @@ Array [
             }
           }
           accessible={true}
-          content="Option 1"
           enableFocusRing={true}
           focusable={true}
           onAccessibilityAction={[Function]}
@@ -700,7 +696,6 @@ Array [
             }
           }
           accessible={true}
-          content="Option 2"
           disabled={true}
           enableFocusRing={true}
           focusable={true}
@@ -928,7 +923,6 @@ Array [
             }
           }
           accessible={true}
-          content="Option 1"
           enableFocusRing={true}
           focusable={true}
           onAccessibilityAction={[Function]}
@@ -1054,7 +1048,6 @@ Array [
             }
           }
           accessible={true}
-          content="Option 2"
           enableFocusRing={true}
           focusable={true}
           onAccessibilityAction={[Function]}
@@ -1281,7 +1274,6 @@ Array [
             }
           }
           accessible={true}
-          content="Option 1"
           enableFocusRing={true}
           focusable={true}
           onAccessibilityAction={[Function]}
@@ -1407,7 +1399,6 @@ Array [
             }
           }
           accessible={true}
-          content="Option 2"
           enableFocusRing={true}
           focusable={true}
           onAccessibilityAction={[Function]}
@@ -1634,7 +1625,6 @@ Array [
             }
           }
           accessible={true}
-          content="Option 1"
           enableFocusRing={true}
           focusable={true}
           onAccessibilityAction={[Function]}
@@ -1748,7 +1738,6 @@ Array [
             }
           }
           accessible={true}
-          content="Option 2"
           enableFocusRing={true}
           focusable={true}
           onAccessibilityAction={[Function]}
@@ -1967,7 +1956,6 @@ Array [
             }
           }
           accessible={true}
-          content="Option 1"
           enableFocusRing={true}
           focusable={true}
           onAccessibilityTap={[Function]}
@@ -2023,7 +2011,6 @@ Array [
             }
           }
           accessible={true}
-          content="Option 2"
           enableFocusRing={true}
           focusable={true}
           onAccessibilityAction={[Function]}