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

FSE UI components library

import { j as e } from "./index.es278.js";
import './components/ui/SearchGenericV2/SearchGenericV2.css';/* empty css            */
import { clsx as x } from "./index.es280.js";
import { useState as L, useCallback as M, useMemo as f, Fragment as C } from "react";
import { Spinner as D } from "./index.es235.js";
import { Close as E } from "./index.es80.js";
import { Col as O } from "./index.es82.js";
import { Button as P } from "./index.es36.js";
function U(g) {
  const {
    btnText: S,
    helperText: k = "Cosa vuoi approfondire?",
    value: a,
    loading: c,
    items: u,
    emptyLabel: F = "Nessun risultato disponibile",
    minCharsToShow: m = 3,
    setValue: I,
    setSelectedElement: T,
    className: z,
    dimensionStrategy: B = "fixed"
  } = g, n = "mode" in g && g.mode === "flat" ? "flat" : "categorized", [w, d] = L(!1), v = (s) => {
    I(s.target.value);
  }, N = (s) => {
    T(s), d(!1);
  }, _ = M((s, l) => {
    if (!l) return s;
    const h = s.toLowerCase(), i = l.toLowerCase(), t = [];
    let o = 0, r = h.indexOf(i);
    for (; r !== -1; )
      r > o && t.push(s.slice(o, r)), t.push(
        /* @__PURE__ */ e.jsx("span", { className: "text-primary fw-bold", children: s.slice(r, r + l.length) }, r)
      ), o = r + l.length, r = h.indexOf(i, o);
    return o < s.length && t.push(s.slice(o)), t.length > 0 ? /* @__PURE__ */ e.jsx(e.Fragment, { children: t }) : s;
  }, []), p = f(
    () => n === "flat" ? u : [],
    [n, u]
  ), j = f(
    () => n === "categorized" ? u : [],
    [n, u]
  ), b = f(() => n === "flat" ? p.length === 0 : j.every((s) => s.items.length === 0), [n, p, j]), y = f(() => !w || a.length < m ? !1 : !(c && b), [w, a.length, m, c, b]);
  return /* @__PURE__ */ e.jsxs(
    "div",
    {
      className: x(
        "ui-search-v2",
        "br-x4 bg-border-secondary w-full",
        z,
        { "ui-search-v2--auto": B === "auto" }
      ),
      onBlur: () => {
        setTimeout(() => d(!1), 150);
      },
      children: [
        /* @__PURE__ */ e.jsxs("div", { className: "position-relative w-full", children: [
          /* @__PURE__ */ e.jsx(
            "input",
            {
              type: "search",
              className: x(
                "ui-search-v2__input",
                "fs-6 md-fs-custom text-slate-20 br-x4 w-full pl-x24",
                a && a.length >= m && "has-clear-icon"
              ),
              placeholder: k,
              "aria-label": "Barra di ricerca",
              value: a,
              onChange: v,
              onFocus: () => d(!0)
            }
          ),
          c && /* @__PURE__ */ e.jsx(D, { className: "ui-search-v2__spinner" }),
          a && a.length >= m && !c && /* @__PURE__ */ e.jsx(
            E,
            {
              className: "ui-search-v2__clear",
              onClick: () => {
                v({ target: { value: "" } });
              }
            }
          )
        ] }),
        /* @__PURE__ */ e.jsx(
          "div",
          {
            className: x("ui-search-v2__dropdown shadow position-absolute", {
              "py-x24": y
            }),
            children: /* @__PURE__ */ e.jsx(
              O,
              {
                gap: "x24",
                fw: "regular",
                text: "secondary",
                fs: "6",
                className: "ui-search-v2__list overflow-y-auto",
                children: y && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
                  n === "flat" ? p.length > 0 && /* @__PURE__ */ e.jsx("ul", { className: "list-unstyled", children: p.map((s) => /* @__PURE__ */ e.jsx(
                    "li",
                    {
                      onClick: (l) => {
                        l.stopPropagation(), l.preventDefault(), N(s);
                      },
                      className: "cursor-pointer py-x8 px-x24",
                      children: _(s.label, a || "")
                    },
                    s.value
                  )) }) : j.map(
                    (s, l) => {
                      var h;
                      return (h = s.items) != null && h.length ? /* @__PURE__ */ e.jsx(C, { children: /* @__PURE__ */ e.jsxs("div", { children: [
                        /* @__PURE__ */ e.jsx("h1", { className: "ui-search-v2__category fw-semibold text-dark fs-6 mb-x8 px-x24", children: s.category }),
                        /* @__PURE__ */ e.jsx("ul", { className: "list-unstyled", children: s.items.map((i) => /* @__PURE__ */ e.jsx(
                          "li",
                          {
                            onClick: (t) => {
                              t.stopPropagation(), t.preventDefault(), N(i);
                            },
                            className: "cursor-pointer py-x8 px-x24",
                            children: _(i.label, a || "")
                          },
                          i.value
                        )) })
                      ] }) }, l) : /* @__PURE__ */ e.jsx(C, {}, l);
                    }
                  ),
                  !c && b ? /* @__PURE__ */ e.jsx("p", { className: "px-x24 fs-6", children: F }) : ""
                ] })
              }
            )
          }
        ),
        /* @__PURE__ */ e.jsx("div", { className: "ui-search-v2__btn-wrap", children: /* @__PURE__ */ e.jsx(
          P,
          {
            className: x(
              "ui-search-v2__btn",
              "bg-primary text-white fs-7 md-fs-6 fw-semibold br-x4"
            ),
            onClick: () => {
              v({ target: { value: a } }), d(!0);
            },
            children: S
          }
        ) })
      ]
    }
  );
}
export {
  U as SearchGenericV2
};
//# sourceMappingURL=index.es224.js.map