se-design 1.0.84-dev.0 → 1.0.85-dev.1

package/dist/index25.js

@@ -1,136 +1,136 @@
-import n, { useState as j, useRef as ce, useEffect as O, useLayoutEffect as Le } from "react";
+import n, { useState as W, useRef as ie, useEffect as B, useLayoutEffect as Ke } from "react";
 import { Popover as Fe } from "./index19.js";
 import { Icon as de } from "./index6.js";
-import { Checkbox as Oe } from "./index23.js";
+import { Checkbox as Le } from "./index23.js";
 import { Button as ue } from "./index4.js";
-import { InputWithIcon as Be } from "./index52.js";
-import { useStableId as U } from "./index205.js";
+import { InputWithIcon as Oe } from "./index52.js";
+import { useStableId as _ } from "./index205.js";
 import { useCombobox as me } from "./index68.js";
-import { useLiveAnnouncer as Te } from "./index77.js";
-function p() {
-  return p = Object.assign ? Object.assign.bind() : function(t) {
-    for (var b = 1; b < arguments.length; b++) {
-      var x = arguments[b];
+import { getFocusableElements as Be } from "./index71.js";
+import "./index72.js";
+import { announce as Te } from "./index75.js";
+function b() {
+  return b = Object.assign ? Object.assign.bind() : function(t) {
+    for (var h = 1; h < arguments.length; h++) {
+      var x = arguments[h];
       for (var w in x) ({}).hasOwnProperty.call(x, w) && (t[w] = x[w]);
     }
     return t;
-  }, p.apply(null, arguments);
+  }, b.apply(null, arguments);
 }
-const Qe = (t) => {
-  const b = t.selectedValue !== void 0, x = t.isOpen !== void 0, [w, fe] = j(!1), [S, W] = j(""), [ye, _] = j(() => t?.defaultSelectedValue ? Array.isArray(t?.defaultSelectedValue) ? t?.defaultSelectedValue : [t.defaultSelectedValue] : []), m = ce(null), P = ce(null), {
-    announce: ge
-  } = Te(), B = U(void 0, "dropdown-label"), z = U(void 0, "dropdown-value"), N = U(void 0, "dropdown-listbox"), s = x ? t.isOpen : w, l = b ? Array.isArray(t.selectedValue) ? t.selectedValue : t.selectedValue ? [t.selectedValue] : [] : ye, V = (e) => {
+const Ge = (t) => {
+  const h = t.selectedValue !== void 0, x = t.isOpen !== void 0, [w, fe] = W(!1), [S, z] = W(""), [ye, J] = W(() => t?.defaultSelectedValue ? Array.isArray(t?.defaultSelectedValue) ? t?.defaultSelectedValue : [t.defaultSelectedValue] : []), d = ie(null), E = ie(null), T = _(void 0, "dropdown-label"), Q = _(void 0, "dropdown-value"), V = _(void 0, "dropdown-listbox"), l = x ? t.isOpen : w, s = h ? Array.isArray(t.selectedValue) ? t.selectedValue : t.selectedValue ? [t.selectedValue] : [] : ye, $ = (e) => {
     x || fe(e), t.onOpenChange?.(e);
-  }, T = (e) => {
-    b || _(e);
+  }, q = (e) => {
+    h || J(e);
   }, {
-    selectBy: f = "",
-    optionsUniqueBy: c = "",
-    displaySelected: pe = !1,
-    dropDownOptions: J,
-    defaultText: u = "Select",
-    iconColor: Q = "var(--color-gray-700)",
-    disabled: $ = !1,
-    dropdownClassName: be = "",
-    hasError: X = !1,
-    errorMessage: he = "",
-    customDropdownContent: G = null,
-    isBorderless: ve = !1,
-    shouldShowSearch: d = !1,
-    showSearchIcon: xe = !0,
-    searchPlaceholder: Y = "Search...",
-    searchResultEmptyMessage: E = "No results found",
-    ariaLabel: h = "",
+    selectBy: g = "",
+    optionsUniqueBy: u = "",
+    displaySelected: ge = !1,
+    dropDownOptions: A,
+    defaultText: y = "Select",
+    iconColor: X = "var(--color-gray-700)",
+    disabled: K = !1,
+    dropdownClassName: pe = "",
+    hasError: G = !1,
+    errorMessage: be = "",
+    customDropdownContent: Y = null,
+    isBorderless: he = !1,
+    shouldShowSearch: i = !1,
+    showSearchIcon: ve = !0,
+    searchPlaceholder: Z = "Search...",
+    searchResultEmptyMessage: C = "No results found",
+    ariaLabel: v = "",
     customSelectedValue: R = "",
-    isWithPortal: Z = !1,
+    isWithPortal: M = !1,
     firstOptionAsHeading: ee = !1
   } = t;
-  O(() => {
-    if (!b) {
+  B(() => {
+    if (!h) {
       const e = t?.defaultSelectedValue ? Array.isArray(t?.defaultSelectedValue) ? t?.defaultSelectedValue : [t.defaultSelectedValue] : [];
-      _(e);
+      J(e);
     }
-  }, [t?.defaultSelectedValue, b]), O(() => {
-    s || W("");
-  }, [s]), O(() => {
-    s && d && P.current && requestAnimationFrame(() => P.current?.focus());
-  }, [s, d]), Le(() => {
-    t.popoverElementRef && (t.popoverElementRef.current = m.current?.element ?? null);
+  }, [t?.defaultSelectedValue, h]), B(() => {
+    l || z("");
+  }, [l]), B(() => {
+    l && i && E.current && requestAnimationFrame(() => E.current?.focus());
+  }, [l, i]), Ke(() => {
+    t.popoverElementRef && (t.popoverElementRef.current = d.current?.element ?? null);
   });
-  const i = t?.type === "multi-select", we = () => S.trim() ? (J || []).filter((e) => (e?.[f]?.toString().toLowerCase() || "").includes(S.toLowerCase())) : J || [], A = (e) => {
-    T([e]), V(!1), t?.onOptionClick?.(e), requestAnimationFrame(() => {
+  const c = t?.type === "multi-select", xe = () => S.trim() ? (A || []).filter((e) => (e?.[g]?.toString().toLowerCase() || "").includes(S.toLowerCase())) : A || [], F = (e) => {
+    q([e]), $(!1), t?.onOptionClick?.(e), requestAnimationFrame(() => {
       requestAnimationFrame(() => {
-        m.current?.focusTrigger();
+        d.current?.focusTrigger();
       });
     });
-  }, r = we(), {
-    listboxProps: q,
-    getOptionProps: Se,
-    highlightedIndex: C,
+  }, a = xe(), {
+    listboxProps: H,
+    getOptionProps: we,
+    highlightedIndex: I,
     setHighlightedIndex: te,
-    containerProps: M,
-    inputProps: K,
-    isKeyboardFocused: Ee
+    containerProps: j,
+    inputProps: L,
+    isKeyboardFocused: Se
   } = me({
-    items: i ? [] : r,
+    items: c ? [] : a,
     // Only use for single-select
-    isOpen: s && !i,
-    onOpenChange: V,
+    isOpen: l && !c,
+    onOpenChange: $,
     onSelect: (e) => {
-      A(e);
+      F(e);
     },
-    listboxId: N,
-    disabled: i || $,
-    hasItems: r.length > 0
+    listboxId: V,
+    disabled: c || K,
+    hasItems: a.length > 0
   }), {
-    inputProps: H,
-    listboxProps: L,
-    containerProps: I,
-    highlightedIndex: D,
-    setHighlightedIndex: Ce,
-    isKeyboardFocused: Ie
+    inputProps: U,
+    listboxProps: D,
+    containerProps: k,
+    highlightedIndex: P,
+    setHighlightedIndex: Ee,
+    isKeyboardFocused: Ce
   } = me({
-    items: i ? r : [],
-    isOpen: s && i,
-    onOpenChange: V,
+    items: c ? a : [],
+    isOpen: l && c,
+    onOpenChange: $,
     onSelect: () => {
     },
-    listboxId: N,
-    disabled: !i,
+    listboxId: V,
+    disabled: !c,
     loop: !1,
-    hasItems: r.length > 0,
+    hasItems: a.length > 0,
     closeOnTab: !1
   });
-  O(() => {
-    s && r.length === 0 && S.trim() && ge(E, {
+  B(() => {
+    l && a.length === 0 && (S.trim() || A?.length === 0) && Te(C, {
       assertiveness: "polite",
       batchId: "dropdown-empty-state",
       delay: 300
     });
-  }, [r.length, s, S]);
-  const De = (e, o = !1) => i ? u : o && R ? R : e?.[f] || u, ke = () => {
-    T([]), t?.onClear?.();
+  }, [a.length, l, S, A?.length]);
+  const Ie = (e, o = !1) => c ? y : o && R ? R : e?.[g] || y, De = () => {
+    q([]), t?.onClear?.();
   }, oe = (e, o = !1) => {
     if (t?.renderOptionChip)
       return t?.renderOptionChip(e, o);
-    if (i && l?.length > 0) {
-      const g = l[0]?.[f] || "", k = l.length - 1;
+    if (c && s?.length > 0) {
+      const f = s[0]?.[g] || "", N = s.length - 1;
       return /* @__PURE__ */ n.createElement("div", {
         className: "option-chip flex items-center w-full"
       }, /* @__PURE__ */ n.createElement("div", {
-        className: `${k > 0 ? "w-full" : "flex-1"} truncate`
-      }, `${u}: ${g}`), k > 0 && /* @__PURE__ */ n.createElement("div", {
+        className: `${N > 0 ? "w-full" : "flex-1"} truncate`
+      }, `${y}: ${f}`), N > 0 && /* @__PURE__ */ n.createElement("div", {
         className: "flex-shrink-0"
-      }, "+", k));
+      }, "+", N));
     }
-    const a = De(e, o), y = !!t?.label || !!t?.ariaLabelledBy, v = o && u && e?.[f] && !R && !y;
+    const r = Ie(e, o), m = !!t?.label || !!t?.ariaLabelledBy, p = o && y && e?.[g] && !R && !m;
     return /* @__PURE__ */ n.createElement("p", {
       className: "option-chip flex flex-1 items-center justify-between"
-    }, v ? `${u}: ${a}` : a);
+    }, p ? `${y}: ${r}` : r);
   }, ne = (e) => /* @__PURE__ */ n.createElement("div", {
     className: " w-full relative flex items-center border-b border-[var(--color-gray-300)]"
-  }, /* @__PURE__ */ n.createElement(Be, {
-    leftIcon: xe ? {
+  }, /* @__PURE__ */ n.createElement(Oe, {
+    leftIcon: ve ? {
       name: "search",
       position: "left",
       style: {
@@ -138,8 +138,8 @@ const Qe = (t) => {
       }
     } : void 0,
     value: S,
-    onChange: (o) => W(o),
-    placeholder: Y,
+    onChange: (o) => z(o),
+    placeholder: Z,
     style: {
       margin: 0,
       gap: 0
@@ -150,241 +150,255 @@ const Qe = (t) => {
       outline: "none"
     },
     automationId: "se-design-dropdown-search",
-    ariaLabel: Y,
-    inputRef: P,
+    ariaLabel: Z,
+    inputRef: E,
     inputProps: e
-  })), re = () => ne(i ? {
-    ...H,
+  })), re = () => ne(c ? {
+    ...U,
     onKeyDown: (e) => se(e, !0)
   } : {
-    ...K,
+    ...L,
     onKeyDown: (e) => {
-      K.onKeyDown(e), e.key === "Escape" && requestAnimationFrame(() => m.current?.focusTrigger());
+      L.onKeyDown(e), e.key === "Escape" && requestAnimationFrame(() => d.current?.focusTrigger());
     }
   }), ae = (e, o) => {
-    const a = e[f], y = l[0]?.[f] || u, v = c?.length ? e[c] == l[0]?.[c] : !0, g = pe && a === y && v, k = C === o, Ke = i ? {} : Se(o, g);
-    return /* @__PURE__ */ n.createElement("div", p({
+    const r = e[g], m = s[0]?.[g] || y, p = u?.length ? e[u] == s[0]?.[u] : !0, f = ge && r === m && p, N = I === o, Ae = c ? {} : we(o, f);
+    return /* @__PURE__ */ n.createElement("div", b({
       key: e.id || e.value,
-      className: `option break-words px-3 py-2 hover:bg-[var(--color-gray-100)] cursor-pointer select-none flex items-center justify-between ${g ? "selected" : ""} ${k ? `bg-[var(--color-gray-100)]${Ee ? " outline outline-[length:var(--focus-width)] -outline-offset-2 outline-[var(--focus-color)]" : ""}` : ""}`,
-      onClick: () => A(e),
-      onKeyDown: (F) => {
-        F.key === "Enter" || F.key === " " ? (F.preventDefault(), A(e)) : F.key === "Escape" && requestAnimationFrame(() => m.current?.focusTrigger());
+      className: `option break-words px-3 py-2 hover:bg-[var(--color-gray-100)] cursor-pointer select-none flex items-center justify-between ${f ? "selected" : ""} ${N ? `bg-[var(--color-gray-100)]${Se ? " outline outline-[length:var(--focus-width)] -outline-offset-2 outline-[var(--focus-color)]" : ""}` : ""}`,
+      onClick: () => F(e),
+      onKeyDown: (O) => {
+        O.key === "Enter" || O.key === " " ? (O.preventDefault(), F(e)) : O.key === "Escape" && requestAnimationFrame(() => d.current?.focusTrigger());
       },
       tabIndex: -1,
       "data-automation-id": `dropdown-option-${e?.automationId || o}`
-    }, Ke, {
-      "aria-selected": g ? "true" : "false"
+    }, Ae, {
+      "aria-selected": f ? "true" : "false"
     }), oe({
       ...e,
-      isOptionSelected: g
-    }, !1), g && /* @__PURE__ */ n.createElement(de, {
+      isOptionSelected: f
+    }, !1), f && /* @__PURE__ */ n.createElement(de, {
       name: "checkmark",
-      stroke: Q
+      stroke: X
     }));
-  }, Pe = () => /* @__PURE__ */ n.createElement(n.Fragment, null, t?.label && ee && /* @__PURE__ */ n.createElement("div", {
+  }, ke = () => /* @__PURE__ */ n.createElement(n.Fragment, null, t?.label && ee && /* @__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), d && re(), /* @__PURE__ */ n.createElement("div", p({
-    className: `dropdown-content dropdown-options${d ? "" : " flex flex-col max-h-80 overflow-y-auto"}`
-  }, d ? {} : {
-    ...q,
-    "aria-label": `${u} options`,
+  }, t.label), i && re(), /* @__PURE__ */ n.createElement("div", b({
+    className: `dropdown-content dropdown-options${i ? "" : " flex flex-col max-h-80 overflow-y-auto"}`
+  }, i ? {} : {
+    ...H,
+    "aria-label": `${y} options`,
     style: {
       outline: "none"
     },
     tabIndex: -1,
-    "aria-activedescendant": K["aria-activedescendant"],
+    "aria-activedescendant": L["aria-activedescendant"],
     onKeyDown: (e) => {
-      if (M.onKeyDownCapture?.(e), e.key === " ") {
-        e.preventDefault(), C >= 0 && r[C] && A(r[C]);
+      if (j.onKeyDownCapture?.(e), e.key === " ") {
+        e.preventDefault(), I >= 0 && a[I] && F(a[I]);
         return;
       }
-      K.onKeyDown(e);
+      L.onKeyDown(e);
     },
     onFocus: () => {
-      C === -1 && r.length > 0 && te(0);
+      I === -1 && a.length > 0 && te(0);
     }
-  }), d ? /* @__PURE__ */ n.createElement("div", p({
+  }), i ? /* @__PURE__ */ n.createElement("div", b({
     className: "flex flex-col max-h-80 overflow-y-auto",
-    "aria-label": `${u} options`
-  }, q), r.length > 0 ? r.map((e, o) => ae(e, o)) : /* @__PURE__ */ n.createElement("div", {
+    "aria-label": `${y} options`
+  }, H), a.length > 0 ? a.map((e, o) => ae(e, o)) : /* @__PURE__ */ n.createElement("div", {
     className: "px-3 py-4 text-center text-[var(--color-gray-700)] text-sm"
-  }, E)) : r.length > 0 ? r.map((e, o) => ae(e, o)) : /* @__PURE__ */ n.createElement("div", {
+  }, C)) : a.length > 0 ? a.map((e, o) => ae(e, o)) : /* @__PURE__ */ n.createElement("div", {
     className: "px-3 py-4 text-center text-[var(--color-gray-700)] text-sm"
-  }, E))), le = (e, o) => {
-    let a = [];
-    e ? a = [...l, o] : a = l?.filter((y) => y[c] !== o[c]), T(a);
-  }, Ne = () => {
-    m.current?.togglePopover(), t?.onApply?.(l);
+  }, C))), le = (e, o) => {
+    let r = [];
+    e ? r = [...s, o] : r = s?.filter((m) => m[u] !== o[u]), q(r);
+  }, Pe = () => {
+    d.current?.togglePopover(), d.current?.focusTrigger(), t?.onApply?.(s);
   }, se = (e, o = !1) => {
     if (!(o && e.key === " ")) {
       if (e.key === "Enter" || e.key === " ") {
-        if (e.preventDefault(), D >= 0 && D < r.length) {
-          const a = r[D], y = l.some((v) => v[c] === a[c]);
-          le(!y, a);
+        if (e.preventDefault(), P >= 0 && P < a.length) {
+          const r = a[P], m = s.some((p) => p[u] === r[u]);
+          le(!m, r);
         }
         return;
       }
-      H.onKeyDown(e), e.key === "Escape" && (e.stopPropagation(), requestAnimationFrame(() => m.current?.focusTrigger()));
+      U.onKeyDown(e), e.key === "Escape" && (e.stopPropagation(), requestAnimationFrame(() => d.current?.focusTrigger()));
     }
-  }, ie = (e, o) => {
-    const a = l.some((g) => g[c] === e[c]), y = `${N}-option-${o}`, v = D === o;
+  }, ce = (e, o) => {
+    const r = s.some((f) => f[u] === e[u]), m = `${V}-option-${o}`, p = P === o;
     return /* @__PURE__ */ n.createElement("div", {
       key: e.id || e.value,
-      id: y,
+      id: m,
       role: "option",
-      "aria-selected": a,
-      className: `option px-3 py-2 hover:bg-[var(--color-gray-100)] cursor-pointer select-none flex items-center gap-2 ${v ? `bg-[var(--color-gray-100)]${Ie ? " outline outline-[length:var(--focus-width)] -outline-offset-2 outline-[var(--focus-color)]" : ""}` : ""}`,
-      onClick: () => le(!a, e),
+      "aria-selected": r,
+      className: `option px-3 py-2 hover:bg-[var(--color-gray-100)] cursor-pointer select-none flex items-center gap-2 ${p ? `bg-[var(--color-gray-100)]${Ce ? " outline outline-[length:var(--focus-width)] -outline-offset-2 outline-[var(--focus-color)]" : ""}` : ""}`,
+      onClick: () => le(!r, e),
       "data-automation-id": `dropdown-option-${e?.automationId || o}`
-    }, /* @__PURE__ */ n.createElement(Oe, {
+    }, /* @__PURE__ */ n.createElement(Le, {
       tabIndex: -1,
       ariaHidden: !0,
-      checked: a,
+      checked: r,
       onChange: () => {
       },
       className: "pointer-events-none"
     }), /* @__PURE__ */ n.createElement("span", {
       className: "checkbox-label"
     }, e?.label));
-  }, Ve = () => /* @__PURE__ */ n.createElement("div", {
+  }, Ne = () => /* @__PURE__ */ n.createElement("div", {
     onKeyDown: (e) => {
       e.key === "Tab" && e.stopPropagation();
     }
-  }, d && re(), /* @__PURE__ */ n.createElement("div", p({
-    className: `dropdown-content dropdown-options${d ? "" : " flex flex-col max-h-80 overflow-y-auto"}`
-  }, d ? {} : {
-    ...L,
-    "aria-label": `${u} options`,
+  }, i && re(), /* @__PURE__ */ n.createElement("div", b({
+    className: `dropdown-content dropdown-options${i ? "" : " flex flex-col max-h-80 overflow-y-auto"}`
+  }, i ? {} : {
+    ...D,
+    "aria-label": `${y} options`,
     "aria-multiselectable": "true",
     style: {
       outline: "none"
     },
     tabIndex: -1,
-    "aria-activedescendant": H["aria-activedescendant"],
+    "aria-activedescendant": U["aria-activedescendant"],
     onKeyDown: (e) => se(e, !1),
     onFocus: () => {
-      D === -1 && r.length > 0 && Ce(0);
+      P === -1 && a.length > 0 && Ee(0);
     }
-  }), d ? /* @__PURE__ */ n.createElement("div", p({
+  }), i ? /* @__PURE__ */ n.createElement("div", b({
     className: "flex flex-col max-h-80 overflow-y-auto"
-  }, L, {
-    "aria-label": `${u} options`,
+  }, D, {
+    "aria-label": `${y} options`,
     "aria-multiselectable": "true"
-  }), r.length > 0 ? r.map((e, o) => ie(e, o)) : /* @__PURE__ */ n.createElement("div", {
+  }), a.length > 0 ? a.map((e, o) => ce(e, o)) : /* @__PURE__ */ n.createElement("div", {
     className: "px-3 py-4 text-center text-[var(--color-gray-700)] text-sm"
-  }, E)) : r.length > 0 ? r.map((e, o) => ie(e, o)) : /* @__PURE__ */ n.createElement("div", {
+  }, C)) : a.length > 0 ? a.map((e, o) => ce(e, o)) : /* @__PURE__ */ n.createElement("div", {
     className: "px-3 py-4 text-center text-[var(--color-gray-700)] text-sm"
-  }, E)), /* @__PURE__ */ n.createElement("div", {
+  }, C)), /* @__PURE__ */ n.createElement("div", {
     className: "flex items-center justify-end gap-4 p-3 border-t border-[var(--color-gray-200)]",
     onKeyDown: (e) => {
       if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End") {
         e.stopPropagation();
         return;
       }
-      e.key === "Tab" && e.shiftKey && (e.preventDefault(), e.stopPropagation(), d ? P.current?.focus() : L.ref.current?.focus());
+      if (e.key === "Tab" && !e.shiftKey) {
+        const o = e.currentTarget.querySelector('[data-automation-id="se-design-dropdown-apply-button"]');
+        if (document.activeElement === o && (e.stopPropagation(), d.current?.togglePopover(), M)) {
+          e.preventDefault();
+          const r = d.current?.element, m = Be({
+            container: document.body,
+            filterHidden: !0
+          }), p = r ? m.indexOf(r) : -1, f = m[p + 1];
+          f ? f.focus() : r?.focus();
+        }
+      } else e.key === "Tab" && e.shiftKey && (e.preventDefault(), e.stopPropagation(), i ? E.current?.focus() : D.ref.current?.focus());
     }
   }, /* @__PURE__ */ n.createElement(ue, {
     label: "Clear",
     type: "link",
     size: "sm",
-    onClick: ke,
+    onClick: De,
     automationId: "se-design-dropdown-clear-button"
   }), /* @__PURE__ */ n.createElement(ue, {
     label: "Apply",
     type: "primary",
     size: "sm",
-    onClick: Ne,
+    onClick: Pe,
     automationId: "se-design-dropdown-apply-button"
-  }))), $e = () => {
-    const e = s ? "border-[var(--color-blue-500)]" : $ ? "border-[var(--color-gray-300)]" : "border-[var(--color-gray-600)]", o = X ? "border-[var(--color-red-500)]" : "", a = `dropdown-src-element bg-[var(--color-white)] flex px-3 py-2 ${ve ? "border-0" : `border rounded-md ${o || e}`} flex items-center ${be}`;
+  }))), Ve = () => {
+    const e = l ? "border-[var(--color-blue-500)]" : K ? "border-[var(--color-gray-300)]" : "border-[var(--color-gray-600)]", o = G ? "border-[var(--color-red-500)]" : "", r = `dropdown-src-element bg-[var(--color-white)] flex px-3 py-2 ${he ? "border-0" : `border rounded-md ${o || e}`} flex items-center ${pe}`;
     return /* @__PURE__ */ n.createElement("div", {
-      className: a
+      className: r
     }, /* @__PURE__ */ n.createElement("div", {
-      id: z,
+      id: Q,
       className: "flex-1 min-w-0",
       "data-automation-id": t?.dropDownSelectAutomationId || "selected-dropdown-value"
-    }, oe(l[0], !0)), /* @__PURE__ */ n.createElement("div", {
+    }, oe(s[0], !0)), /* @__PURE__ */ n.createElement("div", {
       className: "flex-shrink-0 ml-2",
       "aria-hidden": "true"
     }, /* @__PURE__ */ n.createElement(de, {
       name: "chevron",
-      rotation: s ? "180" : "0",
+      rotation: l ? "180" : "0",
       className: "transition-transform",
-      stroke: Q
+      stroke: X
     })));
-  }, Ae = () => {
-    const e = l[0]?.[f];
-    return h && e ? `${h}, ${e}` : h || u || "Select option";
+  }, $e = () => {
+    const e = s[0]?.[g];
+    return v && e ? `${v}, ${e}` : v || y || "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: B,
+    id: T,
     className: `se-design-dropdown-label ${ee ? "sr-only" : "mb-[3px] text-[var(--color-gray-700)] text-sm"}`
-  }, t?.label) : !t?.ariaLabelledBy && h ? /* @__PURE__ */ n.createElement("span", {
-    id: B,
+  }, t?.label) : !t?.ariaLabelledBy && v ? /* @__PURE__ */ n.createElement("span", {
+    id: T,
     className: "sr-only"
-  }, h) : null, /* @__PURE__ */ n.createElement("div", p({
+  }, v) : null, /* @__PURE__ */ n.createElement("div", b({
     style: t?.style,
-    className: `${$ ? "bg-[var(--color-gray-50)] rounded-md cursor-not-allowed" : ""}`
-  }, i ? {
+    className: `${K ? "bg-[var(--color-gray-50)] rounded-md cursor-not-allowed" : ""}`
+  }, c ? {
     // Multi-select: only spread focus-tracking handlers for isKeyboardFocused.
     // Dismiss is handled by Popover — don't spread onBlurCapture.
-    onPointerMove: I.onPointerMove,
-    onPointerDown: I.onPointerDown,
-    onPointerUp: I.onPointerUp,
-    onFocusCapture: I.onFocusCapture,
+    onPointerMove: k.onPointerMove,
+    onPointerDown: k.onPointerDown,
+    onPointerUp: k.onPointerUp,
+    onFocusCapture: k.onFocusCapture,
     onKeyDownCapture: (e) => {
-      e.key === "Escape" && s && (e.stopPropagation(), m.current?.focusTrigger()), I.onKeyDownCapture?.(e);
+      if (e.key === "Escape" && l && (e.stopPropagation(), d.current?.focusTrigger()), (e.key === "ArrowDown" || e.key === "ArrowUp") && l) {
+        const o = i ? E.current : D.ref.current;
+        o && document.activeElement !== o && !o.contains(document.activeElement) && o.focus();
+      }
+      k.onKeyDownCapture?.(e);
     }
   } : {
-    ...M,
+    ...j,
     onKeyDownCapture: (e) => {
-      (e.key === "Escape" || e.key === "Tab") && s && (e.stopPropagation(), m.current?.focusTrigger()), M.onKeyDownCapture?.(e);
+      (e.key === "Escape" || e.key === "Tab") && l && (e.stopPropagation(), d.current?.focusTrigger()), j.onKeyDownCapture?.(e);
     },
     // 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 ? {
+    ...M ? {
       onBlurCapture: void 0
     } : {}
-  }), /* @__PURE__ */ n.createElement(Fe, p({
-    ref: m,
-    isPopoverOpen: s,
-    isWithPortal: Z,
-    renderPopoverContents: G || (i ? Ve : Pe),
+  }), /* @__PURE__ */ n.createElement(Fe, b({
+    ref: d,
+    isPopoverOpen: l,
+    isWithPortal: M,
+    renderPopoverContents: Y || (c ? Ne : ke),
     contentWidth: "full",
     popoverContentStyleProperty: t.popoverContentStyleProperty,
     renderPopoverSrcElement: t.renderSrcElement ? () => t.renderSrcElement({
-      isOpen: s,
-      selectedValue: l
-    }) : $e,
+      isOpen: l,
+      selectedValue: s
+    }) : Ve,
     onPopoverToggle: (e) => {
-      if (V(e), e && !i && l.length > 0) {
-        const o = r.findIndex((a) => c ? a[c] === l[0]?.[c] : a[f] === l[0]?.[f]);
+      if ($(e), e && !c && s.length > 0) {
+        const o = a.findIndex((r) => u ? r[u] === s[0]?.[u] : r[g] === s[0]?.[g]);
         o >= 0 && te(o);
       }
-      if (e && !d) {
-        const o = i ? L.ref : q.ref;
+      if (e && !i) {
+        const o = c ? D.ref : H.ref;
         requestAnimationFrame(() => requestAnimationFrame(() => o.current?.focus()));
       }
     },
-    disabled: $,
+    disabled: K,
     automationId: t?.dropDownSrcAutomationId,
     popoverContentAutomationId: t?.dropDownContentAutomationId,
-    ariaLabelledBy: t?.label || t?.ariaLabelledBy || h ? [t?.label || !t?.ariaLabelledBy && h ? B : t?.ariaLabelledBy, z].filter(Boolean).join(" ") : void 0,
-    ariaLabel: !t?.label && !h && !t?.ariaLabelledBy ? Ae() : void 0,
+    ariaLabelledBy: t?.label || t?.ariaLabelledBy || v ? [t?.label || !t?.ariaLabelledBy && v ? T : t?.ariaLabelledBy, Q].filter(Boolean).join(" ") : void 0,
+    ariaLabel: !t?.label && !v && !t?.ariaLabelledBy ? $e() : void 0,
     sourceRole: "button",
     "aria-haspopup": "listbox"
-  }, s ? {
-    "aria-controls": N
-  } : {}))), X && /* @__PURE__ */ n.createElement("div", {
+  }, l ? {
+    "aria-controls": V
+  } : {}))), G && /* @__PURE__ */ n.createElement("div", {
     className: "text-[var(--color-red-500)] text-sm"
-  }, he));
+  }, be));
 };
 export {
-  Qe as Dropdown
+  Ge as Dropdown
 };
 //# sourceMappingURL=index25.js.map