@jobber/components-native 0.99.0 → 0.100.0

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/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";