@zag-js/tabs 0.1.10 → 0.1.11
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 +35 -63
- package/dist/index.mjs +30 -66
- 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/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2021 Chakra UI
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,115 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { RequiredBy, DirectionProperty, CommonProperties, Context, PropTypes, NormalizeProps } from '@zag-js/types';
|
|
2
|
+
import * as _zag_js_core from '@zag-js/core';
|
|
3
|
+
import { StateMachine } from '@zag-js/core';
|
|
4
|
+
|
|
5
|
+
declare type IntlMessages = {
|
|
6
|
+
tablistLabel?: string;
|
|
7
|
+
deleteLabel?(value: string): string;
|
|
8
|
+
};
|
|
9
|
+
declare type ElementIds = Partial<{
|
|
10
|
+
root: string;
|
|
11
|
+
trigger: string;
|
|
12
|
+
triggerGroup: string;
|
|
13
|
+
contentGroup: string;
|
|
14
|
+
content: string;
|
|
15
|
+
}>;
|
|
16
|
+
declare type PublicContext = DirectionProperty & CommonProperties & {
|
|
17
|
+
/**
|
|
18
|
+
* The ids of the elements in the tabs. Useful for composition.
|
|
19
|
+
*/
|
|
20
|
+
ids?: ElementIds;
|
|
21
|
+
/**
|
|
22
|
+
* Specifies the localized strings that identifies the accessibility elements and their states
|
|
23
|
+
*/
|
|
24
|
+
messages: IntlMessages;
|
|
25
|
+
/**
|
|
26
|
+
* Whether the keyboard navigation will loop from last tab to first, and vice versa.
|
|
27
|
+
* @default true
|
|
28
|
+
*/
|
|
29
|
+
loop: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* Whether the indicator is rendered.
|
|
32
|
+
*/
|
|
33
|
+
isIndicatorRendered: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* The selected tab id
|
|
36
|
+
*/
|
|
37
|
+
value: string | null;
|
|
38
|
+
/**
|
|
39
|
+
* The orientation of the tabs. Can be `horizontal` or `vertical`
|
|
40
|
+
* - `horizontal`: only left and right arrow key navigation will work.
|
|
41
|
+
* - `vertical`: only up and down arrow key navigation will work.
|
|
42
|
+
*
|
|
43
|
+
* @default "horizontal"
|
|
44
|
+
*/
|
|
45
|
+
orientation?: "horizontal" | "vertical";
|
|
46
|
+
/**
|
|
47
|
+
* The activation mode of the tabs. Can be `manual` or `automatic`
|
|
48
|
+
* - `manual`: Tabs are activated when clicked or press `enter` key.
|
|
49
|
+
* - `automatic`: Tabs are activated when receiving focus
|
|
50
|
+
* @default "automatic"
|
|
51
|
+
*/
|
|
52
|
+
activationMode?: "manual" | "automatic";
|
|
53
|
+
/**
|
|
54
|
+
* Callback to be called when the selected/active tab changes
|
|
55
|
+
*/
|
|
56
|
+
onChange?: (details: {
|
|
57
|
+
value: string | null;
|
|
58
|
+
}) => void;
|
|
59
|
+
/**
|
|
60
|
+
* Callback to be called when the focused tab changes
|
|
61
|
+
*/
|
|
62
|
+
onFocus?: (details: {
|
|
63
|
+
value: string | null;
|
|
64
|
+
}) => void;
|
|
65
|
+
/**
|
|
66
|
+
* Callback to be called when a tab's close button is clicked
|
|
67
|
+
*/
|
|
68
|
+
onDelete?: (details: {
|
|
69
|
+
value: string;
|
|
70
|
+
}) => void;
|
|
71
|
+
};
|
|
72
|
+
declare type UserDefinedContext = RequiredBy<PublicContext, "id">;
|
|
73
|
+
declare type ComputedContext = Readonly<{
|
|
74
|
+
/**
|
|
75
|
+
* @computed
|
|
76
|
+
* Whether the tab is in the horizontal orientation
|
|
77
|
+
*/
|
|
78
|
+
isHorizontal: boolean;
|
|
79
|
+
/**
|
|
80
|
+
* @computed
|
|
81
|
+
* Whether the tab is in the vertical orientation
|
|
82
|
+
*/
|
|
83
|
+
isVertical: boolean;
|
|
84
|
+
}>;
|
|
85
|
+
declare type PrivateContext = Context<{}>;
|
|
86
|
+
declare type MachineContext = PublicContext & ComputedContext & PrivateContext;
|
|
87
|
+
declare type MachineState = {
|
|
88
|
+
value: "unknown" | "idle" | "focused";
|
|
89
|
+
};
|
|
90
|
+
declare type State = StateMachine.State<MachineContext, MachineState>;
|
|
91
|
+
declare type Send = StateMachine.Send<StateMachine.AnyEventObject>;
|
|
92
|
+
declare type TabProps = {
|
|
93
|
+
value: string;
|
|
94
|
+
disabled?: boolean;
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
|
|
98
|
+
value: string | null;
|
|
99
|
+
focusedValue: string | null;
|
|
100
|
+
previousValues: string[];
|
|
101
|
+
setValue(value: string): void;
|
|
102
|
+
rootProps: T["element"];
|
|
103
|
+
triggerGroupProps: T["element"];
|
|
104
|
+
getTriggerProps(props: TabProps): T["button"];
|
|
105
|
+
contentGroupProps: T["element"];
|
|
106
|
+
getContentProps({ value }: {
|
|
107
|
+
value: string;
|
|
108
|
+
}): T["element"];
|
|
109
|
+
getDeleteButtonProps({ value, disabled }: TabProps): T["button"];
|
|
110
|
+
indicatorProps: T["element"];
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
declare function machine(ctx: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
|
|
114
|
+
|
|
115
|
+
export { UserDefinedContext as Context, connect, machine };
|
package/dist/index.js
CHANGED
|
@@ -2,21 +2,7 @@
|
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
-
var __spreadValues = (a, b) => {
|
|
10
|
-
for (var prop in b || (b = {}))
|
|
11
|
-
if (__hasOwnProp.call(b, prop))
|
|
12
|
-
__defNormalProp(a, prop, b[prop]);
|
|
13
|
-
if (__getOwnPropSymbols)
|
|
14
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
-
if (__propIsEnum.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
}
|
|
18
|
-
return a;
|
|
19
|
-
};
|
|
20
6
|
var __export = (target, all) => {
|
|
21
7
|
for (var name in all)
|
|
22
8
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -40,30 +26,13 @@ __export(src_exports, {
|
|
|
40
26
|
module.exports = __toCommonJS(src_exports);
|
|
41
27
|
|
|
42
28
|
// ../../utilities/dom/dist/index.mjs
|
|
43
|
-
var __defProp2 = Object.defineProperty;
|
|
44
|
-
var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
|
|
45
|
-
var __hasOwnProp2 = Object.prototype.hasOwnProperty;
|
|
46
|
-
var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
|
|
47
|
-
var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
48
|
-
var __spreadValues2 = (a, b) => {
|
|
49
|
-
for (var prop in b || (b = {}))
|
|
50
|
-
if (__hasOwnProp2.call(b, prop))
|
|
51
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
52
|
-
if (__getOwnPropSymbols2)
|
|
53
|
-
for (var prop of __getOwnPropSymbols2(b)) {
|
|
54
|
-
if (__propIsEnum2.call(b, prop))
|
|
55
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
56
|
-
}
|
|
57
|
-
return a;
|
|
58
|
-
};
|
|
59
29
|
var dataAttr = (guard) => {
|
|
60
30
|
return guard ? "" : void 0;
|
|
61
31
|
};
|
|
62
32
|
var isDom = () => typeof window !== "undefined";
|
|
63
33
|
function getPlatform() {
|
|
64
|
-
var _a;
|
|
65
34
|
const agent = navigator.userAgentData;
|
|
66
|
-
return (
|
|
35
|
+
return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
|
|
67
36
|
}
|
|
68
37
|
var pt = (v) => isDom() && v.test(getPlatform());
|
|
69
38
|
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
@@ -79,28 +48,27 @@ function isFrame(element) {
|
|
|
79
48
|
return element.localName === "iframe";
|
|
80
49
|
}
|
|
81
50
|
function getDocument(el) {
|
|
82
|
-
var _a;
|
|
83
51
|
if (isWindow(el))
|
|
84
52
|
return el.document;
|
|
85
53
|
if (isDocument(el))
|
|
86
54
|
return el;
|
|
87
|
-
return (
|
|
55
|
+
return (el == null ? void 0 : el.ownerDocument) ?? document;
|
|
88
56
|
}
|
|
89
57
|
function defineDomHelpers(helpers) {
|
|
90
58
|
const dom2 = {
|
|
91
59
|
getRootNode: (ctx) => {
|
|
92
|
-
var _a, _b;
|
|
93
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
94
|
-
},
|
|
95
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
96
|
-
getWin: (ctx) => {
|
|
97
60
|
var _a;
|
|
98
|
-
return (_a =
|
|
61
|
+
return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
|
|
99
62
|
},
|
|
63
|
+
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
64
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
100
65
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
101
66
|
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
102
67
|
};
|
|
103
|
-
return
|
|
68
|
+
return {
|
|
69
|
+
...dom2,
|
|
70
|
+
...helpers
|
|
71
|
+
};
|
|
104
72
|
}
|
|
105
73
|
function isHTMLElement(v) {
|
|
106
74
|
return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
|
|
@@ -149,10 +117,9 @@ var sameKeyMap = {
|
|
|
149
117
|
Right: "ArrowRight"
|
|
150
118
|
};
|
|
151
119
|
function getEventKey(event, options = {}) {
|
|
152
|
-
var _a;
|
|
153
120
|
const { dir = "ltr", orientation = "horizontal" } = options;
|
|
154
121
|
let { key } = event;
|
|
155
|
-
key =
|
|
122
|
+
key = sameKeyMap[key] ?? key;
|
|
156
123
|
const isRtl = dir === "rtl" && orientation === "horizontal";
|
|
157
124
|
if (isRtl && key in rtlKeyMap) {
|
|
158
125
|
key = rtlKeyMap[key];
|
|
@@ -179,8 +146,7 @@ function raf(fn) {
|
|
|
179
146
|
};
|
|
180
147
|
}
|
|
181
148
|
function queryAll(root, selector) {
|
|
182
|
-
|
|
183
|
-
return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
|
|
149
|
+
return Array.from((root == null ? void 0 : root.querySelectorAll(selector)) ?? []);
|
|
184
150
|
}
|
|
185
151
|
function itemById(v, id) {
|
|
186
152
|
return v.find((node) => node.id === id);
|
|
@@ -209,24 +175,24 @@ var last = (v) => v[v.length - 1];
|
|
|
209
175
|
// src/tabs.dom.ts
|
|
210
176
|
var dom = defineDomHelpers({
|
|
211
177
|
getRootId: (ctx) => {
|
|
212
|
-
var _a
|
|
213
|
-
return (
|
|
178
|
+
var _a;
|
|
179
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `tabs:${ctx.id}`;
|
|
214
180
|
},
|
|
215
181
|
getTriggerGroupId: (ctx) => {
|
|
216
|
-
var _a
|
|
217
|
-
return (
|
|
182
|
+
var _a;
|
|
183
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.triggerGroup) ?? `tabs:${ctx.id}:trigger-group`;
|
|
218
184
|
},
|
|
219
185
|
getContentId: (ctx, id) => {
|
|
220
|
-
var _a
|
|
221
|
-
return (
|
|
186
|
+
var _a;
|
|
187
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.content) ?? `tabs:${ctx.id}:content-${id}`;
|
|
222
188
|
},
|
|
223
189
|
getContentGroupId: (ctx) => {
|
|
224
|
-
var _a
|
|
225
|
-
return (
|
|
190
|
+
var _a;
|
|
191
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.contentGroup) ?? `tabs:${ctx.id}:content-group`;
|
|
226
192
|
},
|
|
227
193
|
getTriggerId: (ctx, id) => {
|
|
228
|
-
var _a
|
|
229
|
-
return (
|
|
194
|
+
var _a;
|
|
195
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.trigger) ?? `tabs:${ctx.id}:trigger-${id}`;
|
|
230
196
|
},
|
|
231
197
|
getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
|
|
232
198
|
getTriggerGroupEl: (ctx) => dom.getById(ctx, dom.getTriggerGroupId(ctx)),
|
|
@@ -249,14 +215,13 @@ var dom = defineDomHelpers({
|
|
|
249
215
|
return dom.getById(ctx, id);
|
|
250
216
|
},
|
|
251
217
|
getRectById: (ctx, id) => {
|
|
252
|
-
var _a;
|
|
253
218
|
const empty = {
|
|
254
219
|
offsetLeft: 0,
|
|
255
220
|
offsetTop: 0,
|
|
256
221
|
offsetWidth: 0,
|
|
257
222
|
offsetHeight: 0
|
|
258
223
|
};
|
|
259
|
-
const tab =
|
|
224
|
+
const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
|
|
260
225
|
if (ctx.isVertical) {
|
|
261
226
|
return {
|
|
262
227
|
top: `${tab.offsetTop}px`,
|
|
@@ -399,15 +364,16 @@ function connect(state, send, normalize) {
|
|
|
399
364
|
id: dom.getIndicatorId(state.context),
|
|
400
365
|
"data-part": "indicator",
|
|
401
366
|
"data-orientation": state.context.orientation,
|
|
402
|
-
style:
|
|
367
|
+
style: {
|
|
403
368
|
"--transition-duration": "200ms",
|
|
404
369
|
"--transition-property": "left, right, top, bottom, width, height",
|
|
405
370
|
position: "absolute",
|
|
406
371
|
willChange: "var(--transition-property)",
|
|
407
372
|
transitionProperty: "var(--transition-property)",
|
|
408
373
|
transitionDuration: state.context.hasMeasuredRect ? "var(--transition-duration)" : "0ms",
|
|
409
|
-
transitionTimingFunction: "var(--transition-timing-function)"
|
|
410
|
-
|
|
374
|
+
transitionTimingFunction: "var(--transition-timing-function)",
|
|
375
|
+
...state.context.indicatorRect
|
|
376
|
+
}
|
|
411
377
|
})
|
|
412
378
|
};
|
|
413
379
|
}
|
|
@@ -418,7 +384,7 @@ var { not } = import_core.guards;
|
|
|
418
384
|
function machine(ctx) {
|
|
419
385
|
return (0, import_core.createMachine)({
|
|
420
386
|
initial: "unknown",
|
|
421
|
-
context:
|
|
387
|
+
context: {
|
|
422
388
|
dir: "ltr",
|
|
423
389
|
orientation: "horizontal",
|
|
424
390
|
activationMode: "automatic",
|
|
@@ -429,8 +395,9 @@ function machine(ctx) {
|
|
|
429
395
|
hasMeasuredRect: false,
|
|
430
396
|
isIndicatorRendered: false,
|
|
431
397
|
loop: true,
|
|
432
|
-
messages: {}
|
|
433
|
-
|
|
398
|
+
messages: {},
|
|
399
|
+
...ctx
|
|
400
|
+
},
|
|
434
401
|
computed: {
|
|
435
402
|
isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
|
|
436
403
|
isVertical: (ctx2) => ctx2.orientation === "vertical"
|
|
@@ -609,3 +576,8 @@ function machine(ctx) {
|
|
|
609
576
|
}
|
|
610
577
|
});
|
|
611
578
|
}
|
|
579
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
580
|
+
0 && (module.exports = {
|
|
581
|
+
connect,
|
|
582
|
+
machine
|
|
583
|
+
});
|
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";
|
|
@@ -125,10 +90,9 @@ var sameKeyMap = {
|
|
|
125
90
|
Right: "ArrowRight"
|
|
126
91
|
};
|
|
127
92
|
function getEventKey(event, options = {}) {
|
|
128
|
-
var _a;
|
|
129
93
|
const { dir = "ltr", orientation = "horizontal" } = options;
|
|
130
94
|
let { key } = event;
|
|
131
|
-
key =
|
|
95
|
+
key = sameKeyMap[key] ?? key;
|
|
132
96
|
const isRtl = dir === "rtl" && orientation === "horizontal";
|
|
133
97
|
if (isRtl && key in rtlKeyMap) {
|
|
134
98
|
key = rtlKeyMap[key];
|
|
@@ -155,8 +119,7 @@ function raf(fn) {
|
|
|
155
119
|
};
|
|
156
120
|
}
|
|
157
121
|
function queryAll(root, selector) {
|
|
158
|
-
|
|
159
|
-
return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
|
|
122
|
+
return Array.from((root == null ? void 0 : root.querySelectorAll(selector)) ?? []);
|
|
160
123
|
}
|
|
161
124
|
function itemById(v, id) {
|
|
162
125
|
return v.find((node) => node.id === id);
|
|
@@ -185,24 +148,24 @@ var last = (v) => v[v.length - 1];
|
|
|
185
148
|
// src/tabs.dom.ts
|
|
186
149
|
var dom = defineDomHelpers({
|
|
187
150
|
getRootId: (ctx) => {
|
|
188
|
-
var _a
|
|
189
|
-
return (
|
|
151
|
+
var _a;
|
|
152
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `tabs:${ctx.id}`;
|
|
190
153
|
},
|
|
191
154
|
getTriggerGroupId: (ctx) => {
|
|
192
|
-
var _a
|
|
193
|
-
return (
|
|
155
|
+
var _a;
|
|
156
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.triggerGroup) ?? `tabs:${ctx.id}:trigger-group`;
|
|
194
157
|
},
|
|
195
158
|
getContentId: (ctx, id) => {
|
|
196
|
-
var _a
|
|
197
|
-
return (
|
|
159
|
+
var _a;
|
|
160
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.content) ?? `tabs:${ctx.id}:content-${id}`;
|
|
198
161
|
},
|
|
199
162
|
getContentGroupId: (ctx) => {
|
|
200
|
-
var _a
|
|
201
|
-
return (
|
|
163
|
+
var _a;
|
|
164
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.contentGroup) ?? `tabs:${ctx.id}:content-group`;
|
|
202
165
|
},
|
|
203
166
|
getTriggerId: (ctx, id) => {
|
|
204
|
-
var _a
|
|
205
|
-
return (
|
|
167
|
+
var _a;
|
|
168
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.trigger) ?? `tabs:${ctx.id}:trigger-${id}`;
|
|
206
169
|
},
|
|
207
170
|
getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
|
|
208
171
|
getTriggerGroupEl: (ctx) => dom.getById(ctx, dom.getTriggerGroupId(ctx)),
|
|
@@ -225,14 +188,13 @@ var dom = defineDomHelpers({
|
|
|
225
188
|
return dom.getById(ctx, id);
|
|
226
189
|
},
|
|
227
190
|
getRectById: (ctx, id) => {
|
|
228
|
-
var _a;
|
|
229
191
|
const empty = {
|
|
230
192
|
offsetLeft: 0,
|
|
231
193
|
offsetTop: 0,
|
|
232
194
|
offsetWidth: 0,
|
|
233
195
|
offsetHeight: 0
|
|
234
196
|
};
|
|
235
|
-
const tab =
|
|
197
|
+
const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
|
|
236
198
|
if (ctx.isVertical) {
|
|
237
199
|
return {
|
|
238
200
|
top: `${tab.offsetTop}px`,
|
|
@@ -375,15 +337,16 @@ function connect(state, send, normalize) {
|
|
|
375
337
|
id: dom.getIndicatorId(state.context),
|
|
376
338
|
"data-part": "indicator",
|
|
377
339
|
"data-orientation": state.context.orientation,
|
|
378
|
-
style:
|
|
340
|
+
style: {
|
|
379
341
|
"--transition-duration": "200ms",
|
|
380
342
|
"--transition-property": "left, right, top, bottom, width, height",
|
|
381
343
|
position: "absolute",
|
|
382
344
|
willChange: "var(--transition-property)",
|
|
383
345
|
transitionProperty: "var(--transition-property)",
|
|
384
346
|
transitionDuration: state.context.hasMeasuredRect ? "var(--transition-duration)" : "0ms",
|
|
385
|
-
transitionTimingFunction: "var(--transition-timing-function)"
|
|
386
|
-
|
|
347
|
+
transitionTimingFunction: "var(--transition-timing-function)",
|
|
348
|
+
...state.context.indicatorRect
|
|
349
|
+
}
|
|
387
350
|
})
|
|
388
351
|
};
|
|
389
352
|
}
|
|
@@ -394,7 +357,7 @@ var { not } = guards;
|
|
|
394
357
|
function machine(ctx) {
|
|
395
358
|
return createMachine({
|
|
396
359
|
initial: "unknown",
|
|
397
|
-
context:
|
|
360
|
+
context: {
|
|
398
361
|
dir: "ltr",
|
|
399
362
|
orientation: "horizontal",
|
|
400
363
|
activationMode: "automatic",
|
|
@@ -405,8 +368,9 @@ function machine(ctx) {
|
|
|
405
368
|
hasMeasuredRect: false,
|
|
406
369
|
isIndicatorRendered: false,
|
|
407
370
|
loop: true,
|
|
408
|
-
messages: {}
|
|
409
|
-
|
|
371
|
+
messages: {},
|
|
372
|
+
...ctx
|
|
373
|
+
},
|
|
410
374
|
computed: {
|
|
411
375
|
isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
|
|
412
376
|
isVertical: (ctx2) => ctx2.orientation === "vertical"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/tabs",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.11",
|
|
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.9",
|
|
33
|
+
"@zag-js/types": "0.2.3"
|
|
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.8",
|
|
37
|
+
"@zag-js/utils": "0.1.3"
|
|
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
package/dist/tabs.types.d.ts
DELETED
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
import type { StateMachine as S } from "@zag-js/core";
|
|
2
|
-
import type { CommonProperties, Context, DirectionProperty, RequiredBy } from "@zag-js/types";
|
|
3
|
-
declare type IntlMessages = {
|
|
4
|
-
tablistLabel?: string;
|
|
5
|
-
deleteLabel?(value: string): string;
|
|
6
|
-
};
|
|
7
|
-
declare type ElementIds = Partial<{
|
|
8
|
-
root: string;
|
|
9
|
-
trigger: string;
|
|
10
|
-
triggerGroup: string;
|
|
11
|
-
contentGroup: string;
|
|
12
|
-
content: string;
|
|
13
|
-
}>;
|
|
14
|
-
declare type PublicContext = DirectionProperty & CommonProperties & {
|
|
15
|
-
/**
|
|
16
|
-
* The ids of the elements in the tabs. Useful for composition.
|
|
17
|
-
*/
|
|
18
|
-
ids?: ElementIds;
|
|
19
|
-
/**
|
|
20
|
-
* Specifies the localized strings that identifies the accessibility elements and their states
|
|
21
|
-
*/
|
|
22
|
-
messages: IntlMessages;
|
|
23
|
-
/**
|
|
24
|
-
* Whether the keyboard navigation will loop from last tab to first, and vice versa.
|
|
25
|
-
* @default true
|
|
26
|
-
*/
|
|
27
|
-
loop: boolean;
|
|
28
|
-
/**
|
|
29
|
-
* Whether the indicator is rendered.
|
|
30
|
-
*/
|
|
31
|
-
isIndicatorRendered: boolean;
|
|
32
|
-
/**
|
|
33
|
-
* The selected tab id
|
|
34
|
-
*/
|
|
35
|
-
value: string | null;
|
|
36
|
-
/**
|
|
37
|
-
* The orientation of the tabs. Can be `horizontal` or `vertical`
|
|
38
|
-
* - `horizontal`: only left and right arrow key navigation will work.
|
|
39
|
-
* - `vertical`: only up and down arrow key navigation will work.
|
|
40
|
-
*
|
|
41
|
-
* @default "horizontal"
|
|
42
|
-
*/
|
|
43
|
-
orientation?: "horizontal" | "vertical";
|
|
44
|
-
/**
|
|
45
|
-
* The activation mode of the tabs. Can be `manual` or `automatic`
|
|
46
|
-
* - `manual`: Tabs are activated when clicked or press `enter` key.
|
|
47
|
-
* - `automatic`: Tabs are activated when receiving focus
|
|
48
|
-
* @default "automatic"
|
|
49
|
-
*/
|
|
50
|
-
activationMode?: "manual" | "automatic";
|
|
51
|
-
/**
|
|
52
|
-
* Callback to be called when the selected/active tab changes
|
|
53
|
-
*/
|
|
54
|
-
onChange?: (details: {
|
|
55
|
-
value: string | null;
|
|
56
|
-
}) => void;
|
|
57
|
-
/**
|
|
58
|
-
* Callback to be called when the focused tab changes
|
|
59
|
-
*/
|
|
60
|
-
onFocus?: (details: {
|
|
61
|
-
value: string | null;
|
|
62
|
-
}) => void;
|
|
63
|
-
/**
|
|
64
|
-
* Callback to be called when a tab's close button is clicked
|
|
65
|
-
*/
|
|
66
|
-
onDelete?: (details: {
|
|
67
|
-
value: string;
|
|
68
|
-
}) => void;
|
|
69
|
-
};
|
|
70
|
-
export declare type UserDefinedContext = RequiredBy<PublicContext, "id">;
|
|
71
|
-
declare type ComputedContext = Readonly<{
|
|
72
|
-
/**
|
|
73
|
-
* @computed
|
|
74
|
-
* Whether the tab is in the horizontal orientation
|
|
75
|
-
*/
|
|
76
|
-
isHorizontal: boolean;
|
|
77
|
-
/**
|
|
78
|
-
* @computed
|
|
79
|
-
* Whether the tab is in the vertical orientation
|
|
80
|
-
*/
|
|
81
|
-
isVertical: boolean;
|
|
82
|
-
}>;
|
|
83
|
-
declare type PrivateContext = Context<{
|
|
84
|
-
/**
|
|
85
|
-
* @internal
|
|
86
|
-
* The focused tab id
|
|
87
|
-
*/
|
|
88
|
-
focusedValue: string | null;
|
|
89
|
-
/**
|
|
90
|
-
* @internal
|
|
91
|
-
* The active tab indicator's dom rect
|
|
92
|
-
*/
|
|
93
|
-
indicatorRect?: Partial<{
|
|
94
|
-
left: string;
|
|
95
|
-
top: string;
|
|
96
|
-
width: string;
|
|
97
|
-
height: string;
|
|
98
|
-
}>;
|
|
99
|
-
/**
|
|
100
|
-
* @internal
|
|
101
|
-
* Whether the active tab indicator's rect has been measured
|
|
102
|
-
*/
|
|
103
|
-
hasMeasuredRect?: boolean;
|
|
104
|
-
/**
|
|
105
|
-
* @internal
|
|
106
|
-
* The previously selected tab ids. This is useful for performance optimization
|
|
107
|
-
*/
|
|
108
|
-
previousValues: string[];
|
|
109
|
-
}>;
|
|
110
|
-
export declare type MachineContext = PublicContext & ComputedContext & PrivateContext;
|
|
111
|
-
export declare type MachineState = {
|
|
112
|
-
value: "unknown" | "idle" | "focused";
|
|
113
|
-
};
|
|
114
|
-
export declare type State = S.State<MachineContext, MachineState>;
|
|
115
|
-
export declare type Send = S.Send<S.AnyEventObject>;
|
|
116
|
-
export declare type TabProps = {
|
|
117
|
-
value: string;
|
|
118
|
-
disabled?: boolean;
|
|
119
|
-
};
|
|
120
|
-
export {};
|