@jobber/components-native 0.113.8 → 0.114.0

package/src/BottomSheet/BottomSheet.tsx

@@ -13,6 +13,10 @@ import { tokens } from "@jobber/design";
 import { useStyles } from "./BottomSheet.style";
 import { BottomSheetOption } from "./components/BottomSheetOption";
 import { useBottomSheetBackHandler } from "./hooks/useBottomSheetBackHandler";
+import {
+  AtlantisThemeContextProvider,
+  useAtlantisTheme,
+} from "../AtlantisThemeContext";
 import { Divider } from "../Divider";
 import { Heading } from "../Heading";
 import { useIsScreenReaderEnabled } from "../hooks";
@@ -52,6 +56,7 @@ export interface BottomSheetRef {
   close: () => void;
 }
 
+// eslint-disable-next-line max-statements
 export function BottomSheet({
   children,
   showCancel,
@@ -62,6 +67,7 @@ export function BottomSheet({
   ref,
 }: BottomSheetProps & { readonly ref?: React.Ref<BottomSheetRef> }) {
   const styles = useStyles();
+  const { effectiveTheme } = useAtlantisTheme();
   const isScreenReaderEnabled = useIsScreenReaderEnabled();
 
   const cancellable = (showCancel && !loading) || isScreenReaderEnabled;
@@ -116,18 +122,26 @@ export function BottomSheet({
       keyboardBlurBehavior="restore"
       handleStyle={styles.handle}
     >
-      <BottomSheetView
-        style={{
-          paddingBottom: insets.bottom + tokens["space-small"],
-          paddingTop: tokens["space-small"],
-        }}
-      >
-        {heading && <Header heading={heading} styles={styles} />}
-        {children}
-        {cancellable && (
-          <Footer styles={styles} close={close} cancelLabel={t("cancel")} />
-        )}
-      </BottomSheetView>
+      {/*
+        BottomSheetModal renders through a portal mounted outside this
+        component's subtree, so AtlantisThemeContext is lost. Re-apply the
+        active effective theme so descendants continue to resolve the correct
+        themed tokens.
+      */}
+      <AtlantisThemeContextProvider dangerouslyOverrideTheme={effectiveTheme}>
+        <BottomSheetView
+          style={{
+            paddingBottom: insets.bottom + tokens["space-small"],
+            paddingTop: tokens["space-small"],
+          }}
+        >
+          {heading && <Header heading={heading} styles={styles} />}
+          {children}
+          {cancellable && (
+            <Footer styles={styles} close={close} cancelLabel={t("cancel")} />
+          )}
+        </BottomSheetView>
+      </AtlantisThemeContextProvider>
     </BottomSheetModal>
   );
 }

package/src/ContentOverlay/ContentOverlay.tsx

@@ -99,7 +99,7 @@ export function ContentOverlay({
 
   const styles = useStyles();
   const { t } = useAtlantisI18n();
-  const { theme, tokens } = useAtlantisTheme();
+  const { effectiveTheme, tokens } = useAtlantisTheme();
   const isScreenReaderEnabled = useIsScreenReaderEnabled();
 
   const behavior = computeContentOverlayBehavior(
@@ -327,7 +327,7 @@ export function ContentOverlay({
         the active theme here so descendants (e.g. the header title) resolve the
         correct themed tokens.
       */}
-      <AtlantisThemeContextProvider dangerouslyOverrideTheme={theme}>
+      <AtlantisThemeContextProvider dangerouslyOverrideTheme={effectiveTheme}>
         <ContentOverlayKeyboardContext.Provider value={scrollEnabled}>
           {scrollEnabled ? (
             <BottomSheetKeyboardAwareScrollView