@doist/reactist 19.1.0 → 20.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (564) hide show
  1. package/README.md +34 -0
  2. package/dist/reactist.cjs.development.js +121 -144
  3. package/dist/reactist.cjs.development.js.map +1 -1
  4. package/dist/reactist.cjs.production.min.js +1 -1
  5. package/dist/reactist.cjs.production.min.js.map +1 -1
  6. package/es/{new-components/alert → alert}/alert.js +1 -1
  7. package/es/alert/alert.js.map +1 -0
  8. package/es/{new-components/alert → alert}/alert.module.css.js +0 -0
  9. package/es/{new-components/alert → alert}/alert.module.css.js.map +0 -0
  10. package/es/{new-components/avatar → avatar}/avatar.js +2 -2
  11. package/es/avatar/avatar.js.map +1 -0
  12. package/es/{new-components/avatar → avatar}/avatar.module.css.js +0 -0
  13. package/es/{new-components/avatar → avatar}/avatar.module.css.js.map +0 -0
  14. package/es/{new-components/avatar → avatar}/utils.js +0 -0
  15. package/es/avatar/utils.js.map +1 -0
  16. package/es/{new-components/badge → badge}/badge.js +1 -1
  17. package/es/badge/badge.js.map +1 -0
  18. package/es/{new-components/badge → badge}/badge.module.css.js +0 -0
  19. package/es/{new-components/badge → badge}/badge.module.css.js.map +0 -0
  20. package/es/banner/banner.js +61 -0
  21. package/es/banner/banner.js.map +1 -0
  22. package/es/banner/banner.module.css.js +4 -0
  23. package/es/banner/banner.module.css.js.map +1 -0
  24. package/es/{new-components/base-button → base-button}/base-button.js +2 -2
  25. package/es/base-button/base-button.js.map +1 -0
  26. package/es/{new-components/base-button → base-button}/base-button.module.css.js +0 -0
  27. package/es/{new-components/base-button → base-button}/base-button.module.css.js.map +0 -0
  28. package/es/{new-components/base-field → base-field}/base-field.js +2 -2
  29. package/es/base-field/base-field.js.map +1 -0
  30. package/es/{new-components/base-field → base-field}/base-field.module.css.js +0 -0
  31. package/es/{new-components/base-field → base-field}/base-field.module.css.js.map +0 -0
  32. package/es/{new-components/box → box}/box.js +3 -3
  33. package/es/box/box.js.map +1 -0
  34. package/es/{new-components/box → box}/box.module.css.js +0 -0
  35. package/es/{new-components/box → box}/box.module.css.js.map +0 -0
  36. package/es/{new-components/box → box}/gap.module.css.js +0 -0
  37. package/es/{new-components/box → box}/gap.module.css.js.map +0 -0
  38. package/es/{new-components/box → box}/margin.module.css.js +0 -0
  39. package/es/{new-components/box → box}/margin.module.css.js.map +0 -0
  40. package/es/{new-components/box → box}/padding.module.css.js +0 -0
  41. package/es/{new-components/box → box}/padding.module.css.js.map +0 -0
  42. package/es/{new-components/box → box}/width.module.css.js +0 -0
  43. package/es/{new-components/box → box}/width.module.css.js.map +0 -0
  44. package/es/{new-components/button → button}/button.js +1 -1
  45. package/es/button/button.js.map +1 -0
  46. package/es/{new-components/button-link → button-link}/button-link.js +2 -2
  47. package/es/button-link/button-link.js.map +1 -0
  48. package/es/{new-components/checkbox-field → checkbox-field}/checkbox-field.js +1 -1
  49. package/es/checkbox-field/checkbox-field.js.map +1 -0
  50. package/es/{new-components/checkbox-field → checkbox-field}/checkbox-field.module.css.js +0 -0
  51. package/es/{new-components/checkbox-field → checkbox-field}/checkbox-field.module.css.js.map +0 -0
  52. package/es/{new-components/checkbox-field → checkbox-field}/checkbox-icon.js +1 -1
  53. package/es/checkbox-field/checkbox-icon.js.map +1 -0
  54. package/es/{new-components/columns → columns}/columns.js +3 -3
  55. package/es/columns/columns.js.map +1 -0
  56. package/es/{new-components/columns → columns}/columns.module.css.js +0 -0
  57. package/es/{new-components/columns → columns}/columns.module.css.js.map +0 -0
  58. package/es/components/color-picker/color-picker.js +1 -1
  59. package/es/components/color-picker/color-picker.js.map +1 -1
  60. package/es/components/deprecated-button/deprecated-button.js +1 -1
  61. package/es/components/deprecated-button/deprecated-button.js.map +1 -1
  62. package/es/components/progress-bar/progress-bar.js +1 -1
  63. package/es/components/progress-bar/progress-bar.js.map +1 -1
  64. package/es/components/time/time.js +1 -1
  65. package/es/components/time/time.js.map +1 -1
  66. package/es/{new-components/deprecated-modal → deprecated-modal}/modal.js +1 -1
  67. package/es/deprecated-modal/modal.js.map +1 -0
  68. package/es/{new-components/deprecated-modal → deprecated-modal}/modal.module.css.js +0 -0
  69. package/es/{new-components/deprecated-modal → deprecated-modal}/modal.module.css.js.map +0 -0
  70. package/es/{new-components/divider → divider}/divider.js +2 -2
  71. package/es/divider/divider.js.map +1 -0
  72. package/es/{new-components/divider → divider}/divider.module.css.js +0 -0
  73. package/es/{new-components/divider → divider}/divider.module.css.js.map +0 -0
  74. package/es/{new-components/heading → heading}/heading.js +2 -2
  75. package/es/heading/heading.js.map +1 -0
  76. package/es/{new-components/heading → heading}/heading.module.css.js +0 -0
  77. package/es/{new-components/heading → heading}/heading.module.css.js.map +0 -0
  78. package/es/{new-components/hidden → hidden}/hidden.js +2 -2
  79. package/es/hidden/hidden.js.map +1 -0
  80. package/es/{new-components/hidden → hidden}/hidden.module.css.js +0 -0
  81. package/es/{new-components/hidden → hidden}/hidden.module.css.js.map +0 -0
  82. package/es/{new-components/hidden-visually → hidden-visually}/hidden-visually.js +2 -2
  83. package/es/hidden-visually/hidden-visually.js.map +1 -0
  84. package/es/{new-components/hidden-visually → hidden-visually}/hidden-visually.module.css.js +0 -0
  85. package/es/{new-components/hidden-visually → hidden-visually}/hidden-visually.module.css.js.map +0 -0
  86. package/es/{new-components/icons → icons}/alert-icon.js +1 -1
  87. package/es/icons/alert-icon.js.map +1 -0
  88. package/es/{new-components/icons → icons}/close-icon.js +1 -1
  89. package/es/icons/close-icon.js.map +1 -0
  90. package/es/{new-components/icons → icons}/password-hidden-icon.js +1 -1
  91. package/es/icons/password-hidden-icon.js.map +1 -0
  92. package/es/{new-components/icons → icons}/password-visible-icon.js +1 -1
  93. package/es/icons/password-visible-icon.js.map +1 -0
  94. package/es/index.js +31 -32
  95. package/es/index.js.map +1 -1
  96. package/es/{new-components/inline → inline}/inline.js +3 -3
  97. package/es/inline/inline.js.map +1 -0
  98. package/es/{new-components/loading → loading}/loading.js +1 -1
  99. package/es/loading/loading.js.map +1 -0
  100. package/es/{new-components/menu → menu}/menu.js +2 -2
  101. package/es/menu/menu.js.map +1 -0
  102. package/es/{new-components/modal → modal}/modal.js +1 -1
  103. package/es/modal/modal.js.map +1 -0
  104. package/es/{new-components/modal → modal}/modal.module.css.js +0 -0
  105. package/es/{new-components/modal → modal}/modal.module.css.js.map +0 -0
  106. package/es/{new-components/notice → notice}/notice.js +1 -1
  107. package/es/notice/notice.js.map +1 -0
  108. package/es/{new-components/notice → notice}/notice.module.css.js +0 -0
  109. package/es/{new-components/notice → notice}/notice.module.css.js.map +0 -0
  110. package/es/{new-components/password-field → password-field}/password-field.js +2 -2
  111. package/es/password-field/password-field.js.map +1 -0
  112. package/es/{new-components/password-field → password-field}/password-field.module.css.js +0 -0
  113. package/es/{new-components/password-field → password-field}/password-field.module.css.js.map +0 -0
  114. package/es/{new-components/select-field → select-field}/select-field.js +1 -1
  115. package/es/select-field/select-field.js.map +1 -0
  116. package/es/{new-components/select-field → select-field}/select-field.module.css.js +0 -0
  117. package/es/{new-components/select-field → select-field}/select-field.module.css.js.map +0 -0
  118. package/es/{new-components/spinner → spinner}/spinner.js +0 -0
  119. package/es/spinner/spinner.js.map +1 -0
  120. package/es/{new-components/spinner → spinner}/spinner.module.css.js +0 -0
  121. package/es/{new-components/spinner → spinner}/spinner.module.css.js.map +0 -0
  122. package/es/{new-components/stack → stack}/stack.js +3 -3
  123. package/es/stack/stack.js.map +1 -0
  124. package/es/{new-components/switch-field → switch-field}/switch-field.js +2 -2
  125. package/es/switch-field/switch-field.js.map +1 -0
  126. package/es/{new-components/switch-field → switch-field}/switch-field.module.css.js +0 -0
  127. package/es/{new-components/switch-field → switch-field}/switch-field.module.css.js.map +0 -0
  128. package/es/{new-components/tabs → tabs}/tabs.js +3 -3
  129. package/es/tabs/tabs.js.map +1 -0
  130. package/es/{new-components/tabs → tabs}/tabs.module.css.js +0 -0
  131. package/es/{new-components/tabs → tabs}/tabs.module.css.js.map +0 -0
  132. package/es/{new-components/text → text}/text.js +3 -3
  133. package/es/text/text.js.map +1 -0
  134. package/es/{new-components/text → text}/text.module.css.js +0 -0
  135. package/es/{new-components/text → text}/text.module.css.js.map +0 -0
  136. package/es/{new-components/text-area → text-area}/text-area.js +1 -1
  137. package/es/text-area/text-area.js.map +1 -0
  138. package/es/{new-components/text-area → text-area}/text-area.module.css.js +0 -0
  139. package/es/{new-components/text-area → text-area}/text-area.module.css.js.map +0 -0
  140. package/es/{new-components/text-field → text-field}/text-field.js +1 -1
  141. package/es/text-field/text-field.js.map +1 -0
  142. package/es/{new-components/text-field → text-field}/text-field.module.css.js +0 -0
  143. package/es/{new-components/text-field → text-field}/text-field.module.css.js.map +0 -0
  144. package/es/{new-components/text-link → text-link}/text-link.js +2 -2
  145. package/es/text-link/text-link.js.map +1 -0
  146. package/es/{new-components/text-link → text-link}/text-link.module.css.js +0 -0
  147. package/es/{new-components/text-link → text-link}/text-link.module.css.js.map +0 -0
  148. package/es/{new-components/toast → toast}/static-toast.js +1 -1
  149. package/es/toast/static-toast.js.map +1 -0
  150. package/es/{new-components/toast → toast}/toast-animation.js +0 -0
  151. package/es/toast/toast-animation.js.map +1 -0
  152. package/es/{new-components/toast → toast}/toast.module.css.js +0 -0
  153. package/es/{new-components/toast → toast}/toast.module.css.js.map +0 -0
  154. package/es/{new-components/toast → toast}/use-toasts.js +2 -2
  155. package/es/toast/use-toasts.js.map +1 -0
  156. package/es/{new-components/tooltip → tooltip}/tooltip.js +1 -1
  157. package/es/tooltip/tooltip.js.map +1 -0
  158. package/es/{new-components/tooltip → tooltip}/tooltip.module.css.js +0 -0
  159. package/es/{new-components/tooltip → tooltip}/tooltip.module.css.js.map +0 -0
  160. package/es/{new-components → utils}/common-helpers.js +0 -0
  161. package/es/utils/common-helpers.js.map +1 -0
  162. package/es/{new-components → utils}/responsive-props.js +0 -0
  163. package/es/utils/responsive-props.js.map +1 -0
  164. package/lib/{new-components/alert → alert}/alert.d.ts +1 -1
  165. package/lib/alert/alert.js +2 -0
  166. package/lib/alert/alert.js.map +1 -0
  167. package/lib/{new-components/alert → alert}/alert.module.css.js +0 -0
  168. package/lib/{new-components/alert → alert}/alert.module.css.js.map +0 -0
  169. package/lib/{new-components/alert → alert}/alert.test.d.ts +0 -0
  170. package/lib/{new-components/alert → alert}/index.d.ts +0 -0
  171. package/lib/{new-components/avatar → avatar}/avatar.d.ts +1 -1
  172. package/lib/avatar/avatar.js +2 -0
  173. package/lib/avatar/avatar.js.map +1 -0
  174. package/lib/{new-components/avatar → avatar}/avatar.module.css.js +0 -0
  175. package/lib/{new-components/avatar → avatar}/avatar.module.css.js.map +0 -0
  176. package/lib/{new-components/avatar → avatar}/avatar.test.d.ts +0 -0
  177. package/lib/{new-components/avatar → avatar}/index.d.ts +0 -0
  178. package/lib/{new-components/avatar → avatar}/utils.d.ts +0 -0
  179. package/lib/{new-components/avatar → avatar}/utils.js +0 -0
  180. package/lib/avatar/utils.js.map +1 -0
  181. package/lib/{new-components/avatar → avatar}/utils.test.d.ts +0 -0
  182. package/lib/{new-components/badge → badge}/badge.d.ts +0 -0
  183. package/lib/badge/badge.js +2 -0
  184. package/lib/badge/badge.js.map +1 -0
  185. package/lib/{new-components/badge → badge}/badge.module.css.js +0 -0
  186. package/lib/{new-components/badge → badge}/badge.module.css.js.map +0 -0
  187. package/lib/{new-components/badge → badge}/badge.test.d.ts +0 -0
  188. package/lib/{new-components/badge → badge}/index.d.ts +0 -0
  189. package/lib/{new-components/banner → banner}/banner.d.ts +0 -0
  190. package/lib/banner/banner.js +2 -0
  191. package/lib/banner/banner.js.map +1 -0
  192. package/lib/banner/banner.module.css.js +2 -0
  193. package/lib/banner/banner.module.css.js.map +1 -0
  194. package/lib/{new-components/banner → banner}/banner.test.d.ts +0 -0
  195. package/lib/{new-components/banner → banner}/index.d.ts +0 -0
  196. package/lib/{new-components/base-button → base-button}/base-button.d.ts +1 -1
  197. package/lib/base-button/base-button.js +2 -0
  198. package/lib/base-button/base-button.js.map +1 -0
  199. package/lib/{new-components/base-button → base-button}/base-button.module.css.js +0 -0
  200. package/lib/{new-components/base-button → base-button}/base-button.module.css.js.map +0 -0
  201. package/lib/{new-components/base-button → base-button}/index.d.ts +0 -0
  202. package/lib/{new-components/base-field → base-field}/base-field.d.ts +1 -1
  203. package/lib/base-field/base-field.js +2 -0
  204. package/lib/base-field/base-field.js.map +1 -0
  205. package/lib/{new-components/base-field → base-field}/base-field.module.css.js +0 -0
  206. package/lib/{new-components/base-field → base-field}/base-field.module.css.js.map +0 -0
  207. package/lib/{new-components/base-field → base-field}/index.d.ts +0 -0
  208. package/lib/{new-components/box → box}/box.d.ts +3 -3
  209. package/lib/{new-components/box → box}/box.js +1 -1
  210. package/lib/box/box.js.map +1 -0
  211. package/lib/{new-components/box → box}/box.module.css.js +0 -0
  212. package/lib/{new-components/box → box}/box.module.css.js.map +0 -0
  213. package/lib/{new-components/box → box}/box.test.d.ts +0 -0
  214. package/lib/{new-components/box → box}/gap.module.css.js +0 -0
  215. package/lib/{new-components/box → box}/gap.module.css.js.map +0 -0
  216. package/lib/{new-components/box → box}/index.d.ts +0 -0
  217. package/lib/{new-components/box → box}/margin.module.css.js +0 -0
  218. package/lib/{new-components/box → box}/margin.module.css.js.map +0 -0
  219. package/lib/{new-components/box → box}/padding.module.css.js +0 -0
  220. package/lib/{new-components/box → box}/padding.module.css.js.map +0 -0
  221. package/lib/{new-components/box → box}/width.module.css.js +0 -0
  222. package/lib/{new-components/box → box}/width.module.css.js.map +0 -0
  223. package/lib/{new-components/button → button}/button.d.ts +0 -0
  224. package/lib/button/button.js +2 -0
  225. package/lib/button/button.js.map +1 -0
  226. package/lib/{new-components/button → button}/button.test.d.ts +0 -0
  227. package/lib/{new-components/button → button}/index.d.ts +0 -0
  228. package/lib/{new-components/button-link → button-link}/button-link-story-wrapper.d.ts +0 -0
  229. package/lib/{new-components/button-link → button-link}/button-link.d.ts +2 -2
  230. package/lib/button-link/button-link.js +2 -0
  231. package/lib/button-link/button-link.js.map +1 -0
  232. package/lib/{new-components/button-link → button-link}/button-link.test.d.ts +0 -0
  233. package/lib/{new-components/button-link → button-link}/index.d.ts +0 -0
  234. package/lib/{new-components/checkbox-field → checkbox-field}/checkbox-field.d.ts +0 -0
  235. package/lib/checkbox-field/checkbox-field.js +2 -0
  236. package/lib/checkbox-field/checkbox-field.js.map +1 -0
  237. package/lib/{new-components/checkbox-field → checkbox-field}/checkbox-field.module.css.js +0 -0
  238. package/lib/{new-components/checkbox-field → checkbox-field}/checkbox-field.module.css.js.map +0 -0
  239. package/lib/{new-components/checkbox-field → checkbox-field}/checkbox-field.test.d.ts +0 -0
  240. package/lib/{new-components/checkbox-field → checkbox-field}/checkbox-icon.d.ts +0 -0
  241. package/lib/checkbox-field/checkbox-icon.js +2 -0
  242. package/lib/checkbox-field/checkbox-icon.js.map +1 -0
  243. package/lib/{new-components/checkbox-field → checkbox-field}/index.d.ts +0 -0
  244. package/lib/{new-components/columns → columns}/columns.d.ts +4 -4
  245. package/lib/{new-components/columns → columns}/columns.js +1 -1
  246. package/lib/columns/columns.js.map +1 -0
  247. package/lib/{new-components/columns → columns}/columns.module.css.js +0 -0
  248. package/lib/{new-components/columns → columns}/columns.module.css.js.map +0 -0
  249. package/lib/{new-components/columns → columns}/columns.test.d.ts +0 -0
  250. package/lib/{new-components/columns → columns}/index.d.ts +0 -0
  251. package/lib/components/color-picker/color-picker.js +1 -1
  252. package/lib/components/color-picker/color-picker.js.map +1 -1
  253. package/lib/components/deprecated-button/deprecated-button.js +1 -1
  254. package/lib/components/deprecated-button/deprecated-button.js.map +1 -1
  255. package/lib/components/progress-bar/progress-bar.js +1 -1
  256. package/lib/components/progress-bar/progress-bar.js.map +1 -1
  257. package/lib/components/time/time.js +1 -1
  258. package/lib/components/time/time.js.map +1 -1
  259. package/lib/{new-components/deprecated-modal → deprecated-modal}/index.d.ts +0 -0
  260. package/lib/{new-components/deprecated-modal → deprecated-modal}/modal.d.ts +0 -0
  261. package/lib/deprecated-modal/modal.js +2 -0
  262. package/lib/deprecated-modal/modal.js.map +1 -0
  263. package/lib/{new-components/deprecated-modal → deprecated-modal}/modal.module.css.js +0 -0
  264. package/lib/{new-components/deprecated-modal → deprecated-modal}/modal.module.css.js.map +0 -0
  265. package/lib/{new-components/deprecated-modal → deprecated-modal}/modal.test.d.ts +0 -0
  266. package/lib/{new-components/divider → divider}/divider.d.ts +1 -1
  267. package/lib/divider/divider.js +2 -0
  268. package/lib/divider/divider.js.map +1 -0
  269. package/lib/{new-components/divider → divider}/divider.module.css.js +0 -0
  270. package/lib/{new-components/divider → divider}/divider.module.css.js.map +0 -0
  271. package/lib/{new-components/divider → divider}/index.d.ts +0 -0
  272. package/lib/{new-components/heading → heading}/heading.d.ts +2 -2
  273. package/lib/heading/heading.js +2 -0
  274. package/lib/heading/heading.js.map +1 -0
  275. package/lib/{new-components/heading → heading}/heading.module.css.js +0 -0
  276. package/lib/{new-components/heading → heading}/heading.module.css.js.map +0 -0
  277. package/lib/{new-components/heading → heading}/heading.test.d.ts +0 -0
  278. package/lib/{new-components/heading → heading}/index.d.ts +0 -0
  279. package/lib/{new-components/hidden → hidden}/hidden.d.ts +2 -2
  280. package/lib/hidden/hidden.js +2 -0
  281. package/lib/hidden/hidden.js.map +1 -0
  282. package/lib/{new-components/hidden → hidden}/hidden.module.css.js +0 -0
  283. package/lib/{new-components/hidden → hidden}/hidden.module.css.js.map +0 -0
  284. package/lib/{new-components/hidden → hidden}/hidden.test.d.ts +0 -0
  285. package/lib/{new-components/hidden → hidden}/index.d.ts +0 -0
  286. package/lib/{new-components/hidden-visually → hidden-visually}/hidden-visually.d.ts +1 -1
  287. package/lib/hidden-visually/hidden-visually.js +2 -0
  288. package/lib/hidden-visually/hidden-visually.js.map +1 -0
  289. package/lib/{new-components/hidden-visually → hidden-visually}/hidden-visually.module.css.js +0 -0
  290. package/lib/{new-components/hidden-visually → hidden-visually}/hidden-visually.module.css.js.map +0 -0
  291. package/lib/{new-components/hidden-visually → hidden-visually}/hidden-visually.test.d.ts +0 -0
  292. package/lib/{new-components/hidden-visually → hidden-visually}/index.d.ts +0 -0
  293. package/lib/{new-components/icons → icons}/alert-icon.d.ts +1 -1
  294. package/lib/icons/alert-icon.js +2 -0
  295. package/lib/icons/alert-icon.js.map +1 -0
  296. package/lib/{new-components/icons → icons}/close-icon.d.ts +0 -0
  297. package/lib/icons/close-icon.js +2 -0
  298. package/lib/icons/close-icon.js.map +1 -0
  299. package/lib/{new-components/icons → icons}/password-hidden-icon.d.ts +0 -0
  300. package/lib/icons/password-hidden-icon.js +2 -0
  301. package/lib/icons/password-hidden-icon.js.map +1 -0
  302. package/lib/{new-components/icons → icons}/password-visible-icon.d.ts +0 -0
  303. package/lib/icons/password-visible-icon.js +2 -0
  304. package/lib/icons/password-visible-icon.js.map +1 -0
  305. package/lib/index.d.ts +31 -32
  306. package/lib/index.js +1 -1
  307. package/lib/{new-components/inline → inline}/index.d.ts +0 -0
  308. package/lib/{new-components/inline → inline}/inline.d.ts +3 -3
  309. package/lib/{new-components/inline → inline}/inline.js +1 -1
  310. package/lib/inline/inline.js.map +1 -0
  311. package/lib/{new-components/inline → inline}/inline.test.d.ts +0 -0
  312. package/lib/{new-components/loading → loading}/index.d.ts +0 -0
  313. package/lib/{new-components/loading → loading}/loading.d.ts +0 -0
  314. package/lib/loading/loading.js +2 -0
  315. package/lib/loading/loading.js.map +1 -0
  316. package/lib/{new-components/loading → loading}/loading.test.d.ts +0 -0
  317. package/lib/{new-components/menu → menu}/index.d.ts +0 -0
  318. package/lib/{new-components/menu → menu}/menu.d.ts +5 -5
  319. package/lib/menu/menu.js +2 -0
  320. package/lib/menu/menu.js.map +1 -0
  321. package/lib/{new-components/menu → menu}/menu.test.d.ts +0 -0
  322. package/lib/{new-components/modal → modal}/index.d.ts +0 -0
  323. package/lib/{new-components/modal → modal}/modal-stories-components.d.ts +0 -0
  324. package/lib/{new-components/modal → modal}/modal.d.ts +0 -0
  325. package/lib/modal/modal.js +2 -0
  326. package/lib/modal/modal.js.map +1 -0
  327. package/lib/{new-components/modal → modal}/modal.module.css.js +0 -0
  328. package/lib/{new-components/modal → modal}/modal.module.css.js.map +0 -0
  329. package/lib/{new-components/modal → modal}/modal.test.d.ts +0 -0
  330. package/lib/{new-components/notice → notice}/index.d.ts +0 -0
  331. package/lib/{new-components/notice → notice}/notice.d.ts +1 -1
  332. package/lib/notice/notice.js +2 -0
  333. package/lib/notice/notice.js.map +1 -0
  334. package/lib/{new-components/notice → notice}/notice.module.css.js +0 -0
  335. package/lib/{new-components/notice → notice}/notice.module.css.js.map +0 -0
  336. package/lib/{new-components/notice → notice}/notice.test.d.ts +0 -0
  337. package/lib/{new-components/password-field → password-field}/index.d.ts +0 -0
  338. package/lib/{new-components/password-field → password-field}/password-field.d.ts +0 -0
  339. package/lib/password-field/password-field.js +2 -0
  340. package/lib/password-field/password-field.js.map +1 -0
  341. package/lib/{new-components/password-field → password-field}/password-field.module.css.js +0 -0
  342. package/lib/{new-components/password-field → password-field}/password-field.module.css.js.map +0 -0
  343. package/lib/{new-components/password-field → password-field}/password-field.test.d.ts +0 -0
  344. package/lib/{new-components/select-field → select-field}/index.d.ts +0 -0
  345. package/lib/{new-components/select-field → select-field}/select-field.d.ts +0 -0
  346. package/lib/select-field/select-field.js +2 -0
  347. package/lib/select-field/select-field.js.map +1 -0
  348. package/lib/{new-components/select-field → select-field}/select-field.module.css.js +0 -0
  349. package/lib/{new-components/select-field → select-field}/select-field.module.css.js.map +0 -0
  350. package/lib/{new-components/select-field → select-field}/select-field.test.d.ts +0 -0
  351. package/lib/{new-components/spinner → spinner}/index.d.ts +0 -0
  352. package/lib/{new-components/spinner → spinner}/spinner.d.ts +0 -0
  353. package/lib/{new-components/spinner → spinner}/spinner.js +0 -0
  354. package/lib/spinner/spinner.js.map +1 -0
  355. package/lib/{new-components/spinner → spinner}/spinner.module.css.js +0 -0
  356. package/lib/{new-components/spinner → spinner}/spinner.module.css.js.map +0 -0
  357. package/lib/{new-components/stack → stack}/index.d.ts +0 -0
  358. package/lib/{new-components/stack → stack}/stack.d.ts +3 -3
  359. package/lib/{new-components/stack → stack}/stack.js +1 -1
  360. package/lib/stack/stack.js.map +1 -0
  361. package/lib/{new-components/stack → stack}/stack.test.d.ts +0 -0
  362. package/lib/{new-components/switch-field → switch-field}/index.d.ts +0 -0
  363. package/lib/{new-components/switch-field → switch-field}/switch-field.d.ts +0 -0
  364. package/lib/switch-field/switch-field.js +2 -0
  365. package/lib/switch-field/switch-field.js.map +1 -0
  366. package/lib/{new-components/switch-field → switch-field}/switch-field.module.css.js +0 -0
  367. package/lib/{new-components/switch-field → switch-field}/switch-field.module.css.js.map +0 -0
  368. package/lib/{new-components/switch-field → switch-field}/switch-field.test.d.ts +0 -0
  369. package/lib/{new-components/tabs → tabs}/index.d.ts +0 -0
  370. package/lib/{new-components/tabs → tabs}/tabs.d.ts +3 -3
  371. package/lib/tabs/tabs.js +2 -0
  372. package/lib/tabs/tabs.js.map +1 -0
  373. package/lib/{new-components/tabs → tabs}/tabs.module.css.js +0 -0
  374. package/lib/{new-components/tabs → tabs}/tabs.module.css.js.map +0 -0
  375. package/lib/{new-components/tabs → tabs}/tabs.test.d.ts +0 -0
  376. package/lib/{new-components/text → text}/index.d.ts +0 -0
  377. package/lib/{new-components/text → text}/text.d.ts +2 -2
  378. package/lib/{new-components/text → text}/text.js +1 -1
  379. package/lib/text/text.js.map +1 -0
  380. package/lib/{new-components/text → text}/text.module.css.js +0 -0
  381. package/lib/{new-components/text → text}/text.module.css.js.map +0 -0
  382. package/lib/{new-components/text → text}/text.test.d.ts +0 -0
  383. package/lib/{new-components/text-area → text-area}/index.d.ts +0 -0
  384. package/lib/{new-components/text-area → text-area}/text-area.d.ts +0 -0
  385. package/lib/text-area/text-area.js +2 -0
  386. package/lib/text-area/text-area.js.map +1 -0
  387. package/lib/{new-components/text-area → text-area}/text-area.module.css.js +0 -0
  388. package/lib/{new-components/text-area → text-area}/text-area.module.css.js.map +0 -0
  389. package/lib/{new-components/text-area → text-area}/text-area.test.d.ts +0 -0
  390. package/lib/{new-components/text-field → text-field}/index.d.ts +0 -0
  391. package/lib/{new-components/text-field → text-field}/text-field.d.ts +0 -0
  392. package/lib/text-field/text-field.js +2 -0
  393. package/lib/text-field/text-field.js.map +1 -0
  394. package/lib/{new-components/text-field → text-field}/text-field.module.css.js +0 -0
  395. package/lib/{new-components/text-field → text-field}/text-field.module.css.js.map +0 -0
  396. package/lib/{new-components/text-field → text-field}/text-field.test.d.ts +0 -0
  397. package/lib/{new-components/text-link → text-link}/index.d.ts +0 -0
  398. package/lib/text-link/text-link.d.ts +5 -0
  399. package/lib/text-link/text-link.js +2 -0
  400. package/lib/text-link/text-link.js.map +1 -0
  401. package/lib/{new-components/text-link → text-link}/text-link.module.css.js +0 -0
  402. package/lib/{new-components/text-link → text-link}/text-link.module.css.js.map +0 -0
  403. package/lib/{new-components/toast → toast}/index.d.ts +0 -0
  404. package/lib/{new-components/toast → toast}/static-toast.d.ts +0 -0
  405. package/lib/toast/static-toast.js +2 -0
  406. package/lib/toast/static-toast.js.map +1 -0
  407. package/lib/{new-components/toast → toast}/toast-animation.d.ts +0 -0
  408. package/lib/{new-components/toast → toast}/toast-animation.js +0 -0
  409. package/lib/toast/toast-animation.js.map +1 -0
  410. package/lib/{new-components/toast → toast}/toast.module.css.js +0 -0
  411. package/lib/{new-components/toast → toast}/toast.module.css.js.map +0 -0
  412. package/lib/{new-components/toast → toast}/toast.test.d.ts +0 -0
  413. package/lib/{new-components/toast → toast}/use-toasts.d.ts +1 -1
  414. package/lib/toast/use-toasts.js +2 -0
  415. package/lib/toast/use-toasts.js.map +1 -0
  416. package/lib/{new-components/tooltip → tooltip}/index.d.ts +0 -0
  417. package/lib/{new-components/tooltip → tooltip}/tooltip.d.ts +0 -0
  418. package/lib/tooltip/tooltip.js +2 -0
  419. package/lib/tooltip/tooltip.js.map +1 -0
  420. package/lib/{new-components/tooltip → tooltip}/tooltip.module.css.js +0 -0
  421. package/lib/{new-components/tooltip → tooltip}/tooltip.module.css.js.map +0 -0
  422. package/lib/{new-components/tooltip → tooltip}/tooltip.test.d.ts +0 -0
  423. package/lib/{new-components → utils}/common-helpers.d.ts +0 -0
  424. package/lib/{new-components → utils}/common-helpers.js +0 -0
  425. package/lib/utils/common-helpers.js.map +1 -0
  426. package/lib/{new-components → utils}/common-types.d.ts +0 -0
  427. package/lib/{new-components → utils}/responsive-props.d.ts +0 -0
  428. package/lib/{new-components → utils}/responsive-props.js +0 -0
  429. package/lib/utils/responsive-props.js.map +1 -0
  430. package/lib/{new-components → utils}/test-helpers.d.ts +0 -0
  431. package/package.json +1 -1
  432. package/styles/banner.css +7 -0
  433. package/styles/banner.module.css.css +1 -0
  434. package/styles/menu.css +1 -1
  435. package/styles/reactist.css +2 -2
  436. package/es/components/deprecated-notification/deprecated-notification.js +0 -73
  437. package/es/components/deprecated-notification/deprecated-notification.js.map +0 -1
  438. package/es/components/icons/CloseIcon.svg.js +0 -14
  439. package/es/components/icons/CloseIcon.svg.js.map +0 -1
  440. package/es/new-components/alert/alert.js.map +0 -1
  441. package/es/new-components/avatar/avatar.js.map +0 -1
  442. package/es/new-components/avatar/utils.js.map +0 -1
  443. package/es/new-components/badge/badge.js.map +0 -1
  444. package/es/new-components/base-button/base-button.js.map +0 -1
  445. package/es/new-components/base-field/base-field.js.map +0 -1
  446. package/es/new-components/box/box.js.map +0 -1
  447. package/es/new-components/button/button.js.map +0 -1
  448. package/es/new-components/button-link/button-link.js.map +0 -1
  449. package/es/new-components/checkbox-field/checkbox-field.js.map +0 -1
  450. package/es/new-components/checkbox-field/checkbox-icon.js.map +0 -1
  451. package/es/new-components/columns/columns.js.map +0 -1
  452. package/es/new-components/common-helpers.js.map +0 -1
  453. package/es/new-components/deprecated-modal/modal.js.map +0 -1
  454. package/es/new-components/divider/divider.js.map +0 -1
  455. package/es/new-components/heading/heading.js.map +0 -1
  456. package/es/new-components/hidden/hidden.js.map +0 -1
  457. package/es/new-components/hidden-visually/hidden-visually.js.map +0 -1
  458. package/es/new-components/icons/alert-icon.js.map +0 -1
  459. package/es/new-components/icons/close-icon.js.map +0 -1
  460. package/es/new-components/icons/password-hidden-icon.js.map +0 -1
  461. package/es/new-components/icons/password-visible-icon.js.map +0 -1
  462. package/es/new-components/inline/inline.js.map +0 -1
  463. package/es/new-components/loading/loading.js.map +0 -1
  464. package/es/new-components/menu/menu.js.map +0 -1
  465. package/es/new-components/modal/modal.js.map +0 -1
  466. package/es/new-components/notice/notice.js.map +0 -1
  467. package/es/new-components/password-field/password-field.js.map +0 -1
  468. package/es/new-components/responsive-props.js.map +0 -1
  469. package/es/new-components/select-field/select-field.js.map +0 -1
  470. package/es/new-components/spinner/spinner.js.map +0 -1
  471. package/es/new-components/stack/stack.js.map +0 -1
  472. package/es/new-components/switch-field/switch-field.js.map +0 -1
  473. package/es/new-components/tabs/tabs.js.map +0 -1
  474. package/es/new-components/text/text.js.map +0 -1
  475. package/es/new-components/text-area/text-area.js.map +0 -1
  476. package/es/new-components/text-field/text-field.js.map +0 -1
  477. package/es/new-components/text-link/text-link.js.map +0 -1
  478. package/es/new-components/toast/static-toast.js.map +0 -1
  479. package/es/new-components/toast/toast-animation.js.map +0 -1
  480. package/es/new-components/toast/use-toasts.js.map +0 -1
  481. package/es/new-components/tooltip/tooltip.js.map +0 -1
  482. package/lib/components/deprecated-notification/deprecated-notification.d.ts +0 -18
  483. package/lib/components/deprecated-notification/deprecated-notification.js +0 -2
  484. package/lib/components/deprecated-notification/deprecated-notification.js.map +0 -1
  485. package/lib/components/deprecated-notification/deprecated-notification.test.d.ts +0 -1
  486. package/lib/components/deprecated-notification/index.d.ts +0 -1
  487. package/lib/components/icons/CloseIcon.svg.js +0 -2
  488. package/lib/components/icons/CloseIcon.svg.js.map +0 -1
  489. package/lib/new-components/alert/alert.js +0 -2
  490. package/lib/new-components/alert/alert.js.map +0 -1
  491. package/lib/new-components/avatar/avatar.js +0 -2
  492. package/lib/new-components/avatar/avatar.js.map +0 -1
  493. package/lib/new-components/avatar/utils.js.map +0 -1
  494. package/lib/new-components/badge/badge.js +0 -2
  495. package/lib/new-components/badge/badge.js.map +0 -1
  496. package/lib/new-components/base-button/base-button.js +0 -2
  497. package/lib/new-components/base-button/base-button.js.map +0 -1
  498. package/lib/new-components/base-field/base-field.js +0 -2
  499. package/lib/new-components/base-field/base-field.js.map +0 -1
  500. package/lib/new-components/box/box.js.map +0 -1
  501. package/lib/new-components/button/button.js +0 -2
  502. package/lib/new-components/button/button.js.map +0 -1
  503. package/lib/new-components/button-link/button-link.js +0 -2
  504. package/lib/new-components/button-link/button-link.js.map +0 -1
  505. package/lib/new-components/checkbox-field/checkbox-field.js +0 -2
  506. package/lib/new-components/checkbox-field/checkbox-field.js.map +0 -1
  507. package/lib/new-components/checkbox-field/checkbox-icon.js +0 -2
  508. package/lib/new-components/checkbox-field/checkbox-icon.js.map +0 -1
  509. package/lib/new-components/columns/columns.js.map +0 -1
  510. package/lib/new-components/common-helpers.js.map +0 -1
  511. package/lib/new-components/deprecated-modal/modal.js +0 -2
  512. package/lib/new-components/deprecated-modal/modal.js.map +0 -1
  513. package/lib/new-components/divider/divider.js +0 -2
  514. package/lib/new-components/divider/divider.js.map +0 -1
  515. package/lib/new-components/heading/heading.js +0 -2
  516. package/lib/new-components/heading/heading.js.map +0 -1
  517. package/lib/new-components/hidden/hidden.js +0 -2
  518. package/lib/new-components/hidden/hidden.js.map +0 -1
  519. package/lib/new-components/hidden-visually/hidden-visually.js +0 -2
  520. package/lib/new-components/hidden-visually/hidden-visually.js.map +0 -1
  521. package/lib/new-components/icons/alert-icon.js +0 -2
  522. package/lib/new-components/icons/alert-icon.js.map +0 -1
  523. package/lib/new-components/icons/close-icon.js +0 -2
  524. package/lib/new-components/icons/close-icon.js.map +0 -1
  525. package/lib/new-components/icons/password-hidden-icon.js +0 -2
  526. package/lib/new-components/icons/password-hidden-icon.js.map +0 -1
  527. package/lib/new-components/icons/password-visible-icon.js +0 -2
  528. package/lib/new-components/icons/password-visible-icon.js.map +0 -1
  529. package/lib/new-components/inline/inline.js.map +0 -1
  530. package/lib/new-components/loading/loading.js +0 -2
  531. package/lib/new-components/loading/loading.js.map +0 -1
  532. package/lib/new-components/menu/menu.js +0 -2
  533. package/lib/new-components/menu/menu.js.map +0 -1
  534. package/lib/new-components/modal/modal.js +0 -2
  535. package/lib/new-components/modal/modal.js.map +0 -1
  536. package/lib/new-components/notice/notice.js +0 -2
  537. package/lib/new-components/notice/notice.js.map +0 -1
  538. package/lib/new-components/password-field/password-field.js +0 -2
  539. package/lib/new-components/password-field/password-field.js.map +0 -1
  540. package/lib/new-components/responsive-props.js.map +0 -1
  541. package/lib/new-components/select-field/select-field.js +0 -2
  542. package/lib/new-components/select-field/select-field.js.map +0 -1
  543. package/lib/new-components/spinner/spinner.js.map +0 -1
  544. package/lib/new-components/stack/stack.js.map +0 -1
  545. package/lib/new-components/switch-field/switch-field.js +0 -2
  546. package/lib/new-components/switch-field/switch-field.js.map +0 -1
  547. package/lib/new-components/tabs/tabs.js +0 -2
  548. package/lib/new-components/tabs/tabs.js.map +0 -1
  549. package/lib/new-components/text/text.js.map +0 -1
  550. package/lib/new-components/text-area/text-area.js +0 -2
  551. package/lib/new-components/text-area/text-area.js.map +0 -1
  552. package/lib/new-components/text-field/text-field.js +0 -2
  553. package/lib/new-components/text-field/text-field.js.map +0 -1
  554. package/lib/new-components/text-link/text-link.d.ts +0 -5
  555. package/lib/new-components/text-link/text-link.js +0 -2
  556. package/lib/new-components/text-link/text-link.js.map +0 -1
  557. package/lib/new-components/toast/static-toast.js +0 -2
  558. package/lib/new-components/toast/static-toast.js.map +0 -1
  559. package/lib/new-components/toast/toast-animation.js.map +0 -1
  560. package/lib/new-components/toast/use-toasts.js +0 -2
  561. package/lib/new-components/toast/use-toasts.js.map +0 -1
  562. package/lib/new-components/tooltip/tooltip.js +0 -2
  563. package/lib/new-components/tooltip/tooltip.js.map +0 -1
  564. package/styles/deprecated-notification.css +0 -1
@@ -1 +0,0 @@
1
- {"version":3,"file":"alert-icon.js","sources":["../../../src/new-components/icons/alert-icon.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { AlertTone } from '../common-types'\n\nconst alertIconForTone: Record<AlertTone, typeof AlertInfoIcon> = {\n info: AlertInfoIcon,\n positive: AlertPositiveIcon,\n caution: AlertCautionIcon,\n critical: AlertCriticalIcon,\n}\n\nfunction AlertIcon({ tone, ...props }: JSX.IntrinsicElements['svg'] & { tone: AlertTone }) {\n const Icon = alertIconForTone[tone]\n return Icon ? <Icon {...props} /> : null\n}\n\nfunction AlertInfoIcon(props: JSX.IntrinsicElements['svg']) {\n return (\n <svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zm0-1a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm1.18-11.84a.84.84 0 1 1-1.68 0 .84.84 0 0 1 1.68 0zM12.5 10a.5.5 0 0 1 .5.5V15h1a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1h1v-4h-1a.5.5 0 0 1 0-1h1.5z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nfunction AlertPositiveIcon(props: JSX.IntrinsicElements['svg']) {\n return (\n <svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zm0-1a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-4.354-8.104a.5.5 0 0 1 .708 0l2.146 2.147 5.146-5.147a.5.5 0 0 1 .708.708l-5.5 5.5a.5.5 0 0 1-.708 0l-2.5-2.5a.5.5 0 0 1 0-.708z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nfunction AlertCautionIcon(props: JSX.IntrinsicElements['svg']) {\n return (\n <svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"m3.254 16.992 7.018-12.03a2 2 0 0 1 3.455 0l7.018 12.03A2 2 0 0 1 19.018 20H4.982a2 2 0 0 1-1.728-3.008zm8.242-11.887a1 1 0 0 0-.36.36l-7.018 12.03A1 1 0 0 0 4.982 19h14.036a1 1 0 0 0 .864-1.504l-7.018-12.03a1 1 0 0 0-1.368-.36zM13 16.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-.014-7.014a.987.987 0 1 0-1.971.055l.236 4.25c.053.945 1.445.945 1.498 0l.236-4.25.001-.027v-.028z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nfunction AlertCriticalIcon(props: JSX.IntrinsicElements['svg']) {\n return (\n <svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M12 3.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17zM2.5 12a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0zM13 15.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-.014-7.014A.987.987 0 0 0 12 7.5h-.027l-.028.002a.987.987 0 0 0-.93 1.04l.236 4.25c.053.944 1.445.944 1.498 0l.236-4.25.001-.028v-.027z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nexport { AlertIcon }\n"],"names":["alertIconForTone","info","props","React","width","height","fill","xmlns","fillRule","clipRule","d","positive","caution","critical","tone","Icon"],"mappings":"qKAGMA,EAA4D,CAC9DC,KAWJ,SAAuBC,GACnB,OACIC,uCAAKC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,MAAM,8BAAiCL,GAC3EC,wBACIK,SAAS,UACTC,SAAS,UACTC,EAAE,yNACFJ,KAAK,mBAjBjBK,SAuBJ,SAA2BT,GACvB,OACIC,uCAAKC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,MAAM,8BAAiCL,GAC3EC,wBACIK,SAAS,UACTC,SAAS,UACTC,EAAE,6MACFJ,KAAK,mBA7BjBM,QAmCJ,SAA0BV,GACtB,OACIC,uCAAKC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,MAAM,8BAAiCL,GAC3EC,wBACIK,SAAS,UACTC,SAAS,UACTC,EAAE,gXACFJ,KAAK,mBAzCjBO,SA+CJ,SAA2BX,GACvB,OACIC,uCAAKC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,MAAM,8BAAiCL,GAC3EC,wBACIK,SAAS,UACTC,SAAS,UACTC,EAAE,6QACFJ,KAAK,sCAnDrB,gBAAmBQ,KAAEA,KAASZ,iCAC1B,MAAMa,EAAOf,EAAiBc,GAC9B,OAAOC,EAAOZ,gBAACY,qBAASb,IAAY"}
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react");exports.CloseIcon=function(l){return r.createElement("svg",e.objectSpread2({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24"},l),r.createElement("path",{fill:"currentColor",d:"M5.146 5.146a.5.5 0 0 1 .708 0L12 11.293l6.146-6.147a.5.5 0 0 1 .638-.057l.07.057a.5.5 0 0 1 0 .708L12.707 12l6.147 6.146a.5.5 0 0 1 .057.638l-.057.07a.5.5 0 0 1-.708 0L12 12.707l-6.146 6.147a.5.5 0 0 1-.638.057l-.07-.057a.5.5 0 0 1 0-.708L11.293 12 5.146 5.854a.5.5 0 0 1-.057-.638z"}))};
2
- //# sourceMappingURL=close-icon.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"close-icon.js","sources":["../../../src/new-components/icons/close-icon.tsx"],"sourcesContent":["import * as React from 'react'\n\nfunction CloseIcon(props: JSX.IntrinsicElements['svg']) {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" {...props}>\n <path\n fill=\"currentColor\"\n d=\"M5.146 5.146a.5.5 0 0 1 .708 0L12 11.293l6.146-6.147a.5.5 0 0 1 .638-.057l.07.057a.5.5 0 0 1 0 .708L12.707 12l6.147 6.146a.5.5 0 0 1 .057.638l-.057.07a.5.5 0 0 1-.708 0L12 12.707l-6.146 6.147a.5.5 0 0 1-.638.057l-.07-.057a.5.5 0 0 1 0-.708L11.293 12 5.146 5.854a.5.5 0 0 1-.057-.638z\"\n />\n </svg>\n )\n}\n\nexport { CloseIcon }\n"],"names":["props","React","xmlns","width","height","fill","d"],"mappings":"sKAEA,SAAmBA,GACf,OACIC,uCAAKC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,MAASJ,GAC/DC,wBACII,KAAK,eACLC,EAAE"}
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react");exports.PasswordHiddenIcon=function(r){return t.createElement("svg",e.objectSpread2({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24"},r),t.createElement("g",{fill:"gray",fillRule:"evenodd",transform:"translate(2 4)"},t.createElement("path",{fillRule:"nonzero",d:"M13.047 2.888C11.962 2.294 10.944 2 10 2 7.56 2 4.63 3.966 1.288 8c1.133 1.368 2.218 2.497 3.253 3.394l-.708.708c-1.068-.93-2.173-2.085-3.315-3.464a1 1 0 0 1 0-1.276C4.031 3.121 7.192 1 10 1c1.196 0 2.456.385 3.78 1.154l-.733.734zm-6.02 10.263C8.084 13.72 9.076 14 10 14c2.443 0 5.373-1.969 8.712-6-1.11-1.34-2.176-2.453-3.193-3.341l.708-.709C17.437 5.013 18.695 6.363 20 8c-3.721 4.667-7.054 7-10 7-1.175 0-2.411-.371-3.709-1.113l.735-.736z"}),t.createElement("path",{fillRule:"nonzero",d:"M8.478 11.7l.79-.79a3 3 0 0 0 3.642-3.642l.79-.79A4 4 0 0 1 8.477 11.7zM6.334 9.602a4 4 0 0 1 5.268-5.268l-.78.78A3.002 3.002 0 0 0 7.113 8.82l-.78.78z"}),t.createElement("rect",{width:"21",height:"1",x:"-.722",y:"7.778",rx:".5",transform:"rotate(-45 9.778 8.278)"})))};
2
- //# sourceMappingURL=password-hidden-icon.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"password-hidden-icon.js","sources":["../../../src/new-components/icons/password-hidden-icon.tsx"],"sourcesContent":["import * as React from 'react'\n\nfunction PasswordHiddenIcon(props: JSX.IntrinsicElements['svg']) {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" {...props}>\n <g fill=\"gray\" fillRule=\"evenodd\" transform=\"translate(2 4)\">\n <path\n fillRule=\"nonzero\"\n d=\"M13.047 2.888C11.962 2.294 10.944 2 10 2 7.56 2 4.63 3.966 1.288 8c1.133 1.368 2.218 2.497 3.253 3.394l-.708.708c-1.068-.93-2.173-2.085-3.315-3.464a1 1 0 0 1 0-1.276C4.031 3.121 7.192 1 10 1c1.196 0 2.456.385 3.78 1.154l-.733.734zm-6.02 10.263C8.084 13.72 9.076 14 10 14c2.443 0 5.373-1.969 8.712-6-1.11-1.34-2.176-2.453-3.193-3.341l.708-.709C17.437 5.013 18.695 6.363 20 8c-3.721 4.667-7.054 7-10 7-1.175 0-2.411-.371-3.709-1.113l.735-.736z\"\n />\n <path\n fillRule=\"nonzero\"\n d=\"M8.478 11.7l.79-.79a3 3 0 0 0 3.642-3.642l.79-.79A4 4 0 0 1 8.477 11.7zM6.334 9.602a4 4 0 0 1 5.268-5.268l-.78.78A3.002 3.002 0 0 0 7.113 8.82l-.78.78z\"\n />\n <rect\n width=\"21\"\n height=\"1\"\n x=\"-.722\"\n y=\"7.778\"\n rx=\".5\"\n transform=\"rotate(-45 9.778 8.278)\"\n />\n </g>\n </svg>\n )\n}\n\nexport { PasswordHiddenIcon }\n"],"names":["props","React","xmlns","width","height","fill","fillRule","transform","d","x","y","rx"],"mappings":"+KAEA,SAA4BA,GACxB,OACIC,uCAAKC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,MAASJ,GAC/DC,qBAAGI,KAAK,OAAOC,SAAS,UAAUC,UAAU,kBACxCN,wBACIK,SAAS,UACTE,EAAE,8bAENP,wBACIK,SAAS,UACTE,EAAE,4JAENP,wBACIE,MAAM,KACNC,OAAO,IACPK,EAAE,QACFC,EAAE,QACFC,GAAG,KACHJ,UAAU"}
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react");exports.PasswordVisibleIcon=function(t){return r.createElement("svg",e.objectSpread2({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24"},t),r.createElement("g",{fill:"none",fillRule:"evenodd",stroke:"gray"},r.createElement("path",{d:"M21.358 12C17.825 7.65 14.692 5.5 12 5.5c-2.624 0-5.67 2.043-9.097 6.181a.5.5 0 0 0 0 .638C6.331 16.457 9.376 18.5 12 18.5c2.692 0 5.825-2.15 9.358-6.5z"}),r.createElement("circle",{cx:"12",cy:"12",r:"3.5"})))};
2
- //# sourceMappingURL=password-visible-icon.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"password-visible-icon.js","sources":["../../../src/new-components/icons/password-visible-icon.tsx"],"sourcesContent":["import * as React from 'react'\n\nfunction PasswordVisibleIcon(props: JSX.IntrinsicElements['svg']) {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" {...props}>\n <g fill=\"none\" fillRule=\"evenodd\" stroke=\"gray\">\n <path d=\"M21.358 12C17.825 7.65 14.692 5.5 12 5.5c-2.624 0-5.67 2.043-9.097 6.181a.5.5 0 0 0 0 .638C6.331 16.457 9.376 18.5 12 18.5c2.692 0 5.825-2.15 9.358-6.5z\" />\n <circle cx=\"12\" cy=\"12\" r=\"3.5\" />\n </g>\n </svg>\n )\n}\n\nexport { PasswordVisibleIcon }\n"],"names":["props","React","xmlns","width","height","fill","fillRule","stroke","d","cx","cy","r"],"mappings":"gLAEA,SAA6BA,GACzB,OACIC,uCAAKC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,MAASJ,GAC/DC,qBAAGI,KAAK,OAAOC,SAAS,UAAUC,OAAO,QACrCN,wBAAMO,EAAE,6JACRP,0BAAQQ,GAAG,KAAKC,GAAG,KAAKC,EAAE"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"inline.js","sources":["../../../src/new-components/inline/inline.tsx"],"sourcesContent":["import * as React from 'react'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { mapResponsiveProp } from '../responsive-props'\nimport { Box } from '../box'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { Space } from '../common-types'\nimport type { ReusableBoxProps } from '../box'\n\ntype InlineAlign = 'left' | 'center' | 'right'\n\ninterface InlineProps extends ReusableBoxProps {\n space?: ResponsiveProp<Space>\n align?: ResponsiveProp<InlineAlign>\n alignY?: ResponsiveProp<'top' | 'center' | 'bottom'>\n}\n\nconst Inline = polymorphicComponent<'div', InlineProps>(function Inline(\n { as, space, align = 'left', alignY = 'center', children, exceptionallySetClassName, ...props },\n ref,\n) {\n return (\n <Box\n {...props}\n as={as}\n display=\"flex\"\n flexWrap=\"wrap\"\n gap={space}\n className={exceptionallySetClassName}\n ref={ref}\n alignItems={mapResponsiveProp(alignY, (alignY) =>\n alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : 'center',\n )}\n justifyContent={mapResponsiveProp(align, (align) =>\n align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : 'center',\n )}\n >\n {children}\n </Box>\n )\n})\n\nexport type { InlineProps, InlineAlign }\nexport { Inline }\n"],"names":["polymorphicComponent","ref","as","space","align","alignY","children","exceptionallySetClassName","props","React","Box","display","flexWrap","gap","className","alignItems","mapResponsiveProp","justifyContent"],"mappings":"0VAiBeA,wBAAyC,WAEpDC,OADAC,GAAEA,EAAFC,MAAMA,EAANC,MAAaA,EAAQ,OAArBC,OAA6BA,EAAS,SAAtCC,SAAgDA,EAAhDC,0BAA0DA,KAA8BC,iCAGxF,OACIC,gBAACC,yCACOF,OACJN,GAAIA,EACJS,QAAQ,OACRC,SAAS,OACTC,IAAKV,EACLW,UAAWP,EACXN,IAAKA,EACLc,WAAYC,oBAAkBX,EAASA,GACxB,QAAXA,EAAmB,YAAyB,WAAXA,EAAsB,UAAY,UAEvEY,eAAgBD,oBAAkBZ,EAAQA,GAC5B,SAAVA,EAAmB,YAAwB,UAAVA,EAAoB,UAAY,YAGpEE"}
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),l=require("../box/box.js"),r=require("../spinner/spinner.js");const t=["size","exceptionallySetClassName"],i={xsmall:16,small:24,medium:36,large:48};exports.Loading=function(s){var n;let{size:o="small",exceptionallySetClassName:c}=s,u=e.objectWithoutProperties(s,t);const p=null!=(n=i[o])?n:i.small,b=u["aria-label"]?u["aria-label"]:u["aria-labelledby"]?void 0:"Loading…";return a.createElement(l.Box,e.objectSpread2(e.objectSpread2({},u),{},{"aria-label":b,className:c,display:"flex",alignItems:"center",justifyContent:"center",role:"progressbar"}),a.createElement(r.Spinner,{size:p,"aria-hidden":!0}))};
2
- //# sourceMappingURL=loading.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"loading.js","sources":["../../../src/new-components/loading/loading.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\n\ntype Size = 'xsmall' | 'small' | 'medium' | 'large'\n\ntype NativeProps = Omit<\n JSX.IntrinsicElements['div'],\n 'className' | 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'role' | 'size'\n>\n\ntype LoadingProps = NativeProps & {\n /**\n * The size of the loading spinner.\n * @default 'small'\n */\n size?: Size\n /**\n * A escape hatch in case you need to provide a custom class name to the container element.\n */\n exceptionallySetClassName?: string\n /** Identifies the element (or elements) that describes the loading component for assistive technologies. */\n 'aria-describedby'?: string\n} & (\n | {\n /** Defines a string value that labels the current loading component for assistive technologies. */\n 'aria-label': string\n 'aria-labelledby'?: never\n }\n | {\n /** Identifies the element (or elements) that labels the current loading component for assistive technologies. */\n 'aria-labelledby': string\n 'aria-label'?: never\n }\n )\n\nconst sizeMapping: Record<Size, number> = {\n xsmall: 16,\n small: 24,\n medium: 36,\n large: 48,\n}\n\nfunction Loading({ size = 'small', exceptionallySetClassName, ...props }: LoadingProps) {\n const numericSize = sizeMapping[size] ?? sizeMapping.small\n const ariaLabel = props['aria-label']\n ? props['aria-label']\n : !props['aria-labelledby']\n ? 'Loading…'\n : undefined\n\n return (\n <Box\n {...props}\n aria-label={ariaLabel}\n className={exceptionallySetClassName}\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n role=\"progressbar\"\n >\n <Spinner size={numericSize} aria-hidden />\n </Box>\n )\n}\n\nexport { Loading }\nexport type { LoadingProps }\n"],"names":["sizeMapping","xsmall","small","medium","large","size","exceptionallySetClassName","props","numericSize","ariaLabel","undefined","React","Box","className","display","alignItems","justifyContent","role","Spinner"],"mappings":"+PAoCMA,EAAoC,CACtCC,OAAQ,GACRC,MAAO,GACPC,OAAQ,GACRC,MAAO,oBAGX,sBAAiBC,KAAEA,EAAO,QAATC,0BAAkBA,KAA8BC,iCAC7D,MAAMC,WAAcR,EAAYK,MAASL,EAAYE,MAC/CO,EAAYF,EAAM,cAClBA,EAAM,cACLA,EAAM,wBAEPG,EADA,WAGN,OACIC,gBAACC,yCACOL,oBACQE,EACZI,UAAWP,EACXQ,QAAQ,OACRC,WAAW,SACXC,eAAe,SACfC,KAAK,gBAELN,gBAACO,WAAQb,KAAMG"}
@@ -1,2 +0,0 @@
1
- "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),n=require("react"),o=(e(n),e(require("classnames"))),l=require("../../utils/polymorphism.js"),r=require("ariakit/portal"),a=require("ariakit/menu");const c=["children","onItemSelect"],s=["exceptionallySetClassName"],u=["as"],i=["exceptionallySetClassName","modal"],p=["value","children","onSelect","hideOnSelect","onClick","exceptionallySetClassName","as"],m=["label","children","exceptionallySetClassName"],d=n.createContext({});function h(e){let{children:o,onItemSelect:l}=e,r=t.objectWithoutProperties(e,c);const[s,u]=n.useState(null),i=n.useMemo(()=>s?()=>s:void 0,[s]),p=a.useMenuState(t.objectSpread2({focusLoop:!0,gutter:8,shift:4,getAnchorRect:i},r)),m=n.useCallback((function(e){l&&l(e)}),[l]),h=n.useMemo(()=>({state:p,handleItemSelect:m,handleAnchorRectChange:u}),[p,m]);return n.createElement(d.Provider,{value:h},o)}const C=l.polymorphicComponent((function(e,l){let{exceptionallySetClassName:r}=e,c=t.objectWithoutProperties(e,s);const{state:u}=n.useContext(d);return n.createElement(a.MenuButton,t.objectSpread2(t.objectSpread2({},c),{},{state:u,ref:l,className:o("reactist_menubutton",r)}))})),S=l.polymorphicComponent((function(e,o){let{as:l="div"}=e,r=t.objectWithoutProperties(e,u);const{handleAnchorRectChange:a,state:c}=n.useContext(d),s=n.useCallback(e=>{e.preventDefault(),a({x:e.clientX,y:e.clientY}),c.show()},[a,c]);return n.createElement(l,t.objectSpread2(t.objectSpread2({},r),{},{onContextMenu:s,ref:o}))})),b=l.polymorphicComponent((function(e,l){let{exceptionallySetClassName:c,modal:s=!0}=e,u=t.objectWithoutProperties(e,i);const{state:p}=n.useContext(d);return p.open?n.createElement(r.Portal,{preserveTabOrder:!0},n.createElement(a.Menu,t.objectSpread2(t.objectSpread2({},u),{},{state:p,ref:l,className:o("reactist_menulist",c),modal:s}))):null})),f=l.polymorphicComponent((function(e,o){let{value:l,children:r,onSelect:c,hideOnSelect:s=!0,onClick:u,exceptionallySetClassName:i,as:m="button"}=e,h=t.objectWithoutProperties(e,p);const{handleItemSelect:C,state:S}=n.useContext(d),{hide:b}=S,f=n.useCallback((function(e){null==u||u(e);const t=!1!==(c&&!e.defaultPrevented?c():void 0)&&s;C(l),t&&b()}),[c,u,C,s,b,l]);return n.createElement(a.MenuItem,t.objectSpread2(t.objectSpread2({},h),{},{as:m,state:S,ref:o,onClick:f,className:i,hideOnClick:!1}),r)})),x=n.forwardRef((function({children:e,onItemSelect:t},o){const{handleItemSelect:l,state:r}=n.useContext(d),{hide:c}=r,s=n.useCallback((function(e){t&&t(e),l(e),c()}),[c,l,t]),[u,i]=n.Children.toArray(e),p=n.useCallback((function(e){return n.cloneElement(u,e)}),[u]);return n.createElement(h,{onItemSelect:s},n.createElement(a.MenuItem,{as:"div",state:r,ref:o,hideOnClick:!1},p),i)})),j=l.polymorphicComponent((function(e,o){let{label:l,children:r,exceptionallySetClassName:c}=e,s=t.objectWithoutProperties(e,m);const{state:u}=n.useContext(d);return n.createElement(a.MenuGroup,t.objectSpread2(t.objectSpread2({},s),{},{ref:o,state:u,className:c}),l?n.createElement("div",{role:"presentation",className:"reactist_menugroup__label"},l):null,r)}));exports.ContextMenuTrigger=S,exports.Menu=h,exports.MenuButton=C,exports.MenuGroup=j,exports.MenuItem=f,exports.MenuList=b,exports.SubMenu=x;
2
- //# sourceMappingURL=menu.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"menu.js","sources":["../../../src/new-components/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\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'\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 handleAnchorRectChange: (value: { x: number; y: number } | null) => 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.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n const [anchorRect, handleAnchorRectChange] = React.useState<{ x: number; y: number } | null>(\n null,\n )\n const getAnchorRect = React.useMemo(() => {\n return anchorRect ? () => anchorRect : undefined\n }, [anchorRect])\n\n const state = Ariakit.useMenuState({\n focusLoop: true,\n gutter: 8,\n shift: 4,\n getAnchorRect,\n ...props,\n })\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 handleAnchorRectChange,\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// ContextMenuTrigger\n//\nconst ContextMenuTrigger = polymorphicComponent<'div', unknown>(function ContextMenuTrigger(\n { as: component = 'div', ...props },\n ref,\n) {\n const { handleAnchorRectChange, state } = React.useContext(MenuContext)\n const handleContextMenu = React.useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault()\n handleAnchorRectChange({ x: event.clientX, y: event.clientY })\n state.show()\n },\n [handleAnchorRectChange, state],\n )\n\n return React.createElement(component, { ...props, onContextMenu: handleContextMenu, ref })\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, modal = true, ...props },\n ref,\n) {\n const { state } = React.useContext(MenuContext)\n\n return state.open ? (\n <Portal preserveTabOrder>\n <Ariakit.Menu\n {...props}\n state={state}\n ref={ref}\n className={classNames('reactist_menulist', exceptionallySetClassName)}\n modal={modal}\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<HTMLDivElement, 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 // Ariakit needs to be able to pass props to the MenuButton\n // and combine it with the MenuItem component\n const renderMenuButton = React.useCallback(\n function renderMenuButton(props: MenuButtonProps) {\n return React.cloneElement(button as React.ReactElement, props)\n },\n [button],\n )\n\n return (\n <Menu onItemSelect={handleSubItemSelect}>\n <Ariakit.MenuItem as=\"div\" state={state} ref={ref} hideOnClick={false}>\n {renderMenuButton}\n </Ariakit.MenuItem>\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 { ContextMenuTrigger, Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }\nexport type { MenuButtonProps, MenuListProps, MenuItemProps, MenuGroupProps }\n"],"names":["MenuContext","React","Menu","children","onItemSelect","props","anchorRect","handleAnchorRectChange","getAnchorRect","undefined","state","Ariakit","focusLoop","gutter","shift","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","className","classNames","ContextMenuTrigger","as","component","handleContextMenu","event","preventDefault","x","clientX","y","clientY","show","onContextMenu","MenuList","modal","open","Portal","preserveTabOrder","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","shouldClose","defaultPrevented","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","renderMenuButton","MenuGroup","label","role"],"mappings":"+lBA4BMA,EAAcC,gBAMhB,IA4BJ,SAASC,SAAKC,SAAEA,EAAFC,aAAYA,KAAiBC,iCACvC,MAAOC,EAAYC,GAA0BN,WACzC,MAEEO,EAAgBP,UAAc,IACzBK,EAAa,IAAMA,OAAaG,EACxC,CAACH,IAEEI,EAAQC,gCACVC,WAAW,EACXC,OAAQ,EACRC,MAAO,EACPN,cAAAA,GACGH,IAGDU,EAAmBd,eACrB,SAA0Be,GAClBZ,GAAcA,EAAaY,KAEnC,CAACZ,IAGCY,EAA0Bf,UAC5B,MACIS,MAAAA,EACAK,iBAAAA,EACAR,uBAAAA,IAEJ,CAACG,EAAOK,IAGZ,OAAOd,gBAACD,EAAYiB,UAASD,MAAOA,GAAQb,SAY1Ce,EAAaC,wBAAgD,WAE/DC,OADAC,0BAAEA,KAA8BhB,iCAGhC,MAAMK,MAAEA,GAAUT,aAAiBD,GACnC,OACIC,gBAACU,gDACON,OACJK,MAAOA,EACPU,IAAKA,EACLE,UAAWC,EAAW,sBAAuBF,SAQnDG,EAAqBL,wBAAqC,WAE5DC,OADEK,GAAIC,EAAY,SAAUrB,iCAG5B,MAAME,uBAAEA,EAAFG,MAA0BA,GAAUT,aAAiBD,GACrD2B,EAAoB1B,cACrB2B,IACGA,EAAMC,iBACNtB,EAAuB,CAAEuB,EAAGF,EAAMG,QAASC,EAAGJ,EAAMK,UACpDvB,EAAMwB,QAEV,CAAC3B,EAAwBG,IAG7B,OAAOT,gBAAoByB,qCAAgBrB,OAAO8B,cAAeR,EAAmBP,IAAAA,QAYlFgB,EAAWjB,wBAA2C,WAExDC,OADAC,0BAAEA,EAAFgB,MAA6BA,GAAQ,KAAShC,iCAG9C,MAAMK,MAAEA,GAAUT,aAAiBD,GAEnC,OAAOU,EAAM4B,KACTrC,gBAACsC,UAAOC,qBACJvC,gBAACU,0CACON,OACJK,MAAOA,EACPU,IAAKA,EACLE,UAAWC,EAAW,oBAAqBF,GAC3CgB,MAAOA,MAGf,QA8DFI,EAAWtB,wBAA8C,WAW3DC,OAVAJ,MACIA,EADJb,SAEIA,EAFJuC,SAGIA,EAHJC,aAIIA,GAAe,EAJnBC,QAKIA,EALJvB,0BAMIA,EANJI,GAOIA,EAAK,YACFpB,iCAIP,MAAMU,iBAAEA,EAAFL,MAAoBA,GAAUT,aAAiBD,IAC/C6C,KAAEA,GAASnC,EAEXoC,EAAc7C,eAChB,SAAqB2B,SACjBgB,GAAAA,EAAUhB,GACV,MAEMmB,GAAiC,KADnCL,IAAad,EAAMoB,iBAAmBN,SAAajC,IACPkC,EAChD5B,EAAiBC,GACb+B,GAAaF,MAErB,CAACH,EAAUE,EAAS7B,EAAkB4B,EAAcE,EAAM7B,IAG9D,OACIf,gBAACU,8CACON,OACJoB,GAAIA,EACJf,MAAOA,EACPU,IAAKA,EACLwB,QAASE,EACTxB,UAAWD,EACX4B,aAAa,IAEZ9C,MAgCP+C,EAAUjD,cAA+C,UAC3DE,SAAEA,EAAFC,aAAYA,GACZgB,GAEA,MAAQL,iBAAkBoC,EAApBzC,MAA0CA,GAAUT,aAAiBD,IACnE6C,KAAMO,GAAmB1C,EAE3B2C,EAAsBpD,eACxB,SAA6Be,GACrBZ,GAAcA,EAAaY,GAC/BmC,EAAqBnC,GACrBoC,MAEJ,CAACA,EAAgBD,EAAsB/C,KAGpCkD,EAAQC,GAAQtD,WAAeuD,QAAQrD,GAIxCsD,EAAmBxD,eACrB,SAA0BI,GACtB,OAAOJ,eAAmBqD,EAA8BjD,KAE5D,CAACiD,IAGL,OACIrD,gBAACC,GAAKE,aAAciD,GAChBpD,gBAACU,YAAiBc,GAAG,MAAMf,MAAOA,EAAOU,IAAKA,EAAK6B,aAAa,GAC3DQ,GAEJF,MAsBPG,EAAYvC,wBAA4C,WAE1DC,OADAuC,MAAEA,EAAFxD,SAASA,EAATkB,0BAAmBA,KAA8BhB,iCAGjD,MAAMK,MAAEA,GAAUT,aAAiBD,GACnC,OACIC,gBAACU,+CAAsBN,OAAOe,IAAKA,EAAKV,MAAOA,EAAOY,UAAWD,IAC5DsC,EACG1D,uBAAK2D,KAAK,eAAetC,UAAU,6BAC9BqC,GAEL,KACHxD"}
@@ -1,2 +0,0 @@
1
- "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),l=(e(a),e(require("classnames"))),n=require("../box/box.js"),o=require("../columns/columns.js"),r=require("../divider/divider.js"),i=require("../inline/inline.js"),s=require("../button/button.js"),u=require("../icons/close-icon.js"),c=require("ariakit/portal"),d=e(require("react-focus-lock")),m=require("aria-hidden"),p=require("ariakit/dialog"),h=require("./modal.module.css.js");const f=["isOpen","onDismiss","height","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement"],x=["children","button","withDivider","exceptionallySetClassName"],b=["exceptionallySetClassName","children"],g=["exceptionallySetClassName","withDivider"],E=["children"],v=a.createContext({onDismiss:void 0,height:"fitContent"});function C(e){return!(e.ownerDocument===document&&"iframe"===e.tagName.toLowerCase())}function S(e){const{onDismiss:l}=a.useContext(v),[n,o]=a.useState(!1),[r,i]=a.useState(!1);return a.useEffect((function(){r?o(!0):i(!0)}),[r]),a.createElement(s.Button,t.objectSpread2(t.objectSpread2({},e),{},{variant:"quaternary",onClick:l,icon:a.createElement(u.CloseIcon,null),tabIndex:n?0:-1}))}function j(e){let{exceptionallySetClassName:l,withDivider:o=!1}=e,i=t.objectWithoutProperties(e,g);return a.createElement(a.Fragment,null,o?a.createElement(r.Divider,null):null,a.createElement(n.Box,t.objectSpread2(t.objectSpread2({as:"footer"},i),{},{className:l,padding:"large"})))}exports.Modal=function(e){let{isOpen:o,onDismiss:r,height:i="fitContent",width:s="medium",exceptionallySetClassName:u,exceptionallySetOverlayClassName:x,autoFocus:b=!0,hideOnEscape:g=!0,hideOnInteractOutside:E=!0,children:S,portalElement:j}=e,y=t.objectWithoutProperties(e,f);const N=a.useCallback(e=>{e||null==r||r()},[r]),O=p.useDialogState({open:o,setOpen:N}),w=a.useMemo(()=>({onDismiss:r,height:i}),[r,i]),D=a.useRef(null),q=a.useRef(null),B=a.useRef(null),F=a.useCallback(e=>{var t,a;null!=(t=q.current)&&t.contains(e.target)||null==(a=B.current)||!a.contains(e.target)||(e.stopPropagation(),null==r||r())},[r]);return a.useLayoutEffect((function(){if(o&&D.current)return m.hideOthers(D.current)}),[o]),o?a.createElement(c.Portal,{portalRef:D,portalElement:j},a.createElement(n.Box,{"data-testid":"modal-overlay","data-overlay":!0,className:l(h.default.overlay,h.default[i],h.default[s],x),onPointerDown:E?F:void 0,ref:B},a.createElement(d,{autoFocus:b,whiteList:C,returnFocus:!0},a.createElement(p.Dialog,t.objectSpread2(t.objectSpread2({},y),{},{ref:q,as:n.Box,state:O,hideOnEscape:g,preventBodyScroll:!0,borderRadius:"full",background:"default",display:"flex",flexDirection:"column",overflow:"hidden",height:"expand"===i?"full":void 0,flexGrow:"expand"===i?1:0,className:[u,h.default.container],modal:!1,autoFocus:!1,autoFocusOnShow:!1,autoFocusOnHide:!1,portal:!1,backdrop:!1,hideOnInteractOutside:!1}),a.createElement(v.Provider,{value:w},S))))):null},exports.ModalActions=function(e){let{children:l}=e,n=t.objectWithoutProperties(e,E);return a.createElement(j,t.objectSpread2({},n),a.createElement(i.Inline,{align:"right",space:"large"},l))},exports.ModalBody=function(e){let{exceptionallySetClassName:l,children:o}=e,r=t.objectWithoutProperties(e,b);const{height:i}=a.useContext(v);return a.createElement(n.Box,t.objectSpread2(t.objectSpread2({},r),{},{className:l,flexGrow:"expand"===i?1:0,height:"expand"===i?"full":void 0,overflow:"auto"}),a.createElement(n.Box,{padding:"large",paddingBottom:"xxlarge"},o))},exports.ModalCloseButton=S,exports.ModalFooter=j,exports.ModalHeader=function(e){let{children:l,button:i=!0,withDivider:s=!1,exceptionallySetClassName:u}=e,c=t.objectWithoutProperties(e,x);return a.createElement(a.Fragment,null,a.createElement(n.Box,t.objectSpread2(t.objectSpread2({},c),{},{as:"header",paddingLeft:"large",paddingRight:!1===i||null===i?"large":"small",paddingY:"small",className:u}),a.createElement(o.Columns,{space:"large",alignY:"center"},a.createElement(o.Column,{width:"auto"},l),!1===i||null===i?a.createElement("div",{className:h.default.headerContent}):a.createElement(o.Column,{width:"content",exceptionallySetClassName:h.default.buttonContainer,"data-testid":"button-container"},"boolean"==typeof i?a.createElement(S,{"aria-label":"Close modal",autoFocus:!1}):i))),s?a.createElement(r.Divider,null):null)};
2
- //# sourceMappingURL=modal.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"modal.js","sources":["../../../src/new-components/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport FocusLock from 'react-focus-lock'\nimport { hideOthers } from 'aria-hidden'\n\nimport { Dialog, DialogOptions, useDialogState } from 'ariakit/dialog'\nimport { Portal, PortalOptions } from 'ariakit/portal'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { Button, ButtonProps } from '../button'\n\nimport styles from './modal.module.css'\n\ntype ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n onDismiss?(this: void): void\n height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n onDismiss: undefined,\n height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n 'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport type ModalProps = DivProps & {\n /**\n * The content of the modal.\n */\n children: React.ReactNode\n /**\n * Whether the modal is open and visible or not.\n */\n isOpen: boolean\n /**\n * Called when the user triggers closing the modal.\n */\n onDismiss?(): void\n /**\n * A descriptive setting for how wide the modal should aim to be, depending on how much space\n * it has on screen.\n * @default 'medium'\n */\n width?: ModalWidth\n /**\n * A descriptive setting for how tall the modal should aim to be.\n *\n * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n * padding above and below.\n * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n *\n * In either case, if content does not fit, the content of the main body is set to scroll\n * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n * viewport boundaries.\n *\n * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n * the inner layout to ensure scroll, or whatever other strategy you may want.\n */\n height?: ModalHeightMode\n /**\n * Whether to set or not the focus initially to the first focusable element inside the modal.\n */\n autoFocus?: boolean\n /**\n * Controls if the modal is dismissed when pressing \"Escape\".\n */\n hideOnEscape?: DialogOptions['hideOnEscape']\n /**\n * Controls if the modal is dismissed when clicking outside the modal body, on the overlay.\n */\n hideOnInteractOutside?: DialogOptions['hideOnInteractOutside']\n /**\n * An escape hatch in case you need to provide a custom class name to the container element.\n */\n exceptionallySetClassName?: string\n /**\n * An escape hatch in case you need to provide a custom class name to the overlay element.\n */\n exceptionallySetOverlayClassName?: string\n /** Defines a string value that labels the current modal for assistive technologies. */\n 'aria-label'?: string\n /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n 'aria-labelledby'?: string\n /**\n * An HTML element or a memoized callback function that returns an HTML element to be used as\n * the portal element. By default, the portal element will be a `div` element appended to the\n * `document.body`.\n *\n * @default HTMLDivElement\n *\n * @example\n * const [portal, setPortal] = useState(null);\n * <Portal portalElement={portal} />;\n * <div ref={setPortal} />;\n *\n * @example\n * const getPortalElement = useCallback(() => {\n * const div = document.createElement(\"div\");\n * const portalRoot = document.getElementById(\"portal-root\");\n * portalRoot.appendChild(div);\n * return div;\n * }, []);\n * <Portal portalElement={getPortalElement} />;\n */\n portalElement?: PortalOptions['portalElement']\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n */\nexport function Modal({\n isOpen,\n onDismiss,\n height = 'fitContent',\n width = 'medium',\n exceptionallySetClassName,\n exceptionallySetOverlayClassName,\n autoFocus = true,\n hideOnEscape = true,\n hideOnInteractOutside = true,\n children,\n portalElement,\n ...props\n}: ModalProps) {\n const setOpen = React.useCallback(\n (visible: boolean) => {\n if (!visible) {\n onDismiss?.()\n }\n },\n [onDismiss],\n )\n const state = useDialogState({ open: isOpen, setOpen })\n\n const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n onDismiss,\n height,\n ])\n\n const portalRef = React.useRef<HTMLElement | null>(null)\n const dialogRef = React.useRef<HTMLDivElement | null>(null)\n const backdropRef = React.useRef<HTMLDivElement | null>(null)\n const handleBackdropClick = React.useCallback(\n (event: React.MouseEvent) => {\n if (\n // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,\n // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog\n !dialogRef.current?.contains(event.target as Node) &&\n // Events fired from other portals will bubble up to the backdrop, even if it isn't a child in the DOM\n backdropRef.current?.contains(event.target as Node)\n ) {\n event.stopPropagation()\n onDismiss?.()\n }\n },\n [onDismiss],\n )\n\n React.useLayoutEffect(\n function disableAccessibilityTreeOutside() {\n if (!isOpen || !portalRef.current) {\n return\n }\n\n return hideOthers(portalRef.current)\n },\n [isOpen],\n )\n\n if (!isOpen) {\n return null\n }\n\n return (\n <Portal portalRef={portalRef} portalElement={portalElement}>\n <Box\n data-testid=\"modal-overlay\"\n data-overlay\n className={classNames(\n styles.overlay,\n styles[height],\n styles[width],\n exceptionallySetOverlayClassName,\n )}\n /**\n * We're using `onPointerDown` instead of `onClick` to prevent\n * the modal from closing when the click starts inside the modal\n * and ends on the backdrop.\n */\n onPointerDown={hideOnInteractOutside ? handleBackdropClick : undefined}\n ref={backdropRef}\n >\n <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n <Dialog\n {...props}\n ref={dialogRef}\n as={Box}\n state={state}\n hideOnEscape={hideOnEscape}\n preventBodyScroll\n borderRadius=\"full\"\n background=\"default\"\n display=\"flex\"\n flexDirection=\"column\"\n overflow=\"hidden\"\n height={height === 'expand' ? 'full' : undefined}\n flexGrow={height === 'expand' ? 1 : 0}\n className={[exceptionallySetClassName, styles.container]}\n // Disable focus lock as we set up our own using ReactFocusLock\n modal={false}\n autoFocus={false}\n autoFocusOnShow={false}\n autoFocusOnHide={false}\n // Disable portal and backdrop as we control their markup\n portal={false}\n backdrop={false}\n hideOnInteractOutside={false}\n >\n <ModalContext.Provider value={contextValue}>\n {children}\n </ModalContext.Provider>\n </Dialog>\n </FocusLock>\n </Box>\n </Portal>\n )\n}\n\n//\n// ModalCloseButton\n//\n\nexport type ModalCloseButtonProps = Omit<\n ButtonProps,\n | 'type'\n | 'children'\n | 'variant'\n | 'icon'\n | 'startIcon'\n | 'endIcon'\n | 'disabled'\n | 'loading'\n | 'tabIndex'\n | 'width'\n | 'align'\n> & {\n /**\n * The descriptive label of the button.\n */\n 'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see ModalHeader\n */\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n const { onDismiss } = React.useContext(ModalContext)\n const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n const [isMounted, setIsMounted] = React.useState(false)\n\n React.useEffect(\n function skipAutoFocus() {\n if (isMounted) {\n setIncludeInTabOrder(true)\n } else {\n setIsMounted(true)\n }\n },\n [isMounted],\n )\n\n return (\n <Button\n {...props}\n variant=\"quaternary\"\n onClick={onDismiss}\n icon={<CloseIcon />}\n tabIndex={includeInTabOrder ? 0 : -1}\n />\n )\n}\n\n//\n// ModalHeader\n//\n\nexport type ModalHeaderProps = DivProps & {\n /**\n * The content of the header.\n */\n children: React.ReactNode\n /**\n * Allows to provide a custom button element, or to omit the close button if set to false.\n * @see ModalCloseButton\n */\n button?: React.ReactNode | boolean\n /**\n * Whether to render a divider line below the header.\n * @default false\n */\n withDivider?: boolean\n /**\n * A escape hatch in case you need to provide a custom class name to the container element.\n */\n exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see Modal\n * @see ModalFooter\n * @see ModalBody\n */\nexport function ModalHeader({\n children,\n button = true,\n withDivider = false,\n exceptionallySetClassName,\n ...props\n}: ModalHeaderProps) {\n return (\n <>\n <Box\n {...props}\n as=\"header\"\n paddingLeft=\"large\"\n paddingRight={button === false || button === null ? 'large' : 'small'}\n paddingY=\"small\"\n className={exceptionallySetClassName}\n >\n <Columns space=\"large\" alignY=\"center\">\n <Column width=\"auto\">{children}</Column>\n {button === false || button === null ? (\n <div className={styles.headerContent} />\n ) : (\n <Column\n width=\"content\"\n exceptionallySetClassName={styles.buttonContainer}\n data-testid=\"button-container\"\n >\n {typeof button === 'boolean' ? (\n <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n ) : (\n button\n )}\n </Column>\n )}\n </Columns>\n </Box>\n {withDivider ? <Divider /> : null}\n </>\n )\n}\n\n//\n// ModalBody\n//\n\nexport type ModalBodyProps = DivProps & {\n /**\n * The content of the modal body.\n */\n children: React.ReactNode\n /**\n * A escape hatch in case you need to provide a custom class name to the container element.\n */\n exceptionallySetClassName?: string\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalFooter\n */\nexport function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps) {\n const { height } = React.useContext(ModalContext)\n return (\n <Box\n {...props}\n className={exceptionallySetClassName}\n flexGrow={height === 'expand' ? 1 : 0}\n height={height === 'expand' ? 'full' : undefined}\n overflow=\"auto\"\n >\n <Box padding=\"large\" paddingBottom=\"xxlarge\">\n {children}\n </Box>\n </Box>\n )\n}\n\n//\n// ModalFooter\n//\n\nexport type ModalFooterProps = DivProps & {\n /**\n * The contant of the modal footer.\n */\n children: React.ReactNode\n /**\n * Whether to render a divider line below the footer.\n * @default false\n */\n withDivider?: boolean\n /**\n * A escape hatch in case you need to provide a custom class name to the container element.\n */\n exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalBody\n */\nexport function ModalFooter({\n exceptionallySetClassName,\n withDivider = false,\n ...props\n}: ModalFooterProps) {\n return (\n <>\n {withDivider ? <Divider /> : null}\n <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n </>\n )\n}\n\n//\n// ModalActions\n//\n\nexport type ModalActionsProps = ModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalActionsProps) {\n return (\n <ModalFooter {...props}>\n <Inline align=\"right\" space=\"large\">\n {children}\n </Inline>\n </ModalFooter>\n )\n}\n"],"names":["ModalContext","React","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","ModalCloseButton","props","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","Button","variant","onClick","icon","CloseIcon","tabIndex","ModalFooter","exceptionallySetClassName","withDivider","Divider","Box","as","className","padding","isOpen","width","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","setOpen","visible","state","useDialogState","open","contextValue","portalRef","dialogRef","backdropRef","handleBackdropClick","event","current","_dialogRef$current","contains","target","_backdropRef$current","stopPropagation","hideOthers","Portal","classNames","styles","overlay","onPointerDown","ref","FocusLock","whiteList","returnFocus","Dialog","preventBodyScroll","borderRadius","background","display","flexDirection","overflow","flexGrow","container","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","Provider","value","Inline","align","space","paddingBottom","button","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","headerContent","buttonContainer"],"mappings":"+7BA6BMA,EAAeC,gBAAuC,CACxDC,eAAWC,EACXC,OAAQ,eA8FZ,SAASC,EAAmBC,GACxB,QAASA,EAAQC,gBAAkBC,UAA8C,WAAlCF,EAAQG,QAAQC,wBAgKnDC,EAAiBC,GAC7B,MAAMV,UAAEA,GAAcD,aAAiBD,IAChCa,EAAmBC,GAAwBb,YAAe,IAC1Dc,EAAWC,GAAgBf,YAAe,GAajD,OAXAA,aACI,WACQc,EACAD,GAAqB,GAErBE,GAAa,KAGrB,CAACD,IAIDd,gBAACgB,4CACOL,OACJM,QAAQ,aACRC,QAASjB,EACTkB,KAAMnB,gBAACoB,kBACPC,SAAUT,EAAoB,GAAK,cAqJ/BU,SAAYC,0BACxBA,EADwBC,YAExBA,GAAc,KACXb,iCAEH,OACIX,gCACKwB,EAAcxB,gBAACyB,gBAAa,KAC7BzB,gBAAC0B,uCAAIC,GAAG,UAAahB,OAAOiB,UAAWL,EAA2BM,QAAQ,0CAvUhEC,OAClBA,EADkB7B,UAElBA,EAFkBE,OAGlBA,EAAS,aAHS4B,MAIlBA,EAAQ,SAJUR,0BAKlBA,EALkBS,iCAMlBA,EANkBC,UAOlBA,GAAY,EAPMC,aAQlBA,GAAe,EARGC,sBASlBA,GAAwB,EATNC,SAUlBA,EAVkBC,cAWlBA,KACG1B,iCAEH,MAAM2B,EAAUtC,cACXuC,IACQA,SACDtC,GAAAA,KAGR,CAACA,IAECuC,EAAQC,iBAAe,CAAEC,KAAMZ,EAAQQ,QAAAA,IAEvCK,EAAkC3C,UAAc,MAASC,UAAAA,EAAWE,OAAAA,IAAW,CACjFF,EACAE,IAGEyC,EAAY5C,SAAiC,MAC7C6C,EAAY7C,SAAoC,MAChD8C,EAAc9C,SAAoC,MAClD+C,EAAsB/C,cACvBgD,qBAIQH,EAAUI,UAAVC,EAAmBC,SAASH,EAAMI,kBAEnCN,EAAYG,WAAZI,EAAqBF,SAASH,EAAMI,UAEpCJ,EAAMM,wBACNrD,GAAAA,MAGR,CAACA,IAcL,OAXAD,mBACI,WACI,GAAK8B,GAAWc,EAAUK,QAI1B,OAAOM,aAAWX,EAAUK,WAEhC,CAACnB,IAGAA,EAKD9B,gBAACwD,UAAOZ,UAAWA,EAAWP,cAAeA,GACzCrC,gBAAC0B,qBACe,kCAEZE,UAAW6B,EACPC,UAAOC,QACPD,UAAOvD,GACPuD,UAAO3B,GACPC,GAOJ4B,cAAezB,EAAwBY,OAAsB7C,EAC7D2D,IAAKf,GAEL9C,gBAAC8D,GAAU7B,UAAWA,EAAW8B,UAAW3D,EAAoB4D,aAAa,GACzEhE,gBAACiE,4CACOtD,OACJkD,IAAKhB,EACLlB,GAAID,MACJc,MAAOA,EACPN,aAAcA,EACdgC,qBACAC,aAAa,OACbC,WAAW,UACXC,QAAQ,OACRC,cAAc,SACdC,SAAS,SACTpE,OAAmB,WAAXA,EAAsB,YAASD,EACvCsE,SAAqB,WAAXrE,EAAsB,EAAI,EACpCyB,UAAW,CAACL,EAA2BmC,UAAOe,WAE9CC,OAAO,EACPzC,WAAW,EACX0C,iBAAiB,EACjBC,iBAAiB,EAEjBC,QAAQ,EACRC,UAAU,EACV3C,uBAAuB,IAEvBnC,gBAACD,EAAagF,UAASC,MAAOrC,GACzBP,OAjDd,2CA0RcA,SAAEA,KAAazB,iCACxC,OACIX,gBAACsB,qBAAgBX,GACbX,gBAACiF,UAAOC,MAAM,QAAQC,MAAM,SACvB/C,uCAvESb,0BAAEA,EAAFa,SAA6BA,KAAazB,iCAChE,MAAMR,OAAEA,GAAWH,aAAiBD,GACpC,OACIC,gBAAC0B,yCACOf,OACJiB,UAAWL,EACXiD,SAAqB,WAAXrE,EAAsB,EAAI,EACpCA,OAAmB,WAAXA,EAAsB,YAASD,EACvCqE,SAAS,SAETvE,gBAAC0B,OAAIG,QAAQ,QAAQuD,cAAc,WAC9BhD,0FA/EWA,SACxBA,EADwBiD,OAExBA,GAAS,EAFe7D,YAGxBA,GAAc,EAHUD,0BAIxBA,KACGZ,iCAEH,OACIX,gCACIA,gBAAC0B,yCACOf,OACJgB,GAAG,SACH2D,YAAY,QACZC,cAAyB,IAAXF,GAA+B,OAAXA,EAAkB,QAAU,QAC9DG,SAAS,QACT5D,UAAWL,IAEXvB,gBAACyF,WAAQN,MAAM,QAAQO,OAAO,UAC1B1F,gBAAC2F,UAAO5D,MAAM,QAAQK,IACV,IAAXiD,GAA+B,OAAXA,EACjBrF,uBAAK4B,UAAW8B,UAAOkC,gBAEvB5F,gBAAC2F,UACG5D,MAAM,UACNR,0BAA2BmC,UAAOmC,8BACtB,oBAEO,kBAAXR,EACJrF,gBAACU,gBAA4B,cAAcuB,WAAW,IAEtDoD,KAMnB7D,EAAcxB,gBAACyB,gBAAa"}
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../responsive-props.js"),r=require("../box/box.js"),l=require("../columns/columns.js"),n=require("../icons/alert-icon.js"),o=require("./notice.module.css.js");exports.Notice=function({id:s,children:a,tone:i}){return e.createElement(r.Box,{id:s,role:"alert","aria-live":"polite",className:[o.default.container,t.getClassNames(o.default,"tone",i)]},e.createElement(l.Columns,{space:"small",alignY:"top"},e.createElement(l.Column,{width:"content"},e.createElement(n.AlertIcon,{tone:i})),e.createElement(l.Column,null,e.createElement(r.Box,{paddingY:"xsmall"},a))))};
2
- //# sourceMappingURL=notice.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"notice.js","sources":["../../../src/new-components/notice/notice.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../responsive-props'\nimport { Box } from '../box'\nimport { Columns, Column } from '../columns'\nimport { AlertIcon } from '../icons/alert-icon'\n\nimport type { AlertTone } from '../common-types'\n\nimport styles from './notice.module.css'\n\ntype NoticeProps = {\n id?: string\n children: React.ReactNode\n tone: AlertTone\n}\n\nfunction Notice({ id, children, tone }: NoticeProps) {\n return (\n <Box\n id={id}\n role=\"alert\"\n aria-live=\"polite\"\n className={[styles.container, getClassNames(styles, 'tone', tone)]}\n >\n <Columns space=\"small\" alignY=\"top\">\n <Column width=\"content\">\n <AlertIcon tone={tone} />\n </Column>\n <Column>\n <Box paddingY=\"xsmall\">{children}</Box>\n </Column>\n </Columns>\n </Box>\n )\n}\n\nexport { Notice }\nexport type { NoticeProps }\n"],"names":["id","children","tone","React","Box","role","className","styles","container","getClassNames","Columns","space","alignY","Column","width","AlertIcon","paddingY"],"mappings":"oRAgBA,UAAgBA,GAAEA,EAAFC,SAAMA,EAANC,KAAgBA,IAC5B,OACIC,gBAACC,OACGJ,GAAIA,EACJK,KAAK,oBACK,SACVC,UAAW,CAACC,UAAOC,UAAWC,gBAAcF,UAAQ,OAAQL,KAE5DC,gBAACO,WAAQC,MAAM,QAAQC,OAAO,OAC1BT,gBAACU,UAAOC,MAAM,WACVX,gBAACY,aAAUb,KAAMA,KAErBC,gBAACU,cACGV,gBAACC,OAAIY,SAAS,UAAUf"}
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),a=require("../box/box.js"),t=require("../tooltip/tooltip.js"),i=require("../common-helpers.js"),s=require("ariakit-react-utils"),l=require("../base-field/base-field.js"),o=require("../icons/password-visible-icon.js"),d=require("../icons/password-hidden-icon.js"),n=require("./password-field.module.css.js"),u=require("../text-field/text-field.module.css.js");const c=["variant","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","togglePasswordLabel","hidden","aria-describedby"];exports.PasswordField=r.forwardRef((function(b,p){let{variant:f="default",label:m,secondaryLabel:x,auxiliaryLabel:j,hint:y,message:h,tone:g,maxWidth:q,togglePasswordLabel:w="Toggle password visibility",hidden:v,"aria-describedby":L}=b,P=e.objectWithoutProperties(b,c);const E=i.useId(P.id),W=r.useRef(null),I=s.useForkRef(W,p),[S,_]=r.useState(!1);function k(){var e;_(e=>!e),null==(e=W.current)||e.focus()}return r.createElement(l.BaseField,{variant:f,id:E,label:m,secondaryLabel:x,auxiliaryLabel:j,hint:y,message:h,tone:g,maxWidth:q,hidden:v,"aria-describedby":L},i=>r.createElement(a.Box,{display:"flex",alignItems:"center",className:[n.default.inputWrapper,u.default.inputWrapper,"error"===g?u.default.error:null,"bordered"===f?u.default.bordered:null]},r.createElement("input",e.objectSpread2(e.objectSpread2(e.objectSpread2({},P),i),{},{ref:I,type:S?"text":"password"})),r.createElement(t.Tooltip,{content:w},r.createElement("button",{type:"button",onClick:k,"aria-label":w,tabIndex:-1},r.createElement(S?o.PasswordVisibleIcon:d.PasswordHiddenIcon,{"aria-hidden":!0})))))}));
2
- //# sourceMappingURL=password-field.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"password-field.js","sources":["../../../src/new-components/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'ariakit-react-utils'\nimport { Tooltip } from '../tooltip'\nimport { BaseField, BaseFieldVariantProps } from '../base-field'\nimport { Box } from '../box'\nimport { useId } from '../common-helpers'\n\nimport { PasswordVisibleIcon } from '../icons/password-visible-icon'\nimport { PasswordHiddenIcon } from '../icons/password-hidden-icon'\n\nimport styles from './password-field.module.css'\nimport textFieldStyles from '../text-field/text-field.module.css'\n\nimport type { TextFieldProps } from '../text-field'\n\ntype PasswordFieldProps = Omit<TextFieldProps, 'type'> &\n BaseFieldVariantProps & {\n togglePasswordLabel?: string\n }\n\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n {\n variant = 'default',\n label,\n secondaryLabel,\n auxiliaryLabel,\n hint,\n message,\n tone,\n maxWidth,\n togglePasswordLabel = 'Toggle password visibility',\n hidden,\n 'aria-describedby': ariaDescribedBy,\n ...props\n },\n ref,\n) {\n const id = useId(props.id)\n const internalRef = React.useRef<HTMLInputElement>(null)\n const inputRef = useForkRef(internalRef, ref)\n\n const [isPasswordVisible, setPasswordVisible] = React.useState(false)\n\n function togglePasswordVisibility() {\n setPasswordVisible((v) => !v)\n internalRef.current?.focus()\n }\n\n return (\n <BaseField\n variant={variant}\n id={id}\n label={label}\n secondaryLabel={secondaryLabel}\n auxiliaryLabel={auxiliaryLabel}\n hint={hint}\n message={message}\n tone={tone}\n maxWidth={maxWidth}\n hidden={hidden}\n aria-describedby={ariaDescribedBy}\n >\n {(extraProps) => (\n <Box\n display=\"flex\"\n alignItems=\"center\"\n className={[\n styles.inputWrapper,\n textFieldStyles.inputWrapper,\n tone === 'error' ? textFieldStyles.error : null,\n variant === 'bordered' ? textFieldStyles.bordered : null,\n ]}\n >\n <input\n {...props}\n {...extraProps}\n ref={inputRef}\n type={isPasswordVisible ? 'text' : 'password'}\n />\n <Tooltip content={togglePasswordLabel}>\n <button\n type=\"button\"\n onClick={togglePasswordVisibility}\n aria-label={togglePasswordLabel}\n tabIndex={-1}\n >\n {isPasswordVisible ? (\n <PasswordVisibleIcon aria-hidden />\n ) : (\n <PasswordHiddenIcon aria-hidden />\n )}\n </button>\n </Tooltip>\n </Box>\n )}\n </BaseField>\n )\n})\n\nexport { PasswordField }\nexport type { PasswordFieldProps }\n"],"names":["React","ref","variant","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","togglePasswordLabel","hidden","aria-describedby","ariaDescribedBy","props","id","useId","internalRef","inputRef","useForkRef","isPasswordVisible","setPasswordVisible","togglePasswordVisibility","v","current","focus","BaseField","extraProps","Box","display","alignItems","className","styles","inputWrapper","textFieldStyles","error","bordered","type","Tooltip","content","onClick","tabIndex","PasswordVisibleIcon","PasswordHiddenIcon"],"mappings":"oqBAoBsBA,cAAuD,WAezEC,OAdAC,QACIA,EAAU,UADdC,MAEIA,EAFJC,eAGIA,EAHJC,eAIIA,EAJJC,KAKIA,EALJC,QAMIA,EANJC,KAOIA,EAPJC,SAQIA,EARJC,oBASIA,EAAsB,6BAT1BC,OAUIA,EACAC,mBAAoBC,KACjBC,iCAIP,MAAMC,EAAKC,QAAMF,EAAMC,IACjBE,EAAcjB,SAA+B,MAC7CkB,EAAWC,aAAWF,EAAahB,IAElCmB,EAAmBC,GAAsBrB,YAAe,GAE/D,SAASsB,UACLD,EAAoBE,IAAOA,YAC3BN,EAAYO,YAASC,QAGzB,OACIzB,gBAAC0B,aACGxB,QAASA,EACTa,GAAIA,EACJZ,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,QAASA,EACTC,KAAMA,EACNC,SAAUA,EACVE,OAAQA,qBACUE,GAEhBc,GACE3B,gBAAC4B,OACGC,QAAQ,OACRC,WAAW,SACXC,UAAW,CACPC,UAAOC,aACPC,UAAgBD,aACP,UAATzB,EAAmB0B,UAAgBC,MAAQ,KAC/B,aAAZjC,EAAyBgC,UAAgBE,SAAW,OAGxDpC,2EACQc,GACAa,OACJ1B,IAAKiB,EACLmB,KAAMjB,EAAoB,OAAS,cAEvCpB,gBAACsC,WAAQC,QAAS7B,GACdV,0BACIqC,KAAK,SACLG,QAASlB,eACGZ,EACZ+B,UAAW,GAGPzC,gBADHoB,EACIsB,sBAEAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"responsive-props.js","sources":["../../src/new-components/responsive-props.ts"],"sourcesContent":["type ResponsiveBreakpoints = 'mobile' | 'tablet' | 'desktop'\n\ntype Atom = string | number | boolean\n\n/**\n * A responsive prop supports receiving values of its given base type, or an object mapping a\n * responsive breakpoint name to a value from the prop's base type.\n *\n * Some examples:\n *\n * - `align={{ mobile: 'left', tablet: 'center', desktop: 'right' }}`\n */\ntype ResponsiveProp<AtomType extends Atom> =\n | AtomType\n | Readonly<{ [key in ResponsiveBreakpoints]?: AtomType }>\n\nconst DEBUG = process.env.NODE_ENV === 'development'\n\n/**\n * Builds a css module class name for a given prop + prop-value combination.\n *\n * We have a convention of building the internal utility-based class names system in a way that\n * resembles the prop for which it is used and the value of the prop. For instance, in a component\n * with a prop `width` with possible values `narrow` and `wide`, we encode the styles for each of\n * these alternatives in the class-names `.width-narrow` and `.width-wide`.\n *\n * Furthermore, this helper is aware of responsive prop values. For instance, if you provide the\n * `width` prop above with the value `['narrow', 'wide']` this returns `['narrow', 'tablet-wide']`.\n * That is, it returns an array of class names, following the same convention above, but also\n * prefixing by the viewport width variant (`tablet-` or `desktop-`).\n *\n * @param styles the class names mapping imported from a css module\n * @param property the prop name\n * @param value the given prop's value\n */\nfunction getClassNames(\n styles: Record<string, string>,\n property: string,\n value: ResponsiveProp<string> | null | undefined,\n): Array<string | undefined> | null {\n if (!value) {\n return null\n }\n\n const classList: Array<string | undefined> = []\n\n if (typeof value === 'string') {\n classList.push(styles[`${property}-${value}`])\n } else {\n if (value.mobile) classList.push(styles[`${property}-${value.mobile}`])\n if (value.tablet) classList.push(styles[`tablet-${property}-${value.tablet}`])\n if (value.desktop) classList.push(styles[`desktop-${property}-${value.desktop}`])\n }\n\n if (DEBUG && !classList.every(Boolean)) {\n // eslint-disable-next-line no-console\n console.warn('Not all generated class names were found', { property, value, classList })\n }\n\n return classList\n}\n\n/**\n * A mapping over a responsive prop value.\n *\n * Since response values can be an object but also a scalar value, this helper makes it easier to\n * to map the values when it's an object but keeps it consistent for the case when it is a scalar\n * value as well.\n *\n * @param fromValue the responsive prop value\n * @param mapper the mapping function\n */\nfunction mapResponsiveProp<From extends Atom, To extends Atom>(\n fromValue: ResponsiveProp<From> | undefined,\n mapper: (from: From) => To,\n): ResponsiveProp<To> | undefined {\n if (!fromValue) {\n return undefined\n }\n\n if (typeof fromValue !== 'object') {\n return mapper(fromValue)\n }\n\n return {\n mobile: fromValue.mobile ? mapper(fromValue.mobile) : undefined,\n tablet: fromValue.tablet ? mapper(fromValue.tablet) : undefined,\n desktop: fromValue.desktop ? mapper(fromValue.desktop) : undefined,\n }\n}\n\nexport type { ResponsiveProp, ResponsiveBreakpoints }\nexport { getClassNames, mapResponsiveProp }\n"],"names":["styles","property","value","classList","push","mobile","tablet","desktop","fromValue","mapper","undefined"],"mappings":"0FAmCA,SACIA,EACAC,EACAC,GAEA,IAAKA,EACD,OAAO,KAGX,MAAMC,EAAuC,GAe7C,MAbqB,iBAAVD,EACPC,EAAUC,KAAKJ,EAAUC,MAAYC,KAEjCA,EAAMG,QAAQF,EAAUC,KAAKJ,EAAUC,MAAYC,EAAMG,SACzDH,EAAMI,QAAQH,EAAUC,KAAKJ,YAAiBC,MAAYC,EAAMI,SAChEJ,EAAMK,SAASJ,EAAUC,KAAKJ,aAAkBC,MAAYC,EAAMK,WAQnEJ,6BAaX,SACIK,EACAC,GAEA,GAAKD,EAIL,MAAyB,iBAAdA,EACAC,EAAOD,GAGX,CACHH,OAAQG,EAAUH,OAASI,EAAOD,EAAUH,aAAUK,EACtDJ,OAAQE,EAAUF,OAASG,EAAOD,EAAUF,aAAUI,EACtDH,QAASC,EAAUD,QAAUE,EAAOD,EAAUD,cAAWG"}
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),a=require("../box/box.js"),t=require("../base-field/base-field.js"),l=require("./select-field.module.css.js");const i=["variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","children","hidden","aria-describedby"];function d(a){return r.createElement("svg",e.objectSpread2({width:"16",height:"16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a),r.createElement("path",{d:"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z",fill:"currentColor"}))}exports.SelectField=r.forwardRef((function(n,s){let{variant:o="default",id:c,label:b,secondaryLabel:u,auxiliaryLabel:h,hint:p,message:f,tone:m,maxWidth:x,children:j,hidden:y,"aria-describedby":g}=n,v=e.objectWithoutProperties(n,i);return r.createElement(t.BaseField,{variant:o,id:c,label:b,secondaryLabel:u,auxiliaryLabel:h,hint:p,message:f,tone:m,maxWidth:x,hidden:y,"aria-describedby":g},t=>r.createElement(a.Box,{"data-testid":"select-wrapper",className:[l.default.selectWrapper,"error"===m?l.default.error:null,"bordered"===o?l.default.bordered:null]},r.createElement("select",e.objectSpread2(e.objectSpread2(e.objectSpread2({},v),t),{},{ref:s}),j),r.createElement(d,{"aria-hidden":!0})))}));
2
- //# sourceMappingURL=select-field.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"select-field.js","sources":["../../../src/new-components/select-field/select-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './select-field.module.css'\n\ntype SelectFieldProps = FieldComponentProps<HTMLSelectElement> & BaseFieldVariantProps\n\nconst SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(function SelectField(\n {\n variant = 'default',\n id,\n label,\n secondaryLabel,\n auxiliaryLabel,\n hint,\n message,\n tone,\n maxWidth,\n children,\n hidden,\n 'aria-describedby': ariaDescribedBy,\n ...props\n },\n ref,\n) {\n return (\n <BaseField\n variant={variant}\n id={id}\n label={label}\n secondaryLabel={secondaryLabel}\n auxiliaryLabel={auxiliaryLabel}\n hint={hint}\n message={message}\n tone={tone}\n maxWidth={maxWidth}\n hidden={hidden}\n aria-describedby={ariaDescribedBy}\n >\n {(extraProps) => (\n <Box\n data-testid=\"select-wrapper\"\n className={[\n styles.selectWrapper,\n tone === 'error' ? styles.error : null,\n variant === 'bordered' ? styles.bordered : null,\n ]}\n >\n <select {...props} {...extraProps} ref={ref}>\n {children}\n </select>\n <SelectChevron aria-hidden />\n </Box>\n )}\n </BaseField>\n )\n})\n\nfunction SelectChevron(props: JSX.IntrinsicElements['svg']) {\n return (\n <svg width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <path\n d=\"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nexport { SelectField }\nexport type { SelectFieldProps }\n"],"names":["SelectChevron","props","React","width","height","fill","xmlns","d","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","children","hidden","aria-describedby","ariaDescribedBy","BaseField","extraProps","Box","className","styles","selectWrapper","error","bordered"],"mappings":"+YA0DA,SAASA,EAAcC,GACnB,OACIC,uCAAKC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,MAAM,8BAAiCL,GAC3EC,wBACIK,EAAE,0GACFF,KAAK,sCAxDDH,cAAsD,WAgBtEM,OAfAC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,eAIIA,EAJJC,eAKIA,EALJC,KAMIA,EANJC,QAOIA,EAPJC,KAQIA,EARJC,SASIA,EATJC,SAUIA,EAVJC,OAWIA,EACAC,mBAAoBC,KACjBpB,iCAIP,OACIC,gBAACoB,aACGb,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,QAASA,EACTC,KAAMA,EACNC,SAAUA,EACVE,OAAQA,qBACUE,GAEhBE,GACErB,gBAACsB,qBACe,iBACZC,UAAW,CACPC,UAAOC,cACE,UAATX,EAAmBU,UAAOE,MAAQ,KACtB,aAAZnB,EAAyBiB,UAAOG,SAAW,OAG/C3B,4EAAYD,GAAWsB,OAAYf,IAAKA,IACnCU,GAELhB,gBAACF"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"spinner.js","sources":["../../../src/new-components/spinner/spinner.tsx"],"sourcesContent":["import * as React from 'react'\nimport styles from './spinner.module.css'\n\nfunction Spinner({ size = 24 }: { size?: number }) {\n return (\n <svg\n aria-hidden\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n className={styles.svg}\n data-chromatic=\"ignore\"\n >\n <g fill=\"none\" fillRule=\"nonzero\">\n <path\n className={styles.tint}\n d=\"M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z\"\n />\n <path\n className={styles.fill}\n d=\"M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z\"\n />\n </g>\n </svg>\n )\n}\n\nexport { Spinner }\n"],"names":["size","React","width","height","viewBox","className","styles","svg","fill","fillRule","tint","d"],"mappings":"gJAGA,UAAiBA,KAAEA,EAAO,KACtB,OACIC,wCAEIC,MAAOF,EACPG,OAAQH,EACRI,QAAQ,YACRC,UAAWC,UAAOC,qBACH,UAEfN,qBAAGO,KAAK,OAAOC,SAAS,WACpBR,wBACII,UAAWC,UAAOI,KAClBC,EAAE,iJAENV,wBACII,UAAWC,UAAOE,KAClBG,EAAE"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"stack.js","sources":["../../../src/new-components/stack/stack.tsx"],"sourcesContent":["import * as React from 'react'\nimport flattenChildren from 'react-keyed-flatten-children'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { mapResponsiveProp } from '../responsive-props'\nimport { Box } from '../box'\nimport { Divider } from '../divider'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { DividerWeight, Space } from '../common-types'\nimport type { BoxProps, ReusableBoxProps } from '../box'\n\ntype Align = 'start' | 'center' | 'end'\n\ninterface StackProps extends ReusableBoxProps {\n /** Space between items */\n space?: ResponsiveProp<Space>\n /** Align items horizontally */\n align?: ResponsiveProp<Align>\n /** The weight of the dividers to add. Defaults to 'none', which means no dividers are added */\n dividers?: DividerWeight\n}\n\nconst Stack = polymorphicComponent<'div', StackProps>(function Stack(\n {\n as,\n space,\n align,\n dividers = 'none',\n width = 'full',\n children,\n exceptionallySetClassName,\n ...props\n },\n ref,\n) {\n const alignItems: BoxProps['alignItems'] =\n align === undefined\n ? undefined\n : mapResponsiveProp(align, (align) =>\n align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center',\n )\n\n return (\n <Box\n {...props}\n display=\"flex\"\n flexDirection=\"column\"\n width={width}\n alignItems={alignItems}\n gap={space}\n as={as}\n className={exceptionallySetClassName}\n ref={ref}\n >\n {dividers !== 'none'\n ? React.Children.map(flattenChildren(children), (child, index) =>\n index > 0 ? (\n <>\n <Divider weight={dividers} />\n {child}\n </>\n ) : (\n child\n ),\n )\n : children}\n </Box>\n )\n})\n\nexport type { StackProps }\nexport { Stack }\n"],"names":["polymorphicComponent","ref","as","space","align","dividers","width","children","exceptionallySetClassName","props","alignItems","undefined","mapResponsiveProp","React","Box","display","flexDirection","gap","className","map","flattenChildren","child","index","Divider","weight"],"mappings":"ggBAsBcA,wBAAwC,WAWlDC,OAVAC,GACIA,EADJC,MAEIA,EAFJC,MAGIA,EAHJC,SAIIA,EAAW,OAJfC,MAKIA,EAAQ,OALZC,SAMIA,EANJC,0BAOIA,KACGC,iCAIP,MAAMC,OACQC,IAAVP,OACMO,EACAC,oBAAkBR,EAAQA,GACZ,UAAVA,EAAoB,YAAwB,QAAVA,EAAkB,UAAY,UAG9E,OACIS,gBAACC,yCACOL,OACJM,QAAQ,OACRC,cAAc,SACdV,MAAOA,EACPI,WAAYA,EACZO,IAAKd,EACLD,GAAIA,EACJgB,UAAWV,EACXP,IAAKA,IAES,SAAbI,EACKQ,WAAeM,IAAIC,EAAgBb,GAAW,CAACc,EAAOC,IAClDA,EAAQ,EACJT,gCACIA,gBAACU,WAAQC,OAAQnB,IAChBgB,GAGLA,GAGRd"}
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),a=require("../box/box.js"),t=require("../stack/stack.js"),i=require("../hidden-visually/hidden-visually.js"),r=require("../text/text.js"),d=require("../common-helpers.js"),n=require("../base-field/base-field.js"),s=require("./switch-field.module.css.js");const u=["label","hint","disabled","hidden","defaultChecked","id","aria-describedby","aria-label","aria-labelledby","onChange"];exports.SwitchField=l.forwardRef((function(c,o){var b,h,f;let{label:p,hint:m,disabled:y=!1,hidden:k,defaultChecked:v,id:x,"aria-describedby":j,"aria-label":g,"aria-labelledby":q,onChange:E}=c,S=e.objectWithoutProperties(c,u);const B=d.useId(x),C=d.useId(),w=null!=j?j:m?C:void 0,N=null!=g?g:void 0,P=null!=q?q:void 0,[_,F]=l.useState(!1),[H,I]=l.useState(null!=(b=null!=(h=S.checked)?h:v)&&b),K=null!=(f=S.checked)?f:H;return l.createElement(t.Stack,{space:"small",hidden:k},l.createElement(a.Box,{className:[s.default.container,y?s.default.disabled:null,K?s.default.checked:null,_?s.default.keyFocused:null],as:"label",display:"flex",alignItems:"center"},l.createElement(a.Box,{position:"relative",display:"inlineBlock",overflow:"visible",marginRight:"small",flexShrink:0,className:s.default.toggle},l.createElement(i.HiddenVisually,null,l.createElement("input",e.objectSpread2(e.objectSpread2({},S),{},{id:B,type:"checkbox",disabled:y,"aria-describedby":w,"aria-label":N,"aria-labelledby":P,ref:o,checked:K,onChange:e=>{null==E||E(e),e.defaultPrevented||I(e.currentTarget.checked)},onBlur:e=>{F(!1),null==S||null==S.onBlur||S.onBlur(e)},onKeyUp:e=>{F(!0),null==S||null==S.onKeyUp||S.onKeyUp(e)}}))),l.createElement("span",{className:s.default.handle})),l.createElement(r.Text,{exceptionallySetClassName:s.default.label},p)),m?l.createElement(n.FieldHint,{id:C},m):null)}));
2
- //# sourceMappingURL=switch-field.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"switch-field.js","sources":["../../../src/new-components/switch-field/switch-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { Text } from '../text'\nimport { HiddenVisually } from '../hidden-visually'\nimport { FieldComponentProps, FieldHint } from '../base-field'\nimport { useId } from '../common-helpers'\nimport styles from './switch-field.module.css'\n\ntype SwitchFieldProps = Omit<\n FieldComponentProps<HTMLInputElement>,\n | 'type'\n | 'secondaryLabel'\n | 'auxiliaryLabel'\n | 'maxWidth'\n | 'aria-describedby'\n | 'aria-label'\n | 'aria-labelledby'\n> & {\n /** Identifies the element (or elements) that describes the switch for assistive technologies. */\n 'aria-describedby'?: string\n /** Defines a string value that labels the current switch for assistive technologies. */\n 'aria-label'?: string\n /** Identifies the element (or elements) that labels the current switch for assistive technologies. */\n 'aria-labelledby'?: string\n}\n\nconst SwitchField = React.forwardRef<HTMLInputElement, SwitchFieldProps>(function SwitchField(\n {\n label,\n hint,\n disabled = false,\n hidden,\n defaultChecked,\n id: originalId,\n 'aria-describedby': originalAriaDescribedBy,\n 'aria-label': originalAriaLabel,\n 'aria-labelledby': originalAriaLabelledby,\n onChange,\n ...props\n },\n ref,\n) {\n const id = useId(originalId)\n const hintId = useId()\n\n const ariaDescribedBy = originalAriaDescribedBy ?? (hint ? hintId : undefined)\n const ariaLabel = originalAriaLabel ?? undefined\n const ariaLabelledBy = originalAriaLabelledby ?? undefined\n\n const [keyFocused, setKeyFocused] = React.useState(false)\n const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n const isChecked = props.checked ?? checkedState\n\n return (\n <Stack space=\"small\" hidden={hidden}>\n <Box\n className={[\n styles.container,\n disabled ? styles.disabled : null,\n isChecked ? styles.checked : null,\n keyFocused ? styles.keyFocused : null,\n ]}\n as=\"label\"\n display=\"flex\"\n alignItems=\"center\"\n >\n <Box\n position=\"relative\"\n display=\"inlineBlock\"\n overflow=\"visible\"\n marginRight=\"small\"\n flexShrink={0}\n className={styles.toggle}\n >\n <HiddenVisually>\n <input\n {...props}\n id={id}\n type=\"checkbox\"\n disabled={disabled}\n aria-describedby={ariaDescribedBy}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n ref={ref}\n checked={isChecked}\n onChange={(event) => {\n onChange?.(event)\n if (!event.defaultPrevented) {\n setChecked(event.currentTarget.checked)\n }\n }}\n onBlur={(event) => {\n setKeyFocused(false)\n props?.onBlur?.(event)\n }}\n onKeyUp={(event) => {\n setKeyFocused(true)\n props?.onKeyUp?.(event)\n }}\n />\n </HiddenVisually>\n <span className={styles.handle} />\n </Box>\n <Text exceptionallySetClassName={styles.label}>{label}</Text>\n </Box>\n {hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}\n </Stack>\n )\n})\n\nexport { SwitchField }\nexport type { SwitchFieldProps }\n"],"names":["React","ref","label","hint","disabled","hidden","defaultChecked","id","originalId","aria-describedby","originalAriaDescribedBy","aria-label","originalAriaLabel","aria-labelledby","originalAriaLabelledby","onChange","props","useId","hintId","ariaDescribedBy","undefined","ariaLabel","ariaLabelledBy","keyFocused","setKeyFocused","checkedState","setChecked","checked","isChecked","Stack","space","Box","className","styles","container","as","display","alignItems","position","overflow","marginRight","flexShrink","toggle","HiddenVisually","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","handle","Text","exceptionallySetClassName","FieldHint"],"mappings":"uiBA2BoBA,cAAqD,WAcrEC,iBAbAC,MACIA,EADJC,KAEIA,EAFJC,SAGIA,GAAW,EAHfC,OAIIA,EAJJC,eAKIA,EACAC,GAAIC,EACJC,mBAAoBC,EACpBC,aAAcC,EACdC,kBAAmBC,EATvBC,SAUIA,KACGC,iCAIP,MAAMT,EAAKU,QAAMT,GACXU,EAASD,UAETE,QAAkBT,EAAAA,EAA4BP,EAAOe,OAASE,EAC9DC,QAAYT,EAAAA,OAAqBQ,EACjCE,QAAiBR,EAAAA,OAA0BM,GAE1CG,EAAYC,GAAiBxB,YAAe,IAC5CyB,EAAcC,GAAc1B,6BAAegB,EAAMW,WAAWrB,OAC7DsB,WAAYZ,EAAMW,WAAWF,EAEnC,OACIzB,gBAAC6B,SAAMC,MAAM,QAAQzB,OAAQA,GACzBL,gBAAC+B,OACGC,UAAW,CACPC,UAAOC,UACP9B,EAAW6B,UAAO7B,SAAW,KAC7BwB,EAAYK,UAAON,QAAU,KAC7BJ,EAAaU,UAAOV,WAAa,MAErCY,GAAG,QACHC,QAAQ,OACRC,WAAW,UAEXrC,gBAAC+B,OACGO,SAAS,WACTF,QAAQ,cACRG,SAAS,UACTC,YAAY,QACZC,WAAY,EACZT,UAAWC,UAAOS,QAElB1C,gBAAC2C,sBACG3C,2DACQgB,OACJT,GAAIA,EACJqC,KAAK,WACLxC,SAAUA,qBACQe,eACNE,oBACKC,EACjBrB,IAAKA,EACL0B,QAASC,EACTb,SAAW8B,UACP9B,GAAAA,EAAW8B,GACNA,EAAMC,kBACPpB,EAAWmB,EAAME,cAAcpB,UAGvCqB,OAASH,IACLrB,GAAc,SACdR,SAAAA,EAAOgC,QAAPhC,EAAOgC,OAASH,IAEpBI,QAAUJ,IACNrB,GAAc,SACdR,SAAAA,EAAOiC,SAAPjC,EAAOiC,QAAUJ,QAI7B7C,wBAAMgC,UAAWC,UAAOiB,UAE5BlD,gBAACmD,QAAKC,0BAA2BnB,UAAO/B,OAAQA,IAEnDC,EAAOH,gBAACqD,aAAU9C,GAAIW,GAASf,GAAoB"}
@@ -1,2 +0,0 @@
1
- "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),r=(e(a),e(require("classnames"))),n=require("../../utils/polymorphism.js"),l=require("../box/box.js"),s=require("../inline/inline.js"),o=require("ariakit/tab"),i=require("../../hooks/use-previous/use-previous.js"),c=require("./tabs.module.css.js");const u=["as","children","id","exceptionallySetClassName"],d=["children","space"],p=["children","id","as","render"],b=a.createContext(null),f=n.polymorphicComponent((function(e,n){let{as:l,children:s,id:i,exceptionallySetClassName:d}=e,p=t.objectWithoutProperties(e,u);const f=a.useContext(b);if(!f)return null;const{variant:m,tabState:x}=f;return a.createElement(o.Tab,t.objectSpread2(t.objectSpread2({},p),{},{as:l,className:r(d,c.default.tab,c.default["tab-"+m]),id:i,state:x,ref:n}),s)})),m=n.polymorphicComponent((function(e,r){let{children:n,id:l,as:s,render:i="always"}=e,c=t.objectWithoutProperties(e,p);const u=a.useContext(b),[d,f]=a.useState(!1),m=(null==u?void 0:u.tabState.selectedId)===l;if(a.useEffect((function(){!d&&m&&f(!0)}),[d,m]),!u)return null;const{tabState:x}=u;return"always"===i||"active"===i&&m||"lazy"===i&&(m||d)?a.createElement(o.TabPanel,t.objectSpread2(t.objectSpread2({tabId:l},c),{},{state:x,as:s,ref:r}),n):null}));exports.Tab=f,exports.TabAwareSlot=function({children:e}){const t=a.useContext(b);return t?e({selectedId:null==t?void 0:t.tabState.selectedId}):null},exports.TabList=function(e){let{children:r,space:n="xsmall"}=e,i=t.objectWithoutProperties(e,d);const u=a.useContext(b);if(!u)return null;const{tabState:p,variant:f}=u;return a.createElement(l.Box,null,a.createElement(o.TabList,t.objectSpread2({state:p,as:l.Box,position:"relative",width:"maxContent"},i),a.createElement(l.Box,{className:[c.default.track,c.default["track-"+f]]}),a.createElement(s.Inline,{space:n},r)))},exports.TabPanel=m,exports.Tabs=function({children:e,selectedId:t,defaultSelectedId:r,variant:n="neutral",onSelectedIdChange:l}){const s=o.useTabState({selectedId:t,setSelectedId:l}),c=i.usePrevious(r),{selectedId:u,select:d}=s;a.useEffect((function(){t||r===c||r===u||void 0===r||d(r)}),[t,r,u,d,c]);const p=a.useMemo((function(){return{tabState:s,variant:n}}),[n,s]);return a.createElement(b.Provider,{value:p},e)};
2
- //# sourceMappingURL=tabs.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"tabs.js","sources":["../../../src/new-components/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n useTabState,\n Tab as BaseTab,\n TabList as BaseTabList,\n TabPanel as BaseTabPanel,\n TabState,\n} from 'ariakit/tab'\nimport { Inline } from '../inline'\nimport { usePrevious } from '../../hooks/use-previous'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport type { Space } from '../common-types'\n\nimport styles from './tabs.module.css'\nimport { Box } from '../box'\n\ntype TabsContextValue = {\n tabState: TabState\n} & Required<Pick<TabsProps, 'variant'>>\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ntype TabsProps = {\n /** The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>` components */\n children: React.ReactNode\n /**\n * Determines the look and feel of the tabs.\n */\n variant?: 'themed' | 'neutral'\n /**\n * The id of the selected tab. Assigning a value makes this a\n * controlled component\n */\n selectedId?: string | null\n /**\n * The tab to initially select. This can be used if the component should not\n * be a controlled component but needs to have a tab selected\n */\n defaultSelectedId?: string | null\n /**\n * Called with the tab id when a tab is selected\n */\n onSelectedIdChange?: (selectedId: string | null | undefined) => void\n}\n\n/**\n * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.\n */\nfunction Tabs({\n children,\n selectedId,\n defaultSelectedId,\n variant = 'neutral',\n onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n const tabState = useTabState({ selectedId, setSelectedId: onSelectedIdChange })\n const previousDefaultSelectedId = usePrevious(defaultSelectedId)\n const { selectedId: actualSelectedId, select } = tabState\n\n React.useEffect(\n function selectDefaultTab() {\n if (\n !selectedId &&\n defaultSelectedId !== previousDefaultSelectedId &&\n defaultSelectedId !== actualSelectedId &&\n defaultSelectedId !== undefined\n ) {\n select(defaultSelectedId)\n }\n },\n [selectedId, defaultSelectedId, actualSelectedId, select, previousDefaultSelectedId],\n )\n\n const memoizedTabState = React.useMemo(\n function memoizeTabState() {\n return {\n tabState,\n variant,\n }\n },\n [variant, tabState],\n )\n\n return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ntype TabProps = {\n /** The content to render inside of the tab button */\n children: React.ReactNode\n\n /** The tab's identifier. This must match its corresponding `<TabPanel>`'s id */\n id: string\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nconst Tab = polymorphicComponent<'button', TabProps>(function Tab(\n { as, children, id, exceptionallySetClassName, ...props },\n ref,\n): React.ReactElement | null {\n const tabContextValue = React.useContext(TabsContext)\n\n if (!tabContextValue) {\n return null\n }\n\n const { variant, tabState } = tabContextValue\n\n return (\n <BaseTab\n {...props}\n as={as}\n className={classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])}\n id={id}\n state={tabState}\n ref={ref}\n >\n {children}\n </BaseTab>\n )\n})\n\ntype TabListProps = (\n | {\n /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n 'aria-label': string\n }\n | {\n /**\n * One or more element IDs used to label the tab list for assistive technologies. Required if\n * `aria-label` is omitted.\n */\n 'aria-labelledby': string\n }\n | {\n /**\n * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n */\n 'aria-hidden': boolean\n }\n) & {\n /**\n * A list of `<Tab>` elements\n */\n children: React.ReactNode\n\n /**\n * Controls the spacing between tabs\n */\n space?: Space\n}\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nfunction TabList({\n children,\n space = 'xsmall',\n ...props\n}: TabListProps): React.ReactElement | null {\n const tabContextValue = React.useContext(TabsContext)\n\n if (!tabContextValue) {\n return null\n }\n\n const { tabState, variant } = tabContextValue\n\n return (\n // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container\n // which will render the track with the wrong height\n <Box>\n <BaseTabList\n state={tabState}\n as={Box}\n position=\"relative\"\n width=\"maxContent\"\n {...props}\n >\n <Box className={[styles.track, styles[`track-${variant}`]]} />\n <Inline space={space}>{children}</Inline>\n </BaseTabList>\n </Box>\n )\n}\n\ntype TabPanelProps = {\n /** The content to be rendered inside the tab */\n children?: React.ReactNode\n\n /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */\n id: string\n\n /**\n * By default, the tab panel's content is always rendered even when they are not active. This behaviour can be changed to\n * 'active', which renders only when the tab is active, and 'lazy', meaning while inactive tab panels will not be rendered\n * initially, they will remain mounted once they are active until the entire Tabs tree is unmounted.\n */\n render?: 'always' | 'active' | 'lazy'\n}\n\n/**\n * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.\n */\nconst TabPanel = polymorphicComponent<'div', TabPanelProps, 'omitClassName'>(function TabPanel(\n { children, id, as, render = 'always', ...props },\n ref,\n): React.ReactElement | null {\n const tabContextValue = React.useContext(TabsContext)\n const [tabRendered, setTabRendered] = React.useState(false)\n const tabIsActive = tabContextValue?.tabState.selectedId === id\n\n React.useEffect(\n function trackTabRenderedState() {\n if (!tabRendered && tabIsActive) {\n setTabRendered(true)\n }\n },\n [tabRendered, tabIsActive],\n )\n\n if (!tabContextValue) {\n return null\n }\n\n const { tabState } = tabContextValue\n const shouldRender =\n render === 'always' ||\n (render === 'active' && tabIsActive) ||\n (render === 'lazy' && (tabIsActive || tabRendered))\n\n return shouldRender ? (\n <BaseTabPanel tabId={id} {...props} state={tabState} as={as} ref={ref}>\n {children}\n </BaseTabPanel>\n ) : null\n})\n\ntype TabAwareSlotProps = {\n /**\n * Render prop used to provide the content to be rendered inside the slot. The render prop will be\n * called with the current `selectedId`\n */\n children: (provided: { selectedId?: string | null }) => React.ReactElement | null\n}\n\n/**\n * Allows content to be rendered based on the current tab being selected while outside of the TabPanel\n * component. Can be placed freely within the main `<Tabs>` component.\n */\nfunction TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n const tabContextValue = React.useContext(TabsContext)\n return tabContextValue ? children({ selectedId: tabContextValue?.tabState.selectedId }) : null\n}\n\nexport { Tab, Tabs, TabList, TabPanel, TabAwareSlot }\n"],"names":["TabsContext","React","Tab","polymorphicComponent","ref","as","children","id","exceptionallySetClassName","props","tabContextValue","variant","tabState","BaseTab","className","classNames","styles","tab","state","TabPanel","render","tabRendered","setTabRendered","tabIsActive","selectedId","BaseTabPanel","tabId","space","Box","BaseTabList","position","width","track","Inline","defaultSelectedId","onSelectedIdChange","useTabState","setSelectedId","previousDefaultSelectedId","usePrevious","actualSelectedId","select","undefined","memoizedTabState","Provider","value"],"mappings":"skBAqBMA,EAAcC,gBAA6C,MA6E3DC,EAAMC,wBAAyC,WAEjDC,OADAC,GAAEA,EAAFC,SAAMA,EAANC,GAAgBA,EAAhBC,0BAAoBA,KAA8BC,iCAGlD,MAAMC,EAAkBT,aAAiBD,GAEzC,IAAKU,EACD,OAAO,KAGX,MAAMC,QAAEA,EAAFC,SAAWA,GAAaF,EAE9B,OACIT,gBAACY,yCACOJ,OACJJ,GAAIA,EACJS,UAAWC,EAAWP,EAA2BQ,UAAOC,IAAKD,iBAAcL,IAC3EJ,GAAIA,EACJW,MAAON,EACPR,IAAKA,IAEJE,MAuFPa,EAAWhB,wBAA4D,WAEzEC,OADAE,SAAEA,EAAFC,GAAYA,EAAZF,GAAgBA,EAAhBe,OAAoBA,EAAS,YAAaX,iCAG1C,MAAMC,EAAkBT,aAAiBD,IAClCqB,EAAaC,GAAkBrB,YAAe,GAC/CsB,SAAcb,SAAAA,EAAiBE,SAASY,cAAejB,EAW7D,GATAN,aACI,YACSoB,GAAeE,GAChBD,GAAe,KAGvB,CAACD,EAAaE,KAGbb,EACD,OAAO,KAGX,MAAME,SAAEA,GAAaF,EAMrB,MAJe,WAAXU,GACY,WAAXA,GAAuBG,GACZ,SAAXH,IAAsBG,GAAeF,GAGtCpB,gBAACwB,4CAAaC,MAAOnB,GAAQE,OAAOS,MAAON,EAAUP,GAAIA,EAAID,IAAKA,IAC7DE,GAEL,2CAeR,UAAsBA,SAAEA,IACpB,MAAMI,EAAkBT,aAAiBD,GACzC,OAAOU,EAAkBJ,EAAS,CAAEkB,iBAAYd,SAAAA,EAAiBE,SAASY,aAAgB,sBAjG9F,gBAAiBlB,SACbA,EADaqB,MAEbA,EAAQ,YACLlB,iCAEH,MAAMC,EAAkBT,aAAiBD,GAEzC,IAAKU,EACD,OAAO,KAGX,MAAME,SAAEA,EAAFD,QAAYA,GAAYD,EAE9B,OAGIT,gBAAC2B,WACG3B,gBAAC4B,2BACGX,MAAON,EACPP,GAAIuB,MACJE,SAAS,WACTC,MAAM,cACFtB,GAEJR,gBAAC2B,OAAId,UAAW,CAACE,UAAOgB,MAAOhB,mBAAgBL,MAC/CV,gBAACgC,UAAON,MAAOA,GAAQrB,sCArIvC,UAAcA,SACVA,EADUkB,WAEVA,EAFUU,kBAGVA,EAHUvB,QAIVA,EAAU,UAJAwB,mBAKVA,IAEA,MAAMvB,EAAWwB,cAAY,CAAEZ,WAAAA,EAAYa,cAAeF,IACpDG,EAA4BC,cAAYL,IACtCV,WAAYgB,EAAdC,OAAgCA,GAAW7B,EAEjDX,aACI,WAESuB,GACDU,IAAsBI,GACtBJ,IAAsBM,QACAE,IAAtBR,GAEAO,EAAOP,KAGf,CAACV,EAAYU,EAAmBM,EAAkBC,EAAQH,IAG9D,MAAMK,EAAmB1C,WACrB,WACI,MAAO,CACHW,SAAAA,EACAD,QAAAA,KAGR,CAACA,EAASC,IAGd,OAAOX,gBAACD,EAAY4C,UAASC,MAAOF,GAAmBrC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"text.js","sources":["../../../src/new-components/text/text.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../responsive-props'\nimport { Box } from '../box'\nimport { polymorphicComponent } from '../../utils/polymorphism'\n\nimport type { Tone } from '../common-types'\nimport type { BoxProps } from '../box'\n\nimport styles from './text.module.css'\n\ntype TextProps = {\n children: React.ReactNode\n /**\n * The size of the text.\n *\n * The supported values, from smaller size to larger size, are:\n * 'caption', 'copy', 'body', and 'subtitle'\n *\n * @default 'body'\n */\n size?: 'caption' | 'copy' | 'body' | 'subtitle'\n /**\n * The weight of the text font.\n *\n * @default 'regular'\n */\n weight?: 'regular' | 'semibold' | 'bold'\n /**\n * The tone (semantic color) of the text.\n *\n * @default 'normal'\n */\n tone?: Tone\n /**\n * Used to truncate the text to a given number of lines.\n *\n * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was\n * truncated. If the text fits without it being truncated, no ellipsis is added.\n *\n * By default, the text is not truncated at all, no matter how many lines it takes to render it.\n *\n * @default undefined\n */\n lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5'\n /**\n * How to align the text horizontally.\n *\n * @default 'start'\n */\n align?: BoxProps['textAlign']\n}\n\nconst Text = polymorphicComponent<'div', TextProps>(function Text(\n {\n as,\n size = 'body',\n weight = 'regular',\n tone = 'normal',\n align,\n children,\n lineClamp,\n exceptionallySetClassName,\n ...props\n },\n ref,\n) {\n const lineClampMultipleLines =\n typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp ?? 1) > 1\n\n return (\n <Box\n {...props}\n as={as}\n className={[\n exceptionallySetClassName,\n styles.text,\n size !== 'body' ? getClassNames(styles, 'size', size) : null,\n weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,\n tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,\n lineClampMultipleLines ? styles.lineClampMultipleLines : null,\n lineClamp ? getClassNames(styles, 'lineClamp', lineClamp.toString()) : null,\n ]}\n textAlign={align}\n // Prevents emojis from being cut-off\n // See https://github.com/Doist/reactist/pull/528\n paddingRight={lineClamp ? 'xsmall' : undefined}\n ref={ref}\n >\n {children}\n </Box>\n )\n})\n\nexport type { TextProps }\nexport { Text }\n"],"names":["polymorphicComponent","ref","as","size","weight","tone","align","children","lineClamp","exceptionallySetClassName","props","lineClampMultipleLines","Number","React","Box","className","styles","text","getClassNames","toString","textAlign","paddingRight","undefined"],"mappings":"4YAoDaA,wBAAuC,WAYhDC,OAXAC,GACIA,EADJC,KAEIA,EAAO,OAFXC,OAGIA,EAAS,UAHbC,KAIIA,EAAO,SAJXC,MAKIA,EALJC,SAMIA,EANJC,UAOIA,EAPJC,0BAQIA,KACGC,iCAIP,MAAMC,EACmB,iBAAdH,EAAyBI,OAAOJ,GAAa,SAAKA,EAAAA,EAAa,GAAK,EAE/E,OACIK,gBAACC,yCACOJ,OACJR,GAAIA,EACJa,UAAW,CACPN,EACAO,UAAOC,KACE,SAATd,EAAkBe,gBAAcF,UAAQ,OAAQb,GAAQ,KAC7C,YAAXC,EAAuBc,gBAAcF,UAAQ,SAAUZ,GAAU,KACxD,WAATC,EAAoBa,gBAAcF,UAAQ,OAAQX,GAAQ,KAC1DM,EAAyBK,UAAOL,uBAAyB,KACzDH,EAAYU,gBAAcF,UAAQ,YAAaR,EAAUW,YAAc,MAE3EC,UAAWd,EAGXe,aAAcb,EAAY,cAAWc,EACrCrB,IAAKA,IAEJM"}
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),r=require("../box/box.js"),t=require("../base-field/base-field.js"),i=require("use-callback-ref"),l=require("./text-area.module.css.js");const n=["variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","hidden","aria-describedby","rows","autoExpand"];exports.TextArea=a.forwardRef((function(d,s){let{variant:u="default",id:o,label:c,secondaryLabel:b,auxiliaryLabel:f,hint:x,message:p,tone:m,maxWidth:h,hidden:v,"aria-describedby":y,rows:j,autoExpand:E=!1}=d,L=e.objectWithoutProperties(d,n);const g=a.useRef(null),q=a.useRef(null),w=i.useMergeRefs([s,q]);return a.useEffect((function(){const e=g.current;function a(a){e&&(e.dataset.replicatedValue=a.currentTarget.value)}const r=q.current;if(r&&E)return r.addEventListener("input",a),()=>r.removeEventListener("input",a)}),[E]),a.createElement(t.BaseField,{variant:u,id:o,label:c,secondaryLabel:b,auxiliaryLabel:f,hint:x,message:p,tone:m,hidden:v,"aria-describedby":y,className:[l.default.textAreaContainer,"error"===m?l.default.error:null,"bordered"===u?l.default.bordered:null],maxWidth:h},t=>a.createElement(r.Box,{width:"full",display:"flex",className:l.default.innerContainer,ref:g},a.createElement("textarea",e.objectSpread2(e.objectSpread2(e.objectSpread2({},L),t),{},{ref:w,rows:j,className:E?l.default.autoExpand:void 0}))))}));
2
- //# sourceMappingURL=text-area.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"text-area.js","sources":["../../../src/new-components/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useMergeRefs } from 'use-callback-ref'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ntype TextAreaProps = FieldComponentProps<HTMLTextAreaElement> &\n BaseFieldVariantProps & {\n /**\n * The number of visible text lines for the text area.\n *\n * If it is specified, it must be a positive integer. If it is not specified, the default\n * value is 2 (set by the browser).\n *\n * When `autoExpand` is true, this value serves the purpose of specifying the minimum number\n * of rows that the textarea will shrink to when the content is not large enough to make it\n * expand.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n */\n rows?: number\n /**\n * If `true`, the textarea will auto-expand or shrink vertically to fit the content.\n */\n autoExpand?: boolean\n }\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n {\n variant = 'default',\n id,\n label,\n secondaryLabel,\n auxiliaryLabel,\n hint,\n message,\n tone,\n maxWidth,\n hidden,\n 'aria-describedby': ariaDescribedBy,\n rows,\n autoExpand = false,\n ...props\n },\n ref,\n) {\n const containerRef = React.useRef<HTMLDivElement>(null)\n const internalRef = React.useRef<HTMLTextAreaElement>(null)\n const combinedRef = useMergeRefs([ref, internalRef])\n\n React.useEffect(\n function setupAutoExpand() {\n const containerElement = containerRef.current\n function handleInput(event: Event) {\n if (containerElement) {\n containerElement.dataset.replicatedValue = (event.currentTarget as HTMLTextAreaElement).value\n }\n }\n\n const textAreaElement = internalRef.current\n if (!textAreaElement || !autoExpand) return undefined\n textAreaElement.addEventListener('input', handleInput)\n return () => textAreaElement.removeEventListener('input', handleInput)\n },\n [autoExpand],\n )\n\n return (\n <BaseField\n variant={variant}\n id={id}\n label={label}\n secondaryLabel={secondaryLabel}\n auxiliaryLabel={auxiliaryLabel}\n hint={hint}\n message={message}\n tone={tone}\n hidden={hidden}\n aria-describedby={ariaDescribedBy}\n className={[\n styles.textAreaContainer,\n tone === 'error' ? styles.error : null,\n variant === 'bordered' ? styles.bordered : null,\n ]}\n maxWidth={maxWidth}\n >\n {(extraProps) => (\n <Box\n width=\"full\"\n display=\"flex\"\n className={styles.innerContainer}\n ref={containerRef}\n >\n <textarea\n {...props}\n {...extraProps}\n ref={combinedRef}\n rows={rows}\n className={autoExpand ? styles.autoExpand : undefined}\n />\n </Box>\n )}\n </BaseField>\n )\n})\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["React","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","hidden","aria-describedby","ariaDescribedBy","rows","autoExpand","props","containerRef","internalRef","combinedRef","useMergeRefs","containerElement","current","handleInput","event","dataset","replicatedValue","currentTarget","value","textAreaElement","addEventListener","removeEventListener","BaseField","className","styles","textAreaContainer","error","bordered","extraProps","Box","width","display","innerContainer","undefined"],"mappings":"ocA2BiBA,cAAqD,WAiBlEC,OAhBAC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,eAIIA,EAJJC,eAKIA,EALJC,KAMIA,EANJC,QAOIA,EAPJC,KAQIA,EARJC,SASIA,EATJC,OAUIA,EACAC,mBAAoBC,EAXxBC,KAYIA,EAZJC,WAaIA,GAAa,KACVC,iCAIP,MAAMC,EAAejB,SAA6B,MAC5CkB,EAAclB,SAAkC,MAChDmB,EAAcC,eAAa,CAACnB,EAAKiB,IAmBvC,OAjBAlB,aACI,WACI,MAAMqB,EAAmBJ,EAAaK,QACtC,SAASC,EAAYC,GACbH,IACAA,EAAiBI,QAAQC,gBAAmBF,EAAMG,cAAsCC,OAIhG,MAAMC,EAAkBX,EAAYI,QACpC,GAAKO,GAAoBd,EAEzB,OADAc,EAAgBC,iBAAiB,QAASP,GACnC,IAAMM,EAAgBE,oBAAoB,QAASR,KAE9D,CAACR,IAIDf,gBAACgC,aACG9B,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,QAASA,EACTC,KAAMA,EACNE,OAAQA,qBACUE,EAClBoB,UAAW,CACPC,UAAOC,kBACE,UAAT1B,EAAmByB,UAAOE,MAAQ,KACtB,aAAZlC,EAAyBgC,UAAOG,SAAW,MAE/C3B,SAAUA,GAER4B,GACEtC,gBAACuC,OACGC,MAAM,OACNC,QAAQ,OACRR,UAAWC,UAAOQ,eAClBzC,IAAKgB,GAELjB,8EACQgB,GACAsB,OACJrC,IAAKkB,EACLL,KAAMA,EACNmB,UAAWlB,EAAamB,UAAOnB,gBAAa4B"}
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),r=require("../box/box.js"),t=require("../base-field/base-field.js"),l=require("./text-field.module.css.js"),i=require("use-callback-ref");const s=["variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","type","maxWidth","hidden","aria-describedby","startIcon"];exports.TextField=a.forwardRef((function(d,n){let{variant:u="default",id:o,label:c,secondaryLabel:b,auxiliaryLabel:f,hint:m,message:p,tone:x,type:y="text",maxWidth:h,hidden:g,"aria-describedby":j,startIcon:v}=d,L=e.objectWithoutProperties(d,s);const q=a.useRef(null),W=i.useMergeRefs([n,q]);function B(){var e;null==(e=q.current)||e.focus()}return a.createElement(t.BaseField,{variant:u,id:o,label:c,secondaryLabel:b,auxiliaryLabel:f,hint:m,message:p,tone:x,maxWidth:h,hidden:g,"aria-describedby":j},t=>a.createElement(r.Box,{display:"flex",alignItems:"center",className:[l.default.inputWrapper,"error"===x?l.default.error:null,"bordered"===u?l.default.bordered:null]},v?a.createElement(r.Box,{display:"flex",className:l.default.startIcon,onClick:B,marginRight:"-xsmall",marginLeft:"small","aria-hidden":!0},v):null,a.createElement("input",e.objectSpread2(e.objectSpread2(e.objectSpread2({},L),t),{},{type:y,ref:W}))))}));
2
- //# sourceMappingURL=text-field.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"text-field.js","sources":["../../../src/new-components/text-field/text-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-field.module.css'\nimport type { FieldComponentProps } from '../base-field'\nimport { useMergeRefs } from 'use-callback-ref'\n\ntype TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url'\n\ntype TextFieldProps = Omit<FieldComponentProps<HTMLInputElement>, 'type'> &\n BaseFieldVariantProps & {\n type?: TextFieldType\n startIcon?: React.ReactChild\n }\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(\n {\n variant = 'default',\n id,\n label,\n secondaryLabel,\n auxiliaryLabel,\n hint,\n message,\n tone,\n type = 'text',\n maxWidth,\n hidden,\n 'aria-describedby': ariaDescribedBy,\n startIcon,\n ...props\n },\n ref,\n) {\n const internalRef = React.useRef<HTMLInputElement>(null)\n const combinedRef = useMergeRefs([ref, internalRef])\n\n function focusOnIconClick() {\n internalRef.current?.focus()\n }\n\n return (\n <BaseField\n variant={variant}\n id={id}\n label={label}\n secondaryLabel={secondaryLabel}\n auxiliaryLabel={auxiliaryLabel}\n hint={hint}\n message={message}\n tone={tone}\n maxWidth={maxWidth}\n hidden={hidden}\n aria-describedby={ariaDescribedBy}\n >\n {(extraProps) => (\n <Box\n display=\"flex\"\n alignItems=\"center\"\n className={[\n styles.inputWrapper,\n tone === 'error' ? styles.error : null,\n variant === 'bordered' ? styles.bordered : null,\n ]}\n >\n {startIcon ? (\n <Box\n display=\"flex\"\n className={styles.startIcon}\n onClick={focusOnIconClick}\n marginRight=\"-xsmall\"\n marginLeft=\"small\"\n aria-hidden\n >\n {startIcon}\n </Box>\n ) : null}\n <input {...props} {...extraProps} type={type} ref={combinedRef} />\n </Box>\n )}\n </BaseField>\n )\n})\n\nexport { TextField }\nexport type { TextFieldProps, TextFieldType }\n"],"names":["React","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","type","maxWidth","hidden","aria-describedby","ariaDescribedBy","startIcon","props","internalRef","combinedRef","useMergeRefs","focusOnIconClick","current","focus","BaseField","extraProps","Box","display","alignItems","className","styles","inputWrapper","error","bordered","onClick","marginRight","marginLeft"],"mappings":"qcAekBA,cAAmD,WAiBjEC,OAhBAC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,eAIIA,EAJJC,eAKIA,EALJC,KAMIA,EANJC,QAOIA,EAPJC,KAQIA,EARJC,KASIA,EAAO,OATXC,SAUIA,EAVJC,OAWIA,EACAC,mBAAoBC,EAZxBC,UAaIA,KACGC,iCAIP,MAAMC,EAAcjB,SAA+B,MAC7CkB,EAAcC,eAAa,CAAClB,EAAKgB,IAEvC,SAASG,mBACLH,EAAYI,YAASC,QAGzB,OACItB,gBAACuB,aACGrB,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,QAASA,EACTC,KAAMA,EACNE,SAAUA,EACVC,OAAQA,qBACUE,GAEhBU,GACExB,gBAACyB,OACGC,QAAQ,OACRC,WAAW,SACXC,UAAW,CACPC,UAAOC,aACE,UAATrB,EAAmBoB,UAAOE,MAAQ,KACtB,aAAZ7B,EAAyB2B,UAAOG,SAAW,OAG9CjB,EACGf,gBAACyB,OACGC,QAAQ,OACRE,UAAWC,UAAOd,UAClBkB,QAASb,EACTc,YAAY,UACZC,WAAW,0BAGVpB,GAEL,KACJf,2EAAWgB,GAAWQ,OAAYd,KAAMA,EAAMT,IAAKiB"}
@@ -1,5 +0,0 @@
1
- import type { OpenInNewTab } from '../common-types';
2
- declare type TextLinkProps = OpenInNewTab;
3
- declare const TextLink: import("../../utils/polymorphism").PolymorphicComponent<"a", OpenInNewTab, "obfuscateClassName">;
4
- export { TextLink };
5
- export type { TextLinkProps };
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../../utils/polymorphism.js"),o=require("../box/box.js"),a=require("./text-link.module.css.js");const l=["as","openInNewTab","exceptionallySetClassName"];exports.TextLink=t.polymorphicComponent((function(t,s){let{as:i="a",openInNewTab:n=!1,exceptionallySetClassName:p}=t,u=e.objectWithoutProperties(t,l);return r.createElement(o.Box,e.objectSpread2(e.objectSpread2({},u),{},{as:i,display:"inline",className:[p,a.default.container],ref:s,target:n?"_blank":void 0,rel:n?"noopener noreferrer":void 0}))}));
2
- //# sourceMappingURL=text-link.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"text-link.js","sources":["../../../src/new-components/text-link/text-link.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport styles from './text-link.module.css'\nimport type { OpenInNewTab } from '../common-types'\n\ntype TextLinkProps = OpenInNewTab\n\nconst TextLink = polymorphicComponent<'a', TextLinkProps>(function TextLink(\n { as = 'a', openInNewTab = false, exceptionallySetClassName, ...props },\n ref,\n) {\n return (\n <Box\n {...props}\n as={as}\n display=\"inline\"\n className={[exceptionallySetClassName, styles.container]}\n ref={ref}\n target={openInNewTab ? '_blank' : undefined}\n rel={openInNewTab ? 'noopener noreferrer' : undefined}\n />\n )\n})\n\nexport { TextLink }\nexport type { TextLinkProps }\n"],"names":["polymorphicComponent","ref","as","openInNewTab","exceptionallySetClassName","props","React","Box","display","className","styles","container","target","undefined","rel"],"mappings":"0UAQiBA,wBAAyC,WAEtDC,OADAC,GAAEA,EAAK,IAAPC,aAAYA,GAAe,EAA3BC,0BAAkCA,KAA8BC,iCAGhE,OACIC,gBAACC,yCACOF,OACJH,GAAIA,EACJM,QAAQ,SACRC,UAAW,CAACL,EAA2BM,UAAOC,WAC9CV,IAAKA,EACLW,OAAQT,EAAe,cAAWU,EAClCC,IAAKX,EAAe,2BAAwBU"}
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,n=require("../box/box.js"),a=require("../stack/stack.js"),r=require("../button/button.js"),i=require("../icons/close-icon.js"),o=require("../text/text.js"),s=require("./toast.module.css.js");const c=["message","description","icon","action","onDismiss","dismissLabel"];function u({children:e}){return l.createElement(n.Box,{display:"flex",alignItems:"center",justifyContent:"center",marginX:"-xsmall",marginY:"-medium",className:s.default.slot},e)}exports.StaticToast=l.forwardRef((function(e,m){let{message:d,description:f,icon:b,action:p,onDismiss:x,dismissLabel:j="Close"}=e,E=t.objectWithoutProperties(e,c);return l.createElement(n.Box,t.objectSpread2({ref:m,role:"alert","aria-live":"polite",borderRadius:"full",width:"fitContent",background:"toast",display:"flex",padding:"large",alignItems:"center",className:s.default.toastContainer},E),b?l.createElement(u,null,b):null,l.createElement(n.Box,{flexGrow:1,maxWidth:"small"},f?l.createElement(a.Stack,{space:"small"},l.createElement(o.Text,{weight:"bold"},d," "),l.createElement(o.Text,null,f)):l.createElement(o.Text,null,d)),p?l.createElement(u,null,function(e){return null!=e&&"object"==typeof e&&"label"in e&&"onClick"in e&&"string"==typeof e.label&&"function"==typeof e.onClick}(p)?l.createElement(r.Button,{variant:"tertiary",size:"small",onClick:p.onClick},p.label):p):null,x?l.createElement(u,null,l.createElement(r.Button,{variant:"quaternary",size:"small",onClick:x,"aria-label":j,icon:l.createElement(i.CloseIcon,null)})):null)}));
2
- //# sourceMappingURL=static-toast.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"static-toast.js","sources":["../../../src/new-components/toast/static-toast.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Box } from '../box'\nimport { Button } from '../button'\nimport { Stack } from '../stack'\nimport { Text } from '../text'\n\nimport styles from './toast.module.css'\n\ntype ToastActionObject = {\n label: string\n onClick: () => void\n}\n\ntype StaticToastProps = {\n /**\n * The message shown in the toast.\n */\n message: NonNullable<React.ReactNode>\n\n /**\n * An optional extra description that complements the main message shown in the toast.\n */\n description?: React.ReactNode\n\n /**\n * An icon to be shown in front of the message.\n */\n icon?: React.ReactNode\n\n /**\n * The action to call when the user clicks on the dismiss button. If omitted, the dismiss button\n * does not appear.\n */\n onDismiss?: () => void\n\n /**\n * The label for the button that dismisses the toast.\n */\n dismissLabel?: string\n\n /**\n * What to render in the action slot. Usually a button or link.\n *\n * You can also pass an object that containst the action label, and a function that performs the\n * action. This is used by the toast component to render a button for you.\n *\n * In general, you should prefer the action object most of the time. But it is possible to pass\n * a React element instead, if you need more control over what to render. For instance, you may\n * want to render a link instead of a button.\n *\n * Keep in mind, though, that the default button rendered uses `variant=\"tertiary\"` and\n * `size=\"small\"`. In most cases you should stick to the variants `tertiary` or `primary`, which\n * are the ones that look better in the toast's dark background. And in all cases you should use\n * size `small`.\n */\n action?: React.ReactElement | ToastActionObject\n}\n\n/**\n * A toast that shows a message, and an optional action associated with it.\n *\n * This component is generally not meant to be used directly. Most of the time you'll want to use\n * toasts generated via `useToasts` instead. However, this component is available in case you need\n * to take control of rendering a toast under different circumstances than that of notification-like\n * floating toasts.\n *\n * This component makes no assumptions outwardly about how it is positioned on the screen. That is,\n * it will not be shown floating or fixed to the viewport edges, as toasts normally show up. It only\n * provides the toast look and feel, but you are responsible for positioning it as you want.\n *\n * @see useToasts\n */\nconst StaticToast = React.forwardRef<HTMLDivElement, StaticToastProps>(function Toast(\n { message, description, icon, action, onDismiss, dismissLabel = 'Close', ...props },\n ref,\n) {\n return (\n <Box\n ref={ref}\n role=\"alert\"\n aria-live=\"polite\"\n borderRadius=\"full\"\n width=\"fitContent\"\n background=\"toast\"\n display=\"flex\"\n padding=\"large\"\n alignItems=\"center\"\n className={styles.toastContainer}\n {...props}\n >\n {icon ? <ToastContentSlot>{icon}</ToastContentSlot> : null}\n\n <Box flexGrow={1} maxWidth=\"small\">\n {description ? (\n <Stack space=\"small\">\n <Text weight=\"bold\">{message} </Text>\n <Text>{description}</Text>\n </Stack>\n ) : (\n <Text>{message}</Text>\n )}\n </Box>\n\n {action ? (\n <ToastContentSlot>\n {isActionObject(action) ? (\n <Button variant=\"tertiary\" size=\"small\" onClick={action.onClick}>\n {action.label}\n </Button>\n ) : (\n action\n )}\n </ToastContentSlot>\n ) : null}\n\n {onDismiss ? (\n <ToastContentSlot>\n <Button\n variant=\"quaternary\"\n size=\"small\"\n onClick={onDismiss}\n aria-label={dismissLabel}\n icon={<CloseIcon />}\n />\n </ToastContentSlot>\n ) : null}\n </Box>\n )\n})\n\nfunction isActionObject(action: StaticToastProps['action']): action is ToastActionObject {\n return (\n action != null &&\n typeof action === 'object' &&\n 'label' in action &&\n 'onClick' in action &&\n typeof action.label === 'string' &&\n typeof action.onClick === 'function'\n )\n}\n\nfunction ToastContentSlot({ children }: { children: React.ReactNode }) {\n return (\n <Box\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n marginX=\"-xsmall\"\n marginY=\"-medium\"\n className={styles.slot}\n >\n {children}\n </Box>\n )\n}\n\nexport { StaticToast }\nexport type { StaticToastProps }\n"],"names":["ToastContentSlot","children","React","Box","display","alignItems","justifyContent","marginX","marginY","className","styles","slot","forwardRef","ref","message","description","icon","action","onDismiss","dismissLabel","props","role","borderRadius","width","background","padding","toastContainer","flexGrow","maxWidth","Stack","space","Text","weight","label","onClick","isActionObject","Button","variant","size","CloseIcon"],"mappings":"qdA+IA,SAASA,GAAiBC,SAAEA,IACxB,OACIC,gBAACC,OACGC,QAAQ,OACRC,WAAW,SACXC,eAAe,SACfC,QAAQ,UACRC,QAAQ,UACRC,UAAWC,UAAOC,MAEjBV,uBA/EOC,EAAMU,YAA6C,WAEnEC,OADAC,QAAEA,EAAFC,YAAWA,EAAXC,KAAwBA,EAAxBC,OAA8BA,EAA9BC,UAAsCA,EAAtCC,aAAiDA,EAAe,WAAYC,iCAG5E,OACIlB,gBAACC,uBACGU,IAAKA,EACLQ,KAAK,oBACK,SACVC,aAAa,OACbC,MAAM,aACNC,WAAW,QACXpB,QAAQ,OACRqB,QAAQ,QACRpB,WAAW,SACXI,UAAWC,UAAOgB,gBACdN,GAEHJ,EAAOd,gBAACF,OAAkBgB,GAA2B,KAEtDd,gBAACC,OAAIwB,SAAU,EAAGC,SAAS,SACtBb,EACGb,gBAAC2B,SAAMC,MAAM,SACT5B,gBAAC6B,QAAKC,OAAO,QAAQlB,OACrBZ,gBAAC6B,YAAMhB,IAGXb,gBAAC6B,YAAMjB,IAIdG,EACGf,gBAACF,OA0BjB,SAAwBiB,GACpB,OACc,MAAVA,GACkB,iBAAXA,GACP,UAAWA,GACX,YAAaA,GACW,iBAAjBA,EAAOgB,OACY,mBAAnBhB,EAAOiB,QAhCDC,CAAelB,GACZf,gBAACkC,UAAOC,QAAQ,WAAWC,KAAK,QAAQJ,QAASjB,EAAOiB,SACnDjB,EAAOgB,OAGZhB,GAGR,KAEHC,EACGhB,gBAACF,OACGE,gBAACkC,UACGC,QAAQ,aACRC,KAAK,QACLJ,QAAShB,eACGC,EACZH,KAAMd,gBAACqC,qBAGf"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"toast-animation.js","sources":["../../../src/new-components/toast/toast-animation.ts"],"sourcesContent":["/**\n * Adapted with minor changes from https://github.com/seek-oss/braid-design-system/blob/7a5ebccb/packages/braid-design-system/lib/components/useToast/useFlipList.ts\n *\n * MIT License\n *\n * Copyright (c) 2018 SEEK\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport { useMemo, useCallback, useLayoutEffect } from 'react'\n\nconst ANIMATION_TIMEOUT = 400\nconst ENTRANCE_TRANSITION = 'transform 0.3s ease, opacity 0.3s ease'\nconst EXIT_TRANSITION = 'opacity 0.2s ease'\n\ntype Transform = {\n property: 'opacity' | 'transform' | 'scale'\n from?: string\n to?: string\n}\n\n/**\n * Applies the \"from\" value of given CSS properties, and also sets a transition CSS property. Then\n * it waits an animation frame before setting the same CSS properties to the target \"to\" value. This\n * triggers the browser to perform the CSS transition on them.\n *\n * At the end of the animation, it cleans up, unsetting all the CSS properties (including the\n * transition), and calls the \"done\" callback, if given.\n */\nfunction animate({\n element,\n transforms,\n transition,\n done,\n}: {\n element: HTMLElement\n transforms: Transform[]\n transition: string\n done?: () => void\n}) {\n const fallbackTimeout = setTimeout(() => {\n done?.()\n }, ANIMATION_TIMEOUT)\n\n transforms.forEach(({ property, from = '' }) => {\n element.style.setProperty(property, from)\n })\n element.style.setProperty('transition', '')\n\n function transitionEndHandler(event: TransitionEvent) {\n if (event.target !== element) {\n return\n }\n element.style.setProperty('transition', '')\n done?.()\n element.removeEventListener('transitionend', transitionEndHandler)\n clearTimeout(fallbackTimeout)\n }\n\n element.addEventListener('transitionend', transitionEndHandler)\n\n // Call requestAnimationFrame twice to make sure we have a full animation frame at our disposal\n window.requestAnimationFrame(() => {\n window.requestAnimationFrame(() => {\n element.style.setProperty('transition', transition)\n transforms.forEach(({ property, to = '' }) => {\n element.style.setProperty(property, to)\n })\n })\n })\n}\n\ntype ToastsAnimationToolkit = {\n /**\n * Used for gathering all the active stacked toast elements. Should be used by passing\n * `ref={mappedRef(toastId)}` to the stacked toasts.\n */\n mappedRef: (toastId: string) => (ref: HTMLElement | null) => void\n\n /**\n * The stacked toasts view should use this callback when it needs to remove a toast, instead of\n * removing it right away. The actual removal from the state (and consequently, from the DOM)\n * should happen in the `onAnimationDone` instead.\n */\n animateRemove: (toastId: string, onAnimationDone: () => void) => void\n}\n\n/**\n * Provides the functionality of animating the stacked toasts when they appear and before they\n * disappear.\n *\n * It works by keeping a mapping from toast IDs to the toast elements, and keeping a mapping from\n * toast IDs to their top position. Then, on every single re-render, it compares the new DOM\n * situation with the previously stored one in these mappings. With this information, it applies\n * animations that smoothly transitions between both states.\n */\nfunction useToastsAnimation(): ToastsAnimationToolkit {\n const refs = useMemo(() => new Map<string, HTMLElement | null>(), [])\n const positions = useMemo(() => new Map<string, number>(), [])\n\n useLayoutEffect(() => {\n const animations: Array<{\n element: HTMLElement\n transforms: Transform[]\n transition: string\n }> = []\n\n Array.from(refs.entries()).forEach(([id, element]) => {\n if (!element) {\n refs.delete(id)\n return\n }\n\n const prevTop = positions.get(id)\n const { top, height } = element.getBoundingClientRect()\n\n if (typeof prevTop === 'number' && prevTop !== top) {\n // Move animation\n animations.push({\n element,\n transition: ENTRANCE_TRANSITION,\n transforms: [{ property: 'transform', from: `translateY(${prevTop - top}px)` }],\n })\n } else if (typeof prevTop !== 'number') {\n // Enter animation\n animations.push({\n element,\n transition: ENTRANCE_TRANSITION,\n transforms: [\n { property: 'transform', from: `translateY(${height}px)` },\n { property: 'opacity', from: '0' },\n ],\n })\n }\n\n positions.set(id, element.getBoundingClientRect().top)\n })\n\n animations.forEach(({ element, transforms, transition }) => {\n animate({ element, transforms, transition })\n })\n })\n\n const animateRemove = useCallback(\n function animateRemove(id: string, onAnimationDone: () => void) {\n const element = refs.get(id)\n if (element) {\n // Removal animation\n animate({\n element,\n transforms: [{ property: 'opacity', to: '0' }],\n transition: EXIT_TRANSITION,\n done: onAnimationDone,\n })\n }\n },\n [refs],\n )\n\n const mappedRef = useCallback(\n (id: string) => (ref: HTMLElement | null) => {\n refs.set(id, ref)\n },\n [refs],\n )\n\n return { mappedRef, animateRemove }\n}\n\nexport { ANIMATION_TIMEOUT, useToastsAnimation }\n"],"names":["animate","element","transforms","transition","done","fallbackTimeout","setTimeout","forEach","property","from","style","setProperty","addEventListener","transitionEndHandler","event","target","removeEventListener","clearTimeout","window","requestAnimationFrame","to","refs","useMemo","Map","positions","useLayoutEffect","animations","Array","entries","id","delete","prevTop","get","top","height","getBoundingClientRect","push","set","animateRemove","useCallback","onAnimationDone","mappedRef","ref"],"mappings":"2FA8CA,SAASA,GAAQC,QACbA,EADaC,WAEbA,EAFaC,WAGbA,EAHaC,KAIbA,IAOA,MAAMC,EAAkBC,WAAW,WAC/BF,GAAAA,KA9BkB,KAiCtBF,EAAWK,QAAQ,EAAGC,SAAAA,EAAUC,KAAAA,EAAO,OACnCR,EAAQS,MAAMC,YAAYH,EAAUC,KAExCR,EAAQS,MAAMC,YAAY,aAAc,IAYxCV,EAAQW,iBAAiB,iBAVzB,SAASC,EAAqBC,GACtBA,EAAMC,SAAWd,IAGrBA,EAAQS,MAAMC,YAAY,aAAc,UACxCP,GAAAA,IACAH,EAAQe,oBAAoB,gBAAiBH,GAC7CI,aAAaZ,OAMjBa,OAAOC,sBAAsB,KACzBD,OAAOC,sBAAsB,KACzBlB,EAAQS,MAAMC,YAAY,aAAcR,GACxCD,EAAWK,QAAQ,EAAGC,SAAAA,EAAUY,GAAAA,EAAK,OACjCnB,EAAQS,MAAMC,YAAYH,EAAUY,mCAvD1B,+BAqF1B,WACI,MAAMC,EAAOC,UAAQ,IAAM,IAAIC,IAAmC,IAC5DC,EAAYF,UAAQ,IAAM,IAAIC,IAAuB,IAE3DE,kBAAgB,KACZ,MAAMC,EAID,GAELC,MAAMlB,KAAKY,EAAKO,WAAWrB,QAAQ,EAAEsB,EAAI5B,MACrC,IAAKA,EAED,YADAoB,EAAKS,OAAOD,GAIhB,MAAME,EAAUP,EAAUQ,IAAIH,IACxBI,IAAEA,EAAFC,OAAOA,GAAWjC,EAAQkC,wBAET,iBAAZJ,GAAwBA,IAAYE,EAE3CP,EAAWU,KAAK,CACZnC,QAAAA,EACAE,WA5GQ,yCA6GRD,WAAY,CAAC,CAAEM,SAAU,YAAaC,oBAAoBsB,EAAUE,aAE9C,iBAAZF,GAEdL,EAAWU,KAAK,CACZnC,QAAAA,EACAE,WAnHQ,yCAoHRD,WAAY,CACR,CAAEM,SAAU,YAAaC,mBAAoByB,SAC7C,CAAE1B,SAAU,UAAWC,KAAM,QAKzCe,EAAUa,IAAIR,EAAI5B,EAAQkC,wBAAwBF,OAGtDP,EAAWnB,QAAQ,EAAGN,QAAAA,EAASC,WAAAA,EAAYC,WAAAA,MACvCH,EAAQ,CAAEC,QAAAA,EAASC,WAAAA,EAAYC,WAAAA,QAIvC,MAAMmC,EAAgBC,eAClB,SAAuBV,EAAYW,GAC/B,MAAMvC,EAAUoB,EAAKW,IAAIH,GACrB5B,GAEAD,EAAQ,CACJC,QAAAA,EACAC,WAAY,CAAC,CAAEM,SAAU,UAAWY,GAAI,MACxCjB,WA1II,oBA2IJC,KAAMoC,MAIlB,CAACnB,IAUL,MAAO,CAAEoB,UAPSF,cACbV,GAAgBa,IACbrB,EAAKgB,IAAIR,EAAIa,IAEjB,CAACrB,IAGeiB,cAAAA"}
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("../../_virtual/_rollupPluginBabelHelpers.js"),s=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,o=require("../box/box.js"),a=require("../stack/stack.js"),r=require("./toast.module.css.js"),n=require("./static-toast.js"),i=require("ariakit/portal"),u=require("../common-helpers.js"),l=require("./toast-animation.js");const c=["toastId"],d=s.forwardRef((function({message:e,description:t,icon:o,action:a,autoDismissDelay:r,dismissLabel:i,showDismissButton:u=!0,toastId:l,onDismiss:c,onRemoveToast:d},m){const[f,p]=s.useState(Boolean(r)),b=s.useRef(),j=s.useCallback((function(){p(!0)}),[]),v=s.useCallback((function(){p(!1),clearTimeout(b.current),b.current=void 0}),[]);return s.useEffect((function(){if(f&&r)return b.current=window.setTimeout(()=>{d(l),null==c||c()},1e3*r),v}),[r,c,d,l,v,f]),s.createElement(n.StaticToast,{ref:m,message:e,description:t,icon:o,action:a,onDismiss:u?()=>{null==c||c(),d(l)}:void 0,dismissLabel:i,onMouseEnter:v,onMouseLeave:j})})),m=s.createContext(()=>()=>{});function f(){return s.useContext(m)}exports.Toast=function(e){const t=f(),o=s.useRef(e);return s.useEffect(()=>t(o.current),[t]),null},exports.ToastsProvider=function({children:e,padding:n="large",defaultAutoDismissDelay:f=10,defaultDismissLabel:p="Close"}){const[b,j]=s.useState([]),{mappedRef:v,animateRemove:x}=l.useToastsAnimation(),k=s.useCallback((function(e){x(e,()=>{j(t=>{const s=t.findIndex(t=>t.toastId===e);if(s<0)return t;const o=[...t];return o.splice(s,1),o})})}),[x]),D=s.useCallback((function(e){const s=u.generateElementId("toast"),o=t.objectSpread2(t.objectSpread2({autoDismissDelay:f,dismissLabel:p},e),{},{toastId:s});return j(e=>[...e,o]),()=>k(s)}),[f,p,k]);return s.createElement(m.Provider,{value:D},e,s.createElement(i.Portal,null,0===b.length?null:s.createElement(o.Box,{className:r.default.stackedToastsView,position:"fixed",width:"full",paddingX:n,paddingBottom:n},s.createElement(a.Stack,{space:"medium"},b.map(e=>{let{toastId:o}=e,a=t.objectWithoutProperties(e,c);return s.createElement(d,t.objectSpread2({key:o,ref:v(o),toastId:o,onRemoveToast:k},a))})))))},exports.useToasts=f;
2
- //# sourceMappingURL=use-toasts.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-toasts.js","sources":["../../../src/new-components/toast/use-toasts.tsx"],"sourcesContent":["import React from 'react'\nimport { Portal } from 'ariakit/portal'\n\nimport { generateElementId } from '../common-helpers'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { StaticToast, StaticToastProps } from './static-toast'\n\nimport styles from './toast.module.css'\n\nimport type { Space } from '../common-types'\nimport { useToastsAnimation } from './toast-animation'\n\n/**\n * The props needed to fire up a new notification toast.\n */\ntype ToastProps = StaticToastProps & {\n /**\n * The number of seconds the toast is expected to be shown before it is dismissed automatically,\n * or false to disable auto-dismiss.\n *\n * It defaults to whatever is the autoDismissDelay set in the ToastsProvider.\n */\n autoDismissDelay?: number | false\n\n /**\n * The label for the button that dismisses the toast.\n *\n * It defaults to the value set in the ToastsProvider, but individual toasts can have a\n * different value if needed.\n */\n dismissLabel?: string\n\n /**\n * Whether to show the dismiss button or not.\n *\n * Use this value with care. If combined with disabling `autoDismissDelay`, it may leave you\n * with toasts that the user won't be able to dismiss at will. It then is your responsibility to\n * dismiss the toast by calling the function returned by `showToast`.\n */\n showDismissButton?: boolean\n}\n\n//\n// InternalToast component and its props\n//\n\ntype InternalToastProps = Omit<ToastProps, 'autoDismissDelay' | 'dismissLabel'> &\n Required<Pick<ToastProps, 'autoDismissDelay' | 'dismissLabel'>> & {\n toastId: string\n onRemoveToast: (toastId: string) => void\n }\n\n/** @private */\nconst InternalToast = React.forwardRef<HTMLDivElement, InternalToastProps>(function InternalToast(\n {\n message,\n description,\n icon,\n action,\n autoDismissDelay,\n dismissLabel,\n showDismissButton = true,\n toastId,\n onDismiss,\n onRemoveToast,\n },\n ref,\n) {\n const [timeoutRunning, setTimeoutRunning] = React.useState(Boolean(autoDismissDelay))\n const timeoutRef = React.useRef<number | undefined>()\n\n const startTimeout = React.useCallback(function startTimeout() {\n setTimeoutRunning(true)\n }, [])\n\n const stopTimeout = React.useCallback(function stopTimeout() {\n setTimeoutRunning(false)\n clearTimeout(timeoutRef.current)\n timeoutRef.current = undefined\n }, [])\n\n React.useEffect(\n function setupAutoDismiss() {\n if (!timeoutRunning || !autoDismissDelay) return\n timeoutRef.current = window.setTimeout(() => {\n onRemoveToast(toastId)\n onDismiss?.()\n }, autoDismissDelay * 1000)\n return stopTimeout\n },\n [autoDismissDelay, onDismiss, onRemoveToast, toastId, stopTimeout, timeoutRunning],\n )\n\n return (\n <StaticToast\n ref={ref}\n message={message}\n description={description}\n icon={icon}\n action={action}\n onDismiss={\n showDismissButton\n ? () => {\n onDismiss?.()\n onRemoveToast(toastId)\n }\n : undefined\n }\n dismissLabel={dismissLabel}\n // @ts-expect-error\n onMouseEnter={stopTimeout}\n onMouseLeave={startTimeout}\n />\n )\n})\n\n//\n// Internal state and context\n//\n\ntype InternalToastEntry = Omit<InternalToastProps, 'onRemoveToast'>\ntype ToastsList = readonly InternalToastEntry[]\n\ntype ShowToastAction = (props: ToastProps) => () => void\nconst ToastsContext = React.createContext<ShowToastAction>(() => () => undefined)\n\n/**\n * The props needed by the ToastsProvider component.\n *\n * @see ToastsProvider\n */\ntype ToastsProviderProps = {\n /**\n * The default label to apply to toast dismiss buttons.\n *\n * This is useful in environments that need locatization, so you do not need to pass the same\n * translated label every time you trigger a toast.\n *\n * However, you can still apply a different label to a specific toast, by passing a different\n * value when calling showToast.\n *\n * @default 'Close'\n */\n defaultDismissLabel?: string\n\n /**\n * The default number of seconds after which the toast will be dismissed automatically.\n *\n * You can pass a different value to a specific toast when calling `showToast`. You can even\n * pass `false` if you want a certain toast to never be dismissed automatically.\n *\n * @default 10 (seconds)\n */\n defaultAutoDismissDelay?: number\n\n /**\n * The padding used to separate the toasts from the viewport borders.\n *\n * @default 'large'\n */\n padding?: Space\n\n /**\n * The app wrapped by the provider.\n */\n children: NonNullable<React.ReactNode>\n}\n\n/**\n * Provides the state management and rendering of the toasts currently active.\n *\n * You need to render this near the top of your app components tree, in order to `useToasts`.\n *\n * @see useToasts\n */\nfunction ToastsProvider({\n children,\n padding = 'large',\n defaultAutoDismissDelay = 10 /* seconds */,\n defaultDismissLabel = 'Close',\n}: ToastsProviderProps) {\n const [toasts, setToasts] = React.useState<ToastsList>([])\n const { mappedRef, animateRemove } = useToastsAnimation()\n\n const removeToast = React.useCallback(\n function onRemoveToast(toastId: string) {\n animateRemove(toastId, () => {\n setToasts((list) => {\n const index = list.findIndex((n) => n.toastId === toastId)\n if (index < 0) return list\n const copy = [...list]\n copy.splice(index, 1)\n return copy\n })\n })\n },\n [animateRemove],\n )\n\n const showToast = React.useCallback(\n function showToast(props: ToastProps) {\n const toastId = generateElementId('toast')\n const newToast: InternalToastEntry = {\n autoDismissDelay: defaultAutoDismissDelay,\n dismissLabel: defaultDismissLabel,\n ...props,\n toastId,\n }\n setToasts((list) => [...list, newToast])\n return () => removeToast(toastId)\n },\n [defaultAutoDismissDelay, defaultDismissLabel, removeToast],\n )\n\n return (\n <ToastsContext.Provider value={showToast}>\n {children}\n <Portal>\n {toasts.length === 0 ? null : (\n <Box\n className={styles.stackedToastsView}\n position=\"fixed\"\n width=\"full\"\n paddingX={padding}\n paddingBottom={padding}\n >\n <Stack space=\"medium\">\n {toasts.map(({ toastId, ...props }) => (\n <InternalToast\n key={toastId}\n ref={mappedRef(toastId)}\n toastId={toastId}\n onRemoveToast={removeToast}\n {...props}\n />\n ))}\n </Stack>\n </Box>\n )}\n </Portal>\n </ToastsContext.Provider>\n )\n}\n\n/**\n * Provides a function `showToast` that shows a new toast every time you call it.\n *\n * ```jsx\n * const showToast = useToasts()\n *\n * <button onClick={() => showToast({ message: 'Hello' })}>\n * Say hello\n * </button>\n * ```\n *\n * All toasts fired via this function are rendered in a global fixed location, and stacked one on\n * top of the other.\n *\n * When called, `showToast` returns a function that dismisses the toast when called.\n *\n * @see ToastsProvider\n */\nfunction useToasts() {\n return React.useContext(ToastsContext)\n}\n\n/**\n * Adds a toast to be rendered, stacked alongside any other currently active toasts.\n *\n * For most situations, you should prefer to use the `showToast` function obtained from `useToasts`.\n * This component is provided for convenience to render toasts in the markup, but it has some\n * peculiarities, which are discussed below.\n *\n * Internally, this calls `showToast`. It is provided for two reasons:\n *\n * 1. Convenience, when you want to fire a toast in markup/jsx code. Keep in mind, though, that\n * toasts rendered in this way will be removed from view when the context where it is rendered\n * is unmounted. Unlike toasts fired with `showToast`, which will normally be dismissed, either\n * by the user or after a delay. They'll still be animated on their way out, though.\n * 2. When combined with disabling dismissing it (e.g. `showDismissButton={false}` and\n * `autoDismissDelay={false}` it provides a way to show \"permanent\" toasts that only go away when\n * the component ceases to be rendered).\n *\n * This is useful for cases when the consumer wants to control when a toast is visible, and to keep\n * it visible based on an app-specific condition.\n *\n * Something important to note about this component is that it triggers the toast based on the props\n * passed when first rendered, and it does not update the toast if these props change on subsequent\n * renders. In this sense, this is an imperative component, more than a descriptive one. This is\n * done to simplify the internals, and to keep it in line with how `showToast` works: you fire up a\n * toast imperatively, and you loose control over it. It remains rendered according to the props you\n * first passed.\n *\n * @see useToasts\n */\nfunction Toast(props: ToastProps) {\n const showToast = useToasts()\n const propsRef = React.useRef<ToastProps>(props)\n React.useEffect(() => {\n const dismissToast = showToast(propsRef.current)\n return dismissToast\n }, [showToast])\n return null\n}\n\nexport { Toast, ToastsProvider, useToasts }\nexport type { ToastProps, ToastsProviderProps }\n"],"names":["InternalToast","React","forwardRef","message","description","icon","action","autoDismissDelay","dismissLabel","showDismissButton","toastId","onDismiss","onRemoveToast","ref","timeoutRunning","setTimeoutRunning","useState","Boolean","timeoutRef","useRef","startTimeout","useCallback","stopTimeout","clearTimeout","current","undefined","useEffect","window","setTimeout","StaticToast","onMouseEnter","onMouseLeave","ToastsContext","createContext","useToasts","useContext","props","showToast","propsRef","children","padding","defaultAutoDismissDelay","defaultDismissLabel","toasts","setToasts","mappedRef","animateRemove","useToastsAnimation","removeToast","list","index","findIndex","n","copy","splice","generateElementId","newToast","Provider","value","Portal","length","Box","className","styles","stackedToastsView","position","width","paddingX","paddingBottom","Stack","space","map","_ref","key"],"mappings":"ybAsDMA,EAAgBC,EAAMC,YAA+C,UACvEC,QACIA,EADJC,YAEIA,EAFJC,KAGIA,EAHJC,OAIIA,EAJJC,iBAKIA,EALJC,aAMIA,EANJC,kBAOIA,GAAoB,EAPxBC,QAQIA,EARJC,UASIA,EATJC,cAUIA,GAEJC,GAEA,MAAOC,EAAgBC,GAAqBd,EAAMe,SAASC,QAAQV,IAC7DW,EAAajB,EAAMkB,SAEnBC,EAAenB,EAAMoB,aAAY,WACnCN,GAAkB,KACnB,IAEGO,EAAcrB,EAAMoB,aAAY,WAClCN,GAAkB,GAClBQ,aAAaL,EAAWM,SACxBN,EAAWM,aAAUC,IACtB,IAcH,OAZAxB,EAAMyB,WACF,WACI,GAAKZ,GAAmBP,EAKxB,OAJAW,EAAWM,QAAUG,OAAOC,WAAW,KACnChB,EAAcF,SACdC,GAAAA,KACkB,IAAnBJ,GACIe,IAEX,CAACf,EAAkBI,EAAWC,EAAeF,EAASY,EAAaR,IAInEb,gBAAC4B,eACGhB,IAAKA,EACLV,QAASA,EACTC,YAAaA,EACbC,KAAMA,EACNC,OAAQA,EACRK,UACIF,EACM,WACIE,GAAAA,IACAC,EAAcF,SAElBe,EAEVjB,aAAcA,EAEdsB,aAAcR,EACdS,aAAcX,OAapBY,EAAgB/B,EAAMgC,cAA+B,IAAM,QA0IjE,SAASC,IACL,OAAOjC,EAAMkC,WAAWH,iBAgC5B,SAAeI,GACX,MAAMC,EAAYH,IACZI,EAAWrC,EAAMkB,OAAmBiB,GAK1C,OAJAnC,EAAMyB,UAAU,IACSW,EAAUC,EAASd,SAEzC,CAACa,IACG,6BA/HX,UAAwBE,SACpBA,EADoBC,QAEpBA,EAAU,QAFUC,wBAGpBA,EAA0B,uBAC1BC,EAAsB,UAEtB,MAAOC,EAAQC,GAAa3C,EAAMe,SAAqB,KACjD6B,UAAEA,EAAFC,cAAaA,GAAkBC,uBAE/BC,EAAc/C,EAAMoB,aACtB,SAAuBX,GACnBoC,EAAcpC,EAAS,KACnBkC,EAAWK,IACP,MAAMC,EAAQD,EAAKE,UAAWC,GAAMA,EAAE1C,UAAYA,GAClD,GAAIwC,EAAQ,EAAG,OAAOD,EACtB,MAAMI,EAAO,IAAIJ,GAEjB,OADAI,EAAKC,OAAOJ,EAAO,GACZG,QAInB,CAACP,IAGCT,EAAYpC,EAAMoB,aACpB,SAAmBe,GACf,MAAM1B,EAAU6C,oBAAkB,SAC5BC,mCACFjD,iBAAkBkC,EAClBjC,aAAckC,GACXN,OACH1B,QAAAA,IAGJ,OADAkC,EAAWK,GAAS,IAAIA,EAAMO,IACvB,IAAMR,EAAYtC,KAE7B,CAAC+B,EAAyBC,EAAqBM,IAGnD,OACI/C,gBAAC+B,EAAcyB,UAASC,MAAOrB,GAC1BE,EACDtC,gBAAC0D,cACsB,IAAlBhB,EAAOiB,OAAe,KACnB3D,gBAAC4D,OACGC,UAAWC,UAAOC,kBAClBC,SAAS,QACTC,MAAM,OACNC,SAAU3B,EACV4B,cAAe5B,GAEfvC,gBAACoE,SAAMC,MAAM,UACR3B,EAAO4B,IAAIC,IAAA,IAAC9D,QAAEA,KAAY0B,iCAAf,OACRnC,gBAACD,mBACGyE,IAAK/D,EACLG,IAAKgC,EAAUnC,GACfA,QAASA,EACTE,cAAeoC,GACXZ"}
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("../box/box.js"),o=require("ariakit/tooltip"),n=require("./tooltip.module.css.js");exports.HIDE_DELAY=100,exports.SHOW_DELAY=500,exports.Tooltip=function({children:l,content:u,position:i="top",gapSize:a=3,withArrow:s=!1,exceptionallySetClassName:c}){const p=function(r){const n=o.useTooltipState(r),l=function(){const e=t.useRef(),r=t.useCallback((function(){null!=e.current&&clearTimeout(e.current)}),[]);return t.useEffect(()=>r,[r]),t.useCallback((function(t,o){return()=>{r(),e.current=setTimeout(t,o)}}),[r])}();return t.useMemo(()=>e.objectSpread2(e.objectSpread2({},n),{},{show:l(()=>n.show(),500),hide:l(()=>n.hide(),100)}),[l,n])}({placement:i,gutter:a}),d=t.Children.only(l);if(!u||!d)return d;if("string"==typeof d.ref)throw new Error("Tooltip: String refs cannot be used as they cannot be forwarded");function f(e){var t;e.currentTarget.addEventListener("keyup",(function(e){const t=e.key;"Escape"!==t&&"Enter"!==t&&"Space"!==t&&p.show()}),{once:!0}),e.preventDefault(),null==d||null==(t=d.props)||null==t.onFocus||t.onFocus(e)}function m(e){var t;p.hide(),null==d||null==(t=d.props)||null==t.onBlur||t.onBlur(e)}return t.createElement(t.Fragment,null,t.createElement(o.TooltipAnchor,{state:p,ref:d.ref,described:!0},r=>t.cloneElement(d,e.objectSpread2(e.objectSpread2(e.objectSpread2({},r),d.props),{},{onFocus:f,onBlur:m}))),p.open?t.createElement(r.Box,{as:o.Tooltip,state:p,className:[n.default.tooltip,c],background:"toast",borderRadius:"standard",paddingX:"small",paddingY:"xsmall",maxWidth:"medium",width:"fitContent",overflow:"hidden",textAlign:"center"},s?t.createElement(o.TooltipArrow,null):null,"function"==typeof u?u():u):null)};
2
- //# sourceMappingURL=tooltip.js.map