@zag-js/radio-group 1.35.3 → 1.37.0

package/dist/radio-group.connect.js

@@ -180,6 +180,7 @@ function connect(service, normalize) {
         form: prop("form"),
         value: props.value,
         required: prop("required"),
+        "aria-labelledby": dom.getItemLabelId(scope, props.value),
         "aria-invalid": itemState.invalid || void 0,
         onClick(event) {
           if (readOnly) {
@@ -216,14 +217,18 @@ function connect(service, normalize) {
     },
     getIndicatorProps() {
       const rect = context.get("indicatorRect");
-      const rectIsEmpty = rect == null || rect.width === 0 && rect.height === 0 && rect.x === 0 && rect.y === 0;
+      const animateIndicator = context.get("animateIndicator");
       return normalize.element({
         id: dom.getIndicatorId(scope),
         ...import_radio_group.parts.indicator.attrs,
         dir: prop("dir"),
-        hidden: context.get("value") == null || rectIsEmpty,
+        hidden: context.get("value") == null || isRectEmpty(rect),
         "data-disabled": (0, import_dom_query.dataAttr)(groupDisabled),
         "data-orientation": prop("orientation"),
+        onTransitionEnd(event) {
+          if ((0, import_dom_query.getEventTarget)(event) !== event.currentTarget) return;
+          send({ type: "INDICATOR_TRANSITION_END" });
+        },
         style: {
           "--transition-property": "left, top, width, height",
           "--left": (0, import_utils.toPx)(rect?.x),
@@ -231,9 +236,9 @@ function connect(service, normalize) {
           "--width": (0, import_utils.toPx)(rect?.width),
           "--height": (0, import_utils.toPx)(rect?.height),
           position: "absolute",
-          willChange: "var(--transition-property)",
-          transitionProperty: "var(--transition-property)",
-          transitionDuration: "var(--transition-duration, 150ms)",
+          willChange: animateIndicator ? "var(--transition-property)" : "auto",
+          transitionProperty: animateIndicator ? "var(--transition-property)" : "none",
+          transitionDuration: animateIndicator ? "var(--transition-duration, 150ms)" : "0ms",
           transitionTimingFunction: "var(--transition-timing-function)",
           [prop("orientation") === "horizontal" ? "left" : "top"]: prop("orientation") === "horizontal" ? "var(--left)" : "var(--top)"
         }
@@ -241,6 +246,7 @@ function connect(service, normalize) {
     }
   };
 }
+var isRectEmpty = (rect) => rect == null || rect.width === 0 && rect.height === 0 && rect.x === 0 && rect.y === 0;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   connect

package/dist/radio-group.connect.mjs

@@ -1,5 +1,5 @@
 // src/radio-group.connect.ts
-import { dataAttr, isLeftClick, isSafari, visuallyHiddenStyle } from "@zag-js/dom-query";
+import { dataAttr, getEventTarget, isLeftClick, isSafari, visuallyHiddenStyle } from "@zag-js/dom-query";
 import { isFocusVisible } from "@zag-js/focus-visible";
 import { toPx } from "@zag-js/utils";
 import { parts } from "./radio-group.anatomy.mjs";
@@ -146,6 +146,7 @@ function connect(service, normalize) {
         form: prop("form"),
         value: props.value,
         required: prop("required"),
+        "aria-labelledby": dom.getItemLabelId(scope, props.value),
         "aria-invalid": itemState.invalid || void 0,
         onClick(event) {
           if (readOnly) {
@@ -182,14 +183,18 @@ function connect(service, normalize) {
     },
     getIndicatorProps() {
       const rect = context.get("indicatorRect");
-      const rectIsEmpty = rect == null || rect.width === 0 && rect.height === 0 && rect.x === 0 && rect.y === 0;
+      const animateIndicator = context.get("animateIndicator");
       return normalize.element({
         id: dom.getIndicatorId(scope),
         ...parts.indicator.attrs,
         dir: prop("dir"),
-        hidden: context.get("value") == null || rectIsEmpty,
+        hidden: context.get("value") == null || isRectEmpty(rect),
         "data-disabled": dataAttr(groupDisabled),
         "data-orientation": prop("orientation"),
+        onTransitionEnd(event) {
+          if (getEventTarget(event) !== event.currentTarget) return;
+          send({ type: "INDICATOR_TRANSITION_END" });
+        },
         style: {
           "--transition-property": "left, top, width, height",
           "--left": toPx(rect?.x),
@@ -197,9 +202,9 @@ function connect(service, normalize) {
           "--width": toPx(rect?.width),
           "--height": toPx(rect?.height),
           position: "absolute",
-          willChange: "var(--transition-property)",
-          transitionProperty: "var(--transition-property)",
-          transitionDuration: "var(--transition-duration, 150ms)",
+          willChange: animateIndicator ? "var(--transition-property)" : "auto",
+          transitionProperty: animateIndicator ? "var(--transition-property)" : "none",
+          transitionDuration: animateIndicator ? "var(--transition-duration, 150ms)" : "0ms",
           transitionTimingFunction: "var(--transition-timing-function)",
           [prop("orientation") === "horizontal" ? "left" : "top"]: prop("orientation") === "horizontal" ? "var(--left)" : "var(--top)"
         }
@@ -207,6 +212,7 @@ function connect(service, normalize) {
     }
   };
 }
+var isRectEmpty = (rect) => rect == null || rect.width === 0 && rect.height === 0 && rect.x === 0 && rect.y === 0;
 export {
   connect
 };

package/dist/radio-group.machine.js

@@ -72,6 +72,9 @@ var machine = (0, import_core.createMachine)({
       indicatorRect: bindable(() => ({
         defaultValue: null
       })),
+      animateIndicator: bindable(() => ({
+        defaultValue: false
+      })),
       fieldsetDisabled: bindable(() => ({
         defaultValue: false
       })),
@@ -83,18 +86,19 @@ var machine = (0, import_core.createMachine)({
   refs() {
     return {
       indicatorCleanup: null,
-      focusVisibleValue: null
+      focusVisibleValue: null,
+      prevValue: null
     };
   },
   computed: {
     isDisabled: ({ prop, context }) => !!prop("disabled") || context.get("fieldsetDisabled")
   },
-  entry: ["syncIndicatorRect", "syncSsr"],
+  entry: ["syncPrevValue", "syncIndicatorRect", "syncSsr"],
   exit: ["cleanupObserver"],
   effects: ["trackFormControlState", "trackFocusVisible"],
   watch({ track, action, context }) {
     track([() => context.get("value")], () => {
-      action(["syncIndicatorRect", "syncInputElements"]);
+      action(["syncIndicatorAnimation", "syncIndicatorRect", "syncInputElements"]);
     });
   },
   on: {
@@ -115,6 +119,9 @@ var machine = (0, import_core.createMachine)({
     },
     SET_FOCUSED: {
       actions: ["setFocused"]
+    },
+    INDICATOR_TRANSITION_END: {
+      actions: ["clearIndicatorAnimation"]
     }
   },
   states: {
@@ -154,6 +161,19 @@ var machine = (0, import_core.createMachine)({
         const focusVisibleValue = event.value != null && event.focusVisible ? event.value : null;
         context.set("focusVisibleValue", focusVisibleValue);
       },
+      syncPrevValue({ context, refs }) {
+        refs.set("prevValue", context.get("value"));
+      },
+      syncIndicatorAnimation({ context, refs }) {
+        const prevValue = refs.get("prevValue");
+        const nextValue = context.get("value");
+        const animate = prevValue != null && nextValue != null && prevValue !== nextValue;
+        context.set("animateIndicator", animate);
+        refs.set("prevValue", nextValue);
+      },
+      clearIndicatorAnimation({ context }) {
+        context.set("animateIndicator", false);
+      },
       syncInputElements({ context, scope }) {
         const inputs = dom.getInputEls(scope);
         inputs.forEach((input) => {

package/dist/radio-group.machine.mjs

@@ -38,6 +38,9 @@ var machine = createMachine({
       indicatorRect: bindable(() => ({
         defaultValue: null
       })),
+      animateIndicator: bindable(() => ({
+        defaultValue: false
+      })),
       fieldsetDisabled: bindable(() => ({
         defaultValue: false
       })),
@@ -49,18 +52,19 @@ var machine = createMachine({
   refs() {
     return {
       indicatorCleanup: null,
-      focusVisibleValue: null
+      focusVisibleValue: null,
+      prevValue: null
     };
   },
   computed: {
     isDisabled: ({ prop, context }) => !!prop("disabled") || context.get("fieldsetDisabled")
   },
-  entry: ["syncIndicatorRect", "syncSsr"],
+  entry: ["syncPrevValue", "syncIndicatorRect", "syncSsr"],
   exit: ["cleanupObserver"],
   effects: ["trackFormControlState", "trackFocusVisible"],
   watch({ track, action, context }) {
     track([() => context.get("value")], () => {
-      action(["syncIndicatorRect", "syncInputElements"]);
+      action(["syncIndicatorAnimation", "syncIndicatorRect", "syncInputElements"]);
     });
   },
   on: {
@@ -81,6 +85,9 @@ var machine = createMachine({
     },
     SET_FOCUSED: {
       actions: ["setFocused"]
+    },
+    INDICATOR_TRANSITION_END: {
+      actions: ["clearIndicatorAnimation"]
     }
   },
   states: {
@@ -120,6 +127,19 @@ var machine = createMachine({
         const focusVisibleValue = event.value != null && event.focusVisible ? event.value : null;
         context.set("focusVisibleValue", focusVisibleValue);
       },
+      syncPrevValue({ context, refs }) {
+        refs.set("prevValue", context.get("value"));
+      },
+      syncIndicatorAnimation({ context, refs }) {
+        const prevValue = refs.get("prevValue");
+        const nextValue = context.get("value");
+        const animate = prevValue != null && nextValue != null && prevValue !== nextValue;
+        context.set("animateIndicator", animate);
+        refs.set("prevValue", nextValue);
+      },
+      clearIndicatorAnimation({ context }) {
+        context.set("animateIndicator", false);
+      },
       syncInputElements({ context, scope }) {
         const inputs = dom.getInputEls(scope);
         inputs.forEach((input) => {

package/dist/radio-group.types.d.mts

@@ -86,6 +86,10 @@ interface PrivateContext {
      * The active tab indicator's dom rect
      */
     indicatorRect: Rect | null;
+    /**
+     * Whether indicator transitions should be animated
+     */
+    animateIndicator: boolean;
     /**
      * Whether the radio group's fieldset is disabled
      */
@@ -107,6 +111,10 @@ interface Refs {
      * Function to clean up the observer for the active tab's rect
      */
     indicatorCleanup: VoidFunction | null;
+    /**
+     * Previous selected value, used to detect real value transitions
+     */
+    prevValue: string | null;
 }
 interface RadioGroupSchema {
     state: "idle";

package/dist/radio-group.types.d.ts

@@ -86,6 +86,10 @@ interface PrivateContext {
      * The active tab indicator's dom rect
      */
     indicatorRect: Rect | null;
+    /**
+     * Whether indicator transitions should be animated
+     */
+    animateIndicator: boolean;
     /**
      * Whether the radio group's fieldset is disabled
      */
@@ -107,6 +111,10 @@ interface Refs {
      * Function to clean up the observer for the active tab's rect
      */
     indicatorCleanup: VoidFunction | null;
+    /**
+     * Previous selected value, used to detect real value transitions
+     */
+    prevValue: string | null;
 }
 interface RadioGroupSchema {
     state: "idle";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/radio-group",
-  "version": "1.35.3",
+  "version": "1.37.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.35.3",
-    "@zag-js/dom-query": "1.35.3",
-    "@zag-js/focus-visible": "1.35.3",
-    "@zag-js/utils": "1.35.3",
-    "@zag-js/core": "1.35.3",
-    "@zag-js/types": "1.35.3"
+    "@zag-js/focus-visible": "1.37.0",
+    "@zag-js/utils": "1.37.0",
+    "@zag-js/dom-query": "1.37.0",
+    "@zag-js/anatomy": "1.37.0",
+    "@zag-js/core": "1.37.0",
+    "@zag-js/types": "1.37.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"