@jobber/components-native 0.107.3 → 0.108.1

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/InputTime/InputTime.md

@@ -29,6 +29,14 @@ number automatically fills in the rest of the time. For example, typing `2` will
 fill in `2:00 PM` and typing `1` waits for a few milliseconds in case the user
 wants to type `10`, `11`, or `12`.
 
+## Sizes and the placeholder
+
+Consistent with other inputs, `size="small"` does not show the floating mini
+label. The placeholder appears while the field is empty and unfocused, and is
+hidden while the field is being edited or has a value, keeping the field at its
+small height throughout. The default and `large` sizes float the placeholder up
+as a mini label while editing or once a value is set.
+
 
 ## Props
 

package/dist/docs/ProgressBar/ProgressBar.md

@@ -1,5 +1,14 @@
 # Progress Bar
 
+> **Deprecated.** Use [ProgressIndicator](/components/ProgressIndicator) for new
+> work. `ProgressIndicator` is the supported determinate progress indicator
+> going forward — it offers the same semantic with a cleaner prop surface
+> (`value` / `max` instead of `currentStep` / `totalSteps`,
+> `variation="continuous"` instead of `"progress"`, plain `className` / `style`
+> instead of `UNSAFE_*`), theme-adaptive tokens, and a unified
+> `<div role="progressbar">` structure across continuous and stepped variations.
+> `ProgressBar` continues to work unchanged for existing call sites.
+
 A ProgressBar is a visual indicator of how close something is to completion.
 
 ## Design & usage guidelines

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.107.3",
+    "version": "0.108.1",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -124,5 +124,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "f56f1035f43410c3b2597e5198adf7fdce8b3453"
+    "gitHead": "7d8b08e91839f535411288b03a8603f2df310a8e"
 }

package/dist/src/ContentOverlay/ContentOverlay.js

@@ -23,7 +23,7 @@ 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
  * a keyboard-aware scroll view (e.g. BottomSheetKeyboardAwareScrollView).
@@ -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);
@@ -54,13 +54,14 @@ export function ContentOverlay({ children, title, accessibilityLabel, fullScreen
     const [currentPosition, setCurrentPosition] = useState(-1);
     const styles = useStyles();
     const { t } = useAtlantisI18n();
-    const { tokens } = useAtlantisTheme();
+    const { theme, tokens } = useAtlantisTheme();
     const isScreenReaderEnabled = useIsScreenReaderEnabled();
     const behavior = computeContentOverlayBehavior({
         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,12 +178,13 @@ 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() },
-        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,
-            renderHeader(),
-            React.createElement(View, { style: { paddingBottom: insets.bottom }, testID: "ATL-Overlay-Children" }, children))))));
+    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(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: theme },
+            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,
+                renderHeader(),
+                React.createElement(View, { style: { paddingBottom: insets.bottom }, testID: "ATL-Overlay-Children" }, children)))))));
 }
 function Backdrop(bottomSheetBackdropProps) {
     const styles = useStyles();

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", () => {