@purpur/library 9.2.3 → 9.3.0

package/dist/dropdown-CMO_VD5e.mjs

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