@jobber/components-native 0.98.5 → 0.100.0

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"
   ]
-}
+}

package/dist/src/ContentOverlay/UNSAFE_WrappedModalize.js

@@ -1,23 +0,0 @@
-import React, { forwardRef, useImperativeHandle, useRef, useState, } from "react";
-import { Modalize } from "react-native-modalize";
-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<any>, "ref"> & React.RefAttributes<IHandles | undefined>>;

package/src/ContentOverlay/UNSAFE_WrappedModalize.tsx

@@ -1,41 +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>;
-
-export const UNSAFE_WrappedModalize = forwardRef<IHandles | undefined, 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";