@jobber/components-native 0.99.0 → 0.100.1

package/src/ContentOverlay/computeContentOverlayBehavior.test.ts

@@ -0,0 +1,276 @@
+import type {
+  ContentOverlayConfig,
+  ContentOverlayState,
+} from "./computeContentOverlayBehavior";
+import { computeContentOverlayBehavior } from "./computeContentOverlayBehavior";
+
+const arbitraryClosedPositionValue = 768;
+
+const defaultConfig: ContentOverlayConfig = {
+  fullScreen: false,
+  adjustToContentHeight: false,
+  isDraggable: true,
+  hasOnBeforeExit: false,
+  showDismiss: false,
+};
+
+const defaultState: ContentOverlayState = {
+  isScreenReaderEnabled: false,
+  position: arbitraryClosedPositionValue,
+};
+
+function aConfig(
+  overrides: Partial<ContentOverlayConfig> = {},
+): ContentOverlayConfig {
+  return {
+    ...defaultConfig,
+    ...overrides,
+  };
+}
+
+function aState(
+  overrides: Partial<ContentOverlayState> = {},
+): ContentOverlayState {
+  return {
+    ...defaultState,
+    ...overrides,
+  };
+}
+
+describe("computeContentOverlayBehavior", () => {
+  describe("initialHeight", () => {
+    it("returns fullScreen when fullScreen=true", () => {
+      const config = aConfig({ fullScreen: true });
+      const state = aState();
+
+      const result = computeContentOverlayBehavior(config, state);
+
+      expect(result.initialHeight).toBe("fullScreen");
+    });
+
+    it("returns contentHeight when adjustToContentHeight=true", () => {
+      const config = aConfig({ adjustToContentHeight: true });
+      const state = aState();
+
+      const result = computeContentOverlayBehavior(config, state);
+
+      expect(result.initialHeight).toBe("contentHeight");
+    });
+
+    it("returns contentHeight for default props (legacy case)", () => {
+      const config = aConfig();
+      const state = aState();
+
+      const result = computeContentOverlayBehavior(config, state);
+
+      expect(result.initialHeight).toBe("contentHeight");
+    });
+
+    it("returns adjustToContentHeight when adjustToContentHeight=true even if fullScreen=true", () => {
+      const config = aConfig({ fullScreen: true, adjustToContentHeight: true });
+      const state = aState();
+
+      const result = computeContentOverlayBehavior(config, state);
+
+      expect(result.initialHeight).toBe("contentHeight");
+    });
+  });
+
+  describe("isDraggable", () => {
+    it("returns false when onBeforeExit is present regardless of isDraggable prop", () => {
+      const config = aConfig({ isDraggable: true, hasOnBeforeExit: true });
+      const state = aState();
+
+      const result = computeContentOverlayBehavior(config, state);
+
+      expect(result.isDraggable).toBe(false);
+    });
+
+    it("returns false when onBeforeExit is present and isDraggable is false", () => {
+      const config = aConfig({ isDraggable: false, hasOnBeforeExit: true });
+      const state = aState();
+
+      const result = computeContentOverlayBehavior(config, state);
+
+      expect(result.isDraggable).toBe(false);
+    });
+
+    it("respects isDraggable=true when no onBeforeExit", () => {
+      const config = aConfig({ isDraggable: true, hasOnBeforeExit: false });
+      const state = aState();
+
+      const result = computeContentOverlayBehavior(config, state);
+
+      expect(result.isDraggable).toBe(true);
+    });
+
+    it("respects isDraggable=false when no onBeforeExit", () => {
+      const config = aConfig({ isDraggable: false, hasOnBeforeExit: false });
+      const state = aState();
+
+      const result = computeContentOverlayBehavior(config, state);
+
+      expect(result.isDraggable).toBe(false);
+    });
+  });
+
+  describe("showDismiss", () => {
+    it("returns true when showDismiss prop is true", () => {
+      const config = aConfig({ showDismiss: true });
+      const state = aState();
+
+      const result = computeContentOverlayBehavior(config, state);
+
+      expect(result.showDismiss).toBe(true);
+    });
+
+    it("returns true when screen reader is enabled", () => {
+      const config = aConfig({ showDismiss: false });
+      const state = aState({ isScreenReaderEnabled: true });
+
+      const result = computeContentOverlayBehavior(config, state);
+
+      expect(result.showDismiss).toBe(true);
+    });
+
+    it("returns true when fullScreen is true", () => {
+      const config = aConfig({ fullScreen: true, showDismiss: false });
+      const state = aState({ isScreenReaderEnabled: false });
+
+      const result = computeContentOverlayBehavior(config, state);
+
+      expect(result.showDismiss).toBe(true);
+    });
+
+    it("returns true when dragged to top and not adjustToContentHeight (legacy behavior)", () => {
+      const config = aConfig({
+        adjustToContentHeight: false,
+        showDismiss: false,
+      });
+      const state = aState({ position: 0, isScreenReaderEnabled: false });
+
+      const result = computeContentOverlayBehavior(config, state);
+
+      expect(result.showDismiss).toBe(true);
+    });
+
+    it("returns false when position is top but adjustToContentHeight is true", () => {
+      const config = aConfig({
+        adjustToContentHeight: true,
+        showDismiss: false,
+      });
+      const state = aState({ position: 0, isScreenReaderEnabled: false });
+
+      const result = computeContentOverlayBehavior(config, state);
+
+      expect(result.showDismiss).toBe(false);
+    });
+
+    it("returns false when position is initial and no other conditions met", () => {
+      const config = aConfig({
+        showDismiss: false,
+        fullScreen: false,
+        adjustToContentHeight: false,
+      });
+      const state = aState({
+        position: arbitraryClosedPositionValue,
+        isScreenReaderEnabled: false,
+      });
+
+      const result = computeContentOverlayBehavior(config, state);
+
+      expect(result.showDismiss).toBe(false);
+    });
+
+    it("returns false for default props with default state", () => {
+      const config = aConfig();
+      const state = aState();
+
+      const result = computeContentOverlayBehavior(config, state);
+
+      expect(result.showDismiss).toBe(false);
+    });
+  });
+
+  describe("combined behaviors", () => {
+    it("returns expected behavior for fullScreen overlay", () => {
+      const config = aConfig({
+        fullScreen: true,
+        isDraggable: false,
+        showDismiss: true,
+      });
+      const state = aState();
+
+      const result = computeContentOverlayBehavior(config, state);
+
+      expect(result).toEqual({
+        initialHeight: "fullScreen",
+        isDraggable: false,
+        showDismiss: true,
+      });
+    });
+
+    it("returns expected behavior for content-height overlay with adjustToContentHeight", () => {
+      const config = aConfig({
+        adjustToContentHeight: true,
+        showDismiss: true,
+      });
+      const state = aState();
+
+      const result = computeContentOverlayBehavior(config, state);
+
+      expect(result).toEqual({
+        initialHeight: "contentHeight",
+        isDraggable: true,
+        showDismiss: true,
+      });
+    });
+
+    it("returns expected behavior for overlay with onBeforeExit (confirmation flow)", () => {
+      const config = aConfig({
+        adjustToContentHeight: true,
+        hasOnBeforeExit: true,
+        isDraggable: true,
+        showDismiss: true,
+      });
+      const state = aState();
+
+      const result = computeContentOverlayBehavior(config, state);
+
+      expect(result).toEqual({
+        initialHeight: "contentHeight",
+        isDraggable: false,
+        showDismiss: true,
+      });
+    });
+
+    it("returns expected behavior for default props (legacy behavior)", () => {
+      const config = aConfig();
+      const state = aState();
+
+      const result = computeContentOverlayBehavior(config, state);
+
+      expect(result).toEqual({
+        initialHeight: "contentHeight",
+        isDraggable: true,
+        showDismiss: false,
+      });
+    });
+
+    it("returns expected behavior for accessibility case where screen reader forces dismiss button", () => {
+      const config = aConfig({
+        adjustToContentHeight: true,
+        showDismiss: false,
+      });
+      const state = aState({ isScreenReaderEnabled: true });
+
+      const result = computeContentOverlayBehavior(config, state);
+
+      expect(result).toEqual({
+        initialHeight: "contentHeight",
+        isDraggable: true,
+        showDismiss: true,
+      });
+    });
+  });
+});

package/src/ContentOverlay/computeContentOverlayBehavior.ts

@@ -0,0 +1,119 @@
+export interface ContentOverlayConfig {
+  fullScreen: boolean;
+  adjustToContentHeight: boolean;
+  isDraggable: boolean;
+  hasOnBeforeExit: boolean;
+  showDismiss: boolean;
+}
+
+export interface ContentOverlayState {
+  isScreenReaderEnabled: boolean;
+  // Pixel value of delta to the 100% position
+  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 function computeContentOverlayBehavior(
+  config: ContentOverlayConfig,
+  state: ContentOverlayState,
+): ContentOverlayBehavior {
+  const isDraggable = computeIsDraggable(config);
+  const initialHeight = computeInitialHeight(config, isDraggable);
+  const showDismiss = computeShowDismiss(config, state);
+
+  return {
+    initialHeight,
+    isDraggable,
+    showDismiss,
+  };
+}
+
+/**
+ * Order is important to maintain legacy behavior, despite the questionable logic.
+ * A non draggable overlay wants to be fullscreen, so as to have the dismiss button be visible.
+ * There is an invalid combination here with adjustToContentHeight and onBeforeExit which in turn overrides isDraggable to false.
+ * This requires an explicit showDismiss=true or else it will not be possible to dismiss the overlay.
+ */
+function computeInitialHeight(
+  config: ContentOverlayConfig,
+  isDraggable: boolean,
+): InitialHeight {
+  if (config.adjustToContentHeight) {
+    return "contentHeight";
+  }
+
+  if (config.fullScreen) {
+    return "fullScreen";
+  }
+
+  if (!isDraggable) {
+    return "fullScreen";
+  }
+
+  return "contentHeight";
+}
+
+/**
+ * Draggability determination:
+ * - hasOnBeforeExit: true → false (silent override, regardless of isDraggable prop)
+ * - Otherwise → use isDraggable prop value
+ *
+ * This silent override exists because onBeforeExit needs to intercept close attempts,
+ * and dragging would bypass that interception.
+ */
+function computeIsDraggable(config: ContentOverlayConfig): boolean {
+  if (config.hasOnBeforeExit) {
+    return false;
+  }
+
+  return config.isDraggable;
+}
+
+/**
+ * Dismiss button visibility:
+ * The idea behind fullscreen having it is that there may be little room to tap the background to dismiss.
+ * While this logic is redundant with the position, it's a relic of the legacy behavior where position didn't update in time.
+ */
+function computeShowDismiss(
+  config: ContentOverlayConfig,
+  state: ContentOverlayState,
+): boolean {
+  if (config.showDismiss) {
+    return true;
+  }
+
+  if (state.isScreenReaderEnabled) {
+    return true;
+  }
+
+  if (config.fullScreen) {
+    return true;
+  }
+
+  if (!config.adjustToContentHeight && state.position === 0) {
+    return true;
+  }
+
+  return false;
+}

package/src/ContentOverlay/constants.ts

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

package/src/ContentOverlay/hooks/useBottomSheetModalBackHandler.test.ts

@@ -0,0 +1,81 @@
+import { act, renderHook } from "@testing-library/react-native";
+import { BackHandler } from "react-native";
+import { useBottomSheetModalBackHandler } from "./useBottomSheetModalBackHandler";
+
+describe("useBottomSheetModalBackHandler", () => {
+  let mockRemove: jest.Mock;
+  let mockAddEventListener: jest.SpyInstance;
+
+  beforeEach(() => {
+    mockRemove = jest.fn();
+    mockAddEventListener = jest.spyOn(BackHandler, "addEventListener");
+    mockAddEventListener.mockReturnValue({ remove: mockRemove });
+  });
+
+  afterEach(() => {
+    mockAddEventListener.mockRestore();
+  });
+
+  it("should register BackHandler listener when sheet becomes visible", async () => {
+    const onCloseController = jest.fn();
+    const { result } = renderHook(() =>
+      useBottomSheetModalBackHandler(onCloseController),
+    );
+
+    await act(async () => {
+      result.current.handleSheetPositionChange(0);
+    });
+
+    expect(mockAddEventListener).toHaveBeenCalledWith(
+      "hardwareBackPress",
+      expect.any(Function),
+    );
+  });
+
+  it("should call onCloseController when back button is pressed", async () => {
+    const onCloseController = jest.fn();
+    const { result } = renderHook(() =>
+      useBottomSheetModalBackHandler(onCloseController),
+    );
+
+    await act(async () => {
+      result.current.handleSheetPositionChange(0);
+    });
+
+    const registeredCallback = mockAddEventListener.mock.calls[0][1];
+    const returnValue = registeredCallback();
+
+    expect(onCloseController).toHaveBeenCalled();
+    expect(returnValue).toBe(true);
+  });
+
+  it("should remove listener when sheet is dismissed", async () => {
+    const onCloseController = jest.fn();
+    const { result } = renderHook(() =>
+      useBottomSheetModalBackHandler(onCloseController),
+    );
+
+    await act(async () => {
+      result.current.handleSheetPositionChange(0);
+    });
+
+    await act(async () => {
+      result.current.handleSheetPositionChange(-1);
+    });
+
+    expect(mockRemove).toHaveBeenCalled();
+  });
+
+  it("should not register listener when index is negative", async () => {
+    const onCloseController = jest.fn();
+    const { result } = renderHook(() =>
+      useBottomSheetModalBackHandler(onCloseController),
+    );
+
+    await act(async () => {
+      result.current.handleSheetPositionChange(-1);
+    });
+
+    expect(mockAddEventListener).not.toHaveBeenCalled();
+  });
+});

package/src/ContentOverlay/hooks/useBottomSheetModalBackHandler.ts

@@ -0,0 +1,36 @@
+import { useCallback, useRef } from "react";
+import { BackHandler, type NativeEventSubscription } from "react-native";
+
+/**
+ * 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 function useBottomSheetModalBackHandler(onCloseController: () => void) {
+  const backHandlerSubscriptionRef = useRef<NativeEventSubscription | null>(
+    null,
+  );
+
+  const handleSheetPositionChange = useCallback(
+    (index: number) => {
+      const isBottomSheetModalVisible = index >= 0;
+
+      if (isBottomSheetModalVisible && !backHandlerSubscriptionRef.current) {
+        // Setup the back handler if the bottom sheet is right in front of the user
+        backHandlerSubscriptionRef.current = BackHandler.addEventListener(
+          "hardwareBackPress",
+          () => {
+            onCloseController();
+
+            return true;
+          },
+        );
+      } else if (!isBottomSheetModalVisible) {
+        backHandlerSubscriptionRef.current?.remove();
+        backHandlerSubscriptionRef.current = null;
+      }
+    },
+    [onCloseController],
+  );
+
+  return { handleSheetPositionChange };
+}

package/src/ContentOverlay/index.ts

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

package/src/ContentOverlay/types.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 {
   /**
@@ -67,12 +66,6 @@ export interface ContentOverlayProps {
    */
   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
@@ -80,17 +73,16 @@ export interface ContentOverlayProps {
   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/src/InputText/InputText.test.tsx

@@ -836,4 +836,126 @@ describe("Transform", () => {
       });
     });
   });
+
+  describe("Bottom Sheet keyboard handling integration", () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    // eslint-disable-next-line max-statements
+    it("updates animatedKeyboardState on focus when inside ContentOverlay", () => {
+      const mockSet = jest.fn();
+      const mockGet = jest.fn(() => ({ target: undefined }));
+      const mockKeyboardState = {
+        value: { target: undefined },
+        set: mockSet,
+        get: mockGet,
+      };
+
+      const mockTextInputNodesRef = { current: new Set<number>() };
+
+      // Mock the useBottomSheetInternal hook to simulate being inside ContentOverlay
+      jest
+        .spyOn(require("@gorhom/bottom-sheet"), "useBottomSheetInternal")
+        .mockReturnValue({
+          animatedKeyboardState: mockKeyboardState,
+          textInputNodesRef: mockTextInputNodesRef,
+        });
+
+      const a11yLabel = "Test InputText";
+      const { getByLabelText } = render(
+        <InputText accessibilityLabel={a11yLabel} />,
+      );
+
+      const input = getByLabelText(a11yLabel);
+
+      fireEvent(input, "onFocus", {
+        nativeEvent: { target: 123 },
+      });
+
+      expect(mockSet).toHaveBeenCalledWith(expect.any(Function));
+      // Verify the set callback updates the state correctly
+      const setCallback = mockSet.mock.calls[0][0];
+      const newState = setCallback({ target: undefined });
+      expect(newState).toEqual({ target: 123 });
+    });
+
+    // eslint-disable-next-line max-statements
+    it("consumer onFocus and onBlur callbacks still fire when inside ContentOverlay", () => {
+      const focusCallback = jest.fn();
+      const blurCallback = jest.fn();
+      const mockSet = jest.fn();
+      const mockGet = jest.fn(() => ({ target: undefined }));
+      const mockKeyboardState = {
+        value: { target: undefined },
+        set: mockSet,
+        get: mockGet,
+      };
+
+      const mockTextInputNodesRef = { current: new Set<number>() };
+
+      jest
+        .spyOn(require("@gorhom/bottom-sheet"), "useBottomSheetInternal")
+        .mockReturnValue({
+          animatedKeyboardState: mockKeyboardState,
+          textInputNodesRef: mockTextInputNodesRef,
+        });
+
+      const a11yLabel = "Test InputText";
+      const { getByLabelText } = render(
+        <InputText
+          onFocus={focusCallback}
+          onBlur={blurCallback}
+          accessibilityLabel={a11yLabel}
+        />,
+      );
+
+      const input = getByLabelText(a11yLabel);
+
+      fireEvent(input, "onFocus", {
+        nativeEvent: { target: 123 },
+      });
+      expect(focusCallback).toHaveBeenCalled();
+
+      fireEvent(input, "onBlur", {
+        nativeEvent: { target: 123 },
+      });
+      expect(blurCallback).toHaveBeenCalled();
+    });
+
+    it("handles value changes when inside ContentOverlay", () => {
+      const mockSet = jest.fn();
+      const mockGet = jest.fn(() => ({ target: undefined }));
+      const mockKeyboardState = {
+        value: { target: undefined },
+        set: mockSet,
+        get: mockGet,
+      };
+
+      const mockTextInputNodesRef = { current: new Set<number>() };
+      const changeCallback = jest.fn();
+
+      jest
+        .spyOn(require("@gorhom/bottom-sheet"), "useBottomSheetInternal")
+        .mockReturnValue({
+          animatedKeyboardState: mockKeyboardState,
+          textInputNodesRef: mockTextInputNodesRef,
+        });
+
+      const a11yLabel = "Test InputText";
+      const { getByLabelText } = render(
+        <InputText
+          onChangeText={changeCallback}
+          accessibilityLabel={a11yLabel}
+        />,
+      );
+
+      const input = getByLabelText(a11yLabel);
+
+      fireEvent.changeText(input, "New value");
+
+      // Value changes should work normally
+      expect(changeCallback).toHaveBeenCalledWith("New value");
+    });
+  });
 });