geoiq-frontend-ui-kit
Version:
This project is a UI kit for GeoIQ's frontend. It's built with React, TypeScript, and Vite.
89 lines (88 loc) • 3.32 kB
JavaScript
import * as e from "react";
import { useRef as N } from "react";
import { ChevronUp as y, ChevronDown as w, Check as k } from "lucide-react";
import { Command as S, CommandInput as O, CommandEmpty as P, CommandGroup as R, CommandList as j, CommandItem as B } from "./index.es52.js";
import { Popover as I, PopoverTrigger as T, PopoverContent as V } from "./index.es80.js";
import { Button as D } from "./index.es7.js";
import { ComboBoxStates as F } from "./index.es113.js";
import { Typography as m } from "./index.es17.js";
import { cn as n } from "./index.es79.js";
function J({
options: o,
value: a,
placeholder: g = "Empty",
searchPlaceholder: f = "Search",
emptyMessage: u = "No results",
onChange: p,
onSearchChange: s,
onChangePopoverOpen: c,
popoverContentProps: E,
listEmptyComponent: i,
container: b
}) {
const [l, d] = e.useState(!1), h = N(null), x = (t, C) => {
p(t, C), d(!1);
}, v = (t) => {
d(t), c && c(t);
}, r = o.find((t) => t.id === a);
return /* @__PURE__ */ e.createElement(I, { open: l, onOpenChange: v }, /* @__PURE__ */ e.createElement(T, { ref: h, asChild: !0 }, /* @__PURE__ */ e.createElement(
D,
{
variant: "secondary",
role: "combobox",
"aria-expanded": l,
className: n(
F({ isOpen: l, isValue: !!a }),
"w-full justify-between px-3 py-2"
)
},
r ? /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-2 overflow-hidden" }, r.icon, /* @__PURE__ */ e.createElement(
m,
{
variant: "body2",
className: a ? "text-light-2" : "text-light-4"
},
r?.name
)) : /* @__PURE__ */ e.createElement(m, { variant: "body2", className: "text-light-4" }, g),
l ? /* @__PURE__ */ e.createElement(y, { className: "w-4 h-4 ml-2 stroke-light-2" }) : /* @__PURE__ */ e.createElement(w, { className: "w-4 h-4 ml-2 stroke-light-2" })
)), /* @__PURE__ */ e.createElement(
V,
{
style: {
width: h.current?.clientWidth
},
className: "p-0 mt-1 rounded-lg bg-light-1",
container: b,
...E
},
/* @__PURE__ */ e.createElement(S, { shouldFilter: !s }, /* @__PURE__ */ e.createElement(
O,
{
placeholder: f,
className: "",
onValueChange: s
}
), /* @__PURE__ */ e.createElement(P, null, i || /* @__PURE__ */ e.createElement(m, { variant: "body3", className: "text-light-4" }, u)), /* @__PURE__ */ e.createElement(R, null, /* @__PURE__ */ e.createElement(j, null, o.map((t) => /* @__PURE__ */ e.createElement(
B,
{
key: t.id,
value: t.id,
disabled: t.disabled,
className: n(
"justify-between gap-2 text-light-2 hover:bg-light-2 hover:text-light-1 focus:bg-light-2 focus:text-accent-foreground",
t.disabled ? "text-light-4" : "text-light-2",
a === t.id ? "bg-light-2" : ""
),
onSelect: () => {
x(t.id, t);
}
},
/* @__PURE__ */ e.createElement("div", { className: "flex flex-row gap-2 " }, t.icon, t.name),
a === t.id ? /* @__PURE__ */ e.createElement(k, { className: n("h-4 w-4 stroke-brand") }) : /* @__PURE__ */ e.createElement("div", null)
)))))
));
}
export {
J as SingleCombobox
};
//# sourceMappingURL=index.es25.js.map