welcome-ui 8.0.0 → 8.1.0-alpha.0

package/dist/Search.mjs

@@ -1,32 +1,33 @@
 "use client";
-import t, { useState as de, useCallback as me, useMemo as pe, Fragment as fe } from "react";
-import { D as W } from "./downshift.esm-CEHW4VDy.mjs";
-import { c as ue } from "./create-event-rXDe5aCQ.mjs";
-import { d as he, F as ge } from "./field-styles-DLIhqG_8.mjs";
-import { t as Ee } from "./throttle-BDBzFeFj.mjs";
-import a, { css as F, th as o } from "@xstyled/styled-components";
-import { o as V } from "./overflow-ellipsis-DGV5Kgt-.mjs";
-import { shouldForwardProp as j, forwardRef as we } from "./System.mjs";
-import { StyledIcon as ye } from "./Icon.mjs";
-import { ClearButton as $e } from "./ClearButton.mjs";
-import { IconWrapper as be } from "./Field.mjs";
-const A = a.divBox.withConfig({ shouldForwardProp: j })`
+import { j as e } from "./jsx-runtime-B7I4PJ0H.mjs";
+import { D as W } from "./downshift.esm-B7Jil1wW.mjs";
+import ct, { useState as pt, useCallback as ft, useMemo as mt, Fragment as ht } from "react";
+import { ClearButton as ut } from "./ClearButton.mjs";
+import { IconWrapper as xt } from "./Field.mjs";
+import { shouldForwardProp as A, forwardRef as gt } from "./System.mjs";
+import { c as jt } from "./create-event-rXDe5aCQ.mjs";
+import { d as wt, F as $t } from "./field-styles-BVlRlvuu.mjs";
+import { t as bt } from "./throttle-CW18pWlW.mjs";
+import s, { css as F, th as i } from "@xstyled/styled-components";
+import { StyledIcon as It } from "./Icon.mjs";
+import { o as L } from "./overflow-ellipsis-DGV5Kgt-.mjs";
+const Y = s.divBox.withConfig({ shouldForwardProp: A })`
   position: relative;
-`, Fe = a.div`
+`, St = s.div`
   position: relative;
-`, Ie = a.inputBox.withConfig({ shouldForwardProp: j })(
-  ({ iconPlacement: i, size: n, transparent: s, variant: g }) => F`
+`, yt = s.inputBox.withConfig({ shouldForwardProp: A })(
+  ({ iconPlacement: n, size: o, transparent: l, variant: x }) => F`
     position: relative;
-    ${he({ iconPlacement: i, size: n, variant: g, transparent: s, isClearable: !0 })};
-    ${V};
+    ${wt({ iconPlacement: n, isClearable: !0, size: o, transparent: l, variant: x })};
+    ${L};
 
     br {
       display: none;
     }
   `
-), Se = a.ul`
-  ${o("defaultFields.select.default")};
-  ${o("cards.default")};
+), Ft = s.ul`
+  ${i("defaultFields.select.default")};
+  ${i("cards.default")};
   position: absolute;
   color: neutral-90;
   z-index: 2;
@@ -38,32 +39,32 @@ const A = a.divBox.withConfig({ shouldForwardProp: j })`
   transition: medium;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
-`, H = a.li(
-  ({ isExisting: i, isHighlighted: n, isSelected: s }) => F`
+`, O = s.li(
+  ({ isExisting: n, isHighlighted: o, isSelected: l }) => F`
     color: beige-70;
-    ${n && o("defaultFields.select.highlighted")};
-    ${s && o("defaultFields.select.selected")};
-    ${i && o("defaultFields.select.existing")};
-    ${s && n && o("defaultFields.select.selectedAndHighlighted")};
-    ${V};
+    ${o && i("defaultFields.select.highlighted")};
+    ${l && i("defaultFields.select.selected")};
+    ${n && i("defaultFields.select.existing")};
+    ${l && o && i("defaultFields.select.selectedAndHighlighted")};
+    ${L};
     padding: sm;
     list-style: none;
     text-decoration: none;
     font-size: sm;
-    transition: background ${o.transition("medium")};
+    transition: background ${i.transition("medium")};
   `
-), ke = a.div`
+), vt = s.div`
   position: absolute;
   padding: 0;
   top: 0;
   bottom: 0;
   right: 0;
   display: flex;
-`, xe = a.buttonBox(
-  ({ isOpen: i, size: n }) => F`
+`, Rt = s.buttonBox(
+  ({ isOpen: n, size: o }) => F`
     position: relative;
     height: 100%;
-    width: ${o(`defaultFields.sizes.${n}.height`)};
+    width: ${i(`defaultFields.sizes.${o}.height`)};
     padding: 0;
     outline: none !important; /* important for firefox */
     appearance: none;
@@ -74,8 +75,8 @@ const A = a.divBox.withConfig({ shouldForwardProp: j })`
     align-items: center;
     justify-content: center;
 
-    ${ye} {
-      transform: ${i ? "rotate3d(0, 0, 1, 180deg)" : "rotate3d(0)"};
+    ${It} {
+      transform: ${n ? "rotate3d(0, 0, 1, 180deg)" : "rotate3d(0)"};
       transition: medium;
     }
 
@@ -83,141 +84,154 @@ const A = a.divBox.withConfig({ shouldForwardProp: j })`
       width: auto;
     }
   `
-), O = "", Ce = W.default || W, ve = we(
+), V = "", kt = W.default || W, Ct = gt(
   ({
-    autoComplete: i = "off",
-    autoFocus: n,
-    dataTestId: s,
-    disabled: g,
-    groupsEnabled: G,
-    icon: p,
-    id: L,
-    itemToString: l,
-    minChars: E = 3,
-    name: I,
-    onBlur: Y,
-    onChange: S,
-    onClick: Z,
-    onFocus: k,
-    placeholder: q = "Search…",
-    renderGroupHeader: J,
-    renderItem: x,
-    search: C,
-    size: w = "md",
-    throttle: v = 500,
-    value: f = O,
-    variant: K,
-    ...y
-  }, Q) => {
-    const U = f ? l(f) : O, [R, d] = de([]), D = me(
-      async (e) => {
-        if (E === 0 || (e == null ? void 0 : e.length) >= E) {
-          const m = await C(e);
-          d(m || []);
+    autoComplete: n = "off",
+    autoFocus: o,
+    dataTestId: l,
+    disabled: x,
+    groupsEnabled: Z,
+    icon: f,
+    id: q,
+    itemToString: a,
+    minChars: g = 3,
+    name: v,
+    onBlur: J,
+    onChange: j,
+    onClick: K,
+    onFocus: w,
+    placeholder: Q = "Search…",
+    renderGroupHeader: $,
+    renderItem: R,
+    search: k,
+    size: b = "md",
+    throttle: C = 500,
+    value: m = V,
+    variant: U,
+    ...I
+  }, X) => {
+    const H = m ? a(m) : V, [D, c] = pt([]), E = ft(
+      async (t) => {
+        if (g === 0 || (t == null ? void 0 : t.length) >= g) {
+          const p = await k(t);
+          c(p || []);
         } else
-          d([]);
+          c([]);
       },
+      [g, k]
+    ), B = mt(
+      () => bt((...t) => E(t[0]), C, !1),
       [E, C]
-    ), _ = pe(
-      () => Ee(D, v, !1),
-      [D, v]
-    ), $ = (e) => {
-      const m = ue({ name: I, value: e });
-      S && S(e, m);
-    }, z = (e) => {
-      e ? $(e) : ($(), d([]));
-    }, X = () => {
-      f || z(), d([]);
-    }, ee = (e) => l(e) || "";
-    return /* @__PURE__ */ t.createElement(
-      Ce,
+    ), S = (t) => {
+      const p = jt({ name: v, value: t });
+      j == null || j(t, p);
+    }, _ = (t) => {
+      t ? S(t) : (S(), c([]));
+    }, G = () => {
+      m || _(), c([]);
+    }, tt = (t) => a(t) || "";
+    return /* @__PURE__ */ e.jsx(
+      kt,
       {
-        initialInputValue: U,
-        itemToString: ee,
-        onInputValueChange: _,
-        onOuterClick: X,
-        onSelect: z,
-        selectedItem: f,
-        ...y
-      },
-      ({
-        clearSelection: e,
-        getInputProps: m,
-        getItemProps: B,
-        getMenuProps: te,
-        getRootProps: ne,
-        highlightedIndex: M,
-        inputValue: oe,
-        isOpen: P,
-        selectedItem: u,
-        toggleMenu: ie
-      }) => {
-        const ae = () => {
-          d([]), $(), e();
-        }, se = P && R.length > 0, le = /* @__PURE__ */ t.createElement(xe, { as: "div", size: w }, /* @__PURE__ */ t.createElement($e, { onClick: ae })), re = m({
-          autoComplete: i,
-          autoFocus: n,
-          "data-testid": s,
-          disabled: g,
-          iconPlacement: !!p && "left",
-          id: L,
-          name: I,
-          onBlur: Y,
-          onClick: Z,
-          onFocus: (r) => {
-            k && k(r), _(""), ie();
-          },
-          placeholder: q,
-          ref: Q,
-          size: w,
-          tabIndex: 0,
-          variant: P ? "focused" : K,
-          ...y
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        }), N = ge[w];
-        return /* @__PURE__ */ t.createElement(A, { ...ne(y) }, /* @__PURE__ */ t.createElement(Fe, null, /* @__PURE__ */ t.createElement(Ie, { ...re }), p && /* @__PURE__ */ t.createElement(be, { iconPlacement: "left", size: N }, t.cloneElement(p, { ...p.props, size: N })), /* @__PURE__ */ t.createElement(ke, null, oe && le)), se && /* @__PURE__ */ t.createElement(Se, { ...te() }, R.reduce(
-          (r, c, h) => (G ? r.itemsToRender.push(
-            // eslint-disable-next-line react/no-array-index-key
-            /* @__PURE__ */ t.createElement(fe, { key: h }, J(c), c.options && c.options.map((b, ce) => {
-              const T = r.itemIndex++;
-              return /* @__PURE__ */ t.createElement(
-                H,
-                {
-                  key: ce,
-                  ...B({
-                    index: T,
-                    isSelected: u && l(u) === l(b),
-                    item: b
-                  }),
-                  isHighlighted: M === T
-                },
-                x(b)
-              );
-            }))
-          ) : r.itemsToRender.push(
-            /* @__PURE__ */ t.createElement(
-              H,
-              {
-                key: h,
-                ...B({
-                  index: h,
-                  isSelected: u && l(u) === l(c),
-                  item: c
-                }),
-                isHighlighted: M === h
-              },
-              x(c)
-            )
-          ), r),
-          { itemsToRender: [], itemIndex: 0 }
-        ).itemsToRender));
+        initialInputValue: H,
+        itemToString: tt,
+        onInputValueChange: B,
+        onOuterClick: G,
+        onSelect: _,
+        selectedItem: m,
+        ...I,
+        children: ({
+          clearSelection: t,
+          getInputProps: p,
+          getItemProps: z,
+          getMenuProps: et,
+          getRootProps: ot,
+          highlightedIndex: M,
+          inputValue: it,
+          isOpen: P,
+          selectedItem: h,
+          toggleMenu: nt
+        }) => {
+          const st = P && D.length > 0, lt = () => {
+            c([]), S(), t();
+          }, at = /* @__PURE__ */ e.jsx(Rt, { as: "div", size: b, children: /* @__PURE__ */ e.jsx(ut, { onClick: lt }) }), rt = p({
+            autoComplete: n,
+            autoFocus: o,
+            "data-testid": l,
+            disabled: x,
+            iconPlacement: !!f && "left",
+            id: q,
+            name: v,
+            onBlur: J,
+            onClick: K,
+            onFocus: (r) => {
+              w == null || w(r), B(""), nt();
+            },
+            placeholder: Q,
+            ref: X,
+            size: b,
+            tabIndex: 0,
+            variant: P ? "focused" : U,
+            ...I
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          }), N = $t[b];
+          return /* @__PURE__ */ e.jsxs(Y, { ...ot(I), children: [
+            /* @__PURE__ */ e.jsxs(St, { children: [
+              /* @__PURE__ */ e.jsx(yt, { ...rt }),
+              f && /* @__PURE__ */ e.jsx(xt, { iconPlacement: "left", size: N, children: ct.cloneElement(f, { ...f.props, size: N }) }),
+              /* @__PURE__ */ e.jsx(vt, { children: it && at })
+            ] }),
+            st && /* @__PURE__ */ e.jsx(Ft, { ...et(), children: D.reduce(
+              (r, d, u) => (Z ? r.itemsToRender.push(
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                /* @__PURE__ */ e.jsxs(ht, { children: [
+                  $ == null ? void 0 : $(d),
+                  d.options && d.options.map((y, dt) => {
+                    const T = r.itemIndex++;
+                    return /* @__PURE__ */ e.jsx(
+                      O,
+                      {
+                        ...z({
+                          index: T,
+                          isSelected: !!(h && a(h) === a(y)),
+                          item: y
+                        }),
+                        isHighlighted: M === T,
+                        children: R(y)
+                      },
+                      dt
+                    );
+                  })
+                ] }, u)
+              ) : r.itemsToRender.push(
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                /* @__PURE__ */ e.jsx(
+                  O,
+                  {
+                    ...z({
+                      index: u,
+                      isSelected: !!(h && a(h) === a(d)),
+                      item: d
+                    }),
+                    isHighlighted: M === u,
+                    children: R(d)
+                  },
+                  u
+                )
+              ), r),
+              { itemIndex: 0, itemsToRender: [] }
+            ).itemsToRender })
+          ] });
+        }
       }
     );
   }
 );
-ve.displayName = "Search";
-const Ve = A;
+Ct.displayName = "Search";
+const Lt = Y;
 export {
-  ve as Search,
-  Ve as StyledSearch
+  Ct as Search,
+  Lt as StyledSearch
 };