@fountain-ui/lab 2.0.0-beta.64 → 2.0.0-beta.65

package/build/commonjs/BottomSheet/BottomSheetNative.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactNative = require("react-native");
 
+var _core = require("@fountain-ui/core");
+
 var _styles = require("@fountain-ui/styles");
 
 var _bottomSheet = require("@gorhom/bottom-sheet");
@@ -27,6 +29,7 @@ function BottomSheet(props) {
     children,
     enableDynamicSizing = true,
     header,
+    topElement,
     index,
     maxHeightNormalizedRatio = 0.9,
     onChange,
@@ -105,6 +108,26 @@ function BottomSheet(props) {
     pressBehavior: onChange ? 'close' : 'none'
   }));
 
+  const topElementOpacity = (0, _core.useAnimatedValue)(0);
+  const topElementAnimationStyle = {
+    opacity: topElementOpacity
+  };
+  const topElementLocationStyle = {
+    position: 'absolute',
+    width: '100%',
+    bottom: 0
+  };
+
+  const onAnimate = (fromIndex, toIndex) => {
+    const isVisible = toIndex > -1;
+
+    _reactNative.Animated.timing(topElementOpacity, {
+      toValue: isVisible ? 1 : 0,
+      duration: 0,
+      useNativeDriver: _core.isNotAndroid12
+    }).start();
+  };
+
   return /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetModalProvider, null, /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetModal, {
     backdropComponent: isBackdropTransparent ? _TransparentBackdrop.default : OpacityAwareBackdrop // @ts-ignore
     ,
@@ -118,8 +141,14 @@ function BottomSheet(props) {
     style: modalStyle,
     enablePanDownToClose: Boolean(onChange),
     enableDynamicSizing: enableDynamicSizing,
-    maxDynamicContentSize: maxDynamicContentSize
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    maxDynamicContentSize: maxDynamicContentSize,
+    detached: Boolean(topElement),
+    onAnimate: topElement ? onAnimate : undefined
+  }, topElement ? /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    style: topElementAnimationStyle
+  }, /*#__PURE__*/_react.default.createElement(_core.Column, {
+    style: topElementLocationStyle
+  }, topElement)) : null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: contentWrapperStyle
   }, /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetScrollView, {
     bounces: false,

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

@@ -1 +1 @@
-{"version":3,"names":["NoHandle","BottomSheet","props","backdropOpacity","children","enableDynamicSizing","header","index","maxHeightNormalizedRatio","onChange","snapPoints","disableDefaultBackgroundColor","disableDefaultShadow","indexRef","React","useRef","bottomSheetRef","height","windowHeight","useWindowDimensions","maxDynamicContentSize","Math","round","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","useTheme","shadow","modalStyle","backgroundColor","Platform","select","android","elevation","ios","web","boxShadow","backgroundStyle","palette","paper","default","contentWrapperStyle","flex","borderTopLeftRadius","borderTopRightRadius","overflow","isBackdropTransparent","OpacityAwareBackdrop","TransparentBackdrop","Boolean","undefined"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, useWindowDimensions, View } from 'react-native';\nimport { useTheme } from '@fountain-ui/styles';\nimport {\n    BottomSheetBackdrop,\n    BottomSheetBackdropProps,\n    BottomSheetModal,\n    BottomSheetModalProvider,\n    BottomSheetScrollView,\n} from '@gorhom/bottom-sheet';\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        children,\n        enableDynamicSizing = true,\n        header,\n        index,\n        maxHeightNormalizedRatio = 0.9,\n        onChange,\n        snapPoints = [],\n        disableDefaultBackgroundColor = false,\n        disableDefaultShadow = false,\n    } = props;\n\n    const indexRef = React.useRef<number>(-1);\n    const bottomSheetRef = React.useRef<BottomSheetModal | null>(null);\n\n    const { height: windowHeight } = useWindowDimensions();\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio);\n\n    const handleChange = React.useCallback((newIndex: number) => {\n        indexRef.current = newIndex;\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    }, [onChange]);\n\n    const handleDismiss = React.useCallback(() => {\n        handleChange(-1);\n    }, [handleChange]);\n\n    React.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    const shadow = theme.shadow[12];\n    const modalStyle = {\n        backgroundColor: '#ffffff00',\n        ...(disableDefaultShadow ? {} : Platform.select<object>({\n            android: shadow?.elevation,\n            ios: shadow?.shadow,\n            web: shadow?.boxShadow,\n        })),\n    };\n    const backgroundStyle = {\n        backgroundColor: disableDefaultBackgroundColor ? '#ffffff00' : theme.palette.paper.default,\n    };\n    const contentWrapperStyle = {\n        flex: 1,\n        borderTopLeftRadius: 15,\n        borderTopRightRadius: 15,\n        overflow: 'hidden',\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    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                style={modalStyle}\n                enablePanDownToClose={Boolean(onChange)}\n                enableDynamicSizing={enableDynamicSizing}\n                maxDynamicContentSize={maxDynamicContentSize}\n            >\n                {/* @ts-ignore */}\n                <View style={contentWrapperStyle}>\n                    <BottomSheetScrollView\n                        bounces={false}\n                        stickyHeaderIndices={header ? [0] : undefined}\n                    >\n                        {header}\n\n                        {children}\n                    </BottomSheetScrollView>\n                </View>\n            </BottomSheetModal>\n        </BottomSheetModalProvider>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["NoHandle","BottomSheet","props","backdropOpacity","children","enableDynamicSizing","header","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","disableDefaultBackgroundColor","disableDefaultShadow","indexRef","React","useRef","bottomSheetRef","height","windowHeight","useWindowDimensions","maxDynamicContentSize","Math","round","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","useTheme","shadow","modalStyle","backgroundColor","Platform","select","android","elevation","ios","web","boxShadow","backgroundStyle","palette","paper","default","contentWrapperStyle","flex","borderTopLeftRadius","borderTopRightRadius","overflow","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 from 'react';\nimport { Animated, Platform, useWindowDimensions, View } from 'react-native';\nimport { Column, useAnimatedValue, ExtendedStyle, isNotAndroid12 } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport {\n    BottomSheetBackdrop,\n    BottomSheetBackdropProps,\n    BottomSheetModal,\n    BottomSheetModalProvider,\n    BottomSheetScrollView,\n} from '@gorhom/bottom-sheet';\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        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 indexRef = React.useRef<number>(-1);\n    const bottomSheetRef = React.useRef<BottomSheetModal | null>(null);\n\n    const { height: windowHeight } = useWindowDimensions();\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio);\n\n    const handleChange = React.useCallback((newIndex: number) => {\n        indexRef.current = newIndex;\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    }, [onChange]);\n\n    const handleDismiss = React.useCallback(() => {\n        handleChange(-1);\n    }, [handleChange]);\n\n    React.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    const shadow = theme.shadow[12];\n    const modalStyle = {\n        backgroundColor: '#ffffff00',\n        ...(disableDefaultShadow ? {} : Platform.select<object>({\n            android: shadow?.elevation,\n            ios: shadow?.shadow,\n            web: shadow?.boxShadow,\n        })),\n    };\n    const backgroundStyle = {\n        backgroundColor: disableDefaultBackgroundColor ? '#ffffff00' : theme.palette.paper.default,\n    };\n    const contentWrapperStyle = {\n        flex: 1,\n        borderTopLeftRadius: 15,\n        borderTopRightRadius: 15,\n        overflow: 'hidden',\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                style={modalStyle}\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 style={topElementLocationStyle}>\n                            {topElement}\n                        </Column>\n                    </Animated.View>\n                ) : null}\n\n                {/* @ts-ignore */}\n                <View style={contentWrapperStyle}>\n                    <BottomSheetScrollView\n                        bounces={false}\n                        stickyHeaderIndices={header ? [0] : undefined}\n                    >\n                        {header}\n\n                        {children}\n                    </BottomSheetScrollView>\n                </View>\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     * 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     * 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     * 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":""}

package/build/commonjs/BottomSheet/BottomSheetWeb.js

@@ -34,6 +34,11 @@ const useStyles = function () {
       borderBottomRightRadius: 0,
       flexGrow: 1,
       overflow: 'hidden'
+    },
+    topElementLocation: {
+      position: 'absolute',
+      bottom: 0,
+      width: '100%'
     }
   };
 };
@@ -44,6 +49,7 @@ function BottomSheet(props) {
     children,
     enableDynamicSizing = true,
     header,
+    topElement,
     index,
     maxHeightNormalizedRatio = 0.9,
     onChange,
@@ -80,7 +86,9 @@ function BottomSheet(props) {
   }, /*#__PURE__*/_react.default.createElement(_AnimatedY.default, {
     style: styles.animated,
     translateY: translateY
-  }, /*#__PURE__*/_react.default.createElement(_core.Paper, {
+  }, topElement ? /*#__PURE__*/_react.default.createElement(_core.Column, null, /*#__PURE__*/_react.default.createElement(_core.Column, {
+    style: styles.topElementLocation
+  }, topElement)) : null, /*#__PURE__*/_react.default.createElement(_core.Paper, {
     elevation: disableDefaultShadow ? 0 : 12,
     style: paperStyles,
     colorValue: disableDefaultBackgroundColor ? '#ffffff00' : undefined

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

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","borderBottomLeftRadius","borderBottomRightRadius","flexGrow","overflow","BottomSheet","props","backdropOpacity","children","enableDynamicSizing","header","index","maxHeightNormalizedRatio","onChange","snapPoints","disableDefaultBackgroundColor","disableDefaultShadow","styles","handleClose","convertedSnapPoints","handleContentSizeChange","highestSnapPoint","useDynamicSnapPoints","translateY","paperStyles","height","css","StyleSheet","absoluteFill","undefined"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React from 'react';\nimport { ScrollView } from 'react-native';\nimport { 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'>;\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            borderBottomLeftRadius: 0,\n            borderBottomRightRadius: 0,\n            flexGrow: 1,\n            overflow: 'hidden',\n        },\n    };\n};\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity,\n        children,\n        enableDynamicSizing = true,\n        header,\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                <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":";;;;;;;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,sBAAsB,EAAE,CADrB;MAEHC,uBAAuB,EAAE,CAFtB;MAGHC,QAAQ,EAAE,CAHP;MAIHC,QAAQ,EAAE;IAJP;EAVJ,CAAP;AAiBH,CApBD;;AAsBe,SAASC,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,eADE;IAEFC,QAFE;IAGFC,mBAAmB,GAAG,IAHpB;IAIFC,MAJE;IAKFC,KALE;IAMFC,wBAAwB,GAAG,GANzB;IAOFC,QAPE;IAQFC,UAAU,GAAG,EARX;IASFC,6BAA6B,GAAG,KAT9B;IAUFC,oBAAoB,GAAG;EAVrB,IAWFV,KAXJ;EAaA,MAAMW,MAAM,GAAG5B,SAAS,EAAxB;;EAEA,MAAM6B,WAAW,GAAG,MAAM;IACtB,IAAIL,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAAC,CAAF,CAAR;IACH;EACJ,CAJD;;EAMA,MAAM;IACFM,mBADE;IAEFC,uBAFE;IAGFC;EAHE,IAIF,IAAAC,6BAAA,EAAqB;IACrBb,mBADqB;IAErBG,wBAFqB;IAGrBE;EAHqB,CAArB,CAJJ;EAUA,MAAMS,UAAU,GAAGF,gBAAgB,IAAIF,mBAAmB,CAACR,KAAD,CAAnB,IAA8B,CAAlC,CAAnC;EAEA,MAAMa,WAAW,GAAG,CAChBP,MAAM,CAACjB,KADS,EAEhB;IAAEyB,MAAM,EAAEJ;EAAV,CAFgB,CAApB;EAKA,oBACI,6BAAC,WAAD;IACI,eAAe,EAAEd,eADrB;IAEI,OAAO,EAAEW,WAFb;IAGI,OAAO,EAAEP,KAAK,IAAI,CAHtB;IAII,KAAK,EAAE,IAAAe,SAAA,EAAI,CAACC,gBAAA,CAAWC,YAAZ,EAA0BX,MAAM,CAACzB,IAAjC,CAAJ;EAJX,gBAMI,6BAAC,kBAAD;IACI,KAAK,EAAEyB,MAAM,CAACrB,QADlB;IAEI,UAAU,EAAE2B;EAFhB,gBAII,6BAAC,WAAD;IACI,SAAS,EAAEP,oBAAoB,GAAG,CAAH,GAAO,EAD1C;IAEI,KAAK,EAAEQ,WAFX;IAGI,UAAU,EAAET,6BAA6B,GAAG,WAAH,GAAiBc;EAH9D,gBAKI,6BAAC,uBAAD;IACI,mBAAmB,EAAET,uBADzB;IAEI,mBAAmB,EAAEV,MAAM,GAAG,CAAC,CAAD,CAAH,GAASmB;EAFxC,GAIKnB,MAJL,EAMKF,QANL,CALJ,CAJJ,CANJ,CADJ;AA4BH;;AAAA"}
+{"version":3,"names":["useStyles","theme","useTheme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","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","useDynamicSnapPoints","translateY","paperStyles","height","css","StyleSheet","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            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":";;;;;;;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,sBAAsB,EAAE,CADrB;MAEHC,uBAAuB,EAAE,CAFtB;MAGHC,QAAQ,EAAE,CAHP;MAIHC,QAAQ,EAAE;IAJP,CAVJ;IAgBHC,kBAAkB,EAAE;MAChBC,QAAQ,EAAE,UADM;MAEhBC,MAAM,EAAE,CAFQ;MAGhBR,KAAK,EAAE;IAHS;EAhBjB,CAAP;AAsBH,CAzBD;;AA2Be,SAASS,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,eADE;IAEFC,QAFE;IAGFC,mBAAmB,GAAG,IAHpB;IAIFC,MAJE;IAKFC,UALE;IAMFC,KANE;IAOFC,wBAAwB,GAAG,GAPzB;IAQFC,QARE;IASFC,UAAU,GAAG,EATX;IAUFC,6BAA6B,GAAG,KAV9B;IAWFC,oBAAoB,GAAG;EAXrB,IAYFX,KAZJ;EAcA,MAAMY,MAAM,GAAGhC,SAAS,EAAxB;;EAEA,MAAMiC,WAAW,GAAG,MAAM;IACtB,IAAIL,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAAC,CAAF,CAAR;IACH;EACJ,CAJD;;EAMA,MAAM;IACFM,mBADE;IAEFC,uBAFE;IAGFC;EAHE,IAIF,IAAAC,6BAAA,EAAqB;IACrBd,mBADqB;IAErBI,wBAFqB;IAGrBE;EAHqB,CAArB,CAJJ;EAUA,MAAMS,UAAU,GAAGF,gBAAgB,IAAIF,mBAAmB,CAACR,KAAD,CAAnB,IAA8B,CAAlC,CAAnC;EAEA,MAAMa,WAAW,GAAG,CAChBP,MAAM,CAACrB,KADS,EAEhB;IAAE6B,MAAM,EAAEJ;EAAV,CAFgB,CAApB;EAKA,oBACI,6BAAC,WAAD;IACI,eAAe,EAAEf,eADrB;IAEI,OAAO,EAAEY,WAFb;IAGI,OAAO,EAAEP,KAAK,IAAI,CAHtB;IAII,KAAK,EAAE,IAAAe,SAAA,EAAI,CAACC,gBAAA,CAAWC,YAAZ,EAA0BX,MAAM,CAAC7B,IAAjC,CAAJ;EAJX,gBAMI,6BAAC,kBAAD;IACI,KAAK,EAAE6B,MAAM,CAACzB,QADlB;IAEI,UAAU,EAAE+B;EAFhB,GAIKb,UAAU,gBACP,6BAAC,YAAD,qBACI,6BAAC,YAAD;IAAQ,KAAK,EAAEO,MAAM,CAAChB;EAAtB,GACKS,UADL,CADJ,CADO,GAMP,IAVR,eAYI,6BAAC,WAAD;IACI,SAAS,EAAEM,oBAAoB,GAAG,CAAH,GAAO,EAD1C;IAEI,KAAK,EAAEQ,WAFX;IAGI,UAAU,EAAET,6BAA6B,GAAG,WAAH,GAAiBc;EAH9D,gBAKI,6BAAC,uBAAD;IACI,mBAAmB,EAAET,uBADzB;IAEI,mBAAmB,EAAEX,MAAM,GAAG,CAAC,CAAD,CAAH,GAASoB;EAFxC,GAIKpB,MAJL,EAMKF,QANL,CALJ,CAZJ,CANJ,CADJ;AAoCH;;AAAA"}

package/build/module/BottomSheet/BottomSheetNative.js

@@ -1,7 +1,8 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
-import { Platform, useWindowDimensions, View } from 'react-native';
+import { Animated, Platform, useWindowDimensions, View } from 'react-native';
+import { Column, useAnimatedValue, isNotAndroid12 } from '@fountain-ui/core';
 import { useTheme } from '@fountain-ui/styles';
 import { BottomSheetBackdrop, BottomSheetModal, BottomSheetModalProvider, BottomSheetScrollView } from '@gorhom/bottom-sheet';
 import TransparentBackdrop from './TransparentBackdrop';
@@ -14,6 +15,7 @@ export default function BottomSheet(props) {
     children,
     enableDynamicSizing = true,
     header,
+    topElement,
     index,
     maxHeightNormalizedRatio = 0.9,
     onChange,
@@ -85,6 +87,25 @@ export default function BottomSheet(props) {
     pressBehavior: onChange ? 'close' : 'none'
   }));
 
+  const topElementOpacity = useAnimatedValue(0);
+  const topElementAnimationStyle = {
+    opacity: topElementOpacity
+  };
+  const topElementLocationStyle = {
+    position: 'absolute',
+    width: '100%',
+    bottom: 0
+  };
+
+  const onAnimate = (fromIndex, toIndex) => {
+    const isVisible = toIndex > -1;
+    Animated.timing(topElementOpacity, {
+      toValue: isVisible ? 1 : 0,
+      duration: 0,
+      useNativeDriver: isNotAndroid12
+    }).start();
+  };
+
   return /*#__PURE__*/React.createElement(BottomSheetModalProvider, null, /*#__PURE__*/React.createElement(BottomSheetModal, {
     backdropComponent: isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop // @ts-ignore
     ,
@@ -98,8 +119,14 @@ export default function BottomSheet(props) {
     style: modalStyle,
     enablePanDownToClose: Boolean(onChange),
     enableDynamicSizing: enableDynamicSizing,
-    maxDynamicContentSize: maxDynamicContentSize
-  }, /*#__PURE__*/React.createElement(View, {
+    maxDynamicContentSize: maxDynamicContentSize,
+    detached: Boolean(topElement),
+    onAnimate: topElement ? onAnimate : undefined
+  }, topElement ? /*#__PURE__*/React.createElement(Animated.View, {
+    style: topElementAnimationStyle
+  }, /*#__PURE__*/React.createElement(Column, {
+    style: topElementLocationStyle
+  }, topElement)) : null, /*#__PURE__*/React.createElement(View, {
     style: contentWrapperStyle
   }, /*#__PURE__*/React.createElement(BottomSheetScrollView, {
     bounces: false,

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

@@ -1 +1 @@
-{"version":3,"names":["React","Platform","useWindowDimensions","View","useTheme","BottomSheetBackdrop","BottomSheetModal","BottomSheetModalProvider","BottomSheetScrollView","TransparentBackdrop","NoHandle","BottomSheet","props","backdropOpacity","children","enableDynamicSizing","header","index","maxHeightNormalizedRatio","onChange","snapPoints","disableDefaultBackgroundColor","disableDefaultShadow","indexRef","useRef","bottomSheetRef","height","windowHeight","maxDynamicContentSize","Math","round","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","shadow","modalStyle","backgroundColor","select","android","elevation","ios","web","boxShadow","backgroundStyle","palette","paper","default","contentWrapperStyle","flex","borderTopLeftRadius","borderTopRightRadius","overflow","isBackdropTransparent","OpacityAwareBackdrop","Boolean","undefined"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, useWindowDimensions, View } from 'react-native';\nimport { useTheme } from '@fountain-ui/styles';\nimport {\n    BottomSheetBackdrop,\n    BottomSheetBackdropProps,\n    BottomSheetModal,\n    BottomSheetModalProvider,\n    BottomSheetScrollView,\n} from '@gorhom/bottom-sheet';\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        children,\n        enableDynamicSizing = true,\n        header,\n        index,\n        maxHeightNormalizedRatio = 0.9,\n        onChange,\n        snapPoints = [],\n        disableDefaultBackgroundColor = false,\n        disableDefaultShadow = false,\n    } = props;\n\n    const indexRef = React.useRef<number>(-1);\n    const bottomSheetRef = React.useRef<BottomSheetModal | null>(null);\n\n    const { height: windowHeight } = useWindowDimensions();\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio);\n\n    const handleChange = React.useCallback((newIndex: number) => {\n        indexRef.current = newIndex;\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    }, [onChange]);\n\n    const handleDismiss = React.useCallback(() => {\n        handleChange(-1);\n    }, [handleChange]);\n\n    React.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    const shadow = theme.shadow[12];\n    const modalStyle = {\n        backgroundColor: '#ffffff00',\n        ...(disableDefaultShadow ? {} : Platform.select<object>({\n            android: shadow?.elevation,\n            ios: shadow?.shadow,\n            web: shadow?.boxShadow,\n        })),\n    };\n    const backgroundStyle = {\n        backgroundColor: disableDefaultBackgroundColor ? '#ffffff00' : theme.palette.paper.default,\n    };\n    const contentWrapperStyle = {\n        flex: 1,\n        borderTopLeftRadius: 15,\n        borderTopRightRadius: 15,\n        overflow: 'hidden',\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    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                style={modalStyle}\n                enablePanDownToClose={Boolean(onChange)}\n                enableDynamicSizing={enableDynamicSizing}\n                maxDynamicContentSize={maxDynamicContentSize}\n            >\n                {/* @ts-ignore */}\n                <View style={contentWrapperStyle}>\n                    <BottomSheetScrollView\n                        bounces={false}\n                        stickyHeaderIndices={header ? [0] : undefined}\n                    >\n                        {header}\n\n                        {children}\n                    </BottomSheetScrollView>\n                </View>\n            </BottomSheetModal>\n        </BottomSheetModalProvider>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","Animated","Platform","useWindowDimensions","View","Column","useAnimatedValue","isNotAndroid12","useTheme","BottomSheetBackdrop","BottomSheetModal","BottomSheetModalProvider","BottomSheetScrollView","TransparentBackdrop","NoHandle","BottomSheet","props","backdropOpacity","children","enableDynamicSizing","header","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","disableDefaultBackgroundColor","disableDefaultShadow","indexRef","useRef","bottomSheetRef","height","windowHeight","maxDynamicContentSize","Math","round","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","shadow","modalStyle","backgroundColor","select","android","elevation","ios","web","boxShadow","backgroundStyle","palette","paper","default","contentWrapperStyle","flex","borderTopLeftRadius","borderTopRightRadius","overflow","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 from 'react';\nimport { Animated, Platform, useWindowDimensions, View } from 'react-native';\nimport { Column, useAnimatedValue, ExtendedStyle, isNotAndroid12 } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport {\n    BottomSheetBackdrop,\n    BottomSheetBackdropProps,\n    BottomSheetModal,\n    BottomSheetModalProvider,\n    BottomSheetScrollView,\n} from '@gorhom/bottom-sheet';\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        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 indexRef = React.useRef<number>(-1);\n    const bottomSheetRef = React.useRef<BottomSheetModal | null>(null);\n\n    const { height: windowHeight } = useWindowDimensions();\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio);\n\n    const handleChange = React.useCallback((newIndex: number) => {\n        indexRef.current = newIndex;\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    }, [onChange]);\n\n    const handleDismiss = React.useCallback(() => {\n        handleChange(-1);\n    }, [handleChange]);\n\n    React.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    const shadow = theme.shadow[12];\n    const modalStyle = {\n        backgroundColor: '#ffffff00',\n        ...(disableDefaultShadow ? {} : Platform.select<object>({\n            android: shadow?.elevation,\n            ios: shadow?.shadow,\n            web: shadow?.boxShadow,\n        })),\n    };\n    const backgroundStyle = {\n        backgroundColor: disableDefaultBackgroundColor ? '#ffffff00' : theme.palette.paper.default,\n    };\n    const contentWrapperStyle = {\n        flex: 1,\n        borderTopLeftRadius: 15,\n        borderTopRightRadius: 15,\n        overflow: 'hidden',\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                style={modalStyle}\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 style={topElementLocationStyle}>\n                            {topElement}\n                        </Column>\n                    </Animated.View>\n                ) : null}\n\n                {/* @ts-ignore */}\n                <View style={contentWrapperStyle}>\n                    <BottomSheetScrollView\n                        bounces={false}\n                        stickyHeaderIndices={header ? [0] : undefined}\n                    >\n                        {header}\n\n                        {children}\n                    </BottomSheetScrollView>\n                </View>\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     * 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     * 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     * 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":""}

package/build/module/BottomSheet/BottomSheetWeb.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ScrollView } from 'react-native';
-import { Modal, Paper, StyleSheet, css, useTheme } from '@fountain-ui/core';
+import { Column, Modal, Paper, StyleSheet, css, useTheme } from '@fountain-ui/core';
 import AnimatedY from '../AnimatedY';
 import useDynamicSnapPoints from './useDynamicSnapPoints';
 
@@ -21,6 +21,11 @@ const useStyles = function () {
       borderBottomRightRadius: 0,
       flexGrow: 1,
       overflow: 'hidden'
+    },
+    topElementLocation: {
+      position: 'absolute',
+      bottom: 0,
+      width: '100%'
     }
   };
 };
@@ -31,6 +36,7 @@ export default function BottomSheet(props) {
     children,
     enableDynamicSizing = true,
     header,
+    topElement,
     index,
     maxHeightNormalizedRatio = 0.9,
     onChange,
@@ -67,7 +73,9 @@ export default function BottomSheet(props) {
   }, /*#__PURE__*/React.createElement(AnimatedY, {
     style: styles.animated,
     translateY: translateY
-  }, /*#__PURE__*/React.createElement(Paper, {
+  }, topElement ? /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(Column, {
+    style: styles.topElementLocation
+  }, topElement)) : null, /*#__PURE__*/React.createElement(Paper, {
     elevation: disableDefaultShadow ? 0 : 12,
     style: paperStyles,
     colorValue: disableDefaultBackgroundColor ? '#ffffff00' : undefined

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

@@ -1 +1 @@
-{"version":3,"names":["React","ScrollView","Modal","Paper","StyleSheet","css","useTheme","AnimatedY","useDynamicSnapPoints","useStyles","theme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","borderBottomLeftRadius","borderBottomRightRadius","flexGrow","overflow","BottomSheet","props","backdropOpacity","children","enableDynamicSizing","header","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 { 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'>;\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            borderBottomLeftRadius: 0,\n            borderBottomRightRadius: 0,\n            flexGrow: 1,\n            overflow: 'hidden',\n        },\n    };\n};\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity,\n        children,\n        enableDynamicSizing = true,\n        header,\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                <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":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,QAA2B,cAA3B;AACA,SAASC,KAAT,EAAgBC,KAAhB,EAAuBC,UAAvB,EAAmCC,GAAnC,EAAwCC,QAAxC,QAAwD,mBAAxD;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,sBAAsB,EAAE,CADrB;MAEHC,uBAAuB,EAAE,CAFtB;MAGHC,QAAQ,EAAE,CAHP;MAIHC,QAAQ,EAAE;IAJP;EAVJ,CAAP;AAiBH,CApBD;;AAsBA,eAAe,SAASC,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,eADE;IAEFC,QAFE;IAGFC,mBAAmB,GAAG,IAHpB;IAIFC,MAJE;IAKFC,KALE;IAMFC,wBAAwB,GAAG,GANzB;IAOFC,QAPE;IAQFC,UAAU,GAAG,EARX;IASFC,6BAA6B,GAAG,KAT9B;IAUFC,oBAAoB,GAAG;EAVrB,IAWFV,KAXJ;EAaA,MAAMW,MAAM,GAAG3B,SAAS,EAAxB;;EAEA,MAAM4B,WAAW,GAAG,MAAM;IACtB,IAAIL,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAAC,CAAF,CAAR;IACH;EACJ,CAJD;;EAMA,MAAM;IACFM,mBADE;IAEFC,uBAFE;IAGFC;EAHE,IAIFhC,oBAAoB,CAAC;IACrBoB,mBADqB;IAErBG,wBAFqB;IAGrBE;EAHqB,CAAD,CAJxB;EAUA,MAAMQ,UAAU,GAAGD,gBAAgB,IAAIF,mBAAmB,CAACR,KAAD,CAAnB,IAA8B,CAAlC,CAAnC;EAEA,MAAMY,WAAW,GAAG,CAChBN,MAAM,CAACjB,KADS,EAEhB;IAAEwB,MAAM,EAAEH;EAAV,CAFgB,CAApB;EAKA,oBACI,oBAAC,KAAD;IACI,eAAe,EAAEd,eADrB;IAEI,OAAO,EAAEW,WAFb;IAGI,OAAO,EAAEP,KAAK,IAAI,CAHtB;IAII,KAAK,EAAEzB,GAAG,CAAC,CAACD,UAAU,CAACwC,YAAZ,EAA0BR,MAAM,CAACzB,IAAjC,CAAD;EAJd,gBAMI,oBAAC,SAAD;IACI,KAAK,EAAEyB,MAAM,CAACrB,QADlB;IAEI,UAAU,EAAE0B;EAFhB,gBAII,oBAAC,KAAD;IACI,SAAS,EAAEN,oBAAoB,GAAG,CAAH,GAAO,EAD1C;IAEI,KAAK,EAAEO,WAFX;IAGI,UAAU,EAAER,6BAA6B,GAAG,WAAH,GAAiBW;EAH9D,gBAKI,oBAAC,UAAD;IACI,mBAAmB,EAAEN,uBADzB;IAEI,mBAAmB,EAAEV,MAAM,GAAG,CAAC,CAAD,CAAH,GAASgB;EAFxC,GAIKhB,MAJL,EAMKF,QANL,CALJ,CAJJ,CANJ,CADJ;AA4BH;AAAA"}
+{"version":3,"names":["React","ScrollView","Column","Modal","Paper","StyleSheet","css","useTheme","AnimatedY","useDynamicSnapPoints","useStyles","theme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","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            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":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,QAA2B,cAA3B;AACA,SAASC,MAAT,EAAiBC,KAAjB,EAAwBC,KAAxB,EAA+BC,UAA/B,EAA2CC,GAA3C,EAAgDC,QAAhD,QAAgE,mBAAhE;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,sBAAsB,EAAE,CADrB;MAEHC,uBAAuB,EAAE,CAFtB;MAGHC,QAAQ,EAAE,CAHP;MAIHC,QAAQ,EAAE;IAJP,CAVJ;IAgBHC,kBAAkB,EAAE;MAChBC,QAAQ,EAAE,UADM;MAEhBC,MAAM,EAAE,CAFQ;MAGhBR,KAAK,EAAE;IAHS;EAhBjB,CAAP;AAsBH,CAzBD;;AA2BA,eAAe,SAASS,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,eADE;IAEFC,QAFE;IAGFC,mBAAmB,GAAG,IAHpB;IAIFC,MAJE;IAKFC,UALE;IAMFC,KANE;IAOFC,wBAAwB,GAAG,GAPzB;IAQFC,QARE;IASFC,UAAU,GAAG,EATX;IAUFC,6BAA6B,GAAG,KAV9B;IAWFC,oBAAoB,GAAG;EAXrB,IAYFX,KAZJ;EAcA,MAAMY,MAAM,GAAG/B,SAAS,EAAxB;;EAEA,MAAMgC,WAAW,GAAG,MAAM;IACtB,IAAIL,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAAC,CAAF,CAAR;IACH;EACJ,CAJD;;EAMA,MAAM;IACFM,mBADE;IAEFC,uBAFE;IAGFC;EAHE,IAIFpC,oBAAoB,CAAC;IACrBuB,mBADqB;IAErBI,wBAFqB;IAGrBE;EAHqB,CAAD,CAJxB;EAUA,MAAMQ,UAAU,GAAGD,gBAAgB,IAAIF,mBAAmB,CAACR,KAAD,CAAnB,IAA8B,CAAlC,CAAnC;EAEA,MAAMY,WAAW,GAAG,CAChBN,MAAM,CAACrB,KADS,EAEhB;IAAE4B,MAAM,EAAEH;EAAV,CAFgB,CAApB;EAKA,oBACI,oBAAC,KAAD;IACI,eAAe,EAAEf,eADrB;IAEI,OAAO,EAAEY,WAFb;IAGI,OAAO,EAAEP,KAAK,IAAI,CAHtB;IAII,KAAK,EAAE7B,GAAG,CAAC,CAACD,UAAU,CAAC4C,YAAZ,EAA0BR,MAAM,CAAC7B,IAAjC,CAAD;EAJd,gBAMI,oBAAC,SAAD;IACI,KAAK,EAAE6B,MAAM,CAACzB,QADlB;IAEI,UAAU,EAAE8B;EAFhB,GAIKZ,UAAU,gBACP,oBAAC,MAAD,qBACI,oBAAC,MAAD;IAAQ,KAAK,EAAEO,MAAM,CAAChB;EAAtB,GACKS,UADL,CADJ,CADO,GAMP,IAVR,eAYI,oBAAC,KAAD;IACI,SAAS,EAAEM,oBAAoB,GAAG,CAAH,GAAO,EAD1C;IAEI,KAAK,EAAEO,WAFX;IAGI,UAAU,EAAER,6BAA6B,GAAG,WAAH,GAAiBW;EAH9D,gBAKI,oBAAC,UAAD;IACI,mBAAmB,EAAEN,uBADzB;IAEI,mBAAmB,EAAEX,MAAM,GAAG,CAAC,CAAD,CAAH,GAASiB;EAFxC,GAIKjB,MAJL,EAMKF,QANL,CALJ,CAZJ,CANJ,CADJ;AAoCH;AAAA"}

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

@@ -19,6 +19,10 @@ export default interface BottomSheetProps extends ComponentProps<{
      * Area to be fixed on the top of the bottom sheet.
      */
     header?: React.ReactNode;
+    /**
+     * Top element for displaying additional information on the bottom sheet.
+     */
+    topElement?: React.ReactNode;
     /**
      * Snap index. You could also provide -1 to bottom sheet in closed state.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "2.0.0-beta.64",
+  "version": "2.0.0-beta.65",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "de9eb90b48738a7ccd01775227e57c09769ac9cb"
+  "gitHead": "138b80d039c465fcc98608cb2256230cdfe90007"
 }

package/src/BottomSheet/BottomSheetNative.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Platform, useWindowDimensions, View } from 'react-native';
+import { Animated, Platform, useWindowDimensions, View } from 'react-native';
+import { Column, useAnimatedValue, ExtendedStyle, isNotAndroid12 } from '@fountain-ui/core';
 import { useTheme } from '@fountain-ui/styles';
 import {
     BottomSheetBackdrop,
@@ -19,6 +20,7 @@ export default function BottomSheet(props: BottomSheetProps) {
         children,
         enableDynamicSizing = true,
         header,
+        topElement,
         index,
         maxHeightNormalizedRatio = 0.9,
         onChange,
@@ -92,6 +94,23 @@ export default function BottomSheet(props: BottomSheetProps) {
         />
     );
 
+    const topElementOpacity = useAnimatedValue(0);
+    const topElementAnimationStyle: Animated.WithAnimatedValue<ExtendedStyle> = { opacity: topElementOpacity };
+    const topElementLocationStyle: ExtendedStyle = {
+        position: 'absolute',
+        width: '100%',
+        bottom: 0,
+    };
+    const onAnimate = (fromIndex: number, toIndex: number) => {
+        const isVisible = toIndex > -1;
+
+        Animated.timing(topElementOpacity, {
+            toValue: isVisible ? 1 : 0,
+            duration: 0,
+            useNativeDriver: isNotAndroid12,
+        }).start();
+    };
+
     return (
         <BottomSheetModalProvider>
             <BottomSheetModal
@@ -108,7 +127,17 @@ export default function BottomSheet(props: BottomSheetProps) {
                 enablePanDownToClose={Boolean(onChange)}
                 enableDynamicSizing={enableDynamicSizing}
                 maxDynamicContentSize={maxDynamicContentSize}
+                detached={Boolean(topElement)}
+                onAnimate={topElement ? onAnimate : undefined}
             >
+                {topElement ? (
+                    <Animated.View style={topElementAnimationStyle}>
+                        <Column style={topElementLocationStyle}>
+                            {topElement}
+                        </Column>
+                    </Animated.View>
+                ) : null}
+
                 {/* @ts-ignore */}
                 <View style={contentWrapperStyle}>
                     <BottomSheetScrollView

package/src/BottomSheet/BottomSheetProps.ts

@@ -24,6 +24,11 @@ export default interface BottomSheetProps extends ComponentProps<{
      */
     header?: React.ReactNode;
 
+    /**
+     * Top element for displaying additional information on the bottom sheet.
+     */
+    topElement?: React.ReactNode;
+
     /**
      * Snap index. You could also provide -1 to bottom sheet in closed state.
      */

package/src/BottomSheet/BottomSheetWeb.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { ScrollView } from 'react-native';
-import { Modal, Paper, StyleSheet, css, useTheme } from '@fountain-ui/core';
+import { Column, Modal, Paper, StyleSheet, css, 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'>;
+type BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'topElementLocation'>;
 
 const useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {
     const theme = useTheme();
@@ -27,6 +27,11 @@ const useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {
             flexGrow: 1,
             overflow: 'hidden',
         },
+        topElementLocation: {
+            position: 'absolute',
+            bottom: 0,
+            width: '100%',
+        },
     };
 };
 
@@ -36,6 +41,7 @@ export default function BottomSheet(props: BottomSheetProps) {
         children,
         enableDynamicSizing = true,
         header,
+        topElement,
         index,
         maxHeightNormalizedRatio = 0.9,
         onChange,
@@ -80,6 +86,14 @@ export default function BottomSheet(props: BottomSheetProps) {
                 style={styles.animated}
                 translateY={translateY}
             >
+                {topElement ? (
+                    <Column>
+                        <Column style={styles.topElementLocation}>
+                            {topElement}
+                        </Column>
+                    </Column>
+                ) : null}
+
                 <Paper
                     elevation={disableDefaultShadow ? 0 : 12}
                     style={paperStyles}