@serendie/ui 3.5.1-dev.202606091509 → 3.5.1
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/dist/components/BottomNavigation/BottomNavigation.d.ts +1 -1
- package/dist/components/DataTable/DataTableComponent.d.ts +1 -1
- package/dist/components/DataTable/table/BodyCheckbox.d.ts +1 -1
- package/dist/components/Divider/Divider.d.ts +1 -1
- package/dist/components/List/List.d.ts +1 -1
- package/dist/components/ProgressIndicator/ProgressIndicator.d.ts +1 -1
- package/dist/components/ProgressIndicator/ProgressIndicatorIndeterminate.d.ts +1 -1
- package/dist/components/Tabs/TabItem.d.ts +1 -1
- package/dist/components/Tabs/Tabs.d.ts +1 -1
- package/dist/i18n/provider.d.ts +1 -1
- package/dist/node_modules/@zag-js/accordion/dist/accordion.connect.js +50 -49
- package/dist/node_modules/@zag-js/combobox/dist/combobox.connect.js +68 -70
- package/dist/node_modules/@zag-js/combobox/dist/combobox.machine.js +1 -1
- package/dist/node_modules/@zag-js/date-picker/dist/date-picker.connect.js +308 -322
- package/dist/node_modules/@zag-js/date-picker/dist/date-picker.machine.js +79 -93
- package/dist/node_modules/@zag-js/date-picker/dist/date-picker.utils.js +43 -35
- package/dist/node_modules/@zag-js/dialog/dist/dialog.dom.js +35 -36
- package/dist/node_modules/@zag-js/dialog/dist/dialog.machine.js +37 -27
- package/dist/node_modules/@zag-js/dismissable/dist/dismissable-layer.js +41 -56
- package/dist/node_modules/@zag-js/dismissable/dist/layer-stack.js +31 -51
- package/dist/node_modules/@zag-js/dismissable/dist/pointer-event-outside.js +25 -46
- package/dist/node_modules/@zag-js/dom-query/dist/controller.js +5 -5
- package/dist/node_modules/@zag-js/dom-query/dist/overflow.js +21 -13
- package/dist/node_modules/@zag-js/live-region/dist/index.js +19 -29
- package/dist/node_modules/@zag-js/menu/dist/menu.connect.js +135 -138
- package/dist/node_modules/@zag-js/menu/dist/menu.dom.js +24 -24
- package/dist/node_modules/@zag-js/menu/dist/menu.machine.js +1 -1
- package/dist/node_modules/@zag-js/popper/dist/get-placement.js +71 -82
- package/dist/node_modules/@zag-js/react/dist/machine.js +96 -105
- package/dist/node_modules/@zag-js/remove-scroll/dist/index.js +26 -34
- package/dist/node_modules/@zag-js/select/dist/select.connect.js +101 -104
- package/dist/node_modules/@zag-js/select/dist/select.machine.js +1 -1
- package/dist/node_modules/@zag-js/tabs/dist/tabs.machine.js +60 -63
- package/dist/node_modules/@zag-js/tooltip/dist/tooltip.connect.js +25 -27
- package/dist/node_modules/@zag-js/tooltip/dist/tooltip.dom.js +14 -15
- package/dist/theme/initColorScheme.d.ts +1 -1
- package/package.json +8 -8
- package/dist/node_modules/@zag-js/date-utils/dist/locale.js +0 -12
- package/dist/node_modules/@zag-js/dom-query/dist/scroll.js +0 -11
|
@@ -1,41 +1,40 @@
|
|
|
1
|
-
import { getEventTarget as
|
|
2
|
-
import { isInternalChangeEvent as
|
|
3
|
-
import { isValidTabEvent as
|
|
4
|
-
import { contains as
|
|
5
|
-
import { dataAttr as i, ariaAttr as
|
|
6
|
-
import { getByTypeahead as
|
|
7
|
-
import { visuallyHiddenStyle as
|
|
8
|
-
import { getPlacementStyles as
|
|
9
|
-
import { getPlacementSide as z } from "../../popper/dist/placement.js";
|
|
1
|
+
import { getEventTarget as V, getEventKey as D, getNativeEvent as q } from "../../dom-query/dist/event.js";
|
|
2
|
+
import { isInternalChangeEvent as B } from "../../dom-query/dist/form.js";
|
|
3
|
+
import { isValidTabEvent as Y } from "../../dom-query/dist/initial-focus.js";
|
|
4
|
+
import { contains as j, isEditableElement as J } from "../../dom-query/dist/node.js";
|
|
5
|
+
import { dataAttr as i, ariaAttr as $ } from "../../dom-query/dist/shared.js";
|
|
6
|
+
import { getByTypeahead as k } from "../../dom-query/dist/typeahead.js";
|
|
7
|
+
import { visuallyHiddenStyle as Q } from "../../dom-query/dist/visually-hidden.js";
|
|
8
|
+
import { getPlacementStyles as X } from "../../popper/dist/get-styles.js";
|
|
10
9
|
import { parts as o } from "./select.anatomy.js";
|
|
11
|
-
import { getItemId as
|
|
12
|
-
import { ensure as
|
|
13
|
-
function
|
|
14
|
-
const { context: c, prop: a, scope: d, state:
|
|
15
|
-
function
|
|
16
|
-
const t =
|
|
17
|
-
return
|
|
18
|
-
value:
|
|
10
|
+
import { getItemId as H, getTriggerId as x, getLabelId as v, getContentId as M, getPositionerId as Z, getTriggerEl as S, getHiddenSelectId as w, getClearTriggerId as z, getItemGroupLabelId as U, getItemGroupId as ee, getControlId as te, getRootId as re } from "./select.dom.js";
|
|
11
|
+
import { ensure as ae } from "../../utils/dist/warning.js";
|
|
12
|
+
function ye(m, n) {
|
|
13
|
+
const { context: c, prop: a, scope: d, state: R, computed: E, send: r } = m, _ = a("translations"), s = a("disabled") || c.get("fieldsetDisabled"), p = !!a("invalid"), L = !!a("required"), f = !!a("readOnly"), T = a("composite"), h = a("collection"), y = R.hasTag("open"), A = R.matches("focused"), I = c.get("highlightedValue"), K = c.get("highlightedItem"), W = E("selectedItems"), P = c.get("currentPlacement"), O = E("isTypingAhead"), G = E("isInteractive"), C = I ? H(d, I) : void 0;
|
|
14
|
+
function b(e) {
|
|
15
|
+
const t = h.getItemDisabled(e.item), l = h.getItemValue(e.item);
|
|
16
|
+
return ae(l, () => `[zag-js] No value found for item ${JSON.stringify(e.item)}`), {
|
|
17
|
+
value: l,
|
|
19
18
|
disabled: !!(s || t),
|
|
20
|
-
highlighted: I ===
|
|
21
|
-
selected: c.get("value").includes(
|
|
19
|
+
highlighted: I === l,
|
|
20
|
+
selected: c.get("value").includes(l)
|
|
22
21
|
};
|
|
23
22
|
}
|
|
24
|
-
const
|
|
23
|
+
const F = X({
|
|
25
24
|
...a("positioning"),
|
|
26
|
-
placement:
|
|
25
|
+
placement: P
|
|
27
26
|
});
|
|
28
27
|
return {
|
|
29
28
|
open: y,
|
|
30
29
|
focused: A,
|
|
31
30
|
empty: c.get("value").length === 0,
|
|
32
|
-
highlightedItem:
|
|
31
|
+
highlightedItem: K,
|
|
33
32
|
highlightedValue: I,
|
|
34
|
-
selectedItems:
|
|
33
|
+
selectedItems: W,
|
|
35
34
|
hasSelectedItems: E("hasSelectedItems"),
|
|
36
35
|
value: c.get("value"),
|
|
37
36
|
valueAsString: E("valueAsString"),
|
|
38
|
-
collection:
|
|
37
|
+
collection: h,
|
|
39
38
|
multiple: !!a("multiple"),
|
|
40
39
|
disabled: !!s,
|
|
41
40
|
reposition(e = {}) {
|
|
@@ -46,7 +45,7 @@ function fe(m, l) {
|
|
|
46
45
|
(e = S(d)) == null || e.focus({ preventScroll: !0 });
|
|
47
46
|
},
|
|
48
47
|
setOpen(e) {
|
|
49
|
-
|
|
48
|
+
R.hasTag("open") !== e && r({ type: e ? "OPEN" : "CLOSE" });
|
|
50
49
|
},
|
|
51
50
|
selectValue(e) {
|
|
52
51
|
r({ type: "ITEM.SELECT", value: e });
|
|
@@ -55,7 +54,7 @@ function fe(m, l) {
|
|
|
55
54
|
r({ type: "VALUE.SET", value: e });
|
|
56
55
|
},
|
|
57
56
|
selectAll() {
|
|
58
|
-
r({ type: "VALUE.SET", value:
|
|
57
|
+
r({ type: "VALUE.SET", value: h.getValues() });
|
|
59
58
|
},
|
|
60
59
|
setHighlightValue(e) {
|
|
61
60
|
r({ type: "HIGHLIGHTED_VALUE.SET", value: e });
|
|
@@ -66,26 +65,26 @@ function fe(m, l) {
|
|
|
66
65
|
clearValue(e) {
|
|
67
66
|
r(e ? { type: "ITEM.CLEAR", value: e } : { type: "VALUE.CLEAR" });
|
|
68
67
|
},
|
|
69
|
-
getItemState:
|
|
68
|
+
getItemState: b,
|
|
70
69
|
getRootProps() {
|
|
71
|
-
return
|
|
70
|
+
return n.element({
|
|
72
71
|
...o.root.attrs,
|
|
73
72
|
dir: a("dir"),
|
|
74
|
-
id:
|
|
73
|
+
id: re(d),
|
|
75
74
|
"data-invalid": i(p),
|
|
76
|
-
"data-readonly": i(
|
|
75
|
+
"data-readonly": i(f)
|
|
77
76
|
});
|
|
78
77
|
},
|
|
79
78
|
getLabelProps() {
|
|
80
|
-
return
|
|
79
|
+
return n.label({
|
|
81
80
|
dir: a("dir"),
|
|
82
|
-
id:
|
|
81
|
+
id: v(d),
|
|
83
82
|
...o.label.attrs,
|
|
84
83
|
"data-disabled": i(s),
|
|
85
84
|
"data-invalid": i(p),
|
|
86
|
-
"data-readonly": i(
|
|
85
|
+
"data-readonly": i(f),
|
|
87
86
|
"data-required": i(L),
|
|
88
|
-
htmlFor:
|
|
87
|
+
htmlFor: w(d),
|
|
89
88
|
onClick(e) {
|
|
90
89
|
var t;
|
|
91
90
|
e.defaultPrevented || s || (t = S(d)) == null || t.focus({ preventScroll: !0 });
|
|
@@ -93,10 +92,10 @@ function fe(m, l) {
|
|
|
93
92
|
});
|
|
94
93
|
},
|
|
95
94
|
getControlProps() {
|
|
96
|
-
return
|
|
95
|
+
return n.element({
|
|
97
96
|
...o.control.attrs,
|
|
98
97
|
dir: a("dir"),
|
|
99
|
-
id:
|
|
98
|
+
id: te(d),
|
|
100
99
|
"data-state": y ? "open" : "closed",
|
|
101
100
|
"data-focus": i(A),
|
|
102
101
|
"data-disabled": i(s),
|
|
@@ -104,7 +103,7 @@ function fe(m, l) {
|
|
|
104
103
|
});
|
|
105
104
|
},
|
|
106
105
|
getValueTextProps() {
|
|
107
|
-
return
|
|
106
|
+
return n.element({
|
|
108
107
|
...o.valueText.attrs,
|
|
109
108
|
dir: a("dir"),
|
|
110
109
|
"data-disabled": i(s),
|
|
@@ -113,25 +112,24 @@ function fe(m, l) {
|
|
|
113
112
|
});
|
|
114
113
|
},
|
|
115
114
|
getTriggerProps() {
|
|
116
|
-
return
|
|
117
|
-
id:
|
|
115
|
+
return n.button({
|
|
116
|
+
id: x(d),
|
|
118
117
|
disabled: s,
|
|
119
118
|
dir: a("dir"),
|
|
120
119
|
type: "button",
|
|
121
120
|
role: "combobox",
|
|
122
|
-
"aria-controls":
|
|
121
|
+
"aria-controls": M(d),
|
|
123
122
|
"aria-expanded": y,
|
|
124
123
|
"aria-haspopup": "listbox",
|
|
125
124
|
"data-state": y ? "open" : "closed",
|
|
126
125
|
"aria-invalid": p,
|
|
127
126
|
"aria-required": L,
|
|
128
|
-
"aria-labelledby":
|
|
127
|
+
"aria-labelledby": v(d),
|
|
129
128
|
...o.trigger.attrs,
|
|
130
129
|
"data-disabled": i(s),
|
|
131
130
|
"data-invalid": i(p),
|
|
132
|
-
"data-readonly": i(
|
|
133
|
-
"data-placement":
|
|
134
|
-
"data-side": O,
|
|
131
|
+
"data-readonly": i(f),
|
|
132
|
+
"data-placement": P,
|
|
135
133
|
"data-placeholder-shown": i(!E("hasSelectedItems")),
|
|
136
134
|
onClick(e) {
|
|
137
135
|
G && (e.defaultPrevented || r({ type: "TRIGGER.CLICK" }));
|
|
@@ -144,7 +142,7 @@ function fe(m, l) {
|
|
|
144
142
|
},
|
|
145
143
|
onKeyDown(e) {
|
|
146
144
|
if (e.defaultPrevented || !G) return;
|
|
147
|
-
const
|
|
145
|
+
const l = {
|
|
148
146
|
ArrowUp() {
|
|
149
147
|
r({ type: "TRIGGER.ARROW_UP" });
|
|
150
148
|
},
|
|
@@ -167,35 +165,35 @@ function fe(m, l) {
|
|
|
167
165
|
r({ type: "TRIGGER.ENTER" });
|
|
168
166
|
},
|
|
169
167
|
Space(u) {
|
|
170
|
-
r(
|
|
168
|
+
r(O ? { type: "TRIGGER.TYPEAHEAD", key: u.key } : { type: "TRIGGER.ENTER" });
|
|
171
169
|
}
|
|
172
|
-
}[
|
|
170
|
+
}[D(e, {
|
|
173
171
|
dir: a("dir"),
|
|
174
172
|
orientation: "vertical"
|
|
175
173
|
})];
|
|
176
|
-
if (
|
|
177
|
-
|
|
174
|
+
if (l) {
|
|
175
|
+
l(e), e.preventDefault();
|
|
178
176
|
return;
|
|
179
177
|
}
|
|
180
|
-
|
|
178
|
+
k.isValidEvent(e) && (r({ type: "TRIGGER.TYPEAHEAD", key: e.key }), e.preventDefault());
|
|
181
179
|
}
|
|
182
180
|
});
|
|
183
181
|
},
|
|
184
182
|
getIndicatorProps() {
|
|
185
|
-
return
|
|
183
|
+
return n.element({
|
|
186
184
|
...o.indicator.attrs,
|
|
187
185
|
dir: a("dir"),
|
|
188
186
|
"aria-hidden": !0,
|
|
189
187
|
"data-state": y ? "open" : "closed",
|
|
190
188
|
"data-disabled": i(s),
|
|
191
189
|
"data-invalid": i(p),
|
|
192
|
-
"data-readonly": i(
|
|
190
|
+
"data-readonly": i(f)
|
|
193
191
|
});
|
|
194
192
|
},
|
|
195
193
|
getItemProps(e) {
|
|
196
|
-
const t =
|
|
197
|
-
return
|
|
198
|
-
id:
|
|
194
|
+
const t = b(e);
|
|
195
|
+
return n.element({
|
|
196
|
+
id: H(d, t.value),
|
|
199
197
|
role: "option",
|
|
200
198
|
...o.item.attrs,
|
|
201
199
|
dir: a("dir"),
|
|
@@ -204,22 +202,22 @@ function fe(m, l) {
|
|
|
204
202
|
"data-state": t.selected ? "checked" : "unchecked",
|
|
205
203
|
"data-highlighted": i(t.highlighted),
|
|
206
204
|
"data-disabled": i(t.disabled),
|
|
207
|
-
"aria-disabled":
|
|
208
|
-
onPointerMove(
|
|
209
|
-
t.disabled ||
|
|
205
|
+
"aria-disabled": $(t.disabled),
|
|
206
|
+
onPointerMove(l) {
|
|
207
|
+
t.disabled || l.pointerType !== "mouse" || t.value !== I && r({ type: "ITEM.POINTER_MOVE", value: t.value });
|
|
210
208
|
},
|
|
211
|
-
onClick(
|
|
212
|
-
|
|
209
|
+
onClick(l) {
|
|
210
|
+
l.defaultPrevented || t.disabled || r({ type: "ITEM.CLICK", src: "pointerup", value: t.value });
|
|
213
211
|
},
|
|
214
|
-
onPointerLeave(
|
|
212
|
+
onPointerLeave(l) {
|
|
215
213
|
var g;
|
|
216
|
-
t.disabled || e.persistFocus ||
|
|
214
|
+
t.disabled || e.persistFocus || l.pointerType !== "mouse" || !((g = m.event.previous()) != null && g.type.includes("POINTER")) || r({ type: "ITEM.POINTER_LEAVE" });
|
|
217
215
|
}
|
|
218
216
|
});
|
|
219
217
|
},
|
|
220
218
|
getItemTextProps(e) {
|
|
221
|
-
const t =
|
|
222
|
-
return
|
|
219
|
+
const t = b(e);
|
|
220
|
+
return n.element({
|
|
223
221
|
...o.itemText.attrs,
|
|
224
222
|
"data-state": t.selected ? "checked" : "unchecked",
|
|
225
223
|
"data-disabled": i(t.disabled),
|
|
@@ -227,8 +225,8 @@ function fe(m, l) {
|
|
|
227
225
|
});
|
|
228
226
|
},
|
|
229
227
|
getItemIndicatorProps(e) {
|
|
230
|
-
const t =
|
|
231
|
-
return
|
|
228
|
+
const t = b(e);
|
|
229
|
+
return n.element({
|
|
232
230
|
"aria-hidden": !0,
|
|
233
231
|
...o.itemIndicator.attrs,
|
|
234
232
|
"data-state": t.selected ? "checked" : "unchecked",
|
|
@@ -237,30 +235,30 @@ function fe(m, l) {
|
|
|
237
235
|
},
|
|
238
236
|
getItemGroupLabelProps(e) {
|
|
239
237
|
const { htmlFor: t } = e;
|
|
240
|
-
return
|
|
238
|
+
return n.element({
|
|
241
239
|
...o.itemGroupLabel.attrs,
|
|
242
|
-
id:
|
|
240
|
+
id: U(d, t),
|
|
243
241
|
dir: a("dir"),
|
|
244
242
|
role: "presentation"
|
|
245
243
|
});
|
|
246
244
|
},
|
|
247
245
|
getItemGroupProps(e) {
|
|
248
246
|
const { id: t } = e;
|
|
249
|
-
return
|
|
247
|
+
return n.element({
|
|
250
248
|
...o.itemGroup.attrs,
|
|
251
249
|
"data-disabled": i(s),
|
|
252
|
-
id:
|
|
253
|
-
"aria-labelledby":
|
|
250
|
+
id: ee(d, t),
|
|
251
|
+
"aria-labelledby": U(d, t),
|
|
254
252
|
role: "group",
|
|
255
253
|
dir: a("dir")
|
|
256
254
|
});
|
|
257
255
|
},
|
|
258
256
|
getClearTriggerProps() {
|
|
259
|
-
return
|
|
257
|
+
return n.button({
|
|
260
258
|
...o.clearTrigger.attrs,
|
|
261
|
-
id:
|
|
259
|
+
id: z(d),
|
|
262
260
|
type: "button",
|
|
263
|
-
"aria-label":
|
|
261
|
+
"aria-label": _.clearTriggerLabel,
|
|
264
262
|
"data-invalid": i(p),
|
|
265
263
|
disabled: s,
|
|
266
264
|
hidden: !E("hasSelectedItems"),
|
|
@@ -271,59 +269,58 @@ function fe(m, l) {
|
|
|
271
269
|
});
|
|
272
270
|
},
|
|
273
271
|
getHiddenSelectProps() {
|
|
274
|
-
const e = c.get("value"), t = a("multiple") ? e : e == null ? void 0 : e[0],
|
|
275
|
-
const g =
|
|
276
|
-
|
|
272
|
+
const e = c.get("value"), t = a("multiple") ? e : e == null ? void 0 : e[0], l = (u) => {
|
|
273
|
+
const g = q(u);
|
|
274
|
+
B(g) || r({ type: "VALUE.SET", value: ie(u.currentTarget) });
|
|
277
275
|
};
|
|
278
|
-
return
|
|
276
|
+
return n.select({
|
|
279
277
|
name: a("name"),
|
|
280
278
|
form: a("form"),
|
|
281
279
|
disabled: s,
|
|
282
280
|
multiple: a("multiple"),
|
|
283
281
|
required: a("required"),
|
|
284
282
|
"aria-hidden": !0,
|
|
285
|
-
id:
|
|
283
|
+
id: w(d),
|
|
286
284
|
defaultValue: t,
|
|
287
|
-
style:
|
|
285
|
+
style: Q,
|
|
288
286
|
tabIndex: -1,
|
|
289
287
|
autoComplete: a("autoComplete"),
|
|
290
|
-
onChange:
|
|
291
|
-
onInput:
|
|
288
|
+
onChange: l,
|
|
289
|
+
onInput: l,
|
|
292
290
|
// Some browser extensions will focus the hidden select.
|
|
293
291
|
// Let's forward the focus to the trigger.
|
|
294
292
|
onFocus() {
|
|
295
293
|
var u;
|
|
296
294
|
(u = S(d)) == null || u.focus({ preventScroll: !0 });
|
|
297
295
|
},
|
|
298
|
-
"aria-labelledby":
|
|
296
|
+
"aria-labelledby": v(d)
|
|
299
297
|
});
|
|
300
298
|
},
|
|
301
299
|
getPositionerProps() {
|
|
302
|
-
return
|
|
300
|
+
return n.element({
|
|
303
301
|
...o.positioner.attrs,
|
|
304
302
|
dir: a("dir"),
|
|
305
|
-
id:
|
|
306
|
-
style:
|
|
303
|
+
id: Z(d),
|
|
304
|
+
style: F.floating
|
|
307
305
|
});
|
|
308
306
|
},
|
|
309
307
|
getContentProps() {
|
|
310
|
-
return
|
|
308
|
+
return n.element({
|
|
311
309
|
hidden: !y,
|
|
312
310
|
dir: a("dir"),
|
|
313
|
-
id:
|
|
311
|
+
id: M(d),
|
|
314
312
|
role: T ? "listbox" : "dialog",
|
|
315
313
|
...o.content.attrs,
|
|
316
314
|
"data-state": y ? "open" : "closed",
|
|
317
|
-
"data-placement":
|
|
318
|
-
"data-side": O,
|
|
315
|
+
"data-placement": P,
|
|
319
316
|
"data-activedescendant": C,
|
|
320
317
|
"aria-activedescendant": T ? C : void 0,
|
|
321
318
|
"aria-multiselectable": a("multiple") && T ? !0 : void 0,
|
|
322
|
-
"aria-labelledby":
|
|
319
|
+
"aria-labelledby": v(d),
|
|
323
320
|
tabIndex: 0,
|
|
324
321
|
onKeyDown(e) {
|
|
325
|
-
if (!G || !
|
|
326
|
-
if (e.key === "Tab" && !
|
|
322
|
+
if (!G || !j(e.currentTarget, V(e))) return;
|
|
323
|
+
if (e.key === "Tab" && !Y(e)) {
|
|
327
324
|
e.preventDefault();
|
|
328
325
|
return;
|
|
329
326
|
}
|
|
@@ -344,32 +341,32 @@ function fe(m, l) {
|
|
|
344
341
|
r({ type: "ITEM.CLICK", src: "keydown.enter" });
|
|
345
342
|
},
|
|
346
343
|
Space(g) {
|
|
347
|
-
var
|
|
348
|
-
|
|
344
|
+
var N;
|
|
345
|
+
O ? r({ type: "CONTENT.TYPEAHEAD", key: g.key }) : (N = t.Enter) == null || N.call(t, g);
|
|
349
346
|
}
|
|
350
|
-
},
|
|
351
|
-
if (
|
|
352
|
-
|
|
347
|
+
}, l = t[D(e)];
|
|
348
|
+
if (l) {
|
|
349
|
+
l(e), e.preventDefault();
|
|
353
350
|
return;
|
|
354
351
|
}
|
|
355
|
-
const u =
|
|
356
|
-
|
|
352
|
+
const u = V(e);
|
|
353
|
+
J(u) || k.isValidEvent(e) && (r({ type: "CONTENT.TYPEAHEAD", key: e.key }), e.preventDefault());
|
|
357
354
|
}
|
|
358
355
|
});
|
|
359
356
|
},
|
|
360
357
|
getListProps() {
|
|
361
|
-
return
|
|
358
|
+
return n.element({
|
|
362
359
|
...o.list.attrs,
|
|
363
360
|
tabIndex: 0,
|
|
364
361
|
role: T ? void 0 : "listbox",
|
|
365
|
-
"aria-labelledby":
|
|
362
|
+
"aria-labelledby": x(d),
|
|
366
363
|
"aria-activedescendant": T ? void 0 : C,
|
|
367
364
|
"aria-multiselectable": !T && a("multiple") ? !0 : void 0
|
|
368
365
|
});
|
|
369
366
|
}
|
|
370
367
|
};
|
|
371
368
|
}
|
|
372
|
-
var
|
|
369
|
+
var ie = (m) => m.multiple ? Array.from(m.selectedOptions, (n) => n.value) : m.value ? [m.value] : [];
|
|
373
370
|
export {
|
|
374
|
-
|
|
371
|
+
ye as connect
|
|
375
372
|
};
|
|
@@ -12,7 +12,7 @@ import { observeAttributes as b } from "../../dom-query/dist/mutation-observer.j
|
|
|
12
12
|
import { trackDismissableElement as w } from "../../dismissable/dist/dismissable-layer.js";
|
|
13
13
|
import { getByTypeahead as W } from "../../dom-query/dist/typeahead.js";
|
|
14
14
|
import { isEqual as _ } from "../../utils/dist/equal.js";
|
|
15
|
-
import { scrollIntoView as U } from "../../dom-query/dist/
|
|
15
|
+
import { scrollIntoView as U } from "../../dom-query/dist/overflow.js";
|
|
16
16
|
var { and: r, not: c, or: K } = M(), ne = y({
|
|
17
17
|
props({ props: e }) {
|
|
18
18
|
return {
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { getTriggerEl as n, getIndicatorEl as
|
|
2
|
-
import { isAnchorElement as
|
|
3
|
-
import { callAll as
|
|
4
|
-
import { resizeObserverBorderBox as
|
|
1
|
+
import { getTriggerEl as n, getIndicatorEl as d, getElements as g, getRectByValue as V, getContentEl as T, getPrevTriggerEl as m, getNextTriggerEl as F, getLastTriggerEl as I, getFirstTriggerEl as b, getOffsetRect as E } from "./tabs.dom.js";
|
|
2
|
+
import { isAnchorElement as A } from "../../dom-query/dist/node.js";
|
|
3
|
+
import { callAll as R } from "../../utils/dist/functions.js";
|
|
4
|
+
import { resizeObserverBorderBox as C } from "../../dom-query/dist/resize-observer.js";
|
|
5
5
|
import { raf as c } from "../../dom-query/dist/raf.js";
|
|
6
|
-
import { getFocusables as
|
|
7
|
-
import { clickIfLink as
|
|
8
|
-
import { setup as
|
|
9
|
-
import { isEqual as
|
|
10
|
-
var { createMachine:
|
|
6
|
+
import { getFocusables as y } from "../../dom-query/dist/tabbable.js";
|
|
7
|
+
import { clickIfLink as O } from "../../dom-query/dist/navigate.js";
|
|
8
|
+
import { setup as p } from "../../core/dist/create-machine.js";
|
|
9
|
+
import { isEqual as N } from "../../utils/dist/equal.js";
|
|
10
|
+
var { createMachine: _ } = p(), z = _({
|
|
11
11
|
props({ props: e }) {
|
|
12
12
|
return {
|
|
13
13
|
dir: "ltr",
|
|
@@ -16,7 +16,7 @@ var { createMachine: L } = _(), W = L({
|
|
|
16
16
|
loopFocus: !0,
|
|
17
17
|
composite: !0,
|
|
18
18
|
navigate(t) {
|
|
19
|
-
|
|
19
|
+
O(t.node);
|
|
20
20
|
},
|
|
21
21
|
defaultValue: null,
|
|
22
22
|
...e
|
|
@@ -30,17 +30,17 @@ var { createMachine: L } = _(), W = L({
|
|
|
30
30
|
value: t(() => ({
|
|
31
31
|
defaultValue: e("defaultValue"),
|
|
32
32
|
value: e("value"),
|
|
33
|
-
onChange(
|
|
34
|
-
var
|
|
35
|
-
(
|
|
33
|
+
onChange(s) {
|
|
34
|
+
var a;
|
|
35
|
+
(a = e("onValueChange")) == null || a({ value: s });
|
|
36
36
|
}
|
|
37
37
|
})),
|
|
38
38
|
focusedValue: t(() => ({
|
|
39
39
|
defaultValue: e("value") || e("defaultValue"),
|
|
40
40
|
sync: !0,
|
|
41
|
-
onChange(
|
|
42
|
-
var
|
|
43
|
-
(
|
|
41
|
+
onChange(s) {
|
|
42
|
+
var a;
|
|
43
|
+
(a = e("onFocusChange")) == null || a({ focusedValue: s });
|
|
44
44
|
}
|
|
45
45
|
})),
|
|
46
46
|
ssr: t(() => ({ defaultValue: !0 })),
|
|
@@ -58,11 +58,11 @@ var { createMachine: L } = _(), W = L({
|
|
|
58
58
|
prevValue: null
|
|
59
59
|
};
|
|
60
60
|
},
|
|
61
|
-
watch({ context: e, prop: t, track:
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
}),
|
|
65
|
-
|
|
61
|
+
watch({ context: e, prop: t, track: s, action: a }) {
|
|
62
|
+
s([() => e.get("value")], () => {
|
|
63
|
+
a(["syncIndicatorAnimation", "syncIndicatorRect", "syncTabIndex", "navigateIfNeeded"]);
|
|
64
|
+
}), s([() => t("dir"), () => t("orientation")], () => {
|
|
65
|
+
a(["syncIndicatorRect"]);
|
|
66
66
|
});
|
|
67
67
|
},
|
|
68
68
|
on: {
|
|
@@ -155,23 +155,23 @@ var { createMachine: L } = _(), W = L({
|
|
|
155
155
|
actions: {
|
|
156
156
|
selectFocusedTab({ context: e, prop: t }) {
|
|
157
157
|
c(() => {
|
|
158
|
-
const
|
|
159
|
-
if (!
|
|
160
|
-
const l = t("deselectable") && e.get("value") ===
|
|
158
|
+
const s = e.get("focusedValue");
|
|
159
|
+
if (!s) return;
|
|
160
|
+
const l = t("deselectable") && e.get("value") === s ? null : s;
|
|
161
161
|
e.set("value", l);
|
|
162
162
|
});
|
|
163
163
|
},
|
|
164
|
-
setFocusedValue({ context: e, event: t, flush:
|
|
165
|
-
t.value != null &&
|
|
164
|
+
setFocusedValue({ context: e, event: t, flush: s }) {
|
|
165
|
+
t.value != null && s(() => {
|
|
166
166
|
e.set("focusedValue", t.value);
|
|
167
167
|
});
|
|
168
168
|
},
|
|
169
169
|
clearFocusedValue({ context: e }) {
|
|
170
170
|
e.set("focusedValue", null);
|
|
171
171
|
},
|
|
172
|
-
setValue({ context: e, event: t, prop:
|
|
173
|
-
const
|
|
174
|
-
e.set("value",
|
|
172
|
+
setValue({ context: e, event: t, prop: s }) {
|
|
173
|
+
const a = s("deselectable") && e.get("value") === e.get("focusedValue");
|
|
174
|
+
e.set("value", a ? null : t.value);
|
|
175
175
|
},
|
|
176
176
|
clearValue({ context: e }) {
|
|
177
177
|
e.set("value", null);
|
|
@@ -179,19 +179,19 @@ var { createMachine: L } = _(), W = L({
|
|
|
179
179
|
focusFirstTab({ scope: e }) {
|
|
180
180
|
c(() => {
|
|
181
181
|
var t;
|
|
182
|
-
(t =
|
|
182
|
+
(t = b(e)) == null || t.focus();
|
|
183
183
|
});
|
|
184
184
|
},
|
|
185
185
|
focusLastTab({ scope: e }) {
|
|
186
186
|
c(() => {
|
|
187
187
|
var t;
|
|
188
|
-
(t =
|
|
188
|
+
(t = I(e)) == null || t.focus();
|
|
189
189
|
});
|
|
190
190
|
},
|
|
191
|
-
focusNextTab({ context: e, prop: t, scope:
|
|
192
|
-
const l =
|
|
191
|
+
focusNextTab({ context: e, prop: t, scope: s, event: a }) {
|
|
192
|
+
const l = a.value ?? e.get("focusedValue");
|
|
193
193
|
if (!l) return;
|
|
194
|
-
const u =
|
|
194
|
+
const u = F(s, {
|
|
195
195
|
value: l,
|
|
196
196
|
loopFocus: t("loopFocus")
|
|
197
197
|
});
|
|
@@ -199,10 +199,10 @@ var { createMachine: L } = _(), W = L({
|
|
|
199
199
|
t("composite") ? u == null || u.focus() : (u == null ? void 0 : u.dataset.value) != null && e.set("focusedValue", u.dataset.value);
|
|
200
200
|
});
|
|
201
201
|
},
|
|
202
|
-
focusPrevTab({ context: e, prop: t, scope:
|
|
203
|
-
const l =
|
|
202
|
+
focusPrevTab({ context: e, prop: t, scope: s, event: a }) {
|
|
203
|
+
const l = a.value ?? e.get("focusedValue");
|
|
204
204
|
if (!l) return;
|
|
205
|
-
const u =
|
|
205
|
+
const u = m(s, {
|
|
206
206
|
value: l,
|
|
207
207
|
loopFocus: t("loopFocus")
|
|
208
208
|
});
|
|
@@ -212,20 +212,20 @@ var { createMachine: L } = _(), W = L({
|
|
|
212
212
|
},
|
|
213
213
|
syncTabIndex({ context: e, scope: t }) {
|
|
214
214
|
c(() => {
|
|
215
|
-
const
|
|
216
|
-
if (!a) return;
|
|
217
|
-
const s = F(t, a);
|
|
215
|
+
const s = e.get("value");
|
|
218
216
|
if (!s) return;
|
|
219
|
-
|
|
217
|
+
const a = T(t, s);
|
|
218
|
+
if (!a) return;
|
|
219
|
+
y(a).length > 0 ? a.removeAttribute("tabindex") : a.setAttribute("tabindex", "0");
|
|
220
220
|
});
|
|
221
221
|
},
|
|
222
222
|
cleanupObserver({ refs: e }) {
|
|
223
223
|
const t = e.get("indicatorCleanup");
|
|
224
224
|
t && t();
|
|
225
225
|
},
|
|
226
|
-
setIndicatorRect({ context: e, event: t, scope:
|
|
227
|
-
const
|
|
228
|
-
!
|
|
226
|
+
setIndicatorRect({ context: e, event: t, scope: s }) {
|
|
227
|
+
const a = t.id ?? e.get("value");
|
|
228
|
+
!d(s) || !a || !n(s, a) || e.set("indicatorRect", V(s, a));
|
|
229
229
|
},
|
|
230
230
|
syncSsr({ context: e }) {
|
|
231
231
|
e.set("ssr", !1);
|
|
@@ -234,38 +234,35 @@ var { createMachine: L } = _(), W = L({
|
|
|
234
234
|
t.set("prevValue", e.get("value"));
|
|
235
235
|
},
|
|
236
236
|
syncIndicatorAnimation({ context: e, refs: t }) {
|
|
237
|
-
const
|
|
238
|
-
e.set("animateIndicator", l), t.set("prevValue",
|
|
237
|
+
const s = t.get("prevValue"), a = e.get("value"), l = s != null && a != null && s !== a;
|
|
238
|
+
e.set("animateIndicator", l), t.set("prevValue", a);
|
|
239
239
|
},
|
|
240
240
|
clearIndicatorAnimation({ context: e }) {
|
|
241
241
|
e.set("animateIndicator", !1);
|
|
242
242
|
},
|
|
243
|
-
syncIndicatorRect({ context: e, refs: t, scope:
|
|
244
|
-
const
|
|
245
|
-
if (
|
|
243
|
+
syncIndicatorRect({ context: e, refs: t, scope: s }) {
|
|
244
|
+
const a = t.get("indicatorCleanup");
|
|
245
|
+
if (a && a(), !d(s)) return;
|
|
246
246
|
const u = () => {
|
|
247
|
-
const o = n(
|
|
247
|
+
const o = n(s, e.get("value"));
|
|
248
248
|
if (!o) return;
|
|
249
|
-
const
|
|
250
|
-
e.set("indicatorRect", (
|
|
249
|
+
const i = E(o);
|
|
250
|
+
e.set("indicatorRect", (r) => N(r, i) ? r : i);
|
|
251
251
|
};
|
|
252
252
|
u();
|
|
253
|
-
const
|
|
254
|
-
|
|
255
|
-
...i ? [v.observe(i, u)] : []
|
|
256
|
-
);
|
|
257
|
-
t.set("indicatorCleanup", V);
|
|
253
|
+
const f = g(s), v = R(...f.map((o) => C.observe(o, u)));
|
|
254
|
+
t.set("indicatorCleanup", v);
|
|
258
255
|
},
|
|
259
|
-
navigateIfNeeded({ context: e, prop: t, scope:
|
|
256
|
+
navigateIfNeeded({ context: e, prop: t, scope: s }) {
|
|
260
257
|
var u;
|
|
261
|
-
const
|
|
262
|
-
if (!
|
|
263
|
-
const l = n(
|
|
264
|
-
|
|
258
|
+
const a = e.get("value");
|
|
259
|
+
if (!a) return;
|
|
260
|
+
const l = n(s, a);
|
|
261
|
+
A(l) && ((u = t("navigate")) == null || u({ value: a, node: l, href: l.href }));
|
|
265
262
|
}
|
|
266
263
|
}
|
|
267
264
|
}
|
|
268
265
|
});
|
|
269
266
|
export {
|
|
270
|
-
|
|
267
|
+
z as machine
|
|
271
268
|
};
|