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

uikit for redesign

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