@tcn/ui 0.17.0 → 0.18.1

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 (394) hide show
  1. package/AI_USAGE.md +59 -0
  2. package/CHANGELOG.md +1009 -0
  3. package/ai-docs/actions.md +43 -0
  4. package/ai-docs/decorators.md +34 -0
  5. package/ai-docs/feedback.md +31 -0
  6. package/ai-docs/form.md +58 -0
  7. package/ai-docs/inputs.md +71 -0
  8. package/ai-docs/layouts.md +76 -0
  9. package/ai-docs/mobile.md +34 -0
  10. package/ai-docs/navigation.md +48 -0
  11. package/ai-docs/overlay.md +58 -0
  12. package/ai-docs/stacks.md +59 -0
  13. package/ai-docs/surfaces.md +79 -0
  14. package/ai-docs/themes.md +47 -0
  15. package/ai-docs/tokens.md +35 -0
  16. package/ai-docs/typography.md +38 -0
  17. package/ai-docs/utils.md +51 -0
  18. package/dist/actions/index.d.ts +0 -1
  19. package/dist/actions/index.d.ts.map +1 -1
  20. package/dist/actions/index.js +6 -8
  21. package/dist/actions/index.js.map +1 -1
  22. package/dist/draggable.css +1 -1
  23. package/dist/draggable.module-DFYR5n3n.js +5 -0
  24. package/dist/draggable.module-DFYR5n3n.js.map +1 -0
  25. package/dist/field_set.css +1 -1
  26. package/dist/field_set.module-BpJTFCi4.js +5 -0
  27. package/dist/field_set.module-BpJTFCi4.js.map +1 -0
  28. package/dist/form/field/field.js +11 -10
  29. package/dist/form/field/field.js.map +1 -1
  30. package/dist/form/field_set/field_set.d.ts +6 -10
  31. package/dist/form/field_set/field_set.d.ts.map +1 -1
  32. package/dist/form/field_set/field_set.js +33 -61
  33. package/dist/form/field_set/field_set.js.map +1 -1
  34. package/dist/form/field_set/legend.d.ts +20 -0
  35. package/dist/form/field_set/legend.d.ts.map +1 -0
  36. package/dist/form/field_set/legend.js +28 -0
  37. package/dist/form/field_set/legend.js.map +1 -0
  38. package/dist/form/index.d.ts +2 -1
  39. package/dist/form/index.d.ts.map +1 -1
  40. package/dist/form/index.js +24 -22
  41. package/dist/form/index.js.map +1 -1
  42. package/dist/inputs/color_input/color_input.js +2 -3
  43. package/dist/inputs/color_input/color_input.js.map +1 -1
  44. package/dist/inputs/color_input/color_picker.js +11 -10
  45. package/dist/inputs/color_input/color_picker.js.map +1 -1
  46. package/dist/inputs/combo_box/combo_box.js +11 -10
  47. package/dist/inputs/combo_box/combo_box.js.map +1 -1
  48. package/dist/inputs/date_picker/date_picker.js +11 -10
  49. package/dist/inputs/date_picker/date_picker.js.map +1 -1
  50. package/dist/inputs/date_picker/date_picker_header.d.ts.map +1 -1
  51. package/dist/inputs/date_picker/date_picker_header.js +15 -14
  52. package/dist/inputs/date_picker/date_picker_header.js.map +1 -1
  53. package/dist/inputs/date_picker/date_picker_input.js +9 -9
  54. package/dist/inputs/date_picker/date_picker_time_selector.js +2 -3
  55. package/dist/inputs/date_picker/date_picker_time_selector.js.map +1 -1
  56. package/dist/inputs/date_picker/date_picker_year_input.js +2 -3
  57. package/dist/inputs/date_picker/date_picker_year_input.js.map +1 -1
  58. package/dist/inputs/date_picker/date_picker_year_selector.js +22 -22
  59. package/dist/inputs/date_picker/date_picker_year_selector.js.map +1 -1
  60. package/dist/inputs/mask_input/key_capture_input.js +21 -20
  61. package/dist/inputs/mask_input/key_capture_input.js.map +1 -1
  62. package/dist/inputs/mask_input/mask_input.js +18 -17
  63. package/dist/inputs/mask_input/mask_input.js.map +1 -1
  64. package/dist/inputs/multiselect/multiselect.js +11 -10
  65. package/dist/inputs/multiselect/multiselect.js.map +1 -1
  66. package/dist/inputs/multiselect/multiselect_inline_values.d.ts.map +1 -1
  67. package/dist/inputs/multiselect/multiselect_inline_values.js +15 -15
  68. package/dist/inputs/multiselect/multiselect_inline_values.js.map +1 -1
  69. package/dist/inputs/multiselect/multiselect_values.js +16 -17
  70. package/dist/inputs/multiselect/multiselect_values.js.map +1 -1
  71. package/dist/inputs/phone_number_input/phone_number_context.js +13 -12
  72. package/dist/inputs/phone_number_input/phone_number_context.js.map +1 -1
  73. package/dist/inputs/phone_number_input/phone_number_input_adapter.js +2 -3
  74. package/dist/inputs/phone_number_input/phone_number_input_adapter.js.map +1 -1
  75. package/dist/inputs/phone_number_input/sip_input.js +8 -9
  76. package/dist/inputs/phone_number_input/sip_input.js.map +1 -1
  77. package/dist/inputs/select/select.js +9 -9
  78. package/dist/inputs/slider/slider.js +21 -20
  79. package/dist/inputs/slider/slider.js.map +1 -1
  80. package/dist/inputs/suggestions/suggestion_list.js +9 -9
  81. package/dist/inputs/switch/switch.js +16 -15
  82. package/dist/inputs/switch/switch.js.map +1 -1
  83. package/dist/inputs/unit_input/unit_input.js +11 -10
  84. package/dist/inputs/unit_input/unit_input.js.map +1 -1
  85. package/dist/mobile/inputs/date_picker/mobile_date_picker_header.js +11 -10
  86. package/dist/mobile/inputs/date_picker/mobile_date_picker_header.js.map +1 -1
  87. package/dist/mobile/inputs/date_picker/mobile_date_picker_input.js +11 -10
  88. package/dist/mobile/inputs/date_picker/mobile_date_picker_input.js.map +1 -1
  89. package/dist/mobile/inputs/date_picker/mobile_date_picker_year_selector.js +11 -10
  90. package/dist/mobile/inputs/date_picker/mobile_date_picker_year_selector.js.map +1 -1
  91. package/dist/multiselect_values.css +1 -1
  92. package/dist/navigation/tabs/state/link/tab_link.js +11 -10
  93. package/dist/navigation/tabs/state/link/tab_link.js.map +1 -1
  94. package/dist/overlay/frame/frame.d.ts.map +1 -1
  95. package/dist/overlay/frame/frame.js +117 -76
  96. package/dist/overlay/frame/frame.js.map +1 -1
  97. package/dist/overlay/menu/menu.js +21 -20
  98. package/dist/overlay/menu/menu.js.map +1 -1
  99. package/dist/overlay/popper/base/dismissal_decorator.js +3 -3
  100. package/dist/overlay/popper/base/dismissal_decorator.js.map +1 -1
  101. package/dist/overlay/popper/context_popper.js +11 -10
  102. package/dist/overlay/popper/context_popper.js.map +1 -1
  103. package/dist/overlay/popper/element_popper.js +11 -10
  104. package/dist/overlay/popper/element_popper.js.map +1 -1
  105. package/dist/overlay/popper/legacy/popper.js +28 -27
  106. package/dist/overlay/popper/legacy/popper.js.map +1 -1
  107. package/dist/overlay/popper/preview_popper.js +11 -10
  108. package/dist/overlay/popper/preview_popper.js.map +1 -1
  109. package/dist/overlay/tethered/tethered.js +11 -10
  110. package/dist/overlay/tethered/tethered.js.map +1 -1
  111. package/dist/resizable.css +1 -1
  112. package/dist/resizable.module-ur5FBfxo.js +5 -0
  113. package/dist/resizable.module-ur5FBfxo.js.map +1 -0
  114. package/dist/resize_handle.css +1 -1
  115. package/dist/stacks/box/box.d.ts +14 -0
  116. package/dist/stacks/box/box.d.ts.map +1 -1
  117. package/dist/stacks/box/box.js +98 -99
  118. package/dist/stacks/box/box.js.map +1 -1
  119. package/dist/stacks/box/end_resize_handle.js +5 -5
  120. package/dist/stacks/box/end_resize_handle.js.map +1 -1
  121. package/dist/stacks/box/resize_handlers.d.ts.map +1 -1
  122. package/dist/stacks/box/resize_handlers.js +12 -12
  123. package/dist/stacks/box/resize_handlers.js.map +1 -1
  124. package/dist/stacks/box/start_resize_handle.js +7 -7
  125. package/dist/stacks/box/start_resize_handle.js.map +1 -1
  126. package/dist/stacks/box/types.d.ts +3 -2
  127. package/dist/stacks/box/types.d.ts.map +1 -1
  128. package/dist/stacks/h_collapsible_box.js +14 -13
  129. package/dist/stacks/h_collapsible_box.js.map +1 -1
  130. package/dist/stacks/v_collapsible_box.js +14 -13
  131. package/dist/stacks/v_collapsible_box.js.map +1 -1
  132. package/dist/surfaces/alert/alert.js +7 -8
  133. package/dist/surfaces/alert/alert.js.map +1 -1
  134. package/dist/themes/stories/button_showcase.d.ts.map +1 -1
  135. package/dist/themes/stories/controls_fieldset.d.ts.map +1 -1
  136. package/dist/themes/stories/menu_showcase.d.ts.map +1 -1
  137. package/dist/themes/themes/ergo/ergo_theme.css +1 -1
  138. package/dist/themes/themes/ergo/ergo_theme.d.ts.map +1 -1
  139. package/dist/themes/themes/ergo/ergo_theme.js +336 -294
  140. package/dist/themes/themes/ergo/ergo_theme.js.map +1 -1
  141. package/dist/themes/themes/ergo/parts/actions.css +1 -0
  142. package/dist/themes/themes/ergo/parts/base.css +1 -0
  143. package/dist/themes/themes/ergo/parts/form.css +1 -0
  144. package/dist/themes/themes/ergo/parts/inputs.css +1 -0
  145. package/dist/themes/themes/ergo/parts/navigation.css +1 -0
  146. package/dist/themes/themes/windows_98/windows_98.css +1 -1
  147. package/dist/themes/themes/windows_98/windows_98_theme.js +32 -43
  148. package/dist/themes/themes/windows_98/windows_98_theme.js.map +1 -1
  149. package/dist/utils/decorators/clone_with_decorator.d.ts +21 -0
  150. package/dist/utils/decorators/clone_with_decorator.d.ts.map +1 -0
  151. package/dist/utils/decorators/clone_with_decorator.js +16 -0
  152. package/dist/utils/decorators/clone_with_decorator.js.map +1 -0
  153. package/dist/utils/decorators/draggable/context.d.ts.map +1 -0
  154. package/dist/utils/decorators/draggable/context.js.map +1 -0
  155. package/dist/utils/{dnd/handle.d.ts → decorators/draggable/drag_handle.d.ts} +1 -1
  156. package/dist/utils/decorators/draggable/drag_handle.d.ts.map +1 -0
  157. package/dist/utils/{dnd/handle.js → decorators/draggable/drag_handle.js} +2 -2
  158. package/dist/utils/decorators/draggable/drag_handle.js.map +1 -0
  159. package/dist/utils/decorators/draggable/draggable.d.ts.map +1 -0
  160. package/dist/utils/{dnd → decorators}/draggable/draggable.js +3 -3
  161. package/dist/utils/decorators/draggable/draggable.js.map +1 -0
  162. package/dist/utils/decorators/draggable/index.d.ts +11 -0
  163. package/dist/utils/decorators/draggable/index.d.ts.map +1 -0
  164. package/dist/utils/decorators/draggable/index.js +14 -0
  165. package/dist/utils/{dnd → decorators/draggable}/types.d.ts +1 -1
  166. package/dist/utils/decorators/draggable/types.d.ts.map +1 -0
  167. package/dist/utils/{dnd/hooks → decorators/draggable}/use_drag_container.d.ts +2 -2
  168. package/dist/utils/decorators/draggable/use_drag_container.d.ts.map +1 -0
  169. package/dist/utils/decorators/draggable/use_drag_container.js.map +1 -0
  170. package/dist/utils/decorators/draggable/use_draggable.d.ts.map +1 -0
  171. package/dist/utils/decorators/draggable/use_draggable.js.map +1 -0
  172. package/dist/utils/decorators/index.d.ts +3 -0
  173. package/dist/utils/decorators/index.d.ts.map +1 -0
  174. package/dist/utils/decorators/index.js +27 -0
  175. package/dist/utils/decorators/index.js.map +1 -0
  176. package/dist/utils/decorators/resizable/context.d.ts.map +1 -0
  177. package/dist/utils/{resize → decorators/resizable}/context.js +1 -1
  178. package/dist/utils/decorators/resizable/context.js.map +1 -0
  179. package/dist/utils/decorators/resizable/handle_config.d.ts.map +1 -0
  180. package/dist/utils/decorators/resizable/handle_config.js +62 -0
  181. package/dist/utils/decorators/resizable/handle_config.js.map +1 -0
  182. package/dist/utils/decorators/resizable/index.d.ts.map +1 -0
  183. package/dist/utils/decorators/resizable/index.js.map +1 -0
  184. package/dist/utils/decorators/resizable/resizable.d.ts.map +1 -0
  185. package/dist/utils/{resize → decorators/resizable}/resizable.js +2 -2
  186. package/dist/utils/decorators/resizable/resizable.js.map +1 -0
  187. package/dist/utils/decorators/resizable/resize_handle.d.ts.map +1 -0
  188. package/dist/utils/{resize → decorators/resizable}/resize_handle.js +2 -2
  189. package/dist/utils/decorators/resizable/resize_handle.js.map +1 -0
  190. package/dist/utils/{resize → decorators/resizable}/resize_strategy.d.ts +1 -1
  191. package/dist/utils/decorators/resizable/resize_strategy.d.ts.map +1 -0
  192. package/dist/utils/decorators/resizable/resize_strategy.js.map +1 -0
  193. package/dist/utils/{resize → decorators/resizable}/types.d.ts +2 -2
  194. package/dist/utils/decorators/resizable/types.d.ts.map +1 -0
  195. package/dist/utils/hooks/labelled_by_context.d.ts +21 -0
  196. package/dist/utils/hooks/labelled_by_context.d.ts.map +1 -0
  197. package/dist/utils/hooks/labelled_by_context.js +12 -0
  198. package/dist/utils/hooks/labelled_by_context.js.map +1 -0
  199. package/dist/utils/index.d.ts +8 -8
  200. package/dist/utils/index.d.ts.map +1 -1
  201. package/dist/utils/index.js +44 -40
  202. package/dist/utils/index.js.map +1 -1
  203. package/dist/utils/listeners/click_away_listener.d.ts.map +1 -0
  204. package/dist/utils/{click_away_listener.js → listeners/click_away_listener.js} +1 -1
  205. package/dist/utils/listeners/click_away_listener.js.map +1 -0
  206. package/dist/utils/listeners/focus_redirect.d.ts.map +1 -0
  207. package/dist/utils/listeners/focus_redirect.js.map +1 -0
  208. package/dist/utils/listeners/index.d.ts +4 -0
  209. package/dist/utils/listeners/index.d.ts.map +1 -0
  210. package/dist/utils/listeners/index.js +10 -0
  211. package/dist/utils/listeners/index.js.map +1 -0
  212. package/dist/utils/listeners/mouse_leave_region.d.ts.map +1 -0
  213. package/dist/utils/listeners/mouse_leave_region.js.map +1 -0
  214. package/dist/utils/listeners/scroll_away_listener.d.ts.map +1 -0
  215. package/dist/utils/{scroll_away_listener.js → listeners/scroll_away_listener.js} +1 -1
  216. package/dist/utils/listeners/scroll_away_listener.js.map +1 -0
  217. package/dist/utils/system/index.d.ts +2 -0
  218. package/dist/utils/system/index.d.ts.map +1 -0
  219. package/dist/utils/system/index.js +2 -0
  220. package/dist/utils/system/index.js.map +1 -0
  221. package/dist/utils/system/variations.d.ts.map +1 -0
  222. package/dist/utils/system/variations.js +2 -0
  223. package/dist/utils/system/variations.js.map +1 -0
  224. package/dist/utils/types/sides.d.ts +3 -0
  225. package/dist/utils/types/sides.d.ts.map +1 -0
  226. package/package.json +7 -9
  227. package/src/actions/button/__stories__/button_group.stories.tsx +23 -24
  228. package/src/actions/index.ts +0 -1
  229. package/src/form/field/field.stories.tsx +2 -2
  230. package/src/form/field/h_field/h_field.stories.tsx +1 -1
  231. package/src/form/field/v_field/v_field.stories.tsx +1 -1
  232. package/src/form/field_set/field_set.module.css +0 -14
  233. package/src/form/field_set/field_set.stories.tsx +101 -1
  234. package/src/form/field_set/field_set.tsx +43 -57
  235. package/src/form/field_set/legend.tsx +44 -0
  236. package/src/form/index.ts +6 -1
  237. package/src/inputs/date_picker/date_picker_header.tsx +7 -5
  238. package/src/inputs/date_picker/date_picker_year_selector.tsx +5 -5
  239. package/src/inputs/multiselect/multiselect_inline_values.tsx +4 -3
  240. package/src/inputs/multiselect/multiselect_values.module.css +1 -0
  241. package/src/inputs/multiselect/multiselect_values.tsx +4 -4
  242. package/src/overlay/frame/frame.stories.tsx +2 -1
  243. package/src/overlay/frame/frame.tsx +68 -20
  244. package/src/overlay/popper/base/dismissal_decorator.tsx +3 -3
  245. package/src/overlay/popper/legacy/popper.stories.tsx +9 -2
  246. package/src/overlay/slide/slide.stories.tsx +1 -1
  247. package/src/stacks/box/box.tsx +29 -4
  248. package/src/stacks/box/end_resize_handle.tsx +1 -1
  249. package/src/stacks/box/resize_handlers.ts +1 -1
  250. package/src/stacks/box/start_resize_handle.tsx +1 -1
  251. package/src/stacks/box/types.ts +3 -2
  252. package/src/stacks/collapsible_box.stories.tsx +5 -5
  253. package/src/stacks/demo.stories.tsx +7 -7
  254. package/src/surfaces/page/page.stories.tsx +4 -4
  255. package/src/surfaces/window/window.stories.tsx +1 -1
  256. package/src/themes/stories/button_showcase.tsx +3 -1
  257. package/src/themes/stories/controls_fieldset.tsx +3 -1
  258. package/src/themes/stories/menu_showcase.tsx +3 -1
  259. package/src/themes/themes/ergo/INTERACTIVE.md +89 -0
  260. package/src/themes/themes/ergo/ROADMAP.md +116 -0
  261. package/src/themes/themes/ergo/ergo_theme.css +22 -717
  262. package/src/themes/themes/ergo/ergo_theme.ts +15 -1
  263. package/src/themes/themes/ergo/parts/actions.css +287 -0
  264. package/src/themes/themes/ergo/parts/base.css +62 -0
  265. package/src/themes/themes/ergo/parts/form.css +23 -0
  266. package/src/themes/themes/ergo/parts/inputs.css +252 -0
  267. package/src/themes/themes/ergo/parts/navigation.css +104 -0
  268. package/src/themes/themes/windows_98/windows_98.css +32 -43
  269. package/src/tokens/chip/chip.stories.tsx +5 -5
  270. package/src/utils/decorators/DECORATOR_PATTERN.md +86 -0
  271. package/src/utils/decorators/clone_with_decorator.ts +47 -0
  272. package/src/utils/{dnd → decorators/draggable}/__stories__/draggable.stories.tsx +7 -7
  273. package/src/utils/{dnd → decorators/draggable}/__stories__/use_draggable.stories.tsx +2 -2
  274. package/src/utils/{dnd/handle.tsx → decorators/draggable/drag_handle.tsx} +1 -1
  275. package/src/utils/{dnd → decorators}/draggable/draggable.tsx +2 -2
  276. package/src/utils/decorators/draggable/index.ts +15 -0
  277. package/src/utils/{dnd → decorators/draggable}/types.ts +1 -1
  278. package/src/utils/{dnd/hooks → decorators/draggable}/use_drag_container.ts +2 -2
  279. package/src/utils/decorators/index.ts +2 -0
  280. package/src/utils/{resize → decorators/resizable}/__stories__/resizable.stories.tsx +23 -23
  281. package/src/utils/{resize → decorators/resizable}/__tests__/handle_config.test.ts +19 -97
  282. package/src/utils/{resize → decorators/resizable}/__tests__/resize_strategy.test.ts +20 -20
  283. package/src/utils/{resize → decorators/resizable}/context.ts +1 -1
  284. package/src/utils/{resize → decorators/resizable}/handle_config.ts +7 -31
  285. package/src/utils/{resize → decorators/resizable}/resizable.tsx +1 -1
  286. package/src/utils/{resize → decorators/resizable}/resize_handle.module.css +1 -41
  287. package/src/utils/{resize → decorators/resizable}/resize_handle.tsx +1 -1
  288. package/src/utils/{resize → decorators/resizable}/resize_strategy.ts +1 -1
  289. package/src/utils/{resize → decorators/resizable}/types.ts +1 -7
  290. package/src/utils/hooks/labelled_by_context.ts +27 -0
  291. package/src/utils/index.ts +8 -8
  292. package/src/utils/{click_away_listener.tsx → listeners/click_away_listener.tsx} +1 -1
  293. package/src/utils/listeners/index.ts +3 -0
  294. package/src/utils/{scroll_away_listener.tsx → listeners/scroll_away_listener.tsx} +1 -1
  295. package/src/utils/system/index.ts +1 -0
  296. package/src/utils/types/sides.ts +2 -0
  297. package/dist/actions/button/slim_button/slim_button.d.ts +0 -9
  298. package/dist/actions/button/slim_button/slim_button.d.ts.map +0 -1
  299. package/dist/actions/button/slim_button/slim_button.js +0 -18
  300. package/dist/actions/button/slim_button/slim_button.js.map +0 -1
  301. package/dist/draggable.module-BgelQsuJ.js +0 -5
  302. package/dist/draggable.module-BgelQsuJ.js.map +0 -1
  303. package/dist/frame.css +0 -1
  304. package/dist/left_resize_handle.css +0 -1
  305. package/dist/resizable.module-I6iyBAvM.js +0 -5
  306. package/dist/resizable.module-I6iyBAvM.js.map +0 -1
  307. package/dist/right_resize_handle.css +0 -1
  308. package/dist/slim_button.css +0 -1
  309. package/dist/stacks/box/left_resize_handle.d.ts +0 -4
  310. package/dist/stacks/box/left_resize_handle.d.ts.map +0 -1
  311. package/dist/stacks/box/left_resize_handle.js +0 -36
  312. package/dist/stacks/box/left_resize_handle.js.map +0 -1
  313. package/dist/stacks/box/right_resize_handle.d.ts +0 -4
  314. package/dist/stacks/box/right_resize_handle.d.ts.map +0 -1
  315. package/dist/stacks/box/right_resize_handle.js +0 -36
  316. package/dist/stacks/box/right_resize_handle.js.map +0 -1
  317. package/dist/utils/click_away_listener.d.ts.map +0 -1
  318. package/dist/utils/click_away_listener.js.map +0 -1
  319. package/dist/utils/dnd/context.d.ts.map +0 -1
  320. package/dist/utils/dnd/context.js.map +0 -1
  321. package/dist/utils/dnd/draggable/draggable.d.ts.map +0 -1
  322. package/dist/utils/dnd/draggable/draggable.js.map +0 -1
  323. package/dist/utils/dnd/handle.d.ts.map +0 -1
  324. package/dist/utils/dnd/handle.js.map +0 -1
  325. package/dist/utils/dnd/hooks/use_drag_container.d.ts.map +0 -1
  326. package/dist/utils/dnd/hooks/use_drag_container.js.map +0 -1
  327. package/dist/utils/dnd/hooks/use_draggable.d.ts.map +0 -1
  328. package/dist/utils/dnd/hooks/use_draggable.js.map +0 -1
  329. package/dist/utils/dnd/types.d.ts.map +0 -1
  330. package/dist/utils/focus_redirect.d.ts.map +0 -1
  331. package/dist/utils/focus_redirect.js.map +0 -1
  332. package/dist/utils/mouse_leave_region.d.ts.map +0 -1
  333. package/dist/utils/mouse_leave_region.js.map +0 -1
  334. package/dist/utils/resize/context.d.ts.map +0 -1
  335. package/dist/utils/resize/context.js.map +0 -1
  336. package/dist/utils/resize/handle_config.d.ts.map +0 -1
  337. package/dist/utils/resize/handle_config.js +0 -85
  338. package/dist/utils/resize/handle_config.js.map +0 -1
  339. package/dist/utils/resize/index.d.ts.map +0 -1
  340. package/dist/utils/resize/resizable.d.ts.map +0 -1
  341. package/dist/utils/resize/resizable.js.map +0 -1
  342. package/dist/utils/resize/resize_handle.d.ts.map +0 -1
  343. package/dist/utils/resize/resize_handle.js.map +0 -1
  344. package/dist/utils/resize/resize_strategy.d.ts.map +0 -1
  345. package/dist/utils/resize/resize_strategy.js.map +0 -1
  346. package/dist/utils/resize/types.d.ts.map +0 -1
  347. package/dist/utils/scroll_away_listener.d.ts.map +0 -1
  348. package/dist/utils/scroll_away_listener.js.map +0 -1
  349. package/dist/utils/types/variations.d.ts.map +0 -1
  350. package/src/actions/button/__stories__/slim_button.stories.tsx +0 -274
  351. package/src/actions/button/slim_button/slim_button.module.css +0 -9
  352. package/src/actions/button/slim_button/slim_button.tsx +0 -26
  353. package/src/overlay/frame/frame.module.css +0 -5
  354. package/src/stacks/box/left_resize_handle.module.css +0 -12
  355. package/src/stacks/box/left_resize_handle.tsx +0 -39
  356. package/src/stacks/box/right_resize_handle.module.css +0 -12
  357. package/src/stacks/box/right_resize_handle.tsx +0 -38
  358. /package/dist/utils/{dnd → decorators/draggable}/context.d.ts +0 -0
  359. /package/dist/utils/{dnd → decorators/draggable}/context.js +0 -0
  360. /package/dist/utils/{dnd → decorators}/draggable/draggable.d.ts +0 -0
  361. /package/dist/utils/{resize → decorators/draggable}/index.js.map +0 -0
  362. /package/dist/utils/{dnd → decorators/draggable}/types.js +0 -0
  363. /package/dist/utils/{dnd → decorators/draggable}/types.js.map +0 -0
  364. /package/dist/utils/{dnd/hooks → decorators/draggable}/use_drag_container.js +0 -0
  365. /package/dist/utils/{dnd/hooks → decorators/draggable}/use_draggable.d.ts +0 -0
  366. /package/dist/utils/{dnd/hooks → decorators/draggable}/use_draggable.js +0 -0
  367. /package/dist/utils/{resize → decorators/resizable}/context.d.ts +0 -0
  368. /package/dist/utils/{resize → decorators/resizable}/handle_config.d.ts +0 -0
  369. /package/dist/utils/{resize → decorators/resizable}/index.d.ts +0 -0
  370. /package/dist/utils/{resize → decorators/resizable}/index.js +0 -0
  371. /package/dist/utils/{resize → decorators/resizable}/resizable.d.ts +0 -0
  372. /package/dist/utils/{resize → decorators/resizable}/resize_handle.d.ts +0 -0
  373. /package/dist/utils/{resize → decorators/resizable}/resize_strategy.js +0 -0
  374. /package/dist/utils/{resize → decorators/resizable}/types.js +0 -0
  375. /package/dist/utils/{resize → decorators/resizable}/types.js.map +0 -0
  376. /package/dist/utils/{click_away_listener.d.ts → listeners/click_away_listener.d.ts} +0 -0
  377. /package/dist/utils/{focus_redirect.d.ts → listeners/focus_redirect.d.ts} +0 -0
  378. /package/dist/utils/{focus_redirect.js → listeners/focus_redirect.js} +0 -0
  379. /package/dist/utils/{mouse_leave_region.d.ts → listeners/mouse_leave_region.d.ts} +0 -0
  380. /package/dist/utils/{mouse_leave_region.js → listeners/mouse_leave_region.js} +0 -0
  381. /package/dist/utils/{scroll_away_listener.d.ts → listeners/scroll_away_listener.d.ts} +0 -0
  382. /package/dist/utils/{types → system}/variations.d.ts +0 -0
  383. /package/src/utils/{dnd → decorators/draggable}/__stories__/draggable_stories.module.css +0 -0
  384. /package/src/utils/{dnd → decorators/draggable}/context.ts +0 -0
  385. /package/src/utils/{dnd → decorators}/draggable/draggable.module.css +0 -0
  386. /package/src/utils/{dnd/hooks → decorators/draggable}/use_draggable.ts +0 -0
  387. /package/src/utils/{resize → decorators/resizable}/__stories__/resizable_stories.module.css +0 -0
  388. /package/src/utils/{resize → decorators/resizable}/index.ts +0 -0
  389. /package/src/utils/{resize → decorators/resizable}/resizable.module.css +0 -0
  390. /package/src/utils/{click_away_listener.stories.tsx → listeners/click_away_listener.stories.tsx} +0 -0
  391. /package/src/utils/{focus_redirect.tsx → listeners/focus_redirect.tsx} +0 -0
  392. /package/src/utils/{mouse_leave_region.tsx → listeners/mouse_leave_region.tsx} +0 -0
  393. /package/src/utils/{scroll_away_listener.stories.tsx → listeners/scroll_away_listener.stories.tsx} +0 -0
  394. /package/src/utils/{types → system}/variations.ts +0 -0
@@ -1 +1 @@
1
- {"version":3,"file":"date_picker_year_selector.js","sources":["../../../src/inputs/date_picker/date_picker_year_selector.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';\nimport { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';\nimport { useSignalValue } from '@tcn/state';\nimport { SlimButton } from '../../actions/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { BodyText, Headline } from '../../typography/index.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport styles from './date_picker_year_selector.module.css';\nimport { FocusRedirect } from '../../utils/index.js';\nimport { clsx } from 'clsx';\n\nexport interface DatePickerYearSelectorProps {\n presenter: DatePickerPresenter;\n onClose: () => void;\n}\n\nexport function DatePickerYearSelector({\n presenter,\n onClose,\n}: DatePickerYearSelectorProps) {\n const { min, max, visibleYear, visibleMonth } = useSignalValue(\n presenter.stateBroadcast\n );\n\n const [offset, setOffset] = useState(0);\n const containerRef = useRef<HTMLDivElement | null>(null);\n const minYear = min == null ? -Infinity : min.getFullYear();\n const maxYear = max == null ? Infinity : max.getFullYear();\n const years: React.ReactNode[] = [];\n const remainder = visibleYear % 20;\n let firstYear = visibleYear - remainder + offset;\n let lastYear = firstYear + 19;\n\n for (let x = 0; x < 20; x++) {\n let disabled = false;\n const date = new Date(visibleYear, visibleMonth, 1);\n date.setFullYear(visibleYear - remainder + x + offset);\n\n if (date.getFullYear() > maxYear || date.getFullYear() < minYear) {\n disabled = true;\n }\n\n const Button: any = HStack;\n\n years.push(\n <Button\n as=\"button\"\n key={x}\n width=\"flex\"\n disabled={disabled}\n className={clsx(styles['date-picker-year-button'], 'tcn-date-picker-year-button')}\n data-is-disabled={String(disabled)}\n data-is-selected={String(date.getFullYear() === visibleYear)}\n onClick={() => {\n presenter.setVisibleYear(date.getFullYear());\n onClose();\n }}\n >\n <BodyText>{date.getFullYear()}</BodyText>\n </Button>\n );\n }\n\n function focus() {\n if (containerRef.current != null) {\n containerRef.current.focus();\n }\n }\n\n useEffect(() => {\n if (containerRef.current != null) {\n containerRef.current.focus();\n }\n }, []);\n\n const firstRow = years.slice(0, 4);\n const secondRow = years.slice(4, 8);\n const thirdRow = years.slice(8, 12);\n const fourthRow = years.slice(12, 16);\n const fifthRow = years.slice(16, 20);\n\n function prev() {\n setOffset(offset - 20);\n }\n\n function next() {\n setOffset(offset + 20);\n }\n\n return (\n <VStack\n ref={containerRef}\n tabIndex={0}\n padding=\"8px\"\n className={clsx(\n styles['date-picker-year-selector'],\n 'tcn-date-picker-year-selector'\n )}\n gap=\"4px\"\n >\n <HStack gap=\"4px\">\n <SlimButton onClick={prev} hierarchy=\"tertiary\">\n <ChevronLeftIcon flipOnRtl size=\"md\" />\n </SlimButton>\n <Spacer />\n <Headline\n selectable={false}\n emphasis=\"faint\"\n hierarchy=\"tertiary\"\n >{`${firstYear}-${lastYear}`}</Headline>\n <Spacer />\n <SlimButton hierarchy=\"tertiary\" onClick={next}>\n <ChevronRightIcon size=\"md\" />\n </SlimButton>\n </HStack>\n <HStack gap=\"4px\">{firstRow}</HStack>\n <HStack gap=\"4px\">{secondRow}</HStack>\n <HStack gap=\"4px\">{thirdRow}</HStack>\n <HStack gap=\"4px\">{fourthRow}</HStack>\n <HStack gap=\"4px\">{fifthRow}</HStack>\n <FocusRedirect onRedirect={focus} />\n </VStack>\n );\n}\n"],"names":["DatePickerYearSelector","presenter","onClose","min","max","visibleYear","visibleMonth","useSignalValue","offset","setOffset","useState","containerRef","useRef","minYear","maxYear","years","remainder","firstYear","lastYear","x","disabled","date","Button","HStack","jsx","clsx","styles","BodyText","focus","useEffect","firstRow","secondRow","thirdRow","fourthRow","fifthRow","prev","next","jsxs","VStack","SlimButton","ChevronLeftIcon","Spacer","Headline","ChevronRightIcon","FocusRedirect"],"mappings":"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"}
1
+ {"version":3,"file":"date_picker_year_selector.js","sources":["../../../src/inputs/date_picker/date_picker_year_selector.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';\nimport { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';\nimport { useSignalValue } from '@tcn/state';\nimport { Button } from '../../actions/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { BodyText, Headline } from '../../typography/index.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport styles from './date_picker_year_selector.module.css';\nimport { FocusRedirect } from '../../utils/index.js';\nimport { clsx } from 'clsx';\n\nexport interface DatePickerYearSelectorProps {\n presenter: DatePickerPresenter;\n onClose: () => void;\n}\n\nexport function DatePickerYearSelector({\n presenter,\n onClose,\n}: DatePickerYearSelectorProps) {\n const { min, max, visibleYear, visibleMonth } = useSignalValue(\n presenter.stateBroadcast\n );\n\n const [offset, setOffset] = useState(0);\n const containerRef = useRef<HTMLDivElement | null>(null);\n const minYear = min == null ? -Infinity : min.getFullYear();\n const maxYear = max == null ? Infinity : max.getFullYear();\n const years: React.ReactNode[] = [];\n const remainder = visibleYear % 20;\n let firstYear = visibleYear - remainder + offset;\n let lastYear = firstYear + 19;\n\n for (let x = 0; x < 20; x++) {\n let disabled = false;\n const date = new Date(visibleYear, visibleMonth, 1);\n date.setFullYear(visibleYear - remainder + x + offset);\n\n if (date.getFullYear() > maxYear || date.getFullYear() < minYear) {\n disabled = true;\n }\n\n const Button: any = HStack;\n\n years.push(\n <Button\n as=\"button\"\n key={x}\n width=\"flex\"\n disabled={disabled}\n className={clsx(styles['date-picker-year-button'], 'tcn-date-picker-year-button')}\n data-is-disabled={String(disabled)}\n data-is-selected={String(date.getFullYear() === visibleYear)}\n onClick={() => {\n presenter.setVisibleYear(date.getFullYear());\n onClose();\n }}\n >\n <BodyText>{date.getFullYear()}</BodyText>\n </Button>\n );\n }\n\n function focus() {\n if (containerRef.current != null) {\n containerRef.current.focus();\n }\n }\n\n useEffect(() => {\n if (containerRef.current != null) {\n containerRef.current.focus();\n }\n }, []);\n\n const firstRow = years.slice(0, 4);\n const secondRow = years.slice(4, 8);\n const thirdRow = years.slice(8, 12);\n const fourthRow = years.slice(12, 16);\n const fifthRow = years.slice(16, 20);\n\n function prev() {\n setOffset(offset - 20);\n }\n\n function next() {\n setOffset(offset + 20);\n }\n\n return (\n <VStack\n ref={containerRef}\n tabIndex={0}\n padding=\"8px\"\n className={clsx(\n styles['date-picker-year-selector'],\n 'tcn-date-picker-year-selector'\n )}\n gap=\"4px\"\n >\n <HStack gap=\"4px\">\n <Button utility onClick={prev} hierarchy=\"tertiary\">\n <ChevronLeftIcon flipOnRtl size=\"md\" />\n </Button>\n <Spacer />\n <Headline\n selectable={false}\n emphasis=\"faint\"\n hierarchy=\"tertiary\"\n >{`${firstYear}-${lastYear}`}</Headline>\n <Spacer />\n <Button utility hierarchy=\"tertiary\" onClick={next}>\n <ChevronRightIcon size=\"md\" />\n </Button>\n </HStack>\n <HStack gap=\"4px\">{firstRow}</HStack>\n <HStack gap=\"4px\">{secondRow}</HStack>\n <HStack gap=\"4px\">{thirdRow}</HStack>\n <HStack gap=\"4px\">{fourthRow}</HStack>\n <HStack gap=\"4px\">{fifthRow}</HStack>\n <FocusRedirect onRedirect={focus} />\n </VStack>\n );\n}\n"],"names":["DatePickerYearSelector","presenter","onClose","min","max","visibleYear","visibleMonth","useSignalValue","offset","setOffset","useState","containerRef","useRef","minYear","maxYear","years","remainder","firstYear","lastYear","x","disabled","date","Button","HStack","jsx","clsx","styles","BodyText","focus","useEffect","firstRow","secondRow","thirdRow","fourthRow","fifthRow","prev","next","jsxs","VStack","ChevronLeftIcon","Spacer","Headline","ChevronRightIcon","FocusRedirect"],"mappings":"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"}
@@ -1,22 +1,23 @@
1
1
  import { jsx as L } from "react/jsx-runtime";
2
- import "../../utils/click_away_listener.js";
3
- import "../../utils/focus_redirect.js";
4
- import "../../utils/scroll_away_listener.js";
2
+ import "../../utils/listeners/click_away_listener.js";
3
+ import "../../utils/listeners/focus_redirect.js";
4
+ import "../../utils/listeners/scroll_away_listener.js";
5
5
  import _, { useRef as e } from "react";
6
6
  import { useForkRef as j } from "../../utils/hooks/use_fork_ref.js";
7
7
  import "../../utils/hooks/use_resize_observer.js";
8
- import "../../utils/dnd/context.js";
8
+ import "../../utils/hooks/labelled_by_context.js";
9
+ import "../../utils/decorators/draggable/context.js";
9
10
  import "clsx";
10
- import "../../draggable.module-BgelQsuJ.js";
11
- import "../../utils/resize/context.js";
12
- import "../../resizable.module-I6iyBAvM.js";
13
- import "../../utils/resize/resize_handle.js";
11
+ import "../../draggable.module-DFYR5n3n.js";
12
+ import "../../utils/decorators/resizable/context.js";
13
+ import "../../resizable.module-ur5FBfxo.js";
14
+ import "../../utils/decorators/resizable/resize_handle.js";
14
15
  import { Input as B } from "../input/input.js";
15
- const W = _.forwardRef(function({ onKeyCapture: n, onKeyDown: a, onInput: p, ...E }, v) {
16
- const d = e(0), o = e(0), r = e(0), u = e(0), x = e(0), c = e(0), s = e(null), P = j(v, s);
16
+ const X = _.forwardRef(function({ onKeyCapture: n, onKeyDown: a, onInput: p, ...E }, v) {
17
+ const d = e(0), o = e(0), r = e(0), i = e(0), x = e(0), c = e(0), s = e(null), P = j(v, s);
17
18
  function g(m) {
18
19
  const t = s.current;
19
- t != null && (d.current = t.value.length, o.current = t.selectionStart == null ? 0 : t.selectionStart, r.current = t.selectionEnd == null ? 0 : t.selectionEnd, c.current = r.current, u.current = Math.min(
20
+ t != null && (d.current = t.value.length, o.current = t.selectionStart == null ? 0 : t.selectionStart, r.current = t.selectionEnd == null ? 0 : t.selectionEnd, c.current = r.current, i.current = Math.min(
20
21
  o.current,
21
22
  r.current
22
23
  ), x.current = Math.max(
@@ -28,10 +29,10 @@ const W = _.forwardRef(function({ onKeyCapture: n, onKeyDown: a, onInput: p, ...
28
29
  const t = s.current;
29
30
  if (t == null)
30
31
  return;
31
- const M = t.value.length, k = o.current !== r.current, R = t.selectionStart == null ? 0 : t.selectionStart, f = t.selectionEnd == null ? 0 : t.selectionEnd, w = Math.min(R, f), h = Math.max(R, f), i = f;
32
+ const M = t.value.length, k = o.current !== r.current, R = t.selectionStart == null ? 0 : t.selectionStart, f = t.selectionEnd == null ? 0 : t.selectionEnd, w = Math.min(R, f), h = Math.max(R, f), u = f;
32
33
  if (k) {
33
34
  const S = t.value.slice(
34
- u.current,
35
+ i.current,
35
36
  h
36
37
  ), l = {
37
38
  start: o.current,
@@ -42,28 +43,28 @@ const W = _.forwardRef(function({ onKeyCapture: n, onKeyDown: a, onInput: p, ...
42
43
  "",
43
44
  l,
44
45
  c.current,
45
- i,
46
+ u,
46
47
  t
47
48
  );
48
49
  } else if (d.current > M)
49
- u.current === w ? n && n(
50
+ i.current === w ? n && n(
50
51
  "",
51
52
  "Delete",
52
53
  null,
53
54
  c.current,
54
- i,
55
+ u,
55
56
  t
56
57
  ) : n && n(
57
58
  "",
58
59
  "Backspace",
59
60
  null,
60
61
  c.current,
61
- i,
62
+ u,
62
63
  t
63
64
  );
64
65
  else {
65
66
  const l = t.value.slice(
66
- u.current,
67
+ i.current,
67
68
  h
68
69
  );
69
70
  n && n(
@@ -71,7 +72,7 @@ const W = _.forwardRef(function({ onKeyCapture: n, onKeyDown: a, onInput: p, ...
71
72
  "",
72
73
  null,
73
74
  c.current,
74
- i,
75
+ u,
75
76
  t
76
77
  );
77
78
  }
@@ -80,6 +81,6 @@ const W = _.forwardRef(function({ onKeyCapture: n, onKeyDown: a, onInput: p, ...
80
81
  return /* @__PURE__ */ L(B, { ref: P, onKeyDown: g, onInput: I, ...E });
81
82
  });
82
83
  export {
83
- W as KeyCaptureInput
84
+ X as KeyCaptureInput
84
85
  };
85
86
  //# sourceMappingURL=key_capture_input.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"key_capture_input.js","sources":["../../../src/inputs/mask_input/key_capture_input.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport React from 'react';\nimport { useRef } from 'react';\nimport { Input, InputProps } from '../input/input.js';\n\nexport interface Range {\n start: number;\n end: number;\n}\n\nexport interface KeyCaptureInputProps extends InputProps {\n onKeyCapture?: (\n input: string,\n key: string,\n selection: Range | null,\n cursorPosition: number,\n finalCursorPosition: number,\n inputElement: HTMLInputElement\n ) => void;\n}\n\nexport const KeyCaptureInput = React.forwardRef(function InputCapture(\n { onKeyCapture, onKeyDown, onInput, ...props }: KeyCaptureInputProps,\n ref\n) {\n const valueLengthRef = useRef(0);\n const selectionStartRef = useRef(0);\n const selectionEndRef = useRef(0);\n const minCursorPositionRef = useRef(0);\n const maxCursorPositionRef = useRef(0);\n const cursorPositionRef = useRef(0);\n const inputRef = useRef<HTMLInputElement | null>(null);\n const forkedRef = useForkRef(ref, inputRef);\n\n function handleKeydown(event: React.KeyboardEvent<HTMLInputElement>) {\n const inputElement = inputRef.current;\n\n if (inputElement == null) {\n return;\n }\n\n valueLengthRef.current = inputElement.value.length;\n selectionStartRef.current =\n inputElement.selectionStart == null ? 0 : inputElement.selectionStart;\n selectionEndRef.current =\n inputElement.selectionEnd == null ? 0 : inputElement.selectionEnd;\n cursorPositionRef.current = selectionEndRef.current;\n minCursorPositionRef.current = Math.min(\n selectionStartRef.current,\n selectionEndRef.current\n );\n\n maxCursorPositionRef.current = Math.max(\n selectionStartRef.current,\n selectionEndRef.current\n );\n\n onKeyDown && onKeyDown(event);\n }\n\n function handleInput(event: React.ChangeEvent<HTMLInputElement>) {\n const inputElement = inputRef.current;\n\n if (inputElement == null) {\n return;\n }\n\n const valueLength = inputElement.value.length;\n const hadSelection = selectionStartRef.current !== selectionEndRef.current;\n const inputSelectionStart =\n inputElement.selectionStart == null ? 0 : inputElement.selectionStart;\n const inputSelectionEnd =\n inputElement.selectionEnd == null ? 0 : inputElement.selectionEnd;\n const minCursorPosition = Math.min(inputSelectionStart, inputSelectionEnd);\n const maxCursorPosition = Math.max(inputSelectionStart, inputSelectionEnd);\n const cursorPosition = inputSelectionEnd;\n\n if (hadSelection) {\n const input = inputElement.value.slice(\n minCursorPositionRef.current,\n maxCursorPosition\n );\n const selection = {\n start: selectionStartRef.current,\n end: selectionEndRef.current,\n };\n onKeyCapture &&\n onKeyCapture(\n input,\n '',\n selection,\n cursorPositionRef.current,\n cursorPosition,\n inputElement\n );\n } else {\n const collapsed = valueLengthRef.current > valueLength;\n if (collapsed) {\n const deleted = minCursorPositionRef.current === minCursorPosition;\n\n if (deleted) {\n onKeyCapture &&\n onKeyCapture(\n '',\n 'Delete',\n null,\n cursorPositionRef.current,\n cursorPosition,\n inputElement\n );\n } else {\n onKeyCapture &&\n onKeyCapture(\n '',\n 'Backspace',\n null,\n cursorPositionRef.current,\n cursorPosition,\n inputElement\n );\n }\n } else {\n const input = inputElement.value.slice(\n minCursorPositionRef.current,\n maxCursorPosition\n );\n onKeyCapture &&\n onKeyCapture(\n input,\n '',\n null,\n cursorPositionRef.current,\n cursorPosition,\n inputElement\n );\n }\n }\n onInput && onInput(event);\n }\n\n return (\n <Input ref={forkedRef} onKeyDown={handleKeydown} onInput={handleInput} {...props} />\n );\n});\n"],"names":["KeyCaptureInput","React","onKeyCapture","onKeyDown","onInput","props","ref","valueLengthRef","useRef","selectionStartRef","selectionEndRef","minCursorPositionRef","maxCursorPositionRef","cursorPositionRef","inputRef","forkedRef","useForkRef","handleKeydown","event","inputElement","handleInput","valueLength","hadSelection","inputSelectionStart","inputSelectionEnd","minCursorPosition","maxCursorPosition","cursorPosition","input","selection","jsx","Input"],"mappings":";;;;;;;;;;;;;;AAqBO,MAAMA,IAAkBC,EAAM,WAAW,SAC9C,EAAE,cAAAC,GAAc,WAAAC,GAAW,SAAAC,GAAS,GAAGC,EAAA,GACvCC,GACA;AACA,QAAMC,IAAiBC,EAAO,CAAC,GACzBC,IAAoBD,EAAO,CAAC,GAC5BE,IAAkBF,EAAO,CAAC,GAC1BG,IAAuBH,EAAO,CAAC,GAC/BI,IAAuBJ,EAAO,CAAC,GAC/BK,IAAoBL,EAAO,CAAC,GAC5BM,IAAWN,EAAgC,IAAI,GAC/CO,IAAYC,EAAWV,GAAKQ,CAAQ;AAE1C,WAASG,EAAcC,GAA8C;AACnE,UAAMC,IAAeL,EAAS;AAE9B,IAAIK,KAAgB,SAIpBZ,EAAe,UAAUY,EAAa,MAAM,QAC5CV,EAAkB,UAChBU,EAAa,kBAAkB,OAAO,IAAIA,EAAa,gBACzDT,EAAgB,UACdS,EAAa,gBAAgB,OAAO,IAAIA,EAAa,cACvDN,EAAkB,UAAUH,EAAgB,SAC5CC,EAAqB,UAAU,KAAK;AAAA,MAClCF,EAAkB;AAAA,MAClBC,EAAgB;AAAA,IAAA,GAGlBE,EAAqB,UAAU,KAAK;AAAA,MAClCH,EAAkB;AAAA,MAClBC,EAAgB;AAAA,IAAA,GAGlBP,KAAaA,EAAUe,CAAK;AAAA,EAC9B;AAEA,WAASE,EAAYF,GAA4C;AAC/D,UAAMC,IAAeL,EAAS;AAE9B,QAAIK,KAAgB;AAClB;AAGF,UAAME,IAAcF,EAAa,MAAM,QACjCG,IAAeb,EAAkB,YAAYC,EAAgB,SAC7Da,IACJJ,EAAa,kBAAkB,OAAO,IAAIA,EAAa,gBACnDK,IACJL,EAAa,gBAAgB,OAAO,IAAIA,EAAa,cACjDM,IAAoB,KAAK,IAAIF,GAAqBC,CAAiB,GACnEE,IAAoB,KAAK,IAAIH,GAAqBC,CAAiB,GACnEG,IAAiBH;AAEvB,QAAIF,GAAc;AAChB,YAAMM,IAAQT,EAAa,MAAM;AAAA,QAC/BR,EAAqB;AAAA,QACrBe;AAAA,MAAA,GAEIG,IAAY;AAAA,QAChB,OAAOpB,EAAkB;AAAA,QACzB,KAAKC,EAAgB;AAAA,MAAA;AAEvB,MAAAR,KACEA;AAAA,QACE0B;AAAA,QACA;AAAA,QACAC;AAAA,QACAhB,EAAkB;AAAA,QAClBc;AAAA,QACAR;AAAA,MAAA;AAAA,IAEN,WACoBZ,EAAe,UAAUc;AAIzC,MAFgBV,EAAqB,YAAYc,IAG/CvB,KACEA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACAW,EAAkB;AAAA,QAClBc;AAAA,QACAR;AAAA,MAAA,IAGJjB,KACEA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACAW,EAAkB;AAAA,QAClBc;AAAA,QACAR;AAAA,MAAA;AAAA,SAGD;AACL,YAAMS,IAAQT,EAAa,MAAM;AAAA,QAC/BR,EAAqB;AAAA,QACrBe;AAAA,MAAA;AAEF,MAAAxB,KACEA;AAAA,QACE0B;AAAA,QACA;AAAA,QACA;AAAA,QACAf,EAAkB;AAAA,QAClBc;AAAA,QACAR;AAAA,MAAA;AAAA,IAEN;AAEF,IAAAf,KAAWA,EAAQc,CAAK;AAAA,EAC1B;AAEA,SACE,gBAAAY,EAACC,KAAM,KAAKhB,GAAW,WAAWE,GAAe,SAASG,GAAc,GAAGf,EAAA,CAAO;AAEtF,CAAC;"}
1
+ {"version":3,"file":"key_capture_input.js","sources":["../../../src/inputs/mask_input/key_capture_input.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport React from 'react';\nimport { useRef } from 'react';\nimport { Input, InputProps } from '../input/input.js';\n\nexport interface Range {\n start: number;\n end: number;\n}\n\nexport interface KeyCaptureInputProps extends InputProps {\n onKeyCapture?: (\n input: string,\n key: string,\n selection: Range | null,\n cursorPosition: number,\n finalCursorPosition: number,\n inputElement: HTMLInputElement\n ) => void;\n}\n\nexport const KeyCaptureInput = React.forwardRef(function InputCapture(\n { onKeyCapture, onKeyDown, onInput, ...props }: KeyCaptureInputProps,\n ref\n) {\n const valueLengthRef = useRef(0);\n const selectionStartRef = useRef(0);\n const selectionEndRef = useRef(0);\n const minCursorPositionRef = useRef(0);\n const maxCursorPositionRef = useRef(0);\n const cursorPositionRef = useRef(0);\n const inputRef = useRef<HTMLInputElement | null>(null);\n const forkedRef = useForkRef(ref, inputRef);\n\n function handleKeydown(event: React.KeyboardEvent<HTMLInputElement>) {\n const inputElement = inputRef.current;\n\n if (inputElement == null) {\n return;\n }\n\n valueLengthRef.current = inputElement.value.length;\n selectionStartRef.current =\n inputElement.selectionStart == null ? 0 : inputElement.selectionStart;\n selectionEndRef.current =\n inputElement.selectionEnd == null ? 0 : inputElement.selectionEnd;\n cursorPositionRef.current = selectionEndRef.current;\n minCursorPositionRef.current = Math.min(\n selectionStartRef.current,\n selectionEndRef.current\n );\n\n maxCursorPositionRef.current = Math.max(\n selectionStartRef.current,\n selectionEndRef.current\n );\n\n onKeyDown && onKeyDown(event);\n }\n\n function handleInput(event: React.ChangeEvent<HTMLInputElement>) {\n const inputElement = inputRef.current;\n\n if (inputElement == null) {\n return;\n }\n\n const valueLength = inputElement.value.length;\n const hadSelection = selectionStartRef.current !== selectionEndRef.current;\n const inputSelectionStart =\n inputElement.selectionStart == null ? 0 : inputElement.selectionStart;\n const inputSelectionEnd =\n inputElement.selectionEnd == null ? 0 : inputElement.selectionEnd;\n const minCursorPosition = Math.min(inputSelectionStart, inputSelectionEnd);\n const maxCursorPosition = Math.max(inputSelectionStart, inputSelectionEnd);\n const cursorPosition = inputSelectionEnd;\n\n if (hadSelection) {\n const input = inputElement.value.slice(\n minCursorPositionRef.current,\n maxCursorPosition\n );\n const selection = {\n start: selectionStartRef.current,\n end: selectionEndRef.current,\n };\n onKeyCapture &&\n onKeyCapture(\n input,\n '',\n selection,\n cursorPositionRef.current,\n cursorPosition,\n inputElement\n );\n } else {\n const collapsed = valueLengthRef.current > valueLength;\n if (collapsed) {\n const deleted = minCursorPositionRef.current === minCursorPosition;\n\n if (deleted) {\n onKeyCapture &&\n onKeyCapture(\n '',\n 'Delete',\n null,\n cursorPositionRef.current,\n cursorPosition,\n inputElement\n );\n } else {\n onKeyCapture &&\n onKeyCapture(\n '',\n 'Backspace',\n null,\n cursorPositionRef.current,\n cursorPosition,\n inputElement\n );\n }\n } else {\n const input = inputElement.value.slice(\n minCursorPositionRef.current,\n maxCursorPosition\n );\n onKeyCapture &&\n onKeyCapture(\n input,\n '',\n null,\n cursorPositionRef.current,\n cursorPosition,\n inputElement\n );\n }\n }\n onInput && onInput(event);\n }\n\n return (\n <Input ref={forkedRef} onKeyDown={handleKeydown} onInput={handleInput} {...props} />\n );\n});\n"],"names":["KeyCaptureInput","React","onKeyCapture","onKeyDown","onInput","props","ref","valueLengthRef","useRef","selectionStartRef","selectionEndRef","minCursorPositionRef","maxCursorPositionRef","cursorPositionRef","inputRef","forkedRef","useForkRef","handleKeydown","event","inputElement","handleInput","valueLength","hadSelection","inputSelectionStart","inputSelectionEnd","minCursorPosition","maxCursorPosition","cursorPosition","input","selection","jsx","Input"],"mappings":";;;;;;;;;;;;;;;AAqBO,MAAMA,IAAkBC,EAAM,WAAW,SAC9C,EAAE,cAAAC,GAAc,WAAAC,GAAW,SAAAC,GAAS,GAAGC,EAAA,GACvCC,GACA;AACA,QAAMC,IAAiBC,EAAO,CAAC,GACzBC,IAAoBD,EAAO,CAAC,GAC5BE,IAAkBF,EAAO,CAAC,GAC1BG,IAAuBH,EAAO,CAAC,GAC/BI,IAAuBJ,EAAO,CAAC,GAC/BK,IAAoBL,EAAO,CAAC,GAC5BM,IAAWN,EAAgC,IAAI,GAC/CO,IAAYC,EAAWV,GAAKQ,CAAQ;AAE1C,WAASG,EAAcC,GAA8C;AACnE,UAAMC,IAAeL,EAAS;AAE9B,IAAIK,KAAgB,SAIpBZ,EAAe,UAAUY,EAAa,MAAM,QAC5CV,EAAkB,UAChBU,EAAa,kBAAkB,OAAO,IAAIA,EAAa,gBACzDT,EAAgB,UACdS,EAAa,gBAAgB,OAAO,IAAIA,EAAa,cACvDN,EAAkB,UAAUH,EAAgB,SAC5CC,EAAqB,UAAU,KAAK;AAAA,MAClCF,EAAkB;AAAA,MAClBC,EAAgB;AAAA,IAAA,GAGlBE,EAAqB,UAAU,KAAK;AAAA,MAClCH,EAAkB;AAAA,MAClBC,EAAgB;AAAA,IAAA,GAGlBP,KAAaA,EAAUe,CAAK;AAAA,EAC9B;AAEA,WAASE,EAAYF,GAA4C;AAC/D,UAAMC,IAAeL,EAAS;AAE9B,QAAIK,KAAgB;AAClB;AAGF,UAAME,IAAcF,EAAa,MAAM,QACjCG,IAAeb,EAAkB,YAAYC,EAAgB,SAC7Da,IACJJ,EAAa,kBAAkB,OAAO,IAAIA,EAAa,gBACnDK,IACJL,EAAa,gBAAgB,OAAO,IAAIA,EAAa,cACjDM,IAAoB,KAAK,IAAIF,GAAqBC,CAAiB,GACnEE,IAAoB,KAAK,IAAIH,GAAqBC,CAAiB,GACnEG,IAAiBH;AAEvB,QAAIF,GAAc;AAChB,YAAMM,IAAQT,EAAa,MAAM;AAAA,QAC/BR,EAAqB;AAAA,QACrBe;AAAA,MAAA,GAEIG,IAAY;AAAA,QAChB,OAAOpB,EAAkB;AAAA,QACzB,KAAKC,EAAgB;AAAA,MAAA;AAEvB,MAAAR,KACEA;AAAA,QACE0B;AAAA,QACA;AAAA,QACAC;AAAA,QACAhB,EAAkB;AAAA,QAClBc;AAAA,QACAR;AAAA,MAAA;AAAA,IAEN,WACoBZ,EAAe,UAAUc;AAIzC,MAFgBV,EAAqB,YAAYc,IAG/CvB,KACEA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACAW,EAAkB;AAAA,QAClBc;AAAA,QACAR;AAAA,MAAA,IAGJjB,KACEA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACAW,EAAkB;AAAA,QAClBc;AAAA,QACAR;AAAA,MAAA;AAAA,SAGD;AACL,YAAMS,IAAQT,EAAa,MAAM;AAAA,QAC/BR,EAAqB;AAAA,QACrBe;AAAA,MAAA;AAEF,MAAAxB,KACEA;AAAA,QACE0B;AAAA,QACA;AAAA,QACA;AAAA,QACAf,EAAkB;AAAA,QAClBc;AAAA,QACAR;AAAA,MAAA;AAAA,IAEN;AAEF,IAAAf,KAAWA,EAAQc,CAAK;AAAA,EAC1B;AAEA,SACE,gBAAAY,EAACC,KAAM,KAAKhB,GAAW,WAAWE,GAAe,SAASG,GAAc,GAAGf,EAAA,CAAO;AAEtF,CAAC;"}
@@ -1,22 +1,23 @@
1
1
  import { jsx as V } from "react/jsx-runtime";
2
2
  import { useSignalValue as B } from "@tcn/state";
3
- import "../../utils/click_away_listener.js";
4
- import "../../utils/focus_redirect.js";
5
- import "../../utils/scroll_away_listener.js";
6
- import A, { useRef as I, useState as j, useLayoutEffect as f } from "react";
3
+ import "../../utils/listeners/click_away_listener.js";
4
+ import "../../utils/listeners/focus_redirect.js";
5
+ import "../../utils/listeners/scroll_away_listener.js";
6
+ import A, { useRef as I, useState as j, useLayoutEffect as m } from "react";
7
7
  import { useForkRef as K } from "../../utils/hooks/use_fork_ref.js";
8
8
  import "../../utils/hooks/use_resize_observer.js";
9
- import "../../utils/dnd/context.js";
9
+ import "../../utils/hooks/labelled_by_context.js";
10
+ import "../../utils/decorators/draggable/context.js";
10
11
  import "clsx";
11
- import "../../draggable.module-BgelQsuJ.js";
12
- import "../../utils/resize/context.js";
13
- import "../../resizable.module-I6iyBAvM.js";
14
- import "../../utils/resize/resize_handle.js";
12
+ import "../../draggable.module-DFYR5n3n.js";
13
+ import "../../utils/decorators/resizable/context.js";
14
+ import "../../resizable.module-ur5FBfxo.js";
15
+ import "../../utils/decorators/resizable/resize_handle.js";
15
16
  import { KeyCaptureInput as _ } from "./key_capture_input.js";
16
17
  import { MaskPresenter as F } from "./mask_presenter.js";
17
- const oe = A.forwardRef(
18
+ const se = A.forwardRef(
18
19
  function({
19
- value: m = "",
20
+ value: f = "",
20
21
  onChange: d,
21
22
  mask: c,
22
23
  onPaste: g,
@@ -40,14 +41,14 @@ const oe = A.forwardRef(
40
41
  const a = e.valueBroadcast.get(), u = e.cursorPositionBroadcast.get();
41
42
  r.value = a, r.setSelectionRange(u, u), d && d(a, e.isComplete());
42
43
  }
43
- f(() => {
44
+ m(() => {
44
45
  const t = Array.isArray(c) ? c : [c], s = t.map((o) => o.mask).join("|"), n = e.maskConfigsBroadcast.get().map((o) => o.mask).join("|");
45
46
  s !== n && e.setMaskConfigs(t);
46
- }, [e, c]), f(() => {
47
- e.setValue(m);
47
+ }, [e, c]), m(() => {
48
+ e.setValue(f);
48
49
  const t = e.selectionBroadcast.get(), s = e.cursorPositionBroadcast.get(), n = p.current;
49
50
  n != null && (t != null ? n.setSelectionRange(t.start, t.end) : n.setSelectionRange(s, s));
50
- }, [e, m]);
51
+ }, [e, f]);
51
52
  function M(t) {
52
53
  const s = t.currentTarget, n = s.selectionStart, o = s.selectionEnd;
53
54
  n != null && o != null && n !== o ? e.setSelection(n, o) : e.moveCursorTo(n || 0), e.insertText(w(t.clipboardData.getData("text/plain")));
@@ -74,7 +75,7 @@ const oe = A.forwardRef(
74
75
  }
75
76
  t.preventDefault(), v && v(t);
76
77
  }
77
- return f(() => {
78
+ return m(() => {
78
79
  let t = "unknown";
79
80
  if (p.current == null)
80
81
  return;
@@ -123,6 +124,6 @@ const oe = A.forwardRef(
123
124
  }
124
125
  );
125
126
  export {
126
- oe as MaskInput
127
+ se as MaskInput
127
128
  };
128
129
  //# sourceMappingURL=mask_input.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"mask_input.js","sources":["../../../src/inputs/mask_input/mask_input.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { useForkRef } from '../../utils/index.js';\nimport React, { useRef, useState, useLayoutEffect } from 'react';\nimport { InputProps } from '../input/input.js';\nimport { KeyCaptureInput, Range } from './key_capture_input.js';\nimport { MaskConfig } from './mask_config.js';\nimport { MaskPresenter } from './mask_presenter.js';\n\nexport interface MaskInputProps extends Omit<InputProps, 'onChange' | 'placeholder'> {\n value?: string;\n mask: MaskConfig | MaskConfig[];\n onChange?: (value: string, isComplete: boolean) => void;\n preparePasteValue?: (value: string) => string;\n prepareCutValue?: (value: string) => string;\n prepareCopyValue?: (value: string) => string;\n}\n\nexport const MaskInput = React.forwardRef<HTMLInputElement, MaskInputProps>(\n function MaskInput(\n {\n value = '',\n onChange,\n mask,\n onPaste,\n onCut,\n onCopy,\n preparePasteValue = s => s,\n prepareCutValue = s => s,\n prepareCopyValue = s => s,\n ...props\n }: MaskInputProps,\n ref\n ) {\n // Fix copy on input, its not working\n const masks = Array.isArray(mask) ? mask : [mask];\n const inputRef = useRef<HTMLInputElement | null>(null);\n const forkedRef = useForkRef(ref, inputRef);\n\n const [presenter] = useState(() => {\n const presenter = new MaskPresenter(masks);\n return presenter;\n });\n\n const internalValue = useSignalValue(presenter.valueBroadcast);\n useSignalValue(presenter.maskConfigsBroadcast);\n\n function handleInput(\n input: string,\n key: string,\n selection: Range | null,\n cursorPosition: number,\n _: number,\n inputElement: HTMLInputElement\n ) {\n if (selection != null) {\n presenter.setSelection(selection.start, selection.end);\n } else {\n presenter.forceMoveCursorTo(cursorPosition);\n }\n\n switch (key) {\n case 'Delete': {\n presenter.delete();\n }\n case 'Backspace': {\n presenter.backspace();\n }\n }\n\n presenter.insertText(input);\n\n const value = presenter.valueBroadcast.get();\n const resolvedCursorPosition = presenter.cursorPositionBroadcast.get();\n\n inputElement.value = value;\n inputElement.setSelectionRange(resolvedCursorPosition, resolvedCursorPosition);\n\n onChange && onChange(value, presenter.isComplete());\n }\n\n useLayoutEffect(() => {\n const masks = Array.isArray(mask) ? mask : [mask];\n\n const oldMaskString = masks.map(m => m.mask).join('|');\n const newMaskString = presenter.maskConfigsBroadcast\n .get()\n .map(m => m.mask)\n .join('|');\n\n if (oldMaskString !== newMaskString) {\n presenter.setMaskConfigs(masks);\n }\n }, [presenter, mask]);\n\n useLayoutEffect(() => {\n presenter.setValue(value);\n const selection = presenter.selectionBroadcast.get();\n const cursorPosition = presenter.cursorPositionBroadcast.get();\n\n const input = inputRef.current;\n\n if (input != null) {\n const hasSelection = selection != null;\n\n if (hasSelection) {\n input.setSelectionRange(selection.start, selection.end);\n } else {\n input.setSelectionRange(cursorPosition, cursorPosition);\n }\n }\n }, [presenter, value]);\n\n function handlePaste(event: React.ClipboardEvent<HTMLInputElement>) {\n const inputElement = event.currentTarget;\n const start = inputElement.selectionStart;\n const end = inputElement.selectionEnd;\n const hasSelection = start != null && end != null && start !== end;\n\n if (hasSelection) {\n presenter.setSelection(start, end);\n } else {\n presenter.moveCursorTo(start || 0);\n }\n\n presenter.insertText(preparePasteValue(event.clipboardData.getData('text/plain')));\n const resolvedCursorPosition = presenter.cursorPositionBroadcast.get();\n\n inputElement.value = presenter.valueBroadcast.get();\n inputElement.setSelectionRange(resolvedCursorPosition, resolvedCursorPosition);\n\n event.preventDefault();\n onPaste && onPaste(event);\n onChange && onChange(presenter.valueBroadcast.get(), presenter.isComplete());\n }\n\n function handleCut(event: React.ClipboardEvent<HTMLInputElement>) {\n const inputElement = event.currentTarget;\n const start = inputElement.selectionStart;\n const end = inputElement.selectionEnd;\n const hasSelection = start != null && end != null && start !== end;\n\n if (hasSelection) {\n presenter.setSelection(start, end);\n const value = prepareCutValue(presenter.getSelectedValue());\n presenter.clearRange(start, end);\n const resolvedCursorPosition = presenter.cursorPositionBroadcast.get();\n\n event.clipboardData.setData('text/plain', value);\n inputElement.value = presenter.valueBroadcast.get();\n inputElement.setSelectionRange(resolvedCursorPosition, resolvedCursorPosition);\n }\n\n event.preventDefault();\n onCut && onCut(event);\n }\n\n function handleCopy(event: React.ClipboardEvent<HTMLInputElement>) {\n const input = event.currentTarget;\n const start = input.selectionStart;\n const end = input.selectionEnd;\n const hasSelection = start != null && end != null && start !== end;\n\n if (hasSelection) {\n presenter.setSelection(start, end);\n const value = prepareCopyValue(presenter.getSelectedValue());\n\n event.clipboardData.setData('text/plain', value);\n }\n\n event.preventDefault();\n onCopy && onCopy(event);\n }\n\n useLayoutEffect(() => {\n let mode = 'unknown';\n\n const input = inputRef.current;\n\n if (input == null) {\n return;\n }\n\n function handleMouseDown() {\n mode = 'mouse';\n }\n\n function handleKeyDown() {\n mode = 'keyboard';\n }\n\n function handleSelection() {\n const input = inputRef.current;\n\n if (input == null) {\n return;\n }\n\n const start = input.selectionStart;\n const end = input.selectionEnd;\n const hasSelection = start != null && end != null && start !== end;\n if (input !== document.activeElement || mode === 'keyboard') {\n mode = 'unknown';\n return;\n }\n\n const value = presenter.filledValueBroadcast.get();\n\n if (hasSelection && value.length === 0) {\n presenter.moveCursorTo(0);\n input.setSelectionRange(0, 0);\n mode = 'unknown';\n return;\n }\n\n if (!hasSelection) {\n presenter.moveCursorTo(end || 0);\n const cursorPosition = presenter.cursorPositionBroadcast.get();\n input.setSelectionRange(cursorPosition, cursorPosition);\n }\n\n mode = 'unknown';\n }\n\n document.addEventListener('selectionchange', handleSelection);\n document.addEventListener('mousedown', handleMouseDown);\n document.addEventListener('keydown', handleKeyDown);\n return () => {\n document.removeEventListener('selectionchange', handleSelection);\n document.removeEventListener('mousedown', handleMouseDown);\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [presenter]);\n\n return (\n <KeyCaptureInput\n value={internalValue}\n ref={forkedRef}\n onCopy={handleCopy}\n onPaste={handlePaste}\n onCut={handleCut}\n onKeyCapture={handleInput}\n {...props}\n />\n );\n }\n);\n"],"names":["MaskInput","React","value","onChange","mask","onPaste","onCut","onCopy","preparePasteValue","s","prepareCutValue","prepareCopyValue","props","ref","masks","inputRef","useRef","forkedRef","useForkRef","presenter","useState","MaskPresenter","internalValue","useSignalValue","handleInput","input","key","selection","cursorPosition","_","inputElement","resolvedCursorPosition","useLayoutEffect","oldMaskString","m","newMaskString","handlePaste","event","start","end","handleCut","handleCopy","mode","handleMouseDown","handleKeyDown","handleSelection","hasSelection","jsx","KeyCaptureInput"],"mappings":"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"}
1
+ {"version":3,"file":"mask_input.js","sources":["../../../src/inputs/mask_input/mask_input.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { useForkRef } from '../../utils/index.js';\nimport React, { useRef, useState, useLayoutEffect } from 'react';\nimport { InputProps } from '../input/input.js';\nimport { KeyCaptureInput, Range } from './key_capture_input.js';\nimport { MaskConfig } from './mask_config.js';\nimport { MaskPresenter } from './mask_presenter.js';\n\nexport interface MaskInputProps extends Omit<InputProps, 'onChange' | 'placeholder'> {\n value?: string;\n mask: MaskConfig | MaskConfig[];\n onChange?: (value: string, isComplete: boolean) => void;\n preparePasteValue?: (value: string) => string;\n prepareCutValue?: (value: string) => string;\n prepareCopyValue?: (value: string) => string;\n}\n\nexport const MaskInput = React.forwardRef<HTMLInputElement, MaskInputProps>(\n function MaskInput(\n {\n value = '',\n onChange,\n mask,\n onPaste,\n onCut,\n onCopy,\n preparePasteValue = s => s,\n prepareCutValue = s => s,\n prepareCopyValue = s => s,\n ...props\n }: MaskInputProps,\n ref\n ) {\n // Fix copy on input, its not working\n const masks = Array.isArray(mask) ? mask : [mask];\n const inputRef = useRef<HTMLInputElement | null>(null);\n const forkedRef = useForkRef(ref, inputRef);\n\n const [presenter] = useState(() => {\n const presenter = new MaskPresenter(masks);\n return presenter;\n });\n\n const internalValue = useSignalValue(presenter.valueBroadcast);\n useSignalValue(presenter.maskConfigsBroadcast);\n\n function handleInput(\n input: string,\n key: string,\n selection: Range | null,\n cursorPosition: number,\n _: number,\n inputElement: HTMLInputElement\n ) {\n if (selection != null) {\n presenter.setSelection(selection.start, selection.end);\n } else {\n presenter.forceMoveCursorTo(cursorPosition);\n }\n\n switch (key) {\n case 'Delete': {\n presenter.delete();\n }\n case 'Backspace': {\n presenter.backspace();\n }\n }\n\n presenter.insertText(input);\n\n const value = presenter.valueBroadcast.get();\n const resolvedCursorPosition = presenter.cursorPositionBroadcast.get();\n\n inputElement.value = value;\n inputElement.setSelectionRange(resolvedCursorPosition, resolvedCursorPosition);\n\n onChange && onChange(value, presenter.isComplete());\n }\n\n useLayoutEffect(() => {\n const masks = Array.isArray(mask) ? mask : [mask];\n\n const oldMaskString = masks.map(m => m.mask).join('|');\n const newMaskString = presenter.maskConfigsBroadcast\n .get()\n .map(m => m.mask)\n .join('|');\n\n if (oldMaskString !== newMaskString) {\n presenter.setMaskConfigs(masks);\n }\n }, [presenter, mask]);\n\n useLayoutEffect(() => {\n presenter.setValue(value);\n const selection = presenter.selectionBroadcast.get();\n const cursorPosition = presenter.cursorPositionBroadcast.get();\n\n const input = inputRef.current;\n\n if (input != null) {\n const hasSelection = selection != null;\n\n if (hasSelection) {\n input.setSelectionRange(selection.start, selection.end);\n } else {\n input.setSelectionRange(cursorPosition, cursorPosition);\n }\n }\n }, [presenter, value]);\n\n function handlePaste(event: React.ClipboardEvent<HTMLInputElement>) {\n const inputElement = event.currentTarget;\n const start = inputElement.selectionStart;\n const end = inputElement.selectionEnd;\n const hasSelection = start != null && end != null && start !== end;\n\n if (hasSelection) {\n presenter.setSelection(start, end);\n } else {\n presenter.moveCursorTo(start || 0);\n }\n\n presenter.insertText(preparePasteValue(event.clipboardData.getData('text/plain')));\n const resolvedCursorPosition = presenter.cursorPositionBroadcast.get();\n\n inputElement.value = presenter.valueBroadcast.get();\n inputElement.setSelectionRange(resolvedCursorPosition, resolvedCursorPosition);\n\n event.preventDefault();\n onPaste && onPaste(event);\n onChange && onChange(presenter.valueBroadcast.get(), presenter.isComplete());\n }\n\n function handleCut(event: React.ClipboardEvent<HTMLInputElement>) {\n const inputElement = event.currentTarget;\n const start = inputElement.selectionStart;\n const end = inputElement.selectionEnd;\n const hasSelection = start != null && end != null && start !== end;\n\n if (hasSelection) {\n presenter.setSelection(start, end);\n const value = prepareCutValue(presenter.getSelectedValue());\n presenter.clearRange(start, end);\n const resolvedCursorPosition = presenter.cursorPositionBroadcast.get();\n\n event.clipboardData.setData('text/plain', value);\n inputElement.value = presenter.valueBroadcast.get();\n inputElement.setSelectionRange(resolvedCursorPosition, resolvedCursorPosition);\n }\n\n event.preventDefault();\n onCut && onCut(event);\n }\n\n function handleCopy(event: React.ClipboardEvent<HTMLInputElement>) {\n const input = event.currentTarget;\n const start = input.selectionStart;\n const end = input.selectionEnd;\n const hasSelection = start != null && end != null && start !== end;\n\n if (hasSelection) {\n presenter.setSelection(start, end);\n const value = prepareCopyValue(presenter.getSelectedValue());\n\n event.clipboardData.setData('text/plain', value);\n }\n\n event.preventDefault();\n onCopy && onCopy(event);\n }\n\n useLayoutEffect(() => {\n let mode = 'unknown';\n\n const input = inputRef.current;\n\n if (input == null) {\n return;\n }\n\n function handleMouseDown() {\n mode = 'mouse';\n }\n\n function handleKeyDown() {\n mode = 'keyboard';\n }\n\n function handleSelection() {\n const input = inputRef.current;\n\n if (input == null) {\n return;\n }\n\n const start = input.selectionStart;\n const end = input.selectionEnd;\n const hasSelection = start != null && end != null && start !== end;\n if (input !== document.activeElement || mode === 'keyboard') {\n mode = 'unknown';\n return;\n }\n\n const value = presenter.filledValueBroadcast.get();\n\n if (hasSelection && value.length === 0) {\n presenter.moveCursorTo(0);\n input.setSelectionRange(0, 0);\n mode = 'unknown';\n return;\n }\n\n if (!hasSelection) {\n presenter.moveCursorTo(end || 0);\n const cursorPosition = presenter.cursorPositionBroadcast.get();\n input.setSelectionRange(cursorPosition, cursorPosition);\n }\n\n mode = 'unknown';\n }\n\n document.addEventListener('selectionchange', handleSelection);\n document.addEventListener('mousedown', handleMouseDown);\n document.addEventListener('keydown', handleKeyDown);\n return () => {\n document.removeEventListener('selectionchange', handleSelection);\n document.removeEventListener('mousedown', handleMouseDown);\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [presenter]);\n\n return (\n <KeyCaptureInput\n value={internalValue}\n ref={forkedRef}\n onCopy={handleCopy}\n onPaste={handlePaste}\n onCut={handleCut}\n onKeyCapture={handleInput}\n {...props}\n />\n );\n }\n);\n"],"names":["MaskInput","React","value","onChange","mask","onPaste","onCut","onCopy","preparePasteValue","s","prepareCutValue","prepareCopyValue","props","ref","masks","inputRef","useRef","forkedRef","useForkRef","presenter","useState","MaskPresenter","internalValue","useSignalValue","handleInput","input","key","selection","cursorPosition","_","inputElement","resolvedCursorPosition","useLayoutEffect","oldMaskString","m","newMaskString","handlePaste","event","start","end","handleCut","handleCopy","mode","handleMouseDown","handleKeyDown","handleSelection","hasSelection","jsx","KeyCaptureInput"],"mappings":"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"}
@@ -6,18 +6,19 @@ import { MultiselectInlineValues as E } from "./multiselect_inline_values.js";
6
6
  import { MultiselectValues as N } from "./multiselect_values.js";
7
7
  import { makeAvailableOptions as g, makeValuesAsOptions as I } from "../options/utils.js";
8
8
  import { Select as x } from "../select/select.js";
9
- import "../../utils/click_away_listener.js";
10
- import "../../utils/focus_redirect.js";
11
- import "../../utils/scroll_away_listener.js";
9
+ import "../../utils/listeners/click_away_listener.js";
10
+ import "../../utils/listeners/focus_redirect.js";
11
+ import "../../utils/listeners/scroll_away_listener.js";
12
12
  import { useForkRef as L } from "../../utils/hooks/use_fork_ref.js";
13
13
  import "../../utils/hooks/use_resize_observer.js";
14
- import "../../utils/dnd/context.js";
14
+ import "../../utils/hooks/labelled_by_context.js";
15
+ import "../../utils/decorators/draggable/context.js";
15
16
  import $ from "clsx";
16
- import "../../draggable.module-BgelQsuJ.js";
17
- import "../../utils/resize/context.js";
18
- import "../../resizable.module-I6iyBAvM.js";
19
- import "../../utils/resize/resize_handle.js";
20
- import '../../multiselect.css';const z = "_multiselect-container_009951a", B = { "multiselect-container": z }, ie = A.forwardRef(function({
17
+ import "../../draggable.module-DFYR5n3n.js";
18
+ import "../../utils/decorators/resizable/context.js";
19
+ import "../../resizable.module-ur5FBfxo.js";
20
+ import "../../utils/decorators/resizable/resize_handle.js";
21
+ import '../../multiselect.css';const z = "_multiselect-container_009951a", B = { "multiselect-container": z }, se = A.forwardRef(function({
21
22
  value: e = [],
22
23
  disabled: l = !1,
23
24
  children: S,
@@ -106,6 +107,6 @@ import '../../multiselect.css';const z = "_multiselect-container_009951a", B = {
106
107
  );
107
108
  });
108
109
  export {
109
- ie as Multiselect
110
+ se as Multiselect
110
111
  };
111
112
  //# sourceMappingURL=multiselect.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"multiselect.js","sources":["../../../src/inputs/multiselect/multiselect.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef } from 'react';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { MultiselectInlineValues } from './multiselect_inline_values.js';\nimport { MultiselectValues } from './multiselect_values.js';\nimport { makeAvailableOptions, makeValuesAsOptions } from '../options/utils.js';\nimport { Select, SelectProps } from '../select/select.js';\nimport { OptionProps } from '../options/option.js';\nimport { useForkRef } from '../../utils/index.js';\nimport styles from './multiselect.module.css';\nimport clsx from 'clsx';\n\nexport interface MultiselectProps\n extends Omit<\n SelectProps,\n 'onChange' | 'value' | 'children' | 'minHeight' | 'height' | 'maxHeight'\n > {\n children:\n | React.ReactElement<HTMLOptionElement>\n | React.ReactElement<HTMLOptionElement>[];\n onChange?: (values: string[]) => void;\n value?: string[];\n disabled?: boolean;\n inline?: boolean;\n}\n\nexport const Multiselect = React.forwardRef(function Multiselect(\n {\n value: values = [],\n disabled = false,\n children,\n className,\n onChange,\n inline = false,\n width = '100%',\n minWidth,\n maxWidth,\n ...props\n }: MultiselectProps,\n ref: React.Ref<HTMLButtonElement>\n) {\n const internalSelectRef = useRef<HTMLButtonElement | null>(null);\n const selectRef = useForkRef(ref, internalSelectRef);\n const lastValue = values[values.length - 1] || null;\n const valuesContainerRef = useRef<HTMLDivElement | null>(null);\n const childrenArray = React.Children.toArray(\n children\n ) as React.ReactElement<OptionProps>[];\n\n const availableOptions = makeAvailableOptions(childrenArray, values);\n const valuesAsOptions = makeValuesAsOptions(childrenArray, values);\n\n useLayoutEffect(() => {\n const valuesElement = valuesContainerRef.current;\n const shouldFocus = lastValue != null && valuesElement != null;\n if (shouldFocus) {\n (\n valuesElement.querySelector(`[data-value='${lastValue}']`) as HTMLElement\n )?.focus();\n\n // Safari doesn't respect the first focus if its called too quickly\n requestAnimationFrame(() => {\n internalSelectRef.current && internalSelectRef.current.focus();\n });\n }\n }, [lastValue]);\n\n function addValue(value: string) {\n if (!values.includes(value)) {\n onChange && onChange([...values, value]);\n }\n }\n\n function removeValue(option: React.ReactElement<OptionProps>) {\n const index = values.indexOf(option.props.value);\n\n if (index > -1) {\n const newValues = values.filter(v => v !== option.props.value);\n onChange && onChange(newValues);\n }\n }\n\n if (inline) {\n return (\n <>\n <Select\n ref={selectRef}\n disabled={disabled}\n onChange={addValue}\n width=\"auto\"\n value={null}\n placeholder=\"Select to Add\"\n {...props}\n >\n {availableOptions}\n </Select>\n <Spacer width=\"8px\" />\n <MultiselectInlineValues\n values={valuesAsOptions}\n onRemove={removeValue}\n disabled={disabled}\n />\n </>\n );\n }\n\n return (\n <VStack\n width={width}\n minWidth={minWidth}\n maxWidth={maxWidth}\n className={clsx(styles['multiselect-container'], 'tcn-multiselect-container')}\n >\n <Select\n ref={ref}\n disabled={disabled}\n onChange={addValue}\n value={null}\n placeholder=\"Select to Add\"\n width={width}\n minWidth={minWidth}\n maxWidth={maxWidth}\n {...props}\n >\n {availableOptions}\n </Select>\n <MultiselectValues\n disabled={disabled}\n values={valuesAsOptions}\n onRemove={removeValue}\n />\n </VStack>\n );\n});\n"],"names":["Multiselect","React","values","disabled","children","className","onChange","inline","width","minWidth","maxWidth","props","ref","internalSelectRef","useRef","selectRef","useForkRef","lastValue","valuesContainerRef","childrenArray","availableOptions","makeAvailableOptions","valuesAsOptions","makeValuesAsOptions","useLayoutEffect","valuesElement","addValue","value","removeValue","option","newValues","v","jsxs","Fragment","jsx","Select","Spacer","MultiselectInlineValues","VStack","clsx","styles","MultiselectValues"],"mappings":";;;;;;;;;;;;;;;;;;;gFA0BaA,KAAcC,EAAM,WAAW,SAC1C;AAAA,EACE,OAAOC,IAAS,CAAA;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAoBC,EAAiC,IAAI,GACzDC,IAAYC,EAAWJ,GAAKC,CAAiB,GAC7CI,IAAYf,EAAOA,EAAO,SAAS,CAAC,KAAK,MACzCgB,IAAqBJ,EAA8B,IAAI,GACvDK,IAAgBlB,EAAM,SAAS;AAAA,IACnCG;AAAA,EAAA,GAGIgB,IAAmBC,EAAqBF,GAAejB,CAAM,GAC7DoB,IAAkBC,EAAoBJ,GAAejB,CAAM;AAEjE,EAAAsB,EAAgB,MAAM;AACpB,UAAMC,IAAgBP,EAAmB;AAEzC,IADoBD,KAAa,QAAQQ,KAAiB,SAGtDA,EAAc,cAAc,gBAAgBR,CAAS,IAAI,GACxD,MAAA,GAGH,sBAAsB,MAAM;AAC1B,MAAAJ,EAAkB,WAAWA,EAAkB,QAAQ,MAAA;AAAA,IACzD,CAAC;AAAA,EAEL,GAAG,CAACI,CAAS,CAAC;AAEd,WAASS,EAASC,GAAe;AAC/B,IAAKzB,EAAO,SAASyB,CAAK,KACxBrB,KAAYA,EAAS,CAAC,GAAGJ,GAAQyB,CAAK,CAAC;AAAA,EAE3C;AAEA,WAASC,EAAYC,GAAyC;AAG5D,QAFc3B,EAAO,QAAQ2B,EAAO,MAAM,KAAK,IAEnC,IAAI;AACd,YAAMC,IAAY5B,EAAO,OAAO,OAAK6B,MAAMF,EAAO,MAAM,KAAK;AAC7D,MAAAvB,KAAYA,EAASwB,CAAS;AAAA,IAChC;AAAA,EACF;AAEA,SAAIvB,IAEA,gBAAAyB,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKpB;AAAA,QACL,UAAAZ;AAAA,QACA,UAAUuB;AAAA,QACV,OAAM;AAAA,QACN,OAAO;AAAA,QACP,aAAY;AAAA,QACX,GAAGf;AAAA,QAEH,UAAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAc,EAACE,GAAA,EAAO,OAAM,MAAA,CAAM;AAAA,IACpB,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,QAAQf;AAAA,QACR,UAAUM;AAAA,QACV,UAAAzB;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF,IAKF,gBAAA6B;AAAA,IAACM;AAAA,IAAA;AAAA,MACC,OAAA9B;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAW6B,EAAKC,EAAO,uBAAuB,GAAG,2BAA2B;AAAA,MAE5E,UAAA;AAAA,QAAA,gBAAAN;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAAvB;AAAA,YACA,UAAAT;AAAA,YACA,UAAUuB;AAAA,YACV,OAAO;AAAA,YACP,aAAY;AAAA,YACZ,OAAAlB;AAAA,YACA,UAAAC;AAAA,YACA,UAAAC;AAAA,YACC,GAAGC;AAAA,YAEH,UAAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAc;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,UAAAtC;AAAA,YACA,QAAQmB;AAAA,YACR,UAAUM;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
1
+ {"version":3,"file":"multiselect.js","sources":["../../../src/inputs/multiselect/multiselect.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef } from 'react';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { MultiselectInlineValues } from './multiselect_inline_values.js';\nimport { MultiselectValues } from './multiselect_values.js';\nimport { makeAvailableOptions, makeValuesAsOptions } from '../options/utils.js';\nimport { Select, SelectProps } from '../select/select.js';\nimport { OptionProps } from '../options/option.js';\nimport { useForkRef } from '../../utils/index.js';\nimport styles from './multiselect.module.css';\nimport clsx from 'clsx';\n\nexport interface MultiselectProps\n extends Omit<\n SelectProps,\n 'onChange' | 'value' | 'children' | 'minHeight' | 'height' | 'maxHeight'\n > {\n children:\n | React.ReactElement<HTMLOptionElement>\n | React.ReactElement<HTMLOptionElement>[];\n onChange?: (values: string[]) => void;\n value?: string[];\n disabled?: boolean;\n inline?: boolean;\n}\n\nexport const Multiselect = React.forwardRef(function Multiselect(\n {\n value: values = [],\n disabled = false,\n children,\n className,\n onChange,\n inline = false,\n width = '100%',\n minWidth,\n maxWidth,\n ...props\n }: MultiselectProps,\n ref: React.Ref<HTMLButtonElement>\n) {\n const internalSelectRef = useRef<HTMLButtonElement | null>(null);\n const selectRef = useForkRef(ref, internalSelectRef);\n const lastValue = values[values.length - 1] || null;\n const valuesContainerRef = useRef<HTMLDivElement | null>(null);\n const childrenArray = React.Children.toArray(\n children\n ) as React.ReactElement<OptionProps>[];\n\n const availableOptions = makeAvailableOptions(childrenArray, values);\n const valuesAsOptions = makeValuesAsOptions(childrenArray, values);\n\n useLayoutEffect(() => {\n const valuesElement = valuesContainerRef.current;\n const shouldFocus = lastValue != null && valuesElement != null;\n if (shouldFocus) {\n (\n valuesElement.querySelector(`[data-value='${lastValue}']`) as HTMLElement\n )?.focus();\n\n // Safari doesn't respect the first focus if its called too quickly\n requestAnimationFrame(() => {\n internalSelectRef.current && internalSelectRef.current.focus();\n });\n }\n }, [lastValue]);\n\n function addValue(value: string) {\n if (!values.includes(value)) {\n onChange && onChange([...values, value]);\n }\n }\n\n function removeValue(option: React.ReactElement<OptionProps>) {\n const index = values.indexOf(option.props.value);\n\n if (index > -1) {\n const newValues = values.filter(v => v !== option.props.value);\n onChange && onChange(newValues);\n }\n }\n\n if (inline) {\n return (\n <>\n <Select\n ref={selectRef}\n disabled={disabled}\n onChange={addValue}\n width=\"auto\"\n value={null}\n placeholder=\"Select to Add\"\n {...props}\n >\n {availableOptions}\n </Select>\n <Spacer width=\"8px\" />\n <MultiselectInlineValues\n values={valuesAsOptions}\n onRemove={removeValue}\n disabled={disabled}\n />\n </>\n );\n }\n\n return (\n <VStack\n width={width}\n minWidth={minWidth}\n maxWidth={maxWidth}\n className={clsx(styles['multiselect-container'], 'tcn-multiselect-container')}\n >\n <Select\n ref={ref}\n disabled={disabled}\n onChange={addValue}\n value={null}\n placeholder=\"Select to Add\"\n width={width}\n minWidth={minWidth}\n maxWidth={maxWidth}\n {...props}\n >\n {availableOptions}\n </Select>\n <MultiselectValues\n disabled={disabled}\n values={valuesAsOptions}\n onRemove={removeValue}\n />\n </VStack>\n );\n});\n"],"names":["Multiselect","React","values","disabled","children","className","onChange","inline","width","minWidth","maxWidth","props","ref","internalSelectRef","useRef","selectRef","useForkRef","lastValue","valuesContainerRef","childrenArray","availableOptions","makeAvailableOptions","valuesAsOptions","makeValuesAsOptions","useLayoutEffect","valuesElement","addValue","value","removeValue","option","newValues","v","jsxs","Fragment","jsx","Select","Spacer","MultiselectInlineValues","VStack","clsx","styles","MultiselectValues"],"mappings":";;;;;;;;;;;;;;;;;;;;gFA0BaA,KAAcC,EAAM,WAAW,SAC1C;AAAA,EACE,OAAOC,IAAS,CAAA;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAoBC,EAAiC,IAAI,GACzDC,IAAYC,EAAWJ,GAAKC,CAAiB,GAC7CI,IAAYf,EAAOA,EAAO,SAAS,CAAC,KAAK,MACzCgB,IAAqBJ,EAA8B,IAAI,GACvDK,IAAgBlB,EAAM,SAAS;AAAA,IACnCG;AAAA,EAAA,GAGIgB,IAAmBC,EAAqBF,GAAejB,CAAM,GAC7DoB,IAAkBC,EAAoBJ,GAAejB,CAAM;AAEjE,EAAAsB,EAAgB,MAAM;AACpB,UAAMC,IAAgBP,EAAmB;AAEzC,IADoBD,KAAa,QAAQQ,KAAiB,SAGtDA,EAAc,cAAc,gBAAgBR,CAAS,IAAI,GACxD,MAAA,GAGH,sBAAsB,MAAM;AAC1B,MAAAJ,EAAkB,WAAWA,EAAkB,QAAQ,MAAA;AAAA,IACzD,CAAC;AAAA,EAEL,GAAG,CAACI,CAAS,CAAC;AAEd,WAASS,EAASC,GAAe;AAC/B,IAAKzB,EAAO,SAASyB,CAAK,KACxBrB,KAAYA,EAAS,CAAC,GAAGJ,GAAQyB,CAAK,CAAC;AAAA,EAE3C;AAEA,WAASC,EAAYC,GAAyC;AAG5D,QAFc3B,EAAO,QAAQ2B,EAAO,MAAM,KAAK,IAEnC,IAAI;AACd,YAAMC,IAAY5B,EAAO,OAAO,OAAK6B,MAAMF,EAAO,MAAM,KAAK;AAC7D,MAAAvB,KAAYA,EAASwB,CAAS;AAAA,IAChC;AAAA,EACF;AAEA,SAAIvB,IAEA,gBAAAyB,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKpB;AAAA,QACL,UAAAZ;AAAA,QACA,UAAUuB;AAAA,QACV,OAAM;AAAA,QACN,OAAO;AAAA,QACP,aAAY;AAAA,QACX,GAAGf;AAAA,QAEH,UAAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAc,EAACE,GAAA,EAAO,OAAM,MAAA,CAAM;AAAA,IACpB,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,QAAQf;AAAA,QACR,UAAUM;AAAA,QACV,UAAAzB;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF,IAKF,gBAAA6B;AAAA,IAACM;AAAA,IAAA;AAAA,MACC,OAAA9B;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAW6B,EAAKC,EAAO,uBAAuB,GAAG,2BAA2B;AAAA,MAE5E,UAAA;AAAA,QAAA,gBAAAN;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAAvB;AAAA,YACA,UAAAT;AAAA,YACA,UAAUuB;AAAA,YACV,OAAO;AAAA,YACP,aAAY;AAAA,YACZ,OAAAlB;AAAA,YACA,UAAAC;AAAA,YACA,UAAAC;AAAA,YACC,GAAGC;AAAA,YAEH,UAAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAc;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,UAAAtC;AAAA,YACA,QAAQmB;AAAA,YACR,UAAUM;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
@@ -1 +1 @@
1
- {"version":3,"file":"multiselect_inline_values.d.ts","sourceRoot":"","sources":["../../../src/inputs/multiselect/multiselect_inline_values.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAInD,MAAM,WAAW,4BAA4B;IAC3C,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;IAC1C,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,wBAAgB,uBAAuB,CAAC,EACtC,MAAM,EACN,QAAQ,EACR,QAAQ,GACT,EAAE,4BAA4B,kDA+B9B"}
1
+ {"version":3,"file":"multiselect_inline_values.d.ts","sourceRoot":"","sources":["../../../src/inputs/multiselect/multiselect_inline_values.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAInD,MAAM,WAAW,4BAA4B;IAC3C,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;IAC1C,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,wBAAgB,uBAAuB,CAAC,EACtC,MAAM,EACN,QAAQ,EACR,QAAQ,GACT,EAAE,4BAA4B,kDAgC9B"}
@@ -1,50 +1,50 @@
1
- import { jsxs as n, jsx as r, Fragment as c } from "react/jsx-runtime";
1
+ import { jsxs as p, jsx as t, Fragment as c } from "react/jsx-runtime";
2
2
  import { s as e } from "../../multiselect_values.module-BMJOyYHe.js";
3
3
  import { CrossIcon as a } from "@tcn/icons/cross_icon.js";
4
4
  import "../../actions/button/base_button/base_button.js";
5
5
  import "../../actions/button/button_group/button_group.js";
6
- import { SlimButton as h } from "../../actions/button/slim_button/slim_button.js";
7
- import "../../actions/button/button/button.js";
6
+ import { Button as h } from "../../actions/button/button/button.js";
8
7
  import "../../actions/toggle/toggle.js";
9
8
  import { Chip as u } from "../../tokens/chip/chip.js";
10
9
  import "../../tokens/badge/badge.js";
11
10
  import "../../tokens/bubble/bubble.js";
12
- import m from "clsx";
11
+ import o from "clsx";
13
12
  import "../../stacks/h_stack.js";
14
13
  import "../../value.module-DFaCouFD.js";
15
14
  import "../../tokens/term/term.js";
16
15
  function A({
17
- values: o,
16
+ values: m,
18
17
  disabled: s,
19
- onRemove: p
18
+ onRemove: l
20
19
  }) {
21
- const t = o.map((i, l) => /* @__PURE__ */ n(
20
+ const r = m.map((i, n) => /* @__PURE__ */ p(
22
21
  u,
23
22
  {
24
23
  hAlign: "start",
25
- className: m(e.chip, "tcn-multiselect-chip"),
24
+ className: o(e.chip, "tcn-multiselect-chip"),
26
25
  paddingInlineStart: "8px",
27
26
  width: "auto",
28
27
  children: [
29
- /* @__PURE__ */ r("span", { children: i.props.label }),
30
- /* @__PURE__ */ r(
28
+ /* @__PURE__ */ t("span", { children: i.props.label }),
29
+ /* @__PURE__ */ t(
31
30
  h,
32
31
  {
32
+ utility: !0,
33
33
  disabled: s,
34
34
  size: "sm",
35
35
  hierarchy: "tertiary",
36
- className: m(e.remove, "tcn-multiselect-chip-remove"),
36
+ className: o(e.remove, "tcn-multiselect-chip-remove"),
37
37
  onClick: () => {
38
- p(i);
38
+ l(i);
39
39
  },
40
- children: /* @__PURE__ */ r(a, { size: "xs" })
40
+ children: /* @__PURE__ */ t(a, { size: "xs" })
41
41
  }
42
42
  )
43
43
  ]
44
44
  },
45
- l
45
+ n
46
46
  ));
47
- return t.length === 0 ? null : /* @__PURE__ */ r(c, { children: t });
47
+ return r.length === 0 ? null : /* @__PURE__ */ t(c, { children: r });
48
48
  }
49
49
  export {
50
50
  A as MultiselectInlineValues
@@ -1 +1 @@
1
- {"version":3,"file":"multiselect_inline_values.js","sources":["../../../src/inputs/multiselect/multiselect_inline_values.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './multiselect_values.module.css';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { SlimButton } from '../../actions/index.js';\nimport { OptionProps } from '../options/option.js';\nimport { Chip } from '../../tokens/index.js';\nimport clsx from 'clsx';\n\nexport interface MultiselectInlineValuesProps {\n values: React.ReactElement<OptionProps>[];\n disabled: boolean;\n onRemove: (value: React.ReactElement<OptionProps>) => void;\n}\n\nexport function MultiselectInlineValues({\n values,\n disabled,\n onRemove,\n}: MultiselectInlineValuesProps) {\n const items = values.map((v, index) => {\n return (\n <Chip\n hAlign=\"start\"\n className={clsx(styles.chip, 'tcn-multiselect-chip')}\n key={index}\n paddingInlineStart=\"8px\"\n width=\"auto\"\n >\n <span>{v.props.label}</span>\n <SlimButton\n disabled={disabled}\n size=\"sm\"\n hierarchy=\"tertiary\"\n className={clsx(styles.remove, 'tcn-multiselect-chip-remove')}\n onClick={() => {\n onRemove(v);\n }}\n >\n <CrossIcon size=\"xs\" />\n </SlimButton>\n </Chip>\n );\n });\n\n if (items.length === 0) {\n return null;\n }\n\n return <>{items}</>;\n}\n"],"names":["MultiselectInlineValues","values","disabled","onRemove","items","v","index","jsxs","Chip","clsx","styles","jsx","SlimButton","CrossIcon"],"mappings":";;;;;;;;;;;;;;;AAcO,SAASA,EAAwB;AAAA,EACtC,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,GAAiC;AAC/B,QAAMC,IAAQH,EAAO,IAAI,CAACI,GAAGC,MAEzB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,WAAWC,EAAKC,EAAO,MAAM,sBAAsB;AAAA,MAEnD,oBAAmB;AAAA,MACnB,OAAM;AAAA,MAEN,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAM,UAAAN,EAAE,MAAM,OAAM;AAAA,QACrB,gBAAAM;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAAV;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,WAAWO,EAAKC,EAAO,QAAQ,6BAA6B;AAAA,YAC5D,SAAS,MAAM;AACb,cAAAP,EAASE,CAAC;AAAA,YACZ;AAAA,YAEA,UAAA,gBAAAM,EAACE,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACvB;AAAA,IAAA;AAAA,IAfKP;AAAA,EAAA,CAkBV;AAED,SAAIF,EAAM,WAAW,IACZ,8BAGC,UAAAA,EAAA,CAAM;AAClB;"}
1
+ {"version":3,"file":"multiselect_inline_values.js","sources":["../../../src/inputs/multiselect/multiselect_inline_values.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './multiselect_values.module.css';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { Button } from '../../actions/index.js';\nimport { OptionProps } from '../options/option.js';\nimport { Chip } from '../../tokens/index.js';\nimport clsx from 'clsx';\n\nexport interface MultiselectInlineValuesProps {\n values: React.ReactElement<OptionProps>[];\n disabled: boolean;\n onRemove: (value: React.ReactElement<OptionProps>) => void;\n}\n\nexport function MultiselectInlineValues({\n values,\n disabled,\n onRemove,\n}: MultiselectInlineValuesProps) {\n const items = values.map((v, index) => {\n return (\n <Chip\n hAlign=\"start\"\n className={clsx(styles.chip, 'tcn-multiselect-chip')}\n key={index}\n paddingInlineStart=\"8px\"\n width=\"auto\"\n >\n <span>{v.props.label}</span>\n <Button\n utility\n disabled={disabled}\n size=\"sm\"\n hierarchy=\"tertiary\"\n className={clsx(styles.remove, 'tcn-multiselect-chip-remove')}\n onClick={() => {\n onRemove(v);\n }}\n >\n <CrossIcon size=\"xs\" />\n </Button>\n </Chip>\n );\n });\n\n if (items.length === 0) {\n return null;\n }\n\n return <>{items}</>;\n}\n"],"names":["MultiselectInlineValues","values","disabled","onRemove","items","v","index","jsxs","Chip","clsx","styles","jsx","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;;AAcO,SAASA,EAAwB;AAAA,EACtC,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,GAAiC;AAC/B,QAAMC,IAAQH,EAAO,IAAI,CAACI,GAAGC,MAEzB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,WAAWC,EAAKC,EAAO,MAAM,sBAAsB;AAAA,MAEnD,oBAAmB;AAAA,MACnB,OAAM;AAAA,MAEN,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAM,UAAAN,EAAE,MAAM,OAAM;AAAA,QACrB,gBAAAM;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SAAO;AAAA,YACP,UAAAV;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,WAAWO,EAAKC,EAAO,QAAQ,6BAA6B;AAAA,YAC5D,SAAS,MAAM;AACb,cAAAP,EAASE,CAAC;AAAA,YACZ;AAAA,YAEA,UAAA,gBAAAM,EAACE,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACvB;AAAA,IAAA;AAAA,IAhBKP;AAAA,EAAA,CAmBV;AAED,SAAIF,EAAM,WAAW,IACZ,8BAGC,UAAAA,EAAA,CAAM;AAClB;"}
@@ -1,13 +1,12 @@
1
1
  import { jsxs as p, jsx as t } from "react/jsx-runtime";
2
- import { clsx as r } from "clsx";
3
- import { s as i } from "../../multiselect_values.module-BMJOyYHe.js";
2
+ import { clsx as i } from "clsx";
3
+ import { s as r } from "../../multiselect_values.module-BMJOyYHe.js";
4
4
  import { CrossIcon as a } from "@tcn/icons/cross_icon.js";
5
5
  import "../../actions/button/base_button/base_button.js";
6
6
  import "../../actions/button/button_group/button_group.js";
7
- import { SlimButton as h } from "../../actions/button/slim_button/slim_button.js";
8
- import "../../actions/button/button/button.js";
7
+ import { Button as u } from "../../actions/button/button/button.js";
9
8
  import "../../actions/toggle/toggle.js";
10
- import { Chip as u } from "../../tokens/chip/chip.js";
9
+ import { Chip as h } from "../../tokens/chip/chip.js";
11
10
  import "../../tokens/badge/badge.js";
12
11
  import "../../tokens/bubble/bubble.js";
13
12
  import "../../stacks/h_stack.js";
@@ -19,24 +18,24 @@ function B({
19
18
  className: l,
20
19
  onRemove: n
21
20
  }) {
22
- const o = s.map((m, c) => /* @__PURE__ */ p(
23
- u,
21
+ const m = s.map((o, c) => /* @__PURE__ */ p(
22
+ h,
24
23
  {
25
24
  hAlign: "start",
26
- color: "rgb(57, 85, 120)",
27
- className: r(i.chip, "tcn-multiselect-chip"),
25
+ className: i(r.chip, "tcn-multiselect-chip"),
28
26
  paddingInlineStart: "8px",
29
27
  children: [
30
- /* @__PURE__ */ t("span", { children: m.props.label }),
28
+ /* @__PURE__ */ t("span", { children: o.props.label }),
31
29
  /* @__PURE__ */ t(
32
- h,
30
+ u,
33
31
  {
32
+ utility: !0,
34
33
  disabled: e,
35
34
  size: "sm",
36
35
  hierarchy: "tertiary",
37
- className: r(i.remove, "tcn-multiselect-chip-remove"),
36
+ className: i(r.remove, "tcn-multiselect-chip-remove"),
38
37
  onClick: () => {
39
- n(m);
38
+ n(o);
40
39
  },
41
40
  children: /* @__PURE__ */ t(a, { size: "xs" })
42
41
  }
@@ -45,16 +44,16 @@ function B({
45
44
  },
46
45
  c
47
46
  ));
48
- return o.length === 0 ? null : /* @__PURE__ */ t(
47
+ return m.length === 0 ? null : /* @__PURE__ */ t(
49
48
  "div",
50
49
  {
51
- className: r(
52
- i["item-container"],
50
+ className: i(
51
+ r["item-container"],
53
52
  l,
54
53
  "tcn-multiselect-values-container"
55
54
  ),
56
55
  "data-is-disabled": e,
57
- children: o
56
+ children: m
58
57
  }
59
58
  );
60
59
  }
@@ -1 +1 @@
1
- {"version":3,"file":"multiselect_values.js","sources":["../../../src/inputs/multiselect/multiselect_values.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './multiselect_values.module.css';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { OptionProps } from '../options/option.js';\nimport { SlimButton } from '../../actions/index.js';\nimport { Chip } from '../../tokens/index.js';\n\nexport interface MultiselectValueProps {\n values: React.ReactElement<OptionProps>[];\n disabled: boolean;\n onRemove: (value: React.ReactElement<OptionProps>) => void;\n className?: string;\n}\n\nexport function MultiselectValues({\n values,\n disabled,\n className,\n onRemove,\n}: MultiselectValueProps) {\n const items = values.map((v, index) => {\n return (\n <Chip\n hAlign=\"start\"\n color=\"rgb(57, 85, 120)\"\n className={clsx(styles.chip, 'tcn-multiselect-chip')}\n key={index}\n paddingInlineStart=\"8px\"\n >\n <span>{v.props.label}</span>\n <SlimButton\n disabled={disabled}\n size=\"sm\"\n hierarchy=\"tertiary\"\n className={clsx(styles.remove, 'tcn-multiselect-chip-remove')}\n onClick={() => {\n onRemove(v);\n }}\n >\n <CrossIcon size=\"xs\" />\n </SlimButton>\n </Chip>\n );\n });\n\n if (items.length === 0) {\n return null;\n }\n\n return (\n <div\n className={clsx(\n styles['item-container'],\n className,\n 'tcn-multiselect-values-container'\n )}\n data-is-disabled={disabled}\n >\n {items}\n </div>\n );\n}\n"],"names":["MultiselectValues","values","disabled","className","onRemove","items","v","index","jsxs","Chip","clsx","styles","jsx","SlimButton","CrossIcon"],"mappings":";;;;;;;;;;;;;;;AAeO,SAASA,EAAkB;AAAA,EAChC,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACF,GAA0B;AACxB,QAAMC,IAAQJ,EAAO,IAAI,CAACK,GAAGC,MAEzB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,OAAM;AAAA,MACN,WAAWC,EAAKC,EAAO,MAAM,sBAAsB;AAAA,MAEnD,oBAAmB;AAAA,MAEnB,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAM,UAAAN,EAAE,MAAM,OAAM;AAAA,QACrB,gBAAAM;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAAX;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,WAAWQ,EAAKC,EAAO,QAAQ,6BAA6B;AAAA,YAC5D,SAAS,MAAM;AACb,cAAAP,EAASE,CAAC;AAAA,YACZ;AAAA,YAEA,UAAA,gBAAAM,EAACE,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACvB;AAAA,IAAA;AAAA,IAdKP;AAAA,EAAA,CAiBV;AAED,SAAIF,EAAM,WAAW,IACZ,OAIP,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,QACTC,EAAO,gBAAgB;AAAA,QACvBR;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,oBAAkBD;AAAA,MAEjB,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP;"}
1
+ {"version":3,"file":"multiselect_values.js","sources":["../../../src/inputs/multiselect/multiselect_values.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './multiselect_values.module.css';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { OptionProps } from '../options/option.js';\nimport { Button } from '../../actions/index.js';\nimport { Chip } from '../../tokens/index.js';\n\nexport interface MultiselectValueProps {\n values: React.ReactElement<OptionProps>[];\n disabled: boolean;\n onRemove: (value: React.ReactElement<OptionProps>) => void;\n className?: string;\n}\n\nexport function MultiselectValues({\n values,\n disabled,\n className,\n onRemove,\n}: MultiselectValueProps) {\n const items = values.map((v, index) => {\n return (\n <Chip\n hAlign=\"start\"\n className={clsx(styles.chip, 'tcn-multiselect-chip')}\n key={index}\n paddingInlineStart=\"8px\"\n >\n <span>{v.props.label}</span>\n <Button\n utility\n disabled={disabled}\n size=\"sm\"\n hierarchy=\"tertiary\"\n className={clsx(styles.remove, 'tcn-multiselect-chip-remove')}\n onClick={() => {\n onRemove(v);\n }}\n >\n <CrossIcon size=\"xs\" />\n </Button>\n </Chip>\n );\n });\n\n if (items.length === 0) {\n return null;\n }\n\n return (\n <div\n className={clsx(\n styles['item-container'],\n className,\n 'tcn-multiselect-values-container'\n )}\n data-is-disabled={disabled}\n >\n {items}\n </div>\n );\n}\n"],"names":["MultiselectValues","values","disabled","className","onRemove","items","v","index","jsxs","Chip","clsx","styles","jsx","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;;AAeO,SAASA,EAAkB;AAAA,EAChC,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACF,GAA0B;AACxB,QAAMC,IAAQJ,EAAO,IAAI,CAACK,GAAGC,MAEzB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,WAAWC,EAAKC,EAAO,MAAM,sBAAsB;AAAA,MAEnD,oBAAmB;AAAA,MAEnB,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAM,UAAAN,EAAE,MAAM,OAAM;AAAA,QACrB,gBAAAM;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SAAO;AAAA,YACP,UAAAX;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,WAAWQ,EAAKC,EAAO,QAAQ,6BAA6B;AAAA,YAC5D,SAAS,MAAM;AACb,cAAAP,EAASE,CAAC;AAAA,YACZ;AAAA,YAEA,UAAA,gBAAAM,EAACE,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACvB;AAAA,IAAA;AAAA,IAfKP;AAAA,EAAA,CAkBV;AAED,SAAIF,EAAM,WAAW,IACZ,OAIP,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,QACTC,EAAO,gBAAgB;AAAA,QACvBR;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,oBAAkBD;AAAA,MAEjB,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP;"}
@@ -1,18 +1,19 @@
1
1
  import { jsx as e } from "react/jsx-runtime";
2
2
  import i from "react";
3
- import "../../utils/click_away_listener.js";
4
- import "../../utils/focus_redirect.js";
5
- import "../../utils/scroll_away_listener.js";
3
+ import "../../utils/listeners/click_away_listener.js";
4
+ import "../../utils/listeners/focus_redirect.js";
5
+ import "../../utils/listeners/scroll_away_listener.js";
6
6
  import { makeContextHook as m } from "../../utils/hooks/make_context_hook.js";
7
7
  import "../../utils/hooks/use_resize_observer.js";
8
- import "../../utils/dnd/context.js";
8
+ import "../../utils/hooks/labelled_by_context.js";
9
+ import "../../utils/decorators/draggable/context.js";
9
10
  import "clsx";
10
- import "../../draggable.module-BgelQsuJ.js";
11
- import "../../utils/resize/context.js";
12
- import "../../resizable.module-I6iyBAvM.js";
13
- import "../../utils/resize/resize_handle.js";
14
- const o = i.createContext(void 0), v = m(o, "PhoneBookContext");
15
- function B({
11
+ import "../../draggable.module-DFYR5n3n.js";
12
+ import "../../utils/decorators/resizable/context.js";
13
+ import "../../resizable.module-ur5FBfxo.js";
14
+ import "../../utils/decorators/resizable/resize_handle.js";
15
+ const o = i.createContext(void 0), B = m(o, "PhoneBookContext");
16
+ function _({
16
17
  children: t,
17
18
  value: r
18
19
  }) {
@@ -20,7 +21,7 @@ function B({
20
21
  }
21
22
  export {
22
23
  o as PhoneBookContext,
23
- B as PhoneBookProvider,
24
- v as usePhoneContext
24
+ _ as PhoneBookProvider,
25
+ B as usePhoneContext
25
26
  };
26
27
  //# sourceMappingURL=phone_number_context.js.map