@fluentui/react-menu 0.0.0-nightly-20240823-0407.1 → 0.0.0-nightly-20240823-1802.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/CHANGELOG.md +17 -39
  2. package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js +4 -4
  3. package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js.map +1 -1
  4. package/lib/components/MenuItem/useMenuItemStyles.styles.js +16 -16
  5. package/lib/components/MenuItem/useMenuItemStyles.styles.js.map +1 -1
  6. package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js +11 -11
  7. package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js.map +1 -1
  8. package/lib/components/MenuPopover/useMenuPopoverStyles.styles.js +5 -5
  9. package/lib/components/MenuPopover/useMenuPopoverStyles.styles.js.map +1 -1
  10. package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js +3 -3
  11. package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js.map +1 -1
  12. package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js +6 -6
  13. package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js.map +1 -1
  14. package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.js +50 -50
  15. package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.js.map +1 -1
  16. package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js +25 -25
  17. package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js.map +1 -1
  18. package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.js +6 -6
  19. package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.js.map +1 -1
  20. package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js +4 -4
  21. package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js.map +1 -1
  22. package/package.json +14 -14
package/CHANGELOG.md CHANGED
@@ -1,52 +1,30 @@
1
1
  # Change Log - @fluentui/react-menu
2
2
 
3
- This log was last generated on Fri, 23 Aug 2024 04:11:33 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 23 Aug 2024 18:07:37 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20240823-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v0.0.0-nightly-20240823-0407.1)
7
+ ## [0.0.0-nightly-20240823-1802.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v0.0.0-nightly-20240823-1802.1)
8
8
 
9
- Fri, 23 Aug 2024 04:11:33 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.14.14..@fluentui/react-menu_v0.0.0-nightly-20240823-0407.1)
9
+ Fri, 23 Aug 2024 18:07:37 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.14.12..@fluentui/react-menu_v0.0.0-nightly-20240823-1802.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/keyboard-keys to v0.0.0-nightly-20240823-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/9636165c76ccc48fbdaa21ff025c788445b0c3fb) by beachball)
16
- - Bump @fluentui/react-aria to v0.0.0-nightly-20240823-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/9636165c76ccc48fbdaa21ff025c788445b0c3fb) by beachball)
17
- - Bump @fluentui/react-context-selector to v0.0.0-nightly-20240823-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/9636165c76ccc48fbdaa21ff025c788445b0c3fb) by beachball)
18
- - Bump @fluentui/react-portal to v0.0.0-nightly-20240823-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/9636165c76ccc48fbdaa21ff025c788445b0c3fb) by beachball)
19
- - Bump @fluentui/react-positioning to v0.0.0-nightly-20240823-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/9636165c76ccc48fbdaa21ff025c788445b0c3fb) by beachball)
20
- - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240823-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/9636165c76ccc48fbdaa21ff025c788445b0c3fb) by beachball)
21
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20240823-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/9636165c76ccc48fbdaa21ff025c788445b0c3fb) by beachball)
22
- - Bump @fluentui/react-theme to v0.0.0-nightly-20240823-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/9636165c76ccc48fbdaa21ff025c788445b0c3fb) by beachball)
23
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20240823-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/9636165c76ccc48fbdaa21ff025c788445b0c3fb) by beachball)
24
- - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240823-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/9636165c76ccc48fbdaa21ff025c788445b0c3fb) by beachball)
25
- - Bump @fluentui/react-provider to v0.0.0-nightly-20240823-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/9636165c76ccc48fbdaa21ff025c788445b0c3fb) by beachball)
26
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20240823-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/9636165c76ccc48fbdaa21ff025c788445b0c3fb) by beachball)
27
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240823-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/9636165c76ccc48fbdaa21ff025c788445b0c3fb) by beachball)
28
-
29
- ## [9.14.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.14.14)
30
-
31
- Thu, 15 Aug 2024 13:49:46 GMT
32
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.14.13..@fluentui/react-menu_v9.14.14)
33
-
34
- ### Patches
35
-
36
- - Bump @fluentui/react-aria to v9.13.4 ([PR #32313](https://github.com/microsoft/fluentui/pull/32313) by beachball)
37
- - Bump @fluentui/react-portal to v9.4.33 ([PR #32313](https://github.com/microsoft/fluentui/pull/32313) by beachball)
38
- - Bump @fluentui/react-tabster to v9.22.5 ([PR #32313](https://github.com/microsoft/fluentui/pull/32313) by beachball)
39
-
40
- ## [9.14.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.14.13)
41
-
42
- Thu, 15 Aug 2024 08:22:11 GMT
43
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.14.12..@fluentui/react-menu_v9.14.13)
44
-
45
- ### Patches
46
-
47
- - Bump @fluentui/react-aria to v9.13.3 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
48
- - Bump @fluentui/react-portal to v9.4.32 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
49
- - Bump @fluentui/react-tabster to v9.22.4 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
15
+ - Bump @fluentui/keyboard-keys to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
16
+ - Bump @fluentui/react-aria to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
17
+ - Bump @fluentui/react-context-selector to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
18
+ - Bump @fluentui/react-portal to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
19
+ - Bump @fluentui/react-positioning to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
20
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
21
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
22
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
23
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
24
+ - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
25
+ - Bump @fluentui/react-provider to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
26
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
27
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
50
28
 
51
29
  ## [9.14.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.14.12)
52
30
 
package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js CHANGED
@@ -5,17 +5,17 @@ export const menuGroupHeaderClassNames = {
5
5
  };
6
6
  const useStyles = /*#__PURE__*/__styles({
7
7
  root: {
8
- Be2twd7: "fy9rknc",
9
- sj55zd: "f11d4kpn",
8
+ Be2twd7: "f1xnrmmq",
9
+ sj55zd: "fct541z",
10
10
  uwmqm3: ["f177v4lu", "f19lj068"],
11
11
  z189sj: ["f19lj068", "f177v4lu"],
12
- Bhrd7zp: "fl43uef",
12
+ Bhrd7zp: "f1787h39",
13
13
  Bqenvij: "f1d2rq10",
14
14
  mc9l5x: "f22iagw",
15
15
  Bt984gj: "f122n59"
16
16
  }
17
17
  }, {
18
- d: [".fy9rknc{font-size:var(--fontSizeBase200);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f177v4lu{padding-left:8px;}", ".f19lj068{padding-right:8px;}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1d2rq10{height:32px;}", ".f22iagw{display:flex;}", ".f122n59{align-items:center;}"]
18
+ d: [".f1xnrmmq{font-size:var(--1301, var(--1302, var(--fontSizeBase200)));}", ".fct541z{color:var(--1303, var(--1304, var(--colorNeutralForeground3)));}", ".f177v4lu{padding-left:8px;}", ".f19lj068{padding-right:8px;}", ".f1787h39{font-weight:var(--1305, var(--1306, var(--fontWeightSemibold)));}", ".f1d2rq10{height:32px;}", ".f22iagw{display:flex;}", ".f122n59{align-items:center;}"]
19
19
  });
20
20
  export const useMenuGroupHeaderStyles_unstable = state => {
21
21
  'use no memo';
package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["mergeClasses","__styles","tokens","menuGroupHeaderClassNames","root","useStyles","Be2twd7","sj55zd","uwmqm3","z189sj","Bhrd7zp","Bqenvij","mc9l5x","Bt984gj","d","useMenuGroupHeaderStyles_unstable","state","styles","className"],"sources":["useMenuGroupHeaderStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const menuGroupHeaderClassNames = {\n root: 'fui-MenuGroupHeader'\n};\nconst useStyles = makeStyles({\n root: {\n fontSize: tokens.fontSizeBase200,\n color: tokens.colorNeutralForeground3,\n paddingLeft: '8px',\n paddingRight: '8px',\n fontWeight: tokens.fontWeightSemibold,\n height: '32px',\n display: 'flex',\n alignItems: 'center'\n }\n});\nexport const useMenuGroupHeaderStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAWjB,CAAC;AACF,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1BW,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGlB,YAAY,CAACG,yBAAyB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EACtG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["mergeClasses","__styles","tokens","menuGroupHeaderClassNames","root","useStyles","Be2twd7","sj55zd","uwmqm3","z189sj","Bhrd7zp","Bqenvij","mc9l5x","Bt984gj","d","useMenuGroupHeaderStyles_unstable","state","styles","className"],"sources":["useMenuGroupHeaderStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const menuGroupHeaderClassNames = {\n root: 'fui-MenuGroupHeader'\n};\nconst useStyles = makeStyles({\n root: {\n fontSize: `var(--1301, var(--1302, ${tokens.fontSizeBase200}))`,\n color: `var(--1303, var(--1304, ${tokens.colorNeutralForeground3}))`,\n paddingLeft: '8px',\n paddingRight: '8px',\n fontWeight: `var(--1305, var(--1306, ${tokens.fontWeightSemibold}))`,\n height: '32px',\n display: 'flex',\n alignItems: 'center'\n }\n});\nexport const useMenuGroupHeaderStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAWjB,CAAC;AACF,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1BW,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGlB,YAAY,CAACG,yBAAyB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EACtG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
package/lib/components/MenuItem/useMenuItemStyles.styles.js CHANGED
@@ -11,12 +11,12 @@ export const menuItemClassNames = {
11
11
  content: 'fui-MenuItem__content',
12
12
  secondaryContent: 'fui-MenuItem__secondaryContent'
13
13
  };
14
- const useRootBaseStyles = /*#__PURE__*/__resetStyles("r11normc", "r1lnj0i0", {
15
- r: [".r11normc{border-radius:var(--borderRadiusMedium);position:relative;color:var(--colorNeutralForeground2);background-color:var(--colorNeutralBackground1);padding-right:var(--spacingVerticalSNudge);padding-left:var(--spacingVerticalSNudge);padding-top:var(--spacingVerticalSNudge);padding-bottom:var(--spacingVerticalSNudge);box-sizing:border-box;max-width:290px;min-height:32px;flex-shrink:0;display:flex;align-items:start;font-size:var(--fontSizeBase300);cursor:pointer;gap:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;}", ".r11normc:hover{background-color:var(--colorNeutralBackground1Hover);color:var(--colorNeutralForeground2Hover);}", ".r11normc:hover .fui-Icon-filled{display:inline;}", ".r11normc:hover .fui-Icon-regular{display:none;}", ".r11normc:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}", ".r11normc:hover:active{background-color:var(--colorNeutralBackground1Pressed);color:var(--colorNeutralForeground2Pressed);}", ".r11normc:focus{outline-style:none;}", ".r11normc:focus-visible{outline-style:none;}", ".r11normc[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r11normc[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".r1lnj0i0{border-radius:var(--borderRadiusMedium);position:relative;color:var(--colorNeutralForeground2);background-color:var(--colorNeutralBackground1);padding-left:var(--spacingVerticalSNudge);padding-right:var(--spacingVerticalSNudge);padding-top:var(--spacingVerticalSNudge);padding-bottom:var(--spacingVerticalSNudge);box-sizing:border-box;max-width:290px;min-height:32px;flex-shrink:0;display:flex;align-items:start;font-size:var(--fontSizeBase300);cursor:pointer;gap:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;}", ".r1lnj0i0:hover{background-color:var(--colorNeutralBackground1Hover);color:var(--colorNeutralForeground2Hover);}", ".r1lnj0i0:hover .fui-Icon-filled{display:inline;}", ".r1lnj0i0:hover .fui-Icon-regular{display:none;}", ".r1lnj0i0:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}", ".r1lnj0i0:hover:active{background-color:var(--colorNeutralBackground1Pressed);color:var(--colorNeutralForeground2Pressed);}", ".r1lnj0i0:focus{outline-style:none;}", ".r1lnj0i0:focus-visible{outline-style:none;}", ".r1lnj0i0[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1lnj0i0[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
16
- s: ["@media (forced-colors: active){.r11normc:hover{background-color:Canvas;border-color:Highlight;color:Highlight;}.r11normc:focus{outline-style:none;}.r11normc:focus-visible{outline-style:none;}.r11normc[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}@media (forced-colors: active){.r11normc[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}.r11normc[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid Highlight;border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}}", "@media (forced-colors: active){.r11normc[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media (forced-colors: active){.r1lnj0i0:hover{background-color:Canvas;border-color:Highlight;color:Highlight;}.r1lnj0i0:focus{outline-style:none;}.r1lnj0i0:focus-visible{outline-style:none;}.r1lnj0i0[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}@media (forced-colors: active){.r1lnj0i0[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}.r1lnj0i0[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid Highlight;border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}}", "@media (forced-colors: active){.r1lnj0i0[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"]
14
+ const useRootBaseStyles = /*#__PURE__*/__resetStyles("r1flkek8", "r16jqo9h", {
15
+ r: [".r1flkek8{border-radius:var(--1307, var(--1308, var(--borderRadiusMedium)));position:relative;color:var(--1309, var(--1310, var(--colorNeutralForeground2)));background-color:var(--1311, var(--1312, var(--colorNeutralBackground1)));padding-right:var(--1313, var(--1314, var(--spacingVerticalSNudge)));padding-left:var(--1315, var(--1316, var(--spacingVerticalSNudge)));padding-top:var(--1317, var(--1318, var(--spacingVerticalSNudge)));padding-bottom:var(--1319, var(--1320, var(--spacingVerticalSNudge)));box-sizing:border-box;max-width:290px;min-height:32px;flex-shrink:0;display:flex;align-items:start;font-size:var(--1321, var(--1322, var(--fontSizeBase300)));cursor:pointer;gap:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;}", ".r1flkek8:hover{background-color:var(--1323, var(--1324, var(--colorNeutralBackground1Hover)));color:var(--1325, var(--1326, var(--colorNeutralForeground2Hover)));}", ".r1flkek8:hover .fui-Icon-filled{display:inline;}", ".r1flkek8:hover .fui-Icon-regular{display:none;}", ".r1flkek8:hover .fui-MenuItem__icon{color:var(--1327, var(--1328, var(--colorNeutralForeground2BrandSelected)));}", ".r1flkek8:hover:active{background-color:var(--1329, var(--1330, var(--colorNeutralBackground1Pressed)));color:var(--1331, var(--1332, var(--colorNeutralForeground2Pressed)));}", ".r1flkek8:focus{outline-style:none;}", ".r1flkek8:focus-visible{outline-style:none;}", ".r1flkek8[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1flkek8[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".r16jqo9h{border-radius:var(--1307, var(--1308, var(--borderRadiusMedium)));position:relative;color:var(--1309, var(--1310, var(--colorNeutralForeground2)));background-color:var(--1311, var(--1312, var(--colorNeutralBackground1)));padding-left:var(--1313, var(--1314, var(--spacingVerticalSNudge)));padding-right:var(--1315, var(--1316, var(--spacingVerticalSNudge)));padding-top:var(--1317, var(--1318, var(--spacingVerticalSNudge)));padding-bottom:var(--1319, var(--1320, var(--spacingVerticalSNudge)));box-sizing:border-box;max-width:290px;min-height:32px;flex-shrink:0;display:flex;align-items:start;font-size:var(--1321, var(--1322, var(--fontSizeBase300)));cursor:pointer;gap:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;}", ".r16jqo9h:hover{background-color:var(--1323, var(--1324, var(--colorNeutralBackground1Hover)));color:var(--1325, var(--1326, var(--colorNeutralForeground2Hover)));}", ".r16jqo9h:hover .fui-Icon-filled{display:inline;}", ".r16jqo9h:hover .fui-Icon-regular{display:none;}", ".r16jqo9h:hover .fui-MenuItem__icon{color:var(--1327, var(--1328, var(--colorNeutralForeground2BrandSelected)));}", ".r16jqo9h:hover:active{background-color:var(--1329, var(--1330, var(--colorNeutralBackground1Pressed)));color:var(--1331, var(--1332, var(--colorNeutralForeground2Pressed)));}", ".r16jqo9h:focus{outline-style:none;}", ".r16jqo9h:focus-visible{outline-style:none;}", ".r16jqo9h[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r16jqo9h[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
16
+ s: ["@media (forced-colors: active){.r1flkek8:hover{background-color:Canvas;border-color:Highlight;color:Highlight;}.r1flkek8:focus{outline-style:none;}.r1flkek8:focus-visible{outline-style:none;}.r1flkek8[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}@media (forced-colors: active){.r1flkek8[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}.r1flkek8[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid Highlight;border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}}", "@media (forced-colors: active){.r1flkek8[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media (forced-colors: active){.r16jqo9h:hover{background-color:Canvas;border-color:Highlight;color:Highlight;}.r16jqo9h:focus{outline-style:none;}.r16jqo9h:focus-visible{outline-style:none;}.r16jqo9h[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}@media (forced-colors: active){.r16jqo9h[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}.r16jqo9h[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid Highlight;border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}}", "@media (forced-colors: active){.r16jqo9h[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"]
17
17
  });
18
18
  const useContentBaseStyles = /*#__PURE__*/__resetStyles("r1ls86vo", "rpbc5dr", [".r1ls86vo{padding-left:2px;padding-right:2px;background-color:transparent;flex-grow:1;}", ".rpbc5dr{padding-right:2px;padding-left:2px;background-color:transparent;flex-grow:1;}"]);
19
- const useSecondaryContentBaseStyles = /*#__PURE__*/__resetStyles("r12mwwux", "r1ewgu5j", [".r12mwwux{padding-left:2px;padding-right:2px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground3);}", ".r12mwwux:hover{color:var(--colorNeutralForeground3Hover);}", ".r12mwwux:focus{color:var(--colorNeutralForeground3Hover);}", ".r1ewgu5j{padding-right:2px;padding-left:2px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground3);}", ".r1ewgu5j:hover{color:var(--colorNeutralForeground3Hover);}", ".r1ewgu5j:focus{color:var(--colorNeutralForeground3Hover);}"]);
19
+ const useSecondaryContentBaseStyles = /*#__PURE__*/__resetStyles("ru7jybp", "rp6tyji", [".ru7jybp{padding-left:2px;padding-right:2px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--1333, var(--1334, var(--lineHeightBase300)));color:var(--1335, var(--1336, var(--colorNeutralForeground3)));}", ".ru7jybp:hover{color:var(--1337, var(--1338, var(--colorNeutralForeground3Hover)));}", ".ru7jybp:focus{color:var(--1339, var(--1340, var(--colorNeutralForeground3Hover)));}", ".rp6tyji{padding-right:2px;padding-left:2px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--1333, var(--1334, var(--lineHeightBase300)));color:var(--1335, var(--1336, var(--colorNeutralForeground3)));}", ".rp6tyji:hover{color:var(--1337, var(--1338, var(--colorNeutralForeground3Hover)));}", ".rp6tyji:focus{color:var(--1339, var(--1340, var(--colorNeutralForeground3Hover)));}"]);
20
20
  const useIconBaseStyles = /*#__PURE__*/__resetStyles("r9c34qo", null, [".r9c34qo{width:20px;height:20px;font-size:20px;line-height:0;align-items:center;display:inline-flex;justify-content:center;}"]);
21
21
  const useSubmenuIndicatorBaseStyles = /*#__PURE__*/__resetStyles("r9c34qo", null, [".r9c34qo{width:20px;height:20px;font-size:20px;line-height:0;align-items:center;display:inline-flex;justify-content:center;}"]);
22
22
  const useStyles = /*#__PURE__*/__styles({
@@ -31,21 +31,21 @@ const useStyles = /*#__PURE__*/__styles({
31
31
  Beyfa6y: ["f1deotkl", "f1krrbdw"],
32
32
  uwmqm3: ["f1cnd47f", "fhxju0i"],
33
33
  Ftih45: "f1wl9k8s",
34
- Ccq8qp: "f1yn80uh",
34
+ Ccq8qp: "f1sa9021",
35
35
  Baz25je: "f68mna0",
36
- cmx5o7: "f1p5zmk"
36
+ cmx5o7: "f14ltx6a"
37
37
  },
38
38
  disabled: {
39
- sj55zd: "f1s2aq7o",
40
- Bi91k9c: "fvgxktp",
41
- Jwef8y: "f1ijtazh",
39
+ sj55zd: "fpzq6t0",
40
+ Bi91k9c: "f19s7x3y",
41
+ Jwef8y: "f1nw4t48",
42
42
  eoavqd: "fphbwmw",
43
43
  Bk3fhr4: "f19vpps7",
44
44
  Bmfj8id: "fv5swzo",
45
- Bg7n49j: "f1q1x1ba",
46
- B2d53fq: "fcvwxyo",
47
- iro3zm: "f1to34ca",
48
- t0hwav: "ft33916",
45
+ Bg7n49j: "f1dpie7v",
46
+ B2d53fq: "f2gmxn8",
47
+ iro3zm: "faggc2",
48
+ t0hwav: "f13jpomk",
49
49
  Bbusuzp: "f1dcs8yz",
50
50
  ze5xyy: "f1kc2mi9",
51
51
  Bqrx1nm: "fkavljg",
@@ -55,9 +55,9 @@ const useStyles = /*#__PURE__*/__styles({
55
55
  Bh953qp: "f10l1t5h"
56
56
  }
57
57
  }, {
58
- d: [".fmnzpld{margin-top:2px;}", ".fqerorx{flex-grow:1;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1cnd47f{padding-left:0;}", ".fhxju0i{padding-right:0;}", ".f1wl9k8s::before{content:\"\";}", ".f1yn80uh::before{width:var(--strokeWidthThin);}", ".f68mna0::before{height:24px;}", ".f1p5zmk::before{background-color:var(--colorNeutralStroke1);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
59
- h: [".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".f1ijtazh:hover{background-color:var(--colorNeutralBackground1);}", ".fphbwmw:hover{cursor:not-allowed;}", ".f19vpps7:hover .fui-Icon-filled{display:none;}", ".fv5swzo:hover .fui-Icon-regular{display:inline;}", ".f1q1x1ba:hover .fui-MenuItem__icon{color:var(--colorNeutralForegroundDisabled);}", ".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}", ".f1to34ca:hover:active{background-color:var(--colorNeutralBackground1);}"],
60
- f: [".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}"],
58
+ d: [".fmnzpld{margin-top:2px;}", ".fqerorx{flex-grow:1;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1cnd47f{padding-left:0;}", ".fhxju0i{padding-right:0;}", ".f1wl9k8s::before{content:\"\";}", ".f1sa9021::before{width:var(--1341, var(--1342, var(--strokeWidthThin)));}", ".f68mna0::before{height:24px;}", ".f14ltx6a::before{background-color:var(--1343, var(--1344, var(--colorNeutralStroke1)));}", ".fpzq6t0{color:var(--1345, var(--1346, var(--colorNeutralForegroundDisabled)));}"],
59
+ h: [".f19s7x3y:hover{color:var(--1347, var(--1348, var(--colorNeutralForegroundDisabled)));}", ".f1nw4t48:hover{background-color:var(--1349, var(--1350, var(--colorNeutralBackground1)));}", ".fphbwmw:hover{cursor:not-allowed;}", ".f19vpps7:hover .fui-Icon-filled{display:none;}", ".fv5swzo:hover .fui-Icon-regular{display:inline;}", ".f1dpie7v:hover .fui-MenuItem__icon{color:var(--1351, var(--1352, var(--colorNeutralForegroundDisabled)));}", ".f2gmxn8:hover:active{color:var(--1353, var(--1354, var(--colorNeutralForegroundDisabled)));}", ".faggc2:hover:active{background-color:var(--1355, var(--1356, var(--colorNeutralBackground1)));}"],
60
+ f: [".f13jpomk:focus{color:var(--1357, var(--1358, var(--colorNeutralForegroundDisabled)));}"],
61
61
  m: [["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
62
62
  m: "(forced-colors: active)"
63
63
  }], ["@media (forced-colors: active){.f1kc2mi9:hover{color:GrayText;}}", {
package/lib/components/MenuItem/useMenuItemStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["mergeClasses","__styles","__resetStyles","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","typographyStyles","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","useRootBaseStyles","r","s","useContentBaseStyles","useSecondaryContentBaseStyles","useIconBaseStyles","useSubmenuIndicatorBaseStyles","useStyles","B6of3ja","splitItemMain","Bh6795r","splitItemTrigger","Btl43ni","Beyfa6y","uwmqm3","Ftih45","Ccq8qp","Baz25je","cmx5o7","disabled","sj55zd","Bi91k9c","Jwef8y","eoavqd","Bk3fhr4","Bmfj8id","Bg7n49j","B2d53fq","iro3zm","t0hwav","Bbusuzp","ze5xyy","Bqrx1nm","Bctn1xl","h5esng","Bh6z0a4","Bh953qp","d","h","f","m","useMenuItemStyles_unstable","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","className"],"sources":["useMenuItemStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nexport const menuItemClassNames = {\n root: 'fui-MenuItem',\n icon: 'fui-MenuItem__icon',\n checkmark: 'fui-MenuItem__checkmark',\n submenuIndicator: 'fui-MenuItem__submenuIndicator',\n content: 'fui-MenuItem__content',\n secondaryContent: 'fui-MenuItem__secondaryContent'\n};\nconst useRootBaseStyles = makeResetStyles({\n borderRadius: tokens.borderRadiusMedium,\n position: 'relative',\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackground1,\n paddingRight: tokens.spacingVerticalSNudge,\n paddingLeft: tokens.spacingVerticalSNudge,\n paddingTop: tokens.spacingVerticalSNudge,\n paddingBottom: tokens.spacingVerticalSNudge,\n boxSizing: 'border-box',\n maxWidth: '290px',\n minHeight: '32px',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'start',\n fontSize: tokens.fontSizeBase300,\n cursor: 'pointer',\n gap: '4px',\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground2Hover,\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n },\n [`& .${menuItemClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandSelected\n }\n },\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n color: tokens.colorNeutralForeground2Pressed\n },\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'Canvas',\n borderColor: 'Highlight',\n color: 'Highlight'\n },\n ...createFocusOutlineStyle({\n style: {\n outlineColor: 'Highlight'\n }\n })\n },\n userSelect: 'none',\n ...createFocusOutlineStyle()\n});\nconst useContentBaseStyles = makeResetStyles({\n paddingLeft: '2px',\n paddingRight: '2px',\n backgroundColor: 'transparent',\n flexGrow: 1\n});\nconst useSecondaryContentBaseStyles = makeResetStyles({\n paddingLeft: '2px',\n paddingRight: '2px',\n ...typographyStyles.caption1,\n lineHeight: tokens.lineHeightBase300,\n color: tokens.colorNeutralForeground3,\n ':hover': {\n color: tokens.colorNeutralForeground3Hover\n },\n ':focus': {\n color: tokens.colorNeutralForeground3Hover\n }\n});\nconst useIconBaseStyles = makeResetStyles({\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center'\n});\nconst useSubmenuIndicatorBaseStyles = makeResetStyles({\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center'\n});\nconst useStyles = makeStyles({\n checkmark: {\n marginTop: '2px'\n },\n splitItemMain: {\n flexGrow: 1\n },\n splitItemTrigger: {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n paddingLeft: 0,\n '::before': {\n content: '\"\"',\n width: tokens.strokeWidthThin,\n height: '24px',\n backgroundColor: tokens.colorNeutralStroke1\n }\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorNeutralBackground1,\n cursor: 'not-allowed',\n [`& .${iconFilledClassName}`]: {\n display: 'none'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline'\n },\n [`& .${menuItemClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n ':hover:active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorNeutralBackground1\n },\n ':focus': {\n color: tokens.colorNeutralForegroundDisabled\n },\n '@media (forced-colors: active)': {\n color: 'GrayText',\n ':hover': {\n color: 'GrayText',\n backgroundColor: 'Canvas',\n [`& .${menuItemClassNames.icon}`]: {\n color: 'GrayText',\n backgroundColor: 'Canvas'\n }\n },\n ':focus': {\n color: 'GrayText',\n backgroundColor: 'Canvas'\n }\n }\n }\n});\n/** Applies style classnames to slots */ export const useMenuItemStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const rootBaseStyles = useRootBaseStyles();\n const contentBaseStyles = useContentBaseStyles();\n const secondaryContentBaseStyles = useSecondaryContentBaseStyles();\n const iconBaseStyles = useIconBaseStyles();\n const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();\n state.root.className = mergeClasses(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemClassNames.content, contentBaseStyles, state.content.className);\n }\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, !state.disabled && secondaryContentBaseStyles, state.secondaryContent.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);\n }\n if (state.submenuIndicator) {\n state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className);\n }\n useCheckmarkStyles_unstable(state);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["mergeClasses","__styles","__resetStyles","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","typographyStyles","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","useRootBaseStyles","r","s","useContentBaseStyles","useSecondaryContentBaseStyles","useIconBaseStyles","useSubmenuIndicatorBaseStyles","useStyles","B6of3ja","splitItemMain","Bh6795r","splitItemTrigger","Btl43ni","Beyfa6y","uwmqm3","Ftih45","Ccq8qp","Baz25je","cmx5o7","disabled","sj55zd","Bi91k9c","Jwef8y","eoavqd","Bk3fhr4","Bmfj8id","Bg7n49j","B2d53fq","iro3zm","t0hwav","Bbusuzp","ze5xyy","Bqrx1nm","Bctn1xl","h5esng","Bh6z0a4","Bh953qp","d","h","f","m","useMenuItemStyles_unstable","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","className"],"sources":["useMenuItemStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nexport const menuItemClassNames = {\n root: 'fui-MenuItem',\n icon: 'fui-MenuItem__icon',\n checkmark: 'fui-MenuItem__checkmark',\n submenuIndicator: 'fui-MenuItem__submenuIndicator',\n content: 'fui-MenuItem__content',\n secondaryContent: 'fui-MenuItem__secondaryContent'\n};\nconst useRootBaseStyles = makeResetStyles({\n borderRadius: `var(--1307, var(--1308, ${tokens.borderRadiusMedium}))`,\n position: 'relative',\n color: `var(--1309, var(--1310, ${tokens.colorNeutralForeground2}))`,\n backgroundColor: `var(--1311, var(--1312, ${tokens.colorNeutralBackground1}))`,\n paddingRight: `var(--1313, var(--1314, ${tokens.spacingVerticalSNudge}))`,\n paddingLeft: `var(--1315, var(--1316, ${tokens.spacingVerticalSNudge}))`,\n paddingTop: `var(--1317, var(--1318, ${tokens.spacingVerticalSNudge}))`,\n paddingBottom: `var(--1319, var(--1320, ${tokens.spacingVerticalSNudge}))`,\n boxSizing: 'border-box',\n maxWidth: '290px',\n minHeight: '32px',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'start',\n fontSize: `var(--1321, var(--1322, ${tokens.fontSizeBase300}))`,\n cursor: 'pointer',\n gap: '4px',\n ':hover': {\n backgroundColor: `var(--1323, var(--1324, ${tokens.colorNeutralBackground1Hover}))`,\n color: `var(--1325, var(--1326, ${tokens.colorNeutralForeground2Hover}))`,\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n },\n [`& .${menuItemClassNames.icon}`]: {\n color: `var(--1327, var(--1328, ${tokens.colorNeutralForeground2BrandSelected}))`\n }\n },\n ':hover:active': {\n backgroundColor: `var(--1329, var(--1330, ${tokens.colorNeutralBackground1Pressed}))`,\n color: `var(--1331, var(--1332, ${tokens.colorNeutralForeground2Pressed}))`\n },\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'Canvas',\n borderColor: 'Highlight',\n color: 'Highlight'\n },\n ...createFocusOutlineStyle({\n style: {\n outlineColor: 'Highlight'\n }\n })\n },\n userSelect: 'none',\n ...createFocusOutlineStyle()\n});\nconst useContentBaseStyles = makeResetStyles({\n paddingLeft: '2px',\n paddingRight: '2px',\n backgroundColor: 'transparent',\n flexGrow: 1\n});\nconst useSecondaryContentBaseStyles = makeResetStyles({\n paddingLeft: '2px',\n paddingRight: '2px',\n ...typographyStyles.caption1,\n lineHeight: `var(--1333, var(--1334, ${tokens.lineHeightBase300}))`,\n color: `var(--1335, var(--1336, ${tokens.colorNeutralForeground3}))`,\n ':hover': {\n color: `var(--1337, var(--1338, ${tokens.colorNeutralForeground3Hover}))`\n },\n ':focus': {\n color: `var(--1339, var(--1340, ${tokens.colorNeutralForeground3Hover}))`\n }\n});\nconst useIconBaseStyles = makeResetStyles({\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center'\n});\nconst useSubmenuIndicatorBaseStyles = makeResetStyles({\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center'\n});\nconst useStyles = makeStyles({\n checkmark: {\n marginTop: '2px'\n },\n splitItemMain: {\n flexGrow: 1\n },\n splitItemTrigger: {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n paddingLeft: 0,\n '::before': {\n content: '\"\"',\n width: `var(--1341, var(--1342, ${tokens.strokeWidthThin}))`,\n height: '24px',\n backgroundColor: `var(--1343, var(--1344, ${tokens.colorNeutralStroke1}))`\n }\n },\n disabled: {\n color: `var(--1345, var(--1346, ${tokens.colorNeutralForegroundDisabled}))`,\n ':hover': {\n color: `var(--1347, var(--1348, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: `var(--1349, var(--1350, ${tokens.colorNeutralBackground1}))`,\n cursor: 'not-allowed',\n [`& .${iconFilledClassName}`]: {\n display: 'none'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline'\n },\n [`& .${menuItemClassNames.icon}`]: {\n color: `var(--1351, var(--1352, ${tokens.colorNeutralForegroundDisabled}))`\n }\n },\n ':hover:active': {\n color: `var(--1353, var(--1354, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: `var(--1355, var(--1356, ${tokens.colorNeutralBackground1}))`\n },\n ':focus': {\n color: `var(--1357, var(--1358, ${tokens.colorNeutralForegroundDisabled}))`\n },\n '@media (forced-colors: active)': {\n color: 'GrayText',\n ':hover': {\n color: 'GrayText',\n backgroundColor: 'Canvas',\n [`& .${menuItemClassNames.icon}`]: {\n color: 'GrayText',\n backgroundColor: 'Canvas'\n }\n },\n ':focus': {\n color: 'GrayText',\n backgroundColor: 'Canvas'\n }\n }\n }\n});\n/** Applies style classnames to slots */ export const useMenuItemStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const rootBaseStyles = useRootBaseStyles();\n const contentBaseStyles = useContentBaseStyles();\n const secondaryContentBaseStyles = useSecondaryContentBaseStyles();\n const iconBaseStyles = useIconBaseStyles();\n const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();\n state.root.className = mergeClasses(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemClassNames.content, contentBaseStyles, state.content.className);\n }\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, !state.disabled && secondaryContentBaseStyles, state.secondaryContent.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);\n }\n if (state.submenuIndicator) {\n state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className);\n }\n useCheckmarkStyles_unstable(state);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js CHANGED
@@ -14,35 +14,35 @@ const spaceBetweenThumbAndTrack = 2;
14
14
  const trackHeight = 20;
15
15
  const trackWidth = 40;
16
16
  const thumbSize = trackHeight - spaceBetweenThumbAndTrack;
17
- const useSwitchIndicatorBaseClassName = /*#__PURE__*/__resetStyles("r1x31n8g", "rsmcm5v", {
18
- r: [".r1x31n8g{border-radius:var(--borderRadiusCircular);border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);line-height:0;box-sizing:border-box;fill:currentColor;flex-shrink:0;font-size:18px;height:20px;transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:background,border,color;width:40px;margin-right:var(--spacingHorizontalXS);color:var(--colorNeutralStrokeAccessible);}", ".r1x31n8g:hover{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r1x31n8g:hover:active{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r1x31n8g .fui-MenuItemSwitch__switchIndicator__circleFilled{transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:transform;}", ".rsmcm5v{border-radius:var(--borderRadiusCircular);border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);line-height:0;box-sizing:border-box;fill:currentColor;flex-shrink:0;font-size:18px;height:20px;transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:background,border,color;width:40px;margin-left:var(--spacingHorizontalXS);color:var(--colorNeutralStrokeAccessible);}", ".rsmcm5v:hover{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}", ".rsmcm5v:hover:active{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".rsmcm5v .fui-MenuItemSwitch__switchIndicator__circleFilled{transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:transform;}"],
19
- s: ["@media screen and (prefers-reduced-motion: reduce){.r1x31n8g{transition-duration:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r1x31n8g .fui-MenuItemSwitch__switchIndicator__circleFilled{transition-duration:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.rsmcm5v{transition-duration:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.rsmcm5v .fui-MenuItemSwitch__switchIndicator__circleFilled{transition-duration:0.01ms;}}"]
17
+ const useSwitchIndicatorBaseClassName = /*#__PURE__*/__resetStyles("r1acc4xw", "r1w2iyxf", {
18
+ r: [".r1acc4xw{border-radius:var(--1359, var(--1360, var(--borderRadiusCircular)));border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);line-height:0;box-sizing:border-box;fill:currentColor;flex-shrink:0;font-size:18px;height:20px;transition-duration:var(--1361, var(--1362, var(--durationNormal)));transition-timing-function:var(--1363, var(--1364, var(--curveEasyEase)));transition-property:background,border,color;width:40px;margin-right:var(--1365, var(--1366, var(--spacingHorizontalXS)));color:var(--1367, var(--1368, var(--colorNeutralStrokeAccessible)));}", ".r1acc4xw:hover{color:var(--1369, var(--1370, var(--colorNeutralStrokeAccessibleHover)));border-color:var(--1371, var(--1372, var(--colorNeutralStrokeAccessibleHover)));}", ".r1acc4xw:hover:active{color:var(--1373, var(--1374, var(--colorNeutralStrokeAccessiblePressed)));border-color:var(--1375, var(--1376, var(--colorNeutralStrokeAccessiblePressed)));}", ".r1acc4xw .fui-MenuItemSwitch__switchIndicator__circleFilled{transition-duration:var(--1377, var(--1378, var(--durationNormal)));transition-timing-function:var(--1379, var(--1380, var(--curveEasyEase)));transition-property:transform;}", ".r1w2iyxf{border-radius:var(--1359, var(--1360, var(--borderRadiusCircular)));border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);line-height:0;box-sizing:border-box;fill:currentColor;flex-shrink:0;font-size:18px;height:20px;transition-duration:var(--1361, var(--1362, var(--durationNormal)));transition-timing-function:var(--1363, var(--1364, var(--curveEasyEase)));transition-property:background,border,color;width:40px;margin-left:var(--1365, var(--1366, var(--spacingHorizontalXS)));color:var(--1367, var(--1368, var(--colorNeutralStrokeAccessible)));}", ".r1w2iyxf:hover{color:var(--1369, var(--1370, var(--colorNeutralStrokeAccessibleHover)));border-color:var(--1371, var(--1372, var(--colorNeutralStrokeAccessibleHover)));}", ".r1w2iyxf:hover:active{color:var(--1373, var(--1374, var(--colorNeutralStrokeAccessiblePressed)));border-color:var(--1375, var(--1376, var(--colorNeutralStrokeAccessiblePressed)));}", ".r1w2iyxf .fui-MenuItemSwitch__switchIndicator__circleFilled{transition-duration:var(--1377, var(--1378, var(--durationNormal)));transition-timing-function:var(--1379, var(--1380, var(--curveEasyEase)));transition-property:transform;}"],
19
+ s: ["@media screen and (prefers-reduced-motion: reduce){.r1acc4xw{transition-duration:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r1acc4xw .fui-MenuItemSwitch__switchIndicator__circleFilled{transition-duration:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r1w2iyxf{transition-duration:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r1w2iyxf .fui-MenuItemSwitch__switchIndicator__circleFilled{transition-duration:0.01ms;}}"]
20
20
  });
21
21
  const useSwitchIndicatorStyles = /*#__PURE__*/__styles({
22
22
  checked: {
23
23
  G4r02d: ["fdca5i2", "fk0rr1z"],
24
- De3pzq: "ftywsgz",
25
- sj55zd: "fqpbvvt",
24
+ De3pzq: "f1eczkbk",
25
+ sj55zd: "f48jobs",
26
26
  g2u3we: "fghlq4f",
27
27
  h3c5rm: ["f1gn591s", "fjscplz"],
28
28
  B9xav0g: "fb073pr",
29
29
  zhjwy3: ["fjscplz", "f1gn591s"],
30
- Bi91k9c: "fz46y8r",
31
- Jwef8y: "f1kjrvvj",
30
+ Bi91k9c: "f16oppfk",
31
+ Jwef8y: "f1sb3j8z",
32
32
  Bgoe8wy: "fpa59ij",
33
33
  Bwzppfd: ["f1rhln42", "f1l1ogpg"],
34
34
  oetu4i: "fz67qlh",
35
35
  gg5e9n: ["f1l1ogpg", "f1rhln42"],
36
- B2d53fq: "frlnr8d",
37
- iro3zm: "fle2s0s",
36
+ B2d53fq: "f1a3u1qo",
37
+ iro3zm: "fkjkmlx",
38
38
  b661bw: "f1j8ziw4",
39
39
  Bk6r4ia: ["f1xzu9i0", "f1jlpvxk"],
40
40
  B9zn80p: "f1i1ccxp",
41
41
  Bpld233: ["f1jlpvxk", "f1xzu9i0"]
42
42
  }
43
43
  }, {
44
- d: [".fdca5i2 .fui-MenuItemSwitch__switchIndicator__circleFilled{transform:translateX(20px);}", ".fk0rr1z .fui-MenuItemSwitch__switchIndicator__circleFilled{transform:translateX(-20px);}", ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}"],
45
- h: [".fz46y8r:hover{color:var(--colorNeutralForegroundInverted);}", ".f1kjrvvj:hover{background-color:var(--colorCompoundBrandBackgroundHover);}", ".fpa59ij:hover{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1rhln42:hover{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f1l1ogpg:hover{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fz67qlh:hover{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".frlnr8d:hover:active{color:var(--colorNeutralForegroundInverted);}", ".fle2s0s:hover:active{background-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1j8ziw4:hover:active{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1xzu9i0:hover:active{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f1jlpvxk:hover:active{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1i1ccxp:hover:active{border-bottom-color:var(--colorTransparentStrokeInteractive);}"]
44
+ d: [".fdca5i2 .fui-MenuItemSwitch__switchIndicator__circleFilled{transform:translateX(20px);}", ".fk0rr1z .fui-MenuItemSwitch__switchIndicator__circleFilled{transform:translateX(-20px);}", ".f1eczkbk{background-color:var(--1381, var(--1382, var(--colorCompoundBrandBackground)));}", ".f48jobs{color:var(--1383, var(--1384, var(--colorNeutralForegroundInverted)));}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}"],
45
+ h: [".f16oppfk:hover{color:var(--1385, var(--1386, var(--colorNeutralForegroundInverted)));}", ".f1sb3j8z:hover{background-color:var(--1387, var(--1388, var(--colorCompoundBrandBackgroundHover)));}", ".fpa59ij:hover{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1rhln42:hover{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f1l1ogpg:hover{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fz67qlh:hover{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1a3u1qo:hover:active{color:var(--1389, var(--1390, var(--colorNeutralForegroundInverted)));}", ".fkjkmlx:hover:active{background-color:var(--1391, var(--1392, var(--colorCompoundBrandBackgroundPressed)));}", ".f1j8ziw4:hover:active{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1xzu9i0:hover:active{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f1jlpvxk:hover:active{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1i1ccxp:hover:active{border-bottom-color:var(--colorTransparentStrokeInteractive);}"]
46
46
  });
47
47
  /**
48
48
  * Apply styling to the MenuItemSwitch slots based on the state
package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","__resetStyles","mergeClasses","shorthands","tokens","useMenuItemStyles_unstable","menuItemSwitchClassNames","root","icon","content","secondaryContent","switchIndicator","circleFilledClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","r","s","useSwitchIndicatorStyles","checked","G4r02d","De3pzq","sj55zd","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B2d53fq","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","d","h","useMenuItemSwitchStyles_unstable","state","switchIndicatorStyles","switchIndicatorBaseStyles","className","components","checkmark","submenuIndicator","undefined","hasSubmenu","persistOnClick"],"sources":["useMenuItemSwitchStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemSwitchClassNames = {\n root: 'fui-MenuItemSwitch',\n icon: 'fui-MenuItemSwitch__icon',\n content: 'fui-MenuItemSwitch__content',\n secondaryContent: 'fui-MenuItemSwitch__secondaryContent',\n switchIndicator: 'fui-MenuItemSwitch__switchIndicator'\n};\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useSwitchIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n marginRight: tokens.spacingHorizontalXS,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n color: tokens.colorNeutralStrokeAccessible,\n ':hover': {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover\n },\n ':hover:active': {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed\n },\n [`& .${circleFilledClassName}`]: {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n }\n});\nconst useSwitchIndicatorStyles = makeStyles({\n checked: {\n [`& .${circleFilledClassName}`]: {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n },\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n ':hover': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n },\n ':hover:active': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n }\n }\n});\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */ export const useMenuItemSwitchStyles_unstable = (state)=>{\n 'use no memo';\n const { checked } = state;\n const switchIndicatorStyles = useSwitchIndicatorStyles();\n const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n }\n if (state.switchIndicator) {\n state.switchIndicator.className = mergeClasses(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className);\n }\n useMenuItemStyles_unstable({\n ...state,\n components: {\n ...state.components,\n checkmark: 'span',\n submenuIndicator: 'span'\n },\n checkmark: undefined,\n submenuIndicator: undefined,\n hasSubmenu: false,\n persistOnClick: true\n });\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["__styles","__resetStyles","mergeClasses","shorthands","tokens","useMenuItemStyles_unstable","menuItemSwitchClassNames","root","icon","content","secondaryContent","switchIndicator","circleFilledClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","r","s","useSwitchIndicatorStyles","checked","G4r02d","De3pzq","sj55zd","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B2d53fq","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","d","h","useMenuItemSwitchStyles_unstable","state","switchIndicatorStyles","switchIndicatorBaseStyles","className","components","checkmark","submenuIndicator","undefined","hasSubmenu","persistOnClick"],"sources":["useMenuItemSwitchStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemSwitchClassNames = {\n root: 'fui-MenuItemSwitch',\n icon: 'fui-MenuItemSwitch__icon',\n content: 'fui-MenuItemSwitch__content',\n secondaryContent: 'fui-MenuItemSwitch__secondaryContent',\n switchIndicator: 'fui-MenuItemSwitch__switchIndicator'\n};\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useSwitchIndicatorBaseClassName = makeResetStyles({\n borderRadius: `var(--1359, var(--1360, ${tokens.borderRadiusCircular}))`,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n transitionDuration: `var(--1361, var(--1362, ${tokens.durationNormal}))`,\n transitionTimingFunction: `var(--1363, var(--1364, ${tokens.curveEasyEase}))`,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n marginRight: `var(--1365, var(--1366, ${tokens.spacingHorizontalXS}))`,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n color: `var(--1367, var(--1368, ${tokens.colorNeutralStrokeAccessible}))`,\n ':hover': {\n color: `var(--1369, var(--1370, ${tokens.colorNeutralStrokeAccessibleHover}))`,\n borderColor: `var(--1371, var(--1372, ${tokens.colorNeutralStrokeAccessibleHover}))`\n },\n ':hover:active': {\n color: `var(--1373, var(--1374, ${tokens.colorNeutralStrokeAccessiblePressed}))`,\n borderColor: `var(--1375, var(--1376, ${tokens.colorNeutralStrokeAccessiblePressed}))`\n },\n [`& .${circleFilledClassName}`]: {\n transitionDuration: `var(--1377, var(--1378, ${tokens.durationNormal}))`,\n transitionTimingFunction: `var(--1379, var(--1380, ${tokens.curveEasyEase}))`,\n transitionProperty: 'transform',\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n }\n});\nconst useSwitchIndicatorStyles = makeStyles({\n checked: {\n [`& .${circleFilledClassName}`]: {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n },\n backgroundColor: `var(--1381, var(--1382, ${tokens.colorCompoundBrandBackground}))`,\n color: `var(--1383, var(--1384, ${tokens.colorNeutralForegroundInverted}))`,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n ':hover': {\n color: `var(--1385, var(--1386, ${tokens.colorNeutralForegroundInverted}))`,\n backgroundColor: `var(--1387, var(--1388, ${tokens.colorCompoundBrandBackgroundHover}))`,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n },\n ':hover:active': {\n color: `var(--1389, var(--1390, ${tokens.colorNeutralForegroundInverted}))`,\n backgroundColor: `var(--1391, var(--1392, ${tokens.colorCompoundBrandBackgroundPressed}))`,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n }\n }\n});\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */ export const useMenuItemSwitchStyles_unstable = (state)=>{\n 'use no memo';\n const { checked } = state;\n const switchIndicatorStyles = useSwitchIndicatorStyles();\n const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n }\n if (state.switchIndicator) {\n state.switchIndicator.className = mergeClasses(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className);\n }\n useMenuItemStyles_unstable({\n ...state,\n components: {\n ...state.components,\n checkmark: 'span',\n submenuIndicator: 'span'\n },\n checkmark: undefined,\n submenuIndicator: undefined,\n hasSubmenu: false,\n persistOnClick: true\n });\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE,oBAAoB;EAC1BC,IAAI,EAAE,0BAA0B;EAChCC,OAAO,EAAE,6BAA6B;EACtCC,gBAAgB,EAAE,sCAAsC;EACxDC,eAAe,EAAE;AACrB,CAAC;AACD,OAAO,MAAMC,qBAAqB,GAAG,mDAAmD;AACxF;AACA,MAAMC,yBAAyB,GAAG,CAAC;AACnC,MAAMC,WAAW,GAAG,EAAE;AACtB,MAAMC,UAAU,GAAG,EAAE;AACrB,MAAMC,SAAS,GAAGF,WAAW,GAAGD,yBAAyB;AACzD,MAAMI,+BAA+B,gBAAGhB,aAAA;EAAAiB,CAAA;EAAAC,CAAA;AAAA,CAkCvC,CAAC;AACF,MAAMC,wBAAwB,gBAAGpB,QAAA;EAAAqB,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAmBhC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAM;IAAEvB;EAAQ,CAAC,GAAGuB,KAAK;EACzB,MAAMC,qBAAqB,GAAGzB,wBAAwB,CAAC,CAAC;EACxD,MAAM0B,yBAAyB,GAAG7B,+BAA+B,CAAC,CAAC;EACnE2B,KAAK,CAACrC,IAAI,CAACwC,SAAS,GAAG7C,YAAY,CAACI,wBAAwB,CAACC,IAAI,EAAEqC,KAAK,CAACrC,IAAI,CAACwC,SAAS,CAAC;EACxF,IAAIH,KAAK,CAACnC,OAAO,EAAE;IACfmC,KAAK,CAACnC,OAAO,CAACsC,SAAS,GAAG7C,YAAY,CAACI,wBAAwB,CAACG,OAAO,EAAEmC,KAAK,CAACnC,OAAO,CAACsC,SAAS,CAAC;EACrG;EACA,IAAIH,KAAK,CAAClC,gBAAgB,EAAE;IACxBkC,KAAK,CAAClC,gBAAgB,CAACqC,SAAS,GAAG7C,YAAY,CAACI,wBAAwB,CAACI,gBAAgB,EAAEkC,KAAK,CAAClC,gBAAgB,CAACqC,SAAS,CAAC;EAChI;EACA,IAAIH,KAAK,CAACpC,IAAI,EAAE;IACZoC,KAAK,CAACpC,IAAI,CAACuC,SAAS,GAAG7C,YAAY,CAACI,wBAAwB,CAACE,IAAI,EAAEoC,KAAK,CAACpC,IAAI,CAACuC,SAAS,CAAC;EAC5F;EACA,IAAIH,KAAK,CAACjC,eAAe,EAAE;IACvBiC,KAAK,CAACjC,eAAe,CAACoC,SAAS,GAAG7C,YAAY,CAACI,wBAAwB,CAACK,eAAe,EAAEmC,yBAAyB,EAAEzB,OAAO,IAAIwB,qBAAqB,CAACxB,OAAO,EAAEuB,KAAK,CAACjC,eAAe,CAACoC,SAAS,CAAC;EAClM;EACA1C,0BAA0B,CAAC;IACvB,GAAGuC,KAAK;IACRI,UAAU,EAAE;MACR,GAAGJ,KAAK,CAACI,UAAU;MACnBC,SAAS,EAAE,MAAM;MACjBC,gBAAgB,EAAE;IACtB,CAAC;IACDD,SAAS,EAAEE,SAAS;IACpBD,gBAAgB,EAAEC,SAAS;IAC3BC,UAAU,EAAE,KAAK;IACjBC,cAAc,EAAE;EACpB,CAAC,CAAC;EACF,OAAOT,KAAK;AAChB,CAAC","ignoreList":[]}
package/lib/components/MenuPopover/useMenuPopoverStyles.styles.js CHANGED
@@ -10,9 +10,9 @@ const useStyles = /*#__PURE__*/__styles({
10
10
  Bbmb7ep: 0,
11
11
  Btl43ni: 0,
12
12
  B7oj6ja: 0,
13
- Dimara: "ft85np5",
14
- De3pzq: "fxugw4r",
15
- sj55zd: "f19n0e5",
13
+ Dimara: "f1spenlm",
14
+ De3pzq: "fd1f8cp",
15
+ sj55zd: "fudzgy5",
16
16
  B7ck84d: "f1ewtqcl",
17
17
  Bf4jedk: "fl8fusi",
18
18
  B2u0y6b: "f1kaai3v",
@@ -62,9 +62,9 @@ const useStyles = /*#__PURE__*/__styles({
62
62
  Bvtglag: "fjp4h9y"
63
63
  }
64
64
  }, {
65
- d: [[".ft85np5{border-radius:var(--borderRadiusMedium);}", {
65
+ d: [[".f1spenlm{border-radius:var(--1393, var(--1394, var(--borderRadiusMedium)));}", {
66
66
  p: -1
67
- }], ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".fl8fusi{min-width:138px;}", ".f1kaai3v{max-width:300px;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1ahpp82{width:max-content;}", ".f1hg901r{box-shadow:var(--shadow16);}", [".fd3pd8h{padding:4px;}", {
67
+ }], ".fd1f8cp{background-color:var(--1395, var(--1396, var(--colorNeutralBackground1)));}", ".fudzgy5{color:var(--1397, var(--1398, var(--colorNeutralForeground1)));}", ".f1ewtqcl{box-sizing:border-box;}", ".fl8fusi{min-width:138px;}", ".f1kaai3v{max-width:300px;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1ahpp82{width:max-content;}", ".f1hg901r{box-shadow:var(--shadow16);}", [".fd3pd8h{padding:4px;}", {
68
68
  p: -1
69
69
  }], [".f9ggezi{border:1px solid var(--colorTransparentStroke);}", {
70
70
  p: -2
package/lib/components/MenuPopover/useMenuPopoverStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["mergeClasses","__styles","tokens","typographyStyles","createSlideStyles","menuPopoverClassNames","root","useStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","De3pzq","sj55zd","B7ck84d","Bf4jedk","B2u0y6b","B68tc82","a9b677","E5pizo","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","B93otf3","vin17d","Ezkn3b","nyiy2g","swvrvq","Bkovbt3","hgjdhn","fsy9dk","B3ogreh","jv49x5","Bk7o48c","Bv12yb3","z0t1cu","Bks05zx","Bvtglag","d","p","k","m","t","useMenuPopoverStyles_unstable","state","styles","className"],"sources":["useMenuPopoverStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { createSlideStyles } from '@fluentui/react-positioning';\nexport const menuPopoverClassNames = {\n root: 'fui-MenuPopover'\n};\nconst useStyles = makeStyles({\n root: {\n borderRadius: tokens.borderRadiusMedium,\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n minWidth: '138px',\n maxWidth: '300px',\n overflowX: 'hidden',\n width: 'max-content',\n boxShadow: `${tokens.shadow16}`,\n padding: '4px',\n border: `1px solid ${tokens.colorTransparentStroke}`,\n ...typographyStyles.body1,\n ...createSlideStyles(10)\n }\n});\n/**\n * Apply styling to the Menu slots based on the state\n */ export const useMenuPopoverStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;AAAA,CAgBjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAG9D,SAAS,CAAC,CAAC;EAC1B6D,KAAK,CAAC9D,IAAI,CAACgE,SAAS,GAAGtE,YAAY,CAACK,qBAAqB,CAACC,IAAI,EAAE+D,MAAM,CAAC/D,IAAI,EAAE8D,KAAK,CAAC9D,IAAI,CAACgE,SAAS,CAAC;EAClG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["mergeClasses","__styles","tokens","typographyStyles","createSlideStyles","menuPopoverClassNames","root","useStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","De3pzq","sj55zd","B7ck84d","Bf4jedk","B2u0y6b","B68tc82","a9b677","E5pizo","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","B93otf3","vin17d","Ezkn3b","nyiy2g","swvrvq","Bkovbt3","hgjdhn","fsy9dk","B3ogreh","jv49x5","Bk7o48c","Bv12yb3","z0t1cu","Bks05zx","Bvtglag","d","p","k","m","t","useMenuPopoverStyles_unstable","state","styles","className"],"sources":["useMenuPopoverStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { createSlideStyles } from '@fluentui/react-positioning';\nexport const menuPopoverClassNames = {\n root: 'fui-MenuPopover'\n};\nconst useStyles = makeStyles({\n root: {\n borderRadius: `var(--1393, var(--1394, ${tokens.borderRadiusMedium}))`,\n backgroundColor: `var(--1395, var(--1396, ${tokens.colorNeutralBackground1}))`,\n color: `var(--1397, var(--1398, ${tokens.colorNeutralForeground1}))`,\n boxSizing: 'border-box',\n minWidth: '138px',\n maxWidth: '300px',\n overflowX: 'hidden',\n width: 'max-content',\n boxShadow: `${tokens.shadow16}`,\n padding: '4px',\n border: `1px solid ${tokens.colorTransparentStroke}`,\n ...typographyStyles.body1,\n ...createSlideStyles(10)\n }\n});\n/**\n * Apply styling to the Menu slots based on the state\n */ export const useMenuPopoverStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;AAAA,CAgBjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAG9D,SAAS,CAAC,CAAC;EAC1B6D,KAAK,CAAC9D,IAAI,CAACgE,SAAS,GAAGtE,YAAY,CAACK,qBAAqB,CAACC,IAAI,EAAE+D,MAAM,CAAC/D,IAAI,EAAE8D,KAAK,CAAC9D,IAAI,CAACgE,SAAS,CAAC;EAClG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js CHANGED
@@ -15,12 +15,12 @@ const useStyles = /*#__PURE__*/__styles({
15
15
  B71tm0z: ["fn8z6db", "f1be8c1t"],
16
16
  Gjs4sj: ["f1vtn0lh", "f8hq2kl"],
17
17
  foni4y: "f7j48hl",
18
- Ie9k5m: "f13du8c1",
18
+ Ie9k5m: "fd0uecv",
19
19
  f30fub: "fe64lw1",
20
- Jberyy: "f92oj5h"
20
+ Jberyy: "fhcq4m8"
21
21
  }
22
22
  }, {
23
- d: [".f22iagw{display:flex;}", ".f1mvlx34>.fui-MenuItem:nth-of-type(1){flex-grow:1;}", ".fsdyxoe>.fui-MenuItem:nth-of-type(2){border-top-left-radius:0;}", ".fuk6rhi>.fui-MenuItem:nth-of-type(2){border-top-right-radius:0;}", ".fn8z6db>.fui-MenuItem:nth-of-type(2){border-bottom-left-radius:0;}", ".f1be8c1t>.fui-MenuItem:nth-of-type(2){border-bottom-right-radius:0;}", ".f1vtn0lh>.fui-MenuItem:nth-of-type(2){padding-left:0;}", ".f8hq2kl>.fui-MenuItem:nth-of-type(2){padding-right:0;}", ".f7j48hl>.fui-MenuItem:nth-of-type(2)::before{content:\"\";}", ".f13du8c1>.fui-MenuItem:nth-of-type(2)::before{width:var(--strokeWidthThin);}", ".fe64lw1>.fui-MenuItem:nth-of-type(2)::before{height:20px;}", ".f92oj5h>.fui-MenuItem:nth-of-type(2)::before{background-color:var(--colorNeutralStroke1);}"]
23
+ d: [".f22iagw{display:flex;}", ".f1mvlx34>.fui-MenuItem:nth-of-type(1){flex-grow:1;}", ".fsdyxoe>.fui-MenuItem:nth-of-type(2){border-top-left-radius:0;}", ".fuk6rhi>.fui-MenuItem:nth-of-type(2){border-top-right-radius:0;}", ".fn8z6db>.fui-MenuItem:nth-of-type(2){border-bottom-left-radius:0;}", ".f1be8c1t>.fui-MenuItem:nth-of-type(2){border-bottom-right-radius:0;}", ".f1vtn0lh>.fui-MenuItem:nth-of-type(2){padding-left:0;}", ".f8hq2kl>.fui-MenuItem:nth-of-type(2){padding-right:0;}", ".f7j48hl>.fui-MenuItem:nth-of-type(2)::before{content:\"\";}", ".fd0uecv>.fui-MenuItem:nth-of-type(2)::before{width:var(--1399, var(--1400, var(--strokeWidthThin)));}", ".fe64lw1>.fui-MenuItem:nth-of-type(2)::before{height:20px;}", ".fhcq4m8>.fui-MenuItem:nth-of-type(2)::before{background-color:var(--1401, var(--1402, var(--colorNeutralStroke1)));}"]
24
24
  });
25
25
  /**
26
26
  * Apply styling to the MenuSplitGroup slots based on the state
package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","mergeClasses","tokens","menuItemClassNames","menuSplitGroupClassNames","root","useStyles","mc9l5x","oe75ve","Bu15iap","B71tm0z","Gjs4sj","foni4y","Ie9k5m","f30fub","Jberyy","d","useMenuSplitGroupStyles_unstable","state","styles","className"],"sources":["useMenuSplitGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuSplitGroupClassNames = {\n root: 'fui-MenuSplitGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n [`& > .${menuItemClassNames.root}:nth-of-type(1)`]: {\n flexGrow: 1\n },\n [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n paddingLeft: 0,\n '::before': {\n content: '\"\"',\n width: tokens.strokeWidthThin,\n height: '20px',\n backgroundColor: tokens.colorNeutralStroke1\n }\n }\n }\n});\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */ export const useMenuSplitGroupStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,kBAAkB,QAAQ,sCAAsC;AACzE,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAkBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;EAC1BY,KAAK,CAACb,IAAI,CAACe,SAAS,GAAGnB,YAAY,CAACG,wBAAwB,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;EACrG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["__styles","mergeClasses","tokens","menuItemClassNames","menuSplitGroupClassNames","root","useStyles","mc9l5x","oe75ve","Bu15iap","B71tm0z","Gjs4sj","foni4y","Ie9k5m","f30fub","Jberyy","d","useMenuSplitGroupStyles_unstable","state","styles","className"],"sources":["useMenuSplitGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuSplitGroupClassNames = {\n root: 'fui-MenuSplitGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n [`& > .${menuItemClassNames.root}:nth-of-type(1)`]: {\n flexGrow: 1\n },\n [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n paddingLeft: 0,\n '::before': {\n content: '\"\"',\n width: `var(--1399, var(--1400, ${tokens.strokeWidthThin}))`,\n height: '20px',\n backgroundColor: `var(--1401, var(--1402, ${tokens.colorNeutralStroke1}))`\n }\n }\n }\n});\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */ export const useMenuSplitGroupStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,kBAAkB,QAAQ,sCAAsC;AACzE,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAkBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;EAC1BY,KAAK,CAACb,IAAI,CAACe,SAAS,GAAGnB,YAAY,CAACG,wBAAwB,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;EACrG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js CHANGED
@@ -22,8 +22,8 @@ const menuGroupHeaderClassNames = {
22
22
  };
23
23
  const useStyles = /*#__PURE__*/ (0, _react.__styles)({
24
24
  root: {
25
- Be2twd7: "fy9rknc",
26
- sj55zd: "f11d4kpn",
25
+ Be2twd7: "f1xnrmmq",
26
+ sj55zd: "fct541z",
27
27
  uwmqm3: [
28
28
  "f177v4lu",
29
29
  "f19lj068"
@@ -32,18 +32,18 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
32
32
  "f19lj068",
33
33
  "f177v4lu"
34
34
  ],
35
- Bhrd7zp: "fl43uef",
35
+ Bhrd7zp: "f1787h39",
36
36
  Bqenvij: "f1d2rq10",
37
37
  mc9l5x: "f22iagw",
38
38
  Bt984gj: "f122n59"
39
39
  }
40
40
  }, {
41
41
  d: [
42
- ".fy9rknc{font-size:var(--fontSizeBase200);}",
43
- ".f11d4kpn{color:var(--colorNeutralForeground3);}",
42
+ ".f1xnrmmq{font-size:var(--1301, var(--1302, var(--fontSizeBase200)));}",
43
+ ".fct541z{color:var(--1303, var(--1304, var(--colorNeutralForeground3)));}",
44
44
  ".f177v4lu{padding-left:8px;}",
45
45
  ".f19lj068{padding-right:8px;}",
46
- ".fl43uef{font-weight:var(--fontWeightSemibold);}",
46
+ ".f1787h39{font-weight:var(--1305, var(--1306, var(--fontWeightSemibold)));}",
47
47
  ".f1d2rq10{height:32px;}",
48
48
  ".f22iagw{display:flex;}",
49
49
  ".f122n59{align-items:center;}"
package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useMenuGroupHeaderStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const menuGroupHeaderClassNames = {\n root: 'fui-MenuGroupHeader'\n};\nconst useStyles = makeStyles({\n root: {\n fontSize: tokens.fontSizeBase200,\n color: tokens.colorNeutralForeground3,\n paddingLeft: '8px',\n paddingRight: '8px',\n fontWeight: tokens.fontWeightSemibold,\n height: '32px',\n display: 'flex',\n alignItems: 'center'\n }\n});\nexport const useMenuGroupHeaderStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["menuGroupHeaderClassNames","useMenuGroupHeaderStyles_unstable","root","useStyles","__styles","Be2twd7","sj55zd","uwmqm3","z189sj","Bhrd7zp","Bqenvij","mc9l5x","Bt984gj","d","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,yBAAyB;eAAzBA;;IAeAC,iCAAiC;eAAjCA;;;uBAjB4B;AAElC,MAAMD,4BAA4B;IACrCE,MAAM;AACV;AACA,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAYX,MAAMZ,oCAAqCa,CAAAA;IAC9C;IACA,MAAMC,SAASZ;IACfW,MAAMZ,IAAI,CAACc,SAAS,GAAGC,IAAAA,mBAAY,EAACjB,0BAA0BE,IAAI,EAAEa,OAAOb,IAAI,EAAEY,MAAMZ,IAAI,CAACc,SAAS;IACrG,OAAOF;AACX"}
1
+ {"version":3,"sources":["useMenuGroupHeaderStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const menuGroupHeaderClassNames = {\n root: 'fui-MenuGroupHeader'\n};\nconst useStyles = makeStyles({\n root: {\n fontSize: `var(--1301, var(--1302, ${tokens.fontSizeBase200}))`,\n color: `var(--1303, var(--1304, ${tokens.colorNeutralForeground3}))`,\n paddingLeft: '8px',\n paddingRight: '8px',\n fontWeight: `var(--1305, var(--1306, ${tokens.fontWeightSemibold}))`,\n height: '32px',\n display: 'flex',\n alignItems: 'center'\n }\n});\nexport const useMenuGroupHeaderStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["menuGroupHeaderClassNames","useMenuGroupHeaderStyles_unstable","root","useStyles","__styles","Be2twd7","sj55zd","uwmqm3","z189sj","Bhrd7zp","Bqenvij","mc9l5x","Bt984gj","d","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,yBAAyB;eAAzBA;;IAeAC,iCAAiC;eAAjCA;;;uBAjB4B;AAElC,MAAMD,4BAA4B;IACrCE,MAAM;AACV;AACA,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAYX,MAAMZ,oCAAqCa,CAAAA;IAC9C;IACA,MAAMC,SAASZ;IACfW,MAAMZ,IAAI,CAACc,SAAS,GAAGC,IAAAA,mBAAY,EAACjB,0BAA0BE,IAAI,EAAEa,OAAOb,IAAI,EAAEY,MAAMZ,IAAI,CAACc,SAAS;IACrG,OAAOF;AACX"}
package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.js CHANGED
@@ -26,47 +26,47 @@ const menuItemClassNames = {
26
26
  content: 'fui-MenuItem__content',
27
27
  secondaryContent: 'fui-MenuItem__secondaryContent'
28
28
  };
29
- const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r11normc", "r1lnj0i0", {
29
+ const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1flkek8", "r16jqo9h", {
30
30
  r: [
31
- ".r11normc{border-radius:var(--borderRadiusMedium);position:relative;color:var(--colorNeutralForeground2);background-color:var(--colorNeutralBackground1);padding-right:var(--spacingVerticalSNudge);padding-left:var(--spacingVerticalSNudge);padding-top:var(--spacingVerticalSNudge);padding-bottom:var(--spacingVerticalSNudge);box-sizing:border-box;max-width:290px;min-height:32px;flex-shrink:0;display:flex;align-items:start;font-size:var(--fontSizeBase300);cursor:pointer;gap:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;}",
32
- ".r11normc:hover{background-color:var(--colorNeutralBackground1Hover);color:var(--colorNeutralForeground2Hover);}",
33
- ".r11normc:hover .fui-Icon-filled{display:inline;}",
34
- ".r11normc:hover .fui-Icon-regular{display:none;}",
35
- ".r11normc:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}",
36
- ".r11normc:hover:active{background-color:var(--colorNeutralBackground1Pressed);color:var(--colorNeutralForeground2Pressed);}",
37
- ".r11normc:focus{outline-style:none;}",
38
- ".r11normc:focus-visible{outline-style:none;}",
39
- ".r11normc[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
40
- ".r11normc[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
41
- ".r1lnj0i0{border-radius:var(--borderRadiusMedium);position:relative;color:var(--colorNeutralForeground2);background-color:var(--colorNeutralBackground1);padding-left:var(--spacingVerticalSNudge);padding-right:var(--spacingVerticalSNudge);padding-top:var(--spacingVerticalSNudge);padding-bottom:var(--spacingVerticalSNudge);box-sizing:border-box;max-width:290px;min-height:32px;flex-shrink:0;display:flex;align-items:start;font-size:var(--fontSizeBase300);cursor:pointer;gap:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;}",
42
- ".r1lnj0i0:hover{background-color:var(--colorNeutralBackground1Hover);color:var(--colorNeutralForeground2Hover);}",
43
- ".r1lnj0i0:hover .fui-Icon-filled{display:inline;}",
44
- ".r1lnj0i0:hover .fui-Icon-regular{display:none;}",
45
- ".r1lnj0i0:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}",
46
- ".r1lnj0i0:hover:active{background-color:var(--colorNeutralBackground1Pressed);color:var(--colorNeutralForeground2Pressed);}",
47
- ".r1lnj0i0:focus{outline-style:none;}",
48
- ".r1lnj0i0:focus-visible{outline-style:none;}",
49
- ".r1lnj0i0[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
50
- ".r1lnj0i0[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
31
+ ".r1flkek8{border-radius:var(--1307, var(--1308, var(--borderRadiusMedium)));position:relative;color:var(--1309, var(--1310, var(--colorNeutralForeground2)));background-color:var(--1311, var(--1312, var(--colorNeutralBackground1)));padding-right:var(--1313, var(--1314, var(--spacingVerticalSNudge)));padding-left:var(--1315, var(--1316, var(--spacingVerticalSNudge)));padding-top:var(--1317, var(--1318, var(--spacingVerticalSNudge)));padding-bottom:var(--1319, var(--1320, var(--spacingVerticalSNudge)));box-sizing:border-box;max-width:290px;min-height:32px;flex-shrink:0;display:flex;align-items:start;font-size:var(--1321, var(--1322, var(--fontSizeBase300)));cursor:pointer;gap:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;}",
32
+ ".r1flkek8:hover{background-color:var(--1323, var(--1324, var(--colorNeutralBackground1Hover)));color:var(--1325, var(--1326, var(--colorNeutralForeground2Hover)));}",
33
+ ".r1flkek8:hover .fui-Icon-filled{display:inline;}",
34
+ ".r1flkek8:hover .fui-Icon-regular{display:none;}",
35
+ ".r1flkek8:hover .fui-MenuItem__icon{color:var(--1327, var(--1328, var(--colorNeutralForeground2BrandSelected)));}",
36
+ ".r1flkek8:hover:active{background-color:var(--1329, var(--1330, var(--colorNeutralBackground1Pressed)));color:var(--1331, var(--1332, var(--colorNeutralForeground2Pressed)));}",
37
+ ".r1flkek8:focus{outline-style:none;}",
38
+ ".r1flkek8:focus-visible{outline-style:none;}",
39
+ ".r1flkek8[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
40
+ ".r1flkek8[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
41
+ ".r16jqo9h{border-radius:var(--1307, var(--1308, var(--borderRadiusMedium)));position:relative;color:var(--1309, var(--1310, var(--colorNeutralForeground2)));background-color:var(--1311, var(--1312, var(--colorNeutralBackground1)));padding-left:var(--1313, var(--1314, var(--spacingVerticalSNudge)));padding-right:var(--1315, var(--1316, var(--spacingVerticalSNudge)));padding-top:var(--1317, var(--1318, var(--spacingVerticalSNudge)));padding-bottom:var(--1319, var(--1320, var(--spacingVerticalSNudge)));box-sizing:border-box;max-width:290px;min-height:32px;flex-shrink:0;display:flex;align-items:start;font-size:var(--1321, var(--1322, var(--fontSizeBase300)));cursor:pointer;gap:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;}",
42
+ ".r16jqo9h:hover{background-color:var(--1323, var(--1324, var(--colorNeutralBackground1Hover)));color:var(--1325, var(--1326, var(--colorNeutralForeground2Hover)));}",
43
+ ".r16jqo9h:hover .fui-Icon-filled{display:inline;}",
44
+ ".r16jqo9h:hover .fui-Icon-regular{display:none;}",
45
+ ".r16jqo9h:hover .fui-MenuItem__icon{color:var(--1327, var(--1328, var(--colorNeutralForeground2BrandSelected)));}",
46
+ ".r16jqo9h:hover:active{background-color:var(--1329, var(--1330, var(--colorNeutralBackground1Pressed)));color:var(--1331, var(--1332, var(--colorNeutralForeground2Pressed)));}",
47
+ ".r16jqo9h:focus{outline-style:none;}",
48
+ ".r16jqo9h:focus-visible{outline-style:none;}",
49
+ ".r16jqo9h[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
50
+ ".r16jqo9h[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
51
51
  ],
52
52
  s: [
53
- "@media (forced-colors: active){.r11normc:hover{background-color:Canvas;border-color:Highlight;color:Highlight;}.r11normc:focus{outline-style:none;}.r11normc:focus-visible{outline-style:none;}.r11normc[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}@media (forced-colors: active){.r11normc[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}.r11normc[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid Highlight;border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}}",
54
- "@media (forced-colors: active){.r11normc[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}",
55
- "@media (forced-colors: active){.r1lnj0i0:hover{background-color:Canvas;border-color:Highlight;color:Highlight;}.r1lnj0i0:focus{outline-style:none;}.r1lnj0i0:focus-visible{outline-style:none;}.r1lnj0i0[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}@media (forced-colors: active){.r1lnj0i0[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}.r1lnj0i0[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid Highlight;border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}}",
56
- "@media (forced-colors: active){.r1lnj0i0[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"
53
+ "@media (forced-colors: active){.r1flkek8:hover{background-color:Canvas;border-color:Highlight;color:Highlight;}.r1flkek8:focus{outline-style:none;}.r1flkek8:focus-visible{outline-style:none;}.r1flkek8[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}@media (forced-colors: active){.r1flkek8[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}.r1flkek8[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid Highlight;border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}}",
54
+ "@media (forced-colors: active){.r1flkek8[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}",
55
+ "@media (forced-colors: active){.r16jqo9h:hover{background-color:Canvas;border-color:Highlight;color:Highlight;}.r16jqo9h:focus{outline-style:none;}.r16jqo9h:focus-visible{outline-style:none;}.r16jqo9h[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}@media (forced-colors: active){.r16jqo9h[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}.r16jqo9h[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid Highlight;border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}}",
56
+ "@media (forced-colors: active){.r16jqo9h[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"
57
57
  ]
58
58
  });
59
59
  const useContentBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1ls86vo", "rpbc5dr", [
60
60
  ".r1ls86vo{padding-left:2px;padding-right:2px;background-color:transparent;flex-grow:1;}",
61
61
  ".rpbc5dr{padding-right:2px;padding-left:2px;background-color:transparent;flex-grow:1;}"
62
62
  ]);
63
- const useSecondaryContentBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r12mwwux", "r1ewgu5j", [
64
- ".r12mwwux{padding-left:2px;padding-right:2px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground3);}",
65
- ".r12mwwux:hover{color:var(--colorNeutralForeground3Hover);}",
66
- ".r12mwwux:focus{color:var(--colorNeutralForeground3Hover);}",
67
- ".r1ewgu5j{padding-right:2px;padding-left:2px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground3);}",
68
- ".r1ewgu5j:hover{color:var(--colorNeutralForeground3Hover);}",
69
- ".r1ewgu5j:focus{color:var(--colorNeutralForeground3Hover);}"
63
+ const useSecondaryContentBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("ru7jybp", "rp6tyji", [
64
+ ".ru7jybp{padding-left:2px;padding-right:2px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--1333, var(--1334, var(--lineHeightBase300)));color:var(--1335, var(--1336, var(--colorNeutralForeground3)));}",
65
+ ".ru7jybp:hover{color:var(--1337, var(--1338, var(--colorNeutralForeground3Hover)));}",
66
+ ".ru7jybp:focus{color:var(--1339, var(--1340, var(--colorNeutralForeground3Hover)));}",
67
+ ".rp6tyji{padding-right:2px;padding-left:2px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--1333, var(--1334, var(--lineHeightBase300)));color:var(--1335, var(--1336, var(--colorNeutralForeground3)));}",
68
+ ".rp6tyji:hover{color:var(--1337, var(--1338, var(--colorNeutralForeground3Hover)));}",
69
+ ".rp6tyji:focus{color:var(--1339, var(--1340, var(--colorNeutralForeground3Hover)));}"
70
70
  ]);
71
71
  const useIconBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r9c34qo", null, [
72
72
  ".r9c34qo{width:20px;height:20px;font-size:20px;line-height:0;align-items:center;display:inline-flex;justify-content:center;}"
@@ -95,21 +95,21 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
95
95
  "fhxju0i"
96
96
  ],
97
97
  Ftih45: "f1wl9k8s",
98
- Ccq8qp: "f1yn80uh",
98
+ Ccq8qp: "f1sa9021",
99
99
  Baz25je: "f68mna0",
100
- cmx5o7: "f1p5zmk"
100
+ cmx5o7: "f14ltx6a"
101
101
  },
102
102
  disabled: {
103
- sj55zd: "f1s2aq7o",
104
- Bi91k9c: "fvgxktp",
105
- Jwef8y: "f1ijtazh",
103
+ sj55zd: "fpzq6t0",
104
+ Bi91k9c: "f19s7x3y",
105
+ Jwef8y: "f1nw4t48",
106
106
  eoavqd: "fphbwmw",
107
107
  Bk3fhr4: "f19vpps7",
108
108
  Bmfj8id: "fv5swzo",
109
- Bg7n49j: "f1q1x1ba",
110
- B2d53fq: "fcvwxyo",
111
- iro3zm: "f1to34ca",
112
- t0hwav: "ft33916",
109
+ Bg7n49j: "f1dpie7v",
110
+ B2d53fq: "f2gmxn8",
111
+ iro3zm: "faggc2",
112
+ t0hwav: "f13jpomk",
113
113
  Bbusuzp: "f1dcs8yz",
114
114
  ze5xyy: "f1kc2mi9",
115
115
  Bqrx1nm: "fkavljg",
@@ -129,23 +129,23 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
129
129
  ".f1cnd47f{padding-left:0;}",
130
130
  ".fhxju0i{padding-right:0;}",
131
131
  ".f1wl9k8s::before{content:\"\";}",
132
- ".f1yn80uh::before{width:var(--strokeWidthThin);}",
132
+ ".f1sa9021::before{width:var(--1341, var(--1342, var(--strokeWidthThin)));}",
133
133
  ".f68mna0::before{height:24px;}",
134
- ".f1p5zmk::before{background-color:var(--colorNeutralStroke1);}",
135
- ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"
134
+ ".f14ltx6a::before{background-color:var(--1343, var(--1344, var(--colorNeutralStroke1)));}",
135
+ ".fpzq6t0{color:var(--1345, var(--1346, var(--colorNeutralForegroundDisabled)));}"
136
136
  ],
137
137
  h: [
138
- ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}",
139
- ".f1ijtazh:hover{background-color:var(--colorNeutralBackground1);}",
138
+ ".f19s7x3y:hover{color:var(--1347, var(--1348, var(--colorNeutralForegroundDisabled)));}",
139
+ ".f1nw4t48:hover{background-color:var(--1349, var(--1350, var(--colorNeutralBackground1)));}",
140
140
  ".fphbwmw:hover{cursor:not-allowed;}",
141
141
  ".f19vpps7:hover .fui-Icon-filled{display:none;}",
142
142
  ".fv5swzo:hover .fui-Icon-regular{display:inline;}",
143
- ".f1q1x1ba:hover .fui-MenuItem__icon{color:var(--colorNeutralForegroundDisabled);}",
144
- ".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}",
145
- ".f1to34ca:hover:active{background-color:var(--colorNeutralBackground1);}"
143
+ ".f1dpie7v:hover .fui-MenuItem__icon{color:var(--1351, var(--1352, var(--colorNeutralForegroundDisabled)));}",
144
+ ".f2gmxn8:hover:active{color:var(--1353, var(--1354, var(--colorNeutralForegroundDisabled)));}",
145
+ ".faggc2:hover:active{background-color:var(--1355, var(--1356, var(--colorNeutralBackground1)));}"
146
146
  ],
147
147
  f: [
148
- ".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}"
148
+ ".f13jpomk:focus{color:var(--1357, var(--1358, var(--colorNeutralForegroundDisabled)));}"
149
149
  ],
150
150
  m: [
151
151
  [
package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useMenuItemStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nexport const menuItemClassNames = {\n root: 'fui-MenuItem',\n icon: 'fui-MenuItem__icon',\n checkmark: 'fui-MenuItem__checkmark',\n submenuIndicator: 'fui-MenuItem__submenuIndicator',\n content: 'fui-MenuItem__content',\n secondaryContent: 'fui-MenuItem__secondaryContent'\n};\nconst useRootBaseStyles = makeResetStyles({\n borderRadius: tokens.borderRadiusMedium,\n position: 'relative',\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackground1,\n paddingRight: tokens.spacingVerticalSNudge,\n paddingLeft: tokens.spacingVerticalSNudge,\n paddingTop: tokens.spacingVerticalSNudge,\n paddingBottom: tokens.spacingVerticalSNudge,\n boxSizing: 'border-box',\n maxWidth: '290px',\n minHeight: '32px',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'start',\n fontSize: tokens.fontSizeBase300,\n cursor: 'pointer',\n gap: '4px',\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground2Hover,\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n },\n [`& .${menuItemClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandSelected\n }\n },\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n color: tokens.colorNeutralForeground2Pressed\n },\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'Canvas',\n borderColor: 'Highlight',\n color: 'Highlight'\n },\n ...createFocusOutlineStyle({\n style: {\n outlineColor: 'Highlight'\n }\n })\n },\n userSelect: 'none',\n ...createFocusOutlineStyle()\n});\nconst useContentBaseStyles = makeResetStyles({\n paddingLeft: '2px',\n paddingRight: '2px',\n backgroundColor: 'transparent',\n flexGrow: 1\n});\nconst useSecondaryContentBaseStyles = makeResetStyles({\n paddingLeft: '2px',\n paddingRight: '2px',\n ...typographyStyles.caption1,\n lineHeight: tokens.lineHeightBase300,\n color: tokens.colorNeutralForeground3,\n ':hover': {\n color: tokens.colorNeutralForeground3Hover\n },\n ':focus': {\n color: tokens.colorNeutralForeground3Hover\n }\n});\nconst useIconBaseStyles = makeResetStyles({\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center'\n});\nconst useSubmenuIndicatorBaseStyles = makeResetStyles({\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center'\n});\nconst useStyles = makeStyles({\n checkmark: {\n marginTop: '2px'\n },\n splitItemMain: {\n flexGrow: 1\n },\n splitItemTrigger: {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n paddingLeft: 0,\n '::before': {\n content: '\"\"',\n width: tokens.strokeWidthThin,\n height: '24px',\n backgroundColor: tokens.colorNeutralStroke1\n }\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorNeutralBackground1,\n cursor: 'not-allowed',\n [`& .${iconFilledClassName}`]: {\n display: 'none'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline'\n },\n [`& .${menuItemClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n ':hover:active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorNeutralBackground1\n },\n ':focus': {\n color: tokens.colorNeutralForegroundDisabled\n },\n '@media (forced-colors: active)': {\n color: 'GrayText',\n ':hover': {\n color: 'GrayText',\n backgroundColor: 'Canvas',\n [`& .${menuItemClassNames.icon}`]: {\n color: 'GrayText',\n backgroundColor: 'Canvas'\n }\n },\n ':focus': {\n color: 'GrayText',\n backgroundColor: 'Canvas'\n }\n }\n }\n});\n/** Applies style classnames to slots */ export const useMenuItemStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const rootBaseStyles = useRootBaseStyles();\n const contentBaseStyles = useContentBaseStyles();\n const secondaryContentBaseStyles = useSecondaryContentBaseStyles();\n const iconBaseStyles = useIconBaseStyles();\n const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();\n state.root.className = mergeClasses(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemClassNames.content, contentBaseStyles, state.content.className);\n }\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, !state.disabled && secondaryContentBaseStyles, state.secondaryContent.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);\n }\n if (state.submenuIndicator) {\n state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className);\n }\n useCheckmarkStyles_unstable(state);\n return state;\n};\n"],"names":["menuItemClassNames","useMenuItemStyles_unstable","root","icon","checkmark","submenuIndicator","content","secondaryContent","useRootBaseStyles","__resetStyles","r","s","useContentBaseStyles","useSecondaryContentBaseStyles","useIconBaseStyles","useSubmenuIndicatorBaseStyles","useStyles","__styles","B6of3ja","splitItemMain","Bh6795r","splitItemTrigger","Btl43ni","Beyfa6y","uwmqm3","Ftih45","Ccq8qp","Baz25je","cmx5o7","disabled","sj55zd","Bi91k9c","Jwef8y","eoavqd","Bk3fhr4","Bmfj8id","Bg7n49j","B2d53fq","iro3zm","t0hwav","Bbusuzp","ze5xyy","Bqrx1nm","Bctn1xl","h5esng","Bh6z0a4","Bh953qp","d","h","f","m","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","className","mergeClasses","useCheckmarkStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,kBAAkB;eAAlBA;;IA0JyCC,0BAA0B;eAA1BA;;;uBA/JI;uBAId;AACrC,MAAMD,qBAAqB;IAC9BE,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,kBAAkB;IAClBC,SAAS;IACTC,kBAAkB;AACtB;AACA,MAAMC,oBAAiB,WAAA,GAAGC,IAAAA,oBAAA,EAAA,YAAA,YAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAmD1B,MAAMC,uBAAoB,WAAA,GAAGH,IAAAA,oBAAA,EAAA,YAAA,WAAA;IAAA;IAAA;CAK5B;AACD,MAAMI,gCAA6B,WAAA,GAAGJ,IAAAA,oBAAA,EAAA,YAAA,YAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;CAYrC;AACD,MAAMK,oBAAiB,WAAA,GAAGL,IAAAA,oBAAA,EAAA,WAAA,MAAA;IAAA;CAQzB;AACD,MAAMM,gCAA6B,WAAA,GAAGN,IAAAA,oBAAA,EAAA,WAAA,MAAA;IAAA;CAQrC;AACD,MAAMO,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAb,WAAA;QAAAc,SAAA;IAAA;IAAAC,eAAA;QAAAC,SAAA;IAAA;IAAAC,kBAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAC,UAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;KAAA;AAAA;AA0D8B,MAAMjD,6BAA8BkD,CAAAA;IAChF;IACA,MAAMC,SAASpC;IACf,MAAMqC,iBAAiB7C;IACvB,MAAM8C,oBAAoB1C;IAC1B,MAAM2C,6BAA6B1C;IACnC,MAAM2C,iBAAiB1C;IACvB,MAAM2C,6BAA6B1C;IACnCoC,MAAMjD,IAAI,CAACwD,SAAS,GAAGC,IAAAA,mBAAY,EAAC3D,mBAAmBE,IAAI,EAAEmD,gBAAgBF,MAAMtB,QAAQ,IAAIuB,OAAOvB,QAAQ,EAAEsB,MAAMjD,IAAI,CAACwD,SAAS;IACpI,IAAIP,MAAM7C,OAAO,EAAE;QACf6C,MAAM7C,OAAO,CAACoD,SAAS,GAAGC,IAAAA,mBAAY,EAAC3D,mBAAmBM,OAAO,EAAEgD,mBAAmBH,MAAM7C,OAAO,CAACoD,SAAS;IACjH;IACA,IAAIP,MAAM/C,SAAS,EAAE;QACjB+C,MAAM/C,SAAS,CAACsD,SAAS,GAAGC,IAAAA,mBAAY,EAAC3D,mBAAmBI,SAAS,EAAEgD,OAAOhD,SAAS,EAAE+C,MAAM/C,SAAS,CAACsD,SAAS;IACtH;IACA,IAAIP,MAAM5C,gBAAgB,EAAE;QACxB4C,MAAM5C,gBAAgB,CAACmD,SAAS,GAAGC,IAAAA,mBAAY,EAAC3D,mBAAmBO,gBAAgB,EAAE,CAAC4C,MAAMtB,QAAQ,IAAI0B,4BAA4BJ,MAAM5C,gBAAgB,CAACmD,SAAS;IACxK;IACA,IAAIP,MAAMhD,IAAI,EAAE;QACZgD,MAAMhD,IAAI,CAACuD,SAAS,GAAGC,IAAAA,mBAAY,EAAC3D,mBAAmBG,IAAI,EAAEqD,gBAAgBL,MAAMhD,IAAI,CAACuD,SAAS;IACrG;IACA,IAAIP,MAAM9C,gBAAgB,EAAE;QACxB8C,MAAM9C,gBAAgB,CAACqD,SAAS,GAAGC,IAAAA,mBAAY,EAAC3D,mBAAmBK,gBAAgB,EAAEoD,4BAA4BN,MAAM9C,gBAAgB,CAACqD,SAAS;IACrJ;IACAE,IAAAA,kCAA2B,EAACT;IAC5B,OAAOA;AACX"}
1
+ {"version":3,"sources":["useMenuItemStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nexport const menuItemClassNames = {\n root: 'fui-MenuItem',\n icon: 'fui-MenuItem__icon',\n checkmark: 'fui-MenuItem__checkmark',\n submenuIndicator: 'fui-MenuItem__submenuIndicator',\n content: 'fui-MenuItem__content',\n secondaryContent: 'fui-MenuItem__secondaryContent'\n};\nconst useRootBaseStyles = makeResetStyles({\n borderRadius: `var(--1307, var(--1308, ${tokens.borderRadiusMedium}))`,\n position: 'relative',\n color: `var(--1309, var(--1310, ${tokens.colorNeutralForeground2}))`,\n backgroundColor: `var(--1311, var(--1312, ${tokens.colorNeutralBackground1}))`,\n paddingRight: `var(--1313, var(--1314, ${tokens.spacingVerticalSNudge}))`,\n paddingLeft: `var(--1315, var(--1316, ${tokens.spacingVerticalSNudge}))`,\n paddingTop: `var(--1317, var(--1318, ${tokens.spacingVerticalSNudge}))`,\n paddingBottom: `var(--1319, var(--1320, ${tokens.spacingVerticalSNudge}))`,\n boxSizing: 'border-box',\n maxWidth: '290px',\n minHeight: '32px',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'start',\n fontSize: `var(--1321, var(--1322, ${tokens.fontSizeBase300}))`,\n cursor: 'pointer',\n gap: '4px',\n ':hover': {\n backgroundColor: `var(--1323, var(--1324, ${tokens.colorNeutralBackground1Hover}))`,\n color: `var(--1325, var(--1326, ${tokens.colorNeutralForeground2Hover}))`,\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n },\n [`& .${menuItemClassNames.icon}`]: {\n color: `var(--1327, var(--1328, ${tokens.colorNeutralForeground2BrandSelected}))`\n }\n },\n ':hover:active': {\n backgroundColor: `var(--1329, var(--1330, ${tokens.colorNeutralBackground1Pressed}))`,\n color: `var(--1331, var(--1332, ${tokens.colorNeutralForeground2Pressed}))`\n },\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'Canvas',\n borderColor: 'Highlight',\n color: 'Highlight'\n },\n ...createFocusOutlineStyle({\n style: {\n outlineColor: 'Highlight'\n }\n })\n },\n userSelect: 'none',\n ...createFocusOutlineStyle()\n});\nconst useContentBaseStyles = makeResetStyles({\n paddingLeft: '2px',\n paddingRight: '2px',\n backgroundColor: 'transparent',\n flexGrow: 1\n});\nconst useSecondaryContentBaseStyles = makeResetStyles({\n paddingLeft: '2px',\n paddingRight: '2px',\n ...typographyStyles.caption1,\n lineHeight: `var(--1333, var(--1334, ${tokens.lineHeightBase300}))`,\n color: `var(--1335, var(--1336, ${tokens.colorNeutralForeground3}))`,\n ':hover': {\n color: `var(--1337, var(--1338, ${tokens.colorNeutralForeground3Hover}))`\n },\n ':focus': {\n color: `var(--1339, var(--1340, ${tokens.colorNeutralForeground3Hover}))`\n }\n});\nconst useIconBaseStyles = makeResetStyles({\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center'\n});\nconst useSubmenuIndicatorBaseStyles = makeResetStyles({\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center'\n});\nconst useStyles = makeStyles({\n checkmark: {\n marginTop: '2px'\n },\n splitItemMain: {\n flexGrow: 1\n },\n splitItemTrigger: {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n paddingLeft: 0,\n '::before': {\n content: '\"\"',\n width: `var(--1341, var(--1342, ${tokens.strokeWidthThin}))`,\n height: '24px',\n backgroundColor: `var(--1343, var(--1344, ${tokens.colorNeutralStroke1}))`\n }\n },\n disabled: {\n color: `var(--1345, var(--1346, ${tokens.colorNeutralForegroundDisabled}))`,\n ':hover': {\n color: `var(--1347, var(--1348, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: `var(--1349, var(--1350, ${tokens.colorNeutralBackground1}))`,\n cursor: 'not-allowed',\n [`& .${iconFilledClassName}`]: {\n display: 'none'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline'\n },\n [`& .${menuItemClassNames.icon}`]: {\n color: `var(--1351, var(--1352, ${tokens.colorNeutralForegroundDisabled}))`\n }\n },\n ':hover:active': {\n color: `var(--1353, var(--1354, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: `var(--1355, var(--1356, ${tokens.colorNeutralBackground1}))`\n },\n ':focus': {\n color: `var(--1357, var(--1358, ${tokens.colorNeutralForegroundDisabled}))`\n },\n '@media (forced-colors: active)': {\n color: 'GrayText',\n ':hover': {\n color: 'GrayText',\n backgroundColor: 'Canvas',\n [`& .${menuItemClassNames.icon}`]: {\n color: 'GrayText',\n backgroundColor: 'Canvas'\n }\n },\n ':focus': {\n color: 'GrayText',\n backgroundColor: 'Canvas'\n }\n }\n }\n});\n/** Applies style classnames to slots */ export const useMenuItemStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const rootBaseStyles = useRootBaseStyles();\n const contentBaseStyles = useContentBaseStyles();\n const secondaryContentBaseStyles = useSecondaryContentBaseStyles();\n const iconBaseStyles = useIconBaseStyles();\n const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();\n state.root.className = mergeClasses(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemClassNames.content, contentBaseStyles, state.content.className);\n }\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, !state.disabled && secondaryContentBaseStyles, state.secondaryContent.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);\n }\n if (state.submenuIndicator) {\n state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className);\n }\n useCheckmarkStyles_unstable(state);\n return state;\n};\n"],"names":["menuItemClassNames","useMenuItemStyles_unstable","root","icon","checkmark","submenuIndicator","content","secondaryContent","useRootBaseStyles","__resetStyles","r","s","useContentBaseStyles","useSecondaryContentBaseStyles","useIconBaseStyles","useSubmenuIndicatorBaseStyles","useStyles","__styles","B6of3ja","splitItemMain","Bh6795r","splitItemTrigger","Btl43ni","Beyfa6y","uwmqm3","Ftih45","Ccq8qp","Baz25je","cmx5o7","disabled","sj55zd","Bi91k9c","Jwef8y","eoavqd","Bk3fhr4","Bmfj8id","Bg7n49j","B2d53fq","iro3zm","t0hwav","Bbusuzp","ze5xyy","Bqrx1nm","Bctn1xl","h5esng","Bh6z0a4","Bh953qp","d","h","f","m","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","className","mergeClasses","useCheckmarkStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js CHANGED
@@ -34,22 +34,22 @@ const spaceBetweenThumbAndTrack = 2;
34
34
  const trackHeight = 20;
35
35
  const trackWidth = 40;
36
36
  const thumbSize = trackHeight - spaceBetweenThumbAndTrack;
37
- const useSwitchIndicatorBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1x31n8g", "rsmcm5v", {
37
+ const useSwitchIndicatorBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1acc4xw", "r1w2iyxf", {
38
38
  r: [
39
- ".r1x31n8g{border-radius:var(--borderRadiusCircular);border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);line-height:0;box-sizing:border-box;fill:currentColor;flex-shrink:0;font-size:18px;height:20px;transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:background,border,color;width:40px;margin-right:var(--spacingHorizontalXS);color:var(--colorNeutralStrokeAccessible);}",
40
- ".r1x31n8g:hover{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}",
41
- ".r1x31n8g:hover:active{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}",
42
- ".r1x31n8g .fui-MenuItemSwitch__switchIndicator__circleFilled{transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:transform;}",
43
- ".rsmcm5v{border-radius:var(--borderRadiusCircular);border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);line-height:0;box-sizing:border-box;fill:currentColor;flex-shrink:0;font-size:18px;height:20px;transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:background,border,color;width:40px;margin-left:var(--spacingHorizontalXS);color:var(--colorNeutralStrokeAccessible);}",
44
- ".rsmcm5v:hover{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}",
45
- ".rsmcm5v:hover:active{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}",
46
- ".rsmcm5v .fui-MenuItemSwitch__switchIndicator__circleFilled{transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:transform;}"
39
+ ".r1acc4xw{border-radius:var(--1359, var(--1360, var(--borderRadiusCircular)));border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);line-height:0;box-sizing:border-box;fill:currentColor;flex-shrink:0;font-size:18px;height:20px;transition-duration:var(--1361, var(--1362, var(--durationNormal)));transition-timing-function:var(--1363, var(--1364, var(--curveEasyEase)));transition-property:background,border,color;width:40px;margin-right:var(--1365, var(--1366, var(--spacingHorizontalXS)));color:var(--1367, var(--1368, var(--colorNeutralStrokeAccessible)));}",
40
+ ".r1acc4xw:hover{color:var(--1369, var(--1370, var(--colorNeutralStrokeAccessibleHover)));border-color:var(--1371, var(--1372, var(--colorNeutralStrokeAccessibleHover)));}",
41
+ ".r1acc4xw:hover:active{color:var(--1373, var(--1374, var(--colorNeutralStrokeAccessiblePressed)));border-color:var(--1375, var(--1376, var(--colorNeutralStrokeAccessiblePressed)));}",
42
+ ".r1acc4xw .fui-MenuItemSwitch__switchIndicator__circleFilled{transition-duration:var(--1377, var(--1378, var(--durationNormal)));transition-timing-function:var(--1379, var(--1380, var(--curveEasyEase)));transition-property:transform;}",
43
+ ".r1w2iyxf{border-radius:var(--1359, var(--1360, var(--borderRadiusCircular)));border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);line-height:0;box-sizing:border-box;fill:currentColor;flex-shrink:0;font-size:18px;height:20px;transition-duration:var(--1361, var(--1362, var(--durationNormal)));transition-timing-function:var(--1363, var(--1364, var(--curveEasyEase)));transition-property:background,border,color;width:40px;margin-left:var(--1365, var(--1366, var(--spacingHorizontalXS)));color:var(--1367, var(--1368, var(--colorNeutralStrokeAccessible)));}",
44
+ ".r1w2iyxf:hover{color:var(--1369, var(--1370, var(--colorNeutralStrokeAccessibleHover)));border-color:var(--1371, var(--1372, var(--colorNeutralStrokeAccessibleHover)));}",
45
+ ".r1w2iyxf:hover:active{color:var(--1373, var(--1374, var(--colorNeutralStrokeAccessiblePressed)));border-color:var(--1375, var(--1376, var(--colorNeutralStrokeAccessiblePressed)));}",
46
+ ".r1w2iyxf .fui-MenuItemSwitch__switchIndicator__circleFilled{transition-duration:var(--1377, var(--1378, var(--durationNormal)));transition-timing-function:var(--1379, var(--1380, var(--curveEasyEase)));transition-property:transform;}"
47
47
  ],
48
48
  s: [
49
- "@media screen and (prefers-reduced-motion: reduce){.r1x31n8g{transition-duration:0.01ms;}}",
50
- "@media screen and (prefers-reduced-motion: reduce){.r1x31n8g .fui-MenuItemSwitch__switchIndicator__circleFilled{transition-duration:0.01ms;}}",
51
- "@media screen and (prefers-reduced-motion: reduce){.rsmcm5v{transition-duration:0.01ms;}}",
52
- "@media screen and (prefers-reduced-motion: reduce){.rsmcm5v .fui-MenuItemSwitch__switchIndicator__circleFilled{transition-duration:0.01ms;}}"
49
+ "@media screen and (prefers-reduced-motion: reduce){.r1acc4xw{transition-duration:0.01ms;}}",
50
+ "@media screen and (prefers-reduced-motion: reduce){.r1acc4xw .fui-MenuItemSwitch__switchIndicator__circleFilled{transition-duration:0.01ms;}}",
51
+ "@media screen and (prefers-reduced-motion: reduce){.r1w2iyxf{transition-duration:0.01ms;}}",
52
+ "@media screen and (prefers-reduced-motion: reduce){.r1w2iyxf .fui-MenuItemSwitch__switchIndicator__circleFilled{transition-duration:0.01ms;}}"
53
53
  ]
54
54
  });
55
55
  const useSwitchIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
@@ -58,8 +58,8 @@ const useSwitchIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
58
58
  "fdca5i2",
59
59
  "fk0rr1z"
60
60
  ],
61
- De3pzq: "ftywsgz",
62
- sj55zd: "fqpbvvt",
61
+ De3pzq: "f1eczkbk",
62
+ sj55zd: "f48jobs",
63
63
  g2u3we: "fghlq4f",
64
64
  h3c5rm: [
65
65
  "f1gn591s",
@@ -70,8 +70,8 @@ const useSwitchIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
70
70
  "fjscplz",
71
71
  "f1gn591s"
72
72
  ],
73
- Bi91k9c: "fz46y8r",
74
- Jwef8y: "f1kjrvvj",
73
+ Bi91k9c: "f16oppfk",
74
+ Jwef8y: "f1sb3j8z",
75
75
  Bgoe8wy: "fpa59ij",
76
76
  Bwzppfd: [
77
77
  "f1rhln42",
@@ -82,8 +82,8 @@ const useSwitchIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
82
82
  "f1l1ogpg",
83
83
  "f1rhln42"
84
84
  ],
85
- B2d53fq: "frlnr8d",
86
- iro3zm: "fle2s0s",
85
+ B2d53fq: "f1a3u1qo",
86
+ iro3zm: "fkjkmlx",
87
87
  b661bw: "f1j8ziw4",
88
88
  Bk6r4ia: [
89
89
  "f1xzu9i0",
@@ -99,22 +99,22 @@ const useSwitchIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
99
99
  d: [
100
100
  ".fdca5i2 .fui-MenuItemSwitch__switchIndicator__circleFilled{transform:translateX(20px);}",
101
101
  ".fk0rr1z .fui-MenuItemSwitch__switchIndicator__circleFilled{transform:translateX(-20px);}",
102
- ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}",
103
- ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}",
102
+ ".f1eczkbk{background-color:var(--1381, var(--1382, var(--colorCompoundBrandBackground)));}",
103
+ ".f48jobs{color:var(--1383, var(--1384, var(--colorNeutralForegroundInverted)));}",
104
104
  ".fghlq4f{border-top-color:var(--colorTransparentStroke);}",
105
105
  ".f1gn591s{border-right-color:var(--colorTransparentStroke);}",
106
106
  ".fjscplz{border-left-color:var(--colorTransparentStroke);}",
107
107
  ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}"
108
108
  ],
109
109
  h: [
110
- ".fz46y8r:hover{color:var(--colorNeutralForegroundInverted);}",
111
- ".f1kjrvvj:hover{background-color:var(--colorCompoundBrandBackgroundHover);}",
110
+ ".f16oppfk:hover{color:var(--1385, var(--1386, var(--colorNeutralForegroundInverted)));}",
111
+ ".f1sb3j8z:hover{background-color:var(--1387, var(--1388, var(--colorCompoundBrandBackgroundHover)));}",
112
112
  ".fpa59ij:hover{border-top-color:var(--colorTransparentStrokeInteractive);}",
113
113
  ".f1rhln42:hover{border-right-color:var(--colorTransparentStrokeInteractive);}",
114
114
  ".f1l1ogpg:hover{border-left-color:var(--colorTransparentStrokeInteractive);}",
115
115
  ".fz67qlh:hover{border-bottom-color:var(--colorTransparentStrokeInteractive);}",
116
- ".frlnr8d:hover:active{color:var(--colorNeutralForegroundInverted);}",
117
- ".fle2s0s:hover:active{background-color:var(--colorCompoundBrandBackgroundPressed);}",
116
+ ".f1a3u1qo:hover:active{color:var(--1389, var(--1390, var(--colorNeutralForegroundInverted)));}",
117
+ ".fkjkmlx:hover:active{background-color:var(--1391, var(--1392, var(--colorCompoundBrandBackgroundPressed)));}",
118
118
  ".f1j8ziw4:hover:active{border-top-color:var(--colorTransparentStrokeInteractive);}",
119
119
  ".f1xzu9i0:hover:active{border-right-color:var(--colorTransparentStrokeInteractive);}",
120
120
  ".f1jlpvxk:hover:active{border-left-color:var(--colorTransparentStrokeInteractive);}",
package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useMenuItemSwitchStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemSwitchClassNames = {\n root: 'fui-MenuItemSwitch',\n icon: 'fui-MenuItemSwitch__icon',\n content: 'fui-MenuItemSwitch__content',\n secondaryContent: 'fui-MenuItemSwitch__secondaryContent',\n switchIndicator: 'fui-MenuItemSwitch__switchIndicator'\n};\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useSwitchIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n marginRight: tokens.spacingHorizontalXS,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n color: tokens.colorNeutralStrokeAccessible,\n ':hover': {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover\n },\n ':hover:active': {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed\n },\n [`& .${circleFilledClassName}`]: {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n }\n});\nconst useSwitchIndicatorStyles = makeStyles({\n checked: {\n [`& .${circleFilledClassName}`]: {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n },\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n ':hover': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n },\n ':hover:active': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n }\n }\n});\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */ export const useMenuItemSwitchStyles_unstable = (state)=>{\n 'use no memo';\n const { checked } = state;\n const switchIndicatorStyles = useSwitchIndicatorStyles();\n const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n }\n if (state.switchIndicator) {\n state.switchIndicator.className = mergeClasses(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className);\n }\n useMenuItemStyles_unstable({\n ...state,\n components: {\n ...state.components,\n checkmark: 'span',\n submenuIndicator: 'span'\n },\n checkmark: undefined,\n submenuIndicator: undefined,\n hasSubmenu: false,\n persistOnClick: true\n });\n return state;\n};\n"],"names":["circleFilledClassName","menuItemSwitchClassNames","useMenuItemSwitchStyles_unstable","root","icon","content","secondaryContent","switchIndicator","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","__resetStyles","r","s","useSwitchIndicatorStyles","__styles","checked","G4r02d","De3pzq","sj55zd","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B2d53fq","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","d","h","state","switchIndicatorStyles","switchIndicatorBaseStyles","className","mergeClasses","useMenuItemStyles_unstable","components","checkmark","submenuIndicator","undefined","hasSubmenu","persistOnClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAUaA,qBAAqB;eAArBA;;IAPAC,wBAAwB;eAAxBA;;IAsEIC,gCAAgC;eAAhCA;;;uBAzEqD;yCAE3B;AACpC,MAAMD,2BAA2B;IACpCE,MAAM;IACNC,MAAM;IACNC,SAAS;IACTC,kBAAkB;IAClBC,iBAAiB;AACrB;AACO,MAAMP,wBAAwB;AACrC,+CAAA;AACA,MAAMQ,4BAA4B;AAClC,MAAMC,cAAc;AACpB,MAAMC,aAAa;AACnB,MAAMC,YAAYF,cAAcD;AAChC,MAAMI,kCAA+B,WAAA,GAAGC,IAAAA,oBAAA,EAAA,YAAA,WAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAmCxC,MAAMC,2BAAwB,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAsBtB,MAAMrC,mCAAoCsC,CAAAA;IACjD;IACA,MAAM,EAAEtB,OAAAA,EAAS,GAAGsB;IACpB,MAAMC,wBAAwBzB;IAC9B,MAAM0B,4BAA4B9B;IAClC4B,MAAMrC,IAAI,CAACwC,SAAS,GAAGC,IAAAA,mBAAY,EAAC3C,yBAAyBE,IAAI,EAAEqC,MAAMrC,IAAI,CAACwC,SAAS;IACvF,IAAIH,MAAMnC,OAAO,EAAE;QACfmC,MAAMnC,OAAO,CAACsC,SAAS,GAAGC,IAAAA,mBAAY,EAAC3C,yBAAyBI,OAAO,EAAEmC,MAAMnC,OAAO,CAACsC,SAAS;IACpG;IACA,IAAIH,MAAMlC,gBAAgB,EAAE;QACxBkC,MAAMlC,gBAAgB,CAACqC,SAAS,GAAGC,IAAAA,mBAAY,EAAC3C,yBAAyBK,gBAAgB,EAAEkC,MAAMlC,gBAAgB,CAACqC,SAAS;IAC/H;IACA,IAAIH,MAAMpC,IAAI,EAAE;QACZoC,MAAMpC,IAAI,CAACuC,SAAS,GAAGC,IAAAA,mBAAY,EAAC3C,yBAAyBG,IAAI,EAAEoC,MAAMpC,IAAI,CAACuC,SAAS;IAC3F;IACA,IAAIH,MAAMjC,eAAe,EAAE;QACvBiC,MAAMjC,eAAe,CAACoC,SAAS,GAAGC,IAAAA,mBAAY,EAAC3C,yBAAyBM,eAAe,EAAEmC,2BAA2BxB,WAAWuB,sBAAsBvB,OAAO,EAAEsB,MAAMjC,eAAe,CAACoC,SAAS;IACjM;IACAE,IAAAA,mDAA0B,EAAC;QACvB,GAAGL,KAAK;QACRM,YAAY;YACR,GAAGN,MAAMM,UAAU;YACnBC,WAAW;YACXC,kBAAkB;QACtB;QACAD,WAAWE;QACXD,kBAAkBC;QAClBC,YAAY;QACZC,gBAAgB;IACpB;IACA,OAAOX;AACX"}
1
+ {"version":3,"sources":["useMenuItemSwitchStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemSwitchClassNames = {\n root: 'fui-MenuItemSwitch',\n icon: 'fui-MenuItemSwitch__icon',\n content: 'fui-MenuItemSwitch__content',\n secondaryContent: 'fui-MenuItemSwitch__secondaryContent',\n switchIndicator: 'fui-MenuItemSwitch__switchIndicator'\n};\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useSwitchIndicatorBaseClassName = makeResetStyles({\n borderRadius: `var(--1359, var(--1360, ${tokens.borderRadiusCircular}))`,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n transitionDuration: `var(--1361, var(--1362, ${tokens.durationNormal}))`,\n transitionTimingFunction: `var(--1363, var(--1364, ${tokens.curveEasyEase}))`,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n marginRight: `var(--1365, var(--1366, ${tokens.spacingHorizontalXS}))`,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n color: `var(--1367, var(--1368, ${tokens.colorNeutralStrokeAccessible}))`,\n ':hover': {\n color: `var(--1369, var(--1370, ${tokens.colorNeutralStrokeAccessibleHover}))`,\n borderColor: `var(--1371, var(--1372, ${tokens.colorNeutralStrokeAccessibleHover}))`\n },\n ':hover:active': {\n color: `var(--1373, var(--1374, ${tokens.colorNeutralStrokeAccessiblePressed}))`,\n borderColor: `var(--1375, var(--1376, ${tokens.colorNeutralStrokeAccessiblePressed}))`\n },\n [`& .${circleFilledClassName}`]: {\n transitionDuration: `var(--1377, var(--1378, ${tokens.durationNormal}))`,\n transitionTimingFunction: `var(--1379, var(--1380, ${tokens.curveEasyEase}))`,\n transitionProperty: 'transform',\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n }\n});\nconst useSwitchIndicatorStyles = makeStyles({\n checked: {\n [`& .${circleFilledClassName}`]: {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n },\n backgroundColor: `var(--1381, var(--1382, ${tokens.colorCompoundBrandBackground}))`,\n color: `var(--1383, var(--1384, ${tokens.colorNeutralForegroundInverted}))`,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n ':hover': {\n color: `var(--1385, var(--1386, ${tokens.colorNeutralForegroundInverted}))`,\n backgroundColor: `var(--1387, var(--1388, ${tokens.colorCompoundBrandBackgroundHover}))`,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n },\n ':hover:active': {\n color: `var(--1389, var(--1390, ${tokens.colorNeutralForegroundInverted}))`,\n backgroundColor: `var(--1391, var(--1392, ${tokens.colorCompoundBrandBackgroundPressed}))`,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n }\n }\n});\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */ export const useMenuItemSwitchStyles_unstable = (state)=>{\n 'use no memo';\n const { checked } = state;\n const switchIndicatorStyles = useSwitchIndicatorStyles();\n const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n }\n if (state.switchIndicator) {\n state.switchIndicator.className = mergeClasses(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className);\n }\n useMenuItemStyles_unstable({\n ...state,\n components: {\n ...state.components,\n checkmark: 'span',\n submenuIndicator: 'span'\n },\n checkmark: undefined,\n submenuIndicator: undefined,\n hasSubmenu: false,\n persistOnClick: true\n });\n return state;\n};\n"],"names":["circleFilledClassName","menuItemSwitchClassNames","useMenuItemSwitchStyles_unstable","root","icon","content","secondaryContent","switchIndicator","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","__resetStyles","r","s","useSwitchIndicatorStyles","__styles","checked","G4r02d","De3pzq","sj55zd","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B2d53fq","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","d","h","state","switchIndicatorStyles","switchIndicatorBaseStyles","className","mergeClasses","useMenuItemStyles_unstable","components","checkmark","submenuIndicator","undefined","hasSubmenu","persistOnClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAUaA,qBAAqB;eAArBA;;IAPAC,wBAAwB;eAAxBA;;IAsEIC,gCAAgC;eAAhCA;;;uBAzEqD;yCAE3B;AACpC,MAAMD,2BAA2B;IACpCE,MAAM;IACNC,MAAM;IACNC,SAAS;IACTC,kBAAkB;IAClBC,iBAAiB;AACrB;AACO,MAAMP,wBAAwB;AACrC,+CAAA;AACA,MAAMQ,4BAA4B;AAClC,MAAMC,cAAc;AACpB,MAAMC,aAAa;AACnB,MAAMC,YAAYF,cAAcD;AAChC,MAAMI,kCAA+B,WAAA,GAAGC,IAAAA,oBAAA,EAAA,YAAA,YAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAmCxC,MAAMC,2BAAwB,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAsBtB,MAAMrC,mCAAoCsC,CAAAA;IACjD;IACA,MAAM,EAAEtB,OAAAA,EAAS,GAAGsB;IACpB,MAAMC,wBAAwBzB;IAC9B,MAAM0B,4BAA4B9B;IAClC4B,MAAMrC,IAAI,CAACwC,SAAS,GAAGC,IAAAA,mBAAY,EAAC3C,yBAAyBE,IAAI,EAAEqC,MAAMrC,IAAI,CAACwC,SAAS;IACvF,IAAIH,MAAMnC,OAAO,EAAE;QACfmC,MAAMnC,OAAO,CAACsC,SAAS,GAAGC,IAAAA,mBAAY,EAAC3C,yBAAyBI,OAAO,EAAEmC,MAAMnC,OAAO,CAACsC,SAAS;IACpG;IACA,IAAIH,MAAMlC,gBAAgB,EAAE;QACxBkC,MAAMlC,gBAAgB,CAACqC,SAAS,GAAGC,IAAAA,mBAAY,EAAC3C,yBAAyBK,gBAAgB,EAAEkC,MAAMlC,gBAAgB,CAACqC,SAAS;IAC/H;IACA,IAAIH,MAAMpC,IAAI,EAAE;QACZoC,MAAMpC,IAAI,CAACuC,SAAS,GAAGC,IAAAA,mBAAY,EAAC3C,yBAAyBG,IAAI,EAAEoC,MAAMpC,IAAI,CAACuC,SAAS;IAC3F;IACA,IAAIH,MAAMjC,eAAe,EAAE;QACvBiC,MAAMjC,eAAe,CAACoC,SAAS,GAAGC,IAAAA,mBAAY,EAAC3C,yBAAyBM,eAAe,EAAEmC,2BAA2BxB,WAAWuB,sBAAsBvB,OAAO,EAAEsB,MAAMjC,eAAe,CAACoC,SAAS;IACjM;IACAE,IAAAA,mDAA0B,EAAC;QACvB,GAAGL,KAAK;QACRM,YAAY;YACR,GAAGN,MAAMM,UAAU;YACnBC,WAAW;YACXC,kBAAkB;QACtB;QACAD,WAAWE;QACXD,kBAAkBC;QAClBC,YAAY;QACZC,gBAAgB;IACpB;IACA,OAAOX;AACX"}
package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.js CHANGED
@@ -26,9 +26,9 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
26
26
  Bbmb7ep: 0,
27
27
  Btl43ni: 0,
28
28
  B7oj6ja: 0,
29
- Dimara: "ft85np5",
30
- De3pzq: "fxugw4r",
31
- sj55zd: "f19n0e5",
29
+ Dimara: "f1spenlm",
30
+ De3pzq: "fd1f8cp",
31
+ sj55zd: "fudzgy5",
32
32
  B7ck84d: "f1ewtqcl",
33
33
  Bf4jedk: "fl8fusi",
34
34
  B2u0y6b: "f1kaai3v",
@@ -80,13 +80,13 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
80
80
  }, {
81
81
  d: [
82
82
  [
83
- ".ft85np5{border-radius:var(--borderRadiusMedium);}",
83
+ ".f1spenlm{border-radius:var(--1393, var(--1394, var(--borderRadiusMedium)));}",
84
84
  {
85
85
  p: -1
86
86
  }
87
87
  ],
88
- ".fxugw4r{background-color:var(--colorNeutralBackground1);}",
89
- ".f19n0e5{color:var(--colorNeutralForeground1);}",
88
+ ".fd1f8cp{background-color:var(--1395, var(--1396, var(--colorNeutralBackground1)));}",
89
+ ".fudzgy5{color:var(--1397, var(--1398, var(--colorNeutralForeground1)));}",
90
90
  ".f1ewtqcl{box-sizing:border-box;}",
91
91
  ".fl8fusi{min-width:138px;}",
92
92
  ".f1kaai3v{max-width:300px;}",
package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useMenuPopoverStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { createSlideStyles } from '@fluentui/react-positioning';\nexport const menuPopoverClassNames = {\n root: 'fui-MenuPopover'\n};\nconst useStyles = makeStyles({\n root: {\n borderRadius: tokens.borderRadiusMedium,\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n minWidth: '138px',\n maxWidth: '300px',\n overflowX: 'hidden',\n width: 'max-content',\n boxShadow: `${tokens.shadow16}`,\n padding: '4px',\n border: `1px solid ${tokens.colorTransparentStroke}`,\n ...typographyStyles.body1,\n ...createSlideStyles(10)\n }\n});\n/**\n * Apply styling to the Menu slots based on the state\n */ export const useMenuPopoverStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["menuPopoverClassNames","useMenuPopoverStyles_unstable","root","useStyles","__styles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","De3pzq","sj55zd","B7ck84d","Bf4jedk","B2u0y6b","B68tc82","a9b677","E5pizo","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","B93otf3","vin17d","Ezkn3b","nyiy2g","swvrvq","Bkovbt3","hgjdhn","fsy9dk","B3ogreh","jv49x5","Bk7o48c","Bv12yb3","z0t1cu","Bks05zx","Bvtglag","d","p","k","m","t","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,qBAAqB;eAArBA;;IAsBIC,6BAA6B;eAA7BA;;;uBAzBwB;AAGlC,MAAMD,wBAAwB;IACjCE,MAAM;AACV;AACA,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;KAAA;IAAAC,GAAA;QAAA;KAAA;AAAA;AAmBP,MAAM9D,gCAAiC+D,CAAAA;IAC9C;IACA,MAAMC,SAAS9D;IACf6D,MAAM9D,IAAI,CAACgE,SAAS,GAAGC,IAAAA,mBAAY,EAACnE,sBAAsBE,IAAI,EAAE+D,OAAO/D,IAAI,EAAE8D,MAAM9D,IAAI,CAACgE,SAAS;IACjG,OAAOF;AACX"}
1
+ {"version":3,"sources":["useMenuPopoverStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { createSlideStyles } from '@fluentui/react-positioning';\nexport const menuPopoverClassNames = {\n root: 'fui-MenuPopover'\n};\nconst useStyles = makeStyles({\n root: {\n borderRadius: `var(--1393, var(--1394, ${tokens.borderRadiusMedium}))`,\n backgroundColor: `var(--1395, var(--1396, ${tokens.colorNeutralBackground1}))`,\n color: `var(--1397, var(--1398, ${tokens.colorNeutralForeground1}))`,\n boxSizing: 'border-box',\n minWidth: '138px',\n maxWidth: '300px',\n overflowX: 'hidden',\n width: 'max-content',\n boxShadow: `${tokens.shadow16}`,\n padding: '4px',\n border: `1px solid ${tokens.colorTransparentStroke}`,\n ...typographyStyles.body1,\n ...createSlideStyles(10)\n }\n});\n/**\n * Apply styling to the Menu slots based on the state\n */ export const useMenuPopoverStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["menuPopoverClassNames","useMenuPopoverStyles_unstable","root","useStyles","__styles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","De3pzq","sj55zd","B7ck84d","Bf4jedk","B2u0y6b","B68tc82","a9b677","E5pizo","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","B93otf3","vin17d","Ezkn3b","nyiy2g","swvrvq","Bkovbt3","hgjdhn","fsy9dk","B3ogreh","jv49x5","Bk7o48c","Bv12yb3","z0t1cu","Bks05zx","Bvtglag","d","p","k","m","t","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,qBAAqB;eAArBA;;IAsBIC,6BAA6B;eAA7BA;;;uBAzBwB;AAGlC,MAAMD,wBAAwB;IACjCE,MAAM;AACV;AACA,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;KAAA;IAAAC,GAAA;QAAA;KAAA;AAAA;AAmBP,MAAM9D,gCAAiC+D,CAAAA;IAC9C;IACA,MAAMC,SAAS9D;IACf6D,MAAM9D,IAAI,CAACgE,SAAS,GAAGC,IAAAA,mBAAY,EAACnE,sBAAsBE,IAAI,EAAE+D,OAAO/D,IAAI,EAAE8D,MAAM9D,IAAI,CAACgE,SAAS;IACjG,OAAOF;AACX"}
package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js CHANGED
@@ -39,9 +39,9 @@ const menuSplitGroupClassNames = {
39
39
  "f8hq2kl"
40
40
  ],
41
41
  foni4y: "f7j48hl",
42
- Ie9k5m: "f13du8c1",
42
+ Ie9k5m: "fd0uecv",
43
43
  f30fub: "fe64lw1",
44
- Jberyy: "f92oj5h"
44
+ Jberyy: "fhcq4m8"
45
45
  }
46
46
  }, {
47
47
  d: [
@@ -54,9 +54,9 @@ const menuSplitGroupClassNames = {
54
54
  ".f1vtn0lh>.fui-MenuItem:nth-of-type(2){padding-left:0;}",
55
55
  ".f8hq2kl>.fui-MenuItem:nth-of-type(2){padding-right:0;}",
56
56
  ".f7j48hl>.fui-MenuItem:nth-of-type(2)::before{content:\"\";}",
57
- ".f13du8c1>.fui-MenuItem:nth-of-type(2)::before{width:var(--strokeWidthThin);}",
57
+ ".fd0uecv>.fui-MenuItem:nth-of-type(2)::before{width:var(--1399, var(--1400, var(--strokeWidthThin)));}",
58
58
  ".fe64lw1>.fui-MenuItem:nth-of-type(2)::before{height:20px;}",
59
- ".f92oj5h>.fui-MenuItem:nth-of-type(2)::before{background-color:var(--colorNeutralStroke1);}"
59
+ ".fhcq4m8>.fui-MenuItem:nth-of-type(2)::before{background-color:var(--1401, var(--1402, var(--colorNeutralStroke1)));}"
60
60
  ]
61
61
  });
62
62
  const useMenuSplitGroupStyles_unstable = (state)=>{
package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useMenuSplitGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuSplitGroupClassNames = {\n root: 'fui-MenuSplitGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n [`& > .${menuItemClassNames.root}:nth-of-type(1)`]: {\n flexGrow: 1\n },\n [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n paddingLeft: 0,\n '::before': {\n content: '\"\"',\n width: tokens.strokeWidthThin,\n height: '20px',\n backgroundColor: tokens.colorNeutralStroke1\n }\n }\n }\n});\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */ export const useMenuSplitGroupStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["menuSplitGroupClassNames","useMenuSplitGroupStyles_unstable","root","useStyles","__styles","mc9l5x","oe75ve","Bu15iap","B71tm0z","Gjs4sj","foni4y","Ie9k5m","f30fub","Jberyy","d","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,wBAAwB;eAAxBA;;IA0BIC,gCAAgC;eAAhCA;;;uBA7BwB;AAGlC,MAAMD,2BAA2B;IACpCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,QAAA;QAAAC,QAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAqBX,MAAMb,mCAAoCc,CAAAA;IACjD;IACA,MAAMC,SAASb;IACfY,MAAMb,IAAI,CAACe,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,yBAAyBE,IAAI,EAAEc,OAAOd,IAAI,EAAEa,MAAMb,IAAI,CAACe,SAAS;IACpG,OAAOF;AACX"}
1
+ {"version":3,"sources":["useMenuSplitGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuSplitGroupClassNames = {\n root: 'fui-MenuSplitGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n [`& > .${menuItemClassNames.root}:nth-of-type(1)`]: {\n flexGrow: 1\n },\n [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n paddingLeft: 0,\n '::before': {\n content: '\"\"',\n width: `var(--1399, var(--1400, ${tokens.strokeWidthThin}))`,\n height: '20px',\n backgroundColor: `var(--1401, var(--1402, ${tokens.colorNeutralStroke1}))`\n }\n }\n }\n});\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */ export const useMenuSplitGroupStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["menuSplitGroupClassNames","useMenuSplitGroupStyles_unstable","root","useStyles","__styles","mc9l5x","oe75ve","Bu15iap","B71tm0z","Gjs4sj","foni4y","Ie9k5m","f30fub","Jberyy","d","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,wBAAwB;eAAxBA;;IA0BIC,gCAAgC;eAAhCA;;;uBA7BwB;AAGlC,MAAMD,2BAA2B;IACpCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,QAAA;QAAAC,QAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAqBX,MAAMb,mCAAoCc,CAAAA;IACjD;IACA,MAAMC,SAASb;IACfY,MAAMb,IAAI,CAACe,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,yBAAyBE,IAAI,EAAEc,OAAOd,IAAI,EAAEa,MAAMb,IAAI,CAACe,SAAS;IACpG,OAAOF;AACX"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-menu",
3
- "version": "0.0.0-nightly-20240823-0407.1",
3
+ "version": "0.0.0-nightly-20240823-1802.1",
4
4
  "description": "Fluent UI menu component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -27,26 +27,26 @@
27
27
  "generate-api": "just-scripts generate-api"
28
28
  },
29
29
  "devDependencies": {
30
- "@fluentui/react-provider": "0.0.0-nightly-20240823-0407.1",
30
+ "@fluentui/react-provider": "0.0.0-nightly-20240823-1802.1",
31
31
  "@fluentui/eslint-plugin": "*",
32
- "@fluentui/react-conformance": "0.0.0-nightly-20240823-0407.1",
33
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240823-0407.1",
32
+ "@fluentui/react-conformance": "0.0.0-nightly-20240823-1802.1",
33
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240823-1802.1",
34
34
  "@fluentui/scripts-api-extractor": "*",
35
35
  "@fluentui/scripts-cypress": "*",
36
36
  "@fluentui/scripts-tasks": "*"
37
37
  },
38
38
  "dependencies": {
39
- "@fluentui/keyboard-keys": "0.0.0-nightly-20240823-0407.1",
40
- "@fluentui/react-aria": "0.0.0-nightly-20240823-0407.1",
41
- "@fluentui/react-context-selector": "0.0.0-nightly-20240823-0407.1",
39
+ "@fluentui/keyboard-keys": "0.0.0-nightly-20240823-1802.1",
40
+ "@fluentui/react-aria": "0.0.0-nightly-20240823-1802.1",
41
+ "@fluentui/react-context-selector": "0.0.0-nightly-20240823-1802.1",
42
42
  "@fluentui/react-icons": "^2.0.245",
43
- "@fluentui/react-portal": "0.0.0-nightly-20240823-0407.1",
44
- "@fluentui/react-positioning": "0.0.0-nightly-20240823-0407.1",
45
- "@fluentui/react-shared-contexts": "0.0.0-nightly-20240823-0407.1",
46
- "@fluentui/react-tabster": "0.0.0-nightly-20240823-0407.1",
47
- "@fluentui/react-theme": "0.0.0-nightly-20240823-0407.1",
48
- "@fluentui/react-utilities": "0.0.0-nightly-20240823-0407.1",
49
- "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240823-0407.1",
43
+ "@fluentui/react-portal": "0.0.0-nightly-20240823-1802.1",
44
+ "@fluentui/react-positioning": "0.0.0-nightly-20240823-1802.1",
45
+ "@fluentui/react-shared-contexts": "0.0.0-nightly-20240823-1802.1",
46
+ "@fluentui/react-tabster": "0.0.0-nightly-20240823-1802.1",
47
+ "@fluentui/react-theme": "0.0.0-nightly-20240823-1802.1",
48
+ "@fluentui/react-utilities": "0.0.0-nightly-20240823-1802.1",
49
+ "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240823-1802.1",
50
50
  "@griffel/react": "^1.5.22",
51
51
  "@swc/helpers": "^0.5.1"
52
52
  },