@companix/uikit 0.0.64 → 0.0.66

package/dist/Select/index.d.ts

@@ -16,7 +16,7 @@ export interface SelectParams extends SelectOptionsPopoverParams {
         scrollTo: (index: number) => void;
     }>;
 }
-export type SelectProps<T> = OptionsSource<T> & Omit<SelectFormProps, 'value' | 'onChange' | 'closeButton'> & SelectParams & OnChangeValueType<T> & {
+export type SelectProps<T> = OptionsSource<T> & Omit<SelectFormProps, 'value'> & SelectParams & OnChangeValueType<T> & {
     value: T | null;
     children?: React.ReactNode;
 };

package/dist/__utils/utils.d.ts

@@ -3,6 +3,10 @@ export declare const getMonthMaxDay: (month: number, year: number) => number;
 export declare const getFirstDay: (month: number, year: number) => number;
 export declare const getDayIndex: (day: number) => number;
 export declare const createVoids: (length: number) => any[];
+export declare const arrays: {
+    add: <T>(values: T[], value: T) => T[];
+    remove: <T>(values: T[], value: T) => T[];
+};
 export declare const dateToFormat: (date: Date) => DateFormat;
 export declare const createDateValidation: ({ min, max }: {
     min: DateFormat;

package/dist/bundle.es12.js

@@ -1,15 +1,15 @@
 import { jsx as l } from "react/jsx-runtime";
-import { useMemo as L, useImperativeHandle as j } from "react";
-import { Popover as k } from "./bundle.es10.js";
-import { useFroozeClosing as q } from "./bundle.es47.js";
-import { SelectInput as w } from "./bundle.es48.js";
-import { useScrollListController as H } from "./bundle.es49.js";
-import { OptionsPopover as M } from "./bundle.es50.js";
-import { mergeRefs as N } from "react-merge-refs";
-const Y = (t) => {
+import { useRef as L, useMemo as j, useImperativeHandle as k } from "react";
+import { Popover as q } from "./bundle.es10.js";
+import { useFroozeClosing as w } from "./bundle.es47.js";
+import { SelectInput as H } from "./bundle.es48.js";
+import { useScrollListController as M } from "./bundle.es49.js";
+import { OptionsPopover as N } from "./bundle.es50.js";
+import { mergeRefs as W } from "react-merge-refs";
+const Z = (t) => {
   const {
     onChange: i,
-    value: r,
+    value: n,
     matchTarget: u = "width",
     children: f,
     scrollRef: m,
@@ -20,22 +20,23 @@ const Y = (t) => {
     required: v,
     className: h,
     clearButtonIcon: O,
-    leftElement: C,
-    inputRef: R,
-    onClear: W,
+    leftElement: R,
+    inputRef: C,
+    onClear: y,
     fill: P,
     size: g,
     placeholder: E,
     onClick: A,
     // options popover
     ...S
-  } = t, p = L(() => {
-    const o = {};
-    return (t.options ?? t.defaultOptions ?? []).forEach((n) => {
-      o[n.value] = n;
-    }), o;
-  }, [t.options, t.defaultOptions]), x = r === null ? null : p[r] ?? null, { popoverRef: z, froozePopoverPosition: B, handleAnimationEnd: F } = q(), { scrollToElement: c, optionsWrapperRef: I, scrollBoxRef: T } = H();
-  j(m, () => ({
+  } = t, r = L({});
+  j(() => {
+    (t.options ?? t.defaultOptions ?? []).forEach((e) => {
+      r.current[e.value] = e;
+    });
+  }, [t.options, t.defaultOptions]);
+  const x = n === null ? null : r.current[n] ?? null, { popoverRef: z, froozePopoverPosition: B, handleAnimationEnd: F } = w(), { scrollToElement: c, optionsWrapperRef: I, scrollBoxRef: T } = M();
+  k(m, () => ({
     scrollTo: (o) => c(o, "top")
   }));
   const b = (o, e) => {
@@ -44,10 +45,10 @@ const Y = (t) => {
     o.stopPropagation(), s && i(null);
   };
   return /* @__PURE__ */ l(
-    k,
+    q,
     {
       minimal: !0,
-      ref: N([z, d]),
+      ref: W([z, d]),
       sideOffset: 0,
       matchTarget: u,
       onAnimationEnd: F,
@@ -55,28 +56,28 @@ const Y = (t) => {
       onCloseAutoFocus: (o) => o.preventDefault(),
       disabled: a,
       content: ({ close: o }) => /* @__PURE__ */ l(
-        M,
+        N,
         {
           ...S,
-          isActive: (e) => e === r,
+          isActive: (e) => e === n,
           onSelect: (e) => b(e, o),
           scrollboxRef: T,
           optionsWrapperRef: I,
           onOpened: (e) => c(e, "center"),
           onOptionsLoaded: (e) => {
-            e.forEach((n) => {
-              p[n.value] = n;
+            e.forEach((p) => {
+              r.current[p.value] = p;
             });
           }
         }
       ),
       children: f ?? /* @__PURE__ */ l(
-        w,
+        H,
         {
           required: v,
           className: h,
-          leftElement: C,
-          inputRef: R,
+          leftElement: R,
+          inputRef: C,
           onClear: D,
           fill: P,
           size: g,
@@ -92,5 +93,5 @@ const Y = (t) => {
   );
 };
 export {
-  Y as Select
+  Z as Select
 };

package/dist/bundle.es13.js

@@ -1,68 +1,70 @@
 import { jsx as o, jsxs as p } from "react/jsx-runtime";
-import { useFroozeClosing as M } from "./bundle.es47.js";
-import { Popover as j } from "./bundle.es10.js";
-import { useState as q, useRef as h, useMemo as V } from "react";
+import { mergeRefs as T } from "react-merge-refs";
+import { useState as M, useRef as h, useMemo as j } from "react";
+import { matchPattern as q } from "@companix/utils-js";
+import { faXmark as V, faChevronDown as $ } from "@companix/icons-solid";
+import { useFroozeClosing as B } from "./bundle.es47.js";
+import { Popover as L } from "./bundle.es10.js";
 import { Icon as g } from "./bundle.es33.js";
-import { attr as i, getActiveElementByAnotherElement as $, contains as B } from "@companix/utils-browser";
-import { mergeRefs as L } from "react-merge-refs";
-import { faXmark as X, faChevronDown as G } from "@companix/icons-solid";
+import { attr as l, getActiveElementByAnotherElement as X, contains as G } from "@companix/utils-browser";
 import { OptionsPopover as H } from "./bundle.es50.js";
-import { matchPattern as J } from "@companix/utils-js";
-const ne = (a) => {
+import { arrays as v } from "./bundle.es51.js";
+const ne = (r) => {
   const {
-    closeAfterSelect: v,
-    placeholder: C,
-    onChange: l,
-    onInputChange: x,
-    readOnly: c,
-    size: N = "md",
-    fill: O,
+    closeAfterSelect: C,
+    placeholder: x,
+    onChange: c,
+    onInputChange: N,
+    readOnly: u,
+    size: O = "md",
+    fill: R,
     value: n,
-    inputRef: R,
-    disabled: u,
-    required: A,
+    inputRef: A,
+    disabled: f,
+    required: P,
     // options popover
-    ...P
-  } = a, [f, b] = q(""), s = h(null), z = h(null), { popoverRef: d, froozePopoverPosition: D, handleAnimationEnd: E } = M(), S = (e) => n.includes(e) ? [...n] : [...n, e], k = (e) => n.filter((t) => e !== t), I = (e, t) => {
-    v ? (D(), l(e), t()) : l(e);
-  }, w = (e) => {
-    if (u) return;
-    d.current && d.current.getAttribute("data-state") === "open" && e.preventDefault();
-    const t = $(e.currentTarget);
-    e.defaultPrevented || B(e.currentTarget, t) || s.current && s.current.focus();
+    ...b
+  } = r, [m, z] = M(""), a = h(null), D = h(null), i = h({});
+  j(() => {
+    (r.options ?? r.defaultOptions ?? []).forEach((t) => {
+      i.current[t.value] = t;
+    });
+  }, [r.options, r.defaultOptions]);
+  const { popoverRef: d, froozePopoverPosition: E, handleAnimationEnd: S } = B(), k = (e, t) => {
+    C ? (E(), c(e), t()) : c(e);
   }, y = (e) => {
-    e.target !== s.current && e.preventDefault();
-  }, F = (e, t) => {
-    e.stopPropagation(), l(k(t));
-  }, T = ({ target: e }) => {
-    b(e.value), x?.(e.value);
-  }, m = V(() => {
-    const e = {};
-    return (a.options ?? a.defaultOptions ?? []).forEach((r) => {
-      e[r.value] = r;
-    }), e;
-  }, [a.options, a.defaultOptions]);
+    if (f) return;
+    d.current && d.current.getAttribute("data-state") === "open" && e.preventDefault();
+    const t = X(e.currentTarget);
+    e.defaultPrevented || G(e.currentTarget, t) || a.current && a.current.focus();
+  }, I = (e) => {
+    e.target !== a.current && e.preventDefault();
+  }, w = (e, t) => {
+    e.stopPropagation(), c(v.remove(n, t));
+  }, F = ({ target: e }) => {
+    z(e.value), N?.(e.value);
+  };
   return /* @__PURE__ */ o(
-    j,
+    L,
     {
       minimal: !0,
       ref: d,
       sideOffset: 0,
       matchTarget: "width",
-      onAnimationEnd: E,
+      onAnimationEnd: S,
       onOpenAutoFocus: (e) => e.preventDefault(),
       onCloseAutoFocus: (e) => e.preventDefault(),
       content: ({ close: e }) => /* @__PURE__ */ o(
         H,
         {
-          ...P,
+          ...b,
           isActive: (t) => n.includes(t),
-          onSelect: (t) => I(S(t), e),
-          disableFiltering: !f.trim(),
-          filterOptions: ({ title: t }) => J(t, f),
+          onSelect: (t) => k(v.add(n, t), e),
+          disableFiltering: !m.trim(),
+          filterOptions: ({ title: t }) => q(t, m),
           onOptionsLoaded: (t) => {
-            t.forEach((r) => {
-              m[r.value] = r;
+            t.forEach((s) => {
+              i.current[s.value] = s;
             });
           }
         }
@@ -71,46 +73,46 @@ const ne = (a) => {
         "div",
         {
           className: "form",
-          onClick: w,
-          onMouseDown: y,
-          "data-size": N ?? "md",
-          "data-fill": i(O),
-          "data-required": i(A),
-          "data-disabled": i(u),
+          onClick: y,
+          onMouseDown: I,
+          "data-size": O ?? "md",
+          "data-fill": l(R),
+          "data-required": l(P),
+          "data-disabled": l(f),
           children: /* @__PURE__ */ p("div", { className: "select-tags-container", children: [
             /* @__PURE__ */ p("div", { className: "select-tags", children: [
               n.length > 0 && /* @__PURE__ */ o(
                 "div",
                 {
                   className: "tag-container",
-                  ref: z,
+                  ref: D,
                   role: "listbox",
-                  "data-readonly": i(c),
-                  children: n.map((e, t) => m[e] ? /* @__PURE__ */ p("div", { className: "tag", children: [
-                    /* @__PURE__ */ o("span", { className: "tag-name", children: m[e].title }),
-                    /* @__PURE__ */ o("button", { className: "tag-close-button", onClick: (r) => F(r, e), children: /* @__PURE__ */ o(g, { className: "tag-close-icon", icon: X, size: "xxxs" }) })
+                  "data-readonly": l(u),
+                  children: n.map((e, t) => i.current[e] ? /* @__PURE__ */ p("div", { className: "tag", children: [
+                    /* @__PURE__ */ o("span", { className: "tag-name", children: i.current[e].title }),
+                    /* @__PURE__ */ o("button", { className: "tag-close-button", onClick: (s) => w(s, e), children: /* @__PURE__ */ o(g, { className: "tag-close-icon", icon: V, size: "xxxs" }) })
                   ] }, `tag-option-${e}-${t}`) : null)
                 }
               ),
-              (!c || n.length === 0) && /* @__PURE__ */ o(
+              (!u || n.length === 0) && /* @__PURE__ */ o(
                 "input",
                 {
-                  ref: L([R, s]),
+                  ref: T([A, a]),
                   type: "text",
                   autoCapitalize: "none",
                   autoComplete: "off",
                   autoCorrect: "off",
                   className: "form-input",
                   spellCheck: !1,
-                  value: f,
-                  disabled: u,
-                  readOnly: c,
-                  placeholder: C,
-                  onChange: T
+                  value: m,
+                  disabled: f,
+                  readOnly: u,
+                  placeholder: x,
+                  onChange: F
                 }
               )
             ] }),
-            /* @__PURE__ */ o(g, { className: "expand-icon", icon: G, size: "xxxs" })
+            /* @__PURE__ */ o(g, { className: "expand-icon", icon: $, size: "xxxs" })
           ] })
         }
       )

package/dist/bundle.es14.js

@@ -1,8 +1,8 @@
 import { jsx as t } from "react/jsx-runtime";
 import { forwardRef as b, useRef as R } from "react";
 import { mergeRefs as c } from "react-merge-refs";
-import { InputElement as x } from "./bundle.es51.js";
-import { InputContainer as I } from "./bundle.es52.js";
+import { InputElement as x } from "./bundle.es52.js";
+import { InputContainer as I } from "./bundle.es53.js";
 import g from "classnames";
 const N = b(
   ({

package/dist/bundle.es16.js

@@ -2,7 +2,7 @@ import { jsx as t } from "react/jsx-runtime";
 import C from "classnames";
 import { forwardRef as j, useRef as w } from "react";
 import { mergeRefs as y } from "react-merge-refs";
-import { InputContainer as F } from "./bundle.es52.js";
+import { InputContainer as F } from "./bundle.es53.js";
 import { NumericFormat as V } from "react-number-format";
 const D = j(
   ({

package/dist/bundle.es22.js

@@ -2,7 +2,7 @@ import { jsx as e, jsxs as i } from "react/jsx-runtime";
 import f from "classnames";
 import * as o from "@radix-ui/react-dialog";
 import { VisuallyHidden as a } from "@radix-ui/react-visually-hidden";
-import { RemoveListener as v } from "./bundle.es53.js";
+import { RemoveListener as v } from "./bundle.es54.js";
 const g = (l) => {
   const { size: n = "s", open: r, onOpenChange: s, children: c, onClosed: t, disableEsc: p, className: d } = l, m = (h) => {
     p && h.preventDefault();

package/dist/bundle.es23.js

@@ -1,7 +1,7 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import * as r from "@radix-ui/react-alert-dialog";
 import { Button as c } from "./bundle.es4.js";
-import { RemoveListener as N } from "./bundle.es53.js";
+import { RemoveListener as N } from "./bundle.es54.js";
 import { VisuallyHidden as u } from "@radix-ui/react-visually-hidden";
 const C = ({
   open: d,

package/dist/bundle.es24.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { Button as m } from "./bundle.es4.js";
-import { useLoading as p } from "./bundle.es54.js";
+import { useLoading as p } from "./bundle.es55.js";
 const g = ({ onClick: o, appearance: r = "primary", ...i }) => {
   const { isLoading: n, isError: t, handleClick: a } = p({ onClick: o });
   return /* @__PURE__ */ e(

package/dist/bundle.es27.js

@@ -1,5 +1,5 @@
 import { jsx as f } from "react/jsx-runtime";
-import { useResizeTextarea as x } from "./bundle.es55.js";
+import { useResizeTextarea as x } from "./bundle.es56.js";
 import { attr as e, callMultiple as u } from "@companix/utils-browser";
 import { useEffect as z } from "react";
 import { mergeRefs as R } from "react-merge-refs";

package/dist/bundle.es28.js

@@ -2,10 +2,10 @@ import { jsx as u } from "react/jsx-runtime";
 import { Popover as T } from "./bundle.es10.js";
 import { Input as w } from "./bundle.es14.js";
 import { useState as A, useRef as j } from "react";
-import { Calendar as E } from "./bundle.es56.js";
-import { useDayDisableCheker as N } from "./bundle.es57.js";
+import { Calendar as E } from "./bundle.es57.js";
+import { useDayDisableCheker as N } from "./bundle.es58.js";
 import { getNum as h, formatTime as v } from "@companix/utils-js";
-import { removeDigits as O } from "./bundle.es58.js";
+import { removeDigits as O } from "./bundle.es51.js";
 import { SelectRightElements as Y } from "./bundle.es59.js";
 const i = {
   char: "-",

package/dist/bundle.es29.js

@@ -1,7 +1,7 @@
 import { jsxs as D, jsx as h } from "react/jsx-runtime";
 import { useMemo as M, useEffect as C } from "react";
 import { Select as c } from "./bundle.es12.js";
-import { createDateValidation as O, getMonthMaxDay as T } from "./bundle.es58.js";
+import { createDateValidation as O, getMonthMaxDay as T } from "./bundle.es51.js";
 import { defaultMin as j, defaultMax as N, useCalendarOptions as V } from "./bundle.es60.js";
 const B = ({
   min: o = j,

package/dist/bundle.es32.js

@@ -1,81 +1,81 @@
 import { jsx as g } from "react/jsx-runtime";
-import { useRef as _, useMemo as b, useState as P, useEffect as j } from "react";
-import { getNum as v } from "@companix/utils-js";
-import { getTimesOptions as D, getTimeValue as A, removeDigits as W, convertTimeToOption as q } from "./bundle.es58.js";
-import { SelectRightElements as w } from "./bundle.es59.js";
-import { Select as y } from "./bundle.es12.js";
-import { Input as z } from "./bundle.es14.js";
-const r = {
+import { useRef as b, useMemo as I, useState as E, useCallback as A } from "react";
+import { getNum as S } from "@companix/utils-js";
+import { getTimesOptions as W, getTimeValue as q, removeDigits as w, convertTimeToOption as y } from "./bundle.es51.js";
+import { SelectRightElements as z } from "./bundle.es59.js";
+import { Select as F } from "./bundle.es12.js";
+import { Input as G } from "./bundle.es14.js";
+const o = {
   char: ":",
-  toString: (s) => s ? q(s, r.char) : "",
+  toString: (s) => s ? y(s, o.char) : "",
   toValue: (s) => {
-    const n = s.split(r.char);
+    const n = s.split(o.char);
     if (n.length === 2) {
-      const [e, i] = [v(n[0]), v(n[1])];
-      if (e !== null && i !== null && e < 24 && e >= 0 && i < 60 && i >= 0)
-        return { hours: e, minutes: i };
+      const [e, u] = [S(n[0]), S(n[1])];
+      if (e !== null && u !== null && e < 24 && e >= 0 && u < 60 && u >= 0)
+        return { hours: e, minutes: u };
     }
     return null;
   }
-}, U = (s) => {
-  const { value: n, onChange: e, clearButton: i, clearButtonIcon: I, disabled: a, ...T } = s, m = _(null), p = _(null), h = b(() => D(10), []), d = b(() => {
+}, Y = (s) => {
+  const { value: n, onChange: e, clearButton: u, clearButtonIcon: _, disabled: a, ...T } = s, m = b(null), p = b(null), h = I(() => W(10), []), k = I(() => {
     if (n && !n.minutes.toString().endsWith("0")) {
-      const t = n.hours * 6 + Math.trunc(n.minutes / 10), u = [...h];
-      return u.splice(t + 1, 0, A(n)), u;
+      const t = n.hours * 6 + Math.trunc(n.minutes / 10), r = [...h];
+      return r.splice(t + 1, 0, q(n)), r;
     }
     return h;
-  }, [h, n]), [o, l] = P(() => r.toString(n)), x = (t) => {
-    l(t);
-    const u = r.toValue(t);
-    u && e?.(u);
-  }, B = (t) => {
+  }, [h, n]), [i, l] = E(() => o.toString(n)), v = (t) => {
+    l(t), N(t);
+    const r = o.toValue(t);
+    r && e?.(r);
+  }, x = (t) => {
     a || m.current && m.current.getAttribute("data-state") === "open" && t.preventDefault();
-  }, O = () => {
-    r.toValue(o) === null && l(r.toString(n ?? null));
+  }, B = () => {
+    o.toValue(i) === null && l(o.toString(n ?? null));
+  }, O = (t) => {
+    e?.(o.toValue(t)), l(t);
   }, R = (t) => {
-    e?.(r.toValue(t)), l(t);
-  }, k = (t) => {
     t.stopPropagation(), l(""), e?.(null);
-  };
-  return j(() => {
-    if (o && o !== "__:__") {
-      const [t, u] = o.split(":"), V = (c) => {
-        const [C, S] = c.split(""), [E, M] = [C === "_" ? "0" : C, S === "_" ? "0" : S];
-        return E + M;
-      }, N = [V(t), V(u)].join(":"), f = r.toValue(N);
+  }, N = A((t) => {
+    if (t && t !== "__:__") {
+      const [r, M] = t.split(":"), d = (c) => {
+        const [C, V] = c.split(""), [j, D] = [C === "_" ? "0" : C, V === "_" ? "0" : V];
+        return j + D;
+      }, P = [d(r), d(M)].join(":"), f = o.toValue(P);
       if (f) {
         const c = f.hours * 6 + Math.trunc(f.minutes / 10);
         c !== -1 && p.current && p.current.scrollTo(c);
       }
     }
-  }, [d, o]), /* @__PURE__ */ g(
-    y,
+  }, []);
+  return /* @__PURE__ */ g(
+    F,
     {
       minimalOptions: !0,
-      options: d,
-      onChange: R,
-      value: o,
+      options: k,
+      onChange: O,
+      value: i,
       popoverRef: m,
       scrollRef: p,
       disabled: a,
       children: /* @__PURE__ */ g(
-        z,
+        G,
         {
           ...T,
-          value: o,
+          value: i,
           disabled: a,
-          onClick: B,
-          onValueChange: x,
-          onBlur: O,
+          onClick: x,
+          onValueChange: v,
+          onBlur: B,
           mask: "99:99",
           placeholder: "00:00",
           rightElement: /* @__PURE__ */ g(
-            w,
+            z,
             {
-              clearButton: i,
-              clearButtonIcon: I,
-              value: !!W(o, [":", "_"]),
-              onClear: k
+              clearButton: u,
+              clearButtonIcon: _,
+              value: !!w(i, [":", "_"]),
+              onClear: R
             }
           )
         }
@@ -84,5 +84,5 @@ const r = {
   );
 };
 export {
-  U as TimePicker
+  Y as TimePicker
 };

package/dist/bundle.es42.js

@@ -2,7 +2,7 @@ import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import * as t from "@radix-ui/react-toast";
 import { attr as T } from "@companix/utils-browser";
 import { useState as d, useRef as b, useEffect as j, useLayoutEffect as E } from "react";
-import { RemoveListener as I } from "./bundle.es53.js";
+import { RemoveListener as I } from "./bundle.es54.js";
 const m = (o) => {
   const [r, u] = d(!0), [p, f] = d(!1), s = b(null), {
     appearance: C = "neutral",