@jobber/components-native 0.89.5-JOB-140604-8777ec5.52 → 0.89.5-JOB-140604-4487daa.55

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.89.5-JOB-140604-8777ec5.52+8777ec587",
+    "version": "0.89.5-JOB-140604-4487daa.55+4487daa56",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -96,5 +96,5 @@
         "react-native-safe-area-context": "^5.4.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "8777ec5874ee31d4d513ca4ddc477228a383efb6"
+    "gitHead": "4487daa56640c85a2198bde0b6296c4a290f623a"
 }

package/dist/src/BottomSheet/BottomSheet.js

@@ -1,7 +1,8 @@
 import React, { useCallback, useImperativeHandle, useRef } from "react";
 import { Keyboard, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import RNBottomSheet, { BottomSheetBackdrop, BottomSheetFooter, BottomSheetView, } from "@gorhom/bottom-sheet";
+import RNBottomSheet, { BottomSheetBackdrop, BottomSheetView, } from "@gorhom/bottom-sheet";
+import { tokens } from "@jobber/design";
 import { useStyles } from "./BottomSheet.style";
 import { BottomSheetOption } from "./components/BottomSheetOption";
 import { useBottomSheetBackHandler } from "./hooks/useBottomSheetBackHandler";
@@ -24,10 +25,13 @@ export function BottomSheet({ children, showCancel, loading = false, heading, on
             (_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();
+            close();
         },
     }));
+    const close = useCallback(() => {
+        var _a;
+        (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.close();
+    }, []);
     const handleChange = (index) => {
         // Handle Android back button
         handleSheetPositionChange(index);
@@ -44,25 +48,25 @@ export function BottomSheet({ children, showCancel, loading = false, heading, on
         }
         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", handleStyle: styles.handle },
-        React.createElement(BottomSheetView, { style: styles.content, enableFooterMarginAdjustment: true },
+    return (React.createElement(RNBottomSheet, { ref: bottomSheetRef, index: -1, backdropComponent: Backdrop, backgroundStyle: styles.background, enablePanDownToClose: true, onChange: handleChange, keyboardBlurBehavior: "restore", handleStyle: styles.handle },
+        React.createElement(BottomSheetView, { style: [
+                styles.content,
+                { paddingBottom: insets.bottom + tokens["space-small"] },
+            ] },
             heading && React.createElement(Header, { heading: heading, styles: styles }),
-            children)));
+            children,
+            cancellable && (React.createElement(Footer, { styles: styles, close: close, cancelLabel: t("cancel") })))));
 }
 function Header({ heading, styles, }) {
     return (React.createElement(View, { style: styles.header },
         React.createElement(Heading, { level: "subtitle" }, heading)));
 }
+function Footer({ styles, close, cancelLabel, }) {
+    return (React.createElement(View, null,
+        React.createElement(View, { style: styles.footerDivider },
+            React.createElement(Divider, null)),
+        React.createElement(BottomSheetOption, { text: cancelLabel, icon: "remove", onPress: close })));
+}
 function dismissKeyboard() {
     //Dismisses the keyboard before opening the bottom sheet.
     //In the case where an input text field is focused we don't want to show the bottom sheet behind or above keyboard

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

@@ -1,18 +1,17 @@
-import { StyleSheet } from "react-native";
 import { buildThemedStyles } from "../AtlantisThemeContext";
 export const useStyles = buildThemedStyles(tokens => {
     const modalBorderRadius = tokens["radius-larger"];
     return {
-        backdrop: Object.assign(Object.assign({}, StyleSheet.absoluteFillObject), { backgroundColor: tokens["color-overlay"] }),
+        backdrop: {
+            backgroundColor: tokens["color-overlay"],
+        },
         background: {
             borderTopLeftRadius: modalBorderRadius,
             borderTopRightRadius: modalBorderRadius,
         },
         content: {
             paddingVertical: tokens["space-small"],
-        },
-        footer: {
-            paddingBottom: tokens["space-small"],
+            flex: 1,
         },
         footerContainer: {
             backgroundColor: tokens["color-surface"],

package/dist/src/Content/ContentHorizontal.style.js

@@ -12,6 +12,9 @@ export const useHorizontalStyles = buildThemedStyles(tokens => {
         noneChildSpace: {
             padding: 0,
         },
+        minusculeChildSpace: {
+            paddingLeft: tokens["space-minuscule"],
+        },
         smallestChildSpace: {
             paddingLeft: tokens["space-smallest"],
         },
@@ -21,11 +24,23 @@ export const useHorizontalStyles = buildThemedStyles(tokens => {
         smallChildSpace: {
             paddingLeft: tokens["space-small"],
         },
+        slimChildSpace: {
+            paddingLeft: tokens["space-slim"],
+        },
         baseChildSpace: {
             paddingLeft: tokens["space-base"],
         },
         largeChildSpace: {
             paddingLeft: tokens["space-large"],
         },
+        largerChildSpace: {
+            paddingLeft: tokens["space-larger"],
+        },
+        largestChildSpace: {
+            paddingLeft: tokens["space-largest"],
+        },
+        extravagantChildSpace: {
+            paddingLeft: tokens["space-extravagant"],
+        },
     };
 });

package/dist/src/Content/ContentSpaceAround.style.js

@@ -4,6 +4,9 @@ export const useSpaceAroundStyles = buildThemedStyles(tokens => {
         noneSpace: {
             padding: 0,
         },
+        minusculeSpace: {
+            padding: tokens["space-minuscule"],
+        },
         smallestSpace: {
             padding: tokens["space-smallest"],
         },
@@ -13,11 +16,23 @@ export const useSpaceAroundStyles = buildThemedStyles(tokens => {
         smallSpace: {
             padding: tokens["space-small"],
         },
+        slimSpace: {
+            padding: tokens["space-slim"],
+        },
         baseSpace: {
             padding: tokens["space-base"],
         },
         largeSpace: {
             padding: tokens["space-large"],
         },
+        largerSpace: {
+            padding: tokens["space-larger"],
+        },
+        largestSpace: {
+            padding: tokens["space-largest"],
+        },
+        extravagantSpace: {
+            padding: tokens["space-extravagant"],
+        },
     };
 });

package/dist/src/Content/ContentVertical.style.js

@@ -12,6 +12,9 @@ export const useVerticalStyles = buildThemedStyles(tokens => {
         noneChildSpace: {
             padding: 0,
         },
+        minusculeChildSpace: {
+            paddingTop: tokens["space-minuscule"],
+        },
         smallestChildSpace: {
             paddingTop: tokens["space-smallest"],
         },
@@ -21,11 +24,23 @@ export const useVerticalStyles = buildThemedStyles(tokens => {
         smallChildSpace: {
             paddingTop: tokens["space-small"],
         },
+        slimChildSpace: {
+            paddingTop: tokens["space-slim"],
+        },
         baseChildSpace: {
             paddingTop: tokens["space-base"],
         },
         largeChildSpace: {
             paddingTop: tokens["space-large"],
         },
+        largerChildSpace: {
+            paddingTop: tokens["space-larger"],
+        },
+        largestChildSpace: {
+            paddingTop: tokens["space-largest"],
+        },
+        extravagantChildSpace: {
+            paddingTop: tokens["space-extravagant"],
+        },
     };
 });