@jobber/components-native 0.105.4 → 0.105.5-contentove-4cd673f.10

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

@@ -1,4 +1,4 @@
 import React from "react";
 import type { ContentOverlayProps } from "./types";
 export declare function useIsKeyboardHandledByScrollView(): boolean;
-export declare function ContentOverlay({ children, title, accessibilityLabel, fullScreen, showDismiss, isDraggable, adjustToContentHeight, keyboardShouldPersistTaps, scrollEnabled, modalBackgroundColor, onClose, onOpen, onBeforeExit, loading, ref, }: ContentOverlayProps): React.JSX.Element;
+export declare function ContentOverlay({ children, title, accessibilityLabel, fullScreen, showDismiss, isDraggable, adjustToContentHeight, keyboardShouldPersistTaps, scrollEnabled, modalBackgroundColor, footerComponent, onClose, onOpen, onBeforeExit, loading, ref, }: ContentOverlayProps): React.JSX.Element;

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

@@ -46,6 +46,18 @@ export interface ContentOverlayProps {
      * Enables scrolling in the content body of overlay
      */
     readonly scrollEnabled?: boolean;
+    /**
+     * Content pinned to the bottom of the overlay, above the keyboard — e.g. a
+     * persistent search input (results scroll above it) or persistent action
+     * buttons. Rendered outside the scrollable body via the bottom sheet's
+     * footer, so it stays visible while the body scrolls and rises with the
+     * keyboard. When set, the overlay uses the bottom sheet's own keyboard
+     * handling rather than the keyboard-aware scroll view, and sizes to its
+     * content. Intended for use with content-height overlays (the default, or
+     * `adjustToContentHeight`).
+     * @default undefined
+     */
+    readonly footerComponent?: ReactNode;
     /**
      * Set the background color of the modal window
      * @default "surface"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.105.4",
+  "version": "0.105.5-contentove-4cd673f.10+4cd673ff",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -122,5 +122,5 @@
     "react-native-screens": ">=4.18.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "7fb12fadcd1c5e1440bccccae13dd29cf74dae28"
+  "gitHead": "4cd673ff20841cf9e6ea375cf0577310ffaae365"
 }

package/src/ContentOverlay/ContentOverlay.stories.tsx

@@ -2,7 +2,7 @@ import type { ComponentProps } from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { action } from "storybook/actions";
 import { ContentOverlay } from "@jobber/components-native";
-import { ContentOverlayBasic } from "./docs";
+import { ContentOverlayBasic, ContentOverlayWithFooter } from "./docs";
 
 const meta = {
   title: "Components/Overlays/ContentOverlay",
@@ -28,3 +28,17 @@ export const Basic: Story = {
     fullScreen: false,
   },
 };
+
+/**
+ * Persistent-input + scrolling-results pattern (team mentions picker): the
+ * result list scrolls in the body while the search input stays pinned at the
+ * bottom via `footerComponent`, above the keyboard. The overlay sizes to its
+ * content rather than filling the screen.
+ */
+export const WithFooter: Story = {
+  render: ContentOverlayWithFooter,
+  args: {
+    onClose: () => action("alert")("Overlay Dismissed"),
+    onOpen: () => action("alert")("Overlay opened"),
+  },
+};

package/src/ContentOverlay/ContentOverlay.test.tsx

@@ -480,3 +480,59 @@ describe("title prop", () => {
     });
   });
 });
+
+describe("when a footerComponent is provided", () => {
+  function renderWithFooter() {
+    const contentOverlayRef = createRef<ContentOverlayRef>();
+
+    render(
+      <AtlantisOverlayProvider>
+        <View>
+          <Button
+            label="Open Content Overlay"
+            onPress={() => contentOverlayRef.current?.open?.()}
+          />
+          <ContentOverlay
+            ref={contentOverlayRef}
+            adjustToContentHeight
+            scrollEnabled
+            onOpen={jest.fn()}
+            footerComponent={<Text>Search team</Text>}
+          >
+            <Content>
+              <Text>Marty Fayes</Text>
+            </Content>
+          </ContentOverlay>
+        </View>
+      </AtlantisOverlayProvider>,
+    );
+
+    return contentOverlayRef;
+  }
+
+  async function openWithFooter() {
+    jest.useFakeTimers();
+    renderWithFooter();
+    await user.press(screen.getByLabelText("Open Content Overlay"));
+    await act(async () => {
+      jest.runAllTimers();
+    });
+  }
+
+  it("renders the footer content alongside the body content", async () => {
+    await openWithFooter();
+
+    await waitFor(() => {
+      expect(screen.getByText("Search team")).toBeDefined();
+      expect(screen.getByText("Marty Fayes")).toBeDefined();
+    });
+  });
+
+  it("still exposes the overlay body content container", async () => {
+    await openWithFooter();
+
+    await waitFor(() => {
+      expect(screen.getByTestId("ATL-Overlay-Children")).toBeDefined();
+    });
+  });
+});

package/src/ContentOverlay/ContentOverlay.tsx

@@ -18,6 +18,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   BottomSheetBackdrop,
   BottomSheetModal,
+  BottomSheetScrollView,
   BottomSheetView,
 } from "@gorhom/bottom-sheet";
 import type {
@@ -30,6 +31,7 @@ import { BottomSheetKeyboardAwareScrollView } from "./BottomSheetKeyboardAwareSc
 import type { ContentOverlayProps, ModalBackgroundColor } from "./types";
 import { useStyles } from "./ContentOverlay.style";
 import { useBottomSheetModalBackHandler } from "./hooks/useBottomSheetModalBackHandler";
+import { useKeyboardVisibility } from "./hooks/useKeyboardVisibility";
 import { computeContentOverlayBehavior } from "./computeContentOverlayBehavior";
 import { KEYBOARD_TOP_PADDING_AUTO_SCROLL } from "./constants";
 import { useIsScreenReaderEnabled } from "../hooks";
@@ -78,6 +80,7 @@ export function ContentOverlay({
   keyboardShouldPersistTaps = false,
   scrollEnabled = false,
   modalBackgroundColor = "surface",
+  footerComponent,
   onClose,
   onOpen,
   onBeforeExit,
@@ -85,6 +88,7 @@ export function ContentOverlay({
   ref,
 }: ContentOverlayProps) {
   const insets = useSafeAreaInsets();
+  const { isKeyboardVisible } = useKeyboardVisibility();
   const { width: windowWidth } = useWindowDimensions();
   const bottomSheetModalRef = useRef<BottomSheetModalType>(null);
   const previousIndexRef = useRef(-1);
@@ -111,6 +115,8 @@ export function ContentOverlay({
 
   const effectiveIsDraggable = behavior.isDraggable;
   const shouldShowDismiss = behavior.showDismiss;
+  const hasHeader = Boolean(title || shouldShowDismiss);
+  const stickyHeaderIndices = hasHeader ? [0] : undefined;
   const isCloseableOnOverlayTap = onBeforeExit === undefined;
 
   // Prevent the Overlay from being flush with the top of the screen, even if we are "100%" or "fullscreen"
@@ -122,12 +128,15 @@ export function ContentOverlay({
     BottomSheetScrollViewMethods & { scrollTop?: number }
   >(null);
 
+  const hasFooter = footerComponent !== undefined;
+
   // enableDynamicSizing will add another snap point of the content height
   const snapPoints = useMemo(() => {
-    // There is a bug with "restore" behavior after keyboard is dismissed.
+    // There is a bug with "restore" behavior after the 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
+    // Providing a 100% snap point "fixes" it for now. The upstream fix
+    // (https://github.com/gorhom/react-native-bottom-sheet/pull/2511) was
+    // closed without merging, so there is no released fix to wait for.
     return ["100%"];
   }, []);
 
@@ -297,7 +306,7 @@ export function ContentOverlay({
       backdropComponent={backdropComponent}
       snapPoints={snapPoints}
       enablePanDownToClose={effectiveIsDraggable}
-      enableContentPanningGesture={effectiveIsDraggable}
+      enableContentPanningGesture={effectiveIsDraggable || scrollEnabled}
       enableHandlePanningGesture={effectiveIsDraggable}
       enableDynamicSizing={behavior.initialHeight === "contentHeight"}
       keyboardBehavior="interactive"
@@ -305,8 +314,40 @@ export function ContentOverlay({
       topInset={topInset}
       onDismiss={() => onClose?.()}
     >
-      <ContentOverlayKeyboardContext.Provider value={scrollEnabled}>
-        {scrollEnabled ? (
+      <ContentOverlayKeyboardContext.Provider
+        value={scrollEnabled && !hasFooter}
+      >
+        {hasFooter ? (
+          <View style={{ flex: 1 }}>
+            {scrollEnabled ? (
+              <BottomSheetScrollView
+                ref={scrollViewRef}
+                style={{ flex: 1 }}
+                keyboardShouldPersistTaps={
+                  keyboardShouldPersistTaps ? "handled" : "never"
+                }
+                showsVerticalScrollIndicator={false}
+                onScroll={handleOnScroll}
+                stickyHeaderIndices={stickyHeaderIndices}
+              >
+                {renderHeader()}
+                <View testID="ATL-Overlay-Children">{children}</View>
+              </BottomSheetScrollView>
+            ) : (
+              <BottomSheetView style={{ flex: 1 }}>
+                {renderHeader()}
+                <View testID="ATL-Overlay-Children">{children}</View>
+              </BottomSheetView>
+            )}
+            <View
+              style={{
+                paddingBottom: isKeyboardVisible ? 0 : insets.bottom,
+              }}
+            >
+              {footerComponent}
+            </View>
+          </View>
+        ) : scrollEnabled ? (
           <BottomSheetKeyboardAwareScrollView
             ref={scrollViewRef}
             contentContainerStyle={{ paddingBottom: insets.bottom }}
@@ -315,7 +356,7 @@ export function ContentOverlay({
             }
             showsVerticalScrollIndicator={false}
             onScroll={handleOnScroll}
-            stickyHeaderIndices={[0]}
+            stickyHeaderIndices={stickyHeaderIndices}
             bottomOffset={KEYBOARD_TOP_PADDING_AUTO_SCROLL}
           >
             {renderHeader()}

package/src/ContentOverlay/docs/ContentOverlayWithFooter.tsx

@@ -0,0 +1,85 @@
+import React, { useRef, useState } from "react";
+import type { ComponentProps } from "react";
+import { Pressable, View } from "react-native";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { action } from "storybook/actions";
+import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+import type { ContentOverlayRef } from "@jobber/components-native";
+import {
+  Button,
+  ContentOverlay,
+  Heading,
+  InputText,
+  Text,
+} from "@jobber/components-native";
+
+type ContentOverlayProps = ComponentProps<typeof ContentOverlay>;
+
+const TEAM = [
+  "Marty Fayes",
+  "Damien Henriksson",
+  "Olivia Hughes",
+  "Priya Anand",
+  "Diego Marquez",
+  "Sam Okonkwo",
+  "Yuki Tanaka",
+  "Noor Haddad",
+];
+
+/**
+ * Demonstrates the persistent-input + scrolling-results pattern (the team
+ * mentions picker): the result list scrolls in the body while the search input
+ * stays pinned to the bottom via `footerComponent`, above the keyboard.
+ */
+export function ContentOverlayWithFooter(props: Partial<ContentOverlayProps>) {
+  const contentOverlayRef = useRef<ContentOverlayRef>(null);
+  const [query, setQuery] = useState("");
+
+  const matches = TEAM.filter(name =>
+    name.toLowerCase().includes(query.toLowerCase()),
+  );
+
+  return (
+    <SafeAreaProvider>
+      <BottomSheetModalProvider>
+        <View style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+          <Heading>Mentions picker (footer input)</Heading>
+          <Button
+            label="Open mentions picker"
+            onPress={() => contentOverlayRef.current?.open?.()}
+          />
+        </View>
+        <ContentOverlay
+          ref={contentOverlayRef}
+          adjustToContentHeight
+          scrollEnabled
+          onClose={() => action("console.log")("closed")}
+          onOpen={() => action("console.log")("opened")}
+          footerComponent={
+            <View style={{ padding: 16 }}>
+              <InputText
+                placeholder="Search team"
+                value={query}
+                onChangeText={setQuery}
+                clearable="always"
+              />
+            </View>
+          }
+          {...props}
+        >
+          <View style={{ paddingHorizontal: 16, gap: 8 }}>
+            {matches.map(name => (
+              <Pressable
+                key={name}
+                onPress={() => contentOverlayRef.current?.close?.()}
+                style={{ paddingVertical: 12 }}
+              >
+                <Text>{name}</Text>
+              </Pressable>
+            ))}
+          </View>
+        </ContentOverlay>
+      </BottomSheetModalProvider>
+    </SafeAreaProvider>
+  );
+}

package/src/ContentOverlay/docs/index.ts

@@ -1 +1,2 @@
 export { ContentOverlayBasic } from "./ContentOverlayBasic";
+export { ContentOverlayWithFooter } from "./ContentOverlayWithFooter";

package/src/ContentOverlay/types.ts

@@ -47,6 +47,18 @@ export interface ContentOverlayProps {
    * Enables scrolling in the content body of overlay
    */
   readonly scrollEnabled?: boolean;
+  /**
+   * Content pinned to the bottom of the overlay, above the keyboard — e.g. a
+   * persistent search input (results scroll above it) or persistent action
+   * buttons. Rendered outside the scrollable body via the bottom sheet's
+   * footer, so it stays visible while the body scrolls and rises with the
+   * keyboard. When set, the overlay uses the bottom sheet's own keyboard
+   * handling rather than the keyboard-aware scroll view, and sizes to its
+   * content. Intended for use with content-height overlays (the default, or
+   * `adjustToContentHeight`).
+   * @default undefined
+   */
+  readonly footerComponent?: ReactNode;
   /**
    * Set the background color of the modal window
    * @default "surface"