@redocly/theme 0.65.0-next.4 → 0.65.0-next.5

package/lib/components/Button/Button.d.ts

@@ -14,6 +14,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     extraClass?: string;
     to?: string;
     external?: boolean;
+    languageInsensitive?: boolean;
     icon?: JSX.Element;
     iconPosition?: 'left' | 'right';
     title?: string;

package/lib/components/Button/Button.js

@@ -32,6 +32,17 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -166,13 +177,14 @@ const StyledButton = styled_components_1.default.button.attrs((props) => ({
     `}
 `;
 const ButtonComponent = (props) => {
+    const { languageInsensitive } = props, buttonProps = __rest(props, ["languageInsensitive"]);
     const tabIndex = 'tabIndex' in props ? props.tabIndex : props.to ? -1 : undefined;
-    const button = (react_1.default.createElement(StyledButton, Object.assign({ "data-component-name": "Button/Button" }, props, { iconOnly: !props.children && props.icon !== null, tabIndex: tabIndex }),
+    const button = (react_1.default.createElement(StyledButton, Object.assign({ "data-component-name": "Button/Button" }, buttonProps, { iconOnly: !props.children && props.icon !== null, tabIndex: tabIndex }),
         props.icon && props.iconPosition !== 'right' && props.icon,
         props.children,
         props.icon && props.iconPosition === 'right' && props.icon));
     if (props.to) {
-        return (react_1.default.createElement(StyledButtonLink, { to: props.to, external: props.external, onClick: props.onClick }, button));
+        return (react_1.default.createElement(StyledButtonLink, { to: props.to, external: props.external, languageInsensitive: languageInsensitive, onClick: props.onClick }, button));
     }
     else {
         return button;

package/lib/components/Dropdown/DropdownMenuItem.js

@@ -62,13 +62,25 @@ function DropdownMenuItem(_a) {
         }
     };
     className = className || '' + (active ? ' active' : '');
+    const sharedProps = {
+        $active: active,
+        $dangerous: dangerous,
+        $disabled: disabled,
+        $separator: separator,
+        $separatorLine: separatorLine,
+        'data-component-name': 'Dropdown/DropdownMenuItem',
+        className,
+        onClick: handleClick,
+        role,
+        style,
+    };
     if (to) {
-        return (react_1.default.createElement(DropdownMenuItemWrapper, Object.assign({ as: Link_1.Link, "data-component-name": "Dropdown/DropdownMenuItem", className: className, "$separatorLine": separatorLine, to: to, style: style, role: role }, dataAttributes, otherProps),
+        return (react_1.default.createElement(DropdownMenuItemWrapper, Object.assign({ as: Link_1.Link, to: to }, sharedProps, dataAttributes, otherProps),
             prefix,
             children,
             suffix));
     }
-    return (react_1.default.createElement(DropdownMenuItemWrapper, Object.assign({ "data-component-name": "Dropdown/DropdownMenuItem", className: className, role: role, style: style }, dataAttributes, { onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: onAction ? 0 : -1, active: active, disabled: disabled, separator: separator, dangerous: dangerous, "$separatorLine": separatorLine }),
+    return (react_1.default.createElement(DropdownMenuItemWrapper, Object.assign({}, sharedProps, dataAttributes, { onKeyDown: handleKeyDown, tabIndex: onAction ? 0 : -1 }),
         prefix,
         children || content,
         suffix));
@@ -109,7 +121,7 @@ const DropdownMenuItemWrapper = styled_components_1.default.li `
     color: var(--dropdown-menu-item-color-hover);
   }
 
-  ${({ separator }) => separator &&
+  ${({ $separator }) => $separator &&
     (0, styled_components_1.css) `
       cursor: default;
       pointer-events: none;
@@ -119,7 +131,7 @@ const DropdownMenuItemWrapper = styled_components_1.default.li `
       --dropdown-menu-item-bg-color-hover: var(--dropdown-menu-item-bg-color);
     `}
 
-  ${({ active }) => active &&
+  ${({ $active }) => $active &&
     (0, styled_components_1.css) `
       background-color: var(--dropdown-menu-item-bg-color-active);
       color: var(--dropdown-menu-item-color-active);
@@ -128,7 +140,7 @@ const DropdownMenuItemWrapper = styled_components_1.default.li `
       }
     `}
 
-  ${({ disabled }) => disabled &&
+  ${({ $disabled }) => $disabled &&
     (0, styled_components_1.css) `
       cursor: default;
       pointer-events: none;
@@ -152,7 +164,7 @@ const DropdownMenuItemWrapper = styled_components_1.default.li `
       }
     `}
 
-  ${({ dangerous }) => dangerous &&
+  ${({ $dangerous }) => $dangerous &&
     (0, styled_components_1.css) `
       &:hover,
       & {

package/lib/components/LanguagePicker/LanguagePicker.js

@@ -14,7 +14,7 @@ const Button_1 = require("../../components/Button/Button");
 const Dropdown_1 = require("../../components/Dropdown/Dropdown");
 const CheckmarkIcon_1 = require("../../icons/CheckmarkIcon/CheckmarkIcon");
 function LanguagePicker(props) {
-    const { currentLocale, locales, setLocale } = (0, hooks_1.useLanguagePicker)();
+    const { currentLocale, locales, getLocaleUrl } = (0, hooks_1.useLanguagePicker)();
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
     if (locales.length < 2 || !currentLocale) {
@@ -23,8 +23,9 @@ function LanguagePicker(props) {
     const languagePickerButton = (react_1.default.createElement(Button_1.Button, { icon: react_1.default.createElement(GlobalOutlinedIcon_1.GlobalOutlinedIcon, { color: "--button-content-color" }), variant: "secondary", size: "medium" }));
     const languageItems = locales.map((locale) => ({
         content: locale.name || locale.code || '',
+        to: getLocaleUrl(locale.code),
+        languageInsensitive: true,
         onAction: () => {
-            setLocale(locale.code);
             props.onChangeLanguage(locale.code);
             telemetry.sendLanguagePickerLocaleChangedMessage([{ object: 'locale', locale: locale.code }]);
         },

package/lib/components/UserMenu/LoginButton.js

@@ -13,6 +13,6 @@ function LoginButton({ href, className, variant = 'primary', size = 'medium', la
     const telemetry = useTelemetry();
     const buttonLabel = label || translate(labelTranslationKey, 'Login');
     return (react_1.default.createElement("span", { "data-component-name": componentName, className: className },
-        react_1.default.createElement(Button_1.Button, { "data-translation-key": label ? undefined : labelTranslationKey, to: href, onClick: () => telemetry.sendLoginButtonClickedMessage(), "data-testid": "login-btn", extraClass: className, variant: variant, size: size }, buttonLabel)));
+        react_1.default.createElement(Button_1.Button, { "data-translation-key": label ? undefined : labelTranslationKey, to: href, languageInsensitive: true, onClick: () => telemetry.sendLoginButtonClickedMessage(), "data-testid": "login-btn", extraClass: className, variant: variant, size: size }, buttonLabel)));
 }
 //# sourceMappingURL=LoginButton.js.map

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-steps.d.ts

@@ -10,15 +10,4 @@ type Params = {
     root: React.RefObject<HTMLDivElement | null>;
 };
 export declare function useCodeWalkthroughSteps({ steps, enableDeepLink, root, }: Params): WalkthroughStepsState;
-type StepsGroup = {
-    freeSpace: number;
-    usedSpace: number;
-    offset: number;
-    steps: {
-        offset: number;
-        height: number;
-        ref?: HTMLElement;
-    }[];
-};
-export declare function getGroupMarkers(group: StepsGroup): number[];
 export {};

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-steps.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCodeWalkthroughSteps = useCodeWalkthroughSteps;
-exports.getGroupMarkers = getGroupMarkers;
 const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
 const js_utils_1 = require("../../utils/js-utils");
@@ -97,7 +96,7 @@ function useCodeWalkthroughSteps({ steps, enableDeepLink, root, }) {
             return;
         }
         step.compRef = element;
-        setVisibleSteps((prevSteps) => (0, js_utils_1.insertAt)(prevSteps, step.index, step));
+        setVisibleSteps((prevSteps) => insertVisibleStepInOrder(prevSteps, step));
     }, [stepsMap]);
     const removeStep = (0, react_1.useCallback)((stepId) => {
         const step = stepsMap.get(stepId);
@@ -315,4 +314,10 @@ function getNormalizedNumber(options) {
     const { min, max, value } = options;
     return (value - min) / (max - min);
 }
+function insertVisibleStepInOrder(visible, step) {
+    const others = visible.filter((s) => s.id !== step.id);
+    const laterAt = others.findIndex((s) => s.index > step.index);
+    const at = laterAt === -1 ? others.length : laterAt;
+    return (0, js_utils_1.insertAt)(others, at, step);
+}
 //# sourceMappingURL=use-code-walkthrough-steps.js.map

package/lib/core/hooks/use-language-picker.d.ts

@@ -1,6 +1,11 @@
 import type { L10nConfig } from '../types/hooks';
-export declare function useLanguagePicker(): {
+export type UseLanguagePickerResult = {
     currentLocale: L10nConfig['locales'][number] | undefined;
     locales: L10nConfig['locales'];
+    getLocaleUrl: (value: string) => string;
+    /**
+     * @deprecated Use `getLocaleUrl` to build the URL for the target locale, then pass it to `<Link>`.
+     */
     setLocale: (value: string) => void;
 };
+export declare function useLanguagePicker(): UseLanguagePickerResult;

package/lib/core/hooks/use-language-picker.js

@@ -9,15 +9,23 @@ function useLanguagePicker() {
     const navigate = (0, react_router_dom_1.useNavigate)();
     const loadAndNavigate = useLoadAndNavigate();
     const { currentLocale, locales, defaultLocale } = useL10nConfig();
+    const location = (0, react_router_dom_1.useLocation)();
     const locale = locales.find((l) => l.code === currentLocale);
+    function getLocaleUrl(value) {
+        let newLangPathname = (0, urls_1.getPathnameForLocale)((0, urls_1.withoutPathPrefix)(location.pathname), defaultLocale, value, locales);
+        if (location.search) {
+            newLangPathname += location.search;
+        }
+        return (0, urls_1.addLeadingSlash)(newLangPathname);
+    }
     function setLocale(value) {
-        const newLangPathname = (0, urls_1.withPathPrefix)((0, urls_1.getPathnameForLocale)((0, urls_1.withoutPathPrefix)(location.pathname), defaultLocale, value, locales));
-        const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
+        const newUrlWithLanguage = (0, urls_1.withPathPrefix)(getLocaleUrl(value));
         loadAndNavigate({ navigate, to: newUrlWithLanguage });
     }
     return {
         currentLocale: locale,
         locales,
+        getLocaleUrl,
         setLocale,
     };
 }

package/lib/markdoc/components/CodeWalkthrough/CodeStep.js

@@ -40,9 +40,11 @@ exports.StepWrapper = void 0;
 exports.CodeStep = CodeStep;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const react_router_dom_1 = require("react-router-dom");
 const Marker_1 = require("../../../components/Marker/Marker");
 const contexts_1 = require("../../../core/contexts");
 function CodeStep({ id, heading, when, unless, children, }) {
+    const location = (0, react_router_dom_1.useLocation)();
     const compRef = (0, react_1.useRef)(null);
     const markerRef = (0, react_1.useRef)(null);
     const { areConditionsMet } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);
@@ -66,15 +68,14 @@ function CodeStep({ id, heading, when, unless, children, }) {
     const handleRegisterMarker = (0, react_1.useCallback)((element) => registerMarker(id, element), [registerMarker, id]);
     const handleRemoveMarker = (0, react_1.useCallback)((element) => removeMarker(id, element), [removeMarker, id]);
     (0, react_1.useEffect)(() => {
-        // If the step is active during first render, scroll to it
-        // This is to ensure that the step is visible when the page is loaded
-        if (isActive) {
-            // Ensure scrollMarginTop calculated before step being scrolled.
-            setTimeout(handleActivateStep, 5);
-        }
+        // If the step is active during navigation or first render, scroll to it
+        if (!isActive)
+            return;
+        const timer = setTimeout(handleActivateStep, 5);
+        return () => clearTimeout(timer);
         // Ignore dependency array because we only need to run this once
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [location.pathname]);
     (0, react_1.useEffect)(() => {
         var _a, _b;
         const currentCompRef = compRef.current;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.65.0-next.4",
+  "version": "0.65.0-next.5",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -63,7 +63,7 @@
     "vitest": "4.0.10",
     "vitest-when": "0.6.2",
     "webpack": "5.105.2",
-    "@redocly/realm-asyncapi-sdk": "0.11.0-next.2"
+    "@redocly/realm-asyncapi-sdk": "0.11.0-next.3"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",

package/src/components/Button/Button.tsx

@@ -28,6 +28,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   extraClass?: string;
   to?: string;
   external?: boolean;
+  languageInsensitive?: boolean;
   icon?: JSX.Element;
   iconPosition?: 'left' | 'right';
   title?: string;
@@ -175,12 +176,13 @@ const StyledButton = styled.button.attrs((props: ButtonProps) => ({
 `;
 
 const ButtonComponent: React.FC<ButtonProps> = (props) => {
+  const { languageInsensitive, ...buttonProps } = props;
   const tabIndex = 'tabIndex' in props ? props.tabIndex : props.to ? -1 : undefined;
 
   const button = (
     <StyledButton
       data-component-name="Button/Button"
-      {...props}
+      {...buttonProps}
       iconOnly={!props.children && props.icon !== null}
       tabIndex={tabIndex}
     >
@@ -192,7 +194,12 @@ const ButtonComponent: React.FC<ButtonProps> = (props) => {
 
   if (props.to) {
     return (
-      <StyledButtonLink to={props.to} external={props.external} onClick={props.onClick}>
+      <StyledButtonLink
+        to={props.to}
+        external={props.external}
+        languageInsensitive={languageInsensitive}
+        onClick={props.onClick}
+      >
         {button}
       </StyledButtonLink>
     );

package/src/components/Dropdown/DropdownMenuItem.tsx

@@ -55,16 +55,25 @@ export function DropdownMenuItem({
 
   className = className || '' + (active ? ' active' : '');
 
+  const sharedProps = {
+    $active: active,
+    $dangerous: dangerous,
+    $disabled: disabled,
+    $separator: separator,
+    $separatorLine: separatorLine,
+    'data-component-name': 'Dropdown/DropdownMenuItem',
+    className,
+    onClick: handleClick,
+    role,
+    style,
+  };
+
   if (to) {
     return (
       <DropdownMenuItemWrapper
         as={Link}
-        data-component-name="Dropdown/DropdownMenuItem"
-        className={className}
-        $separatorLine={separatorLine}
         to={to}
-        style={style}
-        role={role}
+        {...sharedProps}
         {...dataAttributes}
         {...otherProps}
       >
@@ -77,19 +86,10 @@ export function DropdownMenuItem({
 
   return (
     <DropdownMenuItemWrapper
-      data-component-name="Dropdown/DropdownMenuItem"
-      className={className}
-      role={role}
-      style={style}
+      {...sharedProps}
       {...dataAttributes}
-      onClick={handleClick}
       onKeyDown={handleKeyDown}
       tabIndex={onAction ? 0 : -1}
-      active={active}
-      disabled={disabled}
-      separator={separator}
-      dangerous={dangerous}
-      $separatorLine={separatorLine}
     >
       {prefix}
       {children || content}
@@ -100,10 +100,10 @@ export function DropdownMenuItem({
 
 const DropdownMenuItemWrapper = styled.li<{
   $separatorLine?: boolean;
-  active?: boolean;
-  disabled?: boolean;
-  separator?: boolean;
-  dangerous?: boolean;
+  $separator?: boolean;
+  $active?: boolean;
+  $disabled?: boolean;
+  $dangerous?: boolean;
 }>`
   display: flex;
   flex-direction: row;
@@ -140,8 +140,8 @@ const DropdownMenuItemWrapper = styled.li<{
     color: var(--dropdown-menu-item-color-hover);
   }
 
-  ${({ separator }) =>
-    separator &&
+  ${({ $separator }) =>
+    $separator &&
     css`
       cursor: default;
       pointer-events: none;
@@ -151,8 +151,8 @@ const DropdownMenuItemWrapper = styled.li<{
       --dropdown-menu-item-bg-color-hover: var(--dropdown-menu-item-bg-color);
     `}
 
-  ${({ active }) =>
-    active &&
+  ${({ $active }) =>
+    $active &&
     css`
       background-color: var(--dropdown-menu-item-bg-color-active);
       color: var(--dropdown-menu-item-color-active);
@@ -161,8 +161,8 @@ const DropdownMenuItemWrapper = styled.li<{
       }
     `}
 
-  ${({ disabled }) =>
-    disabled &&
+  ${({ $disabled }) =>
+    $disabled &&
     css`
       cursor: default;
       pointer-events: none;
@@ -187,8 +187,8 @@ const DropdownMenuItemWrapper = styled.li<{
       }
     `}
 
-  ${({ dangerous }) =>
-    dangerous &&
+  ${({ $dangerous }) =>
+    $dangerous &&
     css`
       &:hover,
       & {

package/src/components/LanguagePicker/LanguagePicker.tsx

@@ -19,7 +19,7 @@ export type LanguagePickerProps = {
 };
 
 export function LanguagePicker(props: LanguagePickerProps): JSX.Element | null {
-  const { currentLocale, locales, setLocale } = useLanguagePicker();
+  const { currentLocale, locales, getLocaleUrl } = useLanguagePicker();
   const { useTelemetry } = useThemeHooks();
   const telemetry = useTelemetry();
 
@@ -37,8 +37,9 @@ export function LanguagePicker(props: LanguagePickerProps): JSX.Element | null {
 
   const languageItems = locales.map((locale) => ({
     content: locale.name || locale.code || '',
+    to: getLocaleUrl(locale.code),
+    languageInsensitive: true,
     onAction: () => {
-      setLocale(locale.code);
       props.onChangeLanguage(locale.code);
       telemetry.sendLanguagePickerLocaleChangedMessage([{ object: 'locale', locale: locale.code }]);
     },

package/src/components/UserMenu/LoginButton.tsx

@@ -35,6 +35,7 @@ export function LoginButton({
       <Button
         data-translation-key={label ? undefined : labelTranslationKey}
         to={href}
+        languageInsensitive
         onClick={() => telemetry.sendLoginButtonClickedMessage()}
         data-testid="login-btn"
         extraClass={className}

package/src/core/hooks/code-walkthrough/use-code-walkthrough-steps.ts

@@ -153,7 +153,7 @@ export function useCodeWalkthroughSteps({
       }
 
       step.compRef = element;
-      setVisibleSteps((prevSteps) => insertAt(prevSteps, step.index, step));
+      setVisibleSteps((prevSteps) => insertVisibleStepInOrder(prevSteps, step));
     },
     [stepsMap],
   );
@@ -365,7 +365,7 @@ function getGroups(steps: CodeWalkthroughStep[]): StepsGroup[] {
   return groups;
 }
 
-export function getGroupMarkers(group: StepsGroup) {
+function getGroupMarkers(group: StepsGroup) {
   if (!group.steps.length) {
     return [];
   }
@@ -440,3 +440,11 @@ function getNormalizedNumber(options: { min: number; max: number; value: number
 
   return (value - min) / (max - min);
 }
+
+function insertVisibleStepInOrder(visible: StepWithIndex[], step: StepWithIndex): StepWithIndex[] {
+  const others = visible.filter((s) => s.id !== step.id);
+  const laterAt = others.findIndex((s) => s.index > step.index);
+  const at = laterAt === -1 ? others.length : laterAt;
+
+  return insertAt(others, at, step);
+}

package/src/core/hooks/use-language-picker.ts

@@ -1,34 +1,59 @@
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import type { L10nConfig } from '../types/hooks';
 
 import { useThemeHooks } from './use-theme-hooks';
-import { getPathnameForLocale, withPathPrefix, withoutPathPrefix } from '../utils/urls';
+import {
+  addLeadingSlash,
+  getPathnameForLocale,
+  withoutPathPrefix,
+  withPathPrefix,
+} from '../utils/urls';
 
-export function useLanguagePicker(): {
+export type UseLanguagePickerResult = {
   currentLocale: L10nConfig['locales'][number] | undefined;
   locales: L10nConfig['locales'];
+  getLocaleUrl: (value: string) => string;
+  /**
+   * @deprecated Use `getLocaleUrl` to build the URL for the target locale, then pass it to `<Link>`.
+   */
   setLocale: (value: string) => void;
-} {
+};
+
+export function useLanguagePicker(): UseLanguagePickerResult {
   const { useL10nConfig, useLoadAndNavigate } = useThemeHooks();
   const navigate = useNavigate();
   const loadAndNavigate = useLoadAndNavigate();
+
   const { currentLocale, locales, defaultLocale } = useL10nConfig();
+  const location = useLocation();
 
   const locale = locales.find((l) => l.code === currentLocale);
 
-  function setLocale(value: string) {
-    const newLangPathname = withPathPrefix(
-      getPathnameForLocale(withoutPathPrefix(location.pathname), defaultLocale, value, locales),
+  function getLocaleUrl(value: string): string {
+    let newLangPathname = getPathnameForLocale(
+      withoutPathPrefix(location.pathname),
+      defaultLocale,
+      value,
+      locales,
     );
 
-    const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
+    if (location.search) {
+      newLangPathname += location.search;
+    }
+
+    return addLeadingSlash(newLangPathname);
+  }
+
+  function setLocale(value: string): void {
+    const newUrlWithLanguage = withPathPrefix(getLocaleUrl(value));
     loadAndNavigate({ navigate, to: newUrlWithLanguage });
   }
 
   return {
     currentLocale: locale,
     locales,
+    getLocaleUrl,
     setLocale,
   };
 }

package/src/markdoc/components/CodeWalkthrough/CodeStep.tsx

@@ -8,6 +8,7 @@ import React, {
   useCallback,
 } from 'react';
 import styled from 'styled-components';
+import { useLocation } from 'react-router-dom';
 
 import type { WithConditions } from '@redocly/config';
 
@@ -29,6 +30,7 @@ export function CodeStep({
   unless,
   children,
 }: PropsWithChildren<CodeStepProps>) {
+  const location = useLocation();
   const compRef = useRef<HTMLDivElement | null>(null);
   const markerRef = useRef<HTMLDivElement | null>(null);
 
@@ -79,16 +81,13 @@ export function CodeStep({
   );
 
   useEffect(() => {
-    // If the step is active during first render, scroll to it
-    // This is to ensure that the step is visible when the page is loaded
-    if (isActive) {
-      // Ensure scrollMarginTop calculated before step being scrolled.
-      setTimeout(handleActivateStep, 5);
-    }
-
+    // If the step is active during navigation or first render, scroll to it
+    if (!isActive) return;
+    const timer = setTimeout(handleActivateStep, 5);
+    return () => clearTimeout(timer);
     // Ignore dependency array because we only need to run this once
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [location.pathname]);
 
   useEffect(() => {
     const currentCompRef = compRef.current;