@studiolxd/brand 41.1.0 → 43.0.0
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.
- package/CHANGELOG.md +118 -0
- package/dist/_shared/datepicker.js +75 -78
- package/dist/_types/atoms/AsyncMultiSelect/AsyncMultiSelect.d.ts +28 -5
- package/dist/_types/atoms/AsyncSelect/AsyncSelect.d.ts +26 -6
- package/dist/_types/atoms/InputPhone/InputPhone.d.ts +15 -4
- package/dist/_types/atoms/MultiSelect/MultiSelect.d.ts +20 -1
- package/dist/_types/atoms/NumberInput/NumberInput.d.ts +14 -4
- package/dist/_types/atoms/OtpInput/OtpInput.d.ts +15 -4
- package/dist/_types/atoms/Select/Select.d.ts +18 -1
- package/dist/_types/atoms/TimeSelect/TimeSelect.d.ts +34 -6
- package/dist/_types/messages/BrandMessages.d.ts +31 -1
- package/dist/_types/messages/index.d.ts +1 -1
- package/dist/_types/molecules/Calendar/Calendar.d.ts +44 -13
- package/dist/_types/molecules/DatePicker/DatePicker.d.ts +56 -26
- package/dist/_types/molecules/DatePicker/dateMask.d.ts +9 -2
- package/dist/_types/molecules/DateTimeField/DateTimeField.d.ts +12 -12
- package/dist/_types/molecules/DocsSearch/DocsSearch.d.ts +31 -12
- package/dist/_types/molecules/FilterBar/FilterBar.d.ts +10 -1
- package/dist/_types/molecules/InputField/InputField.d.ts +16 -2
- package/dist/_types/molecules/MultiSelectField/MultiSelectField.d.ts +9 -1
- package/dist/_types/molecules/PasswordField/PasswordField.d.ts +22 -2
- package/dist/_types/molecules/SearchForm/SearchForm.d.ts +18 -6
- package/dist/_types/molecules/SelectField/SelectField.d.ts +5 -0
- package/dist/_types/molecules/TimeField/TimeField.d.ts +9 -2
- package/dist/_types/molecules/_shared/calendarGrid.d.ts +6 -2
- package/dist/async-multi-select.js +50 -49
- package/dist/async-select.js +89 -88
- package/dist/calendar.js +87 -86
- package/dist/docs-search.js +38 -37
- package/dist/filter-bar.css +1 -1
- package/dist/filter-bar.js +19 -17
- package/dist/input-field.js +66 -65
- package/dist/input-phone.js +39 -38
- package/dist/multi-select.js +109 -108
- package/dist/number-input.js +61 -60
- package/dist/otp-input.js +86 -85
- package/dist/password-field.js +46 -45
- package/dist/search-form.js +35 -34
- package/dist/select.js +75 -71
- package/dist/time-select.js +57 -56
- package/package.json +1 -1
|
@@ -29,9 +29,16 @@ export interface TimeFieldProps {
|
|
|
29
29
|
helperText?: string;
|
|
30
30
|
/** Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye). */
|
|
31
31
|
className?: string;
|
|
32
|
-
/**
|
|
32
|
+
/**
|
|
33
|
+
* aria-label del desplegable de horas. **Sin default**: sin él, el texto
|
|
34
|
+
* sale de `timeSelect.hours` del `BrandMessagesProvider`, que el
|
|
35
|
+
* `TimeSelect` de dentro lee por contexto.
|
|
36
|
+
*/
|
|
33
37
|
hoursLabel?: string;
|
|
34
|
-
/**
|
|
38
|
+
/**
|
|
39
|
+
* aria-label del desplegable de minutos. **Sin default**: sin él, sale de
|
|
40
|
+
* `timeSelect.minutes` del `BrandMessagesProvider`.
|
|
41
|
+
*/
|
|
35
42
|
minutesLabel?: string;
|
|
36
43
|
onChange?: (value: TimeValue) => void;
|
|
37
44
|
onBlur?: React.FocusEventHandler<HTMLButtonElement>;
|
|
@@ -51,10 +51,14 @@ export interface CalendarMonthNavOptions {
|
|
|
51
51
|
/**
|
|
52
52
|
* Nombre accesible del botón de retroceso. Depende de la vista: «Mes
|
|
53
53
|
* anterior» sobre la rejilla de días, «Años anteriores» sobre la de años.
|
|
54
|
+
*
|
|
55
|
+
* Opcional porque sin `navigable` no se pinta ningún botón: quien la monta
|
|
56
|
+
* lee el texto de su catálogo **solo cuando hay flechas**, y un calendario
|
|
57
|
+
* estático no exige un texto que nadie va a ver.
|
|
54
58
|
*/
|
|
55
|
-
previousLabel
|
|
59
|
+
previousLabel?: string;
|
|
56
60
|
/** Nombre accesible del botón de avance, también según la vista. */
|
|
57
|
-
nextLabel
|
|
61
|
+
nextLabel?: string;
|
|
58
62
|
prevDisabled?: boolean;
|
|
59
63
|
nextDisabled?: boolean;
|
|
60
64
|
onPrev: () => void;
|
|
@@ -1,47 +1,48 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import './async-multi-select.css';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
3
|
+
import { n as e } from "./_shared/brandmessagescontext.js";
|
|
4
|
+
import { Icon as t } from "./icon.js";
|
|
5
|
+
import { Spinner as n } from "./spinner.js";
|
|
6
|
+
import { forwardRef as r, useCallback as ee, useEffect as te, useId as i, useRef as a, useState as o } from "react";
|
|
6
7
|
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
7
8
|
import { Popover as l } from "@base-ui/react/popover";
|
|
8
9
|
//#region src/stories/atoms/AsyncMultiSelect/AsyncMultiSelect.tsx
|
|
9
|
-
function
|
|
10
|
+
function u(e, t) {
|
|
10
11
|
typeof e == "function" ? e(t) : e && (e.current = t);
|
|
11
12
|
}
|
|
12
|
-
var
|
|
13
|
-
let [k, A] = o(!1), [j, M] = o(""), [N, P] = o(!1), [F, I] = o([]), [L, R] = o(!1), [z, B] = o(-1), [V, H] = o(
|
|
13
|
+
var d = r(function({ onSearch: r, value: d, defaultValue: f = [], onValueChange: p, selectedOptions: ne, placeholder: m, disabled: h, readOnly: g, size: _ = "md", debounceMs: v = 300, id: re, name: y, error: b = !1, required: ie, onBlur: ae, className: x, "aria-label": S, "aria-describedby": C, removeLabel: w, emptyMessage: T, loadingLabel: E, container: D }, oe) {
|
|
14
|
+
let O = e("asyncMultiSelect"), [k, A] = o(!1), [j, M] = o(""), [N, P] = o(!1), [F, I] = o([]), [L, R] = o(!1), [z, B] = o(-1), [V, H] = o(f), [U, W] = o([]), G = a(null), K = a(0), q = a(null), J = a(null), Y = i(), se = i(), X = d === void 0 ? V : d, ce = X.map((e) => ne?.find((t) => t.value === e) ?? U.find((t) => t.value === e) ?? {
|
|
14
15
|
value: e,
|
|
15
16
|
label: e
|
|
16
|
-
}), Z = (e) => `${
|
|
17
|
+
}), Z = (e) => `${se}-opt-${e}`, Q = ee(async (e) => {
|
|
17
18
|
let t = ++K.current;
|
|
18
19
|
P(!0), R(!1);
|
|
19
20
|
try {
|
|
20
|
-
let
|
|
21
|
+
let n = await r(e);
|
|
21
22
|
if (t !== K.current) return;
|
|
22
|
-
I(
|
|
23
|
+
I(n), B(-1);
|
|
23
24
|
} catch {
|
|
24
25
|
if (t !== K.current) return;
|
|
25
26
|
I([]), B(-1);
|
|
26
27
|
} finally {
|
|
27
28
|
t === K.current && (P(!1), R(!0));
|
|
28
29
|
}
|
|
29
|
-
}, [
|
|
30
|
-
|
|
30
|
+
}, [r]);
|
|
31
|
+
te(() => () => {
|
|
31
32
|
K.current += 1, G.current && clearTimeout(G.current);
|
|
32
33
|
}, []);
|
|
33
|
-
function
|
|
34
|
+
function le(e) {
|
|
34
35
|
let t = e.target.value;
|
|
35
36
|
M(t), k || A(!0), G.current && clearTimeout(G.current), G.current = setTimeout(() => void Q(t), v);
|
|
36
37
|
}
|
|
37
|
-
function
|
|
38
|
+
function ue(e) {
|
|
38
39
|
h || g || k || (e.preventDefault(), q.current?.focus(), B(-1), M(""), I([]), R(!1), A(!0), Q(""));
|
|
39
40
|
}
|
|
40
41
|
function $(e, t) {
|
|
41
42
|
let n = X.includes(e) ? X.filter((t) => t !== e) : [...X, e];
|
|
42
|
-
t && W((e) => e.some((e) => e.value === t.value) ? e : [...e, t]),
|
|
43
|
+
t && W((e) => e.some((e) => e.value === t.value) ? e : [...e, t]), d === void 0 && H(n), p?.(n);
|
|
43
44
|
}
|
|
44
|
-
function
|
|
45
|
+
function de(e) {
|
|
45
46
|
if (e.key === "ArrowDown") e.preventDefault(), k ? B((e) => Math.min(e + 1, F.length - 1)) : (A(!0), Q(j));
|
|
46
47
|
else if (e.key === "ArrowUp") e.preventDefault(), B((e) => Math.max(e - 1, -1));
|
|
47
48
|
else if (e.key === "Enter" && z >= 0 && F[z]) e.preventDefault(), $(F[z].value, F[z]), q.current?.focus();
|
|
@@ -52,7 +53,7 @@ var u = n(function({ onSearch: n, value: u, defaultValue: d = [], onValueChange:
|
|
|
52
53
|
$(e);
|
|
53
54
|
}
|
|
54
55
|
}
|
|
55
|
-
function
|
|
56
|
+
function fe(e, t) {
|
|
56
57
|
if (!e) {
|
|
57
58
|
if (t.reason === "outside-press") {
|
|
58
59
|
let e = t.event?.target;
|
|
@@ -61,61 +62,61 @@ var u = n(function({ onSearch: n, value: u, defaultValue: d = [], onValueChange:
|
|
|
61
62
|
A(!1), M(""), B(-1);
|
|
62
63
|
}
|
|
63
64
|
}
|
|
64
|
-
let
|
|
65
|
+
let pe = [
|
|
65
66
|
"async-multi-select",
|
|
66
67
|
_ === "md" ? "" : `async-multi-select--${_}`,
|
|
67
68
|
h ? "async-multi-select--disabled" : "",
|
|
68
69
|
k ? "async-multi-select--open" : "",
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
].filter(Boolean).join(" "),
|
|
70
|
+
b ? "async-multi-select--error" : "",
|
|
71
|
+
x ?? ""
|
|
72
|
+
].filter(Boolean).join(" "), me = ["async-multi-select__content", _ === "md" ? "" : `async-multi-select__content--${_}`].filter(Boolean).join(" ");
|
|
72
73
|
return /* @__PURE__ */ c(l.Root, {
|
|
73
74
|
open: k,
|
|
74
|
-
onOpenChange:
|
|
75
|
+
onOpenChange: fe,
|
|
75
76
|
children: [/* @__PURE__ */ c("div", {
|
|
76
77
|
ref: J,
|
|
77
|
-
className:
|
|
78
|
+
className: pe,
|
|
78
79
|
"data-popup-open": k || void 0,
|
|
79
80
|
children: [/* @__PURE__ */ c("div", {
|
|
80
81
|
className: "async-multi-select__input-area",
|
|
81
82
|
children: [
|
|
82
|
-
|
|
83
|
+
ce.map((e) => /* @__PURE__ */ c("span", {
|
|
83
84
|
className: "async-multi-select__pill",
|
|
84
85
|
children: [/* @__PURE__ */ s("span", {
|
|
85
86
|
className: "async-multi-select__pill-label",
|
|
86
|
-
children:
|
|
87
|
+
children: e.label
|
|
87
88
|
}), !h && !g && /* @__PURE__ */ s("button", {
|
|
88
89
|
type: "button",
|
|
89
90
|
className: "async-multi-select__pill-remove",
|
|
90
|
-
"aria-label":
|
|
91
|
+
"aria-label": O("remove", w)(e.label),
|
|
91
92
|
tabIndex: -1,
|
|
92
|
-
onMouseDown: (
|
|
93
|
-
|
|
93
|
+
onMouseDown: (t) => {
|
|
94
|
+
t.preventDefault(), $(e.value);
|
|
94
95
|
},
|
|
95
|
-
children: /* @__PURE__ */ s(
|
|
96
|
+
children: /* @__PURE__ */ s(t, {
|
|
96
97
|
name: "close",
|
|
97
98
|
size: "xs"
|
|
98
99
|
})
|
|
99
100
|
})]
|
|
100
|
-
},
|
|
101
|
+
}, e.value)),
|
|
101
102
|
/* @__PURE__ */ s("input", {
|
|
102
103
|
ref: (e) => {
|
|
103
|
-
q.current = e,
|
|
104
|
+
q.current = e, u(oe, e);
|
|
104
105
|
},
|
|
105
|
-
id:
|
|
106
|
+
id: re,
|
|
106
107
|
type: "text",
|
|
107
108
|
className: "async-multi-select__input",
|
|
108
109
|
value: j,
|
|
109
|
-
onChange:
|
|
110
|
-
onPointerDown:
|
|
111
|
-
onKeyDown:
|
|
112
|
-
placeholder: X.length === 0 ? m : void 0,
|
|
110
|
+
onChange: le,
|
|
111
|
+
onPointerDown: ue,
|
|
112
|
+
onKeyDown: de,
|
|
113
|
+
placeholder: X.length === 0 ? O("placeholder", m) : void 0,
|
|
113
114
|
disabled: h,
|
|
114
115
|
readOnly: g,
|
|
115
|
-
"aria-label":
|
|
116
|
-
"aria-describedby":
|
|
117
|
-
"aria-invalid":
|
|
118
|
-
"aria-required":
|
|
116
|
+
"aria-label": S,
|
|
117
|
+
"aria-describedby": C,
|
|
118
|
+
"aria-invalid": b || void 0,
|
|
119
|
+
"aria-required": ie || void 0,
|
|
119
120
|
"aria-expanded": k,
|
|
120
121
|
"aria-haspopup": "listbox",
|
|
121
122
|
"aria-controls": k ? Y : void 0,
|
|
@@ -123,15 +124,15 @@ var u = n(function({ onSearch: n, value: u, defaultValue: d = [], onValueChange:
|
|
|
123
124
|
autoComplete: "off",
|
|
124
125
|
role: "combobox",
|
|
125
126
|
"aria-autocomplete": "list",
|
|
126
|
-
onBlur:
|
|
127
|
+
onBlur: ae
|
|
127
128
|
}),
|
|
128
|
-
|
|
129
|
+
y && X.map((e) => /* @__PURE__ */ s("input", {
|
|
129
130
|
type: "hidden",
|
|
130
|
-
name:
|
|
131
|
+
name: y,
|
|
131
132
|
value: e
|
|
132
133
|
}, e))
|
|
133
134
|
]
|
|
134
|
-
}), N && /* @__PURE__ */ s(
|
|
135
|
+
}), N && /* @__PURE__ */ s(n, {
|
|
135
136
|
size: "sm",
|
|
136
137
|
"aria-hidden": !0
|
|
137
138
|
})]
|
|
@@ -143,25 +144,25 @@ var u = n(function({ onSearch: n, value: u, defaultValue: d = [], onValueChange:
|
|
|
143
144
|
align: "start",
|
|
144
145
|
sideOffset: -1,
|
|
145
146
|
children: /* @__PURE__ */ s(l.Popup, {
|
|
146
|
-
className:
|
|
147
|
+
className: me,
|
|
147
148
|
initialFocus: !1,
|
|
148
149
|
finalFocus: !1,
|
|
149
150
|
children: /* @__PURE__ */ c("div", {
|
|
150
151
|
role: "listbox",
|
|
151
152
|
"aria-multiselectable": "true",
|
|
152
|
-
"aria-label":
|
|
153
|
+
"aria-label": S ?? O("placeholder", m),
|
|
153
154
|
id: Y,
|
|
154
155
|
children: [
|
|
155
156
|
N && /* @__PURE__ */ s("div", {
|
|
156
157
|
className: "async-multi-select__loading",
|
|
157
|
-
children: /* @__PURE__ */ s(
|
|
158
|
+
children: /* @__PURE__ */ s(n, {
|
|
158
159
|
size: "sm",
|
|
159
|
-
label: E
|
|
160
|
+
label: O("loading", E)
|
|
160
161
|
})
|
|
161
162
|
}),
|
|
162
163
|
!N && L && F.length === 0 && /* @__PURE__ */ s("div", {
|
|
163
164
|
className: "async-multi-select__empty",
|
|
164
|
-
children:
|
|
165
|
+
children: O("empty", T)
|
|
165
166
|
}),
|
|
166
167
|
!N && F.map((e, t) => {
|
|
167
168
|
let n = X.includes(e.value), r = z === t;
|
|
@@ -193,4 +194,4 @@ var u = n(function({ onSearch: n, value: u, defaultValue: d = [], onValueChange:
|
|
|
193
194
|
});
|
|
194
195
|
});
|
|
195
196
|
//#endregion
|
|
196
|
-
export {
|
|
197
|
+
export { d as AsyncMultiSelect };
|
package/dist/async-select.js
CHANGED
|
@@ -1,154 +1,155 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import './async-select.css';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
3
|
+
import { n as e } from "./_shared/brandmessagescontext.js";
|
|
4
|
+
import { Icon as t } from "./icon.js";
|
|
5
|
+
import { Spinner as n } from "./spinner.js";
|
|
6
|
+
import { forwardRef as r, useCallback as i, useEffect as a, useId as o, useRef as s, useState as c } from "react";
|
|
7
|
+
import { jsx as l, jsxs as u } from "react/jsx-runtime";
|
|
8
|
+
import { Popover as d } from "@base-ui/react/popover";
|
|
8
9
|
//#region src/stories/atoms/AsyncSelect/AsyncSelect.tsx
|
|
9
10
|
function ee(e, t) {
|
|
10
11
|
typeof e == "function" ? e(t) : e && (e.current = t);
|
|
11
12
|
}
|
|
12
|
-
var
|
|
13
|
-
let
|
|
14
|
-
let t = ++
|
|
15
|
-
|
|
13
|
+
var f = r(function({ onSearch: r, value: f, onValueChange: p, selectedOption: m, placeholder: h, disabled: g, readOnly: _, size: v = "md", debounceMs: y = 300, id: b, name: x, error: S = !1, required: te, onBlur: ne, className: C, "aria-label": w, "aria-describedby": T, emptyMessage: re, loadingLabel: ie, clearLabel: ae, container: E }, D) {
|
|
14
|
+
let O = e("asyncSelect"), [k, A] = c(!1), [j, M] = c(""), [N, P] = c(!1), [F, I] = c([]), [oe, L] = c(!1), [R, z] = c(-1), [B, V] = c(null), [H, U] = c(null), W = s(null), G = s(0), K = s(null), q = s(null), J = o(), se = o(), Y = f === void 0 ? B : f, ce = m === void 0 ? H : m, X = (e) => `${se}-opt-${e}`, Z = i(async (e) => {
|
|
15
|
+
let t = ++G.current;
|
|
16
|
+
P(!0), L(!1);
|
|
16
17
|
try {
|
|
17
|
-
let
|
|
18
|
-
if (t !==
|
|
19
|
-
|
|
18
|
+
let n = await r(e);
|
|
19
|
+
if (t !== G.current) return;
|
|
20
|
+
I(n), z(-1);
|
|
20
21
|
} catch {
|
|
21
|
-
if (t !==
|
|
22
|
-
|
|
22
|
+
if (t !== G.current) return;
|
|
23
|
+
I([]), z(-1);
|
|
23
24
|
} finally {
|
|
24
|
-
t ===
|
|
25
|
+
t === G.current && (P(!1), L(!0));
|
|
25
26
|
}
|
|
26
|
-
}, [
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
}, [r]);
|
|
28
|
+
a(() => () => {
|
|
29
|
+
G.current += 1, W.current && clearTimeout(W.current);
|
|
29
30
|
}, []);
|
|
30
|
-
function
|
|
31
|
+
function le(e) {
|
|
31
32
|
let t = e.target.value;
|
|
32
|
-
|
|
33
|
+
M(t), W.current && clearTimeout(W.current), W.current = setTimeout(() => void Z(t), y);
|
|
33
34
|
}
|
|
34
|
-
function
|
|
35
|
-
|
|
35
|
+
function ue(e) {
|
|
36
|
+
g || _ || k || (e.preventDefault(), K.current?.focus(), z(-1), M(""), I([]), L(!1), A(!0), Z(""));
|
|
36
37
|
}
|
|
37
38
|
function Q(e) {
|
|
38
|
-
|
|
39
|
+
f === void 0 && (V(e.value), U(e)), p?.(e.value, e), A(!1), z(-1), M("");
|
|
39
40
|
}
|
|
40
41
|
function $() {
|
|
41
|
-
|
|
42
|
+
f === void 0 && (V(null), U(null)), p?.(null, null), M(""), I([]), L(!1), K.current?.focus();
|
|
42
43
|
}
|
|
43
|
-
function
|
|
44
|
+
function de(e) {
|
|
44
45
|
e.stopPropagation(), $();
|
|
45
46
|
}
|
|
46
|
-
function
|
|
47
|
-
e.key === "ArrowDown" ? (e.preventDefault(),
|
|
47
|
+
function fe(e) {
|
|
48
|
+
e.key === "ArrowDown" ? (e.preventDefault(), k ? z((e) => Math.min(e + 1, F.length - 1)) : (A(!0), Z(j))) : e.key === "ArrowUp" ? (e.preventDefault(), z((e) => Math.max(e - 1, -1))) : e.key === "Enter" && R >= 0 && F[R] ? (e.preventDefault(), Q(F[R])) : e.key === "Escape" ? (A(!1), M(""), z(-1)) : e.key === "Tab" ? (A(!1), z(-1)) : (e.key === "Backspace" || e.key === "Delete") && j === "" && Y && !g && !_ ? (e.preventDefault(), $()) : !k && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), M(e.key), A(!0), I([]), L(!1), W.current && clearTimeout(W.current), W.current = setTimeout(() => void Z(e.key), y));
|
|
48
49
|
}
|
|
49
|
-
function
|
|
50
|
+
function pe(e, t) {
|
|
50
51
|
if (!e) {
|
|
51
52
|
if (t.reason === "outside-press") {
|
|
52
53
|
let e = t.event?.target;
|
|
53
|
-
if (e instanceof Node &&
|
|
54
|
+
if (e instanceof Node && q.current?.contains(e)) return;
|
|
54
55
|
}
|
|
55
|
-
|
|
56
|
+
A(!1), M(""), z(-1);
|
|
56
57
|
}
|
|
57
58
|
}
|
|
58
|
-
let
|
|
59
|
+
let me = k ? j : ce?.label ?? "", he = [
|
|
59
60
|
"async-select",
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
].filter(Boolean).join(" "),
|
|
65
|
-
return /* @__PURE__ */
|
|
66
|
-
open:
|
|
67
|
-
onOpenChange:
|
|
68
|
-
children: [/* @__PURE__ */
|
|
69
|
-
ref:
|
|
70
|
-
className:
|
|
71
|
-
"data-popup-open":
|
|
61
|
+
v === "md" ? "" : `async-select--${v}`,
|
|
62
|
+
g ? "async-select--disabled" : "",
|
|
63
|
+
S ? "async-select--error" : "",
|
|
64
|
+
C ?? ""
|
|
65
|
+
].filter(Boolean).join(" "), ge = ["async-select__content", v === "md" ? "" : `async-select__content--${v}`].filter(Boolean).join(" ");
|
|
66
|
+
return /* @__PURE__ */ u(d.Root, {
|
|
67
|
+
open: k,
|
|
68
|
+
onOpenChange: pe,
|
|
69
|
+
children: [/* @__PURE__ */ u("div", {
|
|
70
|
+
ref: q,
|
|
71
|
+
className: he,
|
|
72
|
+
"data-popup-open": k || void 0,
|
|
72
73
|
children: [
|
|
73
|
-
/* @__PURE__ */
|
|
74
|
+
/* @__PURE__ */ l("input", {
|
|
74
75
|
ref: (e) => {
|
|
75
|
-
|
|
76
|
+
K.current = e, ee(D, e);
|
|
76
77
|
},
|
|
77
|
-
id:
|
|
78
|
+
id: b,
|
|
78
79
|
type: "text",
|
|
79
80
|
className: "async-select__input",
|
|
80
|
-
value:
|
|
81
|
-
onChange:
|
|
82
|
-
onPointerDown:
|
|
83
|
-
onKeyDown:
|
|
84
|
-
placeholder:
|
|
85
|
-
disabled:
|
|
86
|
-
readOnly:
|
|
87
|
-
"aria-label":
|
|
88
|
-
"aria-describedby":
|
|
89
|
-
"aria-invalid":
|
|
90
|
-
"aria-required":
|
|
91
|
-
"aria-expanded":
|
|
81
|
+
value: me,
|
|
82
|
+
onChange: le,
|
|
83
|
+
onPointerDown: ue,
|
|
84
|
+
onKeyDown: fe,
|
|
85
|
+
placeholder: O("placeholder", h),
|
|
86
|
+
disabled: g,
|
|
87
|
+
readOnly: _,
|
|
88
|
+
"aria-label": w,
|
|
89
|
+
"aria-describedby": T,
|
|
90
|
+
"aria-invalid": S || void 0,
|
|
91
|
+
"aria-required": te || void 0,
|
|
92
|
+
"aria-expanded": k,
|
|
92
93
|
"aria-haspopup": "listbox",
|
|
93
|
-
"aria-controls":
|
|
94
|
-
"aria-activedescendant":
|
|
94
|
+
"aria-controls": k ? J : void 0,
|
|
95
|
+
"aria-activedescendant": R >= 0 ? X(R) : void 0,
|
|
95
96
|
autoComplete: "off",
|
|
96
97
|
role: "combobox",
|
|
97
98
|
"aria-autocomplete": "list",
|
|
98
|
-
onBlur:
|
|
99
|
+
onBlur: ne
|
|
99
100
|
}),
|
|
100
|
-
|
|
101
|
+
x && /* @__PURE__ */ l("input", {
|
|
101
102
|
type: "hidden",
|
|
102
|
-
name:
|
|
103
|
-
value:
|
|
103
|
+
name: x,
|
|
104
|
+
value: Y ?? ""
|
|
104
105
|
}),
|
|
105
|
-
|
|
106
|
+
N && /* @__PURE__ */ l(n, {
|
|
106
107
|
size: "sm",
|
|
107
108
|
"aria-hidden": !0
|
|
108
109
|
}),
|
|
109
|
-
!
|
|
110
|
+
!N && Y && !g && !_ && /* @__PURE__ */ l("button", {
|
|
110
111
|
type: "button",
|
|
111
112
|
className: "async-select__clear",
|
|
112
|
-
"aria-label":
|
|
113
|
+
"aria-label": O("clear", ae),
|
|
113
114
|
tabIndex: -1,
|
|
114
|
-
onMouseDown:
|
|
115
|
-
children: /* @__PURE__ */
|
|
115
|
+
onMouseDown: de,
|
|
116
|
+
children: /* @__PURE__ */ l(t, {
|
|
116
117
|
name: "close",
|
|
117
118
|
size: "xs"
|
|
118
119
|
})
|
|
119
120
|
})
|
|
120
121
|
]
|
|
121
|
-
}), /* @__PURE__ */
|
|
122
|
-
container:
|
|
123
|
-
children: /* @__PURE__ */
|
|
122
|
+
}), /* @__PURE__ */ l(d.Portal, {
|
|
123
|
+
container: E,
|
|
124
|
+
children: /* @__PURE__ */ l(d.Positioner, {
|
|
124
125
|
className: "async-select__positioner",
|
|
125
|
-
anchor:
|
|
126
|
+
anchor: q,
|
|
126
127
|
align: "start",
|
|
127
128
|
sideOffset: -1,
|
|
128
|
-
children: /* @__PURE__ */
|
|
129
|
-
className:
|
|
129
|
+
children: /* @__PURE__ */ l(d.Popup, {
|
|
130
|
+
className: ge,
|
|
130
131
|
initialFocus: !1,
|
|
131
132
|
finalFocus: !1,
|
|
132
|
-
children: /* @__PURE__ */
|
|
133
|
+
children: /* @__PURE__ */ u("div", {
|
|
133
134
|
role: "listbox",
|
|
134
|
-
"aria-label":
|
|
135
|
-
id:
|
|
135
|
+
"aria-label": w ?? O("placeholder", h),
|
|
136
|
+
id: J,
|
|
136
137
|
children: [
|
|
137
|
-
|
|
138
|
+
N && /* @__PURE__ */ l("div", {
|
|
138
139
|
className: "async-select__loading",
|
|
139
|
-
children: /* @__PURE__ */
|
|
140
|
+
children: /* @__PURE__ */ l(n, {
|
|
140
141
|
size: "sm",
|
|
141
|
-
label:
|
|
142
|
+
label: O("loading", ie)
|
|
142
143
|
})
|
|
143
144
|
}),
|
|
144
|
-
!
|
|
145
|
+
!N && oe && F.length === 0 && /* @__PURE__ */ l("div", {
|
|
145
146
|
className: "async-select__empty",
|
|
146
|
-
children:
|
|
147
|
+
children: O("empty", re)
|
|
147
148
|
}),
|
|
148
|
-
!
|
|
149
|
-
let n = e.value ===
|
|
150
|
-
return /* @__PURE__ */
|
|
151
|
-
id:
|
|
149
|
+
!N && F.map((e, t) => {
|
|
150
|
+
let n = e.value === Y, r = R === t;
|
|
151
|
+
return /* @__PURE__ */ l("div", {
|
|
152
|
+
id: X(t),
|
|
152
153
|
role: "option",
|
|
153
154
|
"aria-selected": n,
|
|
154
155
|
className: [
|
|
@@ -169,4 +170,4 @@ var d = n(function({ onSearch: n, value: d, onValueChange: f, selectedOption: p,
|
|
|
169
170
|
});
|
|
170
171
|
});
|
|
171
172
|
//#endregion
|
|
172
|
-
export {
|
|
173
|
+
export { f as AsyncSelect };
|