@jobber/components-native 0.84.4-JOB-134681-8086ad4.25 → 0.84.4-JOB-138679-b1552ab.68

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

@@ -1,3 +1,4 @@
+import React from "react";
 import type { Spacing } from "../Content";
 import type { TextLevel } from "../Text";
 interface TextListProps {
@@ -25,5 +26,5 @@ interface TextListProps {
      */
     readonly childSpacing?: Spacing;
 }
-export declare function TextList({ items, childSpacing, emphasis, level, spacing, }: TextListProps): JSX.Element;
+export declare function TextList({ items, childSpacing, emphasis, level, spacing, }: TextListProps): React.JSX.Element;
 export {};

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

@@ -1,4 +1,5 @@
+import React from "react";
 import type { ThumbnailListProps } from "./types";
 import type { File } from "../FormatFile";
 export declare const filterImages: (files: File[]) => File[];
-export declare function ThumbnailList({ files, rowCount, handleOpenFile, createThumbnail, }: ThumbnailListProps): JSX.Element;
+export declare function ThumbnailList({ files, rowCount, handleOpenFile, createThumbnail, }: ThumbnailListProps): React.JSX.Element;

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

@@ -1,3 +1,4 @@
+import React from "react";
 import type { ToastPosition } from "react-native-toast-message";
 export interface JobberToastProps {
     /**
@@ -7,7 +8,7 @@ export interface JobberToastProps {
      */
     readonly bottomOffset?: number;
 }
-export declare function JobberToast({ bottomOffset }: JobberToastProps): JSX.Element;
+export declare function JobberToast({ bottomOffset }: JobberToastProps): React.JSX.Element;
 export interface ShowToastParams {
     /**
      * Message to be displayed in the toast

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

@@ -24,9 +24,9 @@ export interface TypographyProps<T extends FontFamily> {
      */
     readonly size?: TextSize;
     /**
-     * Text to display
+     * Text to display. Supports nesting text elements.
      */
-    readonly children?: string;
+    readonly children?: React.ReactNode;
     /**
      * The maximum amount of lines the text can occupy before being truncated with "...".
      * Uses predefined string values that correspond to a doubling scale for the amount of lines.
@@ -105,7 +105,7 @@ export interface TypographyUnsafeStyle {
     textStyle?: StyleProp<TextStyle>;
 }
 export declare const Typography: React.MemoExoticComponent<typeof InternalTypography>;
-declare function InternalTypography<T extends FontFamily = "base">({ fontFamily, fontStyle, fontWeight, transform, color, align, size, children, maxLines, allowFontScaling, maxFontScaleSize, adjustsFontSizeToFit, lineHeight, letterSpacing, reverseTheme, hideFromScreenReader, accessibilityRole, strikeThrough, underline, UNSAFE_style, selectable, onTextLayout, }: TypographyProps<T>): JSX.Element;
+declare function InternalTypography<T extends FontFamily = "base">({ fontFamily, fontStyle, fontWeight, transform, color, align, size, children, maxLines, allowFontScaling, maxFontScaleSize, adjustsFontSizeToFit, lineHeight, letterSpacing, reverseTheme, hideFromScreenReader, accessibilityRole, strikeThrough, underline, UNSAFE_style, selectable, onTextLayout, }: TypographyProps<T>): React.JSX.Element;
 export type FontFamily = "base" | "display";
 export type FontStyle = "regular" | "italic";
 export type FontWeight = "regular" | "medium" | "bold" | "semiBold" | "extraBold" | "black";

package/dist/types/src/Typography/TypographyGestureDetector.d.ts

@@ -1,7 +1,8 @@
 import type { PropsWithChildren } from "react";
+import React from "react";
 /**
  * This is a workaround suggested by react-native-gesture-handler to prevent
  * accidental highlighting of text in Android devices
  * https://github.com/software-mansion/react-native-gesture-handler/issues/1372
  */
-export declare function TypographyGestureDetector(props: PropsWithChildren<unknown>): JSX.Element;
+export declare function TypographyGestureDetector(props: PropsWithChildren<unknown>): React.JSX.Element;

package/dist/types/src/utils/test/MockSafeAreaProvider.d.ts

@@ -5,5 +5,5 @@ interface MockSafeAreaProviderProps {
     readonly frame?: Rect;
     readonly insets?: EdgeInsets;
 }
-export declare function MockSafeAreaProvider({ frame, insets, children, }: MockSafeAreaProviderProps): JSX.Element;
+export declare function MockSafeAreaProvider({ frame, insets, children, }: MockSafeAreaProviderProps): React.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.84.4-JOB-134681-8086ad4.25+8086ad474",
+  "version": "0.84.4-JOB-138679-b1552ab.68+b1552ab31",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -32,7 +32,7 @@
     "build": "npm run build:clean && npm run compile",
     "bootstrap": "npm run build",
     "prepack": "npm run build",
-    "compile": "tsc -b",
+    "compile": "tsc -p tsconfig.build.json",
     "build:clean": "rm -rf ./dist",
     "storybook": "storybook dev -p 6008 --disable-telemetry",
     "storybook:build": "storybook build --disable-telemetry"
@@ -43,8 +43,8 @@
     "autolinker": "^4.0.0",
     "deepmerge": "^4.2.2",
     "lodash": "^4.17.21",
-    "react-hook-form": "^7.30.0",
-    "react-intl": "^6.4.2",
+    "react-hook-form": "^7.52.0",
+    "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,18 +53,27 @@
     "ts-xor": "^1.1.0"
   },
   "devDependencies": {
+    "@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",
-    "metro-react-native-babel-preset": "^0.76.0",
-    "react-test-renderer": "^18.2.0",
+    "@types/react-test-renderer": "19.1.0",
+    "date-fns": "^2.30.0",
+    "date-fns-tz": "^2.0.0",
+    "react-native": "^0.82.1",
+    "react-native-gesture-handler": "^2.29.1",
+    "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": "^19.1.1",
     "storybook": "^9.1.2"
   },
   "peerDependencies": {
@@ -73,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": "^19",
+    "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",
@@ -85,5 +94,5 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "8086ad474bae8138621804bd18aed5d9c88dd6bf"
+  "gitHead": "b1552ab319204ce883046ea2c22d875952746675"
 }

package/src/ActionItem/ActionItem.tsx

@@ -61,7 +61,7 @@ export function ActionItem({
   actionIconAlignment = "center",
   onPress,
   testID = "actionItem",
-}: ActionItemProps): JSX.Element {
+}: ActionItemProps) {
   const actionIconStyle = {
     justifyContent: actionIconAlignment,
   };

package/src/ActionItem/ActionItemGroup.tsx

@@ -18,9 +18,7 @@ interface ActionItemGroupProps {
   readonly children: ActionItemElement | ActionItemElement[];
 }
 
-export function ActionItemGroup({
-  children,
-}: ActionItemGroupProps): JSX.Element {
+export function ActionItemGroup({ children }: ActionItemGroupProps) {
   return <View>{renderChildren(children)}</View>;
 }
 

package/src/ActionItem/components/ActionItemContainer.tsx

@@ -16,7 +16,7 @@ export function ActionItemContainer({
   title,
   children,
   testID,
-}: ActionItemContainerProps): JSX.Element {
+}: ActionItemContainerProps) {
   const styles = useStyles();
   const actionItemStyles = useActionItemStyles();
 

package/src/ActionLabel/ActionLabel.test.tsx

@@ -117,6 +117,18 @@ describe("ActionLabel", () => {
       });
     });
   });
+
+  it("supports nested inline content", () => {
+    const { Text } = require("../Text");
+    const { getByText, toJSON } = render(
+      <ActionLabel>
+        Before <Text variation="interactive">Inner</Text> After
+      </ActionLabel>,
+    );
+
+    expect(getByText("Inner")).toBeDefined();
+    expect(toJSON()).toMatchSnapshot();
+  });
 });
 
 function getStyleObject(el: ReactTestInstance) {

package/src/ActionLabel/ActionLabel.tsx

@@ -12,9 +12,9 @@ type ActionLabelType = "default" | "cardTitle";
 
 interface ActionLabelProps {
   /**
-   * Text to display
+   * Text to display. Supports nesting text elements.
    */
-  readonly children?: string;
+  readonly children?: React.ReactNode;
 
   /**
    * Set the display text to disabled color
@@ -43,7 +43,7 @@ export function ActionLabel({
   type = "default",
   disabled = false,
   align = "center",
-}: ActionLabelProps): JSX.Element {
+}: ActionLabelProps) {
   return (
     <Typography
       color={getColor(variation, disabled)}

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

@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActionLabel supports nested inline content 1`] = `
+<Text
+  accessibilityRole="text"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  maxFontSizeMultiplier={1.125}
+  selectable={false}
+  selectionColor="hsl(86, 100%, 46%)"
+  style={
+    [
+      {
+        "fontFamily": "inter-semibold",
+      },
+      {
+        "color": "hsl(107, 58%, 33%)",
+      },
+      {
+        "textAlign": "center",
+      },
+      {
+        "fontSize": 16,
+        "lineHeight": 18,
+      },
+      {
+        "letterSpacing": 0,
+      },
+    ]
+  }
+>
+  Before 
+  <Text
+    accessibilityRole="text"
+    adjustsFontSizeToFit={false}
+    allowFontScaling={true}
+    collapsable={false}
+    maxFontSizeMultiplier={3.125}
+    selectable={true}
+    selectionColor="hsl(86, 100%, 46%)"
+    style={
+      [
+        {
+          "fontFamily": "inter-regular",
+        },
+        {
+          "color": "hsl(107, 58%, 33%)",
+        },
+        {
+          "textAlign": "left",
+        },
+        {
+          "fontSize": 16,
+          "lineHeight": 20,
+        },
+        {
+          "letterSpacing": 0,
+        },
+      ]
+    }
+  >
+    Inner
+  </Text>
+   After
+</Text>
+`;

package/src/ActivityIndicator/ActivityIndicator.tsx

@@ -3,9 +3,7 @@ import type { ActivityIndicatorProps } from "react-native";
 import { ActivityIndicator } from "react-native";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
 
-export function JobberActivityIndicator(
-  props: ActivityIndicatorProps,
-): JSX.Element {
+export function JobberActivityIndicator(props: ActivityIndicatorProps) {
   const { tokens } = useAtlantisTheme();
 
   return (

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/AtlantisThemeContext/AtlantisThemeContext.test.tsx

@@ -51,24 +51,24 @@ describe("ThemeContext", () => {
     expect(result.current.tokens).toEqual(expectedLightTokens);
   });
 
-  it("updates the theme and tokens", () => {
+  it("updates the theme and tokens", async () => {
     const { result } = renderHook(useAtlantisTheme, {
       wrapper: (props: AtlantisThemeContextProviderProps) => (
         <Wrapper {...props} />
       ),
     });
 
-    act(() => result.current.setTheme("dark"));
+    await act(async () => result.current.setTheme("dark"));
     expect(result.current.theme).toBe("dark");
     expect(result.current.tokens).toEqual(expectedDarkTokens);
 
-    act(() => result.current.setTheme("light"));
+    await act(async () => result.current.setTheme("light"));
     expect(result.current.theme).toBe("light");
     expect(result.current.tokens).toEqual(expectedLightTokens);
   });
 
   describe("when theme is forced for provider", () => {
-    it("ignores updates to the global theme", () => {
+    it("ignores updates to the global theme", async () => {
       const { result } = renderHook(useAtlantisTheme, {
         wrapper: (props: AtlantisThemeContextProviderProps) => (
           <WrapperWithOverride {...props} dangerouslyOverrideTheme="light" />
@@ -76,7 +76,7 @@ describe("ThemeContext", () => {
       });
 
       // Update the global theme
-      act(() => result.current.setTheme("dark"));
+      await act(async () => result.current.setTheme("dark"));
 
       // This hook shouldn't be affected by it because it's set to the light theme
       expect(result.current.theme).toBe("light");

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/AutoLink/AutoLink.tsx

@@ -11,7 +11,7 @@ export function AutoLink({
   bottomTabsVisible = true,
   selectable = true,
   ...rest
-}: AutoLinkProps): JSX.Element {
+}: AutoLinkProps) {
   const { splitText, matches } = useCreateLinkedText({ text, ...rest });
   const { tokens } = useAtlantisTheme();
 

package/src/AutoLink/components/ComposeTextWithLinks/ComposeTextWithLinks.tsx

@@ -12,7 +12,7 @@ export function ComposeTextWithLinks({
   match,
   bottomTabsVisible,
   selectable = true,
-}: ComposeTextWithLinksProps): JSX.Element {
+}: ComposeTextWithLinksProps) {
   const { t } = useAtlantisI18n();
 
   const isLink = match?.getType();

package/src/AutoLink/components/Link/Link.tsx

@@ -8,11 +8,7 @@ interface LinkProps {
   readonly onLongPress?: () => void;
 }
 
-export function Link({
-  children,
-  onPress,
-  onLongPress,
-}: LinkProps): JSX.Element {
+export function Link({ children, onPress, onLongPress }: LinkProps) {
   return (
     <RNText onPress={onPress} onLongPress={onLongPress}>
       <Text variation="interactive">{children}</Text>

package/src/Banner/Banner.test.tsx

@@ -35,6 +35,18 @@ describe("Banner", () => {
       expect(getByText("Notice me")).toBeDefined();
       expect(icon.props.children.props.name).toBe("starburst");
     });
+
+    it("renders a success Banner", () => {
+      const { getByText, getByTestId } = render(
+        <Banner type="success">
+          <Text>Your import is complete</Text>
+        </Banner>,
+      );
+
+      const icon = getByTestId("ATL-Banner-Icon");
+      expect(getByText("Your import is complete")).toBeDefined();
+      expect(icon.props.children.props.name).toBe("checkmark");
+    });
   });
 
   describe("Children", () => {

package/src/Banner/Banner.tsx

@@ -18,7 +18,7 @@ export function Banner({
   type,
   children,
   icon,
-}: BannerProps): JSX.Element {
+}: BannerProps) {
   const bannerIcon = icon || getBannerIcon(type);
 
   const shouldFlow =
@@ -60,7 +60,7 @@ export function Banner({
   );
 }
 
-function BannerChildren({ children }: PropsWithChildren): JSX.Element {
+function BannerChildren({ children }: PropsWithChildren) {
   if (!children) return <></>;
 
   if (children && typeof children === "string") {
@@ -97,5 +97,7 @@ function getBannerIcon(type: BannerTypes): IconNames | undefined {
       return "help";
     case "error":
       return "alert";
+    case "success":
+      return "checkmark";
   }
 }

package/src/Banner/components/BannerIcon/BannerIcon.style.ts

@@ -15,5 +15,8 @@ export const useStyles = buildThemedStyles(tokens => {
     notice: {
       backgroundColor: tokens["color-informative"],
     },
+    success: {
+      backgroundColor: tokens["color-success"],
+    },
   };
 });

package/src/Banner/components/BannerIcon/BannerIcon.tsx

@@ -10,7 +10,7 @@ export interface BannerIconProps {
   readonly type: BannerTypes;
 }
 
-export function BannerIcon({ icon, type }: BannerIconProps): JSX.Element {
+export function BannerIcon({ icon, type }: BannerIconProps) {
   const styles = useStyles();
 
   return (

package/src/Banner/types.ts

@@ -2,7 +2,7 @@ import type { IconNames } from "@jobber/design";
 import type { ReactElement } from "react";
 import type { StyleProp, ViewStyle } from "react-native";
 
-export type BannerTypes = "error" | "warning" | "notice";
+export type BannerTypes = "error" | "warning" | "notice" | "success";
 
 export interface BannerStyleProps {
   /**

package/src/BottomSheet/BottomSheet.test.tsx

@@ -43,42 +43,42 @@ function setup({
 }
 
 it("renders a BottomSheet", async () => {
-  const { getByText } = setup({});
+  const { findByText } = setup({});
 
   await waitForUntestableRender(
     "Wait for AccessibilityInfo.isScreenReaderEnabled to resolve",
   );
 
-  act(() => {
+  await act(async () => {
     ref.current?.open();
   });
 
-  expect(getByText("BottomSheet")).toBeDefined();
+  expect(await findByText("BottomSheet")).toBeDefined();
 });
 
 it("renders a BottomSheet with a header", async () => {
   const header = "Hello this is header";
-  const { getByText } = setup({ heading: header });
+  const { findByText } = setup({ heading: header });
 
   await waitForUntestableRender(
     "Wait for AccessibilityInfo.isScreenReaderEnabled to resolve",
   );
 
-  act(() => {
+  await act(async () => {
     ref.current?.open();
   });
 
-  expect(getByText(header)).toBeDefined();
+  expect(await findByText(header)).toBeDefined();
 });
 
 it("BottomSheet can be closed with the cancel action", async () => {
-  const { getByText, queryByText } = setup({ showCancel: true });
+  const { findByLabelText, queryByText } = setup({ showCancel: true });
 
-  act(() => {
+  await act(async () => {
     ref.current?.open();
   });
 
-  fireEvent.press(getByText("Cancel"));
+  fireEvent.press(await findByLabelText("Cancel"));
 
   await waitFor(() => {
     expect(queryByText("BottomSheet")).toBeNull();
@@ -93,7 +93,7 @@ describe("when loading is provided and true", () => {
       "Wait for AccessibilityInfo.isScreenReaderEnabled to resolve",
     );
 
-    act(() => {
+    await act(async () => {
       ref.current?.open();
     });
 
@@ -104,25 +104,25 @@ describe("when loading is provided and true", () => {
 it("calls onClose when BottomSheet is closed", async () => {
   setup({});
 
-  act(() => {
+  await act(async () => {
     ref.current?.open();
     ref.current?.close();
   });
 
   await waitFor(() => {
-    expect(mockOnClose).toHaveBeenCalled();
+    expect(mockOnClose).toHaveBeenCalledTimes(1);
   });
 });
 
 it("calls onOpen when BottomSheet is opened", async () => {
   setup({});
 
-  act(() => {
+  await act(async () => {
     ref.current?.open();
   });
 
   await waitFor(() => {
-    expect(mockOnOpen).toHaveBeenCalled();
+    expect(mockOnOpen).toHaveBeenCalledTimes(1);
   });
 });
 
@@ -132,17 +132,17 @@ describe("when there is a screen reader enabled", () => {
       .spyOn(AccessibilityInfo, "isScreenReaderEnabled")
       .mockImplementation(() => Promise.resolve(true));
 
-    const { getByText, queryByText } = setup({});
+    const { findByLabelText, queryByText } = setup({});
 
     await waitForUntestableRender(
       "Wait for AccessibilityInfo.isScreenReaderEnabled to resolve",
     );
 
-    act(() => {
+    await act(async () => {
       ref.current?.open();
     });
 
-    fireEvent.press(getByText("Cancel"));
+    fireEvent.press(await findByLabelText("Cancel"));
 
     await waitFor(() => {
       expect(queryByText("BottomSheet")).toBeNull();

package/src/BottomSheet/BottomSheet.tsx

@@ -1,10 +1,11 @@
 import type { ReactNode, Ref, RefObject } from "react";
 import React, { forwardRef, useState } from "react";
-import { Modalize } from "react-native-modalize";
+import type { Modalize } from "react-native-modalize";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Keyboard, View } from "react-native";
 import { BottomSheetOption } from "./components/BottomSheetOption";
 import { useStyles } from "./BottomSheet.style";
+import { UNSAFE_WrappedModalize } from "../ContentOverlay/UNSAFE_WrappedModalize";
 import { useIsScreenReaderEnabled } from "../hooks";
 import { Divider } from "../Divider";
 import { Heading } from "../Heading";
@@ -61,7 +62,7 @@ function BottomSheetInternal(
   return (
     <>
       {open && <Overlay styles={styles} />}
-      <Modalize
+      <UNSAFE_WrappedModalize
         ref={ref}
         adjustToContentHeight={true}
         modalStyle={styles.modal}
@@ -90,7 +91,7 @@ function BottomSheetInternal(
         >
           {children}
         </View>
-      </Modalize>
+      </UNSAFE_WrappedModalize>
     </>
   );
 

package/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.tsx

@@ -25,7 +25,7 @@ export function BottomSheetOption({
   destructive,
   textTransform = "capitalize",
   onPress,
-}: BottomSheetOptionProps): JSX.Element {
+}: BottomSheetOptionProps) {
   const destructiveColor = "destructive";
   const textVariation = destructive ? destructiveColor : "subdued";
   const styles = useStyles();

package/src/Button/Button.tsx

@@ -124,7 +124,7 @@ export function Button({
   icon,
   testID,
   UNSAFE_style,
-}: ButtonProps): JSX.Element {
+}: ButtonProps) {
   const { tokens } = useAtlantisTheme();
   const styles = useStyles();