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

package/dist/types/src/BottomSheet/BottomSheet.style.d.ts

@@ -1,11 +1,6 @@
 export declare const useStyles: () => {
     backdrop: {
         backgroundColor: string;
-        position: "absolute";
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
     };
     background: {
         borderTopLeftRadius: number;
@@ -13,9 +8,7 @@ export declare const useStyles: () => {
     };
     content: {
         paddingVertical: number;
-    };
-    footer: {
-        paddingBottom: number;
+        flex: number;
     };
     footerContainer: {
         backgroundColor: string;

package/dist/types/src/Content/Content.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import React from "react";
 import type { StyleProp, ViewStyle } from "react-native";
-export type Spacing = "none" | "base" | "small" | "smaller" | "smallest" | "large";
+export type Spacing = "none" | "base" | "slim" | "small" | "smaller" | "smallest" | "minuscule" | "large" | "larger" | "largest" | "extravagant";
 export interface ContentUnsafeStyle {
     container?: StyleProp<ViewStyle>;
     childWrapper?: StyleProp<ViewStyle>;

package/dist/types/src/Content/ContentHorizontal.style.d.ts

@@ -10,6 +10,9 @@ export declare const useHorizontalStyles: () => {
     noneChildSpace: {
         padding: number;
     };
+    minusculeChildSpace: {
+        paddingLeft: number;
+    };
     smallestChildSpace: {
         paddingLeft: number;
     };
@@ -19,10 +22,22 @@ export declare const useHorizontalStyles: () => {
     smallChildSpace: {
         paddingLeft: number;
     };
+    slimChildSpace: {
+        paddingLeft: number;
+    };
     baseChildSpace: {
         paddingLeft: number;
     };
     largeChildSpace: {
         paddingLeft: number;
     };
+    largerChildSpace: {
+        paddingLeft: number;
+    };
+    largestChildSpace: {
+        paddingLeft: number;
+    };
+    extravagantChildSpace: {
+        paddingLeft: number;
+    };
 };

package/dist/types/src/Content/ContentSpaceAround.style.d.ts

@@ -2,6 +2,9 @@ export declare const useSpaceAroundStyles: () => {
     noneSpace: {
         padding: number;
     };
+    minusculeSpace: {
+        padding: number;
+    };
     smallestSpace: {
         padding: number;
     };
@@ -11,10 +14,22 @@ export declare const useSpaceAroundStyles: () => {
     smallSpace: {
         padding: number;
     };
+    slimSpace: {
+        padding: number;
+    };
     baseSpace: {
         padding: number;
     };
     largeSpace: {
         padding: number;
     };
+    largerSpace: {
+        padding: number;
+    };
+    largestSpace: {
+        padding: number;
+    };
+    extravagantSpace: {
+        padding: number;
+    };
 };

package/dist/types/src/Content/ContentVertical.style.d.ts

@@ -4,6 +4,9 @@ export declare const useVerticalStyles: () => {
     noneChildSpace: {
         padding: number;
     };
+    minusculeChildSpace: {
+        paddingTop: number;
+    };
     smallestChildSpace: {
         paddingTop: number;
     };
@@ -13,10 +16,22 @@ export declare const useVerticalStyles: () => {
     smallChildSpace: {
         paddingTop: number;
     };
+    slimChildSpace: {
+        paddingTop: number;
+    };
     baseChildSpace: {
         paddingTop: number;
     };
     largeChildSpace: {
         paddingTop: number;
     };
+    largerChildSpace: {
+        paddingTop: number;
+    };
+    largestChildSpace: {
+        paddingTop: number;
+    };
+    extravagantChildSpace: {
+        paddingTop: number;
+    };
 };

package/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/src/BottomSheet/BottomSheet.style.ts

@@ -1,4 +1,3 @@
-import { StyleSheet } from "react-native";
 import { buildThemedStyles } from "../AtlantisThemeContext";
 
 export const useStyles = buildThemedStyles(tokens => {
@@ -6,7 +5,6 @@ export const useStyles = buildThemedStyles(tokens => {
 
   return {
     backdrop: {
-      ...StyleSheet.absoluteFillObject,
       backgroundColor: tokens["color-overlay"],
     },
     background: {
@@ -15,9 +13,7 @@ export const useStyles = buildThemedStyles(tokens => {
     },
     content: {
       paddingVertical: tokens["space-small"],
-    },
-    footer: {
-      paddingBottom: tokens["space-small"],
+      flex: 1,
     },
     footerContainer: {
       backgroundColor: tokens["color-surface"],

package/src/BottomSheet/BottomSheet.tsx

@@ -4,13 +4,10 @@ import { Keyboard, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import RNBottomSheet, {
   BottomSheetBackdrop,
-  BottomSheetFooter,
   BottomSheetView,
 } from "@gorhom/bottom-sheet";
-import type {
-  BottomSheetBackdropProps,
-  BottomSheetFooterProps,
-} from "@gorhom/bottom-sheet";
+import type { BottomSheetBackdropProps } from "@gorhom/bottom-sheet";
+import { tokens } from "@jobber/design";
 import { useStyles } from "./BottomSheet.style";
 import { BottomSheetOption } from "./components/BottomSheetOption";
 import { useBottomSheetBackHandler } from "./hooks/useBottomSheetBackHandler";
@@ -79,10 +76,14 @@ export function BottomSheet({
       bottomSheetRef.current?.expand();
     },
     close: () => {
-      bottomSheetRef.current?.close();
+      close();
     },
   }));
 
+  const close = useCallback(() => {
+    bottomSheetRef.current?.close();
+  }, []);
+
   const handleChange = (index: number) => {
     // Handle Android back button
     handleSheetPositionChange(index);
@@ -102,52 +103,28 @@ export function BottomSheet({
     previousIndexRef.current = index;
   };
 
-  const renderFooter = useCallback(
-    (bottomSheetFooterProps: BottomSheetFooterProps) => {
-      return (
-        <BottomSheetFooter {...bottomSheetFooterProps}>
-          <View
-            style={[styles.footerContainer, { paddingBottom: insets.bottom }]}
-          >
-            {cancellable && (
-              <View style={styles.footer}>
-                <View style={styles.footerDivider}>
-                  <Divider />
-                </View>
-                <BottomSheetOption
-                  text={t("cancel")}
-                  icon={"remove"}
-                  onPress={() => {
-                    bottomSheetRef.current?.close();
-                  }}
-                />
-              </View>
-            )}
-          </View>
-        </BottomSheetFooter>
-      );
-    },
-    [cancellable],
-  );
-
   return (
     <RNBottomSheet
       ref={bottomSheetRef}
       index={-1}
       backdropComponent={Backdrop}
       backgroundStyle={styles.background}
-      footerComponent={renderFooter}
       enablePanDownToClose={true}
       onChange={handleChange}
       keyboardBlurBehavior="restore"
       handleStyle={styles.handle}
     >
       <BottomSheetView
-        style={styles.content}
-        enableFooterMarginAdjustment={true}
+        style={[
+          styles.content,
+          { paddingBottom: insets.bottom + tokens["space-small"] },
+        ]}
       >
         {heading && <Header heading={heading} styles={styles} />}
         {children}
+        {cancellable && (
+          <Footer styles={styles} close={close} cancelLabel={t("cancel")} />
+        )}
       </BottomSheetView>
     </RNBottomSheet>
   );
@@ -167,6 +144,26 @@ function Header({
   );
 }
 
+function Footer({
+  styles,
+  close,
+  cancelLabel,
+}: {
+  readonly styles: ReturnType<typeof useStyles>;
+  readonly close: () => void;
+  readonly cancelLabel: string;
+}) {
+  return (
+    <View>
+      <View style={styles.footerDivider}>
+        <Divider />
+      </View>
+
+      <BottomSheetOption text={cancelLabel} icon="remove" onPress={close} />
+    </View>
+  );
+}
+
 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/src/Content/Content.tsx

@@ -9,10 +9,15 @@ import { useSpaceAroundStyles } from "./ContentSpaceAround.style";
 export type Spacing =
   | "none"
   | "base"
+  | "slim"
   | "small"
   | "smaller"
   | "smallest"
-  | "large";
+  | "minuscule"
+  | "large"
+  | "larger"
+  | "largest"
+  | "extravagant";
 
 export interface ContentUnsafeStyle {
   container?: StyleProp<ViewStyle>;

package/src/Content/ContentHorizontal.style.ts

@@ -16,6 +16,10 @@ export const useHorizontalStyles = buildThemedStyles(tokens => {
       padding: 0,
     },
 
+    minusculeChildSpace: {
+      paddingLeft: tokens["space-minuscule"],
+    },
+
     smallestChildSpace: {
       paddingLeft: tokens["space-smallest"],
     },
@@ -28,6 +32,10 @@ export const useHorizontalStyles = buildThemedStyles(tokens => {
       paddingLeft: tokens["space-small"],
     },
 
+    slimChildSpace: {
+      paddingLeft: tokens["space-slim"],
+    },
+
     baseChildSpace: {
       paddingLeft: tokens["space-base"],
     },
@@ -35,5 +43,17 @@ export const useHorizontalStyles = buildThemedStyles(tokens => {
     largeChildSpace: {
       paddingLeft: tokens["space-large"],
     },
+
+    largerChildSpace: {
+      paddingLeft: tokens["space-larger"],
+    },
+
+    largestChildSpace: {
+      paddingLeft: tokens["space-largest"],
+    },
+
+    extravagantChildSpace: {
+      paddingLeft: tokens["space-extravagant"],
+    },
   };
 });

package/src/Content/ContentSpaceAround.style.ts

@@ -6,6 +6,10 @@ export const useSpaceAroundStyles = buildThemedStyles(tokens => {
       padding: 0,
     },
 
+    minusculeSpace: {
+      padding: tokens["space-minuscule"],
+    },
+
     smallestSpace: {
       padding: tokens["space-smallest"],
     },
@@ -18,6 +22,10 @@ export const useSpaceAroundStyles = buildThemedStyles(tokens => {
       padding: tokens["space-small"],
     },
 
+    slimSpace: {
+      padding: tokens["space-slim"],
+    },
+
     baseSpace: {
       padding: tokens["space-base"],
     },
@@ -25,5 +33,17 @@ export const useSpaceAroundStyles = buildThemedStyles(tokens => {
     largeSpace: {
       padding: tokens["space-large"],
     },
+
+    largerSpace: {
+      padding: tokens["space-larger"],
+    },
+
+    largestSpace: {
+      padding: tokens["space-largest"],
+    },
+
+    extravagantSpace: {
+      padding: tokens["space-extravagant"],
+    },
   };
 });

package/src/Content/ContentVertical.style.ts

@@ -16,6 +16,10 @@ export const useVerticalStyles = buildThemedStyles(tokens => {
       padding: 0,
     },
 
+    minusculeChildSpace: {
+      paddingTop: tokens["space-minuscule"],
+    },
+
     smallestChildSpace: {
       paddingTop: tokens["space-smallest"],
     },
@@ -28,6 +32,10 @@ export const useVerticalStyles = buildThemedStyles(tokens => {
       paddingTop: tokens["space-small"],
     },
 
+    slimChildSpace: {
+      paddingTop: tokens["space-slim"],
+    },
+
     baseChildSpace: {
       paddingTop: tokens["space-base"],
     },
@@ -35,5 +43,17 @@ export const useVerticalStyles = buildThemedStyles(tokens => {
     largeChildSpace: {
       paddingTop: tokens["space-large"],
     },
+
+    largerChildSpace: {
+      paddingTop: tokens["space-larger"],
+    },
+
+    largestChildSpace: {
+      paddingTop: tokens["space-largest"],
+    },
+
+    extravagantChildSpace: {
+      paddingTop: tokens["space-extravagant"],
+    },
   };
 });

package/src/ThumbnailList/__snapshots__/ThumbnailList.test.tsx.snap

@@ -174,11 +174,16 @@ exports[`renders a thumbnail component with attachments 1`] = `
       testID="bottom-sheet-mock"
     >
       <View
-        enableFooterMarginAdjustment={true}
         style={
-          {
-            "paddingVertical": 8,
-          }
+          [
+            {
+              "flex": 1,
+              "paddingVertical": 8,
+            },
+            {
+              "paddingBottom": 8,
+            },
+          ]
         }
         testID="bottom-sheet-view"
       >
@@ -347,22 +352,6 @@ exports[`renders a thumbnail component with attachments 1`] = `
           </View>
         </View>
       </View>
-      <View
-        testID="bottom-sheet-footer"
-      >
-        <View
-          style={
-            [
-              {
-                "backgroundColor": "rgba(255, 255, 255, 1)",
-              },
-              {
-                "paddingBottom": 0,
-              },
-            ]
-          }
-        />
-      </View>
     </View>
   </View>,
 ]