@konstructio/ui
Version:
A set of reusable and customizable React components built for konstruct.io
162 lines (161 loc) • 6.36 kB
JavaScript
import { t as r } from "./utils-COaoD3PI.js";
import { LoaderIcon as re } from "./assets/icons/components/Loader.js";
import { t as le } from "./createLucideIcon-CL4htJAF.js";
import { t as ne } from "./chevron-up-BKlxfVX9.js";
import { Typography as se } from "./components/Typography/Typography.js";
import { useSelectContext as oe } from "./components/Select/contexts/select.hook.js";
import { List as ie } from "./components/Select/components/List/List.js";
import { inputVariants as ce, labelVariants as me, selectVariants as pe } from "./components/Select/Select.variants.js";
import { useSelect as ue } from "./components/Select/hooks/useSelect.js";
import { forwardRef as fe, useEffect as de, useId as xe, useImperativeHandle as he, useMemo as ve, useRef as w } from "react";
import { jsx as l, jsxs as o } from "react/jsx-runtime";
var Ne = [["path", {
d: "m21 21-4.34-4.34",
key: "14j7rj"
}], ["circle", {
cx: "11",
cy: "11",
r: "8",
key: "4ej97u"
}]], Ce = le("search", Ne), Re = fe(({ additionalOptions: z, className: O, defaultValue: x, disabled: t = !1, error: f, groupedOptions: R, iconClassName: F, inputClassName: S, isInfiniteScrollEnabled: T = !1, isLoading: g, isRequired: h, label: v, labelAction: E, labelClassName: M, labelWrapperClassName: W, listClassName: _, listItemClassName: $, listItemSecondRowClassName: H, name: d, noOptionsText: P, placeholder: N, searchable: k = !1, showSearchIcon: C, theme: U, visibleItems: q, wrapperClassName: A, onFetchMoreOptions: B, onBlur: D, onSearchChange: G, ...y }, J) => {
const I = xe(), i = w(null), j = w(null), K = w(0), { isOpen: c, options: n, searchTerm: Q, value: s, setCanFilter: X, setSearchTerm: Y, setValue: m, toggleOpen: Z } = oe(), e = ve(() => n.find(({ value: a }) => a === s), [n, s]), { wrapperRef: ee, wrapperInputRef: L, handleOpen: V } = ue({
ulRef: j,
inputRef: i,
disabled: t,
internalValue: e,
onBlur: D
}), p = d ? `${I}-${d}` : I;
he(J, () => i.current, [i]), de(() => {
if (x && !s) {
const a = n && n.find((u) => u.value === x);
a && m(a.value);
}
}, [
x,
n,
m,
s
]);
const te = (a) => {
const u = a.target.value;
X(!0), m(""), Y(u ?? ""), G?.(u);
const b = n.find((ae) => ae.value.toLocaleLowerCase() === u.toLocaleLowerCase());
m(b ? b.value : e?.value ?? "");
};
return /* @__PURE__ */ o("div", {
ref: ee,
className: r("flex flex-col gap-2 w-full relative", A),
"data-theme": U,
children: [
v ? /* @__PURE__ */ o("div", {
className: r("flex items-center justify-between", W),
children: [/* @__PURE__ */ o("label", {
id: p,
className: r(me({ className: M })),
htmlFor: p,
onClick: () => !t && V(),
children: [v, h && /* @__PURE__ */ l("span", {
className: "text-red-600 dark:text-red-500 ml-1",
children: "*"
})]
}), E]
}) : null,
/* @__PURE__ */ o("div", {
ref: L,
id: p,
className: r(pe({
className: O,
hasError: !!f,
disabled: t
})),
role: "combobox",
onClick: () => !t && Z(!c),
"aria-expanded": c,
tabIndex: K.current,
"aria-labelledby": p,
children: [/* @__PURE__ */ o("div", {
className: "flex gap-2.5 items-center flex-1",
children: [
e?.leftIcon && !C && /* @__PURE__ */ l("span", {
className: "w-4 h-4 flex justify-center items-center dark:text-metal-50",
children: e.leftIcon
}),
C && /* @__PURE__ */ l(Ce, { className: r("w-4", "h-4", "text-zinc-500", "select-none", "transition-colors", "duration-300", "dark:text-metal-300", "dark:group-focus-within:text-metal-50") }),
k ? /* @__PURE__ */ l("input", {
type: "text",
value: c ? Q : e?.label ?? s ?? "",
onChange: te,
placeholder: N,
className: r(ce({ className: S }), { "text-red-700 placeholder:text-red-700": !!f }),
onClick: (a) => {
a.stopPropagation(), t || V();
},
"aria-label": v || N,
"aria-labelledby": p,
required: h,
autoComplete: "off",
autoCapitalize: "words",
disabled: t,
tabIndex: -1,
...y
}) : /* @__PURE__ */ o(se, {
variant: "body2",
className: r("flex-1 text-zinc-400 text-sm dark:text-metal-400 flex gap-2 items-center", {
"text-red-700": !!f,
"select-none": !e,
"text-metal-800 dark:text-metal-50": e,
"text-metal-400/50 dark:text-metal-50/50": t
}, e?.wrapperClassNameOnSelectedValue),
children: [
e?.label || N,
" ",
e?.showRightComponentOnselectedValue ? e?.rightComponent : null
]
})
]
}), g ? /* @__PURE__ */ l(re, {
size: 16,
className: "text-metal-400 animate-spin select-none"
}) : !C && /* @__PURE__ */ l(ne, {
"data-state": c ? "open" : "closed",
className: r("w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none dark:group-focus-within:text-metal-50", F, {
"text-red-700": !!f,
"text-metal-400/50 dark:group-focus-within:text-zinc-500": t
})
})]
}),
/* @__PURE__ */ l("input", {
ref: i,
type: "text",
name: d,
className: "hidden",
"aria-hidden": "true",
required: h,
inert: !0,
defaultValue: e?.value ?? s ?? void 0,
...y
}),
c && /* @__PURE__ */ l(ie, {
ref: j,
additionalOptions: z,
className: _,
groupedOptions: R,
itemClassName: $,
name: d,
wrapperInputRef: L,
inputRef: i,
options: n,
isLoading: !!g,
searchable: k,
listItemSecondRowClassName: H,
isInfiniteScrollEnabled: T,
onFetchMoreOptions: B,
noOptionsText: P,
visibleItems: q
})
]
});
});
export {
Re as t
};