@jobber/components-native 0.98.5 → 0.99.0

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

@@ -0,0 +1,6 @@
+import React from "react";
+interface AtlantisOverlayProviderProps {
+    readonly children: React.ReactNode;
+}
+export declare function AtlantisOverlayProvider({ children, }: AtlantisOverlayProviderProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export { AtlantisOverlayProvider } from "./AtlantisOverlayProvider";

package/dist/types/src/BottomSheet/hooks/useBottomSheetBackHandler.d.ts

@@ -1,8 +1,8 @@
-import type BottomSheet from "@gorhom/bottom-sheet";
+import type { BottomSheetModal } from "@gorhom/bottom-sheet";
 /**
- * Hook that closes the bottom sheet on the hardware back button press if it is visible
+ * Hook that dismisses the bottom sheet modal on the hardware back button press if it is visible
  * @param bottomSheetRef ref to the bottom sheet component
  */
-export declare function useBottomSheetBackHandler(bottomSheetRef: React.RefObject<BottomSheet | null>): {
+export declare function useBottomSheetBackHandler(bottomSheetRef: React.RefObject<BottomSheetModal | null>): {
     handleSheetPositionChange: (index: number) => void;
 };

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

@@ -2,6 +2,7 @@ export * from "./ActionItem";
 export * from "./ActionLabel";
 export * from "./ActivityIndicator";
 export * from "./AtlantisContext";
+export * from "./AtlantisOverlayProvider";
 export * from "./AtlantisThemeContext";
 export * from "./AutoLink";
 export * from "./Banner";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.98.5",
+  "version": "0.99.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -96,5 +96,5 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "60dbce9880c63f02f43d8b3f1f5ef9090dba32e3"
+  "gitHead": "c92c33f8e0a06cbc2addce9eca3005c1231a9202"
 }

package/src/AtlantisOverlayProvider/AtlantisOverlayProvider.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+
+interface AtlantisOverlayProviderProps {
+  readonly children: React.ReactNode;
+}
+
+export function AtlantisOverlayProvider({
+  children,
+}: AtlantisOverlayProviderProps) {
+  return <BottomSheetModalProvider>{children}</BottomSheetModalProvider>;
+}

package/src/AtlantisOverlayProvider/index.ts

@@ -0,0 +1 @@
+export { AtlantisOverlayProvider } from "./AtlantisOverlayProvider";

package/src/BottomSheet/BottomSheet.tsx

@@ -2,8 +2,9 @@ import type { ReactNode } from "react";
 import React, { useCallback, useImperativeHandle, useRef } from "react";
 import { Keyboard, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import RNBottomSheet, {
+import {
   BottomSheetBackdrop,
+  BottomSheetModal,
   BottomSheetView,
 } from "@gorhom/bottom-sheet";
 import type { BottomSheetBackdropProps } from "@gorhom/bottom-sheet";
@@ -67,13 +68,14 @@ export function BottomSheet({
   const { t } = useAtlantisI18n();
   const insets = useSafeAreaInsets();
   const previousIndexRef = useRef(-1);
-  const bottomSheetRef = useRef<RNBottomSheet>(null);
+  const bottomSheetRef = useRef<BottomSheetModal>(null);
   const { handleSheetPositionChange } =
     useBottomSheetBackHandler(bottomSheetRef);
 
   useImperativeHandle(ref, () => ({
     open: () => {
-      bottomSheetRef.current?.expand();
+      dismissKeyboard();
+      bottomSheetRef.current?.present();
     },
     close: () => {
       close();
@@ -81,7 +83,7 @@ export function BottomSheet({
   }));
 
   const close = useCallback(() => {
-    bottomSheetRef.current?.close();
+    bottomSheetRef.current?.dismiss();
   }, []);
 
   const handleChange = (index: number) => {
@@ -91,26 +93,24 @@ export function BottomSheet({
     const previousIndex = previousIndexRef.current;
 
     if (previousIndex === -1 && index >= 0) {
-      // Transitioned from closed to open
-      dismissKeyboard();
       onOpen?.();
-    } else if (previousIndex >= 0 && index === -1) {
-      // Transitioned from open to closed
-      dismissKeyboard();
-      onClose?.();
     }
 
     previousIndexRef.current = index;
   };
 
   return (
-    <RNBottomSheet
+    <BottomSheetModal
       ref={bottomSheetRef}
-      index={-1}
       backdropComponent={Backdrop}
       backgroundStyle={styles.background}
       enablePanDownToClose={true}
       onChange={handleChange}
+      onDismiss={() => {
+        previousIndexRef.current = -1;
+        dismissKeyboard();
+        onClose?.();
+      }}
       keyboardBlurBehavior="restore"
       handleStyle={styles.handle}
     >
@@ -126,7 +126,7 @@ export function BottomSheet({
           <Footer styles={styles} close={close} cancelLabel={t("cancel")} />
         )}
       </BottomSheetView>
-    </RNBottomSheet>
+    </BottomSheetModal>
   );
 }
 

package/src/BottomSheet/hooks/useBottomSheetBackHandler.test.ts

@@ -2,7 +2,7 @@ import { createRef } from "react";
 import type { RefObject } from "react";
 import { act, renderHook } from "@testing-library/react-native";
 import { BackHandler } from "react-native";
-import type BottomSheet from "@gorhom/bottom-sheet";
+import type { BottomSheetModal } from "@gorhom/bottom-sheet";
 import { useBottomSheetBackHandler } from "./useBottomSheetBackHandler";
 
 describe("useBottomSheetBackHandler", () => {
@@ -20,7 +20,7 @@ describe("useBottomSheetBackHandler", () => {
   });
 
   it("should register BackHandler listener when sheet becomes visible", async () => {
-    const bottomSheetRef = createRef<BottomSheet | null>();
+    const bottomSheetRef = createRef<BottomSheetModal | null>();
     const { result } = renderHook(() =>
       useBottomSheetBackHandler(bottomSheetRef),
     );
@@ -35,13 +35,13 @@ describe("useBottomSheetBackHandler", () => {
     );
   });
 
-  it("should call close() when back button is pressed", async () => {
-    const mockClose = jest.fn();
+  it("should call dismiss() when back button is pressed", async () => {
+    const mockDismiss = jest.fn();
     const bottomSheetRef = {
       current: {
-        close: mockClose,
-      } as unknown as BottomSheet,
-    } as RefObject<BottomSheet | null>;
+        dismiss: mockDismiss,
+      } as unknown as BottomSheetModal,
+    } as RefObject<BottomSheetModal | null>;
 
     const { result } = renderHook(() =>
       useBottomSheetBackHandler(bottomSheetRef),
@@ -54,12 +54,12 @@ describe("useBottomSheetBackHandler", () => {
     const registeredCallback = mockAddEventListener.mock.calls[0][1];
     const returnValue = registeredCallback();
 
-    expect(mockClose).toHaveBeenCalled();
+    expect(mockDismiss).toHaveBeenCalled();
     expect(returnValue).toBe(true);
   });
 
   it("should remove listener when sheet is dismissed", async () => {
-    const bottomSheetRef = createRef<BottomSheet | null>();
+    const bottomSheetRef = createRef<BottomSheetModal | null>();
     const { result } = renderHook(() =>
       useBottomSheetBackHandler(bottomSheetRef),
     );
@@ -76,7 +76,7 @@ describe("useBottomSheetBackHandler", () => {
   });
 
   it("should not register listener when index is negative", async () => {
-    const bottomSheetRef = createRef<BottomSheet | null>();
+    const bottomSheetRef = createRef<BottomSheetModal | null>();
     const { result } = renderHook(() =>
       useBottomSheetBackHandler(bottomSheetRef),
     );

package/src/BottomSheet/hooks/useBottomSheetBackHandler.ts

@@ -1,13 +1,13 @@
 import { useCallback, useRef } from "react";
 import { BackHandler, type NativeEventSubscription } from "react-native";
-import type BottomSheet from "@gorhom/bottom-sheet";
+import type { BottomSheetModal } from "@gorhom/bottom-sheet";
 
 /**
- * Hook that closes the bottom sheet on the hardware back button press if it is visible
+ * Hook that dismisses the bottom sheet modal on the hardware back button press if it is visible
  * @param bottomSheetRef ref to the bottom sheet component
  */
 export function useBottomSheetBackHandler(
-  bottomSheetRef: React.RefObject<BottomSheet | null>,
+  bottomSheetRef: React.RefObject<BottomSheetModal | null>,
 ): {
   handleSheetPositionChange: (index: number) => void;
 } {
@@ -24,7 +24,7 @@ export function useBottomSheetBackHandler(
         backHandlerSubscriptionRef.current = BackHandler.addEventListener(
           "hardwareBackPress",
           () => {
-            bottomSheetRef.current?.close();
+            bottomSheetRef.current?.dismiss();
 
             return true;
           },

package/src/ButtonGroup/ButtonGroup.stories.tsx

@@ -1,8 +1,10 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Host } from "react-native-portalize";
 import { SafeAreaProvider } from "react-native-safe-area-context";
-import { ButtonGroup } from "@jobber/components-native";
+import {
+  AtlantisOverlayProvider,
+  ButtonGroup,
+} from "@jobber/components-native";
 
 const meta = {
   title: "Components/Actions/ButtonGroup",
@@ -31,7 +33,7 @@ type SecondaryActionStory = StoryObj<
 export const Basic: ButtonGroupStory = {
   render: args => (
     <SafeAreaProvider>
-      <Host>
+      <AtlantisOverlayProvider>
         <ButtonGroup {...args}>
           <ButtonGroup.PrimaryAction
             label={"Create"}
@@ -49,7 +51,7 @@ export const Basic: ButtonGroupStory = {
             onPress={() => console.log("delete")}
           />
         </ButtonGroup>
-      </Host>
+      </AtlantisOverlayProvider>
     </SafeAreaProvider>
   ),
   args: {},
@@ -58,7 +60,7 @@ export const Basic: ButtonGroupStory = {
 export const Primary: PrimaryActionStory = {
   render: args => (
     <SafeAreaProvider>
-      <Host>
+      <AtlantisOverlayProvider>
         <ButtonGroup>
           <ButtonGroup.PrimaryAction {...args} />
           <ButtonGroup.SecondaryAction
@@ -72,7 +74,7 @@ export const Primary: PrimaryActionStory = {
             onPress={() => console.log("delete")}
           />
         </ButtonGroup>
-      </Host>
+      </AtlantisOverlayProvider>
     </SafeAreaProvider>
   ),
   args: {
@@ -85,7 +87,7 @@ export const Primary: PrimaryActionStory = {
 export const Secondary: SecondaryActionStory = {
   render: args => (
     <SafeAreaProvider>
-      <Host>
+      <AtlantisOverlayProvider>
         <ButtonGroup
           bottomSheetHeading="What would you like to do"
           showCancelInBottomSheet={true}
@@ -97,7 +99,7 @@ export const Secondary: SecondaryActionStory = {
           />
           <ButtonGroup.SecondaryAction {...args} />
         </ButtonGroup>
-      </Host>
+      </AtlantisOverlayProvider>
     </SafeAreaProvider>
   ),
   args: {

package/src/ButtonGroup/ButtonGroup.test.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { fireEvent, render, waitFor } from "@testing-library/react-native";
-import { Host } from "react-native-portalize";
 import { Alert } from "react-native";
 import type { ButtonGroupProps } from "./ButtonGroup";
 import { ButtonGroup } from "./ButtonGroup";
@@ -12,15 +11,13 @@ const mockOnOpen = jest.fn();
 
 function ButtonGroupForTest(props: ButtonGroupProps) {
   return (
-    <Host>
-      <ButtonGroup
-        bottomSheetHeading={props.bottomSheetHeading}
-        showCancelInBottomSheet={props.showCancelInBottomSheet}
-        onOpenBottomSheet={mockOnOpen}
-      >
-        {props.children}
-      </ButtonGroup>
-    </Host>
+    <ButtonGroup
+      bottomSheetHeading={props.bottomSheetHeading}
+      showCancelInBottomSheet={props.showCancelInBottomSheet}
+      onOpenBottomSheet={mockOnOpen}
+    >
+      {props.children}
+    </ButtonGroup>
   );
 }
 

package/src/ButtonGroup/components/SecondaryActionSheet/SecondaryActionSheet.tsx

@@ -1,7 +1,6 @@
 import type { RefObject } from "react";
 import React from "react";
 import { View } from "react-native";
-import { Portal } from "react-native-portalize";
 import type { ButtonGroupSecondaryActionProps } from "../../types";
 import { BottomSheetOption } from "../../../BottomSheet/components/BottomSheetOption";
 import type { BottomSheetRef } from "../../../BottomSheet/BottomSheet";
@@ -25,34 +24,32 @@ export function SecondaryActionSheet({
   onCloseBottomSheet,
 }: SecondaryActionSheetProps) {
   return (
-    <Portal>
-      <BottomSheet
-        heading={heading}
-        showCancel={showCancel}
-        ref={secondaryActionsRef}
-        onOpen={onOpenBottomSheet}
-        onClose={onCloseBottomSheet}
-      >
-        <View>
-          {actions.map((action, index) => {
-            const { label, onPress, icon, iconColor, destructive } = action;
+    <BottomSheet
+      heading={heading}
+      showCancel={showCancel}
+      ref={secondaryActionsRef}
+      onOpen={onOpenBottomSheet}
+      onClose={onCloseBottomSheet}
+    >
+      <View>
+        {actions.map((action, index) => {
+          const { label, onPress, icon, iconColor, destructive } = action;
 
-            return (
-              <BottomSheetOption
-                destructive={destructive}
-                key={index}
-                text={label}
-                onPress={() => {
-                  secondaryActionsRef?.current?.close();
-                  onPress();
-                }}
-                icon={icon}
-                iconColor={iconColor}
-              />
-            );
-          })}
-        </View>
-      </BottomSheet>
-    </Portal>
+          return (
+            <BottomSheetOption
+              destructive={destructive}
+              key={index}
+              text={label}
+              onPress={() => {
+                secondaryActionsRef?.current?.close();
+                onPress();
+              }}
+              icon={icon}
+              iconColor={iconColor}
+            />
+          );
+        })}
+      </View>
+    </BottomSheet>
   );
 }

package/src/Form/Form.stories.tsx

@@ -1,8 +1,12 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Host } from "react-native-portalize";
 import { SafeAreaProvider } from "react-native-safe-area-context";
-import { Content, Form, InputText } from "@jobber/components-native";
+import {
+  AtlantisOverlayProvider,
+  Content,
+  Form,
+  InputText,
+} from "@jobber/components-native";
 
 const meta = {
   title: "Components/Forms and Inputs/Form",
@@ -26,7 +30,7 @@ type Story = StoryObj<NativeFormStoryArgs>;
 
 const BasicTemplate = (args: Story["args"]) => (
   <SafeAreaProvider>
-    <Host>
+    <AtlantisOverlayProvider>
       <Form
         initialValues={args?.initialValues}
         secondaryActions={args?.secondaryActions}
@@ -59,7 +63,7 @@ const BasicTemplate = (args: Story["args"]) => (
           />
         </Content>
       </Form>
-    </Host>
+    </AtlantisOverlayProvider>
   </SafeAreaProvider>
 );
 

package/src/Form/Form.test.tsx

@@ -1,7 +1,6 @@
 import React, { type ReactElement } from "react";
 import { act, fireEvent, render, waitFor } from "@testing-library/react-native";
 import { Alert, Keyboard } from "react-native";
-import { Host } from "react-native-portalize";
 import type { FormBannerMessage } from ".";
 import { Form, FormBannerMessageType } from ".";
 import type { FormBannerErrors } from "./types";
@@ -139,61 +138,59 @@ function MockForm({
   }
 
   return (
-    <Host>
-      <Form
-        onSubmit={onSubmit}
-        onSubmitError={onErrorMock}
-        onSubmitSuccess={onSuccessMock}
-        bannerErrors={formErrors}
-        bannerMessages={bannerMessages}
-        saveButtonLabel={saveLabel}
-        renderStickySection={renderStickySection}
-        initialLoading={initialLoading}
-        initialValues={initialValues}
-        localCacheKey={localCacheKey}
-        localCacheExclude={localCacheExclude}
-        localCacheId={localCacheId}
-        onBeforeSubmit={onBeforeSubmit}
-        renderFooter={renderFooter}
-        saveButtonOffset={saveButtonOffset}
-        UNSAFE_allowDiscardLocalCacheWhenOffline={
-          UNSAFE_allowDiscardLocalCacheWhenOffline
-        }
-      >
+    <Form
+      onSubmit={onSubmit}
+      onSubmitError={onErrorMock}
+      onSubmitSuccess={onSuccessMock}
+      bannerErrors={formErrors}
+      bannerMessages={bannerMessages}
+      saveButtonLabel={saveLabel}
+      renderStickySection={renderStickySection}
+      initialLoading={initialLoading}
+      initialValues={initialValues}
+      localCacheKey={localCacheKey}
+      localCacheExclude={localCacheExclude}
+      localCacheId={localCacheId}
+      onBeforeSubmit={onBeforeSubmit}
+      renderFooter={renderFooter}
+      saveButtonOffset={saveButtonOffset}
+      UNSAFE_allowDiscardLocalCacheWhenOffline={
+        UNSAFE_allowDiscardLocalCacheWhenOffline
+      }
+    >
+      <InputText
+        name={testInputTextName}
+        placeholder={testInputTextPlaceholder}
+        onChangeText={onChangeMock}
+        accessibilityLabel={testInputTextPlaceholder}
+        validations={{
+          required: requiredInputText,
+          minLength: { value: 3, message: minLengthText },
+        }}
+      />
+      {Array.isArray(localCacheExclude) && localCacheExclude.length > 0 && (
         <InputText
-          name={testInputTextName}
-          placeholder={testInputTextPlaceholder}
-          onChangeText={onChangeMock}
-          accessibilityLabel={testInputTextPlaceholder}
-          validations={{
-            required: requiredInputText,
-            minLength: { value: 3, message: minLengthText },
-          }}
-        />
-        {Array.isArray(localCacheExclude) && localCacheExclude.length > 0 && (
-          <InputText
-            name={testInputTextNameExclude}
-            placeholder={testInputTextPlaceholderExclude}
-          />
-        )}
-        <Select
-          onChange={onChangeSelectMock}
-          label={selectLabel}
-          name={testSelectName}
-        >
-          <Option value={"1"}>1</Option>
-          <Option value={"2"}>2</Option>
-        </Select>
-        <Switch
-          name={testSwitchName}
-          label="Test Switch"
-          accessibilityLabel={switchLabel}
-          onValueChange={onChangeSwitchMock}
+          name={testInputTextNameExclude}
+          placeholder={testInputTextPlaceholderExclude}
         />
-        <InputNumber name={testInputNumberName} placeholder="Test Num" />
-        <Checkbox name={testCheckboxName} accessibilityLabel={checkboxLabel} />
-      </Form>
-    </Host>
+      )}
+      <Select
+        onChange={onChangeSelectMock}
+        label={selectLabel}
+        name={testSelectName}
+      >
+        <Option value={"1"}>1</Option>
+        <Option value={"2"}>2</Option>
+      </Select>
+      <Switch
+        name={testSwitchName}
+        label="Test Switch"
+        accessibilityLabel={switchLabel}
+        onValueChange={onChangeSwitchMock}
+      />
+      <InputNumber name={testInputNumberName} placeholder="Test Num" />
+      <Checkbox name={testCheckboxName} accessibilityLabel={checkboxLabel} />
+    </Form>
   );
 }
 

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

@@ -1,6 +1,5 @@
 import React from "react";
 import { fireEvent, render, waitFor } from "@testing-library/react-native";
-import { Host } from "react-native-portalize";
 import type { IconNames } from "@jobber/design";
 import { FormSaveButton } from "./FormSaveButton";
 
@@ -31,15 +30,13 @@ jest.mock("react-hook-form", () => ({
 
 function ButtonGroupForTest(props: TestFormSaveButtonProps) {
   return (
-    <Host>
-      <FormSaveButton
-        primaryAction={props.primaryAction}
-        loading={props.loading}
-        label={props.label}
-        setSecondaryActionLoading={props.setSecondaryActionLoading}
-        secondaryActions={props.secondaryAction}
-      />
-    </Host>
+    <FormSaveButton
+      primaryAction={props.primaryAction}
+      loading={props.loading}
+      label={props.label}
+      setSecondaryActionLoading={props.setSecondaryActionLoading}
+      secondaryActions={props.secondaryAction}
+    />
   );
 }
 

package/src/FormatFile/FormatFile.stories.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Host } from "react-native-portalize";
 import { SafeAreaProvider } from "react-native-safe-area-context";
-import { FormatFile } from "@jobber/components-native";
+import { AtlantisOverlayProvider, FormatFile } from "@jobber/components-native";
 
 const meta = {
   title: "Components/Images and Icons/FormatFile",
@@ -17,7 +16,7 @@ type Story = StoryObj<Partial<React.ComponentProps<typeof FormatFile>>>;
 
 const BasicTemplate = (args: Story["args"]) => (
   <SafeAreaProvider>
-    <Host>
+    <AtlantisOverlayProvider>
       <FormatFile
         file={
           args?.file ?? {
@@ -39,7 +38,7 @@ const BasicTemplate = (args: Story["args"]) => (
         showFileTypeIndicator={args?.showFileTypeIndicator}
         createThumbnail={args?.createThumbnail}
       />
-    </Host>
+    </AtlantisOverlayProvider>
   </SafeAreaProvider>
 );
 

package/src/FormatFile/FormatFile.test.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import type { RenderAPI } from "@testing-library/react-native";
 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 {
@@ -42,19 +41,17 @@ const renderFormatFile = (
   showFileTypeIndicator?: boolean,
 ) => {
   return render(
-    <Host>
-      <FormatFile
-        file={file}
-        accessibilityLabel="Custom Label"
-        accessibilityHint="Custom Hint Text"
-        onTap={() => Alert.alert("alert")}
-        onRemove={onRemove}
-        bottomSheetOptionsSuffix={bottomSheetOptionsSuffix}
-        showFileTypeIndicator={showFileTypeIndicator}
-        onPreviewPress={mockOnPreview}
-        createThumbnail={mockCreateThumbnail}
-      />
-    </Host>,
+    <FormatFile
+      file={file}
+      accessibilityLabel="Custom Label"
+      accessibilityHint="Custom Hint Text"
+      onTap={() => Alert.alert("alert")}
+      onRemove={onRemove}
+      bottomSheetOptionsSuffix={bottomSheetOptionsSuffix}
+      showFileTypeIndicator={showFileTypeIndicator}
+      onPreviewPress={mockOnPreview}
+      createThumbnail={mockCreateThumbnail}
+    />,
   );
 };