@doist/reactist 28.7.2 → 28.7.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 (467) hide show
  1. package/dist/reactist.cjs.development.js +2091 -3811
  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/avatar/avatar.js +35 -30
  6. package/es/avatar/avatar.js.map +1 -1
  7. package/es/avatar/utils.js +19 -22
  8. package/es/avatar/utils.js.map +1 -1
  9. package/es/badge/badge.js +5 -16
  10. package/es/badge/badge.js.map +1 -1
  11. package/es/banner/banner.js +39 -115
  12. package/es/banner/banner.js.map +1 -1
  13. package/es/banner/banner.module.css.js +1 -1
  14. package/es/base-field/base-field.js +80 -162
  15. package/es/base-field/base-field.js.map +1 -1
  16. package/es/base-field/base-field.module.css.js +1 -1
  17. package/es/box/box.js +61 -137
  18. package/es/box/box.js.map +1 -1
  19. package/es/button/button.js +42 -95
  20. package/es/button/button.js.map +1 -1
  21. package/es/checkbox-field/checkbox-field.js +46 -73
  22. package/es/checkbox-field/checkbox-field.js.map +1 -1
  23. package/es/checkbox-field/checkbox-field.module.css.js +1 -1
  24. package/es/checkbox-field/checkbox-icon.js +28 -55
  25. package/es/checkbox-field/checkbox-icon.js.map +1 -1
  26. package/es/checkbox-field/use-fork-ref.js +29 -25
  27. package/es/checkbox-field/use-fork-ref.js.map +1 -1
  28. package/es/columns/columns.js +22 -46
  29. package/es/columns/columns.js.map +1 -1
  30. package/es/columns/columns.module.css.js +1 -1
  31. package/es/components/color-picker/color-picker.js +45 -66
  32. package/es/components/color-picker/color-picker.js.map +1 -1
  33. package/es/components/deprecated-button/deprecated-button.js +11 -34
  34. package/es/components/deprecated-button/deprecated-button.js.map +1 -1
  35. package/es/components/deprecated-dropdown/dropdown.js +136 -197
  36. package/es/components/deprecated-dropdown/dropdown.js.map +1 -1
  37. package/es/components/deprecated-input/input.js +6 -10
  38. package/es/components/deprecated-input/input.js.map +1 -1
  39. package/es/components/deprecated-select/select.js +7 -31
  40. package/es/components/deprecated-select/select.js.map +1 -1
  41. package/es/components/key-capturer/key-capturer.js +130 -171
  42. package/es/components/key-capturer/key-capturer.js.map +1 -1
  43. package/es/components/keyboard-shortcut/keyboard-shortcut.js +48 -79
  44. package/es/components/keyboard-shortcut/keyboard-shortcut.js.map +1 -1
  45. package/es/components/progress-bar/progress-bar.js +8 -20
  46. package/es/components/progress-bar/progress-bar.js.map +1 -1
  47. package/es/components/time/time-utils.js +52 -64
  48. package/es/components/time/time-utils.js.map +1 -1
  49. package/es/components/time/time.js +90 -114
  50. package/es/components/time/time.js.map +1 -1
  51. package/es/divider/divider.js +4 -13
  52. package/es/divider/divider.js.map +1 -1
  53. package/es/heading/heading.js +19 -28
  54. package/es/heading/heading.js.map +1 -1
  55. package/es/hidden/hidden.js +36 -45
  56. package/es/hidden/hidden.js.map +1 -1
  57. package/es/hidden-visually/hidden-visually.js +7 -13
  58. package/es/hidden-visually/hidden-visually.js.map +1 -1
  59. package/es/icons/alert-icon.js +18 -64
  60. package/es/icons/alert-icon.js.map +1 -1
  61. package/es/icons/banner-icon.js +25 -97
  62. package/es/icons/banner-icon.js.map +1 -1
  63. package/es/icons/close-icon.js +3 -9
  64. package/es/icons/close-icon.js.map +1 -1
  65. package/es/icons/password-hidden-icon.js +6 -23
  66. package/es/icons/password-hidden-icon.js.map +1 -1
  67. package/es/icons/password-visible-icon.js +5 -16
  68. package/es/icons/password-visible-icon.js.map +1 -1
  69. package/es/inline/inline.js +8 -23
  70. package/es/inline/inline.js.map +1 -1
  71. package/es/loading/loading.js +17 -28
  72. package/es/loading/loading.js.map +1 -1
  73. package/es/menu/menu.js +127 -260
  74. package/es/menu/menu.js.map +1 -1
  75. package/es/modal/modal.js +143 -272
  76. package/es/modal/modal.js.map +1 -1
  77. package/es/modal/modal.module.css.js +1 -1
  78. package/es/notice/notice.js +8 -21
  79. package/es/notice/notice.js.map +1 -1
  80. package/es/notice/notice.module.css.js +1 -1
  81. package/es/password-field/password-field.js +10 -24
  82. package/es/password-field/password-field.js.map +1 -1
  83. package/es/prose/prose.js +10 -15
  84. package/es/prose/prose.js.map +1 -1
  85. package/es/select-field/select-field.js +14 -51
  86. package/es/select-field/select-field.js.map +1 -1
  87. package/es/spinner/spinner.js +6 -20
  88. package/es/spinner/spinner.js.map +1 -1
  89. package/es/stack/stack.js +15 -27
  90. package/es/stack/stack.js.map +1 -1
  91. package/es/switch-field/switch-field.js +38 -73
  92. package/es/switch-field/switch-field.js.map +1 -1
  93. package/es/switch-field/switch-field.module.css.js +1 -1
  94. package/es/tabs/tabs.js +120 -207
  95. package/es/tabs/tabs.js.map +1 -1
  96. package/es/text/text.js +16 -25
  97. package/es/text/text.js.map +1 -1
  98. package/es/text-area/text-area.js +54 -111
  99. package/es/text-area/text-area.js.map +1 -1
  100. package/es/text-field/text-field.js +30 -84
  101. package/es/text-field/text-field.js.map +1 -1
  102. package/es/text-link/text-link.js +9 -20
  103. package/es/text-link/text-link.js.map +1 -1
  104. package/es/text-link/text-link.module.css.js +1 -1
  105. package/es/toast/static-toast.js +35 -70
  106. package/es/toast/static-toast.js.map +1 -1
  107. package/es/toast/toast-animation.js +121 -159
  108. package/es/toast/toast-animation.js.map +1 -1
  109. package/es/toast/use-toasts.js +134 -197
  110. package/es/toast/use-toasts.js.map +1 -1
  111. package/es/tooltip/tooltip.js +31 -69
  112. package/es/tooltip/tooltip.js.map +1 -1
  113. package/es/utils/common-helpers.js +9 -13
  114. package/es/utils/common-helpers.js.map +1 -1
  115. package/es/utils/polymorphism.js +7 -8
  116. package/es/utils/polymorphism.js.map +1 -1
  117. package/es/utils/responsive-props.js +57 -66
  118. package/es/utils/responsive-props.js.map +1 -1
  119. package/lib/avatar/avatar.d.ts +21 -21
  120. package/lib/avatar/avatar.js +69 -1
  121. package/lib/avatar/avatar.js.map +1 -1
  122. package/lib/avatar/avatar.module.css.js +7 -1
  123. package/lib/avatar/avatar.module.css.js.map +1 -1
  124. package/lib/avatar/index.d.ts +1 -1
  125. package/lib/avatar/utils.d.ts +3 -3
  126. package/lib/avatar/utils.js +30 -1
  127. package/lib/avatar/utils.js.map +1 -1
  128. package/lib/badge/badge.d.ts +15 -15
  129. package/lib/badge/badge.js +36 -1
  130. package/lib/badge/badge.js.map +1 -1
  131. package/lib/badge/badge.module.css.js +7 -1
  132. package/lib/badge/badge.module.css.js.map +1 -1
  133. package/lib/badge/index.d.ts +1 -1
  134. package/lib/banner/banner.d.ts +87 -87
  135. package/lib/banner/banner.js +79 -1
  136. package/lib/banner/banner.js.map +1 -1
  137. package/lib/banner/banner.module.css.js +7 -1
  138. package/lib/banner/banner.module.css.js.map +1 -1
  139. package/lib/banner/index.d.ts +2 -2
  140. package/lib/banner/story-promo-image.d.ts +4 -4
  141. package/lib/base-field/base-field.d.ts +139 -139
  142. package/lib/base-field/base-field.js +127 -1
  143. package/lib/base-field/base-field.js.map +1 -1
  144. package/lib/base-field/base-field.module.css.js +7 -1
  145. package/lib/base-field/base-field.module.css.js.map +1 -1
  146. package/lib/base-field/index.d.ts +1 -1
  147. package/lib/box/box.d.ts +73 -73
  148. package/lib/box/box.js +103 -1
  149. package/lib/box/box.js.map +1 -1
  150. package/lib/box/box.module.css.js +7 -1
  151. package/lib/box/box.module.css.js.map +1 -1
  152. package/lib/box/gap.module.css.js +7 -1
  153. package/lib/box/gap.module.css.js.map +1 -1
  154. package/lib/box/index.d.ts +1 -1
  155. package/lib/box/margin.module.css.js +7 -1
  156. package/lib/box/margin.module.css.js.map +1 -1
  157. package/lib/box/padding.module.css.js +7 -1
  158. package/lib/box/padding.module.css.js.map +1 -1
  159. package/lib/box/width.module.css.js +7 -1
  160. package/lib/box/width.module.css.js.map +1 -1
  161. package/lib/button/button.d.ts +127 -127
  162. package/lib/button/button.js +86 -1
  163. package/lib/button/button.js.map +1 -1
  164. package/lib/button/button.module.css.js +7 -1
  165. package/lib/button/button.module.css.js.map +1 -1
  166. package/lib/button/index.d.ts +1 -1
  167. package/lib/checkbox-field/checkbox-field.d.ts +40 -40
  168. package/lib/checkbox-field/checkbox-field.js +82 -1
  169. package/lib/checkbox-field/checkbox-field.js.map +1 -1
  170. package/lib/checkbox-field/checkbox-field.module.css.js +7 -1
  171. package/lib/checkbox-field/checkbox-field.module.css.js.map +1 -1
  172. package/lib/checkbox-field/checkbox-icon.d.ts +8 -8
  173. package/lib/checkbox-field/checkbox-icon.js +59 -1
  174. package/lib/checkbox-field/checkbox-icon.js.map +1 -1
  175. package/lib/checkbox-field/index.d.ts +1 -1
  176. package/lib/checkbox-field/use-fork-ref.d.ts +11 -11
  177. package/lib/checkbox-field/use-fork-ref.js +42 -1
  178. package/lib/checkbox-field/use-fork-ref.js.map +1 -1
  179. package/lib/columns/columns.d.ts +20 -20
  180. package/lib/columns/columns.js +57 -1
  181. package/lib/columns/columns.js.map +1 -1
  182. package/lib/columns/columns.module.css.js +7 -1
  183. package/lib/columns/columns.module.css.js.map +1 -1
  184. package/lib/columns/index.d.ts +1 -1
  185. package/lib/components/color-picker/color-picker.d.ts +29 -29
  186. package/lib/components/color-picker/color-picker.js +86 -1
  187. package/lib/components/color-picker/color-picker.js.map +1 -1
  188. package/lib/components/color-picker/index.d.ts +3 -3
  189. package/lib/components/color-picker/index.js +11 -1
  190. package/lib/components/color-picker/index.js.map +1 -1
  191. package/lib/components/deprecated-button/deprecated-button.d.ts +54 -54
  192. package/lib/components/deprecated-button/deprecated-button.js +49 -1
  193. package/lib/components/deprecated-button/deprecated-button.js.map +1 -1
  194. package/lib/components/deprecated-button/index.d.ts +4 -4
  195. package/lib/components/deprecated-button/index.js +9 -1
  196. package/lib/components/deprecated-button/index.js.map +1 -1
  197. package/lib/components/deprecated-dropdown/dropdown.d.ts +55 -55
  198. package/lib/components/deprecated-dropdown/dropdown.js +182 -1
  199. package/lib/components/deprecated-dropdown/dropdown.js.map +1 -1
  200. package/lib/components/deprecated-dropdown/index.d.ts +2 -2
  201. package/lib/components/deprecated-dropdown/index.js +9 -1
  202. package/lib/components/deprecated-dropdown/index.js.map +1 -1
  203. package/lib/components/deprecated-input/index.d.ts +2 -2
  204. package/lib/components/deprecated-input/index.js +9 -1
  205. package/lib/components/deprecated-input/index.js.map +1 -1
  206. package/lib/components/deprecated-input/input.d.ts +10 -10
  207. package/lib/components/deprecated-input/input.js +41 -1
  208. package/lib/components/deprecated-input/input.js.map +1 -1
  209. package/lib/components/deprecated-select/index.d.ts +2 -2
  210. package/lib/components/deprecated-select/index.js +9 -1
  211. package/lib/components/deprecated-select/index.js.map +1 -1
  212. package/lib/components/deprecated-select/select.d.ts +33 -33
  213. package/lib/components/deprecated-select/select.js +43 -1
  214. package/lib/components/deprecated-select/select.js.map +1 -1
  215. package/lib/components/icons/CloseIcon.svg.d.ts +3 -3
  216. package/lib/components/icons/ThinQuestionMarkIcon.svg.d.ts +3 -3
  217. package/lib/components/icons/ThreeDotsIcon.svg.d.ts +12 -12
  218. package/lib/components/key-capturer/index.d.ts +3 -3
  219. package/lib/components/key-capturer/index.js +11 -1
  220. package/lib/components/key-capturer/index.js.map +1 -1
  221. package/lib/components/key-capturer/key-capturer.d.ts +40 -40
  222. package/lib/components/key-capturer/key-capturer.js +171 -1
  223. package/lib/components/key-capturer/key-capturer.js.map +1 -1
  224. package/lib/components/keyboard-shortcut/index.d.ts +2 -2
  225. package/lib/components/keyboard-shortcut/index.js +9 -1
  226. package/lib/components/keyboard-shortcut/index.js.map +1 -1
  227. package/lib/components/keyboard-shortcut/keyboard-shortcut.d.ts +44 -44
  228. package/lib/components/keyboard-shortcut/keyboard-shortcut.js +97 -1
  229. package/lib/components/keyboard-shortcut/keyboard-shortcut.js.map +1 -1
  230. package/lib/components/progress-bar/index.d.ts +2 -2
  231. package/lib/components/progress-bar/index.js +9 -1
  232. package/lib/components/progress-bar/index.js.map +1 -1
  233. package/lib/components/progress-bar/progress-bar.d.ts +14 -14
  234. package/lib/components/progress-bar/progress-bar.js +44 -1
  235. package/lib/components/progress-bar/progress-bar.js.map +1 -1
  236. package/lib/components/progress-bar/progress-bar.module.css.js +7 -1
  237. package/lib/components/progress-bar/progress-bar.module.css.js.map +1 -1
  238. package/lib/components/time/index.d.ts +2 -2
  239. package/lib/components/time/index.js +9 -1
  240. package/lib/components/time/index.js.map +1 -1
  241. package/lib/components/time/time-utils.d.ts +19 -19
  242. package/lib/components/time/time-utils.js +69 -1
  243. package/lib/components/time/time-utils.js.map +1 -1
  244. package/lib/components/time/time.d.ts +39 -39
  245. package/lib/components/time/time.js +124 -1
  246. package/lib/components/time/time.js.map +1 -1
  247. package/lib/divider/divider.d.ts +8 -8
  248. package/lib/divider/divider.js +36 -1
  249. package/lib/divider/divider.js.map +1 -1
  250. package/lib/divider/divider.module.css.js +7 -1
  251. package/lib/divider/divider.module.css.js.map +1 -1
  252. package/lib/divider/index.d.ts +1 -1
  253. package/lib/heading/heading.d.ts +112 -112
  254. package/lib/heading/heading.js +51 -1
  255. package/lib/heading/heading.js.map +1 -1
  256. package/lib/heading/heading.module.css.js +7 -1
  257. package/lib/heading/heading.module.css.js.map +1 -1
  258. package/lib/heading/index.d.ts +1 -1
  259. package/lib/hidden/hidden.d.ts +49 -49
  260. package/lib/hidden/hidden.js +70 -1
  261. package/lib/hidden/hidden.js.map +1 -1
  262. package/lib/hidden/hidden.module.css.js +7 -1
  263. package/lib/hidden/hidden.module.css.js.map +1 -1
  264. package/lib/hidden/index.d.ts +1 -1
  265. package/lib/hidden-visually/hidden-visually.d.ts +11 -11
  266. package/lib/hidden-visually/hidden-visually.js +40 -1
  267. package/lib/hidden-visually/hidden-visually.js.map +1 -1
  268. package/lib/hidden-visually/hidden-visually.module.css.js +7 -1
  269. package/lib/hidden-visually/hidden-visually.module.css.js.map +1 -1
  270. package/lib/hidden-visually/index.d.ts +1 -1
  271. package/lib/hooks/use-previous/index.d.ts +1 -1
  272. package/lib/hooks/use-previous/use-previous.d.ts +15 -15
  273. package/lib/icons/alert-icon.d.ts +6 -6
  274. package/lib/icons/alert-icon.js +56 -1
  275. package/lib/icons/alert-icon.js.map +1 -1
  276. package/lib/icons/banner-icon.d.ts +6 -6
  277. package/lib/icons/banner-icon.js +68 -1
  278. package/lib/icons/banner-icon.js.map +1 -1
  279. package/lib/icons/banner-icon.module.css.js +7 -1
  280. package/lib/icons/banner-icon.module.css.js.map +1 -1
  281. package/lib/icons/close-icon.d.ts +3 -3
  282. package/lib/icons/close-icon.js +33 -1
  283. package/lib/icons/close-icon.js.map +1 -1
  284. package/lib/icons/password-hidden-icon.d.ts +3 -3
  285. package/lib/icons/password-hidden-icon.js +36 -1
  286. package/lib/icons/password-hidden-icon.js.map +1 -1
  287. package/lib/icons/password-visible-icon.d.ts +3 -3
  288. package/lib/icons/password-visible-icon.js +35 -1
  289. package/lib/icons/password-visible-icon.js.map +1 -1
  290. package/lib/index.d.ts +38 -38
  291. package/lib/index.js +106 -1
  292. package/lib/index.js.map +1 -1
  293. package/lib/inline/index.d.ts +1 -1
  294. package/lib/inline/inline.d.ts +12 -12
  295. package/lib/inline/inline.js +40 -1
  296. package/lib/inline/inline.js.map +1 -1
  297. package/lib/loading/index.d.ts +1 -1
  298. package/lib/loading/loading.d.ts +26 -26
  299. package/lib/loading/loading.js +49 -1
  300. package/lib/loading/loading.js.map +1 -1
  301. package/lib/menu/index.d.ts +2 -2
  302. package/lib/menu/menu.d.ts +128 -128
  303. package/lib/menu/menu.js +179 -1
  304. package/lib/menu/menu.js.map +1 -1
  305. package/lib/modal/index.d.ts +1 -1
  306. package/lib/modal/modal-stories-components.d.ts +47 -47
  307. package/lib/modal/modal.d.ts +185 -185
  308. package/lib/modal/modal.js +209 -1
  309. package/lib/modal/modal.js.map +1 -1
  310. package/lib/modal/modal.module.css.js +7 -1
  311. package/lib/modal/modal.module.css.js.map +1 -1
  312. package/lib/notice/index.d.ts +1 -1
  313. package/lib/notice/notice.d.ts +10 -10
  314. package/lib/notice/notice.js +42 -1
  315. package/lib/notice/notice.js.map +1 -1
  316. package/lib/notice/notice.module.css.js +7 -1
  317. package/lib/notice/notice.module.css.js.map +1 -1
  318. package/lib/password-field/index.d.ts +1 -1
  319. package/lib/password-field/password-field.d.ts +10 -10
  320. package/lib/password-field/password-field.js +43 -1
  321. package/lib/password-field/password-field.js.map +1 -1
  322. package/lib/prose/index.d.ts +2 -2
  323. package/lib/prose/prose-example.d.ts +1 -1
  324. package/lib/prose/prose.d.ts +44 -44
  325. package/lib/prose/prose.js +42 -1
  326. package/lib/prose/prose.js.map +1 -1
  327. package/lib/prose/prose.module.css.js +7 -1
  328. package/lib/prose/prose.module.css.js.map +1 -1
  329. package/lib/select-field/index.d.ts +1 -1
  330. package/lib/select-field/select-field.d.ts +7 -7
  331. package/lib/select-field/select-field.js +48 -1
  332. package/lib/select-field/select-field.js.map +1 -1
  333. package/lib/select-field/select-field.module.css.js +7 -1
  334. package/lib/select-field/select-field.module.css.js.map +1 -1
  335. package/lib/spinner/index.d.ts +1 -1
  336. package/lib/spinner/spinner.d.ts +5 -5
  337. package/lib/spinner/spinner.js +36 -1
  338. package/lib/spinner/spinner.js.map +1 -1
  339. package/lib/spinner/spinner.module.css.js +7 -1
  340. package/lib/spinner/spinner.module.css.js.map +1 -1
  341. package/lib/stack/index.d.ts +1 -1
  342. package/lib/stack/stack.d.ts +15 -15
  343. package/lib/stack/stack.js +52 -1
  344. package/lib/stack/stack.js.map +1 -1
  345. package/lib/switch-field/index.d.ts +1 -1
  346. package/lib/switch-field/switch-field.d.ts +19 -19
  347. package/lib/switch-field/switch-field.js +74 -1
  348. package/lib/switch-field/switch-field.js.map +1 -1
  349. package/lib/switch-field/switch-field.module.css.js +7 -1
  350. package/lib/switch-field/switch-field.module.css.js.map +1 -1
  351. package/lib/tabs/index.d.ts +1 -1
  352. package/lib/tabs/tabs.d.ts +125 -125
  353. package/lib/tabs/tabs.js +177 -1
  354. package/lib/tabs/tabs.js.map +1 -1
  355. package/lib/tabs/tabs.module.css.js +7 -1
  356. package/lib/tabs/tabs.module.css.js.map +1 -1
  357. package/lib/text/index.d.ts +1 -1
  358. package/lib/text/text.d.ts +47 -47
  359. package/lib/text/text.js +49 -1
  360. package/lib/text/text.js.map +1 -1
  361. package/lib/text/text.module.css.js +7 -1
  362. package/lib/text/text.module.css.js.map +1 -1
  363. package/lib/text-area/index.d.ts +1 -1
  364. package/lib/text-area/text-area.d.ts +39 -39
  365. package/lib/text-area/text-area.js +92 -1
  366. package/lib/text-area/text-area.js.map +1 -1
  367. package/lib/text-area/text-area.module.css.js +7 -1
  368. package/lib/text-area/text-area.module.css.js.map +1 -1
  369. package/lib/text-field/index.d.ts +1 -1
  370. package/lib/text-field/text-field.d.ts +18 -18
  371. package/lib/text-field/text-field.js +63 -1
  372. package/lib/text-field/text-field.js.map +1 -1
  373. package/lib/text-field/text-field.module.css.js +7 -1
  374. package/lib/text-field/text-field.module.css.js.map +1 -1
  375. package/lib/text-link/index.d.ts +1 -1
  376. package/lib/text-link/text-link.d.ts +9 -9
  377. package/lib/text-link/text-link.js +41 -1
  378. package/lib/text-link/text-link.js.map +1 -1
  379. package/lib/text-link/text-link.module.css.js +7 -1
  380. package/lib/text-link/text-link.module.css.js.map +1 -1
  381. package/lib/toast/index.d.ts +4 -4
  382. package/lib/toast/static-toast.d.ts +63 -63
  383. package/lib/toast/static-toast.js +59 -1
  384. package/lib/toast/static-toast.js.map +1 -1
  385. package/lib/toast/toast-animation.d.ts +50 -50
  386. package/lib/toast/toast-animation.js +141 -1
  387. package/lib/toast/toast-animation.js.map +1 -1
  388. package/lib/toast/toast.module.css.js +7 -1
  389. package/lib/toast/toast.module.css.js.map +1 -1
  390. package/lib/toast/use-toasts.d.ts +132 -132
  391. package/lib/toast/use-toasts.js +166 -1
  392. package/lib/toast/use-toasts.js.map +1 -1
  393. package/lib/tooltip/index.d.ts +2 -2
  394. package/lib/tooltip/tooltip.d.ts +72 -72
  395. package/lib/tooltip/tooltip.js +67 -1
  396. package/lib/tooltip/tooltip.js.map +1 -1
  397. package/lib/tooltip/tooltip.module.css.js +7 -1
  398. package/lib/tooltip/tooltip.module.css.js.map +1 -1
  399. package/lib/utils/common-helpers.d.ts +2 -2
  400. package/lib/utils/common-helpers.js +44 -1
  401. package/lib/utils/common-helpers.js.map +1 -1
  402. package/lib/utils/common-types.d.ts +42 -42
  403. package/lib/utils/polymorphism.d.ts +135 -135
  404. package/lib/utils/polymorphism.js +39 -1
  405. package/lib/utils/polymorphism.js.map +1 -1
  406. package/lib/utils/responsive-props.d.ts +44 -44
  407. package/lib/utils/responsive-props.js +70 -1
  408. package/lib/utils/responsive-props.js.map +1 -1
  409. package/lib/utils/storybook-helper.d.ts +55 -0
  410. package/lib/utils/test-helpers.d.ts +22 -22
  411. package/package.json +14 -18
  412. package/styles/avatar.css +2 -2
  413. package/styles/avatar.module.css.css +1 -1
  414. package/styles/badge.css +2 -2
  415. package/styles/badge.module.css.css +1 -1
  416. package/styles/banner.css +6 -6
  417. package/styles/banner.module.css.css +1 -1
  418. package/styles/base-field.css +4 -4
  419. package/styles/base-field.module.css.css +1 -1
  420. package/styles/box.css +1 -1
  421. package/styles/box.module.css.css +1 -1
  422. package/styles/button.css +4 -4
  423. package/styles/button.module.css.css +1 -1
  424. package/styles/checkbox-field.css +3 -3
  425. package/styles/checkbox-field.module.css.css +1 -1
  426. package/styles/columns.css +1 -1
  427. package/styles/divider.css +1 -1
  428. package/styles/heading.css +2 -2
  429. package/styles/heading.module.css.css +1 -1
  430. package/styles/hidden-visually.css +2 -2
  431. package/styles/hidden-visually.module.css.css +1 -1
  432. package/styles/hidden.css +1 -1
  433. package/styles/index.css +4 -4
  434. package/styles/loading.css +2 -2
  435. package/styles/menu.css +1 -1
  436. package/styles/modal.css +5 -5
  437. package/styles/modal.module.css.css +1 -1
  438. package/styles/notice.css +1 -1
  439. package/styles/password-field.css +7 -7
  440. package/styles/progress-bar.module.css.css +1 -1
  441. package/styles/prose.css +2 -2
  442. package/styles/prose.module.css.css +1 -1
  443. package/styles/reactist.css +30 -30
  444. package/styles/select-field.css +5 -5
  445. package/styles/select-field.module.css.css +1 -1
  446. package/styles/spinner.css +1 -1
  447. package/styles/static-toast.css +6 -6
  448. package/styles/switch-field.css +6 -6
  449. package/styles/switch-field.module.css.css +1 -1
  450. package/styles/tabs.css +2 -2
  451. package/styles/tabs.module.css.css +1 -1
  452. package/styles/text-area.css +5 -5
  453. package/styles/text-area.module.css.css +1 -1
  454. package/styles/text-field.css +5 -5
  455. package/styles/text-field.module.css.css +1 -1
  456. package/styles/text-link.css +2 -2
  457. package/styles/text-link.module.css.css +1 -1
  458. package/styles/text.css +2 -2
  459. package/styles/text.module.css.css +1 -1
  460. package/styles/toast.module.css.css +1 -1
  461. package/styles/tooltip.css +2 -2
  462. package/styles/tooltip.module.css.css +1 -1
  463. package/styles/use-toasts.css +6 -6
  464. package/es/_virtual/_rollupPluginBabelHelpers.js +0 -91
  465. package/es/_virtual/_rollupPluginBabelHelpers.js.map +0 -1
  466. package/lib/_virtual/_rollupPluginBabelHelpers.js +0 -2
  467. package/lib/_virtual/_rollupPluginBabelHelpers.js.map +0 -1
@@ -1,2 +1,68 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@ariakit/react"),o=require("../box/box.js"),r=require("./tooltip.module.css.js");function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,r.get?r:{enumerable:!0,get:function(){return e[o]}})}})),t.default=e,t}var n=i(e);const l=n.createContext({showTimeout:500,hideTimeout:100}),u=n.forwardRef(({children:e,content:i,position:u="top",gapSize:a=3,withArrow:s=!1,showTimeout:d,hideTimeout:c,exceptionallySetClassName:m},p)=>{const{showTimeout:f,hideTimeout:h}=n.useContext(l),T=t.useTooltipStore({placement:u,showTimeout:d??f,hideTimeout:c??h});n.useImperativeHandle(p,()=>T,[T]);const w=T.useState("open"),b=n.Children.only(e);if(!b)return b;if("string"==typeof b.ref)throw new Error("Tooltip: String refs cannot be used as they cannot be forwarded");return n.createElement(n.Fragment,null,n.createElement(t.TooltipAnchor,{render:b,store:T,ref:b.ref}),w&&i?n.createElement(t.Tooltip,{store:T,gutter:a,render:n.createElement(o.Box,{className:[r.default.tooltip,m],background:"toast",borderRadius:"standard",paddingX:"small",paddingY:"xsmall",maxWidth:"medium",width:"fitContent",overflow:"hidden",textAlign:"center"})},s?n.createElement(t.TooltipArrow,null):null,"function"==typeof i?i():i):null)});u.displayName="Tooltip",exports.Tooltip=u,exports.TooltipProvider=function({showTimeout:e=500,hideTimeout:t=100,children:o}){const r=n.useMemo(()=>({showTimeout:e,hideTimeout:t}),[e,t]);return n.createElement(l.Provider,{value:r},o)};
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var React = require('react');
6
+ var react = require('@ariakit/react');
7
+ var box = require('../box/box.js');
8
+ var tooltip_module = require('./tooltip.module.css.js');
9
+
10
+ function _interopNamespace(e) {
11
+ if (e && e.__esModule) return e;
12
+ var n = Object.create(null);
13
+ if (e) {
14
+ Object.keys(e).forEach(function (k) {
15
+ if (k !== 'default') {
16
+ var d = Object.getOwnPropertyDescriptor(e, k);
17
+ Object.defineProperty(n, k, d.get ? d : {
18
+ enumerable: true,
19
+ get: function () { return e[k]; }
20
+ });
21
+ }
22
+ });
23
+ }
24
+ n["default"] = e;
25
+ return Object.freeze(n);
26
+ }
27
+
28
+ var React__namespace = /*#__PURE__*/_interopNamespace(React);
29
+
30
+ var defaultShowTimeout = 500;
31
+ var defaultHideTimeout = 100;
32
+ var TooltipContext = React__namespace.createContext({
33
+ showTimeout: defaultShowTimeout,
34
+ hideTimeout: defaultHideTimeout
35
+ });
36
+ function TooltipProvider(_a) {
37
+ var _b = _a.showTimeout, showTimeout = _b === void 0 ? defaultShowTimeout : _b, _c = _a.hideTimeout, hideTimeout = _c === void 0 ? defaultHideTimeout : _c, children = _a.children;
38
+ var value = React__namespace.useMemo(function () { return ({ showTimeout: showTimeout, hideTimeout: hideTimeout }); }, [showTimeout, hideTimeout]);
39
+ return React__namespace.createElement(TooltipContext.Provider, { value: value }, children);
40
+ }
41
+ var Tooltip = React__namespace.forwardRef(function (_a, ref) {
42
+ var children = _a.children, content = _a.content, _b = _a.position, position = _b === void 0 ? 'top' : _b, _c = _a.gapSize, gapSize = _c === void 0 ? 3 : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, showTimeout = _a.showTimeout, hideTimeout = _a.hideTimeout, exceptionallySetClassName = _a.exceptionallySetClassName;
43
+ var _e = React__namespace.useContext(TooltipContext), globalShowTimeout = _e.showTimeout, globalHideTimeout = _e.hideTimeout;
44
+ var tooltip = react.useTooltipStore({
45
+ placement: position,
46
+ showTimeout: showTimeout !== null && showTimeout !== void 0 ? showTimeout : globalShowTimeout,
47
+ hideTimeout: hideTimeout !== null && hideTimeout !== void 0 ? hideTimeout : globalHideTimeout
48
+ });
49
+ React__namespace.useImperativeHandle(ref, function () { return tooltip; }, [tooltip]);
50
+ var isOpen = tooltip.useState('open');
51
+ var child = React__namespace.Children.only(children);
52
+ if (!child) {
53
+ return child;
54
+ }
55
+ if (typeof child.ref === 'string') {
56
+ throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded');
57
+ }
58
+ return (React__namespace.createElement(React__namespace.Fragment, null,
59
+ React__namespace.createElement(react.TooltipAnchor, { render: child, store: tooltip, ref: child.ref }),
60
+ isOpen && content ? (React__namespace.createElement(react.Tooltip, { store: tooltip, gutter: gapSize, render: React__namespace.createElement(box.Box, { className: [tooltip_module["default"].tooltip, exceptionallySetClassName], background: "toast", borderRadius: "standard", paddingX: "small", paddingY: "xsmall", maxWidth: "medium", width: "fitContent", overflow: "hidden", textAlign: "center" }) },
61
+ withArrow ? React__namespace.createElement(react.TooltipArrow, null) : null,
62
+ typeof content === 'function' ? content() : content)) : null));
63
+ });
64
+ Tooltip.displayName = 'Tooltip';
65
+
66
+ exports.Tooltip = Tooltip;
67
+ exports.TooltipProvider = TooltipProvider;
2
68
  //# sourceMappingURL=tooltip.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n useTooltipStore,\n Tooltip as AriakitTooltip,\n TooltipAnchor,\n TooltipArrow,\n} from '@ariakit/react'\nimport { Box } from '../box'\n\nimport type { TooltipStoreState, TooltipStore } from '@ariakit/react'\n\nimport styles from './tooltip.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\nconst defaultShowTimeout = 500\nconst defaultHideTimeout = 100\n\ntype TooltipContextState = {\n showTimeout: number\n hideTimeout: number\n}\n\nconst TooltipContext = React.createContext<TooltipContextState>({\n showTimeout: defaultShowTimeout,\n hideTimeout: defaultHideTimeout,\n})\n\nfunction TooltipProvider({\n showTimeout = defaultShowTimeout,\n hideTimeout = defaultHideTimeout,\n children,\n}: React.PropsWithChildren<{\n showTimeout?: number\n hideTimeout?: number\n}>) {\n const value = React.useMemo(() => ({ showTimeout, hideTimeout }), [showTimeout, hideTimeout])\n return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>\n}\n\ninterface TooltipProps extends ObfuscatedClassName {\n /**\n * The element that triggers the tooltip. Generally a button or link.\n *\n * It should be an interactive element accessible both via mouse and keyboard interactions.\n */\n children: React.ReactNode\n\n /**\n * The content to show in the tooltip.\n *\n * It can be rich content provided via React elements, or string content. It should not include\n * interactive elements inside it. This includes links or buttons.\n *\n * You can provide a function instead of the content itself. In this case, the function should\n * return the desired content. This is useful if the content is expensive to generate. It can\n * also be useful if the content dynamically changes often, so every time you trigger the\n * tooltip the content may have changed (e.g. if you show a ticking time clock in the tooltip).\n *\n * The trigger element will be associated to this content via `aria-describedby`. This means\n * that the tooltip content will be read by assistive technologies such as screen readers. It\n * will likely read this content right after reading the trigger element label.\n */\n content: React.ReactNode | (() => React.ReactNode)\n\n /**\n * How to place the tooltip relative to its trigger element.\n *\n * The possible values are \"top\", \"bottom\", \"left\", \"right\". Additionally, any of these values\n * can be combined with `-start` or `-end` for even more control. For instance `top-start` will\n * place the tooltip at the top, but with the start (e.g. left) side of the toolip and the\n * trigger aligned. If neither `-start` or `-end` are provided, the tooltip is centered along\n * the vertical or horizontal axis with the trigger.\n *\n * The position is enforced whenever possible, but tooltips can appear in different positions\n * if the specified one would make the tooltip intersect with the viewport edges.\n *\n * @default 'top'\n */\n position?: TooltipStoreState['placement']\n\n /**\n * The separation (in pixels) between the trigger element and the tooltip.\n * @default 3\n */\n gapSize?: number\n\n /**\n * Whether to show an arrow-like element attached to the tooltip, and pointing towards the\n * trigger element.\n * @default false\n */\n withArrow?: boolean\n\n /**\n * The amount of time in milliseconds to wait before showing the tooltip\n * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n * @default 500\n */\n showTimeout?: number\n\n /**\n * The amount of time in milliseconds to wait before hiding the tooltip\n * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n * @default 100\n */\n hideTimeout?: number\n}\n\nconst Tooltip = React.forwardRef<TooltipStore, TooltipProps>(\n (\n {\n children,\n content,\n position = 'top',\n gapSize = 3,\n withArrow = false,\n showTimeout,\n hideTimeout,\n exceptionallySetClassName,\n },\n ref,\n ) => {\n const { showTimeout: globalShowTimeout, hideTimeout: globalHideTimeout } = React.useContext(\n TooltipContext,\n )\n\n const tooltip = useTooltipStore({\n placement: position,\n showTimeout: showTimeout ?? globalShowTimeout,\n hideTimeout: hideTimeout ?? globalHideTimeout,\n })\n\n React.useImperativeHandle(ref, () => tooltip, [tooltip])\n\n const isOpen = tooltip.useState('open')\n\n const child = React.Children.only(\n children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n )\n\n if (!child) {\n return child\n }\n\n if (typeof child.ref === 'string') {\n throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n }\n\n return (\n <>\n <TooltipAnchor render={child} store={tooltip} ref={child.ref} />\n {isOpen && content ? (\n <AriakitTooltip\n store={tooltip}\n gutter={gapSize}\n render={\n <Box\n className={[styles.tooltip, exceptionallySetClassName]}\n background=\"toast\"\n borderRadius=\"standard\"\n paddingX=\"small\"\n paddingY=\"xsmall\"\n maxWidth=\"medium\"\n width=\"fitContent\"\n overflow=\"hidden\"\n textAlign=\"center\"\n />\n }\n >\n {withArrow ? <TooltipArrow /> : null}\n {typeof content === 'function' ? content() : content}\n </AriakitTooltip>\n ) : null}\n </>\n )\n },\n)\n\nTooltip.displayName = 'Tooltip'\n\nexport type { TooltipProps }\nexport { Tooltip, TooltipProvider }\n"],"names":["TooltipContext","React","createContext","showTimeout","hideTimeout","Tooltip","forwardRef","children","content","position","gapSize","withArrow","exceptionallySetClassName","ref","globalShowTimeout","globalHideTimeout","useContext","tooltip","useTooltipStore","placement","useImperativeHandle","isOpen","useState","child","Children","only","Error","createElement","Fragment","TooltipAnchor","render","store","AriakitTooltip","gutter","Box","className","styles","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow","displayName","value","useMemo","Provider"],"mappings":"kdAeA,MAQMA,EAAiBC,EAAMC,cAAmC,CAC5DC,YATuB,IAUvBC,YATuB,MA6FrBC,EAAUJ,EAAMK,WAClB,EAEQC,SAAAA,EACAC,QAAAA,EACAC,SAAAA,EAAW,MACXC,QAAAA,EAAU,EACVC,UAAAA,GAAY,EACZR,YAAAA,EACAC,YAAAA,EACAQ,0BAAAA,GAEJC,KAEA,MAAQV,YAAaW,EAAmBV,YAAaW,GAAsBd,EAAMe,WAC7EhB,GAGEiB,EAAUC,EAAAA,gBAAgB,CAC5BC,UAAWV,EACXN,YAAaA,GAAeW,EAC5BV,YAAaA,GAAeW,IAGhCd,EAAMmB,oBAAoBP,EAAK,IAAMI,EAAS,CAACA,IAE/C,MAAMI,EAASJ,EAAQK,SAAS,QAE1BC,EAAQtB,EAAMuB,SAASC,KACzBlB,GAGJ,IAAKgB,EACD,OAAOA,EAGX,GAAyB,iBAAdA,EAAMV,IACb,MAAM,IAAIa,MAAM,mEAGpB,OACIzB,EAAA0B,cAAA1B,EAAA2B,SAAA,KACI3B,EAAA0B,cAACE,gBAAa,CAACC,OAAQP,EAAOQ,MAAOd,EAASJ,IAAKU,EAAMV,MACxDQ,GAAUb,EACPP,EAAC0B,cAAAK,EAAAA,QACG,CAAAD,MAAOd,EACPgB,OAAQvB,EACRoB,OACI7B,EAAA0B,cAACO,MAAG,CACAC,UAAW,CAACC,EAAAA,QAAOnB,QAASL,GAC5ByB,WAAW,QACXC,aAAa,WACbC,SAAS,QACTC,SAAS,SACTC,SAAS,SACTC,MAAM,aACNC,SAAS,SACTC,UAAU,YAIjBjC,EAAYV,EAAA0B,cAACkB,EAADA,aAAgB,MAAG,KACZ,mBAAZrC,EAAyBA,IAAYA,GAEjD,QAMpBH,EAAQyC,YAAc,oDAvJtB,UAAyB3C,YACrBA,EAduB,IAaFC,YAErBA,EAduB,IAYFG,SAGrBA,IAKA,MAAMwC,EAAQ9C,EAAM+C,QAAQ,KAAO,CAAE7C,YAAAA,EAAaC,YAAAA,IAAgB,CAACD,EAAaC,IAChF,OAAOH,EAAA0B,cAAC3B,EAAeiD,SAAQ,CAACF,MAAOA,GAAQxC"}
1
+ {"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":[null],"names":["React","useTooltipStore","TooltipAnchor","AriakitTooltip","Box","styles","TooltipArrow"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,IAAM,kBAAkB,GAAG,GAAG,CAAA;AAC9B,IAAM,kBAAkB,GAAG,GAAG,CAAA;AAO9B,IAAM,cAAc,GAAGA,gBAAK,CAAC,aAAa,CAAsB;AAC5D,IAAA,WAAW,EAAE,kBAAkB;AAC/B,IAAA,WAAW,EAAE,kBAAkB;AAClC,CAAA,CAAC,CAAA;AAEF,SAAS,eAAe,CAAC,EAOvB,EAAA;AANE,IAAA,IAAA,EAAA,GAAA,EAAA,CAAA,WAAgC,EAAhC,WAAW,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,kBAAkB,KAAA,EAChC,EAAA,GAAA,EAAA,CAAA,WAAgC,EAAhC,WAAW,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,kBAAkB,GAAA,EAAA,EAChC,QAAQ,GAAA,EAAA,CAAA,QAAA,CAAA;IAKR,IAAM,KAAK,GAAGA,gBAAK,CAAC,OAAO,CAAC,YAAA,EAAM,QAAC,EAAE,WAAW,EAAA,WAAA,EAAE,WAAW,EAAA,WAAA,EAAE,EAAC,EAAA,EAAE,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAA;IAC7F,OAAOA,gBAAA,CAAA,aAAA,CAAC,cAAc,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA,EAAG,QAAQ,CAA2B,CAAA;AACtF,CAAC;AAuEK,IAAA,OAAO,GAAGA,gBAAK,CAAC,UAAU,CAC5B,UACI,EASC,EACD,GAAG,EAAA;AATC,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,EAAgB,GAAA,EAAA,CAAA,QAAA,EAAhB,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAK,GAAA,EAAA,EAChB,EAAA,GAAA,EAAA,CAAA,OAAW,EAAX,OAAO,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,CAAC,GAAA,EAAA,EACX,EAAA,GAAA,EAAA,CAAA,SAAiB,EAAjB,SAAS,mBAAG,KAAK,GAAA,EAAA,EACjB,WAAW,iBAAA,EACX,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,yBAAyB,GAAA,EAAA,CAAA,yBAAA,CAAA;AAIvB,IAAA,IAAA,EAAqE,GAAAA,gBAAK,CAAC,UAAU,CACvF,cAAc,CACjB,EAFoB,iBAAiB,GAAA,EAAA,CAAA,WAAA,EAAe,iBAAiB,iBAErE,CAAA;IAED,IAAM,OAAO,GAAGC,qBAAe,CAAC;AAC5B,QAAA,SAAS,EAAE,QAAQ;AACnB,QAAA,WAAW,EAAE,WAAW,KAAA,IAAA,IAAX,WAAW,KAAX,KAAA,CAAA,GAAA,WAAW,GAAI,iBAAiB;AAC7C,QAAA,WAAW,EAAE,WAAW,KAAA,IAAA,IAAX,WAAW,KAAX,KAAA,CAAA,GAAA,WAAW,GAAI,iBAAiB;AAChD,KAAA,CAAC,CAAA;AAEF,IAAAD,gBAAK,CAAC,mBAAmB,CAAC,GAAG,EAAE,YAAM,EAAA,OAAA,OAAO,CAAA,EAAA,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAExD,IAAM,MAAM,GAAG,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;IAEvC,IAAM,KAAK,GAAGA,gBAAK,CAAC,QAAQ,CAAC,IAAI,CAC7B,QAA+E,CAClF,CAAA;IAED,IAAI,CAAC,KAAK,EAAE;AACR,QAAA,OAAO,KAAK,CAAA;AACf,KAAA;AAED,IAAA,IAAI,OAAO,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;AAC/B,QAAA,MAAM,IAAI,KAAK,CAAC,iEAAiE,CAAC,CAAA;AACrF,KAAA;AAED,IAAA,QACIA,gBAAA,CAAA,aAAA,CAAAA,gBAAA,CAAA,QAAA,EAAA,IAAA;AACI,QAAAA,gBAAA,CAAA,aAAA,CAACE,mBAAa,EAAA,EAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,EAAI,CAAA;AAC/D,QAAA,MAAM,IAAI,OAAO,IACdF,gBAAC,CAAA,aAAA,CAAAG,aAAc,EACX,EAAA,KAAK,EAAE,OAAO,EACd,MAAM,EAAE,OAAO,EACf,MAAM,EACFH,gBAAA,CAAA,aAAA,CAACI,OAAG,EAAA,EACA,SAAS,EAAE,CAACC,yBAAM,CAAC,OAAO,EAAE,yBAAyB,CAAC,EACtD,UAAU,EAAC,OAAO,EAClB,YAAY,EAAC,UAAU,EACvB,QAAQ,EAAC,OAAO,EAChB,QAAQ,EAAC,QAAQ,EACjB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,YAAY,EAClB,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAC,QAAQ,EACpB,CAAA,EAAA;YAGL,SAAS,GAAGL,gBAAA,CAAA,aAAA,CAACM,kBAAY,EAAG,IAAA,CAAA,GAAG,IAAI;YACnC,OAAO,OAAO,KAAK,UAAU,GAAG,OAAO,EAAE,GAAG,OAAO,CACvC,IACjB,IAAI,CACT,EACN;AACL,CAAC,EACJ;AAED,OAAO,CAAC,WAAW,GAAG,SAAS;;;;;"}
@@ -1,2 +1,8 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={tooltip:"_487c82cd"};
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var modules_95f1407a = {"tooltip":"_487c82cd"};
6
+
7
+ exports["default"] = modules_95f1407a;
2
8
  //# sourceMappingURL=tooltip.module.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
1
+ {"version":3,"file":"tooltip.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
@@ -1,2 +1,2 @@
1
- export declare function generateElementId(prefix: string): string;
2
- export declare function useId(providedId?: string): string;
1
+ export declare function generateElementId(prefix: string): string;
2
+ export declare function useId(providedId?: string): string;
@@ -1,2 +1,45 @@
1
- "use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,t}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react"));let r=0;function n(e){return`${e}-${r++}`}exports.generateElementId=n,exports.useId=function(e){const r=t.useRef(e??null);return r.current||(r.current=n("element")),r.current};
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var React = require('react');
6
+
7
+ function _interopNamespace(e) {
8
+ if (e && e.__esModule) return e;
9
+ var n = Object.create(null);
10
+ if (e) {
11
+ Object.keys(e).forEach(function (k) {
12
+ if (k !== 'default') {
13
+ var d = Object.getOwnPropertyDescriptor(e, k);
14
+ Object.defineProperty(n, k, d.get ? d : {
15
+ enumerable: true,
16
+ get: function () { return e[k]; }
17
+ });
18
+ }
19
+ });
20
+ }
21
+ n["default"] = e;
22
+ return Object.freeze(n);
23
+ }
24
+
25
+ var React__namespace = /*#__PURE__*/_interopNamespace(React);
26
+
27
+ var uid = 0;
28
+ function uniqueId() {
29
+ return uid++;
30
+ }
31
+ function generateElementId(prefix) {
32
+ var num = uniqueId();
33
+ return "".concat(prefix, "-").concat(num);
34
+ }
35
+ function useId(providedId) {
36
+ var ref = React__namespace.useRef(providedId !== null && providedId !== void 0 ? providedId : null);
37
+ if (!ref.current) {
38
+ ref.current = generateElementId('element');
39
+ }
40
+ return ref.current;
41
+ }
42
+
43
+ exports.generateElementId = generateElementId;
44
+ exports.useId = useId;
2
45
  //# sourceMappingURL=common-helpers.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"common-helpers.js","sources":["../../src/utils/common-helpers.ts"],"sourcesContent":["import * as React from 'react'\n\nlet uid = 0\nfunction uniqueId() {\n return uid++\n}\n\nexport function generateElementId(prefix: string): string {\n const num = uniqueId()\n return `${prefix}-${num}`\n}\n\nexport function useId(providedId?: string): string {\n const ref = React.useRef<string | null>(providedId ?? null)\n if (!ref.current) {\n ref.current = generateElementId('element')\n }\n return ref.current\n}\n"],"names":["uid","generateElementId","prefix","providedId","ref","React","useRef","current"],"mappings":"8WAEA,IAAIA,EAAM,EAKJ,SAAUC,EAAkBC,GAE9B,MAAU,GAAAA,KALHF,gDAQL,SAAgBG,GAClB,MAAMC,EAAMC,EAAMC,OAAsBH,GAAc,MAItD,OAHKC,EAAIG,UACLH,EAAIG,QAAUN,EAAkB,YAE7BG,EAAIG"}
1
+ {"version":3,"file":"common-helpers.js","sources":["../../src/utils/common-helpers.ts"],"sourcesContent":[null],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAI,GAAG,GAAG,CAAC,CAAA;AACX,SAAS,QAAQ,GAAA;IACb,OAAO,GAAG,EAAE,CAAA;AAChB,CAAC;AAEK,SAAU,iBAAiB,CAAC,MAAc,EAAA;AAC5C,IAAA,IAAM,GAAG,GAAG,QAAQ,EAAE,CAAA;AACtB,IAAA,OAAO,EAAG,CAAA,MAAA,CAAA,MAAM,EAAI,GAAA,CAAA,CAAA,MAAA,CAAA,GAAG,CAAE,CAAA;AAC7B,CAAC;AAEK,SAAU,KAAK,CAAC,UAAmB,EAAA;AACrC,IAAA,IAAM,GAAG,GAAGA,gBAAK,CAAC,MAAM,CAAgB,UAAU,KAAV,IAAA,IAAA,UAAU,KAAV,KAAA,CAAA,GAAA,UAAU,GAAI,IAAI,CAAC,CAAA;AAC3D,IAAA,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE;AACd,QAAA,GAAG,CAAC,OAAO,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAA;AAC7C,KAAA;IACD,OAAO,GAAG,CAAC,OAAO,CAAA;AACtB;;;;;"}
@@ -1,42 +1,42 @@
1
- import type classNames from 'classnames';
2
- import type { HTMLAttributes } from 'react';
3
- export type Space = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
4
- export type SpaceWithNegatives = Space | '-xsmall' | '-small' | '-medium' | '-large' | '-xlarge' | '-xxlarge';
5
- export type Tone = 'normal' | 'secondary' | 'danger' | 'positive';
6
- export type AlertTone = 'info' | 'positive' | 'caution' | 'critical';
7
- export type DividerWeight = 'primary' | 'secondary' | 'tertiary' | 'none';
8
- type ClassValue = Parameters<typeof classNames>[number];
9
- export type WithEnhancedClassName<T = unknown> = T extends HTMLElement ? Omit<HTMLAttributes<T>, 'className'> & {
10
- className?: ClassValue;
11
- } : T extends {
12
- className?: unknown;
13
- } ? Omit<T, 'className'> & {
14
- className?: ClassValue;
15
- } : T & {
16
- className?: ClassValue;
17
- };
18
- export interface OpenInNewTab {
19
- openInNewTab?: boolean;
20
- target?: never;
21
- rel?: never;
22
- }
23
- export type ObfuscatedClassName = {
24
- /**
25
- * Used internally to set the `className` prop of the main container element for this component.
26
- *
27
- * Aside from the different name, the prop behaves the same as the native `className`. The only
28
- * reason for the name change is to discourage applying custom CSS to the design system
29
- * components, which are supposed to _eventually_ provide all the styling features we may need.
30
- *
31
- * This prop is meant to be used only in certain circumstances, when you really need a escape
32
- * hatch to apply custom styles to a component. Before reaching for this feature, try harder to
33
- * see if you can solve your needs with what the design system provides.
34
- *
35
- * For instance, instead of applying layout-related styles to a non-layout component, consider
36
- * wrapping it inside a layout component.
37
- *
38
- * @see PolymorphicComponent
39
- */
40
- exceptionallySetClassName?: string;
41
- };
42
- export {};
1
+ import type classNames from 'classnames';
2
+ import type { HTMLAttributes } from 'react';
3
+ export type Space = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
4
+ export type SpaceWithNegatives = Space | '-xsmall' | '-small' | '-medium' | '-large' | '-xlarge' | '-xxlarge';
5
+ export type Tone = 'normal' | 'secondary' | 'danger' | 'positive';
6
+ export type AlertTone = 'info' | 'positive' | 'caution' | 'critical';
7
+ export type DividerWeight = 'primary' | 'secondary' | 'tertiary' | 'none';
8
+ type ClassValue = Parameters<typeof classNames>[number];
9
+ export type WithEnhancedClassName<T = unknown> = T extends HTMLElement ? Omit<HTMLAttributes<T>, 'className'> & {
10
+ className?: ClassValue;
11
+ } : T extends {
12
+ className?: unknown;
13
+ } ? Omit<T, 'className'> & {
14
+ className?: ClassValue;
15
+ } : T & {
16
+ className?: ClassValue;
17
+ };
18
+ export interface OpenInNewTab {
19
+ openInNewTab?: boolean;
20
+ target?: never;
21
+ rel?: never;
22
+ }
23
+ export type ObfuscatedClassName = {
24
+ /**
25
+ * Used internally to set the `className` prop of the main container element for this component.
26
+ *
27
+ * Aside from the different name, the prop behaves the same as the native `className`. The only
28
+ * reason for the name change is to discourage applying custom CSS to the design system
29
+ * components, which are supposed to _eventually_ provide all the styling features we may need.
30
+ *
31
+ * This prop is meant to be used only in certain circumstances, when you really need a escape
32
+ * hatch to apply custom styles to a component. Before reaching for this feature, try harder to
33
+ * see if you can solve your needs with what the design system provides.
34
+ *
35
+ * For instance, instead of applying layout-related styles to a non-layout component, consider
36
+ * wrapping it inside a layout component.
37
+ *
38
+ * @see PolymorphicComponent
39
+ */
40
+ exceptionallySetClassName?: string;
41
+ };
42
+ export {};
@@ -1,135 +1,135 @@
1
- import * as React from 'react';
2
- import type { ObfuscatedClassName } from './common-types';
3
- type Merge<P1, P2> = Omit<P1, keyof P2> & P2;
4
- type EmptyObject = {
5
- [K in any]: never;
6
- };
7
- type ObfuscateClassNameMode = 'keepClassName' | 'obfuscateClassName' | 'omitClassName';
8
- /**
9
- * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`
10
- * prop instead.
11
- *
12
- * This can be customized via the second generic parameter, as there are cases where it may be
13
- * needed to omit this behaviour and keep the `className`. You can also instruct it to remove the
14
- * `className` prop while not replacing it with the `exceptionallySetClassName` one.
15
- *
16
- * @see ObfuscatedClassName['exceptionallySetClassName'] for details about this prop
17
- * @see PolymorphicComponent for details about this feature
18
- */
19
- type WithObfuscatedClassName<Props, ShouldObfuscateClassName extends ObfuscateClassNameMode> = 'className' extends keyof Props ? ShouldObfuscateClassName extends 'obfuscateClassName' ? Omit<Props, 'className'> & ObfuscatedClassName : ShouldObfuscateClassName extends 'omitClassName' ? Omit<Props, 'className'> : ShouldObfuscateClassName extends 'keepClassName' ? Props : never : Props;
20
- type PolymorphicProp<ComponentType extends React.ElementType> = {
21
- /**
22
- * Used to instruct this component what React element to render as. It can be both a string
23
- * representing a HTML tag name, or a React component.
24
- *
25
- * When using this prop, the component you apply it to will also recognize in its props types
26
- * all the props from the component or HTML element you are rendering it as.
27
- *
28
- * Some uses for this feature:
29
- *
30
- * - Using some of our layout components, while at the same time being able to set them to use
31
- * semantic HTML elements needed for accessibility purposes (e.g. `nav`, `main`, etc).
32
- * - Using a design system link component, but have it internally use a client-side router link
33
- * implemented via a React component (e.g. react-router's `Link`).
34
- *
35
- * Keep in mind that not all compositions of this kind may work well, especially when composing
36
- * with another React component and not with a HTML tag name. In particular, if the components
37
- * being composed have opposing concerns of clashing features (e.g. they have contradicting
38
- * styles applied to them) things may not go well. In those cases prefer to nest them instead.
39
- *
40
- * @see PolymorphicComponent
41
- */
42
- as?: ComponentType;
43
- };
44
- /**
45
- * Given a component or element type, and a set of additional props, this builds the entire set of
46
- * props for a polymorphic component.
47
- *
48
- * It does three things:
49
- *
50
- * 1. it merges the element type props with the `OwnProps`
51
- * 2. it adds the `as` prop to allow for polymorphism to happen
52
- * 3. it optionally obfuscates or omits the className prop if present
53
- *
54
- * @see PolymorphicProp
55
- * @see WithObfuscatedClassName
56
- */
57
- type PolymorphicComponentProps<ComponentType extends React.ElementType, OwnProps, ShouldObfuscateClassName extends ObfuscateClassNameMode> = Merge<WithObfuscatedClassName<React.ComponentProps<ComponentType>, ShouldObfuscateClassName>, OwnProps & PolymorphicProp<ComponentType>>;
58
- type ElementTagNameMap = HTMLElementTagNameMap & Pick<SVGElementTagNameMap, Exclude<keyof SVGElementTagNameMap, keyof HTMLElementTagNameMap>>;
59
- type ElementByTag<TagName extends keyof ElementTagNameMap> = ElementTagNameMap[TagName];
60
- type ElementByTagOrAny<ComponentType extends React.ElementType> = ComponentType extends keyof ElementTagNameMap ? ElementByTag<ComponentType> : any;
61
- /**
62
- * The function passed to React.forwardRef, but typed in a way that's prepared for polymorphism via
63
- * the `as` prop. It also allows to specify if the `className` prop should be obfuscated or omitted.
64
- *
65
- * @see PolymorphicComponentProps
66
- * @see WithObfuscatedClassName
67
- */
68
- interface ForwardRefFunction<ComponentType extends React.ElementType, OwnProps, ShouldObfuscateClassName extends ObfuscateClassNameMode> {
69
- (props: PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>, ref: ((instance: ElementByTagOrAny<ComponentType> | null) => void) | React.MutableRefObject<ElementByTagOrAny<ComponentType> | null> | null): React.ReactElement | null;
70
- displayName?: string;
71
- }
72
- /**
73
- * A component that can customize the React element type that it renders (a.k.a. a polymorphic
74
- * component). This is achieved by passing a prop `as={ElementType}` or `as="html-tag-name"`.
75
- *
76
- * It transparently takes care of forwarding refs, and properly sets the ref type depending on the
77
- * element type.
78
- *
79
- * ## Recognizing props based on the polymorphic type
80
- *
81
- * The `ComponentType` argument sets the default type for the `as` prop. Whatever the `as` prop
82
- * component or HTML element is, the type system will automatically allow you to pass props that are
83
- * not explicitly defined by you, but that are recognized as valid props to be passed to the
84
- * component you are rendering.
85
- *
86
- * For instance, see the following example:
87
- *
88
- * ```jsx
89
- * <Box as="label" htmlFor="field-id">Hello</Box>
90
- * ```
91
- *
92
- * The `htmlFor` prop is exclusive to label elements. If you omit the `as="label"` prop, the type
93
- * system will consider the `htmlFor` prop to be an error. The same happens if you pass a value of
94
- * an incorrect type to such prop. For instance, the example below will issue a type error:
95
- *
96
- * ```jsx
97
- * <Box as="label" htmlFor={123}>Hello</Box>
98
- * ```
99
- *
100
- * ## Omitting or obfuscating the `className` prop
101
- *
102
- * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`
103
- * prop instead.
104
- *
105
- * This is to discourage customizing design system components via custom styling, while still
106
- * leaving the door open to do it as an escape hatch when the design system still has shortcomings
107
- * with respect to the product designs we want to achieve.
108
- *
109
- * The cumbersome name also serves the purpose of aiding in easily searching for the places in the
110
- * code where this escape hatch was needed, in order to identify areas where the design system
111
- * components need to improve to better match our needs.
112
- *
113
- * This behaviour can be customized via an optional second generic argument that allows to disable
114
- * this feature, or to omit the `className` altogether without replacing it with the obfuscated prop
115
- * name.
116
- *
117
- * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)
118
- */
119
- interface PolymorphicComponent<ComponentType extends React.ElementType, OwnProps, ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'> {
120
- <TT extends React.ElementType = ComponentType>(props: PolymorphicComponentProps<TT, OwnProps, ShouldObfuscateClassName>): React.ReactElement | null;
121
- readonly $$typeof: symbol;
122
- defaultProps?: Partial<PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>>;
123
- propTypes?: React.WeakValidationMap<PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>>;
124
- displayName?: string;
125
- }
126
- /**
127
- * A wrapper to use React.forwardRef with polymorphic components in a type-safe manner. This is a
128
- * convenience over merely using React.forwardRef directly, and then manually forcing the resulting
129
- * value to be typed using `as PolymorphicComponent<…>`.
130
- *
131
- * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)
132
- */
133
- declare function polymorphicComponent<ComponentType extends React.ElementType = 'div', OwnProps = EmptyObject, ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'>(render: ForwardRefFunction<ComponentType, OwnProps, ShouldObfuscateClassName>): PolymorphicComponent<ComponentType, OwnProps, ShouldObfuscateClassName>;
134
- export type { PolymorphicComponent };
135
- export { polymorphicComponent };
1
+ import * as React from 'react';
2
+ import type { ObfuscatedClassName } from './common-types';
3
+ type Merge<P1, P2> = Omit<P1, keyof P2> & P2;
4
+ type EmptyObject = {
5
+ [K in any]: never;
6
+ };
7
+ type ObfuscateClassNameMode = 'keepClassName' | 'obfuscateClassName' | 'omitClassName';
8
+ /**
9
+ * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`
10
+ * prop instead.
11
+ *
12
+ * This can be customized via the second generic parameter, as there are cases where it may be
13
+ * needed to omit this behaviour and keep the `className`. You can also instruct it to remove the
14
+ * `className` prop while not replacing it with the `exceptionallySetClassName` one.
15
+ *
16
+ * @see ObfuscatedClassName['exceptionallySetClassName'] for details about this prop
17
+ * @see PolymorphicComponent for details about this feature
18
+ */
19
+ type WithObfuscatedClassName<Props, ShouldObfuscateClassName extends ObfuscateClassNameMode> = 'className' extends keyof Props ? ShouldObfuscateClassName extends 'obfuscateClassName' ? Omit<Props, 'className'> & ObfuscatedClassName : ShouldObfuscateClassName extends 'omitClassName' ? Omit<Props, 'className'> : ShouldObfuscateClassName extends 'keepClassName' ? Props : never : Props;
20
+ type PolymorphicProp<ComponentType extends React.ElementType> = {
21
+ /**
22
+ * Used to instruct this component what React element to render as. It can be both a string
23
+ * representing a HTML tag name, or a React component.
24
+ *
25
+ * When using this prop, the component you apply it to will also recognize in its props types
26
+ * all the props from the component or HTML element you are rendering it as.
27
+ *
28
+ * Some uses for this feature:
29
+ *
30
+ * - Using some of our layout components, while at the same time being able to set them to use
31
+ * semantic HTML elements needed for accessibility purposes (e.g. `nav`, `main`, etc).
32
+ * - Using a design system link component, but have it internally use a client-side router link
33
+ * implemented via a React component (e.g. react-router's `Link`).
34
+ *
35
+ * Keep in mind that not all compositions of this kind may work well, especially when composing
36
+ * with another React component and not with a HTML tag name. In particular, if the components
37
+ * being composed have opposing concerns of clashing features (e.g. they have contradicting
38
+ * styles applied to them) things may not go well. In those cases prefer to nest them instead.
39
+ *
40
+ * @see PolymorphicComponent
41
+ */
42
+ as?: ComponentType;
43
+ };
44
+ /**
45
+ * Given a component or element type, and a set of additional props, this builds the entire set of
46
+ * props for a polymorphic component.
47
+ *
48
+ * It does three things:
49
+ *
50
+ * 1. it merges the element type props with the `OwnProps`
51
+ * 2. it adds the `as` prop to allow for polymorphism to happen
52
+ * 3. it optionally obfuscates or omits the className prop if present
53
+ *
54
+ * @see PolymorphicProp
55
+ * @see WithObfuscatedClassName
56
+ */
57
+ type PolymorphicComponentProps<ComponentType extends React.ElementType, OwnProps, ShouldObfuscateClassName extends ObfuscateClassNameMode> = Merge<WithObfuscatedClassName<React.ComponentProps<ComponentType>, ShouldObfuscateClassName>, OwnProps & PolymorphicProp<ComponentType>>;
58
+ type ElementTagNameMap = HTMLElementTagNameMap & Pick<SVGElementTagNameMap, Exclude<keyof SVGElementTagNameMap, keyof HTMLElementTagNameMap>>;
59
+ type ElementByTag<TagName extends keyof ElementTagNameMap> = ElementTagNameMap[TagName];
60
+ type ElementByTagOrAny<ComponentType extends React.ElementType> = ComponentType extends keyof ElementTagNameMap ? ElementByTag<ComponentType> : any;
61
+ /**
62
+ * The function passed to React.forwardRef, but typed in a way that's prepared for polymorphism via
63
+ * the `as` prop. It also allows to specify if the `className` prop should be obfuscated or omitted.
64
+ *
65
+ * @see PolymorphicComponentProps
66
+ * @see WithObfuscatedClassName
67
+ */
68
+ interface ForwardRefFunction<ComponentType extends React.ElementType, OwnProps, ShouldObfuscateClassName extends ObfuscateClassNameMode> {
69
+ (props: PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>, ref: ((instance: ElementByTagOrAny<ComponentType> | null) => void) | React.MutableRefObject<ElementByTagOrAny<ComponentType> | null> | null): React.ReactElement | null;
70
+ displayName?: string;
71
+ }
72
+ /**
73
+ * A component that can customize the React element type that it renders (a.k.a. a polymorphic
74
+ * component). This is achieved by passing a prop `as={ElementType}` or `as="html-tag-name"`.
75
+ *
76
+ * It transparently takes care of forwarding refs, and properly sets the ref type depending on the
77
+ * element type.
78
+ *
79
+ * ## Recognizing props based on the polymorphic type
80
+ *
81
+ * The `ComponentType` argument sets the default type for the `as` prop. Whatever the `as` prop
82
+ * component or HTML element is, the type system will automatically allow you to pass props that are
83
+ * not explicitly defined by you, but that are recognized as valid props to be passed to the
84
+ * component you are rendering.
85
+ *
86
+ * For instance, see the following example:
87
+ *
88
+ * ```jsx
89
+ * <Box as="label" htmlFor="field-id">Hello</Box>
90
+ * ```
91
+ *
92
+ * The `htmlFor` prop is exclusive to label elements. If you omit the `as="label"` prop, the type
93
+ * system will consider the `htmlFor` prop to be an error. The same happens if you pass a value of
94
+ * an incorrect type to such prop. For instance, the example below will issue a type error:
95
+ *
96
+ * ```jsx
97
+ * <Box as="label" htmlFor={123}>Hello</Box>
98
+ * ```
99
+ *
100
+ * ## Omitting or obfuscating the `className` prop
101
+ *
102
+ * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`
103
+ * prop instead.
104
+ *
105
+ * This is to discourage customizing design system components via custom styling, while still
106
+ * leaving the door open to do it as an escape hatch when the design system still has shortcomings
107
+ * with respect to the product designs we want to achieve.
108
+ *
109
+ * The cumbersome name also serves the purpose of aiding in easily searching for the places in the
110
+ * code where this escape hatch was needed, in order to identify areas where the design system
111
+ * components need to improve to better match our needs.
112
+ *
113
+ * This behaviour can be customized via an optional second generic argument that allows to disable
114
+ * this feature, or to omit the `className` altogether without replacing it with the obfuscated prop
115
+ * name.
116
+ *
117
+ * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)
118
+ */
119
+ interface PolymorphicComponent<ComponentType extends React.ElementType, OwnProps, ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'> {
120
+ <TT extends React.ElementType = ComponentType>(props: PolymorphicComponentProps<TT, OwnProps, ShouldObfuscateClassName>): React.ReactElement | null;
121
+ readonly $$typeof: symbol;
122
+ defaultProps?: Partial<PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>>;
123
+ propTypes?: React.WeakValidationMap<PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>>;
124
+ displayName?: string;
125
+ }
126
+ /**
127
+ * A wrapper to use React.forwardRef with polymorphic components in a type-safe manner. This is a
128
+ * convenience over merely using React.forwardRef directly, and then manually forcing the resulting
129
+ * value to be typed using `as PolymorphicComponent<…>`.
130
+ *
131
+ * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)
132
+ */
133
+ declare function polymorphicComponent<ComponentType extends React.ElementType = 'div', OwnProps = EmptyObject, ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'>(render: ForwardRefFunction<ComponentType, OwnProps, ShouldObfuscateClassName>): PolymorphicComponent<ComponentType, OwnProps, ShouldObfuscateClassName>;
134
+ export type { PolymorphicComponent };
135
+ export { polymorphicComponent };
@@ -1,2 +1,40 @@
1
- "use strict";function e(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,r}Object.defineProperty(exports,"__esModule",{value:!0});var r=e(require("react"));exports.polymorphicComponent=function(e){return r.forwardRef(e)};
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var React = require('react');
6
+
7
+ function _interopNamespace(e) {
8
+ if (e && e.__esModule) return e;
9
+ var n = Object.create(null);
10
+ if (e) {
11
+ Object.keys(e).forEach(function (k) {
12
+ if (k !== 'default') {
13
+ var d = Object.getOwnPropertyDescriptor(e, k);
14
+ Object.defineProperty(n, k, d.get ? d : {
15
+ enumerable: true,
16
+ get: function () { return e[k]; }
17
+ });
18
+ }
19
+ });
20
+ }
21
+ n["default"] = e;
22
+ return Object.freeze(n);
23
+ }
24
+
25
+ var React__namespace = /*#__PURE__*/_interopNamespace(React);
26
+
27
+ /* eslint-disable @typescript-eslint/no-explicit-any */
28
+ /**
29
+ * A wrapper to use React.forwardRef with polymorphic components in a type-safe manner. This is a
30
+ * convenience over merely using React.forwardRef directly, and then manually forcing the resulting
31
+ * value to be typed using `as PolymorphicComponent<…>`.
32
+ *
33
+ * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)
34
+ */
35
+ function polymorphicComponent(render) {
36
+ return React__namespace.forwardRef(render);
37
+ }
38
+
39
+ exports.polymorphicComponent = polymorphicComponent;
2
40
  //# sourceMappingURL=polymorphism.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"polymorphism.js","sources":["../../src/utils/polymorphism.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport * as React from 'react'\nimport type { ObfuscatedClassName } from './common-types'\n\ntype Merge<P1, P2> = Omit<P1, keyof P2> & P2\n\ntype EmptyObject = {\n [K in any]: never\n}\n\ntype ObfuscateClassNameMode = 'keepClassName' | 'obfuscateClassName' | 'omitClassName'\n\n/**\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This can be customized via the second generic parameter, as there are cases where it may be\n * needed to omit this behaviour and keep the `className`. You can also instruct it to remove the\n * `className` prop while not replacing it with the `exceptionallySetClassName` one.\n *\n * @see ObfuscatedClassName['exceptionallySetClassName'] for details about this prop\n * @see PolymorphicComponent for details about this feature\n */\ntype WithObfuscatedClassName<\n Props,\n ShouldObfuscateClassName extends ObfuscateClassNameMode\n> = 'className' extends keyof Props\n ? ShouldObfuscateClassName extends 'obfuscateClassName'\n ? Omit<Props, 'className'> & ObfuscatedClassName\n : ShouldObfuscateClassName extends 'omitClassName'\n ? Omit<Props, 'className'>\n : ShouldObfuscateClassName extends 'keepClassName'\n ? Props\n : never\n : Props\n\ntype PolymorphicProp<ComponentType extends React.ElementType> = {\n /**\n * Used to instruct this component what React element to render as. It can be both a string\n * representing a HTML tag name, or a React component.\n *\n * When using this prop, the component you apply it to will also recognize in its props types\n * all the props from the component or HTML element you are rendering it as.\n *\n * Some uses for this feature:\n *\n * - Using some of our layout components, while at the same time being able to set them to use\n * semantic HTML elements needed for accessibility purposes (e.g. `nav`, `main`, etc).\n * - Using a design system link component, but have it internally use a client-side router link\n * implemented via a React component (e.g. react-router's `Link`).\n *\n * Keep in mind that not all compositions of this kind may work well, especially when composing\n * with another React component and not with a HTML tag name. In particular, if the components\n * being composed have opposing concerns of clashing features (e.g. they have contradicting\n * styles applied to them) things may not go well. In those cases prefer to nest them instead.\n *\n * @see PolymorphicComponent\n */\n as?: ComponentType\n}\n\n/**\n * Given a component or element type, and a set of additional props, this builds the entire set of\n * props for a polymorphic component.\n *\n * It does three things:\n *\n * 1. it merges the element type props with the `OwnProps`\n * 2. it adds the `as` prop to allow for polymorphism to happen\n * 3. it optionally obfuscates or omits the className prop if present\n *\n * @see PolymorphicProp\n * @see WithObfuscatedClassName\n */\ntype PolymorphicComponentProps<\n ComponentType extends React.ElementType,\n OwnProps,\n ShouldObfuscateClassName extends ObfuscateClassNameMode\n> = Merge<\n WithObfuscatedClassName<React.ComponentProps<ComponentType>, ShouldObfuscateClassName>,\n OwnProps & PolymorphicProp<ComponentType>\n>\n\ntype ElementTagNameMap = HTMLElementTagNameMap &\n Pick<SVGElementTagNameMap, Exclude<keyof SVGElementTagNameMap, keyof HTMLElementTagNameMap>>\n\ntype ElementByTag<TagName extends keyof ElementTagNameMap> = ElementTagNameMap[TagName]\n\ntype ElementByTagOrAny<\n ComponentType extends React.ElementType\n> = ComponentType extends keyof ElementTagNameMap ? ElementByTag<ComponentType> : any\n\n/**\n * The function passed to React.forwardRef, but typed in a way that's prepared for polymorphism via\n * the `as` prop. It also allows to specify if the `className` prop should be obfuscated or omitted.\n *\n * @see PolymorphicComponentProps\n * @see WithObfuscatedClassName\n */\ninterface ForwardRefFunction<\n ComponentType extends React.ElementType,\n OwnProps,\n ShouldObfuscateClassName extends ObfuscateClassNameMode\n> {\n (\n props: PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>,\n ref:\n | ((instance: ElementByTagOrAny<ComponentType> | null) => void)\n | React.MutableRefObject<ElementByTagOrAny<ComponentType> | null>\n | null,\n ): React.ReactElement | null\n displayName?: string\n}\n\n/**\n * A component that can customize the React element type that it renders (a.k.a. a polymorphic\n * component). This is achieved by passing a prop `as={ElementType}` or `as=\"html-tag-name\"`.\n *\n * It transparently takes care of forwarding refs, and properly sets the ref type depending on the\n * element type.\n *\n * ## Recognizing props based on the polymorphic type\n *\n * The `ComponentType` argument sets the default type for the `as` prop. Whatever the `as` prop\n * component or HTML element is, the type system will automatically allow you to pass props that are\n * not explicitly defined by you, but that are recognized as valid props to be passed to the\n * component you are rendering.\n *\n * For instance, see the following example:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor=\"field-id\">Hello</Box>\n * ```\n *\n * The `htmlFor` prop is exclusive to label elements. If you omit the `as=\"label\"` prop, the type\n * system will consider the `htmlFor` prop to be an error. The same happens if you pass a value of\n * an incorrect type to such prop. For instance, the example below will issue a type error:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor={123}>Hello</Box>\n * ```\n *\n * ## Omitting or obfuscating the `className` prop\n *\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This is to discourage customizing design system components via custom styling, while still\n * leaving the door open to do it as an escape hatch when the design system still has shortcomings\n * with respect to the product designs we want to achieve.\n *\n * The cumbersome name also serves the purpose of aiding in easily searching for the places in the\n * code where this escape hatch was needed, in order to identify areas where the design system\n * components need to improve to better match our needs.\n *\n * This behaviour can be customized via an optional second generic argument that allows to disable\n * this feature, or to omit the `className` altogether without replacing it with the obfuscated prop\n * name.\n *\n * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)\n */\ninterface PolymorphicComponent<\n ComponentType extends React.ElementType,\n OwnProps,\n ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'\n> {\n <TT extends React.ElementType = ComponentType>(\n props: PolymorphicComponentProps<TT, OwnProps, ShouldObfuscateClassName>,\n ): React.ReactElement | null\n readonly $$typeof: symbol\n defaultProps?: Partial<\n PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n >\n propTypes?: React.WeakValidationMap<\n PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n >\n displayName?: string\n}\n\n/**\n * A wrapper to use React.forwardRef with polymorphic components in a type-safe manner. This is a\n * convenience over merely using React.forwardRef directly, and then manually forcing the resulting\n * value to be typed using `as PolymorphicComponent<…>`.\n *\n * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)\n */\nfunction polymorphicComponent<\n ComponentType extends React.ElementType = 'div',\n OwnProps = EmptyObject,\n ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'\n>(render: ForwardRefFunction<ComponentType, OwnProps, ShouldObfuscateClassName>) {\n return React.forwardRef(render) as PolymorphicComponent<\n ComponentType,\n OwnProps,\n ShouldObfuscateClassName\n >\n}\n\nexport type { PolymorphicComponent }\nexport { polymorphicComponent }\n"],"names":["render","React","forwardRef"],"mappings":"2YA2LA,SAIEA,GACE,OAAOC,EAAMC,WAAWF"}
1
+ {"version":3,"file":"polymorphism.js","sources":["../../src/utils/polymorphism.ts"],"sourcesContent":[null],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAoLA;;;;;;AAMG;AACH,SAAS,oBAAoB,CAI3B,MAA6E,EAAA;AAC3E,IAAA,OAAOA,gBAAK,CAAC,UAAU,CAAC,MAAM,CAI7B,CAAA;AACL;;;;"}