chore(react-menu): stop spreading props on state

change/@fluentui-react-menu-f8dcc543-b619-4573-b398-32120ddf06c4.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore(react-menu): stop spreading props on state",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/react-components/react-menu/etc/react-menu.api.md

@@ -32,7 +32,7 @@ export type MenuCheckedValueChangeData = {
 export type MenuCheckedValueChangeEvent = React_2.MouseEvent | React_2.KeyboardEvent;
 
 // @public
-export type MenuContextValue = MenuListProps & Pick<MenuState, 'openOnHover' | 'openOnContext' | 'triggerRef' | 'menuPopoverRef' | 'setOpen' | 'isSubmenu' | 'triggerId' | 'hasIcons' | 'hasCheckmarks' | 'persistOnItemClick' | 'inline'> & {
+export type MenuContextValue = Pick<MenuState, 'openOnHover' | 'openOnContext' | 'triggerRef' | 'menuPopoverRef' | 'setOpen' | 'isSubmenu' | 'triggerId' | 'hasIcons' | 'hasCheckmarks' | 'persistOnItemClick' | 'inline' | 'checkedValues' | 'onCheckedValueChange' | 'defaultCheckedValues'> & {
     open: boolean;
     triggerId: string;
 };
@@ -281,7 +281,7 @@ export type MenuSplitGroupSlots = {
 export type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots>;
 
 // @public (undocumented)
-export type MenuState = ComponentState<MenuSlots> & Pick<MenuProps, 'defaultCheckedValues' | 'hasCheckmarks' | 'hasIcons' | 'inline' | 'onOpenChange' | 'openOnContext' | 'persistOnItemClick'> & Required<Pick<MenuProps, 'checkedValues' | 'onCheckedValueChange' | 'open' | 'openOnHover' | 'closeOnScroll'>> & {
+export type MenuState = ComponentState<MenuSlots> & Pick<MenuProps, 'onOpenChange' | 'defaultCheckedValues'> & Required<Pick<MenuProps, 'hasCheckmarks' | 'hasIcons' | 'inline' | 'checkedValues' | 'onCheckedValueChange' | 'open' | 'openOnHover' | 'closeOnScroll' | 'hoverDelay' | 'openOnContext' | 'persistOnItemClick'>> & {
     contextTarget: ReturnType<typeof usePositioningMouseTarget>[0];
     isSubmenu: boolean;
     menuPopover: React_2.ReactNode;

packages/react-components/react-menu/src/common/mockUseMenuContext.ts

@@ -16,6 +16,15 @@ export const mockUseMenuContext = (options: Partial<MenuContextValue> = {}) => {
     openOnContext: false,
     openOnHover: false,
     isSubmenu: false,
+    checkedValues: {},
+    defaultCheckedValues: undefined,
+    hasCheckmarks: false,
+    hasIcons: false,
+    inline: false,
+    persistOnItemClick: false,
+    onCheckedValueChange: () => {
+      /* noop */
+    },
     triggerId: 'id',
     ...options,
   };

packages/react-components/react-menu/src/components/Menu/Menu.types.ts

@@ -89,17 +89,23 @@ export type MenuProps = ComponentProps<MenuSlots> &
   };
 
 export type MenuState = ComponentState<MenuSlots> &
-  Pick<
-    MenuProps,
-    | 'defaultCheckedValues'
-    | 'hasCheckmarks'
-    | 'hasIcons'
-    | 'inline'
-    | 'onOpenChange'
-    | 'openOnContext'
-    | 'persistOnItemClick'
-  > &
-  Required<Pick<MenuProps, 'checkedValues' | 'onCheckedValueChange' | 'open' | 'openOnHover' | 'closeOnScroll'>> & {
+  Pick<MenuProps, 'onOpenChange' | 'defaultCheckedValues'> &
+  Required<
+    Pick<
+      MenuProps,
+      | 'hasCheckmarks'
+      | 'hasIcons'
+      | 'inline'
+      | 'checkedValues'
+      | 'onCheckedValueChange'
+      | 'open'
+      | 'openOnHover'
+      | 'closeOnScroll'
+      | 'hoverDelay'
+      | 'openOnContext'
+      | 'persistOnItemClick'
+    >
+  > & {
     /**
      * Anchors the popper to the mouse click for context events
      */

packages/react-components/react-menu/src/components/Menu/useMenu.tsx

@@ -24,6 +24,16 @@ import type { MenuOpenChangeData, MenuOpenEvents, MenuProps, MenuState } from '.
  * @param props - props from this instance of Menu
  */
 export const useMenu_unstable = (props: MenuProps): MenuState => {
+  const {
+    hoverDelay = 500,
+    inline = false,
+    hasCheckmarks = false,
+    hasIcons = false,
+    closeOnScroll = false,
+    openOnContext = false,
+    persistOnItemClick = false,
+    defaultCheckedValues,
+  } = props;
   const triggerId = useId('menu');
   const isSubmenu = useIsSubmenu();
   const [contextTarget, setContextTarget] = usePositioningMouseTarget();
@@ -59,33 +69,50 @@ export const useMenu_unstable = (props: MenuProps): MenuState => {
   }
   const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);
 
-  const initialState = {
-    hoverDelay: 500,
+  // TODO Better way to narrow types ?
+
+  const [open, setOpen] = useMenuOpenState({
+    hoverDelay,
+    isSubmenu,
+    setContextTarget,
+    closeOnScroll,
+    menuPopoverRef,
+    triggerRef,
+    open: props.open,
+    defaultOpen: props.defaultOpen,
+    onOpenChange: props.onOpenChange,
+    openOnContext,
+  });
+
+  const [checkedValues, onCheckedValueChange] = useMenuSelectableState({
+    checkedValues: props.checkedValues,
+    defaultCheckedValues,
+    onCheckedValueChange: props.onCheckedValueChange,
+  });
+
+  return {
+    inline,
+    hoverDelay,
     triggerId,
-    isSubmenu: !!isSubmenu,
-    openOnHover: !!isSubmenu,
+    isSubmenu,
+    openOnHover: isSubmenu,
     contextTarget,
     setContextTarget,
-    ...props,
-    closeOnScroll: props.closeOnScroll ?? false,
+    hasCheckmarks,
+    hasIcons,
+    closeOnScroll,
     menuTrigger,
     menuPopover,
     triggerRef,
     menuPopoverRef,
     components: {},
-  } as const;
-
-  // TODO Better way to narrow types ?
-
-  const [open, setOpen] = useMenuOpenState(initialState);
-  const [checkedValues, onCheckedValueChange] = useMenuSelectableState(initialState);
-
-  return {
-    ...initialState,
+    openOnContext,
     open,
     setOpen,
     checkedValues,
+    defaultCheckedValues,
     onCheckedValueChange,
+    persistOnItemClick,
   };
 };
 
@@ -125,6 +152,7 @@ const useMenuOpenState = (
     | 'triggerRef'
     | 'openOnContext'
     | 'closeOnScroll'
+    | 'hoverDelay'
   > &
     Pick<MenuProps, 'open' | 'defaultOpen'>,
 ) => {

packages/react-components/react-menu/src/components/Menu/useMenuContextValues.test.tsx

@@ -16,18 +16,18 @@ describe('useMenuContextValues_unstable', () => {
       Object {
         "checkedValues": Object {},
         "defaultCheckedValues": undefined,
-        "hasCheckmarks": undefined,
-        "hasIcons": undefined,
-        "inline": undefined,
+        "hasCheckmarks": false,
+        "hasIcons": false,
+        "inline": false,
         "isSubmenu": false,
         "menuPopoverRef": Object {
           "current": null,
         },
         "onCheckedValueChange": [Function],
         "open": false,
-        "openOnContext": undefined,
+        "openOnContext": false,
         "openOnHover": false,
-        "persistOnItemClick": undefined,
+        "persistOnItemClick": false,
         "setOpen": [Function],
         "triggerId": "menu1",
         "triggerRef": Object {

packages/react-components/react-menu/src/contexts/menuContext.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 import type { ContextSelector, Context } from '@fluentui/react-context-selector';
-import type { MenuListProps } from '../components/index';
 import type { MenuState } from '../components/Menu/index';
 
 export const MenuContext: Context<MenuContextValue> = createContext<MenuContextValue | undefined>(
@@ -22,31 +21,35 @@ const menuContextDefaultValue: MenuContextValue = {
   openOnHover: false,
   hasIcons: false,
   hasCheckmarks: false,
+  inline: false,
+  persistOnItemClick: false,
 };
 
 /**
  * Context shared between Menu and its children components
  *
  * Extends and drills down MenuList props to simplify API
  */
-export type MenuContextValue = MenuListProps &
-  Pick<
-    MenuState,
-    | 'openOnHover'
-    | 'openOnContext'
-    | 'triggerRef'
-    | 'menuPopoverRef'
-    | 'setOpen'
-    | 'isSubmenu'
-    | 'triggerId'
-    | 'hasIcons'
-    | 'hasCheckmarks'
-    | 'persistOnItemClick'
-    | 'inline'
-  > & {
-    open: boolean;
-    triggerId: string;
-  };
+export type MenuContextValue = Pick<
+  MenuState,
+  | 'openOnHover'
+  | 'openOnContext'
+  | 'triggerRef'
+  | 'menuPopoverRef'
+  | 'setOpen'
+  | 'isSubmenu'
+  | 'triggerId'
+  | 'hasIcons'
+  | 'hasCheckmarks'
+  | 'persistOnItemClick'
+  | 'inline'
+  | 'checkedValues'
+  | 'onCheckedValueChange'
+  | 'defaultCheckedValues'
+> & {
+  open: boolean;
+  triggerId: string;
+};
 
 export const MenuProvider = MenuContext.Provider;