@jobber/components-native 0.98.4 → 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";
@@ -35,7 +36,6 @@ export * from "./InputPressable";
 export * from "./InputSearch";
 export * from "./InputText";
 export * from "./InputTime";
-export * from "./Menu";
 export * from "./ProgressBar";
 export * from "./Select";
 export * from "./StatusLabel";

package/src/utils/meta/meta.json

@@ -9,6 +9,7 @@
     "AtlantisContext.Provider",
     "AtlantisFormContext.Consumer",
     "AtlantisFormContext.Provider",
+    "AtlantisOverlayProvider",
     "AtlantisThemeContextProvider",
     "AutoLink",
     "Banner",
@@ -56,7 +57,6 @@
     "InputSearch",
     "InputText",
     "InputTime",
-    "Menu",
     "Option",
     "ProgressBar",
     "Select",
@@ -70,4 +70,4 @@
     "Typography",
     "TypographyGestureDetector"
   ]
-}
+}

package/dist/src/Menu/Menu.js

@@ -1,85 +0,0 @@
-import React, { useCallback, useRef, useState } from "react";
-import { Keyboard, Platform, Pressable, View, useWindowDimensions, } from "react-native";
-import { Portal } from "react-native-portalize";
-import { useSafeAreaFrame } from "react-native-safe-area-context";
-import { useStyles } from "./Menu.style";
-import { findViewpoint } from "./utils";
-import { MenuOption } from "./components/MenuOption";
-import { Overlay } from "./components/Overlay";
-import { Button } from "../Button";
-import { Content } from "../Content";
-import { useAtlantisContext } from "../AtlantisContext";
-import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
-import { useAtlantisTheme } from "../AtlantisThemeContext";
-export function Menu({ menuOptions, customActivator }) {
-    const [open, setOpen] = useState(false);
-    const [menuPosition, setMenuPosition] = useState();
-    const activatorLayout = useRef(null);
-    const menuButtonRef = useRef(null);
-    const screenInfo = useScreenInformation();
-    const { t } = useAtlantisI18n();
-    const styles = useStyles();
-    const findMenuLayout = useCallback(() => {
-        if (activatorLayout.current) {
-            setMenuPosition(findViewpoint(screenInfo, activatorLayout.current, styles));
-        }
-    }, [screenInfo, activatorLayout, styles]);
-    const openMenu = () => {
-        var _a;
-        (_a = menuButtonRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow((x, y, width, height) => {
-            activatorLayout.current = {
-                x,
-                y,
-                width,
-                height,
-            };
-            findMenuLayout();
-            setOpen(true);
-        });
-    };
-    const activatorOnPress = (onPress) => {
-        onPress && onPress();
-        if (Platform.OS === "ios" && Keyboard.isVisible()) {
-            // On iOS, the keyboard height causes problems with the menu positioning logic.
-            // Wait until the keyboard is fully hidden before we show the menu.
-            onKeyboardDidHide(openMenu);
-            Keyboard.dismiss();
-        }
-        else {
-            openMenu();
-        }
-    };
-    const { tokens } = useAtlantisTheme();
-    return (React.createElement(React.Fragment, null,
-        React.createElement(View, { ref: ref => {
-                menuButtonRef.current = ref;
-            }, collapsable: false },
-            customActivator && (React.createElement(Pressable, { style: ({ pressed }) => [
-                    {
-                        opacity: pressed ? tokens["opacity-pressed"] : 1,
-                    },
-                ], pointerEvents: "box-only", onPress: () => {
-                    activatorOnPress(customActivator.props.onPress);
-                }, onLongPress: customActivator.props.onLongPress }, customActivator)),
-            !customActivator && (React.createElement(Button, { icon: "more", accessibilityLabel: t("menu"), variation: "cancel", type: "tertiary", onPress: () => {
-                    activatorOnPress();
-                } }))),
-        React.createElement(Portal, null, open && (React.createElement(React.Fragment, null,
-            React.createElement(Overlay, { setOpen: setOpen }),
-            React.createElement(View, { style: [open && menuPosition, styles.menu] },
-                React.createElement(Content, { spacing: "none", childSpacing: "small" }, menuOptions === null || menuOptions === void 0 ? void 0 : menuOptions.map((menuOption, index) => {
-                    return (React.createElement(MenuOption, Object.assign({}, menuOption, { key: index, setOpen: setOpen })));
-                }))))))));
-}
-function useScreenInformation() {
-    const { headerHeight } = useAtlantisContext();
-    const windowWidth = useWindowDimensions().width;
-    const { height: windowHeight } = useSafeAreaFrame();
-    return { headerHeight, windowWidth, windowHeight };
-}
-function onKeyboardDidHide(callback) {
-    const listener = Keyboard.addListener("keyboardDidHide", () => {
-        listener.remove();
-        callback();
-    });
-}

package/dist/src/Menu/Menu.style.js

@@ -1,7 +0,0 @@
-import { buildThemedStyles } from "../AtlantisThemeContext";
-const menuWidth = 208;
-export const useStyles = buildThemedStyles(tokens => {
-    return {
-        menu: Object.assign({ position: "absolute", backgroundColor: tokens["color-surface"], paddingHorizontal: tokens["space-small"], paddingVertical: tokens["space-small"] + tokens["space-smallest"], borderRadius: tokens["radius-base"], width: menuWidth }, tokens["shadow-high"]),
-    };
-});