@fluentui/react-menu 9.11.1 → 9.12.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (17) hide show
  1. package/CHANGELOG.json +63 -3
  2. package/CHANGELOG.md +27 -4
  3. package/dist/index.d.ts +4 -0
  4. package/lib/components/MenuItem/useMenuItemStyles.styles.js +10 -30
  5. package/lib/components/MenuItem/useMenuItemStyles.styles.js.map +1 -1
  6. package/lib/components/MenuList/MenuList.types.js.map +1 -1
  7. package/lib/components/MenuList/useMenuList.js +1 -0
  8. package/lib/components/MenuList/useMenuList.js.map +1 -1
  9. package/lib/components/MenuList/useMenuListStyles.styles.js +5 -2
  10. package/lib/components/MenuList/useMenuListStyles.styles.js.map +1 -1
  11. package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.js +24 -94
  12. package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.js.map +1 -1
  13. package/lib-commonjs/components/MenuList/useMenuList.js +1 -0
  14. package/lib-commonjs/components/MenuList/useMenuList.js.map +1 -1
  15. package/lib-commonjs/components/MenuList/useMenuListStyles.styles.js +6 -2
  16. package/lib-commonjs/components/MenuList/useMenuListStyles.styles.js.map +1 -1
  17. package/package.json +5 -5
package/CHANGELOG.json CHANGED
@@ -2,7 +2,67 @@
2
2
  "name": "@fluentui/react-menu",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 25 Jul 2023 13:26:22 GMT",
5
+ "date": "Tue, 01 Aug 2023 10:14:27 GMT",
6
+ "tag": "@fluentui/react-menu_v9.12.1",
7
+ "version": "9.12.1",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "yuanboxue@microsoft.com",
12
+ "package": "@fluentui/react-menu",
13
+ "commit": "9250428d00e7e2909a0e3bae667c6ef0044ea67e",
14
+ "comment": "fix: use css outline for MenuItem focus ring instead of pseudo element"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-menu",
19
+ "comment": "Bump @fluentui/react-portal to v9.3.4",
20
+ "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-menu",
25
+ "comment": "Bump @fluentui/react-positioning to v9.9.1",
26
+ "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-menu",
31
+ "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
32
+ "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-menu",
37
+ "comment": "Bump @fluentui/react-tabster to v9.11.1",
38
+ "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
39
+ }
40
+ ]
41
+ }
42
+ },
43
+ {
44
+ "date": "Thu, 27 Jul 2023 10:34:13 GMT",
45
+ "tag": "@fluentui/react-menu_v9.12.0",
46
+ "version": "9.12.0",
47
+ "comments": {
48
+ "minor": [
49
+ {
50
+ "author": "yuanboxue@microsoft.com",
51
+ "package": "@fluentui/react-menu",
52
+ "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43",
53
+ "comment": "feat: update style to prevent double scrollbar"
54
+ },
55
+ {
56
+ "author": "beachball",
57
+ "package": "@fluentui/react-menu",
58
+ "comment": "Bump @fluentui/react-positioning to v9.9.0",
59
+ "commit": "d2d8068110a9a7f71f417a40ee5f2db0ed1c40b9"
60
+ }
61
+ ]
62
+ }
63
+ },
64
+ {
65
+ "date": "Tue, 25 Jul 2023 13:29:19 GMT",
6
66
  "tag": "@fluentui/react-menu_v9.11.1",
7
67
  "version": "9.11.1",
8
68
  "comments": {
@@ -23,13 +83,13 @@
23
83
  "author": "beachball",
24
84
  "package": "@fluentui/react-menu",
25
85
  "comment": "Bump @fluentui/react-portal to v9.3.3",
26
- "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2"
86
+ "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
27
87
  },
28
88
  {
29
89
  "author": "beachball",
30
90
  "package": "@fluentui/react-menu",
31
91
  "comment": "Bump @fluentui/react-tabster to v9.11.0",
32
- "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2"
92
+ "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
33
93
  }
34
94
  ]
35
95
  }
package/CHANGELOG.md CHANGED
@@ -1,20 +1,43 @@
1
1
  # Change Log - @fluentui/react-menu
2
2
 
3
- This log was last generated on Tue, 25 Jul 2023 13:26:22 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 01 Aug 2023 10:14:27 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.12.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.12.1)
8
+
9
+ Tue, 01 Aug 2023 10:14:27 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.12.0..@fluentui/react-menu_v9.12.1)
11
+
12
+ ### Patches
13
+
14
+ - fix: use css outline for MenuItem focus ring instead of pseudo element ([PR #28685](https://github.com/microsoft/fluentui/pull/28685) by yuanboxue@microsoft.com)
15
+ - Bump @fluentui/react-portal to v9.3.4 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
16
+ - Bump @fluentui/react-positioning to v9.9.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
17
+ - Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
18
+ - Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
19
+
20
+ ## [9.12.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.12.0)
21
+
22
+ Thu, 27 Jul 2023 10:34:13 GMT
23
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.11.1..@fluentui/react-menu_v9.12.0)
24
+
25
+ ### Minor changes
26
+
27
+ - feat: update style to prevent double scrollbar ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by yuanboxue@microsoft.com)
28
+ - Bump @fluentui/react-positioning to v9.9.0 ([PR #28649](https://github.com/microsoft/fluentui/pull/28649) by beachball)
29
+
7
30
  ## [9.11.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.11.1)
8
31
 
9
- Tue, 25 Jul 2023 13:26:22 GMT
32
+ Tue, 25 Jul 2023 13:29:19 GMT
10
33
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.11.0..@fluentui/react-menu_v9.11.1)
11
34
 
12
35
  ### Patches
13
36
 
14
37
  - chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
15
38
  - refactor: Remove custom focus code in favour of useRestoreFocus hooks ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by lingfan.gao@microsoft.com)
16
- - Bump @fluentui/react-portal to v9.3.3 ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by beachball)
17
- - Bump @fluentui/react-tabster to v9.11.0 ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by beachball)
39
+ - Bump @fluentui/react-portal to v9.3.3 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
40
+ - Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
18
41
 
19
42
  ## [9.11.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.11.0)
20
43
 
package/dist/index.d.ts CHANGED
@@ -329,6 +329,10 @@ export declare type MenuListState = ComponentState<MenuListSlots> & Required<Pic
329
329
  */
330
330
  setFocusByFirstCharacter: NonNullable<MenuListContextValue['setFocusByFirstCharacter']>;
331
331
  toggleCheckbox: SelectableHandler;
332
+ /**
333
+ * States if the MenuList is inside MenuContext
334
+ */
335
+ hasMenuContext?: boolean;
332
336
  };
333
337
 
334
338
  /**
package/lib/components/MenuItem/useMenuItemStyles.styles.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { mergeClasses, __styles, shorthands } from '@griffel/react';
2
2
  import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
3
- import { createFocusOutlineStyle } from '@fluentui/react-tabster';
3
+ import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
4
4
  import { tokens } from '@fluentui/react-theme';
5
5
  import { useCheckmarkStyles_unstable } from '../../selectable/index';
6
6
  export const menuItemClassNames = {
@@ -15,34 +15,13 @@ const useStyles = /*#__PURE__*/__styles({
15
15
  focusIndicator: {
16
16
  Brovlpu: "ftqa4ok",
17
17
  B486eqv: "f2hkw1w",
18
- B8q5s1w: "f8hki3x",
19
- Bci5o5g: ["f1d2448m", "ffh67wi"],
20
- n8qw10: "f1bjia2o",
21
- Bdrgwmp: ["ffh67wi", "f1d2448m"],
22
- Bm4h7ae: "f15bsgw9",
23
- B7ys5i9: "f14e48fq",
24
- Busjfv9: "f18yb2kv",
25
- Bhk32uz: "fd6o370",
26
- Bf4ptjt: "fh1cnn4",
27
- kclons: ["fy7oxxb", "f184ne2d"],
28
- Bhdgwq3: "fpukqih",
29
- Blkhhs4: ["f184ne2d", "fy7oxxb"],
30
- Bqtpl0w: "frrh606",
31
- clg4pj: ["f1v5zibi", "fo2hd23"],
32
- hgwjuy: "ful5kiu",
33
- Bonggc9: ["fo2hd23", "f1v5zibi"],
34
- B1tsrr9: ["f1jqcqds", "ftffrms"],
35
- Dah5zi: ["ftffrms", "f1jqcqds"],
36
- Bkh64rk: ["f2e7qr6", "fsr1zz6"],
37
- qqdqy8: ["fsr1zz6", "f2e7qr6"],
38
- B6dhp37: "f1dvezut",
39
- i03rao: ["fd0oaoj", "f1cwg4i8"],
40
- Boxcth7: "fjvm52t",
41
- Bsom6fd: ["f1cwg4i8", "fd0oaoj"],
42
- J0r882: "f57olzd",
43
- Bule8hv: ["f4stah7", "fs1por5"],
44
- Bjwuhne: "f480a47",
45
- Ghsupd: ["fs1por5", "f4stah7"]
18
+ kdpuga: ["f1o2ludy", "f1kjnpwc"],
19
+ Bw81rd7: ["f1kjnpwc", "f1o2ludy"],
20
+ B6xbmo0: ["fxmnebo", "f1witrsb"],
21
+ dm238s: ["f1witrsb", "fxmnebo"],
22
+ Bn4voq9: "f1p7hgxw",
23
+ g9k6zt: "f9znhxp",
24
+ Bfpq7zp: "fqrak0z"
46
25
  },
47
26
  root: {
48
27
  Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
@@ -55,6 +34,7 @@ const useStyles = /*#__PURE__*/__styles({
55
34
  z189sj: ["f1sgzk6v", "f1bg5zqg"],
56
35
  uwmqm3: ["f1bg5zqg", "f1sgzk6v"],
57
36
  Bqenvij: "f1d2rq10",
37
+ sshi5w: "f1nxs5xn",
58
38
  mc9l5x: "f22iagw",
59
39
  Bt984gj: "f122n59",
60
40
  Be2twd7: "fkhj508",
@@ -116,7 +96,7 @@ const useStyles = /*#__PURE__*/__styles({
116
96
  }, {
117
97
  f: [".ftqa4ok:focus{outline-style:none;}", ".fc1cou1:focus{color:var(--colorNeutralForeground3Hover);}", ".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}"],
118
98
  i: [".f2hkw1w:focus-visible{outline-style:none;}"],
119
- d: [".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1d2rq10{height:32px;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1k6fduh{cursor:pointer;}", ".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f161knb0{padding-left:2px;}", ".f12huiiw{padding-right:2px;}", ".f3rmtva{background-color:transparent;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fe5j1ua{font-size:20px;}", ".fez10in{line-height:0;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
99
+ d: [".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}", ".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}", ".f1p7hgxw[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);}", ".f9znhxp[data-fui-focus-visible]{outline-style:solid;}", ".fqrak0z[data-fui-focus-visible]{outline-color:var(--colorStrokeFocus2);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1d2rq10{height:32px;}", ".f1nxs5xn{min-height:32px;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1k6fduh{cursor:pointer;}", ".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f161knb0{padding-left:2px;}", ".f12huiiw{padding-right:2px;}", ".f3rmtva{background-color:transparent;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fe5j1ua{font-size:20px;}", ".fez10in{line-height:0;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
120
100
  h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".ft1hn21:hover .fui-Icon-filled{display:inline;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".fp258yr:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}", ".f1jp5ecu:hover{color:var(--colorNeutralForeground3Hover);}", ".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);}"],
121
101
  m: [["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
122
102
  m: "(forced-colors: active)"
package/lib/components/MenuItem/useMenuItemStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["mergeClasses","__styles","shorthands","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","useStyles","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bule8hv","Bjwuhne","Ghsupd","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","qhf8xq","sj55zd","De3pzq","z189sj","uwmqm3","Bqenvij","mc9l5x","Bt984gj","Be2twd7","Bceei9c","i8kkvl","Belr9w4","Jwef8y","Bi91k9c","Bk3fhr4","Bmfj8id","Bg7n49j","famaaq","Bh6795r","t0hwav","a9b677","Bg96gwp","Brf1p80","disabled","eoavqd","Bbusuzp","ze5xyy","Bctn1xl","Bh6z0a4","f","i","d","h","m","useMenuItemStyles_unstable","state","styles","className"],"sources":["useMenuItemStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } 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 useStyles = makeStyles({\n focusIndicator: createFocusOutlineStyle(),\n // TODO: this should be extracted to another package\n root: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n position: 'relative',\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackground1,\n paddingRight: '6px',\n paddingLeft: '6px',\n height: '32px',\n display: 'flex',\n alignItems: 'center',\n fontSize: tokens.fontSizeBase300,\n cursor: 'pointer',\n ...shorthands.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 userSelect: 'none'\n },\n content: {\n paddingLeft: '2px',\n paddingRight: '2px',\n backgroundColor: 'transparent',\n flexGrow: 1\n },\n secondaryContent: {\n paddingLeft: '2px',\n paddingRight: '2px',\n color: tokens.colorNeutralForeground3,\n ':hover': {\n color: tokens.colorNeutralForeground3Hover\n },\n ':focus': {\n color: tokens.colorNeutralForeground3Hover\n }\n },\n icon: {\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center'\n },\n submenuIndicator: {\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center'\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n 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 ':focus': {\n color: tokens.colorNeutralForegroundDisabled\n },\n '@media (forced-colors: active)': {\n color: 'GrayText',\n ':hover': {\n color: 'GrayText',\n [`& .${menuItemClassNames.icon}`]: {\n color: 'GrayText'\n }\n },\n ':focus': {\n color: 'GrayText'\n }\n }\n }\n});\n/** Applies style classnames to slots */ export const useMenuItemStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(menuItemClassNames.root, styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);\n }\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, !state.disabled && styles.secondaryContent, state.secondaryContent.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);\n }\n if (state.submenuIndicator) {\n state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, styles.submenuIndicator, state.submenuIndicator.className);\n }\n useCheckmarkStyles_unstable(state);\n};\n"],"mappings":"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"}
1
+ {"version":3,"names":["mergeClasses","__styles","shorthands","iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","useStyles","focusIndicator","Brovlpu","B486eqv","kdpuga","Bw81rd7","B6xbmo0","dm238s","Bn4voq9","g9k6zt","Bfpq7zp","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","qhf8xq","sj55zd","De3pzq","z189sj","uwmqm3","Bqenvij","sshi5w","mc9l5x","Bt984gj","Be2twd7","Bceei9c","i8kkvl","Belr9w4","Jwef8y","Bi91k9c","Bk3fhr4","Bmfj8id","Bg7n49j","famaaq","Bh6795r","t0hwav","a9b677","Bg96gwp","Brf1p80","disabled","eoavqd","Bbusuzp","ze5xyy","Bctn1xl","Bh6z0a4","f","i","d","h","m","useMenuItemStyles_unstable","state","styles","className"],"sources":["useMenuItemStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } 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 useStyles = makeStyles({\n focusIndicator: {\n ':focus': {\n outlineStyle: 'none'\n },\n ':focus-visible': {\n outlineStyle: 'none'\n },\n ...createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2)\n })\n },\n // TODO: this should be extracted to another package\n root: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n position: 'relative',\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackground1,\n paddingRight: '6px',\n paddingLeft: '6px',\n height: '32px',\n minHeight: '32px',\n display: 'flex',\n alignItems: 'center',\n fontSize: tokens.fontSizeBase300,\n cursor: 'pointer',\n ...shorthands.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 userSelect: 'none'\n },\n content: {\n paddingLeft: '2px',\n paddingRight: '2px',\n backgroundColor: 'transparent',\n flexGrow: 1\n },\n secondaryContent: {\n paddingLeft: '2px',\n paddingRight: '2px',\n color: tokens.colorNeutralForeground3,\n ':hover': {\n color: tokens.colorNeutralForeground3Hover\n },\n ':focus': {\n color: tokens.colorNeutralForeground3Hover\n }\n },\n icon: {\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center'\n },\n submenuIndicator: {\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center'\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n 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 ':focus': {\n color: tokens.colorNeutralForegroundDisabled\n },\n '@media (forced-colors: active)': {\n color: 'GrayText',\n ':hover': {\n color: 'GrayText',\n [`& .${menuItemClassNames.icon}`]: {\n color: 'GrayText'\n }\n },\n ':focus': {\n color: 'GrayText'\n }\n }\n }\n});\n/** Applies style classnames to slots */ export const useMenuItemStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(menuItemClassNames.root, styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);\n }\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, !state.disabled && styles.secondaryContent, state.secondaryContent.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);\n }\n if (state.submenuIndicator) {\n state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, styles.submenuIndicator, state.submenuIndicator.className);\n }\n useCheckmarkStyles_unstable(state);\n};\n"],"mappings":"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"}
package/lib/components/MenuList/MenuList.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["MenuList.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MenuListContextValue } from '../../contexts/menuListContext';\nimport type { SelectableHandler } from '../../selectable/index';\n\nexport type MenuCheckedValueChangeEvent = React.MouseEvent | React.KeyboardEvent;\n\nexport type MenuCheckedValueChangeData = {\n /** The items for this value that are checked */\n checkedItems: string[];\n /** The name of the value */\n name: string;\n};\n\nexport type MenuListSlots = {\n root: Slot<'div'>;\n};\n\nexport type MenuListProps = ComponentProps<MenuListSlots> & {\n /**\n * Map of all checked values\n */\n checkedValues?: Record<string, string[]>;\n\n /**\n * Default values to be checked on mount\n */\n defaultCheckedValues?: Record<string, string[]>;\n\n /**\n * States that menu items can contain selectable items and reserve slots for item alignment\n */\n hasCheckmarks?: boolean;\n\n /**\n * States that menu items can contain icons and reserve slots for item alignment\n */\n hasIcons?: boolean;\n\n /**\n * Callback when checked items change for value with a name\n *\n * @param event - React's original SyntheticEvent\n * @param data - A data object with relevant information\n */\n onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;\n};\n\nexport type MenuListState = ComponentState<MenuListSlots> &\n Required<Pick<MenuListProps, 'checkedValues' | 'hasCheckmarks' | 'hasIcons'>> &\n Pick<MenuListProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & {\n /**\n * Selects a radio item, will de-select the currently selected ratio item\n */\n selectRadio: SelectableHandler;\n\n /**\n * Callback to set focus on the next menu item by first character\n */\n setFocusByFirstCharacter: NonNullable<MenuListContextValue['setFocusByFirstCharacter']>;\n\n /*\n * Toggles the state of a checkbox item\n */\n toggleCheckbox: SelectableHandler;\n };\n\nexport type MenuListContextValues = {\n menuList: MenuListContextValue;\n};\n\n/**\n * @deprecated this type is not being used internally anymore\n */\nexport type UninitializedMenuListState = Omit<\n MenuListState,\n 'checkedValues' | 'selectRadio' | 'setFocusByFirstCharacter' | 'toggleCheckbox'\n> &\n Partial<Pick<MenuListState, 'checkedValues'>>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
1
+ {"version":3,"sources":["MenuList.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MenuListContextValue } from '../../contexts/menuListContext';\nimport type { SelectableHandler } from '../../selectable/index';\n\nexport type MenuCheckedValueChangeEvent = React.MouseEvent | React.KeyboardEvent;\n\nexport type MenuCheckedValueChangeData = {\n /** The items for this value that are checked */\n checkedItems: string[];\n /** The name of the value */\n name: string;\n};\n\nexport type MenuListSlots = {\n root: Slot<'div'>;\n};\n\nexport type MenuListProps = ComponentProps<MenuListSlots> & {\n /**\n * Map of all checked values\n */\n checkedValues?: Record<string, string[]>;\n\n /**\n * Default values to be checked on mount\n */\n defaultCheckedValues?: Record<string, string[]>;\n\n /**\n * States that menu items can contain selectable items and reserve slots for item alignment\n */\n hasCheckmarks?: boolean;\n\n /**\n * States that menu items can contain icons and reserve slots for item alignment\n */\n hasIcons?: boolean;\n\n /**\n * Callback when checked items change for value with a name\n *\n * @param event - React's original SyntheticEvent\n * @param data - A data object with relevant information\n */\n onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;\n};\n\nexport type MenuListState = ComponentState<MenuListSlots> &\n Required<Pick<MenuListProps, 'checkedValues' | 'hasCheckmarks' | 'hasIcons'>> &\n Pick<MenuListProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & {\n /**\n * Selects a radio item, will de-select the currently selected ratio item\n */\n selectRadio: SelectableHandler;\n\n /**\n * Callback to set focus on the next menu item by first character\n */\n setFocusByFirstCharacter: NonNullable<MenuListContextValue['setFocusByFirstCharacter']>;\n\n /*\n * Toggles the state of a checkbox item\n */\n toggleCheckbox: SelectableHandler;\n\n /**\n * States if the MenuList is inside MenuContext\n */\n hasMenuContext?: boolean;\n };\n\nexport type MenuListContextValues = {\n menuList: MenuListContextValue;\n};\n\n/**\n * @deprecated this type is not being used internally anymore\n */\nexport type UninitializedMenuListState = Omit<\n MenuListState,\n 'checkedValues' | 'selectRadio' | 'setFocusByFirstCharacter' | 'toggleCheckbox'\n> &\n Partial<Pick<MenuListState, 'checkedValues'>>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
package/lib/components/MenuList/useMenuList.js CHANGED
@@ -117,6 +117,7 @@ import { MenuContext } from '../../contexts/menuContext';
117
117
  hasIcons: menuContext.hasIcons || false,
118
118
  hasCheckmarks: menuContext.hasCheckmarks || false,
119
119
  checkedValues,
120
+ hasMenuContext,
120
121
  setFocusByFirstCharacter,
121
122
  selectRadio,
122
123
  toggleCheckbox
package/lib/components/MenuList/useMenuList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useMenuList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n useMergedRefs,\n useEventCallback,\n useControllableState,\n getNativeElementProps,\n} from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MenuContext } from '../../contexts/menuContext';\nimport type { MenuListProps, MenuListState } from './MenuList.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLElement>): MenuListState => {\n const { findAllFocusable } = useFocusFinders();\n const menuContext = useMenuContextSelectors();\n const hasMenuContext = useHasParentContext(MenuContext);\n const focusAttributes = useArrowNavigationGroup({ circular: true, ignoreDefaultKeydown: { Tab: hasMenuContext } });\n\n if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {\n // TODO throw warnings in development safely\n // eslint-disable-next-line no-console\n console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');\n }\n\n const innerRef = React.useRef<HTMLElement>(null);\n\n const setFocusByFirstCharacter = React.useCallback(\n (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => {\n // TODO use some kind of children registration to reduce dependency on DOM roles\n const acceptedRoles = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];\n if (!innerRef.current) {\n return;\n }\n\n const menuItems = findAllFocusable(\n innerRef.current,\n (el: HTMLElement) => el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')!) !== -1,\n );\n\n let startIndex = menuItems.indexOf(itemEl) + 1;\n if (startIndex === menuItems.length) {\n startIndex = 0;\n }\n\n const firstChars = menuItems.map(menuItem => menuItem.textContent?.charAt(0).toLowerCase());\n const char = e.key.toLowerCase();\n\n const getIndexFirstChars = (start: number, firstChar: string) => {\n for (let i = start; i < firstChars.length; i++) {\n if (char === firstChars[i]) {\n return i;\n }\n }\n return -1;\n };\n\n // Check remaining slots in the menu\n let index = getIndexFirstChars(startIndex, char);\n\n // If not found in remaining slots, check from beginning\n if (index === -1) {\n index = getIndexFirstChars(0, char);\n }\n\n // If match was found...\n if (index > -1) {\n menuItems[index].focus();\n }\n },\n [findAllFocusable],\n );\n\n const [checkedValues, setCheckedValues] = useControllableState({\n state: props.checkedValues ?? (hasMenuContext ? menuContext.checkedValues : undefined),\n defaultState: props.defaultCheckedValues,\n initialState: {},\n });\n\n const handleCheckedValueChange =\n props.onCheckedValueChange ?? (hasMenuContext ? menuContext.onCheckedValueChange : undefined);\n\n const toggleCheckbox = useEventCallback(\n (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked: boolean) => {\n const checkedItems = checkedValues?.[name] || [];\n const newCheckedItems = [...checkedItems];\n if (checked) {\n newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n } else {\n newCheckedItems.push(value);\n }\n\n handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n },\n );\n\n const selectRadio = useEventCallback((e: React.MouseEvent | React.KeyboardEvent, name: string, value: string) => {\n const newCheckedItems = [value];\n setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n });\n\n return {\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, innerRef),\n role: 'menu',\n 'aria-labelledby': menuContext.triggerId,\n ...focusAttributes,\n ...props,\n }),\n hasIcons: menuContext.hasIcons || false,\n hasCheckmarks: menuContext.hasCheckmarks || false,\n checkedValues,\n setFocusByFirstCharacter,\n selectRadio,\n toggleCheckbox,\n };\n};\n\n/**\n * Adds some sugar to fetching multiple context selector values\n */\nconst useMenuContextSelectors = () => {\n const checkedValues = useMenuContext_unstable(context => context.checkedValues);\n const onCheckedValueChange = useMenuContext_unstable(context => context.onCheckedValueChange);\n const triggerId = useMenuContext_unstable(context => context.triggerId);\n const hasIcons = useMenuContext_unstable(context => context.hasIcons);\n const hasCheckmarks = useMenuContext_unstable(context => context.hasCheckmarks);\n\n return {\n checkedValues,\n onCheckedValueChange,\n triggerId,\n hasIcons,\n hasCheckmarks,\n };\n};\n\n/**\n * Helper function to detect if props and MenuContext values are both used\n */\nconst usingPropsAndMenuContext = (\n props: MenuListProps,\n contextValue: ReturnType<typeof useMenuContextSelectors>,\n hasMenuContext: boolean,\n) => {\n let isUsingPropsAndContext = false;\n for (const val in contextValue) {\n if (props[val as keyof Omit<typeof contextValue, 'hasMenuContext' | 'onCheckedValueChange' | 'triggerId'>]) {\n isUsingPropsAndContext = true;\n }\n }\n\n return hasMenuContext && isUsingPropsAndContext;\n};\n"],"names":["React","useMergedRefs","useEventCallback","useControllableState","getNativeElementProps","useArrowNavigationGroup","useFocusFinders","useHasParentContext","useMenuContext_unstable","MenuContext","useMenuList_unstable","props","ref","findAllFocusable","menuContext","useMenuContextSelectors","hasMenuContext","focusAttributes","circular","ignoreDefaultKeydown","Tab","usingPropsAndMenuContext","console","warn","innerRef","useRef","setFocusByFirstCharacter","useCallback","e","itemEl","acceptedRoles","current","menuItems","el","hasAttribute","indexOf","getAttribute","startIndex","length","firstChars","map","menuItem","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","firstChar","i","index","focus","checkedValues","setCheckedValues","state","undefined","defaultState","defaultCheckedValues","initialState","handleCheckedValueChange","onCheckedValueChange","toggleCheckbox","name","value","checked","checkedItems","newCheckedItems","splice","push","s","selectRadio","components","root","role","triggerId","hasIcons","hasCheckmarks","context","contextValue","isUsingPropsAndContext","val"],"mappings":"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"}
1
+ {"version":3,"sources":["useMenuList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n useMergedRefs,\n useEventCallback,\n useControllableState,\n getNativeElementProps,\n} from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MenuContext } from '../../contexts/menuContext';\nimport type { MenuListProps, MenuListState } from './MenuList.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLElement>): MenuListState => {\n const { findAllFocusable } = useFocusFinders();\n const menuContext = useMenuContextSelectors();\n const hasMenuContext = useHasParentContext(MenuContext);\n const focusAttributes = useArrowNavigationGroup({ circular: true, ignoreDefaultKeydown: { Tab: hasMenuContext } });\n\n if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {\n // TODO throw warnings in development safely\n // eslint-disable-next-line no-console\n console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');\n }\n\n const innerRef = React.useRef<HTMLElement>(null);\n\n const setFocusByFirstCharacter = React.useCallback(\n (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => {\n // TODO use some kind of children registration to reduce dependency on DOM roles\n const acceptedRoles = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];\n if (!innerRef.current) {\n return;\n }\n\n const menuItems = findAllFocusable(\n innerRef.current,\n (el: HTMLElement) => el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')!) !== -1,\n );\n\n let startIndex = menuItems.indexOf(itemEl) + 1;\n if (startIndex === menuItems.length) {\n startIndex = 0;\n }\n\n const firstChars = menuItems.map(menuItem => menuItem.textContent?.charAt(0).toLowerCase());\n const char = e.key.toLowerCase();\n\n const getIndexFirstChars = (start: number, firstChar: string) => {\n for (let i = start; i < firstChars.length; i++) {\n if (char === firstChars[i]) {\n return i;\n }\n }\n return -1;\n };\n\n // Check remaining slots in the menu\n let index = getIndexFirstChars(startIndex, char);\n\n // If not found in remaining slots, check from beginning\n if (index === -1) {\n index = getIndexFirstChars(0, char);\n }\n\n // If match was found...\n if (index > -1) {\n menuItems[index].focus();\n }\n },\n [findAllFocusable],\n );\n\n const [checkedValues, setCheckedValues] = useControllableState({\n state: props.checkedValues ?? (hasMenuContext ? menuContext.checkedValues : undefined),\n defaultState: props.defaultCheckedValues,\n initialState: {},\n });\n\n const handleCheckedValueChange =\n props.onCheckedValueChange ?? (hasMenuContext ? menuContext.onCheckedValueChange : undefined);\n\n const toggleCheckbox = useEventCallback(\n (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked: boolean) => {\n const checkedItems = checkedValues?.[name] || [];\n const newCheckedItems = [...checkedItems];\n if (checked) {\n newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n } else {\n newCheckedItems.push(value);\n }\n\n handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n },\n );\n\n const selectRadio = useEventCallback((e: React.MouseEvent | React.KeyboardEvent, name: string, value: string) => {\n const newCheckedItems = [value];\n setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n });\n\n return {\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, innerRef),\n role: 'menu',\n 'aria-labelledby': menuContext.triggerId,\n ...focusAttributes,\n ...props,\n }),\n hasIcons: menuContext.hasIcons || false,\n hasCheckmarks: menuContext.hasCheckmarks || false,\n checkedValues,\n hasMenuContext,\n setFocusByFirstCharacter,\n selectRadio,\n toggleCheckbox,\n };\n};\n\n/**\n * Adds some sugar to fetching multiple context selector values\n */\nconst useMenuContextSelectors = () => {\n const checkedValues = useMenuContext_unstable(context => context.checkedValues);\n const onCheckedValueChange = useMenuContext_unstable(context => context.onCheckedValueChange);\n const triggerId = useMenuContext_unstable(context => context.triggerId);\n const hasIcons = useMenuContext_unstable(context => context.hasIcons);\n const hasCheckmarks = useMenuContext_unstable(context => context.hasCheckmarks);\n\n return {\n checkedValues,\n onCheckedValueChange,\n triggerId,\n hasIcons,\n hasCheckmarks,\n };\n};\n\n/**\n * Helper function to detect if props and MenuContext values are both used\n */\nconst usingPropsAndMenuContext = (\n props: MenuListProps,\n contextValue: ReturnType<typeof useMenuContextSelectors>,\n hasMenuContext: boolean,\n) => {\n let isUsingPropsAndContext = false;\n for (const val in contextValue) {\n if (props[val as keyof Omit<typeof contextValue, 'hasMenuContext' | 'onCheckedValueChange' | 'triggerId'>]) {\n isUsingPropsAndContext = true;\n }\n }\n\n return hasMenuContext && isUsingPropsAndContext;\n};\n"],"names":["React","useMergedRefs","useEventCallback","useControllableState","getNativeElementProps","useArrowNavigationGroup","useFocusFinders","useHasParentContext","useMenuContext_unstable","MenuContext","useMenuList_unstable","props","ref","findAllFocusable","menuContext","useMenuContextSelectors","hasMenuContext","focusAttributes","circular","ignoreDefaultKeydown","Tab","usingPropsAndMenuContext","console","warn","innerRef","useRef","setFocusByFirstCharacter","useCallback","e","itemEl","acceptedRoles","current","menuItems","el","hasAttribute","indexOf","getAttribute","startIndex","length","firstChars","map","menuItem","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","firstChar","i","index","focus","checkedValues","setCheckedValues","state","undefined","defaultState","defaultCheckedValues","initialState","handleCheckedValueChange","onCheckedValueChange","toggleCheckbox","name","value","checked","checkedItems","newCheckedItems","splice","push","s","selectRadio","components","root","role","triggerId","hasIcons","hasCheckmarks","context","contextValue","isUsingPropsAndContext","val"],"mappings":"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"}
package/lib/components/MenuList/useMenuListStyles.styles.js CHANGED
@@ -8,16 +8,19 @@ const useStyles = /*#__PURE__*/__styles({
8
8
  Beiy3e4: "f1vx9l62",
9
9
  i8kkvl: "f16mnhsx",
10
10
  Belr9w4: "fbi42co"
11
+ },
12
+ hasMenuContext: {
13
+ Bqenvij: "f1l02sjl"
11
14
  }
12
15
  }, {
13
- d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}", ".fbi42co{row-gap:2px;}"]
16
+ d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}", ".fbi42co{row-gap:2px;}", ".f1l02sjl{height:100%;}"]
14
17
  });
15
18
  /**
16
19
  * Apply styling to the Menu slots based on the state
17
20
  */
18
21
  export const useMenuListStyles_unstable = state => {
19
22
  const styles = useStyles();
20
- state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.root.className);
23
+ state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.hasMenuContext && styles.hasMenuContext, state.root.className);
21
24
  return state;
22
25
  };
23
26
  //# sourceMappingURL=useMenuListStyles.styles.js.map
package/lib/components/MenuList/useMenuListStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["mergeClasses","__styles","shorthands","menuListClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","d","useMenuListStyles_unstable","state","styles","className"],"sources":["useMenuListStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nexport const menuListClassNames = {\n root: 'fui-MenuList'\n};\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n ...shorthands.gap('2px')\n }\n});\n/**\n * Apply styling to the Menu slots based on the state\n */ export const useMenuListStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,EAAAC,QAAA,EAAcC,UAAU,QAAQ,gBAAgB;AACrE,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAMjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAMC,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1BO,KAAK,CAACR,IAAI,CAACU,SAAS,GAAGd,YAAY,CAACG,kBAAkB,CAACC,IAAI,EAAES,MAAM,CAACT,IAAI,EAAEQ,KAAK,CAACR,IAAI,CAACU,SAAS,CAAC;EAC/F,OAAOF,KAAK;AAChB,CAAC"}
1
+ {"version":3,"names":["mergeClasses","__styles","shorthands","menuListClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","hasMenuContext","Bqenvij","d","useMenuListStyles_unstable","state","styles","className"],"sources":["useMenuListStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nexport const menuListClassNames = {\n root: 'fui-MenuList'\n};\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n ...shorthands.gap('2px')\n },\n hasMenuContext: {\n height: '100%'\n }\n});\n/**\n * Apply styling to the Menu slots based on the state\n */ export const useMenuListStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.hasMenuContext && styles.hasMenuContext, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,EAAAC,QAAA,EAAcC,UAAU,QAAQ,gBAAgB;AACrE,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,cAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CASjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAMC,MAAM,GAAGV,SAAS,CAAC,CAAC;EAC1BS,KAAK,CAACV,IAAI,CAACY,SAAS,GAAGhB,YAAY,CAACG,kBAAkB,CAACC,IAAI,EAAEW,MAAM,CAACX,IAAI,EAAEU,KAAK,CAACJ,cAAc,IAAIK,MAAM,CAACL,cAAc,EAAEI,KAAK,CAACV,IAAI,CAACY,SAAS,CAAC;EAC9I,OAAOF,KAAK;AAChB,CAAC"}
package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.js CHANGED
@@ -26,76 +26,25 @@ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
26
26
  focusIndicator: {
27
27
  Brovlpu: "ftqa4ok",
28
28
  B486eqv: "f2hkw1w",
29
- B8q5s1w: "f8hki3x",
30
- Bci5o5g: [
31
- "f1d2448m",
32
- "ffh67wi"
29
+ kdpuga: [
30
+ "f1o2ludy",
31
+ "f1kjnpwc"
33
32
  ],
34
- n8qw10: "f1bjia2o",
35
- Bdrgwmp: [
36
- "ffh67wi",
37
- "f1d2448m"
33
+ Bw81rd7: [
34
+ "f1kjnpwc",
35
+ "f1o2ludy"
38
36
  ],
39
- Bm4h7ae: "f15bsgw9",
40
- B7ys5i9: "f14e48fq",
41
- Busjfv9: "f18yb2kv",
42
- Bhk32uz: "fd6o370",
43
- Bf4ptjt: "fh1cnn4",
44
- kclons: [
45
- "fy7oxxb",
46
- "f184ne2d"
37
+ B6xbmo0: [
38
+ "fxmnebo",
39
+ "f1witrsb"
47
40
  ],
48
- Bhdgwq3: "fpukqih",
49
- Blkhhs4: [
50
- "f184ne2d",
51
- "fy7oxxb"
41
+ dm238s: [
42
+ "f1witrsb",
43
+ "fxmnebo"
52
44
  ],
53
- Bqtpl0w: "frrh606",
54
- clg4pj: [
55
- "f1v5zibi",
56
- "fo2hd23"
57
- ],
58
- hgwjuy: "ful5kiu",
59
- Bonggc9: [
60
- "fo2hd23",
61
- "f1v5zibi"
62
- ],
63
- B1tsrr9: [
64
- "f1jqcqds",
65
- "ftffrms"
66
- ],
67
- Dah5zi: [
68
- "ftffrms",
69
- "f1jqcqds"
70
- ],
71
- Bkh64rk: [
72
- "f2e7qr6",
73
- "fsr1zz6"
74
- ],
75
- qqdqy8: [
76
- "fsr1zz6",
77
- "f2e7qr6"
78
- ],
79
- B6dhp37: "f1dvezut",
80
- i03rao: [
81
- "fd0oaoj",
82
- "f1cwg4i8"
83
- ],
84
- Boxcth7: "fjvm52t",
85
- Bsom6fd: [
86
- "f1cwg4i8",
87
- "fd0oaoj"
88
- ],
89
- J0r882: "f57olzd",
90
- Bule8hv: [
91
- "f4stah7",
92
- "fs1por5"
93
- ],
94
- Bjwuhne: "f480a47",
95
- Ghsupd: [
96
- "fs1por5",
97
- "f4stah7"
98
- ]
45
+ Bn4voq9: "f1p7hgxw",
46
+ g9k6zt: "f9znhxp",
47
+ Bfpq7zp: "fqrak0z"
99
48
  },
100
49
  root: {
101
50
  Bbmb7ep: [
@@ -126,6 +75,7 @@ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
126
75
  "f1sgzk6v"
127
76
  ],
128
77
  Bqenvij: "f1d2rq10",
78
+ sshi5w: "f1nxs5xn",
129
79
  mc9l5x: "f22iagw",
130
80
  Bt984gj: "f122n59",
131
81
  Be2twd7: "fkhj508",
@@ -206,34 +156,13 @@ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
206
156
  ".f2hkw1w:focus-visible{outline-style:none;}"
207
157
  ],
208
158
  d: [
209
- ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}",
210
- ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}",
211
- ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}",
212
- ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}",
213
- ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}",
214
- ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}",
215
- ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}",
216
- ".fd6o370[data-fui-focus-visible]::after{z-index:1;}",
217
- ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}",
218
- ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}",
219
- ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}",
220
- ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}",
221
- ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}",
222
- ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}",
223
- ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}",
224
- ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}",
225
- ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}",
226
- ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}",
227
- ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}",
228
- ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}",
229
- ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}",
230
- ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}",
231
- ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}",
232
- ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}",
233
- ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}",
234
- ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}",
235
- ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}",
236
- ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}",
159
+ ".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}",
160
+ ".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}",
161
+ ".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}",
162
+ ".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}",
163
+ ".f1p7hgxw[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);}",
164
+ ".f9znhxp[data-fui-focus-visible]{outline-style:solid;}",
165
+ ".fqrak0z[data-fui-focus-visible]{outline-color:var(--colorStrokeFocus2);}",
237
166
  ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}",
238
167
  ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}",
239
168
  ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}",
@@ -244,6 +173,7 @@ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
244
173
  ".f1sgzk6v{padding-right:6px;}",
245
174
  ".f1bg5zqg{padding-left:6px;}",
246
175
  ".f1d2rq10{height:32px;}",
176
+ ".f1nxs5xn{min-height:32px;}",
247
177
  ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
248
178
  ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}",
249
179
  ".fkhj508{font-size:var(--fontSizeBase300);}",
package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useMenuItemStyles.styles.js"],"sourcesContent":["import { mergeClasses, __styles, shorthands } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } 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 useStyles = /*#__PURE__*/__styles({\n focusIndicator: {\n Brovlpu: \"ftqa4ok\",\n B486eqv: \"f2hkw1w\",\n B8q5s1w: \"f8hki3x\",\n Bci5o5g: [\"f1d2448m\", \"ffh67wi\"],\n n8qw10: \"f1bjia2o\",\n Bdrgwmp: [\"ffh67wi\", \"f1d2448m\"],\n Bm4h7ae: \"f15bsgw9\",\n B7ys5i9: \"f14e48fq\",\n Busjfv9: \"f18yb2kv\",\n Bhk32uz: \"fd6o370\",\n Bf4ptjt: \"fh1cnn4\",\n kclons: [\"fy7oxxb\", \"f184ne2d\"],\n Bhdgwq3: \"fpukqih\",\n Blkhhs4: [\"f184ne2d\", \"fy7oxxb\"],\n Bqtpl0w: \"frrh606\",\n clg4pj: [\"f1v5zibi\", \"fo2hd23\"],\n hgwjuy: \"ful5kiu\",\n Bonggc9: [\"fo2hd23\", \"f1v5zibi\"],\n B1tsrr9: [\"f1jqcqds\", \"ftffrms\"],\n Dah5zi: [\"ftffrms\", \"f1jqcqds\"],\n Bkh64rk: [\"f2e7qr6\", \"fsr1zz6\"],\n qqdqy8: [\"fsr1zz6\", \"f2e7qr6\"],\n B6dhp37: \"f1dvezut\",\n i03rao: [\"fd0oaoj\", \"f1cwg4i8\"],\n Boxcth7: \"fjvm52t\",\n Bsom6fd: [\"f1cwg4i8\", \"fd0oaoj\"],\n J0r882: \"f57olzd\",\n Bule8hv: [\"f4stah7\", \"fs1por5\"],\n Bjwuhne: \"f480a47\",\n Ghsupd: [\"fs1por5\", \"f4stah7\"]\n },\n root: {\n Bbmb7ep: [\"f1aa9q02\", \"f16jpd5f\"],\n Beyfa6y: [\"f16jpd5f\", \"f1aa9q02\"],\n B7oj6ja: [\"f1jar5jt\", \"fyu767a\"],\n Btl43ni: [\"fyu767a\", \"f1jar5jt\"],\n qhf8xq: \"f10pi13n\",\n sj55zd: \"fkfq4zb\",\n De3pzq: \"fxugw4r\",\n z189sj: [\"f1sgzk6v\", \"f1bg5zqg\"],\n uwmqm3: [\"f1bg5zqg\", \"f1sgzk6v\"],\n Bqenvij: \"f1d2rq10\",\n mc9l5x: \"f22iagw\",\n Bt984gj: \"f122n59\",\n Be2twd7: \"fkhj508\",\n Bceei9c: \"f1k6fduh\",\n i8kkvl: \"f1q8lukm\",\n Belr9w4: \"f1ma2n7n\",\n Jwef8y: \"f1knas48\",\n Bi91k9c: \"fnwyq0v\",\n Bk3fhr4: \"ft1hn21\",\n Bmfj8id: \"fuxngvv\",\n Bg7n49j: \"fp258yr\",\n famaaq: \"f1xqy1su\"\n },\n content: {\n uwmqm3: [\"f161knb0\", \"f12huiiw\"],\n z189sj: [\"f12huiiw\", \"f161knb0\"],\n De3pzq: \"f3rmtva\",\n Bh6795r: \"fqerorx\"\n },\n secondaryContent: {\n uwmqm3: [\"f161knb0\", \"f12huiiw\"],\n z189sj: [\"f12huiiw\", \"f161knb0\"],\n sj55zd: \"f11d4kpn\",\n Bi91k9c: \"f1jp5ecu\",\n t0hwav: \"fc1cou1\"\n },\n icon: {\n a9b677: \"f64fuq3\",\n Bqenvij: \"fjamq6b\",\n Be2twd7: \"fe5j1ua\",\n Bg96gwp: \"fez10in\",\n Bt984gj: \"f122n59\",\n mc9l5x: \"ftuwxu6\",\n Brf1p80: \"f4d9j23\"\n },\n submenuIndicator: {\n a9b677: \"f64fuq3\",\n Bqenvij: \"fjamq6b\",\n Be2twd7: \"fe5j1ua\",\n Bg96gwp: \"fez10in\",\n Bt984gj: \"f122n59\",\n mc9l5x: \"ftuwxu6\",\n Brf1p80: \"f4d9j23\"\n },\n disabled: {\n sj55zd: \"f1s2aq7o\",\n Bi91k9c: \"fvgxktp\",\n Jwef8y: \"f1ijtazh\",\n eoavqd: \"fphbwmw\",\n Bk3fhr4: \"f19vpps7\",\n Bmfj8id: \"fv5swzo\",\n Bg7n49j: \"f1q1x1ba\",\n t0hwav: \"ft33916\",\n Bbusuzp: \"f1dcs8yz\",\n ze5xyy: \"f1kc2mi9\",\n Bctn1xl: \"fk56vqo\",\n Bh6z0a4: \"f1ikwg0d\"\n }\n}, {\n f: [\".ftqa4ok:focus{outline-style:none;}\", \".fc1cou1:focus{color:var(--colorNeutralForeground3Hover);}\", \".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}\"],\n i: [\".f2hkw1w:focus-visible{outline-style:none;}\"],\n d: [\".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}\", \".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}\", \".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}\", \".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}\", \".f15bsgw9[data-fui-focus-visible]::after{content:\\\"\\\";}\", \".f14e48fq[data-fui-focus-visible]::after{position:absolute;}\", \".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}\", \".fd6o370[data-fui-focus-visible]::after{z-index:1;}\", \".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}\", \".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}\", \".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}\", \".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}\", \".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}\", \".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}\", \".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}\", \".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}\", \".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}\", \".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}\", \".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}\", \".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}\", \".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}\", \".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}\", \".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}\", \".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}\", \".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}\", \".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}\", \".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}\", \".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}\", \".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}\", \".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}\", \".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}\", \".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}\", \".f10pi13n{position:relative;}\", \".fkfq4zb{color:var(--colorNeutralForeground2);}\", \".fxugw4r{background-color:var(--colorNeutralBackground1);}\", \".f1sgzk6v{padding-right:6px;}\", \".f1bg5zqg{padding-left:6px;}\", \".f1d2rq10{height:32px;}\", \".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".f1k6fduh{cursor:pointer;}\", \".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}\", \".f1ma2n7n{row-gap:4px;}\", \".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}\", \".f161knb0{padding-left:2px;}\", \".f12huiiw{padding-right:2px;}\", \".f3rmtva{background-color:transparent;}\", \".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}\", \".f11d4kpn{color:var(--colorNeutralForeground3);}\", \".f64fuq3{width:20px;}\", \".fjamq6b{height:20px;}\", \".fe5j1ua{font-size:20px;}\", \".fez10in{line-height:0;}\", \".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}\", \".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}\", \".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\"],\n h: [\".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}\", \".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}\", \".ft1hn21:hover .fui-Icon-filled{display:inline;}\", \".fuxngvv:hover .fui-Icon-regular{display:none;}\", \".fp258yr:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}\", \".f1jp5ecu:hover{color:var(--colorNeutralForeground3Hover);}\", \".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);}\"],\n m: [[\"@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.f1kc2mi9:hover{color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.fk56vqo:hover .fui-MenuItem__icon{color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.f1ikwg0d:focus{color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }]]\n});\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = state => {\n const styles = useStyles();\n state.root.className = mergeClasses(menuItemClassNames.root, styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);\n }\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, !state.disabled && styles.secondaryContent, state.secondaryContent.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);\n }\n if (state.submenuIndicator) {\n state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, styles.submenuIndicator, state.submenuIndicator.className);\n }\n useCheckmarkStyles_unstable(state);\n};\n//# sourceMappingURL=useMenuItemStyles.styles.js.map"],"names":["menuItemClassNames","useMenuItemStyles_unstable","root","icon","checkmark","submenuIndicator","content","secondaryContent","useStyles","__styles","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bule8hv","Bjwuhne","Ghsupd","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","qhf8xq","sj55zd","De3pzq","z189sj","uwmqm3","Bqenvij","mc9l5x","Bt984gj","Be2twd7","Bceei9c","i8kkvl","Belr9w4","Jwef8y","Bi91k9c","Bk3fhr4","Bmfj8id","Bg7n49j","famaaq","Bh6795r","t0hwav","a9b677","Bg96gwp","Brf1p80","disabled","eoavqd","Bbusuzp","ze5xyy","Bctn1xl","Bh6z0a4","f","i","d","h","m","state","styles","className","mergeClasses","useCheckmarkStyles_unstable"],"mappings":"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"}
1
+ {"version":3,"sources":["useMenuItemStyles.styles.js"],"sourcesContent":["import { mergeClasses, __styles, shorthands } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } 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 useStyles = /*#__PURE__*/__styles({\n focusIndicator: {\n Brovlpu: \"ftqa4ok\",\n B486eqv: \"f2hkw1w\",\n kdpuga: [\"f1o2ludy\", \"f1kjnpwc\"],\n Bw81rd7: [\"f1kjnpwc\", \"f1o2ludy\"],\n B6xbmo0: [\"fxmnebo\", \"f1witrsb\"],\n dm238s: [\"f1witrsb\", \"fxmnebo\"],\n Bn4voq9: \"f1p7hgxw\",\n g9k6zt: \"f9znhxp\",\n Bfpq7zp: \"fqrak0z\"\n },\n root: {\n Bbmb7ep: [\"f1aa9q02\", \"f16jpd5f\"],\n Beyfa6y: [\"f16jpd5f\", \"f1aa9q02\"],\n B7oj6ja: [\"f1jar5jt\", \"fyu767a\"],\n Btl43ni: [\"fyu767a\", \"f1jar5jt\"],\n qhf8xq: \"f10pi13n\",\n sj55zd: \"fkfq4zb\",\n De3pzq: \"fxugw4r\",\n z189sj: [\"f1sgzk6v\", \"f1bg5zqg\"],\n uwmqm3: [\"f1bg5zqg\", \"f1sgzk6v\"],\n Bqenvij: \"f1d2rq10\",\n sshi5w: \"f1nxs5xn\",\n mc9l5x: \"f22iagw\",\n Bt984gj: \"f122n59\",\n Be2twd7: \"fkhj508\",\n Bceei9c: \"f1k6fduh\",\n i8kkvl: \"f1q8lukm\",\n Belr9w4: \"f1ma2n7n\",\n Jwef8y: \"f1knas48\",\n Bi91k9c: \"fnwyq0v\",\n Bk3fhr4: \"ft1hn21\",\n Bmfj8id: \"fuxngvv\",\n Bg7n49j: \"fp258yr\",\n famaaq: \"f1xqy1su\"\n },\n content: {\n uwmqm3: [\"f161knb0\", \"f12huiiw\"],\n z189sj: [\"f12huiiw\", \"f161knb0\"],\n De3pzq: \"f3rmtva\",\n Bh6795r: \"fqerorx\"\n },\n secondaryContent: {\n uwmqm3: [\"f161knb0\", \"f12huiiw\"],\n z189sj: [\"f12huiiw\", \"f161knb0\"],\n sj55zd: \"f11d4kpn\",\n Bi91k9c: \"f1jp5ecu\",\n t0hwav: \"fc1cou1\"\n },\n icon: {\n a9b677: \"f64fuq3\",\n Bqenvij: \"fjamq6b\",\n Be2twd7: \"fe5j1ua\",\n Bg96gwp: \"fez10in\",\n Bt984gj: \"f122n59\",\n mc9l5x: \"ftuwxu6\",\n Brf1p80: \"f4d9j23\"\n },\n submenuIndicator: {\n a9b677: \"f64fuq3\",\n Bqenvij: \"fjamq6b\",\n Be2twd7: \"fe5j1ua\",\n Bg96gwp: \"fez10in\",\n Bt984gj: \"f122n59\",\n mc9l5x: \"ftuwxu6\",\n Brf1p80: \"f4d9j23\"\n },\n disabled: {\n sj55zd: \"f1s2aq7o\",\n Bi91k9c: \"fvgxktp\",\n Jwef8y: \"f1ijtazh\",\n eoavqd: \"fphbwmw\",\n Bk3fhr4: \"f19vpps7\",\n Bmfj8id: \"fv5swzo\",\n Bg7n49j: \"f1q1x1ba\",\n t0hwav: \"ft33916\",\n Bbusuzp: \"f1dcs8yz\",\n ze5xyy: \"f1kc2mi9\",\n Bctn1xl: \"fk56vqo\",\n Bh6z0a4: \"f1ikwg0d\"\n }\n}, {\n f: [\".ftqa4ok:focus{outline-style:none;}\", \".fc1cou1:focus{color:var(--colorNeutralForeground3Hover);}\", \".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}\"],\n i: [\".f2hkw1w:focus-visible{outline-style:none;}\"],\n d: [\".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}\", \".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}\", \".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}\", \".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}\", \".f1p7hgxw[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);}\", \".f9znhxp[data-fui-focus-visible]{outline-style:solid;}\", \".fqrak0z[data-fui-focus-visible]{outline-color:var(--colorStrokeFocus2);}\", \".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}\", \".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}\", \".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}\", \".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}\", \".f10pi13n{position:relative;}\", \".fkfq4zb{color:var(--colorNeutralForeground2);}\", \".fxugw4r{background-color:var(--colorNeutralBackground1);}\", \".f1sgzk6v{padding-right:6px;}\", \".f1bg5zqg{padding-left:6px;}\", \".f1d2rq10{height:32px;}\", \".f1nxs5xn{min-height:32px;}\", \".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".f1k6fduh{cursor:pointer;}\", \".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}\", \".f1ma2n7n{row-gap:4px;}\", \".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}\", \".f161knb0{padding-left:2px;}\", \".f12huiiw{padding-right:2px;}\", \".f3rmtva{background-color:transparent;}\", \".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}\", \".f11d4kpn{color:var(--colorNeutralForeground3);}\", \".f64fuq3{width:20px;}\", \".fjamq6b{height:20px;}\", \".fe5j1ua{font-size:20px;}\", \".fez10in{line-height:0;}\", \".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}\", \".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}\", \".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\"],\n h: [\".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}\", \".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}\", \".ft1hn21:hover .fui-Icon-filled{display:inline;}\", \".fuxngvv:hover .fui-Icon-regular{display:none;}\", \".fp258yr:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}\", \".f1jp5ecu:hover{color:var(--colorNeutralForeground3Hover);}\", \".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);}\"],\n m: [[\"@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.f1kc2mi9:hover{color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.fk56vqo:hover .fui-MenuItem__icon{color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.f1ikwg0d:focus{color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }]]\n});\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = state => {\n const styles = useStyles();\n state.root.className = mergeClasses(menuItemClassNames.root, styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);\n }\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, !state.disabled && styles.secondaryContent, state.secondaryContent.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);\n }\n if (state.submenuIndicator) {\n state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, styles.submenuIndicator, state.submenuIndicator.className);\n }\n useCheckmarkStyles_unstable(state);\n};\n//# sourceMappingURL=useMenuItemStyles.styles.js.map"],"names":["menuItemClassNames","useMenuItemStyles_unstable","root","icon","checkmark","submenuIndicator","content","secondaryContent","useStyles","__styles","focusIndicator","Brovlpu","B486eqv","kdpuga","Bw81rd7","B6xbmo0","dm238s","Bn4voq9","g9k6zt","Bfpq7zp","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","qhf8xq","sj55zd","De3pzq","z189sj","uwmqm3","Bqenvij","sshi5w","mc9l5x","Bt984gj","Be2twd7","Bceei9c","i8kkvl","Belr9w4","Jwef8y","Bi91k9c","Bk3fhr4","Bmfj8id","Bg7n49j","famaaq","Bh6795r","t0hwav","a9b677","Bg96gwp","Brf1p80","disabled","eoavqd","Bbusuzp","ze5xyy","Bctn1xl","Bh6z0a4","f","i","d","h","m","state","styles","className","mergeClasses","useCheckmarkStyles_unstable"],"mappings":"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"}
package/lib-commonjs/components/MenuList/useMenuList.js CHANGED
@@ -123,6 +123,7 @@ const useMenuList_unstable = (props, ref)=>{
123
123
  hasIcons: menuContext.hasIcons || false,
124
124
  hasCheckmarks: menuContext.hasCheckmarks || false,
125
125
  checkedValues,
126
+ hasMenuContext,
126
127
  setFocusByFirstCharacter,
127
128
  selectRadio,
128
129
  toggleCheckbox
package/lib-commonjs/components/MenuList/useMenuList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useMenuList.js"],"sourcesContent":["import * as React from 'react';\nimport { useMergedRefs, useEventCallback, useControllableState, getNativeElementProps } from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MenuContext } from '../../contexts/menuContext';\n/**\n * Returns the props and state required to render the component\n */ export const useMenuList_unstable = (props, ref)=>{\n const { findAllFocusable } = useFocusFinders();\n const menuContext = useMenuContextSelectors();\n const hasMenuContext = useHasParentContext(MenuContext);\n const focusAttributes = useArrowNavigationGroup({\n circular: true,\n ignoreDefaultKeydown: {\n Tab: hasMenuContext\n }\n });\n if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {\n // TODO throw warnings in development safely\n // eslint-disable-next-line no-console\n console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');\n }\n const innerRef = React.useRef(null);\n const setFocusByFirstCharacter = React.useCallback((e, itemEl)=>{\n // TODO use some kind of children registration to reduce dependency on DOM roles\n const acceptedRoles = [\n 'menuitem',\n 'menuitemcheckbox',\n 'menuitemradio'\n ];\n if (!innerRef.current) {\n return;\n }\n const menuItems = findAllFocusable(innerRef.current, (el)=>el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')) !== -1);\n let startIndex = menuItems.indexOf(itemEl) + 1;\n if (startIndex === menuItems.length) {\n startIndex = 0;\n }\n const firstChars = menuItems.map((menuItem)=>{\n var _menuItem_textContent;\n return (_menuItem_textContent = menuItem.textContent) === null || _menuItem_textContent === void 0 ? void 0 : _menuItem_textContent.charAt(0).toLowerCase();\n });\n const char = e.key.toLowerCase();\n const getIndexFirstChars = (start, firstChar)=>{\n for(let i = start; i < firstChars.length; i++){\n if (char === firstChars[i]) {\n return i;\n }\n }\n return -1;\n };\n // Check remaining slots in the menu\n let index = getIndexFirstChars(startIndex, char);\n // If not found in remaining slots, check from beginning\n if (index === -1) {\n index = getIndexFirstChars(0, char);\n }\n // If match was found...\n if (index > -1) {\n menuItems[index].focus();\n }\n }, [\n findAllFocusable\n ]);\n var _props_checkedValues;\n const [checkedValues, setCheckedValues] = useControllableState({\n state: (_props_checkedValues = props.checkedValues) !== null && _props_checkedValues !== void 0 ? _props_checkedValues : hasMenuContext ? menuContext.checkedValues : undefined,\n defaultState: props.defaultCheckedValues,\n initialState: {}\n });\n var _props_onCheckedValueChange;\n const handleCheckedValueChange = (_props_onCheckedValueChange = props.onCheckedValueChange) !== null && _props_onCheckedValueChange !== void 0 ? _props_onCheckedValueChange : hasMenuContext ? menuContext.onCheckedValueChange : undefined;\n const toggleCheckbox = useEventCallback((e, name, value, checked)=>{\n const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];\n const newCheckedItems = [\n ...checkedItems\n ];\n if (checked) {\n newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n } else {\n newCheckedItems.push(value);\n }\n handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {\n name,\n checkedItems: newCheckedItems\n });\n setCheckedValues((s)=>({\n ...s,\n [name]: newCheckedItems\n }));\n });\n const selectRadio = useEventCallback((e, name, value)=>{\n const newCheckedItems = [\n value\n ];\n setCheckedValues((s)=>({\n ...s,\n [name]: newCheckedItems\n }));\n handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {\n name,\n checkedItems: newCheckedItems\n });\n });\n return {\n components: {\n root: 'div'\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, innerRef),\n role: 'menu',\n 'aria-labelledby': menuContext.triggerId,\n ...focusAttributes,\n ...props\n }),\n hasIcons: menuContext.hasIcons || false,\n hasCheckmarks: menuContext.hasCheckmarks || false,\n checkedValues,\n setFocusByFirstCharacter,\n selectRadio,\n toggleCheckbox\n };\n};\n/**\n * Adds some sugar to fetching multiple context selector values\n */ const useMenuContextSelectors = ()=>{\n const checkedValues = useMenuContext_unstable((context)=>context.checkedValues);\n const onCheckedValueChange = useMenuContext_unstable((context)=>context.onCheckedValueChange);\n const triggerId = useMenuContext_unstable((context)=>context.triggerId);\n const hasIcons = useMenuContext_unstable((context)=>context.hasIcons);\n const hasCheckmarks = useMenuContext_unstable((context)=>context.hasCheckmarks);\n return {\n checkedValues,\n onCheckedValueChange,\n triggerId,\n hasIcons,\n hasCheckmarks\n };\n};\n/**\n * Helper function to detect if props and MenuContext values are both used\n */ const usingPropsAndMenuContext = (props, contextValue, hasMenuContext)=>{\n let isUsingPropsAndContext = false;\n for(const val in contextValue){\n if (props[val]) {\n isUsingPropsAndContext = true;\n }\n }\n return hasMenuContext && isUsingPropsAndContext;\n};\n"],"names":["useMenuList_unstable","props","ref","findAllFocusable","useFocusFinders","menuContext","useMenuContextSelectors","hasMenuContext","useHasParentContext","MenuContext","focusAttributes","useArrowNavigationGroup","circular","ignoreDefaultKeydown","Tab","usingPropsAndMenuContext","console","warn","innerRef","React","useRef","setFocusByFirstCharacter","useCallback","e","itemEl","acceptedRoles","current","menuItems","el","hasAttribute","indexOf","getAttribute","startIndex","length","firstChars","map","menuItem","_menuItem_textContent","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","firstChar","i","index","focus","_props_checkedValues","checkedValues","setCheckedValues","useControllableState","state","undefined","defaultState","defaultCheckedValues","initialState","_props_onCheckedValueChange","handleCheckedValueChange","onCheckedValueChange","toggleCheckbox","useEventCallback","name","value","checked","checkedItems","newCheckedItems","splice","push","s","selectRadio","components","root","getNativeElementProps","useMergedRefs","role","triggerId","hasIcons","hasCheckmarks","useMenuContext_unstable","context","contextValue","isUsingPropsAndContext","val"],"mappings":"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"}
1
+ {"version":3,"sources":["useMenuList.js"],"sourcesContent":["import * as React from 'react';\nimport { useMergedRefs, useEventCallback, useControllableState, getNativeElementProps } from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MenuContext } from '../../contexts/menuContext';\n/**\n * Returns the props and state required to render the component\n */ export const useMenuList_unstable = (props, ref)=>{\n const { findAllFocusable } = useFocusFinders();\n const menuContext = useMenuContextSelectors();\n const hasMenuContext = useHasParentContext(MenuContext);\n const focusAttributes = useArrowNavigationGroup({\n circular: true,\n ignoreDefaultKeydown: {\n Tab: hasMenuContext\n }\n });\n if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {\n // TODO throw warnings in development safely\n // eslint-disable-next-line no-console\n console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');\n }\n const innerRef = React.useRef(null);\n const setFocusByFirstCharacter = React.useCallback((e, itemEl)=>{\n // TODO use some kind of children registration to reduce dependency on DOM roles\n const acceptedRoles = [\n 'menuitem',\n 'menuitemcheckbox',\n 'menuitemradio'\n ];\n if (!innerRef.current) {\n return;\n }\n const menuItems = findAllFocusable(innerRef.current, (el)=>el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')) !== -1);\n let startIndex = menuItems.indexOf(itemEl) + 1;\n if (startIndex === menuItems.length) {\n startIndex = 0;\n }\n const firstChars = menuItems.map((menuItem)=>{\n var _menuItem_textContent;\n return (_menuItem_textContent = menuItem.textContent) === null || _menuItem_textContent === void 0 ? void 0 : _menuItem_textContent.charAt(0).toLowerCase();\n });\n const char = e.key.toLowerCase();\n const getIndexFirstChars = (start, firstChar)=>{\n for(let i = start; i < firstChars.length; i++){\n if (char === firstChars[i]) {\n return i;\n }\n }\n return -1;\n };\n // Check remaining slots in the menu\n let index = getIndexFirstChars(startIndex, char);\n // If not found in remaining slots, check from beginning\n if (index === -1) {\n index = getIndexFirstChars(0, char);\n }\n // If match was found...\n if (index > -1) {\n menuItems[index].focus();\n }\n }, [\n findAllFocusable\n ]);\n var _props_checkedValues;\n const [checkedValues, setCheckedValues] = useControllableState({\n state: (_props_checkedValues = props.checkedValues) !== null && _props_checkedValues !== void 0 ? _props_checkedValues : hasMenuContext ? menuContext.checkedValues : undefined,\n defaultState: props.defaultCheckedValues,\n initialState: {}\n });\n var _props_onCheckedValueChange;\n const handleCheckedValueChange = (_props_onCheckedValueChange = props.onCheckedValueChange) !== null && _props_onCheckedValueChange !== void 0 ? _props_onCheckedValueChange : hasMenuContext ? menuContext.onCheckedValueChange : undefined;\n const toggleCheckbox = useEventCallback((e, name, value, checked)=>{\n const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];\n const newCheckedItems = [\n ...checkedItems\n ];\n if (checked) {\n newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n } else {\n newCheckedItems.push(value);\n }\n handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {\n name,\n checkedItems: newCheckedItems\n });\n setCheckedValues((s)=>({\n ...s,\n [name]: newCheckedItems\n }));\n });\n const selectRadio = useEventCallback((e, name, value)=>{\n const newCheckedItems = [\n value\n ];\n setCheckedValues((s)=>({\n ...s,\n [name]: newCheckedItems\n }));\n handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {\n name,\n checkedItems: newCheckedItems\n });\n });\n return {\n components: {\n root: 'div'\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, innerRef),\n role: 'menu',\n 'aria-labelledby': menuContext.triggerId,\n ...focusAttributes,\n ...props\n }),\n hasIcons: menuContext.hasIcons || false,\n hasCheckmarks: menuContext.hasCheckmarks || false,\n checkedValues,\n hasMenuContext,\n setFocusByFirstCharacter,\n selectRadio,\n toggleCheckbox\n };\n};\n/**\n * Adds some sugar to fetching multiple context selector values\n */ const useMenuContextSelectors = ()=>{\n const checkedValues = useMenuContext_unstable((context)=>context.checkedValues);\n const onCheckedValueChange = useMenuContext_unstable((context)=>context.onCheckedValueChange);\n const triggerId = useMenuContext_unstable((context)=>context.triggerId);\n const hasIcons = useMenuContext_unstable((context)=>context.hasIcons);\n const hasCheckmarks = useMenuContext_unstable((context)=>context.hasCheckmarks);\n return {\n checkedValues,\n onCheckedValueChange,\n triggerId,\n hasIcons,\n hasCheckmarks\n };\n};\n/**\n * Helper function to detect if props and MenuContext values are both used\n */ const usingPropsAndMenuContext = (props, contextValue, hasMenuContext)=>{\n let isUsingPropsAndContext = false;\n for(const val in contextValue){\n if (props[val]) {\n isUsingPropsAndContext = true;\n }\n }\n return hasMenuContext && isUsingPropsAndContext;\n};\n"],"names":["useMenuList_unstable","props","ref","findAllFocusable","useFocusFinders","menuContext","useMenuContextSelectors","hasMenuContext","useHasParentContext","MenuContext","focusAttributes","useArrowNavigationGroup","circular","ignoreDefaultKeydown","Tab","usingPropsAndMenuContext","console","warn","innerRef","React","useRef","setFocusByFirstCharacter","useCallback","e","itemEl","acceptedRoles","current","menuItems","el","hasAttribute","indexOf","getAttribute","startIndex","length","firstChars","map","menuItem","_menuItem_textContent","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","firstChar","i","index","focus","_props_checkedValues","checkedValues","setCheckedValues","useControllableState","state","undefined","defaultState","defaultCheckedValues","initialState","_props_onCheckedValueChange","handleCheckedValueChange","onCheckedValueChange","toggleCheckbox","useEventCallback","name","value","checked","checkedItems","newCheckedItems","splice","push","s","selectRadio","components","root","getNativeElementProps","useMergedRefs","role","triggerId","hasIcons","hasCheckmarks","useMenuContext_unstable","context","contextValue","isUsingPropsAndContext","val"],"mappings":"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"}
package/lib-commonjs/components/MenuList/useMenuListStyles.styles.js CHANGED
@@ -22,17 +22,21 @@ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
22
22
  Beiy3e4: "f1vx9l62",
23
23
  i8kkvl: "f16mnhsx",
24
24
  Belr9w4: "fbi42co"
25
+ },
26
+ hasMenuContext: {
27
+ Bqenvij: "f1l02sjl"
25
28
  }
26
29
  }, {
27
30
  d: [
28
31
  ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
29
32
  ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}",
30
33
  ".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}",
31
- ".fbi42co{row-gap:2px;}"
34
+ ".fbi42co{row-gap:2px;}",
35
+ ".f1l02sjl{height:100%;}"
32
36
  ]
33
37
  });
34
38
  const useMenuListStyles_unstable = (state)=>{
35
39
  const styles = useStyles();
36
- state.root.className = (0, _react.mergeClasses)(menuListClassNames.root, styles.root, state.root.className);
40
+ state.root.className = (0, _react.mergeClasses)(menuListClassNames.root, styles.root, state.hasMenuContext && styles.hasMenuContext, state.root.className);
37
41
  return state;
38
42
  }; //# sourceMappingURL=useMenuListStyles.styles.js.map
package/lib-commonjs/components/MenuList/useMenuListStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useMenuListStyles.styles.js"],"sourcesContent":["import { mergeClasses, __styles, shorthands } from '@griffel/react';\nexport const menuListClassNames = {\n root: 'fui-MenuList'\n};\nconst useStyles = /*#__PURE__*/__styles({\n root: {\n mc9l5x: \"f22iagw\",\n Beiy3e4: \"f1vx9l62\",\n i8kkvl: \"f16mnhsx\",\n Belr9w4: \"fbi42co\"\n }\n}, {\n d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\", \".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}\", \".fbi42co{row-gap:2px;}\"]\n});\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuListStyles_unstable = state => {\n const styles = useStyles();\n state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.root.className);\n return state;\n};\n//# sourceMappingURL=useMenuListStyles.styles.js.map"],"names":["menuListClassNames","useMenuListStyles_unstable","root","useStyles","__styles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","d","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IACaA,kBAAkB,MAAlBA;IAgBAC,0BAA0B,MAA1BA;;uBAjBsC;AAC5C,MAAMD,qBAAqB;IAChCE,MAAM;AACR;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAAwF;QAA6F;QAAqD;KAAyB;AACzQ;AAIO,MAAMR,6BAA6BS,CAAAA,QAAS;IACjD,MAAMC,SAASR;IACfO,MAAMR,IAAI,CAACU,SAAS,GAAGC,IAAAA,mBAAY,EAACb,mBAAmBE,IAAI,EAAES,OAAOT,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IAC9F,OAAOF;AACT,GACA,oDAAoD"}
1
+ {"version":3,"sources":["useMenuListStyles.styles.js"],"sourcesContent":["import { mergeClasses, __styles, shorthands } from '@griffel/react';\nexport const menuListClassNames = {\n root: 'fui-MenuList'\n};\nconst useStyles = /*#__PURE__*/__styles({\n root: {\n mc9l5x: \"f22iagw\",\n Beiy3e4: \"f1vx9l62\",\n i8kkvl: \"f16mnhsx\",\n Belr9w4: \"fbi42co\"\n },\n hasMenuContext: {\n Bqenvij: \"f1l02sjl\"\n }\n}, {\n d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\", \".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}\", \".fbi42co{row-gap:2px;}\", \".f1l02sjl{height:100%;}\"]\n});\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuListStyles_unstable = state => {\n const styles = useStyles();\n state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.hasMenuContext && styles.hasMenuContext, state.root.className);\n return state;\n};\n//# sourceMappingURL=useMenuListStyles.styles.js.map"],"names":["menuListClassNames","useMenuListStyles_unstable","root","useStyles","__styles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","hasMenuContext","Bqenvij","d","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IACaA,kBAAkB,MAAlBA;IAmBAC,0BAA0B,MAA1BA;;uBApBsC;AAC5C,MAAMD,qBAAqB;IAChCE,MAAM;AACR;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;IACX;IACAC,gBAAgB;QACdC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAAwF;QAA6F;QAAqD;QAA0B;KAA0B;AACpS;AAIO,MAAMV,6BAA6BW,CAAAA,QAAS;IACjD,MAAMC,SAASV;IACfS,MAAMV,IAAI,CAACY,SAAS,GAAGC,IAAAA,mBAAY,EAACf,mBAAmBE,IAAI,EAAEW,OAAOX,IAAI,EAAEU,MAAMH,cAAc,IAAII,OAAOJ,cAAc,EAAEG,MAAMV,IAAI,CAACY,SAAS;IAC7I,OAAOF;AACT,GACA,oDAAoD"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-menu",
3
- "version": "9.11.1",
3
+ "version": "9.12.1",
4
4
  "description": "Fluent UI menu component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -40,10 +40,10 @@
40
40
  "@fluentui/react-aria": "^9.3.27",
41
41
  "@fluentui/react-context-selector": "^9.1.26",
42
42
  "@fluentui/react-icons": "^2.0.207",
43
- "@fluentui/react-portal": "^9.3.3",
44
- "@fluentui/react-positioning": "^9.8.0",
45
- "@fluentui/react-shared-contexts": "^9.6.0",
46
- "@fluentui/react-tabster": "^9.11.0",
43
+ "@fluentui/react-portal": "^9.3.4",
44
+ "@fluentui/react-positioning": "^9.9.1",
45
+ "@fluentui/react-shared-contexts": "^9.7.0",
46
+ "@fluentui/react-tabster": "^9.11.1",
47
47
  "@fluentui/react-theme": "^9.1.9",
48
48
  "@fluentui/react-utilities": "^9.10.1",
49
49
  "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",