@zag-js/signature-pad - npm Package Compare versions

Comparing version 0.0.0-dev-20240420202821 to 0.0.0-dev-20240422161736

dist/index.d.ts

@@ -91,7 +91,7 @@ import * as _zag_js_anatomy from '@zag-js/anatomy';
      */
-    isEmpty: boolean;
+    empty: boolean;
     /**
      * Whether the user is currently drawing.
      */
-    isDrawing: boolean;
+    drawing: boolean;
     /**
@@ -98,0 +98,0 @@ * The current path being drawn.

dist/index.js

@@ -104,9 +104,9 @@ "use strict";
 function connect(state, send, normalize) {
-  const isDrawing = state.matches("drawing");
-  const isEmpty = state.context.isEmpty;
-  const isInteractive = state.context.isInteractive;
-  const isDisabled = !!state.context.disabled;
+  const drawing = state.matches("drawing");
+  const empty = state.context.isEmpty;
+  const interactive = state.context.isInteractive;
+  const disabled = !!state.context.disabled;
   return {
-    isEmpty,
-    isDrawing,
+    empty,
+    drawing,
     currentPath: state.context.currentPath,
@@ -122,3 +122,3 @@ paths: state.context.paths,
       ...parts.label.attrs,
-      "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+      "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
       htmlFor: dom.getControlId(state.context)
@@ -128,3 +128,3 @@ }),
       ...parts.root.attrs,
-      "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+      "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
       id: dom.getRootId(state.context)
@@ -134,14 +134,18 @@ }),
       ...parts.control.attrs,
-      tabIndex: isDisabled ? void 0 : 0,
+      tabIndex: disabled ? void 0 : 0,
       id: dom.getControlId(state.context),
       "aria-label": "Signature Pad",
       "aria-roledescription": "signature pad",
-      "aria-disabled": isDisabled,
-      "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+      "aria-disabled": disabled,
+      "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
       onPointerDown(event) {
+        if (!(0, import_dom_event.isLeftClick)(event))
+          return;
+        if ((0, import_dom_event.isModifierKey)(event))
+          return;
+        if (!interactive)
+          return;
         const target = (0, import_dom_query2.getEventTarget)((0, import_dom_event.getNativeEvent)(event));
         if (target?.closest("[data-part=clear-trigger]"))
           return;
-        if (!(0, import_dom_event.isLeftClick)(event) || (0, import_dom_event.isModifierKey)(event) || !isInteractive)
-          return;
         event.currentTarget.setPointerCapture(event.pointerId);
@@ -153,5 +157,7 @@ const point = { x: event.clientX, y: event.clientY };
       onPointerUp(event) {
-        if (!isInteractive)
+        if (!interactive)
           return;
-        event.currentTarget.releasePointerCapture(event.pointerId);
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+          event.currentTarget.releasePointerCapture(event.pointerId);
+        }
       },
@@ -184,3 +190,3 @@ style: {
       ...parts.guide.attrs,
-      "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled)
+      "data-disabled": (0, import_dom_query2.dataAttr)(disabled)
     }),
@@ -191,4 +197,4 @@ clearTriggerProps: normalize.button({
       "aria-label": "Clear Signature",
-      hidden: !state.context.paths.length || isDrawing,
-      disabled: isDisabled,
+      hidden: !state.context.paths.length || drawing,
+      disabled,
       onClick() {
@@ -202,3 +208,3 @@ send({ type: "CLEAR" });
         hidden: true,
-        disabled: isDisabled,
+        disabled,
         name: state.context.name,
@@ -205,0 +211,0 @@ value: props2.value

package.json

 {
   "name": "@zag-js/signature-pad",
-  "version": "0.0.0-dev-20240420202821",
+  "version": "0.0.0-dev-20240422161736",
   "description": "Core logic for the signature-pad widget implemented as a state machine",
@@ -32,8 +32,8 @@ "keywords": [
     "perfect-freehand": "^1.2.2",
-    "@zag-js/anatomy": "0.0.0-dev-20240420202821",
-    "@zag-js/core": "0.0.0-dev-20240420202821",
-    "@zag-js/dom-query": "0.0.0-dev-20240420202821",
-    "@zag-js/dom-event": "0.0.0-dev-20240420202821",
-    "@zag-js/utils": "0.0.0-dev-20240420202821",
-    "@zag-js/types": "0.0.0-dev-20240420202821"
+    "@zag-js/anatomy": "0.0.0-dev-20240422161736",
+    "@zag-js/core": "0.0.0-dev-20240422161736",
+    "@zag-js/dom-query": "0.0.0-dev-20240422161736",
+    "@zag-js/dom-event": "0.0.0-dev-20240422161736",
+    "@zag-js/utils": "0.0.0-dev-20240422161736",
+    "@zag-js/types": "0.0.0-dev-20240422161736"
   },
@@ -40,0 +40,0 @@ "devDependencies": {

src/signature-pad.connect.ts

@@ -9,10 +9,10 @@ import { getNativeEvent, getRelativePoint, isLeftClick, isModifierKey } from "@zag-js/dom-event"
 export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
-  const isDrawing = state.matches("drawing")
-  const isEmpty = state.context.isEmpty
-  const isInteractive = state.context.isInteractive
-  const isDisabled = !!state.context.disabled
+  const drawing = state.matches("drawing")
+  const empty = state.context.isEmpty
+  const interactive = state.context.isInteractive
+  const disabled = !!state.context.disabled
 
   return {
-    isEmpty,
-    isDrawing,
+    empty: empty,
+    drawing: drawing,
     currentPath: state.context.currentPath,
@@ -30,3 +30,3 @@ paths: state.context.paths,
       ...parts.label.attrs,
-      "data-disabled": dataAttr(isDisabled),
+      "data-disabled": dataAttr(disabled),
       htmlFor: dom.getControlId(state.context),
@@ -37,3 +37,3 @@ }),
       ...parts.root.attrs,
-      "data-disabled": dataAttr(isDisabled),
+      "data-disabled": dataAttr(disabled),
       id: dom.getRootId(state.context),
@@ -44,13 +44,18 @@ }),
       ...parts.control.attrs,
-      tabIndex: isDisabled ? undefined : 0,
+      tabIndex: disabled ? undefined : 0,
       id: dom.getControlId(state.context),
       "aria-label": "Signature Pad",
       "aria-roledescription": "signature pad",
-      "aria-disabled": isDisabled,
-      "data-disabled": dataAttr(isDisabled),
+      "aria-disabled": disabled,
+      "data-disabled": dataAttr(disabled),
       onPointerDown(event) {
+        if (!isLeftClick(event)) return
+        if (isModifierKey(event)) return
+        if (!interactive) return
+
         const target = getEventTarget<HTMLElement>(getNativeEvent(event))
         if (target?.closest("[data-part=clear-trigger]")) return
-        if (!isLeftClick(event) || isModifierKey(event) || !isInteractive) return
+
         event.currentTarget.setPointerCapture(event.pointerId)
+
         const point = { x: event.clientX, y: event.clientY }
@@ -61,4 +66,6 @@ const { offset } = getRelativePoint(point, dom.getControlEl(state.context)!)
       onPointerUp(event) {
-        if (!isInteractive) return
-        event.currentTarget.releasePointerCapture(event.pointerId)
+        if (!interactive) return
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+          event.currentTarget.releasePointerCapture(event.pointerId)
+        }
       },
@@ -94,3 +101,3 @@ style: {
       ...parts.guide.attrs,
-      "data-disabled": dataAttr(isDisabled),
+      "data-disabled": dataAttr(disabled),
     }),
@@ -102,4 +109,4 @@
       "aria-label": "Clear Signature",
-      hidden: !state.context.paths.length || isDrawing,
-      disabled: isDisabled,
+      hidden: !state.context.paths.length || drawing,
+      disabled: disabled,
       onClick() {
@@ -114,3 +121,3 @@ send({ type: "CLEAR" })
         hidden: true,
-        disabled: isDisabled,
+        disabled: disabled,
         name: state.context.name,
@@ -117,0 +124,0 @@ value: props.value,

src/signature-pad.types.ts

@@ -110,7 +110,7 @@ import type { StateMachine as S } from "@zag-js/core"
    */
-  isEmpty: boolean
+  empty: boolean
   /**
    * Whether the user is currently drawing.
    */
-  isDrawing: boolean
+  drawing: boolean
   /**
@@ -117,0 +117,0 @@ * The current path being drawn.

No alert changes

Improved metrics

Total package byte prevSize

81400

increased by0.75%

Lines of code

1246

increased by1.3%

Dependency changes

• + Added@zag-js/anatomy@0.0.0-dev-20240422161736(transitive)

• + Added@zag-js/core@0.0.0-dev-20240422161736(transitive)

• + Added@zag-js/dom-event@0.0.0-dev-20240422161736(transitive)

• + Added@zag-js/dom-query@0.0.0-dev-20240422161736(transitive)

• + Added@zag-js/store@0.0.0-dev-20240422161736(transitive)

• + Added@zag-js/text-selection@0.0.0-dev-20240422161736(transitive)

• + Added@zag-js/types@0.0.0-dev-20240422161736(transitive)

• + Added@zag-js/utils@0.0.0-dev-20240422161736(transitive)

• - Removed@zag-js/anatomy@0.0.0-dev-20240420202821(transitive)

• - Removed@zag-js/core@0.0.0-dev-20240420202821(transitive)

• - Removed@zag-js/dom-event@0.0.0-dev-20240420202821(transitive)

• - Removed@zag-js/dom-query@0.0.0-dev-20240420202821(transitive)

• - Removed@zag-js/store@0.0.0-dev-20240420202821(transitive)

• - Removed@zag-js/text-selection@0.0.0-dev-20240420202821(transitive)

• - Removed@zag-js/types@0.0.0-dev-20240420202821(transitive)

• - Removed@zag-js/utils@0.0.0-dev-20240420202821(transitive)

• Updated@zag-js/anatomy@0.0.0-dev-20240422161736

• Updated@zag-js/core@0.0.0-dev-20240422161736

• Updated@zag-js/dom-event@0.0.0-dev-20240422161736

• Updated@zag-js/dom-query@0.0.0-dev-20240422161736

• Updated@zag-js/types@0.0.0-dev-20240422161736

• Updated@zag-js/utils@0.0.0-dev-20240422161736