@zag-js/tabs 0.50.0 → 0.51.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/dist/index.js +1 -584
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -549
- package/dist/index.mjs.map +1 -1
- package/package.json +8 -8
package/dist/index.mjs
CHANGED
|
@@ -1,550 +1,2 @@
|
|
|
1
|
-
// src/tabs.anatomy.ts
|
|
2
|
-
import { createAnatomy } from "@zag-js/anatomy";
|
|
3
|
-
var anatomy = createAnatomy("tabs").parts("root", "list", "trigger", "content", "indicator");
|
|
4
|
-
var parts = anatomy.build();
|
|
5
|
-
|
|
6
|
-
// src/tabs.connect.ts
|
|
7
|
-
import { getEventKey, getNativeEvent } from "@zag-js/dom-event";
|
|
8
|
-
import { dataAttr, isSafari, isSelfTarget } from "@zag-js/dom-query";
|
|
9
|
-
|
|
10
|
-
// src/tabs.dom.ts
|
|
11
|
-
import { createScope, itemById, nextById, prevById, queryAll } from "@zag-js/dom-query";
|
|
12
|
-
import { first, last } from "@zag-js/utils";
|
|
13
|
-
var dom = createScope({
|
|
14
|
-
getRootId: (ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`,
|
|
15
|
-
getListId: (ctx) => ctx.ids?.list ?? `tabs:${ctx.id}:list`,
|
|
16
|
-
getContentId: (ctx, id) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,
|
|
17
|
-
getTriggerId: (ctx, id) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,
|
|
18
|
-
getIndicatorId: (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,
|
|
19
|
-
getListEl: (ctx) => dom.getById(ctx, dom.getListId(ctx)),
|
|
20
|
-
getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
|
|
21
|
-
getTriggerEl: (ctx, id) => dom.getById(ctx, dom.getTriggerId(ctx, id)),
|
|
22
|
-
getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
|
|
23
|
-
getElements: (ctx) => {
|
|
24
|
-
const ownerId = CSS.escape(dom.getListId(ctx));
|
|
25
|
-
const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`;
|
|
26
|
-
return queryAll(dom.getListEl(ctx), selector);
|
|
27
|
-
},
|
|
28
|
-
getFirstTriggerEl: (ctx) => first(dom.getElements(ctx)),
|
|
29
|
-
getLastTriggerEl: (ctx) => last(dom.getElements(ctx)),
|
|
30
|
-
getNextTriggerEl: (ctx, id) => nextById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loopFocus),
|
|
31
|
-
getPrevTriggerEl: (ctx, id) => prevById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loopFocus),
|
|
32
|
-
getSelectedContentEl: (ctx) => {
|
|
33
|
-
if (!ctx.value)
|
|
34
|
-
return;
|
|
35
|
-
return dom.getContentEl(ctx, ctx.value);
|
|
36
|
-
},
|
|
37
|
-
getSelectedTriggerEl: (ctx) => {
|
|
38
|
-
if (!ctx.value)
|
|
39
|
-
return;
|
|
40
|
-
return dom.getTriggerEl(ctx, ctx.value);
|
|
41
|
-
},
|
|
42
|
-
getOffsetRect: (el) => {
|
|
43
|
-
return {
|
|
44
|
-
left: el?.offsetLeft ?? 0,
|
|
45
|
-
top: el?.offsetTop ?? 0,
|
|
46
|
-
width: el?.offsetWidth ?? 0,
|
|
47
|
-
height: el?.offsetHeight ?? 0
|
|
48
|
-
};
|
|
49
|
-
},
|
|
50
|
-
getRectById: (ctx, id) => {
|
|
51
|
-
const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id));
|
|
52
|
-
return dom.resolveRect(dom.getOffsetRect(tab));
|
|
53
|
-
},
|
|
54
|
-
resolveRect: (rect) => ({
|
|
55
|
-
width: `${rect.width}px`,
|
|
56
|
-
height: `${rect.height}px`,
|
|
57
|
-
left: `${rect.left}px`,
|
|
58
|
-
top: `${rect.top}px`
|
|
59
|
-
})
|
|
60
|
-
});
|
|
61
|
-
|
|
62
|
-
// src/tabs.connect.ts
|
|
63
|
-
function connect(state, send, normalize) {
|
|
64
|
-
const translations = state.context.translations;
|
|
65
|
-
const focused = state.matches("focused");
|
|
66
|
-
const isVertical = state.context.orientation === "vertical";
|
|
67
|
-
const isHorizontal = state.context.orientation === "horizontal";
|
|
68
|
-
const composite = state.context.composite;
|
|
69
|
-
const indicator = state.context.indicatorState;
|
|
70
|
-
function getTriggerState(props2) {
|
|
71
|
-
return {
|
|
72
|
-
selected: state.context.value === props2.value,
|
|
73
|
-
focused: state.context.focusedValue === props2.value,
|
|
74
|
-
disabled: !!props2.disabled
|
|
75
|
-
};
|
|
76
|
-
}
|
|
77
|
-
return {
|
|
78
|
-
value: state.context.value,
|
|
79
|
-
focusedValue: state.context.focusedValue,
|
|
80
|
-
setValue(value) {
|
|
81
|
-
send({ type: "SET_VALUE", value });
|
|
82
|
-
},
|
|
83
|
-
clearValue() {
|
|
84
|
-
send({ type: "CLEAR_VALUE" });
|
|
85
|
-
},
|
|
86
|
-
setIndicatorRect(value) {
|
|
87
|
-
const id = dom.getTriggerId(state.context, value);
|
|
88
|
-
send({ type: "SET_INDICATOR_RECT", id });
|
|
89
|
-
},
|
|
90
|
-
syncTabIndex() {
|
|
91
|
-
send("SYNC_TAB_INDEX");
|
|
92
|
-
},
|
|
93
|
-
selectNext(fromValue) {
|
|
94
|
-
send({ type: "TAB_FOCUS", value: fromValue, src: "selectNext" });
|
|
95
|
-
send({ type: "ARROW_NEXT", src: "selectNext" });
|
|
96
|
-
},
|
|
97
|
-
selectPrev(fromValue) {
|
|
98
|
-
send({ type: "TAB_FOCUS", value: fromValue, src: "selectPrev" });
|
|
99
|
-
send({ type: "ARROW_PREV", src: "selectPrev" });
|
|
100
|
-
},
|
|
101
|
-
focus() {
|
|
102
|
-
dom.getSelectedTriggerEl(state.context)?.focus();
|
|
103
|
-
},
|
|
104
|
-
getTriggerState,
|
|
105
|
-
rootProps: normalize.element({
|
|
106
|
-
...parts.root.attrs,
|
|
107
|
-
id: dom.getRootId(state.context),
|
|
108
|
-
"data-orientation": state.context.orientation,
|
|
109
|
-
"data-focus": dataAttr(focused),
|
|
110
|
-
dir: state.context.dir
|
|
111
|
-
}),
|
|
112
|
-
listProps: normalize.element({
|
|
113
|
-
...parts.list.attrs,
|
|
114
|
-
id: dom.getListId(state.context),
|
|
115
|
-
role: "tablist",
|
|
116
|
-
dir: state.context.dir,
|
|
117
|
-
"data-focus": dataAttr(focused),
|
|
118
|
-
"aria-orientation": state.context.orientation,
|
|
119
|
-
"data-orientation": state.context.orientation,
|
|
120
|
-
"aria-label": translations?.listLabel,
|
|
121
|
-
onKeyDown(event) {
|
|
122
|
-
if (event.defaultPrevented)
|
|
123
|
-
return;
|
|
124
|
-
const evt = getNativeEvent(event);
|
|
125
|
-
if (!isSelfTarget(evt))
|
|
126
|
-
return;
|
|
127
|
-
if (evt.isComposing)
|
|
128
|
-
return;
|
|
129
|
-
const keyMap = {
|
|
130
|
-
ArrowDown() {
|
|
131
|
-
if (isHorizontal)
|
|
132
|
-
return;
|
|
133
|
-
send({ type: "ARROW_NEXT", key: "ArrowDown" });
|
|
134
|
-
},
|
|
135
|
-
ArrowUp() {
|
|
136
|
-
if (isHorizontal)
|
|
137
|
-
return;
|
|
138
|
-
send({ type: "ARROW_PREV", key: "ArrowUp" });
|
|
139
|
-
},
|
|
140
|
-
ArrowLeft() {
|
|
141
|
-
if (isVertical)
|
|
142
|
-
return;
|
|
143
|
-
send({ type: "ARROW_PREV", key: "ArrowLeft" });
|
|
144
|
-
},
|
|
145
|
-
ArrowRight() {
|
|
146
|
-
if (isVertical)
|
|
147
|
-
return;
|
|
148
|
-
send({ type: "ARROW_NEXT", key: "ArrowRight" });
|
|
149
|
-
},
|
|
150
|
-
Home() {
|
|
151
|
-
send("HOME");
|
|
152
|
-
},
|
|
153
|
-
End() {
|
|
154
|
-
send("END");
|
|
155
|
-
},
|
|
156
|
-
Enter() {
|
|
157
|
-
send({ type: "ENTER" });
|
|
158
|
-
}
|
|
159
|
-
};
|
|
160
|
-
let key = getEventKey(event, state.context);
|
|
161
|
-
const exec = keyMap[key];
|
|
162
|
-
if (exec) {
|
|
163
|
-
event.preventDefault();
|
|
164
|
-
exec(event);
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
}),
|
|
168
|
-
getTriggerProps(props2) {
|
|
169
|
-
const { value, disabled } = props2;
|
|
170
|
-
const triggerState = getTriggerState(props2);
|
|
171
|
-
return normalize.button({
|
|
172
|
-
...parts.trigger.attrs,
|
|
173
|
-
role: "tab",
|
|
174
|
-
type: "button",
|
|
175
|
-
disabled,
|
|
176
|
-
dir: state.context.dir,
|
|
177
|
-
"data-orientation": state.context.orientation,
|
|
178
|
-
"data-disabled": dataAttr(disabled),
|
|
179
|
-
"aria-disabled": disabled,
|
|
180
|
-
"data-value": value,
|
|
181
|
-
"aria-selected": triggerState.selected,
|
|
182
|
-
"data-selected": dataAttr(triggerState.selected),
|
|
183
|
-
"data-focus": dataAttr(triggerState.focused),
|
|
184
|
-
"aria-controls": triggerState.selected ? dom.getContentId(state.context, value) : void 0,
|
|
185
|
-
"data-ownedby": dom.getListId(state.context),
|
|
186
|
-
id: dom.getTriggerId(state.context, value),
|
|
187
|
-
tabIndex: triggerState.selected && composite ? 0 : -1,
|
|
188
|
-
onFocus() {
|
|
189
|
-
send({ type: "TAB_FOCUS", value });
|
|
190
|
-
},
|
|
191
|
-
onBlur(event) {
|
|
192
|
-
const target = event.relatedTarget;
|
|
193
|
-
if (target?.getAttribute("role") !== "tab") {
|
|
194
|
-
send({ type: "TAB_BLUR" });
|
|
195
|
-
}
|
|
196
|
-
},
|
|
197
|
-
onClick(event) {
|
|
198
|
-
if (event.defaultPrevented)
|
|
199
|
-
return;
|
|
200
|
-
if (disabled)
|
|
201
|
-
return;
|
|
202
|
-
if (isSafari()) {
|
|
203
|
-
event.currentTarget.focus();
|
|
204
|
-
}
|
|
205
|
-
send({ type: "TAB_CLICK", value });
|
|
206
|
-
}
|
|
207
|
-
});
|
|
208
|
-
},
|
|
209
|
-
getContentProps(props2) {
|
|
210
|
-
const { value } = props2;
|
|
211
|
-
const selected = state.context.value === value;
|
|
212
|
-
return normalize.element({
|
|
213
|
-
...parts.content.attrs,
|
|
214
|
-
dir: state.context.dir,
|
|
215
|
-
id: dom.getContentId(state.context, value),
|
|
216
|
-
tabIndex: composite ? 0 : -1,
|
|
217
|
-
"aria-labelledby": dom.getTriggerId(state.context, value),
|
|
218
|
-
role: "tabpanel",
|
|
219
|
-
"data-ownedby": dom.getListId(state.context),
|
|
220
|
-
"data-selected": dataAttr(selected),
|
|
221
|
-
"data-orientation": state.context.orientation,
|
|
222
|
-
hidden: !selected
|
|
223
|
-
});
|
|
224
|
-
},
|
|
225
|
-
indicatorProps: normalize.element({
|
|
226
|
-
id: dom.getIndicatorId(state.context),
|
|
227
|
-
...parts.indicator.attrs,
|
|
228
|
-
dir: state.context.dir,
|
|
229
|
-
"data-orientation": state.context.orientation,
|
|
230
|
-
style: {
|
|
231
|
-
"--transition-property": "left, right, top, bottom, width, height",
|
|
232
|
-
"--left": indicator.rect?.left,
|
|
233
|
-
"--top": indicator.rect?.top,
|
|
234
|
-
"--width": indicator.rect?.width,
|
|
235
|
-
"--height": indicator.rect?.height,
|
|
236
|
-
position: "absolute",
|
|
237
|
-
willChange: "var(--transition-property)",
|
|
238
|
-
transitionProperty: "var(--transition-property)",
|
|
239
|
-
transitionDuration: indicator.transition ? "var(--transition-duration, 150ms)" : "0ms",
|
|
240
|
-
transitionTimingFunction: "var(--transition-timing-function)",
|
|
241
|
-
[isHorizontal ? "left" : "top"]: isHorizontal ? "var(--left)" : "var(--top)"
|
|
242
|
-
}
|
|
243
|
-
})
|
|
244
|
-
};
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
// src/tabs.machine.ts
|
|
248
|
-
import { createMachine, guards } from "@zag-js/core";
|
|
249
|
-
import { clickIfLink } from "@zag-js/dom-event";
|
|
250
|
-
import { nextTick, raf, getFocusables } from "@zag-js/dom-query";
|
|
251
|
-
import { trackElementRect } from "@zag-js/element-rect";
|
|
252
|
-
import { compact, isEqual } from "@zag-js/utils";
|
|
253
|
-
var { not } = guards;
|
|
254
|
-
function machine(userContext) {
|
|
255
|
-
const ctx = compact(userContext);
|
|
256
|
-
return createMachine(
|
|
257
|
-
{
|
|
258
|
-
initial: "idle",
|
|
259
|
-
context: {
|
|
260
|
-
dir: "ltr",
|
|
261
|
-
orientation: "horizontal",
|
|
262
|
-
activationMode: "automatic",
|
|
263
|
-
value: null,
|
|
264
|
-
loopFocus: true,
|
|
265
|
-
composite: true,
|
|
266
|
-
...ctx,
|
|
267
|
-
focusedValue: ctx.value ?? null,
|
|
268
|
-
indicatorState: {
|
|
269
|
-
rendered: false,
|
|
270
|
-
transition: false,
|
|
271
|
-
rect: { left: "0px", top: "0px", width: "0px", height: "0px" }
|
|
272
|
-
}
|
|
273
|
-
},
|
|
274
|
-
watch: {
|
|
275
|
-
value: ["allowIndicatorTransition", "syncIndicatorRect", "syncTabIndex", "clickIfLink"],
|
|
276
|
-
dir: ["syncIndicatorRect"],
|
|
277
|
-
orientation: ["syncIndicatorRect"]
|
|
278
|
-
},
|
|
279
|
-
on: {
|
|
280
|
-
SET_VALUE: {
|
|
281
|
-
actions: "setValue"
|
|
282
|
-
},
|
|
283
|
-
CLEAR_VALUE: {
|
|
284
|
-
actions: "clearValue"
|
|
285
|
-
},
|
|
286
|
-
SET_INDICATOR_RECT: {
|
|
287
|
-
actions: "setIndicatorRect"
|
|
288
|
-
},
|
|
289
|
-
SYNC_TAB_INDEX: {
|
|
290
|
-
actions: "syncTabIndex"
|
|
291
|
-
}
|
|
292
|
-
},
|
|
293
|
-
created: ["syncFocusedValue"],
|
|
294
|
-
entry: ["checkRenderedElements", "syncIndicatorRect", "syncTabIndex"],
|
|
295
|
-
exit: ["cleanupObserver"],
|
|
296
|
-
states: {
|
|
297
|
-
idle: {
|
|
298
|
-
on: {
|
|
299
|
-
TAB_FOCUS: {
|
|
300
|
-
target: "focused",
|
|
301
|
-
actions: "setFocusedValue"
|
|
302
|
-
},
|
|
303
|
-
TAB_CLICK: {
|
|
304
|
-
target: "focused",
|
|
305
|
-
actions: ["setFocusedValue", "setValue"]
|
|
306
|
-
}
|
|
307
|
-
}
|
|
308
|
-
},
|
|
309
|
-
focused: {
|
|
310
|
-
on: {
|
|
311
|
-
TAB_CLICK: {
|
|
312
|
-
target: "focused",
|
|
313
|
-
actions: ["setFocusedValue", "setValue"]
|
|
314
|
-
},
|
|
315
|
-
ARROW_PREV: [
|
|
316
|
-
{
|
|
317
|
-
guard: "selectOnFocus",
|
|
318
|
-
actions: ["focusPrevTab", "selectFocusedTab"]
|
|
319
|
-
},
|
|
320
|
-
{
|
|
321
|
-
actions: "focusPrevTab"
|
|
322
|
-
}
|
|
323
|
-
],
|
|
324
|
-
ARROW_NEXT: [
|
|
325
|
-
{
|
|
326
|
-
guard: "selectOnFocus",
|
|
327
|
-
actions: ["focusNextTab", "selectFocusedTab"]
|
|
328
|
-
},
|
|
329
|
-
{
|
|
330
|
-
actions: "focusNextTab"
|
|
331
|
-
}
|
|
332
|
-
],
|
|
333
|
-
HOME: [
|
|
334
|
-
{
|
|
335
|
-
guard: "selectOnFocus",
|
|
336
|
-
actions: ["focusFirstTab", "selectFocusedTab"]
|
|
337
|
-
},
|
|
338
|
-
{
|
|
339
|
-
actions: "focusFirstTab"
|
|
340
|
-
}
|
|
341
|
-
],
|
|
342
|
-
END: [
|
|
343
|
-
{
|
|
344
|
-
guard: "selectOnFocus",
|
|
345
|
-
actions: ["focusLastTab", "selectFocusedTab"]
|
|
346
|
-
},
|
|
347
|
-
{
|
|
348
|
-
actions: "focusLastTab"
|
|
349
|
-
}
|
|
350
|
-
],
|
|
351
|
-
ENTER: {
|
|
352
|
-
guard: not("selectOnFocus"),
|
|
353
|
-
actions: "selectFocusedTab"
|
|
354
|
-
},
|
|
355
|
-
TAB_FOCUS: {
|
|
356
|
-
actions: ["setFocusedValue"]
|
|
357
|
-
},
|
|
358
|
-
TAB_BLUR: {
|
|
359
|
-
target: "idle",
|
|
360
|
-
actions: "clearFocusedValue"
|
|
361
|
-
}
|
|
362
|
-
}
|
|
363
|
-
}
|
|
364
|
-
}
|
|
365
|
-
},
|
|
366
|
-
{
|
|
367
|
-
guards: {
|
|
368
|
-
selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
|
|
369
|
-
},
|
|
370
|
-
actions: {
|
|
371
|
-
syncFocusedValue(ctx2) {
|
|
372
|
-
if (ctx2.value != null && ctx2.focusedValue == null) {
|
|
373
|
-
ctx2.focusedValue = ctx2.value;
|
|
374
|
-
}
|
|
375
|
-
},
|
|
376
|
-
selectFocusedTab(ctx2) {
|
|
377
|
-
raf(() => {
|
|
378
|
-
set.value(ctx2, ctx2.focusedValue);
|
|
379
|
-
});
|
|
380
|
-
},
|
|
381
|
-
setFocusedValue(ctx2, evt) {
|
|
382
|
-
if (evt.value == null)
|
|
383
|
-
return;
|
|
384
|
-
set.focusedValue(ctx2, evt.value);
|
|
385
|
-
},
|
|
386
|
-
clearFocusedValue(ctx2) {
|
|
387
|
-
set.focusedValue(ctx2, null);
|
|
388
|
-
},
|
|
389
|
-
setValue(ctx2, evt) {
|
|
390
|
-
set.value(ctx2, evt.value);
|
|
391
|
-
},
|
|
392
|
-
clearValue(ctx2) {
|
|
393
|
-
set.value(ctx2, null);
|
|
394
|
-
},
|
|
395
|
-
focusFirstTab(ctx2) {
|
|
396
|
-
raf(() => {
|
|
397
|
-
dom.getFirstTriggerEl(ctx2)?.focus();
|
|
398
|
-
});
|
|
399
|
-
},
|
|
400
|
-
focusLastTab(ctx2) {
|
|
401
|
-
raf(() => {
|
|
402
|
-
dom.getLastTriggerEl(ctx2)?.focus();
|
|
403
|
-
});
|
|
404
|
-
},
|
|
405
|
-
focusNextTab(ctx2) {
|
|
406
|
-
if (!ctx2.focusedValue)
|
|
407
|
-
return;
|
|
408
|
-
const triggerEl = dom.getNextTriggerEl(ctx2, ctx2.focusedValue);
|
|
409
|
-
raf(() => {
|
|
410
|
-
if (ctx2.composite) {
|
|
411
|
-
triggerEl?.focus();
|
|
412
|
-
} else if (triggerEl?.dataset.value != null) {
|
|
413
|
-
set.focusedValue(ctx2, triggerEl.dataset.value);
|
|
414
|
-
}
|
|
415
|
-
});
|
|
416
|
-
},
|
|
417
|
-
focusPrevTab(ctx2) {
|
|
418
|
-
if (!ctx2.focusedValue)
|
|
419
|
-
return;
|
|
420
|
-
const triggerEl = dom.getPrevTriggerEl(ctx2, ctx2.focusedValue);
|
|
421
|
-
raf(() => {
|
|
422
|
-
if (ctx2.composite) {
|
|
423
|
-
triggerEl?.focus();
|
|
424
|
-
} else if (triggerEl?.dataset.value != null) {
|
|
425
|
-
set.focusedValue(ctx2, triggerEl.dataset.value);
|
|
426
|
-
}
|
|
427
|
-
});
|
|
428
|
-
},
|
|
429
|
-
checkRenderedElements(ctx2) {
|
|
430
|
-
ctx2.indicatorState.rendered = !!dom.getIndicatorEl(ctx2);
|
|
431
|
-
},
|
|
432
|
-
syncTabIndex(ctx2) {
|
|
433
|
-
raf(() => {
|
|
434
|
-
const contentEl = dom.getSelectedContentEl(ctx2);
|
|
435
|
-
if (!contentEl)
|
|
436
|
-
return;
|
|
437
|
-
const focusables = getFocusables(contentEl);
|
|
438
|
-
if (focusables.length > 0) {
|
|
439
|
-
contentEl.removeAttribute("tabindex");
|
|
440
|
-
} else {
|
|
441
|
-
contentEl.setAttribute("tabindex", "0");
|
|
442
|
-
}
|
|
443
|
-
});
|
|
444
|
-
},
|
|
445
|
-
cleanupObserver(ctx2) {
|
|
446
|
-
ctx2.indicatorCleanup?.();
|
|
447
|
-
},
|
|
448
|
-
allowIndicatorTransition(ctx2) {
|
|
449
|
-
ctx2.indicatorState.transition = true;
|
|
450
|
-
},
|
|
451
|
-
setIndicatorRect(ctx2, evt) {
|
|
452
|
-
const value = evt.id ?? ctx2.value;
|
|
453
|
-
if (!ctx2.indicatorState.rendered || !value)
|
|
454
|
-
return;
|
|
455
|
-
const triggerEl = dom.getTriggerEl(ctx2, value);
|
|
456
|
-
if (!triggerEl)
|
|
457
|
-
return;
|
|
458
|
-
ctx2.indicatorState.rect = dom.getRectById(ctx2, value);
|
|
459
|
-
nextTick(() => {
|
|
460
|
-
ctx2.indicatorState.transition = false;
|
|
461
|
-
});
|
|
462
|
-
},
|
|
463
|
-
syncIndicatorRect(ctx2) {
|
|
464
|
-
ctx2.indicatorCleanup?.();
|
|
465
|
-
const value = ctx2.value;
|
|
466
|
-
if (!ctx2.indicatorState.rendered || !value)
|
|
467
|
-
return;
|
|
468
|
-
const triggerEl = dom.getSelectedTriggerEl(ctx2);
|
|
469
|
-
if (!triggerEl)
|
|
470
|
-
return;
|
|
471
|
-
ctx2.indicatorCleanup = trackElementRect(triggerEl, {
|
|
472
|
-
getRect(el) {
|
|
473
|
-
return dom.getOffsetRect(el);
|
|
474
|
-
},
|
|
475
|
-
onChange(rect) {
|
|
476
|
-
ctx2.indicatorState.rect = dom.resolveRect(rect);
|
|
477
|
-
nextTick(() => {
|
|
478
|
-
ctx2.indicatorState.transition = false;
|
|
479
|
-
});
|
|
480
|
-
}
|
|
481
|
-
});
|
|
482
|
-
},
|
|
483
|
-
clickIfLink(ctx2) {
|
|
484
|
-
clickIfLink(dom.getSelectedTriggerEl(ctx2));
|
|
485
|
-
}
|
|
486
|
-
}
|
|
487
|
-
}
|
|
488
|
-
);
|
|
489
|
-
}
|
|
490
|
-
var invoke = {
|
|
491
|
-
change: (ctx) => {
|
|
492
|
-
if (ctx.value == null)
|
|
493
|
-
return;
|
|
494
|
-
ctx.onValueChange?.({ value: ctx.value });
|
|
495
|
-
},
|
|
496
|
-
focusChange: (ctx) => {
|
|
497
|
-
if (ctx.focusedValue == null)
|
|
498
|
-
return;
|
|
499
|
-
ctx.onFocusChange?.({ focusedValue: ctx.focusedValue });
|
|
500
|
-
}
|
|
501
|
-
};
|
|
502
|
-
var set = {
|
|
503
|
-
value: (ctx, value) => {
|
|
504
|
-
if (isEqual(value, ctx.value))
|
|
505
|
-
return;
|
|
506
|
-
ctx.value = value;
|
|
507
|
-
invoke.change(ctx);
|
|
508
|
-
},
|
|
509
|
-
focusedValue: (ctx, value) => {
|
|
510
|
-
if (isEqual(value, ctx.focusedValue))
|
|
511
|
-
return;
|
|
512
|
-
ctx.focusedValue = value;
|
|
513
|
-
invoke.focusChange(ctx);
|
|
514
|
-
}
|
|
515
|
-
};
|
|
516
|
-
|
|
517
|
-
// src/tabs.props.ts
|
|
518
|
-
import { createProps } from "@zag-js/types";
|
|
519
|
-
import { createSplitProps } from "@zag-js/utils";
|
|
520
|
-
var props = createProps()([
|
|
521
|
-
"activationMode",
|
|
522
|
-
"composite",
|
|
523
|
-
"dir",
|
|
524
|
-
"getRootNode",
|
|
525
|
-
"id",
|
|
526
|
-
"ids",
|
|
527
|
-
"loopFocus",
|
|
528
|
-
"onFocusChange",
|
|
529
|
-
"onValueChange",
|
|
530
|
-
"orientation",
|
|
531
|
-
"translations",
|
|
532
|
-
"value"
|
|
533
|
-
]);
|
|
534
|
-
var splitProps = createSplitProps(props);
|
|
535
|
-
var triggerProps = createProps()(["disabled", "value"]);
|
|
536
|
-
var splitTriggerProps = createSplitProps(triggerProps);
|
|
537
|
-
var contentProps = createProps()(["value"]);
|
|
538
|
-
var splitContentProps = createSplitProps(contentProps);
|
|
539
|
-
export {
|
|
540
|
-
anatomy,
|
|
541
|
-
connect,
|
|
542
|
-
contentProps,
|
|
543
|
-
machine,
|
|
544
|
-
props,
|
|
545
|
-
splitContentProps,
|
|
546
|
-
splitProps,
|
|
547
|
-
splitTriggerProps,
|
|
548
|
-
triggerProps
|
|
549
|
-
};
|
|
1
|
+
import{createAnatomy}from"@zag-js/anatomy";var anatomy=createAnatomy("tabs").parts("root","list","trigger","content","indicator");var parts=anatomy.build();import{getEventKey,getNativeEvent}from"@zag-js/dom-event";import{dataAttr,isSafari,isSelfTarget}from"@zag-js/dom-query";import{createScope,itemById,nextById,prevById,queryAll}from"@zag-js/dom-query";import{first,last}from"@zag-js/utils";var dom=createScope({getRootId:ctx=>ctx.ids?.root??`tabs:${ctx.id}`,getListId:ctx=>ctx.ids?.list??`tabs:${ctx.id}:list`,getContentId:(ctx,id)=>ctx.ids?.content??`tabs:${ctx.id}:content-${id}`,getTriggerId:(ctx,id)=>ctx.ids?.trigger??`tabs:${ctx.id}:trigger-${id}`,getIndicatorId:ctx=>ctx.ids?.indicator??`tabs:${ctx.id}:indicator`,getListEl:ctx=>dom.getById(ctx,dom.getListId(ctx)),getContentEl:(ctx,id)=>dom.getById(ctx,dom.getContentId(ctx,id)),getTriggerEl:(ctx,id)=>dom.getById(ctx,dom.getTriggerId(ctx,id)),getIndicatorEl:ctx=>dom.getById(ctx,dom.getIndicatorId(ctx)),getElements:ctx=>{const ownerId=CSS.escape(dom.getListId(ctx));const selector=`[role=tab][data-ownedby='${ownerId}']:not([disabled])`;return queryAll(dom.getListEl(ctx),selector)},getFirstTriggerEl:ctx=>first(dom.getElements(ctx)),getLastTriggerEl:ctx=>last(dom.getElements(ctx)),getNextTriggerEl:(ctx,id)=>nextById(dom.getElements(ctx),dom.getTriggerId(ctx,id),ctx.loopFocus),getPrevTriggerEl:(ctx,id)=>prevById(dom.getElements(ctx),dom.getTriggerId(ctx,id),ctx.loopFocus),getSelectedContentEl:ctx=>{if(!ctx.value)return;return dom.getContentEl(ctx,ctx.value)},getSelectedTriggerEl:ctx=>{if(!ctx.value)return;return dom.getTriggerEl(ctx,ctx.value)},getOffsetRect:el=>{return{left:el?.offsetLeft??0,top:el?.offsetTop??0,width:el?.offsetWidth??0,height:el?.offsetHeight??0}},getRectById:(ctx,id)=>{const tab=itemById(dom.getElements(ctx),dom.getTriggerId(ctx,id));return dom.resolveRect(dom.getOffsetRect(tab))},resolveRect:rect=>({width:`${rect.width}px`,height:`${rect.height}px`,left:`${rect.left}px`,top:`${rect.top}px`})});function connect(state,send,normalize){const translations=state.context.translations;const focused=state.matches("focused");const isVertical=state.context.orientation==="vertical";const isHorizontal=state.context.orientation==="horizontal";const composite=state.context.composite;const indicator=state.context.indicatorState;function getTriggerState(props2){return{selected:state.context.value===props2.value,focused:state.context.focusedValue===props2.value,disabled:!!props2.disabled}}return{value:state.context.value,focusedValue:state.context.focusedValue,setValue(value){send({type:"SET_VALUE",value})},clearValue(){send({type:"CLEAR_VALUE"})},setIndicatorRect(value){const id=dom.getTriggerId(state.context,value);send({type:"SET_INDICATOR_RECT",id})},syncTabIndex(){send("SYNC_TAB_INDEX")},selectNext(fromValue){send({type:"TAB_FOCUS",value:fromValue,src:"selectNext"});send({type:"ARROW_NEXT",src:"selectNext"})},selectPrev(fromValue){send({type:"TAB_FOCUS",value:fromValue,src:"selectPrev"});send({type:"ARROW_PREV",src:"selectPrev"})},focus(){dom.getSelectedTriggerEl(state.context)?.focus()},getTriggerState,rootProps:normalize.element({...parts.root.attrs,id:dom.getRootId(state.context),"data-orientation":state.context.orientation,"data-focus":dataAttr(focused),dir:state.context.dir}),listProps:normalize.element({...parts.list.attrs,id:dom.getListId(state.context),role:"tablist",dir:state.context.dir,"data-focus":dataAttr(focused),"aria-orientation":state.context.orientation,"data-orientation":state.context.orientation,"aria-label":translations?.listLabel,onKeyDown(event){if(event.defaultPrevented)return;const evt=getNativeEvent(event);if(!isSelfTarget(evt))return;if(evt.isComposing)return;const keyMap={ArrowDown(){if(isHorizontal)return;send({type:"ARROW_NEXT",key:"ArrowDown"})},ArrowUp(){if(isHorizontal)return;send({type:"ARROW_PREV",key:"ArrowUp"})},ArrowLeft(){if(isVertical)return;send({type:"ARROW_PREV",key:"ArrowLeft"})},ArrowRight(){if(isVertical)return;send({type:"ARROW_NEXT",key:"ArrowRight"})},Home(){send("HOME")},End(){send("END")},Enter(){send({type:"ENTER"})}};let key=getEventKey(event,state.context);const exec=keyMap[key];if(exec){event.preventDefault();exec(event)}}}),getTriggerProps(props2){const{value,disabled}=props2;const triggerState=getTriggerState(props2);return normalize.button({...parts.trigger.attrs,role:"tab",type:"button",disabled,dir:state.context.dir,"data-orientation":state.context.orientation,"data-disabled":dataAttr(disabled),"aria-disabled":disabled,"data-value":value,"aria-selected":triggerState.selected,"data-selected":dataAttr(triggerState.selected),"data-focus":dataAttr(triggerState.focused),"aria-controls":triggerState.selected?dom.getContentId(state.context,value):void 0,"data-ownedby":dom.getListId(state.context),id:dom.getTriggerId(state.context,value),tabIndex:triggerState.selected&&composite?0:-1,onFocus(){send({type:"TAB_FOCUS",value})},onBlur(event){const target=event.relatedTarget;if(target?.getAttribute("role")!=="tab"){send({type:"TAB_BLUR"})}},onClick(event){if(event.defaultPrevented)return;if(disabled)return;if(isSafari()){event.currentTarget.focus()}send({type:"TAB_CLICK",value})}})},getContentProps(props2){const{value}=props2;const selected=state.context.value===value;return normalize.element({...parts.content.attrs,dir:state.context.dir,id:dom.getContentId(state.context,value),tabIndex:composite?0:-1,"aria-labelledby":dom.getTriggerId(state.context,value),role:"tabpanel","data-ownedby":dom.getListId(state.context),"data-selected":dataAttr(selected),"data-orientation":state.context.orientation,hidden:!selected})},indicatorProps:normalize.element({id:dom.getIndicatorId(state.context),...parts.indicator.attrs,dir:state.context.dir,"data-orientation":state.context.orientation,style:{"--transition-property":"left, right, top, bottom, width, height","--left":indicator.rect?.left,"--top":indicator.rect?.top,"--width":indicator.rect?.width,"--height":indicator.rect?.height,position:"absolute",willChange:"var(--transition-property)",transitionProperty:"var(--transition-property)",transitionDuration:indicator.transition?"var(--transition-duration, 150ms)":"0ms",transitionTimingFunction:"var(--transition-timing-function)",[isHorizontal?"left":"top"]:isHorizontal?"var(--left)":"var(--top)"}})}}import{createMachine,guards}from"@zag-js/core";import{clickIfLink}from"@zag-js/dom-event";import{nextTick,raf,getFocusables}from"@zag-js/dom-query";import{trackElementRect}from"@zag-js/element-rect";import{compact,isEqual}from"@zag-js/utils";var{not}=guards;function machine(userContext){const ctx=compact(userContext);return createMachine({initial:"idle",context:{dir:"ltr",orientation:"horizontal",activationMode:"automatic",value:null,loopFocus:true,composite:true,...ctx,focusedValue:ctx.value??null,indicatorState:{rendered:false,transition:false,rect:{left:"0px",top:"0px",width:"0px",height:"0px"}}},watch:{value:["allowIndicatorTransition","syncIndicatorRect","syncTabIndex","clickIfLink"],dir:["syncIndicatorRect"],orientation:["syncIndicatorRect"]},on:{SET_VALUE:{actions:"setValue"},CLEAR_VALUE:{actions:"clearValue"},SET_INDICATOR_RECT:{actions:"setIndicatorRect"},SYNC_TAB_INDEX:{actions:"syncTabIndex"}},created:["syncFocusedValue"],entry:["checkRenderedElements","syncIndicatorRect","syncTabIndex"],exit:["cleanupObserver"],states:{idle:{on:{TAB_FOCUS:{target:"focused",actions:"setFocusedValue"},TAB_CLICK:{target:"focused",actions:["setFocusedValue","setValue"]}}},focused:{on:{TAB_CLICK:{target:"focused",actions:["setFocusedValue","setValue"]},ARROW_PREV:[{guard:"selectOnFocus",actions:["focusPrevTab","selectFocusedTab"]},{actions:"focusPrevTab"}],ARROW_NEXT:[{guard:"selectOnFocus",actions:["focusNextTab","selectFocusedTab"]},{actions:"focusNextTab"}],HOME:[{guard:"selectOnFocus",actions:["focusFirstTab","selectFocusedTab"]},{actions:"focusFirstTab"}],END:[{guard:"selectOnFocus",actions:["focusLastTab","selectFocusedTab"]},{actions:"focusLastTab"}],ENTER:{guard:not("selectOnFocus"),actions:"selectFocusedTab"},TAB_FOCUS:{actions:["setFocusedValue"]},TAB_BLUR:{target:"idle",actions:"clearFocusedValue"}}}}},{guards:{selectOnFocus:ctx2=>ctx2.activationMode==="automatic"},actions:{syncFocusedValue(ctx2){if(ctx2.value!=null&&ctx2.focusedValue==null){ctx2.focusedValue=ctx2.value}},selectFocusedTab(ctx2){raf(()=>{set.value(ctx2,ctx2.focusedValue)})},setFocusedValue(ctx2,evt){if(evt.value==null)return;set.focusedValue(ctx2,evt.value)},clearFocusedValue(ctx2){set.focusedValue(ctx2,null)},setValue(ctx2,evt){set.value(ctx2,evt.value)},clearValue(ctx2){set.value(ctx2,null)},focusFirstTab(ctx2){raf(()=>{dom.getFirstTriggerEl(ctx2)?.focus()})},focusLastTab(ctx2){raf(()=>{dom.getLastTriggerEl(ctx2)?.focus()})},focusNextTab(ctx2){if(!ctx2.focusedValue)return;const triggerEl=dom.getNextTriggerEl(ctx2,ctx2.focusedValue);raf(()=>{if(ctx2.composite){triggerEl?.focus()}else if(triggerEl?.dataset.value!=null){set.focusedValue(ctx2,triggerEl.dataset.value)}})},focusPrevTab(ctx2){if(!ctx2.focusedValue)return;const triggerEl=dom.getPrevTriggerEl(ctx2,ctx2.focusedValue);raf(()=>{if(ctx2.composite){triggerEl?.focus()}else if(triggerEl?.dataset.value!=null){set.focusedValue(ctx2,triggerEl.dataset.value)}})},checkRenderedElements(ctx2){ctx2.indicatorState.rendered=!!dom.getIndicatorEl(ctx2)},syncTabIndex(ctx2){raf(()=>{const contentEl=dom.getSelectedContentEl(ctx2);if(!contentEl)return;const focusables=getFocusables(contentEl);if(focusables.length>0){contentEl.removeAttribute("tabindex")}else{contentEl.setAttribute("tabindex","0")}})},cleanupObserver(ctx2){ctx2.indicatorCleanup?.()},allowIndicatorTransition(ctx2){ctx2.indicatorState.transition=true},setIndicatorRect(ctx2,evt){const value=evt.id??ctx2.value;if(!ctx2.indicatorState.rendered||!value)return;const triggerEl=dom.getTriggerEl(ctx2,value);if(!triggerEl)return;ctx2.indicatorState.rect=dom.getRectById(ctx2,value);nextTick(()=>{ctx2.indicatorState.transition=false})},syncIndicatorRect(ctx2){ctx2.indicatorCleanup?.();const value=ctx2.value;if(!ctx2.indicatorState.rendered||!value)return;const triggerEl=dom.getSelectedTriggerEl(ctx2);if(!triggerEl)return;ctx2.indicatorCleanup=trackElementRect(triggerEl,{getRect(el){return dom.getOffsetRect(el)},onChange(rect){ctx2.indicatorState.rect=dom.resolveRect(rect);nextTick(()=>{ctx2.indicatorState.transition=false})}})},clickIfLink(ctx2){clickIfLink(dom.getSelectedTriggerEl(ctx2))}}})}var invoke={change:ctx=>{if(ctx.value==null)return;ctx.onValueChange?.({value:ctx.value})},focusChange:ctx=>{if(ctx.focusedValue==null)return;ctx.onFocusChange?.({focusedValue:ctx.focusedValue})}};var set={value:(ctx,value)=>{if(isEqual(value,ctx.value))return;ctx.value=value;invoke.change(ctx)},focusedValue:(ctx,value)=>{if(isEqual(value,ctx.focusedValue))return;ctx.focusedValue=value;invoke.focusChange(ctx)}};import{createProps}from"@zag-js/types";import{createSplitProps}from"@zag-js/utils";var props=createProps()(["activationMode","composite","dir","getRootNode","id","ids","loopFocus","onFocusChange","onValueChange","orientation","translations","value"]);var splitProps=createSplitProps(props);var triggerProps=createProps()(["disabled","value"]);var splitTriggerProps=createSplitProps(triggerProps);var contentProps=createProps()(["value"]);var splitContentProps=createSplitProps(contentProps);export{anatomy,connect,contentProps,machine,props,splitContentProps,splitProps,splitTriggerProps,triggerProps};
|
|
550
2
|
//# sourceMappingURL=index.mjs.map
|