@zag-js/radio-group - npm Package Compare versions

Comparing version 0.68.1 to 0.69.0

dist/index.js

@@ -47,2 +47,3 @@ "use strict";
 var import_dom_query2 = require("@zag-js/dom-query");
+var import_focus_visible = require("@zag-js/focus-visible");
 
@@ -110,2 +111,3 @@ // src/radio-group.dom.ts
       "data-focus": (0, import_dom_query2.dataAttr)(radioState.focused),
+      "data-focus-visible": (0, import_dom_query2.dataAttr)(radioState.focused && state.context.focusVisible),
       "data-disabled": (0, import_dom_query2.dataAttr)(radioState.disabled),
@@ -232,6 +234,7 @@ "data-readonly": (0, import_dom_query2.dataAttr)(readOnly),
         onBlur() {
-          send({ type: "SET_FOCUSED", value: null });
+          send({ type: "SET_FOCUSED", value: null, focused: false, focusVisible: false });
         },
         onFocus() {
-          send({ type: "SET_FOCUSED", value: props2.value, focused: true });
+          const focusVisible = (0, import_focus_visible.isFocusVisible)();
+          send({ type: "SET_FOCUSED", value: props2.value, focused: true, focusVisible });
         },
@@ -285,2 +288,3 @@ onKeyDown(event) {
 var import_element_rect = require("@zag-js/element-rect");
+var import_focus_visible2 = require("@zag-js/focus-visible");
 var import_form_utils = require("@zag-js/form-utils");
@@ -306,2 +310,3 @@ var import_utils = require("@zag-js/utils");
         fieldsetDisabled: false,
+        focusVisible: false,
         ssr: true
@@ -314,3 +319,3 @@ },
       exit: ["cleanupObserver"],
-      activities: ["trackFormControlState"],
+      activities: ["trackFormControlState", "trackFocusVisible"],
       watch: {
@@ -357,2 +362,5 @@ value: ["setIndicatorTransition", "syncIndicatorRect", "syncInputElements"]
           });
+        },
+        trackFocusVisible(ctx2) {
+          return (0, import_focus_visible2.trackFocusVisible)({ root: dom.getRootNode(ctx2) });
         }
@@ -372,2 +380,3 @@ },
           ctx2.focusedValue = evt.value;
+          ctx2.focusVisible = evt.focusVisible;
         },
@@ -374,0 +383,0 @@ syncInputElements(ctx2) {

package.json

 {
   "name": "@zag-js/radio-group",
-  "version": "0.68.1",
+  "version": "0.69.0",
   "description": "Core logic for the radio group widget implemented as a state machine",
@@ -31,9 +31,10 @@ "keywords": [
   "dependencies": {
-    "@zag-js/anatomy": "0.68.1",
-    "@zag-js/dom-query": "0.68.1",
-    "@zag-js/element-rect": "0.68.1",
-    "@zag-js/form-utils": "0.68.1",
-    "@zag-js/utils": "0.68.1",
-    "@zag-js/core": "0.68.1",
-    "@zag-js/types": "0.68.1"
+    "@zag-js/anatomy": "0.69.0",
+    "@zag-js/dom-query": "0.69.0",
+    "@zag-js/element-rect": "0.69.0",
+    "@zag-js/utils": "0.69.0",
+    "@zag-js/focus-visible": "0.69.0",
+    "@zag-js/core": "0.69.0",
+    "@zag-js/types": "0.69.0",
+    "@zag-js/form-utils": "0.69.0"
   },
@@ -40,0 +41,0 @@ "devDependencies": {

src/radio-group.connect.ts

 import { dataAttr, visuallyHiddenStyle } from "@zag-js/dom-query"
+import { isFocusVisible } from "@zag-js/focus-visible"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
@@ -26,2 +27,3 @@ import { parts } from "./radio-group.anatomy"
       "data-focus": dataAttr(radioState.focused),
+      "data-focus-visible": dataAttr(radioState.focused && state.context.focusVisible),
       "data-disabled": dataAttr(radioState.disabled),
@@ -165,6 +167,7 @@ "data-readonly": dataAttr(readOnly),
         onBlur() {
-          send({ type: "SET_FOCUSED", value: null })
+          send({ type: "SET_FOCUSED", value: null, focused: false, focusVisible: false })
         },
         onFocus() {
-          send({ type: "SET_FOCUSED", value: props.value, focused: true })
+          const focusVisible = isFocusVisible()
+          send({ type: "SET_FOCUSED", value: props.value, focused: true, focusVisible })
         },
@@ -171,0 +174,0 @@ onKeyDown(event) {

src/radio-group.machine.ts

 import { createMachine, guards } from "@zag-js/core"
 import { nextTick } from "@zag-js/dom-query"
 import { trackElementRect } from "@zag-js/element-rect"
+import { trackFocusVisible } from "@zag-js/focus-visible"
 import { dispatchInputCheckedEvent, trackFormControl } from "@zag-js/form-utils"
@@ -28,2 +29,3 @@ import { compact, isEqual, isString } from "@zag-js/utils"
         fieldsetDisabled: false,
+        focusVisible: false,
         ssr: true,
@@ -40,3 +42,3 @@ },
 
-      activities: ["trackFormControlState"],
+      activities: ["trackFormControlState", "trackFocusVisible"],
 
@@ -88,2 +90,5 @@ watch: {
         },
+        trackFocusVisible(ctx) {
+          return trackFocusVisible({ root: dom.getRootNode(ctx) })
+        },
       },
@@ -103,2 +108,3 @@
           ctx.focusedValue = evt.value
+          ctx.focusVisible = evt.focusVisible
         },
@@ -105,0 +111,0 @@ syncInputElements(ctx) {

src/radio-group.types.ts

@@ -97,2 +97,7 @@ import type { Machine, StateMachine as S } from "@zag-js/core"
    * @internal
+   * Whether the radio group is in focus
+   */
+  focusVisible: boolean
+  /**
+   * @internal
    * Whether the radio group is in server-side rendering
@@ -99,0 +104,0 @@ */

No alert changes

Improved metrics

Total package byte prevSize

115158

3.01%

Lines of code

1645

1.98%

Worsened metrics

Dependency count

8

14.29%

Dependency changes

• + Added

  @zag-js/focus-visible@0.69.0

• + Added

  @zag-js/anatomy@0.69.0
  (transitive)

• + Added

  @zag-js/core@0.69.0
  (transitive)

• + Added

  @zag-js/dom-query@0.69.0
  (transitive)

• + Added

  @zag-js/element-rect@0.69.0
  (transitive)

• + Added

  @zag-js/focus-visible@0.69.0
  (transitive)

• + Added

  @zag-js/form-utils@0.69.0
  (transitive)

• + Added

  @zag-js/store@0.69.0
  (transitive)

• + Added

  @zag-js/types@0.69.0
  (transitive)

• + Added

  @zag-js/utils@0.69.0
  (transitive)

• - Removed

  @zag-js/anatomy@0.68.1
  (transitive)

• - Removed

  @zag-js/core@0.68.1
  (transitive)

• - Removed

  @zag-js/dom-query@0.68.1
  (transitive)

• - Removed

  @zag-js/element-rect@0.68.1
  (transitive)

• - Removed

  @zag-js/form-utils@0.68.1
  (transitive)

• - Removed

  @zag-js/store@0.68.1
  (transitive)

• - Removed

  @zag-js/types@0.68.1
  (transitive)

• - Removed

  @zag-js/utils@0.68.1
  (transitive)

• Updated

  @zag-js/anatomy@0.69.0

• Updated

  @zag-js/core@0.69.0

• Updated

  @zag-js/dom-query@0.69.0

• Updated

  @zag-js/element-rect@0.69.0

• Updated

  @zag-js/form-utils@0.69.0

• Updated

  @zag-js/types@0.69.0

• Updated

  @zag-js/utils@0.69.0