welcome-ui
Version:
Customizable design system with react, typescript, tailwindcss and ariakit.
226 lines (225 loc) • 7.49 kB
JavaScript
"use client";
import './Search.css';
import { jsx as t, jsxs as v } from "react/jsx-runtime";
import { D as M } from "./downshift.esm-BtYj0L0Y.js";
import { forwardRef as oe, useState as pe, useCallback as _e, useMemo as de, Fragment as me } from "react";
import { CloseButton as he } from "./CloseButton.js";
import { Icon as ue } from "./Icon.js";
import { c as be } from "./index-B6iGEm-i.js";
import { c as fe } from "./create-event-rXDe5aCQ.js";
import { t as ge } from "./throttle-BDBzFeFj.js";
const we = "_wrapper_5psb0_3", Ne = "_indicators_5psb0_6", ve = "_root_5psb0_34", Re = "_transparent_5psb0_100", Se = "_disabled_5psb0_144", Ie = "_menu_5psb0_165", xe = "_item_5psb0_198", Ce = "_highlighted_5psb0_212", $e = "_selected_5psb0_215", ke = {
wrapper: we,
indicators: Ne,
"dropdown-indicator": "_dropdown-indicator_5psb0_15",
"input-wrapper": "_input-wrapper_5psb0_28",
"icon-placement-right": "_icon-placement-right_5psb0_31",
root: ve,
"icon-placement-left": "_icon-placement-left_5psb0_61",
"variant-danger": "_variant-danger_5psb0_91",
"variant-warning": "_variant-warning_5psb0_94",
"variant-success": "_variant-success_5psb0_97",
transparent: Re,
"size-lg": "_size-lg_5psb0_105",
"size-md": "_size-md_5psb0_111",
"size-sm": "_size-sm_5psb0_117",
"icon-wrapper": "_icon-wrapper_5psb0_123",
disabled: Se,
"icon-placement-left-sm": "_icon-placement-left-sm_5psb0_147",
"icon-placement-left-md": "_icon-placement-left-md_5psb0_150",
"icon-placement-left-lg": "_icon-placement-left-lg_5psb0_153",
"icon-placement-right-sm": "_icon-placement-right-sm_5psb0_156",
"icon-placement-right-md": "_icon-placement-right-md_5psb0_159",
"icon-placement-right-lg": "_icon-placement-right-lg_5psb0_162",
menu: Ie,
"menu-scroller": "_menu-scroller_5psb0_191",
item: xe,
highlighted: Ce,
selected: $e
}, j = "", n = be(ke), ze = M.default || M, De = oe(
({
autoComplete: O = "off",
autoFocus: V,
className: B,
dataTestId: G,
disabled: H,
groupsEnabled: P,
icon: d,
iconPlacement: m = "left",
id: Y,
itemToString: s,
minChars: h = 3,
name: R,
onBlur: q,
onChange: u,
onClick: A,
onFocus: b,
placeholder: J = "Search…",
renderGroupHeader: K,
renderItem: S,
search: I,
size: a = "lg",
throttle: x = 500,
transparent: L,
value: p = j,
variant: f,
...g
}, Q) => {
const U = p ? s(p) : j, [C, r] = pe([]), $ = _e(
async (e) => {
if (h === 0 || (e == null ? void 0 : e.length) >= h) {
const l = await I(e);
r(l || []);
} else
r([]);
},
[h, I]
), k = de(
() => ge($, x, !1),
[$, x]
), w = (e) => {
const l = fe({ name: R, value: e });
u == null || u(e, l);
}, z = (e) => {
e ? w(e) : (w(), r([]));
};
return /* @__PURE__ */ t(
ze,
{
initialInputValue: U,
itemToString: (e) => s(e) || "",
onInputValueChange: k,
onOuterClick: () => {
p || z(), r([]);
},
onSelect: z,
selectedItem: p,
...g,
children: ({
clearSelection: e,
getInputProps: l,
getItemProps: D,
getMenuProps: W,
getRootProps: X,
highlightedIndex: Z,
inputValue: F,
isOpen: T,
selectedItem: _,
toggleMenu: ee
}) => {
const te = () => {
r([]), w(), e();
}, ne = T && C.length > 0, se = /* @__PURE__ */ t("div", { className: n("dropdown-indicator"), children: /* @__PURE__ */ t(he, { animatePresence: !0, onClick: te, title: "Clear" }) }), ie = (i) => {
b == null || b(i), k(""), ee();
}, ce = X(g, { suppressRefError: !0 }), ae = l({
autoComplete: O,
autoFocus: V,
"data-testid": G,
disabled: H,
id: Y,
name: R,
onBlur: q,
onClick: A,
onFocus: ie,
placeholder: J,
ref: Q,
size: a,
tabIndex: 0,
variant: T ? "focused" : f,
...g
});
return /* @__PURE__ */ v("div", { ...ce, className: n("wrapper", "field-input"), children: [
/* @__PURE__ */ v("div", { className: n("input-wrapper"), children: [
/* @__PURE__ */ t(
"input",
{
className: n(
"root",
`size-${a}`,
f && `variant-${f}`,
L && "transparent",
d && `icon-placement-${m}`,
B
),
...ae
}
),
d ? /* @__PURE__ */ t(
"div",
{
className: n(
"icon-wrapper",
`icon-placement-${m}`,
`icon-placement-${m}-${a}`
),
children: /* @__PURE__ */ t(ue, { ...d.props, size: a })
}
) : null,
/* @__PURE__ */ t("div", { className: n("indicators", `size-${a}`), children: F ? se : null })
] }),
ne ? /* @__PURE__ */ t("div", { className: n("menu"), children: /* @__PURE__ */ t("ul", { className: n("menu-scroller"), ...W(), children: C.reduce(
(i, c, N) => {
const y = i.itemIndex++, E = Z === y;
if (P)
i.itemsToRender.push(
/* @__PURE__ */ v(me, { children: [
K(c),
c.options ? c.options.map(
(o, re) => {
const le = _ && s(_) === s(o);
return /* @__PURE__ */ t(
"li",
{
className: n(
"item",
E && "highlighted",
le && "selected"
),
...D({
index: y,
item: o
}),
children: S(o)
},
re
);
}
) : null
] }, N)
);
else {
const o = _ && s(_) === s(c);
i.itemsToRender.push(
/* @__PURE__ */ t(
"li",
{
className: n(
"item",
E && "highlighted",
o && "selected"
),
...D({
index: N,
item: c
}),
children: S(c)
},
N
)
);
}
return i;
},
{ itemIndex: 0, itemsToRender: [] }
).itemsToRender }) }) : null
] });
}
}
);
}
);
De.displayName = "Search";
export {
De as Search,
ke as searchClasses
};