@redocly/theme 0.69.0-next.7 → 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/Admonition/Admonition.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { JSX } from 'react';
 type AdmonitionTypeProps = {
-    type: 'warning' | 'success' | 'danger' | 'info' | 'default';
+    type: 'warning' | 'success' | 'danger' | 'info' | 'idea';
 };
 export type AdmonitionProps = Partial<AdmonitionTypeProps> & {
     name?: string;

package/lib/components/Admonition/Admonition.js

@@ -49,7 +49,7 @@ const IconsMap = {
     success: CheckmarkOutlineIcon_1.CheckmarkOutlineIcon,
     danger: ErrorIcon_1.ErrorIcon,
     info: InformationIcon_1.InformationIcon,
-    default: IdeaIcon_1.IdeaIcon,
+    idea: IdeaIcon_1.IdeaIcon,
 };
 function Admonition({ type = 'info', name, children, className, 'data-source': dataSource, 'data-hash': dataHash, }) {
     const Icon = IconsMap[type] || IconsMap['info'];

package/lib/components/Admonition/variables.dark.js

@@ -15,7 +15,7 @@ exports.admonitionDarkMode = (0, styled_components_1.css) `
   --admonition-success-bg-color: color-mix(in srgb, var(--color-green-1) 40%, transparent); // @presenter Color
   --admonition-success-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-green-3) 40%, transparent); // @presenter Border
 
-  --admonition-default-bg-color: color-mix(in srgb, var(--color-primary-bg, var(--admonition-default-bg-color-legacy)) 40%, transparent); // @presenter Color
-  --admonition-default-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-primary-border, var(--admonition-default-border-color-legacy)) 40%, transparent); // @presenter Border
+  --admonition-idea-bg-color: color-mix(in srgb, var(--color-primary-bg, var(--admonition-default-bg-color-legacy)) 40%, transparent); // @presenter Color
+  --admonition-idea-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-primary-border, var(--admonition-default-border-color-legacy)) 40%, transparent); // @presenter Border
 `;
 //# sourceMappingURL=variables.dark.js.map

package/lib/components/Admonition/variables.js

@@ -92,17 +92,17 @@ exports.admonition = (0, styled_components_1.css) `
   --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border
 
   /**
-  * @tokens Admonition type primary
+  * @tokens Admonition type idea
   */
 
-  --admonition-default-bg-color: var(--color-primary-bg, var(--admonition-default-bg-color-legacy)); // @presenter Color
-  --admonition-default-text-color: var(--admonition-heading-text-color); // @presenter Color
-  --admonition-default-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
-  --admonition-default-icon-color: var(--color-primary-base, var(--admonition-default-icon-color-legacy)); // @presenter Color
-  --admonition-default-border-color: var(--color-primary-border, var(--admonition-default-border-color-legacy)); // @presenter Color
-  --admonition-default-border-style: var(--admonition-border-style); // @presenter Color
-  --admonition-default-border-width: var(--admonition-border-width); // @presenter Color
-  --admonition-default-border: var(--admonition-default-border-width) var(--admonition-default-border-style) var(--admonition-default-border-color); // @presenter Border
+  --admonition-idea-bg-color: var(--color-primary-bg, var(--admonition-default-bg-color-legacy)); // @presenter Color
+  --admonition-idea-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-idea-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-idea-icon-color: var(--color-primary-base, var(--admonition-default-icon-color-legacy)); // @presenter Color
+  --admonition-idea-border-color: var(--color-primary-border, var(--admonition-default-border-color-legacy)); // @presenter Color
+  --admonition-idea-border-style: var(--admonition-border-style); // @presenter Color
+  --admonition-idea-border-width: var(--admonition-border-width); // @presenter Color
+  --admonition-idea-border: var(--admonition-idea-border-width) var(--admonition-idea-border-style) var(--admonition-idea-border-color); // @presenter Border
   
   // @tokens End
 `;

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 };
 }