@zag-js/tabs 0.1.8 → 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 +117 -162
- package/dist/index.mjs +113 -167
- package/package.json +14 -11
- package/dist/tabs.connect.d.ts +0 -17
- package/dist/tabs.dom.d.ts +0 -32
- 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 });
|
|
@@ -43,94 +29,78 @@ module.exports = __toCommonJS(src_exports);
|
|
|
43
29
|
var dataAttr = (guard) => {
|
|
44
30
|
return guard ? "" : void 0;
|
|
45
31
|
};
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
set.add(() => globalThis.cancelAnimationFrame(id));
|
|
51
|
-
}
|
|
52
|
-
raf2(() => raf2(fn));
|
|
53
|
-
return function cleanup() {
|
|
54
|
-
set.forEach(function(fn2) {
|
|
55
|
-
fn2();
|
|
56
|
-
});
|
|
57
|
-
};
|
|
32
|
+
var isDom = () => typeof window !== "undefined";
|
|
33
|
+
function getPlatform() {
|
|
34
|
+
const agent = navigator.userAgentData;
|
|
35
|
+
return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
|
|
58
36
|
}
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
37
|
+
var pt = (v) => isDom() && v.test(getPlatform());
|
|
38
|
+
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
39
|
+
var isSafari = () => isApple() && vn(/apple/i);
|
|
40
|
+
var isApple = () => pt(/mac|iphone|ipad|ipod/i);
|
|
41
|
+
function isDocument(el) {
|
|
42
|
+
return el.nodeType === Node.DOCUMENT_NODE;
|
|
64
43
|
}
|
|
65
|
-
function
|
|
66
|
-
;
|
|
67
|
-
globalThis.__styleCache__ = globalThis.__styleCache__ || /* @__PURE__ */ new WeakMap();
|
|
68
|
-
return globalThis.__styleCache__;
|
|
44
|
+
function isWindow(value) {
|
|
45
|
+
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
69
46
|
}
|
|
70
|
-
function
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
if (
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
47
|
+
function isFrame(element) {
|
|
48
|
+
return element.localName === "iframe";
|
|
49
|
+
}
|
|
50
|
+
function getDocument(el) {
|
|
51
|
+
if (isWindow(el))
|
|
52
|
+
return el.document;
|
|
53
|
+
if (isDocument(el))
|
|
54
|
+
return el;
|
|
55
|
+
return (el == null ? void 0 : el.ownerDocument) ?? document;
|
|
56
|
+
}
|
|
57
|
+
function defineDomHelpers(helpers) {
|
|
58
|
+
const dom2 = {
|
|
59
|
+
getRootNode: (ctx) => {
|
|
60
|
+
var _a;
|
|
61
|
+
return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
|
|
62
|
+
},
|
|
63
|
+
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
64
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
65
|
+
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
66
|
+
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
67
|
+
};
|
|
68
|
+
return {
|
|
69
|
+
...dom2,
|
|
70
|
+
...helpers
|
|
71
|
+
};
|
|
82
72
|
}
|
|
83
73
|
function isHTMLElement(v) {
|
|
84
74
|
return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
|
|
85
75
|
}
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
"input:not([disabled]):not([type=hidden])",
|
|
91
|
-
"select:not([disabled])",
|
|
92
|
-
"textarea:not([disabled])",
|
|
93
|
-
"button:not([disabled])",
|
|
94
|
-
"embed",
|
|
95
|
-
"iframe",
|
|
96
|
-
"object",
|
|
97
|
-
"a[href]",
|
|
98
|
-
"area[href]",
|
|
99
|
-
"[tabindex]",
|
|
100
|
-
"audio[controls]",
|
|
101
|
-
"video[controls]",
|
|
102
|
-
"*[tabindex]:not([aria-disabled])",
|
|
103
|
-
"[contenteditable]:not([contenteditable=false])",
|
|
104
|
-
"details > summary:first-of-type"
|
|
105
|
-
].join(",");
|
|
106
|
-
function isHidden(el, until) {
|
|
107
|
-
const style = getComputedStyle(el);
|
|
108
|
-
if (!el || style.getPropertyValue("visibility") === "hidden")
|
|
109
|
-
return true;
|
|
110
|
-
while (el) {
|
|
111
|
-
if (until != null && el === until)
|
|
112
|
-
return false;
|
|
113
|
-
if (style.getPropertyValue("display") === "none")
|
|
114
|
-
return true;
|
|
115
|
-
el = el.parentElement;
|
|
116
|
-
}
|
|
117
|
-
return false;
|
|
76
|
+
function isVisible(el) {
|
|
77
|
+
if (!isHTMLElement(el))
|
|
78
|
+
return false;
|
|
79
|
+
return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
|
|
118
80
|
}
|
|
119
|
-
var
|
|
120
|
-
|
|
81
|
+
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";
|
|
82
|
+
var getFocusables = (container, includeContainer = false) => {
|
|
83
|
+
if (!container)
|
|
121
84
|
return [];
|
|
122
|
-
|
|
123
|
-
const
|
|
124
|
-
if (
|
|
125
|
-
|
|
85
|
+
const elements = Array.from(container.querySelectorAll(focusableSelector));
|
|
86
|
+
const include = includeContainer == true || includeContainer == "if-empty" && elements.length === 0;
|
|
87
|
+
if (include && isHTMLElement(container) && isFocusable(container)) {
|
|
88
|
+
elements.unshift(container);
|
|
126
89
|
}
|
|
127
|
-
|
|
90
|
+
const focusableElements = elements.filter(isFocusable);
|
|
91
|
+
focusableElements.forEach((element, i) => {
|
|
92
|
+
if (isFrame(element) && element.contentDocument) {
|
|
93
|
+
const frameBody = element.contentDocument.body;
|
|
94
|
+
focusableElements.splice(i, 1, ...getFocusables(frameBody));
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
return focusableElements;
|
|
128
98
|
};
|
|
129
|
-
|
|
130
|
-
if (!
|
|
99
|
+
function isFocusable(element) {
|
|
100
|
+
if (!element)
|
|
131
101
|
return false;
|
|
132
|
-
return
|
|
133
|
-
}
|
|
102
|
+
return element.matches(focusableSelector) && isVisible(element);
|
|
103
|
+
}
|
|
134
104
|
var rtlKeyMap = {
|
|
135
105
|
ArrowLeft: "ArrowRight",
|
|
136
106
|
ArrowRight: "ArrowLeft",
|
|
@@ -147,19 +117,36 @@ var sameKeyMap = {
|
|
|
147
117
|
Right: "ArrowRight"
|
|
148
118
|
};
|
|
149
119
|
function getEventKey(event, options = {}) {
|
|
150
|
-
var _a;
|
|
151
120
|
const { dir = "ltr", orientation = "horizontal" } = options;
|
|
152
121
|
let { key } = event;
|
|
153
|
-
key =
|
|
122
|
+
key = sameKeyMap[key] ?? key;
|
|
154
123
|
const isRtl = dir === "rtl" && orientation === "horizontal";
|
|
155
124
|
if (isRtl && key in rtlKeyMap) {
|
|
156
125
|
key = rtlKeyMap[key];
|
|
157
126
|
}
|
|
158
127
|
return key;
|
|
159
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
|
+
}
|
|
160
148
|
function queryAll(root, selector) {
|
|
161
|
-
|
|
162
|
-
return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
|
|
149
|
+
return Array.from((root == null ? void 0 : root.querySelectorAll(selector)) ?? []);
|
|
163
150
|
}
|
|
164
151
|
function itemById(v, id) {
|
|
165
152
|
return v.find((node) => node.id === id);
|
|
@@ -181,65 +168,37 @@ function prevById(v, id, loop = true) {
|
|
|
181
168
|
return v[idx];
|
|
182
169
|
}
|
|
183
170
|
|
|
184
|
-
// ../../types/dist/index.mjs
|
|
185
|
-
function createNormalizer(fn) {
|
|
186
|
-
return new Proxy({}, {
|
|
187
|
-
get() {
|
|
188
|
-
return fn;
|
|
189
|
-
}
|
|
190
|
-
});
|
|
191
|
-
}
|
|
192
|
-
var normalizeProp = createNormalizer((v) => v);
|
|
193
|
-
|
|
194
171
|
// ../../utilities/core/dist/index.mjs
|
|
195
172
|
var first = (v) => v[0];
|
|
196
173
|
var last = (v) => v[v.length - 1];
|
|
197
|
-
var isDom = () => typeof window !== "undefined";
|
|
198
|
-
function getPlatform() {
|
|
199
|
-
var _a;
|
|
200
|
-
const agent = navigator.userAgentData;
|
|
201
|
-
return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
|
|
202
|
-
}
|
|
203
|
-
var pt = (v) => isDom() && v.test(getPlatform());
|
|
204
|
-
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
205
|
-
var isSafari = () => isApple() && vn(/apple/i);
|
|
206
|
-
var isApple = () => pt(/mac|iphone|ipad|ipod/i);
|
|
207
174
|
|
|
208
175
|
// src/tabs.dom.ts
|
|
209
|
-
var dom = {
|
|
210
|
-
getDoc: (ctx) => {
|
|
211
|
-
var _a;
|
|
212
|
-
return (_a = ctx.doc) != null ? _a : document;
|
|
213
|
-
},
|
|
214
|
-
getRootNode: (ctx) => {
|
|
215
|
-
var _a;
|
|
216
|
-
return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
|
|
217
|
-
},
|
|
176
|
+
var dom = defineDomHelpers({
|
|
218
177
|
getRootId: (ctx) => {
|
|
219
|
-
var _a
|
|
220
|
-
return (
|
|
178
|
+
var _a;
|
|
179
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `tabs:${ctx.id}`;
|
|
221
180
|
},
|
|
222
181
|
getTriggerGroupId: (ctx) => {
|
|
223
|
-
var _a
|
|
224
|
-
return (
|
|
182
|
+
var _a;
|
|
183
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.triggerGroup) ?? `tabs:${ctx.id}:trigger-group`;
|
|
225
184
|
},
|
|
226
185
|
getContentId: (ctx, id) => {
|
|
227
|
-
var _a
|
|
228
|
-
return (
|
|
186
|
+
var _a;
|
|
187
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.content) ?? `tabs:${ctx.id}:content-${id}`;
|
|
229
188
|
},
|
|
230
189
|
getContentGroupId: (ctx) => {
|
|
231
|
-
var _a
|
|
232
|
-
return (
|
|
190
|
+
var _a;
|
|
191
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.contentGroup) ?? `tabs:${ctx.id}:content-group`;
|
|
233
192
|
},
|
|
234
193
|
getTriggerId: (ctx, id) => {
|
|
235
|
-
var _a
|
|
236
|
-
return (
|
|
194
|
+
var _a;
|
|
195
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.trigger) ?? `tabs:${ctx.id}:trigger-${id}`;
|
|
237
196
|
},
|
|
238
|
-
getIndicatorId: (ctx) => `tabs:${ctx.
|
|
239
|
-
getTriggerGroupEl: (ctx) => dom.
|
|
240
|
-
getContentEl: (ctx, id) => dom.
|
|
241
|
-
getTriggerEl: (ctx, id) => dom.
|
|
242
|
-
getIndicatorEl: (ctx) => dom.
|
|
197
|
+
getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
|
|
198
|
+
getTriggerGroupEl: (ctx) => dom.getById(ctx, dom.getTriggerGroupId(ctx)),
|
|
199
|
+
getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
|
|
200
|
+
getTriggerEl: (ctx, id) => dom.getById(ctx, dom.getTriggerId(ctx, id)),
|
|
201
|
+
getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
|
|
243
202
|
getElements: (ctx) => {
|
|
244
203
|
const ownerId = CSS.escape(dom.getTriggerGroupId(ctx));
|
|
245
204
|
const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`;
|
|
@@ -253,17 +212,16 @@ var dom = {
|
|
|
253
212
|
if (!ctx.value)
|
|
254
213
|
return;
|
|
255
214
|
const id = dom.getContentId(ctx, ctx.value);
|
|
256
|
-
return dom.
|
|
215
|
+
return dom.getById(ctx, id);
|
|
257
216
|
},
|
|
258
217
|
getRectById: (ctx, id) => {
|
|
259
|
-
var _a;
|
|
260
218
|
const empty = {
|
|
261
219
|
offsetLeft: 0,
|
|
262
220
|
offsetTop: 0,
|
|
263
221
|
offsetWidth: 0,
|
|
264
222
|
offsetHeight: 0
|
|
265
223
|
};
|
|
266
|
-
const tab =
|
|
224
|
+
const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
|
|
267
225
|
if (ctx.isVertical) {
|
|
268
226
|
return {
|
|
269
227
|
top: `${tab.offsetTop}px`,
|
|
@@ -275,10 +233,10 @@ var dom = {
|
|
|
275
233
|
width: `${tab.offsetWidth}px`
|
|
276
234
|
};
|
|
277
235
|
}
|
|
278
|
-
};
|
|
236
|
+
});
|
|
279
237
|
|
|
280
238
|
// src/tabs.connect.ts
|
|
281
|
-
function connect(state, send, normalize
|
|
239
|
+
function connect(state, send, normalize) {
|
|
282
240
|
const messages = state.context.messages;
|
|
283
241
|
const isFocused = state.matches("focused");
|
|
284
242
|
return {
|
|
@@ -406,15 +364,16 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
406
364
|
id: dom.getIndicatorId(state.context),
|
|
407
365
|
"data-part": "indicator",
|
|
408
366
|
"data-orientation": state.context.orientation,
|
|
409
|
-
style:
|
|
367
|
+
style: {
|
|
410
368
|
"--transition-duration": "200ms",
|
|
411
369
|
"--transition-property": "left, right, top, bottom, width, height",
|
|
412
370
|
position: "absolute",
|
|
413
371
|
willChange: "var(--transition-property)",
|
|
414
372
|
transitionProperty: "var(--transition-property)",
|
|
415
373
|
transitionDuration: state.context.hasMeasuredRect ? "var(--transition-duration)" : "0ms",
|
|
416
|
-
transitionTimingFunction: "var(--transition-timing-function)"
|
|
417
|
-
|
|
374
|
+
transitionTimingFunction: "var(--transition-timing-function)",
|
|
375
|
+
...state.context.indicatorRect
|
|
376
|
+
}
|
|
418
377
|
})
|
|
419
378
|
};
|
|
420
379
|
}
|
|
@@ -422,23 +381,23 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
422
381
|
// src/tabs.machine.ts
|
|
423
382
|
var import_core = require("@zag-js/core");
|
|
424
383
|
var { not } = import_core.guards;
|
|
425
|
-
function machine(ctx
|
|
384
|
+
function machine(ctx) {
|
|
426
385
|
return (0, import_core.createMachine)({
|
|
427
386
|
initial: "unknown",
|
|
428
|
-
context:
|
|
387
|
+
context: {
|
|
429
388
|
dir: "ltr",
|
|
430
389
|
orientation: "horizontal",
|
|
431
390
|
activationMode: "automatic",
|
|
432
391
|
value: null,
|
|
433
392
|
focusedValue: null,
|
|
434
|
-
uid: "",
|
|
435
393
|
previousValues: [],
|
|
436
394
|
indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
|
|
437
395
|
hasMeasuredRect: false,
|
|
438
396
|
isIndicatorRendered: false,
|
|
439
397
|
loop: true,
|
|
440
|
-
messages: {}
|
|
441
|
-
|
|
398
|
+
messages: {},
|
|
399
|
+
...ctx
|
|
400
|
+
},
|
|
442
401
|
computed: {
|
|
443
402
|
isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
|
|
444
403
|
isVertical: (ctx2) => ctx2.orientation === "vertical"
|
|
@@ -462,7 +421,7 @@ function machine(ctx = {}) {
|
|
|
462
421
|
on: {
|
|
463
422
|
SETUP: {
|
|
464
423
|
target: "idle",
|
|
465
|
-
actions: ["
|
|
424
|
+
actions: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
|
|
466
425
|
}
|
|
467
426
|
}
|
|
468
427
|
},
|
|
@@ -532,13 +491,6 @@ function machine(ctx = {}) {
|
|
|
532
491
|
selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
|
|
533
492
|
},
|
|
534
493
|
actions: {
|
|
535
|
-
setupDocument(ctx2, evt) {
|
|
536
|
-
ctx2.uid = evt.id;
|
|
537
|
-
if (evt.doc)
|
|
538
|
-
ctx2.doc = (0, import_core.ref)(evt.doc);
|
|
539
|
-
if (evt.root)
|
|
540
|
-
ctx2.rootNode = (0, import_core.ref)(evt.root);
|
|
541
|
-
},
|
|
542
494
|
setFocusedValue(ctx2, evt) {
|
|
543
495
|
ctx2.focusedValue = evt.value;
|
|
544
496
|
},
|
|
@@ -589,9 +541,7 @@ function machine(ctx = {}) {
|
|
|
589
541
|
});
|
|
590
542
|
},
|
|
591
543
|
checkRenderedElements(ctx2) {
|
|
592
|
-
|
|
593
|
-
ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
|
|
594
|
-
});
|
|
544
|
+
ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
|
|
595
545
|
},
|
|
596
546
|
clearMeasured(ctx2) {
|
|
597
547
|
ctx2.hasMeasuredRect = false;
|
|
@@ -626,3 +576,8 @@ function machine(ctx = {}) {
|
|
|
626
576
|
}
|
|
627
577
|
});
|
|
628
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,113 +1,79 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
4
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
6
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
7
|
-
var __spreadValues = (a, b) => {
|
|
8
|
-
for (var prop in b || (b = {}))
|
|
9
|
-
if (__hasOwnProp.call(b, prop))
|
|
10
|
-
__defNormalProp(a, prop, b[prop]);
|
|
11
|
-
if (__getOwnPropSymbols)
|
|
12
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
13
|
-
if (__propIsEnum.call(b, prop))
|
|
14
|
-
__defNormalProp(a, prop, b[prop]);
|
|
15
|
-
}
|
|
16
|
-
return a;
|
|
17
|
-
};
|
|
18
|
-
|
|
19
1
|
// ../../utilities/dom/dist/index.mjs
|
|
20
2
|
var dataAttr = (guard) => {
|
|
21
3
|
return guard ? "" : void 0;
|
|
22
4
|
};
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
set.add(() => globalThis.cancelAnimationFrame(id));
|
|
28
|
-
}
|
|
29
|
-
raf2(() => raf2(fn));
|
|
30
|
-
return function cleanup() {
|
|
31
|
-
set.forEach(function(fn2) {
|
|
32
|
-
fn2();
|
|
33
|
-
});
|
|
34
|
-
};
|
|
5
|
+
var isDom = () => typeof window !== "undefined";
|
|
6
|
+
function getPlatform() {
|
|
7
|
+
const agent = navigator.userAgentData;
|
|
8
|
+
return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
|
|
35
9
|
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
10
|
+
var pt = (v) => isDom() && v.test(getPlatform());
|
|
11
|
+
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
12
|
+
var isSafari = () => isApple() && vn(/apple/i);
|
|
13
|
+
var isApple = () => pt(/mac|iphone|ipad|ipod/i);
|
|
14
|
+
function isDocument(el) {
|
|
15
|
+
return el.nodeType === Node.DOCUMENT_NODE;
|
|
41
16
|
}
|
|
42
|
-
function
|
|
43
|
-
;
|
|
44
|
-
globalThis.__styleCache__ = globalThis.__styleCache__ || /* @__PURE__ */ new WeakMap();
|
|
45
|
-
return globalThis.__styleCache__;
|
|
17
|
+
function isWindow(value) {
|
|
18
|
+
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
46
19
|
}
|
|
47
|
-
function
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
if (
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
20
|
+
function isFrame(element) {
|
|
21
|
+
return element.localName === "iframe";
|
|
22
|
+
}
|
|
23
|
+
function getDocument(el) {
|
|
24
|
+
if (isWindow(el))
|
|
25
|
+
return el.document;
|
|
26
|
+
if (isDocument(el))
|
|
27
|
+
return el;
|
|
28
|
+
return (el == null ? void 0 : el.ownerDocument) ?? document;
|
|
29
|
+
}
|
|
30
|
+
function defineDomHelpers(helpers) {
|
|
31
|
+
const dom2 = {
|
|
32
|
+
getRootNode: (ctx) => {
|
|
33
|
+
var _a;
|
|
34
|
+
return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
|
|
35
|
+
},
|
|
36
|
+
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
37
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
38
|
+
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
39
|
+
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
40
|
+
};
|
|
41
|
+
return {
|
|
42
|
+
...dom2,
|
|
43
|
+
...helpers
|
|
44
|
+
};
|
|
59
45
|
}
|
|
60
46
|
function isHTMLElement(v) {
|
|
61
47
|
return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
|
|
62
48
|
}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
"input:not([disabled]):not([type=hidden])",
|
|
68
|
-
"select:not([disabled])",
|
|
69
|
-
"textarea:not([disabled])",
|
|
70
|
-
"button:not([disabled])",
|
|
71
|
-
"embed",
|
|
72
|
-
"iframe",
|
|
73
|
-
"object",
|
|
74
|
-
"a[href]",
|
|
75
|
-
"area[href]",
|
|
76
|
-
"[tabindex]",
|
|
77
|
-
"audio[controls]",
|
|
78
|
-
"video[controls]",
|
|
79
|
-
"*[tabindex]:not([aria-disabled])",
|
|
80
|
-
"[contenteditable]:not([contenteditable=false])",
|
|
81
|
-
"details > summary:first-of-type"
|
|
82
|
-
].join(",");
|
|
83
|
-
function isHidden(el, until) {
|
|
84
|
-
const style = getComputedStyle(el);
|
|
85
|
-
if (!el || style.getPropertyValue("visibility") === "hidden")
|
|
86
|
-
return true;
|
|
87
|
-
while (el) {
|
|
88
|
-
if (until != null && el === until)
|
|
89
|
-
return false;
|
|
90
|
-
if (style.getPropertyValue("display") === "none")
|
|
91
|
-
return true;
|
|
92
|
-
el = el.parentElement;
|
|
93
|
-
}
|
|
94
|
-
return false;
|
|
49
|
+
function isVisible(el) {
|
|
50
|
+
if (!isHTMLElement(el))
|
|
51
|
+
return false;
|
|
52
|
+
return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
|
|
95
53
|
}
|
|
96
|
-
var
|
|
97
|
-
|
|
54
|
+
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";
|
|
55
|
+
var getFocusables = (container, includeContainer = false) => {
|
|
56
|
+
if (!container)
|
|
98
57
|
return [];
|
|
99
|
-
|
|
100
|
-
const
|
|
101
|
-
if (
|
|
102
|
-
|
|
58
|
+
const elements = Array.from(container.querySelectorAll(focusableSelector));
|
|
59
|
+
const include = includeContainer == true || includeContainer == "if-empty" && elements.length === 0;
|
|
60
|
+
if (include && isHTMLElement(container) && isFocusable(container)) {
|
|
61
|
+
elements.unshift(container);
|
|
103
62
|
}
|
|
104
|
-
|
|
63
|
+
const focusableElements = elements.filter(isFocusable);
|
|
64
|
+
focusableElements.forEach((element, i) => {
|
|
65
|
+
if (isFrame(element) && element.contentDocument) {
|
|
66
|
+
const frameBody = element.contentDocument.body;
|
|
67
|
+
focusableElements.splice(i, 1, ...getFocusables(frameBody));
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
return focusableElements;
|
|
105
71
|
};
|
|
106
|
-
|
|
107
|
-
if (!
|
|
72
|
+
function isFocusable(element) {
|
|
73
|
+
if (!element)
|
|
108
74
|
return false;
|
|
109
|
-
return
|
|
110
|
-
}
|
|
75
|
+
return element.matches(focusableSelector) && isVisible(element);
|
|
76
|
+
}
|
|
111
77
|
var rtlKeyMap = {
|
|
112
78
|
ArrowLeft: "ArrowRight",
|
|
113
79
|
ArrowRight: "ArrowLeft",
|
|
@@ -124,19 +90,36 @@ var sameKeyMap = {
|
|
|
124
90
|
Right: "ArrowRight"
|
|
125
91
|
};
|
|
126
92
|
function getEventKey(event, options = {}) {
|
|
127
|
-
var _a;
|
|
128
93
|
const { dir = "ltr", orientation = "horizontal" } = options;
|
|
129
94
|
let { key } = event;
|
|
130
|
-
key =
|
|
95
|
+
key = sameKeyMap[key] ?? key;
|
|
131
96
|
const isRtl = dir === "rtl" && orientation === "horizontal";
|
|
132
97
|
if (isRtl && key in rtlKeyMap) {
|
|
133
98
|
key = rtlKeyMap[key];
|
|
134
99
|
}
|
|
135
100
|
return key;
|
|
136
101
|
}
|
|
102
|
+
function nextTick(fn) {
|
|
103
|
+
const set = /* @__PURE__ */ new Set();
|
|
104
|
+
function raf2(fn2) {
|
|
105
|
+
const id = globalThis.requestAnimationFrame(fn2);
|
|
106
|
+
set.add(() => globalThis.cancelAnimationFrame(id));
|
|
107
|
+
}
|
|
108
|
+
raf2(() => raf2(fn));
|
|
109
|
+
return function cleanup() {
|
|
110
|
+
set.forEach(function(fn2) {
|
|
111
|
+
fn2();
|
|
112
|
+
});
|
|
113
|
+
};
|
|
114
|
+
}
|
|
115
|
+
function raf(fn) {
|
|
116
|
+
const id = globalThis.requestAnimationFrame(fn);
|
|
117
|
+
return function cleanup() {
|
|
118
|
+
globalThis.cancelAnimationFrame(id);
|
|
119
|
+
};
|
|
120
|
+
}
|
|
137
121
|
function queryAll(root, selector) {
|
|
138
|
-
|
|
139
|
-
return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
|
|
122
|
+
return Array.from((root == null ? void 0 : root.querySelectorAll(selector)) ?? []);
|
|
140
123
|
}
|
|
141
124
|
function itemById(v, id) {
|
|
142
125
|
return v.find((node) => node.id === id);
|
|
@@ -158,65 +141,37 @@ function prevById(v, id, loop = true) {
|
|
|
158
141
|
return v[idx];
|
|
159
142
|
}
|
|
160
143
|
|
|
161
|
-
// ../../types/dist/index.mjs
|
|
162
|
-
function createNormalizer(fn) {
|
|
163
|
-
return new Proxy({}, {
|
|
164
|
-
get() {
|
|
165
|
-
return fn;
|
|
166
|
-
}
|
|
167
|
-
});
|
|
168
|
-
}
|
|
169
|
-
var normalizeProp = createNormalizer((v) => v);
|
|
170
|
-
|
|
171
144
|
// ../../utilities/core/dist/index.mjs
|
|
172
145
|
var first = (v) => v[0];
|
|
173
146
|
var last = (v) => v[v.length - 1];
|
|
174
|
-
var isDom = () => typeof window !== "undefined";
|
|
175
|
-
function getPlatform() {
|
|
176
|
-
var _a;
|
|
177
|
-
const agent = navigator.userAgentData;
|
|
178
|
-
return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
|
|
179
|
-
}
|
|
180
|
-
var pt = (v) => isDom() && v.test(getPlatform());
|
|
181
|
-
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
182
|
-
var isSafari = () => isApple() && vn(/apple/i);
|
|
183
|
-
var isApple = () => pt(/mac|iphone|ipad|ipod/i);
|
|
184
147
|
|
|
185
148
|
// src/tabs.dom.ts
|
|
186
|
-
var dom = {
|
|
187
|
-
getDoc: (ctx) => {
|
|
188
|
-
var _a;
|
|
189
|
-
return (_a = ctx.doc) != null ? _a : document;
|
|
190
|
-
},
|
|
191
|
-
getRootNode: (ctx) => {
|
|
192
|
-
var _a;
|
|
193
|
-
return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
|
|
194
|
-
},
|
|
149
|
+
var dom = defineDomHelpers({
|
|
195
150
|
getRootId: (ctx) => {
|
|
196
|
-
var _a
|
|
197
|
-
return (
|
|
151
|
+
var _a;
|
|
152
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `tabs:${ctx.id}`;
|
|
198
153
|
},
|
|
199
154
|
getTriggerGroupId: (ctx) => {
|
|
200
|
-
var _a
|
|
201
|
-
return (
|
|
155
|
+
var _a;
|
|
156
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.triggerGroup) ?? `tabs:${ctx.id}:trigger-group`;
|
|
202
157
|
},
|
|
203
158
|
getContentId: (ctx, id) => {
|
|
204
|
-
var _a
|
|
205
|
-
return (
|
|
159
|
+
var _a;
|
|
160
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.content) ?? `tabs:${ctx.id}:content-${id}`;
|
|
206
161
|
},
|
|
207
162
|
getContentGroupId: (ctx) => {
|
|
208
|
-
var _a
|
|
209
|
-
return (
|
|
163
|
+
var _a;
|
|
164
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.contentGroup) ?? `tabs:${ctx.id}:content-group`;
|
|
210
165
|
},
|
|
211
166
|
getTriggerId: (ctx, id) => {
|
|
212
|
-
var _a
|
|
213
|
-
return (
|
|
167
|
+
var _a;
|
|
168
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.trigger) ?? `tabs:${ctx.id}:trigger-${id}`;
|
|
214
169
|
},
|
|
215
|
-
getIndicatorId: (ctx) => `tabs:${ctx.
|
|
216
|
-
getTriggerGroupEl: (ctx) => dom.
|
|
217
|
-
getContentEl: (ctx, id) => dom.
|
|
218
|
-
getTriggerEl: (ctx, id) => dom.
|
|
219
|
-
getIndicatorEl: (ctx) => dom.
|
|
170
|
+
getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
|
|
171
|
+
getTriggerGroupEl: (ctx) => dom.getById(ctx, dom.getTriggerGroupId(ctx)),
|
|
172
|
+
getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
|
|
173
|
+
getTriggerEl: (ctx, id) => dom.getById(ctx, dom.getTriggerId(ctx, id)),
|
|
174
|
+
getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
|
|
220
175
|
getElements: (ctx) => {
|
|
221
176
|
const ownerId = CSS.escape(dom.getTriggerGroupId(ctx));
|
|
222
177
|
const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`;
|
|
@@ -230,17 +185,16 @@ var dom = {
|
|
|
230
185
|
if (!ctx.value)
|
|
231
186
|
return;
|
|
232
187
|
const id = dom.getContentId(ctx, ctx.value);
|
|
233
|
-
return dom.
|
|
188
|
+
return dom.getById(ctx, id);
|
|
234
189
|
},
|
|
235
190
|
getRectById: (ctx, id) => {
|
|
236
|
-
var _a;
|
|
237
191
|
const empty = {
|
|
238
192
|
offsetLeft: 0,
|
|
239
193
|
offsetTop: 0,
|
|
240
194
|
offsetWidth: 0,
|
|
241
195
|
offsetHeight: 0
|
|
242
196
|
};
|
|
243
|
-
const tab =
|
|
197
|
+
const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
|
|
244
198
|
if (ctx.isVertical) {
|
|
245
199
|
return {
|
|
246
200
|
top: `${tab.offsetTop}px`,
|
|
@@ -252,10 +206,10 @@ var dom = {
|
|
|
252
206
|
width: `${tab.offsetWidth}px`
|
|
253
207
|
};
|
|
254
208
|
}
|
|
255
|
-
};
|
|
209
|
+
});
|
|
256
210
|
|
|
257
211
|
// src/tabs.connect.ts
|
|
258
|
-
function connect(state, send, normalize
|
|
212
|
+
function connect(state, send, normalize) {
|
|
259
213
|
const messages = state.context.messages;
|
|
260
214
|
const isFocused = state.matches("focused");
|
|
261
215
|
return {
|
|
@@ -383,39 +337,40 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
383
337
|
id: dom.getIndicatorId(state.context),
|
|
384
338
|
"data-part": "indicator",
|
|
385
339
|
"data-orientation": state.context.orientation,
|
|
386
|
-
style:
|
|
340
|
+
style: {
|
|
387
341
|
"--transition-duration": "200ms",
|
|
388
342
|
"--transition-property": "left, right, top, bottom, width, height",
|
|
389
343
|
position: "absolute",
|
|
390
344
|
willChange: "var(--transition-property)",
|
|
391
345
|
transitionProperty: "var(--transition-property)",
|
|
392
346
|
transitionDuration: state.context.hasMeasuredRect ? "var(--transition-duration)" : "0ms",
|
|
393
|
-
transitionTimingFunction: "var(--transition-timing-function)"
|
|
394
|
-
|
|
347
|
+
transitionTimingFunction: "var(--transition-timing-function)",
|
|
348
|
+
...state.context.indicatorRect
|
|
349
|
+
}
|
|
395
350
|
})
|
|
396
351
|
};
|
|
397
352
|
}
|
|
398
353
|
|
|
399
354
|
// src/tabs.machine.ts
|
|
400
|
-
import { createMachine, guards
|
|
355
|
+
import { createMachine, guards } from "@zag-js/core";
|
|
401
356
|
var { not } = guards;
|
|
402
|
-
function machine(ctx
|
|
357
|
+
function machine(ctx) {
|
|
403
358
|
return createMachine({
|
|
404
359
|
initial: "unknown",
|
|
405
|
-
context:
|
|
360
|
+
context: {
|
|
406
361
|
dir: "ltr",
|
|
407
362
|
orientation: "horizontal",
|
|
408
363
|
activationMode: "automatic",
|
|
409
364
|
value: null,
|
|
410
365
|
focusedValue: null,
|
|
411
|
-
uid: "",
|
|
412
366
|
previousValues: [],
|
|
413
367
|
indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
|
|
414
368
|
hasMeasuredRect: false,
|
|
415
369
|
isIndicatorRendered: false,
|
|
416
370
|
loop: true,
|
|
417
|
-
messages: {}
|
|
418
|
-
|
|
371
|
+
messages: {},
|
|
372
|
+
...ctx
|
|
373
|
+
},
|
|
419
374
|
computed: {
|
|
420
375
|
isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
|
|
421
376
|
isVertical: (ctx2) => ctx2.orientation === "vertical"
|
|
@@ -439,7 +394,7 @@ function machine(ctx = {}) {
|
|
|
439
394
|
on: {
|
|
440
395
|
SETUP: {
|
|
441
396
|
target: "idle",
|
|
442
|
-
actions: ["
|
|
397
|
+
actions: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
|
|
443
398
|
}
|
|
444
399
|
}
|
|
445
400
|
},
|
|
@@ -509,13 +464,6 @@ function machine(ctx = {}) {
|
|
|
509
464
|
selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
|
|
510
465
|
},
|
|
511
466
|
actions: {
|
|
512
|
-
setupDocument(ctx2, evt) {
|
|
513
|
-
ctx2.uid = evt.id;
|
|
514
|
-
if (evt.doc)
|
|
515
|
-
ctx2.doc = ref(evt.doc);
|
|
516
|
-
if (evt.root)
|
|
517
|
-
ctx2.rootNode = ref(evt.root);
|
|
518
|
-
},
|
|
519
467
|
setFocusedValue(ctx2, evt) {
|
|
520
468
|
ctx2.focusedValue = evt.value;
|
|
521
469
|
},
|
|
@@ -566,9 +514,7 @@ function machine(ctx = {}) {
|
|
|
566
514
|
});
|
|
567
515
|
},
|
|
568
516
|
checkRenderedElements(ctx2) {
|
|
569
|
-
|
|
570
|
-
ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
|
|
571
|
-
});
|
|
517
|
+
ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
|
|
572
518
|
},
|
|
573
519
|
clearMeasured(ctx2) {
|
|
574
520
|
ctx2.hasMeasuredRect = false;
|
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,18 +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/
|
|
34
|
-
|
|
35
|
-
|
|
32
|
+
"@zag-js/core": "0.1.9",
|
|
33
|
+
"@zag-js/types": "0.2.3"
|
|
34
|
+
},
|
|
35
|
+
"devDependencies": {
|
|
36
|
+
"@zag-js/dom-utils": "0.1.8",
|
|
37
|
+
"@zag-js/utils": "0.1.3"
|
|
36
38
|
},
|
|
37
39
|
"scripts": {
|
|
38
|
-
"build
|
|
39
|
-
"start": "
|
|
40
|
-
"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",
|
|
41
43
|
"test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
|
|
42
44
|
"lint": "eslint src --ext .ts,.tsx",
|
|
43
|
-
"test
|
|
44
|
-
"test
|
|
45
|
+
"test-ci": "pnpm test --ci --runInBand",
|
|
46
|
+
"test-watch": "pnpm test --watch -u",
|
|
47
|
+
"typecheck": "tsc --noEmit"
|
|
45
48
|
}
|
|
46
|
-
}
|
|
49
|
+
}
|
package/dist/tabs.connect.d.ts
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { PropTypes, ReactPropTypes } from "@zag-js/types";
|
|
2
|
-
import type { Send, State, TabProps } from "./tabs.types";
|
|
3
|
-
export declare function connect<T extends PropTypes = ReactPropTypes>(state: State, send: Send, normalize?: import("@zag-js/types").NormalizeProps): {
|
|
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,32 +0,0 @@
|
|
|
1
|
-
import { MachineContext as Ctx } from "./tabs.types";
|
|
2
|
-
export declare const dom: {
|
|
3
|
-
getDoc: (ctx: Ctx) => Document;
|
|
4
|
-
getRootNode: (ctx: Ctx) => Document | ShadowRoot;
|
|
5
|
-
getRootId: (ctx: Ctx) => string;
|
|
6
|
-
getTriggerGroupId: (ctx: Ctx) => string;
|
|
7
|
-
getContentId: (ctx: Ctx, id: string) => string;
|
|
8
|
-
getContentGroupId: (ctx: Ctx) => string;
|
|
9
|
-
getTriggerId: (ctx: Ctx, id: string) => string;
|
|
10
|
-
getIndicatorId: (ctx: Ctx) => string;
|
|
11
|
-
getTriggerGroupEl: (ctx: Ctx) => HTMLElement;
|
|
12
|
-
getContentEl: (ctx: Ctx, id: string) => HTMLElement;
|
|
13
|
-
getTriggerEl: (ctx: Ctx, id: string) => HTMLElement;
|
|
14
|
-
getIndicatorEl: (ctx: Ctx) => HTMLElement;
|
|
15
|
-
getElements: (ctx: Ctx) => HTMLElement[];
|
|
16
|
-
getFirstEl: (ctx: Ctx) => HTMLElement;
|
|
17
|
-
getLastEl: (ctx: Ctx) => HTMLElement;
|
|
18
|
-
getNextEl: (ctx: Ctx, id: string) => HTMLElement;
|
|
19
|
-
getPrevEl: (ctx: Ctx, id: string) => HTMLElement;
|
|
20
|
-
getActiveContentEl: (ctx: Ctx) => HTMLElement;
|
|
21
|
-
getRectById: (ctx: Ctx, id: string) => {
|
|
22
|
-
top: string;
|
|
23
|
-
height: string;
|
|
24
|
-
left?: undefined;
|
|
25
|
-
width?: undefined;
|
|
26
|
-
} | {
|
|
27
|
-
left: string;
|
|
28
|
-
width: string;
|
|
29
|
-
top?: undefined;
|
|
30
|
-
height?: undefined;
|
|
31
|
-
};
|
|
32
|
-
};
|
package/dist/tabs.machine.d.ts
DELETED
package/dist/tabs.types.d.ts
DELETED
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
import { StateMachine as S } from "@zag-js/core";
|
|
2
|
-
import { Context, DirectionProperty } 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 & {
|
|
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 = Partial<PublicContext>;
|
|
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 {};
|