@purpur/library 9.9.0 → 9.10.1

package/dist/dropdown-C8VsfTQw.mjs

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