mimir-ui-kit 1.45.0 → 1.47.0

package/dist/components/SelectSearch/types.d.ts

@@ -109,4 +109,9 @@ export type TSelectSearchProps = Pick<TInputProps, 'withClearButton' | 'variant'
      * @default false
      */
     highlightMatches?: boolean;
+    /**
+     * Включить поиск по хедерам группы вложенных элементов в режиме группировки
+     * @default false
+     */
+    searchInHeaderGroupItems?: boolean;
 };

package/dist/components/SelectSearch/utils.js

@@ -1,5 +1,5 @@
 import { createElement as u, Fragment as l, isValidElement as g, cloneElement as m } from "react";
-import { ESelectSearchSize as s, MOBILE_MENU_HEIGHT as w, DESKTOP_MENU_HEIGHT as f } from "./constants.js";
+import { ESelectSearchSize as s, MOBILE_MENU_HEIGHT as h, DESKTOP_MENU_HEIGHT as w } from "./constants.js";
 import "../../Input-IzZ6B9kw.js";
 import { EInputSize as c } from "../Input/constants.js";
 const A = (r) => {
@@ -15,33 +15,34 @@ const A = (r) => {
   }
 }, H = (r, t) => r ? t === s.L ? "DropdownArrowUp24px" : "DropdownArrowUp16px" : t === s.L ? "DropdownArrowDown24px" : "DropdownArrowBottom16px", M = (r, t, n) => {
   if (!r.length || !t) return r;
-  const e = [], i = /* @__PURE__ */ new Set();
+  const e = [], p = /* @__PURE__ */ new Set();
   for (const o of r) {
-    const p = String(o[t] || "Без группы");
-    i.has(p) || (i.add(p), e.push({
-      id: `group-header-${p}`,
-      name: n(p),
+    const i = String(o[t] || "Без группы");
+    p.has(i) || (p.add(i), e.push({
+      id: `group-header-${i}`,
+      name: n(i),
       isGroupHeader: !0,
-      originalValue: p
+      originalValue: i
     })), e.push(o);
   }
   return e;
 }, D = (r, t) => {
   if (!r.current) return !1;
-  const n = r.current.getBoundingClientRect(), e = window.innerHeight, i = t === s.M || t === s.S ? w : f, o = e - n.bottom, p = n.top;
-  return o >= i ? !1 : p > o;
-}, h = (r, t, n) => {
+  const n = r.current.getBoundingClientRect(), e = window.innerHeight, p = t === s.M || t === s.S ? h : w, o = e - n.bottom, i = n.top;
+  return o >= p ? !1 : i > o;
+}, f = (r, t, n) => {
   if (!t.trim())
     return [r];
   const e = new RegExp(
     `(${t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`,
     "gi"
   );
-  return r.split(e).map((o, p) => e.test(o) ? u(
+  return r.split(e).map((o, i) => e.test(o) ? u(
     "span",
     {
-      key: p,
-      className: n
+      key: i,
+      className: n,
+      "data-testid": "highlighted-match"
     },
     o
   ) : o);
@@ -49,7 +50,7 @@ const A = (r) => {
   if (!t.trim())
     return r;
   if (typeof r == "string") {
-    const e = h(
+    const e = f(
       r,
       t,
       n
@@ -61,9 +62,9 @@ const A = (r) => {
     );
   }
   return Array.isArray(r) ? r.map(
-    (e, i) => u(
+    (e, p) => u(
       l,
-      { key: i },
+      { key: p },
       a(e, t, n)
     )
   ) : g(r) ? m(r, {
@@ -78,7 +79,7 @@ const A = (r) => {
 export {
   H as getDropdownArrowIcon,
   a as highlightReactNode,
-  h as highlightText,
+  f as highlightText,
   A as mapSizeToInputSize,
   M as prepareGroupedItems,
   D as shouldShowMenuOnTop

package/dist/useNestedSelection-bo9wXvE-.js

@@ -0,0 +1,181 @@
+import { jsxs as C, jsx as r } from "react/jsx-runtime";
+import { c as w } from "./index-DIxK0V-G.js";
+import { useEffect as j } from "react";
+import { Icon as k } from "./icons/Icon.js";
+import { CheckboxMimir as q } from "./components/CheckboxMimir/CheckboxMimir.js";
+import { EMultiSelectSearchSize as M } from "./components/MultiSelectSearch/constants.js";
+import { getAllChildrenIds as F } from "./components/MultiSelectSearch/utils.js";
+import { W as P } from "./combobox-fIVOzEhl.js";
+import './assets/useNestedSelection.css';const W = "_disabled_1l3p8_5", B = "_container_1l3p8_9", L = "_l_1l3p8_36", T = "_loader_1l3p8_40", V = "_full_1l3p8_50", $ = "_button_1l3p8_62", y = "_options_1l3p8_32", G = "_visible_1l3p8_89", H = "_top_1l3p8_92", J = "_bottom_1l3p8_97", K = "_m_1l3p8_2", R = "_focused_1l3p8_157", U = "_option_1l3p8_32", X = "_chip_1l3p8_186", Y = "_clear_1l3p8_211", s = {
+  "multi-select-search": "_multi-select-search_1l3p8_2",
+  disabled: W,
+  container: B,
+  "container-open": "_container-open_1l3p8_18",
+  "group-header": "_group-header_1l3p8_22",
+  "options-container": "_options-container_1l3p8_32",
+  l: L,
+  loader: T,
+  "input-container": "_input-container_1l3p8_45",
+  full: V,
+  "selected-icon": "_selected-icon_1l3p8_54",
+  "selector-icon-open": "_selector-icon-open_1l3p8_58",
+  button: $,
+  "selector-icon": "_selector-icon_1l3p8_58",
+  options: y,
+  visible: G,
+  top: H,
+  bottom: J,
+  "no-options": "_no-options_1l3p8_118",
+  m: K,
+  "multi-select-input-disabled": "_multi-select-input-disabled_1l3p8_154",
+  "multi-select-input": "_multi-select-input_1l3p8_154",
+  focused: R,
+  option: U,
+  "option-active": "_option-active_1l3p8_176",
+  "option-inner": "_option-inner_1l3p8_179",
+  chip: X,
+  "chip-container": "_chip-container_1l3p8_191",
+  "chip-root": "_chip-root_1l3p8_197",
+  "right-slot": "_right-slot_1l3p8_201",
+  "required-mark": "_required-mark_1l3p8_206",
+  clear: Y,
+  "icon-button": "_icon-button_1l3p8_220",
+  "highlighted-text": "_highlighted-text_1l3p8_224",
+  "highlighted-text-wrapper": "_highlighted-text-wrapper_1l3p8_229",
+  "nested-option": "_nested-option_1l3p8_233",
+  "expand-button": "_expand-button_1l3p8_241",
+  "expand-icon": "_expand-icon_1l3p8_253",
+  "expand-icon-expanded": "_expand-icon-expanded_1l3p8_256"
+}, cn = ({
+  filteredItems: p,
+  selectedItems: v,
+  expandedOptions: S,
+  setExpandedOptions: a,
+  size: _,
+  classNameOption: N,
+  items: h,
+  enableNestedSelection: u,
+  searchInNestedItems: f = !1,
+  internalSearchQuery: g,
+  renderOptionContent: D,
+  groupBy: E,
+  useIconInsteadOfCheckbox: A = !1
+}) => {
+  const b = (t) => {
+    a((i) => {
+      const e = new Set(i);
+      return e.has(t) ? e.delete(t) : e.add(t), e;
+    });
+  };
+  j(() => {
+    if (u && f && g) {
+      const t = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), e = (c) => {
+        c.forEach((n) => {
+          i.has(n.id) || (i.add(n.id), n.children && n.children.length > 0 && (n.children.some(
+            (l) => p.some((o) => o.id === l.id)
+          ) && t.add(n.id), e(n.children)));
+        });
+      };
+      e(h), a((c) => /* @__PURE__ */ new Set([...c, ...t]));
+    }
+  }, [
+    p,
+    u,
+    f,
+    g,
+    h,
+    a
+  ]);
+  const I = (t) => {
+    const i = v.map((o) => o.id);
+    if (!t.children || t.children.length === 0)
+      return {
+        checked: i.includes(t.id),
+        isMinusIcon: !1
+      };
+    const e = t.children.flatMap((o) => [
+      o.id,
+      ...F(o)
+    ]), c = e.filter(
+      (o) => i.includes(o)
+    ).length, n = e.length, d = c > 0;
+    return {
+      checked: d,
+      isMinusIcon: d && !(c === n)
+    };
+  }, m = (t, i = 0) => {
+    const e = /* @__PURE__ */ new Map(), c = (n) => {
+      if (e.has(n.id))
+        return e.get(n.id);
+      if (p.some((l) => l.id === n.id))
+        return e.set(n.id, !0), !0;
+      if (n.children && n.children.length > 0) {
+        const l = n.children.some(
+          (o) => c(o)
+        );
+        return e.set(n.id, l), l;
+      }
+      return e.set(n.id, !1), !1;
+    };
+    return t.filter((n) => i === 0 ? c(n) && h.some((d) => d.id === n.id) : f ? c(n) : !n.children).map((n) => {
+      const d = S.has(n.id), l = n.children && n.children.length > 0, o = I(n);
+      return /* @__PURE__ */ C("div", { children: [
+        /* @__PURE__ */ C(
+          P,
+          {
+            value: n,
+            className: ({ focus: x }) => w(s.option, N, _ && s[_], {
+              [s["option-active"]]: x && !E && !u,
+              [s["nested-option"]]: i > 0
+            }),
+            children: [
+              A ? o.checked && /* @__PURE__ */ r(
+                k,
+                {
+                  iconName: _ === M.L ? "Done24px" : "Done16px",
+                  className: s["selected-icon"]
+                }
+              ) : /* @__PURE__ */ r(
+                q,
+                {
+                  isInteractive: !1,
+                  checked: o.checked,
+                  isMinusIcon: o.isMinusIcon
+                }
+              ),
+              /* @__PURE__ */ r("div", { className: s["option-inner"], children: D(n) }),
+              l && /* @__PURE__ */ r(
+                "div",
+                {
+                  className: s["expand-button"],
+                  "data-testid": `expand-button-${n.id}`,
+                  onMouseDown: (x) => {
+                    x.stopPropagation(), b(n.id);
+                  },
+                  children: /* @__PURE__ */ r(
+                    k,
+                    {
+                      iconName: _ === M.M ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
+                      className: w(s["expand-icon"], {
+                        [s["expand-icon-expanded"]]: d
+                      })
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        l && d && /* @__PURE__ */ r("div", { className: s["nested-children"], children: m(n.children, i + 1) })
+      ] }, n.id);
+    });
+  };
+  return {
+    toggleExpanded: b,
+    renderNestedOptions: m
+  };
+};
+export {
+  s as c,
+  cn as u
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mimir-ui-kit",
   "private": false,
-  "version": "1.45.0",
+  "version": "1.47.0",
   "type": "module",
   "exports": {
     ".": {

package/dist/assets/MultiSelectSearch.css

@@ -1 +0,0 @@
-._multi-select-search_1phc4_2{position:relative}._multi-select-search_1phc4_2._disabled_1phc4_5{cursor:not-allowed}._container_1phc4_9{display:block;gap:var(--select-search-gap);-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:var(--select-search-height);background-color:var(--black-5);border-radius:var(--select-search-radius)}._container-open_1phc4_18{border-bottom:1px solid var(--citrine-100)}._group-header_1phc4_22{position:-webkit-sticky;position:sticky;top:0;z-index:2;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding:var(--select-search-option-space);background-color:var(--black-10);border-bottom:1px solid var(--black-20)}._group-header_1phc4_22._sticky-active_1phc4_33{-webkit-box-shadow:0 2px 4px rgba(0,0,0,.1);box-shadow:0 2px 4px #0000001a}._loader_1phc4_37{display:-webkit-box;display:-ms-flexbox;display:flex;gap:var(--mimir-space-m)}._input-container_1phc4_42{position:relative;width:100%}._full_1phc4_47{width:100%}._selected-icon_1phc4_51 path{fill:var(--sapphire-100)}._selector-icon-open_1phc4_55{-webkit-transform:rotate(180deg);transform:rotate(180deg)}._button_1phc4_59{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:none;border:none;cursor:pointer}._button_1phc4_59._disabled_1phc4_5{cursor:not-allowed}._button_1phc4_59._disabled_1phc4_5 ._selector-icon_1phc4_55 path{fill:var(--white)}._options_1phc4_73{position:absolute;z-index:10;width:100%;min-height:50%;max-height:var(--select-search-options-height);overflow-y:auto;font-size:var(--mimir-size-text-l);background:var(--white);-webkit-box-shadow:var(--mimir-box-shadow-select-search);box-shadow:var(--mimir-box-shadow-select-search);opacity:0;-webkit-transition:opacity .2s ease-out,-webkit-transform .2s ease-out;transition:opacity .2s ease-out,-webkit-transform .2s ease-out;transition:transform .2s ease-out,opacity .2s ease-out;transition:transform .2s ease-out,opacity .2s ease-out,-webkit-transform .2s ease-out}._options_1phc4_73._visible_1phc4_86{opacity:1}._options_1phc4_73._top_1phc4_89{bottom:100%;margin-bottom:1px;border-radius:var(--select-search-radius) var(--select-search-radius) 0 0}._options_1phc4_73._bottom_1phc4_94{top:100%;margin-top:1px;border-radius:0 0 var(--select-search-radius) var(--select-search-radius)}._options_1phc4_73::-webkit-scrollbar{width:3px}._options_1phc4_73::-webkit-scrollbar-thumb{background-color:var(--black-80);border-radius:var(--mimir-control-radius-xs2)}._options_1phc4_73::-webkit-scrollbar-track{background-color:var(--white)}@media (max-width: 600px){._options_1phc4_73{max-height:var(--mimir-select-search-options-height-mobile)}}._no-options_1phc4_115{height:100%;padding:var(--select-search-option-space);color:var(--black-80)}._m_1phc4_2{--select-search-height: var(--mimir-select-search-height-l);--select-search-space: var(--mimir-space-xss) var(--mimir-space-m);--select-search-radius: var(--mimir-control-radius);--select-search-gap: var(--mimir-space-2xs);--select-search-btn-space: var(--mimir-space-m) var(--mimir-space-m) var(--mimir-space-m) var(--mimir-space-xs);--select-search-option-space: var(--mimir-space-2s) var(--mimir-space-m);--select-search-options-height: var( --mimir-select-search-options-height-mobile );--clear-right: var(--mimir-space-2xxl);--multi-select-input-disabled-margin-right: var(--mimir-space-l)}._l_1phc4_37{--select-search-height: var(--mimir-select-search-height-xxl);--select-search-space: var(--mimir-space-xss) var(--mimir-space-m);--select-search-radius: var(--mimir-control-radius-s);--select-search-gap: var(--mimir-space-xs);--select-search-btn-space: var(--mimir-space-l) var(--mimir-space-m) var(--mimir-space-l) var(--mimir-space-xs);--select-search-option-space: var(--mimir-space-2l) var(--mimir-space-m);--select-search-options-height: var( --mimir-select-search-options-height-desktop );--clear-right: var(--mimir-space-4xl);--multi-select-input-disabled-margin-right: var(--mimir-space-1xl)}._multi-select-input-disabled_1phc4_151{margin-right:var(--multi-select-input-disabled-margin-right)}._multi-select-input_1phc4_151._focused_1phc4_154{height:auto;min-height:var(--input-height);overflow:hidden;resize:vertical}._multi-select-input_1phc4_151:last-child{padding-right:var(--mimir-space-4xl)}._option_1phc4_73{display:-webkit-box;display:-ms-flexbox;display:flex;gap:var(--mimir-space-m);-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding:var(--select-search-option-space);cursor:pointer;-webkit-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}._option-active_1phc4_173{background-color:var(--black-5)}._option-inner_1phc4_176{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:var(--mimir-space-xs);width:100%}._chip_1phc4_183{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}._chip-container_1phc4_188{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--mimir-space-2xs);margin-top:var(--mimir-space-xs)}._chip-root_1phc4_194{max-width:100%}._right-slot_1phc4_198{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding-top:0!important}._required-mark_1phc4_203{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;margin-right:var(--mimir-space-xs)}._clear_1phc4_208{position:absolute;top:50%;right:var(--clear-right);-webkit-transform:translateY(-50%);transform:translateY(-50%)}._clear_1phc4_208._disabled_1phc4_5{cursor:not-allowed}._clear_1phc4_208._disabled_1phc4_5 ._icon-button_1phc4_217 path{fill:var(--white)}._highlighted-text_1phc4_221{color:var(--citrine-100);font-weight:inherit}._highlighted-text-wrapper_1phc4_226{display:inline}