@zag-js/tabs 0.1.9 → 0.1.10

package/dist/index.js

@@ -40,6 +40,22 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // ../../utilities/dom/dist/index.mjs
+var __defProp2 = Object.defineProperty;
+var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
+var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp2.call(b, prop))
+      __defNormalProp2(a, prop, b[prop]);
+  if (__getOwnPropSymbols2)
+    for (var prop of __getOwnPropSymbols2(b)) {
+      if (__propIsEnum2.call(b, prop))
+        __defNormalProp2(a, prop, b[prop]);
+    }
+  return a;
+};
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
@@ -53,9 +69,39 @@ var pt = (v) => isDom() && v.test(getPlatform());
 var vn = (v) => isDom() && v.test(navigator.vendor);
 var isSafari = () => isApple() && vn(/apple/i);
 var isApple = () => pt(/mac|iphone|ipad|ipod/i);
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
 function isFrame(element) {
   return element.localName === "iframe";
 }
+function getDocument(el) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+}
+function defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => {
+      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) => {
+      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)
+  };
+  return __spreadValues2(__spreadValues2({}, dom2), helpers);
+}
 function isHTMLElement(v) {
   return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
 }
@@ -161,40 +207,32 @@ var first = (v) => v[0];
 var last = (v) => v[v.length - 1];
 
 // src/tabs.dom.ts
-var dom = {
-  getDoc: (ctx) => {
-    var _a;
-    return (_a = ctx.doc) != null ? _a : document;
-  },
-  getRootNode: (ctx) => {
-    var _a;
-    return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
-  },
+var dom = defineDomHelpers({
   getRootId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `tabs:${ctx.uid}`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `tabs:${ctx.id}`;
   },
   getTriggerGroupId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.triggerGroup) != null ? _b : `tabs:${ctx.uid}:trigger-group`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.triggerGroup) != null ? _b : `tabs:${ctx.id}:trigger-group`;
   },
   getContentId: (ctx, id) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tabs:${ctx.uid}:content-${id}`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tabs:${ctx.id}:content-${id}`;
   },
   getContentGroupId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.contentGroup) != null ? _b : `tabs:${ctx.uid}:content-group`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.contentGroup) != null ? _b : `tabs:${ctx.id}:content-group`;
   },
   getTriggerId: (ctx, id) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tabs:${ctx.uid}:trigger-${id}`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tabs:${ctx.id}:trigger-${id}`;
   },
-  getIndicatorId: (ctx) => `tabs:${ctx.uid}:indicator`,
-  getTriggerGroupEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getTriggerGroupId(ctx)),
-  getContentEl: (ctx, id) => dom.getRootNode(ctx).getElementById(dom.getContentId(ctx, id)),
-  getTriggerEl: (ctx, id) => dom.getRootNode(ctx).getElementById(dom.getTriggerId(ctx, id)),
-  getIndicatorEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getIndicatorId(ctx)),
+  getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
+  getTriggerGroupEl: (ctx) => dom.getById(ctx, dom.getTriggerGroupId(ctx)),
+  getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
+  getTriggerEl: (ctx, id) => dom.getById(ctx, dom.getTriggerId(ctx, id)),
+  getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
   getElements: (ctx) => {
     const ownerId = CSS.escape(dom.getTriggerGroupId(ctx));
     const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`;
@@ -208,7 +246,7 @@ var dom = {
     if (!ctx.value)
       return;
     const id = dom.getContentId(ctx, ctx.value);
-    return dom.getRootNode(ctx).getElementById(id);
+    return dom.getById(ctx, id);
   },
   getRectById: (ctx, id) => {
     var _a;
@@ -230,7 +268,7 @@ var dom = {
       width: `${tab.offsetWidth}px`
     };
   }
-};
+});
 
 // src/tabs.connect.ts
 function connect(state, send, normalize) {
@@ -377,7 +415,7 @@ 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(ctx) {
   return (0, import_core.createMachine)({
     initial: "unknown",
     context: __spreadValues({
@@ -386,7 +424,6 @@ function machine(ctx = {}) {
       activationMode: "automatic",
       value: null,
       focusedValue: null,
-      uid: "",
       previousValues: [],
       indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
       hasMeasuredRect: false,
@@ -417,7 +454,7 @@ function machine(ctx = {}) {
         on: {
           SETUP: {
             target: "idle",
-            actions: ["setupDocument", "checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
+            actions: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
           }
         }
       },
@@ -487,13 +524,6 @@ function machine(ctx = {}) {
       selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
     },
     actions: {
-      setupDocument(ctx2, evt) {
-        ctx2.uid = evt.id;
-        if (evt.doc)
-          ctx2.doc = (0, import_core.ref)(evt.doc);
-        if (evt.root)
-          ctx2.rootNode = (0, import_core.ref)(evt.root);
-      },
       setFocusedValue(ctx2, evt) {
         ctx2.focusedValue = evt.value;
       },
@@ -544,9 +574,7 @@ function machine(ctx = {}) {
         });
       },
       checkRenderedElements(ctx2) {
-        nextTick(() => {
-          ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
-        });
+        ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
       },
       clearMeasured(ctx2) {
         ctx2.hasMeasuredRect = false;

package/dist/index.mjs

@@ -16,6 +16,22 @@ var __spreadValues = (a, b) => {
 };
 
 // ../../utilities/dom/dist/index.mjs
+var __defProp2 = Object.defineProperty;
+var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
+var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp2.call(b, prop))
+      __defNormalProp2(a, prop, b[prop]);
+  if (__getOwnPropSymbols2)
+    for (var prop of __getOwnPropSymbols2(b)) {
+      if (__propIsEnum2.call(b, prop))
+        __defNormalProp2(a, prop, b[prop]);
+    }
+  return a;
+};
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
@@ -29,9 +45,39 @@ var pt = (v) => isDom() && v.test(getPlatform());
 var vn = (v) => isDom() && v.test(navigator.vendor);
 var isSafari = () => isApple() && vn(/apple/i);
 var isApple = () => pt(/mac|iphone|ipad|ipod/i);
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
 function isFrame(element) {
   return element.localName === "iframe";
 }
+function getDocument(el) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+}
+function defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => {
+      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) => {
+      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)
+  };
+  return __spreadValues2(__spreadValues2({}, dom2), helpers);
+}
 function isHTMLElement(v) {
   return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
 }
@@ -137,40 +183,32 @@ var first = (v) => v[0];
 var last = (v) => v[v.length - 1];
 
 // src/tabs.dom.ts
-var dom = {
-  getDoc: (ctx) => {
-    var _a;
-    return (_a = ctx.doc) != null ? _a : document;
-  },
-  getRootNode: (ctx) => {
-    var _a;
-    return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
-  },
+var dom = defineDomHelpers({
   getRootId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `tabs:${ctx.uid}`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `tabs:${ctx.id}`;
   },
   getTriggerGroupId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.triggerGroup) != null ? _b : `tabs:${ctx.uid}:trigger-group`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.triggerGroup) != null ? _b : `tabs:${ctx.id}:trigger-group`;
   },
   getContentId: (ctx, id) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tabs:${ctx.uid}:content-${id}`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tabs:${ctx.id}:content-${id}`;
   },
   getContentGroupId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.contentGroup) != null ? _b : `tabs:${ctx.uid}:content-group`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.contentGroup) != null ? _b : `tabs:${ctx.id}:content-group`;
   },
   getTriggerId: (ctx, id) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tabs:${ctx.uid}:trigger-${id}`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tabs:${ctx.id}:trigger-${id}`;
   },
-  getIndicatorId: (ctx) => `tabs:${ctx.uid}:indicator`,
-  getTriggerGroupEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getTriggerGroupId(ctx)),
-  getContentEl: (ctx, id) => dom.getRootNode(ctx).getElementById(dom.getContentId(ctx, id)),
-  getTriggerEl: (ctx, id) => dom.getRootNode(ctx).getElementById(dom.getTriggerId(ctx, id)),
-  getIndicatorEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getIndicatorId(ctx)),
+  getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
+  getTriggerGroupEl: (ctx) => dom.getById(ctx, dom.getTriggerGroupId(ctx)),
+  getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
+  getTriggerEl: (ctx, id) => dom.getById(ctx, dom.getTriggerId(ctx, id)),
+  getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
   getElements: (ctx) => {
     const ownerId = CSS.escape(dom.getTriggerGroupId(ctx));
     const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`;
@@ -184,7 +222,7 @@ var dom = {
     if (!ctx.value)
       return;
     const id = dom.getContentId(ctx, ctx.value);
-    return dom.getRootNode(ctx).getElementById(id);
+    return dom.getById(ctx, id);
   },
   getRectById: (ctx, id) => {
     var _a;
@@ -206,7 +244,7 @@ var dom = {
       width: `${tab.offsetWidth}px`
     };
   }
-};
+});
 
 // src/tabs.connect.ts
 function connect(state, send, normalize) {
@@ -351,9 +389,9 @@ function connect(state, send, normalize) {
 }
 
 // src/tabs.machine.ts
-import { createMachine, guards, ref } from "@zag-js/core";
+import { createMachine, guards } from "@zag-js/core";
 var { not } = guards;
-function machine(ctx = {}) {
+function machine(ctx) {
   return createMachine({
     initial: "unknown",
     context: __spreadValues({
@@ -362,7 +400,6 @@ function machine(ctx = {}) {
       activationMode: "automatic",
       value: null,
       focusedValue: null,
-      uid: "",
       previousValues: [],
       indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
       hasMeasuredRect: false,
@@ -393,7 +430,7 @@ function machine(ctx = {}) {
         on: {
           SETUP: {
             target: "idle",
-            actions: ["setupDocument", "checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
+            actions: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
           }
         }
       },
@@ -463,13 +500,6 @@ function machine(ctx = {}) {
       selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
     },
     actions: {
-      setupDocument(ctx2, evt) {
-        ctx2.uid = evt.id;
-        if (evt.doc)
-          ctx2.doc = ref(evt.doc);
-        if (evt.root)
-          ctx2.rootNode = ref(evt.root);
-      },
       setFocusedValue(ctx2, evt) {
         ctx2.focusedValue = evt.value;
       },
@@ -520,9 +550,7 @@ function machine(ctx = {}) {
         });
       },
       checkRenderedElements(ctx2) {
-        nextTick(() => {
-          ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
-        });
+        ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
       },
       clearMeasured(ctx2) {
         ctx2.hasMeasuredRect = false;

package/dist/tabs.dom.d.ts

@@ -1,7 +1,21 @@
 import type { MachineContext as Ctx } from "./tabs.types";
 export declare const dom: {
-    getDoc: (ctx: Ctx) => Document;
-    getRootNode: (ctx: Ctx) => Document | ShadowRoot;
+    getRootNode: (ctx: {
+        getRootNode?: () => Node | Document | ShadowRoot;
+    }) => Document | ShadowRoot;
+    getDoc: (ctx: {
+        getRootNode?: () => Node | Document | ShadowRoot;
+    }) => Document;
+    getWin: (ctx: {
+        getRootNode?: () => Node | Document | ShadowRoot;
+    }) => Window & typeof globalThis;
+    getActiveElement: (ctx: {
+        getRootNode?: () => Node | Document | ShadowRoot;
+    }) => HTMLElement;
+    getById: <T_1 = HTMLElement>(ctx: {
+        getRootNode?: () => Node | Document | ShadowRoot;
+    }, id: string) => T_1;
+} & {
     getRootId: (ctx: Ctx) => string;
     getTriggerGroupId: (ctx: Ctx) => string;
     getContentId: (ctx: Ctx, id: string) => string;

package/dist/tabs.machine.d.ts

@@ -1,2 +1,2 @@
 import type { MachineContext, MachineState, UserDefinedContext } from "./tabs.types";
-export declare function machine(ctx?: UserDefinedContext): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;
+export declare function machine(ctx: UserDefinedContext): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;

package/dist/tabs.types.d.ts

@@ -1,5 +1,5 @@
 import type { StateMachine as S } from "@zag-js/core";
-import type { Context, DirectionProperty } from "@zag-js/types";
+import type { CommonProperties, Context, DirectionProperty, RequiredBy } from "@zag-js/types";
 declare type IntlMessages = {
     tablistLabel?: string;
     deleteLabel?(value: string): string;
@@ -11,7 +11,7 @@ declare type ElementIds = Partial<{
     contentGroup: string;
     content: string;
 }>;
-declare type PublicContext = DirectionProperty & {
+declare type PublicContext = DirectionProperty & CommonProperties & {
     /**
      * The ids of the elements in the tabs. Useful for composition.
      */
@@ -67,7 +67,7 @@ declare type PublicContext = DirectionProperty & {
         value: string;
     }) => void;
 };
-export declare type UserDefinedContext = Partial<PublicContext>;
+export declare type UserDefinedContext = RequiredBy<PublicContext, "id">;
 declare type ComputedContext = Readonly<{
     /**
      * @computed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/tabs",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Core logic for the tabs widget implemented as a state machine",
   "keywords": [
     "js",
@@ -29,9 +29,11 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "0.1.7",
-    "@zag-js/dom-utils": "0.1.6",
-    "@zag-js/types": "0.2.1",
+    "@zag-js/core": "0.1.8",
+    "@zag-js/types": "0.2.2"
+  },
+  "devDependencies": {
+    "@zag-js/dom-utils": "0.1.7",
     "@zag-js/utils": "0.1.2"
   },
   "scripts": {