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

FSE UI components library

import { j as t } from "./index.es278.js";
import { CategoryContent as w } from "./index.es66.js";
import { Col as f } from "./index.es82.js";
import { Row as v } from "./index.es219.js";
import { useState as d, useRef as N, useEffect as b, useMemo as h } from "react";
import './components/ui/filters/FilterSearchSection/FilterSearchSection.css';/* empty css            */
import { SearchIcon as g } from "./index.es225.js";
import { Close as y } from "./index.es80.js";
const q = ({
  items: s,
  selectedItems: i,
  onChange: c,
  searchPlaceholder: m,
  canMultiple: p = !0
}) => {
  const [n, x] = d(""), [o, l] = d(!1), a = N(null);
  b(() => {
    if (!o) return;
    const e = (r) => {
      a.current && (a.current.contains(r.target) || l(!1));
    };
    return document.addEventListener("mousedown", e), () => {
      document.removeEventListener("mousedown", e);
    };
  }, [o]);
  const j = h(() => {
    const e = n.trim().toLowerCase();
    return e ? s.filter((r) => r.label.toLowerCase().includes(e)) : s;
  }, [s, n]), u = h(() => {
    if (!i.length) return [];
    const e = new Map(s.map((r) => [r.id, r.label]));
    return i.map((r) => ({
      id: r,
      label: e.get(r) ?? r
    }));
  }, [s, i]), C = (e) => {
    c(i.filter((r) => r !== e));
  };
  return /* @__PURE__ */ t.jsx(f, { className: "ui-filter-search-section", children: /* @__PURE__ */ t.jsxs(f, { className: "ui-filter-search-body", ref: a, children: [
    /* @__PURE__ */ t.jsxs("div", { className: "ui-filter-search-dropdown-anchor", children: [
      /* @__PURE__ */ t.jsxs(v, { className: "ui-filter-search-input-row", children: [
        /* @__PURE__ */ t.jsx(g, { fillColor: "#5C6F82" }),
        /* @__PURE__ */ t.jsx(
          "input",
          {
            className: "ui-filter-search-input",
            value: n,
            onChange: (e) => {
              x(e.target.value), l(!0);
            },
            onFocus: () => l(!0),
            placeholder: m
          }
        )
      ] }),
      /* @__PURE__ */ t.jsx(
        "div",
        {
          className: `ui-filter-search-list${o ? " is-open" : ""}`,
          "aria-hidden": !o,
          children: /* @__PURE__ */ t.jsx(
            w,
            {
              canMultiple: p,
              items: j,
              selectedItems: i,
              onChange: c
            }
          )
        }
      )
    ] }),
    u.length > 0 && /* @__PURE__ */ t.jsx("div", { className: "ui-filter-chips", children: u.map((e) => /* @__PURE__ */ t.jsxs(
      "button",
      {
        type: "button",
        className: "ui-filter-chip",
        onClick: () => C(e.id),
        children: [
          /* @__PURE__ */ t.jsx("span", { children: e.label }),
          /* @__PURE__ */ t.jsx(
            y,
            {
              className: "ui-filter-chip-close",
              width: 24,
              height: 24,
              decorative: !0
            }
          )
        ]
      },
      e.id
    )) })
  ] }) });
};
export {
  q as FilterSearchSection
};
//# sourceMappingURL=index.es137.js.map