@redocly/theme 0.69.0-next.8 → 0.69.0

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

@@ -16,9 +16,6 @@ function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
     const location = (0, react_router_1.useLocation)();
     const navigate = (0, react_router_1.useNavigate)();
     const searchParams = (0, react_1.useMemo)(() => new URLSearchParams(location.search), [location.search]);
-    const filtersRef = (0, react_1.useRef)(filters);
-    const inputsRef = (0, react_1.useRef)(inputs);
-    const togglesRef = (0, react_1.useRef)(toggles);
     const getInitialState = () => {
         var _a, _b;
         var _c, _d;
@@ -36,18 +33,10 @@ function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
         return state;
     };
     const [controlsState, setControlsState] = (0, react_1.useState)(getInitialState);
-    (0, react_1.useEffect)(() => {
-        const sameProps = [
-            JSON.stringify(filters) === JSON.stringify(filtersRef.current),
-            JSON.stringify(inputs) === JSON.stringify(inputsRef.current),
-            JSON.stringify(toggles) === JSON.stringify(togglesRef.current),
-        ];
-        if (sameProps.every(Boolean)) {
-            return;
-        }
-        filtersRef.current = filters;
-        inputsRef.current = inputs;
-        togglesRef.current = toggles;
+    const controlsKey = JSON.stringify([filters, inputs, toggles]);
+    const [prevControlsKey, setPrevControlsKey] = (0, react_1.useState)(controlsKey);
+    if (prevControlsKey !== controlsKey) {
+        setPrevControlsKey(controlsKey);
         const newState = getInitialState();
         // Preserve existing values where control type hasn't changed
         Object.entries(newState).forEach(([id, control]) => {
@@ -58,8 +47,7 @@ function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
             }
         });
         setControlsState(newState);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filters, inputs, toggles, enableDeepLink]);
+    }
     const changeControlState = (id, value) => {
         setControlsState((prev) => {
             const control = prev[id];

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

@@ -58,6 +58,7 @@ function useCodeWalkthroughSteps({ steps, enableDeepLink, root, }) {
                 startOffset: markersMinTopOffset < endOffset ? startOffset : 0,
             });
         }
+        // oxlint-disable-next-line react-you-might-not-need-an-effect/no-chain-state-updates -- marker geometry is derived from post-layout measurements (offsetTop, clientHeight, window.innerHeight)
         setMarkers(markers.reduce((acc, marker, index) => {
             var _a;
             const step = visibleSteps[index];
@@ -171,6 +172,7 @@ function useCodeWalkthroughSteps({ steps, enableDeepLink, root, }) {
         }
         const rootTopOffset = (_c = (_a = root.current) === null || _a === void 0 ? void 0 : _a.offsetTop) !== null && _c !== void 0 ? _c : 0;
         if (!activeStep && rootTopOffset <= options.navbarHeight) {
+            // oxlint-disable-next-line react-you-might-not-need-an-effect/no-derived-state -- seeded from root.current.offsetTop, a post-layout measurement
             setActiveStep(((_b = visibleSteps[0]) === null || _b === void 0 ? void 0 : _b.id) || null);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/lib/core/hooks/menu/use-menu-item-expanded.js

@@ -11,6 +11,7 @@ function useMenuItemExpanded(item) {
     // it's important for transitions
     const [controlledValue, setControlledValue] = (0, react_1.useState)(isItemExpanded(item));
     (0, react_1.useEffect)(() => {
+        // oxlint-disable-next-line react-you-might-not-need-an-effect/no-derived-state -- deferred a commit on purpose so CSS transitions still run
         setIsExpanded(controlledValue);
     }, [controlledValue]);
     (0, react_1.useEffect)(() => {

package/lib/core/hooks/use-active-heading.js

@@ -205,19 +205,23 @@ function useActiveHeading(contentElement, displayedHeadings) {
             return;
         }
         const headers = findHeaders(contentElement);
+        // oxlint-disable-next-line react-you-might-not-need-an-effect/no-chain-state-updates -- headings and the initial active heading come from DOM queries and scroll measurement, available only after layout
         setHeadingElements(headers);
         if (headers.length > 0 && !heading) {
             if (isTopOfPage()) {
+                // oxlint-disable-next-line react-you-might-not-need-an-effect/no-chain-state-updates -- see above
                 setHeading(headers[0].id);
             }
             else {
                 const totalHeight = scrollY + window.innerHeight;
                 if (totalHeight >= document.body.scrollHeight - 10) {
+                    // oxlint-disable-next-line react-you-might-not-need-an-effect/no-chain-state-updates -- see above
                     setHeading(((_a = headers[headers.length - 1]) === null || _a === void 0 ? void 0 : _a.id) || undefined);
                 }
                 else {
                     const triggerOffset = getTriggerOffset();
                     const activeHeader = findActiveHeaderByVirtualPosition(headers, scrollY, triggerOffset);
+                    // oxlint-disable-next-line react-you-might-not-need-an-effect/no-chain-state-updates -- see above
                     setHeading(activeHeader.id);
                 }
             }

package/lib/core/hooks/use-connect-mcp-button.js

@@ -11,15 +11,20 @@ const use_mcp_config_1 = require("./use-mcp-config");
 const clipboard_service_1 = require("../utils/clipboard-service");
 const mcp_1 = require("../constants/mcp");
 const mcp_2 = require("../utils/mcp");
+const get_base_data_attributes_1 = require("../utils/telemetry/get-base-data-attributes");
 const COPIED_RESET_TIMEOUT = 1000;
 function useConnectMCPButton({ options = mcp_1.DEFAULT_MCP_OPTIONS, } = {}) {
-    const { useTranslate } = (0, use_theme_hooks_1.useThemeHooks)();
+    const { useTranslate, useTelemetry } = (0, use_theme_hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
+    const telemetry = useTelemetry();
     const { serverName, serverUrl, cursorUrl, vscodeUrl } = (0, use_mcp_config_1.useMCPConfig)();
     const [copiedOption, setCopiedOption] = (0, react_1.useState)(null);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const resetCopied = (0, react_1.useCallback)((0, lodash_debounce_1.default)(() => setCopiedOption(null), COPIED_RESET_TIMEOUT), []);
     const handleAction = (0, react_1.useCallback)((action) => {
+        telemetry.sendConnectMcpClickedMessage([
+            Object.assign(Object.assign({}, (0, get_base_data_attributes_1.getBaseDataAttributes)('connectMcp', 'button')), { option: action }),
+        ]);
         const connection = { serverName, url: serverUrl };
         const copyTextMap = {
             copy: JSON.stringify({ [serverName]: { url: serverUrl, description: 'MCP Server' } }, null, 2),
@@ -38,7 +43,7 @@ function useConnectMCPButton({ options = mcp_1.DEFAULT_MCP_OPTIONS, } = {}) {
             vscode: vscodeUrl,
         };
         window.open(urlMap[action], '_blank');
-    }, [cursorUrl, vscodeUrl, serverUrl, serverName, resetCopied]);
+    }, [cursorUrl, vscodeUrl, serverUrl, serverName, resetCopied, telemetry]);
     const triggerButtonText = (0, react_1.useMemo)(() => translate('page.actions.connectMcp', 'Connect MCP'), [translate]);
     const visibleOptions = (0, react_1.useMemo)(() => options.filter(Boolean), [options]);
     return {

package/lib/core/hooks/use-local-state.js

@@ -22,6 +22,7 @@ function useLocalState(key, initialValue) {
     (0, react_1.useEffect)(() => {
         if (!(0, js_utils_1.isBrowser)())
             return;
+        // oxlint-disable-next-line react-you-might-not-need-an-effect/no-derived-state -- localStorage is read after mount so SSR and client hydrate from the same value
         setValue(getStoredValue(key, initialValue));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [key]);

package/lib/core/hooks/use-mobile-menu.js

@@ -7,9 +7,17 @@ const use_modal_scroll_lock_1 = require("./use-modal-scroll-lock");
 function useMobileMenu(initialState = false) {
     const location = (0, react_router_1.useLocation)();
     const [isOpen, setIsOpen] = (0, react_1.useState)(initialState);
-    (0, react_1.useEffect)(() => setIsOpen(false), [location.pathname, location.hash]);
+    const locationKey = `${location.pathname}${location.hash}`;
+    const [prevLocationKey, setPrevLocationKey] = (0, react_1.useState)(locationKey);
+    if (isOpen && prevLocationKey !== locationKey) {
+        setPrevLocationKey(locationKey);
+        setIsOpen(false);
+    }
     (0, use_modal_scroll_lock_1.useModalScrollLock)(isOpen);
-    const openMobileMenu = () => setIsOpen(true);
+    const openMobileMenu = () => {
+        setPrevLocationKey(locationKey);
+        setIsOpen(true);
+    };
     const closeMobileMenu = () => setIsOpen(false);
     return { isOpen, openMobileMenu, closeMobileMenu };
 }

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

@@ -33,7 +33,7 @@ function useProductPicker() {
             Array.from(root.classList)
                 .filter((c) => c.startsWith('product-'))
                 .forEach((c) => root.classList.remove(c));
-            root.classList.add((0, utils_1.getProductClassName)(freshProduct.name));
+            root.classList.add((0, utils_2.getSafeClassName)((0, utils_1.getProductClassName)(freshProduct.name)));
         }
         loadAndNavigate({ navigate, to: (0, utils_2.withPathPrefix)(freshProduct.link) });
     }

package/lib/core/hooks/use-tabs.js

@@ -220,12 +220,14 @@ const useActiveTab = ({ initialTab, tabsId }) => {
     const [activeTab, setActiveTab] = (0, react_1.useState)(undefined);
     const resolvedActiveTab = activeTab !== null && activeTab !== void 0 ? activeTab : initialTab;
     const prevActiveTabRef = (0, react_1.useRef)(resolvedActiveTab);
+    const isTabResolvedFromHashRef = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {
-        if (activeTab !== undefined) {
+        if (isTabResolvedFromHashRef.current) {
             return;
         }
+        isTabResolvedFromHashRef.current = true;
         setActiveTab(getInitialTab({ initialTab, hash: location.hash, tabsId }));
-    }, [activeTab, initialTab, location.hash, tabsId]);
+    }, [initialTab, location.hash, tabsId]);
     (0, react_1.useEffect)(() => {
         const hasActiveTabChanged = prevActiveTabRef.current !== resolvedActiveTab;
         if (!tabsId || !hasActiveTabChanged) {

package/lib/core/hooks/use-telemetry-fallback.d.ts

@@ -34,6 +34,8 @@ export declare const useTelemetryFallback: () => {
     sendProductPickerChangedMessage: () => void;
     sendLogoClickedMessage: () => void;
     sendCodeSnippetReportedMessage: () => void;
+    sendConnectMcpClickedMessage: () => void;
+    sendMcpConnectionSnippetCopiedMessage: () => void;
     sendMobileMenuClosedMessage: () => void;
     sendMobileMenuOpenedMessage: () => void;
     sendPageViewedMessage: () => void;

package/lib/core/hooks/use-telemetry-fallback.js

@@ -39,6 +39,8 @@ const useTelemetryFallback = () => ({
     sendProductPickerChangedMessage: () => { },
     sendLogoClickedMessage: () => { },
     sendCodeSnippetReportedMessage: () => { },
+    sendConnectMcpClickedMessage: () => { },
+    sendMcpConnectionSnippetCopiedMessage: () => { },
     sendMobileMenuClosedMessage: () => { },
     sendMobileMenuOpenedMessage: () => { },
     sendPageViewedMessage: () => { },

package/lib/core/styles/global.js

@@ -592,6 +592,7 @@ const links = (0, styled_components_1.css) `
 
   // @tokens End
 `;
+// oxlint-disable-next-line theme/css-variable-pattern -- `--schema-labels--text-color` is a documented public variable
 const apiReferenceDocs = (0, styled_components_1.css) `
   /* === ref docs and graphql docs specific === */
 

package/lib/core/utils/class-names.d.ts

@@ -1 +1,2 @@
+export declare function getSafeClassName(className: string): string;
 export declare function concatClassNames(...args: Array<string | undefined>): string;

package/lib/core/utils/class-names.js

@@ -1,7 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSafeClassName = getSafeClassName;
 exports.concatClassNames = concatClassNames;
 const SPACE_DELIMITER = ' ';
+// EasyList/AdGuard ship generic cosmetic rules that hide these exact class tokens on every
+// site; the trailing underscore keeps the class usable without matching the filter lists.
+const ADBLOCK_HIDDEN_CLASS_NAMES = new Set(['product-ad', 'product-ads', 'product-inlist-ad']);
+function getSafeClassName(className) {
+    return ADBLOCK_HIDDEN_CLASS_NAMES.has(className) ? `${className}_` : className;
+}
 function concatClassNames(...args) {
     return args
         .map((className) => (className ? className.trim() : className))

package/lib/markdoc/components/Accordion/Accordion.js

@@ -32,21 +32,21 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Accordion = Accordion;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const ChevronRightIcon_1 = require("../../../icons/ChevronRightIcon/ChevronRightIcon");
 const constants_1 = require("../../../core/constants");
+const contexts_1 = require("../../../core/contexts");
 function Accordion({ title, expanded = false, className, children, 'data-source': dataSource, 'data-hash': dataHash, }) {
-    return (react_1.default.createElement(AccordionWrapper, { className: className, open: expanded, "data-component-name": constants_1.ACCORDION_COMPONENT_NAME, "data-source": dataSource, "data-hash": dataHash },
+    const groupName = (0, react_1.useContext)(contexts_1.AccordionGroupContext);
+    return (react_1.default.createElement(AccordionWrapper, { className: className, open: expanded, name: groupName !== null && groupName !== void 0 ? groupName : undefined, "data-component-name": constants_1.ACCORDION_COMPONENT_NAME, "data-source": dataSource, "data-hash": dataHash },
         react_1.default.createElement(AccordionSummary, null,
             react_1.default.createElement(ChevronRightIcon_1.ChevronRightIcon, { color: "--md-accordion-chevron-icon-color", size: "var(--md-accordion-chevron-icon-size)" }),
             title),
-        react_1.default.createElement(AccordionBody, null, children)));
+        react_1.default.createElement(AccordionBody, null,
+            react_1.default.createElement(contexts_1.AccordionGroupContext.Provider, { value: null }, children))));
 }
 const AccordionWrapper = styled_components_1.default.details `
   margin: var(--md-accordion-margin);

package/lib/markdoc/components/Accordion/AccordionGroup.d.ts

@@ -1,5 +1,6 @@
 import type { JSX, PropsWithChildren } from 'react';
 export type AccordionGroupProps = {
+    singleExpanded?: boolean;
     className?: string;
 };
-export declare function AccordionGroup({ className, children, }: PropsWithChildren<AccordionGroupProps>): JSX.Element;
+export declare function AccordionGroup({ singleExpanded, className, children, }: PropsWithChildren<AccordionGroupProps>): JSX.Element;

package/lib/markdoc/components/Accordion/AccordionGroup.js

@@ -1,14 +1,50 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AccordionGroup = AccordionGroup;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const constants_1 = require("../../../core/constants");
-function AccordionGroup({ className, children, }) {
-    return (react_1.default.createElement(AccordionGroupWrapper, { className: className, "data-component-name": constants_1.ACCORDION_GROUP_COMPONENT_NAME }, children));
+const contexts_1 = require("../../../core/contexts");
+function AccordionGroup({ singleExpanded = false, className, children, }) {
+    const groupName = (0, react_1.useId)();
+    return (react_1.default.createElement(AccordionGroupWrapper, { className: className, "data-component-name": constants_1.ACCORDION_GROUP_COMPONENT_NAME },
+        react_1.default.createElement(contexts_1.AccordionGroupContext.Provider, { value: singleExpanded ? groupName : null }, children)));
 }
 const AccordionGroupWrapper = styled_components_1.default.div `
   margin: var(--md-accordion-group-margin);

package/lib/markdoc/components/Heading/Heading.js

@@ -45,6 +45,7 @@ const utils_1 = require("../../../core/utils");
 const LinkIcon_1 = require("../../../icons/LinkIcon/LinkIcon");
 const PageActions_1 = require("../../../components/PageActions/PageActions");
 const hooks_1 = require("../../../core/hooks");
+const contexts_1 = require("../../../core/contexts");
 const constants_1 = require("../../../core/constants");
 function renderWithSpanWrapper(children) {
     const childrenArray = react_1.default.Children.toArray(children);
@@ -68,10 +69,12 @@ function renderWithSpanWrapper(children) {
 }
 function Heading({ level, id, children, 'data-source': dataSource, 'data-hash': dataHash, className, __idx, }) {
     var _a, _b;
+    var _c;
     const { pathname } = (0, react_router_1.useLocation)();
     const { usePageProps } = (0, hooks_1.useThemeHooks)();
     const pageProps = usePageProps();
-    const isMarkdownPage = ((_a = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _a === void 0 ? void 0 : _a.type) === 'markdown' || ((_b = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _b === void 0 ? void 0 : _b.type) === 'asciidoc';
+    // The page-type fallback is only for backward compatibility; templates set the scope.
+    const withPageActions = (_c = (0, react_1.useContext)(contexts_1.PageActionsContext)) !== null && _c !== void 0 ? _c : (((_a = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _a === void 0 ? void 0 : _a.type) === 'markdown' || ((_b = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _b === void 0 ? void 0 : _b.type) === 'asciidoc');
     const headingTextId = `${id}-heading-text`;
     const linkEl = (react_1.default.createElement("a", { "aria-labelledby": headingTextId, href: `#${id}`, className: (0, utils_1.concatClassNames)(constants_1.ANCHOR_CLASS, 'before') },
         react_1.default.createElement(LinkIcon_1.LinkIcon, { "aria-hidden": "true", focusable: "false", color: "--heading-anchor-color" })));
@@ -80,7 +83,7 @@ function Heading({ level, id, children, 'data-source': dataSource, 'data-hash':
         react_1.default.createElement(HeadingContentWrapper, null,
             linkEl,
             headingText,
-            isMarkdownPage && __idx === 0 ? react_1.default.createElement(PageActions_1.PageActions, { pageSlug: pathname }) : null)));
+            withPageActions && __idx === 0 ? react_1.default.createElement(PageActions_1.PageActions, { pageSlug: pathname }) : null)));
 }
 const HeadingContentWrapper = styled_components_1.default.div `
   display: flex;

package/lib/markdoc/tags/accordion-group.js

@@ -4,6 +4,9 @@ exports.accordionGroup = void 0;
 exports.accordionGroup = {
     schema: {
         render: 'AccordionGroup',
+        attributes: {
+            singleExpanded: { type: Boolean, default: false },
+        },
     },
     tagName: 'accordion-group',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.69.0-next.8",
+  "version": "0.69.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -42,7 +42,7 @@
   "devDependencies": {
     "@babel/core": "7.29.7",
     "@markdoc/markdoc": "0.5.2",
-    "@redocly/realm-asyncapi-sdk": "0.15.0-next.3",
+    "@redocly/realm-asyncapi-sdk": "0.15.0",
     "@shikijs/types": "3.21.0",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",

package/src/components/Accordion/Accordion.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import type { BaseSyntheticEvent, PropsWithChildren, ReactNode, JSX } from 'react';
@@ -32,6 +32,12 @@ export function Accordion({
 }: PropsWithChildren<AccordionProps>): JSX.Element {
   const [isExpanded, setExpanded] = useState(expanded);
   const [animate, setAnimate] = useState(false);
+  const [prevExpanded, setPrevExpanded] = useState(expanded);
+
+  if (prevExpanded !== expanded) {
+    setPrevExpanded(expanded);
+    setExpanded(expanded);
+  }
 
   const toggle = ({ target }: BaseSyntheticEvent): void => {
     if (target instanceof HTMLAnchorElement || !isExpandable) return;
@@ -40,8 +46,6 @@ export function Accordion({
     onToggle?.(!isExpanded);
   };
 
-  useEffect(() => setExpanded(expanded), [expanded]);
-
   return (
     <AccordionWrapper
       className={className}

package/src/components/Catalog/CatalogEntities.tsx

@@ -88,6 +88,7 @@ export function CatalogEntities(props: CatalogEntitiesProps): JSX.Element {
     (query.isPlaceholderData && entities && entities.length >= LOAD_MORE_THRESHOLD);
 
   useEffect(() => {
+    // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent -- the entities query lives in this ejectable component; the fetched total is mirrored up so the portal page header can show the count
     setEntitiesCounter(total || 0);
   }, [total, setEntitiesCounter]);
 

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations.tsx

@@ -1,4 +1,4 @@
-import React, { JSX, useState, useEffect, useMemo } from 'react';
+import React, { JSX, useState, useMemo } from 'react';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import type { BffCatalogEntity, BffCatalogRelatedEntityList } from '@redocly/theme/core/types';
@@ -35,10 +35,12 @@ export function CatalogEntityRelations({
   const { sortOption, setSortOption, handleSortClick, isColumnSorted } = useCatalogSort();
 
   const [filter, setFilter] = useState<string | undefined>(ENTITY_DEFAULT_FILTERS[entity.type]);
+  const [prevEntityKey, setPrevEntityKey] = useState(entity.key);
 
-  useEffect(() => {
-    setFilter(ENTITY_DEFAULT_FILTERS[entity.key]);
-  }, [entity.key]);
+  if (prevEntityKey !== entity.key) {
+    setPrevEntityKey(entity.key);
+    setFilter(ENTITY_DEFAULT_FILTERS[entity.type]);
+  }
 
   const combinedFilter = useMemo(() => {
     const baseFilter = filter ?? ENTITY_DEFAULT_FILTERS[entity.type];

package/src/components/Catalog/CatalogViewModeToggle.tsx

@@ -1,31 +1,16 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import { TableIcon } from '@redocly/theme/icons/TableIcon/TableIcon';
 import { CardsIcon } from '@redocly/theme/icons/CardsIcon/CardsIcon';
 import { CatalogViewMode } from '@redocly/theme/core/types';
 
-function useViewMode(initialViewMode: CatalogViewMode) {
-  const [viewMode, setViewMode] = useState<CatalogViewMode | null>(null);
-
-  useEffect(() => {
-    setViewMode(initialViewMode);
-  }, [initialViewMode]);
-
-  return viewMode;
-}
-
 export type CatalogViewModeToggleProps = {
   viewMode: CatalogViewMode;
   onViewModeChange: (mode: CatalogViewMode) => void;
 };
 
-export function CatalogViewModeToggle({
-  viewMode: initialViewMode,
-  onViewModeChange,
-}: CatalogViewModeToggleProps) {
-  const viewMode = useViewMode(initialViewMode);
-
+export function CatalogViewModeToggle({ viewMode, onViewModeChange }: CatalogViewModeToggleProps) {
   return (
     <ViewModeToggleWrapper data-component-name="Catalog/CatalogViewModeToggle">
       <ViewModeButton

package/src/components/Filter/FilterInput.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
@@ -16,10 +16,12 @@ export function FilterInput(props: FilterInputProps): JSX.Element {
   const { value: initialValue, onChange, dataTestId } = props;
 
   const [value, setValue] = useState(initialValue);
+  const [prevInitialValue, setPrevInitialValue] = useState(initialValue);
 
-  useEffect(() => {
+  if (prevInitialValue !== initialValue) {
+    setPrevInitialValue(initialValue);
     setValue(initialValue);
-  }, [initialValue]);
+  }
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;

package/src/components/JsonViewer/Helpers.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
@@ -23,14 +23,16 @@ export function JsonValue(props: {
     expandAllSignal ?? level < defaultExpandLevel,
   );
   const isExpanded = expandAllSignal !== undefined && level > 0 ? expandAllSignal : isExpandedState;
-  useEffect(() => {
-    if (expandAllSignal !== undefined) {
-      if (expandAllSignal === false && level === 0) {
-        return;
-      }
+  const [prevExpandAllSignal, setPrevExpandAllSignal] = React.useState(expandAllSignal);
+  const [prevLevel, setPrevLevel] = React.useState(level);
+
+  if (prevExpandAllSignal !== expandAllSignal || prevLevel !== level) {
+    setPrevExpandAllSignal(expandAllSignal);
+    setPrevLevel(level);
+    if (expandAllSignal !== undefined && !(expandAllSignal === false && level === 0)) {
       setExpanded(expandAllSignal);
     }
-  }, [expandAllSignal, level]);
+  }
 
   const keys: string[] =
     (value && Object.keys(value).filter((key) => value[key] !== undefined)) || []; // filter out undefined properties
@@ -131,12 +133,14 @@ function JsonKeyValue(props: {
     expandAllSignal ?? level < defaultExpandLevel,
   );
   const isExpanded = expandAllSignal !== undefined ? expandAllSignal : isExpandedState;
+  const [prevExpandAllSignal, setPrevExpandAllSignal] = React.useState(expandAllSignal);
 
-  useEffect(() => {
+  if (prevExpandAllSignal !== expandAllSignal) {
+    setPrevExpandAllSignal(expandAllSignal);
     if (expandAllSignal !== undefined) {
       setExpanded(expandAllSignal);
     }
-  }, [expandAllSignal]);
+  }
 
   const openingPunctuation = Array.isArray(value) ? '[' : '{';
   const closingPunctuation = Array.isArray(value) ? ']' : '}';