@fountain-ui/core 2.0.0-beta.16 → 2.0.0-beta.19

package/build/module/Tabs/TabIndicator.js

@@ -1,9 +1,10 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React from 'react';
-import Animated, { Easing, useAnimatedStyle, withTiming } from 'react-native-reanimated';
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
 import { useTheme } from '../styles';
 import { defaultCoordinate } from './TabCoordinate';
+import InternalContext from './InternalContext';
 const INDICATOR_WIDTH = 10;
 const INDICATOR_HEIGHT = 4;
 const SCROLLABLE_TABS_INSET = 12 * 2;
@@ -25,40 +26,66 @@ const useStyles = function () {
   };
 };
 
-const ANIMATION_CONFIG = {
-  duration: 300,
-  easing: Easing.out(Easing.exp)
+const startAnimation = (value, toValue) => {
+  Animated.timing(value, {
+    toValue: toValue,
+    duration: 300,
+    easing: Easing.bezier(0.25, 1, 0.5, 1),
+    useNativeDriver: true
+  }).start();
 };
+
 export default function TabIndicator(props) {
   const {
     coordinates,
     disabled,
+    initialIndex,
     scrollable,
-    sharedIndex,
     style,
     ...otherProps
   } = props;
   const styles = useStyles();
-  const animatedStyle = useAnimatedStyle(() => {
-    const index = sharedIndex.value;
+  const computeAnimationValues = useCallback(currentIndex => {
     const {
       x1,
       x2
-    } = coordinates[index] ?? defaultCoordinate;
+    } = coordinates[currentIndex] ?? defaultCoordinate;
     const tabWidth = x2 - x1;
-    const translateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;
+    const nextTranslateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;
     const inset = scrollable ? SCROLLABLE_TABS_INSET : 0;
-    const scaleX = (tabWidth - inset) / INDICATOR_WIDTH;
+    const nextScaleX = (tabWidth - inset) / INDICATOR_WIDTH;
     return {
-      transform: [{
-        translateX: withTiming(translateX, ANIMATION_CONFIG)
-      }, {
-        scaleX: withTiming(scaleX, ANIMATION_CONFIG)
-      }]
+      tx: nextTranslateX,
+      sx: nextScaleX
     };
   }, [coordinates, scrollable]);
+  const {
+    tx: initialTx,
+    sx: initialSx
+  } = computeAnimationValues(initialIndex);
+  const translateX = useRef(new Animated.Value(initialTx)).current;
+  const scaleX = useRef(new Animated.Value(initialSx)).current;
+  const {
+    indexStore
+  } = useContext(InternalContext);
+  useEffect(() => {
+    return indexStore.subscribe(currentIndex => {
+      const {
+        tx,
+        sx
+      } = computeAnimationValues(currentIndex);
+      startAnimation(translateX, tx);
+      startAnimation(scaleX, sx);
+    });
+  }, [indexStore, computeAnimationValues]);
   return /*#__PURE__*/React.createElement(Animated.View, _extends({
-    style: [styles.root, disabled ? styles.disabled : undefined, animatedStyle, style]
+    style: [styles.root, disabled ? styles.disabled : undefined, {
+      transform: [{
+        translateX
+      }, {
+        scaleX
+      }]
+    }, style]
   }, otherProps));
 }
 ;

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

@@ -1 +1 @@
-{"version":3,"names":["React","Animated","Easing","useAnimatedStyle","withTiming","useTheme","defaultCoordinate","INDICATOR_WIDTH","INDICATOR_HEIGHT","SCROLLABLE_TABS_INSET","useStyles","theme","root","backgroundColor","palette","secondary","main","left","bottom","width","height","position","disabled","ANIMATION_CONFIG","duration","easing","out","exp","TabIndicator","props","coordinates","scrollable","sharedIndex","style","otherProps","styles","animatedStyle","index","value","x1","x2","tabWidth","translateX","inset","scaleX","transform","undefined"],"sources":["TabIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { Easing, useAnimatedStyle, withTiming } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport type TabIndicatorProps from './TabIndicatorProps';\nimport { defaultCoordinate } from './TabCoordinate';\n\ntype TabIndicatorStyles = NamedStylesStringUnion<'root' | 'disabled'>;\n\nconst INDICATOR_WIDTH = 10;\nconst INDICATOR_HEIGHT = 4;\n\nconst SCROLLABLE_TABS_INSET = 12 * 2;\n\nconst useStyles: UseStyles<TabIndicatorStyles> = function (): TabIndicatorStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            backgroundColor: theme.palette.secondary.main,\n            left: 0,\n            bottom: 0,\n            width: INDICATOR_WIDTH,\n            height: INDICATOR_HEIGHT,\n            position: 'absolute',\n        },\n        disabled: {\n            height: 0,\n        },\n    };\n};\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = {\n    duration: 300,\n    easing: Easing.out(Easing.exp),\n};\n\nexport default function TabIndicator(props: TabIndicatorProps) {\n    const {\n        coordinates,\n        disabled,\n        scrollable,\n        sharedIndex,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const animatedStyle = useAnimatedStyle(() => {\n        const index = sharedIndex.value;\n\n        const { x1, x2 } = coordinates[index] ?? defaultCoordinate;\n\n        const tabWidth = x2 - x1;\n\n        const translateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;\n\n        const inset = scrollable ? SCROLLABLE_TABS_INSET : 0;\n        const scaleX = (tabWidth - inset) / INDICATOR_WIDTH;\n\n        return {\n            transform: [\n                { translateX: withTiming(translateX, ANIMATION_CONFIG) },\n                { scaleX: withTiming(scaleX, ANIMATION_CONFIG) },\n            ],\n        };\n    }, [coordinates, scrollable]);\n\n    return (\n        <Animated.View\n            style={[\n                styles.root,\n                disabled ? styles.disabled : undefined,\n                animatedStyle,\n                style,\n            ]}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,QAAP,IAAmBC,MAAnB,EAA2BC,gBAA3B,EAA6CC,UAA7C,QAA+D,yBAA/D;AAEA,SAASC,QAAT,QAAyB,WAAzB;AAEA,SAASC,iBAAT,QAAkC,iBAAlC;AAIA,MAAMC,eAAe,GAAG,EAAxB;AACA,MAAMC,gBAAgB,GAAG,CAAzB;AAEA,MAAMC,qBAAqB,GAAG,KAAK,CAAnC;;AAEA,MAAMC,SAAwC,GAAG,YAAgC;EAC7E,MAAMC,KAAK,GAAGN,QAAQ,EAAtB;EAEA,OAAO;IACHO,IAAI,EAAE;MACFC,eAAe,EAAEF,KAAK,CAACG,OAAN,CAAcC,SAAd,CAAwBC,IADvC;MAEFC,IAAI,EAAE,CAFJ;MAGFC,MAAM,EAAE,CAHN;MAIFC,KAAK,EAAEZ,eAJL;MAKFa,MAAM,EAAEZ,gBALN;MAMFa,QAAQ,EAAE;IANR,CADH;IASHC,QAAQ,EAAE;MACNF,MAAM,EAAE;IADF;EATP,CAAP;AAaH,CAhBD;;AAkBA,MAAMG,gBAA4C,GAAG;EACjDC,QAAQ,EAAE,GADuC;EAEjDC,MAAM,EAAEvB,MAAM,CAACwB,GAAP,CAAWxB,MAAM,CAACyB,GAAlB;AAFyC,CAArD;AAKA,eAAe,SAASC,YAAT,CAAsBC,KAAtB,EAAgD;EAC3D,MAAM;IACFC,WADE;IAEFR,QAFE;IAGFS,UAHE;IAIFC,WAJE;IAKFC,KALE;IAMF,GAAGC;EAND,IAOFL,KAPJ;EASA,MAAMM,MAAM,GAAGzB,SAAS,EAAxB;EAEA,MAAM0B,aAAa,GAAGjC,gBAAgB,CAAC,MAAM;IACzC,MAAMkC,KAAK,GAAGL,WAAW,CAACM,KAA1B;IAEA,MAAM;MAAEC,EAAF;MAAMC;IAAN,IAAaV,WAAW,CAACO,KAAD,CAAX,IAAsB/B,iBAAzC;IAEA,MAAMmC,QAAQ,GAAGD,EAAE,GAAGD,EAAtB;IAEA,MAAMG,UAAU,GAAGH,EAAE,GAAG,CAACE,QAAQ,GAAGlC,eAAZ,IAA+B,CAAvD;IAEA,MAAMoC,KAAK,GAAGZ,UAAU,GAAGtB,qBAAH,GAA2B,CAAnD;IACA,MAAMmC,MAAM,GAAG,CAACH,QAAQ,GAAGE,KAAZ,IAAqBpC,eAApC;IAEA,OAAO;MACHsC,SAAS,EAAE,CACP;QAAEH,UAAU,EAAEtC,UAAU,CAACsC,UAAD,EAAanB,gBAAb;MAAxB,CADO,EAEP;QAAEqB,MAAM,EAAExC,UAAU,CAACwC,MAAD,EAASrB,gBAAT;MAApB,CAFO;IADR,CAAP;EAMH,CAlBqC,EAkBnC,CAACO,WAAD,EAAcC,UAAd,CAlBmC,CAAtC;EAoBA,oBACI,oBAAC,QAAD,CAAU,IAAV;IACI,KAAK,EAAE,CACHI,MAAM,CAACvB,IADJ,EAEHU,QAAQ,GAAGa,MAAM,CAACb,QAAV,GAAqBwB,SAF1B,EAGHV,aAHG,EAIHH,KAJG;EADX,GAOQC,UAPR,EADJ;AAWH;AAAA"}
+{"version":3,"names":["React","useCallback","useContext","useEffect","useRef","Animated","Easing","useTheme","defaultCoordinate","InternalContext","INDICATOR_WIDTH","INDICATOR_HEIGHT","SCROLLABLE_TABS_INSET","useStyles","theme","root","backgroundColor","palette","secondary","main","left","bottom","width","height","position","disabled","startAnimation","value","toValue","timing","duration","easing","bezier","useNativeDriver","start","TabIndicator","props","coordinates","initialIndex","scrollable","style","otherProps","styles","computeAnimationValues","currentIndex","x1","x2","tabWidth","nextTranslateX","inset","nextScaleX","tx","sx","initialTx","initialSx","translateX","Value","current","scaleX","indexStore","subscribe","undefined","transform"],"sources":["TabIndicator.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useRef } from 'react';\nimport { Animated, Easing } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport type TabIndicatorProps from './TabIndicatorProps';\nimport { defaultCoordinate } from './TabCoordinate';\nimport InternalContext from './InternalContext';\n\ntype TabIndicatorStyles = NamedStylesStringUnion<'root' | 'disabled'>;\n\nconst INDICATOR_WIDTH = 10;\nconst INDICATOR_HEIGHT = 4;\n\nconst SCROLLABLE_TABS_INSET = 12 * 2;\n\nconst useStyles: UseStyles<TabIndicatorStyles> = function (): TabIndicatorStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            backgroundColor: theme.palette.secondary.main,\n            left: 0,\n            bottom: 0,\n            width: INDICATOR_WIDTH,\n            height: INDICATOR_HEIGHT,\n            position: 'absolute',\n        },\n        disabled: {\n            height: 0,\n        },\n    };\n};\n\nconst startAnimation = (value: Animated.Value, toValue: number) => {\n    Animated.timing(value, {\n        toValue: toValue,\n        duration: 300,\n        easing: Easing.bezier(0.25, 1, 0.5, 1),\n        useNativeDriver: true,\n    }).start();\n};\n\nexport default function TabIndicator(props: TabIndicatorProps) {\n    const {\n        coordinates,\n        disabled,\n        initialIndex,\n        scrollable,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const computeAnimationValues = useCallback((currentIndex: number) => {\n        const { x1, x2 } = coordinates[currentIndex] ?? defaultCoordinate;\n\n        const tabWidth = x2 - x1;\n\n        const nextTranslateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;\n\n        const inset = scrollable ? SCROLLABLE_TABS_INSET : 0;\n        const nextScaleX = (tabWidth - inset) / INDICATOR_WIDTH;\n\n        return { tx: nextTranslateX, sx: nextScaleX };\n    }, [coordinates, scrollable]);\n\n    const {\n        tx: initialTx,\n        sx: initialSx,\n    } = computeAnimationValues(initialIndex);\n\n    const translateX = useRef(new Animated.Value(initialTx)).current;\n    const scaleX = useRef(new Animated.Value(initialSx)).current;\n\n    const { indexStore } = useContext(InternalContext);\n\n    useEffect(() => {\n        return indexStore.subscribe(currentIndex => {\n            const { tx, sx } = computeAnimationValues(currentIndex);\n\n            startAnimation(translateX, tx);\n            startAnimation(scaleX, sx);\n        });\n    }, [indexStore, computeAnimationValues]);\n\n    return (\n        <Animated.View\n            style={[\n                styles.root,\n                disabled ? styles.disabled : undefined,\n                { transform: [{ translateX }, { scaleX }] },\n                style,\n            ]}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["TabIndicatorProps.ts"],"sourcesContent":["import type { ViewProps } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport type { OverridableComponentProps } from '../types';\nimport type TabCoordinate from './TabCoordinate';\n\nexport default interface TabIndicatorProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Tab item coordinates.\n     */\n    coordinates: TabCoordinate[];\n\n    /**\n     * If `true`, the indicator is disabled.\n     */\n    disabled: boolean;\n\n    /**\n     * If `true`, the tab will be able to scroll.\n     */\n    scrollable: boolean;\n\n    /**\n     * Shared index value for using animated interpolation.\n     */\n    sharedIndex: SharedValue<number>;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["TabIndicatorProps.ts"],"sourcesContent":["import type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\nimport type TabCoordinate from './TabCoordinate';\n\nexport default interface TabIndicatorProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Tab item coordinates.\n     */\n    coordinates: TabCoordinate[];\n\n    /**\n     * If `true`, the indicator is disabled.\n     */\n    disabled: boolean;\n\n    /**\n     * Initial index.\n     */\n    initialIndex: number;\n\n    /**\n     * If `true`, the tab will be able to scroll.\n     */\n    scrollable: boolean;\n}> {}\n"],"mappings":""}

package/build/module/Tabs/Tabs.js

@@ -1,11 +1,14 @@
-import React, { cloneElement, forwardRef, useImperativeHandle } from 'react';
-import { ScrollView, View } from 'react-native';
-import { useSharedValue } from 'react-native-reanimated';
+import React, { cloneElement, forwardRef, useEffect, useImperativeHandle } from 'react';
+import { View } from 'react-native';
 import { css, useTheme } from '../styles';
+import { useSyncAnimatedValue } from '../hooks';
 import TabIndicator from './TabIndicator';
+import ScrollableTabsView from './ScrollableTabsView';
 import IndexAwareTab from './IndexAwareTab';
 import useTabCoordinates from './useTabCoordinates';
-import useScrollViewReaction from './useScrollViewReaction';
+import useIndexStore from './useIndexStore';
+import InternalContext from './InternalContext';
+import { isEveryTabCoordinatesDefined } from './utils';
 
 const useStyles = function () {
   const theme = useTheme();
@@ -36,29 +39,27 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
     variant = 'primary',
     UNSTABLE_sharedIndex
   } = props;
-  const fallbackSharedIndex = useSharedValue(initialIndex);
+  const fallbackSharedIndex = useSyncAnimatedValue({
+    initialValue: initialIndex
+  });
   const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
 
-  const getCurrentIndex = () => sharedIndex.value;
-
   const setTab = newIndex => {
-    sharedIndex.value = newIndex;
+    sharedIndex.animatedValue.setValue(newIndex);
   };
 
   useImperativeHandle(ref, () => ({
-    getCurrentIndex,
     setTab
   }), [sharedIndex]);
   const styles = useStyles();
-  const {
-    coordinates,
-    updateCoordinate
-  } = useTabCoordinates(children);
-  const {
-    scrollViewRef,
-    onLayout
-  } = useScrollViewReaction(sharedIndex, coordinates);
-  const isReadyToRenderIndicator = coordinates.length > 0;
+  const [coordinates, updateCoordinate] = useTabCoordinates(children);
+  const canRenderIndicator = isEveryTabCoordinatesDefined(coordinates, children);
+  const indexStore = useIndexStore(sharedIndex);
+  useEffect(() => {
+    return indexStore.subscribe(newIndex => {
+      onChange === null || onChange === void 0 ? void 0 : onChange(newIndex);
+    });
+  }, [indexStore, onChange]);
   const tabElements = React.Children.map(children, (child, index) => {
     const onLayout = event => {
       const {
@@ -77,15 +78,14 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
     const onPress = () => {
       var _child$props$onPress, _child$props;
 
-      setTab(index);
-      onChange === null || onChange === void 0 ? void 0 : onChange(index); // @ts-ignore
+      setTab(index); // @ts-ignore
 
       (_child$props$onPress = (_child$props = child.props).onPress) === null || _child$props$onPress === void 0 ? void 0 : _child$props$onPress.call(_child$props);
     }; // @ts-ignore
 
 
     const tabElement = /*#__PURE__*/cloneElement(child, {
-      enableIndicator: !disableIndicator && !isReadyToRenderIndicator,
+      enableIndicator: !disableIndicator && !canRenderIndicator,
       onLayout,
       onPress,
       onMouseDown,
@@ -94,32 +94,34 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
     });
     return /*#__PURE__*/React.createElement(IndexAwareTab, {
       children: tabElement,
-      index: index,
-      sharedIndex: sharedIndex
+      index: index
     });
   });
-  const tabIndicator = isReadyToRenderIndicator ? /*#__PURE__*/React.createElement(TabIndicator, {
+  const tabIndicator = canRenderIndicator ? /*#__PURE__*/React.createElement(TabIndicator, {
     coordinates: coordinates,
     disabled: disableIndicator,
-    scrollable: scrollable,
-    sharedIndex: sharedIndex
+    initialIndex: sharedIndex.initialValue,
+    scrollable: scrollable
   }) : null;
-  return /*#__PURE__*/React.createElement(View, {
-    onLayout: onLayout,
+  return /*#__PURE__*/React.createElement(InternalContext.Provider, {
+    value: {
+      indexStore
+    }
+  }, /*#__PURE__*/React.createElement(View, {
     style: css([styles.root, scrollable ? undefined : styles.fixedRoot, style])
-  }, scrollable ? /*#__PURE__*/React.createElement(ScrollView, {
+  }, scrollable ? /*#__PURE__*/React.createElement(ScrollableTabsView, {
     automaticallyAdjustContentInsets: false,
     bounces: false,
     contentContainerStyle: styles.scrollableContainer,
+    coordinates: coordinates,
     directionalLockEnabled: true,
     horizontal: true,
-    ref: scrollViewRef,
     scrollsToTop: false,
     showsHorizontalScrollIndicator: false,
     showsVerticalScrollIndicator: false,
     keyboardDismissMode: keyboardDismissMode,
     keyboardShouldPersistTaps: keyboardShouldPersistTaps
-  }, tabElements, tabIndicator) : /*#__PURE__*/React.createElement(React.Fragment, null, tabElements, tabIndicator));
+  }, tabElements, tabIndicator) : /*#__PURE__*/React.createElement(React.Fragment, null, tabElements, tabIndicator)));
 });
 export default Tabs;
 //# sourceMappingURL=Tabs.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","cloneElement","forwardRef","useImperativeHandle","ScrollView","View","useSharedValue","css","useTheme","TabIndicator","IndexAwareTab","useTabCoordinates","useScrollViewReaction","useStyles","theme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","Tabs","props","ref","children","initialIndex","disableIndicator","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","style","variant","UNSTABLE_sharedIndex","fallbackSharedIndex","sharedIndex","getCurrentIndex","value","setTab","newIndex","styles","coordinates","updateCoordinate","scrollViewRef","onLayout","isReadyToRenderIndicator","length","tabElements","Children","map","child","index","event","x","width","nativeEvent","layout","onMouseDown","e","preventDefault","onPress","tabElement","enableIndicator","undefined","tabIndicator"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useImperativeHandle } from 'react';\nimport type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';\nimport { ScrollView, View } from 'react-native';\nimport { useSharedValue } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type TabsProps from './TabsProps';\nimport type { TabsInstance } from './TabsProps';\nimport TabIndicator from './TabIndicator';\nimport IndexAwareTab from './IndexAwareTab';\nimport useTabCoordinates from './useTabCoordinates';\nimport useScrollViewReaction from './useScrollViewReaction';\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        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 = useSharedValue<number>(initialIndex);\n\n    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;\n\n    const getCurrentIndex = (): number => sharedIndex.value;\n\n    const setTab = (newIndex: number) => {\n        sharedIndex.value = newIndex;\n    };\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            getCurrentIndex,\n            setTab,\n        }),\n        [sharedIndex],\n    );\n\n    const styles = useStyles();\n\n    const { coordinates, updateCoordinate } = useTabCoordinates(children);\n\n    const { scrollViewRef, onLayout } = useScrollViewReaction(sharedIndex, coordinates);\n\n    const isReadyToRenderIndicator = coordinates.length > 0;\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\n        const onMouseDown = (e: GestureResponderEvent) => {\n            if (keyboardShouldPersistTaps === 'always') {\n                e.preventDefault();\n            }\n        };\n\n        const onPress = () => {\n            setTab(index);\n\n            onChange?.(index);\n            // @ts-ignore\n            child.props.onPress?.();\n        };\n\n        // @ts-ignore\n        const tabElement = cloneElement(child, {\n            enableIndicator: !disableIndicator && !isReadyToRenderIndicator,\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                sharedIndex={sharedIndex}\n            />\n        );\n    });\n\n    const tabIndicator = isReadyToRenderIndicator ? (\n        <TabIndicator\n            coordinates={coordinates}\n            disabled={disableIndicator}\n            scrollable={scrollable}\n            sharedIndex={sharedIndex}\n        />\n    ) : null;\n\n    return (\n        <View\n            onLayout={onLayout}\n            style={css([\n                styles.root,\n                scrollable ? undefined : styles.fixedRoot,\n                style,\n            ])}\n        >\n            {scrollable ? (\n                <ScrollView\n                    automaticallyAdjustContentInsets={false}\n                    bounces={false}\n                    contentContainerStyle={styles.scrollableContainer}\n                    directionalLockEnabled={true}\n                    horizontal={true}\n                    ref={scrollViewRef}\n                    scrollsToTop={false}\n                    showsHorizontalScrollIndicator={false}\n                    showsVerticalScrollIndicator={false}\n                    keyboardDismissMode={keyboardDismissMode}\n                    keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n                >\n                    {tabElements}\n                    {tabIndicator}\n                </ScrollView>\n            ) : (\n                <React.Fragment>\n                    {tabElements}\n                    {tabIndicator}\n                </React.Fragment>\n            )}\n        </View>\n    );\n});\n\nexport default Tabs;\n"],"mappings":"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"}
+{"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","initialIndex","disableIndicator","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","style","variant","UNSTABLE_sharedIndex","fallbackSharedIndex","initialValue","sharedIndex","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        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\n    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;\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\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            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            />\n        );\n    });\n\n    const tabIndicator = canRenderIndicator ? (\n        <TabIndicator\n            coordinates={coordinates}\n            disabled={disableIndicator}\n            initialIndex={sharedIndex.initialValue}\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                        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 { SharedValue } from 'react-native-reanimated';\nimport type { TabVariant } from '../Tab';\nimport type { OverridableComponentProps } from '../types';\n\nexport type KeyboardDismissMode =\n    'none'\n    | 'on-drag'\n    | 'interactive'; // ios only\n\nexport type KeyboardShouldPersistTaps =\n    'never'\n    | boolean\n    | 'always'\n    | 'handled'; // app only\n\nexport interface TabsInstance {\n    /**\n     * Get current tab index.\n     */\n    getCurrentIndex: () => number;\n\n    /**\n     * Function to scroll to a specific tab. Invalid index is ignored.\n     * @param index\n     */\n    setTab: (index: number) => void;\n}\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     * 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?: SharedValue<number>;\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 { Animated, ViewProps } from 'react-native';\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     * 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":""}

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

@@ -1 +1 @@
-{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './Tabs';\nexport type { default as TabsProps, TabsInstance } from './TabsProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,QAAxB"}
+{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './Tabs';\nexport type { default as TabsProps } from './TabsProps';\nexport type { TabsInstance } from './types';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,QAAxB"}

package/build/module/Tabs/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["export type KeyboardDismissMode =\n    'none'\n    | 'on-drag'\n    | 'interactive'; // ios only\n\nexport type KeyboardShouldPersistTaps =\n    'never'\n    | boolean\n    | 'always'\n    | 'handled'; // app only\n\nexport interface TabsInstance {\n    /**\n     * Function to scroll to a specific tab. Invalid index is ignored.\n     * @param index\n     */\n    setTab: (index: number) => void;\n}\n"],"mappings":""}

package/build/module/Tabs/useIndexStore.js

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from 'react';
+import { SimpleStore } from '../store';
+export default function useIndexStore(value) {
+  const {
+    animatedValue,
+    initialValue
+  } = value;
+  const store = useRef(new SimpleStore(initialValue)).current;
+  useEffect(() => {
+    const id = animatedValue.addListener(newIndex => {
+      store.dispatch(newIndex.value);
+    });
+    return () => {
+      animatedValue.removeListener(id);
+    };
+  }, [animatedValue]);
+  useEffect(() => {
+    return () => {
+      store.removeAllListeners();
+    };
+  }, [store]);
+  return store;
+}
+;
+//# sourceMappingURL=useIndexStore.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useRef","SimpleStore","useIndexStore","value","animatedValue","initialValue","store","current","id","addListener","newIndex","dispatch","removeListener","removeAllListeners"],"sources":["useIndexStore.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { MonoStore } from '../store';\nimport { SimpleStore } from '../store';\nimport type { SyncAnimatedValue } from '../types';\n\nexport default function useIndexStore(value: SyncAnimatedValue): MonoStore<number> {\n    const {\n        animatedValue,\n        initialValue,\n    } = value;\n\n    const store = useRef(new SimpleStore(initialValue)).current;\n\n    useEffect(() => {\n        const id = animatedValue.addListener((newIndex) => {\n            store.dispatch(newIndex.value);\n        });\n\n        return () => {\n            animatedValue.removeListener(id);\n        };\n    }, [animatedValue]);\n\n    useEffect(() => {\n        return () => {\n            store.removeAllListeners();\n        };\n    }, [store]);\n\n    return store;\n};\n"],"mappings":"AAAA,SAASA,SAAT,EAAoBC,MAApB,QAAkC,OAAlC;AAEA,SAASC,WAAT,QAA4B,UAA5B;AAGA,eAAe,SAASC,aAAT,CAAuBC,KAAvB,EAAoE;EAC/E,MAAM;IACFC,aADE;IAEFC;EAFE,IAGFF,KAHJ;EAKA,MAAMG,KAAK,GAAGN,MAAM,CAAC,IAAIC,WAAJ,CAAgBI,YAAhB,CAAD,CAAN,CAAsCE,OAApD;EAEAR,SAAS,CAAC,MAAM;IACZ,MAAMS,EAAE,GAAGJ,aAAa,CAACK,WAAd,CAA2BC,QAAD,IAAc;MAC/CJ,KAAK,CAACK,QAAN,CAAeD,QAAQ,CAACP,KAAxB;IACH,CAFU,CAAX;IAIA,OAAO,MAAM;MACTC,aAAa,CAACQ,cAAd,CAA6BJ,EAA7B;IACH,CAFD;EAGH,CARQ,EAQN,CAACJ,aAAD,CARM,CAAT;EAUAL,SAAS,CAAC,MAAM;IACZ,OAAO,MAAM;MACTO,KAAK,CAACO,kBAAN;IACH,CAFD;EAGH,CAJQ,EAIN,CAACP,KAAD,CAJM,CAAT;EAMA,OAAOA,KAAP;AACH;AAAA"}

package/build/module/Tabs/useScrollViewReaction.js

@@ -1,9 +1,11 @@
-import { useCallback, useRef } from 'react';
-import { Platform } from 'react-native';
-import { runOnJS, scrollTo, useAnimatedReaction, useAnimatedRef } from 'react-native-reanimated';
-export default function useScrollViewReaction(sharedIndex, coordinates) {
-  const scrollViewRef = useAnimatedRef();
+import { useCallback, useContext, useEffect, useRef } from 'react';
+import InternalContext from './InternalContext';
+export default function useScrollViewReaction(coordinates) {
+  const scrollViewRef = useRef(null);
   const lastScrolledXRef = useRef(NaN);
+  const {
+    indexStore
+  } = useContext(InternalContext);
 
   const scrollToX = x => {
     if (Number.isFinite(x)) {
@@ -14,37 +16,30 @@ export default function useScrollViewReaction(sharedIndex, coordinates) {
         y: 0,
         animated: true
       });
-      didScrollToX(x);
+      lastScrolledXRef.current = x;
     }
   };
 
-  const didScrollToX = x => {
-    lastScrolledXRef.current = x;
-  };
-
   const onLayout = useCallback(() => {
     scrollToX(lastScrolledXRef.current);
   }, []);
-  useAnimatedReaction(() => {
-    const prevIndex = sharedIndex.value - 1;
-    const prevCoordinate = coordinates[prevIndex];
-
-    if (prevCoordinate) {
-      const prevTabWidth = prevCoordinate.x2 - prevCoordinate.x1;
-      return Math.floor(prevCoordinate.x1 + prevTabWidth / 2);
-    }
+  useEffect(() => {
+    const computeNextScrollX = index => {
+      const prevIndex = index - 1;
+      const prevCoordinate = coordinates[prevIndex];
 
-    return 0;
-  }, (x, prevX) => {
-    if (x !== prevX) {
-      if (Platform.OS === 'web') {
-        runOnJS(scrollToX)(x);
-      } else {
-        scrollTo(scrollViewRef, x, 0, true);
-        runOnJS(didScrollToX)(x);
+      if (prevCoordinate) {
+        const prevTabWidth = prevCoordinate.x2 - prevCoordinate.x1;
+        return Math.floor(prevCoordinate.x1 + prevTabWidth / 2);
       }
-    }
-  }, [coordinates]);
+
+      return 0;
+    };
+
+    return indexStore.subscribe(currentIndex => {
+      scrollToX(computeNextScrollX(currentIndex));
+    });
+  }, [indexStore, coordinates]);
   return {
     scrollViewRef,
     onLayout

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

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useRef","Platform","runOnJS","scrollTo","useAnimatedReaction","useAnimatedRef","useScrollViewReaction","sharedIndex","coordinates","scrollViewRef","lastScrolledXRef","NaN","scrollToX","x","Number","isFinite","current","y","animated","didScrollToX","onLayout","prevIndex","value","prevCoordinate","prevTabWidth","x2","x1","Math","floor","prevX","OS"],"sources":["useScrollViewReaction.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\nimport { useCallback, useRef } from 'react';\nimport type { ScrollView, ViewProps } from 'react-native';\nimport { Platform } from 'react-native';\nimport { runOnJS, scrollTo, SharedValue, useAnimatedReaction, useAnimatedRef } from 'react-native-reanimated';\nimport type TabCoordinate from './TabCoordinate';\n\nexport interface UseScrollViewReaction {\n    scrollViewRef: MutableRefObject<ScrollView | null>;\n    onLayout: ViewProps['onLayout'];\n}\n\nexport default function useScrollViewReaction(\n    sharedIndex: SharedValue<number>,\n    coordinates: TabCoordinate[],\n): UseScrollViewReaction {\n    const scrollViewRef = useAnimatedRef<ScrollView>();\n\n    const lastScrolledXRef = useRef<number>(NaN);\n\n    const scrollToX = (x: number) => {\n        if (Number.isFinite(x)) {\n            scrollViewRef.current?.scrollTo({ x, y: 0, animated: true });\n\n            didScrollToX(x);\n        }\n    };\n\n    const didScrollToX = (x: number) => {\n        lastScrolledXRef.current = x;\n    };\n\n    const onLayout = useCallback(() => {\n        scrollToX(lastScrolledXRef.current);\n    }, []);\n\n    useAnimatedReaction(\n        () => {\n            const prevIndex = sharedIndex.value - 1;\n            const prevCoordinate = coordinates[prevIndex];\n\n            if (prevCoordinate) {\n                const prevTabWidth = prevCoordinate.x2 - prevCoordinate.x1;\n                return Math.floor(prevCoordinate.x1 + prevTabWidth / 2);\n            }\n\n            return 0;\n        },\n        (x, prevX) => {\n            if (x !== prevX) {\n                if (Platform.OS === 'web') {\n                    runOnJS(scrollToX)(x);\n                } else {\n                    scrollTo(scrollViewRef, x, 0, true);\n                    runOnJS(didScrollToX)(x);\n                }\n            }\n        },\n        [coordinates],\n    );\n\n    return { scrollViewRef, onLayout };\n};\n"],"mappings":"AACA,SAASA,WAAT,EAAsBC,MAAtB,QAAoC,OAApC;AAEA,SAASC,QAAT,QAAyB,cAAzB;AACA,SAASC,OAAT,EAAkBC,QAAlB,EAAyCC,mBAAzC,EAA8DC,cAA9D,QAAoF,yBAApF;AAQA,eAAe,SAASC,qBAAT,CACXC,WADW,EAEXC,WAFW,EAGU;EACrB,MAAMC,aAAa,GAAGJ,cAAc,EAApC;EAEA,MAAMK,gBAAgB,GAAGV,MAAM,CAASW,GAAT,CAA/B;;EAEA,MAAMC,SAAS,GAAIC,CAAD,IAAe;IAC7B,IAAIC,MAAM,CAACC,QAAP,CAAgBF,CAAhB,CAAJ,EAAwB;MAAA;;MACpB,yBAAAJ,aAAa,CAACO,OAAd,gFAAuBb,QAAvB,CAAgC;QAAEU,CAAF;QAAKI,CAAC,EAAE,CAAR;QAAWC,QAAQ,EAAE;MAArB,CAAhC;MAEAC,YAAY,CAACN,CAAD,CAAZ;IACH;EACJ,CAND;;EAQA,MAAMM,YAAY,GAAIN,CAAD,IAAe;IAChCH,gBAAgB,CAACM,OAAjB,GAA2BH,CAA3B;EACH,CAFD;;EAIA,MAAMO,QAAQ,GAAGrB,WAAW,CAAC,MAAM;IAC/Ba,SAAS,CAACF,gBAAgB,CAACM,OAAlB,CAAT;EACH,CAF2B,EAEzB,EAFyB,CAA5B;EAIAZ,mBAAmB,CACf,MAAM;IACF,MAAMiB,SAAS,GAAGd,WAAW,CAACe,KAAZ,GAAoB,CAAtC;IACA,MAAMC,cAAc,GAAGf,WAAW,CAACa,SAAD,CAAlC;;IAEA,IAAIE,cAAJ,EAAoB;MAChB,MAAMC,YAAY,GAAGD,cAAc,CAACE,EAAf,GAAoBF,cAAc,CAACG,EAAxD;MACA,OAAOC,IAAI,CAACC,KAAL,CAAWL,cAAc,CAACG,EAAf,GAAoBF,YAAY,GAAG,CAA9C,CAAP;IACH;;IAED,OAAO,CAAP;EACH,CAXc,EAYf,CAACX,CAAD,EAAIgB,KAAJ,KAAc;IACV,IAAIhB,CAAC,KAAKgB,KAAV,EAAiB;MACb,IAAI5B,QAAQ,CAAC6B,EAAT,KAAgB,KAApB,EAA2B;QACvB5B,OAAO,CAACU,SAAD,CAAP,CAAmBC,CAAnB;MACH,CAFD,MAEO;QACHV,QAAQ,CAACM,aAAD,EAAgBI,CAAhB,EAAmB,CAAnB,EAAsB,IAAtB,CAAR;QACAX,OAAO,CAACiB,YAAD,CAAP,CAAsBN,CAAtB;MACH;IACJ;EACJ,CArBc,EAsBf,CAACL,WAAD,CAtBe,CAAnB;EAyBA,OAAO;IAAEC,aAAF;IAAiBW;EAAjB,CAAP;AACH;AAAA"}
+{"version":3,"names":["useCallback","useContext","useEffect","useRef","InternalContext","useScrollViewReaction","coordinates","scrollViewRef","lastScrolledXRef","NaN","indexStore","scrollToX","x","Number","isFinite","current","scrollTo","y","animated","onLayout","computeNextScrollX","index","prevIndex","prevCoordinate","prevTabWidth","x2","x1","Math","floor","subscribe","currentIndex"],"sources":["useScrollViewReaction.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\nimport { useCallback, useContext, useEffect, useRef } from 'react';\nimport type { ScrollView, ViewProps } from 'react-native';\nimport type TabCoordinate from './TabCoordinate';\nimport InternalContext from './InternalContext';\n\nexport interface UseScrollViewReaction {\n    scrollViewRef: MutableRefObject<ScrollView | null>;\n    onLayout: ViewProps['onLayout'];\n}\n\nexport default function useScrollViewReaction(\n    coordinates: TabCoordinate[],\n): UseScrollViewReaction {\n    const scrollViewRef = useRef<ScrollView | null>(null);\n\n    const lastScrolledXRef = useRef<number>(NaN);\n\n    const { indexStore } = useContext(InternalContext);\n\n    const scrollToX = (x: number) => {\n        if (Number.isFinite(x)) {\n            scrollViewRef.current?.scrollTo({ x, y: 0, animated: true });\n\n            lastScrolledXRef.current = x;\n        }\n    };\n\n    const onLayout = useCallback(() => {\n        scrollToX(lastScrolledXRef.current);\n    }, []);\n\n    useEffect(() => {\n        const computeNextScrollX = (index: number) => {\n            const prevIndex = index - 1;\n            const prevCoordinate = coordinates[prevIndex];\n\n            if (prevCoordinate) {\n                const prevTabWidth = prevCoordinate.x2 - prevCoordinate.x1;\n                return Math.floor(prevCoordinate.x1 + prevTabWidth / 2);\n            }\n\n            return 0;\n        };\n\n        return indexStore.subscribe(currentIndex => {\n            scrollToX(computeNextScrollX(currentIndex));\n        });\n    }, [indexStore, coordinates]);\n\n    return { scrollViewRef, onLayout };\n};\n"],"mappings":"AACA,SAASA,WAAT,EAAsBC,UAAtB,EAAkCC,SAAlC,EAA6CC,MAA7C,QAA2D,OAA3D;AAGA,OAAOC,eAAP,MAA4B,mBAA5B;AAOA,eAAe,SAASC,qBAAT,CACXC,WADW,EAEU;EACrB,MAAMC,aAAa,GAAGJ,MAAM,CAAoB,IAApB,CAA5B;EAEA,MAAMK,gBAAgB,GAAGL,MAAM,CAASM,GAAT,CAA/B;EAEA,MAAM;IAAEC;EAAF,IAAiBT,UAAU,CAACG,eAAD,CAAjC;;EAEA,MAAMO,SAAS,GAAIC,CAAD,IAAe;IAC7B,IAAIC,MAAM,CAACC,QAAP,CAAgBF,CAAhB,CAAJ,EAAwB;MAAA;;MACpB,yBAAAL,aAAa,CAACQ,OAAd,gFAAuBC,QAAvB,CAAgC;QAAEJ,CAAF;QAAKK,CAAC,EAAE,CAAR;QAAWC,QAAQ,EAAE;MAArB,CAAhC;MAEAV,gBAAgB,CAACO,OAAjB,GAA2BH,CAA3B;IACH;EACJ,CAND;;EAQA,MAAMO,QAAQ,GAAGnB,WAAW,CAAC,MAAM;IAC/BW,SAAS,CAACH,gBAAgB,CAACO,OAAlB,CAAT;EACH,CAF2B,EAEzB,EAFyB,CAA5B;EAIAb,SAAS,CAAC,MAAM;IACZ,MAAMkB,kBAAkB,GAAIC,KAAD,IAAmB;MAC1C,MAAMC,SAAS,GAAGD,KAAK,GAAG,CAA1B;MACA,MAAME,cAAc,GAAGjB,WAAW,CAACgB,SAAD,CAAlC;;MAEA,IAAIC,cAAJ,EAAoB;QAChB,MAAMC,YAAY,GAAGD,cAAc,CAACE,EAAf,GAAoBF,cAAc,CAACG,EAAxD;QACA,OAAOC,IAAI,CAACC,KAAL,CAAWL,cAAc,CAACG,EAAf,GAAoBF,YAAY,GAAG,CAA9C,CAAP;MACH;;MAED,OAAO,CAAP;IACH,CAVD;;IAYA,OAAOd,UAAU,CAACmB,SAAX,CAAqBC,YAAY,IAAI;MACxCnB,SAAS,CAACS,kBAAkB,CAACU,YAAD,CAAnB,CAAT;IACH,CAFM,CAAP;EAGH,CAhBQ,EAgBN,CAACpB,UAAD,EAAaJ,WAAb,CAhBM,CAAT;EAkBA,OAAO;IAAEC,aAAF;IAAiBY;EAAjB,CAAP;AACH;AAAA"}

package/build/module/Tabs/useTabCoordinates.js

@@ -1,30 +1,21 @@
-import React, { useRef, useState } from 'react';
-import { isEveryDefined } from '@fountain-ui/utils';
+import { useRef, useState } from 'react';
+import { isEveryTabCoordinatesDefined } from './utils';
 export default function useTabCoordinates(tabElements) {
-  const incompleteCoordinatesRef = useRef([]);
-  const [completeCoordinates, setCompleteCoordinates] = useState([]);
-
-  const isAllCoordinatesDefined = coordinates => {
-    const numberOfTab = React.Children.count(tabElements);
-    const numberOfCoordinates = coordinates.length;
-    const everyCoordinatesDefined = isEveryDefined(coordinates);
-    return numberOfTab === numberOfCoordinates && everyCoordinatesDefined;
-  };
+  const [coordinates, setCoordinates] = useState([]);
+  const cacheRef = useRef([]);
 
   const updateCoordinate = (index, x, width) => {
-    incompleteCoordinatesRef.current[index] = {
+    cacheRef.current[index] = {
       x1: x,
       x2: x + width
     };
 
-    if (isAllCoordinatesDefined(incompleteCoordinatesRef.current)) {
-      setCompleteCoordinates(incompleteCoordinatesRef.current);
+    if (isEveryTabCoordinatesDefined(cacheRef.current, tabElements)) {
+      setCoordinates([...cacheRef.current]);
+      cacheRef.current = [];
     }
   };
 
-  return {
-    coordinates: completeCoordinates,
-    updateCoordinate
-  };
+  return [coordinates, updateCoordinate];
 }
 //# sourceMappingURL=useTabCoordinates.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useRef","useState","isEveryDefined","useTabCoordinates","tabElements","incompleteCoordinatesRef","completeCoordinates","setCompleteCoordinates","isAllCoordinatesDefined","coordinates","numberOfTab","Children","count","numberOfCoordinates","length","everyCoordinatesDefined","updateCoordinate","index","x","width","current","x1","x2"],"sources":["useTabCoordinates.ts"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport { isEveryDefined } from '@fountain-ui/utils';\nimport TabCoordinate from './TabCoordinate';\n\nexport interface UseTabCoordinates {\n    coordinates: TabCoordinate[];\n    updateCoordinate: (index: number, x: number, width: number) => void;\n}\n\nexport default function useTabCoordinates(tabElements: React.ReactNode): UseTabCoordinates {\n    const incompleteCoordinatesRef = useRef<TabCoordinate[]>([]);\n\n    const [completeCoordinates, setCompleteCoordinates] = useState<TabCoordinate[]>([]);\n\n    const isAllCoordinatesDefined = (coordinates: TabCoordinate[]): boolean => {\n        const numberOfTab = React.Children.count(tabElements);\n        const numberOfCoordinates = coordinates.length;\n\n        const everyCoordinatesDefined = isEveryDefined(coordinates);\n\n        return numberOfTab === numberOfCoordinates && everyCoordinatesDefined;\n    };\n\n    const updateCoordinate = (index: number, x: number, width: number) => {\n        incompleteCoordinatesRef.current[index] = { x1: x, x2: x + width };\n\n        if (isAllCoordinatesDefined(incompleteCoordinatesRef.current)) {\n            setCompleteCoordinates(incompleteCoordinatesRef.current);\n        }\n    };\n\n    return {\n        coordinates: completeCoordinates,\n        updateCoordinate,\n    };\n}\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,MAAhB,EAAwBC,QAAxB,QAAwC,OAAxC;AACA,SAASC,cAAT,QAA+B,oBAA/B;AAQA,eAAe,SAASC,iBAAT,CAA2BC,WAA3B,EAA4E;EACvF,MAAMC,wBAAwB,GAAGL,MAAM,CAAkB,EAAlB,CAAvC;EAEA,MAAM,CAACM,mBAAD,EAAsBC,sBAAtB,IAAgDN,QAAQ,CAAkB,EAAlB,CAA9D;;EAEA,MAAMO,uBAAuB,GAAIC,WAAD,IAA2C;IACvE,MAAMC,WAAW,GAAGX,KAAK,CAACY,QAAN,CAAeC,KAAf,CAAqBR,WAArB,CAApB;IACA,MAAMS,mBAAmB,GAAGJ,WAAW,CAACK,MAAxC;IAEA,MAAMC,uBAAuB,GAAGb,cAAc,CAACO,WAAD,CAA9C;IAEA,OAAOC,WAAW,KAAKG,mBAAhB,IAAuCE,uBAA9C;EACH,CAPD;;EASA,MAAMC,gBAAgB,GAAG,CAACC,KAAD,EAAgBC,CAAhB,EAA2BC,KAA3B,KAA6C;IAClEd,wBAAwB,CAACe,OAAzB,CAAiCH,KAAjC,IAA0C;MAAEI,EAAE,EAAEH,CAAN;MAASI,EAAE,EAAEJ,CAAC,GAAGC;IAAjB,CAA1C;;IAEA,IAAIX,uBAAuB,CAACH,wBAAwB,CAACe,OAA1B,CAA3B,EAA+D;MAC3Db,sBAAsB,CAACF,wBAAwB,CAACe,OAA1B,CAAtB;IACH;EACJ,CAND;;EAQA,OAAO;IACHX,WAAW,EAAEH,mBADV;IAEHU;EAFG,CAAP;AAIH"}
+{"version":3,"names":["useRef","useState","isEveryTabCoordinatesDefined","useTabCoordinates","tabElements","coordinates","setCoordinates","cacheRef","updateCoordinate","index","x","width","current","x1","x2"],"sources":["useTabCoordinates.ts"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport TabCoordinate from './TabCoordinate';\nimport { isEveryTabCoordinatesDefined } from './utils';\n\nexport interface UpdateCoordinate {\n    (index: number, x: number, width: number): void;\n}\n\nexport default function useTabCoordinates(tabElements: React.ReactNode): [TabCoordinate[], UpdateCoordinate] {\n    const [coordinates, setCoordinates] = useState<TabCoordinate[]>([]);\n\n    const cacheRef = useRef<TabCoordinate[]>([]);\n\n    const updateCoordinate: UpdateCoordinate = (index, x, width) => {\n        cacheRef.current[index] = { x1: x, x2: x + width };\n\n        if (isEveryTabCoordinatesDefined(cacheRef.current, tabElements)) {\n            setCoordinates([...cacheRef.current]);\n\n            cacheRef.current = [];\n        }\n    };\n\n    return [coordinates, updateCoordinate];\n}\n"],"mappings":"AAAA,SAAgBA,MAAhB,EAAwBC,QAAxB,QAAwC,OAAxC;AAEA,SAASC,4BAAT,QAA6C,SAA7C;AAMA,eAAe,SAASC,iBAAT,CAA2BC,WAA3B,EAA8F;EACzG,MAAM,CAACC,WAAD,EAAcC,cAAd,IAAgCL,QAAQ,CAAkB,EAAlB,CAA9C;EAEA,MAAMM,QAAQ,GAAGP,MAAM,CAAkB,EAAlB,CAAvB;;EAEA,MAAMQ,gBAAkC,GAAG,CAACC,KAAD,EAAQC,CAAR,EAAWC,KAAX,KAAqB;IAC5DJ,QAAQ,CAACK,OAAT,CAAiBH,KAAjB,IAA0B;MAAEI,EAAE,EAAEH,CAAN;MAASI,EAAE,EAAEJ,CAAC,GAAGC;IAAjB,CAA1B;;IAEA,IAAIT,4BAA4B,CAACK,QAAQ,CAACK,OAAV,EAAmBR,WAAnB,CAAhC,EAAiE;MAC7DE,cAAc,CAAC,CAAC,GAAGC,QAAQ,CAACK,OAAb,CAAD,CAAd;MAEAL,QAAQ,CAACK,OAAT,GAAmB,EAAnB;IACH;EACJ,CARD;;EAUA,OAAO,CAACP,WAAD,EAAcG,gBAAd,CAAP;AACH"}

package/build/module/Tabs/utils.js

@@ -0,0 +1,9 @@
+import { Children } from 'react';
+import { isEveryDefined } from '@fountain-ui/utils';
+export function isEveryTabCoordinatesDefined(coordinates, tabElements) {
+  const numberOfTabs = Children.count(tabElements);
+  const numberOfCoordinates = coordinates.length;
+  const everyCoordinatesDefined = isEveryDefined(coordinates);
+  return numberOfTabs === numberOfCoordinates && everyCoordinatesDefined;
+}
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +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"}

package/build/module/hooks/index.js

@@ -3,6 +3,8 @@ export { default as useCollapsibleAppBar } from './useCollapsibleAppBar';
 export { default as useContentContainerStyle } from './useContentContainerStyle';
 export { default as useElevationStyle } from './useElevationStyle';
 export { default as useFadeInAppBar } from './useFadeInAppBar';
+export { default as useImperativeState } from './useImperativeState';
+export { default as useSyncAnimatedValue } from './useSyncAnimatedValue';
 export { default as useThrottle } from './useThrottle';
 export { default as useValidWindowDimensions } from './useValidWindowDimensions';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["default","useBreakpointUp","useCollapsibleAppBar","useContentContainerStyle","useElevationStyle","useFadeInAppBar","useThrottle","useValidWindowDimensions"],"sources":["index.ts"],"sourcesContent":["export { default as useBreakpointUp } from './useBreakpointUp';\nexport { default as useCollapsibleAppBar } from './useCollapsibleAppBar';\nexport { default as useContentContainerStyle } from './useContentContainerStyle';\nexport { default as useElevationStyle } from './useElevationStyle';\nexport { default as useFadeInAppBar } from './useFadeInAppBar';\nexport { default as useThrottle } from './useThrottle';\nexport { default as useValidWindowDimensions } from './useValidWindowDimensions';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,eAApB,QAA2C,mBAA3C;AACA,SAASD,OAAO,IAAIE,oBAApB,QAAgD,wBAAhD;AACA,SAASF,OAAO,IAAIG,wBAApB,QAAoD,4BAApD;AACA,SAASH,OAAO,IAAII,iBAApB,QAA6C,qBAA7C;AACA,SAASJ,OAAO,IAAIK,eAApB,QAA2C,mBAA3C;AACA,SAASL,OAAO,IAAIM,WAApB,QAAuC,eAAvC;AACA,SAASN,OAAO,IAAIO,wBAApB,QAAoD,4BAApD"}
+{"version":3,"names":["default","useBreakpointUp","useCollapsibleAppBar","useContentContainerStyle","useElevationStyle","useFadeInAppBar","useImperativeState","useSyncAnimatedValue","useThrottle","useValidWindowDimensions"],"sources":["index.ts"],"sourcesContent":["export { default as useBreakpointUp } from './useBreakpointUp';\nexport { default as useCollapsibleAppBar } from './useCollapsibleAppBar';\nexport { default as useContentContainerStyle } from './useContentContainerStyle';\nexport { default as useElevationStyle } from './useElevationStyle';\nexport { default as useFadeInAppBar } from './useFadeInAppBar';\nexport { default as useImperativeState } from './useImperativeState';\nexport { default as useSyncAnimatedValue } from './useSyncAnimatedValue';\nexport { default as useThrottle } from './useThrottle';\nexport { default as useValidWindowDimensions } from './useValidWindowDimensions';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,eAApB,QAA2C,mBAA3C;AACA,SAASD,OAAO,IAAIE,oBAApB,QAAgD,wBAAhD;AACA,SAASF,OAAO,IAAIG,wBAApB,QAAoD,4BAApD;AACA,SAASH,OAAO,IAAII,iBAApB,QAA6C,qBAA7C;AACA,SAASJ,OAAO,IAAIK,eAApB,QAA2C,mBAA3C;AACA,SAASL,OAAO,IAAIM,kBAApB,QAA8C,sBAA9C;AACA,SAASN,OAAO,IAAIO,oBAApB,QAAgD,wBAAhD;AACA,SAASP,OAAO,IAAIQ,WAApB,QAAuC,eAAvC;AACA,SAASR,OAAO,IAAIS,wBAApB,QAAoD,4BAApD"}

package/build/module/hooks/useCollapsibleAppBar.js

@@ -139,7 +139,7 @@ export default function useCollapsibleAppBar() {
       overlapped.value = offsetY + nextTranslateY > 0;
       translateY.value = withTiming(nextTranslateY, ANIMATION_CONFIG);
     }
-  }, [keyboardDismissMode]);
+  }, [keyboardDismissMode, appBarHeight]);
   const hasCollapsible = collapsibleToolbarHeight > 0;
   const appBarStyle = [animatedStyle, {
     paddingTop: safeAreaInsets.top