@zag-js/tabs 0.1.7 → 0.1.10

package/dist/index.d.ts

@@ -1,4 +1,3 @@
 export { connect } from "./tabs.connect";
 export { machine } from "./tabs.machine";
 export type { UserDefinedContext as Context } from "./tabs.types";
-//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -39,99 +40,99 @@ __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;
 };
-function getStyleCache() {
-  ;
-  globalThis.__styleCache__ = globalThis.__styleCache__ || /* @__PURE__ */ new WeakMap();
-  return globalThis.__styleCache__;
-}
-function getComputedStyle2(el) {
+var isDom = () => typeof window !== "undefined";
+function getPlatform() {
   var _a;
-  if (!el)
-    return {};
-  const cache = getStyleCache();
-  let style = cache.get(el);
-  if (!style) {
-    const win = (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
-    style = win.getComputedStyle(el);
-    cache.set(el, style);
-  }
-  return style;
+  const agent = navigator.userAgentData;
+  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
 }
-function nextTick(fn) {
-  const set = /* @__PURE__ */ new Set();
-  function raf2(fn2) {
-    const id = globalThis.requestAnimationFrame(fn2);
-    set.add(() => globalThis.cancelAnimationFrame(id));
-  }
-  raf2(() => raf2(fn));
-  return function cleanup() {
-    set.forEach(function(fn2) {
-      fn2();
-    });
-  };
+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 raf(fn) {
-  const id = globalThis.requestAnimationFrame(fn);
-  return function cleanup() {
-    globalThis.cancelAnimationFrame(id);
+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);
 }
-var isDom = () => typeof window !== "undefined";
-var isTouchDevice = isDom() && !!navigator.maxTouchPoints;
 function isHTMLElement(v) {
   return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
 }
-var isDisabled = (el) => {
-  return (el == null ? void 0 : el.getAttribute("disabled")) != null || !!(el == null ? void 0 : el.getAttribute("aria-disabled")) === true;
-};
-var focusableSelector = /* @__PURE__ */ [
-  "input:not([disabled]):not([type=hidden])",
-  "select:not([disabled])",
-  "textarea:not([disabled])",
-  "button:not([disabled])",
-  "embed",
-  "iframe",
-  "object",
-  "a[href]",
-  "area[href]",
-  "[tabindex]",
-  "audio[controls]",
-  "video[controls]",
-  "*[tabindex]:not([aria-disabled])",
-  "[contenteditable]:not([contenteditable=false])",
-  "details > summary:first-of-type"
-].join(",");
-function isHidden(el, until) {
-  const style = getComputedStyle2(el);
-  if (!el || style.getPropertyValue("visibility") === "hidden")
-    return true;
-  while (el) {
-    if (until != null && el === until)
-      return false;
-    if (style.getPropertyValue("display") === "none")
-      return true;
-    el = el.parentElement;
-  }
-  return false;
+function isVisible(el) {
+  if (!isHTMLElement(el))
+    return false;
+  return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
 }
-var getFocusables = (el, includeContainer = false) => {
-  if (!el)
+var focusableSelector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false']), details > summary:first-of-type";
+var getFocusables = (container, includeContainer = false) => {
+  if (!container)
     return [];
-  let els = Array.from(el.querySelectorAll(focusableSelector));
-  const shouldAddContainer = includeContainer == true || includeContainer == "if-empty" && els.length === 0;
-  if (shouldAddContainer && isHTMLElement(el)) {
-    els.unshift(el);
+  const elements = Array.from(container.querySelectorAll(focusableSelector));
+  const include = includeContainer == true || includeContainer == "if-empty" && elements.length === 0;
+  if (include && isHTMLElement(container) && isFocusable(container)) {
+    elements.unshift(container);
   }
-  return els.filter((el2) => isFocusable(el2) && !isHidden(el2));
+  const focusableElements = elements.filter(isFocusable);
+  focusableElements.forEach((element, i) => {
+    if (isFrame(element) && element.contentDocument) {
+      const frameBody = element.contentDocument.body;
+      focusableElements.splice(i, 1, ...getFocusables(frameBody));
+    }
+  });
+  return focusableElements;
 };
-var isFocusable = (el) => {
-  if (!isHTMLElement(el) || isHidden(el) || isDisabled(el))
+function isFocusable(element) {
+  if (!element)
     return false;
-  return el == null ? void 0 : el.matches(focusableSelector);
-};
+  return element.matches(focusableSelector) && isVisible(element);
+}
 var rtlKeyMap = {
   ArrowLeft: "ArrowRight",
   ArrowRight: "ArrowLeft",
@@ -158,6 +159,25 @@ function getEventKey(event, options = {}) {
   }
   return key;
 }
+function nextTick(fn) {
+  const set = /* @__PURE__ */ new Set();
+  function raf2(fn2) {
+    const id = globalThis.requestAnimationFrame(fn2);
+    set.add(() => globalThis.cancelAnimationFrame(id));
+  }
+  raf2(() => raf2(fn));
+  return function cleanup() {
+    set.forEach(function(fn2) {
+      fn2();
+    });
+  };
+}
+function raf(fn) {
+  const id = globalThis.requestAnimationFrame(fn);
+  return function cleanup() {
+    globalThis.cancelAnimationFrame(id);
+  };
+}
 function queryAll(root, selector) {
   var _a;
   return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
@@ -181,112 +201,38 @@ function prevById(v, id, loop = true) {
   idx = loop ? (idx - 1 + v.length) % v.length : Math.max(0, idx - 1);
   return v[idx];
 }
-var getValueText = (item) => {
-  var _a, _b;
-  return (_b = (_a = item.dataset.valuetext) != null ? _a : item.textContent) != null ? _b : "";
-};
-var match = (valueText, query2) => valueText.toLowerCase().startsWith(query2.toLowerCase());
-var wrap = (v, idx) => {
-  return v.map((_, index) => v[(Math.max(idx, 0) + index) % v.length]);
-};
-function findByText(v, text, currentId) {
-  const index = currentId ? indexOfId(v, currentId) : -1;
-  let items = currentId ? wrap(v, index) : v;
-  const isSingleKey = text.length === 1;
-  if (isSingleKey) {
-    items = items.filter((item) => item.id !== currentId);
-  }
-  return items.find((item) => match(getValueText(item), text));
-}
-function findByTypeahead(_items, options) {
-  const { state: state2, activeId, key, timeout = 350 } = options;
-  const search = state2.keysSoFar + key;
-  const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
-  const query2 = isRepeated ? search[0] : search;
-  let items = _items.slice();
-  const next = findByText(items, query2, activeId);
-  function cleanup() {
-    clearTimeout(state2.timer);
-    state2.timer = -1;
-  }
-  function update(value) {
-    state2.keysSoFar = value;
-    cleanup();
-    if (value !== "") {
-      state2.timer = +setTimeout(() => {
-        update("");
-        cleanup();
-      }, timeout);
-    }
-  }
-  update(search);
-  return next;
-}
-findByTypeahead.defaultOptions = {
-  keysSoFar: "",
-  timer: -1
-};
-
-// ../../types/dist/index.mjs
-function createNormalizer(fn) {
-  return new Proxy({}, {
-    get() {
-      return fn;
-    }
-  });
-}
-var normalizeProp = createNormalizer((v) => v);
 
 // ../../utilities/core/dist/index.mjs
 var first = (v) => v[0];
 var last = (v) => v[v.length - 1];
-var isDom2 = () => typeof window !== "undefined";
-function getPlatform() {
-  var _a;
-  const agent = navigator.userAgentData;
-  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
-}
-var pt = (v) => isDom2() && v.test(getPlatform());
-var vn = (v) => isDom2() && v.test(navigator.vendor);
-var isTouchDevice2 = isDom2() && !!navigator.maxTouchPoints;
-var isSafari = () => isApple() && vn(/apple/i);
-var isApple = () => pt(/mac|iphone|ipad|ipod/i);
 
 // 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])`;
@@ -300,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;
@@ -322,10 +268,10 @@ var dom = {
       width: `${tab.offsetWidth}px`
     };
   }
-};
+});
 
 // src/tabs.connect.ts
-function connect(state, send, normalize = normalizeProp) {
+function connect(state, send, normalize) {
   const messages = state.context.messages;
   const isFocused = state.matches("focused");
   return {
@@ -469,7 +415,7 @@ function connect(state, send, normalize = normalizeProp) {
 // 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({
@@ -478,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,
@@ -509,7 +454,7 @@ function machine(ctx = {}) {
         on: {
           SETUP: {
             target: "idle",
-            actions: ["setupDocument", "checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
+            actions: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
           }
         }
       },
@@ -579,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;
       },
@@ -636,9 +574,7 @@ function machine(ctx = {}) {
         });
       },
       checkRenderedElements(ctx2) {
-        nextTick(() => {
-          ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
-        });
+        ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
       },
       clearMeasured(ctx2) {
         ctx2.hasMeasuredRect = false;
@@ -673,4 +609,3 @@ function machine(ctx = {}) {
     }
   });
 }
-//# sourceMappingURL=index.js.map