@redocly/theme 0.69.0-next.8 → 0.69.0

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/CatalogEntities.js

@@ -70,6 +70,7 @@ function CatalogEntities(props) {
     const shouldShowLoadMore = query.hasNextPage ||
         (query.isPlaceholderData && entities && entities.length >= LOAD_MORE_THRESHOLD);
     (0, react_1.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]);
     if (!query.isPending && (!entities || entities.length === 0)) {

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/MCP/McpConnectionTabs.js

@@ -62,11 +62,10 @@ const TAB_LABELS = {
     },
     json: { translationKey: 'page.mcpNotAllowed.tabs.json', defaultLabel: 'JSON' },
 };
-// The report control is docs feedback, not useful on the connection page.
-const CODE_BLOCK_HEADER = { controls: { copy: {}, report: { hidden: true } } };
 function McpConnectionTabs({ options = DEFAULT_TAB_OPTIONS, className, }) {
-    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
+    const telemetry = useTelemetry();
     const { serverName, serverUrl, isMcpDisabled } = (0, hooks_1.useMCPConfig)();
     // The SSR markup of error pages is cached with the build-time origin, so the
     // tabs remount after hydration to pick up the real browser origin.
@@ -76,20 +75,31 @@ function McpConnectionTabs({ options = DEFAULT_TAB_OPTIONS, className, }) {
         return null;
     }
     const connection = { serverName, url: serverUrl };
+    const snippetHeader = (client, snippet) => ({
+        controls: {
+            copy: {
+                onClick: () => telemetry.sendMcpConnectionSnippetCopiedMessage([
+                    Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('mcpConnectionSnippet', 'button')), { client, snippet }),
+                ]),
+            },
+            // The report control is docs feedback, not useful on the connection page.
+            report: { hidden: true },
+        },
+    });
     return (react_1.default.createElement(McpConnectionTabsWrapper, { key: hydrated ? 'client' : 'ssr', "data-component-name": "MCP/McpConnectionTabs", "data-testid": "mcp-connection-tabs", className: className },
         react_1.default.createElement(Tabs_1.Tabs, { size: Tabs_1.TabsSize.SMALL }, options.map((option) => {
             const { translationKey, defaultLabel, icon: TabIcon } = TAB_LABELS[option];
-            return (react_1.default.createElement(TabItemFragment_1.TabItemFragment, { key: option, label: translate(translationKey, defaultLabel), icon: TabIcon ? react_1.default.createElement(TabIcon, null) : undefined }, renderTabContent(option, connection, translate)));
+            return (react_1.default.createElement(TabItemFragment_1.TabItemFragment, { key: option, label: translate(translationKey, defaultLabel), icon: TabIcon ? react_1.default.createElement(TabIcon, null) : undefined }, renderTabContent(option, connection, translate, snippetHeader)));
         }))));
 }
-function renderTabContent(option, connection, translate) {
+function renderTabContent(option, connection, translate, snippetHeader) {
     const terminalHint = (react_1.default.createElement(TabHint, null, translate('page.mcpNotAllowed.snippets.terminal.hint', 'Run this command in your terminal:')));
-    const urlBlock = react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "text", source: connection.url, header: CODE_BLOCK_HEADER });
+    const urlBlock = (react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "text", source: connection.url, header: snippetHeader(option, 'chatgpt-app') }));
     const assistantPromptClient = {
         headline: translate('page.mcpNotAllowed.snippets.prompt.headline', 'Prompt'),
         content: (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(TabHint, null, translate('page.mcpNotAllowed.snippets.prompt.hint', 'Or paste this prompt into the chat to have it add the server for you:')),
-            react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "text", source: (0, utils_1.generateMcpInstallPrompt)(connection), header: CODE_BLOCK_HEADER, wrapContents: true }))),
+            react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "text", source: (0, utils_1.generateMcpInstallPrompt)(connection), header: snippetHeader(option, 'prompt'), wrapContents: true }))),
     };
     switch (option) {
         case 'claude':
@@ -98,13 +108,13 @@ function renderTabContent(option, connection, translate) {
                     headline: translate('page.mcpNotAllowed.snippets.claudeCode.headline', 'Claude Code'),
                     content: (react_1.default.createElement(react_1.default.Fragment, null,
                         terminalHint,
-                        react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "shell", source: (0, utils_1.generateClaudeCodeCommand)(connection), header: CODE_BLOCK_HEADER, wrapContents: true }))),
+                        react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "shell", source: (0, utils_1.generateClaudeCodeCommand)(connection), header: snippetHeader(option, 'claude-code'), wrapContents: true }))),
                 },
                 {
                     headline: translate('page.mcpNotAllowed.snippets.claudeDesktop.headline', 'Claude Desktop'),
                     content: (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(TabHint, null, translate('page.mcpNotAllowed.snippets.claudeDesktop.instruction', 'In Claude Desktop, open Settings → Developer → Edit Config, add this to the configuration file, and restart Claude Desktop:')),
-                        react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "json", source: (0, utils_1.generateClaudeDesktopConfig)(connection), header: CODE_BLOCK_HEADER }))),
+                        react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "json", source: (0, utils_1.generateClaudeDesktopConfig)(connection), header: snippetHeader(option, 'claude-desktop') }))),
                 },
             ]);
         case 'chatgpt':
@@ -113,7 +123,7 @@ function renderTabContent(option, connection, translate) {
                     headline: translate('page.mcpNotAllowed.snippets.codexCli.headline', 'Codex CLI'),
                     content: (react_1.default.createElement(react_1.default.Fragment, null,
                         terminalHint,
-                        react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "shell", source: (0, utils_1.generateCodexCommand)(connection), header: CODE_BLOCK_HEADER, wrapContents: true }))),
+                        react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "shell", source: (0, utils_1.generateCodexCommand)(connection), header: snippetHeader(option, 'codex'), wrapContents: true }))),
                 },
                 {
                     headline: translate('page.mcpNotAllowed.snippets.chatgptApp.headline', 'ChatGPT desktop app'),
@@ -126,7 +136,7 @@ function renderTabContent(option, connection, translate) {
         case 'json':
             return (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(TabHint, null, translate('page.mcpNotAllowed.snippets.json.hint', 'Add this server entry to your MCP client configuration file:')),
-                react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "json", source: JSON.stringify({ [connection.serverName]: { url: connection.url, description: 'MCP Server' } }, null, 2), header: CODE_BLOCK_HEADER })));
+                react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "json", source: JSON.stringify({ [connection.serverName]: { url: connection.url, description: 'MCP Server' } }, null, 2), header: snippetHeader(option, 'json') })));
     }
 }
 function renderClientList(clients) {

package/lib/components/Markdown/Markdown.js

@@ -178,10 +178,8 @@ exports.Markdown = styled_components_1.default.main
   }
 
   hr {
-    border-top: 1px solid var(--md-hr-border-color);
-    background-color: var(--md-hr-bg-color);
-    height: var(--md-hr-height);
     margin: var(--md-hr-margin-vertical) 0;
+    border: var(--md-hr-border);
   }
 
   details:not(${constants_1.ACCORDION_SELECTOR}) {

package/lib/components/Markdown/styles/base-table.js

@@ -46,6 +46,14 @@ exports.markdownBaseTableCss = (0, styled_components_1.css) `
       background-color: var(--md-table-header-bg-color);
     }
 
+    /* hide the header row when every cell is empty; one labelled cell keeps it visible */
+    thead:has(th:empty) {
+      display: none;
+    }
+    thead:has(th:not(:empty)) {
+      display: table-header-group;
+    }
+
     tr {
       background-color: var(--md-table-stripe-bg-color);
     }

package/lib/components/Markdown/variables.js

@@ -62,9 +62,8 @@ exports.markdown = (0, styled_components_1.css) `
   * @tokens Markdown Horizontal Rule
   */
 
-  --md-hr-bg-color: transparent; // @presenter Color
   --md-hr-border-color: var(--border-color-secondary); // @presenter Color
-  --md-hr-height: unset;
+  --md-hr-border: 0.5px solid var(--md-hr-border-color); // @presenter Border
   --md-hr-margin-vertical: 20px; // @presenter Spacing
 
   /**

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/SearchAiDialog.js

@@ -80,6 +80,7 @@ function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error,
         if (!(initialMessage === null || initialMessage === void 0 ? void 0 : initialMessage.trim().length)) {
             return;
         }
+        // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent -- appends the initial message into the conversation state lifted to the search root once the dialog mounts
         setConversation((prev) => [
             ...prev,
             { role: constants_1.AiSearchConversationRole.USER, content: initialMessage },
@@ -89,6 +90,7 @@ function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error,
         if (response === undefined || conversation.length === 0 || error) {
             return;
         }
+        // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent -- merges the streamed assistant response into the lifted conversation state as chunks arrive
         setConversation((prev) => {
             const lastMessage = prev[prev.length - 1];
             const content = response || '';
@@ -127,6 +129,7 @@ function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error,
     ]);
     (0, react_1.useEffect)(() => {
         if (error) {
+            // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent -- drops the pending message from the lifted conversation state once the request errors
             setConversation((prev) => prev.slice(0, -1));
         }
     }, [error, setConversation]);

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/contexts/AccordionGroupContext.d.ts

@@ -0,0 +1 @@
+export declare const AccordionGroupContext: import("react").Context<string | null>;

package/lib/core/contexts/AccordionGroupContext.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionGroupContext = void 0;
+const react_1 = require("react");
+exports.AccordionGroupContext = (0, react_1.createContext)(null);
+//# sourceMappingURL=AccordionGroupContext.js.map

package/lib/core/contexts/PageActionsContext.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Whether the first heading inside the enclosing `Markdown` mounts the page actions.
+ * Without a provider `Heading` falls back to the page type in the page metadata.
+ */
+export declare const PageActionsContext: import("react").Context<boolean | null>;

package/lib/core/contexts/PageActionsContext.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageActionsContext = void 0;
+const react_1 = require("react");
+/**
+ * Whether the first heading inside the enclosing `Markdown` mounts the page actions.
+ * Without a provider `Heading` falls back to the page type in the page metadata.
+ */
+exports.PageActionsContext = (0, react_1.createContext)(null);
+//# sourceMappingURL=PageActionsContext.js.map

package/lib/core/contexts/index.d.ts

@@ -1,7 +1,9 @@
 export * from './ThemeDataContext';
 export * from './MarkdownLinkContext';
+export * from './PageActionsContext';
 export * from './CodeWalkthrough/CodeWalkthroughControlsContext';
 export * from './CodeWalkthrough/CodeWalkthroughStepsContext';
+export * from './AccordionGroupContext';
 export * from './CodeSnippetContext';
 export * from './SearchContext';
 export * from './Toast/ToastContext';

package/lib/core/contexts/index.js

@@ -16,8 +16,10 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./ThemeDataContext"), exports);
 __exportStar(require("./MarkdownLinkContext"), exports);
+__exportStar(require("./PageActionsContext"), exports);
 __exportStar(require("./CodeWalkthrough/CodeWalkthroughControlsContext"), exports);
 __exportStar(require("./CodeWalkthrough/CodeWalkthroughStepsContext"), exports);
+__exportStar(require("./AccordionGroupContext"), exports);
 __exportStar(require("./CodeSnippetContext"), exports);
 __exportStar(require("./SearchContext"), exports);
 __exportStar(require("./Toast/ToastContext"), exports);