@jobber/components-native 0.107.2 → 0.108.0

package/dist/docs/ContentOverlay/ContentOverlay.md

@@ -50,6 +50,9 @@ where it will be a maximum width of 640px and be centered on the screen.
 | `children` | `ReactNode` | Yes | — | Content to be passed into the overlay |
 | `accessibilityLabel` | `string` | No | `"Close {title} modal"` | Optional accessibilityLabel describing the overlay. This will read out when the overlay is opened. |
 | `adjustToContentHeight` | `boolean` | No | `false` | If true, automatically adjusts the overlay height to the content height. This will disable the ability to drag the ov... |
+| `allowDragWithBeforeExit` | `boolean` | No | `false` | When `true`, `onBeforeExit` intercepts the dismiss button and back press but does not disable drag. Drag-to-dismiss b... |
+| `enableContentPanningGesture` | `boolean` | No | — | Whether pan on the content area drags the sheet. Set `false` to let nested scrollables own the gesture. Defaults to t... |
+| `enablePanDownToClose` | `boolean` | No | — | Whether panning down on the content area closes the sheet. Set false to prevent the sheet from being closed by pannin... |
 | `fullScreen` | `boolean` | No | `false` | Force overlay height to fill the screen. Width not impacted. |
 | `isDraggable` | `boolean` | No | `true` | If false, hides the handle and turns off dragging. |
 | `keyboardShouldPersistTaps` | `boolean` | No | `false` | Allows taps to be registered behind keyboard if enabled |
@@ -61,4 +64,5 @@ where it will be a maximum width of 640px and be centered on the screen.
 | `ref` | `Ref<{ open?: () => void; close?: () => void; }>` | No | — | Ref to the content overlay component. |
 | `scrollEnabled` | `boolean` | No | `false` | Enables scrolling in the content body of overlay |
 | `showDismiss` | `boolean` | No | `false` | Display the dismiss button in the header of the overlay. |
+| `snapPoints` | `(string | number)[]` | No | — | Explicit snap points for the overlay (percentages or pixel values). When provided, `adjustToContentHeight` is ignored... |
 | `title` | `string` | No | — | Title of overlay, appears in the header next to the close button. |

package/dist/docs/Icon/Icon.md

@@ -417,6 +417,7 @@ export function IconSizesExample() {
 |      | `future`         |
 |      | `history`        |
 |      | `import`         |
+|      | `merge`          |
 |      | `redo`           |
 |      | `remove`         |
 |      | `search`         |

package/dist/docs/empty-states/empty-states.md

@@ -21,6 +21,7 @@ for the “emptiness” may include, but are not limited to…
 * Search results with no match
 * An error has resulted in the user not being able to access content they
   otherwise could
+* A specific field doesn't have a value (for example, a custom field that the user hasn't populated)
 
 ## Solution
 
@@ -63,6 +64,34 @@ a single Banner can look out of place.
   </Box>
 ```
 
+### Field-level empty states
+
+When a field doesn't have a value, use a dash to indicate the lack of a value.
+This provides:
+
+* confirmation that nothing was entered
+* confirmation that something *can* be entered there should the information require an update
+
+```tsx
+<Card>
+    <Content>
+      <Heading level={4}>Additional details</Heading>
+      <Stack gap="smallest">
+        <Text size="small" variation="subdued">Preferred service date</Text>
+        <Text>June 25, 2026</Text>
+      </Stack>
+      <Stack gap="smallest">
+        <Text size="small" variation="subdued">Gate code</Text>
+        <Text>—</Text>
+      </Stack>
+      <Stack gap="smallest">
+        <Text size="small" variation="subdued">Additional requests</Text>
+        <Text>—</Text>
+      </Stack>
+    </Content>
+  </Card>
+```
+
 ### When the user can't add content
 
 When a card is empty, and there is no way for the user to add content, you

package/dist/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/dist/src/ContentOverlay/ContentOverlay.js

@@ -46,7 +46,7 @@ function getModalBackgroundColor(variation, tokens) {
     }
 }
 // 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, }) {
+export function ContentOverlay({ children, title, accessibilityLabel, fullScreen = false, showDismiss = false, isDraggable = true, adjustToContentHeight = false, keyboardShouldPersistTaps = false, scrollEnabled = false, modalBackgroundColor = "surface", onClose, onOpen, onBeforeExit, allowDragWithBeforeExit = false, enablePanDownToClose, enableContentPanningGesture, snapPoints: customSnapPoints, loading = false, ref, }) {
     const insets = useSafeAreaInsets();
     const { width: windowWidth } = useWindowDimensions();
     const bottomSheetModalRef = useRef(null);
@@ -61,6 +61,7 @@ export function ContentOverlay({ children, title, accessibilityLabel, fullScreen
         adjustToContentHeight,
         isDraggable,
         hasOnBeforeExit: onBeforeExit !== undefined,
+        allowDragWithBeforeExit,
         showDismiss,
     }, {
         isScreenReaderEnabled,
@@ -76,12 +77,15 @@ export function ContentOverlay({ children, title, accessibilityLabel, fullScreen
     const scrollViewRef = useRef(null);
     // 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 = () => {
         var _a;
         if (!onBeforeExit) {
@@ -174,7 +178,7 @@ export function ContentOverlay({ children, title, accessibilityLabel, fullScreen
     const backdropComponent = useMemo(() => function ContentOverlayBackdrop(props) {
         return (React.createElement(Backdrop, Object.assign({}, props, { pressBehavior: isCloseableOnOverlayTap ? "close" : "none" })));
     }, [isCloseableOnOverlayTap]);
-    return (React.createElement(BottomSheetModal, { ref: bottomSheetModalRef, containerComponent: Platform.OS === "ios" ? Container : undefined, onChange: handleChange, style: sheetStyle, backgroundStyle: backgroundStyle, handleStyle: styles.handleWrapper, handleIndicatorStyle: handleIndicatorStyles, backdropComponent: backdropComponent, snapPoints: snapPoints, enablePanDownToClose: effectiveIsDraggable, enableContentPanningGesture: effectiveIsDraggable, enableHandlePanningGesture: effectiveIsDraggable, enableDynamicSizing: behavior.initialHeight === "contentHeight", keyboardBehavior: "interactive", keyboardBlurBehavior: "restore", topInset: topInset, onDismiss: () => onClose === null || onClose === void 0 ? void 0 : onClose() },
+    return (React.createElement(BottomSheetModal, { ref: bottomSheetModalRef, containerComponent: Platform.OS === "ios" ? Container : undefined, onChange: handleChange, style: sheetStyle, backgroundStyle: backgroundStyle, handleStyle: styles.handleWrapper, handleIndicatorStyle: handleIndicatorStyles, backdropComponent: backdropComponent, snapPoints: snapPoints, enablePanDownToClose: enablePanDownToClose !== null && enablePanDownToClose !== void 0 ? enablePanDownToClose : effectiveIsDraggable, enableContentPanningGesture: enableContentPanningGesture !== null && enableContentPanningGesture !== void 0 ? enableContentPanningGesture : effectiveIsDraggable, enableHandlePanningGesture: effectiveIsDraggable, enableDynamicSizing: !customSnapPoints && behavior.initialHeight === "contentHeight", keyboardBehavior: "interactive", keyboardBlurBehavior: "restore", topInset: topInset, onDismiss: () => onClose === null || onClose === void 0 ? void 0 : onClose() },
         React.createElement(ContentOverlayKeyboardContext.Provider, { value: scrollEnabled }, scrollEnabled ? (React.createElement(BottomSheetKeyboardAwareScrollView, { ref: scrollViewRef, contentContainerStyle: { paddingBottom: insets.bottom }, keyboardShouldPersistTaps: keyboardShouldPersistTaps ? "handled" : "never", showsVerticalScrollIndicator: false, onScroll: handleOnScroll, stickyHeaderIndices: [0], bottomOffset: KEYBOARD_TOP_PADDING_AUTO_SCROLL },
             renderHeader(),
             React.createElement(View, { testID: "ATL-Overlay-Children" }, children))) : (React.createElement(BottomSheetView, null,

package/dist/src/ContentOverlay/computeContentOverlayBehavior.js

@@ -42,14 +42,17 @@ function computeInitialHeight(config, isDraggable) {
 }
 /**
  * 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) {
-    if (config.hasOnBeforeExit) {
+    if (config.hasOnBeforeExit && !config.allowDragWithBeforeExit) {
         return false;
     }
     return config.isDraggable;

package/dist/src/ContentOverlay/computeContentOverlayBehavior.test.js

@@ -5,6 +5,7 @@ const defaultConfig = {
     adjustToContentHeight: false,
     isDraggable: true,
     hasOnBeforeExit: false,
+    allowDragWithBeforeExit: false,
     showDismiss: false,
 };
 const defaultState = {
@@ -69,6 +70,36 @@ describe("computeContentOverlayBehavior", () => {
             const result = computeContentOverlayBehavior(config, state);
             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", () => {
         it("returns true when showDismiss prop is true", () => {