npm - @fountain-ui/lab - Versions diffs - 3.0.0-alpha.6 → 3.0.0-alpha.8 - Mend

@fountain-ui/lab 3.0.0-alpha.6 → 3.0.0-alpha.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/build/commonjs/BottomSheet/BottomSheetNative.js CHANGED Viewed

@@ -37,7 +37,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,12 +87,15 @@ 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
-  };
+  }, styleProp]);
   const contentWrapperStyle = {
+    backgroundColor: theme.palette.surface.base,
+    borderTopLeftRadius: borderRadius,
+    borderTopRightRadius: borderRadius,
     flexShrink: 1,
     maxHeight: maxDynamicContentSize,
     minHeight: 325,

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

	@@ -1 +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","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","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 flexShrink: 1,\n maxHeight: maxDynamicContentSize,\n minHeight: 325,\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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"}
1	+ {"version":3,"names":["NoHandle","BottomSheet","props","backdropOpacity","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","backgroundStyle","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","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';\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 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 styleProp,\n ]);\n\n const contentWrapperStyle: ViewStyle = {\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\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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"}

package/build/commonjs/BottomSheet/BottomSheetWeb.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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: 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 } = 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":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAEA;;;;;;;;AAIA,MAAMA,SAAuC,GAAG,YAA+B;EAC3E,MAAMC,KAAK,GAAG,IAAAC,cAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,cAAc,EAAE,UADd;MAEFC,MAAM,EAAEJ,KAAK,CAACI,MAAN,CAAaC;IAFnB,CADH;IAKHC,QAAQ,EAAE;MACNC,SAAS,EAAE,QADL;MAENC,QAAQ,EAAE,GAFJ;MAGNC,KAAK,EAAE;IAHD,CALP;IAUHC,KAAK,EAAE;MACHC,eAAe,EAAEX,KAAK,CAACY,OAAN,CAAcC,OAAd,CAAsBC,IADpC;MAEHC,mBAAmB,EAAEf,KAAK,CAACgB,KAAN,CAAYC,MAAZ,CAAmBC,GAFrC;MAGHC,oBAAoB,EAAEnB,KAAK,CAACgB,KAAN,CAAYC,MAAZ,CAAmBC,GAHtC;MAIHE,QAAQ,EAAE,CAJP;MAKHC,SAAS,EAAE,GALR;MAMHC,QAAQ,EAAE,QANP;MAOHC,aAAa,EAAEvB,KAAK,CAACwB,OAAN,CAAc,CAAd,CAPZ;MAQHC,UAAU,EAAEzB,KAAK,CAACwB,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+Be,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~~,~~IAUFT~~,~~KAVJ~~;~~EAYA~~,~~MAAMU~~,MAAM,~~GAAGzC~~,SAAS,EAAxB;EAEA,MAAM;~~IAAE0C~~,MAAM,EAAEC;EAAV,IAA2B,IAAAC,gCAAA,GAAjC;EAEA,MAAM,CAACC,gBAAD,EAAmBC,mBAAnB,IAA0C,IAAAC,eAAA,EAAS,CAAT,CAAhD;EAEA,MAAMC,qBAAqB,GAAGC,IAAI,CAACC,KAAL,CAAWP,YAAY,~~GAAGL~~,wBAA1B,~~IAAsDO~~,gBAApF;;EAEA,MAAMM,sBAAsB,GAAIC,KAAD,IAA8B;IACzD,MAAM;MAAEV;IAAF,IAAaU,KAAK,CAACC,WAAN,CAAkBC,MAArC;IACAR,mBAAmB,CAACJ,MAAD,CAAnB;EACH,CAHD;;EAKA,MAAMa,WAAW,GAAG,MAAM;IACtB,~~IAAIhB~~,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAAC,CAAF,CAAR;IACH;EACJ,CAJD;;EAMA,MAAM;~~IACFiB~~,mBADE;IAEFC,YAFE;IAGFC;EAHE,IAIF,IAAAC,6BAAA,EAAqB;~~IACrBxB~~,mBADqB;~~IAErBa~~,qBAFqB;~~IAGrBR~~;EAHqB,CAArB,CAJJ;EAUA,~~MAAMoB~~,UAAU,GAAGF,gBAAgB,IAAIF,mBAAmB,~~CAACnB~~,KAAD,CAAnB,IAA8B,CAAlC,CAAnC;EAEA,~~MAAMwB~~,aAAa,GAAG,IAAAC,SAAA,EAAI,CACtBrB,MAAM,~~CAAC9B~~,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;MAAEN,MAAM,EAAEgB;IAAV,CAA7C,GAA4E,EAAhF,CAFJ;IAGIK,SAAS,EAAEf;EAHf,CAFsB,CAAJ,CAAtB;~~EASA~~,oBACI,6BAAC,WAAD;IACI,eAAe,~~EAAEhB~~,eADrB;IAEI,OAAO,~~EAAEuB~~,WAFb;IAGI,OAAO,~~EAAElB~~,KAAK,IAAI,CAHtB;IAII,KAAK,EAAE,~~IAAAyB~~,SAAA,EAAI,CAACE,gBAAA,CAAWC,YAAZ,EAA0BxB,MAAM,~~CAACtC~~,IAAjC,CAAJ;EAJX,gBAMI,6BAAC,kBAAD;IAAW,UAAU,~~EAAEyD~~;EAAvB,~~GACKxB~~,UAAU,gBACP,6BAAC,YAAD;IACI,QAAQ,~~EAAEe~~,sBADd;IAEI,KAAK,EAAEV,MAAM,~~CAACd~~;EAFlB,GAIKS,UAJL,CADO,GAOP,IARR,eAUI,6BAAC,iBAAD;IACI,QAAQ,~~EAAEqB~~,YADd;IAEI,KAAK,EAAEI;EAFX,~~GAIK3B~~,QAJL,CAVJ,CANJ,CADJ;AA0BH;;AAAA"}
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","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/module/BottomSheet/BottomSheetNative.js CHANGED Viewed

@@ -3,7 +3,7 @@ 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';
@@ -19,7 +19,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,12 +69,15 @@ 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
-  };
+  }, styleProp]);
   const contentWrapperStyle = {
+    backgroundColor: theme.palette.surface.base,
+    borderTopLeftRadius: borderRadius,
+    borderTopRightRadius: borderRadius,
     flexShrink: 1,
     maxHeight: maxDynamicContentSize,
     minHeight: 325,

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

	@@ -1 +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","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","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 flexShrink: 1,\n maxHeight: maxDynamicContentSize,\n minHeight: 325,\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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"}
1	+ {"version":3,"names":["React","useCallback","useEffect","useRef","useState","Animated","useWindowDimensions","BottomSheetBackdrop","BottomSheetModal","BottomSheetModalProvider","BottomSheetView","Column","css","isNotAndroid12","useAnimatedValue","useTheme","TransparentBackdrop","NoHandle","BottomSheet","props","backdropOpacity","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","backgroundStyle","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","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';\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 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 styleProp,\n ]);\n\n const contentWrapperStyle: ViewStyle = {\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\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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"}

package/build/module/BottomSheet/BottomSheetWeb.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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: 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 } = 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":"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~~,~~IAUFT~~,~~KAVJ~~;~~EAYA~~,~~MAAMU~~,MAAM,~~GAAGxC~~,SAAS,EAAxB;EAEA,MAAM;~~IAAEyC~~,MAAM,EAAEC;EAAV,~~IAA2BnD~~,mBAAmB,EAApD;EAEA,MAAM,~~CAACoD~~,gBAAD,EAAmBC,mBAAnB,~~IAA0CtD~~,QAAQ,CAAC,CAAD,CAAxD;EAEA,~~MAAMuD~~,qBAAqB,GAAGC,IAAI,CAACC,KAAL,CAAWL,YAAY,~~GAAGL~~,wBAA1B,~~IAAsDM~~,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,~~IAAId~~,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAAC,CAAF,CAAR;IACH;EACJ,CAJD;;EAMA,MAAM;~~IACFe~~,mBADE;IAEFC,YAFE;IAGFC;EAHE,~~IAIFxD~~,oBAAoB,CAAC;IACrBmC,mBADqB;~~IAErBW~~,qBAFqB;~~IAGrBN~~;EAHqB,CAAD,CAJxB;EAUA,~~MAAMiB~~,UAAU,GAAGD,gBAAgB,IAAIF,mBAAmB,~~CAACjB~~,KAAD,CAAnB,IAA8B,CAAlC,CAAnC;EAEA,~~MAAMqB~~,aAAa,~~GAAG/D~~,GAAG,CAAC,~~CACtB8C~~,MAAM,~~CAAC9B~~,KADe,EAEtB,EACI,IAAIsB,YAAY,GAAG;MAAEjB,mBAAmB,EAAEiB,YAAvB;MAAqCb,oBAAoB,EAAEa;IAA3D,CAAH,GAA+E,EAA/F,CADJ;IAEI,~~IAAIuB~~,gBAAgB,KAAKV,qBAArB,GAA6C;MAAEJ,MAAM,EAAEc;IAAV,CAA7C,GAA4E,EAAhF,CAFJ;IAGIG,SAAS,EAAEb;EAHf,CAFsB,CAAD,CAAzB;~~EASA~~,oBACI,oBAAC,KAAD;IACI,eAAe,~~EAAEd~~,eADrB;IAEI,OAAO,~~EAAEqB~~,WAFb;IAGI,OAAO,~~EAAEhB~~,KAAK,IAAI,CAHtB;IAII,KAAK,EAAE1C,GAAG,CAAC,CAACE,UAAU,~~CAAC+D~~,YAAZ,EAA0BnB,MAAM,~~CAACtC~~,IAAjC,CAAD;EAJd,gBAMI,oBAAC,SAAD;IAAW,UAAU,~~EAAEsD~~;EAAvB,~~GACKrB~~,UAAU,gBACP,oBAAC,MAAD;IACI,QAAQ,~~EAAEa~~,sBADd;IAEI,KAAK,EAAER,MAAM,~~CAACd~~;EAFlB,GAIKS,UAJL,CADO,GAOP,IARR,eAUI,oBAAC,IAAD;IACI,QAAQ,~~EAAEmB~~,YADd;IAEI,KAAK,EAAEG;EAFX,~~GAIKxB~~,QAJL,CAVJ,CANJ,CADJ;AA0BH;AAAA"}
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","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":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "3.0.0-alpha.6",
+  "version": "3.0.0-alpha.8",
   "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.5",
+    "@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": "3261dc43532e6f39bbddce1a59eddd677d84dc3c"
+  "gitHead": "fde72b58979b933032829708992f15f1321ce408"
 }

package/src/BottomSheet/BottomSheetNative.tsx CHANGED Viewed

@@ -7,7 +7,7 @@ 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';
@@ -25,6 +25,7 @@ export default function BottomSheet(props: BottomSheetProps) {
         maxHeightNormalizedRatio = 0.8,
         onChange,
         snapPoints = [],
+        style: styleProp,
     } = props;
     const indexRef = useRef<number>(-1);
@@ -70,13 +71,19 @@ export default function BottomSheet(props: BottomSheetProps) {
     const theme = useTheme();
     const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;
-    const backgroundStyle = {
+    const backgroundStyle = css([
+        {
+            backgroundColor: theme.palette.surface.base,
+            borderTopLeftRadius: borderRadius,
+            borderTopRightRadius: borderRadius,
+        },
+        styleProp,
+    ]);
+    const contentWrapperStyle: ViewStyle = {
         backgroundColor: theme.palette.surface.base,
         borderTopLeftRadius: borderRadius,
         borderTopRightRadius: borderRadius,
-    };
-    const contentWrapperStyle: ViewStyle = {
         flexShrink: 1,
         maxHeight: maxDynamicContentSize,
         minHeight: 325,

package/src/BottomSheet/BottomSheetWeb.tsx CHANGED Viewed

@@ -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 (