@fluentui/react-menu 9.0.0-rc.4 → 9.0.0-rc.7
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +186 -1
- package/CHANGELOG.md +49 -2
- package/dist/react-menu.d.ts +46 -0
- package/lib/components/MenuDivider/useMenuDividerStyles.d.ts +6 -1
- package/lib/components/MenuDivider/useMenuDividerStyles.js +8 -1
- package/lib/components/MenuDivider/useMenuDividerStyles.js.map +1 -1
- package/lib/components/MenuGroup/useMenuGroupStyles.d.ts +6 -1
- package/lib/components/MenuGroup/useMenuGroupStyles.js +8 -1
- package/lib/components/MenuGroup/useMenuGroupStyles.js.map +1 -1
- package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.d.ts +6 -1
- package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.js +8 -1
- package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.js.map +1 -1
- package/lib/components/MenuItem/useMenuItemStyles.d.ts +6 -1
- package/lib/components/MenuItem/useMenuItemStyles.js +50 -14
- package/lib/components/MenuItem/useMenuItemStyles.js.map +1 -1
- package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.d.ts +6 -0
- package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.js +29 -1
- package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.js.map +1 -1
- package/lib/components/MenuItemRadio/useMenuItemRadioStyles.d.ts +6 -0
- package/lib/components/MenuItemRadio/useMenuItemRadioStyles.js +29 -1
- package/lib/components/MenuItemRadio/useMenuItemRadioStyles.js.map +1 -1
- package/lib/components/MenuList/useMenuListStyles.d.ts +6 -1
- package/lib/components/MenuList/useMenuListStyles.js +8 -1
- package/lib/components/MenuList/useMenuListStyles.js.map +1 -1
- package/lib/components/MenuPopover/useMenuPopoverStyles.d.ts +6 -1
- package/lib/components/MenuPopover/useMenuPopoverStyles.js +8 -1
- package/lib/components/MenuPopover/useMenuPopoverStyles.js.map +1 -1
- package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.d.ts +6 -1
- package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.js +9 -2
- package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.js.map +1 -1
- package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.d.ts +6 -1
- package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.js +9 -2
- package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.js.map +1 -1
- package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.d.ts +6 -1
- package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.js +9 -2
- package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.js.map +1 -1
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.d.ts +6 -1
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.js +9 -2
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.js.map +1 -1
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.d.ts +6 -1
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.js +51 -15
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.js.map +1 -1
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.d.ts +6 -0
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.js +30 -2
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.js.map +1 -1
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.d.ts +6 -0
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.js +30 -2
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.js.map +1 -1
- package/lib-commonjs/components/MenuList/useMenuListStyles.d.ts +6 -1
- package/lib-commonjs/components/MenuList/useMenuListStyles.js +9 -2
- package/lib-commonjs/components/MenuList/useMenuListStyles.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.d.ts +6 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.js +9 -2
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.js.map +1 -1
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.d.ts +6 -1
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.js +9 -2
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.js.map +1 -1
- package/package.json +20 -23
|
@@ -2,21 +2,47 @@ import { mergeClasses, __styles, shorthands } from '@griffel/react';
|
|
|
2
2
|
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
|
|
3
3
|
import { tokens } from '@fluentui/react-theme';
|
|
4
4
|
import { useCheckmarkStyles_unstable } from '../../selectable/index';
|
|
5
|
+
/**
|
|
6
|
+
* @deprecated Use `menuItemClassNames.root` instead.
|
|
7
|
+
*/
|
|
8
|
+
|
|
5
9
|
export const menuItemClassName = 'fui-MenuItem';
|
|
10
|
+
export const menuItemClassNames = {
|
|
11
|
+
root: 'fui-MenuItem',
|
|
12
|
+
icon: 'fui-MenuItem__icon',
|
|
13
|
+
checkmark: 'fui-MenuItem__checkmark',
|
|
14
|
+
submenuIndicator: 'fui-MenuItem__submenuIndicator',
|
|
15
|
+
content: 'fui-MenuItem__content',
|
|
16
|
+
secondaryContent: 'fui-MenuItem__secondaryContent'
|
|
17
|
+
};
|
|
6
18
|
|
|
7
19
|
const useStyles = /*#__PURE__*/__styles({
|
|
8
20
|
"focusIndicator": {
|
|
9
21
|
"B486eqv": "f2hkw1w",
|
|
10
|
-
"
|
|
22
|
+
"Bnmjwt4": "flfsvnh",
|
|
23
|
+
"Jopkrh": ["f1781m5e", "flvaaa9"],
|
|
24
|
+
"hhrs2v": "f50u1b5",
|
|
25
|
+
"B7jbng7": ["flvaaa9", "f1781m5e"],
|
|
11
26
|
"e8izhr": "f1pxpxw8",
|
|
12
27
|
"in3gf6": "f1149fnl",
|
|
13
28
|
"B1i23sz": "fd1orka",
|
|
14
|
-
"ln9as": "fgtqheg",
|
|
15
29
|
"Bfgg0yq": "fq7mjg8",
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"
|
|
30
|
+
"B7231uf": "fmqgchs",
|
|
31
|
+
"Bxoolf0": ["f1lv6wi8", "famjx04"],
|
|
32
|
+
"fo1iai": "f1nbyjd2",
|
|
33
|
+
"Bh81ga8": ["famjx04", "f1lv6wi8"],
|
|
34
|
+
"qztvpn": "f5n18is",
|
|
35
|
+
"ge3ubn": ["f13az7yk", "f14kwzu1"],
|
|
36
|
+
"F41yt0": "fneogx5",
|
|
37
|
+
"Bxrdl85": ["f14kwzu1", "f13az7yk"],
|
|
38
|
+
"Bb63s14": ["f1f0b0sl", "flsib9d"],
|
|
39
|
+
"Ikxprv": ["flsib9d", "f1f0b0sl"],
|
|
40
|
+
"Bhxvgo6": ["fbewl49", "fs55jlu"],
|
|
41
|
+
"J01dyq": ["fs55jlu", "fbewl49"],
|
|
42
|
+
"hzsgvt": "f1f43d5r",
|
|
43
|
+
"Ba9tnbb": ["f1ib27sc", "f14s7j5v"],
|
|
44
|
+
"Fpkomr": "f13oqbgc",
|
|
45
|
+
"Bttdqvk": ["f14s7j5v", "f1ib27sc"],
|
|
20
46
|
"Bl8qd6i": "f1284xzw",
|
|
21
47
|
"Byzgy54": "f14dru39",
|
|
22
48
|
"mq8cyt": ["fvabyfg", "f12y1wz2"],
|
|
@@ -60,13 +86,19 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
60
86
|
"a9b677": "f64fuq3",
|
|
61
87
|
"Bqenvij": "fjamq6b",
|
|
62
88
|
"Be2twd7": "fe5j1ua",
|
|
63
|
-
"Bg96gwp": "fez10in"
|
|
89
|
+
"Bg96gwp": "fez10in",
|
|
90
|
+
"Bt984gj": "f122n59",
|
|
91
|
+
"mc9l5x": "ftuwxu6",
|
|
92
|
+
"Brf1p80": "f4d9j23"
|
|
64
93
|
},
|
|
65
94
|
"submenuIndicator": {
|
|
66
95
|
"a9b677": "f64fuq3",
|
|
67
96
|
"Bqenvij": "fjamq6b",
|
|
68
97
|
"Be2twd7": "fe5j1ua",
|
|
69
|
-
"Bg96gwp": "fez10in"
|
|
98
|
+
"Bg96gwp": "fez10in",
|
|
99
|
+
"Bt984gj": "f122n59",
|
|
100
|
+
"mc9l5x": "ftuwxu6",
|
|
101
|
+
"Brf1p80": "f4d9j23"
|
|
70
102
|
},
|
|
71
103
|
"disabled": {
|
|
72
104
|
"sj55zd": "f1s2aq7o",
|
|
@@ -75,7 +107,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
75
107
|
}
|
|
76
108
|
}, {
|
|
77
109
|
"i": [".f2hkw1w:focus-visible{outline-style:none;}"],
|
|
78
|
-
"d": ["[data-keyboard-nav] .
|
|
110
|
+
"d": ["[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .f1pxpxw8:focus:after{content:\"\";}", "[data-keyboard-nav] .f1149fnl:focus:after{position:absolute;}", "[data-keyboard-nav] .fd1orka:focus:after{pointer-events:none;}", "[data-keyboard-nav] .fq7mjg8:focus:after{z-index:1;}", "[data-keyboard-nav] .fmqgchs:focus:after{border-top-style:solid;}", "[data-keyboard-nav] .f1lv6wi8:focus:after{border-right-style:solid;}", "[data-keyboard-nav] .famjx04:focus:after{border-left-style:solid;}", "[data-keyboard-nav] .f1nbyjd2:focus:after{border-bottom-style:solid;}", "[data-keyboard-nav] .f5n18is:focus:after{border-top-width:2px;}", "[data-keyboard-nav] .f13az7yk:focus:after{border-right-width:2px;}", "[data-keyboard-nav] .f14kwzu1:focus:after{border-left-width:2px;}", "[data-keyboard-nav] .fneogx5:focus:after{border-bottom-width:2px;}", "[data-keyboard-nav] .f1f0b0sl:focus:after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .flsib9d:focus:after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .fbewl49:focus:after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .fs55jlu:focus:after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1f43d5r:focus:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1ib27sc:focus:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f14s7j5v:focus:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f13oqbgc:focus:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1284xzw:focus:after{top:-2px;}", "[data-keyboard-nav] .f14dru39:focus:after{bottom:-2px;}", "[data-keyboard-nav] .fvabyfg:focus:after{left:-2px;}", "[data-keyboard-nav] .f12y1wz2:focus:after{right:-2px;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".f1d2rq10{height:32px;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1k6fduh{cursor:pointer;}", ".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f161knb0{padding-left:2px;}", ".f12huiiw{padding-right:2px;}", ".f3rmtva{background-color:transparent;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fe5j1ua{font-size:20px;}", ".fez10in{line-height:0;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
|
|
79
111
|
"h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1jp5ecu:hover{color:var(--colorNeutralForeground3Hover);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}"],
|
|
80
112
|
"f": [".fc1cou1:focus{color:var(--colorNeutralForeground3Hover);}", ".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}"]
|
|
81
113
|
});
|
|
@@ -84,22 +116,26 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
84
116
|
|
|
85
117
|
export const useMenuItemStyles_unstable = state => {
|
|
86
118
|
const styles = useStyles();
|
|
87
|
-
state.root.className = mergeClasses(
|
|
119
|
+
state.root.className = mergeClasses(menuItemClassNames.root, styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);
|
|
88
120
|
|
|
89
121
|
if (state.content) {
|
|
90
|
-
state.content.className = mergeClasses(styles.content, state.content.className);
|
|
122
|
+
state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
if (state.checkmark) {
|
|
126
|
+
state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);
|
|
91
127
|
}
|
|
92
128
|
|
|
93
129
|
if (state.secondaryContent) {
|
|
94
|
-
state.secondaryContent.className = mergeClasses(!state.disabled && styles.secondaryContent, state.secondaryContent.className);
|
|
130
|
+
state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, !state.disabled && styles.secondaryContent, state.secondaryContent.className);
|
|
95
131
|
}
|
|
96
132
|
|
|
97
133
|
if (state.icon) {
|
|
98
|
-
state.icon.className = mergeClasses(styles.icon, state.icon.className);
|
|
134
|
+
state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);
|
|
99
135
|
}
|
|
100
136
|
|
|
101
137
|
if (state.submenuIndicator) {
|
|
102
|
-
state.submenuIndicator.className = mergeClasses(styles.submenuIndicator, state.submenuIndicator.className);
|
|
138
|
+
state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, styles.submenuIndicator, state.submenuIndicator.className);
|
|
103
139
|
}
|
|
104
140
|
|
|
105
141
|
useCheckmarkStyles_unstable(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/MenuItem/useMenuItemStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,YAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,2BAAT,QAA4C,wBAA5C;
|
|
1
|
+
{"version":3,"sources":["components/MenuItem/useMenuItemStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,YAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,2BAAT,QAA4C,wBAA5C;AAKA;;AAEG;;AACH,OAAO,MAAM,iBAAiB,GAAG,cAA1B;AACP,OAAO,MAAM,kBAAkB,GAAkC;AAC/D,EAAA,IAAI,EAAE,cADyD;AAE/D,EAAA,IAAI,EAAE,oBAFyD;AAG/D,EAAA,SAAS,EAAE,yBAHoD;AAI/D,EAAA,gBAAgB,EAAE,gCAJ6C;AAK/D,EAAA,OAAO,EAAE,uBALsD;AAM/D,EAAA,gBAAgB,EAAE;AAN6C,CAA1D;;AASP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAsEA;;;AACA,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAAyB;AACjE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,kBAAkB,CAAC,IADc,EAEjC,MAAM,CAAC,IAF0B,EAGjC,MAAM,CAAC,cAH0B,EAIjC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAJQ,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;;AAQA,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,kBAAkB,CAAC,OAApB,EAA6B,MAAM,CAAC,OAApC,EAA6C,KAAK,CAAC,OAAN,CAAc,SAA3D,CAAtC;AACD;;AAED,MAAI,KAAK,CAAC,SAAV,EAAqB;AACnB,IAAA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CAAC,kBAAkB,CAAC,SAApB,EAA+B,KAAK,CAAC,SAAN,CAAgB,SAA/C,CAAxC;AACD;;AAED,MAAI,KAAK,CAAC,gBAAV,EAA4B;AAC1B,IAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAC7C,kBAAkB,CAAC,gBAD0B,EAE7C,CAAC,KAAK,CAAC,QAAP,IAAmB,MAAM,CAAC,gBAFmB,EAG7C,KAAK,CAAC,gBAAN,CAAuB,SAHsB,CAA/C;AAKD;;AAED,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,kBAAkB,CAAC,IAApB,EAA0B,MAAM,CAAC,IAAjC,EAAuC,KAAK,CAAC,IAAN,CAAW,SAAlD,CAAnC;AACD;;AAED,MAAI,KAAK,CAAC,gBAAV,EAA4B;AAC1B,IAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAC7C,kBAAkB,CAAC,gBAD0B,EAE7C,MAAM,CAAC,gBAFsC,EAG7C,KAAK,CAAC,gBAAN,CAAuB,SAHsB,CAA/C;AAKD;;AACD,EAAA,2BAA2B,CAAC,KAAD,CAA3B;AACD,CAtCM","sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { MenuItemCheckboxState } from '../MenuItemCheckbox/index';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `menuItemClassNames.root` instead.\n */\nexport const menuItemClassName = 'fui-MenuItem';\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};\n\nconst useStyles = makeStyles({\n focusIndicator: createFocusOutlineStyle(),\n root: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n position: 'relative',\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n paddingRight: '10px',\n paddingLeft: '10px',\n height: '32px',\n display: 'flex',\n alignItems: 'center',\n fontSize: tokens.fontSizeBase300,\n cursor: 'pointer',\n ...shorthands.gap('4px'),\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n\n userSelect: 'none',\n },\n content: {\n paddingLeft: '2px',\n paddingRight: '2px',\n backgroundColor: 'transparent',\n flexGrow: 1,\n },\n secondaryContent: {\n paddingLeft: '2px',\n paddingRight: '2px',\n color: tokens.colorNeutralForeground3,\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n },\n ':focus': {\n color: tokens.colorNeutralForeground3Hover,\n },\n },\n icon: {\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n },\n submenuIndicator: {\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':focus': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = (state: MenuItemState) => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n menuItemClassNames.root,\n styles.root,\n styles.focusIndicator,\n state.disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.content) {\n state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);\n }\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemClassNames.secondaryContent,\n !state.disabled && styles.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);\n }\n\n if (state.submenuIndicator) {\n state.submenuIndicator.className = mergeClasses(\n menuItemClassNames.submenuIndicator,\n styles.submenuIndicator,\n state.submenuIndicator.className,\n );\n }\n useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
2
|
+
import { MenuItemSlots } from '../index';
|
|
1
3
|
import type { MenuItemCheckboxState } from './MenuItemCheckbox.types';
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `menuItemCheckboxClassNames.root` instead.
|
|
6
|
+
*/
|
|
2
7
|
export declare const menuItemCheckboxClassName = "fui-MenuItemCheckbox";
|
|
8
|
+
export declare const menuItemCheckboxClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>>;
|
|
3
9
|
export declare const useMenuItemCheckboxStyles_unstable: (state: MenuItemCheckboxState) => void;
|
|
@@ -1,9 +1,37 @@
|
|
|
1
1
|
import { mergeClasses } from '@griffel/react';
|
|
2
2
|
import { useCheckmarkStyles_unstable } from '../../selectable/index';
|
|
3
3
|
import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `menuItemCheckboxClassNames.root` instead.
|
|
6
|
+
*/
|
|
7
|
+
|
|
4
8
|
export const menuItemCheckboxClassName = 'fui-MenuItemCheckbox';
|
|
9
|
+
export const menuItemCheckboxClassNames = {
|
|
10
|
+
root: 'fui-MenuItemCheckbox',
|
|
11
|
+
icon: 'fui-MenuItemCheckbox__icon',
|
|
12
|
+
checkmark: 'fui-MenuItemCheckbox__checkmark',
|
|
13
|
+
content: 'fui-MenuItemCheckbox__content',
|
|
14
|
+
secondaryContent: 'fui-MenuItemCheckbox__secondaryContent'
|
|
15
|
+
};
|
|
5
16
|
export const useMenuItemCheckboxStyles_unstable = state => {
|
|
6
|
-
state.root.className = mergeClasses(
|
|
17
|
+
state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);
|
|
18
|
+
|
|
19
|
+
if (state.content) {
|
|
20
|
+
state.content.className = mergeClasses(menuItemCheckboxClassNames.content, state.content.className);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
if (state.secondaryContent) {
|
|
24
|
+
state.secondaryContent.className = mergeClasses(menuItemCheckboxClassNames.secondaryContent, state.secondaryContent.className);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
if (state.icon) {
|
|
28
|
+
state.icon.className = mergeClasses(menuItemCheckboxClassNames.icon, state.icon.className);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
if (state.checkmark) {
|
|
32
|
+
state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);
|
|
33
|
+
}
|
|
34
|
+
|
|
7
35
|
useMenuItemStyles_unstable(state);
|
|
8
36
|
useCheckmarkStyles_unstable(state);
|
|
9
37
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts"],"names":[],"mappings":"AACA,SAAS,YAAT,QAA6B,gBAA7B;AACA,SAAS,2BAAT,QAA4C,wBAA5C;AAEA,SAAS,0BAAT,QAA2C,+BAA3C;AAGA;;AAEG;;AACH,OAAO,MAAM,yBAAyB,GAAG,sBAAlC;AACP,OAAO,MAAM,0BAA0B,GAA4D;AACjG,EAAA,IAAI,EAAE,sBAD2F;AAEjG,EAAA,IAAI,EAAE,4BAF2F;AAGjG,EAAA,SAAS,EAAE,iCAHsF;AAIjG,EAAA,OAAO,EAAE,+BAJwF;AAKjG,EAAA,gBAAgB,EAAE;AAL+E,CAA5F;AAQP,OAAO,MAAM,kCAAkC,GAAI,KAAD,IAAiC;AACjF,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,0BAA0B,CAAC,IAA5B,EAAkC,KAAK,CAAC,IAAN,CAAW,SAA7C,CAAnC;;AAEA,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,0BAA0B,CAAC,OAA5B,EAAqC,KAAK,CAAC,OAAN,CAAc,SAAnD,CAAtC;AACD;;AAED,MAAI,KAAK,CAAC,gBAAV,EAA4B;AAC1B,IAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAC7C,0BAA0B,CAAC,gBADkB,EAE7C,KAAK,CAAC,gBAAN,CAAuB,SAFsB,CAA/C;AAID;;AAED,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,0BAA0B,CAAC,IAA5B,EAAkC,KAAK,CAAC,IAAN,CAAW,SAA7C,CAAnC;AACD;;AAED,MAAI,KAAK,CAAC,SAAV,EAAqB;AACnB,IAAA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CAAC,0BAA0B,CAAC,SAA5B,EAAuC,KAAK,CAAC,SAAN,CAAgB,SAAvD,CAAxC;AACD;;AAED,EAAA,0BAA0B,CAAC,KAAD,CAA1B;AACA,EAAA,2BAA2B,CAAC,KAAD,CAA3B;AACD,CAxBM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { MenuItemSlots } from '../index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';\nimport type { MenuItemCheckboxState } from './MenuItemCheckbox.types';\n\n/**\n * @deprecated Use `menuItemCheckboxClassNames.root` instead.\n */\nexport const menuItemCheckboxClassName = 'fui-MenuItemCheckbox';\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};\n\nexport const useMenuItemCheckboxStyles_unstable = (state: MenuItemCheckboxState) => {\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 useMenuItemStyles_unstable(state);\n useCheckmarkStyles_unstable(state);\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
2
|
+
import { MenuItemSlots } from '../index';
|
|
1
3
|
import type { MenuItemRadioState } from './MenuItemRadio.types';
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `menuItemRadioClassNames.root` instead.
|
|
6
|
+
*/
|
|
2
7
|
export declare const menuItemRadioClassName = "fui-MenuItemRadio";
|
|
8
|
+
export declare const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>>;
|
|
3
9
|
export declare const useMenuItemRadioStyles_unstable: (state: MenuItemRadioState) => void;
|
|
@@ -1,9 +1,37 @@
|
|
|
1
1
|
import { mergeClasses } from '@griffel/react';
|
|
2
2
|
import { useCheckmarkStyles_unstable } from '../../selectable/index';
|
|
3
3
|
import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `menuItemRadioClassNames.root` instead.
|
|
6
|
+
*/
|
|
7
|
+
|
|
4
8
|
export const menuItemRadioClassName = 'fui-MenuItemRadio';
|
|
9
|
+
export const menuItemRadioClassNames = {
|
|
10
|
+
root: 'fui-MenuItemRadio',
|
|
11
|
+
icon: 'fui-MenuItemRadio__icon',
|
|
12
|
+
checkmark: 'fui-MenuItemRadio__checkmark',
|
|
13
|
+
content: 'fui-MenuItemRadio__content',
|
|
14
|
+
secondaryContent: 'fui-MenuItemRadio__secondaryContent'
|
|
15
|
+
};
|
|
5
16
|
export const useMenuItemRadioStyles_unstable = state => {
|
|
6
|
-
state.root.className = mergeClasses(
|
|
17
|
+
state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);
|
|
18
|
+
|
|
19
|
+
if (state.content) {
|
|
20
|
+
state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
if (state.secondaryContent) {
|
|
24
|
+
state.secondaryContent.className = mergeClasses(menuItemRadioClassNames.secondaryContent, state.secondaryContent.className);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
if (state.icon) {
|
|
28
|
+
state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
if (state.checkmark) {
|
|
32
|
+
state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);
|
|
33
|
+
}
|
|
34
|
+
|
|
7
35
|
useMenuItemStyles_unstable(state);
|
|
8
36
|
useCheckmarkStyles_unstable(state);
|
|
9
37
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/MenuItemRadio/useMenuItemRadioStyles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["components/MenuItemRadio/useMenuItemRadioStyles.ts"],"names":[],"mappings":"AACA,SAAS,YAAT,QAA6B,gBAA7B;AACA,SAAS,2BAAT,QAA4C,wBAA5C;AAEA,SAAS,0BAAT,QAA2C,+BAA3C;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAG,mBAA/B;AACP,OAAO,MAAM,uBAAuB,GAA4D;AAC9F,EAAA,IAAI,EAAE,mBADwF;AAE9F,EAAA,IAAI,EAAE,yBAFwF;AAG9F,EAAA,SAAS,EAAE,8BAHmF;AAI9F,EAAA,OAAO,EAAE,4BAJqF;AAK9F,EAAA,gBAAgB,EAAE;AAL4E,CAAzF;AAQP,OAAO,MAAM,+BAA+B,GAAI,KAAD,IAA8B;AAC3E,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,uBAAuB,CAAC,IAAzB,EAA+B,KAAK,CAAC,IAAN,CAAW,SAA1C,CAAnC;;AAEA,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,uBAAuB,CAAC,OAAzB,EAAkC,KAAK,CAAC,OAAN,CAAc,SAAhD,CAAtC;AACD;;AAED,MAAI,KAAK,CAAC,gBAAV,EAA4B;AAC1B,IAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAC7C,uBAAuB,CAAC,gBADqB,EAE7C,KAAK,CAAC,gBAAN,CAAuB,SAFsB,CAA/C;AAID;;AAED,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,uBAAuB,CAAC,IAAzB,EAA+B,KAAK,CAAC,IAAN,CAAW,SAA1C,CAAnC;AACD;;AAED,MAAI,KAAK,CAAC,SAAV,EAAqB;AACnB,IAAA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CAAC,uBAAuB,CAAC,SAAzB,EAAoC,KAAK,CAAC,SAAN,CAAgB,SAApD,CAAxC;AACD;;AAED,EAAA,0BAA0B,CAAC,KAAD,CAA1B;AACA,EAAA,2BAA2B,CAAC,KAAD,CAA3B;AACD,CAxBM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { MenuItemSlots } from '../index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';\nimport type { MenuItemRadioState } from './MenuItemRadio.types';\n\n/**\n * @deprecated Use `menuItemRadioClassNames.root` instead.\n */\nexport const menuItemRadioClassName = 'fui-MenuItemRadio';\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};\n\nexport const useMenuItemRadioStyles_unstable = (state: MenuItemRadioState) => {\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 useMenuItemStyles_unstable(state);\n useCheckmarkStyles_unstable(state);\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
2
|
+
import type { MenuListSlots, MenuListState } from './MenuList.types';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `menuListClassNames.root` instead.
|
|
5
|
+
*/
|
|
2
6
|
export declare const menuListClassName = "fui-MenuList";
|
|
7
|
+
export declare const menuListClassNames: SlotClassNames<MenuListSlots>;
|
|
3
8
|
/**
|
|
4
9
|
* Apply styling to the Menu slots based on the state
|
|
5
10
|
*/
|
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
import { mergeClasses, __styles, shorthands } from '@griffel/react';
|
|
2
|
+
/**
|
|
3
|
+
* @deprecated Use `menuListClassNames.root` instead.
|
|
4
|
+
*/
|
|
5
|
+
|
|
2
6
|
export const menuListClassName = 'fui-MenuList';
|
|
7
|
+
export const menuListClassNames = {
|
|
8
|
+
root: 'fui-MenuList'
|
|
9
|
+
};
|
|
3
10
|
|
|
4
11
|
const useStyles = /*#__PURE__*/__styles({
|
|
5
12
|
"root": {
|
|
@@ -18,7 +25,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
18
25
|
|
|
19
26
|
export const useMenuListStyles_unstable = state => {
|
|
20
27
|
const styles = useStyles();
|
|
21
|
-
state.root.className = mergeClasses(
|
|
28
|
+
state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.root.className);
|
|
22
29
|
return state;
|
|
23
30
|
};
|
|
24
31
|
//# sourceMappingURL=useMenuListStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/MenuList/useMenuListStyles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["components/MenuList/useMenuListStyles.ts"],"names":[],"mappings":"AACA,SAAS,YAAT,YAAmC,UAAnC,QAAqD,gBAArD;AAGA;;AAEG;;AACH,OAAO,MAAM,iBAAiB,GAAG,cAA1B;AACP,OAAO,MAAM,kBAAkB,GAAkC;AAC/D,EAAA,IAAI,EAAE;AADyD,CAA1D;;AAIP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAQA;;AAEG;;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAAwC;AAChF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,kBAAkB,CAAC,IAApB,EAA0B,MAAM,CAAC,IAAjC,EAAuC,KAAK,CAAC,IAAN,CAAW,SAAlD,CAAnC;AACA,SAAO,KAAP;AACD,CAJM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport type { MenuListSlots, MenuListState } from './MenuList.types';\n\n/**\n * @deprecated Use `menuListClassNames.root` instead.\n */\nexport const menuListClassName = 'fui-MenuList';\nexport const menuListClassNames: SlotClassNames<MenuListSlots> = {\n root: 'fui-MenuList',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n ...shorthands.gap('2px'),\n },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuListStyles_unstable = (state: MenuListState): MenuListState => {\n const styles = useStyles();\n state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
import type { MenuPopoverState } from './MenuPopover.types';
|
|
1
|
+
import type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';
|
|
2
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `menuPopoverClassNames.root` instead.
|
|
5
|
+
*/
|
|
2
6
|
export declare const menuPopoverClassName = "fui-MenuPopover";
|
|
7
|
+
export declare const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots>;
|
|
3
8
|
/**
|
|
4
9
|
* Apply styling to the Menu slots based on the state
|
|
5
10
|
*/
|
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
import { shorthands, mergeClasses, __styles } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `menuPopoverClassNames.root` instead.
|
|
5
|
+
*/
|
|
6
|
+
|
|
3
7
|
export const menuPopoverClassName = 'fui-MenuPopover';
|
|
8
|
+
export const menuPopoverClassNames = {
|
|
9
|
+
root: 'fui-MenuPopover'
|
|
10
|
+
};
|
|
4
11
|
|
|
5
12
|
const useStyles = /*#__PURE__*/__styles({
|
|
6
13
|
"root": {
|
|
@@ -40,7 +47,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
40
47
|
|
|
41
48
|
export const useMenuPopoverStyles_unstable = state => {
|
|
42
49
|
const styles = useStyles();
|
|
43
|
-
state.root.className = mergeClasses(
|
|
50
|
+
state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);
|
|
44
51
|
return state;
|
|
45
52
|
};
|
|
46
53
|
//# sourceMappingURL=useMenuPopoverStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/MenuPopover/useMenuPopoverStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;
|
|
1
|
+
{"version":3,"sources":["components/MenuPopover/useMenuPopoverStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;AACP,OAAO,MAAM,qBAAqB,GAAqC;AACrE,EAAA,IAAI,EAAE;AAD+D,CAAhE;;AAIP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAaA;;AAEG;;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,qBAAqB,CAAC,IAAvB,EAA6B,MAAM,CAAC,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAnC;AACA,SAAO,KAAP;AACD,CAJM","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `menuPopoverClassNames.root` instead.\n */\nexport const menuPopoverClassName = 'fui-MenuPopover';\nexport const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots> = {\n root: 'fui-MenuPopover',\n};\n\nconst useStyles = makeStyles({\n root: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n backgroundColor: tokens.colorNeutralBackground1,\n minWidth: '128px',\n maxWidth: '300px',\n width: 'max-content',\n boxShadow: `${tokens.shadow16}`,\n ...shorthands.padding('4px'),\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuPopoverStyles_unstable = (state: MenuPopoverState): MenuPopoverState => {\n const styles = useStyles();\n state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
import type { MenuSplitGroupState } from './MenuSplitGroup.types';
|
|
1
|
+
import type { MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.types';
|
|
2
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `menuSplitGroupClassNames.root` instead.
|
|
5
|
+
*/
|
|
2
6
|
export declare const menuSplitGroupClassName = "fui-MenuSplitGroup";
|
|
7
|
+
export declare const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots>;
|
|
3
8
|
/**
|
|
4
9
|
* Apply styling to the MenuSplitGroup slots based on the state
|
|
5
10
|
*/
|
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
import { __styles, mergeClasses } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
|
-
import {
|
|
3
|
+
import { menuItemClassNames } from '../MenuItem/useMenuItemStyles';
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `menuSplitGroupClassNames.root` instead.
|
|
6
|
+
*/
|
|
7
|
+
|
|
4
8
|
export const menuSplitGroupClassName = 'fui-MenuSplitGroup';
|
|
9
|
+
export const menuSplitGroupClassNames = {
|
|
10
|
+
root: 'fui-MenuSplitGroup'
|
|
11
|
+
};
|
|
5
12
|
/**
|
|
6
13
|
* Styles for the root slot
|
|
7
14
|
*/
|
|
@@ -29,7 +36,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
29
36
|
|
|
30
37
|
export const useMenuSplitGroupStyles_unstable = state => {
|
|
31
38
|
const styles = useStyles();
|
|
32
|
-
state.root.className = mergeClasses(
|
|
39
|
+
state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);
|
|
33
40
|
return state;
|
|
34
41
|
};
|
|
35
42
|
//# sourceMappingURL=useMenuSplitGroupStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/MenuSplitGroup/useMenuSplitGroupStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,
|
|
1
|
+
{"version":3,"sources":["components/MenuSplitGroup/useMenuSplitGroupStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,kBAAT,QAAmC,+BAAnC;AAIA;;AAEG;;AACH,OAAO,MAAM,uBAAuB,GAAG,oBAAhC;AACP,OAAO,MAAM,wBAAwB,GAAwC;AAC3E,EAAA,IAAI,EAAE;AADqE,CAAtE;AAGP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqBA;;AAEG;;;AACH,OAAO,MAAM,gCAAgC,GAAI,KAAD,IAAoD;AAClG,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,wBAAwB,CAAC,IAA1B,EAAgC,MAAM,CAAC,IAAvC,EAA6C,KAAK,CAAC,IAAN,CAAW,SAAxD,CAAnC;AACA,SAAO,KAAP;AACD,CAJM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles';\nimport type { MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `menuSplitGroupClassNames.root` instead.\n */\nexport const menuSplitGroupClassName = 'fui-MenuSplitGroup';\nexport const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots> = {\n root: 'fui-MenuSplitGroup',\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n [`& > .${menuItemClassNames.root}:nth-child(1)`]: {\n width: '100%',\n },\n [`& > .${menuItemClassNames.root}:nth-child(2)`]: {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n paddingLeft: 0,\n marginLeft: 'auto',\n ':before': {\n content: '\"\"',\n width: tokens.strokeWidthThin,\n height: '24px',\n backgroundColor: tokens.colorNeutralStroke1,\n },\n },\n },\n});\n\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */\nexport const useMenuSplitGroupStyles_unstable = (state: MenuSplitGroupState): MenuSplitGroupState => {\n const styles = useStyles();\n state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
-
import type { MenuDividerState } from './MenuDivider.types';
|
|
1
|
+
import type { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';
|
|
2
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `menuDividerClassNames.root` instead.
|
|
5
|
+
*/
|
|
2
6
|
export declare const menuDividerClassName = "fui-MenuDivider";
|
|
7
|
+
export declare const menuDividerClassNames: SlotClassNames<MenuDividerSlots>;
|
|
3
8
|
export declare const useMenuDividerStyles_unstable: (state: MenuDividerState) => MenuDividerState;
|
|
@@ -3,13 +3,20 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useMenuDividerStyles_unstable = exports.menuDividerClassName = void 0;
|
|
6
|
+
exports.useMenuDividerStyles_unstable = exports.menuDividerClassNames = exports.menuDividerClassName = void 0;
|
|
7
7
|
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
9
|
|
|
10
10
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
11
|
+
/**
|
|
12
|
+
* @deprecated Use `menuDividerClassNames.root` instead.
|
|
13
|
+
*/
|
|
14
|
+
|
|
11
15
|
|
|
12
16
|
exports.menuDividerClassName = 'fui-MenuDivider';
|
|
17
|
+
exports.menuDividerClassNames = {
|
|
18
|
+
root: 'fui-MenuDivider'
|
|
19
|
+
};
|
|
13
20
|
|
|
14
21
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
15
22
|
"root": {
|
|
@@ -27,7 +34,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
27
34
|
|
|
28
35
|
const useMenuDividerStyles_unstable = state => {
|
|
29
36
|
const styles = useStyles();
|
|
30
|
-
state.root.className = react_1.mergeClasses(exports.
|
|
37
|
+
state.root.className = react_1.mergeClasses(exports.menuDividerClassNames.root, styles.root, state.root.className);
|
|
31
38
|
return state;
|
|
32
39
|
};
|
|
33
40
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/MenuDivider/useMenuDividerStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;
|
|
1
|
+
{"version":3,"sources":["components/MenuDivider/useMenuDividerStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,oBAAA,GAAuB,iBAAvB;AACA,OAAA,CAAA,qBAAA,GAA0D;AACrE,EAAA,IAAI,EAAE;AAD+D,CAA1D;;AAIb,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AASO,MAAM,6BAA6B,GAAI,KAAD,IAA4B;AACvE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,qBAAA,CAAsB,IAAnC,EAAyC,MAAM,CAAC,IAAhD,EAAsD,KAAK,CAAC,IAAN,CAAW,SAAjE,CAAvB;AAEA,SAAO,KAAP;AACD,CALM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `menuDividerClassNames.root` instead.\n */\nexport const menuDividerClassName = 'fui-MenuDivider';\nexport const menuDividerClassNames: SlotClassNames<MenuDividerSlots> = {\n root: 'fui-MenuDivider',\n};\n\nconst useStyles = makeStyles({\n root: {\n height: '1px',\n ...shorthands.margin('4px', '-5px', '4px', '-5px'),\n width: 'auto',\n backgroundColor: tokens.colorNeutralStroke2,\n },\n});\n\nexport const useMenuDividerStyles_unstable = (state: MenuDividerState) => {\n const styles = useStyles();\n state.root.className = mergeClasses(menuDividerClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
2
|
+
import type { MenuGroupSlots, MenuGroupState } from './MenuGroup.types';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `menuGroupClassNames.root` instead.
|
|
5
|
+
*/
|
|
2
6
|
export declare const menuGroupClassName = "fui-MenuGroup";
|
|
7
|
+
export declare const menuGroupClassNames: SlotClassNames<MenuGroupSlots>;
|
|
3
8
|
export declare const useMenuGroupStyles_unstable: (state: MenuGroupState) => MenuGroupState;
|
|
@@ -3,14 +3,21 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useMenuGroupStyles_unstable = exports.menuGroupClassName = void 0;
|
|
6
|
+
exports.useMenuGroupStyles_unstable = exports.menuGroupClassNames = exports.menuGroupClassName = void 0;
|
|
7
7
|
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
|
+
/**
|
|
10
|
+
* @deprecated Use `menuGroupClassNames.root` instead.
|
|
11
|
+
*/
|
|
12
|
+
|
|
9
13
|
|
|
10
14
|
exports.menuGroupClassName = 'fui-MenuGroup';
|
|
15
|
+
exports.menuGroupClassNames = {
|
|
16
|
+
root: 'fui-MenuGroup'
|
|
17
|
+
};
|
|
11
18
|
|
|
12
19
|
const useMenuGroupStyles_unstable = state => {
|
|
13
|
-
state.root.className = react_1.mergeClasses(exports.
|
|
20
|
+
state.root.className = react_1.mergeClasses(exports.menuGroupClassNames.root, state.root.className);
|
|
14
21
|
return state;
|
|
15
22
|
};
|
|
16
23
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/MenuGroup/useMenuGroupStyles.ts"],"names":[],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"sources":["components/MenuGroup/useMenuGroupStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,kBAAA,GAAqB,eAArB;AACA,OAAA,CAAA,mBAAA,GAAsD;AACjE,EAAA,IAAI,EAAE;AAD2D,CAAtD;;AAIN,MAAM,2BAA2B,GAAI,KAAD,IAA0C;AACnF,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,mBAAA,CAAoB,IAAjC,EAAuC,KAAK,CAAC,IAAN,CAAW,SAAlD,CAAvB;AAEA,SAAO,KAAP;AACD,CAJM;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { MenuGroupSlots, MenuGroupState } from './MenuGroup.types';\n\n/**\n * @deprecated Use `menuGroupClassNames.root` instead.\n */\nexport const menuGroupClassName = 'fui-MenuGroup';\nexport const menuGroupClassNames: SlotClassNames<MenuGroupSlots> = {\n root: 'fui-MenuGroup',\n};\n\nexport const useMenuGroupStyles_unstable = (state: MenuGroupState): MenuGroupState => {\n state.root.className = mergeClasses(menuGroupClassNames.root, state.root.className);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
-
import type { MenuGroupHeaderState } from './MenuGroupHeader.types';
|
|
1
|
+
import type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';
|
|
2
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `menuGroupHeaderClassNames.root` instead.
|
|
5
|
+
*/
|
|
2
6
|
export declare const menuGroupHeaderClassName = "fui-MenuGroupHeader";
|
|
7
|
+
export declare const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots>;
|
|
3
8
|
export declare const useMenuGroupHeaderStyles_unstable: (state: MenuGroupHeaderState) => MenuGroupHeaderState;
|
|
@@ -3,13 +3,20 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useMenuGroupHeaderStyles_unstable = exports.menuGroupHeaderClassName = void 0;
|
|
6
|
+
exports.useMenuGroupHeaderStyles_unstable = exports.menuGroupHeaderClassNames = exports.menuGroupHeaderClassName = void 0;
|
|
7
7
|
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
9
|
|
|
10
10
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
11
|
+
/**
|
|
12
|
+
* @deprecated Use `menuGroupHeaderClassNames.root` instead.
|
|
13
|
+
*/
|
|
14
|
+
|
|
11
15
|
|
|
12
16
|
exports.menuGroupHeaderClassName = 'fui-MenuGroupHeader';
|
|
17
|
+
exports.menuGroupHeaderClassNames = {
|
|
18
|
+
root: 'fui-MenuGroupHeader'
|
|
19
|
+
};
|
|
13
20
|
|
|
14
21
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
15
22
|
"root": {
|
|
@@ -28,7 +35,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
28
35
|
|
|
29
36
|
const useMenuGroupHeaderStyles_unstable = state => {
|
|
30
37
|
const styles = useStyles();
|
|
31
|
-
state.root.className = react_1.mergeClasses(exports.
|
|
38
|
+
state.root.className = react_1.mergeClasses(exports.menuGroupHeaderClassNames.root, styles.root, state.root.className);
|
|
32
39
|
return state;
|
|
33
40
|
};
|
|
34
41
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/MenuGroupHeader/useMenuGroupHeaderStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;
|
|
1
|
+
{"version":3,"sources":["components/MenuGroupHeader/useMenuGroupHeaderStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,wBAAA,GAA2B,qBAA3B;AACA,OAAA,CAAA,yBAAA,GAAkE;AAC7E,EAAA,IAAI,EAAE;AADuE,CAAlE;;AAIb,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AAaO,MAAM,iCAAiC,GAAI,KAAD,IAAgC;AAC/E,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,yBAAA,CAA0B,IAAvC,EAA6C,MAAM,CAAC,IAApD,EAA0D,KAAK,CAAC,IAAN,CAAW,SAArE,CAAvB;AAEA,SAAO,KAAP;AACD,CALM;;AAAM,OAAA,CAAA,iCAAA,GAAiC,iCAAjC","sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `menuGroupHeaderClassNames.root` instead.\n */\nexport const menuGroupHeaderClassName = 'fui-MenuGroupHeader';\nexport const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots> = {\n root: 'fui-MenuGroupHeader',\n};\n\nconst useStyles = makeStyles({\n root: {\n fontSize: tokens.fontSizeBase200,\n color: tokens.colorNeutralForeground3,\n paddingLeft: '12px',\n paddingRight: '12px',\n fontWeight: tokens.fontWeightSemibold,\n height: '32px',\n display: 'flex',\n alignItems: 'center',\n },\n});\n\nexport const useMenuGroupHeaderStyles_unstable = (state: MenuGroupHeaderState) => {\n const styles = useStyles();\n state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
import type { MenuItemState } from './MenuItem.types';
|
|
1
|
+
import type { MenuItemSlots, MenuItemState } from './MenuItem.types';
|
|
2
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `menuItemClassNames.root` instead.
|
|
5
|
+
*/
|
|
2
6
|
export declare const menuItemClassName = "fui-MenuItem";
|
|
7
|
+
export declare const menuItemClassNames: SlotClassNames<MenuItemSlots>;
|
|
3
8
|
/** Applies style classnames to slots */
|
|
4
9
|
export declare const useMenuItemStyles_unstable: (state: MenuItemState) => void;
|