@jobber/components-native 0.95.3 → 0.95.4-improve-co-ca924fd.14

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";
@@ -315,6 +316,11 @@ function InputTextInternal(
     disabled,
   });
 
+  // Bottom sheet keyboard handling - detect if we're inside a ContentOverlay
+  const bottomSheetContext = useBottomSheetInternal(true);
+  const animatedKeyboardState = bottomSheetContext?.animatedKeyboardState;
+  const textInputNodesRef = bottomSheetContext?.textInputNodesRef;
+
   // 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.
@@ -438,11 +444,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);
@@ -469,6 +477,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("");
   }
@@ -515,7 +565,7 @@ interface UseTextInputRefProps {
 }
 
 function useTextInputRef({ ref, onClear }: UseTextInputRefProps) {
-  const textInputRef = useRef<InputTextRef | null>(null);
+  const textInputRef = useRef<TextInput | null>(null);
 
   useImperativeHandle(
     ref,

package/src/ThumbnailList/__snapshots__/ThumbnailList.test.tsx.snap

@@ -152,20 +152,6 @@ exports[`renders a thumbnail component with attachments 1`] = `
     }
   >
     <View
-      backdropComponent={[Function]}
-      backgroundStyle={
-        {
-          "borderTopLeftRadius": 24,
-          "borderTopRightRadius": 24,
-        }
-      }
-      enablePanDownToClose={true}
-      handleStyle={
-        {
-          "display": "none",
-        }
-      }
-      keyboardBlurBehavior="restore"
       style={
         {
           "display": "none",
@@ -174,12 +160,6 @@ exports[`renders a thumbnail component with attachments 1`] = `
       testID="bottom-sheet-mock"
     >
       <View
-        style={
-          {
-            "paddingBottom": 8,
-            "paddingTop": 8,
-          }
-        }
         testID="bottom-sheet-view"
       >
         <View

package/src/utils/meta/meta.json

@@ -23,6 +23,7 @@
     "Chip",
     "Content",
     "ContentOverlay",
+    "ContentOverlayProvider",
     "Disclosure",
     "Divider",
     "EmptyState",

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