@jobber/components-native 0.99.0 → 0.100.0

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

@@ -0,0 +1,11 @@
+import type { KeyboardAwareScrollViewProps } from "react-native-keyboard-controller";
+import { type BottomSheetScrollViewMethods } from "@gorhom/bottom-sheet";
+declare const BottomSheetKeyboardAwareScrollView: import("react").NamedExoticComponent<{
+    bottomOffset?: number;
+    disableScrollOnKeyboardHide?: boolean;
+    enabled?: boolean;
+    extraKeyboardSpace?: number;
+    ScrollViewComponent?: React.ComponentType<import("react-native").ScrollViewProps>;
+} & import("react-native").ScrollViewProps & import("react").RefAttributes<BottomSheetScrollViewMethods>>;
+export { BottomSheetKeyboardAwareScrollView };
+export type { KeyboardAwareScrollViewProps };

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

@@ -1,7 +1,4 @@
 import React from "react";
-import type { Modalize } from "react-native-modalize";
 import type { ContentOverlayProps } from "./types";
-export declare const ContentOverlay: React.ForwardRefExoticComponent<ContentOverlayProps & React.RefAttributes<{
-    open?: Modalize["open"];
-    close?: Modalize["close"];
-} | undefined>>;
+export declare function useIsKeyboardHandledByScrollView(): boolean;
+export declare function ContentOverlay({ children, title, accessibilityLabel, fullScreen, showDismiss, isDraggable, adjustToContentHeight, keyboardShouldPersistTaps, scrollEnabled, modalBackgroundColor, onClose, onOpen, onBeforeExit, loading, ref, }: ContentOverlayProps): React.JSX.Element;

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

@@ -1,32 +1,33 @@
 export declare const useStyles: () => {
+    handleWrapper: {
+        paddingBottom: number;
+        paddingTop: number;
+    };
     handle: {
         width: number;
         height: number;
         backgroundColor: string;
-        top: number;
         borderRadius: number;
     };
-    overlay: {
+    backdrop: {
         backgroundColor: string;
     };
-    modal: {
+    background: {
         borderTopLeftRadius: number;
         borderTopRightRadius: number;
     };
-    modalForLargeScreens: {
-        width: number;
-        alignSelf: "center";
-    };
     header: {
         flexDirection: "row";
-        backgroundColor: string;
-        paddingTop: number;
         zIndex: number;
+        minHeight: number;
         borderTopLeftRadius: number;
         borderTopRightRadius: number;
-        minHeight: number;
     };
     headerShadow: {
+        position: "absolute";
+        top: number;
+        height: number;
+        width: "100%";
         shadowColor: string;
         shadowOffset: {
             width: number;

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

@@ -0,0 +1,32 @@
+export interface ContentOverlayConfig {
+    fullScreen: boolean;
+    adjustToContentHeight: boolean;
+    isDraggable: boolean;
+    hasOnBeforeExit: boolean;
+    showDismiss: boolean;
+}
+export interface ContentOverlayState {
+    isScreenReaderEnabled: boolean;
+    position: number;
+}
+export type InitialHeight = "fullScreen" | "contentHeight";
+export interface ContentOverlayBehavior {
+    initialHeight: InitialHeight;
+    isDraggable: boolean;
+    showDismiss: boolean;
+}
+/**
+ * Computes the abstract behavior of ContentOverlay from its props and state.
+ *
+ * This pure function documents and centralizes the complex logic that determines:
+ * - Initial height mode (fullScreen vs contentHeight)
+ * - Whether the overlay is draggable
+ * - Whether the dismiss button should be shown
+ *
+ * The logic accounts for legacy behavior where:
+ * - `onBeforeExit` silently overrides `isDraggable` to false
+ * - Default props (neither fullScreen nor adjustToContentHeight) are treated
+ *   as contentHeight for the new implementation
+ * - Dismiss button visibility depends on multiple factors including position state
+ */
+export declare function computeContentOverlayBehavior(config: ContentOverlayConfig, state: ContentOverlayState): ContentOverlayBehavior;

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

@@ -0,0 +1 @@
+export declare const KEYBOARD_TOP_PADDING_AUTO_SCROLL = 20;

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

@@ -0,0 +1,7 @@
+/**
+ * Hook that dismisses the bottom sheet on the hardware back button press if it is visible
+ * @param bottomSheetModalRef ref to the bottom sheet modal component
+ */
+export declare function useBottomSheetModalBackHandler(onCloseController: () => void): {
+    handleSheetPositionChange: (index: number) => void;
+};

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

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

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

@@ -1,5 +1,4 @@
-import type { ReactNode } from "react";
-import type { Modalize } from "react-native-modalize";
+import type { ReactNode, Ref } from "react";
 export interface ContentOverlayProps {
     /**
      * Content to be passed into the overlay
@@ -64,24 +63,18 @@ export interface ContentOverlayProps {
      * Callback that is called between overlay is closed and when the "x" button is pressed
      */
     readonly onBeforeExit?: () => void;
-    /**
-     * Define the behavior of the keyboard when having inputs inside the modal.
-     * @default padding
-     */
-    readonly keyboardAvoidingBehavior?: "height" | "padding" | "position";
     /**
      * Boolean to show a disabled state
      * @default false
      */
     readonly loading?: boolean;
     /**
-     * Define keyboard's Android behavior like iOS's one.
-     * @default Platform.select({ ios: true, android: false })
+     * Ref to the content overlay component.
      */
-    readonly avoidKeyboardLikeIOS?: boolean;
+    readonly ref?: Ref<ContentOverlayRef>;
 }
 export type ModalBackgroundColor = "surface" | "background";
 export type ContentOverlayRef = {
-    open?: Modalize["open"];
-    close?: Modalize["close"];
+    open?: () => void;
+    close?: () => void;
 } | undefined;

package/jestSetup.js

@@ -16,6 +16,8 @@ jest.mock("./dist/src/Button/components/InternalButtonLoading", () => {
   };
 });
 
+// NOTE: this is the old way we used to mock reanimated. We actually do not need to mock it anymore.
+// To ensure correct test behaviour, please add `jest.unmock("react-native-reanimated")` to your test suite.
 jest.mock("react-native-reanimated", () => {
   const reanimated = require("react-native-reanimated/mock");
   const timing = () => ({ start: () => undefined });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.99.0",
+  "version": "0.100.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -46,8 +46,6 @@
     "react-hook-form": "^7.52.0",
     "react-intl": "^7.1.11",
     "react-native-keyboard-controller": "^1.20.7",
-    "react-native-modalize": "^2.0.13",
-    "react-native-portalize": "^1.0.7",
     "react-native-toast-message": "^2.1.6",
     "react-native-uuid": "^1.4.9",
     "ts-xor": "^1.1.0"
@@ -69,6 +67,7 @@
     "date-fns-tz": "^2.0.0",
     "react-native": "^0.82.1",
     "react-native-gesture-handler": "^2.29.1",
+    "react-native-keyboard-controller": "^1.12.0",
     "react-native-modal-datetime-picker": "^18.0.0",
     "react-native-reanimated": "^3.7.1",
     "react-native-safe-area-context": "^5.4.0",
@@ -90,11 +89,9 @@
     "react-native-gesture-handler": ">=2.22.0",
     "react-native-keyboard-controller": "^1.20.7",
     "react-native-modal-datetime-picker": " >=13.0.0",
-    "react-native-modalize": "^2.0.13",
-    "react-native-portalize": "^1.0.7",
     "react-native-reanimated": "^3.0.0",
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "c92c33f8e0a06cbc2addce9eca3005c1231a9202"
+  "gitHead": "2ef76c22620e1627eca8cf576b35e78228262574"
 }

package/src/ContentOverlay/BottomSheetKeyboardAwareScrollView.tsx

@@ -0,0 +1,36 @@
+import { memo } from "react";
+import type { KeyboardAwareScrollViewProps } from "react-native-keyboard-controller";
+import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
+import {
+  type BottomSheetScrollViewMethods,
+  SCROLLABLE_TYPE,
+  createBottomSheetScrollableComponent,
+} from "@gorhom/bottom-sheet";
+import Reanimated from "react-native-reanimated";
+
+/**
+ * A keyboard-aware scroll view component that integrates with @gorhom/bottom-sheet.
+ *
+ * This component wraps `KeyboardAwareScrollView` from `react-native-keyboard-controller`
+ * with the bottom sheet HOCs to ensure proper keyboard handling on Android when using
+ * TextInputs inside a BottomSheet.
+ *
+ * @see https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-aware-scroll-view#gorhombottom-sheet
+ */
+const AnimatedScrollView =
+  Reanimated.createAnimatedComponent<KeyboardAwareScrollViewProps>(
+    KeyboardAwareScrollView,
+  );
+
+const BottomSheetScrollViewComponent = createBottomSheetScrollableComponent<
+  BottomSheetScrollViewMethods,
+  KeyboardAwareScrollViewProps
+>(SCROLLABLE_TYPE.SCROLLVIEW, AnimatedScrollView);
+
+const BottomSheetKeyboardAwareScrollView = memo(BottomSheetScrollViewComponent);
+
+BottomSheetKeyboardAwareScrollView.displayName =
+  "BottomSheetKeyboardAwareScrollView";
+
+export { BottomSheetKeyboardAwareScrollView };
+export type { KeyboardAwareScrollViewProps };

package/src/ContentOverlay/ContentOverlay.stories.tsx

@@ -1,23 +1,15 @@
 import React, { useRef } from "react";
 import { View } from "react-native";
 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 type { ContentOverlayRef } from "@jobber/components-native";
-import {
-  Button,
-  Content,
-  ContentOverlay,
-  Text,
-} from "@jobber/components-native";
+import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+import { Button, Heading, Text } from "@jobber/components-native";
+import { ContentOverlay } from "./ContentOverlay";
+import type { ContentOverlayRef } from "./types";
 
 const meta = {
   title: "Components/Overlays/ContentOverlay",
   component: ContentOverlay,
-  parameters: {
-    viewport: { defaultViewport: "mobile1" },
-    showNativeOnWebDisclaimer: true,
-  },
 } satisfies Meta<typeof ContentOverlay>;
 export default meta;
 
@@ -30,36 +22,40 @@ interface ContentOverlayStoryArgs {
 
 type Story = StoryObj<ContentOverlayStoryArgs>;
 
-const BasicTemplate = (args: ContentOverlayStoryArgs) => {
+const BasicTemplate = () => {
   const contentOverlayRef = useRef<ContentOverlayRef>(null);
 
+  const openContentOverlay = () => {
+    contentOverlayRef.current?.open?.();
+  };
+
+  const closeContentOverlay = () => {
+    contentOverlayRef.current?.close?.();
+  };
+
   return (
     <SafeAreaProvider>
-      <Host>
-        <View
-          style={{
-            width: 300,
-          }}
+      <BottomSheetModalProvider>
+        <View style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+          <Heading>Basic ContentOverlay</Heading>
+          <Text>
+            Note that due to the differences between React Native Web and React
+            Native, this does not render 100% properly
+          </Text>
+          <Button label="Open Content Overlay" onPress={openContentOverlay} />
+          <Button label="Close Content Overlay" onPress={closeContentOverlay} />
+        </View>
+        <ContentOverlay
+          ref={contentOverlayRef}
+          title="Content Overlay Title"
+          onClose={() => console.log("closed content overlay")}
+          onOpen={() => console.log("opened content overlay")}
         >
-          <ContentOverlay
-            title={args.title}
-            onClose={args.onClose}
-            onOpen={args.onOpen}
-            fullScreen={args.fullScreen}
-            ref={contentOverlayRef}
-          >
-            <Content>
-              <Text>I am some text inside the ContentOverlay.</Text>
-            </Content>
-          </ContentOverlay>
-          <View>
-            <Button
-              label="Open Overlay"
-              onPress={() => contentOverlayRef.current?.open?.()}
-            />
+          <View style={{ padding: 16 }}>
+            <Text>This is the content inside the overlay.</Text>
           </View>
-        </View>
-      </Host>
+        </ContentOverlay>
+      </BottomSheetModalProvider>
     </SafeAreaProvider>
   );
 };

package/src/ContentOverlay/ContentOverlay.style.ts

@@ -2,43 +2,43 @@ import { buildThemedStyles } from "../AtlantisThemeContext";
 
 export const useStyles = buildThemedStyles(tokens => {
   const modalBorderRadius = tokens["radius-larger"];
-  const titleOffsetFromHandle = tokens["space-base"];
 
   return {
+    handleWrapper: {
+      paddingBottom: tokens["space-smallest"],
+      paddingTop: tokens["space-small"],
+    },
+
     handle: {
       width: tokens["space-largest"],
       height: tokens["space-smaller"] + tokens["space-smallest"],
       backgroundColor: tokens["color-border"],
-      top: tokens["space-small"],
       borderRadius: tokens["radius-circle"],
     },
 
-    overlay: {
+    backdrop: {
       backgroundColor: tokens["color-overlay"],
     },
 
-    modal: {
+    background: {
       borderTopLeftRadius: modalBorderRadius,
       borderTopRightRadius: modalBorderRadius,
     },
 
-    modalForLargeScreens: {
-      width: 640,
-      alignSelf: "center",
-    },
-
     header: {
       flexDirection: "row",
-      backgroundColor: tokens["color-surface"],
-      paddingTop: titleOffsetFromHandle,
       zIndex: tokens["elevation-base"],
+      minHeight: tokens["space-extravagant"] - tokens["space-base"],
       borderTopLeftRadius: modalBorderRadius,
       borderTopRightRadius: modalBorderRadius,
-      minHeight: tokens["space-extravagant"],
     },
 
     headerShadow: {
       ...tokens["shadow-base"],
+      position: "absolute",
+      top: -20,
+      height: 20,
+      width: "100%",
     },
 
     childrenStyle: {