@jobber/components-native 0.95.4-improve-co-ca924fd.14 → 0.95.4

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

@@ -1,3 +1,7 @@
 import React from "react";
+import type { Modalize } from "react-native-modalize";
 import type { ContentOverlayProps } from "./types";
-export declare function ContentOverlay({ children, title, accessibilityLabel, fullScreen, showDismiss, isDraggable, adjustToContentHeight, keyboardShouldPersistTaps, scrollEnabled, modalBackgroundColor, onClose, onOpen, onBeforeExit, loading, ref, }: ContentOverlayProps): React.JSX.Element;
+export declare const ContentOverlay: React.ForwardRefExoticComponent<ContentOverlayProps & React.RefAttributes<{
+    open?: Modalize["open"];
+    close?: Modalize["close"];
+} | undefined>>;

package/dist/types/src/ContentOverlay/ContentOverlay.style.d.ts

@@ -1,33 +1,32 @@
 export declare const useStyles: () => {
-    handleWrapper: {
-        paddingBottom: number;
-        paddingTop: number;
-    };
     handle: {
         width: number;
         height: number;
         backgroundColor: string;
+        top: number;
         borderRadius: number;
     };
-    backdrop: {
+    overlay: {
         backgroundColor: string;
     };
-    background: {
+    modal: {
         borderTopLeftRadius: number;
         borderTopRightRadius: number;
     };
+    modalForLargeScreens: {
+        width: number;
+        alignSelf: "center";
+    };
     header: {
         flexDirection: "row";
+        backgroundColor: string;
+        paddingTop: number;
         zIndex: number;
-        minHeight: number;
         borderTopLeftRadius: number;
         borderTopRightRadius: number;
+        minHeight: number;
     };
     headerShadow: {
-        position: "absolute";
-        top: number;
-        height: number;
-        width: "100%";
         shadowColor: string;
         shadowOffset: {
             width: number;

package/dist/types/src/ContentOverlay/UNSAFE_WrappedModalize.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { IHandles } from "react-native-modalize/lib/options";
+export declare const UNSAFE_WrappedModalize: React.ForwardRefExoticComponent<Omit<import("react-native-modalize/lib/options").IProps<any> & React.RefAttributes<any>, "ref"> & React.RefAttributes<IHandles | undefined>>;

package/dist/types/src/ContentOverlay/index.d.ts

@@ -1,3 +1,2 @@
 export { ContentOverlay } from "./ContentOverlay";
-export { ContentOverlayProvider } from "./ContentOverlayProvider";
 export type { ContentOverlayRef, ModalBackgroundColor } from "./types";

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

@@ -1,4 +1,5 @@
-import type { ReactNode, Ref } from "react";
+import type { ReactNode } from "react";
+import type { Modalize } from "react-native-modalize";
 export interface ContentOverlayProps {
     /**
      * Content to be passed into the overlay
@@ -63,18 +64,24 @@ export interface ContentOverlayProps {
      * Callback that is called between overlay is closed and when the "x" button is pressed
      */
     readonly onBeforeExit?: () => void;
+    /**
+     * Define the behavior of the keyboard when having inputs inside the modal.
+     * @default padding
+     */
+    readonly keyboardAvoidingBehavior?: "height" | "padding" | "position";
     /**
      * Boolean to show a disabled state
      * @default false
      */
     readonly loading?: boolean;
     /**
-     * Ref to the content overlay component.
+     * Define keyboard's Android behavior like iOS's one.
+     * @default Platform.select({ ios: true, android: false })
      */
-    readonly ref?: Ref<ContentOverlayRef>;
+    readonly avoidKeyboardLikeIOS?: boolean;
 }
 export type ModalBackgroundColor = "surface" | "background";
 export type ContentOverlayRef = {
-    open?: () => void;
-    close?: () => void;
+    open?: Modalize["open"];
+    close?: Modalize["close"];
 } | undefined;

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

@@ -82,7 +82,11 @@ export interface InputFieldWrapperProps {
      * Change the type of loading indicator to spinner or glimmer.
      */
     readonly loadingType?: "spinner" | "glimmer";
+    /**
+     * Whether the input is a multiline input.
+     */
+    readonly multiline?: boolean;
 }
 export declare const INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID = "ATL-InputFieldWrapper-Glimmers";
 export declare const INPUT_FIELD_WRAPPER_SPINNER_TEST_ID = "ATL-InputFieldWrapper-Spinner";
-export declare function InputFieldWrapper({ invalid, disabled, placeholder, assistiveText, prefix, suffix, placeholderMode, hasValue, error, focused, children, onClear, showClearAction, styleOverride, toolbar, toolbarVisibility, loading, loadingType, }: InputFieldWrapperProps): React.JSX.Element;
+export declare function InputFieldWrapper({ invalid, disabled, placeholder, assistiveText, prefix, suffix, placeholderMode, hasValue, error, focused, children, onClear, showClearAction, styleOverride, toolbar, toolbarVisibility, loading, loadingType, multiline, }: InputFieldWrapperProps): React.JSX.Element;

package/jestSetup.js

@@ -16,8 +16,6 @@ jest.mock("./dist/src/Button/components/InternalButtonLoading", () => {
   };
 });
 
-// NOTE: this is the old way we used to mock reanimated. We actually do not need to mock it anymore.
-// To ensure correct test behaviour, please add `jest.unmock("react-native-reanimated")` to your test suite.
 jest.mock("react-native-reanimated", () => {
   const reanimated = require("react-native-reanimated/mock");
   const timing = () => ({ start: () => undefined });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.95.4-improve-co-ca924fd.14+ca924fd5a",
+  "version": "0.95.4",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -44,8 +44,9 @@
     "deepmerge": "^4.2.2",
     "lodash": "^4.17.21",
     "react-hook-form": "^7.52.0",
-    "react-intl": "^6 || ^7",
+    "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",
     "react-native-toast-message": "^2.1.6",
     "react-native-uuid": "^1.4.9",
@@ -89,10 +90,11 @@
     "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",
     "react-native-portalize": "^1.0.7",
     "react-native-reanimated": "^3.0.0",
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "ca924fd5a3a8d378218db75aa5b9233c46e7c256"
+  "gitHead": "7ebeebd8f3798c54d5c1b3399f25bac554768e3d"
 }

package/src/ContentOverlay/ContentOverlay.style.ts

@@ -2,43 +2,43 @@ import { buildThemedStyles } from "../AtlantisThemeContext";
 
 export const useStyles = buildThemedStyles(tokens => {
   const modalBorderRadius = tokens["radius-larger"];
+  const titleOffsetFromHandle = tokens["space-base"];
 
   return {
-    handleWrapper: {
-      paddingBottom: tokens["space-smallest"],
-      paddingTop: tokens["space-small"],
-    },
-
     handle: {
       width: tokens["space-largest"],
       height: tokens["space-smaller"] + tokens["space-smallest"],
       backgroundColor: tokens["color-border"],
+      top: tokens["space-small"],
       borderRadius: tokens["radius-circle"],
     },
 
-    backdrop: {
+    overlay: {
       backgroundColor: tokens["color-overlay"],
     },
 
-    background: {
+    modal: {
       borderTopLeftRadius: modalBorderRadius,
       borderTopRightRadius: modalBorderRadius,
     },
 
+    modalForLargeScreens: {
+      width: 640,
+      alignSelf: "center",
+    },
+
     header: {
       flexDirection: "row",
+      backgroundColor: tokens["color-surface"],
+      paddingTop: titleOffsetFromHandle,
       zIndex: tokens["elevation-base"],
-      minHeight: tokens["space-extravagant"] - tokens["space-base"],
       borderTopLeftRadius: modalBorderRadius,
       borderTopRightRadius: modalBorderRadius,
+      minHeight: tokens["space-extravagant"],
     },
 
     headerShadow: {
       ...tokens["shadow-base"],
-      position: "absolute",
-      top: -20,
-      height: 20,
-      width: "100%",
     },
 
     childrenStyle: {

package/src/ContentOverlay/ContentOverlay.test.tsx

@@ -1,41 +1,27 @@
 import React, { createRef } from "react";
-import {
-  act,
-  render,
-  screen,
-  userEvent,
-  waitFor,
-} from "@testing-library/react-native";
+import { fireEvent, render, waitFor } from "@testing-library/react-native";
 import { AccessibilityInfo, View } from "react-native";
+import { Host } from "react-native-portalize";
 import type { ReactTestInstance } from "react-test-renderer";
+import { act } from "react-test-renderer";
 import type { ContentOverlayRef, ModalBackgroundColor } from "./types";
 import { ContentOverlay } from "./ContentOverlay";
-import { ContentOverlayProvider } from "./ContentOverlayProvider";
 import { tokens } from "../utils/design";
 import { Button } from "../Button";
 import { Content } from "../Content";
 import { Text } from "../Text";
 
 jest.unmock("../hooks/useIsScreenReaderEnabled");
-jest.unmock("react-native-reanimated");
-jest.unmock("@gorhom/bottom-sheet");
-jest.mock("@gorhom/bottom-sheet/lib/commonjs/hooks/useAnimatedLayout", () => ({
-  // Fix for reanimated not actually running in the test environment.
-  useAnimatedLayout: () => {
-    const value = {
-      containerHeight: 600,
-      rawContainerHeight: 600,
-      handleHeight: 24,
-      footerHeight: 0,
-      contentHeight: 400,
-      containerOffset: { top: 0, bottom: 0, left: 0, right: 0 },
-    };
-
-    return { value, get: () => value };
-  },
-}));
 
-const user = userEvent.setup();
+function fireLayoutEvent(childrenContent: ReactTestInstance) {
+  fireEvent(childrenContent, "onLayout", {
+    nativeEvent: {
+      layout: {
+        height: 100,
+      },
+    },
+  });
+}
 
 interface testRendererOptions {
   text: string;
@@ -58,6 +44,12 @@ function getDefaultOptions(): testRendererOptions {
     fullScreen: false,
     showDismiss: false,
     modalBackgroundColor: "surface",
+    onCloseCallback: () => {
+      return;
+    },
+    onOpenCallback: () => {
+      return;
+    },
   };
 }
 
@@ -77,8 +69,8 @@ function renderContentOverlay(
 ) {
   const contentOverlayRef = createRef<ContentOverlayRef>();
 
-  render(
-    <ContentOverlayProvider>
+  const renderResult = render(
+    <Host>
       <View>
         <Text>I am a bunch of text</Text>
         <Button
@@ -103,31 +95,32 @@ function renderContentOverlay(
           </Content>
         </ContentOverlay>
       </View>
-    </ContentOverlayProvider>,
+    </Host>,
   );
+
+  const childrenView = renderResult.getByTestId("ATL-Overlay-Children");
+  fireLayoutEvent(childrenView);
+  const headerComponent = renderResult.getByTestId("ATL-Overlay-Header");
+  fireLayoutEvent(headerComponent);
+
+  return renderResult;
 }
 
 async function renderAndOpenContentOverlay(
   defaultOptions = getDefaultOptions(),
 ) {
-  jest.useFakeTimers();
-  const props = {
-    onOpenCallback: jest.fn(),
-    onCloseCallback: jest.fn(),
-    ...defaultOptions,
-  };
+  const rendered = renderContentOverlay(defaultOptions);
 
-  renderContentOverlay(props);
-
-  await user.press(screen.getByLabelText(defaultOptions.buttonLabel));
   await act(async () => {
-    jest.runAllTimers();
+    fireEvent.press(rendered.getByLabelText(defaultOptions.buttonLabel));
   });
 
+  // Wait for the modal to open asynchronously (due to requestAnimationFrame)
   await waitFor(() => {
-    expect(screen.getByTestId("ATL-Overlay-Header")).toBeDefined();
-    expect(props.onOpenCallback).toHaveBeenCalledTimes(1);
+    expect(rendered.getByTestId("ATL-Overlay-Header")).toBeDefined();
   });
+
+  return rendered;
 }
 
 describe("when open is called on the content overlay ref", () => {
@@ -136,9 +129,9 @@ describe("when open is called on the content overlay ref", () => {
       ...getDefaultOptions(),
       text: "I am text within the content overlay",
     };
-    await renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
 
-    expect(screen.getByText(options.text)).toBeDefined();
+    expect(contentOverlayScreen.getByText(options.text)).toBeDefined();
   });
 });
 
@@ -149,16 +142,16 @@ describe("when the close button is clicked on an open content overlay", () => {
       text: "I am text within the content overlay",
       showDismiss: true,
     };
-    await renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
 
-    const closeButton = await screen.findByTestId("ATL-Overlay-CloseButton");
-    await user.press(closeButton);
     await act(async () => {
-      jest.runAllTimers();
+      fireEvent.press(
+        contentOverlayScreen.getByTestId("ATL-Overlay-CloseButton"),
+      );
     });
 
     await waitFor(() => {
-      expect(screen.queryByText(options.text)).toBeNull();
+      expect(contentOverlayScreen.queryByText(options.text)).toBeNull();
     });
   });
 });
@@ -170,12 +163,12 @@ describe("when the close button is clicked on an open content overlay with a def
       onCloseCallback: jest.fn(),
       showDismiss: true,
     };
-    await renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
 
-    const closeButton = await screen.findByTestId("ATL-Overlay-CloseButton");
-    await user.press(closeButton);
     await act(async () => {
-      jest.runAllTimers();
+      fireEvent.press(
+        contentOverlayScreen.getByTestId("ATL-Overlay-CloseButton"),
+      );
     });
 
     await waitFor(() => {
@@ -220,9 +213,9 @@ describe("when title prop passed to content overlay", () => {
       ...getDefaultOptions(),
       title: "Awesome Title",
     };
-    await renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
 
-    expect(screen.getByText(options.title)).toBeDefined();
+    expect(contentOverlayScreen.getByText(options.title)).toBeDefined();
   });
 });
 
@@ -233,9 +226,11 @@ describe("when accessibilityLabel prop passed to content overlay", () => {
       a11yLabel: "Awesome a11y Label",
       showDismiss: true,
     };
-    await renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
 
-    expect(screen.getByLabelText(options.a11yLabel || "ohno")).toBeDefined();
+    expect(
+      contentOverlayScreen.getByLabelText(options.a11yLabel || "ohno"),
+    ).toBeDefined();
   });
 });
 
@@ -246,10 +241,10 @@ describe("when accessibilityLabel prop NOT passed to content overlay", () => {
       title: "Awesome Title",
       showDismiss: true,
     };
-    await renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
 
     expect(
-      screen.getAllByLabelText(`Close ${options.title} modal`),
+      contentOverlayScreen.getAllByLabelText(`Close ${options.title} modal`),
     ).toHaveLength(2);
   });
 });
@@ -263,9 +258,11 @@ describe("when there is a screen reader enabled", () => {
     const options: testRendererOptions = {
       ...getDefaultOptions(),
     };
-    await renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
 
-    expect(await screen.findByTestId("ATL-Overlay-CloseButton")).toBeDefined();
+    expect(
+      await contentOverlayScreen.findByTestId("ATL-Overlay-CloseButton"),
+    ).toBeDefined();
   });
 });
 
@@ -275,8 +272,10 @@ describe("when fullScreen is set to true", () => {
       ...getDefaultOptions(),
       fullScreen: true,
     };
-    await renderAndOpenContentOverlay(options);
-    expect(screen.getByTestId("ATL-Overlay-CloseButton")).toBeDefined();
+    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
+    expect(
+      contentOverlayScreen.getByTestId("ATL-Overlay-CloseButton"),
+    ).toBeDefined();
   });
 });
 
@@ -286,8 +285,10 @@ describe("when showDismiss is set to true", () => {
       ...getDefaultOptions(),
       showDismiss: true,
     };
-    await renderAndOpenContentOverlay(options);
-    expect(screen.getByTestId("ATL-Overlay-CloseButton")).toBeDefined();
+    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
+    expect(
+      contentOverlayScreen.getByTestId("ATL-Overlay-CloseButton"),
+    ).toBeDefined();
   });
 });
 
@@ -298,9 +299,13 @@ describe("when the close button is clicked on an open content overlay with a def
       onBeforeExitCallback: jest.fn(),
       showDismiss: true,
     };
-    await renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
 
-    await user.press(screen.getByTestId("ATL-Overlay-CloseButton"));
+    await act(async () => {
+      fireEvent.press(
+        contentOverlayScreen.getByTestId("ATL-Overlay-CloseButton"),
+      );
+    });
 
     await waitFor(() => {
       expect(options.onBeforeExitCallback).toHaveBeenCalled();
@@ -314,9 +319,10 @@ describe("modalBackgroundColor prop", () => {
       const options: testRendererOptions = {
         ...getDefaultOptions(),
       };
-      await renderAndOpenContentOverlay(options);
-      const OverlayHeader = screen.getByTestId("ATL-Overlay-Header")
-        .children[0] as ReactTestInstance;
+      const contentOverlayScreen = await renderAndOpenContentOverlay(options);
+      const OverlayHeader = contentOverlayScreen.getByTestId(
+        "ATL-Overlay-Header",
+      ).children[0] as ReactTestInstance;
       const OverlayHeaderStyles = OverlayHeader.props.style;
 
       expect(OverlayHeaderStyles).toEqual(
@@ -343,9 +349,10 @@ describe("modalBackgroundColor prop", () => {
         ...getDefaultOptions(),
         modalBackgroundColor: "background",
       };
-      await renderAndOpenContentOverlay(options);
-      const OverlayHeader = screen.getByTestId("ATL-Overlay-Header")
-        .children[0] as ReactTestInstance;
+      const contentOverlayScreen = await renderAndOpenContentOverlay(options);
+      const OverlayHeader = contentOverlayScreen.getByTestId(
+        "ATL-Overlay-Header",
+      ).children[0] as ReactTestInstance;
       const OverlayHeaderStyles = OverlayHeader.props.style;
 
       expect(OverlayHeaderStyles).toEqual(
@@ -358,88 +365,3 @@ describe("modalBackgroundColor prop", () => {
     });
   });
 });
-
-describe("scrollEnabled prop", () => {
-  describe("when scrollEnabled is false (default)", () => {
-    it("should render content in BottomSheetView", async () => {
-      const options: testRendererOptions = {
-        ...getDefaultOptions(),
-      };
-      await renderAndOpenContentOverlay(options);
-
-      expect(screen.getByText(options.text)).toBeDefined();
-      expect(screen.getByTestId("ATL-Overlay-Children")).toBeDefined();
-    });
-  });
-});
-
-describe("loading prop", () => {
-  describe("when loading is true", () => {
-    it("should show subdued heading text", async () => {
-      const overlayRef = createRef<ContentOverlayRef>();
-
-      render(
-        <ContentOverlayProvider>
-          <View>
-            <ContentOverlay
-              ref={overlayRef}
-              title="Loading Overlay"
-              loading={true}
-              showDismiss={true}
-            >
-              <Text>Loading content</Text>
-            </ContentOverlay>
-          </View>
-        </ContentOverlayProvider>,
-      );
-
-      await act(async () => {
-        overlayRef.current?.open?.();
-      });
-
-      await waitFor(() => {
-        expect(screen.getByText("Loading Overlay")).toBeDefined();
-      });
-    });
-  });
-});
-
-describe("onBeforeExit callback", () => {
-  describe("when close button is pressed with onBeforeExit defined", () => {
-    it("should call onBeforeExit instead of immediately closing", async () => {
-      const overlayRef = createRef<ContentOverlayRef>();
-      const onBeforeExitCallback = jest.fn();
-
-      render(
-        <ContentOverlayProvider>
-          <View>
-            <ContentOverlay
-              ref={overlayRef}
-              title="Confirmation Required"
-              onBeforeExit={onBeforeExitCallback}
-              showDismiss={true}
-            >
-              <Text>Must confirm to close</Text>
-            </ContentOverlay>
-          </View>
-        </ContentOverlayProvider>,
-      );
-
-      await act(async () => {
-        overlayRef.current?.open?.();
-      });
-
-      await waitFor(() => {
-        expect(screen.getByText("Must confirm to close")).toBeDefined();
-      });
-
-      const closeButton = screen.getByTestId("ATL-Overlay-CloseButton");
-      await user.press(closeButton);
-
-      await waitFor(() => {
-        expect(onBeforeExitCallback).toHaveBeenCalled();
-        expect(screen.getByText("Must confirm to close")).toBeDefined();
-      });
-    });
-  });
-});