@doist/reactist 11.6.0 → 12.0.3

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 (264) hide show
  1. package/dist/reactist.cjs.development.js +1334 -1494
  2. package/dist/reactist.cjs.development.js.map +1 -1
  3. package/dist/reactist.cjs.production.min.js +1 -1
  4. package/dist/reactist.cjs.production.min.js.map +1 -1
  5. package/es/_virtual/_rollupPluginBabelHelpers.js +18 -21
  6. package/es/_virtual/_rollupPluginBabelHelpers.js.map +1 -1
  7. package/es/components/checkbox/checkbox.js +7 -9
  8. package/es/components/checkbox/checkbox.js.map +1 -1
  9. package/es/components/color-picker/color-picker.js +24 -28
  10. package/es/components/color-picker/color-picker.js.map +1 -1
  11. package/es/components/deprecated-button/deprecated-button.js +16 -18
  12. package/es/components/deprecated-button/deprecated-button.js.map +1 -1
  13. package/es/components/deprecated-loading/deprecated-loading.js +7 -10
  14. package/es/components/deprecated-loading/deprecated-loading.js.map +1 -1
  15. package/es/components/deprecated-modal/deprecated-modal.js +69 -101
  16. package/es/components/deprecated-modal/deprecated-modal.js.map +1 -1
  17. package/es/components/deprecated-modal/index.js +4 -4
  18. package/es/components/deprecated-modal/index.js.map +1 -1
  19. package/es/components/dropdown/dropdown.js +86 -85
  20. package/es/components/dropdown/dropdown.js.map +1 -1
  21. package/es/components/icons/CloseIcon.svg.js +9 -11
  22. package/es/components/icons/CloseIcon.svg.js.map +1 -1
  23. package/es/components/input/input.js +4 -3
  24. package/es/components/input/input.js.map +1 -1
  25. package/es/components/key-capturer/key-capturer.js +22 -19
  26. package/es/components/key-capturer/key-capturer.js.map +1 -1
  27. package/es/components/keyboard-shortcut/keyboard-shortcut.js +20 -26
  28. package/es/components/keyboard-shortcut/keyboard-shortcut.js.map +1 -1
  29. package/es/components/menu/menu.js +114 -143
  30. package/es/components/menu/menu.js.map +1 -1
  31. package/es/components/notification/notification.js +32 -32
  32. package/es/components/notification/notification.js.map +1 -1
  33. package/es/components/popover/popover.js +85 -91
  34. package/es/components/popover/popover.js.map +1 -1
  35. package/es/components/popover/positioning-utils.js +49 -65
  36. package/es/components/popover/positioning-utils.js.map +1 -1
  37. package/es/components/progress-bar/progress-bar.js +8 -8
  38. package/es/components/progress-bar/progress-bar.js.map +1 -1
  39. package/es/components/select/select.js +20 -25
  40. package/es/components/select/select.js.map +1 -1
  41. package/es/components/time/time-utils.js +30 -47
  42. package/es/components/time/time-utils.js.map +1 -1
  43. package/es/components/time/time.js +43 -56
  44. package/es/components/time/time.js.map +1 -1
  45. package/es/components/tooltip/tooltip.js +40 -46
  46. package/es/components/tooltip/tooltip.js.map +1 -1
  47. package/es/hooks/use-previous/use-previous.js +2 -2
  48. package/es/hooks/use-previous/use-previous.js.map +1 -1
  49. package/es/new-components/alert/alert.js +7 -6
  50. package/es/new-components/alert/alert.js.map +1 -1
  51. package/es/new-components/avatar/avatar.js +19 -18
  52. package/es/new-components/avatar/avatar.js.map +1 -1
  53. package/es/new-components/avatar/utils.js +12 -9
  54. package/es/new-components/avatar/utils.js.map +1 -1
  55. package/es/new-components/base-button/base-button.js +25 -29
  56. package/es/new-components/base-button/base-button.js.map +1 -1
  57. package/es/new-components/base-field/base-field.js +20 -18
  58. package/es/new-components/base-field/base-field.js.map +1 -1
  59. package/es/new-components/box/box.js +51 -52
  60. package/es/new-components/box/box.js.map +1 -1
  61. package/es/new-components/button/button.js +13 -15
  62. package/es/new-components/button/button.js.map +1 -1
  63. package/es/new-components/button-link/button-link.js +13 -15
  64. package/es/new-components/button-link/button-link.js.map +1 -1
  65. package/es/new-components/checkbox-field/checkbox-field.js +25 -33
  66. package/es/new-components/checkbox-field/checkbox-field.js.map +1 -1
  67. package/es/new-components/checkbox-field/checkbox-icon.js +21 -19
  68. package/es/new-components/checkbox-field/checkbox-icon.js.map +1 -1
  69. package/es/new-components/columns/columns.js +24 -27
  70. package/es/new-components/columns/columns.js.map +1 -1
  71. package/es/new-components/common-helpers.js +3 -3
  72. package/es/new-components/common-helpers.js.map +1 -1
  73. package/es/new-components/divider/divider.js +7 -6
  74. package/es/new-components/divider/divider.js.map +1 -1
  75. package/es/new-components/heading/heading.js +17 -17
  76. package/es/new-components/heading/heading.js.map +1 -1
  77. package/es/new-components/hidden/hidden.js +14 -13
  78. package/es/new-components/hidden/hidden.js.map +1 -1
  79. package/es/new-components/hidden-visually/hidden-visually.js +3 -2
  80. package/es/new-components/hidden-visually/hidden-visually.js.map +1 -1
  81. package/es/new-components/icons/alert-icon.js +13 -11
  82. package/es/new-components/icons/alert-icon.js.map +1 -1
  83. package/es/new-components/icons/close-icon.js +2 -1
  84. package/es/new-components/icons/close-icon.js.map +1 -1
  85. package/es/new-components/icons/password-hidden-icon.js +2 -1
  86. package/es/new-components/icons/password-hidden-icon.js.map +1 -1
  87. package/es/new-components/icons/password-visible-icon.js +2 -1
  88. package/es/new-components/icons/password-visible-icon.js.map +1 -1
  89. package/es/new-components/inline/inline.js +15 -19
  90. package/es/new-components/inline/inline.js.map +1 -1
  91. package/es/new-components/loading/loading.js +11 -10
  92. package/es/new-components/loading/loading.js.map +1 -1
  93. package/es/new-components/modal/modal.js +60 -64
  94. package/es/new-components/modal/modal.js.map +1 -1
  95. package/es/new-components/notice/notice.js +5 -4
  96. package/es/new-components/notice/notice.js.map +1 -1
  97. package/es/new-components/password-field/password-field.js +40 -46
  98. package/es/new-components/password-field/password-field.js.map +1 -1
  99. package/es/new-components/responsive-props.js +5 -5
  100. package/es/new-components/responsive-props.js.map +1 -1
  101. package/es/new-components/select-field/select-field.js +23 -23
  102. package/es/new-components/select-field/select-field.js.map +1 -1
  103. package/es/new-components/spinner/spinner.js +3 -3
  104. package/es/new-components/spinner/spinner.js.map +1 -1
  105. package/es/new-components/stack/stack.js +18 -22
  106. package/es/new-components/stack/stack.js.map +1 -1
  107. package/es/new-components/switch-field/switch-field.js +31 -41
  108. package/es/new-components/switch-field/switch-field.js.map +1 -1
  109. package/es/new-components/tabs/tabs.js +92 -78
  110. package/es/new-components/tabs/tabs.js.map +1 -1
  111. package/es/new-components/tabs/tabs.module.css.js +1 -1
  112. package/es/new-components/text/text.js +16 -17
  113. package/es/new-components/text/text.js.map +1 -1
  114. package/es/new-components/text-area/text-area.js +14 -14
  115. package/es/new-components/text-area/text-area.js.map +1 -1
  116. package/es/new-components/text-field/text-field.js +21 -22
  117. package/es/new-components/text-field/text-field.js.map +1 -1
  118. package/es/new-components/text-link/text-link.js +10 -10
  119. package/es/new-components/text-link/text-link.js.map +1 -1
  120. package/es/utils/polymorphism.js.map +1 -1
  121. package/lib/_virtual/_rollupPluginBabelHelpers.js +1 -1
  122. package/lib/components/checkbox/checkbox.js +1 -1
  123. package/lib/components/checkbox/checkbox.js.map +1 -1
  124. package/lib/components/color-picker/color-picker.js +1 -1
  125. package/lib/components/color-picker/color-picker.js.map +1 -1
  126. package/lib/components/deprecated-button/deprecated-button.d.ts +3 -3
  127. package/lib/components/deprecated-button/deprecated-button.js +1 -1
  128. package/lib/components/deprecated-button/deprecated-button.js.map +1 -1
  129. package/lib/components/deprecated-loading/deprecated-loading.js +1 -1
  130. package/lib/components/deprecated-loading/deprecated-loading.js.map +1 -1
  131. package/lib/components/deprecated-modal/deprecated-modal.d.ts +2 -2
  132. package/lib/components/deprecated-modal/deprecated-modal.js +1 -1
  133. package/lib/components/deprecated-modal/deprecated-modal.js.map +1 -1
  134. package/lib/components/deprecated-modal/index.js.map +1 -1
  135. package/lib/components/dropdown/dropdown.d.ts +5 -2
  136. package/lib/components/dropdown/dropdown.js +1 -1
  137. package/lib/components/dropdown/dropdown.js.map +1 -1
  138. package/lib/components/icons/CloseIcon.svg.js +1 -1
  139. package/lib/components/icons/CloseIcon.svg.js.map +1 -1
  140. package/lib/components/input/input.js +1 -1
  141. package/lib/components/input/input.js.map +1 -1
  142. package/lib/components/key-capturer/key-capturer.d.ts +1 -1
  143. package/lib/components/key-capturer/key-capturer.js +1 -1
  144. package/lib/components/key-capturer/key-capturer.js.map +1 -1
  145. package/lib/components/keyboard-shortcut/keyboard-shortcut.js +1 -1
  146. package/lib/components/keyboard-shortcut/keyboard-shortcut.js.map +1 -1
  147. package/lib/components/menu/menu.d.ts +9 -8
  148. package/lib/components/menu/menu.js +1 -1
  149. package/lib/components/menu/menu.js.map +1 -1
  150. package/lib/components/notification/notification.js +1 -1
  151. package/lib/components/notification/notification.js.map +1 -1
  152. package/lib/components/popover/popover.d.ts +1 -1
  153. package/lib/components/popover/popover.js +1 -1
  154. package/lib/components/popover/popover.js.map +1 -1
  155. package/lib/components/popover/positioning-utils.js +1 -1
  156. package/lib/components/popover/positioning-utils.js.map +1 -1
  157. package/lib/components/progress-bar/progress-bar.js +1 -1
  158. package/lib/components/progress-bar/progress-bar.js.map +1 -1
  159. package/lib/components/select/select.js +1 -1
  160. package/lib/components/select/select.js.map +1 -1
  161. package/lib/components/time/time-utils.js +1 -1
  162. package/lib/components/time/time-utils.js.map +1 -1
  163. package/lib/components/time/time.js +1 -1
  164. package/lib/components/time/time.js.map +1 -1
  165. package/lib/components/tooltip/index.d.ts +1 -2
  166. package/lib/components/tooltip/tooltip.d.ts +3 -3
  167. package/lib/components/tooltip/tooltip.js +1 -1
  168. package/lib/components/tooltip/tooltip.js.map +1 -1
  169. package/lib/hooks/use-previous/use-previous.js +1 -1
  170. package/lib/hooks/use-previous/use-previous.js.map +1 -1
  171. package/lib/index.d.ts +2 -1
  172. package/lib/new-components/alert/alert.d.ts +1 -1
  173. package/lib/new-components/alert/alert.js +1 -1
  174. package/lib/new-components/alert/alert.js.map +1 -1
  175. package/lib/new-components/avatar/avatar.js +1 -1
  176. package/lib/new-components/avatar/avatar.js.map +1 -1
  177. package/lib/new-components/avatar/utils.d.ts +1 -1
  178. package/lib/new-components/avatar/utils.js +1 -1
  179. package/lib/new-components/avatar/utils.js.map +1 -1
  180. package/lib/new-components/base-button/base-button.js +1 -1
  181. package/lib/new-components/base-button/base-button.js.map +1 -1
  182. package/lib/new-components/base-field/base-field.d.ts +1 -1
  183. package/lib/new-components/base-field/base-field.js +1 -1
  184. package/lib/new-components/base-field/base-field.js.map +1 -1
  185. package/lib/new-components/box/box.js +1 -1
  186. package/lib/new-components/box/box.js.map +1 -1
  187. package/lib/new-components/button/button.d.ts +1 -58
  188. package/lib/new-components/button/button.js +1 -1
  189. package/lib/new-components/button/button.js.map +1 -1
  190. package/lib/new-components/button-link/button-link.js +1 -1
  191. package/lib/new-components/button-link/button-link.js.map +1 -1
  192. package/lib/new-components/checkbox-field/checkbox-field.d.ts +1 -1
  193. package/lib/new-components/checkbox-field/checkbox-field.js +1 -1
  194. package/lib/new-components/checkbox-field/checkbox-field.js.map +1 -1
  195. package/lib/new-components/checkbox-field/checkbox-icon.js +1 -1
  196. package/lib/new-components/checkbox-field/checkbox-icon.js.map +1 -1
  197. package/lib/new-components/columns/columns.js +1 -1
  198. package/lib/new-components/columns/columns.js.map +1 -1
  199. package/lib/new-components/common-helpers.js +1 -1
  200. package/lib/new-components/common-helpers.js.map +1 -1
  201. package/lib/new-components/common-types.d.ts +1 -1
  202. package/lib/new-components/divider/divider.js +1 -1
  203. package/lib/new-components/divider/divider.js.map +1 -1
  204. package/lib/new-components/heading/heading.d.ts +2 -2
  205. package/lib/new-components/heading/heading.js +1 -1
  206. package/lib/new-components/heading/heading.js.map +1 -1
  207. package/lib/new-components/hidden/hidden.js +1 -1
  208. package/lib/new-components/hidden/hidden.js.map +1 -1
  209. package/lib/new-components/hidden-visually/hidden-visually.js +1 -1
  210. package/lib/new-components/hidden-visually/hidden-visually.js.map +1 -1
  211. package/lib/new-components/icons/alert-icon.d.ts +1 -1
  212. package/lib/new-components/icons/alert-icon.js +1 -1
  213. package/lib/new-components/icons/alert-icon.js.map +1 -1
  214. package/lib/new-components/icons/close-icon.js +1 -1
  215. package/lib/new-components/icons/close-icon.js.map +1 -1
  216. package/lib/new-components/icons/password-hidden-icon.js +1 -1
  217. package/lib/new-components/icons/password-hidden-icon.js.map +1 -1
  218. package/lib/new-components/icons/password-visible-icon.js +1 -1
  219. package/lib/new-components/icons/password-visible-icon.js.map +1 -1
  220. package/lib/new-components/inline/inline.js +1 -1
  221. package/lib/new-components/inline/inline.js.map +1 -1
  222. package/lib/new-components/loading/loading.js +1 -1
  223. package/lib/new-components/loading/loading.js.map +1 -1
  224. package/lib/new-components/modal/modal.js +1 -1
  225. package/lib/new-components/modal/modal.js.map +1 -1
  226. package/lib/new-components/notice/notice.d.ts +1 -1
  227. package/lib/new-components/notice/notice.js +1 -1
  228. package/lib/new-components/notice/notice.js.map +1 -1
  229. package/lib/new-components/password-field/password-field.d.ts +1 -1
  230. package/lib/new-components/password-field/password-field.js +1 -1
  231. package/lib/new-components/password-field/password-field.js.map +1 -1
  232. package/lib/new-components/responsive-props.d.ts +1 -1
  233. package/lib/new-components/responsive-props.js +1 -1
  234. package/lib/new-components/responsive-props.js.map +1 -1
  235. package/lib/new-components/select-field/select-field.d.ts +1 -1
  236. package/lib/new-components/select-field/select-field.js +1 -1
  237. package/lib/new-components/select-field/select-field.js.map +1 -1
  238. package/lib/new-components/spinner/spinner.js +1 -1
  239. package/lib/new-components/spinner/spinner.js.map +1 -1
  240. package/lib/new-components/stack/stack.js +1 -1
  241. package/lib/new-components/stack/stack.js.map +1 -1
  242. package/lib/new-components/switch-field/switch-field.d.ts +1 -1
  243. package/lib/new-components/switch-field/switch-field.js +1 -1
  244. package/lib/new-components/switch-field/switch-field.js.map +1 -1
  245. package/lib/new-components/tabs/tabs.d.ts +13 -3
  246. package/lib/new-components/tabs/tabs.js +1 -1
  247. package/lib/new-components/tabs/tabs.js.map +1 -1
  248. package/lib/new-components/tabs/tabs.module.css.js +1 -1
  249. package/lib/new-components/test-helpers.d.ts +4 -3
  250. package/lib/new-components/text/text.js +1 -1
  251. package/lib/new-components/text/text.js.map +1 -1
  252. package/lib/new-components/text-area/text-area.js +1 -1
  253. package/lib/new-components/text-area/text-area.js.map +1 -1
  254. package/lib/new-components/text-field/text-field.d.ts +1 -1
  255. package/lib/new-components/text-field/text-field.js +1 -1
  256. package/lib/new-components/text-field/text-field.js.map +1 -1
  257. package/lib/new-components/text-link/text-link.js +1 -1
  258. package/lib/new-components/text-link/text-link.js.map +1 -1
  259. package/lib/utils/polymorphism.js.map +1 -1
  260. package/package.json +45 -38
  261. package/styles/menu.css +1 -1
  262. package/styles/reactist.css +2 -2
  263. package/styles/tabs.css +1 -1
  264. package/styles/tabs.module.css.css +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"key-capturer.js","sources":["../../../src/components/key-capturer/key-capturer.tsx"],"sourcesContent":["import React, { useRef } from 'react'\n\ntype Key = 'ArrowUp' | 'ArrowRight' | 'ArrowDown' | 'ArrowLeft' | 'Enter' | 'Backspace' | 'Escape'\n\nconst SUPPORTED_KEYS: Record<string, Key> = {\n ARROW_UP: 'ArrowUp',\n ARROW_RIGHT: 'ArrowRight',\n ARROW_DOWN: 'ArrowDown',\n ARROW_LEFT: 'ArrowLeft',\n ENTER: 'Enter',\n BACKSPACE: 'Backspace',\n ESCAPE: 'Escape',\n}\n\nconst KeyCapturerResolver = {\n resolveByKey(eventKey: string): Key | null {\n switch (eventKey) {\n case 'Left': // IE specific\n case 'ArrowLeft': {\n return 'ArrowLeft'\n }\n case 'Up': // IE specific\n case 'ArrowUp': {\n return 'ArrowUp'\n }\n case 'Right': // IE specific\n case 'ArrowRight': {\n return 'ArrowRight'\n }\n case 'Down': // IE specific\n case 'ArrowDown': {\n return 'ArrowDown'\n }\n case 'Enter': {\n return 'Enter'\n }\n case 'Backspace': {\n return 'Backspace'\n }\n case 'Esc': // IE specific\n case 'Escape': {\n return 'Escape'\n }\n default: {\n return null\n }\n }\n },\n\n resolveByKeyCode(keyCode: number): Key | null {\n switch (keyCode) {\n case 37: {\n return 'ArrowLeft'\n }\n case 38: {\n return 'ArrowUp'\n }\n case 39: {\n return 'ArrowRight'\n }\n case 40: {\n return 'ArrowDown'\n }\n case 13: {\n return 'Enter'\n }\n case 8: {\n return 'Backspace'\n }\n case 27: {\n return 'Escape'\n }\n default: {\n return null\n }\n }\n },\n}\n\ntype EventHandler = (event: React.SyntheticEvent) => void\n\ntype EventHandlerProps = {\n onArrowUp?: EventHandler\n onArrowDown?: EventHandler\n onArrowLeft?: EventHandler\n onArrowRight?: EventHandler\n onEnter?: EventHandler\n onBackspace?: EventHandler\n onEscape?: EventHandler\n}\n\ntype PropagateProps = {\n propagateArrowUp?: boolean\n propagateArrowDown?: boolean\n propagateArrowLeft?: boolean\n propagateArrowRight?: boolean\n propagateEnter?: boolean\n propagateBackspace?: boolean\n propagateEscape?: boolean\n}\n\nconst keyEventHandlerMapping: Record<Key, keyof EventHandlerProps> = {\n ArrowUp: 'onArrowUp',\n ArrowDown: 'onArrowDown',\n ArrowLeft: 'onArrowLeft',\n ArrowRight: 'onArrowRight',\n Enter: 'onEnter',\n Backspace: 'onBackspace',\n Escape: 'onEscape',\n}\n\nconst keyPropagatePropMapping: Record<Key, keyof PropagateProps> = {\n ArrowUp: 'propagateArrowUp',\n ArrowDown: 'propagateArrowDown',\n ArrowLeft: 'propagateArrowLeft',\n ArrowRight: 'propagateArrowRight',\n Enter: 'propagateEnter',\n Backspace: 'propagateBackspace',\n Escape: 'propagateEscape',\n}\n\ntype KeyCapturerProps = EventHandlerProps &\n PropagateProps & {\n eventName?: 'onKeyDown' | 'onKeyDownCapture' | 'onKeyUp' | 'onKeyUpCapture'\n children: React.ReactElement<unknown>\n }\n\n/**\n * Use this component to wrap anything you want to handle key events for (e.g. an input).\n * You can specify the `eventName` to capture (defaults to `onKeyDown`).\n * Check the SUPPORTED_KEYS map to see which keys are supported and supply the respective\n * `on${Key}` prop (i.e. `onEnter` or `onArrowDown`).\n * If you want the default behaviour to be preserved (i.e. only want to hook into the event\n * instead of replacing it) set the `propagate${Key}` prop (e.g. propagateBackspace).\n */\nfunction KeyCapturer(props: KeyCapturerProps) {\n const { children, eventName = 'onKeyDown' } = props\n const composingRef = useRef(false)\n const composingEventHandlers = props.onEnter\n ? {\n onCompositionStart: () => {\n composingRef.current = true\n },\n onCompositionEnd: () => {\n composingRef.current = false\n },\n }\n : undefined\n\n function handleKeyEvent(event: React.KeyboardEvent<HTMLInputElement>) {\n // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode\n const key =\n event.key !== undefined\n ? KeyCapturerResolver.resolveByKey(event.key)\n : KeyCapturerResolver.resolveByKeyCode(event.keyCode)\n\n if (!key) return\n const propagateEvent = props[keyPropagatePropMapping[key]] || false\n const eventHandler = props[keyEventHandlerMapping[key]]\n\n if (key === 'Enter' && eventHandler) {\n if (\n composingRef.current ||\n // Safari fires the onCompositionEnd event before the keydown event, so we\n // have to rely on the 229 keycode, which is Enter when fired from an IME\n // https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode\n (event.keyCode || event.which) === 229\n ) {\n return\n }\n }\n\n if (eventHandler) {\n eventHandler(event)\n if (!propagateEvent) {\n event.preventDefault()\n event.stopPropagation()\n }\n }\n }\n\n return React.cloneElement(children, {\n [eventName]: handleKeyEvent,\n ...composingEventHandlers,\n })\n}\n\nexport { KeyCapturer, KeyCapturerResolver, SUPPORTED_KEYS }\n"],"names":["SUPPORTED_KEYS","ARROW_UP","ARROW_RIGHT","ARROW_DOWN","ARROW_LEFT","ENTER","BACKSPACE","ESCAPE","KeyCapturerResolver","resolveByKey","eventKey","resolveByKeyCode","keyCode","keyEventHandlerMapping","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Enter","Backspace","Escape","keyPropagatePropMapping","KeyCapturer","props","children","eventName","composingRef","useRef","composingEventHandlers","onEnter","onCompositionStart","current","onCompositionEnd","undefined","handleKeyEvent","event","key","propagateEvent","eventHandler","which","preventDefault","stopPropagation","React","cloneElement"],"mappings":"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"}
1
+ {"version":3,"file":"key-capturer.js","sources":["../../../src/components/key-capturer/key-capturer.tsx"],"sourcesContent":["import React, { useRef } from 'react'\n\ntype Key = 'ArrowUp' | 'ArrowRight' | 'ArrowDown' | 'ArrowLeft' | 'Enter' | 'Backspace' | 'Escape'\n\nconst SUPPORTED_KEYS: Record<string, Key> = {\n ARROW_UP: 'ArrowUp',\n ARROW_RIGHT: 'ArrowRight',\n ARROW_DOWN: 'ArrowDown',\n ARROW_LEFT: 'ArrowLeft',\n ENTER: 'Enter',\n BACKSPACE: 'Backspace',\n ESCAPE: 'Escape',\n}\n\nconst KeyCapturerResolver = {\n resolveByKey(eventKey: string): Key | null {\n switch (eventKey) {\n case 'Left': // IE specific\n case 'ArrowLeft': {\n return 'ArrowLeft'\n }\n case 'Up': // IE specific\n case 'ArrowUp': {\n return 'ArrowUp'\n }\n case 'Right': // IE specific\n case 'ArrowRight': {\n return 'ArrowRight'\n }\n case 'Down': // IE specific\n case 'ArrowDown': {\n return 'ArrowDown'\n }\n case 'Enter': {\n return 'Enter'\n }\n case 'Backspace': {\n return 'Backspace'\n }\n case 'Esc': // IE specific\n case 'Escape': {\n return 'Escape'\n }\n default: {\n return null\n }\n }\n },\n\n resolveByKeyCode(keyCode: number): Key | null {\n switch (keyCode) {\n case 37: {\n return 'ArrowLeft'\n }\n case 38: {\n return 'ArrowUp'\n }\n case 39: {\n return 'ArrowRight'\n }\n case 40: {\n return 'ArrowDown'\n }\n case 13: {\n return 'Enter'\n }\n case 8: {\n return 'Backspace'\n }\n case 27: {\n return 'Escape'\n }\n default: {\n return null\n }\n }\n },\n}\n\ntype EventHandler = (event: React.SyntheticEvent) => void\n\ntype EventHandlerProps = {\n onArrowUp?: EventHandler\n onArrowDown?: EventHandler\n onArrowLeft?: EventHandler\n onArrowRight?: EventHandler\n onEnter?: EventHandler\n onBackspace?: EventHandler\n onEscape?: EventHandler\n}\n\ntype PropagateProps = {\n propagateArrowUp?: boolean\n propagateArrowDown?: boolean\n propagateArrowLeft?: boolean\n propagateArrowRight?: boolean\n propagateEnter?: boolean\n propagateBackspace?: boolean\n propagateEscape?: boolean\n}\n\nconst keyEventHandlerMapping: Record<Key, keyof EventHandlerProps> = {\n ArrowUp: 'onArrowUp',\n ArrowDown: 'onArrowDown',\n ArrowLeft: 'onArrowLeft',\n ArrowRight: 'onArrowRight',\n Enter: 'onEnter',\n Backspace: 'onBackspace',\n Escape: 'onEscape',\n}\n\nconst keyPropagatePropMapping: Record<Key, keyof PropagateProps> = {\n ArrowUp: 'propagateArrowUp',\n ArrowDown: 'propagateArrowDown',\n ArrowLeft: 'propagateArrowLeft',\n ArrowRight: 'propagateArrowRight',\n Enter: 'propagateEnter',\n Backspace: 'propagateBackspace',\n Escape: 'propagateEscape',\n}\n\ntype KeyCapturerProps = EventHandlerProps &\n PropagateProps & {\n eventName?: 'onKeyDown' | 'onKeyDownCapture' | 'onKeyUp' | 'onKeyUpCapture'\n children: React.ReactElement<unknown>\n }\n\n/**\n * Use this component to wrap anything you want to handle key events for (e.g. an input).\n * You can specify the `eventName` to capture (defaults to `onKeyDown`).\n * Check the SUPPORTED_KEYS map to see which keys are supported and supply the respective\n * `on${Key}` prop (i.e. `onEnter` or `onArrowDown`).\n * If you want the default behaviour to be preserved (i.e. only want to hook into the event\n * instead of replacing it) set the `propagate${Key}` prop (e.g. propagateBackspace).\n */\nfunction KeyCapturer(props: KeyCapturerProps) {\n const { children, eventName = 'onKeyDown' } = props\n const composingRef = useRef(false)\n const composingEventHandlers = props.onEnter\n ? {\n onCompositionStart: () => {\n composingRef.current = true\n },\n onCompositionEnd: () => {\n composingRef.current = false\n },\n }\n : undefined\n\n function handleKeyEvent(event: React.KeyboardEvent<HTMLInputElement>) {\n // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode\n const key =\n event.key !== undefined\n ? KeyCapturerResolver.resolveByKey(event.key)\n : KeyCapturerResolver.resolveByKeyCode(event.keyCode)\n\n if (!key) return\n const propagateEvent = props[keyPropagatePropMapping[key]] || false\n const eventHandler = props[keyEventHandlerMapping[key]]\n\n if (key === 'Enter' && eventHandler) {\n if (\n composingRef.current ||\n // Safari fires the onCompositionEnd event before the keydown event, so we\n // have to rely on the 229 keycode, which is Enter when fired from an IME\n // https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode\n (event.keyCode || event.which) === 229\n ) {\n return\n }\n }\n\n if (eventHandler) {\n eventHandler(event)\n if (!propagateEvent) {\n event.preventDefault()\n event.stopPropagation()\n }\n }\n }\n\n return React.cloneElement(children, {\n [eventName]: handleKeyEvent,\n ...composingEventHandlers,\n })\n}\n\nexport { KeyCapturer, KeyCapturerResolver, SUPPORTED_KEYS }\n"],"names":["SUPPORTED_KEYS","ARROW_UP","ARROW_RIGHT","ARROW_DOWN","ARROW_LEFT","ENTER","BACKSPACE","ESCAPE","KeyCapturerResolver","resolveByKey","eventKey","resolveByKeyCode","keyCode","keyEventHandlerMapping","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Enter","Backspace","Escape","keyPropagatePropMapping","KeyCapturer","props","children","eventName","composingRef","useRef","composingEventHandlers","onEnter","onCompositionStart","current","onCompositionEnd","undefined","handleKeyEvent","event","key","propagateEvent","eventHandler","which","preventDefault","stopPropagation","React","cloneElement"],"mappings":"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"}
@@ -1,16 +1,14 @@
1
- import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
1
+ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
2
2
  import { createElement, Fragment } from 'react';
3
3
  import classNames from 'classnames';
4
4
 
5
- var _excluded = ["children", "className", "translateKey", "isMac"];
5
+ const _excluded = ["children", "className", "translateKey", "isMac"];
6
6
  // Support for setting up how to translate modifiers globally.
7
7
  //
8
8
 
9
- var globalTranslateKey = function globalTranslateKey(key) {
10
- return key;
11
- };
9
+ let globalTranslateKey = key => key;
12
10
 
13
- KeyboardShortcut.setTranslateKey = function (tr) {
11
+ KeyboardShortcut.setTranslateKey = tr => {
14
12
  globalTranslateKey = tr;
15
13
  };
16
14
 
@@ -54,9 +52,9 @@ function isSpecialKey(str) {
54
52
  }
55
53
 
56
54
  function parseKeys(shortcut, isMac, translateKey) {
57
- var t = isMac ? translateKeyMac : translateKey;
55
+ const t = isMac ? translateKeyMac : translateKey;
58
56
 
59
- var _hasModifiers = hasModifiers(shortcut);
57
+ const _hasModifiers = hasModifiers(shortcut);
60
58
 
61
59
  function mapIndividualKey(str) {
62
60
  if (isSpecialKey(str)) {
@@ -80,28 +78,24 @@ function parseKeys(shortcut, isMac, translateKey) {
80
78
  function KeyboardShortcut(_ref) {
81
79
  var _navigator$platform$t, _navigator$platform;
82
80
 
83
- var children = _ref.children,
84
- className = _ref.className,
85
- _ref$translateKey = _ref.translateKey,
86
- translateKey = _ref$translateKey === void 0 ? globalTranslateKey : _ref$translateKey,
87
- _ref$isMac = _ref.isMac,
88
- isMac = _ref$isMac === void 0 ? (_navigator$platform$t = (_navigator$platform = navigator.platform) === null || _navigator$platform === void 0 ? void 0 : _navigator$platform.toUpperCase().includes('MAC')) !== null && _navigator$platform$t !== void 0 ? _navigator$platform$t : false : _ref$isMac,
89
- props = _objectWithoutPropertiesLoose(_ref, _excluded);
81
+ let {
82
+ children,
83
+ className,
84
+ translateKey = globalTranslateKey,
85
+ isMac = (_navigator$platform$t = (_navigator$platform = navigator.platform) == null ? void 0 : _navigator$platform.toUpperCase().includes('MAC')) != null ? _navigator$platform$t : false
86
+ } = _ref,
87
+ props = _objectWithoutProperties(_ref, _excluded);
90
88
 
91
- var shortcuts = typeof children === 'string' ? [children] : children;
92
- return /*#__PURE__*/createElement("span", Object.assign({
89
+ const shortcuts = typeof children === 'string' ? [children] : children;
90
+ return /*#__PURE__*/createElement("span", _objectSpread2({
93
91
  className: classNames('reactist_keyboard_shortcut', className, {
94
92
  'reactist_keyboard_shortcut--macos': isMac
95
93
  })
96
- }, props), shortcuts.map(function (shortcut, i) {
97
- return /*#__PURE__*/createElement(Fragment, {
98
- key: i
99
- }, i === 0 ? null : ', ', /*#__PURE__*/createElement("kbd", null, parseKeys(shortcut, isMac, translateKey).map(function (key, j) {
100
- return /*#__PURE__*/createElement("kbd", {
101
- key: j
102
- }, key);
103
- })));
104
- }));
94
+ }, props), shortcuts.map((shortcut, i) => /*#__PURE__*/createElement(Fragment, {
95
+ key: i
96
+ }, i === 0 ? null : ', ', /*#__PURE__*/createElement("kbd", null, parseKeys(shortcut, isMac, translateKey).map((key, j) => /*#__PURE__*/createElement("kbd", {
97
+ key: j
98
+ }, key))))));
105
99
  }
106
100
 
107
101
  export { KeyboardShortcut };
@@ -1 +1 @@
1
- {"version":3,"file":"keyboard-shortcut.js","sources":["../../../src/components/keyboard-shortcut/keyboard-shortcut.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\n//\n// Support for setting up how to translate modifiers globally.\n//\n\nlet globalTranslateKey = (key: string) => key\n\ntype TranslateKey = typeof globalTranslateKey\n\nKeyboardShortcut.setTranslateKey = (tr: TranslateKey) => {\n globalTranslateKey = tr\n}\n\nfunction translateKeyMac(key: string) {\n switch (key.toLowerCase()) {\n case 'cmd':\n case 'mod':\n return '⌘'\n case 'control':\n case 'ctrl':\n return '⌃'\n case 'alt':\n return '⌥'\n case 'shift':\n return '⇧'\n case 'space':\n return '␣'\n default:\n return key\n }\n}\n\n//\n// Some helpers\n//\n\nfunction capitalize(str: string) {\n return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()\n}\n\nfunction hasModifiers(str: string) {\n return /\\b(mod|cmd|ctrl|control|alt|shift)\\b/i.test(str)\n}\n\nfunction isSpecialKey(str: string) {\n return /^(mod|cmd|ctrl|control|alt|shift|space|super)$/i.test(str)\n}\n\nfunction parseKeys(shortcut: string, isMac: boolean, translateKey: TranslateKey) {\n const t = isMac ? translateKeyMac : translateKey\n const _hasModifiers = hasModifiers(shortcut)\n\n function mapIndividualKey(str: string) {\n if (isSpecialKey(str)) {\n return capitalize(t(str))\n }\n if (_hasModifiers && str.length === 1) {\n return str.toUpperCase()\n }\n return str\n }\n\n if (!isMac) {\n shortcut = shortcut.replace(/\\b(mod|cmd)\\b/i, 'ctrl')\n }\n\n return shortcut.split(/\\s*\\+\\s*/).map(mapIndividualKey)\n}\n\n//\n// The KeyboardShortcut component\n//\n\ntype NativeSpanProps = React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLSpanElement>,\n HTMLSpanElement\n>\n\ntype Props = Omit<NativeSpanProps, 'children'> & {\n /**\n * The shortcut to be represented as markup. It supports an intuitive syntax where you can\n * combine modifiers (cmd, ctrl, shift, alt) with single keys all concatenated with plus signs.\n * You can also pass various shortcuts as an array, which will be depicted separated by commas.\n */\n children: string | string[]\n /**\n * A function that allows you to change how some key names are represented. This may be useful,\n * for instance, to translate modifier names that are expressed differently in other languages\n * (e.g. `Ctrl` is named `Strg` in German).\n *\n * It defaults to a global version that leaves the key as is. You can pass your version as a\n * prop, or you can also set your own version of this global default one, so you don't need to\n * pass your own on each invocation of this component.\n *\n * ```js\n * import { KeyboardShortcut } from '@doist/reactist'\n * KeyboardShortcut.setTranslateKey = key => { ... }\n * ```\n *\n * Note: When the component detects the macOS operating system it bypasses key translation for\n * most modifiers and uses macOS-specific symbols. See the `isMac` prop for details.\n */\n translateKey?: TranslateKey\n /**\n * This prop is not meant to be passed. The component will automatically initialize it to `true`\n * if it detects that the current browser / operating system is on macOS, in which case modifier\n * keys are represented using macOS' notation (e.g. ⌘ ⌃ ⌥ ⇧).\n *\n * Though it is discouraged, if you don't want this special treatment in macOS, you can pass\n * `isMac={false}` in all invocations of this component.\n */\n isMac?: boolean\n}\n\nfunction KeyboardShortcut({\n children,\n className,\n translateKey = globalTranslateKey,\n isMac = navigator.platform?.toUpperCase().includes('MAC') ?? false,\n ...props\n}: Props) {\n const shortcuts = typeof children === 'string' ? [children] : children\n return (\n <span\n className={classNames('reactist_keyboard_shortcut', className, {\n 'reactist_keyboard_shortcut--macos': isMac,\n })}\n {...props}\n >\n {shortcuts.map((shortcut, i) => (\n <React.Fragment key={i}>\n {i === 0 ? null : ', '}\n <kbd>\n {parseKeys(shortcut, isMac, translateKey).map((key, j) => (\n <kbd key={j}>{key}</kbd>\n ))}\n </kbd>\n </React.Fragment>\n ))}\n </span>\n )\n}\n\nexport { KeyboardShortcut }\n"],"names":["globalTranslateKey","key","KeyboardShortcut","setTranslateKey","tr","translateKeyMac","toLowerCase","capitalize","str","charAt","toUpperCase","slice","hasModifiers","test","isSpecialKey","parseKeys","shortcut","isMac","translateKey","t","_hasModifiers","mapIndividualKey","length","replace","split","map","children","className","navigator","platform","includes","props","shortcuts","React","classNames","i","j"],"mappings":"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"}
1
+ {"version":3,"file":"keyboard-shortcut.js","sources":["../../../src/components/keyboard-shortcut/keyboard-shortcut.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\n//\n// Support for setting up how to translate modifiers globally.\n//\n\nlet globalTranslateKey = (key: string) => key\n\ntype TranslateKey = typeof globalTranslateKey\n\nKeyboardShortcut.setTranslateKey = (tr: TranslateKey) => {\n globalTranslateKey = tr\n}\n\nfunction translateKeyMac(key: string) {\n switch (key.toLowerCase()) {\n case 'cmd':\n case 'mod':\n return '⌘'\n case 'control':\n case 'ctrl':\n return '⌃'\n case 'alt':\n return '⌥'\n case 'shift':\n return '⇧'\n case 'space':\n return '␣'\n default:\n return key\n }\n}\n\n//\n// Some helpers\n//\n\nfunction capitalize(str: string) {\n return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()\n}\n\nfunction hasModifiers(str: string) {\n return /\\b(mod|cmd|ctrl|control|alt|shift)\\b/i.test(str)\n}\n\nfunction isSpecialKey(str: string) {\n return /^(mod|cmd|ctrl|control|alt|shift|space|super)$/i.test(str)\n}\n\nfunction parseKeys(shortcut: string, isMac: boolean, translateKey: TranslateKey) {\n const t = isMac ? translateKeyMac : translateKey\n const _hasModifiers = hasModifiers(shortcut)\n\n function mapIndividualKey(str: string) {\n if (isSpecialKey(str)) {\n return capitalize(t(str))\n }\n if (_hasModifiers && str.length === 1) {\n return str.toUpperCase()\n }\n return str\n }\n\n if (!isMac) {\n shortcut = shortcut.replace(/\\b(mod|cmd)\\b/i, 'ctrl')\n }\n\n return shortcut.split(/\\s*\\+\\s*/).map(mapIndividualKey)\n}\n\n//\n// The KeyboardShortcut component\n//\n\ntype NativeSpanProps = React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLSpanElement>,\n HTMLSpanElement\n>\n\ntype Props = Omit<NativeSpanProps, 'children'> & {\n /**\n * The shortcut to be represented as markup. It supports an intuitive syntax where you can\n * combine modifiers (cmd, ctrl, shift, alt) with single keys all concatenated with plus signs.\n * You can also pass various shortcuts as an array, which will be depicted separated by commas.\n */\n children: string | string[]\n /**\n * A function that allows you to change how some key names are represented. This may be useful,\n * for instance, to translate modifier names that are expressed differently in other languages\n * (e.g. `Ctrl` is named `Strg` in German).\n *\n * It defaults to a global version that leaves the key as is. You can pass your version as a\n * prop, or you can also set your own version of this global default one, so you don't need to\n * pass your own on each invocation of this component.\n *\n * ```js\n * import { KeyboardShortcut } from '@doist/reactist'\n * KeyboardShortcut.setTranslateKey = key => { ... }\n * ```\n *\n * Note: When the component detects the macOS operating system it bypasses key translation for\n * most modifiers and uses macOS-specific symbols. See the `isMac` prop for details.\n */\n translateKey?: TranslateKey\n /**\n * This prop is not meant to be passed. The component will automatically initialize it to `true`\n * if it detects that the current browser / operating system is on macOS, in which case modifier\n * keys are represented using macOS' notation (e.g. ⌘ ⌃ ⌥ ⇧).\n *\n * Though it is discouraged, if you don't want this special treatment in macOS, you can pass\n * `isMac={false}` in all invocations of this component.\n */\n isMac?: boolean\n}\n\nfunction KeyboardShortcut({\n children,\n className,\n translateKey = globalTranslateKey,\n isMac = navigator.platform?.toUpperCase().includes('MAC') ?? false,\n ...props\n}: Props) {\n const shortcuts = typeof children === 'string' ? [children] : children\n return (\n <span\n className={classNames('reactist_keyboard_shortcut', className, {\n 'reactist_keyboard_shortcut--macos': isMac,\n })}\n {...props}\n >\n {shortcuts.map((shortcut, i) => (\n <React.Fragment key={i}>\n {i === 0 ? null : ', '}\n <kbd>\n {parseKeys(shortcut, isMac, translateKey).map((key, j) => (\n <kbd key={j}>{key}</kbd>\n ))}\n </kbd>\n </React.Fragment>\n ))}\n </span>\n )\n}\n\nexport { KeyboardShortcut }\n"],"names":["globalTranslateKey","key","KeyboardShortcut","setTranslateKey","tr","translateKeyMac","toLowerCase","capitalize","str","charAt","toUpperCase","slice","hasModifiers","test","isSpecialKey","parseKeys","shortcut","isMac","translateKey","t","_hasModifiers","mapIndividualKey","length","replace","split","map","children","className","navigator","platform","includes","props","shortcuts","React","classNames","i","j"],"mappings":";;;;;AAIA;AACA;;AAEA,IAAIA,kBAAkB,GAAIC,GAAD,IAAiBA,GAA1C;;AAIAC,gBAAgB,CAACC,eAAjB,GAAoCC,EAAD;EAC/BJ,kBAAkB,GAAGI,EAArB;AACH,CAFD;;AAIA,SAASC,eAAT,CAAyBJ,GAAzB;EACI,QAAQA,GAAG,CAACK,WAAJ,EAAR;IACI,KAAK,KAAL;IACA,KAAK,KAAL;MACI,OAAO,GAAP;;IACJ,KAAK,SAAL;IACA,KAAK,MAAL;MACI,OAAO,GAAP;;IACJ,KAAK,KAAL;MACI,OAAO,GAAP;;IACJ,KAAK,OAAL;MACI,OAAO,GAAP;;IACJ,KAAK,OAAL;MACI,OAAO,GAAP;;IACJ;MACI,OAAOL,GAAP;;AAEX;AAGD;AACA;;;AAEA,SAASM,UAAT,CAAoBC,GAApB;EACI,OAAOA,GAAG,CAACC,MAAJ,CAAW,CAAX,EAAcC,WAAd,KAA8BF,GAAG,CAACG,KAAJ,CAAU,CAAV,EAAaL,WAAb,EAArC;AACH;;AAED,SAASM,YAAT,CAAsBJ,GAAtB;EACI,OAAO,wCAAwCK,IAAxC,CAA6CL,GAA7C,CAAP;AACH;;AAED,SAASM,YAAT,CAAsBN,GAAtB;EACI,OAAO,kDAAkDK,IAAlD,CAAuDL,GAAvD,CAAP;AACH;;AAED,SAASO,SAAT,CAAmBC,QAAnB,EAAqCC,KAArC,EAAqDC,YAArD;EACI,MAAMC,CAAC,GAAGF,KAAK,GAAGZ,eAAH,GAAqBa,YAApC;;EACA,MAAME,aAAa,GAAGR,YAAY,CAACI,QAAD,CAAlC;;EAEA,SAASK,gBAAT,CAA0Bb,GAA1B;IACI,IAAIM,YAAY,CAACN,GAAD,CAAhB,EAAuB;MACnB,OAAOD,UAAU,CAACY,CAAC,CAACX,GAAD,CAAF,CAAjB;;;IAEJ,IAAIY,aAAa,IAAIZ,GAAG,CAACc,MAAJ,KAAe,CAApC,EAAuC;MACnC,OAAOd,GAAG,CAACE,WAAJ,EAAP;;;IAEJ,OAAOF,GAAP;;;EAGJ,IAAI,CAACS,KAAL,EAAY;IACRD,QAAQ,GAAGA,QAAQ,CAACO,OAAT,CAAiB,gBAAjB,EAAmC,MAAnC,CAAX;;;EAGJ,OAAOP,QAAQ,CAACQ,KAAT,CAAe,UAAf,EAA2BC,GAA3B,CAA+BJ,gBAA/B,CAAP;AACH;;AA+CD,SAASnB,gBAAT;;;MAA0B;IACtBwB,QADsB;IAEtBC,SAFsB;IAGtBT,YAAY,GAAGlB,kBAHO;IAItBiB,KAAK,mDAAGW,SAAS,CAACC,QAAb,qBAAG,oBAAoBnB,WAApB,GAAkCoB,QAAlC,CAA2C,KAA3C,CAAH,oCAAwD;;MAC1DC;;EAEH,MAAMC,SAAS,GAAG,OAAON,QAAP,KAAoB,QAApB,GAA+B,CAACA,QAAD,CAA/B,GAA4CA,QAA9D;EACA,oBACIO,aAAA,OAAA;IACIN,SAAS,EAAEO,UAAU,CAAC,4BAAD,EAA+BP,SAA/B,EAA0C;MAC3D,qCAAqCV;KADpB;KAGjBc,KAJR,GAMKC,SAAS,CAACP,GAAV,CAAc,CAACT,QAAD,EAAWmB,CAAX,kBACXF,aAAA,CAACA,QAAD;IAAgBhC,GAAG,EAAEkC;GAArB,EACKA,CAAC,KAAK,CAAN,GAAU,IAAV,GAAiB,IADtB,eAEIF,aAAA,MAAA,MAAA,EACKlB,SAAS,CAACC,QAAD,EAAWC,KAAX,EAAkBC,YAAlB,CAAT,CAAyCO,GAAzC,CAA6C,CAACxB,GAAD,EAAMmC,CAAN,kBAC1CH,aAAA,MAAA;IAAKhC,GAAG,EAAEmC;GAAV,EAAcnC,GAAd,CADH,CADL,CAFJ,CADH,CANL,CADJ;AAmBH;;;;"}
@@ -1,23 +1,16 @@
1
- import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
2
- import { useCallback, useMemo, createElement, useContext, useEffect, forwardRef, Children, cloneElement, createContext } from 'react';
1
+ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
2
+ import { useCallback, useMemo, createElement, useContext, forwardRef, Children, cloneElement, createContext } from 'react';
3
3
  import classNames from 'classnames';
4
4
  import { polymorphicComponent } from '../../utils/polymorphism.js';
5
- import { usePrevious } from '../../hooks/use-previous/use-previous.js';
6
- import { useMenuState, MenuButton as MenuButton$1, Menu as Menu$1, MenuItem as MenuItem$1, MenuGroup as MenuGroup$1 } from 'reakit/Menu';
7
- import { PopoverBackdrop } from 'reakit/Popover';
8
-
9
- var _excluded = ["children", "onItemSelect"],
10
- _excluded2 = ["exceptionallySetClassName"],
11
- _excluded3 = ["handleItemSelect"],
12
- _excluded4 = ["exceptionallySetClassName"],
13
- _excluded5 = ["handleItemSelect"],
14
- _excluded6 = ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName"],
15
- _excluded7 = ["handleItemSelect"],
16
- _excluded8 = ["children", "onItemSelect"],
17
- _excluded9 = ["handleItemSelect"],
18
- _excluded10 = ["label", "children", "exceptionallySetClassName"],
19
- _excluded11 = ["handleItemSelect"];
20
- var MenuContext = /*#__PURE__*/createContext( // Reakit gives us no means to obtain a valid initial/default value of type MenuStateReturn
5
+ import { useMenuState, MenuButton as MenuButton$1, Menu as Menu$1, MenuItem as MenuItem$1, useMenuItem, MenuGroup as MenuGroup$1 } from 'ariakit/menu';
6
+ import { Portal } from 'ariakit/portal';
7
+
8
+ const _excluded = ["children", "onItemSelect"],
9
+ _excluded2 = ["exceptionallySetClassName"],
10
+ _excluded3 = ["exceptionallySetClassName"],
11
+ _excluded4 = ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName", "as"],
12
+ _excluded5 = ["label", "children", "exceptionallySetClassName"];
13
+ const MenuContext = /*#__PURE__*/createContext( // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn
21
14
  // (it is normally obtained by calling useMenuState but we can't call hooks outside components).
22
15
  // This is however of little consequence since this value is only used if some of the components
23
16
  // are used outside Menu, something that should not happen and we do not support.
@@ -25,26 +18,29 @@ var MenuContext = /*#__PURE__*/createContext( // Reakit gives us no means to obt
25
18
  {});
26
19
  /**
27
20
  * Wrapper component to control a menu. It does not render anything, only providing the state
28
- * management for the menu components inside it.
21
+ * management for the menu components inside it. Note that if you are relying on the `[role='menu']`
22
+ * attribute to style the menu list, it is applied a `menubar` role instead in Safari.
29
23
  */
30
24
 
31
25
  function Menu(_ref) {
32
- var children = _ref.children,
33
- onItemSelect = _ref.onItemSelect,
34
- props = _objectWithoutPropertiesLoose(_ref, _excluded);
35
-
36
- var state = useMenuState(_objectSpread2({
37
- loop: true,
38
- unstable_offset: [8, 8]
26
+ let {
27
+ children,
28
+ onItemSelect
29
+ } = _ref,
30
+ props = _objectWithoutProperties(_ref, _excluded);
31
+
32
+ const state = useMenuState(_objectSpread2({
33
+ focusLoop: true,
34
+ gutter: 8,
35
+ shift: 8
39
36
  }, props));
40
- var handleItemSelect = useCallback(function handleItemSelect(value) {
37
+ const handleItemSelect = useCallback(function handleItemSelect(value) {
41
38
  if (onItemSelect) onItemSelect(value);
42
39
  }, [onItemSelect]);
43
- var value = useMemo(function () {
44
- return _objectSpread2(_objectSpread2({}, state), {}, {
45
- handleItemSelect: handleItemSelect
46
- });
47
- }, [state, handleItemSelect]);
40
+ const value = useMemo(() => ({
41
+ state,
42
+ handleItemSelect
43
+ }), [state, handleItemSelect]);
48
44
  return /*#__PURE__*/createElement(MenuContext.Provider, {
49
45
  value: value
50
46
  }, children);
@@ -54,69 +50,38 @@ function Menu(_ref) {
54
50
  */
55
51
 
56
52
 
57
- var MenuButton = /*#__PURE__*/polymorphicComponent(function MenuButton(_ref2, ref) {
58
- var exceptionallySetClassName = _ref2.exceptionallySetClassName,
59
- props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
60
-
61
- var _React$useContext = useContext(MenuContext),
62
- state = _objectWithoutPropertiesLoose(_React$useContext, _excluded3);
53
+ const MenuButton = /*#__PURE__*/polymorphicComponent(function MenuButton(_ref2, ref) {
54
+ let {
55
+ exceptionallySetClassName
56
+ } = _ref2,
57
+ props = _objectWithoutProperties(_ref2, _excluded2);
63
58
 
64
- return /*#__PURE__*/createElement(MenuButton$1, Object.assign({}, props, state, {
59
+ const {
60
+ state
61
+ } = useContext(MenuContext);
62
+ return /*#__PURE__*/createElement(MenuButton$1, _objectSpread2(_objectSpread2({}, props), {}, {
63
+ state: state,
65
64
  ref: ref,
66
65
  className: classNames('reactist_menubutton', exceptionallySetClassName)
67
66
  }));
68
67
  });
69
- var BACKDROP_STYLE = {
70
- width: '100%',
71
- height: '100%',
72
- position: 'fixed',
73
- top: 0,
74
- left: 0
75
- };
76
- /**
77
- * Internal component to provide a backdrop/overlay to all menus. This is needed because reakit's
78
- * menus do not show an overlay by default.
79
- */
80
-
81
- function MenuBackdrop(_ref3) {
82
- var baseId = _ref3.baseId,
83
- visible = _ref3.visible,
84
- animated = _ref3.animated,
85
- animating = _ref3.animating,
86
- stopAnimation = _ref3.stopAnimation,
87
- modal = _ref3.modal,
88
- children = _ref3.children;
89
- return /*#__PURE__*/createElement(PopoverBackdrop, {
90
- baseId: baseId,
91
- visible: visible,
92
- animated: animated,
93
- animating: animating,
94
- stopAnimation: stopAnimation,
95
- modal: modal,
96
- style: BACKDROP_STYLE
97
- }, children);
98
- }
99
68
  /**
100
69
  * The dropdown menu itself, containing a list of menu items.
101
70
  */
102
71
 
103
-
104
- var MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref) {
105
- var exceptionallySetClassName = _ref4.exceptionallySetClassName,
106
- props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
107
-
108
- var _React$useContext2 = useContext(MenuContext),
109
- state = _objectWithoutPropertiesLoose(_React$useContext2, _excluded5);
110
-
111
- var previousVisible = usePrevious(state.visible);
112
- useEffect(function focusTriggerOnClose() {
113
- if (state.visible === false && previousVisible === true) {
114
- var _state$unstable_refer, _state$unstable_refer2;
115
-
116
- (_state$unstable_refer = state.unstable_referenceRef) === null || _state$unstable_refer === void 0 ? void 0 : (_state$unstable_refer2 = _state$unstable_refer.current) === null || _state$unstable_refer2 === void 0 ? void 0 : _state$unstable_refer2.focus();
117
- }
118
- }, [state.visible, previousVisible, state.unstable_referenceRef]);
119
- return state.visible ? /*#__PURE__*/createElement(MenuBackdrop, Object.assign({}, state), /*#__PURE__*/createElement(Menu$1, Object.assign({}, props, state, {
72
+ const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref3, ref) {
73
+ let {
74
+ exceptionallySetClassName
75
+ } = _ref3,
76
+ props = _objectWithoutProperties(_ref3, _excluded3);
77
+
78
+ const {
79
+ state
80
+ } = useContext(MenuContext);
81
+ return state.visible ? /*#__PURE__*/createElement(Portal, {
82
+ preserveTabOrder: true
83
+ }, /*#__PURE__*/createElement(Menu$1, _objectSpread2(_objectSpread2({}, props), {}, {
84
+ state: state,
120
85
  ref: ref,
121
86
  className: classNames('reactist_menulist', exceptionallySetClassName)
122
87
  }))) : null;
@@ -126,32 +91,39 @@ var MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref) {
126
91
  * callback.
127
92
  */
128
93
 
129
- var MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref) {
130
- var value = _ref5.value,
131
- children = _ref5.children,
132
- onSelect = _ref5.onSelect,
133
- _ref5$hideOnSelect = _ref5.hideOnSelect,
134
- hideOnSelect = _ref5$hideOnSelect === void 0 ? true : _ref5$hideOnSelect,
135
- onClick = _ref5.onClick,
136
- exceptionallySetClassName = _ref5.exceptionallySetClassName,
137
- props = _objectWithoutPropertiesLoose(_ref5, _excluded6);
138
-
139
- var _React$useContext3 = useContext(MenuContext),
140
- handleItemSelect = _React$useContext3.handleItemSelect,
141
- state = _objectWithoutPropertiesLoose(_React$useContext3, _excluded7);
142
-
143
- var hide = state.hide;
144
- var handleClick = useCallback(function handleClick(event) {
145
- onClick === null || onClick === void 0 ? void 0 : onClick(event);
146
- var onSelectResult = onSelect && !event.defaultPrevented ? onSelect() : undefined;
147
- var shouldClose = onSelectResult !== false && hideOnSelect;
94
+ const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref4, ref) {
95
+ let {
96
+ value,
97
+ children,
98
+ onSelect,
99
+ hideOnSelect = true,
100
+ onClick,
101
+ exceptionallySetClassName,
102
+ as = 'button'
103
+ } = _ref4,
104
+ props = _objectWithoutProperties(_ref4, _excluded4);
105
+
106
+ const {
107
+ handleItemSelect,
108
+ state
109
+ } = useContext(MenuContext);
110
+ const {
111
+ hide
112
+ } = state;
113
+ const handleClick = useCallback(function handleClick(event) {
114
+ onClick == null ? void 0 : onClick(event);
115
+ const onSelectResult = onSelect && !event.defaultPrevented ? onSelect() : undefined;
116
+ const shouldClose = onSelectResult !== false && hideOnSelect;
148
117
  handleItemSelect(value);
149
118
  if (shouldClose) hide();
150
119
  }, [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value]);
151
- return /*#__PURE__*/createElement(MenuItem$1, Object.assign({}, props, state, {
120
+ return /*#__PURE__*/createElement(MenuItem$1, _objectSpread2(_objectSpread2({}, props), {}, {
121
+ as: as,
122
+ state: state,
152
123
  ref: ref,
153
124
  onClick: handleClick,
154
- className: exceptionallySetClassName
125
+ className: exceptionallySetClassName,
126
+ hideOnClick: false
155
127
  }), children);
156
128
  });
157
129
  /**
@@ -176,35 +148,32 @@ var MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref) {
176
148
  * opening a sub-menu with the menu items list below it.
177
149
  */
178
150
 
179
- var SubMenu = /*#__PURE__*/forwardRef(function SubMenu(_ref6, ref) {
180
- var children = _ref6.children,
181
- onItemSelect = _ref6.onItemSelect,
182
- props = _objectWithoutPropertiesLoose(_ref6, _excluded8);
183
-
184
- var _React$useContext4 = useContext(MenuContext),
185
- parentMenuItemSelect = _React$useContext4.handleItemSelect,
186
- state = _objectWithoutPropertiesLoose(_React$useContext4, _excluded9);
187
-
188
- var parentMenuHide = state.hide;
189
- var handleSubItemSelect = useCallback(function handleSubItemSelect(value) {
151
+ const SubMenu = /*#__PURE__*/forwardRef(function SubMenu({
152
+ children,
153
+ onItemSelect
154
+ }, ref) {
155
+ const {
156
+ handleItemSelect: parentMenuItemSelect,
157
+ state
158
+ } = useContext(MenuContext);
159
+ const {
160
+ hide: parentMenuHide
161
+ } = state;
162
+ const handleSubItemSelect = useCallback(function handleSubItemSelect(value) {
190
163
  if (onItemSelect) onItemSelect(value);
191
164
  parentMenuItemSelect(value);
192
165
  parentMenuHide();
193
166
  }, [parentMenuHide, parentMenuItemSelect, onItemSelect]);
194
-
195
- var _React$Children$toArr = Children.toArray(children),
196
- button = _React$Children$toArr[0],
197
- list = _React$Children$toArr[1];
198
-
199
- return /*#__PURE__*/createElement(MenuItem$1, Object.assign({}, state, props, {
200
- ref: ref
201
- }), function (buttonProps) {
202
- return /*#__PURE__*/createElement(Menu, {
203
- onItemSelect: handleSubItemSelect
204
- }, /*#__PURE__*/cloneElement(button, _objectSpread2(_objectSpread2({}, buttonProps), {}, {
205
- className: classNames(buttonProps.className, 'reactist_submenu_button')
206
- })), list);
167
+ const [button, list] = Children.toArray(children);
168
+ const menuProps = useMenuItem({
169
+ state
207
170
  });
171
+ return /*#__PURE__*/createElement(Menu, {
172
+ onItemSelect: handleSubItemSelect
173
+ }, /*#__PURE__*/cloneElement(button, _objectSpread2(_objectSpread2({}, menuProps), {}, {
174
+ className: classNames(menuProps.className, 'reactist_submenu_button'),
175
+ ref
176
+ })), list);
208
177
  });
209
178
  /**
210
179
  * A way to semantically group some menu items.
@@ -213,18 +182,20 @@ var SubMenu = /*#__PURE__*/forwardRef(function SubMenu(_ref6, ref) {
213
182
  * before and/or after the group if you so wish.
214
183
  */
215
184
 
216
- var MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroud(_ref7, ref) {
217
- var label = _ref7.label,
218
- children = _ref7.children,
219
- exceptionallySetClassName = _ref7.exceptionallySetClassName,
220
- props = _objectWithoutPropertiesLoose(_ref7, _excluded10);
221
-
222
- var _React$useContext5 = useContext(MenuContext),
223
- state = _objectWithoutPropertiesLoose(_React$useContext5, _excluded11);
224
-
225
- return /*#__PURE__*/createElement(MenuGroup$1, Object.assign({
226
- ref: ref
227
- }, props, state, {
185
+ const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref5, ref) {
186
+ let {
187
+ label,
188
+ children,
189
+ exceptionallySetClassName
190
+ } = _ref5,
191
+ props = _objectWithoutProperties(_ref5, _excluded5);
192
+
193
+ const {
194
+ state
195
+ } = useContext(MenuContext);
196
+ return /*#__PURE__*/createElement(MenuGroup$1, _objectSpread2(_objectSpread2({}, props), {}, {
197
+ ref: ref,
198
+ state: state,
228
199
  className: exceptionallySetClassName
229
200
  }), label ? /*#__PURE__*/createElement("div", {
230
201
  role: "presentation",
@@ -1 +1 @@
1
- {"version":3,"file":"menu.js","sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { usePrevious } from '../../hooks/use-previous'\n\n//\n// Reactist menu is a thin wrapper around Reakit's menu components. This may or may not be\n// temporary. Our goal is to make it transparent for the users of Reactist of this implementation\n// detail. We may change in the future the external lib we use, or even implement it all internally,\n// as long as we keep the same outer interface as intact as possible.\n//\n// Around the heavy lifting of the external lib we just add some features to better integrate the\n// menu to Reactist's more opinionated approach (e.g. using our button with its custom variants and\n// other features, easily show keyboard shortcuts in menu items, etc.)\n//\nimport * as Reakit from 'reakit/Menu'\nimport { PopoverBackdrop } from 'reakit/Popover'\n\nimport './menu.less'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = Reakit.MenuStateReturn & {\n handleItemSelect: (value: string | null | undefined) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n // Reakit gives us no means to obtain a valid initial/default value of type MenuStateReturn\n // (it is normally obtained by calling useMenuState but we can't call hooks outside components).\n // This is however of little consequence since this value is only used if some of the components\n // are used outside Menu, something that should not happen and we do not support.\n // @ts-expect-error\n {},\n)\n\n//\n// Menu\n//\n\ntype MenuProps = Omit<Reakit.MenuInitialState, 'visible'> & {\n /**\n * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n * `MenuButton` that triggers the menu to be opened or closed.\n */\n children: React.ReactNode\n\n /**\n * An optional callback that will be called back whenever a menu item is selected. It receives\n * the `value` of the selected `MenuItem`.\n *\n * If you pass down this callback, it is recommended that you properly memoize it so it does not\n * change on every render.\n */\n onItemSelect?: (value: string | null | undefined) => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n const state = Reakit.useMenuState({ loop: true, unstable_offset: [8, 8], ...props })\n\n const handleItemSelect = React.useCallback(\n function handleItemSelect(value: string | null | undefined) {\n if (onItemSelect) onItemSelect(value)\n },\n [onItemSelect],\n )\n\n const value: MenuContextState = React.useMemo(\n () => ({\n ...state,\n handleItemSelect,\n }),\n [state, handleItemSelect],\n )\n\n return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<Reakit.MenuButtonProps, keyof Reakit.MenuStateReturn | 'className'>\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = polymorphicComponent<'button', MenuButtonProps>(function MenuButton(\n { exceptionallySetClassName, ...props },\n ref,\n) {\n const { handleItemSelect, ...state } = React.useContext(MenuContext)\n return (\n <Reakit.MenuButton\n {...props}\n {...state}\n ref={ref}\n className={classNames('reactist_menubutton', exceptionallySetClassName)}\n />\n )\n})\n\n//\n// MenuList\n//\n\ntype MenuBackdropProps = Reakit.MenuStateReturn & {\n children: React.ReactNode\n}\n\nconst BACKDROP_STYLE: React.CSSProperties = {\n width: '100%',\n height: '100%',\n position: 'fixed',\n top: 0,\n left: 0,\n}\n\n/**\n * Internal component to provide a backdrop/overlay to all menus. This is needed because reakit's\n * menus do not show an overlay by default.\n */\nfunction MenuBackdrop({\n baseId,\n visible,\n animated,\n animating,\n stopAnimation,\n modal,\n children,\n}: MenuBackdropProps) {\n return (\n <PopoverBackdrop\n baseId={baseId}\n visible={visible}\n animated={animated}\n animating={animating}\n stopAnimation={stopAnimation}\n modal={modal}\n style={BACKDROP_STYLE}\n >\n {children}\n </PopoverBackdrop>\n )\n}\n\ntype MenuListProps = Omit<Reakit.MenuProps, keyof Reakit.MenuStateReturn | 'className'>\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = polymorphicComponent<'div', MenuListProps>(function MenuList(\n { exceptionallySetClassName, ...props },\n ref,\n) {\n const { handleItemSelect, ...state } = React.useContext(MenuContext)\n const previousVisible = usePrevious(state.visible)\n\n React.useEffect(\n function focusTriggerOnClose() {\n if (state.visible === false && previousVisible === true) {\n state.unstable_referenceRef?.current?.focus()\n }\n },\n [state.visible, previousVisible, state.unstable_referenceRef],\n )\n\n return state.visible ? (\n <MenuBackdrop {...state}>\n <Reakit.Menu\n {...props}\n {...state}\n ref={ref}\n className={classNames('reactist_menulist', exceptionallySetClassName)}\n />\n </MenuBackdrop>\n ) : null\n})\n\n//\n// MenuItem\n//\n\ntype MenuItemProps = {\n /**\n * An optional value given to this menu item. It is passed on to the parent `Menu`'s\n * `onItemSelect` when you provide that instead of (or alongside) providing individual\n * `onSelect` callbacks to each menu item.\n */\n value?: string\n /**\n * The content inside the menu item.\n */\n children: React.ReactNode\n /**\n * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n * navigation across the menu options.\n *\n * @default true\n */\n disabled?: boolean\n /**\n * When `true` the menu will close when the menu item is selected, in addition to performing the\n * action that the menu item is set out to do.\n *\n * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n * selected. This should be the exception and not the norm, as the default is to auto-close.\n *\n * @default true\n */\n hideOnSelect?: boolean\n /**\n * The action to perform when the menu item is selected.\n *\n * If you return `false` from this function, the menu will not auto-close when this menu item\n * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n * achieve the same effect conditionally and dynamically deciding at run time.\n */\n onSelect?: () => unknown\n /**\n * The event handler called when the menu item is clicked.\n *\n * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n * action that the menu item represents. But in general you should prefer `onSelect` for that.\n *\n * The main use for this handler is to get access to the click event. This can be used, for\n * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n * consequences of the click, including preventing `onSelect` from being called. In particular,\n * this is useful in menu items that are links, and you want the click to not trigger navigation\n * under some circumstances.\n */\n onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = polymorphicComponent<'button', MenuItemProps>(function MenuItem(\n {\n value,\n children,\n onSelect,\n hideOnSelect = true,\n onClick,\n exceptionallySetClassName,\n ...props\n },\n ref,\n) {\n const { handleItemSelect, ...state } = React.useContext(MenuContext)\n const { hide } = state\n\n const handleClick = React.useCallback(\n function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n onClick?.(event)\n const onSelectResult: unknown =\n onSelect && !event.defaultPrevented ? onSelect() : undefined\n const shouldClose = onSelectResult !== false && hideOnSelect\n handleItemSelect(value)\n if (shouldClose) hide()\n },\n [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n )\n\n return (\n <Reakit.MenuItem\n {...props}\n {...state}\n ref={ref}\n onClick={handleClick}\n className={exceptionallySetClassName}\n >\n {children}\n </Reakit.MenuItem>\n )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\n * a sub-menu.\n *\n * Its children are expected to have the structure of a first level menu (a `MenuButton` and a\n * `MenuList`).\n *\n * ```jsx\n * <MenuItem label=\"Edit profile\" />\n * <SubMenu>\n * <MenuButton>More options</MenuButton>\n * <MenuList>\n * <MenuItem label=\"Preferences\" />\n * <MenuItem label=\"Sign out\" />\n * </MenuList>\n * </SubMenu>\n * ```\n *\n * The `MenuButton` will become a menu item in the current menu items list, and it will lead to\n * opening a sub-menu with the menu items list below it.\n */\nconst SubMenu = React.forwardRef<HTMLButtonElement, SubMenuProps>(function SubMenu(\n { children, onItemSelect, ...props },\n ref,\n) {\n const { handleItemSelect: parentMenuItemSelect, ...state } = React.useContext(MenuContext)\n const { hide: parentMenuHide } = state\n\n const handleSubItemSelect = React.useCallback(\n function handleSubItemSelect(value) {\n if (onItemSelect) onItemSelect(value)\n parentMenuItemSelect(value)\n parentMenuHide()\n },\n [parentMenuHide, parentMenuItemSelect, onItemSelect],\n )\n\n const [button, list] = React.Children.toArray(children)\n\n return (\n <Reakit.MenuItem {...state} {...props} ref={ref}>\n {(buttonProps) => (\n <Menu onItemSelect={handleSubItemSelect}>\n {React.cloneElement(button as React.ReactElement, {\n ...buttonProps,\n className: classNames(buttonProps.className, 'reactist_submenu_button'),\n })}\n {list}\n </Menu>\n )}\n </Reakit.MenuItem>\n )\n})\n\n//\n// MenuGroup\n//\n\ntype MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {\n /**\n * A label to be shown visually and also used to semantically label the group.\n */\n label: string\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = polymorphicComponent<'div', MenuGroupProps>(function MenuGroud(\n { label, children, exceptionallySetClassName, ...props },\n ref,\n) {\n const { handleItemSelect, ...state } = React.useContext(MenuContext)\n return (\n <Reakit.MenuGroup ref={ref} {...props} {...state} className={exceptionallySetClassName}>\n {label ? (\n <div role=\"presentation\" className=\"reactist_menugroup__label\">\n {label}\n </div>\n ) : null}\n {children}\n </Reakit.MenuGroup>\n )\n})\n\nexport { Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }\nexport type { MenuButtonProps, MenuListProps, MenuItemProps, SubMenuProps, MenuGroupProps }\n"],"names":["MenuContext","React","Menu","children","onItemSelect","props","state","Reakit","loop","unstable_offset","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","className","classNames","BACKDROP_STYLE","width","height","position","top","left","MenuBackdrop","baseId","visible","animated","animating","stopAnimation","modal","PopoverBackdrop","style","MenuList","previousVisible","usePrevious","focusTriggerOnClose","unstable_referenceRef","current","focus","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","event","onSelectResult","defaultPrevented","undefined","shouldClose","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","toArray","button","list","buttonProps","MenuGroup","MenuGroud","label","role"],"mappings":"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"}
1
+ {"version":3,"file":"menu.js","sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { polymorphicComponent } from '../../utils/polymorphism'\n\n//\n// Reactist menu is a thin wrapper around Ariakit's menu components. This may or may not be\n// temporary. Our goal is to make it transparent for the users of Reactist of this implementation\n// detail. We may change in the future the external lib we use, or even implement it all internally,\n// as long as we keep the same outer interface as intact as possible.\n//\n// Around the heavy lifting of the external lib we just add some features to better integrate the\n// menu to Reactist's more opinionated approach (e.g. using our button with its custom variants and\n// other features, easily show keyboard shortcuts in menu items, etc.)\n//\nimport * as Ariakit from 'ariakit/menu'\nimport { Portal } from 'ariakit/portal'\n\nimport './menu.less'\nimport { useMenuItem } from 'ariakit/menu'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = {\n state: Ariakit.MenuState\n handleItemSelect: (value: string | null | undefined) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn\n // (it is normally obtained by calling useMenuState but we can't call hooks outside components).\n // This is however of little consequence since this value is only used if some of the components\n // are used outside Menu, something that should not happen and we do not support.\n // @ts-expect-error\n {},\n)\n\n//\n// Menu\n//\n\ntype MenuProps = Omit<Ariakit.MenuStateProps, 'visible'> & {\n /**\n * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n * `MenuButton` that triggers the menu to be opened or closed.\n */\n children: React.ReactNode\n\n /**\n * An optional callback that will be called back whenever a menu item is selected. It receives\n * the `value` of the selected `MenuItem`.\n *\n * If you pass down this callback, it is recommended that you properly memoize it so it does not\n * change on every render.\n */\n onItemSelect?: (value: string | null | undefined) => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it. Note that if you are relying on the `[role='menu']`\n * attribute to style the menu list, it is applied a `menubar` role instead in Safari.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n const state = Ariakit.useMenuState({ focusLoop: true, gutter: 8, shift: 8, ...props })\n\n const handleItemSelect = React.useCallback(\n function handleItemSelect(value: string | null | undefined) {\n if (onItemSelect) onItemSelect(value)\n },\n [onItemSelect],\n )\n\n const value: MenuContextState = React.useMemo(\n () => ({\n state,\n handleItemSelect,\n }),\n [state, handleItemSelect],\n )\n\n return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<Ariakit.MenuButtonProps, 'state' | 'className' | 'as'>\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = polymorphicComponent<'button', MenuButtonProps>(function MenuButton(\n { exceptionallySetClassName, ...props },\n ref,\n) {\n const { state } = React.useContext(MenuContext)\n return (\n <Ariakit.MenuButton\n {...props}\n state={state}\n ref={ref}\n className={classNames('reactist_menubutton', exceptionallySetClassName)}\n />\n )\n})\n\n//\n// MenuList\n//\n\ntype MenuListProps = Omit<Ariakit.MenuProps, 'state' | 'className'>\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = polymorphicComponent<'div', MenuListProps>(function MenuList(\n { exceptionallySetClassName, ...props },\n ref,\n) {\n const { state } = React.useContext(MenuContext)\n\n return state.visible ? (\n <Portal preserveTabOrder>\n <Ariakit.Menu\n {...props}\n state={state}\n ref={ref}\n className={classNames('reactist_menulist', exceptionallySetClassName)}\n />\n </Portal>\n ) : null\n})\n\n//\n// MenuItem\n//\n\ntype MenuItemProps = {\n /**\n * An optional value given to this menu item. It is passed on to the parent `Menu`'s\n * `onItemSelect` when you provide that instead of (or alongside) providing individual\n * `onSelect` callbacks to each menu item.\n */\n value?: string\n /**\n * The content inside the menu item.\n */\n children: React.ReactNode\n /**\n * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n * navigation across the menu options.\n *\n * @default true\n */\n disabled?: boolean\n /**\n * When `true` the menu will close when the menu item is selected, in addition to performing the\n * action that the menu item is set out to do.\n *\n * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n * selected. This should be the exception and not the norm, as the default is to auto-close.\n *\n * @default true\n */\n hideOnSelect?: boolean\n /**\n * The action to perform when the menu item is selected.\n *\n * If you return `false` from this function, the menu will not auto-close when this menu item\n * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n * achieve the same effect conditionally and dynamically deciding at run time.\n */\n onSelect?: () => unknown\n /**\n * The event handler called when the menu item is clicked.\n *\n * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n * action that the menu item represents. But in general you should prefer `onSelect` for that.\n *\n * The main use for this handler is to get access to the click event. This can be used, for\n * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n * consequences of the click, including preventing `onSelect` from being called. In particular,\n * this is useful in menu items that are links, and you want the click to not trigger navigation\n * under some circumstances.\n */\n onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = polymorphicComponent<'button', MenuItemProps>(function MenuItem(\n {\n value,\n children,\n onSelect,\n hideOnSelect = true,\n onClick,\n exceptionallySetClassName,\n as = 'button',\n ...props\n },\n ref,\n) {\n const { handleItemSelect, state } = React.useContext(MenuContext)\n const { hide } = state\n\n const handleClick = React.useCallback(\n function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n onClick?.(event)\n const onSelectResult: unknown =\n onSelect && !event.defaultPrevented ? onSelect() : undefined\n const shouldClose = onSelectResult !== false && hideOnSelect\n handleItemSelect(value)\n if (shouldClose) hide()\n },\n [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n )\n\n return (\n <Ariakit.MenuItem\n {...props}\n as={as}\n state={state}\n ref={ref}\n onClick={handleClick}\n className={exceptionallySetClassName}\n hideOnClick={false}\n >\n {children}\n </Ariakit.MenuItem>\n )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\n * a sub-menu.\n *\n * Its children are expected to have the structure of a first level menu (a `MenuButton` and a\n * `MenuList`).\n *\n * ```jsx\n * <MenuItem label=\"Edit profile\" />\n * <SubMenu>\n * <MenuButton>More options</MenuButton>\n * <MenuList>\n * <MenuItem label=\"Preferences\" />\n * <MenuItem label=\"Sign out\" />\n * </MenuList>\n * </SubMenu>\n * ```\n *\n * The `MenuButton` will become a menu item in the current menu items list, and it will lead to\n * opening a sub-menu with the menu items list below it.\n */\nconst SubMenu = React.forwardRef<HTMLButtonElement, SubMenuProps>(function SubMenu(\n { children, onItemSelect },\n ref,\n) {\n const { handleItemSelect: parentMenuItemSelect, state } = React.useContext(MenuContext)\n const { hide: parentMenuHide } = state\n\n const handleSubItemSelect = React.useCallback(\n function handleSubItemSelect(value: string | null | undefined) {\n if (onItemSelect) onItemSelect(value)\n parentMenuItemSelect(value)\n parentMenuHide()\n },\n [parentMenuHide, parentMenuItemSelect, onItemSelect],\n )\n\n const [button, list] = React.Children.toArray(children)\n\n const menuProps = useMenuItem({ state })\n\n return (\n <Menu onItemSelect={handleSubItemSelect}>\n {React.cloneElement(button as React.ReactElement, {\n ...menuProps,\n className: classNames(menuProps.className, 'reactist_submenu_button'),\n ref,\n })}\n {list}\n </Menu>\n )\n})\n\n//\n// MenuGroup\n//\n\ntype MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {\n /**\n * A label to be shown visually and also used to semantically label the group.\n */\n label: string\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = polymorphicComponent<'div', MenuGroupProps>(function MenuGroup(\n { label, children, exceptionallySetClassName, ...props },\n ref,\n) {\n const { state } = React.useContext(MenuContext)\n return (\n <Ariakit.MenuGroup {...props} ref={ref} state={state} className={exceptionallySetClassName}>\n {label ? (\n <div role=\"presentation\" className=\"reactist_menugroup__label\">\n {label}\n </div>\n ) : null}\n {children}\n </Ariakit.MenuGroup>\n )\n})\n\nexport { Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }\nexport type { MenuButtonProps, MenuListProps, MenuItemProps, SubMenuProps, MenuGroupProps }\n"],"names":["MenuContext","React","Menu","children","onItemSelect","props","state","Ariakit","focusLoop","gutter","shift","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","className","classNames","MenuList","visible","Portal","preserveTabOrder","MenuItem","onSelect","hideOnSelect","onClick","as","hide","handleClick","event","onSelectResult","defaultPrevented","undefined","shouldClose","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","menuProps","useMenuItem","MenuGroup","label","role"],"mappings":"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"}