@companix/uikit 0.0.63 → 0.0.65

package/dist/Select/OptionsPopover.d.ts

@@ -22,7 +22,12 @@ export interface SelectAddOption {
     closeOnClick?: boolean;
     onClick: () => void;
 }
-interface InternalListProps<T> {
+export interface SelectOptionsPopoverParams {
+    minimalOptions?: boolean;
+    addOption?: SelectAddOption;
+    emptyText?: string;
+}
+interface InternalListProps<T> extends SelectOptionsPopoverParams {
     options: Option<T>[];
     scrollboxRef?: React.RefObject<HTMLDivElement>;
     optionsWrapperRef?: React.RefObject<HTMLDivElement>;
@@ -31,9 +36,6 @@ interface InternalListProps<T> {
     onOpened?: (activeIndex: number) => void;
     filterOptions?: (option: Option<T>) => boolean;
     disableFiltering?: boolean;
-    minimalOptions?: boolean;
-    addOption?: SelectAddOption;
-    emptyText?: string;
 }
 export type OptionsPopoverProps<T> = OptionsSourceControl<T> & Omit<InternalListProps<T>, 'options'>;
 export declare const OptionsPopover: <T>(props: OptionsPopoverProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/Select/index.d.ts

@@ -1,27 +1,24 @@
 import { SelectFormProps } from './SelectInput';
-import { OptionsSource, SelectAddOption } from './OptionsPopover';
+import { OptionsSource, SelectOptionsPopoverParams } from './OptionsPopover';
 interface Cleanable<T> {
     clearButton: true;
-    onChange: (event: T | null) => void;
+    onChange: (value: T | null) => void;
 }
 interface UnCleanable<T> {
     clearButton?: false;
-    onChange: (event: T) => void;
+    onChange: (value: T) => void;
 }
-type DependedValueType<T> = Cleanable<T> | UnCleanable<T>;
-export interface SelectParams {
+type OnChangeValueType<T> = Cleanable<T> | UnCleanable<T>;
+export interface SelectParams extends SelectOptionsPopoverParams {
     matchTarget?: 'width' | 'min-width';
     popoverRef?: React.Ref<HTMLDivElement>;
     scrollRef?: React.Ref<{
         scrollTo: (index: number) => void;
     }>;
-    emptyText?: string;
-    minimalOptions?: boolean;
-    addOption?: SelectAddOption;
 }
-export type SelectProps<T> = Omit<SelectFormProps, 'value' | 'onChange' | 'closeButton'> & DependedValueType<T> & SelectParams & OptionsSource<T> & {
+export type SelectProps<T> = OptionsSource<T> & Omit<SelectFormProps, 'value'> & SelectParams & OnChangeValueType<T> & {
     value: T | null;
     children?: React.ReactNode;
 };
-export declare const Select: <T extends string | number>(props: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <T>(props: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/SelectTags/index.d.ts

@@ -1,19 +1,16 @@
-import { OptionsSource, SelectAddOption } from '../Select/OptionsPopover';
-export interface SelectParams<T> {
+import { OptionsSource, SelectOptionsPopoverParams } from '../Select/OptionsPopover';
+export interface SelectTagsParams<T> extends SelectOptionsPopoverParams {
     closeAfterSelect?: boolean;
     onInputChange?: (text: string) => void;
     onChange: (event: T[]) => void;
-    placeholder?: string;
     value: T[];
+    placeholder?: string;
     disabled?: boolean;
     readOnly?: boolean;
     size?: 'sm' | 'md' | 'lg';
     fill?: boolean;
     inputRef?: React.Ref<HTMLInputElement>;
     required?: boolean;
-    minimalOptions?: boolean;
-    addOption?: SelectAddOption;
-    emptyText?: string;
 }
-export type SelectTagsProps<T> = OptionsSource<T> & SelectParams<T>;
+export type SelectTagsProps<T> = OptionsSource<T> & SelectTagsParams<T>;
 export declare const SelectTags: <T extends string | number>(props: SelectTagsProps<T>) => import("react/jsx-runtime").JSX.Element;

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.es.js

@@ -9,21 +9,21 @@ import { Segments as g } from "./bundle.es9.js";
 import { Popover as h } from "./bundle.es10.js";
 import { Tooltip as v } from "./bundle.es11.js";
 import { Select as P } from "./bundle.es12.js";
-import { Input as A } from "./bundle.es13.js";
-import { OptionItem as b } from "./bundle.es14.js";
-import { NumberInput as R } from "./bundle.es15.js";
-import { OptionsList as y } from "./bundle.es16.js";
-import { Checkbox as G } from "./bundle.es17.js";
-import { Switch as O } from "./bundle.es18.js";
-import { Radio as z, RadioGroup as N } from "./bundle.es19.js";
-import { Drawer as q } from "./bundle.es20.js";
-import { Dialog as H } from "./bundle.es21.js";
-import { AlertDialog as K } from "./bundle.es22.js";
-import { LoadingButton as Q } from "./bundle.es23.js";
-import { Tabs as V } from "./bundle.es24.js";
-import { Countdown as X } from "./bundle.es25.js";
-import { TextArea as Z } from "./bundle.es26.js";
-import { SelectTags as $ } from "./bundle.es27.js";
+import { SelectTags as A } from "./bundle.es13.js";
+import { Input as b } from "./bundle.es14.js";
+import { OptionItem as R } from "./bundle.es15.js";
+import { NumberInput as y } from "./bundle.es16.js";
+import { OptionsList as G } from "./bundle.es17.js";
+import { Checkbox as O } from "./bundle.es18.js";
+import { Switch as z } from "./bundle.es19.js";
+import { Radio as j, RadioGroup as q } from "./bundle.es20.js";
+import { Drawer as H } from "./bundle.es21.js";
+import { Dialog as K } from "./bundle.es22.js";
+import { AlertDialog as Q } from "./bundle.es23.js";
+import { LoadingButton as V } from "./bundle.es24.js";
+import { Tabs as X } from "./bundle.es25.js";
+import { Countdown as Z } from "./bundle.es26.js";
+import { TextArea as $ } from "./bundle.es27.js";
 import { DatePicker as ro } from "./bundle.es28.js";
 import { DateInput as to } from "./bundle.es29.js";
 import { FileOverlay as mo } from "./bundle.es30.js";
@@ -42,40 +42,40 @@ import { Toast as Go } from "./bundle.es42.js";
 import { DialogShell as Oo, createDialogsRegistry as Fo } from "./bundle.es43.js";
 import { createPopoversRegistry as No } from "./bundle.es44.js";
 export {
-  K as AlertDialog,
+  Q as AlertDialog,
   e as Avatar,
   x as Button,
   a as ButtonGroup,
-  G as Checkbox,
+  O as Checkbox,
   vo as ColorSchemeScript,
-  X as Countdown,
+  Z as Countdown,
   to as DateInput,
   ro as DatePicker,
-  H as Dialog,
+  K as Dialog,
   Oo as DialogShell,
-  q as Drawer,
+  H as Drawer,
   mo as FileOverlay,
   fo as FormGroup,
   co as Icon,
   S as ImitateScroll,
-  A as Input,
-  Q as LoadingButton,
-  R as NumberInput,
-  b as OptionItem,
-  y as OptionsList,
+  b as Input,
+  V as LoadingButton,
+  y as NumberInput,
+  R as OptionItem,
+  G as OptionsList,
   h as Popover,
   so as ProgressBar,
-  z as Radio,
-  N as RadioGroup,
+  j as Radio,
+  q as RadioGroup,
   n as Scrollable,
   g as Segments,
   P as Select,
-  $ as SelectTags,
+  A as SelectTags,
   uo as Skeleton,
   l as Spinner,
-  O as Switch,
-  V as Tabs,
-  Z as TextArea,
+  z as Switch,
+  X as Tabs,
+  $ as TextArea,
   To as ThemeProvider,
   io as TimePicker,
   Go as Toast,

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,43 +1,124 @@
-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 g from "classnames";
-const N = b(
-  ({
-    onChange: m,
-    onValueChange: f,
-    readOnly: i,
-    inputClassName: o,
-    value: p,
-    placeholder: n,
-    mask: d,
-    inputType: s = "text",
-    maskChar: u,
-    inputRef: a,
-    ...e
-  }, l) => {
-    const r = R(null);
-    return /* @__PURE__ */ t(I, { ref: l, inputRef: r, ...e, children: /* @__PURE__ */ t(
-      x,
-      {
-        type: s,
-        ref: c([r, a]),
-        className: g("form-input form-input-base", o),
-        "aria-disabled": e.disabled,
-        onChange: m,
-        onValueChange: f,
-        value: p,
-        placeholder: n,
-        disabled: e.disabled,
-        readOnly: i,
-        maskChar: u,
-        mask: d
-      }
-    ) });
-  }
-);
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+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 l, getActiveElementByAnotherElement as X, contains as G } from "@companix/utils-browser";
+import { OptionsPopover as H } from "./bundle.es50.js";
+import { arrays as v } from "./bundle.es51.js";
+const ne = (r) => {
+  const {
+    closeAfterSelect: C,
+    placeholder: x,
+    onChange: c,
+    onInputChange: N,
+    readOnly: u,
+    size: O = "md",
+    fill: R,
+    value: n,
+    inputRef: A,
+    disabled: f,
+    required: P,
+    // options popover
+    ...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) => {
+    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(
+    L,
+    {
+      minimal: !0,
+      ref: d,
+      sideOffset: 0,
+      matchTarget: "width",
+      onAnimationEnd: S,
+      onOpenAutoFocus: (e) => e.preventDefault(),
+      onCloseAutoFocus: (e) => e.preventDefault(),
+      content: ({ close: e }) => /* @__PURE__ */ o(
+        H,
+        {
+          ...b,
+          isActive: (t) => n.includes(t),
+          onSelect: (t) => k(v.add(n, t), e),
+          disableFiltering: !m.trim(),
+          filterOptions: ({ title: t }) => q(t, m),
+          onOptionsLoaded: (t) => {
+            t.forEach((s) => {
+              i.current[s.value] = s;
+            });
+          }
+        }
+      ),
+      children: /* @__PURE__ */ o(
+        "div",
+        {
+          className: "form",
+          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: D,
+                  role: "listbox",
+                  "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)
+                }
+              ),
+              (!u || n.length === 0) && /* @__PURE__ */ o(
+                "input",
+                {
+                  ref: T([A, a]),
+                  type: "text",
+                  autoCapitalize: "none",
+                  autoComplete: "off",
+                  autoCorrect: "off",
+                  className: "form-input",
+                  spellCheck: !1,
+                  value: m,
+                  disabled: f,
+                  readOnly: u,
+                  placeholder: x,
+                  onChange: F
+                }
+              )
+            ] }),
+            /* @__PURE__ */ o(g, { className: "expand-icon", icon: $, size: "xxxs" })
+          ] })
+        }
+      )
+    }
+  );
+};
 export {
-  N as Input
+  ne as SelectTags
 };

package/dist/bundle.es14.js

@@ -1,38 +1,43 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import N from "classnames";
-import { Icon as v } from "./bundle.es33.js";
-import { attr as t } from "@companix/utils-browser";
-import { forwardRef as k } from "react";
-import { faCheck as x } from "@companix/icons-solid";
-const O = k(
-  ({ title: d, icon: n, active: c, label: e, disabled: r, minimal: a, onClick: l, className: m, ...s }, p) => {
-    const f = (h) => {
-      r || l?.(h);
-    };
-    return /* @__PURE__ */ i(
-      "div",
+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.es52.js";
+import { InputContainer as I } from "./bundle.es53.js";
+import g from "classnames";
+const N = b(
+  ({
+    onChange: m,
+    onValueChange: f,
+    readOnly: i,
+    inputClassName: o,
+    value: p,
+    placeholder: n,
+    mask: d,
+    inputType: s = "text",
+    maskChar: u,
+    inputRef: a,
+    ...e
+  }, l) => {
+    const r = R(null);
+    return /* @__PURE__ */ t(I, { ref: l, inputRef: r, ...e, children: /* @__PURE__ */ t(
+      x,
       {
-        ref: p,
-        ...s,
-        className: N("option", m),
-        "data-selected": t(c),
-        "data-disabled": t(r),
-        "data-minimal": t(a),
-        onClick: f,
-        children: [
-          /* @__PURE__ */ i("div", { className: "option-content", children: [
-            n && /* @__PURE__ */ o("div", { className: "option-icon", children: n }),
-            /* @__PURE__ */ i("div", { className: "option-content-layout", children: [
-              /* @__PURE__ */ o("div", { className: "option-title", children: d }),
-              e && /* @__PURE__ */ o("div", { className: "option-label", children: e })
-            ] })
-          ] }),
-          c && !a && /* @__PURE__ */ o("div", { className: "option-check", children: /* @__PURE__ */ o(v, { icon: x }) })
-        ]
+        type: s,
+        ref: c([r, a]),
+        className: g("form-input form-input-base", o),
+        "aria-disabled": e.disabled,
+        onChange: m,
+        onValueChange: f,
+        value: p,
+        placeholder: n,
+        disabled: e.disabled,
+        readOnly: i,
+        maskChar: u,
+        mask: d
       }
-    );
+    ) });
   }
 );
 export {
-  O as OptionItem
+  N as Input
 };

package/dist/bundle.es15.js

@@ -1,58 +1,38 @@
-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 { NumericFormat as V } from "react-number-format";
-const D = j(
-  ({
-    onChange: m,
-    onValueChange: o,
-    readOnly: f,
-    inputClassName: i,
-    value: n,
-    placeholder: u,
-    thousandSeparator: a,
-    decimalSeparator: p,
-    allowedDecimalSeparators: l,
-    thousandsGroupStyle: s,
-    decimalScale: d,
-    fixedDecimalScale: b,
-    allowNegative: R = !1,
-    allowLeadingZeros: c,
-    suffix: g,
-    prefix: x,
-    inputRef: I,
-    ...e
-  }, N) => {
-    const r = w(null);
-    return /* @__PURE__ */ t(F, { ref: N, inputRef: r, ...e, children: /* @__PURE__ */ t(
-      V,
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import N from "classnames";
+import { Icon as v } from "./bundle.es33.js";
+import { attr as t } from "@companix/utils-browser";
+import { forwardRef as k } from "react";
+import { faCheck as x } from "@companix/icons-solid";
+const O = k(
+  ({ title: d, icon: n, active: c, label: e, disabled: r, minimal: a, onClick: l, className: m, ...s }, p) => {
+    const f = (h) => {
+      r || l?.(h);
+    };
+    return /* @__PURE__ */ i(
+      "div",
       {
-        type: "text",
-        getInputRef: y([r, I]),
-        className: C("form-input form-input-base", i),
-        "aria-disabled": e.disabled,
-        onChange: m,
-        onValueChange: ({ floatValue: h }) => o?.(h ?? null),
-        value: n,
-        placeholder: u,
-        disabled: e.disabled,
-        readOnly: f,
-        thousandSeparator: a,
-        decimalSeparator: p,
-        allowedDecimalSeparators: l,
-        thousandsGroupStyle: s,
-        decimalScale: d,
-        fixedDecimalScale: b,
-        allowNegative: R,
-        allowLeadingZeros: c,
-        suffix: g,
-        prefix: x
+        ref: p,
+        ...s,
+        className: N("option", m),
+        "data-selected": t(c),
+        "data-disabled": t(r),
+        "data-minimal": t(a),
+        onClick: f,
+        children: [
+          /* @__PURE__ */ i("div", { className: "option-content", children: [
+            n && /* @__PURE__ */ o("div", { className: "option-icon", children: n }),
+            /* @__PURE__ */ i("div", { className: "option-content-layout", children: [
+              /* @__PURE__ */ o("div", { className: "option-title", children: d }),
+              e && /* @__PURE__ */ o("div", { className: "option-label", children: e })
+            ] })
+          ] }),
+          c && !a && /* @__PURE__ */ o("div", { className: "option-check", children: /* @__PURE__ */ o(v, { icon: x }) })
+        ]
       }
-    ) });
+    );
   }
 );
 export {
-  D as NumberInput
+  O as OptionItem
 };