@jobber/components-native 0.92.0 → 0.94.0

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.92.0",
+    "version": "0.94.0",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -53,6 +53,7 @@
         "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",
@@ -78,6 +79,7 @@
     },
     "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",
@@ -94,5 +96,5 @@
         "react-native-safe-area-context": "^5.4.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "1ca01305080db58e135d5224ab329a8df4ad92ff"
+    "gitHead": "c781bba08e241b32046afba42dff63d213e4a7fd"
 }

package/dist/src/BottomSheet/BottomSheet.js

@@ -1,52 +1,78 @@
-import React, { forwardRef, useState } from "react";
-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 { UNSAFE_WrappedModalize } from "../ContentOverlay/UNSAFE_WrappedModalize";
-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(UNSAFE_WrappedModalize, { 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/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/InputText/InputText.js

@@ -93,10 +93,10 @@ function InputTextInternal({ invalid, disabled, readonly = false, name, placehol
                 _name && setFocusedInput(_name);
                 setFocused(true);
                 onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-            }, onBlur: () => {
+            }, onBlur: event => {
                 _name && setFocusedInput("");
                 setFocused(false);
-                onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+                onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
                 field.onBlur();
                 trimWhitespace(inputTransform(field.value), updateFormAndState);
             }, ref: (instance) => {