mimir-ui-kit 1.45.0 → 1.47.0

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

@@ -0,0 +1,68 @@
+import { useCallback as M, useMemo as S } from "react";
+import { flattenOptions as V } from "../utils.js";
+const v = ({
+  filterOnSearch: h,
+  items: a,
+  internalSearchQuery: i,
+  selectedItems: l,
+  enableNestedSelection: u,
+  searchInNestedItems: d = !1,
+  displayValue: g,
+  groupBy: t,
+  searchInHeaderGroupItems: w = !1
+}) => {
+  const f = M(
+    (e) => {
+      const r = e[g];
+      return typeof r == "string" ? r : String(r || "");
+    },
+    [g]
+  );
+  return {
+    filteredItems: S(() => {
+      if (!h) return a;
+      const e = i.toLowerCase();
+      if (l.length > 0) {
+        const r = l[l.length - 1];
+        if (f(r).toLowerCase() === e)
+          return a;
+      }
+      if (u && d) {
+        const C = V(a).filter(
+          (o) => f(o).toLowerCase().includes(e)
+        ), n = new Set(C), c = (o) => {
+          o.forEach((s) => {
+            s.children && s.children.length > 0 && (s.children.some(
+              (L) => n.has(L)
+            ) && n.add(s), c(s.children));
+          });
+        };
+        return c(a), Array.from(n);
+      }
+      if (t && w) {
+        const r = /* @__PURE__ */ new Set();
+        return a.forEach((n) => {
+          t && n[t] && String(n[t]).toLowerCase().includes(e) && r.add(n), n.children && n.children.length > 0 && n.children.forEach((c) => {
+            t && c[t] && String(c[t]).toLowerCase().includes(e) && (r.add(c), r.add(n));
+          });
+        }), Array.from(r);
+      }
+      return a.filter(
+        (r) => f(r).toLowerCase().includes(e)
+      );
+    }, [
+      h,
+      a,
+      i,
+      l,
+      u,
+      d,
+      f,
+      t,
+      w
+    ])
+  };
+};
+export {
+  v as useSearch
+};

package/dist/components/MultiSelectSearch/hooks/useVirtualization.d.ts

@@ -0,0 +1,18 @@
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { RefObject } from 'react';
+import { EMultiSelectSearchSize } from '../constants';
+import { TMultiSelectOption } from '../types';
+
+export type TUseVirtualizationProps = {
+    filteredItems: TMultiSelectOption[];
+    groupBy?: string;
+    getGroupTitle?: (value: string) => string;
+    size: EMultiSelectSearchSize;
+    parentRef: RefObject<Element | null>;
+};
+export type TUseVirtualizationReturn = {
+    virtualItems: TMultiSelectOption[];
+    stickyIndices: number[];
+    virtualizer: ReturnType<typeof useVirtualizer>;
+};
+export declare const useVirtualization: ({ filteredItems, groupBy, getGroupTitle, size, parentRef }: TUseVirtualizationProps) => TUseVirtualizationReturn;

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

@@ -0,0 +1,38 @@
+import { u as E } from "../../../index-D5H8gPPn.js";
+import { useMemo as n } from "react";
+import { EMultiSelectSearchSize as S } from "../constants.js";
+import { prepareGroupedItems as f } from "../utils.js";
+const z = 10, s = {
+  M: 49,
+  L: 65
+}, h = ({
+  filteredItems: e,
+  groupBy: o,
+  getGroupTitle: i,
+  size: c,
+  parentRef: u
+}) => {
+  const r = n(() => o ? f(
+    e,
+    o,
+    i || ((t) => t)
+  ) : e, [e, o, i]), a = n(() => {
+    const t = [];
+    return r.forEach((l, p) => {
+      l.isGroupHeader && t.push(p);
+    }), t;
+  }, [r]), m = E({
+    count: r.length,
+    getScrollElement: () => u.current,
+    estimateSize: () => c === S.L ? s.L : s.M,
+    overscan: z
+  });
+  return {
+    virtualItems: r,
+    stickyIndices: a,
+    virtualizer: m
+  };
+};
+export {
+  h as useVirtualization
+};

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

@@ -9,8 +9,14 @@ export type TMultiSelectOption = {
     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'> & {
@@ -106,4 +112,24 @@ export type TMultiSelectSearchProps = Pick<TInputProps, 'withClearButton' | 'var
      * @default false
      */
     highlightMatches?: boolean;
+    /**
+     * Включить поддержку вложенного выбора опций
+     * @default false
+     */
+    enableNestedSelection?: boolean;
+    /**
+     * Включить поиск во вложенных айтемах при enableNestedSelection = true
+     * @default false
+     */
+    searchInNestedItems?: boolean;
+    /**
+     * Использовать иконку вместо чекбокса для выбранных элементов
+     * @default false
+     */
+    useIconInsteadOfCheckbox?: boolean;
+    /**
+     * Включить поиск по хедерам группы вложенных элементов в режиме группировки
+     * @default false
+     */
+    searchInHeaderGroupItems?: boolean;
 };

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

@@ -27,3 +27,35 @@ export declare const highlightReactNode: (node: ReactNode, searchQuery: string,
  * @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,89 +1,175 @@
-import { createElement as u, Fragment as l, isValidElement as m, cloneElement as w } from "react";
-import { EMultiSelectSearchSize as s, MOBILE_MENU_HEIGHT as g, DESKTOP_MENU_HEIGHT as f } 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 c } from "../Input/constants.js";
-const T = (t) => {
+import { EInputSize as f } from "../Input/constants.js";
+const v = (t) => {
   switch (t) {
-    case s.M:
-      return c.M;
-    case s.L:
-      return c.L;
+    case h.M:
+      return f.M;
+    case h.L:
+      return f.L;
     default:
-      return c.M;
+      return f.M;
   }
-}, x = (t, r) => t ? r === s.L ? "DropdownArrowUp24px" : "DropdownArrowUp16px" : r === s.L ? "DropdownArrowDown24px" : "DropdownArrowBottom16px", A = (t, r) => t && t.length > 0 ? t.map((e) => e[r]).join(", ") : "", H = (t, r) => t.map((e) => e[r]).join(", "), h = "multiselectOpen", D = (t) => {
-  window.dispatchEvent(new CustomEvent(h, { detail: t }));
-}, L = (t, r) => {
+}, 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 e = t.current.getBoundingClientRect(), n = window.innerHeight, p = r === s.M ? g : f, o = n - e.bottom, i = e.top;
-  return o >= p ? !1 : i > o;
-}, O = (t, r, e) => {
-  if (!t.length || !r) return t;
-  const n = [], p = /* @__PURE__ */ new Set();
-  for (const o of t) {
-    const i = String(o[r] || "Без группы");
-    p.has(i) || (p.add(i), n.push({
-      id: `group-header-${i}`,
-      name: e(i),
+  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: i
-    })), n.push(o);
+      originalValue: c
+    })), e.push(s);
   }
-  return n;
-}, a = (t, r, e) => {
-  if (!r.trim())
+  return e;
+}, m = (t, n, r) => {
+  if (!n.trim())
     return t;
   if (typeof t == "string") {
-    const n = E(
+    const e = O(
       t,
-      r,
-      e
+      n,
+      r
     );
-    return u(
+    return a(
       "span",
       { className: "highlighted-text-wrapper" },
-      n
+      e
     );
   }
   return Array.isArray(t) ? t.map(
-    (n, p) => u(
-      l,
-      { key: p },
-      a(n, r, e)
+    (e, i) => a(
+      I,
+      { key: i },
+      m(e, n, r)
     )
-  ) : m(t) ? w(t, {
+  ) : E(t) ? S(t, {
     ...t.props,
-    children: a(
+    children: m(
       t.props.children,
-      r,
-      e
+      n,
+      r
     )
   }) : t;
-}, E = (t, r, e) => {
-  if (!r.trim())
+}, O = (t, n, r) => {
+  if (!n.trim())
     return [t];
-  const n = new RegExp(
-    `(${r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`,
+  const e = new RegExp(
+    `(${n.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`,
     "gi"
   );
-  return t.split(n).map((o, i) => n.test(o) ? u(
+  return t.split(e).map((s, c) => e.test(s) ? a(
     "span",
     {
-      key: i,
-      className: e
+      key: c,
+      className: r,
+      "data-testid": "highlighted-match"
     },
-    o
-  ) : o);
+    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 {
-  h as MULTISELECT_OPEN_EVENT,
-  D as dispatchMultiselectOpen,
-  x as getDropdownArrowIcon,
-  A as getInitialInputValue,
-  a as highlightReactNode,
-  E as highlightText,
-  H as joinSelectedItems,
-  T as mapSizeToInputSize,
-  O as prepareGroupedItems,
-  L 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

@@ -32,4 +32,5 @@ export declare const SelectSearch: import('react').ForwardRefExoticComponent<Pic
     autoPlacement?: boolean;
     borderRadius?: ESelectSearchBorderRadius | `${ESelectSearchBorderRadius}`;
     highlightMatches?: boolean;
+    searchInHeaderGroupItems?: boolean;
 } & import('react').RefAttributes<HTMLElement>>;