@jobber/components-native 0.48.8 → 0.48.9

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

@@ -24,7 +24,7 @@ export declare const styles: {
         zIndex: number;
         borderTopLeftRadius: number;
         borderTopRightRadius: number;
-        height: number;
+        minHeight: number;
     };
     headerShadow: {
         shadowColor: string;
@@ -45,17 +45,17 @@ export declare const styles: {
     hiddenContent: {
         opacity: number;
     };
-    titleWithoutDimiss: {
+    titleWithoutDismiss: {
         flex: number;
         flexDirection: "row";
         justifyContent: "center";
         paddingTop: number;
+        paddingHorizontal: number;
     };
     titleWithDismiss: {
         flex: number;
         justifyContent: "center";
         paddingLeft: number;
         paddingRight: number;
-        flexGrow: number;
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.48.8",
+  "version": "0.48.9",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -84,5 +84,5 @@
     "react-native-reanimated": "^2.17.0",
     "react-native-safe-area-context": "^4.5.2"
   },
-  "gitHead": "969b9462d2a1bc28cc4727434842fff06d2f5547"
+  "gitHead": "7f6c0fb7177ea6a47259b962efa9c59ab054feab"
 }

package/src/ContentOverlay/ContentOverlay.style.ts

@@ -34,7 +34,7 @@ export const styles = StyleSheet.create({
     zIndex: tokens["elevation-base"],
     borderTopLeftRadius: modalBorderRadius,
     borderTopRightRadius: modalBorderRadius,
-    height: tokens["space-extravagant"],
+    minHeight: tokens["space-extravagant"],
   },
 
   headerShadow: {
@@ -54,11 +54,12 @@ export const styles = StyleSheet.create({
     opacity: 0,
   },
 
-  titleWithoutDimiss: {
+  titleWithoutDismiss: {
     flex: 1,
     flexDirection: "row",
     justifyContent: "center",
     paddingTop: tokens["space-base"],
+    paddingHorizontal: tokens["space-base"],
   },
 
   titleWithDismiss: {
@@ -66,6 +67,5 @@ export const styles = StyleSheet.create({
     justifyContent: "center",
     paddingLeft: tokens["space-base"],
     paddingRight: tokens["space-smaller"],
-    flexGrow: 1,
   },
 });

package/src/ContentOverlay/ContentOverlay.tsx

@@ -85,6 +85,7 @@ function ContentOverlayInternal(
     if (!modalizeMethods?.open || !modalizeMethods?.close) {
       return {};
     }
+
     return {
       open: modalizeMethods?.open,
       close: modalizeMethods?.close,
@@ -110,9 +111,11 @@ function ContentOverlayInternal(
       return undefined;
     }
     const overlayHeight = headerHeight + childrenHeight;
+
     if (overlayHeight >= windowHeight) {
       return undefined;
     }
+
     return overlayHeight;
   }, [
     fullScreen,
@@ -136,9 +139,11 @@ function ContentOverlayInternal(
   const onCloseController = () => {
     if (!onBeforeExit) {
       internalRef.current?.close();
+
       return true;
     } else {
       onBeforeExit();
+
       return false;
     }
   };
@@ -169,6 +174,7 @@ function ContentOverlayInternal(
           onOpened={() => {
             if (overlayHeader.current) {
               const reactTag = findNodeHandle(overlayHeader.current);
+
               if (reactTag) {
                 AccessibilityInfo.setAccessibilityFocus(reactTag);
               }
@@ -217,16 +223,20 @@ function ContentOverlayInternal(
         <View style={headerStyles}>
           <View
             style={
-              showDismiss ? styles.titleWithDismiss : styles.titleWithoutDimiss
+              shouldShowDismiss
+                ? styles.titleWithDismiss
+                : styles.titleWithoutDismiss
             }
           >
             <Heading
               level="subtitle"
               variation={loading ? "subdued" : "heading"}
+              align={shouldShowDismiss ? "start" : "center"}
             >
               {title}
             </Heading>
           </View>
+
           {shouldShowDismiss && (
             <View
               style={styles.dismissButton}