@fluentui/react-menu 9.16.9 → 9.17.1

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @fluentui/react-menu
 
-This log was last generated on Wed, 11 Jun 2025 22:29:17 GMT and should not be manually modified.
+This log was last generated on Fri, 13 Jun 2025 12:30:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.17.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.17.1)
+
+Fri, 13 Jun 2025 12:30:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.17.0..@fluentui/react-menu_v9.17.1)
+
+### Patches
+
+- Bump @fluentui/react-positioning to v9.18.1 ([PR #34639](https://github.com/microsoft/fluentui/pull/34639) by beachball)
+
+## [9.17.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.17.0)
+
+Thu, 12 Jun 2025 09:43:30 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.16.9..@fluentui/react-menu_v9.17.0)
+
+### Minor changes
+
+- Bump @fluentui/react-aria to v9.15.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
+- Bump @fluentui/react-portal to v9.6.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
+- Bump @fluentui/react-positioning to v9.18.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
+- Bump @fluentui/react-tabster to v9.25.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
+- Bump @fluentui/react-utilities to v9.21.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
+
 ## [9.16.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.16.9)
 
-Wed, 11 Jun 2025 22:29:17 GMT 
+Wed, 11 Jun 2025 22:31:58 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.16.8..@fluentui/react-menu_v9.16.9)
 
 ### Patches

package/lib/components/MenuItem/useMenuItem.js

@@ -16,7 +16,7 @@ const ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
  */ export const useMenuItem_unstable = (props, ref)=>{
     const isSubmenuTrigger = useMenuTriggerContext_unstable();
     const persistOnClickContext = useMenuContext_unstable((context)=>context.persistOnItemClick);
-    const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = props;
+    const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext, content: _content, ...rest } = props;
     const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({
         hasSubmenu
     });
@@ -43,7 +43,7 @@ const ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
         },
         root: slot.always(getIntrinsicElementProps(as, useARIAButtonProps(as, {
             role: 'menuitem',
-            ...props,
+            ...rest,
             disabled: false,
             disabledFocusable: disabled,
             ref: useMergedRefs(ref, innerRef),

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 { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = 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          ...props,\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","hasIcons","hasCheckmarks","useIconAndCheckmarkAlignment","setOpen","useNotifySplitItemMultiline","multiline","subText","dir","innerRef","useRef","dismissedWithKeyboardRef","state","components","root","icon","checkmark","submenuIndicator","content","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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/MenuItemLink/useMenuItemLink.js

@@ -24,6 +24,7 @@ import { useMenuItem_unstable } from '../MenuItem/useMenuItem';
     return {
         ...baseState,
         components: {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
             ...baseState.components,
             root: 'a'
         },

package/lib/components/MenuItemLink/useMenuItemLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemLink/useMenuItemLink.ts"],"sourcesContent":["import * as React from 'react';\nimport { ExtractSlotProps, Slot, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { MenuItemLinkProps, MenuItemLinkState } from './MenuItemLink.types';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport { MenuItemProps } from '../MenuItem/MenuItem.types';\n\n/**\n * Create the state required to render MenuItemLink.\n *\n * The returned state can be modified with hooks such as useMenuItemLinkStyles_unstable,\n * before being passed to renderMenuItemLink_unstable.\n *\n * @param props - props from this instance of MenuItemLink\n * @param ref - reference to root HTMLElement of MenuItemLink\n */\nexport const useMenuItemLink_unstable = (\n  props: MenuItemLinkProps,\n  ref: React.Ref<HTMLAnchorElement>,\n): MenuItemLinkState => {\n  // casting because the root slot changes from div to a\n  const baseState = useMenuItem_unstable(props as MenuItemProps, null);\n  // FIXME: casting because the root slot changes from div to a,\n  // ideal solution would be to extract common logic from useMenuItem_unstable root\n  // and use it in both without assuming element type\n  const _props = { ...props, ...(baseState.root as ExtractSlotProps<Slot<'a'>>), ref, tabIndex: props.tabIndex };\n\n  return {\n    ...baseState,\n    components: {\n      ...baseState.components,\n      root: 'a',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('a', {\n        role: 'menuitem',\n        ..._props,\n      }),\n      { elementType: 'a' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMenuItem_unstable","useMenuItemLink_unstable","props","ref","baseState","_props","root","tabIndex","components","always","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAiCC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAEnG,SAASC,oBAAoB,QAAQ,0BAA0B;AAG/D;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,sDAAsD;IACtD,MAAMC,YAAYJ,qBAAqBE,OAAwB;IAC/D,8DAA8D;IAC9D,iFAAiF;IACjF,mDAAmD;IACnD,MAAMG,SAAS;QAAE,GAAGH,KAAK;QAAE,GAAIE,UAAUE,IAAI;QAAkCH;QAAKI,UAAUL,MAAMK,QAAQ;IAAC;IAE7G,OAAO;QACL,GAAGH,SAAS;QACZI,YAAY;YACV,GAAGJ,UAAUI,UAAU;YACvBF,MAAM;QACR;QACAA,MAAMP,KAAKU,MAAM,CACfX,yBAAyB,KAAK;YAC5BY,MAAM;YACN,GAAGL,MAAM;QACX,IACA;YAAEM,aAAa;QAAI;IAEvB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/MenuItemLink/useMenuItemLink.ts"],"sourcesContent":["import * as React from 'react';\nimport { ExtractSlotProps, Slot, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { MenuItemLinkProps, MenuItemLinkState } from './MenuItemLink.types';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport { MenuItemProps } from '../MenuItem/MenuItem.types';\n\n/**\n * Create the state required to render MenuItemLink.\n *\n * The returned state can be modified with hooks such as useMenuItemLinkStyles_unstable,\n * before being passed to renderMenuItemLink_unstable.\n *\n * @param props - props from this instance of MenuItemLink\n * @param ref - reference to root HTMLElement of MenuItemLink\n */\nexport const useMenuItemLink_unstable = (\n  props: MenuItemLinkProps,\n  ref: React.Ref<HTMLAnchorElement>,\n): MenuItemLinkState => {\n  // casting because the root slot changes from div to a\n  const baseState = useMenuItem_unstable(props as MenuItemProps, null);\n  // FIXME: casting because the root slot changes from div to a,\n  // ideal solution would be to extract common logic from useMenuItem_unstable root\n  // and use it in both without assuming element type\n  const _props = { ...props, ...(baseState.root as ExtractSlotProps<Slot<'a'>>), ref, tabIndex: props.tabIndex };\n\n  return {\n    ...baseState,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...baseState.components,\n      root: 'a',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('a', {\n        role: 'menuitem',\n        ..._props,\n      }),\n      { elementType: 'a' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMenuItem_unstable","useMenuItemLink_unstable","props","ref","baseState","_props","root","tabIndex","components","always","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAiCC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAEnG,SAASC,oBAAoB,QAAQ,0BAA0B;AAG/D;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,sDAAsD;IACtD,MAAMC,YAAYJ,qBAAqBE,OAAwB;IAC/D,8DAA8D;IAC9D,iFAAiF;IACjF,mDAAmD;IACnD,MAAMG,SAAS;QAAE,GAAGH,KAAK;QAAE,GAAIE,UAAUE,IAAI;QAAkCH;QAAKI,UAAUL,MAAMK,QAAQ;IAAC;IAE7G,OAAO;QACL,GAAGH,SAAS;QACZI,YAAY;YACV,4DAA4D;YAC5D,GAAGJ,UAAUI,UAAU;YACvBF,MAAM;QACR;QACAA,MAAMP,KAAKU,MAAM,CACfX,yBAAyB,KAAK;YAC5BY,MAAM;YACN,GAAGL,MAAM;QACX,IACA;YAAEM,aAAa;QAAI;IAEvB;AACF,EAAE"}

package/lib/components/MenuItemSwitch/useMenuItemSwitch.js

@@ -25,6 +25,7 @@ import { circleFilledClassName } from './useMenuItemSwitchStyles.styles';
             }
         }),
         components: {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
             ...baseState.components,
             switchIndicator: 'span'
         }

package/lib/components/MenuItemSwitch/useMenuItemSwitch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemSwitch/useMenuItemSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport type { MenuItemSwitchProps, MenuItemSwitchState } from './MenuItemSwitch.types';\nimport { useMenuItemCheckbox_unstable } from '../MenuItemCheckbox/useMenuItemCheckbox';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { circleFilledClassName } from './useMenuItemSwitchStyles.styles';\n\n/**\n * Create the state required to render MenuItemSwitch.\n *\n * The returned state can be modified with hooks such as useMenuItemSwitchStyles_unstable,\n * before being passed to renderMenuItemSwitch_unstable.\n *\n * @param props - props from this instance of MenuItemSwitch\n * @param ref - reference to root HTMLDivElement of MenuItemSwitch\n */\nexport const useMenuItemSwitch_unstable = (\n  props: MenuItemSwitchProps,\n  ref: React.Ref<HTMLDivElement>,\n): MenuItemSwitchState => {\n  const baseState = useMenuItemCheckbox_unstable(props, ref);\n  return {\n    ...baseState,\n    switchIndicator: slot.optional(props.switchIndicator, {\n      renderByDefault: true,\n      elementType: 'span',\n      defaultProps: {\n        children: <CircleFilled className={circleFilledClassName} />,\n      },\n    }),\n    components: {\n      ...baseState.components,\n      switchIndicator: 'span',\n    },\n  };\n};\n"],"names":["React","slot","useMenuItemCheckbox_unstable","CircleFilled","circleFilledClassName","useMenuItemSwitch_unstable","props","ref","baseState","switchIndicator","optional","renderByDefault","elementType","defaultProps","children","className","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AAEjD,SAASC,4BAA4B,QAAQ,0CAA0C;AACvF,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,qBAAqB,QAAQ,mCAAmC;AAEzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,YAAYN,6BAA6BI,OAAOC;IACtD,OAAO;QACL,GAAGC,SAAS;QACZC,iBAAiBR,KAAKS,QAAQ,CAACJ,MAAMG,eAAe,EAAE;YACpDE,iBAAiB;YACjBC,aAAa;YACbC,cAAc;gBACZC,wBAAU,oBAACX;oBAAaY,WAAWX;;YACrC;QACF;QACAY,YAAY;YACV,GAAGR,UAAUQ,UAAU;YACvBP,iBAAiB;QACnB;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/MenuItemSwitch/useMenuItemSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport type { MenuItemSwitchProps, MenuItemSwitchState } from './MenuItemSwitch.types';\nimport { useMenuItemCheckbox_unstable } from '../MenuItemCheckbox/useMenuItemCheckbox';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { circleFilledClassName } from './useMenuItemSwitchStyles.styles';\n\n/**\n * Create the state required to render MenuItemSwitch.\n *\n * The returned state can be modified with hooks such as useMenuItemSwitchStyles_unstable,\n * before being passed to renderMenuItemSwitch_unstable.\n *\n * @param props - props from this instance of MenuItemSwitch\n * @param ref - reference to root HTMLDivElement of MenuItemSwitch\n */\nexport const useMenuItemSwitch_unstable = (\n  props: MenuItemSwitchProps,\n  ref: React.Ref<HTMLDivElement>,\n): MenuItemSwitchState => {\n  const baseState = useMenuItemCheckbox_unstable(props, ref);\n  return {\n    ...baseState,\n    switchIndicator: slot.optional(props.switchIndicator, {\n      renderByDefault: true,\n      elementType: 'span',\n      defaultProps: {\n        children: <CircleFilled className={circleFilledClassName} />,\n      },\n    }),\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...baseState.components,\n      switchIndicator: 'span',\n    },\n  };\n};\n"],"names":["React","slot","useMenuItemCheckbox_unstable","CircleFilled","circleFilledClassName","useMenuItemSwitch_unstable","props","ref","baseState","switchIndicator","optional","renderByDefault","elementType","defaultProps","children","className","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AAEjD,SAASC,4BAA4B,QAAQ,0CAA0C;AACvF,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,qBAAqB,QAAQ,mCAAmC;AAEzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,YAAYN,6BAA6BI,OAAOC;IACtD,OAAO;QACL,GAAGC,SAAS;QACZC,iBAAiBR,KAAKS,QAAQ,CAACJ,MAAMG,eAAe,EAAE;YACpDE,iBAAiB;YACjBC,aAAa;YACbC,cAAc;gBACZC,wBAAU,oBAACX;oBAAaY,WAAWX;;YACrC;QACF;QACAY,YAAY;YACV,4DAA4D;YAC5D,GAAGR,UAAUQ,UAAU;YACvBP,iBAAiB;QACnB;IACF;AACF,EAAE"}

package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js

@@ -85,6 +85,7 @@ export const useMenuItemSwitchStyles_unstable = state => {
   useMenuItemStyles_unstable({
     ...state,
     components: {
+      // eslint-disable-next-line @typescript-eslint/no-deprecated
       ...state.components,
       checkmark: 'span',
       submenuIndicator: 'span'

package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","__resetStyles","mergeClasses","shorthands","tokens","useMenuItemStyles_unstable","menuItemSwitchClassNames","root","icon","content","secondaryContent","switchIndicator","subText","circleFilledClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","r","s","useSwitchIndicatorStyles","checked","G4r02d","De3pzq","sj55zd","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B2d53fq","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","d","h","useMultilineStyles","qb2dma","useMenuItemSwitchStyles_unstable","state","multiline","switchIndicatorStyles","switchIndicatorBaseStyles","multilineStyles","className","switch","components","checkmark","submenuIndicator","undefined","hasSubmenu","persistOnClick"],"sources":["useMenuItemSwitchStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemSwitchClassNames = {\n    root: 'fui-MenuItemSwitch',\n    icon: 'fui-MenuItemSwitch__icon',\n    content: 'fui-MenuItemSwitch__content',\n    secondaryContent: 'fui-MenuItemSwitch__secondaryContent',\n    switchIndicator: 'fui-MenuItemSwitch__switchIndicator',\n    subText: 'fui-MenuItemSwitch__subText'\n};\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useSwitchIndicatorBaseClassName = makeResetStyles({\n    borderRadius: tokens.borderRadiusCircular,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n    lineHeight: 0,\n    boxSizing: 'border-box',\n    fill: 'currentColor',\n    flexShrink: 0,\n    fontSize: `${thumbSize}px`,\n    height: `${trackHeight}px`,\n    transitionDuration: tokens.durationNormal,\n    transitionTimingFunction: tokens.curveEasyEase,\n    transitionProperty: 'background, border, color',\n    width: `${trackWidth}px`,\n    marginRight: tokens.spacingHorizontalXS,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms'\n    },\n    color: tokens.colorNeutralStrokeAccessible,\n    ':hover': {\n        color: tokens.colorNeutralStrokeAccessibleHover,\n        borderColor: tokens.colorNeutralStrokeAccessibleHover\n    },\n    ':hover:active': {\n        color: tokens.colorNeutralStrokeAccessiblePressed,\n        borderColor: tokens.colorNeutralStrokeAccessiblePressed\n    },\n    [`& .${circleFilledClassName}`]: {\n        transitionDuration: tokens.durationNormal,\n        transitionTimingFunction: tokens.curveEasyEase,\n        transitionProperty: 'transform',\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms'\n        }\n    }\n});\nconst useSwitchIndicatorStyles = makeStyles({\n    checked: {\n        [`& .${circleFilledClassName}`]: {\n            transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n        },\n        backgroundColor: tokens.colorCompoundBrandBackground,\n        color: tokens.colorNeutralForegroundInverted,\n        ...shorthands.borderColor(tokens.colorTransparentStroke),\n        ':hover': {\n            color: tokens.colorNeutralForegroundInverted,\n            backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n            ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n        },\n        ':hover:active': {\n            color: tokens.colorNeutralForegroundInverted,\n            backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n            ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n        }\n    }\n});\nconst useMultilineStyles = makeStyles({\n    switch: {\n        alignSelf: 'center'\n    }\n});\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */ export const useMenuItemSwitchStyles_unstable = (state)=>{\n    'use no memo';\n    const { checked, subText } = state;\n    const multiline = !!subText;\n    const switchIndicatorStyles = useSwitchIndicatorStyles();\n    const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n    const multilineStyles = useMultilineStyles();\n    state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n    if (state.content) {\n        state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n    }\n    if (state.subText) {\n        state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);\n    }\n    if (state.switchIndicator) {\n        state.switchIndicator.className = mergeClasses(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className, multiline && multilineStyles.switch);\n    }\n    useMenuItemStyles_unstable({\n        ...state,\n        components: {\n            ...state.components,\n            checkmark: 'span',\n            submenuIndicator: 'span'\n        },\n        checkmark: undefined,\n        submenuIndicator: undefined,\n        hasSubmenu: false,\n        persistOnClick: true\n    });\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","__resetStyles","mergeClasses","shorthands","tokens","useMenuItemStyles_unstable","menuItemSwitchClassNames","root","icon","content","secondaryContent","switchIndicator","subText","circleFilledClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","r","s","useSwitchIndicatorStyles","checked","G4r02d","De3pzq","sj55zd","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B2d53fq","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","d","h","useMultilineStyles","qb2dma","useMenuItemSwitchStyles_unstable","state","multiline","switchIndicatorStyles","switchIndicatorBaseStyles","multilineStyles","className","switch","components","checkmark","submenuIndicator","undefined","hasSubmenu","persistOnClick"],"sources":["useMenuItemSwitchStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemSwitchClassNames = {\n    root: 'fui-MenuItemSwitch',\n    icon: 'fui-MenuItemSwitch__icon',\n    content: 'fui-MenuItemSwitch__content',\n    secondaryContent: 'fui-MenuItemSwitch__secondaryContent',\n    switchIndicator: 'fui-MenuItemSwitch__switchIndicator',\n    subText: 'fui-MenuItemSwitch__subText'\n};\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useSwitchIndicatorBaseClassName = makeResetStyles({\n    borderRadius: tokens.borderRadiusCircular,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n    lineHeight: 0,\n    boxSizing: 'border-box',\n    fill: 'currentColor',\n    flexShrink: 0,\n    fontSize: `${thumbSize}px`,\n    height: `${trackHeight}px`,\n    transitionDuration: tokens.durationNormal,\n    transitionTimingFunction: tokens.curveEasyEase,\n    transitionProperty: 'background, border, color',\n    width: `${trackWidth}px`,\n    marginRight: tokens.spacingHorizontalXS,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms'\n    },\n    color: tokens.colorNeutralStrokeAccessible,\n    ':hover': {\n        color: tokens.colorNeutralStrokeAccessibleHover,\n        borderColor: tokens.colorNeutralStrokeAccessibleHover\n    },\n    ':hover:active': {\n        color: tokens.colorNeutralStrokeAccessiblePressed,\n        borderColor: tokens.colorNeutralStrokeAccessiblePressed\n    },\n    [`& .${circleFilledClassName}`]: {\n        transitionDuration: tokens.durationNormal,\n        transitionTimingFunction: tokens.curveEasyEase,\n        transitionProperty: 'transform',\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms'\n        }\n    }\n});\nconst useSwitchIndicatorStyles = makeStyles({\n    checked: {\n        [`& .${circleFilledClassName}`]: {\n            transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n        },\n        backgroundColor: tokens.colorCompoundBrandBackground,\n        color: tokens.colorNeutralForegroundInverted,\n        ...shorthands.borderColor(tokens.colorTransparentStroke),\n        ':hover': {\n            color: tokens.colorNeutralForegroundInverted,\n            backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n            ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n        },\n        ':hover:active': {\n            color: tokens.colorNeutralForegroundInverted,\n            backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n            ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n        }\n    }\n});\nconst useMultilineStyles = makeStyles({\n    switch: {\n        alignSelf: 'center'\n    }\n});\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */ export const useMenuItemSwitchStyles_unstable = (state)=>{\n    'use no memo';\n    const { checked, subText } = state;\n    const multiline = !!subText;\n    const switchIndicatorStyles = useSwitchIndicatorStyles();\n    const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n    const multilineStyles = useMultilineStyles();\n    state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n    if (state.content) {\n        state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n    }\n    if (state.subText) {\n        state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);\n    }\n    if (state.switchIndicator) {\n        state.switchIndicator.className = mergeClasses(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className, multiline && multilineStyles.switch);\n    }\n    useMenuItemStyles_unstable({\n        ...state,\n        components: {\n            // eslint-disable-next-line @typescript-eslint/no-deprecated\n            ...state.components,\n            checkmark: 'span',\n            submenuIndicator: 'span'\n        },\n        checkmark: undefined,\n        submenuIndicator: undefined,\n        hasSubmenu: false,\n        persistOnClick: true\n    });\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -25,7 +25,7 @@ const ChevronLeftIcon = (0, _reacticons.bundleIcon)(_reacticons.ChevronLeftFille
 const useMenuItem_unstable = (props, ref)=>{
     const isSubmenuTrigger = (0, _menuTriggerContext.useMenuTriggerContext_unstable)();
     const persistOnClickContext = (0, _menuContext.useMenuContext_unstable)((context)=>context.persistOnItemClick);
-    const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = props;
+    const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext, content: _content, ...rest } = props;
     const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({
         hasSubmenu
     });
@@ -52,7 +52,7 @@ const useMenuItem_unstable = (props, ref)=>{
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(as, (0, _reactaria.useARIAButtonProps)(as, {
             role: 'menuitem',
-            ...props,
+            ...rest,
             disabled: false,
             disabledFocusable: disabled,
             ref: (0, _reactutilities.useMergedRefs)(ref, innerRef),

package/lib-commonjs/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 { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = 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          ...props,\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":["useMenuItem_unstable","ChevronRightIcon","bundleIcon","ChevronRightFilled","ChevronRightRegular","ChevronLeftIcon","ChevronLeftFilled","ChevronLeftRegular","props","ref","isSubmenuTrigger","useMenuTriggerContext_unstable","persistOnClickContext","useMenuContext_unstable","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","hasIcons","hasCheckmarks","useIconAndCheckmarkAlignment","setOpen","useNotifySplitItemMultiline","multiline","subText","dir","useFluent","innerRef","React","useRef","dismissedWithKeyboardRef","state","components","root","icon","checkmark","submenuIndicator","content","secondaryContent","slot","always","getIntrinsicElementProps","useARIAButtonProps","role","disabledFocusable","useMergedRefs","onKeyDown","useEventCallback","event","isDefaultPrevented","key","Space","Enter","current","onMouseMove","currentTarget","ownerDocument","activeElement","focus","onClick","open","keyboard","bubble","type","elementType","optional","renderByDefault","defaultProps","children","createElement","useCharacterSearch","options","isSplitItemTrigger","useIsInMenuSplitGroup","setMultiline","useMenuSplitGroupContext_unstable","useIsomorphicLayoutEffect","useMenuListContext_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"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":["useMenuItem_unstable","ChevronRightIcon","bundleIcon","ChevronRightFilled","ChevronRightRegular","ChevronLeftIcon","ChevronLeftFilled","ChevronLeftRegular","props","ref","isSubmenuTrigger","useMenuTriggerContext_unstable","persistOnClickContext","useMenuContext_unstable","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","content","_content","rest","hasIcons","hasCheckmarks","useIconAndCheckmarkAlignment","setOpen","useNotifySplitItemMultiline","multiline","subText","dir","useFluent","innerRef","React","useRef","dismissedWithKeyboardRef","state","components","root","icon","checkmark","submenuIndicator","secondaryContent","slot","always","getIntrinsicElementProps","useARIAButtonProps","role","disabledFocusable","useMergedRefs","onKeyDown","useEventCallback","event","isDefaultPrevented","key","Space","Enter","current","onMouseMove","currentTarget","ownerDocument","activeElement","focus","onClick","open","keyboard","bubble","type","elementType","optional","renderByDefault","defaultProps","children","createElement","useCharacterSearch","options","isSplitItemTrigger","useIsInMenuSplitGroup","setMultiline","useMenuSplitGroupContext_unstable","useIsomorphicLayoutEffect","useMenuListContext_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/MenuItemLink/useMenuItemLink.js

@@ -27,6 +27,7 @@ const useMenuItemLink_unstable = (props, ref)=>{
     return {
         ...baseState,
         components: {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
             ...baseState.components,
             root: 'a'
         },

package/lib-commonjs/components/MenuItemLink/useMenuItemLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemLink/useMenuItemLink.ts"],"sourcesContent":["import * as React from 'react';\nimport { ExtractSlotProps, Slot, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { MenuItemLinkProps, MenuItemLinkState } from './MenuItemLink.types';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport { MenuItemProps } from '../MenuItem/MenuItem.types';\n\n/**\n * Create the state required to render MenuItemLink.\n *\n * The returned state can be modified with hooks such as useMenuItemLinkStyles_unstable,\n * before being passed to renderMenuItemLink_unstable.\n *\n * @param props - props from this instance of MenuItemLink\n * @param ref - reference to root HTMLElement of MenuItemLink\n */\nexport const useMenuItemLink_unstable = (\n  props: MenuItemLinkProps,\n  ref: React.Ref<HTMLAnchorElement>,\n): MenuItemLinkState => {\n  // casting because the root slot changes from div to a\n  const baseState = useMenuItem_unstable(props as MenuItemProps, null);\n  // FIXME: casting because the root slot changes from div to a,\n  // ideal solution would be to extract common logic from useMenuItem_unstable root\n  // and use it in both without assuming element type\n  const _props = { ...props, ...(baseState.root as ExtractSlotProps<Slot<'a'>>), ref, tabIndex: props.tabIndex };\n\n  return {\n    ...baseState,\n    components: {\n      ...baseState.components,\n      root: 'a',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('a', {\n        role: 'menuitem',\n        ..._props,\n      }),\n      { elementType: 'a' },\n    ),\n  };\n};\n"],"names":["useMenuItemLink_unstable","props","ref","baseState","useMenuItem_unstable","_props","root","tabIndex","components","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;gCACgD;6BAElC;AAY9B,MAAMA,2BAA2B,CACtCC,OACAC;IAEA,sDAAsD;IACtD,MAAMC,YAAYC,IAAAA,iCAAAA,EAAqBH,OAAwB;IAC/D,8DAA8D;IAC9D,iFAAiF;IACjF,mDAAmD;IACnD,MAAMI,SAAS;QAAE,GAAGJ,KAAK;QAAE,GAAIE,UAAUG,IAAI;QAAkCJ;QAAKK,UAAUN,MAAMM,QAAQ;IAAC;IAE7G,OAAO;QACL,GAAGJ,SAAS;QACZK,YAAY;YACV,GAAGL,UAAUK,UAAU;YACvBF,MAAM;QACR;QACAA,MAAMG,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,KAAK;YAC5BC,MAAM;YACN,GAAGP,MAAM;QACX,IACA;YAAEQ,aAAa;QAAI;IAEvB;AACF"}
+{"version":3,"sources":["../src/components/MenuItemLink/useMenuItemLink.ts"],"sourcesContent":["import * as React from 'react';\nimport { ExtractSlotProps, Slot, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { MenuItemLinkProps, MenuItemLinkState } from './MenuItemLink.types';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport { MenuItemProps } from '../MenuItem/MenuItem.types';\n\n/**\n * Create the state required to render MenuItemLink.\n *\n * The returned state can be modified with hooks such as useMenuItemLinkStyles_unstable,\n * before being passed to renderMenuItemLink_unstable.\n *\n * @param props - props from this instance of MenuItemLink\n * @param ref - reference to root HTMLElement of MenuItemLink\n */\nexport const useMenuItemLink_unstable = (\n  props: MenuItemLinkProps,\n  ref: React.Ref<HTMLAnchorElement>,\n): MenuItemLinkState => {\n  // casting because the root slot changes from div to a\n  const baseState = useMenuItem_unstable(props as MenuItemProps, null);\n  // FIXME: casting because the root slot changes from div to a,\n  // ideal solution would be to extract common logic from useMenuItem_unstable root\n  // and use it in both without assuming element type\n  const _props = { ...props, ...(baseState.root as ExtractSlotProps<Slot<'a'>>), ref, tabIndex: props.tabIndex };\n\n  return {\n    ...baseState,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...baseState.components,\n      root: 'a',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('a', {\n        role: 'menuitem',\n        ..._props,\n      }),\n      { elementType: 'a' },\n    ),\n  };\n};\n"],"names":["useMenuItemLink_unstable","props","ref","baseState","useMenuItem_unstable","_props","root","tabIndex","components","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;gCACgD;6BAElC;AAY9B,MAAMA,2BAA2B,CACtCC,OACAC;IAEA,sDAAsD;IACtD,MAAMC,YAAYC,IAAAA,iCAAAA,EAAqBH,OAAwB;IAC/D,8DAA8D;IAC9D,iFAAiF;IACjF,mDAAmD;IACnD,MAAMI,SAAS;QAAE,GAAGJ,KAAK;QAAE,GAAIE,UAAUG,IAAI;QAAkCJ;QAAKK,UAAUN,MAAMM,QAAQ;IAAC;IAE7G,OAAO;QACL,GAAGJ,SAAS;QACZK,YAAY;YACV,4DAA4D;YAC5D,GAAGL,UAAUK,UAAU;YACvBF,MAAM;QACR;QACAA,MAAMG,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,KAAK;YAC5BC,MAAM;YACN,GAAGP,MAAM;QACX,IACA;YAAEQ,aAAa;QAAI;IAEvB;AACF"}

package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitch.js

@@ -28,6 +28,7 @@ const useMenuItemSwitch_unstable = (props, ref)=>{
             }
         }),
         components: {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
             ...baseState.components,
             switchIndicator: 'span'
         }

package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemSwitch/useMenuItemSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport type { MenuItemSwitchProps, MenuItemSwitchState } from './MenuItemSwitch.types';\nimport { useMenuItemCheckbox_unstable } from '../MenuItemCheckbox/useMenuItemCheckbox';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { circleFilledClassName } from './useMenuItemSwitchStyles.styles';\n\n/**\n * Create the state required to render MenuItemSwitch.\n *\n * The returned state can be modified with hooks such as useMenuItemSwitchStyles_unstable,\n * before being passed to renderMenuItemSwitch_unstable.\n *\n * @param props - props from this instance of MenuItemSwitch\n * @param ref - reference to root HTMLDivElement of MenuItemSwitch\n */\nexport const useMenuItemSwitch_unstable = (\n  props: MenuItemSwitchProps,\n  ref: React.Ref<HTMLDivElement>,\n): MenuItemSwitchState => {\n  const baseState = useMenuItemCheckbox_unstable(props, ref);\n  return {\n    ...baseState,\n    switchIndicator: slot.optional(props.switchIndicator, {\n      renderByDefault: true,\n      elementType: 'span',\n      defaultProps: {\n        children: <CircleFilled className={circleFilledClassName} />,\n      },\n    }),\n    components: {\n      ...baseState.components,\n      switchIndicator: 'span',\n    },\n  };\n};\n"],"names":["useMenuItemSwitch_unstable","props","ref","baseState","useMenuItemCheckbox_unstable","switchIndicator","slot","optional","renderByDefault","elementType","defaultProps","children","React","createElement","CircleFilled","className","circleFilledClassName","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;iEAhBU;gCACF;qCAEwB;4BAChB;+CACS;AAW/B,MAAMA,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,YAAYC,IAAAA,iDAAAA,EAA6BH,OAAOC;IACtD,OAAO;QACL,GAAGC,SAAS;QACZE,iBAAiBC,oBAAAA,CAAKC,QAAQ,CAACN,MAAMI,eAAe,EAAE;YACpDG,iBAAiB;YACjBC,aAAa;YACbC,cAAc;gBACZC,UAAAA,WAAAA,GAAUC,OAAAC,aAAA,CAACC,wBAAAA,EAAAA;oBAAaC,WAAWC,oDAAAA;;YACrC;QACF;QACAC,YAAY;YACV,GAAGd,UAAUc,UAAU;YACvBZ,iBAAiB;QACnB;IACF;AACF"}
+{"version":3,"sources":["../src/components/MenuItemSwitch/useMenuItemSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport type { MenuItemSwitchProps, MenuItemSwitchState } from './MenuItemSwitch.types';\nimport { useMenuItemCheckbox_unstable } from '../MenuItemCheckbox/useMenuItemCheckbox';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { circleFilledClassName } from './useMenuItemSwitchStyles.styles';\n\n/**\n * Create the state required to render MenuItemSwitch.\n *\n * The returned state can be modified with hooks such as useMenuItemSwitchStyles_unstable,\n * before being passed to renderMenuItemSwitch_unstable.\n *\n * @param props - props from this instance of MenuItemSwitch\n * @param ref - reference to root HTMLDivElement of MenuItemSwitch\n */\nexport const useMenuItemSwitch_unstable = (\n  props: MenuItemSwitchProps,\n  ref: React.Ref<HTMLDivElement>,\n): MenuItemSwitchState => {\n  const baseState = useMenuItemCheckbox_unstable(props, ref);\n  return {\n    ...baseState,\n    switchIndicator: slot.optional(props.switchIndicator, {\n      renderByDefault: true,\n      elementType: 'span',\n      defaultProps: {\n        children: <CircleFilled className={circleFilledClassName} />,\n      },\n    }),\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...baseState.components,\n      switchIndicator: 'span',\n    },\n  };\n};\n"],"names":["useMenuItemSwitch_unstable","props","ref","baseState","useMenuItemCheckbox_unstable","switchIndicator","slot","optional","renderByDefault","elementType","defaultProps","children","React","createElement","CircleFilled","className","circleFilledClassName","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;iEAhBU;gCACF;qCAEwB;4BAChB;+CACS;AAW/B,MAAMA,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,YAAYC,IAAAA,iDAAAA,EAA6BH,OAAOC;IACtD,OAAO;QACL,GAAGC,SAAS;QACZE,iBAAiBC,oBAAAA,CAAKC,QAAQ,CAACN,MAAMI,eAAe,EAAE;YACpDG,iBAAiB;YACjBC,aAAa;YACbC,cAAc;gBACZC,UAAAA,WAAAA,GAAUC,OAAAC,aAAA,CAACC,wBAAAA,EAAAA;oBAAaC,WAAWC,oDAAAA;;YACrC;QACF;QACAC,YAAY;YACV,4DAA4D;YAC5D,GAAGd,UAAUc,UAAU;YACvBZ,iBAAiB;QACnB;IACF;AACF"}

package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js

@@ -157,6 +157,7 @@ const useMenuItemSwitchStyles_unstable = (state)=>{
     (0, _useMenuItemStylesstyles.useMenuItemStyles_unstable)({
         ...state,
         components: {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
             ...state.components,
             checkmark: 'span',
             submenuIndicator: 'span'

package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMenuItemSwitchStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemSwitchClassNames = {\n    root: 'fui-MenuItemSwitch',\n    icon: 'fui-MenuItemSwitch__icon',\n    content: 'fui-MenuItemSwitch__content',\n    secondaryContent: 'fui-MenuItemSwitch__secondaryContent',\n    switchIndicator: 'fui-MenuItemSwitch__switchIndicator',\n    subText: 'fui-MenuItemSwitch__subText'\n};\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useSwitchIndicatorBaseClassName = makeResetStyles({\n    borderRadius: tokens.borderRadiusCircular,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n    lineHeight: 0,\n    boxSizing: 'border-box',\n    fill: 'currentColor',\n    flexShrink: 0,\n    fontSize: `${thumbSize}px`,\n    height: `${trackHeight}px`,\n    transitionDuration: tokens.durationNormal,\n    transitionTimingFunction: tokens.curveEasyEase,\n    transitionProperty: 'background, border, color',\n    width: `${trackWidth}px`,\n    marginRight: tokens.spacingHorizontalXS,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms'\n    },\n    color: tokens.colorNeutralStrokeAccessible,\n    ':hover': {\n        color: tokens.colorNeutralStrokeAccessibleHover,\n        borderColor: tokens.colorNeutralStrokeAccessibleHover\n    },\n    ':hover:active': {\n        color: tokens.colorNeutralStrokeAccessiblePressed,\n        borderColor: tokens.colorNeutralStrokeAccessiblePressed\n    },\n    [`& .${circleFilledClassName}`]: {\n        transitionDuration: tokens.durationNormal,\n        transitionTimingFunction: tokens.curveEasyEase,\n        transitionProperty: 'transform',\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms'\n        }\n    }\n});\nconst useSwitchIndicatorStyles = makeStyles({\n    checked: {\n        [`& .${circleFilledClassName}`]: {\n            transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n        },\n        backgroundColor: tokens.colorCompoundBrandBackground,\n        color: tokens.colorNeutralForegroundInverted,\n        ...shorthands.borderColor(tokens.colorTransparentStroke),\n        ':hover': {\n            color: tokens.colorNeutralForegroundInverted,\n            backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n            ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n        },\n        ':hover:active': {\n            color: tokens.colorNeutralForegroundInverted,\n            backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n            ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n        }\n    }\n});\nconst useMultilineStyles = makeStyles({\n    switch: {\n        alignSelf: 'center'\n    }\n});\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */ export const useMenuItemSwitchStyles_unstable = (state)=>{\n    'use no memo';\n    const { checked, subText } = state;\n    const multiline = !!subText;\n    const switchIndicatorStyles = useSwitchIndicatorStyles();\n    const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n    const multilineStyles = useMultilineStyles();\n    state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n    if (state.content) {\n        state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n    }\n    if (state.subText) {\n        state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);\n    }\n    if (state.switchIndicator) {\n        state.switchIndicator.className = mergeClasses(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className, multiline && multilineStyles.switch);\n    }\n    useMenuItemStyles_unstable({\n        ...state,\n        components: {\n            ...state.components,\n            checkmark: 'span',\n            submenuIndicator: 'span'\n        },\n        checkmark: undefined,\n        submenuIndicator: undefined,\n        hasSubmenu: false,\n        persistOnClick: true\n    });\n    return state;\n};\n"],"names":["circleFilledClassName","menuItemSwitchClassNames","useMenuItemSwitchStyles_unstable","root","icon","content","secondaryContent","switchIndicator","subText","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","__resetStyles","r","s","useSwitchIndicatorStyles","__styles","checked","G4r02d","De3pzq","sj55zd","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B2d53fq","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","d","h","useMultilineStyles","qb2dma","state","multiline","switchIndicatorStyles","switchIndicatorBaseStyles","multilineStyles","className","mergeClasses","switch","useMenuItemStyles_unstable","components","checkmark","submenuIndicator","undefined","hasSubmenu","persistOnClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useMenuItemSwitchStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemSwitchClassNames = {\n    root: 'fui-MenuItemSwitch',\n    icon: 'fui-MenuItemSwitch__icon',\n    content: 'fui-MenuItemSwitch__content',\n    secondaryContent: 'fui-MenuItemSwitch__secondaryContent',\n    switchIndicator: 'fui-MenuItemSwitch__switchIndicator',\n    subText: 'fui-MenuItemSwitch__subText'\n};\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useSwitchIndicatorBaseClassName = makeResetStyles({\n    borderRadius: tokens.borderRadiusCircular,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n    lineHeight: 0,\n    boxSizing: 'border-box',\n    fill: 'currentColor',\n    flexShrink: 0,\n    fontSize: `${thumbSize}px`,\n    height: `${trackHeight}px`,\n    transitionDuration: tokens.durationNormal,\n    transitionTimingFunction: tokens.curveEasyEase,\n    transitionProperty: 'background, border, color',\n    width: `${trackWidth}px`,\n    marginRight: tokens.spacingHorizontalXS,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms'\n    },\n    color: tokens.colorNeutralStrokeAccessible,\n    ':hover': {\n        color: tokens.colorNeutralStrokeAccessibleHover,\n        borderColor: tokens.colorNeutralStrokeAccessibleHover\n    },\n    ':hover:active': {\n        color: tokens.colorNeutralStrokeAccessiblePressed,\n        borderColor: tokens.colorNeutralStrokeAccessiblePressed\n    },\n    [`& .${circleFilledClassName}`]: {\n        transitionDuration: tokens.durationNormal,\n        transitionTimingFunction: tokens.curveEasyEase,\n        transitionProperty: 'transform',\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms'\n        }\n    }\n});\nconst useSwitchIndicatorStyles = makeStyles({\n    checked: {\n        [`& .${circleFilledClassName}`]: {\n            transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n        },\n        backgroundColor: tokens.colorCompoundBrandBackground,\n        color: tokens.colorNeutralForegroundInverted,\n        ...shorthands.borderColor(tokens.colorTransparentStroke),\n        ':hover': {\n            color: tokens.colorNeutralForegroundInverted,\n            backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n            ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n        },\n        ':hover:active': {\n            color: tokens.colorNeutralForegroundInverted,\n            backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n            ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n        }\n    }\n});\nconst useMultilineStyles = makeStyles({\n    switch: {\n        alignSelf: 'center'\n    }\n});\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */ export const useMenuItemSwitchStyles_unstable = (state)=>{\n    'use no memo';\n    const { checked, subText } = state;\n    const multiline = !!subText;\n    const switchIndicatorStyles = useSwitchIndicatorStyles();\n    const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n    const multilineStyles = useMultilineStyles();\n    state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n    if (state.content) {\n        state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n    }\n    if (state.subText) {\n        state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);\n    }\n    if (state.switchIndicator) {\n        state.switchIndicator.className = mergeClasses(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className, multiline && multilineStyles.switch);\n    }\n    useMenuItemStyles_unstable({\n        ...state,\n        components: {\n            // eslint-disable-next-line @typescript-eslint/no-deprecated\n            ...state.components,\n            checkmark: 'span',\n            submenuIndicator: 'span'\n        },\n        checkmark: undefined,\n        submenuIndicator: undefined,\n        hasSubmenu: false,\n        persistOnClick: true\n    });\n    return state;\n};\n"],"names":["circleFilledClassName","menuItemSwitchClassNames","useMenuItemSwitchStyles_unstable","root","icon","content","secondaryContent","switchIndicator","subText","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","__resetStyles","r","s","useSwitchIndicatorStyles","__styles","checked","G4r02d","De3pzq","sj55zd","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B2d53fq","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","d","h","useMultilineStyles","qb2dma","state","multiline","switchIndicatorStyles","switchIndicatorBaseStyles","multilineStyles","className","mergeClasses","switch","useMenuItemStyles_unstable","components","checkmark","submenuIndicator","undefined","hasSubmenu","persistOnClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-menu",
-  "version": "9.16.9",
+  "version": "9.17.1",
   "description": "Fluent UI menu component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -21,16 +21,16 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-aria": "^9.14.8",
-    "@fluentui/react-context-selector": "^9.1.77",
+    "@fluentui/react-aria": "^9.15.0",
+    "@fluentui/react-context-selector": "^9.2.0",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-portal": "^9.5.8",
-    "@fluentui/react-positioning": "^9.17.2",
+    "@fluentui/react-portal": "^9.6.0",
+    "@fluentui/react-positioning": "^9.18.1",
     "@fluentui/react-shared-contexts": "^9.23.1",
-    "@fluentui/react-tabster": "^9.24.8",
+    "@fluentui/react-tabster": "^9.25.0",
     "@fluentui/react-theme": "^9.1.24",
-    "@fluentui/react-utilities": "^9.20.0",
-    "@fluentui/react-jsx-runtime": "^9.0.55",
+    "@fluentui/react-utilities": "^9.21.0",
+    "@fluentui/react-jsx-runtime": "^9.1.0",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },