@zag-js/tabs 0.1.10 → 0.1.13

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 });
@@ -40,30 +26,13 @@ __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;
 };
 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);
@@ -79,28 +48,27 @@ 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;
+  return (el == null ? void 0 : el.ownerDocument) ?? 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;
+      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 __spreadValues2(__spreadValues2({}, dom2), helpers);
+  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";
@@ -135,9 +103,7 @@ function isFocusable(element) {
 }
 var rtlKeyMap = {
   ArrowLeft: "ArrowRight",
-  ArrowRight: "ArrowLeft",
-  Home: "End",
-  End: "Home"
+  ArrowRight: "ArrowLeft"
 };
 var sameKeyMap = {
   Up: "ArrowUp",
@@ -149,10 +115,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];
@@ -179,8 +144,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);
@@ -209,24 +173,24 @@ var last = (v) => v[v.length - 1];
 // src/tabs.dom.ts
 var dom = defineDomHelpers({
   getRootId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `tabs:${ctx.id}`;
+    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.id}: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.id}: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.id}: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.id}:trigger-${id}`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.trigger) ?? `tabs:${ctx.id}:trigger-${id}`;
   },
   getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
   getTriggerGroupEl: (ctx) => dom.getById(ctx, dom.getTriggerGroupId(ctx)),
@@ -249,14 +213,13 @@ 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 = (_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`,
@@ -399,15 +362,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
+      }
     })
   };
 }
@@ -416,196 +380,205 @@ function connect(state, send, normalize) {
 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,
-      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"
+  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: ["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"]
             },
-            { actions: "setFocusedValue" }
-          ],
-          TAB_BLUR: {
-            target: "idle",
-            actions: "clearFocusedValue"
+            TAB_CLICK: {
+              target: "focused",
+              actions: ["setFocusedValue", "setValue"]
+            }
+          }
+        },
+        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: [
+              {
+                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: {
-      setFocusedValue(ctx2, evt) {
-        ctx2.focusedValue = evt.value;
-      },
-      clearFocusedValue(ctx2) {
-        ctx2.focusedValue = null;
+    {
+      guards: {
+        isVertical: (ctx2) => ctx2.isVertical,
+        isHorizontal: (ctx2) => ctx2.isHorizontal,
+        selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
       },
-      setValue(ctx2, evt) {
-        ctx2.value = evt.value;
-      },
-      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) {
-        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");
+        },
+        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");
+            }
+          });
+        }
       }
     }
-  });
+  );
 }
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  connect,
+  machine
+});