@fountain-ui/lab 3.0.0-alpha.7 → 3.0.0-alpha.9

package/build/commonjs/BottomSheet/BottomSheetNative.js

@@ -30,6 +30,7 @@ const NoHandle = () => null;
 function BottomSheet(props) {
   const {
     backdropOpacity = 0.5,
+    backgroundStyle: backgroundStyleProp,
     borderRadius: borderRadiusProp,
     children,
     enableDynamicSizing = true,
@@ -37,7 +38,8 @@ function BottomSheet(props) {
     index,
     maxHeightNormalizedRatio = 0.8,
     onChange,
-    snapPoints = []
+    snapPoints = [],
+    style: styleProp
   } = props;
   const indexRef = (0, _react.useRef)(-1);
   const bottomSheetRef = (0, _react.useRef)(null);
@@ -86,19 +88,22 @@ function BottomSheet(props) {
   }, [index]);
   const theme = (0, _styles.useTheme)();
   const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;
-  const backgroundStyle = {
+  const backgroundStyle = (0, _core.css)([{
     backgroundColor: theme.palette.surface.base,
     borderTopLeftRadius: borderRadius,
     borderTopRightRadius: borderRadius
-  };
-  const contentWrapperStyle = {
+  }, backgroundStyleProp]);
+  const contentWrapperStyle = (0, _core.css)([{
+    backgroundColor: theme.palette.surface.base,
+    borderTopLeftRadius: borderRadius,
+    borderTopRightRadius: borderRadius,
     flexShrink: 1,
     maxHeight: maxDynamicContentSize,
     minHeight: 325,
     overflow: 'hidden',
     paddingBottom: theme.spacing(6),
     paddingTop: theme.spacing(5.5)
-  };
+  }, styleProp]);
   const isBackdropTransparent = backdropOpacity <= 0;
 
   const OpacityAwareBackdrop = props => /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetBackdrop, _extends({}, props, {

package/build/commonjs/BottomSheet/BottomSheetNative.js.map

@@ -1 +1 @@
-{"version":3,"names":["NoHandle","BottomSheet","props","backdropOpacity","borderRadius","borderRadiusProp","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","indexRef","useRef","bottomSheetRef","height","windowHeight","useWindowDimensions","topElementHeight","setTopElementHeight","useState","maxDynamicContentSize","Math","round","handleTopElementLayout","event","nativeEvent","layout","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","useTheme","shape","radius","xxl","backgroundStyle","backgroundColor","palette","surface","base","borderTopLeftRadius","borderTopRightRadius","contentWrapperStyle","flexShrink","maxHeight","minHeight","overflow","paddingBottom","spacing","paddingTop","isBackdropTransparent","OpacityAwareBackdrop","topElementOpacity","useAnimatedValue","topElementAnimationStyle","opacity","topElementLocationStyle","position","width","bottom","onAnimate","fromIndex","toIndex","isVisible","Animated","timing","toValue","duration","useNativeDriver","isNotAndroid12","start","TransparentBackdrop","Boolean","undefined"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Animated, LayoutChangeEvent, useWindowDimensions, ViewStyle } from 'react-native';\nimport {\n    BottomSheetBackdrop,\n    BottomSheetBackdropProps,\n    BottomSheetModal,\n    BottomSheetModalProvider,\n    BottomSheetView,\n} from '@gorhom/bottom-sheet';\nimport { Column, ExtendedStyle, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport type BottomSheetProps from './BottomSheetProps';\nimport TransparentBackdrop from './TransparentBackdrop';\n\nconst NoHandle = () => null;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity = 0.5,\n        borderRadius: borderRadiusProp,\n        children,\n        enableDynamicSizing = true,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.8,\n        onChange,\n        snapPoints = [],\n    } = props;\n\n    const indexRef = useRef<number>(-1);\n    const bottomSheetRef = useRef<BottomSheetModal | null>(null);\n\n    const { height: windowHeight } = useWindowDimensions();\n    const [topElementHeight, setTopElementHeight] = useState(0);\n\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;\n\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const handleChange = useCallback((newIndex: number) => {\n        indexRef.current = newIndex;\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    }, [onChange]);\n\n    const handleDismiss = useCallback(() => {\n        handleChange(-1);\n    }, [handleChange]);\n\n    useEffect(() => {\n        if (index === indexRef.current) {\n            return;\n        }\n\n        if (indexRef.current < 0 && index >= 0) {\n            bottomSheetRef.current?.present();\n        } else if (indexRef.current >= 0 && index < 0) {\n            bottomSheetRef.current?.dismiss();\n        } else {\n            // @ts-ignore\n            bottomSheetRef.current?.snapToIndex(index);\n        }\n    }, [index]);\n\n    const theme = useTheme();\n\n    const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;\n    const backgroundStyle = {\n        backgroundColor: theme.palette.surface.base,\n        borderTopLeftRadius: borderRadius,\n        borderTopRightRadius: borderRadius,\n    };\n\n    const contentWrapperStyle: ViewStyle = {\n        flexShrink: 1,\n        maxHeight: maxDynamicContentSize,\n        minHeight: 325,\n        overflow: 'hidden',\n        paddingBottom: theme.spacing(6),\n        paddingTop: theme.spacing(5.5),\n    };\n\n    const isBackdropTransparent = backdropOpacity <= 0;\n\n    const OpacityAwareBackdrop = (props: BottomSheetBackdropProps) => (\n        <BottomSheetBackdrop\n            {...props}\n            appearsOnIndex={0}\n            disappearsOnIndex={-1}\n            opacity={backdropOpacity}\n            pressBehavior={onChange ? 'close' : 'none'}\n        />\n    );\n\n    const topElementOpacity = useAnimatedValue(0);\n    const topElementAnimationStyle: Animated.WithAnimatedValue<ExtendedStyle> = { opacity: topElementOpacity };\n    const topElementLocationStyle: ExtendedStyle = {\n        position: 'absolute',\n        width: '100%',\n        bottom: 0,\n    };\n    const onAnimate = (fromIndex: number, toIndex: number) => {\n        const isVisible = toIndex > -1;\n\n        Animated.timing(topElementOpacity, {\n            toValue: isVisible ? 1 : 0,\n            duration: 0,\n            useNativeDriver: isNotAndroid12,\n        }).start();\n    };\n\n    return (\n        <BottomSheetModalProvider>\n            <BottomSheetModal\n                backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}\n                // @ts-ignore\n                backgroundStyle={backgroundStyle}\n                index={index}\n                handleComponent={NoHandle}\n                onChange={handleChange}\n                onDismiss={handleDismiss}\n                ref={bottomSheetRef}\n                snapPoints={snapPoints}\n                enablePanDownToClose={Boolean(onChange)}\n                enableDynamicSizing={enableDynamicSizing}\n                maxDynamicContentSize={maxDynamicContentSize}\n                detached={Boolean(topElement)}\n                onAnimate={topElement ? onAnimate : undefined}\n            >\n                {topElement ? (\n                    <Animated.View style={topElementAnimationStyle}>\n                        <Column\n                            onLayout={handleTopElementLayout}\n                            style={topElementLocationStyle}\n                        >\n                            {topElement}\n                        </Column>\n                    </Animated.View>\n                ) : null}\n\n                <BottomSheetView style={contentWrapperStyle}>\n                    {children}\n                </BottomSheetView>\n            </BottomSheetModal>\n        </BottomSheetModalProvider>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["NoHandle","BottomSheet","props","backdropOpacity","backgroundStyle","backgroundStyleProp","borderRadius","borderRadiusProp","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","style","styleProp","indexRef","useRef","bottomSheetRef","height","windowHeight","useWindowDimensions","topElementHeight","setTopElementHeight","useState","maxDynamicContentSize","Math","round","handleTopElementLayout","event","nativeEvent","layout","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","useTheme","shape","radius","xxl","css","backgroundColor","palette","surface","base","borderTopLeftRadius","borderTopRightRadius","contentWrapperStyle","flexShrink","maxHeight","minHeight","overflow","paddingBottom","spacing","paddingTop","isBackdropTransparent","OpacityAwareBackdrop","topElementOpacity","useAnimatedValue","topElementAnimationStyle","opacity","topElementLocationStyle","position","width","bottom","onAnimate","fromIndex","toIndex","isVisible","Animated","timing","toValue","duration","useNativeDriver","isNotAndroid12","start","TransparentBackdrop","Boolean","undefined"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Animated, LayoutChangeEvent, useWindowDimensions, ViewStyle } from 'react-native';\nimport {\n    BottomSheetBackdrop,\n    BottomSheetBackdropProps,\n    BottomSheetModal,\n    BottomSheetModalProvider,\n    BottomSheetView,\n} from '@gorhom/bottom-sheet';\nimport { Column, css, ExtendedStyle, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport type BottomSheetProps from './BottomSheetProps';\nimport TransparentBackdrop from './TransparentBackdrop';\n\nconst NoHandle = () => null;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity = 0.5,\n        backgroundStyle: backgroundStyleProp,\n        borderRadius: borderRadiusProp,\n        children,\n        enableDynamicSizing = true,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.8,\n        onChange,\n        snapPoints = [],\n        style: styleProp,\n    } = props;\n\n    const indexRef = useRef<number>(-1);\n    const bottomSheetRef = useRef<BottomSheetModal | null>(null);\n\n    const { height: windowHeight } = useWindowDimensions();\n    const [topElementHeight, setTopElementHeight] = useState(0);\n\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;\n\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const handleChange = useCallback((newIndex: number) => {\n        indexRef.current = newIndex;\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    }, [onChange]);\n\n    const handleDismiss = useCallback(() => {\n        handleChange(-1);\n    }, [handleChange]);\n\n    useEffect(() => {\n        if (index === indexRef.current) {\n            return;\n        }\n\n        if (indexRef.current < 0 && index >= 0) {\n            bottomSheetRef.current?.present();\n        } else if (indexRef.current >= 0 && index < 0) {\n            bottomSheetRef.current?.dismiss();\n        } else {\n            // @ts-ignore\n            bottomSheetRef.current?.snapToIndex(index);\n        }\n    }, [index]);\n\n    const theme = useTheme();\n\n    const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;\n    const backgroundStyle = css([\n        {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: borderRadius,\n            borderTopRightRadius: borderRadius,\n        },\n        backgroundStyleProp,\n    ]);\n\n    const contentWrapperStyle: ViewStyle = css([\n        {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: borderRadius,\n            borderTopRightRadius: borderRadius,\n            flexShrink: 1,\n            maxHeight: maxDynamicContentSize,\n            minHeight: 325,\n            overflow: 'hidden',\n            paddingBottom: theme.spacing(6),\n            paddingTop: theme.spacing(5.5),\n        },\n        styleProp,\n    ]);\n\n    const isBackdropTransparent = backdropOpacity <= 0;\n\n    const OpacityAwareBackdrop = (props: BottomSheetBackdropProps) => (\n        <BottomSheetBackdrop\n            {...props}\n            appearsOnIndex={0}\n            disappearsOnIndex={-1}\n            opacity={backdropOpacity}\n            pressBehavior={onChange ? 'close' : 'none'}\n        />\n    );\n\n    const topElementOpacity = useAnimatedValue(0);\n    const topElementAnimationStyle: Animated.WithAnimatedValue<ExtendedStyle> = { opacity: topElementOpacity };\n    const topElementLocationStyle: ExtendedStyle = {\n        position: 'absolute',\n        width: '100%',\n        bottom: 0,\n    };\n    const onAnimate = (fromIndex: number, toIndex: number) => {\n        const isVisible = toIndex > -1;\n\n        Animated.timing(topElementOpacity, {\n            toValue: isVisible ? 1 : 0,\n            duration: 0,\n            useNativeDriver: isNotAndroid12,\n        }).start();\n    };\n\n    return (\n        <BottomSheetModalProvider>\n            <BottomSheetModal\n                backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}\n                // @ts-ignore\n                backgroundStyle={backgroundStyle}\n                index={index}\n                handleComponent={NoHandle}\n                onChange={handleChange}\n                onDismiss={handleDismiss}\n                ref={bottomSheetRef}\n                snapPoints={snapPoints}\n                enablePanDownToClose={Boolean(onChange)}\n                enableDynamicSizing={enableDynamicSizing}\n                maxDynamicContentSize={maxDynamicContentSize}\n                detached={Boolean(topElement)}\n                onAnimate={topElement ? onAnimate : undefined}\n            >\n                {topElement ? (\n                    <Animated.View style={topElementAnimationStyle}>\n                        <Column\n                            onLayout={handleTopElementLayout}\n                            style={topElementLocationStyle}\n                        >\n                            {topElement}\n                        </Column>\n                    </Animated.View>\n                ) : null}\n\n                <BottomSheetView style={contentWrapperStyle}>\n                    {children}\n                </BottomSheetView>\n            </BottomSheetModal>\n        </BottomSheetModalProvider>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/BottomSheet/BottomSheetProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["BottomSheetProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ComponentProps } from '@fountain-ui/core';\n\nexport default interface BottomSheetProps extends ComponentProps<{\n    /**\n     * Opacity for BackdropComponent\n     * @default 0.5\n     */\n    backdropOpacity?: number;\n\n    /**\n     * Border radius for bottom sheet\n     */\n    borderRadius?: number;\n\n    /**\n     * BottomSheet children, usually the included sub-components.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * Enable dynamic sizing for content size.\n     * @default true\n     */\n    enableDynamicSizing?: boolean;\n\n    /**\n     * Top element for displaying additional information on the bottom sheet.\n     */\n    topElement?: React.ReactNode;\n\n    /**\n     * Snap index. You could also provide -1 to bottom sheet in closed state.\n     */\n    index: number;\n\n    /**\n     * Maximum height(normalized value) of dialog\n     * ex. 30% => 0.3 / 90% => 0.9\n     * @default 0.8\n     */\n    maxHeightNormalizedRatio?: number;\n\n    /**\n     * Callback fired when the index is changed.\n     * Important! Use memoized value.\n     */\n    onChange?: (newIndex: number) => void;\n\n    /**\n     * Points for the bottom sheet to snap to, points should be sorted from bottom to top.\n     * Important! Use memoized value.\n     * Only number type or string type(~% format) can be used.\n     * @default []\n     */\n    snapPoints?: Array<number | string>;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["BottomSheetProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ComponentProps, ExtendedStyle } from '@fountain-ui/core';\n\nexport default interface BottomSheetProps extends ComponentProps<{\n    /**\n     * Opacity for BackdropComponent\n     * @default 0.5\n     */\n    backdropOpacity?: number;\n\n    /**\n     * View style to be applied to the background component. (only native)\n     */\n    backgroundStyle?: ExtendedStyle | ExtendedStyle[];\n\n    /**\n     * Border radius for bottom sheet\n     */\n    borderRadius?: number;\n\n    /**\n     * BottomSheet children, usually the included sub-components.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * Enable dynamic sizing for content size.\n     * @default true\n     */\n    enableDynamicSizing?: boolean;\n\n    /**\n     * Top element for displaying additional information on the bottom sheet.\n     */\n    topElement?: React.ReactNode;\n\n    /**\n     * Snap index. You could also provide -1 to bottom sheet in closed state.\n     */\n    index: number;\n\n    /**\n     * Maximum height(normalized value) of dialog\n     * ex. 30% => 0.3 / 90% => 0.9\n     * @default 0.8\n     */\n    maxHeightNormalizedRatio?: number;\n\n    /**\n     * Callback fired when the index is changed.\n     * Important! Use memoized value.\n     */\n    onChange?: (newIndex: number) => void;\n\n    /**\n     * Points for the bottom sheet to snap to, points should be sorted from bottom to top.\n     * Important! Use memoized value.\n     * Only number type or string type(~% format) can be used.\n     * @default []\n     */\n    snapPoints?: Array<number | string>;\n\n    /**\n     * View style to be applied to the content area.\n     */\n    style?: ExtendedStyle | ExtendedStyle[];\n}> {}\n"],"mappings":""}

package/build/commonjs/BottomSheet/BottomSheetWeb.js

@@ -61,7 +61,8 @@ function BottomSheet(props) {
     index,
     maxHeightNormalizedRatio = 0.8,
     onChange,
-    snapPoints = []
+    snapPoints = [],
+    style: styleProp
   } = props;
   const styles = useStyles();
   const {
@@ -101,7 +102,7 @@ function BottomSheet(props) {
       height: highestSnapPoint
     } : {}),
     maxHeight: maxDynamicContentSize
-  }]);
+  }, styleProp]);
   return /*#__PURE__*/_react.default.createElement(_core.Modal, {
     backdropOpacity: backdropOpacity,
     onClose: handleClose,

package/build/commonjs/BottomSheet/BottomSheetWeb.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","backgroundColor","palette","surface","base","borderTopLeftRadius","shape","radius","xxl","borderTopRightRadius","flexGrow","minHeight","overflow","paddingBottom","spacing","paddingTop","topElementLocation","position","bottom","BottomSheet","props","backdropOpacity","borderRadius","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","styles","height","windowHeight","useWindowDimensions","topElementHeight","setTopElementHeight","useState","maxDynamicContentSize","Math","round","handleTopElementLayout","event","nativeEvent","layout","handleClose","convertedSnapPoints","handleLayout","highestSnapPoint","useDynamicSnapPoints","translateY","contentStyles","css","maxHeight","StyleSheet","absoluteFill"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions, View } from 'react-native';\nimport { Column, css, Modal, StyleSheet, useTheme } from '@fountain-ui/core';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport AnimatedY from '../AnimatedY';\nimport type BottomSheetProps from './BottomSheetProps';\nimport useDynamicSnapPoints from './useDynamicSnapPoints';\n\ntype BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'topElementLocation'>;\n\nconst useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            justifyContent: 'flex-end',\n            zIndex: theme.zIndex.dialog,\n        },\n        animated: {\n            alignSelf: 'center',\n            maxWidth: 720,\n            width: '100%',\n        },\n        paper: {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: theme.shape.radius.xxl,\n            borderTopRightRadius: theme.shape.radius.xxl,\n            flexGrow: 1,\n            minHeight: 325,\n            overflow: 'hidden',\n            paddingBottom: theme.spacing(6),\n            paddingTop: theme.spacing(5.5),\n        },\n        topElementLocation: {\n            position: 'absolute',\n            bottom: 0,\n            width: '100%',\n        },\n    };\n};\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity,\n        borderRadius,\n        children,\n        enableDynamicSizing = true,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.8,\n        onChange,\n        snapPoints = [],\n    } = props;\n\n    const styles = useStyles();\n\n    const { height: windowHeight } = useWindowDimensions();\n\n    const [topElementHeight, setTopElementHeight] = useState(0);\n\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;\n\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const handleClose = () => {\n        if (onChange) {\n            onChange(-1);\n        }\n    };\n\n    const {\n        convertedSnapPoints,\n        handleLayout,\n        highestSnapPoint,\n    } = useDynamicSnapPoints({\n        enableDynamicSizing,\n        maxDynamicContentSize,\n        snapPoints,\n    });\n\n    const translateY = highestSnapPoint - (convertedSnapPoints[index] ?? 0);\n\n    const contentStyles = css([\n        styles.paper,\n        {\n            ...(borderRadius ? { borderTopLeftRadius: borderRadius, borderTopRightRadius: borderRadius } : {}),\n            ...(highestSnapPoint !== maxDynamicContentSize ? { height: highestSnapPoint } : {}),\n            maxHeight: maxDynamicContentSize,\n        },\n    ]);\n\n    return (\n        <Modal\n            backdropOpacity={backdropOpacity}\n            onClose={handleClose}\n            visible={index >= 0}\n            style={css([StyleSheet.absoluteFill, styles.root])}\n        >\n            <AnimatedY translateY={translateY}>\n                {topElement ? (\n                    <Column\n                        onLayout={handleTopElementLayout}\n                        style={styles.topElementLocation}\n                    >\n                        {topElement}\n                    </Column>\n                ) : null}\n\n                <View\n                    onLayout={handleLayout}\n                    style={contentStyles}\n                >\n                    {children}\n                </View>\n            </AnimatedY>\n        </Modal>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["useStyles","theme","useTheme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","backgroundColor","palette","surface","base","borderTopLeftRadius","shape","radius","xxl","borderTopRightRadius","flexGrow","minHeight","overflow","paddingBottom","spacing","paddingTop","topElementLocation","position","bottom","BottomSheet","props","backdropOpacity","borderRadius","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","style","styleProp","styles","height","windowHeight","useWindowDimensions","topElementHeight","setTopElementHeight","useState","maxDynamicContentSize","Math","round","handleTopElementLayout","event","nativeEvent","layout","handleClose","convertedSnapPoints","handleLayout","highestSnapPoint","useDynamicSnapPoints","translateY","contentStyles","css","maxHeight","StyleSheet","absoluteFill"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions, View } from 'react-native';\nimport { Column, css, Modal, StyleSheet, useTheme } from '@fountain-ui/core';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport AnimatedY from '../AnimatedY';\nimport type BottomSheetProps from './BottomSheetProps';\nimport useDynamicSnapPoints from './useDynamicSnapPoints';\n\ntype BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'topElementLocation'>;\n\nconst useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            justifyContent: 'flex-end',\n            zIndex: theme.zIndex.dialog,\n        },\n        animated: {\n            alignSelf: 'center',\n            maxWidth: 720,\n            width: '100%',\n        },\n        paper: {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: theme.shape.radius.xxl,\n            borderTopRightRadius: theme.shape.radius.xxl,\n            flexGrow: 1,\n            minHeight: 325,\n            overflow: 'hidden',\n            paddingBottom: theme.spacing(6),\n            paddingTop: theme.spacing(5.5),\n        },\n        topElementLocation: {\n            position: 'absolute',\n            bottom: 0,\n            width: '100%',\n        },\n    };\n};\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity,\n        borderRadius,\n        children,\n        enableDynamicSizing = true,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.8,\n        onChange,\n        snapPoints = [],\n        style: styleProp,\n    } = props;\n\n    const styles = useStyles();\n\n    const { height: windowHeight } = useWindowDimensions();\n\n    const [topElementHeight, setTopElementHeight] = useState(0);\n\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;\n\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const handleClose = () => {\n        if (onChange) {\n            onChange(-1);\n        }\n    };\n\n    const {\n        convertedSnapPoints,\n        handleLayout,\n        highestSnapPoint,\n    } = useDynamicSnapPoints({\n        enableDynamicSizing,\n        maxDynamicContentSize,\n        snapPoints,\n    });\n\n    const translateY = highestSnapPoint - (convertedSnapPoints[index] ?? 0);\n\n    const contentStyles = css([\n        styles.paper,\n        {\n            ...(borderRadius ? { borderTopLeftRadius: borderRadius, borderTopRightRadius: borderRadius } : {}),\n            ...(highestSnapPoint !== maxDynamicContentSize ? { height: highestSnapPoint } : {}),\n            maxHeight: maxDynamicContentSize,\n        },\n        styleProp,\n    ]);\n\n    return (\n        <Modal\n            backdropOpacity={backdropOpacity}\n            onClose={handleClose}\n            visible={index >= 0}\n            style={css([StyleSheet.absoluteFill, styles.root])}\n        >\n            <AnimatedY translateY={translateY}>\n                {topElement ? (\n                    <Column\n                        onLayout={handleTopElementLayout}\n                        style={styles.topElementLocation}\n                    >\n                        {topElement}\n                    </Column>\n                ) : null}\n\n                <View\n                    onLayout={handleLayout}\n                    style={contentStyles}\n                >\n                    {children}\n                </View>\n            </AnimatedY>\n        </Modal>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAEA;;;;;;;;AAIA,MAAMA,SAAuC,GAAG,YAA+B;EAC3E,MAAMC,KAAK,GAAG,IAAAC,cAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,cAAc,EAAE,UADd;MAEFC,MAAM,EAAEJ,KAAK,CAACI,MAAN,CAAaC;IAFnB,CADH;IAKHC,QAAQ,EAAE;MACNC,SAAS,EAAE,QADL;MAENC,QAAQ,EAAE,GAFJ;MAGNC,KAAK,EAAE;IAHD,CALP;IAUHC,KAAK,EAAE;MACHC,eAAe,EAAEX,KAAK,CAACY,OAAN,CAAcC,OAAd,CAAsBC,IADpC;MAEHC,mBAAmB,EAAEf,KAAK,CAACgB,KAAN,CAAYC,MAAZ,CAAmBC,GAFrC;MAGHC,oBAAoB,EAAEnB,KAAK,CAACgB,KAAN,CAAYC,MAAZ,CAAmBC,GAHtC;MAIHE,QAAQ,EAAE,CAJP;MAKHC,SAAS,EAAE,GALR;MAMHC,QAAQ,EAAE,QANP;MAOHC,aAAa,EAAEvB,KAAK,CAACwB,OAAN,CAAc,CAAd,CAPZ;MAQHC,UAAU,EAAEzB,KAAK,CAACwB,OAAN,CAAc,GAAd;IART,CAVJ;IAoBHE,kBAAkB,EAAE;MAChBC,QAAQ,EAAE,UADM;MAEhBC,MAAM,EAAE,CAFQ;MAGhBnB,KAAK,EAAE;IAHS;EApBjB,CAAP;AA0BH,CA7BD;;AA+Be,SAASoB,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,eADE;IAEFC,YAFE;IAGFC,QAHE;IAIFC,mBAAmB,GAAG,IAJpB;IAKFC,UALE;IAMFC,KANE;IAOFC,wBAAwB,GAAG,GAPzB;IAQFC,QARE;IASFC,UAAU,GAAG,EATX;IAUFC,KAAK,EAAEC;EAVL,IAWFX,KAXJ;EAaA,MAAMY,MAAM,GAAG3C,SAAS,EAAxB;EAEA,MAAM;IAAE4C,MAAM,EAAEC;EAAV,IAA2B,IAAAC,gCAAA,GAAjC;EAEA,MAAM,CAACC,gBAAD,EAAmBC,mBAAnB,IAA0C,IAAAC,eAAA,EAAS,CAAT,CAAhD;EAEA,MAAMC,qBAAqB,GAAGC,IAAI,CAACC,KAAL,CAAWP,YAAY,GAAGP,wBAA1B,IAAsDS,gBAApF;;EAEA,MAAMM,sBAAsB,GAAIC,KAAD,IAA8B;IACzD,MAAM;MAAEV;IAAF,IAAaU,KAAK,CAACC,WAAN,CAAkBC,MAArC;IACAR,mBAAmB,CAACJ,MAAD,CAAnB;EACH,CAHD;;EAKA,MAAMa,WAAW,GAAG,MAAM;IACtB,IAAIlB,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAAC,CAAF,CAAR;IACH;EACJ,CAJD;;EAMA,MAAM;IACFmB,mBADE;IAEFC,YAFE;IAGFC;EAHE,IAIF,IAAAC,6BAAA,EAAqB;IACrB1B,mBADqB;IAErBe,qBAFqB;IAGrBV;EAHqB,CAArB,CAJJ;EAUA,MAAMsB,UAAU,GAAGF,gBAAgB,IAAIF,mBAAmB,CAACrB,KAAD,CAAnB,IAA8B,CAAlC,CAAnC;EAEA,MAAM0B,aAAa,GAAG,IAAAC,SAAA,EAAI,CACtBrB,MAAM,CAAChC,KADe,EAEtB,EACI,IAAIsB,YAAY,GAAG;MAAEjB,mBAAmB,EAAEiB,YAAvB;MAAqCb,oBAAoB,EAAEa;IAA3D,CAAH,GAA+E,EAA/F,CADJ;IAEI,IAAI2B,gBAAgB,KAAKV,qBAArB,GAA6C;MAAEN,MAAM,EAAEgB;IAAV,CAA7C,GAA4E,EAAhF,CAFJ;IAGIK,SAAS,EAAEf;EAHf,CAFsB,EAOtBR,SAPsB,CAAJ,CAAtB;EAUA,oBACI,6BAAC,WAAD;IACI,eAAe,EAAEV,eADrB;IAEI,OAAO,EAAEyB,WAFb;IAGI,OAAO,EAAEpB,KAAK,IAAI,CAHtB;IAII,KAAK,EAAE,IAAA2B,SAAA,EAAI,CAACE,gBAAA,CAAWC,YAAZ,EAA0BxB,MAAM,CAACxC,IAAjC,CAAJ;EAJX,gBAMI,6BAAC,kBAAD;IAAW,UAAU,EAAE2D;EAAvB,GACK1B,UAAU,gBACP,6BAAC,YAAD;IACI,QAAQ,EAAEiB,sBADd;IAEI,KAAK,EAAEV,MAAM,CAAChB;EAFlB,GAIKS,UAJL,CADO,GAOP,IARR,eAUI,6BAAC,iBAAD;IACI,QAAQ,EAAEuB,YADd;IAEI,KAAK,EAAEI;EAFX,GAIK7B,QAJL,CAVJ,CANJ,CADJ;AA0BH;;AAAA"}

package/build/module/BottomSheet/BottomSheetNative.js

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Animated, useWindowDimensions } from 'react-native';
 import { BottomSheetBackdrop, BottomSheetModal, BottomSheetModalProvider, BottomSheetView } from '@gorhom/bottom-sheet';
-import { Column, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';
+import { Column, css, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';
 import { useTheme } from '@fountain-ui/styles';
 import TransparentBackdrop from './TransparentBackdrop';
 
@@ -12,6 +12,7 @@ const NoHandle = () => null;
 export default function BottomSheet(props) {
   const {
     backdropOpacity = 0.5,
+    backgroundStyle: backgroundStyleProp,
     borderRadius: borderRadiusProp,
     children,
     enableDynamicSizing = true,
@@ -19,7 +20,8 @@ export default function BottomSheet(props) {
     index,
     maxHeightNormalizedRatio = 0.8,
     onChange,
-    snapPoints = []
+    snapPoints = [],
+    style: styleProp
   } = props;
   const indexRef = useRef(-1);
   const bottomSheetRef = useRef(null);
@@ -68,19 +70,22 @@ export default function BottomSheet(props) {
   }, [index]);
   const theme = useTheme();
   const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;
-  const backgroundStyle = {
+  const backgroundStyle = css([{
     backgroundColor: theme.palette.surface.base,
     borderTopLeftRadius: borderRadius,
     borderTopRightRadius: borderRadius
-  };
-  const contentWrapperStyle = {
+  }, backgroundStyleProp]);
+  const contentWrapperStyle = css([{
+    backgroundColor: theme.palette.surface.base,
+    borderTopLeftRadius: borderRadius,
+    borderTopRightRadius: borderRadius,
     flexShrink: 1,
     maxHeight: maxDynamicContentSize,
     minHeight: 325,
     overflow: 'hidden',
     paddingBottom: theme.spacing(6),
     paddingTop: theme.spacing(5.5)
-  };
+  }, styleProp]);
   const isBackdropTransparent = backdropOpacity <= 0;
 
   const OpacityAwareBackdrop = props => /*#__PURE__*/React.createElement(BottomSheetBackdrop, _extends({}, props, {

package/build/module/BottomSheet/BottomSheetNative.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useRef","useState","Animated","useWindowDimensions","BottomSheetBackdrop","BottomSheetModal","BottomSheetModalProvider","BottomSheetView","Column","isNotAndroid12","useAnimatedValue","useTheme","TransparentBackdrop","NoHandle","BottomSheet","props","backdropOpacity","borderRadius","borderRadiusProp","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","indexRef","bottomSheetRef","height","windowHeight","topElementHeight","setTopElementHeight","maxDynamicContentSize","Math","round","handleTopElementLayout","event","nativeEvent","layout","handleChange","newIndex","current","handleDismiss","present","dismiss","snapToIndex","theme","shape","radius","xxl","backgroundStyle","backgroundColor","palette","surface","base","borderTopLeftRadius","borderTopRightRadius","contentWrapperStyle","flexShrink","maxHeight","minHeight","overflow","paddingBottom","spacing","paddingTop","isBackdropTransparent","OpacityAwareBackdrop","topElementOpacity","topElementAnimationStyle","opacity","topElementLocationStyle","position","width","bottom","onAnimate","fromIndex","toIndex","isVisible","timing","toValue","duration","useNativeDriver","start","Boolean","undefined"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Animated, LayoutChangeEvent, useWindowDimensions, ViewStyle } from 'react-native';\nimport {\n    BottomSheetBackdrop,\n    BottomSheetBackdropProps,\n    BottomSheetModal,\n    BottomSheetModalProvider,\n    BottomSheetView,\n} from '@gorhom/bottom-sheet';\nimport { Column, ExtendedStyle, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport type BottomSheetProps from './BottomSheetProps';\nimport TransparentBackdrop from './TransparentBackdrop';\n\nconst NoHandle = () => null;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity = 0.5,\n        borderRadius: borderRadiusProp,\n        children,\n        enableDynamicSizing = true,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.8,\n        onChange,\n        snapPoints = [],\n    } = props;\n\n    const indexRef = useRef<number>(-1);\n    const bottomSheetRef = useRef<BottomSheetModal | null>(null);\n\n    const { height: windowHeight } = useWindowDimensions();\n    const [topElementHeight, setTopElementHeight] = useState(0);\n\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;\n\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const handleChange = useCallback((newIndex: number) => {\n        indexRef.current = newIndex;\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    }, [onChange]);\n\n    const handleDismiss = useCallback(() => {\n        handleChange(-1);\n    }, [handleChange]);\n\n    useEffect(() => {\n        if (index === indexRef.current) {\n            return;\n        }\n\n        if (indexRef.current < 0 && index >= 0) {\n            bottomSheetRef.current?.present();\n        } else if (indexRef.current >= 0 && index < 0) {\n            bottomSheetRef.current?.dismiss();\n        } else {\n            // @ts-ignore\n            bottomSheetRef.current?.snapToIndex(index);\n        }\n    }, [index]);\n\n    const theme = useTheme();\n\n    const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;\n    const backgroundStyle = {\n        backgroundColor: theme.palette.surface.base,\n        borderTopLeftRadius: borderRadius,\n        borderTopRightRadius: borderRadius,\n    };\n\n    const contentWrapperStyle: ViewStyle = {\n        flexShrink: 1,\n        maxHeight: maxDynamicContentSize,\n        minHeight: 325,\n        overflow: 'hidden',\n        paddingBottom: theme.spacing(6),\n        paddingTop: theme.spacing(5.5),\n    };\n\n    const isBackdropTransparent = backdropOpacity <= 0;\n\n    const OpacityAwareBackdrop = (props: BottomSheetBackdropProps) => (\n        <BottomSheetBackdrop\n            {...props}\n            appearsOnIndex={0}\n            disappearsOnIndex={-1}\n            opacity={backdropOpacity}\n            pressBehavior={onChange ? 'close' : 'none'}\n        />\n    );\n\n    const topElementOpacity = useAnimatedValue(0);\n    const topElementAnimationStyle: Animated.WithAnimatedValue<ExtendedStyle> = { opacity: topElementOpacity };\n    const topElementLocationStyle: ExtendedStyle = {\n        position: 'absolute',\n        width: '100%',\n        bottom: 0,\n    };\n    const onAnimate = (fromIndex: number, toIndex: number) => {\n        const isVisible = toIndex > -1;\n\n        Animated.timing(topElementOpacity, {\n            toValue: isVisible ? 1 : 0,\n            duration: 0,\n            useNativeDriver: isNotAndroid12,\n        }).start();\n    };\n\n    return (\n        <BottomSheetModalProvider>\n            <BottomSheetModal\n                backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}\n                // @ts-ignore\n                backgroundStyle={backgroundStyle}\n                index={index}\n                handleComponent={NoHandle}\n                onChange={handleChange}\n                onDismiss={handleDismiss}\n                ref={bottomSheetRef}\n                snapPoints={snapPoints}\n                enablePanDownToClose={Boolean(onChange)}\n                enableDynamicSizing={enableDynamicSizing}\n                maxDynamicContentSize={maxDynamicContentSize}\n                detached={Boolean(topElement)}\n                onAnimate={topElement ? onAnimate : undefined}\n            >\n                {topElement ? (\n                    <Animated.View style={topElementAnimationStyle}>\n                        <Column\n                            onLayout={handleTopElementLayout}\n                            style={topElementLocationStyle}\n                        >\n                            {topElement}\n                        </Column>\n                    </Animated.View>\n                ) : null}\n\n                <BottomSheetView style={contentWrapperStyle}>\n                    {children}\n                </BottomSheetView>\n            </BottomSheetModal>\n        </BottomSheetModalProvider>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","useCallback","useEffect","useRef","useState","Animated","useWindowDimensions","BottomSheetBackdrop","BottomSheetModal","BottomSheetModalProvider","BottomSheetView","Column","css","isNotAndroid12","useAnimatedValue","useTheme","TransparentBackdrop","NoHandle","BottomSheet","props","backdropOpacity","backgroundStyle","backgroundStyleProp","borderRadius","borderRadiusProp","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","style","styleProp","indexRef","bottomSheetRef","height","windowHeight","topElementHeight","setTopElementHeight","maxDynamicContentSize","Math","round","handleTopElementLayout","event","nativeEvent","layout","handleChange","newIndex","current","handleDismiss","present","dismiss","snapToIndex","theme","shape","radius","xxl","backgroundColor","palette","surface","base","borderTopLeftRadius","borderTopRightRadius","contentWrapperStyle","flexShrink","maxHeight","minHeight","overflow","paddingBottom","spacing","paddingTop","isBackdropTransparent","OpacityAwareBackdrop","topElementOpacity","topElementAnimationStyle","opacity","topElementLocationStyle","position","width","bottom","onAnimate","fromIndex","toIndex","isVisible","timing","toValue","duration","useNativeDriver","start","Boolean","undefined"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Animated, LayoutChangeEvent, useWindowDimensions, ViewStyle } from 'react-native';\nimport {\n    BottomSheetBackdrop,\n    BottomSheetBackdropProps,\n    BottomSheetModal,\n    BottomSheetModalProvider,\n    BottomSheetView,\n} from '@gorhom/bottom-sheet';\nimport { Column, css, ExtendedStyle, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport type BottomSheetProps from './BottomSheetProps';\nimport TransparentBackdrop from './TransparentBackdrop';\n\nconst NoHandle = () => null;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity = 0.5,\n        backgroundStyle: backgroundStyleProp,\n        borderRadius: borderRadiusProp,\n        children,\n        enableDynamicSizing = true,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.8,\n        onChange,\n        snapPoints = [],\n        style: styleProp,\n    } = props;\n\n    const indexRef = useRef<number>(-1);\n    const bottomSheetRef = useRef<BottomSheetModal | null>(null);\n\n    const { height: windowHeight } = useWindowDimensions();\n    const [topElementHeight, setTopElementHeight] = useState(0);\n\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;\n\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const handleChange = useCallback((newIndex: number) => {\n        indexRef.current = newIndex;\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    }, [onChange]);\n\n    const handleDismiss = useCallback(() => {\n        handleChange(-1);\n    }, [handleChange]);\n\n    useEffect(() => {\n        if (index === indexRef.current) {\n            return;\n        }\n\n        if (indexRef.current < 0 && index >= 0) {\n            bottomSheetRef.current?.present();\n        } else if (indexRef.current >= 0 && index < 0) {\n            bottomSheetRef.current?.dismiss();\n        } else {\n            // @ts-ignore\n            bottomSheetRef.current?.snapToIndex(index);\n        }\n    }, [index]);\n\n    const theme = useTheme();\n\n    const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;\n    const backgroundStyle = css([\n        {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: borderRadius,\n            borderTopRightRadius: borderRadius,\n        },\n        backgroundStyleProp,\n    ]);\n\n    const contentWrapperStyle: ViewStyle = css([\n        {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: borderRadius,\n            borderTopRightRadius: borderRadius,\n            flexShrink: 1,\n            maxHeight: maxDynamicContentSize,\n            minHeight: 325,\n            overflow: 'hidden',\n            paddingBottom: theme.spacing(6),\n            paddingTop: theme.spacing(5.5),\n        },\n        styleProp,\n    ]);\n\n    const isBackdropTransparent = backdropOpacity <= 0;\n\n    const OpacityAwareBackdrop = (props: BottomSheetBackdropProps) => (\n        <BottomSheetBackdrop\n            {...props}\n            appearsOnIndex={0}\n            disappearsOnIndex={-1}\n            opacity={backdropOpacity}\n            pressBehavior={onChange ? 'close' : 'none'}\n        />\n    );\n\n    const topElementOpacity = useAnimatedValue(0);\n    const topElementAnimationStyle: Animated.WithAnimatedValue<ExtendedStyle> = { opacity: topElementOpacity };\n    const topElementLocationStyle: ExtendedStyle = {\n        position: 'absolute',\n        width: '100%',\n        bottom: 0,\n    };\n    const onAnimate = (fromIndex: number, toIndex: number) => {\n        const isVisible = toIndex > -1;\n\n        Animated.timing(topElementOpacity, {\n            toValue: isVisible ? 1 : 0,\n            duration: 0,\n            useNativeDriver: isNotAndroid12,\n        }).start();\n    };\n\n    return (\n        <BottomSheetModalProvider>\n            <BottomSheetModal\n                backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}\n                // @ts-ignore\n                backgroundStyle={backgroundStyle}\n                index={index}\n                handleComponent={NoHandle}\n                onChange={handleChange}\n                onDismiss={handleDismiss}\n                ref={bottomSheetRef}\n                snapPoints={snapPoints}\n                enablePanDownToClose={Boolean(onChange)}\n                enableDynamicSizing={enableDynamicSizing}\n                maxDynamicContentSize={maxDynamicContentSize}\n                detached={Boolean(topElement)}\n                onAnimate={topElement ? onAnimate : undefined}\n            >\n                {topElement ? (\n                    <Animated.View style={topElementAnimationStyle}>\n                        <Column\n                            onLayout={handleTopElementLayout}\n                            style={topElementLocationStyle}\n                        >\n                            {topElement}\n                        </Column>\n                    </Animated.View>\n                ) : null}\n\n                <BottomSheetView style={contentWrapperStyle}>\n                    {children}\n                </BottomSheetView>\n            </BottomSheetModal>\n        </BottomSheetModalProvider>\n    );\n};\n"],"mappings":"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"}

package/build/module/BottomSheet/BottomSheetProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["BottomSheetProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ComponentProps } from '@fountain-ui/core';\n\nexport default interface BottomSheetProps extends ComponentProps<{\n    /**\n     * Opacity for BackdropComponent\n     * @default 0.5\n     */\n    backdropOpacity?: number;\n\n    /**\n     * Border radius for bottom sheet\n     */\n    borderRadius?: number;\n\n    /**\n     * BottomSheet children, usually the included sub-components.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * Enable dynamic sizing for content size.\n     * @default true\n     */\n    enableDynamicSizing?: boolean;\n\n    /**\n     * Top element for displaying additional information on the bottom sheet.\n     */\n    topElement?: React.ReactNode;\n\n    /**\n     * Snap index. You could also provide -1 to bottom sheet in closed state.\n     */\n    index: number;\n\n    /**\n     * Maximum height(normalized value) of dialog\n     * ex. 30% => 0.3 / 90% => 0.9\n     * @default 0.8\n     */\n    maxHeightNormalizedRatio?: number;\n\n    /**\n     * Callback fired when the index is changed.\n     * Important! Use memoized value.\n     */\n    onChange?: (newIndex: number) => void;\n\n    /**\n     * Points for the bottom sheet to snap to, points should be sorted from bottom to top.\n     * Important! Use memoized value.\n     * Only number type or string type(~% format) can be used.\n     * @default []\n     */\n    snapPoints?: Array<number | string>;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["BottomSheetProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ComponentProps, ExtendedStyle } from '@fountain-ui/core';\n\nexport default interface BottomSheetProps extends ComponentProps<{\n    /**\n     * Opacity for BackdropComponent\n     * @default 0.5\n     */\n    backdropOpacity?: number;\n\n    /**\n     * View style to be applied to the background component. (only native)\n     */\n    backgroundStyle?: ExtendedStyle | ExtendedStyle[];\n\n    /**\n     * Border radius for bottom sheet\n     */\n    borderRadius?: number;\n\n    /**\n     * BottomSheet children, usually the included sub-components.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * Enable dynamic sizing for content size.\n     * @default true\n     */\n    enableDynamicSizing?: boolean;\n\n    /**\n     * Top element for displaying additional information on the bottom sheet.\n     */\n    topElement?: React.ReactNode;\n\n    /**\n     * Snap index. You could also provide -1 to bottom sheet in closed state.\n     */\n    index: number;\n\n    /**\n     * Maximum height(normalized value) of dialog\n     * ex. 30% => 0.3 / 90% => 0.9\n     * @default 0.8\n     */\n    maxHeightNormalizedRatio?: number;\n\n    /**\n     * Callback fired when the index is changed.\n     * Important! Use memoized value.\n     */\n    onChange?: (newIndex: number) => void;\n\n    /**\n     * Points for the bottom sheet to snap to, points should be sorted from bottom to top.\n     * Important! Use memoized value.\n     * Only number type or string type(~% format) can be used.\n     * @default []\n     */\n    snapPoints?: Array<number | string>;\n\n    /**\n     * View style to be applied to the content area.\n     */\n    style?: ExtendedStyle | ExtendedStyle[];\n}> {}\n"],"mappings":""}

package/build/module/BottomSheet/BottomSheetWeb.js

@@ -44,7 +44,8 @@ export default function BottomSheet(props) {
     index,
     maxHeightNormalizedRatio = 0.8,
     onChange,
-    snapPoints = []
+    snapPoints = [],
+    style: styleProp
   } = props;
   const styles = useStyles();
   const {
@@ -84,7 +85,7 @@ export default function BottomSheet(props) {
       height: highestSnapPoint
     } : {}),
     maxHeight: maxDynamicContentSize
-  }]);
+  }, styleProp]);
   return /*#__PURE__*/React.createElement(Modal, {
     backdropOpacity: backdropOpacity,
     onClose: handleClose,

package/build/module/BottomSheet/BottomSheetWeb.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useWindowDimensions","View","Column","css","Modal","StyleSheet","useTheme","AnimatedY","useDynamicSnapPoints","useStyles","theme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","backgroundColor","palette","surface","base","borderTopLeftRadius","shape","radius","xxl","borderTopRightRadius","flexGrow","minHeight","overflow","paddingBottom","spacing","paddingTop","topElementLocation","position","bottom","BottomSheet","props","backdropOpacity","borderRadius","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","styles","height","windowHeight","topElementHeight","setTopElementHeight","maxDynamicContentSize","Math","round","handleTopElementLayout","event","nativeEvent","layout","handleClose","convertedSnapPoints","handleLayout","highestSnapPoint","translateY","contentStyles","maxHeight","absoluteFill"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions, View } from 'react-native';\nimport { Column, css, Modal, StyleSheet, useTheme } from '@fountain-ui/core';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport AnimatedY from '../AnimatedY';\nimport type BottomSheetProps from './BottomSheetProps';\nimport useDynamicSnapPoints from './useDynamicSnapPoints';\n\ntype BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'topElementLocation'>;\n\nconst useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            justifyContent: 'flex-end',\n            zIndex: theme.zIndex.dialog,\n        },\n        animated: {\n            alignSelf: 'center',\n            maxWidth: 720,\n            width: '100%',\n        },\n        paper: {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: theme.shape.radius.xxl,\n            borderTopRightRadius: theme.shape.radius.xxl,\n            flexGrow: 1,\n            minHeight: 325,\n            overflow: 'hidden',\n            paddingBottom: theme.spacing(6),\n            paddingTop: theme.spacing(5.5),\n        },\n        topElementLocation: {\n            position: 'absolute',\n            bottom: 0,\n            width: '100%',\n        },\n    };\n};\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity,\n        borderRadius,\n        children,\n        enableDynamicSizing = true,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.8,\n        onChange,\n        snapPoints = [],\n    } = props;\n\n    const styles = useStyles();\n\n    const { height: windowHeight } = useWindowDimensions();\n\n    const [topElementHeight, setTopElementHeight] = useState(0);\n\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;\n\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const handleClose = () => {\n        if (onChange) {\n            onChange(-1);\n        }\n    };\n\n    const {\n        convertedSnapPoints,\n        handleLayout,\n        highestSnapPoint,\n    } = useDynamicSnapPoints({\n        enableDynamicSizing,\n        maxDynamicContentSize,\n        snapPoints,\n    });\n\n    const translateY = highestSnapPoint - (convertedSnapPoints[index] ?? 0);\n\n    const contentStyles = css([\n        styles.paper,\n        {\n            ...(borderRadius ? { borderTopLeftRadius: borderRadius, borderTopRightRadius: borderRadius } : {}),\n            ...(highestSnapPoint !== maxDynamicContentSize ? { height: highestSnapPoint } : {}),\n            maxHeight: maxDynamicContentSize,\n        },\n    ]);\n\n    return (\n        <Modal\n            backdropOpacity={backdropOpacity}\n            onClose={handleClose}\n            visible={index >= 0}\n            style={css([StyleSheet.absoluteFill, styles.root])}\n        >\n            <AnimatedY translateY={translateY}>\n                {topElement ? (\n                    <Column\n                        onLayout={handleTopElementLayout}\n                        style={styles.topElementLocation}\n                    >\n                        {topElement}\n                    </Column>\n                ) : null}\n\n                <View\n                    onLayout={handleLayout}\n                    style={contentStyles}\n                >\n                    {children}\n                </View>\n            </AnimatedY>\n        </Modal>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,SAA4BC,mBAA5B,EAAiDC,IAAjD,QAA6D,cAA7D;AACA,SAASC,MAAT,EAAiBC,GAAjB,EAAsBC,KAAtB,EAA6BC,UAA7B,EAAyCC,QAAzC,QAAyD,mBAAzD;AAEA,OAAOC,SAAP,MAAsB,cAAtB;AAEA,OAAOC,oBAAP,MAAiC,wBAAjC;;AAIA,MAAMC,SAAuC,GAAG,YAA+B;EAC3E,MAAMC,KAAK,GAAGJ,QAAQ,EAAtB;EAEA,OAAO;IACHK,IAAI,EAAE;MACFC,cAAc,EAAE,UADd;MAEFC,MAAM,EAAEH,KAAK,CAACG,MAAN,CAAaC;IAFnB,CADH;IAKHC,QAAQ,EAAE;MACNC,SAAS,EAAE,QADL;MAENC,QAAQ,EAAE,GAFJ;MAGNC,KAAK,EAAE;IAHD,CALP;IAUHC,KAAK,EAAE;MACHC,eAAe,EAAEV,KAAK,CAACW,OAAN,CAAcC,OAAd,CAAsBC,IADpC;MAEHC,mBAAmB,EAAEd,KAAK,CAACe,KAAN,CAAYC,MAAZ,CAAmBC,GAFrC;MAGHC,oBAAoB,EAAElB,KAAK,CAACe,KAAN,CAAYC,MAAZ,CAAmBC,GAHtC;MAIHE,QAAQ,EAAE,CAJP;MAKHC,SAAS,EAAE,GALR;MAMHC,QAAQ,EAAE,QANP;MAOHC,aAAa,EAAEtB,KAAK,CAACuB,OAAN,CAAc,CAAd,CAPZ;MAQHC,UAAU,EAAExB,KAAK,CAACuB,OAAN,CAAc,GAAd;IART,CAVJ;IAoBHE,kBAAkB,EAAE;MAChBC,QAAQ,EAAE,UADM;MAEhBC,MAAM,EAAE,CAFQ;MAGhBnB,KAAK,EAAE;IAHS;EApBjB,CAAP;AA0BH,CA7BD;;AA+BA,eAAe,SAASoB,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,eADE;IAEFC,YAFE;IAGFC,QAHE;IAIFC,mBAAmB,GAAG,IAJpB;IAKFC,UALE;IAMFC,KANE;IAOFC,wBAAwB,GAAG,GAPzB;IAQFC,QARE;IASFC,UAAU,GAAG;EATX,IAUFT,KAVJ;EAYA,MAAMU,MAAM,GAAGxC,SAAS,EAAxB;EAEA,MAAM;IAAEyC,MAAM,EAAEC;EAAV,IAA2BnD,mBAAmB,EAApD;EAEA,MAAM,CAACoD,gBAAD,EAAmBC,mBAAnB,IAA0CtD,QAAQ,CAAC,CAAD,CAAxD;EAEA,MAAMuD,qBAAqB,GAAGC,IAAI,CAACC,KAAL,CAAWL,YAAY,GAAGL,wBAA1B,IAAsDM,gBAApF;;EAEA,MAAMK,sBAAsB,GAAIC,KAAD,IAA8B;IACzD,MAAM;MAAER;IAAF,IAAaQ,KAAK,CAACC,WAAN,CAAkBC,MAArC;IACAP,mBAAmB,CAACH,MAAD,CAAnB;EACH,CAHD;;EAKA,MAAMW,WAAW,GAAG,MAAM;IACtB,IAAId,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAAC,CAAF,CAAR;IACH;EACJ,CAJD;;EAMA,MAAM;IACFe,mBADE;IAEFC,YAFE;IAGFC;EAHE,IAIFxD,oBAAoB,CAAC;IACrBmC,mBADqB;IAErBW,qBAFqB;IAGrBN;EAHqB,CAAD,CAJxB;EAUA,MAAMiB,UAAU,GAAGD,gBAAgB,IAAIF,mBAAmB,CAACjB,KAAD,CAAnB,IAA8B,CAAlC,CAAnC;EAEA,MAAMqB,aAAa,GAAG/D,GAAG,CAAC,CACtB8C,MAAM,CAAC9B,KADe,EAEtB,EACI,IAAIsB,YAAY,GAAG;MAAEjB,mBAAmB,EAAEiB,YAAvB;MAAqCb,oBAAoB,EAAEa;IAA3D,CAAH,GAA+E,EAA/F,CADJ;IAEI,IAAIuB,gBAAgB,KAAKV,qBAArB,GAA6C;MAAEJ,MAAM,EAAEc;IAAV,CAA7C,GAA4E,EAAhF,CAFJ;IAGIG,SAAS,EAAEb;EAHf,CAFsB,CAAD,CAAzB;EASA,oBACI,oBAAC,KAAD;IACI,eAAe,EAAEd,eADrB;IAEI,OAAO,EAAEqB,WAFb;IAGI,OAAO,EAAEhB,KAAK,IAAI,CAHtB;IAII,KAAK,EAAE1C,GAAG,CAAC,CAACE,UAAU,CAAC+D,YAAZ,EAA0BnB,MAAM,CAACtC,IAAjC,CAAD;EAJd,gBAMI,oBAAC,SAAD;IAAW,UAAU,EAAEsD;EAAvB,GACKrB,UAAU,gBACP,oBAAC,MAAD;IACI,QAAQ,EAAEa,sBADd;IAEI,KAAK,EAAER,MAAM,CAACd;EAFlB,GAIKS,UAJL,CADO,GAOP,IARR,eAUI,oBAAC,IAAD;IACI,QAAQ,EAAEmB,YADd;IAEI,KAAK,EAAEG;EAFX,GAIKxB,QAJL,CAVJ,CANJ,CADJ;AA0BH;AAAA"}
+{"version":3,"names":["React","useState","useWindowDimensions","View","Column","css","Modal","StyleSheet","useTheme","AnimatedY","useDynamicSnapPoints","useStyles","theme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","backgroundColor","palette","surface","base","borderTopLeftRadius","shape","radius","xxl","borderTopRightRadius","flexGrow","minHeight","overflow","paddingBottom","spacing","paddingTop","topElementLocation","position","bottom","BottomSheet","props","backdropOpacity","borderRadius","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","style","styleProp","styles","height","windowHeight","topElementHeight","setTopElementHeight","maxDynamicContentSize","Math","round","handleTopElementLayout","event","nativeEvent","layout","handleClose","convertedSnapPoints","handleLayout","highestSnapPoint","translateY","contentStyles","maxHeight","absoluteFill"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions, View } from 'react-native';\nimport { Column, css, Modal, StyleSheet, useTheme } from '@fountain-ui/core';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport AnimatedY from '../AnimatedY';\nimport type BottomSheetProps from './BottomSheetProps';\nimport useDynamicSnapPoints from './useDynamicSnapPoints';\n\ntype BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'topElementLocation'>;\n\nconst useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            justifyContent: 'flex-end',\n            zIndex: theme.zIndex.dialog,\n        },\n        animated: {\n            alignSelf: 'center',\n            maxWidth: 720,\n            width: '100%',\n        },\n        paper: {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: theme.shape.radius.xxl,\n            borderTopRightRadius: theme.shape.radius.xxl,\n            flexGrow: 1,\n            minHeight: 325,\n            overflow: 'hidden',\n            paddingBottom: theme.spacing(6),\n            paddingTop: theme.spacing(5.5),\n        },\n        topElementLocation: {\n            position: 'absolute',\n            bottom: 0,\n            width: '100%',\n        },\n    };\n};\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity,\n        borderRadius,\n        children,\n        enableDynamicSizing = true,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.8,\n        onChange,\n        snapPoints = [],\n        style: styleProp,\n    } = props;\n\n    const styles = useStyles();\n\n    const { height: windowHeight } = useWindowDimensions();\n\n    const [topElementHeight, setTopElementHeight] = useState(0);\n\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;\n\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const handleClose = () => {\n        if (onChange) {\n            onChange(-1);\n        }\n    };\n\n    const {\n        convertedSnapPoints,\n        handleLayout,\n        highestSnapPoint,\n    } = useDynamicSnapPoints({\n        enableDynamicSizing,\n        maxDynamicContentSize,\n        snapPoints,\n    });\n\n    const translateY = highestSnapPoint - (convertedSnapPoints[index] ?? 0);\n\n    const contentStyles = css([\n        styles.paper,\n        {\n            ...(borderRadius ? { borderTopLeftRadius: borderRadius, borderTopRightRadius: borderRadius } : {}),\n            ...(highestSnapPoint !== maxDynamicContentSize ? { height: highestSnapPoint } : {}),\n            maxHeight: maxDynamicContentSize,\n        },\n        styleProp,\n    ]);\n\n    return (\n        <Modal\n            backdropOpacity={backdropOpacity}\n            onClose={handleClose}\n            visible={index >= 0}\n            style={css([StyleSheet.absoluteFill, styles.root])}\n        >\n            <AnimatedY translateY={translateY}>\n                {topElement ? (\n                    <Column\n                        onLayout={handleTopElementLayout}\n                        style={styles.topElementLocation}\n                    >\n                        {topElement}\n                    </Column>\n                ) : null}\n\n                <View\n                    onLayout={handleLayout}\n                    style={contentStyles}\n                >\n                    {children}\n                </View>\n            </AnimatedY>\n        </Modal>\n    );\n};\n"],"mappings":"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"}

package/build/typescript/BottomSheet/BottomSheetProps.d.ts

@@ -1,11 +1,15 @@
 import React from 'react';
-import type { ComponentProps } from '@fountain-ui/core';
+import type { ComponentProps, ExtendedStyle } from '@fountain-ui/core';
 export default interface BottomSheetProps extends ComponentProps<{
     /**
      * Opacity for BackdropComponent
      * @default 0.5
      */
     backdropOpacity?: number;
+    /**
+     * View style to be applied to the background component. (only native)
+     */
+    backgroundStyle?: ExtendedStyle | ExtendedStyle[];
     /**
      * Border radius for bottom sheet
      */
@@ -45,5 +49,9 @@ export default interface BottomSheetProps extends ComponentProps<{
      * @default []
      */
     snapPoints?: Array<number | string>;
+    /**
+     * View style to be applied to the content area.
+     */
+    style?: ExtendedStyle | ExtendedStyle[];
 }> {
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "3.0.0-alpha.7",
+  "version": "3.0.0-alpha.9",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "edefc67f0ec818a5590cf7357f4f5154121e4e31"
+  "gitHead": "f8f3251647c5c4742bfbefff5aeba7fb2a076c55"
 }

package/src/BottomSheet/BottomSheetNative.tsx

@@ -7,7 +7,7 @@ import {
     BottomSheetModalProvider,
     BottomSheetView,
 } from '@gorhom/bottom-sheet';
-import { Column, ExtendedStyle, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';
+import { Column, css, ExtendedStyle, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';
 import { useTheme } from '@fountain-ui/styles';
 import type BottomSheetProps from './BottomSheetProps';
 import TransparentBackdrop from './TransparentBackdrop';
@@ -17,6 +17,7 @@ const NoHandle = () => null;
 export default function BottomSheet(props: BottomSheetProps) {
     const {
         backdropOpacity = 0.5,
+        backgroundStyle: backgroundStyleProp,
         borderRadius: borderRadiusProp,
         children,
         enableDynamicSizing = true,
@@ -25,6 +26,7 @@ export default function BottomSheet(props: BottomSheetProps) {
         maxHeightNormalizedRatio = 0.8,
         onChange,
         snapPoints = [],
+        style: styleProp,
     } = props;
 
     const indexRef = useRef<number>(-1);
@@ -70,20 +72,29 @@ export default function BottomSheet(props: BottomSheetProps) {
     const theme = useTheme();
 
     const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;
-    const backgroundStyle = {
-        backgroundColor: theme.palette.surface.base,
-        borderTopLeftRadius: borderRadius,
-        borderTopRightRadius: borderRadius,
-    };
-
-    const contentWrapperStyle: ViewStyle = {
-        flexShrink: 1,
-        maxHeight: maxDynamicContentSize,
-        minHeight: 325,
-        overflow: 'hidden',
-        paddingBottom: theme.spacing(6),
-        paddingTop: theme.spacing(5.5),
-    };
+    const backgroundStyle = css([
+        {
+            backgroundColor: theme.palette.surface.base,
+            borderTopLeftRadius: borderRadius,
+            borderTopRightRadius: borderRadius,
+        },
+        backgroundStyleProp,
+    ]);
+
+    const contentWrapperStyle: ViewStyle = css([
+        {
+            backgroundColor: theme.palette.surface.base,
+            borderTopLeftRadius: borderRadius,
+            borderTopRightRadius: borderRadius,
+            flexShrink: 1,
+            maxHeight: maxDynamicContentSize,
+            minHeight: 325,
+            overflow: 'hidden',
+            paddingBottom: theme.spacing(6),
+            paddingTop: theme.spacing(5.5),
+        },
+        styleProp,
+    ]);
 
     const isBackdropTransparent = backdropOpacity <= 0;
 

package/src/BottomSheet/BottomSheetProps.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ComponentProps } from '@fountain-ui/core';
+import type { ComponentProps, ExtendedStyle } from '@fountain-ui/core';
 
 export default interface BottomSheetProps extends ComponentProps<{
     /**
@@ -8,6 +8,11 @@ export default interface BottomSheetProps extends ComponentProps<{
      */
     backdropOpacity?: number;
 
+    /**
+     * View style to be applied to the background component. (only native)
+     */
+    backgroundStyle?: ExtendedStyle | ExtendedStyle[];
+
     /**
      * Border radius for bottom sheet
      */
@@ -54,4 +59,9 @@ export default interface BottomSheetProps extends ComponentProps<{
      * @default []
      */
     snapPoints?: Array<number | string>;
+
+    /**
+     * View style to be applied to the content area.
+     */
+    style?: ExtendedStyle | ExtendedStyle[];
 }> {}

package/src/BottomSheet/BottomSheetWeb.tsx

@@ -50,6 +50,7 @@ export default function BottomSheet(props: BottomSheetProps) {
         maxHeightNormalizedRatio = 0.8,
         onChange,
         snapPoints = [],
+        style: styleProp,
     } = props;
 
     const styles = useStyles();
@@ -90,6 +91,7 @@ export default function BottomSheet(props: BottomSheetProps) {
             ...(highestSnapPoint !== maxDynamicContentSize ? { height: highestSnapPoint } : {}),
             maxHeight: maxDynamicContentSize,
         },
+        styleProp,
     ]);
 
     return (