@zag-js/radio-group 1.27.1 → 1.29.0

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { RequiredBy, DirectionProperty, CommonProperties, PropTypes, NormalizeProps } from '@zag-js/types';
+import { RequiredBy, DirectionProperty, CommonProperties, Rect, PropTypes, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
 import { Service, EventObject, Machine } from '@zag-js/core';
 
@@ -57,12 +57,6 @@ interface RadioGroupProps extends DirectionProperty, CommonProperties {
      */
     orientation?: "horizontal" | "vertical" | undefined;
 }
-interface IndicatorRect {
-    left: string;
-    top: string;
-    width: string;
-    height: string;
-}
 interface PrivateContext {
     /**
      * The value of the checked radio
@@ -76,6 +70,10 @@ interface PrivateContext {
      * The id of the focused radio
      */
     focusedValue: string | null;
+    /**
+     * The id of the radio that has focus-visible
+     */
+    focusVisibleValue: string | null;
     /**
      * The id of the hovered radio
      */
@@ -83,11 +81,7 @@ interface PrivateContext {
     /**
      * The active tab indicator's dom rect
      */
-    indicatorRect: Partial<IndicatorRect>;
-    /**
-     * Whether the active tab indicator's rect can transition
-     */
-    canIndicatorTransition: boolean;
+    indicatorRect: Rect | null;
     /**
      * Whether the radio group's fieldset is disabled
      */
@@ -109,10 +103,6 @@ interface Refs {
      * Function to clean up the observer for the active tab's rect
      */
     indicatorCleanup: VoidFunction | null;
-    /**
-     * The value of the radio that has focus visible
-     */
-    focusVisibleValue: string | null;
 }
 interface RadioGroupSchema {
     state: "idle";
@@ -205,4 +195,4 @@ declare const splitProps: <Props extends Partial<RadioGroupProps>>(props: Props)
 declare const itemProps: (keyof ItemProps)[];
 declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
 
-export { type RadioGroupApi as Api, type ElementIds, type IndicatorRect, type ItemProps, type ItemState, type RadioGroupMachine as Machine, type RadioGroupProps as Props, type RadioGroupService as Service, type ValueChangeDetails, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };
+export { type RadioGroupApi as Api, type ElementIds, type ItemProps, type ItemState, type RadioGroupMachine as Machine, type RadioGroupProps as Props, type RadioGroupService as Service, type ValueChangeDetails, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { RequiredBy, DirectionProperty, CommonProperties, PropTypes, NormalizeProps } from '@zag-js/types';
+import { RequiredBy, DirectionProperty, CommonProperties, Rect, PropTypes, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
 import { Service, EventObject, Machine } from '@zag-js/core';
 
@@ -57,12 +57,6 @@ interface RadioGroupProps extends DirectionProperty, CommonProperties {
      */
     orientation?: "horizontal" | "vertical" | undefined;
 }
-interface IndicatorRect {
-    left: string;
-    top: string;
-    width: string;
-    height: string;
-}
 interface PrivateContext {
     /**
      * The value of the checked radio
@@ -76,6 +70,10 @@ interface PrivateContext {
      * The id of the focused radio
      */
     focusedValue: string | null;
+    /**
+     * The id of the radio that has focus-visible
+     */
+    focusVisibleValue: string | null;
     /**
      * The id of the hovered radio
      */
@@ -83,11 +81,7 @@ interface PrivateContext {
     /**
      * The active tab indicator's dom rect
      */
-    indicatorRect: Partial<IndicatorRect>;
-    /**
-     * Whether the active tab indicator's rect can transition
-     */
-    canIndicatorTransition: boolean;
+    indicatorRect: Rect | null;
     /**
      * Whether the radio group's fieldset is disabled
      */
@@ -109,10 +103,6 @@ interface Refs {
      * Function to clean up the observer for the active tab's rect
      */
     indicatorCleanup: VoidFunction | null;
-    /**
-     * The value of the radio that has focus visible
-     */
-    focusVisibleValue: string | null;
 }
 interface RadioGroupSchema {
     state: "idle";
@@ -205,4 +195,4 @@ declare const splitProps: <Props extends Partial<RadioGroupProps>>(props: Props)
 declare const itemProps: (keyof ItemProps)[];
 declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
 
-export { type RadioGroupApi as Api, type ElementIds, type IndicatorRect, type ItemProps, type ItemState, type RadioGroupMachine as Machine, type RadioGroupProps as Props, type RadioGroupService as Service, type ValueChangeDetails, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };
+export { type RadioGroupApi as Api, type ElementIds, type ItemProps, type ItemState, type RadioGroupMachine as Machine, type RadioGroupProps as Props, type RadioGroupService as Service, type ValueChangeDetails, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };

package/dist/index.js

@@ -3,8 +3,8 @@
 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 utils = require('@zag-js/utils');
+var core = require('@zag-js/core');
 var types = require('@zag-js/types');
 
 // src/radio-group.anatomy.ts
@@ -39,21 +39,15 @@ var getRadioEl = (ctx, value) => {
   return ctx.getById(getItemId(ctx, value));
 };
 var getOffsetRect = (el) => ({
-  left: el?.offsetLeft ?? 0,
-  top: el?.offsetTop ?? 0,
+  x: el?.offsetLeft ?? 0,
+  y: el?.offsetTop ?? 0,
   width: el?.offsetWidth ?? 0,
   height: el?.offsetHeight ?? 0
 });
-var resolveRect = (rect) => ({
-  width: `${rect.width}px`,
-  height: `${rect.height}px`,
-  left: `${rect.left}px`,
-  top: `${rect.top}px`
-});
 
 // src/radio-group.connect.ts
 function connect(service, normalize) {
-  const { context, send, computed, prop, scope, refs } = service;
+  const { context, send, computed, prop, scope } = service;
   const groupDisabled = computed("isDisabled");
   const readOnly = prop("readOnly");
   function getItemState(props2) {
@@ -63,7 +57,7 @@ function connect(service, normalize) {
       disabled: !!props2.disabled || groupDisabled,
       checked: context.get("value") === props2.value,
       focused: context.get("focusedValue") === props2.value,
-      focusVisible: refs.get("focusVisibleValue") === props2.value,
+      focusVisible: context.get("focusVisibleValue") === props2.value,
       hovered: context.get("hoveredValue") === props2.value,
       active: context.get("activeValue") === props2.value
     };
@@ -195,7 +189,7 @@ function connect(service, normalize) {
           }
         },
         onBlur() {
-          send({ type: "SET_FOCUSED", value: null, focused: false });
+          send({ type: "SET_FOCUSED", value: null, focused: false, focusVisible: false });
         },
         onFocus() {
           const focusVisible$1 = focusVisible.isFocusVisible();
@@ -224,19 +218,19 @@ function connect(service, normalize) {
         id: getIndicatorId(scope),
         ...parts.indicator.attrs,
         dir: prop("dir"),
-        hidden: context.get("value") == null,
+        hidden: context.get("value") == null || rect == null,
         "data-disabled": domQuery.dataAttr(groupDisabled),
         "data-orientation": prop("orientation"),
         style: {
           "--transition-property": "left, top, width, height",
-          "--left": rect?.left,
-          "--top": rect?.top,
-          "--width": rect?.width,
-          "--height": rect?.height,
+          "--left": utils.toPx(rect?.x),
+          "--top": utils.toPx(rect?.y),
+          "--width": utils.toPx(rect?.width),
+          "--height": utils.toPx(rect?.height),
           position: "absolute",
           willChange: "var(--transition-property)",
           transitionProperty: "var(--transition-property)",
-          transitionDuration: context.get("canIndicatorTransition") ? "var(--transition-duration, 150ms)" : "0ms",
+          transitionDuration: "var(--transition-duration, 150ms)",
           transitionTimingFunction: "var(--transition-timing-function)",
           [prop("orientation") === "horizontal" ? "left" : "top"]: prop("orientation") === "horizontal" ? "var(--left)" : "var(--top)"
         }
@@ -270,14 +264,14 @@ var machine = core.createMachine({
       focusedValue: bindable(() => ({
         defaultValue: null
       })),
+      focusVisibleValue: bindable(() => ({
+        defaultValue: null
+      })),
       hoveredValue: bindable(() => ({
         defaultValue: null
       })),
       indicatorRect: bindable(() => ({
-        defaultValue: {}
-      })),
-      canIndicatorTransition: bindable(() => ({
-        defaultValue: false
+        defaultValue: null
       })),
       fieldsetDisabled: bindable(() => ({
         defaultValue: false
@@ -301,7 +295,7 @@ var machine = core.createMachine({
   effects: ["trackFormControlState", "trackFocusVisible"],
   watch({ track, action, context }) {
     track([() => context.get("value")], () => {
-      action(["setIndicatorTransition", "syncIndicatorRect", "syncInputElements"]);
+      action(["syncIndicatorRect", "syncInputElements"]);
     });
   },
   on: {
@@ -356,9 +350,10 @@ var machine = core.createMachine({
       setActive({ context, event }) {
         context.set("activeValue", event.value);
       },
-      setFocused({ context, event, refs }) {
+      setFocused({ context, event }) {
         context.set("focusedValue", event.value);
-        refs.set("focusVisibleValue", event.focusVisible ? event.value : null);
+        const focusVisibleValue = event.value != null && event.focusVisible ? event.value : null;
+        context.set("focusVisibleValue", focusVisibleValue);
       },
       syncInputElements({ context, scope }) {
         const inputs = getInputEls(scope);
@@ -366,9 +361,6 @@ var machine = core.createMachine({
           input.checked = input.value === context.get("value");
         });
       },
-      setIndicatorTransition({ context }) {
-        context.set("canIndicatorTransition", utils.isString(context.get("value")));
-      },
       cleanupObserver({ refs }) {
         refs.get("indicatorCleanup")?.();
       },
@@ -381,18 +373,14 @@ 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", {});
+          context.set("indicatorRect", null);
           return;
         }
-        const indicatorCleanup = domQuery.trackElementRect([radioEl], {
-          measure(el) {
-            return getOffsetRect(el);
-          },
-          onEntry({ rects }) {
-            context.set("indicatorRect", resolveRect(rects[0]));
-          }
-        });
+        const exec = () => {
+          context.set("indicatorRect", getOffsetRect(radioEl));
+        };
+        exec();
+        const indicatorCleanup = domQuery.resizeObserverBorderBox.observe(radioEl, exec);
         refs.set("indicatorCleanup", indicatorCleanup);
       },
       dispatchChangeEvent({ context, scope }) {

package/dist/index.mjs

@@ -1,8 +1,8 @@
 import { createAnatomy } from '@zag-js/anatomy';
-import { dispatchInputCheckedEvent, trackElementRect, trackFormControl, queryAll, dataAttr, visuallyHiddenStyle, isSafari, isLeftClick } from '@zag-js/dom-query';
+import { dispatchInputCheckedEvent, resizeObserverBorderBox, trackFormControl, queryAll, dataAttr, visuallyHiddenStyle, isSafari, isLeftClick } from '@zag-js/dom-query';
 import { trackFocusVisible, isFocusVisible } from '@zag-js/focus-visible';
+import { createSplitProps, toPx } from '@zag-js/utils';
 import { createGuards, createMachine } from '@zag-js/core';
-import { isString, createSplitProps } from '@zag-js/utils';
 import { createProps } from '@zag-js/types';
 
 // src/radio-group.anatomy.ts
@@ -37,21 +37,15 @@ var getRadioEl = (ctx, value) => {
   return ctx.getById(getItemId(ctx, value));
 };
 var getOffsetRect = (el) => ({
-  left: el?.offsetLeft ?? 0,
-  top: el?.offsetTop ?? 0,
+  x: el?.offsetLeft ?? 0,
+  y: el?.offsetTop ?? 0,
   width: el?.offsetWidth ?? 0,
   height: el?.offsetHeight ?? 0
 });
-var resolveRect = (rect) => ({
-  width: `${rect.width}px`,
-  height: `${rect.height}px`,
-  left: `${rect.left}px`,
-  top: `${rect.top}px`
-});
 
 // src/radio-group.connect.ts
 function connect(service, normalize) {
-  const { context, send, computed, prop, scope, refs } = service;
+  const { context, send, computed, prop, scope } = service;
   const groupDisabled = computed("isDisabled");
   const readOnly = prop("readOnly");
   function getItemState(props2) {
@@ -61,7 +55,7 @@ function connect(service, normalize) {
       disabled: !!props2.disabled || groupDisabled,
       checked: context.get("value") === props2.value,
       focused: context.get("focusedValue") === props2.value,
-      focusVisible: refs.get("focusVisibleValue") === props2.value,
+      focusVisible: context.get("focusVisibleValue") === props2.value,
       hovered: context.get("hoveredValue") === props2.value,
       active: context.get("activeValue") === props2.value
     };
@@ -193,7 +187,7 @@ function connect(service, normalize) {
           }
         },
         onBlur() {
-          send({ type: "SET_FOCUSED", value: null, focused: false });
+          send({ type: "SET_FOCUSED", value: null, focused: false, focusVisible: false });
         },
         onFocus() {
           const focusVisible = isFocusVisible();
@@ -222,19 +216,19 @@ function connect(service, normalize) {
         id: getIndicatorId(scope),
         ...parts.indicator.attrs,
         dir: prop("dir"),
-        hidden: context.get("value") == null,
+        hidden: context.get("value") == null || rect == null,
         "data-disabled": dataAttr(groupDisabled),
         "data-orientation": prop("orientation"),
         style: {
           "--transition-property": "left, top, width, height",
-          "--left": rect?.left,
-          "--top": rect?.top,
-          "--width": rect?.width,
-          "--height": rect?.height,
+          "--left": toPx(rect?.x),
+          "--top": toPx(rect?.y),
+          "--width": toPx(rect?.width),
+          "--height": toPx(rect?.height),
           position: "absolute",
           willChange: "var(--transition-property)",
           transitionProperty: "var(--transition-property)",
-          transitionDuration: context.get("canIndicatorTransition") ? "var(--transition-duration, 150ms)" : "0ms",
+          transitionDuration: "var(--transition-duration, 150ms)",
           transitionTimingFunction: "var(--transition-timing-function)",
           [prop("orientation") === "horizontal" ? "left" : "top"]: prop("orientation") === "horizontal" ? "var(--left)" : "var(--top)"
         }
@@ -268,14 +262,14 @@ var machine = createMachine({
       focusedValue: bindable(() => ({
         defaultValue: null
       })),
+      focusVisibleValue: bindable(() => ({
+        defaultValue: null
+      })),
       hoveredValue: bindable(() => ({
         defaultValue: null
       })),
       indicatorRect: bindable(() => ({
-        defaultValue: {}
-      })),
-      canIndicatorTransition: bindable(() => ({
-        defaultValue: false
+        defaultValue: null
       })),
       fieldsetDisabled: bindable(() => ({
         defaultValue: false
@@ -299,7 +293,7 @@ var machine = createMachine({
   effects: ["trackFormControlState", "trackFocusVisible"],
   watch({ track, action, context }) {
     track([() => context.get("value")], () => {
-      action(["setIndicatorTransition", "syncIndicatorRect", "syncInputElements"]);
+      action(["syncIndicatorRect", "syncInputElements"]);
     });
   },
   on: {
@@ -354,9 +348,10 @@ var machine = createMachine({
       setActive({ context, event }) {
         context.set("activeValue", event.value);
       },
-      setFocused({ context, event, refs }) {
+      setFocused({ context, event }) {
         context.set("focusedValue", event.value);
-        refs.set("focusVisibleValue", event.focusVisible ? event.value : null);
+        const focusVisibleValue = event.value != null && event.focusVisible ? event.value : null;
+        context.set("focusVisibleValue", focusVisibleValue);
       },
       syncInputElements({ context, scope }) {
         const inputs = getInputEls(scope);
@@ -364,9 +359,6 @@ var machine = createMachine({
           input.checked = input.value === context.get("value");
         });
       },
-      setIndicatorTransition({ context }) {
-        context.set("canIndicatorTransition", isString(context.get("value")));
-      },
       cleanupObserver({ refs }) {
         refs.get("indicatorCleanup")?.();
       },
@@ -379,18 +371,14 @@ var machine = createMachine({
         const value = context.get("value");
         const radioEl = getRadioEl(scope, value);
         if (value == null || !radioEl) {
-          context.set("canIndicatorTransition", false);
-          context.set("indicatorRect", {});
+          context.set("indicatorRect", null);
           return;
         }
-        const indicatorCleanup = trackElementRect([radioEl], {
-          measure(el) {
-            return getOffsetRect(el);
-          },
-          onEntry({ rects }) {
-            context.set("indicatorRect", resolveRect(rects[0]));
-          }
-        });
+        const exec = () => {
+          context.set("indicatorRect", getOffsetRect(radioEl));
+        };
+        exec();
+        const indicatorCleanup = resizeObserverBorderBox.observe(radioEl, exec);
         refs.set("indicatorCleanup", indicatorCleanup);
       },
       dispatchChangeEvent({ context, scope }) {

package/package.json

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