@jobber/components-native 0.75.3-TAYLORtes-c9be7a8.250 → 0.75.3-cleanup-fo-ffcd368.137

package/dist/src/ErrorMessageWrapper/ErrorMessageWrapper.style.js

@@ -1,31 +1,32 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-export const styles = StyleSheet.create({
-    wrapper: {
-        position: "relative",
-        width: "100%",
-    },
-    wrapForCard: {
-        paddingHorizontal: tokens["space-base"],
-        paddingVertical: tokens["space-small"],
-    },
-    messageWrapper: {
-        flexDirection: "row",
-    },
-    messageWrapperIcon: {
-        flex: 0,
-        flexBasis: "auto",
-        paddingTop: tokens["space-minuscule"],
-        paddingRight: tokens["space-smaller"],
-    },
-    messageWrapperContent: {
-        flex: 1,
-    },
-    screenReaderMessage: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        width: "100%",
-        height: "100%",
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        wrapper: {
+            position: "relative",
+            width: "100%",
+        },
+        wrapForCard: {
+            paddingHorizontal: tokens["space-base"],
+            paddingVertical: tokens["space-small"],
+        },
+        messageWrapper: {
+            flexDirection: "row",
+        },
+        messageWrapperIcon: {
+            flex: 0,
+            flexBasis: "auto",
+            paddingTop: tokens["space-minuscule"],
+            paddingRight: tokens["space-smaller"],
+        },
+        messageWrapperContent: {
+            flex: 1,
+        },
+        screenReaderMessage: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+        },
+    };
 });

package/dist/src/Flex/Flex.styles.js

@@ -1,6 +1,6 @@
 import { StyleSheet } from "react-native";
 import { spacing } from "./types";
-import { tokens } from "../utils/design";
+import { tokens as staticTokens } from "../utils/design";
 export const styles = StyleSheet.create({
     row: { flexDirection: "row" },
 });
@@ -18,7 +18,7 @@ export const columnStyles = StyleSheet.create({
 export const gapStyles = StyleSheet.create(spacing.reduce((gapObj, space) => {
     let paddingLeft = 0;
     if (space !== "none")
-        paddingLeft = tokens[`space-${space}`];
+        paddingLeft = staticTokens[`space-${space}`];
     gapObj[space] = { paddingLeft };
     return gapObj;
 }, {}));

package/dist/src/Form/Form.js

@@ -22,7 +22,7 @@ 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 { useStyles } from "./Form.style";
 import { FormErrorBanner } from "./components/FormErrorBanner";
 import { KEYBOARD_SAVE_BUTTON_DISTANCE } from "./constants";
 import { FormMessageBanner } from "./components/FormMessageBanner";
@@ -101,11 +101,12 @@ function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSub
     const onLayout = (event) => {
         setMessageBannerHeight(event.nativeEvent.layout.height);
     };
+    const styles = useStyles();
     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(FormBody, { keyboardHeight: calculateSaveButtonOffset(), submit: callHandleSubmit, 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);
@@ -116,7 +117,7 @@ function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSub
                         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) })))),
+                                saveButtonPosition === "inline" && (React.createElement(View, { style: styles.fixedSaveButton }, renderStickySection ? (renderStickySection(callHandleSubmit, saveButtonLabel, isSubmitting)) : (React.createElement(FormSaveButton, { primaryAction: callHandleSubmit, 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)));
@@ -140,6 +141,18 @@ function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSub
         setKeyboardHeight(0);
         setKeyboardScreenY(0);
     }
+    function callHandleSubmit() {
+        let result;
+        handleSubmit(data => {
+            return internalSubmit(data).then(saveResult => {
+                result = saveResult;
+            });
+        })().then(() => {
+            var _a;
+            (_a = removeListenerRef.current) === null || _a === void 0 ? void 0 : _a.call(removeListenerRef);
+            onSubmitSuccess(result);
+        });
+    }
     function internalSubmit(data) {
         return __awaiter(this, void 0, void 0, function* () {
             let performSubmit = true;
@@ -148,13 +161,7 @@ function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSub
             }
             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);
+                return onSubmit(data).catch(handleSubmitCatch);
             }
         });
     }
@@ -176,7 +183,7 @@ function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSub
     }
     function handleRetry() {
         clearFormErrors();
-        return handleSubmit(internalSubmit)();
+        return callHandleSubmit();
     }
     function calculateSaveButtonOffset() {
         if (saveButtonOffset) {

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

@@ -1,33 +1,34 @@
-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,
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        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

@@ -1,10 +1,11 @@
 import React from "react";
 import { StyleSheet } from "react-native";
 import Reanimated from "react-native-reanimated";
-import { styles } from "./FormActionBar.style";
+import { useStyles } from "./FormActionBar.style";
 import { FormSaveButton } from "../FormSaveButton";
 const ReanimatedView = Reanimated.View;
 export function FormActionBar({ keyboardHeight, submit, isFormSubmitting, saveButtonLabel, renderStickySection, setSaveButtonHeight, secondaryActions, setSecondaryActionLoading, }) {
+    const styles = useStyles();
     const buttonStyle = StyleSheet.flatten([
         styles.saveButton,
         {

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

@@ -1,5 +1,6 @@
-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"]),
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        saveButton: Object.assign({ padding: tokens["space-base"], backgroundColor: tokens["color-surface"], width: "100%" }, tokens["shadow-high"]),
+    };
 });

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

@@ -1,12 +1,13 @@
 import React, { useMemo } from "react";
 import { View } from "react-native";
-import { styles } from "./FormBody.style";
+import { useStyles } 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]);
+    const styles = useStyles();
     return (React.createElement(React.Fragment, null,
         React.createElement(View, { style: [styles.container] },
             children,

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

@@ -1,26 +1,27 @@
-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,
-    },
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        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/FormMask/FormMask.js

@@ -1,10 +1,11 @@
 import React from "react";
 import { View } from "react-native";
-import { styles } from "./FormMask.style";
+import { useStyles } from "./FormMask.style";
 import { ActivityIndicator } from "../../../ActivityIndicator";
 import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 export function FormMask() {
     const { t } = useAtlantisI18n();
+    const styles = useStyles();
     return (React.createElement(View, { style: styles.mask, accessibilityLabel: t("loading") },
         React.createElement(ActivityIndicator, null)));
 }

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

@@ -1,15 +1,16 @@
-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",
-    },
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        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/FormMessage/components/InternalFormMessage/InternalFormMessage.js

@@ -2,11 +2,12 @@ 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 { styles } from "./InternalFormMessage.style";
+import { useStyles } from "./InternalFormMessage.style";
 import { EmptyState } from "../../../../../EmptyState";
 import { useAtlantisI18n } from "../../../../../hooks/useAtlantisI18n";
 export function InternalFormMessage({ data, onRequestClose, }) {
     const { t } = useAtlantisI18n();
+    const styles = useStyles();
     const emptyStateData = useMemo(() => {
         if (data.secondaryAction) {
             return data;

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

@@ -1,17 +1,18 @@
-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" },
+import { buildThemedStyles } from "../../../../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        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/FormatFile/FormatFile.js

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import React, { createRef, useCallback, useState } from "react";
 import { TouchableOpacity, View } from "react-native";
-import { styles } from "./FormatFile.style";
+import { useStyles } from "./FormatFile.style";
 import { MediaView } from "./components/MediaView";
 import { FormatFileBottomSheet, } from "./components/FormatFileBottomSheet";
 import { FileView } from "./components/FileView";
@@ -19,6 +19,7 @@ import { AtlantisFormatFileContext } from "./context/FormatFileContext";
 import { createUseCreateThumbnail } from "./utils/createUseCreateThumbnail";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 function FormatFileContent({ accessibilityLabel, file, showOverlay, styleInGrid, onUploadComplete, isMedia, }) {
+    const styles = useStyles();
     return (React.createElement(View, { style: [
             styles.thumbnailContainer,
             styleInGrid && styles.thumbnailContainerGrid,

package/dist/src/FormatFile/FormatFile.style.js

@@ -1,16 +1,19 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-export const styles = StyleSheet.create({
-    thumbnailContainer: {
-        backgroundColor: tokens["color-surface--background"],
-        borderWidth: tokens["border-base"],
-        borderColor: tokens["color-border"],
-        borderRadius: tokens["radius-base"],
-        marginBottom: tokens["space-small"],
-    },
-    thumbnailContainerGrid: {
-        width: tokens["space-extravagant"],
-        height: tokens["space-extravagant"],
-        marginRight: tokens["space-small"],
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        thumbnailContainer: {
+            backgroundColor: tokens["color-surface--background"],
+            borderWidth: tokens["border-base"],
+            borderColor: tokens["color-border"],
+            borderRadius: tokens["radius-base"],
+            marginBottom: tokens["space-small"],
+            // This is to prevent the image from overflowing the container's border radius, otherwise it can "bleed" out the corners
+            overflow: "hidden",
+        },
+        thumbnailContainerGrid: {
+            width: tokens["space-extravagant"],
+            height: tokens["space-extravagant"],
+            marginRight: tokens["space-small"],
+        },
+    };
 });

package/dist/src/FormatFile/components/ErrorIcon/ErrorIcon.js

@@ -1,8 +1,9 @@
 import React from "react";
 import { View } from "react-native";
-import { styles } from "./ErrorIcon.style";
+import { useStyles } from "./ErrorIcon.style";
 import { Icon } from "../../../Icon";
 export function ErrorIcon() {
+    const styles = useStyles();
     return (React.createElement(View, { testID: "format-file-error-icon", style: styles.circle },
         React.createElement(Icon, { name: "alert", color: "critical" })));
 }

package/dist/src/FormatFile/components/ErrorIcon/ErrorIcon.style.js

@@ -1,10 +1,11 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
-export const styles = StyleSheet.create({
-    circle: {
-        width: tokens["space-large"],
-        height: tokens["space-large"],
-        borderRadius: tokens["radius-circle"],
-        backgroundColor: tokens["color-surface"],
-    },
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        circle: {
+            width: tokens["space-large"],
+            height: tokens["space-large"],
+            borderRadius: tokens["radius-circle"],
+            backgroundColor: tokens["color-surface"],
+        },
+    };
 });

package/dist/src/FormatFile/components/FileView/FileView.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { View } from "react-native";
-import { styles } from "./FileView.style";
+import { useStyles } from "./FileView.style";
 import { Icon } from "../../../Icon";
 import { Text } from "../../../Text";
 import { StatusCode } from "../../types";
@@ -10,6 +10,7 @@ import { ErrorIcon } from "../ErrorIcon";
 import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 export function FileView({ accessibilityLabel, styleInGrid, file, showOverlay, showError, onUploadComplete, }) {
     const { t } = useAtlantisI18n();
+    const styles = useStyles();
     const a11yLabel = computeA11yLabel({
         accessibilityLabel,
         showOverlay,