@fluentui/react-menu 0.0.0-nightly-20250717-0406.1 → 0.0.0-nightly-20250718-0405.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 (50) hide show
  1. package/CHANGELOG.md +30 -17
  2. package/lib/components/MenuDivider/useMenuDividerStyles.styles.raw.js +18 -0
  3. package/lib/components/MenuDivider/useMenuDividerStyles.styles.raw.js.map +1 -0
  4. package/lib/components/MenuGroup/useMenuGroupStyles.styles.raw.js +9 -0
  5. package/lib/components/MenuGroup/useMenuGroupStyles.styles.raw.js.map +1 -0
  6. package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js +23 -0
  7. package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js.map +1 -0
  8. package/lib/components/MenuItem/useMenuItemStyles.styles.raw.js +241 -0
  9. package/lib/components/MenuItem/useMenuItemStyles.styles.raw.js.map +1 -0
  10. package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js +33 -0
  11. package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js.map +1 -0
  12. package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js +40 -0
  13. package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js.map +1 -0
  14. package/lib/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js +32 -0
  15. package/lib/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js.map +1 -0
  16. package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js +117 -0
  17. package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js.map +1 -0
  18. package/lib/components/MenuList/useMenuListStyles.styles.raw.js +22 -0
  19. package/lib/components/MenuList/useMenuListStyles.styles.raw.js.map +1 -0
  20. package/lib/components/MenuPopover/useMenuPopoverStyles.styles.raw.js +31 -0
  21. package/lib/components/MenuPopover/useMenuPopoverStyles.styles.raw.js.map +1 -0
  22. package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js +42 -0
  23. package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js.map +1 -0
  24. package/lib/selectable/useCheckmarkStyles.styles.raw.js +24 -0
  25. package/lib/selectable/useCheckmarkStyles.styles.raw.js.map +1 -0
  26. package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.raw.js +36 -0
  27. package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.raw.js.map +1 -0
  28. package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.styles.raw.js +27 -0
  29. package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.styles.raw.js.map +1 -0
  30. package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js +41 -0
  31. package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js.map +1 -0
  32. package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.raw.js +259 -0
  33. package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.raw.js.map +1 -0
  34. package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js +51 -0
  35. package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js.map +1 -0
  36. package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js +56 -0
  37. package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js.map +1 -0
  38. package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js +50 -0
  39. package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js.map +1 -0
  40. package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js +136 -0
  41. package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js.map +1 -0
  42. package/lib-commonjs/components/MenuList/useMenuListStyles.styles.raw.js +38 -0
  43. package/lib-commonjs/components/MenuList/useMenuListStyles.styles.raw.js.map +1 -0
  44. package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.raw.js +47 -0
  45. package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.raw.js.map +1 -0
  46. package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js +61 -0
  47. package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js.map +1 -0
  48. package/lib-commonjs/selectable/useCheckmarkStyles.styles.raw.js +30 -0
  49. package/lib-commonjs/selectable/useCheckmarkStyles.styles.raw.js.map +1 -0
  50. package/package.json +14 -14
@@ -0,0 +1,259 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ menuItemClassNames: function() {
13
+ return menuItemClassNames;
14
+ },
15
+ useMenuItemStyles_unstable: function() {
16
+ return useMenuItemStyles_unstable;
17
+ }
18
+ });
19
+ const _react = require("@griffel/react");
20
+ const _reacticons = require("@fluentui/react-icons");
21
+ const _reacttabster = require("@fluentui/react-tabster");
22
+ const _reacttheme = require("@fluentui/react-theme");
23
+ const _index = require("../../selectable/index");
24
+ const menuItemClassNames = {
25
+ root: 'fui-MenuItem',
26
+ icon: 'fui-MenuItem__icon',
27
+ checkmark: 'fui-MenuItem__checkmark',
28
+ submenuIndicator: 'fui-MenuItem__submenuIndicator',
29
+ content: 'fui-MenuItem__content',
30
+ secondaryContent: 'fui-MenuItem__secondaryContent',
31
+ subText: 'fui-MenuItem__subText'
32
+ };
33
+ const useRootBaseStyles = (0, _react.makeResetStyles)({
34
+ borderRadius: _reacttheme.tokens.borderRadiusMedium,
35
+ position: 'relative',
36
+ color: _reacttheme.tokens.colorNeutralForeground2,
37
+ backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
38
+ paddingRight: _reacttheme.tokens.spacingVerticalSNudge,
39
+ paddingLeft: _reacttheme.tokens.spacingVerticalSNudge,
40
+ paddingTop: _reacttheme.tokens.spacingVerticalSNudge,
41
+ paddingBottom: _reacttheme.tokens.spacingVerticalSNudge,
42
+ boxSizing: 'border-box',
43
+ maxWidth: '290px',
44
+ minHeight: '32px',
45
+ flexShrink: 0,
46
+ display: 'flex',
47
+ alignItems: 'start',
48
+ fontSize: _reacttheme.tokens.fontSizeBase300,
49
+ cursor: 'pointer',
50
+ gap: '4px',
51
+ ':hover': {
52
+ backgroundColor: _reacttheme.tokens.colorNeutralBackground1Hover,
53
+ color: _reacttheme.tokens.colorNeutralForeground2Hover,
54
+ [`& .${_reacticons.iconFilledClassName}`]: {
55
+ display: 'inline'
56
+ },
57
+ [`& .${_reacticons.iconRegularClassName}`]: {
58
+ display: 'none'
59
+ },
60
+ [`& .${menuItemClassNames.icon}`]: {
61
+ color: _reacttheme.tokens.colorNeutralForeground2BrandSelected
62
+ },
63
+ [`& .${menuItemClassNames.subText}`]: {
64
+ color: _reacttheme.tokens.colorNeutralForeground3Hover
65
+ }
66
+ },
67
+ ':hover:active': {
68
+ backgroundColor: _reacttheme.tokens.colorNeutralBackground1Pressed,
69
+ color: _reacttheme.tokens.colorNeutralForeground2Pressed,
70
+ [`& .${menuItemClassNames.subText}`]: {
71
+ color: _reacttheme.tokens.colorNeutralForeground3Pressed
72
+ }
73
+ },
74
+ // High contrast styles
75
+ '@media (forced-colors: active)': {
76
+ ':hover': {
77
+ backgroundColor: 'Canvas',
78
+ borderColor: 'Highlight',
79
+ color: 'Highlight'
80
+ },
81
+ ...(0, _reacttabster.createFocusOutlineStyle)({
82
+ style: {
83
+ outlineColor: 'Highlight'
84
+ }
85
+ })
86
+ },
87
+ userSelect: 'none',
88
+ ...(0, _reacttabster.createFocusOutlineStyle)()
89
+ });
90
+ const useContentBaseStyles = (0, _react.makeResetStyles)({
91
+ paddingLeft: '2px',
92
+ paddingRight: '2px',
93
+ backgroundColor: 'transparent',
94
+ flexGrow: 1
95
+ });
96
+ const useSecondaryContentBaseStyles = (0, _react.makeResetStyles)({
97
+ paddingLeft: '2px',
98
+ paddingRight: '2px',
99
+ ..._reacttheme.typographyStyles.caption1,
100
+ lineHeight: _reacttheme.tokens.lineHeightBase300,
101
+ color: _reacttheme.tokens.colorNeutralForeground3,
102
+ ':hover': {
103
+ color: _reacttheme.tokens.colorNeutralForeground3Hover
104
+ },
105
+ ':focus': {
106
+ color: _reacttheme.tokens.colorNeutralForeground3Hover
107
+ }
108
+ });
109
+ const useIconBaseStyles = (0, _react.makeResetStyles)({
110
+ width: '20px',
111
+ height: '20px',
112
+ fontSize: '20px',
113
+ lineHeight: 0,
114
+ alignItems: 'center',
115
+ display: 'inline-flex',
116
+ justifyContent: 'center',
117
+ flexShrink: 0
118
+ });
119
+ const useSubmenuIndicatorBaseStyles = (0, _react.makeResetStyles)({
120
+ width: '20px',
121
+ height: '20px',
122
+ fontSize: '20px',
123
+ lineHeight: 0,
124
+ alignItems: 'center',
125
+ display: 'inline-flex',
126
+ justifyContent: 'center'
127
+ });
128
+ const useSubtextBaseStyles = (0, _react.makeResetStyles)({
129
+ ..._reacttheme.typographyStyles.caption2,
130
+ color: _reacttheme.tokens.colorNeutralForeground3
131
+ });
132
+ const useStyles = (0, _react.makeStyles)({
133
+ checkmark: {
134
+ marginTop: '2px'
135
+ },
136
+ splitItemMain: {
137
+ flexGrow: 1
138
+ },
139
+ splitItemTrigger: {
140
+ borderTopLeftRadius: 0,
141
+ borderBottomLeftRadius: 0,
142
+ paddingLeft: 0,
143
+ '::before': {
144
+ content: '""',
145
+ width: _reacttheme.tokens.strokeWidthThin,
146
+ height: '24px',
147
+ backgroundColor: _reacttheme.tokens.colorNeutralStroke1
148
+ }
149
+ },
150
+ disabled: {
151
+ color: _reacttheme.tokens.colorNeutralForegroundDisabled,
152
+ ':hover': {
153
+ color: _reacttheme.tokens.colorNeutralForegroundDisabled,
154
+ backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
155
+ cursor: 'not-allowed',
156
+ [`& .${_reacticons.iconFilledClassName}`]: {
157
+ display: 'none'
158
+ },
159
+ [`& .${_reacticons.iconRegularClassName}`]: {
160
+ display: 'inline'
161
+ },
162
+ [`& .${menuItemClassNames.icon}`]: {
163
+ color: _reacttheme.tokens.colorNeutralForegroundDisabled
164
+ },
165
+ [`& .${menuItemClassNames.subText}`]: {
166
+ color: _reacttheme.tokens.colorNeutralForegroundDisabled
167
+ }
168
+ },
169
+ ':hover:active': {
170
+ color: _reacttheme.tokens.colorNeutralForegroundDisabled,
171
+ backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
172
+ [`& .${menuItemClassNames.subText}`]: {
173
+ color: _reacttheme.tokens.colorNeutralForegroundDisabled
174
+ }
175
+ },
176
+ ':focus': {
177
+ color: _reacttheme.tokens.colorNeutralForegroundDisabled
178
+ },
179
+ '@media (forced-colors: active)': {
180
+ color: 'GrayText',
181
+ ':hover': {
182
+ color: 'GrayText',
183
+ backgroundColor: 'Canvas',
184
+ [`& .${menuItemClassNames.icon}`]: {
185
+ color: 'GrayText',
186
+ backgroundColor: 'Canvas'
187
+ },
188
+ [`& .${menuItemClassNames.subText}`]: {
189
+ color: 'GrayText'
190
+ }
191
+ },
192
+ ':hover:active': {
193
+ color: 'GrayText',
194
+ backgroundColor: 'Canvas',
195
+ [`& .${menuItemClassNames.subText}`]: {
196
+ color: 'GrayText'
197
+ }
198
+ },
199
+ ':focus': {
200
+ color: 'GrayText',
201
+ backgroundColor: 'Canvas'
202
+ }
203
+ }
204
+ }
205
+ });
206
+ const useSubTextStyles = (0, _react.makeStyles)({
207
+ disabled: {
208
+ color: _reacttheme.tokens.colorNeutralForegroundDisabled,
209
+ '@media (forced-colors: active)': {
210
+ color: 'GrayText'
211
+ }
212
+ }
213
+ });
214
+ const useMultilineStyles = (0, _react.makeStyles)({
215
+ content: {
216
+ display: 'flex',
217
+ flexDirection: 'column'
218
+ },
219
+ secondaryContent: {
220
+ alignSelf: 'center'
221
+ },
222
+ submenuIndicator: {
223
+ alignSelf: 'center'
224
+ }
225
+ });
226
+ const useMenuItemStyles_unstable = (state)=>{
227
+ 'use no memo';
228
+ const styles = useStyles();
229
+ const rootBaseStyles = useRootBaseStyles();
230
+ const contentBaseStyles = useContentBaseStyles();
231
+ const secondaryContentBaseStyles = useSecondaryContentBaseStyles();
232
+ const iconBaseStyles = useIconBaseStyles();
233
+ const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();
234
+ const multilineStyles = useMultilineStyles();
235
+ const subtextBaseStyles = useSubtextBaseStyles();
236
+ const subTextStyles = useSubTextStyles();
237
+ const multiline = !!state.subText;
238
+ state.root.className = (0, _react.mergeClasses)(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);
239
+ if (state.content) {
240
+ state.content.className = (0, _react.mergeClasses)(menuItemClassNames.content, contentBaseStyles, state.content.className, multiline && multilineStyles.content);
241
+ }
242
+ if (state.checkmark) {
243
+ state.checkmark.className = (0, _react.mergeClasses)(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);
244
+ }
245
+ if (state.secondaryContent) {
246
+ state.secondaryContent.className = (0, _react.mergeClasses)(menuItemClassNames.secondaryContent, secondaryContentBaseStyles, state.disabled && styles.disabled, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);
247
+ }
248
+ if (state.icon) {
249
+ state.icon.className = (0, _react.mergeClasses)(menuItemClassNames.icon, iconBaseStyles, state.icon.className);
250
+ }
251
+ if (state.submenuIndicator) {
252
+ state.submenuIndicator.className = (0, _react.mergeClasses)(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className, multiline && multilineStyles.submenuIndicator);
253
+ }
254
+ if (state.subText) {
255
+ state.subText.className = (0, _react.mergeClasses)(menuItemClassNames.subText, state.disabled && subTextStyles.disabled, state.subText.className, subtextBaseStyles);
256
+ }
257
+ (0, _index.useCheckmarkStyles_unstable)(state);
258
+ return state;
259
+ };
@@ -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 [`& .${menuItemClassNames.subText}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n ':hover:active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorNeutralBackground1,\n\n [`& .${menuItemClassNames.subText}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\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 [`& .${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});\n\nconst useSubTextStyles = makeStyles({\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\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 subTextStyles = useSubTextStyles();\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 secondaryContentBaseStyles,\n state.disabled && styles.disabled,\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(\n menuItemClassNames.subText,\n state.disabled && subTextStyles.disabled,\n state.subText.className,\n subtextBaseStyles,\n );\n }\n\n useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n\n return state;\n};\n"],"names":["menuItemClassNames","useMenuItemStyles_unstable","root","icon","checkmark","submenuIndicator","content","secondaryContent","subText","useRootBaseStyles","makeResetStyles","borderRadius","tokens","borderRadiusMedium","position","color","colorNeutralForeground2","backgroundColor","colorNeutralBackground1","paddingRight","spacingVerticalSNudge","paddingLeft","paddingTop","paddingBottom","boxSizing","maxWidth","minHeight","flexShrink","display","alignItems","fontSize","fontSizeBase300","cursor","gap","colorNeutralBackground1Hover","colorNeutralForeground2Hover","iconFilledClassName","iconRegularClassName","colorNeutralForeground2BrandSelected","colorNeutralForeground3Hover","colorNeutralBackground1Pressed","colorNeutralForeground2Pressed","colorNeutralForeground3Pressed","borderColor","createFocusOutlineStyle","style","outlineColor","userSelect","useContentBaseStyles","flexGrow","useSecondaryContentBaseStyles","typographyStyles","caption1","lineHeight","lineHeightBase300","colorNeutralForeground3","useIconBaseStyles","width","height","justifyContent","useSubmenuIndicatorBaseStyles","useSubtextBaseStyles","caption2","useStyles","makeStyles","marginTop","splitItemMain","splitItemTrigger","borderTopLeftRadius","borderBottomLeftRadius","strokeWidthThin","colorNeutralStroke1","disabled","colorNeutralForegroundDisabled","useSubTextStyles","useMultilineStyles","flexDirection","alignSelf","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","multilineStyles","subtextBaseStyles","subTextStyles","multiline","className","mergeClasses","useCheckmarkStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
@@ -0,0 +1,51 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ menuItemCheckboxClassNames: function() {
13
+ return menuItemCheckboxClassNames;
14
+ },
15
+ useMenuItemCheckboxStyles_unstable: function() {
16
+ return useMenuItemCheckboxStyles_unstable;
17
+ }
18
+ });
19
+ const _react = require("@griffel/react");
20
+ const _index = require("../../selectable/index");
21
+ const _useMenuItemStylesstyles = require("../MenuItem/useMenuItemStyles.styles");
22
+ const menuItemCheckboxClassNames = {
23
+ root: 'fui-MenuItemCheckbox',
24
+ icon: 'fui-MenuItemCheckbox__icon',
25
+ checkmark: 'fui-MenuItemCheckbox__checkmark',
26
+ content: 'fui-MenuItemCheckbox__content',
27
+ secondaryContent: 'fui-MenuItemCheckbox__secondaryContent',
28
+ subText: 'fui-MenuItemCheckbox__subText'
29
+ };
30
+ const useMenuItemCheckboxStyles_unstable = (state)=>{
31
+ 'use no memo';
32
+ state.root.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.root, state.root.className);
33
+ if (state.content) {
34
+ state.content.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.content, state.content.className);
35
+ }
36
+ if (state.secondaryContent) {
37
+ state.secondaryContent.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.secondaryContent, state.secondaryContent.className);
38
+ }
39
+ if (state.icon) {
40
+ state.icon.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.icon, state.icon.className);
41
+ }
42
+ if (state.checkmark) {
43
+ state.checkmark.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.checkmark, state.checkmark.className);
44
+ }
45
+ if (state.subText) {
46
+ state.subText.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.subText, state.subText.className);
47
+ }
48
+ (0, _useMenuItemStylesstyles.useMenuItemStyles_unstable)(state);
49
+ (0, _index.useCheckmarkStyles_unstable)(state);
50
+ return state;
51
+ };
@@ -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":["menuItemCheckboxClassNames","useMenuItemCheckboxStyles_unstable","root","icon","checkmark","content","secondaryContent","subText","state","className","mergeClasses","useMenuItemStyles_unstable","useCheckmarkStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAOaA,0BAAAA;eAAAA;;IASAC,kCAAAA;eAAAA;;;uBAhBgB;uBACe;yCACD;AAKpC,MAAMD,6BAAsF;IACjGE,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;IAClBC,SAAS;AACX;AAEO,MAAMN,qCAAqC,CAACO;IACjD;IAEAA,MAAMN,IAAI,CAACO,SAAS,GAAGC,IAAAA,mBAAAA,EAAaV,2BAA2BE,IAAI,EAAEM,MAAMN,IAAI,CAACO,SAAS;IAEzF,IAAID,MAAMH,OAAO,EAAE;QACjBG,MAAMH,OAAO,CAACI,SAAS,GAAGC,IAAAA,mBAAAA,EAAaV,2BAA2BK,OAAO,EAAEG,MAAMH,OAAO,CAACI,SAAS;IACpG;IAEA,IAAID,MAAMF,gBAAgB,EAAE;QAC1BE,MAAMF,gBAAgB,CAACG,SAAS,GAAGC,IAAAA,mBAAAA,EACjCV,2BAA2BM,gBAAgB,EAC3CE,MAAMF,gBAAgB,CAACG,SAAS;IAEpC;IAEA,IAAID,MAAML,IAAI,EAAE;QACdK,MAAML,IAAI,CAACM,SAAS,GAAGC,IAAAA,mBAAAA,EAAaV,2BAA2BG,IAAI,EAAEK,MAAML,IAAI,CAACM,SAAS;IAC3F;IAEA,IAAID,MAAMJ,SAAS,EAAE;QACnBI,MAAMJ,SAAS,CAACK,SAAS,GAAGC,IAAAA,mBAAAA,EAAaV,2BAA2BI,SAAS,EAAEI,MAAMJ,SAAS,CAACK,SAAS;IAC1G;IAEA,IAAID,MAAMD,OAAO,EAAE;QACjBC,MAAMD,OAAO,CAACE,SAAS,GAAGC,IAAAA,mBAAAA,EAAaV,2BAA2BO,OAAO,EAAEC,MAAMD,OAAO,CAACE,SAAS;IACpG;IAEAE,IAAAA,mDAAAA,EAA2BH;IAC3BI,IAAAA,kCAAAA,EAA4BJ;IAE5B,OAAOA;AACT"}
@@ -0,0 +1,56 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ menuItemLinkClassNames: function() {
13
+ return menuItemLinkClassNames;
14
+ },
15
+ useMenuItemLinkStyles_unstable: function() {
16
+ return useMenuItemLinkStyles_unstable;
17
+ }
18
+ });
19
+ const _react = require("@griffel/react");
20
+ const _useMenuItemStylesstyles = require("../MenuItem/useMenuItemStyles.styles");
21
+ const menuItemLinkClassNames = {
22
+ root: 'fui-MenuItemLink',
23
+ icon: 'fui-MenuItemLink__icon',
24
+ checkmark: 'fui-MenuItemLink__checkmark',
25
+ content: 'fui-MenuItemLink__content',
26
+ secondaryContent: 'fui-MenuItemLink__secondaryContent'
27
+ };
28
+ /**
29
+ * Styles for the root slot
30
+ */ const useStyles = (0, _react.makeStyles)({
31
+ resetLink: {
32
+ textDecorationLine: 'none',
33
+ textDecorationThickness: 'initial',
34
+ textDecorationStyle: 'initial',
35
+ textDecorationColor: 'initial'
36
+ }
37
+ });
38
+ const useMenuItemLinkStyles_unstable = (state)=>{
39
+ 'use no memo';
40
+ (0, _useMenuItemStylesstyles.useMenuItemStyles_unstable)(state);
41
+ const styles = useStyles();
42
+ state.root.className = (0, _react.mergeClasses)(menuItemLinkClassNames.root, styles.resetLink, state.root.className);
43
+ if (state.icon) {
44
+ state.icon.className = (0, _react.mergeClasses)(menuItemLinkClassNames.icon, state.icon.className);
45
+ }
46
+ if (state.content) {
47
+ state.content.className = (0, _react.mergeClasses)(menuItemLinkClassNames.content, state.content.className);
48
+ }
49
+ if (state.secondaryContent) {
50
+ state.secondaryContent.className = (0, _react.mergeClasses)(menuItemLinkClassNames.secondaryContent, state.secondaryContent.className);
51
+ }
52
+ if (state.checkmark) {
53
+ state.checkmark.className = (0, _react.mergeClasses)(menuItemLinkClassNames.checkmark, state.checkmark.className);
54
+ }
55
+ return state;
56
+ };
@@ -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":["menuItemLinkClassNames","useMenuItemLinkStyles_unstable","root","icon","checkmark","content","secondaryContent","useStyles","makeStyles","resetLink","textDecorationLine","textDecorationThickness","textDecorationStyle","textDecorationColor","state","useMenuItemStyles_unstable","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,sBAAAA;eAAAA;;IAuBAC,8BAAAA;eAAAA;;;uBA7B4B;yCAGE;AAGpC,MAAMD,yBAA4D;IACvEE,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;AACpB;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BC,WAAW;QACTC,oBAAoB;QACpBC,yBAAyB;QACzBC,qBAAqB;QACrBC,qBAAqB;IACvB;AACF;AAKO,MAAMZ,iCAAiC,CAACa;IAC7C;IAEAC,IAAAA,mDAAAA,EAA2BD;IAC3B,MAAME,SAAST;IACfO,MAAMZ,IAAI,CAACe,SAAS,GAAGC,IAAAA,mBAAAA,EAAalB,uBAAuBE,IAAI,EAAEc,OAAOP,SAAS,EAAEK,MAAMZ,IAAI,CAACe,SAAS;IAEvG,IAAIH,MAAMX,IAAI,EAAE;QACdW,MAAMX,IAAI,CAACc,SAAS,GAAGC,IAAAA,mBAAAA,EAAalB,uBAAuBG,IAAI,EAAEW,MAAMX,IAAI,CAACc,SAAS;IACvF;IAEA,IAAIH,MAAMT,OAAO,EAAE;QACjBS,MAAMT,OAAO,CAACY,SAAS,GAAGC,IAAAA,mBAAAA,EAAalB,uBAAuBK,OAAO,EAAES,MAAMT,OAAO,CAACY,SAAS;IAChG;IAEA,IAAIH,MAAMR,gBAAgB,EAAE;QAC1BQ,MAAMR,gBAAgB,CAACW,SAAS,GAAGC,IAAAA,mBAAAA,EACjClB,uBAAuBM,gBAAgB,EACvCQ,MAAMR,gBAAgB,CAACW,SAAS;IAEpC;IAEA,IAAIH,MAAMV,SAAS,EAAE;QACnBU,MAAMV,SAAS,CAACa,SAAS,GAAGC,IAAAA,mBAAAA,EAAalB,uBAAuBI,SAAS,EAAEU,MAAMV,SAAS,CAACa,SAAS;IACtG;IAEA,OAAOH;AACT"}
@@ -0,0 +1,50 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ menuItemRadioClassNames: function() {
13
+ return menuItemRadioClassNames;
14
+ },
15
+ useMenuItemRadioStyles_unstable: function() {
16
+ return useMenuItemRadioStyles_unstable;
17
+ }
18
+ });
19
+ const _react = require("@griffel/react");
20
+ const _index = require("../../selectable/index");
21
+ const _useMenuItemStylesstyles = require("../MenuItem/useMenuItemStyles.styles");
22
+ const menuItemRadioClassNames = {
23
+ root: 'fui-MenuItemRadio',
24
+ icon: 'fui-MenuItemRadio__icon',
25
+ checkmark: 'fui-MenuItemRadio__checkmark',
26
+ content: 'fui-MenuItemRadio__content',
27
+ secondaryContent: 'fui-MenuItemRadio__secondaryContent',
28
+ subText: 'fui-MenuItemRadio__subText'
29
+ };
30
+ const useMenuItemRadioStyles_unstable = (state)=>{
31
+ 'use no memo';
32
+ state.root.className = (0, _react.mergeClasses)(menuItemRadioClassNames.root, state.root.className);
33
+ if (state.content) {
34
+ state.content.className = (0, _react.mergeClasses)(menuItemRadioClassNames.content, state.content.className);
35
+ }
36
+ if (state.secondaryContent) {
37
+ state.secondaryContent.className = (0, _react.mergeClasses)(menuItemRadioClassNames.secondaryContent, state.secondaryContent.className);
38
+ }
39
+ if (state.icon) {
40
+ state.icon.className = (0, _react.mergeClasses)(menuItemRadioClassNames.icon, state.icon.className);
41
+ }
42
+ if (state.checkmark) {
43
+ state.checkmark.className = (0, _react.mergeClasses)(menuItemRadioClassNames.checkmark, state.checkmark.className);
44
+ }
45
+ if (state.subText) {
46
+ state.subText.className = (0, _react.mergeClasses)(menuItemRadioClassNames.subText, state.subText.className);
47
+ }
48
+ (0, _useMenuItemStylesstyles.useMenuItemStyles_unstable)(state);
49
+ (0, _index.useCheckmarkStyles_unstable)(state);
50
+ };
@@ -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":["menuItemRadioClassNames","useMenuItemRadioStyles_unstable","root","icon","checkmark","content","secondaryContent","subText","state","className","mergeClasses","useMenuItemStyles_unstable","useCheckmarkStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAOaA,uBAAAA;eAAAA;;IASAC,+BAAAA;eAAAA;;;uBAhBgB;uBACe;yCACD;AAKpC,MAAMD,0BAAmF;IAC9FE,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;IAClBC,SAAS;AACX;AAEO,MAAMN,kCAAkC,CAACO;IAC9C;IAEAA,MAAMN,IAAI,CAACO,SAAS,GAAGC,IAAAA,mBAAAA,EAAaV,wBAAwBE,IAAI,EAAEM,MAAMN,IAAI,CAACO,SAAS;IAEtF,IAAID,MAAMH,OAAO,EAAE;QACjBG,MAAMH,OAAO,CAACI,SAAS,GAAGC,IAAAA,mBAAAA,EAAaV,wBAAwBK,OAAO,EAAEG,MAAMH,OAAO,CAACI,SAAS;IACjG;IAEA,IAAID,MAAMF,gBAAgB,EAAE;QAC1BE,MAAMF,gBAAgB,CAACG,SAAS,GAAGC,IAAAA,mBAAAA,EACjCV,wBAAwBM,gBAAgB,EACxCE,MAAMF,gBAAgB,CAACG,SAAS;IAEpC;IAEA,IAAID,MAAML,IAAI,EAAE;QACdK,MAAML,IAAI,CAACM,SAAS,GAAGC,IAAAA,mBAAAA,EAAaV,wBAAwBG,IAAI,EAAEK,MAAML,IAAI,CAACM,SAAS;IACxF;IAEA,IAAID,MAAMJ,SAAS,EAAE;QACnBI,MAAMJ,SAAS,CAACK,SAAS,GAAGC,IAAAA,mBAAAA,EAAaV,wBAAwBI,SAAS,EAAEI,MAAMJ,SAAS,CAACK,SAAS;IACvG;IAEA,IAAID,MAAMD,OAAO,EAAE;QACjBC,MAAMD,OAAO,CAACE,SAAS,GAAGC,IAAAA,mBAAAA,EAAaV,wBAAwBO,OAAO,EAAEC,MAAMD,OAAO,CAACE,SAAS;IACjG;IAEAE,IAAAA,mDAAAA,EAA2BH;IAC3BI,IAAAA,kCAAAA,EAA4BJ;AAC9B"}
@@ -0,0 +1,136 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ circleFilledClassName: function() {
13
+ return circleFilledClassName;
14
+ },
15
+ menuItemSwitchClassNames: function() {
16
+ return menuItemSwitchClassNames;
17
+ },
18
+ useMenuItemSwitchStyles_unstable: function() {
19
+ return useMenuItemSwitchStyles_unstable;
20
+ }
21
+ });
22
+ const _react = require("@griffel/react");
23
+ const _reacttheme = require("@fluentui/react-theme");
24
+ const _useMenuItemStylesstyles = require("../MenuItem/useMenuItemStyles.styles");
25
+ const menuItemSwitchClassNames = {
26
+ root: 'fui-MenuItemSwitch',
27
+ icon: 'fui-MenuItemSwitch__icon',
28
+ content: 'fui-MenuItemSwitch__content',
29
+ secondaryContent: 'fui-MenuItemSwitch__secondaryContent',
30
+ switchIndicator: 'fui-MenuItemSwitch__switchIndicator',
31
+ subText: 'fui-MenuItemSwitch__subText'
32
+ };
33
+ const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';
34
+ // Thumb and track sizes used by the component.
35
+ const spaceBetweenThumbAndTrack = 2;
36
+ const trackHeight = 20;
37
+ const trackWidth = 40;
38
+ const thumbSize = trackHeight - spaceBetweenThumbAndTrack;
39
+ const useSwitchIndicatorBaseClassName = (0, _react.makeResetStyles)({
40
+ borderRadius: _reacttheme.tokens.borderRadiusCircular,
41
+ border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStrokeAccessible}`,
42
+ lineHeight: 0,
43
+ boxSizing: 'border-box',
44
+ fill: 'currentColor',
45
+ flexShrink: 0,
46
+ fontSize: `${thumbSize}px`,
47
+ height: `${trackHeight}px`,
48
+ transitionDuration: _reacttheme.tokens.durationNormal,
49
+ transitionTimingFunction: _reacttheme.tokens.curveEasyEase,
50
+ transitionProperty: 'background, border, color',
51
+ width: `${trackWidth}px`,
52
+ marginRight: _reacttheme.tokens.spacingHorizontalXS,
53
+ '@media screen and (prefers-reduced-motion: reduce)': {
54
+ transitionDuration: '0.01ms'
55
+ },
56
+ color: _reacttheme.tokens.colorNeutralStrokeAccessible,
57
+ ':hover': {
58
+ color: _reacttheme.tokens.colorNeutralStrokeAccessibleHover,
59
+ borderColor: _reacttheme.tokens.colorNeutralStrokeAccessibleHover
60
+ },
61
+ ':hover:active': {
62
+ color: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed,
63
+ borderColor: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed
64
+ },
65
+ [`& .${circleFilledClassName}`]: {
66
+ transitionDuration: _reacttheme.tokens.durationNormal,
67
+ transitionTimingFunction: _reacttheme.tokens.curveEasyEase,
68
+ transitionProperty: 'transform',
69
+ '@media screen and (prefers-reduced-motion: reduce)': {
70
+ transitionDuration: '0.01ms'
71
+ }
72
+ }
73
+ });
74
+ const useSwitchIndicatorStyles = (0, _react.makeStyles)({
75
+ checked: {
76
+ [`& .${circleFilledClassName}`]: {
77
+ transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`
78
+ },
79
+ backgroundColor: _reacttheme.tokens.colorCompoundBrandBackground,
80
+ color: _reacttheme.tokens.colorNeutralForegroundInverted,
81
+ ..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStroke),
82
+ ':hover': {
83
+ color: _reacttheme.tokens.colorNeutralForegroundInverted,
84
+ backgroundColor: _reacttheme.tokens.colorCompoundBrandBackgroundHover,
85
+ ..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStrokeInteractive)
86
+ },
87
+ ':hover:active': {
88
+ color: _reacttheme.tokens.colorNeutralForegroundInverted,
89
+ backgroundColor: _reacttheme.tokens.colorCompoundBrandBackgroundPressed,
90
+ ..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStrokeInteractive)
91
+ }
92
+ }
93
+ });
94
+ const useMultilineStyles = (0, _react.makeStyles)({
95
+ switch: {
96
+ alignSelf: 'center'
97
+ }
98
+ });
99
+ const useMenuItemSwitchStyles_unstable = (state)=>{
100
+ 'use no memo';
101
+ const { checked, subText } = state;
102
+ const multiline = !!subText;
103
+ const switchIndicatorStyles = useSwitchIndicatorStyles();
104
+ const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();
105
+ const multilineStyles = useMultilineStyles();
106
+ state.root.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.root, state.root.className);
107
+ if (state.content) {
108
+ state.content.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.content, state.content.className);
109
+ }
110
+ if (state.secondaryContent) {
111
+ state.secondaryContent.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);
112
+ }
113
+ if (state.icon) {
114
+ state.icon.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.icon, state.icon.className);
115
+ }
116
+ if (state.subText) {
117
+ state.subText.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.subText, state.subText.className);
118
+ }
119
+ if (state.switchIndicator) {
120
+ state.switchIndicator.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className, multiline && multilineStyles.switch);
121
+ }
122
+ (0, _useMenuItemStylesstyles.useMenuItemStyles_unstable)({
123
+ ...state,
124
+ components: {
125
+ // eslint-disable-next-line @typescript-eslint/no-deprecated
126
+ ...state.components,
127
+ checkmark: 'span',
128
+ submenuIndicator: 'span'
129
+ },
130
+ checkmark: undefined,
131
+ submenuIndicator: undefined,
132
+ hasSubmenu: false,
133
+ persistOnClick: true
134
+ });
135
+ return state;
136
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.ts"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { type SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuItemSwitchSlots, MenuItemSwitchState } from './MenuItemSwitch.types';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\n\nexport const menuItemSwitchClassNames: SlotClassNames<MenuItemSwitchSlots> = {\n root: 'fui-MenuItemSwitch',\n icon: 'fui-MenuItemSwitch__icon',\n content: 'fui-MenuItemSwitch__content',\n secondaryContent: 'fui-MenuItemSwitch__secondaryContent',\n switchIndicator: 'fui-MenuItemSwitch__switchIndicator',\n subText: 'fui-MenuItemSwitch__subText',\n};\n\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\n\nconst useSwitchIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n marginRight: tokens.spacingHorizontalXS,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n color: tokens.colorNeutralStrokeAccessible,\n ':hover': {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n\n ':hover:active': {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n [`& .${circleFilledClassName}`]: {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n },\n});\n\nconst useSwitchIndicatorStyles = makeStyles({\n checked: {\n [`& .${circleFilledClassName}`]: {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`,\n },\n\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n\n ':hover': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n\n ':hover:active': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n});\n\nconst useMultilineStyles = makeStyles({\n switch: {\n alignSelf: 'center',\n },\n});\n\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */\nexport const useMenuItemSwitchStyles_unstable = (state: MenuItemSwitchState): MenuItemSwitchState => {\n 'use no memo';\n\n const { checked, subText } = state;\n const multiline = !!subText;\n const switchIndicatorStyles = useSwitchIndicatorStyles();\n const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n const multilineStyles = useMultilineStyles();\n state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemSwitchClassNames.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n }\n\n if (state.subText) {\n state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);\n }\n\n if (state.switchIndicator) {\n state.switchIndicator.className = mergeClasses(\n menuItemSwitchClassNames.switchIndicator,\n switchIndicatorBaseStyles,\n checked && switchIndicatorStyles.checked,\n state.switchIndicator.className,\n multiline && multilineStyles.switch,\n );\n }\n\n useMenuItemStyles_unstable({\n ...state,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...state.components,\n checkmark: 'span',\n submenuIndicator: 'span',\n },\n checkmark: undefined,\n submenuIndicator: undefined,\n hasSubmenu: false,\n persistOnClick: true,\n });\n\n return state;\n};\n"],"names":["circleFilledClassName","menuItemSwitchClassNames","useMenuItemSwitchStyles_unstable","root","icon","content","secondaryContent","switchIndicator","subText","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","makeResetStyles","borderRadius","tokens","borderRadiusCircular","border","strokeWidthThin","colorNeutralStrokeAccessible","lineHeight","boxSizing","fill","flexShrink","fontSize","height","transitionDuration","durationNormal","transitionTimingFunction","curveEasyEase","transitionProperty","width","marginRight","spacingHorizontalXS","color","colorNeutralStrokeAccessibleHover","borderColor","colorNeutralStrokeAccessiblePressed","useSwitchIndicatorStyles","makeStyles","checked","transform","backgroundColor","colorCompoundBrandBackground","colorNeutralForegroundInverted","shorthands","colorTransparentStroke","colorCompoundBrandBackgroundHover","colorTransparentStrokeInteractive","colorCompoundBrandBackgroundPressed","useMultilineStyles","switch","alignSelf","state","multiline","switchIndicatorStyles","switchIndicatorBaseStyles","multilineStyles","className","mergeClasses","useMenuItemStyles_unstable","components","checkmark","submenuIndicator","undefined","hasSubmenu","persistOnClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}