@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
@@ -0,0 +1 @@
1
+ {"version":3,"file":"menu.js","sources":["../../src/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":"ylBA4BMA,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"}
File without changes
File without changes
File without changes
@@ -0,0 +1,2 @@
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
@@ -0,0 +1 @@
1
+ {"version":3,"file":"modal.js","sources":["../../src/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":"47BA6BMA,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"}
File without changes
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import type { AlertTone } from '../common-types';
2
+ import type { AlertTone } from '../utils/common-types';
3
3
  declare type NoticeProps = {
4
4
  id?: string;
5
5
  children: React.ReactNode;
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../utils/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
@@ -0,0 +1 @@
1
+ {"version":3,"file":"notice.js","sources":["../../src/notice/notice.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { Columns, Column } from '../columns'\nimport { AlertIcon } from '../icons/alert-icon'\n\nimport type { AlertTone } from '../utils/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":"0RAgBA,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"}
@@ -0,0 +1,2 @@
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("../utils/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
@@ -0,0 +1 @@
1
+ {"version":3,"file":"password-field.js","sources":["../../src/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 '../utils/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":"uqBAoBsBA,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"}
@@ -0,0 +1,2 @@
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
@@ -0,0 +1 @@
1
+ {"version":3,"file":"select-field.js","sources":["../../src/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":"4YA0DA,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"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"spinner.js","sources":["../../src/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"}
File without changes
@@ -1,5 +1,5 @@
1
- import type { ResponsiveProp } from '../responsive-props';
2
- import type { DividerWeight, Space } from '../common-types';
1
+ import type { ResponsiveProp } from '../utils/responsive-props';
2
+ import type { DividerWeight, Space } from '../utils/common-types';
3
3
  import type { ReusableBoxProps } from '../box';
4
4
  declare type Align = 'start' | 'center' | 'end';
5
5
  interface StackProps extends ReusableBoxProps {
@@ -10,6 +10,6 @@ interface StackProps extends ReusableBoxProps {
10
10
  /** The weight of the dividers to add. Defaults to 'none', which means no dividers are added */
11
11
  dividers?: DividerWeight;
12
12
  }
13
- declare const Stack: import("../../utils/polymorphism").PolymorphicComponent<"div", StackProps, "obfuscateClassName">;
13
+ declare const Stack: import("../utils/polymorphism").PolymorphicComponent<"div", StackProps, "obfuscateClassName">;
14
14
  export type { StackProps };
15
15
  export { Stack };
@@ -1,2 +1,2 @@
1
- "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),i=(e(t),require("../../utils/polymorphism.js")),l=require("../responsive-props.js"),n=require("../box/box.js"),a=require("../divider/divider.js"),o=e(require("react-keyed-flatten-children"));const s=["as","space","align","dividers","width","children","exceptionallySetClassName"];exports.Stack=i.polymorphicComponent((function(e,i){let{as:c,space:d,align:p,dividers:u="none",width:m="full",children:f,exceptionallySetClassName:v}=e,h=r.objectWithoutProperties(e,s);const x=void 0===p?void 0:l.mapResponsiveProp(p,e=>"start"===e?"flexStart":"end"===e?"flexEnd":"center");return t.createElement(n.Box,r.objectSpread2(r.objectSpread2({},h),{},{display:"flex",flexDirection:"column",width:m,alignItems:x,gap:d,as:c,className:v,ref:i}),"none"!==u?t.Children.map(o(f),(e,r)=>r>0?t.createElement(t.Fragment,null,t.createElement(a.Divider,{weight:u}),e):e):f)}));
1
+ "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),i=(e(t),require("../utils/polymorphism.js")),l=require("../utils/responsive-props.js"),n=require("../box/box.js"),a=require("../divider/divider.js"),s=e(require("react-keyed-flatten-children"));const o=["as","space","align","dividers","width","children","exceptionallySetClassName"];exports.Stack=i.polymorphicComponent((function(e,i){let{as:c,space:d,align:p,dividers:u="none",width:m="full",children:f,exceptionallySetClassName:v}=e,h=r.objectWithoutProperties(e,o);const x=void 0===p?void 0:l.mapResponsiveProp(p,e=>"start"===e?"flexStart":"end"===e?"flexEnd":"center");return t.createElement(n.Box,r.objectSpread2(r.objectSpread2({},h),{},{display:"flex",flexDirection:"column",width:m,alignItems:x,gap:d,as:c,className:v,ref:i}),"none"!==u?t.Children.map(s(f),(e,r)=>r>0?t.createElement(t.Fragment,null,t.createElement(a.Divider,{weight:u}),e):e):f)}));
2
2
  //# sourceMappingURL=stack.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"stack.js","sources":["../../src/stack/stack.tsx"],"sourcesContent":["import * as React from 'react'\nimport flattenChildren from 'react-keyed-flatten-children'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport { mapResponsiveProp } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { Divider } from '../divider'\n\nimport type { ResponsiveProp } from '../utils/responsive-props'\nimport type { DividerWeight, Space } from '../utils/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"}
@@ -0,0 +1,2 @@
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("../utils/common-helpers.js"),d=require("../text/text.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=r.useId(x),C=r.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(d.Text,{exceptionallySetClassName:s.default.label},p)),m?l.createElement(n.FieldHint,{id:C},m):null)}));
2
+ //# sourceMappingURL=switch-field.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"switch-field.js","sources":["../../src/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 '../utils/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":"0iBA2BoBA,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"}
File without changes
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import type { Space } from '../common-types';
2
+ import type { Space } from '../utils/common-types';
3
3
  declare type TabsProps = {
4
4
  /** The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>` components */
5
5
  children: React.ReactNode;
@@ -35,7 +35,7 @@ declare type TabProps = {
35
35
  /**
36
36
  * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.
37
37
  */
38
- declare const Tab: import("../../utils/polymorphism").PolymorphicComponent<"button", TabProps, "obfuscateClassName">;
38
+ declare const Tab: import("../utils/polymorphism").PolymorphicComponent<"button", TabProps, "obfuscateClassName">;
39
39
  declare type TabListProps = ({
40
40
  /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */
41
41
  'aria-label': string;
@@ -79,7 +79,7 @@ declare type TabPanelProps = {
79
79
  /**
80
80
  * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.
81
81
  */
82
- declare const TabPanel: import("../../utils/polymorphism").PolymorphicComponent<"div", TabPanelProps, "omitClassName">;
82
+ declare const TabPanel: import("../utils/polymorphism").PolymorphicComponent<"div", TabPanelProps, "omitClassName">;
83
83
  declare type TabAwareSlotProps = {
84
84
  /**
85
85
  * Render prop used to provide the content to be rendered inside the slot. The render prop will be
@@ -0,0 +1,2 @@
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
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tabs.js","sources":["../../src/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 '../utils/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":"6jBAqBMA,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"}
File without changes
File without changes
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import type { Tone } from '../common-types';
2
+ import type { Tone } from '../utils/common-types';
3
3
  import type { BoxProps } from '../box';
4
4
  declare type TextProps = {
5
5
  children: React.ReactNode;
@@ -42,6 +42,6 @@ declare type TextProps = {
42
42
  */
43
43
  align?: BoxProps['textAlign'];
44
44
  };
45
- declare const Text: import("../../utils/polymorphism").PolymorphicComponent<"div", TextProps, "obfuscateClassName">;
45
+ declare const Text: import("../utils/polymorphism").PolymorphicComponent<"div", TextProps, "obfuscateClassName">;
46
46
  export type { TextProps };
47
47
  export { Text };
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),t=require("../../utils/polymorphism.js"),s=require("../responsive-props.js"),a=require("../box/box.js"),r=require("./text.module.css.js");const i=["as","size","weight","tone","align","children","lineClamp","exceptionallySetClassName"];exports.Text=t.polymorphicComponent((function(t,n){let{as:o,size:u="body",weight:p="regular",tone:m="normal",align:d,children:c,lineClamp:g,exceptionallySetClassName:x}=t,C=e.objectWithoutProperties(t,i);const b="string"==typeof g?Number(g)>1:(null!=g?g:1)>1;return l.createElement(a.Box,e.objectSpread2(e.objectSpread2({},C),{},{as:o,className:[x,r.default.text,"body"!==u?s.getClassNames(r.default,"size",u):null,"regular"!==p?s.getClassNames(r.default,"weight",p):null,"normal"!==m?s.getClassNames(r.default,"tone",m):null,b?r.default.lineClampMultipleLines:null,g?s.getClassNames(r.default,"lineClamp",g.toString()):null],textAlign:d,paddingRight:g?"xsmall":void 0,ref:n}),c)}));
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),t=require("../utils/polymorphism.js"),s=require("../utils/responsive-props.js"),a=require("../box/box.js"),r=require("./text.module.css.js");const i=["as","size","weight","tone","align","children","lineClamp","exceptionallySetClassName"];exports.Text=t.polymorphicComponent((function(t,n){let{as:o,size:u="body",weight:p="regular",tone:m="normal",align:d,children:c,lineClamp:g,exceptionallySetClassName:x}=t,C=e.objectWithoutProperties(t,i);const b="string"==typeof g?Number(g)>1:(null!=g?g:1)>1;return l.createElement(a.Box,e.objectSpread2(e.objectSpread2({},C),{},{as:o,className:[x,r.default.text,"body"!==u?s.getClassNames(r.default,"size",u):null,"regular"!==p?s.getClassNames(r.default,"weight",p):null,"normal"!==m?s.getClassNames(r.default,"tone",m):null,b?r.default.lineClampMultipleLines:null,g?s.getClassNames(r.default,"lineClamp",g.toString()):null],textAlign:d,paddingRight:g?"xsmall":void 0,ref:n}),c)}));
2
2
  //# sourceMappingURL=text.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"text.js","sources":["../../src/text/text.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { polymorphicComponent } from '../utils/polymorphism'\n\nimport type { Tone } from '../utils/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"}
File without changes
@@ -0,0 +1,2 @@
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
@@ -0,0 +1 @@
1
+ {"version":3,"file":"text-area.js","sources":["../../src/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":"icA2BiBA,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"}
@@ -0,0 +1,2 @@
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
@@ -0,0 +1 @@
1
+ {"version":3,"file":"text-field.js","sources":["../../src/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":"kcAekBA,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"}
@@ -0,0 +1,5 @@
1
+ import type { OpenInNewTab } from '../utils/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 };
@@ -0,0 +1,2 @@
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
@@ -0,0 +1 @@
1
+ {"version":3,"file":"text-link.js","sources":["../../src/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 '../utils/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":"oUAQiBA,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"}
File without changes
@@ -0,0 +1,2 @@
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