@tramvai/module-autoscroll 6.80.26 → 6.81.11

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,7 +34,11 @@ 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.
 
-Browser scroll restoration is disabled when autoscroll is enabled (`window.history.scrollRestoration = 'manual'`).
+### 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
 
@@ -51,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
@@ -63,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
   }),
 ];
 ```
@@ -83,7 +138,7 @@ function Component() {
 }
 ```
 
-### ScrollTo top change
+### Scroll top change
 
 #### Global
 
@@ -112,7 +167,8 @@ const providers = [
   // ...,
   provide({
     provide: AUTOSCROLL_SCROLL_TOP_TOKEN,
-    useValue: () => {
+    // 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

package/lib/components/Autoscroll.es.js

@@ -1,5 +1,5 @@
 import { memo, useMemo, useRef } from 'react';
-import { useRoute, useUrl, useViewTransition } from '@tramvai/module-router';
+import { useRoute, useUrl } from '@tramvai/module-router';
 import { optional } from '@tinkoff/dippy';
 import { useDi } from '@tramvai/react';
 import { LOGGER_TOKEN } from '@tramvai/tokens-common';
@@ -32,7 +32,6 @@ const scrollToAnchor = (anchor, behavior) => {
 const Autoscroll = memo(() => {
     const route = useRoute();
     const url = useUrl();
-    const { isTransitioning } = useViewTransition(url.pathname);
     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);
@@ -48,11 +47,6 @@ const Autoscroll = memo(() => {
         if (!shouldScroll.current) {
             return;
         }
-        // when VT is enabled, we will have a two re-renderw with `isTransitioning: true` (with current and next url),
-        // and only after that `isTransitioning` will be false and url will be updated to the next one.
-        if (isTransitioning) {
-            return;
-        }
         // disable autoscroll for current page if `disableAutoscroll` is set in route history state
         if (route.navigateState?.disableAutoscroll) {
             previousUrl.current = url;
@@ -64,9 +58,11 @@ const Autoscroll = memo(() => {
         shouldScroll.current = false;
         const scrollBehavior = route.navigateState?.autoscrollBehavior ??
             (typeof scrollBehaviorFactory === 'function'
-                ? scrollBehaviorFactory()
+                ? scrollBehaviorFactory(DEFAULT_AUTOSCROLL_BEHAVIOR)
                 : scrollBehaviorFactory);
-        const scrollTop = typeof scrollTopFactory === 'function' ? scrollTopFactory() : scrollTopFactory;
+        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}`);
@@ -79,7 +75,7 @@ const Autoscroll = memo(() => {
         }
         scroll();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [route, url, isTransitioning]);
+    }, [route, url]);
     return null;
 });
 

package/lib/components/Autoscroll.js

@@ -36,7 +36,6 @@ const scrollToAnchor = (anchor, behavior) => {
 const Autoscroll = react.memo(() => {
     const route = moduleRouter.useRoute();
     const url = moduleRouter.useUrl();
-    const { isTransitioning } = moduleRouter.useViewTransition(url.pathname);
     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);
@@ -52,11 +51,6 @@ const Autoscroll = react.memo(() => {
         if (!shouldScroll.current) {
             return;
         }
-        // when VT is enabled, we will have a two re-renderw with `isTransitioning: true` (with current and next url),
-        // and only after that `isTransitioning` will be false and url will be updated to the next one.
-        if (isTransitioning) {
-            return;
-        }
         // disable autoscroll for current page if `disableAutoscroll` is set in route history state
         if (route.navigateState?.disableAutoscroll) {
             previousUrl.current = url;
@@ -68,9 +62,11 @@ const Autoscroll = react.memo(() => {
         shouldScroll.current = false;
         const scrollBehavior = route.navigateState?.autoscrollBehavior ??
             (typeof scrollBehaviorFactory === 'function'
-                ? scrollBehaviorFactory()
+                ? scrollBehaviorFactory(DEFAULT_AUTOSCROLL_BEHAVIOR)
                 : scrollBehaviorFactory);
-        const scrollTop = typeof scrollTopFactory === 'function' ? scrollTopFactory() : scrollTopFactory;
+        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}`);
@@ -83,7 +79,7 @@ const Autoscroll = react.memo(() => {
         }
         scroll();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [route, url, isTransitioning]);
+    }, [route, url]);
     return null;
 });
 

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,67 +1,192 @@
-import { __decorate } from 'tslib';
-import { Module, provide, commandLineListTokens } 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({
-                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,
-            }),
-            ...(typeof window !== 'undefined'
-                ? [
-                    provide({
-                        provide: commandLineListTokens.customerStart,
-                        useFactory: ({ logger, router }) => {
-                            const log = logger('autoscroll');
-                            // 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) {
+            multi: true,
+            deps: {
+                newScrollRestoration: optional(NEW_SCROLL_RESTORATION_IS_USED),
+            },
+        }),
+        ...(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();
                                 }
-                                // for sequent navigations
-                                router.registerSyncHook('change', async (navigation) => {
-                                    if (!navigation.navigateState?.disableAutoscroll) {
-                                        disableBrowserScrollRestoration();
-                                    }
-                                    else {
-                                        enableBrowserScrollRestoration();
+                                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,
                                 });
-                            };
-                        },
-                        deps: {
-                            logger: LOGGER_TOKEN,
-                            router: ROUTER_TOKEN,
-                        },
-                    }),
-                ]
-                : []),
-        ],
-    })
-], AutoscrollModule);
+                                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,71 +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: [
-            core.provide({
-                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,
-            }),
-            ...(typeof window !== 'undefined'
-                ? [
-                    core.provide({
-                        provide: core.commandLineListTokens.customerStart,
-                        useFactory: ({ logger, router }) => {
-                            const log = logger('autoscroll');
-                            // 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) {
+            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();
                                 }
-                                // for sequent navigations
-                                router.registerSyncHook('change', async (navigation) => {
-                                    if (!navigation.navigateState?.disableAutoscroll) {
-                                        disableBrowserScrollRestoration();
-                                    }
-                                    else {
-                                        enableBrowserScrollRestoration();
+                                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,
+                },
+            },
+            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,
                                 });
-                            };
-                        },
-                        deps: {
-                            logger: tokensCommon.LOGGER_TOKEN,
-                            router: moduleRouter.ROUTER_TOKEN,
-                        },
-                    }),
-                ]
-                : []),
-        ],
-    })
-], exports.AutoscrollModule);
+                                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,14 +1,25 @@
-export type AutoscrollBehavior = 'smooth' | 'auto';
+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;
-}) | ((() => AutoscrollBehavior) & {
+}) | (((defaultBehavior: AutoscrollBehavior) => AutoscrollBehavior) & {
     __type?: "base token" | undefined;
 });
 export declare const AUTOSCROLL_SCROLL_TOP_TOKEN: (number & {
     __type?: "base token" | undefined;
-}) | ((() => number) & {
+}) | (((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": "6.80.26",
+  "version": "6.81.11",
   "description": "Компонент с автопрокруткой к началу страницы",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -17,16 +17,17 @@
     "watch": "tsc -w"
   },
   "dependencies": {
+    "@tinkoff/utils": "^2.1.3",
     "tslib": "^2.4.0"
   },
   "peerDependencies": {
     "@tinkoff/dippy": "^1.0.0",
     "@tinkoff/react-hooks": "0.5.4",
-    "@tramvai/core": "6.80.26",
-    "@tramvai/module-router": "6.80.26",
-    "@tramvai/react": "6.80.26",
-    "@tramvai/tokens-common": "6.80.26",
-    "@tramvai/tokens-render": "6.80.26",
+    "@tramvai/core": "6.81.11",
+    "@tramvai/module-router": "6.81.11",
+    "@tramvai/react": "6.81.11",
+    "@tramvai/tokens-common": "6.81.11",
+    "@tramvai/tokens-render": "6.81.11",
     "react": ">=16.14.0"
   },
   "module": "lib/index.es.js",