welcome-ui/dist/Search.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as e } from "./jsx-runtime-Bqq1Hxg9.mjs";
import { D as T } from "./downshift.esm-DT64V-tc.mjs";
import ct, { useState as pt, useCallback as ut, useMemo as ft, Fragment as ht } from "react";
import { ClearButton as mt } from "./ClearButton.mjs";
import { IconWrapper as xt } from "./Field.mjs";
import { shouldForwardProp as O, 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-CfVLcVQp.mjs";
import { t as bt } from "./throttle-BDBzFeFj.mjs";
import s, { css as F, th as o } from "@xstyled/styled-components";
import { StyledIcon as Ft } from "./Icon.mjs";
import { o as V } from "./overflow-ellipsis-DGV5Kgt-.mjs";
const A = s.divBox.withConfig({ shouldForwardProp: O })`
  position: relative;
`, It = s.div`
  position: relative;
`, St = s.inputBox.withConfig({ shouldForwardProp: O })(
  ({ iconPlacement: i, size: n, transparent: l, variant: x }) => F`
    position: relative;
    ${wt({ iconPlacement: i, isClearable: !0, size: n, transparent: l, variant: x })};
    ${V};

    br {
      display: none;
    }
  `
), yt = s.ul`
  ${o("defaultFields.select.default")};
  ${o("cards.default")};
  position: absolute;
  color: neutral-90;
  z-index: 2;
  right: 0;
  left: 0;
  margin: 0;
  margin-top: md;
  padding: 0;
  transition: medium;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
`, W = s.li(
  ({ isExisting: i, isHighlighted: n, isSelected: l }) => F`
    color: beige-70;
    ${n && o("defaultFields.select.highlighted")};
    ${l && o("defaultFields.select.selected")};
    ${i && o("defaultFields.select.existing")};
    ${l && n && o("defaultFields.select.selectedAndHighlighted")};
    ${V};
    padding: sm;
    list-style: none;
    text-decoration: none;
    font-size: sm;
    transition: background ${o.transition("medium")};
  `
), Ct = s.div`
  position: absolute;
  padding: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
`, Rt = s.buttonBox(
  ({ isOpen: i, size: n }) => F`
    position: relative;
    height: 100%;
    width: ${o(`defaultFields.sizes.${n}.height`)};
    padding: 0;
    outline: none !important; /* important for firefox */
    appearance: none;
    cursor: pointer;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;

    ${Ft} {
      transform: ${i ? "rotate3d(0, 0, 1, 180deg)" : "rotate3d(0)"};
      transition: medium;
    }

    &:not(:last-child) {
      width: auto;
    }
  `
), H = "", vt = T.default || T, kt = gt(
  ({
    autoComplete: i = "off",
    autoFocus: n,
    dataTestId: l,
    disabled: x,
    groupsEnabled: G,
    icon: u,
    id: L,
    itemToString: r,
    minChars: g = 3,
    name: I,
    onBlur: Y,
    onChange: S,
    onClick: Z,
    onFocus: y,
    placeholder: q = "Search…",
    renderGroupHeader: J,
    renderItem: C,
    search: R,
    size: j = "md",
    throttle: v = 500,
    value: f = H,
    variant: K,
    ...w
  }, Q) => {
    const U = f ? r(f) : H, [k, c] = pt([]), D = ut(
      async (t) => {
        if (g === 0 || (t == null ? void 0 : t.length) >= g) {
          const p = await R(t);
          c(p || []);
        } else
          c([]);
      },
      [g, R]
    ), E = ft(
      () => bt(D, v, !1),
      [D, v]
    ), $ = (t) => {
      const p = jt({ name: I, value: t });
      S && S(t, p);
    }, _ = (t) => {
      t ? $(t) : ($(), c([]));
    }, X = () => {
      f || _(), c([]);
    }, tt = (t) => r(t) || "";
    return /* @__PURE__ */ e.jsx(
      vt,
      {
        initialInputValue: U,
        itemToString: tt,
        onInputValueChange: E,
        onOuterClick: X,
        onSelect: _,
        selectedItem: f,
        ...w,
        children: ({
          clearSelection: t,
          getInputProps: p,
          getItemProps: z,
          getMenuProps: et,
          getRootProps: nt,
          highlightedIndex: B,
          inputValue: ot,
          isOpen: M,
          selectedItem: h,
          toggleMenu: it
        }) => {
          const st = () => {
            c([]), $(), t();
          }, lt = M && k.length > 0, rt = /* @__PURE__ */ e.jsx(Rt, { as: "div", size: j, children: /* @__PURE__ */ e.jsx(mt, { onClick: st }) }), at = p({
            autoComplete: i,
            autoFocus: n,
            "data-testid": l,
            disabled: x,
            iconPlacement: !!u && "left",
            id: L,
            name: I,
            onBlur: Y,
            onClick: Z,
            onFocus: (a) => {
              y && y(a), E(""), it();
            },
            placeholder: q,
            ref: Q,
            size: j,
            tabIndex: 0,
            variant: M ? "focused" : K,
            ...w
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
          }), P = $t[j];
          return /* @__PURE__ */ e.jsxs(A, { ...nt(w), children: [
            /* @__PURE__ */ e.jsxs(It, { children: [
              /* @__PURE__ */ e.jsx(St, { ...at }),
              u ? /* @__PURE__ */ e.jsx(xt, { iconPlacement: "left", size: P, children: ct.cloneElement(u, { ...u.props, size: P }) }) : null,
              /* @__PURE__ */ e.jsx(Ct, { children: ot ? rt : null })
            ] }),
            lt ? /* @__PURE__ */ e.jsx(yt, { ...et(), children: k.reduce(
              (a, d, m) => (G ? a.itemsToRender.push(
                /* @__PURE__ */ e.jsxs(ht, { children: [
                  J(d),
                  d.options ? d.options.map(
                    (b, dt) => {
                      const N = a.itemIndex++;
                      return /* @__PURE__ */ e.jsx(
                        W,
                        {
                          ...z({
                            index: N,
                            isSelected: h && r(h) === r(b),
                            item: b
                          }),
                          isHighlighted: B === N,
                          children: C(b)
                        },
                        dt
                      );
                    }
                  ) : null
                ] }, m)
              ) : a.itemsToRender.push(
                /* @__PURE__ */ e.jsx(
                  W,
                  {
                    ...z({
                      index: m,
                      isSelected: h && r(h) === r(d),
                      item: d
                    }),
                    isHighlighted: B === m,
                    children: C(d)
                  },
                  m
                )
              ), a),
              { itemIndex: 0, itemsToRender: [] }
            ).itemsToRender }) : null
          ] });
        }
      }
    );
  }
);
kt.displayName = "Search";
const At = A;
export {
  kt as Search,
  At as StyledSearch
};