@anoki/fse-ui/dist/index.es69.js

FSE UI components library

import { j as s } from "./index.es237.js";
import { clsx as x } from "./index.es239.js";
import { useState as w, useRef as g, useEffect as j, useMemo as R } from "react";
import './components/ui/DeclarantsSelect/DeclarantsSelect.css';/* empty css            */
import { Close as z } from "./index.es179.js";
import { ArrowDown as D } from "./index.es165.js";
import { Col as O } from "./index.es61.js";
const F = ({
  size: v = "large",
  items: f = [],
  className: C,
  selectedItem: t,
  setSelectedItem: h,
  placeholder: N = ""
}) => {
  const [o, i] = w(!1), [l, c] = w(""), d = g(null), u = g(null), p = f.filter((e) => {
    var r;
    return `${(r = e.labels) == null ? void 0 : r.it}`.toLowerCase().includes(l.toLowerCase());
  });
  j(() => {
    const e = (n) => {
      d.current && !d.current.contains(n.target) && i(!1);
    };
    return o ? document.addEventListener("mousedown", e) : document.removeEventListener("mousedown", e), () => {
      document.removeEventListener("mousedown", e);
    };
  }, [o]), j(() => {
    o && (c(""), u.current && u.current.focus());
  }, [o]);
  const b = (e) => {
    o && c(e.target.value);
  }, k = () => {
    i(!o);
  }, E = (e) => {
    e.stopPropagation(), h(null), c("");
  }, L = R(() => {
    var e;
    return !o && t ? ((e = f.find((n) => n.code === t)) == null ? void 0 : e.labels.it) || "" : l;
  }, [o, t, l]), m = t !== null || l.length > 0, y = (e, n) => {
    if (!n || n.trim() === "")
      return /* @__PURE__ */ s.jsxs("span", { style: { color: "black", fontSize: "0.85rem" }, children: [
        " ",
        e,
        " "
      ] });
    const r = e.toLowerCase().indexOf(n.toLowerCase());
    if (r === -1) return e;
    const a = e.slice(0, r), S = e.slice(r, r + n.length), M = e.slice(r + n.length);
    return /* @__PURE__ */ s.jsxs("span", { style: { color: "black", fontSize: "0.85rem" }, children: [
      a,
      /* @__PURE__ */ s.jsx("span", { style: { fontSize: "0.85rem" }, className: "text-primary fw-bold", children: S }),
      M
    ] });
  };
  return /* @__PURE__ */ s.jsxs(
    "div",
    {
      ref: d,
      className: x(
        "ui-related-dropdown",
        "br-x4 bg-border-secondary w-full",
        C
      ),
      style: v === "large" ? { maxWidth: "100%" } : { maxWidth: "553px" },
      children: [
        /* @__PURE__ */ s.jsxs("div", { className: "ui-input-container", children: [
          /* @__PURE__ */ s.jsx(
            "input",
            {
              ref: u,
              className: x(
                "ui-related-dropdown-input",
                "bg-white fs-6 br-x4 w-full pl-x24",
                { active: o }
              ),
              value: L,
              onChange: b,
              placeholder: N,
              onClick: k
            }
          ),
          m && /* @__PURE__ */ s.jsx("div", { className: "ui-close-button", onClick: E, children: /* @__PURE__ */ s.jsx(z, { width: 40 }) }),
          !m && /* @__PURE__ */ s.jsx("div", { className: "ui-close-button", children: /* @__PURE__ */ s.jsx(D, { width: 40, height: 40 }) })
        ] }),
        o && /* @__PURE__ */ s.jsx("div", { className: "ui-related-dropdown-options", children: /* @__PURE__ */ s.jsx("div", { className: "px-x24 shadow w-full", children: /* @__PURE__ */ s.jsx(
          O,
          {
            gap: "x4",
            text: "primary",
            fs: "custom",
            fw: "regular",
            className: "ui-options-list fw-regular",
            children: p.length > 0 ? p.map((e, n) => {
              var a;
              const r = `${(a = e.labels) == null ? void 0 : a.it} `;
              return /* @__PURE__ */ s.jsx(
                "div",
                {
                  className: "ui-option-item",
                  onClick: () => {
                    h((e == null ? void 0 : e.code) || ""), i(!1);
                  },
                  children: y(r, l)
                },
                (e == null ? void 0 : e.code) || n
              );
            }) : /* @__PURE__ */ s.jsx("div", { className: "ui-option-item no-results", children: /* @__PURE__ */ s.jsx("span", { style: { color: "gray" }, children: "Nessun risultato trovato" }) })
          }
        ) }) })
      ]
    }
  );
};
export {
  F as DeclarantsSelect
};
//# sourceMappingURL=index.es69.js.map