@companix/uikit 0.0.58 → 0.0.60

package/dist/SelectTags/index.d.ts

@@ -3,6 +3,8 @@ import { SelectAddOption } from '../Select/SelectOptions';
 export interface SelectTagsProps<T> {
     options: Option<T>[];
     onChange: (event: T[]) => void;
+    onInputChange?: (text: string) => void;
+    onPopoverOpen?: (open: boolean) => void;
     placeholder?: string;
     value: T[];
     children?: React.ReactNode;

package/dist/Skeleton/index.d.ts

@@ -1,3 +1,3 @@
-export interface SkeletonProps extends Pick<React.CSSProperties, 'width' | 'height' | 'inlineSize' | 'blockSize' | 'maxWidth' | 'maxInlineSize' | 'borderRadius' | 'margin'> {
+export interface SkeletonProps extends Pick<React.CSSProperties, 'width' | 'height' | 'minWidth' | 'maxWidth' | 'inlineSize' | 'blockSize' | 'maxInlineSize' | 'borderRadius' | 'margin'> {
 }
 export declare const Skeleton: ({ ...styles }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/bundle.es27.js

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

package/dist/bundle.es35.js

@@ -1,5 +1,5 @@
-import { jsx as e, Fragment as r } from "react/jsx-runtime";
-const s = ({ ...n }) => /* @__PURE__ */ e("span", { className: "skeleton", style: n, children: /* @__PURE__ */ e(r, { children: "‌" }) });
+import { jsx as e, Fragment as t } from "react/jsx-runtime";
+const l = ({ ...r }) => /* @__PURE__ */ e("div", { className: "skeleton", style: r, children: /* @__PURE__ */ e(t, { children: "‌" }) });
 export {
-  s as Skeleton
+  l as Skeleton
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@companix/uikit",
-  "version": "0.0.58",
+  "version": "0.0.60",
   "main": "./dist/bundle.es.js",
   "module": "./dist/bundle.es.js",
   "types": "./dist/index.d.ts",