@fountain-ui/lab 3.0.0-alpha.1 → 3.0.0-alpha.11

package/build/commonjs/BottomSheet/BottomSheetNative.js

@@ -17,6 +17,8 @@ var _styles = require("@fountain-ui/styles");
 
 var _TransparentBackdrop = _interopRequireDefault(require("./TransparentBackdrop"));
 
+var _useDynamicSnapPoints = _interopRequireDefault(require("./useDynamicSnapPoints.native"));
+
 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); }
@@ -30,6 +32,7 @@ const NoHandle = () => null;
 function BottomSheet(props) {
   const {
     backdropOpacity = 0.5,
+    backgroundStyle: backgroundStyleProp,
     borderRadius: borderRadiusProp,
     children,
     enableDynamicSizing = true,
@@ -37,7 +40,8 @@ function BottomSheet(props) {
     index,
     maxHeightNormalizedRatio = 0.8,
     onChange,
-    snapPoints = []
+    snapPoints = [],
+    style: styleProp
   } = props;
   const indexRef = (0, _react.useRef)(-1);
   const bottomSheetRef = (0, _react.useRef)(null);
@@ -86,19 +90,22 @@ function BottomSheet(props) {
   }, [index]);
   const theme = (0, _styles.useTheme)();
   const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;
-  const backgroundStyle = {
+  const backgroundStyle = (0, _core.css)([{
     backgroundColor: theme.palette.surface.base,
     borderTopLeftRadius: borderRadius,
     borderTopRightRadius: borderRadius
-  };
-  const contentWrapperStyle = {
-    flex: 1,
+  }, backgroundStyleProp]);
+  const contentWrapperStyle = (0, _core.css)([{
+    backgroundColor: theme.palette.surface.base,
+    borderTopLeftRadius: borderRadius,
+    borderTopRightRadius: borderRadius,
+    flexShrink: 1,
     maxHeight: maxDynamicContentSize,
-    minHeight: 300,
+    minHeight: 325,
     overflow: 'hidden',
     paddingBottom: theme.spacing(6),
     paddingTop: theme.spacing(5.5)
-  };
+  }, styleProp]);
   const isBackdropTransparent = backdropOpacity <= 0;
 
   const OpacityAwareBackdrop = props => /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetBackdrop, _extends({}, props, {
@@ -128,6 +135,12 @@ function BottomSheet(props) {
     }).start();
   };
 
+  const {
+    animatedHandleHeight,
+    animatedSnapPoints,
+    animatedContentHeight,
+    handleContentLayout
+  } = (0, _useDynamicSnapPoints.default)(snapPoints);
   return /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetModalProvider, null, /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetModal, {
     backdropComponent: isBackdropTransparent ? _TransparentBackdrop.default : OpacityAwareBackdrop // @ts-ignore
     ,
@@ -137,18 +150,21 @@ function BottomSheet(props) {
     onChange: handleChange,
     onDismiss: handleDismiss,
     ref: bottomSheetRef,
-    snapPoints: snapPoints,
     enablePanDownToClose: Boolean(onChange),
     enableDynamicSizing: enableDynamicSizing,
     maxDynamicContentSize: maxDynamicContentSize,
     detached: Boolean(topElement),
-    onAnimate: topElement ? onAnimate : undefined
+    onAnimate: topElement ? onAnimate : undefined,
+    snapPoints: animatedSnapPoints,
+    handleHeight: animatedHandleHeight,
+    contentHeight: animatedContentHeight
   }, topElement ? /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
     style: topElementAnimationStyle
   }, /*#__PURE__*/_react.default.createElement(_core.Column, {
     onLayout: handleTopElementLayout,
     style: topElementLocationStyle
   }, topElement)) : null, /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetView, {
+    onLayout: handleContentLayout,
     style: contentWrapperStyle
   }, children)));
 }

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

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

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

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

package/build/commonjs/BottomSheet/BottomSheetWeb.js

@@ -38,7 +38,7 @@ const useStyles = function () {
       borderTopLeftRadius: theme.shape.radius.xxl,
       borderTopRightRadius: theme.shape.radius.xxl,
       flexGrow: 1,
-      minHeight: 300,
+      minHeight: 325,
       overflow: 'hidden',
       paddingBottom: theme.spacing(6),
       paddingTop: theme.spacing(5.5)
@@ -61,7 +61,8 @@ function BottomSheet(props) {
     index,
     maxHeightNormalizedRatio = 0.8,
     onChange,
-    snapPoints = []
+    snapPoints = [],
+    style: styleProp
   } = props;
   const styles = useStyles();
   const {
@@ -101,7 +102,7 @@ function BottomSheet(props) {
       height: highestSnapPoint
     } : {}),
     maxHeight: maxDynamicContentSize
-  }]);
+  }, styleProp]);
   return /*#__PURE__*/_react.default.createElement(_core.Modal, {
     backdropOpacity: backdropOpacity,
     onClose: handleClose,

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

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","backgroundColor","palette","surface","base","borderTopLeftRadius","shape","radius","xxl","borderTopRightRadius","flexGrow","minHeight","overflow","paddingBottom","spacing","paddingTop","topElementLocation","position","bottom","BottomSheet","props","backdropOpacity","borderRadius","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","styles","height","windowHeight","useWindowDimensions","topElementHeight","setTopElementHeight","useState","maxDynamicContentSize","Math","round","handleTopElementLayout","event","nativeEvent","layout","handleClose","convertedSnapPoints","handleLayout","highestSnapPoint","useDynamicSnapPoints","translateY","contentStyles","css","maxHeight","StyleSheet","absoluteFill"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions, View } from 'react-native';\nimport { Column, css, Modal, StyleSheet, useTheme } from '@fountain-ui/core';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport AnimatedY from '../AnimatedY';\nimport type BottomSheetProps from './BottomSheetProps';\nimport useDynamicSnapPoints from './useDynamicSnapPoints';\n\ntype BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'topElementLocation'>;\n\nconst useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            justifyContent: 'flex-end',\n            zIndex: theme.zIndex.dialog,\n        },\n        animated: {\n            alignSelf: 'center',\n            maxWidth: 720,\n            width: '100%',\n        },\n        paper: {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: theme.shape.radius.xxl,\n            borderTopRightRadius: theme.shape.radius.xxl,\n            flexGrow: 1,\n            minHeight: 300,\n            overflow: 'hidden',\n            paddingBottom: theme.spacing(6),\n            paddingTop: theme.spacing(5.5),\n        },\n        topElementLocation: {\n            position: 'absolute',\n            bottom: 0,\n            width: '100%',\n        },\n    };\n};\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity,\n        borderRadius,\n        children,\n        enableDynamicSizing = true,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.8,\n        onChange,\n        snapPoints = [],\n    } = props;\n\n    const styles = useStyles();\n\n    const { height: windowHeight } = useWindowDimensions();\n\n    const [topElementHeight, setTopElementHeight] = useState(0);\n\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;\n\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const handleClose = () => {\n        if (onChange) {\n            onChange(-1);\n        }\n    };\n\n    const {\n        convertedSnapPoints,\n        handleLayout,\n        highestSnapPoint,\n    } = useDynamicSnapPoints({\n        enableDynamicSizing,\n        maxDynamicContentSize,\n        snapPoints,\n    });\n\n    const translateY = highestSnapPoint - (convertedSnapPoints[index] ?? 0);\n\n    const contentStyles = css([\n        styles.paper,\n        {\n            ...(borderRadius ? { borderTopLeftRadius: borderRadius, borderTopRightRadius: borderRadius } : {}),\n            ...(highestSnapPoint !== maxDynamicContentSize ? { height: highestSnapPoint } : {}),\n            maxHeight: maxDynamicContentSize,\n        },\n    ]);\n\n    return (\n        <Modal\n            backdropOpacity={backdropOpacity}\n            onClose={handleClose}\n            visible={index >= 0}\n            style={css([StyleSheet.absoluteFill, styles.root])}\n        >\n            <AnimatedY translateY={translateY}>\n                {topElement ? (\n                    <Column\n                        onLayout={handleTopElementLayout}\n                        style={styles.topElementLocation}\n                    >\n                        {topElement}\n                    </Column>\n                ) : null}\n\n                <View\n                    onLayout={handleLayout}\n                    style={contentStyles}\n                >\n                    {children}\n                </View>\n            </AnimatedY>\n        </Modal>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["useStyles","theme","useTheme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","backgroundColor","palette","surface","base","borderTopLeftRadius","shape","radius","xxl","borderTopRightRadius","flexGrow","minHeight","overflow","paddingBottom","spacing","paddingTop","topElementLocation","position","bottom","BottomSheet","props","backdropOpacity","borderRadius","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","style","styleProp","styles","height","windowHeight","useWindowDimensions","topElementHeight","setTopElementHeight","useState","maxDynamicContentSize","Math","round","handleTopElementLayout","event","nativeEvent","layout","handleClose","convertedSnapPoints","handleLayout","highestSnapPoint","useDynamicSnapPoints","translateY","contentStyles","css","maxHeight","StyleSheet","absoluteFill"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions, View } from 'react-native';\nimport { Column, css, Modal, StyleSheet, useTheme } from '@fountain-ui/core';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport AnimatedY from '../AnimatedY';\nimport type BottomSheetProps from './BottomSheetProps';\nimport useDynamicSnapPoints from './useDynamicSnapPoints';\n\ntype BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'topElementLocation'>;\n\nconst useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            justifyContent: 'flex-end',\n            zIndex: theme.zIndex.dialog,\n        },\n        animated: {\n            alignSelf: 'center',\n            maxWidth: 720,\n            width: '100%',\n        },\n        paper: {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: theme.shape.radius.xxl,\n            borderTopRightRadius: theme.shape.radius.xxl,\n            flexGrow: 1,\n            minHeight: 325,\n            overflow: 'hidden',\n            paddingBottom: theme.spacing(6),\n            paddingTop: theme.spacing(5.5),\n        },\n        topElementLocation: {\n            position: 'absolute',\n            bottom: 0,\n            width: '100%',\n        },\n    };\n};\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity,\n        borderRadius,\n        children,\n        enableDynamicSizing = true,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.8,\n        onChange,\n        snapPoints = [],\n        style: styleProp,\n    } = props;\n\n    const styles = useStyles();\n\n    const { height: windowHeight } = useWindowDimensions();\n\n    const [topElementHeight, setTopElementHeight] = useState(0);\n\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;\n\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const handleClose = () => {\n        if (onChange) {\n            onChange(-1);\n        }\n    };\n\n    const {\n        convertedSnapPoints,\n        handleLayout,\n        highestSnapPoint,\n    } = useDynamicSnapPoints({\n        enableDynamicSizing,\n        maxDynamicContentSize,\n        snapPoints,\n    });\n\n    const translateY = highestSnapPoint - (convertedSnapPoints[index] ?? 0);\n\n    const contentStyles = css([\n        styles.paper,\n        {\n            ...(borderRadius ? { borderTopLeftRadius: borderRadius, borderTopRightRadius: borderRadius } : {}),\n            ...(highestSnapPoint !== maxDynamicContentSize ? { height: highestSnapPoint } : {}),\n            maxHeight: maxDynamicContentSize,\n        },\n        styleProp,\n    ]);\n\n    return (\n        <Modal\n            backdropOpacity={backdropOpacity}\n            onClose={handleClose}\n            visible={index >= 0}\n            style={css([StyleSheet.absoluteFill, styles.root])}\n        >\n            <AnimatedY translateY={translateY}>\n                {topElement ? (\n                    <Column\n                        onLayout={handleTopElementLayout}\n                        style={styles.topElementLocation}\n                    >\n                        {topElement}\n                    </Column>\n                ) : null}\n\n                <View\n                    onLayout={handleLayout}\n                    style={contentStyles}\n                >\n                    {children}\n                </View>\n            </AnimatedY>\n        </Modal>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/BottomSheet/useDynamicSnapPoints.native.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useDynamicSnapPoints;
+
+var _bottomSheet = require("@gorhom/bottom-sheet");
+
+function useDynamicSnapPoints(snapPoints) {
+  if (snapPoints !== null && snapPoints !== void 0 && snapPoints.includes('CONTENT_HEIGHT')) {
+    return (0, _bottomSheet.useBottomSheetDynamicSnapPoints)(snapPoints);
+  }
+
+  return {
+    animatedHandleHeight: undefined,
+    animatedSnapPoints: snapPoints,
+    animatedContentHeight: undefined,
+    handleContentLayout: undefined
+  };
+}
+//# sourceMappingURL=useDynamicSnapPoints.native.js.map

package/build/commonjs/BottomSheet/useDynamicSnapPoints.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useDynamicSnapPoints","snapPoints","includes","useBottomSheetDynamicSnapPoints","animatedHandleHeight","undefined","animatedSnapPoints","animatedContentHeight","handleContentLayout"],"sources":["useDynamicSnapPoints.native.ts"],"sourcesContent":["import { useBottomSheetDynamicSnapPoints } from '@gorhom/bottom-sheet';\nimport type BottomSheetProps from './BottomSheetProps';\n\nexport default function useDynamicSnapPoints(snapPoints: BottomSheetProps['snapPoints']) {\n    if (snapPoints?.includes('CONTENT_HEIGHT')) {\n        return useBottomSheetDynamicSnapPoints(snapPoints);\n    }\n\n    return {\n        animatedHandleHeight: undefined,\n        animatedSnapPoints: snapPoints,\n        animatedContentHeight: undefined,\n        handleContentLayout: undefined,\n    };\n}\n"],"mappings":";;;;;;;AAAA;;AAGe,SAASA,oBAAT,CAA8BC,UAA9B,EAA0E;EACrF,IAAIA,UAAJ,aAAIA,UAAJ,eAAIA,UAAU,CAAEC,QAAZ,CAAqB,gBAArB,CAAJ,EAA4C;IACxC,OAAO,IAAAC,4CAAA,EAAgCF,UAAhC,CAAP;EACH;;EAED,OAAO;IACHG,oBAAoB,EAAEC,SADnB;IAEHC,kBAAkB,EAAEL,UAFjB;IAGHM,qBAAqB,EAAEF,SAHpB;IAIHG,mBAAmB,EAAEH;EAJlB,CAAP;AAMH"}

package/build/commonjs/DateTimePicker/DateTimePicker.js

@@ -40,7 +40,7 @@ function DateTimePicker(props) {
   } = props;
   const theme = (0, _styles.useTheme)();
   const textDayFontStyle = (0, _core.createFontStyle)(theme, {
-    selector: typo => typo.body2
+    selector: typo => typo.body2.medium
   });
 
   const [yearPickerVisible, setYearPickerVisible] = _react.default.useState(false);

package/build/commonjs/DateTimePicker/DateTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["useDateTimePicker","React","useContext","DateTimePickerContext","DateTimePicker","props","currentMonth","Date","locale","markedDate","markedDateProp","maxDate","minDate","onDayPress","onYearPress","onYearPressProp","theme","useTheme","textDayFontStyle","createFontStyle","selector","typo","body2","yearPickerVisible","setYearPickerVisible","useState","locales","LeftArrow","RightArrow","date","LocaleConfig","defaultLocale","format","direction","selected","disableTouchEvent","selectedColor","palette","primary","main","selectedTextColor","contrastTextColor","formatDate","toDate","backgroundColor","paper","default","calendarBackground","dayTextColor","text","textDisabledColor","hint","textDayFontFamily","fontFamily","textDayFontSize","fontSize","textDayFontWeight","fontWeight","textDayHeaderFontFamily","textDayHeaderFontSize","textDayHeaderFontWeight"],"sources":["DateTimePicker.tsx"],"sourcesContent":["import React from 'react';\nimport { format } from 'date-fns';\n//@ts-ignore\nimport { Calendar, LocaleConfig } from 'react-native-calendars';\nimport { Button, createFontStyle, Typography } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport YearPicker from './YearPicker';\nimport { DateTimePickerContext } from './DateTimePickerProvider';\nimport type DateTimePickerProps from './DateTimePickerProps';\nimport { formatDate } from './utils';\n\nconst useDateTimePicker = () => {\n    return React.useContext(DateTimePickerContext);\n};\n\nexport default function DateTimePicker(props: DateTimePickerProps) {\n    const {\n        currentMonth = new Date(),\n        locale,\n        markedDate: markedDateProp,\n        maxDate,\n        minDate,\n        onDayPress,\n        onYearPress: onYearPressProp,\n    } = props;\n\n    const theme = useTheme();\n\n    const textDayFontStyle = createFontStyle(theme, { selector: (typo) => typo.body2 });\n\n    const [yearPickerVisible, setYearPickerVisible] = React.useState(false);\n    const { locales } = useDateTimePicker();\n\n    //TODO: Need to update arrow components\n    const LeftArrow = <Typography children={'<'} color={'strong'}/>;\n    const RightArrow = <Typography children={'>'} color={'strong'}/>;\n\n    const onYearPress = (date: Date) => {\n        setYearPickerVisible(false);\n        onYearPressProp && onYearPressProp(date);\n    };\n\n    if (locale) {\n        LocaleConfig.locales = locales;\n        LocaleConfig.defaultLocale = locale;\n    }\n\n    const markedDate = markedDateProp ? format(markedDateProp, 'yyyy-MM-dd') : '';\n\n    if (yearPickerVisible) {\n        return (\n            <YearPicker\n                date={currentMonth}\n                locale={locale}\n                maxDate={maxDate}\n                minDate={minDate}\n                onYearPress={onYearPress}\n            />\n        );\n    }\n\n    return (\n        <Calendar\n            current={currentMonth}\n            onDayPress={onDayPress}\n            maxDate={maxDate}\n            minDate={minDate}\n            renderArrow={(direction: string) => direction === 'left' ? LeftArrow : RightArrow}\n            markedDates={{\n                [markedDate]: {\n                    selected: true,\n                    disableTouchEvent: true,\n                    selectedColor: theme.palette.primary.main,\n                    selectedTextColor: theme.palette.primary.contrastTextColor,\n                },\n            }}\n            // @ts-ignore\n            renderHeader={(date) => (\n                <Button\n                    children={formatDate(date.toDate(), locale)}\n                    variant={'text'}\n                    size={'small'}\n                    onPress={() => setYearPickerVisible(true)}\n                />\n            )}\n            theme={{\n                backgroundColor: theme.palette.paper.default,\n                calendarBackground: theme.palette.paper.default,\n                dayTextColor: theme.palette.text.primary,\n                textDisabledColor: theme.palette.text.hint,\n                textDayFontFamily: textDayFontStyle.fontFamily,\n                textDayFontSize: textDayFontStyle.fontSize,\n                textDayFontWeight: textDayFontStyle.fontWeight,\n                textDayHeaderFontFamily: textDayFontStyle.fontFamily,\n                textDayHeaderFontSize: textDayFontStyle.fontSize,\n                textDayHeaderFontWeight: textDayFontStyle.fontWeight,\n            }}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;AAPA;AASA,MAAMA,iBAAiB,GAAG,MAAM;EAC5B,OAAOC,cAAA,CAAMC,UAAN,CAAiBC,6CAAjB,CAAP;AACH,CAFD;;AAIe,SAASC,cAAT,CAAwBC,KAAxB,EAAoD;EAC/D,MAAM;IACFC,YAAY,GAAG,IAAIC,IAAJ,EADb;IAEFC,MAFE;IAGFC,UAAU,EAAEC,cAHV;IAIFC,OAJE;IAKFC,OALE;IAMFC,UANE;IAOFC,WAAW,EAAEC;EAPX,IAQFV,KARJ;EAUA,MAAMW,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,gBAAgB,GAAG,IAAAC,qBAAA,EAAgBH,KAAhB,EAAuB;IAAEI,QAAQ,EAAGC,IAAD,IAAUA,IAAI,CAACC;EAA3B,CAAvB,CAAzB;;EAEA,MAAM,CAACC,iBAAD,EAAoBC,oBAApB,IAA4CvB,cAAA,CAAMwB,QAAN,CAAe,KAAf,CAAlD;;EACA,MAAM;IAAEC;EAAF,IAAc1B,iBAAiB,EAArC,CAhB+D,CAkB/D;;EACA,MAAM2B,SAAS,gBAAG,6BAAC,gBAAD;IAAY,QAAQ,EAAE,GAAtB;IAA2B,KAAK,EAAE;EAAlC,EAAlB;;EACA,MAAMC,UAAU,gBAAG,6BAAC,gBAAD;IAAY,QAAQ,EAAE,GAAtB;IAA2B,KAAK,EAAE;EAAlC,EAAnB;;EAEA,MAAMd,WAAW,GAAIe,IAAD,IAAgB;IAChCL,oBAAoB,CAAC,KAAD,CAApB;IACAT,eAAe,IAAIA,eAAe,CAACc,IAAD,CAAlC;EACH,CAHD;;EAKA,IAAIrB,MAAJ,EAAY;IACRsB,kCAAA,CAAaJ,OAAb,GAAuBA,OAAvB;IACAI,kCAAA,CAAaC,aAAb,GAA6BvB,MAA7B;EACH;;EAED,MAAMC,UAAU,GAAGC,cAAc,GAAG,IAAAsB,eAAA,EAAOtB,cAAP,EAAuB,YAAvB,CAAH,GAA0C,EAA3E;;EAEA,IAAIa,iBAAJ,EAAuB;IACnB,oBACI,6BAAC,mBAAD;MACI,IAAI,EAAEjB,YADV;MAEI,MAAM,EAAEE,MAFZ;MAGI,OAAO,EAAEG,OAHb;MAII,OAAO,EAAEC,OAJb;MAKI,WAAW,EAAEE;IALjB,EADJ;EASH;;EAED,oBACI,6BAAC,8BAAD;IACI,OAAO,EAAER,YADb;IAEI,UAAU,EAAEO,UAFhB;IAGI,OAAO,EAAEF,OAHb;IAII,OAAO,EAAEC,OAJb;IAKI,WAAW,EAAGqB,SAAD,IAAuBA,SAAS,KAAK,MAAd,GAAuBN,SAAvB,GAAmCC,UAL3E;IAMI,WAAW,EAAE;MACT,CAACnB,UAAD,GAAc;QACVyB,QAAQ,EAAE,IADA;QAEVC,iBAAiB,EAAE,IAFT;QAGVC,aAAa,EAAEpB,KAAK,CAACqB,OAAN,CAAcC,OAAd,CAAsBC,IAH3B;QAIVC,iBAAiB,EAAExB,KAAK,CAACqB,OAAN,CAAcC,OAAd,CAAsBG;MAJ/B;IADL,CANjB,CAcI;IAdJ;IAeI,YAAY,EAAGZ,IAAD,iBACV,6BAAC,YAAD;MACI,QAAQ,EAAE,IAAAa,iBAAA,EAAWb,IAAI,CAACc,MAAL,EAAX,EAA0BnC,MAA1B,CADd;MAEI,OAAO,EAAE,MAFb;MAGI,IAAI,EAAE,OAHV;MAII,OAAO,EAAE,MAAMgB,oBAAoB,CAAC,IAAD;IAJvC,EAhBR;IAuBI,KAAK,EAAE;MACHoB,eAAe,EAAE5B,KAAK,CAACqB,OAAN,CAAcQ,KAAd,CAAoBC,OADlC;MAEHC,kBAAkB,EAAE/B,KAAK,CAACqB,OAAN,CAAcQ,KAAd,CAAoBC,OAFrC;MAGHE,YAAY,EAAEhC,KAAK,CAACqB,OAAN,CAAcY,IAAd,CAAmBX,OAH9B;MAIHY,iBAAiB,EAAElC,KAAK,CAACqB,OAAN,CAAcY,IAAd,CAAmBE,IAJnC;MAKHC,iBAAiB,EAAElC,gBAAgB,CAACmC,UALjC;MAMHC,eAAe,EAAEpC,gBAAgB,CAACqC,QAN/B;MAOHC,iBAAiB,EAAEtC,gBAAgB,CAACuC,UAPjC;MAQHC,uBAAuB,EAAExC,gBAAgB,CAACmC,UARvC;MASHM,qBAAqB,EAAEzC,gBAAgB,CAACqC,QATrC;MAUHK,uBAAuB,EAAE1C,gBAAgB,CAACuC;IAVvC;EAvBX,EADJ;AAsCH;;AAAA"}
+{"version":3,"names":["useDateTimePicker","React","useContext","DateTimePickerContext","DateTimePicker","props","currentMonth","Date","locale","markedDate","markedDateProp","maxDate","minDate","onDayPress","onYearPress","onYearPressProp","theme","useTheme","textDayFontStyle","createFontStyle","selector","typo","body2","medium","yearPickerVisible","setYearPickerVisible","useState","locales","LeftArrow","RightArrow","date","LocaleConfig","defaultLocale","format","direction","selected","disableTouchEvent","selectedColor","palette","primary","main","selectedTextColor","contrastTextColor","formatDate","toDate","backgroundColor","paper","default","calendarBackground","dayTextColor","text","textDisabledColor","hint","textDayFontFamily","fontFamily","textDayFontSize","fontSize","textDayFontWeight","fontWeight","textDayHeaderFontFamily","textDayHeaderFontSize","textDayHeaderFontWeight"],"sources":["DateTimePicker.tsx"],"sourcesContent":["import React from 'react';\nimport { format } from 'date-fns';\n//@ts-ignore\nimport { Calendar, LocaleConfig } from 'react-native-calendars';\nimport { Button, createFontStyle, Typography } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport YearPicker from './YearPicker';\nimport { DateTimePickerContext } from './DateTimePickerProvider';\nimport type DateTimePickerProps from './DateTimePickerProps';\nimport { formatDate } from './utils';\n\nconst useDateTimePicker = () => {\n    return React.useContext(DateTimePickerContext);\n};\n\nexport default function DateTimePicker(props: DateTimePickerProps) {\n    const {\n        currentMonth = new Date(),\n        locale,\n        markedDate: markedDateProp,\n        maxDate,\n        minDate,\n        onDayPress,\n        onYearPress: onYearPressProp,\n    } = props;\n\n    const theme = useTheme();\n\n    const textDayFontStyle = createFontStyle(theme, { selector: (typo) => typo.body2.medium });\n\n    const [yearPickerVisible, setYearPickerVisible] = React.useState(false);\n    const { locales } = useDateTimePicker();\n\n    //TODO: Need to update arrow components\n    const LeftArrow = <Typography children={'<'} color={'strong'}/>;\n    const RightArrow = <Typography children={'>'} color={'strong'}/>;\n\n    const onYearPress = (date: Date) => {\n        setYearPickerVisible(false);\n        onYearPressProp && onYearPressProp(date);\n    };\n\n    if (locale) {\n        LocaleConfig.locales = locales;\n        LocaleConfig.defaultLocale = locale;\n    }\n\n    const markedDate = markedDateProp ? format(markedDateProp, 'yyyy-MM-dd') : '';\n\n    if (yearPickerVisible) {\n        return (\n            <YearPicker\n                date={currentMonth}\n                locale={locale}\n                maxDate={maxDate}\n                minDate={minDate}\n                onYearPress={onYearPress}\n            />\n        );\n    }\n\n    return (\n        <Calendar\n            current={currentMonth}\n            onDayPress={onDayPress}\n            maxDate={maxDate}\n            minDate={minDate}\n            renderArrow={(direction: string) => direction === 'left' ? LeftArrow : RightArrow}\n            markedDates={{\n                [markedDate]: {\n                    selected: true,\n                    disableTouchEvent: true,\n                    selectedColor: theme.palette.primary.main,\n                    selectedTextColor: theme.palette.primary.contrastTextColor,\n                },\n            }}\n            // @ts-ignore\n            renderHeader={(date) => (\n                <Button\n                    children={formatDate(date.toDate(), locale)}\n                    variant={'text'}\n                    size={'small'}\n                    onPress={() => setYearPickerVisible(true)}\n                />\n            )}\n            theme={{\n                backgroundColor: theme.palette.paper.default,\n                calendarBackground: theme.palette.paper.default,\n                dayTextColor: theme.palette.text.primary,\n                textDisabledColor: theme.palette.text.hint,\n                textDayFontFamily: textDayFontStyle.fontFamily,\n                textDayFontSize: textDayFontStyle.fontSize,\n                textDayFontWeight: textDayFontStyle.fontWeight,\n                textDayHeaderFontFamily: textDayFontStyle.fontFamily,\n                textDayHeaderFontSize: textDayFontStyle.fontSize,\n                textDayHeaderFontWeight: textDayFontStyle.fontWeight,\n            }}\n        />\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/hooks/useUnstableCollapsibleAppBar.js

@@ -179,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","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":";;;;;;;AAAA;;AACA;;AAEA;;AAOA;;AACA;;AACA;;AACA;;;;AA+BA,MAAMA,cAAiC,GAAG;EACtCC,qBAAqB,EAAE;AADe,CAA1C;AAIA,MAAMC,yBAAyB,GAAG,GAAlC;AAEA,MAAMC,uBAAuB,GAAGC,qBAAA,CAASC,EAAT,KAAgB,KAAhD;;AAEA,SAASC,6BAAT,CAAuCC,KAAvC,EAAsD;EAClD,MAAMC,kBAAkB,GAAG,IAAAC,aAAA,EAAO,CAAC,CAAD,EAAI,CAAJ,CAAP,CAA3B;EAEAD,kBAAkB,CAACE,OAAnB,CAA2BC,KAA3B;EACAH,kBAAkB,CAACE,OAAnB,CAA2BE,IAA3B,CAAgCL,KAAhC;EAEA,OAAOM,IAAI,CAACC,GAAL,CAAS,GAAGN,kBAAkB,CAACE,OAA/B,CAAP;AACH;;AAEc,SAASK,4BAAT,GAAgG;EAAA,IAA1DC,WAA0D,uEAAnChB,cAAmC;EAC3G,MAAM;IAAEC;EAAF,IAA+C,EACjD,GAAGD,cAD8C;IAEjD,GAAGgB;EAF8C,CAArD;EAKA,MAAMC,MAAM,GAAG,IAAAC,wBAAA,GAAf;EAEA,MAAMC,cAAc,GAAG,IAAAC,6CAAA,GAAvB;EAEA,MAAM,CAACC,YAAD,EAAeC,cAAf,IAAiC,IAAAC,kBAAA,GAAvC;EACA,MAAMC,eAAe,GAAGlB,6BAA6B,CAACe,YAAD,CAArD;EACA,MAAM,CAACI,wBAAD,EAA2BC,0BAA3B,IAAyD,IAAAH,kBAAA,GAA/D;EAEA,MAAMI,aAAa,GAAG,IAAAC,sCAAA,EAAgB,MAAM,CAACH,wBAAvB,EAAiD,CAACA,wBAAD,CAAjD,CAAtB;EAEA,MAAMI,UAAU,GAAG,IAAAC,qCAAA,EAAuB,CAAvB,CAAnB;EACA,MAAMC,cAAc,GAAG,IAAAD,qCAAA,EAAuB,CAAvB,CAAvB;EACA,MAAME,WAAW,GAAG,IAAAF,qCAAA,EAAuB,CAAvB,CAApB;EACA,MAAMG,WAAW,GAAG,IAAAH,qCAAA,EAAuB,CAAvB,CAApB;EACA,MAAMI,UAAU,GAAG,IAAAJ,qCAAA,EAAwB,KAAxB,CAAnB;EACA,MAAMK,OAAO,GAAG,IAAAL,qCAAA,EAAuB,CAAvB,CAAhB;EAEA,MAAMM,cAAc,GAAG,IAAAC,0BAAA,EAAkB,CAAlB,CAAvB;EACA,MAAMC,aAAa,GAAG,IAAAC,uCAAA,EAAiB,MAAM;IACzC,MAAMC,SAAS,GAAG,CAAC;MAAEX,UAAU,EAAEA,UAAU,CAACtB;IAAzB,CAAD,CAAlB;;IAEA,IAAIH,qBAAA,CAASC,EAAT,KAAgB,KAApB,EAA2B;MACvB,OAAO;QACHmC,SADG;QAEHC,SAAS,EAAEP,UAAU,CAAC3B,KAAX,GAAmB6B,cAAnB,aAAmBA,cAAnB,uBAAmBA,cAAc,CAAEK,SAAnC,GAA+C;MAFvD,CAAP;IAIH;;IACD,IAAIrC,qBAAA,CAASC,EAAT,KAAgB,SAApB,EAA+B;MAC3B,OAAO;QACHmC,SADG;QAEHE,SAAS,EAAER,UAAU,CAAC3B,KAAX,GAAmB6B,cAAnB,aAAmBA,cAAnB,uBAAmBA,cAAc,CAAEM,SAAnC,GAA+C;MAFvD,CAAP;IAIH;;IACD,IAAItC,qBAAA,CAASC,EAAT,KAAgB,KAApB,EAA2B;MACvB,OAAO;QACHmC,SADG;QAEHG,WAAW,EAAEP,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAEO,WAF1B;QAGHC,YAAY,EAAER,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAEQ,YAH3B;QAIHC,YAAY,EAAET,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAES,YAJ3B;QAKHC,aAAa,EAAEZ,UAAU,CAAC3B,KAAX,GAAmB6B,cAAnB,aAAmBA,cAAnB,uBAAmBA,cAAc,CAAEU,aAAnC,GAAmD;MAL/D,CAAP;IAOH;;IACD,OAAO,EAAP;EACH,CAzBqB,EAyBnB;IACC;AACR;AACA;EAHO,CAzBmB,CAAtB;EA+BA,MAAMC,QAAQ,GAAG,IAAAtC,aAAA,EAAe,CAAf,CAAjB;EACA,MAAMuC,UAAU,GAAG,IAAAvC,aAAA,EAAsB,EAAtB,CAAnB;EAEA,MAAMwC,mBAAmB,GAAG,IAAAC,kBAAA,EAAaC,SAAD,IAAuB;IAC3D,MAAMC,SAAS,GAAGL,QAAQ,CAACrC,OAA3B;;IACA,IAAI0C,SAAS,KAAKD,SAAlB,EAA6B;MACzB,IAAIlD,qBAAJ,EAA2B;QACvB4B,UAAU,CAACtB,KAAX,GAAmB,IAAA8C,iCAAA,EAAW,CAAX,EAAc;UAC7BC,QAAQ,EAAEpD;QADmB,CAAd,CAAnB;QAIAiC,OAAO,CAAC5B,KAAR,GAAgB,CAAhB;QACAyC,UAAU,CAACtC,OAAX,GAAqB,EAArB;QACAwB,UAAU,CAAC3B,KAAX,GAAmB,KAAnB;MACH;;MAED;IACH;;IAEDyC,UAAU,CAACtC,OAAX,CAAmB0C,SAAnB,IAAgCpB,WAAW,CAACzB,KAA5C;IAEA,MAAMgD,YAAY,GAAGP,UAAU,CAACtC,OAAX,CAAmByC,SAAnB,KAAiC,CAAtD;IACAnB,WAAW,CAACzB,KAAZ,GAAoBgD,YAApB;IAEAR,QAAQ,CAACrC,OAAT,GAAmByC,SAAnB,CArB2D,CAuB3D;;IACAjB,UAAU,CAAC3B,KAAX,GAAmBgD,YAAY,GAAG,CAAlC,CAxB2D,CA0B3D;;IACA,IAAI1B,UAAU,CAACtB,KAAX,GAAmB,CAAnB,IAAwBgD,YAAY,GAAGlC,YAA3C,EAAyD;MACrDQ,UAAU,CAACtB,KAAX,GAAmB,IAAA8C,iCAAA,EAAW,CAAX,EAAc;QAC7BC,QAAQ,EAAEpD;MADmB,CAAd,CAAnB;MAIAiC,OAAO,CAAC5B,KAAR,GAAgB,CAAhB;IACH;EACJ,CAlC2B,EAkCzB,CAACc,YAAD,CAlCyB,CAA5B;EAoCA,MAAMmC,aAAa,GAAG,IAAAC,+CAAA,EAAyB;IAC3CC,WAAW,EAAE,MAAM;MACf3B,cAAc,CAACxB,KAAf,GAAuBsB,UAAU,CAACtB,KAAlC;IACH,CAH0C;IAI3CoD,eAAe,EAAE,MAAM;MACnB5B,cAAc,CAACxB,KAAf,GAAuBsB,UAAU,CAACtB,KAAlC;IACH,CAN0C;IAO3CqD,QAAQ,EAAGC,KAAD,IAAW;MACjB,MAAMC,OAAO,GAAGD,KAAK,CAACE,aAAN,CAAoBC,CAApC;MAEA,MAAMC,EAAE,GAAGpC,UAAU,CAACtB,KAAtB;MACA,MAAM2D,KAAK,GAAGvC,aAAa,CAACpB,KAA5B;MAEA,MAAM4D,MAAM,GAAGL,OAAO,GAAG7B,WAAW,CAAC1B,KAArC;MACA4B,OAAO,CAAC5B,KAAR,GAAiB4B,OAAO,CAAC5B,KAAR,GAAgB4D,MAAhB,IAA0B,CAA1B,IAA+BL,OAAO,GAAG,CAA1C,GAA+C3B,OAAO,CAAC5B,KAAR,GAAgB4D,MAA/D,GAAwEA,MAAxF;MACAlC,WAAW,CAAC1B,KAAZ,GAAoBuD,OAApB;;MAEA,IAAI3D,uBAAJ,EAA6B;QACzB,MAAMiE,EAAE,GAAGN,OAAO,GAAG9B,WAAW,CAACzB,KAAjC;QAEAsB,UAAU,CAACtB,KAAX,GAAmBuD,OAAO,IAAI,CAAX,GAAe,CAAf,GAAmBjD,IAAI,CAACwD,GAAL,CAASxD,IAAI,CAACC,GAAL,CAASiB,cAAc,CAACxB,KAAf,GAAuB6D,EAAhC,EAAoCF,KAApC,CAAT,EAAqD,CAArD,CAAtC;QAEAhC,UAAU,CAAC3B,KAAX,GAAmBuD,OAAO,GAAGjC,UAAU,CAACtB,KAArB,GAA6B,CAAhD;MACH,CAND,MAMO;QACH,IAAIuD,OAAO,GAAG,CAACI,KAAf,EAAsB;UAClB,IAAID,EAAE,KAAK,CAAX,EAAc;YACVpC,UAAU,CAACtB,KAAX,GAAmB,IAAA8C,iCAAA,EAAWxC,IAAI,CAACwD,GAAL,CAASxD,IAAI,CAACC,GAAL,CAAS,CAACgD,OAAV,EAAmBI,KAAnB,CAAT,EAAoC,CAApC,CAAX,EAAmD;cAClEZ,QAAQ,EAAEpD;YADwD,CAAnD,CAAnB;UAGH;QACJ,CAND,MAMO;UACH,IAAI+D,EAAE,KAAKC,KAAX,EAAkB;YACdrC,UAAU,CAACtB,KAAX,GAAmB,IAAA8C,iCAAA,EAAW,CAAX,EAAc;cAC7BC,QAAQ,EAAEpD;YADmB,CAAd,CAAnB;UAGH;QACJ;;QAEDgC,UAAU,CAAC3B,KAAX,GAAmBuD,OAAO,GAAG,CAA7B;QAEA9B,WAAW,CAACzB,KAAZ,GAAoBuD,OAApB;MACH;IACJ,CA1C0C;IA2C3CQ,SAAS,EAAGT,KAAD,IAAW;MAClB7B,WAAW,CAACzB,KAAZ,GAAoBsD,KAAK,CAACE,aAAN,CAAoBC,CAAxC;IACH,CA7C0C;IA8C3CO,aAAa,EAAGV,KAAD,IAAW;MACtB,MAAMC,OAAO,GAAGD,KAAK,CAACE,aAAN,CAAoBC,CAApC;MAEAhC,WAAW,CAACzB,KAAZ,GAAoBuD,OAApB;MAEA,MAAMG,EAAE,GAAGpC,UAAU,CAACtB,KAAtB;MACA,MAAM2D,KAAK,GAAGvC,aAAa,CAACpB,KAA5B,CANsB,CAQtB;;MACA,IAAI0D,EAAE,IAAIC,KAAN,IAAeD,EAAE,IAAI,CAAzB,EAA4B;QACxB;MACH;;MAED,MAAMO,SAAS,GAAGN,KAAK,GAAG,GAA1B;MAEA,MAAMO,cAAc,GAAIR,EAAE,GAAGO,SAAL,IAAkBV,OAAO,GAAGzC,YAA7B,GAA6C,CAA7C,GAAiD6C,KAAxE;MAEAhC,UAAU,CAAC3B,KAAX,GAAmBuD,OAAO,GAAGW,cAAV,GAA2B,CAA9C;MAEA5C,UAAU,CAACtB,KAAX,GAAmB,IAAA8C,iCAAA,EAAWoB,cAAX,EAA2B;QAC1CnB,QAAQ,EAAEpD;MADgC,CAA3B,CAAnB;IAGH;EApE0C,CAAzB,EAqEnB,CAACmB,YAAD,CArEmB,CAAtB;EAuEA,MAAMqD,cAAc,GAAGjD,wBAAwB,GAAG,CAAlD;EAEA,MAAMkD,WAAW,GAAG,CAChBrC,aADgB,EAEhB;IAAEsC,UAAU,EAAEzD,cAAc,CAAC0D;EAA7B,CAFgB,EAGhBH,cAAc,GAAGzD,MAAM,CAAC6D,QAAV,GAAqBC,SAHnB,CAApB;EAMA,OAAO;IACHJ,WADG;IAEHxC,OAFG;IAGHb,cAHG;IAIHI,0BAJG;IAKHkC,QAAQ,EAAEJ,aALP;IAMHP,mBANG;IAOH+B,mBAAmB,EAAE;MAAEH,GAAG,EAAEH,cAAc,GAAGlD,eAAH,GAAqB;IAA1C;EAPlB,CAAP;AASH;;AAAA"}
+{"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    });\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/module/BottomSheet/BottomSheetNative.js

@@ -3,15 +3,17 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Animated, useWindowDimensions } from 'react-native';
 import { BottomSheetBackdrop, BottomSheetModal, BottomSheetModalProvider, BottomSheetView } from '@gorhom/bottom-sheet';
-import { Column, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';
+import { Column, css, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';
 import { useTheme } from '@fountain-ui/styles';
 import TransparentBackdrop from './TransparentBackdrop';
+import useDynamicSnapPoints from './useDynamicSnapPoints.native';
 
 const NoHandle = () => null;
 
 export default function BottomSheet(props) {
   const {
     backdropOpacity = 0.5,
+    backgroundStyle: backgroundStyleProp,
     borderRadius: borderRadiusProp,
     children,
     enableDynamicSizing = true,
@@ -19,7 +21,8 @@ export default function BottomSheet(props) {
     index,
     maxHeightNormalizedRatio = 0.8,
     onChange,
-    snapPoints = []
+    snapPoints = [],
+    style: styleProp
   } = props;
   const indexRef = useRef(-1);
   const bottomSheetRef = useRef(null);
@@ -68,19 +71,22 @@ export default function BottomSheet(props) {
   }, [index]);
   const theme = useTheme();
   const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;
-  const backgroundStyle = {
+  const backgroundStyle = css([{
     backgroundColor: theme.palette.surface.base,
     borderTopLeftRadius: borderRadius,
     borderTopRightRadius: borderRadius
-  };
-  const contentWrapperStyle = {
-    flex: 1,
+  }, backgroundStyleProp]);
+  const contentWrapperStyle = css([{
+    backgroundColor: theme.palette.surface.base,
+    borderTopLeftRadius: borderRadius,
+    borderTopRightRadius: borderRadius,
+    flexShrink: 1,
     maxHeight: maxDynamicContentSize,
-    minHeight: 300,
+    minHeight: 325,
     overflow: 'hidden',
     paddingBottom: theme.spacing(6),
     paddingTop: theme.spacing(5.5)
-  };
+  }, styleProp]);
   const isBackdropTransparent = backdropOpacity <= 0;
 
   const OpacityAwareBackdrop = props => /*#__PURE__*/React.createElement(BottomSheetBackdrop, _extends({}, props, {
@@ -109,6 +115,12 @@ export default function BottomSheet(props) {
     }).start();
   };
 
+  const {
+    animatedHandleHeight,
+    animatedSnapPoints,
+    animatedContentHeight,
+    handleContentLayout
+  } = useDynamicSnapPoints(snapPoints);
   return /*#__PURE__*/React.createElement(BottomSheetModalProvider, null, /*#__PURE__*/React.createElement(BottomSheetModal, {
     backdropComponent: isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop // @ts-ignore
     ,
@@ -118,18 +130,21 @@ export default function BottomSheet(props) {
     onChange: handleChange,
     onDismiss: handleDismiss,
     ref: bottomSheetRef,
-    snapPoints: snapPoints,
     enablePanDownToClose: Boolean(onChange),
     enableDynamicSizing: enableDynamicSizing,
     maxDynamicContentSize: maxDynamicContentSize,
     detached: Boolean(topElement),
-    onAnimate: topElement ? onAnimate : undefined
+    onAnimate: topElement ? onAnimate : undefined,
+    snapPoints: animatedSnapPoints,
+    handleHeight: animatedHandleHeight,
+    contentHeight: animatedContentHeight
   }, topElement ? /*#__PURE__*/React.createElement(Animated.View, {
     style: topElementAnimationStyle
   }, /*#__PURE__*/React.createElement(Column, {
     onLayout: handleTopElementLayout,
     style: topElementLocationStyle
   }, topElement)) : null, /*#__PURE__*/React.createElement(BottomSheetView, {
+    onLayout: handleContentLayout,
     style: contentWrapperStyle
   }, children)));
 }

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useRef","useState","Animated","useWindowDimensions","BottomSheetBackdrop","BottomSheetModal","BottomSheetModalProvider","BottomSheetView","Column","isNotAndroid12","useAnimatedValue","useTheme","TransparentBackdrop","NoHandle","BottomSheet","props","backdropOpacity","borderRadius","borderRadiusProp","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","indexRef","bottomSheetRef","height","windowHeight","topElementHeight","setTopElementHeight","maxDynamicContentSize","Math","round","handleTopElementLayout","event","nativeEvent","layout","handleChange","newIndex","current","handleDismiss","present","dismiss","snapToIndex","theme","shape","radius","xxl","backgroundStyle","backgroundColor","palette","surface","base","borderTopLeftRadius","borderTopRightRadius","contentWrapperStyle","flex","maxHeight","minHeight","overflow","paddingBottom","spacing","paddingTop","isBackdropTransparent","OpacityAwareBackdrop","topElementOpacity","topElementAnimationStyle","opacity","topElementLocationStyle","position","width","bottom","onAnimate","fromIndex","toIndex","isVisible","timing","toValue","duration","useNativeDriver","start","Boolean","undefined"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Animated, LayoutChangeEvent, useWindowDimensions, ViewStyle } from 'react-native';\nimport {\n    BottomSheetBackdrop,\n    BottomSheetBackdropProps,\n    BottomSheetModal,\n    BottomSheetModalProvider,\n    BottomSheetView,\n} from '@gorhom/bottom-sheet';\nimport { Column, ExtendedStyle, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport type BottomSheetProps from './BottomSheetProps';\nimport TransparentBackdrop from './TransparentBackdrop';\n\nconst NoHandle = () => null;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity = 0.5,\n        borderRadius: borderRadiusProp,\n        children,\n        enableDynamicSizing = true,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.8,\n        onChange,\n        snapPoints = [],\n    } = props;\n\n    const indexRef = useRef<number>(-1);\n    const bottomSheetRef = useRef<BottomSheetModal | null>(null);\n\n    const { height: windowHeight } = useWindowDimensions();\n    const [topElementHeight, setTopElementHeight] = useState(0);\n\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;\n\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const handleChange = useCallback((newIndex: number) => {\n        indexRef.current = newIndex;\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    }, [onChange]);\n\n    const handleDismiss = useCallback(() => {\n        handleChange(-1);\n    }, [handleChange]);\n\n    useEffect(() => {\n        if (index === indexRef.current) {\n            return;\n        }\n\n        if (indexRef.current < 0 && index >= 0) {\n            bottomSheetRef.current?.present();\n        } else if (indexRef.current >= 0 && index < 0) {\n            bottomSheetRef.current?.dismiss();\n        } else {\n            // @ts-ignore\n            bottomSheetRef.current?.snapToIndex(index);\n        }\n    }, [index]);\n\n    const theme = useTheme();\n\n    const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;\n    const backgroundStyle = {\n        backgroundColor: theme.palette.surface.base,\n        borderTopLeftRadius: borderRadius,\n        borderTopRightRadius: borderRadius,\n    };\n\n    const contentWrapperStyle: ViewStyle = {\n        flex: 1,\n        maxHeight: maxDynamicContentSize,\n        minHeight: 300,\n        overflow: 'hidden',\n        paddingBottom: theme.spacing(6),\n        paddingTop: theme.spacing(5.5),\n    };\n\n    const isBackdropTransparent = backdropOpacity <= 0;\n\n    const OpacityAwareBackdrop = (props: BottomSheetBackdropProps) => (\n        <BottomSheetBackdrop\n            {...props}\n            appearsOnIndex={0}\n            disappearsOnIndex={-1}\n            opacity={backdropOpacity}\n            pressBehavior={onChange ? 'close' : 'none'}\n        />\n    );\n\n    const topElementOpacity = useAnimatedValue(0);\n    const topElementAnimationStyle: Animated.WithAnimatedValue<ExtendedStyle> = { opacity: topElementOpacity };\n    const topElementLocationStyle: ExtendedStyle = {\n        position: 'absolute',\n        width: '100%',\n        bottom: 0,\n    };\n    const onAnimate = (fromIndex: number, toIndex: number) => {\n        const isVisible = toIndex > -1;\n\n        Animated.timing(topElementOpacity, {\n            toValue: isVisible ? 1 : 0,\n            duration: 0,\n            useNativeDriver: isNotAndroid12,\n        }).start();\n    };\n\n    return (\n        <BottomSheetModalProvider>\n            <BottomSheetModal\n                backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}\n                // @ts-ignore\n                backgroundStyle={backgroundStyle}\n                index={index}\n                handleComponent={NoHandle}\n                onChange={handleChange}\n                onDismiss={handleDismiss}\n                ref={bottomSheetRef}\n                snapPoints={snapPoints}\n                enablePanDownToClose={Boolean(onChange)}\n                enableDynamicSizing={enableDynamicSizing}\n                maxDynamicContentSize={maxDynamicContentSize}\n                detached={Boolean(topElement)}\n                onAnimate={topElement ? onAnimate : undefined}\n            >\n                {topElement ? (\n                    <Animated.View style={topElementAnimationStyle}>\n                        <Column\n                            onLayout={handleTopElementLayout}\n                            style={topElementLocationStyle}\n                        >\n                            {topElement}\n                        </Column>\n                    </Animated.View>\n                ) : null}\n\n                <BottomSheetView style={contentWrapperStyle}>\n                    {children}\n                </BottomSheetView>\n            </BottomSheetModal>\n        </BottomSheetModalProvider>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,SAA7B,EAAwCC,MAAxC,EAAgDC,QAAhD,QAAgE,OAAhE;AACA,SAASC,QAAT,EAAsCC,mBAAtC,QAA4E,cAA5E;AACA,SACIC,mBADJ,EAGIC,gBAHJ,EAIIC,wBAJJ,EAKIC,eALJ,QAMO,sBANP;AAOA,SAASC,MAAT,EAAgCC,cAAhC,EAAgDC,gBAAhD,QAAwE,mBAAxE;AACA,SAASC,QAAT,QAAyB,qBAAzB;AAEA,OAAOC,mBAAP,MAAgC,uBAAhC;;AAEA,MAAMC,QAAQ,GAAG,MAAM,IAAvB;;AAEA,eAAe,SAASC,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,eAAe,GAAG,GADhB;IAEFC,YAAY,EAAEC,gBAFZ;IAGFC,QAHE;IAIFC,mBAAmB,GAAG,IAJpB;IAKFC,UALE;IAMFC,KANE;IAOFC,wBAAwB,GAAG,GAPzB;IAQFC,QARE;IASFC,UAAU,GAAG;EATX,IAUFV,KAVJ;EAYA,MAAMW,QAAQ,GAAG1B,MAAM,CAAS,CAAC,CAAV,CAAvB;EACA,MAAM2B,cAAc,GAAG3B,MAAM,CAA0B,IAA1B,CAA7B;EAEA,MAAM;IAAE4B,MAAM,EAAEC;EAAV,IAA2B1B,mBAAmB,EAApD;EACA,MAAM,CAAC2B,gBAAD,EAAmBC,mBAAnB,IAA0C9B,QAAQ,CAAC,CAAD,CAAxD;EAEA,MAAM+B,qBAAqB,GAAGC,IAAI,CAACC,KAAL,CAAWL,YAAY,GAAGN,wBAA1B,IAAsDO,gBAApF;;EAEA,MAAMK,sBAAsB,GAAIC,KAAD,IAA8B;IACzD,MAAM;MAAER;IAAF,IAAaQ,KAAK,CAACC,WAAN,CAAkBC,MAArC;IACAP,mBAAmB,CAACH,MAAD,CAAnB;EACH,CAHD;;EAKA,MAAMW,YAAY,GAAGzC,WAAW,CAAE0C,QAAD,IAAsB;IACnDd,QAAQ,CAACe,OAAT,GAAmBD,QAAnB;;IAEA,IAAIhB,QAAJ,EAAc;MACVA,QAAQ,CAACgB,QAAD,CAAR;IACH;EACJ,CAN+B,EAM7B,CAAChB,QAAD,CAN6B,CAAhC;EAQA,MAAMkB,aAAa,GAAG5C,WAAW,CAAC,MAAM;IACpCyC,YAAY,CAAC,CAAC,CAAF,CAAZ;EACH,CAFgC,EAE9B,CAACA,YAAD,CAF8B,CAAjC;EAIAxC,SAAS,CAAC,MAAM;IACZ,IAAIuB,KAAK,KAAKI,QAAQ,CAACe,OAAvB,EAAgC;MAC5B;IACH;;IAED,IAAIf,QAAQ,CAACe,OAAT,GAAmB,CAAnB,IAAwBnB,KAAK,IAAI,CAArC,EAAwC;MAAA;;MACpC,yBAAAK,cAAc,CAACc,OAAf,gFAAwBE,OAAxB;IACH,CAFD,MAEO,IAAIjB,QAAQ,CAACe,OAAT,IAAoB,CAApB,IAAyBnB,KAAK,GAAG,CAArC,EAAwC;MAAA;;MAC3C,0BAAAK,cAAc,CAACc,OAAf,kFAAwBG,OAAxB;IACH,CAFM,MAEA;MAAA;;MACH;MACA,0BAAAjB,cAAc,CAACc,OAAf,kFAAwBI,WAAxB,CAAoCvB,KAApC;IACH;EACJ,CAbQ,EAaN,CAACA,KAAD,CAbM,CAAT;EAeA,MAAMwB,KAAK,GAAGnC,QAAQ,EAAtB;EAEA,MAAMM,YAAY,GAAGC,gBAAgB,IAAI4B,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBC,GAA5D;EACA,MAAMC,eAAe,GAAG;IACpBC,eAAe,EAAEL,KAAK,CAACM,OAAN,CAAcC,OAAd,CAAsBC,IADnB;IAEpBC,mBAAmB,EAAEtC,YAFD;IAGpBuC,oBAAoB,EAAEvC;EAHF,CAAxB;EAMA,MAAMwC,mBAA8B,GAAG;IACnCC,IAAI,EAAE,CAD6B;IAEnCC,SAAS,EAAE3B,qBAFwB;IAGnC4B,SAAS,EAAE,GAHwB;IAInCC,QAAQ,EAAE,QAJyB;IAKnCC,aAAa,EAAEhB,KAAK,CAACiB,OAAN,CAAc,CAAd,CALoB;IAMnCC,UAAU,EAAElB,KAAK,CAACiB,OAAN,CAAc,GAAd;EANuB,CAAvC;EASA,MAAME,qBAAqB,GAAGjD,eAAe,IAAI,CAAjD;;EAEA,MAAMkD,oBAAoB,GAAInD,KAAD,iBACzB,oBAAC,mBAAD,eACQA,KADR;IAEI,cAAc,EAAE,CAFpB;IAGI,iBAAiB,EAAE,CAAC,CAHxB;IAII,OAAO,EAAEC,eAJb;IAKI,aAAa,EAAEQ,QAAQ,GAAG,OAAH,GAAa;EALxC,GADJ;;EAUA,MAAM2C,iBAAiB,GAAGzD,gBAAgB,CAAC,CAAD,CAA1C;EACA,MAAM0D,wBAAmE,GAAG;IAAEC,OAAO,EAAEF;EAAX,CAA5E;EACA,MAAMG,uBAAsC,GAAG;IAC3CC,QAAQ,EAAE,UADiC;IAE3CC,KAAK,EAAE,MAFoC;IAG3CC,MAAM,EAAE;EAHmC,CAA/C;;EAKA,MAAMC,SAAS,GAAG,CAACC,SAAD,EAAoBC,OAApB,KAAwC;IACtD,MAAMC,SAAS,GAAGD,OAAO,GAAG,CAAC,CAA7B;IAEA1E,QAAQ,CAAC4E,MAAT,CAAgBX,iBAAhB,EAAmC;MAC/BY,OAAO,EAAEF,SAAS,GAAG,CAAH,GAAO,CADM;MAE/BG,QAAQ,EAAE,CAFqB;MAG/BC,eAAe,EAAExE;IAHc,CAAnC,EAIGyE,KAJH;EAKH,CARD;;EAUA,oBACI,oBAAC,wBAAD,qBACI,oBAAC,gBAAD;IACI,iBAAiB,EAAEjB,qBAAqB,GAAGrD,mBAAH,GAAyBsD,oBADrE,CAEI;IAFJ;IAGI,eAAe,EAAEhB,eAHrB;IAII,KAAK,EAAE5B,KAJX;IAKI,eAAe,EAAET,QALrB;IAMI,QAAQ,EAAE0B,YANd;IAOI,SAAS,EAAEG,aAPf;IAQI,GAAG,EAAEf,cART;IASI,UAAU,EAAEF,UAThB;IAUI,oBAAoB,EAAE0D,OAAO,CAAC3D,QAAD,CAVjC;IAWI,mBAAmB,EAAEJ,mBAXzB;IAYI,qBAAqB,EAAEY,qBAZ3B;IAaI,QAAQ,EAAEmD,OAAO,CAAC9D,UAAD,CAbrB;IAcI,SAAS,EAAEA,UAAU,GAAGqD,SAAH,GAAeU;EAdxC,GAgBK/D,UAAU,gBACP,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAE+C;EAAtB,gBACI,oBAAC,MAAD;IACI,QAAQ,EAAEjC,sBADd;IAEI,KAAK,EAAEmC;EAFX,GAIKjD,UAJL,CADJ,CADO,GASP,IAzBR,eA2BI,oBAAC,eAAD;IAAiB,KAAK,EAAEoC;EAAxB,GACKtC,QADL,CA3BJ,CADJ,CADJ;AAmCH;AAAA"}
+{"version":3,"names":["React","useCallback","useEffect","useRef","useState","Animated","useWindowDimensions","BottomSheetBackdrop","BottomSheetModal","BottomSheetModalProvider","BottomSheetView","Column","css","isNotAndroid12","useAnimatedValue","useTheme","TransparentBackdrop","useDynamicSnapPoints","NoHandle","BottomSheet","props","backdropOpacity","backgroundStyle","backgroundStyleProp","borderRadius","borderRadiusProp","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","style","styleProp","indexRef","bottomSheetRef","height","windowHeight","topElementHeight","setTopElementHeight","maxDynamicContentSize","Math","round","handleTopElementLayout","event","nativeEvent","layout","handleChange","newIndex","current","handleDismiss","present","dismiss","snapToIndex","theme","shape","radius","xxl","backgroundColor","palette","surface","base","borderTopLeftRadius","borderTopRightRadius","contentWrapperStyle","flexShrink","maxHeight","minHeight","overflow","paddingBottom","spacing","paddingTop","isBackdropTransparent","OpacityAwareBackdrop","topElementOpacity","topElementAnimationStyle","opacity","topElementLocationStyle","position","width","bottom","onAnimate","fromIndex","toIndex","isVisible","timing","toValue","duration","useNativeDriver","start","animatedHandleHeight","animatedSnapPoints","animatedContentHeight","handleContentLayout","Boolean","undefined"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Animated, LayoutChangeEvent, useWindowDimensions, ViewStyle } from 'react-native';\nimport {\n    BottomSheetBackdrop,\n    BottomSheetBackdropProps,\n    BottomSheetModal,\n    BottomSheetModalProvider,\n    BottomSheetView,\n} from '@gorhom/bottom-sheet';\nimport { Column, css, ExtendedStyle, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport type BottomSheetProps from './BottomSheetProps';\nimport TransparentBackdrop from './TransparentBackdrop';\nimport useDynamicSnapPoints from './useDynamicSnapPoints.native';\n\nconst NoHandle = () => null;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity = 0.5,\n        backgroundStyle: backgroundStyleProp,\n        borderRadius: borderRadiusProp,\n        children,\n        enableDynamicSizing = true,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.8,\n        onChange,\n        snapPoints = [],\n        style: styleProp,\n    } = props;\n\n    const indexRef = useRef<number>(-1);\n    const bottomSheetRef = useRef<BottomSheetModal | null>(null);\n\n    const { height: windowHeight } = useWindowDimensions();\n    const [topElementHeight, setTopElementHeight] = useState(0);\n\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;\n\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const handleChange = useCallback((newIndex: number) => {\n        indexRef.current = newIndex;\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    }, [onChange]);\n\n    const handleDismiss = useCallback(() => {\n        handleChange(-1);\n    }, [handleChange]);\n\n    useEffect(() => {\n        if (index === indexRef.current) {\n            return;\n        }\n\n        if (indexRef.current < 0 && index >= 0) {\n            bottomSheetRef.current?.present();\n        } else if (indexRef.current >= 0 && index < 0) {\n            bottomSheetRef.current?.dismiss();\n        } else {\n            // @ts-ignore\n            bottomSheetRef.current?.snapToIndex(index);\n        }\n    }, [index]);\n\n    const theme = useTheme();\n\n    const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;\n    const backgroundStyle = css([\n        {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: borderRadius,\n            borderTopRightRadius: borderRadius,\n        },\n        backgroundStyleProp,\n    ]);\n\n    const contentWrapperStyle: ViewStyle = css([\n        {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: borderRadius,\n            borderTopRightRadius: borderRadius,\n            flexShrink: 1,\n            maxHeight: maxDynamicContentSize,\n            minHeight: 325,\n            overflow: 'hidden',\n            paddingBottom: theme.spacing(6),\n            paddingTop: theme.spacing(5.5),\n        },\n        styleProp,\n    ]);\n\n    const isBackdropTransparent = backdropOpacity <= 0;\n\n    const OpacityAwareBackdrop = (props: BottomSheetBackdropProps) => (\n        <BottomSheetBackdrop\n            {...props}\n            appearsOnIndex={0}\n            disappearsOnIndex={-1}\n            opacity={backdropOpacity}\n            pressBehavior={onChange ? 'close' : 'none'}\n        />\n    );\n\n    const topElementOpacity = useAnimatedValue(0);\n    const topElementAnimationStyle: Animated.WithAnimatedValue<ExtendedStyle> = { opacity: topElementOpacity };\n    const topElementLocationStyle: ExtendedStyle = {\n        position: 'absolute',\n        width: '100%',\n        bottom: 0,\n    };\n    const onAnimate = (fromIndex: number, toIndex: number) => {\n        const isVisible = toIndex > -1;\n\n        Animated.timing(topElementOpacity, {\n            toValue: isVisible ? 1 : 0,\n            duration: 0,\n            useNativeDriver: isNotAndroid12,\n        }).start();\n    };\n\n    const {\n        animatedHandleHeight,\n        animatedSnapPoints,\n        animatedContentHeight,\n        handleContentLayout,\n    } = useDynamicSnapPoints(snapPoints);\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                enablePanDownToClose={Boolean(onChange)}\n                enableDynamicSizing={enableDynamicSizing}\n                maxDynamicContentSize={maxDynamicContentSize}\n                detached={Boolean(topElement)}\n                onAnimate={topElement ? onAnimate : undefined}\n                snapPoints={animatedSnapPoints}\n                handleHeight={animatedHandleHeight}\n                contentHeight={animatedContentHeight}\n            >\n                {topElement ? (\n                    <Animated.View style={topElementAnimationStyle}>\n                        <Column\n                            onLayout={handleTopElementLayout}\n                            style={topElementLocationStyle}\n                        >\n                            {topElement}\n                        </Column>\n                    </Animated.View>\n                ) : null}\n\n                <BottomSheetView\n                    onLayout={handleContentLayout}\n                    style={contentWrapperStyle}\n                >\n                    {children}\n                </BottomSheetView>\n            </BottomSheetModal>\n        </BottomSheetModalProvider>\n    );\n};\n"],"mappings":"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"}

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

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

package/build/module/BottomSheet/BottomSheetWeb.js

@@ -21,7 +21,7 @@ const useStyles = function () {
       borderTopLeftRadius: theme.shape.radius.xxl,
       borderTopRightRadius: theme.shape.radius.xxl,
       flexGrow: 1,
-      minHeight: 300,
+      minHeight: 325,
       overflow: 'hidden',
       paddingBottom: theme.spacing(6),
       paddingTop: theme.spacing(5.5)
@@ -44,7 +44,8 @@ export default function BottomSheet(props) {
     index,
     maxHeightNormalizedRatio = 0.8,
     onChange,
-    snapPoints = []
+    snapPoints = [],
+    style: styleProp
   } = props;
   const styles = useStyles();
   const {
@@ -84,7 +85,7 @@ export default function BottomSheet(props) {
       height: highestSnapPoint
     } : {}),
     maxHeight: maxDynamicContentSize
-  }]);
+  }, styleProp]);
   return /*#__PURE__*/React.createElement(Modal, {
     backdropOpacity: backdropOpacity,
     onClose: handleClose,

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

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

package/build/module/BottomSheet/useDynamicSnapPoints.native.js

@@ -0,0 +1,14 @@
+import { useBottomSheetDynamicSnapPoints } from '@gorhom/bottom-sheet';
+export default function useDynamicSnapPoints(snapPoints) {
+  if (snapPoints !== null && snapPoints !== void 0 && snapPoints.includes('CONTENT_HEIGHT')) {
+    return useBottomSheetDynamicSnapPoints(snapPoints);
+  }
+
+  return {
+    animatedHandleHeight: undefined,
+    animatedSnapPoints: snapPoints,
+    animatedContentHeight: undefined,
+    handleContentLayout: undefined
+  };
+}
+//# sourceMappingURL=useDynamicSnapPoints.native.js.map

package/build/module/BottomSheet/useDynamicSnapPoints.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useBottomSheetDynamicSnapPoints","useDynamicSnapPoints","snapPoints","includes","animatedHandleHeight","undefined","animatedSnapPoints","animatedContentHeight","handleContentLayout"],"sources":["useDynamicSnapPoints.native.ts"],"sourcesContent":["import { useBottomSheetDynamicSnapPoints } from '@gorhom/bottom-sheet';\nimport type BottomSheetProps from './BottomSheetProps';\n\nexport default function useDynamicSnapPoints(snapPoints: BottomSheetProps['snapPoints']) {\n    if (snapPoints?.includes('CONTENT_HEIGHT')) {\n        return useBottomSheetDynamicSnapPoints(snapPoints);\n    }\n\n    return {\n        animatedHandleHeight: undefined,\n        animatedSnapPoints: snapPoints,\n        animatedContentHeight: undefined,\n        handleContentLayout: undefined,\n    };\n}\n"],"mappings":"AAAA,SAASA,+BAAT,QAAgD,sBAAhD;AAGA,eAAe,SAASC,oBAAT,CAA8BC,UAA9B,EAA0E;EACrF,IAAIA,UAAJ,aAAIA,UAAJ,eAAIA,UAAU,CAAEC,QAAZ,CAAqB,gBAArB,CAAJ,EAA4C;IACxC,OAAOH,+BAA+B,CAACE,UAAD,CAAtC;EACH;;EAED,OAAO;IACHE,oBAAoB,EAAEC,SADnB;IAEHC,kBAAkB,EAAEJ,UAFjB;IAGHK,qBAAqB,EAAEF,SAHpB;IAIHG,mBAAmB,EAAEH;EAJlB,CAAP;AAMH"}

package/build/module/DateTimePicker/DateTimePicker.js

@@ -24,7 +24,7 @@ export default function DateTimePicker(props) {
   } = props;
   const theme = useTheme();
   const textDayFontStyle = createFontStyle(theme, {
-    selector: typo => typo.body2
+    selector: typo => typo.body2.medium
   });
   const [yearPickerVisible, setYearPickerVisible] = React.useState(false);
   const {

package/build/module/DateTimePicker/DateTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","format","Calendar","LocaleConfig","Button","createFontStyle","Typography","useTheme","YearPicker","DateTimePickerContext","formatDate","useDateTimePicker","useContext","DateTimePicker","props","currentMonth","Date","locale","markedDate","markedDateProp","maxDate","minDate","onDayPress","onYearPress","onYearPressProp","theme","textDayFontStyle","selector","typo","body2","yearPickerVisible","setYearPickerVisible","useState","locales","LeftArrow","RightArrow","date","defaultLocale","direction","selected","disableTouchEvent","selectedColor","palette","primary","main","selectedTextColor","contrastTextColor","toDate","backgroundColor","paper","default","calendarBackground","dayTextColor","text","textDisabledColor","hint","textDayFontFamily","fontFamily","textDayFontSize","fontSize","textDayFontWeight","fontWeight","textDayHeaderFontFamily","textDayHeaderFontSize","textDayHeaderFontWeight"],"sources":["DateTimePicker.tsx"],"sourcesContent":["import React from 'react';\nimport { format } from 'date-fns';\n//@ts-ignore\nimport { Calendar, LocaleConfig } from 'react-native-calendars';\nimport { Button, createFontStyle, Typography } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport YearPicker from './YearPicker';\nimport { DateTimePickerContext } from './DateTimePickerProvider';\nimport type DateTimePickerProps from './DateTimePickerProps';\nimport { formatDate } from './utils';\n\nconst useDateTimePicker = () => {\n    return React.useContext(DateTimePickerContext);\n};\n\nexport default function DateTimePicker(props: DateTimePickerProps) {\n    const {\n        currentMonth = new Date(),\n        locale,\n        markedDate: markedDateProp,\n        maxDate,\n        minDate,\n        onDayPress,\n        onYearPress: onYearPressProp,\n    } = props;\n\n    const theme = useTheme();\n\n    const textDayFontStyle = createFontStyle(theme, { selector: (typo) => typo.body2 });\n\n    const [yearPickerVisible, setYearPickerVisible] = React.useState(false);\n    const { locales } = useDateTimePicker();\n\n    //TODO: Need to update arrow components\n    const LeftArrow = <Typography children={'<'} color={'strong'}/>;\n    const RightArrow = <Typography children={'>'} color={'strong'}/>;\n\n    const onYearPress = (date: Date) => {\n        setYearPickerVisible(false);\n        onYearPressProp && onYearPressProp(date);\n    };\n\n    if (locale) {\n        LocaleConfig.locales = locales;\n        LocaleConfig.defaultLocale = locale;\n    }\n\n    const markedDate = markedDateProp ? format(markedDateProp, 'yyyy-MM-dd') : '';\n\n    if (yearPickerVisible) {\n        return (\n            <YearPicker\n                date={currentMonth}\n                locale={locale}\n                maxDate={maxDate}\n                minDate={minDate}\n                onYearPress={onYearPress}\n            />\n        );\n    }\n\n    return (\n        <Calendar\n            current={currentMonth}\n            onDayPress={onDayPress}\n            maxDate={maxDate}\n            minDate={minDate}\n            renderArrow={(direction: string) => direction === 'left' ? LeftArrow : RightArrow}\n            markedDates={{\n                [markedDate]: {\n                    selected: true,\n                    disableTouchEvent: true,\n                    selectedColor: theme.palette.primary.main,\n                    selectedTextColor: theme.palette.primary.contrastTextColor,\n                },\n            }}\n            // @ts-ignore\n            renderHeader={(date) => (\n                <Button\n                    children={formatDate(date.toDate(), locale)}\n                    variant={'text'}\n                    size={'small'}\n                    onPress={() => setYearPickerVisible(true)}\n                />\n            )}\n            theme={{\n                backgroundColor: theme.palette.paper.default,\n                calendarBackground: theme.palette.paper.default,\n                dayTextColor: theme.palette.text.primary,\n                textDisabledColor: theme.palette.text.hint,\n                textDayFontFamily: textDayFontStyle.fontFamily,\n                textDayFontSize: textDayFontStyle.fontSize,\n                textDayFontWeight: textDayFontStyle.fontWeight,\n                textDayHeaderFontFamily: textDayFontStyle.fontFamily,\n                textDayHeaderFontSize: textDayFontStyle.fontSize,\n                textDayHeaderFontWeight: textDayFontStyle.fontWeight,\n            }}\n        />\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","format","Calendar","LocaleConfig","Button","createFontStyle","Typography","useTheme","YearPicker","DateTimePickerContext","formatDate","useDateTimePicker","useContext","DateTimePicker","props","currentMonth","Date","locale","markedDate","markedDateProp","maxDate","minDate","onDayPress","onYearPress","onYearPressProp","theme","textDayFontStyle","selector","typo","body2","medium","yearPickerVisible","setYearPickerVisible","useState","locales","LeftArrow","RightArrow","date","defaultLocale","direction","selected","disableTouchEvent","selectedColor","palette","primary","main","selectedTextColor","contrastTextColor","toDate","backgroundColor","paper","default","calendarBackground","dayTextColor","text","textDisabledColor","hint","textDayFontFamily","fontFamily","textDayFontSize","fontSize","textDayFontWeight","fontWeight","textDayHeaderFontFamily","textDayHeaderFontSize","textDayHeaderFontWeight"],"sources":["DateTimePicker.tsx"],"sourcesContent":["import React from 'react';\nimport { format } from 'date-fns';\n//@ts-ignore\nimport { Calendar, LocaleConfig } from 'react-native-calendars';\nimport { Button, createFontStyle, Typography } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport YearPicker from './YearPicker';\nimport { DateTimePickerContext } from './DateTimePickerProvider';\nimport type DateTimePickerProps from './DateTimePickerProps';\nimport { formatDate } from './utils';\n\nconst useDateTimePicker = () => {\n    return React.useContext(DateTimePickerContext);\n};\n\nexport default function DateTimePicker(props: DateTimePickerProps) {\n    const {\n        currentMonth = new Date(),\n        locale,\n        markedDate: markedDateProp,\n        maxDate,\n        minDate,\n        onDayPress,\n        onYearPress: onYearPressProp,\n    } = props;\n\n    const theme = useTheme();\n\n    const textDayFontStyle = createFontStyle(theme, { selector: (typo) => typo.body2.medium });\n\n    const [yearPickerVisible, setYearPickerVisible] = React.useState(false);\n    const { locales } = useDateTimePicker();\n\n    //TODO: Need to update arrow components\n    const LeftArrow = <Typography children={'<'} color={'strong'}/>;\n    const RightArrow = <Typography children={'>'} color={'strong'}/>;\n\n    const onYearPress = (date: Date) => {\n        setYearPickerVisible(false);\n        onYearPressProp && onYearPressProp(date);\n    };\n\n    if (locale) {\n        LocaleConfig.locales = locales;\n        LocaleConfig.defaultLocale = locale;\n    }\n\n    const markedDate = markedDateProp ? format(markedDateProp, 'yyyy-MM-dd') : '';\n\n    if (yearPickerVisible) {\n        return (\n            <YearPicker\n                date={currentMonth}\n                locale={locale}\n                maxDate={maxDate}\n                minDate={minDate}\n                onYearPress={onYearPress}\n            />\n        );\n    }\n\n    return (\n        <Calendar\n            current={currentMonth}\n            onDayPress={onDayPress}\n            maxDate={maxDate}\n            minDate={minDate}\n            renderArrow={(direction: string) => direction === 'left' ? LeftArrow : RightArrow}\n            markedDates={{\n                [markedDate]: {\n                    selected: true,\n                    disableTouchEvent: true,\n                    selectedColor: theme.palette.primary.main,\n                    selectedTextColor: theme.palette.primary.contrastTextColor,\n                },\n            }}\n            // @ts-ignore\n            renderHeader={(date) => (\n                <Button\n                    children={formatDate(date.toDate(), locale)}\n                    variant={'text'}\n                    size={'small'}\n                    onPress={() => setYearPickerVisible(true)}\n                />\n            )}\n            theme={{\n                backgroundColor: theme.palette.paper.default,\n                calendarBackground: theme.palette.paper.default,\n                dayTextColor: theme.palette.text.primary,\n                textDisabledColor: theme.palette.text.hint,\n                textDayFontFamily: textDayFontStyle.fontFamily,\n                textDayFontSize: textDayFontStyle.fontSize,\n                textDayFontWeight: textDayFontStyle.fontWeight,\n                textDayHeaderFontFamily: textDayFontStyle.fontFamily,\n                textDayHeaderFontSize: textDayFontStyle.fontSize,\n                textDayHeaderFontWeight: textDayFontStyle.fontWeight,\n            }}\n        />\n    );\n};\n"],"mappings":"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"}

package/build/module/hooks/useUnstableCollapsibleAppBar.js

@@ -163,7 +163,7 @@ export default function useUnstableCollapsibleAppBar() {
         duration: ANIMATION_DURATION_MILLIS
       });
     }
-  }, [appBarHeight]);
+  });
   const hasCollapsible = collapsibleToolbarHeight > 0;
   const appBarStyle = [animatedStyle, {
     paddingTop: safeAreaInsets.top

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

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useRef","Platform","useAnimatedScrollHandler","useAnimatedStyle","useDerivedValue","useSharedValue","withTiming","useSafeAreaInsets","useAppbarStyles","useElevationStyle","useHeight","defaultOptions","shouldTranslateYReset","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","OS","useLargerValueOfLastTwoValues","value","refLatestTwoValues","current","shift","push","Math","max","useUnstableCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","appBarMaxHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","translateY","lastTranslateY","lastOffsetY","prevOffsetY","overlapped","vectorY","elevationStyle","animatedStyle","transform","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","duration","savedOffsetY","scrollHandler","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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"}
+{"version":3,"names":["useCallback","useRef","Platform","useAnimatedScrollHandler","useAnimatedStyle","useDerivedValue","useSharedValue","withTiming","useSafeAreaInsets","useAppbarStyles","useElevationStyle","useHeight","defaultOptions","shouldTranslateYReset","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","OS","useLargerValueOfLastTwoValues","value","refLatestTwoValues","current","shift","push","Math","max","useUnstableCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","appBarMaxHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","translateY","lastTranslateY","lastOffsetY","prevOffsetY","overlapped","vectorY","elevationStyle","animatedStyle","transform","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","duration","savedOffsetY","scrollHandler","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    });\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/typescript/BottomSheet/BottomSheetProps.d.ts

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

package/build/typescript/BottomSheet/useDynamicSnapPoints.native.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react-native-reanimated" />
+import type BottomSheetProps from './BottomSheetProps';
+export default function useDynamicSnapPoints(snapPoints: BottomSheetProps['snapPoints']): {
+    animatedSnapPoints: Readonly<{
+        value: (string | number)[];
+    }>;
+    animatedHandleHeight: import("react-native-reanimated").SharedValue<number>;
+    animatedContentHeight: import("react-native-reanimated").SharedValue<number>;
+    handleContentLayout: ({ nativeEvent: { layout: { height }, }, }: {
+        nativeEvent: {
+            layout: {
+                height: number;
+            };
+        };
+    }) => void;
+} | {
+    animatedHandleHeight: undefined;
+    animatedSnapPoints: (string | number)[] | undefined;
+    animatedContentHeight: undefined;
+    handleContentLayout: undefined;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.11",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
-    "@fountain-ui/icons": "3.0.0-alpha.1",
+    "@fountain-ui/icons": "3.0.0-alpha.6",
     "@fountain-ui/utils": "^3.0.0-alpha.1",
     "react-native-calendars": "1.1267.0"
   },
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "88b0532dcdf185877d95cd713f9d9076728abe12"
+  "gitHead": "7142bb054dae2899d8c211c8b5a1d8060c8994bf"
 }

package/src/BottomSheet/BottomSheetNative.tsx

@@ -7,16 +7,18 @@ import {
     BottomSheetModalProvider,
     BottomSheetView,
 } from '@gorhom/bottom-sheet';
-import { Column, ExtendedStyle, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';
+import { Column, css, ExtendedStyle, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';
 import { useTheme } from '@fountain-ui/styles';
 import type BottomSheetProps from './BottomSheetProps';
 import TransparentBackdrop from './TransparentBackdrop';
+import useDynamicSnapPoints from './useDynamicSnapPoints.native';
 
 const NoHandle = () => null;
 
 export default function BottomSheet(props: BottomSheetProps) {
     const {
         backdropOpacity = 0.5,
+        backgroundStyle: backgroundStyleProp,
         borderRadius: borderRadiusProp,
         children,
         enableDynamicSizing = true,
@@ -25,6 +27,7 @@ export default function BottomSheet(props: BottomSheetProps) {
         maxHeightNormalizedRatio = 0.8,
         onChange,
         snapPoints = [],
+        style: styleProp,
     } = props;
 
     const indexRef = useRef<number>(-1);
@@ -70,20 +73,29 @@ export default function BottomSheet(props: BottomSheetProps) {
     const theme = useTheme();
 
     const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;
-    const backgroundStyle = {
-        backgroundColor: theme.palette.surface.base,
-        borderTopLeftRadius: borderRadius,
-        borderTopRightRadius: borderRadius,
-    };
-
-    const contentWrapperStyle: ViewStyle = {
-        flex: 1,
-        maxHeight: maxDynamicContentSize,
-        minHeight: 300,
-        overflow: 'hidden',
-        paddingBottom: theme.spacing(6),
-        paddingTop: theme.spacing(5.5),
-    };
+    const backgroundStyle = css([
+        {
+            backgroundColor: theme.palette.surface.base,
+            borderTopLeftRadius: borderRadius,
+            borderTopRightRadius: borderRadius,
+        },
+        backgroundStyleProp,
+    ]);
+
+    const contentWrapperStyle: ViewStyle = css([
+        {
+            backgroundColor: theme.palette.surface.base,
+            borderTopLeftRadius: borderRadius,
+            borderTopRightRadius: borderRadius,
+            flexShrink: 1,
+            maxHeight: maxDynamicContentSize,
+            minHeight: 325,
+            overflow: 'hidden',
+            paddingBottom: theme.spacing(6),
+            paddingTop: theme.spacing(5.5),
+        },
+        styleProp,
+    ]);
 
     const isBackdropTransparent = backdropOpacity <= 0;
 
@@ -114,6 +126,13 @@ export default function BottomSheet(props: BottomSheetProps) {
         }).start();
     };
 
+    const {
+        animatedHandleHeight,
+        animatedSnapPoints,
+        animatedContentHeight,
+        handleContentLayout,
+    } = useDynamicSnapPoints(snapPoints);
+
     return (
         <BottomSheetModalProvider>
             <BottomSheetModal
@@ -125,12 +144,14 @@ export default function BottomSheet(props: BottomSheetProps) {
                 onChange={handleChange}
                 onDismiss={handleDismiss}
                 ref={bottomSheetRef}
-                snapPoints={snapPoints}
                 enablePanDownToClose={Boolean(onChange)}
                 enableDynamicSizing={enableDynamicSizing}
                 maxDynamicContentSize={maxDynamicContentSize}
                 detached={Boolean(topElement)}
                 onAnimate={topElement ? onAnimate : undefined}
+                snapPoints={animatedSnapPoints}
+                handleHeight={animatedHandleHeight}
+                contentHeight={animatedContentHeight}
             >
                 {topElement ? (
                     <Animated.View style={topElementAnimationStyle}>
@@ -143,7 +164,10 @@ export default function BottomSheet(props: BottomSheetProps) {
                     </Animated.View>
                 ) : null}
 
-                <BottomSheetView style={contentWrapperStyle}>
+                <BottomSheetView
+                    onLayout={handleContentLayout}
+                    style={contentWrapperStyle}
+                >
                     {children}
                 </BottomSheetView>
             </BottomSheetModal>

package/src/BottomSheet/BottomSheetProps.ts

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

package/src/BottomSheet/BottomSheetWeb.tsx

@@ -26,7 +26,7 @@ const useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {
             borderTopLeftRadius: theme.shape.radius.xxl,
             borderTopRightRadius: theme.shape.radius.xxl,
             flexGrow: 1,
-            minHeight: 300,
+            minHeight: 325,
             overflow: 'hidden',
             paddingBottom: theme.spacing(6),
             paddingTop: theme.spacing(5.5),
@@ -50,6 +50,7 @@ export default function BottomSheet(props: BottomSheetProps) {
         maxHeightNormalizedRatio = 0.8,
         onChange,
         snapPoints = [],
+        style: styleProp,
     } = props;
 
     const styles = useStyles();
@@ -90,6 +91,7 @@ export default function BottomSheet(props: BottomSheetProps) {
             ...(highestSnapPoint !== maxDynamicContentSize ? { height: highestSnapPoint } : {}),
             maxHeight: maxDynamicContentSize,
         },
+        styleProp,
     ]);
 
     return (

package/src/BottomSheet/useDynamicSnapPoints.native.ts

@@ -0,0 +1,15 @@
+import { useBottomSheetDynamicSnapPoints } from '@gorhom/bottom-sheet';
+import type BottomSheetProps from './BottomSheetProps';
+
+export default function useDynamicSnapPoints(snapPoints: BottomSheetProps['snapPoints']) {
+    if (snapPoints?.includes('CONTENT_HEIGHT')) {
+        return useBottomSheetDynamicSnapPoints(snapPoints);
+    }
+
+    return {
+        animatedHandleHeight: undefined,
+        animatedSnapPoints: snapPoints,
+        animatedContentHeight: undefined,
+        handleContentLayout: undefined,
+    };
+}

package/src/DateTimePicker/DateTimePicker.tsx

@@ -26,7 +26,7 @@ export default function DateTimePicker(props: DateTimePickerProps) {
 
     const theme = useTheme();
 
-    const textDayFontStyle = createFontStyle(theme, { selector: (typo) => typo.body2 });
+    const textDayFontStyle = createFontStyle(theme, { selector: (typo) => typo.body2.medium });
 
     const [yearPickerVisible, setYearPickerVisible] = React.useState(false);
     const { locales } = useDateTimePicker();

package/src/hooks/useUnstableCollapsibleAppBar.ts

@@ -222,7 +222,7 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
                 duration: ANIMATION_DURATION_MILLIS,
             });
         },
-    }, [appBarHeight]);
+    });
 
     const hasCollapsible = collapsibleToolbarHeight > 0;