@fountain-ui/core 2.0.0-beta.18 → 2.0.0-beta.20

package/build/commonjs/Tabs/IndexAwareTab.js

@@ -14,9 +14,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function IndexAwareTab(props) {
   const {
     children,
-    index
+    index,
+    initialIndex
   } = props;
-  const [selected, setSelected] = (0, _react.useState)(false);
+  const [selected, setSelected] = (0, _react.useState)(initialIndex === index);
   const {
     indexStore
   } = (0, _react.useContext)(_InternalContext.default);

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

@@ -1 +1 @@
-{"version":3,"names":["IndexAwareTab","props","children","index","selected","setSelected","useState","indexStore","useContext","InternalContext","useEffect","subscribe","currentIndex","cloneElement"],"sources":["IndexAwareTab.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { cloneElement, useContext, useEffect, useState } from 'react';\nimport InternalContext from './InternalContext';\n\nexport interface IndexAwareTabProps {\n    children: ReactElement;\n    index: number;\n}\n\nexport default function IndexAwareTab(props: IndexAwareTabProps) {\n    const {\n        children,\n        index,\n    } = props;\n\n    const [selected, setSelected] = useState(false);\n\n    const { indexStore } = useContext(InternalContext);\n\n    useEffect(() => {\n        return indexStore.subscribe((currentIndex) => {\n            setSelected(currentIndex === index);\n        });\n    }, [indexStore, index]);\n\n    return cloneElement(children, { selected });\n};\n"],"mappings":";;;;;;;AACA;;AACA;;;;AAOe,SAASA,aAAT,CAAuBC,KAAvB,EAAkD;EAC7D,MAAM;IACFC,QADE;IAEFC;EAFE,IAGFF,KAHJ;EAKA,MAAM,CAACG,QAAD,EAAWC,WAAX,IAA0B,IAAAC,eAAA,EAAS,KAAT,CAAhC;EAEA,MAAM;IAAEC;EAAF,IAAiB,IAAAC,iBAAA,EAAWC,wBAAX,CAAvB;EAEA,IAAAC,gBAAA,EAAU,MAAM;IACZ,OAAOH,UAAU,CAACI,SAAX,CAAsBC,YAAD,IAAkB;MAC1CP,WAAW,CAACO,YAAY,KAAKT,KAAlB,CAAX;IACH,CAFM,CAAP;EAGH,CAJD,EAIG,CAACI,UAAD,EAAaJ,KAAb,CAJH;EAMA,oBAAO,IAAAU,mBAAA,EAAaX,QAAb,EAAuB;IAAEE;EAAF,CAAvB,CAAP;AACH;;AAAA"}
+{"version":3,"names":["IndexAwareTab","props","children","index","initialIndex","selected","setSelected","useState","indexStore","useContext","InternalContext","useEffect","subscribe","currentIndex","cloneElement"],"sources":["IndexAwareTab.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { cloneElement, useContext, useEffect, useState } from 'react';\nimport InternalContext from './InternalContext';\n\nexport interface IndexAwareTabProps {\n    children: ReactElement;\n    index: number;\n    initialIndex: number;\n}\n\nexport default function IndexAwareTab(props: IndexAwareTabProps) {\n    const {\n        children,\n        index,\n        initialIndex,\n    } = props;\n\n    const [selected, setSelected] = useState(initialIndex === index);\n\n    const { indexStore } = useContext(InternalContext);\n\n    useEffect(() => {\n        return indexStore.subscribe((currentIndex) => {\n            setSelected(currentIndex === index);\n        });\n    }, [indexStore, index]);\n\n    return cloneElement(children, { selected });\n};\n"],"mappings":";;;;;;;AACA;;AACA;;;;AAQe,SAASA,aAAT,CAAuBC,KAAvB,EAAkD;EAC7D,MAAM;IACFC,QADE;IAEFC,KAFE;IAGFC;EAHE,IAIFH,KAJJ;EAMA,MAAM,CAACI,QAAD,EAAWC,WAAX,IAA0B,IAAAC,eAAA,EAASH,YAAY,KAAKD,KAA1B,CAAhC;EAEA,MAAM;IAAEK;EAAF,IAAiB,IAAAC,iBAAA,EAAWC,wBAAX,CAAvB;EAEA,IAAAC,gBAAA,EAAU,MAAM;IACZ,OAAOH,UAAU,CAACI,SAAX,CAAsBC,YAAD,IAAkB;MAC1CP,WAAW,CAACO,YAAY,KAAKV,KAAlB,CAAX;IACH,CAFM,CAAP;EAGH,CAJD,EAIG,CAACK,UAAD,EAAaL,KAAb,CAJH;EAMA,oBAAO,IAAAW,mBAAA,EAAaZ,QAAb,EAAuB;IAAEG;EAAF,CAAvB,CAAP;AACH;;AAAA"}

package/build/commonjs/Tabs/Tabs.js

@@ -25,6 +25,8 @@ var _useIndexStore = _interopRequireDefault(require("./useIndexStore"));
 
 var _InternalContext = _interopRequireDefault(require("./InternalContext"));
 
+var _utils = require("./utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -73,12 +75,14 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
     setTab
   }), [sharedIndex]);
   const styles = useStyles();
-  const {
-    coordinates,
-    updateCoordinate
-  } = (0, _useTabCoordinates.default)(children);
+  const [coordinates, updateCoordinate] = (0, _useTabCoordinates.default)(children);
+  const canRenderIndicator = (0, _utils.isEveryTabCoordinatesDefined)(coordinates, children);
   const indexStore = (0, _useIndexStore.default)(sharedIndex);
-  const isReadyToRenderIndicator = coordinates.length > 0;
+  (0, _react.useEffect)(() => {
+    return indexStore.subscribe(newIndex => {
+      onChange === null || onChange === void 0 ? void 0 : onChange(newIndex);
+    });
+  }, [indexStore, onChange]);
 
   const tabElements = _react.default.Children.map(children, (child, index) => {
     const onLayout = event => {
@@ -98,15 +102,14 @@ const Tabs = /*#__PURE__*/(0, _react.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__*/(0, _react.cloneElement)(child, {
-      enableIndicator: !disableIndicator && !isReadyToRenderIndicator,
+      enableIndicator: !disableIndicator && !canRenderIndicator,
       onLayout,
       onPress,
       onMouseDown,
@@ -115,11 +118,12 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
     });
     return /*#__PURE__*/_react.default.createElement(_IndexAwareTab.default, {
       children: tabElement,
-      index: index
+      index: index,
+      initialIndex: initialIndex
     });
   });
 
-  const tabIndicator = isReadyToRenderIndicator ? /*#__PURE__*/_react.default.createElement(_TabIndicator.default, {
+  const tabIndicator = canRenderIndicator ? /*#__PURE__*/_react.default.createElement(_TabIndicator.default, {
     coordinates: coordinates,
     disabled: disableIndicator,
     initialIndex: sharedIndex.initialValue,

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

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","Tabs","forwardRef","props","ref","children","initialIndex","disableIndicator","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","style","variant","UNSTABLE_sharedIndex","fallbackSharedIndex","useSyncAnimatedValue","initialValue","sharedIndex","setTab","newIndex","animatedValue","setValue","useImperativeHandle","styles","coordinates","updateCoordinate","useTabCoordinates","indexStore","useIndexStore","isReadyToRenderIndicator","length","tabElements","React","Children","map","child","index","onLayout","event","x","width","nativeEvent","layout","onMouseDown","e","preventDefault","onPress","tabElement","cloneElement","enableIndicator","undefined","tabIndicator","css"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, 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';\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 indexStore = useIndexStore(sharedIndex);\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            />\n        );\n    });\n\n    const tabIndicator = isReadyToRenderIndicator ? (\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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"}
+{"version":3,"names":["useStyles","theme","useTheme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","Tabs","forwardRef","props","ref","children","initialIndex","disableIndicator","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","style","variant","UNSTABLE_sharedIndex","fallbackSharedIndex","useSyncAnimatedValue","initialValue","sharedIndex","setTab","newIndex","animatedValue","setValue","useImperativeHandle","styles","coordinates","updateCoordinate","useTabCoordinates","canRenderIndicator","isEveryTabCoordinatesDefined","indexStore","useIndexStore","useEffect","subscribe","tabElements","React","Children","map","child","index","onLayout","event","x","width","nativeEvent","layout","onMouseDown","e","preventDefault","onPress","tabElement","cloneElement","enableIndicator","undefined","tabIndicator","css"],"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                initialIndex={initialIndex}\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/commonjs/Tabs/useTabCoordinates.js

@@ -5,40 +5,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = useTabCoordinates;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
-var _utils = require("@fountain-ui/utils");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _utils = require("./utils");
 
 function useTabCoordinates(tabElements) {
-  const incompleteCoordinatesRef = (0, _react.useRef)([]);
-  const [completeCoordinates, setCompleteCoordinates] = (0, _react.useState)([]);
-
-  const isAllCoordinatesDefined = coordinates => {
-    const numberOfTab = _react.default.Children.count(tabElements);
-
-    const numberOfCoordinates = coordinates.length;
-    const everyCoordinatesDefined = (0, _utils.isEveryDefined)(coordinates);
-    return numberOfTab === numberOfCoordinates && everyCoordinatesDefined;
-  };
+  const [coordinates, setCoordinates] = (0, _react.useState)([]);
+  const cacheRef = (0, _react.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 ((0, _utils.isEveryTabCoordinatesDefined)(cacheRef.current, tabElements)) {
+      setCoordinates([...cacheRef.current]);
+      cacheRef.current = [];
     }
   };
 
-  return {
-    coordinates: completeCoordinates,
-    updateCoordinate
-  };
+  return [coordinates, updateCoordinate];
 }
 //# sourceMappingURL=useTabCoordinates.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useTabCoordinates","tabElements","incompleteCoordinatesRef","useRef","completeCoordinates","setCompleteCoordinates","useState","isAllCoordinatesDefined","coordinates","numberOfTab","React","Children","count","numberOfCoordinates","length","everyCoordinatesDefined","isEveryDefined","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;;AACA;;;;;;AAQe,SAASA,iBAAT,CAA2BC,WAA3B,EAA4E;EACvF,MAAMC,wBAAwB,GAAG,IAAAC,aAAA,EAAwB,EAAxB,CAAjC;EAEA,MAAM,CAACC,mBAAD,EAAsBC,sBAAtB,IAAgD,IAAAC,eAAA,EAA0B,EAA1B,CAAtD;;EAEA,MAAMC,uBAAuB,GAAIC,WAAD,IAA2C;IACvE,MAAMC,WAAW,GAAGC,cAAA,CAAMC,QAAN,CAAeC,KAAf,CAAqBX,WAArB,CAApB;;IACA,MAAMY,mBAAmB,GAAGL,WAAW,CAACM,MAAxC;IAEA,MAAMC,uBAAuB,GAAG,IAAAC,qBAAA,EAAeR,WAAf,CAAhC;IAEA,OAAOC,WAAW,KAAKI,mBAAhB,IAAuCE,uBAA9C;EACH,CAPD;;EASA,MAAME,gBAAgB,GAAG,CAACC,KAAD,EAAgBC,CAAhB,EAA2BC,KAA3B,KAA6C;IAClElB,wBAAwB,CAACmB,OAAzB,CAAiCH,KAAjC,IAA0C;MAAEI,EAAE,EAAEH,CAAN;MAASI,EAAE,EAAEJ,CAAC,GAAGC;IAAjB,CAA1C;;IAEA,IAAIb,uBAAuB,CAACL,wBAAwB,CAACmB,OAA1B,CAA3B,EAA+D;MAC3DhB,sBAAsB,CAACH,wBAAwB,CAACmB,OAA1B,CAAtB;IACH;EACJ,CAND;;EAQA,OAAO;IACHb,WAAW,EAAEJ,mBADV;IAEHa;EAFG,CAAP;AAIH"}
+{"version":3,"names":["useTabCoordinates","tabElements","coordinates","setCoordinates","useState","cacheRef","useRef","updateCoordinate","index","x","width","current","x1","x2","isEveryTabCoordinatesDefined"],"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;;AAEA;;AAMe,SAASA,iBAAT,CAA2BC,WAA3B,EAA8F;EACzG,MAAM,CAACC,WAAD,EAAcC,cAAd,IAAgC,IAAAC,eAAA,EAA0B,EAA1B,CAAtC;EAEA,MAAMC,QAAQ,GAAG,IAAAC,aAAA,EAAwB,EAAxB,CAAjB;;EAEA,MAAMC,gBAAkC,GAAG,CAACC,KAAD,EAAQC,CAAR,EAAWC,KAAX,KAAqB;IAC5DL,QAAQ,CAACM,OAAT,CAAiBH,KAAjB,IAA0B;MAAEI,EAAE,EAAEH,CAAN;MAASI,EAAE,EAAEJ,CAAC,GAAGC;IAAjB,CAA1B;;IAEA,IAAI,IAAAI,mCAAA,EAA6BT,QAAQ,CAACM,OAAtC,EAA+CV,WAA/C,CAAJ,EAAiE;MAC7DE,cAAc,CAAC,CAAC,GAAGE,QAAQ,CAACM,OAAb,CAAD,CAAd;MAEAN,QAAQ,CAACM,OAAT,GAAmB,EAAnB;IACH;EACJ,CARD;;EAUA,OAAO,CAACT,WAAD,EAAcK,gBAAd,CAAP;AACH"}

package/build/commonjs/Tabs/utils.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isEveryTabCoordinatesDefined = isEveryTabCoordinatesDefined;
+
+var _react = require("react");
+
+var _utils = require("@fountain-ui/utils");
+
+function isEveryTabCoordinatesDefined(coordinates, tabElements) {
+  const numberOfTabs = _react.Children.count(tabElements);
+
+  const numberOfCoordinates = coordinates.length;
+  const everyCoordinatesDefined = (0, _utils.isEveryDefined)(coordinates);
+  return numberOfTabs === numberOfCoordinates && everyCoordinatesDefined;
+}
+//# sourceMappingURL=utils.js.map

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

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

package/build/commonjs/hooks/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "useFadeInAppBar", {
     return _useFadeInAppBar.default;
   }
 });
+Object.defineProperty(exports, "useImperativeState", {
+  enumerable: true,
+  get: function () {
+    return _useImperativeState.default;
+  }
+});
 Object.defineProperty(exports, "useSyncAnimatedValue", {
   enumerable: true,
   get: function () {
@@ -62,6 +68,8 @@ var _useElevationStyle = _interopRequireDefault(require("./useElevationStyle"));
 
 var _useFadeInAppBar = _interopRequireDefault(require("./useFadeInAppBar"));
 
+var _useImperativeState = _interopRequireDefault(require("./useImperativeState"));
+
 var _useSyncAnimatedValue = _interopRequireDefault(require("./useSyncAnimatedValue"));
 
 var _useThrottle = _interopRequireDefault(require("./useThrottle"));

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

@@ -1 +1 @@
-{"version":3,"names":[],"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 useSyncAnimatedValue } from './useSyncAnimatedValue';\nexport { default as useThrottle } from './useThrottle';\nexport { default as useValidWindowDimensions } from './useValidWindowDimensions';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA"}
+{"version":3,"names":[],"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;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA"}

package/build/commonjs/hooks/useImperativeState.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useImperativeState;
+
+var _react = require("react");
+
+function useImperativeState(initialValue) {
+  return (0, _react.useMemo)(() => {
+    let prevState = initialValue;
+    let currentState = initialValue;
+    return {
+      hasChanged: () => prevState !== currentState,
+      get: () => currentState,
+      set: nextState => {
+        prevState = currentState;
+        currentState = nextState;
+      }
+    };
+  }, []);
+}
+
+;
+//# sourceMappingURL=useImperativeState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useImperativeState","initialValue","useMemo","prevState","currentState","hasChanged","get","set","nextState"],"sources":["useImperativeState.ts"],"sourcesContent":["import { useMemo } from 'react';\n\n\nexport interface ImperativeState<T> {\n    hasChanged: () => boolean;\n    get: () => T;\n    set: (nextState: T) => void;\n}\n\nexport default function useImperativeState<T>(initialValue: T): ImperativeState<T> {\n    return useMemo<ImperativeState<T>>(() => {\n        let prevState: T = initialValue;\n        let currentState: T = initialValue;\n\n        return {\n            hasChanged: () => prevState !== currentState,\n            get: () => currentState,\n            set: (nextState) => {\n                prevState = currentState;\n                currentState = nextState;\n            },\n        };\n    }, []);\n};\n"],"mappings":";;;;;;;AAAA;;AASe,SAASA,kBAAT,CAA+BC,YAA/B,EAAoE;EAC/E,OAAO,IAAAC,cAAA,EAA4B,MAAM;IACrC,IAAIC,SAAY,GAAGF,YAAnB;IACA,IAAIG,YAAe,GAAGH,YAAtB;IAEA,OAAO;MACHI,UAAU,EAAE,MAAMF,SAAS,KAAKC,YAD7B;MAEHE,GAAG,EAAE,MAAMF,YAFR;MAGHG,GAAG,EAAGC,SAAD,IAAe;QAChBL,SAAS,GAAGC,YAAZ;QACAA,YAAY,GAAGI,SAAf;MACH;IANE,CAAP;EAQH,CAZM,EAYJ,EAZI,CAAP;AAaH;;AAAA"}

package/build/commonjs/store/SimpleStore.js

@@ -7,6 +7,10 @@ exports.default = void 0;
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function refEqual(a, b) {
+  return a === b;
+}
+
 class SimpleStore {
   constructor(initialData) {
     _defineProperty(this, "data", void 0);
@@ -18,7 +22,6 @@ class SimpleStore {
 
   subscribe(listener) {
     this.listeners.push(listener);
-    listener(this.data);
     return () => {
       const index = this.listeners.indexOf(listener);
       this.listeners.splice(index, 1);
@@ -26,6 +29,11 @@ class SimpleStore {
   }
 
   dispatch(data) {
+    // Do not dispatch if data ref is equal
+    if (refEqual(this.data, data)) {
+      return;
+    }
+
     this.data = data;
 
     for (const id in this.listeners) {

package/build/commonjs/store/SimpleStore.js.map

@@ -1 +1 @@
-{"version":3,"names":["SimpleStore","constructor","initialData","data","subscribe","listener","listeners","push","index","indexOf","splice","dispatch","id","removeAllListeners","length"],"sources":["SimpleStore.ts"],"sourcesContent":["import { MonoStore, StoreSubscription } from './types';\n\nexport default class SimpleStore<T> implements MonoStore<T> {\n\n    private data: T;\n\n    private listeners: Array<(data: T) => void> = [];\n\n    constructor(initialData: T) {\n        this.data = initialData;\n    }\n\n    subscribe(listener: (data: T) => void): StoreSubscription {\n        this.listeners.push(listener);\n\n        listener(this.data);\n\n        return () => {\n            const index = this.listeners.indexOf(listener);\n            this.listeners.splice(index, 1);\n        };\n    }\n\n    dispatch(data: T): void {\n        this.data = data;\n        for (const id in this.listeners) {\n            const listener = this.listeners[id];\n            listener?.(data);\n        }\n    }\n\n    removeAllListeners(): void {\n        this.listeners.splice(0, this.listeners.length);\n    }\n\n};\n"],"mappings":";;;;;;;;;AAEe,MAAMA,WAAN,CAA6C;EAMxDC,WAAW,CAACC,WAAD,EAAiB;IAAA;;IAAA,mCAFkB,EAElB;;IACxB,KAAKC,IAAL,GAAYD,WAAZ;EACH;;EAEDE,SAAS,CAACC,QAAD,EAAiD;IACtD,KAAKC,SAAL,CAAeC,IAAf,CAAoBF,QAApB;IAEAA,QAAQ,CAAC,KAAKF,IAAN,CAAR;IAEA,OAAO,MAAM;MACT,MAAMK,KAAK,GAAG,KAAKF,SAAL,CAAeG,OAAf,CAAuBJ,QAAvB,CAAd;MACA,KAAKC,SAAL,CAAeI,MAAf,CAAsBF,KAAtB,EAA6B,CAA7B;IACH,CAHD;EAIH;;EAEDG,QAAQ,CAACR,IAAD,EAAgB;IACpB,KAAKA,IAAL,GAAYA,IAAZ;;IACA,KAAK,MAAMS,EAAX,IAAiB,KAAKN,SAAtB,EAAiC;MAC7B,MAAMD,QAAQ,GAAG,KAAKC,SAAL,CAAeM,EAAf,CAAjB;MACAP,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGF,IAAH,CAAR;IACH;EACJ;;EAEDU,kBAAkB,GAAS;IACvB,KAAKP,SAAL,CAAeI,MAAf,CAAsB,CAAtB,EAAyB,KAAKJ,SAAL,CAAeQ,MAAxC;EACH;;AA/BuD;;;AAiC3D"}
+{"version":3,"names":["refEqual","a","b","SimpleStore","constructor","initialData","data","subscribe","listener","listeners","push","index","indexOf","splice","dispatch","id","removeAllListeners","length"],"sources":["SimpleStore.ts"],"sourcesContent":["import { MonoStore, StoreSubscription } from './types';\n\nfunction refEqual(a: any, b: any): boolean {\n    return a === b;\n}\n\nexport default class SimpleStore<T> implements MonoStore<T> {\n\n    private data: T;\n\n    private listeners: Array<(data: T) => void> = [];\n\n    constructor(initialData: T) {\n        this.data = initialData;\n    }\n\n    subscribe(listener: (data: T) => void): StoreSubscription {\n        this.listeners.push(listener);\n\n        return () => {\n            const index = this.listeners.indexOf(listener);\n            this.listeners.splice(index, 1);\n        };\n    }\n\n    dispatch(data: T): void {\n        // Do not dispatch if data ref is equal\n        if (refEqual(this.data, data)) {\n            return;\n        }\n\n        this.data = data;\n        for (const id in this.listeners) {\n            const listener = this.listeners[id];\n            listener?.(data);\n        }\n    }\n\n    removeAllListeners(): void {\n        this.listeners.splice(0, this.listeners.length);\n    }\n\n};\n"],"mappings":";;;;;;;;;AAEA,SAASA,QAAT,CAAkBC,CAAlB,EAA0BC,CAA1B,EAA2C;EACvC,OAAOD,CAAC,KAAKC,CAAb;AACH;;AAEc,MAAMC,WAAN,CAA6C;EAMxDC,WAAW,CAACC,WAAD,EAAiB;IAAA;;IAAA,mCAFkB,EAElB;;IACxB,KAAKC,IAAL,GAAYD,WAAZ;EACH;;EAEDE,SAAS,CAACC,QAAD,EAAiD;IACtD,KAAKC,SAAL,CAAeC,IAAf,CAAoBF,QAApB;IAEA,OAAO,MAAM;MACT,MAAMG,KAAK,GAAG,KAAKF,SAAL,CAAeG,OAAf,CAAuBJ,QAAvB,CAAd;MACA,KAAKC,SAAL,CAAeI,MAAf,CAAsBF,KAAtB,EAA6B,CAA7B;IACH,CAHD;EAIH;;EAEDG,QAAQ,CAACR,IAAD,EAAgB;IACpB;IACA,IAAIN,QAAQ,CAAC,KAAKM,IAAN,EAAYA,IAAZ,CAAZ,EAA+B;MAC3B;IACH;;IAED,KAAKA,IAAL,GAAYA,IAAZ;;IACA,KAAK,MAAMS,EAAX,IAAiB,KAAKN,SAAtB,EAAiC;MAC7B,MAAMD,QAAQ,GAAG,KAAKC,SAAL,CAAeM,EAAf,CAAjB;MACAP,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGF,IAAH,CAAR;IACH;EACJ;;EAEDU,kBAAkB,GAAS;IACvB,KAAKP,SAAL,CAAeI,MAAf,CAAsB,CAAtB,EAAyB,KAAKJ,SAAL,CAAeQ,MAAxC;EACH;;AAlCuD;;;AAoC3D"}

package/build/module/Tabs/IndexAwareTab.js

@@ -3,9 +3,10 @@ import InternalContext from './InternalContext';
 export default function IndexAwareTab(props) {
   const {
     children,
-    index
+    index,
+    initialIndex
   } = props;
-  const [selected, setSelected] = useState(false);
+  const [selected, setSelected] = useState(initialIndex === index);
   const {
     indexStore
   } = useContext(InternalContext);

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

@@ -1 +1 @@
-{"version":3,"names":["cloneElement","useContext","useEffect","useState","InternalContext","IndexAwareTab","props","children","index","selected","setSelected","indexStore","subscribe","currentIndex"],"sources":["IndexAwareTab.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { cloneElement, useContext, useEffect, useState } from 'react';\nimport InternalContext from './InternalContext';\n\nexport interface IndexAwareTabProps {\n    children: ReactElement;\n    index: number;\n}\n\nexport default function IndexAwareTab(props: IndexAwareTabProps) {\n    const {\n        children,\n        index,\n    } = props;\n\n    const [selected, setSelected] = useState(false);\n\n    const { indexStore } = useContext(InternalContext);\n\n    useEffect(() => {\n        return indexStore.subscribe((currentIndex) => {\n            setSelected(currentIndex === index);\n        });\n    }, [indexStore, index]);\n\n    return cloneElement(children, { selected });\n};\n"],"mappings":"AACA,SAAgBA,YAAhB,EAA8BC,UAA9B,EAA0CC,SAA1C,EAAqDC,QAArD,QAAqE,OAArE;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AAOA,eAAe,SAASC,aAAT,CAAuBC,KAAvB,EAAkD;EAC7D,MAAM;IACFC,QADE;IAEFC;EAFE,IAGFF,KAHJ;EAKA,MAAM,CAACG,QAAD,EAAWC,WAAX,IAA0BP,QAAQ,CAAC,KAAD,CAAxC;EAEA,MAAM;IAAEQ;EAAF,IAAiBV,UAAU,CAACG,eAAD,CAAjC;EAEAF,SAAS,CAAC,MAAM;IACZ,OAAOS,UAAU,CAACC,SAAX,CAAsBC,YAAD,IAAkB;MAC1CH,WAAW,CAACG,YAAY,KAAKL,KAAlB,CAAX;IACH,CAFM,CAAP;EAGH,CAJQ,EAIN,CAACG,UAAD,EAAaH,KAAb,CAJM,CAAT;EAMA,oBAAOR,YAAY,CAACO,QAAD,EAAW;IAAEE;EAAF,CAAX,CAAnB;AACH;AAAA"}
+{"version":3,"names":["cloneElement","useContext","useEffect","useState","InternalContext","IndexAwareTab","props","children","index","initialIndex","selected","setSelected","indexStore","subscribe","currentIndex"],"sources":["IndexAwareTab.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { cloneElement, useContext, useEffect, useState } from 'react';\nimport InternalContext from './InternalContext';\n\nexport interface IndexAwareTabProps {\n    children: ReactElement;\n    index: number;\n    initialIndex: number;\n}\n\nexport default function IndexAwareTab(props: IndexAwareTabProps) {\n    const {\n        children,\n        index,\n        initialIndex,\n    } = props;\n\n    const [selected, setSelected] = useState(initialIndex === index);\n\n    const { indexStore } = useContext(InternalContext);\n\n    useEffect(() => {\n        return indexStore.subscribe((currentIndex) => {\n            setSelected(currentIndex === index);\n        });\n    }, [indexStore, index]);\n\n    return cloneElement(children, { selected });\n};\n"],"mappings":"AACA,SAAgBA,YAAhB,EAA8BC,UAA9B,EAA0CC,SAA1C,EAAqDC,QAArD,QAAqE,OAArE;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AAQA,eAAe,SAASC,aAAT,CAAuBC,KAAvB,EAAkD;EAC7D,MAAM;IACFC,QADE;IAEFC,KAFE;IAGFC;EAHE,IAIFH,KAJJ;EAMA,MAAM,CAACI,QAAD,EAAWC,WAAX,IAA0BR,QAAQ,CAACM,YAAY,KAAKD,KAAlB,CAAxC;EAEA,MAAM;IAAEI;EAAF,IAAiBX,UAAU,CAACG,eAAD,CAAjC;EAEAF,SAAS,CAAC,MAAM;IACZ,OAAOU,UAAU,CAACC,SAAX,CAAsBC,YAAD,IAAkB;MAC1CH,WAAW,CAACG,YAAY,KAAKN,KAAlB,CAAX;IACH,CAFM,CAAP;EAGH,CAJQ,EAIN,CAACI,UAAD,EAAaJ,KAAb,CAJM,CAAT;EAMA,oBAAOR,YAAY,CAACO,QAAD,EAAW;IAAEG;EAAF,CAAX,CAAnB;AACH;AAAA"}

package/build/module/Tabs/Tabs.js

@@ -1,4 +1,4 @@
-import React, { cloneElement, forwardRef, useImperativeHandle } from 'react';
+import React, { cloneElement, forwardRef, useEffect, useImperativeHandle } from 'react';
 import { View } from 'react-native';
 import { css, useTheme } from '../styles';
 import { useSyncAnimatedValue } from '../hooks';
@@ -8,6 +8,7 @@ import IndexAwareTab from './IndexAwareTab';
 import useTabCoordinates from './useTabCoordinates';
 import useIndexStore from './useIndexStore';
 import InternalContext from './InternalContext';
+import { isEveryTabCoordinatesDefined } from './utils';
 
 const useStyles = function () {
   const theme = useTheme();
@@ -51,12 +52,14 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
     setTab
   }), [sharedIndex]);
   const styles = useStyles();
-  const {
-    coordinates,
-    updateCoordinate
-  } = useTabCoordinates(children);
+  const [coordinates, updateCoordinate] = useTabCoordinates(children);
+  const canRenderIndicator = isEveryTabCoordinatesDefined(coordinates, children);
   const indexStore = useIndexStore(sharedIndex);
-  const isReadyToRenderIndicator = coordinates.length > 0;
+  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 {
@@ -75,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,
@@ -92,10 +94,11 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
     });
     return /*#__PURE__*/React.createElement(IndexAwareTab, {
       children: tabElement,
-      index: index
+      index: index,
+      initialIndex: initialIndex
     });
   });
-  const tabIndicator = isReadyToRenderIndicator ? /*#__PURE__*/React.createElement(TabIndicator, {
+  const tabIndicator = canRenderIndicator ? /*#__PURE__*/React.createElement(TabIndicator, {
     coordinates: coordinates,
     disabled: disableIndicator,
     initialIndex: sharedIndex.initialValue,

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

@@ -1 +1 @@
-{"version":3,"names":["React","cloneElement","forwardRef","useImperativeHandle","View","css","useTheme","useSyncAnimatedValue","TabIndicator","ScrollableTabsView","IndexAwareTab","useTabCoordinates","useIndexStore","InternalContext","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","indexStore","isReadyToRenderIndicator","length","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, 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';\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 indexStore = useIndexStore(sharedIndex);\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            />\n        );\n    });\n\n    const tabIndicator = isReadyToRenderIndicator ? (\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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"}
+{"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                initialIndex={initialIndex}\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/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,7 @@ 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';

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

@@ -1 +1 @@
-{"version":3,"names":["default","useBreakpointUp","useCollapsibleAppBar","useContentContainerStyle","useElevationStyle","useFadeInAppBar","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 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,oBAApB,QAAgD,wBAAhD;AACA,SAASN,OAAO,IAAIO,WAApB,QAAuC,eAAvC;AACA,SAASP,OAAO,IAAIQ,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/useImperativeState.js

@@ -0,0 +1,17 @@
+import { useMemo } from 'react';
+export default function useImperativeState(initialValue) {
+  return useMemo(() => {
+    let prevState = initialValue;
+    let currentState = initialValue;
+    return {
+      hasChanged: () => prevState !== currentState,
+      get: () => currentState,
+      set: nextState => {
+        prevState = currentState;
+        currentState = nextState;
+      }
+    };
+  }, []);
+}
+;
+//# sourceMappingURL=useImperativeState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","useImperativeState","initialValue","prevState","currentState","hasChanged","get","set","nextState"],"sources":["useImperativeState.ts"],"sourcesContent":["import { useMemo } from 'react';\n\n\nexport interface ImperativeState<T> {\n    hasChanged: () => boolean;\n    get: () => T;\n    set: (nextState: T) => void;\n}\n\nexport default function useImperativeState<T>(initialValue: T): ImperativeState<T> {\n    return useMemo<ImperativeState<T>>(() => {\n        let prevState: T = initialValue;\n        let currentState: T = initialValue;\n\n        return {\n            hasChanged: () => prevState !== currentState,\n            get: () => currentState,\n            set: (nextState) => {\n                prevState = currentState;\n                currentState = nextState;\n            },\n        };\n    }, []);\n};\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AASA,eAAe,SAASC,kBAAT,CAA+BC,YAA/B,EAAoE;EAC/E,OAAOF,OAAO,CAAqB,MAAM;IACrC,IAAIG,SAAY,GAAGD,YAAnB;IACA,IAAIE,YAAe,GAAGF,YAAtB;IAEA,OAAO;MACHG,UAAU,EAAE,MAAMF,SAAS,KAAKC,YAD7B;MAEHE,GAAG,EAAE,MAAMF,YAFR;MAGHG,GAAG,EAAGC,SAAD,IAAe;QAChBL,SAAS,GAAGC,YAAZ;QACAA,YAAY,GAAGI,SAAf;MACH;IANE,CAAP;EAQH,CAZa,EAYX,EAZW,CAAd;AAaH;AAAA"}

package/build/module/store/SimpleStore.js

@@ -1,5 +1,9 @@
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function refEqual(a, b) {
+  return a === b;
+}
+
 export default class SimpleStore {
   constructor(initialData) {
     _defineProperty(this, "data", void 0);
@@ -11,7 +15,6 @@ export default class SimpleStore {
 
   subscribe(listener) {
     this.listeners.push(listener);
-    listener(this.data);
     return () => {
       const index = this.listeners.indexOf(listener);
       this.listeners.splice(index, 1);
@@ -19,6 +22,11 @@ export default class SimpleStore {
   }
 
   dispatch(data) {
+    // Do not dispatch if data ref is equal
+    if (refEqual(this.data, data)) {
+      return;
+    }
+
     this.data = data;
 
     for (const id in this.listeners) {

package/build/module/store/SimpleStore.js.map

@@ -1 +1 @@
-{"version":3,"names":["SimpleStore","constructor","initialData","data","subscribe","listener","listeners","push","index","indexOf","splice","dispatch","id","removeAllListeners","length"],"sources":["SimpleStore.ts"],"sourcesContent":["import { MonoStore, StoreSubscription } from './types';\n\nexport default class SimpleStore<T> implements MonoStore<T> {\n\n    private data: T;\n\n    private listeners: Array<(data: T) => void> = [];\n\n    constructor(initialData: T) {\n        this.data = initialData;\n    }\n\n    subscribe(listener: (data: T) => void): StoreSubscription {\n        this.listeners.push(listener);\n\n        listener(this.data);\n\n        return () => {\n            const index = this.listeners.indexOf(listener);\n            this.listeners.splice(index, 1);\n        };\n    }\n\n    dispatch(data: T): void {\n        this.data = data;\n        for (const id in this.listeners) {\n            const listener = this.listeners[id];\n            listener?.(data);\n        }\n    }\n\n    removeAllListeners(): void {\n        this.listeners.splice(0, this.listeners.length);\n    }\n\n};\n"],"mappings":";;AAEA,eAAe,MAAMA,WAAN,CAA6C;EAMxDC,WAAW,CAACC,WAAD,EAAiB;IAAA;;IAAA,mCAFkB,EAElB;;IACxB,KAAKC,IAAL,GAAYD,WAAZ;EACH;;EAEDE,SAAS,CAACC,QAAD,EAAiD;IACtD,KAAKC,SAAL,CAAeC,IAAf,CAAoBF,QAApB;IAEAA,QAAQ,CAAC,KAAKF,IAAN,CAAR;IAEA,OAAO,MAAM;MACT,MAAMK,KAAK,GAAG,KAAKF,SAAL,CAAeG,OAAf,CAAuBJ,QAAvB,CAAd;MACA,KAAKC,SAAL,CAAeI,MAAf,CAAsBF,KAAtB,EAA6B,CAA7B;IACH,CAHD;EAIH;;EAEDG,QAAQ,CAACR,IAAD,EAAgB;IACpB,KAAKA,IAAL,GAAYA,IAAZ;;IACA,KAAK,MAAMS,EAAX,IAAiB,KAAKN,SAAtB,EAAiC;MAC7B,MAAMD,QAAQ,GAAG,KAAKC,SAAL,CAAeM,EAAf,CAAjB;MACAP,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGF,IAAH,CAAR;IACH;EACJ;;EAEDU,kBAAkB,GAAS;IACvB,KAAKP,SAAL,CAAeI,MAAf,CAAsB,CAAtB,EAAyB,KAAKJ,SAAL,CAAeQ,MAAxC;EACH;;AA/BuD;AAiC3D"}
+{"version":3,"names":["refEqual","a","b","SimpleStore","constructor","initialData","data","subscribe","listener","listeners","push","index","indexOf","splice","dispatch","id","removeAllListeners","length"],"sources":["SimpleStore.ts"],"sourcesContent":["import { MonoStore, StoreSubscription } from './types';\n\nfunction refEqual(a: any, b: any): boolean {\n    return a === b;\n}\n\nexport default class SimpleStore<T> implements MonoStore<T> {\n\n    private data: T;\n\n    private listeners: Array<(data: T) => void> = [];\n\n    constructor(initialData: T) {\n        this.data = initialData;\n    }\n\n    subscribe(listener: (data: T) => void): StoreSubscription {\n        this.listeners.push(listener);\n\n        return () => {\n            const index = this.listeners.indexOf(listener);\n            this.listeners.splice(index, 1);\n        };\n    }\n\n    dispatch(data: T): void {\n        // Do not dispatch if data ref is equal\n        if (refEqual(this.data, data)) {\n            return;\n        }\n\n        this.data = data;\n        for (const id in this.listeners) {\n            const listener = this.listeners[id];\n            listener?.(data);\n        }\n    }\n\n    removeAllListeners(): void {\n        this.listeners.splice(0, this.listeners.length);\n    }\n\n};\n"],"mappings":";;AAEA,SAASA,QAAT,CAAkBC,CAAlB,EAA0BC,CAA1B,EAA2C;EACvC,OAAOD,CAAC,KAAKC,CAAb;AACH;;AAED,eAAe,MAAMC,WAAN,CAA6C;EAMxDC,WAAW,CAACC,WAAD,EAAiB;IAAA;;IAAA,mCAFkB,EAElB;;IACxB,KAAKC,IAAL,GAAYD,WAAZ;EACH;;EAEDE,SAAS,CAACC,QAAD,EAAiD;IACtD,KAAKC,SAAL,CAAeC,IAAf,CAAoBF,QAApB;IAEA,OAAO,MAAM;MACT,MAAMG,KAAK,GAAG,KAAKF,SAAL,CAAeG,OAAf,CAAuBJ,QAAvB,CAAd;MACA,KAAKC,SAAL,CAAeI,MAAf,CAAsBF,KAAtB,EAA6B,CAA7B;IACH,CAHD;EAIH;;EAEDG,QAAQ,CAACR,IAAD,EAAgB;IACpB;IACA,IAAIN,QAAQ,CAAC,KAAKM,IAAN,EAAYA,IAAZ,CAAZ,EAA+B;MAC3B;IACH;;IAED,KAAKA,IAAL,GAAYA,IAAZ;;IACA,KAAK,MAAMS,EAAX,IAAiB,KAAKN,SAAtB,EAAiC;MAC7B,MAAMD,QAAQ,GAAG,KAAKC,SAAL,CAAeM,EAAf,CAAjB;MACAP,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGF,IAAH,CAAR;IACH;EACJ;;EAEDU,kBAAkB,GAAS;IACvB,KAAKP,SAAL,CAAeI,MAAf,CAAsB,CAAtB,EAAyB,KAAKJ,SAAL,CAAeQ,MAAxC;EACH;;AAlCuD;AAoC3D"}

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

@@ -3,5 +3,6 @@ import React from 'react';
 export interface IndexAwareTabProps {
     children: ReactElement;
     index: number;
+    initialIndex: number;
 }
 export default function IndexAwareTab(props: IndexAwareTabProps): ReactElement<any, string | React.JSXElementConstructor<any>>;

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import TabCoordinate from './TabCoordinate';
-export interface UseTabCoordinates {
-    coordinates: TabCoordinate[];
-    updateCoordinate: (index: number, x: number, width: number) => void;
+export interface UpdateCoordinate {
+    (index: number, x: number, width: number): void;
 }
-export default function useTabCoordinates(tabElements: React.ReactNode): UseTabCoordinates;
+export default function useTabCoordinates(tabElements: React.ReactNode): [TabCoordinate[], UpdateCoordinate];

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

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

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

@@ -3,6 +3,7 @@ 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';

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

@@ -0,0 +1,6 @@
+export interface ImperativeState<T> {
+    hasChanged: () => boolean;
+    get: () => T;
+    set: (nextState: T) => void;
+}
+export default function useImperativeState<T>(initialValue: T): ImperativeState<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "2.0.0-beta.18",
+  "version": "2.0.0-beta.20",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9c4af6d69493666d86b7736892f778af775a3c80"
+  "gitHead": "8ca13c00c2424b287a26c7cb62619c2c0a9596df"
 }

package/src/Tabs/IndexAwareTab.tsx

@@ -5,15 +5,17 @@ import InternalContext from './InternalContext';
 export interface IndexAwareTabProps {
     children: ReactElement;
     index: number;
+    initialIndex: number;
 }
 
 export default function IndexAwareTab(props: IndexAwareTabProps) {
     const {
         children,
         index,
+        initialIndex,
     } = props;
 
-    const [selected, setSelected] = useState(false);
+    const [selected, setSelected] = useState(initialIndex === index);
 
     const { indexStore } = useContext(InternalContext);
 

package/src/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import React, { cloneElement, forwardRef, useImperativeHandle } from 'react';
+import React, { cloneElement, forwardRef, useEffect, useImperativeHandle } from 'react';
 import type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';
 import { View } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
@@ -12,6 +12,7 @@ import IndexAwareTab from './IndexAwareTab';
 import useTabCoordinates from './useTabCoordinates';
 import useIndexStore from './useIndexStore';
 import InternalContext from './InternalContext';
+import { isEveryTabCoordinatesDefined } from './utils';
 
 type TabsStyleKeys =
     | 'root'
@@ -70,11 +71,17 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
 
     const styles = useStyles();
 
-    const { coordinates, updateCoordinate } = useTabCoordinates(children);
+    const [coordinates, updateCoordinate] = useTabCoordinates(children);
+
+    const canRenderIndicator = isEveryTabCoordinatesDefined(coordinates, children);
 
     const indexStore = useIndexStore(sharedIndex);
 
-    const isReadyToRenderIndicator = coordinates.length > 0;
+    useEffect(() => {
+        return indexStore.subscribe(newIndex => {
+            onChange?.(newIndex);
+        });
+    }, [indexStore, onChange]);
 
     const tabElements = React.Children.map(children, (child, index) => {
         const onLayout = (event: LayoutChangeEvent) => {
@@ -92,14 +99,13 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
         const onPress = () => {
             setTab(index);
 
-            onChange?.(index);
             // @ts-ignore
             child.props.onPress?.();
         };
 
         // @ts-ignore
         const tabElement = cloneElement(child, {
-            enableIndicator: !disableIndicator && !isReadyToRenderIndicator,
+            enableIndicator: !disableIndicator && !canRenderIndicator,
             onLayout,
             onPress,
             onMouseDown,
@@ -111,11 +117,12 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
             <IndexAwareTab
                 children={tabElement}
                 index={index}
+                initialIndex={initialIndex}
             />
         );
     });
 
-    const tabIndicator = isReadyToRenderIndicator ? (
+    const tabIndicator = canRenderIndicator ? (
         <TabIndicator
             coordinates={coordinates}
             disabled={disableIndicator}

package/src/Tabs/useTabCoordinates.ts

@@ -1,36 +1,25 @@
 import React, { useRef, useState } from 'react';
-import { isEveryDefined } from '@fountain-ui/utils';
 import TabCoordinate from './TabCoordinate';
+import { isEveryTabCoordinatesDefined } from './utils';
 
-export interface UseTabCoordinates {
-    coordinates: TabCoordinate[];
-    updateCoordinate: (index: number, x: number, width: number) => void;
+export interface UpdateCoordinate {
+    (index: number, x: number, width: number): void;
 }
 
-export default function useTabCoordinates(tabElements: React.ReactNode): UseTabCoordinates {
-    const incompleteCoordinatesRef = useRef<TabCoordinate[]>([]);
+export default function useTabCoordinates(tabElements: React.ReactNode): [TabCoordinate[], UpdateCoordinate] {
+    const [coordinates, setCoordinates] = useState<TabCoordinate[]>([]);
 
-    const [completeCoordinates, setCompleteCoordinates] = useState<TabCoordinate[]>([]);
+    const cacheRef = useRef<TabCoordinate[]>([]);
 
-    const isAllCoordinatesDefined = (coordinates: TabCoordinate[]): boolean => {
-        const numberOfTab = React.Children.count(tabElements);
-        const numberOfCoordinates = coordinates.length;
+    const updateCoordinate: UpdateCoordinate = (index, x, width) => {
+        cacheRef.current[index] = { x1: x, x2: x + width };
 
-        const everyCoordinatesDefined = isEveryDefined(coordinates);
+        if (isEveryTabCoordinatesDefined(cacheRef.current, tabElements)) {
+            setCoordinates([...cacheRef.current]);
 
-        return numberOfTab === numberOfCoordinates && everyCoordinatesDefined;
-    };
-
-    const updateCoordinate = (index: number, x: number, width: number) => {
-        incompleteCoordinatesRef.current[index] = { x1: x, x2: x + width };
-
-        if (isAllCoordinatesDefined(incompleteCoordinatesRef.current)) {
-            setCompleteCoordinates(incompleteCoordinatesRef.current);
+            cacheRef.current = [];
         }
     };
 
-    return {
-        coordinates: completeCoordinates,
-        updateCoordinate,
-    };
+    return [coordinates, updateCoordinate];
 }

package/src/Tabs/utils.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import { Children } from 'react';
+import { isEveryDefined } from '@fountain-ui/utils';
+import type TabCoordinate from './TabCoordinate';
+
+
+export function isEveryTabCoordinatesDefined(coordinates: TabCoordinate[], tabElements: ReactNode): boolean {
+    const numberOfTabs = Children.count(tabElements);
+    const numberOfCoordinates = coordinates.length;
+
+    const everyCoordinatesDefined = isEveryDefined(coordinates);
+
+    return numberOfTabs === numberOfCoordinates && everyCoordinatesDefined;
+}

package/src/hooks/index.ts

@@ -3,6 +3,7 @@ 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';

package/src/hooks/useImperativeState.ts

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+
+
+export interface ImperativeState<T> {
+    hasChanged: () => boolean;
+    get: () => T;
+    set: (nextState: T) => void;
+}
+
+export default function useImperativeState<T>(initialValue: T): ImperativeState<T> {
+    return useMemo<ImperativeState<T>>(() => {
+        let prevState: T = initialValue;
+        let currentState: T = initialValue;
+
+        return {
+            hasChanged: () => prevState !== currentState,
+            get: () => currentState,
+            set: (nextState) => {
+                prevState = currentState;
+                currentState = nextState;
+            },
+        };
+    }, []);
+};

package/src/store/SimpleStore.ts

@@ -1,5 +1,9 @@
 import { MonoStore, StoreSubscription } from './types';
 
+function refEqual(a: any, b: any): boolean {
+    return a === b;
+}
+
 export default class SimpleStore<T> implements MonoStore<T> {
 
     private data: T;
@@ -13,8 +17,6 @@ export default class SimpleStore<T> implements MonoStore<T> {
     subscribe(listener: (data: T) => void): StoreSubscription {
         this.listeners.push(listener);
 
-        listener(this.data);
-
         return () => {
             const index = this.listeners.indexOf(listener);
             this.listeners.splice(index, 1);
@@ -22,6 +24,11 @@ export default class SimpleStore<T> implements MonoStore<T> {
     }
 
     dispatch(data: T): void {
+        // Do not dispatch if data ref is equal
+        if (refEqual(this.data, data)) {
+            return;
+        }
+
         this.data = data;
         for (const id in this.listeners) {
             const listener = this.listeners[id];