se-design 1.0.79 → 1.0.81-dev1

package/dist/index25.js

@@ -1,308 +1,331 @@
-import n, { useState as I, useRef as L, useEffect as D } from "react";
-import { Popover as De } from "./index19.js";
-import { Icon as Y } from "./index6.js";
-import { Checkbox as ke } from "./index23.js";
-import { Button as Z } from "./index4.js";
-import { InputWithIcon as Ve } from "./index52.js";
-import { useStableId as ee } from "./index199.js";
-import { useCombobox as Ne } from "./index68.js";
-function h() {
-  return h = Object.assign ? Object.assign.bind() : function(t) {
-    for (var m = 1; m < arguments.length; m++) {
-      var b = arguments[m];
-      for (var v in b) ({}).hasOwnProperty.call(b, v) && (t[v] = b[v]);
+import n, { useState as F, useRef as ne, useEffect as R, useLayoutEffect as Pe } from "react";
+import { Popover as Ae } from "./index19.js";
+import { Icon as oe } from "./index6.js";
+import { Checkbox as $e } from "./index23.js";
+import { Button as le } from "./index4.js";
+import { InputWithIcon as Le } from "./index52.js";
+import { useStableId as q } from "./index83.js";
+import { useCombobox as re } from "./index68.js";
+function p() {
+  return p = Object.assign ? Object.assign.bind() : function(t) {
+    for (var g = 1; g < arguments.length; g++) {
+      var x = arguments[g];
+      for (var S in x) ({}).hasOwnProperty.call(x, S) && (t[S] = x[S]);
     }
     return t;
-  }, h.apply(null, arguments);
+  }, p.apply(null, arguments);
 }
-const Me = (t) => {
-  const m = t.selectedValue !== void 0, b = t.isOpen !== void 0, [v, te] = I(!1), [k, R] = I(""), [i, S] = I(-1), [oe, K] = I(() => t?.defaultSelectedValue ? Array.isArray(t?.defaultSelectedValue) ? t?.defaultSelectedValue : [t.defaultSelectedValue] : []), M = L(null), V = L(null), N = L(null), T = ee(void 0, "dropdown-label"), g = ee(void 0, "dropdown-listbox"), d = b ? t.isOpen : v, r = m ? Array.isArray(t.selectedValue) ? t.selectedValue : t.selectedValue ? [t.selectedValue] : [] : oe, P = (e) => {
-    b || te(e), t.onOpenChange?.(e);
-  }, $ = (e) => {
-    m || K(e);
+const je = (t) => {
+  const g = t.selectedValue !== void 0, x = t.isOpen !== void 0, [S, ae] = F(!1), [V, K] = F(""), [se, T] = F(() => t?.defaultSelectedValue ? Array.isArray(t?.defaultSelectedValue) ? t?.defaultSelectedValue : [t.defaultSelectedValue] : []), y = ne(null), I = ne(null), P = q(void 0, "dropdown-label"), H = q(void 0, "dropdown-value"), C = q(void 0, "dropdown-listbox"), i = x ? t.isOpen : S, r = g ? Array.isArray(t.selectedValue) ? t.selectedValue : t.selectedValue ? [t.selectedValue] : [] : se, D = (e) => {
+    x || ae(e), t.onOpenChange?.(e);
+  }, A = (e) => {
+    g || T(e);
   }, {
-    selectBy: x = "",
-    optionsUniqueBy: u = "",
-    displaySelected: ne = !1,
-    dropDownOptions: j,
-    defaultText: f = "Select",
-    iconColor: H = "var(--color-gray-700)",
-    disabled: E = !1,
-    dropdownClassName: ae = "",
-    hasError: q = !1,
-    errorMessage: le = "",
-    customDropdownContent: F = null,
-    isBorderless: re = !1,
-    shouldShowSearch: y = !1,
-    showSearchIcon: se = !0,
-    searchPlaceholder: U = "Search...",
-    searchResultEmptyMessage: W = "No results found",
-    ariaLabel: ce = "",
-    customSelectedValue: _ = "",
-    isWithPortal: z = !1
+    selectBy: d = "",
+    optionsUniqueBy: s = "",
+    displaySelected: ce = !1,
+    dropDownOptions: M,
+    defaultText: u = "Select",
+    iconColor: j = "var(--color-gray-700)",
+    disabled: k = !1,
+    dropdownClassName: ie = "",
+    hasError: W = !1,
+    errorMessage: de = "",
+    customDropdownContent: _ = null,
+    isBorderless: ue = !1,
+    shouldShowSearch: h = !1,
+    showSearchIcon: me = !0,
+    searchPlaceholder: z = "Search...",
+    searchResultEmptyMessage: J = "No results found",
+    ariaLabel: b = "",
+    customSelectedValue: $ = "",
+    isWithPortal: Q = !1,
+    firstOptionAsHeading: U = !1
   } = t;
-  D(() => {
-    if (!m) {
+  R(() => {
+    if (!g) {
       const e = t?.defaultSelectedValue ? Array.isArray(t?.defaultSelectedValue) ? t?.defaultSelectedValue : [t.defaultSelectedValue] : [];
-      K(e);
+      T(e);
     }
-  }, [t?.defaultSelectedValue, m]), D(() => {
-    d || (R(""), S(-1));
-  }, [d]), D(() => {
-    i >= 0 && document.getElementById(`${g}-option-${i}`)?.scrollIntoView({
-      block: "nearest"
+  }, [t?.defaultSelectedValue, g]), R(() => {
+    i || K("");
+  }, [i]), R(() => {
+    i && h && I.current && requestAnimationFrame(() => I.current?.focus());
+  }, [i, h]), Pe(() => {
+    t.popoverElementRef && (t.popoverElementRef.current = y.current?.element ?? null);
+  });
+  const a = t?.type === "multi-select", fe = () => V.trim() ? (M || []).filter((e) => (e?.[d]?.toString().toLowerCase() || "").includes(V.toLowerCase())) : M || [], L = (e) => {
+    A([e]), D(!1), t?.onOptionClick?.(e), requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        y.current?.focusTrigger();
+      });
     });
-  }, [i]), D(() => {
-    d && y && N.current && requestAnimationFrame(() => N.current?.focus());
-  }, [d, y]);
-  const s = t?.type === "multi-select", A = () => k.trim() ? (j || []).filter((e) => (e?.[x]?.toString().toLowerCase() || "").includes(k.toLowerCase())) : j || [], O = (e) => {
-    $([e]), P(!1), t?.onOptionClick?.(e);
-  }, C = A(), {
-    listboxProps: ie,
-    getOptionProps: de,
-    highlightedIndex: ue,
-    containerProps: me,
-    inputProps: c
-  } = Ne({
-    items: s ? [] : C,
+  }, c = fe(), {
+    listboxProps: ge,
+    getOptionProps: be,
+    highlightedIndex: ye,
+    setHighlightedIndex: he,
+    containerProps: ve,
+    inputProps: X
+  } = re({
+    items: a ? [] : c,
     // Only use for single-select
-    isOpen: d && !s,
-    onOpenChange: P,
+    isOpen: i && !a,
+    onOpenChange: D,
     onSelect: (e) => {
-      O(e);
+      L(e);
     },
-    listboxId: g,
-    disabled: s || E,
-    hasItems: C.length > 0
-  }), fe = (e, a = !1) => s ? f : a && _ ? _ : e?.[x] || f, pe = () => {
-    $([]), t?.onClear?.();
-  }, J = (e, a = !1) => {
+    listboxId: C,
+    disabled: a || k,
+    hasItems: c.length > 0
+  }), {
+    inputProps: B,
+    listboxProps: O,
+    highlightedIndex: w,
+    setHighlightedIndex: pe
+  } = re({
+    items: a ? c : [],
+    isOpen: i && a,
+    onOpenChange: D,
+    onSelect: () => {
+    },
+    listboxId: C,
+    disabled: !a,
+    loop: !1,
+    hasItems: c.length > 0
+  }), xe = (e, o = !1) => a ? u : o && $ ? $ : e?.[d] || u, Se = () => {
+    A([]), t?.onClear?.();
+  }, G = (e, o = !1) => {
     if (t?.renderOptionChip)
-      return t?.renderOptionChip(e, a);
-    if (s && r?.length > 0) {
-      const o = r[0]?.[x] || "", l = r.length - 1;
+      return t?.renderOptionChip(e, o);
+    if (a && r?.length > 0) {
+      const f = r[0]?.[d] || "", E = r.length - 1;
       return /* @__PURE__ */ n.createElement("div", {
         className: "option-chip flex items-center w-full"
       }, /* @__PURE__ */ n.createElement("div", {
-        className: `${l > 0 ? "w-full" : "flex-1"} truncate`
-      }, `${f}: ${o}`), l > 0 && /* @__PURE__ */ n.createElement("div", {
+        className: `${E > 0 ? "w-full" : "flex-1"} truncate`
+      }, `${u}: ${f}`), E > 0 && /* @__PURE__ */ n.createElement("div", {
         className: "flex-shrink-0"
-      }, "+", l));
+      }, "+", E));
     }
+    const l = xe(e, o), m = !!t?.label || !!t?.ariaLabelledBy, v = o && u && e?.[d] && !$ && !m;
     return /* @__PURE__ */ n.createElement("p", {
       className: "option-chip flex flex-1 items-center justify-between"
-    }, fe(e, a));
-  }, Q = () => {
-    const e = y && !s ? {
-      role: c.role,
-      "aria-expanded": c["aria-expanded"],
-      "aria-haspopup": c["aria-haspopup"],
-      "aria-controls": c["aria-controls"],
-      "aria-autocomplete": c["aria-autocomplete"],
-      "aria-activedescendant": c["aria-activedescendant"],
-      onKeyDown: c.onKeyDown
-    } : {};
-    return /* @__PURE__ */ n.createElement("div", {
-      className: " w-full relative flex items-center border-b border-[var(--color-gray-300)]"
-    }, /* @__PURE__ */ n.createElement(Ve, {
-      leftIcon: se ? {
-        name: "search",
-        position: "left",
-        style: {
-          color: "var(--color-gray-500)"
-        }
-      } : void 0,
-      value: k,
-      onChange: (a) => R(a),
-      placeholder: U,
+    }, v ? `${u}: ${l}` : l);
+  }, Y = (e) => /* @__PURE__ */ n.createElement("div", {
+    className: " w-full relative flex items-center border-b border-[var(--color-gray-300)]"
+  }, /* @__PURE__ */ n.createElement(Le, {
+    leftIcon: me ? {
+      name: "search",
+      position: "left",
       style: {
-        margin: 0,
-        gap: 0
-      },
-      inputStyle: {
-        width: "100%",
-        border: "none",
-        outline: "none"
-      },
-      automationId: "se-design-dropdown-search",
-      ariaLabel: U,
-      inputRef: N,
-      inputProps: e
-    }));
-  }, be = (e, a) => {
-    const o = e[x], l = r[0]?.[x] || f, w = u?.length ? e[u] == r[0]?.[u] : !0, p = ne && o === l && w, Ce = ue === a, Ie = s ? {} : de(a, p);
-    return /* @__PURE__ */ n.createElement("div", h({
+        color: "var(--color-gray-500)"
+      }
+    } : void 0,
+    value: V,
+    onChange: (o) => K(o),
+    placeholder: z,
+    style: {
+      margin: 0,
+      gap: 0
+    },
+    inputStyle: {
+      width: "100%",
+      border: "none",
+      outline: "none"
+    },
+    automationId: "se-design-dropdown-search",
+    ariaLabel: z,
+    inputRef: I,
+    inputProps: e
+  })), Z = () => Y(a ? {
+    ...B,
+    onKeyDown: (e) => te(e, !0)
+  } : {
+    ...X,
+    onKeyDown: (e) => {
+      X.onKeyDown(e), e.key === "Escape" && requestAnimationFrame(() => y.current?.focusTrigger());
+    }
+  }), we = (e, o) => {
+    const l = e[d], m = r[0]?.[d] || u, v = s?.length ? e[s] == r[0]?.[s] : !0, f = ce && l === m && v, E = ye === o, Ve = a ? {} : be(o, f);
+    return /* @__PURE__ */ n.createElement("div", p({
       key: e.id || e.value,
-      className: `option break-words px-3 py-2 hover:bg-gray-100 cursor-pointer select-none flex items-center justify-between ${p ? "selected" : ""} ${Ce ? "bg-gray-100" : ""}`,
-      onClick: () => O(e),
-      onKeyDown: (B) => {
-        (B.key === "Enter" || B.key === " ") && (B.preventDefault(), O(e));
+      className: `option break-words px-3 py-2 hover:bg-[var(--color-gray-100)] focus:bg-[var(--color-gray-100)] cursor-pointer select-none flex items-center justify-between ${f ? "selected" : ""} ${E ? "bg-[var(--color-blue-50)]" : ""}`,
+      onClick: () => L(e),
+      onKeyDown: (N) => {
+        N.key === "Enter" || N.key === " " ? (N.preventDefault(), L(e)) : N.key === "Escape" && requestAnimationFrame(() => y.current?.focusTrigger());
       },
       tabIndex: -1,
-      "data-automation-id": `dropdown-option-${e?.automationId || a}`
-    }, Ie, {
-      "aria-selected": p ? "true" : "false"
-    }), J({
+      "data-automation-id": `dropdown-option-${e?.automationId || o}`
+    }, Ve, {
+      "aria-selected": f ? "true" : "false"
+    }), G({
       ...e,
-      isOptionSelected: p
-    }, !1), p && /* @__PURE__ */ n.createElement(Y, {
+      isOptionSelected: f
+    }, !1), f && /* @__PURE__ */ n.createElement(oe, {
       name: "checkmark",
-      stroke: H
+      stroke: j
     }));
-  }, ge = () => /* @__PURE__ */ n.createElement("div", h({
+  }, Ee = () => /* @__PURE__ */ n.createElement(n.Fragment, null, t?.label && U && /* @__PURE__ */ n.createElement("div", {
+    "aria-hidden": "true",
+    className: "px-3 pt-2 pb-1 text-[var(--color-gray-650)] text-xs cursor-default select-none"
+  }, t.label), /* @__PURE__ */ n.createElement("div", p({
     className: "dropdown-content dropdown-options",
-    "aria-label": `${f} options`
-  }, ie), y && Q(), /* @__PURE__ */ n.createElement("div", {
+    "aria-label": `${u} options`
+  }, ge), h && Z(), /* @__PURE__ */ n.createElement("div", {
     className: "flex flex-col max-h-80 overflow-y-auto"
-  }, C.length > 0 ? C.map((e, a) => be(e, a)) : /* @__PURE__ */ n.createElement("div", {
+  }, c.length > 0 ? c.map((e, o) => we(e, o)) : /* @__PURE__ */ n.createElement("div", {
     className: "px-3 py-4 text-center text-[var(--color-gray-700)] text-sm",
     role: "status",
     "aria-live": "polite"
-  }, W))), X = (e, a) => {
-    let o = [];
-    e ? o = [...r, a] : o = r?.filter((l) => l[u] !== a[u]), $(o);
-  }, ye = () => {
-    M.current?.togglePopover(), t?.onApply?.(r);
-  }, he = (e) => {
-    const a = A();
-    if (e.key === "ArrowDown")
-      e.preventDefault(), e.stopPropagation(), S((o) => o < a.length - 1 ? o + 1 : o);
-    else if (e.key === "ArrowUp")
-      e.preventDefault(), e.stopPropagation(), S((o) => o > 0 ? o - 1 : 0);
-    else if ((e.key === " " || e.key === "Enter") && (e.preventDefault(), i >= 0 && i < a.length)) {
-      const o = a[i], l = r.some((w) => w[u] === o[u]);
-      X(!l, o);
+  }, J)))), ee = (e, o) => {
+    let l = [];
+    e ? l = [...r, o] : l = r?.filter((m) => m[s] !== o[s]), A(l);
+  }, Ie = () => {
+    y.current?.togglePopover(), t?.onApply?.(r);
+  }, te = (e, o = !1) => {
+    if (!(o && e.key === " ")) {
+      if (e.key === "Enter" || e.key === " ") {
+        if (e.preventDefault(), w >= 0 && w < c.length) {
+          const l = c[w], m = r.some((v) => v[s] === l[s]);
+          ee(!m, l);
+        }
+        return;
+      }
+      B.onKeyDown(e), e.key === "Escape" && (e.stopPropagation(), requestAnimationFrame(() => y.current?.focusTrigger()));
     }
-  }, ve = (e, a) => {
-    const o = r.some((p) => p[u] === e[u]), l = `${g}-option-${a}`, w = i === a;
+  }, Ce = (e, o) => {
+    const l = r.some((f) => f[s] === e[s]), m = `${C}-option-${o}`, v = w === o;
     return /* @__PURE__ */ n.createElement("div", {
       key: e.id || e.value,
-      id: l,
+      id: m,
       role: "option",
-      "aria-selected": o,
-      className: `option px-3 py-2 cursor-pointer select-none flex items-center gap-2 ${w ? "bg-gray-100" : "hover:bg-gray-100"}`,
-      onClick: () => X(!o, e),
-      "data-automation-id": `dropdown-option-${e?.automationId || a}`
-    }, /* @__PURE__ */ n.createElement(ke, {
+      "aria-selected": l,
+      className: `option px-3 py-2 hover:bg-[var(--color-gray-100)] focus:bg-[var(--color-gray-100)] cursor-pointer select-none flex items-center gap-2 ${v ? "bg-[var(--color-blue-50)]" : ""}`,
+      onClick: () => ee(!l, e),
+      "data-automation-id": `dropdown-option-${e?.automationId || o}`
+    }, /* @__PURE__ */ n.createElement($e, {
       tabIndex: -1,
       ariaHidden: !0,
-      checked: o,
+      checked: l,
       onChange: () => {
       }
     }), /* @__PURE__ */ n.createElement("span", {
       className: "checkbox-label"
     }, e?.label));
-  }, xe = () => {
-    const e = A(), a = i >= 0 ? `${g}-option-${i}` : void 0;
-    return /* @__PURE__ */ n.createElement("div", {
-      className: "dropdown-content dropdown-options",
-      onKeyDown: (o) => {
-        o.key === "Tab" && o.stopPropagation();
-      }
-    }, /* @__PURE__ */ n.createElement("div", {
-      id: g,
-      ref: V,
-      role: "listbox",
-      "aria-label": `${f} options`,
-      "aria-multiselectable": "true",
-      tabIndex: -1,
-      style: {
-        outline: "none"
-      },
-      "aria-activedescendant": a,
-      onKeyDown: he,
-      onFocus: () => {
-        i === -1 && e.length > 0 && S(0);
-      }
-    }, y && Q(), /* @__PURE__ */ n.createElement("div", {
-      className: "flex flex-col max-h-80 overflow-y-auto"
-    }, e.length > 0 ? e.map((o, l) => ve(o, l)) : /* @__PURE__ */ n.createElement("div", {
-      className: "px-3 py-4 text-center text-[var(--color-gray-700)] text-sm",
-      role: "status",
-      "aria-live": "polite"
-    }, W))), /* @__PURE__ */ n.createElement("div", {
-      className: "flex items-center justify-end gap-4 p-3 border-t border-[var(--color-gray-200)]",
-      onKeyDown: (o) => {
-        o.key === "Tab" && o.shiftKey && (o.preventDefault(), o.stopPropagation(), V.current?.focus());
-      }
-    }, /* @__PURE__ */ n.createElement(Z, {
-      label: "Clear",
-      type: "link",
-      size: "sm",
-      onClick: pe,
-      automationId: "se-design-dropdown-clear-button",
-      ariaLabel: `Clear ${f} selection`
-    }), /* @__PURE__ */ n.createElement(Z, {
-      label: "Apply",
-      type: "primary",
-      size: "sm",
-      onClick: ye,
-      automationId: "se-design-dropdown-apply-button"
-    })));
-  }, we = () => {
-    const e = d ? "border-[var(--color-blue-500)]" : E ? "border-[var(--color-gray-300)]" : "border-[var(--color-gray-600)]", a = q ? "border-[var(--color-red-500)]" : "", o = `dropdown-src-element bg-[var(--color-white)] flex px-3 py-2 ${re ? "border-0" : `border rounded-md ${a || e}`} flex items-center ${ae}`;
+  }, De = () => /* @__PURE__ */ n.createElement("div", {
+    className: "dropdown-content dropdown-options",
+    onKeyDown: (e) => {
+      e.key === "Tab" && e.stopPropagation();
+    }
+  }, h && Z(), /* @__PURE__ */ n.createElement("div", p({}, O, {
+    "aria-label": `${u} options`,
+    "aria-multiselectable": "true",
+    style: {
+      outline: "none"
+    }
+  }, h ? {} : {
+    tabIndex: -1,
+    "aria-activedescendant": B["aria-activedescendant"],
+    onKeyDown: (e) => te(e, !1),
+    onFocus: () => {
+      w === -1 && c.length > 0 && pe(0);
+    }
+  }), /* @__PURE__ */ n.createElement("div", {
+    className: "flex flex-col max-h-80 overflow-y-auto"
+  }, c.length > 0 ? c.map((e, o) => Ce(e, o)) : /* @__PURE__ */ n.createElement("div", {
+    className: "px-3 py-4 text-center text-[var(--color-gray-700)] text-sm",
+    role: "status",
+    "aria-live": "polite"
+  }, J))), /* @__PURE__ */ n.createElement("div", {
+    className: "flex items-center justify-end gap-4 p-3 border-t border-[var(--color-gray-200)]",
+    onKeyDown: (e) => {
+      e.key === "Tab" && e.shiftKey && (e.preventDefault(), e.stopPropagation(), h ? I.current?.focus() : O.ref.current?.focus());
+    }
+  }, /* @__PURE__ */ n.createElement(le, {
+    label: "Clear",
+    type: "link",
+    size: "sm",
+    onClick: Se,
+    automationId: "se-design-dropdown-clear-button"
+  }), /* @__PURE__ */ n.createElement(le, {
+    label: "Apply",
+    type: "primary",
+    size: "sm",
+    onClick: Ie,
+    automationId: "se-design-dropdown-apply-button"
+  }))), ke = () => {
+    const e = i ? "border-[var(--color-blue-500)]" : k ? "border-[var(--color-gray-300)]" : "border-[var(--color-gray-600)]", o = W ? "border-[var(--color-red-500)]" : "", l = `dropdown-src-element bg-[var(--color-white)] flex px-3 py-2 ${ue ? "border-0" : `border rounded-md ${o || e}`} flex items-center ${ie}`;
     return /* @__PURE__ */ n.createElement("div", {
-      className: o
+      className: l
     }, /* @__PURE__ */ n.createElement("div", {
+      id: H,
       className: "flex-1 min-w-0",
       "data-automation-id": t?.dropDownSelectAutomationId || "selected-dropdown-value"
-    }, J(r[0], !0)), /* @__PURE__ */ n.createElement("div", {
+    }, G(r[0], !0)), /* @__PURE__ */ n.createElement("div", {
       className: "flex-shrink-0 ml-2",
       "aria-hidden": "true"
-    }, /* @__PURE__ */ n.createElement(Y, {
+    }, /* @__PURE__ */ n.createElement(oe, {
       name: "chevron",
-      rotation: d ? "180" : "0",
+      rotation: i ? "180" : "0",
       className: "transition-transform",
-      stroke: H
+      stroke: j
     })));
-  }, Se = () => ce || f || "Select option", G = y ? "button" : "combobox", Ee = G === "combobox" && !s && c ? {
-    "aria-activedescendant": c["aria-activedescendant"],
-    "aria-controls": c["aria-controls"],
-    "aria-expanded": c["aria-expanded"]
-  } : {};
+  }, Ne = () => {
+    const e = r[0]?.[d];
+    return b && e ? `${b}, ${e}` : b || u || "Select option";
+  };
   return /* @__PURE__ */ n.createElement("div", {
     className: `se-design-dropdown-container${t?.className ? ` ${t?.className}` : ""}`,
     style: t?.style
-  }, t?.label && /* @__PURE__ */ n.createElement("div", {
-    id: T,
-    className: "se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm"
-  }, t?.label), /* @__PURE__ */ n.createElement("div", h({
+  }, t?.label ? /* @__PURE__ */ n.createElement("div", {
+    id: P,
+    className: `se-design-dropdown-label ${U ? "sr-only" : "mb-[3px] text-[var(--color-gray-700)] text-sm"}`
+  }, t?.label) : !t?.ariaLabelledBy && b ? /* @__PURE__ */ n.createElement("span", {
+    id: P,
+    className: "sr-only"
+  }, b) : null, /* @__PURE__ */ n.createElement("div", p({
     style: t?.style,
-    className: `${E ? "bg-[var(--color-gray-50)] rounded-md cursor-not-allowed" : ""}`
-  }, s ? {} : {
-    ...me,
+    className: `${k ? "bg-[var(--color-gray-50)] rounded-md cursor-not-allowed" : ""}`
+  }, a ? {} : {
+    ...ve,
     // Portal content lives in document.body — focus moving into it looks like "focus out" to
     // the container's blur handler, causing immediate close. Suppress it; the Popover's own
     // onBlur handler checks both source and portal content and handles dismissal correctly.
-    ...z ? {
+    ...Q ? {
       onBlurCapture: void 0
     } : {}
-  }), /* @__PURE__ */ n.createElement(De, h({
-    ref: M,
-    isPopoverOpen: d,
-    isWithPortal: z,
-    renderPopoverContents: F || (s ? xe : ge),
+  }), /* @__PURE__ */ n.createElement(Ae, p({
+    ref: y,
+    isPopoverOpen: i,
+    isWithPortal: Q,
+    renderPopoverContents: _ || (a ? De : Ee),
     contentWidth: "full",
     renderPopoverSrcElement: t.renderSrcElement ? () => t.renderSrcElement({
-      isOpen: d,
+      isOpen: i,
       selectedValue: r
-    }) : we,
+    }) : ke,
     onPopoverToggle: (e) => {
-      P(e), e && s && setTimeout(() => V.current?.focus(), 50);
+      if (D(e), e && !a && r.length > 0) {
+        const o = c.findIndex((l) => s ? l[s] === r[0]?.[s] : l[d] === r[0]?.[d]);
+        o >= 0 && he(o);
+      }
+      e && a && !h && requestAnimationFrame(() => requestAnimationFrame(() => O.ref.current?.focus()));
     },
-    disabled: E,
+    disabled: k,
     automationId: t?.dropDownSrcAutomationId,
     popoverContentAutomationId: t?.dropDownContentAutomationId,
-    ariaLabelledBy: t?.label ? T : t?.ariaLabelledBy,
-    ariaLabel: t?.label || t?.ariaLabelledBy ? void 0 : Se(),
-    sourceRole: G
-  }, Ee, s ? {
-    "aria-controls": g
-  } : {}))), q && /* @__PURE__ */ n.createElement("div", {
+    ariaLabelledBy: t?.label || t?.ariaLabelledBy || b ? [t?.label || !t?.ariaLabelledBy && b ? P : t?.ariaLabelledBy, H].filter(Boolean).join(" ") : void 0,
+    ariaLabel: !t?.label && !b && !t?.ariaLabelledBy ? Ne() : void 0,
+    sourceRole: "button",
+    "aria-haspopup": "listbox"
+  }, i ? {
+    "aria-controls": C
+  } : {}))), W && /* @__PURE__ */ n.createElement("div", {
     className: "text-[var(--color-red-500)] text-sm"
-  }, le));
+  }, de));
 };
 export {
-  Me as Dropdown
+  je as Dropdown
 };
 //# sourceMappingURL=index25.js.map