@draftbit/core 43.4.15-d80519.0 → 43.4.16-ae1318.0

package/src/components/Surface.js

@@ -5,17 +5,28 @@ import shadow from "../styles/shadow";
 import overlay from "../styles/overlay";
 import { withTheme } from "../theming";
 const Surface = ({ elevation: propElevation, style, theme, children, ...rest }) => {
-    const { elevation: styleElevation = 3, borderRadius, overflow, height, width, } = (StyleSheet.flatten(style) || {});
+    const { elevation: styleElevation = 3, backgroundColor, borderRadius, overflow, height, width, } = (StyleSheet.flatten(style) || {});
     const { dark: isDarkTheme, mode, colors } = theme;
     const elevation = propElevation || styleElevation;
     const evalationStyles = elevation ? shadow(elevation) : {};
+    const getBackgroundColor = () => {
+        if (backgroundColor) {
+            return backgroundColor;
+        }
+        else if (isDarkTheme && mode === "adaptive") {
+            return overlay(elevation, colors.surface);
+        }
+        else {
+            return colors.surface;
+        }
+    };
     return (React.createElement(Animated.View, { ...rest, style: [
             style,
             {
-                backgroundColor: isDarkTheme && mode === "adaptive"
-                    ? overlay(elevation, colors.surface)
-                    : colors.surface,
-                overflow: Platform.OS === "web" ? "hidden" : "visible",
+                backgroundColor: getBackgroundColor(),
+                overflow: Platform.OS === "web" && overflow === "hidden"
+                    ? "hidden"
+                    : "visible",
                 elevation,
                 ...evalationStyles,
             },

package/src/components/Surface.tsx

@@ -29,6 +29,7 @@ const Surface: React.FC<Props> = ({
 }) => {
   const {
     elevation: styleElevation = 3,
+    backgroundColor,
     borderRadius,
     overflow,
     height,
@@ -41,17 +42,27 @@ const Surface: React.FC<Props> = ({
 
   const evalationStyles = elevation ? shadow(elevation) : {};
 
+  const getBackgroundColor = () => {
+    if (backgroundColor) {
+      return backgroundColor;
+    } else if (isDarkTheme && mode === "adaptive") {
+      return overlay(elevation, colors.surface);
+    } else {
+      return colors.surface;
+    }
+  };
+
   return (
     <Animated.View
       {...rest}
       style={[
         style,
         {
-          backgroundColor:
-            isDarkTheme && mode === "adaptive"
-              ? overlay(elevation, colors.surface)
-              : colors.surface,
-          overflow: Platform.OS === "web" ? "hidden" : "visible",
+          backgroundColor: getBackgroundColor(),
+          overflow:
+            Platform.OS === "web" && overflow === "hidden"
+              ? "hidden"
+              : "visible",
           elevation,
           ...evalationStyles,
         },