@fountain-ui/lab 2.0.0-beta.87 → 3.0.0-alpha.1

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

@@ -1 +1 @@
-{"version":3,"names":["R","useCallback","useMemo","useState","useWindowDimensions","convertSnapPoint","snapPoint","windowHeight","maxDynamicContentSize","Math","min","percentageRegex","RegExp","test","percentage","parseFloat","isNaN","round","useDynamicSnapPoints","params","enableDynamicSizing","maxHeightNormalizedRatio","snapPoints","height","contentHeight","setContentHeight","convertedSnapPoints","map","push","Array","from","Set","sort","a","b","highestSnapPoint","last","handleContentSizeChange","_"],"sources":["useDynamicSnapPoints.ts"],"sourcesContent":["import * as R from 'ramda';\nimport { useCallback, useMemo, useState } from 'react';\nimport { useWindowDimensions } from 'react-native';\n\ninterface UseDynamicSnapPointsParams {\n    enableDynamicSizing: boolean;\n    maxHeightNormalizedRatio: number;\n    snapPoints: (number | string)[];\n}\n\ninterface UseDynamicSnapPointsReturns {\n    convertedSnapPoints: number[];\n    handleContentSizeChange: (w: number, h: number) => void;\n    highestSnapPoint: number;\n}\n\nconst convertSnapPoint = (snapPoint: number | string, windowHeight: number, maxDynamicContentSize: number): number => {\n    if (typeof snapPoint === 'number') {\n        return Math.min(maxDynamicContentSize, snapPoint);\n    }\n\n    const percentageRegex = new RegExp(/^[0-9]+%$/);\n    if (percentageRegex.test(snapPoint)) {\n        const percentage = parseFloat(snapPoint) / 100;\n        return isNaN(percentage) ? 0 : Math.min(maxDynamicContentSize, Math.round(windowHeight * percentage));\n    }\n\n    return 0;\n};\n\nexport default function useDynamicSnapPoints(params: UseDynamicSnapPointsParams): UseDynamicSnapPointsReturns {\n    const {\n        enableDynamicSizing,\n        maxHeightNormalizedRatio,\n        snapPoints,\n    } = params;\n\n    const { height: windowHeight } = useWindowDimensions();\n\n    const [contentHeight, setContentHeight] = useState<number>(0);\n\n    const convertedSnapPoints = useMemo(() => {\n        const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio);\n\n        const convertedSnapPoints = snapPoints.map((snapPoint) => {\n            return convertSnapPoint(snapPoint, windowHeight, maxDynamicContentSize);\n        });\n\n        if (enableDynamicSizing && contentHeight !== 0) {\n            convertedSnapPoints.push(\n                convertSnapPoint(contentHeight, windowHeight, maxDynamicContentSize),\n            );\n        }\n\n        return Array.from(new Set(convertedSnapPoints)).sort((a, b) => a - b);\n    }, [\n        contentHeight,\n        snapPoints,\n        windowHeight,\n    ]);\n\n    const highestSnapPoint = R.last(convertedSnapPoints) ?? 0;\n\n    const handleContentSizeChange = useCallback((_: number, height: number) => {\n        setContentHeight(height);\n    }, []);\n\n    return {\n        convertedSnapPoints,\n        handleContentSizeChange,\n        highestSnapPoint,\n    };\n}\n"],"mappings":"AAAA,OAAO,KAAKA,CAAZ,MAAmB,OAAnB;AACA,SAASC,WAAT,EAAsBC,OAAtB,EAA+BC,QAA/B,QAA+C,OAA/C;AACA,SAASC,mBAAT,QAAoC,cAApC;;AAcA,MAAMC,gBAAgB,GAAG,CAACC,SAAD,EAA6BC,YAA7B,EAAmDC,qBAAnD,KAA6F;EAClH,IAAI,OAAOF,SAAP,KAAqB,QAAzB,EAAmC;IAC/B,OAAOG,IAAI,CAACC,GAAL,CAASF,qBAAT,EAAgCF,SAAhC,CAAP;EACH;;EAED,MAAMK,eAAe,GAAG,IAAIC,MAAJ,CAAW,WAAX,CAAxB;;EACA,IAAID,eAAe,CAACE,IAAhB,CAAqBP,SAArB,CAAJ,EAAqC;IACjC,MAAMQ,UAAU,GAAGC,UAAU,CAACT,SAAD,CAAV,GAAwB,GAA3C;IACA,OAAOU,KAAK,CAACF,UAAD,CAAL,GAAoB,CAApB,GAAwBL,IAAI,CAACC,GAAL,CAASF,qBAAT,EAAgCC,IAAI,CAACQ,KAAL,CAAWV,YAAY,GAAGO,UAA1B,CAAhC,CAA/B;EACH;;EAED,OAAO,CAAP;AACH,CAZD;;AAcA,eAAe,SAASI,oBAAT,CAA8BC,MAA9B,EAA+F;EAC1G,MAAM;IACFC,mBADE;IAEFC,wBAFE;IAGFC;EAHE,IAIFH,MAJJ;EAMA,MAAM;IAAEI,MAAM,EAAEhB;EAAV,IAA2BH,mBAAmB,EAApD;EAEA,MAAM,CAACoB,aAAD,EAAgBC,gBAAhB,IAAoCtB,QAAQ,CAAS,CAAT,CAAlD;EAEA,MAAMuB,mBAAmB,GAAGxB,OAAO,CAAC,MAAM;IACtC,MAAMM,qBAAqB,GAAGC,IAAI,CAACQ,KAAL,CAAWV,YAAY,GAAGc,wBAA1B,CAA9B;IAEA,MAAMK,mBAAmB,GAAGJ,UAAU,CAACK,GAAX,CAAgBrB,SAAD,IAAe;MACtD,OAAOD,gBAAgB,CAACC,SAAD,EAAYC,YAAZ,EAA0BC,qBAA1B,CAAvB;IACH,CAF2B,CAA5B;;IAIA,IAAIY,mBAAmB,IAAII,aAAa,KAAK,CAA7C,EAAgD;MAC5CE,mBAAmB,CAACE,IAApB,CACIvB,gBAAgB,CAACmB,aAAD,EAAgBjB,YAAhB,EAA8BC,qBAA9B,CADpB;IAGH;;IAED,OAAOqB,KAAK,CAACC,IAAN,CAAW,IAAIC,GAAJ,CAAQL,mBAAR,CAAX,EAAyCM,IAAzC,CAA8C,CAACC,CAAD,EAAIC,CAAJ,KAAUD,CAAC,GAAGC,CAA5D,CAAP;EACH,CAdkC,EAchC,CACCV,aADD,EAECF,UAFD,EAGCf,YAHD,CAdgC,CAAnC;EAoBA,MAAM4B,gBAAgB,GAAGnC,CAAC,CAACoC,IAAF,CAAOV,mBAAP,KAA+B,CAAxD;EAEA,MAAMW,uBAAuB,GAAGpC,WAAW,CAAC,CAACqC,CAAD,EAAYf,MAAZ,KAA+B;IACvEE,gBAAgB,CAACF,MAAD,CAAhB;EACH,CAF0C,EAExC,EAFwC,CAA3C;EAIA,OAAO;IACHG,mBADG;IAEHW,uBAFG;IAGHF;EAHG,CAAP;AAKH"}
+{"version":3,"names":["useCallback","useMemo","useRef","useState","useWindowDimensions","R","INITIAL_CONTAINER_HEIGHT","convertSnapPoint","snapPoint","windowHeight","maxDynamicContentSize","Math","min","percentageRegex","RegExp","test","percentage","parseFloat","isNaN","round","useDynamicSnapPoints","params","enableDynamicSizing","snapPoints","height","contentHeight","setContentHeight","hasMeasureRef","convertedSnapPoints","map","push","Array","from","Set","sort","a","b","highestSnapPoint","last","handleLayout","event","current","nativeEvent","layout"],"sources":["useDynamicSnapPoints.ts"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions } from 'react-native';\nimport * as R from 'ramda';\n\nconst INITIAL_CONTAINER_HEIGHT = -999;\n\ninterface UseDynamicSnapPointsParams {\n    enableDynamicSizing: boolean;\n    maxDynamicContentSize: number;\n    snapPoints: (number | string)[];\n}\n\ninterface UseDynamicSnapPointsReturns {\n    convertedSnapPoints: number[];\n    handleLayout: (e: LayoutChangeEvent) => void;\n    highestSnapPoint: number;\n}\n\nconst convertSnapPoint = (snapPoint: number | string, windowHeight: number, maxDynamicContentSize: number): number => {\n    if (typeof snapPoint === 'number') {\n        return Math.min(maxDynamicContentSize, snapPoint);\n    }\n\n    const percentageRegex = new RegExp(/^[0-9]+%$/);\n    if (percentageRegex.test(snapPoint)) {\n        const percentage = parseFloat(snapPoint) / 100;\n        return isNaN(percentage) ? 0 : Math.min(maxDynamicContentSize, Math.round(windowHeight * percentage));\n    }\n\n    return 0;\n};\n\nexport default function useDynamicSnapPoints(params: UseDynamicSnapPointsParams): UseDynamicSnapPointsReturns {\n    const {\n        enableDynamicSizing,\n        maxDynamicContentSize,\n        snapPoints,\n    } = params;\n\n    const { height: windowHeight } = useWindowDimensions();\n\n    const [contentHeight, setContentHeight] = useState<number>(INITIAL_CONTAINER_HEIGHT);\n\n    const hasMeasureRef = useRef<boolean>(false);\n\n    const convertedSnapPoints = useMemo(() => {\n        if (contentHeight === INITIAL_CONTAINER_HEIGHT) {\n            return [];\n        }\n\n        const convertedSnapPoints = snapPoints.map((snapPoint) => {\n            return convertSnapPoint(snapPoint, windowHeight, maxDynamicContentSize);\n        });\n\n        if (enableDynamicSizing && contentHeight !== 0) {\n            convertedSnapPoints.push(\n                convertSnapPoint(contentHeight, windowHeight, maxDynamicContentSize),\n            );\n        }\n\n        return Array.from(new Set(convertedSnapPoints)).sort((a, b) => a - b);\n    }, [\n        contentHeight,\n        enableDynamicSizing,\n        maxDynamicContentSize,\n        snapPoints,\n        windowHeight,\n    ]);\n\n    const highestSnapPoint = R.last(convertedSnapPoints) ?? maxDynamicContentSize;\n\n    const handleLayout = useCallback((event: LayoutChangeEvent) => {\n        if (hasMeasureRef.current) {\n            return;\n        }\n\n        hasMeasureRef.current = true;\n        const { height } = event.nativeEvent.layout;\n        setContentHeight(height);\n    }, []);\n\n    return {\n        convertedSnapPoints,\n        handleLayout,\n        highestSnapPoint,\n    };\n}\n"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,OAAtB,EAA+BC,MAA/B,EAAuCC,QAAvC,QAAuD,OAAvD;AACA,SAA4BC,mBAA5B,QAAuD,cAAvD;AACA,OAAO,KAAKC,CAAZ,MAAmB,OAAnB;AAEA,MAAMC,wBAAwB,GAAG,CAAC,GAAlC;;AAcA,MAAMC,gBAAgB,GAAG,CAACC,SAAD,EAA6BC,YAA7B,EAAmDC,qBAAnD,KAA6F;EAClH,IAAI,OAAOF,SAAP,KAAqB,QAAzB,EAAmC;IAC/B,OAAOG,IAAI,CAACC,GAAL,CAASF,qBAAT,EAAgCF,SAAhC,CAAP;EACH;;EAED,MAAMK,eAAe,GAAG,IAAIC,MAAJ,CAAW,WAAX,CAAxB;;EACA,IAAID,eAAe,CAACE,IAAhB,CAAqBP,SAArB,CAAJ,EAAqC;IACjC,MAAMQ,UAAU,GAAGC,UAAU,CAACT,SAAD,CAAV,GAAwB,GAA3C;IACA,OAAOU,KAAK,CAACF,UAAD,CAAL,GAAoB,CAApB,GAAwBL,IAAI,CAACC,GAAL,CAASF,qBAAT,EAAgCC,IAAI,CAACQ,KAAL,CAAWV,YAAY,GAAGO,UAA1B,CAAhC,CAA/B;EACH;;EAED,OAAO,CAAP;AACH,CAZD;;AAcA,eAAe,SAASI,oBAAT,CAA8BC,MAA9B,EAA+F;EAC1G,MAAM;IACFC,mBADE;IAEFZ,qBAFE;IAGFa;EAHE,IAIFF,MAJJ;EAMA,MAAM;IAAEG,MAAM,EAAEf;EAAV,IAA2BL,mBAAmB,EAApD;EAEA,MAAM,CAACqB,aAAD,EAAgBC,gBAAhB,IAAoCvB,QAAQ,CAASG,wBAAT,CAAlD;EAEA,MAAMqB,aAAa,GAAGzB,MAAM,CAAU,KAAV,CAA5B;EAEA,MAAM0B,mBAAmB,GAAG3B,OAAO,CAAC,MAAM;IACtC,IAAIwB,aAAa,KAAKnB,wBAAtB,EAAgD;MAC5C,OAAO,EAAP;IACH;;IAED,MAAMsB,mBAAmB,GAAGL,UAAU,CAACM,GAAX,CAAgBrB,SAAD,IAAe;MACtD,OAAOD,gBAAgB,CAACC,SAAD,EAAYC,YAAZ,EAA0BC,qBAA1B,CAAvB;IACH,CAF2B,CAA5B;;IAIA,IAAIY,mBAAmB,IAAIG,aAAa,KAAK,CAA7C,EAAgD;MAC5CG,mBAAmB,CAACE,IAApB,CACIvB,gBAAgB,CAACkB,aAAD,EAAgBhB,YAAhB,EAA8BC,qBAA9B,CADpB;IAGH;;IAED,OAAOqB,KAAK,CAACC,IAAN,CAAW,IAAIC,GAAJ,CAAQL,mBAAR,CAAX,EAAyCM,IAAzC,CAA8C,CAACC,CAAD,EAAIC,CAAJ,KAAUD,CAAC,GAAGC,CAA5D,CAAP;EACH,CAhBkC,EAgBhC,CACCX,aADD,EAECH,mBAFD,EAGCZ,qBAHD,EAICa,UAJD,EAKCd,YALD,CAhBgC,CAAnC;EAwBA,MAAM4B,gBAAgB,GAAGhC,CAAC,CAACiC,IAAF,CAAOV,mBAAP,KAA+BlB,qBAAxD;EAEA,MAAM6B,YAAY,GAAGvC,WAAW,CAAEwC,KAAD,IAA8B;IAC3D,IAAIb,aAAa,CAACc,OAAlB,EAA2B;MACvB;IACH;;IAEDd,aAAa,CAACc,OAAd,GAAwB,IAAxB;IACA,MAAM;MAAEjB;IAAF,IAAagB,KAAK,CAACE,WAAN,CAAkBC,MAArC;IACAjB,gBAAgB,CAACF,MAAD,CAAhB;EACH,CAR+B,EAQ7B,EAR6B,CAAhC;EAUA,OAAO;IACHI,mBADG;IAEHW,YAFG;IAGHF;EAHG,CAAP;AAKH"}

package/build/module/DateTimePicker/DateTimePicker.js

@@ -33,11 +33,11 @@ export default function DateTimePicker(props) {
 
   const LeftArrow = /*#__PURE__*/React.createElement(Typography, {
     children: '<',
-    color: 'textPrimary'
+    color: 'strong'
   });
   const RightArrow = /*#__PURE__*/React.createElement(Typography, {
     children: '>',
-    color: 'textPrimary'
+    color: 'strong'
   });
 
   const onYearPress = date => {

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={'textPrimary'}/>;\n    const RightArrow = <Typography children={'>'} color={'textPrimary'}/>;\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","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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"}

package/build/module/DateTimePicker/YearPicker.js

@@ -46,8 +46,8 @@ const YearPicker = _ref => {
 
   return /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(Typography, {
     children: formatDate(date, locale),
-    color: 'textPrimary',
-    variant: 'subtitle2'
+    color: 'strong',
+    variant: 'body3'
   }), /*#__PURE__*/React.createElement(FlatList, {
     data: years,
     keyExtractor: item => item.toString(),

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

@@ -1 +1 @@
-{"version":3,"names":["React","FlatList","getYear","setYear","Button","Column","Typography","useTheme","formatDate","initYear","itemHeight","useStyles","theme","list","marginTop","spacing","maxHeight","YearPicker","date","locale","maxDate","minDate","onYearPress","styles","ref","useRef","minYear","maxYear","Date","years","Array","fill","map","v","i","useEffect","current","scrollToItem","animated","item","getItemLayout","data","index","length","offset","toString","newDate"],"sources":["YearPicker.tsx"],"sourcesContent":["import React from 'react';\nimport { FlatList } from 'react-native';\nimport { getYear, setYear } from 'date-fns';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { Button, Column, Typography, useTheme } from '@fountain-ui/core';\nimport { formatDate } from './utils';\n\nconst initYear = 1901;\nconst itemHeight = 40;\n\ninterface YearPickerProps {\n    date: Date;\n    locale?: string,\n    maxDate?: Date;\n    minDate?: Date;\n    onYearPress: (date: Date) => void;\n}\n\ntype YearPickerStyles = NamedStylesStringUnion<'list'>;\n\nconst useStyles: UseStyles<YearPickerStyles> = function (): YearPickerStyles {\n    const theme = useTheme();\n\n    return {\n        list: {\n            marginTop: theme.spacing(1),\n            maxHeight: 270,\n        },\n    };\n};\n\nconst YearPicker = ({\n    date,\n    locale,\n    maxDate,\n    minDate,\n    onYearPress,\n}: YearPickerProps) => {\n    const styles = useStyles();\n\n    const ref = React.useRef<FlatList | null>(null);\n\n    const minYear = minDate ? getYear(minDate) : initYear;\n    const maxYear = maxDate ? getYear(maxDate) : getYear(new Date());\n    const years = Array(maxYear - minYear + 1).fill(minYear).map((v, i) => v + i);\n\n    React.useEffect(() => {\n        ref.current?.scrollToItem({\n            animated: false,\n            item: getYear(date),\n        });\n    }, [date]);\n\n    const getItemLayout = (data: Array<number> | null | undefined, index: number) => ({\n        length: itemHeight,\n        offset: itemHeight * index,\n        index,\n    });\n\n    return (\n        <Column>\n            <Typography\n                children={formatDate(date, locale)}\n                color={'textPrimary'}\n                variant={'subtitle2'}\n            />\n            <FlatList\n                data={years}\n                keyExtractor={item => item.toString()}\n                renderItem={({ item }) => (\n                    <Button\n                        children={item.toString()}\n                        variant={'text'}\n                        onPress={() => {\n                            const newDate = setYear(date, item);\n                            onYearPress(newDate);\n                        }}\n                    />\n                )}\n                getItemLayout={getItemLayout}\n                style={styles.list}\n                ref={ref}\n            />\n        </Column>\n    );\n};\n\nexport default YearPicker;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAT,QAAyB,cAAzB;AACA,SAASC,OAAT,EAAkBC,OAAlB,QAAiC,UAAjC;AAEA,SAASC,MAAT,EAAiBC,MAAjB,EAAyBC,UAAzB,EAAqCC,QAArC,QAAqD,mBAArD;AACA,SAASC,UAAT,QAA2B,SAA3B;AAEA,MAAMC,QAAQ,GAAG,IAAjB;AACA,MAAMC,UAAU,GAAG,EAAnB;;AAYA,MAAMC,SAAsC,GAAG,YAA8B;EACzE,MAAMC,KAAK,GAAGL,QAAQ,EAAtB;EAEA,OAAO;IACHM,IAAI,EAAE;MACFC,SAAS,EAAEF,KAAK,CAACG,OAAN,CAAc,CAAd,CADT;MAEFC,SAAS,EAAE;IAFT;EADH,CAAP;AAMH,CATD;;AAWA,MAAMC,UAAU,GAAG,QAMI;EAAA,IANH;IAChBC,IADgB;IAEhBC,MAFgB;IAGhBC,OAHgB;IAIhBC,OAJgB;IAKhBC;EALgB,CAMG;EACnB,MAAMC,MAAM,GAAGZ,SAAS,EAAxB;EAEA,MAAMa,GAAG,GAAGxB,KAAK,CAACyB,MAAN,CAA8B,IAA9B,CAAZ;EAEA,MAAMC,OAAO,GAAGL,OAAO,GAAGnB,OAAO,CAACmB,OAAD,CAAV,GAAsBZ,QAA7C;EACA,MAAMkB,OAAO,GAAGP,OAAO,GAAGlB,OAAO,CAACkB,OAAD,CAAV,GAAsBlB,OAAO,CAAC,IAAI0B,IAAJ,EAAD,CAApD;EACA,MAAMC,KAAK,GAAGC,KAAK,CAACH,OAAO,GAAGD,OAAV,GAAoB,CAArB,CAAL,CAA6BK,IAA7B,CAAkCL,OAAlC,EAA2CM,GAA3C,CAA+C,CAACC,CAAD,EAAIC,CAAJ,KAAUD,CAAC,GAAGC,CAA7D,CAAd;EAEAlC,KAAK,CAACmC,SAAN,CAAgB,MAAM;IAAA;;IAClB,gBAAAX,GAAG,CAACY,OAAJ,8DAAaC,YAAb,CAA0B;MACtBC,QAAQ,EAAE,KADY;MAEtBC,IAAI,EAAErC,OAAO,CAACgB,IAAD;IAFS,CAA1B;EAIH,CALD,EAKG,CAACA,IAAD,CALH;;EAOA,MAAMsB,aAAa,GAAG,CAACC,IAAD,EAAyCC,KAAzC,MAA4D;IAC9EC,MAAM,EAAEjC,UADsE;IAE9EkC,MAAM,EAAElC,UAAU,GAAGgC,KAFyD;IAG9EA;EAH8E,CAA5D,CAAtB;;EAMA,oBACI,oBAAC,MAAD,qBACI,oBAAC,UAAD;IACI,QAAQ,EAAElC,UAAU,CAACU,IAAD,EAAOC,MAAP,CADxB;IAEI,KAAK,EAAE,aAFX;IAGI,OAAO,EAAE;EAHb,EADJ,eAMI,oBAAC,QAAD;IACI,IAAI,EAAEU,KADV;IAEI,YAAY,EAAEU,IAAI,IAAIA,IAAI,CAACM,QAAL,EAF1B;IAGI,UAAU,EAAE;MAAA,IAAC;QAAEN;MAAF,CAAD;MAAA,oBACR,oBAAC,MAAD;QACI,QAAQ,EAAEA,IAAI,CAACM,QAAL,EADd;QAEI,OAAO,EAAE,MAFb;QAGI,OAAO,EAAE,MAAM;UACX,MAAMC,OAAO,GAAG3C,OAAO,CAACe,IAAD,EAAOqB,IAAP,CAAvB;UACAjB,WAAW,CAACwB,OAAD,CAAX;QACH;MANL,EADQ;IAAA,CAHhB;IAaI,aAAa,EAAEN,aAbnB;IAcI,KAAK,EAAEjB,MAAM,CAACV,IAdlB;IAeI,GAAG,EAAEW;EAfT,EANJ,CADJ;AA0BH,CAtDD;;AAwDA,eAAeP,UAAf"}
+{"version":3,"names":["React","FlatList","getYear","setYear","Button","Column","Typography","useTheme","formatDate","initYear","itemHeight","useStyles","theme","list","marginTop","spacing","maxHeight","YearPicker","date","locale","maxDate","minDate","onYearPress","styles","ref","useRef","minYear","maxYear","Date","years","Array","fill","map","v","i","useEffect","current","scrollToItem","animated","item","getItemLayout","data","index","length","offset","toString","newDate"],"sources":["YearPicker.tsx"],"sourcesContent":["import React from 'react';\nimport { FlatList } from 'react-native';\nimport { getYear, setYear } from 'date-fns';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { Button, Column, Typography, useTheme } from '@fountain-ui/core';\nimport { formatDate } from './utils';\n\nconst initYear = 1901;\nconst itemHeight = 40;\n\ninterface YearPickerProps {\n    date: Date;\n    locale?: string,\n    maxDate?: Date;\n    minDate?: Date;\n    onYearPress: (date: Date) => void;\n}\n\ntype YearPickerStyles = NamedStylesStringUnion<'list'>;\n\nconst useStyles: UseStyles<YearPickerStyles> = function (): YearPickerStyles {\n    const theme = useTheme();\n\n    return {\n        list: {\n            marginTop: theme.spacing(1),\n            maxHeight: 270,\n        },\n    };\n};\n\nconst YearPicker = ({\n    date,\n    locale,\n    maxDate,\n    minDate,\n    onYearPress,\n}: YearPickerProps) => {\n    const styles = useStyles();\n\n    const ref = React.useRef<FlatList | null>(null);\n\n    const minYear = minDate ? getYear(minDate) : initYear;\n    const maxYear = maxDate ? getYear(maxDate) : getYear(new Date());\n    const years = Array(maxYear - minYear + 1).fill(minYear).map((v, i) => v + i);\n\n    React.useEffect(() => {\n        ref.current?.scrollToItem({\n            animated: false,\n            item: getYear(date),\n        });\n    }, [date]);\n\n    const getItemLayout = (data: Array<number> | null | undefined, index: number) => ({\n        length: itemHeight,\n        offset: itemHeight * index,\n        index,\n    });\n\n    return (\n        <Column>\n            <Typography\n                children={formatDate(date, locale)}\n                color={'strong'}\n                variant={'body3'}\n            />\n            <FlatList\n                data={years}\n                keyExtractor={item => item.toString()}\n                renderItem={({ item }) => (\n                    <Button\n                        children={item.toString()}\n                        variant={'text'}\n                        onPress={() => {\n                            const newDate = setYear(date, item);\n                            onYearPress(newDate);\n                        }}\n                    />\n                )}\n                getItemLayout={getItemLayout}\n                style={styles.list}\n                ref={ref}\n            />\n        </Column>\n    );\n};\n\nexport default YearPicker;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAT,QAAyB,cAAzB;AACA,SAASC,OAAT,EAAkBC,OAAlB,QAAiC,UAAjC;AAEA,SAASC,MAAT,EAAiBC,MAAjB,EAAyBC,UAAzB,EAAqCC,QAArC,QAAqD,mBAArD;AACA,SAASC,UAAT,QAA2B,SAA3B;AAEA,MAAMC,QAAQ,GAAG,IAAjB;AACA,MAAMC,UAAU,GAAG,EAAnB;;AAYA,MAAMC,SAAsC,GAAG,YAA8B;EACzE,MAAMC,KAAK,GAAGL,QAAQ,EAAtB;EAEA,OAAO;IACHM,IAAI,EAAE;MACFC,SAAS,EAAEF,KAAK,CAACG,OAAN,CAAc,CAAd,CADT;MAEFC,SAAS,EAAE;IAFT;EADH,CAAP;AAMH,CATD;;AAWA,MAAMC,UAAU,GAAG,QAMI;EAAA,IANH;IAChBC,IADgB;IAEhBC,MAFgB;IAGhBC,OAHgB;IAIhBC,OAJgB;IAKhBC;EALgB,CAMG;EACnB,MAAMC,MAAM,GAAGZ,SAAS,EAAxB;EAEA,MAAMa,GAAG,GAAGxB,KAAK,CAACyB,MAAN,CAA8B,IAA9B,CAAZ;EAEA,MAAMC,OAAO,GAAGL,OAAO,GAAGnB,OAAO,CAACmB,OAAD,CAAV,GAAsBZ,QAA7C;EACA,MAAMkB,OAAO,GAAGP,OAAO,GAAGlB,OAAO,CAACkB,OAAD,CAAV,GAAsBlB,OAAO,CAAC,IAAI0B,IAAJ,EAAD,CAApD;EACA,MAAMC,KAAK,GAAGC,KAAK,CAACH,OAAO,GAAGD,OAAV,GAAoB,CAArB,CAAL,CAA6BK,IAA7B,CAAkCL,OAAlC,EAA2CM,GAA3C,CAA+C,CAACC,CAAD,EAAIC,CAAJ,KAAUD,CAAC,GAAGC,CAA7D,CAAd;EAEAlC,KAAK,CAACmC,SAAN,CAAgB,MAAM;IAAA;;IAClB,gBAAAX,GAAG,CAACY,OAAJ,8DAAaC,YAAb,CAA0B;MACtBC,QAAQ,EAAE,KADY;MAEtBC,IAAI,EAAErC,OAAO,CAACgB,IAAD;IAFS,CAA1B;EAIH,CALD,EAKG,CAACA,IAAD,CALH;;EAOA,MAAMsB,aAAa,GAAG,CAACC,IAAD,EAAyCC,KAAzC,MAA4D;IAC9EC,MAAM,EAAEjC,UADsE;IAE9EkC,MAAM,EAAElC,UAAU,GAAGgC,KAFyD;IAG9EA;EAH8E,CAA5D,CAAtB;;EAMA,oBACI,oBAAC,MAAD,qBACI,oBAAC,UAAD;IACI,QAAQ,EAAElC,UAAU,CAACU,IAAD,EAAOC,MAAP,CADxB;IAEI,KAAK,EAAE,QAFX;IAGI,OAAO,EAAE;EAHb,EADJ,eAMI,oBAAC,QAAD;IACI,IAAI,EAAEU,KADV;IAEI,YAAY,EAAEU,IAAI,IAAIA,IAAI,CAACM,QAAL,EAF1B;IAGI,UAAU,EAAE;MAAA,IAAC;QAAEN;MAAF,CAAD;MAAA,oBACR,oBAAC,MAAD;QACI,QAAQ,EAAEA,IAAI,CAACM,QAAL,EADd;QAEI,OAAO,EAAE,MAFb;QAGI,OAAO,EAAE,MAAM;UACX,MAAMC,OAAO,GAAG3C,OAAO,CAACe,IAAD,EAAOqB,IAAP,CAAvB;UACAjB,WAAW,CAACwB,OAAD,CAAX;QACH;MANL,EADQ;IAAA,CAHhB;IAaI,aAAa,EAAEN,aAbnB;IAcI,KAAK,EAAEjB,MAAM,CAACV,IAdlB;IAeI,GAAG,EAAEW;EAfT,EANJ,CADJ;AA0BH,CAtDD;;AAwDA,eAAeP,UAAf"}

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

@@ -19,19 +19,6 @@ export default interface BottomSheetProps extends ComponentProps<{
      * @default true
      */
     enableDynamicSizing?: boolean;
-    /**
-     * Area to be fixed on the top of the bottom sheet.
-     */
-    header?: React.ReactNode;
-    /**
-     * If set to true, a border will be applied to the header area when the bottom sheet content is scrollable.
-     * This visually separates the header from the scrollable content.
-     */
-    enableScrollableHeaderBorder?: boolean;
-    /**
-     * Area to be fixed on the bottom of the bottom sheet.
-     */
-    stickyBottomElement?: React.ReactNode;
     /**
      * Top element for displaying additional information on the bottom sheet.
      */
@@ -43,7 +30,7 @@ export default interface BottomSheetProps extends ComponentProps<{
     /**
      * Maximum height(normalized value) of dialog
      * ex. 30% => 0.3 / 90% => 0.9
-     * @default 0.9
+     * @default 0.8
      */
     maxHeightNormalizedRatio?: number;
     /**

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

@@ -1,11 +1,12 @@
+import { LayoutChangeEvent } from 'react-native';
 interface UseDynamicSnapPointsParams {
     enableDynamicSizing: boolean;
-    maxHeightNormalizedRatio: number;
+    maxDynamicContentSize: number;
     snapPoints: (number | string)[];
 }
 interface UseDynamicSnapPointsReturns {
     convertedSnapPoints: number[];
-    handleContentSizeChange: (w: number, h: number) => void;
+    handleLayout: (e: LayoutChangeEvent) => void;
     highestSnapPoint: number;
 }
 export default function useDynamicSnapPoints(params: UseDynamicSnapPointsParams): UseDynamicSnapPointsReturns;

package/build/typescript/Carousel/Carousel.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type CarouselProps from './CarouselProps';
 import type { CarouselInstance } from './types';
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<CarouselProps<any>, "style" | "data" | "scrollEnabled" | "autoplay" | "autoplayInterval" | "createItemStyle" | "createScrollAnimation" | "disableSmartAutoplay" | "initialIndex" | "itemHeight" | "itemWidth" | "loop" | "onIndexChange" | "renderItem" | "windowSize"> & React.RefAttributes<CarouselInstance>>>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<CarouselProps<any>, "style" | "data" | "autoplay" | "autoplayInterval" | "createItemStyle" | "createScrollAnimation" | "disableSmartAutoplay" | "initialIndex" | "itemHeight" | "itemWidth" | "loop" | "onIndexChange" | "renderItem" | "scrollEnabled" | "windowSize"> & React.RefAttributes<CarouselInstance>>>;
 export default _default;

package/build/typescript/ViewPager/ViewPager.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type ViewPagerProps from './ViewPagerProps';
 import type { ViewPagerInstance } from './types';
-declare const ViewPager: React.ForwardRefExoticComponent<Pick<ViewPagerProps, "style" | "children" | "onChange" | "keyboardDismissMode" | "scrollEnabled" | "initialPage" | "loading" | "offscreenPageRerenderLimit" | "onPageScrollStateChanged" | "pageForceRerenderKey" | "UNSTABLE_sharedPage"> & React.RefAttributes<ViewPagerInstance>>;
+declare const ViewPager: React.ForwardRefExoticComponent<Pick<ViewPagerProps, "style" | "children" | "onChange" | "scrollEnabled" | "keyboardDismissMode" | "initialPage" | "loading" | "offscreenPageRerenderLimit" | "onPageScrollStateChanged" | "pageForceRerenderKey" | "UNSTABLE_sharedPage"> & React.RefAttributes<ViewPagerInstance>>;
 export default ViewPager;

package/build/typescript/ViewPager/ViewPager.native.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type ViewPagerProps from './ViewPagerProps';
 import type { ViewPagerInstance } from './types';
-declare const ViewPager: React.ForwardRefExoticComponent<Pick<ViewPagerProps, "style" | "children" | "onChange" | "keyboardDismissMode" | "scrollEnabled" | "initialPage" | "loading" | "offscreenPageRerenderLimit" | "onPageScrollStateChanged" | "pageForceRerenderKey" | "UNSTABLE_sharedPage"> & React.RefAttributes<ViewPagerInstance>>;
+declare const ViewPager: React.ForwardRefExoticComponent<Pick<ViewPagerProps, "style" | "children" | "onChange" | "scrollEnabled" | "keyboardDismissMode" | "initialPage" | "loading" | "offscreenPageRerenderLimit" | "onPageScrollStateChanged" | "pageForceRerenderKey" | "UNSTABLE_sharedPage"> & React.RefAttributes<ViewPagerInstance>>;
 export default ViewPager;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "2.0.0-beta.87",
+  "version": "3.0.0-alpha.1",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -17,12 +17,12 @@
   "dependencies": {
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
-    "@fountain-ui/icons": "2.0.0-beta.30",
-    "@fountain-ui/utils": "^2.0.0-beta.4",
+    "@fountain-ui/icons": "3.0.0-alpha.1",
+    "@fountain-ui/utils": "^3.0.0-alpha.1",
     "react-native-calendars": "1.1267.0"
   },
   "peerDependencies": {
-    "@fountain-ui/core": "^2.0.0-beta.3",
+    "@fountain-ui/core": "^3.0.0-alpha.1",
     "@gorhom/bottom-sheet": "^4.5.0",
     "date-fns": "^2.0.0",
     "react": "^16.8.0 || ^17.0.0",
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0215ef644e31bc02a958a733fe78306453137b5a"
+  "gitHead": "88b0532dcdf185877d95cd713f9d9076728abe12"
 }

package/src/BottomSheet/BottomSheetNative.tsx

@@ -1,58 +1,46 @@
-import React from 'react';
-import { Animated, LayoutChangeEvent, Platform, useWindowDimensions, View, ViewStyle } from 'react-native';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Animated, LayoutChangeEvent, useWindowDimensions, ViewStyle } from 'react-native';
 import {
     BottomSheetBackdrop,
     BottomSheetBackdropProps,
-    BottomSheetFooter,
-    BottomSheetFooterProps,
     BottomSheetModal,
     BottomSheetModalProvider,
-    BottomSheetScrollView,
+    BottomSheetView,
 } from '@gorhom/bottom-sheet';
-import { Column, ExtendedStyle, isNotAndroid12, useAnimatedValue, useElevationStyle } from '@fountain-ui/core';
+import { Column, ExtendedStyle, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';
 import { useTheme } from '@fountain-ui/styles';
 import type BottomSheetProps from './BottomSheetProps';
 import TransparentBackdrop from './TransparentBackdrop';
 
 const NoHandle = () => null;
 
-const createHeightLayoutHandler = (setHeight: React.Dispatch<React.SetStateAction<number>>) => {
-    return (event: LayoutChangeEvent) => {
-        const { height } = event.nativeEvent.layout;
-        setHeight(height);
-    };
-}
-
 export default function BottomSheet(props: BottomSheetProps) {
     const {
         backdropOpacity = 0.5,
         borderRadius: borderRadiusProp,
         children,
         enableDynamicSizing = true,
-        header,
-        stickyBottomElement,
         topElement,
         index,
-        maxHeightNormalizedRatio = 0.9,
+        maxHeightNormalizedRatio = 0.8,
         onChange,
         snapPoints = [],
-        enableScrollableHeaderBorder = false,
     } = props;
 
-    const indexRef = React.useRef<number>(-1);
-    const bottomSheetRef = React.useRef<BottomSheetModal | null>(null);
+    const indexRef = useRef<number>(-1);
+    const bottomSheetRef = useRef<BottomSheetModal | null>(null);
 
     const { height: windowHeight } = useWindowDimensions();
-    const [isScrollable, setIsScrollable] = React.useState(false);
-    const [topElementHeight, setTopElementHeight] = React.useState(0);
-    const [stickyBottomElementHeight, setStickyBottomElementHeight] = React.useState(0);
+    const [topElementHeight, setTopElementHeight] = useState(0);
 
     const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;
 
-    const handleTopElementLayout = createHeightLayoutHandler(setTopElementHeight);
-    const handleStickyBottomElementLayout = createHeightLayoutHandler(setStickyBottomElementHeight);
+    const handleTopElementLayout = (event: LayoutChangeEvent) => {
+        const { height } = event.nativeEvent.layout;
+        setTopElementHeight(height);
+    };
 
-    const handleChange = React.useCallback((newIndex: number) => {
+    const handleChange = useCallback((newIndex: number) => {
         indexRef.current = newIndex;
 
         if (onChange) {
@@ -60,11 +48,11 @@ export default function BottomSheet(props: BottomSheetProps) {
         }
     }, [onChange]);
 
-    const handleDismiss = React.useCallback(() => {
+    const handleDismiss = useCallback(() => {
         handleChange(-1);
     }, [handleChange]);
 
-    React.useEffect(() => {
+    useEffect(() => {
         if (index === indexRef.current) {
             return;
         }
@@ -80,29 +68,21 @@ export default function BottomSheet(props: BottomSheetProps) {
     }, [index]);
 
     const theme = useTheme();
-    const shadow = theme.shadow[12];
-    const borderRadius = borderRadiusProp ?? theme.shape.roundnessExtra;
-    const modalStyle = {
-        backgroundColor: '#ffffff00',
-        borderTopLeftRadius: borderRadius,
-        borderTopRightRadius: borderRadius,
-        ...Platform.select<object>({
-            android: shadow?.elevation,
-            ios: shadow?.shadow,
-            web: shadow?.boxShadow,
-        }),
-    };
-    const backgroundColor = theme.palette.paper.default;
+
+    const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;
     const backgroundStyle = {
-        backgroundColor,
+        backgroundColor: theme.palette.surface.base,
         borderTopLeftRadius: borderRadius,
         borderTopRightRadius: borderRadius,
     };
+
     const contentWrapperStyle: ViewStyle = {
         flex: 1,
-        borderTopLeftRadius: borderRadius,
-        borderTopRightRadius: borderRadius,
+        maxHeight: maxDynamicContentSize,
+        minHeight: 300,
         overflow: 'hidden',
+        paddingBottom: theme.spacing(6),
+        paddingTop: theme.spacing(5.5),
     };
 
     const isBackdropTransparent = backdropOpacity <= 0;
@@ -134,41 +114,6 @@ export default function BottomSheet(props: BottomSheetProps) {
         }).start();
     };
 
-    const handleContentSizeChange = (_: number, contentHeight: number) => {
-        setIsScrollable(contentHeight > maxDynamicContentSize);
-    };
-
-    const headerStyle = {
-        backgroundColor,
-        ...(isScrollable && enableScrollableHeaderBorder ? {
-            borderBottomWidth: 0.5,
-            borderBottomColor: theme.palette.divider,
-        }: {})
-    }
-
-    const childrenStyle = {
-        backgroundColor,
-        paddingBottom: stickyBottomElementHeight,
-    }
-
-    const stickyBottomElementShadow = useElevationStyle(8);
-
-    const stickyBottomElementStyle = {
-        backgroundColor: theme.palette.paper.default,
-        ...(isScrollable ? stickyBottomElementShadow : {}),
-    }
-
-    const renderFooter = (props: BottomSheetFooterProps) => (
-        <BottomSheetFooter {...props}>
-            <View
-                onLayout={handleStickyBottomElementLayout}
-                style={stickyBottomElementStyle}
-            >
-                {stickyBottomElement}
-            </View>
-        </BottomSheetFooter>
-    );
-
     return (
         <BottomSheetModalProvider>
             <BottomSheetModal
@@ -181,13 +126,11 @@ export default function BottomSheet(props: BottomSheetProps) {
                 onDismiss={handleDismiss}
                 ref={bottomSheetRef}
                 snapPoints={snapPoints}
-                style={modalStyle}
                 enablePanDownToClose={Boolean(onChange)}
                 enableDynamicSizing={enableDynamicSizing}
                 maxDynamicContentSize={maxDynamicContentSize}
                 detached={Boolean(topElement)}
                 onAnimate={topElement ? onAnimate : undefined}
-                footerComponent={stickyBottomElement ? renderFooter : undefined}
             >
                 {topElement ? (
                     <Animated.View style={topElementAnimationStyle}>
@@ -200,21 +143,9 @@ export default function BottomSheet(props: BottomSheetProps) {
                     </Animated.View>
                 ) : null}
 
-                <View style={contentWrapperStyle}>
-                    <BottomSheetScrollView
-                        bounces={false}
-                        stickyHeaderIndices={header ? [0] : undefined}
-                        onContentSizeChange={handleContentSizeChange}
-                    >
-                        <View style={headerStyle}>
-                            {header}
-                        </View>
-
-                        <View style={childrenStyle}>
-                            {children}
-                        </View>
-                    </BottomSheetScrollView>
-                </View>
+                <BottomSheetView style={contentWrapperStyle}>
+                    {children}
+                </BottomSheetView>
             </BottomSheetModal>
         </BottomSheetModalProvider>
     );

package/src/BottomSheet/BottomSheetProps.ts

@@ -24,22 +24,6 @@ export default interface BottomSheetProps extends ComponentProps<{
      */
     enableDynamicSizing?: boolean;
 
-    /**
-     * Area to be fixed on the top of the bottom sheet.
-     */
-    header?: React.ReactNode;
-
-    /**
-     * If set to true, a border will be applied to the header area when the bottom sheet content is scrollable.
-     * This visually separates the header from the scrollable content.
-     */
-    enableScrollableHeaderBorder?: boolean;
-
-    /**
-     * Area to be fixed on the bottom of the bottom sheet.
-     */
-    stickyBottomElement?: React.ReactNode;
-
     /**
      * Top element for displaying additional information on the bottom sheet.
      */
@@ -53,7 +37,7 @@ export default interface BottomSheetProps extends ComponentProps<{
     /**
      * Maximum height(normalized value) of dialog
      * ex. 30% => 0.3 / 90% => 0.9
-     * @default 0.9
+     * @default 0.8
      */
     maxHeightNormalizedRatio?: number;