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

uikit for redesign

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