@jobber/components-native 0.93.0 → 0.95.0

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.93.0",
+    "version": "0.95.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": "a84b7d122f13b650fd7f77cda794d71f1d25317b"
+    "gitHead": "ea9cbb709f05442a469763a4f12a332a59cb6350"
 }

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/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) => {

package/dist/src/ProgressBar/ProgressBar.js

@@ -6,17 +6,21 @@ import { ProgressBarStepped } from "./ProgressBarStepped";
 import { sizeStyles } from "./ProgressBar.size.style";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
-export function ProgressBar({ loading, total, current, inProgress = 0, reverseTheme = false, header, variation = "progress", size = "base", }) {
+export function ProgressBar({ loading, total, current, inProgress = 0, reverseTheme = false, header, variation = "progress", size = "base", UNSAFE_style, }) {
     const { t } = useAtlantisI18n();
     const styles = useStyles();
     const { tokens } = useAtlantisTheme();
-    return (React.createElement(View, { accessible: true, accessibilityRole: "progressbar", accessibilityLabel: getA11yLabel() },
+    return (React.createElement(View, { accessible: true, accessibilityRole: "progressbar", accessibilityLabel: getA11yLabel(), style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container },
         header,
-        variation === "stepped" ? (React.createElement(ProgressBarStepped, { total: total, current: current, color: reverseTheme ? undefined : tokens["color-interactive--background"], loading: loading, inProgress: inProgress })) : (React.createElement(View, { style: [styles.progressBarContainer, sizeStyles[size]] },
-            React.createElement(ProgressBarInner, { width: 100, animationDuration: 0, color: reverseTheme ? undefined : tokens["color-interactive--background"] }),
+        variation === "stepped" ? (React.createElement(ProgressBarStepped, { total: total, current: current, color: reverseTheme ? undefined : tokens["color-interactive--background"], loading: loading, inProgress: inProgress, UNSAFE_style: UNSAFE_style })) : (React.createElement(View, { testID: "progressbar-container", style: [
+                styles.progressBarContainer,
+                sizeStyles[size],
+                UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.progressBarContainer,
+            ] },
+            React.createElement(ProgressBarInner, { testID: "progressbar-track", width: 100, animationDuration: 0, color: reverseTheme ? undefined : tokens["color-interactive--background"], style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.track }),
             !loading && (React.createElement(React.Fragment, null,
-                inProgress && inProgress > 0 ? (React.createElement(ProgressBarInner, { width: calculateWidth(total, current + inProgress), color: tokens["color-informative"], animationDuration: 800 })) : (React.createElement(React.Fragment, null)),
-                React.createElement(ProgressBarInner, { width: calculateWidth(total, current), color: tokens["color-interactive"], animationDuration: 600 })))))));
+                inProgress && inProgress > 0 ? (React.createElement(ProgressBarInner, { testID: "progressbar-inprogress", width: calculateWidth(total, current + inProgress), color: tokens["color-informative"], animationDuration: 800, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.inProgressFill })) : (React.createElement(React.Fragment, null)),
+                React.createElement(ProgressBarInner, { testID: "progressbar-fill", width: calculateWidth(total, current), color: tokens["color-interactive"], animationDuration: 600, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.fill })))))));
     function getA11yLabel() {
         const a11yLabelValues = {
             current: String(current),

package/dist/src/ProgressBar/ProgressBarInner.js

@@ -1,21 +1,12 @@
 import React from "react";
 import { View } from "react-native";
-// import Reanimated from "react-native-reanimated";
-// import { useTiming } from "utils/reanimated";
 import { useStyles } from "./ProgressBar.style";
-export function ProgressBarInner({ width, 
-// animationDuration = 0,
-color, }) {
-    // Animation breaking on Android
-    // const [animatedOpacity] = useTiming({
-    //   duration: animationDuration,
-    //   fromValue: 0,
-    //   toValue: 1,
-    // });
+export function ProgressBarInner({ width, color, style, testID, }) {
     const styles = useStyles();
-    return (React.createElement(View, { style: [
+    return (React.createElement(View, { testID: testID, style: [
             styles.progressBarInner,
             Object.assign({ width: `${width}%` }, (color && { backgroundColor: color })),
+            style,
         ] }));
 }
 export function calculateWidth(total, current) {

package/dist/src/ProgressBar/ProgressBarStepped.js

@@ -1,9 +1,13 @@
 import React from "react";
 import { View } from "react-native";
 import { useStyles } from "./ProgressBar.style";
-export function ProgressBarStepped({ total, current, color, loading, inProgress, }) {
+export function ProgressBarStepped({ total, current, color, loading, inProgress, UNSAFE_style, }) {
     const styles = useStyles();
-    return (React.createElement(View, { style: [styles.progressBarContainer, { height: 10 }] }, Array.from({ length: total }).map((_, index) => {
+    return (React.createElement(View, { testID: "progressbar-container", style: [
+            styles.progressBarContainer,
+            { height: 10 },
+            UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.progressBarContainer,
+        ] }, Array.from({ length: total }).map((_, index) => {
         const step = index + 1;
         const isCompleted = step <= current;
         const lastStep = step === total;
@@ -17,6 +21,7 @@ export function ProgressBarStepped({ total, current, color, loading, inProgress,
                     step <= inProgressSteps &&
                     styles.inProgressStep,
                 lastStep && { marginRight: 0 },
+                UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.step,
             ], testID: isCompleted
                 ? "progress-step-completed"
                 : step <= inProgressSteps