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

FSE UI components library

import { j as s } from "./index.es237.js";
import { clsx as x } from "./index.es239.js";
import { useState as h, useRef as y, useId as F, useEffect as b } from "react";
import './components/ui/GroupCodeExemptionFilterDropDown/GroupCodeExemptionFilterDropDown.css';/* empty css            */
import { Close as O } from "./index.es179.js";
import { Button as S } from "./index.es32.js";
import { Col as W } from "./index.es61.js";
const Q = ({
  size: N = "large",
  items: C = [],
  className: E,
  selectedGroupCode: d,
  setSelectedGroupCode: k,
  placeholder: g = "",
  btnText: L = "Cerca",
  onSearch: u
}) => {
  const [t, r] = h(!1), [a, p] = h(""), [l, c] = h(d), m = y(null), w = y(null), f = F(), j = `${f}-listbox`, I = g || "Codice esenzione", v = C.filter((e) => e.labels.it.toLowerCase().includes(a.toLowerCase()));
  b(() => {
    c(d);
  }, [d]), b(() => {
    const e = (o) => {
      m.current && !m.current.contains(o.target) && r(!1);
    };
    return t ? document.addEventListener("mousedown", e) : document.removeEventListener("mousedown", e), () => {
      document.removeEventListener("mousedown", e);
    };
  }, [t]), b(() => {
    var e;
    t && (p(""), (e = w.current) == null || e.focus());
  }, [t]);
  const z = !t && l ? l.labels.it : a, R = l !== null || a.length > 0, D = (e, o) => {
    const n = { color: "black", fontSize: "0.85rem" };
    if (!o || o.trim() === "")
      return /* @__PURE__ */ s.jsx("span", { style: n, children: e });
    const i = e.toLowerCase().indexOf(o.toLowerCase());
    if (i === -1) return /* @__PURE__ */ s.jsx("span", { style: n, children: e });
    const T = e.slice(0, i), M = e.slice(i, i + o.length), B = e.slice(i + o.length);
    return /* @__PURE__ */ s.jsxs("span", { style: n, children: [
      T,
      /* @__PURE__ */ s.jsx("span", { style: { fontSize: "0.85rem" }, className: "text-primary fw-bold", children: M }),
      B
    ] });
  };
  return /* @__PURE__ */ s.jsxs(
    "div",
    {
      ref: m,
      className: x(
        "ui-related-dropdown-group-code",
        "br-x4 bg-border-secondary w-full",
        E
      ),
      style: N === "large" ? { maxWidth: "100%" } : { maxWidth: "553px" },
      children: [
        /* @__PURE__ */ s.jsxs("div", { className: "ui-input-container-group-code", children: [
          /* @__PURE__ */ s.jsx("label", { className: "visually-hidden", htmlFor: f, children: I }),
          /* @__PURE__ */ s.jsx(
            "input",
            {
              ref: w,
              id: f,
              type: "text",
              className: x(
                "ui-related-dropdown-input-group-code",
                "bg-white fs-6 br-x4 w-full pl-x24",
                { active: t }
              ),
              value: z,
              onChange: (e) => {
                t && p(e.target.value);
              },
              placeholder: g,
              autoComplete: "off",
              onClick: () => r((e) => !e),
              "aria-haspopup": "listbox",
              "aria-expanded": t,
              "aria-controls": j
            }
          ),
          R && /* @__PURE__ */ s.jsx(
            "button",
            {
              type: "button",
              className: "ui-close-button-group-code",
              onClick: (e) => {
                e.stopPropagation(), c(null), p("");
              },
              "aria-label": "Cancella filtro del codice esenzione",
              children: /* @__PURE__ */ s.jsx("span", { "aria-hidden": "true", children: /* @__PURE__ */ s.jsx(O, { width: 20 }) })
            }
          ),
          /* @__PURE__ */ s.jsx("div", { className: "ui-div-btn-group-code", children: /* @__PURE__ */ s.jsx(
            S,
            {
              className: x(
                "ui-btn-search-group-code",
                "bg-primary text-white fs-7 fw-semibold br-x4"
              ),
              onClick: () => {
                k(l), u == null || u(l);
              },
              children: L
            }
          ) })
        ] }),
        t && /* @__PURE__ */ s.jsx("div", { className: "ui-related-dropdown-options-group-code", children: /* @__PURE__ */ s.jsx("div", { className: "px-x24 shadow w-full", children: /* @__PURE__ */ s.jsx(
          W,
          {
            gap: "x4",
            text: "primary",
            fs: "custom",
            fw: "regular",
            className: "ui-options-list-group-code fw-regular",
            role: "listbox",
            "aria-label": "Risultati ricerca codice esenzione",
            id: j,
            children: v.length > 0 ? v.map((e, o) => {
              const n = (l == null ? void 0 : l.code) === e.code;
              return /* @__PURE__ */ s.jsx(
                "div",
                {
                  className: "ui-option-item-group-code",
                  role: "option",
                  tabIndex: 0,
                  "aria-selected": n,
                  onClick: () => {
                    c(e), r(!1);
                  },
                  onKeyDown: (i) => {
                    (i.key === "Enter" || i.key === " ") && (i.preventDefault(), c(e), r(!1));
                  },
                  children: D(e.labels.it, a)
                },
                e.code || o
              );
            }) : /* @__PURE__ */ s.jsx(
              "div",
              {
                className: "ui-option-item-group-code no-results-group-code",
                role: "status",
                "aria-live": "polite",
                children: /* @__PURE__ */ s.jsx("span", { style: { color: "gray" }, children: "Nessun risultato trovato" })
              }
            )
          }
        ) }) })
      ]
    }
  );
};
export {
  Q as GroupCodeExemptionFilterDropDown
};
//# sourceMappingURL=index.es97.js.map