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

FSE UI components library

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