@fountain-ui/lab 2.0.0-beta.7 → 2.0.0-beta.71

package/build/commonjs/hooks/useUnstableCollapsibleAppBar.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = useUnstableCollapsibleAppBar;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _reactNative = require("react-native");
 
@@ -21,10 +21,6 @@ var _useHeight = _interopRequireDefault(require("./useHeight"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 const defaultOptions = {
   shouldTranslateYReset: false
 };
@@ -50,7 +46,7 @@ function useUnstableCollapsibleAppBar() {
   const [appBarHeight, onAppBarLayout] = (0, _useHeight.default)();
   const appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);
   const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = (0, _useHeight.default)();
-  const maxTranslateY = (0, _reactNativeReanimated.useDerivedValue)(() => -collapsibleToolbarHeight);
+  const maxTranslateY = (0, _reactNativeReanimated.useDerivedValue)(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);
   const translateY = (0, _reactNativeReanimated.useSharedValue)(0);
   const lastTranslateY = (0, _reactNativeReanimated.useSharedValue)(0);
   const lastOffsetY = (0, _reactNativeReanimated.useSharedValue)(0);
@@ -59,28 +55,43 @@ function useUnstableCollapsibleAppBar() {
   const vectorY = (0, _reactNativeReanimated.useSharedValue)(0);
   const elevationStyle = (0, _useElevationStyle.default)(4);
   const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    return _reactNative.Platform.OS === 'web' ? {
-      transform: [{
-        translateY: translateY.value
-      }],
-      boxShadow: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.boxShadow : 0
-    } : {
-      transform: [{
-        translateY: translateY.value
-      }],
-      elevation: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.elevation : 0,
-      shadowColor: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowColor,
-      shadowOffset: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOffset,
-      shadowRadius: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowRadius,
-      shadowOpacity: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOpacity : 0
-    };
-  });
-
-  const indexRef = _react.default.useRef(0);
-
-  const offsetsRef = _react.default.useRef([]);
-
-  const onScrollViewChanged = nextIndex => {
+    const transform = [{
+      translateY: translateY.value
+    }];
+
+    if (_reactNative.Platform.OS === 'web') {
+      return {
+        transform,
+        boxShadow: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.boxShadow : 0
+      };
+    }
+
+    if (_reactNative.Platform.OS === 'android') {
+      return {
+        transform,
+        elevation: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.elevation : 0
+      };
+    }
+
+    if (_reactNative.Platform.OS === 'ios') {
+      return {
+        transform,
+        shadowColor: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowColor,
+        shadowOffset: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOffset,
+        shadowRadius: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowRadius,
+        shadowOpacity: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOpacity : 0
+      };
+    }
+
+    return {};
+  }, [
+    /**
+     * FIXME: Consider add `elevationStyle` to dependencies.
+     */
+  ]);
+  const indexRef = (0, _react.useRef)(0);
+  const offsetsRef = (0, _react.useRef)([]);
+  const onScrollViewChanged = (0, _react.useCallback)(nextIndex => {
     const prevIndex = indexRef.current;
 
     if (prevIndex === nextIndex) {
@@ -109,8 +120,7 @@ function useUnstableCollapsibleAppBar() {
       });
       vectorY.value = 0;
     }
-  };
-
+  }, [appBarHeight]);
   const scrollHandler = (0, _reactNativeReanimated.useAnimatedScrollHandler)({
     onBeginDrag: () => {
       lastTranslateY.value = translateY.value;
@@ -169,7 +179,7 @@ function useUnstableCollapsibleAppBar() {
         duration: ANIMATION_DURATION_MILLIS
       });
     }
-  });
+  }, [appBarHeight]);
   const hasCollapsible = collapsibleToolbarHeight > 0;
   const appBarStyle = [animatedStyle, {
     paddingTop: safeAreaInsets.top

package/build/commonjs/hooks/useUnstableCollapsibleAppBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultOptions","shouldTranslateYReset","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","Platform","OS","useLargerValueOfLastTwoValues","value","refLatestTwoValues","useRef","current","shift","push","Math","max","useUnstableCollapsibleAppBar","userOptions","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","appBarHeight","onAppBarLayout","useHeight","appBarMaxHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","prevOffsetY","overlapped","vectorY","elevationStyle","useElevationStyle","animatedStyle","useAnimatedStyle","transform","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","React","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","withTiming","duration","savedOffsetY","scrollHandler","useAnimatedScrollHandler","onBeginDrag","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","deltaY","dy","min","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useUnstableCollapsibleAppBar.ts"],"sourcesContent":["import React, { useRef } from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport {\n    useAnimatedScrollHandler,\n    useAnimatedStyle,\n    useDerivedValue,\n    useSharedValue,\n    withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport useAppbarStyles from './useAppbarStyles';\nimport useElevationStyle from './useElevationStyle';\nimport useHeight from './useHeight';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n}\n\nexport interface Options {\n    shouldTranslateYReset?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    vectorY: SharedValue<number>;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n    shouldTranslateYReset: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\n\nfunction useLargerValueOfLastTwoValues(value: number) {\n    const refLatestTwoValues = useRef([0, 0]);\n\n    refLatestTwoValues.current.shift();\n    refLatestTwoValues.current.push(value);\n\n    return Math.max(...refLatestTwoValues.current);\n}\n\n\nexport default function useUnstableCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { shouldTranslateYReset }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n    const appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);\n    const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight);\n\n    const translateY = useSharedValue<number>(0);\n    const lastTranslateY = useSharedValue<number>(0);\n    const lastOffsetY = useSharedValue<number>(0);\n    const prevOffsetY = useSharedValue<number>(0);\n    const overlapped = useSharedValue<boolean>(false);\n    const vectorY = useSharedValue<number>(0);\n\n    const elevationStyle = useElevationStyle(4);\n    const animatedStyle = useAnimatedStyle(() => {\n        return Platform.OS === 'web' ? ({\n            transform: [{ translateY: translateY.value }],\n            boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n        }) : ({\n            transform: [{ translateY: translateY.value }],\n            elevation: overlapped.value ? elevationStyle?.elevation : 0,\n            shadowColor: elevationStyle?.shadowColor,\n            shadowOffset: elevationStyle?.shadowOffset,\n            shadowRadius: elevationStyle?.shadowRadius,\n            shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n        });\n    });\n\n    const indexRef = React.useRef<number>(0);\n    const offsetsRef = React.useRef<Array<number>>([]);\n\n    const onScrollViewChanged = (nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            if (shouldTranslateYReset) {\n                translateY.value = withTiming(0, {\n                    duration: ANIMATION_DURATION_MILLIS,\n                });\n\n                vectorY.value = 0;\n                offsetsRef.current = [];\n                overlapped.value = false;\n            }\n\n            return;\n        }\n\n        offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n        const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n        lastOffsetY.value = savedOffsetY;\n\n        indexRef.current = nextIndex;\n\n        // Determine whether to overlap every time index is changed.\n        overlapped.value = savedOffsetY > 0;\n\n        // If next ScrollView's offset is too short, expand app bar.\n        if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n            translateY.value = withTiming(0, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n\n            vectorY.value = 0;\n        }\n    };\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onMomentumBegin: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            const deltaY = offsetY - prevOffsetY.value;\n            vectorY.value = (vectorY.value * deltaY >= 0 && offsetY > 0) ? vectorY.value + deltaY : deltaY;\n            prevOffsetY.value = offsetY;\n\n            if (SUPPORTS_DRAG_DETECTION) {\n                const dy = offsetY - lastOffsetY.value;\n\n                translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n                overlapped.value = offsetY + translateY.value > 0;\n            } else {\n                if (offsetY > -maxTy) {\n                    if (ty === 0) {\n                        translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                } else {\n                    if (ty === maxTy) {\n                        translateY.value = withTiming(0, {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                }\n\n                overlapped.value = offsetY > 0;\n\n                lastOffsetY.value = offsetY;\n            }\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            lastOffsetY.value = offsetY;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            // If toolbar is already positioned on edge, do nothing.\n            if (ty <= maxTy || ty >= 0) {\n                return;\n            }\n\n            const threshold = maxTy * 0.5;\n\n            const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n            overlapped.value = offsetY + nextTranslateY > 0;\n\n            translateY.value = withTiming(nextTranslateY, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        },\n    });\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        { paddingTop: safeAreaInsets.top },\n        hasCollapsible ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        vectorY,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarMaxHeight : 0 },\n    };\n};\n"],"mappings":"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"}
+{"version":3,"names":["defaultOptions","shouldTranslateYReset","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","Platform","OS","useLargerValueOfLastTwoValues","value","refLatestTwoValues","useRef","current","shift","push","Math","max","useUnstableCollapsibleAppBar","userOptions","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","appBarHeight","onAppBarLayout","useHeight","appBarMaxHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","prevOffsetY","overlapped","vectorY","elevationStyle","useElevationStyle","animatedStyle","useAnimatedStyle","transform","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","offsetsRef","onScrollViewChanged","useCallback","nextIndex","prevIndex","withTiming","duration","savedOffsetY","scrollHandler","useAnimatedScrollHandler","onBeginDrag","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","deltaY","dy","min","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useUnstableCollapsibleAppBar.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport {\n    useAnimatedScrollHandler,\n    useAnimatedStyle,\n    useDerivedValue,\n    useSharedValue,\n    withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport useAppbarStyles from './useAppbarStyles';\nimport useElevationStyle from './useElevationStyle';\nimport useHeight from './useHeight';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n}\n\nexport interface Options {\n    shouldTranslateYReset?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    vectorY: SharedValue<number>;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n    shouldTranslateYReset: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nfunction useLargerValueOfLastTwoValues(value: number) {\n    const refLatestTwoValues = useRef([0, 0]);\n\n    refLatestTwoValues.current.shift();\n    refLatestTwoValues.current.push(value);\n\n    return Math.max(...refLatestTwoValues.current);\n}\n\nexport default function useUnstableCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { shouldTranslateYReset }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n    const appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);\n    const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);\n\n    const translateY = useSharedValue<number>(0);\n    const lastTranslateY = useSharedValue<number>(0);\n    const lastOffsetY = useSharedValue<number>(0);\n    const prevOffsetY = useSharedValue<number>(0);\n    const overlapped = useSharedValue<boolean>(false);\n    const vectorY = useSharedValue<number>(0);\n\n    const elevationStyle = useElevationStyle(4);\n    const animatedStyle = useAnimatedStyle(() => {\n        const transform = [{ translateY: translateY.value }];\n\n        if (Platform.OS === 'web') {\n            return {\n                transform,\n                boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n            };\n        }\n        if (Platform.OS === 'android') {\n            return {\n                transform,\n                elevation: overlapped.value ? elevationStyle?.elevation : 0,\n            };\n        }\n        if (Platform.OS === 'ios') {\n            return {\n                transform,\n                shadowColor: elevationStyle?.shadowColor,\n                shadowOffset: elevationStyle?.shadowOffset,\n                shadowRadius: elevationStyle?.shadowRadius,\n                shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n            };\n        }\n        return {};\n    }, [\n        /**\n         * FIXME: Consider add `elevationStyle` to dependencies.\n         */\n    ]);\n\n    const indexRef = useRef<number>(0);\n    const offsetsRef = useRef<Array<number>>([]);\n\n    const onScrollViewChanged = useCallback((nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            if (shouldTranslateYReset) {\n                translateY.value = withTiming(0, {\n                    duration: ANIMATION_DURATION_MILLIS,\n                });\n\n                vectorY.value = 0;\n                offsetsRef.current = [];\n                overlapped.value = false;\n            }\n\n            return;\n        }\n\n        offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n        const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n        lastOffsetY.value = savedOffsetY;\n\n        indexRef.current = nextIndex;\n\n        // Determine whether to overlap every time index is changed.\n        overlapped.value = savedOffsetY > 0;\n\n        // If next ScrollView's offset is too short, expand app bar.\n        if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n            translateY.value = withTiming(0, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n\n            vectorY.value = 0;\n        }\n    }, [appBarHeight]);\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onMomentumBegin: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            const deltaY = offsetY - prevOffsetY.value;\n            vectorY.value = (vectorY.value * deltaY >= 0 && offsetY > 0) ? vectorY.value + deltaY : deltaY;\n            prevOffsetY.value = offsetY;\n\n            if (SUPPORTS_DRAG_DETECTION) {\n                const dy = offsetY - lastOffsetY.value;\n\n                translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n                overlapped.value = offsetY + translateY.value > 0;\n            } else {\n                if (offsetY > -maxTy) {\n                    if (ty === 0) {\n                        translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                } else {\n                    if (ty === maxTy) {\n                        translateY.value = withTiming(0, {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                }\n\n                overlapped.value = offsetY > 0;\n\n                lastOffsetY.value = offsetY;\n            }\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            lastOffsetY.value = offsetY;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            // If toolbar is already positioned on edge, do nothing.\n            if (ty <= maxTy || ty >= 0) {\n                return;\n            }\n\n            const threshold = maxTy * 0.5;\n\n            const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n            overlapped.value = offsetY + nextTranslateY > 0;\n\n            translateY.value = withTiming(nextTranslateY, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        },\n    }, [appBarHeight]);\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        { paddingTop: safeAreaInsets.top },\n        hasCollapsible ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        vectorY,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarMaxHeight : 0 },\n    };\n};\n"],"mappings":"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"}

package/build/commonjs/hooks/useUnstableToggleDisplayStyle.js

@@ -17,10 +17,10 @@ function useAnimatedDisplayStyle(vectorY) {
     } else if (vy < threshold) {
       display.value = 'flex';
     }
-  });
+  }, [threshold]);
   return (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     display: display.value
-  }));
+  }), []);
 }
 
 ;

package/build/commonjs/hooks/useUnstableToggleDisplayStyle.js.map

@@ -1 +1 @@
-{"version":3,"names":["useAnimatedDisplayStyle","vectorY","threshold","defaultDisplay","display","useSharedValue","useAnimatedReaction","value","vy","useAnimatedStyle"],"sources":["useUnstableToggleDisplayStyle.ts"],"sourcesContent":["import type { SharedValue } from 'react-native-reanimated';\nimport { useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';\n\nexport default function useAnimatedDisplayStyle(\n    vectorY: SharedValue<number>,\n    threshold: number = 200,\n    defaultDisplay: 'flex' | 'none' = 'flex',\n) {\n    const display = useSharedValue(defaultDisplay);\n\n    useAnimatedReaction(\n        () => vectorY.value,\n        (vy) => {\n            if (vy >= threshold) {\n                display.value = 'none';\n            } else if (vy < threshold) {\n                display.value = 'flex';\n            }\n        },\n    );\n\n    return useAnimatedStyle(() => ({\n        display: display.value,\n    }));\n};\n"],"mappings":";;;;;;;AACA;;AAEe,SAASA,uBAAT,CACXC,OADW,EAIb;EAAA,IAFEC,SAEF,uEAFsB,GAEtB;EAAA,IADEC,cACF,uEADoC,MACpC;EACE,MAAMC,OAAO,GAAG,IAAAC,qCAAA,EAAeF,cAAf,CAAhB;EAEA,IAAAG,0CAAA,EACI,MAAML,OAAO,CAACM,KADlB,EAEKC,EAAD,IAAQ;IACJ,IAAIA,EAAE,IAAIN,SAAV,EAAqB;MACjBE,OAAO,CAACG,KAAR,GAAgB,MAAhB;IACH,CAFD,MAEO,IAAIC,EAAE,GAAGN,SAAT,EAAoB;MACvBE,OAAO,CAACG,KAAR,GAAgB,MAAhB;IACH;EACJ,CARL;EAWA,OAAO,IAAAE,uCAAA,EAAiB,OAAO;IAC3BL,OAAO,EAAEA,OAAO,CAACG;EADU,CAAP,CAAjB,CAAP;AAGH;;AAAA"}
+{"version":3,"names":["useAnimatedDisplayStyle","vectorY","threshold","defaultDisplay","display","useSharedValue","useAnimatedReaction","value","vy","useAnimatedStyle"],"sources":["useUnstableToggleDisplayStyle.ts"],"sourcesContent":["import type { SharedValue } from 'react-native-reanimated';\nimport { useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';\n\nexport default function useAnimatedDisplayStyle(\n    vectorY: SharedValue<number>,\n    threshold: number = 200,\n    defaultDisplay: 'flex' | 'none' = 'flex',\n) {\n    const display = useSharedValue(defaultDisplay);\n\n    useAnimatedReaction(\n        () => vectorY.value,\n        (vy) => {\n            if (vy >= threshold) {\n                display.value = 'none';\n            } else if (vy < threshold) {\n                display.value = 'flex';\n            }\n        },\n        [threshold],\n    );\n\n    return useAnimatedStyle(() => ({\n        display: display.value,\n    }), []);\n};\n"],"mappings":";;;;;;;AACA;;AAEe,SAASA,uBAAT,CACXC,OADW,EAIb;EAAA,IAFEC,SAEF,uEAFsB,GAEtB;EAAA,IADEC,cACF,uEADoC,MACpC;EACE,MAAMC,OAAO,GAAG,IAAAC,qCAAA,EAAeF,cAAf,CAAhB;EAEA,IAAAG,0CAAA,EACI,MAAML,OAAO,CAACM,KADlB,EAEKC,EAAD,IAAQ;IACJ,IAAIA,EAAE,IAAIN,SAAV,EAAqB;MACjBE,OAAO,CAACG,KAAR,GAAgB,MAAhB;IACH,CAFD,MAEO,IAAIC,EAAE,GAAGN,SAAT,EAAoB;MACvBE,OAAO,CAACG,KAAR,GAAgB,MAAhB;IACH;EACJ,CARL,EASI,CAACL,SAAD,CATJ;EAYA,OAAO,IAAAO,uCAAA,EAAiB,OAAO;IAC3BL,OAAO,EAAEA,OAAO,CAACG;EADU,CAAP,CAAjB,EAEH,EAFG,CAAP;AAGH;;AAAA"}

package/build/commonjs/index.js

@@ -11,7 +11,8 @@ var _exportNames = {
   ViewPager: true,
   ComicViewer: true,
   StatusBarProvider: true,
-  useStatusBarContext: true
+  useStatusBarContext: true,
+  ViewabilityTrackerView: true
 };
 Object.defineProperty(exports, "BottomSheet", {
   enumerable: true,
@@ -55,6 +56,12 @@ Object.defineProperty(exports, "ViewPager", {
     return _ViewPager.default;
   }
 });
+Object.defineProperty(exports, "ViewabilityTrackerView", {
+  enumerable: true,
+  get: function () {
+    return _ViewabilityTrackerView.default;
+  }
+});
 Object.defineProperty(exports, "useStatusBarContext", {
   enumerable: true,
   get: function () {
@@ -160,6 +167,20 @@ Object.keys(_StatusBarProvider).forEach(function (key) {
   });
 });
 
+var _ViewabilityTrackerView = _interopRequireWildcard(require("./ViewabilityTrackerView"));
+
+Object.keys(_ViewabilityTrackerView).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ViewabilityTrackerView[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ViewabilityTrackerView[key];
+    }
+  });
+});
+
 var _hooks = require("./hooks");
 
 Object.keys(_hooks).forEach(function (key) {

package/build/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as BottomSheet } from './BottomSheet';\nexport * from './BottomSheet';\n\nexport { default as Carousel } from './Carousel';\nexport * from './Carousel';\n\nexport { default as DateTimePicker } from './DateTimePicker';\nexport * from './DateTimePicker';\n\nexport { default as FlipCard } from './FlipCard';\nexport * from './FlipCard';\n\nexport { default as ViewPager } from './ViewPager';\nexport * from './ViewPager';\n\nexport { default as ComicViewer } from './ComicViewer';\nexport * from './ComicViewer';\n\nexport { default as StatusBarProvider, useStatusBarContext } from './StatusBarProvider';\nexport * from './StatusBarProvider';\n\nexport * from './hooks';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as BottomSheet } from './BottomSheet';\nexport * from './BottomSheet';\n\nexport { default as Carousel } from './Carousel';\nexport * from './Carousel';\n\nexport { default as DateTimePicker } from './DateTimePicker';\nexport * from './DateTimePicker';\n\nexport { default as FlipCard } from './FlipCard';\nexport * from './FlipCard';\n\nexport { default as ViewPager } from './ViewPager';\nexport * from './ViewPager';\n\nexport { default as ComicViewer } from './ComicViewer';\nexport * from './ComicViewer';\n\nexport { default as StatusBarProvider, useStatusBarContext } from './StatusBarProvider';\nexport * from './StatusBarProvider';\n\nexport { default as ViewabilityTrackerView } from './ViewabilityTrackerView';\nexport * from './ViewabilityTrackerView';\n\nexport * from './hooks';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/build/module/AnimatedY/AnimatedY.js

@@ -1,5 +1,9 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+const ANIMATION_CONFIG = {
+  duration: 150,
+  easing: Easing.out(Easing.exp)
+};
 export default function AnimatedY(props) {
   const {
     children,
@@ -11,13 +15,10 @@ export default function AnimatedY(props) {
     transform: [{
       translateY: animatedY.value
     }]
-  }));
-  React.useEffect(() => {
+  }), []);
+  useEffect(() => {
     if (translateY >= 0) {
-      animatedY.value = withTiming(translateY, {
-        duration: 150,
-        easing: Easing.out(Easing.exp)
-      });
+      animatedY.value = withTiming(translateY, ANIMATION_CONFIG);
     }
   }, [translateY]);
   return /*#__PURE__*/React.createElement(Animated.View, {

package/build/module/AnimatedY/AnimatedY.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Animated","Easing","useAnimatedStyle","useSharedValue","withTiming","AnimatedY","props","children","translateY","style","animatedY","animatedStyle","transform","value","useEffect","duration","easing","out","exp"],"sources":["AnimatedY.tsx"],"sourcesContent":["import React from 'react';\nimport Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport type AnimatedYProps from './AnimatedYProps';\n\nexport default function AnimatedY(props: AnimatedYProps) {\n    const {\n        children,\n        translateY,\n        style,\n    } = props;\n\n    const animatedY = useSharedValue(translateY);\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ translateY: animatedY.value }],\n    }));\n\n    React.useEffect(() => {\n        if (translateY >= 0) {\n            animatedY.value = withTiming(translateY, {\n                duration: 150,\n                easing: Easing.out(Easing.exp),\n            });\n        }\n    }, [translateY]);\n\n    return (\n        <Animated.View\n            children={children}\n            style={[\n                animatedStyle,\n                style,\n            ]}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,IAAmBC,MAAnB,EAA2BC,gBAA3B,EAA6CC,cAA7C,EAA6DC,UAA7D,QAA+E,yBAA/E;AAGA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,QADE;IAEFC,UAFE;IAGFC;EAHE,IAIFH,KAJJ;EAMA,MAAMI,SAAS,GAAGP,cAAc,CAACK,UAAD,CAAhC;EACA,MAAMG,aAAa,GAAGT,gBAAgB,CAAC,OAAO;IAC1CU,SAAS,EAAE,CAAC;MAAEJ,UAAU,EAAEE,SAAS,CAACG;IAAxB,CAAD;EAD+B,CAAP,CAAD,CAAtC;EAIAd,KAAK,CAACe,SAAN,CAAgB,MAAM;IAClB,IAAIN,UAAU,IAAI,CAAlB,EAAqB;MACjBE,SAAS,CAACG,KAAV,GAAkBT,UAAU,CAACI,UAAD,EAAa;QACrCO,QAAQ,EAAE,GAD2B;QAErCC,MAAM,EAAEf,MAAM,CAACgB,GAAP,CAAWhB,MAAM,CAACiB,GAAlB;MAF6B,CAAb,CAA5B;IAIH;EACJ,CAPD,EAOG,CAACV,UAAD,CAPH;EASA,oBACI,oBAAC,QAAD,CAAU,IAAV;IACI,QAAQ,EAAED,QADd;IAEI,KAAK,EAAE,CACHI,aADG,EAEHF,KAFG;EAFX,EADJ;AASH;AAAA"}
+{"version":3,"names":["React","useEffect","Animated","Easing","useAnimatedStyle","useSharedValue","withTiming","ANIMATION_CONFIG","duration","easing","out","exp","AnimatedY","props","children","translateY","style","animatedY","animatedStyle","transform","value"],"sources":["AnimatedY.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport type AnimatedYProps from './AnimatedYProps';\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = {\n    duration: 150,\n    easing: Easing.out(Easing.exp),\n};\n\nexport default function AnimatedY(props: AnimatedYProps) {\n    const {\n        children,\n        translateY,\n        style,\n    } = props;\n\n    const animatedY = useSharedValue(translateY);\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ translateY: animatedY.value }],\n    }), []);\n\n    useEffect(() => {\n        if (translateY >= 0) {\n            animatedY.value = withTiming(translateY, ANIMATION_CONFIG);\n        }\n    }, [translateY]);\n\n    return (\n        <Animated.View\n            children={children}\n            style={[\n                animatedStyle,\n                style,\n            ]}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,QAAiC,OAAjC;AAEA,OAAOC,QAAP,IAAmBC,MAAnB,EAA2BC,gBAA3B,EAA6CC,cAA7C,EAA6DC,UAA7D,QAA+E,yBAA/E;AAGA,MAAMC,gBAA4C,GAAG;EACjDC,QAAQ,EAAE,GADuC;EAEjDC,MAAM,EAAEN,MAAM,CAACO,GAAP,CAAWP,MAAM,CAACQ,GAAlB;AAFyC,CAArD;AAKA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,QADE;IAEFC,UAFE;IAGFC;EAHE,IAIFH,KAJJ;EAMA,MAAMI,SAAS,GAAGZ,cAAc,CAACU,UAAD,CAAhC;EACA,MAAMG,aAAa,GAAGd,gBAAgB,CAAC,OAAO;IAC1Ce,SAAS,EAAE,CAAC;MAAEJ,UAAU,EAAEE,SAAS,CAACG;IAAxB,CAAD;EAD+B,CAAP,CAAD,EAElC,EAFkC,CAAtC;EAIAnB,SAAS,CAAC,MAAM;IACZ,IAAIc,UAAU,IAAI,CAAlB,EAAqB;MACjBE,SAAS,CAACG,KAAV,GAAkBd,UAAU,CAACS,UAAD,EAAaR,gBAAb,CAA5B;IACH;EACJ,CAJQ,EAIN,CAACQ,UAAD,CAJM,CAAT;EAMA,oBACI,oBAAC,QAAD,CAAU,IAAV;IACI,QAAQ,EAAED,QADd;IAEI,KAAK,EAAE,CACHI,aADG,EAEHF,KAFG;EAFX,EADJ;AASH;AAAA"}

package/build/module/BottomSheet/BottomSheetNative.js

@@ -1,9 +1,10 @@
 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 } 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 } from '@gorhom/bottom-sheet';
+import { BottomSheetBackdrop, BottomSheetModal, BottomSheetModalProvider, BottomSheetScrollView } from '@gorhom/bottom-sheet';
 import TransparentBackdrop from './TransparentBackdrop';
 
 const NoHandle = () => null;
@@ -12,12 +13,22 @@ export default function BottomSheet(props) {
   const {
     backdropOpacity = 0.5,
     children,
+    enableDynamicSizing = true,
+    header,
+    topElement,
     index,
+    maxHeightNormalizedRatio = 0.9,
     onChange,
-    snapPoints
+    snapPoints = [],
+    disableDefaultBackgroundColor = false,
+    disableDefaultShadow = false
   } = props;
   const indexRef = React.useRef(-1);
   const bottomSheetRef = React.useRef(null);
+  const {
+    height: windowHeight
+  } = useWindowDimensions();
+  const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio);
   const handleChange = React.useCallback(newIndex => {
     indexRef.current = newIndex;
 
@@ -52,23 +63,53 @@ export default function BottomSheet(props) {
   const shadow = theme.shadow[12];
   const modalStyle = {
     backgroundColor: '#ffffff00',
-    ...Platform.select({
+    borderTopLeftRadius: theme.shape.roundnessExtra,
+    borderTopRightRadius: theme.shape.roundnessExtra,
+    ...(disableDefaultShadow ? {} : Platform.select({
       android: shadow === null || shadow === void 0 ? void 0 : shadow.elevation,
       ios: shadow === null || shadow === void 0 ? void 0 : shadow.shadow,
       web: shadow === null || shadow === void 0 ? void 0 : shadow.boxShadow
-    })
+    }))
   };
   const backgroundStyle = {
-    backgroundColor: theme.palette.paper.default
+    backgroundColor: disableDefaultBackgroundColor ? '#ffffff00' : theme.palette.paper.default,
+    borderTopLeftRadius: theme.shape.roundnessExtra,
+    borderTopRightRadius: theme.shape.roundnessExtra
+  };
+  const contentWrapperStyle = {
+    flex: 1,
+    borderTopLeftRadius: theme.shape.roundnessExtra,
+    borderTopRightRadius: theme.shape.roundnessExtra,
+    overflow: 'hidden'
   };
   const isBackdropTransparent = backdropOpacity <= 0;
 
   const OpacityAwareBackdrop = props => /*#__PURE__*/React.createElement(BottomSheetBackdrop, _extends({}, props, {
     appearsOnIndex: 0,
     disappearsOnIndex: -1,
-    opacity: backdropOpacity
+    opacity: backdropOpacity,
+    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
     ,
@@ -79,8 +120,22 @@ export default function BottomSheet(props) {
     onDismiss: handleDismiss,
     ref: bottomSheetRef,
     snapPoints: snapPoints,
-    style: modalStyle
-  }, children));
+    style: modalStyle,
+    enablePanDownToClose: Boolean(onChange),
+    enableDynamicSizing: enableDynamicSizing,
+    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,
+    stickyHeaderIndices: header ? [0] : undefined
+  }, header, children))));
 }
 ;
 //# sourceMappingURL=BottomSheetNative.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","Platform","useTheme","BottomSheetBackdrop","BottomSheetModal","BottomSheetModalProvider","TransparentBackdrop","NoHandle","BottomSheet","props","backdropOpacity","children","index","onChange","snapPoints","indexRef","useRef","bottomSheetRef","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","shadow","modalStyle","backgroundColor","select","android","elevation","ios","web","boxShadow","backgroundStyle","palette","paper","default","isBackdropTransparent","OpacityAwareBackdrop"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform } from 'react-native';\nimport { useTheme } from '@fountain-ui/styles';\nimport {\n    BottomSheetBackdrop,\n    BottomSheetBackdropProps,\n    BottomSheetModal,\n    BottomSheetModalProvider,\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        index,\n        onChange,\n        snapPoints,\n    } = props;\n\n    const indexRef = React.useRef<number>(-1);\n    const bottomSheetRef = React.useRef<BottomSheetModal | null>(null);\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        ...Platform.select<object>({\n            android: shadow?.elevation,\n            ios: shadow?.shadow,\n            web: shadow?.boxShadow,\n        }),\n    };\n    const backgroundStyle = {\n        backgroundColor: theme.palette.paper.default,\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        />\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            >\n                {children}\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","borderTopLeftRadius","shape","roundnessExtra","borderTopRightRadius","select","android","elevation","ios","web","boxShadow","backgroundStyle","palette","paper","default","contentWrapperStyle","flex","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        borderTopLeftRadius: theme.shape.roundnessExtra,\n        borderTopRightRadius: theme.shape.roundnessExtra,\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        borderTopLeftRadius: theme.shape.roundnessExtra,\n        borderTopRightRadius: theme.shape.roundnessExtra,\n    };\n    const contentWrapperStyle = {\n        flex: 1,\n        borderTopLeftRadius: theme.shape.roundnessExtra,\n        borderTopRightRadius: theme.shape.roundnessExtra,\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     * Snap index. You could also provide -1 to bottom sheet in closed state.\n     */\n    index: 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     */\n    snapPoints: Array<number>;\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,8 @@
 import React from 'react';
-import { Modal, Paper, StyleSheet, css, useTheme } from '@fountain-ui/core';
+import { ScrollView } from 'react-native';
+import { Column, Modal, Paper, StyleSheet, css, useTheme } from '@fountain-ui/core';
 import AnimatedY from '../AnimatedY';
+import useDynamicSnapPoints from './useDynamicSnapPoints';
 
 const useStyles = function () {
   const theme = useTheme();
@@ -15,25 +17,34 @@ const useStyles = function () {
       width: '100%'
     },
     paper: {
+      borderTopLeftRadius: theme.shape.roundnessExtra,
+      borderTopRightRadius: theme.shape.roundnessExtra,
       borderBottomLeftRadius: 0,
       borderBottomRightRadius: 0,
       flexGrow: 1,
       overflow: 'hidden'
+    },
+    topElementLocation: {
+      position: 'absolute',
+      bottom: 0,
+      width: '100%'
     }
   };
 };
 
-const calculateHeight = points => {
-  return points[points.length - 1] ?? 0;
-};
-
 export default function BottomSheet(props) {
   const {
     backdropOpacity,
     children,
+    enableDynamicSizing = true,
+    header,
+    topElement,
     index,
+    maxHeightNormalizedRatio = 0.9,
     onChange,
-    snapPoints
+    snapPoints = [],
+    disableDefaultBackgroundColor = false,
+    disableDefaultShadow = false
   } = props;
   const styles = useStyles();
 
@@ -43,8 +54,19 @@ export default function BottomSheet(props) {
     }
   };
 
-  const height = calculateHeight(snapPoints);
-  const translateY = height - (snapPoints[index] ?? 0);
+  const {
+    convertedSnapPoints,
+    handleContentSizeChange,
+    highestSnapPoint
+  } = useDynamicSnapPoints({
+    enableDynamicSizing,
+    maxHeightNormalizedRatio,
+    snapPoints
+  });
+  const translateY = highestSnapPoint - (convertedSnapPoints[index] ?? 0);
+  const paperStyles = [styles.paper, {
+    height: highestSnapPoint
+  }];
   return /*#__PURE__*/React.createElement(Modal, {
     backdropOpacity: backdropOpacity,
     onClose: handleClose,
@@ -53,12 +75,16 @@ export default function BottomSheet(props) {
   }, /*#__PURE__*/React.createElement(AnimatedY, {
     style: styles.animated,
     translateY: translateY
-  }, /*#__PURE__*/React.createElement(Paper, {
-    elevation: 12,
-    style: [styles.paper, {
-      height
-    }]
-  }, children)));
+  }, 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
+  }, /*#__PURE__*/React.createElement(ScrollView, {
+    onContentSizeChange: handleContentSizeChange,
+    stickyHeaderIndices: header ? [0] : undefined
+  }, header, children))));
 }
 ;
 //# sourceMappingURL=BottomSheetWeb.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","Modal","Paper","StyleSheet","css","useTheme","AnimatedY","useStyles","theme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","borderBottomLeftRadius","borderBottomRightRadius","flexGrow","overflow","calculateHeight","points","length","BottomSheet","props","backdropOpacity","children","index","onChange","snapPoints","styles","handleClose","height","translateY","absoluteFill"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React from 'react';\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';\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\nconst calculateHeight = (points: BottomSheetProps['snapPoints']): number => {\n    return points[points.length - 1] ?? 0;\n};\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity,\n        children,\n        index,\n        onChange,\n        snapPoints,\n    } = props;\n\n    const styles = useStyles();\n\n    const handleClose = () => {\n        if (onChange) {\n            onChange(-1);\n        }\n    };\n\n    const height = calculateHeight(snapPoints);\n    const translateY = height - (snapPoints[index] ?? 0);\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={12}\n                    style={[\n                        styles.paper,\n                        { height },\n                    ]}\n                >\n                    {children}\n                </Paper>\n            </AnimatedY>\n        </Modal>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,KAAT,EAAgBC,KAAhB,EAAuBC,UAAvB,EAAmCC,GAAnC,EAAwCC,QAAxC,QAAwD,mBAAxD;AAEA,OAAOC,SAAP,MAAsB,cAAtB;;AAKA,MAAMC,SAAuC,GAAG,YAA+B;EAC3E,MAAMC,KAAK,GAAGH,QAAQ,EAAtB;EAEA,OAAO;IACHI,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,MAAMC,eAAe,GAAIC,MAAD,IAAoD;EACxE,OAAOA,MAAM,CAACA,MAAM,CAACC,MAAP,GAAgB,CAAjB,CAAN,IAA6B,CAApC;AACH,CAFD;;AAIA,eAAe,SAASC,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,eADE;IAEFC,QAFE;IAGFC,KAHE;IAIFC,QAJE;IAKFC;EALE,IAMFL,KANJ;EAQA,MAAMM,MAAM,GAAGzB,SAAS,EAAxB;;EAEA,MAAM0B,WAAW,GAAG,MAAM;IACtB,IAAIH,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAAC,CAAF,CAAR;IACH;EACJ,CAJD;;EAMA,MAAMI,MAAM,GAAGZ,eAAe,CAACS,UAAD,CAA9B;EACA,MAAMI,UAAU,GAAGD,MAAM,IAAIH,UAAU,CAACF,KAAD,CAAV,IAAqB,CAAzB,CAAzB;EAEA,oBACI,oBAAC,KAAD;IACI,eAAe,EAAEF,eADrB;IAEI,OAAO,EAAEM,WAFb;IAGI,OAAO,EAAEJ,KAAK,IAAI,CAHtB;IAII,KAAK,EAAEzB,GAAG,CAAC,CAACD,UAAU,CAACiC,YAAZ,EAA0BJ,MAAM,CAACvB,IAAjC,CAAD;EAJd,gBAMI,oBAAC,SAAD;IACI,KAAK,EAAEuB,MAAM,CAACnB,QADlB;IAEI,UAAU,EAAEsB;EAFhB,gBAII,oBAAC,KAAD;IACI,SAAS,EAAE,EADf;IAEI,KAAK,EAAE,CACHH,MAAM,CAACf,KADJ,EAEH;MAAEiB;IAAF,CAFG;EAFX,GAOKN,QAPL,CAJJ,CANJ,CADJ;AAuBH;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","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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"}