@jobber/components-native 0.98.5 → 0.99.0

package/src/FormatFile/components/FormatFileBottomSheet/FormatFileBottomSheet.test.tsx

@@ -1,7 +1,6 @@
 import React, { createRef } 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 { act } from "react-test-renderer";
 import type { BottomSheetOptionsSuffix } from "./FormatFileBottomSheet";
 import { FormatFileBottomSheet } from "./FormatFileBottomSheet";
@@ -20,14 +19,12 @@ const renderBottomSheet = (
   bottomSheetOptionsSuffix: BottomSheetOptionsSuffix,
 ) => {
   return render(
-    <Host>
-      <FormatFileBottomSheet
-        onPreviewPress={onPreview}
-        onRemovePress={onRemove}
-        bottomSheetRef={bottomSheetRef}
-        bottomSheetOptionsSuffix={bottomSheetOptionsSuffix}
-      />
-    </Host>,
+    <FormatFileBottomSheet
+      onPreviewPress={onPreview}
+      onRemovePress={onRemove}
+      bottomSheetRef={bottomSheetRef}
+      bottomSheetOptionsSuffix={bottomSheetOptionsSuffix}
+    />,
   );
 };
 

package/src/FormatFile/components/FormatFileBottomSheet/FormatFileBottomSheet.tsx

@@ -1,6 +1,5 @@
 import type { RefObject } from "react";
 import React from "react";
-import { Portal } from "react-native-portalize";
 import type { BottomSheetRef } from "../../../BottomSheet/BottomSheet";
 import { BottomSheet } from "../../../BottomSheet/BottomSheet";
 import { BottomSheetOption } from "../../../BottomSheet/components/BottomSheetOption";
@@ -30,28 +29,26 @@ export const FormatFileBottomSheet = ({
   };
 
   return (
-    <Portal>
-      <BottomSheet ref={bottomSheetRef}>
-        {onPreviewPress ? (
-          <BottomSheetOption
-            icon={"eye"}
-            text={t("FormatFile.preview", {
-              item: bottomSheetOptionsSuffix || "",
-            })}
-            onPress={() => handlePress(onPreviewPress)}
-          />
-        ) : undefined}
-        {onRemovePress ? (
-          <BottomSheetOption
-            icon={"trash"}
-            destructive={true}
-            text={t("FormatFile.remove", {
-              item: bottomSheetOptionsSuffix || "",
-            })}
-            onPress={() => handlePress(onRemovePress)}
-          />
-        ) : undefined}
-      </BottomSheet>
-    </Portal>
+    <BottomSheet ref={bottomSheetRef}>
+      {onPreviewPress ? (
+        <BottomSheetOption
+          icon={"eye"}
+          text={t("FormatFile.preview", {
+            item: bottomSheetOptionsSuffix || "",
+          })}
+          onPress={() => handlePress(onPreviewPress)}
+        />
+      ) : undefined}
+      {onRemovePress ? (
+        <BottomSheetOption
+          icon={"trash"}
+          destructive={true}
+          text={t("FormatFile.remove", {
+            item: bottomSheetOptionsSuffix || "",
+          })}
+          onPress={() => handlePress(onRemovePress)}
+        />
+      ) : undefined}
+    </BottomSheet>
   );
 };

package/src/InputDate/InputDate.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 { FormProvider, useForm } from "react-hook-form";
 import { Keyboard } from "react-native";
 import { InputDate } from "./InputDate";
@@ -175,13 +174,11 @@ describe("InputDate", () => {
     const setup = () =>
       render(
         <SimpleFormWithProvider defaultValues={{ [pickerName]: value }}>
-          <Host>
-            <InputDate
-              name={pickerName}
-              onChange={handleChange}
-              validations={{ required: requiredError }}
-            />
-          </Host>
+          <InputDate
+            name={pickerName}
+            onChange={handleChange}
+            validations={{ required: requiredError }}
+          />
         </SimpleFormWithProvider>,
       );
 

package/src/InputTime/InputTime.stories.tsx

@@ -1,8 +1,12 @@
 import React, { useState } 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, InputTime } from "@jobber/components-native";
+import {
+  AtlantisOverlayProvider,
+  Content,
+  Form,
+  InputTime,
+} from "@jobber/components-native";
 
 const meta = {
   title: "Components/Forms and Inputs/InputTime",
@@ -63,7 +67,7 @@ const EmptyValueTemplate = (args: ControlledStory["args"]) => {
 
 const FormControlledTemplate = (args: FormStory["args"]) => (
   <SafeAreaProvider>
-    <Host>
+    <AtlantisOverlayProvider>
       <Form
         initialValues={{ startTime: new Date("2023-07-21T16:36:34.873Z") }}
         onSubmit={value =>
@@ -84,7 +88,7 @@ const FormControlledTemplate = (args: FormStory["args"]) => (
           />
         </Content>
       </Form>
-    </Host>
+    </AtlantisOverlayProvider>
   </SafeAreaProvider>
 );
 

package/src/InputTime/InputTime.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 { FormProvider, useForm } from "react-hook-form";
 import { Keyboard } from "react-native";
 import { InputTime } from "./InputTime";
@@ -223,13 +222,11 @@ describe("Form controlled", () => {
   const setup = () =>
     render(
       <SimpleFormWithProvider defaultValues={{ [pickerName]: value }}>
-        <Host>
-          <InputTime
-            name={pickerName}
-            onChange={handleChange}
-            validations={{ required: requiredError }}
-          />
-        </Host>
+        <InputTime
+          name={pickerName}
+          onChange={handleChange}
+          validations={{ required: requiredError }}
+        />
       </SimpleFormWithProvider>,
     );
 

package/src/ThumbnailList/ThumbnailList.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 { ThumbnailList } from "@jobber/components-native";
+import {
+  AtlantisOverlayProvider,
+  ThumbnailList,
+} from "@jobber/components-native";
 
 const meta = {
   title: "Components/Images and Icons/ThumbnailList",
@@ -17,9 +19,9 @@ type Story = StoryObj<typeof meta>;
 
 const BasicTemplate = (args: Story["args"]) => (
   <SafeAreaProvider>
-    <Host>
+    <AtlantisOverlayProvider>
       <ThumbnailList {...args} />
-    </Host>
+    </AtlantisOverlayProvider>
   </SafeAreaProvider>
 );
 

package/src/ThumbnailList/ThumbnailList.test.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 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";
 
@@ -46,13 +45,11 @@ const mockCreateThumbnail = jest.fn(async () => ({
 
 function setup(snapshot?: boolean) {
   return render(
-    <Host>
-      <ThumbnailList
-        files={snapshot ? snapshotFile : files}
-        handleOpenFile={onOpenFile}
-        createThumbnail={mockCreateThumbnail}
-      />
-    </Host>,
+    <ThumbnailList
+      files={snapshot ? snapshotFile : files}
+      handleOpenFile={onOpenFile}
+      createThumbnail={mockCreateThumbnail}
+    />,
   );
 }
 

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

@@ -1,185 +1,136 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders a thumbnail component with attachments 1`] = `
-[
-  <View
-    collapsable={false}
-    pointerEvents="box-none"
-    style={
-      [
-        {
-          "flex": 1,
-        },
-        undefined,
-      ]
-    }
-  >
+<View
+  style={
+    [
+      {
+        "display": "flex",
+        "flexDirection": "row",
+        "flexWrap": "wrap",
+        "marginTop": 4,
+        "maxHeight": 136,
+        "overflow": "hidden",
+      },
+      false,
+    ]
+  }
+>
+  <View>
     <View
+      accessibilityHint="Select for more options"
+      accessibilityRole="imagebutton"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        [
-          {
-            "display": "flex",
-            "flexDirection": "row",
-            "flexWrap": "wrap",
-            "marginTop": 4,
-            "maxHeight": 136,
-            "overflow": "hidden",
-          },
-          false,
-        ]
+        {
+          "opacity": 1,
+        }
       }
     >
-      <View>
-        <View
-          accessibilityHint="Select for more options"
-          accessibilityRole="imagebutton"
-          accessibilityState={
+      <View
+        style={
+          [
             {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": undefined,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
+              "backgroundColor": "hsl(43, 18%, 92%)",
+              "borderColor": "hsl(200, 13%, 87%)",
+              "borderRadius": 8,
+              "borderWidth": 1,
+              "marginBottom": 8,
+              "overflow": "hidden",
+            },
             {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
+              "height": 64,
+              "marginRight": 8,
+              "width": 64,
+            },
+          ]
+        }
+      >
+        <View
+          accessibilityLabel="image.jpeg"
           accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "opacity": 1,
-            }
-          }
         >
           <View
+            accessibilityIgnoresInvertColors={true}
             style={
               [
                 {
-                  "backgroundColor": "hsl(43, 18%, 92%)",
-                  "borderColor": "hsl(200, 13%, 87%)",
-                  "borderRadius": 8,
-                  "borderWidth": 1,
-                  "marginBottom": 8,
-                  "overflow": "hidden",
+                  "alignItems": "center",
+                  "justifyContent": "center",
+                  "width": "100%",
                 },
                 {
-                  "height": 64,
-                  "marginRight": 8,
-                  "width": 64,
+                  "height": "100%",
                 },
               ]
             }
           >
-            <View
-              accessibilityLabel="image.jpeg"
-              accessible={true}
-            >
-              <View
-                accessibilityIgnoresInvertColors={true}
-                style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "justifyContent": "center",
-                      "width": "100%",
-                    },
-                    {
-                      "height": "100%",
-                    },
-                  ]
+            <Image
+              onLoadEnd={[Function]}
+              onLoadStart={[Function]}
+              resizeMode="cover"
+              source={
+                {
+                  "uri": "https://imageurl.com/ababathumb.jpg",
                 }
-              >
-                <Image
-                  onLoadEnd={[Function]}
-                  onLoadStart={[Function]}
-                  resizeMode="cover"
-                  source={
-                    {
-                      "uri": "https://imageurl.com/ababathumb.jpg",
-                    }
-                  }
-                  style={
-                    [
-                      {
-                        "bottom": 0,
-                        "left": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      },
-                      {
-                        "height": "100%",
-                        "width": "100%",
-                      },
-                      undefined,
-                    ]
-                  }
-                  testID="test-image"
-                />
-              </View>
-            </View>
+              }
+              style={
+                [
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  {
+                    "height": "100%",
+                    "width": "100%",
+                  },
+                  undefined,
+                ]
+              }
+              testID="test-image"
+            />
           </View>
         </View>
       </View>
     </View>
-  </View>,
-  <View
-    collapsable={false}
-    pointerEvents="box-none"
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  >
     <View
-      backdropComponent={[Function]}
-      backgroundStyle={
-        {
-          "borderTopLeftRadius": 24,
-          "borderTopRightRadius": 24,
-        }
-      }
-      enablePanDownToClose={true}
-      handleStyle={
-        {
-          "display": "none",
-        }
-      }
-      keyboardBlurBehavior="restore"
       style={
         {
           "display": "none",
         }
       }
-      testID="bottom-sheet-mock"
+      testID="bottom-sheet-modal-mock"
     >
       <View
-        style={
-          {
-            "paddingBottom": 8,
-            "paddingTop": 8,
-          }
-        }
         testID="bottom-sheet-view"
       >
         <View
@@ -348,6 +299,6 @@ exports[`renders a thumbnail component with attachments 1`] = `
         </View>
       </View>
     </View>
-  </View>,
-]
+  </View>
+</View>
 `;

package/src/index.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/src/utils/meta/meta.json

@@ -9,6 +9,7 @@
     "AtlantisContext.Provider",
     "AtlantisFormContext.Consumer",
     "AtlantisFormContext.Provider",
+    "AtlantisOverlayProvider",
     "AtlantisThemeContextProvider",
     "AutoLink",
     "Banner",
@@ -69,4 +70,4 @@
     "Typography",
     "TypographyGestureDetector"
   ]
-}
+}