@purpur/library 9.1.3 → 9.2.0

package/dist/dropdown-TO3Mh0bk.mjs

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