@multiplatform.one/forms 6.7.0 → 7.0.0

package/dist/cjs/fields/Signature/index.cjs

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all) __defProp(target, name, {
@@ -19,15 +17,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-// If the importer is in node compatibility mode or this is not an ESM
-// file that has been converted to a CommonJS file using a Babel-
-// compatible transform (i.e. "__esModule" has not been set), then set
-// "default" to the CommonJS "module.exports" for node compatibility.
-isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-  value: mod,
-  enumerable: true
-}) : target, mod));
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
   value: true
 }), mod);
@@ -37,10 +26,11 @@ __export(Signature_exports, {
   signatureValueToSvg: () => signatureValueToSvg
 });
 module.exports = __toCommonJS(Signature_exports);
+var import_theme = require("@multiplatform.one/theme");
 var import_react = require("react");
 var import_tamagui = require("tamagui");
 var import_perfect_freehand = require("perfect-freehand");
-var import_react_native_svg = __toESM(require("react-native-svg"));
+var import_react_native_svg = require("react-native-svg");
 var import_Button = require("../../Button/index.cjs");
 var import_fieldLayout = require("../../fieldLayout.cjs");
 var import_Skeleton = require("../../Skeleton/index.cjs");
@@ -193,7 +183,16 @@ function signatureValueToSvg(value, width = 500, height = 200, penColor = "#0000
   return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">${pathElements}</svg>`;
 }
 const signatureHeightRows = 3;
+function isPrimaryDrawPointer(event) {
+  if (!import_tamagui.isWeb) return true;
+  const webEvent = event;
+  if (webEvent.isPrimary === false) return false;
+  if (webEvent.pointerType === "mouse" && webEvent.button !== 0) return false;
+  return true;
+}
 function SignatureCanvasImpl({
+  id,
+  hasLabel,
   value,
   onValueChange,
   disabled,
@@ -203,6 +202,7 @@ function SignatureCanvasImpl({
   penColor,
   backgroundColor,
   knobProps,
+  disabledSurface,
   size,
   error,
   clearIcon,
@@ -215,15 +215,27 @@ function SignatureCanvasImpl({
     width: 0,
     height: 0
   });
+  const [kbFocus, setKbFocus] = (0, import_react.useState)(false);
   const svgRef = (0, import_react.useRef)(null);
   const isDrawing = (0, import_react.useRef)(false);
+  const strokesRef = (0, import_react.useRef)([]);
+  const currentStrokeRef = (0, import_react.useRef)(null);
+  const describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
   const aspectRatio = width / height;
   const resolvedSizeToken = size ?? knobProps.sizeToken;
   const minHeightPx = (0, import_utils.getFieldHeight)(resolvedSizeToken, signatureHeightRows);
   const cappedRadius = (0, import_utils.clampRadiusForLargeComponent)(knobProps.borderRadius.borderRadius);
+  const canDraw = !disabled && !readOnly;
+  const canFocus = !disabled;
+  const hasInk = strokes.length > 0 || !!currentStroke;
+  if (import_tamagui.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
+  const setCommittedStrokes = (0, import_react.useCallback)(next => {
+    strokesRef.current = next;
+    setStrokes(next);
+  }, []);
   (0, import_react.useEffect)(() => {
     if (!value) {
-      setStrokes([]);
+      setCommittedStrokes([]);
       return;
     }
     if (value.startsWith("data:application/json;base64,")) {
@@ -232,15 +244,13 @@ function SignatureCanvasImpl({
         const json = decodeBase64(base64);
         const parsed = JSON.parse(json);
         if (parsed?.v === 2 && Array.isArray(parsed.s)) {
-          setStrokes(parsed.s);
-        } else {
-          setStrokes([]);
+          setCommittedStrokes(parsed.s);
+          return;
         }
-      } catch {
-        setStrokes([]);
-      }
+      } catch {}
     }
-  }, [value]);
+    setCommittedStrokes([]);
+  }, [value, setCommittedStrokes]);
   const saveStrokes = (0, import_react.useCallback)(newStrokes => {
     if (newStrokes.length === 0) {
       onValueChange("");
@@ -278,44 +288,64 @@ function SignatureCanvasImpl({
     return [nativeEvent.locationX, nativeEvent.locationY, 0.5];
   }, []);
   const handleStart = (0, import_react.useCallback)(event => {
-    if (disabled || readOnly) return;
+    if (!canDraw || !isPrimaryDrawPointer(event)) return;
     isDrawing.current = true;
     const point = getPoint(event);
+    currentStrokeRef.current = [point];
     setCurrentStroke([point]);
     if (import_tamagui.isWeb) {
       const target = event.currentTarget;
       const pointerId = event.pointerId;
-      target.setPointerCapture(pointerId);
+      target.setPointerCapture?.(pointerId);
     }
-  }, [disabled, getPoint]);
+  }, [canDraw, getPoint]);
   const handleMove = (0, import_react.useCallback)(event => {
-    if (!isDrawing.current || disabled) return;
+    if (!isDrawing.current || !canDraw) return;
     const point = getPoint(event);
     setCurrentStroke(prev => {
-      if (!prev) return [point];
-      const lastPoint = prev[prev.length - 1];
+      const base = prev ?? currentStrokeRef.current;
+      if (!base) {
+        currentStrokeRef.current = [point];
+        return [point];
+      }
+      const lastPoint = base[base.length - 1];
       if (pointDistance(point, lastPoint) < minPointDistance) {
-        return prev;
+        return prev ?? base;
       }
-      return [...prev, point];
+      const next = [...base, point];
+      currentStrokeRef.current = next;
+      return next;
     });
-  }, [disabled, getPoint]);
+  }, [canDraw, getPoint]);
   const handleEnd = (0, import_react.useCallback)(() => {
     if (!isDrawing.current) return;
     isDrawing.current = false;
-    if (currentStroke && currentStroke.length > 0 && dimensions.width > 0 && dimensions.height > 0) {
-      const normalized = normalizeStroke(currentStroke, dimensions.width, dimensions.height);
-      const newStrokes = [...strokes, normalized];
-      setStrokes(newStrokes);
+    const stroke = currentStrokeRef.current;
+    currentStrokeRef.current = null;
+    setCurrentStroke(null);
+    if (stroke && stroke.length > 0 && dimensions.width > 0 && dimensions.height > 0) {
+      const normalized = normalizeStroke(stroke, dimensions.width, dimensions.height);
+      const newStrokes = [...strokesRef.current, normalized];
+      setCommittedStrokes(newStrokes);
       saveStrokes(newStrokes);
     }
-    setCurrentStroke(null);
-  }, [currentStroke, strokes, saveStrokes, dimensions]);
+  }, [dimensions, saveStrokes, setCommittedStrokes]);
   const handleClear = (0, import_react.useCallback)(() => {
-    setStrokes([]);
+    isDrawing.current = false;
+    currentStrokeRef.current = null;
     setCurrentStroke(null);
+    setCommittedStrokes([]);
     onValueChange("");
-  }, [onValueChange]);
+  }, [onValueChange, setCommittedStrokes]);
+  const handlePadKeyDown = (0, import_react.useCallback)(e => {
+    if (e.target !== e.currentTarget) return;
+    if (!canDraw) return;
+    if (e.key === "Backspace" || e.key === "Delete" || e.key === "Escape") {
+      if (strokesRef.current.length === 0 && !currentStrokeRef.current) return;
+      e.preventDefault?.();
+      handleClear();
+    }
+  }, [canDraw, handleClear]);
   const strokeSize = getScaledStrokeSize(dimensions.width || width, dimensions.height || height);
   const canvasW = dimensions.width || width;
   const canvasH = dimensions.height || height;
@@ -332,46 +362,107 @@ function SignatureCanvasImpl({
     return getSvgPathFromStroke((0, import_perfect_freehand.getStroke)(pointsWithPressure, options));
   })() : null;
   const paths = currentPath ? [...completedPaths, currentPath] : completedPaths;
+  const cursor = disabled ? "not-allowed" : readOnly ? "default" : "crosshair";
   const svgProps = import_tamagui.isWeb ? {
     onPointerDown: handleStart,
     onPointerMove: handleMove,
     onPointerUp: handleEnd,
-    // No onPointerLeave - pointer capture lets us draw outside the canvas
     onLostPointerCapture: handleEnd,
-    // End stroke if pointer capture is lost
     style: {
       touchAction: "none",
-      cursor: disabled ? "not-allowed" : readOnly ? "default" : "crosshair",
-      backgroundColor
+      userSelect: "none",
+      outline: "none",
+      cursor,
+      backgroundColor: "transparent"
     }
   } : {
-    onStartShouldSetResponder: () => !disabled,
-    onMoveShouldSetResponder: () => !disabled,
+    onStartShouldSetResponder: () => canDraw,
+    onMoveShouldSetResponder: () => canDraw,
     onResponderGrant: handleStart,
     onResponderMove: handleMove,
     onResponderRelease: handleEnd,
     onResponderTerminate: handleEnd,
     style: {
-      backgroundColor
+      backgroundColor: "transparent"
     }
   };
+  const frameRing = kbFocus ? (0, import_theme.ensureFocusVisibleRing)({
+    outlineOffset: -2
+  }) : void 0;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    id,
     position: "relative",
     onLayout: handleLayout,
     ...knobProps.inputSurface,
+    ...(backgroundColor ? {
+      backgroundColor
+    } : void 0),
+    ...(disabled ? disabledSurface : void 0),
     borderRadius: cappedRadius,
     borderWidth: knobProps.borderRadius.borderWidth,
     borderColor: error ? import_colorRamps.formCommonColors.error : import_colorRamps.formInputColors.border.base,
     overflow: "hidden",
-    opacity: disabled ? 0.6 : 1,
     aspectRatio,
     minHeight: minHeightPx,
+    userSelect: "none",
+    cursor,
+    outlineWidth: 0,
+    hoverStyle: disabled ? void 0 : {
+      borderColor: error ? import_colorRamps.formCommonColors.error : import_colorRamps.formInputColors.border.hover
+    },
+    focusStyle: {
+      outlineWidth: 0,
+      borderColor: error ? import_colorRamps.formCommonColors.error : import_colorRamps.formInputColors.border.focus
+    },
+    focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
+      outlineOffset: -2,
+      borderColor: error ? import_colorRamps.formCommonColors.error : import_colorRamps.formInputColors.border.focus
+    }),
+    ...frameRing,
     ...(knobProps.transition ? {
       transition: knobProps.transition
     } : void 0),
+    focusable: canFocus,
+    tabIndex: import_tamagui.isWeb ? canFocus ? 0 : -1 : void 0,
+    onFocus: () => {
+      if (import_tamagui.isWeb && (0, import_theme.wasKeyboardFocus)()) setKbFocus(true);
+    },
+    onBlur: () => setKbFocus(false),
+    onKeyDown: import_tamagui.isWeb ? handlePadKeyDown : void 0,
     "aria-required": required || void 0,
     "aria-invalid": hasError || void 0,
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native_svg.default, {
+    "aria-readonly": readOnly || void 0,
+    "aria-disabled": disabled || void 0,
+    "aria-describedby": describedBy,
+    "aria-keyshortcuts": canDraw ? "Delete Backspace Escape" : void 0,
+    "data-signature": "pad",
+    "data-signed": hasInk ? "true" : "false",
+    "data-keyboard-ring": kbFocus ? "true" : void 0,
+    ...(!hasLabel ? {
+      "aria-label": hasInk ? (0, import_t.t)("Signature, signed") : (0, import_t.t)("Signature, empty")
+    } : null),
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      position: "absolute",
+      bottom: "22%",
+      left: "$3",
+      right: "$3",
+      alignItems: "center",
+      gap: "$2",
+      pointerEvents: "none",
+      opacity: 0.55,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        color: import_colorRamps.formCommonColors.muted,
+        fontStyle: "italic",
+        fontWeight: "700",
+        fontSize: 18,
+        lineHeight: 20,
+        children: (0, import_t.t)("X")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        flex: 1,
+        height: 1,
+        backgroundColor: import_colorRamps.formCommonColors.divider
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native_svg.Svg, {
       ref: svgRef,
       width: "100%",
       height: "100%",
@@ -429,6 +520,7 @@ function Signature({
   const {
     resolvedForm,
     knobProps,
+    disabledState,
     id
   } = (0, import_utils.useFormField)({
     form: formProp,
@@ -452,16 +544,18 @@ function Signature({
       })
     });
   }
-  const penColor = penColorProp ?? tamaguiTheme.color12?.val ?? "#000000";
-  const backgroundColor = backgroundColorProp ?? tamaguiTheme.color2?.val ?? "#ffffff";
+  const penColor = penColorProp ?? tamaguiTheme.color12?.val ?? "currentColor";
   const canvasProps = {
+    id,
+    hasLabel: !!label,
     disabled: !!disabled,
     readOnly: !!readOnly,
     width,
     height,
     penColor,
-    backgroundColor,
+    backgroundColor: backgroundColorProp,
     knobProps,
+    disabledSurface: disabledState.surfaceKnobProps,
     size,
     clearIcon
   };