@zag-js/radio-group 1.21.1 → 1.21.2

package/dist/index.d.mts

@@ -109,6 +109,10 @@ 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

@@ -109,6 +109,10 @@ 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

@@ -53,19 +53,17 @@ var resolveRect = (rect) => ({
 
 // src/radio-group.connect.ts
 function connect(service, normalize) {
-  const { context, send, computed, prop, scope } = service;
+  const { context, send, computed, prop, scope, refs } = service;
   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,
-      focusVisible: focusVisible$1,
+      focused: context.get("focusedValue") === props2.value,
+      focusVisible: refs.get("focusVisibleValue") === props2.value,
       hovered: context.get("hoveredValue") === props2.value,
       active: context.get("activeValue") === props2.value
     };
@@ -200,7 +198,8 @@ function connect(service, normalize) {
           send({ type: "SET_FOCUSED", value: null, focused: false });
         },
         onFocus() {
-          send({ type: "SET_FOCUSED", value: props2.value, focused: true });
+          const focusVisible$1 = focusVisible.isFocusVisible();
+          send({ type: "SET_FOCUSED", value: props2.value, focused: true, focusVisible: focusVisible$1 });
         },
         onKeyDown(event) {
           if (event.defaultPrevented) return;
@@ -290,7 +289,8 @@ var machine = core.createMachine({
   },
   refs() {
     return {
-      indicatorCleanup: null
+      indicatorCleanup: null,
+      focusVisibleValue: null
     };
   },
   computed: {
@@ -356,8 +356,9 @@ var machine = core.createMachine({
       setActive({ context, event }) {
         context.set("activeValue", event.value);
       },
-      setFocused({ context, event }) {
+      setFocused({ context, event, refs }) {
         context.set("focusedValue", event.value);
+        refs.set("focusVisibleValue", event.focusVisible ? event.value : null);
       },
       syncInputElements({ context, scope }) {
         const inputs = getInputEls(scope);

package/dist/index.mjs

@@ -51,19 +51,17 @@ var resolveRect = (rect) => ({
 
 // src/radio-group.connect.ts
 function connect(service, normalize) {
-  const { context, send, computed, prop, scope } = service;
+  const { context, send, computed, prop, scope, refs } = service;
   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,
-      focusVisible,
+      focused: context.get("focusedValue") === props2.value,
+      focusVisible: refs.get("focusVisibleValue") === props2.value,
       hovered: context.get("hoveredValue") === props2.value,
       active: context.get("activeValue") === props2.value
     };
@@ -198,7 +196,8 @@ function connect(service, normalize) {
           send({ type: "SET_FOCUSED", value: null, focused: false });
         },
         onFocus() {
-          send({ type: "SET_FOCUSED", value: props2.value, focused: true });
+          const focusVisible = isFocusVisible();
+          send({ type: "SET_FOCUSED", value: props2.value, focused: true, focusVisible });
         },
         onKeyDown(event) {
           if (event.defaultPrevented) return;
@@ -288,7 +287,8 @@ var machine = createMachine({
   },
   refs() {
     return {
-      indicatorCleanup: null
+      indicatorCleanup: null,
+      focusVisibleValue: null
     };
   },
   computed: {
@@ -354,8 +354,9 @@ var machine = createMachine({
       setActive({ context, event }) {
         context.set("activeValue", event.value);
       },
-      setFocused({ context, event }) {
+      setFocused({ context, event, refs }) {
         context.set("focusedValue", event.value);
+        refs.set("focusVisibleValue", event.focusVisible ? event.value : null);
       },
       syncInputElements({ context, scope }) {
         const inputs = getInputEls(scope);

package/package.json

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