@terreno/ui 0.15.0 → 0.15.2

package/src/Signature.native.tsx

@@ -1,17 +1,18 @@
 import {Canvas, ImageFormat, Path, Skia, useCanvasRef} from "@shopify/react-native-skia";
 import {type FC, useCallback, useMemo, useRef, useState} from "react";
-import {Text, View} from "react-native";
+import {Platform, Text, View} from "react-native";
 import {Gesture, GestureDetector} from "react-native-gesture-handler";
 
+import {getSignaturePadHeight} from "./SignatureSizing";
 import {useTheme} from "./Theme";
 
 interface Props {
   onChange: (signature: string) => void;
   onStart?: () => void;
   onEnd?: () => void;
+  fullWidth?: boolean;
 }
 
-const SIGNATURE_PAD_HEIGHT_PX = 180;
 const STROKE_WIDTH_PX = 2.5;
 // Snapshot after the released stroke has painted to the Skia canvas.
 const SNAPSHOT_DELAY_MS = 60;
@@ -31,9 +32,10 @@ const SNAPSHOT_DELAY_MS = 60;
  * Reports the signature to the parent as a base64 PNG data URL via onChange,
  * and pushes "" on clear so "signature required" gating resets immediately.
  */
-export const Signature: FC<Props> = ({onChange, onStart, onEnd}: Props) => {
+export const Signature: FC<Props> = ({fullWidth = false, onChange, onStart, onEnd}: Props) => {
   const {theme} = useTheme();
   const canvasRef = useCanvasRef();
+  const signaturePadHeight = getSignaturePadHeight(Platform.OS);
   const snapshotTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   // Completed strokes as SVG path strings; the active stroke is tracked separately.
   const [completedStrokes, setCompletedStrokes] = useState<string[]>([]);
@@ -138,14 +140,14 @@ export const Signature: FC<Props> = ({onChange, onStart, onEnd}: Props) => {
   }, [clearSnapshotTimer, onChange]);
 
   return (
-    <View style={{minWidth: 220}}>
+    <View style={{minWidth: 220, width: fullWidth ? "100%" : undefined}}>
       <GestureDetector gesture={panGesture}>
         <View
           style={{
             backgroundColor: theme.surface.base,
             borderColor: theme.border.dark,
             borderWidth: 1,
-            height: SIGNATURE_PAD_HEIGHT_PX,
+            height: signaturePadHeight,
             overflow: "hidden",
           }}
         >

package/src/Signature.test.tsx

@@ -1,10 +1,51 @@
-import {describe, expect, it, mock} from "bun:test";
-import {fireEvent} from "@testing-library/react-native";
+import {afterEach, describe, expect, it, mock} from "bun:test";
+import {act, fireEvent} from "@testing-library/react-native";
+import {View} from "react-native";
 
 import {Signature} from "./Signature";
 import {renderWithTheme} from "./test-utils";
 
+const createMockContext = (): Record<string, ReturnType<typeof mock>> => ({
+  beginPath: mock(() => {}),
+  fillRect: mock(() => {}),
+  lineTo: mock(() => {}),
+  moveTo: mock(() => {}),
+  stroke: mock(() => {}),
+});
+
+const patchCanvasRefs = (
+  container: {
+    findAll: (
+      predicate: (node: {type: string}) => boolean
+    ) => Array<{props: Record<string, unknown>}>;
+  },
+  ctx: Record<string, ReturnType<typeof mock>>
+): HTMLCanvasElement => {
+  const canvasNodes = container.findAll((node: {type: string}) => node.type === "canvas");
+  const canvasNode = canvasNodes[0];
+  const canvas = {
+    getContext: mock(() => ctx),
+    height: 180,
+    releasePointerCapture: mock(() => {}),
+    setPointerCapture: mock(() => {}),
+    toDataURL: mock(() => "data:image/png;base64,AAAA"),
+    width: 300,
+  } as unknown as HTMLCanvasElement;
+
+  const ref = canvasNode.props.ref;
+  if (typeof ref === "function") {
+    ref(canvas);
+  } else if (ref && typeof ref === "object" && "current" in ref) {
+    (ref as {current: unknown}).current = canvas;
+  }
+  return canvas;
+};
+
 describe("Signature", () => {
+  afterEach(() => {
+    mock.restore();
+  });
+
   it("renders correctly", () => {
     const mockOnChange = mock(() => {});
     const {toJSON} = renderWithTheme(<Signature onChange={mockOnChange} />);
@@ -22,12 +63,303 @@ describe("Signature", () => {
     expect(getByText("Clear")).toBeTruthy();
   });
 
+  it("scales the web canvas to the available container width", () => {
+    const mockOnChange = mock(() => {});
+    const {UNSAFE_getByType} = renderWithTheme(<Signature onChange={mockOnChange} />);
+    const canvas = UNSAFE_getByType("canvas");
+    expect(canvas.props.style).toMatchObject({maxWidth: "100%", width: "100%"});
+  });
+
+  it("allows the signature box to fill its parent", () => {
+    const mockOnChange = mock(() => {});
+    const {UNSAFE_getAllByType} = renderWithTheme(<Signature fullWidth onChange={mockOnChange} />);
+    const wrapper = UNSAFE_getAllByType(View)[1];
+    expect(wrapper.props.style).toMatchObject({maxWidth: undefined, width: "100%"});
+  });
+
+  it("maps scaled canvas pointer coordinates to the canvas buffer", () => {
+    const mockOnChange = mock(() => {});
+    const moveTo = mock(() => {});
+    const lineTo = mock(() => {});
+    const {UNSAFE_getByType} = renderWithTheme(<Signature onChange={mockOnChange} />);
+    const canvas = UNSAFE_getByType("canvas");
+    canvas.props.ref.current = {
+      clientHeight: 180,
+      clientWidth: 150,
+      getBoundingClientRect: () => ({height: 180, width: 150}),
+      getContext: () => ({
+        beginPath: mock(() => {}),
+        fillRect: mock(() => {}),
+        lineCap: "round",
+        lineJoin: "round",
+        lineTo,
+        moveTo,
+        stroke: mock(() => {}),
+      }),
+      height: 180,
+      setPointerCapture: mock(() => {}),
+      width: 300,
+    } as unknown as HTMLCanvasElement;
+
+    canvas.props.onPointerDown({
+      nativeEvent: {offsetX: 75, offsetY: 90},
+      pointerId: 1,
+    });
+    canvas.props.onPointerMove({
+      nativeEvent: {offsetX: 90, offsetY: 120},
+      pointerId: 1,
+    });
+
+    expect(moveTo).toHaveBeenCalledWith(150, 90);
+    expect(lineTo).toHaveBeenCalledWith(180, 120);
+  });
+
   it("notifies the parent with an empty value when Clear is pressed", () => {
     const mockOnChange = mock(() => {});
     const {getByText} = renderWithTheme(<Signature onChange={mockOnChange} />);
     fireEvent.press(getByText("Clear"));
-    // Clearing the canvas emits no draw event, so the component must push ""
-    // directly or "signature required" gating in parents would never reset.
     expect(mockOnChange).toHaveBeenCalledWith("");
   });
+
+  it("calls onStart when pointer down is fired on the canvas", () => {
+    const mockOnChange = mock(() => {});
+    const mockOnStart = mock(() => {});
+    const ctx = createMockContext();
+    const {UNSAFE_root} = renderWithTheme(
+      <Signature onChange={mockOnChange} onStart={mockOnStart} />
+    );
+
+    patchCanvasRefs(UNSAFE_root, ctx);
+
+    const canvasNodes = UNSAFE_root.findAll((node: {type: string}) => node.type === "canvas");
+    const canvasProps = canvasNodes[0].props as Record<string, (...args: unknown[]) => void>;
+
+    act(() => {
+      canvasProps.onPointerDown({
+        nativeEvent: {offsetX: 10, offsetY: 20},
+        pointerId: 1,
+      });
+    });
+
+    expect(mockOnStart).toHaveBeenCalledTimes(1);
+    expect(ctx.beginPath).toHaveBeenCalled();
+    expect(ctx.moveTo).toHaveBeenCalledWith(10, 20);
+  });
+
+  it("draws a stroke on pointerMove after pointerDown", () => {
+    const mockOnChange = mock(() => {});
+    const ctx = createMockContext();
+    const {UNSAFE_root} = renderWithTheme(<Signature onChange={mockOnChange} />);
+
+    patchCanvasRefs(UNSAFE_root, ctx);
+
+    const canvasNodes = UNSAFE_root.findAll((node: {type: string}) => node.type === "canvas");
+    const canvasProps = canvasNodes[0].props as Record<string, (...args: unknown[]) => void>;
+
+    act(() => {
+      canvasProps.onPointerDown({
+        nativeEvent: {offsetX: 5, offsetY: 5},
+        pointerId: 1,
+      });
+    });
+
+    act(() => {
+      canvasProps.onPointerMove({
+        nativeEvent: {offsetX: 50, offsetY: 50},
+        pointerId: 1,
+      });
+    });
+
+    expect(ctx.lineTo).toHaveBeenCalledWith(50, 50);
+    expect(ctx.stroke).toHaveBeenCalled();
+  });
+
+  it("ignores pointerMove when not drawing", () => {
+    const mockOnChange = mock(() => {});
+    const ctx = createMockContext();
+    const {UNSAFE_root} = renderWithTheme(<Signature onChange={mockOnChange} />);
+
+    patchCanvasRefs(UNSAFE_root, ctx);
+
+    const canvasNodes = UNSAFE_root.findAll((node: {type: string}) => node.type === "canvas");
+    const canvasProps = canvasNodes[0].props as Record<string, (...args: unknown[]) => void>;
+
+    act(() => {
+      canvasProps.onPointerMove({
+        nativeEvent: {offsetX: 50, offsetY: 50},
+        pointerId: 1,
+      });
+    });
+
+    expect(ctx.lineTo).not.toHaveBeenCalled();
+  });
+
+  it("exports the signature as a data URL on pointerUp after drawing", () => {
+    const mockOnChange = mock(() => {});
+    const mockOnEnd = mock(() => {});
+    const ctx = createMockContext();
+    const {UNSAFE_root} = renderWithTheme(<Signature onChange={mockOnChange} onEnd={mockOnEnd} />);
+
+    const canvas = patchCanvasRefs(UNSAFE_root, ctx);
+
+    const canvasNodes = UNSAFE_root.findAll((node: {type: string}) => node.type === "canvas");
+    const canvasProps = canvasNodes[0].props as Record<string, (...args: unknown[]) => void>;
+
+    // Start drawing
+    act(() => {
+      canvasProps.onPointerDown({
+        nativeEvent: {offsetX: 5, offsetY: 5},
+        pointerId: 1,
+      });
+    });
+
+    // Move to draw
+    act(() => {
+      canvasProps.onPointerMove({
+        nativeEvent: {offsetX: 50, offsetY: 50},
+        pointerId: 1,
+      });
+    });
+
+    // Lift the pointer
+    act(() => {
+      canvasProps.onPointerUp({
+        nativeEvent: {offsetX: 50, offsetY: 50},
+        pointerId: 1,
+      });
+    });
+
+    expect(mockOnChange).toHaveBeenCalledWith("data:image/png;base64,AAAA");
+    expect(mockOnEnd).toHaveBeenCalledTimes(1);
+    expect(
+      (canvas as unknown as {releasePointerCapture: ReturnType<typeof mock>}).releasePointerCapture
+    ).toHaveBeenCalledWith(1);
+  });
+
+  it("does not call onChange on pointerUp if nothing was drawn", () => {
+    const mockOnChange = mock(() => {});
+    const ctx = createMockContext();
+    const {UNSAFE_root} = renderWithTheme(<Signature onChange={mockOnChange} />);
+
+    patchCanvasRefs(UNSAFE_root, ctx);
+
+    const canvasNodes = UNSAFE_root.findAll((node: {type: string}) => node.type === "canvas");
+    const canvasProps = canvasNodes[0].props as Record<string, (...args: unknown[]) => void>;
+
+    // pointerDown without any move (no drawing)
+    act(() => {
+      canvasProps.onPointerDown({
+        nativeEvent: {offsetX: 5, offsetY: 5},
+        pointerId: 1,
+      });
+    });
+
+    act(() => {
+      canvasProps.onPointerUp({
+        nativeEvent: {offsetX: 5, offsetY: 5},
+        pointerId: 1,
+      });
+    });
+
+    // onChange should not be called with a data URL (no strokes were made)
+    expect(mockOnChange).not.toHaveBeenCalled();
+  });
+
+  it("ignores pointerUp when not drawing", () => {
+    const mockOnChange = mock(() => {});
+    const mockOnEnd = mock(() => {});
+    const ctx = createMockContext();
+    const {UNSAFE_root} = renderWithTheme(<Signature onChange={mockOnChange} onEnd={mockOnEnd} />);
+
+    patchCanvasRefs(UNSAFE_root, ctx);
+
+    const canvasNodes = UNSAFE_root.findAll((node: {type: string}) => node.type === "canvas");
+    const canvasProps = canvasNodes[0].props as Record<string, (...args: unknown[]) => void>;
+
+    act(() => {
+      canvasProps.onPointerUp({
+        nativeEvent: {offsetX: 50, offsetY: 50},
+        pointerId: 1,
+      });
+    });
+
+    expect(mockOnEnd).not.toHaveBeenCalled();
+    expect(mockOnChange).not.toHaveBeenCalled();
+  });
+
+  it("handles pointerLeave the same as pointerUp", () => {
+    const mockOnChange = mock(() => {});
+    const mockOnEnd = mock(() => {});
+    const ctx = createMockContext();
+    const {UNSAFE_root} = renderWithTheme(<Signature onChange={mockOnChange} onEnd={mockOnEnd} />);
+
+    patchCanvasRefs(UNSAFE_root, ctx);
+
+    const canvasNodes = UNSAFE_root.findAll((node: {type: string}) => node.type === "canvas");
+    const canvasProps = canvasNodes[0].props as Record<string, (...args: unknown[]) => void>;
+
+    // Draw something
+    act(() => {
+      canvasProps.onPointerDown({
+        nativeEvent: {offsetX: 5, offsetY: 5},
+        pointerId: 1,
+      });
+    });
+    act(() => {
+      canvasProps.onPointerMove({
+        nativeEvent: {offsetX: 50, offsetY: 50},
+        pointerId: 1,
+      });
+    });
+
+    // Leave triggers pointerUp handler
+    act(() => {
+      canvasProps.onPointerLeave({
+        nativeEvent: {offsetX: 50, offsetY: 50},
+        pointerId: 1,
+      });
+    });
+
+    expect(mockOnChange).toHaveBeenCalledWith("data:image/png;base64,AAAA");
+    expect(mockOnEnd).toHaveBeenCalledTimes(1);
+  });
+
+  it("resets canvas and notifies parent on clear after drawing", () => {
+    const mockOnChange = mock(() => {});
+    const ctx = createMockContext();
+    const {UNSAFE_root, getByText} = renderWithTheme(<Signature onChange={mockOnChange} />);
+
+    patchCanvasRefs(UNSAFE_root, ctx);
+
+    const canvasNodes = UNSAFE_root.findAll((node: {type: string}) => node.type === "canvas");
+    const canvasProps = canvasNodes[0].props as Record<string, (...args: unknown[]) => void>;
+
+    // Draw
+    act(() => {
+      canvasProps.onPointerDown({
+        nativeEvent: {offsetX: 5, offsetY: 5},
+        pointerId: 1,
+      });
+    });
+    act(() => {
+      canvasProps.onPointerMove({
+        nativeEvent: {offsetX: 50, offsetY: 50},
+        pointerId: 1,
+      });
+    });
+    act(() => {
+      canvasProps.onPointerUp({
+        nativeEvent: {offsetX: 50, offsetY: 50},
+        pointerId: 1,
+      });
+    });
+
+    mockOnChange.mockClear();
+
+    // Clear
+    fireEvent.press(getByText("Clear"));
+
+    expect(mockOnChange).toHaveBeenCalledWith("");
+    expect(ctx.fillRect).toHaveBeenCalled();
+  });
 });

package/src/Signature.tsx

@@ -13,6 +13,7 @@ export interface SignatureProps {
   onChange: (signature: string) => void;
   onStart?: () => void;
   onEnd?: () => void;
+  fullWidth?: boolean;
   value?: string; // note this
 }
 
@@ -20,6 +21,13 @@ const SIGNATURE_WIDTH_PX = 300;
 const SIGNATURE_HEIGHT_PX = 180;
 const STROKE_WIDTH_PX = 2.5;
 
+interface CanvasPoint {
+  x: number;
+  y: number;
+}
+
+type DrawingEvent = ReactPointerEvent<HTMLCanvasElement>;
+
 /**
  * Web signature pad backed by a raw HTML5 <canvas> — no third-party library.
  *
@@ -27,7 +35,12 @@ const STROKE_WIDTH_PX = 2.5;
  * data URL via onChange. Clearing pushes "" so "signature required" gating in
  * parents resets immediately, since clearing the canvas emits no draw event.
  */
-export const Signature = ({onChange, onStart, onEnd}: SignatureProps): ReactElement => {
+export const Signature = ({
+  fullWidth = false,
+  onChange,
+  onStart,
+  onEnd,
+}: SignatureProps): ReactElement => {
   const {theme} = useTheme();
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const isDrawingRef = useRef(false);
@@ -41,6 +54,28 @@ export const Signature = ({onChange, onStart, onEnd}: SignatureProps): ReactElem
     return canvas.getContext("2d");
   }, []);
 
+  const getCanvasPoint = useCallback((event: DrawingEvent): CanvasPoint | null => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return null;
+    }
+
+    const rect = canvas.getBoundingClientRect?.();
+    const displayWidth = rect?.width ?? canvas.clientWidth ?? canvas.width;
+    const displayHeight = rect?.height ?? canvas.clientHeight ?? canvas.height;
+    if (displayWidth <= 0 || displayHeight <= 0) {
+      return {
+        x: event.nativeEvent.offsetX,
+        y: event.nativeEvent.offsetY,
+      };
+    }
+
+    return {
+      x: (event.nativeEvent.offsetX / displayWidth) * canvas.width,
+      y: (event.nativeEvent.offsetY / displayHeight) * canvas.height,
+    };
+  }, []);
+
   /**
    * Paints the opaque background and configures stroke styling. Re-runs when
    * the theme changes so the pad matches the active light/dark colors.
@@ -65,38 +100,40 @@ export const Signature = ({onChange, onStart, onEnd}: SignatureProps): ReactElem
   }, [resetCanvas]);
 
   const handlePointerDown = useCallback(
-    (event: ReactPointerEvent<HTMLCanvasElement>): void => {
+    (event: DrawingEvent): void => {
       const ctx = getContext();
-      if (!ctx) {
+      const point = getCanvasPoint(event);
+      if (!ctx || !point) {
         return;
       }
       canvasRef.current?.setPointerCapture?.(event.pointerId);
       isDrawingRef.current = true;
       ctx.beginPath();
-      ctx.moveTo(event.nativeEvent.offsetX, event.nativeEvent.offsetY);
+      ctx.moveTo(point.x, point.y);
       onStart?.();
     },
-    [getContext, onStart]
+    [getCanvasPoint, getContext, onStart]
   );
 
   const handlePointerMove = useCallback(
-    (event: ReactPointerEvent<HTMLCanvasElement>): void => {
+    (event: DrawingEvent): void => {
       if (!isDrawingRef.current) {
         return;
       }
       const ctx = getContext();
-      if (!ctx) {
+      const point = getCanvasPoint(event);
+      if (!ctx || !point) {
         return;
       }
-      ctx.lineTo(event.nativeEvent.offsetX, event.nativeEvent.offsetY);
+      ctx.lineTo(point.x, point.y);
       ctx.stroke();
       hasDrawnRef.current = true;
     },
-    [getContext]
+    [getCanvasPoint, getContext]
   );
 
   const handlePointerUp = useCallback(
-    (event: ReactPointerEvent<HTMLCanvasElement>): void => {
+    (event: DrawingEvent): void => {
       if (!isDrawingRef.current) {
         return;
       }
@@ -126,7 +163,7 @@ export const Signature = ({onChange, onStart, onEnd}: SignatureProps): ReactElem
         style={{
           borderColor: theme.border.dark,
           borderWidth: 1,
-          maxWidth: SIGNATURE_WIDTH_PX,
+          maxWidth: fullWidth ? undefined : SIGNATURE_WIDTH_PX,
           width: "100%",
         }}
       >
@@ -137,7 +174,13 @@ export const Signature = ({onChange, onStart, onEnd}: SignatureProps): ReactElem
           onPointerMove={handlePointerMove}
           onPointerUp={handlePointerUp}
           ref={canvasRef}
-          style={{height: SIGNATURE_HEIGHT_PX, touchAction: "none", width: SIGNATURE_WIDTH_PX}}
+          style={{
+            display: "block",
+            height: SIGNATURE_HEIGHT_PX,
+            maxWidth: "100%",
+            touchAction: "none",
+            width: "100%",
+          }}
           width={SIGNATURE_WIDTH_PX}
         />
       </View>

package/src/SignatureField.tsx

@@ -20,6 +20,7 @@ export const SignatureField = ({
   onEnd,
   disabledText,
   errorText,
+  fullWidth = false,
 }: SignatureFieldProps): ReactElement => {
   const {theme} = useTheme();
   if (disabled) {
@@ -62,6 +63,7 @@ export const SignatureField = ({
       )}
       <View style={{marginVertical: 8}}>
         <Signature
+          fullWidth={fullWidth}
           onChange={onChange}
           onEnd={() => {
             onEnd?.();

package/src/SignatureSizing.ts

@@ -0,0 +1,10 @@
+export const SIGNATURE_PAD_HEIGHT_PX = 180;
+export const IOS_SIGNATURE_PAD_HEIGHT_PX = 120;
+
+export const getSignaturePadHeight = (platformOS: string): number => {
+  if (platformOS === "ios") {
+    return IOS_SIGNATURE_PAD_HEIGHT_PX;
+  }
+
+  return SIGNATURE_PAD_HEIGHT_PX;
+};

package/src/Toast.tsx

@@ -11,15 +11,17 @@ import {isAPIError, printAPIError} from "./Utilities";
 
 const TOAST_DURATION_MS = 3 * 1000;
 
-type UseToastVariantOptions = {
+interface UseToastVariantOptions {
   persistent?: ToastProps["persistent"];
   secondary?: ToastProps["secondary"];
   size?: ToastProps["size"];
   onDismiss?: ToastProps["onDismiss"];
   subtitle?: ToastProps["subtitle"];
-};
+}
 
-type UseToastOptions = {variant?: ToastProps["variant"]} & UseToastVariantOptions;
+interface UseToastOptions extends UseToastVariantOptions {
+  variant?: ToastProps["variant"];
+}
 
 export const useToast = (): {
   hide: (id: string) => void;

package/src/__snapshots__/DismissButton.test.tsx.snap

@@ -8,7 +8,9 @@ exports[`DismissButton renders correctly with default props 1`] = `
       "$$typeof": Symbol(react.test.json),
       "children": null,
       "props": {
-        "style": undefined,
+        "onPointerEnter": [Function: AsyncFunction],
+        "onPointerLeave": [Function: AsyncFunction],
+        "style": {},
         "testID": undefined,
       },
       "type": "View",
@@ -38,7 +40,9 @@ exports[`DismissButton renders with primary color (default) 1`] = `
       "$$typeof": Symbol(react.test.json),
       "children": null,
       "props": {
-        "style": undefined,
+        "onPointerEnter": [Function: AsyncFunction],
+        "onPointerLeave": [Function: AsyncFunction],
+        "style": {},
         "testID": undefined,
       },
       "type": "View",
@@ -68,7 +72,9 @@ exports[`DismissButton renders with inverted color 1`] = `
       "$$typeof": Symbol(react.test.json),
       "children": null,
       "props": {
-        "style": undefined,
+        "onPointerEnter": [Function: AsyncFunction],
+        "onPointerLeave": [Function: AsyncFunction],
+        "style": {},
         "testID": undefined,
       },
       "type": "View",

package/src/__snapshots__/Field.test.tsx.snap

@@ -4991,9 +4991,11 @@ exports[`Field renders signature field 1`] = `
               "current": null,
             },
             "style": {
+              "display": "block",
               "height": 180,
+              "maxWidth": "100%",
               "touchAction": "none",
-              "width": 300,
+              "width": "100%",
             },
             "width": 300,
           },

package/src/__snapshots__/Signature.test.tsx.snap

@@ -20,9 +20,11 @@ exports[`Signature renders correctly 1`] = `
               "current": null,
             },
             "style": {
+              "display": "block",
               "height": 180,
+              "maxWidth": "100%",
               "touchAction": "none",
-              "width": 300,
+              "width": "100%",
             },
             "width": 300,
           },

package/src/__snapshots__/SignatureField.test.tsx.snap

@@ -42,9 +42,11 @@ exports[`SignatureField renders correctly with default props 1`] = `
                       "current": null,
                     },
                     "style": {
+                      "display": "block",
                       "height": 180,
+                      "maxWidth": "100%",
                       "touchAction": "none",
-                      "width": 300,
+                      "width": "100%",
                     },
                     "width": 300,
                   },