@fluentui/react-menu 0.0.0-nightly-20250702-0405.1 → 0.0.0-nightly-20250703-1103.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.
Files changed (56) hide show
  1. package/CHANGELOG.md +17 -17
  2. package/lib/components/Menu/Menu.types.js.map +1 -1
  3. package/lib/components/Menu/renderMenu.js.map +1 -1
  4. package/lib/components/MenuDivider/useMenuDividerStyles.styles.raw.js +18 -0
  5. package/lib/components/MenuDivider/useMenuDividerStyles.styles.raw.js.map +1 -0
  6. package/lib/components/MenuGroup/useMenuGroupStyles.styles.raw.js +9 -0
  7. package/lib/components/MenuGroup/useMenuGroupStyles.styles.raw.js.map +1 -0
  8. package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js +23 -0
  9. package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js.map +1 -0
  10. package/lib/components/MenuItem/useMenuItemStyles.styles.raw.js +216 -0
  11. package/lib/components/MenuItem/useMenuItemStyles.styles.raw.js.map +1 -0
  12. package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js +33 -0
  13. package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js.map +1 -0
  14. package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js +40 -0
  15. package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js.map +1 -0
  16. package/lib/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js +32 -0
  17. package/lib/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js.map +1 -0
  18. package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js +117 -0
  19. package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js.map +1 -0
  20. package/lib/components/MenuList/useMenuListStyles.styles.raw.js +22 -0
  21. package/lib/components/MenuList/useMenuListStyles.styles.raw.js.map +1 -0
  22. package/lib/components/MenuPopover/useMenuPopoverStyles.styles.raw.js +31 -0
  23. package/lib/components/MenuPopover/useMenuPopoverStyles.styles.raw.js.map +1 -0
  24. package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js +42 -0
  25. package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js.map +1 -0
  26. package/lib/components/MenuTrigger/renderMenuTrigger.js.map +1 -1
  27. package/lib/selectable/useCheckmarkStyles.styles.raw.js +24 -0
  28. package/lib/selectable/useCheckmarkStyles.styles.raw.js.map +1 -0
  29. package/lib-commonjs/components/Menu/Menu.types.js.map +1 -1
  30. package/lib-commonjs/components/Menu/renderMenu.js.map +1 -1
  31. package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.raw.js +36 -0
  32. package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.raw.js.map +1 -0
  33. package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.styles.raw.js +27 -0
  34. package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.styles.raw.js.map +1 -0
  35. package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js +41 -0
  36. package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js.map +1 -0
  37. package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.raw.js +234 -0
  38. package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.raw.js.map +1 -0
  39. package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js +51 -0
  40. package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js.map +1 -0
  41. package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js +56 -0
  42. package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js.map +1 -0
  43. package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js +50 -0
  44. package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js.map +1 -0
  45. package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js +136 -0
  46. package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js.map +1 -0
  47. package/lib-commonjs/components/MenuList/useMenuListStyles.styles.raw.js +38 -0
  48. package/lib-commonjs/components/MenuList/useMenuListStyles.styles.raw.js.map +1 -0
  49. package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.raw.js +47 -0
  50. package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.raw.js.map +1 -0
  51. package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js +61 -0
  52. package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js.map +1 -0
  53. package/lib-commonjs/components/MenuTrigger/renderMenuTrigger.js.map +1 -1
  54. package/lib-commonjs/selectable/useCheckmarkStyles.styles.raw.js +30 -0
  55. package/lib-commonjs/selectable/useCheckmarkStyles.styles.raw.js.map +1 -0
  56. package/package.json +14 -14
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, 02 Jul 2025 04:21:03 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 03 Jul 2025 11:19:21 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20250702-0405.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v0.0.0-nightly-20250702-0405.1)
7
+ ## [0.0.0-nightly-20250703-1103.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v0.0.0-nightly-20250703-1103.1)
8
8
 
9
- Wed, 02 Jul 2025 04:21:03 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.17.5..@fluentui/react-menu_v0.0.0-nightly-20250702-0405.1)
9
+ Thu, 03 Jul 2025 11:19:21 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.17.5..@fluentui/react-menu_v0.0.0-nightly-20250703-1103.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-20250702-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/a2383d3a6a1adef5b96527fec7baf7bcf122da30) by beachball)
16
- - Bump @fluentui/react-aria to v0.0.0-nightly-20250702-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/a2383d3a6a1adef5b96527fec7baf7bcf122da30) by beachball)
17
- - Bump @fluentui/react-context-selector to v0.0.0-nightly-20250702-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/a2383d3a6a1adef5b96527fec7baf7bcf122da30) by beachball)
18
- - Bump @fluentui/react-portal to v0.0.0-nightly-20250702-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/a2383d3a6a1adef5b96527fec7baf7bcf122da30) by beachball)
19
- - Bump @fluentui/react-positioning to v0.0.0-nightly-20250702-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/a2383d3a6a1adef5b96527fec7baf7bcf122da30) by beachball)
20
- - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250702-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/a2383d3a6a1adef5b96527fec7baf7bcf122da30) by beachball)
21
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20250702-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/a2383d3a6a1adef5b96527fec7baf7bcf122da30) by beachball)
22
- - Bump @fluentui/react-theme to v0.0.0-nightly-20250702-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/a2383d3a6a1adef5b96527fec7baf7bcf122da30) by beachball)
23
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20250702-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/a2383d3a6a1adef5b96527fec7baf7bcf122da30) by beachball)
24
- - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250702-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/a2383d3a6a1adef5b96527fec7baf7bcf122da30) by beachball)
25
- - Bump @fluentui/react-provider to v0.0.0-nightly-20250702-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/a2383d3a6a1adef5b96527fec7baf7bcf122da30) by beachball)
26
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20250702-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/a2383d3a6a1adef5b96527fec7baf7bcf122da30) by beachball)
27
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250702-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/a2383d3a6a1adef5b96527fec7baf7bcf122da30) by beachball)
15
+ - Bump @fluentui/keyboard-keys to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
16
+ - Bump @fluentui/react-aria to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
17
+ - Bump @fluentui/react-context-selector to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
18
+ - Bump @fluentui/react-portal to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
19
+ - Bump @fluentui/react-positioning to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
20
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
21
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
22
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
23
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
24
+ - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
25
+ - Bump @fluentui/react-provider to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
26
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
27
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
28
28
 
29
29
  ## [9.17.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.17.5)
30
30
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Menu/Menu.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { PositioningVirtualElement, SetVirtualMouseTarget } from '@fluentui/react-positioning';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { MenuContextValue } from '../../contexts/menuContext';\nimport type { MenuListProps } from '../MenuList/MenuList.types';\n\nexport type MenuSlots = {};\n\n/**\n * Extends and drills down Menulist props to simplify API\n */\nexport type MenuProps = ComponentProps<MenuSlots> &\n Pick<PortalProps, 'mountNode'> &\n Pick<\n MenuListProps,\n 'checkedValues' | 'defaultCheckedValues' | 'hasCheckmarks' | 'hasIcons' | 'onCheckedValueChange'\n > & {\n /**\n * Can contain two children including `MenuTrigger` and `MenuPopover`.\n * Alternatively can only contain `MenuPopover` if using a custom `target`.\n */\n children: [JSX.Element, JSX.Element] | JSX.Element;\n\n /**\n * Sets the delay for mouse open/close for the popover one mouse enter/leave\n */\n hoverDelay?: number;\n\n /**\n * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order\n * This option is disregarded for submenus\n *\n * @default false\n */\n inline?: boolean;\n\n /**\n * Call back when the component requests to change value\n * The `open` value is used as a hint when directly controlling the component\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onOpenChange?: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;\n\n /**\n * Whether the popup is open\n *\n * @default false\n */\n open?: boolean;\n\n /**\n * Whether the popup is open by default\n *\n * @default false\n */\n defaultOpen?: boolean;\n\n /**\n * Opens the menu on right click (context menu), removes all other menu open interactions\n *\n * @default false\n */\n openOnContext?: boolean;\n\n /**\n * Opens the menu on hover\n *\n * @default false\n */\n openOnHover?: boolean;\n\n /**\n * Do not dismiss the menu when a menu item is clicked\n *\n * @default false\n */\n persistOnItemClick?: boolean;\n\n /**\n * Configures the positioned menu\n */\n positioning?: PositioningShorthand;\n\n /**\n * Close when scroll outside of it\n *\n * @default false\n */\n closeOnScroll?: boolean;\n };\n\nexport type MenuState = ComponentState<MenuSlots> &\n Required<\n Pick<\n MenuProps,\n | 'hasCheckmarks'\n | 'hasIcons'\n | 'mountNode'\n | 'inline'\n | 'checkedValues'\n | 'onCheckedValueChange'\n | 'open'\n | 'openOnHover'\n | 'closeOnScroll'\n | 'hoverDelay'\n | 'openOnContext'\n | 'persistOnItemClick'\n >\n > & {\n /**\n * Anchors the popper to the mouse click for context events\n */\n contextTarget?: PositioningVirtualElement;\n\n /**\n * Whether this menu is a submenu\n */\n isSubmenu: boolean;\n\n /**\n * Internal react node that just simplifies handling children\n */\n menuPopover: React.ReactNode;\n\n /**\n * The ref for the popup\n */\n menuPopoverRef: React.MutableRefObject<HTMLElement>;\n\n /**\n * Internal react node that just simplifies handling children\n */\n menuTrigger: React.ReactNode;\n\n /**\n * A callback to set the target of the popper to the mouse click for context events\n */\n setContextTarget: SetVirtualMouseTarget;\n\n /**\n * Callback to open/close the popup\n */\n setOpen: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;\n\n /**\n * Id for the MenuTrigger element for aria relationship\n */\n triggerId: string;\n\n /**\n * The ref for the MenuTrigger, used for popup positioning\n */\n triggerRef: React.MutableRefObject<HTMLElement>;\n\n /**\n * Call back when the component requests to change value\n * The `open` value is used as a hint when directly controlling the component\n * @deprecated this property is not used internally anymore,\n * the signature remains just to avoid breaking changes\n */\n onOpenChange?: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;\n /**\n * Default values to be checked on mount\n @deprecated this property is not used internally anymore,\n * the signature remains just to avoid breaking changes\n */\n defaultCheckedValues?: Record<string, string[]>;\n };\n\nexport type MenuContextValues = {\n menu: MenuContextValue;\n};\n\n/**\n * The supported events that will trigger open/close of the menu\n */\nexport type MenuOpenEvent = MenuOpenChangeData['event'];\n/**\n * @deprecated use MenuOpenEvent instead\n */\nexport type MenuOpenEvents = MenuOpenEvent;\n\n/**\n * Data attached to open/close events\n */\nexport type MenuOpenChangeData = {\n /**\n * indicates whether the request for the open state was bubbled from a nested menu\n */\n bubble?: boolean;\n /**\n * Indicates whether the change of state was a keyboard interaction\n * @deprecated\n * This should not be used, since `Enter`, `Space` and click should be interpreted as the same thing as a click\n */\n keyboard?: boolean;\n open: boolean;\n} & (\n | {\n type: 'menuTriggerContextMenu';\n event: React.MouseEvent<HTMLElement>;\n }\n | {\n type: 'menuTriggerClick';\n event: React.MouseEvent<HTMLElement>;\n }\n | {\n type: 'menuTriggerMouseEnter';\n event: React.MouseEvent<HTMLElement>;\n }\n | {\n type: 'menuTriggerMouseLeave';\n event: React.MouseEvent<HTMLElement>;\n }\n | {\n type: 'menuTriggerMouseMove';\n event: React.MouseEvent<HTMLElement>;\n }\n | {\n type: 'menuTriggerKeyDown';\n event: React.KeyboardEvent<HTMLElement>;\n }\n | {\n type: 'menuItemClick';\n event: React.MouseEvent<HTMLElement>;\n }\n | {\n type: 'menuPopoverMouseEnter';\n event: React.MouseEvent<HTMLElement>;\n }\n | {\n type: 'menuPopoverKeyDown';\n event: React.KeyboardEvent<HTMLElement>;\n }\n | {\n type: 'clickOutside';\n event: MouseEvent | TouchEvent;\n }\n | {\n type: 'scrollOutside';\n event: MouseEvent | TouchEvent;\n }\n | {\n type: 'menuMouseEnter';\n event: MouseEvent | TouchEvent;\n }\n);\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
1
+ {"version":3,"sources":["../src/components/Menu/Menu.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { PositioningVirtualElement, SetVirtualMouseTarget } from '@fluentui/react-positioning';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { MenuContextValue } from '../../contexts/menuContext';\nimport type { MenuListProps } from '../MenuList/MenuList.types';\n\nexport type MenuSlots = {};\n\n/**\n * Extends and drills down Menulist props to simplify API\n */\nexport type MenuProps = ComponentProps<MenuSlots> &\n Pick<PortalProps, 'mountNode'> &\n Pick<\n MenuListProps,\n 'checkedValues' | 'defaultCheckedValues' | 'hasCheckmarks' | 'hasIcons' | 'onCheckedValueChange'\n > & {\n /**\n * Can contain two children including `MenuTrigger` and `MenuPopover`.\n * Alternatively can only contain `MenuPopover` if using a custom `target`.\n */\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n children: [JSX.Element, JSX.Element] | JSX.Element;\n\n /**\n * Sets the delay for mouse open/close for the popover one mouse enter/leave\n */\n hoverDelay?: number;\n\n /**\n * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order\n * This option is disregarded for submenus\n *\n * @default false\n */\n inline?: boolean;\n\n /**\n * Call back when the component requests to change value\n * The `open` value is used as a hint when directly controlling the component\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onOpenChange?: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;\n\n /**\n * Whether the popup is open\n *\n * @default false\n */\n open?: boolean;\n\n /**\n * Whether the popup is open by default\n *\n * @default false\n */\n defaultOpen?: boolean;\n\n /**\n * Opens the menu on right click (context menu), removes all other menu open interactions\n *\n * @default false\n */\n openOnContext?: boolean;\n\n /**\n * Opens the menu on hover\n *\n * @default false\n */\n openOnHover?: boolean;\n\n /**\n * Do not dismiss the menu when a menu item is clicked\n *\n * @default false\n */\n persistOnItemClick?: boolean;\n\n /**\n * Configures the positioned menu\n */\n positioning?: PositioningShorthand;\n\n /**\n * Close when scroll outside of it\n *\n * @default false\n */\n closeOnScroll?: boolean;\n };\n\nexport type MenuState = ComponentState<MenuSlots> &\n Required<\n Pick<\n MenuProps,\n | 'hasCheckmarks'\n | 'hasIcons'\n | 'mountNode'\n | 'inline'\n | 'checkedValues'\n | 'onCheckedValueChange'\n | 'open'\n | 'openOnHover'\n | 'closeOnScroll'\n | 'hoverDelay'\n | 'openOnContext'\n | 'persistOnItemClick'\n >\n > & {\n /**\n * Anchors the popper to the mouse click for context events\n */\n contextTarget?: PositioningVirtualElement;\n\n /**\n * Whether this menu is a submenu\n */\n isSubmenu: boolean;\n\n /**\n * Internal react node that just simplifies handling children\n */\n menuPopover: React.ReactNode;\n\n /**\n * The ref for the popup\n */\n menuPopoverRef: React.MutableRefObject<HTMLElement>;\n\n /**\n * Internal react node that just simplifies handling children\n */\n menuTrigger: React.ReactNode;\n\n /**\n * A callback to set the target of the popper to the mouse click for context events\n */\n setContextTarget: SetVirtualMouseTarget;\n\n /**\n * Callback to open/close the popup\n */\n setOpen: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;\n\n /**\n * Id for the MenuTrigger element for aria relationship\n */\n triggerId: string;\n\n /**\n * The ref for the MenuTrigger, used for popup positioning\n */\n triggerRef: React.MutableRefObject<HTMLElement>;\n\n /**\n * Call back when the component requests to change value\n * The `open` value is used as a hint when directly controlling the component\n * @deprecated this property is not used internally anymore,\n * the signature remains just to avoid breaking changes\n */\n onOpenChange?: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;\n /**\n * Default values to be checked on mount\n @deprecated this property is not used internally anymore,\n * the signature remains just to avoid breaking changes\n */\n defaultCheckedValues?: Record<string, string[]>;\n };\n\nexport type MenuContextValues = {\n menu: MenuContextValue;\n};\n\n/**\n * The supported events that will trigger open/close of the menu\n */\nexport type MenuOpenEvent = MenuOpenChangeData['event'];\n/**\n * @deprecated use MenuOpenEvent instead\n */\nexport type MenuOpenEvents = MenuOpenEvent;\n\n/**\n * Data attached to open/close events\n */\nexport type MenuOpenChangeData = {\n /**\n * indicates whether the request for the open state was bubbled from a nested menu\n */\n bubble?: boolean;\n /**\n * Indicates whether the change of state was a keyboard interaction\n * @deprecated\n * This should not be used, since `Enter`, `Space` and click should be interpreted as the same thing as a click\n */\n keyboard?: boolean;\n open: boolean;\n} & (\n | {\n type: 'menuTriggerContextMenu';\n event: React.MouseEvent<HTMLElement>;\n }\n | {\n type: 'menuTriggerClick';\n event: React.MouseEvent<HTMLElement>;\n }\n | {\n type: 'menuTriggerMouseEnter';\n event: React.MouseEvent<HTMLElement>;\n }\n | {\n type: 'menuTriggerMouseLeave';\n event: React.MouseEvent<HTMLElement>;\n }\n | {\n type: 'menuTriggerMouseMove';\n event: React.MouseEvent<HTMLElement>;\n }\n | {\n type: 'menuTriggerKeyDown';\n event: React.KeyboardEvent<HTMLElement>;\n }\n | {\n type: 'menuItemClick';\n event: React.MouseEvent<HTMLElement>;\n }\n | {\n type: 'menuPopoverMouseEnter';\n event: React.MouseEvent<HTMLElement>;\n }\n | {\n type: 'menuPopoverKeyDown';\n event: React.KeyboardEvent<HTMLElement>;\n }\n | {\n type: 'clickOutside';\n event: MouseEvent | TouchEvent;\n }\n | {\n type: 'scrollOutside';\n event: MouseEvent | TouchEvent;\n }\n | {\n type: 'menuMouseEnter';\n event: MouseEvent | TouchEvent;\n }\n);\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Menu/renderMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MenuProvider } from '../../contexts/menuContext';\nimport type { MenuContextValues, MenuState } from './Menu.types';\n\n/**\n * Render the final JSX of Menu\n */\nexport const renderMenu_unstable = (state: MenuState, contextValues: MenuContextValues) => {\n return (\n <MenuProvider value={contextValues.menu}>\n {state.menuTrigger}\n {state.open && state.menuPopover}\n </MenuProvider>\n );\n};\n"],"names":["React","MenuProvider","renderMenu_unstable","state","contextValues","value","menu","menuTrigger","open","menuPopover"],"rangeMappings":";;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,6BAA6B;AAG1D;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC;IACpD,qBACE,oBAACH;QAAaI,OAAOD,cAAcE,IAAI;OACpCH,MAAMI,WAAW,EACjBJ,MAAMK,IAAI,IAAIL,MAAMM,WAAW;AAGtC,EAAE"}
1
+ {"version":3,"sources":["../src/components/Menu/renderMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MenuProvider } from '../../contexts/menuContext';\nimport type { MenuContextValues, MenuState } from './Menu.types';\n\n/**\n * Render the final JSX of Menu\n */\nexport const renderMenu_unstable = (\n state: MenuState,\n contextValues: MenuContextValues,\n): // eslint-disable-next-line @typescript-eslint/no-deprecated\nJSX.Element => {\n return (\n <MenuProvider value={contextValues.menu}>\n {state.menuTrigger}\n {state.open && state.menuPopover}\n </MenuProvider>\n );\n};\n"],"names":["React","MenuProvider","renderMenu_unstable","state","contextValues","value","menu","menuTrigger","open","menuPopover"],"rangeMappings":";;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,6BAA6B;AAG1D;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CACjCC,OACAC;IAGA,qBACE,oBAACH;QAAaI,OAAOD,cAAcE,IAAI;OACpCH,MAAMI,WAAW,EACjBJ,MAAMK,IAAI,IAAIL,MAAMM,WAAW;AAGtC,EAAE"}
@@ -0,0 +1,18 @@
1
+ import { mergeClasses, makeStyles } from '@griffel/react';
2
+ import { tokens } from '@fluentui/react-theme';
3
+ export const menuDividerClassNames = {
4
+ root: 'fui-MenuDivider'
5
+ };
6
+ const useStyles = makeStyles({
7
+ root: {
8
+ margin: '4px -5px 4px -5px',
9
+ width: 'auto',
10
+ borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`
11
+ }
12
+ });
13
+ export const useMenuDividerStyles_unstable = (state)=>{
14
+ 'use no memo';
15
+ const styles = useStyles();
16
+ state.root.className = mergeClasses(menuDividerClassNames.root, styles.root, state.root.className);
17
+ return state;
18
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/MenuDivider/useMenuDividerStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuDividerClassNames: SlotClassNames<MenuDividerSlots> = {\n root: 'fui-MenuDivider',\n};\n\nconst useStyles = makeStyles({\n root: {\n margin: '4px -5px 4px -5px',\n width: 'auto',\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n },\n});\n\nexport const useMenuDividerStyles_unstable = (state: MenuDividerState) => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(menuDividerClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["mergeClasses","makeStyles","tokens","menuDividerClassNames","root","useStyles","margin","width","borderBottom","strokeWidthThin","colorNeutralStroke2","useMenuDividerStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,QAAQ;QACRC,OAAO;QACPC,cAAc,CAAC,EAAEN,OAAOO,eAAe,CAAC,OAAO,EAAEP,OAAOQ,mBAAmB,CAAC,CAAC;IAC/E;AACF;AAEA,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASR;IACfO,MAAMR,IAAI,CAACU,SAAS,GAAGd,aAAaG,sBAAsBC,IAAI,EAAES,OAAOT,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IAEjG,OAAOF;AACT,EAAE"}
@@ -0,0 +1,9 @@
1
+ import { mergeClasses } from '@griffel/react';
2
+ export const menuGroupClassNames = {
3
+ root: 'fui-MenuGroup'
4
+ };
5
+ export const useMenuGroupStyles_unstable = (state)=>{
6
+ 'use no memo';
7
+ state.root.className = mergeClasses(menuGroupClassNames.root, state.root.className);
8
+ return state;
9
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/MenuGroup/useMenuGroupStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { MenuGroupSlots, MenuGroupState } from './MenuGroup.types';\n\nexport const menuGroupClassNames: SlotClassNames<MenuGroupSlots> = {\n root: 'fui-MenuGroup',\n};\n\nexport const useMenuGroupStyles_unstable = (state: MenuGroupState): MenuGroupState => {\n 'use no memo';\n\n state.root.className = mergeClasses(menuGroupClassNames.root, state.root.className);\n\n return state;\n};\n"],"names":["mergeClasses","menuGroupClassNames","root","useMenuGroupStyles_unstable","state","className"],"rangeMappings":";;;;;;;;","mappings":"AACA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,OAAO,MAAMC,sBAAsD;IACjEC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,8BAA8B,CAACC;IAC1C;IAEAA,MAAMF,IAAI,CAACG,SAAS,GAAGL,aAAaC,oBAAoBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAElF,OAAOD;AACT,EAAE"}
@@ -0,0 +1,23 @@
1
+ import { mergeClasses, makeStyles } from '@griffel/react';
2
+ import { tokens } from '@fluentui/react-theme';
3
+ export const menuGroupHeaderClassNames = {
4
+ root: 'fui-MenuGroupHeader'
5
+ };
6
+ const useStyles = makeStyles({
7
+ root: {
8
+ fontSize: tokens.fontSizeBase200,
9
+ color: tokens.colorNeutralForeground3,
10
+ paddingLeft: '8px',
11
+ paddingRight: '8px',
12
+ fontWeight: tokens.fontWeightSemibold,
13
+ height: '32px',
14
+ display: 'flex',
15
+ alignItems: 'center'
16
+ }
17
+ });
18
+ export const useMenuGroupHeaderStyles_unstable = (state)=>{
19
+ 'use no memo';
20
+ const styles = useStyles();
21
+ state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);
22
+ return state;
23
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots> = {\n root: 'fui-MenuGroupHeader',\n};\n\nconst useStyles = makeStyles({\n root: {\n fontSize: tokens.fontSizeBase200,\n color: tokens.colorNeutralForeground3,\n paddingLeft: '8px',\n paddingRight: '8px',\n fontWeight: tokens.fontWeightSemibold,\n height: '32px',\n display: 'flex',\n alignItems: 'center',\n },\n});\n\nexport const useMenuGroupHeaderStyles_unstable = (state: MenuGroupHeaderState) => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["mergeClasses","makeStyles","tokens","menuGroupHeaderClassNames","root","useStyles","fontSize","fontSizeBase200","color","colorNeutralForeground3","paddingLeft","paddingRight","fontWeight","fontWeightSemibold","height","display","alignItems","useMenuGroupHeaderStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,UAAUJ,OAAOK,eAAe;QAChCC,OAAON,OAAOO,uBAAuB;QACrCC,aAAa;QACbC,cAAc;QACdC,YAAYV,OAAOW,kBAAkB;QACrCC,QAAQ;QACRC,SAAS;QACTC,YAAY;IACd;AACF;AAEA,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,SAASd;IACfa,MAAMd,IAAI,CAACgB,SAAS,GAAGpB,aAAaG,0BAA0BC,IAAI,EAAEe,OAAOf,IAAI,EAAEc,MAAMd,IAAI,CAACgB,SAAS;IAErG,OAAOF;AACT,EAAE"}
@@ -0,0 +1,216 @@
1
+ import { mergeClasses, makeStyles, makeResetStyles } from '@griffel/react';
2
+ import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
3
+ import { createFocusOutlineStyle } from '@fluentui/react-tabster';
4
+ import { tokens, typographyStyles } from '@fluentui/react-theme';
5
+ import { useCheckmarkStyles_unstable } from '../../selectable/index';
6
+ export const menuItemClassNames = {
7
+ root: 'fui-MenuItem',
8
+ icon: 'fui-MenuItem__icon',
9
+ checkmark: 'fui-MenuItem__checkmark',
10
+ submenuIndicator: 'fui-MenuItem__submenuIndicator',
11
+ content: 'fui-MenuItem__content',
12
+ secondaryContent: 'fui-MenuItem__secondaryContent',
13
+ subText: 'fui-MenuItem__subText'
14
+ };
15
+ const useRootBaseStyles = makeResetStyles({
16
+ borderRadius: tokens.borderRadiusMedium,
17
+ position: 'relative',
18
+ color: tokens.colorNeutralForeground2,
19
+ backgroundColor: tokens.colorNeutralBackground1,
20
+ paddingRight: tokens.spacingVerticalSNudge,
21
+ paddingLeft: tokens.spacingVerticalSNudge,
22
+ paddingTop: tokens.spacingVerticalSNudge,
23
+ paddingBottom: tokens.spacingVerticalSNudge,
24
+ boxSizing: 'border-box',
25
+ maxWidth: '290px',
26
+ minHeight: '32px',
27
+ flexShrink: 0,
28
+ display: 'flex',
29
+ alignItems: 'start',
30
+ fontSize: tokens.fontSizeBase300,
31
+ cursor: 'pointer',
32
+ gap: '4px',
33
+ ':hover': {
34
+ backgroundColor: tokens.colorNeutralBackground1Hover,
35
+ color: tokens.colorNeutralForeground2Hover,
36
+ [`& .${iconFilledClassName}`]: {
37
+ display: 'inline'
38
+ },
39
+ [`& .${iconRegularClassName}`]: {
40
+ display: 'none'
41
+ },
42
+ [`& .${menuItemClassNames.icon}`]: {
43
+ color: tokens.colorNeutralForeground2BrandSelected
44
+ },
45
+ [`& .${menuItemClassNames.subText}`]: {
46
+ color: tokens.colorNeutralForeground3Hover
47
+ }
48
+ },
49
+ ':hover:active': {
50
+ backgroundColor: tokens.colorNeutralBackground1Pressed,
51
+ color: tokens.colorNeutralForeground2Pressed,
52
+ [`& .${menuItemClassNames.subText}`]: {
53
+ color: tokens.colorNeutralForeground3Pressed
54
+ }
55
+ },
56
+ // High contrast styles
57
+ '@media (forced-colors: active)': {
58
+ ':hover': {
59
+ backgroundColor: 'Canvas',
60
+ borderColor: 'Highlight',
61
+ color: 'Highlight'
62
+ },
63
+ ...createFocusOutlineStyle({
64
+ style: {
65
+ outlineColor: 'Highlight'
66
+ }
67
+ })
68
+ },
69
+ userSelect: 'none',
70
+ ...createFocusOutlineStyle()
71
+ });
72
+ const useContentBaseStyles = makeResetStyles({
73
+ paddingLeft: '2px',
74
+ paddingRight: '2px',
75
+ backgroundColor: 'transparent',
76
+ flexGrow: 1
77
+ });
78
+ const useSecondaryContentBaseStyles = makeResetStyles({
79
+ paddingLeft: '2px',
80
+ paddingRight: '2px',
81
+ ...typographyStyles.caption1,
82
+ lineHeight: tokens.lineHeightBase300,
83
+ color: tokens.colorNeutralForeground3,
84
+ ':hover': {
85
+ color: tokens.colorNeutralForeground3Hover
86
+ },
87
+ ':focus': {
88
+ color: tokens.colorNeutralForeground3Hover
89
+ }
90
+ });
91
+ const useIconBaseStyles = makeResetStyles({
92
+ width: '20px',
93
+ height: '20px',
94
+ fontSize: '20px',
95
+ lineHeight: 0,
96
+ alignItems: 'center',
97
+ display: 'inline-flex',
98
+ justifyContent: 'center',
99
+ flexShrink: 0
100
+ });
101
+ const useSubmenuIndicatorBaseStyles = makeResetStyles({
102
+ width: '20px',
103
+ height: '20px',
104
+ fontSize: '20px',
105
+ lineHeight: 0,
106
+ alignItems: 'center',
107
+ display: 'inline-flex',
108
+ justifyContent: 'center'
109
+ });
110
+ const useSubtextBaseStyles = makeResetStyles({
111
+ ...typographyStyles.caption2,
112
+ color: tokens.colorNeutralForeground3
113
+ });
114
+ const useStyles = makeStyles({
115
+ checkmark: {
116
+ marginTop: '2px'
117
+ },
118
+ splitItemMain: {
119
+ flexGrow: 1
120
+ },
121
+ splitItemTrigger: {
122
+ borderTopLeftRadius: 0,
123
+ borderBottomLeftRadius: 0,
124
+ paddingLeft: 0,
125
+ '::before': {
126
+ content: '""',
127
+ width: tokens.strokeWidthThin,
128
+ height: '24px',
129
+ backgroundColor: tokens.colorNeutralStroke1
130
+ }
131
+ },
132
+ disabled: {
133
+ color: tokens.colorNeutralForegroundDisabled,
134
+ ':hover': {
135
+ color: tokens.colorNeutralForegroundDisabled,
136
+ backgroundColor: tokens.colorNeutralBackground1,
137
+ cursor: 'not-allowed',
138
+ [`& .${iconFilledClassName}`]: {
139
+ display: 'none'
140
+ },
141
+ [`& .${iconRegularClassName}`]: {
142
+ display: 'inline'
143
+ },
144
+ [`& .${menuItemClassNames.icon}`]: {
145
+ color: tokens.colorNeutralForegroundDisabled
146
+ }
147
+ },
148
+ ':hover:active': {
149
+ color: tokens.colorNeutralForegroundDisabled,
150
+ backgroundColor: tokens.colorNeutralBackground1
151
+ },
152
+ ':focus': {
153
+ color: tokens.colorNeutralForegroundDisabled
154
+ },
155
+ '@media (forced-colors: active)': {
156
+ color: 'GrayText',
157
+ ':hover': {
158
+ color: 'GrayText',
159
+ backgroundColor: 'Canvas',
160
+ [`& .${menuItemClassNames.icon}`]: {
161
+ color: 'GrayText',
162
+ backgroundColor: 'Canvas'
163
+ }
164
+ },
165
+ ':focus': {
166
+ color: 'GrayText',
167
+ backgroundColor: 'Canvas'
168
+ }
169
+ }
170
+ }
171
+ });
172
+ const useMultilineStyles = makeStyles({
173
+ content: {
174
+ display: 'flex',
175
+ flexDirection: 'column'
176
+ },
177
+ secondaryContent: {
178
+ alignSelf: 'center'
179
+ },
180
+ submenuIndicator: {
181
+ alignSelf: 'center'
182
+ }
183
+ });
184
+ /** Applies style classnames to slots */ export const useMenuItemStyles_unstable = (state)=>{
185
+ 'use no memo';
186
+ const styles = useStyles();
187
+ const rootBaseStyles = useRootBaseStyles();
188
+ const contentBaseStyles = useContentBaseStyles();
189
+ const secondaryContentBaseStyles = useSecondaryContentBaseStyles();
190
+ const iconBaseStyles = useIconBaseStyles();
191
+ const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();
192
+ const multilineStyles = useMultilineStyles();
193
+ const subtextBaseStyles = useSubtextBaseStyles();
194
+ const multiline = !!state.subText;
195
+ state.root.className = mergeClasses(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);
196
+ if (state.content) {
197
+ state.content.className = mergeClasses(menuItemClassNames.content, contentBaseStyles, state.content.className, multiline && multilineStyles.content);
198
+ }
199
+ if (state.checkmark) {
200
+ state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);
201
+ }
202
+ if (state.secondaryContent) {
203
+ state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, !state.disabled && secondaryContentBaseStyles, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);
204
+ }
205
+ if (state.icon) {
206
+ state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);
207
+ }
208
+ if (state.submenuIndicator) {
209
+ state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className, multiline && multilineStyles.submenuIndicator);
210
+ }
211
+ if (state.subText) {
212
+ state.subText.className = mergeClasses(menuItemClassNames.subText, state.subText.className, subtextBaseStyles);
213
+ }
214
+ useCheckmarkStyles_unstable(state);
215
+ return state;
216
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/MenuItem/useMenuItemStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeStyles, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport type { MenuItemCheckboxState } from '../MenuItemCheckbox/index';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuItemClassNames: SlotClassNames<MenuItemSlots> = {\n root: 'fui-MenuItem',\n icon: 'fui-MenuItem__icon',\n checkmark: 'fui-MenuItem__checkmark',\n submenuIndicator: 'fui-MenuItem__submenuIndicator',\n content: 'fui-MenuItem__content',\n secondaryContent: 'fui-MenuItem__secondaryContent',\n subText: 'fui-MenuItem__subText',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n borderRadius: tokens.borderRadiusMedium,\n position: 'relative',\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackground1,\n paddingRight: tokens.spacingVerticalSNudge, // 6px\n paddingLeft: tokens.spacingVerticalSNudge,\n paddingTop: tokens.spacingVerticalSNudge,\n paddingBottom: tokens.spacingVerticalSNudge,\n boxSizing: 'border-box',\n maxWidth: '290px',\n minHeight: '32px',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'start',\n fontSize: tokens.fontSizeBase300,\n cursor: 'pointer',\n gap: '4px',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground2Hover,\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n [`& .${menuItemClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n\n [`& .${menuItemClassNames.subText}`]: {\n color: tokens.colorNeutralForeground3Hover,\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n\n [`& .${menuItemClassNames.subText}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n },\n },\n\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'Canvas',\n borderColor: 'Highlight',\n color: 'Highlight',\n },\n ...createFocusOutlineStyle({ style: { outlineColor: 'Highlight' } }),\n },\n\n userSelect: 'none',\n ...createFocusOutlineStyle(),\n});\n\nconst useContentBaseStyles = makeResetStyles({\n paddingLeft: '2px',\n paddingRight: '2px',\n backgroundColor: 'transparent',\n flexGrow: 1,\n});\n\nconst useSecondaryContentBaseStyles = makeResetStyles({\n paddingLeft: '2px',\n paddingRight: '2px',\n ...typographyStyles.caption1,\n lineHeight: tokens.lineHeightBase300,\n color: tokens.colorNeutralForeground3,\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n },\n ':focus': {\n color: tokens.colorNeutralForeground3Hover,\n },\n});\n\nconst useIconBaseStyles = makeResetStyles({\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n flexShrink: 0,\n});\n\nconst useSubmenuIndicatorBaseStyles = makeResetStyles({\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n});\n\nconst useSubtextBaseStyles = makeResetStyles({\n ...typographyStyles.caption2,\n color: tokens.colorNeutralForeground3,\n});\n\nconst useStyles = makeStyles({\n checkmark: {\n marginTop: '2px',\n },\n\n splitItemMain: {\n flexGrow: 1,\n },\n\n splitItemTrigger: {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n paddingLeft: 0,\n '::before': {\n content: '\"\"',\n width: tokens.strokeWidthThin,\n height: '24px',\n backgroundColor: tokens.colorNeutralStroke1,\n },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorNeutralBackground1,\n cursor: 'not-allowed',\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline',\n },\n [`& .${menuItemClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n ':hover:active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorNeutralBackground1,\n },\n\n ':focus': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n ':hover': {\n color: 'GrayText',\n backgroundColor: 'Canvas',\n [`& .${menuItemClassNames.icon}`]: {\n color: 'GrayText',\n backgroundColor: 'Canvas',\n },\n },\n ':focus': {\n color: 'GrayText',\n backgroundColor: 'Canvas',\n },\n },\n },\n});\n\nconst useMultilineStyles = makeStyles({\n content: {\n display: 'flex',\n flexDirection: 'column',\n },\n\n secondaryContent: {\n alignSelf: 'center',\n },\n\n submenuIndicator: {\n alignSelf: 'center',\n },\n});\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = (state: MenuItemState): MenuItemState => {\n 'use no memo';\n\n const styles = useStyles();\n const rootBaseStyles = useRootBaseStyles();\n const contentBaseStyles = useContentBaseStyles();\n const secondaryContentBaseStyles = useSecondaryContentBaseStyles();\n const iconBaseStyles = useIconBaseStyles();\n const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();\n const multilineStyles = useMultilineStyles();\n const subtextBaseStyles = useSubtextBaseStyles();\n const multiline = !!state.subText;\n state.root.className = mergeClasses(\n menuItemClassNames.root,\n rootBaseStyles,\n state.disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.content) {\n state.content.className = mergeClasses(\n menuItemClassNames.content,\n contentBaseStyles,\n state.content.className,\n multiline && multilineStyles.content,\n );\n }\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemClassNames.secondaryContent,\n !state.disabled && secondaryContentBaseStyles,\n state.secondaryContent.className,\n multiline && multilineStyles.secondaryContent,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);\n }\n\n if (state.submenuIndicator) {\n state.submenuIndicator.className = mergeClasses(\n menuItemClassNames.submenuIndicator,\n submenuIndicatorBaseStyles,\n state.submenuIndicator.className,\n multiline && multilineStyles.submenuIndicator,\n );\n }\n\n if (state.subText) {\n state.subText.className = mergeClasses(menuItemClassNames.subText, state.subText.className, subtextBaseStyles);\n }\n\n useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n\n return state;\n};\n"],"names":["mergeClasses","makeStyles","makeResetStyles","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","typographyStyles","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","subText","useRootBaseStyles","borderRadius","borderRadiusMedium","position","color","colorNeutralForeground2","backgroundColor","colorNeutralBackground1","paddingRight","spacingVerticalSNudge","paddingLeft","paddingTop","paddingBottom","boxSizing","maxWidth","minHeight","flexShrink","display","alignItems","fontSize","fontSizeBase300","cursor","gap","colorNeutralBackground1Hover","colorNeutralForeground2Hover","colorNeutralForeground2BrandSelected","colorNeutralForeground3Hover","colorNeutralBackground1Pressed","colorNeutralForeground2Pressed","colorNeutralForeground3Pressed","borderColor","style","outlineColor","userSelect","useContentBaseStyles","flexGrow","useSecondaryContentBaseStyles","caption1","lineHeight","lineHeightBase300","colorNeutralForeground3","useIconBaseStyles","width","height","justifyContent","useSubmenuIndicatorBaseStyles","useSubtextBaseStyles","caption2","useStyles","marginTop","splitItemMain","splitItemTrigger","borderTopLeftRadius","borderBottomLeftRadius","strokeWidthThin","colorNeutralStroke1","disabled","colorNeutralForegroundDisabled","useMultilineStyles","flexDirection","alignSelf","useMenuItemStyles_unstable","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","multilineStyles","subtextBaseStyles","multiline","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
@@ -0,0 +1,33 @@
1
+ import { mergeClasses } from '@griffel/react';
2
+ import { useCheckmarkStyles_unstable } from '../../selectable/index';
3
+ import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';
4
+ export const menuItemCheckboxClassNames = {
5
+ root: 'fui-MenuItemCheckbox',
6
+ icon: 'fui-MenuItemCheckbox__icon',
7
+ checkmark: 'fui-MenuItemCheckbox__checkmark',
8
+ content: 'fui-MenuItemCheckbox__content',
9
+ secondaryContent: 'fui-MenuItemCheckbox__secondaryContent',
10
+ subText: 'fui-MenuItemCheckbox__subText'
11
+ };
12
+ export const useMenuItemCheckboxStyles_unstable = (state)=>{
13
+ 'use no memo';
14
+ state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);
15
+ if (state.content) {
16
+ state.content.className = mergeClasses(menuItemCheckboxClassNames.content, state.content.className);
17
+ }
18
+ if (state.secondaryContent) {
19
+ state.secondaryContent.className = mergeClasses(menuItemCheckboxClassNames.secondaryContent, state.secondaryContent.className);
20
+ }
21
+ if (state.icon) {
22
+ state.icon.className = mergeClasses(menuItemCheckboxClassNames.icon, state.icon.className);
23
+ }
24
+ if (state.checkmark) {
25
+ state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);
26
+ }
27
+ if (state.subText) {
28
+ state.subText.className = mergeClasses(menuItemCheckboxClassNames.subText, state.subText.className);
29
+ }
30
+ useMenuItemStyles_unstable(state);
31
+ useCheckmarkStyles_unstable(state);
32
+ return state;
33
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuItemSlots } from '../index';\nimport type { MenuItemCheckboxState } from './MenuItemCheckbox.types';\n\nexport const menuItemCheckboxClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {\n root: 'fui-MenuItemCheckbox',\n icon: 'fui-MenuItemCheckbox__icon',\n checkmark: 'fui-MenuItemCheckbox__checkmark',\n content: 'fui-MenuItemCheckbox__content',\n secondaryContent: 'fui-MenuItemCheckbox__secondaryContent',\n subText: 'fui-MenuItemCheckbox__subText',\n};\n\nexport const useMenuItemCheckboxStyles_unstable = (state: MenuItemCheckboxState): MenuItemCheckboxState => {\n 'use no memo';\n\n state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);\n\n if (state.content) {\n state.content.className = mergeClasses(menuItemCheckboxClassNames.content, state.content.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemCheckboxClassNames.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemCheckboxClassNames.icon, state.icon.className);\n }\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);\n }\n\n if (state.subText) {\n state.subText.className = mergeClasses(menuItemCheckboxClassNames.subText, state.subText.className);\n }\n\n useMenuItemStyles_unstable(state);\n useCheckmarkStyles_unstable(state);\n\n return state;\n};\n"],"names":["mergeClasses","useCheckmarkStyles_unstable","useMenuItemStyles_unstable","menuItemCheckboxClassNames","root","icon","checkmark","content","secondaryContent","subText","useMenuItemCheckboxStyles_unstable","state","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,2BAA2B,QAAQ,yBAAyB;AACrE,SAASC,0BAA0B,QAAQ,uCAAuC;AAKlF,OAAO,MAAMC,6BAAsF;IACjGC,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;IAClBC,SAAS;AACX,EAAE;AAEF,OAAO,MAAMC,qCAAqC,CAACC;IACjD;IAEAA,MAAMP,IAAI,CAACQ,SAAS,GAAGZ,aAAaG,2BAA2BC,IAAI,EAAEO,MAAMP,IAAI,CAACQ,SAAS;IAEzF,IAAID,MAAMJ,OAAO,EAAE;QACjBI,MAAMJ,OAAO,CAACK,SAAS,GAAGZ,aAAaG,2BAA2BI,OAAO,EAAEI,MAAMJ,OAAO,CAACK,SAAS;IACpG;IAEA,IAAID,MAAMH,gBAAgB,EAAE;QAC1BG,MAAMH,gBAAgB,CAACI,SAAS,GAAGZ,aACjCG,2BAA2BK,gBAAgB,EAC3CG,MAAMH,gBAAgB,CAACI,SAAS;IAEpC;IAEA,IAAID,MAAMN,IAAI,EAAE;QACdM,MAAMN,IAAI,CAACO,SAAS,GAAGZ,aAAaG,2BAA2BE,IAAI,EAAEM,MAAMN,IAAI,CAACO,SAAS;IAC3F;IAEA,IAAID,MAAML,SAAS,EAAE;QACnBK,MAAML,SAAS,CAACM,SAAS,GAAGZ,aAAaG,2BAA2BG,SAAS,EAAEK,MAAML,SAAS,CAACM,SAAS;IAC1G;IAEA,IAAID,MAAMF,OAAO,EAAE;QACjBE,MAAMF,OAAO,CAACG,SAAS,GAAGZ,aAAaG,2BAA2BM,OAAO,EAAEE,MAAMF,OAAO,CAACG,SAAS;IACpG;IAEAV,2BAA2BS;IAC3BV,4BAA4BU;IAE5B,OAAOA;AACT,EAAE"}
@@ -0,0 +1,40 @@
1
+ import { makeStyles, mergeClasses } from '@griffel/react';
2
+ import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';
3
+ export const menuItemLinkClassNames = {
4
+ root: 'fui-MenuItemLink',
5
+ icon: 'fui-MenuItemLink__icon',
6
+ checkmark: 'fui-MenuItemLink__checkmark',
7
+ content: 'fui-MenuItemLink__content',
8
+ secondaryContent: 'fui-MenuItemLink__secondaryContent'
9
+ };
10
+ /**
11
+ * Styles for the root slot
12
+ */ const useStyles = makeStyles({
13
+ resetLink: {
14
+ textDecorationLine: 'none',
15
+ textDecorationThickness: 'initial',
16
+ textDecorationStyle: 'initial',
17
+ textDecorationColor: 'initial'
18
+ }
19
+ });
20
+ /**
21
+ * Apply styling to the MenuItemLink slots based on the state
22
+ */ export const useMenuItemLinkStyles_unstable = (state)=>{
23
+ 'use no memo';
24
+ useMenuItemStyles_unstable(state);
25
+ const styles = useStyles();
26
+ state.root.className = mergeClasses(menuItemLinkClassNames.root, styles.resetLink, state.root.className);
27
+ if (state.icon) {
28
+ state.icon.className = mergeClasses(menuItemLinkClassNames.icon, state.icon.className);
29
+ }
30
+ if (state.content) {
31
+ state.content.className = mergeClasses(menuItemLinkClassNames.content, state.content.className);
32
+ }
33
+ if (state.secondaryContent) {
34
+ state.secondaryContent.className = mergeClasses(menuItemLinkClassNames.secondaryContent, state.secondaryContent.className);
35
+ }
36
+ if (state.checkmark) {
37
+ state.checkmark.className = mergeClasses(menuItemLinkClassNames.checkmark, state.checkmark.className);
38
+ }
39
+ return state;
40
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/MenuItemLink/useMenuItemLinkStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { MenuItemLinkSlots, MenuItemLinkState } from './MenuItemLink.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nimport { MenuItemState } from '../MenuItem/MenuItem.types';\n\nexport const menuItemLinkClassNames: SlotClassNames<MenuItemLinkSlots> = {\n root: 'fui-MenuItemLink',\n icon: 'fui-MenuItemLink__icon',\n checkmark: 'fui-MenuItemLink__checkmark',\n content: 'fui-MenuItemLink__content',\n secondaryContent: 'fui-MenuItemLink__secondaryContent',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n resetLink: {\n textDecorationLine: 'none',\n textDecorationThickness: 'initial',\n textDecorationStyle: 'initial',\n textDecorationColor: 'initial',\n },\n});\n\n/**\n * Apply styling to the MenuItemLink slots based on the state\n */\nexport const useMenuItemLinkStyles_unstable = (state: MenuItemLinkState): MenuItemLinkState => {\n 'use no memo';\n\n useMenuItemStyles_unstable(state as MenuItemState);\n const styles = useStyles();\n state.root.className = mergeClasses(menuItemLinkClassNames.root, styles.resetLink, state.root.className);\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemLinkClassNames.icon, state.icon.className);\n }\n\n if (state.content) {\n state.content.className = mergeClasses(menuItemLinkClassNames.content, state.content.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemLinkClassNames.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemLinkClassNames.checkmark, state.checkmark.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","useMenuItemStyles_unstable","menuItemLinkClassNames","root","icon","checkmark","content","secondaryContent","useStyles","resetLink","textDecorationLine","textDecorationThickness","textDecorationStyle","textDecorationColor","useMenuItemLinkStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,0BAA0B,QAAQ,uCAAuC;AAGlF,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;AACpB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYT,WAAW;IAC3BU,WAAW;QACTC,oBAAoB;QACpBC,yBAAyB;QACzBC,qBAAqB;QACrBC,qBAAqB;IACvB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEAd,2BAA2Bc;IAC3B,MAAMC,SAASR;IACfO,MAAMZ,IAAI,CAACc,SAAS,GAAGjB,aAAaE,uBAAuBC,IAAI,EAAEa,OAAOP,SAAS,EAAEM,MAAMZ,IAAI,CAACc,SAAS;IAEvG,IAAIF,MAAMX,IAAI,EAAE;QACdW,MAAMX,IAAI,CAACa,SAAS,GAAGjB,aAAaE,uBAAuBE,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IACvF;IAEA,IAAIF,MAAMT,OAAO,EAAE;QACjBS,MAAMT,OAAO,CAACW,SAAS,GAAGjB,aAAaE,uBAAuBI,OAAO,EAAES,MAAMT,OAAO,CAACW,SAAS;IAChG;IAEA,IAAIF,MAAMR,gBAAgB,EAAE;QAC1BQ,MAAMR,gBAAgB,CAACU,SAAS,GAAGjB,aACjCE,uBAAuBK,gBAAgB,EACvCQ,MAAMR,gBAAgB,CAACU,SAAS;IAEpC;IAEA,IAAIF,MAAMV,SAAS,EAAE;QACnBU,MAAMV,SAAS,CAACY,SAAS,GAAGjB,aAAaE,uBAAuBG,SAAS,EAAEU,MAAMV,SAAS,CAACY,SAAS;IACtG;IAEA,OAAOF;AACT,EAAE"}
@@ -0,0 +1,32 @@
1
+ import { mergeClasses } from '@griffel/react';
2
+ import { useCheckmarkStyles_unstable } from '../../selectable/index';
3
+ import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';
4
+ export const menuItemRadioClassNames = {
5
+ root: 'fui-MenuItemRadio',
6
+ icon: 'fui-MenuItemRadio__icon',
7
+ checkmark: 'fui-MenuItemRadio__checkmark',
8
+ content: 'fui-MenuItemRadio__content',
9
+ secondaryContent: 'fui-MenuItemRadio__secondaryContent',
10
+ subText: 'fui-MenuItemRadio__subText'
11
+ };
12
+ export const useMenuItemRadioStyles_unstable = (state)=>{
13
+ 'use no memo';
14
+ state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);
15
+ if (state.content) {
16
+ state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);
17
+ }
18
+ if (state.secondaryContent) {
19
+ state.secondaryContent.className = mergeClasses(menuItemRadioClassNames.secondaryContent, state.secondaryContent.className);
20
+ }
21
+ if (state.icon) {
22
+ state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);
23
+ }
24
+ if (state.checkmark) {
25
+ state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);
26
+ }
27
+ if (state.subText) {
28
+ state.subText.className = mergeClasses(menuItemRadioClassNames.subText, state.subText.className);
29
+ }
30
+ useMenuItemStyles_unstable(state);
31
+ useCheckmarkStyles_unstable(state);
32
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/MenuItemRadio/useMenuItemRadioStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuItemSlots } from '../index';\nimport type { MenuItemRadioState } from './MenuItemRadio.types';\n\nexport const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {\n root: 'fui-MenuItemRadio',\n icon: 'fui-MenuItemRadio__icon',\n checkmark: 'fui-MenuItemRadio__checkmark',\n content: 'fui-MenuItemRadio__content',\n secondaryContent: 'fui-MenuItemRadio__secondaryContent',\n subText: 'fui-MenuItemRadio__subText',\n};\n\nexport const useMenuItemRadioStyles_unstable = (state: MenuItemRadioState) => {\n 'use no memo';\n\n state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);\n\n if (state.content) {\n state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemRadioClassNames.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);\n }\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);\n }\n\n if (state.subText) {\n state.subText.className = mergeClasses(menuItemRadioClassNames.subText, state.subText.className);\n }\n\n useMenuItemStyles_unstable(state);\n useCheckmarkStyles_unstable(state);\n};\n"],"names":["mergeClasses","useCheckmarkStyles_unstable","useMenuItemStyles_unstable","menuItemRadioClassNames","root","icon","checkmark","content","secondaryContent","subText","useMenuItemRadioStyles_unstable","state","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,2BAA2B,QAAQ,yBAAyB;AACrE,SAASC,0BAA0B,QAAQ,uCAAuC;AAKlF,OAAO,MAAMC,0BAAmF;IAC9FC,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;IAClBC,SAAS;AACX,EAAE;AAEF,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEAA,MAAMP,IAAI,CAACQ,SAAS,GAAGZ,aAAaG,wBAAwBC,IAAI,EAAEO,MAAMP,IAAI,CAACQ,SAAS;IAEtF,IAAID,MAAMJ,OAAO,EAAE;QACjBI,MAAMJ,OAAO,CAACK,SAAS,GAAGZ,aAAaG,wBAAwBI,OAAO,EAAEI,MAAMJ,OAAO,CAACK,SAAS;IACjG;IAEA,IAAID,MAAMH,gBAAgB,EAAE;QAC1BG,MAAMH,gBAAgB,CAACI,SAAS,GAAGZ,aACjCG,wBAAwBK,gBAAgB,EACxCG,MAAMH,gBAAgB,CAACI,SAAS;IAEpC;IAEA,IAAID,MAAMN,IAAI,EAAE;QACdM,MAAMN,IAAI,CAACO,SAAS,GAAGZ,aAAaG,wBAAwBE,IAAI,EAAEM,MAAMN,IAAI,CAACO,SAAS;IACxF;IAEA,IAAID,MAAML,SAAS,EAAE;QACnBK,MAAML,SAAS,CAACM,SAAS,GAAGZ,aAAaG,wBAAwBG,SAAS,EAAEK,MAAML,SAAS,CAACM,SAAS;IACvG;IAEA,IAAID,MAAMF,OAAO,EAAE;QACjBE,MAAMF,OAAO,CAACG,SAAS,GAAGZ,aAAaG,wBAAwBM,OAAO,EAAEE,MAAMF,OAAO,CAACG,SAAS;IACjG;IAEAV,2BAA2BS;IAC3BV,4BAA4BU;AAC9B,EAAE"}