@fountain-ui/core 2.0.0-beta.75 → 2.0.0-beta.77

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

@@ -1 +1 @@
-{"version":3,"names":["React","cloneElement","forwardRef","useEffect","useImperativeHandle","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","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","style","variant","UNSTABLE_sharedIndex","fallbackSharedIndex","initialValue","sharedIndex","realInitialIndex","setTab","newIndex","animatedValue","setValue","styles","coordinates","updateCoordinate","canRenderIndicator","indexStore","subscribe","tabElements","Children","map","child","index","onLayout","event","x","width","nativeEvent","layout","onMouseDown","e","preventDefault","onPress","tabElement","enableIndicator","undefined","tabIndicator"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useEffect, useImperativeHandle } 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        keyboardDismissMode = 'none',\n        keyboardShouldPersistTaps = 'never',\n        onChange,\n        scrollable = false,\n        style,\n        variant = 'primary',\n        UNSTABLE_sharedIndex,\n    } = props;\n\n    const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });\n    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;\n    const realInitialIndex = sharedIndex.initialValue;\n\n    const setTab = (newIndex: number) => {\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 [coordinates, updateCoordinate] = useTabCoordinates(children);\n\n    const canRenderIndicator = isEveryTabCoordinatesDefined(coordinates, children);\n\n    const indexStore = useIndexStore(sharedIndex);\n\n    useEffect(() => {\n        return indexStore.subscribe(newIndex => {\n            onChange?.(newIndex);\n        });\n    }, [indexStore, onChange]);\n\n    const tabElements = React.Children.map(children, (child, index) => {\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            onLayout,\n            onPress,\n            onMouseDown,\n            variant,\n            style: scrollable ? undefined : styles.fixedTab,\n        });\n\n        return (\n            <IndexAwareTab\n                children={tabElement}\n                index={index}\n                initialIndex={realInitialIndex}\n            />\n        );\n    });\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/TabsProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["TabsProps.ts"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { TabIndicatorColor } from './TabIndicatorProps';\nimport type { TabVariant } from '../Tab';\nimport type { OverridableComponentProps, SyncAnimatedValue } from '../types';\nimport type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';\n\nexport default interface TabsProps extends OverridableComponentProps<ViewProps, {\n    ref?: Ref<TabsInstance>;\n\n    /**\n     * Collection of Tab components.\n     */\n    children: ReactNode;\n\n    /**\n     * If `true`, the indicator is disabled.\n     * @default false\n     */\n    disableIndicator?: boolean;\n\n    /**\n     * The color of tab indicator\n     * @default 'primary'\n     */\n    indicatorColor?: TabIndicatorColor;\n\n    /**\n     * Index of initial tab that should be selected.\n     * @default 0\n     */\n    initialIndex?: number;\n\n    /**\n     * keyboard dismissing condition of dragging.\n     * @default 'none'\n     */\n    keyboardDismissMode?: KeyboardDismissMode,\n\n    /**\n     * keyboard persisting condition of tapping.\n     * @default 'never'\n     */\n    keyboardShouldPersistTaps?: KeyboardShouldPersistTaps,\n\n    /**\n     * Callback fired when a tab is selected.\n     */\n    onChange?: (newIndex: number) => void;\n\n    /**\n     * If `true`, the component will be able to scroll.\n     * @default false\n     */\n    scrollable?: boolean;\n\n    /**\n     * Unstable API.\n     */\n    UNSTABLE_sharedIndex?: SyncAnimatedValue;\n\n    /**\n     * The variant to use.\n     * @default 'primary'\n     */\n    variant?: TabVariant;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["TabsProps.ts"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { TabIndicatorColor } from './TabIndicatorProps';\nimport type { TabVariant, TabIndicatorSize } from '../Tab';\nimport type { OverridableComponentProps, SyncAnimatedValue } from '../types';\nimport type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';\n\nexport default interface TabsProps extends OverridableComponentProps<ViewProps, {\n    ref?: Ref<TabsInstance>;\n\n    /**\n     * Collection of Tab components.\n     */\n    children: ReactNode;\n\n    /**\n     * If `true`, the indicator is disabled.\n     * @default false\n     */\n    disableIndicator?: boolean;\n\n    /**\n     * The color of tab indicator\n     * @default 'primary'\n     */\n    indicatorColor?: TabIndicatorColor;\n\n    /**\n     * The size of tab indicator.\n     * 'full' adjusts the indicator to the size of the Tab,\n     * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.\n     * @default 'full'\n     */\n    indicatorSize?: TabIndicatorSize;\n\n    /**\n     * Index of initial tab that should be selected.\n     * @default 0\n     */\n    initialIndex?: number;\n\n    /**\n     * keyboard dismissing condition of dragging.\n     * @default 'none'\n     */\n    keyboardDismissMode?: KeyboardDismissMode,\n\n    /**\n     * keyboard persisting condition of tapping.\n     * @default 'never'\n     */\n    keyboardShouldPersistTaps?: KeyboardShouldPersistTaps,\n\n    /**\n     * Callback fired when a tab is selected.\n     */\n    onChange?: (newIndex: number) => void;\n\n    /**\n     * If `true`, the component will be able to scroll.\n     * @default false\n     */\n    scrollable?: boolean;\n\n    /**\n     * Unstable API.\n     */\n    UNSTABLE_sharedIndex?: SyncAnimatedValue;\n\n    /**\n     * The variant to use.\n     * @default 'primary'\n     */\n    variant?: TabVariant;\n\n    /**\n     * Callback function executed when a Tab is selected.\n     * Executed even if the index does not change when a Tab is pressed.\n     * Receives the next tab index and the current tab index as parameters.\n     */\n    onTabSelected?: (newIndex: number, currentIndex: number) => void;\n}> {}\n"],"mappings":""}

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/Modal/ModalProps.d.ts

@@ -21,6 +21,16 @@ export default interface ModalProps extends OverridableComponentProps<ViewProps,
      * @default false
      */
     disableAnimation?: boolean;
+    /**
+     * The number of milliseconds to enter animation.
+     * @default 300
+     */
+    enterDuration?: number;
+    /**
+     * The number of milliseconds to exit animation.
+     * @default 150
+     */
+    exitDuration?: number;
     /**
      * If `true`, the backdrop is not rendered.
      * @default false

package/build/typescript/Tab/TabIndicator.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { TabIndicatorColor } from './TabProps';
-declare const _default: React.MemoExoticComponent<({ color }: {
+import type { TabIndicatorColor, TabIndicatorSize } from './TabProps';
+declare const _default: React.MemoExoticComponent<({ indicatorSize, color }: {
+    indicatorSize: TabIndicatorSize;
     color: TabIndicatorColor;
 }) => JSX.Element>;
 export default _default;

package/build/typescript/Tab/TabProps.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
+import type { LayoutChangeEvent } from 'react-native';
 import type { TabBaseProps } from '../TabBase';
 import type { OverridableComponentProps } from '../types';
 export declare type TabVariant = 'primary' | 'secondary' | 'bottom-navigation';
 export declare type TabIndicatorColor = 'primary' | 'secondary';
+export declare type TabIndicatorSize = 'full' | 'fit-content';
 export default interface TabProps extends OverridableComponentProps<TabBaseProps, {
     /**
      * If `true`, the badge is visible.
@@ -12,7 +14,7 @@ export default interface TabProps extends OverridableComponentProps<TabBaseProps
     /**
      * The label of the Tab.
      */
-    children: string;
+    children: string | React.ReactElement;
     /**
      * If `true`, the indicator is enabled.
      * @default false
@@ -32,6 +34,13 @@ export default interface TabProps extends OverridableComponentProps<TabBaseProps
      * @default 'primary'
      */
     indicatorColor?: TabIndicatorColor;
+    /**
+     * The size of tab indicator.
+     * 'full' adjusts the indicator to the size of the Tab,
+     * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.
+     * @default 'full'
+     */
+    indicatorSize?: TabIndicatorSize;
     /**
      * If supplied, use this icon on selected state.
      */
@@ -41,5 +50,9 @@ export default interface TabProps extends OverridableComponentProps<TabBaseProps
      * @default 'primary'
      */
     variant?: TabVariant;
+    /**
+     * Function to be passed to the child component's onLayout prop.
+     */
+    onTabInnerLayout?: (event: LayoutChangeEvent) => void;
 }> {
 }

package/build/typescript/Tab/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from './Tab';
-export type { default as TabProps, TabVariant } from './TabProps';
+export type { default as TabProps, TabVariant, TabIndicatorSize } from './TabProps';

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import type TabsProps from './TabsProps';
 import type { TabsInstance } from './types';
-declare const Tabs: React.ForwardRefExoticComponent<Pick<TabsProps, "testID" | "style" | "onLayout" | "keyboardDismissMode" | "children" | "pointerEvents" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "accessibilityLabel" | "accessible" | "hitSlop" | "removeClippedSubviews" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessibilityActions" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLabelledBy" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "variant" | "keyboardShouldPersistTaps" | "onChange" | "indicatorColor" | "initialIndex" | "scrollable" | "disableIndicator" | "UNSTABLE_sharedIndex"> & React.RefAttributes<TabsInstance>>;
+declare const Tabs: React.ForwardRefExoticComponent<Pick<TabsProps, "testID" | "style" | "onLayout" | "keyboardDismissMode" | "children" | "pointerEvents" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "accessibilityLabel" | "accessible" | "hitSlop" | "removeClippedSubviews" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessibilityActions" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLabelledBy" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "variant" | "keyboardShouldPersistTaps" | "onChange" | "indicatorColor" | "indicatorSize" | "initialIndex" | "scrollable" | "disableIndicator" | "UNSTABLE_sharedIndex" | "onTabSelected"> & React.RefAttributes<TabsInstance>>;
 export default Tabs;

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

@@ -1,7 +1,7 @@
 import type { ReactNode, Ref } from 'react';
 import type { ViewProps } from 'react-native';
 import type { TabIndicatorColor } from './TabIndicatorProps';
-import type { TabVariant } from '../Tab';
+import type { TabVariant, TabIndicatorSize } from '../Tab';
 import type { OverridableComponentProps, SyncAnimatedValue } from '../types';
 import type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';
 export default interface TabsProps extends OverridableComponentProps<ViewProps, {
@@ -20,6 +20,13 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
      * @default 'primary'
      */
     indicatorColor?: TabIndicatorColor;
+    /**
+     * The size of tab indicator.
+     * 'full' adjusts the indicator to the size of the Tab,
+     * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.
+     * @default 'full'
+     */
+    indicatorSize?: TabIndicatorSize;
     /**
      * Index of initial tab that should be selected.
      * @default 0
@@ -53,5 +60,11 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
      * @default 'primary'
      */
     variant?: TabVariant;
+    /**
+     * Callback function executed when a Tab is selected.
+     * Executed even if the index does not change when a Tab is pressed.
+     * Receives the next tab index and the current tab index as parameters.
+     */
+    onTabSelected?: (newIndex: number, currentIndex: number) => void;
 }> {
 }

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.75",
+  "version": "2.0.0-beta.77",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "474e7eda06ca67e0986459cb8426e9323eb328a5"
+  "gitHead": "3edf58805967bc1a5f73ed1d5833fa5a55f59504"
 }

package/src/Dialog/Dialog.tsx

@@ -1,9 +1,11 @@
-import React from 'react';
-import { useWindowDimensions } from 'react-native';
+import React, { useEffect } from 'react';
+import { useWindowDimensions, Animated } from 'react-native';
 import { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import Column from '../Column';
 import Modal from '../Modal';
 import Paper from '../Paper';
+import { useAnimatedValue } from '../hooks';
+import { isNotAndroid12 } from '../utils';
 import { useTheme } from '../styles';
 import type DialogProps from './DialogProps';
 
@@ -20,6 +22,10 @@ type DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;
 
 const DIALOG_MAX_WIDTH = 328;
 
+const fadeInDuration = 300;
+const fadeOutDuration = 100;
+const fadeAnimationDelay = 50;
+
 const useStyles: UseStyles<DialogStyles> = function (): DialogStyles {
     const theme = useTheme();
 
@@ -74,16 +80,32 @@ export default function Dialog(props: DialogProps) {
 
     const styles = useStyles();
     const theme = useTheme();
+    const animatedOpacity = useAnimatedValue(fullScreen ? 1 : 0);
+
+    useEffect(() => {
+        if(!fullScreen){
+            Animated.timing(animatedOpacity, {
+                toValue: visible ? 1 : 0,
+                duration: visible ? fadeInDuration: fadeOutDuration,
+                delay: visible ? fadeAnimationDelay : 0,
+                useNativeDriver: isNotAndroid12,
+            }).start();
+        }
+    }, [fullScreen, visible]);
 
     return (
         <Modal
             animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}
             onClose={onClose}
+            exitDuration={fullScreen ? 150 : 300}
             visible={visible}
             style={styles.root}
             {...otherProps}
         >
-            <React.Fragment>
+            <Animated.View
+                needsOffscreenAlphaCompositing={true}
+                style={{ opacity: animatedOpacity }}
+            >
                 {topElement ? (
                     <Column style={fullScreen ? undefined : styles.topElementSize}>
                         <Column style={styles.topElementPosition}>
@@ -103,7 +125,7 @@ export default function Dialog(props: DialogProps) {
                 >
                     {children}
                 </Paper>
-            </React.Fragment>
+            </Animated.View>
         </Modal>
     );
 };

package/src/Modal/Modal.tsx

@@ -14,6 +14,9 @@ export interface ModalCloseEvent {
     };
 }
 
+const defaultEnterDuration = 300;
+const defaultExitDuration = 150;
+
 export const createModalCloseEvent = (reason: ModalCloseReasonType) => ({
     metadata: {
         reason,
@@ -26,6 +29,8 @@ export default function Modal(props: ModalProps) {
         backdropOpacity = 0.5,
         children,
         disableAnimation = false,
+        enterDuration = defaultEnterDuration,
+        exitDuration = defaultExitDuration,
         hideBackdrop = false,
         onClose,
         style,
@@ -68,7 +73,8 @@ export default function Modal(props: ModalProps) {
             {!disableAnimation ? (
                 <Slide
                     appear={visible}
-                    exitDuration={150}
+                    enterDuration={enterDuration}
+                    exitDuration={exitDuration}
                     onEnter={() => setExited(false)}
                     onExited={() => setExited(true)}
                     style={animationStyle}

package/src/Modal/ModalProps.ts

@@ -26,6 +26,18 @@ export default interface ModalProps extends OverridableComponentProps<ViewProps,
      */
     disableAnimation?: boolean;
 
+    /**
+     * The number of milliseconds to enter animation.
+     * @default 300
+     */
+    enterDuration?: number;
+
+    /**
+     * The number of milliseconds to exit animation.
+     * @default 150
+     */
+    exitDuration?: number;
+
     /**
      * If `true`, the backdrop is not rendered.
      * @default false

package/src/Snackbar/Snackbar.tsx

@@ -1,14 +1,20 @@
-import React from 'react';
-import { View } from 'react-native';
+import React, { useEffect } from 'react';
+import { Animated } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import Slide from '../Slide';
 import SnackbarContent from '../SnackbarContent';
+import { useAnimatedValue } from '../hooks';
 import { useTheme } from '../styles';
+import { isNotAndroid12 } from '../utils';
 import type SnackbarProps from './SnackbarProps';
 
 type SnackBarStyles = NamedStylesStringUnion<'root'>;
 
+const fadeInDuration = 300;
+const fadeOutDuration = 110;
+const fadeAnimationDelay = 100;
+
 const useStyles: UseStyles<SnackBarStyles> = function (): SnackBarStyles {
     const theme = useTheme();
     const insets = useSafeAreaInsets();
@@ -75,16 +81,32 @@ export default function Snackbar(props: SnackbarProps) {
 
     const [exited, setExited] = React.useState(true);
 
+    const animatedOpacity = useAnimatedValue(0);
+
+    const animatedStyle = {
+        opacity: animatedOpacity,
+    };
+
+    useEffect(() => {
+        Animated.timing(animatedOpacity, {
+            toValue: visible ? 1 : 0,
+            duration: visible ? fadeInDuration : fadeOutDuration,
+            delay: visible ? fadeAnimationDelay : 0,
+            useNativeDriver: isNotAndroid12,
+        }).start();
+    }, [visible]);
+
     if (!visible && exited) {
         return null;
     }
 
     return (
-        <View
-            style={css([
+        <Animated.View
+            style={[
+                animatedStyle,
                 styles.root,
                 style,
-            ])}
+            ]}
             {...otherProps}
         >
             <Slide
@@ -103,6 +125,6 @@ export default function Snackbar(props: SnackbarProps) {
                     />
                 )}
             </Slide>
-        </View>
+        </Animated.View>
     );
 };

package/src/Tab/Tab.tsx

@@ -1,5 +1,5 @@
 import React, { cloneElement } from 'react';
-import { Platform, Text } from 'react-native';
+import { Platform, Text, View } from 'react-native';
 import Badge from '../Badge';
 import TabBase from '../TabBase';
 import type TabProps from './TabProps';
@@ -10,16 +10,14 @@ const styles = StyleSheet.create({
     root: {
         // TODO: Remove redundant platform checking
         ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),
-    },
-    primary: {
-        minHeight: 40,
-    },
-    secondary: {
         minHeight: 40,
     },
     bottomNavigation: {
         minHeight: 56,
     },
+    filledInner: {
+        justifyContent: 'center',
+    }
 });
 
 export default function Tab(props: TabProps) {
@@ -29,10 +27,12 @@ export default function Tab(props: TabProps) {
         enableIndicator = false,
         icon: defaultIcon,
         indicatorColor = 'primary',
+        indicatorSize = 'full',
         selected = false,
         selectedIcon,
         variant = 'primary',
         style,
+        onTabInnerLayout,
         ...otherProps
     } = props;
 
@@ -44,12 +44,15 @@ export default function Tab(props: TabProps) {
 
     const tabBaseStyle = css([
         styles.root,
-        variant === 'primary'
-            ? styles.primary
-            : (variant === 'secondary' ? styles.secondary : styles.bottomNavigation),
+        variant === 'bottom-navigation' && styles.bottomNavigation,
         style,
     ]);
 
+    const tabInnerStyle = css([
+        styles.root,
+        styles.filledInner,
+    ]);
+
     const fontStyle = createFontStyle(theme, {
         selector: (typo) => variant === 'primary'
             ? typo.h2
@@ -62,13 +65,12 @@ export default function Tab(props: TabProps) {
     const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;
     const iconElement = icon ? cloneElement(icon, { fill: color }) : null;
 
-    return (
-        <TabBase
-            pressEffect={pressEffect}
-            style={tabBaseStyle}
-            vertical={vertical}
-            {...otherProps}
-        >
+    const tabElement = typeof children !== 'string' ? (
+        React.cloneElement(children, {
+            selected,
+        })
+    ) : (
+        <React.Fragment>
             <Badge
                 children={iconElement}
                 invisible={!badgeVisible}
@@ -78,8 +80,32 @@ export default function Tab(props: TabProps) {
                 children={children}
                 style={css(fontStyle)}
             />
+        </React.Fragment>
+    );
+    const tabIndicator = (enableIndicator && selected)
+        ? <TabIndicator indicatorSize={indicatorSize} color={indicatorColor}/>
+        : null;
+
+    return (
+        <TabBase
+            pressEffect={pressEffect}
+            style={tabBaseStyle}
+            vertical={vertical}
+            {...otherProps}
+        >
+            {indicatorSize === 'fit-content' ? (
+                <View onLayout={onTabInnerLayout} style={tabInnerStyle}>
+                    {tabElement}
+
+                    {tabIndicator}
+                </View>
+            ) : (
+                <React.Fragment>
+                    {tabElement}
 
-            {(enableIndicator && selected) ? <TabIndicator color={indicatorColor}/> : null}
+                    {tabIndicator}
+                </React.Fragment>
+            )}
         </TabBase>
     );
 };

package/src/Tab/TabIndicator.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 import { View } from 'react-native';
 import { NamedStylesStringUnion } from '@fountain-ui/styles';
 import { useTheme } from '../styles';
-import type { TabIndicatorColor } from './TabProps';
+import type { TabIndicatorColor, TabIndicatorSize } from './TabProps';
 
 type TabIndicatorStyles = NamedStylesStringUnion<'root'>;
 
-const useStyles: (color: TabIndicatorColor) => TabIndicatorStyles =
-    function (color: TabIndicatorColor): TabIndicatorStyles {
+const useStyles: (color: TabIndicatorColor, indicatorSize: TabIndicatorSize) => TabIndicatorStyles =
+    function (color: TabIndicatorColor, indicatorSize): TabIndicatorStyles {
         const theme = useTheme();
 
         return {
@@ -15,15 +15,15 @@ const useStyles: (color: TabIndicatorColor) => TabIndicatorStyles =
                 backgroundColor: theme.palette[color].main,
                 bottom: 0,
                 height: 2,
-                left: 12,
-                right: 12,
+                left: indicatorSize === 'fit-content' ? 0 : 12,
+                right: indicatorSize === 'fit-content' ? 0 : 12,
                 position: 'absolute',
             },
         };
     };
 
-const TabIndicator = function TabIndicator({ color }: { color: TabIndicatorColor }) {
-    const styles = useStyles(color);
+const TabIndicator = function TabIndicator({ indicatorSize, color }: { indicatorSize: TabIndicatorSize; color: TabIndicatorColor }) {
+    const styles = useStyles(color, indicatorSize);
 
     return (
         <View

package/src/Tab/TabProps.ts

@@ -1,9 +1,11 @@
 import React from 'react';
+import type { LayoutChangeEvent } from 'react-native';
 import type { TabBaseProps } from '../TabBase';
 import type { OverridableComponentProps } from '../types';
 
 export type TabVariant = 'primary' | 'secondary' | 'bottom-navigation';
 export type TabIndicatorColor = 'primary' | 'secondary'
+export type TabIndicatorSize = 'full' | 'fit-content';
 
 export default interface TabProps extends OverridableComponentProps<TabBaseProps, {
     /**
@@ -15,7 +17,7 @@ export default interface TabProps extends OverridableComponentProps<TabBaseProps
     /**
      * The label of the Tab.
      */
-    children: string;
+    children: string | React.ReactElement;
 
     /**
      * If `true`, the indicator is enabled.
@@ -40,6 +42,14 @@ export default interface TabProps extends OverridableComponentProps<TabBaseProps
      */
     indicatorColor?: TabIndicatorColor;
 
+    /**
+     * The size of tab indicator.
+     * 'full' adjusts the indicator to the size of the Tab,
+     * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.
+     * @default 'full'
+     */
+    indicatorSize?: TabIndicatorSize;
+
     /**
      * If supplied, use this icon on selected state.
      */
@@ -50,4 +60,9 @@ export default interface TabProps extends OverridableComponentProps<TabBaseProps
      * @default 'primary'
      */
     variant?: TabVariant;
+
+    /**
+     * Function to be passed to the child component's onLayout prop.
+     */
+    onTabInnerLayout?: (event: LayoutChangeEvent) => void;
 }> {}