@zag-js/tabs 0.1.10 → 0.1.13
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/LICENSE +21 -0
- package/dist/index.d.ts +115 -3
- package/dist/index.js +208 -235
- package/dist/index.mjs +203 -238
- package/package.json +12 -11
- package/dist/tabs.connect.d.ts +0 -17
- package/dist/tabs.dom.d.ts +0 -46
- package/dist/tabs.machine.d.ts +0 -2
- package/dist/tabs.types.d.ts +0 -120
package/dist/index.mjs
CHANGED
|
@@ -1,45 +1,11 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
-
var __spreadValues = (a, b) => {
|
|
7
|
-
for (var prop in b || (b = {}))
|
|
8
|
-
if (__hasOwnProp.call(b, prop))
|
|
9
|
-
__defNormalProp(a, prop, b[prop]);
|
|
10
|
-
if (__getOwnPropSymbols)
|
|
11
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
-
if (__propIsEnum.call(b, prop))
|
|
13
|
-
__defNormalProp(a, prop, b[prop]);
|
|
14
|
-
}
|
|
15
|
-
return a;
|
|
16
|
-
};
|
|
17
|
-
|
|
18
1
|
// ../../utilities/dom/dist/index.mjs
|
|
19
|
-
var __defProp2 = Object.defineProperty;
|
|
20
|
-
var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
|
|
21
|
-
var __hasOwnProp2 = Object.prototype.hasOwnProperty;
|
|
22
|
-
var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
|
|
23
|
-
var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
24
|
-
var __spreadValues2 = (a, b) => {
|
|
25
|
-
for (var prop in b || (b = {}))
|
|
26
|
-
if (__hasOwnProp2.call(b, prop))
|
|
27
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
28
|
-
if (__getOwnPropSymbols2)
|
|
29
|
-
for (var prop of __getOwnPropSymbols2(b)) {
|
|
30
|
-
if (__propIsEnum2.call(b, prop))
|
|
31
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
32
|
-
}
|
|
33
|
-
return a;
|
|
34
|
-
};
|
|
35
2
|
var dataAttr = (guard) => {
|
|
36
3
|
return guard ? "" : void 0;
|
|
37
4
|
};
|
|
38
5
|
var isDom = () => typeof window !== "undefined";
|
|
39
6
|
function getPlatform() {
|
|
40
|
-
var _a;
|
|
41
7
|
const agent = navigator.userAgentData;
|
|
42
|
-
return (
|
|
8
|
+
return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
|
|
43
9
|
}
|
|
44
10
|
var pt = (v) => isDom() && v.test(getPlatform());
|
|
45
11
|
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
@@ -55,28 +21,27 @@ function isFrame(element) {
|
|
|
55
21
|
return element.localName === "iframe";
|
|
56
22
|
}
|
|
57
23
|
function getDocument(el) {
|
|
58
|
-
var _a;
|
|
59
24
|
if (isWindow(el))
|
|
60
25
|
return el.document;
|
|
61
26
|
if (isDocument(el))
|
|
62
27
|
return el;
|
|
63
|
-
return (
|
|
28
|
+
return (el == null ? void 0 : el.ownerDocument) ?? document;
|
|
64
29
|
}
|
|
65
30
|
function defineDomHelpers(helpers) {
|
|
66
31
|
const dom2 = {
|
|
67
32
|
getRootNode: (ctx) => {
|
|
68
|
-
var _a, _b;
|
|
69
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
70
|
-
},
|
|
71
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
72
|
-
getWin: (ctx) => {
|
|
73
33
|
var _a;
|
|
74
|
-
return (_a =
|
|
34
|
+
return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
|
|
75
35
|
},
|
|
36
|
+
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
37
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
76
38
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
77
39
|
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
78
40
|
};
|
|
79
|
-
return
|
|
41
|
+
return {
|
|
42
|
+
...dom2,
|
|
43
|
+
...helpers
|
|
44
|
+
};
|
|
80
45
|
}
|
|
81
46
|
function isHTMLElement(v) {
|
|
82
47
|
return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
|
|
@@ -111,9 +76,7 @@ function isFocusable(element) {
|
|
|
111
76
|
}
|
|
112
77
|
var rtlKeyMap = {
|
|
113
78
|
ArrowLeft: "ArrowRight",
|
|
114
|
-
ArrowRight: "ArrowLeft"
|
|
115
|
-
Home: "End",
|
|
116
|
-
End: "Home"
|
|
79
|
+
ArrowRight: "ArrowLeft"
|
|
117
80
|
};
|
|
118
81
|
var sameKeyMap = {
|
|
119
82
|
Up: "ArrowUp",
|
|
@@ -125,10 +88,9 @@ var sameKeyMap = {
|
|
|
125
88
|
Right: "ArrowRight"
|
|
126
89
|
};
|
|
127
90
|
function getEventKey(event, options = {}) {
|
|
128
|
-
var _a;
|
|
129
91
|
const { dir = "ltr", orientation = "horizontal" } = options;
|
|
130
92
|
let { key } = event;
|
|
131
|
-
key =
|
|
93
|
+
key = sameKeyMap[key] ?? key;
|
|
132
94
|
const isRtl = dir === "rtl" && orientation === "horizontal";
|
|
133
95
|
if (isRtl && key in rtlKeyMap) {
|
|
134
96
|
key = rtlKeyMap[key];
|
|
@@ -155,8 +117,7 @@ function raf(fn) {
|
|
|
155
117
|
};
|
|
156
118
|
}
|
|
157
119
|
function queryAll(root, selector) {
|
|
158
|
-
|
|
159
|
-
return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
|
|
120
|
+
return Array.from((root == null ? void 0 : root.querySelectorAll(selector)) ?? []);
|
|
160
121
|
}
|
|
161
122
|
function itemById(v, id) {
|
|
162
123
|
return v.find((node) => node.id === id);
|
|
@@ -185,24 +146,24 @@ var last = (v) => v[v.length - 1];
|
|
|
185
146
|
// src/tabs.dom.ts
|
|
186
147
|
var dom = defineDomHelpers({
|
|
187
148
|
getRootId: (ctx) => {
|
|
188
|
-
var _a
|
|
189
|
-
return (
|
|
149
|
+
var _a;
|
|
150
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `tabs:${ctx.id}`;
|
|
190
151
|
},
|
|
191
152
|
getTriggerGroupId: (ctx) => {
|
|
192
|
-
var _a
|
|
193
|
-
return (
|
|
153
|
+
var _a;
|
|
154
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.triggerGroup) ?? `tabs:${ctx.id}:trigger-group`;
|
|
194
155
|
},
|
|
195
156
|
getContentId: (ctx, id) => {
|
|
196
|
-
var _a
|
|
197
|
-
return (
|
|
157
|
+
var _a;
|
|
158
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.content) ?? `tabs:${ctx.id}:content-${id}`;
|
|
198
159
|
},
|
|
199
160
|
getContentGroupId: (ctx) => {
|
|
200
|
-
var _a
|
|
201
|
-
return (
|
|
161
|
+
var _a;
|
|
162
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.contentGroup) ?? `tabs:${ctx.id}:content-group`;
|
|
202
163
|
},
|
|
203
164
|
getTriggerId: (ctx, id) => {
|
|
204
|
-
var _a
|
|
205
|
-
return (
|
|
165
|
+
var _a;
|
|
166
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.trigger) ?? `tabs:${ctx.id}:trigger-${id}`;
|
|
206
167
|
},
|
|
207
168
|
getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
|
|
208
169
|
getTriggerGroupEl: (ctx) => dom.getById(ctx, dom.getTriggerGroupId(ctx)),
|
|
@@ -225,14 +186,13 @@ var dom = defineDomHelpers({
|
|
|
225
186
|
return dom.getById(ctx, id);
|
|
226
187
|
},
|
|
227
188
|
getRectById: (ctx, id) => {
|
|
228
|
-
var _a;
|
|
229
189
|
const empty = {
|
|
230
190
|
offsetLeft: 0,
|
|
231
191
|
offsetTop: 0,
|
|
232
192
|
offsetWidth: 0,
|
|
233
193
|
offsetHeight: 0
|
|
234
194
|
};
|
|
235
|
-
const tab =
|
|
195
|
+
const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
|
|
236
196
|
if (ctx.isVertical) {
|
|
237
197
|
return {
|
|
238
198
|
top: `${tab.offsetTop}px`,
|
|
@@ -375,15 +335,16 @@ function connect(state, send, normalize) {
|
|
|
375
335
|
id: dom.getIndicatorId(state.context),
|
|
376
336
|
"data-part": "indicator",
|
|
377
337
|
"data-orientation": state.context.orientation,
|
|
378
|
-
style:
|
|
338
|
+
style: {
|
|
379
339
|
"--transition-duration": "200ms",
|
|
380
340
|
"--transition-property": "left, right, top, bottom, width, height",
|
|
381
341
|
position: "absolute",
|
|
382
342
|
willChange: "var(--transition-property)",
|
|
383
343
|
transitionProperty: "var(--transition-property)",
|
|
384
344
|
transitionDuration: state.context.hasMeasuredRect ? "var(--transition-duration)" : "0ms",
|
|
385
|
-
transitionTimingFunction: "var(--transition-timing-function)"
|
|
386
|
-
|
|
345
|
+
transitionTimingFunction: "var(--transition-timing-function)",
|
|
346
|
+
...state.context.indicatorRect
|
|
347
|
+
}
|
|
387
348
|
})
|
|
388
349
|
};
|
|
389
350
|
}
|
|
@@ -392,198 +353,202 @@ function connect(state, send, normalize) {
|
|
|
392
353
|
import { createMachine, guards } from "@zag-js/core";
|
|
393
354
|
var { not } = guards;
|
|
394
355
|
function machine(ctx) {
|
|
395
|
-
return createMachine(
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
|
|
412
|
-
isVertical: (ctx2) => ctx2.orientation === "vertical"
|
|
413
|
-
},
|
|
414
|
-
created: ["setPrevSelectedTabs"],
|
|
415
|
-
watch: {
|
|
416
|
-
focusedValue: "invokeOnFocus",
|
|
417
|
-
value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"],
|
|
418
|
-
dir: ["clearMeasured", "setIndicatorRect"]
|
|
419
|
-
},
|
|
420
|
-
on: {
|
|
421
|
-
SET_VALUE: {
|
|
422
|
-
actions: "setValue"
|
|
356
|
+
return createMachine(
|
|
357
|
+
{
|
|
358
|
+
initial: "unknown",
|
|
359
|
+
context: {
|
|
360
|
+
dir: "ltr",
|
|
361
|
+
orientation: "horizontal",
|
|
362
|
+
activationMode: "automatic",
|
|
363
|
+
value: null,
|
|
364
|
+
focusedValue: null,
|
|
365
|
+
previousValues: [],
|
|
366
|
+
indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
|
|
367
|
+
hasMeasuredRect: false,
|
|
368
|
+
isIndicatorRendered: false,
|
|
369
|
+
loop: true,
|
|
370
|
+
messages: {},
|
|
371
|
+
...ctx
|
|
423
372
|
},
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
},
|
|
428
|
-
states: {
|
|
429
|
-
unknown: {
|
|
430
|
-
on: {
|
|
431
|
-
SETUP: {
|
|
432
|
-
target: "idle",
|
|
433
|
-
actions: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
|
|
434
|
-
}
|
|
435
|
-
}
|
|
373
|
+
computed: {
|
|
374
|
+
isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
|
|
375
|
+
isVertical: (ctx2) => ctx2.orientation === "vertical"
|
|
436
376
|
},
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
377
|
+
created: ["setPrevSelectedTabs"],
|
|
378
|
+
watch: {
|
|
379
|
+
focusedValue: "invokeOnFocus",
|
|
380
|
+
value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"],
|
|
381
|
+
dir: ["clearMeasured", "setIndicatorRect"]
|
|
382
|
+
},
|
|
383
|
+
on: {
|
|
384
|
+
SET_VALUE: {
|
|
385
|
+
actions: "setValue"
|
|
386
|
+
},
|
|
387
|
+
DELETE: {
|
|
388
|
+
actions: "deleteValue"
|
|
448
389
|
}
|
|
449
390
|
},
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
actions: "focusNextTab"
|
|
463
|
-
},
|
|
464
|
-
ARROW_UP: {
|
|
465
|
-
guard: "isVertical",
|
|
466
|
-
actions: "focusPrevTab"
|
|
467
|
-
},
|
|
468
|
-
ARROW_DOWN: {
|
|
469
|
-
guard: "isVertical",
|
|
470
|
-
actions: "focusNextTab"
|
|
471
|
-
},
|
|
472
|
-
HOME: {
|
|
473
|
-
actions: "focusFirstTab"
|
|
474
|
-
},
|
|
475
|
-
END: {
|
|
476
|
-
actions: "focusLastTab"
|
|
477
|
-
},
|
|
478
|
-
ENTER: {
|
|
479
|
-
guard: not("selectOnFocus"),
|
|
480
|
-
actions: "setValue"
|
|
481
|
-
},
|
|
482
|
-
TAB_FOCUS: [
|
|
483
|
-
{
|
|
391
|
+
states: {
|
|
392
|
+
unknown: {
|
|
393
|
+
on: {
|
|
394
|
+
SETUP: {
|
|
395
|
+
target: "idle",
|
|
396
|
+
actions: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
|
|
397
|
+
}
|
|
398
|
+
}
|
|
399
|
+
},
|
|
400
|
+
idle: {
|
|
401
|
+
on: {
|
|
402
|
+
TAB_FOCUS: {
|
|
484
403
|
guard: "selectOnFocus",
|
|
404
|
+
target: "focused",
|
|
485
405
|
actions: ["setFocusedValue", "setValue"]
|
|
486
406
|
},
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
407
|
+
TAB_CLICK: {
|
|
408
|
+
target: "focused",
|
|
409
|
+
actions: ["setFocusedValue", "setValue"]
|
|
410
|
+
}
|
|
411
|
+
}
|
|
412
|
+
},
|
|
413
|
+
focused: {
|
|
414
|
+
on: {
|
|
415
|
+
TAB_CLICK: {
|
|
416
|
+
target: "focused",
|
|
417
|
+
actions: ["setFocusedValue", "setValue"]
|
|
418
|
+
},
|
|
419
|
+
ARROW_LEFT: {
|
|
420
|
+
guard: "isHorizontal",
|
|
421
|
+
actions: "focusPrevTab"
|
|
422
|
+
},
|
|
423
|
+
ARROW_RIGHT: {
|
|
424
|
+
guard: "isHorizontal",
|
|
425
|
+
actions: "focusNextTab"
|
|
426
|
+
},
|
|
427
|
+
ARROW_UP: {
|
|
428
|
+
guard: "isVertical",
|
|
429
|
+
actions: "focusPrevTab"
|
|
430
|
+
},
|
|
431
|
+
ARROW_DOWN: {
|
|
432
|
+
guard: "isVertical",
|
|
433
|
+
actions: "focusNextTab"
|
|
434
|
+
},
|
|
435
|
+
HOME: {
|
|
436
|
+
actions: "focusFirstTab"
|
|
437
|
+
},
|
|
438
|
+
END: {
|
|
439
|
+
actions: "focusLastTab"
|
|
440
|
+
},
|
|
441
|
+
ENTER: {
|
|
442
|
+
guard: not("selectOnFocus"),
|
|
443
|
+
actions: "setValue"
|
|
444
|
+
},
|
|
445
|
+
TAB_FOCUS: [
|
|
446
|
+
{
|
|
447
|
+
guard: "selectOnFocus",
|
|
448
|
+
actions: ["setFocusedValue", "setValue"]
|
|
449
|
+
},
|
|
450
|
+
{ actions: "setFocusedValue" }
|
|
451
|
+
],
|
|
452
|
+
TAB_BLUR: {
|
|
453
|
+
target: "idle",
|
|
454
|
+
actions: "clearFocusedValue"
|
|
455
|
+
}
|
|
492
456
|
}
|
|
493
457
|
}
|
|
494
458
|
}
|
|
495
|
-
}
|
|
496
|
-
}, {
|
|
497
|
-
guards: {
|
|
498
|
-
isVertical: (ctx2) => ctx2.isVertical,
|
|
499
|
-
isHorizontal: (ctx2) => ctx2.isHorizontal,
|
|
500
|
-
selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
|
|
501
459
|
},
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
ctx2
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
ctx2.focusedValue = null;
|
|
508
|
-
},
|
|
509
|
-
setValue(ctx2, evt) {
|
|
510
|
-
ctx2.value = evt.value;
|
|
511
|
-
},
|
|
512
|
-
invokeOnDelete(ctx2, evt) {
|
|
513
|
-
var _a;
|
|
514
|
-
(_a = ctx2.onDelete) == null ? void 0 : _a.call(ctx2, { value: evt.value });
|
|
515
|
-
},
|
|
516
|
-
focusFirstTab(ctx2) {
|
|
517
|
-
raf(() => {
|
|
518
|
-
var _a;
|
|
519
|
-
return (_a = dom.getFirstEl(ctx2)) == null ? void 0 : _a.focus();
|
|
520
|
-
});
|
|
460
|
+
{
|
|
461
|
+
guards: {
|
|
462
|
+
isVertical: (ctx2) => ctx2.isVertical,
|
|
463
|
+
isHorizontal: (ctx2) => ctx2.isHorizontal,
|
|
464
|
+
selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
|
|
521
465
|
},
|
|
522
|
-
|
|
523
|
-
|
|
466
|
+
actions: {
|
|
467
|
+
setFocusedValue(ctx2, evt) {
|
|
468
|
+
ctx2.focusedValue = evt.value;
|
|
469
|
+
},
|
|
470
|
+
clearFocusedValue(ctx2) {
|
|
471
|
+
ctx2.focusedValue = null;
|
|
472
|
+
},
|
|
473
|
+
setValue(ctx2, evt) {
|
|
474
|
+
ctx2.value = evt.value;
|
|
475
|
+
},
|
|
476
|
+
invokeOnDelete(ctx2, evt) {
|
|
524
477
|
var _a;
|
|
525
|
-
|
|
526
|
-
}
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
nextTick(() => {
|
|
542
|
-
if (!ctx2.isIndicatorRendered || !ctx2.value)
|
|
478
|
+
(_a = ctx2.onDelete) == null ? void 0 : _a.call(ctx2, { value: evt.value });
|
|
479
|
+
},
|
|
480
|
+
focusFirstTab(ctx2) {
|
|
481
|
+
raf(() => {
|
|
482
|
+
var _a;
|
|
483
|
+
return (_a = dom.getFirstEl(ctx2)) == null ? void 0 : _a.focus();
|
|
484
|
+
});
|
|
485
|
+
},
|
|
486
|
+
focusLastTab(ctx2) {
|
|
487
|
+
raf(() => {
|
|
488
|
+
var _a;
|
|
489
|
+
return (_a = dom.getLastEl(ctx2)) == null ? void 0 : _a.focus();
|
|
490
|
+
});
|
|
491
|
+
},
|
|
492
|
+
focusNextTab(ctx2) {
|
|
493
|
+
if (!ctx2.focusedValue)
|
|
543
494
|
return;
|
|
544
|
-
|
|
545
|
-
|
|
495
|
+
const next = dom.getNextEl(ctx2, ctx2.focusedValue);
|
|
496
|
+
raf(() => next == null ? void 0 : next.focus());
|
|
497
|
+
},
|
|
498
|
+
focusPrevTab(ctx2) {
|
|
499
|
+
if (!ctx2.focusedValue)
|
|
546
500
|
return;
|
|
501
|
+
const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
|
|
502
|
+
raf(() => prev == null ? void 0 : prev.focus());
|
|
503
|
+
},
|
|
504
|
+
setIndicatorRect(ctx2) {
|
|
547
505
|
nextTick(() => {
|
|
548
|
-
ctx2.
|
|
506
|
+
if (!ctx2.isIndicatorRendered || !ctx2.value)
|
|
507
|
+
return;
|
|
508
|
+
ctx2.indicatorRect = dom.getRectById(ctx2, ctx2.value);
|
|
509
|
+
if (ctx2.hasMeasuredRect)
|
|
510
|
+
return;
|
|
511
|
+
nextTick(() => {
|
|
512
|
+
ctx2.hasMeasuredRect = true;
|
|
513
|
+
});
|
|
549
514
|
});
|
|
550
|
-
}
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
ctx2.previousValues = Array.from(new Set(newSelected));
|
|
570
|
-
}
|
|
571
|
-
},
|
|
572
|
-
setContentTabIndex(ctx2) {
|
|
573
|
-
raf(() => {
|
|
574
|
-
const panel = dom.getActiveContentEl(ctx2);
|
|
575
|
-
if (!panel)
|
|
576
|
-
return;
|
|
577
|
-
const focusables = getFocusables(panel);
|
|
578
|
-
if (focusables.length > 0) {
|
|
579
|
-
panel.removeAttribute("tabindex");
|
|
580
|
-
} else {
|
|
581
|
-
panel.setAttribute("tabindex", "0");
|
|
515
|
+
},
|
|
516
|
+
checkRenderedElements(ctx2) {
|
|
517
|
+
ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
|
|
518
|
+
},
|
|
519
|
+
clearMeasured(ctx2) {
|
|
520
|
+
ctx2.hasMeasuredRect = false;
|
|
521
|
+
},
|
|
522
|
+
invokeOnChange(ctx2) {
|
|
523
|
+
var _a;
|
|
524
|
+
(_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
|
|
525
|
+
},
|
|
526
|
+
invokeOnFocus(ctx2) {
|
|
527
|
+
var _a;
|
|
528
|
+
(_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, { value: ctx2.focusedValue });
|
|
529
|
+
},
|
|
530
|
+
setPrevSelectedTabs(ctx2) {
|
|
531
|
+
if (ctx2.value != null) {
|
|
532
|
+
const newSelected = Array.from(ctx2.previousValues).concat(ctx2.value);
|
|
533
|
+
ctx2.previousValues = Array.from(new Set(newSelected));
|
|
582
534
|
}
|
|
583
|
-
}
|
|
535
|
+
},
|
|
536
|
+
setContentTabIndex(ctx2) {
|
|
537
|
+
raf(() => {
|
|
538
|
+
const panel = dom.getActiveContentEl(ctx2);
|
|
539
|
+
if (!panel)
|
|
540
|
+
return;
|
|
541
|
+
const focusables = getFocusables(panel);
|
|
542
|
+
if (focusables.length > 0) {
|
|
543
|
+
panel.removeAttribute("tabindex");
|
|
544
|
+
} else {
|
|
545
|
+
panel.setAttribute("tabindex", "0");
|
|
546
|
+
}
|
|
547
|
+
});
|
|
548
|
+
}
|
|
584
549
|
}
|
|
585
550
|
}
|
|
586
|
-
|
|
551
|
+
);
|
|
587
552
|
}
|
|
588
553
|
export {
|
|
589
554
|
connect,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/tabs",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.13",
|
|
4
4
|
"description": "Core logic for the tabs widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -29,20 +29,21 @@
|
|
|
29
29
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@zag-js/core": "0.1.
|
|
33
|
-
"@zag-js/types": "0.2.
|
|
32
|
+
"@zag-js/core": "0.1.10",
|
|
33
|
+
"@zag-js/types": "0.2.5"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@zag-js/dom-utils": "0.1.
|
|
37
|
-
"@zag-js/utils": "0.1.
|
|
36
|
+
"@zag-js/dom-utils": "0.1.11",
|
|
37
|
+
"@zag-js/utils": "0.1.4"
|
|
38
38
|
},
|
|
39
39
|
"scripts": {
|
|
40
|
-
"build
|
|
41
|
-
"start": "
|
|
42
|
-
"build": "
|
|
40
|
+
"build-fast": "tsup src/index.ts --format=esm,cjs",
|
|
41
|
+
"start": "pnpm build --watch",
|
|
42
|
+
"build": "tsup src/index.ts --format=esm,cjs --dts",
|
|
43
43
|
"test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
|
|
44
44
|
"lint": "eslint src --ext .ts,.tsx",
|
|
45
|
-
"test
|
|
46
|
-
"test
|
|
45
|
+
"test-ci": "pnpm test --ci --runInBand",
|
|
46
|
+
"test-watch": "pnpm test --watch -u",
|
|
47
|
+
"typecheck": "tsc --noEmit"
|
|
47
48
|
}
|
|
48
|
-
}
|
|
49
|
+
}
|
package/dist/tabs.connect.d.ts
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import type { NormalizeProps, PropTypes } from "@zag-js/types";
|
|
2
|
-
import type { Send, State, TabProps } from "./tabs.types";
|
|
3
|
-
export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
|
|
4
|
-
value: string;
|
|
5
|
-
focusedValue: string;
|
|
6
|
-
previousValues: string[];
|
|
7
|
-
setValue(value: string): void;
|
|
8
|
-
rootProps: T["element"];
|
|
9
|
-
triggerGroupProps: T["element"];
|
|
10
|
-
getTriggerProps(props: TabProps): T["button"];
|
|
11
|
-
contentGroupProps: T["element"];
|
|
12
|
-
getContentProps({ value }: {
|
|
13
|
-
value: string;
|
|
14
|
-
}): T["element"];
|
|
15
|
-
getDeleteButtonProps({ value, disabled }: TabProps): T["button"];
|
|
16
|
-
indicatorProps: T["element"];
|
|
17
|
-
};
|
package/dist/tabs.dom.d.ts
DELETED
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import type { MachineContext as Ctx } from "./tabs.types";
|
|
2
|
-
export declare const dom: {
|
|
3
|
-
getRootNode: (ctx: {
|
|
4
|
-
getRootNode?: () => Node | Document | ShadowRoot;
|
|
5
|
-
}) => Document | ShadowRoot;
|
|
6
|
-
getDoc: (ctx: {
|
|
7
|
-
getRootNode?: () => Node | Document | ShadowRoot;
|
|
8
|
-
}) => Document;
|
|
9
|
-
getWin: (ctx: {
|
|
10
|
-
getRootNode?: () => Node | Document | ShadowRoot;
|
|
11
|
-
}) => Window & typeof globalThis;
|
|
12
|
-
getActiveElement: (ctx: {
|
|
13
|
-
getRootNode?: () => Node | Document | ShadowRoot;
|
|
14
|
-
}) => HTMLElement;
|
|
15
|
-
getById: <T_1 = HTMLElement>(ctx: {
|
|
16
|
-
getRootNode?: () => Node | Document | ShadowRoot;
|
|
17
|
-
}, id: string) => T_1;
|
|
18
|
-
} & {
|
|
19
|
-
getRootId: (ctx: Ctx) => string;
|
|
20
|
-
getTriggerGroupId: (ctx: Ctx) => string;
|
|
21
|
-
getContentId: (ctx: Ctx, id: string) => string;
|
|
22
|
-
getContentGroupId: (ctx: Ctx) => string;
|
|
23
|
-
getTriggerId: (ctx: Ctx, id: string) => string;
|
|
24
|
-
getIndicatorId: (ctx: Ctx) => string;
|
|
25
|
-
getTriggerGroupEl: (ctx: Ctx) => HTMLElement;
|
|
26
|
-
getContentEl: (ctx: Ctx, id: string) => HTMLElement;
|
|
27
|
-
getTriggerEl: (ctx: Ctx, id: string) => HTMLElement;
|
|
28
|
-
getIndicatorEl: (ctx: Ctx) => HTMLElement;
|
|
29
|
-
getElements: (ctx: Ctx) => HTMLElement[];
|
|
30
|
-
getFirstEl: (ctx: Ctx) => HTMLElement;
|
|
31
|
-
getLastEl: (ctx: Ctx) => HTMLElement;
|
|
32
|
-
getNextEl: (ctx: Ctx, id: string) => HTMLElement;
|
|
33
|
-
getPrevEl: (ctx: Ctx, id: string) => HTMLElement;
|
|
34
|
-
getActiveContentEl: (ctx: Ctx) => HTMLElement;
|
|
35
|
-
getRectById: (ctx: Ctx, id: string) => {
|
|
36
|
-
top: string;
|
|
37
|
-
height: string;
|
|
38
|
-
left?: undefined;
|
|
39
|
-
width?: undefined;
|
|
40
|
-
} | {
|
|
41
|
-
left: string;
|
|
42
|
-
width: string;
|
|
43
|
-
top?: undefined;
|
|
44
|
-
height?: undefined;
|
|
45
|
-
};
|
|
46
|
-
};
|
package/dist/tabs.machine.d.ts
DELETED