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

Comparing version 0.0.0-dev-20240426215128 to 0.0.0-dev-20240427205601

dist/index.d.ts

@@ -29,4 +29,13 @@ import * as _zag_js_anatomy from '@zag-js/anatomy';
 }
+type ElementIds = Partial<{
+    root: string;
+    control: string;
+    hiddenInput: string;
+}>;
 interface PublicContext extends DirectionProperty, CommonProperties {
     /**
+     * The ids of the signature pad elements. Useful for composition.
+     */
+    ids?: ElementIds;
+    /**
      * Callback when the signature pad is drawing.
@@ -127,5 +136,5 @@ */
 
-declare const props: ("name" | "dir" | "disabled" | "id" | "onDraw" | "onDrawEnd" | "drawing" | "readOnly" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "name" | "dir" | "disabled" | "id" | "onDraw" | "onDrawEnd" | "drawing" | "readOnly" | "getRootNode">];
+declare const props: ("name" | "dir" | "disabled" | "id" | "ids" | "onDraw" | "onDrawEnd" | "drawing" | "readOnly" | "getRootNode")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "name" | "dir" | "disabled" | "id" | "ids" | "onDraw" | "onDrawEnd" | "drawing" | "readOnly" | "getRootNode">];
 
-export { type MachineApi as Api, type UserDefinedContext as Context, type DataUrlType, type DrawDetails, type DrawEndDetails, type DrawingOptions, 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, anatomy, connect, machine, props, splitProps };

dist/index.js

@@ -61,5 +61,5 @@ "use strict";
 var dom = (0, import_dom_query.createScope)({
-  getRootId: (ctx) => `signature-${ctx.id}`,
-  getControlId: (ctx) => `signature-control-${ctx.id}`,
-  getHiddenInputId: (ctx) => `signature-input-${ctx.id}`,
+  getRootId: (ctx) => ctx.ids?.root ?? `signature-${ctx.id}`,
+  getControlId: (ctx) => ctx.ids?.control ?? `signature-control-${ctx.id}`,
+  getHiddenInputId: (ctx) => ctx.ids?.hiddenInput ?? `signature-input-${ctx.id}`,
   getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
@@ -355,2 +355,3 @@ getSegmentEl: (ctx) => (0, import_dom_query.query)(dom.getControlEl(ctx), "[data-part=segment]"),
   "id",
+  "ids",
   "onDraw",
@@ -357,0 +358,0 @@ "onDrawEnd",

package.json

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

src/index.ts

@@ -12,4 +12,5 @@ export { anatomy } from "./signature-pad.anatomy"
   DrawingOptions,
+  ElementIds,
   HiddenInputProps,
   SegmentPathProps,
 } from "./signature-pad.types"

src/signature-pad.dom.ts

@@ -5,5 +5,5 @@ import { createScope, query } from "@zag-js/dom-query"
 export const dom = createScope({
-  getRootId: (ctx: Ctx) => `signature-${ctx.id}`,
-  getControlId: (ctx: Ctx) => `signature-control-${ctx.id}`,
-  getHiddenInputId: (ctx: Ctx) => `signature-input-${ctx.id}`,
+  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `signature-${ctx.id}`,
+  getControlId: (ctx: Ctx) => ctx.ids?.control ?? `signature-control-${ctx.id}`,
+  getHiddenInputId: (ctx: Ctx) => ctx.ids?.hiddenInput ?? `signature-input-${ctx.id}`,
 
@@ -10,0 +10,0 @@ getControlEl: (ctx: Ctx) => dom.getById(ctx, dom.getControlId(ctx)),

src/signature-pad.props.ts

@@ -10,2 +10,3 @@ import { createProps } from "@zag-js/types"
   "id",
+  "ids",
   "onDraw",
@@ -12,0 +13,0 @@ "onDrawEnd",

src/signature-pad.types.ts

@@ -5,2 +5,6 @@ import type { StateMachine as S } from "@zag-js/core"
 
+/* -----------------------------------------------------------------------------
+ * Callback details
+ * -----------------------------------------------------------------------------*/
+
 interface Point {
@@ -36,4 +40,18 @@ x: number
 
+export type ElementIds = Partial<{
+  root: string
+  control: string
+  hiddenInput: string
+}>
+
+/* -----------------------------------------------------------------------------
+ * Machine context
+ * -----------------------------------------------------------------------------*/
+
 interface PublicContext extends DirectionProperty, CommonProperties {
   /**
+   * The ids of the signature pad elements. Useful for composition.
+   */
+  ids?: ElementIds
+  /**
    * Callback when the signature pad is drawing.
@@ -40,0 +58,0 @@ */

No alert changes

Improved metrics

Total package byte prevSize

82931

increased by1.88%

Lines of code

1274

increased by2.25%

Dependency changes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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