@jobber/components-native 0.38.0 → 0.40.0

package/dist/src/AtlantisContext/AtlantisContext.js

@@ -3,6 +3,7 @@ import { createContext, useContext } from "react";
 import RNLocalize from "react-native-localize";
 import { DEFAULT_CURRENCY_SYMBOL } from "../InputCurrency/constants";
 export const defaultValues = {
+    dateFormat: "PP",
     // The system time is "p"
     timeFormat: "p",
     timeZone: RNLocalize.getTimeZone(),
@@ -12,6 +13,7 @@ export const defaultValues = {
     },
     floatSeparators: { group: ",", decimal: "." },
     currencySymbol: DEFAULT_CURRENCY_SYMBOL,
+    headerHeight: 0,
 };
 export const AtlantisContext = createContext(defaultValues);
 export function useAtlantisContext() {

package/dist/src/Form/Form.js

@@ -0,0 +1,187 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useState } from "react";
+import { FormProvider } from "react-hook-form";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+import { Keyboard, Platform, View, findNodeHandle, } from "react-native";
+import { styles } from "./Form.style";
+import { FormErrorBanner } from "./components/FormErrorBanner";
+import { KEYBOARD_SAVE_BUTTON_DISTANCE } from "./constants";
+import { FormMessageBanner } from "./components/FormMessageBanner";
+import { FormSubmitErrorType, } from "./types";
+import { FormMask } from "./components/FormMask";
+import { useInternalForm } from "./hooks/useInternalForm";
+import { useFormViewRefs } from "./hooks/useFormViewRefs";
+import { useScreenInformation } from "./hooks/useScreenInformation";
+import { FormMessage } from "./components/FormMessage";
+import { FormBody, useBottomPadding } from "./components/FormBody";
+import { useOfflineHandler } from "./hooks/useOfflineHandler";
+import { useScrollToError } from "./hooks/useScrollToError";
+import { FormSaveButton } from "./components/FormSaveButton";
+import { useSaveButtonPosition } from "./hooks/useSaveButtonPosition";
+import { FormCache } from "./components/FormCache/FormCache";
+import { InputAccessoriesProvider } from "../InputText";
+import { tokens } from "../utils/design";
+import { ErrorMessageProvider } from "../ErrorMessageWrapper";
+export function Form(_a) {
+    var { initialLoading } = _a, rest = __rest(_a, ["initialLoading"]);
+    const child = initialLoading ? React.createElement(FormMask, null) : React.createElement(InternalForm, Object.assign({}, rest));
+    return (React.createElement(InputAccessoriesProvider, null,
+        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, }) {
+    var _a;
+    const { scrollViewRef, bottomViewRef, scrollToTop } = useFormViewRefs();
+    const [saveButtonHeight, setSaveButtonHeight] = useState(0);
+    const [messageBannerHeight, setMessageBannerHeight] = useState(0);
+    const { formMethods, handleSubmit, isSubmitting, removeListenerRef, setLocalCache, } = useInternalForm({
+        mode,
+        reValidateMode,
+        initialValues,
+        formRef,
+        localCacheKey,
+        localCacheExclude,
+        localCacheId,
+        scrollViewRef,
+        saveButtonHeight,
+        messageBannerHeight,
+    });
+    const { windowHeight, headerHeight } = useScreenInformation();
+    const [keyboardHeight, setKeyboardHeight] = useState(0);
+    const [keyboardScreenY, setKeyboardScreenY] = useState(0);
+    const [formContentHeight, setFormContentHeight] = useState(0);
+    const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
+    const paddingBottom = useBottomPadding();
+    const { saveButtonPosition } = useSaveButtonPosition({
+        formContentHeight,
+        isBottomSheetOpen,
+        showStickySaveButton,
+        keyboardHeight,
+        keyboardScreenY,
+    });
+    const [isSecondaryActionLoading, setIsSecondaryActionLoading] = useState(false);
+    const extraViewHeight = paddingBottom + KEYBOARD_SAVE_BUTTON_DISTANCE;
+    const calculatedKeyboardHeight = keyboardHeight - extraViewHeight;
+    useScrollToError({
+        formState: formMethods.formState,
+        refNode: findNodeHandle(scrollViewRef.current),
+        setFocus: formMethods.setFocus,
+        scrollToPosition: (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollToPosition,
+    });
+    const handleOfflineSubmit = useOfflineHandler();
+    const keyboardProps = Platform.select({
+        ios: {
+            onKeyboardWillHide: handleKeyboardHide,
+            onKeyboardWillShow: handleKeyboardShow,
+        },
+        android: {
+            onKeyboardDidHide: handleKeyboardHide,
+            onKeyboardDidShow: handleKeyboardShow,
+        },
+    });
+    const onLayout = (event) => {
+        setMessageBannerHeight(event.nativeEvent.layout.height);
+    };
+    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(View, { onLayout: ({ nativeEvent }) => {
+                            setFormContentHeight(nativeEvent.layout.height);
+                        } },
+                        React.createElement(View, { onLayout: onLayout },
+                            React.createElement(FormMessageBanner, { bannerMessages: bannerMessages }),
+                            React.createElement(FormErrorBanner, { networkError: bannerErrors === null || bannerErrors === void 0 ? void 0 : bannerErrors.networkError, bannerError: bannerErrors === null || bannerErrors === void 0 ? void 0 : bannerErrors.bannerError })),
+                        React.createElement(View, { style: styles.formChildContainer },
+                            React.createElement(React.Fragment, null,
+                                React.createElement(View, { style: styles.formContent }, children),
+                                saveButtonPosition === "inline" && (React.createElement(View, { style: styles.fixedSaveButton }, renderStickySection ? (renderStickySection(handleSubmit(internalSubmit), saveButtonLabel, isSubmitting)) : (React.createElement(FormSaveButton, { primaryAction: handleSubmit(internalSubmit), label: saveButtonLabel, loading: isSubmitting, secondaryActions: secondaryActions, setSecondaryActionLoading: setIsSecondaryActionLoading, onOpenBottomSheet: () => setIsBottomSheetOpen(true), onCloseBottomSheet: () => setIsBottomSheetOpen(false) })))),
+                                renderFooter))),
+                    React.createElement(View, { style: styles.safeArea, ref: bottomViewRef })))),
+        React.createElement(FormMessage, null)));
+    function handleKeyboardShow(frames) {
+        setKeyboardScreenY(frames.endCoordinates.screenY);
+        setKeyboardHeight(frames.endCoordinates.height);
+    }
+    function handleKeyboardHide() {
+        var _a;
+        (_a = bottomViewRef === null || bottomViewRef === void 0 ? void 0 : bottomViewRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        (_x, y, _width, _height) => {
+            var _a;
+            // This fixes extra whitespace below the form if it was scrolled down while the keyboard was open
+            // i.e. a View below the form is higher than the bottom of the window
+            if (y < windowHeight) {
+                (_a = scrollViewRef === null || scrollViewRef === void 0 ? void 0 : scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollToEnd();
+            }
+        });
+        setKeyboardHeight(0);
+        setKeyboardScreenY(0);
+    }
+    function internalSubmit(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let performSubmit = true;
+            if (onBeforeSubmit) {
+                performSubmit = yield onBeforeSubmit(data);
+            }
+            if (performSubmit) {
+                Keyboard.dismiss();
+                return onSubmit(data)
+                    .then((result) => {
+                    var _a;
+                    (_a = removeListenerRef.current) === null || _a === void 0 ? void 0 : _a.call(removeListenerRef);
+                    onSubmitSuccess(result);
+                })
+                    .catch(handleSubmitCatch);
+            }
+        });
+    }
+    function handleSubmitCatch(error) {
+        // Scroll to top of form to see error
+        scrollToTop();
+        onSubmitError(error);
+        if ((error === null || error === void 0 ? void 0 : error.errorType) === FormSubmitErrorType.NetworkError) {
+            // @ts-expect-error We are making the form submission fail so that we can
+            // prevent the isSubmitSuccess to be true
+            formMethods.setError("offline", "Error saving form.");
+            handleOfflineSubmit(handleRetry, clearFormErrors)();
+        }
+    }
+    function clearFormErrors() {
+        // @ts-expect-error  We are clearing the error that we previously set
+        // when the form had no internet connection
+        formMethods.clearErrors("offline");
+    }
+    function handleRetry() {
+        clearFormErrors();
+        return handleSubmit(internalSubmit)();
+    }
+    function calculateSaveButtonOffset() {
+        if (saveButtonOffset) {
+            // Included the space-base because it's the padding of the FormActionBar
+            return calculatedKeyboardHeight - saveButtonOffset + tokens["space-base"];
+        }
+        return calculatedKeyboardHeight;
+    }
+}

package/dist/src/Form/Form.style.js

@@ -0,0 +1,33 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+export const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        flexGrow: 1,
+        width: "100%",
+    },
+    safeArea: {
+        backgroundColor: tokens["color-surface"],
+    },
+    scrollContentContainer: {
+        flexGrow: 1,
+    },
+    scrollView: {
+        flexGrow: 1,
+    },
+    formChildContainer: {
+        flexGrow: 1,
+        justifyContent: "flex-start",
+    },
+    formContent: {
+        paddingVertical: tokens["space-small"],
+    },
+    fixedSaveButton: {
+        padding: tokens["space-base"],
+        backgroundColor: tokens["color-surface"],
+    },
+    activityIndicator: {
+        marginVertical: tokens["space-base"],
+        flex: 1,
+    },
+});

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import Reanimated from "react-native-reanimated";
+import { styles } from "./FormActionBar.style";
+import { FormSaveButton } from "../FormSaveButton";
+const ReanimatedView = Reanimated.createAnimatedComponent(View);
+export function FormActionBar({ keyboardHeight, submit, isFormSubmitting, saveButtonLabel, renderStickySection, setSaveButtonHeight, secondaryActions, setSecondaryActionLoading, }) {
+    const buttonStyle = StyleSheet.flatten([
+        styles.saveButton,
+        {
+            position: keyboardHeight > 0 ? "absolute" : "relative",
+            bottom: 0,
+        },
+    ]);
+    const onLayout = (event) => {
+        setSaveButtonHeight && setSaveButtonHeight(event.nativeEvent.layout.height);
+    };
+    return (
+    //@ts-expect-error tsc-ci
+    React.createElement(ReanimatedView, { style: buttonStyle, onLayout: onLayout }, renderStickySection ? (renderStickySection(submit, saveButtonLabel, isFormSubmitting)) : (React.createElement(FormSaveButton, { setSecondaryActionLoading: setSecondaryActionLoading, primaryAction: submit, loading: isFormSubmitting, label: saveButtonLabel, secondaryActions: secondaryActions }))));
+}

package/dist/src/Form/components/FormActionBar/FormActionBar.style.js

@@ -0,0 +1,5 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+export const styles = StyleSheet.create({
+    saveButton: Object.assign({ padding: tokens["space-base"], backgroundColor: tokens["color-surface"], width: "100%" }, tokens["shadow-high"]),
+});

package/dist/src/Form/components/FormActionBar/index.js

@@ -0,0 +1 @@
+export { FormActionBar } from "./FormActionBar";

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

@@ -0,0 +1,20 @@
+import React, { useMemo } from "react";
+import { View } from "react-native";
+import { styles } from "./FormBody.style";
+import { useScreenInformation } from "../../hooks/useScreenInformation";
+import { FormActionBar } from "../FormActionBar";
+import { tokens } from "../../../utils/design";
+export function FormBody({ isFormSubmitting, submit, keyboardHeight, children, saveButtonLabel, renderStickySection, shouldRenderActionBar = true, secondaryActions, setSecondaryActionLoading, setSaveButtonHeight, saveButtonOffset, }) {
+    const paddingBottom = useBottomPadding();
+    const fullViewPadding = useMemo(() => ({ paddingBottom }), [paddingBottom]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(View, { style: [styles.container] },
+            children,
+            shouldRenderActionBar && (React.createElement(FormActionBar, { setSecondaryActionLoading: setSecondaryActionLoading, keyboardHeight: keyboardHeight, submit: submit, isFormSubmitting: isFormSubmitting, saveButtonLabel: saveButtonLabel, renderStickySection: renderStickySection, secondaryActions: secondaryActions, setSaveButtonHeight: setSaveButtonHeight }))),
+        shouldRenderActionBar && !saveButtonOffset && (React.createElement(View, { style: [fullViewPadding, styles.safeArea], testID: "ATL-FormSafeArea" }))));
+}
+export function useBottomPadding() {
+    const { insets } = useScreenInformation();
+    const extraBottomSpace = insets.bottom - tokens["space-base"];
+    return extraBottomSpace >= 0 ? extraBottomSpace : 0;
+}

package/dist/src/Form/components/FormBody/FormBody.style.js

@@ -0,0 +1,26 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+export const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        flexGrow: 1,
+        width: "100%",
+    },
+    safeArea: {
+        backgroundColor: tokens["color-surface"],
+    },
+    scrollContentContainer: {
+        flexGrow: 1,
+    },
+    scrollView: {
+        flexGrow: 1,
+    },
+    formChildContainer: {
+        flexGrow: 1,
+        justifyContent: "flex-start",
+    },
+    activityIndicator: {
+        marginVertical: tokens["space-base"],
+        flex: 1,
+    },
+});

package/dist/src/Form/components/FormBody/index.js

@@ -0,0 +1 @@
+export { FormBody, useBottomPadding } from "./FormBody";

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

@@ -0,0 +1,34 @@
+import React, { useEffect, useMemo } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+import omit from "lodash/omit";
+export function FormCache({ localCacheExclude, localCacheKey, setLocalCache, }) {
+    const { control, formState } = useFormContext();
+    const { isDirty } = formState;
+    const formData = useWatch({ control });
+    const shouldExclude = useMemo(() => {
+        return Array.isArray(localCacheExclude) && localCacheExclude.length > 0;
+    }, [localCacheExclude]);
+    useEffect(() => {
+        !localCacheKey &&
+            console.log("No `localCacheKey` specified on Form. Local copy of form data is now disabled.");
+    }, [localCacheKey]);
+    /**
+     * Automatically save form data locally
+     */
+    useEffect(() => {
+        if (!isDirty)
+            return;
+        if (shouldExclude) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore The type below is not working. It seems to be an issue with react-hook-form
+            // https://github.com/react-hook-form/react-hook-form/issues/2978
+            setLocalCache(omit(formData, localCacheExclude));
+        }
+        else {
+            // @ts-expect-error Typescript thinks that the FieldValues defined in useWatch is different
+            // from the one in useFormContext
+            setLocalCache(formData);
+        }
+    }, [formData, isDirty, localCacheExclude, setLocalCache, shouldExclude]);
+    return React.createElement(React.Fragment, null);
+}

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { useIntl } from "react-intl";
+import { messages } from "./messages";
+import { useAtlantisContext } from "../../../AtlantisContext";
+import { Banner } from "../../../Banner";
+export function FormErrorBanner({ networkError, bannerError, }) {
+    const { formatMessage } = useIntl();
+    const { isOnline } = useAtlantisContext();
+    if (!isOnline) {
+        return (React.createElement(Banner, { text: formatMessage(messages.offlineError), type: "error" }));
+    }
+    else if (networkError) {
+        return (React.createElement(Banner, { text: formatMessage(messages.networkError), type: "error" }));
+    }
+    else if (bannerError) {
+        return (React.createElement(Banner, { text: bannerError.title, details: bannerError.messages, type: "error" }));
+    }
+    else {
+        return React.createElement(React.Fragment, null);
+    }
+}

package/dist/src/Form/components/FormErrorBanner/index.js

@@ -0,0 +1 @@
+export { FormErrorBanner } from "./FormErrorBanner";

package/dist/src/Form/components/FormErrorBanner/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from "react-intl";
+export const messages = defineMessages({
+    networkError: {
+        id: "networkError",
+        defaultMessage: "Could not save changes",
+        description: "Displayed when a general server error occurs during save",
+    },
+    offlineError: {
+        id: "offlineError",
+        defaultMessage: "Currently offline. Check your internet connection.",
+        description: "Error message to be shown when the app is offline",
+    },
+});

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { View } from "react-native";
+import { useIntl } from "react-intl";
+import { styles } from "./FormMask.style";
+import { ActivityIndicator } from "../../../ActivityIndicator";
+import { messages } from "../../messages";
+export function FormMask() {
+    const { formatMessage } = useIntl();
+    return (React.createElement(View, { style: styles.mask, accessibilityLabel: formatMessage(messages.loadingA11YLabel) },
+        React.createElement(ActivityIndicator, null)));
+}

package/dist/src/Form/components/FormMask/FormMask.style.js

@@ -0,0 +1,15 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+export const styles = StyleSheet.create({
+    mask: {
+        zIndex: tokens["elevation-modal"],
+        width: "100%",
+        height: "100%",
+        position: "absolute",
+        top: 0,
+        left: 0,
+        backgroundColor: tokens["color-overlay--dimmed"],
+        padding: tokens["space-base"],
+        justifyContent: "center",
+    },
+});

package/dist/src/Form/components/FormMask/index.js

@@ -0,0 +1 @@
+export { FormMask } from "./FormMask";

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

@@ -0,0 +1,48 @@
+import React, { useCallback, useState } from "react";
+import { InternalFormMessage } from "./components/InternalFormMessage";
+let open;
+let close;
+/**
+ * Show a message that takes over the whole screen to the user. This provides a
+ * more urgent feedback when the user does an action that requires attention
+ * their full attention.
+ *
+ * By default, rendering `<FormMessage />` on a screen won't show any messages
+ * because it's only a container. Use `FormMessage.open(...)`. to show a
+ * message to the user. Use `FormMessage.close()` to close the most
+ * recent message.
+ */
+export const FormMessage = () => {
+    const [data, setData] = useState([]);
+    open = useCallback((messageData) => {
+        setData([...data, messageData]);
+    }, [data]);
+    close = useCallback(() => {
+        const newValue = data.slice(0, -1);
+        setData(newValue);
+    }, [data]);
+    if (data.length === 0) {
+        return React.createElement(React.Fragment, null);
+    }
+    const lastMessage = data[data.length - 1];
+    return React.createElement(InternalFormMessage, { data: lastMessage, onRequestClose: close });
+};
+FormMessage.show = (messageData) => {
+    if (open) {
+        open(messageData);
+    }
+    else {
+        warnOnUndefinedFunctions("show");
+    }
+};
+FormMessage.close = () => {
+    if (close) {
+        close();
+    }
+    else {
+        warnOnUndefinedFunctions("close");
+    }
+};
+function warnOnUndefinedFunctions(method) {
+    console.warn(`Could not ${method} "FormMessage". Either you're calling this method before the component mounts or you're using this without the "<Form />" component. If you're using "FormMessage" without the "Form", include "<FormMessage />" on your component to start using it.`);
+}

package/dist/src/Form/components/FormMessage/components/InternalFormMessage/InternalFormMessage.js

@@ -0,0 +1,28 @@
+import React, { useMemo } from "react";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { Modal, StatusBar, View } from "react-native";
+import { ScrollView } from "react-native-gesture-handler";
+import { useIntl } from "react-intl";
+import { styles } from "./InternalFormMessage.style";
+import { messages } from "./messages";
+import { EmptyState } from "../../../../../EmptyState";
+export function InternalFormMessage({ data, onRequestClose, }) {
+    const { formatMessage } = useIntl();
+    const emptyStateData = useMemo(() => {
+        if (data.secondaryAction) {
+            return data;
+        }
+        else {
+            return Object.assign(Object.assign({}, data), { secondaryAction: {
+                    label: formatMessage(messages.goBackButton),
+                    onPress: onRequestClose,
+                } });
+        }
+    }, [data, formatMessage, onRequestClose]);
+    return (React.createElement(Modal, { animationType: "fade", transparent: true, visible: true, onRequestClose: onRequestClose },
+        React.createElement(View, { style: styles.wrapper },
+            React.createElement(StatusBar, { barStyle: "dark-content" }),
+            React.createElement(SafeAreaView, null,
+                React.createElement(ScrollView, { style: styles.scrollWrapper, contentContainerStyle: styles.scrollWrapperContent, centerContent: true },
+                    React.createElement(EmptyState, Object.assign({}, emptyStateData)))))));
+}

package/dist/src/Form/components/FormMessage/components/InternalFormMessage/InternalFormMessage.style.js

@@ -0,0 +1,17 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../../../utils/design";
+export const styles = StyleSheet.create({
+    wrapper: {
+        backgroundColor: tokens["color-surface"],
+        flex: 1,
+        justifyContent: "center",
+    },
+    closeAction: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        zIndex: 1,
+    },
+    scrollWrapper: { height: "100%" },
+    scrollWrapperContent: { flexGrow: 1, justifyContent: "center" },
+});

package/dist/src/Form/components/FormMessage/components/InternalFormMessage/index.js

@@ -0,0 +1 @@
+export { InternalFormMessage } from "./InternalFormMessage";

package/dist/src/Form/components/FormMessage/components/InternalFormMessage/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from "react-intl";
+export const messages = defineMessages({
+    goBackButton: {
+        id: "goBackButton",
+        defaultMessage: "Go Back",
+        description: "The label for the fallback secondary button when it doesn't exist",
+    },
+});

package/dist/src/Form/components/FormMessage/index.js

@@ -0,0 +1 @@
+export { FormMessage } from "./FormMessage";

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { FormBannerMessageType } from "../../types";
+import { Banner } from "../../../Banner";
+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) {
+    switch (messageType) {
+        case FormBannerMessageType.WarningMessage:
+            return "warning";
+        case FormBannerMessageType.NoticeMessage:
+        default:
+            return "notice";
+    }
+}

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

@@ -0,0 +1 @@
+export { FormMessageBanner } from "./FormMessageBanner";

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

@@ -0,0 +1,69 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React from "react";
+import { useIntl } from "react-intl";
+import { useFormContext } from "react-hook-form";
+import { messages } from "./messages";
+import { ButtonGroup, } from "../../../ButtonGroup";
+export function FormSaveButton({ primaryAction, loading, label, secondaryActions, setSecondaryActionLoading, onOpenBottomSheet, onCloseBottomSheet, }) {
+    const { formatMessage } = useIntl();
+    const formContext = useFormContext();
+    const buttonActions = useButtonGroupAction(secondaryActions);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ButtonGroup, { onOpenBottomSheet: onOpenBottomSheet, onCloseBottomSheet: onCloseBottomSheet, allowTapWhenOffline: true }, buttonActions.map((action, index) => {
+            if (index === 0) {
+                return (React.createElement(ButtonGroup.PrimaryAction, { key: index, onPress: primaryAction, label: label !== null && label !== void 0 ? label : formatMessage(messages.saveButton), loading: loading }));
+            }
+            else {
+                return (React.createElement(ButtonGroup.SecondaryAction, { key: index, label: action.label, icon: action.icon, onPress: action.onPress, destructive: action.destructive }));
+            }
+        }))));
+    function useButtonGroupAction(array) {
+        const buttonGroupActionProps = array
+            ? array.map(arr => {
+                return {
+                    label: arr.label,
+                    onPress: () => internalOnPress(arr.handleAction),
+                    destructive: arr.destructive,
+                    icon: arr.icon,
+                };
+            })
+            : [];
+        buttonGroupActionProps.unshift({
+            label: label !== null && label !== void 0 ? label : formatMessage(messages.saveButton),
+            onPress: primaryAction,
+            loading: loading,
+            icon: undefined,
+        });
+        return buttonGroupActionProps;
+    }
+    function internalOnPress(handleAction) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let performSubmit = true;
+            if (handleAction.onBeforeSubmit) {
+                performSubmit = yield handleAction.onBeforeSubmit();
+            }
+            if (performSubmit) {
+                setSecondaryActionLoading === null || setSecondaryActionLoading === void 0 ? void 0 : setSecondaryActionLoading(true);
+                handleAction
+                    .onSubmit(primaryAction)
+                    .then(() => {
+                    var _a;
+                    handleAction.resetFormOnSubmit && formContext.reset();
+                    (_a = handleAction.onSubmitSuccess) === null || _a === void 0 ? void 0 : _a.call(handleAction);
+                })
+                    .catch(handleAction.onSubmitError)
+                    .finally(() => {
+                    setSecondaryActionLoading === null || setSecondaryActionLoading === void 0 ? void 0 : setSecondaryActionLoading(false);
+                });
+            }
+        });
+    }
+}

package/dist/src/Form/components/FormSaveButton/index.js

@@ -0,0 +1 @@
+export { FormSaveButton } from "./FormSaveButton";

package/dist/src/Form/components/FormSaveButton/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from "react-intl";
+export const messages = defineMessages({
+    saveButton: {
+        id: "saveButton",
+        defaultMessage: "Save",
+        description: "The label for the save button",
+    },
+});

package/dist/src/Form/constants.js

@@ -0,0 +1,2 @@
+export const KEYBOARD_TOP_PADDING_AUTO_SCROLL = 20;
+export const KEYBOARD_SAVE_BUTTON_DISTANCE = 1;