@fluentui-react-native/menu 0.14.1 → 0.14.4

package/src/MenuList/MenuList.types.ts

@@ -9,20 +9,26 @@ export interface MenuListTokens extends LayoutTokens, IBackgroundColorTokens {
 }
 
 export interface MenuListProps extends Omit<IViewProps, 'onPress'> {
-  checked?: Record<string, boolean>;
-  defaultChecked?: Record<string, boolean>;
+  checked?: string[];
+  defaultChecked?: string[];
   hasCheckmarks?: boolean;
-  onCheckedChange?: (e: InteractionEvent, name: string, isChecked: boolean) => void;
+  onCheckedChange?: (e: InteractionEvent, checked: string[]) => void;
 }
 
-export interface MenuListState extends MenuListProps {
+export interface MenuListState extends Omit<MenuListProps, 'checked' | 'onCheckedChange'> {
+  props: MenuListProps;
+  checked?: Record<string, boolean>;
   isCheckedControlled: boolean;
-  selectRadio?: (e: InteractionEvent, name: string, isChecked: boolean) => void;
+  onCheckedChange?: (e: InteractionEvent, name: string, isChecked: boolean) => void;
+  selectRadio?: (e: InteractionEvent, name: string) => void;
+  addRadioItem: (name: string) => void;
+  removeRadioItem: (name: string) => void;
 }
 
 export interface MenuListSlotProps {
   root: React.PropsWithRef<IViewProps> & { gap?: number };
 }
+
 export interface MenuListType {
   props: MenuListProps;
   tokens: MenuListTokens;

package/src/MenuList/useMenuList.ts

@@ -3,66 +3,105 @@ import React from 'react';
 import { useMenuContext } from '../context/menuContext';
 import { MenuListProps, MenuListState } from './MenuList.types';
 
+// Track the radio items so we know what to clear selection from when selectRadio is called
+// Purposefully left out of the hook because
+// 1. RadioItems just keeps track of information - changing this array doesn't need to force rerender
+// 2. Keeping them here means these consts are not recreated on every render, which would force rerendering of all children
+const radioItems = [];
+const addRadioItem = (name: string) => {
+  radioItems.push(name);
+};
+const removeRadioItem = (name: string) => {
+  radioItems.filter((item) => item !== name);
+};
+
 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, selectRadio] = useMenuCheckedState(isCheckedControlled, context);
+  const { defaultChecked, onCheckedChange: onCheckedChangeOriginal, checked: checkedOriginal } = context;
 
-  return {
-    ...context,
-    isCheckedControlled,
-    checked,
-    onCheckedChange,
-    selectRadio,
-  };
-};
+  // Convert passed in array to map so that i's easier to look up checked state
+  const checkedMap = React.useMemo(() => {
+    const state = {};
+    if (!checkedOriginal) {
+      return state;
+    }
+
+    for (const key of checkedOriginal) {
+      state[key] = true;
+    }
+    return state;
+  }, [checkedOriginal]);
+
+  const [checkedInternal, setCheckedInternal] = React.useState<Record<string, boolean>>(() => {
+    if (checkedMap) {
+      return checkedMap;
+    }
 
-const useMenuCheckedState = (
-  isControlled: boolean,
-  props: MenuListProps,
-): [
-  Record<string, boolean>,
-  (e: InteractionEvent, name: string, isChecked: boolean) => void,
-  (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 initialChecked = defaultChecked ?? [];
+    const state = {};
+    for (const key of initialChecked) {
+      state[key] = true;
+    }
+    return state;
+  });
 
-  const state = isControlled ? checked : checkedInternal;
+  const isCheckedControlled = typeof checkedOriginal !== 'undefined';
+  const checked = isCheckedControlled ? checkedMap : checkedInternal;
 
-  const setChecked = React.useCallback(
+  const onCheckedChange = React.useCallback(
     (e: InteractionEvent, name: string, isChecked: boolean) => {
-      if (!isControlled) {
-        const curChecked = state;
-        curChecked[name] = isChecked;
-        const updatedChecked = { ...curChecked };
+      const updatedChecked = { ...checked };
+      if (isChecked) {
+        updatedChecked[name] = true;
+      } else {
+        delete updatedChecked[name];
+      }
+
+      if (!isCheckedControlled) {
         setCheckedInternal(updatedChecked);
       }
 
-      if (onCheckedChange) {
-        onCheckedChange(e, name, isChecked);
+      if (onCheckedChangeOriginal) {
+        onCheckedChangeOriginal(e, Object.keys(updatedChecked));
       }
     },
-    [isControlled, state, onCheckedChange, setCheckedInternal],
+    [isCheckedControlled, checked, onCheckedChangeOriginal, setCheckedInternal],
   );
 
   const selectRadio = React.useCallback(
-    (e: InteractionEvent, name: string, isChecked: boolean) => {
-      if (!isControlled) {
-        const updatedChecked = { [name]: true };
+    (e: InteractionEvent, name: string) => {
+      const updatedChecked = {};
+      for (const checkedName of Object.keys(checked)) {
+        if (!radioItems.includes(checkedName)) {
+          // Preserve checked state if non-radio items
+          updatedChecked[checkedName] = checked[checkedName];
+        }
+      }
+      updatedChecked[name] = true;
+
+      if (!isCheckedControlled) {
         setCheckedInternal(updatedChecked);
       }
 
-      if (onCheckedChange) {
-        onCheckedChange(e, name, isChecked);
+      if (onCheckedChangeOriginal) {
+        onCheckedChangeOriginal(e, Object.keys(updatedChecked));
       }
     },
-    [isControlled, onCheckedChange, setCheckedInternal],
+    [isCheckedControlled, onCheckedChangeOriginal, setCheckedInternal, checked],
   );
 
-  return [state, setChecked, selectRadio];
+  return {
+    props: {
+      ...context,
+    },
+    isCheckedControlled,
+    checked,
+    onCheckedChange,
+    selectRadio,
+    addRadioItem,
+    removeRadioItem,
+  };
 };

package/src/MenuList/useMenuListContextValue.ts

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

package/src/MenuTrigger/MenuTrigger.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { memoize, stagedComponent } from '@fluentui-react-native/framework';
-import { menuTriggerName, MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';
+import { menuTriggerName, MenuTriggerChildProps, MenuTriggerState } from './MenuTrigger.types';
 import { useMenuTrigger } from './useMenuTrigger';
 import { AccessibilityActionEvent } from 'react-native';
 import { MenuTriggerProvider } from '../context/menuTriggerContext';
 
-export const MenuTrigger = stagedComponent((props: MenuTriggerProps) => {
-  const menuTrigger = useMenuTrigger(props);
+export const MenuTrigger = stagedComponent((_props: React.PropsWithChildren<Record<never, any>>) => {
+  const menuTrigger = useMenuTrigger();
 
-  return (_rest: MenuTriggerProps, children: React.ReactNode) => {
+  return (_rest: React.PropsWithChildren<Record<never, any>>, children: React.ReactNode) => {
     const childrenArray = React.Children.toArray(children) as React.ReactElement[];
 
     if (__DEV__) {
@@ -21,7 +21,7 @@ export const MenuTrigger = stagedComponent((props: MenuTriggerProps) => {
     // child component which may affect accessibility, we need to modify the
     // state in the inner render so we can access the child component and its props.
     const child = childrenArray[0];
-    const revisedProps = getRevisedState(menuTrigger, child.props);
+    const revisedProps = getRevisedProps(menuTrigger, child.props);
     const revised = React.cloneElement(child, revisedProps);
 
     return <MenuTriggerProvider value={menuTrigger.hasSubmenu}>{revised}</MenuTriggerProvider>;
@@ -29,8 +29,8 @@ export const MenuTrigger = stagedComponent((props: MenuTriggerProps) => {
 });
 MenuTrigger.displayName = menuTriggerName;
 
-const getRevisedState = memoize(getRevisedStateWorker);
-function getRevisedStateWorker(state: MenuTriggerState, props: any): MenuTriggerProps {
+const getRevisedProps = memoize(getRevisedPropsWorker);
+function getRevisedPropsWorker(state: MenuTriggerState, props: any): MenuTriggerChildProps {
   const revisedProps = state.props;
   if (props.accessibilityState) {
     revisedProps.accessibilityState = { ...revisedProps.accessibilityState, ...props.accessibilityState };

package/src/MenuTrigger/MenuTrigger.types.ts

@@ -3,7 +3,7 @@ import { ViewProps } from 'react-native';
 
 export const menuTriggerName = 'MenuTrigger';
 
-export interface MenuTriggerProps extends Omit<IWithPressableOptions<ViewProps>, 'onPress'> {
+export interface MenuTriggerChildProps extends Omit<IWithPressableOptions<ViewProps>, 'onPress'> {
   /**
    * A RefObject to refer to the trigger component.
    */
@@ -16,6 +16,6 @@ export interface MenuTriggerProps extends Omit<IWithPressableOptions<ViewProps>,
 }
 
 export interface MenuTriggerState {
-  props: MenuTriggerProps;
+  props: MenuTriggerChildProps;
   hasSubmenu: boolean;
 }

package/src/MenuTrigger/useMenuTrigger.ts

@@ -1,6 +1,6 @@
 import { useMenuContext } from '../context/menuContext';
 import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
-import { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';
+import { MenuTriggerState } from './MenuTrigger.types';
 import { AccessibilityActionEvent, AccessibilityActionName, Platform } from 'react-native';
 import React from 'react';
 import { delayHover, isCloseOnHoverOutEnabled } from '../consts';
@@ -10,7 +10,7 @@ const accessibilityActions =
 const expandedState = { expanded: true };
 const collapsedState = { expanded: false };
 
-export const useMenuTrigger = (_props: MenuTriggerProps): MenuTriggerState => {
+export const useMenuTrigger = (): MenuTriggerState => {
   const context = useMenuContext();
   const { open, openOnHover, popoverHoverOutTimer, setOpen, setTriggerHoverOutTimer, triggerHoverOutTimer, triggerRef } = context;
 

package/src/__tests__/Menu.test.tsx

@@ -110,7 +110,7 @@ describe('Checkbox component tests', () => {
   it('Menu open checkbox defaultChecked', () => {
     const tree = renderer
       .create(
-        <Menu open defaultChecked={{ 'Option 1': true }}>
+        <Menu open defaultChecked={['Option 1']}>
           <MenuTrigger>
             <Button>Open</Button>
           </MenuTrigger>
@@ -130,7 +130,7 @@ describe('Checkbox component tests', () => {
   it('Menu open checkbox checked', () => {
     const tree = renderer
       .create(
-        <Menu open checked={{ 'Option 1': true }}>
+        <Menu open checked={['Option 1']}>
           <MenuTrigger>
             <Button>Open</Button>
           </MenuTrigger>

package/src/context/menuContext.ts

@@ -13,8 +13,8 @@ export interface MenuContextValue extends MenuState {
 
 export const MenuContext = React.createContext<MenuContextValue>({
   isControlled: false,
-  checked: {},
-  defaultChecked: {},
+  checked: [],
+  defaultChecked: [],
   hasCheckmarks: false,
   isSubmenu: false,
   open: false,

package/src/context/menuListContext.ts

@@ -4,14 +4,17 @@ import type { MenuListState } from '../MenuList/MenuList.types';
 /**
  * Context shared between Menu and its child components
  */
-export type MenuListContextValue = MenuListState;
+export type MenuListContextValue = Omit<MenuListState, 'props'> & {
+  hasCheckmarks: boolean;
+};
 
 export const MenuListContext = React.createContext<MenuListContextValue>({
   isCheckedControlled: false,
   checked: {},
-  defaultChecked: {},
   hasCheckmarks: false,
   onCheckedChange: () => false,
+  addRadioItem: () => false,
+  removeRadioItem: () => false,
 });
 
 export const MenuListProvider = MenuListContext.Provider;