@fluentui/react-menu 0.0.0-nightly-20230303-0424.1 → 0.0.0-nightly-20230307-0423.1

package/lib/components/MenuPopover/MenuPopover.js

@@ -2,12 +2,17 @@ import * as React from 'react';
 import { useMenuPopover_unstable } from './useMenuPopover';
 import { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles';
 import { renderMenuPopover_unstable } from './renderMenuPopover';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus
  */
 export const MenuPopover = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useMenuPopover_unstable(props, ref);
   useMenuPopoverStyles_unstable(state);
+  const {
+    useMenuPopoverStyles_unstable: useCustomStyles
+  } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderMenuPopover_unstable(state);
 });
 MenuPopover.displayName = 'MenuPopover';

package/lib/components/MenuPopover/MenuPopover.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMenuPopover_unstable","useMenuPopoverStyles_unstable","renderMenuPopover_unstable","MenuPopover","forwardRef","props","ref","state","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuPopover_unstable } from './useMenuPopover';\nimport { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles';\nimport { renderMenuPopover_unstable } from './renderMenuPopover';\nimport type { MenuPopoverProps } from './MenuPopover.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus\n */\nexport const MenuPopover: ForwardRefComponent<MenuPopoverProps> = React.forwardRef((props, ref) => {\n  const state = useMenuPopover_unstable(props, ref);\n\n  useMenuPopoverStyles_unstable(state);\n  return renderMenuPopover_unstable(state);\n});\n\nMenuPopover.displayName = 'MenuPopover';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,0BAA0B,QAAQ,qBAAqB;AAIhE;;;AAGA,OAAO,MAAMC,WAAW,gBAA0CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGP,uBAAuB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEjDL,6BAA6B,CAACM,KAAK,CAAC;EACpC,OAAOL,0BAA0B,CAACK,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFJ,WAAW,CAACK,WAAW,GAAG,aAAa"}
+{"version":3,"names":["React","useMenuPopover_unstable","useMenuPopoverStyles_unstable","renderMenuPopover_unstable","useCustomStyleHooks_unstable","MenuPopover","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuPopover_unstable } from './useMenuPopover';\nimport { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles';\nimport { renderMenuPopover_unstable } from './renderMenuPopover';\nimport type { MenuPopoverProps } from './MenuPopover.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus\n */\nexport const MenuPopover: ForwardRefComponent<MenuPopoverProps> = React.forwardRef((props, ref) => {\n  const state = useMenuPopover_unstable(props, ref);\n\n  useMenuPopoverStyles_unstable(state);\n\n  const { useMenuPopoverStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderMenuPopover_unstable(state);\n});\n\nMenuPopover.displayName = 'MenuPopover';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,0BAA0B,QAAQ,qBAAqB;AAGhE,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,WAAW,gBAA0CL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGR,uBAAuB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAEjDN,6BAA6B,CAACO,KAAK,CAAC;EAEpC,MAAM;IAAEP,6BAA6B,EAAEQ;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EACzFM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAON,0BAA0B,CAACM,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFJ,WAAW,CAACM,WAAW,GAAG,aAAa"}

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

@@ -1 +1 @@
-{"version":3,"file":"MenuPopover.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuPopoverSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * MenuPopover Props\n */\nexport type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;\n\n/**\n * State used in rendering MenuPopover\n */\nexport type MenuPopoverState = ComponentState<MenuPopoverSlots> & {\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"]}
+{"version":3,"file":"MenuPopover.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuPopoverSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * MenuPopover Props\n */\nexport type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;\n\n/**\n * State used in rendering MenuPopover\n */\nexport type MenuPopoverState = ComponentState<MenuPopoverSlots> &\n  Pick<PortalProps, 'mountNode'> & {\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"]}

package/lib/components/MenuPopover/renderMenuPopover.js

@@ -14,7 +14,9 @@ export const renderMenuPopover_unstable = state => {
       ...slotProps.root
     });
   }
-  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(slots.root, {
+  return /*#__PURE__*/React.createElement(Portal, {
+    mountNode: state.mountNode
+  }, /*#__PURE__*/React.createElement(slots.root, {
     ...slotProps.root
   }));
 };

package/lib/components/MenuPopover/renderMenuPopover.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","Portal","renderMenuPopover_unstable","state","slots","slotProps","inline","createElement","root"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/renderMenuPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport { Portal } from '@fluentui/react-portal';\n\n/**\n * Render the final JSX of MenuPopover\n */\nexport const renderMenuPopover_unstable = (state: MenuPopoverState) => {\n  const { slots, slotProps } = getSlots<MenuPopoverSlots>(state);\n\n  if (state.inline) {\n    return <slots.root {...slotProps.root} />;\n  }\n\n  return (\n    <Portal>\n      <slots.root {...slotProps.root} />\n    </Portal>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,MAAM,QAAQ,wBAAwB;AAE/C;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,QAAQ,CAAmBG,KAAK,CAAC;EAE9D,IAAIA,KAAK,CAACG,MAAM,EAAE;IAChB,oBAAOP,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACI,IAAI;MAAA,GAAKH,SAAS,CAACG;IAAI,EAAI;;EAG3C,oBACET,KAAA,CAAAQ,aAAA,CAACN,MAAM,qBACLF,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,EAAI,CAC3B;AAEb,CAAC"}
+{"version":3,"names":["React","getSlots","Portal","renderMenuPopover_unstable","state","slots","slotProps","inline","createElement","root","mountNode"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/renderMenuPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport { Portal } from '@fluentui/react-portal';\n\n/**\n * Render the final JSX of MenuPopover\n */\nexport const renderMenuPopover_unstable = (state: MenuPopoverState) => {\n  const { slots, slotProps } = getSlots<MenuPopoverSlots>(state);\n\n  if (state.inline) {\n    return <slots.root {...slotProps.root} />;\n  }\n\n  return (\n    <Portal mountNode={state.mountNode}>\n      <slots.root {...slotProps.root} />\n    </Portal>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,MAAM,QAAQ,wBAAwB;AAE/C;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,QAAQ,CAAmBG,KAAK,CAAC;EAE9D,IAAIA,KAAK,CAACG,MAAM,EAAE;IAChB,oBAAOP,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACI,IAAI;MAAA,GAAKH,SAAS,CAACG;IAAI,EAAI;;EAG3C,oBACET,KAAA,CAAAQ,aAAA,CAACN,MAAM;IAACQ,SAAS,EAAEN,KAAK,CAACM;EAAS,gBAChCV,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,EAAI,CAC3B;AAEb,CAAC"}

package/lib/components/MenuPopover/useMenuPopover.js

@@ -49,6 +49,7 @@ export const useMenuPopover_unstable = (props, ref) => {
     () => clearTimeout(throttleDispatchTimerRef.current);
   }, []);
   const inline = (_a = useMenuContext_unstable(context => context.inline)) !== null && _a !== void 0 ? _a : false;
+  const mountNode = useMenuContext_unstable(context => context.mountNode);
   const rootProps = getNativeElementProps('div', {
     role: 'presentation',
     ...props,
@@ -97,6 +98,7 @@ export const useMenuPopover_unstable = (props, ref) => {
   });
   return {
     inline,
+    mountNode,
     components: {
       root: 'div'
     },

package/lib/components/MenuPopover/useMenuPopover.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ArrowLeft","Tab","ArrowRight","Escape","getNativeElementProps","useEventCallback","useMergedRefs","useMenuContext_unstable","dispatchMenuEnterEvent","useFluent_unstable","useFluent","useIsSubmenu","useMenuPopover_unstable","props","ref","popoverRef","context","menuPopoverRef","setOpen","open","openOnHover","isSubmenu","canDispatchCustomEventRef","useRef","throttleDispatchTimerRef","dir","CloseArrowKey","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","setTimeout","useEffect","clearTimeout","inline","_a","rootProps","role","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","event","keyboard","type","key","contains","target","stopPropagation","components","root"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/useMenuPopover.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { dispatchMenuEnterEvent } from '../../utils/index';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\n\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */\nexport const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<HTMLElement>): MenuPopoverState => {\n  const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const open = useMenuContext_unstable(context => context.open);\n  const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n  const isSubmenu = useIsSubmenu();\n  const canDispatchCustomEventRef = React.useRef(true);\n  const throttleDispatchTimerRef = React.useRef(0);\n\n  const { dir } = useFluent();\n  const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n\n  // use DOM listener since react events propagate up the react tree\n  // no need to do `contains` logic as menus are all positioned in different portals\n  const mouseOverListenerCallbackRef = React.useCallback(\n    (node: HTMLElement) => {\n      if (node) {\n        // Dispatches the custom menu mouse enter event with throttling\n        // Needs to trigger on mouseover to support keyboard + mouse together\n        // i.e. keyboard opens submenus while cursor is still on the parent\n        node.addEventListener('mouseover', e => {\n          if (canDispatchCustomEventRef.current) {\n            canDispatchCustomEventRef.current = false;\n            dispatchMenuEnterEvent(popoverRef.current as HTMLElement, e);\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore #16889 Node setTimeout type leaking\n            throttleDispatchTimerRef.current = setTimeout(() => (canDispatchCustomEventRef.current = true), 250);\n          }\n        });\n      }\n    },\n    [popoverRef, throttleDispatchTimerRef],\n  );\n\n  React.useEffect(() => {\n    () => clearTimeout(throttleDispatchTimerRef.current);\n  }, []);\n\n  const inline = useMenuContext_unstable(context => context.inline) ?? false;\n  const rootProps = getNativeElementProps('div', {\n    role: 'presentation',\n    ...props,\n    ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef),\n  });\n\n  const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n\n  rootProps.onMouseEnter = useEventCallback((event: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(event, { open: true, keyboard: false, type: 'menuPopoverMouseEnter', event });\n    }\n\n    onMouseEnterOriginal?.(event);\n  });\n\n  rootProps.onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLElement>) => {\n    const key = event.key;\n\n    if (key === Escape || (isSubmenu && key === CloseArrowKey)) {\n      if (open && popoverRef.current?.contains(event.target as HTMLElement)) {\n        setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n        // stop propagation to avoid conflicting with other elements that listen for `Escape`\n        // e,g: Dialog, Popover and Tooltip\n        event.stopPropagation();\n      }\n    }\n\n    if (key === Tab) {\n      setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n    }\n\n    onKeyDownOriginal?.(event);\n  });\n\n  return {\n    inline,\n    components: {\n      root: 'div',\n    },\n    root: rootProps,\n  };\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","ArrowLeft","Tab","ArrowRight","Escape","getNativeElementProps","useEventCallback","useMergedRefs","useMenuContext_unstable","dispatchMenuEnterEvent","useFluent_unstable","useFluent","useIsSubmenu","useMenuPopover_unstable","props","ref","popoverRef","context","menuPopoverRef","setOpen","open","openOnHover","isSubmenu","canDispatchCustomEventRef","useRef","throttleDispatchTimerRef","dir","CloseArrowKey","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","setTimeout","useEffect","clearTimeout","inline","_a","mountNode","rootProps","role","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","event","keyboard","type","key","contains","target","stopPropagation","components","root"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/useMenuPopover.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { dispatchMenuEnterEvent } from '../../utils/index';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\n\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */\nexport const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<HTMLElement>): MenuPopoverState => {\n  const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const open = useMenuContext_unstable(context => context.open);\n  const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n  const isSubmenu = useIsSubmenu();\n  const canDispatchCustomEventRef = React.useRef(true);\n  const throttleDispatchTimerRef = React.useRef(0);\n\n  const { dir } = useFluent();\n  const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n\n  // use DOM listener since react events propagate up the react tree\n  // no need to do `contains` logic as menus are all positioned in different portals\n  const mouseOverListenerCallbackRef = React.useCallback(\n    (node: HTMLElement) => {\n      if (node) {\n        // Dispatches the custom menu mouse enter event with throttling\n        // Needs to trigger on mouseover to support keyboard + mouse together\n        // i.e. keyboard opens submenus while cursor is still on the parent\n        node.addEventListener('mouseover', e => {\n          if (canDispatchCustomEventRef.current) {\n            canDispatchCustomEventRef.current = false;\n            dispatchMenuEnterEvent(popoverRef.current as HTMLElement, e);\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore #16889 Node setTimeout type leaking\n            throttleDispatchTimerRef.current = setTimeout(() => (canDispatchCustomEventRef.current = true), 250);\n          }\n        });\n      }\n    },\n    [popoverRef, throttleDispatchTimerRef],\n  );\n\n  React.useEffect(() => {\n    () => clearTimeout(throttleDispatchTimerRef.current);\n  }, []);\n\n  const inline = useMenuContext_unstable(context => context.inline) ?? false;\n  const mountNode = useMenuContext_unstable(context => context.mountNode);\n\n  const rootProps = getNativeElementProps('div', {\n    role: 'presentation',\n    ...props,\n    ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef),\n  });\n\n  const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n\n  rootProps.onMouseEnter = useEventCallback((event: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(event, { open: true, keyboard: false, type: 'menuPopoverMouseEnter', event });\n    }\n\n    onMouseEnterOriginal?.(event);\n  });\n\n  rootProps.onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLElement>) => {\n    const key = event.key;\n\n    if (key === Escape || (isSubmenu && key === CloseArrowKey)) {\n      if (open && popoverRef.current?.contains(event.target as HTMLElement)) {\n        setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n        // stop propagation to avoid conflicting with other elements that listen for `Escape`\n        // e,g: Dialog, Popover and Tooltip\n        event.stopPropagation();\n      }\n    }\n\n    if (key === Tab) {\n      setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n    }\n\n    onKeyDownOriginal?.(event);\n  });\n\n  return {\n    inline,\n    mountNode,\n    components: {\n      root: 'div',\n    },\n    root: rootProps,\n  };\n};\n"],"mappings":"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"}

package/lib/components/MenuSplitGroup/MenuSplitGroup.js

@@ -2,12 +2,17 @@ import * as React from 'react';
 import { useMenuSplitGroup_unstable } from './useMenuSplitGroup';
 import { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup';
 import { useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.
  */
 export const MenuSplitGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useMenuSplitGroup_unstable(props, ref);
   useMenuSplitGroupStyles_unstable(state);
+  const {
+    useMenuSplitGroupStyles_unstable: useCustomStyles
+  } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderMenuSplitGroup_unstable(state);
 });
 MenuSplitGroup.displayName = 'MenuSplitGroup';

package/lib/components/MenuSplitGroup/MenuSplitGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMenuSplitGroup_unstable","renderMenuSplitGroup_unstable","useMenuSplitGroupStyles_unstable","MenuSplitGroup","forwardRef","props","ref","state","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuSplitGroup/MenuSplitGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuSplitGroup_unstable } from './useMenuSplitGroup';\nimport { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup';\nimport { useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles';\nimport type { MenuSplitGroupProps } from './MenuSplitGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.\n */\nexport const MenuSplitGroup: ForwardRefComponent<MenuSplitGroupProps> = React.forwardRef((props, ref) => {\n  const state = useMenuSplitGroup_unstable(props, ref);\n\n  useMenuSplitGroupStyles_unstable(state);\n  return renderMenuSplitGroup_unstable(state);\n});\n\nMenuSplitGroup.displayName = 'MenuSplitGroup';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,gCAAgC,QAAQ,2BAA2B;AAI5E;;;AAGA,OAAO,MAAMC,cAAc,gBAA6CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtG,MAAMC,KAAK,GAAGP,0BAA0B,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEpDJ,gCAAgC,CAACK,KAAK,CAAC;EACvC,OAAON,6BAA6B,CAACM,KAAK,CAAC;AAC7C,CAAC,CAAC;AAEFJ,cAAc,CAACK,WAAW,GAAG,gBAAgB"}
+{"version":3,"names":["React","useMenuSplitGroup_unstable","renderMenuSplitGroup_unstable","useMenuSplitGroupStyles_unstable","useCustomStyleHooks_unstable","MenuSplitGroup","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuSplitGroup/MenuSplitGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuSplitGroup_unstable } from './useMenuSplitGroup';\nimport { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup';\nimport { useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles';\nimport type { MenuSplitGroupProps } from './MenuSplitGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.\n */\nexport const MenuSplitGroup: ForwardRefComponent<MenuSplitGroupProps> = React.forwardRef((props, ref) => {\n  const state = useMenuSplitGroup_unstable(props, ref);\n\n  useMenuSplitGroupStyles_unstable(state);\n\n  const { useMenuSplitGroupStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderMenuSplitGroup_unstable(state);\n});\n\nMenuSplitGroup.displayName = 'MenuSplitGroup';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,gCAAgC,QAAQ,2BAA2B;AAG5E,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,cAAc,gBAA6CL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtG,MAAMC,KAAK,GAAGR,0BAA0B,CAACM,KAAK,EAAEC,GAAG,CAAC;EAEpDL,gCAAgC,CAACM,KAAK,CAAC;EAEvC,MAAM;IAAEN,gCAAgC,EAAEO;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EAC5FM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOP,6BAA6B,CAACO,KAAK,CAAC;AAC7C,CAAC,CAAC;AAEFJ,cAAc,CAACM,WAAW,GAAG,gBAAgB"}

package/lib/contexts/menuContext.js

@@ -12,6 +12,7 @@ const menuContextDefaultValue = {
   menuPopoverRef: {
     current: null
   },
+  mountNode: null,
   triggerId: '',
   openOnContext: false,
   openOnHover: false,

package/lib/contexts/menuContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["createContext","useContextSelector","MenuContext","undefined","menuContextDefaultValue","open","setOpen","checkedValues","onCheckedValueChange","isSubmenu","triggerRef","current","menuPopoverRef","triggerId","openOnContext","openOnHover","hasIcons","hasCheckmarks","inline","persistOnItemClick","MenuProvider","Provider","useMenuContext_unstable","selector","ctx"],"sources":["../../../../../../../../packages/react-components/react-menu/src/contexts/menuContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { MenuState } from '../components/Menu/index';\n\nexport const MenuContext: Context<MenuContextValue> = createContext<MenuContextValue | undefined>(\n  undefined,\n) as Context<MenuContextValue>;\n\nconst menuContextDefaultValue: MenuContextValue = {\n  open: false,\n  setOpen: () => false,\n  checkedValues: {},\n  onCheckedValueChange: () => null,\n  isSubmenu: false,\n  triggerRef: { current: null } as unknown as React.MutableRefObject<HTMLElement>,\n  menuPopoverRef: { current: null } as unknown as React.MutableRefObject<HTMLElement>,\n  triggerId: '',\n  openOnContext: false,\n  openOnHover: false,\n  hasIcons: false,\n  hasCheckmarks: false,\n  inline: false,\n  persistOnItemClick: false,\n};\n\n/**\n * Context shared between Menu and its children components\n *\n * Extends and drills down MenuList props to simplify API\n */\nexport type MenuContextValue = Pick<\n  MenuState,\n  | 'openOnHover'\n  | 'openOnContext'\n  | 'triggerRef'\n  | 'menuPopoverRef'\n  | 'setOpen'\n  | 'isSubmenu'\n  | 'triggerId'\n  | 'hasIcons'\n  | 'hasCheckmarks'\n  | 'persistOnItemClick'\n  | 'inline'\n  | 'checkedValues'\n  | 'onCheckedValueChange'\n> & {\n  open: boolean;\n  triggerId: string;\n  /**\n   * Default values to be checked on mount\n   * @deprecated this property is not used internally anymore,\n   * the signature remains just to avoid breaking changes\n   */\n  defaultCheckedValues?: Record<string, string[]>;\n};\n\nexport const MenuProvider = MenuContext.Provider;\n\nexport const useMenuContext_unstable = <T>(selector: ContextSelector<MenuContextValue, T>) =>\n  useContextSelector(MenuContext, (ctx = menuContextDefaultValue) => selector(ctx));\n"],"mappings":"AACA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,kCAAkC;AAIpF,OAAO,MAAMC,WAAW,gBAA8BF,aAAa,CACjEG,SAAS,CACmB;AAE9B,MAAMC,uBAAuB,GAAqB;EAChDC,IAAI,EAAE,KAAK;EACXC,OAAO,EAAEA,CAAA,KAAM,KAAK;EACpBC,aAAa,EAAE,EAAE;EACjBC,oBAAoB,EAAEA,CAAA,KAAM,IAAI;EAChCC,SAAS,EAAE,KAAK;EAChBC,UAAU,EAAE;IAAEC,OAAO,EAAE;EAAI,CAAoD;EAC/EC,cAAc,EAAE;IAAED,OAAO,EAAE;EAAI,CAAoD;EACnFE,SAAS,EAAE,EAAE;EACbC,aAAa,EAAE,KAAK;EACpBC,WAAW,EAAE,KAAK;EAClBC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAE,KAAK;EACpBC,MAAM,EAAE,KAAK;EACbC,kBAAkB,EAAE;CACrB;AAiCD,OAAO,MAAMC,YAAY,GAAGlB,WAAW,CAACmB,QAAQ;AAEhD,OAAO,MAAMC,uBAAuB,GAAOC,QAA8C,IACvFtB,kBAAkB,CAACC,WAAW,EAAE,CAACsB,GAAG,GAAGpB,uBAAuB,KAAKmB,QAAQ,CAACC,GAAG,CAAC,CAAC"}
+{"version":3,"names":["createContext","useContextSelector","MenuContext","undefined","menuContextDefaultValue","open","setOpen","checkedValues","onCheckedValueChange","isSubmenu","triggerRef","current","menuPopoverRef","mountNode","triggerId","openOnContext","openOnHover","hasIcons","hasCheckmarks","inline","persistOnItemClick","MenuProvider","Provider","useMenuContext_unstable","selector","ctx"],"sources":["../../../../../../../../packages/react-components/react-menu/src/contexts/menuContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { MenuState } from '../components/Menu/index';\n\nexport const MenuContext: Context<MenuContextValue> = createContext<MenuContextValue | undefined>(\n  undefined,\n) as Context<MenuContextValue>;\n\nconst menuContextDefaultValue: MenuContextValue = {\n  open: false,\n  setOpen: () => false,\n  checkedValues: {},\n  onCheckedValueChange: () => null,\n  isSubmenu: false,\n  triggerRef: { current: null } as unknown as React.MutableRefObject<HTMLElement>,\n  menuPopoverRef: { current: null } as unknown as React.MutableRefObject<HTMLElement>,\n  mountNode: null,\n  triggerId: '',\n  openOnContext: false,\n  openOnHover: false,\n  hasIcons: false,\n  hasCheckmarks: false,\n  inline: false,\n  persistOnItemClick: false,\n};\n\n/**\n * Context shared between Menu and its children components\n *\n * Extends and drills down MenuList props to simplify API\n */\nexport type MenuContextValue = Pick<\n  MenuState,\n  | 'openOnHover'\n  | 'openOnContext'\n  | 'triggerRef'\n  | 'menuPopoverRef'\n  | 'setOpen'\n  | 'isSubmenu'\n  | 'mountNode'\n  | 'triggerId'\n  | 'hasIcons'\n  | 'hasCheckmarks'\n  | 'persistOnItemClick'\n  | 'inline'\n  | 'checkedValues'\n  | 'onCheckedValueChange'\n> & {\n  open: boolean;\n  triggerId: string;\n  /**\n   * Default values to be checked on mount\n   * @deprecated this property is not used internally anymore,\n   * the signature remains just to avoid breaking changes\n   */\n  defaultCheckedValues?: Record<string, string[]>;\n};\n\nexport const MenuProvider = MenuContext.Provider;\n\nexport const useMenuContext_unstable = <T>(selector: ContextSelector<MenuContextValue, T>) =>\n  useContextSelector(MenuContext, (ctx = menuContextDefaultValue) => selector(ctx));\n"],"mappings":"AACA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,kCAAkC;AAIpF,OAAO,MAAMC,WAAW,gBAA8BF,aAAa,CACjEG,SAAS,CACmB;AAE9B,MAAMC,uBAAuB,GAAqB;EAChDC,IAAI,EAAE,KAAK;EACXC,OAAO,EAAEA,CAAA,KAAM,KAAK;EACpBC,aAAa,EAAE,EAAE;EACjBC,oBAAoB,EAAEA,CAAA,KAAM,IAAI;EAChCC,SAAS,EAAE,KAAK;EAChBC,UAAU,EAAE;IAAEC,OAAO,EAAE;EAAI,CAAoD;EAC/EC,cAAc,EAAE;IAAED,OAAO,EAAE;EAAI,CAAoD;EACnFE,SAAS,EAAE,IAAI;EACfC,SAAS,EAAE,EAAE;EACbC,aAAa,EAAE,KAAK;EACpBC,WAAW,EAAE,KAAK;EAClBC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAE,KAAK;EACpBC,MAAM,EAAE,KAAK;EACbC,kBAAkB,EAAE;CACrB;AAkCD,OAAO,MAAMC,YAAY,GAAGnB,WAAW,CAACoB,QAAQ;AAEhD,OAAO,MAAMC,uBAAuB,GAAOC,QAA8C,IACvFvB,kBAAkB,CAACC,WAAW,EAAE,CAACuB,GAAG,GAAGrB,uBAAuB,KAAKoB,QAAQ,CAACC,GAAG,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/Menu/Menu.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { PositioningVirtualElement, SetVirtualMouseTarget } from '@fluentui/react-positioning';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { MenuContextValue } from '../../contexts/menuContext';\nimport type { MenuListProps } from '../MenuList/MenuList.types';\n\nexport type MenuSlots = {};\n\n/**\n * Extends and drills down Menulist props to simplify API\n */\nexport type MenuProps = ComponentProps<MenuSlots> &\n  Pick<\n    MenuListProps,\n    'checkedValues' | 'defaultCheckedValues' | 'hasCheckmarks' | 'hasIcons' | 'onCheckedValueChange'\n  > & {\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     * Sets the delay for mouse open/close for the popover one mouse enter/leave\n     */\n    hoverDelay?: number;\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     * @default false\n     */\n    inline?: 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: MenuOpenEvent, data: MenuOpenChangeData) => void;\n\n    /**\n     * Whether the popup is open\n     *\n     * @default false\n     */\n    open?: boolean;\n\n    /**\n     * Whether the popup is open by default\n     *\n     * @default false\n     */\n    defaultOpen?: boolean;\n\n    /**\n     * Opens the menu on right click (context menu), removes all other menu open interactions\n     *\n     * @default false\n     */\n    openOnContext?: boolean;\n\n    /**\n     * Opens the menu on hover\n     *\n     * @default false\n     */\n    openOnHover?: boolean;\n\n    /**\n     * Do not dismiss the menu when a menu item is clicked\n     *\n     * @default false\n     */\n    persistOnItemClick?: boolean;\n\n    /**\n     * Configures the positioned menu\n     */\n    positioning?: PositioningShorthand;\n\n    /**\n     * Close when scroll outside of it\n     *\n     * @default false\n     */\n    closeOnScroll?: boolean;\n  };\n\nexport type MenuState = ComponentState<MenuSlots> &\n  Required<\n    Pick<\n      MenuProps,\n      | 'hasCheckmarks'\n      | 'hasIcons'\n      | 'inline'\n      | 'checkedValues'\n      | 'onCheckedValueChange'\n      | 'open'\n      | 'openOnHover'\n      | 'closeOnScroll'\n      | 'hoverDelay'\n      | 'openOnContext'\n      | 'persistOnItemClick'\n    >\n  > & {\n    /**\n     * Anchors the popper to the mouse click for context events\n     */\n    contextTarget?: PositioningVirtualElement;\n\n    /**\n     * Whether this menu is a submenu\n     */\n    isSubmenu: boolean;\n\n    /**\n     * Internal react node that just simplifies handling children\n     */\n    menuPopover: React.ReactNode;\n\n    /**\n     * The ref for the popup\n     */\n    menuPopoverRef: React.MutableRefObject<HTMLElement>;\n\n    /**\n     * Internal react node that just simplifies handling children\n     */\n    menuTrigger: React.ReactNode;\n\n    /**\n     * A callback to set the target of the popper to the mouse click for context events\n     */\n    setContextTarget: SetVirtualMouseTarget;\n\n    /**\n     * Callback to open/close the popup\n     */\n    setOpen: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;\n\n    /**\n     * Id for the MenuTrigger element for aria relationship\n     */\n    triggerId: string;\n\n    /**\n     * The ref for the MenuTrigger, used for popup positioning\n     */\n    triggerRef: React.MutableRefObject<HTMLElement>;\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     * @deprecated this property is not used internally anymore,\n     * the signature remains just to avoid breaking changes\n     */\n    onOpenChange?: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;\n    /**\n     * Default values to be checked on mount\n     @deprecated this property is not used internally anymore,\n     * the signature remains just to avoid breaking changes\n     */\n    defaultCheckedValues?: Record<string, string[]>;\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 MenuOpenEvent = MenuOpenChangeData['event'];\n/**\n * @deprecated use MenuOpenEvent instead\n */\nexport type MenuOpenEvents = MenuOpenEvent;\n\n/**\n * Data attached to open/close events\n */\nexport type MenuOpenChangeData = {\n  /**\n   * indicates whether the request for the open state was bubbled from a nested menu\n   */\n  bubble?: boolean;\n  /**\n   * Indicates whether the change of state was a keyboard interaction\n   * @deprecated\n   * This should not be used, since `Enter`, `Space` and click should be interpreted as the same thing as a click\n   */\n  keyboard?: boolean;\n  open: boolean;\n} & (\n  | {\n      type: 'menuTriggerContextMenu';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerClick';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseEnter';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseLeave';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseMove';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerKeyDown';\n      event: React.KeyboardEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuItemClick';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuPopoverMouseEnter';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuPopoverKeyDown';\n      event: React.KeyboardEvent<HTMLElement>;\n    }\n  | {\n      type: 'clickOutside';\n      event: MouseEvent | TouchEvent;\n    }\n  | {\n      type: 'scrollOutside';\n      event: MouseEvent | TouchEvent;\n    }\n  | {\n      type: 'menuMouseEnter';\n      event: MouseEvent | TouchEvent;\n    }\n);\n"],"mappings":""}
+{"version":3,"names":[],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/Menu/Menu.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { PositioningVirtualElement, SetVirtualMouseTarget } from '@fluentui/react-positioning';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { MenuContextValue } from '../../contexts/menuContext';\nimport type { MenuListProps } from '../MenuList/MenuList.types';\n\nexport type MenuSlots = {};\n\n/**\n * Extends and drills down Menulist props to simplify API\n */\nexport type MenuProps = ComponentProps<MenuSlots> &\n  Pick<PortalProps, 'mountNode'> &\n  Pick<\n    MenuListProps,\n    'checkedValues' | 'defaultCheckedValues' | 'hasCheckmarks' | 'hasIcons' | 'onCheckedValueChange'\n  > & {\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     * Sets the delay for mouse open/close for the popover one mouse enter/leave\n     */\n    hoverDelay?: number;\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     * @default false\n     */\n    inline?: 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: MenuOpenEvent, data: MenuOpenChangeData) => void;\n\n    /**\n     * Whether the popup is open\n     *\n     * @default false\n     */\n    open?: boolean;\n\n    /**\n     * Whether the popup is open by default\n     *\n     * @default false\n     */\n    defaultOpen?: boolean;\n\n    /**\n     * Opens the menu on right click (context menu), removes all other menu open interactions\n     *\n     * @default false\n     */\n    openOnContext?: boolean;\n\n    /**\n     * Opens the menu on hover\n     *\n     * @default false\n     */\n    openOnHover?: boolean;\n\n    /**\n     * Do not dismiss the menu when a menu item is clicked\n     *\n     * @default false\n     */\n    persistOnItemClick?: boolean;\n\n    /**\n     * Configures the positioned menu\n     */\n    positioning?: PositioningShorthand;\n\n    /**\n     * Close when scroll outside of it\n     *\n     * @default false\n     */\n    closeOnScroll?: boolean;\n  };\n\nexport type MenuState = ComponentState<MenuSlots> &\n  Required<\n    Pick<\n      MenuProps,\n      | 'hasCheckmarks'\n      | 'hasIcons'\n      | 'mountNode'\n      | 'inline'\n      | 'checkedValues'\n      | 'onCheckedValueChange'\n      | 'open'\n      | 'openOnHover'\n      | 'closeOnScroll'\n      | 'hoverDelay'\n      | 'openOnContext'\n      | 'persistOnItemClick'\n    >\n  > & {\n    /**\n     * Anchors the popper to the mouse click for context events\n     */\n    contextTarget?: PositioningVirtualElement;\n\n    /**\n     * Whether this menu is a submenu\n     */\n    isSubmenu: boolean;\n\n    /**\n     * Internal react node that just simplifies handling children\n     */\n    menuPopover: React.ReactNode;\n\n    /**\n     * The ref for the popup\n     */\n    menuPopoverRef: React.MutableRefObject<HTMLElement>;\n\n    /**\n     * Internal react node that just simplifies handling children\n     */\n    menuTrigger: React.ReactNode;\n\n    /**\n     * A callback to set the target of the popper to the mouse click for context events\n     */\n    setContextTarget: SetVirtualMouseTarget;\n\n    /**\n     * Callback to open/close the popup\n     */\n    setOpen: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;\n\n    /**\n     * Id for the MenuTrigger element for aria relationship\n     */\n    triggerId: string;\n\n    /**\n     * The ref for the MenuTrigger, used for popup positioning\n     */\n    triggerRef: React.MutableRefObject<HTMLElement>;\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     * @deprecated this property is not used internally anymore,\n     * the signature remains just to avoid breaking changes\n     */\n    onOpenChange?: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;\n    /**\n     * Default values to be checked on mount\n     @deprecated this property is not used internally anymore,\n     * the signature remains just to avoid breaking changes\n     */\n    defaultCheckedValues?: Record<string, string[]>;\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 MenuOpenEvent = MenuOpenChangeData['event'];\n/**\n * @deprecated use MenuOpenEvent instead\n */\nexport type MenuOpenEvents = MenuOpenEvent;\n\n/**\n * Data attached to open/close events\n */\nexport type MenuOpenChangeData = {\n  /**\n   * indicates whether the request for the open state was bubbled from a nested menu\n   */\n  bubble?: boolean;\n  /**\n   * Indicates whether the change of state was a keyboard interaction\n   * @deprecated\n   * This should not be used, since `Enter`, `Space` and click should be interpreted as the same thing as a click\n   */\n  keyboard?: boolean;\n  open: boolean;\n} & (\n  | {\n      type: 'menuTriggerContextMenu';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerClick';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseEnter';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseLeave';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseMove';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerKeyDown';\n      event: React.KeyboardEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuItemClick';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuPopoverMouseEnter';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuPopoverKeyDown';\n      event: React.KeyboardEvent<HTMLElement>;\n    }\n  | {\n      type: 'clickOutside';\n      event: MouseEvent | TouchEvent;\n    }\n  | {\n      type: 'scrollOutside';\n      event: MouseEvent | TouchEvent;\n    }\n  | {\n      type: 'menuMouseEnter';\n      event: MouseEvent | TouchEvent;\n    }\n);\n"],"mappings":""}

package/lib-commonjs/components/Menu/useMenu.js

@@ -35,7 +35,8 @@ const useMenu_unstable = props => {
     openOnContext = false,
     persistOnItemClick = false,
     openOnHover = isSubmenu,
-    defaultCheckedValues
+    defaultCheckedValues,
+    mountNode = null
   } = props;
   const triggerId = react_utilities_1.useId('menu');
   const [contextTarget, setContextTarget] = react_positioning_1.usePositioningMouseTarget();
@@ -100,6 +101,7 @@ const useMenu_unstable = props => {
     closeOnScroll,
     menuTrigger,
     menuPopover,
+    mountNode,
     triggerRef,
     menuPopoverRef,
     components: {},

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

@@ -1 +1 @@
-{"version":3,"names":["React","require","react_positioning_1","react_utilities_1","react_shared_contexts_1","react_portal_1","react_tabster_1","menuContext_1","index_1","useIsSubmenu_1","submenuFallbackPositions","useMenu_unstable","props","isSubmenu","useIsSubmenu","hoverDelay","inline","hasCheckmarks","hasIcons","closeOnScroll","openOnContext","persistOnItemClick","openOnHover","defaultCheckedValues","triggerId","useId","contextTarget","setContextTarget","usePositioningMouseTarget","positioningState","position","align","target","undefined","fallbackPositions","resolvePositioningShorthand","positioning","children","Children","toArray","process","env","NODE_ENV","length","console","warn","menuTrigger","menuPopover","targetRef","triggerRef","containerRef","menuPopoverRef","usePositioning","open","setOpen","useMenuOpenState","defaultOpen","onOpenChange","checkedValues","onCheckedValueChange","useMenuSelectableState","components","exports","setCheckedValues","useControllableState","state","defaultState","initialState","useEventCallback","e","name","checkedItems","_a","call","currentValue","targetDocument","useFluent_unstable","parentSetOpen","useMenuContext_unstable","context","data","shouldHandleCloseRef","useRef","setOpenTimeout","enteringTriggerRef","setOpenState","trySetOpen","event","CustomEvent","type","MENU_ENTER_EVENT","detail","nativeEvent","current","bubble","clearTimeout","Event","persist","contains","setTimeout","useOnClickOutside","elementContains","disabled","element","refs","filter","Boolean","callback","useOnScrollOutside","useOnMenuMouseEnter","useEffect","findFirstFocusable","useFocusFinders","focusFirst","useCallback","firstFocusable","focus"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/Menu/useMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  usePositioningMouseTarget,\n  usePositioning,\n  resolvePositioningShorthand,\n  PositioningShorthandValue,\n} from '@fluentui/react-positioning';\nimport {\n  useControllableState,\n  useId,\n  useOnClickOutside,\n  useEventCallback,\n  useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as 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, MenuOpenEvent, MenuProps, MenuState } from './Menu.types';\n\n// If it's not possible to position the submenu in smaller viewports, try\n// and fallback to this order of positions\nconst submenuFallbackPositions: PositioningShorthandValue[] = [\n  'after',\n  'after-bottom',\n  'before-top',\n  'before',\n  'before-bottom',\n  'above',\n];\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 isSubmenu = useIsSubmenu();\n  const {\n    hoverDelay = 500,\n    inline = false,\n    hasCheckmarks = false,\n    hasIcons = false,\n    closeOnScroll = false,\n    openOnContext = false,\n    persistOnItemClick = false,\n    openOnHover = isSubmenu,\n    defaultCheckedValues,\n  } = props;\n  const triggerId = useId('menu');\n  const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n  const positioningState = {\n    position: isSubmenu ? 'after' : 'below',\n    align: isSubmenu ? 'top' : 'start',\n    target: props.openOnContext ? contextTarget : undefined,\n    fallbackPositions: isSubmenu ? submenuFallbackPositions : undefined,\n    ...resolvePositioningShorthand(props.positioning),\n  } as const;\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\n  const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);\n\n  // TODO Better way to narrow types ?\n  const [open, setOpen] = useMenuOpenState({\n    hoverDelay,\n    isSubmenu,\n    setContextTarget,\n    closeOnScroll,\n    menuPopoverRef,\n    triggerRef,\n    open: props.open,\n    defaultOpen: props.defaultOpen,\n    onOpenChange: props.onOpenChange,\n    openOnContext,\n  });\n\n  const [checkedValues, onCheckedValueChange] = useMenuSelectableState({\n    checkedValues: props.checkedValues,\n    defaultCheckedValues,\n    onCheckedValueChange: props.onCheckedValueChange,\n  });\n\n  return {\n    inline,\n    hoverDelay,\n    triggerId,\n    isSubmenu,\n    openOnHover,\n    contextTarget,\n    setContextTarget,\n    hasCheckmarks,\n    hasIcons,\n    closeOnScroll,\n    menuTrigger,\n    menuPopover,\n    triggerRef,\n    menuPopoverRef,\n    components: {},\n    openOnContext,\n    open,\n    setOpen,\n    checkedValues,\n    onCheckedValueChange,\n    persistOnItemClick,\n  };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useMenuSelectableState = (\n  props: Pick<MenuProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: props.checkedValues,\n    defaultState: props.defaultCheckedValues,\n    initialState: {},\n  });\n  const onCheckedValueChange: MenuState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n    props.onCheckedValueChange?.(e, { name, checkedItems });\n\n    setCheckedValues(currentValue => ({\n      ...currentValue,\n      [name]: checkedItems,\n    }));\n  });\n\n  return [checkedValues, onCheckedValueChange] as const;\n};\n\nconst useMenuOpenState = (\n  state: Pick<\n    MenuState,\n    | 'isSubmenu'\n    | 'menuPopoverRef'\n    | 'setContextTarget'\n    | 'triggerRef'\n    | 'openOnContext'\n    | 'closeOnScroll'\n    | 'hoverDelay'\n  > &\n    Pick<MenuProps, 'open' | 'defaultOpen' | 'onOpenChange'>,\n) => {\n  const { targetDocument } = useFluent();\n  const parentSetOpen = useMenuContext_unstable(context => context.setOpen);\n  const onOpenChange: MenuProps['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n  const shouldHandleCloseRef = 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: MenuOpenEvent, 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      shouldHandleCloseRef.current = true;\n    }\n\n    if (data.bubble) {\n      parentSetOpen(e, { ...data });\n    }\n\n    setOpenState(data.open);\n  });\n\n  const setOpen = useEventCallback((e: MenuOpenEvent, 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.openOnContext && state.triggerRef].filter(\n      Boolean,\n    ) as React.MutableRefObject<HTMLElement>[],\n    callback: event => setOpen(event, { open: false, type: 'clickOutside', event }),\n  });\n\n  // only close on scroll for context, or when closeOnScroll is specified\n  const closeOnScroll = state.openOnContext || state.closeOnScroll;\n  useOnScrollOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: event => setOpen(event, { open: false, type: 'scrollOutside', event }),\n    refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n      Boolean,\n    ) as React.MutableRefObject<HTMLElement>[],\n    disabled: !open || !closeOnScroll,\n  });\n\n  useOnMenuMouseEnter({\n    element: targetDocument,\n    callback: event => {\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(event, { open: false, type: 'menuMouseEnter', event });\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 } = useFocusFinders();\n  const focusFirst = React.useCallback(() => {\n    const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);\n    firstFocusable?.focus();\n  }, [findFirstFocusable, state.menuPopoverRef]);\n\n  React.useEffect(() => {\n    if (open) {\n      focusFirst();\n    } else {\n      if (shouldHandleCloseRef.current) {\n        // We know that React effects are sync so we focus the trigger here\n        // after any event handler (event handlers will update state and re-render).\n        // Since the browser only performs the default behaviour for the Tab key once\n        // keyboard events have fully bubbled up the window, the browser will move\n        // focus to the next tabbable element before/after the trigger if needed.\n        // If the Tab key was not pressed, focus will remain on the trigger as expected.\n        state.triggerRef.current?.focus();\n      }\n    }\n\n    shouldHandleCloseRef.current = false;\n  }, [state.triggerRef, state.isSubmenu, open, focusFirst]);\n\n  return [open, setOpen] as const;\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","require","react_positioning_1","react_utilities_1","react_shared_contexts_1","react_portal_1","react_tabster_1","menuContext_1","index_1","useIsSubmenu_1","submenuFallbackPositions","useMenu_unstable","props","isSubmenu","useIsSubmenu","hoverDelay","inline","hasCheckmarks","hasIcons","closeOnScroll","openOnContext","persistOnItemClick","openOnHover","defaultCheckedValues","mountNode","triggerId","useId","contextTarget","setContextTarget","usePositioningMouseTarget","positioningState","position","align","target","undefined","fallbackPositions","resolvePositioningShorthand","positioning","children","Children","toArray","process","env","NODE_ENV","length","console","warn","menuTrigger","menuPopover","targetRef","triggerRef","containerRef","menuPopoverRef","usePositioning","open","setOpen","useMenuOpenState","defaultOpen","onOpenChange","checkedValues","onCheckedValueChange","useMenuSelectableState","components","exports","setCheckedValues","useControllableState","state","defaultState","initialState","useEventCallback","e","name","checkedItems","_a","call","currentValue","targetDocument","useFluent_unstable","parentSetOpen","useMenuContext_unstable","context","data","shouldHandleCloseRef","useRef","setOpenTimeout","enteringTriggerRef","setOpenState","trySetOpen","event","CustomEvent","type","MENU_ENTER_EVENT","detail","nativeEvent","current","bubble","clearTimeout","Event","persist","contains","setTimeout","useOnClickOutside","elementContains","disabled","element","refs","filter","Boolean","callback","useOnScrollOutside","useOnMenuMouseEnter","useEffect","findFirstFocusable","useFocusFinders","focusFirst","useCallback","firstFocusable","focus"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/Menu/useMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  usePositioningMouseTarget,\n  usePositioning,\n  resolvePositioningShorthand,\n  PositioningShorthandValue,\n} from '@fluentui/react-positioning';\nimport {\n  useControllableState,\n  useId,\n  useOnClickOutside,\n  useEventCallback,\n  useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as 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, MenuOpenEvent, MenuProps, MenuState } from './Menu.types';\n\n// If it's not possible to position the submenu in smaller viewports, try\n// and fallback to this order of positions\nconst submenuFallbackPositions: PositioningShorthandValue[] = [\n  'after',\n  'after-bottom',\n  'before-top',\n  'before',\n  'before-bottom',\n  'above',\n];\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 isSubmenu = useIsSubmenu();\n  const {\n    hoverDelay = 500,\n    inline = false,\n    hasCheckmarks = false,\n    hasIcons = false,\n    closeOnScroll = false,\n    openOnContext = false,\n    persistOnItemClick = false,\n    openOnHover = isSubmenu,\n    defaultCheckedValues,\n    mountNode = null,\n  } = props;\n  const triggerId = useId('menu');\n  const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n  const positioningState = {\n    position: isSubmenu ? 'after' : 'below',\n    align: isSubmenu ? 'top' : 'start',\n    target: props.openOnContext ? contextTarget : undefined,\n    fallbackPositions: isSubmenu ? submenuFallbackPositions : undefined,\n    ...resolvePositioningShorthand(props.positioning),\n  } as const;\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\n  const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);\n\n  // TODO Better way to narrow types ?\n  const [open, setOpen] = useMenuOpenState({\n    hoverDelay,\n    isSubmenu,\n    setContextTarget,\n    closeOnScroll,\n    menuPopoverRef,\n    triggerRef,\n    open: props.open,\n    defaultOpen: props.defaultOpen,\n    onOpenChange: props.onOpenChange,\n    openOnContext,\n  });\n\n  const [checkedValues, onCheckedValueChange] = useMenuSelectableState({\n    checkedValues: props.checkedValues,\n    defaultCheckedValues,\n    onCheckedValueChange: props.onCheckedValueChange,\n  });\n\n  return {\n    inline,\n    hoverDelay,\n    triggerId,\n    isSubmenu,\n    openOnHover,\n    contextTarget,\n    setContextTarget,\n    hasCheckmarks,\n    hasIcons,\n    closeOnScroll,\n    menuTrigger,\n    menuPopover,\n    mountNode,\n    triggerRef,\n    menuPopoverRef,\n    components: {},\n    openOnContext,\n    open,\n    setOpen,\n    checkedValues,\n    onCheckedValueChange,\n    persistOnItemClick,\n  };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useMenuSelectableState = (\n  props: Pick<MenuProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: props.checkedValues,\n    defaultState: props.defaultCheckedValues,\n    initialState: {},\n  });\n  const onCheckedValueChange: MenuState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n    props.onCheckedValueChange?.(e, { name, checkedItems });\n\n    setCheckedValues(currentValue => ({\n      ...currentValue,\n      [name]: checkedItems,\n    }));\n  });\n\n  return [checkedValues, onCheckedValueChange] as const;\n};\n\nconst useMenuOpenState = (\n  state: Pick<\n    MenuState,\n    | 'isSubmenu'\n    | 'menuPopoverRef'\n    | 'setContextTarget'\n    | 'triggerRef'\n    | 'openOnContext'\n    | 'closeOnScroll'\n    | 'hoverDelay'\n  > &\n    Pick<MenuProps, 'open' | 'defaultOpen' | 'onOpenChange'>,\n) => {\n  const { targetDocument } = useFluent();\n  const parentSetOpen = useMenuContext_unstable(context => context.setOpen);\n  const onOpenChange: MenuProps['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n  const shouldHandleCloseRef = 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: MenuOpenEvent, 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      shouldHandleCloseRef.current = true;\n    }\n\n    if (data.bubble) {\n      parentSetOpen(e, { ...data });\n    }\n\n    setOpenState(data.open);\n  });\n\n  const setOpen = useEventCallback((e: MenuOpenEvent, 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.openOnContext && state.triggerRef].filter(\n      Boolean,\n    ) as React.MutableRefObject<HTMLElement>[],\n    callback: event => setOpen(event, { open: false, type: 'clickOutside', event }),\n  });\n\n  // only close on scroll for context, or when closeOnScroll is specified\n  const closeOnScroll = state.openOnContext || state.closeOnScroll;\n  useOnScrollOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: event => setOpen(event, { open: false, type: 'scrollOutside', event }),\n    refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n      Boolean,\n    ) as React.MutableRefObject<HTMLElement>[],\n    disabled: !open || !closeOnScroll,\n  });\n\n  useOnMenuMouseEnter({\n    element: targetDocument,\n    callback: event => {\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(event, { open: false, type: 'menuMouseEnter', event });\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 } = useFocusFinders();\n  const focusFirst = React.useCallback(() => {\n    const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);\n    firstFocusable?.focus();\n  }, [findFirstFocusable, state.menuPopoverRef]);\n\n  React.useEffect(() => {\n    if (open) {\n      focusFirst();\n    } else {\n      if (shouldHandleCloseRef.current) {\n        // We know that React effects are sync so we focus the trigger here\n        // after any event handler (event handlers will update state and re-render).\n        // Since the browser only performs the default behaviour for the Tab key once\n        // keyboard events have fully bubbled up the window, the browser will move\n        // focus to the next tabbable element before/after the trigger if needed.\n        // If the Tab key was not pressed, focus will remain on the trigger as expected.\n        state.triggerRef.current?.focus();\n      }\n    }\n\n    shouldHandleCloseRef.current = false;\n  }, [state.triggerRef, state.isSubmenu, open, focusFirst]);\n\n  return [open, setOpen] as const;\n};\n"],"mappings":"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"}

package/lib-commonjs/components/Menu/useMenuContextValues.js

@@ -12,6 +12,7 @@ function useMenuContextValues_unstable(state) {
     inline,
     isSubmenu,
     menuPopoverRef,
+    mountNode,
     onCheckedValueChange,
     open,
     openOnContext,
@@ -29,6 +30,7 @@ function useMenuContextValues_unstable(state) {
     inline,
     isSubmenu,
     menuPopoverRef,
+    mountNode,
     onCheckedValueChange,
     open,
     openOnContext,

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

@@ -1 +1 @@
-{"version":3,"names":["useMenuContextValues_unstable","state","checkedValues","hasCheckmarks","hasIcons","inline","isSubmenu","menuPopoverRef","onCheckedValueChange","open","openOnContext","openOnHover","persistOnItemClick","setOpen","triggerId","triggerRef","menu","exports"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/Menu/useMenuContextValues.ts"],"sourcesContent":["import type { MenuContextValues, MenuState } from './Menu.types';\n\nexport function useMenuContextValues_unstable(state: MenuState): MenuContextValues {\n  const {\n    checkedValues,\n    hasCheckmarks,\n    hasIcons,\n    inline,\n    isSubmenu,\n    menuPopoverRef,\n    onCheckedValueChange,\n    open,\n    openOnContext,\n    openOnHover,\n    persistOnItemClick,\n    setOpen,\n    triggerId,\n    triggerRef,\n  } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const menu = {\n    checkedValues,\n    hasCheckmarks,\n    hasIcons,\n    inline,\n    isSubmenu,\n    menuPopoverRef,\n    onCheckedValueChange,\n    open,\n    openOnContext,\n    openOnHover,\n    persistOnItemClick,\n    setOpen,\n    triggerId,\n    triggerRef,\n  };\n\n  return { menu };\n}\n"],"mappings":";;;;;;AAEA,SAAgBA,6BAA6BA,CAACC,KAAgB;EAC5D,MAAM;IACJC,aAAa;IACbC,aAAa;IACbC,QAAQ;IACRC,MAAM;IACNC,SAAS;IACTC,cAAc;IACdC,oBAAoB;IACpBC,IAAI;IACJC,aAAa;IACbC,WAAW;IACXC,kBAAkB;IAClBC,OAAO;IACPC,SAAS;IACTC;EAAU,CACX,GAAGd,KAAK;EAET;EACA,MAAMe,IAAI,GAAG;IACXd,aAAa;IACbC,aAAa;IACbC,QAAQ;IACRC,MAAM;IACNC,SAAS;IACTC,cAAc;IACdC,oBAAoB;IACpBC,IAAI;IACJC,aAAa;IACbC,WAAW;IACXC,kBAAkB;IAClBC,OAAO;IACPC,SAAS;IACTC;GACD;EAED,OAAO;IAAEC;EAAI,CAAE;AACjB;AArCAC,OAAA,CAAAjB,6BAAA,GAAAA,6BAAA"}
+{"version":3,"names":["useMenuContextValues_unstable","state","checkedValues","hasCheckmarks","hasIcons","inline","isSubmenu","menuPopoverRef","mountNode","onCheckedValueChange","open","openOnContext","openOnHover","persistOnItemClick","setOpen","triggerId","triggerRef","menu","exports"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/Menu/useMenuContextValues.ts"],"sourcesContent":["import type { MenuContextValues, MenuState } from './Menu.types';\n\nexport function useMenuContextValues_unstable(state: MenuState): MenuContextValues {\n  const {\n    checkedValues,\n    hasCheckmarks,\n    hasIcons,\n    inline,\n    isSubmenu,\n    menuPopoverRef,\n    mountNode,\n    onCheckedValueChange,\n    open,\n    openOnContext,\n    openOnHover,\n    persistOnItemClick,\n    setOpen,\n    triggerId,\n    triggerRef,\n  } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const menu = {\n    checkedValues,\n    hasCheckmarks,\n    hasIcons,\n    inline,\n    isSubmenu,\n    menuPopoverRef,\n    mountNode,\n    onCheckedValueChange,\n    open,\n    openOnContext,\n    openOnHover,\n    persistOnItemClick,\n    setOpen,\n    triggerId,\n    triggerRef,\n  };\n\n  return { menu };\n}\n"],"mappings":";;;;;;AAEA,SAAgBA,6BAA6BA,CAACC,KAAgB;EAC5D,MAAM;IACJC,aAAa;IACbC,aAAa;IACbC,QAAQ;IACRC,MAAM;IACNC,SAAS;IACTC,cAAc;IACdC,SAAS;IACTC,oBAAoB;IACpBC,IAAI;IACJC,aAAa;IACbC,WAAW;IACXC,kBAAkB;IAClBC,OAAO;IACPC,SAAS;IACTC;EAAU,CACX,GAAGf,KAAK;EAET;EACA,MAAMgB,IAAI,GAAG;IACXf,aAAa;IACbC,aAAa;IACbC,QAAQ;IACRC,MAAM;IACNC,SAAS;IACTC,cAAc;IACdC,SAAS;IACTC,oBAAoB;IACpBC,IAAI;IACJC,aAAa;IACbC,WAAW;IACXC,kBAAkB;IAClBC,OAAO;IACPC,SAAS;IACTC;GACD;EAED,OAAO;IAAEC;EAAI,CAAE;AACjB;AAvCAC,OAAA,CAAAlB,6BAAA,GAAAA,6BAAA"}

package/lib-commonjs/components/MenuDivider/MenuDivider.js

@@ -8,12 +8,17 @@ const React = /*#__PURE__*/require("react");
 const useMenuDivider_1 = /*#__PURE__*/require("./useMenuDivider");
 const useMenuDividerStyles_1 = /*#__PURE__*/require("./useMenuDividerStyles");
 const renderMenuDivider_1 = /*#__PURE__*/require("./renderMenuDivider");
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 /**
  * Define a styled MenuDivider, using the `useMenuDivider_unstable` hook.
  */
 exports.MenuDivider = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useMenuDivider_1.useMenuDivider_unstable(props, ref);
   useMenuDividerStyles_1.useMenuDividerStyles_unstable(state);
+  const {
+    useMenuDividerStyles_unstable: useCustomStyles
+  } = react_shared_contexts_1.useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderMenuDivider_1.renderMenuDivider_unstable(state);
 });
 exports.MenuDivider.displayName = 'MenuDivider';

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

@@ -1 +1 @@
-{"version":3,"names":["React","require","useMenuDivider_1","useMenuDividerStyles_1","renderMenuDivider_1","exports","MenuDivider","forwardRef","props","ref","state","useMenuDivider_unstable","useMenuDividerStyles_unstable","renderMenuDivider_unstable","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuDivider/MenuDivider.tsx"],"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"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,gBAAA,gBAAAD,OAAA;AACA,MAAAE,sBAAA,gBAAAF,OAAA;AACA,MAAAG,mBAAA,gBAAAH,OAAA;AAIA;;;AAGaI,OAAA,CAAAC,WAAW,gBAA0CN,KAAK,CAACO,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGR,gBAAA,CAAAS,uBAAuB,CAACH,KAAK,EAAEC,GAAG,CAAC;EACjDN,sBAAA,CAAAS,6BAA6B,CAACF,KAAK,CAAC;EAEpC,OAAON,mBAAA,CAAAS,0BAA0B,CAACH,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFL,OAAA,CAAAC,WAAW,CAACQ,WAAW,GAAG,aAAa"}
+{"version":3,"names":["React","require","useMenuDivider_1","useMenuDividerStyles_1","renderMenuDivider_1","react_shared_contexts_1","exports","MenuDivider","forwardRef","props","ref","state","useMenuDivider_unstable","useMenuDividerStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderMenuDivider_unstable","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuDivider/MenuDivider.tsx"],"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';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\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\n  useMenuDividerStyles_unstable(state);\n\n  const { useMenuDividerStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderMenuDivider_unstable(state);\n});\n\nMenuDivider.displayName = 'MenuDivider';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,gBAAA,gBAAAD,OAAA;AACA,MAAAE,sBAAA,gBAAAF,OAAA;AACA,MAAAG,mBAAA,gBAAAH,OAAA;AAGA,MAAAI,uBAAA,gBAAAJ,OAAA;AAEA;;;AAGaK,OAAA,CAAAC,WAAW,gBAA0CP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGT,gBAAA,CAAAU,uBAAuB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEjDP,sBAAA,CAAAU,6BAA6B,CAACF,KAAK,CAAC;EAEpC,MAAM;IAAEE,6BAA6B,EAAEC;EAAe,CAAE,GAAGT,uBAAA,CAAAU,4BAA4B,EAAE;EACzFD,eAAe,CAACH,KAAK,CAAC;EAEtB,OAAOP,mBAAA,CAAAY,0BAA0B,CAACL,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFL,OAAA,CAAAC,WAAW,CAACU,WAAW,GAAG,aAAa"}

package/lib-commonjs/components/MenuGroup/MenuGroup.js

@@ -9,6 +9,7 @@ const useMenuGroup_1 = /*#__PURE__*/require("./useMenuGroup");
 const renderMenuGroup_1 = /*#__PURE__*/require("./renderMenuGroup");
 const useMenuGroupContextValues_1 = /*#__PURE__*/require("./useMenuGroupContextValues");
 const useMenuGroupStyles_1 = /*#__PURE__*/require("./useMenuGroupStyles");
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 /**
  * Define a styled MenuGroup, using the `useMenuGroup_unstable` hook.
  */
@@ -16,6 +17,10 @@ exports.MenuGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useMenuGroup_1.useMenuGroup_unstable(props, ref);
   const contextValues = useMenuGroupContextValues_1.useMenuGroupContextValues_unstable(state);
   useMenuGroupStyles_1.useMenuGroupStyles_unstable(state);
+  const {
+    useMenuGroupStyles_unstable: useCustomStyles
+  } = react_shared_contexts_1.useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderMenuGroup_1.renderMenuGroup_unstable(state, contextValues);
 });
 exports.MenuGroup.displayName = 'MenuGroup';

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

@@ -1 +1 @@
-{"version":3,"names":["React","require","useMenuGroup_1","renderMenuGroup_1","useMenuGroupContextValues_1","useMenuGroupStyles_1","exports","MenuGroup","forwardRef","props","ref","state","useMenuGroup_unstable","contextValues","useMenuGroupContextValues_unstable","useMenuGroupStyles_unstable","renderMenuGroup_unstable","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuGroup/MenuGroup.tsx"],"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"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,cAAA,gBAAAD,OAAA;AACA,MAAAE,iBAAA,gBAAAF,OAAA;AACA,MAAAG,2BAAA,gBAAAH,OAAA;AAGA,MAAAI,oBAAA,gBAAAJ,OAAA;AAEA;;;AAGaK,OAAA,CAAAC,SAAS,gBAAwCP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC5F,MAAMC,KAAK,GAAGT,cAAA,CAAAU,qBAAqB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAC/C,MAAMG,aAAa,GAAGT,2BAAA,CAAAU,kCAAkC,CAACH,KAAK,CAAC;EAE/DN,oBAAA,CAAAU,2BAA2B,CAACJ,KAAK,CAAC;EAElC,OAAOR,iBAAA,CAAAa,wBAAwB,CAACL,KAAK,EAAEE,aAAa,CAAC;AACvD,CAAC,CAAC;AAEFP,OAAA,CAAAC,SAAS,CAACU,WAAW,GAAG,WAAW"}
+{"version":3,"names":["React","require","useMenuGroup_1","renderMenuGroup_1","useMenuGroupContextValues_1","useMenuGroupStyles_1","react_shared_contexts_1","exports","MenuGroup","forwardRef","props","ref","state","useMenuGroup_unstable","contextValues","useMenuGroupContextValues_unstable","useMenuGroupStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderMenuGroup_unstable","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuGroup/MenuGroup.tsx"],"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';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\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  const { useMenuGroupStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderMenuGroup_unstable(state, contextValues);\n});\n\nMenuGroup.displayName = 'MenuGroup';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,cAAA,gBAAAD,OAAA;AACA,MAAAE,iBAAA,gBAAAF,OAAA;AACA,MAAAG,2BAAA,gBAAAH,OAAA;AAGA,MAAAI,oBAAA,gBAAAJ,OAAA;AACA,MAAAK,uBAAA,gBAAAL,OAAA;AAEA;;;AAGaM,OAAA,CAAAC,SAAS,gBAAwCR,KAAK,CAACS,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC5F,MAAMC,KAAK,GAAGV,cAAA,CAAAW,qBAAqB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAC/C,MAAMG,aAAa,GAAGV,2BAAA,CAAAW,kCAAkC,CAACH,KAAK,CAAC;EAE/DP,oBAAA,CAAAW,2BAA2B,CAACJ,KAAK,CAAC;EAElC,MAAM;IAAEI,2BAA2B,EAAEC;EAAe,CAAE,GAAGX,uBAAA,CAAAY,4BAA4B,EAAE;EACvFD,eAAe,CAACL,KAAK,CAAC;EAEtB,OAAOT,iBAAA,CAAAgB,wBAAwB,CAACP,KAAK,EAAEE,aAAa,CAAC;AACvD,CAAC,CAAC;AAEFP,OAAA,CAAAC,SAAS,CAACY,WAAW,GAAG,WAAW"}

package/lib-commonjs/components/MenuGroupHeader/MenuGroupHeader.js

@@ -8,12 +8,17 @@ const React = /*#__PURE__*/require("react");
 const useMenuGroupHeader_1 = /*#__PURE__*/require("./useMenuGroupHeader");
 const useMenuGroupHeaderStyles_1 = /*#__PURE__*/require("./useMenuGroupHeaderStyles");
 const renderMenuGroupHeader_1 = /*#__PURE__*/require("./renderMenuGroupHeader");
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 /**
  * Define a styled MenuGroupHeader, using the `useMenuGroupHeader_unstable` hook.
  */
 exports.MenuGroupHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useMenuGroupHeader_1.useMenuGroupHeader_unstable(props, ref);
   useMenuGroupHeaderStyles_1.useMenuGroupHeaderStyles_unstable(state);
+  const {
+    useMenuGroupHeaderStyles_unstable: useCustomStyles
+  } = react_shared_contexts_1.useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderMenuGroupHeader_1.renderMenuGroupHeader_unstable(state);
 });
 exports.MenuGroupHeader.displayName = 'MenuGroupHeader';

package/lib-commonjs/components/MenuGroupHeader/MenuGroupHeader.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","require","useMenuGroupHeader_1","useMenuGroupHeaderStyles_1","renderMenuGroupHeader_1","exports","MenuGroupHeader","forwardRef","props","ref","state","useMenuGroupHeader_unstable","useMenuGroupHeaderStyles_unstable","renderMenuGroupHeader_unstable","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuGroupHeader_unstable } from './useMenuGroupHeader';\nimport { useMenuGroupHeaderStyles_unstable } from './useMenuGroupHeaderStyles';\nimport { renderMenuGroupHeader_unstable } from './renderMenuGroupHeader';\nimport type { MenuGroupHeaderProps } from './MenuGroupHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled MenuGroupHeader, using the `useMenuGroupHeader_unstable` hook.\n */\nexport const MenuGroupHeader: ForwardRefComponent<MenuGroupHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGroupHeader_unstable(props, ref);\n  useMenuGroupHeaderStyles_unstable(state);\n\n  return renderMenuGroupHeader_unstable(state);\n});\n\nMenuGroupHeader.displayName = 'MenuGroupHeader';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,oBAAA,gBAAAD,OAAA;AACA,MAAAE,0BAAA,gBAAAF,OAAA;AACA,MAAAG,uBAAA,gBAAAH,OAAA;AAIA;;;AAGaI,OAAA,CAAAC,eAAe,gBAA8CN,KAAK,CAACO,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxG,MAAMC,KAAK,GAAGR,oBAAA,CAAAS,2BAA2B,CAACH,KAAK,EAAEC,GAAG,CAAC;EACrDN,0BAAA,CAAAS,iCAAiC,CAACF,KAAK,CAAC;EAExC,OAAON,uBAAA,CAAAS,8BAA8B,CAACH,KAAK,CAAC;AAC9C,CAAC,CAAC;AAEFL,OAAA,CAAAC,eAAe,CAACQ,WAAW,GAAG,iBAAiB"}
+{"version":3,"names":["React","require","useMenuGroupHeader_1","useMenuGroupHeaderStyles_1","renderMenuGroupHeader_1","react_shared_contexts_1","exports","MenuGroupHeader","forwardRef","props","ref","state","useMenuGroupHeader_unstable","useMenuGroupHeaderStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderMenuGroupHeader_unstable","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuGroupHeader_unstable } from './useMenuGroupHeader';\nimport { useMenuGroupHeaderStyles_unstable } from './useMenuGroupHeaderStyles';\nimport { renderMenuGroupHeader_unstable } from './renderMenuGroupHeader';\nimport type { MenuGroupHeaderProps } from './MenuGroupHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuGroupHeader, using the `useMenuGroupHeader_unstable` hook.\n */\nexport const MenuGroupHeader: ForwardRefComponent<MenuGroupHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGroupHeader_unstable(props, ref);\n\n  useMenuGroupHeaderStyles_unstable(state);\n\n  const { useMenuGroupHeaderStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderMenuGroupHeader_unstable(state);\n});\n\nMenuGroupHeader.displayName = 'MenuGroupHeader';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,oBAAA,gBAAAD,OAAA;AACA,MAAAE,0BAAA,gBAAAF,OAAA;AACA,MAAAG,uBAAA,gBAAAH,OAAA;AAGA,MAAAI,uBAAA,gBAAAJ,OAAA;AAEA;;;AAGaK,OAAA,CAAAC,eAAe,gBAA8CP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxG,MAAMC,KAAK,GAAGT,oBAAA,CAAAU,2BAA2B,CAACH,KAAK,EAAEC,GAAG,CAAC;EAErDP,0BAAA,CAAAU,iCAAiC,CAACF,KAAK,CAAC;EAExC,MAAM;IAAEE,iCAAiC,EAAEC;EAAe,CAAE,GAAGT,uBAAA,CAAAU,4BAA4B,EAAE;EAC7FD,eAAe,CAACH,KAAK,CAAC;EAEtB,OAAOP,uBAAA,CAAAY,8BAA8B,CAACL,KAAK,CAAC;AAC9C,CAAC,CAAC;AAEFL,OAAA,CAAAC,eAAe,CAACU,WAAW,GAAG,iBAAiB"}

package/lib-commonjs/components/MenuItem/MenuItem.js

@@ -8,12 +8,17 @@ const React = /*#__PURE__*/require("react");
 const useMenuItem_1 = /*#__PURE__*/require("./useMenuItem");
 const renderMenuItem_1 = /*#__PURE__*/require("./renderMenuItem");
 const useMenuItemStyles_1 = /*#__PURE__*/require("./useMenuItemStyles");
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 /**
  * Define a styled MenuItem, using the `useMenuItem_unstable` and `useMenuItemStyles_unstable` hook.
  */
 exports.MenuItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useMenuItem_1.useMenuItem_unstable(props, ref);
   useMenuItemStyles_1.useMenuItemStyles_unstable(state);
+  const {
+    useMenuItemStyles_unstable: useCustomStyles
+  } = react_shared_contexts_1.useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderMenuItem_1.renderMenuItem_unstable(state);
 });
 exports.MenuItem.displayName = 'MenuItem';

package/lib-commonjs/components/MenuItem/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","require","useMenuItem_1","renderMenuItem_1","useMenuItemStyles_1","exports","MenuItem","forwardRef","props","ref","state","useMenuItem_unstable","useMenuItemStyles_unstable","renderMenuItem_unstable","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuItem_unstable } from './useMenuItem';\nimport { renderMenuItem_unstable } from './renderMenuItem';\nimport { useMenuItemStyles_unstable } from './useMenuItemStyles';\nimport type { MenuItemProps } from './MenuItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled MenuItem, using the `useMenuItem_unstable` and `useMenuItemStyles_unstable` hook.\n */\nexport const MenuItem: ForwardRefComponent<MenuItemProps> = React.forwardRef((props, ref) => {\n  const state = useMenuItem_unstable(props, ref);\n\n  useMenuItemStyles_unstable(state);\n  return renderMenuItem_unstable(state);\n});\n\nMenuItem.displayName = 'MenuItem';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,aAAA,gBAAAD,OAAA;AACA,MAAAE,gBAAA,gBAAAF,OAAA;AACA,MAAAG,mBAAA,gBAAAH,OAAA;AAIA;;;AAGaI,OAAA,CAAAC,QAAQ,gBAAuCN,KAAK,CAACO,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC1F,MAAMC,KAAK,GAAGR,aAAA,CAAAS,oBAAoB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAE9CL,mBAAA,CAAAQ,0BAA0B,CAACF,KAAK,CAAC;EACjC,OAAOP,gBAAA,CAAAU,uBAAuB,CAACH,KAAK,CAAC;AACvC,CAAC,CAAC;AAEFL,OAAA,CAAAC,QAAQ,CAACQ,WAAW,GAAG,UAAU"}
+{"version":3,"names":["React","require","useMenuItem_1","renderMenuItem_1","useMenuItemStyles_1","react_shared_contexts_1","exports","MenuItem","forwardRef","props","ref","state","useMenuItem_unstable","useMenuItemStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderMenuItem_unstable","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuItem_unstable } from './useMenuItem';\nimport { renderMenuItem_unstable } from './renderMenuItem';\nimport { useMenuItemStyles_unstable } from './useMenuItemStyles';\nimport type { MenuItemProps } from './MenuItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuItem, using the `useMenuItem_unstable` and `useMenuItemStyles_unstable` hook.\n */\nexport const MenuItem: ForwardRefComponent<MenuItemProps> = React.forwardRef((props, ref) => {\n  const state = useMenuItem_unstable(props, ref);\n\n  useMenuItemStyles_unstable(state);\n\n  const { useMenuItemStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderMenuItem_unstable(state);\n});\n\nMenuItem.displayName = 'MenuItem';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,aAAA,gBAAAD,OAAA;AACA,MAAAE,gBAAA,gBAAAF,OAAA;AACA,MAAAG,mBAAA,gBAAAH,OAAA;AAGA,MAAAI,uBAAA,gBAAAJ,OAAA;AAEA;;;AAGaK,OAAA,CAAAC,QAAQ,gBAAuCP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC1F,MAAMC,KAAK,GAAGT,aAAA,CAAAU,oBAAoB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAE9CN,mBAAA,CAAAS,0BAA0B,CAACF,KAAK,CAAC;EAEjC,MAAM;IAAEE,0BAA0B,EAAEC;EAAe,CAAE,GAAGT,uBAAA,CAAAU,4BAA4B,EAAE;EACtFD,eAAe,CAACH,KAAK,CAAC;EAEtB,OAAOR,gBAAA,CAAAa,uBAAuB,CAACL,KAAK,CAAC;AACvC,CAAC,CAAC;AAEFL,OAAA,CAAAC,QAAQ,CAACU,WAAW,GAAG,UAAU"}

package/lib-commonjs/components/MenuItemCheckbox/MenuItemCheckbox.js

@@ -8,12 +8,17 @@ const React = /*#__PURE__*/require("react");
 const useMenuItemCheckbox_1 = /*#__PURE__*/require("./useMenuItemCheckbox");
 const renderMenuItemCheckbox_1 = /*#__PURE__*/require("./renderMenuItemCheckbox");
 const useMenuItemCheckboxStyles_1 = /*#__PURE__*/require("./useMenuItemCheckboxStyles");
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 /**
  * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox_unstable` hook.
  */
 exports.MenuItemCheckbox = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useMenuItemCheckbox_1.useMenuItemCheckbox_unstable(props, ref);
   useMenuItemCheckboxStyles_1.useMenuItemCheckboxStyles_unstable(state);
+  const {
+    useMenuItemCheckboxStyles_unstable: useCustomStyles
+  } = react_shared_contexts_1.useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderMenuItemCheckbox_1.renderMenuItemCheckbox_unstable(state);
 });
 exports.MenuItemCheckbox.displayName = 'MenuItemCheckbox';

package/lib-commonjs/components/MenuItemCheckbox/MenuItemCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","require","useMenuItemCheckbox_1","renderMenuItemCheckbox_1","useMenuItemCheckboxStyles_1","exports","MenuItemCheckbox","forwardRef","props","ref","state","useMenuItemCheckbox_unstable","useMenuItemCheckboxStyles_unstable","renderMenuItemCheckbox_unstable","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuItemCheckbox_unstable } from './useMenuItemCheckbox';\nimport { renderMenuItemCheckbox_unstable } from './renderMenuItemCheckbox';\nimport { useMenuItemCheckboxStyles_unstable } from './useMenuItemCheckboxStyles';\nimport type { MenuItemCheckboxProps } from './MenuItemCheckbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox_unstable` hook.\n */\nexport const MenuItemCheckbox: ForwardRefComponent<MenuItemCheckboxProps> = React.forwardRef((props, ref) => {\n  const state = useMenuItemCheckbox_unstable(props, ref);\n  useMenuItemCheckboxStyles_unstable(state);\n\n  return renderMenuItemCheckbox_unstable(state);\n});\n\nMenuItemCheckbox.displayName = 'MenuItemCheckbox';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,qBAAA,gBAAAD,OAAA;AACA,MAAAE,wBAAA,gBAAAF,OAAA;AACA,MAAAG,2BAAA,gBAAAH,OAAA;AAIA;;;AAGaI,OAAA,CAAAC,gBAAgB,gBAA+CN,KAAK,CAACO,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC1G,MAAMC,KAAK,GAAGR,qBAAA,CAAAS,4BAA4B,CAACH,KAAK,EAAEC,GAAG,CAAC;EACtDL,2BAAA,CAAAQ,kCAAkC,CAACF,KAAK,CAAC;EAEzC,OAAOP,wBAAA,CAAAU,+BAA+B,CAACH,KAAK,CAAC;AAC/C,CAAC,CAAC;AAEFL,OAAA,CAAAC,gBAAgB,CAACQ,WAAW,GAAG,kBAAkB"}
+{"version":3,"names":["React","require","useMenuItemCheckbox_1","renderMenuItemCheckbox_1","useMenuItemCheckboxStyles_1","react_shared_contexts_1","exports","MenuItemCheckbox","forwardRef","props","ref","state","useMenuItemCheckbox_unstable","useMenuItemCheckboxStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderMenuItemCheckbox_unstable","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuItemCheckbox_unstable } from './useMenuItemCheckbox';\nimport { renderMenuItemCheckbox_unstable } from './renderMenuItemCheckbox';\nimport { useMenuItemCheckboxStyles_unstable } from './useMenuItemCheckboxStyles';\nimport type { MenuItemCheckboxProps } from './MenuItemCheckbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox_unstable` hook.\n */\nexport const MenuItemCheckbox: ForwardRefComponent<MenuItemCheckboxProps> = React.forwardRef((props, ref) => {\n  const state = useMenuItemCheckbox_unstable(props, ref);\n\n  useMenuItemCheckboxStyles_unstable(state);\n\n  const { useMenuItemCheckboxStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderMenuItemCheckbox_unstable(state);\n});\n\nMenuItemCheckbox.displayName = 'MenuItemCheckbox';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,qBAAA,gBAAAD,OAAA;AACA,MAAAE,wBAAA,gBAAAF,OAAA;AACA,MAAAG,2BAAA,gBAAAH,OAAA;AAGA,MAAAI,uBAAA,gBAAAJ,OAAA;AAEA;;;AAGaK,OAAA,CAAAC,gBAAgB,gBAA+CP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC1G,MAAMC,KAAK,GAAGT,qBAAA,CAAAU,4BAA4B,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEtDN,2BAAA,CAAAS,kCAAkC,CAACF,KAAK,CAAC;EAEzC,MAAM;IAAEE,kCAAkC,EAAEC;EAAe,CAAE,GAAGT,uBAAA,CAAAU,4BAA4B,EAAE;EAC9FD,eAAe,CAACH,KAAK,CAAC;EAEtB,OAAOR,wBAAA,CAAAa,+BAA+B,CAACL,KAAK,CAAC;AAC/C,CAAC,CAAC;AAEFL,OAAA,CAAAC,gBAAgB,CAACU,WAAW,GAAG,kBAAkB"}

package/lib-commonjs/components/MenuItemRadio/MenuItemRadio.js

@@ -8,12 +8,17 @@ const React = /*#__PURE__*/require("react");
 const useMenuItemRadio_1 = /*#__PURE__*/require("./useMenuItemRadio");
 const renderMenuItemRadio_1 = /*#__PURE__*/require("./renderMenuItemRadio");
 const useMenuItemRadioStyles_1 = /*#__PURE__*/require("./useMenuItemRadioStyles");
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 /**
  * Define a styled MenuItemRadio, using the `useMenuItemRadio_unstable` hook.
  */
 exports.MenuItemRadio = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useMenuItemRadio_1.useMenuItemRadio_unstable(props, ref);
   useMenuItemRadioStyles_1.useMenuItemRadioStyles_unstable(state);
+  const {
+    useMenuItemRadioStyles_unstable: useCustomStyles
+  } = react_shared_contexts_1.useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderMenuItemRadio_1.renderMenuItemRadio_unstable(state);
 });
 exports.MenuItemRadio.displayName = 'MenuItemRadio';

package/lib-commonjs/components/MenuItemRadio/MenuItemRadio.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","require","useMenuItemRadio_1","renderMenuItemRadio_1","useMenuItemRadioStyles_1","exports","MenuItemRadio","forwardRef","props","ref","state","useMenuItemRadio_unstable","useMenuItemRadioStyles_unstable","renderMenuItemRadio_unstable","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemRadio/MenuItemRadio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuItemRadio_unstable } from './useMenuItemRadio';\nimport { renderMenuItemRadio_unstable } from './renderMenuItemRadio';\nimport { useMenuItemRadioStyles_unstable } from './useMenuItemRadioStyles';\nimport type { MenuItemRadioProps } from './MenuItemRadio.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled MenuItemRadio, using the `useMenuItemRadio_unstable` hook.\n */\nexport const MenuItemRadio: ForwardRefComponent<MenuItemRadioProps> = React.forwardRef((props, ref) => {\n  const state = useMenuItemRadio_unstable(props, ref);\n  useMenuItemRadioStyles_unstable(state);\n\n  return renderMenuItemRadio_unstable(state);\n});\n\nMenuItemRadio.displayName = 'MenuItemRadio';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,kBAAA,gBAAAD,OAAA;AACA,MAAAE,qBAAA,gBAAAF,OAAA;AACA,MAAAG,wBAAA,gBAAAH,OAAA;AAIA;;;AAGaI,OAAA,CAAAC,aAAa,gBAA4CN,KAAK,CAACO,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpG,MAAMC,KAAK,GAAGR,kBAAA,CAAAS,yBAAyB,CAACH,KAAK,EAAEC,GAAG,CAAC;EACnDL,wBAAA,CAAAQ,+BAA+B,CAACF,KAAK,CAAC;EAEtC,OAAOP,qBAAA,CAAAU,4BAA4B,CAACH,KAAK,CAAC;AAC5C,CAAC,CAAC;AAEFL,OAAA,CAAAC,aAAa,CAACQ,WAAW,GAAG,eAAe"}
+{"version":3,"names":["React","require","useMenuItemRadio_1","renderMenuItemRadio_1","useMenuItemRadioStyles_1","react_shared_contexts_1","exports","MenuItemRadio","forwardRef","props","ref","state","useMenuItemRadio_unstable","useMenuItemRadioStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderMenuItemRadio_unstable","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemRadio/MenuItemRadio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuItemRadio_unstable } from './useMenuItemRadio';\nimport { renderMenuItemRadio_unstable } from './renderMenuItemRadio';\nimport { useMenuItemRadioStyles_unstable } from './useMenuItemRadioStyles';\nimport type { MenuItemRadioProps } from './MenuItemRadio.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuItemRadio, using the `useMenuItemRadio_unstable` hook.\n */\nexport const MenuItemRadio: ForwardRefComponent<MenuItemRadioProps> = React.forwardRef((props, ref) => {\n  const state = useMenuItemRadio_unstable(props, ref);\n\n  useMenuItemRadioStyles_unstable(state);\n\n  const { useMenuItemRadioStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderMenuItemRadio_unstable(state);\n});\n\nMenuItemRadio.displayName = 'MenuItemRadio';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,kBAAA,gBAAAD,OAAA;AACA,MAAAE,qBAAA,gBAAAF,OAAA;AACA,MAAAG,wBAAA,gBAAAH,OAAA;AAGA,MAAAI,uBAAA,gBAAAJ,OAAA;AAEA;;;AAGaK,OAAA,CAAAC,aAAa,gBAA4CP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpG,MAAMC,KAAK,GAAGT,kBAAA,CAAAU,yBAAyB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEnDN,wBAAA,CAAAS,+BAA+B,CAACF,KAAK,CAAC;EAEtC,MAAM;IAAEE,+BAA+B,EAAEC;EAAe,CAAE,GAAGT,uBAAA,CAAAU,4BAA4B,EAAE;EAC3FD,eAAe,CAACH,KAAK,CAAC;EAEtB,OAAOR,qBAAA,CAAAa,4BAA4B,CAACL,KAAK,CAAC;AAC5C,CAAC,CAAC;AAEFL,OAAA,CAAAC,aAAa,CAACU,WAAW,GAAG,eAAe"}