@zag-js/tabs 0.2.5 → 0.2.6
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/chunk-7NYLYFDJ.mjs +285 -0
- package/dist/chunk-7VZIDZFW.mjs +163 -0
- package/dist/chunk-ISJ7TQVV.mjs +186 -0
- package/dist/chunk-S2KW2DT4.mjs +9 -0
- package/dist/index.d.ts +7 -963
- package/dist/index.js +30 -14
- package/dist/index.mjs +10 -594
- package/dist/tabs.anatomy.d.ts +6 -0
- package/dist/tabs.anatomy.js +34 -0
- package/dist/tabs.anatomy.mjs +8 -0
- package/dist/tabs.connect.d.ts +21 -0
- package/dist/tabs.connect.js +356 -0
- package/dist/tabs.connect.mjs +8 -0
- package/dist/tabs.dom.d.ts +55 -0
- package/dist/tabs.dom.js +175 -0
- package/dist/tabs.dom.mjs +6 -0
- package/dist/tabs.machine.d.ts +7 -0
- package/dist/tabs.machine.js +459 -0
- package/dist/tabs.machine.mjs +7 -0
- package/dist/tabs.types.d.ts +95 -0
- package/dist/tabs.types.js +18 -0
- package/dist/tabs.types.mjs +0 -0
- package/package.json +21 -11
package/dist/index.js
CHANGED
|
@@ -31,10 +31,29 @@ var import_anatomy = require("@zag-js/anatomy");
|
|
|
31
31
|
var anatomy = (0, import_anatomy.createAnatomy)("tabs").parts("root", "tablist", "trigger", "contentGroup", "content", "indicator");
|
|
32
32
|
var parts = anatomy.build();
|
|
33
33
|
|
|
34
|
-
// ../../utilities/dom/
|
|
34
|
+
// ../../utilities/dom/src/attrs.ts
|
|
35
35
|
var dataAttr = (guard) => {
|
|
36
36
|
return guard ? "" : void 0;
|
|
37
37
|
};
|
|
38
|
+
|
|
39
|
+
// ../../utilities/core/src/array.ts
|
|
40
|
+
var first = (v) => v[0];
|
|
41
|
+
var last = (v) => v[v.length - 1];
|
|
42
|
+
|
|
43
|
+
// ../../utilities/core/src/guard.ts
|
|
44
|
+
var isArray = (v) => Array.isArray(v);
|
|
45
|
+
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
46
|
+
|
|
47
|
+
// ../../utilities/core/src/object.ts
|
|
48
|
+
function compact(obj) {
|
|
49
|
+
if (obj === void 0)
|
|
50
|
+
return obj;
|
|
51
|
+
return Object.fromEntries(
|
|
52
|
+
Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
// ../../utilities/dom/src/platform.ts
|
|
38
57
|
var isDom = () => typeof window !== "undefined";
|
|
39
58
|
function getPlatform() {
|
|
40
59
|
var _a;
|
|
@@ -45,6 +64,8 @@ var pt = (v) => isDom() && v.test(getPlatform());
|
|
|
45
64
|
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
46
65
|
var isSafari = () => isApple() && vn(/apple/i);
|
|
47
66
|
var isApple = () => pt(/mac|iphone|ipad|ipod/i);
|
|
67
|
+
|
|
68
|
+
// ../../utilities/dom/src/query.ts
|
|
48
69
|
function isDocument(el) {
|
|
49
70
|
return el.nodeType === Node.DOCUMENT_NODE;
|
|
50
71
|
}
|
|
@@ -107,6 +128,8 @@ function isVisible(el) {
|
|
|
107
128
|
return false;
|
|
108
129
|
return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
|
|
109
130
|
}
|
|
131
|
+
|
|
132
|
+
// ../../utilities/dom/src/focusable.ts
|
|
110
133
|
var focusableSelector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false']), details > summary:first-of-type";
|
|
111
134
|
var getFocusables = (container, includeContainer = false) => {
|
|
112
135
|
if (!container)
|
|
@@ -130,6 +153,8 @@ function isFocusable(element) {
|
|
|
130
153
|
return false;
|
|
131
154
|
return element.matches(focusableSelector) && isVisible(element);
|
|
132
155
|
}
|
|
156
|
+
|
|
157
|
+
// ../../utilities/dom/src/keyboard-event.ts
|
|
133
158
|
var rtlKeyMap = {
|
|
134
159
|
ArrowLeft: "ArrowRight",
|
|
135
160
|
ArrowRight: "ArrowLeft"
|
|
@@ -154,6 +179,8 @@ function getEventKey(event, options = {}) {
|
|
|
154
179
|
}
|
|
155
180
|
return key;
|
|
156
181
|
}
|
|
182
|
+
|
|
183
|
+
// ../../utilities/dom/src/next-tick.ts
|
|
157
184
|
function nextTick(fn) {
|
|
158
185
|
const set = /* @__PURE__ */ new Set();
|
|
159
186
|
function raf2(fn2) {
|
|
@@ -173,6 +200,8 @@ function raf(fn) {
|
|
|
173
200
|
globalThis.cancelAnimationFrame(id);
|
|
174
201
|
};
|
|
175
202
|
}
|
|
203
|
+
|
|
204
|
+
// ../../utilities/dom/src/nodelist.ts
|
|
176
205
|
function queryAll(root, selector) {
|
|
177
206
|
var _a;
|
|
178
207
|
return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
|
|
@@ -197,19 +226,6 @@ function prevById(v, id, loop = true) {
|
|
|
197
226
|
return v[idx];
|
|
198
227
|
}
|
|
199
228
|
|
|
200
|
-
// ../../utilities/core/dist/index.mjs
|
|
201
|
-
var first = (v) => v[0];
|
|
202
|
-
var last = (v) => v[v.length - 1];
|
|
203
|
-
var isArray = (v) => Array.isArray(v);
|
|
204
|
-
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
205
|
-
function compact(obj) {
|
|
206
|
-
if (obj === void 0)
|
|
207
|
-
return obj;
|
|
208
|
-
return Object.fromEntries(
|
|
209
|
-
Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
|
|
210
|
-
);
|
|
211
|
-
}
|
|
212
|
-
|
|
213
229
|
// src/tabs.dom.ts
|
|
214
230
|
var dom = defineDomHelpers({
|
|
215
231
|
getRootId: (ctx) => {
|
package/dist/index.mjs
CHANGED
|
@@ -1,597 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
function getPlatform() {
|
|
12
|
-
var _a;
|
|
13
|
-
const agent = navigator.userAgentData;
|
|
14
|
-
return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
|
|
15
|
-
}
|
|
16
|
-
var pt = (v) => isDom() && v.test(getPlatform());
|
|
17
|
-
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
18
|
-
var isSafari = () => isApple() && vn(/apple/i);
|
|
19
|
-
var isApple = () => pt(/mac|iphone|ipad|ipod/i);
|
|
20
|
-
function isDocument(el) {
|
|
21
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
22
|
-
}
|
|
23
|
-
function isWindow(value) {
|
|
24
|
-
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
25
|
-
}
|
|
26
|
-
function isFrame(element) {
|
|
27
|
-
return element.localName === "iframe";
|
|
28
|
-
}
|
|
29
|
-
function getDocument(el) {
|
|
30
|
-
var _a;
|
|
31
|
-
if (isWindow(el))
|
|
32
|
-
return el.document;
|
|
33
|
-
if (isDocument(el))
|
|
34
|
-
return el;
|
|
35
|
-
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
36
|
-
}
|
|
37
|
-
function defineDomHelpers(helpers) {
|
|
38
|
-
const dom2 = {
|
|
39
|
-
getRootNode: (ctx) => {
|
|
40
|
-
var _a, _b;
|
|
41
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
42
|
-
},
|
|
43
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
44
|
-
getWin: (ctx) => {
|
|
45
|
-
var _a;
|
|
46
|
-
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
47
|
-
},
|
|
48
|
-
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
49
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
|
|
50
|
-
createEmitter: (ctx, target) => {
|
|
51
|
-
const win = dom2.getWin(ctx);
|
|
52
|
-
return function emit(evt, detail, options) {
|
|
53
|
-
const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
|
|
54
|
-
const eventName = `zag:${evt}`;
|
|
55
|
-
const init = { bubbles, cancelable, composed, detail };
|
|
56
|
-
const event = new win.CustomEvent(eventName, init);
|
|
57
|
-
target.dispatchEvent(event);
|
|
58
|
-
};
|
|
59
|
-
},
|
|
60
|
-
createListener: (target) => {
|
|
61
|
-
return function listen(evt, handler) {
|
|
62
|
-
const eventName = `zag:${evt}`;
|
|
63
|
-
const listener = (e) => handler(e);
|
|
64
|
-
target.addEventListener(eventName, listener);
|
|
65
|
-
return () => target.removeEventListener(eventName, listener);
|
|
66
|
-
};
|
|
67
|
-
}
|
|
68
|
-
};
|
|
69
|
-
return {
|
|
70
|
-
...dom2,
|
|
71
|
-
...helpers
|
|
72
|
-
};
|
|
73
|
-
}
|
|
74
|
-
function isHTMLElement(v) {
|
|
75
|
-
return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
|
|
76
|
-
}
|
|
77
|
-
function isVisible(el) {
|
|
78
|
-
if (!isHTMLElement(el))
|
|
79
|
-
return false;
|
|
80
|
-
return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
|
|
81
|
-
}
|
|
82
|
-
var focusableSelector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false']), details > summary:first-of-type";
|
|
83
|
-
var getFocusables = (container, includeContainer = false) => {
|
|
84
|
-
if (!container)
|
|
85
|
-
return [];
|
|
86
|
-
const elements = Array.from(container.querySelectorAll(focusableSelector));
|
|
87
|
-
const include = includeContainer == true || includeContainer == "if-empty" && elements.length === 0;
|
|
88
|
-
if (include && isHTMLElement(container) && isFocusable(container)) {
|
|
89
|
-
elements.unshift(container);
|
|
90
|
-
}
|
|
91
|
-
const focusableElements = elements.filter(isFocusable);
|
|
92
|
-
focusableElements.forEach((element, i) => {
|
|
93
|
-
if (isFrame(element) && element.contentDocument) {
|
|
94
|
-
const frameBody = element.contentDocument.body;
|
|
95
|
-
focusableElements.splice(i, 1, ...getFocusables(frameBody));
|
|
96
|
-
}
|
|
97
|
-
});
|
|
98
|
-
return focusableElements;
|
|
99
|
-
};
|
|
100
|
-
function isFocusable(element) {
|
|
101
|
-
if (!element)
|
|
102
|
-
return false;
|
|
103
|
-
return element.matches(focusableSelector) && isVisible(element);
|
|
104
|
-
}
|
|
105
|
-
var rtlKeyMap = {
|
|
106
|
-
ArrowLeft: "ArrowRight",
|
|
107
|
-
ArrowRight: "ArrowLeft"
|
|
108
|
-
};
|
|
109
|
-
var sameKeyMap = {
|
|
110
|
-
Up: "ArrowUp",
|
|
111
|
-
Down: "ArrowDown",
|
|
112
|
-
Esc: "Escape",
|
|
113
|
-
" ": "Space",
|
|
114
|
-
",": "Comma",
|
|
115
|
-
Left: "ArrowLeft",
|
|
116
|
-
Right: "ArrowRight"
|
|
117
|
-
};
|
|
118
|
-
function getEventKey(event, options = {}) {
|
|
119
|
-
var _a;
|
|
120
|
-
const { dir = "ltr", orientation = "horizontal" } = options;
|
|
121
|
-
let { key } = event;
|
|
122
|
-
key = (_a = sameKeyMap[key]) != null ? _a : key;
|
|
123
|
-
const isRtl = dir === "rtl" && orientation === "horizontal";
|
|
124
|
-
if (isRtl && key in rtlKeyMap) {
|
|
125
|
-
key = rtlKeyMap[key];
|
|
126
|
-
}
|
|
127
|
-
return key;
|
|
128
|
-
}
|
|
129
|
-
function nextTick(fn) {
|
|
130
|
-
const set = /* @__PURE__ */ new Set();
|
|
131
|
-
function raf2(fn2) {
|
|
132
|
-
const id = globalThis.requestAnimationFrame(fn2);
|
|
133
|
-
set.add(() => globalThis.cancelAnimationFrame(id));
|
|
134
|
-
}
|
|
135
|
-
raf2(() => raf2(fn));
|
|
136
|
-
return function cleanup() {
|
|
137
|
-
set.forEach(function(fn2) {
|
|
138
|
-
fn2();
|
|
139
|
-
});
|
|
140
|
-
};
|
|
141
|
-
}
|
|
142
|
-
function raf(fn) {
|
|
143
|
-
const id = globalThis.requestAnimationFrame(fn);
|
|
144
|
-
return function cleanup() {
|
|
145
|
-
globalThis.cancelAnimationFrame(id);
|
|
146
|
-
};
|
|
147
|
-
}
|
|
148
|
-
function queryAll(root, selector) {
|
|
149
|
-
var _a;
|
|
150
|
-
return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
|
|
151
|
-
}
|
|
152
|
-
function itemById(v, id) {
|
|
153
|
-
return v.find((node) => node.id === id);
|
|
154
|
-
}
|
|
155
|
-
function indexOfId(v, id) {
|
|
156
|
-
const item = itemById(v, id);
|
|
157
|
-
return item ? v.indexOf(item) : -1;
|
|
158
|
-
}
|
|
159
|
-
function nextById(v, id, loop = true) {
|
|
160
|
-
let idx = indexOfId(v, id);
|
|
161
|
-
idx = loop ? (idx + 1) % v.length : Math.min(idx + 1, v.length - 1);
|
|
162
|
-
return v[idx];
|
|
163
|
-
}
|
|
164
|
-
function prevById(v, id, loop = true) {
|
|
165
|
-
let idx = indexOfId(v, id);
|
|
166
|
-
if (idx === -1)
|
|
167
|
-
return loop ? v[v.length - 1] : null;
|
|
168
|
-
idx = loop ? (idx - 1 + v.length) % v.length : Math.max(0, idx - 1);
|
|
169
|
-
return v[idx];
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
// ../../utilities/core/dist/index.mjs
|
|
173
|
-
var first = (v) => v[0];
|
|
174
|
-
var last = (v) => v[v.length - 1];
|
|
175
|
-
var isArray = (v) => Array.isArray(v);
|
|
176
|
-
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
177
|
-
function compact(obj) {
|
|
178
|
-
if (obj === void 0)
|
|
179
|
-
return obj;
|
|
180
|
-
return Object.fromEntries(
|
|
181
|
-
Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
|
|
182
|
-
);
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
// src/tabs.dom.ts
|
|
186
|
-
var dom = defineDomHelpers({
|
|
187
|
-
getRootId: (ctx) => {
|
|
188
|
-
var _a, _b;
|
|
189
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `tabs:${ctx.id}`;
|
|
190
|
-
},
|
|
191
|
-
getTablistId: (ctx) => {
|
|
192
|
-
var _a, _b;
|
|
193
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.tablist) != null ? _b : `tabs:${ctx.id}:list`;
|
|
194
|
-
},
|
|
195
|
-
getContentId: (ctx, id) => {
|
|
196
|
-
var _a, _b;
|
|
197
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tabs:${ctx.id}:content-${id}`;
|
|
198
|
-
},
|
|
199
|
-
getContentGroupId: (ctx) => {
|
|
200
|
-
var _a, _b;
|
|
201
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.contentGroup) != null ? _b : `tabs:${ctx.id}:content-group`;
|
|
202
|
-
},
|
|
203
|
-
getTriggerId: (ctx, id) => {
|
|
204
|
-
var _a, _b;
|
|
205
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tabs:${ctx.id}:trigger-${id}`;
|
|
206
|
-
},
|
|
207
|
-
getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
|
|
208
|
-
getTablistEl: (ctx) => dom.getById(ctx, dom.getTablistId(ctx)),
|
|
209
|
-
getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
|
|
210
|
-
getTriggerEl: (ctx, id) => dom.getById(ctx, dom.getTriggerId(ctx, id)),
|
|
211
|
-
getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
|
|
212
|
-
getElements: (ctx) => {
|
|
213
|
-
const ownerId = CSS.escape(dom.getTablistId(ctx));
|
|
214
|
-
const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`;
|
|
215
|
-
return queryAll(dom.getTablistEl(ctx), selector);
|
|
216
|
-
},
|
|
217
|
-
getFirstEl: (ctx) => first(dom.getElements(ctx)),
|
|
218
|
-
getLastEl: (ctx) => last(dom.getElements(ctx)),
|
|
219
|
-
getNextEl: (ctx, id) => nextById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),
|
|
220
|
-
getPrevEl: (ctx, id) => prevById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),
|
|
221
|
-
getActiveContentEl: (ctx) => {
|
|
222
|
-
if (!ctx.value)
|
|
223
|
-
return;
|
|
224
|
-
const id = dom.getContentId(ctx, ctx.value);
|
|
225
|
-
return dom.getById(ctx, id);
|
|
226
|
-
},
|
|
227
|
-
getRectById: (ctx, id) => {
|
|
228
|
-
var _a;
|
|
229
|
-
const empty = {
|
|
230
|
-
offsetLeft: 0,
|
|
231
|
-
offsetTop: 0,
|
|
232
|
-
offsetWidth: 0,
|
|
233
|
-
offsetHeight: 0
|
|
234
|
-
};
|
|
235
|
-
const tab = (_a = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id))) != null ? _a : empty;
|
|
236
|
-
if (ctx.isVertical) {
|
|
237
|
-
return {
|
|
238
|
-
top: `${tab.offsetTop}px`,
|
|
239
|
-
height: `${tab.offsetHeight}px`
|
|
240
|
-
};
|
|
241
|
-
}
|
|
242
|
-
return {
|
|
243
|
-
left: `${tab.offsetLeft}px`,
|
|
244
|
-
width: `${tab.offsetWidth}px`
|
|
245
|
-
};
|
|
246
|
-
}
|
|
247
|
-
});
|
|
248
|
-
|
|
249
|
-
// src/tabs.connect.ts
|
|
250
|
-
function connect(state, send, normalize) {
|
|
251
|
-
const translations = state.context.translations;
|
|
252
|
-
const isFocused = state.matches("focused");
|
|
253
|
-
return {
|
|
254
|
-
value: state.context.value,
|
|
255
|
-
focusedValue: state.context.focusedValue,
|
|
256
|
-
previousValues: Array.from(state.context.previousValues),
|
|
257
|
-
setValue(value) {
|
|
258
|
-
send({ type: "SET_VALUE", value });
|
|
259
|
-
},
|
|
260
|
-
clearValue() {
|
|
261
|
-
send({ type: "CLEAR_VALUE" });
|
|
262
|
-
},
|
|
263
|
-
rootProps: normalize.element({
|
|
264
|
-
...parts.root.attrs,
|
|
265
|
-
id: dom.getRootId(state.context),
|
|
266
|
-
"data-orientation": state.context.orientation,
|
|
267
|
-
"data-focus": dataAttr(isFocused),
|
|
268
|
-
dir: state.context.dir
|
|
269
|
-
}),
|
|
270
|
-
tablistProps: normalize.element({
|
|
271
|
-
...parts.tablist.attrs,
|
|
272
|
-
id: dom.getTablistId(state.context),
|
|
273
|
-
role: "tablist",
|
|
274
|
-
"data-focus": dataAttr(isFocused),
|
|
275
|
-
"aria-orientation": state.context.orientation,
|
|
276
|
-
"data-orientation": state.context.orientation,
|
|
277
|
-
"aria-label": translations.tablistLabel,
|
|
278
|
-
onKeyDown(event) {
|
|
279
|
-
const keyMap = {
|
|
280
|
-
ArrowDown() {
|
|
281
|
-
send("ARROW_DOWN");
|
|
282
|
-
},
|
|
283
|
-
ArrowUp() {
|
|
284
|
-
send("ARROW_UP");
|
|
285
|
-
},
|
|
286
|
-
ArrowLeft() {
|
|
287
|
-
send("ARROW_LEFT");
|
|
288
|
-
},
|
|
289
|
-
ArrowRight() {
|
|
290
|
-
send("ARROW_RIGHT");
|
|
291
|
-
},
|
|
292
|
-
Home() {
|
|
293
|
-
send("HOME");
|
|
294
|
-
},
|
|
295
|
-
End() {
|
|
296
|
-
send("END");
|
|
297
|
-
},
|
|
298
|
-
Enter() {
|
|
299
|
-
send({ type: "ENTER", value: state.context.focusedValue });
|
|
300
|
-
}
|
|
301
|
-
};
|
|
302
|
-
let key = getEventKey(event, state.context);
|
|
303
|
-
const exec = keyMap[key];
|
|
304
|
-
if (exec) {
|
|
305
|
-
event.preventDefault();
|
|
306
|
-
exec(event);
|
|
307
|
-
}
|
|
308
|
-
}
|
|
309
|
-
}),
|
|
310
|
-
getTriggerProps(props) {
|
|
311
|
-
const { value, disabled } = props;
|
|
312
|
-
const selected = state.context.value === value;
|
|
313
|
-
return normalize.button({
|
|
314
|
-
...parts.trigger.attrs,
|
|
315
|
-
role: "tab",
|
|
316
|
-
type: "button",
|
|
317
|
-
disabled,
|
|
318
|
-
"data-orientation": state.context.orientation,
|
|
319
|
-
"data-disabled": dataAttr(disabled),
|
|
320
|
-
"aria-disabled": disabled,
|
|
321
|
-
"data-value": value,
|
|
322
|
-
"aria-selected": selected,
|
|
323
|
-
"data-selected": dataAttr(selected),
|
|
324
|
-
"aria-controls": dom.getContentId(state.context, value),
|
|
325
|
-
"data-ownedby": dom.getTablistId(state.context),
|
|
326
|
-
id: dom.getTriggerId(state.context, value),
|
|
327
|
-
tabIndex: selected ? 0 : -1,
|
|
328
|
-
onFocus() {
|
|
329
|
-
send({ type: "TAB_FOCUS", value });
|
|
330
|
-
},
|
|
331
|
-
onBlur(event) {
|
|
332
|
-
const target = event.relatedTarget;
|
|
333
|
-
if ((target == null ? void 0 : target.getAttribute("role")) !== "tab") {
|
|
334
|
-
send({ type: "TAB_BLUR" });
|
|
335
|
-
}
|
|
336
|
-
},
|
|
337
|
-
onClick(event) {
|
|
338
|
-
if (disabled)
|
|
339
|
-
return;
|
|
340
|
-
if (isSafari()) {
|
|
341
|
-
event.currentTarget.focus();
|
|
342
|
-
}
|
|
343
|
-
send({ type: "TAB_CLICK", value });
|
|
344
|
-
}
|
|
345
|
-
});
|
|
346
|
-
},
|
|
347
|
-
contentGroupProps: normalize.element({
|
|
348
|
-
...parts.contentGroup.attrs,
|
|
349
|
-
id: dom.getContentGroupId(state.context),
|
|
350
|
-
"data-orientation": state.context.orientation
|
|
351
|
-
}),
|
|
352
|
-
getContentProps({ value }) {
|
|
353
|
-
const selected = state.context.value === value;
|
|
354
|
-
return normalize.element({
|
|
355
|
-
...parts.content.attrs,
|
|
356
|
-
id: dom.getContentId(state.context, value),
|
|
357
|
-
tabIndex: 0,
|
|
358
|
-
"aria-labelledby": dom.getTriggerId(state.context, value),
|
|
359
|
-
role: "tabpanel",
|
|
360
|
-
"data-ownedby": dom.getTablistId(state.context),
|
|
361
|
-
hidden: !selected
|
|
362
|
-
});
|
|
363
|
-
},
|
|
364
|
-
indicatorProps: normalize.element({
|
|
365
|
-
id: dom.getIndicatorId(state.context),
|
|
366
|
-
...parts.indicator.attrs,
|
|
367
|
-
"data-orientation": state.context.orientation,
|
|
368
|
-
style: {
|
|
369
|
-
"--transition-duration": "200ms",
|
|
370
|
-
"--transition-property": "left, right, top, bottom, width, height",
|
|
371
|
-
position: "absolute",
|
|
372
|
-
willChange: "var(--transition-property)",
|
|
373
|
-
transitionProperty: "var(--transition-property)",
|
|
374
|
-
transitionDuration: state.context.hasMeasuredRect ? "var(--transition-duration)" : "0ms",
|
|
375
|
-
transitionTimingFunction: "var(--transition-timing-function)",
|
|
376
|
-
...state.context.indicatorRect
|
|
377
|
-
}
|
|
378
|
-
})
|
|
379
|
-
};
|
|
380
|
-
}
|
|
381
|
-
|
|
382
|
-
// src/tabs.machine.ts
|
|
383
|
-
import { createMachine, guards } from "@zag-js/core";
|
|
384
|
-
var { not } = guards;
|
|
385
|
-
function machine(userContext) {
|
|
386
|
-
const ctx = compact(userContext);
|
|
387
|
-
return createMachine(
|
|
388
|
-
{
|
|
389
|
-
initial: "unknown",
|
|
390
|
-
context: {
|
|
391
|
-
dir: "ltr",
|
|
392
|
-
orientation: "horizontal",
|
|
393
|
-
activationMode: "automatic",
|
|
394
|
-
value: null,
|
|
395
|
-
focusedValue: null,
|
|
396
|
-
previousValues: [],
|
|
397
|
-
indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
|
|
398
|
-
hasMeasuredRect: false,
|
|
399
|
-
isIndicatorRendered: false,
|
|
400
|
-
loop: true,
|
|
401
|
-
translations: {},
|
|
402
|
-
...ctx
|
|
403
|
-
},
|
|
404
|
-
computed: {
|
|
405
|
-
isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
|
|
406
|
-
isVertical: (ctx2) => ctx2.orientation === "vertical"
|
|
407
|
-
},
|
|
408
|
-
created: ["setPrevSelectedTabs"],
|
|
409
|
-
watch: {
|
|
410
|
-
focusedValue: "invokeOnFocus",
|
|
411
|
-
value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"],
|
|
412
|
-
dir: ["clearMeasured", "setIndicatorRect"]
|
|
413
|
-
},
|
|
414
|
-
on: {
|
|
415
|
-
SET_VALUE: {
|
|
416
|
-
actions: "setValue"
|
|
417
|
-
},
|
|
418
|
-
CLEAR_VALUE: {
|
|
419
|
-
actions: "clearValue"
|
|
420
|
-
}
|
|
421
|
-
},
|
|
422
|
-
states: {
|
|
423
|
-
unknown: {
|
|
424
|
-
on: {
|
|
425
|
-
SETUP: {
|
|
426
|
-
target: "idle",
|
|
427
|
-
actions: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
|
|
428
|
-
}
|
|
429
|
-
}
|
|
430
|
-
},
|
|
431
|
-
idle: {
|
|
432
|
-
on: {
|
|
433
|
-
TAB_FOCUS: {
|
|
434
|
-
guard: "selectOnFocus",
|
|
435
|
-
target: "focused",
|
|
436
|
-
actions: ["setFocusedValue", "setValue"]
|
|
437
|
-
},
|
|
438
|
-
TAB_CLICK: {
|
|
439
|
-
target: "focused",
|
|
440
|
-
actions: ["setFocusedValue", "setValue"]
|
|
441
|
-
}
|
|
442
|
-
}
|
|
443
|
-
},
|
|
444
|
-
focused: {
|
|
445
|
-
on: {
|
|
446
|
-
TAB_CLICK: {
|
|
447
|
-
target: "focused",
|
|
448
|
-
actions: ["setFocusedValue", "setValue"]
|
|
449
|
-
},
|
|
450
|
-
ARROW_LEFT: {
|
|
451
|
-
guard: "isHorizontal",
|
|
452
|
-
actions: "focusPrevTab"
|
|
453
|
-
},
|
|
454
|
-
ARROW_RIGHT: {
|
|
455
|
-
guard: "isHorizontal",
|
|
456
|
-
actions: "focusNextTab"
|
|
457
|
-
},
|
|
458
|
-
ARROW_UP: {
|
|
459
|
-
guard: "isVertical",
|
|
460
|
-
actions: "focusPrevTab"
|
|
461
|
-
},
|
|
462
|
-
ARROW_DOWN: {
|
|
463
|
-
guard: "isVertical",
|
|
464
|
-
actions: "focusNextTab"
|
|
465
|
-
},
|
|
466
|
-
HOME: {
|
|
467
|
-
actions: "focusFirstTab"
|
|
468
|
-
},
|
|
469
|
-
END: {
|
|
470
|
-
actions: "focusLastTab"
|
|
471
|
-
},
|
|
472
|
-
ENTER: {
|
|
473
|
-
guard: not("selectOnFocus"),
|
|
474
|
-
actions: "setValue"
|
|
475
|
-
},
|
|
476
|
-
TAB_FOCUS: [
|
|
477
|
-
{
|
|
478
|
-
guard: "selectOnFocus",
|
|
479
|
-
actions: ["setFocusedValue", "setValue"]
|
|
480
|
-
},
|
|
481
|
-
{ actions: "setFocusedValue" }
|
|
482
|
-
],
|
|
483
|
-
TAB_BLUR: {
|
|
484
|
-
target: "idle",
|
|
485
|
-
actions: "clearFocusedValue"
|
|
486
|
-
}
|
|
487
|
-
}
|
|
488
|
-
}
|
|
489
|
-
}
|
|
490
|
-
},
|
|
491
|
-
{
|
|
492
|
-
guards: {
|
|
493
|
-
isVertical: (ctx2) => ctx2.isVertical,
|
|
494
|
-
isHorizontal: (ctx2) => ctx2.isHorizontal,
|
|
495
|
-
selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
|
|
496
|
-
},
|
|
497
|
-
actions: {
|
|
498
|
-
setFocusedValue(ctx2, evt) {
|
|
499
|
-
ctx2.focusedValue = evt.value;
|
|
500
|
-
},
|
|
501
|
-
clearFocusedValue(ctx2) {
|
|
502
|
-
ctx2.focusedValue = null;
|
|
503
|
-
},
|
|
504
|
-
setValue(ctx2, evt) {
|
|
505
|
-
ctx2.value = evt.value;
|
|
506
|
-
},
|
|
507
|
-
clearValue(ctx2) {
|
|
508
|
-
ctx2.value = null;
|
|
509
|
-
},
|
|
510
|
-
invokeOnDelete(ctx2, evt) {
|
|
511
|
-
var _a;
|
|
512
|
-
(_a = ctx2.onDelete) == null ? void 0 : _a.call(ctx2, { value: evt.value });
|
|
513
|
-
},
|
|
514
|
-
focusFirstTab(ctx2) {
|
|
515
|
-
raf(() => {
|
|
516
|
-
var _a;
|
|
517
|
-
return (_a = dom.getFirstEl(ctx2)) == null ? void 0 : _a.focus();
|
|
518
|
-
});
|
|
519
|
-
},
|
|
520
|
-
focusLastTab(ctx2) {
|
|
521
|
-
raf(() => {
|
|
522
|
-
var _a;
|
|
523
|
-
return (_a = dom.getLastEl(ctx2)) == null ? void 0 : _a.focus();
|
|
524
|
-
});
|
|
525
|
-
},
|
|
526
|
-
focusNextTab(ctx2) {
|
|
527
|
-
if (!ctx2.focusedValue)
|
|
528
|
-
return;
|
|
529
|
-
const next = dom.getNextEl(ctx2, ctx2.focusedValue);
|
|
530
|
-
raf(() => next == null ? void 0 : next.focus());
|
|
531
|
-
},
|
|
532
|
-
focusPrevTab(ctx2) {
|
|
533
|
-
if (!ctx2.focusedValue)
|
|
534
|
-
return;
|
|
535
|
-
const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
|
|
536
|
-
raf(() => prev == null ? void 0 : prev.focus());
|
|
537
|
-
},
|
|
538
|
-
setIndicatorRect(ctx2) {
|
|
539
|
-
nextTick(() => {
|
|
540
|
-
if (!ctx2.isIndicatorRendered || !ctx2.value)
|
|
541
|
-
return;
|
|
542
|
-
ctx2.indicatorRect = dom.getRectById(ctx2, ctx2.value);
|
|
543
|
-
if (ctx2.hasMeasuredRect)
|
|
544
|
-
return;
|
|
545
|
-
nextTick(() => {
|
|
546
|
-
ctx2.hasMeasuredRect = true;
|
|
547
|
-
});
|
|
548
|
-
});
|
|
549
|
-
},
|
|
550
|
-
checkRenderedElements(ctx2) {
|
|
551
|
-
ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
|
|
552
|
-
},
|
|
553
|
-
clearMeasured(ctx2) {
|
|
554
|
-
ctx2.hasMeasuredRect = false;
|
|
555
|
-
},
|
|
556
|
-
invokeOnChange(ctx2) {
|
|
557
|
-
var _a;
|
|
558
|
-
(_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
|
|
559
|
-
},
|
|
560
|
-
invokeOnFocus(ctx2) {
|
|
561
|
-
var _a;
|
|
562
|
-
(_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, { value: ctx2.focusedValue });
|
|
563
|
-
},
|
|
564
|
-
setPrevSelectedTabs(ctx2) {
|
|
565
|
-
if (ctx2.value != null) {
|
|
566
|
-
ctx2.previousValues = pushUnique(Array.from(ctx2.previousValues), ctx2.value);
|
|
567
|
-
}
|
|
568
|
-
},
|
|
569
|
-
setContentTabIndex(ctx2) {
|
|
570
|
-
raf(() => {
|
|
571
|
-
const panel = dom.getActiveContentEl(ctx2);
|
|
572
|
-
if (!panel)
|
|
573
|
-
return;
|
|
574
|
-
const focusables = getFocusables(panel);
|
|
575
|
-
if (focusables.length > 0) {
|
|
576
|
-
panel.removeAttribute("tabindex");
|
|
577
|
-
} else {
|
|
578
|
-
panel.setAttribute("tabindex", "0");
|
|
579
|
-
}
|
|
580
|
-
});
|
|
581
|
-
}
|
|
582
|
-
}
|
|
583
|
-
}
|
|
584
|
-
);
|
|
585
|
-
}
|
|
586
|
-
function pushUnique(arr, value) {
|
|
587
|
-
const newArr = arr.slice();
|
|
588
|
-
const index = newArr.indexOf(value);
|
|
589
|
-
if (index > -1) {
|
|
590
|
-
newArr.splice(index, 1);
|
|
591
|
-
}
|
|
592
|
-
newArr.push(value);
|
|
593
|
-
return newArr;
|
|
594
|
-
}
|
|
1
|
+
import {
|
|
2
|
+
connect
|
|
3
|
+
} from "./chunk-ISJ7TQVV.mjs";
|
|
4
|
+
import {
|
|
5
|
+
anatomy
|
|
6
|
+
} from "./chunk-S2KW2DT4.mjs";
|
|
7
|
+
import {
|
|
8
|
+
machine
|
|
9
|
+
} from "./chunk-7NYLYFDJ.mjs";
|
|
10
|
+
import "./chunk-7VZIDZFW.mjs";
|
|
595
11
|
export {
|
|
596
12
|
anatomy,
|
|
597
13
|
connect,
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import * as _zag_js_anatomy from '@zag-js/anatomy';
|
|
2
|
+
|
|
3
|
+
declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "tablist" | "trigger" | "contentGroup" | "content" | "indicator">;
|
|
4
|
+
declare const parts: Record<"root" | "tablist" | "trigger" | "contentGroup" | "content" | "indicator", _zag_js_anatomy.AnatomyPart>;
|
|
5
|
+
|
|
6
|
+
export { anatomy, parts };
|