@jobber/components-native 0.88.1-JOB-139048-04134dd.0 → 0.88.1-JOB-136074-020f532.3

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { Modalize } from "react-native-modalize";
+import { Modalize } from "react-native-modalize";
 import type { ContentOverlayProps } from "./types";
 export declare const ContentOverlay: React.ForwardRefExoticComponent<ContentOverlayProps & React.RefAttributes<{
     open?: Modalize["open"];

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

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

package/dist/types/src/Form/context/AtlantisFormContext.d.ts

@@ -5,6 +5,7 @@ export declare const atlantisFormContextDefaultValues: {
         setLocalCache: () => undefined;
         removeLocalCache: () => undefined;
     };
+    edgeToEdgeEnabled: boolean;
 };
 export declare const AtlantisFormContext: import("react").Context<AtlantisFormContextProps>;
 export declare function useAtlantisFormContext(): AtlantisFormContextProps;

package/dist/types/src/Form/context/types.d.ts

@@ -21,5 +21,6 @@ export interface AtlantisFormContextProps {
         setLocalCache: (data: DeepPartial<TData>) => void;
         removeLocalCache: () => void;
     };
+    edgeToEdgeEnabled?: boolean;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.88.1-JOB-139048-04134dd.0+04134dd81",
+  "version": "0.88.1-JOB-136074-020f532.3+020f532a0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -94,5 +94,5 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "04134dd81a80801cb9749c94d92f80b0e1d7c7dc"
+  "gitHead": "020f532a06bc1651b24f6c7743a11dbd4e72553b"
 }

package/src/ContentOverlay/ContentOverlay.test.tsx

@@ -4,7 +4,7 @@ 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 type { ContentOverlayRef, ModalBackgroundColor } from "./ContentOverlay";
 import { ContentOverlay } from "./ContentOverlay";
 import { tokens } from "../utils/design";
 import { Button } from "../Button";
@@ -106,30 +106,23 @@ function renderContentOverlay(
   return renderResult;
 }
 
-async function renderAndOpenContentOverlay(
-  defaultOptions = getDefaultOptions(),
-) {
+function renderAndOpenContentOverlay(defaultOptions = getDefaultOptions()) {
   const rendered = renderContentOverlay(defaultOptions);
 
   act(() => {
     fireEvent.press(rendered.getByLabelText(defaultOptions.buttonLabel));
   });
 
-  // Wait for the modal to open asynchronously (due to requestAnimationFrame)
-  await waitFor(() => {
-    expect(rendered.getByTestId("ATL-Overlay-Header")).toBeDefined();
-  });
-
   return rendered;
 }
 
 describe("when open is called on the content overlay ref", () => {
-  it("should open the content overlay, exposing the content to the user", async () => {
+  it("should open the content overlay, exposing the content to the user", () => {
     const options: testRendererOptions = {
       ...getDefaultOptions(),
       text: "I am text within the content overlay",
     };
-    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
 
     expect(contentOverlayScreen.getByText(options.text)).toBeDefined();
   });
@@ -142,7 +135,7 @@ describe("when the close button is clicked on an open content overlay", () => {
       text: "I am text within the content overlay",
       showDismiss: true,
     };
-    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
 
     act(() => {
       fireEvent.press(
@@ -163,7 +156,7 @@ describe("when the close button is clicked on an open content overlay with a def
       onCloseCallback: jest.fn(),
       showDismiss: true,
     };
-    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
 
     act(() => {
       fireEvent.press(
@@ -198,7 +191,7 @@ describe("when the content overlay is created with a defined onOpen prop", () =>
         ...getDefaultOptions(),
         onOpenCallback: jest.fn(),
       };
-      await renderAndOpenContentOverlay(options);
+      renderAndOpenContentOverlay(options);
 
       await waitFor(() => {
         expect(options.onOpenCallback).toHaveBeenCalled();
@@ -208,25 +201,25 @@ describe("when the content overlay is created with a defined onOpen prop", () =>
 });
 
 describe("when title prop passed to content overlay", () => {
-  it("should set the header title", async () => {
+  it("should set the header title", () => {
     const options: testRendererOptions = {
       ...getDefaultOptions(),
       title: "Awesome Title",
     };
-    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
 
     expect(contentOverlayScreen.getByText(options.title)).toBeDefined();
   });
 });
 
 describe("when accessibilityLabel prop passed to content overlay", () => {
-  it("should set the header accessibilityLabel", async () => {
+  it("should set the header accessibilityLabel", () => {
     const options: testRendererOptions = {
       ...getDefaultOptions(),
       a11yLabel: "Awesome a11y Label",
       showDismiss: true,
     };
-    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
 
     expect(
       contentOverlayScreen.getByLabelText(options.a11yLabel || "ohno"),
@@ -235,13 +228,13 @@ describe("when accessibilityLabel prop passed to content overlay", () => {
 });
 
 describe("when accessibilityLabel prop NOT passed to content overlay", () => {
-  it("should use default accessibilityLabel", async () => {
+  it("should use default accessibilityLabel", () => {
     const options: testRendererOptions = {
       ...getDefaultOptions(),
       title: "Awesome Title",
       showDismiss: true,
     };
-    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
 
     expect(
       contentOverlayScreen.getAllByLabelText(`Close ${options.title} modal`),
@@ -258,7 +251,7 @@ describe("when there is a screen reader enabled", () => {
     const options: testRendererOptions = {
       ...getDefaultOptions(),
     };
-    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
 
     expect(
       await contentOverlayScreen.findByTestId("ATL-Overlay-CloseButton"),
@@ -267,12 +260,12 @@ describe("when there is a screen reader enabled", () => {
 });
 
 describe("when fullScreen is set to true", () => {
-  it("should show the dismiss button", async () => {
+  it("should show the dismiss button", () => {
     const options: testRendererOptions = {
       ...getDefaultOptions(),
       fullScreen: true,
     };
-    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
     expect(
       contentOverlayScreen.getByTestId("ATL-Overlay-CloseButton"),
     ).toBeDefined();
@@ -280,12 +273,12 @@ describe("when fullScreen is set to true", () => {
 });
 
 describe("when showDismiss is set to true", () => {
-  it("should show the dismiss button", async () => {
+  it("should show the dismiss button", () => {
     const options: testRendererOptions = {
       ...getDefaultOptions(),
       showDismiss: true,
     };
-    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
     expect(
       contentOverlayScreen.getByTestId("ATL-Overlay-CloseButton"),
     ).toBeDefined();
@@ -299,7 +292,7 @@ describe("when the close button is clicked on an open content overlay with a def
       onBeforeExitCallback: jest.fn(),
       showDismiss: true,
     };
-    const contentOverlayScreen = await renderAndOpenContentOverlay(options);
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
 
     act(() => {
       fireEvent.press(
@@ -315,11 +308,11 @@ describe("when the close button is clicked on an open content overlay with a def
 
 describe("modalBackgroundColor prop", () => {
   describe("when using the default surface value", () => {
-    it("renders the component with the color-surface color", async () => {
+    it("renders the component with the color-surface color", () => {
       const options: testRendererOptions = {
         ...getDefaultOptions(),
       };
-      const contentOverlayScreen = await renderAndOpenContentOverlay(options);
+      const contentOverlayScreen = renderAndOpenContentOverlay(options);
       const OverlayHeader = contentOverlayScreen.getByTestId(
         "ATL-Overlay-Header",
       ).children[0] as ReactTestInstance;
@@ -344,12 +337,12 @@ describe("modalBackgroundColor prop", () => {
   });
 
   describe("when set to background", () => {
-    it("changes the backround color of the modal to color-surface--background", async () => {
+    it("changes the backround color of the modal to color-surface--background", () => {
       const options: testRendererOptions = {
         ...getDefaultOptions(),
         modalBackgroundColor: "background",
       };
-      const contentOverlayScreen = await renderAndOpenContentOverlay(options);
+      const contentOverlayScreen = renderAndOpenContentOverlay(options);
       const OverlayHeader = contentOverlayScreen.getByTestId(
         "ATL-Overlay-Header",
       ).children[0] as ReactTestInstance;

package/src/ContentOverlay/ContentOverlay.tsx

@@ -7,7 +7,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import type { Modalize } from "react-native-modalize";
+import { Modalize } from "react-native-modalize";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import type { NativeScrollEvent, NativeSyntheticEvent } from "react-native";
 import {
@@ -26,7 +26,6 @@ import type {
   ContentOverlayRef,
   ModalBackgroundColor,
 } from "./types";
-import { UNSAFE_WrappedModalize } from "./UNSAFE_WrappedModalize";
 import { useIsScreenReaderEnabled } from "../hooks";
 import { IconButton } from "../IconButton";
 import { Heading } from "../Heading";
@@ -154,7 +153,7 @@ function ContentOverlayInternal(
   return (
     <>
       {headerHeightKnown && childrenHeightKnown && (
-        <UNSAFE_WrappedModalize
+        <Modalize
           ref={callbackInternalRef}
           overlayStyle={styles.overlay}
           handleStyle={styles.handle}
@@ -197,7 +196,7 @@ function ContentOverlayInternal(
         >
           {Platform.OS === "android" ? renderedHeader : undefined}
           {renderedChildren}
-        </UNSAFE_WrappedModalize>
+        </Modalize>
       )}
       {!childrenHeightKnown && (
         <View style={[styles.hiddenContent, modalStyle]}>

package/src/ContentOverlay/index.ts

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

package/src/Form/Form.tsx

@@ -26,6 +26,7 @@ import { useScrollToError } from "./hooks/useScrollToError";
 import { FormSaveButton } from "./components/FormSaveButton";
 import { useSaveButtonPosition } from "./hooks/useSaveButtonPosition";
 import { FormCache } from "./components/FormCache/FormCache";
+import { useAtlantisFormContext } from "./context/AtlantisFormContext";
 import { InputAccessoriesProvider } from "../InputText";
 import { tokens } from "../utils/design";
 import { ErrorMessageProvider } from "../ErrorMessageWrapper";
@@ -134,6 +135,8 @@ function InternalForm<T extends FieldValues, S>({
 
   const styles = useStyles();
 
+  const { edgeToEdgeEnabled } = useAtlantisFormContext();
+
   return (
     <FormProvider {...formMethods}>
       <>
@@ -161,6 +164,7 @@ function InternalForm<T extends FieldValues, S>({
           <KeyboardAwareScrollView
             enableResetScrollToCoords={false}
             enableAutomaticScroll={true}
+            enableOnAndroid={edgeToEdgeEnabled}
             keyboardOpeningTime={
               Platform.OS === "ios" ? tokens["timing-slowest"] : 0
             }
@@ -168,6 +172,7 @@ function InternalForm<T extends FieldValues, S>({
             ref={scrollViewRef}
             {...keyboardProps}
             extraHeight={headerHeight}
+            extraScrollHeight={edgeToEdgeEnabled ? tokens["space-large"] : 0}
             contentContainerStyle={
               !keyboardHeight && styles.scrollContentContainer
             }

package/src/Form/context/AtlantisFormContext.tsx

@@ -11,6 +11,7 @@ export const atlantisFormContextDefaultValues = {
     setLocalCache: () => undefined,
     removeLocalCache: () => undefined,
   }),
+  edgeToEdgeEnabled: false,
 };
 
 export const AtlantisFormContext = createContext<AtlantisFormContextProps>(

package/src/Form/context/types.ts

@@ -30,4 +30,5 @@ export interface AtlantisFormContextProps {
     setLocalCache: (data: DeepPartial<TData>) => void;
     removeLocalCache: () => void;
   };
+  edgeToEdgeEnabled?: boolean;
 }

package/src/utils/meta/meta.json

@@ -64,7 +64,6 @@
     "ThumbnailList",
     "Toast",
     "Typography",
-    "TypographyGestureDetector",
-    "UNSAFE_WrappedModalize"
+    "TypographyGestureDetector"
   ]
 }

package/dist/src/ContentOverlay/UNSAFE_WrappedModalize.js

@@ -1,27 +0,0 @@
-import React, { forwardRef, useImperativeHandle, useRef, useState, } from "react";
-import { Modalize } from "react-native-modalize";
-// DON'T USE THIS COMPONENT DIRECTLY.
-// It is exposed only so that the deprecated ContentOverlay component can use this along with the
-// newer one contained in this lib.
-// This is a temporary solution for new architecture. JOB-137549 plans to replace modalize entirely.
-export const UNSAFE_WrappedModalize = forwardRef((props, ref) => {
-    const innerRef = useRef(null);
-    const [openRenderId, setOpenRenderId] = useState(0);
-    useImperativeHandle(ref, () => ({
-        open(dest) {
-            setOpenRenderId(id => id + 1);
-            // Open on a fresh tick for additional safety
-            requestAnimationFrame(() => {
-                var _a;
-                (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.open(dest);
-            });
-        },
-        close(dest) {
-            var _a;
-            (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.close(dest);
-        },
-    }), []);
-    // Use a unique key to force a remount, ensuring we get fresh gesture handler nodes within modalize
-    return (React.createElement(Modalize, Object.assign({ key: `modalize-${openRenderId}`, ref: innerRef }, props)));
-});
-UNSAFE_WrappedModalize.displayName = "UNSAFE_WrappedModalize";

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

@@ -1,3 +0,0 @@
-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<string | number | boolean | {} | React.ReactPortal | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | undefined>, "ref"> & React.RefAttributes<IHandles>>;

package/src/ContentOverlay/UNSAFE_WrappedModalize.tsx

@@ -1,45 +0,0 @@
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from "react";
-import { Modalize } from "react-native-modalize";
-import type { IHandles } from "react-native-modalize/lib/options";
-
-type Props = React.ComponentProps<typeof Modalize>;
-
-// DON'T USE THIS COMPONENT DIRECTLY.
-// It is exposed only so that the deprecated ContentOverlay component can use this along with the
-// newer one contained in this lib.
-// This is a temporary solution for new architecture. JOB-137549 plans to replace modalize entirely.
-export const UNSAFE_WrappedModalize = forwardRef<IHandles, Props>(
-  (props, ref) => {
-    const innerRef = useRef<IHandles | null>(null);
-    const [openRenderId, setOpenRenderId] = useState(0);
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        open(dest) {
-          setOpenRenderId(id => id + 1);
-          // Open on a fresh tick for additional safety
-          requestAnimationFrame(() => {
-            innerRef.current?.open(dest);
-          });
-        },
-        close(dest) {
-          innerRef.current?.close(dest);
-        },
-      }),
-      [],
-    );
-
-    // Use a unique key to force a remount, ensuring we get fresh gesture handler nodes within modalize
-    return (
-      <Modalize key={`modalize-${openRenderId}`} ref={innerRef} {...props} />
-    );
-  },
-);
-
-UNSAFE_WrappedModalize.displayName = "UNSAFE_WrappedModalize";