@purpur/library 9.0.10 → 9.1.0

package/dist/dropdown-C-Ze4gvG.mjs

@@ -0,0 +1,771 @@
+import { jsxs as M, jsx as a, Fragment as he } from "react/jsx-runtime";
+import { useState as le, forwardRef as _e, useId as ue, useRef as Z, useCallback as fe, useEffect as Oe } from "react";
+import { L as ee } from "./listbox-DG4KmQP_.mjs";
+import { e as De } from "./use-autocomplete.es-CVv3z8t6.mjs";
+import { C as ke } from "./checkbox-D6qWgpWR.mjs";
+import { a as ge } from "./dismissable-chip-group-D-gD93ON.mjs";
+import { F as Re } from "./field-error-text-CBSX8dGx.mjs";
+import { F as Ne } from "./field-helper-text-C5ee4SFV.mjs";
+import { r as Se } from "./check-circle-filled.es-umBwOv5_.mjs";
+import { l as Le } from "./chevron-down.es-PCIIj6oG.mjs";
+import { L as Te } from "./label-7sJe5-pX.mjs";
+import { a as Be } from "./spinner-DRQN6YdK.mjs";
+import { c as Ee } from "./bind-CU-R61T-.mjs";
+const Fe = {
+  "purpur-dropdown": "_purpur-dropdown_1fi2v_1",
+  "purpur-dropdown--negative": "_purpur-dropdown--negative_1fi2v_11",
+  "purpur-dropdown__label": "_purpur-dropdown__label_1fi2v_14",
+  "purpur-dropdown__field-row": "_purpur-dropdown__field-row_1fi2v_19",
+  "purpur-dropdown__frame": "_purpur-dropdown__frame_1fi2v_23",
+  "purpur-dropdown__frame--negative": "_purpur-dropdown__frame--negative_1fi2v_30",
+  "purpur-dropdown__trigger-container": "_purpur-dropdown__trigger-container_1fi2v_33",
+  "purpur-dropdown__chip-group": "_purpur-dropdown__chip-group_1fi2v_44",
+  "purpur-dropdown__trigger-container--has-tags": "_purpur-dropdown__trigger-container--has-tags_1fi2v_49",
+  "purpur-dropdown__trigger-container--disabled": "_purpur-dropdown__trigger-container--disabled_1fi2v_52",
+  "purpur-dropdown__trigger-container--readonly": "_purpur-dropdown__trigger-container--readonly_1fi2v_52",
+  "purpur-dropdown__trigger-container--negative": "_purpur-dropdown__trigger-container--negative_1fi2v_59",
+  "purpur-dropdown__trigger-container--error": "_purpur-dropdown__trigger-container--error_1fi2v_62",
+  "purpur-dropdown__trigger-container--is-valid": "_purpur-dropdown__trigger-container--is-valid_1fi2v_65",
+  "purpur-dropdown__input": "_purpur-dropdown__input_1fi2v_68",
+  "purpur-dropdown__trigger": "_purpur-dropdown__trigger_1fi2v_33",
+  "purpur-dropdown__trigger--placeholder": "_purpur-dropdown__trigger--placeholder_1fi2v_109",
+  "purpur-dropdown__trigger--is-valid": "_purpur-dropdown__trigger--is-valid_1fi2v_112",
+  "purpur-dropdown__trigger--disabled": "_purpur-dropdown__trigger--disabled_1fi2v_115",
+  "purpur-dropdown__trigger--readonly": "_purpur-dropdown__trigger--readonly_1fi2v_119",
+  "purpur-dropdown__trigger--negative": "_purpur-dropdown__trigger--negative_1fi2v_123",
+  "purpur-dropdown__trigger-text": "_purpur-dropdown__trigger-text_1fi2v_136",
+  "purpur-dropdown__combobox-container": "_purpur-dropdown__combobox-container_1fi2v_142",
+  "purpur-dropdown__combobox-container--disabled": "_purpur-dropdown__combobox-container--disabled_1fi2v_152",
+  "purpur-dropdown__combobox-container--readonly": "_purpur-dropdown__combobox-container--readonly_1fi2v_159",
+  "purpur-dropdown__combobox-container--error": "_purpur-dropdown__combobox-container--error_1fi2v_166",
+  "purpur-dropdown__combobox-container--is-valid": "_purpur-dropdown__combobox-container--is-valid_1fi2v_169",
+  "purpur-dropdown__combobox-container--negative": "_purpur-dropdown__combobox-container--negative_1fi2v_172",
+  "purpur-dropdown__input--negative": "_purpur-dropdown__input--negative_1fi2v_211",
+  "purpur-dropdown__chip-group--select": "_purpur-dropdown__chip-group--select_1fi2v_228",
+  "purpur-dropdown__end-adornments": "_purpur-dropdown__end-adornments_1fi2v_231",
+  "purpur-dropdown__chevron-icon": "_purpur-dropdown__chevron-icon_1fi2v_242",
+  "purpur-dropdown__chevron-icon--open": "_purpur-dropdown__chevron-icon--open_1fi2v_247",
+  "purpur-dropdown__chevron-icon--disabled": "_purpur-dropdown__chevron-icon--disabled_1fi2v_250",
+  "purpur-dropdown__chevron-icon--readonly": "_purpur-dropdown__chevron-icon--readonly_1fi2v_253",
+  "purpur-dropdown__chevron-icon--negative": "_purpur-dropdown__chevron-icon--negative_1fi2v_256",
+  "purpur-dropdown__valid-icon": "_purpur-dropdown__valid-icon_1fi2v_259",
+  "purpur-dropdown__listbox": "_purpur-dropdown__listbox_1fi2v_262",
+  "purpur-dropdown__checkbox-item-multiple": "_purpur-dropdown__checkbox-item-multiple_1fi2v_272",
+  "purpur-dropdown__checkbox-container": "_purpur-dropdown__checkbox-container_1fi2v_275"
+}, h = Ee.bind(Fe), o = "purpur-dropdown", be = ({
+  fieldId: r,
+  htmlForSuffix: t,
+  label: i,
+  getTestId: s,
+  disabled: d,
+  negative: n,
+  required: g
+}) => i ? /* @__PURE__ */ M(
+  Te,
+  {
+    htmlFor: t ? `${r}-${t}` : r,
+    className: h(`${o}__label`),
+    "data-testid": s("label"),
+    disabled: d,
+    negative: n,
+    children: [
+      g && /* @__PURE__ */ a("span", { "aria-hidden": !0, children: "*" }),
+      i
+    ]
+  }
+) : null, ve = ({
+  getTestId: r,
+  loading: t,
+  disabled: i,
+  negative: s,
+  isValid: d,
+  isOpen: n,
+  readOnly: g,
+  showChevronOpen: $
+}) => /* @__PURE__ */ a("span", { className: h(`${o}__end-adornments`), children: t ? /* @__PURE__ */ a(
+  Be,
+  {
+    disabled: i,
+    size: "xxs",
+    negative: s,
+    "data-testid": r("spinner")
+  }
+) : /* @__PURE__ */ M(he, { children: [
+  d && /* @__PURE__ */ a(
+    Se,
+    {
+      "data-testid": r("valid-icon"),
+      className: h(`${o}__valid-icon`)
+    }
+  ),
+  /* @__PURE__ */ a(
+    Le,
+    {
+      className: h(`${o}__chevron-icon`, {
+        [`${o}__chevron-icon--open`]: $ && n,
+        [`${o}__chevron-icon--disabled`]: i,
+        [`${o}__chevron-icon--readonly`]: g && !i,
+        [`${o}__chevron-icon--is-valid`]: d,
+        [`${o}__chevron-icon--negative`]: s
+      }),
+      "data-testid": r("dropdown-icon"),
+      size: "sm"
+    }
+  )
+] }) }), me = ({
+  selectedItems: r,
+  getTestId: t,
+  disabled: i,
+  onRemove: s,
+  isSelect: d
+}) => r.length ? /* @__PURE__ */ a(
+  ge,
+  {
+    className: h(`${o}__chip-group`, {
+      [`${o}__chip-group--select`]: d
+    }),
+    "data-testid": t("tags"),
+    size: "sm",
+    children: r.map((n) => /* @__PURE__ */ a(
+      ge.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, we = ({
+  errorText: r,
+  helperText: t,
+  helperTextId: i,
+  negative: s
+}) => /* @__PURE__ */ M(he, { children: [
+  r && /* @__PURE__ */ a(Re, { negative: s, children: r }),
+  t && !r && /* @__PURE__ */ a(Ne, { id: i, negative: s, children: t })
+] }), xe = ({
+  optionsToShow: r,
+  getListboxItemProps: t,
+  multiple: i,
+  fieldId: s,
+  noOptionsText: d
+}) => d !== void 0 && !r.length ? /* @__PURE__ */ a(ee.Item, { noninteractive: !0, children: d }) : r.map((n, g) => {
+  const { key: $, selected: x, ...u } = t(n, g);
+  return i ? /* @__PURE__ */ a(
+    ee.Item,
+    {
+      ...u,
+      className: h(`${o}__checkbox-item-multiple`),
+      selected: !!x,
+      hideSelectedIcon: !0,
+      children: /* @__PURE__ */ M("span", { className: h(`${o}__checkbox-container`), children: [
+        /* @__PURE__ */ a(ke, { id: `${s}-checkbox-${n.id}`, checked: !!x, "aria-hidden": !0 }),
+        n.label
+      ] })
+    },
+    $
+  ) : /* @__PURE__ */ a(ee.Item, { ...u, selected: !!x, children: n.label }, $);
+}), 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))
+  );
+}, ye = ({
+  options: r,
+  searchTerm: t,
+  filterOption: i,
+  selectedOption: s,
+  multiple: d
+}) => !d && s && s.label === t ? r : Ae(r, t, i), $e = ({
+  controlledInputValue: r,
+  defaultInputValue: t,
+  selectedOption: i,
+  onInputChange: s
+}) => {
+  const [d, n] = le(
+    (typeof r == "string" ? r : t ?? i?.label) ?? ""
+  );
+  return {
+    displayInputValue: typeof r == "string" ? r : d,
+    populateInputField: (x) => {
+      s?.(x), n(x);
+    }
+  };
+}, Ie = _e((r, t) => {
+  const {
+    id: i,
+    label: s,
+    options: d,
+    className: n,
+    errorText: g,
+    helperText: $,
+    placeholder: x,
+    negative: u = !1,
+    readOnly: S = !1,
+    disabled: f = !1,
+    required: l = !1,
+    valid: I,
+    loading: b,
+    multiple: c = !1,
+    selectedOption: _,
+    selectedOptions: E = [],
+    onSelect: F,
+    openOnFocus: C = !1,
+    listboxMaxHeight: j,
+    listboxLabel: q,
+    filterOption: K,
+    inputValue: A,
+    defaultInputValue: p,
+    onInputChange: V,
+    noOptionsText: L,
+    highlightFirstOption: T = !1,
+    ["data-testid"]: P
+  } = r, D = ue(), m = i ?? D, k = (e) => P ? `${P}-${e}` : void 0, H = !!I && !g, y = `${m}-helper-text`, v = c ? E : _ ? [_] : [], { displayInputValue: R, populateInputField: U } = $e({
+    controlledInputValue: A,
+    defaultInputValue: p,
+    selectedOption: _,
+    onInputChange: V
+  }), Y = ye({
+    options: d,
+    searchTerm: R,
+    filterOption: K,
+    selectedOption: _,
+    multiple: c
+  }), G = (e) => {
+    if (c) {
+      const B = v.some((w) => w.id === e.id) ? v.filter((w) => w.id !== e.id) : [...v, e];
+      F?.(e, B), U("");
+    } else
+      F?.(e, [e]), U(e.label);
+  }, {
+    rootRef: W,
+    inputRef: J,
+    inputProps: O,
+    listboxProps: Q,
+    getListboxItemProps: X,
+    isOpen: z,
+    openListbox: re,
+    anchorStyle: oe
+  } = De({
+    id: m,
+    options: Y,
+    listboxLabel: q || s || "Options",
+    selectedOption: c ? void 0 : _,
+    disabled: f,
+    readOnly: S,
+    openOnFocus: C,
+    listboxMaxHeight: j,
+    highlightFirstOption: T,
+    closeOnSelect: !c,
+    noOptionsText: L,
+    onSelect: G,
+    "data-testid": P
+  }), te = (e) => {
+    W.current = e, typeof t == "function" ? t(e) : t && (t.current = e);
+  }, de = (e, N) => {
+    const B = X(e, N);
+    if (c) {
+      const w = v.some((ce) => ce.id === e.id);
+      return { ...B, selected: w, "aria-selected": w };
+    }
+    return B;
+  }, ne = (e) => {
+    const N = v.filter((B) => B.id !== e.id);
+    F?.(e, N);
+  }, se = (e) => {
+    c && e.key === "Backspace" && e.currentTarget.value === "" && v.length > 0 && ne(v[v.length - 1]), O?.onKeyDown?.(e);
+  }, ae = (e) => {
+    U(e.target.value), z || re();
+  }, pe = h(o, n, {
+    [`${o}--negative`]: u
+  });
+  return /* @__PURE__ */ M("div", { ref: te, className: pe, children: [
+    /* @__PURE__ */ a(
+      be,
+      {
+        fieldId: m,
+        htmlForSuffix: "input",
+        label: s,
+        getTestId: k,
+        disabled: f,
+        negative: u,
+        required: l
+      }
+    ),
+    /* @__PURE__ */ a("div", { className: h(`${o}__field-row`), children: /* @__PURE__ */ M(
+      "div",
+      {
+        className: h(`${o}__combobox-container`, {
+          [`${o}__combobox-container--error`]: !!g,
+          [`${o}__combobox-container--is-valid`]: H,
+          [`${o}__combobox-container--negative`]: u,
+          [`${o}__combobox-container--disabled`]: f,
+          [`${o}__combobox-container--readonly`]: S && !f
+        }),
+        style: oe,
+        children: [
+          c && /* @__PURE__ */ a(
+            me,
+            {
+              selectedItems: v,
+              getTestId: k,
+              disabled: f,
+              onRemove: ne
+            }
+          ),
+          /* @__PURE__ */ a(
+            "input",
+            {
+              ...O,
+              ref: J,
+              id: `${m}-input`,
+              "data-testid": k("input"),
+              onKeyDown: se,
+              onChange: ae,
+              value: R,
+              placeholder: x,
+              className: h(`${o}__input`, {
+                [`${o}__input--negative`]: u
+              }),
+              "aria-describedby": y,
+              "aria-invalid": !!g,
+              disabled: f,
+              readOnly: S
+            }
+          ),
+          /* @__PURE__ */ a(
+            ve,
+            {
+              getTestId: k,
+              loading: b,
+              disabled: f,
+              negative: u,
+              isValid: H,
+              isOpen: z,
+              showChevronOpen: !0
+            }
+          ),
+          /* @__PURE__ */ a(
+            "span",
+            {
+              className: h(`${o}__frame`, {
+                [`${o}__frame--negative`]: u
+              })
+            }
+          )
+        ]
+      }
+    ) }),
+    z && /* @__PURE__ */ a(ee, { ...Q, className: h(`${o}__listbox`), children: xe({
+      optionsToShow: Y,
+      getListboxItemProps: de,
+      multiple: c,
+      fieldId: m,
+      noOptionsText: L
+    }) }),
+    /* @__PURE__ */ a(
+      we,
+      {
+        errorText: g,
+        helperText: $,
+        helperTextId: y,
+        negative: u
+      }
+    )
+  ] });
+});
+Ie.displayName = "DropdownCombobox";
+const Pe = ({
+  options: r,
+  highlightFirstOption: t
+}) => {
+  const i = Z(null), s = Z({}), [d, n] = le(
+    t ? r[0] : void 0
+  ), g = (l) => {
+    if (l) {
+      const I = l.getBoundingClientRect(), b = i.current?.getBoundingClientRect() || { top: 0, bottom: 0 };
+      (I.top < b.top || I.bottom > b.bottom) && l.scrollIntoView({ block: "nearest" });
+    }
+  };
+  return {
+    highlightedOption: d,
+    listboxRef: i,
+    optionRefs: s,
+    findNextOption: (l, I) => {
+      const b = I.filter((_) => !_.disabled);
+      if (!b.length) return;
+      const c = d ? b.findIndex((_) => _.id === d.id) : -1;
+      return l === "ArrowDown" ? b[(c + 1) % b.length] : b[(c - 1 + b.length) % b.length];
+    },
+    highlightOption: (l) => {
+      n(l ? { ...l } : void 0), l && g(s.current[l.id]);
+    },
+    highlightByClick: (l) => {
+      l.id !== d?.id && n({ ...l, isSetByClickEvent: !0 });
+    },
+    highlightSelected: (l, I) => {
+      requestAnimationFrame(() => {
+        n({ ...l, isSetByClickEvent: I === "CLICK" }), g(s.current[l.id]);
+      });
+    },
+    resetHighlight: () => {
+      n(void 0);
+    }
+  };
+}, Ke = (r, t) => {
+  const i = fe(
+    (s) => {
+      r && !r.contains(s.target) && t();
+    },
+    [t, r]
+  );
+  Oe(() => (document.addEventListener("mousedown", i), () => {
+    document.removeEventListener("mousedown", i);
+  }), [i]);
+}, Ve = ({
+  id: r,
+  variant: t,
+  options: i,
+  listboxLabel: s,
+  multiple: d = !1,
+  selectedOption: n,
+  selectedOptions: g = [],
+  onSelect: $,
+  filterOption: x,
+  inputValue: u,
+  defaultInputValue: S,
+  onInputChange: f,
+  noOptionsText: l,
+  highlightFirstOption: I = !1,
+  openOnFocus: b = !1,
+  listboxMaxHeight: c,
+  disabled: _ = !1,
+  readOnly: E = !1,
+  ["data-testid"]: F
+}) => {
+  const C = t === "combobox", j = ue(), q = Z(null), K = Z(null), A = Z(null), p = Pe({ options: i, highlightFirstOption: I }), { displayInputValue: V, populateInputField: L } = $e({
+    controlledInputValue: u,
+    defaultInputValue: S,
+    selectedOption: n,
+    onInputChange: f
+  }), [T, P] = le(!1), D = () => {
+    P(!1), p.resetHighlight();
+  };
+  Ke(q.current, D);
+  const m = ({ eventType: e }) => {
+    P(!0);
+    const N = d ? void 0 : n;
+    N && p.highlightSelected(N, e);
+  }, k = d ? g : n ? [n] : [], H = C ? ye({
+    options: i,
+    searchTerm: V,
+    filterOption: x,
+    selectedOption: n,
+    multiple: d
+  }) : i, y = T && (!!H.length || !!l), v = (e) => F ? `${F}-${e}` : void 0, R = (e) => {
+    if (!(!e || e.disabled))
+      if (d) {
+        const B = k.some((w) => w.id === e.id) ? k.filter((w) => w.id !== e.id) : [...k, e];
+        $?.(e, B), C && (L(""), A.current?.focus());
+      } else
+        $?.(e, [e]), C && L(e.label), D(), (C ? A : K).current?.focus();
+  }, U = (e) => {
+    y || m({ eventType: "KEYBOARD" });
+    const N = p.findNextOption(e, H);
+    p.highlightOption(N);
+  }, Y = (e) => {
+    if (!(_ || E))
+      switch (e.key) {
+        case "ArrowUp":
+        case "ArrowDown":
+          e.preventDefault(), U(e.key);
+          break;
+        case "Enter": {
+          e.preventDefault(), y && p.highlightedOption ? R(p.highlightedOption) : y || m({ eventType: "KEYBOARD" });
+          break;
+        }
+        case " ": {
+          C || (e.preventDefault(), y && p.highlightedOption ? R(p.highlightedOption) : y || m({ eventType: "KEYBOARD" }));
+          break;
+        }
+        case "Escape":
+          e.preventDefault(), D();
+          break;
+        case "Tab":
+          D();
+          break;
+        case "Home":
+        case "End":
+          C && D();
+          break;
+      }
+  }, G = (e) => {
+    L(e.target.value), p.resetHighlight(), T || m({ eventType: "KEYBOARD" });
+  }, W = () => {
+    _ || E || (T ? D() : m({ eventType: "CLICK" }));
+  }, J = () => {
+    !T && b && !_ && !E && m({ eventType: "KEYBOARD" }), A.current?.select();
+  }, O = () => {
+    setTimeout(() => {
+      const e = document.activeElement;
+      e !== document.body && !A.current?.contains(e) && !p.listboxRef.current?.contains(e) && !q.current?.contains(e) && (D(), C && !d && L(n ? n.label : ""));
+    });
+  }, Q = () => {
+    _ || E || (T ? D() : m({ eventType: "CLICK" }));
+  }, X = () => {
+    !T && b && !_ && !E && m({ eventType: "KEYBOARD" });
+  }, z = `${r}-listbox`, re = (e) => `${r}-listbox-item-${e.id}`, oe = `--purpur-dropdown-${j.replace(/:/g, "")}`, te = { anchorName: oe }, de = fe(
+    (e) => {
+      if (p.listboxRef.current = e, e && typeof e.showPopover == "function")
+        try {
+          e.showPopover();
+        } catch {
+        }
+    },
+    [p.listboxRef]
+  ), ne = {
+    "aria-label": s,
+    "aria-expanded": y,
+    "data-testid": v("listbox"),
+    id: z,
+    ref: de,
+    onMouseLeave: () => p.resetHighlight(),
+    popover: "manual",
+    style: {
+      ...c ? {
+        maxHeight: typeof c == "number" ? `${c}px` : c
+      } : {},
+      positionAnchor: oe
+    }
+  }, se = (e, N) => {
+    const B = k.some((ie) => ie.id === e.id), { highlightedOption: w } = p, ce = (e.id === w?.id || I && !w && N === 0) && !w?.isSetByClickEvent;
+    return {
+      "data-testid": v(`listbox-item-${e.id}`),
+      id: re(e),
+      key: e.id,
+      onMouseMove: () => p.highlightByClick(e),
+      onMouseUp: () => R(e),
+      ref: (ie) => {
+        ie && (p.optionRefs.current[e.id] = ie);
+      },
+      tabIndex: -1,
+      selected: B,
+      disabled: e.disabled,
+      highlighted: ce,
+      hovered: e.id === w?.id && !!w?.isSetByClickEvent,
+      "aria-selected": B
+    };
+  }, ae = C ? {} : {
+    ref: K,
+    type: "button",
+    role: "combobox",
+    "aria-haspopup": "listbox",
+    "aria-expanded": y,
+    "aria-controls": z,
+    "aria-disabled": _,
+    "data-testid": v("trigger"),
+    id: `${r}-trigger`,
+    onClick: Q,
+    onKeyDown: Y,
+    onFocus: X,
+    disabled: _,
+    tabIndex: _ ? -1 : 0,
+    style: te
+  }, pe = C ? {
+    ref: A,
+    role: "combobox",
+    "aria-autocomplete": "list",
+    "aria-expanded": y,
+    "aria-controls": z,
+    "aria-activedescendant": p.highlightedOption ? re(p.highlightedOption) : void 0,
+    "data-testid": v("input"),
+    autoComplete: "off",
+    id: `${r}-input`,
+    type: "text",
+    value: V,
+    onChange: G,
+    onMouseDown: W,
+    onFocus: J,
+    onBlur: O,
+    onKeyDown: Y,
+    disabled: _,
+    readOnly: E
+  } : null;
+  return {
+    rootRef: q,
+    triggerProps: ae,
+    inputProps: pe,
+    listboxProps: ne,
+    getListboxItemProps: se,
+    optionsToShow: H,
+    isOpen: y,
+    highlightedOption: p.highlightedOption,
+    selectedItems: k,
+    anchorStyle: te
+  };
+}, Ce = _e((r, t) => {
+  const {
+    id: i,
+    label: s,
+    options: d,
+    className: n,
+    errorText: g,
+    helperText: $,
+    placeholder: x,
+    negative: u = !1,
+    readOnly: S = !1,
+    disabled: f = !1,
+    required: l = !1,
+    valid: I = !1,
+    loading: b = !1,
+    multiple: c = !1,
+    selectedOption: _,
+    selectedOptions: E = [],
+    onSelect: F,
+    openOnFocus: C = !1,
+    listboxMaxHeight: j,
+    listboxLabel: q,
+    ["data-testid"]: K
+  } = r, A = ue(), p = i ?? A, V = (O) => K ? `${K}-${O}` : void 0, L = !!I && !g, T = `${p}-helper-text`, P = Ve({
+    id: p,
+    variant: "select",
+    options: d,
+    listboxLabel: q || s || "Options",
+    multiple: c,
+    selectedOption: _,
+    selectedOptions: E,
+    onSelect: F,
+    openOnFocus: C,
+    listboxMaxHeight: j,
+    disabled: f,
+    readOnly: S,
+    "data-testid": K
+  }), D = (O) => {
+    P.rootRef.current = O, typeof t == "function" ? t(O) : t && (t.current = O);
+  }, {
+    triggerProps: m,
+    listboxProps: k,
+    getListboxItemProps: H,
+    optionsToShow: y,
+    isOpen: v,
+    selectedItems: R,
+    anchorStyle: U
+  } = P, Y = {
+    ...m
+  };
+  delete Y.style;
+  const G = (O) => {
+    const Q = R.filter((X) => X.id !== O.id);
+    F?.(O, Q);
+  }, W = c ? R.length === 0 && x || "" : _?.label || x || "", J = h(o, n, {
+    [`${o}--negative`]: u
+  });
+  return /* @__PURE__ */ M("div", { ref: D, className: J, children: [
+    /* @__PURE__ */ a(
+      be,
+      {
+        fieldId: p,
+        htmlForSuffix: "trigger",
+        label: s,
+        getTestId: V,
+        disabled: f,
+        negative: u,
+        required: l
+      }
+    ),
+    /* @__PURE__ */ a("div", { className: h(`${o}__field-row`), children: /* @__PURE__ */ M(
+      "div",
+      {
+        className: h(`${o}__trigger-container`, {
+          [`${o}__trigger-container--error`]: !!g,
+          [`${o}__trigger-container--is-valid`]: L,
+          [`${o}__trigger-container--negative`]: u,
+          [`${o}__trigger-container--disabled`]: f,
+          [`${o}__trigger-container--readonly`]: S && !f,
+          [`${o}__trigger-container--has-tags`]: c && R.length > 0
+        }),
+        style: U,
+        children: [
+          c && /* @__PURE__ */ a(
+            me,
+            {
+              selectedItems: R,
+              getTestId: V,
+              disabled: f,
+              onRemove: G,
+              isSelect: !0
+            }
+          ),
+          /* @__PURE__ */ a(
+            "button",
+            {
+              ...Y,
+              className: h(`${o}__trigger`, {
+                [`${o}__trigger--is-valid`]: L,
+                [`${o}__trigger--negative`]: u,
+                [`${o}__trigger--disabled`]: f,
+                [`${o}__trigger--readonly`]: S && !f,
+                [`${o}__trigger--placeholder`]: !R.length
+              }),
+              "aria-describedby": T,
+              children: /* @__PURE__ */ a("span", { className: h(`${o}__trigger-text`), children: W })
+            }
+          ),
+          /* @__PURE__ */ a(
+            ve,
+            {
+              getTestId: V,
+              loading: b,
+              disabled: f,
+              negative: u,
+              isValid: L,
+              isOpen: v,
+              readOnly: S,
+              showChevronOpen: !0
+            }
+          ),
+          /* @__PURE__ */ a(
+            "span",
+            {
+              className: h(`${o}__frame`, {
+                [`${o}__frame--negative`]: u
+              })
+            }
+          )
+        ]
+      }
+    ) }),
+    v && /* @__PURE__ */ a(ee, { ...k, className: h(`${o}__listbox`), children: xe({
+      optionsToShow: y,
+      getListboxItemProps: H,
+      multiple: c,
+      fieldId: p
+    }) }),
+    /* @__PURE__ */ a(
+      we,
+      {
+        errorText: g,
+        helperText: $,
+        helperTextId: T,
+        negative: u
+      }
+    )
+  ] });
+});
+Ce.displayName = "DropdownSelect";
+const He = _e((r, t) => r.combobox ? /* @__PURE__ */ a(Ie, { ref: t, ...r }) : /* @__PURE__ */ a(Ce, { ref: t, ...r }));
+He.displayName = "Dropdown";
+export {
+  He as D,
+  Ve as u
+};
+//# sourceMappingURL=dropdown-C-Ze4gvG.mjs.map