@purpur/library 10.1.1 → 10.2.0

package/dist/dropdown-BAM4nQhd.mjs

@@ -0,0 +1,955 @@
+import { jsxs as Z, jsx as l, Fragment as ke } from "react/jsx-runtime";
+import { useState as xe, forwardRef as $e, useId as ye, useRef as me, useCallback as De, useEffect as Me } from "react";
+import { t as Ue, x as Ye } from "./use-autocomplete.es-CoAeiJiu.mjs";
+import { L as ue } from "./listbox-CtV-Vcmy.mjs";
+import { C as Ie } from "./checkbox-DaRtZXrE.mjs";
+import { a as Oe } from "./dismissable-chip-group-Dov2-9Fe.mjs";
+import { F as qe } from "./field-error-text-CBSX8dGx.mjs";
+import { F as ze } from "./field-helper-text-C5ee4SFV.mjs";
+import { r as je } from "./check-circle-filled.es-umBwOv5_.mjs";
+import { l as Ge } from "./chevron-down.es-PCIIj6oG.mjs";
+import { L as We } from "./label-7sJe5-pX.mjs";
+import { a as Xe } from "./spinner-DRQN6YdK.mjs";
+import { c as Je } from "./bind-CU-R61T-.mjs";
+const ee = (e) => typeof e.label == "string" ? e.label : e.value ?? "", Qe = {
+  "purpur-dropdown": "_purpur-dropdown_p8b57_1",
+  "purpur-dropdown--negative": "_purpur-dropdown--negative_p8b57_14",
+  "purpur-dropdown__label": "_purpur-dropdown__label_p8b57_17",
+  "purpur-dropdown__field-row": "_purpur-dropdown__field-row_p8b57_22",
+  "purpur-dropdown__frame": "_purpur-dropdown__frame_p8b57_26",
+  "purpur-dropdown__frame--negative": "_purpur-dropdown__frame--negative_p8b57_33",
+  "purpur-dropdown__trigger-container": "_purpur-dropdown__trigger-container_p8b57_36",
+  "purpur-dropdown__chip-group": "_purpur-dropdown__chip-group_p8b57_48",
+  "purpur-dropdown__trigger-container--has-tags": "_purpur-dropdown__trigger-container--has-tags_p8b57_52",
+  "purpur-dropdown__trigger-container--disabled": "_purpur-dropdown__trigger-container--disabled_p8b57_55",
+  "purpur-dropdown__trigger-container--readonly": "_purpur-dropdown__trigger-container--readonly_p8b57_55",
+  "purpur-dropdown__trigger-container--negative": "_purpur-dropdown__trigger-container--negative_p8b57_62",
+  "purpur-dropdown__trigger-container--error": "_purpur-dropdown__trigger-container--error_p8b57_65",
+  "purpur-dropdown__trigger-container--is-valid": "_purpur-dropdown__trigger-container--is-valid_p8b57_68",
+  "purpur-dropdown__input": "_purpur-dropdown__input_p8b57_71",
+  "purpur-dropdown__trigger": "_purpur-dropdown__trigger_p8b57_36",
+  "purpur-dropdown__trigger--placeholder": "_purpur-dropdown__trigger--placeholder_p8b57_119",
+  "purpur-dropdown__trigger--is-valid": "_purpur-dropdown__trigger--is-valid_p8b57_122",
+  "purpur-dropdown__trigger--disabled": "_purpur-dropdown__trigger--disabled_p8b57_125",
+  "purpur-dropdown__trigger--readonly": "_purpur-dropdown__trigger--readonly_p8b57_129",
+  "purpur-dropdown__trigger--negative": "_purpur-dropdown__trigger--negative_p8b57_133",
+  "purpur-dropdown__trigger-text": "_purpur-dropdown__trigger-text_p8b57_146",
+  "purpur-dropdown__combobox-container": "_purpur-dropdown__combobox-container_p8b57_152",
+  "purpur-dropdown__combobox-container--disabled": "_purpur-dropdown__combobox-container--disabled_p8b57_162",
+  "purpur-dropdown__combobox-container--readonly": "_purpur-dropdown__combobox-container--readonly_p8b57_169",
+  "purpur-dropdown__combobox-container--error": "_purpur-dropdown__combobox-container--error_p8b57_176",
+  "purpur-dropdown__combobox-container--is-valid": "_purpur-dropdown__combobox-container--is-valid_p8b57_179",
+  "purpur-dropdown__combobox-container--negative": "_purpur-dropdown__combobox-container--negative_p8b57_182",
+  "purpur-dropdown__input--negative": "_purpur-dropdown__input--negative_p8b57_221",
+  "purpur-dropdown__chip-group--select": "_purpur-dropdown__chip-group--select_p8b57_244",
+  "purpur-dropdown__chip-group-more": "_purpur-dropdown__chip-group-more_p8b57_250",
+  "purpur-dropdown__end-adornments": "_purpur-dropdown__end-adornments_p8b57_261",
+  "purpur-dropdown__chevron-icon": "_purpur-dropdown__chevron-icon_p8b57_272",
+  "purpur-dropdown__chevron-icon--open": "_purpur-dropdown__chevron-icon--open_p8b57_277",
+  "purpur-dropdown__chevron-icon--disabled": "_purpur-dropdown__chevron-icon--disabled_p8b57_280",
+  "purpur-dropdown__chevron-icon--readonly": "_purpur-dropdown__chevron-icon--readonly_p8b57_283",
+  "purpur-dropdown__chevron-icon--negative": "_purpur-dropdown__chevron-icon--negative_p8b57_286",
+  "purpur-dropdown__valid-icon": "_purpur-dropdown__valid-icon_p8b57_289",
+  "purpur-dropdown__listbox": "_purpur-dropdown__listbox_p8b57_292",
+  "purpur-dropdown__checkbox-item-multiple": "_purpur-dropdown__checkbox-item-multiple_p8b57_301",
+  "purpur-dropdown__checkbox-container": "_purpur-dropdown__checkbox-container_p8b57_304",
+  "purpur-dropdown__checkbox-container--disabled": "_purpur-dropdown__checkbox-container--disabled_p8b57_311",
+  "purpur-dropdown__select-all-child": "_purpur-dropdown__select-all-child_p8b57_314"
+}, m = Je.bind(Qe), r = "purpur-dropdown", Le = ({
+  fieldId: e,
+  htmlForSuffix: o,
+  label: d,
+  getTestId: c,
+  disabled: n,
+  negative: u,
+  required: b
+}) => d ? /* @__PURE__ */ Z(
+  We,
+  {
+    htmlFor: o ? `${e}-${o}` : e,
+    className: m(`${r}__label`),
+    "data-testid": c("label"),
+    disabled: n,
+    negative: u,
+    children: [
+      b && /* @__PURE__ */ l("span", { "aria-hidden": !0, children: "*" }),
+      d
+    ]
+  }
+) : null, Ne = ({
+  getTestId: e,
+  loading: o,
+  disabled: d,
+  negative: c,
+  isValid: n,
+  isOpen: u,
+  readOnly: b,
+  showChevronOpen: w
+}) => /* @__PURE__ */ l("span", { className: m(`${r}__end-adornments`), children: o ? /* @__PURE__ */ l(
+  Xe,
+  {
+    disabled: d,
+    size: "xxs",
+    negative: c,
+    "data-testid": e("spinner")
+  }
+) : /* @__PURE__ */ Z(ke, { children: [
+  n && /* @__PURE__ */ l(
+    je,
+    {
+      "data-testid": e("valid-icon"),
+      className: m(`${r}__valid-icon`)
+    }
+  ),
+  /* @__PURE__ */ l(
+    Ge,
+    {
+      className: m(`${r}__chevron-icon`, {
+        [`${r}__chevron-icon--open`]: w && u,
+        [`${r}__chevron-icon--disabled`]: d,
+        [`${r}__chevron-icon--readonly`]: b && !d,
+        [`${r}__chevron-icon--is-valid`]: n,
+        [`${r}__chevron-icon--negative`]: c
+      }),
+      "data-testid": e("dropdown-icon"),
+      size: "sm"
+    }
+  )
+] }) }), Ce = 6, Ee = ({
+  selectedItems: e,
+  getTestId: o,
+  disabled: d,
+  negative: c,
+  onRemove: n,
+  isSelect: u,
+  moreOptionsText: b,
+  removeOptionAriaLabel: w
+}) => {
+  if (!e.length) return null;
+  const p = b !== void 0 && e.length > Ce ? e.slice(-Ce) : e, $ = e.length - p.length;
+  return /* @__PURE__ */ Z(
+    Oe,
+    {
+      className: m(`${r}__chip-group`, {
+        [`${r}__chip-group--select`]: u
+      }),
+      negative: c,
+      "data-testid": o("tags"),
+      size: "sm",
+      children: [
+        p.map((s) => /* @__PURE__ */ l(
+          Oe.Item,
+          {
+            id: s.id,
+            "data-testid": o(`tag-${s.id}`),
+            "aria-label": w ? `${w} ${ee(s)}` : ee(s),
+            onDismiss: () => {
+              n(s);
+            },
+            disabled: d || s.disabled,
+            children: s.label
+          },
+          s.id
+        )),
+        $ > 0 && /* @__PURE__ */ l(
+          "li",
+          {
+            className: m(`${r}__chip-group-more`),
+            "data-testid": o("tags-more"),
+            children: `+${$} ${b}`
+          }
+        )
+      ]
+    }
+  );
+}, Ae = ({
+  errorText: e,
+  helperText: o,
+  helperTextId: d,
+  negative: c
+}) => /* @__PURE__ */ Z(ke, { children: [
+  e && /* @__PURE__ */ l(qe, { negative: c, children: e }),
+  o && !e && /* @__PURE__ */ l(ze, { id: d, negative: c, children: o })
+] }), de = "__purpur-dropdown-select-all__", Re = ({
+  selectAllLabel: e,
+  multiple: o,
+  options: d,
+  selectedItems: c
+}) => !e || !o || d.filter((w) => !w.disabled).length === 0 ? !1 : !d.filter((w) => w.disabled).some(
+  (w) => !c.some((k) => k.id === w.id)
+), Te = ({
+  optionsToShow: e,
+  getListboxItemProps: o,
+  multiple: d,
+  negative: c,
+  fieldId: n,
+  noOptionsText: u,
+  selectAllLabel: b,
+  selectedItems: w = [],
+  renderLabel: k = (p) => p.label
+}) => {
+  if (u !== void 0 && !e.length)
+    return /* @__PURE__ */ l(ue.Item, { noninteractive: !0, children: u });
+  const p = e[0]?.id === de;
+  let $ = !1;
+  if (p) {
+    const _ = e.filter((f) => f.id !== de).filter((f) => !f.disabled), y = _.filter(
+      (f) => w.some((O) => O.id === f.id)
+    ).length, h = _.length > 0 && y === _.length, a = w.length > 0;
+    $ = h ? !0 : a ? "indeterminate" : !1;
+  }
+  return e.map((s, _) => {
+    const { key: y, selected: h, ...a } = o(s, _);
+    return s.id === de ? /* @__PURE__ */ l(
+      ue.Item,
+      {
+        ...a,
+        "aria-selected": $ === !0,
+        className: m(
+          `${r}__checkbox-item-multiple`,
+          `${r}__select-all-item`
+        ),
+        hideSelectedIcon: !0,
+        children: /* @__PURE__ */ l("span", { className: m(`${r}__checkbox-container`), children: /* @__PURE__ */ l(
+          Ie,
+          {
+            id: `${n}-checkbox-select-all`,
+            checked: $,
+            label: b,
+            negative: c,
+            "aria-hidden": !0
+          }
+        ) })
+      },
+      y
+    ) : d ? /* @__PURE__ */ l(
+      ue.Item,
+      {
+        ...a,
+        className: m(`${r}__checkbox-item-multiple`, {
+          [`${r}__select-all-child`]: p
+        }),
+        selected: !!h,
+        hideSelectedIcon: !0,
+        children: /* @__PURE__ */ l(
+          "span",
+          {
+            className: m(`${r}__checkbox-container`, {
+              [`${r}__checkbox-container--disabled`]: s.disabled
+            }),
+            children: /* @__PURE__ */ l(
+              Ie,
+              {
+                id: `${n}-checkbox-${s.id}`,
+                checked: !!h,
+                label: k(s),
+                negative: c,
+                "aria-hidden": !0,
+                disabled: s.disabled
+              }
+            )
+          }
+        )
+      },
+      y
+    ) : /* @__PURE__ */ l(ue.Item, { ...a, selected: !!h, children: /* @__PURE__ */ l("div", { children: k(s) }) }, y);
+  });
+}, Ze = (e, o, d) => {
+  if (d)
+    return e.filter((n) => d(o, n));
+  if (!o) return e;
+  const c = o.toUpperCase().split(" ");
+  return e.filter(
+    (n) => c.every(
+      (u) => (n.value || (typeof n.label == "string" ? n.label : "")).toUpperCase().includes(u)
+    )
+  );
+}, Be = ({
+  options: e,
+  searchTerm: o,
+  filterOption: d,
+  selectedOption: c,
+  multiple: n
+}) => !n && c && ee(c) === o ? e : Ze(e, o, d), Fe = ({
+  controlledInputValue: e,
+  defaultInputValue: o,
+  selectedOption: d,
+  onInputChange: c
+}) => {
+  const [n, u] = xe(
+    (typeof e == "string" ? e : o ?? (d ? ee(d) : void 0)) ?? ""
+  );
+  return {
+    displayInputValue: typeof e == "string" ? e : n,
+    populateInputField: (k) => {
+      c?.(k), u(k);
+    }
+  };
+}, Pe = $e((e, o) => {
+  const {
+    id: d,
+    label: c,
+    options: n,
+    className: u,
+    errorText: b,
+    helperText: w,
+    placeholder: k,
+    negative: p = !1,
+    readOnly: $ = !1,
+    disabled: s = !1,
+    required: _ = !1,
+    valid: y,
+    loading: h,
+    multiple: a = !1,
+    selectedOption: f,
+    selectedOptions: O = [],
+    onSelect: S,
+    openOnFocus: se = !1,
+    listboxMaxHeight: E,
+    listboxLabel: _e,
+    filterOption: K,
+    inputValue: re,
+    defaultInputValue: z,
+    onInputChange: g,
+    noOptionsText: te,
+    highlightFirstOption: V = !1,
+    selectAllLabel: D,
+    moreOptionsText: X,
+    removeOptionAriaLabel: A,
+    formatOption: L,
+    ["data-testid"]: H
+  } = e, oe = ye(), C = d ?? oe, M = (i) => H ? `${H}-${i}` : void 0, j = !!y && !b, le = `${C}-helper-text`, v = a ? O : f ? [f] : [], { displayInputValue: U, populateInputField: G } = Fe({
+    controlledInputValue: re,
+    defaultInputValue: z,
+    selectedOption: f,
+    onInputChange: g
+  }), ae = Be({
+    options: n,
+    searchTerm: U,
+    filterOption: K,
+    selectedOption: f,
+    multiple: a
+  }), ce = Re({
+    selectAllLabel: D,
+    multiple: a,
+    options: n,
+    selectedItems: v
+  }), R = ce && (ce && !U) ? [{ id: de, label: D }, ...ae] : ae, be = () => {
+    const i = n.filter((N) => !N.disabled);
+    if (i.every(
+      (N) => v.some((P) => P.id === N.id)
+    )) {
+      const N = v.filter((P) => P.disabled);
+      S?.(void 0, N);
+    } else {
+      const P = [...v.filter((ve) => ve.disabled), ...i];
+      S?.(void 0, P);
+    }
+    G("");
+  }, J = (i) => {
+    if (i.id === de) {
+      be();
+      return;
+    }
+    if (a) {
+      const N = v.some((P) => P.id === i.id) ? v.filter((P) => P.id !== i.id) : [...v, i];
+      S?.(i, N), G("");
+    } else
+      S?.(i, [i]), G(ee(i));
+  }, {
+    rootRef: ne,
+    inputRef: q,
+    inputProps: Q,
+    listboxProps: he,
+    getListboxItemProps: x,
+    isOpen: T,
+    openListbox: B,
+    anchorStyle: W
+  } = Ue({
+    id: C,
+    // 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: R,
+    listboxLabel: _e || c || "Options",
+    selectedOption: a ? void 0 : f,
+    disabled: s,
+    readOnly: $,
+    openOnFocus: se,
+    listboxMaxHeight: E,
+    highlightFirstOption: V,
+    closeOnSelect: !a,
+    noOptionsText: te,
+    negative: p,
+    onSelect: J,
+    "data-testid": H
+  }), fe = (i) => {
+    ne.current = i, typeof o == "function" ? o(i) : o && (o.current = i);
+  }, t = (i, I) => {
+    const N = x(i, I);
+    if (a) {
+      const P = v.some((ve) => ve.id === i.id);
+      return { ...N, selected: P, "aria-selected": P };
+    }
+    return N;
+  }, F = (i) => L ? L(i, U) : typeof i.label != "string" ? i.label : /* @__PURE__ */ l(Ye, { text: i.label, query: U }), ie = (i) => {
+    const I = v.filter((N) => N.id !== i.id);
+    S?.(i, I);
+  }, Y = (i) => {
+    if (a && i.key === "Backspace" && i.currentTarget.value === "" && v.length > 0) {
+      for (let I = v.length - 1; I >= 0; I--)
+        if (!v[I].disabled) {
+          ie(v[I]);
+          break;
+        }
+    }
+    Q?.onKeyDown?.(i);
+  }, we = (i) => {
+    G(i.target.value), T || B();
+  }, pe = (i) => {
+    Q?.onBlur?.(i), !a && setTimeout(() => {
+      if (ne.current?.contains(document.activeElement)) return;
+      const I = f ? ee(f) : "";
+      U !== I && G(I);
+    });
+  }, Ve = (i) => {
+    if (s || $) return;
+    const I = i.target;
+    if (I === q.current || I.closest("button"))
+      return;
+    const N = q.current;
+    N?.dispatchEvent(new MouseEvent("mousedown", { bubbles: !0 })), N?.focus();
+  }, Se = a && !!D && n.length > 0 && n.every((i) => v.some((I) => I.id === i.id)), He = m(r, u, {
+    [`${r}--negative`]: p
+  });
+  return /* @__PURE__ */ Z("div", { ref: fe, className: He, children: [
+    /* @__PURE__ */ l(
+      Le,
+      {
+        fieldId: C,
+        htmlForSuffix: "input",
+        label: c,
+        getTestId: M,
+        disabled: s,
+        negative: p,
+        required: _
+      }
+    ),
+    /* @__PURE__ */ l("div", { className: m(`${r}__field-row`), children: /* @__PURE__ */ Z(
+      "div",
+      {
+        className: m(`${r}__combobox-container`, {
+          [`${r}__combobox-container--error`]: !!b,
+          [`${r}__combobox-container--is-valid`]: j,
+          [`${r}__combobox-container--negative`]: p,
+          [`${r}__combobox-container--disabled`]: s,
+          [`${r}__combobox-container--readonly`]: $ && !s
+        }),
+        style: W,
+        onClick: Ve,
+        children: [
+          a && !Se && /* @__PURE__ */ l(
+            Ee,
+            {
+              selectedItems: v,
+              getTestId: M,
+              disabled: s,
+              negative: p,
+              onRemove: ie,
+              moreOptionsText: X,
+              removeOptionAriaLabel: A
+            }
+          ),
+          /* @__PURE__ */ l(
+            "input",
+            {
+              ...Q,
+              ref: q,
+              id: `${C}-input`,
+              "data-testid": M("input"),
+              onKeyDown: Y,
+              onChange: we,
+              onBlur: pe,
+              value: Se && !U ? D : U,
+              placeholder: k,
+              className: m(`${r}__input`, {
+                [`${r}__input--negative`]: p
+              }),
+              "aria-describedby": le,
+              "aria-invalid": !!b,
+              disabled: s,
+              readOnly: $
+            }
+          ),
+          /* @__PURE__ */ l(
+            Ne,
+            {
+              getTestId: M,
+              loading: h,
+              disabled: s,
+              negative: p,
+              isValid: j,
+              isOpen: T,
+              showChevronOpen: !0
+            }
+          ),
+          /* @__PURE__ */ l(
+            "span",
+            {
+              className: m(`${r}__frame`, {
+                [`${r}__frame--negative`]: p
+              })
+            }
+          )
+        ]
+      }
+    ) }),
+    T && /* @__PURE__ */ l(ue, { ...he, className: m(`${r}__listbox`), children: Te({
+      optionsToShow: R,
+      getListboxItemProps: t,
+      multiple: a,
+      negative: p,
+      fieldId: C,
+      noOptionsText: te,
+      selectAllLabel: D,
+      selectedItems: v,
+      renderLabel: F
+    }) }),
+    /* @__PURE__ */ l(
+      Ae,
+      {
+        errorText: b,
+        helperText: w,
+        helperTextId: le,
+        negative: p
+      }
+    )
+  ] });
+});
+Pe.displayName = "DropdownCombobox";
+const er = ({
+  options: e,
+  highlightFirstOption: o
+}) => {
+  const d = me(null), c = me({}), [n, u] = xe(
+    o ? e[0] : void 0
+  ), b = (_) => {
+    if (_) {
+      const y = _.getBoundingClientRect(), h = d.current?.getBoundingClientRect() || { top: 0, bottom: 0 };
+      (y.top < h.top || y.bottom > h.bottom) && _.scrollIntoView({ block: "nearest" });
+    }
+  };
+  return {
+    highlightedOption: n,
+    listboxRef: d,
+    optionRefs: c,
+    findNextOption: (_, y) => {
+      const h = y.filter((f) => !f.disabled);
+      if (!h.length) return;
+      const a = n ? h.findIndex((f) => f.id === n.id) : -1;
+      return _ === "ArrowDown" ? h[(a + 1) % h.length] : h[(a - 1 + h.length) % h.length];
+    },
+    highlightOption: (_) => {
+      u(_ ? { ..._ } : void 0), _ && b(c.current[_.id]);
+    },
+    highlightByClick: (_) => {
+      _.id !== n?.id && u({ ..._, isSetByClickEvent: !0 });
+    },
+    highlightSelected: (_, y) => {
+      requestAnimationFrame(() => {
+        u({ ..._, isSetByClickEvent: y === "CLICK" }), b(c.current[_.id]);
+      });
+    },
+    resetHighlight: () => {
+      u(void 0);
+    }
+  };
+}, rr = (e, o) => {
+  const d = De(
+    (c) => {
+      e && !e.contains(c.target) && o();
+    },
+    [o, e]
+  );
+  Me(() => (document.addEventListener("mousedown", d), () => {
+    document.removeEventListener("mousedown", d);
+  }), [d]);
+}, tr = ({
+  id: e,
+  variant: o,
+  options: d,
+  listboxLabel: c,
+  multiple: n = !1,
+  selectedOption: u,
+  selectedOptions: b = [],
+  onSelect: w,
+  filterOption: k,
+  inputValue: p,
+  defaultInputValue: $,
+  onInputChange: s,
+  noOptionsText: _,
+  highlightFirstOption: y = !1,
+  openOnFocus: h = !1,
+  listboxMaxHeight: a,
+  negative: f,
+  disabled: O = !1,
+  readOnly: S = !1,
+  ["data-testid"]: se
+}) => {
+  const E = o === "combobox", _e = ye(), K = me(null), re = me(null), z = me(null), g = er({ options: d, highlightFirstOption: y }), { displayInputValue: te, populateInputField: V } = Fe({
+    controlledInputValue: p,
+    defaultInputValue: $,
+    selectedOption: u,
+    onInputChange: s
+  }), [D, X] = xe(!1), A = () => {
+    X(!1), g.resetHighlight();
+  };
+  rr(K.current, A);
+  const L = ({ eventType: t }) => {
+    X(!0);
+    const F = n ? void 0 : u;
+    F && g.highlightSelected(F, t);
+  }, H = n ? b : u ? [u] : [], oe = E ? Be({
+    options: d,
+    searchTerm: te,
+    filterOption: k,
+    selectedOption: u,
+    multiple: n
+  }) : d, C = D && (!!oe.length || !!_), M = (t) => se ? `${se}-${t}` : void 0, j = (t) => {
+    if (!(!t || t.disabled))
+      if (n) {
+        const ie = H.some((Y) => Y.id === t.id) ? H.filter((Y) => Y.id !== t.id) : [...H, t];
+        w?.(t, ie), E && (V(""), z.current?.focus());
+      } else
+        w?.(t, [t]), E && V(ee(t)), A(), (E ? z : re).current?.focus();
+  }, le = (t) => {
+    C || L({ eventType: "KEYBOARD" });
+    const F = g.findNextOption(t, oe);
+    g.highlightOption(F);
+  }, v = (t) => {
+    if (!(O || S))
+      switch (t.key) {
+        case "ArrowUp":
+        case "ArrowDown":
+          t.preventDefault(), le(t.key);
+          break;
+        case "Enter": {
+          t.preventDefault(), C && g.highlightedOption ? j(g.highlightedOption) : C || L({ eventType: "KEYBOARD" });
+          break;
+        }
+        case " ": {
+          E || (t.preventDefault(), C && g.highlightedOption ? j(g.highlightedOption) : C || L({ eventType: "KEYBOARD" }));
+          break;
+        }
+        case "Escape":
+          t.preventDefault(), A();
+          break;
+        case "Tab":
+          A();
+          break;
+        case "Home":
+        case "End":
+          E && A();
+          break;
+      }
+  }, U = (t) => {
+    V(t.target.value), g.resetHighlight(), D || L({ eventType: "KEYBOARD" });
+  }, G = () => {
+    O || S || (D ? A() : L({ eventType: "CLICK" }));
+  }, ae = () => {
+    !D && h && !O && !S && L({ eventType: "KEYBOARD" }), z.current?.select();
+  }, ce = () => {
+    setTimeout(() => {
+      const t = document.activeElement;
+      t !== document.body && !z.current?.contains(t) && !g.listboxRef.current?.contains(t) && !K.current?.contains(t) && (A(), E && !n && V(u ? ee(u) : ""));
+    });
+  }, ge = () => {
+    O || S || (D ? A() : L({ eventType: "CLICK" }));
+  }, R = (t) => {
+    if (O || S) return;
+    const F = t.target.closest("button");
+    F && F !== re.current || ge();
+  }, be = () => {
+    !D && h && !O && !S && L({ eventType: "KEYBOARD" });
+  }, J = `${e}-listbox`, ne = (t) => `${e}-listbox-item-${t.id}`, q = `--purpur-dropdown-${_e.replace(/:/g, "")}`, Q = { anchorName: q }, he = E ? null : {
+    onClick: R
+  }, x = De(
+    (t) => {
+      if (g.listboxRef.current = t, t && typeof t.showPopover == "function")
+        try {
+          t.showPopover();
+        } catch {
+        }
+    },
+    [g.listboxRef]
+  ), T = {
+    "aria-label": c,
+    "aria-expanded": C,
+    "data-testid": M("listbox"),
+    id: J,
+    ref: x,
+    onMouseLeave: () => g.resetHighlight(),
+    popover: "manual",
+    negative: f,
+    style: {
+      ...a ? {
+        maxHeight: typeof a == "number" ? `${a}px` : a
+      } : {},
+      positionAnchor: q
+    }
+  }, B = (t, F) => {
+    const ie = H.some((pe) => pe.id === t.id), { highlightedOption: Y } = g, we = (t.id === Y?.id || y && !Y && F === 0) && !Y?.isSetByClickEvent;
+    return {
+      "data-testid": M(`listbox-item-${t.id}`),
+      id: ne(t),
+      key: t.id,
+      onMouseMove: () => g.highlightByClick(t),
+      onMouseUp: () => j(t),
+      ref: (pe) => {
+        pe && (g.optionRefs.current[t.id] = pe);
+      },
+      tabIndex: -1,
+      selected: ie,
+      disabled: t.disabled,
+      highlighted: we,
+      hovered: t.id === Y?.id && !!Y?.isSetByClickEvent,
+      "aria-selected": ie
+    };
+  }, W = E ? {} : {
+    ref: re,
+    type: "button",
+    role: "combobox",
+    "aria-haspopup": "listbox",
+    "aria-expanded": C,
+    "aria-controls": J,
+    "aria-disabled": O,
+    "data-testid": M("trigger"),
+    id: `${e}-trigger`,
+    onKeyDown: v,
+    onFocus: be,
+    disabled: O,
+    tabIndex: O ? -1 : 0,
+    style: Q
+  }, fe = E ? {
+    ref: z,
+    role: "combobox",
+    "aria-autocomplete": "list",
+    "aria-expanded": C,
+    "aria-controls": J,
+    "aria-activedescendant": g.highlightedOption ? ne(g.highlightedOption) : void 0,
+    "data-testid": M("input"),
+    autoComplete: "off",
+    id: `${e}-input`,
+    type: "text",
+    value: te,
+    onChange: U,
+    onMouseDown: G,
+    onFocus: ae,
+    onBlur: ce,
+    onKeyDown: v,
+    disabled: O,
+    readOnly: S
+  } : null;
+  return {
+    rootRef: K,
+    triggerContainerProps: he,
+    triggerProps: W,
+    inputProps: fe,
+    listboxProps: T,
+    getListboxItemProps: B,
+    optionsToShow: oe,
+    isOpen: C,
+    highlightedOption: g.highlightedOption,
+    selectedItems: H,
+    anchorStyle: Q
+  };
+}, Ke = $e((e, o) => {
+  const {
+    id: d,
+    label: c,
+    options: n,
+    className: u,
+    errorText: b,
+    helperText: w,
+    placeholder: k,
+    negative: p = !1,
+    readOnly: $ = !1,
+    disabled: s = !1,
+    required: _ = !1,
+    valid: y = !1,
+    loading: h = !1,
+    multiple: a = !1,
+    selectedOption: f,
+    selectedOptions: O = [],
+    onSelect: S,
+    openOnFocus: se = !1,
+    listboxMaxHeight: E,
+    listboxLabel: _e,
+    selectAllLabel: K,
+    moreOptionsText: re,
+    removeOptionAriaLabel: z,
+    ["data-testid"]: g
+  } = e, te = ye(), V = d ?? te, D = (x) => g ? `${g}-${x}` : void 0, X = !!y && !b, A = `${V}-helper-text`, L = a ? O : f ? [f] : [], H = Re({
+    selectAllLabel: K,
+    multiple: a,
+    options: n,
+    selectedItems: L
+  }), oe = () => {
+    const x = n.filter((B) => !B.disabled);
+    if (x.every(
+      (B) => L.some((W) => W.id === B.id)
+    )) {
+      const B = L.filter((W) => W.disabled);
+      S?.(void 0, B);
+    } else {
+      const W = [...L.filter((fe) => fe.disabled), ...x];
+      S?.(void 0, W);
+    }
+  }, C = (x, T) => {
+    if (x?.id === de) {
+      oe();
+      return;
+    }
+    S?.(x, T);
+  }, M = H ? [{ id: de, label: K }, ...n] : n, j = tr({
+    id: V,
+    variant: "select",
+    options: M,
+    listboxLabel: _e || c || "Options",
+    multiple: a,
+    negative: p,
+    selectedOption: f,
+    selectedOptions: O,
+    onSelect: C,
+    openOnFocus: se,
+    listboxMaxHeight: E,
+    disabled: s,
+    readOnly: $,
+    "data-testid": g
+  }), le = (x) => {
+    j.rootRef.current = x, typeof o == "function" ? o(x) : o && (o.current = x);
+  }, {
+    triggerContainerProps: v,
+    triggerProps: U,
+    listboxProps: G,
+    getListboxItemProps: ae,
+    optionsToShow: ce,
+    isOpen: ge,
+    selectedItems: R,
+    anchorStyle: be
+  } = j, J = {
+    ...U
+  };
+  delete J.style;
+  const ne = (x) => {
+    const T = R.filter((B) => B.id !== x.id);
+    S?.(x, T);
+  }, q = a && !!K && n.length > 0 && n.every((x) => R.some((T) => T.id === x.id)), Q = a ? q ? K : R.length === 0 && k || "" : f?.label || k || "", he = m(r, u, {
+    [`${r}--negative`]: p
+  });
+  return /* @__PURE__ */ Z("div", { ref: le, className: he, children: [
+    /* @__PURE__ */ l(
+      Le,
+      {
+        fieldId: V,
+        htmlForSuffix: "trigger",
+        label: c,
+        getTestId: D,
+        disabled: s,
+        negative: p,
+        required: _
+      }
+    ),
+    /* @__PURE__ */ l("div", { className: m(`${r}__field-row`), children: /* @__PURE__ */ Z(
+      "div",
+      {
+        ...v,
+        className: m(`${r}__trigger-container`, {
+          [`${r}__trigger-container--error`]: !!b,
+          [`${r}__trigger-container--is-valid`]: X,
+          [`${r}__trigger-container--negative`]: p,
+          [`${r}__trigger-container--disabled`]: s,
+          [`${r}__trigger-container--readonly`]: $ && !s,
+          [`${r}__trigger-container--has-tags`]: a && R.length > 0 && !q
+        }),
+        style: be,
+        children: [
+          a && !q && /* @__PURE__ */ l(
+            Ee,
+            {
+              selectedItems: R,
+              getTestId: D,
+              disabled: s,
+              negative: p,
+              onRemove: ne,
+              moreOptionsText: re,
+              removeOptionAriaLabel: z,
+              isSelect: !0
+            }
+          ),
+          /* @__PURE__ */ l(
+            "button",
+            {
+              ...J,
+              className: m(`${r}__trigger`, {
+                [`${r}__trigger--is-valid`]: X,
+                [`${r}__trigger--negative`]: p,
+                [`${r}__trigger--disabled`]: s,
+                [`${r}__trigger--readonly`]: $ && !s,
+                [`${r}__trigger--placeholder`]: !R.length
+              }),
+              "aria-describedby": A,
+              children: /* @__PURE__ */ l("span", { className: m(`${r}__trigger-text`), children: Q })
+            }
+          ),
+          /* @__PURE__ */ l(
+            Ne,
+            {
+              getTestId: D,
+              loading: h,
+              disabled: s,
+              negative: p,
+              isValid: X,
+              isOpen: ge,
+              readOnly: $,
+              showChevronOpen: !0
+            }
+          ),
+          /* @__PURE__ */ l(
+            "span",
+            {
+              className: m(`${r}__frame`, {
+                [`${r}__frame--negative`]: p
+              })
+            }
+          )
+        ]
+      }
+    ) }),
+    ge && /* @__PURE__ */ l(ue, { ...G, className: m(`${r}__listbox`), children: Te({
+      optionsToShow: ce,
+      getListboxItemProps: ae,
+      multiple: a,
+      negative: p,
+      fieldId: V,
+      selectAllLabel: K,
+      selectedItems: R
+    }) }),
+    /* @__PURE__ */ l(
+      Ae,
+      {
+        errorText: b,
+        helperText: w,
+        helperTextId: A,
+        negative: p
+      }
+    )
+  ] });
+});
+Ke.displayName = "DropdownSelect";
+const or = $e((e, o) => e.combobox ? /* @__PURE__ */ l(Pe, { ref: o, ...e }) : /* @__PURE__ */ l(Ke, { ref: o, ...e }));
+or.displayName = "Dropdown";
+export {
+  or as D,
+  tr as u
+};
+//# sourceMappingURL=dropdown-BAM4nQhd.mjs.map