@jobber/components-native 0.107.3 → 0.108.1-visual-reg-5479aeb.25

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, onClose, onOpen, onBeforeExit, allowDragWithBeforeExit, enablePanDownToClose, enableContentPanningGesture, snapPoints: customSnapPoints, loading, ref, }: ContentOverlayProps): React.JSX.Element;

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

@@ -3,6 +3,7 @@ export interface ContentOverlayConfig {
     adjustToContentHeight: boolean;
     isDraggable: boolean;
     hasOnBeforeExit: boolean;
+    allowDragWithBeforeExit: boolean;
     showDismiss: boolean;
 }
 export interface ContentOverlayState {

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

@@ -63,6 +63,29 @@ export interface ContentOverlayProps {
      * Callback that is called between overlay is closed and when the "x" button is pressed
      */
     readonly onBeforeExit?: () => void;
+    /**
+     * Whether panning down on the content area closes the sheet. Set false to prevent the sheet from being closed by panning down.
+     * Defaults to the resolved draggable state.
+     */
+    readonly enablePanDownToClose?: boolean;
+    /**
+     * When `true`, `onBeforeExit` intercepts the dismiss button and back press
+     * but does not disable drag. Drag-to-dismiss bypasses `onBeforeExit`.
+     * @default false
+     */
+    readonly allowDragWithBeforeExit?: boolean;
+    /**
+     * Whether pan on the content area drags the sheet. Set `false` to let
+     * nested scrollables own the gesture. Defaults to the resolved draggable
+     * state.
+     */
+    readonly enableContentPanningGesture?: boolean;
+    /**
+     * Explicit snap points for the overlay (percentages or pixel values).
+     * When provided, `adjustToContentHeight` is ignored and the sheet snaps
+     * to these positions instead of the measured content height.
+     */
+    readonly snapPoints?: (string | number)[];
     /**
      * Boolean to show a disabled state
      * @default false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.107.3",
+  "version": "0.108.1-visual-reg-5479aeb.25+5479aebb",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -73,7 +73,7 @@
   "devDependencies": {
     "@babel/runtime": "^7.29.2",
     "@gorhom/bottom-sheet": "^5.2.8",
-    "@jobber/design": "0.107.0",
+    "@jobber/design": "0.107.1-visual-reg-5479aeb.32+5479aebb",
     "@jobber/hooks": "2.21.0",
     "@react-native-community/datetimepicker": "^8.4.5",
     "@react-native/babel-preset": "^0.82.1",
@@ -124,5 +124,5 @@
     "react-native-screens": ">=4.18.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "f56f1035f43410c3b2597e5198adf7fdce8b3453"
+  "gitHead": "5479aebba6969f3d68ca0fb11654375c8439ab96"
 }

package/src/ContentOverlay/ContentOverlay.tsx

@@ -36,7 +36,10 @@ import { useIsScreenReaderEnabled } from "../hooks";
 import { IconButton } from "../IconButton";
 import { Heading } from "../Heading";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
-import { useAtlantisTheme } from "../AtlantisThemeContext";
+import {
+  AtlantisThemeContextProvider,
+  useAtlantisTheme,
+} from "../AtlantisThemeContext";
 
 /**
  * Signals whether keyboard handling inside a ContentOverlay is delegated to
@@ -81,6 +84,10 @@ export function ContentOverlay({
   onClose,
   onOpen,
   onBeforeExit,
+  allowDragWithBeforeExit = false,
+  enablePanDownToClose,
+  enableContentPanningGesture,
+  snapPoints: customSnapPoints,
   loading = false,
   ref,
 }: ContentOverlayProps) {
@@ -92,7 +99,7 @@ export function ContentOverlay({
 
   const styles = useStyles();
   const { t } = useAtlantisI18n();
-  const { tokens } = useAtlantisTheme();
+  const { theme, tokens } = useAtlantisTheme();
   const isScreenReaderEnabled = useIsScreenReaderEnabled();
 
   const behavior = computeContentOverlayBehavior(
@@ -101,6 +108,7 @@ export function ContentOverlay({
       adjustToContentHeight,
       isDraggable,
       hasOnBeforeExit: onBeforeExit !== undefined,
+      allowDragWithBeforeExit,
       showDismiss,
     },
     {
@@ -124,12 +132,16 @@ export function ContentOverlay({
 
   // enableDynamicSizing will add another snap point of the content height
   const snapPoints = useMemo(() => {
+    if (customSnapPoints && customSnapPoints.length > 0) {
+      return customSnapPoints;
+    }
+
     // 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%"];
-  }, []);
+  }, [customSnapPoints]);
 
   const onCloseController = () => {
     if (!onBeforeExit) {
@@ -296,43 +308,55 @@ export function ContentOverlay({
       handleIndicatorStyle={handleIndicatorStyles}
       backdropComponent={backdropComponent}
       snapPoints={snapPoints}
-      enablePanDownToClose={effectiveIsDraggable}
-      enableContentPanningGesture={effectiveIsDraggable}
+      enablePanDownToClose={enablePanDownToClose ?? effectiveIsDraggable}
+      enableContentPanningGesture={
+        enableContentPanningGesture ?? effectiveIsDraggable
+      }
       enableHandlePanningGesture={effectiveIsDraggable}
-      enableDynamicSizing={behavior.initialHeight === "contentHeight"}
+      enableDynamicSizing={
+        !customSnapPoints && behavior.initialHeight === "contentHeight"
+      }
       keyboardBehavior="interactive"
       keyboardBlurBehavior="restore"
       topInset={topInset}
       onDismiss={() => onClose?.()}
     >
-      <ContentOverlayKeyboardContext.Provider value={scrollEnabled}>
-        {scrollEnabled ? (
-          <BottomSheetKeyboardAwareScrollView
-            ref={scrollViewRef}
-            contentContainerStyle={{ paddingBottom: insets.bottom }}
-            keyboardShouldPersistTaps={
-              keyboardShouldPersistTaps ? "handled" : "never"
-            }
-            showsVerticalScrollIndicator={false}
-            onScroll={handleOnScroll}
-            stickyHeaderIndices={[0]}
-            bottomOffset={KEYBOARD_TOP_PADDING_AUTO_SCROLL}
-          >
-            {renderHeader()}
-            <View testID="ATL-Overlay-Children">{children}</View>
-          </BottomSheetKeyboardAwareScrollView>
-        ) : (
-          <BottomSheetView>
-            {renderHeader()}
-            <View
-              style={{ paddingBottom: insets.bottom }}
-              testID="ATL-Overlay-Children"
+      {/*
+        BottomSheetModal renders its children through a portal mounted outside
+        this component's subtree, so the AtlantisThemeContext is lost. Re-apply
+        the active theme here so descendants (e.g. the header title) resolve the
+        correct themed tokens.
+      */}
+      <AtlantisThemeContextProvider dangerouslyOverrideTheme={theme}>
+        <ContentOverlayKeyboardContext.Provider value={scrollEnabled}>
+          {scrollEnabled ? (
+            <BottomSheetKeyboardAwareScrollView
+              ref={scrollViewRef}
+              contentContainerStyle={{ paddingBottom: insets.bottom }}
+              keyboardShouldPersistTaps={
+                keyboardShouldPersistTaps ? "handled" : "never"
+              }
+              showsVerticalScrollIndicator={false}
+              onScroll={handleOnScroll}
+              stickyHeaderIndices={[0]}
+              bottomOffset={KEYBOARD_TOP_PADDING_AUTO_SCROLL}
             >
-              {children}
-            </View>
-          </BottomSheetView>
-        )}
-      </ContentOverlayKeyboardContext.Provider>
+              {renderHeader()}
+              <View testID="ATL-Overlay-Children">{children}</View>
+            </BottomSheetKeyboardAwareScrollView>
+          ) : (
+            <BottomSheetView>
+              {renderHeader()}
+              <View
+                style={{ paddingBottom: insets.bottom }}
+                testID="ATL-Overlay-Children"
+              >
+                {children}
+              </View>
+            </BottomSheetView>
+          )}
+        </ContentOverlayKeyboardContext.Provider>
+      </AtlantisThemeContextProvider>
     </BottomSheetModal>
   );
 }

package/src/ContentOverlay/computeContentOverlayBehavior.test.ts

@@ -11,6 +11,7 @@ const defaultConfig: ContentOverlayConfig = {
   adjustToContentHeight: false,
   isDraggable: true,
   hasOnBeforeExit: false,
+  allowDragWithBeforeExit: false,
   showDismiss: false,
 };
 
@@ -112,6 +113,45 @@ describe("computeContentOverlayBehavior", () => {
 
       expect(result.isDraggable).toBe(false);
     });
+
+    it("respects isDraggable=true when onBeforeExit is present and allowDragWithBeforeExit=true", () => {
+      const config = aConfig({
+        isDraggable: true,
+        hasOnBeforeExit: true,
+        allowDragWithBeforeExit: true,
+      });
+      const state = aState();
+
+      const result = computeContentOverlayBehavior(config, state);
+
+      expect(result.isDraggable).toBe(true);
+    });
+
+    it("respects isDraggable=false when onBeforeExit is present and allowDragWithBeforeExit=true", () => {
+      const config = aConfig({
+        isDraggable: false,
+        hasOnBeforeExit: true,
+        allowDragWithBeforeExit: true,
+      });
+      const state = aState();
+
+      const result = computeContentOverlayBehavior(config, state);
+
+      expect(result.isDraggable).toBe(false);
+    });
+
+    it("still overrides to false when onBeforeExit is present and allowDragWithBeforeExit=false (default)", () => {
+      const config = aConfig({
+        isDraggable: true,
+        hasOnBeforeExit: true,
+        allowDragWithBeforeExit: false,
+      });
+      const state = aState();
+
+      const result = computeContentOverlayBehavior(config, state);
+
+      expect(result.isDraggable).toBe(false);
+    });
   });
 
   describe("showDismiss", () => {

package/src/ContentOverlay/computeContentOverlayBehavior.ts

@@ -3,6 +3,7 @@ export interface ContentOverlayConfig {
   adjustToContentHeight: boolean;
   isDraggable: boolean;
   hasOnBeforeExit: boolean;
+  allowDragWithBeforeExit: boolean;
   showDismiss: boolean;
 }
 
@@ -76,14 +77,17 @@ function computeInitialHeight(
 
 /**
  * Draggability determination:
- * - hasOnBeforeExit: true → false (silent override, regardless of isDraggable prop)
+ * - hasOnBeforeExit: true && !allowDragWithBeforeExit → false (legacy override)
+ * - hasOnBeforeExit: true && allowDragWithBeforeExit → use isDraggable prop value
  * - Otherwise → use isDraggable prop value
  *
- * This silent override exists because onBeforeExit needs to intercept close attempts,
- * and dragging would bypass that interception.
+ * The legacy override exists because onBeforeExit needs to intercept close
+ * attempts, and dragging would bypass that interception. Consumers that
+ * explicitly accept the asymmetry (e.g. button-press confirmation,
+ * drag-dismiss silent) can opt out via `allowDragWithBeforeExit`.
  */
 function computeIsDraggable(config: ContentOverlayConfig): boolean {
-  if (config.hasOnBeforeExit) {
+  if (config.hasOnBeforeExit && !config.allowDragWithBeforeExit) {
     return false;
   }
 

package/src/ContentOverlay/types.ts

@@ -66,6 +66,34 @@ export interface ContentOverlayProps {
    */
   readonly onBeforeExit?: () => void;
 
+  /**
+   * Whether panning down on the content area closes the sheet. Set false to prevent the sheet from being closed by panning down.
+   * Defaults to the resolved draggable state.
+   */
+
+  readonly enablePanDownToClose?: boolean;
+
+  /**
+   * When `true`, `onBeforeExit` intercepts the dismiss button and back press
+   * but does not disable drag. Drag-to-dismiss bypasses `onBeforeExit`.
+   * @default false
+   */
+  readonly allowDragWithBeforeExit?: boolean;
+
+  /**
+   * Whether pan on the content area drags the sheet. Set `false` to let
+   * nested scrollables own the gesture. Defaults to the resolved draggable
+   * state.
+   */
+  readonly enableContentPanningGesture?: boolean;
+
+  /**
+   * Explicit snap points for the overlay (percentages or pixel values).
+   * When provided, `adjustToContentHeight` is ignored and the sheet snaps
+   * to these positions instead of the measured content height.
+   */
+  readonly snapPoints?: (string | number)[];
+
   /**
    * Boolean to show a disabled state
    * @default false