@zag-js/radio-group 1.8.1 → 1.9.0

package/dist/index.d.mts

@@ -92,10 +92,6 @@ interface PrivateContext {
      * Whether the radio group's fieldset is disabled
      */
     fieldsetDisabled: boolean;
-    /**
-     * Whether the radio group is in focus
-     */
-    focusVisible: boolean;
     /**
      * Whether the radio group is in server-side rendering
      */
@@ -153,6 +149,10 @@ interface ItemState {
      *  Whether the item is focused
      */
     focused: boolean;
+    /**
+     * Whether the item is focused and the focus is visible
+     */
+    focusVisible: boolean;
     /**
      * Whether the item is hovered
      */

package/dist/index.d.ts

@@ -92,10 +92,6 @@ interface PrivateContext {
      * Whether the radio group's fieldset is disabled
      */
     fieldsetDisabled: boolean;
-    /**
-     * Whether the radio group is in focus
-     */
-    focusVisible: boolean;
     /**
      * Whether the radio group is in server-side rendering
      */
@@ -153,6 +149,10 @@ interface ItemState {
      *  Whether the item is focused
      */
     focused: boolean;
+    /**
+     * Whether the item is focused and the focus is visible
+     */
+    focusVisible: boolean;
     /**
      * Whether the item is hovered
      */

package/dist/index.js

@@ -4,7 +4,6 @@ var anatomy$1 = require('@zag-js/anatomy');
 var domQuery = require('@zag-js/dom-query');
 var focusVisible = require('@zag-js/focus-visible');
 var core = require('@zag-js/core');
-var elementRect = require('@zag-js/element-rect');
 var utils = require('@zag-js/utils');
 var types = require('@zag-js/types');
 
@@ -58,12 +57,15 @@ function connect(service, normalize) {
   const groupDisabled = computed("isDisabled");
   const readOnly = prop("readOnly");
   function getItemState(props2) {
+    const focused = context.get("focusedValue") === props2.value;
+    const focusVisible$1 = focused && focusVisible.isFocusVisible();
     return {
       value: props2.value,
       invalid: !!props2.invalid,
       disabled: !!props2.disabled || groupDisabled,
       checked: context.get("value") === props2.value,
-      focused: context.get("focusedValue") === props2.value,
+      focused,
+      focusVisible: focusVisible$1,
       hovered: context.get("hoveredValue") === props2.value,
       active: context.get("activeValue") === props2.value
     };
@@ -72,7 +74,7 @@ function connect(service, normalize) {
     const itemState = getItemState(props2);
     return {
       "data-focus": domQuery.dataAttr(itemState.focused),
-      "data-focus-visible": domQuery.dataAttr(itemState.focused && context.get("focusVisible")),
+      "data-focus-visible": domQuery.dataAttr(itemState.focusVisible),
       "data-disabled": domQuery.dataAttr(itemState.disabled),
       "data-readonly": domQuery.dataAttr(readOnly),
       "data-state": itemState.checked ? "checked" : "unchecked",
@@ -194,11 +196,10 @@ function connect(service, normalize) {
           }
         },
         onBlur() {
-          send({ type: "SET_FOCUSED", value: null, focused: false, focusVisible: false });
+          send({ type: "SET_FOCUSED", value: null, focused: false });
         },
         onFocus() {
-          const focusVisible$1 = focusVisible.isFocusVisible();
-          send({ type: "SET_FOCUSED", value: props2.value, focused: true, focusVisible: focusVisible$1 });
+          send({ type: "SET_FOCUSED", value: props2.value, focused: true });
         },
         onKeyDown(event) {
           if (event.defaultPrevented) return;
@@ -281,9 +282,6 @@ var machine = core.createMachine({
       fieldsetDisabled: bindable(() => ({
         defaultValue: false
       })),
-      focusVisible: bindable(() => ({
-        defaultValue: false
-      })),
       ssr: bindable(() => ({
         defaultValue: true
       }))
@@ -359,7 +357,6 @@ var machine = core.createMachine({
       },
       setFocused({ context, event }) {
         context.set("focusedValue", event.value);
-        context.set("focusVisible", event.focusVisible);
       },
       syncInputElements({ context, scope }) {
         const inputs = getInputEls(scope);
@@ -382,18 +379,16 @@ var machine = core.createMachine({
         const value = context.get("value");
         const radioEl = getRadioEl(scope, value);
         if (value == null || !radioEl) {
+          context.set("canIndicatorTransition", false);
           context.set("indicatorRect", {});
           return;
         }
-        const indicatorCleanup = elementRect.trackElementRect(radioEl, {
-          getRect(el) {
+        const indicatorCleanup = domQuery.trackElementRect([radioEl], {
+          measure(el) {
             return getOffsetRect(el);
           },
-          onChange(rect) {
-            context.set("indicatorRect", resolveRect(rect));
-            domQuery.nextTick(() => {
-              context.set("canIndicatorTransition", false);
-            });
+          onEntry({ rects }) {
+            context.set("indicatorRect", resolveRect(rects[0]));
           }
         });
         refs.set("indicatorCleanup", indicatorCleanup);

package/dist/index.mjs

@@ -1,8 +1,7 @@
 import { createAnatomy } from '@zag-js/anatomy';
-import { dispatchInputCheckedEvent, nextTick, trackFormControl, queryAll, dataAttr, visuallyHiddenStyle, isSafari } from '@zag-js/dom-query';
+import { dispatchInputCheckedEvent, trackElementRect, trackFormControl, queryAll, dataAttr, visuallyHiddenStyle, isSafari } from '@zag-js/dom-query';
 import { trackFocusVisible, isFocusVisible } from '@zag-js/focus-visible';
 import { createGuards, createMachine } from '@zag-js/core';
-import { trackElementRect } from '@zag-js/element-rect';
 import { isString, createSplitProps } from '@zag-js/utils';
 import { createProps } from '@zag-js/types';
 
@@ -56,12 +55,15 @@ function connect(service, normalize) {
   const groupDisabled = computed("isDisabled");
   const readOnly = prop("readOnly");
   function getItemState(props2) {
+    const focused = context.get("focusedValue") === props2.value;
+    const focusVisible = focused && isFocusVisible();
     return {
       value: props2.value,
       invalid: !!props2.invalid,
       disabled: !!props2.disabled || groupDisabled,
       checked: context.get("value") === props2.value,
-      focused: context.get("focusedValue") === props2.value,
+      focused,
+      focusVisible,
       hovered: context.get("hoveredValue") === props2.value,
       active: context.get("activeValue") === props2.value
     };
@@ -70,7 +72,7 @@ function connect(service, normalize) {
     const itemState = getItemState(props2);
     return {
       "data-focus": dataAttr(itemState.focused),
-      "data-focus-visible": dataAttr(itemState.focused && context.get("focusVisible")),
+      "data-focus-visible": dataAttr(itemState.focusVisible),
       "data-disabled": dataAttr(itemState.disabled),
       "data-readonly": dataAttr(readOnly),
       "data-state": itemState.checked ? "checked" : "unchecked",
@@ -192,11 +194,10 @@ function connect(service, normalize) {
           }
         },
         onBlur() {
-          send({ type: "SET_FOCUSED", value: null, focused: false, focusVisible: false });
+          send({ type: "SET_FOCUSED", value: null, focused: false });
         },
         onFocus() {
-          const focusVisible = isFocusVisible();
-          send({ type: "SET_FOCUSED", value: props2.value, focused: true, focusVisible });
+          send({ type: "SET_FOCUSED", value: props2.value, focused: true });
         },
         onKeyDown(event) {
           if (event.defaultPrevented) return;
@@ -279,9 +280,6 @@ var machine = createMachine({
       fieldsetDisabled: bindable(() => ({
         defaultValue: false
       })),
-      focusVisible: bindable(() => ({
-        defaultValue: false
-      })),
       ssr: bindable(() => ({
         defaultValue: true
       }))
@@ -357,7 +355,6 @@ var machine = createMachine({
       },
       setFocused({ context, event }) {
         context.set("focusedValue", event.value);
-        context.set("focusVisible", event.focusVisible);
       },
       syncInputElements({ context, scope }) {
         const inputs = getInputEls(scope);
@@ -380,18 +377,16 @@ var machine = createMachine({
         const value = context.get("value");
         const radioEl = getRadioEl(scope, value);
         if (value == null || !radioEl) {
+          context.set("canIndicatorTransition", false);
           context.set("indicatorRect", {});
           return;
         }
-        const indicatorCleanup = trackElementRect(radioEl, {
-          getRect(el) {
+        const indicatorCleanup = trackElementRect([radioEl], {
+          measure(el) {
             return getOffsetRect(el);
           },
-          onChange(rect) {
-            context.set("indicatorRect", resolveRect(rect));
-            nextTick(() => {
-              context.set("canIndicatorTransition", false);
-            });
+          onEntry({ rects }) {
+            context.set("indicatorRect", resolveRect(rects[0]));
           }
         });
         refs.set("indicatorCleanup", indicatorCleanup);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/radio-group",
-  "version": "1.8.1",
+  "version": "1.9.0",
   "description": "Core logic for the radio group widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,13 +27,12 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.8.1",
-    "@zag-js/dom-query": "1.8.1",
-    "@zag-js/element-rect": "1.8.1",
-    "@zag-js/focus-visible": "1.8.1",
-    "@zag-js/utils": "1.8.1",
-    "@zag-js/core": "1.8.1",
-    "@zag-js/types": "1.8.1"
+    "@zag-js/dom-query": "1.9.0",
+    "@zag-js/anatomy": "1.9.0",
+    "@zag-js/focus-visible": "1.9.0",
+    "@zag-js/utils": "1.9.0",
+    "@zag-js/core": "1.9.0",
+    "@zag-js/types": "1.9.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"