@companix/uikit 0.0.15 → 0.0.16

package/dist/SelectTags/SelectTags.scss

@@ -3,6 +3,7 @@
 .select-tags {
   display: flex;
   flex-direction: column;
+  width: 100%;
 
   .form-input {
     padding-left: var(--form_space, 0);

package/dist/SelectTags/index.d.ts

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

package/dist/bundle.es24.js

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

package/package.json

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