@tcn/ui 0.5.0 → 0.7.0

package/dist/inputs/mask_input/mask_input.js

@@ -3,12 +3,15 @@ import { useSignalValue as B } from "@tcn/state";
 import "../../utils/click_away_listener.js";
 import "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
-import A, { useRef as I, useState as j, useLayoutEffect as p } from "react";
+import A, { useRef as I, useState as j, useLayoutEffect as f } from "react";
 import { useForkRef as K } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
+import "../../utils/dnd/context.js";
+import "clsx";
+import "../../draggable.module-BgelQsuJ.js";
 import { KeyCaptureInput as _ } from "./key_capture_input.js";
 import { MaskPresenter as F } from "./mask_presenter.js";
-const Y = A.forwardRef(
+const ee = A.forwardRef(
   function({
     value: m = "",
     onChange: d,
@@ -21,7 +24,7 @@ const Y = A.forwardRef(
     prepareCopyValue: y = (i) => i,
     ...C
   }, E) {
-    const i = Array.isArray(c) ? c : [c], f = I(null), D = K(E, f), [e] = j(() => new F(i)), P = B(e.valueBroadcast);
+    const i = Array.isArray(c) ? c : [c], p = I(null), D = K(E, p), [e] = j(() => new F(i)), P = B(e.valueBroadcast);
     B(e.maskConfigsBroadcast);
     function T(t, s, n, o, l, r) {
       switch (n != null ? e.setSelection(n.start, n.end) : e.forceMoveCursorTo(o), s) {
@@ -34,12 +37,12 @@ const Y = A.forwardRef(
       const a = e.valueBroadcast.get(), u = e.cursorPositionBroadcast.get();
       r.value = a, r.setSelectionRange(u, u), d && d(a, e.isComplete());
     }
-    p(() => {
+    f(() => {
       const t = Array.isArray(c) ? c : [c], s = t.map((o) => o.mask).join("|"), n = e.maskConfigsBroadcast.get().map((o) => o.mask).join("|");
       s !== n && e.setMaskConfigs(t);
-    }, [e, c]), p(() => {
+    }, [e, c]), f(() => {
       e.setValue(m);
-      const t = e.selectionBroadcast.get(), s = e.cursorPositionBroadcast.get(), n = f.current;
+      const t = e.selectionBroadcast.get(), s = e.cursorPositionBroadcast.get(), n = p.current;
       n != null && (t != null ? n.setSelectionRange(t.start, t.end) : n.setSelectionRange(s, s));
     }, [e, m]);
     function M(t) {
@@ -68,9 +71,9 @@ const Y = A.forwardRef(
       }
       t.preventDefault(), v && v(t);
     }
-    return p(() => {
+    return f(() => {
       let t = "unknown";
-      if (f.current == null)
+      if (p.current == null)
         return;
       function n() {
         t = "mouse";
@@ -79,7 +82,7 @@ const Y = A.forwardRef(
         t = "keyboard";
       }
       function l() {
-        const r = f.current;
+        const r = p.current;
         if (r == null)
           return;
         const a = r.selectionStart, u = r.selectionEnd, k = a != null && u != null && a !== u;
@@ -117,6 +120,6 @@ const Y = A.forwardRef(
   }
 );
 export {
-  Y as MaskInput
+  ee 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

@@ -11,35 +11,37 @@ import "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
 import { useForkRef as L } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
+import "../../utils/dnd/context.js";
 import $ from "clsx";
-import '../../multiselect.css';const z = "_multiselect-container_009951a", B = { "multiselect-container": z }, le = A.forwardRef(function({
+import "../../draggable.module-BgelQsuJ.js";
+import '../../multiselect.css';const z = "_multiselect-container_009951a", B = { "multiselect-container": z }, re = A.forwardRef(function({
   value: e = [],
   disabled: o = !1,
   children: S,
   className: G,
-  onChange: n,
+  onChange: r,
   inline: y = !1,
   width: s = "100%",
   minWidth: i,
   maxWidth: u,
   ...a
 }, m) {
-  const r = V(null), F = L(m, r), c = e[e.length - 1] || null, O = V(null), f = A.Children.toArray(
+  const n = V(null), F = L(m, n), c = e[e.length - 1] || null, O = V(null), f = A.Children.toArray(
     S
   ), p = g(f, e), d = I(f, e);
   j(() => {
     const t = O.current;
     c != null && t != null && (t.querySelector(`[data-value='${c}']`)?.focus(), requestAnimationFrame(() => {
-      r.current && r.current.focus();
+      n.current && n.current.focus();
     }));
   }, [c]);
   function h(t) {
-    e.includes(t) || n && n([...e, t]);
+    e.includes(t) || r && r([...e, t]);
   }
   function R(t) {
     if (e.indexOf(t.props.value) > -1) {
       const M = e.filter((_) => _ !== t.props.value);
-      n && n(M);
+      r && r(M);
     }
   }
   return y ? /* @__PURE__ */ v(w, { children: [
@@ -101,6 +103,6 @@ import '../../multiselect.css';const z = "_multiselect-container_009951a", B = {
   );
 });
 export {
-  le as Multiselect
+  re 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_input.d.ts

@@ -15,6 +15,7 @@ export interface PhoneNumberInputProps extends Omit<HStackProps, 'onChange' | 'c
     countrySelectRef?: React.Ref<HTMLButtonElement>;
     phoneNumberInputRef?: React.Ref<HTMLInputElement>;
     disabled?: boolean;
+    disabledPhoneNumber?: boolean;
     allowedCountryCodes?: string[];
     children?: React.ReactElement<OptionProps> | React.ReactElement<OptionProps>[];
 }

package/dist/inputs/phone_number_input/phone_number_input.d.ts.map

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