@fluentui/react-menu 0.0.0-nightly-20250226-1850.1 → 0.0.0-nightly-20250228-0406.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,30 +1,30 @@
1
1
  # Change Log - @fluentui/react-menu
2
2
 
3
- This log was last generated on Wed, 26 Feb 2025 18:54:55 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 28 Feb 2025 04:11:10 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20250226-1850.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v0.0.0-nightly-20250226-1850.1)
7
+ ## [0.0.0-nightly-20250228-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v0.0.0-nightly-20250228-0406.1)
8
8
 
9
- Wed, 26 Feb 2025 18:54:55 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.16.0..@fluentui/react-menu_v0.0.0-nightly-20250226-1850.1)
9
+ Fri, 28 Feb 2025 04:11:10 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.16.0..@fluentui/react-menu_v0.0.0-nightly-20250228-0406.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/keyboard-keys to v0.0.0-nightly-20250226-1850.1 ([commit](https://github.com/microsoft/fluentui/commit/7afc3ded59f38535c6ec9a76ac475dfd34a52126) by beachball)
16
- - Bump @fluentui/react-aria to v0.0.0-nightly-20250226-1850.1 ([commit](https://github.com/microsoft/fluentui/commit/7afc3ded59f38535c6ec9a76ac475dfd34a52126) by beachball)
17
- - Bump @fluentui/react-context-selector to v0.0.0-nightly-20250226-1850.1 ([commit](https://github.com/microsoft/fluentui/commit/7afc3ded59f38535c6ec9a76ac475dfd34a52126) by beachball)
18
- - Bump @fluentui/react-portal to v0.0.0-nightly-20250226-1850.1 ([commit](https://github.com/microsoft/fluentui/commit/7afc3ded59f38535c6ec9a76ac475dfd34a52126) by beachball)
19
- - Bump @fluentui/react-positioning to v0.0.0-nightly-20250226-1850.1 ([commit](https://github.com/microsoft/fluentui/commit/7afc3ded59f38535c6ec9a76ac475dfd34a52126) by beachball)
20
- - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250226-1850.1 ([commit](https://github.com/microsoft/fluentui/commit/7afc3ded59f38535c6ec9a76ac475dfd34a52126) by beachball)
21
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20250226-1850.1 ([commit](https://github.com/microsoft/fluentui/commit/7afc3ded59f38535c6ec9a76ac475dfd34a52126) by beachball)
22
- - Bump @fluentui/react-theme to v0.0.0-nightly-20250226-1850.1 ([commit](https://github.com/microsoft/fluentui/commit/7afc3ded59f38535c6ec9a76ac475dfd34a52126) by beachball)
23
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20250226-1850.1 ([commit](https://github.com/microsoft/fluentui/commit/7afc3ded59f38535c6ec9a76ac475dfd34a52126) by beachball)
24
- - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250226-1850.1 ([commit](https://github.com/microsoft/fluentui/commit/7afc3ded59f38535c6ec9a76ac475dfd34a52126) by beachball)
25
- - Bump @fluentui/react-provider to v0.0.0-nightly-20250226-1850.1 ([commit](https://github.com/microsoft/fluentui/commit/7afc3ded59f38535c6ec9a76ac475dfd34a52126) by beachball)
26
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20250226-1850.1 ([commit](https://github.com/microsoft/fluentui/commit/7afc3ded59f38535c6ec9a76ac475dfd34a52126) by beachball)
27
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250226-1850.1 ([commit](https://github.com/microsoft/fluentui/commit/7afc3ded59f38535c6ec9a76ac475dfd34a52126) by beachball)
15
+ - Bump @fluentui/keyboard-keys to v0.0.0-nightly-20250228-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b568bcc2d4a944d9c8add68f062dab3aa9017c9c) by beachball)
16
+ - Bump @fluentui/react-aria to v0.0.0-nightly-20250228-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b568bcc2d4a944d9c8add68f062dab3aa9017c9c) by beachball)
17
+ - Bump @fluentui/react-context-selector to v0.0.0-nightly-20250228-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b568bcc2d4a944d9c8add68f062dab3aa9017c9c) by beachball)
18
+ - Bump @fluentui/react-portal to v0.0.0-nightly-20250228-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b568bcc2d4a944d9c8add68f062dab3aa9017c9c) by beachball)
19
+ - Bump @fluentui/react-positioning to v0.0.0-nightly-20250228-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b568bcc2d4a944d9c8add68f062dab3aa9017c9c) by beachball)
20
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250228-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b568bcc2d4a944d9c8add68f062dab3aa9017c9c) by beachball)
21
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20250228-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b568bcc2d4a944d9c8add68f062dab3aa9017c9c) by beachball)
22
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20250228-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b568bcc2d4a944d9c8add68f062dab3aa9017c9c) by beachball)
23
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20250228-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b568bcc2d4a944d9c8add68f062dab3aa9017c9c) by beachball)
24
+ - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250228-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b568bcc2d4a944d9c8add68f062dab3aa9017c9c) by beachball)
25
+ - Bump @fluentui/react-provider to v0.0.0-nightly-20250228-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b568bcc2d4a944d9c8add68f062dab3aa9017c9c) by beachball)
26
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20250228-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b568bcc2d4a944d9c8add68f062dab3aa9017c9c) by beachball)
27
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250228-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b568bcc2d4a944d9c8add68f062dab3aa9017c9c) by beachball)
28
28
 
29
29
  ## [9.16.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.16.0)
30
30
 
package/dist/index.d.ts CHANGED
@@ -6,7 +6,6 @@ import { ARIAButtonType } from '@fluentui/react-aria';
6
6
  import type { ComponentProps } from '@fluentui/react-utilities';
7
7
  import type { ComponentState } from '@fluentui/react-utilities';
8
8
  import type { ContextSelector } from '@fluentui/react-context-selector';
9
- import type { ExtractSlotProps } from '@fluentui/react-utilities';
10
9
  import type { ForwardRefComponent } from '@fluentui/react-utilities';
11
10
  import type { PortalProps } from '@fluentui/react-portal';
12
11
  import type { PositioningShorthand } from '@fluentui/react-positioning';
@@ -172,7 +171,7 @@ export declare type MenuItemLinkSlots = {
172
171
  */
173
172
  export declare type MenuItemLinkState = ComponentState<MenuItemLinkSlots>;
174
173
 
175
- export declare type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & {
174
+ export declare type MenuItemProps = Omit<ComponentProps<Partial<MenuItemSlots>>, 'content'> & Pick<Partial<MenuItemSlots>, 'content'> & {
176
175
  /**
177
176
  * If the menu item is a trigger for a submenu
178
177
  *
@@ -231,7 +230,7 @@ export declare type MenuItemSelectableState = MenuItemSelectableProps & {
231
230
  };
232
231
 
233
232
  export declare type MenuItemSlots = {
234
- root: Slot<Omit<ExtractSlotProps<Slot<'div'>>, 'content'>>;
233
+ root: Slot<'div'>;
235
234
  /**
236
235
  * Icon slot rendered before children content
237
236
  */
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/MenuItem/MenuItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\n\nexport type MenuItemSlots = {\n root: Slot<Omit<ExtractSlotProps<Slot<'div'>>, 'content'>>;\n\n /**\n * Icon slot rendered before children content\n */\n icon?: Slot<'span'>;\n\n /**\n * A helper slot for alignment when a menu item is used with selectable menuitems\n * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components\n */\n checkmark?: Slot<'span'>;\n\n /**\n * Icon slot that shows the indicator for a submenu\n */\n submenuIndicator?: Slot<'span'>;\n\n /**\n * Component children are placed in this slot\n * Avoid using the `children` property in this slot in favour of Component children whenever possible\n */\n content?: Slot<'span'>;\n\n /**\n * Secondary content rendered opposite the primary content (e.g Shortcut text)\n */\n secondaryContent?: Slot<'span'>;\n\n /**\n * Additional descriptor to main content that creates a multiline layout\n */\n subText?: Slot<'span'>;\n};\n\nexport type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & {\n /**\n * If the menu item is a trigger for a submenu\n *\n * @default false\n */\n hasSubmenu?: boolean;\n\n /**\n * Clicking on the menu item will not dismiss an open menu\n *\n * @default false\n */\n persistOnClick?: boolean;\n\n disabled?: boolean;\n /**\n * @deprecated this property does nothing.\n * disabled focusable is by default by simply using `disabled` property\n */\n disabledFocusable?: boolean;\n};\n\nexport type MenuItemState = ComponentState<MenuItemSlots> &\n Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;\n"],"names":[],"rangeMappings":"","mappings":"AA6DA,WAC8E"}
1
+ {"version":3,"sources":["../src/components/MenuItem/MenuItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuItemSlots = {\n root: Slot<'div'>;\n\n /**\n * Icon slot rendered before children content\n */\n icon?: Slot<'span'>;\n\n /**\n * A helper slot for alignment when a menu item is used with selectable menuitems\n * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components\n */\n checkmark?: Slot<'span'>;\n\n /**\n * Icon slot that shows the indicator for a submenu\n */\n submenuIndicator?: Slot<'span'>;\n\n /**\n * Component children are placed in this slot\n * Avoid using the `children` property in this slot in favour of Component children whenever possible\n */\n content?: Slot<'span'>;\n\n /**\n * Secondary content rendered opposite the primary content (e.g Shortcut text)\n */\n secondaryContent?: Slot<'span'>;\n\n /**\n * Additional descriptor to main content that creates a multiline layout\n */\n subText?: Slot<'span'>;\n};\n\nexport type MenuItemProps = Omit<ComponentProps<Partial<MenuItemSlots>>, 'content'> &\n Pick<Partial<MenuItemSlots>, 'content'> & {\n /**\n * If the menu item is a trigger for a submenu\n *\n * @default false\n */\n hasSubmenu?: boolean;\n\n /**\n * Clicking on the menu item will not dismiss an open menu\n *\n * @default false\n */\n persistOnClick?: boolean;\n\n disabled?: boolean;\n /**\n * @deprecated this property does nothing.\n * disabled focusable is by default by simply using `disabled` property\n */\n disabledFocusable?: boolean;\n };\n\nexport type MenuItemState = ComponentState<MenuItemSlots> &\n Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;\n"],"names":[],"rangeMappings":"","mappings":"AA8DA,WAC8E"}
@@ -16,7 +16,7 @@ const ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
16
16
  */ export const useMenuItem_unstable = (props, ref)=>{
17
17
  const isSubmenuTrigger = useMenuTriggerContext_unstable();
18
18
  const persistOnClickContext = useMenuContext_unstable((context)=>context.persistOnItemClick);
19
- const { disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext, content, ...rest } = props;
19
+ const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = props;
20
20
  const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({
21
21
  hasSubmenu
22
22
  });
@@ -41,9 +41,9 @@ const ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
41
41
  secondaryContent: 'span',
42
42
  subText: 'span'
43
43
  },
44
- root: slot.always(getIntrinsicElementProps('div', useARIAButtonProps('div', {
44
+ root: slot.always(getIntrinsicElementProps(as, useARIAButtonProps(as, {
45
45
  role: 'menuitem',
46
- ...rest,
46
+ ...props,
47
47
  disabled: false,
48
48
  disabledFocusable: disabled,
49
49
  ref: useMergedRefs(ref, innerRef),
@@ -1 +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 { ARIAButtonElement, ARIAButtonElementIntersection, useARIAButtonProps } 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 disabled = false,\n hasSubmenu = isSubmenuTrigger,\n persistOnClick = persistOnClickContext,\n content,\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<MenuItemProps>(\n 'div',\n useARIAButtonProps('div', {\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","disabled","hasSubmenu","persistOnClick","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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"}
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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"}
@@ -24,7 +24,6 @@ import { useMenuItem_unstable } from '../MenuItem/useMenuItem';
24
24
  return {
25
25
  ...baseState,
26
26
  components: {
27
- // eslint-disable-next-line @typescript-eslint/no-deprecated
28
27
  ...baseState.components,
29
28
  root: 'a'
30
29
  },
@@ -1 +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 // 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"}
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"}
@@ -25,7 +25,6 @@ import { circleFilledClassName } from './useMenuItemSwitchStyles.styles';
25
25
  }
26
26
  }),
27
27
  components: {
28
- // eslint-disable-next-line @typescript-eslint/no-deprecated
29
28
  ...baseState.components,
30
29
  switchIndicator: 'span'
31
30
  }
@@ -1 +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 // 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"}
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"}
@@ -85,7 +85,6 @@ export const useMenuItemSwitchStyles_unstable = state => {
85
85
  useMenuItemStyles_unstable({
86
86
  ...state,
87
87
  components: {
88
- // eslint-disable-next-line @typescript-eslint/no-deprecated
89
88
  ...state.components,
90
89
  checkmark: 'span',
91
90
  submenuIndicator: 'span'
@@ -1 +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 // 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":[]}
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":[]}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/MenuItem/MenuItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\n\nexport type MenuItemSlots = {\n root: Slot<Omit<ExtractSlotProps<Slot<'div'>>, 'content'>>;\n\n /**\n * Icon slot rendered before children content\n */\n icon?: Slot<'span'>;\n\n /**\n * A helper slot for alignment when a menu item is used with selectable menuitems\n * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components\n */\n checkmark?: Slot<'span'>;\n\n /**\n * Icon slot that shows the indicator for a submenu\n */\n submenuIndicator?: Slot<'span'>;\n\n /**\n * Component children are placed in this slot\n * Avoid using the `children` property in this slot in favour of Component children whenever possible\n */\n content?: Slot<'span'>;\n\n /**\n * Secondary content rendered opposite the primary content (e.g Shortcut text)\n */\n secondaryContent?: Slot<'span'>;\n\n /**\n * Additional descriptor to main content that creates a multiline layout\n */\n subText?: Slot<'span'>;\n};\n\nexport type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & {\n /**\n * If the menu item is a trigger for a submenu\n *\n * @default false\n */\n hasSubmenu?: boolean;\n\n /**\n * Clicking on the menu item will not dismiss an open menu\n *\n * @default false\n */\n persistOnClick?: boolean;\n\n disabled?: boolean;\n /**\n * @deprecated this property does nothing.\n * disabled focusable is by default by simply using `disabled` property\n */\n disabledFocusable?: boolean;\n};\n\nexport type MenuItemState = ComponentState<MenuItemSlots> &\n Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;\n"],"names":[],"rangeMappings":"","mappings":""}
1
+ {"version":3,"sources":["../src/components/MenuItem/MenuItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuItemSlots = {\n root: Slot<'div'>;\n\n /**\n * Icon slot rendered before children content\n */\n icon?: Slot<'span'>;\n\n /**\n * A helper slot for alignment when a menu item is used with selectable menuitems\n * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components\n */\n checkmark?: Slot<'span'>;\n\n /**\n * Icon slot that shows the indicator for a submenu\n */\n submenuIndicator?: Slot<'span'>;\n\n /**\n * Component children are placed in this slot\n * Avoid using the `children` property in this slot in favour of Component children whenever possible\n */\n content?: Slot<'span'>;\n\n /**\n * Secondary content rendered opposite the primary content (e.g Shortcut text)\n */\n secondaryContent?: Slot<'span'>;\n\n /**\n * Additional descriptor to main content that creates a multiline layout\n */\n subText?: Slot<'span'>;\n};\n\nexport type MenuItemProps = Omit<ComponentProps<Partial<MenuItemSlots>>, 'content'> &\n Pick<Partial<MenuItemSlots>, 'content'> & {\n /**\n * If the menu item is a trigger for a submenu\n *\n * @default false\n */\n hasSubmenu?: boolean;\n\n /**\n * Clicking on the menu item will not dismiss an open menu\n *\n * @default false\n */\n persistOnClick?: boolean;\n\n disabled?: boolean;\n /**\n * @deprecated this property does nothing.\n * disabled focusable is by default by simply using `disabled` property\n */\n disabledFocusable?: boolean;\n };\n\nexport type MenuItemState = ComponentState<MenuItemSlots> &\n Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;\n"],"names":[],"rangeMappings":"","mappings":""}
@@ -25,7 +25,7 @@ const ChevronLeftIcon = (0, _reacticons.bundleIcon)(_reacticons.ChevronLeftFille
25
25
  const useMenuItem_unstable = (props, ref)=>{
26
26
  const isSubmenuTrigger = (0, _menuTriggerContext.useMenuTriggerContext_unstable)();
27
27
  const persistOnClickContext = (0, _menuContext.useMenuContext_unstable)((context)=>context.persistOnItemClick);
28
- const { disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext, content, ...rest } = props;
28
+ const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = props;
29
29
  const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({
30
30
  hasSubmenu
31
31
  });
@@ -50,9 +50,9 @@ const useMenuItem_unstable = (props, ref)=>{
50
50
  secondaryContent: 'span',
51
51
  subText: 'span'
52
52
  },
53
- root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', (0, _reactaria.useARIAButtonProps)('div', {
53
+ root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(as, (0, _reactaria.useARIAButtonProps)(as, {
54
54
  role: 'menuitem',
55
- ...rest,
55
+ ...props,
56
56
  disabled: false,
57
57
  disabledFocusable: disabled,
58
58
  ref: (0, _reactutilities.useMergedRefs)(ref, innerRef),
@@ -1 +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 { ARIAButtonElement, ARIAButtonElementIntersection, useARIAButtonProps } 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 disabled = false,\n hasSubmenu = isSubmenuTrigger,\n persistOnClick = persistOnClickContext,\n content,\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<MenuItemProps>(\n 'div',\n useARIAButtonProps('div', {\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","disabled","hasSubmenu","persistOnClick","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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"}
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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"}
@@ -27,7 +27,6 @@ const useMenuItemLink_unstable = (props, ref)=>{
27
27
  return {
28
28
  ...baseState,
29
29
  components: {
30
- // eslint-disable-next-line @typescript-eslint/no-deprecated
31
30
  ...baseState.components,
32
31
  root: 'a'
33
32
  },
@@ -1 +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 // 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"}
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"}
@@ -28,7 +28,6 @@ const useMenuItemSwitch_unstable = (props, ref)=>{
28
28
  }
29
29
  }),
30
30
  components: {
31
- // eslint-disable-next-line @typescript-eslint/no-deprecated
32
31
  ...baseState.components,
33
32
  switchIndicator: 'span'
34
33
  }
@@ -1 +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 // 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"}
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"}
@@ -157,7 +157,6 @@ const useMenuItemSwitchStyles_unstable = (state)=>{
157
157
  (0, _useMenuItemStylesstyles.useMenuItemStyles_unstable)({
158
158
  ...state,
159
159
  components: {
160
- // eslint-disable-next-line @typescript-eslint/no-deprecated
161
160
  ...state.components,
162
161
  checkmark: 'span',
163
162
  submenuIndicator: 'span'
@@ -1 +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 // 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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"}
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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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-menu",
3
- "version": "0.0.0-nightly-20250226-1850.1",
3
+ "version": "0.0.0-nightly-20250228-0406.1",
4
4
  "description": "Fluent UI menu component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -12,25 +12,25 @@
12
12
  },
13
13
  "license": "MIT",
14
14
  "devDependencies": {
15
- "@fluentui/react-provider": "0.0.0-nightly-20250226-1850.1",
15
+ "@fluentui/react-provider": "0.0.0-nightly-20250228-0406.1",
16
16
  "@fluentui/eslint-plugin": "*",
17
- "@fluentui/react-conformance": "0.0.0-nightly-20250226-1850.1",
18
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250226-1850.1",
17
+ "@fluentui/react-conformance": "0.0.0-nightly-20250228-0406.1",
18
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250228-0406.1",
19
19
  "@fluentui/scripts-api-extractor": "*",
20
20
  "@fluentui/scripts-cypress": "*"
21
21
  },
22
22
  "dependencies": {
23
- "@fluentui/keyboard-keys": "0.0.0-nightly-20250226-1850.1",
24
- "@fluentui/react-aria": "0.0.0-nightly-20250226-1850.1",
25
- "@fluentui/react-context-selector": "0.0.0-nightly-20250226-1850.1",
23
+ "@fluentui/keyboard-keys": "0.0.0-nightly-20250228-0406.1",
24
+ "@fluentui/react-aria": "0.0.0-nightly-20250228-0406.1",
25
+ "@fluentui/react-context-selector": "0.0.0-nightly-20250228-0406.1",
26
26
  "@fluentui/react-icons": "^2.0.245",
27
- "@fluentui/react-portal": "0.0.0-nightly-20250226-1850.1",
28
- "@fluentui/react-positioning": "0.0.0-nightly-20250226-1850.1",
29
- "@fluentui/react-shared-contexts": "0.0.0-nightly-20250226-1850.1",
30
- "@fluentui/react-tabster": "0.0.0-nightly-20250226-1850.1",
31
- "@fluentui/react-theme": "0.0.0-nightly-20250226-1850.1",
32
- "@fluentui/react-utilities": "0.0.0-nightly-20250226-1850.1",
33
- "@fluentui/react-jsx-runtime": "0.0.0-nightly-20250226-1850.1",
27
+ "@fluentui/react-portal": "0.0.0-nightly-20250228-0406.1",
28
+ "@fluentui/react-positioning": "0.0.0-nightly-20250228-0406.1",
29
+ "@fluentui/react-shared-contexts": "0.0.0-nightly-20250228-0406.1",
30
+ "@fluentui/react-tabster": "0.0.0-nightly-20250228-0406.1",
31
+ "@fluentui/react-theme": "0.0.0-nightly-20250228-0406.1",
32
+ "@fluentui/react-utilities": "0.0.0-nightly-20250228-0406.1",
33
+ "@fluentui/react-jsx-runtime": "0.0.0-nightly-20250228-0406.1",
34
34
  "@griffel/react": "^1.5.22",
35
35
  "@swc/helpers": "^0.5.1"
36
36
  },