@fluentui-react-native/menu 0.14.3 → 0.14.6

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/MenuPopover/useMenuPopover.ts

@@ -18,6 +18,7 @@ export const useMenuPopover = (_props: MenuPopoverProps): MenuPopoverState => {
     parentPopoverHoverOutTimer,
     popoverHoverOutTimer,
     setPopoverHoverOutTimer,
+    shouldFocusOnContainer,
     triggerHoverOutTimer,
   } = context;
 
@@ -60,6 +61,8 @@ export const useMenuPopover = (_props: MenuPopoverProps): MenuPopoverState => {
     innerView: {
       onMouseEnter,
       onMouseLeave: isCloseOnHoverOutEnabled && onMouseLeave,
+      accessible: shouldFocusOnContainer,
+      focusable: shouldFocusOnContainer,
     },
   };
 };

package/src/MenuTrigger/useMenuTrigger.ts

@@ -38,6 +38,7 @@ export const useMenuTrigger = (): MenuTriggerState => {
       if (openOnHover) {
         clearTimeout(popoverHoverOutTimer);
         clearTimeout(triggerHoverOutTimer);
+        e.persist();
         setTimeout(() => {
           setOpen(e, true /* isOpen */);
         }, delayHover);
@@ -49,6 +50,7 @@ export const useMenuTrigger = (): MenuTriggerState => {
   const onHoverOut = React.useCallback(
     (e: InteractionEvent) => {
       if (openOnHover) {
+        e.persist();
         const timer = setTimeout(() => {
           setOpen(e, false /* isOpen */);
         }, delayHover);

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/__tests__/__snapshots__/Menu.test.tsx.snap

@@ -153,6 +153,8 @@ Array [
     }
   >
     <View
+      accessible={false}
+      focusable={false}
       onMouseEnter={[Function]}
       onMouseLeave={false}
     >
@@ -194,6 +196,7 @@ Array [
             Object {
               "alignItems": "center",
               "backgroundColor": "#ffffff",
+              "borderRadius": 4,
               "display": "flex",
               "flexDirection": "row",
               "maxWidth": 300,
@@ -248,6 +251,7 @@ Array [
             Object {
               "alignItems": "center",
               "backgroundColor": "#ffffff",
+              "borderRadius": 4,
               "display": "flex",
               "flexDirection": "row",
               "marginTop": 2,
@@ -371,6 +375,8 @@ Array [
     }
   >
     <View
+      accessible={false}
+      focusable={false}
       onMouseEnter={[Function]}
       onMouseLeave={false}
     >
@@ -412,6 +418,7 @@ Array [
             Object {
               "alignItems": "center",
               "backgroundColor": "#ffffff",
+              "borderRadius": 4,
               "display": "flex",
               "flexDirection": "row",
               "maxWidth": 300,
@@ -534,6 +541,8 @@ Array [
     }
   >
     <View
+      accessible={false}
+      focusable={false}
       onMouseEnter={[Function]}
       onMouseLeave={false}
     >
@@ -583,6 +592,7 @@ Array [
             Object {
               "alignItems": "center",
               "backgroundColor": "#ffffff",
+              "borderRadius": 4,
               "display": "flex",
               "flexDirection": "row",
               "maxWidth": 300,
@@ -691,6 +701,7 @@ Array [
           }
           accessible={true}
           content="Option 2"
+          disabled={true}
           enableFocusRing={true}
           focusable={true}
           onAccessibilityAction={[Function]}
@@ -708,6 +719,7 @@ Array [
             Object {
               "alignItems": "center",
               "backgroundColor": "#ffffff",
+              "borderRadius": 4,
               "display": "flex",
               "flexDirection": "row",
               "marginTop": 2,
@@ -883,6 +895,8 @@ Array [
     }
   >
     <View
+      accessible={false}
+      focusable={false}
       onMouseEnter={[Function]}
       onMouseLeave={false}
     >
@@ -932,6 +946,7 @@ Array [
             Object {
               "alignItems": "center",
               "backgroundColor": "#ffffff",
+              "borderRadius": 4,
               "display": "flex",
               "flexDirection": "row",
               "maxWidth": 300,
@@ -1057,6 +1072,7 @@ Array [
             Object {
               "alignItems": "center",
               "backgroundColor": "#ffffff",
+              "borderRadius": 4,
               "display": "flex",
               "flexDirection": "row",
               "marginTop": 2,
@@ -1232,6 +1248,8 @@ Array [
     }
   >
     <View
+      accessible={false}
+      focusable={false}
       onMouseEnter={[Function]}
       onMouseLeave={false}
     >
@@ -1281,6 +1299,7 @@ Array [
             Object {
               "alignItems": "center",
               "backgroundColor": "#ffffff",
+              "borderRadius": 4,
               "display": "flex",
               "flexDirection": "row",
               "maxWidth": 300,
@@ -1406,6 +1425,7 @@ Array [
             Object {
               "alignItems": "center",
               "backgroundColor": "#ffffff",
+              "borderRadius": 4,
               "display": "flex",
               "flexDirection": "row",
               "marginTop": 2,
@@ -1581,6 +1601,8 @@ Array [
     }
   >
     <View
+      accessible={false}
+      focusable={false}
       onMouseEnter={[Function]}
       onMouseLeave={false}
     >
@@ -1630,6 +1652,7 @@ Array [
             Object {
               "alignItems": "center",
               "backgroundColor": "#ffffff",
+              "borderRadius": 4,
               "display": "flex",
               "flexDirection": "row",
               "maxWidth": 300,
@@ -1743,6 +1766,7 @@ Array [
             Object {
               "alignItems": "center",
               "backgroundColor": "#ffffff",
+              "borderRadius": 4,
               "display": "flex",
               "flexDirection": "row",
               "marginTop": 2,
@@ -1918,6 +1942,8 @@ Array [
     }
   >
     <View
+      accessible={false}
+      focusable={false}
       onMouseEnter={[Function]}
       onMouseLeave={false}
     >
@@ -1959,6 +1985,7 @@ Array [
             Object {
               "alignItems": "center",
               "backgroundColor": "#ffffff",
+              "borderRadius": 4,
               "display": "flex",
               "flexDirection": "row",
               "maxWidth": 300,
@@ -2017,6 +2044,7 @@ Array [
             Object {
               "alignItems": "center",
               "backgroundColor": "#ffffff",
+              "borderRadius": 4,
               "display": "flex",
               "flexDirection": "row",
               "maxWidth": 300,

package/src/context/menuContext.ts

@@ -13,13 +13,14 @@ export interface MenuContextValue extends MenuState {
 
 export const MenuContext = React.createContext<MenuContextValue>({
   isControlled: false,
-  checked: {},
-  defaultChecked: {},
+  checked: [],
+  defaultChecked: [],
   hasCheckmarks: false,
   isSubmenu: false,
   open: false,
   onCheckedChange: () => false,
   setOpen: () => false,
+  shouldFocusOnContainer: false,
   triggerRef: null,
 });
 

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;