mimir-ui-kit 1.44.3 → 1.46.0

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

@@ -104,4 +104,9 @@ export type TSelectSearchProps = Pick<TInputProps, 'withClearButton' | 'variant'
      * @default 'all'
      */
     borderRadius?: ESelectSearchBorderRadius | `${ESelectSearchBorderRadius}`;
+    /**
+     * Включить подсветку найденных значений в выпадающем списке
+     * @default false
+     */
+    highlightMatches?: boolean;
 };

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

@@ -6,3 +6,19 @@ export declare const mapSizeToInputSize: (size: ESelectSearchSize) => EInputSize
 export declare const getDropdownArrowIcon: (isOpen: boolean, size: ESelectSearchSize) => "DropdownArrowBottom16px" | "DropdownArrowUp16px" | "DropdownArrowUp24px" | "DropdownArrowDown24px";
 export declare const prepareGroupedItems: (items: TSelectOption[], groupBy: string, getGroupTitle: (value: string) => string) => TSelectOption[];
 export declare const shouldShowMenuOnTop: (selectRef: React.RefObject<HTMLDivElement>, size: ESelectSearchSize) => boolean;
+/**
+ * Подсвечивает совпадения поискового запроса в тексте.
+ * @param text - Исходный текст для подсветки.
+ * @param searchQuery - Поисковый запрос.
+ * @param highlightClassName - CSS класс для подсвеченного текста.
+ * @returns Массив частей текста, где совпадения обернуты в span с классом.
+ */
+export declare const highlightText: (text: string, searchQuery: string, highlightClassName: string) => (string | React.ReactElement)[];
+/**
+ * Рекурсивно подсвечивает совпадения поискового запроса в ReactNode (включая JSX элементы).
+ * @param node - ReactNode для обработки.
+ * @param searchQuery - Поисковый запрос.
+ * @param highlightClassName - CSS класс для подсвеченного текста.
+ * @returns ReactNode с подсвеченными совпадениями.
+ */
+export declare const highlightReactNode: (node: React.ReactNode, searchQuery: string, highlightClassName: string) => React.ReactNode;

package/dist/components/SelectSearch/utils.js

@@ -1,38 +1,85 @@
-import { ESelectSearchSize as t, MOBILE_MENU_HEIGHT as i, DESKTOP_MENU_HEIGHT as a } from "./constants.js";
+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 "../../Input-IzZ6B9kw.js";
-import { EInputSize as s } from "../Input/constants.js";
-const h = (r) => {
+import { EInputSize as c } from "../Input/constants.js";
+const A = (r) => {
   switch (r) {
-    case t.S:
-      return s.S;
-    case t.M:
-      return s.M;
-    case t.L:
-      return s.L;
+    case s.S:
+      return c.S;
+    case s.M:
+      return c.M;
+    case s.L:
+      return c.L;
     default:
-      return s.M;
+      return c.M;
   }
-}, l = (r, o) => r ? o === t.L ? "DropdownArrowUp24px" : "DropdownArrowUp16px" : o === t.L ? "DropdownArrowDown24px" : "DropdownArrowBottom16px", f = (r, o, u) => {
-  if (!r.length || !o) return r;
-  const n = [], c = /* @__PURE__ */ new Set();
-  for (const p of r) {
-    const e = String(p[o] || "Без группы");
-    c.has(e) || (c.add(e), n.push({
-      id: `group-header-${e}`,
-      name: u(e),
+}, 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();
+  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),
       isGroupHeader: !0,
-      originalValue: e
-    })), n.push(p);
+      originalValue: p
+    })), e.push(o);
   }
-  return n;
-}, g = (r, o) => {
+  return e;
+}, D = (r, t) => {
   if (!r.current) return !1;
-  const u = r.current.getBoundingClientRect(), n = window.innerHeight, c = o === t.M || o === t.S ? i : a, p = n - u.bottom, e = u.top;
-  return p >= c ? !1 : e > p;
+  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) => {
+  if (!t.trim())
+    return [r];
+  const e = new RegExp(
+    `(${t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`,
+    "gi"
+  );
+  return r.split(e).map((o, p) => e.test(o) ? u(
+    "span",
+    {
+      key: p,
+      className: n
+    },
+    o
+  ) : o);
+}, a = (r, t, n) => {
+  if (!t.trim())
+    return r;
+  if (typeof r == "string") {
+    const e = h(
+      r,
+      t,
+      n
+    );
+    return u(
+      "span",
+      { className: "highlighted-text-wrapper" },
+      e
+    );
+  }
+  return Array.isArray(r) ? r.map(
+    (e, i) => u(
+      l,
+      { key: i },
+      a(e, t, n)
+    )
+  ) : g(r) ? m(r, {
+    ...r.props,
+    children: a(
+      r.props.children,
+      t,
+      n
+    )
+  }) : r;
 };
 export {
-  l as getDropdownArrowIcon,
-  h as mapSizeToInputSize,
-  f as prepareGroupedItems,
-  g as shouldShowMenuOnTop
+  H as getDropdownArrowIcon,
+  a as highlightReactNode,
+  h as highlightText,
+  A as mapSizeToInputSize,
+  M as prepareGroupedItems,
+  D as shouldShowMenuOnTop
 };

package/dist/useNestedSelection-DnuUbEqM.js

@@ -0,0 +1,119 @@
+import { jsxs as r, jsx as _ } from "react/jsx-runtime";
+import { c as a } from "./index-DIxK0V-G.js";
+import { Icon as w } from "./icons/Icon.js";
+import { CheckboxMimir as k } from "./components/CheckboxMimir/CheckboxMimir.js";
+import { EMultiSelectSearchSize as N } from "./components/MultiSelectSearch/constants.js";
+import { isOptionSelected as S } from "./components/MultiSelectSearch/utils.js";
+import { W as y } from "./combobox-fIVOzEhl.js";
+import './assets/useNestedSelection.css';const D = "_disabled_dbl8p_5", M = "_container_dbl8p_9", E = "_sticky_dbl8p_33", j = "_hidden_dbl8p_41", q = "_l_dbl8p_49", A = "_loader_dbl8p_53", C = "_full_dbl8p_63", O = "_button_dbl8p_75", W = "_options_dbl8p_45", B = "_visible_dbl8p_102", F = "_top_dbl8p_105", P = "_bottom_dbl8p_110", $ = "_m_dbl8p_2", G = "_focused_dbl8p_170", H = "_option_dbl8p_45", I = "_chip_dbl8p_199", J = "_clear_dbl8p_224", e = {
+  "multi-select-search": "_multi-select-search_dbl8p_2",
+  disabled: D,
+  container: M,
+  "container-open": "_container-open_dbl8p_18",
+  "group-header": "_group-header_dbl8p_22",
+  "sticky-active": "_sticky-active_dbl8p_33",
+  sticky: E,
+  hidden: j,
+  "options-container": "_options-container_dbl8p_45",
+  l: q,
+  loader: A,
+  "input-container": "_input-container_dbl8p_58",
+  full: C,
+  "selected-icon": "_selected-icon_dbl8p_67",
+  "selector-icon-open": "_selector-icon-open_dbl8p_71",
+  button: O,
+  "selector-icon": "_selector-icon_dbl8p_71",
+  options: W,
+  visible: B,
+  top: F,
+  bottom: P,
+  "no-options": "_no-options_dbl8p_131",
+  m: $,
+  "multi-select-input-disabled": "_multi-select-input-disabled_dbl8p_167",
+  "multi-select-input": "_multi-select-input_dbl8p_167",
+  focused: G,
+  option: H,
+  "option-active": "_option-active_dbl8p_189",
+  "option-inner": "_option-inner_dbl8p_192",
+  chip: I,
+  "chip-container": "_chip-container_dbl8p_204",
+  "chip-root": "_chip-root_dbl8p_210",
+  "right-slot": "_right-slot_dbl8p_214",
+  "required-mark": "_required-mark_dbl8p_219",
+  clear: J,
+  "icon-button": "_icon-button_dbl8p_233",
+  "highlighted-text": "_highlighted-text_dbl8p_237",
+  "highlighted-text-wrapper": "_highlighted-text-wrapper_dbl8p_242",
+  "nested-option": "_nested-option_dbl8p_246",
+  "expand-button": "_expand-button_dbl8p_254",
+  "expand-icon": "_expand-icon_dbl8p_266",
+  "expand-icon-expanded": "_expand-icon-expanded_dbl8p_269"
+}, X = ({
+  filteredItems: b,
+  selectedItems: h,
+  expandedOptions: u,
+  setExpandedOptions: m,
+  size: c,
+  classNameOption: x,
+  items: f,
+  renderOptionContent: g
+}) => {
+  const l = (n) => {
+    m((i) => {
+      const o = new Set(i);
+      return o.has(n) ? o.delete(n) : o.add(n), o;
+    });
+  }, s = (n, i = 0) => n.filter((o) => {
+    const p = b.some((t) => t.id === o.id);
+    return i === 0 ? p && f.some((t) => t.id === o.id) : !o.children;
+  }).map((o) => {
+    const p = u.has(o.id), t = o.children && o.children.length > 0, v = S(
+      o,
+      h.map((d) => d.id)
+    );
+    return /* @__PURE__ */ r("div", { children: [
+      /* @__PURE__ */ r(
+        y,
+        {
+          value: o,
+          className: ({ focus: d }) => a(e.option, x, c && e[c], {
+            [e["option-active"]]: d,
+            [e["nested-option"]]: i > 0
+          }),
+          children: [
+            /* @__PURE__ */ _(k, { isInteractive: !1, checked: v }),
+            /* @__PURE__ */ _("div", { className: e["option-inner"], children: g(o) }),
+            t && /* @__PURE__ */ _(
+              "div",
+              {
+                className: e["expand-button"],
+                "data-testid": `expand-button-${o.id}`,
+                onMouseDown: (d) => {
+                  d.stopPropagation(), l(o.id);
+                },
+                children: /* @__PURE__ */ _(
+                  w,
+                  {
+                    iconName: c === N.M ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
+                    className: a(e["expand-icon"], {
+                      [e["expand-icon-expanded"]]: p
+                    })
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      t && p && /* @__PURE__ */ _("div", { className: e["nested-children"], children: s(o.children, i + 1) })
+    ] }, o.id);
+  });
+  return {
+    toggleExpanded: l,
+    renderNestedOptions: s
+  };
+};
+export {
+  e as c,
+  X as u
+};

package/package.json

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

package/dist/assets/MultiSelectSearch.css

@@ -1 +0,0 @@
-._multi-select-search_1b2pk_2{position:relative}._multi-select-search_1b2pk_2._disabled_1b2pk_5{cursor:not-allowed}._container_1b2pk_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_1b2pk_18{border-bottom:1px solid var(--citrine-100)}._group-header_1b2pk_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_1b2pk_22._sticky-active_1b2pk_33{-webkit-box-shadow:0 2px 4px rgba(0,0,0,.1);box-shadow:0 2px 4px #0000001a}._loader_1b2pk_37{display:-webkit-box;display:-ms-flexbox;display:flex;gap:var(--mimir-space-m)}._input-container_1b2pk_42{position:relative;width:100%}._full_1b2pk_47{width:100%}._selected-icon_1b2pk_51 path{fill:var(--sapphire-100)}._selector-icon-open_1b2pk_55{-webkit-transform:rotate(180deg);transform:rotate(180deg)}._button_1b2pk_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_1b2pk_59._disabled_1b2pk_5{cursor:not-allowed}._button_1b2pk_59._disabled_1b2pk_5 ._selector-icon_1b2pk_55 path{fill:var(--white)}._options_1b2pk_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_1b2pk_73._visible_1b2pk_86{opacity:1}._options_1b2pk_73._top_1b2pk_89{bottom:100%;margin-bottom:1px;border-radius:var(--select-search-radius) var(--select-search-radius) 0 0}._options_1b2pk_73._bottom_1b2pk_94{top:100%;margin-top:1px;border-radius:0 0 var(--select-search-radius) var(--select-search-radius)}._options_1b2pk_73::-webkit-scrollbar{width:3px}._options_1b2pk_73::-webkit-scrollbar-thumb{background-color:var(--black-80);border-radius:var(--mimir-control-radius-xs2)}._options_1b2pk_73::-webkit-scrollbar-track{background-color:var(--white)}@media (max-width: 600px){._options_1b2pk_73{max-height:var(--mimir-select-search-options-height-mobile)}}._no-options_1b2pk_115{height:100%;padding:var(--select-search-option-space);color:var(--black-80)}._m_1b2pk_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_1b2pk_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_1b2pk_151{margin-right:var(--multi-select-input-disabled-margin-right)}._multi-select-input_1b2pk_151._focused_1b2pk_154{height:auto;min-height:var(--input-height);overflow:hidden;resize:vertical}._multi-select-input_1b2pk_151:last-child{padding-right:var(--mimir-space-4xl)}._option_1b2pk_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_1b2pk_173{background-color:var(--black-5)}._option-inner_1b2pk_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_1b2pk_183{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}._chip-container_1b2pk_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_1b2pk_194{max-width:100%}._right-slot_1b2pk_198{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding-top:0!important}._required-mark_1b2pk_203{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;margin-right:var(--mimir-space-xs)}._clear_1b2pk_208{position:absolute;top:50%;right:var(--clear-right);-webkit-transform:translateY(-50%);transform:translateY(-50%)}._clear_1b2pk_208._disabled_1b2pk_5{cursor:not-allowed}._clear_1b2pk_208._disabled_1b2pk_5 ._icon-button_1b2pk_217 path{fill:var(--white)}