@tcn/ui 0.6.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (137) hide show
  1. package/dist/draggable.module-BgelQsuJ.js +5 -0
  2. package/dist/draggable.module-BgelQsuJ.js.map +1 -0
  3. package/dist/form/field/field.js +13 -10
  4. package/dist/form/field/field.js.map +1 -1
  5. package/dist/form/field_presenters/field_presenter.d.ts +2 -2
  6. package/dist/form/field_presenters/field_presenter.d.ts.map +1 -1
  7. package/dist/form/field_presenters/field_presenter.js.map +1 -1
  8. package/dist/inputs/color_input/color_picker.js +5 -3
  9. package/dist/inputs/color_input/color_picker.js.map +1 -1
  10. package/dist/inputs/combo_box/combo_box.js +4 -2
  11. package/dist/inputs/combo_box/combo_box.js.map +1 -1
  12. package/dist/inputs/date_picker/date_picker.js +16 -14
  13. package/dist/inputs/date_picker/date_picker.js.map +1 -1
  14. package/dist/inputs/date_picker/date_picker_input.js +10 -8
  15. package/dist/inputs/date_picker/date_picker_input.js.map +1 -1
  16. package/dist/inputs/date_picker/date_picker_year_selector.js +4 -2
  17. package/dist/inputs/date_picker/date_picker_year_selector.js.map +1 -1
  18. package/dist/inputs/mask_input/key_capture_input.js +15 -12
  19. package/dist/inputs/mask_input/key_capture_input.js.map +1 -1
  20. package/dist/inputs/mask_input/mask_input.js +13 -10
  21. package/dist/inputs/mask_input/mask_input.js.map +1 -1
  22. package/dist/inputs/multiselect/multiselect.js +9 -7
  23. package/dist/inputs/multiselect/multiselect.js.map +1 -1
  24. package/dist/inputs/phone_number_input/phone_number_input.d.ts +1 -0
  25. package/dist/inputs/phone_number_input/phone_number_input.d.ts.map +1 -1
  26. package/dist/inputs/phone_number_input/phone_number_input.js +136 -133
  27. package/dist/inputs/phone_number_input/phone_number_input.js.map +1 -1
  28. package/dist/inputs/select/select.js +4 -2
  29. package/dist/inputs/select/select.js.map +1 -1
  30. package/dist/inputs/slider/slider.js +7 -5
  31. package/dist/inputs/slider/slider.js.map +1 -1
  32. package/dist/inputs/suggestions/suggestion_list.js +4 -2
  33. package/dist/inputs/suggestions/suggestion_list.js.map +1 -1
  34. package/dist/inputs/switch/switch.js +16 -14
  35. package/dist/inputs/switch/switch.js.map +1 -1
  36. package/dist/inputs/unit_input/unit_input.js +16 -14
  37. package/dist/inputs/unit_input/unit_input.js.map +1 -1
  38. package/dist/navigation/tabs/primitives/tabs_list.d.ts.map +1 -1
  39. package/dist/navigation/tabs/primitives/tabs_list.js +61 -21
  40. package/dist/navigation/tabs/primitives/tabs_list.js.map +1 -1
  41. package/dist/navigation/tabs/state/link/tab_link.d.ts.map +1 -1
  42. package/dist/navigation/tabs/state/link/tab_link.js +25 -19
  43. package/dist/navigation/tabs/state/link/tab_link.js.map +1 -1
  44. package/dist/navigation/tabs/state/link/use_tab_link.js +8 -8
  45. package/dist/navigation/tabs/state/link/use_tab_link.js.map +1 -1
  46. package/dist/navigation/tabs/state/tab.d.ts.map +1 -1
  47. package/dist/navigation/tabs/state/tab.js +8 -3
  48. package/dist/navigation/tabs/state/tab.js.map +1 -1
  49. package/dist/overlay/caret/caret.d.ts +8 -0
  50. package/dist/overlay/caret/caret.d.ts.map +1 -0
  51. package/dist/overlay/caret/caret.js +20 -0
  52. package/dist/overlay/caret/caret.js.map +1 -0
  53. package/dist/overlay/menu/menu.js +34 -32
  54. package/dist/overlay/menu/menu.js.map +1 -1
  55. package/dist/overlay/popper/legacy/popper.js +22 -20
  56. package/dist/overlay/popper/legacy/popper.js.map +1 -1
  57. package/dist/overlay/popper/preview_popper.js +12 -9
  58. package/dist/overlay/popper/preview_popper.js.map +1 -1
  59. package/dist/overlay/tethered/hooks/calculate_origin.d.ts +23 -0
  60. package/dist/overlay/tethered/hooks/calculate_origin.d.ts.map +1 -0
  61. package/dist/overlay/tethered/hooks/calculate_origin.js +41 -0
  62. package/dist/overlay/tethered/hooks/calculate_origin.js.map +1 -0
  63. package/dist/overlay/tethered/hooks/useCaretRefDimensions.d.ts +9 -0
  64. package/dist/overlay/tethered/hooks/useCaretRefDimensions.d.ts.map +1 -0
  65. package/dist/overlay/tethered/hooks/useCaretRefDimensions.js +14 -0
  66. package/dist/overlay/tethered/hooks/useCaretRefDimensions.js.map +1 -0
  67. package/dist/overlay/tethered/hooks/useTether.d.ts +1 -1
  68. package/dist/overlay/tethered/hooks/useTether.d.ts.map +1 -1
  69. package/dist/overlay/tethered/hooks/useTether.js +22 -21
  70. package/dist/overlay/tethered/hooks/useTether.js.map +1 -1
  71. package/dist/overlay/tethered/hooks/useTetherContentRect.d.ts +3 -0
  72. package/dist/overlay/tethered/hooks/useTetherContentRect.d.ts.map +1 -0
  73. package/dist/overlay/tethered/hooks/useTetherContentRect.js +36 -0
  74. package/dist/overlay/tethered/hooks/useTetherContentRect.js.map +1 -0
  75. package/dist/overlay/tethered/hooks/useTetherOrigin.d.ts +14 -0
  76. package/dist/overlay/tethered/hooks/useTetherOrigin.d.ts.map +1 -0
  77. package/dist/overlay/tethered/hooks/useTetherOrigin.js +24 -0
  78. package/dist/overlay/tethered/hooks/useTetherOrigin.js.map +1 -0
  79. package/dist/overlay/tethered/tethered.d.ts +2 -1
  80. package/dist/overlay/tethered/tethered.d.ts.map +1 -1
  81. package/dist/overlay/tethered/tethered.js +71 -38
  82. package/dist/overlay/tethered/tethered.js.map +1 -1
  83. package/dist/stacks/box/box.js +29 -27
  84. package/dist/stacks/box/box.js.map +1 -1
  85. package/dist/stacks/h_collapsible_box.js +14 -12
  86. package/dist/stacks/h_collapsible_box.js.map +1 -1
  87. package/dist/stacks/v_collapsible_box.js +8 -6
  88. package/dist/stacks/v_collapsible_box.js.map +1 -1
  89. package/dist/surfaces/pop_confirm/pop_confirm.d.ts.map +1 -1
  90. package/dist/surfaces/pop_confirm/pop_confirm.js +14 -13
  91. package/dist/surfaces/pop_confirm/pop_confirm.js.map +1 -1
  92. package/dist/surfaces/tooltip/tooltip.d.ts.map +1 -1
  93. package/dist/surfaces/tooltip/tooltip.js +12 -11
  94. package/dist/surfaces/tooltip/tooltip.js.map +1 -1
  95. package/dist/tethered.css +1 -1
  96. package/dist/themes/themes/ergo/ergo_theme.css +1 -1
  97. package/dist/themes/themes/ergo/ergo_theme.js +87 -57
  98. package/dist/themes/themes/ergo/ergo_theme.js.map +1 -1
  99. package/dist/themes/themes/windows_98/windows_98.css +1 -1
  100. package/dist/themes/themes/windows_98/windows_98_theme.js +18 -18
  101. package/dist/themes/themes/windows_98/windows_98_theme.js.map +1 -1
  102. package/dist/utils/dnd/draggable/draggable.js +13 -12
  103. package/dist/utils/dnd/draggable/draggable.js.map +1 -1
  104. package/dist/utils/index.d.ts +2 -0
  105. package/dist/utils/index.d.ts.map +1 -1
  106. package/dist/utils/index.js +23 -19
  107. package/dist/utils/index.js.map +1 -1
  108. package/package.json +11 -11
  109. package/src/form/field_presenters/field_presenter.ts +3 -3
  110. package/src/inputs/phone_number_input/phone_number_input.stories.tsx +24 -0
  111. package/src/inputs/phone_number_input/phone_number_input.tsx +8 -6
  112. package/src/navigation/tabs/primitives/tabs_list.tsx +46 -2
  113. package/src/navigation/tabs/state/link/tab_link.tsx +4 -1
  114. package/src/navigation/tabs/state/link/use_tab_link.ts +4 -4
  115. package/src/navigation/tabs/state/tab.tsx +10 -0
  116. package/src/overlay/{carrot/carrot.stories.tsx → caret/caret.stories.tsx} +14 -14
  117. package/src/overlay/caret/caret.tsx +24 -0
  118. package/src/overlay/tethered/__stories__/shared/base_story_config.ts +8 -0
  119. package/src/overlay/tethered/hooks/calculate_origin.ts +74 -0
  120. package/src/overlay/tethered/hooks/useCaretRefDimensions.ts +22 -0
  121. package/src/overlay/tethered/hooks/useTether.ts +4 -3
  122. package/src/overlay/tethered/hooks/useTetherContentRect.ts +49 -0
  123. package/src/overlay/tethered/hooks/useTetherOrigin.ts +49 -0
  124. package/src/overlay/tethered/tethered.module.css +55 -0
  125. package/src/overlay/tethered/tethered.tsx +44 -6
  126. package/src/surfaces/panel/__stories__/panel.stories.tsx +62 -27
  127. package/src/surfaces/panel/__stories__/panel_stories.module.css +14 -1
  128. package/src/surfaces/pop_confirm/pop_confirm.tsx +4 -3
  129. package/src/surfaces/tooltip/tooltip.tsx +1 -0
  130. package/src/themes/themes/ergo/ergo_theme.css +87 -57
  131. package/src/themes/themes/windows_98/windows_98.css +18 -18
  132. package/src/utils/index.ts +3 -0
  133. package/dist/overlay/carrot/base_carrot.d.ts +0 -8
  134. package/dist/overlay/carrot/base_carrot.d.ts.map +0 -1
  135. package/dist/overlay/carrot/base_carrot.js +0 -21
  136. package/dist/overlay/carrot/base_carrot.js.map +0 -1
  137. package/src/overlay/carrot/base_carrot.tsx +0 -24
@@ -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;"}
@@ -3,12 +3,15 @@ import { useSignalValue as B } from "@tcn/state";
3
3
  import "../../utils/click_away_listener.js";
4
4
  import "../../utils/focus_redirect.js";
5
5
  import "../../utils/scroll_away_listener.js";
6
- import A, { useRef as I, useState as j, useLayoutEffect as p } from "react";
6
+ import A, { useRef as I, useState as j, useLayoutEffect as f } 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";
10
+ import "clsx";
11
+ import "../../draggable.module-BgelQsuJ.js";
9
12
  import { KeyCaptureInput as _ } from "./key_capture_input.js";
10
13
  import { MaskPresenter as F } from "./mask_presenter.js";
11
- const Y = A.forwardRef(
14
+ const ee = A.forwardRef(
12
15
  function({
13
16
  value: m = "",
14
17
  onChange: d,
@@ -21,7 +24,7 @@ const Y = A.forwardRef(
21
24
  prepareCopyValue: y = (i) => i,
22
25
  ...C
23
26
  }, E) {
24
- const i = Array.isArray(c) ? c : [c], f = I(null), D = K(E, f), [e] = j(() => new F(i)), P = B(e.valueBroadcast);
27
+ const i = Array.isArray(c) ? c : [c], p = I(null), D = K(E, p), [e] = j(() => new F(i)), P = B(e.valueBroadcast);
25
28
  B(e.maskConfigsBroadcast);
26
29
  function T(t, s, n, o, l, r) {
27
30
  switch (n != null ? e.setSelection(n.start, n.end) : e.forceMoveCursorTo(o), s) {
@@ -34,12 +37,12 @@ const Y = A.forwardRef(
34
37
  const a = e.valueBroadcast.get(), u = e.cursorPositionBroadcast.get();
35
38
  r.value = a, r.setSelectionRange(u, u), d && d(a, e.isComplete());
36
39
  }
37
- p(() => {
40
+ f(() => {
38
41
  const t = Array.isArray(c) ? c : [c], s = t.map((o) => o.mask).join("|"), n = e.maskConfigsBroadcast.get().map((o) => o.mask).join("|");
39
42
  s !== n && e.setMaskConfigs(t);
40
- }, [e, c]), p(() => {
43
+ }, [e, c]), f(() => {
41
44
  e.setValue(m);
42
- const t = e.selectionBroadcast.get(), s = e.cursorPositionBroadcast.get(), n = f.current;
45
+ const t = e.selectionBroadcast.get(), s = e.cursorPositionBroadcast.get(), n = p.current;
43
46
  n != null && (t != null ? n.setSelectionRange(t.start, t.end) : n.setSelectionRange(s, s));
44
47
  }, [e, m]);
45
48
  function M(t) {
@@ -68,9 +71,9 @@ const Y = A.forwardRef(
68
71
  }
69
72
  t.preventDefault(), v && v(t);
70
73
  }
71
- return p(() => {
74
+ return f(() => {
72
75
  let t = "unknown";
73
- if (f.current == null)
76
+ if (p.current == null)
74
77
  return;
75
78
  function n() {
76
79
  t = "mouse";
@@ -79,7 +82,7 @@ const Y = A.forwardRef(
79
82
  t = "keyboard";
80
83
  }
81
84
  function l() {
82
- const r = f.current;
85
+ const r = p.current;
83
86
  if (r == null)
84
87
  return;
85
88
  const a = r.selectionStart, u = r.selectionEnd, k = a != null && u != null && a !== u;
@@ -117,6 +120,6 @@ const Y = A.forwardRef(
117
120
  }
118
121
  );
119
122
  export {
120
- Y as MaskInput
123
+ ee as MaskInput
121
124
  };
122
125
  //# 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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"}
@@ -11,35 +11,37 @@ import "../../utils/focus_redirect.js";
11
11
  import "../../utils/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
15
  import $ from "clsx";
15
- import '../../multiselect.css';const z = "_multiselect-container_009951a", B = { "multiselect-container": z }, le = A.forwardRef(function({
16
+ import "../../draggable.module-BgelQsuJ.js";
17
+ import '../../multiselect.css';const z = "_multiselect-container_009951a", B = { "multiselect-container": z }, re = A.forwardRef(function({
16
18
  value: e = [],
17
19
  disabled: o = !1,
18
20
  children: S,
19
21
  className: G,
20
- onChange: n,
22
+ onChange: r,
21
23
  inline: y = !1,
22
24
  width: s = "100%",
23
25
  minWidth: i,
24
26
  maxWidth: u,
25
27
  ...a
26
28
  }, m) {
27
- const r = V(null), F = L(m, r), c = e[e.length - 1] || null, O = V(null), f = A.Children.toArray(
29
+ const n = V(null), F = L(m, n), c = e[e.length - 1] || null, O = V(null), f = A.Children.toArray(
28
30
  S
29
31
  ), p = g(f, e), d = I(f, e);
30
32
  j(() => {
31
33
  const t = O.current;
32
34
  c != null && t != null && (t.querySelector(`[data-value='${c}']`)?.focus(), requestAnimationFrame(() => {
33
- r.current && r.current.focus();
35
+ n.current && n.current.focus();
34
36
  }));
35
37
  }, [c]);
36
38
  function h(t) {
37
- e.includes(t) || n && n([...e, t]);
39
+ e.includes(t) || r && r([...e, t]);
38
40
  }
39
41
  function R(t) {
40
42
  if (e.indexOf(t.props.value) > -1) {
41
43
  const M = e.filter((_) => _ !== t.props.value);
42
- n && n(M);
44
+ r && r(M);
43
45
  }
44
46
  }
45
47
  return y ? /* @__PURE__ */ v(w, { children: [
@@ -101,6 +103,6 @@ import '../../multiselect.css';const z = "_multiselect-container_009951a", B = {
101
103
  );
102
104
  });
103
105
  export {
104
- le as Multiselect
106
+ re as Multiselect
105
107
  };
106
108
  //# 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;"}
@@ -15,6 +15,7 @@ export interface PhoneNumberInputProps extends Omit<HStackProps, 'onChange' | 'c
15
15
  countrySelectRef?: React.Ref<HTMLButtonElement>;
16
16
  phoneNumberInputRef?: React.Ref<HTMLInputElement>;
17
17
  disabled?: boolean;
18
+ disabledPhoneNumber?: boolean;
18
19
  allowedCountryCodes?: string[];
19
20
  children?: React.ReactElement<OptionProps> | React.ReactElement<OptionProps>[];
20
21
  }
@@ -1 +1 @@
1
- {"version":3,"file":"phone_number_input.d.ts","sourceRoot":"","sources":["../../../src/inputs/phone_number_input/phone_number_input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,KAQN,MAAM,OAAO,CAAC;AAUf,OAAO,EAAU,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAiG3D,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,gBAAgB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAChD,mBAAmB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;CAChF;AAED,eAAO,MAAM,gBAAgB,2FAiS3B,CAAC"}
1
+ {"version":3,"file":"phone_number_input.d.ts","sourceRoot":"","sources":["../../../src/inputs/phone_number_input/phone_number_input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,KAQN,MAAM,OAAO,CAAC;AAUf,OAAO,EAAU,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAiG3D,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,gBAAgB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAChD,mBAAmB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;CAChF;AAED,eAAO,MAAM,gBAAgB,2FAkS3B,CAAC"}