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 n, jsxs as N } from "react/jsx-runtime";
import { D as b, F as he } from "./field-icon-size-Cj-yrCqM.js";
import _e, { forwardRef as de, useState as pe, useCallback as ue, useMemo as me, Fragment as ze } from "react";
import { CloseButton as fe } from "./CloseButton.js";
import { c as we } from "./index-PAaZGbyz.js";
import { c as ge } from "./create-event-rXDe5aCQ.js";
import { t as Ne } from "./throttle-BDBzFeFj.js";
const Ie = "_wrapper_8nhuz_2", Re = "_indicators_8nhuz_5", Se = "_root_8nhuz_33", xe = "_transparent_8nhuz_81", ve = "_menu_8nhuz_170", Ce = "_item_8nhuz_198", ke = "_highlighted_8nhuz_212", Ee = "_selected_8nhuz_215", $e = {
wrapper: Ie,
indicators: Re,
"dropdown-indicator": "_dropdown-indicator_8nhuz_14",
"input-wrapper": "_input-wrapper_8nhuz_27",
"icon-placement-right": "_icon-placement-right_8nhuz_30",
root: Se,
"icon-placement-left": "_icon-placement-left_8nhuz_63",
transparent: xe,
"variant-danger": "_variant-danger_8nhuz_94",
"variant-success": "_variant-success_8nhuz_98",
"variant-warning": "_variant-warning_8nhuz_102",
"size-lg": "_size-lg_8nhuz_106",
"size-md": "_size-md_8nhuz_114",
"size-sm": "_size-sm_8nhuz_122",
"size-xs": "_size-xs_8nhuz_130",
"icon-wrapper": "_icon-wrapper_8nhuz_139",
menu: ve,
item: Ce,
highlighted: ke,
selected: Ee
}, j = "", t = we($e), De = b.default || b, Fe = de(
({
autoComplete: y = "off",
autoFocus: P,
className: V,
dataTestId: B,
disabled: F,
groupsEnabled: G,
icon: h,
iconPlacement: I = "left",
id: H,
itemToString: s,
minChars: p = 3,
name: R,
onBlur: L,
onChange: u,
onClick: Y,
onFocus: m,
placeholder: Z = "Search…",
renderGroupHeader: q,
renderItem: S,
search: x,
size: a = "md",
throttle: v = 500,
transparent: A,
value: _ = j,
variant: z,
...f
}, J) => {
const K = _ ? s(_) : j, [C, c] = pe([]), k = ue(
async (e) => {
if (p === 0 || (e == null ? void 0 : e.length) >= p) {
const o = await x(e);
c(o || []);
} else
c([]);
},
[p, x]
), E = me(
() => Ne(k, v, !1),
[k, v]
), w = (e) => {
const o = ge({ name: R, value: e });
u == null || u(e, o);
}, $ = (e) => {
e ? w(e) : (w(), c([]));
};
return /* @__PURE__ */ n(
De,
{
initialInputValue: K,
itemToString: (e) => s(e) || "",
onInputValueChange: E,
onOuterClick: () => {
_ || $(), c([]);
},
onSelect: $,
selectedItem: _,
...f,
children: ({
clearSelection: e,
getInputProps: o,
getItemProps: D,
getMenuProps: Q,
getRootProps: U,
highlightedIndex: W,
inputValue: X,
isOpen: T,
selectedItem: d,
toggleMenu: ee
}) => {
const ne = () => {
c([]), w(), e();
}, te = T && C.length > 0, se = /* @__PURE__ */ n("div", { className: t("dropdown-indicator"), children: /* @__PURE__ */ n(fe, { animatePresence: !0, onClick: ne, title: "Clear" }) }), ie = (i) => {
m == null || m(i), E(""), ee();
}, re = U(f, { suppressRefError: !0 }), ae = o({
autoComplete: y,
autoFocus: P,
"data-testid": B,
disabled: F,
id: H,
name: R,
onBlur: L,
onClick: Y,
onFocus: ie,
placeholder: Z,
ref: J,
size: a,
tabIndex: 0,
variant: T ? "focused" : z,
...f
}), ce = he[a];
return /* @__PURE__ */ N("div", { ...re, className: t("wrapper"), children: [
/* @__PURE__ */ N("div", { className: t("input-wrapper"), children: [
/* @__PURE__ */ n(
"input",
{
className: t(
"root",
`size-${a}`,
z && `variant-${z}`,
A && "transparent",
h && `icon-placement-${I}`,
V
),
...ae
}
),
h ? /* @__PURE__ */ n(
"div",
{
className: t(
"icon-wrapper",
`icon-placement-${I}`,
`size-${a}`
),
children: _e.cloneElement(h, { ...h.props, size: ce })
}
) : null,
/* @__PURE__ */ n("div", { className: t("indicators", `size-${a}`), children: X ? se : null })
] }),
te ? /* @__PURE__ */ n("ul", { className: t("menu"), ...Q(), children: C.reduce(
(i, r, g) => {
const M = i.itemIndex++, O = W === M;
if (G)
i.itemsToRender.push(
/* @__PURE__ */ N(ze, { children: [
q(r),
r.options ? r.options.map(
(l, oe) => {
const le = d && s(d) === s(l);
return /* @__PURE__ */ n(
"li",
{
className: t(
"item",
O && "highlighted",
le && "selected"
),
...D({
index: M,
item: l
}),
children: S(l)
},
oe
);
}
) : null
] }, g)
);
else {
const l = d && s(d) === s(r);
i.itemsToRender.push(
/* @__PURE__ */ n(
"li",
{
className: t(
"item",
O && "highlighted",
l && "selected"
),
...D({
index: g,
item: r
}),
children: S(r)
},
g
)
);
}
return i;
},
{ itemIndex: 0, itemsToRender: [] }
).itemsToRender }) : null
] });
}
}
);
}
);
export {
Fe as Search
};