@fountain-ui/core 2.0.0-beta.34 → 2.0.0-beta.36

package/build/commonjs/Chip/Chip.js

@@ -19,7 +19,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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 ICON_SIZE = 16;
+const ICON_SIZE = 20;
 
 const useStyles = function () {
   const theme = (0, _styles.useTheme)();
@@ -28,10 +28,10 @@ const useStyles = function () {
       alignItems: 'center',
       borderRadius: 20,
       flexDirection: 'row',
-      height: 32,
+      height: 36,
       justifyContent: 'center',
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(2)
+      paddingLeft: theme.spacing(4),
+      paddingRight: theme.spacing(4)
     }
   };
 };

package/build/commonjs/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"names":["ICON_SIZE","useStyles","theme","useTheme","root","alignItems","borderRadius","flexDirection","height","justifyContent","paddingLeft","spacing","paddingRight","Chip","props","children","endIcon","endIconProp","numberOfLines","onPress","startIcon","startIconProp","style","styleProp","variant","otherProps","styles","fontColor","palette","tertiary","main","primary","variantStyleMap","outlined","backgroundColor","paper","default","borderColor","border","borderWidth","filled","grey","bold","chipStyle","css","fontStyle","createFontStyle","selector","typo","subtitle2","color","textMarginSize","textMarginStyle","marginLeft","marginRight","undefined","textStyle","textAlign","iconProps","width","fill","cloneElementSafely"],"sources":["Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport ButtonBase from '../ButtonBase';\nimport type ChipProps from './ChipProps';\n\ntype ChipStyles = NamedStylesStringUnion<'root'>;\n\nconst ICON_SIZE = 16;\n\nconst useStyles: UseStyles<ChipStyles> = function (): ChipStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            borderRadius: 20,\n            flexDirection: 'row',\n            height: 32,\n            justifyContent: 'center',\n            paddingLeft: theme.spacing(2),\n            paddingRight: theme.spacing(2),\n        },\n    };\n};\n\nexport default function Chip(props: ChipProps) {\n    const {\n        children,\n        endIcon: endIconProp,\n        numberOfLines,\n        onPress,\n        startIcon: startIconProp,\n        style: styleProp,\n        variant = 'outlined',\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n    const styles = useStyles();\n\n    const fontColor = variant === 'outlined'\n        ? theme.palette.tertiary.main\n        : theme.palette.primary.main;\n\n    const variantStyleMap = {\n        outlined: {\n            backgroundColor: theme.palette.paper.default,\n            borderColor: theme.palette.border,\n            borderWidth: 2,\n        },\n        filled: {\n            backgroundColor: theme.palette.paper.grey,\n        },\n        bold: {\n            backgroundColor: theme.palette.paper.grey,\n            borderColor: theme.palette.primary.main,\n            borderWidth: 2,\n        },\n    };\n\n    const chipStyle = css([\n        styles.root,\n        variantStyleMap[variant],\n        styleProp,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.subtitle2,\n        color: fontColor,\n    });\n\n    const textMarginSize = theme.spacing(1);\n    const textMarginStyle = startIconProp\n        ? { marginLeft: textMarginSize }\n        : endIconProp\n            ? { marginRight: textMarginSize }\n            : undefined;\n\n    const textStyle = css([\n        fontStyle,\n        textMarginStyle,\n        { textAlign: 'center' },\n    ]);\n\n    const iconProps = {\n        width: ICON_SIZE,\n        height: ICON_SIZE,\n        fill: fontColor,\n    };\n\n    const startIcon = cloneElementSafely(startIconProp, iconProps);\n    const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n    return (\n        <ButtonBase\n            onPress={onPress}\n            style={chipStyle}\n            {...otherProps}\n        >\n            {startIcon}\n\n            <Text\n                children={children}\n                numberOfLines={numberOfLines}\n                style={textStyle}\n            />\n\n            {endIcon}\n        </ButtonBase>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"names":["ICON_SIZE","useStyles","theme","useTheme","root","alignItems","borderRadius","flexDirection","height","justifyContent","paddingLeft","spacing","paddingRight","Chip","props","children","endIcon","endIconProp","numberOfLines","onPress","startIcon","startIconProp","style","styleProp","variant","otherProps","styles","fontColor","palette","tertiary","main","primary","variantStyleMap","outlined","backgroundColor","paper","default","borderColor","border","borderWidth","filled","grey","bold","chipStyle","css","fontStyle","createFontStyle","selector","typo","subtitle2","color","textMarginSize","textMarginStyle","marginLeft","marginRight","undefined","textStyle","textAlign","iconProps","width","fill","cloneElementSafely"],"sources":["Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport ButtonBase from '../ButtonBase';\nimport type ChipProps from './ChipProps';\n\ntype ChipStyles = NamedStylesStringUnion<'root'>;\n\nconst ICON_SIZE = 20;\n\nconst useStyles: UseStyles<ChipStyles> = function (): ChipStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            borderRadius: 20,\n            flexDirection: 'row',\n            height: 36,\n            justifyContent: 'center',\n            paddingLeft: theme.spacing(4),\n            paddingRight: theme.spacing(4),\n        },\n    };\n};\n\nexport default function Chip(props: ChipProps) {\n    const {\n        children,\n        endIcon: endIconProp,\n        numberOfLines,\n        onPress,\n        startIcon: startIconProp,\n        style: styleProp,\n        variant = 'outlined',\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n    const styles = useStyles();\n\n    const fontColor = variant === 'outlined'\n        ? theme.palette.tertiary.main\n        : theme.palette.primary.main;\n\n    const variantStyleMap = {\n        outlined: {\n            backgroundColor: theme.palette.paper.default,\n            borderColor: theme.palette.border,\n            borderWidth: 2,\n        },\n        filled: {\n            backgroundColor: theme.palette.paper.grey,\n        },\n        bold: {\n            backgroundColor: theme.palette.paper.grey,\n            borderColor: theme.palette.primary.main,\n            borderWidth: 2,\n        },\n    };\n\n    const chipStyle = css([\n        styles.root,\n        variantStyleMap[variant],\n        styleProp,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.subtitle2,\n        color: fontColor,\n    });\n\n    const textMarginSize = theme.spacing(1);\n    const textMarginStyle = startIconProp\n        ? { marginLeft: textMarginSize }\n        : endIconProp\n            ? { marginRight: textMarginSize }\n            : undefined;\n\n    const textStyle = css([\n        fontStyle,\n        textMarginStyle,\n        { textAlign: 'center' },\n    ]);\n\n    const iconProps = {\n        width: ICON_SIZE,\n        height: ICON_SIZE,\n        fill: fontColor,\n    };\n\n    const startIcon = cloneElementSafely(startIconProp, iconProps);\n    const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n    return (\n        <ButtonBase\n            onPress={onPress}\n            style={chipStyle}\n            {...otherProps}\n        >\n            {startIcon}\n\n            <Text\n                children={children}\n                numberOfLines={numberOfLines}\n                style={textStyle}\n            />\n\n            {endIcon}\n        </ButtonBase>\n    );\n}\n"],"mappings":"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"}

package/build/commonjs/Tooltip/Tooltip.js

@@ -83,14 +83,16 @@ function Tooltip(props) {
     backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,
     borderRadius: theme.shape.roundness,
     flexDirection: 'row',
-    padding: theme.spacing(2)
+    padding: theme.spacing(2),
+    width: '100%'
   };
   const fontStyle = (0, _styles.createFontStyle)(theme, {
     selector: typo => typo.caption2,
     color: theme.palette.primary.contrastTextColor
   });
   const textStyle = (0, _styles.css)([fontStyle, {
-    marginRight: theme.spacing(2)
+    marginRight: theme.spacing(2),
+    flexShrink: 1
   }]);
   const arrowStyle = (0, _styles.css)({ ...(arrowLayout && {
       [arrowLayout.placement]: arrowLayout.offset

package/build/commonjs/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"names":["DEFAULT_OPACITY","initialLayout","width","height","x","y","ANIMATION_CONFIG","duration","Tooltip","props","arrowLayout","children","left","onClose","placement","right","numberOfTitleLines","style","title","tooltipStyle","verticalOffset","visible","theme","useTheme","layout","setLayout","useState","scale","useSharedValue","animatedStyle","useAnimatedStyle","transform","value","r","g","b","rgb","palette","primary","main","totalVerticalOffset","tooltipLayoutStyle","alignItems","bottom","undefined","position","top","zIndex","tooltip","overflow","useEffect","nextScaleValue","withTiming","touchableStyle","backgroundColor","borderRadius","shape","roundness","flexDirection","padding","spacing","fontStyle","createFontStyle","selector","typo","caption2","color","contrastTextColor","textStyle","css","marginRight","arrowStyle","offset","buttonElem","arrowElem","event","nativeEvent"],"sources":["Tooltip.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Text, View, ViewProps } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { rgb } from '@fountain-ui/utils';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { Close as CloseIcon } from '../internal/icons';\nimport type TooltipProps from './TooltipProps';\nimport UpArrow from './UpArrow';\n\nconst DEFAULT_OPACITY = 0.8;\nconst initialLayout = { width: 0, height: 0, x: 0, y: 0 };\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };\n\nexport default function Tooltip(props: TooltipProps) {\n    const {\n        arrowLayout,\n        children,\n        left,\n        onClose,\n        placement = 'top',\n        right,\n        numberOfTitleLines = 1,\n        style,\n        title,\n        tooltipStyle,\n        verticalOffset = 4,\n        visible = false,\n    } = props;\n\n    const theme = useTheme();\n\n    const [layout, setLayout] = useState(initialLayout);\n\n    const scale = useSharedValue(0);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ scale: scale.value }],\n    }), []);\n\n    const [r, g, b] = rgb(theme.palette.primary.main);\n\n    const totalVerticalOffset = -(layout.height + verticalOffset);\n    const tooltipLayoutStyle: ViewProps['style'] = {\n        alignItems: arrowLayout?.placement === 'left'\n            ? 'flex-start'\n            : arrowLayout?.placement === 'right'\n                ? 'flex-end'\n                : 'center',\n        bottom: placement === 'bottom' ? totalVerticalOffset : undefined,\n        left,\n        position: 'absolute',\n        right,\n        top: placement === 'top' ? totalVerticalOffset : undefined,\n        zIndex: theme.zIndex.tooltip,\n        height: visible ? undefined : 0,\n        overflow: visible ? undefined : 'hidden',\n    };\n\n    useEffect(() => {\n        const nextScaleValue = visible ? 1 : 0;\n\n        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);\n    }, [visible]);\n\n    const touchableStyle: ViewProps['style'] = {\n        alignItems: 'center',\n        backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,\n        borderRadius: theme.shape.roundness,\n        flexDirection: 'row',\n        padding: theme.spacing(2),\n    };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2,\n        color: theme.palette.primary.contrastTextColor,\n    });\n\n    const textStyle = css([\n        fontStyle,\n        { marginRight: theme.spacing(2) },\n    ]);\n\n    const arrowStyle = css({\n        ...(arrowLayout && {\n            [arrowLayout.placement]: arrowLayout.offset,\n        }),\n    });\n\n    const buttonElem = (\n        <ButtonBase\n            pressEffect={'none'}\n            onPress={onClose}\n        >\n            <View style={css(touchableStyle)}>\n                <Text\n                    children={title}\n                    // TODO: Should we provide text prop customization?\n                    numberOfLines={numberOfTitleLines}\n                    style={textStyle}\n                />\n                <CloseIcon\n                    fill={theme.palette.primary.contrastTextColor}\n                    width={20}\n                    height={20}\n                />\n            </View>\n        </ButtonBase>\n    );\n\n    const arrowElem = (\n        <View style={arrowStyle}>\n            <UpArrow\n                upsideDown={placement === 'top'}\n                fill={theme.palette.primary.main}\n                opacity={DEFAULT_OPACITY}\n            />\n        </View>\n    );\n\n    return (\n        <View style={style}>\n            {children}\n\n            <Animated.View\n                onLayout={(event) => setLayout(event.nativeEvent.layout)}\n                style={[\n                    animatedStyle,\n                    tooltipLayoutStyle,\n                    tooltipStyle,\n                ]}\n            >\n                {placement === 'top' ? (\n                    <React.Fragment>\n                        {buttonElem}\n                        {arrowElem}\n                    </React.Fragment>\n                ) : (\n                    <React.Fragment>\n                        {arrowElem}\n                        {buttonElem}\n                    </React.Fragment>\n                )}\n            </Animated.View>\n        </View>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["DEFAULT_OPACITY","initialLayout","width","height","x","y","ANIMATION_CONFIG","duration","Tooltip","props","arrowLayout","children","left","onClose","placement","right","numberOfTitleLines","style","title","tooltipStyle","verticalOffset","visible","theme","useTheme","layout","setLayout","useState","scale","useSharedValue","animatedStyle","useAnimatedStyle","transform","value","r","g","b","rgb","palette","primary","main","totalVerticalOffset","tooltipLayoutStyle","alignItems","bottom","undefined","position","top","zIndex","tooltip","overflow","useEffect","nextScaleValue","withTiming","touchableStyle","backgroundColor","borderRadius","shape","roundness","flexDirection","padding","spacing","fontStyle","createFontStyle","selector","typo","caption2","color","contrastTextColor","textStyle","css","marginRight","flexShrink","arrowStyle","offset","buttonElem","arrowElem","event","nativeEvent"],"sources":["Tooltip.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Text, View, ViewProps } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { rgb } from '@fountain-ui/utils';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { Close as CloseIcon } from '../internal/icons';\nimport type TooltipProps from './TooltipProps';\nimport UpArrow from './UpArrow';\n\nconst DEFAULT_OPACITY = 0.8;\nconst initialLayout = { width: 0, height: 0, x: 0, y: 0 };\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };\n\nexport default function Tooltip(props: TooltipProps) {\n    const {\n        arrowLayout,\n        children,\n        left,\n        onClose,\n        placement = 'top',\n        right,\n        numberOfTitleLines = 1,\n        style,\n        title,\n        tooltipStyle,\n        verticalOffset = 4,\n        visible = false,\n    } = props;\n\n    const theme = useTheme();\n\n    const [layout, setLayout] = useState(initialLayout);\n\n    const scale = useSharedValue(0);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ scale: scale.value }],\n    }), []);\n\n    const [r, g, b] = rgb(theme.palette.primary.main);\n\n    const totalVerticalOffset = -(layout.height + verticalOffset);\n    const tooltipLayoutStyle: ViewProps['style'] = {\n        alignItems: arrowLayout?.placement === 'left'\n            ? 'flex-start'\n            : arrowLayout?.placement === 'right'\n                ? 'flex-end'\n                : 'center',\n        bottom: placement === 'bottom' ? totalVerticalOffset : undefined,\n        left,\n        position: 'absolute',\n        right,\n        top: placement === 'top' ? totalVerticalOffset : undefined,\n        zIndex: theme.zIndex.tooltip,\n        height: visible ? undefined : 0,\n        overflow: visible ? undefined : 'hidden',\n    };\n\n    useEffect(() => {\n        const nextScaleValue = visible ? 1 : 0;\n\n        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);\n    }, [visible]);\n\n    const touchableStyle: ViewProps['style'] = {\n        alignItems: 'center',\n        backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,\n        borderRadius: theme.shape.roundness,\n        flexDirection: 'row',\n        padding: theme.spacing(2),\n        width: '100%',\n    };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2,\n        color: theme.palette.primary.contrastTextColor,\n    });\n\n    const textStyle = css([\n        fontStyle,\n        {\n            marginRight: theme.spacing(2),\n            flexShrink: 1,\n        },\n    ]);\n\n    const arrowStyle = css({\n        ...(arrowLayout && {\n            [arrowLayout.placement]: arrowLayout.offset,\n        }),\n    });\n\n    const buttonElem = (\n        <ButtonBase\n            pressEffect={'none'}\n            onPress={onClose}\n        >\n            <View style={css(touchableStyle)}>\n                <Text\n                    children={title}\n                    // TODO: Should we provide text prop customization?\n                    numberOfLines={numberOfTitleLines}\n                    style={textStyle}\n                />\n                <CloseIcon\n                    fill={theme.palette.primary.contrastTextColor}\n                    width={20}\n                    height={20}\n                />\n            </View>\n        </ButtonBase>\n    );\n\n    const arrowElem = (\n        <View style={arrowStyle}>\n            <UpArrow\n                upsideDown={placement === 'top'}\n                fill={theme.palette.primary.main}\n                opacity={DEFAULT_OPACITY}\n            />\n        </View>\n    );\n\n    return (\n        <View style={style}>\n            {children}\n\n            <Animated.View\n                onLayout={(event) => setLayout(event.nativeEvent.layout)}\n                style={[\n                    animatedStyle,\n                    tooltipLayoutStyle,\n                    tooltipStyle,\n                ]}\n            >\n                {placement === 'top' ? (\n                    <React.Fragment>\n                        {buttonElem}\n                        {arrowElem}\n                    </React.Fragment>\n                ) : (\n                    <React.Fragment>\n                        {arrowElem}\n                        {buttonElem}\n                    </React.Fragment>\n                )}\n            </Animated.View>\n        </View>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/hooks/useCollapsibleAppBar.js

@@ -22,7 +22,8 @@ var _useAppbarStyles = _interopRequireDefault(require("./useAppbarStyles"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const defaultOptions = {
-  keyboardDismissMode: 'none'
+  keyboardDismissMode: 'none',
+  supportsReverseScroll: true
 };
 const ANIMATION_CONFIG = {
   duration: 100
@@ -32,7 +33,8 @@ const SUPPORTS_DRAG_DETECTION = _reactNative.Platform.OS !== 'web';
 function useCollapsibleAppBar() {
   let userOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultOptions;
   const {
-    keyboardDismissMode
+    keyboardDismissMode,
+    supportsReverseScroll
   } = { ...defaultOptions,
     ...userOptions
   };
@@ -114,7 +116,6 @@ function useCollapsibleAppBar() {
     },
     onScroll: event => {
       const offsetY = event.contentOffset.y;
-      const ty = translateY.value;
       const maxTy = maxTranslateY.value;
 
       if (SUPPORTS_DRAG_DETECTION) {
@@ -122,16 +123,13 @@ function useCollapsibleAppBar() {
         translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);
         overlapped.value = offsetY + translateY.value > 0;
       } else {
-        if (offsetY > -maxTy) {
-          if (ty === 0) {
-            translateY.value = (0, _reactNativeReanimated.withTiming)(Math.min(Math.max(-offsetY, maxTy), 0), ANIMATION_CONFIG);
-          }
-        } else {
-          if (ty === maxTy) {
-            translateY.value = (0, _reactNativeReanimated.withTiming)(0, ANIMATION_CONFIG);
-          }
-        }
-
+        const minOffsetY = -maxTy;
+        const maxOffsetY = event.contentSize.height - event.layoutMeasurement.height;
+        const safeOffsetY = Math.min(Math.max(offsetY, minOffsetY), maxOffsetY);
+        const safeLastOffsetY = Math.min(Math.max(lastOffsetY.value, minOffsetY), maxOffsetY);
+        const dy = safeOffsetY - safeLastOffsetY;
+        const newTranslateY = supportsReverseScroll ? dy === 0 ? translateY.value : dy > 0 ? maxTy : 0 : safeLastOffsetY === minOffsetY ? 0 : maxTy;
+        translateY.value = (0, _reactNativeReanimated.withTiming)(newTranslateY, ANIMATION_CONFIG);
         overlapped.value = offsetY > 0;
         lastOffsetY.value = offsetY;
       }

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

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

package/build/module/Chip/Chip.js

@@ -5,7 +5,7 @@ import { Text } from 'react-native';
 import { createFontStyle, css, useTheme } from '../styles';
 import { cloneElementSafely } from '../utils';
 import ButtonBase from '../ButtonBase';
-const ICON_SIZE = 16;
+const ICON_SIZE = 20;
 
 const useStyles = function () {
   const theme = useTheme();
@@ -14,10 +14,10 @@ const useStyles = function () {
       alignItems: 'center',
       borderRadius: 20,
       flexDirection: 'row',
-      height: 32,
+      height: 36,
       justifyContent: 'center',
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(2)
+      paddingLeft: theme.spacing(4),
+      paddingRight: theme.spacing(4)
     }
   };
 };

package/build/module/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","createFontStyle","css","useTheme","cloneElementSafely","ButtonBase","ICON_SIZE","useStyles","theme","root","alignItems","borderRadius","flexDirection","height","justifyContent","paddingLeft","spacing","paddingRight","Chip","props","children","endIcon","endIconProp","numberOfLines","onPress","startIcon","startIconProp","style","styleProp","variant","otherProps","styles","fontColor","palette","tertiary","main","primary","variantStyleMap","outlined","backgroundColor","paper","default","borderColor","border","borderWidth","filled","grey","bold","chipStyle","fontStyle","selector","typo","subtitle2","color","textMarginSize","textMarginStyle","marginLeft","marginRight","undefined","textStyle","textAlign","iconProps","width","fill"],"sources":["Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport ButtonBase from '../ButtonBase';\nimport type ChipProps from './ChipProps';\n\ntype ChipStyles = NamedStylesStringUnion<'root'>;\n\nconst ICON_SIZE = 16;\n\nconst useStyles: UseStyles<ChipStyles> = function (): ChipStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            borderRadius: 20,\n            flexDirection: 'row',\n            height: 32,\n            justifyContent: 'center',\n            paddingLeft: theme.spacing(2),\n            paddingRight: theme.spacing(2),\n        },\n    };\n};\n\nexport default function Chip(props: ChipProps) {\n    const {\n        children,\n        endIcon: endIconProp,\n        numberOfLines,\n        onPress,\n        startIcon: startIconProp,\n        style: styleProp,\n        variant = 'outlined',\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n    const styles = useStyles();\n\n    const fontColor = variant === 'outlined'\n        ? theme.palette.tertiary.main\n        : theme.palette.primary.main;\n\n    const variantStyleMap = {\n        outlined: {\n            backgroundColor: theme.palette.paper.default,\n            borderColor: theme.palette.border,\n            borderWidth: 2,\n        },\n        filled: {\n            backgroundColor: theme.palette.paper.grey,\n        },\n        bold: {\n            backgroundColor: theme.palette.paper.grey,\n            borderColor: theme.palette.primary.main,\n            borderWidth: 2,\n        },\n    };\n\n    const chipStyle = css([\n        styles.root,\n        variantStyleMap[variant],\n        styleProp,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.subtitle2,\n        color: fontColor,\n    });\n\n    const textMarginSize = theme.spacing(1);\n    const textMarginStyle = startIconProp\n        ? { marginLeft: textMarginSize }\n        : endIconProp\n            ? { marginRight: textMarginSize }\n            : undefined;\n\n    const textStyle = css([\n        fontStyle,\n        textMarginStyle,\n        { textAlign: 'center' },\n    ]);\n\n    const iconProps = {\n        width: ICON_SIZE,\n        height: ICON_SIZE,\n        fill: fontColor,\n    };\n\n    const startIcon = cloneElementSafely(startIconProp, iconProps);\n    const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n    return (\n        <ButtonBase\n            onPress={onPress}\n            style={chipStyle}\n            {...otherProps}\n        >\n            {startIcon}\n\n            <Text\n                children={children}\n                numberOfLines={numberOfLines}\n                style={textStyle}\n            />\n\n            {endIcon}\n        </ButtonBase>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"names":["React","Text","createFontStyle","css","useTheme","cloneElementSafely","ButtonBase","ICON_SIZE","useStyles","theme","root","alignItems","borderRadius","flexDirection","height","justifyContent","paddingLeft","spacing","paddingRight","Chip","props","children","endIcon","endIconProp","numberOfLines","onPress","startIcon","startIconProp","style","styleProp","variant","otherProps","styles","fontColor","palette","tertiary","main","primary","variantStyleMap","outlined","backgroundColor","paper","default","borderColor","border","borderWidth","filled","grey","bold","chipStyle","fontStyle","selector","typo","subtitle2","color","textMarginSize","textMarginStyle","marginLeft","marginRight","undefined","textStyle","textAlign","iconProps","width","fill"],"sources":["Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport ButtonBase from '../ButtonBase';\nimport type ChipProps from './ChipProps';\n\ntype ChipStyles = NamedStylesStringUnion<'root'>;\n\nconst ICON_SIZE = 20;\n\nconst useStyles: UseStyles<ChipStyles> = function (): ChipStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            borderRadius: 20,\n            flexDirection: 'row',\n            height: 36,\n            justifyContent: 'center',\n            paddingLeft: theme.spacing(4),\n            paddingRight: theme.spacing(4),\n        },\n    };\n};\n\nexport default function Chip(props: ChipProps) {\n    const {\n        children,\n        endIcon: endIconProp,\n        numberOfLines,\n        onPress,\n        startIcon: startIconProp,\n        style: styleProp,\n        variant = 'outlined',\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n    const styles = useStyles();\n\n    const fontColor = variant === 'outlined'\n        ? theme.palette.tertiary.main\n        : theme.palette.primary.main;\n\n    const variantStyleMap = {\n        outlined: {\n            backgroundColor: theme.palette.paper.default,\n            borderColor: theme.palette.border,\n            borderWidth: 2,\n        },\n        filled: {\n            backgroundColor: theme.palette.paper.grey,\n        },\n        bold: {\n            backgroundColor: theme.palette.paper.grey,\n            borderColor: theme.palette.primary.main,\n            borderWidth: 2,\n        },\n    };\n\n    const chipStyle = css([\n        styles.root,\n        variantStyleMap[variant],\n        styleProp,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.subtitle2,\n        color: fontColor,\n    });\n\n    const textMarginSize = theme.spacing(1);\n    const textMarginStyle = startIconProp\n        ? { marginLeft: textMarginSize }\n        : endIconProp\n            ? { marginRight: textMarginSize }\n            : undefined;\n\n    const textStyle = css([\n        fontStyle,\n        textMarginStyle,\n        { textAlign: 'center' },\n    ]);\n\n    const iconProps = {\n        width: ICON_SIZE,\n        height: ICON_SIZE,\n        fill: fontColor,\n    };\n\n    const startIcon = cloneElementSafely(startIconProp, iconProps);\n    const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n    return (\n        <ButtonBase\n            onPress={onPress}\n            style={chipStyle}\n            {...otherProps}\n        >\n            {startIcon}\n\n            <Text\n                children={children}\n                numberOfLines={numberOfLines}\n                style={textStyle}\n            />\n\n            {endIcon}\n        </ButtonBase>\n    );\n}\n"],"mappings":"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"}

package/build/module/Tooltip/Tooltip.js

@@ -61,14 +61,16 @@ export default function Tooltip(props) {
     backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,
     borderRadius: theme.shape.roundness,
     flexDirection: 'row',
-    padding: theme.spacing(2)
+    padding: theme.spacing(2),
+    width: '100%'
   };
   const fontStyle = createFontStyle(theme, {
     selector: typo => typo.caption2,
     color: theme.palette.primary.contrastTextColor
   });
   const textStyle = css([fontStyle, {
-    marginRight: theme.spacing(2)
+    marginRight: theme.spacing(2),
+    flexShrink: 1
   }]);
   const arrowStyle = css({ ...(arrowLayout && {
       [arrowLayout.placement]: arrowLayout.offset

package/build/module/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","Text","View","Animated","useAnimatedStyle","useSharedValue","withTiming","rgb","ButtonBase","createFontStyle","css","useTheme","Close","CloseIcon","UpArrow","DEFAULT_OPACITY","initialLayout","width","height","x","y","ANIMATION_CONFIG","duration","Tooltip","props","arrowLayout","children","left","onClose","placement","right","numberOfTitleLines","style","title","tooltipStyle","verticalOffset","visible","theme","layout","setLayout","scale","animatedStyle","transform","value","r","g","b","palette","primary","main","totalVerticalOffset","tooltipLayoutStyle","alignItems","bottom","undefined","position","top","zIndex","tooltip","overflow","nextScaleValue","touchableStyle","backgroundColor","borderRadius","shape","roundness","flexDirection","padding","spacing","fontStyle","selector","typo","caption2","color","contrastTextColor","textStyle","marginRight","arrowStyle","offset","buttonElem","arrowElem","event","nativeEvent"],"sources":["Tooltip.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Text, View, ViewProps } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { rgb } from '@fountain-ui/utils';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { Close as CloseIcon } from '../internal/icons';\nimport type TooltipProps from './TooltipProps';\nimport UpArrow from './UpArrow';\n\nconst DEFAULT_OPACITY = 0.8;\nconst initialLayout = { width: 0, height: 0, x: 0, y: 0 };\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };\n\nexport default function Tooltip(props: TooltipProps) {\n    const {\n        arrowLayout,\n        children,\n        left,\n        onClose,\n        placement = 'top',\n        right,\n        numberOfTitleLines = 1,\n        style,\n        title,\n        tooltipStyle,\n        verticalOffset = 4,\n        visible = false,\n    } = props;\n\n    const theme = useTheme();\n\n    const [layout, setLayout] = useState(initialLayout);\n\n    const scale = useSharedValue(0);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ scale: scale.value }],\n    }), []);\n\n    const [r, g, b] = rgb(theme.palette.primary.main);\n\n    const totalVerticalOffset = -(layout.height + verticalOffset);\n    const tooltipLayoutStyle: ViewProps['style'] = {\n        alignItems: arrowLayout?.placement === 'left'\n            ? 'flex-start'\n            : arrowLayout?.placement === 'right'\n                ? 'flex-end'\n                : 'center',\n        bottom: placement === 'bottom' ? totalVerticalOffset : undefined,\n        left,\n        position: 'absolute',\n        right,\n        top: placement === 'top' ? totalVerticalOffset : undefined,\n        zIndex: theme.zIndex.tooltip,\n        height: visible ? undefined : 0,\n        overflow: visible ? undefined : 'hidden',\n    };\n\n    useEffect(() => {\n        const nextScaleValue = visible ? 1 : 0;\n\n        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);\n    }, [visible]);\n\n    const touchableStyle: ViewProps['style'] = {\n        alignItems: 'center',\n        backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,\n        borderRadius: theme.shape.roundness,\n        flexDirection: 'row',\n        padding: theme.spacing(2),\n    };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2,\n        color: theme.palette.primary.contrastTextColor,\n    });\n\n    const textStyle = css([\n        fontStyle,\n        { marginRight: theme.spacing(2) },\n    ]);\n\n    const arrowStyle = css({\n        ...(arrowLayout && {\n            [arrowLayout.placement]: arrowLayout.offset,\n        }),\n    });\n\n    const buttonElem = (\n        <ButtonBase\n            pressEffect={'none'}\n            onPress={onClose}\n        >\n            <View style={css(touchableStyle)}>\n                <Text\n                    children={title}\n                    // TODO: Should we provide text prop customization?\n                    numberOfLines={numberOfTitleLines}\n                    style={textStyle}\n                />\n                <CloseIcon\n                    fill={theme.palette.primary.contrastTextColor}\n                    width={20}\n                    height={20}\n                />\n            </View>\n        </ButtonBase>\n    );\n\n    const arrowElem = (\n        <View style={arrowStyle}>\n            <UpArrow\n                upsideDown={placement === 'top'}\n                fill={theme.palette.primary.main}\n                opacity={DEFAULT_OPACITY}\n            />\n        </View>\n    );\n\n    return (\n        <View style={style}>\n            {children}\n\n            <Animated.View\n                onLayout={(event) => setLayout(event.nativeEvent.layout)}\n                style={[\n                    animatedStyle,\n                    tooltipLayoutStyle,\n                    tooltipStyle,\n                ]}\n            >\n                {placement === 'top' ? (\n                    <React.Fragment>\n                        {buttonElem}\n                        {arrowElem}\n                    </React.Fragment>\n                ) : (\n                    <React.Fragment>\n                        {arrowElem}\n                        {buttonElem}\n                    </React.Fragment>\n                )}\n            </Animated.View>\n        </View>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","useEffect","useState","Text","View","Animated","useAnimatedStyle","useSharedValue","withTiming","rgb","ButtonBase","createFontStyle","css","useTheme","Close","CloseIcon","UpArrow","DEFAULT_OPACITY","initialLayout","width","height","x","y","ANIMATION_CONFIG","duration","Tooltip","props","arrowLayout","children","left","onClose","placement","right","numberOfTitleLines","style","title","tooltipStyle","verticalOffset","visible","theme","layout","setLayout","scale","animatedStyle","transform","value","r","g","b","palette","primary","main","totalVerticalOffset","tooltipLayoutStyle","alignItems","bottom","undefined","position","top","zIndex","tooltip","overflow","nextScaleValue","touchableStyle","backgroundColor","borderRadius","shape","roundness","flexDirection","padding","spacing","fontStyle","selector","typo","caption2","color","contrastTextColor","textStyle","marginRight","flexShrink","arrowStyle","offset","buttonElem","arrowElem","event","nativeEvent"],"sources":["Tooltip.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Text, View, ViewProps } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { rgb } from '@fountain-ui/utils';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { Close as CloseIcon } from '../internal/icons';\nimport type TooltipProps from './TooltipProps';\nimport UpArrow from './UpArrow';\n\nconst DEFAULT_OPACITY = 0.8;\nconst initialLayout = { width: 0, height: 0, x: 0, y: 0 };\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };\n\nexport default function Tooltip(props: TooltipProps) {\n    const {\n        arrowLayout,\n        children,\n        left,\n        onClose,\n        placement = 'top',\n        right,\n        numberOfTitleLines = 1,\n        style,\n        title,\n        tooltipStyle,\n        verticalOffset = 4,\n        visible = false,\n    } = props;\n\n    const theme = useTheme();\n\n    const [layout, setLayout] = useState(initialLayout);\n\n    const scale = useSharedValue(0);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ scale: scale.value }],\n    }), []);\n\n    const [r, g, b] = rgb(theme.palette.primary.main);\n\n    const totalVerticalOffset = -(layout.height + verticalOffset);\n    const tooltipLayoutStyle: ViewProps['style'] = {\n        alignItems: arrowLayout?.placement === 'left'\n            ? 'flex-start'\n            : arrowLayout?.placement === 'right'\n                ? 'flex-end'\n                : 'center',\n        bottom: placement === 'bottom' ? totalVerticalOffset : undefined,\n        left,\n        position: 'absolute',\n        right,\n        top: placement === 'top' ? totalVerticalOffset : undefined,\n        zIndex: theme.zIndex.tooltip,\n        height: visible ? undefined : 0,\n        overflow: visible ? undefined : 'hidden',\n    };\n\n    useEffect(() => {\n        const nextScaleValue = visible ? 1 : 0;\n\n        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);\n    }, [visible]);\n\n    const touchableStyle: ViewProps['style'] = {\n        alignItems: 'center',\n        backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,\n        borderRadius: theme.shape.roundness,\n        flexDirection: 'row',\n        padding: theme.spacing(2),\n        width: '100%',\n    };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2,\n        color: theme.palette.primary.contrastTextColor,\n    });\n\n    const textStyle = css([\n        fontStyle,\n        {\n            marginRight: theme.spacing(2),\n            flexShrink: 1,\n        },\n    ]);\n\n    const arrowStyle = css({\n        ...(arrowLayout && {\n            [arrowLayout.placement]: arrowLayout.offset,\n        }),\n    });\n\n    const buttonElem = (\n        <ButtonBase\n            pressEffect={'none'}\n            onPress={onClose}\n        >\n            <View style={css(touchableStyle)}>\n                <Text\n                    children={title}\n                    // TODO: Should we provide text prop customization?\n                    numberOfLines={numberOfTitleLines}\n                    style={textStyle}\n                />\n                <CloseIcon\n                    fill={theme.palette.primary.contrastTextColor}\n                    width={20}\n                    height={20}\n                />\n            </View>\n        </ButtonBase>\n    );\n\n    const arrowElem = (\n        <View style={arrowStyle}>\n            <UpArrow\n                upsideDown={placement === 'top'}\n                fill={theme.palette.primary.main}\n                opacity={DEFAULT_OPACITY}\n            />\n        </View>\n    );\n\n    return (\n        <View style={style}>\n            {children}\n\n            <Animated.View\n                onLayout={(event) => setLayout(event.nativeEvent.layout)}\n                style={[\n                    animatedStyle,\n                    tooltipLayoutStyle,\n                    tooltipStyle,\n                ]}\n            >\n                {placement === 'top' ? (\n                    <React.Fragment>\n                        {buttonElem}\n                        {arrowElem}\n                    </React.Fragment>\n                ) : (\n                    <React.Fragment>\n                        {arrowElem}\n                        {buttonElem}\n                    </React.Fragment>\n                )}\n            </Animated.View>\n        </View>\n    );\n};\n"],"mappings":"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"}

package/build/module/hooks/useCollapsibleAppBar.js

@@ -6,7 +6,8 @@ import { useHeight } from '../internal/hooks';
 import useElevationStyle from './useElevationStyle';
 import useAppbarStyles from './useAppbarStyles';
 const defaultOptions = {
-  keyboardDismissMode: 'none'
+  keyboardDismissMode: 'none',
+  supportsReverseScroll: true
 };
 const ANIMATION_CONFIG = {
   duration: 100
@@ -15,7 +16,8 @@ const SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';
 export default function useCollapsibleAppBar() {
   let userOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultOptions;
   const {
-    keyboardDismissMode
+    keyboardDismissMode,
+    supportsReverseScroll
   } = { ...defaultOptions,
     ...userOptions
   };
@@ -97,7 +99,6 @@ export default function useCollapsibleAppBar() {
     },
     onScroll: event => {
       const offsetY = event.contentOffset.y;
-      const ty = translateY.value;
       const maxTy = maxTranslateY.value;
 
       if (SUPPORTS_DRAG_DETECTION) {
@@ -105,16 +106,13 @@ export default function useCollapsibleAppBar() {
         translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);
         overlapped.value = offsetY + translateY.value > 0;
       } else {
-        if (offsetY > -maxTy) {
-          if (ty === 0) {
-            translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), ANIMATION_CONFIG);
-          }
-        } else {
-          if (ty === maxTy) {
-            translateY.value = withTiming(0, ANIMATION_CONFIG);
-          }
-        }
-
+        const minOffsetY = -maxTy;
+        const maxOffsetY = event.contentSize.height - event.layoutMeasurement.height;
+        const safeOffsetY = Math.min(Math.max(offsetY, minOffsetY), maxOffsetY);
+        const safeLastOffsetY = Math.min(Math.max(lastOffsetY.value, minOffsetY), maxOffsetY);
+        const dy = safeOffsetY - safeLastOffsetY;
+        const newTranslateY = supportsReverseScroll ? dy === 0 ? translateY.value : dy > 0 ? maxTy : 0 : safeLastOffsetY === minOffsetY ? 0 : maxTy;
+        translateY.value = withTiming(newTranslateY, ANIMATION_CONFIG);
         overlapped.value = offsetY > 0;
         lastOffsetY.value = offsetY;
       }

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

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

package/build/typescript/hooks/useCollapsibleAppBar.d.ts

@@ -13,6 +13,7 @@ export interface ContentInsets {
 }
 export interface Options {
     keyboardDismissMode?: 'none' | 'on-drag';
+    supportsReverseScroll?: boolean;
 }
 export interface CollapsibleAppBar {
     appBarStyle: ViewStyleProp;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "2.0.0-beta.34",
+  "version": "2.0.0-beta.36",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "54684826fbd0cd45d1bbc865c4621d676055e987"
+  "gitHead": "019b85d550c729ccca7f3877d6aebe3fa02bd2ec"
 }

package/src/Chip/Chip.tsx

@@ -8,7 +8,7 @@ import type ChipProps from './ChipProps';
 
 type ChipStyles = NamedStylesStringUnion<'root'>;
 
-const ICON_SIZE = 16;
+const ICON_SIZE = 20;
 
 const useStyles: UseStyles<ChipStyles> = function (): ChipStyles {
     const theme = useTheme();
@@ -18,10 +18,10 @@ const useStyles: UseStyles<ChipStyles> = function (): ChipStyles {
             alignItems: 'center',
             borderRadius: 20,
             flexDirection: 'row',
-            height: 32,
+            height: 36,
             justifyContent: 'center',
-            paddingLeft: theme.spacing(2),
-            paddingRight: theme.spacing(2),
+            paddingLeft: theme.spacing(4),
+            paddingRight: theme.spacing(4),
         },
     };
 };

package/src/Tooltip/Tooltip.tsx

@@ -71,6 +71,7 @@ export default function Tooltip(props: TooltipProps) {
         borderRadius: theme.shape.roundness,
         flexDirection: 'row',
         padding: theme.spacing(2),
+        width: '100%',
     };
 
     const fontStyle = createFontStyle(theme, {
@@ -80,7 +81,10 @@ export default function Tooltip(props: TooltipProps) {
 
     const textStyle = css([
         fontStyle,
-        { marginRight: theme.spacing(2) },
+        {
+            marginRight: theme.spacing(2),
+            flexShrink: 1,
+        },
     ]);
 
     const arrowStyle = css({

package/src/hooks/useCollapsibleAppBar.ts

@@ -31,6 +31,7 @@ export interface ContentInsets {
 
 export interface Options {
     keyboardDismissMode?: 'none' | 'on-drag';
+    supportsReverseScroll?: boolean;
 }
 
 export interface CollapsibleAppBar {
@@ -44,6 +45,7 @@ export interface CollapsibleAppBar {
 
 const defaultOptions: Required<Options> = {
     keyboardDismissMode: 'none',
+    supportsReverseScroll: true,
 };
 
 const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 100 };
@@ -51,7 +53,7 @@ const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 100 };
 const SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';
 
 export default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {
-    const { keyboardDismissMode }: Required<Options> = {
+    const { keyboardDismissMode, supportsReverseScroll }: Required<Options> = {
         ...defaultOptions,
         ...userOptions,
     };
@@ -140,7 +142,6 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
         onScroll: (event) => {
             const offsetY = event.contentOffset.y;
 
-            const ty = translateY.value;
             const maxTy = maxTranslateY.value;
 
             if (SUPPORTS_DRAG_DETECTION) {
@@ -150,15 +151,24 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
                 overlapped.value = offsetY + translateY.value > 0;
             } else {
-                if (offsetY > -maxTy) {
-                    if (ty === 0) {
-                        translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), ANIMATION_CONFIG);
-                    }
-                } else {
-                    if (ty === maxTy) {
-                        translateY.value = withTiming(0, ANIMATION_CONFIG);
-                    }
-                }
+                const minOffsetY = -maxTy;
+                const maxOffsetY = event.contentSize.height - event.layoutMeasurement.height;
+
+                const safeOffsetY = Math.min(Math.max(offsetY, minOffsetY), maxOffsetY);
+                const safeLastOffsetY = Math.min(Math.max(lastOffsetY.value, minOffsetY), maxOffsetY);
+                const dy = safeOffsetY - safeLastOffsetY;
+
+                const newTranslateY = supportsReverseScroll
+                    ? dy === 0
+                        ? translateY.value
+                        : dy > 0
+                            ? maxTy
+                            : 0
+                    : safeLastOffsetY === minOffsetY
+                        ? 0
+                        : maxTy;
+
+                translateY.value = withTiming(newTranslateY, ANIMATION_CONFIG);
 
                 overlapped.value = offsetY > 0;