@fluentui/react-menu 9.24.1 → 9.25.0

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 (194) hide show
  1. package/CHANGELOG.md +36 -11
  2. package/dist/index.d.ts +125 -3
  3. package/lib/Menu.js +1 -1
  4. package/lib/Menu.js.map +1 -1
  5. package/lib/MenuItemLink.js +1 -1
  6. package/lib/MenuItemLink.js.map +1 -1
  7. package/lib/MenuItemRadio.js +1 -1
  8. package/lib/MenuItemRadio.js.map +1 -1
  9. package/lib/MenuList.js +1 -1
  10. package/lib/MenuList.js.map +1 -1
  11. package/lib/MenuPopover.js +1 -1
  12. package/lib/MenuPopover.js.map +1 -1
  13. package/lib/MenuTrigger.js +1 -1
  14. package/lib/MenuTrigger.js.map +1 -1
  15. package/lib/components/Menu/Menu.types.js.map +1 -1
  16. package/lib/components/Menu/index.js +1 -1
  17. package/lib/components/Menu/index.js.map +1 -1
  18. package/lib/components/Menu/useMenu.js +24 -12
  19. package/lib/components/Menu/useMenu.js.map +1 -1
  20. package/lib/components/MenuDivider/useMenuDividerStyles.styles.js +1 -0
  21. package/lib/components/MenuDivider/useMenuDividerStyles.styles.js.map +1 -1
  22. package/lib/components/MenuDivider/useMenuDividerStyles.styles.raw.js +1 -0
  23. package/lib/components/MenuDivider/useMenuDividerStyles.styles.raw.js.map +1 -1
  24. package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js +1 -0
  25. package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js.map +1 -1
  26. package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js +1 -0
  27. package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js.map +1 -1
  28. package/lib/components/MenuItem/MenuItem.types.js.map +1 -1
  29. package/lib/components/MenuItem/index.js +2 -1
  30. package/lib/components/MenuItem/index.js.map +1 -1
  31. package/lib/components/MenuItem/useCharacterSearch.js +1 -0
  32. package/lib/components/MenuItem/useCharacterSearch.js.map +1 -1
  33. package/lib/components/MenuItem/useMenuItem.js +1 -145
  34. package/lib/components/MenuItem/useMenuItem.js.map +1 -1
  35. package/lib/components/MenuItem/useMenuItemBase.js +147 -0
  36. package/lib/components/MenuItem/useMenuItemBase.js.map +1 -0
  37. package/lib/components/MenuItem/useMenuItemStyles.styles.js +27 -6
  38. package/lib/components/MenuItem/useMenuItemStyles.styles.js.map +1 -1
  39. package/lib/components/MenuItem/useMenuItemStyles.styles.raw.js +28 -1
  40. package/lib/components/MenuItem/useMenuItemStyles.styles.raw.js.map +1 -1
  41. package/lib/components/MenuItemCheckbox/useMenuItemCheckbox.js +1 -3
  42. package/lib/components/MenuItemCheckbox/useMenuItemCheckbox.js.map +1 -1
  43. package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.js +6 -0
  44. package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.js.map +1 -1
  45. package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js +6 -0
  46. package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js.map +1 -1
  47. package/lib/components/MenuItemLink/index.js +1 -1
  48. package/lib/components/MenuItemLink/index.js.map +1 -1
  49. package/lib/components/MenuItemLink/useMenuItemLink.js +30 -0
  50. package/lib/components/MenuItemLink/useMenuItemLink.js.map +1 -1
  51. package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.js +5 -0
  52. package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.js.map +1 -1
  53. package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js +5 -0
  54. package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js.map +1 -1
  55. package/lib/components/MenuItemRadio/useMenuItemRadio.js +1 -3
  56. package/lib/components/MenuItemRadio/useMenuItemRadio.js.map +1 -1
  57. package/lib/components/MenuItemRadio/useMenuItemRadioStyles.styles.js +6 -0
  58. package/lib/components/MenuItemRadio/useMenuItemRadioStyles.styles.js.map +1 -1
  59. package/lib/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js +6 -0
  60. package/lib/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js.map +1 -1
  61. package/lib/components/MenuItemSwitch/useMenuItemSwitch.js +0 -1
  62. package/lib/components/MenuItemSwitch/useMenuItemSwitch.js.map +1 -1
  63. package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js +7 -0
  64. package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js.map +1 -1
  65. package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js +7 -0
  66. package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js.map +1 -1
  67. package/lib/components/MenuList/index.js +1 -1
  68. package/lib/components/MenuList/index.js.map +1 -1
  69. package/lib/components/MenuList/useMenuList.js +115 -65
  70. package/lib/components/MenuList/useMenuList.js.map +1 -1
  71. package/lib/components/MenuList/useMenuListStyles.styles.js +1 -0
  72. package/lib/components/MenuList/useMenuListStyles.styles.js.map +1 -1
  73. package/lib/components/MenuList/useMenuListStyles.styles.raw.js +1 -0
  74. package/lib/components/MenuList/useMenuListStyles.styles.raw.js.map +1 -1
  75. package/lib/components/MenuPopover/index.js +1 -1
  76. package/lib/components/MenuPopover/index.js.map +1 -1
  77. package/lib/components/MenuPopover/useMenuPopover.js +27 -7
  78. package/lib/components/MenuPopover/useMenuPopover.js.map +1 -1
  79. package/lib/components/MenuPopover/useMenuPopoverStyles.styles.js +1 -0
  80. package/lib/components/MenuPopover/useMenuPopoverStyles.styles.js.map +1 -1
  81. package/lib/components/MenuPopover/useMenuPopoverStyles.styles.raw.js +1 -0
  82. package/lib/components/MenuPopover/useMenuPopoverStyles.styles.raw.js.map +1 -1
  83. package/lib/components/MenuSplitGroup/useMenuSplitGroup.js +2 -1
  84. package/lib/components/MenuSplitGroup/useMenuSplitGroup.js.map +1 -1
  85. package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js +1 -0
  86. package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js.map +1 -1
  87. package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js +1 -0
  88. package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js.map +1 -1
  89. package/lib/components/MenuTrigger/MenuTrigger.types.js.map +1 -1
  90. package/lib/components/MenuTrigger/index.js +1 -1
  91. package/lib/components/MenuTrigger/index.js.map +1 -1
  92. package/lib/components/MenuTrigger/useMenuTrigger.js +39 -12
  93. package/lib/components/MenuTrigger/useMenuTrigger.js.map +1 -1
  94. package/lib/index.js +9 -14
  95. package/lib/index.js.map +1 -1
  96. package/lib/selectable/useCheckmarkStyles.styles.js +1 -0
  97. package/lib/selectable/useCheckmarkStyles.styles.js.map +1 -1
  98. package/lib/selectable/useCheckmarkStyles.styles.raw.js +1 -0
  99. package/lib/selectable/useCheckmarkStyles.styles.raw.js.map +1 -1
  100. package/lib-commonjs/Menu.js +3 -0
  101. package/lib-commonjs/Menu.js.map +1 -1
  102. package/lib-commonjs/MenuItemLink.js +3 -0
  103. package/lib-commonjs/MenuItemLink.js.map +1 -1
  104. package/lib-commonjs/MenuItemRadio.js.map +1 -1
  105. package/lib-commonjs/MenuList.js +3 -0
  106. package/lib-commonjs/MenuList.js.map +1 -1
  107. package/lib-commonjs/MenuPopover.js +3 -0
  108. package/lib-commonjs/MenuPopover.js.map +1 -1
  109. package/lib-commonjs/MenuTrigger.js +3 -0
  110. package/lib-commonjs/MenuTrigger.js.map +1 -1
  111. package/lib-commonjs/components/Menu/Menu.types.js.map +1 -1
  112. package/lib-commonjs/components/Menu/index.js +3 -0
  113. package/lib-commonjs/components/Menu/index.js.map +1 -1
  114. package/lib-commonjs/components/Menu/useMenu.js +30 -15
  115. package/lib-commonjs/components/Menu/useMenu.js.map +1 -1
  116. package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.js +1 -0
  117. package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.js.map +1 -1
  118. package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.raw.js +1 -0
  119. package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.raw.js.map +1 -1
  120. package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js +1 -0
  121. package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js.map +1 -1
  122. package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js +1 -0
  123. package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js.map +1 -1
  124. package/lib-commonjs/components/MenuItem/MenuItem.types.js.map +1 -1
  125. package/lib-commonjs/components/MenuItem/index.js +2 -1
  126. package/lib-commonjs/components/MenuItem/index.js.map +1 -1
  127. package/lib-commonjs/components/MenuItem/useCharacterSearch.js +1 -0
  128. package/lib-commonjs/components/MenuItem/useCharacterSearch.js.map +1 -1
  129. package/lib-commonjs/components/MenuItem/useMenuItem.js +5 -152
  130. package/lib-commonjs/components/MenuItem/useMenuItem.js.map +1 -1
  131. package/lib-commonjs/components/MenuItem/useMenuItemBase.js +155 -0
  132. package/lib-commonjs/components/MenuItem/useMenuItemBase.js.map +1 -0
  133. package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.js +51 -16
  134. package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.js.map +1 -1
  135. package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.raw.js +28 -1
  136. package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.raw.js.map +1 -1
  137. package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckbox.js +2 -2
  138. package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckbox.js.map +1 -1
  139. package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.js +6 -0
  140. package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.js.map +1 -1
  141. package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js +6 -0
  142. package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js.map +1 -1
  143. package/lib-commonjs/components/MenuItemLink/index.js +3 -0
  144. package/lib-commonjs/components/MenuItemLink/index.js.map +1 -1
  145. package/lib-commonjs/components/MenuItemLink/useMenuItemLink.js +35 -3
  146. package/lib-commonjs/components/MenuItemLink/useMenuItemLink.js.map +1 -1
  147. package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.js +5 -0
  148. package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.js.map +1 -1
  149. package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js +5 -0
  150. package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js.map +1 -1
  151. package/lib-commonjs/components/MenuItemRadio/useMenuItemRadio.js +2 -2
  152. package/lib-commonjs/components/MenuItemRadio/useMenuItemRadio.js.map +1 -1
  153. package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.js +6 -0
  154. package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.js.map +1 -1
  155. package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js +6 -0
  156. package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js.map +1 -1
  157. package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitch.js.map +1 -1
  158. package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js +7 -0
  159. package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js.map +1 -1
  160. package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js +7 -0
  161. package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js.map +1 -1
  162. package/lib-commonjs/components/MenuList/index.js +3 -0
  163. package/lib-commonjs/components/MenuList/index.js.map +1 -1
  164. package/lib-commonjs/components/MenuList/useMenuList.js +108 -67
  165. package/lib-commonjs/components/MenuList/useMenuList.js.map +1 -1
  166. package/lib-commonjs/components/MenuList/useMenuListStyles.styles.js +1 -0
  167. package/lib-commonjs/components/MenuList/useMenuListStyles.styles.js.map +1 -1
  168. package/lib-commonjs/components/MenuList/useMenuListStyles.styles.raw.js +1 -0
  169. package/lib-commonjs/components/MenuList/useMenuListStyles.styles.raw.js.map +1 -1
  170. package/lib-commonjs/components/MenuPopover/index.js +3 -0
  171. package/lib-commonjs/components/MenuPopover/index.js.map +1 -1
  172. package/lib-commonjs/components/MenuPopover/useMenuPopover.js +26 -7
  173. package/lib-commonjs/components/MenuPopover/useMenuPopover.js.map +1 -1
  174. package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.js +1 -0
  175. package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.js.map +1 -1
  176. package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.raw.js +1 -0
  177. package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.raw.js.map +1 -1
  178. package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroup.js.map +1 -1
  179. package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js +1 -0
  180. package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js.map +1 -1
  181. package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js +1 -0
  182. package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js.map +1 -1
  183. package/lib-commonjs/components/MenuTrigger/MenuTrigger.types.js.map +1 -1
  184. package/lib-commonjs/components/MenuTrigger/index.js +3 -0
  185. package/lib-commonjs/components/MenuTrigger/index.js.map +1 -1
  186. package/lib-commonjs/components/MenuTrigger/useMenuTrigger.js +32 -14
  187. package/lib-commonjs/components/MenuTrigger/useMenuTrigger.js.map +1 -1
  188. package/lib-commonjs/index.js +27 -5
  189. package/lib-commonjs/index.js.map +1 -1
  190. package/lib-commonjs/selectable/useCheckmarkStyles.styles.js +1 -0
  191. package/lib-commonjs/selectable/useCheckmarkStyles.styles.js.map +1 -1
  192. package/lib-commonjs/selectable/useCheckmarkStyles.styles.raw.js +1 -0
  193. package/lib-commonjs/selectable/useCheckmarkStyles.styles.raw.js.map +1 -1
  194. package/package.json +10 -10
@@ -3,38 +3,22 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- function _export(target, all) {
7
- for(var name in all)Object.defineProperty(target, name, {
8
- enumerable: true,
9
- get: all[name]
10
- });
11
- }
12
- _export(exports, {
13
- useMenuItemBase_unstable: function() {
14
- return useMenuItemBase_unstable;
15
- },
16
- useMenuItem_unstable: function() {
6
+ Object.defineProperty(exports, "useMenuItem_unstable", {
7
+ enumerable: true,
8
+ get: function() {
17
9
  return useMenuItem_unstable;
18
10
  }
19
11
  });
20
12
  const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
21
13
  const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
22
- const _reactutilities = require("@fluentui/react-utilities");
23
14
  const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
24
- const _useCharacterSearch = require("./useCharacterSearch");
25
- const _menuTriggerContext = require("../../contexts/menuTriggerContext");
26
15
  const _reacticons = require("@fluentui/react-icons");
27
- const _menuListContext = require("../../contexts/menuListContext");
28
- const _menuContext = require("../../contexts/menuContext");
29
- const _reactaria = require("@fluentui/react-aria");
30
- const _keyboardkeys = require("@fluentui/keyboard-keys");
31
- const _menuSplitGroupContext = require("../../contexts/menuSplitGroupContext");
32
- const _useValidateNesting = require("../../utils/useValidateNesting");
16
+ const _useMenuItemBase = require("./useMenuItemBase");
33
17
  const ChevronRightIcon = (0, _reacticons.bundleIcon)(_reacticons.ChevronRightFilled, _reacticons.ChevronRightRegular);
34
18
  const ChevronLeftIcon = (0, _reacticons.bundleIcon)(_reacticons.ChevronLeftFilled, _reacticons.ChevronLeftRegular);
35
19
  const useMenuItem_unstable = (props, ref)=>{
36
20
  const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
37
- const state = useMenuItemBase_unstable(props, ref);
21
+ const state = (0, _useMenuItemBase.useMenuItemBase_unstable)(props, ref);
38
22
  // Set default chevron icon
39
23
  if (state.submenuIndicator) {
40
24
  var _state_submenuIndicator;
@@ -43,134 +27,3 @@ const useMenuItem_unstable = (props, ref)=>{
43
27
  }
44
28
  return state;
45
29
  };
46
- const useMenuItemBase_unstable = (props, ref)=>{
47
- const isSubmenuTrigger = (0, _menuTriggerContext.useMenuTriggerContext_unstable)();
48
- const persistOnClickContext = (0, _menuContext.useMenuContext_unstable)((context)=>context.persistOnItemClick);
49
- const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext, content: _content, ...rest } = props;
50
- const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({
51
- hasSubmenu
52
- });
53
- const setOpen = (0, _menuContext.useMenuContext_unstable)((context)=>context.setOpen);
54
- useNotifySplitItemMultiline({
55
- multiline: !!props.subText,
56
- hasSubmenu
57
- });
58
- const innerRef = _react.useRef(null);
59
- const dismissedWithKeyboardRef = _react.useRef(false);
60
- const validateNestingRef = (0, _useValidateNesting.useValidateNesting)(getValidateNestingComponentName(props.role));
61
- const state = {
62
- hasSubmenu,
63
- disabled,
64
- persistOnClick,
65
- components: {
66
- root: 'div',
67
- icon: 'span',
68
- checkmark: 'span',
69
- submenuIndicator: 'span',
70
- content: 'span',
71
- secondaryContent: 'span',
72
- subText: 'span'
73
- },
74
- root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(as, (0, _reactaria.useARIAButtonProps)(as, {
75
- role: 'menuitem',
76
- ...rest,
77
- disabled: false,
78
- disabledFocusable: disabled,
79
- ref: (0, _reactutilities.useMergedRefs)(ref, innerRef, validateNestingRef),
80
- onKeyDown: (0, _reactutilities.useEventCallback)((event)=>{
81
- var _props_onKeyDown;
82
- (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);
83
- if (!event.isDefaultPrevented() && (event.key === _keyboardkeys.Space || event.key === _keyboardkeys.Enter)) {
84
- dismissedWithKeyboardRef.current = true;
85
- }
86
- }),
87
- onMouseMove: (0, _reactutilities.useEventCallback)((event)=>{
88
- var _props_onMouseMove;
89
- if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) {
90
- var _innerRef_current;
91
- (_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.focus();
92
- }
93
- (_props_onMouseMove = props.onMouseMove) === null || _props_onMouseMove === void 0 ? void 0 : _props_onMouseMove.call(props, event);
94
- }),
95
- onClick: (0, _reactutilities.useEventCallback)((event)=>{
96
- var _props_onClick;
97
- if (!hasSubmenu && !persistOnClick) {
98
- setOpen(event, {
99
- open: false,
100
- keyboard: dismissedWithKeyboardRef.current,
101
- bubble: true,
102
- type: 'menuItemClick',
103
- event
104
- });
105
- dismissedWithKeyboardRef.current = false;
106
- }
107
- (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
108
- })
109
- })), {
110
- elementType: 'div'
111
- }),
112
- icon: _reactutilities.slot.optional(props.icon, {
113
- renderByDefault: hasIcons,
114
- elementType: 'span'
115
- }),
116
- checkmark: _reactutilities.slot.optional(props.checkmark, {
117
- renderByDefault: hasCheckmarks,
118
- elementType: 'span'
119
- }),
120
- submenuIndicator: _reactutilities.slot.optional(props.submenuIndicator, {
121
- renderByDefault: hasSubmenu,
122
- elementType: 'span'
123
- }),
124
- content: _reactutilities.slot.optional(props.content, {
125
- renderByDefault: !!props.children,
126
- defaultProps: {
127
- children: props.children
128
- },
129
- elementType: 'span'
130
- }),
131
- secondaryContent: _reactutilities.slot.optional(props.secondaryContent, {
132
- elementType: 'span'
133
- }),
134
- subText: _reactutilities.slot.optional(props.subText, {
135
- elementType: 'span'
136
- })
137
- };
138
- (0, _useCharacterSearch.useCharacterSearch)(state, innerRef);
139
- return state;
140
- };
141
- /**
142
- * MenuSplitGroup needs to apply extra styles when its main item is in multiline layout mode
143
- * Notify the parent MenuSplitGroup so that it can handle this case
144
- */ const useNotifySplitItemMultiline = (options)=>{
145
- const { hasSubmenu, multiline } = options;
146
- const isSplitItemTrigger = (0, _menuSplitGroupContext.useIsInMenuSplitGroup)() && hasSubmenu;
147
- const { setMultiline } = (0, _menuSplitGroupContext.useMenuSplitGroupContext_unstable)();
148
- (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
149
- if (!isSplitItemTrigger) {
150
- setMultiline(multiline);
151
- }
152
- }, [
153
- setMultiline,
154
- multiline,
155
- isSplitItemTrigger
156
- ]);
157
- };
158
- const useIconAndCheckmarkAlignment = (options)=>{
159
- const { hasSubmenu } = options;
160
- const hasIcons = (0, _menuListContext.useMenuListContext_unstable)((context)=>context.hasIcons);
161
- const hasCheckmarks = (0, _menuListContext.useMenuListContext_unstable)((context)=>context.hasCheckmarks);
162
- const isSplitItemTrigger = (0, _menuSplitGroupContext.useIsInMenuSplitGroup)() && hasSubmenu;
163
- return {
164
- hasIcons: hasIcons && !isSplitItemTrigger,
165
- hasCheckmarks: hasCheckmarks && !isSplitItemTrigger
166
- };
167
- };
168
- const getValidateNestingComponentName = (role)=>{
169
- switch(role){
170
- case 'menuitemcheckbox':
171
- return 'MenuItemCheckbox';
172
- case 'menuitemradio':
173
- return 'MenuItemRadio';
174
- }
175
- return 'MenuItem';
176
- };
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/MenuItem/useMenuItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n useEventCallback,\n useMergedRefs,\n getIntrinsicElementProps,\n slot,\n useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';\nimport {\n ChevronRightFilled,\n ChevronRightRegular,\n ChevronLeftFilled,\n ChevronLeftRegular,\n bundleIcon,\n} from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport type { ARIAButtonElement, ARIAButtonElementIntersection, ARIAButtonProps } from '@fluentui/react-aria';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport { useIsInMenuSplitGroup, useMenuSplitGroupContext_unstable } from '../../contexts/menuSplitGroupContext';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\nconst ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);\nconst ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIAButtonElement<'div'>>): MenuItemState => {\n const { dir } = useFluent();\n const state = useMenuItemBase_unstable(props, ref);\n\n // Set default chevron icon\n if (state.submenuIndicator) {\n state.submenuIndicator.children ??= dir === 'rtl' ? <ChevronLeftIcon /> : <ChevronRightIcon />;\n }\n\n return state;\n};\n\n/**\n * Base hook for MenuItem component, produces state required to render the component.\n * It doesn't set any design-related props specific to MenuItem such as submenu indicator icon.\n *\n * @internal\n */\nexport const useMenuItemBase_unstable = (\n props: MenuItemProps,\n ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemState => {\n const isSubmenuTrigger = useMenuTriggerContext_unstable();\n const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);\n const {\n as = 'div',\n disabled = false,\n hasSubmenu = isSubmenuTrigger,\n persistOnClick = persistOnClickContext,\n content: _content, // `content` is a slot and it's type clashes with the HTMLElement `content` attribute\n ...rest\n } = props;\n const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({ hasSubmenu });\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n useNotifySplitItemMultiline({ multiline: !!props.subText, hasSubmenu });\n\n const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);\n const dismissedWithKeyboardRef = React.useRef(false);\n\n const validateNestingRef = useValidateNesting(getValidateNestingComponentName(props.role));\n\n const state: MenuItemState = {\n hasSubmenu,\n disabled,\n persistOnClick,\n components: {\n root: 'div',\n icon: 'span',\n checkmark: 'span',\n submenuIndicator: 'span',\n content: 'span',\n secondaryContent: 'span',\n subText: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps(\n as,\n useARIAButtonProps<'div', ARIAButtonProps<'div'>>(as, {\n role: 'menuitem',\n ...rest,\n disabled: false,\n disabledFocusable: disabled,\n ref: useMergedRefs(ref, innerRef, validateNestingRef) as React.Ref<ARIAButtonElementIntersection<'div'>>,\n onKeyDown: useEventCallback(event => {\n props.onKeyDown?.(event);\n if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {\n dismissedWithKeyboardRef.current = true;\n }\n }),\n onMouseMove: useEventCallback(event => {\n if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) {\n innerRef.current?.focus();\n }\n\n props.onMouseMove?.(event);\n }),\n onClick: useEventCallback(event => {\n if (!hasSubmenu && !persistOnClick) {\n setOpen(event, {\n open: false,\n keyboard: dismissedWithKeyboardRef.current,\n bubble: true,\n type: 'menuItemClick',\n event,\n });\n dismissedWithKeyboardRef.current = false;\n }\n\n props.onClick?.(event);\n }),\n }),\n ),\n { elementType: 'div' },\n ),\n icon: slot.optional(props.icon, { renderByDefault: hasIcons, elementType: 'span' }),\n checkmark: slot.optional(props.checkmark, {\n renderByDefault: hasCheckmarks,\n elementType: 'span',\n }),\n submenuIndicator: slot.optional(props.submenuIndicator, {\n renderByDefault: hasSubmenu,\n elementType: 'span',\n }),\n content: slot.optional(props.content, {\n renderByDefault: !!props.children,\n defaultProps: { children: props.children },\n elementType: 'span',\n }),\n secondaryContent: slot.optional(props.secondaryContent, { elementType: 'span' }),\n subText: slot.optional(props.subText, { elementType: 'span' }),\n };\n useCharacterSearch(state, innerRef);\n return state;\n};\n\n/**\n * MenuSplitGroup needs to apply extra styles when its main item is in multiline layout mode\n * Notify the parent MenuSplitGroup so that it can handle this case\n */\nconst useNotifySplitItemMultiline = (options: { hasSubmenu: boolean; multiline: boolean }) => {\n const { hasSubmenu, multiline } = options;\n const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;\n\n const { setMultiline } = useMenuSplitGroupContext_unstable();\n\n useIsomorphicLayoutEffect(() => {\n if (!isSplitItemTrigger) {\n setMultiline(multiline);\n }\n }, [setMultiline, multiline, isSplitItemTrigger]);\n};\n\nconst useIconAndCheckmarkAlignment = (options: { hasSubmenu: boolean }) => {\n const { hasSubmenu } = options;\n const hasIcons = useMenuListContext_unstable(context => context.hasIcons);\n const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);\n const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;\n\n return {\n hasIcons: hasIcons && !isSplitItemTrigger,\n hasCheckmarks: hasCheckmarks && !isSplitItemTrigger,\n };\n};\n\nconst getValidateNestingComponentName = (role?: string) => {\n switch (role) {\n case 'menuitemcheckbox':\n return 'MenuItemCheckbox';\n case 'menuitemradio':\n return 'MenuItemRadio';\n }\n return 'MenuItem';\n};\n"],"names":["React","useEventCallback","useMergedRefs","getIntrinsicElementProps","slot","useIsomorphicLayoutEffect","useFluent_unstable","useFluent","useCharacterSearch","useMenuTriggerContext_unstable","ChevronRightFilled","ChevronRightRegular","ChevronLeftFilled","ChevronLeftRegular","bundleIcon","useMenuListContext_unstable","useMenuContext_unstable","useARIAButtonProps","Enter","Space","useIsInMenuSplitGroup","useMenuSplitGroupContext_unstable","useValidateNesting","ChevronRightIcon","ChevronLeftIcon","useMenuItem_unstable","props","ref","dir","state","useMenuItemBase_unstable","submenuIndicator","children","isSubmenuTrigger","persistOnClickContext","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","content","_content","rest","hasIcons","hasCheckmarks","useIconAndCheckmarkAlignment","setOpen","useNotifySplitItemMultiline","multiline","subText","innerRef","useRef","dismissedWithKeyboardRef","validateNestingRef","getValidateNestingComponentName","role","components","root","icon","checkmark","secondaryContent","always","disabledFocusable","onKeyDown","event","isDefaultPrevented","key","current","onMouseMove","currentTarget","ownerDocument","activeElement","focus","onClick","open","keyboard","bubble","type","elementType","optional","renderByDefault","defaultProps","options","isSplitItemTrigger","setMultiline"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/MenuItem/useMenuItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n ChevronRightFilled,\n ChevronRightRegular,\n ChevronLeftFilled,\n ChevronLeftRegular,\n bundleIcon,\n} from '@fluentui/react-icons';\nimport { useMenuItemBase_unstable } from './useMenuItemBase';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport type { ARIAButtonElement } from '@fluentui/react-aria';\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 { dir } = useFluent();\n const state = useMenuItemBase_unstable(props, ref);\n\n // Set default chevron icon\n if (state.submenuIndicator) {\n state.submenuIndicator.children ??= dir === 'rtl' ? <ChevronLeftIcon /> : <ChevronRightIcon />;\n }\n\n return state;\n};\n"],"names":["React","useFluent_unstable","useFluent","ChevronRightFilled","ChevronRightRegular","ChevronLeftFilled","ChevronLeftRegular","bundleIcon","useMenuItemBase_unstable","ChevronRightIcon","ChevronLeftIcon","useMenuItem_unstable","props","ref","dir","state","submenuIndicator","children"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCACiB,kCAAkC;4BAO3E,wBAAwB;iCACU,oBAAoB;AAI7D,MAAMS,uBAAmBF,sBAAAA,EAAWJ,8BAAAA,EAAoBC,+BAAAA;AACxD,MAAMM,sBAAkBH,sBAAAA,EAAWF,6BAAAA,EAAmBC,8BAAAA;AAK/C,MAAMK,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,GAAG,EAAE,OAAGZ,uCAAAA;IAChB,MAAMa,YAAQP,yCAAAA,EAAyBI,OAAOC;IAE9C,2BAA2B;IAC3B,IAAIE,MAAMC,gBAAgB,EAAE;YAC1BD;;QAAAA,CAAAA,YAAAA,CAAAA,0BAAAA,MAAMC,gBAAAA,AAAgB,EAACC,QAAAA,MAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAvBF,wBAAuBE,QAAAA,GAAaH,QAAQ,QAAA,WAAA,GAAQ,OAAA,aAAA,CAACJ,iBAAAA,QAAAA,WAAAA,GAAqB,OAAA,aAAA,CAACD,kBAAAA;IAC7E;IAEA,OAAOM;AACT,EAAE"}
@@ -0,0 +1,155 @@
1
+ 'use client';
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "useMenuItemBase_unstable", {
7
+ enumerable: true,
8
+ get: function() {
9
+ return useMenuItemBase_unstable;
10
+ }
11
+ });
12
+ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
13
+ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
14
+ const _reactutilities = require("@fluentui/react-utilities");
15
+ const _useCharacterSearch = require("./useCharacterSearch");
16
+ const _menuTriggerContext = require("../../contexts/menuTriggerContext");
17
+ const _menuListContext = require("../../contexts/menuListContext");
18
+ const _menuContext = require("../../contexts/menuContext");
19
+ const _reactaria = require("@fluentui/react-aria");
20
+ const _keyboardkeys = require("@fluentui/keyboard-keys");
21
+ const _menuSplitGroupContext = require("../../contexts/menuSplitGroupContext");
22
+ const _useValidateNesting = require("../../utils/useValidateNesting");
23
+ const useMenuItemBase_unstable = (props, ref)=>{
24
+ const isSubmenuTrigger = (0, _menuTriggerContext.useMenuTriggerContext_unstable)();
25
+ const persistOnClickContext = (0, _menuContext.useMenuContext_unstable)((context)=>context.persistOnItemClick);
26
+ const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext, content: _content, ...rest } = props;
27
+ const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({
28
+ hasSubmenu
29
+ });
30
+ const setOpen = (0, _menuContext.useMenuContext_unstable)((context)=>context.setOpen);
31
+ const open = (0, _menuContext.useMenuContext_unstable)((context)=>context.open);
32
+ useNotifySplitItemMultiline({
33
+ multiline: !!props.subText,
34
+ hasSubmenu
35
+ });
36
+ const innerRef = _react.useRef(null);
37
+ const dismissedWithKeyboardRef = _react.useRef(false);
38
+ const validateNestingRef = (0, _useValidateNesting.useValidateNesting)(getValidateNestingComponentName(props.role));
39
+ const state = {
40
+ hasSubmenu,
41
+ submenuOpen: hasSubmenu && open,
42
+ disabled,
43
+ persistOnClick,
44
+ components: {
45
+ root: 'div',
46
+ icon: 'span',
47
+ checkmark: 'span',
48
+ submenuIndicator: 'span',
49
+ content: 'span',
50
+ secondaryContent: 'span',
51
+ subText: 'span'
52
+ },
53
+ root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(as, (0, _reactaria.useARIAButtonProps)(as, {
54
+ role: 'menuitem',
55
+ ...rest,
56
+ disabled: false,
57
+ disabledFocusable: disabled,
58
+ ref: (0, _reactutilities.useMergedRefs)(ref, innerRef, validateNestingRef),
59
+ onKeyDown: (0, _reactutilities.useEventCallback)((event)=>{
60
+ var _props_onKeyDown;
61
+ (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);
62
+ if (!event.isDefaultPrevented() && (event.key === _keyboardkeys.Space || event.key === _keyboardkeys.Enter)) {
63
+ dismissedWithKeyboardRef.current = true;
64
+ }
65
+ }),
66
+ onMouseMove: (0, _reactutilities.useEventCallback)((event)=>{
67
+ var _props_onMouseMove;
68
+ if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) {
69
+ var _innerRef_current;
70
+ (_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.focus();
71
+ }
72
+ (_props_onMouseMove = props.onMouseMove) === null || _props_onMouseMove === void 0 ? void 0 : _props_onMouseMove.call(props, event);
73
+ }),
74
+ onClick: (0, _reactutilities.useEventCallback)((event)=>{
75
+ var _props_onClick;
76
+ if (!hasSubmenu && !persistOnClick) {
77
+ setOpen(event, {
78
+ open: false,
79
+ keyboard: dismissedWithKeyboardRef.current,
80
+ bubble: true,
81
+ type: 'menuItemClick',
82
+ event
83
+ });
84
+ dismissedWithKeyboardRef.current = false;
85
+ }
86
+ (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
87
+ })
88
+ })), {
89
+ elementType: 'div'
90
+ }),
91
+ icon: _reactutilities.slot.optional(props.icon, {
92
+ renderByDefault: hasIcons,
93
+ elementType: 'span'
94
+ }),
95
+ checkmark: _reactutilities.slot.optional(props.checkmark, {
96
+ renderByDefault: hasCheckmarks,
97
+ elementType: 'span'
98
+ }),
99
+ submenuIndicator: _reactutilities.slot.optional(props.submenuIndicator, {
100
+ renderByDefault: hasSubmenu,
101
+ elementType: 'span'
102
+ }),
103
+ content: _reactutilities.slot.optional(props.content, {
104
+ renderByDefault: !!props.children,
105
+ defaultProps: {
106
+ children: props.children
107
+ },
108
+ elementType: 'span'
109
+ }),
110
+ secondaryContent: _reactutilities.slot.optional(props.secondaryContent, {
111
+ elementType: 'span'
112
+ }),
113
+ subText: _reactutilities.slot.optional(props.subText, {
114
+ elementType: 'span'
115
+ })
116
+ };
117
+ (0, _useCharacterSearch.useCharacterSearch)(state, innerRef);
118
+ return state;
119
+ };
120
+ /**
121
+ * MenuSplitGroup needs to apply extra styles when its main item is in multiline layout mode
122
+ * Notify the parent MenuSplitGroup so that it can handle this case
123
+ */ const useNotifySplitItemMultiline = (options)=>{
124
+ const { hasSubmenu, multiline } = options;
125
+ const isSplitItemTrigger = (0, _menuSplitGroupContext.useIsInMenuSplitGroup)() && hasSubmenu;
126
+ const { setMultiline } = (0, _menuSplitGroupContext.useMenuSplitGroupContext_unstable)();
127
+ (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
128
+ if (!isSplitItemTrigger) {
129
+ setMultiline(multiline);
130
+ }
131
+ }, [
132
+ setMultiline,
133
+ multiline,
134
+ isSplitItemTrigger
135
+ ]);
136
+ };
137
+ const useIconAndCheckmarkAlignment = (options)=>{
138
+ const { hasSubmenu } = options;
139
+ const hasIcons = (0, _menuListContext.useMenuListContext_unstable)((context)=>context.hasIcons);
140
+ const hasCheckmarks = (0, _menuListContext.useMenuListContext_unstable)((context)=>context.hasCheckmarks);
141
+ const isSplitItemTrigger = (0, _menuSplitGroupContext.useIsInMenuSplitGroup)() && hasSubmenu;
142
+ return {
143
+ hasIcons: hasIcons && !isSplitItemTrigger,
144
+ hasCheckmarks: hasCheckmarks && !isSplitItemTrigger
145
+ };
146
+ };
147
+ const getValidateNestingComponentName = (role)=>{
148
+ switch(role){
149
+ case 'menuitemcheckbox':
150
+ return 'MenuItemCheckbox';
151
+ case 'menuitemradio':
152
+ return 'MenuItemRadio';
153
+ }
154
+ return 'MenuItem';
155
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/MenuItem/useMenuItemBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n useEventCallback,\n useMergedRefs,\n getIntrinsicElementProps,\n slot,\n useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport type { ARIAButtonElement, ARIAButtonElementIntersection, ARIAButtonProps } from '@fluentui/react-aria';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport { useIsInMenuSplitGroup, useMenuSplitGroupContext_unstable } from '../../contexts/menuSplitGroupContext';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\n/**\n * Base hook for MenuItem component, produces state required to render the component.\n * It doesn't set any design-related props specific to MenuItem such as submenu indicator icon.\n */\nexport const useMenuItemBase_unstable = (\n props: MenuItemProps,\n ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemState => {\n const isSubmenuTrigger = useMenuTriggerContext_unstable();\n const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);\n const {\n as = 'div',\n disabled = false,\n hasSubmenu = isSubmenuTrigger,\n persistOnClick = persistOnClickContext,\n content: _content, // `content` is a slot and it's type clashes with the HTMLElement `content` attribute\n ...rest\n } = props;\n const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({ hasSubmenu });\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n const open = useMenuContext_unstable(context => context.open);\n useNotifySplitItemMultiline({ multiline: !!props.subText, hasSubmenu });\n\n const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);\n const dismissedWithKeyboardRef = React.useRef(false);\n\n const validateNestingRef = useValidateNesting(getValidateNestingComponentName(props.role));\n\n const state: MenuItemState = {\n hasSubmenu,\n submenuOpen: hasSubmenu && open,\n disabled,\n persistOnClick,\n components: {\n root: 'div',\n icon: 'span',\n checkmark: 'span',\n submenuIndicator: 'span',\n content: 'span',\n secondaryContent: 'span',\n subText: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps(\n as,\n useARIAButtonProps<'div', ARIAButtonProps<'div'>>(as, {\n role: 'menuitem',\n ...rest,\n disabled: false,\n disabledFocusable: disabled,\n ref: useMergedRefs(ref, innerRef, validateNestingRef) as React.Ref<ARIAButtonElementIntersection<'div'>>,\n onKeyDown: useEventCallback(event => {\n props.onKeyDown?.(event);\n if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {\n dismissedWithKeyboardRef.current = true;\n }\n }),\n onMouseMove: useEventCallback(event => {\n if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) {\n innerRef.current?.focus();\n }\n\n props.onMouseMove?.(event);\n }),\n onClick: useEventCallback(event => {\n if (!hasSubmenu && !persistOnClick) {\n setOpen(event, {\n open: false,\n keyboard: dismissedWithKeyboardRef.current,\n bubble: true,\n type: 'menuItemClick',\n event,\n });\n dismissedWithKeyboardRef.current = false;\n }\n\n props.onClick?.(event);\n }),\n }),\n ),\n { elementType: 'div' },\n ),\n icon: slot.optional(props.icon, { renderByDefault: hasIcons, elementType: 'span' }),\n checkmark: slot.optional(props.checkmark, {\n renderByDefault: hasCheckmarks,\n elementType: 'span',\n }),\n submenuIndicator: slot.optional(props.submenuIndicator, {\n renderByDefault: hasSubmenu,\n elementType: 'span',\n }),\n content: slot.optional(props.content, {\n renderByDefault: !!props.children,\n defaultProps: { children: props.children },\n elementType: 'span',\n }),\n secondaryContent: slot.optional(props.secondaryContent, { elementType: 'span' }),\n subText: slot.optional(props.subText, { elementType: 'span' }),\n };\n useCharacterSearch(state, innerRef);\n return state;\n};\n\n/**\n * MenuSplitGroup needs to apply extra styles when its main item is in multiline layout mode\n * Notify the parent MenuSplitGroup so that it can handle this case\n */\nconst useNotifySplitItemMultiline = (options: { hasSubmenu: boolean; multiline: boolean }) => {\n const { hasSubmenu, multiline } = options;\n const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;\n\n const { setMultiline } = useMenuSplitGroupContext_unstable();\n\n useIsomorphicLayoutEffect(() => {\n if (!isSplitItemTrigger) {\n setMultiline(multiline);\n }\n }, [setMultiline, multiline, isSplitItemTrigger]);\n};\n\nconst useIconAndCheckmarkAlignment = (options: { hasSubmenu: boolean }) => {\n const { hasSubmenu } = options;\n const hasIcons = useMenuListContext_unstable(context => context.hasIcons);\n const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);\n const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;\n\n return {\n hasIcons: hasIcons && !isSplitItemTrigger,\n hasCheckmarks: hasCheckmarks && !isSplitItemTrigger,\n };\n};\n\nconst getValidateNestingComponentName = (role?: string) => {\n switch (role) {\n case 'menuitemcheckbox':\n return 'MenuItemCheckbox';\n case 'menuitemradio':\n return 'MenuItemRadio';\n }\n return 'MenuItem';\n};\n"],"names":["React","useEventCallback","useMergedRefs","getIntrinsicElementProps","slot","useIsomorphicLayoutEffect","useCharacterSearch","useMenuTriggerContext_unstable","useMenuListContext_unstable","useMenuContext_unstable","useARIAButtonProps","Enter","Space","useIsInMenuSplitGroup","useMenuSplitGroupContext_unstable","useValidateNesting","useMenuItemBase_unstable","props","ref","isSubmenuTrigger","persistOnClickContext","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","content","_content","rest","hasIcons","hasCheckmarks","useIconAndCheckmarkAlignment","setOpen","open","useNotifySplitItemMultiline","multiline","subText","innerRef","useRef","dismissedWithKeyboardRef","validateNestingRef","getValidateNestingComponentName","role","state","submenuOpen","components","root","icon","checkmark","submenuIndicator","secondaryContent","always","disabledFocusable","onKeyDown","event","isDefaultPrevented","key","current","onMouseMove","currentTarget","ownerDocument","activeElement","focus","onClick","keyboard","bubble","type","elementType","optional","renderByDefault","children","defaultProps","options","isSplitItemTrigger","setMultiline"],"mappings":"AAAA;;;;;+BAyBagB;;;;;;;iEAvBU,QAAQ;gCAOxB,4BAA4B;oCACA,uBAAuB;oCACX,oCAAoC;iCACvC,iCAAiC;6BACrC,6BAA6B;2BAGlC,uBAAuB;8BAC7B,0BAA0B;uCACkB,uCAAuC;oCAC7E,iCAAiC;AAM7D,iCAAiC,CACtCC,OACAC;IAEA,MAAMC,uBAAmBZ,kDAAAA;IACzB,MAAMa,4BAAwBX,oCAAAA,EAAwBY,CAAAA,UAAWA,QAAQC,kBAAkB;IAC3F,MAAM,EACJC,KAAK,KAAK,EACVC,WAAW,KAAK,EAChBC,aAAaN,gBAAgB,EAC7BO,iBAAiBN,qBAAqB,EACtCO,SAASC,QAAQ,EACjB,GAAGC,MACJ,GAAGZ;IACJ,MAAM,EAAEa,QAAQ,EAAEC,aAAa,EAAE,GAAGC,6BAA6B;QAAEP;IAAW;IAC9E,MAAMQ,cAAUxB,oCAAAA,EAAwBY,CAAAA,UAAWA,QAAQY,OAAO;IAClE,MAAMC,WAAOzB,oCAAAA,EAAwBY,CAAAA,UAAWA,QAAQa,IAAI;IAC5DC,4BAA4B;QAAEC,WAAW,CAAC,CAACnB,MAAMoB,OAAO;QAAEZ;IAAW;IAErE,MAAMa,WAAWtC,OAAMuC,MAAM,CAAuC;IACpE,MAAMC,2BAA2BxC,OAAMuC,MAAM,CAAC;IAE9C,MAAME,yBAAqB1B,sCAAAA,EAAmB2B,gCAAgCzB,MAAM0B,IAAI;IAExF,MAAMC,QAAuB;QAC3BnB;QACAoB,aAAapB,cAAcS;QAC3BV;QACAE;QACAoB,YAAY;YACVC,MAAM;YACNC,MAAM;YACNC,WAAW;YACXC,kBAAkB;YAClBvB,SAAS;YACTwB,kBAAkB;YAClBd,SAAS;QACX;QACAU,MAAM3C,oBAAAA,CAAKgD,MAAM,KACfjD,wCAAAA,EACEoB,QACAb,6BAAAA,EAAkDa,IAAI;YACpDoB,MAAM;YACN,GAAGd,IAAI;YACPL,UAAU;YACV6B,mBAAmB7B;YACnBN,SAAKhB,6BAAAA,EAAcgB,KAAKoB,UAAUG;YAClCa,WAAWrD,oCAAAA,EAAiBsD,CAAAA;oBAC1BtC;iBAAAA,mBAAAA,MAAMqC,SAAAA,AAAS,MAAA,QAAfrC,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAAA,IAAAA,CAAAA,OAAkBsC;gBAClB,IAAI,CAACA,MAAMC,kBAAkB,MAAOD,CAAAA,MAAME,GAAG,KAAK7C,mBAAAA,IAAS2C,MAAME,GAAG,KAAK9C,mBAAAA,AAAI,GAAI;oBAC/E6B,yBAAyBkB,OAAO,GAAG;gBACrC;YACF;YACAC,iBAAa1D,gCAAAA,EAAiBsD,CAAAA;oBAK5BtC;gBAJA,IAAIsC,MAAMK,aAAa,CAACC,aAAa,CAACC,aAAa,KAAKP,MAAMK,aAAa,EAAE;wBAC3EtB;qBAAAA,oBAAAA,SAASoB,OAAO,AAAPA,MAAO,QAAhBpB,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAkByB,KAAK;gBACzB;iBAEA9C,qBAAAA,MAAM0C,WAAAA,AAAW,MAAA,QAAjB1C,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAAA,IAAAA,CAAAA,OAAoBsC;YACtB;YACAS,aAAS/D,gCAAAA,EAAiBsD,CAAAA;oBAYxBtC;gBAXA,IAAI,CAACQ,cAAc,CAACC,gBAAgB;oBAClCO,QAAQsB,OAAO;wBACbrB,MAAM;wBACN+B,UAAUzB,yBAAyBkB,OAAO;wBAC1CQ,QAAQ;wBACRC,MAAM;wBACNZ;oBACF;oBACAf,yBAAyBkB,OAAO,GAAG;gBACrC;gBAEAzC,kBAAAA,MAAM+C,OAAO,AAAPA,MAAO,QAAb/C,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,IAAAA,CAAAA,OAAgBsC;YAClB;QACF,KAEF;YAAEa,aAAa;QAAM;QAEvBpB,MAAM5C,oBAAAA,CAAKiE,QAAQ,CAACpD,MAAM+B,IAAI,EAAE;YAAEsB,iBAAiBxC;YAAUsC,aAAa;QAAO;QACjFnB,WAAW7C,oBAAAA,CAAKiE,QAAQ,CAACpD,MAAMgC,SAAS,EAAE;YACxCqB,iBAAiBvC;YACjBqC,aAAa;QACf;QACAlB,kBAAkB9C,oBAAAA,CAAKiE,QAAQ,CAACpD,MAAMiC,gBAAgB,EAAE;YACtDoB,iBAAiB7C;YACjB2C,aAAa;QACf;QACAzC,SAASvB,oBAAAA,CAAKiE,QAAQ,CAACpD,MAAMU,OAAO,EAAE;YACpC2C,iBAAiB,CAAC,CAACrD,MAAMsD,QAAQ;YACjCC,cAAc;gBAAED,UAAUtD,MAAMsD,QAAQ;YAAC;YACzCH,aAAa;QACf;QACAjB,kBAAkB/C,oBAAAA,CAAKiE,QAAQ,CAACpD,MAAMkC,gBAAgB,EAAE;YAAEiB,aAAa;QAAO;QAC9E/B,SAASjC,oBAAAA,CAAKiE,QAAQ,CAACpD,MAAMoB,OAAO,EAAE;YAAE+B,aAAa;QAAO;IAC9D;QACA9D,sCAAAA,EAAmBsC,OAAON;IAC1B,OAAOM;AACT,EAAE;AAEF;;;CAGC,GACD,MAAMT,8BAA8B,CAACsC;IACnC,MAAM,EAAEhD,UAAU,EAAEW,SAAS,EAAE,GAAGqC;IAClC,MAAMC,yBAAqB7D,4CAAAA,OAA2BY;IAEtD,MAAM,EAAEkD,YAAY,EAAE,OAAG7D,wDAAAA;QAEzBT,yCAAAA,EAA0B;QACxB,IAAI,CAACqE,oBAAoB;YACvBC,aAAavC;QACf;IACF,GAAG;QAACuC;QAAcvC;QAAWsC;KAAmB;AAClD;AAEA,MAAM1C,+BAA+B,CAACyC;IACpC,MAAM,EAAEhD,UAAU,EAAE,GAAGgD;IACvB,MAAM3C,eAAWtB,4CAAAA,EAA4Ba,CAAAA,UAAWA,QAAQS,QAAQ;IACxE,MAAMC,oBAAgBvB,4CAAAA,EAA4Ba,CAAAA,UAAWA,QAAQU,aAAa;IAClF,MAAM2C,yBAAqB7D,4CAAAA,OAA2BY;IAEtD,OAAO;QACLK,UAAUA,YAAY,CAAC4C;QACvB3C,eAAeA,iBAAiB,CAAC2C;IACnC;AACF;AAEA,MAAMhC,kCAAkC,CAACC;IACvC,OAAQA;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;IACX;IACA,OAAO;AACT"}
@@ -108,6 +108,16 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
108
108
  Baz25je: "f68mna0",
109
109
  cmx5o7: "f1p5zmk"
110
110
  },
111
+ submenuOpen: {
112
+ De3pzq: "f5gciec",
113
+ sj55zd: "fmh2wxz",
114
+ D0sxk3: "fxoiby5",
115
+ t6yez3: "f15q0o9g",
116
+ B3y4be1: "f17gqod3",
117
+ B2i6fwv: "f15ms52v",
118
+ By8wz76: "fix5gee",
119
+ B7iucu3: "f1gokeew"
120
+ },
111
121
  disabled: {
112
122
  sj55zd: "f1s2aq7o",
113
123
  Bi91k9c: "fvgxktp",
@@ -147,24 +157,27 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
147
157
  ".f1yn80uh::before{width:var(--strokeWidthThin);}",
148
158
  ".f68mna0::before{height:24px;}",
149
159
  ".f1p5zmk::before{background-color:var(--colorNeutralStroke1);}",
160
+ ".f5gciec{background-color:var(--colorNeutralBackground1Hover);}",
161
+ ".fmh2wxz{color:var(--colorNeutralForeground2Hover);}",
162
+ ".fxoiby5 .fui-Icon-filled{display:inline;}",
163
+ ".f15q0o9g .fui-Icon-regular{display:none;}",
164
+ ".f17gqod3 .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}",
165
+ ".f15ms52v .fui-MenuItem__subText{color:var(--colorNeutralForeground3Hover);}",
150
166
  ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"
151
167
  ],
152
- h: [
153
- ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}",
154
- ".f1ijtazh:hover{background-color:var(--colorNeutralBackground1);}",
155
- ".fphbwmw:hover{cursor:not-allowed;}",
156
- ".f19vpps7:hover .fui-Icon-filled{display:none;}",
157
- ".fv5swzo:hover .fui-Icon-regular{display:inline;}",
158
- ".f1q1x1ba:hover .fui-MenuItem__icon{color:var(--colorNeutralForegroundDisabled);}",
159
- ".ff3wrqt:hover .fui-MenuItem__subText{color:var(--colorNeutralForegroundDisabled);}",
160
- ".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}",
161
- ".f1to34ca:hover:active{background-color:var(--colorNeutralBackground1);}",
162
- ".fszh5vc:hover:active .fui-MenuItem__subText{color:var(--colorNeutralForegroundDisabled);}"
163
- ],
164
- f: [
165
- ".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}"
166
- ],
167
168
  m: [
169
+ [
170
+ "@media (forced-colors: active){.fix5gee{background-color:Canvas;}}",
171
+ {
172
+ m: "(forced-colors: active)"
173
+ }
174
+ ],
175
+ [
176
+ "@media (forced-colors: active){.f1gokeew{color:Highlight;}}",
177
+ {
178
+ m: "(forced-colors: active)"
179
+ }
180
+ ],
168
181
  [
169
182
  "@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}",
170
183
  {
@@ -231,6 +244,21 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
231
244
  m: "(forced-colors: active)"
232
245
  }
233
246
  ]
247
+ ],
248
+ h: [
249
+ ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}",
250
+ ".f1ijtazh:hover{background-color:var(--colorNeutralBackground1);}",
251
+ ".fphbwmw:hover{cursor:not-allowed;}",
252
+ ".f19vpps7:hover .fui-Icon-filled{display:none;}",
253
+ ".fv5swzo:hover .fui-Icon-regular{display:inline;}",
254
+ ".f1q1x1ba:hover .fui-MenuItem__icon{color:var(--colorNeutralForegroundDisabled);}",
255
+ ".ff3wrqt:hover .fui-MenuItem__subText{color:var(--colorNeutralForegroundDisabled);}",
256
+ ".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}",
257
+ ".f1to34ca:hover:active{background-color:var(--colorNeutralBackground1);}",
258
+ ".fszh5vc:hover:active .fui-MenuItem__subText{color:var(--colorNeutralForegroundDisabled);}"
259
+ ],
260
+ f: [
261
+ ".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}"
234
262
  ]
235
263
  });
236
264
  const useSubTextStyles = /*#__PURE__*/ (0, _react.__styles)({
@@ -281,23 +309,30 @@ const useMenuItemStyles_unstable = (state)=>{
281
309
  const subtextBaseStyles = useSubtextBaseStyles();
282
310
  const subTextStyles = useSubTextStyles();
283
311
  const multiline = !!state.subText;
284
- state.root.className = (0, _react.mergeClasses)(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);
312
+ // eslint-disable-next-line react-hooks/immutability
313
+ state.root.className = (0, _react.mergeClasses)(menuItemClassNames.root, rootBaseStyles, state.submenuOpen && styles.submenuOpen, state.disabled && styles.disabled, state.root.className);
285
314
  if (state.content) {
315
+ // eslint-disable-next-line react-hooks/immutability
286
316
  state.content.className = (0, _react.mergeClasses)(menuItemClassNames.content, contentBaseStyles, state.content.className, multiline && multilineStyles.content);
287
317
  }
288
318
  if (state.checkmark) {
319
+ // eslint-disable-next-line react-hooks/immutability
289
320
  state.checkmark.className = (0, _react.mergeClasses)(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);
290
321
  }
291
322
  if (state.secondaryContent) {
323
+ // eslint-disable-next-line react-hooks/immutability
292
324
  state.secondaryContent.className = (0, _react.mergeClasses)(menuItemClassNames.secondaryContent, secondaryContentBaseStyles, state.disabled && styles.disabled, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);
293
325
  }
294
326
  if (state.icon) {
327
+ // eslint-disable-next-line react-hooks/immutability
295
328
  state.icon.className = (0, _react.mergeClasses)(menuItemClassNames.icon, iconBaseStyles, state.icon.className);
296
329
  }
297
330
  if (state.submenuIndicator) {
331
+ // eslint-disable-next-line react-hooks/immutability
298
332
  state.submenuIndicator.className = (0, _react.mergeClasses)(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className, multiline && multilineStyles.submenuIndicator);
299
333
  }
300
334
  if (state.subText) {
335
+ // eslint-disable-next-line react-hooks/immutability
301
336
  state.subText.className = (0, _react.mergeClasses)(menuItemClassNames.subText, state.disabled && subTextStyles.disabled, state.subText.className, subtextBaseStyles);
302
337
  }
303
338
  (0, _index.useCheckmarkStyles_unstable)(state);
@@ -1 +1 @@
1
- {"version":3,"sources":["useMenuItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nexport const menuItemClassNames = {\n root: 'fui-MenuItem',\n icon: 'fui-MenuItem__icon',\n checkmark: 'fui-MenuItem__checkmark',\n submenuIndicator: 'fui-MenuItem__submenuIndicator',\n content: 'fui-MenuItem__content',\n secondaryContent: 'fui-MenuItem__secondaryContent',\n subText: 'fui-MenuItem__subText'\n};\nconst useRootBaseStyles = makeResetStyles({\n borderRadius: tokens.borderRadiusMedium,\n position: 'relative',\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackground1,\n paddingRight: tokens.spacingVerticalSNudge,\n paddingLeft: tokens.spacingVerticalSNudge,\n paddingTop: tokens.spacingVerticalSNudge,\n paddingBottom: tokens.spacingVerticalSNudge,\n boxSizing: 'border-box',\n maxWidth: '290px',\n minHeight: '32px',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'start',\n fontSize: tokens.fontSizeBase300,\n cursor: 'pointer',\n gap: '4px',\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground2Hover,\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n },\n [`& .${menuItemClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandSelected\n },\n [`& .${menuItemClassNames.subText}`]: {\n color: tokens.colorNeutralForeground3Hover\n }\n },\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n [`& .${menuItemClassNames.subText}`]: {\n color: tokens.colorNeutralForeground3Pressed\n }\n },\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'Canvas',\n borderColor: 'Highlight',\n color: 'Highlight'\n },\n ...createFocusOutlineStyle({\n style: {\n outlineColor: 'Highlight'\n }\n })\n },\n userSelect: 'none',\n ...createFocusOutlineStyle()\n});\nconst useContentBaseStyles = makeResetStyles({\n paddingLeft: '2px',\n paddingRight: '2px',\n backgroundColor: 'transparent',\n flexGrow: 1\n});\nconst useSecondaryContentBaseStyles = makeResetStyles({\n paddingLeft: '2px',\n paddingRight: '2px',\n ...typographyStyles.caption1,\n lineHeight: tokens.lineHeightBase300,\n color: tokens.colorNeutralForeground3,\n ':hover': {\n color: tokens.colorNeutralForeground3Hover\n },\n ':focus': {\n color: tokens.colorNeutralForeground3Hover\n }\n});\nconst useIconBaseStyles = makeResetStyles({\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n flexShrink: 0\n});\nconst useSubmenuIndicatorBaseStyles = makeResetStyles({\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center'\n});\nconst useSubtextBaseStyles = makeResetStyles({\n ...typographyStyles.caption2,\n color: tokens.colorNeutralForeground3\n});\nconst useStyles = makeStyles({\n checkmark: {\n marginTop: '2px'\n },\n splitItemMain: {\n flexGrow: 1\n },\n splitItemTrigger: {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n paddingLeft: 0,\n '::before': {\n content: '\"\"',\n width: tokens.strokeWidthThin,\n height: '24px',\n backgroundColor: tokens.colorNeutralStroke1\n }\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorNeutralBackground1,\n cursor: 'not-allowed',\n [`& .${iconFilledClassName}`]: {\n display: 'none'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline'\n },\n [`& .${menuItemClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundDisabled\n },\n [`& .${menuItemClassNames.subText}`]: {\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n ':hover:active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorNeutralBackground1,\n [`& .${menuItemClassNames.subText}`]: {\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n ':focus': {\n color: tokens.colorNeutralForegroundDisabled\n },\n '@media (forced-colors: active)': {\n color: 'GrayText',\n ':hover': {\n color: 'GrayText',\n backgroundColor: 'Canvas',\n [`& .${menuItemClassNames.icon}`]: {\n color: 'GrayText',\n backgroundColor: 'Canvas'\n },\n [`& .${menuItemClassNames.subText}`]: {\n color: 'GrayText'\n }\n },\n ':hover:active': {\n color: 'GrayText',\n backgroundColor: 'Canvas',\n [`& .${menuItemClassNames.subText}`]: {\n color: 'GrayText'\n }\n },\n ':focus': {\n color: 'GrayText',\n backgroundColor: 'Canvas'\n }\n }\n }\n});\nconst useSubTextStyles = makeStyles({\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n }\n});\nconst useMultilineStyles = makeStyles({\n content: {\n display: 'flex',\n flexDirection: 'column'\n },\n secondaryContent: {\n alignSelf: 'center'\n },\n submenuIndicator: {\n alignSelf: 'center'\n }\n});\n/** Applies style classnames to slots */ export const useMenuItemStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const rootBaseStyles = useRootBaseStyles();\n const contentBaseStyles = useContentBaseStyles();\n const secondaryContentBaseStyles = useSecondaryContentBaseStyles();\n const iconBaseStyles = useIconBaseStyles();\n const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();\n const multilineStyles = useMultilineStyles();\n const subtextBaseStyles = useSubtextBaseStyles();\n const subTextStyles = useSubTextStyles();\n const multiline = !!state.subText;\n state.root.className = mergeClasses(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemClassNames.content, contentBaseStyles, state.content.className, multiline && multilineStyles.content);\n }\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, secondaryContentBaseStyles, state.disabled && styles.disabled, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);\n }\n if (state.submenuIndicator) {\n state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className, multiline && multilineStyles.submenuIndicator);\n }\n if (state.subText) {\n state.subText.className = mergeClasses(menuItemClassNames.subText, state.disabled && subTextStyles.disabled, state.subText.className, subtextBaseStyles);\n }\n useCheckmarkStyles_unstable(state);\n return state;\n};\n"],"names":["mergeClasses","__styles","__resetStyles","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","typographyStyles","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","subText","useRootBaseStyles","r","s","useContentBaseStyles","useSecondaryContentBaseStyles","useIconBaseStyles","useSubmenuIndicatorBaseStyles","useSubtextBaseStyles","useStyles","B6of3ja","splitItemMain","Bh6795r","splitItemTrigger","Btl43ni","Beyfa6y","uwmqm3","Ftih45","Ccq8qp","Baz25je","cmx5o7","disabled","sj55zd","Bi91k9c","Jwef8y","eoavqd","Bk3fhr4","Bmfj8id","Bg7n49j","c7f7en","B2d53fq","iro3zm","Bumww26","t0hwav","B7iucu3","Bahaeuw","Bbkh6qg","B3ejlan","B41git9","Boq1n10","Dcq74g","rxnm8d","wxluhh","idgcvv","j9xr24","d","h","f","m","useSubTextStyles","useMultilineStyles","mc9l5x","Beiy3e4","qb2dma","useMenuItemStyles_unstable","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","multilineStyles","subtextBaseStyles","subTextStyles","multiline","className"],"mappings":"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"}
1
+ {"version":3,"sources":["useMenuItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nexport const menuItemClassNames = {\n root: 'fui-MenuItem',\n icon: 'fui-MenuItem__icon',\n checkmark: 'fui-MenuItem__checkmark',\n submenuIndicator: 'fui-MenuItem__submenuIndicator',\n content: 'fui-MenuItem__content',\n secondaryContent: 'fui-MenuItem__secondaryContent',\n subText: 'fui-MenuItem__subText'\n};\nconst useRootBaseStyles = makeResetStyles({\n borderRadius: tokens.borderRadiusMedium,\n position: 'relative',\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackground1,\n paddingRight: tokens.spacingVerticalSNudge,\n paddingLeft: tokens.spacingVerticalSNudge,\n paddingTop: tokens.spacingVerticalSNudge,\n paddingBottom: tokens.spacingVerticalSNudge,\n boxSizing: 'border-box',\n maxWidth: '290px',\n minHeight: '32px',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'start',\n fontSize: tokens.fontSizeBase300,\n cursor: 'pointer',\n gap: '4px',\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground2Hover,\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n },\n [`& .${menuItemClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandSelected\n },\n [`& .${menuItemClassNames.subText}`]: {\n color: tokens.colorNeutralForeground3Hover\n }\n },\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n [`& .${menuItemClassNames.subText}`]: {\n color: tokens.colorNeutralForeground3Pressed\n }\n },\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'Canvas',\n borderColor: 'Highlight',\n color: 'Highlight'\n },\n ...createFocusOutlineStyle({\n style: {\n outlineColor: 'Highlight'\n }\n })\n },\n userSelect: 'none',\n ...createFocusOutlineStyle()\n});\nconst useContentBaseStyles = makeResetStyles({\n paddingLeft: '2px',\n paddingRight: '2px',\n backgroundColor: 'transparent',\n flexGrow: 1\n});\nconst useSecondaryContentBaseStyles = makeResetStyles({\n paddingLeft: '2px',\n paddingRight: '2px',\n ...typographyStyles.caption1,\n lineHeight: tokens.lineHeightBase300,\n color: tokens.colorNeutralForeground3,\n ':hover': {\n color: tokens.colorNeutralForeground3Hover\n },\n ':focus': {\n color: tokens.colorNeutralForeground3Hover\n }\n});\nconst useIconBaseStyles = makeResetStyles({\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n flexShrink: 0\n});\nconst useSubmenuIndicatorBaseStyles = makeResetStyles({\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center'\n});\nconst useSubtextBaseStyles = makeResetStyles({\n ...typographyStyles.caption2,\n color: tokens.colorNeutralForeground3\n});\nconst useStyles = makeStyles({\n checkmark: {\n marginTop: '2px'\n },\n splitItemMain: {\n flexGrow: 1\n },\n splitItemTrigger: {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n paddingLeft: 0,\n '::before': {\n content: '\"\"',\n width: tokens.strokeWidthThin,\n height: '24px',\n backgroundColor: tokens.colorNeutralStroke1\n }\n },\n submenuOpen: {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground2Hover,\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n },\n [`& .${menuItemClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandSelected\n },\n [`& .${menuItemClassNames.subText}`]: {\n color: tokens.colorNeutralForeground3Hover\n },\n '@media (forced-colors: active)': {\n backgroundColor: 'Canvas',\n color: 'Highlight'\n }\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorNeutralBackground1,\n cursor: 'not-allowed',\n [`& .${iconFilledClassName}`]: {\n display: 'none'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline'\n },\n [`& .${menuItemClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundDisabled\n },\n [`& .${menuItemClassNames.subText}`]: {\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n ':hover:active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorNeutralBackground1,\n [`& .${menuItemClassNames.subText}`]: {\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n ':focus': {\n color: tokens.colorNeutralForegroundDisabled\n },\n '@media (forced-colors: active)': {\n color: 'GrayText',\n ':hover': {\n color: 'GrayText',\n backgroundColor: 'Canvas',\n [`& .${menuItemClassNames.icon}`]: {\n color: 'GrayText',\n backgroundColor: 'Canvas'\n },\n [`& .${menuItemClassNames.subText}`]: {\n color: 'GrayText'\n }\n },\n ':hover:active': {\n color: 'GrayText',\n backgroundColor: 'Canvas',\n [`& .${menuItemClassNames.subText}`]: {\n color: 'GrayText'\n }\n },\n ':focus': {\n color: 'GrayText',\n backgroundColor: 'Canvas'\n }\n }\n }\n});\nconst useSubTextStyles = makeStyles({\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n }\n});\nconst useMultilineStyles = makeStyles({\n content: {\n display: 'flex',\n flexDirection: 'column'\n },\n secondaryContent: {\n alignSelf: 'center'\n },\n submenuIndicator: {\n alignSelf: 'center'\n }\n});\n/** Applies style classnames to slots */ export const useMenuItemStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const rootBaseStyles = useRootBaseStyles();\n const contentBaseStyles = useContentBaseStyles();\n const secondaryContentBaseStyles = useSecondaryContentBaseStyles();\n const iconBaseStyles = useIconBaseStyles();\n const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();\n const multilineStyles = useMultilineStyles();\n const subtextBaseStyles = useSubtextBaseStyles();\n const subTextStyles = useSubTextStyles();\n const multiline = !!state.subText;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(menuItemClassNames.root, rootBaseStyles, state.submenuOpen && styles.submenuOpen, state.disabled && styles.disabled, state.root.className);\n if (state.content) {\n // eslint-disable-next-line react-hooks/immutability\n state.content.className = mergeClasses(menuItemClassNames.content, contentBaseStyles, state.content.className, multiline && multilineStyles.content);\n }\n if (state.checkmark) {\n // eslint-disable-next-line react-hooks/immutability\n state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);\n }\n if (state.secondaryContent) {\n // eslint-disable-next-line react-hooks/immutability\n state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, secondaryContentBaseStyles, state.disabled && styles.disabled, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);\n }\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);\n }\n if (state.submenuIndicator) {\n // eslint-disable-next-line react-hooks/immutability\n state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className, multiline && multilineStyles.submenuIndicator);\n }\n if (state.subText) {\n // eslint-disable-next-line react-hooks/immutability\n state.subText.className = mergeClasses(menuItemClassNames.subText, state.disabled && subTextStyles.disabled, state.subText.className, subtextBaseStyles);\n }\n useCheckmarkStyles_unstable(state);\n return state;\n};\n"],"names":["mergeClasses","__styles","__resetStyles","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","typographyStyles","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","subText","useRootBaseStyles","r","s","useContentBaseStyles","useSecondaryContentBaseStyles","useIconBaseStyles","useSubmenuIndicatorBaseStyles","useSubtextBaseStyles","useStyles","B6of3ja","splitItemMain","Bh6795r","splitItemTrigger","Btl43ni","Beyfa6y","uwmqm3","Ftih45","Ccq8qp","Baz25je","cmx5o7","submenuOpen","De3pzq","sj55zd","D0sxk3","t6yez3","B3y4be1","B2i6fwv","By8wz76","B7iucu3","disabled","Bi91k9c","Jwef8y","eoavqd","Bk3fhr4","Bmfj8id","Bg7n49j","c7f7en","B2d53fq","iro3zm","Bumww26","t0hwav","Bahaeuw","Bbkh6qg","B3ejlan","B41git9","Boq1n10","Dcq74g","rxnm8d","wxluhh","idgcvv","j9xr24","d","m","h","f","useSubTextStyles","useMultilineStyles","mc9l5x","Beiy3e4","qb2dma","useMenuItemStyles_unstable","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","multilineStyles","subtextBaseStyles","subTextStyles","multiline","className"],"mappings":"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"}