ferns-ui 1.12.0 → 1.14.0

package/src/Slider.tsx

@@ -1,6 +1,5 @@
 import SliderComponent from "@react-native-community/slider";
 import React, {FC} from "react";
-import {View} from "react-native";
 
 import {Box} from "./Box";
 import {IconName, SliderProps, ValueMappingItem} from "./Common";
@@ -16,11 +15,11 @@ const getCurrentMapping = (map: ValueMappingItem[], value: number) => {
   if (!map || map.length === 0) {
     return null;
   }
-  
+
   // Find the option with the closest value
   let closestOption = map[0];
   let closestDistance = Math.abs(value - closestOption.value);
-  
+
   for (const option of map) {
     const distance = Math.abs(value - option.value);
     if (distance < closestDistance) {
@@ -28,7 +27,7 @@ const getCurrentMapping = (map: ValueMappingItem[], value: number) => {
       closestOption = option;
     }
   }
-  
+
   return closestOption;
 };
 
@@ -49,9 +48,9 @@ const getCenterContent = (
       </Text>
     );
   }
-  
+
   const currentOption = getCurrentMapping(valueMapping, value);
-  
+
   if (useIcons) {
     return (
       <Icon
@@ -61,7 +60,7 @@ const getCenterContent = (
       />
     );
   }
-  
+
   return (
     <Text align="center" color={disabled ? "secondaryLight" : "primary"} size="2xl">
       {currentOption?.label}
@@ -72,7 +71,7 @@ const getCenterContent = (
 const getSliderContent = (
   slider: React.ReactElement,
   inlineLabels: boolean,
-  labels?: SliderProps['labels']
+  labels?: SliderProps["labels"]
 ): React.ReactElement => {
   if (inlineLabels && labels?.min && labels?.max) {
     return (
@@ -154,9 +153,9 @@ export const Slider: FC<SliderProps> = ({
     thumbStyle: {
       width: 48,
       height: 48,
-      backgroundColor: 'white',
+      backgroundColor: "white",
       borderRadius: 24,
-      shadowColor: '#000',
+      shadowColor: "#000",
       shadowOffset: {
         width: 0,
         height: 2,
@@ -189,11 +188,7 @@ export const Slider: FC<SliderProps> = ({
     <Box>
       {Boolean(title) && <FieldTitle text={title!} />}
       <Box direction="column" gap={showSelection ? 2 : 0}>
-        {showSelection && (
-          <Box alignItems="center">
-            {centerContent}
-          </Box>
-        )}
+        {showSelection && <Box alignItems="center">{centerContent}</Box>}
         {sliderContent}
       </Box>
       {Boolean(helperText && !errorText) && <FieldHelperText text={helperText!} />}
@@ -201,5 +196,3 @@ export const Slider: FC<SliderProps> = ({
     </Box>
   );
 };
-
-

package/src/SplitPage.native.tsx

@@ -9,7 +9,6 @@ import {SplitPageProps} from "./Common";
 import {FlatList} from "./FlatList";
 import {IconButton} from "./IconButton";
 import {Spinner} from "./Spinner";
-import {useTheme} from "./Theme";
 import {Unifier} from "./Unifier";
 
 export const SplitPage = ({
@@ -26,7 +25,6 @@ export const SplitPage = ({
   bottomNavBarHeight,
   showItemList,
 }: SplitPageProps) => {
-  const {theme} = useTheme();
   const [selectedId, setSelectedId] = useState<number | undefined>(undefined);
 
   // flattenChildren is necessary to pull children from a React Fragment. Without this,
@@ -92,7 +90,7 @@ export const SplitPage = ({
           paddingBottom: bottomNavBarHeight,
         }}
       >
-        {renderListViewHeader && renderListViewHeader()}
+        {renderListViewHeader?.()}
         <FlatList
           data={listViewData}
           extraData={listViewExtraData}
@@ -117,7 +115,7 @@ export const SplitPage = ({
             onClick={() => onItemDeselect()}
           />
         </Box>
-        {renderContent && renderContent(selectedId)}
+        {renderContent?.(selectedId)}
       </Box>
     );
   };

package/src/SplitPage.tsx

@@ -95,7 +95,7 @@ export const SplitPage = ({
           flexDirection: "column",
         }}
       >
-        {renderListViewHeader && renderListViewHeader()}
+        {renderListViewHeader?.()}
         <FlatList
           data={listViewData}
           extraData={listViewExtraData}
@@ -109,7 +109,7 @@ export const SplitPage = ({
   const renderListContent = () => {
     return (
       <Box flex="grow" padding={2}>
-        {renderContent && renderContent(selectedId)}
+        {renderContent?.(selectedId)}
       </Box>
     );
   };
@@ -205,7 +205,7 @@ export const SplitPage = ({
           flexDirection: "column",
         }}
       >
-        {renderListViewHeader && renderListViewHeader()}
+        {renderListViewHeader?.()}
         <FlatList
           data={listViewData}
           extraData={listViewExtraData}
@@ -234,7 +234,7 @@ export const SplitPage = ({
             />
           </Box>
         )}
-        {renderContent && renderContent(selectedId)}
+        {renderContent?.(selectedId)}
       </Box>
     );
   };

package/src/TapToEdit.tsx

@@ -13,11 +13,7 @@ const TapToEditTitle: FC<{
   onlyShowHelperTextWhileEditing?: boolean;
   title: string;
   helperText?: string;
-}> = ({
-  title,
-  helperText,
-  onlyShowHelperTextWhileEditing,
-}) => {
+}> = ({title, helperText, onlyShowHelperTextWhileEditing}) => {
   return (
     <View style={{flex: 1, justifyContent: "center"}}>
       <Text bold>{title}</Text>
@@ -117,7 +113,7 @@ export const TapToEdit: FC<TapToEditProps> = ({
         </View>
         <View style={{gap: 16}}>
           <Field
-            grow={fieldProps?.type === "textarea" ? fieldProps.grow ?? true : undefined}
+            grow={fieldProps?.type === "textarea" ? (fieldProps.grow ?? true) : undefined}
             helperText={helperText}
             inputRef={
               ["text", "textarea", "url", "email", "number"].includes(fieldProps?.type)
@@ -210,7 +206,7 @@ export const TapToEdit: FC<TapToEditProps> = ({
         try {
           const url = new URL(value);
           displayValue = url?.hostname ?? value;
-        } catch (error) {
+        } catch (_error) {
           // Don't print an error message for empty values.
           if (value) {
             console.debug(`Invalid URL: $value`);

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;
     }