@zag-js/radio-group 1.28.0 → 1.29.0

package/dist/index.d.mts

@@ -70,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
      */
@@ -99,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";

package/dist/index.d.ts

@@ -70,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
      */
@@ -99,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";

package/dist/index.js

@@ -47,7 +47,7 @@ var getOffsetRect = (el) => ({
 
 // 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) {
@@ -57,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
     };
@@ -189,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();
@@ -264,6 +264,9 @@ var machine = core.createMachine({
       focusedValue: bindable(() => ({
         defaultValue: null
       })),
+      focusVisibleValue: bindable(() => ({
+        defaultValue: null
+      })),
       hoveredValue: bindable(() => ({
         defaultValue: null
       })),
@@ -347,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);

package/dist/index.mjs

@@ -45,7 +45,7 @@ var getOffsetRect = (el) => ({
 
 // 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) {
@@ -55,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
     };
@@ -187,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();
@@ -262,6 +262,9 @@ var machine = createMachine({
       focusedValue: bindable(() => ({
         defaultValue: null
       })),
+      focusVisibleValue: bindable(() => ({
+        defaultValue: null
+      })),
       hoveredValue: bindable(() => ({
         defaultValue: null
       })),
@@ -345,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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/radio-group",
-  "version": "1.28.0",
+  "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.28.0",
-    "@zag-js/dom-query": "1.28.0",
-    "@zag-js/focus-visible": "1.28.0",
-    "@zag-js/utils": "1.28.0",
-    "@zag-js/core": "1.28.0",
-    "@zag-js/types": "1.28.0"
+    "@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"