@zag-js/tabs 0.1.15 → 0.2.0

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.
Files changed (3) hide show
  1. package/dist/index.js +45 -19
  2. package/dist/index.mjs +45 -19
  3. package/package.json +5 -5
package/dist/index.js CHANGED
@@ -31,8 +31,9 @@ var dataAttr = (guard) => {
31
31
  };
32
32
  var isDom = () => typeof window !== "undefined";
33
33
  function getPlatform() {
34
+ var _a;
34
35
  const agent = navigator.userAgentData;
35
- return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
36
+ return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
36
37
  }
37
38
  var pt = (v) => isDom() && v.test(getPlatform());
38
39
  var vn = (v) => isDom() && v.test(navigator.vendor);
@@ -48,22 +49,44 @@ function isFrame(element) {
48
49
  return element.localName === "iframe";
49
50
  }
50
51
  function getDocument(el) {
52
+ var _a;
51
53
  if (isWindow(el))
52
54
  return el.document;
53
55
  if (isDocument(el))
54
56
  return el;
55
- return (el == null ? void 0 : el.ownerDocument) ?? document;
57
+ return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
56
58
  }
57
59
  function defineDomHelpers(helpers) {
58
60
  const dom2 = {
59
61
  getRootNode: (ctx) => {
60
- var _a;
61
- return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
62
+ var _a, _b;
63
+ return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
62
64
  },
63
65
  getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
64
- getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
66
+ getWin: (ctx) => {
67
+ var _a;
68
+ return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
69
+ },
65
70
  getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
66
- getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
71
+ getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
72
+ createEmitter: (ctx, target) => {
73
+ const win = dom2.getWin(ctx);
74
+ return function emit(evt, detail, options) {
75
+ const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
76
+ const eventName = `zag:${evt}`;
77
+ const init = { bubbles, cancelable, composed, detail };
78
+ const event = new win.CustomEvent(eventName, init);
79
+ target.dispatchEvent(event);
80
+ };
81
+ },
82
+ createListener: (target) => {
83
+ return function listen(evt, handler) {
84
+ const eventName = `zag:${evt}`;
85
+ const listener = (e) => handler(e);
86
+ target.addEventListener(eventName, listener);
87
+ return () => target.removeEventListener(eventName, listener);
88
+ };
89
+ }
67
90
  };
68
91
  return {
69
92
  ...dom2,
@@ -115,9 +138,10 @@ var sameKeyMap = {
115
138
  Right: "ArrowRight"
116
139
  };
117
140
  function getEventKey(event, options = {}) {
141
+ var _a;
118
142
  const { dir = "ltr", orientation = "horizontal" } = options;
119
143
  let { key } = event;
120
- key = sameKeyMap[key] ?? key;
144
+ key = (_a = sameKeyMap[key]) != null ? _a : key;
121
145
  const isRtl = dir === "rtl" && orientation === "horizontal";
122
146
  if (isRtl && key in rtlKeyMap) {
123
147
  key = rtlKeyMap[key];
@@ -144,7 +168,8 @@ function raf(fn) {
144
168
  };
145
169
  }
146
170
  function queryAll(root, selector) {
147
- return Array.from((root == null ? void 0 : root.querySelectorAll(selector)) ?? []);
171
+ var _a;
172
+ return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
148
173
  }
149
174
  function itemById(v, id) {
150
175
  return v.find((node) => node.id === id);
@@ -173,24 +198,24 @@ var last = (v) => v[v.length - 1];
173
198
  // src/tabs.dom.ts
174
199
  var dom = defineDomHelpers({
175
200
  getRootId: (ctx) => {
176
- var _a;
177
- return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `tabs:${ctx.id}`;
201
+ var _a, _b;
202
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `tabs:${ctx.id}`;
178
203
  },
179
204
  getTriggerGroupId: (ctx) => {
180
- var _a;
181
- return ((_a = ctx.ids) == null ? void 0 : _a.triggerGroup) ?? `tabs:${ctx.id}:trigger-group`;
205
+ var _a, _b;
206
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.triggerGroup) != null ? _b : `tabs:${ctx.id}:trigger-group`;
182
207
  },
183
208
  getContentId: (ctx, id) => {
184
- var _a;
185
- return ((_a = ctx.ids) == null ? void 0 : _a.content) ?? `tabs:${ctx.id}:content-${id}`;
209
+ var _a, _b;
210
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tabs:${ctx.id}:content-${id}`;
186
211
  },
187
212
  getContentGroupId: (ctx) => {
188
- var _a;
189
- return ((_a = ctx.ids) == null ? void 0 : _a.contentGroup) ?? `tabs:${ctx.id}:content-group`;
213
+ var _a, _b;
214
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.contentGroup) != null ? _b : `tabs:${ctx.id}:content-group`;
190
215
  },
191
216
  getTriggerId: (ctx, id) => {
192
- var _a;
193
- return ((_a = ctx.ids) == null ? void 0 : _a.trigger) ?? `tabs:${ctx.id}:trigger-${id}`;
217
+ var _a, _b;
218
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tabs:${ctx.id}:trigger-${id}`;
194
219
  },
195
220
  getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
196
221
  getTriggerGroupEl: (ctx) => dom.getById(ctx, dom.getTriggerGroupId(ctx)),
@@ -213,13 +238,14 @@ var dom = defineDomHelpers({
213
238
  return dom.getById(ctx, id);
214
239
  },
215
240
  getRectById: (ctx, id) => {
241
+ var _a;
216
242
  const empty = {
217
243
  offsetLeft: 0,
218
244
  offsetTop: 0,
219
245
  offsetWidth: 0,
220
246
  offsetHeight: 0
221
247
  };
222
- const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
248
+ const tab = (_a = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id))) != null ? _a : empty;
223
249
  if (ctx.isVertical) {
224
250
  return {
225
251
  top: `${tab.offsetTop}px`,
package/dist/index.mjs CHANGED
@@ -4,8 +4,9 @@ var dataAttr = (guard) => {
4
4
  };
5
5
  var isDom = () => typeof window !== "undefined";
6
6
  function getPlatform() {
7
+ var _a;
7
8
  const agent = navigator.userAgentData;
8
- return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
9
+ return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
9
10
  }
10
11
  var pt = (v) => isDom() && v.test(getPlatform());
11
12
  var vn = (v) => isDom() && v.test(navigator.vendor);
@@ -21,22 +22,44 @@ function isFrame(element) {
21
22
  return element.localName === "iframe";
22
23
  }
23
24
  function getDocument(el) {
25
+ var _a;
24
26
  if (isWindow(el))
25
27
  return el.document;
26
28
  if (isDocument(el))
27
29
  return el;
28
- return (el == null ? void 0 : el.ownerDocument) ?? document;
30
+ return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
29
31
  }
30
32
  function defineDomHelpers(helpers) {
31
33
  const dom2 = {
32
34
  getRootNode: (ctx) => {
33
- var _a;
34
- return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
35
+ var _a, _b;
36
+ return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
35
37
  },
36
38
  getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
37
- getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
39
+ getWin: (ctx) => {
40
+ var _a;
41
+ return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
42
+ },
38
43
  getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
39
- getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
44
+ getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
45
+ createEmitter: (ctx, target) => {
46
+ const win = dom2.getWin(ctx);
47
+ return function emit(evt, detail, options) {
48
+ const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
49
+ const eventName = `zag:${evt}`;
50
+ const init = { bubbles, cancelable, composed, detail };
51
+ const event = new win.CustomEvent(eventName, init);
52
+ target.dispatchEvent(event);
53
+ };
54
+ },
55
+ createListener: (target) => {
56
+ return function listen(evt, handler) {
57
+ const eventName = `zag:${evt}`;
58
+ const listener = (e) => handler(e);
59
+ target.addEventListener(eventName, listener);
60
+ return () => target.removeEventListener(eventName, listener);
61
+ };
62
+ }
40
63
  };
41
64
  return {
42
65
  ...dom2,
@@ -88,9 +111,10 @@ var sameKeyMap = {
88
111
  Right: "ArrowRight"
89
112
  };
90
113
  function getEventKey(event, options = {}) {
114
+ var _a;
91
115
  const { dir = "ltr", orientation = "horizontal" } = options;
92
116
  let { key } = event;
93
- key = sameKeyMap[key] ?? key;
117
+ key = (_a = sameKeyMap[key]) != null ? _a : key;
94
118
  const isRtl = dir === "rtl" && orientation === "horizontal";
95
119
  if (isRtl && key in rtlKeyMap) {
96
120
  key = rtlKeyMap[key];
@@ -117,7 +141,8 @@ function raf(fn) {
117
141
  };
118
142
  }
119
143
  function queryAll(root, selector) {
120
- return Array.from((root == null ? void 0 : root.querySelectorAll(selector)) ?? []);
144
+ var _a;
145
+ return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
121
146
  }
122
147
  function itemById(v, id) {
123
148
  return v.find((node) => node.id === id);
@@ -146,24 +171,24 @@ var last = (v) => v[v.length - 1];
146
171
  // src/tabs.dom.ts
147
172
  var dom = defineDomHelpers({
148
173
  getRootId: (ctx) => {
149
- var _a;
150
- return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `tabs:${ctx.id}`;
174
+ var _a, _b;
175
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `tabs:${ctx.id}`;
151
176
  },
152
177
  getTriggerGroupId: (ctx) => {
153
- var _a;
154
- return ((_a = ctx.ids) == null ? void 0 : _a.triggerGroup) ?? `tabs:${ctx.id}:trigger-group`;
178
+ var _a, _b;
179
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.triggerGroup) != null ? _b : `tabs:${ctx.id}:trigger-group`;
155
180
  },
156
181
  getContentId: (ctx, id) => {
157
- var _a;
158
- return ((_a = ctx.ids) == null ? void 0 : _a.content) ?? `tabs:${ctx.id}:content-${id}`;
182
+ var _a, _b;
183
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tabs:${ctx.id}:content-${id}`;
159
184
  },
160
185
  getContentGroupId: (ctx) => {
161
- var _a;
162
- return ((_a = ctx.ids) == null ? void 0 : _a.contentGroup) ?? `tabs:${ctx.id}:content-group`;
186
+ var _a, _b;
187
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.contentGroup) != null ? _b : `tabs:${ctx.id}:content-group`;
163
188
  },
164
189
  getTriggerId: (ctx, id) => {
165
- var _a;
166
- return ((_a = ctx.ids) == null ? void 0 : _a.trigger) ?? `tabs:${ctx.id}:trigger-${id}`;
190
+ var _a, _b;
191
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tabs:${ctx.id}:trigger-${id}`;
167
192
  },
168
193
  getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
169
194
  getTriggerGroupEl: (ctx) => dom.getById(ctx, dom.getTriggerGroupId(ctx)),
@@ -186,13 +211,14 @@ var dom = defineDomHelpers({
186
211
  return dom.getById(ctx, id);
187
212
  },
188
213
  getRectById: (ctx, id) => {
214
+ var _a;
189
215
  const empty = {
190
216
  offsetLeft: 0,
191
217
  offsetTop: 0,
192
218
  offsetWidth: 0,
193
219
  offsetHeight: 0
194
220
  };
195
- const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
221
+ const tab = (_a = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id))) != null ? _a : empty;
196
222
  if (ctx.isVertical) {
197
223
  return {
198
224
  top: `${tab.offsetTop}px`,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/tabs",
3
- "version": "0.1.15",
3
+ "version": "0.2.0",
4
4
  "description": "Core logic for the tabs widget implemented as a state machine",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -29,12 +29,12 @@
29
29
  "url": "https://github.com/chakra-ui/zag/issues"
30
30
  },
31
31
  "dependencies": {
32
- "@zag-js/core": "0.1.12",
33
- "@zag-js/types": "0.2.7"
32
+ "@zag-js/core": "0.2.0",
33
+ "@zag-js/types": "0.3.0"
34
34
  },
35
35
  "devDependencies": {
36
- "@zag-js/dom-utils": "0.1.13",
37
- "@zag-js/utils": "0.1.6"
36
+ "@zag-js/dom-utils": "0.2.0",
37
+ "@zag-js/utils": "0.2.0"
38
38
  },
39
39
  "scripts": {
40
40
  "build-fast": "tsup src/index.ts --format=esm,cjs",