@tramvai/module-autoscroll 7.21.0 → 7.26.8

package/README.md

@@ -1,8 +1,12 @@
 # Autoscroll
 
-React component that implements autoscroll to page start or to the anchor on page on SPA-navigations
+Module emulates native browser scroll behavior on SPA-navigations:
 
-The behaviour is similar to the [react-router](https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-tops)
+- scroll to top of the page if there is no hash in the URL
+- scroll to the element with id that equals to the hash in the URL if it exists
+- restore scroll position on back/forward navigations
+
+The behaviour is similar to the [react-router](https://reactrouter.com/api/components/ScrollRestoration)
 
 ## Installation
 
@@ -12,15 +16,15 @@ First install `@tramvai/module-autoscroll`:
 yarn add @tramvai/module-autoscroll
 ```
 
-And add `AutoscrollModule` to the modules list:
+And add `ScrollRestorationModule` to the modules list:
 
 ```tsx
 import { createApp } from '@tramvai/core';
-import { AutoscrollModule } from '@tramvai/module-autoscroll';
+import { ScrollRestorationModule } from '@tramvai/module-autoscroll';
 
 createApp({
   name: 'tincoin',
-  modules: [AutoscrollModule],
+  modules: [ScrollRestorationModule],
 });
 ```
 
@@ -30,6 +34,12 @@ createApp({
 
 `behavior: smooth` is not supported by every browser (e.g. doesn't work in Safari). In this case you can use polyfill `smoothscroll-polyfill` that you should add to your app.
 
+### Scroll restoration
+
+Native browser scroll restoration is disabled when autoscroll is enabled (`window.history.scrollRestoration = 'manual'`, depending on the `navigateState.disableAutoscroll` parameter or `AUTOSCROLL_DISABLED_TOKEN` token).
+
+Module saves scroll position on every navigation and restores it on back/forward navigations. Scroll position is saved in `sessionStorage` by navigation index (`history.state.index`).
+
 ## How to
 
 ### Disable autoscroll for page
@@ -49,6 +59,53 @@ function Component() {
 }
 ```
 
+### Disable autoscroll for custom conditions
+
+By default, autoscroll is disabled, when `navigateState.disableAutoscroll` is `true`.
+
+For example, if you want to disable it for all `updateCurrentRoute` calls, you can provide `AUTOSCROLL_DISABLED_TOKEN` token:
+
+```tsx
+import { AUTOSCROLL_DISABLED_TOKEN } from '@tramvai/module-autoscroll';
+import { provide } from '@tramvai/core';
+
+const providers = [
+  // ...,
+  provide({
+    provide: AUTOSCROLL_DISABLED_TOKEN,
+    useFactory:
+      ({ router }) =>
+      () => {
+        // disable autoscroll for navigation with query `?autoscroll_disabled=true`
+        if (router.getCurrentUrl().query.autoscroll_disabled === 'true') {
+          return true;
+        }
+        // return nothing to use default behavior
+      },
+    deps: {
+      router: ROUTER_TOKEN,
+    },
+  }),
+];
+```
+
+### Use autoscroll with View Transitions
+
+To avoid inconsistent animations when using View Transition API (e.g. X and Y axis movements in the same time), recommended to set autoscroll behavior to `instant`:
+
+```tsx
+import { AUTOSCROLL_BEHAVIOR_MODE_TOKEN } from '@tramvai/module-autoscroll';
+import { provide } from '@tramvai/core';
+
+const providers = [
+  // ...,
+  provide({
+    provide: AUTOSCROLL_BEHAVIOR_MODE_TOKEN,
+    useValue: (defaultBehavior) => 'instant', // default is 'smooth' for autoscroll in new pages or anchors and 'instant' for scroll restoration
+  }),
+];
+```
+
 ### Scroll behavior change
 
 #### Global
@@ -61,7 +118,7 @@ const providers = [
   // ...,
   provide({
     provide: AUTOSCROLL_BEHAVIOR_MODE_TOKEN,
-    useValue: 'auto', // default is 'smooth'
+    useValue: (defaultBehavior) => 'auto', // default is 'smooth' for autoscroll in new pages or anchors and 'instant' for scroll restoration
   }),
 ];
 ```
@@ -81,7 +138,7 @@ function Component() {
 }
 ```
 
-### ScrollTo top change
+### Scroll top change
 
 #### Global
 
@@ -97,3 +154,29 @@ const providers = [
   }),
 ];
 ```
+
+#### Local
+
+You can also provide a function that will return scroll top value, for example if you save page scroll position in sessionStorage and then want to restore it:
+
+```tsx
+import { AUTOSCROLL_SCROLL_TOP_TOKEN } from '@tramvai/module-autoscroll';
+import { provide } from '@tramvai/core';
+
+const providers = [
+  // ...,
+  provide({
+    provide: AUTOSCROLL_SCROLL_TOP_TOKEN,
+    // if `isRestoredValue` is `true`, it means that `defaultScrollTop` is resolved previous position for auto scroll restoration
+    useValue: (defaultScrollTop, isRestoredValue) => {
+      try {
+        const savedScrollTop = JSON.parse(sessionStorage.get('scrollTop'));
+        // for example, if you save scroll position by navigation index
+        return savedScrollTop[history.state.index] ?? 0;
+      } catch (e) {
+        return 0;
+      }
+    },
+  }),
+];
+```

package/lib/components/Autoscroll.d.ts

@@ -1,2 +1,2 @@
-export declare function Autoscroll(): null;
+export declare const Autoscroll: import("react").MemoExoticComponent<() => null>;
 //# sourceMappingURL=Autoscroll.d.ts.map

package/lib/components/Autoscroll.es.js

@@ -1,13 +1,15 @@
-import { useRef, useEffect } from 'react';
+import { memo, useMemo, useRef } from 'react';
 import { useRoute, useUrl } from '@tramvai/module-router';
 import { optional } from '@tinkoff/dippy';
 import { useDi } from '@tramvai/react';
+import { LOGGER_TOKEN } from '@tramvai/tokens-common';
+import { useIsomorphicLayoutEffect } from '@tinkoff/react-hooks';
 import { AUTOSCROLL_BEHAVIOR_MODE_TOKEN, AUTOSCROLL_SCROLL_TOP_TOKEN } from '../tokens.es.js';
 
 const DEFAULT_AUTOSCROLL_BEHAVIOR = 'smooth';
 const DEFAULT_AUTOSCROLL_SCROLL_TOP = 0;
 const scrollToTop = (behavior, top) => {
-    // В некоторых браузерах не поддерживается scrollTo с одним параметром
+    // cross-browser `window.scrollTo` parameters
     try {
         window.scrollTo({ top, left: 0, behavior });
     }
@@ -15,10 +17,6 @@ const scrollToTop = (behavior, top) => {
         window.scrollTo(0, top);
     }
 };
-const isAutoScrollEnabled = (route, prevRoute) => {
-    const isDisabled = route.navigateState?.disableAutoscroll || prevRoute.navigateState?.disableAutoscroll;
-    return !isDisabled;
-};
 const scrollToAnchor = (anchor, behavior) => {
     try {
         document.querySelector(anchor)?.scrollIntoView({
@@ -30,43 +28,55 @@ const scrollToAnchor = (anchor, behavior) => {
         return false;
     }
 };
-function usePreviousValue(value) {
-    const prevValueRef = useRef(value);
-    /** Сохраняем предыдущее значение */
-    useEffect(() => {
-        prevValueRef.current = value;
-    }, [value]);
-    return prevValueRef.current;
-}
-// Поведение с подскроллом похоже на
-// https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top
-function Autoscroll() {
-    const globalScrollBehavior = useDi(optional(AUTOSCROLL_BEHAVIOR_MODE_TOKEN)) || DEFAULT_AUTOSCROLL_BEHAVIOR;
-    const scrollTop = useDi(optional(AUTOSCROLL_SCROLL_TOP_TOKEN)) ?? DEFAULT_AUTOSCROLL_SCROLL_TOP;
+// @reference https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top
+const Autoscroll = memo(() => {
     const route = useRoute();
-    const prevRoute = usePreviousValue(route);
     const url = useUrl();
-    const routeRef = useRef(url);
-    const shouldScroll = useRef(!!routeRef.current.hash && isAutoScrollEnabled(route, prevRoute));
-    // Так как отрисовка нужного нам элемента происходит после обновления route, при первом срабатывании эффекта мы обновляем shouldScroll, а при втором скроллим
-    useEffect(() => {
-        if (url.pathname !== routeRef.current.pathname || url.hash !== routeRef.current.hash) {
-            routeRef.current = url;
-            shouldScroll.current = isAutoScrollEnabled(route, prevRoute);
+    const scrollBehaviorFactory = useDi(optional(AUTOSCROLL_BEHAVIOR_MODE_TOKEN)) ?? DEFAULT_AUTOSCROLL_BEHAVIOR;
+    const scrollTopFactory = useDi(optional(AUTOSCROLL_SCROLL_TOP_TOKEN)) ?? DEFAULT_AUTOSCROLL_SCROLL_TOP;
+    const logger = useDi(LOGGER_TOKEN);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const log = useMemo(() => logger('autoscroll'), []);
+    const previousUrl = useRef(url);
+    const shouldScroll = useRef(false);
+    useIsomorphicLayoutEffect(() => {
+        if (url.pathname !== previousUrl.current.pathname || url.hash !== previousUrl.current.hash) {
+            shouldScroll.current = true;
         }
+        // skip unnecessary checks, if url has not changed and shouldScroll.current set to false - we don't need to scroll
         if (!shouldScroll.current) {
             return;
         }
-        const scrollBehavior = route?.navigateState?.autoscrollBehavior || globalScrollBehavior;
-        if (!url.hash) {
-            scrollToTop(scrollBehavior, scrollTop);
+        // disable autoscroll for current page if `disableAutoscroll` is set in route history state
+        if (route.navigateState?.disableAutoscroll) {
+            previousUrl.current = url;
             shouldScroll.current = false;
+            log.debug('Skipping autoscroll because "disableAutoscroll" is set in route history state');
+            return;
         }
-        else {
-            shouldScroll.current = !scrollToAnchor(url.hash, scrollBehavior);
+        previousUrl.current = url;
+        shouldScroll.current = false;
+        const scrollBehavior = route.navigateState?.autoscrollBehavior ??
+            (typeof scrollBehaviorFactory === 'function'
+                ? scrollBehaviorFactory(DEFAULT_AUTOSCROLL_BEHAVIOR)
+                : scrollBehaviorFactory);
+        const scrollTop = typeof scrollTopFactory === 'function'
+            ? scrollTopFactory(DEFAULT_AUTOSCROLL_SCROLL_TOP, false)
+            : scrollTopFactory;
+        function scroll() {
+            if (!url.hash) {
+                log.debug(`Scrolling to top ${scrollTop}px with behavior: ${scrollBehavior}`);
+                scrollToTop(scrollBehavior, scrollTop);
+            }
+            else {
+                log.debug(`Scrolling to anchor ${url.hash} with behavior: ${scrollBehavior}`);
+                scrollToAnchor(url.hash, scrollBehavior);
+            }
         }
-    });
+        scroll();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [route, url]);
     return null;
-}
+});
 
 export { Autoscroll };

package/lib/components/Autoscroll.js

@@ -2,16 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var react$1 = require('react');
+var react = require('react');
 var moduleRouter = require('@tramvai/module-router');
 var dippy = require('@tinkoff/dippy');
-var react = require('@tramvai/react');
+var react$1 = require('@tramvai/react');
+var tokensCommon = require('@tramvai/tokens-common');
+var reactHooks = require('@tinkoff/react-hooks');
 var tokens = require('../tokens.js');
 
 const DEFAULT_AUTOSCROLL_BEHAVIOR = 'smooth';
 const DEFAULT_AUTOSCROLL_SCROLL_TOP = 0;
 const scrollToTop = (behavior, top) => {
-    // В некоторых браузерах не поддерживается scrollTo с одним параметром
+    // cross-browser `window.scrollTo` parameters
     try {
         window.scrollTo({ top, left: 0, behavior });
     }
@@ -19,10 +21,6 @@ const scrollToTop = (behavior, top) => {
         window.scrollTo(0, top);
     }
 };
-const isAutoScrollEnabled = (route, prevRoute) => {
-    const isDisabled = route.navigateState?.disableAutoscroll || prevRoute.navigateState?.disableAutoscroll;
-    return !isDisabled;
-};
 const scrollToAnchor = (anchor, behavior) => {
     try {
         document.querySelector(anchor)?.scrollIntoView({
@@ -34,43 +32,55 @@ const scrollToAnchor = (anchor, behavior) => {
         return false;
     }
 };
-function usePreviousValue(value) {
-    const prevValueRef = react$1.useRef(value);
-    /** Сохраняем предыдущее значение */
-    react$1.useEffect(() => {
-        prevValueRef.current = value;
-    }, [value]);
-    return prevValueRef.current;
-}
-// Поведение с подскроллом похоже на
-// https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top
-function Autoscroll() {
-    const globalScrollBehavior = react.useDi(dippy.optional(tokens.AUTOSCROLL_BEHAVIOR_MODE_TOKEN)) || DEFAULT_AUTOSCROLL_BEHAVIOR;
-    const scrollTop = react.useDi(dippy.optional(tokens.AUTOSCROLL_SCROLL_TOP_TOKEN)) ?? DEFAULT_AUTOSCROLL_SCROLL_TOP;
+// @reference https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top
+const Autoscroll = react.memo(() => {
     const route = moduleRouter.useRoute();
-    const prevRoute = usePreviousValue(route);
     const url = moduleRouter.useUrl();
-    const routeRef = react$1.useRef(url);
-    const shouldScroll = react$1.useRef(!!routeRef.current.hash && isAutoScrollEnabled(route, prevRoute));
-    // Так как отрисовка нужного нам элемента происходит после обновления route, при первом срабатывании эффекта мы обновляем shouldScroll, а при втором скроллим
-    react$1.useEffect(() => {
-        if (url.pathname !== routeRef.current.pathname || url.hash !== routeRef.current.hash) {
-            routeRef.current = url;
-            shouldScroll.current = isAutoScrollEnabled(route, prevRoute);
+    const scrollBehaviorFactory = react$1.useDi(dippy.optional(tokens.AUTOSCROLL_BEHAVIOR_MODE_TOKEN)) ?? DEFAULT_AUTOSCROLL_BEHAVIOR;
+    const scrollTopFactory = react$1.useDi(dippy.optional(tokens.AUTOSCROLL_SCROLL_TOP_TOKEN)) ?? DEFAULT_AUTOSCROLL_SCROLL_TOP;
+    const logger = react$1.useDi(tokensCommon.LOGGER_TOKEN);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const log = react.useMemo(() => logger('autoscroll'), []);
+    const previousUrl = react.useRef(url);
+    const shouldScroll = react.useRef(false);
+    reactHooks.useIsomorphicLayoutEffect(() => {
+        if (url.pathname !== previousUrl.current.pathname || url.hash !== previousUrl.current.hash) {
+            shouldScroll.current = true;
         }
+        // skip unnecessary checks, if url has not changed and shouldScroll.current set to false - we don't need to scroll
         if (!shouldScroll.current) {
             return;
         }
-        const scrollBehavior = route?.navigateState?.autoscrollBehavior || globalScrollBehavior;
-        if (!url.hash) {
-            scrollToTop(scrollBehavior, scrollTop);
+        // disable autoscroll for current page if `disableAutoscroll` is set in route history state
+        if (route.navigateState?.disableAutoscroll) {
+            previousUrl.current = url;
             shouldScroll.current = false;
+            log.debug('Skipping autoscroll because "disableAutoscroll" is set in route history state');
+            return;
         }
-        else {
-            shouldScroll.current = !scrollToAnchor(url.hash, scrollBehavior);
+        previousUrl.current = url;
+        shouldScroll.current = false;
+        const scrollBehavior = route.navigateState?.autoscrollBehavior ??
+            (typeof scrollBehaviorFactory === 'function'
+                ? scrollBehaviorFactory(DEFAULT_AUTOSCROLL_BEHAVIOR)
+                : scrollBehaviorFactory);
+        const scrollTop = typeof scrollTopFactory === 'function'
+            ? scrollTopFactory(DEFAULT_AUTOSCROLL_SCROLL_TOP, false)
+            : scrollTopFactory;
+        function scroll() {
+            if (!url.hash) {
+                log.debug(`Scrolling to top ${scrollTop}px with behavior: ${scrollBehavior}`);
+                scrollToTop(scrollBehavior, scrollTop);
+            }
+            else {
+                log.debug(`Scrolling to anchor ${url.hash} with behavior: ${scrollBehavior}`);
+                scrollToAnchor(url.hash, scrollBehavior);
+            }
         }
-    });
+        scroll();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [route, url]);
     return null;
-}
+});
 
 exports.Autoscroll = Autoscroll;

package/lib/components/ScrollRestoration.d.ts

@@ -0,0 +1,2 @@
+export declare const ScrollRestoration: import("react").MemoExoticComponent<() => null>;
+//# sourceMappingURL=ScrollRestoration.d.ts.map

package/lib/components/ScrollRestoration.es.js

@@ -0,0 +1,127 @@
+import { memo, useMemo, useRef } from 'react';
+import { useRouter, useRoute, useUrl } from '@tramvai/module-router';
+import { optional } from '@tinkoff/dippy';
+import { useDi } from '@tramvai/react';
+import { LOGGER_TOKEN } from '@tramvai/tokens-common';
+import { useIsomorphicLayoutEffect } from '@tinkoff/react-hooks';
+import { AUTOSCROLL_BEHAVIOR_MODE_TOKEN, AUTOSCROLL_SCROLL_TOP_TOKEN, AUTOSCROLL_DISABLED_TOKEN, AUTOSCROLL_APPPLIED_NAVIGATIONS_TOKEN } from '../tokens.es.js';
+
+const DEFAULT_AUTOSCROLL_BEHAVIOR = process.env.__TRAMVAI_REACT_TRANSITIONS === 'true' ? 'instant' : 'smooth';
+const DEFAULT_SCROLL_RESTORATION_BEHAVIOR = 'instant';
+const DEFAULT_AUTOSCROLL_SCROLL_TOP = 0;
+const scrollToTop = (behavior, top) => {
+    // cross-browser `window.scrollTo` parameters
+    try {
+        window.scrollTo({ top, left: 0, behavior });
+    }
+    catch (error) {
+        window.scrollTo(0, top);
+    }
+};
+const scrollToAnchor = (anchor, behavior) => {
+    try {
+        document.querySelector(anchor)?.scrollIntoView({
+            behavior,
+        });
+        return true;
+    }
+    catch {
+        return false;
+    }
+};
+// @reference https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top
+const ScrollRestoration = memo(() => {
+    const router = useRouter();
+    const route = useRoute();
+    const url = useUrl();
+    const scrollBehaviorFactory = useDi(optional(AUTOSCROLL_BEHAVIOR_MODE_TOKEN));
+    const scrollTopFactory = useDi(optional(AUTOSCROLL_SCROLL_TOP_TOKEN));
+    const autoscrollDisabledFactory = useDi(optional(AUTOSCROLL_DISABLED_TOKEN));
+    const appliedNavigations = useDi(AUTOSCROLL_APPPLIED_NAVIGATIONS_TOKEN);
+    const logger = useDi(LOGGER_TOKEN);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const log = useMemo(() => logger('autoscroll'), []);
+    const previousUrl = useRef(url);
+    const shouldScroll = useRef(true);
+    // workaround to restore scroll position on page reload instantly
+    const initialScrollRestoration = useRef(true);
+    // eslint-disable-next-line max-statements
+    useIsomorphicLayoutEffect(() => {
+        if (url.pathname !== previousUrl.current.pathname ||
+            url.hash !== previousUrl.current.hash ||
+            url.search !== previousUrl.current.search) {
+            shouldScroll.current = true;
+        }
+        // skip unnecessary checks, if url has not changed and shouldScroll.current set to false - we don't need to scroll
+        if (!shouldScroll.current) {
+            return;
+        }
+        const autoscrollDisabled = typeof autoscrollDisabledFactory === 'function'
+            ? autoscrollDisabledFactory()
+            : autoscrollDisabledFactory;
+        // disable autoscroll for current page if `disableAutoscroll` is set in route history state
+        if (autoscrollDisabled ?? route.navigateState?.disableAutoscroll) {
+            previousUrl.current = url;
+            shouldScroll.current = false;
+            if (typeof autoscrollDisabled === 'boolean') {
+                log.debug('Skipping autoscroll because "AUTOSCROLL_DISABLED_TOKEN" is return true');
+            }
+            else {
+                log.debug('Skipping autoscroll because "disableAutoscroll" is set in navigation state');
+            }
+            log.debug('Enable browser scroll restoration to handle scroll position automatically');
+            window.history.scrollRestoration = 'auto';
+            return;
+        }
+        log.debug('Disabling browser scroll restoration to handle scroll position manually');
+        window.history.scrollRestoration = 'manual';
+        previousUrl.current = url;
+        shouldScroll.current = false;
+        const navigationIndex = router.history.getCurrentState()?.index;
+        const scrollRestoredPosition = appliedNavigations.has(navigationIndex) &&
+            // if url was changed with replace: true navigation
+            appliedNavigations.get(navigationIndex).href === url.href &&
+            appliedNavigations.get(navigationIndex).scrollTop;
+        const isRestoredScrollPosition = typeof scrollRestoredPosition === 'number';
+        const scrollTopDefault = isRestoredScrollPosition
+            ? scrollRestoredPosition
+            : DEFAULT_AUTOSCROLL_SCROLL_TOP;
+        const scrollTopFromFactory = typeof scrollTopFactory === 'function'
+            ? scrollTopFactory(scrollTopDefault, isRestoredScrollPosition)
+            : scrollTopFactory;
+        const scrollTop = scrollTopFromFactory ?? scrollTopDefault;
+        const scrollBehaviorDefault = initialScrollRestoration.current || isRestoredScrollPosition
+            ? DEFAULT_SCROLL_RESTORATION_BEHAVIOR
+            : DEFAULT_AUTOSCROLL_BEHAVIOR;
+        const scrollBehaviorFromFactory = typeof scrollBehaviorFactory === 'function'
+            ? scrollBehaviorFactory(scrollBehaviorDefault)
+            : scrollBehaviorFactory;
+        const scrollBehavior = scrollBehaviorFromFactory ?? scrollBehaviorDefault;
+        if (isRestoredScrollPosition) {
+            if (initialScrollRestoration.current) {
+                log.debug(`Restoring scroll position ${scrollRestoredPosition}px with instant behavior due to page reload`);
+            }
+            else {
+                log.debug(`Restoring scroll position ${scrollRestoredPosition}px for navigation index ${navigationIndex}`);
+            }
+        }
+        if (initialScrollRestoration.current) {
+            initialScrollRestoration.current = false;
+        }
+        function scroll() {
+            if (!url.hash) {
+                log.debug(`Scrolling to top ${scrollTop}px with behavior: ${scrollBehavior}`);
+                scrollToTop(scrollBehavior, scrollTop);
+            }
+            else {
+                log.debug(`Scrolling to anchor ${url.hash} with behavior: ${scrollBehavior}`);
+                scrollToAnchor(url.hash, scrollBehavior);
+            }
+        }
+        scroll();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [router, route, url]);
+    return null;
+});
+
+export { ScrollRestoration };

package/lib/components/ScrollRestoration.js

@@ -0,0 +1,131 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var moduleRouter = require('@tramvai/module-router');
+var dippy = require('@tinkoff/dippy');
+var react$1 = require('@tramvai/react');
+var tokensCommon = require('@tramvai/tokens-common');
+var reactHooks = require('@tinkoff/react-hooks');
+var tokens = require('../tokens.js');
+
+const DEFAULT_AUTOSCROLL_BEHAVIOR = process.env.__TRAMVAI_REACT_TRANSITIONS === 'true' ? 'instant' : 'smooth';
+const DEFAULT_SCROLL_RESTORATION_BEHAVIOR = 'instant';
+const DEFAULT_AUTOSCROLL_SCROLL_TOP = 0;
+const scrollToTop = (behavior, top) => {
+    // cross-browser `window.scrollTo` parameters
+    try {
+        window.scrollTo({ top, left: 0, behavior });
+    }
+    catch (error) {
+        window.scrollTo(0, top);
+    }
+};
+const scrollToAnchor = (anchor, behavior) => {
+    try {
+        document.querySelector(anchor)?.scrollIntoView({
+            behavior,
+        });
+        return true;
+    }
+    catch {
+        return false;
+    }
+};
+// @reference https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top
+const ScrollRestoration = react.memo(() => {
+    const router = moduleRouter.useRouter();
+    const route = moduleRouter.useRoute();
+    const url = moduleRouter.useUrl();
+    const scrollBehaviorFactory = react$1.useDi(dippy.optional(tokens.AUTOSCROLL_BEHAVIOR_MODE_TOKEN));
+    const scrollTopFactory = react$1.useDi(dippy.optional(tokens.AUTOSCROLL_SCROLL_TOP_TOKEN));
+    const autoscrollDisabledFactory = react$1.useDi(dippy.optional(tokens.AUTOSCROLL_DISABLED_TOKEN));
+    const appliedNavigations = react$1.useDi(tokens.AUTOSCROLL_APPPLIED_NAVIGATIONS_TOKEN);
+    const logger = react$1.useDi(tokensCommon.LOGGER_TOKEN);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const log = react.useMemo(() => logger('autoscroll'), []);
+    const previousUrl = react.useRef(url);
+    const shouldScroll = react.useRef(true);
+    // workaround to restore scroll position on page reload instantly
+    const initialScrollRestoration = react.useRef(true);
+    // eslint-disable-next-line max-statements
+    reactHooks.useIsomorphicLayoutEffect(() => {
+        if (url.pathname !== previousUrl.current.pathname ||
+            url.hash !== previousUrl.current.hash ||
+            url.search !== previousUrl.current.search) {
+            shouldScroll.current = true;
+        }
+        // skip unnecessary checks, if url has not changed and shouldScroll.current set to false - we don't need to scroll
+        if (!shouldScroll.current) {
+            return;
+        }
+        const autoscrollDisabled = typeof autoscrollDisabledFactory === 'function'
+            ? autoscrollDisabledFactory()
+            : autoscrollDisabledFactory;
+        // disable autoscroll for current page if `disableAutoscroll` is set in route history state
+        if (autoscrollDisabled ?? route.navigateState?.disableAutoscroll) {
+            previousUrl.current = url;
+            shouldScroll.current = false;
+            if (typeof autoscrollDisabled === 'boolean') {
+                log.debug('Skipping autoscroll because "AUTOSCROLL_DISABLED_TOKEN" is return true');
+            }
+            else {
+                log.debug('Skipping autoscroll because "disableAutoscroll" is set in navigation state');
+            }
+            log.debug('Enable browser scroll restoration to handle scroll position automatically');
+            window.history.scrollRestoration = 'auto';
+            return;
+        }
+        log.debug('Disabling browser scroll restoration to handle scroll position manually');
+        window.history.scrollRestoration = 'manual';
+        previousUrl.current = url;
+        shouldScroll.current = false;
+        const navigationIndex = router.history.getCurrentState()?.index;
+        const scrollRestoredPosition = appliedNavigations.has(navigationIndex) &&
+            // if url was changed with replace: true navigation
+            appliedNavigations.get(navigationIndex).href === url.href &&
+            appliedNavigations.get(navigationIndex).scrollTop;
+        const isRestoredScrollPosition = typeof scrollRestoredPosition === 'number';
+        const scrollTopDefault = isRestoredScrollPosition
+            ? scrollRestoredPosition
+            : DEFAULT_AUTOSCROLL_SCROLL_TOP;
+        const scrollTopFromFactory = typeof scrollTopFactory === 'function'
+            ? scrollTopFactory(scrollTopDefault, isRestoredScrollPosition)
+            : scrollTopFactory;
+        const scrollTop = scrollTopFromFactory ?? scrollTopDefault;
+        const scrollBehaviorDefault = initialScrollRestoration.current || isRestoredScrollPosition
+            ? DEFAULT_SCROLL_RESTORATION_BEHAVIOR
+            : DEFAULT_AUTOSCROLL_BEHAVIOR;
+        const scrollBehaviorFromFactory = typeof scrollBehaviorFactory === 'function'
+            ? scrollBehaviorFactory(scrollBehaviorDefault)
+            : scrollBehaviorFactory;
+        const scrollBehavior = scrollBehaviorFromFactory ?? scrollBehaviorDefault;
+        if (isRestoredScrollPosition) {
+            if (initialScrollRestoration.current) {
+                log.debug(`Restoring scroll position ${scrollRestoredPosition}px with instant behavior due to page reload`);
+            }
+            else {
+                log.debug(`Restoring scroll position ${scrollRestoredPosition}px for navigation index ${navigationIndex}`);
+            }
+        }
+        if (initialScrollRestoration.current) {
+            initialScrollRestoration.current = false;
+        }
+        function scroll() {
+            if (!url.hash) {
+                log.debug(`Scrolling to top ${scrollTop}px with behavior: ${scrollBehavior}`);
+                scrollToTop(scrollBehavior, scrollTop);
+            }
+            else {
+                log.debug(`Scrolling to anchor ${url.hash} with behavior: ${scrollBehavior}`);
+                scrollToAnchor(url.hash, scrollBehavior);
+            }
+        }
+        scroll();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [router, route, url]);
+    return null;
+});
+
+exports.ScrollRestoration = ScrollRestoration;

package/lib/index.d.ts

@@ -1,6 +1,14 @@
 import { Autoscroll } from './components/Autoscroll';
+import { ScrollRestoration } from './components/ScrollRestoration';
 export * from './tokens';
-export { Autoscroll };
-export declare class AutoscrollModule {
-}
+export { Autoscroll, ScrollRestoration };
+/**
+ * @deprecated use ScrollRestorationModule instead, which includes autoscroll and compatible with View Transitions
+ */
+export declare const AutoscrollModule: import("@tinkoff/dippy/lib/modules/module.h").ModuleClass & Partial<import("@tinkoff/dippy/lib/modules/module.h").ModuleSecretParameters> & {
+    [x: string]: (...args: any[]) => import("@tramvai/core").ModuleType;
+};
+export declare const ScrollRestorationModule: import("@tinkoff/dippy/lib/modules/module.h").ModuleClass & Partial<import("@tinkoff/dippy/lib/modules/module.h").ModuleSecretParameters> & {
+    [x: string]: (...args: any[]) => import("@tramvai/core").ModuleType;
+};
 //# sourceMappingURL=index.d.ts.map

package/lib/index.es.js

@@ -1,26 +1,192 @@
-import { __decorate } from 'tslib';
-import { Module } from '@tramvai/core';
+import noop from '@tinkoff/utils/function/noop';
+import { createToken, declareModule, provide, optional, commandLineListTokens } from '@tramvai/core';
 import { LAYOUT_OPTIONS } from '@tramvai/tokens-render';
+import { ROUTER_TOKEN } from '@tramvai/module-router';
+import { LOGGER_TOKEN } from '@tramvai/tokens-common';
 import { Autoscroll } from './components/Autoscroll.es.js';
 export { Autoscroll } from './components/Autoscroll.es.js';
-export { AUTOSCROLL_BEHAVIOR_MODE_TOKEN, AUTOSCROLL_SCROLL_TOP_TOKEN } from './tokens.es.js';
+import { ScrollRestoration } from './components/ScrollRestoration.es.js';
+export { ScrollRestoration } from './components/ScrollRestoration.es.js';
+import { AUTOSCROLL_APPPLIED_NAVIGATIONS_TOKEN } from './tokens.es.js';
+export { AUTOSCROLL_APPPLIED_NAVIGATIONS_TOKEN, AUTOSCROLL_BEHAVIOR_MODE_TOKEN, AUTOSCROLL_DISABLED_TOKEN, AUTOSCROLL_SCROLL_TOP_TOKEN } from './tokens.es.js';
 
-let AutoscrollModule = class AutoscrollModule {
-};
-AutoscrollModule = __decorate([
-    Module({
-        providers: [
-            {
-                provide: LAYOUT_OPTIONS,
-                useValue: {
+const APPLIED_NAVIGATIONS_KEY = '_t_autoscroll_applied_navigations';
+const NEW_SCROLL_RESTORATION_IS_USED = createToken('tramvai autoscroll new scroll restoration');
+/**
+ * @deprecated use ScrollRestorationModule instead, which includes autoscroll and compatible with View Transitions
+ */
+const AutoscrollModule = declareModule({
+    name: 'AutoscrollModule',
+    providers: [
+        provide({
+            provide: LAYOUT_OPTIONS,
+            useFactory: ({ newScrollRestoration }) => newScrollRestoration
+                ? {}
+                : {
                     components: {
                         autoscroll: Autoscroll,
                     },
                 },
-                multi: true,
+            multi: true,
+            deps: {
+                newScrollRestoration: optional(NEW_SCROLL_RESTORATION_IS_USED),
             },
-        ],
-    })
-], AutoscrollModule);
+        }),
+        ...(typeof window !== 'undefined'
+            ? [
+                provide({
+                    provide: commandLineListTokens.customerStart,
+                    useFactory: ({ logger, router, newScrollRestoration }) => {
+                        const log = logger('autoscroll');
+                        if (newScrollRestoration) {
+                            return noop;
+                        }
+                        // disable browser scroll restoration, to avoid conflicts with autoscroll
+                        const disableBrowserScrollRestoration = () => {
+                            log.debug('Disabling browser scroll restoration, autoscroll will be applied for this history entry');
+                            window.history.scrollRestoration = 'manual';
+                        };
+                        // enable browser scroll restoration, if autoscroll was disabled
+                        const enableBrowserScrollRestoration = () => {
+                            log.debug('Enable browser scroll restoration, autoscroll was disabled for this history entry');
+                            window.history.scrollRestoration = 'auto';
+                        };
+                        return () => {
+                            // for initial page load
+                            if (!window.history.state?.navigateState?.disableAutoscroll) {
+                                disableBrowserScrollRestoration();
+                            }
+                            // for sequent navigations
+                            router.registerSyncHook('change', async (navigation) => {
+                                if (!navigation.navigateState?.disableAutoscroll) {
+                                    disableBrowserScrollRestoration();
+                                }
+                                else {
+                                    enableBrowserScrollRestoration();
+                                }
+                            });
+                        };
+                    },
+                    deps: {
+                        logger: LOGGER_TOKEN,
+                        router: ROUTER_TOKEN,
+                        newScrollRestoration: optional(NEW_SCROLL_RESTORATION_IS_USED),
+                    },
+                }),
+            ]
+            : []),
+    ],
+});
+const ScrollRestorationModule = declareModule({
+    name: 'ScrollRestorationModule',
+    providers: [
+        provide({
+            provide: NEW_SCROLL_RESTORATION_IS_USED,
+            useValue: true,
+        }),
+        provide({
+            provide: LAYOUT_OPTIONS,
+            useValue: {
+                components: {
+                    autoscroll: ScrollRestoration,
+                },
+            },
+            multi: true,
+        }),
+        provide({
+            provide: AUTOSCROLL_APPPLIED_NAVIGATIONS_TOKEN,
+            useFactory: () => new Map(),
+        }),
+        ...(typeof window !== 'undefined'
+            ? [
+                provide({
+                    provide: commandLineListTokens.customerStart,
+                    useFactory: ({ logger, router, appliedNavigations }) => {
+                        const log = logger('autoscroll');
+                        return () => {
+                            try {
+                                log.debug('Restoring applied navigations from sessionStorage');
+                                const valueFromStorage = sessionStorage.getItem(APPLIED_NAVIGATIONS_KEY);
+                                if (valueFromStorage !== null) {
+                                    const parsedValue = JSON.parse(valueFromStorage);
+                                    Object.entries(parsedValue).forEach(([key, value]) => {
+                                        appliedNavigations.set(Number.parseInt(key, 10), value);
+                                    });
+                                }
+                                else {
+                                    log.debug('No applied navigations found in sessionStorage');
+                                }
+                            }
+                            catch (error) { }
+                            window.addEventListener('pagehide', () => {
+                                // to correct scroll restoration for current page in case of reload,
+                                // both enable automatic scroll restoration and save scroll position
+                                window.history.scrollRestoration = 'auto';
+                                const state = router.history.getCurrentState();
+                                appliedNavigations.set(state.index, {
+                                    href: router.getCurrentUrl()?.href || window.location.href,
+                                    scrollTop: window.scrollY,
+                                });
+                                try {
+                                    log.debug('Saving applied navigations to sessionStorage');
+                                    const valueToSave = {};
+                                    for (const [key, value] of appliedNavigations) {
+                                        valueToSave[key] = value;
+                                    }
+                                    sessionStorage.setItem(APPLIED_NAVIGATIONS_KEY, JSON.stringify(valueToSave));
+                                }
+                                catch (error) { }
+                            });
+                            // case for browser back/forward buttons and router.go/back/forward navigations,
+                            // here `history.getCurrentState()` and `router.getCurrentUrl()` will return leaving page values,
+                            // so we can save scroll position for correct page index
+                            window.addEventListener('popstate', (event) => {
+                                const state = router.history.getCurrentState();
+                                appliedNavigations.set(state.index, {
+                                    href: router.getCurrentUrl()?.href || window.location.href,
+                                    scrollTop: window.scrollY,
+                                });
+                                log.debug(`Save scroll position on history change, index: ${state.index}, scrollTop: ${window.scrollY}, url: ${router.getCurrentUrl()?.href || window.location.href}`);
+                            });
+                            // case for router.navigate navigation
+                            router.registerHook('beforeNavigate', async (navigation) => {
+                                if (!navigation.history) {
+                                    const state = router.history.getCurrentState();
+                                    appliedNavigations.set(state.index, {
+                                        href: navigation.fromUrl?.href || window.location.href,
+                                        scrollTop: window.scrollY,
+                                    });
+                                    log.debug(`Save scroll position on router.navigate, index: ${state.index}, scrollTop: ${window.scrollY}, url: ${navigation.fromUrl?.href || window.location.href}`);
+                                    // browser invalidates forward history on pushState, prune stale entries
+                                    for (const key of appliedNavigations.keys()) {
+                                        if (key > state.index) {
+                                            appliedNavigations.delete(key);
+                                        }
+                                    }
+                                }
+                            });
+                            // case for router.updateCurrentRoute navigation
+                            router.registerHook('beforeUpdateCurrent', async (navigation) => {
+                                if (!navigation.history) {
+                                    const state = router.history.getCurrentState();
+                                    appliedNavigations.set(state.index, {
+                                        href: navigation.fromUrl?.href || window.location.href,
+                                        scrollTop: window.scrollY,
+                                    });
+                                    log.debug(`Save scroll position on router.updateCurrentRoute, index: ${state.index}, scrollTop: ${window.scrollY}, url: ${navigation.fromUrl?.href || window.location.href}`);
+                                }
+                            });
+                        };
+                    },
+                    deps: {
+                        logger: LOGGER_TOKEN,
+                        router: ROUTER_TOKEN,
+                        appliedNavigations: AUTOSCROLL_APPPLIED_NAVIGATIONS_TOKEN,
+                    },
+                }),
+            ]
+            : []),
+    ],
+});
 
-export { AutoscrollModule };
+export { AutoscrollModule, ScrollRestorationModule };

package/lib/index.js

@@ -2,30 +2,203 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib = require('tslib');
+var noop = require('@tinkoff/utils/function/noop');
 var core = require('@tramvai/core');
 var tokensRender = require('@tramvai/tokens-render');
+var moduleRouter = require('@tramvai/module-router');
+var tokensCommon = require('@tramvai/tokens-common');
 var Autoscroll = require('./components/Autoscroll.js');
+var ScrollRestoration = require('./components/ScrollRestoration.js');
 var tokens = require('./tokens.js');
 
-exports.AutoscrollModule = class AutoscrollModule {
-};
-exports.AutoscrollModule = tslib.__decorate([
-    core.Module({
-        providers: [
-            {
-                provide: tokensRender.LAYOUT_OPTIONS,
-                useValue: {
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
+
+const APPLIED_NAVIGATIONS_KEY = '_t_autoscroll_applied_navigations';
+const NEW_SCROLL_RESTORATION_IS_USED = core.createToken('tramvai autoscroll new scroll restoration');
+/**
+ * @deprecated use ScrollRestorationModule instead, which includes autoscroll and compatible with View Transitions
+ */
+const AutoscrollModule = core.declareModule({
+    name: 'AutoscrollModule',
+    providers: [
+        core.provide({
+            provide: tokensRender.LAYOUT_OPTIONS,
+            useFactory: ({ newScrollRestoration }) => newScrollRestoration
+                ? {}
+                : {
                     components: {
                         autoscroll: Autoscroll.Autoscroll,
                     },
                 },
-                multi: true,
+            multi: true,
+            deps: {
+                newScrollRestoration: core.optional(NEW_SCROLL_RESTORATION_IS_USED),
+            },
+        }),
+        ...(typeof window !== 'undefined'
+            ? [
+                core.provide({
+                    provide: core.commandLineListTokens.customerStart,
+                    useFactory: ({ logger, router, newScrollRestoration }) => {
+                        const log = logger('autoscroll');
+                        if (newScrollRestoration) {
+                            return noop__default["default"];
+                        }
+                        // disable browser scroll restoration, to avoid conflicts with autoscroll
+                        const disableBrowserScrollRestoration = () => {
+                            log.debug('Disabling browser scroll restoration, autoscroll will be applied for this history entry');
+                            window.history.scrollRestoration = 'manual';
+                        };
+                        // enable browser scroll restoration, if autoscroll was disabled
+                        const enableBrowserScrollRestoration = () => {
+                            log.debug('Enable browser scroll restoration, autoscroll was disabled for this history entry');
+                            window.history.scrollRestoration = 'auto';
+                        };
+                        return () => {
+                            // for initial page load
+                            if (!window.history.state?.navigateState?.disableAutoscroll) {
+                                disableBrowserScrollRestoration();
+                            }
+                            // for sequent navigations
+                            router.registerSyncHook('change', async (navigation) => {
+                                if (!navigation.navigateState?.disableAutoscroll) {
+                                    disableBrowserScrollRestoration();
+                                }
+                                else {
+                                    enableBrowserScrollRestoration();
+                                }
+                            });
+                        };
+                    },
+                    deps: {
+                        logger: tokensCommon.LOGGER_TOKEN,
+                        router: moduleRouter.ROUTER_TOKEN,
+                        newScrollRestoration: core.optional(NEW_SCROLL_RESTORATION_IS_USED),
+                    },
+                }),
+            ]
+            : []),
+    ],
+});
+const ScrollRestorationModule = core.declareModule({
+    name: 'ScrollRestorationModule',
+    providers: [
+        core.provide({
+            provide: NEW_SCROLL_RESTORATION_IS_USED,
+            useValue: true,
+        }),
+        core.provide({
+            provide: tokensRender.LAYOUT_OPTIONS,
+            useValue: {
+                components: {
+                    autoscroll: ScrollRestoration.ScrollRestoration,
+                },
             },
-        ],
-    })
-], exports.AutoscrollModule);
+            multi: true,
+        }),
+        core.provide({
+            provide: tokens.AUTOSCROLL_APPPLIED_NAVIGATIONS_TOKEN,
+            useFactory: () => new Map(),
+        }),
+        ...(typeof window !== 'undefined'
+            ? [
+                core.provide({
+                    provide: core.commandLineListTokens.customerStart,
+                    useFactory: ({ logger, router, appliedNavigations }) => {
+                        const log = logger('autoscroll');
+                        return () => {
+                            try {
+                                log.debug('Restoring applied navigations from sessionStorage');
+                                const valueFromStorage = sessionStorage.getItem(APPLIED_NAVIGATIONS_KEY);
+                                if (valueFromStorage !== null) {
+                                    const parsedValue = JSON.parse(valueFromStorage);
+                                    Object.entries(parsedValue).forEach(([key, value]) => {
+                                        appliedNavigations.set(Number.parseInt(key, 10), value);
+                                    });
+                                }
+                                else {
+                                    log.debug('No applied navigations found in sessionStorage');
+                                }
+                            }
+                            catch (error) { }
+                            window.addEventListener('pagehide', () => {
+                                // to correct scroll restoration for current page in case of reload,
+                                // both enable automatic scroll restoration and save scroll position
+                                window.history.scrollRestoration = 'auto';
+                                const state = router.history.getCurrentState();
+                                appliedNavigations.set(state.index, {
+                                    href: router.getCurrentUrl()?.href || window.location.href,
+                                    scrollTop: window.scrollY,
+                                });
+                                try {
+                                    log.debug('Saving applied navigations to sessionStorage');
+                                    const valueToSave = {};
+                                    for (const [key, value] of appliedNavigations) {
+                                        valueToSave[key] = value;
+                                    }
+                                    sessionStorage.setItem(APPLIED_NAVIGATIONS_KEY, JSON.stringify(valueToSave));
+                                }
+                                catch (error) { }
+                            });
+                            // case for browser back/forward buttons and router.go/back/forward navigations,
+                            // here `history.getCurrentState()` and `router.getCurrentUrl()` will return leaving page values,
+                            // so we can save scroll position for correct page index
+                            window.addEventListener('popstate', (event) => {
+                                const state = router.history.getCurrentState();
+                                appliedNavigations.set(state.index, {
+                                    href: router.getCurrentUrl()?.href || window.location.href,
+                                    scrollTop: window.scrollY,
+                                });
+                                log.debug(`Save scroll position on history change, index: ${state.index}, scrollTop: ${window.scrollY}, url: ${router.getCurrentUrl()?.href || window.location.href}`);
+                            });
+                            // case for router.navigate navigation
+                            router.registerHook('beforeNavigate', async (navigation) => {
+                                if (!navigation.history) {
+                                    const state = router.history.getCurrentState();
+                                    appliedNavigations.set(state.index, {
+                                        href: navigation.fromUrl?.href || window.location.href,
+                                        scrollTop: window.scrollY,
+                                    });
+                                    log.debug(`Save scroll position on router.navigate, index: ${state.index}, scrollTop: ${window.scrollY}, url: ${navigation.fromUrl?.href || window.location.href}`);
+                                    // browser invalidates forward history on pushState, prune stale entries
+                                    for (const key of appliedNavigations.keys()) {
+                                        if (key > state.index) {
+                                            appliedNavigations.delete(key);
+                                        }
+                                    }
+                                }
+                            });
+                            // case for router.updateCurrentRoute navigation
+                            router.registerHook('beforeUpdateCurrent', async (navigation) => {
+                                if (!navigation.history) {
+                                    const state = router.history.getCurrentState();
+                                    appliedNavigations.set(state.index, {
+                                        href: navigation.fromUrl?.href || window.location.href,
+                                        scrollTop: window.scrollY,
+                                    });
+                                    log.debug(`Save scroll position on router.updateCurrentRoute, index: ${state.index}, scrollTop: ${window.scrollY}, url: ${navigation.fromUrl?.href || window.location.href}`);
+                                }
+                            });
+                        };
+                    },
+                    deps: {
+                        logger: tokensCommon.LOGGER_TOKEN,
+                        router: moduleRouter.ROUTER_TOKEN,
+                        appliedNavigations: tokens.AUTOSCROLL_APPPLIED_NAVIGATIONS_TOKEN,
+                    },
+                }),
+            ]
+            : []),
+    ],
+});
 
 exports.Autoscroll = Autoscroll.Autoscroll;
+exports.ScrollRestoration = ScrollRestoration.ScrollRestoration;
+exports.AUTOSCROLL_APPPLIED_NAVIGATIONS_TOKEN = tokens.AUTOSCROLL_APPPLIED_NAVIGATIONS_TOKEN;
 exports.AUTOSCROLL_BEHAVIOR_MODE_TOKEN = tokens.AUTOSCROLL_BEHAVIOR_MODE_TOKEN;
+exports.AUTOSCROLL_DISABLED_TOKEN = tokens.AUTOSCROLL_DISABLED_TOKEN;
 exports.AUTOSCROLL_SCROLL_TOP_TOKEN = tokens.AUTOSCROLL_SCROLL_TOP_TOKEN;
+exports.AutoscrollModule = AutoscrollModule;
+exports.ScrollRestorationModule = ScrollRestorationModule;

package/lib/tokens.d.ts

@@ -1,9 +1,25 @@
+export type AutoscrollBehavior = 'smooth' | 'instant' | 'auto';
 export declare const AUTOSCROLL_BEHAVIOR_MODE_TOKEN: ("smooth" & {
     __type?: "base token" | undefined;
+}) | ("instant" & {
+    __type?: "base token" | undefined;
 }) | ("auto" & {
     __type?: "base token" | undefined;
+}) | (((defaultBehavior: AutoscrollBehavior) => AutoscrollBehavior) & {
+    __type?: "base token" | undefined;
 });
-export declare const AUTOSCROLL_SCROLL_TOP_TOKEN: number & {
+export declare const AUTOSCROLL_SCROLL_TOP_TOKEN: (number & {
+    __type?: "base token" | undefined;
+}) | (((defaultScrollTop: number, isRestoredValue: boolean) => number) & {
+    __type?: "base token" | undefined;
+});
+export declare const AUTOSCROLL_DISABLED_TOKEN: (() => boolean | undefined) & {
+    __type?: "base token" | undefined;
+};
+export declare const AUTOSCROLL_APPPLIED_NAVIGATIONS_TOKEN: Map<number, {
+    href: string;
+    scrollTop: number;
+}> & {
     __type?: "base token" | undefined;
 };
 //# sourceMappingURL=tokens.d.ts.map

package/lib/tokens.es.js

@@ -2,5 +2,7 @@ import { createToken } from '@tinkoff/dippy';
 
 const AUTOSCROLL_BEHAVIOR_MODE_TOKEN = createToken('autoscroll behavior');
 const AUTOSCROLL_SCROLL_TOP_TOKEN = createToken('autoscroll scroll top');
+const AUTOSCROLL_DISABLED_TOKEN = createToken('autoscroll disabled');
+const AUTOSCROLL_APPPLIED_NAVIGATIONS_TOKEN = createToken('autoscroll applied navigations');
 
-export { AUTOSCROLL_BEHAVIOR_MODE_TOKEN, AUTOSCROLL_SCROLL_TOP_TOKEN };
+export { AUTOSCROLL_APPPLIED_NAVIGATIONS_TOKEN, AUTOSCROLL_BEHAVIOR_MODE_TOKEN, AUTOSCROLL_DISABLED_TOKEN, AUTOSCROLL_SCROLL_TOP_TOKEN };

package/lib/tokens.js

@@ -6,6 +6,10 @@ var dippy = require('@tinkoff/dippy');
 
 const AUTOSCROLL_BEHAVIOR_MODE_TOKEN = dippy.createToken('autoscroll behavior');
 const AUTOSCROLL_SCROLL_TOP_TOKEN = dippy.createToken('autoscroll scroll top');
+const AUTOSCROLL_DISABLED_TOKEN = dippy.createToken('autoscroll disabled');
+const AUTOSCROLL_APPPLIED_NAVIGATIONS_TOKEN = dippy.createToken('autoscroll applied navigations');
 
+exports.AUTOSCROLL_APPPLIED_NAVIGATIONS_TOKEN = AUTOSCROLL_APPPLIED_NAVIGATIONS_TOKEN;
 exports.AUTOSCROLL_BEHAVIOR_MODE_TOKEN = AUTOSCROLL_BEHAVIOR_MODE_TOKEN;
+exports.AUTOSCROLL_DISABLED_TOKEN = AUTOSCROLL_DISABLED_TOKEN;
 exports.AUTOSCROLL_SCROLL_TOP_TOKEN = AUTOSCROLL_SCROLL_TOP_TOKEN;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/module-autoscroll",
-  "version": "7.21.0",
+  "version": "7.26.8",
   "description": "Компонент с автопрокруткой к началу страницы",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -16,14 +16,19 @@
     "build": "tramvai-build --forPublish --preserveModules",
     "watch": "tsc -w"
   },
+  "dependencies": {
+    "@tinkoff/utils": "^2.1.3",
+    "tslib": "^2.4.0"
+  },
   "peerDependencies": {
     "@tinkoff/dippy": "^1.0.0",
-    "@tramvai/core": "7.21.0",
-    "@tramvai/module-router": "7.21.0",
-    "@tramvai/react": "7.21.0",
-    "@tramvai/tokens-render": "7.21.0",
-    "react": ">=16.14.0",
-    "tslib": "^2.4.0"
+    "@tinkoff/react-hooks": "0.6.1",
+    "@tramvai/core": "7.26.8",
+    "@tramvai/module-router": "7.26.8",
+    "@tramvai/react": "7.26.8",
+    "@tramvai/tokens-common": "7.26.8",
+    "@tramvai/tokens-render": "7.26.8",
+    "react": ">=16.14.0"
   },
   "module": "lib/index.es.js",
   "license": "Apache-2.0"