@codex-storage/marketplace-ui-components
Version:
Marketplace UI components for Codex decentralized storage network.
72 lines (71 loc) • 2.25 kB
JavaScript
import { jsxs as s, jsx as t } from "react/jsx-runtime";
import { useRef as g, useState as D } from "react";
import { attributes as E } from "../utils/attributes.js";
import { Backdrop as K } from "../Backdrop/Backdrop.js";
import { Input as T } from "../Input/Input.js";
import '../../assets/Dropdown.css';function G({
placeholder: w,
options: b,
label: c,
id: a,
onMouseEnter: C,
onMouseLeave: L,
onFocus: l,
onBlur: i,
onChange: I,
onSelected: o,
value: d = "",
className: x = "",
variant: k = "medium"
}) {
const f = g(null), p = d.toLocaleLowerCase(), u = b.filter(
(e) => {
var r;
return e.title.toLocaleLowerCase().includes(p) || ((r = e.subtitle) == null ? void 0 : r.toLocaleLowerCase().includes(p));
}
), [m, n] = D(!1), j = () => {
n(!0), l == null || l();
}, v = () => {
i == null || i(), window.setTimeout(() => n(!1), 150);
}, y = (e) => {
o == null || o(e), n(!1);
}, N = (e) => {
var r;
e.key === "Escape" && (h(), (r = f.current) == null || r.blur());
}, h = () => n(!1), R = E({ "aria-expanded": m });
return /* @__PURE__ */ s("div", { className: "dropdown " + x, children: [
c && /* @__PURE__ */ t("label", { htmlFor: a, children: c }),
/* @__PURE__ */ s("div", { children: [
/* @__PURE__ */ t(K, { onClose: h, open: m }),
/* @__PURE__ */ t(
T,
{
autoComplete: "off",
ref: f,
onChange: I,
onFocus: j,
onBlur: v,
onKeyUp: N,
onMouseEnter: C,
onMouseLeave: L,
placeholder: w,
value: d,
label: "",
id: a,
variant: k
}
),
/* @__PURE__ */ t("ul", { ...R, children: u.length ? u.map((e) => /* @__PURE__ */ s("li", { onClick: () => y(e), children: [
e.Icon && /* @__PURE__ */ t(e.Icon, {}),
/* @__PURE__ */ s("div", { children: [
/* @__PURE__ */ t("span", { children: e.title }),
e.subtitle && /* @__PURE__ */ t("span", { children: e.subtitle })
] })
] }, e.title + e.subtitle)) : /* @__PURE__ */ t("p", { children: "No results found" }) })
] })
] });
}
export {
G as Dropdown
};
//# sourceMappingURL=Dropdown.js.map