mimir-ui-kit 1.35.3 → 1.36.0

package/dist/components/MultiSelectSearch/MultiSelectSearch.js

@@ -0,0 +1,318 @@
+import { jsxs as h, jsx as o, Fragment as q } from "react/jsx-runtime";
+import { c as r } from "../../index-DIxK0V-G.js";
+import { forwardRef as ne, useRef as B, useState as C, useMemo as oe, useEffect as se } from "react";
+import { EMultiSelectSearchSize as S } from "./constants.js";
+import { getInitialInputValue as ie, mapSizeToInputSize as O, getDropdownArrowIcon as re, joinSelectedItems as R } from "./utils.js";
+import { Icon as le } from "../../icons/Icon.js";
+import { Button as ae } from "../Button/Button.js";
+import { CheckboxMimir as ce } from "../CheckboxMimir/CheckboxMimir.js";
+import { Chip as pe } from "../Chip/Chip.js";
+import { I as E } from "../../Input-DlGNMuUD.js";
+import { EInputVariant as ue } from "../Input/constants.js";
+import { H as me, U as F, G as P, K as de, W as _e } from "../../combobox-CDU06zJj.js";
+import '../../assets/MultiSelectSearch.css';const he = "_disabled_mkspj_5", fe = "_container_mkspj_9", ke = "_full_mkspj_27", be = "_button_mkspj_39", je = "_options_mkspj_53", ge = "_top_mkspj_64", ve = "_bottom_mkspj_69", Ie = "_m_mkspj_2", Ne = "_l_mkspj_111", we = "_focused_mkspj_129", Ce = "_option_mkspj_53", Se = "_clear_mkspj_175", e = {
+  "multi-select-search": "_multi-select-search_mkspj_2",
+  disabled: he,
+  container: fe,
+  "container-open": "_container-open_mkspj_18",
+  "input-container": "_input-container_mkspj_22",
+  full: ke,
+  "selected-icon": "_selected-icon_mkspj_31",
+  "selector-icon-open": "_selector-icon-open_mkspj_35",
+  button: be,
+  "selector-icon": "_selector-icon_mkspj_35",
+  options: je,
+  top: ge,
+  bottom: ve,
+  "no-options": "_no-options_mkspj_90",
+  m: Ie,
+  l: Ne,
+  "multi-select-input-disabled": "_multi-select-input-disabled_mkspj_126",
+  "multi-select-input": "_multi-select-input_mkspj_126",
+  focused: we,
+  option: Ce,
+  "option-active": "_option-active_mkspj_148",
+  "option-inner": "_option-inner_mkspj_151",
+  "chip-container": "_chip-container_mkspj_158",
+  "right-slot": "_right-slot_mkspj_165",
+  "required-mark": "_required-mark_mkspj_170",
+  clear: Se,
+  "icon-button": "_icon-button_mkspj_184"
+}, Re = ne(
+  (G, W) => {
+    const {
+      placeholder: x,
+      size: i = S.L,
+      value: M,
+      onChange: s,
+      full: H,
+      showArrow: K = !0,
+      items: p = [],
+      classNameOption: U,
+      displayValue: f = "name",
+      filterOnSearch: z = !0,
+      onSearch: g,
+      variant: D = ue.DefaultGray,
+      menuPlacement: v = "bottom",
+      disabled: l = !1,
+      searchProps: y,
+      withClearButton: I = !1,
+      withChip: J = !1,
+      chipVariant: Q = "sapphire",
+      disableInput: u = !1
+    } = G, N = B(null), c = B(null), [k, m] = C(!1), [d, b] = C(
+      () => ie(M, f)
+    ), [_, j] = C(
+      M || []
+    ), A = oe(() => {
+      var n;
+      if (!z) return p;
+      const t = ((n = d.split(",").pop()) == null ? void 0 : n.trim().toLowerCase()) ?? "";
+      return p.filter(
+        (a) => a.name.toLowerCase().includes(t)
+      );
+    }, [z, p, d]), X = (t) => {
+      j(t), s == null || s(t);
+      const n = R(t, f);
+      b(n), m(!0), setTimeout(() => {
+        if (c.current) {
+          c.current.focus(), c.current.scrollLeft = c.current.scrollWidth;
+          const a = n.length;
+          c.current.setSelectionRange(a, a);
+        }
+      }, 0);
+    }, L = (t) => {
+      if (u) return;
+      const n = t.target.value;
+      b(n), g == null || g(n);
+      const a = n.split(",").map((w) => w.trim()).filter(Boolean), V = p.filter(
+        (w) => a.includes(w[f])
+      );
+      j(V), s == null || s(V), m(!0);
+    }, Y = (t) => {
+      const n = _.filter(
+        (a) => a.id !== t.id
+      );
+      j(n), s == null || s(n), b(R(n, f));
+    }, T = () => m((t) => !t), Z = (t) => {
+      t.preventDefault(), t.currentTarget.focus();
+      const n = t.currentTarget.value.length;
+      t.currentTarget.setSelectionRange(n, n);
+    }, $ = () => {
+      b(""), j([]), s == null || s([]);
+    }, ee = (t) => {
+      t.stopPropagation(), $();
+    }, te = (t) => {
+      u && t.target.blur();
+    };
+    return se(() => {
+      const t = (n) => {
+        N.current && !N.current.contains(n.target) && !n.defaultPrevented && m(!1);
+      };
+      return document.addEventListener("mousedown", t), () => {
+        document.removeEventListener("mousedown", t);
+      };
+    }, []), /* @__PURE__ */ h("div", { ref: N, children: [
+      /* @__PURE__ */ o(
+        me,
+        {
+          multiple: !0,
+          as: "div",
+          value: _,
+          className: r(e["multi-select-search"], {
+            [e.full]: H,
+            [e.disabled]: l
+          }),
+          onChange: X,
+          ref: W,
+          disabled: l,
+          virtual: { options: A },
+          children: /* @__PURE__ */ h(
+            "div",
+            {
+              className: r(e.container, e[i], {
+                [e["container-open"]]: k
+              }),
+              children: [
+                u && /* @__PURE__ */ h("div", { className: e["input-container"], children: [
+                  /* @__PURE__ */ o(
+                    F,
+                    {
+                      disabled: l,
+                      style: { width: "100%" },
+                      onClick: T,
+                      children: /* @__PURE__ */ o(
+                        P,
+                        {
+                          as: E,
+                          label: x,
+                          size: O(i),
+                          className: r(e["multi-select-input"], {
+                            [e["multi-select-input-disabled"]]: u && I
+                          }),
+                          onChange: L,
+                          value: d,
+                          disabled: l,
+                          variant: D,
+                          rightSlotClassName: e["right-slot"],
+                          requiredMarkClassName: e["required-mark"],
+                          "data-testid": "select-search-input",
+                          onFocus: te,
+                          rightAddon: {
+                            addonType: "icon",
+                            addonContent: re(k, i)
+                          },
+                          ...y
+                        }
+                      )
+                    }
+                  ),
+                  I && d && /* @__PURE__ */ o(
+                    ae,
+                    {
+                      tabIndex: -1,
+                      className: r(e.clear, {
+                        [e.disabled]: l
+                      }),
+                      iconButtonClassName: e["icon-button"],
+                      isIconButton: !0,
+                      iconName: "Close16px",
+                      size: "m-s",
+                      clear: !0,
+                      disabled: l,
+                      variant: "secondary-gray",
+                      onClick: ee,
+                      "data-testid": "clear-button"
+                    }
+                  )
+                ] }),
+                !u && /* @__PURE__ */ o(
+                  P,
+                  {
+                    as: E,
+                    label: x,
+                    size: O(i),
+                    className: e["multi-select-input"],
+                    rightSlotClassName: e["right-slot"],
+                    requiredMarkClassName: e["required-mark"],
+                    value: d,
+                    disabled: l,
+                    variant: D,
+                    withClearButton: I,
+                    onFocus: () => m(!0),
+                    onMouseDown: Z,
+                    onChange: L,
+                    ref: c,
+                    rightAddon: {
+                      addonType: "react-node",
+                      addonContent: K && /* @__PURE__ */ o(
+                        F,
+                        {
+                          className: r(e.button, {
+                            [e.disabled]: l
+                          }),
+                          disabled: l,
+                          onClick: T,
+                          children: /* @__PURE__ */ o(
+                            le,
+                            {
+                              iconName: i == S.M ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
+                              className: r(e["selector-icon"], {
+                                [e["selector-icon-open"]]: k
+                              })
+                            }
+                          )
+                        }
+                      )
+                    },
+                    "data-testid": "select-search-input",
+                    ...y
+                  }
+                ),
+                k && /* @__PURE__ */ o(q, { children: p.length ? A.length ? /* @__PURE__ */ o(
+                  de,
+                  {
+                    className: r(
+                      e.options,
+                      e[i],
+                      e[v]
+                    ),
+                    modal: !1,
+                    static: !0,
+                    children: ({ option: t }) => /* @__PURE__ */ o(
+                      _e,
+                      {
+                        value: t,
+                        className: ({ focus: n }) => r(
+                          e.option,
+                          U,
+                          i && e[i],
+                          {
+                            [e["option-active"]]: n
+                          }
+                        ),
+                        children: /* @__PURE__ */ h(q, { children: [
+                          /* @__PURE__ */ h("div", { className: e["option-inner"], children: [
+                            t.name,
+                            t.bottom && /* @__PURE__ */ o("div", { children: t.bottom })
+                          ] }),
+                          /* @__PURE__ */ o(
+                            ce,
+                            {
+                              isInteractive: !1,
+                              checked: _.some(
+                                (n) => n.id === t.id
+                              )
+                            }
+                          )
+                        ] })
+                      },
+                      t.id
+                    )
+                  }
+                ) : /* @__PURE__ */ o(
+                  "div",
+                  {
+                    className: r(
+                      e.options,
+                      e[i],
+                      e["no-options"],
+                      e[v]
+                    ),
+                    children: "Ничего не найдено"
+                  }
+                ) : /* @__PURE__ */ o(
+                  "div",
+                  {
+                    className: r(
+                      e.options,
+                      e[i],
+                      e["no-options"],
+                      e[v]
+                    ),
+                    children: "Нет данных"
+                  }
+                ) })
+              ]
+            }
+          )
+        }
+      ),
+      J && _.length > 0 && /* @__PURE__ */ o("div", { className: e["chip-container"], children: _.map((t) => /* @__PURE__ */ o(
+        pe,
+        {
+          size: i === S.L ? "s" : "xs",
+          variant: Q,
+          className: e.chip,
+          withAction: !0,
+          onClose: () => Y(t),
+          children: t.name
+        },
+        t.id
+      )) })
+    ] });
+  }
+);
+export {
+  Re as MultiSelectSearch
+};

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

@@ -0,0 +1,4 @@
+export declare enum EMultiSelectSearchSize {
+    M = "m",
+    L = "l"
+}

package/dist/components/MultiSelectSearch/constants.js

@@ -0,0 +1,4 @@
+var m = /* @__PURE__ */ ((r) => (r.M = "m", r.L = "l", r))(m || {});
+export {
+  m as EMultiSelectSearchSize
+};

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

@@ -0,0 +1,3 @@
+export { MultiSelectSearch } from './MultiSelectSearch';
+export type { TMultiSelectSearchProps, TMultiSelectOption } from './types';
+export { EMultiSelectSearchSize } from './constants';

package/dist/components/MultiSelectSearch/index.js

@@ -0,0 +1,6 @@
+import { MultiSelectSearch as t } from "./MultiSelectSearch.js";
+import { EMultiSelectSearchSize as c } from "./constants.js";
+export {
+  c as EMultiSelectSearchSize,
+  t as MultiSelectSearch
+};

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

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+import { EMultiSelectSearchSize } from './constants';
+import { EChipVariant } from '../Chip';
+import { TInputProps } from '../Input';
+
+export type TMultiSelectOption = {
+    name: string;
+    id: number | string;
+    bottom?: ReactNode;
+    [index: string]: unknown;
+};
+export type TMenuPlacement = 'top' | 'bottom';
+export type TMultiSelectSearchProps = Pick<TInputProps, 'withClearButton' | 'variant'> & {
+    /**
+     * Текущее выбранное значение.
+     */
+    value?: TMultiSelectOption[] | null;
+    /**
+     * Функция обратного вызова при изменении выбранного значения.
+     */
+    onChange?: (value: TMultiSelectOption[]) => void;
+    /**
+     * Текст-подсказка для поля, предназначенного для отображения выбранных значений.
+     */
+    placeholder?: string;
+    /**
+     * Размер компонента выбора.
+     */
+    size?: EMultiSelectSearchSize;
+    /**
+     * Флаг для растягивания компонента на всю ширину контейнера.
+     */
+    full?: boolean;
+    /**
+     * Значение, отображаемое в поле выбора.
+     */
+    displayValue?: string;
+    /** Показывать ли иконку стрелки выпадающего списка */
+    showArrow?: boolean;
+    /** Функция обратного вызова, срабатывающая при изменении поискового запроса */
+    onSearch?: (value: string) => void;
+    /** Фильтровать ли варианты на основе поискового запроса */
+    filterOnSearch?: boolean;
+    /** Значения, передаваемые в MultiSelectSearch */
+    items: TMultiSelectOption[];
+    /** Класснейм для значения */
+    classNameOption?: string;
+    /** Варианты отображения выпадающего меню */
+    menuPlacement?: TMenuPlacement;
+    /** Отключает компонент MultiSelectSearch */
+    disabled?: boolean;
+    /** Пропсы для инпута поиска опций */
+    searchProps?: Pick<TInputProps, 'numbersOnly' | 'maxLength' | 'required'>;
+    /** Отображать ли компонент Chip под MultiSelectSearch */
+    withChip?: boolean;
+    /** Вариант Chip*/
+    chipVariant?: EChipVariant | `${EChipVariant}`;
+    /** Отключает инпут, но позволяет открывать меню*/
+    disableInput?: boolean;
+};

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

@@ -0,0 +1,8 @@
+import { EMultiSelectSearchSize } from './constants';
+import { TMultiSelectOption } from './types';
+import { EInputSize } from '../Input';
+
+export declare const mapSizeToInputSize: (size: EMultiSelectSearchSize) => EInputSize;
+export declare const getDropdownArrowIcon: (isOpen: boolean, size: EMultiSelectSearchSize) => "DropdownArrowBottom16px" | "DropdownArrowUp24px" | "DropdownArrowDown24px" | "DropdownArrowUp16px";
+export declare const getInitialInputValue: (value: TMultiSelectOption[] | undefined | null, displayValue: string) => string;
+export declare const joinSelectedItems: (items: TMultiSelectOption[], displayValue: string) => string;

package/dist/components/MultiSelectSearch/utils.js

@@ -0,0 +1,19 @@
+import { EMultiSelectSearchSize as t } from "./constants.js";
+import "../../Input-DlGNMuUD.js";
+import { EInputSize as e } from "../Input/constants.js";
+const w = (r) => {
+  switch (r) {
+    case t.M:
+      return e.M;
+    case t.L:
+      return e.L;
+    default:
+      return e.M;
+  }
+}, c = (r, o) => r ? o === t.L ? "DropdownArrowUp24px" : "DropdownArrowUp16px" : o === t.L ? "DropdownArrowDown24px" : "DropdownArrowBottom16px", m = (r, o) => r && r.length > 0 ? r.map((n) => n[o]).join(", ") + ", " : "", a = (r, o) => r.map((n) => n[o]).join(", ") + (r.length ? ", " : "");
+export {
+  c as getDropdownArrowIcon,
+  m as getInitialInputValue,
+  a as joinSelectedItems,
+  w as mapSizeToInputSize
+};

package/dist/components/OtpInput/OtpInput.js

@@ -3,7 +3,7 @@ import { c as u } from "../../index-DIxK0V-G.js";
 import { forwardRef as P, useImperativeHandle as R, Fragment as T } from "react";
 import { ITEMS_PER_SEPARATOR as q, DEFAULT_VALUE_LENGTH as v } from "./constants.js";
 import { useOTPInput as y } from "./hooks.js";
-import { I as A } from "../../Input-B-gKQ9FT.js";
+import { I as A } from "../../Input-DlGNMuUD.js";
 import '../../assets/OtpInput.css';const C = "_otp_1shq3_3", F = "_input_1shq3_14", L = "_separator_1shq3_28", r = {
   otp: C,
   "input-wrapper": "_input-wrapper_1shq3_14",