ferns-ui 2.0.0-beta.2 → 2.0.0-beta.4

package/src/DateTimeField.tsx

@@ -262,20 +262,20 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
       if (type === "date" || type === "datetime") {
         if (fieldIndex === 0) {
           // Month
-          const monthNum = parseInt(fieldValue);
-          if (isNaN(monthNum) || monthNum < 1 || monthNum > 12) {
+          const monthNum = parseInt(fieldValue, 10);
+          if (Number.isNaN(monthNum) || monthNum < 1 || monthNum > 12) {
             return "Month must be between 1 and 12";
           }
         } else if (fieldIndex === 1) {
           // Day
-          const dayNum = parseInt(fieldValue);
-          if (isNaN(dayNum) || dayNum < 1 || dayNum > 31) {
+          const dayNum = parseInt(fieldValue, 10);
+          if (Number.isNaN(dayNum) || dayNum < 1 || dayNum > 31) {
             return "Day must be between 1 and 31";
           }
         } else if (fieldIndex === 2) {
           // Year
-          const yearNum = parseInt(fieldValue);
-          if (isNaN(yearNum) || yearNum < 1900 || yearNum > 2100) {
+          const yearNum = parseInt(fieldValue, 10);
+          if (Number.isNaN(yearNum) || yearNum < 1900 || yearNum > 2100) {
             return "Year must be between 1900 and 2100";
           }
         }
@@ -284,14 +284,14 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
       if (type === "time" || type === "datetime") {
         if (fieldIndex === (type === "time" ? 0 : 3)) {
           // Hour
-          const hourNum = parseInt(fieldValue);
-          if (isNaN(hourNum) || hourNum < 1 || hourNum > 12) {
+          const hourNum = parseInt(fieldValue, 10);
+          if (Number.isNaN(hourNum) || hourNum < 1 || hourNum > 12) {
             return "Hour must be between 1 and 12";
           }
         } else if (fieldIndex === (type === "time" ? 1 : 4)) {
           // Minute
-          const minuteNum = parseInt(fieldValue);
-          if (isNaN(minuteNum) || minuteNum < 0 || minuteNum > 59) {
+          const minuteNum = parseInt(fieldValue, 10);
+          if (Number.isNaN(minuteNum) || minuteNum < 0 || minuteNum > 59) {
             return "Minute must be between 0 and 59";
           }
         }
@@ -323,7 +323,7 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
         if (!monthVal || !dayVal || !yearVal || !hour || !minuteVal) {
           return undefined;
         }
-        let hourNum = parseInt(hourVal);
+        let hourNum = parseInt(hourVal, 10);
         if (ampPmVal === "pm" && hourNum !== 12) {
           hourNum += 12;
         } else if (ampPmVal === "am" && hourNum === 12) {
@@ -331,11 +331,11 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
         }
         date = DateTime.fromObject(
           {
-            year: parseInt(yearVal),
-            month: parseInt(monthVal),
-            day: parseInt(dayVal),
+            year: parseInt(yearVal, 10),
+            month: parseInt(monthVal, 10),
+            day: parseInt(dayVal, 10),
             hour: hourNum,
-            minute: parseInt(minuteVal),
+            minute: parseInt(minuteVal, 10),
             second: 0,
             millisecond: 0,
           },
@@ -349,9 +349,9 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
         }
         date = DateTime.fromObject(
           {
-            year: parseInt(yearVal),
-            month: parseInt(monthVal),
-            day: parseInt(dayVal),
+            year: parseInt(yearVal, 10),
+            month: parseInt(monthVal, 10),
+            day: parseInt(dayVal, 10),
             hour: 0,
             minute: 0,
             second: 0,
@@ -365,7 +365,7 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
         if (!hour || !minuteVal) {
           return undefined;
         }
-        let hourNum = parseInt(hour);
+        let hourNum = parseInt(hour, 10);
         if (ampPmVal === "pm" && hourNum !== 12) {
           hourNum += 12;
         } else if (ampPmVal === "am" && hourNum === 12) {
@@ -374,7 +374,7 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
         date = DateTime.fromObject(
           {
             hour: hourNum,
-            minute: parseInt(minuteVal),
+            minute: parseInt(minuteVal, 10),
             second: 0,
             millisecond: 0,
           },
@@ -404,7 +404,7 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
         // so it's always a valid time and easier to edit.
         // This lets users freely edit or clear the minute field without breaking the time format.
         const finalValue = numericValue === "" ? "00" : numericValue.slice(-2);
-        const minuteNum = parseInt(finalValue);
+        const minuteNum = parseInt(finalValue, 10);
 
         // Update the minute state so the UI reflects the latest input,
         // even if it's temporarily invalid
@@ -412,7 +412,7 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
         setMinute(finalValue);
 
         // Only update ref and result if it's a valid minute value
-        if (!isNaN(minuteNum) && minuteNum >= 0 && minuteNum <= 59) {
+        if (!Number.isNaN(minuteNum) && minuteNum >= 0 && minuteNum <= 59) {
           pendingValueRef.current = {minute: finalValue};
           setFieldErrors((prev) => ({...prev, [index]: undefined}));
 

package/src/EmailField.tsx

@@ -13,7 +13,11 @@ export const EmailField: FC<EmailFieldProps> = ({
   ...rest
 }) => {
   const [localValue, setLocalValue] = useState<string>(value || "");
-  const [error, setError] = useState<string | undefined>(errorText);
+
+  // Sync local state with incoming prop values
+  useEffect(() => {
+    setLocalValue(value || "");
+  }, [value]);
 
   const validateEmail = useCallback((email: string): string | undefined => {
     if (email.trim() === "") {
@@ -26,60 +30,36 @@ export const EmailField: FC<EmailFieldProps> = ({
     return undefined;
   }, []);
 
-  // Sync local state with incoming prop values
-  useEffect(() => {
-    setLocalValue(value || "");
-    setError(errorText);
-  }, [value, errorText]);
-
-  const handleBlur = useCallback(
-    (email: string) => {
-      if (onBlur) {
-        onBlur(email);
-      }
-      const validationError = validateEmail(email);
-      if (validationError) {
-        setError(validationError);
-      } else {
-        setError(undefined);
+  const localOnChange = useCallback(
+    (e: string) => {
+      setLocalValue(e);
+      const err = validateEmail(e);
+      if (!err && onChange) {
+        onChange(e);
       }
     },
-    [onBlur, validateEmail]
+    [onChange, validateEmail, setLocalValue]
   );
 
-  const handleChange = useCallback(
-    (email: string) => {
-      setLocalValue(email);
-      const validationError = validateEmail(email);
-      if (error && !validationError) {
-        setError(undefined);
-      }
-      if (!validationError) {
-        onChange(email);
+  const localOnBlur = useCallback(
+    (e: string) => {
+      setLocalValue(e);
+      const err = validateEmail(e);
+      if (!err && onBlur) {
+        onBlur(e);
       }
     },
-    [onChange, error, validateEmail]
+    [onBlur, validateEmail]
   );
-
   return (
     <TextField
-      errorText={error}
+      errorText={errorText || validateEmail(localValue)}
       iconName={iconName}
       placeholder={placeholder}
       type="email"
       value={localValue}
-      onBlur={(e) => {
-        handleBlur(e);
-        if (onBlur) {
-          onBlur(value || "");
-        }
-      }}
-      onChange={(e) => {
-        handleChange(e);
-        if (onChange) {
-          onChange;
-        }
-      }}
+      onBlur={localOnBlur}
+      onChange={localOnChange}
       {...rest}
     />
   );

package/src/FernsProvider.tsx

@@ -9,10 +9,7 @@ import {Toast} from "./Toast";
 export const FernsProvider: FC<{
   children: React.ReactNode;
   openAPISpecUrl?: string;
-}> = ({
-  children,
-  openAPISpecUrl,
-}) => {
+}> = ({children, openAPISpecUrl}) => {
   return (
     <ThemeProvider>
       <ToastProvider

package/src/Heading.tsx

@@ -4,7 +4,7 @@ import {
   useFonts,
 } from "@expo-google-fonts/titillium-web";
 import React from "react";
-import {Platform, StyleProp, Text as NativeText, TextStyle} from "react-native";
+import {Text as NativeText, Platform, StyleProp, TextStyle} from "react-native";
 
 import {HeadingProps} from "./Common";
 import {useTheme} from "./Theme";
@@ -14,6 +14,7 @@ const fontSizeAndWeightWeb = {
   md: {size: 18, weight: "bold"},
   lg: {size: 24, weight: "bold"},
   xl: {size: 32, weight: "bold"},
+  "2xl": {size: 48, weight: "bold"},
 };
 
 const fontSizeAndWeighMobile = {
@@ -21,6 +22,7 @@ const fontSizeAndWeighMobile = {
   md: {size: 16, weight: "bold"},
   lg: {size: 20, weight: "bold"},
   xl: {size: 28, weight: "bold"},
+  "2xl": {size: 32, weight: "bold"},
 };
 
 const fontSizes = Platform.OS === "web" ? fontSizeAndWeightWeb : fontSizeAndWeighMobile;

package/src/Hyperlink.tsx

@@ -111,7 +111,7 @@ class HyperlinkComponent extends React.Component<HyperlinkProps> {
         component.props.children.substring(_lastIndex, component.props.children.length)
       );
       return React.cloneElement(component, componentProps, elements);
-    } catch (error) {
+    } catch (_error) {
       return component;
     }
   };

package/src/IconButton.tsx

@@ -1,7 +1,7 @@
 import FontAwesome6 from "@expo/vector-icons/FontAwesome6";
 import debounce from "lodash/debounce";
 import React, {FC, useState} from "react";
-import {ActivityIndicator, Pressable, Text as NativeText, View} from "react-native";
+import {ActivityIndicator, Text as NativeText, Pressable, View} from "react-native";
 
 import {IconButtonProps} from "./Common";
 import {isMobileDevice} from "./MediaQuery";
@@ -98,7 +98,7 @@ const IconButtonComponent: FC<IconButtonProps> = ({
   return (
     <Pressable
       accessibilityHint={
-        accessibilityHint ?? withConfirmation
+        (accessibilityHint ?? withConfirmation)
           ? `Opens a confirmation dialog to confirm ${accessLabel}`
           : `Press to perform ${accessLabel} action`
       }

package/src/Image.tsx

@@ -3,6 +3,7 @@ import {Dimensions, Image as NativeImage} from "react-native";
 
 import {Box} from "./Box";
 import {ImageProps} from "./Common";
+
 const {width: DEVICE_WIDTH} = Dimensions.get("window");
 
 export class Image extends React.Component<ImageProps, {}> {

package/src/MarkdownView.tsx

@@ -0,0 +1,67 @@
+import {
+  Nunito_400Regular,
+  Nunito_500Medium,
+  Nunito_700Bold,
+  useFonts as useTextFonts,
+} from "@expo-google-fonts/nunito";
+import {
+  TitilliumWeb_600SemiBold,
+  TitilliumWeb_700Bold,
+  useFonts as useHeadingFonts,
+} from "@expo-google-fonts/titillium-web";
+import React from "react";
+import {Platform} from "react-native";
+import Markdown from "react-native-markdown-display";
+
+import {useTheme} from "./Theme";
+
+// Takes markdown and renders it with our theme. We should open source this component.
+export const MarkdownView: React.FC<{children: React.ReactNode; inverted?: boolean}> = ({
+  children,
+  inverted,
+}) => {
+  const {theme} = useTheme();
+
+  const color = {color: inverted ? theme.text.inverted : theme.text.primary};
+
+  // Match Heading font sizes to Heading component
+  // Web sizes (see src/Heading.tsx): sm:16, md:18, lg:24, xl:32
+  // Mobile sizes: sm:14, md:16, lg:20, xl:28
+  const isWeb = Platform.OS === "web";
+  const sizes = {
+    sm: isWeb ? 16 : 14,
+    md: isWeb ? 18 : 16,
+    lg: isWeb ? 24 : 20,
+    xl: isWeb ? 32 : 28,
+  } as const;
+
+  // Load fonts similar to Heading/Text components so fontFamily names resolve
+  useHeadingFonts({
+    heading: TitilliumWeb_600SemiBold,
+    "heading-bold": TitilliumWeb_700Bold,
+    "heading-semibold": TitilliumWeb_600SemiBold,
+  });
+  useTextFonts({
+    text: Nunito_400Regular,
+    "text-regular": Nunito_400Regular,
+    "text-medium": Nunito_500Medium,
+    "text-bold": Nunito_700Bold,
+  });
+
+  return (
+    <Markdown
+      style={{
+        body: {fontFamily: "text", ...color},
+        heading1: {fontFamily: "heading-bold", fontSize: sizes.xl, ...color},
+        heading2: {fontFamily: "heading-bold", fontSize: sizes.lg, ...color},
+        heading3: {fontFamily: "heading-bold", fontSize: sizes.md, ...color},
+        heading4: {fontFamily: "heading-semibold", fontSize: sizes.sm, ...color},
+        // h5/h6 map to small as well for consistency, slightly smaller visually handled by weight
+        heading5: {fontFamily: "heading-semibold", fontSize: sizes.sm, ...color},
+        heading6: {fontFamily: "heading-semibold", fontSize: sizes.sm, ...color},
+      }}
+    >
+      {children}
+    </Markdown>
+  );
+};

package/src/MobileAddressAutoComplete.tsx

@@ -108,7 +108,7 @@ export const MobileAddressAutocomplete = ({
               handleAddressChange(event.nativeEvent.text);
             },
           }}
-          onPress={(data, details = null) => {
+          onPress={(_data, details = null) => {
             const addressComponents = details?.address_components;
             const formattedAddressObject = processAddressComponents(addressComponents, {
               includeCounty,

package/src/Modal.tsx

@@ -1,14 +1,11 @@
 import React, {FC, useEffect, useRef} from "react";
-import {Dimensions, DimensionValue, Modal as RNModal, Pressable, View} from "react-native";
+import {Dimensions, DimensionValue, Pressable, Modal as RNModal, View} from "react-native";
 import ActionSheet, {ActionSheetRef} from "react-native-actions-sheet";
-import {
-  PanGestureHandler,
-  PanGestureHandlerStateChangeEvent,
-  State,
-} from "react-native-gesture-handler";
+import {Gesture, GestureDetector} from "react-native-gesture-handler";
+import {runOnJS} from "react-native-reanimated";
 
 import {Button} from "./Button";
-import {ModalProps} from "./Common";
+import type {ModalProps} from "./Common";
 import {Heading} from "./Heading";
 import {Icon} from "./Icon";
 import {isMobileDevice} from "./MediaQuery";
@@ -129,7 +126,13 @@ const ModalContent: FC<{
         </View>
       )}
       {children && (
-        <View style={{marginTop: text ? 0 : 12, width: "100%", flex: isMobile ? undefined : 1}}>
+        <View
+          style={{
+            marginTop: text ? 0 : 12,
+            width: "100%",
+            flex: isMobile ? undefined : 1,
+          }}
+        >
           {children}
         </View>
       )}
@@ -163,6 +166,7 @@ const ModalContent: FC<{
 
 export const Modal: FC<ModalProps> = ({
   children,
+  persistOnBackgroundClick = false,
   primaryButtonDisabled = false,
   primaryButtonText,
   secondaryButtonText,
@@ -184,23 +188,28 @@ export const Modal: FC<ModalProps> = ({
     }
   };
 
-  const handlePrimaryButtonClick = (value?: Parameters<NonNullable<ModalProps["primaryButtonOnClick"]>>[0]) => {
+  const handlePrimaryButtonClick = (
+    value?: Parameters<NonNullable<ModalProps["primaryButtonOnClick"]>>[0]
+  ) => {
     if (visible && primaryButtonOnClick) {
       return primaryButtonOnClick(value);
     }
   };
 
-  const handleSecondaryButtonClick = (value?: Parameters<NonNullable<ModalProps["secondaryButtonOnClick"]>>[0]) => {
+  const handleSecondaryButtonClick = (
+    value?: Parameters<NonNullable<ModalProps["secondaryButtonOnClick"]>>[0]
+  ) => {
     if (visible && secondaryButtonOnClick) {
       return secondaryButtonOnClick(value);
     }
   };
 
-  const onHandlerStateChange = ({nativeEvent}: PanGestureHandlerStateChangeEvent) => {
-    if (nativeEvent.state === State.END && nativeEvent.translationY > 100) {
-      handleDismiss();
+  const dragToClose = Gesture.Pan().onEnd((event) => {
+    if (event.translationY > 20) {
+      // Gesture callbacks run on the UI thread, runOnJS is required to safely invoke handleDismiss on the JS thread
+      runOnJS(handleDismiss)();
     }
-  };
+  });
 
   // Open the action sheet ref when the visible prop changes.
   useEffect(() => {
@@ -213,6 +222,7 @@ export const Modal: FC<ModalProps> = ({
   const sizePx = getModalSize(size);
 
   const modalContentProps = {
+    persistOnBackgroundClick,
     title,
     subtitle,
     text,
@@ -229,13 +239,22 @@ export const Modal: FC<ModalProps> = ({
 
   if (isMobile) {
     return (
-      <ActionSheet ref={actionSheetRef} onClose={handleDismiss}>
-        <PanGestureHandler onHandlerStateChange={onHandlerStateChange}>
-          <View>
+      <ActionSheet
+        ref={actionSheetRef}
+        closeOnTouchBackdrop={!persistOnBackgroundClick}
+        // Disable ActionSheet's built-in gestures to avoid conflicts with scrolling
+        gestureEnabled={false}
+        onClose={handleDismiss}
+      >
+        <View>
+          {/* Attach our own swipe-to-dismiss gesture to the top handle */}
+          <GestureDetector gesture={dragToClose}>
             <View
               accessibilityHint="Pull down to close the modal"
               aria-label="Pull down bar"
               aria-role="adjustable"
+              // add hitSlop to make the bar easier to hit since it's small
+              hitSlop={{top: 20, bottom: 20, left: 50, right: 50}}
               style={{
                 justifyContent: "center",
                 alignItems: "center",
@@ -248,15 +267,33 @@ export const Modal: FC<ModalProps> = ({
                 marginTop: 10,
               }}
             />
-            <ModalContent {...modalContentProps}>{children}</ModalContent>
-          </View>
-        </PanGestureHandler>
+          </GestureDetector>
+
+          <ModalContent {...modalContentProps}>{children}</ModalContent>
+        </View>
       </ActionSheet>
     );
   } else {
     return (
       <RNModal animationType="slide" transparent visible={visible} onRequestClose={handleDismiss}>
-        <ModalContent {...modalContentProps}>{children}</ModalContent>
+        <Pressable
+          style={{
+            flex: 1,
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+          onPress={persistOnBackgroundClick ? undefined : handleDismiss}
+        >
+          <Pressable
+            style={{cursor: "auto"}}
+            onPress={(e) => {
+              persistOnBackgroundClick ? null : e.stopPropagation();
+            }}
+          >
+            <ModalContent {...modalContentProps}>{children}</ModalContent>
+          </Pressable>
+        </Pressable>
       </RNModal>
     );
   }

package/src/NumberField.tsx

@@ -24,8 +24,8 @@ export const NumberField: FC<NumberFieldProps> = ({
       if (!v) {
         return;
       }
-      const num = type === "number" ? parseInt(v) : parseFloat(v);
-      if (isNaN(num) || (type === "number" && v.match(/[^0-9]/) !== null)) {
+      const num = type === "number" ? parseInt(v, 10) : parseFloat(v);
+      if (Number.isNaN(num) || (type === "number" && v.match(/[^0-9]/) !== null)) {
         return "Value must be an integer";
       } else if (
         (type === "decimal" && v.match(/[^0-9.]+/) !== null) ||
@@ -47,13 +47,19 @@ export const NumberField: FC<NumberFieldProps> = ({
   // Only return the value if it is a valid number
   const localOnChange = useCallback(
     (v: string) => {
-      setValue(v);
+      if (type === "decimal" && v === ".") {
+        // if type is decimal and dot is the first character add 0 before it
+        setValue("0.");
+        rest.onChange("0.");
+        return;
+      }
       const err = getError(v);
       if (!err) {
+        setValue(v);
         rest.onChange(v);
       }
     },
-    [getError, rest]
+    [getError, rest, type]
   );
 
   return <TextField {...rest} errorText={error} value={value} onChange={localOnChange} />;

package/src/NumberPickerActionSheet.tsx

@@ -9,16 +9,12 @@ import {NumberPickerActionSheetProps} from "./Common";
 
 const PICKER_HEIGHT = 104;
 
-interface NumberPickerActionSheetState {}
+type NumberPickerActionSheetState = {};
 
 export class NumberPickerActionSheet extends React.Component<
   NumberPickerActionSheetProps,
   NumberPickerActionSheetState
 > {
-  constructor(props: NumberPickerActionSheetProps) {
-    super(props);
-  }
-
   render() {
     return (
       <ActionSheet ref={this.props.actionSheetRef} bounceOnOpen gestureEnabled>

package/src/Page.tsx

@@ -47,7 +47,7 @@ export class Page extends React.Component<PageProps, {}> {
             <Button
               text={this.props.rightButton}
               variant="muted"
-              onClick={() => this.props.rightButtonOnClick && this.props.rightButtonOnClick()}
+              onClick={() => this.props.rightButtonOnClick?.()}
             />
           </Box>
         )}

package/src/Pagination.tsx

@@ -11,12 +11,7 @@ const PaginationButton: FC<{
   onClick: () => void;
   totalPages?: number;
   page?: number;
-}> = ({
-  type,
-  onClick,
-  totalPages = 1,
-  page = 1,
-}) => {
+}> = ({type, onClick, totalPages = 1, page = 1}) => {
   let icon: IconName;
   let disabled = false;
 
@@ -56,11 +51,7 @@ const PaginationNumber: FC<{
   number: number | "more";
   current: boolean;
   onClick: () => void;
-}> = ({
-  number,
-  current,
-  onClick,
-}) => {
+}> = ({number, current, onClick}) => {
   // Shortcut to make rendering the number buttons easier.
   if (number === "more") {
     return <PaginationButton type="more" onClick={() => {}} />;

package/src/Permissions.ts

@@ -4,8 +4,8 @@
 // import Permissions from "react-native-permissions";
 import {PermissionKind, PermissionStatus} from "./Common";
 
-export async function requestPermissions(kind: PermissionKind): Promise<PermissionStatus> {
-  return new Promise(async (resolve, reject) => {
+export async function requestPermissions(_kind: PermissionKind): Promise<PermissionStatus> {
+  return new Promise((_resolve, _reject) => {
     return "denied";
   });
   // const userPropertyKey = `PermissionsFor${capitalize(kind)}`;

package/src/PickerSelect.tsx

@@ -201,7 +201,7 @@ export function RNPickerSelect({
       Keyboard.dismiss();
     }
 
-    setAnimationType(modalProps && modalProps?.animationType ? modalProps?.animationType : "slide");
+    setAnimationType(modalProps?.animationType ? modalProps?.animationType : "slide");
 
     triggerOpenCloseCallbacks();
 

package/src/SectionDivider.tsx

@@ -1,6 +1,6 @@
-import {useTheme} from "./Theme";
 import React from "react";
 import {View} from "react-native";
+import {useTheme} from "./Theme";
 
 export const SectionDivider: React.FC<{}> = () => {
   const {theme} = useTheme();

package/src/SegmentedControl.tsx

@@ -24,7 +24,9 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
   }, []);
 
   const handleNext = useCallback(() => {
-    setStartIndex((prev) => Math.min(items.length - (maxItems ?? items.length), prev + (maxItems ?? 4)));
+    setStartIndex((prev) =>
+      Math.min(items.length - (maxItems ?? items.length), prev + (maxItems ?? 4))
+    );
   }, [items.length, maxItems]);
 
   const visibleItems = maxItems ? items.slice(startIndex, startIndex + maxItems) : items;

package/src/Signature.native.tsx

@@ -21,14 +21,14 @@ export const Signature: FC<Props> = ({onChange, onStart, onEnd}: Props) => {
   };
 
   const onBegin = () => {
-    onStart && onStart();
+    onStart?.();
   };
 
   // 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();
-    onEnd && onEnd();
+    onEnd?.();
   };
 
   return (