@terreno/ui 0.14.2 → 0.15.1

package/src/DateTimeField.test.tsx

@@ -1105,4 +1105,230 @@ describe("DateTimeField", () => {
       expect(mockOnChange).toHaveBeenCalled();
     });
   });
+
+  describe("12 AM handling in time type (getISOFromFields)", () => {
+    it("should convert hour 12 AM to 0 in time type", async () => {
+      setDesktop();
+      const user = userEvent.setup();
+      // 04:00 UTC = 00:00 (12:00 AM) in America/New_York
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField
+          onChange={mockOnChange}
+          timezone="America/New_York"
+          type="time"
+          value="2023-05-15T04:00:00.000Z"
+        />
+      );
+      expect(getByPlaceholderText("hh").props.value).toBe("12");
+
+      const minuteInput = getByPlaceholderText("mm");
+      await user.clear(minuteInput);
+      await user.type(minuteInput, "15");
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      });
+      expect(mockOnChange).toHaveBeenCalled();
+      const lastCall = mockOnChange.mock.calls[mockOnChange.mock.calls.length - 1][0];
+      const parsed = DateTime.fromISO(lastCall).setZone("America/New_York");
+      expect(parsed.hour).toBe(0);
+      expect(parsed.minute).toBe(15);
+    });
+
+    it("should convert hour 12 AM to 0 in datetime type", async () => {
+      setDesktop();
+      const user = userEvent.setup();
+      // 04:30 UTC = 00:30 (12:30 AM) in America/New_York
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField
+          onChange={mockOnChange}
+          timezone="America/New_York"
+          type="datetime"
+          value="2023-05-15T04:30:00.000Z"
+        />
+      );
+      expect(getByPlaceholderText("hh").props.value).toBe("12");
+
+      const minuteInput = getByPlaceholderText("mm");
+      await user.clear(minuteInput);
+      await user.type(minuteInput, "45");
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      });
+      expect(mockOnChange).toHaveBeenCalled();
+      const lastCall = mockOnChange.mock.calls[mockOnChange.mock.calls.length - 1][0];
+      const parsed = DateTime.fromISO(lastCall).setZone("America/New_York");
+      expect(parsed.hour).toBe(0);
+    });
+  });
+
+  describe("onActionSheetChange invalid date handling", () => {
+    it("should warn and return early for invalid ISO string", async () => {
+      setDesktop();
+      const warnSpy = mock(() => {});
+      const originalWarn = console.warn;
+      console.warn = warnSpy;
+
+      const {UNSAFE_root} = renderWithTheme(
+        <DateTimeField
+          onChange={mockOnChange}
+          timezone="America/New_York"
+          type="date"
+          value="2023-05-15T00:00:00.000Z"
+        />
+      );
+
+      mockOnChange.mockClear();
+      const actionSheet = UNSAFE_root.findAll(
+        (n: any) => n.props?.onChange && n.props?.visible !== undefined
+      );
+      expect(actionSheet.length).toBeGreaterThan(0);
+      await act(async () => {
+        actionSheet[0].props.onChange("not-a-valid-date");
+      });
+      expect(warnSpy).toHaveBeenCalledWith(
+        "Invalid date passed to DateTimeField",
+        "not-a-valid-date"
+      );
+      expect(mockOnChange).not.toHaveBeenCalled();
+
+      console.warn = originalWarn;
+    });
+  });
+
+  describe("useEffect invalid value handling", () => {
+    it("should warn and return early for invalid non-empty value prop", () => {
+      const warnSpy = mock(() => {});
+      const originalWarn = console.warn;
+      console.warn = warnSpy;
+
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField onChange={mockOnChange} type="date" value="invalid-date-string" />
+      );
+
+      expect(warnSpy).toHaveBeenCalledWith(
+        "Invalid date passed to DateTimeField",
+        "invalid-date-string"
+      );
+      expect(getByPlaceholderText("MM").props.value).toBe("");
+
+      console.warn = originalWarn;
+    });
+
+    it("should warn for invalid value in time type", () => {
+      const warnSpy = mock(() => {});
+      const originalWarn = console.warn;
+      console.warn = warnSpy;
+
+      renderWithTheme(
+        <DateTimeField
+          onChange={mockOnChange}
+          timezone="America/New_York"
+          type="time"
+          value="not-valid"
+        />
+      );
+
+      expect(warnSpy).toHaveBeenCalledWith("Invalid date passed to DateTimeField", "not-valid");
+
+      console.warn = originalWarn;
+    });
+  });
+
+  describe("getFieldValue datetime hour/minute indices", () => {
+    it("should return hour and minute for datetime indices 3 and 4", () => {
+      setDesktop();
+      // 20:30 UTC = 4:30 PM in America/New_York
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField
+          onChange={mockOnChange}
+          timezone="America/New_York"
+          type="datetime"
+          value="2023-05-15T20:30:00.000Z"
+        />
+      );
+      // Indices 0-2 are date fields, indices 3-4 are hour/minute
+      expect(getByPlaceholderText("hh").props.value).toBe("04");
+      expect(getByPlaceholderText("mm").props.value).toBe("30");
+    });
+
+    it("should return hour and minute for datetime at midnight", () => {
+      setDesktop();
+      // 04:00 UTC = 00:00 (12:00 AM) in America/New_York
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField
+          onChange={mockOnChange}
+          timezone="America/New_York"
+          type="datetime"
+          value="2023-05-15T04:00:00.000Z"
+        />
+      );
+      expect(getByPlaceholderText("hh").props.value).toBe("12");
+      expect(getByPlaceholderText("mm").props.value).toBe("00");
+    });
+  });
+
+  describe("handleTimezoneChange branches", () => {
+    it("should call onTimezoneChange when provided for datetime type", async () => {
+      setDesktop();
+      const mockTzChange = mock(() => {});
+      const {UNSAFE_root} = renderWithTheme(
+        <DateTimeField
+          onChange={mockOnChange}
+          onTimezoneChange={mockTzChange}
+          timezone="America/New_York"
+          type="datetime"
+          value="2023-05-15T15:30:00.000Z"
+        />
+      );
+
+      const tzPickers = UNSAFE_root.findAll((n: any) => n.props?.onTimezoneChange);
+      expect(tzPickers.length).toBeGreaterThan(0);
+      await act(async () => {
+        tzPickers[0].props.onTimezoneChange("America/Chicago");
+      });
+      expect(mockTzChange).toHaveBeenCalledWith("America/Chicago");
+    });
+
+    it("should set local timezone when onTimezoneChange not provided for datetime type", async () => {
+      setDesktop();
+      const {UNSAFE_root} = renderWithTheme(
+        <DateTimeField
+          onChange={mockOnChange}
+          timezone="America/New_York"
+          type="datetime"
+          value="2023-05-15T15:30:00.000Z"
+        />
+      );
+
+      const tzPickers = UNSAFE_root.findAll((n: any) => n.props?.onTimezoneChange);
+      expect(tzPickers.length).toBeGreaterThan(0);
+      await act(async () => {
+        tzPickers[0].props.onTimezoneChange("America/Chicago");
+      });
+      expect(mockOnChange).toHaveBeenCalled();
+    });
+  });
+
+  describe("minute validation in validateField", () => {
+    it("should validate minute field for datetime type via hour change triggering revalidation", async () => {
+      setDesktop();
+      const user = userEvent.setup();
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField
+          onChange={mockOnChange}
+          timezone="America/New_York"
+          type="datetime"
+          value="2023-05-15T15:30:00.000Z"
+        />
+      );
+      // Type an invalid hour (triggers validateField for datetime index 3)
+      const hourInput = getByPlaceholderText("hh");
+      await user.clear(hourInput);
+      await user.type(hourInput, "0");
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      });
+      expect(hourInput).toBeTruthy();
+    });
+  });
 });

package/src/DismissButton.tsx

@@ -1,6 +1,7 @@
 import type React from "react";
-import {Pressable, View} from "react-native";
+import {Pressable} from "react-native";
 
+import {Box} from "./Box";
 import type {DismissButtonProps} from "./Common";
 import {Icon} from "./Icon";
 
@@ -23,9 +24,9 @@ export const DismissButton = ({
         width: 24.5,
       }}
     >
-      <View>
+      <Box>
         <Icon color={color} iconName="x" type="solid" />
-      </View>
+      </Box>
     </Pressable>
   );
 };

package/src/Field.test.tsx

@@ -125,4 +125,27 @@ describe("Field", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("renders customSelect field", () => {
+    const {toJSON} = renderWithTheme(
+      <Field
+        label="Custom"
+        onChange={() => {}}
+        options={[
+          {label: "Option A", value: "a"},
+          {label: "Option B", value: "b"},
+        ]}
+        type="customSelect"
+        value="a"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders signature field", () => {
+    const {toJSON} = renderWithTheme(
+      <Field label="Sign here" onChange={() => {}} type="signature" value="" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
 });

package/src/IconButton.tsx

@@ -12,14 +12,14 @@ import {Tooltip} from "./Tooltip";
 import {Unifier} from "./Unifier";
 import {isNative} from "./Utilities";
 
-type ConfirmationModalProps = {
+interface ConfirmationModalProps {
   visible: boolean;
   title: string;
   subtitle?: string;
   text: string;
   onConfirm: () => void;
   onCancel: () => void;
-};
+}
 
 const ConfirmationModal: FC<ConfirmationModalProps> = ({
   visible,

package/src/PickerSelect.test.tsx

@@ -308,6 +308,28 @@ describe("PickerSelect", () => {
         restoreDocument();
       }
     });
+
+    it("calls onValueChange when a web dropdown option is selected", async () => {
+      ensureDocument();
+      savedOS = PlatformModule.OS;
+      try {
+        PlatformModule.OS = "web";
+        const mockOnValueChange = mock(() => {});
+        const {getByTestId} = renderWithTheme(
+          <RNPickerSelect {...defaultProps} onValueChange={mockOnValueChange} value="1" />
+        );
+        await act(async () => {
+          fireEvent.press(getByTestId("web_picker"));
+        });
+        await act(async () => {
+          fireEvent.press(getByTestId("web_dropdown_option_2"));
+        });
+        expect(mockOnValueChange).toHaveBeenCalledWith("2", 2);
+      } finally {
+        PlatformModule.OS = savedOS;
+        restoreDocument();
+      }
+    });
   });
 
   describe("android rendering", () => {

package/src/PickerSelect.tsx

@@ -38,6 +38,7 @@ import {
   Text,
   TextInput,
   type TextInputProps,
+  type TextProps,
   TouchableOpacity,
   View,
 } from "react-native";
@@ -388,6 +389,7 @@ export const RNPickerSelect = ({
       return <View style={{pointerEvents: "box-only"}}>{children}</View>;
     }
 
+    const textProps = textInputProps as Partial<TextProps> | undefined;
     return (
       <View
         style={{
@@ -397,13 +399,27 @@ export const RNPickerSelect = ({
           width: "100%",
         }}
       >
-        <TextInput
-          readOnly
-          style={{color: disabled ? theme.text.secondaryLight : theme.text.primary}}
-          testID="text_input"
-          value={selectedItem?.inputLabel ? selectedItem?.inputLabel : selectedItem?.label}
-          {...textInputProps}
-        />
+        {disabled ? (
+          <Text
+            {...textProps}
+            style={
+              textProps?.style
+                ? [{color: theme.text.secondaryLight, flex: 1}, textProps.style]
+                : {color: theme.text.secondaryLight, flex: 1}
+            }
+            testID={textInputProps?.testID ?? "text_input"}
+          >
+            {selectedItem?.inputLabel ? selectedItem?.inputLabel : selectedItem?.label}
+          </Text>
+        ) : (
+          <TextInput
+            readOnly
+            style={{color: theme.text.primary}}
+            testID="text_input"
+            value={selectedItem?.inputLabel ? selectedItem?.inputLabel : selectedItem?.label}
+            {...textInputProps}
+          />
+        )}
         {renderIcon()}
       </View>
     );
@@ -629,7 +645,7 @@ export const RNPickerSelect = ({
           {...touchableWrapperProps}
         >
           <Text
-            numberOfLines={1}
+            numberOfLines={disabled ? undefined : 1}
             style={{
               color: disabled ? theme.text.secondaryLight : theme.text.primary,
               flex: 1,

package/src/Signature.native.test.tsx

@@ -0,0 +1,9 @@
+import {describe, expect, it} from "bun:test";
+
+import {getSignaturePadHeight} from "./SignatureSizing";
+
+describe("Signature native sizing", () => {
+  it("uses a smaller signature pad on iOS", () => {
+    expect(getSignaturePadHeight("ios")).toBeLessThan(getSignaturePadHeight("android"));
+  });
+});

package/src/Signature.native.tsx

@@ -1,53 +1,172 @@
-import {type FC, useRef} from "react";
-import {Text, View} from "react-native";
-import SignatureScreen, {type SignatureViewRef} from "react-native-signature-canvas";
+import {Canvas, ImageFormat, Path, Skia, useCanvasRef} from "@shopify/react-native-skia";
+import {type FC, useCallback, useMemo, useRef, useState} from "react";
+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 style = `.m-signature-pad--footer {display: none; margin: 0px;}`;
+const STROKE_WIDTH_PX = 2.5;
+// Snapshot after the released stroke has painted to the Skia canvas.
+const SNAPSHOT_DELAY_MS = 60;
 
-export const Signature: FC<Props> = ({onChange, onStart, onEnd}: Props) => {
-  const ref = useRef<SignatureViewRef>(null);
+/**
+ * Native (iOS + Android) signature pad backed by Skia — no WebView.
+ *
+ * Replaces the previous react-native-signature-canvas WebView, which on iOS
+ * stayed on `about:blank` (its signature_pad script never loaded, so onOK
+ * never fired). Skia draws strokes natively and exports a PNG via
+ * makeImageSnapshot, which behaves consistently across both platforms.
+ *
+ * Touches are captured with react-native-gesture-handler rather than
+ * PanResponder because the Skia <Canvas> renders a native view that swallows
+ * React Native's JS touch responder.
+ *
+ * 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> = ({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[]>([]);
+  const [activeStroke, setActiveStroke] = useState<string | null>(null);
+  const activeStrokeRef = useRef<string | null>(null);
 
-  const handleClear = () => {
-    ref.current?.clearSignature();
-    // `clearSignature` on the underlying canvas does not fire `onOK`, so the
-    // parent never learns the signature is gone. Push an empty value so any
-    // "signature required" gating reflects the cleared state immediately.
-    onChange("");
-  };
+  const clearSnapshotTimer = useCallback((): void => {
+    if (snapshotTimerRef.current !== null) {
+      clearTimeout(snapshotTimerRef.current);
+      snapshotTimerRef.current = null;
+    }
+  }, []);
+
+  /**
+   * Snapshots the Skia canvas and reports a PNG data URL. Runs after a short
+   * delay so the just-completed stroke is painted before the snapshot.
+   */
+  const captureSignature = useCallback((): void => {
+    clearSnapshotTimer();
+    snapshotTimerRef.current = setTimeout(() => {
+      const image = canvasRef.current?.makeImageSnapshot();
+      if (!image) {
+        return;
+      }
+      const base64 = image.encodeToBase64(ImageFormat.PNG, 100);
+      if (base64 && base64.length > 0) {
+        onChange(`data:image/png;base64,${base64}`);
+      }
+    }, SNAPSHOT_DELAY_MS);
+  }, [canvasRef, clearSnapshotTimer, onChange]);
+
+  const beginStroke = useCallback(
+    (x: number, y: number): void => {
+      const next = `M${x.toFixed(2)} ${y.toFixed(2)}`;
+      activeStrokeRef.current = next;
+      setActiveStroke(next);
+      onStart?.();
+    },
+    [onStart]
+  );
 
-  const onBegin = () => {
-    onStart?.();
-  };
+  const extendStroke = useCallback((x: number, y: number): void => {
+    const prev = activeStrokeRef.current;
+    if (prev === null) {
+      return;
+    }
+    const next = `${prev} L${x.toFixed(2)} ${y.toFixed(2)}`;
+    activeStrokeRef.current = next;
+    setActiveStroke(next);
+  }, []);
 
-  // Called after end of stroke. Kind of goofy if you ask me,
-  // but you need this in order to trigger the 'onOK' callback that gives us the actual image.
-  const handleEnd = () => {
-    ref.current?.readSignature();
+  const endStroke = useCallback((): void => {
+    const finished = activeStrokeRef.current;
+    activeStrokeRef.current = null;
+    setActiveStroke(null);
+    // A tap without movement has no line segment, so there is nothing to capture.
+    if (finished === null || !finished.includes("L")) {
+      return;
+    }
+    setCompletedStrokes((prev) => [...prev, finished]);
+    captureSignature();
     onEnd?.();
-  };
+  }, [captureSignature, onEnd]);
+
+  const panGesture = useMemo(
+    () =>
+      Gesture.Pan()
+        .runOnJS(true)
+        .minDistance(0)
+        .onBegin((event) => {
+          beginStroke(event.x, event.y);
+        })
+        .onUpdate((event) => {
+          extendStroke(event.x, event.y);
+        })
+        .onEnd(() => {
+          endStroke();
+        })
+        .onFinalize(() => {
+          // Covers cancellation paths where onEnd does not fire.
+          if (activeStrokeRef.current !== null) {
+            endStroke();
+          }
+        }),
+    [beginStroke, extendStroke, endStroke]
+  );
+
+  const skiaPaths = useMemo(() => {
+    const allStrokes = activeStroke ? [...completedStrokes, activeStroke] : completedStrokes;
+    return allStrokes
+      .map((svg) => Skia.Path.MakeFromSVGString(svg))
+      .filter((path): path is NonNullable<typeof path> => path !== null);
+  }, [completedStrokes, activeStroke]);
+
+  const handleClear = useCallback((): void => {
+    clearSnapshotTimer();
+    activeStrokeRef.current = null;
+    setActiveStroke(null);
+    setCompletedStrokes([]);
+    // clearing must reset parent gating, mirroring the web Signature variant.
+    onChange("");
+  }, [clearSnapshotTimer, onChange]);
 
   return (
-    <View style={{minWidth: 220}}>
-      <View style={{borderColor: theme.border.dark, borderWidth: 1, minHeight: 90}}>
-        <SignatureScreen
-          backgroundColor={theme.surface.base}
-          onBegin={onBegin}
-          onEnd={handleEnd}
-          onOK={(img) => onChange(img)}
-          ref={ref}
-          trimWhitespace
-          webStyle={style}
-        />
-      </View>
+    <View style={{minWidth: 220, width: fullWidth ? "100%" : undefined}}>
+      <GestureDetector gesture={panGesture}>
+        <View
+          style={{
+            backgroundColor: theme.surface.base,
+            borderColor: theme.border.dark,
+            borderWidth: 1,
+            height: signaturePadHeight,
+            overflow: "hidden",
+          }}
+        >
+          <Canvas ref={canvasRef} style={{flex: 1}}>
+            {skiaPaths.map((path, index) => (
+              <Path
+                color={theme.text.secondaryDark}
+                // Strokes are append-only, so the index is a stable key here.
+                key={index}
+                path={path}
+                strokeCap="round"
+                strokeJoin="round"
+                strokeWidth={STROKE_WIDTH_PX}
+                style="stroke"
+              />
+            ))}
+          </Canvas>
+        </View>
+      </GestureDetector>
       <View style={{flexDirection: "row"}}>
         <Text
           onPress={handleClear}