@jobber/components-native 0.34.0 → 0.34.1-migrate-fo.12

package/dist/src/Checkbox/Checkbox.js

@@ -0,0 +1,66 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import { tokens } from "@jobber/design/foundation";
+import { styles } from "./Checkbox.style";
+import { Text } from "../Text";
+import { Icon } from "../Icon";
+import { FormField } from "../FormField";
+export function Checkbox(props) {
+    if (props.checked !== undefined && props.onChange !== undefined) {
+        return React.createElement(CheckboxInternal, Object.assign({}, props));
+    }
+    else if (props.name) {
+        return (React.createElement(FormField, { name: props.name, defaultValue: props.defaultChecked }, field => {
+            return (React.createElement(CheckboxInternal, Object.assign({}, props, { checked: field.value, onChange: newValue => {
+                    var _a;
+                    (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newValue);
+                    field.onChange(newValue);
+                } })));
+        }));
+    }
+    else {
+        throw new Error("Checkbox was given invalid props");
+    }
+}
+function CheckboxInternal({ label, checked, defaultChecked, indeterminate = false, disabled = false, assistiveText, onChange, accessibilityLabel, }) {
+    const internalValue = checked !== null && checked !== void 0 ? checked : !!defaultChecked;
+    const iconName = indeterminate ? "minus2" : "checkmark";
+    const textVariation = disabled ? "disabled" : "subdued";
+    const a11yStateChecked = indeterminate ? "mixed" : internalValue;
+    const backgroundColor = getBackgroundColor(internalValue, disabled, indeterminate);
+    return (React.createElement(Pressable, { accessibilityRole: "checkbox", accessibilityLabel: accessibilityLabel || label, accessibilityState: {
+            disabled: disabled,
+            checked: a11yStateChecked,
+        }, disabled: disabled, style: ({ pressed }) => [
+            {
+                opacity: pressed ? 0.2 : 1,
+            },
+            styles.container,
+        ], onPress: () => {
+            onChange === null || onChange === void 0 ? void 0 : onChange(!internalValue);
+        } },
+        React.createElement(View, { style: styles.checkBoxContainer },
+            label && (React.createElement(View, { style: styles.label },
+                React.createElement(Text, { variation: textVariation, align: "start" }, label))),
+            React.createElement(View, { style: [
+                    styles.checkbox,
+                    disabled && styles.disabledCheckbox,
+                    {
+                        backgroundColor,
+                    },
+                ] }, (internalValue || indeterminate) && (React.createElement(Icon, { name: iconName, color: "white" })))),
+        assistiveText && (React.createElement(Text, { level: "textSupporting", align: "start", variation: textVariation }, assistiveText))));
+}
+function getBackgroundColor(checked, disabled, indeterminate) {
+    if (checked || indeterminate) {
+        if (disabled) {
+            return tokens["color-disabled"];
+        }
+        else {
+            return tokens["color-interactive"];
+        }
+    }
+    else {
+        return tokens["color-overlay--dimmed"];
+    }
+}

package/dist/src/Checkbox/Checkbox.style.js

@@ -0,0 +1,30 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+const checkboxDimensions = tokens["space-large"] + tokens["space-smaller"];
+export const styles = StyleSheet.create({
+    container: {
+        width: "100%",
+    },
+    checkBoxContainer: {
+        width: "100%",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        alignItems: "center",
+        paddingVertical: tokens["space-small"],
+    },
+    label: {
+        flex: 1,
+    },
+    checkbox: {
+        borderRadius: tokens["radius-base"],
+        borderWidth: tokens["border-thick"],
+        justifyContent: "flex-end",
+        width: checkboxDimensions,
+        height: checkboxDimensions,
+        marginLeft: tokens["space-smaller"],
+        borderColor: tokens["color-interactive"],
+    },
+    disabledCheckbox: {
+        borderColor: tokens["color-disabled"],
+    },
+});

package/dist/src/Checkbox/CheckboxGroup.js

@@ -0,0 +1,115 @@
+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, { Fragment, useReducer } from "react";
+import { View } from "react-native";
+import isEmpty from "lodash/isEmpty";
+import reduce from "lodash/reduce";
+import { styles } from "./CheckboxGroup.style";
+import { Checkbox } from "./Checkbox";
+import { checkboxGroupReducer, initCheckboxGroupState, } from "./CheckboxGroupReducer";
+import { FormField } from "../FormField";
+import { Divider } from "../Divider";
+export function CheckboxGroup(_a) {
+    var { children, state, onChange, name } = _a, rest = __rest(_a, ["children", "state", "onChange", "name"]);
+    if (state !== undefined && onChange !== undefined) {
+        return (React.createElement(CheckboxGroupInternal, Object.assign({ state: state, onChange: onChange, name: name }, rest), children));
+    }
+    if (name) {
+        return (React.createElement(FormField, { name: name }, field => {
+            return (React.createElement(CheckboxGroupInternal, Object.assign({ name: field.name, state: field.value, onChange: newValue => {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+                    field.onChange(newValue);
+                } }, rest), children));
+        }));
+    }
+    throw new Error("CheckboxGroup passed invalid props");
+}
+function CheckboxGroupInternal({ label, disabled, children, state, accessibilityLabel, onChange, name: parentName, }) {
+    const childrenNames = React.Children.map(children, child => {
+        const name = throwErrorIfItHasNoName(child.props.name);
+        return name;
+    });
+    const isNested = !!label;
+    const [internalCheckedValues, dispatch] = useReducer(checkboxGroupReducer, childrenNames, initCheckboxGroupState);
+    const actualCheckedValues = !isEmpty(state) ? state : internalCheckedValues;
+    const handleChange = (data) => {
+        dispatch({ type: "Update", data });
+        onChange === null || onChange === void 0 ? void 0 : onChange(data);
+    };
+    const indeterminate = checkIndeterminateStatus(actualCheckedValues);
+    function cloneChildCheckbox(checkbox) {
+        const name = throwErrorIfItHasNoName(checkbox.props.name);
+        const childDisabled = disabled || checkbox.props.disabled;
+        const childrenHandleChange = (checked) => {
+            var _a, _b;
+            const childrenNextValue = Object.assign(Object.assign({}, actualCheckedValues.childrenChecked), { [name]: checked });
+            const parentNextValue = reduce(childrenNextValue, getParentChecked, true);
+            (_b = (_a = checkbox.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, checked);
+            handleChange({
+                childrenChecked: childrenNextValue,
+                parentChecked: parentNextValue,
+            });
+        };
+        return React.cloneElement(checkbox, {
+            onChange: childrenHandleChange,
+            checked: actualCheckedValues.childrenChecked[name],
+            disabled: childDisabled,
+        });
+    }
+    const checkboxObject = React.Children.toArray(children).reduce((childCheckboxObject, child) => {
+        if (!React.isValidElement(child)) {
+            return childCheckboxObject;
+        }
+        const name = throwErrorIfItHasNoName(child.props.name);
+        return Object.assign(Object.assign({}, childCheckboxObject), { [name]: cloneChildCheckbox(child) });
+    }, {});
+    function getParentChecked(acc, value, childName) {
+        var _a;
+        const currentCheckbox = checkboxObject[childName];
+        if ((_a = currentCheckbox === null || currentCheckbox === void 0 ? void 0 : currentCheckbox.props) === null || _a === void 0 ? void 0 : _a.disabled) {
+            return acc;
+        }
+        return acc && value;
+    }
+    return (React.createElement(View, null,
+        isNested ? (React.createElement(React.Fragment, null,
+            React.createElement(Checkbox, { name: parentName, label: label, accessibilityLabel: accessibilityLabel || label, indeterminate: indeterminate, checked: actualCheckedValues.parentChecked || false, onChange: value => {
+                    const newValues = reduce(actualCheckedValues.childrenChecked, (acc, currentCheckboxValue, childName) => {
+                        var _a;
+                        const currentCheckbox = checkboxObject[childName];
+                        return ((_a = currentCheckbox === null || currentCheckbox === void 0 ? void 0 : currentCheckbox.props) === null || _a === void 0 ? void 0 : _a.disabled)
+                            ? Object.assign(Object.assign({}, acc), { [childName]: currentCheckboxValue }) : Object.assign(Object.assign({}, acc), { [childName]: value });
+                    }, {});
+                    const parentChecked = reduce(newValues, getParentChecked, value);
+                    onChange({ childrenChecked: newValues, parentChecked });
+                }, disabled: disabled }),
+            React.createElement(Divider, null))) : undefined,
+        React.createElement(View, null),
+        React.createElement(View, { style: isNested ? styles.nestedCheckboxes : {} }, Object.values(checkboxObject).map((checkbox, index) => {
+            return (React.createElement(Fragment, { key: index },
+                checkbox,
+                index !== children.length - 1 && React.createElement(Divider, null)));
+        }))));
+}
+function throwErrorIfItHasNoName(name) {
+    if (!name) {
+        throw new Error("You must provide a name to checkboxes in a checkbox group");
+    }
+    return name;
+}
+function checkIndeterminateStatus(checkedValues) {
+    const checkedValuesAsArray = Object.values(checkedValues.childrenChecked);
+    if (checkedValuesAsArray.length === 1) {
+        return false;
+    }
+    return !checkedValuesAsArray.every((value, i, arr) => value === arr[0]);
+}

package/dist/src/Checkbox/CheckboxGroup.style.js

@@ -0,0 +1,14 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+export const styles = StyleSheet.create({
+    container: {
+        width: "100%",
+        justifyContent: "center",
+        alignItems: "center",
+        paddingHorizontal: tokens["space-base"],
+        paddingVertical: tokens["space-small"],
+    },
+    nestedCheckboxes: {
+        marginLeft: tokens["space-large"],
+    },
+});

package/dist/src/Checkbox/CheckboxGroupReducer.js

@@ -0,0 +1,17 @@
+import deepmerge from "deepmerge";
+export function initCheckboxGroupState(childNames) {
+    return {
+        parentChecked: false,
+        childrenChecked: childNames.reduce((acc, name) => {
+            return Object.assign(Object.assign({}, acc), { [name]: false });
+        }, {}),
+    };
+}
+export function checkboxGroupReducer(state, action) {
+    switch (action.type) {
+        case "Update":
+            return deepmerge(state, action.data);
+        default:
+            return state;
+    }
+}

package/dist/src/Checkbox/index.js

@@ -0,0 +1,2 @@
+export { Checkbox } from "./Checkbox";
+export { CheckboxGroup } from "./CheckboxGroup";

package/dist/src/Checkbox/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/Disclosure/Disclosure.js

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import { ScrollView, TouchableOpacity, View, } from "react-native";
+import Reanimated, { Easing, useAnimatedStyle, useSharedValue, withTiming, } from "react-native-reanimated";
+import { EASE_CUBIC_IN_OUT } from "./constants";
+import { styles } from "./Disclosure.style";
+import { tokens } from "../utils/design";
+import { Icon } from "../Icon";
+const ReanimatedView = Reanimated.createAnimatedComponent(View);
+const ReanimatedScrollView = Reanimated.createAnimatedComponent(ScrollView);
+export function Disclosure({ content, header, open, onToggle, isEmpty, animationDuration = tokens["timing-slowest"], }) {
+    return (React.createElement(View, { style: styles.container },
+        React.createElement(DisclosureHeader, Object.assign({}, { header, onToggle, isEmpty, open, animationDuration })),
+        React.createElement(DisclosureContent, Object.assign({}, { content, open, animationDuration }))));
+}
+function DisclosureHeader({ header, onToggle, isEmpty, open, animationDuration, }) {
+    const rotateZ = useSharedValue(0);
+    rotateZ.value = withTiming(open ? 0 : -180, {
+        easing: Easing.bezier(...EASE_CUBIC_IN_OUT),
+        duration: animationDuration,
+    });
+    const animatedStyle = useAnimatedStyle(() => {
+        return {
+            transform: [{ rotateZ: `${rotateZ.value}deg` }],
+        };
+    });
+    return (React.createElement(TouchableOpacity, { activeOpacity: tokens["opacity-pressed"], onPress: onToggle, disabled: isEmpty },
+        React.createElement(View, { style: styles.headerContainer },
+            header,
+            !isEmpty && (React.createElement(ReanimatedView, { style: [animatedStyle] },
+                React.createElement(Icon, { name: "arrowUp", color: "grey" }))))));
+}
+function DisclosureContent({ content, open, animationDuration, }) {
+    const [maxHeight, setMaxHeight] = useState(0);
+    const height = useSharedValue(0);
+    const onContentLayoutChange = (event) => {
+        const newHeight = event.nativeEvent.layout.height;
+        setMaxHeight(newHeight);
+    };
+    height.value = withTiming(open ? maxHeight : 0, {
+        duration: animationDuration,
+        easing: Easing.bezier(...EASE_CUBIC_IN_OUT),
+    });
+    const animatedStyle = useAnimatedStyle(() => {
+        return {
+            height: height.value,
+        };
+    }, []);
+    return (React.createElement(ReanimatedScrollView, { scrollEnabled: false, showsHorizontalScrollIndicator: false, showsVerticalScrollIndicator: false, style: [styles.contentContainer, animatedStyle] },
+        React.createElement(View, { testID: "content", onLayout: onContentLayoutChange }, content)));
+}

package/dist/src/Disclosure/Disclosure.style.js

@@ -0,0 +1,21 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+export const styles = StyleSheet.create({
+    container: {
+        width: "100%",
+    },
+    headerContainer: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+    },
+    countColumn: {
+        paddingRight: tokens["space-base"],
+    },
+    titleContainer: {
+        flexDirection: "row",
+    },
+    contentContainer: {
+        paddingTop: tokens["space-small"],
+    },
+});

package/dist/src/Disclosure/constants.js

@@ -0,0 +1 @@
+export const EASE_CUBIC_IN_OUT = [0.645, 0.045, 0.355, 1.0];

package/dist/src/Disclosure/index.js

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

package/dist/src/Form/Form.js

@@ -0,0 +1,190 @@
+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)));
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    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
+            // 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
+        // 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";