@fluentui/react-menu 9.19.6 → 9.20.1

package/CHANGELOG.md

@@ -1,12 +1,49 @@
 # Change Log - @fluentui/react-menu
 
-This log was last generated on Mon, 08 Sep 2025 12:41:45 GMT and should not be manually modified.
+This log was last generated on Wed, 08 Oct 2025 12:00:20 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.20.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.20.1)
+
+Wed, 08 Oct 2025 12:00:20 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.20.0..@fluentui/react-menu_v9.20.1)
+
+### Patches
+
+- Bump @fluentui/react-aria to v9.17.2 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.9 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
+- Bump @fluentui/react-portal to v9.8.4 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
+- Bump @fluentui/react-positioning to v9.20.7 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
+- Bump @fluentui/react-tabster to v9.26.7 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
+- Bump @fluentui/react-utilities to v9.25.1 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.2 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
+
+## [9.20.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.20.0)
+
+Thu, 02 Oct 2025 15:12:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.19.6..@fluentui/react-menu_v9.20.0)
+
+### Minor changes
+
+- Add correct nesting validation for Menu and MenuGridcomponents and subcomponents ([PR #35128](https://github.com/microsoft/fluentui/pull/35128) by adam.samec@gmail.com)
+- Bump @fluentui/react-aria to v9.17.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.8 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-portal to v9.8.3 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-positioning to v9.20.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.2 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-tabster to v9.26.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-utilities to v9.25.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+
+### Patches
+
+- feat: enforce usage of use client directive for files with client-only features ([PR #35173](https://github.com/microsoft/fluentui/pull/35173) by dmytrokirpa@microsoft.com)
+- fix: useValidateNesting ref type React 19 issue ([PR #35221](https://github.com/microsoft/fluentui/pull/35221) by dmytrokirpa@microsoft.com)
+
 ## [9.19.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.19.6)
 
-Mon, 08 Sep 2025 12:41:45 GMT 
+Mon, 08 Sep 2025 12:51:05 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.19.5..@fluentui/react-menu_v9.19.6)
 
 ### Patches

package/lib/components/Menu/Menu.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useMenu_unstable } from './useMenu';
 import { useMenuContextValues_unstable } from './useMenuContextValues';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Menu/Menu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenu_unstable } from './useMenu';\nimport { useMenuContextValues_unstable } from './useMenuContextValues';\nimport { renderMenu_unstable } from './renderMenu';\nimport type { MenuProps } from './Menu.types';\n\n/**\n * Wrapper component that manages state for a popup MenuList and a MenuTrigger\n */\nexport const Menu: React.FC<MenuProps> = props => {\n  const state = useMenu_unstable(props);\n  const contextValues = useMenuContextValues_unstable(state);\n\n  return renderMenu_unstable(state, contextValues);\n};\n\nMenu.displayName = 'Menu';\n"],"names":["React","useMenu_unstable","useMenuContextValues_unstable","renderMenu_unstable","Menu","props","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,mBAAmB,QAAQ,eAAe;AAGnD;;CAEC,GACD,OAAO,MAAMC,OAA4BC,CAAAA;IACvC,MAAMC,QAAQL,iBAAiBI;IAC/B,MAAME,gBAAgBL,8BAA8BI;IAEpD,OAAOH,oBAAoBG,OAAOC;AACpC,EAAE;AAEFH,KAAKI,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Menu/Menu.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenu_unstable } from './useMenu';\nimport { useMenuContextValues_unstable } from './useMenuContextValues';\nimport { renderMenu_unstable } from './renderMenu';\nimport type { MenuProps } from './Menu.types';\n\n/**\n * Wrapper component that manages state for a popup MenuList and a MenuTrigger\n */\nexport const Menu: React.FC<MenuProps> = props => {\n  const state = useMenu_unstable(props);\n  const contextValues = useMenuContextValues_unstable(state);\n\n  return renderMenu_unstable(state, contextValues);\n};\n\nMenu.displayName = 'Menu';\n"],"names":["React","useMenu_unstable","useMenuContextValues_unstable","renderMenu_unstable","Menu","props","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,mBAAmB,QAAQ,eAAe;AAGnD;;CAEC,GACD,OAAO,MAAMC,OAA4BC,CAAAA;IACvC,MAAMC,QAAQL,iBAAiBI;IAC/B,MAAME,gBAAgBL,8BAA8BI;IAEpD,OAAOH,oBAAoBG,OAAOC;AACpC,EAAE;AAEFH,KAAKI,WAAW,GAAG"}

package/lib/components/Menu/useMenu.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { resolvePositioningShorthand, usePositioningMouseTarget, usePositioning, useSafeZoneArea } from '@fluentui/react-positioning';
 import { useControllableState, useId, useOnClickOutside, useEventCallback, useOnScrollOutside, elementContains, useTimeout, useFirstMount, useMergedRefs } from '@fluentui/react-utilities';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Menu/useMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  resolvePositioningShorthand,\n  usePositioningMouseTarget,\n  usePositioning,\n  useSafeZoneArea,\n  type PositioningShorthandValue,\n} from '@fluentui/react-positioning';\nimport {\n  useControllableState,\n  useId,\n  useOnClickOutside,\n  useEventCallback,\n  useOnScrollOutside,\n  elementContains,\n  useTimeout,\n  useFirstMount,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MENU_SAFEZONE_TIMEOUT_EVENT, MENU_ENTER_EVENT, useOnMenuMouseEnter, useIsSubmenu } from '../../utils';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\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 & { safeZone?: boolean | { timeout?: number } }): 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    safeZone,\n  } = props;\n\n  const { targetDocument } = useFluent();\n  const triggerId = useId('menu');\n  const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n  const positioningOptions = {\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, containerRef } = usePositioning(positioningOptions);\n\n  const enableSafeZone = safeZone && openOnHover;\n  const safeZoneDescriptorRef = React.useRef({\n    isInside: false,\n    mouseCoordinates: { x: 0, y: 0 },\n  });\n\n  const safeZoneHandle = useSafeZoneArea({\n    disabled: !enableSafeZone,\n    timeout: typeof safeZone === 'object' ? safeZone.timeout : 300,\n\n    onSafeZoneEnter: e => {\n      setOpen(e, { open: true, keyboard: false, type: 'menuSafeZoneMouseEnter', event: e });\n      safeZoneDescriptorRef.current.isInside = true;\n    },\n    onSafeZoneLeave: () => {\n      safeZoneDescriptorRef.current.isInside = false;\n    },\n    onSafeZoneMove: e => {\n      safeZoneDescriptorRef.current.mouseCoordinates = {\n        x: e.clientX,\n        y: e.clientY,\n      };\n    },\n    onSafeZoneTimeout: () => {\n      const event = new CustomEvent(MENU_SAFEZONE_TIMEOUT_EVENT);\n\n      setOpen(event, { open: false, keyboard: false, type: 'menuSafeZoneTimeout', event });\n\n      if (safeZoneDescriptorRef.current.isInside && targetDocument) {\n        const elementsInPoint = targetDocument.elementsFromPoint(\n          safeZoneDescriptorRef.current.mouseCoordinates.x,\n          safeZoneDescriptorRef.current.mouseCoordinates.y,\n        );\n        const menuItemEl = elementsInPoint.find(el => {\n          return el.classList.contains(menuItemClassNames.root);\n        }) as HTMLElement | null;\n\n        menuItemEl?.dispatchEvent(event);\n      }\n    },\n  });\n\n  const triggerRef = useMergedRefs(targetRef, safeZoneHandle.targetRef);\n  const menuPopoverRef = useMergedRefs(containerRef, safeZoneHandle.containerRef);\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    safeZone: safeZoneHandle.elementToRender,\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  'use no memo';\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 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    }\n\n    if (data.bubble) {\n      parentSetOpen(e, { ...data });\n    }\n\n    setOpenState(data.open);\n  });\n\n  const [setOpenTimeout, clearOpenTimeout] = useTimeout();\n\n  const setOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData & { ignoreHoverDelay?: boolean }) => {\n    clearOpenTimeout();\n    if (!(e instanceof Event) && e.persist) {\n      // < React 17 still uses pooled synthetic events\n      e.persist();\n    }\n\n    const shouldUseDelay =\n      !data.ignoreHoverDelay &&\n      (e.type === 'mouseleave' || e.type === 'mouseover' || e.type === 'mousemove' || e.type === MENU_ENTER_EVENT);\n\n    if (shouldUseDelay) {\n      if (state.triggerRef.current?.contains(e.target as HTMLElement)) {\n        enteringTriggerRef.current = e.type === 'mouseover' || e.type === 'mousemove';\n      }\n\n      setOpenTimeout(() => 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 | null>[],\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 | null>[],\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  // 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  const firstMount = useFirstMount();\n  React.useEffect(() => {\n    if (open) {\n      focusFirst();\n    } else {\n      if (!firstMount) {\n        if (targetDocument?.activeElement === targetDocument?.body) {\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    // firstMount change should not re-run this effect\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [state.triggerRef, state.isSubmenu, open, focusFirst, targetDocument, state.menuPopoverRef]);\n\n  return [open, setOpen] as const;\n};\n"],"names":["React","resolvePositioningShorthand","usePositioningMouseTarget","usePositioning","useSafeZoneArea","useControllableState","useId","useOnClickOutside","useEventCallback","useOnScrollOutside","elementContains","useTimeout","useFirstMount","useMergedRefs","useFluent_unstable","useFluent","useFocusFinders","useMenuContext_unstable","MENU_SAFEZONE_TIMEOUT_EVENT","MENU_ENTER_EVENT","useOnMenuMouseEnter","useIsSubmenu","menuItemClassNames","submenuFallbackPositions","useMenu_unstable","props","isSubmenu","hoverDelay","inline","hasCheckmarks","hasIcons","closeOnScroll","openOnContext","persistOnItemClick","openOnHover","defaultCheckedValues","mountNode","safeZone","targetDocument","triggerId","contextTarget","setContextTarget","positioningOptions","position","align","target","undefined","fallbackPositions","positioning","children","Children","toArray","process","env","NODE_ENV","length","console","warn","menuTrigger","menuPopover","targetRef","containerRef","enableSafeZone","safeZoneDescriptorRef","useRef","isInside","mouseCoordinates","x","y","safeZoneHandle","disabled","timeout","onSafeZoneEnter","e","setOpen","open","keyboard","type","event","current","onSafeZoneLeave","onSafeZoneMove","clientX","clientY","onSafeZoneTimeout","CustomEvent","elementsInPoint","elementsFromPoint","menuItemEl","find","el","classList","contains","root","dispatchEvent","triggerRef","menuPopoverRef","useMenuOpenState","defaultOpen","onOpenChange","checkedValues","onCheckedValueChange","useMenuSelectableState","components","elementToRender","setCheckedValues","state","defaultState","initialState","name","checkedItems","currentValue","parentSetOpen","context","data","enteringTriggerRef","setOpenState","trySetOpen","detail","nativeEvent","bubble","setOpenTimeout","clearOpenTimeout","Event","persist","shouldUseDelay","ignoreHoverDelay","element","refs","filter","Boolean","callback","findFirstFocusable","focusFirst","useCallback","firstFocusable","focus","firstMount","useEffect","activeElement","body"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Menu/useMenu.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  resolvePositioningShorthand,\n  usePositioningMouseTarget,\n  usePositioning,\n  useSafeZoneArea,\n  type PositioningShorthandValue,\n} from '@fluentui/react-positioning';\nimport {\n  useControllableState,\n  useId,\n  useOnClickOutside,\n  useEventCallback,\n  useOnScrollOutside,\n  elementContains,\n  useTimeout,\n  useFirstMount,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MENU_SAFEZONE_TIMEOUT_EVENT, MENU_ENTER_EVENT, useOnMenuMouseEnter, useIsSubmenu } from '../../utils';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\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 & { safeZone?: boolean | { timeout?: number } }): 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    safeZone,\n  } = props;\n\n  const { targetDocument } = useFluent();\n  const triggerId = useId('menu');\n  const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n  const positioningOptions = {\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, containerRef } = usePositioning(positioningOptions);\n\n  const enableSafeZone = safeZone && openOnHover;\n  const safeZoneDescriptorRef = React.useRef({\n    isInside: false,\n    mouseCoordinates: { x: 0, y: 0 },\n  });\n\n  const safeZoneHandle = useSafeZoneArea({\n    disabled: !enableSafeZone,\n    timeout: typeof safeZone === 'object' ? safeZone.timeout : 300,\n\n    onSafeZoneEnter: e => {\n      setOpen(e, { open: true, keyboard: false, type: 'menuSafeZoneMouseEnter', event: e });\n      safeZoneDescriptorRef.current.isInside = true;\n    },\n    onSafeZoneLeave: () => {\n      safeZoneDescriptorRef.current.isInside = false;\n    },\n    onSafeZoneMove: e => {\n      safeZoneDescriptorRef.current.mouseCoordinates = {\n        x: e.clientX,\n        y: e.clientY,\n      };\n    },\n    onSafeZoneTimeout: () => {\n      const event = new CustomEvent(MENU_SAFEZONE_TIMEOUT_EVENT);\n\n      setOpen(event, { open: false, keyboard: false, type: 'menuSafeZoneTimeout', event });\n\n      if (safeZoneDescriptorRef.current.isInside && targetDocument) {\n        const elementsInPoint = targetDocument.elementsFromPoint(\n          safeZoneDescriptorRef.current.mouseCoordinates.x,\n          safeZoneDescriptorRef.current.mouseCoordinates.y,\n        );\n        const menuItemEl = elementsInPoint.find(el => {\n          return el.classList.contains(menuItemClassNames.root);\n        }) as HTMLElement | null;\n\n        menuItemEl?.dispatchEvent(event);\n      }\n    },\n  });\n\n  const triggerRef = useMergedRefs(targetRef, safeZoneHandle.targetRef);\n  const menuPopoverRef = useMergedRefs(containerRef, safeZoneHandle.containerRef);\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    safeZone: safeZoneHandle.elementToRender,\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  'use no memo';\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 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    }\n\n    if (data.bubble) {\n      parentSetOpen(e, { ...data });\n    }\n\n    setOpenState(data.open);\n  });\n\n  const [setOpenTimeout, clearOpenTimeout] = useTimeout();\n\n  const setOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData & { ignoreHoverDelay?: boolean }) => {\n    clearOpenTimeout();\n    if (!(e instanceof Event) && e.persist) {\n      // < React 17 still uses pooled synthetic events\n      e.persist();\n    }\n\n    const shouldUseDelay =\n      !data.ignoreHoverDelay &&\n      (e.type === 'mouseleave' || e.type === 'mouseover' || e.type === 'mousemove' || e.type === MENU_ENTER_EVENT);\n\n    if (shouldUseDelay) {\n      if (state.triggerRef.current?.contains(e.target as HTMLElement)) {\n        enteringTriggerRef.current = e.type === 'mouseover' || e.type === 'mousemove';\n      }\n\n      setOpenTimeout(() => 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 | null>[],\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 | null>[],\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  // 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  const firstMount = useFirstMount();\n  React.useEffect(() => {\n    if (open) {\n      focusFirst();\n    } else {\n      if (!firstMount) {\n        if (targetDocument?.activeElement === targetDocument?.body) {\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    // firstMount change should not re-run this effect\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [state.triggerRef, state.isSubmenu, open, focusFirst, targetDocument, state.menuPopoverRef]);\n\n  return [open, setOpen] as const;\n};\n"],"names":["React","resolvePositioningShorthand","usePositioningMouseTarget","usePositioning","useSafeZoneArea","useControllableState","useId","useOnClickOutside","useEventCallback","useOnScrollOutside","elementContains","useTimeout","useFirstMount","useMergedRefs","useFluent_unstable","useFluent","useFocusFinders","useMenuContext_unstable","MENU_SAFEZONE_TIMEOUT_EVENT","MENU_ENTER_EVENT","useOnMenuMouseEnter","useIsSubmenu","menuItemClassNames","submenuFallbackPositions","useMenu_unstable","props","isSubmenu","hoverDelay","inline","hasCheckmarks","hasIcons","closeOnScroll","openOnContext","persistOnItemClick","openOnHover","defaultCheckedValues","mountNode","safeZone","targetDocument","triggerId","contextTarget","setContextTarget","positioningOptions","position","align","target","undefined","fallbackPositions","positioning","children","Children","toArray","process","env","NODE_ENV","length","console","warn","menuTrigger","menuPopover","targetRef","containerRef","enableSafeZone","safeZoneDescriptorRef","useRef","isInside","mouseCoordinates","x","y","safeZoneHandle","disabled","timeout","onSafeZoneEnter","e","setOpen","open","keyboard","type","event","current","onSafeZoneLeave","onSafeZoneMove","clientX","clientY","onSafeZoneTimeout","CustomEvent","elementsInPoint","elementsFromPoint","menuItemEl","find","el","classList","contains","root","dispatchEvent","triggerRef","menuPopoverRef","useMenuOpenState","defaultOpen","onOpenChange","checkedValues","onCheckedValueChange","useMenuSelectableState","components","elementToRender","setCheckedValues","state","defaultState","initialState","name","checkedItems","currentValue","parentSetOpen","context","data","enteringTriggerRef","setOpenState","trySetOpen","detail","nativeEvent","bubble","setOpenTimeout","clearOpenTimeout","Event","persist","shouldUseDelay","ignoreHoverDelay","element","refs","filter","Boolean","callback","findFirstFocusable","focusFirst","useCallback","firstFocusable","focus","firstMount","useEffect","activeElement","body"],"mappings":"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"}

package/lib/components/MenuDivider/MenuDivider.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useMenuDivider_unstable } from './useMenuDivider';
 import { useMenuDividerStyles_unstable } from './useMenuDividerStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuDivider/MenuDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuDivider_unstable } from './useMenuDivider';\nimport { useMenuDividerStyles_unstable } from './useMenuDividerStyles.styles';\nimport { renderMenuDivider_unstable } from './renderMenuDivider';\nimport type { MenuDividerProps } from './MenuDivider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_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  useCustomStyleHook_unstable('useMenuDividerStyles_unstable')(state);\n\n  return renderMenuDivider_unstable(state);\n});\n\nMenuDivider.displayName = 'MenuDivider';\n"],"names":["React","useMenuDivider_unstable","useMenuDividerStyles_unstable","renderMenuDivider_unstable","useCustomStyleHook_unstable","MenuDivider","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,6BAA6B,QAAQ,gCAAgC;AAC9E,SAASC,0BAA0B,QAAQ,sBAAsB;AAGjE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CN,8BAA8BO;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAON,2BAA2BM;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/MenuDivider/MenuDivider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuDivider_unstable } from './useMenuDivider';\nimport { useMenuDividerStyles_unstable } from './useMenuDividerStyles.styles';\nimport { renderMenuDivider_unstable } from './renderMenuDivider';\nimport type { MenuDividerProps } from './MenuDivider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_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  useCustomStyleHook_unstable('useMenuDividerStyles_unstable')(state);\n\n  return renderMenuDivider_unstable(state);\n});\n\nMenuDivider.displayName = 'MenuDivider';\n"],"names":["React","useMenuDivider_unstable","useMenuDividerStyles_unstable","renderMenuDivider_unstable","useCustomStyleHook_unstable","MenuDivider","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,6BAA6B,QAAQ,gCAAgC;AAC9E,SAASC,0BAA0B,QAAQ,sBAAsB;AAGjE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CN,8BAA8BO;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAON,2BAA2BM;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { mergeClasses, __styles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const menuDividerClassNames = {

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

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","__styles","tokens","menuDividerClassNames","root","useStyles","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","a9b677","B9xav0g","oivjwe","Bn0qgzm","Bgfg5da","d","p","useMenuDividerStyles_unstable","state","styles","className"],"sources":["useMenuDividerStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const menuDividerClassNames = {\n    root: 'fui-MenuDivider'\n};\nconst useStyles = makeStyles({\n    root: {\n        margin: '4px -5px 4px -5px',\n        width: 'auto',\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`\n    }\n});\nexport const useMenuDividerStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(menuDividerClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAMjB,CAAC;AACF,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EAClD,aAAa;;EACb,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;EAC1Bc,KAAK,CAACf,IAAI,CAACiB,SAAS,GAAGrB,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAEgB,MAAM,CAAChB,IAAI,EAAEe,KAAK,CAACf,IAAI,CAACiB,SAAS,CAAC;EAClG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["mergeClasses","__styles","tokens","menuDividerClassNames","root","useStyles","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","a9b677","B9xav0g","oivjwe","Bn0qgzm","Bgfg5da","d","p","useMenuDividerStyles_unstable","state","styles","className"],"sources":["useMenuDividerStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const menuDividerClassNames = {\n    root: 'fui-MenuDivider'\n};\nconst useStyles = makeStyles({\n    root: {\n        margin: '4px -5px 4px -5px',\n        width: 'auto',\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`\n    }\n});\nexport const useMenuDividerStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(menuDividerClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAMjB,CAAC;AACF,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EAClD,aAAa;;EACb,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;EAC1Bc,KAAK,CAACf,IAAI,CAACiB,SAAS,GAAGrB,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAEgB,MAAM,CAAChB,IAAI,EAAEe,KAAK,CAACf,IAAI,CAACiB,SAAS,CAAC;EAClG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/MenuDivider/useMenuDividerStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 import { mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const menuDividerClassNames = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuDivider/useMenuDividerStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuDividerClassNames: SlotClassNames<MenuDividerSlots> = {\n  root: 'fui-MenuDivider',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    margin: '4px -5px 4px -5px',\n    width: 'auto',\n    borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n  },\n});\n\nexport const useMenuDividerStyles_unstable = (state: MenuDividerState): MenuDividerState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuDividerClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","tokens","menuDividerClassNames","root","useStyles","margin","width","borderBottom","strokeWidthThin","colorNeutralStroke2","useMenuDividerStyles_unstable","state","styles","className"],"mappings":"AAAA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,QAAQ;QACRC,OAAO;QACPC,cAAc,GAAGN,OAAOO,eAAe,CAAC,OAAO,EAAEP,OAAOQ,mBAAmB,EAAE;IAC/E;AACF;AAEA,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASR;IACfO,MAAMR,IAAI,CAACU,SAAS,GAAGd,aAAaG,sBAAsBC,IAAI,EAAES,OAAOT,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IAEjG,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MenuDivider/useMenuDividerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuDividerClassNames: SlotClassNames<MenuDividerSlots> = {\n  root: 'fui-MenuDivider',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    margin: '4px -5px 4px -5px',\n    width: 'auto',\n    borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n  },\n});\n\nexport const useMenuDividerStyles_unstable = (state: MenuDividerState): MenuDividerState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuDividerClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","tokens","menuDividerClassNames","root","useStyles","margin","width","borderBottom","strokeWidthThin","colorNeutralStroke2","useMenuDividerStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,QAAQ;QACRC,OAAO;QACPC,cAAc,GAAGN,OAAOO,eAAe,CAAC,OAAO,EAAEP,OAAOQ,mBAAmB,EAAE;IAC/E;AACF;AAEA,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASR;IACfO,MAAMR,IAAI,CAACU,SAAS,GAAGd,aAAaG,sBAAsBC,IAAI,EAAES,OAAOT,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IAEjG,OAAOF;AACT,EAAE"}

package/lib/components/MenuGroup/MenuGroup.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useMenuGroup_unstable } from './useMenuGroup';
 import { renderMenuGroup_unstable } from './renderMenuGroup';

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

@@ -1 +1 @@
-{"version":3,"sources":["../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.styles';\nimport { useCustomStyleHook_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  useCustomStyleHook_unstable('useMenuGroupStyles_unstable')(state);\n\n  return renderMenuGroup_unstable(state, contextValues);\n});\n\nMenuGroup.displayName = 'MenuGroup';\n"],"names":["React","useMenuGroup_unstable","renderMenuGroup_unstable","useMenuGroupContextValues_unstable","useMenuGroupStyles_unstable","useCustomStyleHook_unstable","MenuGroup","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,kCAAkC,QAAQ,8BAA8B;AAGjF,SAASC,2BAA2B,QAAQ,8BAA8B;AAC1E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,0BAAiDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQT,sBAAsBO,OAAOC;IAC3C,MAAME,gBAAgBR,mCAAmCO;IAEzDN,4BAA4BM;IAE5BL,4BAA4B,+BAA+BK;IAE3D,OAAOR,yBAAyBQ,OAAOC;AACzC,GAAG;AAEHL,UAAUM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/MenuGroup/MenuGroup.tsx"],"sourcesContent":["'use client';\n\nimport * 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.styles';\nimport { useCustomStyleHook_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  useCustomStyleHook_unstable('useMenuGroupStyles_unstable')(state);\n\n  return renderMenuGroup_unstable(state, contextValues);\n});\n\nMenuGroup.displayName = 'MenuGroup';\n"],"names":["React","useMenuGroup_unstable","renderMenuGroup_unstable","useMenuGroupContextValues_unstable","useMenuGroupStyles_unstable","useCustomStyleHook_unstable","MenuGroup","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,kCAAkC,QAAQ,8BAA8B;AAGjF,SAASC,2BAA2B,QAAQ,8BAA8B;AAC1E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,0BAAiDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQT,sBAAsBO,OAAOC;IAC3C,MAAME,gBAAgBR,mCAAmCO;IAEzDN,4BAA4BM;IAE5BL,4BAA4B,+BAA+BK;IAE3D,OAAOR,yBAAyBQ,OAAOC;AACzC,GAAG;AAEHL,UAAUM,WAAW,GAAG"}

package/lib/components/MenuGroup/useMenuGroupContextValues.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGroup/useMenuGroupContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { MenuGroupContextValues, MenuGroupState } from './MenuGroup.types';\n\nexport function useMenuGroupContextValues_unstable(state: MenuGroupState): MenuGroupContextValues {\n  const { headerId } = state;\n  const menuGroup = React.useMemo(() => ({ headerId }), [headerId]);\n\n  return { menuGroup };\n}\n"],"names":["React","useMenuGroupContextValues_unstable","state","headerId","menuGroup","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,mCAAmCC,KAAqB;IACtE,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAME,YAAYJ,MAAMK,OAAO,CAAC,IAAO,CAAA;YAAEF;QAAS,CAAA,GAAI;QAACA;KAAS;IAEhE,OAAO;QAAEC;IAAU;AACrB"}
+{"version":3,"sources":["../src/components/MenuGroup/useMenuGroupContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { MenuGroupContextValues, MenuGroupState } from './MenuGroup.types';\n\nexport function useMenuGroupContextValues_unstable(state: MenuGroupState): MenuGroupContextValues {\n  const { headerId } = state;\n  const menuGroup = React.useMemo(() => ({ headerId }), [headerId]);\n\n  return { menuGroup };\n}\n"],"names":["React","useMenuGroupContextValues_unstable","state","headerId","menuGroup","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,mCAAmCC,KAAqB;IACtE,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAME,YAAYJ,MAAMK,OAAO,CAAC,IAAO,CAAA;YAAEF;QAAS,CAAA,GAAI;QAACA;KAAS;IAEhE,OAAO;QAAEC;IAAU;AACrB"}

package/lib/components/MenuGroupHeader/MenuGroupHeader.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useMenuGroupHeader_unstable } from './useMenuGroupHeader';
 import { useMenuGroupHeaderStyles_unstable } from './useMenuGroupHeaderStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGroupHeader/MenuGroupHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuGroupHeader_unstable } from './useMenuGroupHeader';\nimport { useMenuGroupHeaderStyles_unstable } from './useMenuGroupHeaderStyles.styles';\nimport { renderMenuGroupHeader_unstable } from './renderMenuGroupHeader';\nimport type { MenuGroupHeaderProps } from './MenuGroupHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_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  useCustomStyleHook_unstable('useMenuGroupHeaderStyles_unstable')(state);\n\n  return renderMenuGroupHeader_unstable(state);\n});\n\nMenuGroupHeader.displayName = 'MenuGroupHeader';\n"],"names":["React","useMenuGroupHeader_unstable","useMenuGroupHeaderStyles_unstable","renderMenuGroupHeader_unstable","useCustomStyleHook_unstable","MenuGroupHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,iCAAiC,QAAQ,oCAAoC;AACtF,SAASC,8BAA8B,QAAQ,0BAA0B;AAGzE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQR,4BAA4BM,OAAOC;IAEjDN,kCAAkCO;IAElCL,4BAA4B,qCAAqCK;IAEjE,OAAON,+BAA+BM;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/MenuGroupHeader/MenuGroupHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuGroupHeader_unstable } from './useMenuGroupHeader';\nimport { useMenuGroupHeaderStyles_unstable } from './useMenuGroupHeaderStyles.styles';\nimport { renderMenuGroupHeader_unstable } from './renderMenuGroupHeader';\nimport type { MenuGroupHeaderProps } from './MenuGroupHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_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  useCustomStyleHook_unstable('useMenuGroupHeaderStyles_unstable')(state);\n\n  return renderMenuGroupHeader_unstable(state);\n});\n\nMenuGroupHeader.displayName = 'MenuGroupHeader';\n"],"names":["React","useMenuGroupHeader_unstable","useMenuGroupHeaderStyles_unstable","renderMenuGroupHeader_unstable","useCustomStyleHook_unstable","MenuGroupHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,iCAAiC,QAAQ,oCAAoC;AACtF,SAASC,8BAA8B,QAAQ,0BAA0B;AAGzE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQR,4BAA4BM,OAAOC;IAEjDN,kCAAkCO;IAElCL,4BAA4B,qCAAqCK;IAEjE,OAAON,+BAA+BM;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

package/lib/components/MenuGroupHeader/useMenuGroupHeader.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useMenuGroupContext_unstable } from '../../contexts/menuGroupContext';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';

package/lib/components/MenuGroupHeader/useMenuGroupHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGroupHeader/useMenuGroupHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { useMenuGroupContext_unstable } from '../../contexts/menuGroupContext';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { MenuGroupHeaderProps, MenuGroupHeaderState } from './MenuGroupHeader.types';\n\n/**\n * Given user props, returns state and render function for a MenuGroupHeader.\n */\nexport function useMenuGroupHeader_unstable(\n  props: MenuGroupHeaderProps,\n  ref: React.Ref<HTMLElement>,\n): MenuGroupHeaderState {\n  const { headerId: id } = useMenuGroupContext_unstable();\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        id,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","useMenuGroupContext_unstable","getIntrinsicElementProps","slot","useMenuGroupHeader_unstable","props","ref","headerId","id","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,4BAA4B,QAAQ,kCAAkC;AAC/E,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;CAEC,GACD,OAAO,SAASC,4BACdC,KAA2B,EAC3BC,GAA2B;IAE3B,MAAM,EAAEC,UAAUC,EAAE,EAAE,GAAGP;IAEzB,OAAO;QACLQ,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FI,KAAKA;YACLE;YACA,GAAGH,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF"}
+{"version":3,"sources":["../src/components/MenuGroupHeader/useMenuGroupHeader.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuGroupContext_unstable } from '../../contexts/menuGroupContext';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { MenuGroupHeaderProps, MenuGroupHeaderState } from './MenuGroupHeader.types';\n\n/**\n * Given user props, returns state and render function for a MenuGroupHeader.\n */\nexport function useMenuGroupHeader_unstable(\n  props: MenuGroupHeaderProps,\n  ref: React.Ref<HTMLElement>,\n): MenuGroupHeaderState {\n  const { headerId: id } = useMenuGroupContext_unstable();\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        id,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","useMenuGroupContext_unstable","getIntrinsicElementProps","slot","useMenuGroupHeader_unstable","props","ref","headerId","id","components","root","always","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,4BAA4B,QAAQ,kCAAkC;AAC/E,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;CAEC,GACD,OAAO,SAASC,4BACdC,KAA2B,EAC3BC,GAA2B;IAE3B,MAAM,EAAEC,UAAUC,EAAE,EAAE,GAAGP;IAEzB,OAAO;QACLQ,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FI,KAAKA;YACLE;YACA,GAAGH,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF"}

package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { mergeClasses, __styles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const menuGroupHeaderClassNames = {

package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","__styles","tokens","menuGroupHeaderClassNames","root","useStyles","Be2twd7","sj55zd","uwmqm3","z189sj","Bhrd7zp","Bqenvij","mc9l5x","Bt984gj","d","useMenuGroupHeaderStyles_unstable","state","styles","className"],"sources":["useMenuGroupHeaderStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const menuGroupHeaderClassNames = {\n    root: 'fui-MenuGroupHeader'\n};\nconst useStyles = makeStyles({\n    root: {\n        fontSize: tokens.fontSizeBase200,\n        color: tokens.colorNeutralForeground3,\n        paddingLeft: '8px',\n        paddingRight: '8px',\n        fontWeight: tokens.fontWeightSemibold,\n        height: '32px',\n        display: 'flex',\n        alignItems: 'center'\n    }\n});\nexport const useMenuGroupHeaderStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAWjB,CAAC;AACF,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1BW,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGlB,YAAY,CAACG,yBAAyB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EACtG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["mergeClasses","__styles","tokens","menuGroupHeaderClassNames","root","useStyles","Be2twd7","sj55zd","uwmqm3","z189sj","Bhrd7zp","Bqenvij","mc9l5x","Bt984gj","d","useMenuGroupHeaderStyles_unstable","state","styles","className"],"sources":["useMenuGroupHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const menuGroupHeaderClassNames = {\n    root: 'fui-MenuGroupHeader'\n};\nconst useStyles = makeStyles({\n    root: {\n        fontSize: tokens.fontSizeBase200,\n        color: tokens.colorNeutralForeground3,\n        paddingLeft: '8px',\n        paddingRight: '8px',\n        fontWeight: tokens.fontWeightSemibold,\n        height: '32px',\n        display: 'flex',\n        alignItems: 'center'\n    }\n});\nexport const useMenuGroupHeaderStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAWjB,CAAC;AACF,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1BW,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGlB,YAAY,CAACG,yBAAyB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EACtG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 import { mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const menuGroupHeaderClassNames = {

package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots> = {\n  root: 'fui-MenuGroupHeader',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    fontSize: tokens.fontSizeBase200,\n    color: tokens.colorNeutralForeground3,\n    paddingLeft: '8px',\n    paddingRight: '8px',\n    fontWeight: tokens.fontWeightSemibold,\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n  },\n});\n\nexport const useMenuGroupHeaderStyles_unstable = (state: MenuGroupHeaderState): MenuGroupHeaderState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","tokens","menuGroupHeaderClassNames","root","useStyles","fontSize","fontSizeBase200","color","colorNeutralForeground3","paddingLeft","paddingRight","fontWeight","fontWeightSemibold","height","display","alignItems","useMenuGroupHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,UAAUJ,OAAOK,eAAe;QAChCC,OAAON,OAAOO,uBAAuB;QACrCC,aAAa;QACbC,cAAc;QACdC,YAAYV,OAAOW,kBAAkB;QACrCC,QAAQ;QACRC,SAAS;QACTC,YAAY;IACd;AACF;AAEA,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,SAASd;IACfa,MAAMd,IAAI,CAACgB,SAAS,GAAGpB,aAAaG,0BAA0BC,IAAI,EAAEe,OAAOf,IAAI,EAAEc,MAAMd,IAAI,CAACgB,SAAS;IAErG,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots> = {\n  root: 'fui-MenuGroupHeader',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    fontSize: tokens.fontSizeBase200,\n    color: tokens.colorNeutralForeground3,\n    paddingLeft: '8px',\n    paddingRight: '8px',\n    fontWeight: tokens.fontWeightSemibold,\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n  },\n});\n\nexport const useMenuGroupHeaderStyles_unstable = (state: MenuGroupHeaderState): MenuGroupHeaderState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","tokens","menuGroupHeaderClassNames","root","useStyles","fontSize","fontSizeBase200","color","colorNeutralForeground3","paddingLeft","paddingRight","fontWeight","fontWeightSemibold","height","display","alignItems","useMenuGroupHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,UAAUJ,OAAOK,eAAe;QAChCC,OAAON,OAAOO,uBAAuB;QACrCC,aAAa;QACbC,cAAc;QACdC,YAAYV,OAAOW,kBAAkB;QACrCC,QAAQ;QACRC,SAAS;QACTC,YAAY;IACd;AACF;AAEA,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,SAASd;IACfa,MAAMd,IAAI,CAACgB,SAAS,GAAGpB,aAAaG,0BAA0BC,IAAI,EAAEe,OAAOf,IAAI,EAAEc,MAAMd,IAAI,CAACgB,SAAS;IAErG,OAAOF;AACT,EAAE"}

package/lib/components/MenuItem/MenuItem.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useMenuItem_unstable } from './useMenuItem';
 import { renderMenuItem_unstable } from './renderMenuItem';

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

@@ -1 +1 @@
-{"version":3,"sources":["../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.styles';\nimport type { MenuItemProps } from './MenuItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_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  useCustomStyleHook_unstable('useMenuItemStyles_unstable')(state);\n\n  return renderMenuItem_unstable(state);\n});\n\nMenuItem.displayName = 'MenuItem';\n"],"names":["React","useMenuItem_unstable","renderMenuItem_unstable","useMenuItemStyles_unstable","useCustomStyleHook_unstable","MenuItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQR,qBAAqBM,OAAOC;IAE1CL,2BAA2BM;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOP,wBAAwBO;AACjC,GAAG;AAEHJ,SAASK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuItem_unstable } from './useMenuItem';\nimport { renderMenuItem_unstable } from './renderMenuItem';\nimport { useMenuItemStyles_unstable } from './useMenuItemStyles.styles';\nimport type { MenuItemProps } from './MenuItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_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  useCustomStyleHook_unstable('useMenuItemStyles_unstable')(state);\n\n  return renderMenuItem_unstable(state);\n});\n\nMenuItem.displayName = 'MenuItem';\n"],"names":["React","useMenuItem_unstable","renderMenuItem_unstable","useMenuItemStyles_unstable","useCustomStyleHook_unstable","MenuItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQR,qBAAqBM,OAAOC;IAE1CL,2BAA2BM;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOP,wBAAwBO;AACjC,GAAG;AAEHJ,SAASK,WAAW,GAAG"}

package/lib/components/MenuItem/useCharacterSearch.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useMenuListContext_unstable } from '../../contexts/menuListContext';
 export const useCharacterSearch = (state, ref)=>{

package/lib/components/MenuItem/useCharacterSearch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItem/useCharacterSearch.ts"],"sourcesContent":["import * as React from 'react';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport type { MenuItemState } from '../../components/index';\nimport type { ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\nexport const useCharacterSearch = (state: MenuItemState, ref: React.RefObject<HTMLElement | null>): MenuItemState => {\n  'use no memo';\n\n  const setFocusByFirstCharacter = useMenuListContext_unstable(context => context.setFocusByFirstCharacter);\n\n  const { onKeyDown: originalOnKeyDown } = state.root;\n\n  state.root.onKeyDown = (e: React.KeyboardEvent<ARIAButtonElementIntersection>) => {\n    originalOnKeyDown?.(e);\n\n    if (e.key?.length > 1) {\n      return;\n    }\n\n    if (ref.current) {\n      setFocusByFirstCharacter?.(e, ref.current);\n    }\n  };\n\n  return state;\n};\n"],"names":["React","useMenuListContext_unstable","useCharacterSearch","state","ref","setFocusByFirstCharacter","context","onKeyDown","originalOnKeyDown","root","e","key","length","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,iCAAiC;AAI7E,OAAO,MAAMC,qBAAqB,CAACC,OAAsBC;IACvD;IAEA,MAAMC,2BAA2BJ,4BAA4BK,CAAAA,UAAWA,QAAQD,wBAAwB;IAExG,MAAM,EAAEE,WAAWC,iBAAiB,EAAE,GAAGL,MAAMM,IAAI;IAEnDN,MAAMM,IAAI,CAACF,SAAS,GAAG,CAACG;YAGlBA;QAFJF,8BAAAA,wCAAAA,kBAAoBE;QAEpB,IAAIA,EAAAA,SAAAA,EAAEC,GAAG,cAALD,6BAAAA,OAAOE,MAAM,IAAG,GAAG;YACrB;QACF;QAEA,IAAIR,IAAIS,OAAO,EAAE;YACfR,qCAAAA,+CAAAA,yBAA2BK,GAAGN,IAAIS,OAAO;QAC3C;IACF;IAEA,OAAOV;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MenuItem/useCharacterSearch.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport type { MenuItemState } from '../../components/index';\nimport type { ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\nexport const useCharacterSearch = (state: MenuItemState, ref: React.RefObject<HTMLElement | null>): MenuItemState => {\n  'use no memo';\n\n  const setFocusByFirstCharacter = useMenuListContext_unstable(context => context.setFocusByFirstCharacter);\n\n  const { onKeyDown: originalOnKeyDown } = state.root;\n\n  state.root.onKeyDown = (e: React.KeyboardEvent<ARIAButtonElementIntersection>) => {\n    originalOnKeyDown?.(e);\n\n    if (e.key?.length > 1) {\n      return;\n    }\n\n    if (ref.current) {\n      setFocusByFirstCharacter?.(e, ref.current);\n    }\n  };\n\n  return state;\n};\n"],"names":["React","useMenuListContext_unstable","useCharacterSearch","state","ref","setFocusByFirstCharacter","context","onKeyDown","originalOnKeyDown","root","e","key","length","current"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,iCAAiC;AAI7E,OAAO,MAAMC,qBAAqB,CAACC,OAAsBC;IACvD;IAEA,MAAMC,2BAA2BJ,4BAA4BK,CAAAA,UAAWA,QAAQD,wBAAwB;IAExG,MAAM,EAAEE,WAAWC,iBAAiB,EAAE,GAAGL,MAAMM,IAAI;IAEnDN,MAAMM,IAAI,CAACF,SAAS,GAAG,CAACG;YAGlBA;QAFJF,8BAAAA,wCAAAA,kBAAoBE;QAEpB,IAAIA,EAAAA,SAAAA,EAAEC,GAAG,cAALD,6BAAAA,OAAOE,MAAM,IAAG,GAAG;YACrB;QACF;QAEA,IAAIR,IAAIS,OAAO,EAAE;YACfR,qCAAAA,+CAAAA,yBAA2BK,GAAGN,IAAIS,OAAO;QAC3C;IACF;IAEA,OAAOV;AACT,EAAE"}

package/lib/components/MenuItem/useMenuItem.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useEventCallback, useMergedRefs, getIntrinsicElementProps, slot, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
@@ -9,6 +10,7 @@ import { useMenuContext_unstable } from '../../contexts/menuContext';
 import { useARIAButtonProps } from '@fluentui/react-aria';
 import { Enter, Space } from '@fluentui/keyboard-keys';
 import { useIsInMenuSplitGroup, useMenuSplitGroupContext_unstable } from '../../contexts/menuSplitGroupContext';
+import { useValidateNesting } from '../../utils/useValidateNesting';
 const ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);
 const ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
 /**
@@ -28,6 +30,7 @@ const ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
     const { dir } = useFluent();
     const innerRef = React.useRef(null);
     const dismissedWithKeyboardRef = React.useRef(false);
+    const validateNestingRef = useValidateNesting(getValidateNestingComponentName(props.role));
     const state = {
         hasSubmenu,
         disabled,
@@ -46,7 +49,7 @@ const ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
             ...rest,
             disabled: false,
             disabledFocusable: disabled,
-            ref: useMergedRefs(ref, innerRef),
+            ref: useMergedRefs(ref, innerRef, validateNestingRef),
             onKeyDown: useEventCallback((event)=>{
                 var _props_onKeyDown;
                 (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);
@@ -138,3 +141,12 @@ const useIconAndCheckmarkAlignment = (options)=>{
         hasCheckmarks: hasCheckmarks && !isSplitItemTrigger
     };
 };
+const getValidateNestingComponentName = (role)=>{
+    switch(role){
+        case 'menuitemcheckbox':
+            return 'MenuItemCheckbox';
+        case 'menuitemradio':
+            return 'MenuItemRadio';
+    }
+    return 'MenuItem';
+};

package/lib/components/MenuItem/useMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItem/useMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  useEventCallback,\n  useMergedRefs,\n  getIntrinsicElementProps,\n  slot,\n  useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';\nimport {\n  ChevronRightFilled,\n  ChevronRightRegular,\n  ChevronLeftFilled,\n  ChevronLeftRegular,\n  bundleIcon,\n} from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport {\n  ARIAButtonElement,\n  ARIAButtonElementIntersection,\n  ARIAButtonProps,\n  useARIAButtonProps,\n} from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport { useIsInMenuSplitGroup, useMenuSplitGroupContext_unstable } from '../../contexts/menuSplitGroupContext';\n\nconst ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);\nconst ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIAButtonElement<'div'>>): MenuItemState => {\n  const isSubmenuTrigger = useMenuTriggerContext_unstable();\n  const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);\n  const {\n    as = 'div',\n    disabled = false,\n    hasSubmenu = isSubmenuTrigger,\n    persistOnClick = persistOnClickContext,\n    content: _content, // `content` is a slot and it's type clashes with the HTMLElement `content` attribute\n    ...rest\n  } = props;\n  const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({ hasSubmenu });\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  useNotifySplitItemMultiline({ multiline: !!props.subText, hasSubmenu });\n\n  const { dir } = useFluent();\n  const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);\n  const dismissedWithKeyboardRef = React.useRef(false);\n\n  const state: MenuItemState = {\n    hasSubmenu,\n    disabled,\n    persistOnClick,\n    components: {\n      root: 'div',\n      icon: 'span',\n      checkmark: 'span',\n      submenuIndicator: 'span',\n      content: 'span',\n      secondaryContent: 'span',\n      subText: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps(\n        as,\n        useARIAButtonProps<'div', ARIAButtonProps<'div'>>(as, {\n          role: 'menuitem',\n          ...rest,\n          disabled: false,\n          disabledFocusable: disabled,\n          ref: useMergedRefs(ref, innerRef) as React.Ref<ARIAButtonElementIntersection<'div'>>,\n          onKeyDown: useEventCallback(event => {\n            props.onKeyDown?.(event);\n            if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {\n              dismissedWithKeyboardRef.current = true;\n            }\n          }),\n          onMouseMove: useEventCallback(event => {\n            if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) {\n              innerRef.current?.focus();\n            }\n\n            props.onMouseMove?.(event);\n          }),\n          onClick: useEventCallback(event => {\n            if (!hasSubmenu && !persistOnClick) {\n              setOpen(event, {\n                open: false,\n                keyboard: dismissedWithKeyboardRef.current,\n                bubble: true,\n                type: 'menuItemClick',\n                event,\n              });\n              dismissedWithKeyboardRef.current = false;\n            }\n\n            props.onClick?.(event);\n          }),\n        }),\n      ),\n      { elementType: 'div' },\n    ),\n    icon: slot.optional(props.icon, { renderByDefault: hasIcons, elementType: 'span' }),\n    checkmark: slot.optional(props.checkmark, {\n      renderByDefault: hasCheckmarks,\n      elementType: 'span',\n    }),\n    submenuIndicator: slot.optional(props.submenuIndicator, {\n      renderByDefault: hasSubmenu,\n      defaultProps: {\n        children: dir === 'ltr' ? <ChevronRightIcon /> : <ChevronLeftIcon />,\n      },\n      elementType: 'span',\n    }),\n    content: slot.optional(props.content, {\n      renderByDefault: !!props.children,\n      defaultProps: { children: props.children },\n      elementType: 'span',\n    }),\n    secondaryContent: slot.optional(props.secondaryContent, { elementType: 'span' }),\n    subText: slot.optional(props.subText, { elementType: 'span' }),\n  };\n  useCharacterSearch(state, innerRef);\n  return state;\n};\n\n/**\n * MenuSplitGroup needs to apply extra styles when its main item is in multiline layout mode\n * Notify the parent MenuSplitGroup so that it can handle this case\n */\nconst useNotifySplitItemMultiline = (options: { hasSubmenu: boolean; multiline: boolean }) => {\n  const { hasSubmenu, multiline } = options;\n  const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;\n\n  const { setMultiline } = useMenuSplitGroupContext_unstable();\n\n  useIsomorphicLayoutEffect(() => {\n    if (!isSplitItemTrigger) {\n      setMultiline(multiline);\n    }\n  }, [setMultiline, multiline, isSplitItemTrigger]);\n};\n\nconst useIconAndCheckmarkAlignment = (options: { hasSubmenu: boolean }) => {\n  const { hasSubmenu } = options;\n  const hasIcons = useMenuListContext_unstable(context => context.hasIcons);\n  const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);\n  const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;\n\n  return {\n    hasIcons: hasIcons && !isSplitItemTrigger,\n    hasCheckmarks: hasCheckmarks && !isSplitItemTrigger,\n  };\n};\n"],"names":["React","useEventCallback","useMergedRefs","getIntrinsicElementProps","slot","useIsomorphicLayoutEffect","useFluent_unstable","useFluent","useCharacterSearch","useMenuTriggerContext_unstable","ChevronRightFilled","ChevronRightRegular","ChevronLeftFilled","ChevronLeftRegular","bundleIcon","useMenuListContext_unstable","useMenuContext_unstable","useARIAButtonProps","Enter","Space","useIsInMenuSplitGroup","useMenuSplitGroupContext_unstable","ChevronRightIcon","ChevronLeftIcon","useMenuItem_unstable","props","ref","isSubmenuTrigger","persistOnClickContext","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","content","_content","rest","hasIcons","hasCheckmarks","useIconAndCheckmarkAlignment","setOpen","useNotifySplitItemMultiline","multiline","subText","dir","innerRef","useRef","dismissedWithKeyboardRef","state","components","root","icon","checkmark","submenuIndicator","secondaryContent","always","role","disabledFocusable","onKeyDown","event","isDefaultPrevented","key","current","onMouseMove","currentTarget","ownerDocument","activeElement","focus","onClick","open","keyboard","bubble","type","elementType","optional","renderByDefault","defaultProps","children","options","isSplitItemTrigger","setMultiline"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,gBAAgB,EAChBC,aAAa,EACbC,wBAAwB,EACxBC,IAAI,EACJC,yBAAyB,QACpB,4BAA4B;AACnC,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,8BAA8B,QAAQ,oCAAoC;AACnF,SACEC,kBAAkB,EAClBC,mBAAmB,EACnBC,iBAAiB,EACjBC,kBAAkB,EAClBC,UAAU,QACL,wBAAwB;AAC/B,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,uBAAuB,QAAQ,6BAA6B;AAErE,SAIEC,kBAAkB,QACb,uBAAuB;AAC9B,SAASC,KAAK,EAAEC,KAAK,QAAQ,0BAA0B;AACvD,SAASC,qBAAqB,EAAEC,iCAAiC,QAAQ,uCAAuC;AAEhH,MAAMC,mBAAmBR,WAAWJ,oBAAoBC;AACxD,MAAMY,kBAAkBT,WAAWF,mBAAmBC;AAEtD;;CAEC,GACD,OAAO,MAAMW,uBAAuB,CAACC,OAAsBC;IACzD,MAAMC,mBAAmBlB;IACzB,MAAMmB,wBAAwBZ,wBAAwBa,CAAAA,UAAWA,QAAQC,kBAAkB;IAC3F,MAAM,EACJC,KAAK,KAAK,EACVC,WAAW,KAAK,EAChBC,aAAaN,gBAAgB,EAC7BO,iBAAiBN,qBAAqB,EACtCO,SAASC,QAAQ,EACjB,GAAGC,MACJ,GAAGZ;IACJ,MAAM,EAAEa,QAAQ,EAAEC,aAAa,EAAE,GAAGC,6BAA6B;QAAEP;IAAW;IAC9E,MAAMQ,UAAUzB,wBAAwBa,CAAAA,UAAWA,QAAQY,OAAO;IAClEC,4BAA4B;QAAEC,WAAW,CAAC,CAAClB,MAAMmB,OAAO;QAAEX;IAAW;IAErE,MAAM,EAAEY,GAAG,EAAE,GAAGtC;IAChB,MAAMuC,WAAW9C,MAAM+C,MAAM,CAAuC;IACpE,MAAMC,2BAA2BhD,MAAM+C,MAAM,CAAC;IAE9C,MAAME,QAAuB;QAC3BhB;QACAD;QACAE;QACAgB,YAAY;YACVC,MAAM;YACNC,MAAM;YACNC,WAAW;YACXC,kBAAkB;YAClBnB,SAAS;YACToB,kBAAkB;YAClBX,SAAS;QACX;QACAO,MAAM/C,KAAKoD,MAAM,CACfrD,yBACE4B,IACAd,mBAAkDc,IAAI;YACpD0B,MAAM;YACN,GAAGpB,IAAI;YACPL,UAAU;YACV0B,mBAAmB1B;YACnBN,KAAKxB,cAAcwB,KAAKoB;YACxBa,WAAW1D,iBAAiB2D,CAAAA;oBAC1BnC;iBAAAA,mBAAAA,MAAMkC,SAAS,cAAflC,uCAAAA,sBAAAA,OAAkBmC;gBAClB,IAAI,CAACA,MAAMC,kBAAkB,MAAOD,CAAAA,MAAME,GAAG,KAAK3C,SAASyC,MAAME,GAAG,KAAK5C,KAAI,GAAI;oBAC/E8B,yBAAyBe,OAAO,GAAG;gBACrC;YACF;YACAC,aAAa/D,iBAAiB2D,CAAAA;oBAK5BnC;gBAJA,IAAImC,MAAMK,aAAa,CAACC,aAAa,CAACC,aAAa,KAAKP,MAAMK,aAAa,EAAE;wBAC3EnB;qBAAAA,oBAAAA,SAASiB,OAAO,cAAhBjB,wCAAAA,kBAAkBsB,KAAK;gBACzB;iBAEA3C,qBAAAA,MAAMuC,WAAW,cAAjBvC,yCAAAA,wBAAAA,OAAoBmC;YACtB;YACAS,SAASpE,iBAAiB2D,CAAAA;oBAYxBnC;gBAXA,IAAI,CAACQ,cAAc,CAACC,gBAAgB;oBAClCO,QAAQmB,OAAO;wBACbU,MAAM;wBACNC,UAAUvB,yBAAyBe,OAAO;wBAC1CS,QAAQ;wBACRC,MAAM;wBACNb;oBACF;oBACAZ,yBAAyBe,OAAO,GAAG;gBACrC;iBAEAtC,iBAAAA,MAAM4C,OAAO,cAAb5C,qCAAAA,oBAAAA,OAAgBmC;YAClB;QACF,KAEF;YAAEc,aAAa;QAAM;QAEvBtB,MAAMhD,KAAKuE,QAAQ,CAAClD,MAAM2B,IAAI,EAAE;YAAEwB,iBAAiBtC;YAAUoC,aAAa;QAAO;QACjFrB,WAAWjD,KAAKuE,QAAQ,CAAClD,MAAM4B,SAAS,EAAE;YACxCuB,iBAAiBrC;YACjBmC,aAAa;QACf;QACApB,kBAAkBlD,KAAKuE,QAAQ,CAAClD,MAAM6B,gBAAgB,EAAE;YACtDsB,iBAAiB3C;YACjB4C,cAAc;gBACZC,UAAUjC,QAAQ,sBAAQ,oBAACvB,wCAAsB,oBAACC;YACpD;YACAmD,aAAa;QACf;QACAvC,SAAS/B,KAAKuE,QAAQ,CAAClD,MAAMU,OAAO,EAAE;YACpCyC,iBAAiB,CAAC,CAACnD,MAAMqD,QAAQ;YACjCD,cAAc;gBAAEC,UAAUrD,MAAMqD,QAAQ;YAAC;YACzCJ,aAAa;QACf;QACAnB,kBAAkBnD,KAAKuE,QAAQ,CAAClD,MAAM8B,gBAAgB,EAAE;YAAEmB,aAAa;QAAO;QAC9E9B,SAASxC,KAAKuE,QAAQ,CAAClD,MAAMmB,OAAO,EAAE;YAAE8B,aAAa;QAAO;IAC9D;IACAlE,mBAAmByC,OAAOH;IAC1B,OAAOG;AACT,EAAE;AAEF;;;CAGC,GACD,MAAMP,8BAA8B,CAACqC;IACnC,MAAM,EAAE9C,UAAU,EAAEU,SAAS,EAAE,GAAGoC;IAClC,MAAMC,qBAAqB5D,2BAA2Ba;IAEtD,MAAM,EAAEgD,YAAY,EAAE,GAAG5D;IAEzBhB,0BAA0B;QACxB,IAAI,CAAC2E,oBAAoB;YACvBC,aAAatC;QACf;IACF,GAAG;QAACsC;QAActC;QAAWqC;KAAmB;AAClD;AAEA,MAAMxC,+BAA+B,CAACuC;IACpC,MAAM,EAAE9C,UAAU,EAAE,GAAG8C;IACvB,MAAMzC,WAAWvB,4BAA4Bc,CAAAA,UAAWA,QAAQS,QAAQ;IACxE,MAAMC,gBAAgBxB,4BAA4Bc,CAAAA,UAAWA,QAAQU,aAAa;IAClF,MAAMyC,qBAAqB5D,2BAA2Ba;IAEtD,OAAO;QACLK,UAAUA,YAAY,CAAC0C;QACvBzC,eAAeA,iBAAiB,CAACyC;IACnC;AACF"}
+{"version":3,"sources":["../src/components/MenuItem/useMenuItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  useEventCallback,\n  useMergedRefs,\n  getIntrinsicElementProps,\n  slot,\n  useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';\nimport {\n  ChevronRightFilled,\n  ChevronRightRegular,\n  ChevronLeftFilled,\n  ChevronLeftRegular,\n  bundleIcon,\n} from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport {\n  ARIAButtonElement,\n  ARIAButtonElementIntersection,\n  ARIAButtonProps,\n  useARIAButtonProps,\n} from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport { useIsInMenuSplitGroup, useMenuSplitGroupContext_unstable } from '../../contexts/menuSplitGroupContext';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\nconst ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);\nconst ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIAButtonElement<'div'>>): MenuItemState => {\n  const isSubmenuTrigger = useMenuTriggerContext_unstable();\n  const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);\n  const {\n    as = 'div',\n    disabled = false,\n    hasSubmenu = isSubmenuTrigger,\n    persistOnClick = persistOnClickContext,\n    content: _content, // `content` is a slot and it's type clashes with the HTMLElement `content` attribute\n    ...rest\n  } = props;\n  const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({ hasSubmenu });\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  useNotifySplitItemMultiline({ multiline: !!props.subText, hasSubmenu });\n\n  const { dir } = useFluent();\n  const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);\n  const dismissedWithKeyboardRef = React.useRef(false);\n\n  const validateNestingRef = useValidateNesting(getValidateNestingComponentName(props.role));\n\n  const state: MenuItemState = {\n    hasSubmenu,\n    disabled,\n    persistOnClick,\n    components: {\n      root: 'div',\n      icon: 'span',\n      checkmark: 'span',\n      submenuIndicator: 'span',\n      content: 'span',\n      secondaryContent: 'span',\n      subText: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps(\n        as,\n        useARIAButtonProps<'div', ARIAButtonProps<'div'>>(as, {\n          role: 'menuitem',\n          ...rest,\n          disabled: false,\n          disabledFocusable: disabled,\n          ref: useMergedRefs(ref, innerRef, validateNestingRef) as React.Ref<ARIAButtonElementIntersection<'div'>>,\n          onKeyDown: useEventCallback(event => {\n            props.onKeyDown?.(event);\n            if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {\n              dismissedWithKeyboardRef.current = true;\n            }\n          }),\n          onMouseMove: useEventCallback(event => {\n            if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) {\n              innerRef.current?.focus();\n            }\n\n            props.onMouseMove?.(event);\n          }),\n          onClick: useEventCallback(event => {\n            if (!hasSubmenu && !persistOnClick) {\n              setOpen(event, {\n                open: false,\n                keyboard: dismissedWithKeyboardRef.current,\n                bubble: true,\n                type: 'menuItemClick',\n                event,\n              });\n              dismissedWithKeyboardRef.current = false;\n            }\n\n            props.onClick?.(event);\n          }),\n        }),\n      ),\n      { elementType: 'div' },\n    ),\n    icon: slot.optional(props.icon, { renderByDefault: hasIcons, elementType: 'span' }),\n    checkmark: slot.optional(props.checkmark, {\n      renderByDefault: hasCheckmarks,\n      elementType: 'span',\n    }),\n    submenuIndicator: slot.optional(props.submenuIndicator, {\n      renderByDefault: hasSubmenu,\n      defaultProps: {\n        children: dir === 'ltr' ? <ChevronRightIcon /> : <ChevronLeftIcon />,\n      },\n      elementType: 'span',\n    }),\n    content: slot.optional(props.content, {\n      renderByDefault: !!props.children,\n      defaultProps: { children: props.children },\n      elementType: 'span',\n    }),\n    secondaryContent: slot.optional(props.secondaryContent, { elementType: 'span' }),\n    subText: slot.optional(props.subText, { elementType: 'span' }),\n  };\n  useCharacterSearch(state, innerRef);\n  return state;\n};\n\n/**\n * MenuSplitGroup needs to apply extra styles when its main item is in multiline layout mode\n * Notify the parent MenuSplitGroup so that it can handle this case\n */\nconst useNotifySplitItemMultiline = (options: { hasSubmenu: boolean; multiline: boolean }) => {\n  const { hasSubmenu, multiline } = options;\n  const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;\n\n  const { setMultiline } = useMenuSplitGroupContext_unstable();\n\n  useIsomorphicLayoutEffect(() => {\n    if (!isSplitItemTrigger) {\n      setMultiline(multiline);\n    }\n  }, [setMultiline, multiline, isSplitItemTrigger]);\n};\n\nconst useIconAndCheckmarkAlignment = (options: { hasSubmenu: boolean }) => {\n  const { hasSubmenu } = options;\n  const hasIcons = useMenuListContext_unstable(context => context.hasIcons);\n  const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);\n  const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;\n\n  return {\n    hasIcons: hasIcons && !isSplitItemTrigger,\n    hasCheckmarks: hasCheckmarks && !isSplitItemTrigger,\n  };\n};\n\nconst getValidateNestingComponentName = (role?: string) => {\n  switch (role) {\n    case 'menuitemcheckbox':\n      return 'MenuItemCheckbox';\n    case 'menuitemradio':\n      return 'MenuItemRadio';\n  }\n  return 'MenuItem';\n};\n"],"names":["React","useEventCallback","useMergedRefs","getIntrinsicElementProps","slot","useIsomorphicLayoutEffect","useFluent_unstable","useFluent","useCharacterSearch","useMenuTriggerContext_unstable","ChevronRightFilled","ChevronRightRegular","ChevronLeftFilled","ChevronLeftRegular","bundleIcon","useMenuListContext_unstable","useMenuContext_unstable","useARIAButtonProps","Enter","Space","useIsInMenuSplitGroup","useMenuSplitGroupContext_unstable","useValidateNesting","ChevronRightIcon","ChevronLeftIcon","useMenuItem_unstable","props","ref","isSubmenuTrigger","persistOnClickContext","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","content","_content","rest","hasIcons","hasCheckmarks","useIconAndCheckmarkAlignment","setOpen","useNotifySplitItemMultiline","multiline","subText","dir","innerRef","useRef","dismissedWithKeyboardRef","validateNestingRef","getValidateNestingComponentName","role","state","components","root","icon","checkmark","submenuIndicator","secondaryContent","always","disabledFocusable","onKeyDown","event","isDefaultPrevented","key","current","onMouseMove","currentTarget","ownerDocument","activeElement","focus","onClick","open","keyboard","bubble","type","elementType","optional","renderByDefault","defaultProps","children","options","isSplitItemTrigger","setMultiline"],"mappings":"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"}

package/lib/components/MenuItem/useMenuItemStyles.styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { mergeClasses, __styles, __resetStyles } from '@griffel/react';
 import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';

package/lib/components/MenuItem/useMenuItemStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","__styles","__resetStyles","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","typographyStyles","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","subText","useRootBaseStyles","r","s","useContentBaseStyles","useSecondaryContentBaseStyles","useIconBaseStyles","useSubmenuIndicatorBaseStyles","useSubtextBaseStyles","useStyles","B6of3ja","splitItemMain","Bh6795r","splitItemTrigger","Btl43ni","Beyfa6y","uwmqm3","Ftih45","Ccq8qp","Baz25je","cmx5o7","disabled","sj55zd","Bi91k9c","Jwef8y","eoavqd","Bk3fhr4","Bmfj8id","Bg7n49j","c7f7en","B2d53fq","iro3zm","Bumww26","t0hwav","Bbusuzp","ze5xyy","Bqrx1nm","Bctn1xl","h5esng","Bsk3rfj","pc6evw","g2kj27","evg1t5","Bh6z0a4","Bh953qp","d","h","f","m","useSubTextStyles","useMultilineStyles","mc9l5x","Beiy3e4","qb2dma","useMenuItemStyles_unstable","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","multilineStyles","subtextBaseStyles","subTextStyles","multiline","className"],"sources":["useMenuItemStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nexport const menuItemClassNames = {\n    root: 'fui-MenuItem',\n    icon: 'fui-MenuItem__icon',\n    checkmark: 'fui-MenuItem__checkmark',\n    submenuIndicator: 'fui-MenuItem__submenuIndicator',\n    content: 'fui-MenuItem__content',\n    secondaryContent: 'fui-MenuItem__secondaryContent',\n    subText: 'fui-MenuItem__subText'\n};\nconst useRootBaseStyles = makeResetStyles({\n    borderRadius: tokens.borderRadiusMedium,\n    position: 'relative',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground1,\n    paddingRight: tokens.spacingVerticalSNudge,\n    paddingLeft: tokens.spacingVerticalSNudge,\n    paddingTop: tokens.spacingVerticalSNudge,\n    paddingBottom: tokens.spacingVerticalSNudge,\n    boxSizing: 'border-box',\n    maxWidth: '290px',\n    minHeight: '32px',\n    flexShrink: 0,\n    display: 'flex',\n    alignItems: 'start',\n    fontSize: tokens.fontSizeBase300,\n    cursor: 'pointer',\n    gap: '4px',\n    ':hover': {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        color: tokens.colorNeutralForeground2Hover,\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\n        },\n        [`& .${menuItemClassNames.icon}`]: {\n            color: tokens.colorNeutralForeground2BrandSelected\n        },\n        [`& .${menuItemClassNames.subText}`]: {\n            color: tokens.colorNeutralForeground3Hover\n        }\n    },\n    ':hover:active': {\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n        color: tokens.colorNeutralForeground2Pressed,\n        [`& .${menuItemClassNames.subText}`]: {\n            color: tokens.colorNeutralForeground3Pressed\n        }\n    },\n    // High contrast styles\n    '@media (forced-colors: active)': {\n        ':hover': {\n            backgroundColor: 'Canvas',\n            borderColor: 'Highlight',\n            color: 'Highlight'\n        },\n        ...createFocusOutlineStyle({\n            style: {\n                outlineColor: 'Highlight'\n            }\n        })\n    },\n    userSelect: 'none',\n    ...createFocusOutlineStyle()\n});\nconst useContentBaseStyles = makeResetStyles({\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    backgroundColor: 'transparent',\n    flexGrow: 1\n});\nconst useSecondaryContentBaseStyles = makeResetStyles({\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    ...typographyStyles.caption1,\n    lineHeight: tokens.lineHeightBase300,\n    color: tokens.colorNeutralForeground3,\n    ':hover': {\n        color: tokens.colorNeutralForeground3Hover\n    },\n    ':focus': {\n        color: tokens.colorNeutralForeground3Hover\n    }\n});\nconst useIconBaseStyles = makeResetStyles({\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    flexShrink: 0\n});\nconst useSubmenuIndicatorBaseStyles = makeResetStyles({\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center'\n});\nconst useSubtextBaseStyles = makeResetStyles({\n    ...typographyStyles.caption2,\n    color: tokens.colorNeutralForeground3\n});\nconst useStyles = makeStyles({\n    checkmark: {\n        marginTop: '2px'\n    },\n    splitItemMain: {\n        flexGrow: 1\n    },\n    splitItemTrigger: {\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0,\n        paddingLeft: 0,\n        '::before': {\n            content: '\"\"',\n            width: tokens.strokeWidthThin,\n            height: '24px',\n            backgroundColor: tokens.colorNeutralStroke1\n        }\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        ':hover': {\n            color: tokens.colorNeutralForegroundDisabled,\n            backgroundColor: tokens.colorNeutralBackground1,\n            cursor: 'not-allowed',\n            [`& .${iconFilledClassName}`]: {\n                display: 'none'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${menuItemClassNames.icon}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            },\n            [`& .${menuItemClassNames.subText}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        },\n        ':hover:active': {\n            color: tokens.colorNeutralForegroundDisabled,\n            backgroundColor: tokens.colorNeutralBackground1,\n            [`& .${menuItemClassNames.subText}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        },\n        ':focus': {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        '@media (forced-colors: active)': {\n            color: 'GrayText',\n            ':hover': {\n                color: 'GrayText',\n                backgroundColor: 'Canvas',\n                [`& .${menuItemClassNames.icon}`]: {\n                    color: 'GrayText',\n                    backgroundColor: 'Canvas'\n                },\n                [`& .${menuItemClassNames.subText}`]: {\n                    color: 'GrayText'\n                }\n            },\n            ':hover:active': {\n                color: 'GrayText',\n                backgroundColor: 'Canvas',\n                [`& .${menuItemClassNames.subText}`]: {\n                    color: 'GrayText'\n                }\n            },\n            ':focus': {\n                color: 'GrayText',\n                backgroundColor: 'Canvas'\n            }\n        }\n    }\n});\nconst useSubTextStyles = makeStyles({\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n            color: 'GrayText'\n        }\n    }\n});\nconst useMultilineStyles = makeStyles({\n    content: {\n        display: 'flex',\n        flexDirection: 'column'\n    },\n    secondaryContent: {\n        alignSelf: 'center'\n    },\n    submenuIndicator: {\n        alignSelf: 'center'\n    }\n});\n/** Applies style classnames to slots */ export const useMenuItemStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const rootBaseStyles = useRootBaseStyles();\n    const contentBaseStyles = useContentBaseStyles();\n    const secondaryContentBaseStyles = useSecondaryContentBaseStyles();\n    const iconBaseStyles = useIconBaseStyles();\n    const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();\n    const multilineStyles = useMultilineStyles();\n    const subtextBaseStyles = useSubtextBaseStyles();\n    const subTextStyles = useSubTextStyles();\n    const multiline = !!state.subText;\n    state.root.className = mergeClasses(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);\n    if (state.content) {\n        state.content.className = mergeClasses(menuItemClassNames.content, contentBaseStyles, state.content.className, multiline && multilineStyles.content);\n    }\n    if (state.checkmark) {\n        state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, secondaryContentBaseStyles, state.disabled && styles.disabled, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);\n    }\n    if (state.submenuIndicator) {\n        state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className, multiline && multilineStyles.submenuIndicator);\n    }\n    if (state.subText) {\n        state.subText.className = mergeClasses(menuItemClassNames.subText, state.disabled && subTextStyles.disabled, state.subText.className, subtextBaseStyles);\n    }\n    useCheckmarkStyles_unstable(state);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["mergeClasses","__styles","__resetStyles","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","typographyStyles","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","subText","useRootBaseStyles","r","s","useContentBaseStyles","useSecondaryContentBaseStyles","useIconBaseStyles","useSubmenuIndicatorBaseStyles","useSubtextBaseStyles","useStyles","B6of3ja","splitItemMain","Bh6795r","splitItemTrigger","Btl43ni","Beyfa6y","uwmqm3","Ftih45","Ccq8qp","Baz25je","cmx5o7","disabled","sj55zd","Bi91k9c","Jwef8y","eoavqd","Bk3fhr4","Bmfj8id","Bg7n49j","c7f7en","B2d53fq","iro3zm","Bumww26","t0hwav","Bbusuzp","ze5xyy","Bqrx1nm","Bctn1xl","h5esng","Bsk3rfj","pc6evw","g2kj27","evg1t5","Bh6z0a4","Bh953qp","d","h","f","m","useSubTextStyles","useMultilineStyles","mc9l5x","Beiy3e4","qb2dma","useMenuItemStyles_unstable","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","multilineStyles","subtextBaseStyles","subTextStyles","multiline","className"],"sources":["useMenuItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nexport const menuItemClassNames = {\n    root: 'fui-MenuItem',\n    icon: 'fui-MenuItem__icon',\n    checkmark: 'fui-MenuItem__checkmark',\n    submenuIndicator: 'fui-MenuItem__submenuIndicator',\n    content: 'fui-MenuItem__content',\n    secondaryContent: 'fui-MenuItem__secondaryContent',\n    subText: 'fui-MenuItem__subText'\n};\nconst useRootBaseStyles = makeResetStyles({\n    borderRadius: tokens.borderRadiusMedium,\n    position: 'relative',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground1,\n    paddingRight: tokens.spacingVerticalSNudge,\n    paddingLeft: tokens.spacingVerticalSNudge,\n    paddingTop: tokens.spacingVerticalSNudge,\n    paddingBottom: tokens.spacingVerticalSNudge,\n    boxSizing: 'border-box',\n    maxWidth: '290px',\n    minHeight: '32px',\n    flexShrink: 0,\n    display: 'flex',\n    alignItems: 'start',\n    fontSize: tokens.fontSizeBase300,\n    cursor: 'pointer',\n    gap: '4px',\n    ':hover': {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        color: tokens.colorNeutralForeground2Hover,\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\n        },\n        [`& .${menuItemClassNames.icon}`]: {\n            color: tokens.colorNeutralForeground2BrandSelected\n        },\n        [`& .${menuItemClassNames.subText}`]: {\n            color: tokens.colorNeutralForeground3Hover\n        }\n    },\n    ':hover:active': {\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n        color: tokens.colorNeutralForeground2Pressed,\n        [`& .${menuItemClassNames.subText}`]: {\n            color: tokens.colorNeutralForeground3Pressed\n        }\n    },\n    // High contrast styles\n    '@media (forced-colors: active)': {\n        ':hover': {\n            backgroundColor: 'Canvas',\n            borderColor: 'Highlight',\n            color: 'Highlight'\n        },\n        ...createFocusOutlineStyle({\n            style: {\n                outlineColor: 'Highlight'\n            }\n        })\n    },\n    userSelect: 'none',\n    ...createFocusOutlineStyle()\n});\nconst useContentBaseStyles = makeResetStyles({\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    backgroundColor: 'transparent',\n    flexGrow: 1\n});\nconst useSecondaryContentBaseStyles = makeResetStyles({\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    ...typographyStyles.caption1,\n    lineHeight: tokens.lineHeightBase300,\n    color: tokens.colorNeutralForeground3,\n    ':hover': {\n        color: tokens.colorNeutralForeground3Hover\n    },\n    ':focus': {\n        color: tokens.colorNeutralForeground3Hover\n    }\n});\nconst useIconBaseStyles = makeResetStyles({\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    flexShrink: 0\n});\nconst useSubmenuIndicatorBaseStyles = makeResetStyles({\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center'\n});\nconst useSubtextBaseStyles = makeResetStyles({\n    ...typographyStyles.caption2,\n    color: tokens.colorNeutralForeground3\n});\nconst useStyles = makeStyles({\n    checkmark: {\n        marginTop: '2px'\n    },\n    splitItemMain: {\n        flexGrow: 1\n    },\n    splitItemTrigger: {\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0,\n        paddingLeft: 0,\n        '::before': {\n            content: '\"\"',\n            width: tokens.strokeWidthThin,\n            height: '24px',\n            backgroundColor: tokens.colorNeutralStroke1\n        }\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        ':hover': {\n            color: tokens.colorNeutralForegroundDisabled,\n            backgroundColor: tokens.colorNeutralBackground1,\n            cursor: 'not-allowed',\n            [`& .${iconFilledClassName}`]: {\n                display: 'none'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${menuItemClassNames.icon}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            },\n            [`& .${menuItemClassNames.subText}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        },\n        ':hover:active': {\n            color: tokens.colorNeutralForegroundDisabled,\n            backgroundColor: tokens.colorNeutralBackground1,\n            [`& .${menuItemClassNames.subText}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        },\n        ':focus': {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        '@media (forced-colors: active)': {\n            color: 'GrayText',\n            ':hover': {\n                color: 'GrayText',\n                backgroundColor: 'Canvas',\n                [`& .${menuItemClassNames.icon}`]: {\n                    color: 'GrayText',\n                    backgroundColor: 'Canvas'\n                },\n                [`& .${menuItemClassNames.subText}`]: {\n                    color: 'GrayText'\n                }\n            },\n            ':hover:active': {\n                color: 'GrayText',\n                backgroundColor: 'Canvas',\n                [`& .${menuItemClassNames.subText}`]: {\n                    color: 'GrayText'\n                }\n            },\n            ':focus': {\n                color: 'GrayText',\n                backgroundColor: 'Canvas'\n            }\n        }\n    }\n});\nconst useSubTextStyles = makeStyles({\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n            color: 'GrayText'\n        }\n    }\n});\nconst useMultilineStyles = makeStyles({\n    content: {\n        display: 'flex',\n        flexDirection: 'column'\n    },\n    secondaryContent: {\n        alignSelf: 'center'\n    },\n    submenuIndicator: {\n        alignSelf: 'center'\n    }\n});\n/** Applies style classnames to slots */ export const useMenuItemStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const rootBaseStyles = useRootBaseStyles();\n    const contentBaseStyles = useContentBaseStyles();\n    const secondaryContentBaseStyles = useSecondaryContentBaseStyles();\n    const iconBaseStyles = useIconBaseStyles();\n    const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();\n    const multilineStyles = useMultilineStyles();\n    const subtextBaseStyles = useSubtextBaseStyles();\n    const subTextStyles = useSubTextStyles();\n    const multiline = !!state.subText;\n    state.root.className = mergeClasses(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);\n    if (state.content) {\n        state.content.className = mergeClasses(menuItemClassNames.content, contentBaseStyles, state.content.className, multiline && multilineStyles.content);\n    }\n    if (state.checkmark) {\n        state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, secondaryContentBaseStyles, state.disabled && styles.disabled, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);\n    }\n    if (state.submenuIndicator) {\n        state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className, multiline && multilineStyles.submenuIndicator);\n    }\n    if (state.subText) {\n        state.subText.className = mergeClasses(menuItemClassNames.subText, state.disabled && subTextStyles.disabled, state.subText.className, subtextBaseStyles);\n    }\n    useCheckmarkStyles_unstable(state);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/MenuItem/useMenuItemStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 import { mergeClasses, makeStyles, makeResetStyles } from '@griffel/react';
 import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';