@zag-js/tabs 0.0.0-dev-20220415160434 → 0.0.0-dev-20220417135151

package/dist/index.mjs

@@ -171,25 +171,25 @@ var dom = {
   },
   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.uid}`;
   },
   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.uid}: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.uid}: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.uid}: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.uid}:trigger-${id}`;
   },
-  getIndicatorId: (ctx) => `tabs-${ctx.uid}-indicator`,
+  getIndicatorId: (ctx) => `tabs:${ctx.uid}:indicator`,
   getTriggerGroupEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getTriggerGroupId(ctx)),
   getContentEl: (ctx, id) => dom.getDoc(ctx).getElementById(dom.getContentId(ctx, id)),
   getTriggerEl: (ctx, id) => dom.getDoc(ctx).getElementById(dom.getTriggerId(ctx, id)),
@@ -205,12 +205,23 @@ var dom = {
   getPrevEl: (ctx, id) => prevById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),
   getRectById: (ctx, id) => {
     var _a;
-    const empty = { offsetLeft: 0, offsetTop: 0, offsetWidth: 0, offsetHeight: 0 };
+    const empty = {
+      offsetLeft: 0,
+      offsetTop: 0,
+      offsetWidth: 0,
+      offsetHeight: 0
+    };
     const tab = (_a = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id))) != null ? _a : empty;
     if (ctx.isVertical) {
-      return { top: `${tab.offsetTop}px`, height: `${tab.offsetHeight}px` };
+      return {
+        top: `${tab.offsetTop}px`,
+        height: `${tab.offsetHeight}px`
+      };
     }
-    return { left: `${tab.offsetLeft}px`, width: `${tab.offsetWidth}px` };
+    return {
+      left: `${tab.offsetLeft}px`,
+      width: `${tab.offsetWidth}px`
+    };
   },
   getActiveContentEl: (ctx) => {
     if (!ctx.value)
@@ -365,206 +376,208 @@ function connect(state, send, normalize = normalizeProp) {
 // src/tabs.machine.ts
 import { createMachine, guards, ref } from "@zag-js/core";
 var { not } = guards;
-var machine = createMachine({
-  initial: "unknown",
-  context: {
-    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: {}
-  },
-  computed: {
-    isHorizontal: (ctx) => ctx.orientation === "horizontal",
-    isVertical: (ctx) => ctx.orientation === "vertical"
-  },
-  created: ["setPrevSelectedTabs"],
-  watch: {
-    focusedValue: "invokeOnFocus",
-    value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"],
-    dir: ["clearMeasured", "setIndicatorRect"]
-  },
-  on: {
-    SET_VALUE: {
-      actions: "setValue"
+function machine(ctx = {}) {
+  return 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"
     },
-    DELETE: {
-      actions: "deleteValue"
-    }
-  },
-  states: {
-    unknown: {
-      on: {
-        SETUP: {
-          target: "idle",
-          actions: ["setupDocument", "checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
-        }
-      }
+    created: ["setPrevSelectedTabs"],
+    watch: {
+      focusedValue: "invokeOnFocus",
+      value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"],
+      dir: ["clearMeasured", "setIndicatorRect"]
     },
-    idle: {
-      on: {
-        TAB_FOCUS: {
-          guard: "selectOnFocus",
-          target: "focused",
-          actions: ["setFocusedValue", "setValue"]
-        },
-        TAB_CLICK: {
-          target: "focused",
-          actions: ["setFocusedValue", "setValue"]
-        }
+    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: ["setupDocument", "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: (ctx) => ctx.isVertical,
-    isHorizontal: (ctx) => ctx.isHorizontal,
-    selectOnFocus: (ctx) => ctx.activationMode === "automatic"
-  },
-  actions: {
-    setupDocument(ctx, evt) {
-      ctx.uid = evt.id;
-      if (evt.doc)
-        ctx.doc = ref(evt.doc);
-    },
-    setFocusedValue(ctx, evt) {
-      ctx.focusedValue = evt.value;
-    },
-    clearFocusedValue(ctx) {
-      ctx.focusedValue = null;
-    },
-    setValue(ctx, evt) {
-      ctx.value = evt.value;
-    },
-    invokeOnDelete(ctx, evt) {
-      var _a;
-      (_a = ctx.onDelete) == null ? void 0 : _a.call(ctx, { value: evt.value });
+  }, {
+    guards: {
+      isVertical: (ctx2) => ctx2.isVertical,
+      isHorizontal: (ctx2) => ctx2.isHorizontal,
+      selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
     },
-    focusFirstTab(ctx) {
-      nextTick(() => {
+    actions: {
+      setupDocument(ctx2, evt) {
+        ctx2.uid = evt.id;
+        if (evt.doc)
+          ctx2.doc = ref(evt.doc);
+      },
+      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.getFirstEl(ctx)) == null ? void 0 : _a.focus();
-      });
-    },
-    focusLastTab(ctx) {
-      nextTick(() => {
-        var _a;
-        return (_a = dom.getLastEl(ctx)) == null ? void 0 : _a.focus();
-      });
-    },
-    focusNextTab(ctx) {
-      if (!ctx.focusedValue)
-        return;
-      const next = dom.getNextEl(ctx, ctx.focusedValue);
-      nextTick(() => next == null ? void 0 : next.focus());
-    },
-    focusPrevTab(ctx) {
-      if (!ctx.focusedValue)
-        return;
-      const prev = dom.getPrevEl(ctx, ctx.focusedValue);
-      nextTick(() => prev == null ? void 0 : prev.focus());
-    },
-    setIndicatorRect(ctx) {
-      nextTick(() => {
-        if (!ctx.isIndicatorRendered || !ctx.value)
+        (_a = ctx2.onDelete) == null ? void 0 : _a.call(ctx2, { value: evt.value });
+      },
+      focusFirstTab(ctx2) {
+        nextTick(() => {
+          var _a;
+          return (_a = dom.getFirstEl(ctx2)) == null ? void 0 : _a.focus();
+        });
+      },
+      focusLastTab(ctx2) {
+        nextTick(() => {
+          var _a;
+          return (_a = dom.getLastEl(ctx2)) == null ? void 0 : _a.focus();
+        });
+      },
+      focusNextTab(ctx2) {
+        if (!ctx2.focusedValue)
           return;
-        ctx.indicatorRect = dom.getRectById(ctx, ctx.value);
-        if (ctx.hasMeasuredRect)
+        const next = dom.getNextEl(ctx2, ctx2.focusedValue);
+        nextTick(() => next == null ? void 0 : next.focus());
+      },
+      focusPrevTab(ctx2) {
+        if (!ctx2.focusedValue)
           return;
+        const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
+        nextTick(() => prev == null ? void 0 : prev.focus());
+      },
+      setIndicatorRect(ctx2) {
         nextTick(() => {
-          ctx.hasMeasuredRect = true;
+          if (!ctx2.isIndicatorRendered || !ctx2.value)
+            return;
+          ctx2.indicatorRect = dom.getRectById(ctx2, ctx2.value);
+          if (ctx2.hasMeasuredRect)
+            return;
+          nextTick(() => {
+            ctx2.hasMeasuredRect = true;
+          });
         });
-      });
-    },
-    checkRenderedElements(ctx) {
-      nextTick(() => {
-        ctx.isIndicatorRendered = !!dom.getIndicatorEl(ctx);
-      });
-    },
-    clearMeasured(ctx) {
-      ctx.hasMeasuredRect = false;
-    },
-    invokeOnChange(ctx) {
-      var _a;
-      (_a = ctx.onChange) == null ? void 0 : _a.call(ctx, { value: ctx.value });
-    },
-    invokeOnFocus(ctx) {
-      var _a;
-      (_a = ctx.onFocus) == null ? void 0 : _a.call(ctx, { value: ctx.focusedValue });
-    },
-    setPrevSelectedTabs(ctx) {
-      if (ctx.value != null) {
-        const newSelected = Array.from(ctx.previousValues).concat(ctx.value);
-        ctx.previousValues = Array.from(new Set(newSelected));
-      }
-    },
-    setContentTabIndex(ctx) {
-      nextTick(() => {
-        const panel = dom.getActiveContentEl(ctx);
-        if (!panel)
-          return;
-        const focusables = getFocusables(panel);
-        if (focusables.length > 0) {
-          panel.removeAttribute("tabindex");
-        } else {
-          panel.setAttribute("tabindex", "0");
+      },
+      checkRenderedElements(ctx2) {
+        nextTick(() => {
+          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) {
+        nextTick(() => {
+          const panel = dom.getActiveContentEl(ctx2);
+          if (!panel)
+            return;
+          const focusables = getFocusables(panel);
+          if (focusables.length > 0) {
+            panel.removeAttribute("tabindex");
+          } else {
+            panel.setAttribute("tabindex", "0");
+          }
+        });
+      }
     }
-  }
-});
+  });
+}
 export {
   connect,
   machine