@jobber/components-native 0.107.2 → 0.108.0

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.2",
+  "version": "0.108.0",
   "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.106.1",
+    "@jobber/design": "0.107.0",
     "@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": "3f6678b1792101e43e544ec51cfa17d883362460"
+  "gitHead": "d5470a957047c13206da81b769b223f08e670d92"
 }

package/src/ContentOverlay/ContentOverlay.tsx

@@ -81,6 +81,10 @@ export function ContentOverlay({
   onClose,
   onOpen,
   onBeforeExit,
+  allowDragWithBeforeExit = false,
+  enablePanDownToClose,
+  enableContentPanningGesture,
+  snapPoints: customSnapPoints,
   loading = false,
   ref,
 }: ContentOverlayProps) {
@@ -101,6 +105,7 @@ export function ContentOverlay({
       adjustToContentHeight,
       isDraggable,
       hasOnBeforeExit: onBeforeExit !== undefined,
+      allowDragWithBeforeExit,
       showDismiss,
     },
     {
@@ -124,12 +129,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,10 +305,14 @@ 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}

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