@zag-js/tabs 0.1.15 → 0.2.1

package/dist/index.d.ts

@@ -110,6 +110,6 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
     indicatorProps: T["element"];
 };
 
-declare function machine(ctx: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
 export { UserDefinedContext as Context, connect, machine };

package/dist/index.js

@@ -31,8 +31,9 @@ var dataAttr = (guard) => {
 };
 var isDom = () => typeof window !== "undefined";
 function getPlatform() {
+  var _a;
   const agent = navigator.userAgentData;
-  return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
+  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
 }
 var pt = (v) => isDom() && v.test(getPlatform());
 var vn = (v) => isDom() && v.test(navigator.vendor);
@@ -48,22 +49,44 @@ function isFrame(element) {
   return element.localName === "iframe";
 }
 function getDocument(el) {
+  var _a;
   if (isWindow(el))
     return el.document;
   if (isDocument(el))
     return el;
-  return (el == null ? void 0 : el.ownerDocument) ?? document;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
 }
 function defineDomHelpers(helpers) {
   const dom2 = {
     getRootNode: (ctx) => {
-      var _a;
-      return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
+      var _a, _b;
+      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
     },
     getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
+    getWin: (ctx) => {
+      var _a;
+      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
+    },
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
-    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
+    createEmitter: (ctx, target) => {
+      const win = dom2.getWin(ctx);
+      return function emit(evt, detail, options) {
+        const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
+        const eventName = `zag:${evt}`;
+        const init = { bubbles, cancelable, composed, detail };
+        const event = new win.CustomEvent(eventName, init);
+        target.dispatchEvent(event);
+      };
+    },
+    createListener: (target) => {
+      return function listen(evt, handler) {
+        const eventName = `zag:${evt}`;
+        const listener = (e) => handler(e);
+        target.addEventListener(eventName, listener);
+        return () => target.removeEventListener(eventName, listener);
+      };
+    }
   };
   return {
     ...dom2,
@@ -115,9 +138,10 @@ var sameKeyMap = {
   Right: "ArrowRight"
 };
 function getEventKey(event, options = {}) {
+  var _a;
   const { dir = "ltr", orientation = "horizontal" } = options;
   let { key } = event;
-  key = sameKeyMap[key] ?? key;
+  key = (_a = sameKeyMap[key]) != null ? _a : key;
   const isRtl = dir === "rtl" && orientation === "horizontal";
   if (isRtl && key in rtlKeyMap) {
     key = rtlKeyMap[key];
@@ -144,7 +168,8 @@ function raf(fn) {
   };
 }
 function queryAll(root, selector) {
-  return Array.from((root == null ? void 0 : root.querySelectorAll(selector)) ?? []);
+  var _a;
+  return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
 }
 function itemById(v, id) {
   return v.find((node) => node.id === id);
@@ -169,28 +194,37 @@ function prevById(v, id, loop = true) {
 // ../../utilities/core/dist/index.mjs
 var first = (v) => v[0];
 var last = (v) => v[v.length - 1];
+var isArray = (v) => Array.isArray(v);
+var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
+function compact(obj) {
+  if (obj === void 0)
+    return obj;
+  return Object.fromEntries(
+    Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
+  );
+}
 
 // src/tabs.dom.ts
 var dom = defineDomHelpers({
   getRootId: (ctx) => {
-    var _a;
-    return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `tabs:${ctx.id}`;
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `tabs:${ctx.id}`;
   },
   getTriggerGroupId: (ctx) => {
-    var _a;
-    return ((_a = ctx.ids) == null ? void 0 : _a.triggerGroup) ?? `tabs:${ctx.id}:trigger-group`;
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.triggerGroup) != null ? _b : `tabs:${ctx.id}:trigger-group`;
   },
   getContentId: (ctx, id) => {
-    var _a;
-    return ((_a = ctx.ids) == null ? void 0 : _a.content) ?? `tabs:${ctx.id}:content-${id}`;
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tabs:${ctx.id}:content-${id}`;
   },
   getContentGroupId: (ctx) => {
-    var _a;
-    return ((_a = ctx.ids) == null ? void 0 : _a.contentGroup) ?? `tabs:${ctx.id}:content-group`;
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.contentGroup) != null ? _b : `tabs:${ctx.id}:content-group`;
   },
   getTriggerId: (ctx, id) => {
-    var _a;
-    return ((_a = ctx.ids) == null ? void 0 : _a.trigger) ?? `tabs:${ctx.id}:trigger-${id}`;
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tabs:${ctx.id}:trigger-${id}`;
   },
   getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
   getTriggerGroupEl: (ctx) => dom.getById(ctx, dom.getTriggerGroupId(ctx)),
@@ -213,13 +247,14 @@ var dom = defineDomHelpers({
     return dom.getById(ctx, id);
   },
   getRectById: (ctx, id) => {
+    var _a;
     const empty = {
       offsetLeft: 0,
       offsetTop: 0,
       offsetWidth: 0,
       offsetHeight: 0
     };
-    const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
+    const tab = (_a = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id))) != null ? _a : empty;
     if (ctx.isVertical) {
       return {
         top: `${tab.offsetTop}px`,
@@ -379,7 +414,8 @@ function connect(state, send, normalize) {
 // src/tabs.machine.ts
 var import_core = require("@zag-js/core");
 var { not } = import_core.guards;
-function machine(ctx) {
+function machine(userContext) {
+  const ctx = compact(userContext);
   return (0, import_core.createMachine)(
     {
       initial: "unknown",

package/dist/index.mjs

@@ -4,8 +4,9 @@ var dataAttr = (guard) => {
 };
 var isDom = () => typeof window !== "undefined";
 function getPlatform() {
+  var _a;
   const agent = navigator.userAgentData;
-  return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
+  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
 }
 var pt = (v) => isDom() && v.test(getPlatform());
 var vn = (v) => isDom() && v.test(navigator.vendor);
@@ -21,22 +22,44 @@ function isFrame(element) {
   return element.localName === "iframe";
 }
 function getDocument(el) {
+  var _a;
   if (isWindow(el))
     return el.document;
   if (isDocument(el))
     return el;
-  return (el == null ? void 0 : el.ownerDocument) ?? document;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
 }
 function defineDomHelpers(helpers) {
   const dom2 = {
     getRootNode: (ctx) => {
-      var _a;
-      return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
+      var _a, _b;
+      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
     },
     getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
+    getWin: (ctx) => {
+      var _a;
+      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
+    },
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
-    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
+    createEmitter: (ctx, target) => {
+      const win = dom2.getWin(ctx);
+      return function emit(evt, detail, options) {
+        const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
+        const eventName = `zag:${evt}`;
+        const init = { bubbles, cancelable, composed, detail };
+        const event = new win.CustomEvent(eventName, init);
+        target.dispatchEvent(event);
+      };
+    },
+    createListener: (target) => {
+      return function listen(evt, handler) {
+        const eventName = `zag:${evt}`;
+        const listener = (e) => handler(e);
+        target.addEventListener(eventName, listener);
+        return () => target.removeEventListener(eventName, listener);
+      };
+    }
   };
   return {
     ...dom2,
@@ -88,9 +111,10 @@ var sameKeyMap = {
   Right: "ArrowRight"
 };
 function getEventKey(event, options = {}) {
+  var _a;
   const { dir = "ltr", orientation = "horizontal" } = options;
   let { key } = event;
-  key = sameKeyMap[key] ?? key;
+  key = (_a = sameKeyMap[key]) != null ? _a : key;
   const isRtl = dir === "rtl" && orientation === "horizontal";
   if (isRtl && key in rtlKeyMap) {
     key = rtlKeyMap[key];
@@ -117,7 +141,8 @@ function raf(fn) {
   };
 }
 function queryAll(root, selector) {
-  return Array.from((root == null ? void 0 : root.querySelectorAll(selector)) ?? []);
+  var _a;
+  return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
 }
 function itemById(v, id) {
   return v.find((node) => node.id === id);
@@ -142,28 +167,37 @@ function prevById(v, id, loop = true) {
 // ../../utilities/core/dist/index.mjs
 var first = (v) => v[0];
 var last = (v) => v[v.length - 1];
+var isArray = (v) => Array.isArray(v);
+var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
+function compact(obj) {
+  if (obj === void 0)
+    return obj;
+  return Object.fromEntries(
+    Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
+  );
+}
 
 // src/tabs.dom.ts
 var dom = defineDomHelpers({
   getRootId: (ctx) => {
-    var _a;
-    return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `tabs:${ctx.id}`;
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `tabs:${ctx.id}`;
   },
   getTriggerGroupId: (ctx) => {
-    var _a;
-    return ((_a = ctx.ids) == null ? void 0 : _a.triggerGroup) ?? `tabs:${ctx.id}:trigger-group`;
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.triggerGroup) != null ? _b : `tabs:${ctx.id}:trigger-group`;
   },
   getContentId: (ctx, id) => {
-    var _a;
-    return ((_a = ctx.ids) == null ? void 0 : _a.content) ?? `tabs:${ctx.id}:content-${id}`;
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tabs:${ctx.id}:content-${id}`;
   },
   getContentGroupId: (ctx) => {
-    var _a;
-    return ((_a = ctx.ids) == null ? void 0 : _a.contentGroup) ?? `tabs:${ctx.id}:content-group`;
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.contentGroup) != null ? _b : `tabs:${ctx.id}:content-group`;
   },
   getTriggerId: (ctx, id) => {
-    var _a;
-    return ((_a = ctx.ids) == null ? void 0 : _a.trigger) ?? `tabs:${ctx.id}:trigger-${id}`;
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tabs:${ctx.id}:trigger-${id}`;
   },
   getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
   getTriggerGroupEl: (ctx) => dom.getById(ctx, dom.getTriggerGroupId(ctx)),
@@ -186,13 +220,14 @@ var dom = defineDomHelpers({
     return dom.getById(ctx, id);
   },
   getRectById: (ctx, id) => {
+    var _a;
     const empty = {
       offsetLeft: 0,
       offsetTop: 0,
       offsetWidth: 0,
       offsetHeight: 0
     };
-    const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
+    const tab = (_a = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id))) != null ? _a : empty;
     if (ctx.isVertical) {
       return {
         top: `${tab.offsetTop}px`,
@@ -352,7 +387,8 @@ function connect(state, send, normalize) {
 // src/tabs.machine.ts
 import { createMachine, guards } from "@zag-js/core";
 var { not } = guards;
-function machine(ctx) {
+function machine(userContext) {
+  const ctx = compact(userContext);
   return createMachine(
     {
       initial: "unknown",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/tabs",
-  "version": "0.1.15",
+  "version": "0.2.1",
   "description": "Core logic for the tabs widget implemented as a state machine",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -29,12 +29,12 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "0.1.12",
-    "@zag-js/types": "0.2.7"
+    "@zag-js/core": "0.2.1",
+    "@zag-js/types": "0.3.0"
   },
   "devDependencies": {
-    "@zag-js/dom-utils": "0.1.13",
-    "@zag-js/utils": "0.1.6"
+    "@zag-js/dom-utils": "0.2.0",
+    "@zag-js/utils": "0.3.0"
   },
   "scripts": {
     "build-fast": "tsup src/index.ts --format=esm,cjs",