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

FSE UI components library

import { j as s } from "./index.es237.js";
import './components/ui/SearchService/SearchService.css';/* empty css            */
import { clsx as n } from "./index.es238.js";
import { useState as h } from "react";
import { Close as v } from "./index.es179.js";
import { Col as C } from "./index.es61.js";
import { Button as N } from "./index.es32.js";
const F = ({
  btnText: u,
  helperText: d,
  value: p,
  items: x,
  setValue: f
}) => {
  const [r, o] = h(p), [m, i] = h([]), g = (e) => {
    const t = e.target.value;
    if (o(t), t.length >= 3) {
      const a = x.filter(
        (c) => [c.name].some(
          (l) => l == null ? void 0 : l.toLowerCase().includes(t.toLowerCase())
        )
      );
      i(a);
    } else
      i([]);
  }, b = (e) => {
    o(e.name), i([]);
  }, j = (e, t) => {
    if (!t) return e;
    const a = e.toLowerCase().indexOf(t.toLowerCase());
    if (a === -1) return e;
    const c = e.slice(0, a), l = e.slice(a, a + t.length), w = e.slice(a + t.length);
    return /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
      c,
      /* @__PURE__ */ s.jsx("span", { className: "text-primary fw-bold", children: l }),
      w
    ] });
  };
  return /* @__PURE__ */ s.jsxs("div", { className: n("ui-search", "br-x4 bg-border-secondary w-full"), children: [
    /* @__PURE__ */ s.jsxs("div", { className: "position-relative", children: [
      /* @__PURE__ */ s.jsx(
        "input",
        {
          id: "search",
          type: "search",
          className: n(
            "ui-search-input",
            "fs-6 md-fs-custom text-slate-20 br-x4 w-full pl-x24"
          ),
          placeholder: d,
          "aria-label": "Barra di ricerca",
          value: r,
          onChange: g
        }
      ),
      r && r.length >= 3 && /* @__PURE__ */ s.jsx(
        v,
        {
          className: "ui-clean-button",
          onClick: () => {
            o(""), i([]);
          }
        }
      )
    ] }),
    m.length > 0 && /* @__PURE__ */ s.jsx("div", { className: "ui-wrap-list-item-search shadow position-absolute p-x24", children: /* @__PURE__ */ s.jsx(
      C,
      {
        gap: "x24",
        fw: "regular",
        text: "secondary",
        fs: "6",
        className: "ui-list-item-search overflow-y-auto",
        children: m.map((e, t) => /* @__PURE__ */ s.jsx("div", { onClick: () => b(e), children: j(e.name, r || "") }, t))
      }
    ) }),
    /* @__PURE__ */ s.jsx("div", { className: n("ui-div-btn"), children: /* @__PURE__ */ s.jsx(
      N,
      {
        className: n(
          "ui-btn-search",
          "bg-primary text-white fs-7 md-fs-6 fw-semibold br-x4"
        ),
        onClick: () => {
          i([]), f(r ?? "");
        },
        children: u
      }
    ) })
  ] });
};
export {
  F as SearchService
};
//# sourceMappingURL=index.es120.js.map