@redocly/theme 0.69.0-next.8 → 0.69.0-next.9

package/lib/components/Accordion/Accordion.js

@@ -47,6 +47,11 @@ const ChevronRightIcon_1 = require("../../icons/ChevronRightIcon/ChevronRightIco
 function Accordion({ expanded = true, isExpandable = true, renderChildrenHidden = false, header, className, children, onToggle, dataTestId, }) {
     const [isExpanded, setExpanded] = (0, react_1.useState)(expanded);
     const [animate, setAnimate] = (0, react_1.useState)(false);
+    const [prevExpanded, setPrevExpanded] = (0, react_1.useState)(expanded);
+    if (prevExpanded !== expanded) {
+        setPrevExpanded(expanded);
+        setExpanded(expanded);
+    }
     const toggle = ({ target }) => {
         if (target instanceof HTMLAnchorElement || !isExpandable)
             return;
@@ -54,7 +59,6 @@ function Accordion({ expanded = true, isExpandable = true, renderChildrenHidden
         setExpanded(!isExpanded);
         onToggle === null || onToggle === void 0 ? void 0 : onToggle(!isExpanded);
     };
-    (0, react_1.useEffect)(() => setExpanded(expanded), [expanded]);
     return (react_1.default.createElement(AccordionWrapper, { className: className, "data-testid": dataTestId, "data-component-name": "Accordion/Accordion" },
         header &&
             (typeof header === 'function' ? (header({ expanded: isExpanded })) : (react_1.default.createElement(AccordionHeader_1.AccordionHeader, { "data-testid": "accordion-header", onClick: toggle, expanded: isExpanded, isExpandable: isExpandable },

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations.js

@@ -48,9 +48,11 @@ function CatalogEntityRelations({ entity, entitiesCatalogConfig, initialRelation
     const { useCatalogSort, useFetchCatalogEntitiesRelations } = (0, hooks_1.useThemeHooks)();
     const { sortOption, setSortOption, handleSortClick, isColumnSorted } = useCatalogSort();
     const [filter, setFilter] = (0, react_1.useState)(ENTITY_DEFAULT_FILTERS[entity.type]);
-    (0, react_1.useEffect)(() => {
-        setFilter(ENTITY_DEFAULT_FILTERS[entity.key]);
-    }, [entity.key]);
+    const [prevEntityKey, setPrevEntityKey] = (0, react_1.useState)(entity.key);
+    if (prevEntityKey !== entity.key) {
+        setPrevEntityKey(entity.key);
+        setFilter(ENTITY_DEFAULT_FILTERS[entity.type]);
+    }
     const combinedFilter = (0, react_1.useMemo)(() => {
         const baseFilter = filter !== null && filter !== void 0 ? filter : ENTITY_DEFAULT_FILTERS[entity.type];
         if (entity.version && entity.revision) {

package/lib/components/Catalog/CatalogViewModeToggle.d.ts

@@ -4,4 +4,4 @@ export type CatalogViewModeToggleProps = {
     viewMode: CatalogViewMode;
     onViewModeChange: (mode: CatalogViewMode) => void;
 };
-export declare function CatalogViewModeToggle({ viewMode: initialViewMode, onViewModeChange, }: CatalogViewModeToggleProps): React.JSX.Element;
+export declare function CatalogViewModeToggle({ viewMode, onViewModeChange }: CatalogViewModeToggleProps): React.JSX.Element;

package/lib/components/Catalog/CatalogViewModeToggle.js

@@ -1,55 +1,14 @@
 "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.CatalogViewModeToggle = CatalogViewModeToggle;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const TableIcon_1 = require("../../icons/TableIcon/TableIcon");
 const CardsIcon_1 = require("../../icons/CardsIcon/CardsIcon");
-function useViewMode(initialViewMode) {
-    const [viewMode, setViewMode] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        setViewMode(initialViewMode);
-    }, [initialViewMode]);
-    return viewMode;
-}
-function CatalogViewModeToggle({ viewMode: initialViewMode, onViewModeChange, }) {
-    const viewMode = useViewMode(initialViewMode);
+function CatalogViewModeToggle({ viewMode, onViewModeChange }) {
     return (react_1.default.createElement(ViewModeToggleWrapper, { "data-component-name": "Catalog/CatalogViewModeToggle" },
         react_1.default.createElement(ViewModeButton, { className: viewMode === 'table' ? 'active' : '', onClick: () => onViewModeChange('table') },
             react_1.default.createElement(TableIcon_1.TableIcon, { size: "var(--catalog-view-mode-table-icon-size)" })),

package/lib/components/Filter/FilterInput.js

@@ -44,9 +44,11 @@ const SearchIcon_1 = require("../../icons/SearchIcon/SearchIcon");
 function FilterInput(props) {
     const { value: initialValue, onChange, dataTestId } = props;
     const [value, setValue] = (0, react_1.useState)(initialValue);
-    (0, react_1.useEffect)(() => {
+    const [prevInitialValue, setPrevInitialValue] = (0, react_1.useState)(initialValue);
+    if (prevInitialValue !== initialValue) {
+        setPrevInitialValue(initialValue);
         setValue(initialValue);
-    }, [initialValue]);
+    }
     const handleChange = (e) => {
         const newValue = e.target.value;
         setValue(newValue);

package/lib/components/JsonViewer/Helpers.js

@@ -1,43 +1,10 @@
 "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.JsonValue = JsonValue;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../../components/Button/Button");
 const ShowMoreToggleButton_1 = require("../../components/Button/ShowMoreToggleButton");
@@ -47,14 +14,15 @@ function JsonValue(props) {
     const indent = ' '.repeat(level * 2);
     const [isExpandedState, setExpanded] = react_1.default.useState(expandAllSignal !== null && expandAllSignal !== void 0 ? expandAllSignal : level < defaultExpandLevel);
     const isExpanded = expandAllSignal !== undefined && level > 0 ? expandAllSignal : isExpandedState;
-    (0, react_1.useEffect)(() => {
-        if (expandAllSignal !== undefined) {
-            if (expandAllSignal === false && level === 0) {
-                return;
-            }
+    const [prevExpandAllSignal, setPrevExpandAllSignal] = react_1.default.useState(expandAllSignal);
+    const [prevLevel, setPrevLevel] = react_1.default.useState(level);
+    if (prevExpandAllSignal !== expandAllSignal || prevLevel !== level) {
+        setPrevExpandAllSignal(expandAllSignal);
+        setPrevLevel(level);
+        if (expandAllSignal !== undefined && !(expandAllSignal === false && level === 0)) {
             setExpanded(expandAllSignal);
         }
-    }, [expandAllSignal, level]);
+    }
     const keys = (value && Object.keys(value).filter((key) => value[key] !== undefined)) || []; // filter out undefined properties
     const valueType = typeof value;
     const isPrimitive = (valueType !== 'object' && value !== null) || keys.length === 0;
@@ -94,11 +62,13 @@ function JsonKeyValue(props) {
     const isCollapsible = typeof value === 'object' && value !== null && keys.length > 0;
     const [isExpandedState, setExpanded] = react_1.default.useState(expandAllSignal !== null && expandAllSignal !== void 0 ? expandAllSignal : level < defaultExpandLevel);
     const isExpanded = expandAllSignal !== undefined ? expandAllSignal : isExpandedState;
-    (0, react_1.useEffect)(() => {
+    const [prevExpandAllSignal, setPrevExpandAllSignal] = react_1.default.useState(expandAllSignal);
+    if (prevExpandAllSignal !== expandAllSignal) {
+        setPrevExpandAllSignal(expandAllSignal);
         if (expandAllSignal !== undefined) {
             setExpanded(expandAllSignal);
         }
-    }, [expandAllSignal]);
+    }
     const openingPunctuation = Array.isArray(value) ? '[' : '{';
     const closingPunctuation = Array.isArray(value) ? ']' : '}';
     const valueElement = isCollapsible ? (react_1.default.createElement(react_1.default.Fragment, null,

package/lib/components/Panel/Panel.js

@@ -47,6 +47,11 @@ const ChevronRightIcon_1 = require("../../icons/ChevronRightIcon/ChevronRightIco
 function Panel({ expanded = true, isExpandable = true, renderChildrenHidden = false, header, footer, className = 'panel-default', children, onToggle, description, }) {
     const [isExpanded, setExpanded] = (0, react_1.useState)(expanded);
     const [animate, setAnimate] = (0, react_1.useState)(false);
+    const [prevExpanded, setPrevExpanded] = (0, react_1.useState)(expanded);
+    if (prevExpanded !== expanded) {
+        setPrevExpanded(expanded);
+        setExpanded(expanded);
+    }
     const toggle = ({ target }) => {
         if (target instanceof HTMLAnchorElement || !isExpandable)
             return;
@@ -54,7 +59,6 @@ function Panel({ expanded = true, isExpandable = true, renderChildrenHidden = fa
         setExpanded(!isExpanded);
         onToggle === null || onToggle === void 0 ? void 0 : onToggle(!isExpanded);
     };
-    (0, react_1.useEffect)(() => setExpanded(expanded), [expanded]);
     return (react_1.default.createElement(PanelWrapper, { className: className, "data-testid": typeof header === 'string' ? ('panel-' + header).replace(/ /g, '-').toLowerCase() : null, "data-component-name": "Panel/Panel" },
         header &&
             (typeof header === 'function' ? (header({ expanded: isExpanded, toggle })) : (react_1.default.createElement(PanelHeader_1.PanelHeader, { "data-testid": "panel-header", toggle: toggle, expanded: isExpanded, isExpandable: isExpandable },

package/lib/components/Search/FilterFields/SearchFilterFieldSelect.js

@@ -47,13 +47,7 @@ function SearchFilterFieldSelect({ facet, filter, query, selectedValues, onChang
     const { useFacetQuery, useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const { searchFacet, setSearchFacet, setSearchFacetQuery } = useFacetQuery(facet.field);
-    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-    const [selectOptions, setSelectOptions] = (0, react_1.useState)([]);
     const isMultiple = facet.type === 'multi-select';
-    (0, react_1.useEffect)(() => {
-        setSelectOptions(getSelectOptions());
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [searchFacet, facet]);
     const onSearch = (value) => {
         if (value === null) {
             setSearchFacet(null);
@@ -67,38 +61,34 @@ function SearchFilterFieldSelect({ facet, filter, query, selectedValues, onChang
             });
         }
     };
-    const getSelectOptions = () => {
-        return searchFacet
-            ? searchFacet.values.map(facetValueToSelectOption)
-            : facet.values.map(facetValueToSelectOption);
-    };
-    const facetValueToSelectOption = (facetValue) => {
-        if (!facetValue) {
-            return { element: null, value: '' };
-        }
-        if (typeof facetValue === 'string') {
-            return {
-                element: (react_1.default.createElement(FilterSelectOptionWrapper, null,
-                    react_1.default.createElement(FilterSelectOptionText, null, facetValue))),
-                value: facetValue,
-            };
-        }
-        else {
-            const { value, count, isCounterVisible } = facetValue;
-            return {
-                element: (react_1.default.createElement(FilterSelectOptionWrapper, null,
-                    react_1.default.createElement(FilterSelectOptionText, null, value),
-                    isCounterVisible && react_1.default.createElement(CounterTag_1.CounterTag, null, count))),
-                value: value,
-            };
-        }
-    };
+    const selectOptions = (0, react_1.useMemo)(() => (searchFacet ? searchFacet.values : facet.values).map(facetValueToSelectOption), [searchFacet, facet]);
     return (react_1.default.createElement(Select_1.Select, { value: selectedValues.length
             ? isMultiple
                 ? selectedValues.map((value) => facetValueToSelectOption(value))
                 : facetValueToSelectOption(selectedValues[0])
             : undefined, options: selectOptions, onChange: onChange, placeholder: `${translate('search.filter.field.placeholder', 'Search')} ${facet.name.toLowerCase()}...`, alignment: "start", multiple: isMultiple, searchable: true, footer: selectOptions.length === MAX_SELECT_OPTIONS ? (react_1.default.createElement(FilterSelectFooter, null, translate('search.filter.field.footer', 'Search to show more items...'))) : null, onSearch: onSearch, checkmarkIconPosition: "start" }));
 }
+function facetValueToSelectOption(facetValue) {
+    if (!facetValue) {
+        return { element: null, value: '' };
+    }
+    if (typeof facetValue === 'string') {
+        return {
+            element: (react_1.default.createElement(FilterSelectOptionWrapper, null,
+                react_1.default.createElement(FilterSelectOptionText, null, facetValue))),
+            value: facetValue,
+        };
+    }
+    else {
+        const { value, count, isCounterVisible } = facetValue;
+        return {
+            element: (react_1.default.createElement(FilterSelectOptionWrapper, null,
+                react_1.default.createElement(FilterSelectOptionText, null, value),
+                isCounterVisible && react_1.default.createElement(CounterTag_1.CounterTag, null, count))),
+            value: value,
+        };
+    }
+}
 const FilterSelectOptionWrapper = styled_components_1.default.div `
   width: 100%;
   display: flex;

package/lib/components/Search/SearchItem.js

@@ -48,7 +48,7 @@ const utils_1 = require("../../core/utils");
 const ReturnKeyIcon_1 = require("../../icons/ReturnKeyIcon/ReturnKeyIcon");
 const hooks_1 = require("../../core/hooks");
 function SearchItem({ onClick, item, className, product, innerRef, }) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const ref = (0, react_1.useRef)(null);
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
@@ -95,11 +95,13 @@ function SearchItem({ onClick, item, className, product, innerRef, }) {
                 react_1.default.createElement("div", null,
                     (0, SearchHighlight_1.searchHighlight)(parameter.place),
                     ` → `,
-                    ((_b = parameter.path) === null || _b === void 0 ? void 0 : _b.length) ? (0, SearchHighlight_1.searchHighlight)((_c = parameter.path) === null || _c === void 0 ? void 0 : _c.join(' → ')) + ' → ' : '',
+                    ((_b = parameter.path) === null || _b === void 0 ? void 0 : _b.length) ? (react_1.default.createElement(react_1.default.Fragment, null,
+                        (0, SearchHighlight_1.searchHighlight)(parameter.path.join(' → ')),
+                        ` → `)) : null,
                     (0, SearchHighlight_1.searchHighlight)(parameter.name)),
                 react_1.default.createElement("div", null, (0, SearchHighlight_1.searchHighlight)(parameter.description)))) : (shouldShowPath && (react_1.default.createElement(SearchItemPath, null, highlight.path && highlight.path.length
                 ? (0, SearchHighlight_1.searchHighlight)(highlight.path.join(' → '))
-                : (_d = document.path) === null || _d === void 0 ? void 0 : _d.join(' → '))))),
+                : (_c = document.path) === null || _c === void 0 ? void 0 : _c.join(' → '))))),
         react_1.default.createElement(ReturnKeyIcon_1.ReturnKeyIcon, { color: "var(--search-item-text-color)" })));
 }
 const SearchItemWrapper = (0, styled_components_1.default)(Link_1.Link) `

package/lib/components/Search/variables.js

@@ -98,6 +98,7 @@ exports.search = (0, styled_components_1.css) `
   --search-message-line-height: var(--line-height-lg); // @presenter LineHeight
   --search-message-text-color: var(--text-color-secondary); // @presenter Color
   --search-message-gap: var(--spacing-md);
+  --search-message-padding: var(--spacing-md);
 
   --search-header-buttons-gap: var(--spacing-sm);
   --search-header-buttons-padding-left: var(--spacing-sm);

package/lib/components/Select/Select.js

@@ -71,13 +71,18 @@ function Select(props) {
     (0, hooks_1.useOutsideClick)(selectRef, () => {
         setDropdownActive(false);
     });
-    (0, react_1.useEffect)(() => {
+    const [prevOptions, setPrevOptions] = (0, react_1.useState)(options);
+    const [prevValue, setPrevValue] = (0, react_1.useState)(value);
+    const [prevMultiple, setPrevMultiple] = (0, react_1.useState)(multiple);
+    if (prevOptions !== options) {
+        setPrevOptions(options);
         setFilteredOptions(options);
-    }, [options]);
-    (0, react_1.useEffect)(() => {
+    }
+    if (prevValue !== value || prevMultiple !== multiple) {
+        setPrevValue(value);
+        setPrevMultiple(multiple);
         setSelectedOptions(getSelectedOptionsFromPropsValue());
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [multiple, value]);
+    }
     const changeSearchValue = (newSearchValue) => {
         if (newSearchValue === searchValue) {
             return;

package/lib/components/Sidebar/Sidebar.js

@@ -1,54 +1,18 @@
 "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.SidebarHeader = void 0;
 exports.Sidebar = Sidebar;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
 const hooks_1 = require("../../core/hooks");
 const MenuContainer_1 = require("../../components/Menu/MenuContainer");
 function Sidebar({ versions, menu, footer, header, growContent, collapsed, className, menuItemsAnimation, }) {
     const { isOpen } = (0, hooks_1.useMobileMenu)();
-    const [mappedCollapsed, setMappedCollapsed] = react_1.default.useState(collapsed);
-    (0, react_1.useEffect)(() => {
-        setMappedCollapsed(collapsed && !isOpen);
-    }, [isOpen, collapsed, setMappedCollapsed]);
+    const mappedCollapsed = collapsed && !isOpen;
     const { sidebar } = (0, hooks_1.useThemeConfig)();
     if (sidebar === null || sidebar === void 0 ? void 0 : sidebar.hide) {
         return null;

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

@@ -171,6 +171,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-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.69.0-next.8",
+  "version": "0.69.0-next.9",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

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/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) ? ']' : '}';

package/src/components/Panel/Panel.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';
@@ -34,6 +34,12 @@ export function Panel({
 }: PropsWithChildren<PanelProps>): 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;
@@ -42,8 +48,6 @@ export function Panel({
     onToggle?.(!isExpanded);
   };
 
-  useEffect(() => setExpanded(expanded), [expanded]);
-
   return (
     <PanelWrapper
       className={className}

package/src/components/Search/FilterFields/SearchFilterFieldSelect.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
 import type { SearchFacet, SearchFacetCount, SearchFilterItem } from '@redocly/theme/core/types';
@@ -27,15 +27,8 @@ export function SearchFilterFieldSelect({
   const { useFacetQuery, useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const { searchFacet, setSearchFacet, setSearchFacetQuery } = useFacetQuery(facet.field);
-  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-  const [selectOptions, setSelectOptions] = useState<any[]>([]);
   const isMultiple = facet.type === 'multi-select';
 
-  useEffect(() => {
-    setSelectOptions(getSelectOptions());
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchFacet, facet]);
-
   const onSearch = (value: string | null) => {
     if (value === null) {
       setSearchFacet(null);
@@ -49,38 +42,10 @@ export function SearchFilterFieldSelect({
     }
   };
 
-  const getSelectOptions = () => {
-    return searchFacet
-      ? searchFacet.values.map(facetValueToSelectOption)
-      : facet.values.map(facetValueToSelectOption);
-  };
-
-  const facetValueToSelectOption = (facetValue?: SearchFacetCount | string) => {
-    if (!facetValue) {
-      return { element: null, value: '' };
-    }
-    if (typeof facetValue === 'string') {
-      return {
-        element: (
-          <FilterSelectOptionWrapper>
-            <FilterSelectOptionText>{facetValue}</FilterSelectOptionText>
-          </FilterSelectOptionWrapper>
-        ),
-        value: facetValue,
-      };
-    } else {
-      const { value, count, isCounterVisible } = facetValue as SearchFacetCount;
-      return {
-        element: (
-          <FilterSelectOptionWrapper>
-            <FilterSelectOptionText>{value}</FilterSelectOptionText>
-            {isCounterVisible && <CounterTag>{count}</CounterTag>}
-          </FilterSelectOptionWrapper>
-        ),
-        value: value,
-      };
-    }
-  };
+  const selectOptions = useMemo(
+    () => (searchFacet ? searchFacet.values : facet.values).map(facetValueToSelectOption),
+    [searchFacet, facet],
+  );
 
   return (
     <Select
@@ -113,6 +78,33 @@ export function SearchFilterFieldSelect({
   );
 }
 
+function facetValueToSelectOption(facetValue?: SearchFacetCount | string) {
+  if (!facetValue) {
+    return { element: null, value: '' };
+  }
+  if (typeof facetValue === 'string') {
+    return {
+      element: (
+        <FilterSelectOptionWrapper>
+          <FilterSelectOptionText>{facetValue}</FilterSelectOptionText>
+        </FilterSelectOptionWrapper>
+      ),
+      value: facetValue,
+    };
+  } else {
+    const { value, count, isCounterVisible } = facetValue as SearchFacetCount;
+    return {
+      element: (
+        <FilterSelectOptionWrapper>
+          <FilterSelectOptionText>{value}</FilterSelectOptionText>
+          {isCounterVisible && <CounterTag>{count}</CounterTag>}
+        </FilterSelectOptionWrapper>
+      ),
+      value: value,
+    };
+  }
+}
+
 const FilterSelectOptionWrapper = styled.div`
   width: 100%;
   display: flex;

package/src/components/Search/SearchItem.tsx

@@ -114,7 +114,12 @@ export function SearchItem({
             <div>
               {searchHighlight(parameter.place)}
               {` → `}
-              {parameter.path?.length ? searchHighlight(parameter.path?.join(' → ')) + ' → ' : ''}
+              {parameter.path?.length ? (
+                <>
+                  {searchHighlight(parameter.path.join(' → '))}
+                  {` → `}
+                </>
+              ) : null}
               {searchHighlight(parameter.name)}
             </div>
             <div>{searchHighlight(parameter.description)}</div>

package/src/components/Search/variables.ts

@@ -97,6 +97,7 @@ export const search = css`
   --search-message-line-height: var(--line-height-lg); // @presenter LineHeight
   --search-message-text-color: var(--text-color-secondary); // @presenter Color
   --search-message-gap: var(--spacing-md);
+  --search-message-padding: var(--spacing-md);
 
   --search-header-buttons-gap: var(--spacing-sm);
   --search-header-buttons-padding-left: var(--spacing-sm);

package/src/components/Select/Select.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useId, useRef, useState } from 'react';
+import React, { Fragment, useId, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
@@ -68,14 +68,20 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
     setDropdownActive(false);
   });
 
-  useEffect(() => {
+  const [prevOptions, setPrevOptions] = useState(options);
+  const [prevValue, setPrevValue] = useState(value);
+  const [prevMultiple, setPrevMultiple] = useState(multiple);
+
+  if (prevOptions !== options) {
+    setPrevOptions(options);
     setFilteredOptions(options);
-  }, [options]);
+  }
 
-  useEffect(() => {
+  if (prevValue !== value || prevMultiple !== multiple) {
+    setPrevValue(value);
+    setPrevMultiple(multiple);
     setSelectedOptions(getSelectedOptionsFromPropsValue());
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [multiple, value]);
+  }
 
   const changeSearchValue = (newSearchValue: string | null) => {
     if (newSearchValue === searchValue) {

package/src/components/Sidebar/Sidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
@@ -36,11 +36,7 @@ export function Sidebar({
   menuItemsAnimation,
 }: SidebarProps): JSX.Element | null {
   const { isOpen } = useMobileMenu();
-  const [mappedCollapsed, setMappedCollapsed] = React.useState(collapsed);
-
-  useEffect(() => {
-    setMappedCollapsed(collapsed && !isOpen);
-  }, [isOpen, collapsed, setMappedCollapsed]);
+  const mappedCollapsed = collapsed && !isOpen;
 
   const { sidebar } = useThemeConfig();
 

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

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, useRef } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router';
 
 import type {
@@ -50,10 +50,6 @@ export function useCodeWalkthroughControls(
   const navigate = useNavigate();
   const searchParams = useMemo(() => new URLSearchParams(location.search), [location.search]);
 
-  const filtersRef = useRef(filters);
-  const inputsRef = useRef(inputs);
-  const togglesRef = useRef(toggles);
-
   const getInitialState = () => {
     const state: CodeWalkthroughControlsState = {};
 
@@ -90,20 +86,11 @@ export function useCodeWalkthroughControls(
 
   const [controlsState, setControlsState] = useState(getInitialState);
 
-  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;
-    }
+  const controlsKey = JSON.stringify([filters, inputs, toggles]);
+  const [prevControlsKey, setPrevControlsKey] = useState(controlsKey);
 
-    filtersRef.current = filters;
-    inputsRef.current = inputs;
-    togglesRef.current = toggles;
+  if (prevControlsKey !== controlsKey) {
+    setPrevControlsKey(controlsKey);
 
     const newState = getInitialState();
 
@@ -120,8 +107,7 @@ export function useCodeWalkthroughControls(
     });
 
     setControlsState(newState);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filters, inputs, toggles, enableDeepLink]);
+  }
 
   const changeControlState = (id: string, value: string | boolean) => {
     setControlsState((prev) => {

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

@@ -252,6 +252,7 @@ export function useCodeWalkthroughSteps({
 
     const rootTopOffset = root.current?.offsetTop ?? 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(visibleSteps[0]?.id || null);
     }
 

package/src/core/hooks/menu/use-menu-item-expanded.ts

@@ -16,6 +16,7 @@ export function useMenuItemExpanded(item: ItemState): [boolean, Dispatch<SetStat
   const [controlledValue, setControlledValue] = useState(isItemExpanded(item));
 
   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]);
 

package/src/core/hooks/use-local-state.ts

@@ -21,6 +21,7 @@ export function useLocalState<T>(key: string, initialValue: T): [T, (value: T) =
   // then client loads the actual stored value without hydration mismatch
   useEffect(() => {
     if (!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/src/core/hooks/use-mobile-menu.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useLocation } from 'react-router';
 
 import { useModalScrollLock } from './use-modal-scroll-lock';
@@ -6,11 +6,19 @@ import { useModalScrollLock } from './use-modal-scroll-lock';
 export function useMobileMenu(initialState = false) {
   const location = useLocation();
   const [isOpen, setIsOpen] = useState(initialState);
+  const locationKey = `${location.pathname}${location.hash}`;
+  const [prevLocationKey, setPrevLocationKey] = useState(locationKey);
 
-  useEffect(() => setIsOpen(false), [location.pathname, location.hash]);
+  if (isOpen && prevLocationKey !== locationKey) {
+    setPrevLocationKey(locationKey);
+    setIsOpen(false);
+  }
   useModalScrollLock(isOpen);
 
-  const openMobileMenu = () => setIsOpen(true);
+  const openMobileMenu = () => {
+    setPrevLocationKey(locationKey);
+    setIsOpen(true);
+  };
   const closeMobileMenu = () => setIsOpen(false);
 
   return { isOpen, openMobileMenu, closeMobileMenu };