@jobber/components-native 0.84.4-match-mobi-55ef4ec.7 → 0.84.4-match-mobi-540af48.10

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.84.4-match-mobi-55ef4ec.7+55ef4ec91",
+    "version": "0.84.4-match-mobi-540af48.10+540af48e1",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -32,10 +32,10 @@
         "build": "npm run build:clean && npm run compile",
         "bootstrap": "npm run build",
         "prepack": "npm run build",
-        "compile": "tsc -b",
+        "compile": "tsc -p tsconfig.build.json",
         "build:clean": "rm -rf ./dist",
         "storybook": "storybook dev -p 6008 --disable-telemetry",
-        "build-storybook": "storybook build --disable-telemetry"
+        "storybook:build": "storybook build --disable-telemetry"
     },
     "dependencies": {
         "@react-native-clipboard/clipboard": "^1.11.2",
@@ -43,8 +43,8 @@
         "autolinker": "^4.0.0",
         "deepmerge": "^4.2.2",
         "lodash": "^4.17.21",
-        "react-hook-form": "^7.30.0",
-        "react-intl": "^6.4.2",
+        "react-hook-form": "^7.52.0",
+        "react-intl": "^7.1.11",
         "react-native-keyboard-aware-scroll-view": "^0.9.5",
         "react-native-modalize": "^2.0.13",
         "react-native-portalize": "^1.0.7",
@@ -53,30 +53,41 @@
         "ts-xor": "^1.1.0"
     },
     "devDependencies": {
+        "@gorhom/bottom-sheet": "^5.2.8",
+        "@react-native-community/datetimepicker": "^8.4.5",
+        "@react-native/babel-preset": "^0.82.1",
         "@storybook/addon-a11y": "^9.1.2",
         "@storybook/react": "^9.1.2",
         "@storybook/react-native-web-vite": "^9.1.2",
-        "@testing-library/jest-native": "^5.4.2",
-        "@testing-library/react-native": "^12.0.1",
+        "@testing-library/react-native": "^13.3.3",
         "@types/lodash.chunk": "^4.2.7",
         "@types/lodash.debounce": "^4.0.7",
         "@types/lodash.identity": "^3.0.7",
-        "@types/react": "^18.0.28",
         "@types/react-native-uuid": "^1.4.0",
-        "metro-react-native-babel-preset": "^0.76.0",
-        "react-test-renderer": "^18.2.0",
+        "@types/react-test-renderer": "19.1.0",
+        "date-fns": "^2.30.0",
+        "date-fns-tz": "^2.0.0",
+        "react-native": "^0.82.1",
+        "react-native-gesture-handler": "^2.29.1",
+        "react-native-modal-datetime-picker": "^18.0.0",
+        "react-native-reanimated": "^3.7.1",
+        "react-native-safe-area-context": "^5.4.0",
+        "react-native-svg": "^15.1.0",
+        "react-native-web": "^0.20.0",
+        "react-test-renderer": "^19.1.1",
         "storybook": "^9.1.2"
     },
     "peerDependencies": {
         "@babel/core": "^7.4.5",
+        "@gorhom/bottom-sheet": "^5.2.8",
         "@jobber/design": "*",
         "@react-native-community/datetimepicker": ">=6.7.0",
         "date-fns": "^2.30.0",
         "date-fns-tz": "^2.0.0",
-        "react": "^18.2.0",
-        "react-intl": "^6.4.2",
-        "react-native": ">=0.76.0",
-        "react-native-gesture-handler": ">=2.10.0",
+        "react": "^19",
+        "react-intl": "^6 || ^7",
+        "react-native": ">=0.79.5",
+        "react-native-gesture-handler": ">=2.22.0",
         "react-native-keyboard-aware-scroll-view": "^0.9.5",
         "react-native-modal-datetime-picker": " >=13.0.0",
         "react-native-modalize": "^2.0.13",
@@ -85,5 +96,5 @@
         "react-native-safe-area-context": "^5.4.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "55ef4ec916758fd15610ded5298d293958e665fa"
+    "gitHead": "540af48e1dfd90116999584f50bca29c4ab9e0ba"
 }

package/dist/src/ActionItem/ActionItemGroup.js

@@ -2,7 +2,7 @@ import React from "react";
 import { View } from "react-native";
 import { useStyles } from "./ActionItem.style";
 import { Divider } from "../Divider";
-export function ActionItemGroup({ children, }) {
+export function ActionItemGroup({ children }) {
     return React.createElement(View, null, renderChildren(children));
 }
 function renderChildren(children) {

package/dist/src/AutoLink/components/Link/Link.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Text as RNText } from "react-native";
 import { Text } from "../../../Text";
-export function Link({ children, onPress, onLongPress, }) {
+export function Link({ children, onPress, onLongPress }) {
     return (React.createElement(RNText, { onPress: onPress, onLongPress: onLongPress },
         React.createElement(Text, { variation: "interactive" }, children)));
 }

package/dist/src/Banner/Banner.js

@@ -48,5 +48,7 @@ function getBannerIcon(type) {
             return "help";
         case "error":
             return "alert";
+        case "success":
+            return "checkmark";
     }
 }

package/dist/src/Banner/components/BannerIcon/BannerIcon.style.js

@@ -14,5 +14,8 @@ export const useStyles = buildThemedStyles(tokens => {
         notice: {
             backgroundColor: tokens["color-informative"],
         },
+        success: {
+            backgroundColor: tokens["color-success"],
+        },
     };
 });

package/dist/src/BottomSheet/BottomSheet.js

@@ -1,52 +1,78 @@
-import React, { forwardRef, useState } from "react";
-import { Modalize } from "react-native-modalize";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import React, { useCallback, useImperativeHandle, useRef } from "react";
 import { Keyboard, View } from "react-native";
-import { BottomSheetOption } from "./components/BottomSheetOption";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import RNBottomSheet, { BottomSheetBackdrop, BottomSheetView, } from "@gorhom/bottom-sheet";
+import { tokens } from "@jobber/design";
 import { useStyles } from "./BottomSheet.style";
-import { useIsScreenReaderEnabled } from "../hooks";
+import { BottomSheetOption } from "./components/BottomSheetOption";
+import { useBottomSheetBackHandler } from "./hooks/useBottomSheetBackHandler";
 import { Divider } from "../Divider";
 import { Heading } from "../Heading";
+import { useIsScreenReaderEnabled } from "../hooks";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
-export const BottomSheet = forwardRef(BottomSheetInternal);
-function BottomSheetInternal({ children, showCancel, loading = false, heading, onOpen, onClose, }, ref) {
-    const isScreenReaderEnabled = useIsScreenReaderEnabled();
-    const [open, setOpen] = useState(false);
+export function BottomSheet({ children, showCancel, loading = false, heading, onOpen, onClose, ref, }) {
     const styles = useStyles();
-    return (React.createElement(React.Fragment, null,
-        open && React.createElement(Overlay, { styles: styles }),
-        React.createElement(Modalize, { ref: ref, adjustToContentHeight: true, modalStyle: styles.modal, overlayStyle: styles.overlayModalize, HeaderComponent: heading && React.createElement(Header, { heading: heading, styles: styles }), FooterComponent: React.createElement(Footer, { cancellable: (showCancel && !loading) || isScreenReaderEnabled, onCancel: () => {
-                    var _a;
-                    (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.close();
-                }, styles: styles }), withHandle: false, withReactModal: isScreenReaderEnabled, onOpen: openModal, onClose: closeModal },
-            React.createElement(View, { style: !showCancel && !isScreenReaderEnabled ? styles.children : undefined }, children))));
-    function openModal() {
-        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-        setOpen(true);
-        dismissKeyboard();
-    }
-    function closeModal() {
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-        setOpen(false);
-    }
+    const isScreenReaderEnabled = useIsScreenReaderEnabled();
+    const cancellable = (showCancel && !loading) || isScreenReaderEnabled;
+    const { t } = useAtlantisI18n();
+    const insets = useSafeAreaInsets();
+    const previousIndexRef = useRef(-1);
+    const bottomSheetRef = useRef(null);
+    const { handleSheetPositionChange } = useBottomSheetBackHandler(bottomSheetRef);
+    useImperativeHandle(ref, () => ({
+        open: () => {
+            var _a;
+            (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.expand();
+        },
+        close: () => {
+            close();
+        },
+    }));
+    const close = useCallback(() => {
+        var _a;
+        (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.close();
+    }, []);
+    const handleChange = (index) => {
+        // Handle Android back button
+        handleSheetPositionChange(index);
+        const previousIndex = previousIndexRef.current;
+        if (previousIndex === -1 && index >= 0) {
+            // Transitioned from closed to open
+            dismissKeyboard();
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        }
+        else if (previousIndex >= 0 && index === -1) {
+            // Transitioned from open to closed
+            dismissKeyboard();
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+        previousIndexRef.current = index;
+    };
+    return (React.createElement(RNBottomSheet, { ref: bottomSheetRef, index: -1, backdropComponent: Backdrop, backgroundStyle: styles.background, enablePanDownToClose: true, onChange: handleChange, keyboardBlurBehavior: "restore", handleStyle: styles.handle },
+        React.createElement(BottomSheetView, { style: {
+                paddingBottom: insets.bottom + tokens["space-small"],
+                paddingTop: tokens["space-small"],
+            } },
+            heading && React.createElement(Header, { heading: heading, styles: styles }),
+            children,
+            cancellable && (React.createElement(Footer, { styles: styles, close: close, cancelLabel: t("cancel") })))));
 }
 function Header({ heading, styles, }) {
     return (React.createElement(View, { style: styles.header },
         React.createElement(Heading, { level: "subtitle" }, heading)));
 }
-function Footer({ cancellable, onCancel, styles, }) {
-    const insets = useSafeAreaInsets();
-    const { t } = useAtlantisI18n();
-    return (React.createElement(View, { style: { marginBottom: insets.bottom } }, cancellable && (React.createElement(View, { style: styles.children },
+function Footer({ styles, close, cancelLabel, }) {
+    return (React.createElement(View, null,
         React.createElement(View, { style: styles.footerDivider },
             React.createElement(Divider, null)),
-        React.createElement(BottomSheetOption, { text: t("cancel"), icon: "remove", onPress: onCancel })))));
+        React.createElement(BottomSheetOption, { text: cancelLabel, icon: "remove", onPress: close })));
 }
 function dismissKeyboard() {
     //Dismisses the keyboard before opening the bottom sheet.
     //In the case where an input text field is focused we don't want to show the bottom sheet behind or above keyboard
     Keyboard.dismiss();
 }
-function Overlay({ styles, }) {
-    return React.createElement(View, { style: styles.overlay });
+function Backdrop(bottomSheetBackdropProps) {
+    const styles = useStyles();
+    return (React.createElement(BottomSheetBackdrop, Object.assign({}, bottomSheetBackdropProps, { appearsOnIndex: 0, disappearsOnIndex: -1, style: styles.backdrop, opacity: 1 })));
 }

package/dist/src/BottomSheet/BottomSheet.style.js

@@ -1,20 +1,16 @@
-import { Dimensions, StyleSheet } from "react-native";
 import { buildThemedStyles } from "../AtlantisThemeContext";
-const { height } = Dimensions.get("window");
 export const useStyles = buildThemedStyles(tokens => {
     const modalBorderRadius = tokens["radius-larger"];
     return {
-        overlayModalize: {
-            backgroundColor: "transparent",
+        backdrop: {
+            backgroundColor: tokens["color-overlay"],
         },
-        overlay: Object.assign(Object.assign({}, StyleSheet.absoluteFillObject), { backgroundColor: tokens["color-overlay"], height }),
-        modal: {
+        background: {
             borderTopLeftRadius: modalBorderRadius,
             borderTopRightRadius: modalBorderRadius,
-            paddingTop: tokens["space-small"],
         },
-        children: {
-            paddingBottom: tokens["space-small"],
+        footerContainer: {
+            backgroundColor: tokens["color-surface"],
         },
         header: {
             paddingHorizontal: tokens["space-base"],
@@ -26,5 +22,8 @@ export const useStyles = buildThemedStyles(tokens => {
             marginTop: tokens["space-small"],
             marginBottom: tokens["space-smaller"],
         },
+        handle: {
+            display: "none",
+        },
     };
 });

package/dist/src/BottomSheet/hooks/useBottomSheetBackHandler.js

@@ -0,0 +1,26 @@
+import { useCallback, useRef } from "react";
+import { BackHandler } from "react-native";
+/**
+ * Hook that closes the bottom sheet on the hardware back button press if it is visible
+ * @param bottomSheetRef ref to the bottom sheet component
+ */
+export function useBottomSheetBackHandler(bottomSheetRef) {
+    const backHandlerSubscriptionRef = useRef(null);
+    const handleSheetPositionChange = useCallback((index) => {
+        var _a;
+        const isBottomSheetVisible = index >= 0;
+        if (isBottomSheetVisible && !backHandlerSubscriptionRef.current) {
+            // Setup the back handler if the bottom sheet is right in front of the user
+            backHandlerSubscriptionRef.current = BackHandler.addEventListener("hardwareBackPress", () => {
+                var _a;
+                (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.close();
+                return true;
+            });
+        }
+        else if (!isBottomSheetVisible) {
+            (_a = backHandlerSubscriptionRef.current) === null || _a === void 0 ? void 0 : _a.remove();
+            backHandlerSubscriptionRef.current = null;
+        }
+    }, [bottomSheetRef]);
+    return { handleSheetPositionChange };
+}

package/dist/src/Button/components/InternalButtonLoading/InternalButtonLoading.js

@@ -8,7 +8,6 @@ const offset = PixelRatio.roundToNearestPixel(imageWidth / PixelRatio.get());
 const leftOffset = -1 * offset;
 // looks like deprecation for FlatList in reanimated is cascading down to other exports
 // This is not createAnimatedComponent(FlatList), we are fine
-// eslint-disable-next-line import/no-deprecated
 const AnimatedImage = Animated.createAnimatedComponent(ImageBackground);
 function InternalButtonLoadingInternal({ variation, type, }) {
     const translateX = useSharedValue(0);

package/dist/src/ButtonGroup/ButtonGroup.js

@@ -9,7 +9,7 @@ import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 export function ButtonGroup({ children, showCancelInBottomSheet, bottomSheetHeading, onOpenBottomSheet, onCloseBottomSheet, allowTapWhenOffline = false, }) {
     const { t } = useAtlantisI18n();
     const { handlePress } = usePreventTapWhenOffline();
-    const secondaryActionsRef = useRef();
+    const secondaryActionsRef = useRef(null);
     const { primaryActions, secondaryActions } = getActions(children);
     const styles = useStyles();
     return (React.createElement(View, { style: styles.buttonGroup },

package/dist/src/Chip/Chip.js

@@ -19,6 +19,7 @@ export function Chip({ icon, label, onPress, isDismissible, isActive, inactiveBa
                     : tokens["color-interactive--background"],
             },
             isActive && { backgroundColor: accentColor },
+            getBorderStyle(inactiveBackgroundColor, tokens),
         ];
         const dismiss = (isActive || inactiveBackgroundColor === "surface") &&
             styles.activeDismissIcon;
@@ -27,7 +28,7 @@ export function Chip({ icon, label, onPress, isDismissible, isActive, inactiveBa
             iconCustomColor: iconColor,
             dismissColor: dismiss,
         };
-    }, [accent, isActive, inactiveBackgroundColor]);
+    }, [accent, isActive, inactiveBackgroundColor, getBorderStyle, styles]);
     const accessibilityState = useMemo(() => {
         const checkableRoles = ["radio", "switch", "togglebutton", "checkbox"];
         if (checkableRoles.includes(accessibilityRole)) {
@@ -43,3 +44,13 @@ export function Chip({ icon, label, onPress, isDismissible, isActive, inactiveBa
         isDismissible && (React.createElement(View, { style: [styles.dismissIcon, dismissColor] },
             React.createElement(Icon, { name: "remove", size: "small" })))));
 }
+function getBorderStyle(inactiveBackgroundColor, tokens) {
+    let borderColor = "transparent";
+    if (inactiveBackgroundColor === "surface") {
+        borderColor = tokens["color-border"];
+    }
+    return {
+        borderColor,
+        borderWidth: tokens["border-base"],
+    };
+}

package/dist/src/Chip/Chip.style.js

@@ -10,7 +10,7 @@ export const useStyles = buildThemedStyles(tokens => {
             justifyContent: "center",
             marginHorizontal: tokens["space-smaller"],
             marginTop: tokens["space-small"],
-            paddingHorizontal: tokens["space-small"],
+            paddingHorizontal: tokens["space-base"],
         },
         iconLeft: {
             marginHorizontal: tokens["space-smallest"],

package/dist/src/Content/ContentHorizontal.style.js

@@ -12,6 +12,9 @@ export const useHorizontalStyles = buildThemedStyles(tokens => {
         noneChildSpace: {
             padding: 0,
         },
+        minusculeChildSpace: {
+            paddingLeft: tokens["space-minuscule"],
+        },
         smallestChildSpace: {
             paddingLeft: tokens["space-smallest"],
         },
@@ -21,11 +24,23 @@ export const useHorizontalStyles = buildThemedStyles(tokens => {
         smallChildSpace: {
             paddingLeft: tokens["space-small"],
         },
+        slimChildSpace: {
+            paddingLeft: tokens["space-slim"],
+        },
         baseChildSpace: {
             paddingLeft: tokens["space-base"],
         },
         largeChildSpace: {
             paddingLeft: tokens["space-large"],
         },
+        largerChildSpace: {
+            paddingLeft: tokens["space-larger"],
+        },
+        largestChildSpace: {
+            paddingLeft: tokens["space-largest"],
+        },
+        extravagantChildSpace: {
+            paddingLeft: tokens["space-extravagant"],
+        },
     };
 });

package/dist/src/Content/ContentSpaceAround.style.js

@@ -4,6 +4,9 @@ export const useSpaceAroundStyles = buildThemedStyles(tokens => {
         noneSpace: {
             padding: 0,
         },
+        minusculeSpace: {
+            padding: tokens["space-minuscule"],
+        },
         smallestSpace: {
             padding: tokens["space-smallest"],
         },
@@ -13,11 +16,23 @@ export const useSpaceAroundStyles = buildThemedStyles(tokens => {
         smallSpace: {
             padding: tokens["space-small"],
         },
+        slimSpace: {
+            padding: tokens["space-slim"],
+        },
         baseSpace: {
             padding: tokens["space-base"],
         },
         largeSpace: {
             padding: tokens["space-large"],
         },
+        largerSpace: {
+            padding: tokens["space-larger"],
+        },
+        largestSpace: {
+            padding: tokens["space-largest"],
+        },
+        extravagantSpace: {
+            padding: tokens["space-extravagant"],
+        },
     };
 });

package/dist/src/Content/ContentVertical.style.js

@@ -12,6 +12,9 @@ export const useVerticalStyles = buildThemedStyles(tokens => {
         noneChildSpace: {
             padding: 0,
         },
+        minusculeChildSpace: {
+            paddingTop: tokens["space-minuscule"],
+        },
         smallestChildSpace: {
             paddingTop: tokens["space-smallest"],
         },
@@ -21,11 +24,23 @@ export const useVerticalStyles = buildThemedStyles(tokens => {
         smallChildSpace: {
             paddingTop: tokens["space-small"],
         },
+        slimChildSpace: {
+            paddingTop: tokens["space-slim"],
+        },
         baseChildSpace: {
             paddingTop: tokens["space-base"],
         },
         largeChildSpace: {
             paddingTop: tokens["space-large"],
         },
+        largerChildSpace: {
+            paddingTop: tokens["space-larger"],
+        },
+        largestChildSpace: {
+            paddingTop: tokens["space-largest"],
+        },
+        extravagantChildSpace: {
+            paddingTop: tokens["space-extravagant"],
+        },
     };
 });

package/dist/src/ContentOverlay/ContentOverlay.js

@@ -1,11 +1,11 @@
 import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState, } from "react";
-import { Modalize } from "react-native-modalize";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { AccessibilityInfo, Platform, View, findNodeHandle, useWindowDimensions, } from "react-native";
 import { Portal } from "react-native-portalize";
 import { useKeyboardVisibility } from "./hooks/useKeyboardVisibility";
 import { useStyles } from "./ContentOverlay.style";
 import { useViewLayoutHeight } from "./hooks/useViewLayoutHeight";
+import { UNSAFE_WrappedModalize } from "./UNSAFE_WrappedModalize";
 import { useIsScreenReaderEnabled } from "../hooks";
 import { IconButton } from "../IconButton";
 import { Heading } from "../Heading";
@@ -26,8 +26,8 @@ function ContentOverlayInternal({ children, title, accessibilityLabel, fullScree
     const isFullScreenOrTopPosition = fullScreen || (!adjustToContentHeight && position === "top");
     const shouldShowDismiss = showDismiss || isScreenReaderEnabled || isFullScreenOrTopPosition;
     const [showHeaderShadow, setShowHeaderShadow] = useState(false);
-    const overlayHeader = useRef();
-    const internalRef = useRef();
+    const overlayHeader = useRef(null);
+    const internalRef = useRef(null);
     const [modalizeMethods, setModalizeMethods] = useState();
     const callbackInternalRef = useCallback((instance) => {
         if (instance && !internalRef.current) {
@@ -86,7 +86,7 @@ function ContentOverlayInternal({ children, title, accessibilityLabel, fullScree
         }
     };
     return (React.createElement(React.Fragment, null,
-        headerHeightKnown && childrenHeightKnown && (React.createElement(Modalize, { ref: callbackInternalRef, overlayStyle: styles.overlay, handleStyle: styles.handle, handlePosition: "inside", modalStyle: modalStyle, modalTopOffset: tokens["space-larger"], snapPoint: snapPoint, closeSnapPointStraightEnabled: false, withHandle: isDraggable, panGestureEnabled: isDraggable, adjustToContentHeight: adjustToContentHeight, disableScrollIfPossible: !adjustToContentHeight, onClose: onClose, onOpen: onOpen, keyboardAvoidingBehavior: keyboardAvoidingBehavior, avoidKeyboardLikeIOS: avoidKeyboardLikeIOS, childrenStyle: styles.childrenStyle, onBackButtonPress: onCloseController, closeOnOverlayTap: isCloseableOnOverlayTap, onOpened: () => {
+        headerHeightKnown && childrenHeightKnown && (React.createElement(UNSAFE_WrappedModalize, { ref: callbackInternalRef, overlayStyle: styles.overlay, handleStyle: styles.handle, handlePosition: "inside", modalStyle: modalStyle, modalTopOffset: tokens["space-larger"], snapPoint: snapPoint, closeSnapPointStraightEnabled: false, withHandle: isDraggable, panGestureEnabled: isDraggable, adjustToContentHeight: adjustToContentHeight, disableScrollIfPossible: !adjustToContentHeight, onClose: onClose, onOpen: onOpen, keyboardAvoidingBehavior: keyboardAvoidingBehavior, avoidKeyboardLikeIOS: avoidKeyboardLikeIOS, childrenStyle: styles.childrenStyle, onBackButtonPress: onCloseController, closeOnOverlayTap: isCloseableOnOverlayTap, onOpened: () => {
                 if (overlayHeader.current) {
                     const reactTag = findNodeHandle(overlayHeader.current);
                     if (reactTag) {
@@ -124,9 +124,7 @@ function ContentOverlayInternal({ children, title, accessibilityLabel, fullScree
                             : styles.titleWithoutDismiss,
                     ] },
                     React.createElement(Heading, { level: "subtitle", variation: loading ? "subdued" : "heading", align: "start" }, title)),
-                shouldShowDismiss && (React.createElement(View, { style: styles.dismissButton, 
-                    // @ts-expect-error tsc-ci
-                    ref: overlayHeader, accessibilityLabel: accessibilityLabel || closeOverlayA11YLabel, accessible: true },
+                shouldShowDismiss && (React.createElement(View, { style: styles.dismissButton, ref: overlayHeader, accessibilityLabel: accessibilityLabel || closeOverlayA11YLabel, accessible: true },
                     React.createElement(IconButton, { name: "cross", customColor: loading ? tokens["color-disabled"] : tokens["color-heading"], onPress: () => onCloseController(), accessibilityLabel: closeOverlayA11YLabel, testID: "ATL-Overlay-CloseButton" }))))));
     }
     function renderChildren() {

package/dist/src/ContentOverlay/UNSAFE_WrappedModalize.js

@@ -0,0 +1,23 @@
+import React, { forwardRef, useImperativeHandle, useRef, useState, } from "react";
+import { Modalize } from "react-native-modalize";
+export const UNSAFE_WrappedModalize = forwardRef((props, ref) => {
+    const innerRef = useRef(null);
+    const [openRenderId, setOpenRenderId] = useState(0);
+    useImperativeHandle(ref, () => ({
+        open(dest) {
+            setOpenRenderId(id => id + 1);
+            // Open on a fresh tick for additional safety
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.open(dest);
+            });
+        },
+        close(dest) {
+            var _a;
+            (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.close(dest);
+        },
+    }), []);
+    // Use a unique key to force a remount, ensuring we get fresh gesture handler nodes within modalize
+    return (React.createElement(Modalize, Object.assign({ key: `modalize-${openRenderId}`, ref: innerRef }, props)));
+});
+UNSAFE_WrappedModalize.displayName = "UNSAFE_WrappedModalize";

package/dist/src/ErrorMessageWrapper/context/ErrorMessageProvider.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { AccessibilityInfo, findNodeHandle } from "react-native";
 import { ErrorMessageContext } from "./ErrorMessageContext";
-export function ErrorMessageProvider({ children, }) {
+export function ErrorMessageProvider({ children }) {
     const [elements, setElements] = useState({});
     return (React.createElement(ErrorMessageContext.Provider, { value: {
             elements,

package/dist/src/Form/Form.js

@@ -38,6 +38,7 @@ import { useScrollToError } from "./hooks/useScrollToError";
 import { FormSaveButton } from "./components/FormSaveButton";
 import { useSaveButtonPosition } from "./hooks/useSaveButtonPosition";
 import { FormCache } from "./components/FormCache/FormCache";
+import { useAtlantisFormContext } from "./context/AtlantisFormContext";
 import { InputAccessoriesProvider } from "../InputText";
 import { tokens } from "../utils/design";
 import { ErrorMessageProvider } from "../ErrorMessageWrapper";
@@ -48,7 +49,7 @@ export function Form(_a) {
         React.createElement(ErrorMessageProvider, null, child)));
 }
 // eslint-disable-next-line max-statements
-function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSubmitSuccess, bannerErrors, bannerMessages, initialValues, mode = "onTouched", reValidateMode = "onChange", formRef, saveButtonLabel, renderStickySection, localCacheKey, localCacheExclude, localCacheId, secondaryActions, saveButtonOffset, showStickySaveButton = false, renderFooter, }) {
+function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSubmitSuccess, bannerErrors, bannerMessages, initialValues, mode = "onTouched", reValidateMode = "onChange", formRef, saveButtonLabel, renderStickySection, localCacheKey, localCacheExclude, localCacheId, secondaryActions, saveButtonOffset, showStickySaveButton = false, renderFooter, UNSAFE_allowDiscardLocalCacheWhenOffline, }) {
     var _a;
     const { scrollViewRef, bottomViewRef, scrollToTop } = useFormViewRefs();
     const [saveButtonHeight, setSaveButtonHeight] = useState(0);
@@ -64,6 +65,7 @@ function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSub
         scrollViewRef,
         saveButtonHeight,
         messageBannerHeight,
+        UNSAFE_allowDiscardLocalCacheWhenOffline,
     });
     const { windowHeight, headerHeight } = useScreenInformation();
     const [keyboardHeight, setKeyboardHeight] = useState(0);
@@ -102,12 +104,13 @@ function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSub
         setMessageBannerHeight(event.nativeEvent.layout.height);
     };
     const styles = useStyles();
+    const { edgeToEdgeEnabled } = useAtlantisFormContext();
     return (React.createElement(FormProvider, Object.assign({}, formMethods),
         React.createElement(React.Fragment, null,
             (isSubmitting || isSecondaryActionLoading) && React.createElement(FormMask, null),
             React.createElement(FormCache, { localCacheKey: localCacheKey, localCacheExclude: localCacheExclude, setLocalCache: setLocalCache }),
             React.createElement(FormBody, { keyboardHeight: calculateSaveButtonOffset(), submit: handleSubmit(internalSubmit), isFormSubmitting: isSubmitting, saveButtonLabel: saveButtonLabel, shouldRenderActionBar: saveButtonPosition === "sticky", renderStickySection: renderStickySection, secondaryActions: secondaryActions, setSecondaryActionLoading: setIsSecondaryActionLoading, setSaveButtonHeight: setSaveButtonHeight, saveButtonOffset: saveButtonOffset },
-                React.createElement(KeyboardAwareScrollView, Object.assign({ enableResetScrollToCoords: false, enableAutomaticScroll: true, keyboardOpeningTime: Platform.OS === "ios" ? tokens["timing-slowest"] : 0, keyboardShouldPersistTaps: "handled", ref: scrollViewRef }, keyboardProps, { extraHeight: headerHeight, contentContainerStyle: !keyboardHeight && styles.scrollContentContainer }),
+                React.createElement(KeyboardAwareScrollView, Object.assign({ enableResetScrollToCoords: false, enableAutomaticScroll: true, enableOnAndroid: edgeToEdgeEnabled, keyboardOpeningTime: Platform.OS === "ios" ? tokens["timing-slowest"] : 0, keyboardShouldPersistTaps: "handled", ref: scrollViewRef }, keyboardProps, { extraHeight: headerHeight, extraScrollHeight: edgeToEdgeEnabled ? tokens["space-large"] : 0, contentContainerStyle: !keyboardHeight && styles.scrollContentContainer }),
                     React.createElement(View, { onLayout: ({ nativeEvent }) => {
                             setFormContentHeight(nativeEvent.layout.height);
                         } },

package/dist/src/Form/components/FormCache/FormCache.js

@@ -28,5 +28,6 @@ export function FormCache({ localCacheExclude, localCacheKey, setLocalCache, })
             setLocalCache(formData);
         }
     }, [formData, isDirty, localCacheExclude, setLocalCache, shouldExclude]);
+    // eslint-disable-next-line react/jsx-no-useless-fragment
     return React.createElement(React.Fragment, null);
 }

package/dist/src/Form/components/FormMessageBanner/FormMessageBanner.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { FormBannerMessageType } from "../../types";
 import { Banner } from "../../../Banner";
-export function FormMessageBanner({ bannerMessages, }) {
+export function FormMessageBanner({ bannerMessages }) {
     return (React.createElement(React.Fragment, null, bannerMessages === null || bannerMessages === void 0 ? void 0 : bannerMessages.map((message, index) => (React.createElement(Banner, { key: index, text: message.message, type: getBannerType(message.messageType) })))));
 }
 function getBannerType(messageType) {

package/dist/src/Form/context/AtlantisFormContext.js

@@ -8,6 +8,7 @@ export const atlantisFormContextDefaultValues = {
         setLocalCache: () => undefined,
         removeLocalCache: () => undefined,
     }),
+    edgeToEdgeEnabled: false,
 };
 export const AtlantisFormContext = createContext(atlantisFormContextDefaultValues);
 export function useAtlantisFormContext() {