@zag-js/tabs 0.0.0-dev-20230201173935 → 0.0.0-dev-20230201190914

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.
@@ -7,30 +7,23 @@ function isDocument(el) {
7
7
  return el.nodeType === Node.DOCUMENT_NODE;
8
8
  }
9
9
  function isWindow(value) {
10
- return (value == null ? void 0 : value.toString()) === "[object Window]";
10
+ return value?.toString() === "[object Window]";
11
11
  }
12
12
  function isFrame(element) {
13
13
  return element.localName === "iframe";
14
14
  }
15
15
  function getDocument(el) {
16
- var _a;
17
16
  if (isWindow(el))
18
17
  return el.document;
19
18
  if (isDocument(el))
20
19
  return el;
21
- return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
20
+ return el?.ownerDocument ?? document;
22
21
  }
23
22
  function defineDomHelpers(helpers) {
24
23
  const dom2 = {
25
- getRootNode: (ctx) => {
26
- var _a, _b;
27
- return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
28
- },
24
+ getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
29
25
  getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
30
- getWin: (ctx) => {
31
- var _a;
32
- return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
33
- },
26
+ getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
34
27
  getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
35
28
  getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
36
29
  };
@@ -40,7 +33,7 @@ function defineDomHelpers(helpers) {
40
33
  };
41
34
  }
42
35
  function isHTMLElement(v) {
43
- return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
36
+ return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
44
37
  }
45
38
  function isVisible(el) {
46
39
  if (!isHTMLElement(el))
@@ -50,8 +43,7 @@ function isVisible(el) {
50
43
 
51
44
  // ../../utilities/dom/src/nodelist.ts
52
45
  function queryAll(root, selector) {
53
- var _a;
54
- return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
46
+ return Array.from(root?.querySelectorAll(selector) ?? []);
55
47
  }
56
48
  function itemById(v, id) {
57
49
  return v.find((node) => node.id === id);
@@ -75,26 +67,11 @@ function prevById(v, id, loop = true) {
75
67
 
76
68
  // src/tabs.dom.ts
77
69
  var dom = defineDomHelpers({
78
- getRootId: (ctx) => {
79
- var _a, _b;
80
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `tabs:${ctx.id}`;
81
- },
82
- getTablistId: (ctx) => {
83
- var _a, _b;
84
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.tablist) != null ? _b : `tabs:${ctx.id}:list`;
85
- },
86
- getContentId: (ctx, id) => {
87
- var _a, _b;
88
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tabs:${ctx.id}:content-${id}`;
89
- },
90
- getContentGroupId: (ctx) => {
91
- var _a, _b;
92
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.contentGroup) != null ? _b : `tabs:${ctx.id}:content-group`;
93
- },
94
- getTriggerId: (ctx, id) => {
95
- var _a, _b;
96
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tabs:${ctx.id}:trigger-${id}`;
97
- },
70
+ getRootId: (ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`,
71
+ getTablistId: (ctx) => ctx.ids?.tablist ?? `tabs:${ctx.id}:list`,
72
+ getContentId: (ctx, id) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,
73
+ getContentGroupId: (ctx) => ctx.ids?.contentGroup ?? `tabs:${ctx.id}:content-group`,
74
+ getTriggerId: (ctx, id) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,
98
75
  getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
99
76
  getTablistEl: (ctx) => dom.getById(ctx, dom.getTablistId(ctx)),
100
77
  getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
@@ -116,14 +93,13 @@ var dom = defineDomHelpers({
116
93
  return dom.getById(ctx, id);
117
94
  },
118
95
  getRectById: (ctx, id) => {
119
- var _a;
120
96
  const empty = {
121
97
  offsetLeft: 0,
122
98
  offsetTop: 0,
123
99
  offsetWidth: 0,
124
100
  offsetHeight: 0
125
101
  };
126
- const tab = (_a = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id))) != null ? _a : empty;
102
+ const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
127
103
  if (ctx.isVertical) {
128
104
  return {
129
105
  top: `${tab.offsetTop}px`,
@@ -3,7 +3,7 @@ import {
3
3
  isFrame,
4
4
  isHTMLElement,
5
5
  isVisible
6
- } from "./chunk-OCAWEK4A.mjs";
6
+ } from "./chunk-4CROPD6E.mjs";
7
7
 
8
8
  // src/tabs.machine.ts
9
9
  import { createMachine, guards } from "@zag-js/core";
@@ -195,32 +195,25 @@ function machine(userContext) {
195
195
  ctx2.value = null;
196
196
  },
197
197
  invokeOnDelete(ctx2, evt) {
198
- var _a;
199
- (_a = ctx2.onDelete) == null ? void 0 : _a.call(ctx2, { value: evt.value });
198
+ ctx2.onDelete?.({ value: evt.value });
200
199
  },
201
200
  focusFirstTab(ctx2) {
202
- raf(() => {
203
- var _a;
204
- return (_a = dom.getFirstEl(ctx2)) == null ? void 0 : _a.focus();
205
- });
201
+ raf(() => dom.getFirstEl(ctx2)?.focus());
206
202
  },
207
203
  focusLastTab(ctx2) {
208
- raf(() => {
209
- var _a;
210
- return (_a = dom.getLastEl(ctx2)) == null ? void 0 : _a.focus();
211
- });
204
+ raf(() => dom.getLastEl(ctx2)?.focus());
212
205
  },
213
206
  focusNextTab(ctx2) {
214
207
  if (!ctx2.focusedValue)
215
208
  return;
216
209
  const next = dom.getNextEl(ctx2, ctx2.focusedValue);
217
- raf(() => next == null ? void 0 : next.focus());
210
+ raf(() => next?.focus());
218
211
  },
219
212
  focusPrevTab(ctx2) {
220
213
  if (!ctx2.focusedValue)
221
214
  return;
222
215
  const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
223
- raf(() => prev == null ? void 0 : prev.focus());
216
+ raf(() => prev?.focus());
224
217
  },
225
218
  setIndicatorRect(ctx2) {
226
219
  nextTick(() => {
@@ -241,12 +234,10 @@ function machine(userContext) {
241
234
  ctx2.hasMeasuredRect = false;
242
235
  },
243
236
  invokeOnChange(ctx2) {
244
- var _a;
245
- (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
237
+ ctx2.onChange?.({ value: ctx2.value });
246
238
  },
247
239
  invokeOnFocus(ctx2) {
248
- var _a;
249
- (_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, { value: ctx2.focusedValue });
240
+ ctx2.onFocus?.({ value: ctx2.focusedValue });
250
241
  },
251
242
  setPrevSelectedTabs(ctx2) {
252
243
  if (ctx2.value != null) {
@@ -1,9 +1,9 @@
1
1
  import {
2
2
  parts
3
- } from "./chunk-BBWXWUXV.mjs";
3
+ } from "./chunk-S2KW2DT4.mjs";
4
4
  import {
5
5
  dom
6
- } from "./chunk-OCAWEK4A.mjs";
6
+ } from "./chunk-4CROPD6E.mjs";
7
7
 
8
8
  // ../../utilities/dom/src/attrs.ts
9
9
  var dataAttr = (guard) => {
@@ -13,9 +13,8 @@ var dataAttr = (guard) => {
13
13
  // ../../utilities/dom/src/platform.ts
14
14
  var isDom = () => typeof window !== "undefined";
15
15
  function getPlatform() {
16
- var _a;
17
16
  const agent = navigator.userAgentData;
18
- return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
17
+ return agent?.platform ?? navigator.platform;
19
18
  }
20
19
  var pt = (v) => isDom() && v.test(getPlatform());
21
20
  var vn = (v) => isDom() && v.test(navigator.vendor);
@@ -37,10 +36,9 @@ var sameKeyMap = {
37
36
  Right: "ArrowRight"
38
37
  };
39
38
  function getEventKey(event, options = {}) {
40
- var _a;
41
39
  const { dir = "ltr", orientation = "horizontal" } = options;
42
40
  let { key } = event;
43
- key = (_a = sameKeyMap[key]) != null ? _a : key;
41
+ key = sameKeyMap[key] ?? key;
44
42
  const isRtl = dir === "rtl" && orientation === "horizontal";
45
43
  if (isRtl && key in rtlKeyMap) {
46
44
  key = rtlKeyMap[key];
@@ -132,7 +130,7 @@ function connect(state, send, normalize) {
132
130
  },
133
131
  onBlur(event) {
134
132
  const target = event.relatedTarget;
135
- if ((target == null ? void 0 : target.getAttribute("role")) !== "tab") {
133
+ if (target?.getAttribute("role") !== "tab") {
136
134
  send({ type: "TAB_BLUR" });
137
135
  }
138
136
  },
File without changes
package/dist/index.js CHANGED
@@ -56,9 +56,8 @@ function compact(obj) {
56
56
  // ../../utilities/dom/src/platform.ts
57
57
  var isDom = () => typeof window !== "undefined";
58
58
  function getPlatform() {
59
- var _a;
60
59
  const agent = navigator.userAgentData;
61
- return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
60
+ return agent?.platform ?? navigator.platform;
62
61
  }
63
62
  var pt = (v) => isDom() && v.test(getPlatform());
64
63
  var vn = (v) => isDom() && v.test(navigator.vendor);
@@ -70,30 +69,23 @@ function isDocument(el) {
70
69
  return el.nodeType === Node.DOCUMENT_NODE;
71
70
  }
72
71
  function isWindow(value) {
73
- return (value == null ? void 0 : value.toString()) === "[object Window]";
72
+ return value?.toString() === "[object Window]";
74
73
  }
75
74
  function isFrame(element) {
76
75
  return element.localName === "iframe";
77
76
  }
78
77
  function getDocument(el) {
79
- var _a;
80
78
  if (isWindow(el))
81
79
  return el.document;
82
80
  if (isDocument(el))
83
81
  return el;
84
- return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
82
+ return el?.ownerDocument ?? document;
85
83
  }
86
84
  function defineDomHelpers(helpers) {
87
85
  const dom2 = {
88
- getRootNode: (ctx) => {
89
- var _a, _b;
90
- return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
91
- },
86
+ getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
92
87
  getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
93
- getWin: (ctx) => {
94
- var _a;
95
- return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
96
- },
88
+ getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
97
89
  getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
98
90
  getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
99
91
  };
@@ -103,7 +95,7 @@ function defineDomHelpers(helpers) {
103
95
  };
104
96
  }
105
97
  function isHTMLElement(v) {
106
- return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
98
+ return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
107
99
  }
108
100
  function isVisible(el) {
109
101
  if (!isHTMLElement(el))
@@ -151,10 +143,9 @@ var sameKeyMap = {
151
143
  Right: "ArrowRight"
152
144
  };
153
145
  function getEventKey(event, options = {}) {
154
- var _a;
155
146
  const { dir = "ltr", orientation = "horizontal" } = options;
156
147
  let { key } = event;
157
- key = (_a = sameKeyMap[key]) != null ? _a : key;
148
+ key = sameKeyMap[key] ?? key;
158
149
  const isRtl = dir === "rtl" && orientation === "horizontal";
159
150
  if (isRtl && key in rtlKeyMap) {
160
151
  key = rtlKeyMap[key];
@@ -185,8 +176,7 @@ function raf(fn) {
185
176
 
186
177
  // ../../utilities/dom/src/nodelist.ts
187
178
  function queryAll(root, selector) {
188
- var _a;
189
- return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
179
+ return Array.from(root?.querySelectorAll(selector) ?? []);
190
180
  }
191
181
  function itemById(v, id) {
192
182
  return v.find((node) => node.id === id);
@@ -210,26 +200,11 @@ function prevById(v, id, loop = true) {
210
200
 
211
201
  // src/tabs.dom.ts
212
202
  var dom = defineDomHelpers({
213
- getRootId: (ctx) => {
214
- var _a, _b;
215
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `tabs:${ctx.id}`;
216
- },
217
- getTablistId: (ctx) => {
218
- var _a, _b;
219
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.tablist) != null ? _b : `tabs:${ctx.id}:list`;
220
- },
221
- getContentId: (ctx, id) => {
222
- var _a, _b;
223
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tabs:${ctx.id}:content-${id}`;
224
- },
225
- getContentGroupId: (ctx) => {
226
- var _a, _b;
227
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.contentGroup) != null ? _b : `tabs:${ctx.id}:content-group`;
228
- },
229
- getTriggerId: (ctx, id) => {
230
- var _a, _b;
231
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tabs:${ctx.id}:trigger-${id}`;
232
- },
203
+ getRootId: (ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`,
204
+ getTablistId: (ctx) => ctx.ids?.tablist ?? `tabs:${ctx.id}:list`,
205
+ getContentId: (ctx, id) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,
206
+ getContentGroupId: (ctx) => ctx.ids?.contentGroup ?? `tabs:${ctx.id}:content-group`,
207
+ getTriggerId: (ctx, id) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,
233
208
  getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
234
209
  getTablistEl: (ctx) => dom.getById(ctx, dom.getTablistId(ctx)),
235
210
  getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
@@ -251,14 +226,13 @@ var dom = defineDomHelpers({
251
226
  return dom.getById(ctx, id);
252
227
  },
253
228
  getRectById: (ctx, id) => {
254
- var _a;
255
229
  const empty = {
256
230
  offsetLeft: 0,
257
231
  offsetTop: 0,
258
232
  offsetWidth: 0,
259
233
  offsetHeight: 0
260
234
  };
261
- const tab = (_a = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id))) != null ? _a : empty;
235
+ const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
262
236
  if (ctx.isVertical) {
263
237
  return {
264
238
  top: `${tab.offsetTop}px`,
@@ -356,7 +330,7 @@ function connect(state, send, normalize) {
356
330
  },
357
331
  onBlur(event) {
358
332
  const target = event.relatedTarget;
359
- if ((target == null ? void 0 : target.getAttribute("role")) !== "tab") {
333
+ if (target?.getAttribute("role") !== "tab") {
360
334
  send({ type: "TAB_BLUR" });
361
335
  }
362
336
  },
@@ -534,32 +508,25 @@ function machine(userContext) {
534
508
  ctx2.value = null;
535
509
  },
536
510
  invokeOnDelete(ctx2, evt) {
537
- var _a;
538
- (_a = ctx2.onDelete) == null ? void 0 : _a.call(ctx2, { value: evt.value });
511
+ ctx2.onDelete?.({ value: evt.value });
539
512
  },
540
513
  focusFirstTab(ctx2) {
541
- raf(() => {
542
- var _a;
543
- return (_a = dom.getFirstEl(ctx2)) == null ? void 0 : _a.focus();
544
- });
514
+ raf(() => dom.getFirstEl(ctx2)?.focus());
545
515
  },
546
516
  focusLastTab(ctx2) {
547
- raf(() => {
548
- var _a;
549
- return (_a = dom.getLastEl(ctx2)) == null ? void 0 : _a.focus();
550
- });
517
+ raf(() => dom.getLastEl(ctx2)?.focus());
551
518
  },
552
519
  focusNextTab(ctx2) {
553
520
  if (!ctx2.focusedValue)
554
521
  return;
555
522
  const next = dom.getNextEl(ctx2, ctx2.focusedValue);
556
- raf(() => next == null ? void 0 : next.focus());
523
+ raf(() => next?.focus());
557
524
  },
558
525
  focusPrevTab(ctx2) {
559
526
  if (!ctx2.focusedValue)
560
527
  return;
561
528
  const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
562
- raf(() => prev == null ? void 0 : prev.focus());
529
+ raf(() => prev?.focus());
563
530
  },
564
531
  setIndicatorRect(ctx2) {
565
532
  nextTick(() => {
@@ -580,12 +547,10 @@ function machine(userContext) {
580
547
  ctx2.hasMeasuredRect = false;
581
548
  },
582
549
  invokeOnChange(ctx2) {
583
- var _a;
584
- (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
550
+ ctx2.onChange?.({ value: ctx2.value });
585
551
  },
586
552
  invokeOnFocus(ctx2) {
587
- var _a;
588
- (_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, { value: ctx2.focusedValue });
553
+ ctx2.onFocus?.({ value: ctx2.focusedValue });
589
554
  },
590
555
  setPrevSelectedTabs(ctx2) {
591
556
  if (ctx2.value != null) {
package/dist/index.mjs CHANGED
@@ -1,13 +1,13 @@
1
1
  import {
2
2
  connect
3
- } from "./chunk-GUXUMDPX.mjs";
3
+ } from "./chunk-IVTIBLCN.mjs";
4
4
  import {
5
5
  anatomy
6
- } from "./chunk-BBWXWUXV.mjs";
6
+ } from "./chunk-S2KW2DT4.mjs";
7
7
  import {
8
8
  machine
9
- } from "./chunk-T37OKX74.mjs";
10
- import "./chunk-OCAWEK4A.mjs";
9
+ } from "./chunk-4JBQFNAL.mjs";
10
+ import "./chunk-4CROPD6E.mjs";
11
11
  export {
12
12
  anatomy,
13
13
  connect,
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  anatomy,
3
3
  parts
4
- } from "./chunk-BBWXWUXV.mjs";
4
+ } from "./chunk-S2KW2DT4.mjs";
5
5
  export {
6
6
  anatomy,
7
7
  parts
@@ -36,9 +36,8 @@ var last = (v) => v[v.length - 1];
36
36
  // ../../utilities/dom/src/platform.ts
37
37
  var isDom = () => typeof window !== "undefined";
38
38
  function getPlatform() {
39
- var _a;
40
39
  const agent = navigator.userAgentData;
41
- return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
40
+ return agent?.platform ?? navigator.platform;
42
41
  }
43
42
  var pt = (v) => isDom() && v.test(getPlatform());
44
43
  var vn = (v) => isDom() && v.test(navigator.vendor);
@@ -50,27 +49,20 @@ function isDocument(el) {
50
49
  return el.nodeType === Node.DOCUMENT_NODE;
51
50
  }
52
51
  function isWindow(value) {
53
- return (value == null ? void 0 : value.toString()) === "[object Window]";
52
+ return value?.toString() === "[object Window]";
54
53
  }
55
54
  function getDocument(el) {
56
- var _a;
57
55
  if (isWindow(el))
58
56
  return el.document;
59
57
  if (isDocument(el))
60
58
  return el;
61
- return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
59
+ return el?.ownerDocument ?? document;
62
60
  }
63
61
  function defineDomHelpers(helpers) {
64
62
  const dom2 = {
65
- getRootNode: (ctx) => {
66
- var _a, _b;
67
- return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
68
- },
63
+ getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
69
64
  getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
70
- getWin: (ctx) => {
71
- var _a;
72
- return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
73
- },
65
+ getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
74
66
  getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
75
67
  getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
76
68
  };
@@ -95,10 +87,9 @@ var sameKeyMap = {
95
87
  Right: "ArrowRight"
96
88
  };
97
89
  function getEventKey(event, options = {}) {
98
- var _a;
99
90
  const { dir = "ltr", orientation = "horizontal" } = options;
100
91
  let { key } = event;
101
- key = (_a = sameKeyMap[key]) != null ? _a : key;
92
+ key = sameKeyMap[key] ?? key;
102
93
  const isRtl = dir === "rtl" && orientation === "horizontal";
103
94
  if (isRtl && key in rtlKeyMap) {
104
95
  key = rtlKeyMap[key];
@@ -108,8 +99,7 @@ function getEventKey(event, options = {}) {
108
99
 
109
100
  // ../../utilities/dom/src/nodelist.ts
110
101
  function queryAll(root, selector) {
111
- var _a;
112
- return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
102
+ return Array.from(root?.querySelectorAll(selector) ?? []);
113
103
  }
114
104
  function itemById(v, id) {
115
105
  return v.find((node) => node.id === id);
@@ -138,26 +128,11 @@ var parts = anatomy.build();
138
128
 
139
129
  // src/tabs.dom.ts
140
130
  var dom = defineDomHelpers({
141
- getRootId: (ctx) => {
142
- var _a, _b;
143
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `tabs:${ctx.id}`;
144
- },
145
- getTablistId: (ctx) => {
146
- var _a, _b;
147
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.tablist) != null ? _b : `tabs:${ctx.id}:list`;
148
- },
149
- getContentId: (ctx, id) => {
150
- var _a, _b;
151
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tabs:${ctx.id}:content-${id}`;
152
- },
153
- getContentGroupId: (ctx) => {
154
- var _a, _b;
155
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.contentGroup) != null ? _b : `tabs:${ctx.id}:content-group`;
156
- },
157
- getTriggerId: (ctx, id) => {
158
- var _a, _b;
159
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tabs:${ctx.id}:trigger-${id}`;
160
- },
131
+ getRootId: (ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`,
132
+ getTablistId: (ctx) => ctx.ids?.tablist ?? `tabs:${ctx.id}:list`,
133
+ getContentId: (ctx, id) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,
134
+ getContentGroupId: (ctx) => ctx.ids?.contentGroup ?? `tabs:${ctx.id}:content-group`,
135
+ getTriggerId: (ctx, id) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,
161
136
  getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
162
137
  getTablistEl: (ctx) => dom.getById(ctx, dom.getTablistId(ctx)),
163
138
  getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
@@ -179,14 +154,13 @@ var dom = defineDomHelpers({
179
154
  return dom.getById(ctx, id);
180
155
  },
181
156
  getRectById: (ctx, id) => {
182
- var _a;
183
157
  const empty = {
184
158
  offsetLeft: 0,
185
159
  offsetTop: 0,
186
160
  offsetWidth: 0,
187
161
  offsetHeight: 0
188
162
  };
189
- const tab = (_a = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id))) != null ? _a : empty;
163
+ const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
190
164
  if (ctx.isVertical) {
191
165
  return {
192
166
  top: `${tab.offsetTop}px`,
@@ -284,7 +258,7 @@ function connect(state, send, normalize) {
284
258
  },
285
259
  onBlur(event) {
286
260
  const target = event.relatedTarget;
287
- if ((target == null ? void 0 : target.getAttribute("role")) !== "tab") {
261
+ if (target?.getAttribute("role") !== "tab") {
288
262
  send({ type: "TAB_BLUR" });
289
263
  }
290
264
  },
@@ -1,8 +1,8 @@
1
1
  import {
2
2
  connect
3
- } from "./chunk-GUXUMDPX.mjs";
4
- import "./chunk-BBWXWUXV.mjs";
5
- import "./chunk-OCAWEK4A.mjs";
3
+ } from "./chunk-IVTIBLCN.mjs";
4
+ import "./chunk-S2KW2DT4.mjs";
5
+ import "./chunk-4CROPD6E.mjs";
6
6
  export {
7
7
  connect
8
8
  };
package/dist/tabs.dom.js CHANGED
@@ -33,27 +33,20 @@ function isDocument(el) {
33
33
  return el.nodeType === Node.DOCUMENT_NODE;
34
34
  }
35
35
  function isWindow(value) {
36
- return (value == null ? void 0 : value.toString()) === "[object Window]";
36
+ return value?.toString() === "[object Window]";
37
37
  }
38
38
  function getDocument(el) {
39
- var _a;
40
39
  if (isWindow(el))
41
40
  return el.document;
42
41
  if (isDocument(el))
43
42
  return el;
44
- return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
43
+ return el?.ownerDocument ?? document;
45
44
  }
46
45
  function defineDomHelpers(helpers) {
47
46
  const dom2 = {
48
- getRootNode: (ctx) => {
49
- var _a, _b;
50
- return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
51
- },
47
+ getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
52
48
  getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
53
- getWin: (ctx) => {
54
- var _a;
55
- return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
56
- },
49
+ getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
57
50
  getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
58
51
  getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
59
52
  };
@@ -65,8 +58,7 @@ function defineDomHelpers(helpers) {
65
58
 
66
59
  // ../../utilities/dom/src/nodelist.ts
67
60
  function queryAll(root, selector) {
68
- var _a;
69
- return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
61
+ return Array.from(root?.querySelectorAll(selector) ?? []);
70
62
  }
71
63
  function itemById(v, id) {
72
64
  return v.find((node) => node.id === id);
@@ -90,26 +82,11 @@ function prevById(v, id, loop = true) {
90
82
 
91
83
  // src/tabs.dom.ts
92
84
  var dom = defineDomHelpers({
93
- getRootId: (ctx) => {
94
- var _a, _b;
95
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `tabs:${ctx.id}`;
96
- },
97
- getTablistId: (ctx) => {
98
- var _a, _b;
99
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.tablist) != null ? _b : `tabs:${ctx.id}:list`;
100
- },
101
- getContentId: (ctx, id) => {
102
- var _a, _b;
103
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tabs:${ctx.id}:content-${id}`;
104
- },
105
- getContentGroupId: (ctx) => {
106
- var _a, _b;
107
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.contentGroup) != null ? _b : `tabs:${ctx.id}:content-group`;
108
- },
109
- getTriggerId: (ctx, id) => {
110
- var _a, _b;
111
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tabs:${ctx.id}:trigger-${id}`;
112
- },
85
+ getRootId: (ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`,
86
+ getTablistId: (ctx) => ctx.ids?.tablist ?? `tabs:${ctx.id}:list`,
87
+ getContentId: (ctx, id) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,
88
+ getContentGroupId: (ctx) => ctx.ids?.contentGroup ?? `tabs:${ctx.id}:content-group`,
89
+ getTriggerId: (ctx, id) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,
113
90
  getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
114
91
  getTablistEl: (ctx) => dom.getById(ctx, dom.getTablistId(ctx)),
115
92
  getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
@@ -131,14 +108,13 @@ var dom = defineDomHelpers({
131
108
  return dom.getById(ctx, id);
132
109
  },
133
110
  getRectById: (ctx, id) => {
134
- var _a;
135
111
  const empty = {
136
112
  offsetLeft: 0,
137
113
  offsetTop: 0,
138
114
  offsetWidth: 0,
139
115
  offsetHeight: 0
140
116
  };
141
- const tab = (_a = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id))) != null ? _a : empty;
117
+ const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
142
118
  if (ctx.isVertical) {
143
119
  return {
144
120
  top: `${tab.offsetTop}px`,
package/dist/tabs.dom.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  dom
3
- } from "./chunk-OCAWEK4A.mjs";
3
+ } from "./chunk-4CROPD6E.mjs";
4
4
  export {
5
5
  dom
6
6
  };
@@ -47,30 +47,23 @@ function isDocument(el) {
47
47
  return el.nodeType === Node.DOCUMENT_NODE;
48
48
  }
49
49
  function isWindow(value) {
50
- return (value == null ? void 0 : value.toString()) === "[object Window]";
50
+ return value?.toString() === "[object Window]";
51
51
  }
52
52
  function isFrame(element) {
53
53
  return element.localName === "iframe";
54
54
  }
55
55
  function getDocument(el) {
56
- var _a;
57
56
  if (isWindow(el))
58
57
  return el.document;
59
58
  if (isDocument(el))
60
59
  return el;
61
- return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
60
+ return el?.ownerDocument ?? document;
62
61
  }
63
62
  function defineDomHelpers(helpers) {
64
63
  const dom2 = {
65
- getRootNode: (ctx) => {
66
- var _a, _b;
67
- return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
68
- },
64
+ getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
69
65
  getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
70
- getWin: (ctx) => {
71
- var _a;
72
- return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
73
- },
66
+ getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
74
67
  getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
75
68
  getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
76
69
  };
@@ -80,7 +73,7 @@ function defineDomHelpers(helpers) {
80
73
  };
81
74
  }
82
75
  function isHTMLElement(v) {
83
- return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
76
+ return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
84
77
  }
85
78
  function isVisible(el) {
86
79
  if (!isHTMLElement(el))
@@ -136,8 +129,7 @@ function raf(fn) {
136
129
 
137
130
  // ../../utilities/dom/src/nodelist.ts
138
131
  function queryAll(root, selector) {
139
- var _a;
140
- return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
132
+ return Array.from(root?.querySelectorAll(selector) ?? []);
141
133
  }
142
134
  function itemById(v, id) {
143
135
  return v.find((node) => node.id === id);
@@ -161,26 +153,11 @@ function prevById(v, id, loop = true) {
161
153
 
162
154
  // src/tabs.dom.ts
163
155
  var dom = defineDomHelpers({
164
- getRootId: (ctx) => {
165
- var _a, _b;
166
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `tabs:${ctx.id}`;
167
- },
168
- getTablistId: (ctx) => {
169
- var _a, _b;
170
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.tablist) != null ? _b : `tabs:${ctx.id}:list`;
171
- },
172
- getContentId: (ctx, id) => {
173
- var _a, _b;
174
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tabs:${ctx.id}:content-${id}`;
175
- },
176
- getContentGroupId: (ctx) => {
177
- var _a, _b;
178
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.contentGroup) != null ? _b : `tabs:${ctx.id}:content-group`;
179
- },
180
- getTriggerId: (ctx, id) => {
181
- var _a, _b;
182
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tabs:${ctx.id}:trigger-${id}`;
183
- },
156
+ getRootId: (ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`,
157
+ getTablistId: (ctx) => ctx.ids?.tablist ?? `tabs:${ctx.id}:list`,
158
+ getContentId: (ctx, id) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,
159
+ getContentGroupId: (ctx) => ctx.ids?.contentGroup ?? `tabs:${ctx.id}:content-group`,
160
+ getTriggerId: (ctx, id) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,
184
161
  getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
185
162
  getTablistEl: (ctx) => dom.getById(ctx, dom.getTablistId(ctx)),
186
163
  getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
@@ -202,14 +179,13 @@ var dom = defineDomHelpers({
202
179
  return dom.getById(ctx, id);
203
180
  },
204
181
  getRectById: (ctx, id) => {
205
- var _a;
206
182
  const empty = {
207
183
  offsetLeft: 0,
208
184
  offsetTop: 0,
209
185
  offsetWidth: 0,
210
186
  offsetHeight: 0
211
187
  };
212
- const tab = (_a = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id))) != null ? _a : empty;
188
+ const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
213
189
  if (ctx.isVertical) {
214
190
  return {
215
191
  top: `${tab.offsetTop}px`,
@@ -351,32 +327,25 @@ function machine(userContext) {
351
327
  ctx2.value = null;
352
328
  },
353
329
  invokeOnDelete(ctx2, evt) {
354
- var _a;
355
- (_a = ctx2.onDelete) == null ? void 0 : _a.call(ctx2, { value: evt.value });
330
+ ctx2.onDelete?.({ value: evt.value });
356
331
  },
357
332
  focusFirstTab(ctx2) {
358
- raf(() => {
359
- var _a;
360
- return (_a = dom.getFirstEl(ctx2)) == null ? void 0 : _a.focus();
361
- });
333
+ raf(() => dom.getFirstEl(ctx2)?.focus());
362
334
  },
363
335
  focusLastTab(ctx2) {
364
- raf(() => {
365
- var _a;
366
- return (_a = dom.getLastEl(ctx2)) == null ? void 0 : _a.focus();
367
- });
336
+ raf(() => dom.getLastEl(ctx2)?.focus());
368
337
  },
369
338
  focusNextTab(ctx2) {
370
339
  if (!ctx2.focusedValue)
371
340
  return;
372
341
  const next = dom.getNextEl(ctx2, ctx2.focusedValue);
373
- raf(() => next == null ? void 0 : next.focus());
342
+ raf(() => next?.focus());
374
343
  },
375
344
  focusPrevTab(ctx2) {
376
345
  if (!ctx2.focusedValue)
377
346
  return;
378
347
  const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
379
- raf(() => prev == null ? void 0 : prev.focus());
348
+ raf(() => prev?.focus());
380
349
  },
381
350
  setIndicatorRect(ctx2) {
382
351
  nextTick(() => {
@@ -397,12 +366,10 @@ function machine(userContext) {
397
366
  ctx2.hasMeasuredRect = false;
398
367
  },
399
368
  invokeOnChange(ctx2) {
400
- var _a;
401
- (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
369
+ ctx2.onChange?.({ value: ctx2.value });
402
370
  },
403
371
  invokeOnFocus(ctx2) {
404
- var _a;
405
- (_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, { value: ctx2.focusedValue });
372
+ ctx2.onFocus?.({ value: ctx2.focusedValue });
406
373
  },
407
374
  setPrevSelectedTabs(ctx2) {
408
375
  if (ctx2.value != null) {
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  machine
3
- } from "./chunk-T37OKX74.mjs";
4
- import "./chunk-OCAWEK4A.mjs";
3
+ } from "./chunk-4JBQFNAL.mjs";
4
+ import "./chunk-4CROPD6E.mjs";
5
5
  export {
6
6
  machine
7
7
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/tabs",
3
- "version": "0.0.0-dev-20230201173935",
3
+ "version": "0.0.0-dev-20230201190914",
4
4
  "description": "Core logic for the tabs widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",
@@ -26,14 +26,14 @@
26
26
  "url": "https://github.com/chakra-ui/zag/issues"
27
27
  },
28
28
  "dependencies": {
29
- "@zag-js/anatomy": "0.1.3",
30
- "@zag-js/core": "0.0.0-dev-20230201173935",
31
- "@zag-js/types": "0.0.0-dev-20230201173935"
29
+ "@zag-js/anatomy": "0.0.0-dev-20230201190914",
30
+ "@zag-js/core": "0.0.0-dev-20230201190914",
31
+ "@zag-js/types": "0.0.0-dev-20230201190914"
32
32
  },
33
33
  "devDependencies": {
34
34
  "clean-package": "2.2.0",
35
- "@zag-js/dom-utils": "0.0.0-dev-20230201173935",
36
- "@zag-js/utils": "0.3.2"
35
+ "@zag-js/dom-utils": "0.0.0-dev-20230201190914",
36
+ "@zag-js/utils": "0.0.0-dev-20230201190914"
37
37
  },
38
38
  "clean-package": "../../../clean-package.config.json",
39
39
  "main": "dist/index.js",