@fluentui/react-menu 9.0.0-rc.5 → 9.0.0-rc.6

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 (58) hide show
  1. package/CHANGELOG.json +102 -1
  2. package/CHANGELOG.md +22 -2
  3. package/dist/react-menu.d.ts +46 -0
  4. package/lib/components/MenuDivider/useMenuDividerStyles.d.ts +6 -1
  5. package/lib/components/MenuDivider/useMenuDividerStyles.js +8 -1
  6. package/lib/components/MenuDivider/useMenuDividerStyles.js.map +1 -1
  7. package/lib/components/MenuGroup/useMenuGroupStyles.d.ts +6 -1
  8. package/lib/components/MenuGroup/useMenuGroupStyles.js +8 -1
  9. package/lib/components/MenuGroup/useMenuGroupStyles.js.map +1 -1
  10. package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.d.ts +6 -1
  11. package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.js +8 -1
  12. package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.js.map +1 -1
  13. package/lib/components/MenuItem/useMenuItemStyles.d.ts +6 -1
  14. package/lib/components/MenuItem/useMenuItemStyles.js +50 -14
  15. package/lib/components/MenuItem/useMenuItemStyles.js.map +1 -1
  16. package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.d.ts +6 -0
  17. package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.js +29 -1
  18. package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.js.map +1 -1
  19. package/lib/components/MenuItemRadio/useMenuItemRadioStyles.d.ts +6 -0
  20. package/lib/components/MenuItemRadio/useMenuItemRadioStyles.js +29 -1
  21. package/lib/components/MenuItemRadio/useMenuItemRadioStyles.js.map +1 -1
  22. package/lib/components/MenuList/useMenuListStyles.d.ts +6 -1
  23. package/lib/components/MenuList/useMenuListStyles.js +8 -1
  24. package/lib/components/MenuList/useMenuListStyles.js.map +1 -1
  25. package/lib/components/MenuPopover/useMenuPopoverStyles.d.ts +6 -1
  26. package/lib/components/MenuPopover/useMenuPopoverStyles.js +8 -1
  27. package/lib/components/MenuPopover/useMenuPopoverStyles.js.map +1 -1
  28. package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.d.ts +6 -1
  29. package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.js +9 -2
  30. package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.js.map +1 -1
  31. package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.d.ts +6 -1
  32. package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.js +9 -2
  33. package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.js.map +1 -1
  34. package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.d.ts +6 -1
  35. package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.js +9 -2
  36. package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.js.map +1 -1
  37. package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.d.ts +6 -1
  38. package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.js +9 -2
  39. package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.js.map +1 -1
  40. package/lib-commonjs/components/MenuItem/useMenuItemStyles.d.ts +6 -1
  41. package/lib-commonjs/components/MenuItem/useMenuItemStyles.js +51 -15
  42. package/lib-commonjs/components/MenuItem/useMenuItemStyles.js.map +1 -1
  43. package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.d.ts +6 -0
  44. package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.js +30 -2
  45. package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.js.map +1 -1
  46. package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.d.ts +6 -0
  47. package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.js +30 -2
  48. package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.js.map +1 -1
  49. package/lib-commonjs/components/MenuList/useMenuListStyles.d.ts +6 -1
  50. package/lib-commonjs/components/MenuList/useMenuListStyles.js +9 -2
  51. package/lib-commonjs/components/MenuList/useMenuListStyles.js.map +1 -1
  52. package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.d.ts +6 -1
  53. package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.js +9 -2
  54. package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.js.map +1 -1
  55. package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.d.ts +6 -1
  56. package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.js +9 -2
  57. package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.js.map +1 -1
  58. package/package.json +12 -22
@@ -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(menuItemRadioClassName, state.root.className);
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":"AAAA,SAAS,YAAT,QAA6B,gBAA7B;AACA,SAAS,2BAAT,QAA4C,wBAA5C;AACA,SAAS,0BAAT,QAA2C,+BAA3C;AAGA,OAAO,MAAM,sBAAsB,GAAG,mBAA/B;AAEP,OAAO,MAAM,+BAA+B,GAAI,KAAD,IAA8B;AAC3E,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,sBAAD,EAAyB,KAAK,CAAC,IAAN,CAAW,SAApC,CAAnC;AAEA,EAAA,0BAA0B,CAAC,KAAD,CAA1B;AACA,EAAA,2BAA2B,CAAC,KAAD,CAA3B;AACD,CALM","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';\nimport type { MenuItemRadioState } from './MenuItemRadio.types';\n\nexport const menuItemRadioClassName = 'fui-MenuItemRadio';\n\nexport const useMenuItemRadioStyles_unstable = (state: MenuItemRadioState) => {\n state.root.className = mergeClasses(menuItemRadioClassName, state.root.className);\n\n useMenuItemStyles_unstable(state);\n useCheckmarkStyles_unstable(state);\n};\n"],"sourceRoot":"../src/"}
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 { MenuListState } from './MenuList.types';
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(menuListClassName, styles.root, state.root.className);
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":"AAAA,SAAS,YAAT,YAAmC,UAAnC,QAAqD,gBAArD;AAGA,OAAO,MAAM,iBAAiB,GAAG,cAA1B;;AAEP,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,iBAAD,EAAoB,MAAM,CAAC,IAA3B,EAAiC,KAAK,CAAC,IAAN,CAAW,SAA5C,CAAnC;AACA,SAAO,KAAP;AACD,CAJM","sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport type { MenuListState } from './MenuList.types';\n\nexport const menuListClassName = 'fui-MenuList';\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(menuListClassName, styles.root, state.root.className);\n return state;\n};\n"],"sourceRoot":"../src/"}
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(menuPopoverClassName, styles.root, state.root.className);
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;AAGA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;;AAEP,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,oBAAD,EAAuB,MAAM,CAAC,IAA9B,EAAoC,KAAK,CAAC,IAAN,CAAW,SAA/C,CAAnC;AACA,SAAO,KAAP;AACD,CAJM","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuPopoverState } from './MenuPopover.types';\n\nexport const menuPopoverClassName = 'fui-MenuPopover';\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(menuPopoverClassName, styles.root, state.root.className);\n return state;\n};\n"],"sourceRoot":"../src/"}
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 { menuItemClassName } from '../MenuItem/useMenuItemStyles';
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(menuSplitGroupClassName, styles.root, state.root.className);
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,iBAAT,QAAkC,+BAAlC;AAGA,OAAO,MAAM,uBAAuB,GAAG,oBAAhC;AAEP;;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,uBAAD,EAA0B,MAAM,CAAC,IAAjC,EAAuC,KAAK,CAAC,IAAN,CAAW,SAAlD,CAAnC;AACA,SAAO,KAAP;AACD,CAJM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassName } from '../MenuItem/useMenuItemStyles';\nimport type { MenuSplitGroupState } from './MenuSplitGroup.types';\n\nexport const menuSplitGroupClassName = 'fui-MenuSplitGroup';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n [`& > .${menuItemClassName}:nth-child(1)`]: {\n width: '100%',\n },\n [`& > .${menuItemClassName}: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(menuSplitGroupClassName, styles.root, state.root.className);\n return state;\n};\n"],"sourceRoot":"../src/"}
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.menuDividerClassName, styles.root, state.root.className);
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;;AAGa,OAAA,CAAA,oBAAA,GAAuB,iBAAvB;;AAEb,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,oBAAb,EAAmC,MAAM,CAAC,IAA1C,EAAgD,KAAK,CAAC,IAAN,CAAW,SAA3D,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 { MenuDividerState } from './MenuDivider.types';\n\nexport const menuDividerClassName = 'fui-MenuDivider';\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(menuDividerClassName, styles.root, state.root.className);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
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 { MenuGroupState } from './MenuGroup.types';
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.menuGroupClassName, state.root.className);
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":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,OAAA,CAAA,kBAAA,GAAqB,eAArB;;AAEN,MAAM,2BAA2B,GAAI,KAAD,IAA0C;AACnF,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,kBAAb,EAAiC,KAAK,CAAC,IAAN,CAAW,SAA5C,CAAvB;AAEA,SAAO,KAAP;AACD,CAJM;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { MenuGroupState } from './MenuGroup.types';\n\nexport const menuGroupClassName = 'fui-MenuGroup';\n\nexport const useMenuGroupStyles_unstable = (state: MenuGroupState): MenuGroupState => {\n state.root.className = mergeClasses(menuGroupClassName, state.root.className);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
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.menuGroupHeaderClassName, styles.root, state.root.className);
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;;AAGa,OAAA,CAAA,wBAAA,GAA2B,qBAA3B;;AAEb,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,wBAAb,EAAuC,MAAM,CAAC,IAA9C,EAAoD,KAAK,CAAC,IAAN,CAAW,SAA/D,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 { MenuGroupHeaderState } from './MenuGroupHeader.types';\n\nexport const menuGroupHeaderClassName = 'fui-MenuGroupHeader';\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(menuGroupHeaderClassName, styles.root, state.root.className);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
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;
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useMenuItemStyles_unstable = exports.menuItemClassName = void 0;
6
+ exports.useMenuItemStyles_unstable = exports.menuItemClassNames = exports.menuItemClassName = void 0;
7
7
 
8
8
  const react_1 = /*#__PURE__*/require("@griffel/react");
9
9
 
@@ -12,22 +12,48 @@ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
12
12
  const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
13
13
 
14
14
  const index_1 = /*#__PURE__*/require("../../selectable/index");
15
+ /**
16
+ * @deprecated Use `menuItemClassNames.root` instead.
17
+ */
18
+
15
19
 
16
20
  exports.menuItemClassName = 'fui-MenuItem';
21
+ exports.menuItemClassNames = {
22
+ root: 'fui-MenuItem',
23
+ icon: 'fui-MenuItem__icon',
24
+ checkmark: 'fui-MenuItem__checkmark',
25
+ submenuIndicator: 'fui-MenuItem__submenuIndicator',
26
+ content: 'fui-MenuItem__content',
27
+ secondaryContent: 'fui-MenuItem__secondaryContent'
28
+ };
17
29
 
18
30
  const useStyles = /*#__PURE__*/react_1.__styles({
19
31
  "focusIndicator": {
20
32
  "B486eqv": "f2hkw1w",
21
- "B1bra5l": "fc85khu",
33
+ "Bnmjwt4": "flfsvnh",
34
+ "Jopkrh": ["f1781m5e", "flvaaa9"],
35
+ "hhrs2v": "f50u1b5",
36
+ "B7jbng7": ["flvaaa9", "f1781m5e"],
22
37
  "e8izhr": "f1pxpxw8",
23
38
  "in3gf6": "f1149fnl",
24
39
  "B1i23sz": "fd1orka",
25
- "ln9as": "fgtqheg",
26
40
  "Bfgg0yq": "fq7mjg8",
27
- "i16j1i": "fq9bj62",
28
- "yxydaw": "fy07e8r",
29
- "B9sa02e": "f1ha6shg",
30
- "yaquy9": "f4ltwxu",
41
+ "B7231uf": "fmqgchs",
42
+ "Bxoolf0": ["f1lv6wi8", "famjx04"],
43
+ "fo1iai": "f1nbyjd2",
44
+ "Bh81ga8": ["famjx04", "f1lv6wi8"],
45
+ "qztvpn": "f5n18is",
46
+ "ge3ubn": ["f13az7yk", "f14kwzu1"],
47
+ "F41yt0": "fneogx5",
48
+ "Bxrdl85": ["f14kwzu1", "f13az7yk"],
49
+ "Bb63s14": ["f1f0b0sl", "flsib9d"],
50
+ "Ikxprv": ["flsib9d", "f1f0b0sl"],
51
+ "Bhxvgo6": ["fbewl49", "fs55jlu"],
52
+ "J01dyq": ["fs55jlu", "fbewl49"],
53
+ "hzsgvt": "f1f43d5r",
54
+ "Ba9tnbb": ["f1ib27sc", "f14s7j5v"],
55
+ "Fpkomr": "f13oqbgc",
56
+ "Bttdqvk": ["f14s7j5v", "f1ib27sc"],
31
57
  "Bl8qd6i": "f1284xzw",
32
58
  "Byzgy54": "f14dru39",
33
59
  "mq8cyt": ["fvabyfg", "f12y1wz2"],
@@ -71,13 +97,19 @@ const useStyles = /*#__PURE__*/react_1.__styles({
71
97
  "a9b677": "f64fuq3",
72
98
  "Bqenvij": "fjamq6b",
73
99
  "Be2twd7": "fe5j1ua",
74
- "Bg96gwp": "fez10in"
100
+ "Bg96gwp": "fez10in",
101
+ "Bt984gj": "f122n59",
102
+ "mc9l5x": "ftuwxu6",
103
+ "Brf1p80": "f4d9j23"
75
104
  },
76
105
  "submenuIndicator": {
77
106
  "a9b677": "f64fuq3",
78
107
  "Bqenvij": "fjamq6b",
79
108
  "Be2twd7": "fe5j1ua",
80
- "Bg96gwp": "fez10in"
109
+ "Bg96gwp": "fez10in",
110
+ "Bt984gj": "f122n59",
111
+ "mc9l5x": "ftuwxu6",
112
+ "Brf1p80": "f4d9j23"
81
113
  },
82
114
  "disabled": {
83
115
  "sj55zd": "f1s2aq7o",
@@ -86,7 +118,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
86
118
  }
87
119
  }, {
88
120
  "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
89
- "d": ["[data-keyboard-nav] .fc85khu:focus{border-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] .fgtqheg:focus:after{box-sizing:outline-box;}", "[data-keyboard-nav] .fq7mjg8:focus:after{z-index:1;}", "[data-keyboard-nav] .fq9bj62:focus:after{border-style:solid;}", "[data-keyboard-nav] .fy07e8r:focus:after{border-width:2px;}", "[data-keyboard-nav] .f1ha6shg:focus:after{border-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f4ltwxu:focus:after{border-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;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
121
+ "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);}"],
90
122
  "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1jp5ecu:hover{color:var(--colorNeutralForeground3Hover);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}"],
91
123
  "f": [".fc1cou1:focus{color:var(--colorNeutralForeground3Hover);}", ".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}"]
92
124
  });
@@ -95,22 +127,26 @@ const useStyles = /*#__PURE__*/react_1.__styles({
95
127
 
96
128
  const useMenuItemStyles_unstable = state => {
97
129
  const styles = useStyles();
98
- state.root.className = react_1.mergeClasses(exports.menuItemClassName, styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);
130
+ state.root.className = react_1.mergeClasses(exports.menuItemClassNames.root, styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);
99
131
 
100
132
  if (state.content) {
101
- state.content.className = react_1.mergeClasses(styles.content, state.content.className);
133
+ state.content.className = react_1.mergeClasses(exports.menuItemClassNames.content, styles.content, state.content.className);
134
+ }
135
+
136
+ if (state.checkmark) {
137
+ state.checkmark.className = react_1.mergeClasses(exports.menuItemClassNames.checkmark, state.checkmark.className);
102
138
  }
103
139
 
104
140
  if (state.secondaryContent) {
105
- state.secondaryContent.className = react_1.mergeClasses(!state.disabled && styles.secondaryContent, state.secondaryContent.className);
141
+ state.secondaryContent.className = react_1.mergeClasses(exports.menuItemClassNames.secondaryContent, !state.disabled && styles.secondaryContent, state.secondaryContent.className);
106
142
  }
107
143
 
108
144
  if (state.icon) {
109
- state.icon.className = react_1.mergeClasses(styles.icon, state.icon.className);
145
+ state.icon.className = react_1.mergeClasses(exports.menuItemClassNames.icon, styles.icon, state.icon.className);
110
146
  }
111
147
 
112
148
  if (state.submenuIndicator) {
113
- state.submenuIndicator.className = react_1.mergeClasses(styles.submenuIndicator, state.submenuIndicator.className);
149
+ state.submenuIndicator.className = react_1.mergeClasses(exports.menuItemClassNames.submenuIndicator, styles.submenuIndicator, state.submenuIndicator.className);
114
150
  }
115
151
 
116
152
  index_1.useCheckmarkStyles_unstable(state);
@@ -1 +1 @@
1
- {"version":3,"sources":["components/MenuItem/useMenuItemStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAIa,OAAA,CAAA,iBAAA,GAAoB,cAApB;;AAEb,MAAM,SAAS,gBAAG,OAAA,SAAA;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;AAgEA;;;AACO,MAAM,0BAA0B,GAAI,KAAD,IAAyB;AACjE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,iBADqB,EAErB,MAAM,CAAC,IAFc,EAGrB,MAAM,CAAC,cAHc,EAIrB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAJJ,EAKrB,KAAK,CAAC,IAAN,CAAW,SALU,CAAvB;;AAQA,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,OAAA,CAAA,YAAA,CAAa,MAAM,CAAC,OAApB,EAA6B,KAAK,CAAC,OAAN,CAAc,SAA3C,CAA1B;AACD;;AAED,MAAI,KAAK,CAAC,gBAAV,EAA4B;AAC1B,IAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,OAAA,CAAA,YAAA,CACjC,CAAC,KAAK,CAAC,QAAP,IAAmB,MAAM,CAAC,gBADO,EAEjC,KAAK,CAAC,gBAAN,CAAuB,SAFU,CAAnC;AAID;;AAED,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,MAAM,CAAC,IAApB,EAA0B,KAAK,CAAC,IAAN,CAAW,SAArC,CAAvB;AACD;;AAED,MAAI,KAAK,CAAC,gBAAV,EAA4B;AAC1B,IAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,OAAA,CAAA,YAAA,CAAa,MAAM,CAAC,gBAApB,EAAsC,KAAK,CAAC,gBAAN,CAAuB,SAA7D,CAAnC;AACD;;AACD,EAAA,OAAA,CAAA,2BAAA,CAA4B,KAA5B;AACD,CA7BM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","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 { MenuItemState } from './MenuItem.types';\n\nexport const menuItemClassName = 'fui-MenuItem';\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 },\n submenuIndicator: {\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\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 menuItemClassName,\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(styles.content, state.content.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n !state.disabled && styles.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(styles.icon, state.icon.className);\n }\n\n if (state.submenuIndicator) {\n state.submenuIndicator.className = mergeClasses(styles.submenuIndicator, state.submenuIndicator.className);\n }\n useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/MenuItem/useMenuItemStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;AAKA;;AAEG;;;AACU,OAAA,CAAA,iBAAA,GAAoB,cAApB;AACA,OAAA,CAAA,kBAAA,GAAoD;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,CAApD;;AASb,MAAM,SAAS,gBAAG,OAAA,SAAA;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;;;AACO,MAAM,0BAA0B,GAAI,KAAD,IAAyB;AACjE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,kBAAA,CAAmB,IADE,EAErB,MAAM,CAAC,IAFc,EAGrB,MAAM,CAAC,cAHc,EAIrB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAJJ,EAKrB,KAAK,CAAC,IAAN,CAAW,SALU,CAAvB;;AAQA,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,kBAAA,CAAmB,OAAhC,EAAyC,MAAM,CAAC,OAAhD,EAAyD,KAAK,CAAC,OAAN,CAAc,SAAvE,CAA1B;AACD;;AAED,MAAI,KAAK,CAAC,SAAV,EAAqB;AACnB,IAAA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,kBAAA,CAAmB,SAAhC,EAA2C,KAAK,CAAC,SAAN,CAAgB,SAA3D,CAA5B;AACD;;AAED,MAAI,KAAK,CAAC,gBAAV,EAA4B;AAC1B,IAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,OAAA,CAAA,YAAA,CACjC,OAAA,CAAA,kBAAA,CAAmB,gBADc,EAEjC,CAAC,KAAK,CAAC,QAAP,IAAmB,MAAM,CAAC,gBAFO,EAGjC,KAAK,CAAC,gBAAN,CAAuB,SAHU,CAAnC;AAKD;;AAED,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,kBAAA,CAAmB,IAAhC,EAAsC,MAAM,CAAC,IAA7C,EAAmD,KAAK,CAAC,IAAN,CAAW,SAA9D,CAAvB;AACD;;AAED,MAAI,KAAK,CAAC,gBAAV,EAA4B;AAC1B,IAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,OAAA,CAAA,YAAA,CACjC,OAAA,CAAA,kBAAA,CAAmB,gBADc,EAEjC,MAAM,CAAC,gBAF0B,EAGjC,KAAK,CAAC,gBAAN,CAAuB,SAHU,CAAnC;AAKD;;AACD,EAAA,OAAA,CAAA,2BAAA,CAA4B,KAA5B;AACD,CAtCM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","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;
@@ -3,18 +3,46 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useMenuItemCheckboxStyles_unstable = exports.menuItemCheckboxClassName = void 0;
6
+ exports.useMenuItemCheckboxStyles_unstable = exports.menuItemCheckboxClassNames = exports.menuItemCheckboxClassName = void 0;
7
7
 
8
8
  const react_1 = /*#__PURE__*/require("@griffel/react");
9
9
 
10
10
  const index_1 = /*#__PURE__*/require("../../selectable/index");
11
11
 
12
12
  const useMenuItemStyles_1 = /*#__PURE__*/require("../MenuItem/useMenuItemStyles");
13
+ /**
14
+ * @deprecated Use `menuItemCheckboxClassNames.root` instead.
15
+ */
16
+
13
17
 
14
18
  exports.menuItemCheckboxClassName = 'fui-MenuItemCheckbox';
19
+ exports.menuItemCheckboxClassNames = {
20
+ root: 'fui-MenuItemCheckbox',
21
+ icon: 'fui-MenuItemCheckbox__icon',
22
+ checkmark: 'fui-MenuItemCheckbox__checkmark',
23
+ content: 'fui-MenuItemCheckbox__content',
24
+ secondaryContent: 'fui-MenuItemCheckbox__secondaryContent'
25
+ };
15
26
 
16
27
  const useMenuItemCheckboxStyles_unstable = state => {
17
- state.root.className = react_1.mergeClasses(exports.menuItemCheckboxClassName, state.root.className);
28
+ state.root.className = react_1.mergeClasses(exports.menuItemCheckboxClassNames.root, state.root.className);
29
+
30
+ if (state.content) {
31
+ state.content.className = react_1.mergeClasses(exports.menuItemCheckboxClassNames.content, state.content.className);
32
+ }
33
+
34
+ if (state.secondaryContent) {
35
+ state.secondaryContent.className = react_1.mergeClasses(exports.menuItemCheckboxClassNames.secondaryContent, state.secondaryContent.className);
36
+ }
37
+
38
+ if (state.icon) {
39
+ state.icon.className = react_1.mergeClasses(exports.menuItemCheckboxClassNames.icon, state.icon.className);
40
+ }
41
+
42
+ if (state.checkmark) {
43
+ state.checkmark.className = react_1.mergeClasses(exports.menuItemCheckboxClassNames.checkmark, state.checkmark.className);
44
+ }
45
+
18
46
  useMenuItemStyles_1.useMenuItemStyles_unstable(state);
19
47
  index_1.useCheckmarkStyles_unstable(state);
20
48
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;;AAGa,OAAA,CAAA,yBAAA,GAA4B,sBAA5B;;AAEN,MAAM,kCAAkC,GAAI,KAAD,IAAiC;AACjF,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,yBAAb,EAAwC,KAAK,CAAC,IAAN,CAAW,SAAnD,CAAvB;AAEA,EAAA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;AACA,EAAA,OAAA,CAAA,2BAAA,CAA4B,KAA5B;AACD,CALM;;AAAM,OAAA,CAAA,kCAAA,GAAkC,kCAAlC","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';\nimport type { MenuItemCheckboxState } from './MenuItemCheckbox.types';\n\nexport const menuItemCheckboxClassName = 'fui-MenuItemCheckbox';\n\nexport const useMenuItemCheckboxStyles_unstable = (state: MenuItemCheckboxState) => {\n state.root.className = mergeClasses(menuItemCheckboxClassName, state.root.className);\n\n useMenuItemStyles_unstable(state);\n useCheckmarkStyles_unstable(state);\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAEA,MAAA,mBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,yBAAA,GAA4B,sBAA5B;AACA,OAAA,CAAA,0BAAA,GAAsF;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,CAAtF;;AAQN,MAAM,kCAAkC,GAAI,KAAD,IAAiC;AACjF,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,0BAAA,CAA2B,IAAxC,EAA8C,KAAK,CAAC,IAAN,CAAW,SAAzD,CAAvB;;AAEA,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,0BAAA,CAA2B,OAAxC,EAAiD,KAAK,CAAC,OAAN,CAAc,SAA/D,CAA1B;AACD;;AAED,MAAI,KAAK,CAAC,gBAAV,EAA4B;AAC1B,IAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,OAAA,CAAA,YAAA,CACjC,OAAA,CAAA,0BAAA,CAA2B,gBADM,EAEjC,KAAK,CAAC,gBAAN,CAAuB,SAFU,CAAnC;AAID;;AAED,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,0BAAA,CAA2B,IAAxC,EAA8C,KAAK,CAAC,IAAN,CAAW,SAAzD,CAAvB;AACD;;AAED,MAAI,KAAK,CAAC,SAAV,EAAqB;AACnB,IAAA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,0BAAA,CAA2B,SAAxC,EAAmD,KAAK,CAAC,SAAN,CAAgB,SAAnE,CAA5B;AACD;;AAED,EAAA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;AACA,EAAA,OAAA,CAAA,2BAAA,CAA4B,KAA5B;AACD,CAxBM;;AAAM,OAAA,CAAA,kCAAA,GAAkC,kCAAlC","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/"}