@zag-js/checkbox - npm Package Compare versions

Comparing version 0.68.1 to 0.69.0

dist/index.js

@@ -51,11 +51,14 @@ "use strict";
 // src/checkbox.connect.ts
+var import_focus_visible = require("@zag-js/focus-visible");
 function connect(state, send, normalize) {
   const disabled = state.context.isDisabled;
+  const readOnly = state.context.readOnly;
   const focused = !disabled && state.context.focused;
+  const focusVisible = !disabled && state.context.focusVisible;
   const checked = state.context.isChecked;
   const indeterminate = state.context.isIndeterminate;
-  const readOnly = state.context.readOnly;
   const dataAttrs = {
     "data-active": (0, import_dom_query2.dataAttr)(state.context.active),
     "data-focus": (0, import_dom_query2.dataAttr)(focused),
+    "data-focus-visible": (0, import_dom_query2.dataAttr)(focusVisible),
     "data-readonly": (0, import_dom_query2.dataAttr)(readOnly),
@@ -139,2 +142,9 @@ "data-hover": (0, import_dom_query2.dataAttr)(state.context.hovered),
         style: import_dom_query2.visuallyHiddenStyle,
+        onFocus() {
+          const focusVisible2 = (0, import_focus_visible.isFocusVisible)();
+          send({ type: "CONTEXT.SET", context: { focused: true, focusVisible: focusVisible2 } });
+        },
+        onBlur() {
+          send({ type: "CONTEXT.SET", context: { focused: false, focusVisible: false } });
+        },
         onClick(event) {
@@ -156,2 +166,3 @@ if (readOnly) {
 var import_dom_event = require("@zag-js/dom-event");
+var import_focus_visible2 = require("@zag-js/focus-visible");
 var import_form_utils = require("@zag-js/form-utils");
@@ -171,3 +182,4 @@ var import_utils = require("@zag-js/utils");
         ...ctx,
-        fieldsetDisabled: false
+        fieldsetDisabled: false,
+        focusVisible: false
       },
@@ -229,6 +241,3 @@ watch: {
           if (ctx2.isDisabled) return;
-          return (0, import_dom_event.trackFocusVisible)(dom.getHiddenInputEl(ctx2), {
-            onFocus: () => ctx2.focused = true,
-            onBlur: () => ctx2.focused = false
-          });
+          return (0, import_focus_visible2.trackFocusVisible)({ root: dom.getRootNode(ctx2) });
         },
@@ -259,2 +268,3 @@ trackFormControlState(ctx2, _evt, { send, initialContext }) {
             ctx2.focused = false;
+            ctx2.focusVisible = false;
           }
@@ -261,0 +271,0 @@ },

package.json

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

src/checkbox.connect.ts

@@ -6,9 +6,13 @@ import { dataAttr, visuallyHiddenStyle } from "@zag-js/dom-query"
 import type { MachineApi, Send, State } from "./checkbox.types"
+import { isFocusVisible } from "@zag-js/focus-visible"
 
 export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
   const disabled = state.context.isDisabled
+  const readOnly = state.context.readOnly
+
   const focused = !disabled && state.context.focused
+  const focusVisible = !disabled && state.context.focusVisible
+
   const checked = state.context.isChecked
   const indeterminate = state.context.isIndeterminate
-  const readOnly = state.context.readOnly
 
@@ -18,2 +22,3 @@ const dataAttrs = {
     "data-focus": dataAttr(focused),
+    "data-focus-visible": dataAttr(focusVisible),
     "data-readonly": dataAttr(readOnly),
@@ -105,2 +110,9 @@ "data-hover": dataAttr(state.context.hovered),
         style: visuallyHiddenStyle,
+        onFocus() {
+          const focusVisible = isFocusVisible()
+          send({ type: "CONTEXT.SET", context: { focused: true, focusVisible } })
+        },
+        onBlur() {
+          send({ type: "CONTEXT.SET", context: { focused: false, focusVisible: false } })
+        },
         onClick(event) {
@@ -107,0 +119,0 @@ if (readOnly) {

src/checkbox.machine.ts

 import { createMachine, guards } from "@zag-js/core"
-import { trackFocusVisible, trackPress } from "@zag-js/dom-event"
+import { trackPress } from "@zag-js/dom-event"
+import { trackFocusVisible } from "@zag-js/focus-visible"
 import { dispatchInputCheckedEvent, setElementChecked, trackFormControl } from "@zag-js/form-utils"
@@ -23,2 +24,3 @@ import { compact, isEqual } from "@zag-js/utils"
         fieldsetDisabled: false,
+        focusVisible: false,
       },
@@ -85,6 +87,3 @@
           if (ctx.isDisabled) return
-          return trackFocusVisible(dom.getHiddenInputEl(ctx), {
-            onFocus: () => (ctx.focused = true),
-            onBlur: () => (ctx.focused = false),
-          })
+          return trackFocusVisible({ root: dom.getRootNode(ctx) })
         },
@@ -116,2 +115,3 @@ trackFormControlState(ctx, _evt, { send, initialContext }) {
             ctx.focused = false
+            ctx.focusVisible = false
           }
@@ -118,0 +118,0 @@ },

src/checkbox.types.ts

@@ -100,2 +100,7 @@ import type { Machine, StateMachine as S } from "@zag-js/core"
    * @internal
+   * Whether the checkbox is focus visible
+   */
+  focusVisible?: boolean
+  /**
+   * @internal
    * Whether the checkbox is hovered
@@ -102,0 +107,0 @@ */

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

78849

increased by4.16%

Lines of code

1179

increased by3.06%

Worsened metrics

Dependency count

8

increased by14.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-event@0.69.0(transitive)

• + Added@zag-js/dom-query@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/text-selection@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-event@0.68.1(transitive)

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

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

• - Removed@zag-js/store@0.68.1(transitive)

• - Removed@zag-js/text-selection@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-event@0.69.0

• Updated@zag-js/dom-query@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