stone-kit 0.0.1034 → 0.0.1036

package/dist/components/Select/ui/Select.js

@@ -1,188 +1,202 @@
-import { jsxs as p, jsx as n, Fragment as k } from "react/jsx-runtime";
-import { useState as z, useRef as B, useEffect as F } from "react";
-import { c as V } from "../../../index-YnD2EP-S.js";
-import { s as e, O as M } from "../../../Option-D-8xnCui.js";
-import { Category as ee } from "./Category.js";
-import { handleClickModeOption as te, handleClickModeCategory as re } from "../model/selectMode.js";
-import { NewIcon as D } from "../../NewIcon/ui/NewIcon.js";
-const c = V.bind(e), me = ({
+import { jsxs as d, jsx as r, Fragment as B } from "react/jsx-runtime";
+import { useState as F, useRef as M, useEffect as D } from "react";
+import { c as te } from "../../../index-YnD2EP-S.js";
+import { s as e, O as T } from "../../../Option-DI87iJMM.js";
+import { Category as re } from "./Category.js";
+import { handleClickModeOption as ne, handleClickModeCategory as le } from "../model/selectMode.js";
+import { NewIcon as y } from "../../NewIcon/ui/NewIcon.js";
+const o = te.bind(e), me = ({
   options: s,
-  customPlaceholder: O,
-  placeholder: T = "Выберите опции",
-  error: q,
-  disabled: y,
-  disabledOptions: d = [],
-  additionalClass: G = "",
-  additionalClassOption: H,
-  additionalClassBtn: J,
-  onChange: K,
+  customPlaceholder: $,
+  placeholder: q = "Выберите опции",
+  error: G,
+  disabled: C,
+  disabledOptions: m = [],
+  additionalClass: H = "",
+  additionalClassOption: J,
+  additionalClassBtn: K,
+  onChange: Q,
   onBlur: S,
-  selectedValues: i = [],
+  selectedValues: a = [],
   isBtn: A = !1,
-  btnName: $,
+  btnName: N,
   clickableOptions: f,
-  isListRight: Q = !1,
-  sizeIcon: m,
-  mode: a = "options",
-  onClickItem: C,
-  onCLickSelect: N,
-  size_s: w = "large",
-  size_m: x,
-  size_l: E,
-  betweenSize: U = "small",
+  isListRight: U = !1,
+  sizeIcon: p,
+  mode: c = "options",
+  onClickItem: x,
+  onCLickSelect: w,
+  size_s: E = "large",
+  size_m: R,
+  size_l: W,
+  betweenSize: X = "small",
   isDisabledNotClickable: u,
-  isLast: X,
-  isPositionLeftCheckbox: R,
+  isLast: Y,
+  isPositionLeftCheckbox: z,
   selectAll: L,
-  scrollVersion: Y = "compact"
+  scrollVersion: Z = "compact",
+  isLoading: b = !1,
+  selectPaddingBottom: g
 }) => {
-  const Z = { value: "selectAll", label: L?.label ?? "Выбрать все" }, P = () => L?.enabled ? [Z, .../* @__PURE__ */ new Set([...s])] : [.../* @__PURE__ */ new Set([...s])];
+  const I = { value: "selectAll", label: L?.label ?? "Выбрать все" }, P = () => L?.enabled ? [I, .../* @__PURE__ */ new Set([...s])] : [.../* @__PURE__ */ new Set([...s])];
   s = Array.isArray(s) ? P() : [];
-  const [l, W] = z(i), [o, g] = z(!1), h = B(null), b = l.filter((t) => t.value !== "selectAll").length, v = (t) => {
-    C && C(t);
-    const r = {
+  const [l, _] = F(a), [i, h] = F(!1), v = M(null), V = l.filter((t) => t.value !== "selectAll").length, O = (t) => {
+    x && x(t);
+    const n = {
       option: t,
       selectedOptions: l,
-      disabledOptions: d,
-      setSelectedOptions: W,
-      onChange: K,
-      mode: a,
+      disabledOptions: m,
+      setSelectedOptions: _,
+      onChange: Q,
+      mode: c,
       optionsParentArr: s
     };
-    Array.isArray(t) ? re(r) : te(r);
-  }, I = () => {
+    Array.isArray(t) ? le(n) : ne(n);
+  }, ee = () => {
     S && S(l);
-  }, _ = (t) => {
-    const r = t.target;
-    if (h.current && !h.current.contains(t.target)) {
-      if (r.closest("svg"))
+  }, j = (t) => {
+    const n = t.target;
+    if (v.current && !v.current.contains(t.target)) {
+      if (n.closest("svg"))
         return;
-      g(!1);
+      h(!1);
     }
   };
-  F(() => (document.addEventListener("click", _), () => {
-    document.removeEventListener("click", _);
-  }), [o]);
-  const j = B(i);
-  return F(() => {
-    i.length !== j.current.length && (W(i), j.current = i);
-  }, [i]), /* @__PURE__ */ p(
+  D(() => (document.addEventListener("click", j), () => {
+    document.removeEventListener("click", j);
+  }), [i]);
+  const k = M(a);
+  return D(() => {
+    a.length !== k.current.length && (_(a), k.current = a);
+  }, [a]), /* @__PURE__ */ d(
     "div",
     {
-      ref: h,
-      className: c(e.multiSelectWrapper, { [e.multiSelectWrapperError]: q }, G),
+      ref: v,
+      className: o(e.multiSelectWrapper, { [e.multiSelectWrapperError]: G }, H),
+      style: g !== void 0 && i ? {
+        paddingBottom: `${g}px`,
+        marginBottom: `-${g}px`
+      } : void 0,
       tabIndex: 0,
-      onBlur: I,
+      onBlur: ee,
       children: [
-        /* @__PURE__ */ p("div", { className: c(e.inputWrapper), children: [
-          !A && /* @__PURE__ */ p(k, { children: [
-            /* @__PURE__ */ n(
+        /* @__PURE__ */ d("div", { className: o(e.inputWrapper), children: [
+          !A && /* @__PURE__ */ d(B, { children: [
+            /* @__PURE__ */ r(
               "div",
               {
-                className: c(
+                className: o(
                   e.selectedOptions,
-                  e[`${w}-size`],
-                  e[`${x}-size_m`],
-                  e[`${E}-size)_l`],
+                  e[`${E}-size`],
+                  e[`${R}-size_m`],
+                  e[`${W}-size)_l`],
                   { [e.selectedOptionsNotEmpty]: l.length > 0 },
-                  { [e.selectOptionsDisabled]: y }
+                  { [e.selectOptionsDisabled]: C }
                 ),
-                onClick: () => g(!o),
-                children: /* @__PURE__ */ n("div", { className: e.selectedText, children: O || (l.length === 0 ? T : "Выбрано " + b) })
+                onClick: () => h(!i),
+                children: /* @__PURE__ */ r("div", { className: e.selectedText, children: $ || (l.length === 0 ? q : "Выбрано " + V) })
               }
             ),
-            /* @__PURE__ */ n(
-              D,
+            /* @__PURE__ */ r(
+              y,
               {
                 name: "arrowShort",
-                deg: o ? "180" : "0",
-                size: m ?? "24",
+                deg: i ? "180" : "0",
+                size: p ?? "24",
                 additionalClass: e.icon
               }
             )
           ] }),
-          A && /* @__PURE__ */ p(k, { children: [
-            /* @__PURE__ */ n(
+          A && /* @__PURE__ */ d(B, { children: [
+            /* @__PURE__ */ r(
               "button",
               {
-                className: c(
+                className: o(
                   e.selectedOptions,
-                  e[`${w}-size`],
-                  e[`${x}-size_m`],
-                  e[`${E}-size_l`],
+                  e[`${E}-size`],
+                  e[`${R}-size_m`],
+                  e[`${W}-size_l`],
                   e.selectedOptionsBtn,
-                  { [e.selectOptionsDisabled]: y },
-                  J
+                  { [e.selectOptionsDisabled]: C },
+                  K
                 ),
                 onClick: () => {
-                  N && N(), g(!o);
+                  w && w(), h(!i);
                 },
-                children: $
+                children: N
               }
             ),
-            /* @__PURE__ */ n(
-              D,
+            /* @__PURE__ */ r(
+              y,
               {
                 name: "filter",
-                deg: o ? "180" : "0",
-                size: m ?? "24",
-                additionalClass: c(e.icon, { [e.iconBtn]: !$ })
+                deg: i ? "180" : "0",
+                size: p ?? "24",
+                additionalClass: o(e.icon, { [e.iconBtn]: !N })
               }
             )
           ] })
         ] }),
-        o && /* @__PURE__ */ n("div", { className: c(
+        i && /* @__PURE__ */ r("div", { className: o(
           e.optionsOuterContainer,
-          e[`betweenSize_${U}`],
-          { [e.listRight]: Q },
-          { [e.lastList]: X },
-          H
-        ), children: /* @__PURE__ */ p(
+          e[`betweenSize_${X}`],
+          { [e.listRight]: U },
+          { [e.lastList]: Y },
+          J
+        ), children: b ? /* @__PURE__ */ r("div", { className: e.loaderWrapper, children: /* @__PURE__ */ r(
+          y,
+          {
+            name: "loader",
+            size: "24",
+            color: "currentColor",
+            additionalClass: e.loader
+          }
+        ) }) : /* @__PURE__ */ d(
           "div",
           {
-            className: c(e.optionsList, e[`scroll_${Y}`]),
+            className: o(e.optionsList, e[`scroll_${Z}`]),
             children: [
-              (a === "options" || a === "single") && s?.map((t, r) => /* @__PURE__ */ n(
-                M,
+              (c === "options" || c === "single") && s?.map((t, n) => /* @__PURE__ */ r(
+                T,
                 {
-                  disabledOptions: d,
+                  disabledOptions: m,
                   clickableOptions: f,
                   selectedOptions: l,
-                  sizeIcon: m,
+                  sizeIcon: p,
                   option: t,
-                  isPositionLeftCheckbox: R,
-                  handleOptionClick: v,
+                  isPositionLeftCheckbox: z,
+                  handleOptionClick: O,
                   isDisabledNotClickable: u
                 },
-                r
+                n
               )),
-              (a === "category" || a === "double") && s?.map((t, r) => "options" in t ? /* @__PURE__ */ n(
-                ee,
+              (c === "category" || c === "double") && s?.map((t, n) => "options" in t ? /* @__PURE__ */ r(
+                re,
                 {
-                  disabledOptions: d,
+                  disabledOptions: m,
                   clickableOptions: f,
                   selectedOptions: l,
-                  sizeIcon: m,
+                  sizeIcon: p,
                   category: t,
-                  mode: a,
-                  selectedValues: i,
-                  handleOptionClick: v,
+                  mode: c,
+                  selectedValues: a,
+                  handleOptionClick: O,
                   isDisabledNotClickable: u
                 },
-                r
-              ) : t.value === "selectAll" ? /* @__PURE__ */ n(
-                M,
+                n
+              ) : t.value === "selectAll" ? /* @__PURE__ */ r(
+                T,
                 {
-                  disabledOptions: d,
+                  disabledOptions: m,
                   clickableOptions: f,
                   selectedOptions: l,
-                  isPositionLeftCheckbox: R,
-                  sizeIcon: m,
+                  isPositionLeftCheckbox: z,
+                  sizeIcon: p,
                   option: t,
-                  handleOptionClick: v,
+                  handleOptionClick: O,
                   isDisabledNotClickable: u
                 },
-                r
+                n
               ) : null)
             ]
           }

package/dist/components/Select/ui/Select.types.d.ts

@@ -64,5 +64,7 @@ export interface MultiSelectProps {
         label?: string;
     };
     scrollVersion?: ScrollVersion;
+    isLoading?: boolean;
+    selectPaddingBottom?: number;
 }
 export {};

package/dist/components/SummarySelect/ui/SummarySelect.d.ts

@@ -5,6 +5,9 @@ interface ISummarySelectProps extends MultiSelectProps {
     isLast?: boolean;
     isShowCategoryDelete?: boolean;
     labelSize?: 'medium' | 'large';
+    clearPosition?: 'top' | 'bottom';
+    chipVariant?: 'default' | 'secondary';
+    chipAdditionalClass?: string;
 }
 export declare const SummarySelect: React.FC<ISummarySelectProps>;
 export {};

package/dist/components/SummarySelect/ui/SummarySelect.js

@@ -1,126 +1,166 @@
-import { jsxs as o, jsx as n } from "react/jsx-runtime";
-import { c as O } from "../../../index-YnD2EP-S.js";
-import { Select as N } from "../../Select/ui/Select.js";
-import { NewIcon as m } from "../../NewIcon/ui/NewIcon.js";
-const p = "_root_50nmy_1", f = "_nameWrapper_50nmy_8", z = "_size_large_50nmy_18", V = "_clearBtn_50nmy_25", S = "_summaryList_50nmy_40", B = "_summaryOption_50nmy_47", L = "_categoryOption_50nmy_69", b = "_summaryCategory_50nmy_78", k = "_headerCategory_50nmy_88", T = "_categoryTitle_50nmy_94", W = "_categoryOptions_50nmy_102", a = {
-  root: p,
-  nameWrapper: f,
-  size_large: z,
-  clearBtn: V,
-  summaryList: S,
-  summaryOption: B,
-  categoryOption: L,
-  summaryCategory: b,
-  headerCategory: k,
-  categoryTitle: T,
-  categoryOptions: W
-}, I = ({
-  label: u = "",
-  isShowReset: _,
-  isShowCategoryDelete: y = !1,
-  labelSize: g = "medium",
+import { jsxs as o, jsx as n, Fragment as W } from "react/jsx-runtime";
+import { c as s } from "../../../index-YnD2EP-S.js";
+import { Select as z } from "../../Select/ui/Select.js";
+import { NewIcon as u } from "../../NewIcon/ui/NewIcon.js";
+const k = "_root_a207n_1", L = "_nameWrapper_a207n_8", V = "_size_large_a207n_18", b = "_clearBtnWrapper_a207n_25", x = "_clearBtn_a207n_25", j = "_summaryList_a207n_46", F = "_summaryOption_a207n_53", I = "_summaryOptionSecondary_a207n_75", $ = "_categoryOption_a207n_80", q = "_categoryOptionSecondary_a207n_89", A = "_summaryCategory_a207n_93", E = "_headerCategory_a207n_103", G = "_categoryTitle_a207n_109", H = "_categoryTitleSecondary_a207n_117", J = "_categoryOptions_a207n_121", e = {
+  root: k,
+  nameWrapper: L,
+  size_large: V,
+  clearBtnWrapper: b,
+  clearBtn: x,
+  summaryList: j,
+  summaryOption: F,
+  summaryOptionSecondary: I,
+  categoryOption: $,
+  categoryOptionSecondary: q,
+  summaryCategory: A,
+  headerCategory: E,
+  categoryTitle: G,
+  categoryTitleSecondary: H,
+  categoryOptions: J
+}, U = ({
+  label: g = "",
+  isShowReset: d,
+  isShowCategoryDelete: v = !1,
+  labelSize: S = "medium",
+  isLoading: N = !1,
+  clearPosition: h = "top",
+  chipVariant: l = "default",
+  chipAdditionalClass: O = "",
+  selectPaddingBottom: f,
   ...t
 }) => {
-  const r = (e) => {
-    t.onChange && t.onChange(e);
-  }, d = (e) => {
-    const l = t.selectedValues?.filter((s) => s.value !== e) || [];
-    r(l);
-  }, h = () => {
-    r([]);
-  }, v = (e) => {
-    r(
-      t.selectedValues?.filter((l) => l.value !== e.value).filter(
-        (l) => !e.options.some((s) => s.value === l.value)
+  const p = d && h === "bottom", i = (a) => {
+    t.onChange && t.onChange(a);
+  }, C = (a) => {
+    const r = t.selectedValues?.filter((c) => c.value !== a) || [];
+    i(r);
+  }, y = () => {
+    i([]);
+  }, B = (a) => {
+    i(
+      t.selectedValues?.filter((r) => r.value !== a.value).filter(
+        (r) => !a.options.some((c) => c.value === r.value)
       ) ?? []
     );
-  }, C = t.selectedValues?.filter((e) => "options" in e);
-  return /* @__PURE__ */ o("div", { className: a.root, children: [
-    /* @__PURE__ */ o("div", { className: O(a.nameWrapper, a[`size_${g}`]), children: [
-      /* @__PURE__ */ n("div", { children: u }),
-      _ && /* @__PURE__ */ n(
+  }, T = t.selectedValues?.filter((a) => "options" in a);
+  return /* @__PURE__ */ o("div", { className: e.root, children: [
+    (d || g) && /* @__PURE__ */ o("div", { className: s(e.nameWrapper, e[`size_${S}`]), children: [
+      /* @__PURE__ */ n("div", { children: g }),
+      d && h === "top" && /* @__PURE__ */ n(
         "div",
         {
-          className: a.clearBtn,
-          onClick: h,
+          className: e.clearBtn,
+          onClick: y,
           children: "Очистить"
         }
       )
     ] }),
     /* @__PURE__ */ n(
-      N,
+      z,
       {
         ...t,
-        onChange: r
+        isLoading: N,
+        selectPaddingBottom: f,
+        onChange: i
       }
     ),
-    !y && t.mode === "options" && t.selectedValues && t.selectedValues.length > 0 && /* @__PURE__ */ n("div", { className: a.summaryList, children: t.selectedValues.map((e) => /* @__PURE__ */ o(
-      "div",
-      {
-        onClick: () => d(e.value.toString()),
-        className: a.summaryOption,
-        children: [
-          e.label,
-          /* @__PURE__ */ n(
-            m,
-            {
-              name: "close",
-              size: "16"
-            }
-          )
-        ]
-      },
-      e.value
-    )) }),
-    !y && t.mode === "double" && C?.map((e, l) => {
-      const s = e;
-      return /* @__PURE__ */ o(
+    !v && t.mode === "options" && t.selectedValues && t.selectedValues.length > 0 && /* @__PURE__ */ o("div", { className: s(e.summaryList), children: [
+      p && /* @__PURE__ */ n("div", { className: e.clearBtnWrapper, children: /* @__PURE__ */ n(
         "div",
         {
-          className: a.summaryCategory,
+          className: e.clearBtn,
+          onClick: y,
+          children: "Очистить"
+        }
+      ) }),
+      t.selectedValues.map((a) => /* @__PURE__ */ o(
+        "div",
+        {
+          onClick: () => C(a.value.toString()),
+          className: s(e.summaryOption, {
+            [e.summaryOptionSecondary]: l === "secondary"
+          }, O),
           children: [
-            /* @__PURE__ */ o("div", { className: a.headerCategory, children: [
-              /* @__PURE__ */ n("div", { className: a.categoryTitle, children: s.label }),
-              /* @__PURE__ */ n(
-                "div",
-                {
-                  onClick: () => v(e),
-                  className: a.clearBtn,
-                  children: /* @__PURE__ */ n(
-                    m,
-                    {
-                      name: "close",
-                      size: "16"
-                    }
-                  )
-                }
-              )
-            ] }),
-            /* @__PURE__ */ n("div", { className: a.categoryOptions, children: s.options.filter((c) => t.selectedValues?.some((i) => c.value === i.value)).map((c, i) => /* @__PURE__ */ o(
-              "div",
+            a.label,
+            /* @__PURE__ */ n(
+              u,
               {
-                onClick: () => d(c.value.toString()),
-                className: `${a.summaryOption} ${a.categoryOption}`,
-                children: [
-                  c.label,
-                  /* @__PURE__ */ n(
-                    m,
-                    {
-                      name: "close",
-                      size: "16"
-                    }
-                  )
-                ]
-              },
-              i
-            )) })
+                name: "close",
+                size: l === "secondary" ? "20" : "16"
+              }
+            )
           ]
         },
-        l
-      );
-    })
+        a.value
+      ))
+    ] }),
+    !v && t.mode === "double" && /* @__PURE__ */ o(W, { children: [
+      p && t.selectedValues && t.selectedValues.length > 0 && /* @__PURE__ */ n(
+        "div",
+        {
+          className: e.clearBtn,
+          onClick: y,
+          children: "Очистить"
+        }
+      ),
+      T?.map((a, r) => {
+        const c = a;
+        return /* @__PURE__ */ o(
+          "div",
+          {
+            className: e.summaryCategory,
+            children: [
+              /* @__PURE__ */ o("div", { className: e.headerCategory, children: [
+                /* @__PURE__ */ n("div", { className: s(e.categoryTitle, {
+                  [e.categoryTitleSecondary]: l === "secondary"
+                }), children: c.label }),
+                /* @__PURE__ */ n(
+                  "div",
+                  {
+                    onClick: () => B(a),
+                    className: e.clearBtn,
+                    children: /* @__PURE__ */ n(
+                      u,
+                      {
+                        name: "close",
+                        size: "16"
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ n("div", { className: e.categoryOptions, children: c.options.filter((m) => t.selectedValues?.some((_) => m.value === _.value)).map((m, _) => /* @__PURE__ */ o(
+                "div",
+                {
+                  onClick: () => C(m.value.toString()),
+                  className: s(
+                    e.summaryOption,
+                    e.categoryOption,
+                    { [e.categoryOptionSecondary]: l === "secondary" },
+                    O
+                  ),
+                  children: [
+                    m.label,
+                    /* @__PURE__ */ n(
+                      u,
+                      {
+                        name: "close",
+                        size: l === "secondary" ? "20" : "16"
+                      }
+                    )
+                  ]
+                },
+                _
+              )) })
+            ]
+          },
+          r
+        );
+      })
+    ] })
   ] });
 };
 export {
-  I as SummarySelect
+  U as SummarySelect
 };