@jobber/components-native 0.89.4 → 0.89.5-JOB-140604-4c8f8f2.41

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.89.4",
+    "version": "0.89.5-JOB-140604-4c8f8f2.41+4c8f8f2c3",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -53,6 +53,7 @@
         "ts-xor": "^1.1.0"
     },
     "devDependencies": {
+        "@gorhom/bottom-sheet": "^5.2.6",
         "@react-native-community/datetimepicker": "^8.4.5",
         "@react-native/babel-preset": "^0.81.1",
         "@storybook/addon-a11y": "^9.1.2",
@@ -78,6 +79,7 @@
     },
     "peerDependencies": {
         "@babel/core": "^7.4.5",
+        "@gorhom/bottom-sheet": "^5.2.6",
         "@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": "adc76ab79cbad1b62fa1d3ff35020f061b390292"
+    "gitHead": "4c8f8f2c37844355a5d654999ce62550aeeba2d8"
 }

package/dist/src/BottomSheet/BottomSheet.js

@@ -1,52 +1,72 @@
-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, BottomSheetFooter, BottomSheetView, } from "@gorhom/bottom-sheet";
 import { useStyles } from "./BottomSheet.style";
-import { UNSAFE_WrappedModalize } from "../ContentOverlay/UNSAFE_WrappedModalize";
-import { useIsScreenReaderEnabled } from "../hooks";
+import { BottomSheetOption } from "./components/BottomSheetOption";
+import { BottomSheetInputText } from "./components/BottomSheetInputText/BottomSheetInputText";
 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);
+    useImperativeHandle(ref, () => ({
+        open: () => {
+            var _a;
+            (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.expand();
+        },
+        close: () => {
+            var _a;
+            (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.close();
+        },
+    }));
+    const handleChange = (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;
+    };
+    const renderFooter = useCallback((bottomSheetFooterProps) => {
+        return (React.createElement(BottomSheetFooter, Object.assign({}, bottomSheetFooterProps),
+            React.createElement(View, { style: [styles.footerContainer, { paddingBottom: insets.bottom }] }, cancellable && (React.createElement(View, { style: styles.footer },
+                React.createElement(View, { style: styles.footerDivider },
+                    React.createElement(Divider, null)),
+                React.createElement(BottomSheetOption, { text: t("cancel"), icon: "remove", onPress: () => {
+                        var _a;
+                        (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.close();
+                    } }))))));
+    }, [cancellable]);
+    return (React.createElement(RNBottomSheet, { ref: bottomSheetRef, index: -1, backdropComponent: Backdrop, backgroundStyle: styles.background, footerComponent: renderFooter, enablePanDownToClose: true, onChange: handleChange, keyboardBlurBehavior: "restore" },
+        React.createElement(BottomSheetView, { style: styles.content, enableFooterMarginAdjustment: true },
+            heading && React.createElement(Header, { heading: heading, styles: styles }),
+            children)));
 }
 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 },
-        React.createElement(View, { style: styles.footerDivider },
-            React.createElement(Divider, null)),
-        React.createElement(BottomSheetOption, { text: t("cancel"), icon: "remove", onPress: onCancel })))));
-}
 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 })));
 }
+BottomSheet.InputText = BottomSheetInputText;

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

@@ -1,21 +1,23 @@
-import { Dimensions, StyleSheet } from "react-native";
+import { 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",
-        },
-        overlay: Object.assign(Object.assign({}, StyleSheet.absoluteFillObject), { backgroundColor: tokens["color-overlay"], height }),
-        modal: {
+        backdrop: Object.assign(Object.assign({}, StyleSheet.absoluteFillObject), { backgroundColor: tokens["color-overlay"] }),
+        background: {
             borderTopLeftRadius: modalBorderRadius,
             borderTopRightRadius: modalBorderRadius,
             paddingTop: tokens["space-small"],
         },
-        children: {
+        content: {
+            paddingBottom: tokens["space-small"],
+        },
+        footer: {
             paddingBottom: tokens["space-small"],
         },
+        footerContainer: {
+            backgroundColor: tokens["color-surface"],
+        },
         header: {
             paddingHorizontal: tokens["space-base"],
             paddingTop: tokens["space-small"],

package/dist/src/BottomSheet/components/BottomSheetInputText/BottomSheetInputText.js

@@ -0,0 +1,45 @@
+import React, { forwardRef, useCallback } from "react";
+import { TextInput, View, findNodeHandle } from "react-native";
+import { useBottomSheetInternal } from "@gorhom/bottom-sheet";
+import { useStyles } from "./BottomSheetInputText.styles";
+import { InputText } from "../../../InputText/InputText";
+/**
+ * BottomSheetInputText is a wrapper around InputText that provides
+ * bottom sheet keyboard handling. It implements the handleOnFocus and
+ * handleOnBlur logic from BottomSheetTextInput to ensure proper keyboard
+ * positioning within bottom sheets.
+ */
+export const BottomSheetInputText = forwardRef(function BottomSheetInputText(props, ref) {
+    const styles = useStyles();
+    const { onFocus, onBlur } = props;
+    const { animatedKeyboardState, textInputNodesRef } = useBottomSheetInternal();
+    const handleOnFocus = useCallback((event) => {
+        animatedKeyboardState.set((state) => (Object.assign(Object.assign({}, state), { target: event === null || event === void 0 ? void 0 : event.nativeEvent.target })));
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    }, [animatedKeyboardState, onFocus]);
+    const handleOnBlur = useCallback((event) => {
+        const keyboardState = animatedKeyboardState.get();
+        const currentlyFocusedInput = TextInput.State.currentlyFocusedInput();
+        const currentFocusedInput = currentlyFocusedInput !== null
+            ? findNodeHandle(
+            // @ts-expect-error - TextInput.State.currentlyFocusedInput() returns NativeMethods
+            // which is not directly assignable to findNodeHandle's expected type,
+            // but it works at runtime. This is a known type limitation in React Native.
+            currentlyFocusedInput)
+            : null;
+        /**
+         * we need to make sure that we only remove the target
+         * if the target belong to the current component and
+         * if the currently focused input is not in the targets set.
+         */
+        const shouldRemoveCurrentTarget = keyboardState.target === (event === null || event === void 0 ? void 0 : event.nativeEvent.target);
+        const shouldIgnoreBlurEvent = currentFocusedInput &&
+            textInputNodesRef.current.has(currentFocusedInput);
+        if (shouldRemoveCurrentTarget && !shouldIgnoreBlurEvent) {
+            animatedKeyboardState.set((state) => (Object.assign(Object.assign({}, state), { target: undefined })));
+        }
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }, [animatedKeyboardState, textInputNodesRef, onBlur]);
+    return (React.createElement(View, { style: styles.inputText },
+        React.createElement(InputText, Object.assign({}, props, { ref: ref, onFocus: handleOnFocus, onBlur: handleOnBlur }))));
+});

package/dist/src/BottomSheet/components/BottomSheetInputText/BottomSheetInputText.styles.js

@@ -0,0 +1,8 @@
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        inputText: {
+            padding: tokens["space-small"],
+        },
+    };
+});

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/InputText/InputText.js

@@ -89,10 +89,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/utils/meta/meta.json

@@ -12,6 +12,7 @@
         "AutoLink",
         "Banner",
         "BottomSheet",
+        "BottomSheet.InputText",
         "BottomSheetOption",
         "Button",
         "ButtonGroup",