se-design 1.0.81 → 1.0.83-dev.1

package/dist/index25.js

@@ -1,11 +1,11 @@
-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 o, { useState as K, useRef as ne, useEffect as R, useLayoutEffect as Le } from "react";
+import { Popover as Fe } from "./index19.js";
+import { Icon as re } from "./index6.js";
+import { Checkbox as Oe } 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";
+import { InputWithIcon as Be } from "./index52.js";
+import { useStableId as q } from "./index205.js";
+import { useCombobox as ae } from "./index68.js";
 function p() {
   return p = Object.assign ? Object.assign.bind() : function(t) {
     for (var g = 1; g < arguments.length; g++) {
@@ -15,32 +15,32 @@ function p() {
     return t;
   }, p.apply(null, arguments);
 }
-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);
+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);
   }, {
     selectBy: d = "",
     optionsUniqueBy: s = "",
     displaySelected: ce = !1,
-    dropDownOptions: M,
+    dropDownOptions: j,
     defaultText: u = "Select",
-    iconColor: j = "var(--color-gray-700)",
+    iconColor: U = "var(--color-gray-700)",
     disabled: k = !1,
-    dropdownClassName: ie = "",
+    dropdownClassName: de = "",
     hasError: W = !1,
-    errorMessage: de = "",
+    errorMessage: ue = "",
     customDropdownContent: _ = null,
-    isBorderless: ue = !1,
+    isBorderless: me = !1,
     shouldShowSearch: h = !1,
-    showSearchIcon: me = !0,
+    showSearchIcon: fe = !0,
     searchPlaceholder: z = "Search...",
     searchResultEmptyMessage: J = "No results found",
-    ariaLabel: b = "",
-    customSelectedValue: $ = "",
+    ariaLabel: y = "",
+    customSelectedValue: L = "",
     isWithPortal: Q = !1,
-    firstOptionAsHeading: U = !1
+    firstOptionAsHeading: X = !1
   } = t;
   R(() => {
     if (!g) {
@@ -48,74 +48,78 @@ const je = (t) => {
       T(e);
     }
   }, [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);
+    c || M("");
+  }, [c]), R(() => {
+    c && h && I.current && requestAnimationFrame(() => I.current?.focus());
+  }, [c, h]), Le(() => {
+    t.popoverElementRef && (t.popoverElementRef.current = b.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(() => {
+  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(() => {
       requestAnimationFrame(() => {
-        y.current?.focusTrigger();
+        b.current?.focusTrigger();
       });
     });
-  }, c = fe(), {
-    listboxProps: ge,
+  }, i = ge(), {
+    listboxProps: ye,
     getOptionProps: be,
-    highlightedIndex: ye,
-    setHighlightedIndex: he,
-    containerProps: ve,
-    inputProps: X
-  } = re({
-    items: a ? [] : c,
+    highlightedIndex: he,
+    setHighlightedIndex: ve,
+    containerProps: pe,
+    inputProps: G,
+    isKeyboardFocused: xe
+  } = ae({
+    items: a ? [] : i,
     // Only use for single-select
-    isOpen: i && !a,
-    onOpenChange: D,
+    isOpen: c && !a,
+    onOpenChange: P,
     onSelect: (e) => {
-      L(e);
+      F(e);
     },
-    listboxId: C,
+    listboxId: D,
     disabled: a || k,
-    hasItems: c.length > 0
+    hasItems: i.length > 0
   }), {
-    inputProps: B,
-    listboxProps: O,
-    highlightedIndex: w,
-    setHighlightedIndex: pe
-  } = re({
-    items: a ? c : [],
-    isOpen: i && a,
-    onOpenChange: D,
+    inputProps: O,
+    listboxProps: B,
+    containerProps: w,
+    highlightedIndex: E,
+    setHighlightedIndex: Se,
+    isKeyboardFocused: we
+  } = ae({
+    items: a ? i : [],
+    isOpen: c && a,
+    onOpenChange: P,
     onSelect: () => {
     },
-    listboxId: C,
+    listboxId: D,
     disabled: !a,
     loop: !1,
-    hasItems: c.length > 0
-  }), xe = (e, o = !1) => a ? u : o && $ ? $ : e?.[d] || u, Se = () => {
+    hasItems: i.length > 0,
+    closeOnTab: !1
+  }), Ee = (e, n = !1) => a ? u : n && L ? L : e?.[d] || u, Ce = () => {
     A([]), t?.onClear?.();
-  }, G = (e, o = !1) => {
+  }, Y = (e, n = !1) => {
     if (t?.renderOptionChip)
-      return t?.renderOptionChip(e, o);
-    if (a && r?.length > 0) {
-      const f = r[0]?.[d] || "", E = r.length - 1;
-      return /* @__PURE__ */ n.createElement("div", {
+      return t?.renderOptionChip(e, n);
+    if (a && l?.length > 0) {
+      const f = l[0]?.[d] || "", C = l.length - 1;
+      return /* @__PURE__ */ o.createElement("div", {
         className: "option-chip flex items-center w-full"
-      }, /* @__PURE__ */ n.createElement("div", {
-        className: `${E > 0 ? "w-full" : "flex-1"} truncate`
-      }, `${u}: ${f}`), E > 0 && /* @__PURE__ */ n.createElement("div", {
+      }, /* @__PURE__ */ o.createElement("div", {
+        className: `${C > 0 ? "w-full" : "flex-1"} truncate`
+      }, `${u}: ${f}`), C > 0 && /* @__PURE__ */ o.createElement("div", {
         className: "flex-shrink-0"
-      }, "+", E));
+      }, "+", C));
     }
-    const l = xe(e, o), m = !!t?.label || !!t?.ariaLabelledBy, v = o && u && e?.[d] && !$ && !m;
-    return /* @__PURE__ */ n.createElement("p", {
+    const r = Ee(e, n), m = !!t?.label || !!t?.ariaLabelledBy, v = n && u && e?.[d] && !L && !m;
+    return /* @__PURE__ */ o.createElement("p", {
       className: "option-chip flex flex-1 items-center justify-between"
-    }, v ? `${u}: ${l}` : l);
-  }, Y = (e) => /* @__PURE__ */ n.createElement("div", {
+    }, v ? `${u}: ${r}` : r);
+  }, Z = (e) => /* @__PURE__ */ o.createElement("div", {
     className: " w-full relative flex items-center border-b border-[var(--color-gray-300)]"
-  }, /* @__PURE__ */ n.createElement(Le, {
-    leftIcon: me ? {
+  }, /* @__PURE__ */ o.createElement(Be, {
+    leftIcon: fe ? {
       name: "search",
       position: "left",
       style: {
@@ -123,7 +127,7 @@ const je = (t) => {
       }
     } : void 0,
     value: V,
-    onChange: (o) => K(o),
+    onChange: (n) => M(n),
     placeholder: z,
     style: {
       margin: 0,
@@ -138,87 +142,88 @@ const je = (t) => {
     ariaLabel: z,
     inputRef: I,
     inputProps: e
-  })), Z = () => Y(a ? {
-    ...B,
-    onKeyDown: (e) => te(e, !0)
+  })), ee = () => Z(a ? {
+    ...O,
+    onKeyDown: (e) => oe(e, !0)
   } : {
-    ...X,
+    ...G,
     onKeyDown: (e) => {
-      X.onKeyDown(e), e.key === "Escape" && requestAnimationFrame(() => y.current?.focusTrigger());
+      G.onKeyDown(e), e.key === "Escape" && requestAnimationFrame(() => b.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({
+  }), 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({
       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)] cursor-pointer select-none flex items-center justify-between ${f ? "selected" : ""} ${E ? "bg-[var(--color-blue-50)]" : ""}`,
-      onClick: () => L(e),
+      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(), L(e)) : N.key === "Escape" && requestAnimationFrame(() => y.current?.focusTrigger());
+        N.key === "Enter" || N.key === " " ? (N.preventDefault(), F(e)) : N.key === "Escape" && requestAnimationFrame(() => b.current?.focusTrigger());
       },
       tabIndex: -1,
-      "data-automation-id": `dropdown-option-${e?.automationId || o}`
-    }, Ve, {
+      "data-automation-id": `dropdown-option-${e?.automationId || n}`
+    }, Ae, {
       "aria-selected": f ? "true" : "false"
-    }), G({
+    }), Y({
       ...e,
       isOptionSelected: f
-    }, !1), f && /* @__PURE__ */ n.createElement(oe, {
+    }, !1), f && /* @__PURE__ */ o.createElement(re, {
       name: "checkmark",
-      stroke: j
+      stroke: U
     }));
-  }, Ee = () => /* @__PURE__ */ n.createElement(n.Fragment, null, t?.label && U && /* @__PURE__ */ n.createElement("div", {
+  }, De = () => /* @__PURE__ */ o.createElement(o.Fragment, null, t?.label && X && /* @__PURE__ */ o.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({
+  }, t.label), h && ee(), /* @__PURE__ */ o.createElement("div", p({
     className: "dropdown-content dropdown-options",
     "aria-label": `${u} options`
-  }, ge), h && Z(), /* @__PURE__ */ n.createElement("div", {
+  }, ye), /* @__PURE__ */ o.createElement("div", {
     className: "flex flex-col max-h-80 overflow-y-auto"
-  }, c.length > 0 ? c.map((e, o) => we(e, o)) : /* @__PURE__ */ n.createElement("div", {
+  }, 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)))), 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 === " ")) {
+  }, 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 === " ")) {
       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);
+        if (e.preventDefault(), E >= 0 && E < i.length) {
+          const r = i[E], m = l.some((v) => v[s] === r[s]);
+          te(!m, r);
         }
         return;
       }
-      B.onKeyDown(e), e.key === "Escape" && (e.stopPropagation(), requestAnimationFrame(() => y.current?.focusTrigger()));
+      O.onKeyDown(e), e.key === "Escape" && (e.stopPropagation(), requestAnimationFrame(() => b.current?.focusTrigger()));
     }
-  }, Ce = (e, o) => {
-    const l = r.some((f) => f[s] === e[s]), m = `${C}-option-${o}`, v = w === o;
-    return /* @__PURE__ */ n.createElement("div", {
+  }, ke = (e, n) => {
+    const r = l.some((f) => f[s] === e[s]), m = `${D}-option-${n}`, v = E === n;
+    return /* @__PURE__ */ o.createElement("div", {
       key: e.id || e.value,
       id: m,
       role: "option",
-      "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, {
+      "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, {
       tabIndex: -1,
       ariaHidden: !0,
-      checked: l,
+      checked: r,
       onChange: () => {
-      }
-    }), /* @__PURE__ */ n.createElement("span", {
+      },
+      className: "pointer-events-none"
+    }), /* @__PURE__ */ o.createElement("span", {
       className: "checkbox-label"
     }, e?.label));
-  }, De = () => /* @__PURE__ */ n.createElement("div", {
+  }, Ne = () => /* @__PURE__ */ o.createElement("div", {
     className: "dropdown-content dropdown-options",
     onKeyDown: (e) => {
       e.key === "Tab" && e.stopPropagation();
     }
-  }, h && Z(), /* @__PURE__ */ n.createElement("div", p({}, O, {
+  }, h && ee(), /* @__PURE__ */ o.createElement("div", p({}, B, {
     "aria-label": `${u} options`,
     "aria-multiselectable": "true",
     style: {
@@ -226,106 +231,115 @@ const je = (t) => {
     }
   }, h ? {} : {
     tabIndex: -1,
-    "aria-activedescendant": B["aria-activedescendant"],
-    onKeyDown: (e) => te(e, !1),
+    "aria-activedescendant": O["aria-activedescendant"],
+    onKeyDown: (e) => oe(e, !1),
     onFocus: () => {
-      w === -1 && c.length > 0 && pe(0);
+      E === -1 && i.length > 0 && Se(0);
     }
-  }), /* @__PURE__ */ n.createElement("div", {
+  }), /* @__PURE__ */ o.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", {
+  }, 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__ */ n.createElement("div", {
+  }, J))), /* @__PURE__ */ o.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());
+      e.key === "Tab" && e.shiftKey && (e.preventDefault(), e.stopPropagation(), h ? I.current?.focus() : B.ref.current?.focus());
     }
-  }, /* @__PURE__ */ n.createElement(le, {
+  }, /* @__PURE__ */ o.createElement(le, {
     label: "Clear",
     type: "link",
     size: "sm",
-    onClick: Se,
+    onClick: Ce,
     automationId: "se-design-dropdown-clear-button"
-  }), /* @__PURE__ */ n.createElement(le, {
+  }), /* @__PURE__ */ o.createElement(le, {
     label: "Apply",
     type: "primary",
     size: "sm",
-    onClick: Ie,
+    onClick: Pe,
     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: l
-    }, /* @__PURE__ */ n.createElement("div", {
+  }))), 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,
       className: "flex-1 min-w-0",
       "data-automation-id": t?.dropDownSelectAutomationId || "selected-dropdown-value"
-    }, G(r[0], !0)), /* @__PURE__ */ n.createElement("div", {
+    }, Y(l[0], !0)), /* @__PURE__ */ o.createElement("div", {
       className: "flex-shrink-0 ml-2",
       "aria-hidden": "true"
-    }, /* @__PURE__ */ n.createElement(oe, {
+    }, /* @__PURE__ */ o.createElement(re, {
       name: "chevron",
-      rotation: i ? "180" : "0",
+      rotation: c ? "180" : "0",
       className: "transition-transform",
-      stroke: j
+      stroke: U
     })));
-  }, Ne = () => {
-    const e = r[0]?.[d];
-    return b && e ? `${b}, ${e}` : b || u || "Select option";
+  }, $e = () => {
+    const e = l[0]?.[d];
+    return y && e ? `${y}, ${e}` : y || u || "Select option";
   };
-  return /* @__PURE__ */ n.createElement("div", {
+  return /* @__PURE__ */ o.createElement("div", {
     className: `se-design-dropdown-container${t?.className ? ` ${t?.className}` : ""}`,
     style: t?.style
-  }, 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,
+  }, 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: $,
     className: "sr-only"
-  }, b) : null, /* @__PURE__ */ n.createElement("div", p({
+  }, y) : null, /* @__PURE__ */ o.createElement("div", p({
     style: t?.style,
     className: `${k ? "bg-[var(--color-gray-50)] rounded-md cursor-not-allowed" : ""}`
-  }, a ? {} : {
-    ...ve,
+  }, a ? {
+    // 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
+  } : {
+    ...pe,
     // 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 ? {
       onBlurCapture: void 0
     } : {}
-  }), /* @__PURE__ */ n.createElement(Ae, p({
-    ref: y,
-    isPopoverOpen: i,
+  }), /* @__PURE__ */ o.createElement(Fe, p({
+    ref: b,
+    isPopoverOpen: c,
     isWithPortal: Q,
-    renderPopoverContents: _ || (a ? De : Ee),
+    renderPopoverContents: _ || (a ? Ne : De),
     contentWidth: "full",
+    popoverContentStyleProperty: t.popoverContentStyleProperty,
     renderPopoverSrcElement: t.renderSrcElement ? () => t.renderSrcElement({
-      isOpen: i,
-      selectedValue: r
-    }) : ke,
+      isOpen: c,
+      selectedValue: l
+    }) : Ve,
     onPopoverToggle: (e) => {
-      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);
+      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);
       }
-      e && a && !h && requestAnimationFrame(() => requestAnimationFrame(() => O.ref.current?.focus()));
+      e && a && !h && requestAnimationFrame(() => requestAnimationFrame(() => B.ref.current?.focus()));
     },
     disabled: k,
     automationId: t?.dropDownSrcAutomationId,
     popoverContentAutomationId: t?.dropDownContentAutomationId,
-    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,
+    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,
     sourceRole: "button",
     "aria-haspopup": "listbox"
-  }, i ? {
-    "aria-controls": C
-  } : {}))), W && /* @__PURE__ */ n.createElement("div", {
+  }, c ? {
+    "aria-controls": D
+  } : {}))), W && /* @__PURE__ */ o.createElement("div", {
     className: "text-[var(--color-red-500)] text-sm"
-  }, de));
+  }, ue));
 };
 export {
-  je as Dropdown
+  _e as Dropdown
 };
 //# sourceMappingURL=index25.js.map