@jobber/components-native 0.87.1 → 0.88.0

package/dist/types/src/InputText/InputText.d.ts

@@ -1,6 +1,6 @@
 import type { SyntheticEvent } from "react";
 import React from "react";
-import type { NativeSyntheticEvent, StyleProp, TextInputFocusEventData, TextInputProps, TextStyle } from "react-native";
+import type { FocusEvent, StyleProp, TextInputProps, TextStyle } from "react-native";
 import { TextInput } from "react-native";
 import type { RegisterOptions } from "react-hook-form";
 import type { IconNames } from "@jobber/design";
@@ -65,7 +65,7 @@ export interface InputTextProps extends Pick<InputFieldWrapperProps, "toolbar" |
      * Callback that is called when the text input is focused
      * @param event
      */
-    readonly onFocus?: (event?: NativeSyntheticEvent<TextInputFocusEventData>) => void;
+    readonly onFocus?: (event?: FocusEvent) => void;
     /**
      * Callback that is called when the text input is blurred
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.87.1",
+  "version": "0.88.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -44,7 +44,7 @@
     "deepmerge": "^4.2.2",
     "lodash": "^4.17.21",
     "react-hook-form": "^7.52.0",
-    "react-intl": "^6.4.2",
+    "react-intl": "^7.1.11",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-modalize": "^2.0.13",
     "react-native-portalize": "^1.0.7",
@@ -53,28 +53,27 @@
     "ts-xor": "^1.1.0"
   },
   "devDependencies": {
-    "@react-native-community/datetimepicker": "^7.1.0",
+    "@react-native-community/datetimepicker": "^8.4.5",
+    "@react-native/babel-preset": "^0.81.1",
     "@storybook/addon-a11y": "^9.1.2",
     "@storybook/react": "^9.1.2",
     "@storybook/react-native-web-vite": "^9.1.2",
-    "@testing-library/jest-native": "^5.4.2",
-    "@testing-library/react-native": "^12.0.1",
+    "@testing-library/react-native": "^13.3.3",
     "@types/lodash.chunk": "^4.2.7",
     "@types/lodash.debounce": "^4.0.7",
     "@types/lodash.identity": "^3.0.7",
-    "@types/react": "^18.0.28",
     "@types/react-native-uuid": "^1.4.0",
+    "@types/react-test-renderer": "19.1.0",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
-    "metro-react-native-babel-preset": "^0.76.0",
-    "react-native": "^0.77.0",
-    "react-native-gesture-handler": "^2.10.2",
-    "react-native-modal-datetime-picker": "^15.0.1",
+    "react-native": "^0.81.4",
+    "react-native-gesture-handler": "^2.28.0",
+    "react-native-modal-datetime-picker": "^18.0.0",
     "react-native-reanimated": "^3.7.1",
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": "^15.1.0",
     "react-native-web": "^0.20.0",
-    "react-test-renderer": "^18.2.0",
+    "react-test-renderer": "19.1.0",
     "storybook": "^9.1.2"
   },
   "peerDependencies": {
@@ -83,10 +82,10 @@
     "@react-native-community/datetimepicker": ">=6.7.0",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
-    "react": "^18.2.0",
-    "react-intl": "^6.4.2",
-    "react-native": ">=0.76.0",
-    "react-native-gesture-handler": ">=2.10.0",
+    "react": "^18 || ^19.1.0",
+    "react-intl": "^6 || ^7",
+    "react-native": ">=0.79.5",
+    "react-native-gesture-handler": ">=2.22.0",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-modal-datetime-picker": " >=13.0.0",
     "react-native-modalize": "^2.0.13",
@@ -95,5 +94,5 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "a26eb1f7a5e8759d3ffbecbf81f846895c47aad4"
+  "gitHead": "a7bcbd7560c4e86f8db10dfd71b2e3ce5a4f8717"
 }

package/src/AtlantisContext/AtlantisContext.test.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import type { PropsWithChildren } from "react";
 import React from "react";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import type { AtlantisContextProps } from "./AtlantisContext";
 import {
   AtlantisContext,

package/src/AutoLink/AutoLink.test.tsx

@@ -1,12 +1,10 @@
 import React from "react";
 import { fireEvent, render } from "@testing-library/react-native";
+import { Linking } from "react-native";
 import { copyTextToClipboard } from "./clipboard";
 import { AutoLink } from "./AutoLink";
 
-const mockOpenUrl = jest.fn();
-jest.mock("react-native/Libraries/Linking/Linking", () => ({
-  openURL: mockOpenUrl,
-}));
+const mockOpenUrl = jest.spyOn(Linking, "openURL").mockImplementation();
 
 jest.mock("./clipboard", () => {
   return {

package/src/Button/components/InternalButtonLoading/InternalButtonLoading.tsx

@@ -23,7 +23,6 @@ const leftOffset = -1 * offset;
 
 // looks like deprecation for FlatList in reanimated is cascading down to other exports
 // This is not createAnimatedComponent(FlatList), we are fine
-// eslint-disable-next-line import/no-deprecated
 const AnimatedImage = Animated.createAnimatedComponent(ImageBackground);
 
 function InternalButtonLoadingInternal({

package/src/Checkbox/CheckboxGroup.test.tsx

@@ -172,12 +172,8 @@ describe("when the parent checkbox does not have a label", () => {
   it("does not render the parent checkbox", async () => {
     const { checkboxGroup } = setup(undefined);
 
-    const findParentCheckbox = () => {
-      checkboxGroup.getByLabelText(parentCheckboxLabel);
-    };
-    expect(findParentCheckbox).toThrow(
-      "Unable to find an element with accessibilityLabel: all condiments",
-    );
+    const parentCheckbox = checkboxGroup.queryByLabelText(parentCheckboxLabel);
+    expect(parentCheckbox).toBeNull();
   });
 });
 

package/src/ContentOverlay/hooks/useKeyboardVisibility.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook } from "@testing-library/react-hooks";
+import { act, renderHook } from "@testing-library/react-native";
 import type { KeyboardEvent } from "react-native";
 import { DeviceEventEmitter } from "react-native";
 import { useKeyboardVisibility } from "./useKeyboardVisibility";

package/src/ContentOverlay/hooks/useViewLayoutHeight.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook } from "@testing-library/react-hooks";
+import { act, renderHook } from "@testing-library/react-native";
 import type { LayoutChangeEvent } from "react-native";
 import { useViewLayoutHeight } from "./useViewLayoutHeight";
 

package/src/EmptyState/EmptyState.test.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { fireEvent, render } from "@testing-library/react-native";
+import { fireEvent, render, screen } from "@testing-library/react-native";
+import { Path } from "react-native-svg";
 import type { EmptyStateProps } from "./EmptyState";
 import { EmptyState } from "./EmptyState";
-import * as IconComponent from "../Icon/Icon";
 
 const primaryOnPress = jest.fn();
 const secondaryOnPress = jest.fn();
@@ -27,83 +27,70 @@ const component = (overrideProps?: Partial<EmptyStateProps>) => {
     ...overrideProps,
   };
 
-  return render(<EmptyState {...props} />);
+  render(<EmptyState {...props} />);
 };
 
-const iconSpy = jest.spyOn(IconComponent, "Icon");
-
-afterEach(() => jest.clearAllMocks());
-
 describe("EmptyState", () => {
   it("renders the title", () => {
-    const { getByText } = component();
+    component();
 
-    expect(getByText(defaultProps.title)).toBeDefined();
+    expect(screen.getByText(defaultProps.title)).toBeDefined();
   });
 
   it("renders the description", () => {
-    const { getByText } = component();
-
-    expect(getByText(defaultProps.description)).toBeDefined();
-  });
-
-  it("renders the icon", () => {
-    const { getByTestId } = component();
+    component();
 
-    expect(getByTestId(defaultProps.icon)).toBeDefined();
+    expect(screen.getByText(defaultProps.description)).toBeDefined();
   });
 
-  it("calls icon with correct default params", () => {
+  it("renders the icon with default color and large size", () => {
     component();
-
-    expect(iconSpy).toHaveBeenCalledWith(
-      {
-        color: "blue",
-        name: defaultProps.icon,
-        size: "large",
-      },
-      {},
+    const icon = screen.getByTestId(defaultProps.icon);
+    const path = icon.findByType(Path);
+    expect(path.props.fill).toBe("hsl(197, 90%, 12%)");
+    expect(icon.props.style).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          width: 32,
+          height: 32,
+        }),
+      ]),
     );
   });
 
-  it("calls icon with correct params", () => {
-    component({ iconColor: "greyBlue", icon: "link" });
+  it("renders the correct icon color when specified", async () => {
+    component({ iconColor: "warning" });
 
-    expect(iconSpy).toHaveBeenCalledWith(
-      {
-        color: "greyBlue",
-        name: "link",
-        size: "large",
-      },
-      {},
-    );
+    const icon = screen.getByTestId(defaultProps.icon);
+    const pathElement = icon.findByType(Path);
+    expect(pathElement.props.fill).toBe("hsl(51, 64%, 49%)");
   });
 
   it("renders the primary action and allows users to interact with it by clicking", () => {
-    const { getByLabelText } = component();
+    component();
 
-    const button = getByLabelText(defaultProps.primaryAction.label);
+    const button = screen.getByLabelText(defaultProps.primaryAction.label);
     expect(button).toBeDefined();
     fireEvent.press(button);
     expect(primaryOnPress).toHaveBeenCalledTimes(1);
   });
 
   it("renders the secondary action and allows users to interact with it by clicking", () => {
-    const { getByLabelText } = component();
+    component();
 
-    const button = getByLabelText(defaultProps.secondaryAction.label);
+    const button = screen.getByLabelText(defaultProps.secondaryAction.label);
     expect(button).toBeDefined();
     fireEvent.press(button);
     expect(secondaryOnPress).toHaveBeenCalledTimes(1);
   });
 
   it("does render buttons if neither primary nor secondary action is passed in", () => {
-    const { queryAllByRole } = component({
+    component({
       description: "No buttons",
       primaryAction: undefined,
       secondaryAction: undefined,
     });
 
-    expect(queryAllByRole("button")).toHaveLength(0);
+    expect(screen.queryAllByRole("button")).toHaveLength(0);
   });
 });

package/src/Form/components/FormMessage/FormMessage.test.tsx

@@ -1,30 +1,41 @@
 import React from "react";
-import { fireEvent, render } from "@testing-library/react-native";
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react-native";
 import { FormMessage } from ".";
 
 describe("FormMessage", () => {
   it("should render null when there are no message to show", () => {
-    const view = render(<FormMessage />);
-    expect(view.toJSON()).toMatchInlineSnapshot(`null`);
+    render(<FormMessage />);
+    expect(screen.toJSON()).toMatchInlineSnapshot(`null`);
   });
 
-  it("should show the message", () => {
-    const { getByText } = render(<FormMessage />);
+  it("should show the message", async () => {
+    render(<FormMessage />);
 
     const description = "🔥";
     FormMessage.show({ description });
-    expect(getByText(description)).toBeDefined();
+    await waitFor(() => {
+      expect(screen.getByText(description)).toBeDefined();
+    });
   });
 
-  it("should close the message", () => {
-    const { getByText, queryByText } = render(<FormMessage />);
+  it("should close the message", async () => {
+    render(<FormMessage />);
 
     const description = "🌚";
     FormMessage.show({ description });
-    expect(getByText(description)).toBeDefined();
+    await waitFor(() => {
+      expect(screen.getByText(description)).toBeDefined();
+    });
 
     FormMessage.close();
-    expect(queryByText(description)).toBeNull();
+    await waitFor(() => {
+      expect(screen.queryByText(description)).toBeNull();
+    });
   });
 
   describe("Opening another message through a message", () => {
@@ -40,33 +51,35 @@ describe("FormMessage", () => {
         },
       });
 
-    it("should show the most recent message", () => {
-      const { getByText, queryByText, getByLabelText } = render(
-        <FormMessage />,
-      );
+    it("should show the most recent message", async () => {
+      render(<FormMessage />);
 
       showMessage();
 
-      expect(getByText(firstMessage)).toBeDefined();
-      expect(queryByText(secondMessage)).toBeNull();
+      await waitFor(() => {
+        expect(screen.getByText(firstMessage)).toBeDefined();
+      });
+      expect(screen.queryByText(secondMessage)).toBeNull();
 
-      fireEvent.press(getByLabelText("Click me"));
+      fireEvent.press(screen.getByLabelText("Click me"));
 
-      expect(getByText(secondMessage)).toBeDefined();
-      expect(queryByText(firstMessage)).toBeNull();
+      expect(screen.getByText(secondMessage)).toBeDefined();
+      expect(screen.queryByText(firstMessage)).toBeNull();
     });
 
-    it("should close the most recent message", () => {
-      const { getByText, queryByText, getByLabelText } = render(
-        <FormMessage />,
-      );
+    it("should close the most recent message", async () => {
+      render(<FormMessage />);
 
       showMessage();
-      fireEvent.press(getByLabelText("Click me"));
+      await waitFor(() => {
+        expect(screen.getByText("Click me")).toBeDefined();
+      });
+      fireEvent.press(screen.getByLabelText("Click me"));
       FormMessage.close();
-
-      expect(getByText(firstMessage)).toBeDefined();
-      expect(queryByText(secondMessage)).toBeNull();
+      await waitFor(() => {
+        expect(screen.getByText(firstMessage)).toBeDefined();
+      });
+      expect(screen.queryByText(secondMessage)).toBeNull();
     });
   });
 });

package/src/Form/context/AtlantisFormContext.test.tsx

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from "react";
 import React from "react";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import type { AtlantisFormContextProps } from "./types";
 import {
   AtlantisFormContext,

package/src/Form/hooks/useScrollToError/useScrollToError.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import { useScrollToError } from "./useScrollToError";
 
 const mockFormState = {
@@ -25,6 +25,7 @@ jest.mock("../../../ErrorMessageWrapper", () => ({
       el: {
         measure: jest.fn((_, callback) => callback()),
         hasErrorMessage: true,
+        accessibilityFocus: jest.fn(),
       },
     },
     register: jest.fn(),

package/src/FormatFile/FormatFile.test.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import type { RenderAPI } from "@testing-library/react-native";
-import { fireEvent, render } from "@testing-library/react-native";
-import { Host } from "react-native-portalize";
+import { fireEvent, render, waitFor } from "@testing-library/react-native";
 import { Alert } from "react-native";
+import { Host } from "react-native-portalize";
 import type { File } from ".";
 import { FormatFile } from ".";
 import {
@@ -117,12 +117,12 @@ function basicRenderTestWithValue() {
       );
     });
 
-    it("renders ProgressBar state advancing with the upload percentage", () => {
+    it("renders ProgressBar state advancing with the upload percentage", async () => {
       jest.useFakeTimers();
       const { getByTestId } = renderFormatFile(file);
       jest.advanceTimersByTime(progressBarAnimationTime);
-      const formatFileInnerProgressBar = getByTestId(
-        "format-file-inner-progress-bar",
+      const formatFileInnerProgressBar = await waitFor(() =>
+        getByTestId("format-file-inner-progress-bar"),
       );
       const innerProgressBarWidth = parseInt(
         formatFileInnerProgressBar.props.style.width,
@@ -226,7 +226,7 @@ function basicRenderTestWithValue() {
       });
 
       it("creates a thumbnail when a media file is used", () => {
-        const expectedCalls = testId.includes("image") ? 2 : 0;
+        const expectedCalls = testId.includes("image") ? 1 : 0;
         expect(mockCreateThumbnail).toHaveBeenCalledTimes(expectedCalls);
       });
     },

package/src/Icon/__snapshots__/Icon.test.tsx.snap

@@ -433,6 +433,13 @@ exports[`renders thumbsDown icon 1`] = `
     ]
   }
   testID="thumbsDown"
+  transform={
+    [
+      {
+        "scaleY": -1,
+      },
+    ]
+  }
   vbHeight={24}
   vbWidth={24}
 >

package/src/InputFieldWrapper/components/Prefix/Prefix.test.tsx

@@ -1,7 +1,8 @@
 import React from "react";
-import { render, renderHook } from "@testing-library/react-native";
+import { render, renderHook, screen } from "@testing-library/react-native";
 import type { TextStyle } from "react-native";
 import type { ReactTestInstance } from "react-test-renderer";
+import { Path } from "react-native-svg";
 import type { PrefixIconProps, PrefixLabelProps } from "./Prefix";
 import {
   PrefixIcon,
@@ -12,9 +13,6 @@ import {
 import { useTypographyStyles } from "../../../Typography";
 import { useStyles } from "../../InputFieldWrapper.style";
 import { tokens } from "../../../utils/design";
-import * as IconComponent from "../../../Icon/Icon";
-
-const iconSpy = jest.spyOn(IconComponent, "Icon");
 
 const mockLabel = "$";
 
@@ -180,13 +178,9 @@ describe("Prefix", () => {
       setupIcon({
         disabled: true,
       });
-      expect(iconSpy).toHaveBeenCalledWith(
-        {
-          customColor: tokens["color-disabled"],
-          name: "invoice",
-        },
-        {},
-      );
+      const icon = screen.getByTestId("invoice");
+      const path = icon.findByType(Path);
+      expect(path.props.fill).toEqual(tokens["color-disabled"]);
     });
   });
 

package/src/InputText/InputText.tsx

@@ -8,10 +8,9 @@ import React, {
   useState,
 } from "react";
 import type {
-  NativeSyntheticEvent,
+  FocusEvent,
   ReturnKeyTypeOptions,
   StyleProp,
-  TextInputFocusEventData,
   TextInputProps,
   TextStyle,
 } from "react-native";
@@ -113,9 +112,7 @@ export interface InputTextProps
    * Callback that is called when the text input is focused
    * @param event
    */
-  readonly onFocus?: (
-    event?: NativeSyntheticEvent<TextInputFocusEventData>,
-  ) => void;
+  readonly onFocus?: (event?: FocusEvent) => void;
 
   /**
    * Callback that is called when the text input is blurred

package/src/ThumbnailList/ThumbnailList.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { fireEvent, render } from "@testing-library/react-native";
+import { fireEvent, render, screen } from "@testing-library/react-native";
 import { Host } from "react-native-portalize";
 import { ThumbnailList } from "./ThumbnailList";
 import type { File } from "../FormatFile/types";
@@ -61,15 +61,15 @@ beforeEach(() => {
 });
 
 it("renders a thumbnail component with attachments", () => {
-  const tree = setup(true);
-  expect(tree.toJSON()).toMatchSnapshot();
+  setup(true);
+  expect(screen.toJSON()).toMatchSnapshot();
 });
 
 describe("when a an array of files is provided", () => {
   it("calls the previewImages util on pressing a valid file", () => {
-    const { getByLabelText } = setup();
+    setup();
     fireEvent.press(
-      getByLabelText(files[0].fileName ? files[0].fileName : "file"),
+      screen.getByLabelText(files[0].fileName ? files[0].fileName : "file"),
     );
     expect(onOpenFile).toHaveBeenCalledTimes(1);
   });