@zag-js/tabs 0.1.9 → 0.1.12

package/dist/index.js

@@ -2,21 +2,7 @@
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -45,17 +31,45 @@ var dataAttr = (guard) => {
 };
 var isDom = () => typeof window !== "undefined";
 function getPlatform() {
-  var _a;
   const agent = navigator.userAgentData;
-  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
+  return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
 }
 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) {
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (el == null ? void 0 : el.ownerDocument) ?? document;
+}
+function defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => {
+      var _a;
+      return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
+    },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
+    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
+  };
+  return {
+    ...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";
 }
@@ -103,10 +117,9 @@ var sameKeyMap = {
   Right: "ArrowRight"
 };
 function getEventKey(event, options = {}) {
-  var _a;
   const { dir = "ltr", orientation = "horizontal" } = options;
   let { key } = event;
-  key = (_a = sameKeyMap[key]) != null ? _a : key;
+  key = sameKeyMap[key] ?? key;
   const isRtl = dir === "rtl" && orientation === "horizontal";
   if (isRtl && key in rtlKeyMap) {
     key = rtlKeyMap[key];
@@ -133,8 +146,7 @@ function raf(fn) {
   };
 }
 function queryAll(root, selector) {
-  var _a;
-  return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
+  return Array.from((root == null ? void 0 : root.querySelectorAll(selector)) ?? []);
 }
 function itemById(v, id) {
   return v.find((node) => node.id === id);
@@ -161,40 +173,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}`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `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`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.triggerGroup) ?? `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}`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.content) ?? `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`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.contentGroup) ?? `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}`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.trigger) ?? `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,17 +212,16 @@ 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;
     const empty = {
       offsetLeft: 0,
       offsetTop: 0,
       offsetWidth: 0,
       offsetHeight: 0
     };
-    const tab = (_a = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id))) != null ? _a : empty;
+    const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
     if (ctx.isVertical) {
       return {
         top: `${tab.offsetTop}px`,
@@ -230,7 +233,7 @@ var dom = {
       width: `${tab.offsetWidth}px`
     };
   }
-};
+});
 
 // src/tabs.connect.ts
 function connect(state, send, normalize) {
@@ -361,15 +364,16 @@ function connect(state, send, normalize) {
       id: dom.getIndicatorId(state.context),
       "data-part": "indicator",
       "data-orientation": state.context.orientation,
-      style: __spreadValues({
+      style: {
         "--transition-duration": "200ms",
         "--transition-property": "left, right, top, bottom, width, height",
         position: "absolute",
         willChange: "var(--transition-property)",
         transitionProperty: "var(--transition-property)",
         transitionDuration: state.context.hasMeasuredRect ? "var(--transition-duration)" : "0ms",
-        transitionTimingFunction: "var(--transition-timing-function)"
-      }, state.context.indicatorRect)
+        transitionTimingFunction: "var(--transition-timing-function)",
+        ...state.context.indicatorRect
+      }
     })
   };
 }
@@ -377,207 +381,206 @@ function connect(state, send, normalize) {
 // src/tabs.machine.ts
 var import_core = require("@zag-js/core");
 var { not } = import_core.guards;
-function machine(ctx = {}) {
-  return (0, import_core.createMachine)({
-    initial: "unknown",
-    context: __spreadValues({
-      dir: "ltr",
-      orientation: "horizontal",
-      activationMode: "automatic",
-      value: null,
-      focusedValue: null,
-      uid: "",
-      previousValues: [],
-      indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
-      hasMeasuredRect: false,
-      isIndicatorRendered: false,
-      loop: true,
-      messages: {}
-    }, ctx),
-    computed: {
-      isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
-      isVertical: (ctx2) => ctx2.orientation === "vertical"
-    },
-    created: ["setPrevSelectedTabs"],
-    watch: {
-      focusedValue: "invokeOnFocus",
-      value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"],
-      dir: ["clearMeasured", "setIndicatorRect"]
-    },
-    on: {
-      SET_VALUE: {
-        actions: "setValue"
+function machine(ctx) {
+  return (0, import_core.createMachine)(
+    {
+      initial: "unknown",
+      context: {
+        dir: "ltr",
+        orientation: "horizontal",
+        activationMode: "automatic",
+        value: null,
+        focusedValue: null,
+        previousValues: [],
+        indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
+        hasMeasuredRect: false,
+        isIndicatorRendered: false,
+        loop: true,
+        messages: {},
+        ...ctx
       },
-      DELETE: {
-        actions: "deleteValue"
-      }
-    },
-    states: {
-      unknown: {
-        on: {
-          SETUP: {
-            target: "idle",
-            actions: ["setupDocument", "checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
-          }
-        }
+      computed: {
+        isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
+        isVertical: (ctx2) => ctx2.orientation === "vertical"
       },
-      idle: {
-        on: {
-          TAB_FOCUS: {
-            guard: "selectOnFocus",
-            target: "focused",
-            actions: ["setFocusedValue", "setValue"]
-          },
-          TAB_CLICK: {
-            target: "focused",
-            actions: ["setFocusedValue", "setValue"]
-          }
+      created: ["setPrevSelectedTabs"],
+      watch: {
+        focusedValue: "invokeOnFocus",
+        value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"],
+        dir: ["clearMeasured", "setIndicatorRect"]
+      },
+      on: {
+        SET_VALUE: {
+          actions: "setValue"
+        },
+        DELETE: {
+          actions: "deleteValue"
         }
       },
-      focused: {
-        on: {
-          TAB_CLICK: {
-            target: "focused",
-            actions: ["setFocusedValue", "setValue"]
-          },
-          ARROW_LEFT: {
-            guard: "isHorizontal",
-            actions: "focusPrevTab"
-          },
-          ARROW_RIGHT: {
-            guard: "isHorizontal",
-            actions: "focusNextTab"
-          },
-          ARROW_UP: {
-            guard: "isVertical",
-            actions: "focusPrevTab"
-          },
-          ARROW_DOWN: {
-            guard: "isVertical",
-            actions: "focusNextTab"
-          },
-          HOME: {
-            actions: "focusFirstTab"
-          },
-          END: {
-            actions: "focusLastTab"
-          },
-          ENTER: {
-            guard: not("selectOnFocus"),
-            actions: "setValue"
-          },
-          TAB_FOCUS: [
-            {
+      states: {
+        unknown: {
+          on: {
+            SETUP: {
+              target: "idle",
+              actions: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
+            }
+          }
+        },
+        idle: {
+          on: {
+            TAB_FOCUS: {
               guard: "selectOnFocus",
+              target: "focused",
+              actions: ["setFocusedValue", "setValue"]
+            },
+            TAB_CLICK: {
+              target: "focused",
+              actions: ["setFocusedValue", "setValue"]
+            }
+          }
+        },
+        focused: {
+          on: {
+            TAB_CLICK: {
+              target: "focused",
               actions: ["setFocusedValue", "setValue"]
             },
-            { actions: "setFocusedValue" }
-          ],
-          TAB_BLUR: {
-            target: "idle",
-            actions: "clearFocusedValue"
+            ARROW_LEFT: {
+              guard: "isHorizontal",
+              actions: "focusPrevTab"
+            },
+            ARROW_RIGHT: {
+              guard: "isHorizontal",
+              actions: "focusNextTab"
+            },
+            ARROW_UP: {
+              guard: "isVertical",
+              actions: "focusPrevTab"
+            },
+            ARROW_DOWN: {
+              guard: "isVertical",
+              actions: "focusNextTab"
+            },
+            HOME: {
+              actions: "focusFirstTab"
+            },
+            END: {
+              actions: "focusLastTab"
+            },
+            ENTER: {
+              guard: not("selectOnFocus"),
+              actions: "setValue"
+            },
+            TAB_FOCUS: [
+              {
+                guard: "selectOnFocus",
+                actions: ["setFocusedValue", "setValue"]
+              },
+              { actions: "setFocusedValue" }
+            ],
+            TAB_BLUR: {
+              target: "idle",
+              actions: "clearFocusedValue"
+            }
           }
         }
       }
-    }
-  }, {
-    guards: {
-      isVertical: (ctx2) => ctx2.isVertical,
-      isHorizontal: (ctx2) => ctx2.isHorizontal,
-      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;
-      },
-      clearFocusedValue(ctx2) {
-        ctx2.focusedValue = null;
-      },
-      setValue(ctx2, evt) {
-        ctx2.value = evt.value;
+    {
+      guards: {
+        isVertical: (ctx2) => ctx2.isVertical,
+        isHorizontal: (ctx2) => ctx2.isHorizontal,
+        selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
       },
-      invokeOnDelete(ctx2, evt) {
-        var _a;
-        (_a = ctx2.onDelete) == null ? void 0 : _a.call(ctx2, { value: evt.value });
-      },
-      focusFirstTab(ctx2) {
-        raf(() => {
-          var _a;
-          return (_a = dom.getFirstEl(ctx2)) == null ? void 0 : _a.focus();
-        });
-      },
-      focusLastTab(ctx2) {
-        raf(() => {
+      actions: {
+        setFocusedValue(ctx2, evt) {
+          ctx2.focusedValue = evt.value;
+        },
+        clearFocusedValue(ctx2) {
+          ctx2.focusedValue = null;
+        },
+        setValue(ctx2, evt) {
+          ctx2.value = evt.value;
+        },
+        invokeOnDelete(ctx2, evt) {
           var _a;
-          return (_a = dom.getLastEl(ctx2)) == null ? void 0 : _a.focus();
-        });
-      },
-      focusNextTab(ctx2) {
-        if (!ctx2.focusedValue)
-          return;
-        const next = dom.getNextEl(ctx2, ctx2.focusedValue);
-        raf(() => next == null ? void 0 : next.focus());
-      },
-      focusPrevTab(ctx2) {
-        if (!ctx2.focusedValue)
-          return;
-        const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
-        raf(() => prev == null ? void 0 : prev.focus());
-      },
-      setIndicatorRect(ctx2) {
-        nextTick(() => {
-          if (!ctx2.isIndicatorRendered || !ctx2.value)
+          (_a = ctx2.onDelete) == null ? void 0 : _a.call(ctx2, { value: evt.value });
+        },
+        focusFirstTab(ctx2) {
+          raf(() => {
+            var _a;
+            return (_a = dom.getFirstEl(ctx2)) == null ? void 0 : _a.focus();
+          });
+        },
+        focusLastTab(ctx2) {
+          raf(() => {
+            var _a;
+            return (_a = dom.getLastEl(ctx2)) == null ? void 0 : _a.focus();
+          });
+        },
+        focusNextTab(ctx2) {
+          if (!ctx2.focusedValue)
             return;
-          ctx2.indicatorRect = dom.getRectById(ctx2, ctx2.value);
-          if (ctx2.hasMeasuredRect)
+          const next = dom.getNextEl(ctx2, ctx2.focusedValue);
+          raf(() => next == null ? void 0 : next.focus());
+        },
+        focusPrevTab(ctx2) {
+          if (!ctx2.focusedValue)
             return;
+          const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
+          raf(() => prev == null ? void 0 : prev.focus());
+        },
+        setIndicatorRect(ctx2) {
           nextTick(() => {
-            ctx2.hasMeasuredRect = true;
+            if (!ctx2.isIndicatorRendered || !ctx2.value)
+              return;
+            ctx2.indicatorRect = dom.getRectById(ctx2, ctx2.value);
+            if (ctx2.hasMeasuredRect)
+              return;
+            nextTick(() => {
+              ctx2.hasMeasuredRect = true;
+            });
           });
-        });
-      },
-      checkRenderedElements(ctx2) {
-        nextTick(() => {
+        },
+        checkRenderedElements(ctx2) {
           ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
-        });
-      },
-      clearMeasured(ctx2) {
-        ctx2.hasMeasuredRect = false;
-      },
-      invokeOnChange(ctx2) {
-        var _a;
-        (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
-      },
-      invokeOnFocus(ctx2) {
-        var _a;
-        (_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, { value: ctx2.focusedValue });
-      },
-      setPrevSelectedTabs(ctx2) {
-        if (ctx2.value != null) {
-          const newSelected = Array.from(ctx2.previousValues).concat(ctx2.value);
-          ctx2.previousValues = Array.from(new Set(newSelected));
-        }
-      },
-      setContentTabIndex(ctx2) {
-        raf(() => {
-          const panel = dom.getActiveContentEl(ctx2);
-          if (!panel)
-            return;
-          const focusables = getFocusables(panel);
-          if (focusables.length > 0) {
-            panel.removeAttribute("tabindex");
-          } else {
-            panel.setAttribute("tabindex", "0");
+        },
+        clearMeasured(ctx2) {
+          ctx2.hasMeasuredRect = false;
+        },
+        invokeOnChange(ctx2) {
+          var _a;
+          (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+        },
+        invokeOnFocus(ctx2) {
+          var _a;
+          (_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, { value: ctx2.focusedValue });
+        },
+        setPrevSelectedTabs(ctx2) {
+          if (ctx2.value != null) {
+            const newSelected = Array.from(ctx2.previousValues).concat(ctx2.value);
+            ctx2.previousValues = Array.from(new Set(newSelected));
           }
-        });
+        },
+        setContentTabIndex(ctx2) {
+          raf(() => {
+            const panel = dom.getActiveContentEl(ctx2);
+            if (!panel)
+              return;
+            const focusables = getFocusables(panel);
+            if (focusables.length > 0) {
+              panel.removeAttribute("tabindex");
+            } else {
+              panel.setAttribute("tabindex", "0");
+            }
+          });
+        }
       }
     }
-  });
+  );
 }
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  connect,
+  machine
+});