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

package/src/TextArea.test.tsx

@@ -20,7 +20,7 @@ describe("TextArea", () => {
       const {getByDisplayValue} = renderWithTheme(
         <TextArea value="test content" onChange={mockOnChange} />
       );
-      
+
       const input = getByDisplayValue("test content");
       expect(input.props.multiline).toBe(true);
       expect(input.props.value).toBe("test content");
@@ -30,7 +30,7 @@ describe("TextArea", () => {
       const {getByText} = renderWithTheme(
         <TextArea title="Description" value="" onChange={mockOnChange} />
       );
-      
+
       expect(getByText("Description")).toBeTruthy();
     });
 
@@ -38,7 +38,7 @@ describe("TextArea", () => {
       const {getByPlaceholderText} = renderWithTheme(
         <TextArea placeholder="Enter description" value="" onChange={mockOnChange} />
       );
-      
+
       expect(getByPlaceholderText("Enter description")).toBeTruthy();
     });
 
@@ -46,7 +46,7 @@ describe("TextArea", () => {
       const {getByText} = renderWithTheme(
         <TextArea helperText="Maximum 500 characters" value="" onChange={mockOnChange} />
       );
-      
+
       expect(getByText("Maximum 500 characters")).toBeTruthy();
     });
 
@@ -54,7 +54,7 @@ describe("TextArea", () => {
       const {getByText} = renderWithTheme(
         <TextArea errorText="This field is required" value="" onChange={mockOnChange} />
       );
-      
+
       expect(getByText("This field is required")).toBeTruthy();
     });
 
@@ -62,7 +62,7 @@ describe("TextArea", () => {
       const {getByDisplayValue} = renderWithTheme(
         <TextArea grow value="" onChange={mockOnChange} />
       );
-      
+
       const input = getByDisplayValue("");
       expect(input.props.multiline).toBe(true);
     });
@@ -71,16 +71,14 @@ describe("TextArea", () => {
       const {getByDisplayValue} = renderWithTheme(
         <TextArea disabled value="test" onChange={mockOnChange} />
       );
-      
+
       const input = getByDisplayValue("test");
       expect(input.props.readOnly).toBe(true);
     });
 
     it("should always have text type", () => {
-      const {getByDisplayValue} = renderWithTheme(
-        <TextArea value="" onChange={mockOnChange} />
-      );
-      
+      const {getByDisplayValue} = renderWithTheme(<TextArea value="" onChange={mockOnChange} />);
+
       const input = getByDisplayValue("");
       expect(input.props.keyboardType).toBe("default");
     });
@@ -89,9 +87,7 @@ describe("TextArea", () => {
   describe("user interactions", () => {
     it("should call onChange when text is entered", async () => {
       const user = userEvent.setup();
-      const {getByDisplayValue} = renderWithTheme(
-        <TextArea value="" onChange={mockOnChange} />
-      );
+      const {getByDisplayValue} = renderWithTheme(<TextArea value="" onChange={mockOnChange} />);
 
       const input = getByDisplayValue("");
       await user.type(input, "hello world");
@@ -103,9 +99,7 @@ describe("TextArea", () => {
     it("should handle multiline text input", async () => {
       const user = userEvent.setup();
       const multilineText = "Line 1\nLine 2\nLine 3";
-      const {getByDisplayValue} = renderWithTheme(
-        <TextArea value="" onChange={mockOnChange} />
-      );
+      const {getByDisplayValue} = renderWithTheme(<TextArea value="" onChange={mockOnChange} />);
 
       const input = getByDisplayValue("");
       await user.type(input, multilineText);
@@ -117,10 +111,8 @@ describe("TextArea", () => {
 
   describe("accessibility", () => {
     it("should have correct accessibility properties", () => {
-      const {getByDisplayValue} = renderWithTheme(
-        <TextArea value="" onChange={mockOnChange} />
-      );
-      
+      const {getByDisplayValue} = renderWithTheme(<TextArea value="" onChange={mockOnChange} />);
+
       const input = getByDisplayValue("");
       expect(input.props.accessibilityHint).toBe("Enter text here");
       expect(input.props["aria-label"]).toBe("Text input field");
@@ -130,7 +122,7 @@ describe("TextArea", () => {
       const {getByDisplayValue} = renderWithTheme(
         <TextArea disabled value="" onChange={mockOnChange} />
       );
-      
+
       const input = getByDisplayValue("");
       expect(input.props.accessibilityState.disabled).toBe(true);
     });
@@ -138,19 +130,15 @@ describe("TextArea", () => {
 
   describe("edge cases", () => {
     it("should handle empty value", () => {
-      const {getByDisplayValue} = renderWithTheme(
-        <TextArea value="" onChange={mockOnChange} />
-      );
-      
+      const {getByDisplayValue} = renderWithTheme(<TextArea value="" onChange={mockOnChange} />);
+
       const input = getByDisplayValue("");
       expect(input.props.value).toBe("");
     });
 
     it("should handle undefined value", () => {
-      const {root} = renderWithTheme(
-        <TextArea value={undefined} onChange={mockOnChange} />
-      );
-      
+      const {root} = renderWithTheme(<TextArea value={undefined} onChange={mockOnChange} />);
+
       expect(root).toBeTruthy();
     });
 
@@ -159,7 +147,7 @@ describe("TextArea", () => {
       const {getByDisplayValue} = renderWithTheme(
         <TextArea value={longText} onChange={mockOnChange} />
       );
-      
+
       const input = getByDisplayValue(longText);
       expect(input.props.value).toBe(longText);
     });
@@ -169,7 +157,7 @@ describe("TextArea", () => {
       const {getByDisplayValue} = renderWithTheme(
         <TextArea value={textWithBreaks} onChange={mockOnChange} />
       );
-      
+
       const input = getByDisplayValue(textWithBreaks);
       expect(input.props.value).toBe(textWithBreaks);
     });
@@ -179,10 +167,10 @@ describe("TextArea", () => {
     it("should inherit all TextField props except multiline and type", () => {
       const mockOnFocus = jest.fn();
       const mockOnBlur = jest.fn();
-      
+
       const {getByDisplayValue} = renderWithTheme(
-        <TextArea 
-          value="test" 
+        <TextArea
+          value="test"
           onChange={mockOnChange}
           onFocus={mockOnFocus}
           onBlur={mockOnBlur}
@@ -191,7 +179,7 @@ describe("TextArea", () => {
           rows={5}
         />
       );
-      
+
       const input = getByDisplayValue("test");
       expect(input.props.numberOfLines).toBe(5);
       expect(input.props.onFocus).toBeTruthy();
@@ -200,19 +188,15 @@ describe("TextArea", () => {
 
     it("should support inputRef", () => {
       const mockInputRef = jest.fn();
-      renderWithTheme(
-        <TextArea inputRef={mockInputRef} value="" onChange={mockOnChange} />
-      );
-      
+      renderWithTheme(<TextArea inputRef={mockInputRef} value="" onChange={mockOnChange} />);
+
       expect(mockInputRef).toHaveBeenCalled();
     });
   });
 
   describe("snapshots", () => {
     it("should match snapshot with default props", () => {
-      const component = renderWithTheme(
-        <TextArea value="test content" onChange={mockOnChange} />
-      );
+      const component = renderWithTheme(<TextArea value="test content" onChange={mockOnChange} />);
       expect(component.toJSON()).toMatchSnapshot();
     });
 

package/src/TextField.test.tsx

@@ -1,8 +1,7 @@
-import {act, userEvent} from "@testing-library/react-native";
+import {act, fireEvent, userEvent} from "@testing-library/react-native";
 import React from "react";
-
-import {renderWithTheme} from "./test-utils";
 import {TextField} from "./TextField";
+import {renderWithTheme} from "./test-utils";
 
 describe("TextField", () => {
   let mockOnChange: jest.Mock;
@@ -103,7 +102,7 @@ describe("TextField", () => {
     });
 
     it("should call onEnter when enter key is pressed", async () => {
-      const user = userEvent.setup();
+      const _user = userEvent.setup();
       const {getByDisplayValue} = renderWithTheme(
         <TextField value="" onChange={mockOnChange} onEnter={mockOnEnter} />
       );
@@ -115,6 +114,66 @@ describe("TextField", () => {
 
       expect(mockOnEnter).toHaveBeenCalledTimes(1);
     });
+
+    it("should trim value on blur if trimOnBlur is true, even if onBlur prop is not provided", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField value="test    " trimOnBlur onChange={mockOnChange} />
+      );
+
+      const input = getByDisplayValue("test    ");
+
+      fireEvent(input, "blur");
+
+      // on change should be called with trimmed value
+      expect(mockOnChange).toHaveBeenCalled();
+      const lastCall = mockOnChange.mock.calls.at(-1);
+      expect(lastCall?.[0]).toBe("test");
+    });
+
+    it("should trim value on blur if trimOnBlur is true, with onBlur prop provided", async () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField value="test    " trimOnBlur={true} onChange={mockOnChange} onBlur={mockOnBlur} />
+      );
+
+      const input = getByDisplayValue("test    ");
+
+      fireEvent(input, "blur");
+
+      // onChange should be called with trimmed value
+      expect(mockOnChange).toHaveBeenCalled();
+      const lastCall = mockOnChange.mock.calls[mockOnChange.mock.calls.length - 1];
+      expect(lastCall[0]).toBe("test");
+
+      // onBlur should also be called with trimmed value
+      expect(mockOnBlur).toHaveBeenCalledTimes(1);
+      expect(mockOnBlur.mock.calls[0][0]).toBe("test");
+    });
+
+    it("should NOT trim value on blur if trimOnBlur is false", async () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField value="test    " trimOnBlur={false} onChange={mockOnChange} />
+      );
+
+      const input = getByDisplayValue("test    ");
+      fireEvent(input, "blur");
+
+      // onChange should not be called because the value hasn't changed (no trimming)
+      expect(mockOnChange).not.toHaveBeenCalled();
+    });
+
+    it("trims on blur by default when no prop is provided", async () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField value="test    " onChange={mockOnChange} />
+      );
+
+      const input = getByDisplayValue("test    ");
+      fireEvent(input, "blur");
+
+      // onChange should be called with trimmed value
+      expect(mockOnChange).toHaveBeenCalled();
+      const lastCall = mockOnChange.mock.calls.at(-1);
+      expect(lastCall?.[0]).toBe("test");
+    });
   });
 
   describe("field types", () => {
@@ -206,7 +265,7 @@ describe("TextField", () => {
     });
 
     it("should not call onFocus when disabled", async () => {
-      const user = userEvent.setup();
+      const _user = userEvent.setup();
       const {getByDisplayValue} = renderWithTheme(
         <TextField disabled value="" onChange={mockOnChange} onFocus={mockOnFocus} />
       );

package/src/TextField.tsx

@@ -65,6 +65,7 @@ export const TextField: FC<TextFieldProps> = ({
   blurOnSubmit = true,
   iconName,
   onIconClick,
+  trimOnBlur = true,
   type = "text",
   autoComplete,
   inputRef,
@@ -183,8 +184,16 @@ export const TextField: FC<TextFieldProps> = ({
           value={value}
           onBlur={() => {
             if (disabled) return;
+            let finalValue = value ?? "";
+
+            if (trimOnBlur && value) {
+              finalValue = finalValue.trim();
+              if (finalValue !== value) {
+                onChange(finalValue);
+              }
+            }
             if (onBlur) {
-              onBlur(value ?? "");
+              onBlur(finalValue);
             }
             setFocused(false);
           }}

package/src/TextFieldNumberActionSheet.tsx

@@ -4,18 +4,14 @@ import React from "react";
 import {ActionSheet} from "./ActionSheet";
 import {Box} from "./Box";
 import {Button} from "./Button";
-import {NumberPickerActionSheetProps, TextFieldPickerActionSheetProps} from "./Common";
+import {TextFieldPickerActionSheetProps} from "./Common";
 
-interface NumberPickerActionSheetState {}
+type NumberPickerActionSheetState = {};
 
 export class NumberPickerActionSheet extends React.Component<
   TextFieldPickerActionSheetProps,
   NumberPickerActionSheetState
 > {
-  constructor(props: NumberPickerActionSheetProps) {
-    super(props);
-  }
-
   render() {
     return (
       <ActionSheet ref={this.props.actionSheetRef} bounceOnOpen gestureEnabled>
@@ -36,7 +32,7 @@ export class NumberPickerActionSheet extends React.Component<
             mode={this.props.mode}
             testID="dateTimePicker"
             value={this.props.value ? new Date(this.props.value) : new Date()}
-            onChange={(event: any, date?: Date) => {
+            onChange={(_event: any, date?: Date) => {
               if (!date) {
                 return;
               }

package/src/Tooltip.tsx

@@ -35,7 +35,7 @@ interface Measurement {
 }
 
 interface ChildrenProps {
-  onClick?: () => void | Promise<void>;
+  onClick?: () => void;
   onHoverIn?: () => void;
   onHoverOut?: () => void;
 }
@@ -188,20 +188,33 @@ export const Tooltip: FC<TooltipProps> = ({text, children, idealPosition, includ
   const childrenWrapperRef = useRef<View>(null);
   const touched = useRef(false);
   const isWeb = Platform.OS === "web";
+  const resetMeasurement = useCallback(() => {
+    setMeasurement({
+      children: {},
+      tooltip: {},
+      measured: false,
+    });
+  }, []);
+  const hideTooltip = useCallback(() => {
+    if (showTooltipTimer.current) {
+      clearTimeout(showTooltipTimer.current);
+    }
+    if (hideTooltipTimer.current) {
+      clearTimeout(hideTooltipTimer.current);
+    }
+
+    touched.current = false;
+    setVisible(false);
+    resetMeasurement();
+  }, [resetMeasurement, setVisible]);
 
   // If the tooltip is visible, and the user clicks outside of the tooltip, hide it.
   useEffect(() => {
     return () => {
-      if (showTooltipTimer.current) {
-        clearTimeout(showTooltipTimer.current);
-      }
-      if (hideTooltipTimer.current) {
-        clearTimeout(hideTooltipTimer.current);
-      }
       // Hide tooltip on unmount to prevent it from staying stuck on screen
-      setVisible(false);
+      hideTooltip();
     };
-  }, []);
+  }, [hideTooltip]);
 
   const getArrowContainerStyle = (): ViewStyle => {
     if (!includeArrow) {
@@ -264,6 +277,11 @@ export const Tooltip: FC<TooltipProps> = ({text, children, idealPosition, includ
   );
 
   const handleTouchStart = useCallback(() => {
+    if (visible) {
+      hideTooltip();
+      return;
+    }
+
     if (hideTooltipTimer.current) {
       clearTimeout(hideTooltipTimer.current);
     }
@@ -272,7 +290,7 @@ export const Tooltip: FC<TooltipProps> = ({text, children, idealPosition, includ
       touched.current = true;
       setVisible(true);
     }, 100);
-  }, []);
+  }, [hideTooltip, visible]);
 
   const handleHoverIn = useCallback(() => {
     if (hideTooltipTimer.current) {
@@ -286,20 +304,23 @@ export const Tooltip: FC<TooltipProps> = ({text, children, idealPosition, includ
   }, [hoverDelay]);
 
   const handleHoverOut = useCallback(() => {
-    touched.current = false;
     if (showTooltipTimer.current) {
       clearTimeout(showTooltipTimer.current);
     }
+    if (hideTooltipTimer.current) {
+      clearTimeout(hideTooltipTimer.current);
+    }
 
     hideTooltipTimer.current = setTimeout(() => {
-      setVisible(false);
-      setMeasurement({
-        children: {},
-        tooltip: {},
-        measured: false,
-      });
+      hideTooltip();
     }, hoverEndDelay);
-  }, [hoverEndDelay]);
+  }, [hideTooltip, hoverEndDelay]);
+
+  const handleClick = useCallback(() => {
+    if (visible) {
+      hideTooltip();
+    }
+  }, [hideTooltip, visible]);
 
   const mobilePressProps = {
     onPress: useCallback(() => {
@@ -354,7 +375,7 @@ export const Tooltip: FC<TooltipProps> = ({text, children, idealPosition, includ
                   borderRadius: theme.radius.default,
                 }}
                 testID="tooltip-container"
-                onPress={() => setVisible(false)}
+                onPress={hideTooltip}
               >
                 <Text color="inverted" size="sm">
                   {text}
@@ -375,6 +396,7 @@ export const Tooltip: FC<TooltipProps> = ({text, children, idealPosition, includ
           handleHoverOut();
           (children.props as ChildrenProps).onHoverOut?.();
         }}
+        onPress={isWeb ? handleClick : undefined}
         onTouchStart={handleTouchStart}
         {...(!isWeb && mobilePressProps)}
       >

package/src/Unifier.ts

@@ -6,7 +6,7 @@ import * as Clipboard from "expo-clipboard";
 import * as Haptics from "expo-haptics";
 import {Dimensions, Keyboard, Linking, Platform, Vibration} from "react-native";
 
-import {FernsTheme, PermissionKind} from "./Common";
+import {PermissionKind} from "./Common";
 import {requestPermissions} from "./Permissions";
 
 declare global {
@@ -61,8 +61,6 @@ export function changeColorLuminance(hex: string, luminanceChange: Luminance) {
 }
 
 class UnifierClass {
-  private _theme?: Partial<FernsTheme>;
-
   private _web = false;
 
   private _dev = false;

package/src/Utilities.tsx

@@ -18,8 +18,7 @@ export function mergeInlineStyles(inlineStyle?: any, newStyle?: any) {
 
 export function isTestUser(profile?: BaseProfile) {
   return (
-    profile &&
-    profile.email &&
+    profile?.email &&
     (profile.email.indexOf("nang.io") > -1 || profile.email.indexOf("example.com") > -1)
   );
 }
@@ -57,7 +56,7 @@ order in which you do so doesn't really matter.
 */
 
 interface InlineStyle {
-  [key: string]: string | number | void;
+  [key: string]: string | number | undefined;
 }
 
 // TODO: This type should be opaque, however the Babel parser doesn't support
@@ -318,7 +317,7 @@ export function formattedCountyCode(state: string, countyName: string): string {
 }
 
 export function isAPIError(error: any): error is APIError {
-  return error && error.data?.title;
+  return error?.data?.title;
 }
 
 export function printAPIError(error: APIError, details = true): string {

package/src/WebAddressAutocomplete.tsx

@@ -7,7 +7,7 @@ import {processAddressComponents} from "./Utilities";
 
 const loadGooglePlacesScript = (googleMapsApiKey: string, callbackName: any): Promise<void> => {
   return new Promise<void>((resolve, reject): undefined => {
-    if (window.google && window.google.maps && window.google.maps.places) {
+    if (window.google?.maps?.places) {
       resolve();
       return;
     }