@zag-js/tabs 0.10.4 → 0.11.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/{tabs.types.d.ts → index.d.mts} +51 -10
- package/dist/index.d.ts +134 -4
- package/dist/index.js +492 -8
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +468 -3
- package/dist/index.mjs.map +1 -0
- package/package.json +10 -10
- package/dist/tabs.anatomy.d.ts +0 -3
- package/dist/tabs.anatomy.js +0 -11
- package/dist/tabs.anatomy.mjs +0 -6
- package/dist/tabs.connect.d.ts +0 -34
- package/dist/tabs.connect.js +0 -163
- package/dist/tabs.connect.mjs +0 -159
- package/dist/tabs.dom.d.ts +0 -51
- package/dist/tabs.dom.js +0 -60
- package/dist/tabs.dom.mjs +0 -56
- package/dist/tabs.machine.d.ts +0 -3
- package/dist/tabs.machine.js +0 -251
- package/dist/tabs.machine.mjs +0 -247
package/dist/index.js
CHANGED
|
@@ -1,13 +1,497 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
2
19
|
|
|
3
|
-
|
|
20
|
+
// src/index.ts
|
|
21
|
+
var src_exports = {};
|
|
22
|
+
__export(src_exports, {
|
|
23
|
+
anatomy: () => anatomy,
|
|
24
|
+
connect: () => connect,
|
|
25
|
+
machine: () => machine
|
|
26
|
+
});
|
|
27
|
+
module.exports = __toCommonJS(src_exports);
|
|
4
28
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
29
|
+
// src/tabs.anatomy.ts
|
|
30
|
+
var import_anatomy = require("@zag-js/anatomy");
|
|
31
|
+
var anatomy = (0, import_anatomy.createAnatomy)("tabs").parts("root", "tablist", "trigger", "contentGroup", "content", "indicator");
|
|
32
|
+
var parts = anatomy.build();
|
|
8
33
|
|
|
34
|
+
// src/tabs.connect.ts
|
|
35
|
+
var import_dom_event = require("@zag-js/dom-event");
|
|
36
|
+
var import_dom_query2 = require("@zag-js/dom-query");
|
|
9
37
|
|
|
38
|
+
// src/tabs.dom.ts
|
|
39
|
+
var import_dom_query = require("@zag-js/dom-query");
|
|
40
|
+
var import_utils = require("@zag-js/utils");
|
|
41
|
+
var dom = (0, import_dom_query.createScope)({
|
|
42
|
+
getRootId: (ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`,
|
|
43
|
+
getTablistId: (ctx) => ctx.ids?.tablist ?? `tabs:${ctx.id}:list`,
|
|
44
|
+
getContentId: (ctx, id) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,
|
|
45
|
+
getContentGroupId: (ctx) => ctx.ids?.contentGroup ?? `tabs:${ctx.id}:content-group`,
|
|
46
|
+
getTriggerId: (ctx, id) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,
|
|
47
|
+
getIndicatorId: (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,
|
|
48
|
+
getTablistEl: (ctx) => dom.getById(ctx, dom.getTablistId(ctx)),
|
|
49
|
+
getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
|
|
50
|
+
getTriggerEl: (ctx, id) => dom.getById(ctx, dom.getTriggerId(ctx, id)),
|
|
51
|
+
getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
|
|
52
|
+
getElements: (ctx) => {
|
|
53
|
+
const ownerId = CSS.escape(dom.getTablistId(ctx));
|
|
54
|
+
const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`;
|
|
55
|
+
return (0, import_dom_query.queryAll)(dom.getTablistEl(ctx), selector);
|
|
56
|
+
},
|
|
57
|
+
getFirstEl: (ctx) => (0, import_utils.first)(dom.getElements(ctx)),
|
|
58
|
+
getLastEl: (ctx) => (0, import_utils.last)(dom.getElements(ctx)),
|
|
59
|
+
getNextEl: (ctx, id) => (0, import_dom_query.nextById)(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),
|
|
60
|
+
getPrevEl: (ctx, id) => (0, import_dom_query.prevById)(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),
|
|
61
|
+
getActiveContentEl: (ctx) => {
|
|
62
|
+
if (!ctx.value)
|
|
63
|
+
return;
|
|
64
|
+
return dom.getContentEl(ctx, ctx.value);
|
|
65
|
+
},
|
|
66
|
+
getActiveTabEl: (ctx) => {
|
|
67
|
+
if (!ctx.value)
|
|
68
|
+
return;
|
|
69
|
+
return dom.getTriggerEl(ctx, ctx.value);
|
|
70
|
+
},
|
|
71
|
+
getOffsetRect: (el) => {
|
|
72
|
+
return {
|
|
73
|
+
left: el?.offsetLeft ?? 0,
|
|
74
|
+
top: el?.offsetTop ?? 0,
|
|
75
|
+
width: el?.offsetWidth ?? 0,
|
|
76
|
+
height: el?.offsetHeight ?? 0
|
|
77
|
+
};
|
|
78
|
+
},
|
|
79
|
+
getRectById: (ctx, id) => {
|
|
80
|
+
const tab = (0, import_dom_query.itemById)(dom.getElements(ctx), dom.getTriggerId(ctx, id));
|
|
81
|
+
return dom.resolveRect(dom.getOffsetRect(tab), ctx.orientation);
|
|
82
|
+
},
|
|
83
|
+
resolveRect(rect, orientation) {
|
|
84
|
+
const sizeProp = orientation === "vertical" ? "height" : "width";
|
|
85
|
+
const placementProp = orientation === "vertical" ? "top" : "left";
|
|
86
|
+
return {
|
|
87
|
+
[placementProp]: `${rect[placementProp]}px`,
|
|
88
|
+
[sizeProp]: `${rect[sizeProp]}px`
|
|
89
|
+
};
|
|
90
|
+
}
|
|
91
|
+
});
|
|
10
92
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
93
|
+
// src/tabs.connect.ts
|
|
94
|
+
function connect(state, send, normalize) {
|
|
95
|
+
const translations = state.context.translations;
|
|
96
|
+
const isFocused = state.matches("focused");
|
|
97
|
+
return {
|
|
98
|
+
/**
|
|
99
|
+
* The current value of the tabs.
|
|
100
|
+
*/
|
|
101
|
+
value: state.context.value,
|
|
102
|
+
/**
|
|
103
|
+
* The value of the tab that is currently focused.
|
|
104
|
+
*/
|
|
105
|
+
focusedValue: state.context.focusedValue,
|
|
106
|
+
/**
|
|
107
|
+
* The previous values of the tabs in sequence of selection.
|
|
108
|
+
*/
|
|
109
|
+
previousValues: Array.from(state.context.previousValues),
|
|
110
|
+
/**
|
|
111
|
+
* Sets the value of the tabs.
|
|
112
|
+
*/
|
|
113
|
+
setValue(value) {
|
|
114
|
+
send({ type: "SET_VALUE", value });
|
|
115
|
+
},
|
|
116
|
+
/**
|
|
117
|
+
* Clears the value of the tabs.
|
|
118
|
+
*/
|
|
119
|
+
clearValue() {
|
|
120
|
+
send({ type: "CLEAR_VALUE" });
|
|
121
|
+
},
|
|
122
|
+
/**
|
|
123
|
+
* Sets the indicator rect to the tab with the given id.
|
|
124
|
+
*/
|
|
125
|
+
setIndicatorRect(id) {
|
|
126
|
+
send({ type: "SET_INDICATOR_RECT", id });
|
|
127
|
+
},
|
|
128
|
+
rootProps: normalize.element({
|
|
129
|
+
...parts.root.attrs,
|
|
130
|
+
id: dom.getRootId(state.context),
|
|
131
|
+
"data-orientation": state.context.orientation,
|
|
132
|
+
"data-focus": (0, import_dom_query2.dataAttr)(isFocused),
|
|
133
|
+
dir: state.context.dir
|
|
134
|
+
}),
|
|
135
|
+
tablistProps: normalize.element({
|
|
136
|
+
...parts.tablist.attrs,
|
|
137
|
+
id: dom.getTablistId(state.context),
|
|
138
|
+
role: "tablist",
|
|
139
|
+
"data-focus": (0, import_dom_query2.dataAttr)(isFocused),
|
|
140
|
+
"aria-orientation": state.context.orientation,
|
|
141
|
+
"data-orientation": state.context.orientation,
|
|
142
|
+
"aria-label": translations.tablistLabel,
|
|
143
|
+
onKeyDown(event) {
|
|
144
|
+
const keyMap = {
|
|
145
|
+
ArrowDown() {
|
|
146
|
+
send("ARROW_DOWN");
|
|
147
|
+
},
|
|
148
|
+
ArrowUp() {
|
|
149
|
+
send("ARROW_UP");
|
|
150
|
+
},
|
|
151
|
+
ArrowLeft() {
|
|
152
|
+
send("ARROW_LEFT");
|
|
153
|
+
},
|
|
154
|
+
ArrowRight() {
|
|
155
|
+
send("ARROW_RIGHT");
|
|
156
|
+
},
|
|
157
|
+
Home() {
|
|
158
|
+
send("HOME");
|
|
159
|
+
},
|
|
160
|
+
End() {
|
|
161
|
+
send("END");
|
|
162
|
+
},
|
|
163
|
+
Enter() {
|
|
164
|
+
send({ type: "ENTER", value: state.context.focusedValue });
|
|
165
|
+
}
|
|
166
|
+
};
|
|
167
|
+
let key = (0, import_dom_event.getEventKey)(event, state.context);
|
|
168
|
+
const exec = keyMap[key];
|
|
169
|
+
if (exec) {
|
|
170
|
+
event.preventDefault();
|
|
171
|
+
exec(event);
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
}),
|
|
175
|
+
getTriggerProps(props) {
|
|
176
|
+
const { value, disabled } = props;
|
|
177
|
+
const selected = state.context.value === value;
|
|
178
|
+
return normalize.button({
|
|
179
|
+
...parts.trigger.attrs,
|
|
180
|
+
role: "tab",
|
|
181
|
+
type: "button",
|
|
182
|
+
disabled,
|
|
183
|
+
"data-orientation": state.context.orientation,
|
|
184
|
+
"data-disabled": (0, import_dom_query2.dataAttr)(disabled),
|
|
185
|
+
"aria-disabled": disabled,
|
|
186
|
+
"data-value": value,
|
|
187
|
+
"aria-selected": selected,
|
|
188
|
+
"data-selected": (0, import_dom_query2.dataAttr)(selected),
|
|
189
|
+
"aria-controls": dom.getContentId(state.context, value),
|
|
190
|
+
"data-ownedby": dom.getTablistId(state.context),
|
|
191
|
+
id: dom.getTriggerId(state.context, value),
|
|
192
|
+
tabIndex: selected ? 0 : -1,
|
|
193
|
+
onFocus() {
|
|
194
|
+
send({ type: "TAB_FOCUS", value });
|
|
195
|
+
},
|
|
196
|
+
onBlur(event) {
|
|
197
|
+
const target = event.relatedTarget;
|
|
198
|
+
if (target?.getAttribute("role") !== "tab") {
|
|
199
|
+
send({ type: "TAB_BLUR" });
|
|
200
|
+
}
|
|
201
|
+
},
|
|
202
|
+
onClick(event) {
|
|
203
|
+
if (disabled)
|
|
204
|
+
return;
|
|
205
|
+
if ((0, import_dom_query2.isSafari)()) {
|
|
206
|
+
event.currentTarget.focus();
|
|
207
|
+
}
|
|
208
|
+
send({ type: "TAB_CLICK", value });
|
|
209
|
+
}
|
|
210
|
+
});
|
|
211
|
+
},
|
|
212
|
+
contentGroupProps: normalize.element({
|
|
213
|
+
...parts.contentGroup.attrs,
|
|
214
|
+
id: dom.getContentGroupId(state.context),
|
|
215
|
+
"data-orientation": state.context.orientation
|
|
216
|
+
}),
|
|
217
|
+
getContentProps({ value }) {
|
|
218
|
+
const selected = state.context.value === value;
|
|
219
|
+
return normalize.element({
|
|
220
|
+
...parts.content.attrs,
|
|
221
|
+
id: dom.getContentId(state.context, value),
|
|
222
|
+
tabIndex: 0,
|
|
223
|
+
"aria-labelledby": dom.getTriggerId(state.context, value),
|
|
224
|
+
role: "tabpanel",
|
|
225
|
+
"data-ownedby": dom.getTablistId(state.context),
|
|
226
|
+
hidden: !selected
|
|
227
|
+
});
|
|
228
|
+
},
|
|
229
|
+
indicatorProps: normalize.element({
|
|
230
|
+
id: dom.getIndicatorId(state.context),
|
|
231
|
+
...parts.indicator.attrs,
|
|
232
|
+
"data-orientation": state.context.orientation,
|
|
233
|
+
style: {
|
|
234
|
+
"--transition-duration": "150ms",
|
|
235
|
+
"--transition-property": "left, right, top, bottom, width, height",
|
|
236
|
+
position: "absolute",
|
|
237
|
+
willChange: "var(--transition-property)",
|
|
238
|
+
transitionProperty: "var(--transition-property)",
|
|
239
|
+
transitionDuration: state.context.canIndicatorTransition ? "var(--transition-duration)" : "0ms",
|
|
240
|
+
transitionTimingFunction: "var(--transition-timing-function)",
|
|
241
|
+
...state.context.indicatorRect
|
|
242
|
+
}
|
|
243
|
+
})
|
|
244
|
+
};
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
// src/tabs.machine.ts
|
|
248
|
+
var import_core = require("@zag-js/core");
|
|
249
|
+
var import_dom_query3 = require("@zag-js/dom-query");
|
|
250
|
+
var import_element_rect = require("@zag-js/element-rect");
|
|
251
|
+
var import_tabbable = require("@zag-js/tabbable");
|
|
252
|
+
var import_utils2 = require("@zag-js/utils");
|
|
253
|
+
var { not } = import_core.guards;
|
|
254
|
+
function machine(userContext) {
|
|
255
|
+
const ctx = (0, import_utils2.compact)(userContext);
|
|
256
|
+
return (0, import_core.createMachine)(
|
|
257
|
+
{
|
|
258
|
+
initial: "idle",
|
|
259
|
+
context: {
|
|
260
|
+
dir: "ltr",
|
|
261
|
+
orientation: "horizontal",
|
|
262
|
+
activationMode: "automatic",
|
|
263
|
+
value: null,
|
|
264
|
+
focusedValue: null,
|
|
265
|
+
previousValues: [],
|
|
266
|
+
indicatorRect: {
|
|
267
|
+
left: "0px",
|
|
268
|
+
top: "0px",
|
|
269
|
+
width: "0px",
|
|
270
|
+
height: "0px"
|
|
271
|
+
},
|
|
272
|
+
canIndicatorTransition: false,
|
|
273
|
+
isIndicatorRendered: false,
|
|
274
|
+
loop: true,
|
|
275
|
+
translations: {},
|
|
276
|
+
...ctx
|
|
277
|
+
},
|
|
278
|
+
computed: {
|
|
279
|
+
isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
|
|
280
|
+
isVertical: (ctx2) => ctx2.orientation === "vertical"
|
|
281
|
+
},
|
|
282
|
+
created: ["setPrevSelectedTabs"],
|
|
283
|
+
entry: ["checkRenderedElements", "syncIndicatorRect", "setContentTabIndex"],
|
|
284
|
+
exit: ["cleanupObserver"],
|
|
285
|
+
watch: {
|
|
286
|
+
focusedValue: "invokeOnFocus",
|
|
287
|
+
value: [
|
|
288
|
+
"enableIndicatorTransition",
|
|
289
|
+
"invokeOnChange",
|
|
290
|
+
"setPrevSelectedTabs",
|
|
291
|
+
"syncIndicatorRect",
|
|
292
|
+
"setContentTabIndex"
|
|
293
|
+
],
|
|
294
|
+
dir: ["syncIndicatorRect"],
|
|
295
|
+
orientation: ["syncIndicatorRect"]
|
|
296
|
+
},
|
|
297
|
+
on: {
|
|
298
|
+
SET_VALUE: {
|
|
299
|
+
actions: "setValue"
|
|
300
|
+
},
|
|
301
|
+
CLEAR_VALUE: {
|
|
302
|
+
actions: "clearValue"
|
|
303
|
+
},
|
|
304
|
+
SET_INDICATOR_RECT: {
|
|
305
|
+
actions: "setIndicatorRect"
|
|
306
|
+
}
|
|
307
|
+
},
|
|
308
|
+
states: {
|
|
309
|
+
idle: {
|
|
310
|
+
on: {
|
|
311
|
+
TAB_FOCUS: [
|
|
312
|
+
{
|
|
313
|
+
guard: "selectOnFocus",
|
|
314
|
+
target: "focused",
|
|
315
|
+
actions: ["setFocusedValue", "setValue"]
|
|
316
|
+
},
|
|
317
|
+
{
|
|
318
|
+
target: "focused",
|
|
319
|
+
actions: "setFocusedValue"
|
|
320
|
+
}
|
|
321
|
+
],
|
|
322
|
+
TAB_CLICK: {
|
|
323
|
+
target: "focused",
|
|
324
|
+
actions: ["setFocusedValue", "setValue"]
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
},
|
|
328
|
+
focused: {
|
|
329
|
+
on: {
|
|
330
|
+
TAB_CLICK: {
|
|
331
|
+
target: "focused",
|
|
332
|
+
actions: ["setFocusedValue", "setValue"]
|
|
333
|
+
},
|
|
334
|
+
ARROW_LEFT: {
|
|
335
|
+
guard: "isHorizontal",
|
|
336
|
+
actions: "focusPrevTab"
|
|
337
|
+
},
|
|
338
|
+
ARROW_RIGHT: {
|
|
339
|
+
guard: "isHorizontal",
|
|
340
|
+
actions: "focusNextTab"
|
|
341
|
+
},
|
|
342
|
+
ARROW_UP: {
|
|
343
|
+
guard: "isVertical",
|
|
344
|
+
actions: "focusPrevTab"
|
|
345
|
+
},
|
|
346
|
+
ARROW_DOWN: {
|
|
347
|
+
guard: "isVertical",
|
|
348
|
+
actions: "focusNextTab"
|
|
349
|
+
},
|
|
350
|
+
HOME: {
|
|
351
|
+
actions: "focusFirstTab"
|
|
352
|
+
},
|
|
353
|
+
END: {
|
|
354
|
+
actions: "focusLastTab"
|
|
355
|
+
},
|
|
356
|
+
ENTER: {
|
|
357
|
+
guard: not("selectOnFocus"),
|
|
358
|
+
actions: "setValue"
|
|
359
|
+
},
|
|
360
|
+
TAB_FOCUS: [
|
|
361
|
+
{
|
|
362
|
+
guard: "selectOnFocus",
|
|
363
|
+
actions: ["setFocusedValue", "setValue"]
|
|
364
|
+
},
|
|
365
|
+
{ actions: "setFocusedValue" }
|
|
366
|
+
],
|
|
367
|
+
TAB_BLUR: {
|
|
368
|
+
target: "idle",
|
|
369
|
+
actions: "clearFocusedValue"
|
|
370
|
+
}
|
|
371
|
+
}
|
|
372
|
+
}
|
|
373
|
+
}
|
|
374
|
+
},
|
|
375
|
+
{
|
|
376
|
+
guards: {
|
|
377
|
+
isVertical: (ctx2) => ctx2.isVertical,
|
|
378
|
+
isHorizontal: (ctx2) => ctx2.isHorizontal,
|
|
379
|
+
selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
|
|
380
|
+
},
|
|
381
|
+
actions: {
|
|
382
|
+
setFocusedValue(ctx2, evt) {
|
|
383
|
+
ctx2.focusedValue = evt.value;
|
|
384
|
+
},
|
|
385
|
+
clearFocusedValue(ctx2) {
|
|
386
|
+
ctx2.focusedValue = null;
|
|
387
|
+
},
|
|
388
|
+
setValue(ctx2, evt) {
|
|
389
|
+
ctx2.value = evt.value;
|
|
390
|
+
},
|
|
391
|
+
clearValue(ctx2) {
|
|
392
|
+
ctx2.value = null;
|
|
393
|
+
},
|
|
394
|
+
focusFirstTab(ctx2) {
|
|
395
|
+
(0, import_dom_query3.raf)(() => dom.getFirstEl(ctx2)?.focus());
|
|
396
|
+
},
|
|
397
|
+
focusLastTab(ctx2) {
|
|
398
|
+
(0, import_dom_query3.raf)(() => dom.getLastEl(ctx2)?.focus());
|
|
399
|
+
},
|
|
400
|
+
focusNextTab(ctx2) {
|
|
401
|
+
if (!ctx2.focusedValue)
|
|
402
|
+
return;
|
|
403
|
+
const next = dom.getNextEl(ctx2, ctx2.focusedValue);
|
|
404
|
+
(0, import_dom_query3.raf)(() => next?.focus());
|
|
405
|
+
},
|
|
406
|
+
focusPrevTab(ctx2) {
|
|
407
|
+
if (!ctx2.focusedValue)
|
|
408
|
+
return;
|
|
409
|
+
const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
|
|
410
|
+
(0, import_dom_query3.raf)(() => prev?.focus());
|
|
411
|
+
},
|
|
412
|
+
checkRenderedElements(ctx2) {
|
|
413
|
+
ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
|
|
414
|
+
},
|
|
415
|
+
invokeOnChange(ctx2) {
|
|
416
|
+
ctx2.onChange?.({ value: ctx2.value });
|
|
417
|
+
},
|
|
418
|
+
invokeOnFocus(ctx2) {
|
|
419
|
+
ctx2.onFocus?.({ value: ctx2.focusedValue });
|
|
420
|
+
},
|
|
421
|
+
setPrevSelectedTabs(ctx2) {
|
|
422
|
+
if (ctx2.value != null) {
|
|
423
|
+
ctx2.previousValues = pushUnique(ctx2.previousValues, ctx2.value);
|
|
424
|
+
}
|
|
425
|
+
},
|
|
426
|
+
// if tab panel contains focusable elements, remove the tabindex attribute
|
|
427
|
+
setContentTabIndex(ctx2) {
|
|
428
|
+
(0, import_dom_query3.raf)(() => {
|
|
429
|
+
const panel = dom.getActiveContentEl(ctx2);
|
|
430
|
+
if (!panel)
|
|
431
|
+
return;
|
|
432
|
+
const focusables = (0, import_tabbable.getFocusables)(panel);
|
|
433
|
+
if (focusables.length > 0) {
|
|
434
|
+
panel.removeAttribute("tabindex");
|
|
435
|
+
} else {
|
|
436
|
+
panel.setAttribute("tabindex", "0");
|
|
437
|
+
}
|
|
438
|
+
});
|
|
439
|
+
},
|
|
440
|
+
cleanupObserver(ctx2) {
|
|
441
|
+
ctx2.indicatorCleanup?.();
|
|
442
|
+
},
|
|
443
|
+
enableIndicatorTransition(ctx2) {
|
|
444
|
+
ctx2.canIndicatorTransition = true;
|
|
445
|
+
},
|
|
446
|
+
setIndicatorRect(ctx2, evt) {
|
|
447
|
+
const value = evt.id ?? ctx2.value;
|
|
448
|
+
if (!ctx2.isIndicatorRendered || !value)
|
|
449
|
+
return;
|
|
450
|
+
const tabEl = dom.getTriggerEl(ctx2, value);
|
|
451
|
+
if (!tabEl)
|
|
452
|
+
return;
|
|
453
|
+
ctx2.indicatorRect = dom.getRectById(ctx2, value);
|
|
454
|
+
(0, import_dom_query3.nextTick)(() => {
|
|
455
|
+
ctx2.canIndicatorTransition = false;
|
|
456
|
+
});
|
|
457
|
+
},
|
|
458
|
+
syncIndicatorRect(ctx2) {
|
|
459
|
+
ctx2.indicatorCleanup?.();
|
|
460
|
+
const value = ctx2.value;
|
|
461
|
+
if (!ctx2.isIndicatorRendered || !value)
|
|
462
|
+
return;
|
|
463
|
+
const tabEl = dom.getActiveTabEl(ctx2);
|
|
464
|
+
if (!tabEl)
|
|
465
|
+
return;
|
|
466
|
+
ctx2.indicatorCleanup = (0, import_element_rect.trackElementRect)(tabEl, {
|
|
467
|
+
getRect(el) {
|
|
468
|
+
return dom.getOffsetRect(el);
|
|
469
|
+
},
|
|
470
|
+
onChange(rect) {
|
|
471
|
+
ctx2.indicatorRect = dom.resolveRect(rect, ctx2.orientation);
|
|
472
|
+
(0, import_dom_query3.nextTick)(() => {
|
|
473
|
+
ctx2.canIndicatorTransition = false;
|
|
474
|
+
});
|
|
475
|
+
}
|
|
476
|
+
});
|
|
477
|
+
}
|
|
478
|
+
}
|
|
479
|
+
}
|
|
480
|
+
);
|
|
481
|
+
}
|
|
482
|
+
function pushUnique(arr, value) {
|
|
483
|
+
const newArr = Array.from(arr).slice();
|
|
484
|
+
const index = newArr.indexOf(value);
|
|
485
|
+
if (index > -1) {
|
|
486
|
+
newArr.splice(index, 1);
|
|
487
|
+
}
|
|
488
|
+
newArr.push(value);
|
|
489
|
+
return newArr;
|
|
490
|
+
}
|
|
491
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
492
|
+
0 && (module.exports = {
|
|
493
|
+
anatomy,
|
|
494
|
+
connect,
|
|
495
|
+
machine
|
|
496
|
+
});
|
|
497
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/tabs.anatomy.ts","../src/tabs.connect.ts","../src/tabs.dom.ts","../src/tabs.machine.ts"],"sourcesContent":["export { anatomy } from \"./tabs.anatomy\"\nexport { connect } from \"./tabs.connect\"\nexport { machine } from \"./tabs.machine\"\nexport type { UserDefinedContext as Context, TriggerProps, ContentProps } from \"./tabs.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"tabs\").parts(\"root\", \"tablist\", \"trigger\", \"contentGroup\", \"content\", \"indicator\")\nexport const parts = anatomy.build()\n","import { EventKeyMap, getEventKey } from \"@zag-js/dom-event\"\nimport { dataAttr, isSafari } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./tabs.anatomy\"\nimport { dom } from \"./tabs.dom\"\nimport type { ContentProps, Send, State, TriggerProps } from \"./tabs.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>) {\n const translations = state.context.translations\n const isFocused = state.matches(\"focused\")\n\n return {\n /**\n * The current value of the tabs.\n */\n value: state.context.value,\n /**\n * The value of the tab that is currently focused.\n */\n focusedValue: state.context.focusedValue,\n /**\n * The previous values of the tabs in sequence of selection.\n */\n previousValues: Array.from(state.context.previousValues),\n /**\n * Sets the value of the tabs.\n */\n setValue(value: string) {\n send({ type: \"SET_VALUE\", value })\n },\n /**\n * Clears the value of the tabs.\n */\n clearValue() {\n send({ type: \"CLEAR_VALUE\" })\n },\n /**\n * Sets the indicator rect to the tab with the given id.\n */\n setIndicatorRect(id: string | null | undefined) {\n send({ type: \"SET_INDICATOR_RECT\", id })\n },\n\n rootProps: normalize.element({\n ...parts.root.attrs,\n id: dom.getRootId(state.context),\n \"data-orientation\": state.context.orientation,\n \"data-focus\": dataAttr(isFocused),\n dir: state.context.dir,\n }),\n\n tablistProps: normalize.element({\n ...parts.tablist.attrs,\n id: dom.getTablistId(state.context),\n role: \"tablist\",\n \"data-focus\": dataAttr(isFocused),\n \"aria-orientation\": state.context.orientation,\n \"data-orientation\": state.context.orientation,\n \"aria-label\": translations.tablistLabel,\n onKeyDown(event) {\n const keyMap: EventKeyMap = {\n ArrowDown() {\n send(\"ARROW_DOWN\")\n },\n ArrowUp() {\n send(\"ARROW_UP\")\n },\n ArrowLeft() {\n send(\"ARROW_LEFT\")\n },\n ArrowRight() {\n send(\"ARROW_RIGHT\")\n },\n Home() {\n send(\"HOME\")\n },\n End() {\n send(\"END\")\n },\n Enter() {\n send({ type: \"ENTER\", value: state.context.focusedValue })\n },\n }\n\n let key = getEventKey(event, state.context)\n const exec = keyMap[key]\n\n if (exec) {\n event.preventDefault()\n exec(event)\n }\n },\n }),\n\n getTriggerProps(props: TriggerProps) {\n const { value, disabled } = props\n const selected = state.context.value === value\n\n return normalize.button({\n ...parts.trigger.attrs,\n role: \"tab\",\n type: \"button\",\n disabled,\n \"data-orientation\": state.context.orientation,\n \"data-disabled\": dataAttr(disabled),\n \"aria-disabled\": disabled,\n \"data-value\": value,\n \"aria-selected\": selected,\n \"data-selected\": dataAttr(selected),\n \"aria-controls\": dom.getContentId(state.context, value),\n \"data-ownedby\": dom.getTablistId(state.context),\n id: dom.getTriggerId(state.context, value),\n tabIndex: selected ? 0 : -1,\n onFocus() {\n send({ type: \"TAB_FOCUS\", value })\n },\n onBlur(event) {\n const target = event.relatedTarget as HTMLElement | null\n if (target?.getAttribute(\"role\") !== \"tab\") {\n send({ type: \"TAB_BLUR\" })\n }\n },\n onClick(event) {\n if (disabled) return\n if (isSafari()) {\n event.currentTarget.focus()\n }\n send({ type: \"TAB_CLICK\", value })\n },\n })\n },\n\n contentGroupProps: normalize.element({\n ...parts.contentGroup.attrs,\n id: dom.getContentGroupId(state.context),\n \"data-orientation\": state.context.orientation,\n }),\n\n getContentProps({ value }: ContentProps) {\n const selected = state.context.value === value\n return normalize.element({\n ...parts.content.attrs,\n id: dom.getContentId(state.context, value),\n tabIndex: 0,\n \"aria-labelledby\": dom.getTriggerId(state.context, value),\n role: \"tabpanel\",\n \"data-ownedby\": dom.getTablistId(state.context),\n hidden: !selected,\n })\n },\n\n indicatorProps: normalize.element({\n id: dom.getIndicatorId(state.context),\n ...parts.indicator.attrs,\n \"data-orientation\": state.context.orientation,\n style: {\n \"--transition-duration\": \"150ms\",\n \"--transition-property\": \"left, right, top, bottom, width, height\",\n position: \"absolute\",\n willChange: \"var(--transition-property)\",\n transitionProperty: \"var(--transition-property)\",\n transitionDuration: state.context.canIndicatorTransition ? \"var(--transition-duration)\" : \"0ms\",\n transitionTimingFunction: \"var(--transition-timing-function)\",\n ...state.context.indicatorRect,\n },\n }),\n }\n}\n","import { createScope, itemById, nextById, prevById, queryAll } from \"@zag-js/dom-query\"\nimport { first, last } from \"@zag-js/utils\"\nimport type { MachineContext as Ctx } from \"./tabs.types\"\n\nexport const dom = createScope({\n getRootId: (ctx: Ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`,\n getTablistId: (ctx: Ctx) => ctx.ids?.tablist ?? `tabs:${ctx.id}:list`,\n getContentId: (ctx: Ctx, id: string) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,\n getContentGroupId: (ctx: Ctx) => ctx.ids?.contentGroup ?? `tabs:${ctx.id}:content-group`,\n getTriggerId: (ctx: Ctx, id: string) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,\n getIndicatorId: (ctx: Ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,\n\n getTablistEl: (ctx: Ctx) => dom.getById(ctx, dom.getTablistId(ctx)),\n getContentEl: (ctx: Ctx, id: string) => dom.getById(ctx, dom.getContentId(ctx, id)),\n getTriggerEl: (ctx: Ctx, id: string) => dom.getById(ctx, dom.getTriggerId(ctx, id)),\n getIndicatorEl: (ctx: Ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),\n\n getElements: (ctx: Ctx) => {\n const ownerId = CSS.escape(dom.getTablistId(ctx))\n const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`\n return queryAll(dom.getTablistEl(ctx), selector)\n },\n\n getFirstEl: (ctx: Ctx) => first(dom.getElements(ctx)),\n getLastEl: (ctx: Ctx) => last(dom.getElements(ctx)),\n getNextEl: (ctx: Ctx, id: string) => nextById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),\n getPrevEl: (ctx: Ctx, id: string) => prevById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),\n getActiveContentEl: (ctx: Ctx) => {\n if (!ctx.value) return\n return dom.getContentEl(ctx, ctx.value)\n },\n getActiveTabEl: (ctx: Ctx) => {\n if (!ctx.value) return\n return dom.getTriggerEl(ctx, ctx.value)\n },\n\n getOffsetRect: (el: HTMLElement | undefined) => {\n return {\n left: el?.offsetLeft ?? 0,\n top: el?.offsetTop ?? 0,\n width: el?.offsetWidth ?? 0,\n height: el?.offsetHeight ?? 0,\n }\n },\n\n getRectById: (ctx: Ctx, id: string) => {\n const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id))\n return dom.resolveRect(dom.getOffsetRect(tab), ctx.orientation)\n },\n\n resolveRect(rect: Record<\"width\" | \"height\" | \"left\" | \"top\", number>, orientation?: \"horizontal\" | \"vertical\") {\n const sizeProp = orientation === \"vertical\" ? \"height\" : \"width\"\n const placementProp = orientation === \"vertical\" ? \"top\" : \"left\"\n return {\n [placementProp]: `${rect[placementProp]}px`,\n [sizeProp]: `${rect[sizeProp]}px`,\n }\n },\n})\n","import { createMachine, guards } from \"@zag-js/core\"\nimport { nextTick, raf } from \"@zag-js/dom-query\"\nimport { trackElementRect } from \"@zag-js/element-rect\"\nimport { getFocusables } from \"@zag-js/tabbable\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./tabs.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./tabs.types\"\n\nconst { not } = guards\n\nexport function machine(userContext: UserDefinedContext) {\n const ctx = compact(userContext)\n return createMachine<MachineContext, MachineState>(\n {\n initial: \"idle\",\n\n context: {\n dir: \"ltr\",\n orientation: \"horizontal\",\n activationMode: \"automatic\",\n value: null,\n focusedValue: null,\n previousValues: [],\n indicatorRect: {\n left: \"0px\",\n top: \"0px\",\n width: \"0px\",\n height: \"0px\",\n },\n canIndicatorTransition: false,\n isIndicatorRendered: false,\n loop: true,\n translations: {},\n ...ctx,\n },\n\n computed: {\n isHorizontal: (ctx) => ctx.orientation === \"horizontal\",\n isVertical: (ctx) => ctx.orientation === \"vertical\",\n },\n\n created: [\"setPrevSelectedTabs\"],\n\n entry: [\"checkRenderedElements\", \"syncIndicatorRect\", \"setContentTabIndex\"],\n\n exit: [\"cleanupObserver\"],\n\n watch: {\n focusedValue: \"invokeOnFocus\",\n value: [\n \"enableIndicatorTransition\",\n \"invokeOnChange\",\n \"setPrevSelectedTabs\",\n \"syncIndicatorRect\",\n \"setContentTabIndex\",\n ],\n dir: [\"syncIndicatorRect\"],\n orientation: [\"syncIndicatorRect\"],\n },\n\n on: {\n SET_VALUE: {\n actions: \"setValue\",\n },\n CLEAR_VALUE: {\n actions: \"clearValue\",\n },\n SET_INDICATOR_RECT: {\n actions: \"setIndicatorRect\",\n },\n },\n\n states: {\n idle: {\n on: {\n TAB_FOCUS: [\n {\n guard: \"selectOnFocus\",\n target: \"focused\",\n actions: [\"setFocusedValue\", \"setValue\"],\n },\n {\n target: \"focused\",\n actions: \"setFocusedValue\",\n },\n ],\n TAB_CLICK: {\n target: \"focused\",\n actions: [\"setFocusedValue\", \"setValue\"],\n },\n },\n },\n focused: {\n on: {\n TAB_CLICK: {\n target: \"focused\",\n actions: [\"setFocusedValue\", \"setValue\"],\n },\n ARROW_LEFT: {\n guard: \"isHorizontal\",\n actions: \"focusPrevTab\",\n },\n ARROW_RIGHT: {\n guard: \"isHorizontal\",\n actions: \"focusNextTab\",\n },\n ARROW_UP: {\n guard: \"isVertical\",\n actions: \"focusPrevTab\",\n },\n ARROW_DOWN: {\n guard: \"isVertical\",\n actions: \"focusNextTab\",\n },\n HOME: {\n actions: \"focusFirstTab\",\n },\n END: {\n actions: \"focusLastTab\",\n },\n ENTER: {\n guard: not(\"selectOnFocus\"),\n actions: \"setValue\",\n },\n TAB_FOCUS: [\n {\n guard: \"selectOnFocus\",\n actions: [\"setFocusedValue\", \"setValue\"],\n },\n { actions: \"setFocusedValue\" },\n ],\n TAB_BLUR: {\n target: \"idle\",\n actions: \"clearFocusedValue\",\n },\n },\n },\n },\n },\n {\n guards: {\n isVertical: (ctx) => ctx.isVertical,\n isHorizontal: (ctx) => ctx.isHorizontal,\n selectOnFocus: (ctx) => ctx.activationMode === \"automatic\",\n },\n\n actions: {\n setFocusedValue(ctx, evt) {\n ctx.focusedValue = evt.value\n },\n clearFocusedValue(ctx) {\n ctx.focusedValue = null\n },\n setValue(ctx, evt) {\n ctx.value = evt.value\n },\n clearValue(ctx) {\n ctx.value = null\n },\n focusFirstTab(ctx) {\n raf(() => dom.getFirstEl(ctx)?.focus())\n },\n focusLastTab(ctx) {\n raf(() => dom.getLastEl(ctx)?.focus())\n },\n focusNextTab(ctx) {\n if (!ctx.focusedValue) return\n const next = dom.getNextEl(ctx, ctx.focusedValue)\n raf(() => next?.focus())\n },\n focusPrevTab(ctx) {\n if (!ctx.focusedValue) return\n const prev = dom.getPrevEl(ctx, ctx.focusedValue)\n raf(() => prev?.focus())\n },\n checkRenderedElements(ctx) {\n ctx.isIndicatorRendered = !!dom.getIndicatorEl(ctx)\n },\n invokeOnChange(ctx) {\n ctx.onChange?.({ value: ctx.value })\n },\n invokeOnFocus(ctx) {\n ctx.onFocus?.({ value: ctx.focusedValue })\n },\n setPrevSelectedTabs(ctx) {\n if (ctx.value != null) {\n ctx.previousValues = pushUnique(ctx.previousValues, ctx.value)\n }\n },\n // if tab panel contains focusable elements, remove the tabindex attribute\n setContentTabIndex(ctx) {\n raf(() => {\n const panel = dom.getActiveContentEl(ctx)\n if (!panel) return\n const focusables = getFocusables(panel)\n if (focusables.length > 0) {\n panel.removeAttribute(\"tabindex\")\n } else {\n panel.setAttribute(\"tabindex\", \"0\")\n }\n })\n },\n cleanupObserver(ctx) {\n ctx.indicatorCleanup?.()\n },\n enableIndicatorTransition(ctx) {\n ctx.canIndicatorTransition = true\n },\n setIndicatorRect(ctx, evt) {\n const value = evt.id ?? ctx.value\n if (!ctx.isIndicatorRendered || !value) return\n\n const tabEl = dom.getTriggerEl(ctx, value)\n if (!tabEl) return\n\n ctx.indicatorRect = dom.getRectById(ctx, value)\n nextTick(() => {\n ctx.canIndicatorTransition = false\n })\n },\n syncIndicatorRect(ctx) {\n ctx.indicatorCleanup?.()\n\n const value = ctx.value\n if (!ctx.isIndicatorRendered || !value) return\n\n const tabEl = dom.getActiveTabEl(ctx)\n if (!tabEl) return\n\n ctx.indicatorCleanup = trackElementRect(tabEl, {\n getRect(el) {\n return dom.getOffsetRect(el)\n },\n onChange(rect) {\n ctx.indicatorRect = dom.resolveRect(rect, ctx.orientation)\n nextTick(() => {\n ctx.canIndicatorTransition = false\n })\n },\n })\n },\n },\n },\n )\n}\n\n// function to push value array and remove previous instances of value\nfunction pushUnique(arr: string[], value: any) {\n const newArr = Array.from(arr).slice()\n const index = newArr.indexOf(value)\n if (index > -1) {\n newArr.splice(index, 1)\n }\n newArr.push(value)\n return newArr\n}\n"],"mappings":"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","names":["import_dom_query","import_dom_query","import_utils","ctx"]}
|