se-design 1.0.83 → 1.0.84-dev.0

package/dist/index25.js

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