@zag-js/tabs 1.45.0 → 1.47.0

package/dist/index.d.mts

@@ -6,3 +6,4 @@ export { TabsApi as Api, ContentProps, ElementIds, FocusChangeDetails, IntlTrans
 import '@zag-js/anatomy';
 import '@zag-js/core';
 import '@zag-js/types';
+import '@zag-js/dom-query';

package/dist/index.d.ts

@@ -6,3 +6,4 @@ export { TabsApi as Api, ContentProps, ElementIds, FocusChangeDetails, IntlTrans
 import '@zag-js/anatomy';
 import '@zag-js/core';
 import '@zag-js/types';
+import '@zag-js/dom-query';

package/dist/tabs.connect.d.mts

@@ -1,6 +1,7 @@
 import { Service } from '@zag-js/core';
 import { PropTypes, NormalizeProps } from '@zag-js/types';
 import { TabsSchema, TabsApi } from './tabs.types.mjs';
+import '@zag-js/dom-query';
 
 declare function connect<T extends PropTypes>(service: Service<TabsSchema>, normalize: NormalizeProps<T>): TabsApi<T>;
 

package/dist/tabs.connect.d.ts

@@ -1,6 +1,7 @@
 import { Service } from '@zag-js/core';
 import { PropTypes, NormalizeProps } from '@zag-js/types';
 import { TabsSchema, TabsApi } from './tabs.types.js';
+import '@zag-js/dom-query';
 
 declare function connect<T extends PropTypes>(service: Service<TabsSchema>, normalize: NormalizeProps<T>): TabsApi<T>;
 

package/dist/tabs.machine.d.mts

@@ -1,5 +1,6 @@
 import * as _zag_js_core from '@zag-js/core';
 import { TabsSchema } from './tabs.types.mjs';
+import '@zag-js/dom-query';
 import '@zag-js/types';
 
 declare const machine: _zag_js_core.Machine<TabsSchema>;

package/dist/tabs.machine.d.ts

@@ -1,5 +1,6 @@
 import * as _zag_js_core from '@zag-js/core';
 import { TabsSchema } from './tabs.types.js';
+import '@zag-js/dom-query';
 import '@zag-js/types';
 
 declare const machine: _zag_js_core.Machine<TabsSchema>;

package/dist/tabs.machine.js

@@ -81,7 +81,8 @@ var machine = createMachine({
   refs() {
     return {
       indicatorCleanup: null,
-      prevValue: null
+      prevValue: null,
+      focusFrame: import_dom_query.AnimationFrame.create()
     };
   },
   watch({ context, prop, track, action }) {
@@ -110,7 +111,7 @@ var machine = createMachine({
     }
   },
   entry: ["syncPrevValue", "syncIndicatorRect", "syncTabIndex", "syncSsr"],
-  exit: ["cleanupObserver"],
+  exit: ["cleanupObserver", "cancelFocusFrame"],
   states: {
     idle: {
       on: {
@@ -125,6 +126,7 @@ var machine = createMachine({
       }
     },
     focused: {
+      exit: ["cancelFocusFrame"],
       on: {
         TAB_CLICK: {
           actions: ["setFocusedValue", "setValue", "requestNavigation"]
@@ -213,24 +215,24 @@ var machine = createMachine({
       clearValue({ context }) {
         context.set("value", null);
       },
-      focusFirstTab({ scope }) {
-        (0, import_dom_query.raf)(() => {
+      focusFirstTab({ scope, refs }) {
+        refs.get("focusFrame").request(() => {
           dom.getFirstTriggerEl(scope)?.focus();
         });
       },
-      focusLastTab({ scope }) {
-        (0, import_dom_query.raf)(() => {
+      focusLastTab({ scope, refs }) {
+        refs.get("focusFrame").request(() => {
           dom.getLastTriggerEl(scope)?.focus();
         });
       },
-      focusNextTab({ context, prop, scope, event }) {
+      focusNextTab({ context, prop, scope, event, refs }) {
         const focusedValue = event.value ?? context.get("focusedValue");
         if (!focusedValue) return;
         const triggerEl = dom.getNextTriggerEl(scope, {
           value: focusedValue,
           loopFocus: prop("loopFocus")
         });
-        (0, import_dom_query.raf)(() => {
+        refs.get("focusFrame").request(() => {
           if (prop("composite")) {
             triggerEl?.focus();
           } else if (triggerEl?.dataset.value != null) {
@@ -238,14 +240,14 @@ var machine = createMachine({
           }
         });
       },
-      focusPrevTab({ context, prop, scope, event }) {
+      focusPrevTab({ context, prop, scope, event, refs }) {
         const focusedValue = event.value ?? context.get("focusedValue");
         if (!focusedValue) return;
         const triggerEl = dom.getPrevTriggerEl(scope, {
           value: focusedValue,
           loopFocus: prop("loopFocus")
         });
-        (0, import_dom_query.raf)(() => {
+        refs.get("focusFrame").request(() => {
           if (prop("composite")) {
             triggerEl?.focus();
           } else if (triggerEl?.dataset.value != null) {
@@ -267,6 +269,9 @@ var machine = createMachine({
           }
         });
       },
+      cancelFocusFrame({ refs }) {
+        refs.get("focusFrame").cancel();
+      },
       cleanupObserver({ refs }) {
         const cleanup = refs.get("indicatorCleanup");
         if (cleanup) cleanup();

package/dist/tabs.machine.mjs

@@ -1,6 +1,6 @@
 // src/tabs.machine.ts
 import { setup } from "@zag-js/core";
-import { getFocusables, isAnchorElement, raf, resizeObserverBorderBox } from "@zag-js/dom-query";
+import { AnimationFrame, getFocusables, isAnchorElement, raf, resizeObserverBorderBox } from "@zag-js/dom-query";
 import { callAll, isEqual } from "@zag-js/utils";
 import * as dom from "./tabs.dom.mjs";
 var { createMachine } = setup();
@@ -47,7 +47,8 @@ var machine = createMachine({
   refs() {
     return {
       indicatorCleanup: null,
-      prevValue: null
+      prevValue: null,
+      focusFrame: AnimationFrame.create()
     };
   },
   watch({ context, prop, track, action }) {
@@ -76,7 +77,7 @@ var machine = createMachine({
     }
   },
   entry: ["syncPrevValue", "syncIndicatorRect", "syncTabIndex", "syncSsr"],
-  exit: ["cleanupObserver"],
+  exit: ["cleanupObserver", "cancelFocusFrame"],
   states: {
     idle: {
       on: {
@@ -91,6 +92,7 @@ var machine = createMachine({
       }
     },
     focused: {
+      exit: ["cancelFocusFrame"],
       on: {
         TAB_CLICK: {
           actions: ["setFocusedValue", "setValue", "requestNavigation"]
@@ -179,24 +181,24 @@ var machine = createMachine({
       clearValue({ context }) {
         context.set("value", null);
       },
-      focusFirstTab({ scope }) {
-        raf(() => {
+      focusFirstTab({ scope, refs }) {
+        refs.get("focusFrame").request(() => {
           dom.getFirstTriggerEl(scope)?.focus();
         });
       },
-      focusLastTab({ scope }) {
-        raf(() => {
+      focusLastTab({ scope, refs }) {
+        refs.get("focusFrame").request(() => {
           dom.getLastTriggerEl(scope)?.focus();
         });
       },
-      focusNextTab({ context, prop, scope, event }) {
+      focusNextTab({ context, prop, scope, event, refs }) {
         const focusedValue = event.value ?? context.get("focusedValue");
         if (!focusedValue) return;
         const triggerEl = dom.getNextTriggerEl(scope, {
           value: focusedValue,
           loopFocus: prop("loopFocus")
         });
-        raf(() => {
+        refs.get("focusFrame").request(() => {
           if (prop("composite")) {
             triggerEl?.focus();
           } else if (triggerEl?.dataset.value != null) {
@@ -204,14 +206,14 @@ var machine = createMachine({
           }
         });
       },
-      focusPrevTab({ context, prop, scope, event }) {
+      focusPrevTab({ context, prop, scope, event, refs }) {
         const focusedValue = event.value ?? context.get("focusedValue");
         if (!focusedValue) return;
         const triggerEl = dom.getPrevTriggerEl(scope, {
           value: focusedValue,
           loopFocus: prop("loopFocus")
         });
-        raf(() => {
+        refs.get("focusFrame").request(() => {
           if (prop("composite")) {
             triggerEl?.focus();
           } else if (triggerEl?.dataset.value != null) {
@@ -233,6 +235,9 @@ var machine = createMachine({
           }
         });
       },
+      cancelFocusFrame({ refs }) {
+        refs.get("focusFrame").cancel();
+      },
       cleanupObserver({ refs }) {
         const cleanup = refs.get("indicatorCleanup");
         if (cleanup) cleanup();

package/dist/tabs.props.d.mts

@@ -1,5 +1,6 @@
 import { TabsProps, ContentProps, TriggerProps } from './tabs.types.mjs';
 import '@zag-js/core';
+import '@zag-js/dom-query';
 import '@zag-js/types';
 
 declare const props: (keyof TabsProps)[];

package/dist/tabs.props.d.ts

@@ -1,5 +1,6 @@
 import { TabsProps, ContentProps, TriggerProps } from './tabs.types.js';
 import '@zag-js/core';
+import '@zag-js/dom-query';
 import '@zag-js/types';
 
 declare const props: (keyof TabsProps)[];

package/dist/tabs.types.d.mts

@@ -1,4 +1,5 @@
 import { Machine, EventObject, Service } from '@zag-js/core';
+import { AnimationFrame } from '@zag-js/dom-query';
 import { PropTypes, RequiredBy, DirectionProperty, CommonProperties, Rect } from '@zag-js/types';
 
 interface ValueChangeDetails {
@@ -97,6 +98,7 @@ type TabsSchema = {
     refs: {
         indicatorCleanup: VoidFunction | null | undefined;
         prevValue: string | null;
+        focusFrame: AnimationFrame;
     };
     computed: {
         focused: boolean;

package/dist/tabs.types.d.ts

@@ -1,4 +1,5 @@
 import { Machine, EventObject, Service } from '@zag-js/core';
+import { AnimationFrame } from '@zag-js/dom-query';
 import { PropTypes, RequiredBy, DirectionProperty, CommonProperties, Rect } from '@zag-js/types';
 
 interface ValueChangeDetails {
@@ -97,6 +98,7 @@ type TabsSchema = {
     refs: {
         indicatorCleanup: VoidFunction | null | undefined;
         prevValue: string | null;
+        focusFrame: AnimationFrame;
     };
     computed: {
         focused: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/tabs",
-  "version": "1.45.0",
+  "version": "1.47.0",
   "description": "Core logic for the tabs widget implemented as a state machine",
   "keywords": [
     "js",
@@ -29,11 +29,11 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.45.0",
-    "@zag-js/dom-query": "1.45.0",
-    "@zag-js/utils": "1.45.0",
-    "@zag-js/core": "1.45.0",
-    "@zag-js/types": "1.45.0"
+    "@zag-js/anatomy": "1.47.0",
+    "@zag-js/dom-query": "1.47.0",
+    "@zag-js/utils": "1.47.0",
+    "@zag-js/core": "1.47.0",
+    "@zag-js/types": "1.47.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"