mimir-ui-kit 1.44.2 → 1.45.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/package.json

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