@fluentui/react-menu 0.0.0-nightlyfe9829e48120211112.1 → 0.0.0-nightlyff78d1e27a20220217.1

package/lib/components/Menu/Menu.types.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ComponentProps, ComponentState } from '@fluentui/react-utilities';
 import { usePopperMouseTarget, PositioningShorthand } from '@fluentui/react-positioning';
-import { MenuListCommons } from '../MenuList/index';
+import { MenuListCommons } from '../MenuList/MenuList.types';
 import { MenuContextValue } from '../../contexts/menuContext';
 declare type MenuCommons = MenuListCommons & {
     /**

package/lib/components/Menu/Menu.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.types.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"Menu.types.js","sourceRoot":"../src/","sources":["components/Menu/Menu.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { usePopperMouseTarget, PositioningShorthand } from '@fluentui/react-positioning';\nimport { MenuListCommons } from '../MenuList/MenuList.types';\nimport { MenuContextValue } from '../../contexts/menuContext';\n\ntype MenuCommons = MenuListCommons & {\n  /**\n   * Whether the popup is open\n   */\n  open: boolean;\n\n  /**\n   * Call back when the component requests to change value\n   * The `open` value is used as a hint when directly controlling the component\n   */\n  onOpenChange?: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;\n\n  /**\n   * Whether the popup is open by default\n   */\n  defaultOpen?: boolean;\n\n  /*\n   * Opens the menu on hover\n   */\n  openOnHover: boolean;\n\n  /**\n   * Opens the menu on right click (context menu), removes all other menu open interactions\n   */\n  openOnContext?: boolean;\n\n  /**\n   * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order\n   * This option is disregarded for submenus\n   */\n  inline?: boolean;\n\n  /**\n   * Do not dismiss the menu when a menu item is clicked\n   */\n  persistOnItemClick?: boolean;\n\n  /**\n   * Sets the delay for mouse open/close for the popover one mouse enter/leave\n   */\n  hoverDelay?: number;\n};\n\nexport type MenuSlots = {};\n\n/**\n * Extends and drills down Menulist props to simplify API\n */\nexport type MenuProps = Partial<MenuCommons> &\n  ComponentProps<MenuSlots> & {\n    /**\n     * Can contain two children including {@link MenuTrigger} and {@link MenuPopover}.\n     * Alternatively can only contain {@link MenuPopover} if using a custom `target`.\n     */\n    children: [JSX.Element, JSX.Element] | JSX.Element;\n\n    /**\n     * Configures the positioned menu\n     */\n    positioning?: PositioningShorthand;\n  };\n\nexport type MenuState = MenuCommons &\n  ComponentState<MenuSlots> & {\n    /**\n     * Callback to open/close the popup\n     */\n    setOpen: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;\n\n    /**\n     * Internal react node that just simplifies handling children\n     */\n    menuPopover: React.ReactNode;\n\n    /**\n     * Internal react node that just simplifies handling children\n     */\n    menuTrigger: React.ReactNode;\n\n    /**\n     * The ref for the popup\n     */\n    menuPopoverRef: React.MutableRefObject<HTMLElement>;\n\n    /**\n     * The ref for the MenuTrigger, used for popup positioning\n     */\n    triggerRef: React.MutableRefObject<HTMLElement>;\n\n    /**\n     * Id for the MenuTrigger element for aria relationship\n     */\n    triggerId: string;\n\n    /**\n     * Whether this menu is a submenu\n     */\n    isSubmenu: boolean;\n\n    /**\n     * Anchors the popper to the mouse click for context events\n     */\n    contextTarget: ReturnType<typeof usePopperMouseTarget>[0];\n\n    /**\n     * A callback to set the target of the popper to the mouse click for context events\n     */\n    setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];\n  };\n\n/**\n * Data attached to open/close events\n */\nexport type MenuOpenChangeData = {\n  open: boolean;\n  /**\n   * Indicates whether the change of state was a keyboard interaction\n   */\n  keyboard?: boolean;\n  /**\n   * indicates whether the request for the open state was bubbled from a nested menu\n   */\n  bubble?: boolean;\n};\n\nexport type MenuContextValues = {\n  menu: MenuContextValue;\n};\n\n/**\n * The supported events that will trigger open/close of the menu\n */\nexport type MenuOpenEvents =\n  | MouseEvent\n  | TouchEvent\n  | React.MouseEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.FocusEvent<HTMLElement>;\n"]}

package/lib/components/Menu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './Menu';\nexport * from './Menu.types';\nexport * from './renderMenu';\nexport * from './useMenu';\nexport * from './useMenuContextValues';\n"]}

package/lib/components/Menu/renderMenu.d.ts

@@ -2,4 +2,4 @@ import type { MenuContextValues, MenuState } from './Menu.types';
 /**
  * Render the final JSX of Menu
  */
-export declare const renderMenu: (state: MenuState, contextValues: MenuContextValues) => JSX.Element;
+export declare const renderMenu_unstable: (state: MenuState, contextValues: MenuContextValues) => JSX.Element;

package/lib/components/Menu/renderMenu.js

@@ -4,7 +4,7 @@ import { MenuProvider } from '../../contexts/menuContext';
  * Render the final JSX of Menu
  */
 
-export const renderMenu = (state, contextValues) => {
+export const renderMenu_unstable = (state, contextValues) => {
   return /*#__PURE__*/React.createElement(MenuProvider, {
     value: contextValues.menu
   }, state.menuTrigger, state.open && state.menuPopover);

package/lib/components/Menu/renderMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Menu/renderMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,YAAT,QAA6B,4BAA7B;AAGA;;AAEG;;AACH,OAAO,MAAM,UAAU,GAAG,CAAC,KAAD,EAAmB,aAAnB,KAAuD;AAC/E,sBACE,KAAA,CAAA,aAAA,CAAC,YAAD,EAAa;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAb,EACG,KAAK,CAAC,WADT,EAEG,KAAK,CAAC,IAAN,IAAc,KAAK,CAAC,WAFvB,CADF;AAMD,CAPM","sourceRoot":""}
+{"version":3,"sources":["components/Menu/renderMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,YAAT,QAA6B,4BAA7B;AAGA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAmB,aAAnB,KAAuD;AACxF,sBACE,KAAA,CAAA,aAAA,CAAC,YAAD,EAAa;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAb,EACG,KAAK,CAAC,WADT,EAEG,KAAK,CAAC,IAAN,IAAc,KAAK,CAAC,WAFvB,CADF;AAMD,CAPM","sourcesContent":["import * as React from 'react';\nimport { MenuProvider } from '../../contexts/menuContext';\nimport type { MenuContextValues, MenuState } from './Menu.types';\n\n/**\n * Render the final JSX of Menu\n */\nexport const renderMenu_unstable = (state: MenuState, contextValues: MenuContextValues) => {\n  return (\n    <MenuProvider value={contextValues.menu}>\n      {state.menuTrigger}\n      {state.open && state.menuPopover}\n    </MenuProvider>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Menu/useMenu.d.ts

@@ -3,8 +3,8 @@ import type { MenuProps, MenuState } from './Menu.types';
  * Create the state required to render Menu.
  *
  * The returned state can be modified with hooks such as useMenuStyles,
- * before being passed to renderMenu.
+ * before being passed to renderMenu_unstable.
  *
  * @param props - props from this instance of Menu
  */
-export declare const useMenu: (props: MenuProps) => MenuState;
+export declare const useMenu_unstable: (props: MenuProps) => MenuState;

package/lib/components/Menu/useMenu.js

@@ -4,20 +4,19 @@ import { useControllableState, useId, useOnClickOutside, useEventCallback } from
 import { useFluent } from '@fluentui/react-shared-contexts';
 import { elementContains } from '@fluentui/react-portal';
 import { useFocusFinders } from '@fluentui/react-tabster';
-import { MenuTrigger } from '../MenuTrigger/index';
-import { useMenuContext } from '../../contexts/menuContext';
+import { useMenuContext_unstable } from '../../contexts/menuContext';
 import { MENU_ENTER_EVENT, useOnMenuMouseEnter } from '../../utils/index';
 import { useIsSubmenu } from '../../utils/useIsSubmenu';
 /**
  * Create the state required to render Menu.
  *
  * The returned state can be modified with hooks such as useMenuStyles,
- * before being passed to renderMenu.
+ * before being passed to renderMenu_unstable.
  *
  * @param props - props from this instance of Menu
  */
 
-export const useMenu = props => {
+export const useMenu_unstable = props => {
   const triggerId = useId('menu');
   const isSubmenu = useIsSubmenu();
   const [contextTarget, setContextTarget] = usePopperMouseTarget();
@@ -29,23 +28,28 @@ export const useMenu = props => {
   };
   const children = React.Children.toArray(props.children);
 
-  if (children.length !== 2 && process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line no-console
-    console.warn('Menu can only take one MenuTrigger and one MenuList as children');
-  }
+  if (process.env.NODE_ENV !== 'production') {
+    if (children.length === 0) {
+      // eslint-disable-next-line no-console
+      console.warn('Menu must contain at least one child');
+    }
 
-  const {
-    menuTrigger,
-    menuPopover
-  } = children.reduce((acc, child) => {
-    if (child.type === MenuTrigger) {
-      acc.menuTrigger = child;
-    } else {
-      acc.menuPopover = child;
+    if (children.length > 2) {
+      // eslint-disable-next-line no-console
+      console.warn('Menu must contain at most two children');
     }
+  }
+
+  let menuTrigger = undefined;
+  let menuPopover = undefined;
+
+  if (children.length === 2) {
+    menuTrigger = children[0];
+    menuPopover = children[1];
+  } else if (children.length === 1) {
+    menuPopover = children[0];
+  }
 
-    return acc;
-  }, {});
   const {
     targetRef: triggerRef,
     containerRef: menuPopoverRef
@@ -61,7 +65,8 @@ export const useMenu = props => {
     menuTrigger,
     menuPopover,
     triggerRef,
-    menuPopoverRef
+    menuPopoverRef,
+    components: {}
   }; // TODO Better way to narrow types ?
 
   const [open, setOpen] = useMenuOpenState(initialState);
@@ -113,7 +118,7 @@ const useMenuOpenState = state => {
   const {
     targetDocument
   } = useFluent();
-  const parentSetOpen = useMenuContext(context => context.setOpen);
+  const parentSetOpen = useMenuContext_unstable(context => context.setOpen);
   const onOpenChange = useEventCallback((e, data) => {
     var _a;
 
@@ -227,15 +232,18 @@ const useMenuOpenState = state => {
     prevFocusable === null || prevFocusable === void 0 ? void 0 : prevFocusable.focus();
   }, [findPrevFocusable, state.triggerRef]);
   React.useEffect(() => {
-    var _a;
-
-    if (!shouldHandleKeyboardRef.current) {
-      return;
+    if (open) {
+      focusFirst();
     }
+  }, [open, focusFirst]);
+  React.useEffect(() => {
+    var _a;
 
     if (open) {
       focusFirst();
-    } else {
+    }
+
+    if (shouldHandleKeyboardRef.current && !open) {
       if (shouldHandleTabRef.current && !state.isSubmenu) {
         pressedShiftRef.current ? focusBeforeMenuTrigger() : focusAfterMenuTrigger();
       } else {

package/lib/components/Menu/useMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Menu/useMenu.tsx"],"names":[],"mappings":"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","sourceRoot":""}
+{"version":3,"sources":["components/Menu/useMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { usePopperMouseTarget, usePopper, resolvePositioningShorthand } from '@fluentui/react-positioning';\nimport { useControllableState, useId, useOnClickOutside, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MENU_ENTER_EVENT, useOnMenuMouseEnter } from '../../utils/index';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport type { MenuOpenChangeData, MenuOpenEvents, MenuProps, MenuState } from './Menu.types';\n\n/**\n * Create the state required to render Menu.\n *\n * The returned state can be modified with hooks such as useMenuStyles,\n * before being passed to renderMenu_unstable.\n *\n * @param props - props from this instance of Menu\n */\nexport const useMenu_unstable = (props: MenuProps): MenuState => {\n  const triggerId = useId('menu');\n  const isSubmenu = useIsSubmenu();\n  const [contextTarget, setContextTarget] = usePopperMouseTarget();\n\n  const popperState = {\n    position: isSubmenu ? ('after' as const) : ('below' as const),\n    align: isSubmenu ? ('top' as const) : ('start' as const),\n    target: props.openOnContext ? contextTarget : undefined,\n    ...resolvePositioningShorthand(props.positioning),\n  };\n\n  const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (children.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn('Menu must contain at least one child');\n    }\n\n    if (children.length > 2) {\n      // eslint-disable-next-line no-console\n      console.warn('Menu must contain at most two children');\n    }\n  }\n\n  let menuTrigger: React.ReactElement | undefined = undefined;\n  let menuPopover: React.ReactElement | undefined = undefined;\n  if (children.length === 2) {\n    menuTrigger = children[0];\n    menuPopover = children[1];\n  } else if (children.length === 1) {\n    menuPopover = children[0];\n  }\n  const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePopper(popperState);\n\n  const initialState = {\n    hoverDelay: 500,\n    triggerId,\n    isSubmenu: !!isSubmenu,\n    openOnHover: !!isSubmenu,\n    contextTarget,\n    setContextTarget,\n    ...props,\n    menuTrigger,\n    menuPopover,\n    triggerRef,\n    menuPopoverRef,\n    components: {},\n  } as const;\n\n  // TODO Better way to narrow types ?\n\n  const [open, setOpen] = useMenuOpenState(initialState);\n  const [checkedValues, onCheckedValueChange] = useMenuSelectableState(initialState);\n\n  return {\n    ...initialState,\n    open,\n    setOpen,\n    checkedValues,\n    onCheckedValueChange,\n  };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useMenuSelectableState = (\n  state: Pick<MenuProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: state.checkedValues,\n    defaultState: state.defaultCheckedValues,\n    initialState: {},\n  });\n  const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n  const onCheckedValueChange: MenuState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n    if (onCheckedValueChangeOriginal) {\n      onCheckedValueChangeOriginal(e, { name, checkedItems });\n    }\n\n    setCheckedValues(s => {\n      return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };\n    });\n  });\n\n  return [checkedValues, onCheckedValueChange] as const;\n};\n\nconst useMenuOpenState = (\n  state: Pick<MenuState, 'onOpenChange' | 'setContextTarget' | 'triggerRef' | 'menuPopoverRef' | 'isSubmenu'> &\n    Pick<MenuProps, 'open' | 'defaultOpen'>,\n) => {\n  const { targetDocument } = useFluent();\n  const parentSetOpen = useMenuContext_unstable(context => context.setOpen);\n  const onOpenChange: MenuState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n  const shouldHandleKeyboardRef = React.useRef(false);\n  const shouldHandleTabRef = React.useRef(false);\n  const pressedShiftRef = React.useRef(false);\n  const setOpenTimeout = React.useRef(0);\n  const enteringTriggerRef = React.useRef(false);\n\n  const [open, setOpenState] = useControllableState({\n    state: state.open,\n    defaultState: state.defaultOpen,\n    initialState: false,\n  });\n\n  const trySetOpen = useEventCallback((e: MenuOpenEvents, data: MenuOpenChangeData) => {\n    const event = e instanceof CustomEvent && e.type === MENU_ENTER_EVENT ? e.detail.nativeEvent : e;\n    onOpenChange?.(event, { ...data });\n    if (data.open && e.type === 'contextmenu') {\n      state.setContextTarget(e as React.MouseEvent);\n    }\n\n    if (!data.open) {\n      state.setContextTarget(undefined);\n    }\n\n    if (data.keyboard) {\n      shouldHandleKeyboardRef.current = true;\n      shouldHandleTabRef.current = (e as React.KeyboardEvent).key === 'Tab';\n      pressedShiftRef.current = (e as React.KeyboardEvent).shiftKey;\n    }\n\n    if (data.bubble) {\n      parentSetOpen(e, { ...data });\n    }\n\n    setOpenState(data.open);\n  });\n\n  const setOpen = useEventCallback((e: MenuOpenEvents, data: MenuOpenChangeData) => {\n    clearTimeout(setOpenTimeout.current);\n    if (!(e instanceof Event) && e.persist) {\n      // < React 17 still uses pooled synthetic events\n      e.persist();\n    }\n\n    if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === MENU_ENTER_EVENT) {\n      if (state.triggerRef.current?.contains(e.target as HTMLElement)) {\n        enteringTriggerRef.current = e.type === 'mouseenter' || e.type === 'mousemove';\n      }\n\n      // FIXME leaking Node timeout type\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      setOpenTimeout.current = setTimeout(() => trySetOpen(e, data), state.hoverDelay);\n    } else {\n      trySetOpen(e, data);\n    }\n  });\n\n  useOnClickOutside({\n    contains: elementContains,\n    disabled: !open,\n    element: targetDocument,\n    refs: [state.menuPopoverRef, state.triggerRef],\n    callback: e => setOpen(e, { open: false }),\n  });\n  useOnMenuMouseEnter({\n    element: targetDocument,\n    callback: e => {\n      // When moving from a menu directly back to its trigger, this handler can close the menu\n      // Explicitly check a flag to see if this situation happens\n      if (!enteringTriggerRef.current) {\n        setOpen(e, { open: false });\n      }\n    },\n    disabled: !open,\n    refs: [state.menuPopoverRef],\n  });\n\n  // Clear timeout on unmount\n  // Setting state after a component unmounts can cause memory leaks\n  React.useEffect(() => {\n    return () => {\n      clearTimeout(setOpenTimeout.current);\n    };\n  }, []);\n\n  // Manage focus for open state\n  const { findFirstFocusable, findNextFocusable, findPrevFocusable } = useFocusFinders();\n  const focusFirst = React.useCallback(() => {\n    const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);\n    firstFocusable?.focus();\n  }, [findFirstFocusable, state.menuPopoverRef]);\n\n  const focusAfterMenuTrigger = React.useCallback(() => {\n    const nextFocusable = findNextFocusable(state.triggerRef.current);\n    nextFocusable?.focus();\n  }, [findNextFocusable, state.triggerRef]);\n\n  const focusBeforeMenuTrigger = React.useCallback(() => {\n    const prevFocusable = findPrevFocusable(state.triggerRef.current);\n    prevFocusable?.focus();\n  }, [findPrevFocusable, state.triggerRef]);\n\n  React.useEffect(() => {\n    if (open) {\n      focusFirst();\n    }\n  }, [open, focusFirst]);\n\n  React.useEffect(() => {\n    if (open) {\n      focusFirst();\n    }\n\n    if (shouldHandleKeyboardRef.current && !open) {\n      if (shouldHandleTabRef.current && !state.isSubmenu) {\n        pressedShiftRef.current ? focusBeforeMenuTrigger() : focusAfterMenuTrigger();\n      } else {\n        state.triggerRef.current?.focus();\n      }\n    }\n\n    shouldHandleKeyboardRef.current = false;\n    shouldHandleTabRef.current = false;\n    pressedShiftRef.current = false;\n  }, [state.triggerRef, state.isSubmenu, open, focusFirst, focusAfterMenuTrigger, focusBeforeMenuTrigger]);\n\n  return [open ?? false, setOpen] as const;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Menu/useMenuContextValues.d.ts

@@ -1,2 +1,2 @@
 import type { MenuContextValues, MenuState } from './Menu.types';
-export declare function useMenuContextValues(state: MenuState): MenuContextValues;
+export declare function useMenuContextValues_unstable(state: MenuState): MenuContextValues;

package/lib/components/Menu/useMenuContextValues.js

@@ -1,4 +1,4 @@
-export function useMenuContextValues(state) {
+export function useMenuContextValues_unstable(state) {
   const {
     open,
     setOpen,

package/lib/components/Menu/useMenuContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Menu/useMenuContextValues.ts"],"names":[],"mappings":"AAEA,OAAM,SAAU,oBAAV,CAA+B,KAA/B,EAA+C;AACnD,QAAM;AACJ,IAAA,IADI;AAEJ,IAAA,OAFI;AAGJ,IAAA,oBAHI;AAIJ,IAAA,aAJI;AAKJ,IAAA,oBALI;AAMJ,IAAA,WANI;AAOJ,IAAA,aAPI;AAQJ,IAAA,UARI;AASJ,IAAA,SATI;AAUJ,IAAA,cAVI;AAWJ,IAAA,SAXI;AAYJ,IAAA,aAZI;AAaJ,IAAA,QAbI;AAcJ,IAAA,kBAdI;AAeJ,IAAA;AAfI,MAgBF,KAhBJ,CADmD,CAmBnD;;AACA,QAAM,IAAI,GAAG;AACX,IAAA,IADW;AAEX,IAAA,OAFW;AAGX,IAAA,oBAHW;AAIX,IAAA,aAJW;AAKX,IAAA,oBALW;AAMX,IAAA,UANW;AAOX,IAAA,WAPW;AAQX,IAAA,aARW;AASX,IAAA,SATW;AAUX,IAAA,cAVW;AAWX,IAAA,SAXW;AAYX,IAAA,aAZW;AAaX,IAAA,QAbW;AAcX,IAAA,kBAdW;AAeX,IAAA;AAfW,GAAb;AAkBA,SAAO;AAAE,IAAA;AAAF,GAAP;AACD","sourceRoot":""}
+{"version":3,"sources":["components/Menu/useMenuContextValues.ts"],"names":[],"mappings":"AAEA,OAAM,SAAU,6BAAV,CAAwC,KAAxC,EAAwD;AAC5D,QAAM;AACJ,IAAA,IADI;AAEJ,IAAA,OAFI;AAGJ,IAAA,oBAHI;AAIJ,IAAA,aAJI;AAKJ,IAAA,oBALI;AAMJ,IAAA,WANI;AAOJ,IAAA,aAPI;AAQJ,IAAA,UARI;AASJ,IAAA,SATI;AAUJ,IAAA,cAVI;AAWJ,IAAA,SAXI;AAYJ,IAAA,aAZI;AAaJ,IAAA,QAbI;AAcJ,IAAA,kBAdI;AAeJ,IAAA;AAfI,MAgBF,KAhBJ,CAD4D,CAmB5D;;AACA,QAAM,IAAI,GAAG;AACX,IAAA,IADW;AAEX,IAAA,OAFW;AAGX,IAAA,oBAHW;AAIX,IAAA,aAJW;AAKX,IAAA,oBALW;AAMX,IAAA,UANW;AAOX,IAAA,WAPW;AAQX,IAAA,aARW;AASX,IAAA,SATW;AAUX,IAAA,cAVW;AAWX,IAAA,SAXW;AAYX,IAAA,aAZW;AAaX,IAAA,QAbW;AAcX,IAAA,kBAdW;AAeX,IAAA;AAfW,GAAb;AAkBA,SAAO;AAAE,IAAA;AAAF,GAAP;AACD","sourcesContent":["import type { MenuContextValues, MenuState } from './Menu.types';\n\nexport function useMenuContextValues_unstable(state: MenuState): MenuContextValues {\n  const {\n    open,\n    setOpen,\n    onCheckedValueChange,\n    checkedValues,\n    defaultCheckedValues,\n    openOnHover,\n    openOnContext,\n    triggerRef,\n    triggerId,\n    menuPopoverRef,\n    isSubmenu,\n    hasCheckmarks,\n    hasIcons,\n    persistOnItemClick,\n    inline,\n  } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const menu = {\n    open,\n    setOpen,\n    onCheckedValueChange,\n    checkedValues,\n    defaultCheckedValues,\n    triggerRef,\n    openOnHover,\n    openOnContext,\n    triggerId,\n    menuPopoverRef,\n    isSubmenu,\n    hasCheckmarks,\n    hasIcons,\n    persistOnItemClick,\n    inline,\n  };\n\n  return { menu };\n}\n"],"sourceRoot":"../src/"}

package/lib/components/MenuDivider/MenuDivider.d.ts

@@ -1,6 +1,6 @@
 import type { MenuDividerProps } from './MenuDivider.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 /**
- * Define a styled MenuDivider, using the `useMenuDivider` hook.
+ * Define a styled MenuDivider, using the `useMenuDivider_unstable` hook.
  */
 export declare const MenuDivider: ForwardRefComponent<MenuDividerProps>;

package/lib/components/MenuDivider/MenuDivider.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { useMenuDivider } from './useMenuDivider';
-import { useMenuDividerStyles } from './useMenuDividerStyles';
-import { renderMenuDivider } from './renderMenuDivider';
+import { useMenuDivider_unstable } from './useMenuDivider';
+import { useMenuDividerStyles_unstable } from './useMenuDividerStyles';
+import { renderMenuDivider_unstable } from './renderMenuDivider';
 /**
- * Define a styled MenuDivider, using the `useMenuDivider` hook.
+ * Define a styled MenuDivider, using the `useMenuDivider_unstable` hook.
  */
 
 export const MenuDivider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useMenuDivider(props, ref);
-  useMenuDividerStyles(state);
-  return renderMenuDivider(state);
+  const state = useMenuDivider_unstable(props, ref);
+  useMenuDividerStyles_unstable(state);
+  return renderMenuDivider_unstable(state);
 });
 MenuDivider.displayName = 'MenuDivider';
 //# sourceMappingURL=MenuDivider.js.map

package/lib/components/MenuDivider/MenuDivider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuDivider/MenuDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,kBAA/B;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,iBAAT,QAAkC,qBAAlC;AAIA;;AAEG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAChG,QAAM,KAAK,GAAG,cAAc,CAAC,KAAD,EAAQ,GAAR,CAA5B;AACA,EAAA,oBAAoB,CAAC,KAAD,CAApB;AAEA,SAAO,iBAAiB,CAAC,KAAD,CAAxB;AACD,CALiE,CAA3D;AAOP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourceRoot":""}
+{"version":3,"sources":["components/MenuDivider/MenuDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AAIA;;AAEG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAChG,QAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;AACA,EAAA,6BAA6B,CAAC,KAAD,CAA7B;AAEA,SAAO,0BAA0B,CAAC,KAAD,CAAjC;AACD,CALiE,CAA3D;AAOP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { useMenuDivider_unstable } from './useMenuDivider';\nimport { useMenuDividerStyles_unstable } from './useMenuDividerStyles';\nimport { renderMenuDivider_unstable } from './renderMenuDivider';\nimport type { MenuDividerProps } from './MenuDivider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled MenuDivider, using the `useMenuDivider_unstable` hook.\n */\nexport const MenuDivider: ForwardRefComponent<MenuDividerProps> = React.forwardRef((props, ref) => {\n  const state = useMenuDivider_unstable(props, ref);\n  useMenuDividerStyles_unstable(state);\n\n  return renderMenuDivider_unstable(state);\n});\n\nMenuDivider.displayName = 'MenuDivider';\n"],"sourceRoot":"../src/"}

package/lib/components/MenuDivider/MenuDivider.types.d.ts

@@ -1,6 +1,6 @@
-import { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 export declare type MenuDividerSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
 };
 export declare type MenuDividerProps = ComponentProps<MenuDividerSlots>;
 export declare type MenuDividerState = ComponentState<MenuDividerSlots>;

package/lib/components/MenuDivider/MenuDivider.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuDivider.types.js","sourceRoot":"","sources":["../../../src/components/MenuDivider/MenuDivider.types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"MenuDivider.types.js","sourceRoot":"../src/","sources":["components/MenuDivider/MenuDivider.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuDividerSlots = {\n  root: Slot<'div'>;\n};\n\nexport type MenuDividerProps = ComponentProps<MenuDividerSlots>;\n\nexport type MenuDividerState = ComponentState<MenuDividerSlots>;\n"]}

package/lib/components/MenuDivider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MenuDivider/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/MenuDivider/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './MenuDivider.types';\nexport * from './MenuDivider';\nexport * from './renderMenuDivider';\nexport * from './useMenuDivider';\nexport * from './useMenuDividerStyles';\n"]}

package/lib/components/MenuDivider/renderMenuDivider.d.ts

@@ -3,4 +3,4 @@ import { MenuDividerState } from './MenuDivider.types';
  * Redefine the render function to add slots. Reuse the menudivider structure but add
  * slots to children.
  */
-export declare const renderMenuDivider: (state: MenuDividerState) => JSX.Element;
+export declare const renderMenuDivider_unstable: (state: MenuDividerState) => JSX.Element;

package/lib/components/MenuDivider/renderMenuDivider.js

@@ -5,11 +5,12 @@ import { getSlots } from '@fluentui/react-utilities';
  * slots to children.
  */
 
-export const renderMenuDivider = state => {
+export const renderMenuDivider_unstable = state => {
   const {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, Object.assign({}, slotProps.root));
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  });
 };
 //# sourceMappingURL=renderMenuDivider.js.map

package/lib/components/MenuDivider/renderMenuDivider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuDivider/renderMenuDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;;AAGG;;AACH,OAAO,MAAM,iBAAiB,GAAI,KAAD,IAA4B;AAC3D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAmB,KAAnB,CAArC;AAEA,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAAP;AACD,CAJM","sourceRoot":""}
+{"version":3,"sources":["components/MenuDivider/renderMenuDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;;AAGG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;AACpE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAmB,KAAnB,CAArC;AAEA,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';\n\n/**\n * Redefine the render function to add slots. Reuse the menudivider structure but add\n * slots to children.\n */\nexport const renderMenuDivider_unstable = (state: MenuDividerState) => {\n  const { slots, slotProps } = getSlots<MenuDividerSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/MenuDivider/useMenuDivider.d.ts

@@ -3,4 +3,4 @@ import type { MenuDividerProps, MenuDividerState } from './MenuDivider.types';
 /**
  * Given user props, returns state and render function for a MenuDivider.
  */
-export declare const useMenuDivider: (props: MenuDividerProps, ref: React.Ref<HTMLElement>) => MenuDividerState;
+export declare const useMenuDivider_unstable: (props: MenuDividerProps, ref: React.Ref<HTMLElement>) => MenuDividerState;

package/lib/components/MenuDivider/useMenuDivider.js

@@ -3,8 +3,11 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
  * Given user props, returns state and render function for a MenuDivider.
  */
 
-export const useMenuDivider = (props, ref) => {
+export const useMenuDivider_unstable = (props, ref) => {
   return {
+    components: {
+      root: 'div'
+    },
     root: getNativeElementProps('div', {
       role: 'presentation',
       'aria-hidden': true,

package/lib/components/MenuDivider/useMenuDivider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuDivider/useMenuDivider.ts"],"names":[],"mappings":"AAAA,SAAS,qBAAT,QAAsC,2BAAtC;AAIA;;AAEG;;AACH,OAAO,MAAM,cAAc,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;AACvG,SAAO;AACL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,IAAI,EAAE,cAD2B;AAEjC,qBAAe,IAFkB;AAGjC,SAAG,KAH8B;AAIjC,MAAA;AAJiC,KAAR;AADtB,GAAP;AAQD,CATM","sourceRoot":""}
+{"version":3,"sources":["components/MenuDivider/useMenuDivider.ts"],"names":[],"mappings":"AAAA,SAAS,qBAAT,QAAsC,2BAAtC;AAIA;;AAEG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;AAChH,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KADP;AAIL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,IAAI,EAAE,cAD2B;AAEjC,qBAAe,IAFkB;AAGjC,SAAG,KAH8B;AAIjC,MAAA;AAJiC,KAAR;AAJtB,GAAP;AAWD,CAZM","sourcesContent":["import { getNativeElementProps } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { MenuDividerProps, MenuDividerState } from './MenuDivider.types';\n\n/**\n * Given user props, returns state and render function for a MenuDivider.\n */\nexport const useMenuDivider_unstable = (props: MenuDividerProps, ref: React.Ref<HTMLElement>): MenuDividerState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      role: 'presentation',\n      'aria-hidden': true,\n      ...props,\n      ref,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/MenuDivider/useMenuDividerStyles.d.ts

@@ -1,3 +1,3 @@
 import type { MenuDividerState } from './MenuDivider.types';
 export declare const menuDividerClassName = "fui-MenuDivider";
-export declare const useMenuDividerStyles: (state: MenuDividerState) => import("@fluentui/react-utilities").ComponentState<import("./MenuDivider.types").MenuDividerSlots>;
+export declare const useMenuDividerStyles_unstable: (state: MenuDividerState) => MenuDividerState;

package/lib/components/MenuDivider/useMenuDividerStyles.js

@@ -1,4 +1,5 @@
-import { mergeClasses, __styles } from '@fluentui/react-make-styles';
+import { shorthands, mergeClasses, __styles } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
 export const menuDividerClassName = 'fui-MenuDivider';
 
 const useStyles = /*#__PURE__*/__styles({
@@ -15,7 +16,7 @@ const useStyles = /*#__PURE__*/__styles({
   "d": [".f1mpe4l3{height:1px;}", ".fvjh0tl{margin-top:4px;}", ".f1rnx978{margin-right:-5px;}", ".f1q7jvqi{margin-left:-5px;}", ".fd1gkq{margin-bottom:4px;}", ".f14z66ap{width:auto;}", ".fn4h89p{background-color:var(--colorNeutralStroke2);}"]
 });
 
-export const useMenuDividerStyles = state => {
+export const useMenuDividerStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = mergeClasses(menuDividerClassName, styles.root, state.root.className);
   return state;

package/lib/components/MenuDivider/useMenuDividerStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuDivider/useMenuDividerStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,6BAAzC;AAGA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;;AAEP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AASA,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAA4B;AAC9D,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAD,EAAuB,MAAM,CAAC,IAA9B,EAAoC,KAAK,CAAC,IAAN,CAAW,SAA/C,CAAnC;AAEA,SAAO,KAAP;AACD,CALM","sourceRoot":""}
+{"version":3,"sources":["components/MenuDivider/useMenuDividerStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;;AAEP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AASA,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA4B;AACvE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAD,EAAuB,MAAM,CAAC,IAA9B,EAAoC,KAAK,CAAC,IAAN,CAAW,SAA/C,CAAnC;AAEA,SAAO,KAAP;AACD,CALM","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuDividerState } from './MenuDivider.types';\n\nexport const menuDividerClassName = 'fui-MenuDivider';\n\nconst useStyles = makeStyles({\n  root: {\n    height: '1px',\n    ...shorthands.margin('4px', '-5px', '4px', '-5px'),\n    width: 'auto',\n    backgroundColor: tokens.colorNeutralStroke2,\n  },\n});\n\nexport const useMenuDividerStyles_unstable = (state: MenuDividerState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuDividerClassName, styles.root, state.root.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/MenuGroup/MenuGroup.d.ts

@@ -1,6 +1,6 @@
 import type { MenuGroupProps } from './MenuGroup.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 /**
- * Define a styled MenuGroup, using the `useMenuGroup` hook.
+ * Define a styled MenuGroup, using the `useMenuGroup_unstable` hook.
  */
 export declare const MenuGroup: ForwardRefComponent<MenuGroupProps>;

package/lib/components/MenuGroup/MenuGroup.js

@@ -1,17 +1,17 @@
 import * as React from 'react';
-import { useMenuGroup } from './useMenuGroup';
-import { renderMenuGroup } from './renderMenuGroup';
-import { useMenuGroupContextValues } from './useMenuGroupContextValues';
-import { useMenuGroupStyles } from './useMenuGroupStyles';
+import { useMenuGroup_unstable } from './useMenuGroup';
+import { renderMenuGroup_unstable } from './renderMenuGroup';
+import { useMenuGroupContextValues_unstable } from './useMenuGroupContextValues';
+import { useMenuGroupStyles_unstable } from './useMenuGroupStyles';
 /**
- * Define a styled MenuGroup, using the `useMenuGroup` hook.
+ * Define a styled MenuGroup, using the `useMenuGroup_unstable` hook.
  */
 
 export const MenuGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useMenuGroup(props, ref);
-  const contextValues = useMenuGroupContextValues(state);
-  useMenuGroupStyles(state);
-  return renderMenuGroup(state, contextValues);
+  const state = useMenuGroup_unstable(props, ref);
+  const contextValues = useMenuGroupContextValues_unstable(state);
+  useMenuGroupStyles_unstable(state);
+  return renderMenuGroup_unstable(state, contextValues);
 });
 MenuGroup.displayName = 'MenuGroup';
 //# sourceMappingURL=MenuGroup.js.map

package/lib/components/MenuGroup/MenuGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuGroup/MenuGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,YAAT,QAA6B,gBAA7B;AACA,SAAS,eAAT,QAAgC,mBAAhC;AACA,SAAS,yBAAT,QAA0C,6BAA1C;AAGA,SAAS,kBAAT,QAAmC,sBAAnC;AAEA;;AAEG;;AACH,OAAO,MAAM,SAAS,gBAAwC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC5F,QAAM,KAAK,GAAG,YAAY,CAAC,KAAD,EAAQ,GAAR,CAA1B;AACA,QAAM,aAAa,GAAG,yBAAyB,CAAC,KAAD,CAA/C;AAEA,EAAA,kBAAkB,CAAC,KAAD,CAAlB;AAEA,SAAO,eAAe,CAAC,KAAD,EAAQ,aAAR,CAAtB;AACD,CAP6D,CAAvD;AASP,SAAS,CAAC,WAAV,GAAwB,WAAxB","sourceRoot":""}
+{"version":3,"sources":["components/MenuGroup/MenuGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AACA,SAAS,kCAAT,QAAmD,6BAAnD;AAGA,SAAS,2BAAT,QAA4C,sBAA5C;AAEA;;AAEG;;AACH,OAAO,MAAM,SAAS,gBAAwC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC5F,QAAM,KAAK,GAAG,qBAAqB,CAAC,KAAD,EAAQ,GAAR,CAAnC;AACA,QAAM,aAAa,GAAG,kCAAkC,CAAC,KAAD,CAAxD;AAEA,EAAA,2BAA2B,CAAC,KAAD,CAA3B;AAEA,SAAO,wBAAwB,CAAC,KAAD,EAAQ,aAAR,CAA/B;AACD,CAP6D,CAAvD;AASP,SAAS,CAAC,WAAV,GAAwB,WAAxB","sourcesContent":["import * as React from 'react';\nimport { useMenuGroup_unstable } from './useMenuGroup';\nimport { renderMenuGroup_unstable } from './renderMenuGroup';\nimport { useMenuGroupContextValues_unstable } from './useMenuGroupContextValues';\nimport type { MenuGroupProps } from './MenuGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useMenuGroupStyles_unstable } from './useMenuGroupStyles';\n\n/**\n * Define a styled MenuGroup, using the `useMenuGroup_unstable` hook.\n */\nexport const MenuGroup: ForwardRefComponent<MenuGroupProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGroup_unstable(props, ref);\n  const contextValues = useMenuGroupContextValues_unstable(state);\n\n  useMenuGroupStyles_unstable(state);\n\n  return renderMenuGroup_unstable(state, contextValues);\n});\n\nMenuGroup.displayName = 'MenuGroup';\n"],"sourceRoot":"../src/"}

package/lib/components/MenuGroup/MenuGroup.types.d.ts

@@ -1,7 +1,7 @@
-import { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
-import { MenuGroupContextValue } from '../../contexts/menuGroupContext';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { MenuGroupContextValue } from '../../contexts/menuGroupContext';
 export declare type MenuGroupSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
 };
 export declare type MenuGroupProps = ComponentProps<MenuGroupSlots>;
 export declare type MenuGroupState = ComponentState<MenuGroupSlots> & {

package/lib/components/MenuGroup/MenuGroup.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuGroup.types.js","sourceRoot":"","sources":["../../../src/components/MenuGroup/MenuGroup.types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"MenuGroup.types.js","sourceRoot":"../src/","sources":["components/MenuGroup/MenuGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MenuGroupContextValue } from '../../contexts/menuGroupContext';\n\nexport type MenuGroupSlots = {\n  root: Slot<'div'>;\n};\n\nexport type MenuGroupProps = ComponentProps<MenuGroupSlots>;\n\nexport type MenuGroupState = ComponentState<MenuGroupSlots> & {\n  /**\n   * id applied to the DOM element of `MenuGroupHeader`\n   */\n  headerId: string;\n};\n\nexport type MenuGroupContextValues = {\n  menuGroup: MenuGroupContextValue;\n};\n"]}

package/lib/components/MenuGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MenuGroup/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/MenuGroup/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC","sourcesContent":["export * from './MenuGroup.types';\nexport * from './MenuGroup';\nexport * from './renderMenuGroup';\nexport * from './useMenuGroup';\nexport * from './useMenuGroupContextValues';\nexport * from './useMenuGroupStyles';\n"]}

package/lib/components/MenuGroup/renderMenuGroup.d.ts

@@ -3,4 +3,4 @@ import { MenuGroupContextValues, MenuGroupState } from './MenuGroup.types';
  * Redefine the render function to add slots. Reuse the menugroup structure but add
  * slots to children.
  */
-export declare const renderMenuGroup: (state: MenuGroupState, contextValues: MenuGroupContextValues) => JSX.Element;
+export declare const renderMenuGroup_unstable: (state: MenuGroupState, contextValues: MenuGroupContextValues) => JSX.Element;

package/lib/components/MenuGroup/renderMenuGroup.js

@@ -6,13 +6,14 @@ import { MenuGroupContextProvider } from '../../contexts/menuGroupContext';
  * slots to children.
  */
 
-export const renderMenuGroup = (state, contextValues) => {
+export const renderMenuGroup_unstable = (state, contextValues) => {
   const {
     slots,
     slotProps
   } = getSlots(state);
   return /*#__PURE__*/React.createElement(MenuGroupContextProvider, {
     value: contextValues.menuGroup
-  }, /*#__PURE__*/React.createElement(slots.root, Object.assign({}, slotProps.root)));
+  }, /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }));
 };
 //# sourceMappingURL=renderMenuGroup.js.map

package/lib/components/MenuGroup/renderMenuGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuGroup/renderMenuGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,wBAAT,QAAyC,iCAAzC;AAEA;;;AAGG;;AACH,OAAO,MAAM,eAAe,GAAG,CAAC,KAAD,EAAwB,aAAxB,KAAiE;AAC9F,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAiB,KAAjB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,wBAAD,EAAyB;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAzB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CADF,CADF;AAKD,CARM","sourceRoot":""}
+{"version":3,"sources":["components/MenuGroup/renderMenuGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,wBAAT,QAAyC,iCAAzC;AAEA;;;AAGG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CAAC,KAAD,EAAwB,aAAxB,KAAiE;AACvG,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAiB,KAAjB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,wBAAD,EAAyB;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAzB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CADF,CADF;AAKD,CARM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { MenuGroupContextValues, MenuGroupSlots, MenuGroupState } from './MenuGroup.types';\nimport { MenuGroupContextProvider } from '../../contexts/menuGroupContext';\n\n/**\n * Redefine the render function to add slots. Reuse the menugroup structure but add\n * slots to children.\n */\nexport const renderMenuGroup_unstable = (state: MenuGroupState, contextValues: MenuGroupContextValues) => {\n  const { slots, slotProps } = getSlots<MenuGroupSlots>(state);\n\n  return (\n    <MenuGroupContextProvider value={contextValues.menuGroup}>\n      <slots.root {...slotProps.root} />\n    </MenuGroupContextProvider>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/MenuGroup/useMenuGroup.d.ts

@@ -3,4 +3,4 @@ import { MenuGroupProps, MenuGroupState } from './MenuGroup.types';
 /**
  * Given user props, returns state and render function for a MenuGroup.
  */
-export declare function useMenuGroup(props: MenuGroupProps, ref: React.Ref<HTMLElement>): MenuGroupState;
+export declare function useMenuGroup_unstable(props: MenuGroupProps, ref: React.Ref<HTMLElement>): MenuGroupState;

package/lib/components/MenuGroup/useMenuGroup.js

@@ -3,9 +3,12 @@ import { getNativeElementProps, useId } from '@fluentui/react-utilities';
  * Given user props, returns state and render function for a MenuGroup.
  */
 
-export function useMenuGroup(props, ref) {
+export function useMenuGroup_unstable(props, ref) {
   const headerId = useId('menu-group');
   return {
+    components: {
+      root: 'div'
+    },
     root: getNativeElementProps('div', {
       ref,
       'aria-labelledby': headerId,

package/lib/components/MenuGroup/useMenuGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuGroup/useMenuGroup.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,KAAhC,QAA6C,2BAA7C;AAGA;;AAEG;;AACH,OAAM,SAAU,YAAV,CAAuB,KAAvB,EAA8C,GAA9C,EAAyE;AAC7E,QAAM,QAAQ,GAAG,KAAK,CAAC,YAAD,CAAtB;AAEA,SAAO;AACL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,yBAAmB,QAFc;AAGjC,MAAA,IAAI,EAAE,OAH2B;AAIjC,SAAG;AAJ8B,KAAR,CADtB;AAOL,IAAA,QAAQ,EAAE;AAPL,GAAP;AASD","sourceRoot":""}
+{"version":3,"sources":["components/MenuGroup/useMenuGroup.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,KAAhC,QAA6C,2BAA7C;AAGA;;AAEG;;AACH,OAAM,SAAU,qBAAV,CAAgC,KAAhC,EAAuD,GAAvD,EAAkF;AACtF,QAAM,QAAQ,GAAG,KAAK,CAAC,YAAD,CAAtB;AAEA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KADP;AAIL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,yBAAmB,QAFc;AAGjC,MAAA,IAAI,EAAE,OAH2B;AAIjC,SAAG;AAJ8B,KAAR,CAJtB;AAUL,IAAA,QAAQ,EAAE;AAVL,GAAP;AAYD","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId } from '@fluentui/react-utilities';\nimport { MenuGroupProps, MenuGroupState } from './MenuGroup.types';\n\n/**\n * Given user props, returns state and render function for a MenuGroup.\n */\nexport function useMenuGroup_unstable(props: MenuGroupProps, ref: React.Ref<HTMLElement>): MenuGroupState {\n  const headerId = useId('menu-group');\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      'aria-labelledby': headerId,\n      role: 'group',\n      ...props,\n    }),\n    headerId: headerId,\n  };\n}\n"],"sourceRoot":"../src/"}

package/lib/components/MenuGroup/useMenuGroupContextValues.d.ts

@@ -1,2 +1,2 @@
 import type { MenuGroupContextValues, MenuGroupState } from './MenuGroup.types';
-export declare function useMenuGroupContextValues(state: MenuGroupState): MenuGroupContextValues;
+export declare function useMenuGroupContextValues_unstable(state: MenuGroupState): MenuGroupContextValues;

package/lib/components/MenuGroup/useMenuGroupContextValues.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export function useMenuGroupContextValues(state) {
+export function useMenuGroupContextValues_unstable(state) {
   const {
     headerId
   } = state;

package/lib/components/MenuGroup/useMenuGroupContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuGroup/useMenuGroupContextValues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,OAAM,SAAU,yBAAV,CAAoC,KAApC,EAAyD;AAC7D,QAAM;AAAE,IAAA;AAAF,MAAe,KAArB;AACA,QAAM,SAAS,GAAG,KAAK,CAAC,OAAN,CAAc,OAAO;AAAE,IAAA;AAAF,GAAP,CAAd,EAAoC,CAAC,QAAD,CAApC,CAAlB;AAEA,SAAO;AAAE,IAAA;AAAF,GAAP;AACD","sourceRoot":""}
+{"version":3,"sources":["components/MenuGroup/useMenuGroupContextValues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,OAAM,SAAU,kCAAV,CAA6C,KAA7C,EAAkE;AACtE,QAAM;AAAE,IAAA;AAAF,MAAe,KAArB;AACA,QAAM,SAAS,GAAG,KAAK,CAAC,OAAN,CAAc,OAAO;AAAE,IAAA;AAAF,GAAP,CAAd,EAAoC,CAAC,QAAD,CAApC,CAAlB;AAEA,SAAO;AAAE,IAAA;AAAF,GAAP;AACD","sourcesContent":["import * as React from 'react';\nimport type { MenuGroupContextValues, MenuGroupState } from './MenuGroup.types';\n\nexport function useMenuGroupContextValues_unstable(state: MenuGroupState): MenuGroupContextValues {\n  const { headerId } = state;\n  const menuGroup = React.useMemo(() => ({ headerId }), [headerId]);\n\n  return { menuGroup };\n}\n"],"sourceRoot":"../src/"}

package/lib/components/MenuGroup/useMenuGroupStyles.d.ts

@@ -1,3 +1,3 @@
 import type { MenuGroupState } from './MenuGroup.types';
 export declare const menuGroupClassName = "fui-MenuGroup";
-export declare const useMenuGroupStyles: (state: MenuGroupState) => MenuGroupState;
+export declare const useMenuGroupStyles_unstable: (state: MenuGroupState) => MenuGroupState;

package/lib/components/MenuGroup/useMenuGroupStyles.js

@@ -1,6 +1,6 @@
-import { mergeClasses } from '@fluentui/react-make-styles';
+import { mergeClasses } from '@griffel/react';
 export const menuGroupClassName = 'fui-MenuGroup';
-export const useMenuGroupStyles = state => {
+export const useMenuGroupStyles_unstable = state => {
   state.root.className = mergeClasses(menuGroupClassName, state.root.className);
   return state;
 };

package/lib/components/MenuGroup/useMenuGroupStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuGroup/useMenuGroupStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,QAA6B,6BAA7B;AAGA,OAAO,MAAM,kBAAkB,GAAG,eAA3B;AAEP,OAAO,MAAM,kBAAkB,GAAI,KAAD,IAA0C;AAC1E,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,kBAAD,EAAqB,KAAK,CAAC,IAAN,CAAW,SAAhC,CAAnC;AAEA,SAAO,KAAP;AACD,CAJM","sourceRoot":""}
+{"version":3,"sources":["components/MenuGroup/useMenuGroupStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,QAA6B,gBAA7B;AAGA,OAAO,MAAM,kBAAkB,GAAG,eAA3B;AAEP,OAAO,MAAM,2BAA2B,GAAI,KAAD,IAA0C;AACnF,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,kBAAD,EAAqB,KAAK,CAAC,IAAN,CAAW,SAAhC,CAAnC;AAEA,SAAO,KAAP;AACD,CAJM","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { MenuGroupState } from './MenuGroup.types';\n\nexport const menuGroupClassName = 'fui-MenuGroup';\n\nexport const useMenuGroupStyles_unstable = (state: MenuGroupState): MenuGroupState => {\n  state.root.className = mergeClasses(menuGroupClassName, state.root.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/MenuGroupHeader/MenuGroupHeader.d.ts

@@ -1,6 +1,6 @@
 import type { MenuGroupHeaderProps } from './MenuGroupHeader.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 /**
- * Define a styled MenuGroupHeader, using the `useMenuGroupHeader` hook.
+ * Define a styled MenuGroupHeader, using the `useMenuGroupHeader_unstable` hook.
  */
 export declare const MenuGroupHeader: ForwardRefComponent<MenuGroupHeaderProps>;