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

FSE UI components library

import { j as e } from "./index.es244.js";
import { useState as C, useId as G } from "react";
import { clsx as m } from "./index.es246.js";
import './components/ui/SearchGeneric/SearchGeneric.css';/* empty css            */
import { useMediaQuery as Q } from "./index.es281.js";
import { Close as S } from "./index.es161.js";
import { Col as A } from "./index.es10.js";
import { Button as D } from "./index.es28.js";
function W({
  btnText: I,
  helperText: h,
  instructionsText: c = "Inserisci almeno $minCharsToSearch caratteri per iniziare la ricerca.",
  mobileHelperText: $ = h,
  value: y,
  items: L,
  setValue: u,
  setTypedValue: f,
  getSearchField: b,
  getDisplayField: g = b,
  onItemSelect: v,
  minCharsToSearch: d = 3,
  className: k,
  dimensionStrategy: E = "fixed"
}) {
  const [i, p] = C(y || ""), [t, r] = C([]), M = Q("(min-width: 768px)"), l = G(), j = `${l}-listbox`, w = `${l}-instructions`, R = `${l}-label`, N = (a) => {
    const s = a.target.value;
    if (p(s), f && f(s), s.length >= d) {
      const x = L.filter((o) => {
        const n = b(o);
        return n == null ? void 0 : n.toLowerCase().includes(s.toLowerCase());
      });
      r(x);
    } else
      r([]);
  }, z = (a) => {
    const s = g(a);
    p(s), u(s), r([]), v && v(a);
  }, B = (a, s) => {
    if (!s) return a;
    const x = a.split(new RegExp(`(${s})`, "gi"));
    return /* @__PURE__ */ e.jsx(e.Fragment, { children: x.map(
      (o, n) => o.toLowerCase() === s.toLowerCase() ? /* @__PURE__ */ e.jsx("span", { className: "text-primary fw-bold", children: o }, n) : o
    ) });
  };
  return /* @__PURE__ */ e.jsxs(
    "div",
    {
      className: m(
        "ui-search",
        "br-x4 bg-border-secondary w-full",
        k,
        {
          "ui-search-generic-auto": E === "auto"
        }
      ),
      children: [
        /* @__PURE__ */ e.jsx("label", { id: R, htmlFor: l, className: "sr-only", children: h }),
        c && /* @__PURE__ */ e.jsx("div", { id: w, className: "sr-only", children: c == null ? void 0 : c.replace("$minCharsToSearch", String(d)) }),
        /* @__PURE__ */ e.jsxs("div", { className: "position-relative", children: [
          /* @__PURE__ */ e.jsx(
            "input",
            {
              id: l,
              type: "text",
              role: "combobox",
              "aria-expanded": t.length > 0,
              "aria-haspopup": "listbox",
              "aria-owns": t.length > 0 ? j : void 0,
              "aria-describedby": w,
              className: m(
                "ui-search-input",
                "fs-6 md-fs-custom text-slate-20 br-x4 w-full pl-x24",
                i && i.length >= 3 && "has-clear-icon"
              ),
              placeholder: M ? h : $,
              value: i,
              onChange: N,
              maxLength: 30,
              autoComplete: "off"
            }
          ),
          i && /* @__PURE__ */ e.jsx(
            S,
            {
              className: "ui-clean-button",
              ariaLabel: "Cancella ricerca",
              onClick: () => {
                p(""), r([]), u(""), N({ target: { value: "" } });
              }
            }
          )
        ] }),
        t.length > 0 && /* @__PURE__ */ e.jsx(
          "div",
          {
            className: "ui-wrap-list-item-search shadow position-absolute p-x24",
            role: "listbox",
            id: j,
            "aria-label": `${t.length} risultati disponibili`,
            children: /* @__PURE__ */ e.jsx(
              A,
              {
                gap: "x24",
                fw: "regular",
                text: "secondary",
                fs: "6",
                className: "ui-list-item-search overflow-y-auto ",
                children: t.map((a, s) => /* @__PURE__ */ e.jsx(
                  "div",
                  {
                    id: `${l}-option-${s}`,
                    role: "option",
                    onClick: () => z(a),
                    className: "hover:bg-primary",
                    children: B(g(a), i)
                  },
                  s
                ))
              }
            )
          }
        ),
        /* @__PURE__ */ e.jsxs("div", { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: [
          t.length > 0 && i.length >= d && `${t.length} risultati trovati`,
          i.length >= d && t.length === 0 && "Nessun risultato trovato"
        ] }),
        /* @__PURE__ */ e.jsx("div", { className: m("ui-div-btn"), children: /* @__PURE__ */ e.jsx(
          D,
          {
            className: m(
              "ui-btn-search",
              "bg-primary text-white fs-7 md-fs-6 fw-semibold br-x4"
            ),
            onClick: () => {
              r([]), u(i);
            },
            children: I
          }
        ) })
      ]
    }
  );
}
export {
  W as SearchGeneric
};
//# sourceMappingURL=index.es15.js.map