@companix/uikit 0.0.63 → 0.0.64

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' | 'onChange' | 'closeButton'> & 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/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.es13.js

@@ -1,43 +1,122 @@
-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 { 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 { 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 { OptionsPopover as H } from "./bundle.es50.js";
+import { matchPattern as J } from "@companix/utils-js";
+const ne = (a) => {
+  const {
+    closeAfterSelect: v,
+    placeholder: C,
+    onChange: l,
+    onInputChange: x,
+    readOnly: c,
+    size: N = "md",
+    fill: O,
+    value: n,
+    inputRef: R,
+    disabled: u,
+    required: A,
+    // 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();
+  }, 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]);
+  return /* @__PURE__ */ o(
+    j,
+    {
+      minimal: !0,
+      ref: d,
+      sideOffset: 0,
+      matchTarget: "width",
+      onAnimationEnd: E,
+      onOpenAutoFocus: (e) => e.preventDefault(),
+      onCloseAutoFocus: (e) => e.preventDefault(),
+      content: ({ close: e }) => /* @__PURE__ */ o(
+        H,
+        {
+          ...P,
+          isActive: (t) => n.includes(t),
+          onSelect: (t) => I(S(t), e),
+          disableFiltering: !f.trim(),
+          filterOptions: ({ title: t }) => J(t, f),
+          onOptionsLoaded: (t) => {
+            t.forEach((r) => {
+              m[r.value] = r;
+            });
+          }
+        }
+      ),
+      children: /* @__PURE__ */ o(
+        "div",
+        {
+          className: "form",
+          onClick: w,
+          onMouseDown: y,
+          "data-size": N ?? "md",
+          "data-fill": i(O),
+          "data-required": i(A),
+          "data-disabled": i(u),
+          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,
+                  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" }) })
+                  ] }, `tag-option-${e}-${t}`) : null)
+                }
+              ),
+              (!c || n.length === 0) && /* @__PURE__ */ o(
+                "input",
+                {
+                  ref: L([R, s]),
+                  type: "text",
+                  autoCapitalize: "none",
+                  autoComplete: "off",
+                  autoCorrect: "off",
+                  className: "form-input",
+                  spellCheck: !1,
+                  value: f,
+                  disabled: u,
+                  readOnly: c,
+                  placeholder: C,
+                  onChange: T
+                }
+              )
+            ] }),
+            /* @__PURE__ */ o(g, { className: "expand-icon", icon: G, 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.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,
       {
-        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
 };

package/dist/bundle.es16.js

@@ -1,23 +1,58 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Scrollable as n } from "./bundle.es7.js";
-const s = ({
-  children: o,
-  maxHeight: t,
-  scrollboxRef: i,
-  optionsWrapperRef: e
-}) => /* @__PURE__ */ r(
-  n,
-  {
-    ref: i,
-    implementation: "inner",
-    padding: 10,
-    thumbPadding: 3,
-    thumbColor: "#0000002b",
-    maxHeight: t,
-    scrollY: !0,
-    children: /* @__PURE__ */ r("div", { className: "option-list", ref: e, children: o })
+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,
+      {
+        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
+      }
+    ) });
   }
 );
 export {
-  s as OptionsList
+  D as NumberInput
 };

package/dist/bundle.es17.js

@@ -1,35 +1,23 @@
-import { jsxs as x, jsx as o } from "react/jsx-runtime";
-import * as t from "@radix-ui/react-checkbox";
-import { Icon as h } from "./bundle.es33.js";
-import { faCheck as l } from "@companix/icons-solid";
-import { useId as n } from "react";
-import { attr as c } from "@companix/utils-browser";
-const u = ({ checked: e, required: m, disabled: r, onCheckedChange: s, size: d, label: a }) => {
-  const i = n();
-  return /* @__PURE__ */ x(
-    "div",
-    {
-      className: "checkbox",
-      "data-size": d ?? "md",
-      "data-required": c(m && !e),
-      "data-disabled": c(r),
-      children: [
-        /* @__PURE__ */ o(
-          t.Root,
-          {
-            className: "checkbox-box",
-            checked: e,
-            onCheckedChange: s,
-            disabled: r,
-            id: i,
-            children: /* @__PURE__ */ o(t.Indicator, { className: "checkbox-icon", children: /* @__PURE__ */ o(h, { icon: l, size: "xxxs" }) })
-          }
-        ),
-        a && /* @__PURE__ */ o("label", { className: "checkbox-label", htmlFor: i, "data-disabled": c(r), children: a })
-      ]
-    }
-  );
-};
+import { jsx as r } from "react/jsx-runtime";
+import { Scrollable as n } from "./bundle.es7.js";
+const s = ({
+  children: o,
+  maxHeight: t,
+  scrollboxRef: i,
+  optionsWrapperRef: e
+}) => /* @__PURE__ */ r(
+  n,
+  {
+    ref: i,
+    implementation: "inner",
+    padding: 10,
+    thumbPadding: 3,
+    thumbColor: "#0000002b",
+    maxHeight: t,
+    scrollY: !0,
+    children: /* @__PURE__ */ r("div", { className: "option-list", ref: e, children: o })
+  }
+);
 export {
-  u as Checkbox
+  s as OptionsList
 };