mimir-ui-kit 1.45.0 → 1.47.0

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

@@ -0,0 +1,18 @@
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { EChipVariant } from '../../Chip';
+import { EMultiSelectSearchSize } from '../constants';
+import { TMultiSelectOption } from '../types';
+
+type TUseChipsProps = {
+    selectedItems: TMultiSelectOption[];
+    enableNestedSelection: boolean;
+    size: EMultiSelectSearchSize;
+    chipVariant: EChipVariant | `${EChipVariant}`;
+    items: TMultiSelectOption[];
+    displayValue: string;
+    setSelectedItems: Dispatch<SetStateAction<TMultiSelectOption[]>>;
+    onChange?: (value: TMultiSelectOption[]) => void;
+    setInputValue: Dispatch<SetStateAction<string>>;
+};
+export declare const useChips: ({ selectedItems, enableNestedSelection, size, chipVariant, items, displayValue, setSelectedItems, onChange, setInputValue }: TUseChipsProps) => ReactNode;
+export {};

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

@@ -0,0 +1,101 @@
+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 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
+    );
+    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: w(
+      r,
+      c.map((o) => o.id),
+      t
+    ),
+    onClose: () => v(r)
+  }), 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);
+    }
+  ), C = (r) => /* @__PURE__ */ m(
+    N,
+    {
+      size: z === O.L ? E.S : E.XS,
+      variant: A,
+      className: "chip-root",
+      withAction: !0,
+      onClose: r.onClose,
+      children: /* @__PURE__ */ m("span", { className: "chip", children: r.name })
+    },
+    r.id
+  );
+  if (!c.length)
+    return null;
+  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) {
+            o.push(x(i));
+            const d = j(i);
+            r.add(i.id), d.forEach((e) => r.add(e));
+          }
+        } else L(i) || (o.push(u(i)), r.add(i.id));
+    }), o.map(C);
+  }
+  return c.map((r) => C(u(r)));
+};
+export {
+  F as useChips
+};

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

@@ -0,0 +1,10 @@
+type TUseDataLoadingProps = {
+    loadOnOpen?: () => void;
+    loading?: boolean;
+};
+type TUseDataLoadingReturn = {
+    isLoading: boolean;
+    handleDataLoading: () => Promise<void>;
+};
+export declare const useDataLoading: ({ loadOnOpen, loading }: TUseDataLoadingProps) => TUseDataLoadingReturn;
+export {};

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

@@ -0,0 +1,21 @@
+import { useState as o } from "react";
+const d = ({
+  loadOnOpen: a,
+  loading: t
+}) => {
+  const [i, n] = o(!1);
+  return {
+    isLoading: t !== void 0 ? t : i,
+    handleDataLoading: async () => {
+      if (a)
+        try {
+          n(!0), await a();
+        } finally {
+          n(!1);
+        }
+    }
+  };
+};
+export {
+  d as useDataLoading
+};

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

@@ -0,0 +1,12 @@
+import { Dispatch, MutableRefObject, RefObject, SetStateAction } from 'react';
+
+type TUseEventHandlingProps = {
+    isOpen: boolean;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
+    onIsOpen?: (value: boolean) => void;
+    id: string;
+    selectSearchRef: RefObject<HTMLDivElement>;
+    isHandlingRef: MutableRefObject<boolean>;
+};
+export declare const useEventHandling: ({ isOpen, setIsOpen, onIsOpen, id, selectSearchRef, isHandlingRef }: TUseEventHandlingProps) => void;
+export {};

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

@@ -0,0 +1,31 @@
+import { useEffect as E } from "react";
+import { MULTISELECT_OPEN_EVENT as i } from "../utils.js";
+const v = ({
+  isOpen: e,
+  setIsOpen: u,
+  onIsOpen: t,
+  id: l,
+  selectSearchRef: c,
+  isHandlingRef: d
+}) => {
+  E(() => {
+    if (e) {
+      const a = (r) => {
+        c.current && !c.current.contains(r.target) && !r.defaultPrevented && (u(!1), t == null || t(!1));
+      };
+      return document.addEventListener("mousedown", a), () => {
+        document.removeEventListener("mousedown", a);
+      };
+    }
+  }, [e, u, t, c]), E(() => {
+    const r = (m) => {
+      m.detail === l || !e || d.current || (d.current = !0, u(!1), t == null || t(!1), queueMicrotask(() => {
+        d.current = !1;
+      }));
+    };
+    return window.addEventListener(i, r), () => window.removeEventListener(i, r);
+  }, [l, u, t, e, d]);
+};
+export {
+  v as useEventHandling
+};

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

@@ -0,0 +1,19 @@
+import { RefObject } from 'react';
+import { EMultiSelectSearchSize } from '../constants';
+import { TMenuPlacement } from '../types';
+
+type TUseMenuPlacementProps = {
+    autoPlacement: boolean;
+    menuPlacement: TMenuPlacement;
+    size: EMultiSelectSearchSize;
+    selectSearchRef: RefObject<HTMLDivElement>;
+    isOpen: boolean;
+};
+type TUseMenuPlacementReturn = {
+    actualMenuPlacement: TMenuPlacement;
+    isVisible: boolean;
+    isMenuReady: boolean;
+    updateMenuPlacement: () => void;
+};
+export declare const useMenuPlacement: ({ autoPlacement, menuPlacement, size, selectSearchRef, isOpen }: TUseMenuPlacementProps) => TUseMenuPlacementReturn;
+export {};

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

@@ -0,0 +1,38 @@
+import { useState as r, useCallback as M, useEffect as p } from "react";
+import { shouldShowMenuOnTop as v } from "../utils.js";
+const L = ({
+  autoPlacement: t,
+  menuPlacement: s,
+  size: n,
+  selectSearchRef: i,
+  isOpen: a
+}) => {
+  const [c, u] = r(s), [f, l] = r(!1), [w, d] = r(!1), e = M(() => {
+    if (!t) {
+      u(s);
+      return;
+    }
+    const o = v(i, n);
+    u(o ? "top" : s);
+  }, [t, s, n, i]);
+  return p(() => {
+    if (a) {
+      e(), window.addEventListener("scroll", e), window.addEventListener("resize", e);
+      const o = requestAnimationFrame(() => {
+        d(!0), l(!0);
+      });
+      return () => {
+        window.removeEventListener("scroll", e), window.removeEventListener("resize", e), cancelAnimationFrame(o);
+      };
+    } else
+      l(!1), d(!1);
+  }, [a, s, t, n, e]), {
+    actualMenuPlacement: c,
+    isVisible: f,
+    isMenuReady: w,
+    updateMenuPlacement: e
+  };
+};
+export {
+  L as useMenuPlacement
+};

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

@@ -0,0 +1,21 @@
+import { Dispatch, SetStateAction } from 'react';
+import { TMultiSelectOption } from '../types';
+
+type TUseMultiSelectStateProps = {
+    value?: TMultiSelectOption[] | null;
+    displayValue: string;
+};
+type TUseMultiSelectStateReturn = {
+    isOpen: boolean;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
+    inputValue: string;
+    setInputValue: Dispatch<SetStateAction<string>>;
+    selectedItems: TMultiSelectOption[];
+    setSelectedItems: Dispatch<SetStateAction<TMultiSelectOption[]>>;
+    expandedOptions: Set<string | number>;
+    setExpandedOptions: Dispatch<SetStateAction<Set<string | number>>>;
+    internalSearchQuery: string;
+    setInternalSearchQuery: Dispatch<SetStateAction<string>>;
+};
+export declare const useMultiSelectState: ({ value, displayValue }: TUseMultiSelectStateProps) => TUseMultiSelectStateReturn;
+export {};

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

@@ -0,0 +1,31 @@
+import { useState as e, useEffect as u } from "react";
+import { getInitialInputValue as o } from "../utils.js";
+const g = ({
+  value: t,
+  displayValue: n
+}) => {
+  const [c, p] = e(!1), [f, r] = e(
+    () => o(t, n)
+  ), [s, i] = e(
+    t || []
+  ), [S, I] = e(
+    /* @__PURE__ */ new Set()
+  ), [m, O] = e("");
+  return u(() => {
+    t && (i(t), JSON.stringify(t) !== JSON.stringify(s) && r(o(t, n)));
+  }, [t, n, s]), {
+    isOpen: c,
+    setIsOpen: p,
+    inputValue: f,
+    setInputValue: r,
+    selectedItems: s,
+    setSelectedItems: i,
+    expandedOptions: S,
+    setExpandedOptions: I,
+    internalSearchQuery: m,
+    setInternalSearchQuery: O
+  };
+};
+export {
+  g as useMultiSelectState
+};

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

@@ -0,0 +1,26 @@
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { EMultiSelectSearchSize } from '../constants';
+import { TMultiSelectOption } from '../types';
+
+type TUseNestedSelectionProps = {
+    filteredItems: TMultiSelectOption[];
+    selectedItems: TMultiSelectOption[];
+    expandedOptions: Set<string | number>;
+    setExpandedOptions: Dispatch<SetStateAction<Set<string | number>>>;
+    size: EMultiSelectSearchSize;
+    classNameOption?: string;
+    items: TMultiSelectOption[];
+    enableNestedSelection: 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, enableNestedSelection, searchInNestedItems, internalSearchQuery, renderOptionContent, groupBy, useIconInsteadOfCheckbox }: TUseNestedSelectionProps) => TUseNestedSelectionReturn;
+export {};

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

@@ -0,0 +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 c } from "../../../useNestedSelection-bo9wXvE-.js";
+import "../utils.js";
+import "../../../combobox-fIVOzEhl.js";
+export {
+  c as useNestedSelection
+};

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

@@ -0,0 +1,30 @@
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { ReactNode, RefObject } from 'react';
+import { EMultiSelectSearchSize } from '../constants';
+import { TMultiSelectOption } from '../types';
+
+type TUseRenderVirtualizedListProps = {
+    items: TMultiSelectOption[];
+    filteredItems: TMultiSelectOption[];
+    size: EMultiSelectSearchSize;
+    actualMenuPlacement: string;
+    isVisible: boolean;
+    noOptionsText: ReactNode;
+    noMatchText: ReactNode;
+    enableNestedSelection: boolean;
+    renderNestedOptions: (items: TMultiSelectOption[]) => ReactNode;
+    groupBy?: string;
+    parentRef: RefObject<HTMLDivElement>;
+    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, virtualItems, virtualizer, classNameOption, selectedItems, renderOptionContent, cls, useIconInsteadOfCheckbox, highlightMatches, internalSearchQuery, searchInHeaderGroupItems }: TUseRenderVirtualizedListProps) => () => ReactNode;
+export {};

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

@@ -0,0 +1,226 @@
+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: c(
+      e.options,
+      e[i],
+      e["no-options"],
+      e[a],
+      { [e.visible]: o }
+    ),
+    children: r
+  }
+), w = (i, a, o, r, e) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: c(
+      e.options,
+      e[i],
+      e["no-options"],
+      e[a],
+      { [e.visible]: o }
+    ),
+    children: r
+  }
+), F = (i, a, o, r, e, p) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: c(p.options, p[i], p[a], {
+      [p.visible]: o
+    }),
+    children: e(r)
+  }
+), 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 }
+      ),
+      children: /* @__PURE__ */ n(
+        "div",
+        {
+          style: {
+            height: `${p.getTotalSize()}px`,
+            width: "100%"
+          },
+          children: p.getVirtualItems().map((s) => {
+            const h = e[s.index], S = u.has(h.id);
+            return /* @__PURE__ */ n(
+              "div",
+              {
+                "data-index": s.index,
+                ref: p.measureElement,
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  transform: `translateY(${s.start}px)`
+                },
+                children: h.isGroupHeader ? /* @__PURE__ */ n(
+                  "div",
+                  {
+                    className: t["group-header"],
+                    "data-testid": `group-header-${h.name}`,
+                    children: x && g && l ? I(
+                      h.name,
+                      g,
+                      t["highlighted-text"]
+                    ) : h.name
+                  }
+                ) : /* @__PURE__ */ n(
+                  E,
+                  {
+                    value: h,
+                    className: ({ focus: L }) => c(t.option, d, i && t[i], {
+                      [t["option-active"]]: L && !m
+                    }),
+                    "data-testid": `option-${h.id}`,
+                    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: S
+                        }
+                      )
+                    ] })
+                  },
+                  h.id
+                )
+              },
+              s.key
+            );
+          })
+        }
+      )
+    }
+  );
+}, 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: o,
+  actualMenuPlacement: r,
+  isVisible: e,
+  noOptionsText: p,
+  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,
+  e,
+  a,
+  v,
+  s
+) : t ? H(
+  o,
+  r,
+  e,
+  m,
+  f,
+  x,
+  g,
+  l,
+  u,
+  s,
+  t,
+  h,
+  S,
+  L,
+  G
+) : T(
+  o,
+  r,
+  e,
+  g,
+  l,
+  u,
+  s,
+  t,
+  h
+) : w(
+  o,
+  r,
+  e,
+  d,
+  s
+) : W(
+  o,
+  r,
+  e,
+  p,
+  s
+);
+export {
+  Z as useRenderVirtualizedList
+};

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

@@ -0,0 +1,17 @@
+import { TMultiSelectOption } from '../types';
+
+export type TUseSearchProps = {
+    filterOnSearch: boolean;
+    items: TMultiSelectOption[];
+    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, searchInNestedItems, displayValue, groupBy, searchInHeaderGroupItems }: TUseSearchProps) => TUseSearchReturn;