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

package/src/ContentOverlay/ContentOverlay.tsx

@@ -1,204 +1,228 @@
-import React, { useImperativeHandle, useMemo, useRef, useState } from "react";
+import type { Ref } from "react";
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import type { Modalize } from "react-native-modalize";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import type { NativeScrollEvent, NativeSyntheticEvent } from "react-native";
 import {
   AccessibilityInfo,
+  Platform,
   View,
   findNodeHandle,
   useWindowDimensions,
 } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import {
-  BottomSheetBackdrop,
-  BottomSheetModal,
-  BottomSheetScrollView,
-  BottomSheetView,
-} from "@gorhom/bottom-sheet";
-import type {
-  BottomSheetBackdropProps,
-  BottomSheetModal as BottomSheetModalType,
-  BottomSheetScrollViewMethods,
-} from "@gorhom/bottom-sheet";
-import type { ContentOverlayProps, ModalBackgroundColor } from "./types";
+import { Portal } from "react-native-portalize";
+import { useKeyboardVisibility } from "./hooks/useKeyboardVisibility";
 import { useStyles } from "./ContentOverlay.style";
-import { useBottomSheetModalBackHandler } from "./hooks/useBottomSheetModalBackHandler";
-import { computeContentOverlayBehavior } from "./computeContentOverlayBehavior";
+import { useViewLayoutHeight } from "./hooks/useViewLayoutHeight";
+import type {
+  ContentOverlayProps,
+  ContentOverlayRef,
+  ModalBackgroundColor,
+} from "./types";
+import { UNSAFE_WrappedModalize } from "./UNSAFE_WrappedModalize";
 import { useIsScreenReaderEnabled } from "../hooks";
 import { IconButton } from "../IconButton";
 import { Heading } from "../Heading";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
 
-const LARGE_SCREEN_BREAKPOINT = 640;
-
-function getModalBackgroundColor(
-  variation: ModalBackgroundColor,
-  tokens: ReturnType<typeof useAtlantisTheme>["tokens"],
-) {
-  switch (variation) {
-    case "surface":
-      return tokens["color-surface"];
-    case "background":
-      return tokens["color-surface--background"];
-  }
-}
+export const ContentOverlay = forwardRef(ContentOverlayPortal);
+const ContentOverlayModal = forwardRef(ContentOverlayInternal);
 
 // eslint-disable-next-line max-statements
-export function ContentOverlay({
-  children,
-  title,
-  accessibilityLabel,
-  fullScreen = false,
-  showDismiss = false,
-  isDraggable = true,
-  adjustToContentHeight = false,
-  keyboardShouldPersistTaps = false,
-  scrollEnabled = false,
-  modalBackgroundColor = "surface",
-  onClose,
-  onOpen,
-  onBeforeExit,
-  loading = false,
-  ref,
-}: ContentOverlayProps) {
-  const insets = useSafeAreaInsets();
-  const { width: windowWidth } = useWindowDimensions();
-  const bottomSheetModalRef = useRef<BottomSheetModalType>(null);
-  const previousIndexRef = useRef(-1);
-  const [currentPosition, setCurrentPosition] = useState<number>(-1);
-
-  const styles = useStyles();
+function ContentOverlayInternal(
+  {
+    children,
+    title,
+    accessibilityLabel,
+    fullScreen = false,
+    showDismiss = false,
+    isDraggable = true,
+    adjustToContentHeight = false,
+    keyboardShouldPersistTaps = false,
+    keyboardAvoidingBehavior,
+    scrollEnabled = false,
+    modalBackgroundColor = "surface",
+    onClose,
+    onOpen,
+    onBeforeExit,
+    loading = false,
+    avoidKeyboardLikeIOS,
+  }: ContentOverlayProps,
+  ref: Ref<ContentOverlayRef>,
+) {
+  isDraggable = onBeforeExit ? false : isDraggable;
+  const isCloseableOnOverlayTap = onBeforeExit ? false : true;
   const { t } = useAtlantisI18n();
   const { tokens } = useAtlantisTheme();
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const [position, setPosition] = useState<"top" | "initial">("initial");
   const isScreenReaderEnabled = useIsScreenReaderEnabled();
+  const isFullScreenOrTopPosition =
+    fullScreen || (!adjustToContentHeight && position === "top");
+  const shouldShowDismiss =
+    showDismiss || isScreenReaderEnabled || isFullScreenOrTopPosition;
+  const [showHeaderShadow, setShowHeaderShadow] = useState<boolean>(false);
+  const overlayHeader = useRef<View>(null);
 
-  const behavior = computeContentOverlayBehavior(
-    {
-      fullScreen,
-      adjustToContentHeight,
-      isDraggable,
-      hasOnBeforeExit: onBeforeExit !== undefined,
-      showDismiss,
-    },
-    {
-      isScreenReaderEnabled,
-      position: currentPosition,
-    },
-  );
+  const internalRef = useRef<Modalize>(null);
+  const [modalizeMethods, setModalizeMethods] = useState<ContentOverlayRef>();
+  const callbackInternalRef = useCallback((instance: Modalize) => {
+    if (instance && !internalRef.current) {
+      internalRef.current = instance;
+      setModalizeMethods(instance);
+    }
+  }, []);
 
-  const effectiveIsDraggable = behavior.isDraggable;
-  const shouldShowDismiss = behavior.showDismiss;
-  const isCloseableOnOverlayTap = onBeforeExit === undefined;
+  const refMethods = useMemo(() => {
+    if (!modalizeMethods?.open || !modalizeMethods?.close) {
+      return {};
+    }
 
-  // Prevent the Overlay from being flush with the top of the screen, even if we are "100%" or "fullscreen"
-  const topInset = insets.top || tokens["space-larger"];
+    return {
+      open: modalizeMethods?.open,
+      close: modalizeMethods?.close,
+    };
+  }, [modalizeMethods]);
 
-  const [showHeaderShadow, setShowHeaderShadow] = useState<boolean>(false);
-  const overlayHeader = useRef<View>(null);
-  const scrollViewRef = useRef<
-    BottomSheetScrollViewMethods & { scrollTop?: number }
-  >(null);
+  const { keyboardHeight } = useKeyboardVisibility();
+  useImperativeHandle(ref, () => refMethods, [refMethods]);
 
-  // enableDynamicSizing will add another snap point of the content height
-  const snapPoints = useMemo(() => {
-    // There is a bug with "restore" behavior after keyboard is dismissed.
-    // https://github.com/gorhom/react-native-bottom-sheet/issues/2465
-    // providing a 100% snap point "fixes" it for now, but there is an approved PR to fix it
-    // that just needs to be merged and released: https://github.com/gorhom/react-native-bottom-sheet/pull/2511
-    return ["100%"];
-  }, []);
+  const {
+    handleLayout: handleChildrenLayout,
+    height: childrenHeight,
+    heightKnown: childrenHeightKnown,
+  } = useViewLayoutHeight();
+  const {
+    handleLayout: handleHeaderLayout,
+    height: headerHeight,
+    heightKnown: headerHeightKnown,
+  } = useViewLayoutHeight();
 
-  const onCloseController = () => {
-    if (!onBeforeExit) {
-      bottomSheetModalRef.current?.dismiss();
-    } else {
-      onBeforeExit();
+  const snapPoint = useMemo(() => {
+    if (fullScreen || !isDraggable || adjustToContentHeight) {
+      return undefined;
     }
-  };
+    const overlayHeight = headerHeight + childrenHeight;
 
-  const { handleSheetPositionChange } =
-    useBottomSheetModalBackHandler(onCloseController);
+    if (overlayHeight >= windowHeight) {
+      return undefined;
+    }
 
-  useImperativeHandle(ref, () => ({
-    open: () => {
-      bottomSheetModalRef.current?.present();
-    },
-    close: () => {
-      bottomSheetModalRef.current?.dismiss();
-    },
-  }));
+    return overlayHeight;
+  }, [
+    fullScreen,
+    isDraggable,
+    adjustToContentHeight,
+    headerHeight,
+    childrenHeight,
+    windowHeight,
+  ]);
 
-  const handleChange = (index: number, position: number) => {
-    const previousIndex = previousIndexRef.current;
+  const styles = useStyles();
 
-    setCurrentPosition(position);
-    handleSheetPositionChange(index);
+  const modalStyle = [
+    styles.modal,
+    windowWidth > 640 ? styles.modalForLargeScreens : undefined,
+    { backgroundColor: getModalBackgroundColor(modalBackgroundColor) },
+    keyboardHeight > 0 && { marginBottom: 0 },
+  ];
 
-    if (previousIndex === -1 && index >= 0) {
-      // Transitioned from closed to open
-      onOpen?.();
+  const renderedChildren = renderChildren();
+  const renderedHeader = renderHeader();
 
-      // Set accessibility focus on header when opened
-      if (overlayHeader.current) {
-        const reactTag = findNodeHandle(overlayHeader.current);
+  const onCloseController = () => {
+    if (!onBeforeExit) {
+      internalRef.current?.close();
 
-        if (reactTag) {
-          AccessibilityInfo.setAccessibilityFocus(reactTag);
-        }
-      }
-    }
+      return true;
+    } else {
+      onBeforeExit();
 
-    previousIndexRef.current = index;
+      return false;
+    }
   };
 
-  const handleOnScroll = () => {
-    const scrollTop = scrollViewRef.current?.scrollTop || 0;
-    setShowHeaderShadow(scrollTop > 0);
-  };
+  return (
+    <>
+      {headerHeightKnown && childrenHeightKnown && (
+        <UNSAFE_WrappedModalize
+          ref={callbackInternalRef}
+          overlayStyle={styles.overlay}
+          handleStyle={styles.handle}
+          handlePosition="inside"
+          modalStyle={modalStyle}
+          modalTopOffset={tokens["space-larger"]}
+          snapPoint={snapPoint}
+          closeSnapPointStraightEnabled={false}
+          withHandle={isDraggable}
+          panGestureEnabled={isDraggable}
+          adjustToContentHeight={adjustToContentHeight}
+          disableScrollIfPossible={!adjustToContentHeight} // workaround for scroll not working on Android when content fills the screen with adjustToContentHeight
+          onClose={onClose}
+          onOpen={onOpen}
+          keyboardAvoidingBehavior={keyboardAvoidingBehavior}
+          avoidKeyboardLikeIOS={avoidKeyboardLikeIOS}
+          childrenStyle={styles.childrenStyle}
+          onBackButtonPress={onCloseController}
+          closeOnOverlayTap={isCloseableOnOverlayTap}
+          onOpened={() => {
+            if (overlayHeader.current) {
+              const reactTag = findNodeHandle(overlayHeader.current);
 
-  const sheetStyle = useMemo(
-    () =>
-      windowWidth > LARGE_SCREEN_BREAKPOINT
-        ? {
-            width: LARGE_SCREEN_BREAKPOINT,
-            marginLeft: (windowWidth - LARGE_SCREEN_BREAKPOINT) / 2,
-          }
-        : undefined,
-    [windowWidth],
+              if (reactTag) {
+                AccessibilityInfo.setAccessibilityFocus(reactTag);
+              }
+            }
+          }}
+          scrollViewProps={{
+            scrollEnabled,
+            showsVerticalScrollIndicator: false,
+            stickyHeaderIndices: Platform.OS === "android" ? [0] : undefined,
+            onScroll: handleOnScroll,
+            keyboardShouldPersistTaps: keyboardShouldPersistTaps
+              ? "handled"
+              : "never",
+          }}
+          HeaderComponent={Platform.OS === "ios" ? renderedHeader : undefined}
+          onPositionChange={setPosition}
+        >
+          {Platform.OS === "android" ? renderedHeader : undefined}
+          {renderedChildren}
+        </UNSAFE_WrappedModalize>
+      )}
+      {!childrenHeightKnown && (
+        <View style={[styles.hiddenContent, modalStyle]}>
+          {renderedChildren}
+        </View>
+      )}
+      {!headerHeightKnown && (
+        <View style={[styles.hiddenContent, modalStyle]}>{renderedHeader}</View>
+      )}
+    </>
   );
 
-  const backgroundStyle = [
-    styles.background,
-    { backgroundColor: getModalBackgroundColor(modalBackgroundColor, tokens) },
-  ];
-
-  const handleIndicatorStyles = [
-    styles.handle,
-    !effectiveIsDraggable && {
-      opacity: 0,
-    },
-  ];
-
-  const renderHeader = () => {
+  function renderHeader() {
     const closeOverlayA11YLabel = t("ContentOverlay.close", {
       title: title,
     });
 
     const headerStyles = [
       styles.header,
-      {
-        // Background color is necessary for scrollable modals as the content flows behind the header.
-        backgroundColor: getModalBackgroundColor(modalBackgroundColor, tokens),
-      },
-    ];
-
-    const headerShadowStyles = [
       showHeaderShadow && styles.headerShadow,
-      {
-        backgroundColor: getModalBackgroundColor(modalBackgroundColor, tokens),
-      },
+      { backgroundColor: getModalBackgroundColor(modalBackgroundColor) },
     ];
 
     return (
-      <View testID="ATL-Overlay-Header">
+      <View onLayout={handleHeaderLayout} testID="ATL-Overlay-Header">
         <View style={headerStyles}>
           <View
             style={[
@@ -236,82 +260,45 @@ export function ContentOverlay({
             </View>
           )}
         </View>
-        <View>
-          <View style={headerShadowStyles} />
-        </View>
       </View>
     );
-  };
+  }
 
-  return (
-    <BottomSheetModal
-      ref={bottomSheetModalRef}
-      onChange={handleChange}
-      style={sheetStyle}
-      backgroundStyle={backgroundStyle}
-      handleStyle={styles.handleWrapper}
-      handleIndicatorStyle={handleIndicatorStyles}
-      backdropComponent={props => (
-        <Backdrop
-          {...props}
-          pressBehavior={isCloseableOnOverlayTap ? "close" : "none"}
-        />
-      )}
-      snapPoints={snapPoints}
-      enablePanDownToClose={effectiveIsDraggable}
-      enableContentPanningGesture={effectiveIsDraggable}
-      enableHandlePanningGesture={effectiveIsDraggable}
-      enableDynamicSizing={behavior.initialHeight === "contentHeight"}
-      keyboardBehavior="interactive"
-      keyboardBlurBehavior="restore"
-      topInset={topInset}
-      onDismiss={() => onClose?.()}
-    >
-      {scrollEnabled ? (
-        <BottomSheetScrollView
-          ref={scrollViewRef}
-          contentContainerStyle={{ paddingBottom: insets.bottom }}
-          keyboardShouldPersistTaps={
-            keyboardShouldPersistTaps ? "handled" : "never"
-          }
-          showsVerticalScrollIndicator={false}
-          onScroll={handleOnScroll}
-          stickyHeaderIndices={[0]}
-        >
-          {renderHeader()}
-          <View testID="ATL-Overlay-Children">{children}</View>
-        </BottomSheetScrollView>
-      ) : (
-        <BottomSheetView>
-          {renderHeader()}
-          <View
-            style={{ paddingBottom: insets.bottom }}
-            testID="ATL-Overlay-Children"
-          >
-            {children}
-          </View>
-        </BottomSheetView>
-      )}
-    </BottomSheetModal>
-  );
+  function renderChildren() {
+    return (
+      <View
+        style={{ paddingBottom: insets.bottom }}
+        onLayout={handleChildrenLayout}
+        testID="ATL-Overlay-Children"
+      >
+        {children}
+      </View>
+    );
+  }
+
+  function handleOnScroll({
+    nativeEvent,
+  }: NativeSyntheticEvent<NativeScrollEvent>) {
+    setShowHeaderShadow(nativeEvent.contentOffset.y > 0);
+  }
+
+  function getModalBackgroundColor(variation: ModalBackgroundColor) {
+    switch (variation) {
+      case "surface":
+        return tokens["color-surface"];
+      case "background":
+        return tokens["color-surface--background"];
+    }
+  }
 }
 
-function Backdrop(
-  bottomSheetBackdropProps: BottomSheetBackdropProps & {
-    pressBehavior: "none" | "close";
-  },
+function ContentOverlayPortal(
+  modalProps: ContentOverlayProps,
+  ref: Ref<ContentOverlayRef>,
 ) {
-  const styles = useStyles();
-  const { pressBehavior, ...props } = bottomSheetBackdropProps;
-
   return (
-    <BottomSheetBackdrop
-      {...props}
-      appearsOnIndex={0}
-      disappearsOnIndex={-1}
-      style={styles.backdrop}
-      opacity={1}
-      pressBehavior={pressBehavior}
-    />
+    <Portal>
+      <ContentOverlayModal ref={ref} {...modalProps} />
+    </Portal>
   );
 }

package/src/ContentOverlay/UNSAFE_WrappedModalize.tsx

@@ -0,0 +1,41 @@
+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";

package/src/ContentOverlay/index.ts

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

package/src/ContentOverlay/types.ts

@@ -1,4 +1,5 @@
-import type { ReactNode, Ref } from "react";
+import type { ReactNode } from "react";
+import type { Modalize } from "react-native-modalize";
 
 export interface ContentOverlayProps {
   /**
@@ -66,6 +67,12 @@ 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
@@ -73,16 +80,17 @@ export interface ContentOverlayProps {
   readonly loading?: boolean;
 
   /**
-   * Ref to the content overlay component.
+   * Define keyboard's Android behavior like iOS's one.
+   * @default Platform.select({ ios: true, android: false })
    */
-  readonly ref?: Ref<ContentOverlayRef>;
+  readonly avoidKeyboardLikeIOS?: boolean;
 }
 
 export type ModalBackgroundColor = "surface" | "background";
 
 export type ContentOverlayRef =
   | {
-      open?: () => void;
-      close?: () => void;
+      open?: Modalize["open"];
+      close?: Modalize["close"];
     }
   | undefined;

package/src/InputFieldWrapper/InputFieldWrapper.test.tsx

@@ -358,4 +358,51 @@ describe("InputFieldWrapper", () => {
       ).toBeNull();
     });
   });
+
+  describe("multiline", () => {
+    it("applies maxWidth of 90% when multiline is true", () => {
+      const { getByTestId } = renderInputFieldWrapper({ multiline: true });
+      const container = getByTestId("ATL-InputFieldWrapper");
+
+      const flattenedStyle = container.props.style.reduce(
+        (style: ViewStyle, additionalStyles: ViewStyle) => ({
+          ...style,
+          ...additionalStyles,
+        }),
+        {},
+      );
+
+      expect(flattenedStyle.maxWidth).toEqual("90%");
+    });
+
+    it("does not apply maxWidth when multiline is false", () => {
+      const { getByTestId } = renderInputFieldWrapper({ multiline: false });
+      const container = getByTestId("ATL-InputFieldWrapper");
+
+      const flattenedStyle = container.props.style.reduce(
+        (style: ViewStyle, additionalStyles: ViewStyle) => ({
+          ...style,
+          ...additionalStyles,
+        }),
+        {},
+      );
+
+      expect(flattenedStyle.maxWidth).toBeUndefined();
+    });
+
+    it("does not apply maxWidth when multiline is not provided", () => {
+      const { getByTestId } = renderInputFieldWrapper({});
+      const container = getByTestId("ATL-InputFieldWrapper");
+
+      const flattenedStyle = container.props.style.reduce(
+        (style: ViewStyle, additionalStyles: ViewStyle) => ({
+          ...style,
+          ...additionalStyles,
+        }),
+        {},
+      );
+
+      expect(flattenedStyle.maxWidth).toBeUndefined();
+    });
+  });
 });