stone-kit/dist/components/Select/ui/Select.js

uikit for redesign

import { jsxs as d, jsx as t, Fragment as F } from "react/jsx-runtime";
import { useState as M, useRef as T, useEffect as k } from "react";
import { c as re } from "../../../index-YnD2EP-S.js";
import { s as e, O as q } from "../../../Option-DdjBe9yb.js";
import { NewIcon as y } from "../../NewIcon/ui/NewIcon.js";
import { Category as te } from "./Category.js";
import { handleClickModeOption as ne, handleClickModeCategory as le } from "../model/selectMode.js";
const c = re.bind(e), pe = ({
  options: n,
  customPlaceholder: S,
  placeholder: D = "Выберите опции",
  error: G,
  disabled: $,
  disabledOptions: p = [],
  additionalClass: H = "",
  additionalClassOption: J,
  additionalClassBtn: K,
  onChange: Q,
  onBlur: A,
  selectedValues: s = [],
  isBtn: C = !1,
  btnName: N,
  clickableOptions: f,
  isListRight: U = !1,
  sizeIcon: m,
  mode: o = "options",
  onClickItem: x,
  onCLickSelect: w,
  size_s: E = "large",
  size_m: W,
  size_l: R,
  betweenSize: X = "small",
  isDisabledNotClickable: u,
  isLast: Y,
  isPositionLeftCheckbox: z,
  selectAll: L,
  scrollVersion: Z = "compact",
  isLoading: I = !1,
  selectPaddingBottom: h
}) => {
  const P = { value: "selectAll", label: L?.label ?? "Выбрать все" }, b = () => L?.enabled && n && n.length > 0 ? [P, .../* @__PURE__ */ new Set([...n])] : [.../* @__PURE__ */ new Set([...n])];
  n = Array.isArray(n) ? b() : [];
  const [a, _] = M(s), [i, g] = M(!1), v = T(null), V = a.filter((r) => r.value !== "selectAll").length, O = (r) => {
    x && x(r);
    const l = {
      option: r,
      selectedOptions: a,
      disabledOptions: p,
      setSelectedOptions: _,
      onChange: Q,
      mode: o,
      optionsParentArr: n,
      clickableOptions: f,
      isDisabledNotClickable: u
    };
    Array.isArray(r) ? le(l) : ne(l);
  }, ee = () => {
    A && A(a);
  }, j = (r) => {
    const l = r.target;
    if (v.current && !v.current.contains(r.target)) {
      if (l.closest("svg"))
        return;
      g(!1);
    }
  };
  k(() => (document.addEventListener("click", j), () => {
    document.removeEventListener("click", j);
  }), [i]);
  const B = T(s);
  return k(() => {
    s.length !== B.current.length && (_(s), B.current = s);
  }, [s]), /* @__PURE__ */ d(
    "div",
    {
      ref: v,
      className: c(e.multiSelectWrapper, { [e.multiSelectWrapperError]: G }, H),
      style: h !== void 0 && i ? {
        paddingBottom: `${h}px`,
        marginBottom: `-${h}px`
      } : void 0,
      tabIndex: 0,
      onBlur: ee,
      children: [
        /* @__PURE__ */ d("div", { className: c(e.inputWrapper), children: [
          !C && /* @__PURE__ */ d(F, { children: [
            /* @__PURE__ */ t(
              "div",
              {
                className: c(
                  e.selectedOptions,
                  e[`${E}-size`],
                  e[`${W}-size_m`],
                  e[`${R}-size)_l`],
                  { [e.selectedOptionsNotEmpty]: a.length > 0 },
                  { [e.selectOptionsDisabled]: $ }
                ),
                onClick: () => g(!i),
                children: /* @__PURE__ */ t("div", { className: e.selectedText, children: S || (a.length === 0 ? D : "Выбрано " + V) })
              }
            ),
            /* @__PURE__ */ t(
              y,
              {
                name: "arrowShort",
                deg: i ? "180" : "0",
                size: m ?? "24",
                additionalClass: e.icon
              }
            )
          ] }),
          C && /* @__PURE__ */ d(F, { children: [
            /* @__PURE__ */ t(
              "button",
              {
                className: c(
                  e.selectedOptions,
                  e[`${E}-size`],
                  e[`${W}-size_m`],
                  e[`${R}-size_l`],
                  e.selectedOptionsBtn,
                  { [e.selectOptionsDisabled]: $ },
                  K
                ),
                onClick: () => {
                  w && w(), g(!i);
                },
                children: N
              }
            ),
            /* @__PURE__ */ t(
              y,
              {
                name: "filter",
                deg: i ? "180" : "0",
                size: m ?? "24",
                additionalClass: c(e.icon, { [e.iconBtn]: !N })
              }
            )
          ] })
        ] }),
        i && /* @__PURE__ */ t("div", { className: c(
          e.optionsOuterContainer,
          e[`betweenSize_${X}`],
          { [e.listRight]: U },
          { [e.lastList]: Y },
          J
        ), children: I ? /* @__PURE__ */ t("div", { className: e.loaderWrapper, children: /* @__PURE__ */ t(
          y,
          {
            name: "loader",
            size: "24",
            color: "currentColor",
            additionalClass: e.loader
          }
        ) }) : !n || n.length === 0 ? /* @__PURE__ */ t("div", { className: e.emptyStateWrapper, children: "Список пуст" }) : /* @__PURE__ */ d(
          "div",
          {
            className: c(e.optionsList, e[`scroll_${Z}`]),
            children: [
              (o === "options" || o === "single") && n?.map((r, l) => /* @__PURE__ */ t(
                q,
                {
                  disabledOptions: p,
                  clickableOptions: f,
                  selectedOptions: a,
                  sizeIcon: m,
                  option: r,
                  isPositionLeftCheckbox: z,
                  handleOptionClick: O,
                  isDisabledNotClickable: u
                },
                l
              )),
              (o === "category" || o === "double") && n?.map((r, l) => "options" in r ? /* @__PURE__ */ t(
                te,
                {
                  disabledOptions: p,
                  clickableOptions: f,
                  selectedOptions: a,
                  sizeIcon: m,
                  category: r,
                  mode: o,
                  selectedValues: s,
                  handleOptionClick: O,
                  isDisabledNotClickable: u
                },
                l
              ) : r.value === "selectAll" ? /* @__PURE__ */ t(
                q,
                {
                  disabledOptions: p,
                  clickableOptions: f,
                  selectedOptions: a,
                  isPositionLeftCheckbox: z,
                  sizeIcon: m,
                  option: r,
                  handleOptionClick: O,
                  isDisabledNotClickable: u
                },
                l
              ) : null)
            ]
          }
        ) })
      ]
    }
  );
};
export {
  pe as Select
};