@jobber/components-native 0.98.5 → 0.100.0

package/src/Form/Form.test.tsx

@@ -1,7 +1,6 @@
 import React, { type ReactElement } from "react";
 import { act, fireEvent, render, waitFor } from "@testing-library/react-native";
 import { Alert, Keyboard } from "react-native";
-import { Host } from "react-native-portalize";
 import type { FormBannerMessage } from ".";
 import { Form, FormBannerMessageType } from ".";
 import type { FormBannerErrors } from "./types";
@@ -139,61 +138,59 @@ function MockForm({
   }
 
   return (
-    <Host>
-      <Form
-        onSubmit={onSubmit}
-        onSubmitError={onErrorMock}
-        onSubmitSuccess={onSuccessMock}
-        bannerErrors={formErrors}
-        bannerMessages={bannerMessages}
-        saveButtonLabel={saveLabel}
-        renderStickySection={renderStickySection}
-        initialLoading={initialLoading}
-        initialValues={initialValues}
-        localCacheKey={localCacheKey}
-        localCacheExclude={localCacheExclude}
-        localCacheId={localCacheId}
-        onBeforeSubmit={onBeforeSubmit}
-        renderFooter={renderFooter}
-        saveButtonOffset={saveButtonOffset}
-        UNSAFE_allowDiscardLocalCacheWhenOffline={
-          UNSAFE_allowDiscardLocalCacheWhenOffline
-        }
-      >
+    <Form
+      onSubmit={onSubmit}
+      onSubmitError={onErrorMock}
+      onSubmitSuccess={onSuccessMock}
+      bannerErrors={formErrors}
+      bannerMessages={bannerMessages}
+      saveButtonLabel={saveLabel}
+      renderStickySection={renderStickySection}
+      initialLoading={initialLoading}
+      initialValues={initialValues}
+      localCacheKey={localCacheKey}
+      localCacheExclude={localCacheExclude}
+      localCacheId={localCacheId}
+      onBeforeSubmit={onBeforeSubmit}
+      renderFooter={renderFooter}
+      saveButtonOffset={saveButtonOffset}
+      UNSAFE_allowDiscardLocalCacheWhenOffline={
+        UNSAFE_allowDiscardLocalCacheWhenOffline
+      }
+    >
+      <InputText
+        name={testInputTextName}
+        placeholder={testInputTextPlaceholder}
+        onChangeText={onChangeMock}
+        accessibilityLabel={testInputTextPlaceholder}
+        validations={{
+          required: requiredInputText,
+          minLength: { value: 3, message: minLengthText },
+        }}
+      />
+      {Array.isArray(localCacheExclude) && localCacheExclude.length > 0 && (
         <InputText
-          name={testInputTextName}
-          placeholder={testInputTextPlaceholder}
-          onChangeText={onChangeMock}
-          accessibilityLabel={testInputTextPlaceholder}
-          validations={{
-            required: requiredInputText,
-            minLength: { value: 3, message: minLengthText },
-          }}
-        />
-        {Array.isArray(localCacheExclude) && localCacheExclude.length > 0 && (
-          <InputText
-            name={testInputTextNameExclude}
-            placeholder={testInputTextPlaceholderExclude}
-          />
-        )}
-        <Select
-          onChange={onChangeSelectMock}
-          label={selectLabel}
-          name={testSelectName}
-        >
-          <Option value={"1"}>1</Option>
-          <Option value={"2"}>2</Option>
-        </Select>
-        <Switch
-          name={testSwitchName}
-          label="Test Switch"
-          accessibilityLabel={switchLabel}
-          onValueChange={onChangeSwitchMock}
+          name={testInputTextNameExclude}
+          placeholder={testInputTextPlaceholderExclude}
         />
-        <InputNumber name={testInputNumberName} placeholder="Test Num" />
-        <Checkbox name={testCheckboxName} accessibilityLabel={checkboxLabel} />
-      </Form>
-    </Host>
+      )}
+      <Select
+        onChange={onChangeSelectMock}
+        label={selectLabel}
+        name={testSelectName}
+      >
+        <Option value={"1"}>1</Option>
+        <Option value={"2"}>2</Option>
+      </Select>
+      <Switch
+        name={testSwitchName}
+        label="Test Switch"
+        accessibilityLabel={switchLabel}
+        onValueChange={onChangeSwitchMock}
+      />
+      <InputNumber name={testInputNumberName} placeholder="Test Num" />
+      <Checkbox name={testCheckboxName} accessibilityLabel={checkboxLabel} />
+    </Form>
   );
 }
 

package/src/Form/components/FormSaveButton/FormSaveButton.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 type { IconNames } from "@jobber/design";
 import { FormSaveButton } from "./FormSaveButton";
 
@@ -31,15 +30,13 @@ jest.mock("react-hook-form", () => ({
 
 function ButtonGroupForTest(props: TestFormSaveButtonProps) {
   return (
-    <Host>
-      <FormSaveButton
-        primaryAction={props.primaryAction}
-        loading={props.loading}
-        label={props.label}
-        setSecondaryActionLoading={props.setSecondaryActionLoading}
-        secondaryActions={props.secondaryAction}
-      />
-    </Host>
+    <FormSaveButton
+      primaryAction={props.primaryAction}
+      loading={props.loading}
+      label={props.label}
+      setSecondaryActionLoading={props.setSecondaryActionLoading}
+      secondaryActions={props.secondaryAction}
+    />
   );
 }
 

package/src/FormatFile/FormatFile.stories.tsx

@@ -1,8 +1,7 @@
 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 { FormatFile } from "@jobber/components-native";
+import { AtlantisOverlayProvider, FormatFile } from "@jobber/components-native";
 
 const meta = {
   title: "Components/Images and Icons/FormatFile",
@@ -17,7 +16,7 @@ type Story = StoryObj<Partial<React.ComponentProps<typeof FormatFile>>>;
 
 const BasicTemplate = (args: Story["args"]) => (
   <SafeAreaProvider>
-    <Host>
+    <AtlantisOverlayProvider>
       <FormatFile
         file={
           args?.file ?? {
@@ -39,7 +38,7 @@ const BasicTemplate = (args: Story["args"]) => (
         showFileTypeIndicator={args?.showFileTypeIndicator}
         createThumbnail={args?.createThumbnail}
       />
-    </Host>
+    </AtlantisOverlayProvider>
   </SafeAreaProvider>
 );
 

package/src/FormatFile/FormatFile.test.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import type { RenderAPI } from "@testing-library/react-native";
 import { fireEvent, render, waitFor } from "@testing-library/react-native";
 import { Alert } from "react-native";
-import { Host } from "react-native-portalize";
 import type { File } from ".";
 import { FormatFile } from ".";
 import {
@@ -42,19 +41,17 @@ const renderFormatFile = (
   showFileTypeIndicator?: boolean,
 ) => {
   return render(
-    <Host>
-      <FormatFile
-        file={file}
-        accessibilityLabel="Custom Label"
-        accessibilityHint="Custom Hint Text"
-        onTap={() => Alert.alert("alert")}
-        onRemove={onRemove}
-        bottomSheetOptionsSuffix={bottomSheetOptionsSuffix}
-        showFileTypeIndicator={showFileTypeIndicator}
-        onPreviewPress={mockOnPreview}
-        createThumbnail={mockCreateThumbnail}
-      />
-    </Host>,
+    <FormatFile
+      file={file}
+      accessibilityLabel="Custom Label"
+      accessibilityHint="Custom Hint Text"
+      onTap={() => Alert.alert("alert")}
+      onRemove={onRemove}
+      bottomSheetOptionsSuffix={bottomSheetOptionsSuffix}
+      showFileTypeIndicator={showFileTypeIndicator}
+      onPreviewPress={mockOnPreview}
+      createThumbnail={mockCreateThumbnail}
+    />,
   );
 };
 

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/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");
+    });
+  });
 });

package/src/InputText/InputText.tsx

@@ -14,7 +14,8 @@ import type {
   TextInputProps,
   TextStyle,
 } from "react-native";
-import { Platform, TextInput } from "react-native";
+import { Platform, TextInput, findNodeHandle } from "react-native";
+import { useBottomSheetInternal } from "@gorhom/bottom-sheet";
 import type { RegisterOptions } from "react-hook-form";
 import type { IconNames } from "@jobber/design";
 import identity from "lodash/identity";
@@ -22,6 +23,7 @@ import type { Clearable } from "@jobber/hooks";
 import { useShowClear } from "@jobber/hooks";
 import { useStyles } from "./InputText.style";
 import { useInputAccessoriesContext } from "./context";
+import { useIsKeyboardHandledByScrollView } from "../ContentOverlay";
 import { useFormController } from "../hooks";
 import type {
   InputFieldStyleOverride,
@@ -315,6 +317,20 @@ function InputTextInternal(
     disabled,
   });
 
+  // When inside a scrollable ContentOverlay, keyboard offset is handled by
+  // KeyboardAwareScrollView. Registering with the bottom-sheet's keyboard
+  // state would cause double-counted spacing, so we skip it.
+  const isKeyboardHandledByScrollView = useIsKeyboardHandledByScrollView();
+  const bottomSheetContext = useBottomSheetInternal(true);
+  const shouldHandleBottomSheetKeyboard =
+    bottomSheetContext !== null && !isKeyboardHandledByScrollView;
+  const animatedKeyboardState = shouldHandleBottomSheetKeyboard
+    ? bottomSheetContext.animatedKeyboardState
+    : undefined;
+  const textInputNodesRef = shouldHandleBottomSheetKeyboard
+    ? bottomSheetContext.textInputNodesRef
+    : undefined;
+
   // Android doesn't have an accessibility label like iOS does. By adding
   // it as a placeholder it readds it like a label. However we don't want to
   // add a placeholder on iOS.
@@ -439,11 +455,13 @@ function InputTextInternal(
         secureTextEntry={secureTextEntry}
         {...androidA11yProps}
         onFocus={event => {
+          handleBottomSheetFocus(event);
           _name && setFocusedInput(_name);
           setFocused(true);
           onFocus?.(event);
         }}
         onBlur={event => {
+          handleBottomSheetBlur(event);
           _name && setFocusedInput("");
           setFocused(false);
           onBlur?.(event);
@@ -470,6 +488,48 @@ function InputTextInternal(
     updateFormAndState(removedIOSCharValue);
   }
 
+  function handleBottomSheetFocus(event?: FocusEvent) {
+    if (!animatedKeyboardState || !textInputNodesRef || !event?.nativeEvent) {
+      return;
+    }
+
+    animatedKeyboardState.set(state => ({
+      ...state,
+      target: event.nativeEvent.target,
+    }));
+  }
+
+  function handleBottomSheetBlur(event?: FocusEvent) {
+    if (!animatedKeyboardState || !textInputNodesRef || !event?.nativeEvent) {
+      return;
+    }
+    const keyboardState = animatedKeyboardState.get();
+    const currentlyFocusedInput = TextInput.State.currentlyFocusedInput();
+    const currentFocusedInput =
+      currentlyFocusedInput !== null
+        ? findNodeHandle(
+            // @ts-expect-error - TextInput.State.currentlyFocusedInput() returns NativeMethods
+            // which is not directly assignable to findNodeHandle's expected type,
+            // but it works at runtime. This is a known type limitation in React Native.
+            currentlyFocusedInput,
+          )
+        : null;
+
+    // Only remove the target if it belongs to the current component
+    // and if the currently focused input is not in the targets set
+    const shouldRemoveCurrentTarget =
+      keyboardState.target === event.nativeEvent.target;
+    const shouldIgnoreBlurEvent =
+      currentFocusedInput && textInputNodesRef.current.has(currentFocusedInput);
+
+    if (shouldRemoveCurrentTarget && !shouldIgnoreBlurEvent) {
+      animatedKeyboardState.set(state => ({
+        ...state,
+        target: undefined,
+      }));
+    }
+  }
+
   function handleClear() {
     handleChangeText("");
   }
@@ -516,7 +576,7 @@ interface UseTextInputRefProps {
 }
 
 function useTextInputRef({ ref, onClear }: UseTextInputRefProps) {
-  const textInputRef = useRef<InputTextRef | null>(null);
+  const textInputRef = useRef<TextInput | null>(null);
 
   useImperativeHandle(
     ref,

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>
 );