ferns-ui 1.13.0 → 1.15.0

package/src/Text.tsx

@@ -8,7 +8,7 @@ import {
   useFonts,
 } from "@expo-google-fonts/nunito";
 import React from "react";
-import {Platform, Text as NativeText, TextStyle} from "react-native";
+import {Text as NativeText, Platform, TextStyle} from "react-native";
 
 import {TextProps} from "./Common";
 import {Hyperlink} from "./Hyperlink";

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 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} />
       );
@@ -206,7 +205,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/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

@@ -19,20 +19,20 @@ const TOOLTIP_OFFSET = 6;
 // How many pixels to leave between the tooltip and the edge of the screen
 const TOOLTIP_OVERFLOW_PADDING = 20;
 
-type ChildrenMeasurement = {
+interface ChildrenMeasurement {
   width: number;
   height: number;
   pageX: number;
   pageY: number;
-};
+}
 
 // empty object is a fallback for when the tooltip is not measured yet
-type Measurement = {
+interface Measurement {
   children: ChildrenMeasurement | {};
   tooltip: LayoutRectangle | {};
   measured: boolean;
   idealPosition?: TooltipPosition;
-};
+}
 
 const getTooltipPosition = ({
   children,
@@ -182,20 +182,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) {
@@ -258,6 +271,11 @@ export const Tooltip: FC<TooltipProps> = ({text, children, idealPosition, includ
   );
 
   const handleTouchStart = useCallback(() => {
+    if (visible) {
+      hideTooltip();
+      return;
+    }
+
     if (hideTooltipTimer.current) {
       clearTimeout(hideTooltipTimer.current);
     }
@@ -266,7 +284,7 @@ export const Tooltip: FC<TooltipProps> = ({text, children, idealPosition, includ
       touched.current = true;
       setVisible(true);
     }, 100);
-  }, []);
+  }, [hideTooltip, visible]);
 
   const handleHoverIn = useCallback(() => {
     if (hideTooltipTimer.current) {
@@ -280,20 +298,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(() => {
@@ -348,7 +369,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}
@@ -369,6 +390,7 @@ export const Tooltip: FC<TooltipProps> = ({text, children, idealPosition, includ
           handleHoverOut();
           children.props.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;
     }

package/src/index.tsx

@@ -34,6 +34,7 @@ export * from "./ImageBackground";
 export * from "./InfoModalIcon";
 export * from "./InfoTooltipButton";
 export * from "./Link";
+export * from "./MarkdownView";
 export * from "./MediaQuery";
 export * from "./MobileAddressAutoComplete";
 export * from "./Modal";
@@ -59,11 +60,17 @@ export * from "./SignatureField";
 export * from "./Slider";
 export * from "./Spinner";
 export * from "./SplitPage";
+export * from "./TapToEdit";
+export * from "./Text";
+export * from "./TextArea";
+export * from "./TextField";
+export * from "./Theme";
+export * from "./Toast";
+export * from "./Tooltip";
 export * from "./table/Table";
 export * from "./table/Table";
 export * from "./table/TableBadge";
 export * from "./table/TableBoolean";
-export * from "./table/tableContext";
 export * from "./table/TableDate";
 export * from "./table/TableHeader";
 export * from "./table/TableHeaderCell";
@@ -72,19 +79,13 @@ export * from "./table/TableNumber";
 export * from "./table/TableRow";
 export * from "./table/TableText";
 export * from "./table/TableTitle";
-export * from "./TapToEdit";
-export * from "./Text";
-export * from "./TextArea";
-export * from "./TextField";
-export * from "./Theme";
-export * from "./Toast";
-export * from "./Tooltip";
-export * from "./MarkdownView";
+export * from "./table/tableContext";
 export * from "./UnifiedAddressAutoComplete";
 export * from "./Unifier";
-export * from "./useStoredState";
 export * from "./Utilities";
+export * from "./useStoredState";
 export * from "./WebAddressAutocomplete";
+
 // export * from "./Layout";
 // export * from "./Drawer";
 // export * from "./Chart";
@@ -1371,4 +1372,3 @@ export interface Options {
    */
   blurOnUnmount?: boolean;
 }
-export {};

package/src/table/Table.tsx

@@ -68,44 +68,42 @@ export const Table = ({
       sortColumn={sortColumn}
       stickyHeader={stickyHeader}
     >
-      <>
-        <Box
-          flex="grow"
-          maxWidth="100%"
-          style={{
-            position: "relative",
-          }}
-          width={width}
-        >
-          <ScrollView horizontal style={{width, maxWidth: "100%"}}>
-            {/* TODO: Replace table scrollview with flat list */}
-            <ScrollView
-              // nestedScrollEnabled
-              stickyHeaderIndices={stickyHeader ? [0] : undefined}
-              style={{width, maxWidth: "100%", flex: 1, maxHeight}}
-            >
-              {Children.map(
-                children,
-                (child, index) =>
-                  Boolean(child) &&
-                  React.cloneElement(child as ReactElement, {
-                    color: index % 2 === 1 && alternateRowBackground ? "neutralLight" : "base",
-                  })
-              )}
-            </ScrollView>
+      <Box
+        flex="grow"
+        maxWidth="100%"
+        style={{
+          position: "relative",
+        }}
+        width={width}
+      >
+        <ScrollView horizontal style={{width, maxWidth: "100%"}}>
+          {/* TODO: Replace table scrollview with flat list */}
+          <ScrollView
+            // nestedScrollEnabled
+            stickyHeaderIndices={stickyHeader ? [0] : undefined}
+            style={{width, maxWidth: "100%", flex: 1, maxHeight}}
+          >
+            {Children.map(
+              children,
+              (child, index) =>
+                Boolean(child) &&
+                React.cloneElement(child as ReactElement, {
+                  color: index % 2 === 1 && alternateRowBackground ? "neutralLight" : "base",
+                })
+            )}
           </ScrollView>
+        </ScrollView>
+      </Box>
+      {Boolean(shouldPaginate && totalPages !== undefined) && (
+        <Box alignItems="center" borderTop="default" direction="row" height={60} paddingX={8}>
+          <Pagination
+            page={propsPage ?? page}
+            setPage={propsSetPage ?? setPage}
+            totalPages={totalPages!}
+          />
+          {Boolean(extraControls) && extraControls}
         </Box>
-        {Boolean(shouldPaginate && totalPages !== undefined) && (
-          <Box alignItems="center" borderTop="default" direction="row" height={60} paddingX={8}>
-            <Pagination
-              page={propsPage ?? page}
-              setPage={propsSetPage ?? setPage}
-              totalPages={totalPages!}
-            />
-            {Boolean(extraControls) && extraControls}
-          </Box>
-        )}
-      </>
+      )}
     </TableContextProvider>
   );
 };

package/src/table/TableHeaderCell.tsx

@@ -6,8 +6,8 @@ import {View} from "react-native";
 import {Box} from "../Box";
 import {AlignItems, TableHeaderCellProps} from "../Common";
 import {useTheme} from "../Theme";
-import {useTableContext} from "./tableContext";
 import {TableTitle} from "./TableTitle";
+import {useTableContext} from "./tableContext";
 
 /**
  * Use TableHeaderCell to define a header cell in Table.
@@ -48,7 +48,7 @@ export const TableHeaderCell = ({
     if (setSortColumn) {
       setSortColumn(newSort ? {column: index, direction: newSort} : undefined);
     }
-    onSortChange && onSortChange(newSort);
+    onSortChange?.(newSort);
   }, [index, onSortChange, setSortColumn, sort]);
 
   if (sortable && !onSortChange) {

package/src/useStoredState.ts

@@ -22,17 +22,19 @@ export const useStoredState = <T>(
 
   // Fetch data when the component mounts
   useEffect(() => {
-    void fetchData().then((value) => {
-      if (isMounted.current) {
-        setState(value);
-        setIsLoading(false);
-      }
-    }).catch((error) => {
-      console.error("Error fetching data:", error);
-      if (isMounted.current) {
-        setIsLoading(false);
-      }
-    });
+    void fetchData()
+      .then((value) => {
+        if (isMounted.current) {
+          setState(value);
+          setIsLoading(false);
+        }
+      })
+      .catch((error) => {
+        console.error("Error fetching data:", error);
+        if (isMounted.current) {
+          setIsLoading(false);
+        }
+      });
 
     return () => {
       isMounted.current = false;