se-design 1.0.85 → 1.0.86

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/components/DropdownWithInputTags/index.d.ts +2 -1
  2. package/dist/index25.js +207 -204
  3. package/dist/index25.js.map +1 -1
  4. package/dist/index38.js +195 -189
  5. package/dist/index38.js.map +1 -1
  6. package/dist/index68.js +73 -63
  7. package/dist/index68.js.map +1 -1
  8. package/dist/index79.js +31 -25
  9. package/dist/index79.js.map +1 -1
  10. package/package.json +1 -1
package/dist/components/DropdownWithInputTags/index.d.ts CHANGED
@@ -17,7 +17,8 @@ export interface DropdownWithInputTagsProps {
17
17
  renderOption?: (option: DropdownOption, props: {
18
18
  id: string;
19
19
  role: 'option';
20
- 'aria-selected': boolean;
20
+ 'aria-selected'?: boolean;
21
+ 'aria-disabled'?: true;
21
22
  onMouseEnter: () => void;
22
23
  className: string;
23
24
  }, onSelect: (option: DropdownOption) => void) => React.ReactNode;
package/dist/index25.js CHANGED
@@ -1,145 +1,150 @@
1
- import n, { useState as W, useRef as ie, useEffect as B, useLayoutEffect as Ke } from "react";
2
- import { Popover as Fe } from "./index19.js";
3
- import { Icon as de } from "./index6.js";
4
- import { Checkbox as Le } from "./index23.js";
5
- import { Button as ue } from "./index4.js";
6
- import { InputWithIcon as Oe } from "./index52.js";
7
- import { useStableId as _ } from "./index205.js";
8
- import { useCombobox as me } from "./index68.js";
9
- import { getFocusableElements as Be } from "./index71.js";
1
+ import n, { useState as Q, useRef as ve, useEffect as _, useLayoutEffect as Re } from "react";
2
+ import { Popover as qe } from "./index19.js";
3
+ import { Icon as we } from "./index6.js";
4
+ import { Checkbox as He } from "./index23.js";
5
+ import { Button as Se } from "./index4.js";
6
+ import { InputWithIcon as Me } from "./index52.js";
7
+ import { useStableId as X } from "./index205.js";
8
+ import { useCombobox as xe } from "./index68.js";
9
+ import { getFocusableElements as Ue } from "./index71.js";
10
10
  import "./index72.js";
11
- import { announce as Te } from "./index75.js";
12
- function b() {
13
- return b = Object.assign ? Object.assign.bind() : function(t) {
11
+ import { announce as je } from "./index75.js";
12
+ function y() {
13
+ return y = Object.assign ? Object.assign.bind() : function(t) {
14
14
  for (var h = 1; h < arguments.length; h++) {
15
15
  var x = arguments[h];
16
- for (var w in x) ({}).hasOwnProperty.call(x, w) && (t[w] = x[w]);
16
+ for (var I in x) ({}).hasOwnProperty.call(x, I) && (t[I] = x[I]);
17
17
  }
18
18
  return t;
19
- }, b.apply(null, arguments);
19
+ }, y.apply(null, arguments);
20
20
  }
21
- const Ge = (t) => {
22
- 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) => {
23
- x || fe(e), t.onOpenChange?.(e);
24
- }, q = (e) => {
25
- h || J(e);
21
+ const rt = (t) => {
22
+ const h = t.selectedValue !== void 0, x = t.isOpen !== void 0, [I, Ee] = Q(!1), [E, G] = Q(""), [Ie, Y] = Q(() => t?.defaultSelectedValue ? Array.isArray(t?.defaultSelectedValue) ? t?.defaultSelectedValue : [t.defaultSelectedValue] : []), d = ve(null), C = ve(null), T = X(void 0, "dropdown-label"), Z = X(void 0, "dropdown-value"), D = X(void 0, "dropdown-listbox"), a = x ? t.isOpen : I, s = h ? Array.isArray(t.selectedValue) ? t.selectedValue : t.selectedValue ? [t.selectedValue] : [] : Ie, V = (e) => {
23
+ x || Ee(e), t.onOpenChange?.(e);
24
+ }, B = (e) => {
25
+ h || Y(e);
26
26
  }, {
27
- selectBy: g = "",
27
+ selectBy: p = "",
28
28
  optionsUniqueBy: u = "",
29
- displaySelected: ge = !1,
30
- dropDownOptions: A,
31
- defaultText: y = "Select",
32
- iconColor: X = "var(--color-gray-700)",
33
- disabled: K = !1,
34
- dropdownClassName: pe = "",
35
- hasError: G = !1,
36
- errorMessage: be = "",
37
- customDropdownContent: Y = null,
38
- isBorderless: he = !1,
39
- shouldShowSearch: i = !1,
40
- showSearchIcon: ve = !0,
41
- searchPlaceholder: Z = "Search...",
42
- searchResultEmptyMessage: C = "No results found",
29
+ displaySelected: Ce = !1,
30
+ dropDownOptions: k,
31
+ defaultText: g = "Select",
32
+ iconColor: ee = "var(--color-gray-700)",
33
+ disabled: A = !1,
34
+ dropdownClassName: De = "",
35
+ hasError: te = !1,
36
+ errorMessage: ke = "",
37
+ customDropdownContent: oe = null,
38
+ isBorderless: Pe = !1,
39
+ shouldShowSearch: c = !1,
40
+ showSearchIcon: Ne = !0,
41
+ searchPlaceholder: ne = "Search...",
42
+ searchResultEmptyMessage: re = "No results found",
43
43
  ariaLabel: v = "",
44
44
  customSelectedValue: R = "",
45
- isWithPortal: M = !1,
46
- firstOptionAsHeading: ee = !1
45
+ isWithPortal: q = !1,
46
+ firstOptionAsHeading: le = !1
47
47
  } = t;
48
- B(() => {
48
+ _(() => {
49
49
  if (!h) {
50
50
  const e = t?.defaultSelectedValue ? Array.isArray(t?.defaultSelectedValue) ? t?.defaultSelectedValue : [t.defaultSelectedValue] : [];
51
- J(e);
51
+ Y(e);
52
52
  }
53
- }, [t?.defaultSelectedValue, h]), B(() => {
54
- l || z("");
55
- }, [l]), B(() => {
56
- l && i && E.current && requestAnimationFrame(() => E.current?.focus());
57
- }, [l, i]), Ke(() => {
53
+ }, [t?.defaultSelectedValue, h]), _(() => {
54
+ a || G("");
55
+ }, [a]), _(() => {
56
+ a && c && C.current && requestAnimationFrame(() => C.current?.focus());
57
+ }, [a, c]), Re(() => {
58
58
  t.popoverElementRef && (t.popoverElementRef.current = d.current?.element ?? null);
59
59
  });
60
- const c = t?.type === "multi-select", xe = () => S.trim() ? (A || []).filter((e) => (e?.[g]?.toString().toLowerCase() || "").includes(S.toLowerCase())) : A || [], F = (e) => {
61
- q([e]), $(!1), t?.onOptionClick?.(e), requestAnimationFrame(() => {
60
+ const i = t?.type === "multi-select", ae = {
61
+ __noResults: !0,
62
+ id: "__no_results__",
63
+ value: "__no_results__"
64
+ }, se = (e) => !!e?.__noResults, $e = () => E.trim() ? (k || []).filter((e) => (e?.[p]?.toString().toLowerCase() || "").includes(E.toLowerCase())) : k || [], K = (e) => {
65
+ B([e]), V(!1), t?.onOptionClick?.(e), requestAnimationFrame(() => {
62
66
  requestAnimationFrame(() => {
63
67
  d.current?.focusTrigger();
64
68
  });
65
69
  });
66
- }, a = xe(), {
67
- listboxProps: H,
68
- getOptionProps: we,
69
- highlightedIndex: I,
70
- setHighlightedIndex: te,
70
+ }, l = $e(), ie = l.length === 0 && (E.trim() || k?.length === 0), H = i ? [] : l.length > 0 ? l : ie ? [ae] : [], M = i ? l.length > 0 ? l : ie ? [ae] : [] : [], {
71
+ listboxProps: U,
72
+ getOptionProps: ce,
73
+ highlightedIndex: w,
74
+ setHighlightedIndex: de,
71
75
  containerProps: j,
72
76
  inputProps: L,
73
- isKeyboardFocused: Se
74
- } = me({
75
- items: c ? [] : a,
76
- // Only use for single-select
77
- isOpen: l && !c,
78
- onOpenChange: $,
77
+ isKeyboardFocused: W
78
+ } = xe({
79
+ items: H,
80
+ isOpen: a && !i,
81
+ onOpenChange: V,
79
82
  onSelect: (e) => {
80
- F(e);
83
+ K(e);
81
84
  },
82
- listboxId: V,
83
- disabled: c || K,
84
- hasItems: a.length > 0
85
+ listboxId: D,
86
+ disabled: i || A,
87
+ hasItems: H.length > 0,
88
+ isItemDisabled: se
85
89
  }), {
86
- inputProps: U,
87
- listboxProps: D,
88
- containerProps: k,
89
- highlightedIndex: P,
90
- setHighlightedIndex: Ee,
91
- isKeyboardFocused: Ce
92
- } = me({
93
- items: c ? a : [],
94
- isOpen: l && c,
95
- onOpenChange: $,
90
+ inputProps: z,
91
+ listboxProps: P,
92
+ containerProps: N,
93
+ highlightedIndex: S,
94
+ setHighlightedIndex: Ve,
95
+ isKeyboardFocused: J
96
+ } = xe({
97
+ items: M,
98
+ isOpen: a && i,
99
+ onOpenChange: V,
96
100
  onSelect: () => {
97
101
  },
98
- listboxId: V,
99
- disabled: !c,
102
+ listboxId: D,
103
+ disabled: !i,
100
104
  loop: !1,
101
- hasItems: a.length > 0,
102
- closeOnTab: !1
103
- });
104
- B(() => {
105
- l && a.length === 0 && (S.trim() || A?.length === 0) && Te(C, {
105
+ hasItems: M.length > 0,
106
+ closeOnTab: !1,
107
+ isItemDisabled: se
108
+ }), ue = i ? S : w;
109
+ _(() => {
110
+ a && l.length === 0 && (E.trim() || k?.length === 0) && ue === -1 && je(re, {
106
111
  assertiveness: "polite",
107
112
  batchId: "dropdown-empty-state",
108
113
  delay: 300
109
114
  });
110
- }, [a.length, l, S, A?.length]);
111
- const Ie = (e, o = !1) => c ? y : o && R ? R : e?.[g] || y, De = () => {
112
- q([]), t?.onClear?.();
113
- }, oe = (e, o = !1) => {
115
+ }, [l.length, a, E, k?.length, ue]);
116
+ const Ae = (e, o = !1) => i ? g : o && R ? R : e?.[p] || g, Ke = () => {
117
+ B([]), t?.onClear?.();
118
+ }, me = (e, o = !1) => {
114
119
  if (t?.renderOptionChip)
115
120
  return t?.renderOptionChip(e, o);
116
- if (c && s?.length > 0) {
117
- const f = s[0]?.[g] || "", N = s.length - 1;
121
+ if (i && s?.length > 0) {
122
+ const f = s[0]?.[p] || "", $ = s.length - 1;
118
123
  return /* @__PURE__ */ n.createElement("div", {
119
124
  className: "option-chip flex items-center w-full"
120
125
  }, /* @__PURE__ */ n.createElement("div", {
121
- className: `${N > 0 ? "w-full" : "flex-1"} truncate`
122
- }, `${y}: ${f}`), N > 0 && /* @__PURE__ */ n.createElement("div", {
126
+ className: `${$ > 0 ? "w-full" : "flex-1"} truncate`
127
+ }, `${g}: ${f}`), $ > 0 && /* @__PURE__ */ n.createElement("div", {
123
128
  className: "flex-shrink-0"
124
- }, "+", N));
129
+ }, "+", $));
125
130
  }
126
- const r = Ie(e, o), m = !!t?.label || !!t?.ariaLabelledBy, p = o && y && e?.[g] && !R && !m;
131
+ const r = Ae(e, o), m = !!t?.label || !!t?.ariaLabelledBy, b = o && g && e?.[p] && !R && !m;
127
132
  return /* @__PURE__ */ n.createElement("p", {
128
133
  className: "option-chip flex flex-1 items-center justify-between"
129
- }, p ? `${y}: ${r}` : r);
130
- }, ne = (e) => /* @__PURE__ */ n.createElement("div", {
134
+ }, b ? `${g}: ${r}` : r);
135
+ }, fe = (e) => /* @__PURE__ */ n.createElement("div", {
131
136
  className: " w-full relative flex items-center border-b border-[var(--color-gray-300)]"
132
- }, /* @__PURE__ */ n.createElement(Oe, {
133
- leftIcon: ve ? {
137
+ }, /* @__PURE__ */ n.createElement(Me, {
138
+ leftIcon: Ne ? {
134
139
  name: "search",
135
140
  position: "left",
136
141
  style: {
137
142
  color: "var(--color-gray-500)"
138
143
  }
139
144
  } : void 0,
140
- value: S,
141
- onChange: (o) => z(o),
142
- placeholder: Z,
145
+ value: E,
146
+ onChange: (o) => G(o),
147
+ placeholder: ne,
143
148
  style: {
144
149
  margin: 0,
145
150
  gap: 0
@@ -150,45 +155,51 @@ const Ge = (t) => {
150
155
  outline: "none"
151
156
  },
152
157
  automationId: "se-design-dropdown-search",
153
- ariaLabel: Z,
154
- inputRef: E,
158
+ ariaLabel: ne,
159
+ inputRef: C,
155
160
  inputProps: e
156
- })), re = () => ne(c ? {
157
- ...U,
158
- onKeyDown: (e) => se(e, !0)
161
+ })), ge = () => fe(i ? {
162
+ ...z,
163
+ onKeyDown: (e) => be(e, !0)
159
164
  } : {
160
165
  ...L,
161
166
  onKeyDown: (e) => {
162
167
  L.onKeyDown(e), e.key === "Escape" && requestAnimationFrame(() => d.current?.focusTrigger());
163
168
  }
164
- }), ae = (e, o) => {
165
- 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);
166
- return /* @__PURE__ */ n.createElement("div", b({
169
+ }), ye = (e, o) => {
170
+ const r = e[p], m = s[0]?.[p] || g, b = u?.length ? e[u] == s[0]?.[u] : !0, f = Ce && r === m && b, $ = w === o, Be = i ? {} : ce(o, f);
171
+ return /* @__PURE__ */ n.createElement("div", y({
167
172
  key: e.id || e.value,
168
- 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)]" : ""}` : ""}`,
169
- onClick: () => F(e),
170
- onKeyDown: (O) => {
171
- O.key === "Enter" || O.key === " " ? (O.preventDefault(), F(e)) : O.key === "Escape" && requestAnimationFrame(() => d.current?.focusTrigger());
173
+ 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" : ""} ${$ ? `bg-[var(--color-gray-100)]${W ? " outline outline-[length:var(--focus-width)] -outline-offset-2 outline-[var(--focus-color)]" : ""}` : ""}`,
174
+ onClick: () => K(e),
175
+ onKeyDown: (F) => {
176
+ F.key === "Enter" || F.key === " " ? (F.preventDefault(), K(e)) : F.key === "Escape" && requestAnimationFrame(() => d.current?.focusTrigger());
172
177
  },
173
178
  tabIndex: -1,
174
179
  "data-automation-id": `dropdown-option-${e?.automationId || o}`
175
- }, Ae, {
180
+ }, Be, {
176
181
  "aria-selected": f ? "true" : "false"
177
- }), oe({
182
+ }), me({
178
183
  ...e,
179
184
  isOptionSelected: f
180
- }, !1), f && /* @__PURE__ */ n.createElement(de, {
185
+ }, !1), f && /* @__PURE__ */ n.createElement(we, {
181
186
  name: "checkmark",
182
- stroke: X
187
+ stroke: ee
183
188
  }));
184
- }, ke = () => /* @__PURE__ */ n.createElement(n.Fragment, null, t?.label && ee && /* @__PURE__ */ n.createElement("div", {
189
+ }, O = (e, o, r) => /* @__PURE__ */ n.createElement("div", y({}, r ? {
190
+ id: `${D}-option-0`,
191
+ role: "option",
192
+ "aria-disabled": !0
193
+ } : ce(0, !1), {
194
+ className: `px-3 py-4 text-center text-[var(--color-gray-700)] text-sm${e === 0 ? ` bg-[var(--color-gray-100)]${o ? " outline outline-[length:var(--focus-width)] -outline-offset-2 outline-[var(--focus-color)]" : ""}` : ""}`
195
+ }), re), Le = () => /* @__PURE__ */ n.createElement(n.Fragment, null, t?.label && le && /* @__PURE__ */ n.createElement("div", {
185
196
  "aria-hidden": "true",
186
197
  className: "px-3 pt-2 pb-1 text-[var(--color-gray-650)] text-xs cursor-default select-none"
187
- }, t.label), i && re(), /* @__PURE__ */ n.createElement("div", b({
188
- className: `dropdown-content dropdown-options${i ? "" : " flex flex-col max-h-80 overflow-y-auto"}`
189
- }, i ? {} : {
190
- ...H,
191
- "aria-label": `${y} options`,
198
+ }, t.label), c && ge(), /* @__PURE__ */ n.createElement("div", y({
199
+ className: `dropdown-content dropdown-options${c ? "" : " flex flex-col max-h-80 overflow-y-auto"}`
200
+ }, c ? {} : {
201
+ ...U,
202
+ "aria-label": `${g} options`,
192
203
  style: {
193
204
  outline: "none"
194
205
  },
@@ -196,48 +207,44 @@ const Ge = (t) => {
196
207
  "aria-activedescendant": L["aria-activedescendant"],
197
208
  onKeyDown: (e) => {
198
209
  if (j.onKeyDownCapture?.(e), e.key === " ") {
199
- e.preventDefault(), I >= 0 && a[I] && F(a[I]);
210
+ e.preventDefault(), w >= 0 && l[w] && K(l[w]);
200
211
  return;
201
212
  }
202
213
  L.onKeyDown(e);
203
214
  },
204
215
  onFocus: () => {
205
- I === -1 && a.length > 0 && te(0);
216
+ w === -1 && H.length > 0 && de(0);
206
217
  }
207
- }), i ? /* @__PURE__ */ n.createElement("div", b({
218
+ }), c ? /* @__PURE__ */ n.createElement("div", y({
208
219
  className: "flex flex-col max-h-80 overflow-y-auto",
209
- "aria-label": `${y} options`
210
- }, H), a.length > 0 ? a.map((e, o) => ae(e, o)) : /* @__PURE__ */ n.createElement("div", {
211
- className: "px-3 py-4 text-center text-[var(--color-gray-700)] text-sm"
212
- }, C)) : a.length > 0 ? a.map((e, o) => ae(e, o)) : /* @__PURE__ */ n.createElement("div", {
213
- className: "px-3 py-4 text-center text-[var(--color-gray-700)] text-sm"
214
- }, C))), le = (e, o) => {
220
+ "aria-label": `${g} options`
221
+ }, U), l.length > 0 ? l.map((e, o) => ye(e, o)) : O(w, W, !1)) : l.length > 0 ? l.map((e, o) => ye(e, o)) : O(w, W, !1))), pe = (e, o) => {
215
222
  let r = [];
216
- e ? r = [...s, o] : r = s?.filter((m) => m[u] !== o[u]), q(r);
217
- }, Pe = () => {
223
+ e ? r = [...s, o] : r = s?.filter((m) => m[u] !== o[u]), B(r);
224
+ }, Oe = () => {
218
225
  d.current?.togglePopover(), d.current?.focusTrigger(), t?.onApply?.(s);
219
- }, se = (e, o = !1) => {
226
+ }, be = (e, o = !1) => {
220
227
  if (!(o && e.key === " ")) {
221
228
  if (e.key === "Enter" || e.key === " ") {
222
- if (e.preventDefault(), P >= 0 && P < a.length) {
223
- const r = a[P], m = s.some((p) => p[u] === r[u]);
224
- le(!m, r);
229
+ if (e.preventDefault(), S >= 0 && S < l.length) {
230
+ const r = l[S], m = s.some((b) => b[u] === r[u]);
231
+ pe(!m, r);
225
232
  }
226
233
  return;
227
234
  }
228
- U.onKeyDown(e), e.key === "Escape" && (e.stopPropagation(), requestAnimationFrame(() => d.current?.focusTrigger()));
235
+ z.onKeyDown(e), e.key === "Escape" && (e.stopPropagation(), requestAnimationFrame(() => d.current?.focusTrigger()));
229
236
  }
230
- }, ce = (e, o) => {
231
- const r = s.some((f) => f[u] === e[u]), m = `${V}-option-${o}`, p = P === o;
237
+ }, he = (e, o) => {
238
+ const r = s.some((f) => f[u] === e[u]), m = `${D}-option-${o}`, b = S === o;
232
239
  return /* @__PURE__ */ n.createElement("div", {
233
240
  key: e.id || e.value,
234
241
  id: m,
235
242
  role: "option",
236
243
  "aria-selected": r,
237
- 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)]" : ""}` : ""}`,
238
- onClick: () => le(!r, e),
244
+ className: `option px-3 py-2 hover:bg-[var(--color-gray-100)] cursor-pointer select-none flex items-center gap-2 ${b ? `bg-[var(--color-gray-100)]${J ? " outline outline-[length:var(--focus-width)] -outline-offset-2 outline-[var(--focus-color)]" : ""}` : ""}`,
245
+ onClick: () => pe(!r, e),
239
246
  "data-automation-id": `dropdown-option-${e?.automationId || o}`
240
- }, /* @__PURE__ */ n.createElement(Le, {
247
+ }, /* @__PURE__ */ n.createElement(He, {
241
248
  tabIndex: -1,
242
249
  ariaHidden: !0,
243
250
  checked: r,
@@ -247,35 +254,31 @@ const Ge = (t) => {
247
254
  }), /* @__PURE__ */ n.createElement("span", {
248
255
  className: "checkbox-label"
249
256
  }, e?.label));
250
- }, Ne = () => /* @__PURE__ */ n.createElement("div", {
257
+ }, Fe = () => /* @__PURE__ */ n.createElement("div", {
251
258
  onKeyDown: (e) => {
252
259
  e.key === "Tab" && e.stopPropagation();
253
260
  }
254
- }, i && re(), /* @__PURE__ */ n.createElement("div", b({
255
- className: `dropdown-content dropdown-options${i ? "" : " flex flex-col max-h-80 overflow-y-auto"}`
256
- }, i ? {} : {
257
- ...D,
258
- "aria-label": `${y} options`,
261
+ }, c && ge(), /* @__PURE__ */ n.createElement("div", y({
262
+ className: `dropdown-content dropdown-options${c ? "" : " flex flex-col max-h-80 overflow-y-auto"}`
263
+ }, c ? {} : {
264
+ ...P,
265
+ "aria-label": `${g} options`,
259
266
  "aria-multiselectable": "true",
260
267
  style: {
261
268
  outline: "none"
262
269
  },
263
270
  tabIndex: -1,
264
- "aria-activedescendant": U["aria-activedescendant"],
265
- onKeyDown: (e) => se(e, !1),
271
+ "aria-activedescendant": z["aria-activedescendant"],
272
+ onKeyDown: (e) => be(e, !1),
266
273
  onFocus: () => {
267
- P === -1 && a.length > 0 && Ee(0);
274
+ S === -1 && M.length > 0 && Ve(0);
268
275
  }
269
- }), i ? /* @__PURE__ */ n.createElement("div", b({
276
+ }), c ? /* @__PURE__ */ n.createElement("div", y({
270
277
  className: "flex flex-col max-h-80 overflow-y-auto"
271
- }, D, {
272
- "aria-label": `${y} options`,
278
+ }, P, {
279
+ "aria-label": `${g} options`,
273
280
  "aria-multiselectable": "true"
274
- }), a.length > 0 ? a.map((e, o) => ce(e, o)) : /* @__PURE__ */ n.createElement("div", {
275
- className: "px-3 py-4 text-center text-[var(--color-gray-700)] text-sm"
276
- }, C)) : a.length > 0 ? a.map((e, o) => ce(e, o)) : /* @__PURE__ */ n.createElement("div", {
277
- className: "px-3 py-4 text-center text-[var(--color-gray-700)] text-sm"
278
- }, C)), /* @__PURE__ */ n.createElement("div", {
281
+ }), l.length > 0 ? l.map((e, o) => he(e, o)) : O(S, J, !0)) : l.length > 0 ? l.map((e, o) => he(e, o)) : O(S, J, !0)), /* @__PURE__ */ n.createElement("div", {
279
282
  className: "flex items-center justify-end gap-4 p-3 border-t border-[var(--color-gray-200)]",
280
283
  onKeyDown: (e) => {
281
284
  if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End") {
@@ -284,121 +287,121 @@ const Ge = (t) => {
284
287
  }
285
288
  if (e.key === "Tab" && !e.shiftKey) {
286
289
  const o = e.currentTarget.querySelector('[data-automation-id="se-design-dropdown-apply-button"]');
287
- if (document.activeElement === o && (e.stopPropagation(), d.current?.togglePopover(), M)) {
290
+ if (document.activeElement === o && (e.stopPropagation(), d.current?.togglePopover(), q)) {
288
291
  e.preventDefault();
289
- const r = d.current?.element, m = Be({
292
+ const r = d.current?.element, m = Ue({
290
293
  container: document.body,
291
294
  filterHidden: !0
292
- }), p = r ? m.indexOf(r) : -1, f = m[p + 1];
295
+ }), b = r ? m.indexOf(r) : -1, f = m[b + 1];
293
296
  f ? f.focus() : r?.focus();
294
297
  }
295
- } else e.key === "Tab" && e.shiftKey && (e.preventDefault(), e.stopPropagation(), i ? E.current?.focus() : D.ref.current?.focus());
298
+ } else e.key === "Tab" && e.shiftKey && (e.preventDefault(), e.stopPropagation(), c ? C.current?.focus() : P.ref.current?.focus());
296
299
  }
297
- }, /* @__PURE__ */ n.createElement(ue, {
300
+ }, /* @__PURE__ */ n.createElement(Se, {
298
301
  label: "Clear",
299
302
  type: "link",
300
303
  size: "sm",
301
- onClick: De,
304
+ onClick: Ke,
302
305
  automationId: "se-design-dropdown-clear-button"
303
- }), /* @__PURE__ */ n.createElement(ue, {
306
+ }), /* @__PURE__ */ n.createElement(Se, {
304
307
  label: "Apply",
305
308
  type: "primary",
306
309
  size: "sm",
307
- onClick: Pe,
310
+ onClick: Oe,
308
311
  automationId: "se-design-dropdown-apply-button"
309
- }))), Ve = () => {
310
- 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}`;
312
+ }))), _e = () => {
313
+ const e = a ? "border-[var(--color-blue-500)]" : A ? "border-[var(--color-gray-300)]" : "border-[var(--color-gray-600)]", o = te ? "border-[var(--color-red-500)]" : "", r = `dropdown-src-element bg-[var(--color-white)] flex px-3 py-2 ${Pe ? "border-0" : `border rounded-md ${o || e}`} flex items-center ${De}`;
311
314
  return /* @__PURE__ */ n.createElement("div", {
312
315
  className: r
313
316
  }, /* @__PURE__ */ n.createElement("div", {
314
- id: Q,
317
+ id: Z,
315
318
  className: "flex-1 min-w-0",
316
319
  "data-automation-id": t?.dropDownSelectAutomationId || "selected-dropdown-value"
317
- }, oe(s[0], !0)), /* @__PURE__ */ n.createElement("div", {
320
+ }, me(s[0], !0)), /* @__PURE__ */ n.createElement("div", {
318
321
  className: "flex-shrink-0 ml-2",
319
322
  "aria-hidden": "true"
320
- }, /* @__PURE__ */ n.createElement(de, {
323
+ }, /* @__PURE__ */ n.createElement(we, {
321
324
  name: "chevron",
322
- rotation: l ? "180" : "0",
325
+ rotation: a ? "180" : "0",
323
326
  className: "transition-transform",
324
- stroke: X
327
+ stroke: ee
325
328
  })));
326
- }, $e = () => {
327
- const e = s[0]?.[g];
328
- return v && e ? `${v}, ${e}` : v || y || "Select option";
329
+ }, Te = () => {
330
+ const e = s[0]?.[p];
331
+ return v && e ? `${v}, ${e}` : v || g || "Select option";
329
332
  };
330
333
  return /* @__PURE__ */ n.createElement("div", {
331
334
  className: `se-design-dropdown-container${t?.className ? ` ${t?.className}` : ""}`,
332
335
  style: t?.style
333
336
  }, t?.label ? /* @__PURE__ */ n.createElement("div", {
334
337
  id: T,
335
- className: `se-design-dropdown-label ${ee ? "sr-only" : "mb-[3px] text-[var(--color-gray-700)] text-sm"}`
338
+ className: `se-design-dropdown-label ${le ? "sr-only" : "mb-[3px] text-[var(--color-gray-700)] text-sm"}`
336
339
  }, t?.label) : !t?.ariaLabelledBy && v ? /* @__PURE__ */ n.createElement("span", {
337
340
  id: T,
338
341
  className: "sr-only"
339
- }, v) : null, /* @__PURE__ */ n.createElement("div", b({
342
+ }, v) : null, /* @__PURE__ */ n.createElement("div", y({
340
343
  style: t?.style,
341
- className: `${K ? "bg-[var(--color-gray-50)] rounded-md cursor-not-allowed" : ""}`
342
- }, c ? {
344
+ className: `${A ? "bg-[var(--color-gray-50)] rounded-md cursor-not-allowed" : ""}`
345
+ }, i ? {
343
346
  // Multi-select: only spread focus-tracking handlers for isKeyboardFocused.
344
347
  // Dismiss is handled by Popover — don't spread onBlurCapture.
345
- onPointerMove: k.onPointerMove,
346
- onPointerDown: k.onPointerDown,
347
- onPointerUp: k.onPointerUp,
348
- onFocusCapture: k.onFocusCapture,
348
+ onPointerMove: N.onPointerMove,
349
+ onPointerDown: N.onPointerDown,
350
+ onPointerUp: N.onPointerUp,
351
+ onFocusCapture: N.onFocusCapture,
349
352
  onKeyDownCapture: (e) => {
350
- if (e.key === "Escape" && l && (e.stopPropagation(), d.current?.focusTrigger()), (e.key === "ArrowDown" || e.key === "ArrowUp") && l) {
351
- const o = i ? E.current : D.ref.current;
353
+ if (e.key === "Escape" && a && (e.stopPropagation(), d.current?.focusTrigger()), (e.key === "ArrowDown" || e.key === "ArrowUp") && a) {
354
+ const o = c ? C.current : P.ref.current;
352
355
  o && document.activeElement !== o && !o.contains(document.activeElement) && o.focus();
353
356
  }
354
- k.onKeyDownCapture?.(e);
357
+ N.onKeyDownCapture?.(e);
355
358
  }
356
359
  } : {
357
360
  ...j,
358
361
  onKeyDownCapture: (e) => {
359
- (e.key === "Escape" || e.key === "Tab") && l && (e.stopPropagation(), d.current?.focusTrigger()), j.onKeyDownCapture?.(e);
362
+ (e.key === "Escape" || e.key === "Tab") && a && (e.stopPropagation(), d.current?.focusTrigger()), j.onKeyDownCapture?.(e);
360
363
  },
361
364
  // Portal content lives in document.body — focus moving into it looks like "focus out" to
362
365
  // the container's blur handler, causing immediate close. Suppress it; the Popover's own
363
366
  // onBlur handler checks both source and portal content and handles dismissal correctly.
364
- ...M ? {
367
+ ...q ? {
365
368
  onBlurCapture: void 0
366
369
  } : {}
367
- }), /* @__PURE__ */ n.createElement(Fe, b({
370
+ }), /* @__PURE__ */ n.createElement(qe, y({
368
371
  ref: d,
369
- isPopoverOpen: l,
370
- isWithPortal: M,
371
- renderPopoverContents: Y || (c ? Ne : ke),
372
+ isPopoverOpen: a,
373
+ isWithPortal: q,
374
+ renderPopoverContents: oe || (i ? Fe : Le),
372
375
  contentWidth: "full",
373
376
  popoverContentStyleProperty: t.popoverContentStyleProperty,
374
377
  renderPopoverSrcElement: t.renderSrcElement ? () => t.renderSrcElement({
375
- isOpen: l,
378
+ isOpen: a,
376
379
  selectedValue: s
377
- }) : Ve,
380
+ }) : _e,
378
381
  onPopoverToggle: (e) => {
379
- if ($(e), e && !c && s.length > 0) {
380
- const o = a.findIndex((r) => u ? r[u] === s[0]?.[u] : r[g] === s[0]?.[g]);
381
- o >= 0 && te(o);
382
+ if (V(e), e && !i && s.length > 0) {
383
+ const o = l.findIndex((r) => u ? r[u] === s[0]?.[u] : r[p] === s[0]?.[p]);
384
+ o >= 0 && de(o);
382
385
  }
383
- if (e && !i) {
384
- const o = c ? D.ref : H.ref;
386
+ if (e && !c) {
387
+ const o = i ? P.ref : U.ref;
385
388
  requestAnimationFrame(() => requestAnimationFrame(() => o.current?.focus()));
386
389
  }
387
390
  },
388
- disabled: K,
391
+ disabled: A,
389
392
  automationId: t?.dropDownSrcAutomationId,
390
393
  popoverContentAutomationId: t?.dropDownContentAutomationId,
391
- ariaLabelledBy: t?.label || t?.ariaLabelledBy || v ? [t?.label || !t?.ariaLabelledBy && v ? T : t?.ariaLabelledBy, Q].filter(Boolean).join(" ") : void 0,
392
- ariaLabel: !t?.label && !v && !t?.ariaLabelledBy ? $e() : void 0,
394
+ ariaLabelledBy: t?.label || t?.ariaLabelledBy || v ? [t?.label || !t?.ariaLabelledBy && v ? T : t?.ariaLabelledBy, Z].filter(Boolean).join(" ") : void 0,
395
+ ariaLabel: !t?.label && !v && !t?.ariaLabelledBy ? Te() : void 0,
393
396
  sourceRole: "button",
394
397
  "aria-haspopup": "listbox"
395
- }, l ? {
396
- "aria-controls": V
397
- } : {}))), G && /* @__PURE__ */ n.createElement("div", {
398
+ }, a ? {
399
+ "aria-controls": D
400
+ } : {}))), te && /* @__PURE__ */ n.createElement("div", {
398
401
  className: "text-[var(--color-red-500)] text-sm"
399
- }, be));
402
+ }, ke));
400
403
  };
401
404
  export {
402
- Ge as Dropdown
405
+ rt as Dropdown
403
406
  };
404
407
  //# sourceMappingURL=index25.js.map