@purpur/library 9.1.2 → 9.1.3

package/dist/dropdown-CBYTBaMW.mjs

@@ -0,0 +1,779 @@
+import { jsxs as Y, jsx as a, Fragment as be } from "react/jsx-runtime";
+import { useState as _e, forwardRef as ue, useId as ge, useRef as oe, useCallback as fe, useEffect as Oe } from "react";
+import { L as te } from "./listbox-DG4KmQP_.mjs";
+import { e as De } from "./use-autocomplete.es-CVv3z8t6.mjs";
+import { C as Re } from "./checkbox-D6qWgpWR.mjs";
+import { a as he } from "./dismissable-chip-group-D-gD93ON.mjs";
+import { F as Ne } from "./field-error-text-CBSX8dGx.mjs";
+import { F as Se } from "./field-helper-text-C5ee4SFV.mjs";
+import { r as Le } from "./check-circle-filled.es-umBwOv5_.mjs";
+import { l as Te } from "./chevron-down.es-PCIIj6oG.mjs";
+import { L as Be } from "./label-7sJe5-pX.mjs";
+import { a as Ee } from "./spinner-DRQN6YdK.mjs";
+import { c as Fe } from "./bind-CU-R61T-.mjs";
+const Pe = {
+  "purpur-dropdown": "_purpur-dropdown_ixl3j_1",
+  "purpur-dropdown--negative": "_purpur-dropdown--negative_ixl3j_11",
+  "purpur-dropdown__label": "_purpur-dropdown__label_ixl3j_14",
+  "purpur-dropdown__field-row": "_purpur-dropdown__field-row_ixl3j_19",
+  "purpur-dropdown__frame": "_purpur-dropdown__frame_ixl3j_23",
+  "purpur-dropdown__frame--negative": "_purpur-dropdown__frame--negative_ixl3j_30",
+  "purpur-dropdown__trigger-container": "_purpur-dropdown__trigger-container_ixl3j_33",
+  "purpur-dropdown__chip-group": "_purpur-dropdown__chip-group_ixl3j_45",
+  "purpur-dropdown__trigger-container--has-tags": "_purpur-dropdown__trigger-container--has-tags_ixl3j_50",
+  "purpur-dropdown__trigger-container--disabled": "_purpur-dropdown__trigger-container--disabled_ixl3j_53",
+  "purpur-dropdown__trigger-container--readonly": "_purpur-dropdown__trigger-container--readonly_ixl3j_53",
+  "purpur-dropdown__trigger-container--negative": "_purpur-dropdown__trigger-container--negative_ixl3j_60",
+  "purpur-dropdown__trigger-container--error": "_purpur-dropdown__trigger-container--error_ixl3j_63",
+  "purpur-dropdown__trigger-container--is-valid": "_purpur-dropdown__trigger-container--is-valid_ixl3j_66",
+  "purpur-dropdown__input": "_purpur-dropdown__input_ixl3j_69",
+  "purpur-dropdown__trigger": "_purpur-dropdown__trigger_ixl3j_33",
+  "purpur-dropdown__trigger--placeholder": "_purpur-dropdown__trigger--placeholder_ixl3j_117",
+  "purpur-dropdown__trigger--is-valid": "_purpur-dropdown__trigger--is-valid_ixl3j_120",
+  "purpur-dropdown__trigger--disabled": "_purpur-dropdown__trigger--disabled_ixl3j_123",
+  "purpur-dropdown__trigger--readonly": "_purpur-dropdown__trigger--readonly_ixl3j_127",
+  "purpur-dropdown__trigger--negative": "_purpur-dropdown__trigger--negative_ixl3j_131",
+  "purpur-dropdown__trigger-text": "_purpur-dropdown__trigger-text_ixl3j_144",
+  "purpur-dropdown__combobox-container": "_purpur-dropdown__combobox-container_ixl3j_150",
+  "purpur-dropdown__combobox-container--disabled": "_purpur-dropdown__combobox-container--disabled_ixl3j_160",
+  "purpur-dropdown__combobox-container--readonly": "_purpur-dropdown__combobox-container--readonly_ixl3j_167",
+  "purpur-dropdown__combobox-container--error": "_purpur-dropdown__combobox-container--error_ixl3j_174",
+  "purpur-dropdown__combobox-container--is-valid": "_purpur-dropdown__combobox-container--is-valid_ixl3j_177",
+  "purpur-dropdown__combobox-container--negative": "_purpur-dropdown__combobox-container--negative_ixl3j_180",
+  "purpur-dropdown__input--negative": "_purpur-dropdown__input--negative_ixl3j_219",
+  "purpur-dropdown__chip-group--select": "_purpur-dropdown__chip-group--select_ixl3j_236",
+  "purpur-dropdown__end-adornments": "_purpur-dropdown__end-adornments_ixl3j_239",
+  "purpur-dropdown__chevron-icon": "_purpur-dropdown__chevron-icon_ixl3j_250",
+  "purpur-dropdown__chevron-icon--open": "_purpur-dropdown__chevron-icon--open_ixl3j_255",
+  "purpur-dropdown__chevron-icon--disabled": "_purpur-dropdown__chevron-icon--disabled_ixl3j_258",
+  "purpur-dropdown__chevron-icon--readonly": "_purpur-dropdown__chevron-icon--readonly_ixl3j_261",
+  "purpur-dropdown__chevron-icon--negative": "_purpur-dropdown__chevron-icon--negative_ixl3j_264",
+  "purpur-dropdown__valid-icon": "_purpur-dropdown__valid-icon_ixl3j_267",
+  "purpur-dropdown__listbox": "_purpur-dropdown__listbox_ixl3j_270",
+  "purpur-dropdown__checkbox-item-multiple": "_purpur-dropdown__checkbox-item-multiple_ixl3j_280",
+  "purpur-dropdown__checkbox-container": "_purpur-dropdown__checkbox-container_ixl3j_283"
+}, b = Fe.bind(Pe), o = "purpur-dropdown", me = ({
+  fieldId: r,
+  htmlForSuffix: t,
+  label: i,
+  getTestId: s,
+  disabled: d,
+  negative: n,
+  required: h
+}) => i ? /* @__PURE__ */ Y(
+  Be,
+  {
+    htmlFor: t ? `${r}-${t}` : r,
+    className: b(`${o}__label`),
+    "data-testid": s("label"),
+    disabled: d,
+    negative: n,
+    children: [
+      h && /* @__PURE__ */ a("span", { "aria-hidden": !0, children: "*" }),
+      i
+    ]
+  }
+) : null, xe = ({
+  getTestId: r,
+  loading: t,
+  disabled: i,
+  negative: s,
+  isValid: d,
+  isOpen: n,
+  readOnly: h,
+  showChevronOpen: C
+}) => /* @__PURE__ */ a("span", { className: b(`${o}__end-adornments`), children: t ? /* @__PURE__ */ a(
+  Ee,
+  {
+    disabled: i,
+    size: "xxs",
+    negative: s,
+    "data-testid": r("spinner")
+  }
+) : /* @__PURE__ */ Y(be, { children: [
+  d && /* @__PURE__ */ a(
+    Le,
+    {
+      "data-testid": r("valid-icon"),
+      className: b(`${o}__valid-icon`)
+    }
+  ),
+  /* @__PURE__ */ a(
+    Te,
+    {
+      className: b(`${o}__chevron-icon`, {
+        [`${o}__chevron-icon--open`]: C && n,
+        [`${o}__chevron-icon--disabled`]: i,
+        [`${o}__chevron-icon--readonly`]: h && !i,
+        [`${o}__chevron-icon--is-valid`]: d,
+        [`${o}__chevron-icon--negative`]: s
+      }),
+      "data-testid": r("dropdown-icon"),
+      size: "sm"
+    }
+  )
+] }) }), we = ({
+  selectedItems: r,
+  getTestId: t,
+  disabled: i,
+  onRemove: s,
+  isSelect: d
+}) => r.length ? /* @__PURE__ */ a(
+  he,
+  {
+    className: b(`${o}__chip-group`, {
+      [`${o}__chip-group--select`]: d
+    }),
+    "data-testid": t("tags"),
+    size: "sm",
+    children: r.map((n) => /* @__PURE__ */ a(
+      he.Item,
+      {
+        id: n.id,
+        "data-testid": t(`tag-${n.id}`),
+        "aria-label": `Remove ${n.label}`,
+        onDismiss: () => {
+          s(n);
+        },
+        disabled: i,
+        children: n.label
+      },
+      n.id
+    ))
+  }
+) : null, ve = ({
+  errorText: r,
+  helperText: t,
+  helperTextId: i,
+  negative: s
+}) => /* @__PURE__ */ Y(be, { children: [
+  r && /* @__PURE__ */ a(Ne, { negative: s, children: r }),
+  t && !r && /* @__PURE__ */ a(Se, { id: i, negative: s, children: t })
+] }), ye = ({
+  optionsToShow: r,
+  getListboxItemProps: t,
+  multiple: i,
+  fieldId: s,
+  noOptionsText: d
+}) => d !== void 0 && !r.length ? /* @__PURE__ */ a(te.Item, { noninteractive: !0, children: d }) : r.map((n, h) => {
+  const { key: C, selected: y, ...g } = t(n, h);
+  return i ? /* @__PURE__ */ a(
+    te.Item,
+    {
+      ...g,
+      className: b(`${o}__checkbox-item-multiple`),
+      selected: !!y,
+      hideSelectedIcon: !0,
+      children: /* @__PURE__ */ Y("span", { className: b(`${o}__checkbox-container`), children: [
+        /* @__PURE__ */ a(Re, { id: `${s}-checkbox-${n.id}`, checked: !!y, "aria-hidden": !0 }),
+        n.label
+      ] })
+    },
+    C
+  ) : /* @__PURE__ */ a(te.Item, { ...g, selected: !!y, children: n.label }, C);
+}), Ae = (r, t, i) => {
+  if (i)
+    return r.filter((d) => i(t, d));
+  if (!t) return r;
+  const s = t.toUpperCase().split(" ");
+  return r.filter(
+    (d) => s.every((n) => (d.value || d.label).toUpperCase().includes(n))
+  );
+}, $e = ({
+  options: r,
+  searchTerm: t,
+  filterOption: i,
+  selectedOption: s,
+  multiple: d
+}) => !d && s && s.label === t ? r : Ae(r, t, i), Ie = ({
+  controlledInputValue: r,
+  defaultInputValue: t,
+  selectedOption: i,
+  onInputChange: s
+}) => {
+  const [d, n] = _e(
+    (typeof r == "string" ? r : t ?? i?.label) ?? ""
+  );
+  return {
+    displayInputValue: typeof r == "string" ? r : d,
+    populateInputField: (y) => {
+      s?.(y), n(y);
+    }
+  };
+}, Ce = ue((r, t) => {
+  const {
+    id: i,
+    label: s,
+    options: d,
+    className: n,
+    errorText: h,
+    helperText: C,
+    placeholder: y,
+    negative: g = !1,
+    readOnly: R = !1,
+    disabled: f = !1,
+    required: u = !1,
+    valid: j,
+    loading: m,
+    multiple: c = !1,
+    selectedOption: _,
+    selectedOptions: N = [],
+    onSelect: B,
+    openOnFocus: $ = !1,
+    listboxMaxHeight: Q,
+    listboxLabel: M,
+    filterOption: E,
+    inputValue: F,
+    defaultInputValue: p,
+    onInputChange: V,
+    noOptionsText: S,
+    highlightFirstOption: L = !1,
+    ["data-testid"]: P
+  } = r, k = ge(), w = i ?? k, O = (l) => P ? `${P}-${l}` : void 0, H = !!j && !h, I = `${w}-helper-text`, v = c ? N : _ ? [_] : [], { displayInputValue: A, populateInputField: T } = Ie({
+    controlledInputValue: F,
+    defaultInputValue: p,
+    selectedOption: _,
+    onInputChange: V
+  }), q = $e({
+    options: d,
+    searchTerm: A,
+    filterOption: E,
+    selectedOption: _,
+    multiple: c
+  }), z = (l) => {
+    if (c) {
+      const e = v.some((x) => x.id === l.id) ? v.filter((x) => x.id !== l.id) : [...v, l];
+      B?.(l, e), T("");
+    } else
+      B?.(l, [l]), T(l.label);
+  }, {
+    rootRef: X,
+    inputRef: Z,
+    inputProps: G,
+    listboxProps: D,
+    getListboxItemProps: ee,
+    isOpen: U,
+    openListbox: re,
+    anchorStyle: ne
+  } = De({
+    id: w,
+    options: q,
+    listboxLabel: M || s || "Options",
+    selectedOption: c ? void 0 : _,
+    disabled: f,
+    readOnly: R,
+    openOnFocus: $,
+    listboxMaxHeight: Q,
+    highlightFirstOption: L,
+    closeOnSelect: !c,
+    noOptionsText: S,
+    onSelect: z,
+    "data-testid": P
+  }), ie = (l) => {
+    X.current = l, typeof t == "function" ? t(l) : t && (t.current = l);
+  }, de = (l, W) => {
+    const e = ee(l, W);
+    if (c) {
+      const x = v.some((J) => J.id === l.id);
+      return { ...e, selected: x, "aria-selected": x };
+    }
+    return e;
+  }, se = (l) => {
+    const W = v.filter((e) => e.id !== l.id);
+    B?.(l, W);
+  }, le = (l) => {
+    c && l.key === "Backspace" && l.currentTarget.value === "" && v.length > 0 && se(v[v.length - 1]), G?.onKeyDown?.(l);
+  }, pe = (l) => {
+    T(l.target.value), U || re();
+  }, ce = b(o, n, {
+    [`${o}--negative`]: g
+  });
+  return /* @__PURE__ */ Y("div", { ref: ie, className: ce, children: [
+    /* @__PURE__ */ a(
+      me,
+      {
+        fieldId: w,
+        htmlForSuffix: "input",
+        label: s,
+        getTestId: O,
+        disabled: f,
+        negative: g,
+        required: u
+      }
+    ),
+    /* @__PURE__ */ a("div", { className: b(`${o}__field-row`), children: /* @__PURE__ */ Y(
+      "div",
+      {
+        className: b(`${o}__combobox-container`, {
+          [`${o}__combobox-container--error`]: !!h,
+          [`${o}__combobox-container--is-valid`]: H,
+          [`${o}__combobox-container--negative`]: g,
+          [`${o}__combobox-container--disabled`]: f,
+          [`${o}__combobox-container--readonly`]: R && !f
+        }),
+        style: ne,
+        children: [
+          c && /* @__PURE__ */ a(
+            we,
+            {
+              selectedItems: v,
+              getTestId: O,
+              disabled: f,
+              onRemove: se
+            }
+          ),
+          /* @__PURE__ */ a(
+            "input",
+            {
+              ...G,
+              ref: Z,
+              id: `${w}-input`,
+              "data-testid": O("input"),
+              onKeyDown: le,
+              onChange: pe,
+              value: A,
+              placeholder: y,
+              className: b(`${o}__input`, {
+                [`${o}__input--negative`]: g
+              }),
+              "aria-describedby": I,
+              "aria-invalid": !!h,
+              disabled: f,
+              readOnly: R
+            }
+          ),
+          /* @__PURE__ */ a(
+            xe,
+            {
+              getTestId: O,
+              loading: m,
+              disabled: f,
+              negative: g,
+              isValid: H,
+              isOpen: U,
+              showChevronOpen: !0
+            }
+          ),
+          /* @__PURE__ */ a(
+            "span",
+            {
+              className: b(`${o}__frame`, {
+                [`${o}__frame--negative`]: g
+              })
+            }
+          )
+        ]
+      }
+    ) }),
+    U && /* @__PURE__ */ a(te, { ...D, className: b(`${o}__listbox`), children: ye({
+      optionsToShow: q,
+      getListboxItemProps: de,
+      multiple: c,
+      fieldId: w,
+      noOptionsText: S
+    }) }),
+    /* @__PURE__ */ a(
+      ve,
+      {
+        errorText: h,
+        helperText: C,
+        helperTextId: I,
+        negative: g
+      }
+    )
+  ] });
+});
+Ce.displayName = "DropdownCombobox";
+const Ke = ({
+  options: r,
+  highlightFirstOption: t
+}) => {
+  const i = oe(null), s = oe({}), [d, n] = _e(
+    t ? r[0] : void 0
+  ), h = (u) => {
+    if (u) {
+      const j = u.getBoundingClientRect(), m = i.current?.getBoundingClientRect() || { top: 0, bottom: 0 };
+      (j.top < m.top || j.bottom > m.bottom) && u.scrollIntoView({ block: "nearest" });
+    }
+  };
+  return {
+    highlightedOption: d,
+    listboxRef: i,
+    optionRefs: s,
+    findNextOption: (u, j) => {
+      const m = j.filter((_) => !_.disabled);
+      if (!m.length) return;
+      const c = d ? m.findIndex((_) => _.id === d.id) : -1;
+      return u === "ArrowDown" ? m[(c + 1) % m.length] : m[(c - 1 + m.length) % m.length];
+    },
+    highlightOption: (u) => {
+      n(u ? { ...u } : void 0), u && h(s.current[u.id]);
+    },
+    highlightByClick: (u) => {
+      u.id !== d?.id && n({ ...u, isSetByClickEvent: !0 });
+    },
+    highlightSelected: (u, j) => {
+      requestAnimationFrame(() => {
+        n({ ...u, isSetByClickEvent: j === "CLICK" }), h(s.current[u.id]);
+      });
+    },
+    resetHighlight: () => {
+      n(void 0);
+    }
+  };
+}, Ve = (r, t) => {
+  const i = fe(
+    (s) => {
+      r && !r.contains(s.target) && t();
+    },
+    [t, r]
+  );
+  Oe(() => (document.addEventListener("mousedown", i), () => {
+    document.removeEventListener("mousedown", i);
+  }), [i]);
+}, He = ({
+  id: r,
+  variant: t,
+  options: i,
+  listboxLabel: s,
+  multiple: d = !1,
+  selectedOption: n,
+  selectedOptions: h = [],
+  onSelect: C,
+  filterOption: y,
+  inputValue: g,
+  defaultInputValue: R,
+  onInputChange: f,
+  noOptionsText: u,
+  highlightFirstOption: j = !1,
+  openOnFocus: m = !1,
+  listboxMaxHeight: c,
+  disabled: _ = !1,
+  readOnly: N = !1,
+  ["data-testid"]: B
+}) => {
+  const $ = t === "combobox", Q = ge(), M = oe(null), E = oe(null), F = oe(null), p = Ke({ options: i, highlightFirstOption: j }), { displayInputValue: V, populateInputField: S } = Ie({
+    controlledInputValue: g,
+    defaultInputValue: R,
+    selectedOption: n,
+    onInputChange: f
+  }), [L, P] = _e(!1), k = () => {
+    P(!1), p.resetHighlight();
+  };
+  Ve(M.current, k);
+  const w = ({ eventType: e }) => {
+    P(!0);
+    const x = d ? void 0 : n;
+    x && p.highlightSelected(x, e);
+  }, O = d ? h : n ? [n] : [], H = $ ? $e({
+    options: i,
+    searchTerm: V,
+    filterOption: y,
+    selectedOption: n,
+    multiple: d
+  }) : i, I = L && (!!H.length || !!u), v = (e) => B ? `${B}-${e}` : void 0, A = (e) => {
+    if (!(!e || e.disabled))
+      if (d) {
+        const J = O.some((K) => K.id === e.id) ? O.filter((K) => K.id !== e.id) : [...O, e];
+        C?.(e, J), $ && (S(""), F.current?.focus());
+      } else
+        C?.(e, [e]), $ && S(e.label), k(), ($ ? F : E).current?.focus();
+  }, T = (e) => {
+    I || w({ eventType: "KEYBOARD" });
+    const x = p.findNextOption(e, H);
+    p.highlightOption(x);
+  }, q = (e) => {
+    if (!(_ || N))
+      switch (e.key) {
+        case "ArrowUp":
+        case "ArrowDown":
+          e.preventDefault(), T(e.key);
+          break;
+        case "Enter": {
+          e.preventDefault(), I && p.highlightedOption ? A(p.highlightedOption) : I || w({ eventType: "KEYBOARD" });
+          break;
+        }
+        case " ": {
+          $ || (e.preventDefault(), I && p.highlightedOption ? A(p.highlightedOption) : I || w({ eventType: "KEYBOARD" }));
+          break;
+        }
+        case "Escape":
+          e.preventDefault(), k();
+          break;
+        case "Tab":
+          k();
+          break;
+        case "Home":
+        case "End":
+          $ && k();
+          break;
+      }
+  }, z = (e) => {
+    S(e.target.value), p.resetHighlight(), L || w({ eventType: "KEYBOARD" });
+  }, X = () => {
+    _ || N || (L ? k() : w({ eventType: "CLICK" }));
+  }, Z = () => {
+    !L && m && !_ && !N && w({ eventType: "KEYBOARD" }), F.current?.select();
+  }, G = () => {
+    setTimeout(() => {
+      const e = document.activeElement;
+      e !== document.body && !F.current?.contains(e) && !p.listboxRef.current?.contains(e) && !M.current?.contains(e) && (k(), $ && !d && S(n ? n.label : ""));
+    });
+  }, D = () => {
+    _ || N || (L ? k() : w({ eventType: "CLICK" }));
+  }, ee = (e) => {
+    if (_ || N) return;
+    const x = e.target.closest("button");
+    x && x !== E.current || D();
+  }, U = () => {
+    !L && m && !_ && !N && w({ eventType: "KEYBOARD" });
+  }, re = `${r}-listbox`, ne = (e) => `${r}-listbox-item-${e.id}`, ie = `--purpur-dropdown-${Q.replace(/:/g, "")}`, de = { anchorName: ie }, se = $ ? null : {
+    onClick: ee
+  }, le = fe(
+    (e) => {
+      if (p.listboxRef.current = e, e && typeof e.showPopover == "function")
+        try {
+          e.showPopover();
+        } catch {
+        }
+    },
+    [p.listboxRef]
+  ), pe = {
+    "aria-label": s,
+    "aria-expanded": I,
+    "data-testid": v("listbox"),
+    id: re,
+    ref: le,
+    onMouseLeave: () => p.resetHighlight(),
+    popover: "manual",
+    style: {
+      ...c ? {
+        maxHeight: typeof c == "number" ? `${c}px` : c
+      } : {},
+      positionAnchor: ie
+    }
+  }, ce = (e, x) => {
+    const J = O.some((ae) => ae.id === e.id), { highlightedOption: K } = p, ke = (e.id === K?.id || j && !K && x === 0) && !K?.isSetByClickEvent;
+    return {
+      "data-testid": v(`listbox-item-${e.id}`),
+      id: ne(e),
+      key: e.id,
+      onMouseMove: () => p.highlightByClick(e),
+      onMouseUp: () => A(e),
+      ref: (ae) => {
+        ae && (p.optionRefs.current[e.id] = ae);
+      },
+      tabIndex: -1,
+      selected: J,
+      disabled: e.disabled,
+      highlighted: ke,
+      hovered: e.id === K?.id && !!K?.isSetByClickEvent,
+      "aria-selected": J
+    };
+  }, l = $ ? {} : {
+    ref: E,
+    type: "button",
+    role: "combobox",
+    "aria-haspopup": "listbox",
+    "aria-expanded": I,
+    "aria-controls": re,
+    "aria-disabled": _,
+    "data-testid": v("trigger"),
+    id: `${r}-trigger`,
+    onKeyDown: q,
+    onFocus: U,
+    disabled: _,
+    tabIndex: _ ? -1 : 0,
+    style: de
+  }, W = $ ? {
+    ref: F,
+    role: "combobox",
+    "aria-autocomplete": "list",
+    "aria-expanded": I,
+    "aria-controls": re,
+    "aria-activedescendant": p.highlightedOption ? ne(p.highlightedOption) : void 0,
+    "data-testid": v("input"),
+    autoComplete: "off",
+    id: `${r}-input`,
+    type: "text",
+    value: V,
+    onChange: z,
+    onMouseDown: X,
+    onFocus: Z,
+    onBlur: G,
+    onKeyDown: q,
+    disabled: _,
+    readOnly: N
+  } : null;
+  return {
+    rootRef: M,
+    triggerContainerProps: se,
+    triggerProps: l,
+    inputProps: W,
+    listboxProps: pe,
+    getListboxItemProps: ce,
+    optionsToShow: H,
+    isOpen: I,
+    highlightedOption: p.highlightedOption,
+    selectedItems: O,
+    anchorStyle: de
+  };
+}, je = ue((r, t) => {
+  const {
+    id: i,
+    label: s,
+    options: d,
+    className: n,
+    errorText: h,
+    helperText: C,
+    placeholder: y,
+    negative: g = !1,
+    readOnly: R = !1,
+    disabled: f = !1,
+    required: u = !1,
+    valid: j = !1,
+    loading: m = !1,
+    multiple: c = !1,
+    selectedOption: _,
+    selectedOptions: N = [],
+    onSelect: B,
+    openOnFocus: $ = !1,
+    listboxMaxHeight: Q,
+    listboxLabel: M,
+    ["data-testid"]: E
+  } = r, F = ge(), p = i ?? F, V = (D) => E ? `${E}-${D}` : void 0, S = !!j && !h, L = `${p}-helper-text`, P = He({
+    id: p,
+    variant: "select",
+    options: d,
+    listboxLabel: M || s || "Options",
+    multiple: c,
+    selectedOption: _,
+    selectedOptions: N,
+    onSelect: B,
+    openOnFocus: $,
+    listboxMaxHeight: Q,
+    disabled: f,
+    readOnly: R,
+    "data-testid": E
+  }), k = (D) => {
+    P.rootRef.current = D, typeof t == "function" ? t(D) : t && (t.current = D);
+  }, {
+    triggerContainerProps: w,
+    triggerProps: O,
+    listboxProps: H,
+    getListboxItemProps: I,
+    optionsToShow: v,
+    isOpen: A,
+    selectedItems: T,
+    anchorStyle: q
+  } = P, z = {
+    ...O
+  };
+  delete z.style;
+  const X = (D) => {
+    const ee = T.filter((U) => U.id !== D.id);
+    B?.(D, ee);
+  }, Z = c ? T.length === 0 && y || "" : _?.label || y || "", G = b(o, n, {
+    [`${o}--negative`]: g
+  });
+  return /* @__PURE__ */ Y("div", { ref: k, className: G, children: [
+    /* @__PURE__ */ a(
+      me,
+      {
+        fieldId: p,
+        htmlForSuffix: "trigger",
+        label: s,
+        getTestId: V,
+        disabled: f,
+        negative: g,
+        required: u
+      }
+    ),
+    /* @__PURE__ */ a("div", { className: b(`${o}__field-row`), children: /* @__PURE__ */ Y(
+      "div",
+      {
+        ...w,
+        className: b(`${o}__trigger-container`, {
+          [`${o}__trigger-container--error`]: !!h,
+          [`${o}__trigger-container--is-valid`]: S,
+          [`${o}__trigger-container--negative`]: g,
+          [`${o}__trigger-container--disabled`]: f,
+          [`${o}__trigger-container--readonly`]: R && !f,
+          [`${o}__trigger-container--has-tags`]: c && T.length > 0
+        }),
+        style: q,
+        children: [
+          c && /* @__PURE__ */ a(
+            we,
+            {
+              selectedItems: T,
+              getTestId: V,
+              disabled: f,
+              onRemove: X,
+              isSelect: !0
+            }
+          ),
+          /* @__PURE__ */ a(
+            "button",
+            {
+              ...z,
+              className: b(`${o}__trigger`, {
+                [`${o}__trigger--is-valid`]: S,
+                [`${o}__trigger--negative`]: g,
+                [`${o}__trigger--disabled`]: f,
+                [`${o}__trigger--readonly`]: R && !f,
+                [`${o}__trigger--placeholder`]: !T.length
+              }),
+              "aria-describedby": L,
+              children: /* @__PURE__ */ a("span", { className: b(`${o}__trigger-text`), children: Z })
+            }
+          ),
+          /* @__PURE__ */ a(
+            xe,
+            {
+              getTestId: V,
+              loading: m,
+              disabled: f,
+              negative: g,
+              isValid: S,
+              isOpen: A,
+              readOnly: R,
+              showChevronOpen: !0
+            }
+          ),
+          /* @__PURE__ */ a(
+            "span",
+            {
+              className: b(`${o}__frame`, {
+                [`${o}__frame--negative`]: g
+              })
+            }
+          )
+        ]
+      }
+    ) }),
+    A && /* @__PURE__ */ a(te, { ...H, className: b(`${o}__listbox`), children: ye({
+      optionsToShow: v,
+      getListboxItemProps: I,
+      multiple: c,
+      fieldId: p
+    }) }),
+    /* @__PURE__ */ a(
+      ve,
+      {
+        errorText: h,
+        helperText: C,
+        helperTextId: L,
+        negative: g
+      }
+    )
+  ] });
+});
+je.displayName = "DropdownSelect";
+const Ye = ue((r, t) => r.combobox ? /* @__PURE__ */ a(Ce, { ref: t, ...r }) : /* @__PURE__ */ a(je, { ref: t, ...r }));
+Ye.displayName = "Dropdown";
+export {
+  Ye as D,
+  He as u
+};
+//# sourceMappingURL=dropdown-CBYTBaMW.mjs.map