@fountain-ui/core 2.0.0-beta.76 → 2.0.0-beta.78

package/build/commonjs/Dialog/Dialog.js

@@ -32,8 +32,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const DIALOG_MAX_WIDTH = 328;
-const fadeInDuration = 300;
-const fadeOutDuration = 100;
+const fadeDuration = 300;
 const fadeAnimationDelay = 50;
 
 const useStyles = function () {
@@ -93,8 +92,9 @@ function Dialog(props) {
     if (!fullScreen) {
       _reactNative.Animated.timing(animatedOpacity, {
         toValue: visible ? 1 : 0,
-        duration: visible ? fadeInDuration : fadeOutDuration,
+        duration: fadeDuration,
         delay: visible ? fadeAnimationDelay : 0,
+        easing: _reactNative.Easing.out(_reactNative.Easing.exp),
         useNativeDriver: _utils.isNotAndroid12
       }).start();
     }
@@ -108,6 +108,8 @@ function Dialog(props) {
   }, otherProps), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
     needsOffscreenAlphaCompositing: true,
     style: {
+      height: fullScreen ? '100%' : 'auto',
+      width: fullScreen ? '100%' : 'auto',
       opacity: animatedOpacity
     }
   }, topElement ? /*#__PURE__*/_react.default.createElement(_Column.default, {
@@ -115,7 +117,7 @@ function Dialog(props) {
   }, /*#__PURE__*/_react.default.createElement(_Column.default, {
     style: styles.topElementPosition
   }, topElement)) : null, /*#__PURE__*/_react.default.createElement(_Paper.default, {
-    elevation: 24,
+    elevation: 6,
     square: fullScreen,
     style: (0, _styles.css)([{
       borderRadius: fullScreen ? undefined : theme.shape.roundnessExtra

package/build/commonjs/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["DIALOG_MAX_WIDTH","fadeInDuration","fadeOutDuration","fadeAnimationDelay","useStyles","theme","useTheme","width","useWindowDimensions","margin","spacing","dialogWidth","root","alignItems","justifyContent","zIndex","dialog","paper","maxWidth","overflow","paperFullScreen","flexGrow","animation","animationFullScreen","height","topElementSize","marginHorizontal","topElementPosition","position","bottom","Dialog","props","children","fullScreen","onClose","style","visible","topElement","otherProps","styles","animatedOpacity","useAnimatedValue","useEffect","Animated","timing","toValue","duration","delay","useNativeDriver","isNotAndroid12","start","opacity","undefined","css","borderRadius","shape","roundnessExtra"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { useWindowDimensions, Animated } from 'react-native';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal from '../Modal';\nimport Paper from '../Paper';\nimport { useAnimatedValue } from '../hooks';\nimport { isNotAndroid12 } from '../utils';\nimport { useTheme } from '../styles';\nimport type DialogProps from './DialogProps';\n\ntype DialogStyleKeys =\n    | 'root'\n    | 'paper'\n    | 'paperFullScreen'\n    | 'animation'\n    | 'animationFullScreen'\n    | 'topElementSize'\n    | 'topElementPosition';\n\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nconst DIALOG_MAX_WIDTH = 328;\n\nconst fadeInDuration = 300;\nconst fadeOutDuration = 100;\nconst fadeAnimationDelay = 50;\n\nconst useStyles: UseStyles<DialogStyles> = function (): DialogStyles {\n    const theme = useTheme();\n\n    const { width } = useWindowDimensions();\n\n    const margin = theme.spacing(4);\n    const dialogWidth = width - margin * 2;\n\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n            zIndex: theme.zIndex.dialog,\n        },\n        paper: {\n            margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            overflow: 'hidden',\n            width: dialogWidth,\n        },\n        paperFullScreen: {\n            flexGrow: 1,\n        },\n        animation: {},\n        animationFullScreen: {\n            width: '100%',\n            height: '100%',\n        },\n        topElementSize: {\n            marginHorizontal: margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            width: dialogWidth,\n        },\n        topElementPosition: {\n            position: 'absolute',\n            bottom: -1 * theme.spacing(4),\n            width: '100%',\n        },\n    };\n};\n\nexport default function Dialog(props: DialogProps) {\n    const {\n        children,\n        fullScreen = false,\n        onClose,\n        style = {},\n        visible,\n        topElement,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n    const theme = useTheme();\n    const animatedOpacity = useAnimatedValue(fullScreen ? 1 : 0);\n\n    useEffect(() => {\n        if(!fullScreen){\n            Animated.timing(animatedOpacity, {\n                toValue: visible ? 1 : 0,\n                duration: visible ? fadeInDuration: fadeOutDuration,\n                delay: visible ? fadeAnimationDelay : 0,\n                useNativeDriver: isNotAndroid12,\n            }).start();\n        }\n    }, [fullScreen, visible]);\n\n    return (\n        <Modal\n            animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}\n            onClose={onClose}\n            exitDuration={fullScreen ? 150 : 300}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <Animated.View\n                needsOffscreenAlphaCompositing={true}\n                style={{ opacity: animatedOpacity }}\n            >\n                {topElement ? (\n                    <Column style={fullScreen ? undefined : styles.topElementSize}>\n                        <Column style={styles.topElementPosition}>\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <Paper\n                    elevation={24}\n                    square={fullScreen}\n                    style={css([\n                        { borderRadius: fullScreen ? undefined : theme.shape.roundnessExtra },\n                        fullScreen ? styles.paperFullScreen : styles.paper,\n                        style,\n                    ])}\n                >\n                    {children}\n                </Paper>\n            </Animated.View>\n        </Modal>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["DIALOG_MAX_WIDTH","fadeDuration","fadeAnimationDelay","useStyles","theme","useTheme","width","useWindowDimensions","margin","spacing","dialogWidth","root","alignItems","justifyContent","zIndex","dialog","paper","maxWidth","overflow","paperFullScreen","flexGrow","animation","animationFullScreen","height","topElementSize","marginHorizontal","topElementPosition","position","bottom","Dialog","props","children","fullScreen","onClose","style","visible","topElement","otherProps","styles","animatedOpacity","useAnimatedValue","useEffect","Animated","timing","toValue","duration","delay","easing","Easing","out","exp","useNativeDriver","isNotAndroid12","start","opacity","undefined","css","borderRadius","shape","roundnessExtra"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { useWindowDimensions, Animated, Easing } from 'react-native';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal from '../Modal';\nimport Paper from '../Paper';\nimport { useAnimatedValue } from '../hooks';\nimport { isNotAndroid12 } from '../utils';\nimport { useTheme } from '../styles';\nimport type DialogProps from './DialogProps';\n\ntype DialogStyleKeys =\n    | 'root'\n    | 'paper'\n    | 'paperFullScreen'\n    | 'animation'\n    | 'animationFullScreen'\n    | 'topElementSize'\n    | 'topElementPosition';\n\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nconst DIALOG_MAX_WIDTH = 328;\n\nconst fadeDuration = 300;\nconst fadeAnimationDelay = 50;\n\nconst useStyles: UseStyles<DialogStyles> = function (): DialogStyles {\n    const theme = useTheme();\n\n    const { width } = useWindowDimensions();\n\n    const margin = theme.spacing(4);\n    const dialogWidth = width - margin * 2;\n\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n            zIndex: theme.zIndex.dialog,\n        },\n        paper: {\n            margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            overflow: 'hidden',\n            width: dialogWidth,\n        },\n        paperFullScreen: {\n            flexGrow: 1,\n        },\n        animation: {},\n        animationFullScreen: {\n            width: '100%',\n            height: '100%',\n        },\n        topElementSize: {\n            marginHorizontal: margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            width: dialogWidth,\n        },\n        topElementPosition: {\n            position: 'absolute',\n            bottom: -1 * theme.spacing(4),\n            width: '100%',\n        },\n    };\n};\n\nexport default function Dialog(props: DialogProps) {\n    const {\n        children,\n        fullScreen = false,\n        onClose,\n        style = {},\n        visible,\n        topElement,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n    const theme = useTheme();\n    const animatedOpacity = useAnimatedValue(fullScreen ? 1 : 0);\n\n    useEffect(() => {\n        if(!fullScreen){\n            Animated.timing(animatedOpacity, {\n                toValue: visible ? 1 : 0,\n                duration: fadeDuration,\n                delay: visible ? fadeAnimationDelay : 0,\n                easing: Easing.out(Easing.exp),\n                useNativeDriver: isNotAndroid12,\n            }).start();\n        }\n    }, [fullScreen, visible]);\n\n    return (\n        <Modal\n            animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}\n            onClose={onClose}\n            exitDuration={fullScreen ? 150 : 300}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <Animated.View\n                needsOffscreenAlphaCompositing={true}\n                style={{\n                    height: fullScreen ? '100%' : 'auto',\n                    width:  fullScreen ? '100%' : 'auto',\n                    opacity: animatedOpacity,\n                }}\n            >\n                {topElement ? (\n                    <Column style={fullScreen ? undefined : styles.topElementSize}>\n                        <Column style={styles.topElementPosition}>\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <Paper\n                    elevation={6}\n                    square={fullScreen}\n                    style={css([\n                        { borderRadius: fullScreen ? undefined : theme.shape.roundnessExtra },\n                        fullScreen ? styles.paperFullScreen : styles.paper,\n                        style,\n                    ])}\n                >\n                    {children}\n                </Paper>\n            </Animated.View>\n        </Modal>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAcA,MAAMA,gBAAgB,GAAG,GAAzB;AAEA,MAAMC,YAAY,GAAG,GAArB;AACA,MAAMC,kBAAkB,GAAG,EAA3B;;AAEA,MAAMC,SAAkC,GAAG,YAA0B;EACjE,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;EAEA,MAAM;IAAEC;EAAF,IAAY,IAAAC,gCAAA,GAAlB;EAEA,MAAMC,MAAM,GAAGJ,KAAK,CAACK,OAAN,CAAc,CAAd,CAAf;EACA,MAAMC,WAAW,GAAGJ,KAAK,GAAGE,MAAM,GAAG,CAArC;EAEA,OAAO;IACHG,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE,QAFd;MAGFC,MAAM,EAAEV,KAAK,CAACU,MAAN,CAAaC;IAHnB,CADH;IAMHC,KAAK,EAAE;MACHR,MADG;MAEHS,QAAQ,EAAEjB,gBAFP;MAGHkB,QAAQ,EAAE,QAHP;MAIHZ,KAAK,EAAEI;IAJJ,CANJ;IAYHS,eAAe,EAAE;MACbC,QAAQ,EAAE;IADG,CAZd;IAeHC,SAAS,EAAE,EAfR;IAgBHC,mBAAmB,EAAE;MACjBhB,KAAK,EAAE,MADU;MAEjBiB,MAAM,EAAE;IAFS,CAhBlB;IAoBHC,cAAc,EAAE;MACZC,gBAAgB,EAAEjB,MADN;MAEZS,QAAQ,EAAEjB,gBAFE;MAGZM,KAAK,EAAEI;IAHK,CApBb;IAyBHgB,kBAAkB,EAAE;MAChBC,QAAQ,EAAE,UADM;MAEhBC,MAAM,EAAE,CAAC,CAAD,GAAKxB,KAAK,CAACK,OAAN,CAAc,CAAd,CAFG;MAGhBH,KAAK,EAAE;IAHS;EAzBjB,CAAP;AA+BH,CAvCD;;AAyCe,SAASuB,MAAT,CAAgBC,KAAhB,EAAoC;EAC/C,MAAM;IACFC,QADE;IAEFC,UAAU,GAAG,KAFX;IAGFC,OAHE;IAIFC,KAAK,GAAG,EAJN;IAKFC,OALE;IAMFC,UANE;IAOF,GAAGC;EAPD,IAQFP,KARJ;EAUA,MAAMQ,MAAM,GAAGnC,SAAS,EAAxB;EACA,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;EACA,MAAMkC,eAAe,GAAG,IAAAC,uBAAA,EAAiBR,UAAU,GAAG,CAAH,GAAO,CAAlC,CAAxB;EAEA,IAAAS,gBAAA,EAAU,MAAM;IACZ,IAAG,CAACT,UAAJ,EAAe;MACXU,qBAAA,CAASC,MAAT,CAAgBJ,eAAhB,EAAiC;QAC7BK,OAAO,EAAET,OAAO,GAAG,CAAH,GAAO,CADM;QAE7BU,QAAQ,EAAE5C,YAFmB;QAG7B6C,KAAK,EAAEX,OAAO,GAAGjC,kBAAH,GAAwB,CAHT;QAI7B6C,MAAM,EAAEC,mBAAA,CAAOC,GAAP,CAAWD,mBAAA,CAAOE,GAAlB,CAJqB;QAK7BC,eAAe,EAAEC;MALY,CAAjC,EAMGC,KANH;IAOH;EACJ,CAVD,EAUG,CAACrB,UAAD,EAAaG,OAAb,CAVH;EAYA,oBACI,6BAAC,cAAD;IACI,cAAc,EAAEH,UAAU,GAAGM,MAAM,CAAChB,mBAAV,GAAgCgB,MAAM,CAACjB,SADrE;IAEI,OAAO,EAAEY,OAFb;IAGI,YAAY,EAAED,UAAU,GAAG,GAAH,GAAS,GAHrC;IAII,OAAO,EAAEG,OAJb;IAKI,KAAK,EAAEG,MAAM,CAAC3B;EALlB,GAMQ0B,UANR,gBAQI,6BAAC,qBAAD,CAAU,IAAV;IACI,8BAA8B,EAAE,IADpC;IAEI,KAAK,EAAE;MACHd,MAAM,EAAES,UAAU,GAAG,MAAH,GAAY,MAD3B;MAEH1B,KAAK,EAAG0B,UAAU,GAAG,MAAH,GAAY,MAF3B;MAGHsB,OAAO,EAAEf;IAHN;EAFX,GAQKH,UAAU,gBACP,6BAAC,eAAD;IAAQ,KAAK,EAAEJ,UAAU,GAAGuB,SAAH,GAAejB,MAAM,CAACd;EAA/C,gBACI,6BAAC,eAAD;IAAQ,KAAK,EAAEc,MAAM,CAACZ;EAAtB,GACKU,UADL,CADJ,CADO,GAMP,IAdR,eAgBI,6BAAC,cAAD;IACI,SAAS,EAAE,CADf;IAEI,MAAM,EAAEJ,UAFZ;IAGI,KAAK,EAAE,IAAAwB,WAAA,EAAI,CACP;MAAEC,YAAY,EAAEzB,UAAU,GAAGuB,SAAH,GAAenD,KAAK,CAACsD,KAAN,CAAYC;IAArD,CADO,EAEP3B,UAAU,GAAGM,MAAM,CAACnB,eAAV,GAA4BmB,MAAM,CAACtB,KAFtC,EAGPkB,KAHO,CAAJ;EAHX,GASKH,QATL,CAhBJ,CARJ,CADJ;AAuCH;;AAAA"}

package/build/commonjs/Snackbar/Snackbar.js

@@ -29,8 +29,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const fadeInDuration = 300;
-const fadeOutDuration = 110;
+const fadeDuration = 300;
 const fadeAnimationDelay = 100;
 
 const useStyles = function () {
@@ -104,8 +103,9 @@ function Snackbar(props) {
   (0, _react.useEffect)(() => {
     _reactNative.Animated.timing(animatedOpacity, {
       toValue: visible ? 1 : 0,
-      duration: visible ? fadeInDuration : fadeOutDuration,
+      duration: fadeDuration,
       delay: visible ? fadeAnimationDelay : 0,
+      easing: _reactNative.Easing.out(_reactNative.Easing.exp),
       useNativeDriver: _utils.isNotAndroid12
     }).start();
   }, [visible]);

package/build/commonjs/Snackbar/Snackbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["fadeInDuration","fadeOutDuration","fadeAnimationDelay","useStyles","theme","useTheme","insets","useSafeAreaInsets","root","alignSelf","bottom","spacing","maxWidth","paddingBottom","paddingHorizontal","position","width","zIndex","Snackbar","props","actionLabel","animatedY","autoHideDuration","children","message","title","startIcon","onActionPress","onClose","style","visible","otherProps","autoHideTimer","React","useRef","clearAutoHideTimeout","current","clearTimeout","useEffect","setTimeout","styles","exited","setExited","useState","animatedOpacity","useAnimatedValue","animatedStyle","opacity","Animated","timing","toValue","duration","delay","useNativeDriver","isNotAndroid12","start"],"sources":["Snackbar.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Animated } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Slide from '../Slide';\nimport SnackbarContent from '../SnackbarContent';\nimport { useAnimatedValue } from '../hooks';\nimport { useTheme } from '../styles';\nimport { isNotAndroid12 } from '../utils';\nimport type SnackbarProps from './SnackbarProps';\n\ntype SnackBarStyles = NamedStylesStringUnion<'root'>;\n\nconst fadeInDuration = 300;\nconst fadeOutDuration = 110;\nconst fadeAnimationDelay = 100;\n\nconst useStyles: UseStyles<SnackBarStyles> = function (): SnackBarStyles {\n    const theme = useTheme();\n    const insets = useSafeAreaInsets();\n\n    return {\n        root: {\n            alignSelf: 'center',\n            bottom: theme.spacing(2),\n            maxWidth: 480,\n            paddingBottom: insets.bottom,\n            paddingHorizontal: theme.spacing(2),\n            position: 'absolute',\n            width: '100%',\n            // TODO: Need to remove zIndex.\n            zIndex: 32,\n        },\n    };\n};\n\nexport default function Snackbar(props: SnackbarProps) {\n    const {\n        actionLabel,\n        animatedY,\n        autoHideDuration = null,\n        children,\n        message,\n        title,\n        startIcon,\n        onActionPress,\n        onClose,\n        style,\n        visible = false,\n        ...otherProps\n    } = props;\n\n    const autoHideTimer = React.useRef<number | null>(null);\n\n    const clearAutoHideTimeout = () => {\n        if (autoHideTimer.current !== null) {\n            clearTimeout(autoHideTimer.current);\n        }\n    };\n\n    React.useEffect(() => {\n        return () => {\n            clearAutoHideTimeout();\n        };\n    }, []);\n\n    React.useEffect(() => {\n        if (visible && autoHideDuration !== null) {\n            clearAutoHideTimeout();\n\n            // @ts-ignore\n            autoHideTimer.current = setTimeout(() => {\n                if (onClose) {\n                    onClose();\n                }\n            }, autoHideDuration);\n        }\n    }, [visible, autoHideDuration, onClose]);\n\n    const styles = useStyles();\n\n    const [exited, setExited] = React.useState(true);\n\n    const animatedOpacity = useAnimatedValue(0);\n\n    const animatedStyle = {\n        opacity: animatedOpacity,\n    };\n\n    useEffect(() => {\n        Animated.timing(animatedOpacity, {\n            toValue: visible ? 1 : 0,\n            duration: visible ? fadeInDuration : fadeOutDuration,\n            delay: visible ? fadeAnimationDelay : 0,\n            useNativeDriver: isNotAndroid12,\n        }).start();\n    }, [visible]);\n\n    if (!visible && exited) {\n        return null;\n    }\n\n    return (\n        <Animated.View\n            style={[\n                animatedStyle,\n                styles.root,\n                style,\n            ]}\n            {...otherProps}\n        >\n            <Slide\n                animatedY={animatedY}\n                appear={visible}\n                onEnter={() => setExited(false)}\n                onExited={() => setExited(true)}\n            >\n                {children ? children : (\n                    <SnackbarContent\n                        title={title}\n                        startIcon={startIcon}\n                        actionLabel={actionLabel}\n                        message={message}\n                        onActionPress={onActionPress}\n                    />\n                )}\n            </Slide>\n        </Animated.View>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["fadeDuration","fadeAnimationDelay","useStyles","theme","useTheme","insets","useSafeAreaInsets","root","alignSelf","bottom","spacing","maxWidth","paddingBottom","paddingHorizontal","position","width","zIndex","Snackbar","props","actionLabel","animatedY","autoHideDuration","children","message","title","startIcon","onActionPress","onClose","style","visible","otherProps","autoHideTimer","React","useRef","clearAutoHideTimeout","current","clearTimeout","useEffect","setTimeout","styles","exited","setExited","useState","animatedOpacity","useAnimatedValue","animatedStyle","opacity","Animated","timing","toValue","duration","delay","easing","Easing","out","exp","useNativeDriver","isNotAndroid12","start"],"sources":["Snackbar.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Animated, Easing } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Slide from '../Slide';\nimport SnackbarContent from '../SnackbarContent';\nimport { useAnimatedValue } from '../hooks';\nimport { useTheme } from '../styles';\nimport { isNotAndroid12 } from '../utils';\nimport type SnackbarProps from './SnackbarProps';\n\ntype SnackBarStyles = NamedStylesStringUnion<'root'>;\n\nconst fadeDuration = 300;\nconst fadeAnimationDelay = 100;\n\nconst useStyles: UseStyles<SnackBarStyles> = function (): SnackBarStyles {\n    const theme = useTheme();\n    const insets = useSafeAreaInsets();\n\n    return {\n        root: {\n            alignSelf: 'center',\n            bottom: theme.spacing(2),\n            maxWidth: 480,\n            paddingBottom: insets.bottom,\n            paddingHorizontal: theme.spacing(2),\n            position: 'absolute',\n            width: '100%',\n            // TODO: Need to remove zIndex.\n            zIndex: 32,\n        },\n    };\n};\n\nexport default function Snackbar(props: SnackbarProps) {\n    const {\n        actionLabel,\n        animatedY,\n        autoHideDuration = null,\n        children,\n        message,\n        title,\n        startIcon,\n        onActionPress,\n        onClose,\n        style,\n        visible = false,\n        ...otherProps\n    } = props;\n\n    const autoHideTimer = React.useRef<number | null>(null);\n\n    const clearAutoHideTimeout = () => {\n        if (autoHideTimer.current !== null) {\n            clearTimeout(autoHideTimer.current);\n        }\n    };\n\n    React.useEffect(() => {\n        return () => {\n            clearAutoHideTimeout();\n        };\n    }, []);\n\n    React.useEffect(() => {\n        if (visible && autoHideDuration !== null) {\n            clearAutoHideTimeout();\n\n            // @ts-ignore\n            autoHideTimer.current = setTimeout(() => {\n                if (onClose) {\n                    onClose();\n                }\n            }, autoHideDuration);\n        }\n    }, [visible, autoHideDuration, onClose]);\n\n    const styles = useStyles();\n\n    const [exited, setExited] = React.useState(true);\n\n    const animatedOpacity = useAnimatedValue(0);\n\n    const animatedStyle = {\n        opacity: animatedOpacity,\n    };\n\n    useEffect(() => {\n        Animated.timing(animatedOpacity, {\n            toValue: visible ? 1 : 0,\n            duration: fadeDuration,\n            delay: visible ? fadeAnimationDelay : 0,\n            easing: Easing.out(Easing.exp),\n            useNativeDriver: isNotAndroid12,\n        }).start();\n    }, [visible]);\n\n    if (!visible && exited) {\n        return null;\n    }\n\n    return (\n        <Animated.View\n            style={[\n                animatedStyle,\n                styles.root,\n                style,\n            ]}\n            {...otherProps}\n        >\n            <Slide\n                animatedY={animatedY}\n                appear={visible}\n                onEnter={() => setExited(false)}\n                onExited={() => setExited(true)}\n            >\n                {children ? children : (\n                    <SnackbarContent\n                        title={title}\n                        startIcon={startIcon}\n                        actionLabel={actionLabel}\n                        message={message}\n                        onActionPress={onActionPress}\n                    />\n                )}\n            </Slide>\n        </Animated.View>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/Tabs/Tabs.js

@@ -21,6 +21,8 @@ var _IndexAwareTab = _interopRequireDefault(require("./IndexAwareTab"));
 
 var _useTabCoordinates = _interopRequireDefault(require("./useTabCoordinates"));
 
+var _useTabInnerContentsWidth = _interopRequireDefault(require("./useTabInnerContentsWidth"));
+
 var _useIndexStore = _interopRequireDefault(require("./useIndexStore"));
 
 var _InternalContext = _interopRequireDefault(require("./InternalContext"));
@@ -85,28 +87,28 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
   }), [sharedIndex]);
   const styles = useStyles();
   const [outerCoordinates, updateCoordinate] = (0, _useTabCoordinates.default)(children);
-  const [innerCoordinates, updateInnerCoordinate] = (0, _useTabCoordinates.default)(children);
-  const canRenderIndicator = indicatorSize === 'fit-content' ? (0, _utils.isEveryTabCoordinatesDefined)(innerCoordinates, children) : (0, _utils.isEveryTabCoordinatesDefined)(outerCoordinates, children);
+  const [innerContentsWidthList, updateInnerContentsWidth] = (0, _useTabInnerContentsWidth.default)(children);
+  const canRenderIndicator = indicatorSize === 'fit-content' ? (0, _utils.isEveryTabCoordinatesDefined)(innerContentsWidthList, children) : (0, _utils.isEveryTabCoordinatesDefined)(outerCoordinates, children);
   const indexStore = (0, _useIndexStore.default)(sharedIndex);
   const coordinates = (0, _react.useMemo)(() => {
     if (indicatorSize !== 'fit-content') {
       return outerCoordinates;
     }
 
-    return innerCoordinates.map((coordinate, idx) => {
-      const {
-        x1,
-        x2
-      } = coordinate;
+    return innerContentsWidthList.map((innerContentWidth, idx) => {
       const {
-        x1: outerX1
+        x1: outerX1,
+        x2: outerX2
       } = outerCoordinates[idx];
+      const tabWidth = outerX2 - outerX1;
+      const distanceFromParent = (tabWidth - innerContentWidth) / 2;
+      const indicatorStartCoordinate = outerX1 + distanceFromParent;
       return {
-        x1: x1 + outerX1,
-        x2: x2 + outerX1
+        x1: indicatorStartCoordinate,
+        x2: indicatorStartCoordinate + innerContentWidth
       };
     });
-  }, [outerCoordinates, innerCoordinates, variant]);
+  }, [outerCoordinates, innerContentsWidthList, variant]);
   (0, _react.useEffect)(() => {
     return indexStore.subscribe(newIndex => {
       onChange === null || onChange === void 0 ? void 0 : onChange(newIndex);
@@ -120,10 +122,9 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
 
     const onTabInnerLayout = event => {
       const {
-        x,
         width
       } = event.nativeEvent.layout;
-      updateInnerCoordinate(index, x, width);
+      updateInnerContentsWidth(index, width);
     };
 
     const onLayout = event => {

package/build/commonjs/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","Tabs","forwardRef","props","ref","children","indicatorColor","initialIndex","disableIndicator","indicatorSize","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","style","variant","UNSTABLE_sharedIndex","onTabSelected","fallbackSharedIndex","useSyncAnimatedValue","initialValue","sharedIndex","realInitialIndex","currentIndexRef","useRef","setTab","newIndex","currentIndex","current","animatedValue","setValue","useImperativeHandle","styles","outerCoordinates","updateCoordinate","useTabCoordinates","innerCoordinates","updateInnerCoordinate","canRenderIndicator","isEveryTabCoordinatesDefined","indexStore","useIndexStore","coordinates","useMemo","map","coordinate","idx","x1","x2","outerX1","useEffect","subscribe","tabElements","React","Children","child","index","onTabInnerLayout","event","x","width","nativeEvent","layout","onLayout","onMouseDown","e","preventDefault","onPress","tabElement","cloneElement","enableIndicator","undefined","filter","Boolean","tabIndicator","css"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport { useSyncAnimatedValue } from '../hooks';\nimport type TabsProps from './TabsProps';\nimport type { TabsInstance } from './types';\nimport TabIndicator from './TabIndicator';\nimport ScrollableTabsView from './ScrollableTabsView';\nimport IndexAwareTab from './IndexAwareTab';\nimport useTabCoordinates from './useTabCoordinates';\nimport useIndexStore from './useIndexStore';\nimport InternalContext from './InternalContext';\nimport { isEveryTabCoordinatesDefined } from './utils';\n\ntype TabsStyleKeys =\n    | 'root'\n    | 'fixedRoot'\n    | 'fixedTab'\n    | 'scrollableContainer';\n\ntype TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;\n\nconst useStyles: UseStyles<TabsStyles> = function (): TabsStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        fixedRoot: {\n            flexDirection: 'row',\n        },\n        fixedTab: {\n            flex: 1,\n        },\n        scrollableContainer: {\n            paddingHorizontal: theme.spacing(1),\n        },\n    };\n};\n\nconst Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {\n    const {\n        children,\n        indicatorColor = 'primary',\n        initialIndex = 0,\n        disableIndicator = false,\n        indicatorSize = 'full',\n        keyboardDismissMode = 'none',\n        keyboardShouldPersistTaps = 'never',\n        onChange,\n        scrollable = false,\n        style,\n        variant = 'primary',\n        UNSTABLE_sharedIndex,\n        onTabSelected,\n    } = props;\n\n    const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });\n    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;\n    const realInitialIndex = sharedIndex.initialValue;\n\n    const currentIndexRef = useRef(initialIndex);\n\n    const setTab = (newIndex: number) => {\n        const currentIndex = currentIndexRef.current;\n        onTabSelected?.(newIndex, currentIndex);\n\n        sharedIndex.animatedValue.setValue(newIndex);\n    };\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            setTab,\n        }),\n        [sharedIndex],\n    );\n\n    const styles = useStyles();\n\n    const [outerCoordinates, updateCoordinate] = useTabCoordinates(children);\n    const [innerCoordinates, updateInnerCoordinate] = useTabCoordinates(children);\n\n    const canRenderIndicator = indicatorSize === 'fit-content'\n        ? isEveryTabCoordinatesDefined(innerCoordinates, children)\n        : isEveryTabCoordinatesDefined(outerCoordinates, children);\n\n    const indexStore = useIndexStore(sharedIndex);\n\n    const coordinates = useMemo(() => {\n        if (indicatorSize !== 'fit-content') {\n            return outerCoordinates;\n        }\n\n        return innerCoordinates.map((coordinate, idx) => {\n            const { x1, x2 } = coordinate;\n            const { x1: outerX1 } = outerCoordinates[idx];\n            return {\n                x1: x1 + outerX1,\n                x2: x2 + outerX1,\n            }\n        });\n    }, [outerCoordinates, innerCoordinates, variant]);\n\n    useEffect(() => {\n        return indexStore.subscribe(newIndex => {\n            onChange?.(newIndex);\n            currentIndexRef.current = newIndex;\n        });\n    }, [indexStore, onChange]);\n\n    const tabElements = React.Children.map(children, (child, index) => {\n        if (!child) {\n            return null;\n        }\n\n        const onTabInnerLayout = (event: LayoutChangeEvent) => {\n            const { x, width } = event.nativeEvent.layout;\n\n            updateInnerCoordinate(index, x, width);\n        };\n\n        const onLayout = (event: LayoutChangeEvent) => {\n            const { x, width } = event.nativeEvent.layout;\n\n            updateCoordinate(index, x, width);\n\n            // @ts-ignore\n            child.props.onLayout?.(event);\n        };\n\n        const onMouseDown = (e: GestureResponderEvent) => {\n            if (keyboardShouldPersistTaps === 'always') {\n                e.preventDefault();\n            }\n        };\n\n        const onPress = () => {\n            setTab(index);\n\n            // @ts-ignore\n            child.props.onPress?.();\n        };\n\n        // @ts-ignore\n        const tabElement = cloneElement(child, {\n            enableIndicator: !disableIndicator && !canRenderIndicator,\n            indicatorColor,\n            onTabInnerLayout,\n            onLayout,\n            onPress,\n            onMouseDown,\n            variant,\n            indicatorSize,\n            style: scrollable ? undefined : styles.fixedTab,\n        });\n\n        return (\n            <IndexAwareTab\n                children={tabElement}\n                index={index}\n                initialIndex={realInitialIndex}\n            />\n        );\n    })?.filter(Boolean);\n\n    const tabIndicator = canRenderIndicator ? (\n        <TabIndicator\n            color={indicatorColor}\n            coordinates={coordinates}\n            disabled={disableIndicator}\n            initialIndex={realInitialIndex}\n            scrollable={scrollable}\n        />\n    ) : null;\n\n    return (\n        <InternalContext.Provider value={{ indexStore }}>\n            <View\n                style={css([\n                    styles.root,\n                    scrollable ? undefined : styles.fixedRoot,\n                    style,\n                ])}\n            >\n                {scrollable ? (\n                    <ScrollableTabsView\n                        automaticallyAdjustContentInsets={false}\n                        bounces={false}\n                        contentContainerStyle={styles.scrollableContainer}\n                        coordinates={coordinates}\n                        directionalLockEnabled={true}\n                        horizontal={true}\n                        initialIndex={realInitialIndex}\n                        scrollsToTop={false}\n                        showsHorizontalScrollIndicator={false}\n                        showsVerticalScrollIndicator={false}\n                        keyboardDismissMode={keyboardDismissMode}\n                        keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n                    >\n                        {tabElements}\n                        {tabIndicator}\n                    </ScrollableTabsView>\n                ) : (\n                    <React.Fragment>\n                        {tabElements}\n                        {tabIndicator}\n                    </React.Fragment>\n                )}\n            </View>\n        </InternalContext.Provider>\n    );\n});\n\nexport default Tabs;\n"],"mappings":"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"}
+{"version":3,"names":["useStyles","theme","useTheme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","Tabs","forwardRef","props","ref","children","indicatorColor","initialIndex","disableIndicator","indicatorSize","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","style","variant","UNSTABLE_sharedIndex","onTabSelected","fallbackSharedIndex","useSyncAnimatedValue","initialValue","sharedIndex","realInitialIndex","currentIndexRef","useRef","setTab","newIndex","currentIndex","current","animatedValue","setValue","useImperativeHandle","styles","outerCoordinates","updateCoordinate","useTabCoordinates","innerContentsWidthList","updateInnerContentsWidth","useTabInnerContentsWidth","canRenderIndicator","isEveryTabCoordinatesDefined","indexStore","useIndexStore","coordinates","useMemo","map","innerContentWidth","idx","x1","outerX1","x2","outerX2","tabWidth","distanceFromParent","indicatorStartCoordinate","useEffect","subscribe","tabElements","React","Children","child","index","onTabInnerLayout","event","width","nativeEvent","layout","onLayout","x","onMouseDown","e","preventDefault","onPress","tabElement","cloneElement","enableIndicator","undefined","filter","Boolean","tabIndicator","css"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport { useSyncAnimatedValue } from '../hooks';\nimport type TabsProps from './TabsProps';\nimport type { TabsInstance } from './types';\nimport TabIndicator from './TabIndicator';\nimport ScrollableTabsView from './ScrollableTabsView';\nimport IndexAwareTab from './IndexAwareTab';\nimport useTabCoordinates from './useTabCoordinates';\nimport useTabInnerContentsWidth from './useTabInnerContentsWidth';\nimport useIndexStore from './useIndexStore';\nimport InternalContext from './InternalContext';\nimport { isEveryTabCoordinatesDefined } from './utils';\n\ntype TabsStyleKeys =\n    | 'root'\n    | 'fixedRoot'\n    | 'fixedTab'\n    | 'scrollableContainer';\n\ntype TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;\n\nconst useStyles: UseStyles<TabsStyles> = function (): TabsStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        fixedRoot: {\n            flexDirection: 'row',\n        },\n        fixedTab: {\n            flex: 1,\n        },\n        scrollableContainer: {\n            paddingHorizontal: theme.spacing(1),\n        },\n    };\n};\n\nconst Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {\n    const {\n        children,\n        indicatorColor = 'primary',\n        initialIndex = 0,\n        disableIndicator = false,\n        indicatorSize = 'full',\n        keyboardDismissMode = 'none',\n        keyboardShouldPersistTaps = 'never',\n        onChange,\n        scrollable = false,\n        style,\n        variant = 'primary',\n        UNSTABLE_sharedIndex,\n        onTabSelected,\n    } = props;\n\n    const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });\n    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;\n    const realInitialIndex = sharedIndex.initialValue;\n\n    const currentIndexRef = useRef(initialIndex);\n\n    const setTab = (newIndex: number) => {\n        const currentIndex = currentIndexRef.current;\n        onTabSelected?.(newIndex, currentIndex);\n\n        sharedIndex.animatedValue.setValue(newIndex);\n    };\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            setTab,\n        }),\n        [sharedIndex],\n    );\n\n    const styles = useStyles();\n\n    const [outerCoordinates, updateCoordinate] = useTabCoordinates(children);\n    const [innerContentsWidthList, updateInnerContentsWidth] = useTabInnerContentsWidth(children);\n\n    const canRenderIndicator = indicatorSize === 'fit-content'\n        ? isEveryTabCoordinatesDefined(innerContentsWidthList, children)\n        : isEveryTabCoordinatesDefined(outerCoordinates, children);\n\n    const indexStore = useIndexStore(sharedIndex);\n\n    const coordinates = useMemo(() => {\n        if (indicatorSize !== 'fit-content') {\n            return outerCoordinates;\n        }\n\n        return innerContentsWidthList.map((innerContentWidth, idx) => {\n            const { x1: outerX1, x2: outerX2 } = outerCoordinates[idx];\n\n            const tabWidth = outerX2 - outerX1;\n            const distanceFromParent = (tabWidth - innerContentWidth) / 2;\n            const indicatorStartCoordinate = outerX1 + distanceFromParent;\n\n            return {\n                x1: indicatorStartCoordinate,\n                x2: indicatorStartCoordinate + innerContentWidth,\n            };\n        });\n    }, [outerCoordinates, innerContentsWidthList, variant]);\n\n    useEffect(() => {\n        return indexStore.subscribe(newIndex => {\n            onChange?.(newIndex);\n            currentIndexRef.current = newIndex;\n        });\n    }, [indexStore, onChange]);\n\n    const tabElements = React.Children.map(children, (child, index) => {\n        if (!child) {\n            return null;\n        }\n\n        const onTabInnerLayout = (event: LayoutChangeEvent) => {\n            const { width } = event.nativeEvent.layout;\n\n            updateInnerContentsWidth(index, width);\n        };\n\n        const onLayout = (event: LayoutChangeEvent) => {\n            const { x, width } = event.nativeEvent.layout;\n\n            updateCoordinate(index, x, width);\n\n            // @ts-ignore\n            child.props.onLayout?.(event);\n        };\n\n        const onMouseDown = (e: GestureResponderEvent) => {\n            if (keyboardShouldPersistTaps === 'always') {\n                e.preventDefault();\n            }\n        };\n\n        const onPress = () => {\n            setTab(index);\n\n            // @ts-ignore\n            child.props.onPress?.();\n        };\n\n        // @ts-ignore\n        const tabElement = cloneElement(child, {\n            enableIndicator: !disableIndicator && !canRenderIndicator,\n            indicatorColor,\n            onTabInnerLayout,\n            onLayout,\n            onPress,\n            onMouseDown,\n            variant,\n            indicatorSize,\n            style: scrollable ? undefined : styles.fixedTab,\n        });\n\n        return (\n            <IndexAwareTab\n                children={tabElement}\n                index={index}\n                initialIndex={realInitialIndex}\n            />\n        );\n    })?.filter(Boolean);\n\n    const tabIndicator = canRenderIndicator ? (\n        <TabIndicator\n            color={indicatorColor}\n            coordinates={coordinates}\n            disabled={disableIndicator}\n            initialIndex={realInitialIndex}\n            scrollable={scrollable}\n        />\n    ) : null;\n\n    return (\n        <InternalContext.Provider value={{ indexStore }}>\n            <View\n                style={css([\n                    styles.root,\n                    scrollable ? undefined : styles.fixedRoot,\n                    style,\n                ])}\n            >\n                {scrollable ? (\n                    <ScrollableTabsView\n                        automaticallyAdjustContentInsets={false}\n                        bounces={false}\n                        contentContainerStyle={styles.scrollableContainer}\n                        coordinates={coordinates}\n                        directionalLockEnabled={true}\n                        horizontal={true}\n                        initialIndex={realInitialIndex}\n                        scrollsToTop={false}\n                        showsHorizontalScrollIndicator={false}\n                        showsVerticalScrollIndicator={false}\n                        keyboardDismissMode={keyboardDismissMode}\n                        keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n                    >\n                        {tabElements}\n                        {tabIndicator}\n                    </ScrollableTabsView>\n                ) : (\n                    <React.Fragment>\n                        {tabElements}\n                        {tabIndicator}\n                    </React.Fragment>\n                )}\n            </View>\n        </InternalContext.Provider>\n    );\n});\n\nexport default Tabs;\n"],"mappings":"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"}

package/build/commonjs/Tabs/useTabInnerContentsWidth.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _utils = require("./utils");
+
+const useTabInnerContentsWidth = tabElements => {
+  const [innerContentsWidthList, setInnerContentsWidth] = (0, _react.useState)([]);
+  const cacheRef = (0, _react.useRef)([]);
+
+  const updateInnerContentsWidth = (index, width) => {
+    cacheRef.current[index] = width;
+
+    if ((0, _utils.isEveryTabCoordinatesDefined)(cacheRef.current, tabElements)) {
+      setInnerContentsWidth([...cacheRef.current]);
+      cacheRef.current = [];
+    }
+  };
+
+  return [innerContentsWidthList, updateInnerContentsWidth];
+};
+
+var _default = useTabInnerContentsWidth;
+exports.default = _default;
+//# sourceMappingURL=useTabInnerContentsWidth.js.map

package/build/commonjs/Tabs/useTabInnerContentsWidth.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useTabInnerContentsWidth","tabElements","innerContentsWidthList","setInnerContentsWidth","useState","cacheRef","useRef","updateInnerContentsWidth","index","width","current","isEveryTabCoordinatesDefined"],"sources":["useTabInnerContentsWidth.ts"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport { isEveryTabCoordinatesDefined } from './utils';\n\nexport interface UpdateInnerContentsWidth {\n    (index: number, width: number): void;\n}\n\nconst useTabInnerContentsWidth = (tabElements: React.ReactNode): [number[], UpdateInnerContentsWidth] => {\n    const [innerContentsWidthList, setInnerContentsWidth] = useState<number[]>([]);\n\n    const cacheRef = useRef<number[]>([]);\n\n    const updateInnerContentsWidth: UpdateInnerContentsWidth = (index, width) => {\n        cacheRef.current[index] = width;\n\n        if (isEveryTabCoordinatesDefined(cacheRef.current, tabElements)) {\n            setInnerContentsWidth([...cacheRef.current]);\n\n            cacheRef.current = [];\n        }\n    };\n\n    return [innerContentsWidthList, updateInnerContentsWidth];\n};\n\nexport default useTabInnerContentsWidth;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAMA,MAAMA,wBAAwB,GAAIC,WAAD,IAAwE;EACrG,MAAM,CAACC,sBAAD,EAAyBC,qBAAzB,IAAkD,IAAAC,eAAA,EAAmB,EAAnB,CAAxD;EAEA,MAAMC,QAAQ,GAAG,IAAAC,aAAA,EAAiB,EAAjB,CAAjB;;EAEA,MAAMC,wBAAkD,GAAG,CAACC,KAAD,EAAQC,KAAR,KAAkB;IACzEJ,QAAQ,CAACK,OAAT,CAAiBF,KAAjB,IAA0BC,KAA1B;;IAEA,IAAI,IAAAE,mCAAA,EAA6BN,QAAQ,CAACK,OAAtC,EAA+CT,WAA/C,CAAJ,EAAiE;MAC7DE,qBAAqB,CAAC,CAAC,GAAGE,QAAQ,CAACK,OAAb,CAAD,CAArB;MAEAL,QAAQ,CAACK,OAAT,GAAmB,EAAnB;IACH;EACJ,CARD;;EAUA,OAAO,CAACR,sBAAD,EAAyBK,wBAAzB,CAAP;AACH,CAhBD;;eAkBeP,wB"}

package/build/commonjs/Tabs/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["isEveryTabCoordinatesDefined","coordinates","tabElements","numberOfTabs","Children","count","numberOfCoordinates","length","everyCoordinatesDefined","isEveryDefined"],"sources":["utils.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Children } from 'react';\nimport { isEveryDefined } from '@fountain-ui/utils';\nimport type TabCoordinate from './TabCoordinate';\n\n\nexport function isEveryTabCoordinatesDefined(coordinates: TabCoordinate[], tabElements: ReactNode): boolean {\n    const numberOfTabs = Children.count(tabElements);\n    const numberOfCoordinates = coordinates.length;\n\n    const everyCoordinatesDefined = isEveryDefined(coordinates);\n\n    return numberOfTabs === numberOfCoordinates && everyCoordinatesDefined;\n}\n"],"mappings":";;;;;;;AACA;;AACA;;AAIO,SAASA,4BAAT,CAAsCC,WAAtC,EAAoEC,WAApE,EAAqG;EACxG,MAAMC,YAAY,GAAGC,eAAA,CAASC,KAAT,CAAeH,WAAf,CAArB;;EACA,MAAMI,mBAAmB,GAAGL,WAAW,CAACM,MAAxC;EAEA,MAAMC,uBAAuB,GAAG,IAAAC,qBAAA,EAAeR,WAAf,CAAhC;EAEA,OAAOE,YAAY,KAAKG,mBAAjB,IAAwCE,uBAA/C;AACH"}
+{"version":3,"names":["isEveryTabCoordinatesDefined","coordinates","tabElements","numberOfTabs","Children","count","numberOfCoordinates","length","everyCoordinatesDefined","isEveryDefined"],"sources":["utils.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Children } from 'react';\nimport { isEveryDefined } from '@fountain-ui/utils';\nimport type TabCoordinate from './TabCoordinate';\n\n\nexport function isEveryTabCoordinatesDefined(coordinates: (TabCoordinate | number)[], tabElements: ReactNode): boolean {\n    const numberOfTabs = Children.count(tabElements);\n    const numberOfCoordinates = coordinates.length;\n\n    const everyCoordinatesDefined = isEveryDefined(coordinates);\n\n    return numberOfTabs === numberOfCoordinates && everyCoordinatesDefined;\n}\n"],"mappings":";;;;;;;AACA;;AACA;;AAIO,SAASA,4BAAT,CAAsCC,WAAtC,EAA+EC,WAA/E,EAAgH;EACnH,MAAMC,YAAY,GAAGC,eAAA,CAASC,KAAT,CAAeH,WAAf,CAArB;;EACA,MAAMI,mBAAmB,GAAGL,WAAW,CAACM,MAAxC;EAEA,MAAMC,uBAAuB,GAAG,IAAAC,qBAAA,EAAeR,WAAf,CAAhC;EAEA,OAAOE,YAAY,KAAKG,mBAAjB,IAAwCE,uBAA/C;AACH"}

package/build/module/Dialog/Dialog.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { useEffect } from 'react';
-import { useWindowDimensions, Animated } from 'react-native';
+import { useWindowDimensions, Animated, Easing } from 'react-native';
 import { css } from '@fountain-ui/styles';
 import Column from '../Column';
 import Modal from '../Modal';
@@ -10,8 +10,7 @@ import { useAnimatedValue } from '../hooks';
 import { isNotAndroid12 } from '../utils';
 import { useTheme } from '../styles';
 const DIALOG_MAX_WIDTH = 328;
-const fadeInDuration = 300;
-const fadeOutDuration = 100;
+const fadeDuration = 300;
 const fadeAnimationDelay = 50;
 
 const useStyles = function () {
@@ -71,8 +70,9 @@ export default function Dialog(props) {
     if (!fullScreen) {
       Animated.timing(animatedOpacity, {
         toValue: visible ? 1 : 0,
-        duration: visible ? fadeInDuration : fadeOutDuration,
+        duration: fadeDuration,
         delay: visible ? fadeAnimationDelay : 0,
+        easing: Easing.out(Easing.exp),
         useNativeDriver: isNotAndroid12
       }).start();
     }
@@ -86,6 +86,8 @@ export default function Dialog(props) {
   }, otherProps), /*#__PURE__*/React.createElement(Animated.View, {
     needsOffscreenAlphaCompositing: true,
     style: {
+      height: fullScreen ? '100%' : 'auto',
+      width: fullScreen ? '100%' : 'auto',
       opacity: animatedOpacity
     }
   }, topElement ? /*#__PURE__*/React.createElement(Column, {
@@ -93,7 +95,7 @@ export default function Dialog(props) {
   }, /*#__PURE__*/React.createElement(Column, {
     style: styles.topElementPosition
   }, topElement)) : null, /*#__PURE__*/React.createElement(Paper, {
-    elevation: 24,
+    elevation: 6,
     square: fullScreen,
     style: css([{
       borderRadius: fullScreen ? undefined : theme.shape.roundnessExtra

package/build/module/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useWindowDimensions","Animated","css","Column","Modal","Paper","useAnimatedValue","isNotAndroid12","useTheme","DIALOG_MAX_WIDTH","fadeInDuration","fadeOutDuration","fadeAnimationDelay","useStyles","theme","width","margin","spacing","dialogWidth","root","alignItems","justifyContent","zIndex","dialog","paper","maxWidth","overflow","paperFullScreen","flexGrow","animation","animationFullScreen","height","topElementSize","marginHorizontal","topElementPosition","position","bottom","Dialog","props","children","fullScreen","onClose","style","visible","topElement","otherProps","styles","animatedOpacity","timing","toValue","duration","delay","useNativeDriver","start","opacity","undefined","borderRadius","shape","roundnessExtra"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { useWindowDimensions, Animated } from 'react-native';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal from '../Modal';\nimport Paper from '../Paper';\nimport { useAnimatedValue } from '../hooks';\nimport { isNotAndroid12 } from '../utils';\nimport { useTheme } from '../styles';\nimport type DialogProps from './DialogProps';\n\ntype DialogStyleKeys =\n    | 'root'\n    | 'paper'\n    | 'paperFullScreen'\n    | 'animation'\n    | 'animationFullScreen'\n    | 'topElementSize'\n    | 'topElementPosition';\n\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nconst DIALOG_MAX_WIDTH = 328;\n\nconst fadeInDuration = 300;\nconst fadeOutDuration = 100;\nconst fadeAnimationDelay = 50;\n\nconst useStyles: UseStyles<DialogStyles> = function (): DialogStyles {\n    const theme = useTheme();\n\n    const { width } = useWindowDimensions();\n\n    const margin = theme.spacing(4);\n    const dialogWidth = width - margin * 2;\n\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n            zIndex: theme.zIndex.dialog,\n        },\n        paper: {\n            margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            overflow: 'hidden',\n            width: dialogWidth,\n        },\n        paperFullScreen: {\n            flexGrow: 1,\n        },\n        animation: {},\n        animationFullScreen: {\n            width: '100%',\n            height: '100%',\n        },\n        topElementSize: {\n            marginHorizontal: margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            width: dialogWidth,\n        },\n        topElementPosition: {\n            position: 'absolute',\n            bottom: -1 * theme.spacing(4),\n            width: '100%',\n        },\n    };\n};\n\nexport default function Dialog(props: DialogProps) {\n    const {\n        children,\n        fullScreen = false,\n        onClose,\n        style = {},\n        visible,\n        topElement,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n    const theme = useTheme();\n    const animatedOpacity = useAnimatedValue(fullScreen ? 1 : 0);\n\n    useEffect(() => {\n        if(!fullScreen){\n            Animated.timing(animatedOpacity, {\n                toValue: visible ? 1 : 0,\n                duration: visible ? fadeInDuration: fadeOutDuration,\n                delay: visible ? fadeAnimationDelay : 0,\n                useNativeDriver: isNotAndroid12,\n            }).start();\n        }\n    }, [fullScreen, visible]);\n\n    return (\n        <Modal\n            animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}\n            onClose={onClose}\n            exitDuration={fullScreen ? 150 : 300}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <Animated.View\n                needsOffscreenAlphaCompositing={true}\n                style={{ opacity: animatedOpacity }}\n            >\n                {topElement ? (\n                    <Column style={fullScreen ? undefined : styles.topElementSize}>\n                        <Column style={styles.topElementPosition}>\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <Paper\n                    elevation={24}\n                    square={fullScreen}\n                    style={css([\n                        { borderRadius: fullScreen ? undefined : theme.shape.roundnessExtra },\n                        fullScreen ? styles.paperFullScreen : styles.paper,\n                        style,\n                    ])}\n                >\n                    {children}\n                </Paper>\n            </Animated.View>\n        </Modal>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","useEffect","useWindowDimensions","Animated","Easing","css","Column","Modal","Paper","useAnimatedValue","isNotAndroid12","useTheme","DIALOG_MAX_WIDTH","fadeDuration","fadeAnimationDelay","useStyles","theme","width","margin","spacing","dialogWidth","root","alignItems","justifyContent","zIndex","dialog","paper","maxWidth","overflow","paperFullScreen","flexGrow","animation","animationFullScreen","height","topElementSize","marginHorizontal","topElementPosition","position","bottom","Dialog","props","children","fullScreen","onClose","style","visible","topElement","otherProps","styles","animatedOpacity","timing","toValue","duration","delay","easing","out","exp","useNativeDriver","start","opacity","undefined","borderRadius","shape","roundnessExtra"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { useWindowDimensions, Animated, Easing } from 'react-native';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal from '../Modal';\nimport Paper from '../Paper';\nimport { useAnimatedValue } from '../hooks';\nimport { isNotAndroid12 } from '../utils';\nimport { useTheme } from '../styles';\nimport type DialogProps from './DialogProps';\n\ntype DialogStyleKeys =\n    | 'root'\n    | 'paper'\n    | 'paperFullScreen'\n    | 'animation'\n    | 'animationFullScreen'\n    | 'topElementSize'\n    | 'topElementPosition';\n\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nconst DIALOG_MAX_WIDTH = 328;\n\nconst fadeDuration = 300;\nconst fadeAnimationDelay = 50;\n\nconst useStyles: UseStyles<DialogStyles> = function (): DialogStyles {\n    const theme = useTheme();\n\n    const { width } = useWindowDimensions();\n\n    const margin = theme.spacing(4);\n    const dialogWidth = width - margin * 2;\n\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n            zIndex: theme.zIndex.dialog,\n        },\n        paper: {\n            margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            overflow: 'hidden',\n            width: dialogWidth,\n        },\n        paperFullScreen: {\n            flexGrow: 1,\n        },\n        animation: {},\n        animationFullScreen: {\n            width: '100%',\n            height: '100%',\n        },\n        topElementSize: {\n            marginHorizontal: margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            width: dialogWidth,\n        },\n        topElementPosition: {\n            position: 'absolute',\n            bottom: -1 * theme.spacing(4),\n            width: '100%',\n        },\n    };\n};\n\nexport default function Dialog(props: DialogProps) {\n    const {\n        children,\n        fullScreen = false,\n        onClose,\n        style = {},\n        visible,\n        topElement,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n    const theme = useTheme();\n    const animatedOpacity = useAnimatedValue(fullScreen ? 1 : 0);\n\n    useEffect(() => {\n        if(!fullScreen){\n            Animated.timing(animatedOpacity, {\n                toValue: visible ? 1 : 0,\n                duration: fadeDuration,\n                delay: visible ? fadeAnimationDelay : 0,\n                easing: Easing.out(Easing.exp),\n                useNativeDriver: isNotAndroid12,\n            }).start();\n        }\n    }, [fullScreen, visible]);\n\n    return (\n        <Modal\n            animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}\n            onClose={onClose}\n            exitDuration={fullScreen ? 150 : 300}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <Animated.View\n                needsOffscreenAlphaCompositing={true}\n                style={{\n                    height: fullScreen ? '100%' : 'auto',\n                    width:  fullScreen ? '100%' : 'auto',\n                    opacity: animatedOpacity,\n                }}\n            >\n                {topElement ? (\n                    <Column style={fullScreen ? undefined : styles.topElementSize}>\n                        <Column style={styles.topElementPosition}>\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <Paper\n                    elevation={6}\n                    square={fullScreen}\n                    style={css([\n                        { borderRadius: fullScreen ? undefined : theme.shape.roundnessExtra },\n                        fullScreen ? styles.paperFullScreen : styles.paper,\n                        style,\n                    ])}\n                >\n                    {children}\n                </Paper>\n            </Animated.View>\n        </Modal>\n    );\n};\n"],"mappings":"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"}

package/build/module/Snackbar/Snackbar.js

@@ -1,15 +1,14 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { useEffect } from 'react';
-import { Animated } from 'react-native';
+import { Animated, Easing } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Slide from '../Slide';
 import SnackbarContent from '../SnackbarContent';
 import { useAnimatedValue } from '../hooks';
 import { useTheme } from '../styles';
 import { isNotAndroid12 } from '../utils';
-const fadeInDuration = 300;
-const fadeOutDuration = 110;
+const fadeDuration = 300;
 const fadeAnimationDelay = 100;
 
 const useStyles = function () {
@@ -78,8 +77,9 @@ export default function Snackbar(props) {
   useEffect(() => {
     Animated.timing(animatedOpacity, {
       toValue: visible ? 1 : 0,
-      duration: visible ? fadeInDuration : fadeOutDuration,
+      duration: fadeDuration,
       delay: visible ? fadeAnimationDelay : 0,
+      easing: Easing.out(Easing.exp),
       useNativeDriver: isNotAndroid12
     }).start();
   }, [visible]);

package/build/module/Snackbar/Snackbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","Animated","useSafeAreaInsets","Slide","SnackbarContent","useAnimatedValue","useTheme","isNotAndroid12","fadeInDuration","fadeOutDuration","fadeAnimationDelay","useStyles","theme","insets","root","alignSelf","bottom","spacing","maxWidth","paddingBottom","paddingHorizontal","position","width","zIndex","Snackbar","props","actionLabel","animatedY","autoHideDuration","children","message","title","startIcon","onActionPress","onClose","style","visible","otherProps","autoHideTimer","useRef","clearAutoHideTimeout","current","clearTimeout","setTimeout","styles","exited","setExited","useState","animatedOpacity","animatedStyle","opacity","timing","toValue","duration","delay","useNativeDriver","start"],"sources":["Snackbar.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Animated } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Slide from '../Slide';\nimport SnackbarContent from '../SnackbarContent';\nimport { useAnimatedValue } from '../hooks';\nimport { useTheme } from '../styles';\nimport { isNotAndroid12 } from '../utils';\nimport type SnackbarProps from './SnackbarProps';\n\ntype SnackBarStyles = NamedStylesStringUnion<'root'>;\n\nconst fadeInDuration = 300;\nconst fadeOutDuration = 110;\nconst fadeAnimationDelay = 100;\n\nconst useStyles: UseStyles<SnackBarStyles> = function (): SnackBarStyles {\n    const theme = useTheme();\n    const insets = useSafeAreaInsets();\n\n    return {\n        root: {\n            alignSelf: 'center',\n            bottom: theme.spacing(2),\n            maxWidth: 480,\n            paddingBottom: insets.bottom,\n            paddingHorizontal: theme.spacing(2),\n            position: 'absolute',\n            width: '100%',\n            // TODO: Need to remove zIndex.\n            zIndex: 32,\n        },\n    };\n};\n\nexport default function Snackbar(props: SnackbarProps) {\n    const {\n        actionLabel,\n        animatedY,\n        autoHideDuration = null,\n        children,\n        message,\n        title,\n        startIcon,\n        onActionPress,\n        onClose,\n        style,\n        visible = false,\n        ...otherProps\n    } = props;\n\n    const autoHideTimer = React.useRef<number | null>(null);\n\n    const clearAutoHideTimeout = () => {\n        if (autoHideTimer.current !== null) {\n            clearTimeout(autoHideTimer.current);\n        }\n    };\n\n    React.useEffect(() => {\n        return () => {\n            clearAutoHideTimeout();\n        };\n    }, []);\n\n    React.useEffect(() => {\n        if (visible && autoHideDuration !== null) {\n            clearAutoHideTimeout();\n\n            // @ts-ignore\n            autoHideTimer.current = setTimeout(() => {\n                if (onClose) {\n                    onClose();\n                }\n            }, autoHideDuration);\n        }\n    }, [visible, autoHideDuration, onClose]);\n\n    const styles = useStyles();\n\n    const [exited, setExited] = React.useState(true);\n\n    const animatedOpacity = useAnimatedValue(0);\n\n    const animatedStyle = {\n        opacity: animatedOpacity,\n    };\n\n    useEffect(() => {\n        Animated.timing(animatedOpacity, {\n            toValue: visible ? 1 : 0,\n            duration: visible ? fadeInDuration : fadeOutDuration,\n            delay: visible ? fadeAnimationDelay : 0,\n            useNativeDriver: isNotAndroid12,\n        }).start();\n    }, [visible]);\n\n    if (!visible && exited) {\n        return null;\n    }\n\n    return (\n        <Animated.View\n            style={[\n                animatedStyle,\n                styles.root,\n                style,\n            ]}\n            {...otherProps}\n        >\n            <Slide\n                animatedY={animatedY}\n                appear={visible}\n                onEnter={() => setExited(false)}\n                onExited={() => setExited(true)}\n            >\n                {children ? children : (\n                    <SnackbarContent\n                        title={title}\n                        startIcon={startIcon}\n                        actionLabel={actionLabel}\n                        message={message}\n                        onActionPress={onActionPress}\n                    />\n                )}\n            </Slide>\n        </Animated.View>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,SAAhB,QAAiC,OAAjC;AACA,SAASC,QAAT,QAAyB,cAAzB;AACA,SAASC,iBAAT,QAAkC,gCAAlC;AAEA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,SAASC,gBAAT,QAAiC,UAAjC;AACA,SAASC,QAAT,QAAyB,WAAzB;AACA,SAASC,cAAT,QAA+B,UAA/B;AAKA,MAAMC,cAAc,GAAG,GAAvB;AACA,MAAMC,eAAe,GAAG,GAAxB;AACA,MAAMC,kBAAkB,GAAG,GAA3B;;AAEA,MAAMC,SAAoC,GAAG,YAA4B;EACrE,MAAMC,KAAK,GAAGN,QAAQ,EAAtB;EACA,MAAMO,MAAM,GAAGX,iBAAiB,EAAhC;EAEA,OAAO;IACHY,IAAI,EAAE;MACFC,SAAS,EAAE,QADT;MAEFC,MAAM,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd,CAFN;MAGFC,QAAQ,EAAE,GAHR;MAIFC,aAAa,EAAEN,MAAM,CAACG,MAJpB;MAKFI,iBAAiB,EAAER,KAAK,CAACK,OAAN,CAAc,CAAd,CALjB;MAMFI,QAAQ,EAAE,UANR;MAOFC,KAAK,EAAE,MAPL;MAQF;MACAC,MAAM,EAAE;IATN;EADH,CAAP;AAaH,CAjBD;;AAmBA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,WADE;IAEFC,SAFE;IAGFC,gBAAgB,GAAG,IAHjB;IAIFC,QAJE;IAKFC,OALE;IAMFC,KANE;IAOFC,SAPE;IAQFC,aARE;IASFC,OATE;IAUFC,KAVE;IAWFC,OAAO,GAAG,KAXR;IAYF,GAAGC;EAZD,IAaFZ,KAbJ;EAeA,MAAMa,aAAa,GAAGvC,KAAK,CAACwC,MAAN,CAA4B,IAA5B,CAAtB;;EAEA,MAAMC,oBAAoB,GAAG,MAAM;IAC/B,IAAIF,aAAa,CAACG,OAAd,KAA0B,IAA9B,EAAoC;MAChCC,YAAY,CAACJ,aAAa,CAACG,OAAf,CAAZ;IACH;EACJ,CAJD;;EAMA1C,KAAK,CAACC,SAAN,CAAgB,MAAM;IAClB,OAAO,MAAM;MACTwC,oBAAoB;IACvB,CAFD;EAGH,CAJD,EAIG,EAJH;EAMAzC,KAAK,CAACC,SAAN,CAAgB,MAAM;IAClB,IAAIoC,OAAO,IAAIR,gBAAgB,KAAK,IAApC,EAA0C;MACtCY,oBAAoB,GADkB,CAGtC;;MACAF,aAAa,CAACG,OAAd,GAAwBE,UAAU,CAAC,MAAM;QACrC,IAAIT,OAAJ,EAAa;UACTA,OAAO;QACV;MACJ,CAJiC,EAI/BN,gBAJ+B,CAAlC;IAKH;EACJ,CAXD,EAWG,CAACQ,OAAD,EAAUR,gBAAV,EAA4BM,OAA5B,CAXH;EAaA,MAAMU,MAAM,GAAGjC,SAAS,EAAxB;EAEA,MAAM,CAACkC,MAAD,EAASC,SAAT,IAAsB/C,KAAK,CAACgD,QAAN,CAAe,IAAf,CAA5B;EAEA,MAAMC,eAAe,GAAG3C,gBAAgB,CAAC,CAAD,CAAxC;EAEA,MAAM4C,aAAa,GAAG;IAClBC,OAAO,EAAEF;EADS,CAAtB;EAIAhD,SAAS,CAAC,MAAM;IACZC,QAAQ,CAACkD,MAAT,CAAgBH,eAAhB,EAAiC;MAC7BI,OAAO,EAAEhB,OAAO,GAAG,CAAH,GAAO,CADM;MAE7BiB,QAAQ,EAAEjB,OAAO,GAAG5B,cAAH,GAAoBC,eAFR;MAG7B6C,KAAK,EAAElB,OAAO,GAAG1B,kBAAH,GAAwB,CAHT;MAI7B6C,eAAe,EAAEhD;IAJY,CAAjC,EAKGiD,KALH;EAMH,CAPQ,EAON,CAACpB,OAAD,CAPM,CAAT;;EASA,IAAI,CAACA,OAAD,IAAYS,MAAhB,EAAwB;IACpB,OAAO,IAAP;EACH;;EAED,oBACI,oBAAC,QAAD,CAAU,IAAV;IACI,KAAK,EAAE,CACHI,aADG,EAEHL,MAAM,CAAC9B,IAFJ,EAGHqB,KAHG;EADX,GAMQE,UANR,gBAQI,oBAAC,KAAD;IACI,SAAS,EAAEV,SADf;IAEI,MAAM,EAAES,OAFZ;IAGI,OAAO,EAAE,MAAMU,SAAS,CAAC,KAAD,CAH5B;IAII,QAAQ,EAAE,MAAMA,SAAS,CAAC,IAAD;EAJ7B,GAMKjB,QAAQ,GAAGA,QAAH,gBACL,oBAAC,eAAD;IACI,KAAK,EAAEE,KADX;IAEI,SAAS,EAAEC,SAFf;IAGI,WAAW,EAAEN,WAHjB;IAII,OAAO,EAAEI,OAJb;IAKI,aAAa,EAAEG;EALnB,EAPR,CARJ,CADJ;AA2BH;AAAA"}
+{"version":3,"names":["React","useEffect","Animated","Easing","useSafeAreaInsets","Slide","SnackbarContent","useAnimatedValue","useTheme","isNotAndroid12","fadeDuration","fadeAnimationDelay","useStyles","theme","insets","root","alignSelf","bottom","spacing","maxWidth","paddingBottom","paddingHorizontal","position","width","zIndex","Snackbar","props","actionLabel","animatedY","autoHideDuration","children","message","title","startIcon","onActionPress","onClose","style","visible","otherProps","autoHideTimer","useRef","clearAutoHideTimeout","current","clearTimeout","setTimeout","styles","exited","setExited","useState","animatedOpacity","animatedStyle","opacity","timing","toValue","duration","delay","easing","out","exp","useNativeDriver","start"],"sources":["Snackbar.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Animated, Easing } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Slide from '../Slide';\nimport SnackbarContent from '../SnackbarContent';\nimport { useAnimatedValue } from '../hooks';\nimport { useTheme } from '../styles';\nimport { isNotAndroid12 } from '../utils';\nimport type SnackbarProps from './SnackbarProps';\n\ntype SnackBarStyles = NamedStylesStringUnion<'root'>;\n\nconst fadeDuration = 300;\nconst fadeAnimationDelay = 100;\n\nconst useStyles: UseStyles<SnackBarStyles> = function (): SnackBarStyles {\n    const theme = useTheme();\n    const insets = useSafeAreaInsets();\n\n    return {\n        root: {\n            alignSelf: 'center',\n            bottom: theme.spacing(2),\n            maxWidth: 480,\n            paddingBottom: insets.bottom,\n            paddingHorizontal: theme.spacing(2),\n            position: 'absolute',\n            width: '100%',\n            // TODO: Need to remove zIndex.\n            zIndex: 32,\n        },\n    };\n};\n\nexport default function Snackbar(props: SnackbarProps) {\n    const {\n        actionLabel,\n        animatedY,\n        autoHideDuration = null,\n        children,\n        message,\n        title,\n        startIcon,\n        onActionPress,\n        onClose,\n        style,\n        visible = false,\n        ...otherProps\n    } = props;\n\n    const autoHideTimer = React.useRef<number | null>(null);\n\n    const clearAutoHideTimeout = () => {\n        if (autoHideTimer.current !== null) {\n            clearTimeout(autoHideTimer.current);\n        }\n    };\n\n    React.useEffect(() => {\n        return () => {\n            clearAutoHideTimeout();\n        };\n    }, []);\n\n    React.useEffect(() => {\n        if (visible && autoHideDuration !== null) {\n            clearAutoHideTimeout();\n\n            // @ts-ignore\n            autoHideTimer.current = setTimeout(() => {\n                if (onClose) {\n                    onClose();\n                }\n            }, autoHideDuration);\n        }\n    }, [visible, autoHideDuration, onClose]);\n\n    const styles = useStyles();\n\n    const [exited, setExited] = React.useState(true);\n\n    const animatedOpacity = useAnimatedValue(0);\n\n    const animatedStyle = {\n        opacity: animatedOpacity,\n    };\n\n    useEffect(() => {\n        Animated.timing(animatedOpacity, {\n            toValue: visible ? 1 : 0,\n            duration: fadeDuration,\n            delay: visible ? fadeAnimationDelay : 0,\n            easing: Easing.out(Easing.exp),\n            useNativeDriver: isNotAndroid12,\n        }).start();\n    }, [visible]);\n\n    if (!visible && exited) {\n        return null;\n    }\n\n    return (\n        <Animated.View\n            style={[\n                animatedStyle,\n                styles.root,\n                style,\n            ]}\n            {...otherProps}\n        >\n            <Slide\n                animatedY={animatedY}\n                appear={visible}\n                onEnter={() => setExited(false)}\n                onExited={() => setExited(true)}\n            >\n                {children ? children : (\n                    <SnackbarContent\n                        title={title}\n                        startIcon={startIcon}\n                        actionLabel={actionLabel}\n                        message={message}\n                        onActionPress={onActionPress}\n                    />\n                )}\n            </Slide>\n        </Animated.View>\n    );\n};\n"],"mappings":"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"}

package/build/module/Tabs/Tabs.js

@@ -6,6 +6,7 @@ import TabIndicator from './TabIndicator';
 import ScrollableTabsView from './ScrollableTabsView';
 import IndexAwareTab from './IndexAwareTab';
 import useTabCoordinates from './useTabCoordinates';
+import useTabInnerContentsWidth from './useTabInnerContentsWidth';
 import useIndexStore from './useIndexStore';
 import InternalContext from './InternalContext';
 import { isEveryTabCoordinatesDefined } from './utils';
@@ -62,28 +63,28 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
   }), [sharedIndex]);
   const styles = useStyles();
   const [outerCoordinates, updateCoordinate] = useTabCoordinates(children);
-  const [innerCoordinates, updateInnerCoordinate] = useTabCoordinates(children);
-  const canRenderIndicator = indicatorSize === 'fit-content' ? isEveryTabCoordinatesDefined(innerCoordinates, children) : isEveryTabCoordinatesDefined(outerCoordinates, children);
+  const [innerContentsWidthList, updateInnerContentsWidth] = useTabInnerContentsWidth(children);
+  const canRenderIndicator = indicatorSize === 'fit-content' ? isEveryTabCoordinatesDefined(innerContentsWidthList, children) : isEveryTabCoordinatesDefined(outerCoordinates, children);
   const indexStore = useIndexStore(sharedIndex);
   const coordinates = useMemo(() => {
     if (indicatorSize !== 'fit-content') {
       return outerCoordinates;
     }
 
-    return innerCoordinates.map((coordinate, idx) => {
+    return innerContentsWidthList.map((innerContentWidth, idx) => {
       const {
-        x1,
-        x2
-      } = coordinate;
-      const {
-        x1: outerX1
+        x1: outerX1,
+        x2: outerX2
       } = outerCoordinates[idx];
+      const tabWidth = outerX2 - outerX1;
+      const distanceFromParent = (tabWidth - innerContentWidth) / 2;
+      const indicatorStartCoordinate = outerX1 + distanceFromParent;
       return {
-        x1: x1 + outerX1,
-        x2: x2 + outerX1
+        x1: indicatorStartCoordinate,
+        x2: indicatorStartCoordinate + innerContentWidth
       };
     });
-  }, [outerCoordinates, innerCoordinates, variant]);
+  }, [outerCoordinates, innerContentsWidthList, variant]);
   useEffect(() => {
     return indexStore.subscribe(newIndex => {
       onChange === null || onChange === void 0 ? void 0 : onChange(newIndex);
@@ -97,10 +98,9 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
 
     const onTabInnerLayout = event => {
       const {
-        x,
         width
       } = event.nativeEvent.layout;
-      updateInnerCoordinate(index, x, width);
+      updateInnerContentsWidth(index, width);
     };
 
     const onLayout = event => {

package/build/module/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cloneElement","forwardRef","useEffect","useImperativeHandle","useMemo","useRef","View","css","useTheme","useSyncAnimatedValue","TabIndicator","ScrollableTabsView","IndexAwareTab","useTabCoordinates","useIndexStore","InternalContext","isEveryTabCoordinatesDefined","useStyles","theme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","Tabs","props","ref","children","indicatorColor","initialIndex","disableIndicator","indicatorSize","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","style","variant","UNSTABLE_sharedIndex","onTabSelected","fallbackSharedIndex","initialValue","sharedIndex","realInitialIndex","currentIndexRef","setTab","newIndex","currentIndex","current","animatedValue","setValue","styles","outerCoordinates","updateCoordinate","innerCoordinates","updateInnerCoordinate","canRenderIndicator","indexStore","coordinates","map","coordinate","idx","x1","x2","outerX1","subscribe","tabElements","Children","child","index","onTabInnerLayout","event","x","width","nativeEvent","layout","onLayout","onMouseDown","e","preventDefault","onPress","tabElement","enableIndicator","undefined","filter","Boolean","tabIndicator"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport { useSyncAnimatedValue } from '../hooks';\nimport type TabsProps from './TabsProps';\nimport type { TabsInstance } from './types';\nimport TabIndicator from './TabIndicator';\nimport ScrollableTabsView from './ScrollableTabsView';\nimport IndexAwareTab from './IndexAwareTab';\nimport useTabCoordinates from './useTabCoordinates';\nimport useIndexStore from './useIndexStore';\nimport InternalContext from './InternalContext';\nimport { isEveryTabCoordinatesDefined } from './utils';\n\ntype TabsStyleKeys =\n    | 'root'\n    | 'fixedRoot'\n    | 'fixedTab'\n    | 'scrollableContainer';\n\ntype TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;\n\nconst useStyles: UseStyles<TabsStyles> = function (): TabsStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        fixedRoot: {\n            flexDirection: 'row',\n        },\n        fixedTab: {\n            flex: 1,\n        },\n        scrollableContainer: {\n            paddingHorizontal: theme.spacing(1),\n        },\n    };\n};\n\nconst Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {\n    const {\n        children,\n        indicatorColor = 'primary',\n        initialIndex = 0,\n        disableIndicator = false,\n        indicatorSize = 'full',\n        keyboardDismissMode = 'none',\n        keyboardShouldPersistTaps = 'never',\n        onChange,\n        scrollable = false,\n        style,\n        variant = 'primary',\n        UNSTABLE_sharedIndex,\n        onTabSelected,\n    } = props;\n\n    const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });\n    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;\n    const realInitialIndex = sharedIndex.initialValue;\n\n    const currentIndexRef = useRef(initialIndex);\n\n    const setTab = (newIndex: number) => {\n        const currentIndex = currentIndexRef.current;\n        onTabSelected?.(newIndex, currentIndex);\n\n        sharedIndex.animatedValue.setValue(newIndex);\n    };\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            setTab,\n        }),\n        [sharedIndex],\n    );\n\n    const styles = useStyles();\n\n    const [outerCoordinates, updateCoordinate] = useTabCoordinates(children);\n    const [innerCoordinates, updateInnerCoordinate] = useTabCoordinates(children);\n\n    const canRenderIndicator = indicatorSize === 'fit-content'\n        ? isEveryTabCoordinatesDefined(innerCoordinates, children)\n        : isEveryTabCoordinatesDefined(outerCoordinates, children);\n\n    const indexStore = useIndexStore(sharedIndex);\n\n    const coordinates = useMemo(() => {\n        if (indicatorSize !== 'fit-content') {\n            return outerCoordinates;\n        }\n\n        return innerCoordinates.map((coordinate, idx) => {\n            const { x1, x2 } = coordinate;\n            const { x1: outerX1 } = outerCoordinates[idx];\n            return {\n                x1: x1 + outerX1,\n                x2: x2 + outerX1,\n            }\n        });\n    }, [outerCoordinates, innerCoordinates, variant]);\n\n    useEffect(() => {\n        return indexStore.subscribe(newIndex => {\n            onChange?.(newIndex);\n            currentIndexRef.current = newIndex;\n        });\n    }, [indexStore, onChange]);\n\n    const tabElements = React.Children.map(children, (child, index) => {\n        if (!child) {\n            return null;\n        }\n\n        const onTabInnerLayout = (event: LayoutChangeEvent) => {\n            const { x, width } = event.nativeEvent.layout;\n\n            updateInnerCoordinate(index, x, width);\n        };\n\n        const onLayout = (event: LayoutChangeEvent) => {\n            const { x, width } = event.nativeEvent.layout;\n\n            updateCoordinate(index, x, width);\n\n            // @ts-ignore\n            child.props.onLayout?.(event);\n        };\n\n        const onMouseDown = (e: GestureResponderEvent) => {\n            if (keyboardShouldPersistTaps === 'always') {\n                e.preventDefault();\n            }\n        };\n\n        const onPress = () => {\n            setTab(index);\n\n            // @ts-ignore\n            child.props.onPress?.();\n        };\n\n        // @ts-ignore\n        const tabElement = cloneElement(child, {\n            enableIndicator: !disableIndicator && !canRenderIndicator,\n            indicatorColor,\n            onTabInnerLayout,\n            onLayout,\n            onPress,\n            onMouseDown,\n            variant,\n            indicatorSize,\n            style: scrollable ? undefined : styles.fixedTab,\n        });\n\n        return (\n            <IndexAwareTab\n                children={tabElement}\n                index={index}\n                initialIndex={realInitialIndex}\n            />\n        );\n    })?.filter(Boolean);\n\n    const tabIndicator = canRenderIndicator ? (\n        <TabIndicator\n            color={indicatorColor}\n            coordinates={coordinates}\n            disabled={disableIndicator}\n            initialIndex={realInitialIndex}\n            scrollable={scrollable}\n        />\n    ) : null;\n\n    return (\n        <InternalContext.Provider value={{ indexStore }}>\n            <View\n                style={css([\n                    styles.root,\n                    scrollable ? undefined : styles.fixedRoot,\n                    style,\n                ])}\n            >\n                {scrollable ? (\n                    <ScrollableTabsView\n                        automaticallyAdjustContentInsets={false}\n                        bounces={false}\n                        contentContainerStyle={styles.scrollableContainer}\n                        coordinates={coordinates}\n                        directionalLockEnabled={true}\n                        horizontal={true}\n                        initialIndex={realInitialIndex}\n                        scrollsToTop={false}\n                        showsHorizontalScrollIndicator={false}\n                        showsVerticalScrollIndicator={false}\n                        keyboardDismissMode={keyboardDismissMode}\n                        keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n                    >\n                        {tabElements}\n                        {tabIndicator}\n                    </ScrollableTabsView>\n                ) : (\n                    <React.Fragment>\n                        {tabElements}\n                        {tabIndicator}\n                    </React.Fragment>\n                )}\n            </View>\n        </InternalContext.Provider>\n    );\n});\n\nexport default Tabs;\n"],"mappings":"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"}
+{"version":3,"names":["React","cloneElement","forwardRef","useEffect","useImperativeHandle","useMemo","useRef","View","css","useTheme","useSyncAnimatedValue","TabIndicator","ScrollableTabsView","IndexAwareTab","useTabCoordinates","useTabInnerContentsWidth","useIndexStore","InternalContext","isEveryTabCoordinatesDefined","useStyles","theme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","Tabs","props","ref","children","indicatorColor","initialIndex","disableIndicator","indicatorSize","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","style","variant","UNSTABLE_sharedIndex","onTabSelected","fallbackSharedIndex","initialValue","sharedIndex","realInitialIndex","currentIndexRef","setTab","newIndex","currentIndex","current","animatedValue","setValue","styles","outerCoordinates","updateCoordinate","innerContentsWidthList","updateInnerContentsWidth","canRenderIndicator","indexStore","coordinates","map","innerContentWidth","idx","x1","outerX1","x2","outerX2","tabWidth","distanceFromParent","indicatorStartCoordinate","subscribe","tabElements","Children","child","index","onTabInnerLayout","event","width","nativeEvent","layout","onLayout","x","onMouseDown","e","preventDefault","onPress","tabElement","enableIndicator","undefined","filter","Boolean","tabIndicator"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport { useSyncAnimatedValue } from '../hooks';\nimport type TabsProps from './TabsProps';\nimport type { TabsInstance } from './types';\nimport TabIndicator from './TabIndicator';\nimport ScrollableTabsView from './ScrollableTabsView';\nimport IndexAwareTab from './IndexAwareTab';\nimport useTabCoordinates from './useTabCoordinates';\nimport useTabInnerContentsWidth from './useTabInnerContentsWidth';\nimport useIndexStore from './useIndexStore';\nimport InternalContext from './InternalContext';\nimport { isEveryTabCoordinatesDefined } from './utils';\n\ntype TabsStyleKeys =\n    | 'root'\n    | 'fixedRoot'\n    | 'fixedTab'\n    | 'scrollableContainer';\n\ntype TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;\n\nconst useStyles: UseStyles<TabsStyles> = function (): TabsStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        fixedRoot: {\n            flexDirection: 'row',\n        },\n        fixedTab: {\n            flex: 1,\n        },\n        scrollableContainer: {\n            paddingHorizontal: theme.spacing(1),\n        },\n    };\n};\n\nconst Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {\n    const {\n        children,\n        indicatorColor = 'primary',\n        initialIndex = 0,\n        disableIndicator = false,\n        indicatorSize = 'full',\n        keyboardDismissMode = 'none',\n        keyboardShouldPersistTaps = 'never',\n        onChange,\n        scrollable = false,\n        style,\n        variant = 'primary',\n        UNSTABLE_sharedIndex,\n        onTabSelected,\n    } = props;\n\n    const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });\n    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;\n    const realInitialIndex = sharedIndex.initialValue;\n\n    const currentIndexRef = useRef(initialIndex);\n\n    const setTab = (newIndex: number) => {\n        const currentIndex = currentIndexRef.current;\n        onTabSelected?.(newIndex, currentIndex);\n\n        sharedIndex.animatedValue.setValue(newIndex);\n    };\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            setTab,\n        }),\n        [sharedIndex],\n    );\n\n    const styles = useStyles();\n\n    const [outerCoordinates, updateCoordinate] = useTabCoordinates(children);\n    const [innerContentsWidthList, updateInnerContentsWidth] = useTabInnerContentsWidth(children);\n\n    const canRenderIndicator = indicatorSize === 'fit-content'\n        ? isEveryTabCoordinatesDefined(innerContentsWidthList, children)\n        : isEveryTabCoordinatesDefined(outerCoordinates, children);\n\n    const indexStore = useIndexStore(sharedIndex);\n\n    const coordinates = useMemo(() => {\n        if (indicatorSize !== 'fit-content') {\n            return outerCoordinates;\n        }\n\n        return innerContentsWidthList.map((innerContentWidth, idx) => {\n            const { x1: outerX1, x2: outerX2 } = outerCoordinates[idx];\n\n            const tabWidth = outerX2 - outerX1;\n            const distanceFromParent = (tabWidth - innerContentWidth) / 2;\n            const indicatorStartCoordinate = outerX1 + distanceFromParent;\n\n            return {\n                x1: indicatorStartCoordinate,\n                x2: indicatorStartCoordinate + innerContentWidth,\n            };\n        });\n    }, [outerCoordinates, innerContentsWidthList, variant]);\n\n    useEffect(() => {\n        return indexStore.subscribe(newIndex => {\n            onChange?.(newIndex);\n            currentIndexRef.current = newIndex;\n        });\n    }, [indexStore, onChange]);\n\n    const tabElements = React.Children.map(children, (child, index) => {\n        if (!child) {\n            return null;\n        }\n\n        const onTabInnerLayout = (event: LayoutChangeEvent) => {\n            const { width } = event.nativeEvent.layout;\n\n            updateInnerContentsWidth(index, width);\n        };\n\n        const onLayout = (event: LayoutChangeEvent) => {\n            const { x, width } = event.nativeEvent.layout;\n\n            updateCoordinate(index, x, width);\n\n            // @ts-ignore\n            child.props.onLayout?.(event);\n        };\n\n        const onMouseDown = (e: GestureResponderEvent) => {\n            if (keyboardShouldPersistTaps === 'always') {\n                e.preventDefault();\n            }\n        };\n\n        const onPress = () => {\n            setTab(index);\n\n            // @ts-ignore\n            child.props.onPress?.();\n        };\n\n        // @ts-ignore\n        const tabElement = cloneElement(child, {\n            enableIndicator: !disableIndicator && !canRenderIndicator,\n            indicatorColor,\n            onTabInnerLayout,\n            onLayout,\n            onPress,\n            onMouseDown,\n            variant,\n            indicatorSize,\n            style: scrollable ? undefined : styles.fixedTab,\n        });\n\n        return (\n            <IndexAwareTab\n                children={tabElement}\n                index={index}\n                initialIndex={realInitialIndex}\n            />\n        );\n    })?.filter(Boolean);\n\n    const tabIndicator = canRenderIndicator ? (\n        <TabIndicator\n            color={indicatorColor}\n            coordinates={coordinates}\n            disabled={disableIndicator}\n            initialIndex={realInitialIndex}\n            scrollable={scrollable}\n        />\n    ) : null;\n\n    return (\n        <InternalContext.Provider value={{ indexStore }}>\n            <View\n                style={css([\n                    styles.root,\n                    scrollable ? undefined : styles.fixedRoot,\n                    style,\n                ])}\n            >\n                {scrollable ? (\n                    <ScrollableTabsView\n                        automaticallyAdjustContentInsets={false}\n                        bounces={false}\n                        contentContainerStyle={styles.scrollableContainer}\n                        coordinates={coordinates}\n                        directionalLockEnabled={true}\n                        horizontal={true}\n                        initialIndex={realInitialIndex}\n                        scrollsToTop={false}\n                        showsHorizontalScrollIndicator={false}\n                        showsVerticalScrollIndicator={false}\n                        keyboardDismissMode={keyboardDismissMode}\n                        keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n                    >\n                        {tabElements}\n                        {tabIndicator}\n                    </ScrollableTabsView>\n                ) : (\n                    <React.Fragment>\n                        {tabElements}\n                        {tabIndicator}\n                    </React.Fragment>\n                )}\n            </View>\n        </InternalContext.Provider>\n    );\n});\n\nexport default Tabs;\n"],"mappings":"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"}

package/build/module/Tabs/useTabInnerContentsWidth.js

@@ -0,0 +1,21 @@
+import { useRef, useState } from 'react';
+import { isEveryTabCoordinatesDefined } from './utils';
+
+const useTabInnerContentsWidth = tabElements => {
+  const [innerContentsWidthList, setInnerContentsWidth] = useState([]);
+  const cacheRef = useRef([]);
+
+  const updateInnerContentsWidth = (index, width) => {
+    cacheRef.current[index] = width;
+
+    if (isEveryTabCoordinatesDefined(cacheRef.current, tabElements)) {
+      setInnerContentsWidth([...cacheRef.current]);
+      cacheRef.current = [];
+    }
+  };
+
+  return [innerContentsWidthList, updateInnerContentsWidth];
+};
+
+export default useTabInnerContentsWidth;
+//# sourceMappingURL=useTabInnerContentsWidth.js.map

package/build/module/Tabs/useTabInnerContentsWidth.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useRef","useState","isEveryTabCoordinatesDefined","useTabInnerContentsWidth","tabElements","innerContentsWidthList","setInnerContentsWidth","cacheRef","updateInnerContentsWidth","index","width","current"],"sources":["useTabInnerContentsWidth.ts"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport { isEveryTabCoordinatesDefined } from './utils';\n\nexport interface UpdateInnerContentsWidth {\n    (index: number, width: number): void;\n}\n\nconst useTabInnerContentsWidth = (tabElements: React.ReactNode): [number[], UpdateInnerContentsWidth] => {\n    const [innerContentsWidthList, setInnerContentsWidth] = useState<number[]>([]);\n\n    const cacheRef = useRef<number[]>([]);\n\n    const updateInnerContentsWidth: UpdateInnerContentsWidth = (index, width) => {\n        cacheRef.current[index] = width;\n\n        if (isEveryTabCoordinatesDefined(cacheRef.current, tabElements)) {\n            setInnerContentsWidth([...cacheRef.current]);\n\n            cacheRef.current = [];\n        }\n    };\n\n    return [innerContentsWidthList, updateInnerContentsWidth];\n};\n\nexport default useTabInnerContentsWidth;\n"],"mappings":"AAAA,SAAgBA,MAAhB,EAAwBC,QAAxB,QAAwC,OAAxC;AACA,SAASC,4BAAT,QAA6C,SAA7C;;AAMA,MAAMC,wBAAwB,GAAIC,WAAD,IAAwE;EACrG,MAAM,CAACC,sBAAD,EAAyBC,qBAAzB,IAAkDL,QAAQ,CAAW,EAAX,CAAhE;EAEA,MAAMM,QAAQ,GAAGP,MAAM,CAAW,EAAX,CAAvB;;EAEA,MAAMQ,wBAAkD,GAAG,CAACC,KAAD,EAAQC,KAAR,KAAkB;IACzEH,QAAQ,CAACI,OAAT,CAAiBF,KAAjB,IAA0BC,KAA1B;;IAEA,IAAIR,4BAA4B,CAACK,QAAQ,CAACI,OAAV,EAAmBP,WAAnB,CAAhC,EAAiE;MAC7DE,qBAAqB,CAAC,CAAC,GAAGC,QAAQ,CAACI,OAAb,CAAD,CAArB;MAEAJ,QAAQ,CAACI,OAAT,GAAmB,EAAnB;IACH;EACJ,CARD;;EAUA,OAAO,CAACN,sBAAD,EAAyBG,wBAAzB,CAAP;AACH,CAhBD;;AAkBA,eAAeL,wBAAf"}

package/build/module/Tabs/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["Children","isEveryDefined","isEveryTabCoordinatesDefined","coordinates","tabElements","numberOfTabs","count","numberOfCoordinates","length","everyCoordinatesDefined"],"sources":["utils.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Children } from 'react';\nimport { isEveryDefined } from '@fountain-ui/utils';\nimport type TabCoordinate from './TabCoordinate';\n\n\nexport function isEveryTabCoordinatesDefined(coordinates: TabCoordinate[], tabElements: ReactNode): boolean {\n    const numberOfTabs = Children.count(tabElements);\n    const numberOfCoordinates = coordinates.length;\n\n    const everyCoordinatesDefined = isEveryDefined(coordinates);\n\n    return numberOfTabs === numberOfCoordinates && everyCoordinatesDefined;\n}\n"],"mappings":"AACA,SAASA,QAAT,QAAyB,OAAzB;AACA,SAASC,cAAT,QAA+B,oBAA/B;AAIA,OAAO,SAASC,4BAAT,CAAsCC,WAAtC,EAAoEC,WAApE,EAAqG;EACxG,MAAMC,YAAY,GAAGL,QAAQ,CAACM,KAAT,CAAeF,WAAf,CAArB;EACA,MAAMG,mBAAmB,GAAGJ,WAAW,CAACK,MAAxC;EAEA,MAAMC,uBAAuB,GAAGR,cAAc,CAACE,WAAD,CAA9C;EAEA,OAAOE,YAAY,KAAKE,mBAAjB,IAAwCE,uBAA/C;AACH"}
+{"version":3,"names":["Children","isEveryDefined","isEveryTabCoordinatesDefined","coordinates","tabElements","numberOfTabs","count","numberOfCoordinates","length","everyCoordinatesDefined"],"sources":["utils.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Children } from 'react';\nimport { isEveryDefined } from '@fountain-ui/utils';\nimport type TabCoordinate from './TabCoordinate';\n\n\nexport function isEveryTabCoordinatesDefined(coordinates: (TabCoordinate | number)[], tabElements: ReactNode): boolean {\n    const numberOfTabs = Children.count(tabElements);\n    const numberOfCoordinates = coordinates.length;\n\n    const everyCoordinatesDefined = isEveryDefined(coordinates);\n\n    return numberOfTabs === numberOfCoordinates && everyCoordinatesDefined;\n}\n"],"mappings":"AACA,SAASA,QAAT,QAAyB,OAAzB;AACA,SAASC,cAAT,QAA+B,oBAA/B;AAIA,OAAO,SAASC,4BAAT,CAAsCC,WAAtC,EAA+EC,WAA/E,EAAgH;EACnH,MAAMC,YAAY,GAAGL,QAAQ,CAACM,KAAT,CAAeF,WAAf,CAArB;EACA,MAAMG,mBAAmB,GAAGJ,WAAW,CAACK,MAAxC;EAEA,MAAMC,uBAAuB,GAAGR,cAAc,CAACE,WAAD,CAA9C;EAEA,OAAOE,YAAY,KAAKE,mBAAjB,IAAwCE,uBAA/C;AACH"}

package/build/typescript/Tabs/useTabInnerContentsWidth.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface UpdateInnerContentsWidth {
+    (index: number, width: number): void;
+}
+declare const useTabInnerContentsWidth: (tabElements: React.ReactNode) => [number[], UpdateInnerContentsWidth];
+export default useTabInnerContentsWidth;

package/build/typescript/Tabs/utils.d.ts

@@ -1,3 +1,3 @@
 import type { ReactNode } from 'react';
 import type TabCoordinate from './TabCoordinate';
-export declare function isEveryTabCoordinatesDefined(coordinates: TabCoordinate[], tabElements: ReactNode): boolean;
+export declare function isEveryTabCoordinatesDefined(coordinates: (TabCoordinate | number)[], tabElements: ReactNode): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "2.0.0-beta.76",
+  "version": "2.0.0-beta.78",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cc48805efae8ceeab7e10b5e39dba30136d3a6e4"
+  "gitHead": "57a28ecbfdf143b32642cada97c0bf64e27dcff9"
 }

package/src/Dialog/Dialog.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useWindowDimensions, Animated } from 'react-native';
+import { useWindowDimensions, Animated, Easing } from 'react-native';
 import { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import Column from '../Column';
 import Modal from '../Modal';
@@ -22,8 +22,7 @@ type DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;
 
 const DIALOG_MAX_WIDTH = 328;
 
-const fadeInDuration = 300;
-const fadeOutDuration = 100;
+const fadeDuration = 300;
 const fadeAnimationDelay = 50;
 
 const useStyles: UseStyles<DialogStyles> = function (): DialogStyles {
@@ -86,8 +85,9 @@ export default function Dialog(props: DialogProps) {
         if(!fullScreen){
             Animated.timing(animatedOpacity, {
                 toValue: visible ? 1 : 0,
-                duration: visible ? fadeInDuration: fadeOutDuration,
+                duration: fadeDuration,
                 delay: visible ? fadeAnimationDelay : 0,
+                easing: Easing.out(Easing.exp),
                 useNativeDriver: isNotAndroid12,
             }).start();
         }
@@ -104,7 +104,11 @@ export default function Dialog(props: DialogProps) {
         >
             <Animated.View
                 needsOffscreenAlphaCompositing={true}
-                style={{ opacity: animatedOpacity }}
+                style={{
+                    height: fullScreen ? '100%' : 'auto',
+                    width:  fullScreen ? '100%' : 'auto',
+                    opacity: animatedOpacity,
+                }}
             >
                 {topElement ? (
                     <Column style={fullScreen ? undefined : styles.topElementSize}>
@@ -115,7 +119,7 @@ export default function Dialog(props: DialogProps) {
                 ) : null}
 
                 <Paper
-                    elevation={24}
+                    elevation={6}
                     square={fullScreen}
                     style={css([
                         { borderRadius: fullScreen ? undefined : theme.shape.roundnessExtra },

package/src/Snackbar/Snackbar.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { Animated } from 'react-native';
+import { Animated, Easing } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import Slide from '../Slide';
@@ -11,8 +11,7 @@ import type SnackbarProps from './SnackbarProps';
 
 type SnackBarStyles = NamedStylesStringUnion<'root'>;
 
-const fadeInDuration = 300;
-const fadeOutDuration = 110;
+const fadeDuration = 300;
 const fadeAnimationDelay = 100;
 
 const useStyles: UseStyles<SnackBarStyles> = function (): SnackBarStyles {
@@ -90,8 +89,9 @@ export default function Snackbar(props: SnackbarProps) {
     useEffect(() => {
         Animated.timing(animatedOpacity, {
             toValue: visible ? 1 : 0,
-            duration: visible ? fadeInDuration : fadeOutDuration,
+            duration: fadeDuration,
             delay: visible ? fadeAnimationDelay : 0,
+            easing: Easing.out(Easing.exp),
             useNativeDriver: isNotAndroid12,
         }).start();
     }, [visible]);

package/src/Tabs/Tabs.tsx

@@ -10,6 +10,7 @@ import TabIndicator from './TabIndicator';
 import ScrollableTabsView from './ScrollableTabsView';
 import IndexAwareTab from './IndexAwareTab';
 import useTabCoordinates from './useTabCoordinates';
+import useTabInnerContentsWidth from './useTabInnerContentsWidth';
 import useIndexStore from './useIndexStore';
 import InternalContext from './InternalContext';
 import { isEveryTabCoordinatesDefined } from './utils';
@@ -80,10 +81,10 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
     const styles = useStyles();
 
     const [outerCoordinates, updateCoordinate] = useTabCoordinates(children);
-    const [innerCoordinates, updateInnerCoordinate] = useTabCoordinates(children);
+    const [innerContentsWidthList, updateInnerContentsWidth] = useTabInnerContentsWidth(children);
 
     const canRenderIndicator = indicatorSize === 'fit-content'
-        ? isEveryTabCoordinatesDefined(innerCoordinates, children)
+        ? isEveryTabCoordinatesDefined(innerContentsWidthList, children)
         : isEveryTabCoordinatesDefined(outerCoordinates, children);
 
     const indexStore = useIndexStore(sharedIndex);
@@ -93,15 +94,19 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
             return outerCoordinates;
         }
 
-        return innerCoordinates.map((coordinate, idx) => {
-            const { x1, x2 } = coordinate;
-            const { x1: outerX1 } = outerCoordinates[idx];
+        return innerContentsWidthList.map((innerContentWidth, idx) => {
+            const { x1: outerX1, x2: outerX2 } = outerCoordinates[idx];
+
+            const tabWidth = outerX2 - outerX1;
+            const distanceFromParent = (tabWidth - innerContentWidth) / 2;
+            const indicatorStartCoordinate = outerX1 + distanceFromParent;
+
             return {
-                x1: x1 + outerX1,
-                x2: x2 + outerX1,
-            }
+                x1: indicatorStartCoordinate,
+                x2: indicatorStartCoordinate + innerContentWidth,
+            };
         });
-    }, [outerCoordinates, innerCoordinates, variant]);
+    }, [outerCoordinates, innerContentsWidthList, variant]);
 
     useEffect(() => {
         return indexStore.subscribe(newIndex => {
@@ -116,9 +121,9 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
         }
 
         const onTabInnerLayout = (event: LayoutChangeEvent) => {
-            const { x, width } = event.nativeEvent.layout;
+            const { width } = event.nativeEvent.layout;
 
-            updateInnerCoordinate(index, x, width);
+            updateInnerContentsWidth(index, width);
         };
 
         const onLayout = (event: LayoutChangeEvent) => {

package/src/Tabs/useTabInnerContentsWidth.ts

@@ -0,0 +1,26 @@
+import React, { useRef, useState } from 'react';
+import { isEveryTabCoordinatesDefined } from './utils';
+
+export interface UpdateInnerContentsWidth {
+    (index: number, width: number): void;
+}
+
+const useTabInnerContentsWidth = (tabElements: React.ReactNode): [number[], UpdateInnerContentsWidth] => {
+    const [innerContentsWidthList, setInnerContentsWidth] = useState<number[]>([]);
+
+    const cacheRef = useRef<number[]>([]);
+
+    const updateInnerContentsWidth: UpdateInnerContentsWidth = (index, width) => {
+        cacheRef.current[index] = width;
+
+        if (isEveryTabCoordinatesDefined(cacheRef.current, tabElements)) {
+            setInnerContentsWidth([...cacheRef.current]);
+
+            cacheRef.current = [];
+        }
+    };
+
+    return [innerContentsWidthList, updateInnerContentsWidth];
+};
+
+export default useTabInnerContentsWidth;

package/src/Tabs/utils.ts

@@ -4,7 +4,7 @@ import { isEveryDefined } from '@fountain-ui/utils';
 import type TabCoordinate from './TabCoordinate';
 
 
-export function isEveryTabCoordinatesDefined(coordinates: TabCoordinate[], tabElements: ReactNode): boolean {
+export function isEveryTabCoordinatesDefined(coordinates: (TabCoordinate | number)[], tabElements: ReactNode): boolean {
     const numberOfTabs = Children.count(tabElements);
     const numberOfCoordinates = coordinates.length;