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

package/src/InputFieldWrapper/InputFieldWrapper.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import type { StyleProp, TextStyle, ViewStyle } from "react-native";
-import { Text as RNText, View } from "react-native";
+import { PixelRatio, Platform, Text as RNText, View } from "react-native";
 import type { FieldError } from "react-hook-form";
 import type { IconNames } from "@jobber/design";
 import { useStyles } from "./InputFieldWrapper.style";
@@ -112,6 +112,11 @@ export interface InputFieldWrapperProps {
    * Change the type of loading indicator to spinner or glimmer.
    */
   readonly loadingType?: "spinner" | "glimmer";
+
+  /**
+   * Whether the input is a multiline input.
+   */
+  readonly multiline?: boolean;
 }
 
 export const INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID =
@@ -138,6 +143,7 @@ export function InputFieldWrapper({
   toolbarVisibility = "while-editing",
   loading = false,
   loadingType = "spinner",
+  multiline = false,
 }: InputFieldWrapperProps) {
   fieldAffixRequiredPropsCheck([prefix, suffix]);
   const handleClear = onClear ?? noopClear;
@@ -163,6 +169,9 @@ export function InputFieldWrapper({
           (Boolean(invalid) || error) && styles.inputInvalid,
           disabled && styles.disabled,
           styleOverride?.container,
+          shouldApplyScrollTrapWorkaround(multiline) && {
+            maxWidth: "90%",
+          },
         ]}
       >
         <View style={styles.field}>
@@ -283,6 +292,15 @@ export function InputFieldWrapper({
   );
 }
 
+function shouldApplyScrollTrapWorkaround(isMultiline: boolean): boolean {
+  const isCustomFontScale = PixelRatio.getFontScale() !== 1;
+
+  // On iOS, when the OS font scale is not default, it causes multiline inputs to become scroll-trapped
+  // which prevents the user from scrolling the parent form view. For now, we're working around this
+  // by limiting the width of the input field, thus providing a gap so the user can scroll more easily.
+  return isMultiline && Platform.OS === "ios" && isCustomFontScale;
+}
+
 function getLabelVariation(
   error?: FieldError,
   invalid?: boolean | string,

package/src/InputText/InputText.test.tsx

@@ -836,126 +836,4 @@ 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,8 +14,7 @@ import type {
   TextInputProps,
   TextStyle,
 } from "react-native";
-import { Platform, TextInput, findNodeHandle } from "react-native";
-import { useBottomSheetInternal } from "@gorhom/bottom-sheet";
+import { Platform, TextInput } from "react-native";
 import type { RegisterOptions } from "react-hook-form";
 import type { IconNames } from "@jobber/design";
 import identity from "lodash/identity";
@@ -316,11 +315,6 @@ 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.
@@ -398,6 +392,7 @@ function InputTextInternal(
       toolbarVisibility={toolbarVisibility}
       loading={loading}
       loadingType={loadingType}
+      multiline={multiline}
     >
       <TextInput
         inputAccessoryViewID={inputAccessoryID || undefined}
@@ -444,13 +439,11 @@ 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);
@@ -477,48 +470,6 @@ 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("");
   }
@@ -565,7 +516,7 @@ interface UseTextInputRefProps {
 }
 
 function useTextInputRef({ ref, onClear }: UseTextInputRefProps) {
-  const textInputRef = useRef<TextInput | null>(null);
+  const textInputRef = useRef<InputTextRef | null>(null);
 
   useImperativeHandle(
     ref,

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

@@ -152,6 +152,20 @@ 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",
@@ -160,6 +174,12 @@ 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,7 +23,6 @@
     "Chip",
     "Content",
     "ContentOverlay",
-    "ContentOverlayProvider",
     "Disclosure",
     "Divider",
     "EmptyState",

package/dist/src/ContentOverlay/ContentOverlayProvider.js

@@ -1,5 +0,0 @@
-import React from "react";
-import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
-export function ContentOverlayProvider({ children, }) {
-    return React.createElement(BottomSheetModalProvider, null, children);
-}

package/dist/src/ContentOverlay/computeContentOverlayBehavior.js

@@ -1,76 +0,0 @@
-/**
- * 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, state) {
-    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, isDraggable) {
-    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) {
-    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, state) {
-    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/dist/src/ContentOverlay/hooks/useBottomSheetModalBackHandler.js

@@ -1,25 +0,0 @@
-import { useCallback, useRef } from "react";
-import { BackHandler } 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) {
-    const backHandlerSubscriptionRef = useRef(null);
-    const handleSheetPositionChange = useCallback((index) => {
-        var _a;
-        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) {
-            (_a = backHandlerSubscriptionRef.current) === null || _a === void 0 ? void 0 : _a.remove();
-            backHandlerSubscriptionRef.current = null;
-        }
-    }, [onCloseController]);
-    return { handleSheetPositionChange };
-}

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

@@ -1,6 +0,0 @@
-import React from "react";
-interface ContentOverlayProviderProps {
-    readonly children: React.ReactNode;
-}
-export declare function ContentOverlayProvider({ children, }: ContentOverlayProviderProps): React.JSX.Element;
-export {};

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

@@ -1,32 +0,0 @@
-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/hooks/useBottomSheetModalBackHandler.d.ts

@@ -1,7 +0,0 @@
-/**
- * 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/src/ContentOverlay/ContentOverlay.stories.tsx

@@ -1,59 +0,0 @@
-import React, { useRef } from "react";
-import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { View } from "react-native";
-import { SafeAreaProvider } from "react-native-safe-area-context";
-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,
-} satisfies Meta<typeof ContentOverlay>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const BasicTemplate = () => {
-  const contentOverlayRef = useRef<ContentOverlayRef>(null);
-
-  const openContentOverlay = () => {
-    contentOverlayRef.current?.open?.();
-  };
-
-  const closeContentOverlay = () => {
-    contentOverlayRef.current?.close?.();
-  };
-
-  return (
-    <SafeAreaProvider>
-      <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")}
-        >
-          <View style={{ padding: 16 }}>
-            <Text>This is the content inside the overlay.</Text>
-          </View>
-        </ContentOverlay>
-      </BottomSheetModalProvider>
-    </SafeAreaProvider>
-  );
-};
-
-export const Basic: Story = {
-  render: BasicTemplate,
-  args: {} as Story["args"],
-};

package/src/ContentOverlay/ContentOverlayProvider.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
-
-interface ContentOverlayProviderProps {
-  readonly children: React.ReactNode;
-}
-
-export function ContentOverlayProvider({
-  children,
-}: ContentOverlayProviderProps) {
-  return <BottomSheetModalProvider>{children}</BottomSheetModalProvider>;
-}