mimir-ui-kit 1.46.0 → 1.47.0

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

@@ -1,79 +1,101 @@
-import { jsx as f } from "react/jsx-runtime";
-import { Chip as M } from "../../Chip/Chip.js";
-import { EChipSize as u } from "../../Chip/constants.js";
-import { EMultiSelectSearchSize as N } from "../constants.js";
-import { getSelectedChildrenCount as O, getAllChildrenIds as C, formatOptionWithCount as S, joinSelectedItems as R } from "../utils.js";
-const D = ({
-  selectedItems: d,
-  enableNestedSelection: e,
-  size: m,
-  chipVariant: E,
-  items: j,
-  displayValue: c,
-  setSelectedItems: h,
-  onChange: t,
-  setInputValue: z
+import { jsx as m } from "react/jsx-runtime";
+import { Chip as N } from "../../Chip/Chip.js";
+import { EChipSize as E } from "../../Chip/constants.js";
+import { EMultiSelectSearchSize as O } from "../constants.js";
+import { getSelectedChildrenCount as R, getAllChildrenIds as j, formatOptionWithCount as w, joinSelectedItems as W } from "../utils.js";
+const F = ({
+  selectedItems: c,
+  enableNestedSelection: l,
+  size: z,
+  chipVariant: A,
+  items: h,
+  displayValue: t,
+  setSelectedItems: p,
+  onChange: s,
+  setInputValue: a
 }) => {
-  const P = (r, i) => r.children && r.children.length > 0 ? S(r, i, c) : r[c], l = (r) => {
-    const i = r.map((n) => n.id), o = e ? r.map((n) => P(n, i)).join(", ") : R(r, c);
-    z(o);
-  }, v = (r) => {
-    const i = d.filter(
-      (o) => o.id !== r.id
+  const f = (r) => {
+    if (l) {
+      const o = /* @__PURE__ */ new Set();
+      for (const n of r)
+        if (n.children && n.children.length > 0)
+          o.add(n);
+        else {
+          const d = h.find(
+            (e) => {
+              var S;
+              return (S = e.children) == null ? void 0 : S.some((M) => M.id === n.id);
+            }
+          );
+          d ? o.add(d) : o.add(n);
+        }
+      const i = Array.from(o).map(
+        (n) => w(
+          n,
+          r.map((d) => d.id),
+          t
+        )
+      ).join(", ");
+      a(i);
+    } else
+      a(W(r, t));
+  }, P = (r) => {
+    const o = c.filter(
+      (i) => i.id !== r.id
     );
-    h(i), t == null || t(i), l(i);
-  }, w = (r) => {
-    const i = C(r), o = [r.id, ...i], n = d.filter((s) => !o.includes(s.id));
-    h(n), t == null || t(n), l(n);
+    p(o), s == null || s(o), f(o);
+  }, v = (r) => {
+    const o = j(r), i = [r.id, ...o], n = c.filter((d) => !i.includes(d.id));
+    p(n), s == null || s(n), f(n);
   }, x = (r) => ({
     id: r.id,
-    name: S(
+    name: w(
       r,
-      d.map((i) => i.id),
-      c
+      c.map((o) => o.id),
+      t
     ),
-    onClose: () => w(r)
-  }), p = (r) => ({
-    id: r.id,
-    name: String(r[c] || ""),
     onClose: () => v(r)
-  }), A = (r) => j.some(
-    (i) => {
-      var o;
-      return (o = i.children) == null ? void 0 : o.some((n) => n.id === r.id);
+  }), u = (r) => ({
+    id: r.id,
+    name: String(r[t] || ""),
+    onClose: () => P(r)
+  }), L = (r) => h.some(
+    (o) => {
+      var i;
+      return (i = o.children) == null ? void 0 : i.some((n) => n.id === r.id);
     }
-  ), a = (r) => /* @__PURE__ */ f(
-    M,
+  ), C = (r) => /* @__PURE__ */ m(
+    N,
     {
-      size: m === N.L ? u.S : u.XS,
-      variant: E,
+      size: z === O.L ? E.S : E.XS,
+      variant: A,
       className: "chip-root",
       withAction: !0,
       onClose: r.onClose,
-      children: /* @__PURE__ */ f("span", { className: "chip", children: r.name })
+      children: /* @__PURE__ */ m("span", { className: "chip", children: r.name })
     },
     r.id
   );
-  if (!d.length)
+  if (!c.length)
     return null;
-  if (e) {
-    const r = /* @__PURE__ */ new Set(), i = [];
-    return d.forEach((o) => {
-      if (!r.has(o.id))
-        if (o.children && o.children.length > 0) {
-          if (O(
-            o,
-            d.map((s) => s.id)
+  if (l) {
+    const r = /* @__PURE__ */ new Set(), o = [];
+    return c.forEach((i) => {
+      if (!r.has(i.id))
+        if (i.children && i.children.length > 0) {
+          if (R(
+            i,
+            c.map((d) => d.id)
           ) > 0) {
-            i.push(x(o));
-            const s = C(o);
-            r.add(o.id), s.forEach((L) => r.add(L));
+            o.push(x(i));
+            const d = j(i);
+            r.add(i.id), d.forEach((e) => r.add(e));
           }
-        } else A(o) || (i.push(p(o)), r.add(o.id));
-    }), i.map(a);
+        } else L(i) || (o.push(u(i)), r.add(i.id));
+    }), o.map(C);
   }
-  return d.map((r) => a(p(r)));
+  return c.map((r) => C(u(r)));
 };
 export {
-  D as useChips
+  F as useChips
 };

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

@@ -11,13 +11,16 @@ type TUseNestedSelectionProps = {
     classNameOption?: string;
     items: TMultiSelectOption[];
     enableNestedSelection: boolean;
-    highlightMatches: boolean;
+    searchInNestedItems?: boolean;
     internalSearchQuery: string;
+    highlightMatches: boolean;
     renderOptionContent: (item: TMultiSelectOption) => ReactNode;
+    groupBy?: string;
+    useIconInsteadOfCheckbox?: boolean;
 };
 type TUseNestedSelectionReturn = {
     toggleExpanded: (optionId: string | number) => void;
     renderNestedOptions: (options: TMultiSelectOption[], level?: number) => ReactNode[];
 };
-export declare const useNestedSelection: ({ filteredItems, selectedItems, expandedOptions, setExpandedOptions, size, classNameOption, items, renderOptionContent }: TUseNestedSelectionProps) => TUseNestedSelectionReturn;
+export declare const useNestedSelection: ({ filteredItems, selectedItems, expandedOptions, setExpandedOptions, size, classNameOption, items, enableNestedSelection, searchInNestedItems, internalSearchQuery, renderOptionContent, groupBy, useIconInsteadOfCheckbox }: TUseNestedSelectionProps) => TUseNestedSelectionReturn;
 export {};

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

@@ -1,11 +1,12 @@
 import "react/jsx-runtime";
 import "../../../index-DIxK0V-G.js";
+import "react";
 import "../../../icons/Icon.js";
 import "../../CheckboxMimir/CheckboxMimir.js";
 import "../constants.js";
-import { u as a } from "../../../useNestedSelection-DnuUbEqM.js";
+import { u as c } from "../../../useNestedSelection-bo9wXvE-.js";
 import "../utils.js";
 import "../../../combobox-fIVOzEhl.js";
 export {
-  a as useNestedSelection
+  c as useNestedSelection
 };

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

@@ -15,13 +15,16 @@ type TUseRenderVirtualizedListProps = {
     renderNestedOptions: (items: TMultiSelectOption[]) => ReactNode;
     groupBy?: string;
     parentRef: RefObject<HTMLDivElement>;
-    activeSticky: number | null;
     virtualItems: TMultiSelectOption[];
     virtualizer: ReturnType<typeof useVirtualizer>;
     classNameOption?: string;
     selectedItems: TMultiSelectOption[];
     renderOptionContent: (item: TMultiSelectOption) => ReactNode;
     cls: Record<string, string>;
+    useIconInsteadOfCheckbox?: boolean;
+    highlightMatches?: boolean;
+    internalSearchQuery?: string;
+    searchInHeaderGroupItems?: boolean;
 };
-export declare const useRenderVirtualizedList: ({ items, filteredItems, size, actualMenuPlacement, isVisible, noOptionsText, noMatchText, enableNestedSelection, renderNestedOptions, groupBy, parentRef, activeSticky, virtualItems, virtualizer, classNameOption, selectedItems, renderOptionContent, cls }: TUseRenderVirtualizedListProps) => () => ReactNode;
+export declare const useRenderVirtualizedList: ({ items, filteredItems, size, actualMenuPlacement, isVisible, noOptionsText, noMatchText, enableNestedSelection, renderNestedOptions, groupBy, parentRef, virtualItems, virtualizer, classNameOption, selectedItems, renderOptionContent, cls, useIconInsteadOfCheckbox, highlightMatches, internalSearchQuery, searchInHeaderGroupItems }: TUseRenderVirtualizedListProps) => () => ReactNode;
 export {};

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

@@ -1,106 +1,108 @@
-import { jsx as t, jsxs as u, Fragment as j } from "react/jsx-runtime";
-import { c as m } from "../../../index-DIxK0V-G.js";
-import { CheckboxMimir as k } from "../../CheckboxMimir/CheckboxMimir.js";
-import { W as G, K } from "../../../combobox-fIVOzEhl.js";
-const W = (n, a, r, d, e) => /* @__PURE__ */ t(
+import { jsx as n, jsxs as $, Fragment as D } from "react/jsx-runtime";
+import { c } from "../../../index-DIxK0V-G.js";
+import { Icon as k } from "../../../icons/Icon.js";
+import { CheckboxMimir as b } from "../../CheckboxMimir/CheckboxMimir.js";
+import { EMultiSelectSearchSize as j } from "../constants.js";
+import { highlightReactNode as I } from "../utils.js";
+import { W as E, K } from "../../../combobox-fIVOzEhl.js";
+const W = (i, a, o, r, e) => /* @__PURE__ */ n(
   "div",
   {
-    className: m(
+    className: c(
       e.options,
-      e[n],
+      e[i],
       e["no-options"],
       e[a],
-      { [e.visible]: r }
+      { [e.visible]: o }
     ),
-    children: d
+    children: r
   }
-), y = (n, a, r, d, e) => /* @__PURE__ */ t(
+), w = (i, a, o, r, e) => /* @__PURE__ */ n(
   "div",
   {
-    className: m(
+    className: c(
       e.options,
-      e[n],
+      e[i],
       e["no-options"],
       e[a],
-      { [e.visible]: r }
+      { [e.visible]: o }
     ),
-    children: d
+    children: r
   }
-), E = (n, a, r, d, e, p) => /* @__PURE__ */ t(
+), F = (i, a, o, r, e, p) => /* @__PURE__ */ n(
   "div",
   {
-    className: m(p.options, p[n], p[a], {
-      [p.visible]: r
+    className: c(p.options, p[i], p[a], {
+      [p.visible]: o
     }),
-    children: e(d)
+    children: e(r)
   }
-), F = (n, a, r, d, e, p, o, s, f, x, i) => /* @__PURE__ */ u(
-  "div",
-  {
-    ref: d,
-    className: m(
-      i.options,
-      i[n],
-      i[a],
-      i["options-container"],
-      { [i.visible]: r }
-    ),
-    children: [
-      e !== null && /* @__PURE__ */ t(
-        "div",
-        {
-          className: m(i["group-header"], i.sticky),
-          "data-testid": `group-header-${p[e].name}`,
-          children: p[e].name
-        }
+), H = (i, a, o, r, e, p, d, N, v, t, m, f, x, g, l) => {
+  const u = new Set(N.map((s) => s.id));
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ref: r,
+      className: c(
+        t.options,
+        t[i],
+        t[a],
+        t["options-container"],
+        { [t.visible]: o }
       ),
-      /* @__PURE__ */ t(
+      children: /* @__PURE__ */ n(
         "div",
         {
           style: {
-            height: `${o.getTotalSize()}px`,
+            height: `${p.getTotalSize()}px`,
             width: "100%"
           },
-          children: o.getVirtualItems().map((N) => {
-            const h = p[N.index];
-            return /* @__PURE__ */ t(
+          children: p.getVirtualItems().map((s) => {
+            const h = e[s.index], S = u.has(h.id);
+            return /* @__PURE__ */ n(
               "div",
               {
-                "data-index": N.index,
-                ref: o.measureElement,
+                "data-index": s.index,
+                ref: p.measureElement,
                 style: {
                   position: "absolute",
                   top: 0,
                   left: 0,
                   width: "100%",
-                  transform: `translateY(${N.start}px)`
+                  transform: `translateY(${s.start}px)`
                 },
-                children: h.isGroupHeader ? /* @__PURE__ */ t(
+                children: h.isGroupHeader ? /* @__PURE__ */ n(
                   "div",
                   {
-                    className: m(i["group-header"], {
-                      [i.hidden]: e === N.index
-                    }),
+                    className: t["group-header"],
                     "data-testid": `group-header-${h.name}`,
-                    children: h.name
+                    children: x && g && l ? I(
+                      h.name,
+                      g,
+                      t["highlighted-text"]
+                    ) : h.name
                   }
-                ) : /* @__PURE__ */ t(
-                  G,
+                ) : /* @__PURE__ */ n(
+                  E,
                   {
                     value: h,
-                    className: ({ focus: g }) => m(i.option, s, n && i[n], {
-                      [i["option-active"]]: g
+                    className: ({ focus: L }) => c(t.option, d, i && t[i], {
+                      [t["option-active"]]: L && !m
                     }),
                     "data-testid": `option-${h.id}`,
-                    children: /* @__PURE__ */ u(j, { children: [
-                      /* @__PURE__ */ t("div", { className: i["option-inner"], children: x(h) }),
-                      /* @__PURE__ */ t(
+                    children: /* @__PURE__ */ $(D, { children: [
+                      /* @__PURE__ */ n("div", { className: t["option-inner"], children: v(h) }),
+                      f ? S && /* @__PURE__ */ n(
                         k,
+                        {
+                          iconName: i === j.L ? "Done24px" : "Done16px",
+                          className: t["selected-icon"]
+                        }
+                      ) : /* @__PURE__ */ n(
+                        b,
                         {
                           isInteractive: !1,
-                          checked: f.some(
-                            (g) => g.id === h.id
-                          )
+                          checked: S
                         }
                       )
                     ] })
@@ -108,104 +110,117 @@ const W = (n, a, r, d, e) => /* @__PURE__ */ t(
                   h.id
                 )
               },
-              N.key
+              s.key
             );
           })
         }
       )
-    ]
-  }
-), H = (n, a, r, d, e, p, o) => /* @__PURE__ */ t(
-  K,
-  {
-    className: m(o.options, o[n], o[a], {
-      [o.visible]: r
-    }),
-    modal: !1,
-    static: !0,
-    children: ({ option: s }) => /* @__PURE__ */ t(
-      G,
-      {
-        value: s,
-        className: ({ focus: f }) => m(o.option, d, n && o[n], {
-          [o["option-active"]]: f
-        }),
-        "data-testid": `option-${s.id}`,
-        children: /* @__PURE__ */ u(j, { children: [
-          /* @__PURE__ */ t("div", { className: o["option-inner"], children: p(s) }),
-          /* @__PURE__ */ t(
-            k,
-            {
-              isInteractive: !1,
-              checked: e.some(
-                (f) => f.id === s.id
-              )
-            }
-          )
-        ] })
-      },
-      s.id
-    )
-  }
-), C = ({
-  items: n,
+    }
+  );
+}, T = (i, a, o, r, e, p, d, N, v) => {
+  const t = new Set(e.map((m) => m.id));
+  return /* @__PURE__ */ n(
+    K,
+    {
+      className: c(d.options, d[i], d[a], {
+        [d.visible]: o
+      }),
+      modal: !1,
+      static: !0,
+      children: ({ option: m }) => {
+        const f = t.has(m.id);
+        return /* @__PURE__ */ n(
+          E,
+          {
+            value: m,
+            className: ({ focus: x }) => c(d.option, r, i && d[i], {
+              [d["option-active"]]: x && !N
+            }),
+            "data-testid": `option-${m.id}`,
+            children: /* @__PURE__ */ $(D, { children: [
+              /* @__PURE__ */ n("div", { className: d["option-inner"], children: p(m) }),
+              v ? f && /* @__PURE__ */ n(
+                k,
+                {
+                  iconName: i === j.L ? "Done24px" : "Done16px",
+                  className: d["selected-icon"]
+                }
+              ) : /* @__PURE__ */ n(b, { isInteractive: !1, checked: f })
+            ] })
+          },
+          m.id
+        );
+      }
+    }
+  );
+}, Z = ({
+  items: i,
   filteredItems: a,
-  size: r,
-  actualMenuPlacement: d,
+  size: o,
+  actualMenuPlacement: r,
   isVisible: e,
   noOptionsText: p,
-  noMatchText: o,
-  enableNestedSelection: s,
-  renderNestedOptions: f,
-  groupBy: x,
-  parentRef: i,
-  activeSticky: N,
-  virtualItems: h,
-  virtualizer: g,
-  classNameOption: $,
-  selectedItems: b,
-  renderOptionContent: L,
-  cls: v
-}) => () => n.length ? a.length ? s ? E(
+  noMatchText: d,
+  enableNestedSelection: N,
+  renderNestedOptions: v,
+  groupBy: t,
+  parentRef: m,
+  virtualItems: f,
+  virtualizer: x,
+  classNameOption: g,
+  selectedItems: l,
+  renderOptionContent: u,
+  cls: s,
+  useIconInsteadOfCheckbox: h = !1,
+  highlightMatches: S = !1,
+  internalSearchQuery: L,
+  searchInHeaderGroupItems: G = !1
+}) => () => i.length ? a.length ? N ? F(
+  o,
   r,
-  d,
   e,
   a,
-  f,
-  v
-) : x ? F(
+  v,
+  s
+) : t ? H(
+  o,
   r,
-  d,
   e,
-  i,
-  N,
-  h,
+  m,
+  f,
+  x,
   g,
-  $,
-  b,
+  l,
+  u,
+  s,
+  t,
+  h,
+  S,
   L,
-  v
-) : H(
+  G
+) : T(
+  o,
   r,
-  d,
   e,
-  $,
-  b,
-  L,
-  v
-) : y(
+  g,
+  l,
+  u,
+  s,
+  t,
+  h
+) : w(
+  o,
   r,
-  d,
   e,
-  o,
-  v
+  d,
+  s
 ) : W(
+  o,
   r,
-  d,
   e,
   p,
-  v
+  s
 );
 export {
-  C as useRenderVirtualizedList
+  Z as useRenderVirtualizedList
 };

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

@@ -6,9 +6,12 @@ export type TUseSearchProps = {
     internalSearchQuery: string;
     selectedItems: TMultiSelectOption[];
     enableNestedSelection: boolean;
+    searchInNestedItems?: boolean;
     displayValue: string;
+    groupBy?: string;
+    searchInHeaderGroupItems?: boolean;
 };
 export type TUseSearchReturn = {
     filteredItems: TMultiSelectOption[];
 };
-export declare const useSearch: ({ filterOnSearch, items, internalSearchQuery, selectedItems, enableNestedSelection, displayValue }: TUseSearchProps) => TUseSearchReturn;
+export declare const useSearch: ({ filterOnSearch, items, internalSearchQuery, selectedItems, enableNestedSelection, searchInNestedItems, displayValue, groupBy, searchInHeaderGroupItems }: TUseSearchProps) => TUseSearchReturn;