@fountain-ui/lab 2.0.0-beta.82 → 2.0.0-beta.83

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     * 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     * Area to be fixed on the top of the bottom sheet.\n     */\n    header?: React.ReactNode;\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.9\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     * Disable default backgroundColor.\n     * @default false\n     */\n    disableDefaultBackgroundColor?: boolean;\n\n    /**\n     * Disable default shadow.\n     * @default false\n     */\n    disableDefaultShadow?: boolean;\n}> {}\n"],"mappings":""}
+{"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     * Area to be fixed on the top of the bottom sheet.\n     */\n    header?: React.ReactNode;\n\n    /**\n     * If set to true, a border will be applied to the header area when the bottom sheet content is scrollable.\n     * This visually separates the header from the scrollable content.\n     */\n    enableScrollableHeaderBorder?: boolean;\n\n    /**\n     * Area to be fixed on the bottom of the bottom sheet.\n     */\n    stickyBottomElement?: React.ReactNode;\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.9\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":""}

package/build/module/BottomSheet/BottomSheetWeb.js

@@ -1,11 +1,21 @@
-import React from 'react';
-import { ScrollView } from 'react-native';
-import { Column, Modal, Paper, StyleSheet, css, useTheme } from '@fountain-ui/core';
+import React, { useLayoutEffect, useMemo, useState } from 'react';
+import { ScrollView, useWindowDimensions, View } from 'react-native';
+import { Column, css, Modal, Paper, StyleSheet, useElevationStyle, useTheme } from '@fountain-ui/core';
 import AnimatedY from '../AnimatedY';
 import useDynamicSnapPoints from './useDynamicSnapPoints';
 
+const createHeightLayoutHandler = setHeight => {
+  return event => {
+    const {
+      height
+    } = event.nativeEvent.layout;
+    setHeight(height);
+  };
+};
+
 const useStyles = function () {
   const theme = useTheme();
+  const stickyBottomElementShadow = useElevationStyle(8);
   return {
     root: {
       justifyContent: 'flex-end',
@@ -28,25 +38,51 @@ const useStyles = function () {
       position: 'absolute',
       bottom: 0,
       width: '100%'
-    }
+    },
+    headerContainer: {
+      backgroundColor: theme.palette.paper.default
+    },
+    headerBorder: {
+      borderBottomWidth: 0.5,
+      borderBottomColor: theme.palette.divider
+    },
+    stickyBottomElement: {
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      backgroundColor: theme.palette.paper.default
+    },
+    stickyBottomElementShadow
   };
 };
 
 export default function BottomSheet(props) {
   const {
     backdropOpacity,
+    borderRadius,
     children,
     enableDynamicSizing = true,
     header,
+    stickyBottomElement,
     topElement,
     index,
     maxHeightNormalizedRatio = 0.9,
     onChange,
     snapPoints = [],
-    disableDefaultBackgroundColor = false,
-    disableDefaultShadow = false
+    enableScrollableHeaderBorder = false
   } = props;
   const styles = useStyles();
+  const {
+    height: windowHeight
+  } = useWindowDimensions();
+  const [topElementHeight, setTopElementHeight] = useState(0);
+  const [stickyBottomElementHeight, setStickyBottomElementHeight] = useState(0);
+  const [contentHeight, setContentHeight] = useState(0);
+  const [isScrollable, setIsScrollable] = useState(false);
+  const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;
+  const handleTopElementLayout = createHeightLayoutHandler(setTopElementHeight);
+  const handleStickyBottomElementLayout = createHeightLayoutHandler(setStickyBottomElementHeight);
 
   const handleClose = () => {
     if (onChange) {
@@ -64,9 +100,27 @@ export default function BottomSheet(props) {
     snapPoints
   });
   const translateY = highestSnapPoint - (convertedSnapPoints[index] ?? 0);
-  const paperStyles = [styles.paper, {
-    height: highestSnapPoint
+  const adjustedContentHeight = useMemo(() => {
+    const adjustedHighestSnapPoint = highestSnapPoint + stickyBottomElementHeight;
+    return Math.min(maxDynamicContentSize, adjustedHighestSnapPoint);
+  }, [highestSnapPoint, stickyBottomElementHeight]);
+  const contentStyles = [styles.paper, borderRadius ? {
+    borderTopLeftRadius: borderRadius,
+    borderTopRightRadius: borderRadius
+  } : {}, {
+    height: adjustedContentHeight,
+    maxHeight: maxDynamicContentSize
   }];
+  const headerStyles = [styles.headerContainer, isScrollable && enableScrollableHeaderBorder ? styles.headerBorder : {}];
+  const stickyBottomElementStyles = [styles.stickyBottomElement, isScrollable ? styles.stickyBottomElementShadow : {}];
+  useLayoutEffect(() => {
+    if (contentHeight === 0 || highestSnapPoint === 0) {
+      return;
+    }
+
+    const adjustedHighestSnapPoint = highestSnapPoint + stickyBottomElementHeight;
+    setIsScrollable(adjustedHighestSnapPoint > maxDynamicContentSize);
+  }, [contentHeight, highestSnapPoint, stickyBottomElementHeight, maxDynamicContentSize]);
   return /*#__PURE__*/React.createElement(Modal, {
     backdropOpacity: backdropOpacity,
     onClose: handleClose,
@@ -76,15 +130,26 @@ export default function BottomSheet(props) {
     style: styles.animated,
     translateY: translateY
   }, topElement ? /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(Column, {
+    onLayout: handleTopElementLayout,
     style: styles.topElementLocation
   }, topElement)) : null, /*#__PURE__*/React.createElement(Paper, {
-    elevation: disableDefaultShadow ? 0 : 12,
-    style: paperStyles,
-    colorValue: disableDefaultBackgroundColor ? '#ffffff00' : undefined
+    elevation: 12,
+    style: contentStyles
   }, /*#__PURE__*/React.createElement(ScrollView, {
-    onContentSizeChange: handleContentSizeChange,
-    stickyHeaderIndices: header ? [0] : undefined
-  }, header, children))));
+    onContentSizeChange: (contentWidth, contentHeight) => {
+      setContentHeight(contentHeight);
+      handleContentSizeChange(contentWidth, contentHeight);
+    },
+    stickyHeaderIndices: header ? [0] : undefined,
+    style: {
+      paddingBottom: stickyBottomElementHeight
+    }
+  }, header ? /*#__PURE__*/React.createElement(View, {
+    style: headerStyles
+  }, header) : null, children), stickyBottomElement ? /*#__PURE__*/React.createElement(Column, {
+    style: stickyBottomElementStyles,
+    onLayout: handleStickyBottomElementLayout
+  }, stickyBottomElement) : null)));
 }
 ;
 //# sourceMappingURL=BottomSheetWeb.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","ScrollView","Column","Modal","Paper","StyleSheet","css","useTheme","AnimatedY","useDynamicSnapPoints","useStyles","theme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","borderTopLeftRadius","shape","roundnessExtra","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","flexGrow","overflow","topElementLocation","position","bottom","BottomSheet","props","backdropOpacity","children","enableDynamicSizing","header","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","disableDefaultBackgroundColor","disableDefaultShadow","styles","handleClose","convertedSnapPoints","handleContentSizeChange","highestSnapPoint","translateY","paperStyles","height","absoluteFill","undefined"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React from 'react';\nimport { ScrollView } from 'react-native';\nimport { Column, Modal, Paper, StyleSheet, css, 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            borderTopLeftRadius: theme.shape.roundnessExtra,\n            borderTopRightRadius: theme.shape.roundnessExtra,\n            borderBottomLeftRadius: 0,\n            borderBottomRightRadius: 0,\n            flexGrow: 1,\n            overflow: 'hidden',\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        children,\n        enableDynamicSizing = true,\n        header,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.9,\n        onChange,\n        snapPoints = [],\n        disableDefaultBackgroundColor = false,\n        disableDefaultShadow = false,\n    } = props;\n\n    const styles = useStyles();\n\n    const handleClose = () => {\n        if (onChange) {\n            onChange(-1);\n        }\n    };\n\n    const {\n        convertedSnapPoints,\n        handleContentSizeChange,\n        highestSnapPoint,\n    } = useDynamicSnapPoints({\n        enableDynamicSizing,\n        maxHeightNormalizedRatio,\n        snapPoints,\n    });\n\n    const translateY = highestSnapPoint - (convertedSnapPoints[index] ?? 0);\n\n    const paperStyles = [\n        styles.paper,\n        { height: highestSnapPoint },\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\n                style={styles.animated}\n                translateY={translateY}\n            >\n                {topElement ? (\n                    <Column>\n                        <Column style={styles.topElementLocation}>\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <Paper\n                    elevation={disableDefaultShadow ? 0 : 12}\n                    style={paperStyles}\n                    colorValue={disableDefaultBackgroundColor ? '#ffffff00' : undefined}\n                >\n                    <ScrollView\n                        onContentSizeChange={handleContentSizeChange}\n                        stickyHeaderIndices={header ? [0] : undefined}\n                    >\n                        {header}\n\n                        {children}\n                    </ScrollView>\n                </Paper>\n            </AnimatedY>\n        </Modal>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","useLayoutEffect","useMemo","useState","ScrollView","useWindowDimensions","View","Column","css","Modal","Paper","StyleSheet","useElevationStyle","useTheme","AnimatedY","useDynamicSnapPoints","createHeightLayoutHandler","setHeight","event","height","nativeEvent","layout","useStyles","theme","stickyBottomElementShadow","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","borderTopLeftRadius","shape","roundnessExtra","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","flexGrow","overflow","topElementLocation","position","bottom","headerContainer","backgroundColor","palette","default","headerBorder","borderBottomWidth","borderBottomColor","divider","stickyBottomElement","left","right","BottomSheet","props","backdropOpacity","borderRadius","children","enableDynamicSizing","header","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","enableScrollableHeaderBorder","styles","windowHeight","topElementHeight","setTopElementHeight","stickyBottomElementHeight","setStickyBottomElementHeight","contentHeight","setContentHeight","isScrollable","setIsScrollable","maxDynamicContentSize","Math","round","handleTopElementLayout","handleStickyBottomElementLayout","handleClose","convertedSnapPoints","handleContentSizeChange","highestSnapPoint","translateY","adjustedContentHeight","adjustedHighestSnapPoint","min","contentStyles","maxHeight","headerStyles","stickyBottomElementStyles","absoluteFill","contentWidth","undefined","paddingBottom"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React, { useLayoutEffect, useMemo, useState } from 'react';\nimport { LayoutChangeEvent, ScrollView, useWindowDimensions, View } from 'react-native';\nimport { Column, css, Modal, Paper, StyleSheet, useElevationStyle, 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\nconst createHeightLayoutHandler = (setHeight: React.Dispatch<React.SetStateAction<number>>) => {\n    return (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setHeight(height);\n    };\n}\n\ntype BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'topElementLocation' | 'headerContainer' | 'headerBorder' | 'stickyBottomElement' | 'stickyBottomElementShadow'>;\n\nconst useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {\n    const theme = useTheme();\n    const stickyBottomElementShadow = useElevationStyle(8);\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            borderTopLeftRadius: theme.shape.roundnessExtra,\n            borderTopRightRadius: theme.shape.roundnessExtra,\n            borderBottomLeftRadius: 0,\n            borderBottomRightRadius: 0,\n            flexGrow: 1,\n            overflow: 'hidden',\n        },\n        topElementLocation: {\n            position: 'absolute',\n            bottom: 0,\n            width: '100%',\n        },\n        headerContainer: {\n            backgroundColor: theme.palette.paper.default,\n        },\n        headerBorder: {\n            borderBottomWidth: 0.5,\n            borderBottomColor: theme.palette.divider,\n        },\n        stickyBottomElement: {\n            position: 'absolute',\n            bottom: 0,\n            left: 0,\n            right: 0,\n            backgroundColor: theme.palette.paper.default,\n        },\n        stickyBottomElementShadow,\n    };\n};\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity,\n        borderRadius,\n        children,\n        enableDynamicSizing = true,\n        header,\n        stickyBottomElement,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.9,\n        onChange,\n        snapPoints = [],\n        enableScrollableHeaderBorder = false,\n    } = props;\n\n    const styles = useStyles();\n\n    const { height: windowHeight } = useWindowDimensions();\n\n    const [topElementHeight, setTopElementHeight] = useState(0);\n    const [stickyBottomElementHeight, setStickyBottomElementHeight] = useState(0);\n    const [contentHeight, setContentHeight] = useState(0);\n    const [isScrollable, setIsScrollable] = useState(false);\n\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;\n\n    const handleTopElementLayout = createHeightLayoutHandler(setTopElementHeight);\n    const handleStickyBottomElementLayout = createHeightLayoutHandler(setStickyBottomElementHeight);\n\n    const handleClose = () => {\n        if (onChange) {\n            onChange(-1);\n        }\n    };\n\n    const {\n        convertedSnapPoints,\n        handleContentSizeChange,\n        highestSnapPoint,\n    } = useDynamicSnapPoints({\n        enableDynamicSizing,\n        maxHeightNormalizedRatio,\n        snapPoints,\n    });\n\n    const translateY = highestSnapPoint - (convertedSnapPoints[index] ?? 0);\n\n    const adjustedContentHeight = useMemo(() => {\n        const adjustedHighestSnapPoint = highestSnapPoint + stickyBottomElementHeight;\n\n        return Math.min(maxDynamicContentSize, adjustedHighestSnapPoint);\n    }, [highestSnapPoint, stickyBottomElementHeight]);\n\n    const contentStyles = [\n        styles.paper,\n        borderRadius ? { borderTopLeftRadius: borderRadius, borderTopRightRadius: borderRadius } : {},\n        { height: adjustedContentHeight, maxHeight: maxDynamicContentSize },\n    ];\n\n    const headerStyles = [\n        styles.headerContainer,\n        isScrollable && enableScrollableHeaderBorder ? styles.headerBorder : {},\n    ];\n\n    const stickyBottomElementStyles = [\n        styles.stickyBottomElement,\n        isScrollable ? styles.stickyBottomElementShadow : {},\n    ];\n\n    useLayoutEffect(() => {\n        if (contentHeight === 0 || highestSnapPoint === 0) {\n            return;\n        }\n\n        const adjustedHighestSnapPoint = highestSnapPoint + stickyBottomElementHeight;\n        setIsScrollable(adjustedHighestSnapPoint > maxDynamicContentSize);\n    }, [contentHeight, highestSnapPoint, stickyBottomElementHeight, maxDynamicContentSize]);\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\n                style={styles.animated}\n                translateY={translateY}\n            >\n                {topElement ? (\n                    <Column>\n                        <Column\n                            onLayout={handleTopElementLayout}\n                            style={styles.topElementLocation}\n                        >\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <Paper\n                    elevation={12}\n                    style={contentStyles}\n                >\n                    <ScrollView\n                        onContentSizeChange={(contentWidth: number, contentHeight: number) => {\n                            setContentHeight(contentHeight);\n                            handleContentSizeChange(contentWidth, contentHeight);\n                        }}\n                        stickyHeaderIndices={header ? [0] : undefined}\n                        style={{ paddingBottom: stickyBottomElementHeight }}\n                    >\n                        {header ? (\n                            <View style={headerStyles}>\n                                {header}\n                            </View>\n                        ): null}\n\n                        {children}\n                    </ScrollView>\n\n                    {stickyBottomElement ? (\n                        <Column\n                            style={stickyBottomElementStyles}\n                            onLayout={handleStickyBottomElementLayout}\n                        >\n                            {stickyBottomElement}\n                        </Column>\n                    ): null}\n                </Paper>\n            </AnimatedY>\n        </Modal>\n    );\n};\n"],"mappings":"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"}

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

@@ -6,6 +6,10 @@ export default interface BottomSheetProps extends ComponentProps<{
      * @default 0.5
      */
     backdropOpacity?: number;
+    /**
+     * Border radius for bottom sheet
+     */
+    borderRadius?: number;
     /**
      * BottomSheet children, usually the included sub-components.
      */
@@ -19,6 +23,15 @@ export default interface BottomSheetProps extends ComponentProps<{
      * Area to be fixed on the top of the bottom sheet.
      */
     header?: React.ReactNode;
+    /**
+     * If set to true, a border will be applied to the header area when the bottom sheet content is scrollable.
+     * This visually separates the header from the scrollable content.
+     */
+    enableScrollableHeaderBorder?: boolean;
+    /**
+     * Area to be fixed on the bottom of the bottom sheet.
+     */
+    stickyBottomElement?: React.ReactNode;
     /**
      * Top element for displaying additional information on the bottom sheet.
      */
@@ -45,15 +58,5 @@ export default interface BottomSheetProps extends ComponentProps<{
      * @default []
      */
     snapPoints?: Array<number | string>;
-    /**
-     * Disable default backgroundColor.
-     * @default false
-     */
-    disableDefaultBackgroundColor?: boolean;
-    /**
-     * Disable default shadow.
-     * @default false
-     */
-    disableDefaultShadow?: boolean;
 }> {
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "2.0.0-beta.82",
+  "version": "2.0.0-beta.83",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "43b797c06d530dd485c786adcfcef99dc042de26"
+  "gitHead": "dfa417385224924740cfd4438d32a3fbff88cb9c"
 }

package/src/BottomSheet/BottomSheetNative.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
-import { Animated, Platform, useWindowDimensions, View } from 'react-native';
-import { Column, useAnimatedValue, ExtendedStyle, isNotAndroid12 } from '@fountain-ui/core';
-import { useTheme } from '@fountain-ui/styles';
+import { Animated, LayoutChangeEvent, Platform, useWindowDimensions, View, ViewStyle } from 'react-native';
 import {
     BottomSheetBackdrop,
     BottomSheetBackdropProps,
@@ -9,31 +7,48 @@ import {
     BottomSheetModalProvider,
     BottomSheetScrollView,
 } from '@gorhom/bottom-sheet';
+import { Column, ExtendedStyle, isNotAndroid12, useAnimatedValue, useElevationStyle } from '@fountain-ui/core';
+import { useTheme } from '@fountain-ui/styles';
 import type BottomSheetProps from './BottomSheetProps';
 import TransparentBackdrop from './TransparentBackdrop';
 
 const NoHandle = () => null;
 
+const createHeightLayoutHandler = (setHeight: React.Dispatch<React.SetStateAction<number>>) => {
+    return (event: LayoutChangeEvent) => {
+        const { height } = event.nativeEvent.layout;
+        setHeight(height);
+    };
+}
+
 export default function BottomSheet(props: BottomSheetProps) {
     const {
         backdropOpacity = 0.5,
+        borderRadius: borderRadiusProp,
         children,
         enableDynamicSizing = true,
         header,
+        stickyBottomElement,
         topElement,
         index,
         maxHeightNormalizedRatio = 0.9,
         onChange,
         snapPoints = [],
-        disableDefaultBackgroundColor = false,
-        disableDefaultShadow = false,
+        enableScrollableHeaderBorder = false,
     } = props;
 
     const indexRef = React.useRef<number>(-1);
     const bottomSheetRef = React.useRef<BottomSheetModal | null>(null);
 
     const { height: windowHeight } = useWindowDimensions();
-    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio);
+    const [isScrollable, setIsScrollable] = React.useState(false);
+    const [topElementHeight, setTopElementHeight] = React.useState(0);
+    const [stickyBottomElementHeight, setStickyBottomElementHeight] = React.useState(0);
+
+    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;
+
+    const handleTopElementLayout = createHeightLayoutHandler(setTopElementHeight);
+    const handleStickyBottomElementLayout = createHeightLayoutHandler(setStickyBottomElementHeight);
 
     const handleChange = React.useCallback((newIndex: number) => {
         indexRef.current = newIndex;
@@ -64,25 +79,27 @@ export default function BottomSheet(props: BottomSheetProps) {
 
     const theme = useTheme();
     const shadow = theme.shadow[12];
+    const borderRadius = borderRadiusProp ?? theme.shape.roundnessExtra;
     const modalStyle = {
         backgroundColor: '#ffffff00',
-        borderTopLeftRadius: theme.shape.roundnessExtra,
-        borderTopRightRadius: theme.shape.roundnessExtra,
-        ...(disableDefaultShadow ? {} : Platform.select<object>({
+        borderTopLeftRadius: borderRadius,
+        borderTopRightRadius: borderRadius,
+        ...Platform.select<object>({
             android: shadow?.elevation,
             ios: shadow?.shadow,
             web: shadow?.boxShadow,
-        })),
+        }),
     };
+    const backgroundColor = theme.palette.paper.default;
     const backgroundStyle = {
-        backgroundColor: disableDefaultBackgroundColor ? '#ffffff00' : theme.palette.paper.default,
-        borderTopLeftRadius: theme.shape.roundnessExtra,
-        borderTopRightRadius: theme.shape.roundnessExtra,
+        backgroundColor,
+        borderTopLeftRadius: borderRadius,
+        borderTopRightRadius: borderRadius,
     };
-    const contentWrapperStyle = {
+    const contentWrapperStyle: ViewStyle = {
         flex: 1,
-        borderTopLeftRadius: theme.shape.roundnessExtra,
-        borderTopRightRadius: theme.shape.roundnessExtra,
+        borderTopLeftRadius: borderRadius,
+        borderTopRightRadius: borderRadius,
         overflow: 'hidden',
     };
 
@@ -115,6 +132,33 @@ export default function BottomSheet(props: BottomSheetProps) {
         }).start();
     };
 
+    const handleContentSizeChange = (_: number, contentHeight: number) => {
+        setIsScrollable(contentHeight > maxDynamicContentSize);
+    };
+
+    const headerStyle = {
+        backgroundColor,
+        ...(isScrollable && enableScrollableHeaderBorder ? {
+            borderBottomWidth: 0.5,
+            borderBottomColor: theme.palette.divider,
+        }: {})
+    }
+
+    const childrenStyle = {
+        backgroundColor,
+        paddingBottom: stickyBottomElementHeight,
+    }
+
+    const stickyBottomElementShadow = useElevationStyle(8);
+
+    const stickyBottomElementStyle = {
+        backgroundColor: theme.palette.paper.default,
+        position: 'absolute',
+        width: '100%',
+        bottom: 0,
+        ...(isScrollable ? stickyBottomElementShadow : {}),
+    }
+
     return (
         <BottomSheetModalProvider>
             <BottomSheetModal
@@ -136,22 +180,38 @@ export default function BottomSheet(props: BottomSheetProps) {
             >
                 {topElement ? (
                     <Animated.View style={topElementAnimationStyle}>
-                        <Column style={topElementLocationStyle}>
+                        <Column
+                            onLayout={handleTopElementLayout}
+                            style={topElementLocationStyle}
+                        >
                             {topElement}
                         </Column>
                     </Animated.View>
                 ) : null}
 
-                {/* @ts-ignore */}
                 <View style={contentWrapperStyle}>
                     <BottomSheetScrollView
                         bounces={false}
                         stickyHeaderIndices={header ? [0] : undefined}
+                        onContentSizeChange={handleContentSizeChange}
                     >
-                        {header}
+                        <View style={headerStyle}>
+                            {header}
+                        </View>
 
-                        {children}
+                        <View style={childrenStyle}>
+                            {children}
+                        </View>
                     </BottomSheetScrollView>
+
+                    {stickyBottomElement ? (
+                        <View
+                            style={stickyBottomElementStyle}
+                            onLayout={handleStickyBottomElementLayout}
+                        >
+                            {stickyBottomElement}
+                        </View>
+                    ): null}
                 </View>
             </BottomSheetModal>
         </BottomSheetModalProvider>

package/src/BottomSheet/BottomSheetProps.ts

@@ -8,6 +8,11 @@ export default interface BottomSheetProps extends ComponentProps<{
      */
     backdropOpacity?: number;
 
+    /**
+     * Border radius for bottom sheet
+     */
+    borderRadius?: number;
+
     /**
      * BottomSheet children, usually the included sub-components.
      */
@@ -24,6 +29,17 @@ export default interface BottomSheetProps extends ComponentProps<{
      */
     header?: React.ReactNode;
 
+    /**
+     * If set to true, a border will be applied to the header area when the bottom sheet content is scrollable.
+     * This visually separates the header from the scrollable content.
+     */
+    enableScrollableHeaderBorder?: boolean;
+
+    /**
+     * Area to be fixed on the bottom of the bottom sheet.
+     */
+    stickyBottomElement?: React.ReactNode;
+
     /**
      * Top element for displaying additional information on the bottom sheet.
      */
@@ -54,16 +70,4 @@ export default interface BottomSheetProps extends ComponentProps<{
      * @default []
      */
     snapPoints?: Array<number | string>;
-
-    /**
-     * Disable default backgroundColor.
-     * @default false
-     */
-    disableDefaultBackgroundColor?: boolean;
-
-    /**
-     * Disable default shadow.
-     * @default false
-     */
-    disableDefaultShadow?: boolean;
 }> {}

package/src/BottomSheet/BottomSheetWeb.tsx

@@ -1,15 +1,23 @@
-import React from 'react';
-import { ScrollView } from 'react-native';
-import { Column, Modal, Paper, StyleSheet, css, useTheme } from '@fountain-ui/core';
+import React, { useLayoutEffect, useMemo, useState } from 'react';
+import { LayoutChangeEvent, ScrollView, useWindowDimensions, View } from 'react-native';
+import { Column, css, Modal, Paper, StyleSheet, useElevationStyle, useTheme } from '@fountain-ui/core';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import AnimatedY from '../AnimatedY';
 import type BottomSheetProps from './BottomSheetProps';
 import useDynamicSnapPoints from './useDynamicSnapPoints';
 
-type BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'topElementLocation'>;
+const createHeightLayoutHandler = (setHeight: React.Dispatch<React.SetStateAction<number>>) => {
+    return (event: LayoutChangeEvent) => {
+        const { height } = event.nativeEvent.layout;
+        setHeight(height);
+    };
+}
+
+type BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'topElementLocation' | 'headerContainer' | 'headerBorder' | 'stickyBottomElement' | 'stickyBottomElementShadow'>;
 
 const useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {
     const theme = useTheme();
+    const stickyBottomElementShadow = useElevationStyle(8);
 
     return {
         root: {
@@ -34,26 +42,54 @@ const useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {
             bottom: 0,
             width: '100%',
         },
+        headerContainer: {
+            backgroundColor: theme.palette.paper.default,
+        },
+        headerBorder: {
+            borderBottomWidth: 0.5,
+            borderBottomColor: theme.palette.divider,
+        },
+        stickyBottomElement: {
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            backgroundColor: theme.palette.paper.default,
+        },
+        stickyBottomElementShadow,
     };
 };
 
 export default function BottomSheet(props: BottomSheetProps) {
     const {
         backdropOpacity,
+        borderRadius,
         children,
         enableDynamicSizing = true,
         header,
+        stickyBottomElement,
         topElement,
         index,
         maxHeightNormalizedRatio = 0.9,
         onChange,
         snapPoints = [],
-        disableDefaultBackgroundColor = false,
-        disableDefaultShadow = false,
+        enableScrollableHeaderBorder = false,
     } = props;
 
     const styles = useStyles();
 
+    const { height: windowHeight } = useWindowDimensions();
+
+    const [topElementHeight, setTopElementHeight] = useState(0);
+    const [stickyBottomElementHeight, setStickyBottomElementHeight] = useState(0);
+    const [contentHeight, setContentHeight] = useState(0);
+    const [isScrollable, setIsScrollable] = useState(false);
+
+    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;
+
+    const handleTopElementLayout = createHeightLayoutHandler(setTopElementHeight);
+    const handleStickyBottomElementLayout = createHeightLayoutHandler(setStickyBottomElementHeight);
+
     const handleClose = () => {
         if (onChange) {
             onChange(-1);
@@ -72,11 +108,37 @@ export default function BottomSheet(props: BottomSheetProps) {
 
     const translateY = highestSnapPoint - (convertedSnapPoints[index] ?? 0);
 
-    const paperStyles = [
+    const adjustedContentHeight = useMemo(() => {
+        const adjustedHighestSnapPoint = highestSnapPoint + stickyBottomElementHeight;
+
+        return Math.min(maxDynamicContentSize, adjustedHighestSnapPoint);
+    }, [highestSnapPoint, stickyBottomElementHeight]);
+
+    const contentStyles = [
         styles.paper,
-        { height: highestSnapPoint },
+        borderRadius ? { borderTopLeftRadius: borderRadius, borderTopRightRadius: borderRadius } : {},
+        { height: adjustedContentHeight, maxHeight: maxDynamicContentSize },
+    ];
+
+    const headerStyles = [
+        styles.headerContainer,
+        isScrollable && enableScrollableHeaderBorder ? styles.headerBorder : {},
+    ];
+
+    const stickyBottomElementStyles = [
+        styles.stickyBottomElement,
+        isScrollable ? styles.stickyBottomElementShadow : {},
     ];
 
+    useLayoutEffect(() => {
+        if (contentHeight === 0 || highestSnapPoint === 0) {
+            return;
+        }
+
+        const adjustedHighestSnapPoint = highestSnapPoint + stickyBottomElementHeight;
+        setIsScrollable(adjustedHighestSnapPoint > maxDynamicContentSize);
+    }, [contentHeight, highestSnapPoint, stickyBottomElementHeight, maxDynamicContentSize]);
+
     return (
         <Modal
             backdropOpacity={backdropOpacity}
@@ -90,25 +152,44 @@ export default function BottomSheet(props: BottomSheetProps) {
             >
                 {topElement ? (
                     <Column>
-                        <Column style={styles.topElementLocation}>
+                        <Column
+                            onLayout={handleTopElementLayout}
+                            style={styles.topElementLocation}
+                        >
                             {topElement}
                         </Column>
                     </Column>
                 ) : null}
 
                 <Paper
-                    elevation={disableDefaultShadow ? 0 : 12}
-                    style={paperStyles}
-                    colorValue={disableDefaultBackgroundColor ? '#ffffff00' : undefined}
+                    elevation={12}
+                    style={contentStyles}
                 >
                     <ScrollView
-                        onContentSizeChange={handleContentSizeChange}
+                        onContentSizeChange={(contentWidth: number, contentHeight: number) => {
+                            setContentHeight(contentHeight);
+                            handleContentSizeChange(contentWidth, contentHeight);
+                        }}
                         stickyHeaderIndices={header ? [0] : undefined}
+                        style={{ paddingBottom: stickyBottomElementHeight }}
                     >
-                        {header}
+                        {header ? (
+                            <View style={headerStyles}>
+                                {header}
+                            </View>
+                        ): null}
 
                         {children}
                     </ScrollView>
+
+                    {stickyBottomElement ? (
+                        <Column
+                            style={stickyBottomElementStyles}
+                            onLayout={handleStickyBottomElementLayout}
+                        >
+                            {stickyBottomElement}
+                        </Column>
+                    ): null}
                 </Paper>
             </AnimatedY>
         </Modal>