@fluentui/react-menu 9.1.0 → 9.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (35) hide show
  1. package/CHANGELOG.json +22 -1
  2. package/CHANGELOG.md +12 -2
  3. package/dist/index.d.ts +11 -19
  4. package/lib/components/Menu/Menu.types.js.map +1 -1
  5. package/lib/components/Menu/useMenu.js +4 -6
  6. package/lib/components/Menu/useMenu.js.map +1 -1
  7. package/lib/components/MenuItem/MenuItem.types.js.map +1 -1
  8. package/lib/components/MenuItem/useCharacterSearch.js +2 -4
  9. package/lib/components/MenuItem/useCharacterSearch.js.map +1 -1
  10. package/lib/components/MenuItem/useMenuItem.js +58 -72
  11. package/lib/components/MenuItem/useMenuItem.js.map +1 -1
  12. package/lib/components/MenuItem/useMenuItemStyles.js +22 -2
  13. package/lib/components/MenuItem/useMenuItemStyles.js.map +1 -1
  14. package/lib/components/MenuItemCheckbox/useMenuItemCheckbox.js +25 -27
  15. package/lib/components/MenuItemCheckbox/useMenuItemCheckbox.js.map +1 -1
  16. package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.js.map +1 -1
  17. package/lib/components/MenuItemRadio/useMenuItemRadio.js +24 -30
  18. package/lib/components/MenuItemRadio/useMenuItemRadio.js.map +1 -1
  19. package/lib/components/MenuItemRadio/useMenuItemRadioStyles.js.map +1 -1
  20. package/lib/selectable/types.js.map +1 -1
  21. package/lib-commonjs/components/Menu/useMenu.js +5 -6
  22. package/lib-commonjs/components/Menu/useMenu.js.map +1 -1
  23. package/lib-commonjs/components/MenuItem/useCharacterSearch.js +2 -4
  24. package/lib-commonjs/components/MenuItem/useCharacterSearch.js.map +1 -1
  25. package/lib-commonjs/components/MenuItem/useMenuItem.js +59 -71
  26. package/lib-commonjs/components/MenuItem/useMenuItem.js.map +1 -1
  27. package/lib-commonjs/components/MenuItem/useMenuItemStyles.js +22 -2
  28. package/lib-commonjs/components/MenuItem/useMenuItemStyles.js.map +1 -1
  29. package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckbox.js +26 -28
  30. package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckbox.js.map +1 -1
  31. package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.js.map +1 -1
  32. package/lib-commonjs/components/MenuItemRadio/useMenuItemRadio.js +25 -31
  33. package/lib-commonjs/components/MenuItemRadio/useMenuItemRadio.js.map +1 -1
  34. package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.js.map +1 -1
  35. package/package.json +2 -2
@@ -45,6 +45,26 @@ const useStyles = /*#__PURE__*/__styles({
45
45
  "B2fkz8r": ["fjebp7m", "f1m6puf8"],
46
46
  "B0gbj9w": ["f1m6puf8", "fjebp7m"]
47
47
  },
48
+ "resetButton": {
49
+ "B7ck84d": "f1e4lqlz",
50
+ "De3pzq": "f1u2r49w",
51
+ "sj55zd": "f1ym3bx4",
52
+ "Bahqtrf": "f1mo0ibp",
53
+ "Be2twd7": "fjoy568",
54
+ "Bg96gwp": "fytdu2e",
55
+ "g2u3we": "f1p3nwhy",
56
+ "h3c5rm": ["f11589ue", "f1pdflbu"],
57
+ "B9xav0g": "f1q5o8ev",
58
+ "zhjwy3": ["f1pdflbu", "f11589ue"],
59
+ "B68tc82": "f1mtd64y",
60
+ "Bmxbyg5": "f1y7q3j9",
61
+ "z8tnut": "f1g0x7ka",
62
+ "z189sj": ["fhxju0i", "f1cnd47f"],
63
+ "Byoj8tv": "f1qch9an",
64
+ "uwmqm3": ["f1cnd47f", "fhxju0i"],
65
+ "Bv0vk6g": "f37px4s",
66
+ "fsow6f": "fgusgyc"
67
+ },
48
68
  "root": {
49
69
  "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
50
70
  "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
@@ -108,7 +128,7 @@ const useStyles = /*#__PURE__*/__styles({
108
128
  }, {
109
129
  "f": [".ftqa4ok:focus{outline-style:none;}", ".fc1cou1:focus{color:var(--colorNeutralForeground3Hover);}", ".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}"],
110
130
  "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
111
- "d": [".f9sgzds.fui-focus-visible{border-top-color:transparent;}", ".fut1j4r.fui-focus-visible{border-right-color:transparent;}", ".fkf1fqv.fui-focus-visible{border-left-color:transparent;}", ".f1t0sa4d.fui-focus-visible{border-bottom-color:transparent;}", ".f1m3tk81.fui-focus-visible::after{content:\"\";}", ".f1pr2mxm.fui-focus-visible::after{position:absolute;}", ".f29vp72.fui-focus-visible::after{pointer-events:none;}", ".f1b5h9zn.fui-focus-visible::after{z-index:1;}", ".f1ltau7e.fui-focus-visible::after{border-top-style:solid;}", ".f18ihh6m.fui-focus-visible::after{border-right-style:solid;}", ".fzaptb5.fui-focus-visible::after{border-left-style:solid;}", ".f1or3dzb.fui-focus-visible::after{border-bottom-style:solid;}", ".fciubpk.fui-focus-visible::after{border-top-width:2px;}", ".fzvtil0.fui-focus-visible::after{border-right-width:2px;}", ".f1e7tdtt.fui-focus-visible::after{border-left-width:2px;}", ".f14oz5ke.fui-focus-visible::after{border-bottom-width:2px;}", ".f1clxaxy.fui-focus-visible::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1pefego.fui-focus-visible::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1e14n0d.fui-focus-visible::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f19um3kx.fui-focus-visible::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1a5bpr6.fui-focus-visible::after{border-top-color:var(--colorStrokeFocus2);}", ".fjsutlp.fui-focus-visible::after{border-right-color:var(--colorStrokeFocus2);}", ".f1fz4ffz.fui-focus-visible::after{border-left-color:var(--colorStrokeFocus2);}", ".f11bfvwp.fui-focus-visible::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f1hebwof.fui-focus-visible::after{top:-2px;}", ".f19pyrw2.fui-focus-visible::after{bottom:-2px;}", ".fjebp7m.fui-focus-visible::after{left:-2px;}", ".f1m6puf8.fui-focus-visible::after{right:-2px;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".f1d2rq10{height:32px;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1k6fduh{cursor:pointer;}", ".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f161knb0{padding-left:2px;}", ".f12huiiw{padding-right:2px;}", ".f3rmtva{background-color:transparent;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fe5j1ua{font-size:20px;}", ".fez10in{line-height:0;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
131
+ "d": [".f9sgzds.fui-focus-visible{border-top-color:transparent;}", ".fut1j4r.fui-focus-visible{border-right-color:transparent;}", ".fkf1fqv.fui-focus-visible{border-left-color:transparent;}", ".f1t0sa4d.fui-focus-visible{border-bottom-color:transparent;}", ".f1m3tk81.fui-focus-visible::after{content:\"\";}", ".f1pr2mxm.fui-focus-visible::after{position:absolute;}", ".f29vp72.fui-focus-visible::after{pointer-events:none;}", ".f1b5h9zn.fui-focus-visible::after{z-index:1;}", ".f1ltau7e.fui-focus-visible::after{border-top-style:solid;}", ".f18ihh6m.fui-focus-visible::after{border-right-style:solid;}", ".fzaptb5.fui-focus-visible::after{border-left-style:solid;}", ".f1or3dzb.fui-focus-visible::after{border-bottom-style:solid;}", ".fciubpk.fui-focus-visible::after{border-top-width:2px;}", ".fzvtil0.fui-focus-visible::after{border-right-width:2px;}", ".f1e7tdtt.fui-focus-visible::after{border-left-width:2px;}", ".f14oz5ke.fui-focus-visible::after{border-bottom-width:2px;}", ".f1clxaxy.fui-focus-visible::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1pefego.fui-focus-visible::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1e14n0d.fui-focus-visible::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f19um3kx.fui-focus-visible::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1a5bpr6.fui-focus-visible::after{border-top-color:var(--colorStrokeFocus2);}", ".fjsutlp.fui-focus-visible::after{border-right-color:var(--colorStrokeFocus2);}", ".f1fz4ffz.fui-focus-visible::after{border-left-color:var(--colorStrokeFocus2);}", ".f11bfvwp.fui-focus-visible::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f1hebwof.fui-focus-visible::after{top:-2px;}", ".f19pyrw2.fui-focus-visible::after{bottom:-2px;}", ".fjebp7m.fui-focus-visible::after{left:-2px;}", ".f1m6puf8.fui-focus-visible::after{right:-2px;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".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);}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".f1d2rq10{height:32px;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1k6fduh{cursor:pointer;}", ".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f161knb0{padding-left:2px;}", ".f12huiiw{padding-right:2px;}", ".f3rmtva{background-color:transparent;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fe5j1ua{font-size:20px;}", ".fez10in{line-height:0;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
112
132
  "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);}"]
113
133
  });
114
134
  /** Applies style classnames to slots */
@@ -116,7 +136,7 @@ const useStyles = /*#__PURE__*/__styles({
116
136
 
117
137
  export const useMenuItemStyles_unstable = state => {
118
138
  const styles = useStyles();
119
- state.root.className = mergeClasses(menuItemClassNames.root, styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);
139
+ state.root.className = mergeClasses(menuItemClassNames.root, state.isNativeButton && styles.resetButton, styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);
120
140
 
121
141
  if (state.content) {
122
142
  state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);
@@ -1 +1 @@
1
- {"version":3,"sources":["components/MenuItem/useMenuItemStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,YAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,mBAAT,EAA8B,oBAA9B,QAA0D,uBAA1D;AACA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,2BAAT,QAA4C,wBAA5C;AAKA,OAAO,MAAM,kBAAkB,GAAkC;EAC/D,IAAI,EAAE,cADyD;EAE/D,IAAI,EAAE,oBAFyD;EAG/D,SAAS,EAAE,yBAHoD;EAI/D,gBAAgB,EAAE,gCAJ6C;EAK/D,OAAO,EAAE,uBALsD;EAM/D,gBAAgB,EAAE;AAN6C,CAA1D;;AASP,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA,EAAlB;AAgFA;;;AACA,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAAyB;EACjE,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,kBAAkB,CAAC,IADc,EAEjC,MAAM,CAAC,IAF0B,EAGjC,MAAM,CAAC,cAH0B,EAIjC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAJQ,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;;EAQA,IAAI,KAAK,CAAC,OAAV,EAAmB;IACjB,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,kBAAkB,CAAC,OAApB,EAA6B,MAAM,CAAC,OAApC,EAA6C,KAAK,CAAC,OAAN,CAAc,SAA3D,CAAtC;EACD;;EAED,IAAI,KAAK,CAAC,SAAV,EAAqB;IACnB,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CAAC,kBAAkB,CAAC,SAApB,EAA+B,KAAK,CAAC,SAAN,CAAgB,SAA/C,CAAxC;EACD;;EAED,IAAI,KAAK,CAAC,gBAAV,EAA4B;IAC1B,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAC7C,kBAAkB,CAAC,gBAD0B,EAE7C,CAAC,KAAK,CAAC,QAAP,IAAmB,MAAM,CAAC,gBAFmB,EAG7C,KAAK,CAAC,gBAAN,CAAuB,SAHsB,CAA/C;EAKD;;EAED,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,kBAAkB,CAAC,IAApB,EAA0B,MAAM,CAAC,IAAjC,EAAuC,KAAK,CAAC,IAAN,CAAW,SAAlD,CAAnC;EACD;;EAED,IAAI,KAAK,CAAC,gBAAV,EAA4B;IAC1B,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAC7C,kBAAkB,CAAC,gBAD0B,EAE7C,MAAM,CAAC,gBAFsC,EAG7C,KAAK,CAAC,gBAAN,CAAuB,SAHsB,CAA/C;EAKD;;EACD,2BAA2B,CAAC,KAAD,CAA3B;AACD,CAtCM","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';\nimport { MenuItemCheckboxState } from '../MenuItemCheckbox/index';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuItemClassNames: SlotClassNames<MenuItemSlots> = {\n root: 'fui-MenuItem',\n icon: 'fui-MenuItem__icon',\n checkmark: 'fui-MenuItem__checkmark',\n submenuIndicator: 'fui-MenuItem__submenuIndicator',\n content: 'fui-MenuItem__content',\n secondaryContent: 'fui-MenuItem__secondaryContent',\n};\n\nconst useStyles = makeStyles({\n focusIndicator: createFocusOutlineStyle(),\n root: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n position: 'relative',\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackground1,\n paddingRight: '10px',\n paddingLeft: '10px',\n height: '32px',\n display: 'flex',\n alignItems: 'center',\n fontSize: tokens.fontSizeBase300,\n cursor: 'pointer',\n ...shorthands.gap('4px'),\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground2Hover,\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n [`& .${menuItemClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n },\n\n userSelect: 'none',\n },\n content: {\n paddingLeft: '2px',\n paddingRight: '2px',\n backgroundColor: 'transparent',\n flexGrow: 1,\n },\n secondaryContent: {\n paddingLeft: '2px',\n paddingRight: '2px',\n color: tokens.colorNeutralForeground3,\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n },\n ':focus': {\n color: tokens.colorNeutralForeground3Hover,\n },\n },\n icon: {\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n },\n submenuIndicator: {\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':focus': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = (state: MenuItemState) => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n menuItemClassNames.root,\n styles.root,\n styles.focusIndicator,\n state.disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.content) {\n state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);\n }\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemClassNames.secondaryContent,\n !state.disabled && styles.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);\n }\n\n if (state.submenuIndicator) {\n state.submenuIndicator.className = mergeClasses(\n menuItemClassNames.submenuIndicator,\n styles.submenuIndicator,\n state.submenuIndicator.className,\n );\n }\n useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/MenuItem/useMenuItemStyles.ts"],"names":[],"mappings":"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","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';\nimport type { MenuItemCheckboxState } from '../MenuItemCheckbox/index';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuItemClassNames: SlotClassNames<MenuItemSlots> = {\n root: 'fui-MenuItem',\n icon: 'fui-MenuItem__icon',\n checkmark: 'fui-MenuItem__checkmark',\n submenuIndicator: 'fui-MenuItem__submenuIndicator',\n content: 'fui-MenuItem__content',\n secondaryContent: 'fui-MenuItem__secondaryContent',\n};\n\nconst useStyles = makeStyles({\n focusIndicator: createFocusOutlineStyle(),\n // TODO: this should be extracted to another package\n resetButton: {\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n lineHeight: 'normal',\n ...shorthands.borderColor('transparent'),\n ...shorthands.overflow('visible'),\n ...shorthands.padding(0),\n WebkitAppearance: 'button',\n textAlign: 'unset',\n },\n root: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n position: 'relative',\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackground1,\n paddingRight: '10px',\n paddingLeft: '10px',\n height: '32px',\n display: 'flex',\n alignItems: 'center',\n fontSize: tokens.fontSizeBase300,\n cursor: 'pointer',\n ...shorthands.gap('4px'),\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground2Hover,\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n [`& .${menuItemClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n },\n\n userSelect: 'none',\n },\n content: {\n paddingLeft: '2px',\n paddingRight: '2px',\n backgroundColor: 'transparent',\n flexGrow: 1,\n },\n secondaryContent: {\n paddingLeft: '2px',\n paddingRight: '2px',\n color: tokens.colorNeutralForeground3,\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n },\n ':focus': {\n color: tokens.colorNeutralForeground3Hover,\n },\n },\n icon: {\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n },\n submenuIndicator: {\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':focus': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = (state: MenuItemState) => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n menuItemClassNames.root,\n state.isNativeButton && styles.resetButton,\n styles.root,\n styles.focusIndicator,\n state.disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.content) {\n state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);\n }\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemClassNames.secondaryContent,\n !state.disabled && styles.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);\n }\n\n if (state.submenuIndicator) {\n state.submenuIndicator.className = mergeClasses(\n menuItemClassNames.submenuIndicator,\n styles.submenuIndicator,\n state.submenuIndicator.className,\n );\n }\n useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n};\n"],"sourceRoot":"../src/"}
@@ -6,41 +6,39 @@ import { useMenuItem_unstable } from '../MenuItem/useMenuItem';
6
6
  /** Returns the props and state required to render the component */
7
7
 
8
8
  export const useMenuItemCheckbox_unstable = (props, ref) => {
9
- const state = useMenuItem_unstable({
10
- role: 'menuitemcheckbox',
11
- persistOnClick: true,
12
- ...props,
13
- checkmark: resolveShorthand(props.checkmark, {
14
- defaultProps: {
15
- children: /*#__PURE__*/React.createElement(Checkmark16Filled, null)
16
- },
17
- required: true
18
- })
19
- }, ref);
20
9
  const toggleCheckbox = useMenuListContext_unstable(context => context.toggleCheckbox);
21
10
  const {
22
- onClick: onClickOriginal
23
- } = state.root;
11
+ name,
12
+ value
13
+ } = props;
24
14
  const checked = useMenuListContext_unstable(context => {
25
15
  var _a;
26
16
 
27
- const checkedItems = ((_a = context.checkedValues) === null || _a === void 0 ? void 0 : _a[state.name]) || [];
28
- return checkedItems.indexOf(state.value) !== -1;
17
+ const checkedItems = ((_a = context.checkedValues) === null || _a === void 0 ? void 0 : _a[name]) || [];
18
+ return checkedItems.indexOf(value) !== -1;
29
19
  });
30
- state.checked = checked;
31
- state.root['aria-checked'] = state.checked; // MenuItem state already transforms keyDown to click events
20
+ const state = { ...useMenuItem_unstable({
21
+ role: 'menuitemcheckbox',
22
+ persistOnClick: true,
23
+ ...props,
24
+ 'aria-checked': checked,
25
+ checkmark: resolveShorthand(props.checkmark, {
26
+ defaultProps: {
27
+ children: /*#__PURE__*/React.createElement(Checkmark16Filled, null)
28
+ },
29
+ required: true
30
+ }),
31
+ onClick: e => {
32
+ var _a;
32
33
 
33
- state.root.onClick = e => {
34
- if (state.disabled) {
35
- e.preventDefault();
36
- e.stopPropagation();
37
- return;
38
- }
39
-
40
- toggleCheckbox === null || toggleCheckbox === void 0 ? void 0 : toggleCheckbox(e, state.name, state.value, state.checked);
41
- onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);
34
+ toggleCheckbox === null || toggleCheckbox === void 0 ? void 0 : toggleCheckbox(e, name, value, checked);
35
+ (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
36
+ }
37
+ }, ref),
38
+ name,
39
+ value,
40
+ checked
42
41
  };
43
-
44
42
  return state;
45
43
  };
46
44
  //# sourceMappingURL=useMenuItemCheckbox.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["components/MenuItemCheckbox/useMenuItemCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,iBAAT,QAAkC,uBAAlC;AACA,SAAS,2BAAT,QAA4C,gCAA5C;AACA,SAAS,oBAAT,QAAqC,yBAArC;AAGA;;AACA,OAAO,MAAM,4BAA4B,GAAG,CAC1C,KAD0C,EAE1C,GAF0C,KAGjB;EACzB,MAAM,KAAK,GAAG,oBAAoB,CAChC;IACE,IAAI,EAAE,kBADR;IAEE,cAAc,EAAE,IAFlB;IAGE,GAAG,KAHL;IAIE,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,SAAP,EAAkB;MAC3C,YAAY,EAAE;QAAE,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,iBAAD,EAAkB,IAAlB;MAAZ,CAD6B;MAE3C,QAAQ,EAAE;IAFiC,CAAlB;EAJ7B,CADgC,EAUhC,GAVgC,CAAlC;EAaA,MAAM,cAAc,GAAG,2BAA2B,CAAC,OAAO,IAAI,OAAO,CAAC,cAApB,CAAlD;EACA,MAAM;IAAE,OAAO,EAAE;EAAX,IAA+B,KAAK,CAAC,IAA3C;EACA,MAAM,OAAO,GAAG,2BAA2B,CAAC,OAAO,IAAG;;;IACpD,MAAM,YAAY,GAAG,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAR,MAAqB,IAArB,IAAqB,EAAA,KAAA,KAAA,CAArB,GAAqB,KAAA,CAArB,GAAqB,EAAA,CAAG,KAAK,CAAC,IAAT,CAArB,KAAuC,EAA5D;IACA,OAAO,YAAY,CAAC,OAAb,CAAqB,KAAK,CAAC,KAA3B,MAAsC,CAAC,CAA9C;EACD,CAH0C,CAA3C;EAKA,KAAK,CAAC,OAAN,GAAgB,OAAhB;EACA,KAAK,CAAC,IAAN,CAAW,cAAX,IAA6B,KAAK,CAAC,OAAnC,CAtByB,CAwBzB;;EACA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,CAAC,IAAG;IACvB,IAAI,KAAK,CAAC,QAAV,EAAoB;MAClB,CAAC,CAAC,cAAF;MACA,CAAC,CAAC,eAAF;MACA;IACD;;IAED,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAd;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CATD;;EAWA,OAAO,KAAP;AACD,CAxCM","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { Checkmark16Filled } from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport type { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';\n\n/** Returns the props and state required to render the component */\nexport const useMenuItemCheckbox_unstable = (\n props: MenuItemCheckboxProps,\n ref: React.Ref<HTMLElement>,\n): MenuItemCheckboxState => {\n const state = useMenuItem_unstable(\n {\n role: 'menuitemcheckbox',\n persistOnClick: true,\n ...props,\n checkmark: resolveShorthand(props.checkmark, {\n defaultProps: { children: <Checkmark16Filled /> },\n required: true,\n }),\n },\n ref,\n ) as MenuItemCheckboxState;\n\n const toggleCheckbox = useMenuListContext_unstable(context => context.toggleCheckbox);\n const { onClick: onClickOriginal } = state.root;\n const checked = useMenuListContext_unstable(context => {\n const checkedItems = context.checkedValues?.[state.name] || [];\n return checkedItems.indexOf(state.value) !== -1;\n });\n\n state.checked = checked;\n state.root['aria-checked'] = state.checked;\n\n // MenuItem state already transforms keyDown to click events\n state.root.onClick = e => {\n if (state.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n toggleCheckbox?.(e, state.name, state.value, state.checked);\n onClickOriginal?.(e);\n };\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/MenuItemCheckbox/useMenuItemCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,iBAAT,QAAkC,uBAAlC;AACA,SAAS,2BAAT,QAA4C,gCAA5C;AACA,SAAS,oBAAT,QAAqC,yBAArC;AAIA;;AACA,OAAO,MAAM,4BAA4B,GAAG,CAC1C,KAD0C,EAE1C,GAF0C,KAGjB;EACzB,MAAM,cAAc,GAAG,2BAA2B,CAAC,OAAO,IAAI,OAAO,CAAC,cAApB,CAAlD;EACA,MAAM;IAAE,IAAF;IAAQ;EAAR,IAAkB,KAAxB;EAEA,MAAM,OAAO,GAAG,2BAA2B,CAAC,OAAO,IAAG;;;IACpD,MAAM,YAAY,GAAG,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAR,MAAqB,IAArB,IAAqB,EAAA,KAAA,KAAA,CAArB,GAAqB,KAAA,CAArB,GAAqB,EAAA,CAAG,IAAH,CAArB,KAAiC,EAAtD;IACA,OAAO,YAAY,CAAC,OAAb,CAAqB,KAArB,MAAgC,CAAC,CAAxC;EACD,CAH0C,CAA3C;EAKA,MAAM,KAAK,GAA0B,EACnC,GAAG,oBAAoB,CACrB;MACE,IAAI,EAAE,kBADR;MAEE,cAAc,EAAE,IAFlB;MAGE,GAAG,KAHL;MAIE,gBAAgB,OAJlB;MAKE,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,SAAP,EAAkB;QAC3C,YAAY,EAAE;UAAE,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,iBAAD,EAAkB,IAAlB;QAAZ,CAD6B;QAE3C,QAAQ,EAAE;MAFiC,CAAlB,CAL7B;MASE,OAAO,EAAG,CAAD,IAA8D;;;QACrE,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAG,CAAH,EAAM,IAAN,EAAY,KAAZ,EAAmB,OAAnB,CAAd;QACA,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAa,EAAA,CAAA,IAAA,CAAb,KAAa,EAAG,CAAH,CAAb;MACD;IAZH,CADqB,EAerB,GAfqB,CADY;IAkBnC,IAlBmC;IAmBnC,KAnBmC;IAoBnC;EApBmC,CAArC;EAuBA,OAAO,KAAP;AACD,CApCM","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { Checkmark16Filled } from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport type { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';\nimport type { ARIAButtonElement, ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\n/** Returns the props and state required to render the component */\nexport const useMenuItemCheckbox_unstable = (\n props: MenuItemCheckboxProps,\n ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemCheckboxState => {\n const toggleCheckbox = useMenuListContext_unstable(context => context.toggleCheckbox);\n const { name, value } = props;\n\n const checked = useMenuListContext_unstable(context => {\n const checkedItems = context.checkedValues?.[name] || [];\n return checkedItems.indexOf(value) !== -1;\n });\n\n const state: MenuItemCheckboxState = {\n ...useMenuItem_unstable(\n {\n role: 'menuitemcheckbox',\n persistOnClick: true,\n ...props,\n 'aria-checked': checked,\n checkmark: resolveShorthand(props.checkmark, {\n defaultProps: { children: <Checkmark16Filled /> },\n required: true,\n }),\n onClick: (e: React.MouseEvent<ARIAButtonElementIntersection<'div'>>) => {\n toggleCheckbox?.(e, name, value, checked);\n props.onClick?.(e);\n },\n },\n ref,\n ),\n name,\n value,\n checked,\n };\n\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts"],"names":[],"mappings":"AACA,SAAS,YAAT,QAA6B,gBAA7B;AACA,SAAS,2BAAT,QAA4C,wBAA5C;AAEA,SAAS,0BAAT,QAA2C,+BAA3C;AAGA,OAAO,MAAM,0BAA0B,GAA4D;EACjG,IAAI,EAAE,sBAD2F;EAEjG,IAAI,EAAE,4BAF2F;EAGjG,SAAS,EAAE,iCAHsF;EAIjG,OAAO,EAAE,+BAJwF;EAKjG,gBAAgB,EAAE;AAL+E,CAA5F;AAQP,OAAO,MAAM,kCAAkC,GAAI,KAAD,IAAiC;EACjF,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,0BAA0B,CAAC,IAA5B,EAAkC,KAAK,CAAC,IAAN,CAAW,SAA7C,CAAnC;;EAEA,IAAI,KAAK,CAAC,OAAV,EAAmB;IACjB,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,0BAA0B,CAAC,OAA5B,EAAqC,KAAK,CAAC,OAAN,CAAc,SAAnD,CAAtC;EACD;;EAED,IAAI,KAAK,CAAC,gBAAV,EAA4B;IAC1B,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAC7C,0BAA0B,CAAC,gBADkB,EAE7C,KAAK,CAAC,gBAAN,CAAuB,SAFsB,CAA/C;EAID;;EAED,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,0BAA0B,CAAC,IAA5B,EAAkC,KAAK,CAAC,IAAN,CAAW,SAA7C,CAAnC;EACD;;EAED,IAAI,KAAK,CAAC,SAAV,EAAqB;IACnB,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CAAC,0BAA0B,CAAC,SAA5B,EAAuC,KAAK,CAAC,SAAN,CAAgB,SAAvD,CAAxC;EACD;;EAED,0BAA0B,CAAC,KAAD,CAA1B;EACA,2BAA2B,CAAC,KAAD,CAA3B;AACD,CAxBM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { MenuItemSlots } from '../index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';\nimport type { MenuItemCheckboxState } from './MenuItemCheckbox.types';\n\nexport const menuItemCheckboxClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {\n root: 'fui-MenuItemCheckbox',\n icon: 'fui-MenuItemCheckbox__icon',\n checkmark: 'fui-MenuItemCheckbox__checkmark',\n content: 'fui-MenuItemCheckbox__content',\n secondaryContent: 'fui-MenuItemCheckbox__secondaryContent',\n};\n\nexport const useMenuItemCheckboxStyles_unstable = (state: MenuItemCheckboxState) => {\n state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);\n\n if (state.content) {\n state.content.className = mergeClasses(menuItemCheckboxClassNames.content, state.content.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemCheckboxClassNames.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemCheckboxClassNames.icon, state.icon.className);\n }\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);\n }\n\n useMenuItemStyles_unstable(state);\n useCheckmarkStyles_unstable(state);\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,QAA6B,gBAA7B;AACA,SAAS,2BAAT,QAA4C,wBAA5C;AACA,SAAS,0BAAT,QAA2C,+BAA3C;AAKA,OAAO,MAAM,0BAA0B,GAA4D;EACjG,IAAI,EAAE,sBAD2F;EAEjG,IAAI,EAAE,4BAF2F;EAGjG,SAAS,EAAE,iCAHsF;EAIjG,OAAO,EAAE,+BAJwF;EAKjG,gBAAgB,EAAE;AAL+E,CAA5F;AAQP,OAAO,MAAM,kCAAkC,GAAI,KAAD,IAAiC;EACjF,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,0BAA0B,CAAC,IAA5B,EAAkC,KAAK,CAAC,IAAN,CAAW,SAA7C,CAAnC;;EAEA,IAAI,KAAK,CAAC,OAAV,EAAmB;IACjB,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,0BAA0B,CAAC,OAA5B,EAAqC,KAAK,CAAC,OAAN,CAAc,SAAnD,CAAtC;EACD;;EAED,IAAI,KAAK,CAAC,gBAAV,EAA4B;IAC1B,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAC7C,0BAA0B,CAAC,gBADkB,EAE7C,KAAK,CAAC,gBAAN,CAAuB,SAFsB,CAA/C;EAID;;EAED,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,0BAA0B,CAAC,IAA5B,EAAkC,KAAK,CAAC,IAAN,CAAW,SAA7C,CAAnC;EACD;;EAED,IAAI,KAAK,CAAC,SAAV,EAAqB;IACnB,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CAAC,0BAA0B,CAAC,SAA5B,EAAuC,KAAK,CAAC,SAAN,CAAgB,SAAvD,CAAxC;EACD;;EAED,0BAA0B,CAAC,KAAD,CAA1B;EACA,2BAA2B,CAAC,KAAD,CAA3B;AACD,CAxBM","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuItemSlots } from '../index';\nimport type { MenuItemCheckboxState } from './MenuItemCheckbox.types';\n\nexport const menuItemCheckboxClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {\n root: 'fui-MenuItemCheckbox',\n icon: 'fui-MenuItemCheckbox__icon',\n checkmark: 'fui-MenuItemCheckbox__checkmark',\n content: 'fui-MenuItemCheckbox__content',\n secondaryContent: 'fui-MenuItemCheckbox__secondaryContent',\n};\n\nexport const useMenuItemCheckboxStyles_unstable = (state: MenuItemCheckboxState) => {\n state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);\n\n if (state.content) {\n state.content.className = mergeClasses(menuItemCheckboxClassNames.content, state.content.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemCheckboxClassNames.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemCheckboxClassNames.icon, state.icon.className);\n }\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);\n }\n\n useMenuItemStyles_unstable(state);\n useCheckmarkStyles_unstable(state);\n};\n"],"sourceRoot":"../src/"}
@@ -8,42 +8,36 @@ import { useMenuItem_unstable } from '../MenuItem/useMenuItem';
8
8
  */
9
9
 
10
10
  export const useMenuItemRadio_unstable = (props, ref) => {
11
- const radioProps = {
12
- role: 'menuitemradio'
13
- };
14
- const state = useMenuItem_unstable({ ...radioProps,
15
- ...props,
16
- checkmark: resolveShorthand(props.checkmark, {
17
- defaultProps: {
18
- children: /*#__PURE__*/React.createElement(Checkmark16Filled, null)
19
- },
20
- required: true
21
- })
22
- }, ref);
23
- const selectRadio = useMenuListContext_unstable(context => context.selectRadio);
24
11
  const {
25
- onClick: onClickOriginal
26
- } = state.root;
12
+ name,
13
+ value
14
+ } = props;
27
15
  const checked = useMenuListContext_unstable(context => {
28
16
  var _a;
29
17
 
30
- const checkedItems = ((_a = context.checkedValues) === null || _a === void 0 ? void 0 : _a[state.name]) || [];
31
- return checkedItems.indexOf(state.value) !== -1;
18
+ const checkedItems = ((_a = context.checkedValues) === null || _a === void 0 ? void 0 : _a[name]) || [];
19
+ return checkedItems.indexOf(value) !== -1;
32
20
  });
33
- state.checked = checked;
34
- state.root['aria-checked'] = state.checked; // MenuItem state already transforms keyDown to click events
35
-
36
- state.root.onClick = e => {
37
- if (state.disabled) {
38
- e.preventDefault();
39
- e.stopPropagation();
40
- return;
41
- }
21
+ const selectRadio = useMenuListContext_unstable(context => context.selectRadio);
22
+ return { ...useMenuItem_unstable({ ...props,
23
+ role: 'menuitemradio',
24
+ 'aria-checked': checked,
25
+ checkmark: resolveShorthand(props.checkmark, {
26
+ defaultProps: {
27
+ children: /*#__PURE__*/React.createElement(Checkmark16Filled, null)
28
+ },
29
+ required: true
30
+ }),
31
+ onClick: e => {
32
+ var _a;
42
33
 
43
- selectRadio === null || selectRadio === void 0 ? void 0 : selectRadio(e, state.name, state.value, state.checked);
44
- onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);
34
+ selectRadio === null || selectRadio === void 0 ? void 0 : selectRadio(e, name, value, checked);
35
+ (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
36
+ }
37
+ }, ref),
38
+ checked,
39
+ name,
40
+ value
45
41
  };
46
-
47
- return state;
48
42
  };
49
43
  //# sourceMappingURL=useMenuItemRadio.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["components/MenuItemRadio/useMenuItemRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,iBAAT,QAAkC,uBAAlC;AACA,SAAS,2BAAT,QAA4C,gCAA5C;AACA,SAAS,oBAAT,QAAqC,yBAArC;AAGA;;AAEG;;AACH,OAAO,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;EACtB,MAAM,UAAU,GAAG;IACjB,IAAI,EAAE;EADW,CAAnB;EAIA,MAAM,KAAK,GAAG,oBAAoB,CAChC,EACE,GAAG,UADL;IAEE,GAAG,KAFL;IAGE,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,SAAP,EAAkB;MAC3C,YAAY,EAAE;QAAE,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,iBAAD,EAAkB,IAAlB;MAAZ,CAD6B;MAE3C,QAAQ,EAAE;IAFiC,CAAlB;EAH7B,CADgC,EAShC,GATgC,CAAlC;EAYA,MAAM,WAAW,GAAG,2BAA2B,CAAC,OAAO,IAAI,OAAO,CAAC,WAApB,CAA/C;EACA,MAAM;IAAE,OAAO,EAAE;EAAX,IAA+B,KAAK,CAAC,IAA3C;EACA,MAAM,OAAO,GAAG,2BAA2B,CAAC,OAAO,IAAG;;;IACpD,MAAM,YAAY,GAAG,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAR,MAAqB,IAArB,IAAqB,EAAA,KAAA,KAAA,CAArB,GAAqB,KAAA,CAArB,GAAqB,EAAA,CAAG,KAAK,CAAC,IAAT,CAArB,KAAuC,EAA5D;IACA,OAAO,YAAY,CAAC,OAAb,CAAqB,KAAK,CAAC,KAA3B,MAAsC,CAAC,CAA9C;EACD,CAH0C,CAA3C;EAKA,KAAK,CAAC,OAAN,GAAgB,OAAhB;EACA,KAAK,CAAC,IAAN,CAAW,cAAX,IAA6B,KAAK,CAAC,OAAnC,CAzBsB,CA2BtB;;EACA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,CAAC,IAAG;IACvB,IAAI,KAAK,CAAC,QAAV,EAAoB;MAClB,CAAC,CAAC,cAAF;MACA,CAAC,CAAC,eAAF;MACA;IACD;;IAED,WAAW,KAAA,IAAX,IAAA,WAAW,KAAA,KAAA,CAAX,GAAW,KAAA,CAAX,GAAA,WAAW,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAX;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CATD;;EAWA,OAAO,KAAP;AACD,CA3CM","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { Checkmark16Filled } from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport type { MenuItemRadioProps, MenuItemRadioState } from './MenuItemRadio.types';\n\n/**\n * Given user props, returns state and render function for a MenuItemRadio.\n */\nexport const useMenuItemRadio_unstable = (\n props: MenuItemRadioProps,\n ref: React.Ref<HTMLElement>,\n): MenuItemRadioState => {\n const radioProps = {\n role: 'menuitemradio',\n };\n\n const state = useMenuItem_unstable(\n {\n ...radioProps,\n ...props,\n checkmark: resolveShorthand(props.checkmark, {\n defaultProps: { children: <Checkmark16Filled /> },\n required: true,\n }),\n },\n ref,\n ) as MenuItemRadioState;\n\n const selectRadio = useMenuListContext_unstable(context => context.selectRadio);\n const { onClick: onClickOriginal } = state.root;\n const checked = useMenuListContext_unstable(context => {\n const checkedItems = context.checkedValues?.[state.name] || [];\n return checkedItems.indexOf(state.value) !== -1;\n });\n\n state.checked = checked;\n state.root['aria-checked'] = state.checked;\n\n // MenuItem state already transforms keyDown to click events\n state.root.onClick = e => {\n if (state.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n selectRadio?.(e, state.name, state.value, state.checked);\n onClickOriginal?.(e);\n };\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/MenuItemRadio/useMenuItemRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,iBAAT,QAAkC,uBAAlC;AACA,SAAS,2BAAT,QAA4C,gCAA5C;AACA,SAAS,oBAAT,QAAqC,yBAArC;AAIA;;AAEG;;AACH,OAAO,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;EACtB,MAAM;IAAE,IAAF;IAAQ;EAAR,IAAkB,KAAxB;EAEA,MAAM,OAAO,GAAG,2BAA2B,CAAC,OAAO,IAAG;;;IACpD,MAAM,YAAY,GAAG,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAR,MAAqB,IAArB,IAAqB,EAAA,KAAA,KAAA,CAArB,GAAqB,KAAA,CAArB,GAAqB,EAAA,CAAG,IAAH,CAArB,KAAiC,EAAtD;IACA,OAAO,YAAY,CAAC,OAAb,CAAqB,KAArB,MAAgC,CAAC,CAAxC;EACD,CAH0C,CAA3C;EAKA,MAAM,WAAW,GAAG,2BAA2B,CAAC,OAAO,IAAI,OAAO,CAAC,WAApB,CAA/C;EAEA,OAAO,EACL,GAAG,oBAAoB,CACrB,EACE,GAAG,KADL;MAEE,IAAI,EAAE,eAFR;MAGE,gBAAgB,OAHlB;MAIE,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,SAAP,EAAkB;QAC3C,YAAY,EAAE;UAAE,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,iBAAD,EAAkB,IAAlB;QAAZ,CAD6B;QAE3C,QAAQ,EAAE;MAFiC,CAAlB,CAJ7B;MAQE,OAAO,EAAG,CAAD,IAA8D;;;QACrE,WAAW,KAAA,IAAX,IAAA,WAAW,KAAA,KAAA,CAAX,GAAW,KAAA,CAAX,GAAA,WAAW,CAAG,CAAH,EAAM,IAAN,EAAY,KAAZ,EAAmB,OAAnB,CAAX;QACA,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAa,EAAA,CAAA,IAAA,CAAb,KAAa,EAAG,CAAH,CAAb;MACD;IAXH,CADqB,EAcrB,GAdqB,CADlB;IAiBL,OAjBK;IAkBL,IAlBK;IAmBL;EAnBK,CAAP;AAqBD,CAlCM","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { Checkmark16Filled } from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport type { MenuItemRadioProps, MenuItemRadioState } from './MenuItemRadio.types';\nimport type { ARIAButtonElement, ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\n/**\n * Given user props, returns state and render function for a MenuItemRadio.\n */\nexport const useMenuItemRadio_unstable = (\n props: MenuItemRadioProps,\n ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemRadioState => {\n const { name, value } = props;\n\n const checked = useMenuListContext_unstable(context => {\n const checkedItems = context.checkedValues?.[name] || [];\n return checkedItems.indexOf(value) !== -1;\n });\n\n const selectRadio = useMenuListContext_unstable(context => context.selectRadio);\n\n return {\n ...useMenuItem_unstable(\n {\n ...props,\n role: 'menuitemradio',\n 'aria-checked': checked,\n checkmark: resolveShorthand(props.checkmark, {\n defaultProps: { children: <Checkmark16Filled /> },\n required: true,\n }),\n onClick: (e: React.MouseEvent<ARIAButtonElementIntersection<'div'>>) => {\n selectRadio?.(e, name, value, checked);\n props.onClick?.(e);\n },\n },\n ref,\n ),\n checked,\n name,\n value,\n };\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/MenuItemRadio/useMenuItemRadioStyles.ts"],"names":[],"mappings":"AACA,SAAS,YAAT,QAA6B,gBAA7B;AACA,SAAS,2BAAT,QAA4C,wBAA5C;AAEA,SAAS,0BAAT,QAA2C,+BAA3C;AAGA,OAAO,MAAM,uBAAuB,GAA4D;EAC9F,IAAI,EAAE,mBADwF;EAE9F,IAAI,EAAE,yBAFwF;EAG9F,SAAS,EAAE,8BAHmF;EAI9F,OAAO,EAAE,4BAJqF;EAK9F,gBAAgB,EAAE;AAL4E,CAAzF;AAQP,OAAO,MAAM,+BAA+B,GAAI,KAAD,IAA8B;EAC3E,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,uBAAuB,CAAC,IAAzB,EAA+B,KAAK,CAAC,IAAN,CAAW,SAA1C,CAAnC;;EAEA,IAAI,KAAK,CAAC,OAAV,EAAmB;IACjB,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,uBAAuB,CAAC,OAAzB,EAAkC,KAAK,CAAC,OAAN,CAAc,SAAhD,CAAtC;EACD;;EAED,IAAI,KAAK,CAAC,gBAAV,EAA4B;IAC1B,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAC7C,uBAAuB,CAAC,gBADqB,EAE7C,KAAK,CAAC,gBAAN,CAAuB,SAFsB,CAA/C;EAID;;EAED,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,uBAAuB,CAAC,IAAzB,EAA+B,KAAK,CAAC,IAAN,CAAW,SAA1C,CAAnC;EACD;;EAED,IAAI,KAAK,CAAC,SAAV,EAAqB;IACnB,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CAAC,uBAAuB,CAAC,SAAzB,EAAoC,KAAK,CAAC,SAAN,CAAgB,SAApD,CAAxC;EACD;;EAED,0BAA0B,CAAC,KAAD,CAA1B;EACA,2BAA2B,CAAC,KAAD,CAA3B;AACD,CAxBM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { MenuItemSlots } from '../index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';\nimport type { MenuItemRadioState } from './MenuItemRadio.types';\n\nexport const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {\n root: 'fui-MenuItemRadio',\n icon: 'fui-MenuItemRadio__icon',\n checkmark: 'fui-MenuItemRadio__checkmark',\n content: 'fui-MenuItemRadio__content',\n secondaryContent: 'fui-MenuItemRadio__secondaryContent',\n};\n\nexport const useMenuItemRadioStyles_unstable = (state: MenuItemRadioState) => {\n state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);\n\n if (state.content) {\n state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemRadioClassNames.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);\n }\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);\n }\n\n useMenuItemStyles_unstable(state);\n useCheckmarkStyles_unstable(state);\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/MenuItemRadio/useMenuItemRadioStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,QAA6B,gBAA7B;AACA,SAAS,2BAAT,QAA4C,wBAA5C;AACA,SAAS,0BAAT,QAA2C,+BAA3C;AAKA,OAAO,MAAM,uBAAuB,GAA4D;EAC9F,IAAI,EAAE,mBADwF;EAE9F,IAAI,EAAE,yBAFwF;EAG9F,SAAS,EAAE,8BAHmF;EAI9F,OAAO,EAAE,4BAJqF;EAK9F,gBAAgB,EAAE;AAL4E,CAAzF;AAQP,OAAO,MAAM,+BAA+B,GAAI,KAAD,IAA8B;EAC3E,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,uBAAuB,CAAC,IAAzB,EAA+B,KAAK,CAAC,IAAN,CAAW,SAA1C,CAAnC;;EAEA,IAAI,KAAK,CAAC,OAAV,EAAmB;IACjB,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,uBAAuB,CAAC,OAAzB,EAAkC,KAAK,CAAC,OAAN,CAAc,SAAhD,CAAtC;EACD;;EAED,IAAI,KAAK,CAAC,gBAAV,EAA4B;IAC1B,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAC7C,uBAAuB,CAAC,gBADqB,EAE7C,KAAK,CAAC,gBAAN,CAAuB,SAFsB,CAA/C;EAID;;EAED,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,uBAAuB,CAAC,IAAzB,EAA+B,KAAK,CAAC,IAAN,CAAW,SAA1C,CAAnC;EACD;;EAED,IAAI,KAAK,CAAC,SAAV,EAAqB;IACnB,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CAAC,uBAAuB,CAAC,SAAzB,EAAoC,KAAK,CAAC,SAAN,CAAgB,SAApD,CAAxC;EACD;;EAED,0BAA0B,CAAC,KAAD,CAA1B;EACA,2BAA2B,CAAC,KAAD,CAA3B;AACD,CAxBM","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuItemSlots } from '../index';\nimport type { MenuItemRadioState } from './MenuItemRadio.types';\n\nexport const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {\n root: 'fui-MenuItemRadio',\n icon: 'fui-MenuItemRadio__icon',\n checkmark: 'fui-MenuItemRadio__checkmark',\n content: 'fui-MenuItemRadio__content',\n secondaryContent: 'fui-MenuItemRadio__secondaryContent',\n};\n\nexport const useMenuItemRadioStyles_unstable = (state: MenuItemRadioState) => {\n state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);\n\n if (state.content) {\n state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemRadioClassNames.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);\n }\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);\n }\n\n useMenuItemStyles_unstable(state);\n useCheckmarkStyles_unstable(state);\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sourceRoot":"../src/","sources":["selectable/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\nexport type SelectableHandler = (\n e: React.MouseEvent | React.KeyboardEvent,\n name: string,\n value: string,\n checked: boolean,\n) => void;\n\n/**\n * Props for selecatble menu items\n */\nexport type MenuItemSelectableProps = {\n /**\n * Follows input convention\n * https://www.w3schools.com/jsref/prop_checkbox_name.asp\n */\n name: string;\n\n /**\n * Follows input convention\n * https://www.w3schools.com/jsref/prop_checkbox_value.asp\n */\n value: string;\n};\n\n/**\n * State for selectable menu items\n */\nexport type MenuItemSelectableState = MenuItemSelectableProps & {\n /**\n * Checked items for a value with `name`\n */\n checkedItems: string[];\n\n /**\n * Callback when checked items changes for a given value with `name`\n */\n onCheckedValueChange: (e: React.MouseEvent | React.KeyboardEvent, name: string, checkedItems: string[]) => void;\n\n /**\n * Selectable is checked\n */\n checked: boolean;\n};\n"]}
1
+ {"version":3,"file":"types.js","sourceRoot":"../src/","sources":["selectable/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\nexport type SelectableHandler = (\n e: React.MouseEvent | React.KeyboardEvent,\n name: string,\n value: string,\n checked: boolean,\n) => void;\n\n/**\n * Props for selecatble menu items\n */\nexport type MenuItemSelectableProps = {\n /**\n * Follows input convention\n * https://www.w3schools.com/jsref/prop_checkbox_name.asp\n */\n name: string;\n\n /**\n * Follows input convention\n * https://www.w3schools.com/jsref/prop_checkbox_value.asp\n */\n value: string;\n};\n\n/**\n * State for selectable menu items\n */\nexport type MenuItemSelectableState = MenuItemSelectableProps & {\n /**\n * Selectable is checked\n */\n checked: boolean;\n};\n"]}
@@ -22,6 +22,8 @@ const menuContext_1 = /*#__PURE__*/require("../../contexts/menuContext");
22
22
  const index_1 = /*#__PURE__*/require("../../utils/index");
23
23
 
24
24
  const useIsSubmenu_1 = /*#__PURE__*/require("../../utils/useIsSubmenu");
25
+
26
+ const keyboard_keys_1 = /*#__PURE__*/require("@fluentui/keyboard-keys");
25
27
  /**
26
28
  * Create the state required to render Menu.
27
29
  *
@@ -171,7 +173,6 @@ const useMenuOpenState = state => {
171
173
 
172
174
  return (_a = state.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(state, e, data);
173
175
  });
174
- const shouldHandleKeyboardRef = React.useRef(false);
175
176
  const shouldHandleTabRef = React.useRef(false);
176
177
  const pressedShiftRef = React.useRef(false);
177
178
  const setOpenTimeout = React.useRef(0);
@@ -194,9 +195,8 @@ const useMenuOpenState = state => {
194
195
  state.setContextTarget(undefined);
195
196
  }
196
197
 
197
- if (data.keyboard) {
198
- shouldHandleKeyboardRef.current = true;
199
- shouldHandleTabRef.current = e.key === 'Tab';
198
+ if (e.type === 'keydown' && e.key === keyboard_keys_1.Tab) {
199
+ shouldHandleTabRef.current = true;
200
200
  pressedShiftRef.current = e.shiftKey;
201
201
  }
202
202
 
@@ -301,7 +301,7 @@ const useMenuOpenState = state => {
301
301
  focusFirst();
302
302
  }
303
303
 
304
- if (shouldHandleKeyboardRef.current && !open) {
304
+ if (!open) {
305
305
  if (shouldHandleTabRef.current && !state.isSubmenu) {
306
306
  pressedShiftRef.current ? focusBeforeMenuTrigger() : focusAfterMenuTrigger();
307
307
  } else {
@@ -309,7 +309,6 @@ const useMenuOpenState = state => {
309
309
  }
310
310
  }
311
311
 
312
- shouldHandleKeyboardRef.current = false;
313
312
  shouldHandleTabRef.current = false;
314
313
  pressedShiftRef.current = false;
315
314
  }, [state.triggerRef, state.isSubmenu, open, focusFirst, focusAfterMenuTrigger, focusBeforeMenuTrigger]);
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Menu/useMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { usePositioningMouseTarget, usePositioning, resolvePositioningShorthand } from '@fluentui/react-positioning';\nimport {\n useControllableState,\n useId,\n useOnClickOutside,\n useEventCallback,\n useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MENU_ENTER_EVENT, useOnMenuMouseEnter } from '../../utils/index';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport type { MenuOpenChangeData, MenuOpenEvents, MenuProps, MenuState } from './Menu.types';\n\n/**\n * Create the state required to render Menu.\n *\n * The returned state can be modified with hooks such as useMenuStyles,\n * before being passed to renderMenu_unstable.\n *\n * @param props - props from this instance of Menu\n */\nexport const useMenu_unstable = (props: MenuProps): MenuState => {\n const {\n hoverDelay = 500,\n inline = false,\n hasCheckmarks = false,\n hasIcons = false,\n closeOnScroll = false,\n openOnContext = false,\n persistOnItemClick = false,\n defaultCheckedValues,\n } = props;\n const triggerId = useId('menu');\n const isSubmenu = useIsSubmenu();\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n const positioningState = {\n position: isSubmenu ? ('after' as const) : ('below' as const),\n align: isSubmenu ? ('top' as const) : ('start' as const),\n target: props.openOnContext ? contextTarget : undefined,\n ...resolvePositioningShorthand(props.positioning),\n };\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at most two children');\n }\n }\n\n let menuTrigger: React.ReactElement | undefined = undefined;\n let menuPopover: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n menuTrigger = children[0];\n menuPopover = children[1];\n } else if (children.length === 1) {\n menuPopover = children[0];\n }\n const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);\n\n // TODO Better way to narrow types ?\n\n const [open, setOpen] = useMenuOpenState({\n hoverDelay,\n isSubmenu,\n setContextTarget,\n closeOnScroll,\n menuPopoverRef,\n triggerRef,\n open: props.open,\n defaultOpen: props.defaultOpen,\n onOpenChange: props.onOpenChange,\n openOnContext,\n });\n\n const [checkedValues, onCheckedValueChange] = useMenuSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange,\n });\n\n return {\n inline,\n hoverDelay,\n triggerId,\n isSubmenu,\n openOnHover: isSubmenu,\n contextTarget,\n setContextTarget,\n hasCheckmarks,\n hasIcons,\n closeOnScroll,\n menuTrigger,\n menuPopover,\n triggerRef,\n menuPopoverRef,\n components: {},\n openOnContext,\n open,\n setOpen,\n checkedValues,\n defaultCheckedValues,\n onCheckedValueChange,\n persistOnItemClick,\n };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useMenuSelectableState = (\n state: Pick<MenuProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n const [checkedValues, setCheckedValues] = useControllableState({\n state: state.checkedValues,\n defaultState: state.defaultCheckedValues,\n initialState: {},\n });\n const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n const onCheckedValueChange: MenuState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n if (onCheckedValueChangeOriginal) {\n onCheckedValueChangeOriginal(e, { name, checkedItems });\n }\n\n setCheckedValues(s => {\n return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };\n });\n });\n\n return [checkedValues, onCheckedValueChange] as const;\n};\n\nconst useMenuOpenState = (\n state: Pick<\n MenuState,\n | 'isSubmenu'\n | 'menuPopoverRef'\n | 'onOpenChange'\n | 'setContextTarget'\n | 'triggerRef'\n | 'openOnContext'\n | 'closeOnScroll'\n | 'hoverDelay'\n > &\n Pick<MenuProps, 'open' | 'defaultOpen'>,\n) => {\n const { targetDocument } = useFluent();\n const parentSetOpen = useMenuContext_unstable(context => context.setOpen);\n const onOpenChange: MenuState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const shouldHandleKeyboardRef = React.useRef(false);\n const shouldHandleTabRef = React.useRef(false);\n const pressedShiftRef = React.useRef(false);\n const setOpenTimeout = React.useRef(0);\n const enteringTriggerRef = React.useRef(false);\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n\n const trySetOpen = useEventCallback((e: MenuOpenEvents, data: MenuOpenChangeData) => {\n const event = e instanceof CustomEvent && e.type === MENU_ENTER_EVENT ? e.detail.nativeEvent : e;\n onOpenChange?.(event, { ...data });\n if (data.open && e.type === 'contextmenu') {\n state.setContextTarget(e as React.MouseEvent);\n }\n\n if (!data.open) {\n state.setContextTarget(undefined);\n }\n\n if (data.keyboard) {\n shouldHandleKeyboardRef.current = true;\n shouldHandleTabRef.current = (e as React.KeyboardEvent).key === 'Tab';\n pressedShiftRef.current = (e as React.KeyboardEvent).shiftKey;\n }\n\n if (data.bubble) {\n parentSetOpen(e, { ...data });\n }\n\n setOpenState(data.open);\n });\n\n const setOpen = useEventCallback((e: MenuOpenEvents, data: MenuOpenChangeData) => {\n clearTimeout(setOpenTimeout.current);\n if (!(e instanceof Event) && e.persist) {\n // < React 17 still uses pooled synthetic events\n e.persist();\n }\n\n if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === MENU_ENTER_EVENT) {\n if (state.triggerRef.current?.contains(e.target as HTMLElement)) {\n enteringTriggerRef.current = e.type === 'mouseenter' || e.type === 'mousemove';\n }\n\n // FIXME leaking Node timeout type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n setOpenTimeout.current = setTimeout(() => trySetOpen(e, data), state.hoverDelay);\n } else {\n trySetOpen(e, data);\n }\n });\n\n useOnClickOutside({\n contains: elementContains,\n disabled: !open,\n element: targetDocument,\n refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n Boolean,\n ) as React.MutableRefObject<HTMLElement>[],\n callback: e => setOpen(e, { open: false }),\n });\n\n // only close on scroll for context, or when closeOnScroll is specified\n const closeOnScroll = state.openOnContext || state.closeOnScroll;\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, { open: false }),\n refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n Boolean,\n ) as React.MutableRefObject<HTMLElement>[],\n disabled: !open || !closeOnScroll,\n });\n\n useOnMenuMouseEnter({\n element: targetDocument,\n callback: e => {\n // When moving from a menu directly back to its trigger, this handler can close the menu\n // Explicitly check a flag to see if this situation happens\n if (!enteringTriggerRef.current) {\n setOpen(e, { open: false });\n }\n },\n disabled: !open,\n refs: [state.menuPopoverRef],\n });\n\n // Clear timeout on unmount\n // Setting state after a component unmounts can cause memory leaks\n React.useEffect(() => {\n return () => {\n clearTimeout(setOpenTimeout.current);\n };\n }, []);\n\n // Manage focus for open state\n const { findFirstFocusable, findNextFocusable, findPrevFocusable } = useFocusFinders();\n const focusFirst = React.useCallback(() => {\n const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);\n firstFocusable?.focus();\n }, [findFirstFocusable, state.menuPopoverRef]);\n\n const focusAfterMenuTrigger = React.useCallback(() => {\n const nextFocusable = findNextFocusable(state.triggerRef.current);\n nextFocusable?.focus();\n }, [findNextFocusable, state.triggerRef]);\n\n const focusBeforeMenuTrigger = React.useCallback(() => {\n const prevFocusable = findPrevFocusable(state.triggerRef.current);\n prevFocusable?.focus();\n }, [findPrevFocusable, state.triggerRef]);\n\n React.useEffect(() => {\n if (open) {\n focusFirst();\n }\n }, [open, focusFirst]);\n\n React.useEffect(() => {\n if (open) {\n focusFirst();\n }\n\n if (shouldHandleKeyboardRef.current && !open) {\n if (shouldHandleTabRef.current && !state.isSubmenu) {\n pressedShiftRef.current ? focusBeforeMenuTrigger() : focusAfterMenuTrigger();\n } else {\n state.triggerRef.current?.focus();\n }\n }\n\n shouldHandleKeyboardRef.current = false;\n shouldHandleTabRef.current = false;\n pressedShiftRef.current = false;\n }, [state.triggerRef, state.isSubmenu, open, focusFirst, focusAfterMenuTrigger, focusBeforeMenuTrigger]);\n\n return [open ?? false, setOpen] as const;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Menu/useMenu.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAOA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;AAOG;;;AACI,MAAM,gBAAgB,GAAI,KAAD,IAAgC;EAC9D,MAAM;IACJ,UAAU,GAAG,GADT;IAEJ,MAAM,GAAG,KAFL;IAGJ,aAAa,GAAG,KAHZ;IAIJ,QAAQ,GAAG,KAJP;IAKJ,aAAa,GAAG,KALZ;IAMJ,aAAa,GAAG,KANZ;IAOJ,kBAAkB,GAAG,KAPjB;IAQJ;EARI,IASF,KATJ;EAUA,MAAM,SAAS,GAAG,iBAAA,CAAA,KAAA,CAAM,MAAN,CAAlB;EACA,MAAM,SAAS,GAAG,cAAA,CAAA,YAAA,EAAlB;EACA,MAAM,CAAC,aAAD,EAAgB,gBAAhB,IAAoC,mBAAA,CAAA,yBAAA,EAA1C;EAEA,MAAM,gBAAgB,GAAG;IACvB,QAAQ,EAAE,SAAS,GAAI,OAAJ,GAAyB,OADrB;IAEvB,KAAK,EAAE,SAAS,GAAI,KAAJ,GAAuB,OAFhB;IAGvB,MAAM,EAAE,KAAK,CAAC,aAAN,GAAsB,aAAtB,GAAsC,SAHvB;IAIvB,GAAG,mBAAA,CAAA,2BAAA,CAA4B,KAAK,CAAC,WAAlC;EAJoB,CAAzB;EAOA,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAN,CAAe,OAAf,CAAuB,KAAK,CAAC,QAA7B,CAAjB;;EAEA,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;IACzC,IAAI,QAAQ,CAAC,MAAT,KAAoB,CAAxB,EAA2B;MACzB;MACA,OAAO,CAAC,IAAR,CAAa,sCAAb;IACD;;IAED,IAAI,QAAQ,CAAC,MAAT,GAAkB,CAAtB,EAAyB;MACvB;MACA,OAAO,CAAC,IAAR,CAAa,wCAAb;IACD;EACF;;EAED,IAAI,WAAW,GAAmC,SAAlD;EACA,IAAI,WAAW,GAAmC,SAAlD;;EACA,IAAI,QAAQ,CAAC,MAAT,KAAoB,CAAxB,EAA2B;IACzB,WAAW,GAAG,QAAQ,CAAC,CAAD,CAAtB;IACA,WAAW,GAAG,QAAQ,CAAC,CAAD,CAAtB;EACD,CAHD,MAGO,IAAI,QAAQ,CAAC,MAAT,KAAoB,CAAxB,EAA2B;IAChC,WAAW,GAAG,QAAQ,CAAC,CAAD,CAAtB;EACD;;EACD,MAAM;IAAE,SAAS,EAAE,UAAb;IAAyB,YAAY,EAAE;EAAvC,IAA0D,mBAAA,CAAA,cAAA,CAAe,gBAAf,CAAhE,CA5C8D,CA8C9D;;EAEA,MAAM,CAAC,IAAD,EAAO,OAAP,IAAkB,gBAAgB,CAAC;IACvC,UADuC;IAEvC,SAFuC;IAGvC,gBAHuC;IAIvC,aAJuC;IAKvC,cALuC;IAMvC,UANuC;IAOvC,IAAI,EAAE,KAAK,CAAC,IAP2B;IAQvC,WAAW,EAAE,KAAK,CAAC,WARoB;IASvC,YAAY,EAAE,KAAK,CAAC,YATmB;IAUvC;EAVuC,CAAD,CAAxC;EAaA,MAAM,CAAC,aAAD,EAAgB,oBAAhB,IAAwC,sBAAsB,CAAC;IACnE,aAAa,EAAE,KAAK,CAAC,aAD8C;IAEnE,oBAFmE;IAGnE,oBAAoB,EAAE,KAAK,CAAC;EAHuC,CAAD,CAApE;EAMA,OAAO;IACL,MADK;IAEL,UAFK;IAGL,SAHK;IAIL,SAJK;IAKL,WAAW,EAAE,SALR;IAML,aANK;IAOL,gBAPK;IAQL,aARK;IASL,QATK;IAUL,aAVK;IAWL,WAXK;IAYL,WAZK;IAaL,UAbK;IAcL,cAdK;IAeL,UAAU,EAAE,EAfP;IAgBL,aAhBK;IAiBL,IAjBK;IAkBL,OAlBK;IAmBL,aAnBK;IAoBL,oBApBK;IAqBL,oBArBK;IAsBL;EAtBK,CAAP;AAwBD,CA3FM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB;AA6Fb;;;AAGG;;AACH,MAAM,sBAAsB,GAC1B,KAD6B,IAE3B;EACF,MAAM,CAAC,aAAD,EAAgB,gBAAhB,IAAoC,iBAAA,CAAA,oBAAA,CAAqB;IAC7D,KAAK,EAAE,KAAK,CAAC,aADgD;IAE7D,YAAY,EAAE,KAAK,CAAC,oBAFyC;IAG7D,YAAY,EAAE;EAH+C,CAArB,CAA1C;EAKA,MAAM;IAAE,oBAAoB,EAAE;EAAxB,IAAyD,KAA/D;EACA,MAAM,oBAAoB,GAAsC,iBAAA,CAAA,gBAAA,CAAiB,CAAC,CAAD,EAAI;IAAE,IAAF;IAAQ;EAAR,CAAJ,KAA8B;IAC7G,IAAI,4BAAJ,EAAkC;MAChC,4BAA4B,CAAC,CAAD,EAAI;QAAE,IAAF;QAAQ;MAAR,CAAJ,CAA5B;IACD;;IAED,gBAAgB,CAAC,CAAC,IAAG;MACnB,OAAO,CAAC,GAAG,EAAE,GAAG,CAAL;QAAQ,CAAC,IAAD,GAAQ;MAAhB,CAAH,GAAoC;QAAE,CAAC,IAAD,GAAQ;MAAV,CAA5C;IACD,CAFe,CAAhB;EAGD,CAR+D,CAAhE;EAUA,OAAO,CAAC,aAAD,EAAgB,oBAAhB,CAAP;AACD,CApBD;;AAsBA,MAAM,gBAAgB,GACpB,KADuB,IAarB;EACF,MAAM;IAAE;EAAF,IAAqB,uBAAA,CAAA,kBAAA,EAA3B;EACA,MAAM,aAAa,GAAG,aAAA,CAAA,uBAAA,CAAwB,OAAO,IAAI,OAAO,CAAC,OAA3C,CAAtB;EACA,MAAM,YAAY,GAA8B,iBAAA,CAAA,gBAAA,CAAiB,CAAC,CAAD,EAAI,IAAJ,KAAY;IAAA,IAAA,EAAA;;IAAC,OAAA,CAAA,EAAA,GAAA,KAAK,CAAC,YAAN,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAkB,EAAA,CAAA,IAAA,CAAlB,KAAkB,EAAG,CAAH,EAAM,IAAN,CAAlB;EAA6B,CAA3D,CAAhD;EAEA,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAN,CAAa,KAAb,CAA3B;EACA,MAAM,eAAe,GAAG,KAAK,CAAC,MAAN,CAAa,KAAb,CAAxB;EACA,MAAM,cAAc,GAAG,KAAK,CAAC,MAAN,CAAa,CAAb,CAAvB;EACA,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAN,CAAa,KAAb,CAA3B;EAEA,MAAM,CAAC,IAAD,EAAO,YAAP,IAAuB,iBAAA,CAAA,oBAAA,CAAqB;IAChD,KAAK,EAAE,KAAK,CAAC,IADmC;IAEhD,YAAY,EAAE,KAAK,CAAC,WAF4B;IAGhD,YAAY,EAAE;EAHkC,CAArB,CAA7B;EAMA,MAAM,UAAU,GAAG,iBAAA,CAAA,gBAAA,CAAiB,CAAC,CAAD,EAAoB,IAApB,KAAgD;IAClF,MAAM,KAAK,GAAG,CAAC,YAAY,WAAb,IAA4B,CAAC,CAAC,IAAF,KAAW,OAAA,CAAA,gBAAvC,GAA0D,CAAC,CAAC,MAAF,CAAS,WAAnE,GAAiF,CAA/F;IACA,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAA,YAAY,CAAG,KAAH,EAAU,EAAE,GAAG;IAAL,CAAV,CAAZ;;IACA,IAAI,IAAI,CAAC,IAAL,IAAa,CAAC,CAAC,IAAF,KAAW,aAA5B,EAA2C;MACzC,KAAK,CAAC,gBAAN,CAAuB,CAAvB;IACD;;IAED,IAAI,CAAC,IAAI,CAAC,IAAV,EAAgB;MACd,KAAK,CAAC,gBAAN,CAAuB,SAAvB;IACD;;IAED,IAAI,CAAC,CAAC,IAAF,KAAW,SAAX,IAAyB,CAAsC,CAAC,GAAvC,KAA+C,eAAA,CAAA,GAA5E,EAAiF;MAC/E,kBAAkB,CAAC,OAAnB,GAA6B,IAA7B;MACA,eAAe,CAAC,OAAhB,GAA2B,CAAsC,CAAC,QAAlE;IACD;;IAED,IAAI,IAAI,CAAC,MAAT,EAAiB;MACf,aAAa,CAAC,CAAD,EAAI,EAAE,GAAG;MAAL,CAAJ,CAAb;IACD;;IAED,YAAY,CAAC,IAAI,CAAC,IAAN,CAAZ;EACD,CArBkB,CAAnB;EAuBA,MAAM,OAAO,GAAG,iBAAA,CAAA,gBAAA,CAAiB,CAAC,CAAD,EAAoB,IAApB,KAAgD;;;IAC/E,YAAY,CAAC,cAAc,CAAC,OAAhB,CAAZ;;IACA,IAAI,EAAE,CAAC,YAAY,KAAf,KAAyB,CAAC,CAAC,OAA/B,EAAwC;MACtC;MACA,CAAC,CAAC,OAAF;IACD;;IAED,IAAI,CAAC,CAAC,IAAF,KAAW,YAAX,IAA2B,CAAC,CAAC,IAAF,KAAW,YAAtC,IAAsD,CAAC,CAAC,IAAF,KAAW,WAAjE,IAAgF,CAAC,CAAC,IAAF,KAAW,OAAA,CAAA,gBAA/F,EAAiH;MAC/G,IAAI,CAAA,EAAA,GAAA,KAAK,CAAC,UAAN,CAAiB,OAAjB,MAAwB,IAAxB,IAAwB,EAAA,KAAA,KAAA,CAAxB,GAAwB,KAAA,CAAxB,GAAwB,EAAA,CAAE,QAAF,CAAW,CAAC,CAAC,MAAb,CAA5B,EAAiE;QAC/D,kBAAkB,CAAC,OAAnB,GAA6B,CAAC,CAAC,IAAF,KAAW,YAAX,IAA2B,CAAC,CAAC,IAAF,KAAW,WAAnE;MACD,CAH8G,CAK/G;MACA;MACA;;;MACA,cAAc,CAAC,OAAf,GAAyB,UAAU,CAAC,MAAM,UAAU,CAAC,CAAD,EAAI,IAAJ,CAAjB,EAA4B,KAAK,CAAC,UAAlC,CAAnC;IACD,CATD,MASO;MACL,UAAU,CAAC,CAAD,EAAI,IAAJ,CAAV;IACD;EACF,CAnBe,CAAhB;EAqBA,iBAAA,CAAA,iBAAA,CAAkB;IAChB,QAAQ,EAAE,cAAA,CAAA,eADM;IAEhB,QAAQ,EAAE,CAAC,IAFK;IAGhB,OAAO,EAAE,cAHO;IAIhB,IAAI,EAAE,CAAC,KAAK,CAAC,cAAP,EAAuB,CAAC,KAAK,CAAC,aAAP,IAAwB,KAAK,CAAC,UAArD,EAAiE,MAAjE,CACJ,OADI,CAJU;IAOhB,QAAQ,EAAE,CAAC,IAAI,OAAO,CAAC,CAAD,EAAI;MAAE,IAAI,EAAE;IAAR,CAAJ;EAPN,CAAlB,EA5DE,CAsEF;;EACA,MAAM,aAAa,GAAG,KAAK,CAAC,aAAN,IAAuB,KAAK,CAAC,aAAnD;EACA,iBAAA,CAAA,kBAAA,CAAmB;IACjB,QAAQ,EAAE,cAAA,CAAA,eADO;IAEjB,OAAO,EAAE,cAFQ;IAGjB,QAAQ,EAAE,EAAE,IAAI,OAAO,CAAC,EAAD,EAAK;MAAE,IAAI,EAAE;IAAR,CAAL,CAHN;IAIjB,IAAI,EAAE,CAAC,KAAK,CAAC,cAAP,EAAuB,CAAC,KAAK,CAAC,aAAP,IAAwB,KAAK,CAAC,UAArD,EAAiE,MAAjE,CACJ,OADI,CAJW;IAOjB,QAAQ,EAAE,CAAC,IAAD,IAAS,CAAC;EAPH,CAAnB;EAUA,OAAA,CAAA,mBAAA,CAAoB;IAClB,OAAO,EAAE,cADS;IAElB,QAAQ,EAAE,CAAC,IAAG;MACZ;MACA;MACA,IAAI,CAAC,kBAAkB,CAAC,OAAxB,EAAiC;QAC/B,OAAO,CAAC,CAAD,EAAI;UAAE,IAAI,EAAE;QAAR,CAAJ,CAAP;MACD;IACF,CARiB;IASlB,QAAQ,EAAE,CAAC,IATO;IAUlB,IAAI,EAAE,CAAC,KAAK,CAAC,cAAP;EAVY,CAApB,EAlFE,CA+FF;EACA;;EACA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,OAAO,MAAK;MACV,YAAY,CAAC,cAAc,CAAC,OAAhB,CAAZ;IACD,CAFD;EAGD,CAJD,EAIG,EAJH,EAjGE,CAuGF;;EACA,MAAM;IAAE,kBAAF;IAAsB,iBAAtB;IAAyC;EAAzC,IAA+D,eAAA,CAAA,eAAA,EAArE;EACA,MAAM,UAAU,GAAG,KAAK,CAAC,WAAN,CAAkB,MAAK;IACxC,MAAM,cAAc,GAAG,kBAAkB,CAAC,KAAK,CAAC,cAAN,CAAqB,OAAtB,CAAzC;IACA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,KAAhB,EAAA;EACD,CAHkB,EAGhB,CAAC,kBAAD,EAAqB,KAAK,CAAC,cAA3B,CAHgB,CAAnB;EAKA,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAN,CAAkB,MAAK;IACnD,MAAM,aAAa,GAAG,iBAAiB,CAAC,KAAK,CAAC,UAAN,CAAiB,OAAlB,CAAvC;IACA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAE,KAAf,EAAA;EACD,CAH6B,EAG3B,CAAC,iBAAD,EAAoB,KAAK,CAAC,UAA1B,CAH2B,CAA9B;EAKA,MAAM,sBAAsB,GAAG,KAAK,CAAC,WAAN,CAAkB,MAAK;IACpD,MAAM,aAAa,GAAG,iBAAiB,CAAC,KAAK,CAAC,UAAN,CAAiB,OAAlB,CAAvC;IACA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAE,KAAf,EAAA;EACD,CAH8B,EAG5B,CAAC,iBAAD,EAAoB,KAAK,CAAC,UAA1B,CAH4B,CAA/B;EAKA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,IAAJ,EAAU;MACR,UAAU;IACX;EACF,CAJD,EAIG,CAAC,IAAD,EAAO,UAAP,CAJH;EAMA,KAAK,CAAC,SAAN,CAAgB,MAAK;;;IACnB,IAAI,IAAJ,EAAU;MACR,UAAU;IACX;;IAED,IAAI,CAAC,IAAL,EAAW;MACT,IAAI,kBAAkB,CAAC,OAAnB,IAA8B,CAAC,KAAK,CAAC,SAAzC,EAAoD;QAClD,eAAe,CAAC,OAAhB,GAA0B,sBAAsB,EAAhD,GAAqD,qBAAqB,EAA1E;MACD,CAFD,MAEO;QACL,CAAA,EAAA,GAAA,KAAK,CAAC,UAAN,CAAiB,OAAjB,MAAwB,IAAxB,IAAwB,EAAA,KAAA,KAAA,CAAxB,GAAwB,KAAA,CAAxB,GAAwB,EAAA,CAAE,KAAF,EAAxB;MACD;IACF;;IAED,kBAAkB,CAAC,OAAnB,GAA6B,KAA7B;IACA,eAAe,CAAC,OAAhB,GAA0B,KAA1B;EACD,CAfD,EAeG,CAAC,KAAK,CAAC,UAAP,EAAmB,KAAK,CAAC,SAAzB,EAAoC,IAApC,EAA0C,UAA1C,EAAsD,qBAAtD,EAA6E,sBAA7E,CAfH;EAiBA,OAAO,CAAC,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAA,IAAA,GAAQ,KAAT,EAAgB,OAAhB,CAAP;AACD,CA7JD","sourcesContent":["import * as React from 'react';\nimport { usePositioningMouseTarget, usePositioning, resolvePositioningShorthand } from '@fluentui/react-positioning';\nimport {\n useControllableState,\n useId,\n useOnClickOutside,\n useEventCallback,\n useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MENU_ENTER_EVENT, useOnMenuMouseEnter } from '../../utils/index';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport type { MenuOpenChangeData, MenuOpenEvents, MenuProps, MenuState } from './Menu.types';\nimport { Tab } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render Menu.\n *\n * The returned state can be modified with hooks such as useMenuStyles,\n * before being passed to renderMenu_unstable.\n *\n * @param props - props from this instance of Menu\n */\nexport const useMenu_unstable = (props: MenuProps): MenuState => {\n const {\n hoverDelay = 500,\n inline = false,\n hasCheckmarks = false,\n hasIcons = false,\n closeOnScroll = false,\n openOnContext = false,\n persistOnItemClick = false,\n defaultCheckedValues,\n } = props;\n const triggerId = useId('menu');\n const isSubmenu = useIsSubmenu();\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n const positioningState = {\n position: isSubmenu ? ('after' as const) : ('below' as const),\n align: isSubmenu ? ('top' as const) : ('start' as const),\n target: props.openOnContext ? contextTarget : undefined,\n ...resolvePositioningShorthand(props.positioning),\n };\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at most two children');\n }\n }\n\n let menuTrigger: React.ReactElement | undefined = undefined;\n let menuPopover: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n menuTrigger = children[0];\n menuPopover = children[1];\n } else if (children.length === 1) {\n menuPopover = children[0];\n }\n const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);\n\n // TODO Better way to narrow types ?\n\n const [open, setOpen] = useMenuOpenState({\n hoverDelay,\n isSubmenu,\n setContextTarget,\n closeOnScroll,\n menuPopoverRef,\n triggerRef,\n open: props.open,\n defaultOpen: props.defaultOpen,\n onOpenChange: props.onOpenChange,\n openOnContext,\n });\n\n const [checkedValues, onCheckedValueChange] = useMenuSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange,\n });\n\n return {\n inline,\n hoverDelay,\n triggerId,\n isSubmenu,\n openOnHover: isSubmenu,\n contextTarget,\n setContextTarget,\n hasCheckmarks,\n hasIcons,\n closeOnScroll,\n menuTrigger,\n menuPopover,\n triggerRef,\n menuPopoverRef,\n components: {},\n openOnContext,\n open,\n setOpen,\n checkedValues,\n defaultCheckedValues,\n onCheckedValueChange,\n persistOnItemClick,\n };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useMenuSelectableState = (\n state: Pick<MenuProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n const [checkedValues, setCheckedValues] = useControllableState({\n state: state.checkedValues,\n defaultState: state.defaultCheckedValues,\n initialState: {},\n });\n const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n const onCheckedValueChange: MenuState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n if (onCheckedValueChangeOriginal) {\n onCheckedValueChangeOriginal(e, { name, checkedItems });\n }\n\n setCheckedValues(s => {\n return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };\n });\n });\n\n return [checkedValues, onCheckedValueChange] as const;\n};\n\nconst useMenuOpenState = (\n state: Pick<\n MenuState,\n | 'isSubmenu'\n | 'menuPopoverRef'\n | 'onOpenChange'\n | 'setContextTarget'\n | 'triggerRef'\n | 'openOnContext'\n | 'closeOnScroll'\n | 'hoverDelay'\n > &\n Pick<MenuProps, 'open' | 'defaultOpen'>,\n) => {\n const { targetDocument } = useFluent();\n const parentSetOpen = useMenuContext_unstable(context => context.setOpen);\n const onOpenChange: MenuState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const shouldHandleTabRef = React.useRef(false);\n const pressedShiftRef = React.useRef(false);\n const setOpenTimeout = React.useRef(0);\n const enteringTriggerRef = React.useRef(false);\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n\n const trySetOpen = useEventCallback((e: MenuOpenEvents, data: MenuOpenChangeData) => {\n const event = e instanceof CustomEvent && e.type === MENU_ENTER_EVENT ? e.detail.nativeEvent : e;\n onOpenChange?.(event, { ...data });\n if (data.open && e.type === 'contextmenu') {\n state.setContextTarget(e as React.MouseEvent);\n }\n\n if (!data.open) {\n state.setContextTarget(undefined);\n }\n\n if (e.type === 'keydown' && (e as React.KeyboardEvent<HTMLElement>).key === Tab) {\n shouldHandleTabRef.current = true;\n pressedShiftRef.current = (e as React.KeyboardEvent<HTMLElement>).shiftKey;\n }\n\n if (data.bubble) {\n parentSetOpen(e, { ...data });\n }\n\n setOpenState(data.open);\n });\n\n const setOpen = useEventCallback((e: MenuOpenEvents, data: MenuOpenChangeData) => {\n clearTimeout(setOpenTimeout.current);\n if (!(e instanceof Event) && e.persist) {\n // < React 17 still uses pooled synthetic events\n e.persist();\n }\n\n if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === MENU_ENTER_EVENT) {\n if (state.triggerRef.current?.contains(e.target as HTMLElement)) {\n enteringTriggerRef.current = e.type === 'mouseenter' || e.type === 'mousemove';\n }\n\n // FIXME leaking Node timeout type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n setOpenTimeout.current = setTimeout(() => trySetOpen(e, data), state.hoverDelay);\n } else {\n trySetOpen(e, data);\n }\n });\n\n useOnClickOutside({\n contains: elementContains,\n disabled: !open,\n element: targetDocument,\n refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n Boolean,\n ) as React.MutableRefObject<HTMLElement>[],\n callback: e => setOpen(e, { open: false }),\n });\n\n // only close on scroll for context, or when closeOnScroll is specified\n const closeOnScroll = state.openOnContext || state.closeOnScroll;\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, { open: false }),\n refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n Boolean,\n ) as React.MutableRefObject<HTMLElement>[],\n disabled: !open || !closeOnScroll,\n });\n\n useOnMenuMouseEnter({\n element: targetDocument,\n callback: e => {\n // When moving from a menu directly back to its trigger, this handler can close the menu\n // Explicitly check a flag to see if this situation happens\n if (!enteringTriggerRef.current) {\n setOpen(e, { open: false });\n }\n },\n disabled: !open,\n refs: [state.menuPopoverRef],\n });\n\n // Clear timeout on unmount\n // Setting state after a component unmounts can cause memory leaks\n React.useEffect(() => {\n return () => {\n clearTimeout(setOpenTimeout.current);\n };\n }, []);\n\n // Manage focus for open state\n const { findFirstFocusable, findNextFocusable, findPrevFocusable } = useFocusFinders();\n const focusFirst = React.useCallback(() => {\n const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);\n firstFocusable?.focus();\n }, [findFirstFocusable, state.menuPopoverRef]);\n\n const focusAfterMenuTrigger = React.useCallback(() => {\n const nextFocusable = findNextFocusable(state.triggerRef.current);\n nextFocusable?.focus();\n }, [findNextFocusable, state.triggerRef]);\n\n const focusBeforeMenuTrigger = React.useCallback(() => {\n const prevFocusable = findPrevFocusable(state.triggerRef.current);\n prevFocusable?.focus();\n }, [findPrevFocusable, state.triggerRef]);\n\n React.useEffect(() => {\n if (open) {\n focusFirst();\n }\n }, [open, focusFirst]);\n\n React.useEffect(() => {\n if (open) {\n focusFirst();\n }\n\n if (!open) {\n if (shouldHandleTabRef.current && !state.isSubmenu) {\n pressedShiftRef.current ? focusBeforeMenuTrigger() : focusAfterMenuTrigger();\n } else {\n state.triggerRef.current?.focus();\n }\n }\n\n shouldHandleTabRef.current = false;\n pressedShiftRef.current = false;\n }, [state.triggerRef, state.isSubmenu, open, focusFirst, focusAfterMenuTrigger, focusBeforeMenuTrigger]);\n\n return [open ?? false, setOpen] as const;\n};\n"],"sourceRoot":"../src/"}
@@ -10,15 +10,13 @@ const menuListContext_1 = /*#__PURE__*/require("../../contexts/menuListContext")
10
10
  const useCharacterSearch = (state, ref) => {
11
11
  const setFocusByFirstCharacter = menuListContext_1.useMenuListContext_unstable(context => context.setFocusByFirstCharacter);
12
12
  const {
13
- onKeyDown: onKeyDownBase
13
+ onKeyDown: originalOnKeyDown
14
14
  } = state.root;
15
15
 
16
16
  state.root.onKeyDown = e => {
17
17
  var _a;
18
18
 
19
- if (onKeyDownBase) {
20
- onKeyDownBase(e);
21
- }
19
+ originalOnKeyDown === null || originalOnKeyDown === void 0 ? void 0 : originalOnKeyDown(e);
22
20
 
23
21
  if (((_a = e.key) === null || _a === void 0 ? void 0 : _a.length) > 1) {
24
22
  return;
@@ -1 +1 @@
1
- {"version":3,"sources":["components/MenuItem/useCharacterSearch.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;;AAGO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAA4D;EAC5F,MAAM,wBAAwB,GAAG,iBAAA,CAAA,2BAAA,CAA4B,OAAO,IAAI,OAAO,CAAC,wBAA/C,CAAjC;EAEA,MAAM;IAAE,SAAS,EAAE;EAAb,IAA+B,KAAK,CAAC,IAA3C;;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,CAAC,IAAG;;;IACzB,IAAI,aAAJ,EAAmB;MACjB,aAAa,CAAC,CAAD,CAAb;IACD;;IAED,IAAI,CAAA,CAAA,EAAA,GAAA,CAAC,CAAC,GAAF,MAAK,IAAL,IAAK,EAAA,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAK,EAAA,CAAE,MAAP,IAAgB,CAApB,EAAuB;MACrB;IACD;;IAED,IAAI,GAAG,CAAC,OAAR,EAAiB;MACf,wBAAwB,KAAA,IAAxB,IAAA,wBAAwB,KAAA,KAAA,CAAxB,GAAwB,KAAA,CAAxB,GAAA,wBAAwB,CAAG,CAAH,EAAM,GAAG,CAAC,OAAV,CAAxB;IACD;EACF,CAZD;;EAcA,OAAO,KAAP;AACD,CAnBM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport type { MenuItemState } from '../../components/index';\n\nexport const useCharacterSearch = (state: MenuItemState, ref: React.RefObject<HTMLElement>) => {\n const setFocusByFirstCharacter = useMenuListContext_unstable(context => context.setFocusByFirstCharacter);\n\n const { onKeyDown: onKeyDownBase } = state.root;\n state.root.onKeyDown = e => {\n if (onKeyDownBase) {\n onKeyDownBase(e);\n }\n\n if (e.key?.length > 1) {\n return;\n }\n\n if (ref.current) {\n setFocusByFirstCharacter?.(e, ref.current);\n }\n };\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/MenuItem/useCharacterSearch.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;;AAIO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAA4D;EAC5F,MAAM,wBAAwB,GAAG,iBAAA,CAAA,2BAAA,CAA4B,OAAO,IAAI,OAAO,CAAC,wBAA/C,CAAjC;EAEA,MAAM;IAAE,SAAS,EAAE;EAAb,IAAmC,KAAK,CAAC,IAA/C;;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAwB,CAAD,IAA0D;;;IAC/E,iBAAiB,KAAA,IAAjB,IAAA,iBAAiB,KAAA,KAAA,CAAjB,GAAiB,KAAA,CAAjB,GAAA,iBAAiB,CAAG,CAAH,CAAjB;;IAEA,IAAI,CAAA,CAAA,EAAA,GAAA,CAAC,CAAC,GAAF,MAAK,IAAL,IAAK,EAAA,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAK,EAAA,CAAE,MAAP,IAAgB,CAApB,EAAuB;MACrB;IACD;;IAED,IAAI,GAAG,CAAC,OAAR,EAAiB;MACf,wBAAwB,KAAA,IAAxB,IAAA,wBAAwB,KAAA,KAAA,CAAxB,GAAwB,KAAA,CAAxB,GAAA,wBAAwB,CAAG,CAAH,EAAM,GAAG,CAAC,OAAV,CAAxB;IACD;EACF,CAVD;;EAYA,OAAO,KAAP;AACD,CAlBM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport type { MenuItemState } from '../../components/index';\nimport type { ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\nexport const useCharacterSearch = (state: MenuItemState, ref: React.RefObject<HTMLElement>) => {\n const setFocusByFirstCharacter = useMenuListContext_unstable(context => context.setFocusByFirstCharacter);\n\n const { onKeyDown: originalOnKeyDown } = state.root;\n\n state.root.onKeyDown = (e: React.KeyboardEvent<ARIAButtonElementIntersection>) => {\n originalOnKeyDown?.(e);\n\n if (e.key?.length > 1) {\n return;\n }\n\n if (ref.current) {\n setFocusByFirstCharacter?.(e, ref.current);\n }\n };\n\n return state;\n};\n"],"sourceRoot":"../src/"}