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

Comparing version 0.57.0 to 0.58.0

dist/index.d.ts

 import * as _zag_js_anatomy from '@zag-js/anatomy';
 import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
-import { StateMachine } from '@zag-js/core';
+import { Machine, StateMachine } from '@zag-js/core';
 import { StrokeOptions } from 'perfect-freehand';
@@ -35,2 +35,6 @@ export { StrokeOptions } from 'perfect-freehand';
 }>;
+interface IntlTranslations {
+    clearTrigger: string;
+    control: string;
+}
 
@@ -43,2 +47,6 @@ interface PublicContext extends DirectionProperty, CommonProperties {
     /**
+     * The translations of the signature pad. Useful for internationalization.
+     */
+    translations?: IntlTranslations;
+    /**
      * Callback when the signature pad is drawing.
@@ -61,2 +69,6 @@ */
     /**
+     * Whether the signature pad is required.
+     */
+    required?: boolean;
+    /**
      * Whether the signature pad is read-only.
@@ -96,2 +108,3 @@ */
 type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
 interface SegmentPathProps {
@@ -142,5 +155,5 @@ path: string;
 
-declare const props: ("dir" | "id" | "getRootNode" | "name" | "disabled" | "ids" | "onDraw" | "onDrawEnd" | "drawing" | "readOnly")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "dir" | "id" | "getRootNode" | "name" | "disabled" | "ids" | "onDraw" | "onDrawEnd" | "drawing" | "readOnly">];
+declare const props: ("dir" | "id" | "getRootNode" | "name" | "disabled" | "required" | "ids" | "translations" | "onDraw" | "onDrawEnd" | "drawing" | "readOnly")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "dir" | "id" | "getRootNode" | "name" | "disabled" | "required" | "ids" | "translations" | "onDraw" | "onDrawEnd" | "drawing" | "readOnly">];
 
-export { type MachineApi as Api, type UserDefinedContext as Context, type DataUrlType, type DrawDetails, type DrawEndDetails, type DrawingOptions, type ElementIds, type HiddenInputProps, type SegmentPathProps, anatomy, connect, machine, props, splitProps };
+export { type MachineApi as Api, type UserDefinedContext as Context, type DataUrlType, type DrawDetails, type DrawEndDetails, type DrawingOptions, type ElementIds, type HiddenInputProps, type SegmentPathProps, type Service, anatomy, connect, machine, props, splitProps };

dist/index.js

@@ -74,2 +74,6 @@ "use strict";
 // src/signature-pad.connect.ts
+var defaultTranslations = {
+  control: "signature pad",
+  clearTrigger: "clear signature"
+};
 function connect(state, send, normalize) {
@@ -80,2 +84,3 @@ const drawing = state.matches("drawing");
   const disabled = !!state.context.disabled;
+  const translations = state.context.translations || defaultTranslations;
   return {
@@ -93,6 +98,12 @@ empty,
     getLabelProps() {
-      return normalize.element({
+      return normalize.label({
         ...parts.label.attrs,
         "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
-        htmlFor: dom.getControlId(state.context)
+        htmlFor: dom.getHiddenInputId(state.context),
+        onClick(event) {
+          if (!interactive) return;
+          if (event.defaultPrevented) return;
+          const controlEl = dom.getControlEl(state.context);
+          controlEl?.focus({ preventScroll: true });
+        }
       });
@@ -114,3 +125,3 @@ },
         "aria-roledescription": "signature pad",
-        "aria-label": "signature pad",
+        "aria-label": translations.control,
         "aria-disabled": disabled,
@@ -173,3 +184,3 @@ "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
         type: "button",
-        "aria-label": "Clear Signature",
+        "aria-label": translations.clearTrigger,
         hidden: !state.context.paths.length || drawing,
@@ -184,5 +195,8 @@ disabled,
       return normalize.input({
+        id: dom.getHiddenInputId(state.context),
         type: "text",
         hidden: true,
         disabled,
+        required: state.context.required,
+        readOnly: state.context.readOnly,
         name: state.context.name,
@@ -340,10 +354,12 @@ value: props2.value
   "disabled",
+  "drawing",
   "getRootNode",
   "id",
   "ids",
+  "name",
   "onDraw",
   "onDrawEnd",
   "readOnly",
-  "drawing",
-  "name"
+  "required",
+  "translations"
 ]);
@@ -350,0 +366,0 @@ var splitProps = (0, import_utils2.createSplitProps)(props);

package.json

 {
   "name": "@zag-js/signature-pad",
-  "version": "0.57.0",
+  "version": "0.58.0",
   "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.57.0",
-    "@zag-js/core": "0.57.0",
-    "@zag-js/dom-query": "0.57.0",
-    "@zag-js/dom-event": "0.57.0",
-    "@zag-js/utils": "0.57.0",
-    "@zag-js/types": "0.57.0"
+    "@zag-js/anatomy": "0.58.0",
+    "@zag-js/core": "0.58.0",
+    "@zag-js/dom-query": "0.58.0",
+    "@zag-js/dom-event": "0.58.0",
+    "@zag-js/utils": "0.58.0",
+    "@zag-js/types": "0.58.0"
   },
@@ -40,0 +40,0 @@ "devDependencies": {

src/index.ts

@@ -15,3 +15,4 @@ export { anatomy } from "./signature-pad.anatomy"
   SegmentPathProps,
+  Service,
   StrokeOptions,
 } from "./signature-pad.types"

src/signature-pad.connect.ts

@@ -6,4 +6,9 @@ import { getRelativePoint, isLeftClick, isModifierKey } from "@zag-js/dom-event"
 import { dom } from "./signature-pad.dom"
-import type { MachineApi, Send, State } from "./signature-pad.types"
+import type { IntlTranslations, MachineApi, Send, State } from "./signature-pad.types"
 
+const defaultTranslations: IntlTranslations = {
+  control: "signature pad",
+  clearTrigger: "clear signature",
+}
+
 export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
@@ -15,2 +20,4 @@ const drawing = state.matches("drawing")
 
+  const translations = state.context.translations || defaultTranslations
+
   return {
@@ -30,6 +37,12 @@ empty: empty,
     getLabelProps() {
-      return normalize.element({
+      return normalize.label({
         ...parts.label.attrs,
         "data-disabled": dataAttr(disabled),
-        htmlFor: dom.getControlId(state.context),
+        htmlFor: dom.getHiddenInputId(state.context),
+        onClick(event) {
+          if (!interactive) return
+          if (event.defaultPrevented) return
+          const controlEl = dom.getControlEl(state.context)
+          controlEl?.focus({ preventScroll: true })
+        },
       })
@@ -53,3 +66,3 @@ },
         "aria-roledescription": "signature pad",
-        "aria-label": "signature pad",
+        "aria-label": translations.control,
         "aria-disabled": disabled,
@@ -119,5 +132,5 @@ "data-disabled": dataAttr(disabled),
         type: "button",
-        "aria-label": "Clear Signature",
+        "aria-label": translations.clearTrigger,
         hidden: !state.context.paths.length || drawing,
-        disabled: disabled,
+        disabled,
         onClick() {
@@ -131,5 +144,8 @@ send({ type: "CLEAR" })
       return normalize.input({
+        id: dom.getHiddenInputId(state.context),
         type: "text",
         hidden: true,
-        disabled: disabled,
+        disabled,
+        required: state.context.required,
+        readOnly: state.context.readOnly,
         name: state.context.name,
@@ -136,0 +152,0 @@ value: props.value,

src/signature-pad.props.ts

@@ -8,12 +8,14 @@ import { createProps } from "@zag-js/types"
   "disabled",
+  "drawing",
   "getRootNode",
   "id",
   "ids",
+  "name",
   "onDraw",
   "onDrawEnd",
   "readOnly",
-  "drawing",
-  "name",
+  "required",
+  "translations",
 ])
 
 export const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)

src/signature-pad.types.ts

@@ -1,2 +0,2 @@
-import type { StateMachine as S } from "@zag-js/core"
+import type { Machine, StateMachine as S } from "@zag-js/core"
 import type { CommonProperties, DirectionProperty, PropTypes, RequiredBy } from "@zag-js/types"
@@ -45,2 +45,7 @@ import type { StrokeOptions } from "perfect-freehand"
 
+export interface IntlTranslations {
+  clearTrigger: string
+  control: string
+}
+
 export type { StrokeOptions }
@@ -58,2 +63,6 @@
   /**
+   * The translations of the signature pad. Useful for internationalization.
+   */
+  translations?: IntlTranslations
+  /**
    * Callback when the signature pad is drawing.
@@ -76,2 +85,6 @@ */
   /**
+   * Whether the signature pad is required.
+   */
+  required?: boolean
+  /**
    * Whether the signature pad is read-only.
@@ -118,2 +131,4 @@ */
 
+export type Service = Machine<MachineContext, MachineState, S.AnyEventObject>
+
 /* -----------------------------------------------------------------------------
@@ -120,0 +135,0 @@ * Component API

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

83667

increased by6.38%

Lines of code

1305

increased by6.1%

Dependency changes

• + Added@zag-js/anatomy@0.58.0(transitive)

• + Added@zag-js/core@0.58.0(transitive)

• + Added@zag-js/dom-event@0.58.0(transitive)

• + Added@zag-js/dom-query@0.58.0(transitive)

• + Added@zag-js/store@0.58.0(transitive)

• + Added@zag-js/text-selection@0.58.0(transitive)

• + Added@zag-js/types@0.58.0(transitive)

• + Added@zag-js/utils@0.58.0(transitive)

• - Removed@zag-js/anatomy@0.57.0(transitive)

• - Removed@zag-js/core@0.57.0(transitive)

• - Removed@zag-js/dom-event@0.57.0(transitive)

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

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

• - Removed@zag-js/text-selection@0.57.0(transitive)

• - Removed@zag-js/types@0.57.0(transitive)

• - Removed@zag-js/utils@0.57.0(transitive)

• Updated@zag-js/anatomy@0.58.0

• Updated@zag-js/core@0.58.0

• Updated@zag-js/dom-event@0.58.0

• Updated@zag-js/dom-query@0.58.0

• Updated@zag-js/types@0.58.0

• Updated@zag-js/utils@0.58.0