welcome-ui
Version:
Customizable design system with react, typescript, tailwindcss and ariakit.
215 lines (214 loc) • 6.84 kB
JavaScript
"use client";
import { jsx as t, jsxs as g } from "react/jsx-runtime";
import { D as b, F as pe } from "./field-icon-size-Cj-yrCqM.js";
import _e, { forwardRef as de, useState as me, useCallback as he, useMemo as ue, Fragment as ze } from "react";
import { CloseButton as ke } from "./CloseButton.js";
import { c as fe } from "./index-PAaZGbyz.js";
import { c as we } from "./create-event-rXDe5aCQ.js";
import { t as ge } from "./throttle-BDBzFeFj.js";
const Ne = "_wrapper_1pzk6_2", Ie = "_indicators_1pzk6_5", Re = "_root_1pzk6_33", Se = "_transparent_1pzk6_81", xe = "_menu_1pzk6_170", ve = "_item_1pzk6_198", Ce = "_highlighted_1pzk6_212", Ee = "_selected_1pzk6_215", $e = {
wrapper: Ne,
indicators: Ie,
"dropdown-indicator": "_dropdown-indicator_1pzk6_14",
"input-wrapper": "_input-wrapper_1pzk6_27",
"icon-placement-right": "_icon-placement-right_1pzk6_30",
root: Re,
"icon-placement-left": "_icon-placement-left_1pzk6_63",
transparent: Se,
"variant-danger": "_variant-danger_1pzk6_94",
"variant-success": "_variant-success_1pzk6_98",
"variant-warning": "_variant-warning_1pzk6_102",
"size-lg": "_size-lg_1pzk6_106",
"size-md": "_size-md_1pzk6_114",
"size-sm": "_size-sm_1pzk6_122",
"size-xs": "_size-xs_1pzk6_130",
"icon-wrapper": "_icon-wrapper_1pzk6_139",
menu: xe,
item: ve,
highlighted: Ce,
selected: Ee
}, j = "", n = fe($e), De = b.default || b, Fe = de(
({
autoComplete: y = "off",
autoFocus: P,
className: V,
dataTestId: B,
disabled: F,
groupsEnabled: G,
icon: p,
iconPlacement: N = "left",
id: H,
itemToString: s,
minChars: m = 3,
name: I,
onBlur: L,
onChange: h,
onClick: Y,
onFocus: u,
placeholder: Z = "Search…",
renderGroupHeader: q,
renderItem: R,
search: S,
size: a = "md",
throttle: x = 500,
transparent: A,
value: _ = j,
variant: z,
...k
}, J) => {
const K = _ ? s(_) : j, [v, c] = me([]), C = he(
async (e) => {
if (m === 0 || (e == null ? void 0 : e.length) >= m) {
const o = await S(e);
c(o || []);
} else
c([]);
},
[m, S]
), E = ue(
() => ge(C, x, !1),
[C, x]
), f = (e) => {
const o = we({ name: I, value: e });
h == null || h(e, o);
}, $ = (e) => {
e ? f(e) : (f(), c([]));
};
return /* @__PURE__ */ t(
De,
{
initialInputValue: K,
itemToString: (e) => s(e) || "",
onInputValueChange: E,
onOuterClick: () => {
_ || $(), c([]);
},
onSelect: $,
selectedItem: _,
...k,
children: ({
clearSelection: e,
getInputProps: o,
getItemProps: D,
getMenuProps: Q,
getRootProps: U,
highlightedIndex: W,
inputValue: X,
isOpen: T,
selectedItem: d,
toggleMenu: ee
}) => {
const te = () => {
c([]), f(), e();
}, ne = T && v.length > 0, se = /* @__PURE__ */ t("div", { className: n("dropdown-indicator"), children: /* @__PURE__ */ t(ke, { animatePresence: !0, onClick: te, title: "Clear" }) }), ie = (i) => {
u == null || u(i), E(""), ee();
}, re = U(k, { suppressRefError: !0 }), ae = o({
autoComplete: y,
autoFocus: P,
"data-testid": B,
disabled: F,
id: H,
name: I,
onBlur: L,
onClick: Y,
onFocus: ie,
placeholder: Z,
ref: J,
size: a,
tabIndex: 0,
variant: T ? "focused" : z,
...k
}), ce = pe[a];
return /* @__PURE__ */ g("div", { ...re, className: n("wrapper"), children: [
/* @__PURE__ */ g("div", { className: n("input-wrapper"), children: [
/* @__PURE__ */ t(
"input",
{
className: n(
"root",
`size-${a}`,
z && `variant-${z}`,
A && "transparent",
p && `icon-placement-${N}`,
V
),
...ae
}
),
p ? /* @__PURE__ */ t(
"div",
{
className: n(
"icon-wrapper",
`icon-placement-${N}`,
`size-${a}`
),
children: _e.cloneElement(p, { ...p.props, size: ce })
}
) : null,
/* @__PURE__ */ t("div", { className: n("indicators", `size-${a}`), children: X ? se : null })
] }),
ne ? /* @__PURE__ */ t("ul", { className: n("menu"), ...Q(), children: v.reduce(
(i, r, w) => {
const M = i.itemIndex++, O = W === M;
if (G)
i.itemsToRender.push(
/* @__PURE__ */ g(ze, { children: [
q(r),
r.options ? r.options.map(
(l, oe) => {
const le = d && s(d) === s(l);
return /* @__PURE__ */ t(
"li",
{
className: n(
"item",
O && "highlighted",
le && "selected"
),
...D({
index: M,
item: l
}),
children: R(l)
},
oe
);
}
) : null
] }, w)
);
else {
const l = d && s(d) === s(r);
i.itemsToRender.push(
/* @__PURE__ */ t(
"li",
{
className: n(
"item",
O && "highlighted",
l && "selected"
),
...D({
index: w,
item: r
}),
children: R(r)
},
w
)
);
}
return i;
},
{ itemIndex: 0, itemsToRender: [] }
).itemsToRender }) : null
] });
}
}
);
}
);
export {
Fe as Search
};