@tcn/ui 0.16.0 → 0.17.0

package/dist/inputs/mask_input/key_capture_input.js

@@ -8,38 +8,41 @@ import "../../utils/hooks/use_resize_observer.js";
 import "../../utils/dnd/context.js";
 import "clsx";
 import "../../draggable.module-BgelQsuJ.js";
+import "../../utils/resize/context.js";
+import "../../resizable.module-I6iyBAvM.js";
+import "../../utils/resize/resize_handle.js";
 import { Input as B } from "../input/input.js";
-const T = _.forwardRef(function({ onKeyCapture: n, onKeyDown: m, onInput: p, ...E }, v) {
-  const d = e(0), c = e(0), r = e(0), u = e(0), x = e(0), o = e(0), s = e(null), P = j(v, s);
-  function g(f) {
+const W = _.forwardRef(function({ onKeyCapture: n, onKeyDown: a, onInput: p, ...E }, v) {
+  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);
+  function g(m) {
     const t = s.current;
-    t != null && (d.current = t.value.length, c.current = t.selectionStart == null ? 0 : t.selectionStart, r.current = t.selectionEnd == null ? 0 : t.selectionEnd, o.current = r.current, u.current = Math.min(
-      c.current,
+    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(
+      o.current,
       r.current
     ), x.current = Math.max(
-      c.current,
+      o.current,
       r.current
-    ), m && m(f));
+    ), a && a(m));
   }
-  function I(f) {
+  function I(m) {
     const t = s.current;
     if (t == null)
       return;
-    const M = t.value.length, k = c.current !== r.current, R = t.selectionStart == null ? 0 : t.selectionStart, a = t.selectionEnd == null ? 0 : t.selectionEnd, w = Math.min(R, a), h = Math.max(R, a), l = a;
+    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;
     if (k) {
       const S = t.value.slice(
         u.current,
         h
-      ), i = {
-        start: c.current,
+      ), l = {
+        start: o.current,
         end: r.current
       };
       n && n(
         S,
         "",
-        i,
-        o.current,
         l,
+        c.current,
+        i,
         t
       );
     } else if (d.current > M)
@@ -47,36 +50,36 @@ const T = _.forwardRef(function({ onKeyCapture: n, onKeyDown: m, onInput: p, ...
         "",
         "Delete",
         null,
-        o.current,
-        l,
+        c.current,
+        i,
         t
       ) : n && n(
         "",
         "Backspace",
         null,
-        o.current,
-        l,
+        c.current,
+        i,
         t
       );
     else {
-      const i = t.value.slice(
+      const l = t.value.slice(
         u.current,
         h
       );
       n && n(
-        i,
+        l,
         "",
         null,
-        o.current,
-        l,
+        c.current,
+        i,
         t
       );
     }
-    p && p(f);
+    p && p(m);
   }
   return /* @__PURE__ */ L(B, { ref: P, onKeyDown: g, onInput: I, ...E });
 });
 export {
-  T as KeyCaptureInput
+  W as KeyCaptureInput
 };
 //# sourceMappingURL=key_capture_input.js.map

package/dist/inputs/mask_input/key_capture_input.js.map

@@ -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;"}
+{"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;"}

package/dist/inputs/mask_input/mask_input.js

@@ -9,9 +9,12 @@ import "../../utils/hooks/use_resize_observer.js";
 import "../../utils/dnd/context.js";
 import "clsx";
 import "../../draggable.module-BgelQsuJ.js";
+import "../../utils/resize/context.js";
+import "../../resizable.module-I6iyBAvM.js";
+import "../../utils/resize/resize_handle.js";
 import { KeyCaptureInput as _ } from "./key_capture_input.js";
 import { MaskPresenter as F } from "./mask_presenter.js";
-const ee = A.forwardRef(
+const oe = A.forwardRef(
   function({
     value: m = "",
     onChange: d,
@@ -120,6 +123,6 @@ const ee = A.forwardRef(
   }
 );
 export {
-  ee as MaskInput
+  oe as MaskInput
 };
 //# sourceMappingURL=mask_input.js.map

package/dist/inputs/mask_input/mask_input.js.map

@@ -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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"}
+{"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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"}

package/dist/inputs/multiselect/multiselect.js

@@ -1,4 +1,4 @@
-import { jsxs as v, Fragment as w, jsx as l } from "react/jsx-runtime";
+import { jsxs as v, Fragment as w, jsx as o } from "react/jsx-runtime";
 import A, { useRef as V, useLayoutEffect as j } from "react";
 import { Spacer as q } from "../../stacks/spacer.js";
 import { VStack as C } from "../../stacks/v_stack.js";
@@ -14,15 +14,18 @@ import "../../utils/hooks/use_resize_observer.js";
 import "../../utils/dnd/context.js";
 import $ from "clsx";
 import "../../draggable.module-BgelQsuJ.js";
-import '../../multiselect.css';const z = "_multiselect-container_009951a", B = { "multiselect-container": z }, re = A.forwardRef(function({
+import "../../utils/resize/context.js";
+import "../../resizable.module-I6iyBAvM.js";
+import "../../utils/resize/resize_handle.js";
+import '../../multiselect.css';const z = "_multiselect-container_009951a", B = { "multiselect-container": z }, ie = A.forwardRef(function({
   value: e = [],
-  disabled: o = !1,
+  disabled: l = !1,
   children: S,
   className: G,
   onChange: r,
   inline: y = !1,
-  width: s = "100%",
-  minWidth: i,
+  width: i = "100%",
+  minWidth: s,
   maxWidth: u,
   ...a
 }, m) {
@@ -45,11 +48,11 @@ import '../../multiselect.css';const z = "_multiselect-container_009951a", B = {
     }
   }
   return y ? /* @__PURE__ */ v(w, { children: [
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ o(
       x,
       {
         ref: F,
-        disabled: o,
+        disabled: l,
         onChange: h,
         width: "auto",
         value: null,
@@ -58,42 +61,42 @@ import '../../multiselect.css';const z = "_multiselect-container_009951a", B = {
         children: p
       }
     ),
-    /* @__PURE__ */ l(q, { width: "8px" }),
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ o(q, { width: "8px" }),
+    /* @__PURE__ */ o(
       E,
       {
         values: d,
         onRemove: R,
-        disabled: o
+        disabled: l
       }
     )
   ] }) : /* @__PURE__ */ v(
     C,
     {
-      width: s,
-      minWidth: i,
+      width: i,
+      minWidth: s,
       maxWidth: u,
       className: $(B["multiselect-container"], "tcn-multiselect-container"),
       children: [
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ o(
           x,
           {
             ref: m,
-            disabled: o,
+            disabled: l,
             onChange: h,
             value: null,
             placeholder: "Select to Add",
-            width: s,
-            minWidth: i,
+            width: i,
+            minWidth: s,
             maxWidth: u,
             ...a,
             children: p
           }
         ),
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ o(
           N,
           {
-            disabled: o,
+            disabled: l,
             values: d,
             onRemove: R
           }
@@ -103,6 +106,6 @@ import '../../multiselect.css';const z = "_multiselect-container_009951a", B = {
   );
 });
 export {
-  re as Multiselect
+  ie as Multiselect
 };
 //# sourceMappingURL=multiselect.js.map

package/dist/inputs/multiselect/multiselect.js.map

@@ -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;"}
+{"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;"}

package/dist/inputs/phone_number_input/phone_number_context.js

@@ -8,8 +8,11 @@ import "../../utils/hooks/use_resize_observer.js";
 import "../../utils/dnd/context.js";
 import "clsx";
 import "../../draggable.module-BgelQsuJ.js";
-const o = i.createContext(void 0), h = m(o, "PhoneBookContext");
-function s({
+import "../../utils/resize/context.js";
+import "../../resizable.module-I6iyBAvM.js";
+import "../../utils/resize/resize_handle.js";
+const o = i.createContext(void 0), v = m(o, "PhoneBookContext");
+function B({
   children: t,
   value: r
 }) {
@@ -17,7 +20,7 @@ function s({
 }
 export {
   o as PhoneBookContext,
-  s as PhoneBookProvider,
-  h as usePhoneContext
+  B as PhoneBookProvider,
+  v as usePhoneContext
 };
 //# sourceMappingURL=phone_number_context.js.map

package/dist/inputs/phone_number_input/phone_number_context.js.map

@@ -1 +1 @@
-{"version":3,"file":"phone_number_context.js","sources":["../../../src/inputs/phone_number_input/phone_number_context.tsx"],"sourcesContent":["import React from 'react';\nimport { makeContextHook } from '../../utils/index.js';\nimport { OptionProps } from '../options/option.js';\nimport type { CountryCode } from 'libphonenumber-js';\n\nexport interface PhoneContext {\n  allowSip: boolean;\n  phoneBook: React.ReactElement<OptionProps>[];\n  ariaPhoneBookButtonLabel?: string;\n  ariaSelectLabel?: string;\n  value: string;\n  setValue: (value: string) => void;\n  setCountry: (country: CountryCode) => void;\n  sipAddress: string;\n  setSipAddress: (address: string) => void;\n  disabled?: boolean;\n  focusNumberInput: boolean;\n  setFocusNumberInput: (focus: boolean) => void;\n}\n\nexport const PhoneBookContext = React.createContext<PhoneContext | undefined>(undefined);\nexport const usePhoneContext = makeContextHook(PhoneBookContext, 'PhoneBookContext');\n\nexport function PhoneBookProvider({\n  children,\n  value,\n}: {\n  value: PhoneContext;\n  children: React.ReactNode;\n}) {\n  return <PhoneBookContext.Provider value={value}>{children}</PhoneBookContext.Provider>;\n}\n"],"names":["PhoneBookContext","React","usePhoneContext","makeContextHook","PhoneBookProvider","children","value","jsx"],"mappings":";;;;;;;;;;AAoBO,MAAMA,IAAmBC,EAAM,cAAwC,MAAS,GAC1EC,IAAkBC,EAAgBH,GAAkB,kBAAkB;AAE5E,SAASI,EAAkB;AAAA,EAChC,UAAAC;AAAA,EACA,OAAAC;AACF,GAGG;AACD,SAAO,gBAAAC,EAACP,EAAiB,UAAjB,EAA0B,OAAAM,GAAe,UAAAD,EAAA,CAAS;AAC5D;"}
+{"version":3,"file":"phone_number_context.js","sources":["../../../src/inputs/phone_number_input/phone_number_context.tsx"],"sourcesContent":["import React from 'react';\nimport { makeContextHook } from '../../utils/index.js';\nimport { OptionProps } from '../options/option.js';\nimport type { CountryCode } from 'libphonenumber-js';\n\nexport interface PhoneContext {\n  allowSip: boolean;\n  phoneBook: React.ReactElement<OptionProps>[];\n  ariaPhoneBookButtonLabel?: string;\n  ariaSelectLabel?: string;\n  value: string;\n  setValue: (value: string) => void;\n  setCountry: (country: CountryCode) => void;\n  sipAddress: string;\n  setSipAddress: (address: string) => void;\n  disabled?: boolean;\n  focusNumberInput: boolean;\n  setFocusNumberInput: (focus: boolean) => void;\n}\n\nexport const PhoneBookContext = React.createContext<PhoneContext | undefined>(undefined);\nexport const usePhoneContext = makeContextHook(PhoneBookContext, 'PhoneBookContext');\n\nexport function PhoneBookProvider({\n  children,\n  value,\n}: {\n  value: PhoneContext;\n  children: React.ReactNode;\n}) {\n  return <PhoneBookContext.Provider value={value}>{children}</PhoneBookContext.Provider>;\n}\n"],"names":["PhoneBookContext","React","usePhoneContext","makeContextHook","PhoneBookProvider","children","value","jsx"],"mappings":";;;;;;;;;;;;;AAoBO,MAAMA,IAAmBC,EAAM,cAAwC,MAAS,GAC1EC,IAAkBC,EAAgBH,GAAkB,kBAAkB;AAE5E,SAASI,EAAkB;AAAA,EAChC,UAAAC;AAAA,EACA,OAAAC;AACF,GAGG;AACD,SAAO,gBAAAC,EAACP,EAAiB,UAAjB,EAA0B,OAAAM,GAAe,UAAAD,EAAA,CAAS;AAC5D;"}

package/dist/inputs/select/select.js

@@ -8,6 +8,9 @@ import "../../utils/hooks/use_resize_observer.js";
 import "../../utils/dnd/context.js";
 import { clsx as L } from "clsx";
 import "../../draggable.module-BgelQsuJ.js";
+import "../../utils/resize/context.js";
+import "../../resizable.module-I6iyBAvM.js";
+import "../../utils/resize/resize_handle.js";
 import { SuggestionList as Q } from "../suggestions/suggestion_list.js";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
@@ -18,7 +21,7 @@ import '../../select.css';const X = "_select_aabe288", Y = "_selectedLabel_b92ff
 function Z(a, t) {
   return a.find((n) => n.props.value === t);
 }
-const de = F.forwardRef(function({
+const ye = F.forwardRef(function({
   children: t = [],
   onKeyDown: n,
   onKeyUp: f,
@@ -104,6 +107,6 @@ const de = F.forwardRef(function({
   ] });
 });
 export {
-  de as Select
+  ye as Select
 };
 //# sourceMappingURL=select.js.map

package/dist/inputs/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sources":["../../../src/inputs/select/select.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport { clsx } from 'clsx';\nimport React, { useRef, useState } from 'react';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\nimport { OptionProps } from '../options/option.js';\nimport { Button, type ButtonProps } from '../../actions/index.js';\nimport styles from './select.module.css';\n\nfunction findOptionFromValue(options: React.ReactElement<OptionProps>[], value: string) {\n  return options.find(option => option.props.value === value);\n}\n\nexport interface SelectProps\n  extends Omit<ButtonProps, 'children' | 'onChange' | 'value'> {\n  children?: React.ReactElement<OptionProps>[] | React.ReactElement<OptionProps>;\n  onChange?: (value: string) => void;\n  value?: string | null;\n  placeholder?: string;\n  noOptionMatchedMessage?: React.ReactNode;\n  trimCustomInput?: boolean;\n}\n\nexport const Select = React.forwardRef(function Select(\n  {\n    children = [],\n    onKeyDown,\n    onKeyUp,\n    value,\n    placeholder = '-- Select --',\n    noOptionMatchedMessage,\n    trimCustomInput = false,\n    className,\n    onMouseDown,\n    onMouseUp,\n    onChange,\n    ...props\n  }: SelectProps,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  const safeChildren = React.Children.toArray(\n    children\n  ) as React.ReactElement<OptionProps>[];\n  const keyPressedDownRef = useRef('');\n  const isAlreadyFocusedRef = useRef(false);\n  const isClosingRef = useRef(false);\n  const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);\n  const internalButtonRef = useRef<HTMLButtonElement | null>(null);\n  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);\n  const forkedRef = useForkRef(ref, internalButtonRef);\n  const selectedOption = findOptionFromValue(safeChildren, value || '');\n  const selectedLabel =\n    selectedOption == null ? placeholder || '' : selectedOption.props.label;\n\n  function openSuggestions() {\n    setIsSuggestionsOpen(true);\n  }\n\n  function closeSuggestions() {\n    setIsSuggestionsOpen(false);\n  }\n\n  function handleClose() {\n    const button = internalButtonRef.current;\n\n    if (button != null) {\n      requestAnimationFrame(() => {\n        button.focus();\n      });\n    }\n\n    closeSuggestions();\n  }\n\n  function handleSelection(value: string, _: string | undefined, isSuggestion: boolean) {\n    const button = internalButtonRef.current;\n\n    if (button != null) {\n      requestAnimationFrame(() => {\n        if (isSuggestion) {\n          onChange && onChange(value);\n        }\n        button.focus();\n      });\n    }\n\n    closeSuggestions();\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {\n    const key = event.key;\n    keyPressedDownRef.current = key;\n    onKeyDown && onKeyDown(event);\n  }\n\n  function handleKeyUp(event: React.KeyboardEvent<HTMLButtonElement>) {\n    setAnchorElement(event.currentTarget);\n    const isSameKey = (keyPressedDownRef.current = event.key);\n\n    keyPressedDownRef.current = '';\n    const key = event.key;\n\n    if (isSameKey && (key === 'Enter' || key === ' ')) {\n      if (isSuggestionsOpen) {\n        closeSuggestions();\n      } else {\n        openSuggestions();\n      }\n    }\n\n    onKeyUp && onKeyUp(event);\n  }\n\n  function handlMouseDown(event: React.MouseEvent<HTMLButtonElement>) {\n    setAnchorElement(event.currentTarget);\n    isAlreadyFocusedRef.current = document.activeElement === event.currentTarget;\n    onMouseDown && onMouseDown(event);\n  }\n\n  function handleMouseUp(event: React.MouseEvent<HTMLButtonElement>) {\n    if (isClosingRef.current) {\n      isClosingRef.current = false;\n      closeSuggestions();\n    }\n\n    openSuggestions();\n    onMouseUp && onMouseUp(event);\n  }\n\n  return (\n    <>\n      <Button\n        ref={forkedRef}\n        className={clsx(className, 'tcn-select', 'tcn-entry', styles.select)}\n        width=\"100%\"\n        {...props}\n        hAlign=\"start\"\n        value={selectedLabel}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        onMouseDown={handlMouseDown}\n        onMouseUp={handleMouseUp}\n      >\n        <span className={clsx(styles.selectedLabel, 'tcn-select-selected-label')}>\n          {selectedLabel}\n        </span>\n      </Button>\n      <SuggestionList\n        open={isSuggestionsOpen}\n        anchorElement={anchorElement}\n        onClose={handleClose}\n        value={''}\n        scrollToValue={value || ''}\n        trimCustomInput={trimCustomInput}\n        onOptionSelect={handleSelection}\n        noSuggestionMessage={noOptionMatchedMessage}\n      >\n        {children}\n      </SuggestionList>\n    </>\n  );\n});\n"],"names":["findOptionFromValue","options","value","option","Select","React","children","onKeyDown","onKeyUp","placeholder","noOptionMatchedMessage","trimCustomInput","className","onMouseDown","onMouseUp","onChange","props","ref","safeChildren","keyPressedDownRef","useRef","isAlreadyFocusedRef","isClosingRef","anchorElement","setAnchorElement","useState","internalButtonRef","isSuggestionsOpen","setIsSuggestionsOpen","forkedRef","useForkRef","selectedOption","selectedLabel","openSuggestions","closeSuggestions","handleClose","button","handleSelection","_","isSuggestion","handleKeyDown","event","key","handleKeyUp","isSameKey","handlMouseDown","handleMouseUp","jsxs","Fragment","jsx","Button","clsx","styles","SuggestionList"],"mappings":"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"}
+{"version":3,"file":"select.js","sources":["../../../src/inputs/select/select.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport { clsx } from 'clsx';\nimport React, { useRef, useState } from 'react';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\nimport { OptionProps } from '../options/option.js';\nimport { Button, type ButtonProps } from '../../actions/index.js';\nimport styles from './select.module.css';\n\nfunction findOptionFromValue(options: React.ReactElement<OptionProps>[], value: string) {\n  return options.find(option => option.props.value === value);\n}\n\nexport interface SelectProps\n  extends Omit<ButtonProps, 'children' | 'onChange' | 'value'> {\n  children?: React.ReactElement<OptionProps>[] | React.ReactElement<OptionProps>;\n  onChange?: (value: string) => void;\n  value?: string | null;\n  placeholder?: string;\n  noOptionMatchedMessage?: React.ReactNode;\n  trimCustomInput?: boolean;\n}\n\nexport const Select = React.forwardRef(function Select(\n  {\n    children = [],\n    onKeyDown,\n    onKeyUp,\n    value,\n    placeholder = '-- Select --',\n    noOptionMatchedMessage,\n    trimCustomInput = false,\n    className,\n    onMouseDown,\n    onMouseUp,\n    onChange,\n    ...props\n  }: SelectProps,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  const safeChildren = React.Children.toArray(\n    children\n  ) as React.ReactElement<OptionProps>[];\n  const keyPressedDownRef = useRef('');\n  const isAlreadyFocusedRef = useRef(false);\n  const isClosingRef = useRef(false);\n  const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);\n  const internalButtonRef = useRef<HTMLButtonElement | null>(null);\n  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);\n  const forkedRef = useForkRef(ref, internalButtonRef);\n  const selectedOption = findOptionFromValue(safeChildren, value || '');\n  const selectedLabel =\n    selectedOption == null ? placeholder || '' : selectedOption.props.label;\n\n  function openSuggestions() {\n    setIsSuggestionsOpen(true);\n  }\n\n  function closeSuggestions() {\n    setIsSuggestionsOpen(false);\n  }\n\n  function handleClose() {\n    const button = internalButtonRef.current;\n\n    if (button != null) {\n      requestAnimationFrame(() => {\n        button.focus();\n      });\n    }\n\n    closeSuggestions();\n  }\n\n  function handleSelection(value: string, _: string | undefined, isSuggestion: boolean) {\n    const button = internalButtonRef.current;\n\n    if (button != null) {\n      requestAnimationFrame(() => {\n        if (isSuggestion) {\n          onChange && onChange(value);\n        }\n        button.focus();\n      });\n    }\n\n    closeSuggestions();\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {\n    const key = event.key;\n    keyPressedDownRef.current = key;\n    onKeyDown && onKeyDown(event);\n  }\n\n  function handleKeyUp(event: React.KeyboardEvent<HTMLButtonElement>) {\n    setAnchorElement(event.currentTarget);\n    const isSameKey = (keyPressedDownRef.current = event.key);\n\n    keyPressedDownRef.current = '';\n    const key = event.key;\n\n    if (isSameKey && (key === 'Enter' || key === ' ')) {\n      if (isSuggestionsOpen) {\n        closeSuggestions();\n      } else {\n        openSuggestions();\n      }\n    }\n\n    onKeyUp && onKeyUp(event);\n  }\n\n  function handlMouseDown(event: React.MouseEvent<HTMLButtonElement>) {\n    setAnchorElement(event.currentTarget);\n    isAlreadyFocusedRef.current = document.activeElement === event.currentTarget;\n    onMouseDown && onMouseDown(event);\n  }\n\n  function handleMouseUp(event: React.MouseEvent<HTMLButtonElement>) {\n    if (isClosingRef.current) {\n      isClosingRef.current = false;\n      closeSuggestions();\n    }\n\n    openSuggestions();\n    onMouseUp && onMouseUp(event);\n  }\n\n  return (\n    <>\n      <Button\n        ref={forkedRef}\n        className={clsx(className, 'tcn-select', 'tcn-entry', styles.select)}\n        width=\"100%\"\n        {...props}\n        hAlign=\"start\"\n        value={selectedLabel}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        onMouseDown={handlMouseDown}\n        onMouseUp={handleMouseUp}\n      >\n        <span className={clsx(styles.selectedLabel, 'tcn-select-selected-label')}>\n          {selectedLabel}\n        </span>\n      </Button>\n      <SuggestionList\n        open={isSuggestionsOpen}\n        anchorElement={anchorElement}\n        onClose={handleClose}\n        value={''}\n        scrollToValue={value || ''}\n        trimCustomInput={trimCustomInput}\n        onOptionSelect={handleSelection}\n        noSuggestionMessage={noOptionMatchedMessage}\n      >\n        {children}\n      </SuggestionList>\n    </>\n  );\n});\n"],"names":["findOptionFromValue","options","value","option","Select","React","children","onKeyDown","onKeyUp","placeholder","noOptionMatchedMessage","trimCustomInput","className","onMouseDown","onMouseUp","onChange","props","ref","safeChildren","keyPressedDownRef","useRef","isAlreadyFocusedRef","isClosingRef","anchorElement","setAnchorElement","useState","internalButtonRef","isSuggestionsOpen","setIsSuggestionsOpen","forkedRef","useForkRef","selectedOption","selectedLabel","openSuggestions","closeSuggestions","handleClose","button","handleSelection","_","isSuggestion","handleKeyDown","event","key","handleKeyUp","isSameKey","handlMouseDown","handleMouseUp","jsxs","Fragment","jsx","Button","clsx","styles","SuggestionList"],"mappings":"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"}

package/dist/inputs/slider/slider.js

@@ -1,4 +1,4 @@
-import { jsx as p } from "react/jsx-runtime";
+import { jsx as f } from "react/jsx-runtime";
 import { clsx as m } from "clsx";
 import g, { useRef as v, useLayoutEffect as y } from "react";
 import "../../utils/click_away_listener.js";
@@ -8,37 +8,40 @@ import { useForkRef as R } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
 import "../../utils/dnd/context.js";
 import "../../draggable.module-BgelQsuJ.js";
-import '../../slider.css';const S = "_slider_eb84151", _ = { slider: S }, $ = g.forwardRef(function({ style: l, className: a, width: u, min: t = 0, max: r = 100, onChange: o, ...n }, c) {
-  const i = v(null), d = R(c, i);
+import "../../utils/resize/context.js";
+import "../../resizable.module-I6iyBAvM.js";
+import "../../utils/resize/resize_handle.js";
+import '../../slider.css';const S = "_slider_eb84151", _ = { slider: S }, A = g.forwardRef(function({ style: l, className: a, width: p, min: t = 0, max: r = 100, onChange: s, ...i }, u) {
+  const n = v(null), c = R(u, n);
   return y(() => {
-    const e = i.current;
+    const e = n.current;
     if (e == null) return;
-    const s = () => {
-      const f = (parseFloat(e.value) - t) / (r - t) * 100;
-      e.style.setProperty("--progress", `${f}%`);
+    const o = () => {
+      const d = (parseFloat(e.value) - t) / (r - t) * 100;
+      e.style.setProperty("--progress", `${d}%`);
     };
-    return e.addEventListener("input", s), s(), () => {
-      e.removeEventListener("input", s);
+    return e.addEventListener("input", o), o(), () => {
+      e.removeEventListener("input", o);
     };
-  }, [t, r]), /* @__PURE__ */ p(
+  }, [t, r]), /* @__PURE__ */ f(
     "input",
     {
       type: "range",
       className: m(a, _.slider, "tcn-slider"),
-      "data-is-disabled": n.disabled || !1,
-      ref: d,
+      "data-is-disabled": i.disabled || !1,
+      ref: c,
       onChange: (e) => {
-        o && o(e.currentTarget.value, e);
+        s && s(e.currentTarget.value, e);
       },
-      ...n,
+      ...i,
       min: String(t),
       max: String(r),
       "data-width": "100%",
-      style: { width: u, ...l }
+      style: { width: p, ...l }
     }
   );
 });
 export {
-  $ as Slider
+  A as Slider
 };
 //# sourceMappingURL=slider.js.map

package/dist/inputs/slider/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","sources":["../../../src/inputs/slider/slider.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { useLayoutEffect, useRef } from 'react';\nimport { HTMLAttributes } from 'react';\nimport styles from './slider.module.css';\nimport { useForkRef } from '../../utils/index.js';\n\nexport interface SliderProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {\n  width?: string;\n  disabled?: boolean;\n  min?: number;\n  max?: number;\n  value?: string;\n  list?: string;\n  onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const Slider = React.forwardRef(function Slider(\n  { style, className, width, min = 0, max = 100, onChange, ...props }: SliderProps,\n  ref: React.Ref<HTMLInputElement>\n) {\n  const localRef = useRef<HTMLInputElement>(null);\n  const forkedRef = useForkRef(ref, localRef);\n\n  useLayoutEffect(() => {\n    const range = localRef.current;\n    if (range == null) return;\n    const updateProgress = () => {\n      const value = parseFloat(range.value);\n      const percent = ((value - min) / (max - min)) * 100;\n      range.style.setProperty('--progress', `${percent}%`);\n    };\n\n    range.addEventListener('input', updateProgress);\n    updateProgress();\n\n    return () => {\n      range.removeEventListener('input', updateProgress);\n    };\n  }, [min, max]);\n\n  return (\n    <input\n      type=\"range\"\n      className={clsx(className, styles.slider, 'tcn-slider')}\n      data-is-disabled={props.disabled || false}\n      ref={forkedRef}\n      onChange={e => {\n        onChange && onChange(e.currentTarget.value, e);\n      }}\n      {...props}\n      min={String(min)}\n      max={String(max)}\n      data-width=\"100%\"\n      style={{ width, ...style }}\n    />\n  );\n});\n"],"names":["Slider","React","style","className","width","min","max","onChange","props","ref","localRef","useRef","forkedRef","useForkRef","useLayoutEffect","range","updateProgress","percent","jsx","clsx","styles"],"mappings":";;;;;;;;;;gDAgBaA,IAASC,EAAM,WAAW,SACrC,EAAE,OAAAC,GAAO,WAAAC,GAAW,OAAAC,GAAO,KAAAC,IAAM,GAAG,KAAAC,IAAM,KAAK,UAAAC,GAAU,GAAGC,EAAA,GAC5DC,GACA;AACA,QAAMC,IAAWC,EAAyB,IAAI,GACxCC,IAAYC,EAAWJ,GAAKC,CAAQ;AAE1C,SAAAI,EAAgB,MAAM;AACpB,UAAMC,IAAQL,EAAS;AACvB,QAAIK,KAAS,KAAM;AACnB,UAAMC,IAAiB,MAAM;AAE3B,YAAMC,KADQ,WAAWF,EAAM,KAAK,IACVV,MAAQC,IAAMD,KAAQ;AAChD,MAAAU,EAAM,MAAM,YAAY,cAAc,GAAGE,CAAO,GAAG;AAAA,IACrD;AAEA,WAAAF,EAAM,iBAAiB,SAASC,CAAc,GAC9CA,EAAA,GAEO,MAAM;AACX,MAAAD,EAAM,oBAAoB,SAASC,CAAc;AAAA,IACnD;AAAA,EACF,GAAG,CAACX,GAAKC,CAAG,CAAC,GAGX,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWC,EAAKhB,GAAWiB,EAAO,QAAQ,YAAY;AAAA,MACtD,oBAAkBZ,EAAM,YAAY;AAAA,MACpC,KAAKI;AAAA,MACL,UAAU,CAAA,MAAK;AACb,QAAAL,KAAYA,EAAS,EAAE,cAAc,OAAO,CAAC;AAAA,MAC/C;AAAA,MACC,GAAGC;AAAA,MACJ,KAAK,OAAOH,CAAG;AAAA,MACf,KAAK,OAAOC,CAAG;AAAA,MACf,cAAW;AAAA,MACX,OAAO,EAAE,OAAAF,GAAO,GAAGF,EAAA;AAAA,IAAM;AAAA,EAAA;AAG/B,CAAC;"}
+{"version":3,"file":"slider.js","sources":["../../../src/inputs/slider/slider.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { useLayoutEffect, useRef } from 'react';\nimport { HTMLAttributes } from 'react';\nimport styles from './slider.module.css';\nimport { useForkRef } from '../../utils/index.js';\n\nexport interface SliderProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {\n  width?: string;\n  disabled?: boolean;\n  min?: number;\n  max?: number;\n  value?: string;\n  list?: string;\n  onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const Slider = React.forwardRef(function Slider(\n  { style, className, width, min = 0, max = 100, onChange, ...props }: SliderProps,\n  ref: React.Ref<HTMLInputElement>\n) {\n  const localRef = useRef<HTMLInputElement>(null);\n  const forkedRef = useForkRef(ref, localRef);\n\n  useLayoutEffect(() => {\n    const range = localRef.current;\n    if (range == null) return;\n    const updateProgress = () => {\n      const value = parseFloat(range.value);\n      const percent = ((value - min) / (max - min)) * 100;\n      range.style.setProperty('--progress', `${percent}%`);\n    };\n\n    range.addEventListener('input', updateProgress);\n    updateProgress();\n\n    return () => {\n      range.removeEventListener('input', updateProgress);\n    };\n  }, [min, max]);\n\n  return (\n    <input\n      type=\"range\"\n      className={clsx(className, styles.slider, 'tcn-slider')}\n      data-is-disabled={props.disabled || false}\n      ref={forkedRef}\n      onChange={e => {\n        onChange && onChange(e.currentTarget.value, e);\n      }}\n      {...props}\n      min={String(min)}\n      max={String(max)}\n      data-width=\"100%\"\n      style={{ width, ...style }}\n    />\n  );\n});\n"],"names":["Slider","React","style","className","width","min","max","onChange","props","ref","localRef","useRef","forkedRef","useForkRef","useLayoutEffect","range","updateProgress","percent","jsx","clsx","styles"],"mappings":";;;;;;;;;;;;;gDAgBaA,IAASC,EAAM,WAAW,SACrC,EAAE,OAAAC,GAAO,WAAAC,GAAW,OAAAC,GAAO,KAAAC,IAAM,GAAG,KAAAC,IAAM,KAAK,UAAAC,GAAU,GAAGC,EAAA,GAC5DC,GACA;AACA,QAAMC,IAAWC,EAAyB,IAAI,GACxCC,IAAYC,EAAWJ,GAAKC,CAAQ;AAE1C,SAAAI,EAAgB,MAAM;AACpB,UAAMC,IAAQL,EAAS;AACvB,QAAIK,KAAS,KAAM;AACnB,UAAMC,IAAiB,MAAM;AAE3B,YAAMC,KADQ,WAAWF,EAAM,KAAK,IACVV,MAAQC,IAAMD,KAAQ;AAChD,MAAAU,EAAM,MAAM,YAAY,cAAc,GAAGE,CAAO,GAAG;AAAA,IACrD;AAEA,WAAAF,EAAM,iBAAiB,SAASC,CAAc,GAC9CA,EAAA,GAEO,MAAM;AACX,MAAAD,EAAM,oBAAoB,SAASC,CAAc;AAAA,IACnD;AAAA,EACF,GAAG,CAACX,GAAKC,CAAG,CAAC,GAGX,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWC,EAAKhB,GAAWiB,EAAO,QAAQ,YAAY;AAAA,MACtD,oBAAkBZ,EAAM,YAAY;AAAA,MACpC,KAAKI;AAAA,MACL,UAAU,CAAA,MAAK;AACb,QAAAL,KAAYA,EAAS,EAAE,cAAc,OAAO,CAAC;AAAA,MAC/C;AAAA,MACC,GAAGC;AAAA,MACJ,KAAK,OAAOH,CAAG;AAAA,MACf,KAAK,OAAOC,CAAG;AAAA,MACf,cAAW;AAAA,MACX,OAAO,EAAE,OAAAF,GAAO,GAAGF,EAAA;AAAA,IAAM;AAAA,EAAA;AAG/B,CAAC;"}

package/dist/inputs/suggestions/suggestion_list.js

@@ -16,6 +16,9 @@ import "../../utils/scroll_away_listener.js";
 import "../../utils/hooks/use_resize_observer.js";
 import "../../utils/dnd/context.js";
 import "../../draggable.module-BgelQsuJ.js";
+import "../../utils/resize/context.js";
+import "../../resizable.module-I6iyBAvM.js";
+import "../../utils/resize/resize_handle.js";
 import { SuggestionItem as Ce } from "./suggestion_item.js";
 import { Option as Z } from "../options/option.js";
 import "../../actions/button/base_button/base_button.js";
@@ -25,7 +28,7 @@ import { Button as Re } from "../../actions/button/button/button.js";
 import "../../actions/toggle/toggle.js";
 import { Popper as ve } from "../../overlay/popper/legacy/popper.js";
 import '../../suggestion_list.css';const _e = "_suggestion-list_711fb17", Ae = "_input_a0df060", B = { "suggestion-list": _e, input: Ae }, C = 50, De = 50;
-function ot({
+function lt({
   value: X = "",
   initialSearchValue: K,
   scrollToValue: w,
@@ -290,6 +293,6 @@ function ot({
   );
 }
 export {
-  ot as SuggestionList
+  lt as SuggestionList
 };
 //# sourceMappingURL=suggestion_list.js.map