@companix/uikit 0.0.49 → 0.0.51

package/dist/Select/Select.scss

@@ -36,6 +36,13 @@
     }
   }
 
+  &-popover-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px 0px;
+  }
+
   &-add-option {
     color: #2d81e0;
 

package/dist/Select/index.d.ts

@@ -18,6 +18,7 @@ export interface SelectParams {
         scrollTo: (index: number) => void;
     }>;
     addOption?: SelectAddOption;
+    isLoading?: boolean;
 }
 export type SelectProps<T> = Omit<SelectFormProps, 'value' | 'onChange' | 'closeButton'> & DependedValueType<T> & SelectParams & {
     value: T | null;

package/dist/SelectTags/index.d.ts

@@ -13,5 +13,6 @@ export interface SelectTagsProps<T> {
     fill?: boolean;
     inputRef?: React.Ref<HTMLInputElement>;
     required?: boolean;
+    isLoading?: boolean;
 }
 export declare const SelectTags: <T extends string | number>(props: SelectTagsProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/bundle.es12.js

@@ -1,16 +1,17 @@
-import { jsx as l } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import { useMemo as I, useImperativeHandle as T } from "react";
 import { Popover as b } from "./bundle.es10.js";
-import { useFroozeClosing as z } from "./bundle.es45.js";
-import { SelectInput as B } from "./bundle.es46.js";
-import { useScrollListController as D } from "./bundle.es47.js";
+import { useFroozeClosing as B } from "./bundle.es45.js";
+import { SelectInput as D } from "./bundle.es46.js";
+import { useScrollListController as L } from "./bundle.es47.js";
 import { SelectOptions as j } from "./bundle.es48.js";
 import { mergeRefs as w } from "react-merge-refs";
-const J = (a) => {
+import { Spinner as H } from "./bundle.es6.js";
+const Q = (a) => {
   const {
-    options: n,
-    onChange: i,
-    value: r,
+    options: t,
+    onChange: l,
+    value: i,
     minimalOptions: m,
     matchTarget: f = "width",
     children: u,
@@ -19,55 +20,56 @@ const J = (a) => {
     popoverRef: v,
     clearButton: s,
     addOption: h,
+    isLoading: g,
     ...x
-  } = a, t = I(() => {
-    const o = r === null ? -1 : n.findIndex((e) => e.value === r);
+  } = a, r = I(() => {
+    const o = i === null ? -1 : t.findIndex((e) => e.value === i);
     return {
       index: o,
-      option: n[o]
+      option: t[o]
     };
-  }, [n, r]), R = t.option?.value ?? null, { popoverRef: C, froozePopoverPosition: O, handleAnimationEnd: g } = z(), { scrollToElement: c, optionsWrapperRef: P, scrollBoxRef: S } = D();
+  }, [t, i]), R = r.option?.value ?? null, { popoverRef: C, froozePopoverPosition: O, handleAnimationEnd: P } = B(), { scrollToElement: c, optionsWrapperRef: S, scrollBoxRef: A } = L();
   T(d, () => ({
     scrollTo: (o) => c(o, "top")
   }));
-  const A = (o, e) => {
-    O(), i(o), e();
+  const z = (o, e) => {
+    O(), l(o), e();
   }, E = (o) => {
-    o.stopPropagation(), s && i(null);
+    o.stopPropagation(), s && l(null);
   }, F = () => {
-    t.index !== -1 && c(t.index, "center");
+    r.index !== -1 && c(r.index, "center");
   };
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ n(
     b,
     {
       minimal: !0,
       ref: w([C, v]),
       sideOffset: 0,
       matchTarget: f,
-      onAnimationEnd: g,
+      onAnimationEnd: P,
       onOpenAutoFocus: (o) => o.preventDefault(),
       onCloseAutoFocus: (o) => o.preventDefault(),
       disabled: p,
-      content: ({ close: o }) => /* @__PURE__ */ l(
+      content: ({ close: o }) => g ? /* @__PURE__ */ n("div", { className: "select-popover-loading", children: /* @__PURE__ */ n(H, { size: 24 }) }) : /* @__PURE__ */ n(
         j,
         {
-          options: n,
+          options: t,
           active: R,
-          scrollboxRef: S,
-          optionsWrapperRef: P,
+          scrollboxRef: A,
+          optionsWrapperRef: S,
           minimalOptions: m,
           addOption: h,
           onOpened: F,
-          onSelect: (e) => A(e, o)
+          onSelect: (e) => z(e, o)
         }
       ),
-      children: u ?? /* @__PURE__ */ l(
-        B,
+      children: u ?? /* @__PURE__ */ n(
+        D,
         {
           ...x,
           disabled: p,
           clearButton: s,
-          value: t.option?.title ?? "",
+          value: r.option?.title ?? "",
           onClear: E
         }
       )
@@ -75,5 +77,5 @@ const J = (a) => {
   );
 };
 export {
-  J as Select
+  Q as Select
 };

package/dist/bundle.es27.js

@@ -1,15 +1,16 @@
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { useFroozeClosing as j } from "./bundle.es45.js";
-import { Popover as q } from "./bundle.es10.js";
-import { OptionItem as V } from "./bundle.es14.js";
-import { OptionsList as B } from "./bundle.es16.js";
+import { useFroozeClosing as q } from "./bundle.es45.js";
+import { Spinner as L } from "./bundle.es6.js";
+import { Popover as V } from "./bundle.es10.js";
+import { OptionItem as B } from "./bundle.es14.js";
+import { OptionsList as H } from "./bundle.es16.js";
 import { Icon as d } from "./bundle.es33.js";
-import { useState as H, useRef as h, useMemo as g } from "react";
-import { attr as v, getActiveElementByAnotherElement as L, contains as X } from "@companix/utils-browser";
-import { mergeRefs as G } from "react-merge-refs";
-import { faXmark as J, faChevronDown as K } from "@companix/icons-solid";
-import { matchPattern as Q } from "@companix/utils-js";
-const ie = (x) => {
+import { useState as X, useRef as h, useMemo as g } from "react";
+import { attr as v, getActiveElementByAnotherElement as G, 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";
+const le = (x) => {
   const {
     options: r,
     closeAfterSelect: C,
@@ -17,49 +18,50 @@ const ie = (x) => {
     onChange: c,
     emptyText: R = "Ничего не найдено",
     readOnly: l,
-    size: A = "md",
+    size: z = "md",
     value: n,
-    inputRef: z,
-    disabled: f,
-    required: D
-  } = x, [a, P] = H(""), i = h(null), b = h(null), { popoverRef: m, froozePopoverPosition: k, handleAnimationEnd: y } = j(), E = g(() => {
+    inputRef: A,
+    isLoading: D,
+    disabled: p,
+    required: P
+  } = x, [i, b] = X(""), a = h(null), k = h(null), { popoverRef: m, froozePopoverPosition: y, handleAnimationEnd: E } = q(), O = g(() => {
     const e = {};
     return r.forEach((t) => {
       e[t.value] = t;
     }), e;
-  }, [r]), O = (e) => n.includes(e) ? [...n] : [...n, e], T = (e) => n.filter((t) => e !== t), w = (e, t) => {
-    C ? (k(), c(e), t()) : c(e);
-  }, p = g(() => a.trim() ? r.filter(({ title: e }) => Q(e, a)) : r, [a, r]), I = (e) => {
-    if (f) return;
+  }, [r]), S = (e) => n.includes(e) ? [...n] : [...n, e], T = (e) => n.filter((t) => e !== t), w = (e, t) => {
+    C ? (y(), c(e), t()) : c(e);
+  }, f = g(() => i.trim() ? r.filter(({ title: e }) => W(e, i)) : r, [i, r]), I = (e) => {
+    if (p) return;
     m.current && m.current.getAttribute("data-state") === "open" && e.preventDefault();
-    const t = L(e.currentTarget);
-    e.defaultPrevented || X(e.currentTarget, t) || i.current && i.current.focus();
-  }, S = (e) => {
-    e.target !== i.current && e.preventDefault();
-  }, $ = (e, t) => {
+    const t = G(e.currentTarget);
+    e.defaultPrevented || J(e.currentTarget, t) || a.current && a.current.focus();
+  }, $ = (e) => {
+    e.target !== a.current && e.preventDefault();
+  }, F = (e, t) => {
     e.stopPropagation(), c(T(t));
   };
   return /* @__PURE__ */ o(
-    q,
+    V,
     {
       minimal: !0,
       ref: m,
       sideOffset: 0,
       matchTarget: "width",
-      onAnimationEnd: y,
+      onAnimationEnd: E,
       onOpenAutoFocus: (e) => e.preventDefault(),
       onCloseAutoFocus: (e) => e.preventDefault(),
-      content: ({ close: e }) => /* @__PURE__ */ s(B, { maxHeight: 300, children: [
-        p.length === 0 && /* @__PURE__ */ o("div", { className: "select-tags-empty", children: R }),
-        p.map(({ value: t, title: u, icon: F }, M) => /* @__PURE__ */ o(
-          V,
+      content: ({ close: e }) => D ? /* @__PURE__ */ o("div", { className: "select-popover-loading", children: /* @__PURE__ */ o(L, { size: 24 }) }) : /* @__PURE__ */ s(H, { maxHeight: 300, children: [
+        f.length === 0 && /* @__PURE__ */ o("div", { className: "select-tags-empty", children: R }),
+        f.map(({ value: t, title: u, icon: M }, j) => /* @__PURE__ */ o(
+          B,
           {
             active: n.includes(t),
-            onClick: () => w(O(t), e),
+            onClick: () => w(S(t), e),
             title: u,
-            icon: F
+            icon: M
           },
-          `option-item-${t}-${M}`
+          `option-item-${t}-${j}`
         ))
       ] }),
       children: /* @__PURE__ */ o(
@@ -67,43 +69,43 @@ const ie = (x) => {
         {
           className: "form",
           onClick: I,
-          onMouseDown: S,
-          "data-size": A,
-          "data-required": v(D),
+          onMouseDown: $,
+          "data-size": z,
+          "data-required": v(P),
           children: /* @__PURE__ */ s("div", { className: "select-tags-container", children: [
             /* @__PURE__ */ s("div", { className: "select-tags", children: [
               n.length > 0 && /* @__PURE__ */ o(
                 "div",
                 {
                   className: "tag-container",
-                  ref: b,
+                  ref: k,
                   role: "listbox",
                   "data-readonly": v(l),
                   children: n.map((e, t) => /* @__PURE__ */ s("div", { className: "tag", children: [
-                    /* @__PURE__ */ o("span", { className: "tag-name", children: E[e].title }),
-                    /* @__PURE__ */ o("button", { className: "tag-close-button", onClick: (u) => $(u, e), children: /* @__PURE__ */ o(d, { className: "tag-close-icon", icon: J, size: "xxxs" }) })
+                    /* @__PURE__ */ o("span", { className: "tag-name", children: O[e].title }),
+                    /* @__PURE__ */ o("button", { className: "tag-close-button", onClick: (u) => F(u, e), children: /* @__PURE__ */ o(d, { className: "tag-close-icon", icon: Q, size: "xxxs" }) })
                   ] }, `tag-option-${e}-${t}`))
                 }
               ),
               (!l || n.length === 0) && /* @__PURE__ */ o(
                 "input",
                 {
-                  ref: G([z, i]),
+                  ref: K([A, a]),
                   type: "text",
                   autoCapitalize: "none",
                   autoComplete: "off",
                   autoCorrect: "off",
                   className: "form-input",
                   spellCheck: !1,
-                  value: a,
-                  disabled: f,
+                  value: i,
+                  disabled: p,
                   readOnly: l,
                   placeholder: N,
-                  onChange: ({ target: e }) => P(e.value)
+                  onChange: ({ target: e }) => b(e.value)
                 }
               )
             ] }),
-            /* @__PURE__ */ o(d, { className: "expand-icon", icon: K, size: "xxxs" })
+            /* @__PURE__ */ o(d, { className: "expand-icon", icon: U, size: "xxxs" })
           ] })
         }
       )
@@ -111,5 +113,5 @@ const ie = (x) => {
   );
 };
 export {
-  ie as SelectTags
+  le as SelectTags
 };

package/dist/bundle.es6.js

@@ -1,6 +1,6 @@
 import { jsx as n } from "react/jsx-runtime";
 import o from "classnames";
-const i = ({ size: r = 40, className: t, color: e }) => /* @__PURE__ */ n(
+const i = ({ size: r = 18, className: t, color: e }) => /* @__PURE__ */ n(
   "div",
   {
     style: { width: `${r}px`, height: `${r}px`, color: e },

package/package.json

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