mimir-ui-kit 1.44.3 → 1.46.0

package/dist/components/MultiSelectSearch/hooks/useVirtualization.js

@@ -0,0 +1,59 @@
+import { u as h } from "../../../index-D5H8gPPn.js";
+import { useState as p, useMemo as I, useEffect as z } from "react";
+import { EMultiSelectSearchSize as M } from "../constants.js";
+import { prepareGroupedItems as O } from "../utils.js";
+const T = 10, S = {
+  M: 49,
+  L: 65
+}, b = ({
+  filteredItems: u,
+  groupBy: e,
+  getGroupTitle: f,
+  size: x,
+  parentRef: a
+}) => {
+  const [k, L] = p(null), r = I(() => e ? O(
+    u,
+    e,
+    f || ((t) => t)
+  ) : u, [u, e, f]), n = I(() => {
+    const t = [];
+    return r.forEach((c, i) => {
+      c.isGroupHeader && t.push(i);
+    }), t;
+  }, [r]), s = h({
+    count: r.length,
+    getScrollElement: () => a.current,
+    estimateSize: () => x === M.L ? S.L : S.M,
+    overscan: T
+  });
+  return z(() => {
+    const t = a.current;
+    if (!t || !e) return;
+    const c = () => {
+      var d, v;
+      const i = t.scrollTop;
+      let m = null;
+      for (let o = 0; o < n.length; o++) {
+        const E = n[o];
+        if ((((d = s.getVirtualItems().find((l) => l.index === E)) == null ? void 0 : d.start) || 0) <= i) {
+          m = E;
+          const l = n[o + 1];
+          if (l !== void 0 && (((v = s.getVirtualItems().find((V) => V.index === l)) == null ? void 0 : v.start) || 0) <= i)
+            continue;
+        } else
+          break;
+      }
+      L(m);
+    };
+    return t.addEventListener("scroll", c), () => t.removeEventListener("scroll", c);
+  }, [s, n, e, a.current]), {
+    virtualItems: r,
+    stickyIndices: n,
+    virtualizer: s,
+    activeSticky: k
+  };
+};
+export {
+  b as useVirtualization
+};

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

@@ -4,13 +4,19 @@ import { EChipVariant } from '../Chip';
 import { TInputProps } from '../Input';
 
 export type TMultiSelectOption = {
-    name: string;
+    name: string | ReactNode;
     id: number | string;
     bottom?: ReactNode;
     isGroupHeader?: boolean;
     originalValue?: string;
+    children?: TMultiSelectOption[];
     [index: string]: unknown;
 };
+export type TChipItem = {
+    id: string | number;
+    name: string;
+    onClose: () => void;
+};
 export type TMenuPlacement = 'top' | 'bottom';
 export type TLoadingIndicatorPlacement = 'input' | 'dropdown' | 'none';
 export type TMultiSelectSearchProps = Pick<TInputProps, 'withClearButton' | 'variant'> & {
@@ -101,4 +107,14 @@ export type TMultiSelectSearchProps = Pick<TInputProps, 'withClearButton' | 'var
      * Функция для получения заголовка группы из значения группировки
      */
     getGroupTitle?: (groupValue: string) => string;
+    /**
+     * Включить подсветку найденных значений в выпадающем списке
+     * @default false
+     */
+    highlightMatches?: boolean;
+    /**
+     * Включить поддержку вложенного выбора опций
+     * @default false
+     */
+    enableNestedSelection?: boolean;
 };

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

@@ -1,3 +1,4 @@
+import { ReactElement, ReactNode, RefObject } from 'react';
 import { EMultiSelectSearchSize } from './constants';
 import { TMultiSelectOption } from './types';
 import { EInputSize } from '../Input';
@@ -8,5 +9,53 @@ export declare const getInitialInputValue: (value: TMultiSelectOption[] | undefi
 export declare const joinSelectedItems: (items: TMultiSelectOption[], displayValue: string) => string;
 export declare const MULTISELECT_OPEN_EVENT = "multiselectOpen";
 export declare const dispatchMultiselectOpen: (id: string) => void;
-export declare const shouldShowMenuOnTop: (selectRef: React.RefObject<HTMLDivElement>, size: EMultiSelectSearchSize) => boolean;
+export declare const shouldShowMenuOnTop: (selectRef: RefObject<HTMLDivElement>, size: EMultiSelectSearchSize) => boolean;
 export declare const prepareGroupedItems: (items: TMultiSelectOption[], groupBy: string, getGroupTitle: (value: string) => string) => TMultiSelectOption[];
+/**
+ * Рекурсивно подсвечивает совпадения поискового запроса в ReactNode (включая JSX элементы).
+ * @param node - ReactNode для обработки.
+ * @param searchQuery - Поисковый запрос.
+ * @param highlightClassName - CSS класс для подсвеченного текста.
+ * @returns ReactNode с подсвеченными совпадениями.
+ */
+export declare const highlightReactNode: (node: ReactNode, searchQuery: string, highlightClassName: string) => ReactNode;
+/**
+ * Подсвечивает совпадения поискового запроса в тексте.
+ * @param text - Исходный текст для подсветки.
+ * @param searchQuery - Поисковый запрос.
+ * @param highlightClassName - CSS класс для подсвеченного текста.
+ * @returns Массив частей текста, где совпадения обернуты в span с классом.
+ */
+export declare const highlightText: (text: string, searchQuery: string, highlightClassName: string) => (string | ReactElement)[];
+/**
+ * Рекурсивно получает все дочерние ID для опции.
+ */
+export declare const getAllChildrenIds: (option: TMultiSelectOption, allOptions: TMultiSelectOption[]) => (number | string)[];
+/**
+ * Получает плоский список всех опций, включая вложенные.
+ */
+export declare const flattenOptions: (options: TMultiSelectOption[]) => TMultiSelectOption[];
+/**
+ * Проверяет, выбрана ли опция, учитывая дочерние.
+ */
+export declare const isOptionSelected: (option: TMultiSelectOption, selectedIds: (number | string)[]) => boolean;
+/**
+ * Получает количество выбранных дочерних опций.
+ */
+export declare const getSelectedChildrenCount: (option: TMultiSelectOption, selectedIds: (number | string)[]) => number;
+/**
+ * Получает общее количество дочерних опций.
+ */
+export declare const getTotalChildrenCount: (option: TMultiSelectOption) => number;
+/**
+ * Форматирует отображение опции с счетчиком выбранных дочерних.
+ */
+export declare const formatOptionWithCount: (option: TMultiSelectOption, selectedIds: (number | string)[], displayValue: string) => string;
+/**
+ * Обрабатывает изменение выбора для nested selection.
+ */
+export declare const processNestedSelectionChange: (newValue: TMultiSelectOption[], selectedItems: TMultiSelectOption[], items: TMultiSelectOption[]) => TMultiSelectOption[];
+/**
+ * Обновляет значение input после изменения выбора.
+ */
+export declare const updateInputValueAfterChange: (updatedValue: TMultiSelectOption[], enableNestedSelection: boolean, items: TMultiSelectOption[], displayValue: string) => string;

package/dist/components/MultiSelectSearch/utils.js

@@ -1,42 +1,175 @@
-import { EMultiSelectSearchSize as i, MOBILE_MENU_HEIGHT as c, DESKTOP_MENU_HEIGHT as a } from "./constants.js";
+import { createElement as a, Fragment as I, isValidElement as E, cloneElement as S } from "react";
+import { EMultiSelectSearchSize as h, MOBILE_MENU_HEIGHT as C, DESKTOP_MENU_HEIGHT as A } from "./constants.js";
 import "../../Input-IzZ6B9kw.js";
-import { EInputSize as u } from "../Input/constants.js";
-const m = (t) => {
+import { EInputSize as f } from "../Input/constants.js";
+const v = (t) => {
   switch (t) {
-    case i.M:
-      return u.M;
-    case i.L:
-      return u.L;
+    case h.M:
+      return f.M;
+    case h.L:
+      return f.L;
     default:
-      return u.M;
+      return f.M;
   }
-}, E = (t, e) => t ? e === i.L ? "DropdownArrowUp24px" : "DropdownArrowUp16px" : e === i.L ? "DropdownArrowDown24px" : "DropdownArrowBottom16px", f = (t, e) => t && t.length > 0 ? t.map((r) => r[e]).join(", ") : "", g = (t, e) => t.map((r) => r[e]).join(", "), d = "multiselectOpen", S = (t) => {
-  window.dispatchEvent(new CustomEvent(d, { detail: t }));
-}, I = (t, e) => {
+}, G = (t, n) => t ? n === h.L ? "DropdownArrowUp24px" : "DropdownArrowUp16px" : n === h.L ? "DropdownArrowDown24px" : "DropdownArrowBottom16px", U = (t, n) => t && t.length > 0 ? t.map((r) => r[n]).join(", ") : "", M = (t, n) => t.map((r) => r[n]).join(", "), T = "multiselectOpen", j = (t) => {
+  window.dispatchEvent(new CustomEvent(T, { detail: t }));
+}, R = (t, n) => {
   if (!t.current) return !1;
-  const r = t.current.getBoundingClientRect(), o = window.innerHeight, s = e === i.M ? c : a, p = o - r.bottom, n = r.top;
-  return p >= s ? !1 : n > p;
-}, M = (t, e, r) => {
-  if (!t.length || !e) return t;
-  const o = [], s = /* @__PURE__ */ new Set();
-  for (const p of t) {
-    const n = String(p[e] || "Без группы");
-    s.has(n) || (s.add(n), o.push({
-      id: `group-header-${n}`,
-      name: r(n),
+  const r = t.current.getBoundingClientRect(), e = window.innerHeight, i = n === h.M ? C : A, s = e - r.bottom, c = r.top;
+  return s >= i ? !1 : c > s;
+}, z = (t, n, r) => {
+  if (!t.length || !n) return t;
+  const e = [], i = /* @__PURE__ */ new Set();
+  for (const s of t) {
+    const c = String(s[n] || "Без группы");
+    i.has(c) || (i.add(c), e.push({
+      id: `group-header-${c}`,
+      name: r(c),
       isGroupHeader: !0,
-      originalValue: n
-    })), o.push(p);
+      originalValue: c
+    })), e.push(s);
   }
-  return o;
+  return e;
+}, m = (t, n, r) => {
+  if (!n.trim())
+    return t;
+  if (typeof t == "string") {
+    const e = O(
+      t,
+      n,
+      r
+    );
+    return a(
+      "span",
+      { className: "highlighted-text-wrapper" },
+      e
+    );
+  }
+  return Array.isArray(t) ? t.map(
+    (e, i) => a(
+      I,
+      { key: i },
+      m(e, n, r)
+    )
+  ) : E(t) ? S(t, {
+    ...t.props,
+    children: m(
+      t.props.children,
+      n,
+      r
+    )
+  }) : t;
+}, O = (t, n, r) => {
+  if (!n.trim())
+    return [t];
+  const e = new RegExp(
+    `(${n.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`,
+    "gi"
+  );
+  return t.split(e).map((s, c) => e.test(s) ? a(
+    "span",
+    {
+      key: c,
+      className: r,
+      "data-testid": "highlighted-match"
+    },
+    s
+  ) : s);
+}, p = (t, n) => {
+  const r = [];
+  if (t.children)
+    for (const e of t.children)
+      r.push(e.id), r.push(...p(e));
+  return r;
+}, x = (t) => {
+  const n = [], r = (e) => {
+    for (const i of e)
+      n.push(i), i.children && r(i.children);
+  };
+  return r(t), n;
+}, B = (t, n) => n.includes(t.id) ? !0 : p(t).some((e) => n.includes(e)), g = (t, n) => p(t).filter((e) => n.includes(e)).length, H = (t) => p(t).length, D = (t, n, r) => {
+  const e = g(t, n), i = H(t);
+  return i === 0 ? String(t[r] || "") : `${t[r]} (${e} из ${i})`;
+}, P = (t, n, r) => {
+  let e = t;
+  const i = t.filter(
+    (o) => !n.some((d) => d.id === o.id)
+  ), s = n.filter(
+    (o) => !t.some((d) => d.id === o.id)
+  );
+  for (const o of i)
+    if (o.children && o.children.length > 0) {
+      const d = p(o), l = x(r).filter(
+        (u) => d.includes(u.id)
+      );
+      e = [...e, ...l];
+    } else {
+      const d = r.find(
+        (l) => {
+          var u;
+          return (u = l.children) == null ? void 0 : u.some((w) => w.id === o.id);
+        }
+      );
+      d && !e.some((l) => l.id === d.id) && (e = [...e, d]);
+    }
+  for (const o of s) {
+    const d = p(o);
+    e = e.filter((l) => !d.includes(l.id));
+  }
+  e = e.filter(
+    (o, d, l) => d === l.findIndex((u) => u.id === o.id)
+  );
+  const c = [];
+  for (const o of e)
+    o.children && o.children.length > 0 && g(
+      o,
+      e.map((l) => l.id)
+    ) === 0 && c.push(o.id);
+  return e = e.filter(
+    (o) => !c.includes(o.id)
+  ), e;
+}, b = (t, n, r, e) => {
+  if (n) {
+    const i = /* @__PURE__ */ new Set();
+    for (const s of t)
+      if (s.children && s.children.length > 0)
+        i.add(s);
+      else {
+        const c = r.find(
+          (o) => {
+            var d;
+            return (d = o.children) == null ? void 0 : d.some((l) => l.id === s.id);
+          }
+        );
+        c ? i.add(c) : i.add(s);
+      }
+    return Array.from(i).map(
+      (s) => D(
+        s,
+        t.map((c) => c.id),
+        e
+      )
+    ).join(", ");
+  }
+  return M(t, e);
 };
 export {
-  d as MULTISELECT_OPEN_EVENT,
-  S as dispatchMultiselectOpen,
-  E as getDropdownArrowIcon,
-  f as getInitialInputValue,
-  g as joinSelectedItems,
-  m as mapSizeToInputSize,
-  M as prepareGroupedItems,
-  I as shouldShowMenuOnTop
+  T as MULTISELECT_OPEN_EVENT,
+  j as dispatchMultiselectOpen,
+  x as flattenOptions,
+  D as formatOptionWithCount,
+  p as getAllChildrenIds,
+  G as getDropdownArrowIcon,
+  U as getInitialInputValue,
+  g as getSelectedChildrenCount,
+  H as getTotalChildrenCount,
+  m as highlightReactNode,
+  O as highlightText,
+  B as isOptionSelected,
+  M as joinSelectedItems,
+  v as mapSizeToInputSize,
+  z as prepareGroupedItems,
+  P as processNestedSelectionChange,
+  R as shouldShowMenuOnTop,
+  b as updateInputValueAfterChange
 };

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

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { ELoadingIndicatorPlacement, ESelectSearchBorderRadius, ESelectSearchSize } from './constants';
 import { TSelectOption } from './types';
 
@@ -20,8 +21,8 @@ export declare const SelectSearch: import('react').ForwardRefExoticComponent<Pic
     disableInput?: boolean;
     autocomplete?: "on" | "off";
     immediate?: boolean;
-    noOptionsText?: string | import('react').ReactNode;
-    noMatchText?: string | import('react').ReactNode;
+    noOptionsText?: string | ReactNode;
+    noMatchText?: string | ReactNode;
     loadOnOpen?: () => void;
     loading?: boolean;
     loadingIndicatorPlacement?: ELoadingIndicatorPlacement | `${ELoadingIndicatorPlacement}`;
@@ -30,4 +31,5 @@ export declare const SelectSearch: import('react').ForwardRefExoticComponent<Pic
     optionLayout?: import('./types').TOptionLayout;
     autoPlacement?: boolean;
     borderRadius?: ESelectSearchBorderRadius | `${ESelectSearchBorderRadius}`;
+    highlightMatches?: boolean;
 } & import('react').RefAttributes<HTMLElement>>;