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

FSE UI components library

import { j as e } from "./index.es278.js";
import { clsx as c } from "./index.es280.js";
import './components/ui/FilterDropDown/FilterDropDown.css';/* empty css            */
import { ArrowDown as w } from "./index.es19.js";
import { useState as h, useRef as m, useEffect as v } from "react";
import { ArrowList as j } from "./index.es445.js";
import { useFocusTrap as y } from "./index.es446.js";
import { Col as E } from "./index.es82.js";
const A = ({
  size: p,
  items: f = [],
  className: x,
  filter: a,
  setFilter: n
}) => {
  const [r, t] = h(!1), l = m(null), d = m(null);
  return y(d, r), v(() => {
    if (!r) return;
    const s = (o) => {
      var u;
      (u = l.current) != null && u.contains(o.target) || t(!1);
    }, i = (o) => {
      o.key === "Escape" && t(!1);
    };
    return document.addEventListener("mousedown", s), document.addEventListener("keydown", i), () => {
      document.removeEventListener("mousedown", s), document.removeEventListener("keydown", i);
    };
  }, [r]), /* @__PURE__ */ e.jsxs(
    "div",
    {
      ref: l,
      style: p === "large" ? { width: "668px" } : { width: "322px" },
      className: c(x, "ui-filter-dropdown"),
      children: [
        /* @__PURE__ */ e.jsxs(
          "button",
          {
            className: "ui-button-accordion",
            type: "button",
            "aria-expanded": r,
            "aria-haspopup": "listbox",
            onClick: () => t(!r),
            children: [
              /* @__PURE__ */ e.jsx("h1", { className: "fw-semibold fs-custom text-primary", children: a }),
              /* @__PURE__ */ e.jsx(
                w,
                {
                  color: "primary",
                  className: c("ui-arrow", { "ui-expanded": r })
                }
              )
            ]
          }
        ),
        r && /* @__PURE__ */ e.jsxs(
          "div",
          {
            ref: d,
            className: "ui-wrap-list-item-filter position-relative pt-x12",
            children: [
              /* @__PURE__ */ e.jsx(j, { className: "ui-arrow-list position-absolute" }),
              /* @__PURE__ */ e.jsx("div", { className: "p-x24 h-full shadow", children: /* @__PURE__ */ e.jsx(
                E,
                {
                  gap: "x24",
                  text: "primary",
                  fs: "custom",
                  fw: "regular",
                  className: "ui-list-item-filter h-full overflow fw-regular",
                  role: "listbox",
                  children: f.map((s, i) => /* @__PURE__ */ e.jsx(
                    "div",
                    {
                      role: "option",
                      "aria-selected": s.value === a,
                      tabIndex: 0,
                      onClick: () => {
                        n(s.value), t(!1);
                      },
                      onKeyDown: (o) => {
                        (o.key === "Enter" || o.key === " ") && (o.preventDefault(), n(s.value), t(!1));
                      },
                      children: s.label
                    },
                    i
                  ))
                }
              ) })
            ]
          }
        )
      ]
    }
  );
};
export {
  A as FilterDropDown
};
//# sourceMappingURL=index.es135.js.map