@fluentui/react-menu 9.4.0 → 9.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (206) hide show
  1. package/CHANGELOG.json +143 -1
  2. package/CHANGELOG.md +36 -2
  3. package/dist/index.d.ts +46 -5
  4. package/lib/components/Menu/Menu.types.js.map +1 -1
  5. package/lib/components/Menu/useMenu.js +13 -7
  6. package/lib/components/Menu/useMenu.js.map +1 -1
  7. package/lib/components/MenuItem/useMenuItem.js +3 -1
  8. package/lib/components/MenuItem/useMenuItem.js.map +1 -1
  9. package/lib/components/MenuPopover/useMenuPopover.js +20 -14
  10. package/lib/components/MenuPopover/useMenuPopover.js.map +1 -1
  11. package/lib/components/MenuTrigger/MenuTrigger.types.js.map +1 -1
  12. package/lib/components/MenuTrigger/useMenuTrigger.js +46 -31
  13. package/lib/components/MenuTrigger/useMenuTrigger.js.map +1 -1
  14. package/lib/index.js.map +1 -1
  15. package/lib-amd/Menu.js +6 -0
  16. package/lib-amd/Menu.js.map +1 -0
  17. package/lib-amd/MenuDivider.js +6 -0
  18. package/lib-amd/MenuDivider.js.map +1 -0
  19. package/lib-amd/MenuGroup.js +6 -0
  20. package/lib-amd/MenuGroup.js.map +1 -0
  21. package/lib-amd/MenuGroupHeader.js +6 -0
  22. package/lib-amd/MenuGroupHeader.js.map +1 -0
  23. package/lib-amd/MenuItem.js +6 -0
  24. package/lib-amd/MenuItem.js.map +1 -0
  25. package/lib-amd/MenuItemCheckbox.js +6 -0
  26. package/lib-amd/MenuItemCheckbox.js.map +1 -0
  27. package/lib-amd/MenuItemRadio.js +6 -0
  28. package/lib-amd/MenuItemRadio.js.map +1 -0
  29. package/lib-amd/MenuList.js +6 -0
  30. package/lib-amd/MenuList.js.map +1 -0
  31. package/lib-amd/MenuPopover.js +6 -0
  32. package/lib-amd/MenuPopover.js.map +1 -0
  33. package/lib-amd/MenuSplitGroup.js +6 -0
  34. package/lib-amd/MenuSplitGroup.js.map +1 -0
  35. package/lib-amd/MenuTrigger.js +6 -0
  36. package/lib-amd/MenuTrigger.js.map +1 -0
  37. package/lib-amd/components/Menu/Menu.js +16 -0
  38. package/lib-amd/components/Menu/Menu.js.map +1 -0
  39. package/lib-amd/components/Menu/Menu.types.js +5 -0
  40. package/lib-amd/components/Menu/Menu.types.js.map +1 -0
  41. package/lib-amd/components/Menu/index.js +10 -0
  42. package/lib-amd/components/Menu/index.js.map +1 -0
  43. package/lib-amd/components/Menu/renderMenu.js +15 -0
  44. package/lib-amd/components/Menu/renderMenu.js.map +1 -0
  45. package/lib-amd/components/Menu/useMenu.js +233 -0
  46. package/lib-amd/components/Menu/useMenu.js.map +1 -0
  47. package/lib-amd/components/Menu/useMenuContextValues.js +29 -0
  48. package/lib-amd/components/Menu/useMenuContextValues.js.map +1 -0
  49. package/lib-amd/components/MenuDivider/MenuDivider.js +15 -0
  50. package/lib-amd/components/MenuDivider/MenuDivider.js.map +1 -0
  51. package/lib-amd/components/MenuDivider/MenuDivider.types.js +5 -0
  52. package/lib-amd/components/MenuDivider/MenuDivider.types.js.map +1 -0
  53. package/lib-amd/components/MenuDivider/index.js +10 -0
  54. package/lib-amd/components/MenuDivider/index.js.map +1 -0
  55. package/lib-amd/components/MenuDivider/renderMenuDivider.js +15 -0
  56. package/lib-amd/components/MenuDivider/renderMenuDivider.js.map +1 -0
  57. package/lib-amd/components/MenuDivider/useMenuDivider.js +18 -0
  58. package/lib-amd/components/MenuDivider/useMenuDivider.js.map +1 -0
  59. package/lib-amd/components/MenuDivider/useMenuDividerStyles.js +18 -0
  60. package/lib-amd/components/MenuDivider/useMenuDividerStyles.js.map +1 -0
  61. package/lib-amd/components/MenuGroup/MenuGroup.js +16 -0
  62. package/lib-amd/components/MenuGroup/MenuGroup.js.map +1 -0
  63. package/lib-amd/components/MenuGroup/MenuGroup.types.js +5 -0
  64. package/lib-amd/components/MenuGroup/MenuGroup.types.js.map +1 -0
  65. package/lib-amd/components/MenuGroup/index.js +11 -0
  66. package/lib-amd/components/MenuGroup/index.js.map +1 -0
  67. package/lib-amd/components/MenuGroup/renderMenuGroup.js +16 -0
  68. package/lib-amd/components/MenuGroup/renderMenuGroup.js.map +1 -0
  69. package/lib-amd/components/MenuGroup/useMenuGroup.js +20 -0
  70. package/lib-amd/components/MenuGroup/useMenuGroup.js.map +1 -0
  71. package/lib-amd/components/MenuGroup/useMenuGroupContextValues.js +12 -0
  72. package/lib-amd/components/MenuGroup/useMenuGroupContextValues.js.map +1 -0
  73. package/lib-amd/components/MenuGroup/useMenuGroupStyles.js +14 -0
  74. package/lib-amd/components/MenuGroup/useMenuGroupStyles.js.map +1 -0
  75. package/lib-amd/components/MenuGroupHeader/MenuGroupHeader.js +15 -0
  76. package/lib-amd/components/MenuGroupHeader/MenuGroupHeader.js.map +1 -0
  77. package/lib-amd/components/MenuGroupHeader/MenuGroupHeader.types.js +5 -0
  78. package/lib-amd/components/MenuGroupHeader/MenuGroupHeader.types.js.map +1 -0
  79. package/lib-amd/components/MenuGroupHeader/index.js +10 -0
  80. package/lib-amd/components/MenuGroupHeader/index.js.map +1 -0
  81. package/lib-amd/components/MenuGroupHeader/renderMenuGroupHeader.js +15 -0
  82. package/lib-amd/components/MenuGroupHeader/renderMenuGroupHeader.js.map +1 -0
  83. package/lib-amd/components/MenuGroupHeader/useMenuGroupHeader.js +19 -0
  84. package/lib-amd/components/MenuGroupHeader/useMenuGroupHeader.js.map +1 -0
  85. package/lib-amd/components/MenuGroupHeader/useMenuGroupHeaderStyles.js +27 -0
  86. package/lib-amd/components/MenuGroupHeader/useMenuGroupHeaderStyles.js.map +1 -0
  87. package/lib-amd/components/MenuItem/MenuItem.js +15 -0
  88. package/lib-amd/components/MenuItem/MenuItem.js.map +1 -0
  89. package/lib-amd/components/MenuItem/MenuItem.types.js +5 -0
  90. package/lib-amd/components/MenuItem/MenuItem.types.js.map +1 -0
  91. package/lib-amd/components/MenuItem/index.js +10 -0
  92. package/lib-amd/components/MenuItem/index.js.map +1 -0
  93. package/lib-amd/components/MenuItem/renderMenuItem.js +19 -0
  94. package/lib-amd/components/MenuItem/renderMenuItem.js.map +1 -0
  95. package/lib-amd/components/MenuItem/useCharacterSearch.js +22 -0
  96. package/lib-amd/components/MenuItem/useCharacterSearch.js.map +1 -0
  97. package/lib-amd/components/MenuItem/useMenuItem.js +80 -0
  98. package/lib-amd/components/MenuItem/useMenuItem.js.map +1 -0
  99. package/lib-amd/components/MenuItem/useMenuItemStyles.js +100 -0
  100. package/lib-amd/components/MenuItem/useMenuItemStyles.js.map +1 -0
  101. package/lib-amd/components/MenuItemCheckbox/MenuItemCheckbox.js +15 -0
  102. package/lib-amd/components/MenuItemCheckbox/MenuItemCheckbox.js.map +1 -0
  103. package/lib-amd/components/MenuItemCheckbox/MenuItemCheckbox.types.js +5 -0
  104. package/lib-amd/components/MenuItemCheckbox/MenuItemCheckbox.types.js.map +1 -0
  105. package/lib-amd/components/MenuItemCheckbox/index.js +10 -0
  106. package/lib-amd/components/MenuItemCheckbox/index.js.map +1 -0
  107. package/lib-amd/components/MenuItemCheckbox/renderMenuItemCheckbox.js +16 -0
  108. package/lib-amd/components/MenuItemCheckbox/renderMenuItemCheckbox.js.map +1 -0
  109. package/lib-amd/components/MenuItemCheckbox/useMenuItemCheckbox.js +26 -0
  110. package/lib-amd/components/MenuItemCheckbox/useMenuItemCheckbox.js.map +1 -0
  111. package/lib-amd/components/MenuItemCheckbox/useMenuItemCheckboxStyles.js +31 -0
  112. package/lib-amd/components/MenuItemCheckbox/useMenuItemCheckboxStyles.js.map +1 -0
  113. package/lib-amd/components/MenuItemRadio/MenuItemRadio.js +15 -0
  114. package/lib-amd/components/MenuItemRadio/MenuItemRadio.js.map +1 -0
  115. package/lib-amd/components/MenuItemRadio/MenuItemRadio.types.js +5 -0
  116. package/lib-amd/components/MenuItemRadio/MenuItemRadio.types.js.map +1 -0
  117. package/lib-amd/components/MenuItemRadio/index.js +10 -0
  118. package/lib-amd/components/MenuItemRadio/index.js.map +1 -0
  119. package/lib-amd/components/MenuItemRadio/renderMenuItemRadio.js +19 -0
  120. package/lib-amd/components/MenuItemRadio/renderMenuItemRadio.js.map +1 -0
  121. package/lib-amd/components/MenuItemRadio/useMenuItemRadio.js +27 -0
  122. package/lib-amd/components/MenuItemRadio/useMenuItemRadio.js.map +1 -0
  123. package/lib-amd/components/MenuItemRadio/useMenuItemRadioStyles.js +31 -0
  124. package/lib-amd/components/MenuItemRadio/useMenuItemRadioStyles.js.map +1 -0
  125. package/lib-amd/components/MenuList/MenuList.js +16 -0
  126. package/lib-amd/components/MenuList/MenuList.js.map +1 -0
  127. package/lib-amd/components/MenuList/MenuList.types.js +5 -0
  128. package/lib-amd/components/MenuList/MenuList.types.js.map +1 -0
  129. package/lib-amd/components/MenuList/index.js +11 -0
  130. package/lib-amd/components/MenuList/index.js.map +1 -0
  131. package/lib-amd/components/MenuList/renderMenuList.js +15 -0
  132. package/lib-amd/components/MenuList/renderMenuList.js.map +1 -0
  133. package/lib-amd/components/MenuList/useMenuList.js +119 -0
  134. package/lib-amd/components/MenuList/useMenuList.js.map +1 -0
  135. package/lib-amd/components/MenuList/useMenuListContextValues.js +21 -0
  136. package/lib-amd/components/MenuList/useMenuListContextValues.js.map +1 -0
  137. package/lib-amd/components/MenuList/useMenuListStyles.js +21 -0
  138. package/lib-amd/components/MenuList/useMenuListStyles.js.map +1 -0
  139. package/lib-amd/components/MenuPopover/MenuPopover.js +15 -0
  140. package/lib-amd/components/MenuPopover/MenuPopover.js.map +1 -0
  141. package/lib-amd/components/MenuPopover/MenuPopover.types.js +5 -0
  142. package/lib-amd/components/MenuPopover/MenuPopover.types.js.map +1 -0
  143. package/lib-amd/components/MenuPopover/index.js +10 -0
  144. package/lib-amd/components/MenuPopover/index.js.map +1 -0
  145. package/lib-amd/components/MenuPopover/renderMenuPopover.js +18 -0
  146. package/lib-amd/components/MenuPopover/renderMenuPopover.js.map +1 -0
  147. package/lib-amd/components/MenuPopover/useMenuPopover.js +82 -0
  148. package/lib-amd/components/MenuPopover/useMenuPopover.js.map +1 -0
  149. package/lib-amd/components/MenuPopover/useMenuPopoverStyles.js +21 -0
  150. package/lib-amd/components/MenuPopover/useMenuPopoverStyles.js.map +1 -0
  151. package/lib-amd/components/MenuSplitGroup/MenuSplitGroup.js +15 -0
  152. package/lib-amd/components/MenuSplitGroup/MenuSplitGroup.js.map +1 -0
  153. package/lib-amd/components/MenuSplitGroup/MenuSplitGroup.types.js +5 -0
  154. package/lib-amd/components/MenuSplitGroup/MenuSplitGroup.types.js.map +1 -0
  155. package/lib-amd/components/MenuSplitGroup/index.js +10 -0
  156. package/lib-amd/components/MenuSplitGroup/index.js.map +1 -0
  157. package/lib-amd/components/MenuSplitGroup/renderMenuSplitGroup.js +14 -0
  158. package/lib-amd/components/MenuSplitGroup/renderMenuSplitGroup.js.map +1 -0
  159. package/lib-amd/components/MenuSplitGroup/useMenuSplitGroup.js +47 -0
  160. package/lib-amd/components/MenuSplitGroup/useMenuSplitGroup.js.map +1 -0
  161. package/lib-amd/components/MenuSplitGroup/useMenuSplitGroupStyles.js +43 -0
  162. package/lib-amd/components/MenuSplitGroup/useMenuSplitGroupStyles.js.map +1 -0
  163. package/lib-amd/components/MenuTrigger/MenuTrigger.js +18 -0
  164. package/lib-amd/components/MenuTrigger/MenuTrigger.js.map +1 -0
  165. package/lib-amd/components/MenuTrigger/MenuTrigger.types.js +5 -0
  166. package/lib-amd/components/MenuTrigger/MenuTrigger.types.js.map +1 -0
  167. package/lib-amd/components/MenuTrigger/index.js +9 -0
  168. package/lib-amd/components/MenuTrigger/index.js.map +1 -0
  169. package/lib-amd/components/MenuTrigger/renderMenuTrigger.js +15 -0
  170. package/lib-amd/components/MenuTrigger/renderMenuTrigger.js.map +1 -0
  171. package/lib-amd/components/MenuTrigger/useMenuTrigger.js +112 -0
  172. package/lib-amd/components/MenuTrigger/useMenuTrigger.js.map +1 -0
  173. package/lib-amd/components/index.js +7 -0
  174. package/lib-amd/components/index.js.map +1 -0
  175. package/lib-amd/contexts/menuContext.js +32 -0
  176. package/lib-amd/contexts/menuContext.js.map +1 -0
  177. package/lib-amd/contexts/menuGroupContext.js +13 -0
  178. package/lib-amd/contexts/menuGroupContext.js.map +1 -0
  179. package/lib-amd/contexts/menuListContext.js +24 -0
  180. package/lib-amd/contexts/menuListContext.js.map +1 -0
  181. package/lib-amd/contexts/menuTriggerContext.js +14 -0
  182. package/lib-amd/contexts/menuTriggerContext.js.map +1 -0
  183. package/lib-amd/index.js +69 -0
  184. package/lib-amd/index.js.map +1 -0
  185. package/lib-amd/selectable/index.js +7 -0
  186. package/lib-amd/selectable/index.js.map +1 -0
  187. package/lib-amd/selectable/types.js +5 -0
  188. package/lib-amd/selectable/types.js.map +1 -0
  189. package/lib-amd/selectable/useCheckmarkStyles.js +28 -0
  190. package/lib-amd/selectable/useCheckmarkStyles.js.map +1 -0
  191. package/lib-amd/utils/index.js +6 -0
  192. package/lib-amd/utils/index.js.map +1 -0
  193. package/lib-amd/utils/useIsSubmenu.js +20 -0
  194. package/lib-amd/utils/useIsSubmenu.js.map +1 -0
  195. package/lib-amd/utils/useOnMenuEnter.js +59 -0
  196. package/lib-amd/utils/useOnMenuEnter.js.map +1 -0
  197. package/lib-commonjs/components/Menu/useMenu.js +13 -7
  198. package/lib-commonjs/components/Menu/useMenu.js.map +1 -1
  199. package/lib-commonjs/components/MenuItem/useMenuItem.js +3 -1
  200. package/lib-commonjs/components/MenuItem/useMenuItem.js.map +1 -1
  201. package/lib-commonjs/components/MenuPopover/useMenuPopover.js +20 -14
  202. package/lib-commonjs/components/MenuPopover/useMenuPopover.js.map +1 -1
  203. package/lib-commonjs/components/MenuTrigger/useMenuTrigger.js +46 -31
  204. package/lib-commonjs/components/MenuTrigger/useMenuTrigger.js.map +1 -1
  205. package/lib-commonjs/index.js.map +1 -1
  206. package/package.json +11 -11
@@ -0,0 +1,15 @@
1
+ define(["require", "exports", "react", "./useMenuItemRadio", "./renderMenuItemRadio", "./useMenuItemRadioStyles"], function (require, exports, React, useMenuItemRadio_1, renderMenuItemRadio_1, useMenuItemRadioStyles_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.MenuItemRadio = void 0;
5
+ /**
6
+ * Define a styled MenuItemRadio, using the `useMenuItemRadio_unstable` hook.
7
+ */
8
+ exports.MenuItemRadio = React.forwardRef(function (props, ref) {
9
+ var state = useMenuItemRadio_1.useMenuItemRadio_unstable(props, ref);
10
+ useMenuItemRadioStyles_1.useMenuItemRadioStyles_unstable(state);
11
+ return renderMenuItemRadio_1.renderMenuItemRadio_unstable(state);
12
+ });
13
+ exports.MenuItemRadio.displayName = 'MenuItemRadio';
14
+ });
15
+ //# sourceMappingURL=MenuItemRadio.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MenuItemRadio.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemRadio/MenuItemRadio.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,aAAa,GAA4C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAChG,IAAM,KAAK,GAAG,4CAAyB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QACpD,wDAA+B,CAAC,KAAK,CAAC,CAAC;QAEvC,OAAO,kDAA4B,CAAC,KAAK,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import * as React from 'react';\nimport { useMenuItemRadio_unstable } from './useMenuItemRadio';\nimport { renderMenuItemRadio_unstable } from './renderMenuItemRadio';\nimport { useMenuItemRadioStyles_unstable } from './useMenuItemRadioStyles';\nimport type { MenuItemRadioProps } from './MenuItemRadio.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled MenuItemRadio, using the `useMenuItemRadio_unstable` hook.\n */\nexport const MenuItemRadio: ForwardRefComponent<MenuItemRadioProps> = React.forwardRef((props, ref) => {\n const state = useMenuItemRadio_unstable(props, ref);\n useMenuItemRadioStyles_unstable(state);\n\n return renderMenuItemRadio_unstable(state);\n});\n\nMenuItemRadio.displayName = 'MenuItemRadio';\n"]}
@@ -0,0 +1,5 @@
1
+ define(["require", "exports"], function (require, exports) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ });
5
+ //# sourceMappingURL=MenuItemRadio.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MenuItemRadio.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemRadio/MenuItemRadio.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MenuItemSelectableProps, MenuItemSelectableState } from '../../selectable/index';\nimport type { MenuItemProps, MenuItemState } from '../MenuItem/MenuItem.types';\n\nexport type MenuItemRadioProps = MenuItemProps & MenuItemSelectableProps;\n\nexport type MenuItemRadioState = MenuItemState & MenuItemSelectableState;\n"]}
@@ -0,0 +1,10 @@
1
+ define(["require", "exports", "tslib", "./MenuItemRadio.types", "./MenuItemRadio", "./renderMenuItemRadio", "./useMenuItemRadio", "./useMenuItemRadioStyles"], function (require, exports, tslib_1, MenuItemRadio_types_1, MenuItemRadio_1, renderMenuItemRadio_1, useMenuItemRadio_1, useMenuItemRadioStyles_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ tslib_1.__exportStar(MenuItemRadio_types_1, exports);
5
+ tslib_1.__exportStar(MenuItemRadio_1, exports);
6
+ tslib_1.__exportStar(renderMenuItemRadio_1, exports);
7
+ tslib_1.__exportStar(useMenuItemRadio_1, exports);
8
+ tslib_1.__exportStar(useMenuItemRadioStyles_1, exports);
9
+ });
10
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemRadio/index.ts"],"names":[],"mappings":";;;IAAA,qDAAsC;IACtC,+CAAgC;IAChC,qDAAsC;IACtC,kDAAmC;IACnC,wDAAyC","sourcesContent":["export * from './MenuItemRadio.types';\nexport * from './MenuItemRadio';\nexport * from './renderMenuItemRadio';\nexport * from './useMenuItemRadio';\nexport * from './useMenuItemRadioStyles';\n"]}
@@ -0,0 +1,19 @@
1
+ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.renderMenuItemRadio_unstable = void 0;
5
+ /**
6
+ * Redefine the render function to add slots. Reuse the menuitemradio structure but add
7
+ * slots to children.
8
+ */
9
+ var renderMenuItemRadio_unstable = function (state) {
10
+ var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
11
+ return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
12
+ slots.checkmark && React.createElement(slots.checkmark, tslib_1.__assign({}, slotProps.checkmark)),
13
+ slots.icon && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)),
14
+ slots.content && React.createElement(slots.content, tslib_1.__assign({}, slotProps.content)),
15
+ slots.secondaryContent && React.createElement(slots.secondaryContent, tslib_1.__assign({}, slotProps.secondaryContent))));
16
+ };
17
+ exports.renderMenuItemRadio_unstable = renderMenuItemRadio_unstable;
18
+ });
19
+ //# sourceMappingURL=renderMenuItemRadio.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"renderMenuItemRadio.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemRadio/renderMenuItemRadio.tsx"],"names":[],"mappings":";;;;IAKA;;;OAGG;IACI,IAAM,4BAA4B,GAAG,UAAC,KAAyB;QAC9D,IAAA,KAAuB,0BAAQ,CAAgB,KAAK,CAAC,EAAnD,KAAK,WAAA,EAAE,SAAS,eAAmC,CAAC;QAE5D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,KAAK,CAAC,SAAS,IAAI,oBAAC,KAAK,CAAC,SAAS,uBAAK,SAAS,CAAC,SAAS,EAAI;YAC/D,KAAK,CAAC,IAAI,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YAChD,KAAK,CAAC,OAAO,IAAI,oBAAC,KAAK,CAAC,OAAO,uBAAK,SAAS,CAAC,OAAO,EAAI;YACzD,KAAK,CAAC,gBAAgB,IAAI,oBAAC,KAAK,CAAC,gBAAgB,uBAAK,SAAS,CAAC,gBAAgB,EAAI,CAC1E,CACd,CAAC;IACJ,CAAC,CAAC;IAXW,QAAA,4BAA4B,gCAWvC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { MenuItemRadioState } from './MenuItemRadio.types';\nimport type { MenuItemSlots } from '../MenuItem/MenuItem.types';\n\n/**\n * Redefine the render function to add slots. Reuse the menuitemradio structure but add\n * slots to children.\n */\nexport const renderMenuItemRadio_unstable = (state: MenuItemRadioState) => {\n const { slots, slotProps } = getSlots<MenuItemSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.checkmark && <slots.checkmark {...slotProps.checkmark} />}\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {slots.content && <slots.content {...slotProps.content} />}\n {slots.secondaryContent && <slots.secondaryContent {...slotProps.secondaryContent} />}\n </slots.root>\n );\n};\n"]}
@@ -0,0 +1,27 @@
1
+ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/react-icons", "../../contexts/menuListContext", "../MenuItem/useMenuItem"], function (require, exports, tslib_1, React, react_utilities_1, react_icons_1, menuListContext_1, useMenuItem_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.useMenuItemRadio_unstable = void 0;
5
+ /**
6
+ * Given user props, returns state and render function for a MenuItemRadio.
7
+ */
8
+ var useMenuItemRadio_unstable = function (props, ref) {
9
+ var name = props.name, value = props.value;
10
+ var checked = menuListContext_1.useMenuListContext_unstable(function (context) {
11
+ var _a;
12
+ var checkedItems = ((_a = context.checkedValues) === null || _a === void 0 ? void 0 : _a[name]) || [];
13
+ return checkedItems.indexOf(value) !== -1;
14
+ });
15
+ var selectRadio = menuListContext_1.useMenuListContext_unstable(function (context) { return context.selectRadio; });
16
+ return tslib_1.__assign(tslib_1.__assign({}, useMenuItem_1.useMenuItem_unstable(tslib_1.__assign(tslib_1.__assign({}, props), { role: 'menuitemradio', 'aria-checked': checked, checkmark: react_utilities_1.resolveShorthand(props.checkmark, {
17
+ defaultProps: { children: React.createElement(react_icons_1.Checkmark16Filled, null) },
18
+ required: true,
19
+ }), onClick: function (e) {
20
+ var _a;
21
+ selectRadio === null || selectRadio === void 0 ? void 0 : selectRadio(e, name, value, checked);
22
+ (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
23
+ } }), ref)), { checked: checked, name: name, value: value });
24
+ };
25
+ exports.useMenuItemRadio_unstable = useMenuItemRadio_unstable;
26
+ });
27
+ //# sourceMappingURL=useMenuItemRadio.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useMenuItemRadio.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadio.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACI,IAAM,yBAAyB,GAAG,UACvC,KAAyB,EACzB,GAAwC;QAEhC,IAAA,IAAI,GAAY,KAAK,KAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;QAE9B,IAAM,OAAO,GAAG,6CAA2B,CAAC,UAAA,OAAO;;YACjD,IAAM,YAAY,GAAG,CAAA,MAAA,OAAO,CAAC,aAAa,0CAAG,IAAI,CAAC,KAAI,EAAE,CAAC;YACzD,OAAO,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAC5C,CAAC,CAAC,CAAC;QAEH,IAAM,WAAW,GAAG,6CAA2B,CAAC,UAAA,OAAO,IAAI,OAAA,OAAO,CAAC,WAAW,EAAnB,CAAmB,CAAC,CAAC;QAEhF,6CACK,kCAAoB,uCAEhB,KAAK,KACR,IAAI,EAAE,eAAe,EACrB,cAAc,EAAE,OAAO,EACvB,SAAS,EAAE,kCAAgB,CAAC,KAAK,CAAC,SAAS,EAAE;gBAC3C,YAAY,EAAE,EAAE,QAAQ,EAAE,oBAAC,+BAAiB,OAAG,EAAE;gBACjD,QAAQ,EAAE,IAAI;aACf,CAAC,EACF,OAAO,EAAE,UAAC,CAAyD;;gBACjE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC;gBACvC,MAAA,KAAK,CAAC,OAAO,+CAAb,KAAK,EAAW,CAAC,CAAC,CAAC;YACrB,CAAC,KAEH,GAAG,CACJ,KACD,OAAO,SAAA,EACP,IAAI,MAAA,EACJ,KAAK,OAAA,IACL;IACJ,CAAC,CAAC;IAlCW,QAAA,yBAAyB,6BAkCpC","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"]}
@@ -0,0 +1,31 @@
1
+ define(["require", "exports", "@griffel/react", "../../selectable/index", "../MenuItem/useMenuItemStyles"], function (require, exports, react_1, index_1, useMenuItemStyles_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.useMenuItemRadioStyles_unstable = exports.menuItemRadioClassNames = void 0;
5
+ exports.menuItemRadioClassNames = {
6
+ root: 'fui-MenuItemRadio',
7
+ icon: 'fui-MenuItemRadio__icon',
8
+ checkmark: 'fui-MenuItemRadio__checkmark',
9
+ content: 'fui-MenuItemRadio__content',
10
+ secondaryContent: 'fui-MenuItemRadio__secondaryContent',
11
+ };
12
+ var useMenuItemRadioStyles_unstable = function (state) {
13
+ state.root.className = react_1.mergeClasses(exports.menuItemRadioClassNames.root, state.root.className);
14
+ if (state.content) {
15
+ state.content.className = react_1.mergeClasses(exports.menuItemRadioClassNames.content, state.content.className);
16
+ }
17
+ if (state.secondaryContent) {
18
+ state.secondaryContent.className = react_1.mergeClasses(exports.menuItemRadioClassNames.secondaryContent, state.secondaryContent.className);
19
+ }
20
+ if (state.icon) {
21
+ state.icon.className = react_1.mergeClasses(exports.menuItemRadioClassNames.icon, state.icon.className);
22
+ }
23
+ if (state.checkmark) {
24
+ state.checkmark.className = react_1.mergeClasses(exports.menuItemRadioClassNames.checkmark, state.checkmark.className);
25
+ }
26
+ useMenuItemStyles_1.useMenuItemStyles_unstable(state);
27
+ index_1.useCheckmarkStyles_unstable(state);
28
+ };
29
+ exports.useMenuItemRadioStyles_unstable = useMenuItemRadioStyles_unstable;
30
+ });
31
+ //# sourceMappingURL=useMenuItemRadioStyles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useMenuItemRadioStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts"],"names":[],"mappings":";;;;IAOa,QAAA,uBAAuB,GAA4D;QAC9F,IAAI,EAAE,mBAAmB;QACzB,IAAI,EAAE,yBAAyB;QAC/B,SAAS,EAAE,8BAA8B;QACzC,OAAO,EAAE,4BAA4B;QACrC,gBAAgB,EAAE,qCAAqC;KACxD,CAAC;IAEK,IAAM,+BAA+B,GAAG,UAAC,KAAyB;QACvE,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CAAC,+BAAuB,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAExF,IAAI,KAAK,CAAC,OAAO,EAAE;YACjB,KAAK,CAAC,OAAO,CAAC,SAAS,GAAG,oBAAY,CAAC,+BAAuB,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;SAClG;QAED,IAAI,KAAK,CAAC,gBAAgB,EAAE;YAC1B,KAAK,CAAC,gBAAgB,CAAC,SAAS,GAAG,oBAAY,CAC7C,+BAAuB,CAAC,gBAAgB,EACxC,KAAK,CAAC,gBAAgB,CAAC,SAAS,CACjC,CAAC;SACH;QAED,IAAI,KAAK,CAAC,IAAI,EAAE;YACd,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CAAC,+BAAuB,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACzF;QAED,IAAI,KAAK,CAAC,SAAS,EAAE;YACnB,KAAK,CAAC,SAAS,CAAC,SAAS,GAAG,oBAAY,CAAC,+BAAuB,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;SACxG;QAED,8CAA0B,CAAC,KAAK,CAAC,CAAC;QAClC,mCAA2B,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC;IAxBW,QAAA,+BAA+B,mCAwB1C","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"]}
@@ -0,0 +1,16 @@
1
+ define(["require", "exports", "react", "./useMenuList", "./renderMenuList", "./useMenuListContextValues", "./useMenuListStyles"], function (require, exports, React, useMenuList_1, renderMenuList_1, useMenuListContextValues_1, useMenuListStyles_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.MenuList = void 0;
5
+ /**
6
+ * Define a styled MenuList, using the `useMenuList_unstable` hook.
7
+ */
8
+ exports.MenuList = React.forwardRef(function (props, ref) {
9
+ var state = useMenuList_1.useMenuList_unstable(props, ref);
10
+ var contextValues = useMenuListContextValues_1.useMenuListContextValues_unstable(state);
11
+ useMenuListStyles_1.useMenuListStyles_unstable(state);
12
+ return renderMenuList_1.renderMenuList_unstable(state, contextValues);
13
+ });
14
+ exports.MenuList.displayName = 'MenuList';
15
+ });
16
+ //# sourceMappingURL=MenuList.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MenuList.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuList/MenuList.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACU,QAAA,QAAQ,GAAuC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QACtF,IAAM,KAAK,GAAG,kCAAoB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAC/C,IAAM,aAAa,GAAG,4DAAiC,CAAC,KAAK,CAAC,CAAC;QAC/D,8CAA0B,CAAC,KAAK,CAAC,CAAC;QAElC,OAAO,wCAAuB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IACvD,CAAC,CAAC,CAAC;IAEH,gBAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import * as React from 'react';\nimport { useMenuList_unstable } from './useMenuList';\nimport { renderMenuList_unstable } from './renderMenuList';\nimport { useMenuListContextValues_unstable } from './useMenuListContextValues';\nimport { useMenuListStyles_unstable } from './useMenuListStyles';\nimport type { MenuListProps } from './MenuList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled MenuList, using the `useMenuList_unstable` hook.\n */\nexport const MenuList: ForwardRefComponent<MenuListProps> = React.forwardRef((props, ref) => {\n const state = useMenuList_unstable(props, ref);\n const contextValues = useMenuListContextValues_unstable(state);\n useMenuListStyles_unstable(state);\n\n return renderMenuList_unstable(state, contextValues);\n});\n\nMenuList.displayName = 'MenuList';\n"]}
@@ -0,0 +1,5 @@
1
+ define(["require", "exports"], function (require, exports) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ });
5
+ //# sourceMappingURL=MenuList.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MenuList.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuList/MenuList.types.ts"],"names":[],"mappings":"","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 Pick<MenuListProps, 'defaultCheckedValues' | 'onCheckedValueChange'> &\n Required<Pick<MenuListProps, 'checkedValues' | 'hasCheckmarks' | 'hasIcons'>> & {\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\nexport type UninitializedMenuListState = Omit<\n MenuListState,\n 'checkedValues' | 'selectRadio' | 'setFocusByFirstCharacter' | 'toggleCheckbox'\n> &\n Partial<Pick<MenuListState, 'checkedValues'>>;\n"]}
@@ -0,0 +1,11 @@
1
+ define(["require", "exports", "tslib", "./MenuList", "./MenuList.types", "./renderMenuList", "./useMenuList", "./useMenuListStyles", "./useMenuListContextValues"], function (require, exports, tslib_1, MenuList_1, MenuList_types_1, renderMenuList_1, useMenuList_1, useMenuListStyles_1, useMenuListContextValues_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ tslib_1.__exportStar(MenuList_1, exports);
5
+ tslib_1.__exportStar(MenuList_types_1, exports);
6
+ tslib_1.__exportStar(renderMenuList_1, exports);
7
+ tslib_1.__exportStar(useMenuList_1, exports);
8
+ tslib_1.__exportStar(useMenuListStyles_1, exports);
9
+ tslib_1.__exportStar(useMenuListContextValues_1, exports);
10
+ });
11
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuList/index.ts"],"names":[],"mappings":";;;IAAA,0CAA2B;IAC3B,gDAAiC;IACjC,gDAAiC;IACjC,6CAA8B;IAC9B,mDAAoC;IACpC,0DAA2C","sourcesContent":["export * from './MenuList';\nexport * from './MenuList.types';\nexport * from './renderMenuList';\nexport * from './useMenuList';\nexport * from './useMenuListStyles';\nexport * from './useMenuListContextValues';\n"]}
@@ -0,0 +1,15 @@
1
+ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "../../contexts/menuListContext"], function (require, exports, tslib_1, React, react_utilities_1, menuListContext_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.renderMenuList_unstable = void 0;
5
+ /**
6
+ * Function that renders the final JSX of the component
7
+ */
8
+ var renderMenuList_unstable = function (state, contextValues) {
9
+ var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
10
+ return (React.createElement(menuListContext_1.MenuListProvider, { value: contextValues.menuList },
11
+ React.createElement(slots.root, tslib_1.__assign({}, slotProps.root))));
12
+ };
13
+ exports.renderMenuList_unstable = renderMenuList_unstable;
14
+ });
15
+ //# sourceMappingURL=renderMenuList.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"renderMenuList.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuList/renderMenuList.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,uBAAuB,GAAG,UAAC,KAAoB,EAAE,aAAoC;QAC1F,IAAA,KAAuB,0BAAQ,CAAgB,KAAK,CAAC,EAAnD,KAAK,WAAA,EAAE,SAAS,eAAmC,CAAC;QAE5D,OAAO,CACL,oBAAC,kCAAgB,IAAC,KAAK,EAAE,aAAa,CAAC,QAAQ;YAC7C,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CACjB,CACpB,CAAC;IACJ,CAAC,CAAC;IARW,QAAA,uBAAuB,2BAQlC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { MenuListContextValues, MenuListSlots, MenuListState } from './MenuList.types';\nimport { MenuListProvider } from '../../contexts/menuListContext';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuList_unstable = (state: MenuListState, contextValues: MenuListContextValues) => {\n const { slots, slotProps } = getSlots<MenuListSlots>(state);\n\n return (\n <MenuListProvider value={contextValues.menuList}>\n <slots.root {...slotProps.root} />\n </MenuListProvider>\n );\n};\n"]}
@@ -0,0 +1,119 @@
1
+ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/react-tabster", "@fluentui/react-context-selector", "../../contexts/menuContext", "../../contexts/menuContext"], function (require, exports, tslib_1, React, react_utilities_1, react_tabster_1, react_context_selector_1, menuContext_1, menuContext_2) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.useMenuList_unstable = void 0;
5
+ /**
6
+ * Returns the props and state required to render the component
7
+ */
8
+ var useMenuList_unstable = function (props, ref) {
9
+ var focusAttributes = react_tabster_1.useArrowNavigationGroup({ circular: true, ignoreDefaultKeydown: { Tab: true } });
10
+ var findAllFocusable = react_tabster_1.useFocusFinders().findAllFocusable;
11
+ var menuContext = useMenuContextSelectors();
12
+ var hasMenuContext = react_context_selector_1.useHasParentContext(menuContext_2.MenuContext);
13
+ if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {
14
+ // TODO throw warnings in development safely
15
+ // eslint-disable-next-line no-console
16
+ console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');
17
+ }
18
+ var innerRef = React.useRef(null);
19
+ var initialState = tslib_1.__assign(tslib_1.__assign({ components: {
20
+ root: 'div',
21
+ }, root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign(tslib_1.__assign({ ref: react_utilities_1.useMergedRefs(ref, innerRef), role: 'menu', 'aria-labelledby': menuContext.triggerId }, focusAttributes), props)), hasIcons: menuContext.hasIcons || false, hasCheckmarks: menuContext.hasCheckmarks || false }, (hasMenuContext && menuContext)), props);
22
+ var setFocusByFirstCharacter = React.useCallback(function (e, itemEl) {
23
+ // TODO use some kind of children registration to reduce dependency on DOM roles
24
+ var acceptedRoles = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];
25
+ if (!innerRef.current) {
26
+ return;
27
+ }
28
+ var menuItems = findAllFocusable(innerRef.current, function (el) { return el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')) !== -1; });
29
+ var startIndex = menuItems.indexOf(itemEl) + 1;
30
+ if (startIndex === menuItems.length) {
31
+ startIndex = 0;
32
+ }
33
+ var firstChars = menuItems.map(function (menuItem) { var _a; return (_a = menuItem.textContent) === null || _a === void 0 ? void 0 : _a.charAt(0).toLowerCase(); });
34
+ var char = e.key.toLowerCase();
35
+ var getIndexFirstChars = function (start, firstChar) {
36
+ for (var i = start; i < firstChars.length; i++) {
37
+ if (char === firstChars[i]) {
38
+ return i;
39
+ }
40
+ }
41
+ return -1;
42
+ };
43
+ // Check remaining slots in the menu
44
+ var index = getIndexFirstChars(startIndex, char);
45
+ // If not found in remaining slots, check from beginning
46
+ if (index === -1) {
47
+ index = getIndexFirstChars(0, char);
48
+ }
49
+ // If match was found...
50
+ if (index > -1) {
51
+ menuItems[index].focus();
52
+ }
53
+ }, [findAllFocusable]);
54
+ var _a = react_utilities_1.useControllableState({
55
+ state: initialState.checkedValues,
56
+ defaultState: initialState.defaultCheckedValues,
57
+ initialState: {},
58
+ }), checkedValues = _a[0], setCheckedValues = _a[1];
59
+ var onCheckedValueChange = initialState.onCheckedValueChange;
60
+ var toggleCheckbox = react_utilities_1.useEventCallback(function (e, name, value, checked) {
61
+ var checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];
62
+ var newCheckedItems = tslib_1.__spreadArray([], checkedItems);
63
+ if (checked) {
64
+ newCheckedItems.splice(newCheckedItems.indexOf(value), 1);
65
+ }
66
+ else {
67
+ newCheckedItems.push(value);
68
+ }
69
+ onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, { name: name, checkedItems: newCheckedItems });
70
+ setCheckedValues(function (s) {
71
+ var _a;
72
+ return (tslib_1.__assign(tslib_1.__assign({}, s), (_a = {}, _a[name] = newCheckedItems, _a)));
73
+ });
74
+ });
75
+ var selectRadio = react_utilities_1.useEventCallback(function (e, name, value) {
76
+ var newCheckedItems = [value];
77
+ setCheckedValues(function (s) {
78
+ var _a;
79
+ return (tslib_1.__assign(tslib_1.__assign({}, s), (_a = {}, _a[name] = newCheckedItems, _a)));
80
+ });
81
+ onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, { name: name, checkedItems: newCheckedItems });
82
+ });
83
+ var state = tslib_1.__assign(tslib_1.__assign({}, initialState), { setFocusByFirstCharacter: setFocusByFirstCharacter, selectRadio: selectRadio, toggleCheckbox: toggleCheckbox, checkedValues: checkedValues !== null && checkedValues !== void 0 ? checkedValues : {} });
84
+ return state;
85
+ };
86
+ exports.useMenuList_unstable = useMenuList_unstable;
87
+ /**
88
+ * Adds some sugar to fetching multiple context selector values
89
+ */
90
+ var useMenuContextSelectors = function () {
91
+ var checkedValues = menuContext_1.useMenuContext_unstable(function (context) { return context.checkedValues; });
92
+ var onCheckedValueChange = menuContext_1.useMenuContext_unstable(function (context) { return context.onCheckedValueChange; });
93
+ var defaultCheckedValues = menuContext_1.useMenuContext_unstable(function (context) { return context.defaultCheckedValues; });
94
+ var triggerId = menuContext_1.useMenuContext_unstable(function (context) { return context.triggerId; });
95
+ var hasIcons = menuContext_1.useMenuContext_unstable(function (context) { return context.hasIcons; });
96
+ var hasCheckmarks = menuContext_1.useMenuContext_unstable(function (context) { return context.hasCheckmarks; });
97
+ return {
98
+ checkedValues: checkedValues,
99
+ onCheckedValueChange: onCheckedValueChange,
100
+ defaultCheckedValues: defaultCheckedValues,
101
+ triggerId: triggerId,
102
+ hasIcons: hasIcons,
103
+ hasCheckmarks: hasCheckmarks,
104
+ };
105
+ };
106
+ /**
107
+ * Helper function to detect if props and MenuContext values are both used
108
+ */
109
+ var usingPropsAndMenuContext = function (props, contextValue, hasMenuContext) {
110
+ var isUsingPropsAndContext = false;
111
+ for (var val in contextValue) {
112
+ if (props[val]) {
113
+ isUsingPropsAndContext = true;
114
+ }
115
+ }
116
+ return hasMenuContext && isUsingPropsAndContext;
117
+ };
118
+ });
119
+ //# sourceMappingURL=useMenuList.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useMenuList.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuList/useMenuList.ts"],"names":[],"mappings":"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","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, UninitializedMenuListState } 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 focusAttributes = useArrowNavigationGroup({ circular: true, ignoreDefaultKeydown: { Tab: true } });\n const { findAllFocusable } = useFocusFinders();\n const menuContext = useMenuContextSelectors();\n const hasMenuContext = useHasParentContext(MenuContext);\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 const initialState: UninitializedMenuListState = {\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 ...(hasMenuContext && menuContext),\n ...props,\n };\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: initialState.checkedValues,\n defaultState: initialState.defaultCheckedValues,\n initialState: {},\n });\n\n const { onCheckedValueChange } = initialState;\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 onCheckedValueChange?.(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 onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n });\n\n const state = {\n ...initialState,\n setFocusByFirstCharacter,\n selectRadio,\n toggleCheckbox,\n checkedValues: checkedValues ?? {},\n };\n\n return state;\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 defaultCheckedValues = useMenuContext_unstable(context => context.defaultCheckedValues);\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 defaultCheckedValues,\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"]}
@@ -0,0 +1,21 @@
1
+ define(["require", "exports"], function (require, exports) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.useMenuListContextValues_unstable = void 0;
5
+ function useMenuListContextValues_unstable(state) {
6
+ var checkedValues = state.checkedValues, hasCheckmarks = state.hasCheckmarks, hasIcons = state.hasIcons, onCheckedValueChange = state.onCheckedValueChange, selectRadio = state.selectRadio, setFocusByFirstCharacter = state.setFocusByFirstCharacter, toggleCheckbox = state.toggleCheckbox;
7
+ // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
8
+ var menuList = {
9
+ checkedValues: checkedValues,
10
+ hasCheckmarks: hasCheckmarks,
11
+ hasIcons: hasIcons,
12
+ onCheckedValueChange: onCheckedValueChange,
13
+ selectRadio: selectRadio,
14
+ setFocusByFirstCharacter: setFocusByFirstCharacter,
15
+ toggleCheckbox: toggleCheckbox,
16
+ };
17
+ return { menuList: menuList };
18
+ }
19
+ exports.useMenuListContextValues_unstable = useMenuListContextValues_unstable;
20
+ });
21
+ //# sourceMappingURL=useMenuListContextValues.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useMenuListContextValues.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuList/useMenuListContextValues.ts"],"names":[],"mappings":";;;;IAEA,SAAgB,iCAAiC,CAAC,KAAoB;QAElE,IAAA,aAAa,GAOX,KAAK,cAPM,EACb,aAAa,GAMX,KAAK,cANM,EACb,QAAQ,GAKN,KAAK,SALC,EACR,oBAAoB,GAIlB,KAAK,qBAJa,EACpB,WAAW,GAGT,KAAK,YAHI,EACX,wBAAwB,GAEtB,KAAK,yBAFiB,EACxB,cAAc,GACZ,KAAK,eADO,CACN;QAEV,mGAAmG;QACnG,IAAM,QAAQ,GAAG;YACf,aAAa,eAAA;YACb,aAAa,eAAA;YACb,QAAQ,UAAA;YACR,oBAAoB,sBAAA;YACpB,WAAW,aAAA;YACX,wBAAwB,0BAAA;YACxB,cAAc,gBAAA;SACf,CAAC;QAEF,OAAO,EAAE,QAAQ,UAAA,EAAE,CAAC;IACtB,CAAC;IAvBD,8EAuBC","sourcesContent":["import type { MenuListContextValues, MenuListState } from './MenuList.types';\n\nexport function useMenuListContextValues_unstable(state: MenuListState): MenuListContextValues {\n const {\n checkedValues,\n hasCheckmarks,\n hasIcons,\n onCheckedValueChange,\n selectRadio,\n setFocusByFirstCharacter,\n toggleCheckbox,\n } = state;\n\n // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n const menuList = {\n checkedValues,\n hasCheckmarks,\n hasIcons,\n onCheckedValueChange,\n selectRadio,\n setFocusByFirstCharacter,\n toggleCheckbox,\n };\n\n return { menuList };\n}\n"]}
@@ -0,0 +1,21 @@
1
+ define(["require", "exports", "tslib", "@griffel/react"], function (require, exports, tslib_1, react_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.useMenuListStyles_unstable = exports.menuListClassNames = void 0;
5
+ exports.menuListClassNames = {
6
+ root: 'fui-MenuList',
7
+ };
8
+ var useStyles = react_1.makeStyles({
9
+ root: tslib_1.__assign({ display: 'flex', flexDirection: 'column' }, react_1.shorthands.gap('2px')),
10
+ });
11
+ /**
12
+ * Apply styling to the Menu slots based on the state
13
+ */
14
+ var useMenuListStyles_unstable = function (state) {
15
+ var styles = useStyles();
16
+ state.root.className = react_1.mergeClasses(exports.menuListClassNames.root, styles.root, state.root.className);
17
+ return state;
18
+ };
19
+ exports.useMenuListStyles_unstable = useMenuListStyles_unstable;
20
+ });
21
+ //# sourceMappingURL=useMenuListStyles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useMenuListStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuList/useMenuListStyles.ts"],"names":[],"mappings":";;;;IAIa,QAAA,kBAAkB,GAAkC;QAC/D,IAAI,EAAE,cAAc;KACrB,CAAC;IAEF,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,IAAI,qBACF,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,QAAQ,IACpB,kBAAU,CAAC,GAAG,CAAC,KAAK,CAAC,CACzB;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,0BAA0B,GAAG,UAAC,KAAoB;QAC7D,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CAAC,0BAAkB,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAChG,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAJW,QAAA,0BAA0B,8BAIrC","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport type { MenuListSlots, MenuListState } from './MenuList.types';\n\nexport const menuListClassNames: SlotClassNames<MenuListSlots> = {\n root: 'fui-MenuList',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n ...shorthands.gap('2px'),\n },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuListStyles_unstable = (state: MenuListState): MenuListState => {\n const styles = useStyles();\n state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.root.className);\n return state;\n};\n"]}
@@ -0,0 +1,15 @@
1
+ define(["require", "exports", "react", "./useMenuPopover", "./useMenuPopoverStyles", "./renderMenuPopover"], function (require, exports, React, useMenuPopover_1, useMenuPopoverStyles_1, renderMenuPopover_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.MenuPopover = void 0;
5
+ /**
6
+ * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus
7
+ */
8
+ exports.MenuPopover = React.forwardRef(function (props, ref) {
9
+ var state = useMenuPopover_1.useMenuPopover_unstable(props, ref);
10
+ useMenuPopoverStyles_1.useMenuPopoverStyles_unstable(state);
11
+ return renderMenuPopover_1.renderMenuPopover_unstable(state);
12
+ });
13
+ exports.MenuPopover.displayName = 'MenuPopover';
14
+ });
15
+ //# sourceMappingURL=MenuPopover.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MenuPopover.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,WAAW,GAA0C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC5F,IAAM,KAAK,GAAG,wCAAuB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAElD,oDAA6B,CAAC,KAAK,CAAC,CAAC;QACrC,OAAO,8CAA0B,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;IAEH,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import * as React from 'react';\nimport { useMenuPopover_unstable } from './useMenuPopover';\nimport { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles';\nimport { renderMenuPopover_unstable } from './renderMenuPopover';\nimport type { MenuPopoverProps } from './MenuPopover.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus\n */\nexport const MenuPopover: ForwardRefComponent<MenuPopoverProps> = React.forwardRef((props, ref) => {\n const state = useMenuPopover_unstable(props, ref);\n\n useMenuPopoverStyles_unstable(state);\n return renderMenuPopover_unstable(state);\n});\n\nMenuPopover.displayName = 'MenuPopover';\n"]}
@@ -0,0 +1,5 @@
1
+ define(["require", "exports"], function (require, exports) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ });
5
+ //# sourceMappingURL=MenuPopover.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MenuPopover.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuPopoverSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * MenuPopover Props\n */\nexport type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;\n\n/**\n * State used in rendering MenuPopover\n */\nexport type MenuPopoverState = ComponentState<MenuPopoverSlots> & {\n /**\n * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order\n * This option is disregarded for submenus\n */\n inline: boolean;\n};\n"]}
@@ -0,0 +1,10 @@
1
+ define(["require", "exports", "tslib", "./MenuPopover", "./MenuPopover.types", "./renderMenuPopover", "./useMenuPopover", "./useMenuPopoverStyles"], function (require, exports, tslib_1, MenuPopover_1, MenuPopover_types_1, renderMenuPopover_1, useMenuPopover_1, useMenuPopoverStyles_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ tslib_1.__exportStar(MenuPopover_1, exports);
5
+ tslib_1.__exportStar(MenuPopover_types_1, exports);
6
+ tslib_1.__exportStar(renderMenuPopover_1, exports);
7
+ tslib_1.__exportStar(useMenuPopover_1, exports);
8
+ tslib_1.__exportStar(useMenuPopoverStyles_1, exports);
9
+ });
10
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/index.ts"],"names":[],"mappings":";;;IAAA,6CAA8B;IAC9B,mDAAoC;IACpC,mDAAoC;IACpC,gDAAiC;IACjC,sDAAuC","sourcesContent":["export * from './MenuPopover';\nexport * from './MenuPopover.types';\nexport * from './renderMenuPopover';\nexport * from './useMenuPopover';\nexport * from './useMenuPopoverStyles';\n"]}
@@ -0,0 +1,18 @@
1
+ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/react-portal"], function (require, exports, tslib_1, React, react_utilities_1, react_portal_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.renderMenuPopover_unstable = void 0;
5
+ /**
6
+ * Render the final JSX of MenuPopover
7
+ */
8
+ var renderMenuPopover_unstable = function (state) {
9
+ var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
10
+ if (state.inline) {
11
+ return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root));
12
+ }
13
+ return (React.createElement(react_portal_1.Portal, null,
14
+ React.createElement(slots.root, tslib_1.__assign({}, slotProps.root))));
15
+ };
16
+ exports.renderMenuPopover_unstable = renderMenuPopover_unstable;
17
+ });
18
+ //# sourceMappingURL=renderMenuPopover.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"renderMenuPopover.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/renderMenuPopover.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,0BAA0B,GAAG,UAAC,KAAuB;QAC1D,IAAA,KAAuB,0BAAQ,CAAmB,KAAK,CAAC,EAAtD,KAAK,WAAA,EAAE,SAAS,eAAsC,CAAC;QAE/D,IAAI,KAAK,CAAC,MAAM,EAAE;YAChB,OAAO,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CAAC;SAC3C;QAED,OAAO,CACL,oBAAC,qBAAM;YACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CAC3B,CACV,CAAC;IACJ,CAAC,CAAC;IAZW,QAAA,0BAA0B,8BAYrC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport { Portal } from '@fluentui/react-portal';\n\n/**\n * Render the final JSX of MenuPopover\n */\nexport const renderMenuPopover_unstable = (state: MenuPopoverState) => {\n const { slots, slotProps } = getSlots<MenuPopoverSlots>(state);\n\n if (state.inline) {\n return <slots.root {...slotProps.root} />;\n }\n\n return (\n <Portal>\n <slots.root {...slotProps.root} />\n </Portal>\n );\n};\n"]}
@@ -0,0 +1,82 @@
1
+ define(["require", "exports", "tslib", "react", "@fluentui/keyboard-keys", "@fluentui/react-utilities", "../../contexts/menuContext", "../../utils/index", "@fluentui/react-shared-contexts", "../../utils/useIsSubmenu"], function (require, exports, tslib_1, React, keyboard_keys_1, react_utilities_1, menuContext_1, index_1, react_shared_contexts_1, useIsSubmenu_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.useMenuPopover_unstable = void 0;
5
+ /**
6
+ * Create the state required to render MenuPopover.
7
+ *
8
+ * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,
9
+ * before being passed to renderMenuPopover_unstable.
10
+ *
11
+ * @param props - props from this instance of MenuPopover
12
+ * @param ref - reference to root HTMLElement of MenuPopover
13
+ */
14
+ var useMenuPopover_unstable = function (props, ref) {
15
+ var _a;
16
+ var popoverRef = menuContext_1.useMenuContext_unstable(function (context) { return context.menuPopoverRef; });
17
+ var setOpen = menuContext_1.useMenuContext_unstable(function (context) { return context.setOpen; });
18
+ var open = menuContext_1.useMenuContext_unstable(function (context) { return context.open; });
19
+ var openOnHover = menuContext_1.useMenuContext_unstable(function (context) { return context.openOnHover; });
20
+ var isSubmenu = useIsSubmenu_1.useIsSubmenu();
21
+ var canDispatchCustomEventRef = React.useRef(true);
22
+ var throttleDispatchTimerRef = React.useRef(0);
23
+ var dir = react_shared_contexts_1.useFluent_unstable().dir;
24
+ var CloseArrowKey = dir === 'ltr' ? keyboard_keys_1.ArrowLeft : keyboard_keys_1.ArrowRight;
25
+ // use DOM listener since react events propagate up the react tree
26
+ // no need to do `contains` logic as menus are all positioned in different portals
27
+ var mouseOverListenerCallbackRef = React.useCallback(function (node) {
28
+ if (node) {
29
+ // Dispatches the custom menu mouse enter event with throttling
30
+ // Needs to trigger on mouseover to support keyboard + mouse together
31
+ // i.e. keyboard opens submenus while cursor is still on the parent
32
+ node.addEventListener('mouseover', function (e) {
33
+ if (canDispatchCustomEventRef.current) {
34
+ canDispatchCustomEventRef.current = false;
35
+ index_1.dispatchMenuEnterEvent(popoverRef.current, e);
36
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
37
+ // @ts-ignore #16889 Node setTimeout type leaking
38
+ throttleDispatchTimerRef.current = setTimeout(function () { return (canDispatchCustomEventRef.current = true); }, 250);
39
+ }
40
+ });
41
+ }
42
+ }, [popoverRef, throttleDispatchTimerRef]);
43
+ React.useEffect(function () {
44
+ (function () { return clearTimeout(throttleDispatchTimerRef.current); });
45
+ }, []);
46
+ var inline = (_a = menuContext_1.useMenuContext_unstable(function (context) { return context.inline; })) !== null && _a !== void 0 ? _a : false;
47
+ var rootProps = react_utilities_1.getNativeElementProps('div', tslib_1.__assign(tslib_1.__assign({ role: 'presentation' }, props), { ref: react_utilities_1.useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef) }));
48
+ var onMouseEnterOriginal = rootProps.onMouseEnter, onKeyDownOriginal = rootProps.onKeyDown;
49
+ rootProps.onMouseEnter = react_utilities_1.useEventCallback(function (event) {
50
+ if (openOnHover) {
51
+ setOpen(event, { open: true, keyboard: false, type: 'menuPopoverMouseEnter', event: event });
52
+ }
53
+ onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(event);
54
+ });
55
+ rootProps.onKeyDown = react_utilities_1.useEventCallback(function (event) {
56
+ var _a;
57
+ var key = event.key;
58
+ if (key === keyboard_keys_1.Escape || (isSubmenu && key === CloseArrowKey)) {
59
+ if (open && ((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
60
+ setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event: event });
61
+ // stop propagation to avoid conflicting with other elements that listen for `Escape`
62
+ // e,g: Dialog, Popover and Tooltip
63
+ event.stopPropagation();
64
+ }
65
+ }
66
+ if (key === keyboard_keys_1.Tab) {
67
+ setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event: event });
68
+ event.preventDefault();
69
+ }
70
+ onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(event);
71
+ });
72
+ return {
73
+ inline: inline,
74
+ components: {
75
+ root: 'div',
76
+ },
77
+ root: rootProps,
78
+ };
79
+ };
80
+ exports.useMenuPopover_unstable = useMenuPopover_unstable;
81
+ });
82
+ //# sourceMappingURL=useMenuPopover.js.map