@purpur/library 9.10.0 → 10.0.0

package/dist/dropdown-CrufJnb4.mjs

@@ -0,0 +1,945 @@
+import { jsxs as ee, jsx as s, Fragment as ke } from "react/jsx-runtime";
+import { useState as xe, forwardRef as $e, useId as ye, useRef as fe, useCallback as Oe, useEffect as Ke } from "react";
+import { L as ue } from "./listbox-CtV-Vcmy.mjs";
+import { t as Ve } from "./use-autocomplete.es-CKb0RHKG.mjs";
+import { C as Se } from "./checkbox-DaRtZXrE.mjs";
+import { a as Ie } from "./dismissable-chip-group-DMNU7g5e.mjs";
+import { F as He } from "./field-error-text-CBSX8dGx.mjs";
+import { F as Me } from "./field-helper-text-C5ee4SFV.mjs";
+import { r as Ue } from "./check-circle-filled.es-umBwOv5_.mjs";
+import { l as Ye } from "./chevron-down.es-PCIIj6oG.mjs";
+import { L as qe } from "./label-7sJe5-pX.mjs";
+import { a as ze } from "./spinner-DRQN6YdK.mjs";
+import { c as je } from "./bind-CU-R61T-.mjs";
+const ie = (e) => typeof e.label == "string" ? e.label : e.value ?? "", Ge = {
+  "purpur-dropdown": "_purpur-dropdown_1solp_1",
+  "purpur-dropdown--negative": "_purpur-dropdown--negative_1solp_14",
+  "purpur-dropdown__label": "_purpur-dropdown__label_1solp_17",
+  "purpur-dropdown__field-row": "_purpur-dropdown__field-row_1solp_22",
+  "purpur-dropdown__frame": "_purpur-dropdown__frame_1solp_26",
+  "purpur-dropdown__frame--negative": "_purpur-dropdown__frame--negative_1solp_33",
+  "purpur-dropdown__trigger-container": "_purpur-dropdown__trigger-container_1solp_36",
+  "purpur-dropdown__chip-group": "_purpur-dropdown__chip-group_1solp_48",
+  "purpur-dropdown__trigger-container--has-tags": "_purpur-dropdown__trigger-container--has-tags_1solp_52",
+  "purpur-dropdown__trigger-container--disabled": "_purpur-dropdown__trigger-container--disabled_1solp_55",
+  "purpur-dropdown__trigger-container--readonly": "_purpur-dropdown__trigger-container--readonly_1solp_55",
+  "purpur-dropdown__trigger-container--negative": "_purpur-dropdown__trigger-container--negative_1solp_62",
+  "purpur-dropdown__trigger-container--error": "_purpur-dropdown__trigger-container--error_1solp_65",
+  "purpur-dropdown__trigger-container--is-valid": "_purpur-dropdown__trigger-container--is-valid_1solp_68",
+  "purpur-dropdown__input": "_purpur-dropdown__input_1solp_71",
+  "purpur-dropdown__trigger": "_purpur-dropdown__trigger_1solp_36",
+  "purpur-dropdown__trigger--placeholder": "_purpur-dropdown__trigger--placeholder_1solp_119",
+  "purpur-dropdown__trigger--is-valid": "_purpur-dropdown__trigger--is-valid_1solp_122",
+  "purpur-dropdown__trigger--disabled": "_purpur-dropdown__trigger--disabled_1solp_125",
+  "purpur-dropdown__trigger--readonly": "_purpur-dropdown__trigger--readonly_1solp_129",
+  "purpur-dropdown__trigger--negative": "_purpur-dropdown__trigger--negative_1solp_133",
+  "purpur-dropdown__trigger-text": "_purpur-dropdown__trigger-text_1solp_146",
+  "purpur-dropdown__combobox-container": "_purpur-dropdown__combobox-container_1solp_152",
+  "purpur-dropdown__combobox-container--disabled": "_purpur-dropdown__combobox-container--disabled_1solp_162",
+  "purpur-dropdown__combobox-container--readonly": "_purpur-dropdown__combobox-container--readonly_1solp_169",
+  "purpur-dropdown__combobox-container--error": "_purpur-dropdown__combobox-container--error_1solp_176",
+  "purpur-dropdown__combobox-container--is-valid": "_purpur-dropdown__combobox-container--is-valid_1solp_179",
+  "purpur-dropdown__combobox-container--negative": "_purpur-dropdown__combobox-container--negative_1solp_182",
+  "purpur-dropdown__input--negative": "_purpur-dropdown__input--negative_1solp_221",
+  "purpur-dropdown__chip-group--select": "_purpur-dropdown__chip-group--select_1solp_244",
+  "purpur-dropdown__chip-group-more": "_purpur-dropdown__chip-group-more_1solp_250",
+  "purpur-dropdown__end-adornments": "_purpur-dropdown__end-adornments_1solp_261",
+  "purpur-dropdown__chevron-icon": "_purpur-dropdown__chevron-icon_1solp_272",
+  "purpur-dropdown__chevron-icon--open": "_purpur-dropdown__chevron-icon--open_1solp_277",
+  "purpur-dropdown__chevron-icon--disabled": "_purpur-dropdown__chevron-icon--disabled_1solp_280",
+  "purpur-dropdown__chevron-icon--readonly": "_purpur-dropdown__chevron-icon--readonly_1solp_283",
+  "purpur-dropdown__chevron-icon--negative": "_purpur-dropdown__chevron-icon--negative_1solp_286",
+  "purpur-dropdown__valid-icon": "_purpur-dropdown__valid-icon_1solp_289",
+  "purpur-dropdown__listbox": "_purpur-dropdown__listbox_1solp_292",
+  "purpur-dropdown__checkbox-item-multiple": "_purpur-dropdown__checkbox-item-multiple_1solp_302",
+  "purpur-dropdown__checkbox-container": "_purpur-dropdown__checkbox-container_1solp_305",
+  "purpur-dropdown__checkbox-container--disabled": "_purpur-dropdown__checkbox-container--disabled_1solp_312",
+  "purpur-dropdown__select-all-child": "_purpur-dropdown__select-all-child_1solp_315"
+}, m = je.bind(Ge), r = "purpur-dropdown", De = ({
+  fieldId: e,
+  htmlForSuffix: t,
+  label: i,
+  getTestId: l,
+  disabled: n,
+  negative: u,
+  required: h
+}) => i ? /* @__PURE__ */ ee(
+  qe,
+  {
+    htmlFor: t ? `${e}-${t}` : e,
+    className: m(`${r}__label`),
+    "data-testid": l("label"),
+    disabled: n,
+    negative: u,
+    children: [
+      h && /* @__PURE__ */ s("span", { "aria-hidden": !0, children: "*" }),
+      i
+    ]
+  }
+) : null, Ne = ({
+  getTestId: e,
+  loading: t,
+  disabled: i,
+  negative: l,
+  isValid: n,
+  isOpen: u,
+  readOnly: h,
+  showChevronOpen: w
+}) => /* @__PURE__ */ s("span", { className: m(`${r}__end-adornments`), children: t ? /* @__PURE__ */ s(
+  ze,
+  {
+    disabled: i,
+    size: "xxs",
+    negative: l,
+    "data-testid": e("spinner")
+  }
+) : /* @__PURE__ */ ee(ke, { children: [
+  n && /* @__PURE__ */ s(
+    Ue,
+    {
+      "data-testid": e("valid-icon"),
+      className: m(`${r}__valid-icon`)
+    }
+  ),
+  /* @__PURE__ */ s(
+    Ye,
+    {
+      className: m(`${r}__chevron-icon`, {
+        [`${r}__chevron-icon--open`]: w && u,
+        [`${r}__chevron-icon--disabled`]: i,
+        [`${r}__chevron-icon--readonly`]: h && !i,
+        [`${r}__chevron-icon--is-valid`]: n,
+        [`${r}__chevron-icon--negative`]: l
+      }),
+      "data-testid": e("dropdown-icon"),
+      size: "sm"
+    }
+  )
+] }) }), Ce = 6, Le = ({
+  selectedItems: e,
+  getTestId: t,
+  disabled: i,
+  negative: l,
+  onRemove: n,
+  isSelect: u,
+  moreOptionsText: h,
+  removeOptionAriaLabel: w
+}) => {
+  if (!e.length) return null;
+  const p = h !== void 0 && e.length > Ce ? e.slice(-Ce) : e, b = e.length - p.length;
+  return /* @__PURE__ */ ee(
+    Ie,
+    {
+      className: m(`${r}__chip-group`, {
+        [`${r}__chip-group--select`]: u
+      }),
+      negative: l,
+      "data-testid": t("tags"),
+      size: "sm",
+      children: [
+        p.map((d) => /* @__PURE__ */ s(
+          Ie.Item,
+          {
+            id: d.id,
+            "data-testid": t(`tag-${d.id}`),
+            "aria-label": w ? `${w} ${ie(d)}` : ie(d),
+            onDismiss: () => {
+              n(d);
+            },
+            disabled: i || d.disabled,
+            children: d.label
+          },
+          d.id
+        )),
+        b > 0 && /* @__PURE__ */ s(
+          "li",
+          {
+            className: m(`${r}__chip-group-more`),
+            "data-testid": t("tags-more"),
+            children: `+${b} ${h}`
+          }
+        )
+      ]
+    }
+  );
+}, Ae = ({
+  errorText: e,
+  helperText: t,
+  helperTextId: i,
+  negative: l
+}) => /* @__PURE__ */ ee(ke, { children: [
+  e && /* @__PURE__ */ s(He, { negative: l, children: e }),
+  t && !e && /* @__PURE__ */ s(Me, { id: i, negative: l, children: t })
+] }), ne = "__purpur-dropdown-select-all__", Ee = ({
+  selectAllLabel: e,
+  multiple: t,
+  options: i,
+  selectedItems: l
+}) => !e || !t || i.filter((w) => !w.disabled).length === 0 ? !1 : !i.filter((w) => w.disabled).some(
+  (w) => !l.some((C) => C.id === w.id)
+), Re = ({
+  optionsToShow: e,
+  getListboxItemProps: t,
+  multiple: i,
+  negative: l,
+  fieldId: n,
+  noOptionsText: u,
+  selectAllLabel: h,
+  selectedItems: w = []
+}) => {
+  if (u !== void 0 && !e.length)
+    return /* @__PURE__ */ s(ue.Item, { noninteractive: !0, children: u });
+  const C = e[0]?.id === ne;
+  let p = !1;
+  if (C) {
+    const d = e.filter((a) => a.id !== ne).filter((a) => !a.disabled), _ = d.filter(
+      (a) => w.some((y) => y.id === a.id)
+    ).length, $ = d.length > 0 && _ === d.length, f = w.length > 0;
+    p = $ ? !0 : f ? "indeterminate" : !1;
+  }
+  return e.map((b, d) => {
+    const { key: _, selected: $, ...f } = t(b, d);
+    return b.id === ne ? /* @__PURE__ */ s(
+      ue.Item,
+      {
+        ...f,
+        "aria-selected": p === !0,
+        className: m(
+          `${r}__checkbox-item-multiple`,
+          `${r}__select-all-item`
+        ),
+        hideSelectedIcon: !0,
+        children: /* @__PURE__ */ s("span", { className: m(`${r}__checkbox-container`), children: /* @__PURE__ */ s(
+          Se,
+          {
+            id: `${n}-checkbox-select-all`,
+            checked: p,
+            label: h,
+            negative: l,
+            "aria-hidden": !0
+          }
+        ) })
+      },
+      _
+    ) : i ? /* @__PURE__ */ s(
+      ue.Item,
+      {
+        ...f,
+        className: m(`${r}__checkbox-item-multiple`, {
+          [`${r}__select-all-child`]: C
+        }),
+        selected: !!$,
+        hideSelectedIcon: !0,
+        children: /* @__PURE__ */ s(
+          "span",
+          {
+            className: m(`${r}__checkbox-container`, {
+              [`${r}__checkbox-container--disabled`]: b.disabled
+            }),
+            children: /* @__PURE__ */ s(
+              Se,
+              {
+                id: `${n}-checkbox-${b.id}`,
+                checked: !!$,
+                label: b.label,
+                negative: l,
+                "aria-hidden": !0,
+                disabled: b.disabled
+              }
+            )
+          }
+        )
+      },
+      _
+    ) : /* @__PURE__ */ s(ue.Item, { ...f, selected: !!$, children: /* @__PURE__ */ s("div", { children: b.label }) }, _);
+  });
+}, We = (e, t, i) => {
+  if (i)
+    return e.filter((n) => i(t, n));
+  if (!t) return e;
+  const l = t.toUpperCase().split(" ");
+  return e.filter(
+    (n) => l.every(
+      (u) => (n.value || (typeof n.label == "string" ? n.label : "")).toUpperCase().includes(u)
+    )
+  );
+}, Te = ({
+  options: e,
+  searchTerm: t,
+  filterOption: i,
+  selectedOption: l,
+  multiple: n
+}) => !n && l && ie(l) === t ? e : We(e, t, i), Be = ({
+  controlledInputValue: e,
+  defaultInputValue: t,
+  selectedOption: i,
+  onInputChange: l
+}) => {
+  const [n, u] = xe(
+    (typeof e == "string" ? e : t ?? (i ? ie(i) : void 0)) ?? ""
+  );
+  return {
+    displayInputValue: typeof e == "string" ? e : n,
+    populateInputField: (C) => {
+      l?.(C), u(C);
+    }
+  };
+}, Fe = $e((e, t) => {
+  const {
+    id: i,
+    label: l,
+    options: n,
+    className: u,
+    errorText: h,
+    helperText: w,
+    placeholder: C,
+    negative: p = !1,
+    readOnly: b = !1,
+    disabled: d = !1,
+    required: _ = !1,
+    valid: $,
+    loading: f,
+    multiple: a = !1,
+    selectedOption: y,
+    selectedOptions: N = [],
+    onSelect: S,
+    openOnFocus: se = !1,
+    listboxMaxHeight: A,
+    listboxLabel: _e,
+    filterOption: F,
+    inputValue: re,
+    defaultInputValue: U,
+    onInputChange: g,
+    noOptionsText: oe,
+    highlightFirstOption: P = !1,
+    selectAllLabel: k,
+    moreOptionsText: X,
+    removeOptionAriaLabel: E,
+    ["data-testid"]: I
+  } = e, Y = ye(), K = i ?? Y, O = (c) => I ? `${I}-${c}` : void 0, q = !!$ && !h, z = `${K}-helper-text`, x = a ? N : y ? [y] : [], { displayInputValue: j, populateInputField: J } = Be({
+    controlledInputValue: re,
+    defaultInputValue: U,
+    selectedOption: y,
+    onInputChange: g
+  }), le = Te({
+    options: n,
+    searchTerm: j,
+    filterOption: F,
+    selectedOption: y,
+    multiple: a
+  }), de = Ee({
+    selectAllLabel: k,
+    multiple: a,
+    options: n,
+    selectedItems: x
+  }), te = de && (de && !j) ? [{ id: ne, label: k }, ...le] : le, V = () => {
+    const c = n.filter((D) => !D.disabled);
+    if (c.every(
+      (D) => x.some((B) => B.id === D.id)
+    )) {
+      const D = x.filter((B) => B.disabled);
+      S?.(void 0, D);
+    } else {
+      const B = [...x.filter((ve) => ve.disabled), ...c];
+      S?.(void 0, B);
+    }
+    J("");
+  }, ge = (c) => {
+    if (c.id === ne) {
+      V();
+      return;
+    }
+    if (a) {
+      const D = x.some((B) => B.id === c.id) ? x.filter((B) => B.id !== c.id) : [...x, c];
+      S?.(c, D), J("");
+    } else
+      S?.(c, [c]), J(ie(c));
+  }, {
+    rootRef: Q,
+    inputRef: Z,
+    inputProps: G,
+    listboxProps: ae,
+    getListboxItemProps: he,
+    isOpen: v,
+    openListbox: M,
+    anchorStyle: R
+  } = Ve({
+    id: K,
+    // useAutocomplete only reads id/disabled, never label's value, so this is safe even though
+    // DropdownOption.label can be a ReactNode instead of the string it's typed to require.
+    options: te,
+    listboxLabel: _e || l || "Options",
+    selectedOption: a ? void 0 : y,
+    disabled: d,
+    readOnly: b,
+    openOnFocus: se,
+    listboxMaxHeight: A,
+    highlightFirstOption: P,
+    closeOnSelect: !a,
+    noOptionsText: oe,
+    negative: p,
+    onSelect: ge,
+    "data-testid": I
+  }), W = (c) => {
+    Q.current = c, typeof t == "function" ? t(c) : t && (t.current = c);
+  }, be = (c, L) => {
+    const D = he(c, L);
+    if (a) {
+      const B = x.some((ve) => ve.id === c.id);
+      return { ...D, selected: B, "aria-selected": B };
+    }
+    return D;
+  }, o = (c) => {
+    const L = x.filter((D) => D.id !== c.id);
+    S?.(c, L);
+  }, T = (c) => {
+    if (a && c.key === "Backspace" && c.currentTarget.value === "" && x.length > 0) {
+      for (let L = x.length - 1; L >= 0; L--)
+        if (!x[L].disabled) {
+          o(x[L]);
+          break;
+        }
+    }
+    G?.onKeyDown?.(c);
+  }, ce = (c) => {
+    J(c.target.value), v || M();
+  }, H = (c) => {
+    if (d || b) return;
+    const L = c.target;
+    if (L === Z.current || L.closest("button"))
+      return;
+    const D = Z.current;
+    D?.dispatchEvent(new MouseEvent("mousedown", { bubbles: !0 })), D?.focus();
+  }, we = a && !!k && n.length > 0 && n.every((c) => x.some((L) => L.id === c.id)), pe = m(r, u, {
+    [`${r}--negative`]: p
+  });
+  return /* @__PURE__ */ ee("div", { ref: W, className: pe, children: [
+    /* @__PURE__ */ s(
+      De,
+      {
+        fieldId: K,
+        htmlForSuffix: "input",
+        label: l,
+        getTestId: O,
+        disabled: d,
+        negative: p,
+        required: _
+      }
+    ),
+    /* @__PURE__ */ s("div", { className: m(`${r}__field-row`), children: /* @__PURE__ */ ee(
+      "div",
+      {
+        className: m(`${r}__combobox-container`, {
+          [`${r}__combobox-container--error`]: !!h,
+          [`${r}__combobox-container--is-valid`]: q,
+          [`${r}__combobox-container--negative`]: p,
+          [`${r}__combobox-container--disabled`]: d,
+          [`${r}__combobox-container--readonly`]: b && !d
+        }),
+        style: R,
+        onClick: H,
+        children: [
+          a && !we && /* @__PURE__ */ s(
+            Le,
+            {
+              selectedItems: x,
+              getTestId: O,
+              disabled: d,
+              negative: p,
+              onRemove: o,
+              moreOptionsText: X,
+              removeOptionAriaLabel: E
+            }
+          ),
+          /* @__PURE__ */ s(
+            "input",
+            {
+              ...G,
+              ref: Z,
+              id: `${K}-input`,
+              "data-testid": O("input"),
+              onKeyDown: T,
+              onChange: ce,
+              value: we && !j ? k : j,
+              placeholder: C,
+              className: m(`${r}__input`, {
+                [`${r}__input--negative`]: p
+              }),
+              "aria-describedby": z,
+              "aria-invalid": !!h,
+              disabled: d,
+              readOnly: b
+            }
+          ),
+          /* @__PURE__ */ s(
+            Ne,
+            {
+              getTestId: O,
+              loading: f,
+              disabled: d,
+              negative: p,
+              isValid: q,
+              isOpen: v,
+              showChevronOpen: !0
+            }
+          ),
+          /* @__PURE__ */ s(
+            "span",
+            {
+              className: m(`${r}__frame`, {
+                [`${r}__frame--negative`]: p
+              })
+            }
+          )
+        ]
+      }
+    ) }),
+    v && /* @__PURE__ */ s(ue, { ...ae, className: m(`${r}__listbox`), children: Re({
+      optionsToShow: te,
+      getListboxItemProps: be,
+      multiple: a,
+      negative: p,
+      fieldId: K,
+      noOptionsText: oe,
+      selectAllLabel: k,
+      selectedItems: x
+    }) }),
+    /* @__PURE__ */ s(
+      Ae,
+      {
+        errorText: h,
+        helperText: w,
+        helperTextId: z,
+        negative: p
+      }
+    )
+  ] });
+});
+Fe.displayName = "DropdownCombobox";
+const Xe = ({
+  options: e,
+  highlightFirstOption: t
+}) => {
+  const i = fe(null), l = fe({}), [n, u] = xe(
+    t ? e[0] : void 0
+  ), h = (_) => {
+    if (_) {
+      const $ = _.getBoundingClientRect(), f = i.current?.getBoundingClientRect() || { top: 0, bottom: 0 };
+      ($.top < f.top || $.bottom > f.bottom) && _.scrollIntoView({ block: "nearest" });
+    }
+  };
+  return {
+    highlightedOption: n,
+    listboxRef: i,
+    optionRefs: l,
+    findNextOption: (_, $) => {
+      const f = $.filter((y) => !y.disabled);
+      if (!f.length) return;
+      const a = n ? f.findIndex((y) => y.id === n.id) : -1;
+      return _ === "ArrowDown" ? f[(a + 1) % f.length] : f[(a - 1 + f.length) % f.length];
+    },
+    highlightOption: (_) => {
+      u(_ ? { ..._ } : void 0), _ && h(l.current[_.id]);
+    },
+    highlightByClick: (_) => {
+      _.id !== n?.id && u({ ..._, isSetByClickEvent: !0 });
+    },
+    highlightSelected: (_, $) => {
+      requestAnimationFrame(() => {
+        u({ ..._, isSetByClickEvent: $ === "CLICK" }), h(l.current[_.id]);
+      });
+    },
+    resetHighlight: () => {
+      u(void 0);
+    }
+  };
+}, Je = (e, t) => {
+  const i = Oe(
+    (l) => {
+      e && !e.contains(l.target) && t();
+    },
+    [t, e]
+  );
+  Ke(() => (document.addEventListener("mousedown", i), () => {
+    document.removeEventListener("mousedown", i);
+  }), [i]);
+}, Qe = ({
+  id: e,
+  variant: t,
+  options: i,
+  listboxLabel: l,
+  multiple: n = !1,
+  selectedOption: u,
+  selectedOptions: h = [],
+  onSelect: w,
+  filterOption: C,
+  inputValue: p,
+  defaultInputValue: b,
+  onInputChange: d,
+  noOptionsText: _,
+  highlightFirstOption: $ = !1,
+  openOnFocus: f = !1,
+  listboxMaxHeight: a,
+  negative: y,
+  disabled: N = !1,
+  readOnly: S = !1,
+  ["data-testid"]: se
+}) => {
+  const A = t === "combobox", _e = ye(), F = fe(null), re = fe(null), U = fe(null), g = Xe({ options: i, highlightFirstOption: $ }), { displayInputValue: oe, populateInputField: P } = Be({
+    controlledInputValue: p,
+    defaultInputValue: b,
+    selectedOption: u,
+    onInputChange: d
+  }), [k, X] = xe(!1), E = () => {
+    X(!1), g.resetHighlight();
+  };
+  Je(F.current, E);
+  const I = ({ eventType: o }) => {
+    X(!0);
+    const T = n ? void 0 : u;
+    T && g.highlightSelected(T, o);
+  }, Y = n ? h : u ? [u] : [], K = A ? Te({
+    options: i,
+    searchTerm: oe,
+    filterOption: C,
+    selectedOption: u,
+    multiple: n
+  }) : i, O = k && (!!K.length || !!_), q = (o) => se ? `${se}-${o}` : void 0, z = (o) => {
+    if (!(!o || o.disabled))
+      if (n) {
+        const ce = Y.some((H) => H.id === o.id) ? Y.filter((H) => H.id !== o.id) : [...Y, o];
+        w?.(o, ce), A && (P(""), U.current?.focus());
+      } else
+        w?.(o, [o]), A && P(ie(o)), E(), (A ? U : re).current?.focus();
+  }, x = (o) => {
+    O || I({ eventType: "KEYBOARD" });
+    const T = g.findNextOption(o, K);
+    g.highlightOption(T);
+  }, j = (o) => {
+    if (!(N || S))
+      switch (o.key) {
+        case "ArrowUp":
+        case "ArrowDown":
+          o.preventDefault(), x(o.key);
+          break;
+        case "Enter": {
+          o.preventDefault(), O && g.highlightedOption ? z(g.highlightedOption) : O || I({ eventType: "KEYBOARD" });
+          break;
+        }
+        case " ": {
+          A || (o.preventDefault(), O && g.highlightedOption ? z(g.highlightedOption) : O || I({ eventType: "KEYBOARD" }));
+          break;
+        }
+        case "Escape":
+          o.preventDefault(), E();
+          break;
+        case "Tab":
+          E();
+          break;
+        case "Home":
+        case "End":
+          A && E();
+          break;
+      }
+  }, J = (o) => {
+    P(o.target.value), g.resetHighlight(), k || I({ eventType: "KEYBOARD" });
+  }, le = () => {
+    N || S || (k ? E() : I({ eventType: "CLICK" }));
+  }, de = () => {
+    !k && f && !N && !S && I({ eventType: "KEYBOARD" }), U.current?.select();
+  }, me = () => {
+    setTimeout(() => {
+      const o = document.activeElement;
+      o !== document.body && !U.current?.contains(o) && !g.listboxRef.current?.contains(o) && !F.current?.contains(o) && (E(), A && !n && P(u ? ie(u) : ""));
+    });
+  }, te = () => {
+    N || S || (k ? E() : I({ eventType: "CLICK" }));
+  }, V = (o) => {
+    if (N || S) return;
+    const T = o.target.closest("button");
+    T && T !== re.current || te();
+  }, ge = () => {
+    !k && f && !N && !S && I({ eventType: "KEYBOARD" });
+  }, Q = `${e}-listbox`, Z = (o) => `${e}-listbox-item-${o.id}`, G = `--purpur-dropdown-${_e.replace(/:/g, "")}`, ae = { anchorName: G }, he = A ? null : {
+    onClick: V
+  }, v = Oe(
+    (o) => {
+      if (g.listboxRef.current = o, o && typeof o.showPopover == "function")
+        try {
+          o.showPopover();
+        } catch {
+        }
+    },
+    [g.listboxRef]
+  ), M = {
+    "aria-label": l,
+    "aria-expanded": O,
+    "data-testid": q("listbox"),
+    id: Q,
+    ref: v,
+    onMouseLeave: () => g.resetHighlight(),
+    popover: "manual",
+    negative: y,
+    style: {
+      ...a ? {
+        maxHeight: typeof a == "number" ? `${a}px` : a
+      } : {},
+      positionAnchor: G
+    }
+  }, R = (o, T) => {
+    const ce = Y.some((pe) => pe.id === o.id), { highlightedOption: H } = g, we = (o.id === H?.id || $ && !H && T === 0) && !H?.isSetByClickEvent;
+    return {
+      "data-testid": q(`listbox-item-${o.id}`),
+      id: Z(o),
+      key: o.id,
+      onMouseMove: () => g.highlightByClick(o),
+      onMouseUp: () => z(o),
+      ref: (pe) => {
+        pe && (g.optionRefs.current[o.id] = pe);
+      },
+      tabIndex: -1,
+      selected: ce,
+      disabled: o.disabled,
+      highlighted: we,
+      hovered: o.id === H?.id && !!H?.isSetByClickEvent,
+      "aria-selected": ce
+    };
+  }, W = A ? {} : {
+    ref: re,
+    type: "button",
+    role: "combobox",
+    "aria-haspopup": "listbox",
+    "aria-expanded": O,
+    "aria-controls": Q,
+    "aria-disabled": N,
+    "data-testid": q("trigger"),
+    id: `${e}-trigger`,
+    onKeyDown: j,
+    onFocus: ge,
+    disabled: N,
+    tabIndex: N ? -1 : 0,
+    style: ae
+  }, be = A ? {
+    ref: U,
+    role: "combobox",
+    "aria-autocomplete": "list",
+    "aria-expanded": O,
+    "aria-controls": Q,
+    "aria-activedescendant": g.highlightedOption ? Z(g.highlightedOption) : void 0,
+    "data-testid": q("input"),
+    autoComplete: "off",
+    id: `${e}-input`,
+    type: "text",
+    value: oe,
+    onChange: J,
+    onMouseDown: le,
+    onFocus: de,
+    onBlur: me,
+    onKeyDown: j,
+    disabled: N,
+    readOnly: S
+  } : null;
+  return {
+    rootRef: F,
+    triggerContainerProps: he,
+    triggerProps: W,
+    inputProps: be,
+    listboxProps: M,
+    getListboxItemProps: R,
+    optionsToShow: K,
+    isOpen: O,
+    highlightedOption: g.highlightedOption,
+    selectedItems: Y,
+    anchorStyle: ae
+  };
+}, Pe = $e((e, t) => {
+  const {
+    id: i,
+    label: l,
+    options: n,
+    className: u,
+    errorText: h,
+    helperText: w,
+    placeholder: C,
+    negative: p = !1,
+    readOnly: b = !1,
+    disabled: d = !1,
+    required: _ = !1,
+    valid: $ = !1,
+    loading: f = !1,
+    multiple: a = !1,
+    selectedOption: y,
+    selectedOptions: N = [],
+    onSelect: S,
+    openOnFocus: se = !1,
+    listboxMaxHeight: A,
+    listboxLabel: _e,
+    selectAllLabel: F,
+    moreOptionsText: re,
+    removeOptionAriaLabel: U,
+    ["data-testid"]: g
+  } = e, oe = ye(), P = i ?? oe, k = (v) => g ? `${g}-${v}` : void 0, X = !!$ && !h, E = `${P}-helper-text`, I = a ? N : y ? [y] : [], Y = Ee({
+    selectAllLabel: F,
+    multiple: a,
+    options: n,
+    selectedItems: I
+  }), K = () => {
+    const v = n.filter((R) => !R.disabled);
+    if (v.every(
+      (R) => I.some((W) => W.id === R.id)
+    )) {
+      const R = I.filter((W) => W.disabled);
+      S?.(void 0, R);
+    } else {
+      const W = [...I.filter((be) => be.disabled), ...v];
+      S?.(void 0, W);
+    }
+  }, O = (v, M) => {
+    if (v?.id === ne) {
+      K();
+      return;
+    }
+    S?.(v, M);
+  }, q = Y ? [{ id: ne, label: F }, ...n] : n, z = Qe({
+    id: P,
+    variant: "select",
+    options: q,
+    listboxLabel: _e || l || "Options",
+    multiple: a,
+    negative: p,
+    selectedOption: y,
+    selectedOptions: N,
+    onSelect: O,
+    openOnFocus: se,
+    listboxMaxHeight: A,
+    disabled: d,
+    readOnly: b,
+    "data-testid": g
+  }), x = (v) => {
+    z.rootRef.current = v, typeof t == "function" ? t(v) : t && (t.current = v);
+  }, {
+    triggerContainerProps: j,
+    triggerProps: J,
+    listboxProps: le,
+    getListboxItemProps: de,
+    optionsToShow: me,
+    isOpen: te,
+    selectedItems: V,
+    anchorStyle: ge
+  } = z, Q = {
+    ...J
+  };
+  delete Q.style;
+  const Z = (v) => {
+    const M = V.filter((R) => R.id !== v.id);
+    S?.(v, M);
+  }, G = a && !!F && n.length > 0 && n.every((v) => V.some((M) => M.id === v.id)), ae = a ? G ? F : V.length === 0 && C || "" : y?.label || C || "", he = m(r, u, {
+    [`${r}--negative`]: p
+  });
+  return /* @__PURE__ */ ee("div", { ref: x, className: he, children: [
+    /* @__PURE__ */ s(
+      De,
+      {
+        fieldId: P,
+        htmlForSuffix: "trigger",
+        label: l,
+        getTestId: k,
+        disabled: d,
+        negative: p,
+        required: _
+      }
+    ),
+    /* @__PURE__ */ s("div", { className: m(`${r}__field-row`), children: /* @__PURE__ */ ee(
+      "div",
+      {
+        ...j,
+        className: m(`${r}__trigger-container`, {
+          [`${r}__trigger-container--error`]: !!h,
+          [`${r}__trigger-container--is-valid`]: X,
+          [`${r}__trigger-container--negative`]: p,
+          [`${r}__trigger-container--disabled`]: d,
+          [`${r}__trigger-container--readonly`]: b && !d,
+          [`${r}__trigger-container--has-tags`]: a && V.length > 0 && !G
+        }),
+        style: ge,
+        children: [
+          a && !G && /* @__PURE__ */ s(
+            Le,
+            {
+              selectedItems: V,
+              getTestId: k,
+              disabled: d,
+              negative: p,
+              onRemove: Z,
+              moreOptionsText: re,
+              removeOptionAriaLabel: U,
+              isSelect: !0
+            }
+          ),
+          /* @__PURE__ */ s(
+            "button",
+            {
+              ...Q,
+              className: m(`${r}__trigger`, {
+                [`${r}__trigger--is-valid`]: X,
+                [`${r}__trigger--negative`]: p,
+                [`${r}__trigger--disabled`]: d,
+                [`${r}__trigger--readonly`]: b && !d,
+                [`${r}__trigger--placeholder`]: !V.length
+              }),
+              "aria-describedby": E,
+              children: /* @__PURE__ */ s("span", { className: m(`${r}__trigger-text`), children: ae })
+            }
+          ),
+          /* @__PURE__ */ s(
+            Ne,
+            {
+              getTestId: k,
+              loading: f,
+              disabled: d,
+              negative: p,
+              isValid: X,
+              isOpen: te,
+              readOnly: b,
+              showChevronOpen: !0
+            }
+          ),
+          /* @__PURE__ */ s(
+            "span",
+            {
+              className: m(`${r}__frame`, {
+                [`${r}__frame--negative`]: p
+              })
+            }
+          )
+        ]
+      }
+    ) }),
+    te && /* @__PURE__ */ s(ue, { ...le, className: m(`${r}__listbox`), children: Re({
+      optionsToShow: me,
+      getListboxItemProps: de,
+      multiple: a,
+      negative: p,
+      fieldId: P,
+      selectAllLabel: F,
+      selectedItems: V
+    }) }),
+    /* @__PURE__ */ s(
+      Ae,
+      {
+        errorText: h,
+        helperText: w,
+        helperTextId: E,
+        negative: p
+      }
+    )
+  ] });
+});
+Pe.displayName = "DropdownSelect";
+const Ze = $e((e, t) => e.combobox ? /* @__PURE__ */ s(Fe, { ref: t, ...e }) : /* @__PURE__ */ s(Pe, { ref: t, ...e }));
+Ze.displayName = "Dropdown";
+export {
+  Ze as D,
+  Qe as u
+};
+//# sourceMappingURL=dropdown-CrufJnb4.mjs.map