@fluentui-react-native/menu 0.6.0 → 0.9.0

package/src/MenuItemCheckbox/MenuItemCheckbox.styling.ts

@@ -3,7 +3,7 @@ import { fontStyles, layoutStyles } from '@fluentui-react-native/tokens';
 import { defaultMenuItemCheckboxTokens } from './MenuItemCheckboxTokens';
 import { menuItemCheckboxName, MenuItemCheckboxProps, MenuItemCheckboxTokens, MenuItemCheckboxSlotProps } from './MenuItemCheckbox.types';
 
-export const menuItemCheckboxStates: (keyof MenuItemCheckboxTokens)[] = ['hovered', 'focused', 'pressed', 'disabled'];
+export const menuItemCheckboxStates: (keyof MenuItemCheckboxTokens)[] = ['hovered', 'focused', 'pressed', 'disabled', 'checked'];
 
 export const stylingSettings: UseStylingOptions<MenuItemCheckboxProps, MenuItemCheckboxSlotProps, MenuItemCheckboxTokens> = {
   tokens: [defaultMenuItemCheckboxTokens, menuItemCheckboxName],
@@ -21,16 +21,25 @@ export const stylingSettings: UseStylingOptions<MenuItemCheckboxProps, MenuItemC
       }),
       ['backgroundColor', ...layoutStyles.keys],
     ),
+    checkmark: buildProps(
+      (tokens: MenuItemCheckboxTokens) => ({
+        opacity: tokens.checkmarkVisibility,
+        color: 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 },
+      }),
+      ['checkmarkSize', 'gap', 'color'],
+    ),
     content: buildProps(
-      (tokens: MenuItemCheckboxTokens, theme: Theme) => {
-        return {
-          style: {
-            flexGrow: 1,
-            color: tokens.color,
-            ...fontStyles.from(tokens, theme),
-          },
-        };
-      },
+      (tokens: MenuItemCheckboxTokens, theme: Theme) => ({
+        style: {
+          flexGrow: 1,
+          color: tokens.color,
+          ...fontStyles.from(tokens, theme),
+        },
+      }),
       ['color', ...fontStyles.keys],
     ),
   },

package/src/MenuItemCheckbox/MenuItemCheckbox.tsx

@@ -1,5 +1,6 @@
 /** @jsx withSlots */
 import { View } from 'react-native';
+import { SvgXml } from 'react-native-svg';
 import { compose, mergeProps, UseSlots, withSlots } from '@fluentui-react-native/framework';
 import { Text } from '@fluentui-react-native/experimental-text';
 import { menuItemCheckboxName, MenuItemCheckboxProps, MenuItemCheckboxType } from './MenuItemCheckbox.types';
@@ -11,6 +12,7 @@ export const MenuItemCheckbox = compose<MenuItemCheckboxType>({
   ...stylingSettings,
   slots: {
     root: View,
+    checkmark: SvgXml,
     content: Text,
   },
   useRender: (userProps: MenuItemCheckboxProps, useSlots: UseSlots<MenuItemCheckboxType>) => {
@@ -19,8 +21,17 @@ export const MenuItemCheckbox = compose<MenuItemCheckboxType>({
 
     return (final: MenuItemCheckboxProps) => {
       const mergedProps = mergeProps(menuItem.props, final);
+      const chevronXml = `
+      <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>`;
 
-      return <Slots.root {...mergedProps}>{mergedProps.content && <Slots.content>{mergedProps.content}</Slots.content>}</Slots.root>;
+      return (
+        <Slots.root {...mergedProps}>
+          <Slots.checkmark xml={chevronXml} />
+          {mergedProps.content && <Slots.content>{mergedProps.content}</Slots.content>}
+        </Slots.root>
+      );
     };
   },
 });

package/src/MenuItemCheckbox/MenuItemCheckbox.types.ts

@@ -1,13 +1,21 @@
 import * as React from 'react';
-import { ViewProps } from 'react-native';
+import { ColorValue, ViewProps } from 'react-native';
+import { XmlProps } from 'react-native-svg';
 import type { IViewProps } from '@fluentui-react-native/adapters';
 import { TextProps } from '@fluentui-react-native/experimental-text';
-import { IFocusable, InteractionEvent, IPressableHooks, IWithPressableOptions } from '@fluentui-react-native/interactive-hooks';
+import { IFocusable, IPressableHooks, IWithPressableOptions } from '@fluentui-react-native/interactive-hooks';
 import { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/tokens';
 
 export const menuItemCheckboxName = 'MenuItemCheckbox';
 
 export interface MenuItemCheckboxTokens extends LayoutTokens, FontTokens, IBorderTokens, IColorTokens {
+  checkmarkColor?: ColorValue;
+  checkmarkPadding?: number;
+  checkmarkSize?: number;
+  checkmarkVisibility?: number;
+  gap?: number;
+
+  checked?: MenuItemCheckboxTokens;
   disabled?: MenuItemCheckboxTokens;
   focused?: MenuItemCheckboxTokens;
   hovered?: MenuItemCheckboxTokens;
@@ -28,20 +36,16 @@ export interface MenuItemCheckboxProps extends Omit<IWithPressableOptions<ViewPr
   componentRef?: React.RefObject<IFocusable>;
 
   /**
-   * If the menu item is a trigger for a submenu
-   */
-  hasSubmenu?: boolean;
-
-  /**
-   * A callback to call on button click event
+   * Identifier for the control
    */
-  onClick?: (e: InteractionEvent) => void;
+  name: string;
 }
 
-export type MenuItemCheckboxState = IPressableHooks<MenuItemCheckboxProps & React.ComponentPropsWithRef<any>>;
+export interface MenuItemCheckboxState extends IPressableHooks<MenuItemCheckboxProps & React.ComponentPropsWithRef<any>> {}
 
 export interface MenuItemCheckboxSlotProps {
   root: React.PropsWithRef<IViewProps>;
+  checkmark?: XmlProps;
   content?: TextProps;
 }
 

package/src/MenuItemCheckbox/MenuItemCheckboxTokens.ts

@@ -6,10 +6,14 @@ import { MenuItemCheckboxTokens } from './MenuItemCheckbox.types';
 export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens, Theme> = (t: Theme): MenuItemCheckboxTokens => ({
   backgroundColor: t.colors.neutralBackground1,
   borderRadius: globalTokens.corner.radius.medium,
+  checkmarkPadding: globalTokens.spacing.none,
+  checkmarkSize: 16,
+  checkmarkVisibility: 0,
   color: t.colors.neutralForeground2,
   fontFamily: t.typography.families.primary,
   fontSize: globalTokens.font.size[300],
   fontWeight: globalTokens.font.weight.regular as FontWeightValue,
+  gap: globalTokens.spacing.xs,
   minHeight: 32,
   minWidth: 160,
   maxWidth: 300,
@@ -17,13 +21,29 @@ export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens
   hovered: {
     backgroundColor: t.colors.neutralBackground1Hover,
     color: t.colors.neutralForeground2Hover,
+    checked: {
+      checkmarkColor: t.colors.neutralForeground2Hover,
+      checkmarkVisibility: 1,
+    },
   },
   pressed: {
     backgroundColor: t.colors.neutralBackground1Pressed,
     color: t.colors.neutralForeground2Pressed,
+    checked: {
+      checkmarkColor: t.colors.neutralForeground2Pressed,
+      checkmarkVisibility: 1,
+    },
   },
   disabled: {
     backgroundColor: t.colors.neutralBackground1,
     color: t.colors.neutralForegroundDisabled,
+    checked: {
+      checkmarkColor: t.colors.neutralForegroundDisabled,
+      checkmarkVisibility: 1,
+    },
+  },
+  checked: {
+    checkmarkColor: t.colors.neutralForeground2,
+    checkmarkVisibility: 1,
   },
 });

package/src/MenuItemCheckbox/MenuItemCheckboxTokens.win32.ts

@@ -6,10 +6,14 @@ import { MenuItemCheckboxTokens } from './MenuItemCheckbox.types';
 export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens, Theme> = (t: Theme): MenuItemCheckboxTokens => ({
   backgroundColor: t.colors.neutralBackground1,
   borderRadius: globalTokens.corner.radius.none,
+  checkmarkPadding: globalTokens.spacing.xxs,
+  checkmarkSize: 16,
+  checkmarkVisibility: 0,
   color: t.colors.neutralForeground1,
   fontFamily: t.typography.families.primary,
   fontSize: globalTokens.font.size[200],
   fontWeight: globalTokens.font.weight.regular as FontWeightValue,
+  gap: globalTokens.spacing.xs,
   minHeight: 24,
   minWidth: 160,
   maxWidth: 300,
@@ -18,13 +22,29 @@ export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens
   hovered: {
     backgroundColor: t.colors.neutralBackground1Hover,
     color: t.colors.neutralForeground1Hover,
+    checked: {
+      checkmarkColor: t.colors.neutralForeground1Hover,
+      checkmarkVisibility: 1,
+    },
   },
   pressed: {
     backgroundColor: t.colors.neutralBackground1Pressed,
     color: t.colors.neutralForeground1Pressed,
+    checked: {
+      checkmarkColor: t.colors.neutralForeground1Pressed,
+      checkmarkVisibility: 1,
+    },
   },
   disabled: {
     backgroundColor: t.colors.neutralBackground1,
     color: t.colors.neutralForegroundDisabled,
+    checked: {
+      checkmarkColor: t.colors.neutralForegroundDisabled,
+      checkmarkVisibility: 1,
+    },
+  },
+  checked: {
+    checkmarkColor: t.colors.neutralForeground1,
+    checkmarkVisibility: 1,
   },
 });

package/src/MenuItemCheckbox/useMenuItemCheckbox.ts

@@ -1,40 +1,88 @@
 import * as React from 'react';
-import { AccessibilityState } from 'react-native';
+import { AccessibilityActionEvent, AccessibilityState } from 'react-native';
 import { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';
 import { memoize } from '@fluentui-react-native/framework';
-import { useAsPressable, useKeyProps } from '@fluentui-react-native/interactive-hooks';
-import { useMenuContext } from '../context/menuContext';
+import {
+  InteractionEvent,
+  useAsPressable,
+  useKeyProps,
+  useOnPressWithFocus,
+  useViewCommandFocus,
+} from '@fluentui-react-native/interactive-hooks';
+import { useMenuListContext } from '../context/menuListContext';
+
+const defaultAccessibilityActions = [{ name: 'Toggle' }];
 
 export const useMenuItemCheckbox = (props: MenuItemCheckboxProps): MenuItemCheckboxState => {
   // attach the pressable state handlers
   const defaultComponentRef = React.useRef(null);
-  const { onClick, accessibilityState, componentRef = defaultComponentRef, disabled, ...rest } = props;
-  const pressable = useAsPressable({ ...rest, disabled, onPress: onClick });
-  const onKeyProps = useKeyProps(onClick, ' ', 'Enter');
-  const hasSubmenu = useMenuContext().isSubmenu;
+  const {
+    accessibilityActions,
+    accessibilityState,
+    componentRef = defaultComponentRef,
+    disabled,
+    name,
+    onAccessibilityAction,
+    ...rest
+  } = props;
+  const context = useMenuListContext();
+  const checked = context.checked?.[name];
+  const onCheckedChange = context.onCheckedChange;
+
+  const toggleChecked = React.useCallback(
+    (e: InteractionEvent) => {
+      onCheckedChange(e, name, !checked);
+    },
+    [checked, name, onCheckedChange],
+  );
+  // Ensure focus is placed on checkbox after click
+  const toggleCheckedWithFocus = useOnPressWithFocus(componentRef, toggleChecked);
+
+  const pressable = useAsPressable({ onPress: toggleCheckedWithFocus, ...rest });
+  const buttonRef = useViewCommandFocus(componentRef);
+
+  const onKeyProps = useKeyProps(toggleChecked, ' ');
+  const accessibilityActionsProp = accessibilityActions
+    ? [...defaultAccessibilityActions, ...accessibilityActions]
+    : defaultAccessibilityActions;
+  const onAccessibilityActionProp = React.useCallback(
+    (event: AccessibilityActionEvent) => {
+      if (event.nativeEvent.actionName === 'Toggle') {
+        toggleChecked(event);
+      }
+      onAccessibilityAction && onAccessibilityAction(event);
+    },
+    [toggleChecked, onAccessibilityAction],
+  );
+
+  const state = {
+    ...pressable.state,
+    disabled: !!props.disabled,
+    checked: checked,
+  };
 
   return {
     props: {
       ...pressable.props,
       accessible: true,
-      accessibilityRole: 'button',
-      onAccessibilityTap: props.onAccessibilityTap || props.onClick,
+      accessibilityActions: accessibilityActionsProp,
       accessibilityLabel: props.accessibilityLabel,
-      accessibilityState: getAccessibilityState(disabled, accessibilityState),
+      accessibilityRole: 'menuitem',
+      accessibilityState: getAccessibilityState(disabled, state.checked, accessibilityState),
       enableFocusRing: true,
       focusable: !disabled,
-      hasSubmenu,
-      ref: componentRef,
+      onAccessibilityAction: onAccessibilityActionProp,
+      ref: buttonRef,
       ...onKeyProps,
     },
-    state: pressable.state,
+    state: state,
   };
 };
 
 const getAccessibilityState = memoize(getAccessibilityStateWorker);
-function getAccessibilityStateWorker(disabled: boolean, accessibilityState?: AccessibilityState) {
+function getAccessibilityStateWorker(disabled: boolean, checked: boolean, accessibilityState?: AccessibilityState) {
   if (accessibilityState) {
-    return { disabled, ...accessibilityState };
+    return { disabled, checked, ...accessibilityState };
   }
-  return { disabled };
+  return { disabled, checked };
 }

package/src/MenuList/MenuList.tsx

@@ -4,6 +4,9 @@ import { View } from 'react-native';
 import { compose, UseSlots, withSlots } from '@fluentui-react-native/framework';
 import { menuListName, MenuListProps, MenuListType } from './MenuList.types';
 import { stylingSettings } from './MenuList.styling';
+import { MenuListProvider } from '../context/menuListContext';
+import { useMenuList } from './useMenuList';
+import { useMenuListContextValue } from './useMenuContextValue';
 
 export const MenuList = compose<MenuListType>({
   displayName: menuListName,
@@ -12,10 +15,16 @@ export const MenuList = compose<MenuListType>({
     root: View,
   },
   useRender: (userProps: MenuListProps, useSlots: UseSlots<MenuListType>) => {
-    const Slots = useSlots(userProps);
+    const menuList = useMenuList(userProps);
+    const contextValue = useMenuListContextValue(menuList);
+    const Slots = useSlots(menuList);
 
     return (_final: MenuListProps, children: React.ReactNode) => {
-      return <Slots.root>{children}</Slots.root>;
+      return (
+        <MenuListProvider value={contextValue}>
+          <Slots.root>{children}</Slots.root>
+        </MenuListProvider>
+      );
     };
   },
 });

package/src/MenuList/MenuList.types.ts

@@ -1,11 +1,21 @@
 import type { IViewProps } from '@fluentui-react-native/adapters';
+import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
 import { IBackgroundColorTokens, LayoutTokens } from '@fluentui-react-native/tokens';
 
 export const menuListName = 'MenuList';
 
 export interface MenuListTokens extends LayoutTokens, IBackgroundColorTokens {}
 
-export interface MenuListProps extends Omit<IViewProps, 'onPress'> {}
+export interface MenuListProps extends Omit<IViewProps, 'onPress'> {
+  checked?: Record<string, boolean>;
+  defaultChecked?: Record<string, boolean>;
+  hasCheckmarks?: boolean;
+  onCheckedChange?: (e: InteractionEvent, name: string, isChecked: boolean) => void;
+}
+
+export interface MenuListState extends MenuListProps {
+  isCheckedControlled: boolean;
+}
 
 export interface MenuListSlotProps {
   root: React.PropsWithRef<IViewProps>;

package/src/MenuList/useMenuContextValue.ts

@@ -0,0 +1,6 @@
+import { MenuListContextValue } from '../context/menuListContext';
+import { MenuListState } from './MenuList.types';
+
+export const useMenuListContextValue = (state: MenuListState): MenuListContextValue => {
+  return { ...state };
+};

package/src/MenuList/useMenuList.ts

@@ -0,0 +1,49 @@
+import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+import React from 'react';
+import { useMenuContext } from '../context/menuContext';
+import { MenuListProps, MenuListState } from './MenuList.types';
+
+export const useMenuList = (_props: MenuListProps): MenuListState => {
+  const context = useMenuContext();
+
+  // MenuList v2 needs to be able to be standalone, but this is not in scope for v1
+  // Assuming that checked information will come from parent Menu
+  const isCheckedControlled = typeof context.checked !== 'undefined';
+  const [checked, onCheckedChange] = useMenuCheckedState(isCheckedControlled, context);
+
+  return {
+    ...context,
+    isCheckedControlled,
+    checked,
+    onCheckedChange,
+  };
+};
+
+const useMenuCheckedState = (
+  isControlled: boolean,
+  props: MenuListProps,
+): [Record<string, boolean>, (e: InteractionEvent, name: string, isChecked: boolean) => void] => {
+  const { defaultChecked, onCheckedChange, checked } = props;
+  const initialState = defaultChecked ?? checked ?? {};
+  const [checkedInternal, setCheckedInternal] = React.useState<Record<string, boolean>>(initialState);
+
+  const state = isControlled ? checked : checkedInternal;
+
+  const setChecked = React.useCallback(
+    (e: InteractionEvent, name: string, isChecked: boolean) => {
+      if (!isControlled) {
+        const curChecked = state;
+        curChecked[name] = isChecked;
+        const updatedChecked = { ...curChecked };
+        setCheckedInternal(updatedChecked);
+      }
+
+      if (onCheckedChange) {
+        onCheckedChange(e, name, isChecked);
+      }
+    },
+    [isControlled, state, onCheckedChange, setCheckedInternal],
+  );
+
+  return [state, setChecked];
+};

package/src/context/menuContext.ts

@@ -8,8 +8,12 @@ export type MenuContextValue = MenuState;
 
 export const MenuContext = React.createContext<MenuContextValue>({
   isControlled: false,
+  checked: {},
+  defaultChecked: {},
+  hasCheckmarks: false,
   isSubmenu: false,
   open: false,
+  onCheckedChange: () => false,
   setOpen: () => false,
   triggerRef: null,
 });

package/src/context/menuListContext.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { MenuListState } from '../MenuList/MenuList.types';
+
+/**
+ * Context shared between Menu and its child components
+ */
+export type MenuListContextValue = MenuListState;
+
+export const MenuListContext = React.createContext<MenuListContextValue>({
+  isCheckedControlled: false,
+  checked: {},
+  defaultChecked: {},
+  hasCheckmarks: false,
+  onCheckedChange: () => false,
+});
+
+export const MenuListProvider = MenuListContext.Provider;
+export const useMenuListContext = () => React.useContext(MenuListContext);

package/src/index.ts

@@ -2,4 +2,6 @@ export { Menu } from './Menu/Menu';
 export { MenuTrigger } from './MenuTrigger/MenuTrigger';
 export { MenuPopover } from './MenuPopover/MenuPopover';
 export { MenuItem } from './MenuItem/MenuItem';
+export { MenuItemCheckbox } from './MenuItemCheckbox/MenuItemCheckbox';
 export { MenuList } from './MenuList/MenuList';
+export { MenuDivider } from './MenuDivider/MenuDivider';

package/lib/context/menuTriggerContext.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=menuTriggerContext.d.ts.map

package/lib/context/menuTriggerContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"menuTriggerContext.d.ts","sourceRoot":"","sources":["../../src/context/menuTriggerContext.ts"],"names":[],"mappings":""}

package/lib/context/menuTriggerContext.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=menuTriggerContext.js.map

package/lib/context/menuTriggerContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"menuTriggerContext.js","sourceRoot":"","sources":["../../src/context/menuTriggerContext.ts"],"names":[],"mappings":""}

package/lib-commonjs/context/menuTriggerContext.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=menuTriggerContext.d.ts.map

package/lib-commonjs/context/menuTriggerContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"menuTriggerContext.d.ts","sourceRoot":"","sources":["../../src/context/menuTriggerContext.ts"],"names":[],"mappings":""}

package/lib-commonjs/context/menuTriggerContext.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=menuTriggerContext.js.map

package/lib-commonjs/context/menuTriggerContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"menuTriggerContext.js","sourceRoot":"","sources":["../../src/context/menuTriggerContext.ts"],"names":[],"mappings":""}