@redocly/theme 0.67.0 → 0.68.0-next.1

package/lib/components/Buttons/ConnectMCPButton.d.ts

@@ -5,4 +5,4 @@ export type ConnectMCPButtonProps = {
     alignment?: 'start' | 'end';
     options?: MCPOption[];
 };
-export declare function ConnectMCPButton({ placement, alignment, options }: ConnectMCPButtonProps): JSX.Element;
+export declare function ConnectMCPButton({ placement, alignment, options }: ConnectMCPButtonProps): JSX.Element | null;

package/lib/components/Buttons/ConnectMCPButton.js

@@ -39,7 +39,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConnectMCPButton = ConnectMCPButton;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const Dropdown_1 = require("../../components/Dropdown/Dropdown");
 const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
 const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
 const Button_1 = require("../../components/Button/Button");
@@ -47,12 +46,9 @@ const CursorIcon_1 = require("../../icons/CursorIcon/CursorIcon");
 const VSCodeIcon_1 = require("../../icons/VSCodeIcon/VSCodeIcon");
 const CopyIcon_1 = require("../../icons/CopyIcon/CopyIcon");
 const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
-const ConnectIcon_1 = require("../../icons/ConnectIcon/ConnectIcon");
+const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
+const ChevronUpIcon_1 = require("../../icons/ChevronUpIcon/ChevronUpIcon");
 const hooks_1 = require("../../core/hooks");
-const hooks_2 = require("../../core/hooks");
-const TriggerButton = react_1.default.memo(({ text }) => {
-    return (react_1.default.createElement(StyledButton, { variant: "secondary", icon: react_1.default.createElement(ConnectIcon_1.ConnectIcon, null) }, text));
-});
 const MENU_OPTIONS = [
     {
         key: 'cursor',
@@ -80,31 +76,68 @@ const MENU_OPTIONS = [
     },
 ];
 function ConnectMCPButton({ placement = 'bottom', alignment = 'end', options = ['cursor', 'vscode', 'copy'], }) {
-    const { useTranslate } = (0, hooks_2.useThemeHooks)();
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const { isCopied, triggerButtonText, visibleOptions, handleAction } = (0, hooks_1.useConnectMCPButton)({
-        options,
-    });
-    const menuOptions = (0, react_1.useMemo)(() => MENU_OPTIONS.filter((option) => visibleOptions.includes(option.key)), [visibleOptions]);
-    return (react_1.default.createElement(ConnectMCPButtonWrapper, { "data-component-name": "Buttons/ConnectMCPButton" },
-        react_1.default.createElement(Dropdown_1.Dropdown, { trigger: react_1.default.createElement(TriggerButton, { text: triggerButtonText }), triggerEvent: "hover", placement: placement, alignment: alignment, closeOnClick: false },
-            react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, menuOptions.map((option) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const wrapperRef = (0, react_1.useRef)(null);
+    const { isCopied, visibleOptions, handleAction } = (0, hooks_1.useConnectMCPButton)({ options });
+    (0, hooks_1.useOutsideClick)(wrapperRef, () => setIsOpen(false));
+    const menuOptions = MENU_OPTIONS.filter((option) => visibleOptions.includes(option.key));
+    const primaryOption = menuOptions[0];
+    const dropdownOptions = menuOptions.slice(1);
+    if (!primaryOption)
+        return null;
+    const PrimaryIcon = primaryOption.icon;
+    // When copy is the primary action there is no dropdown item to show the copied state, so the
+    // primary button itself must reflect it.
+    const showPrimaryCopied = primaryOption.key === 'copy' && isCopied;
+    const handleMenuAction = (key) => {
+        handleAction(key);
+        setIsOpen(false);
+    };
+    return (react_1.default.createElement(ConnectMCPButtonWrapper, { ref: wrapperRef, "data-component-name": "Buttons/ConnectMCPButton" },
+        react_1.default.createElement(SplitButtonGroup, null,
+            react_1.default.createElement(PrimaryButton, { variant: "secondary", icon: showPrimaryCopied ? (react_1.default.createElement(CheckmarkFilledIcon_1.CheckmarkFilledIcon, { color: "var(--color-success-base)" })) : (react_1.default.createElement(PrimaryIcon, null)), onClick: () => handleAction(primaryOption.key) }, translate(primaryOption.titleTranslationKey, primaryOption.titleDefault)),
+            dropdownOptions.length > 0 && (react_1.default.createElement(ChevronButton, { variant: "secondary", "aria-label": translate('page.actions.connectMcp.moreOptions', 'More options'), "aria-expanded": isOpen, "aria-haspopup": "menu", onClick: () => setIsOpen((prev) => !prev) }, isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null)))),
+        isOpen && dropdownOptions.length > 0 && (react_1.default.createElement(DropdownWrapper, { $placement: placement, $alignment: alignment },
+            react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, dropdownOptions.map((option) => {
                 const Icon = option.icon;
                 const showCheckmark = option.key === 'copy' && isCopied;
-                return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: option.key, onAction: () => handleAction(option.key) },
+                return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: option.key, onAction: () => handleMenuAction(option.key) },
                     react_1.default.createElement(MenuItemContent, null,
                         react_1.default.createElement(MenuItemIcon, null, showCheckmark ? (react_1.default.createElement(CheckmarkFilledIcon_1.CheckmarkFilledIcon, { color: "var(--color-success-base)" })) : (react_1.default.createElement(Icon, null))),
                         react_1.default.createElement(MenuItemText, null,
                             react_1.default.createElement(MenuItemTitle, null, translate(option.titleTranslationKey, option.titleDefault)),
                             react_1.default.createElement(MenuItemDescription, null, translate(option.descriptionTranslationKey, option.descriptionDefault))))));
-            })))));
+            }))))));
 }
 const ConnectMCPButtonWrapper = styled_components_1.default.div `
   display: inline-block;
   position: relative;
 `;
-const StyledButton = (0, styled_components_1.default)(Button_1.Button) `
+const SplitButtonGroup = styled_components_1.default.div `
+  display: inline-flex;
+  align-items: stretch;
+`;
+const PrimaryButton = (0, styled_components_1.default)(Button_1.Button) `
   --button-gap: var(--connect-mcp-button-gap);
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+`;
+const ChevronButton = (0, styled_components_1.default)(Button_1.Button) `
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: none;
+  padding-inline: var(--connect-mcp-button-chevron-padding-inline);
+`;
+const DropdownWrapper = styled_components_1.default.div `
+  position: absolute;
+  top: ${({ $placement }) => ($placement === 'top' ? 'auto' : '100%')};
+  bottom: ${({ $placement }) => ($placement === 'top' ? '100%' : 'auto')};
+  left: ${({ $alignment }) => ($alignment === 'start' ? '0' : 'auto')};
+  right: ${({ $alignment }) => ($alignment === 'end' ? '0' : 'auto')};
+  padding-top: var(--dropdown-menu-padding-top);
+  z-index: var(--dropdown-menu-z-index);
 `;
 const MenuItemContent = styled_components_1.default.div `
   display: flex;

package/lib/components/Buttons/variables.js

@@ -59,6 +59,9 @@ exports.connectMCPButton = (0, styled_components_1.css) `
   /* Button gap */
   --connect-mcp-button-gap: var(--spacing-xs);
 
+  /* Chevron button */
+  --connect-mcp-button-chevron-padding-inline: var(--spacing-xs);
+
   /* Menu item layout */
   --connect-mcp-button-menu-item-gap: var(--spacing-sm);
   --connect-mcp-button-menu-item-padding-block: var(--spacing-xxs);

package/lib/components/Catalog/CatalogEntities.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntities = CatalogEntities;
 const react_1 = __importStar(require("react"));
 const hooks_1 = require("../../core/hooks");
+const utils_1 = require("../../core/utils");
 const ArrowDownIcon_1 = require("../../icons/ArrowDownIcon/ArrowDownIcon");
 const CatalogCardView_1 = require("../../components/Catalog/CatalogCardView/CatalogCardView");
 const CatalogTableView_1 = require("../../components/Catalog/CatalogTableView/CatalogTableView");
@@ -45,9 +46,6 @@ const CatalogEntitiesEmptyState_1 = require("../../components/Catalog/CatalogEnt
 const LOAD_MORE_THRESHOLD = 10;
 function CatalogEntities(props) {
     const { catalogConfig, excludedEntities, filterQuery, entitiesTypes, sortOption, searchQuery, viewMode, setEntitiesCounter, handleSortClick, isColumnSorted, } = props;
-    const { getEntityDetailsLink } = (0, hooks_1.useCatalogEntityDetails)({
-        catalogConfig,
-    });
     const { useTelemetry, useFetchCatalogEntities } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
     const { initialFilter } = (0, hooks_1.useCatalogEntities)({
@@ -65,14 +63,7 @@ function CatalogEntities(props) {
     const onRowClick = (entity) => {
         if (searchQuery) {
             telemetry.sendCatalogEntitiesListSearchResultClickedMessage([
-                {
-                    id: entity.id,
-                    object: 'catalog_entity',
-                    uri: getEntityDetailsLink(entity),
-                    query: searchQuery,
-                    entityKey: entity.key,
-                    entityType: entity.type,
-                },
+                Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('catalogEntitiesListSearchResultId', 'catalogEntitiesListSearchResult')), { query: searchQuery, entityId: entity.id, entityKey: entity.key, entityType: entity.type }),
             ]);
         }
     };

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

@@ -9,28 +9,15 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const CatalogActionsRow_1 = require("../../../../components/Catalog/CatalogActionsRow");
 const CatalogEntityRelationsTableContent_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent");
 const hooks_1 = require("../../../../core/hooks");
+const utils_1 = require("../../../../core/utils");
 const constants_1 = require("../../../../core/constants");
 function CatalogEntityRelationsTable({ entity, entitiesCatalogConfig, catalogConfig, relations, query, searchQuery, setSearchQuery, heading, columns, setSortOption, sortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, listType, }) {
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
-    const { getEntityDetailsLink } = (0, hooks_1.useCatalogEntityDetails)({
-        catalogConfig,
-        entitiesCatalogConfig,
-    });
     const onRowClick = (relatedEntity) => {
         if (searchQuery) {
-            telemetry.sendCatalogEntitiesRelatedEntitiesListSearchResultClickMessage([
-                {
-                    id: relatedEntity.id,
-                    object: 'catalog_entity',
-                    uri: getEntityDetailsLink(relatedEntity),
-                    query: searchQuery,
-                    entityKey: entity.key,
-                    entityType: entity.type,
-                    relationType: constants_1.reverseRelationMap[relatedEntity.relationType],
-                    relatedEntityKey: relatedEntity.key,
-                    relatedEntityType: relatedEntity.type,
-                },
+            telemetry.sendCatalogEntitiesRelatedEntitiesListSearchResultClickedMessage([
+                Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('catalogEntitiesRelatedEntitiesListSearchResultId', 'catalogEntitiesRelatedEntitiesListSearchResult')), { query: searchQuery, entityKey: entity.key, entityType: entity.type, relationType: constants_1.reverseRelationMap[relatedEntity.relationType], relatedEntityId: relatedEntity.id, relatedEntityKey: relatedEntity.key, relatedEntityType: relatedEntity.type }),
             ]);
         }
     };

package/lib/components/Catalog/CatalogEntity/CatalogEntitySchema.d.ts

@@ -12,4 +12,4 @@ export type CatalogEntitySchemaProps = {
         typeName: string;
     }>;
 };
-export declare function CatalogEntitySchema({ entity, relatedEntity, catalogConfig, RedocSchema, StoreProvider, GraphqlTypeRenderer }: CatalogEntitySchemaProps): React.JSX.Element;
+export declare function CatalogEntitySchema({ entity, relatedEntity, RedocSchema, StoreProvider, GraphqlTypeRenderer }: CatalogEntitySchemaProps): React.JSX.Element;

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

@@ -42,9 +42,10 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const Sampler = __importStar(require("openapi-sampler"));
 const hooks_1 = require("../../../core/hooks");
 const hooks_2 = require("../../../core/hooks");
+const utils_1 = require("../../../core/utils");
 const JsonViewer_1 = require("../../../components/JsonViewer/JsonViewer");
 const CopyButton_1 = require("../../../components/Buttons/CopyButton");
-function CatalogEntitySchema({ entity, relatedEntity, catalogConfig, RedocSchema, StoreProvider, GraphqlTypeRenderer, }) {
+function CatalogEntitySchema({ entity, relatedEntity, RedocSchema, StoreProvider, GraphqlTypeRenderer, }) {
     var _a, _b;
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
@@ -52,18 +53,11 @@ function CatalogEntitySchema({ entity, relatedEntity, catalogConfig, RedocSchema
     const { definition, parsedSchema, rawSchema } = (0, hooks_2.useCatalogEntitySchema)({ entity, relatedEntity });
     const isGraphql = ((_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.specType) === 'graphql';
     const graphqlSDL = (_b = entity === null || entity === void 0 ? void 0 : entity.metadata) === null || _b === void 0 ? void 0 : _b.sdl;
-    const { getEntityDetailsLink } = (0, hooks_1.useCatalogEntityDetails)({
-        catalogConfig,
-    });
     return (react_1.default.createElement(MetadataWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntitySchema" },
         react_1.default.createElement(HeaderWrapper, null,
             react_1.default.createElement(Heading, null, translate('catalog.entity.schema.title')),
             !isGraphql && (react_1.default.createElement(CopyButton_1.CopyButton, { data: rawSchema, buttonText: "Copy Schema", type: "compound", variant: "secondary", iconPosition: "right", size: "medium", onCopyClick: () => telemetry.sendCatalogEntitiesCopyDataSchemaClickedMessage([
-                    {
-                        id: entity.id,
-                        object: 'catalog_entity',
-                        uri: getEntityDetailsLink(entity),
-                    },
+                    Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('catalogEntitiesCopyDataSchemaId', 'button')), { entityId: entity.id, entityKey: entity.key, entityType: entity.type }),
                 ]) }))),
         react_1.default.createElement(SplitViewWrapper, null,
             react_1.default.createElement(SchemaContentWrapper, null, isGraphql && graphqlSDL && GraphqlTypeRenderer ? (react_1.default.createElement(GraphqlTypeRenderer, { sdl: graphqlSDL, typeName: entity.title })) : (react_1.default.createElement(StoreProvider, { definition: definition },

package/lib/components/Catalog/CatalogFilter/CatalogFilterCheckboxes.js

@@ -104,13 +104,7 @@ function CatalogFilterCheckboxes({ filter, filterValuesCasing, showCounter = tru
                 return (react_1.default.createElement(FilterCheckboxOption, { key: id, role: "link", onClick: () => {
                         filter.toggleOption(value);
                         telemetry.sendCatalogEntitiesFilterCheckboxToggledMessage([
-                            {
-                                id: filter.property + '--' + value,
-                                object: 'checkbox',
-                                uri: window.location.href,
-                                category: filter.property,
-                                value: value,
-                            },
+                            Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('catalogEntitiesFilterCheckboxId', 'checkbox')), { category: filter.property, value: value }),
                         ]);
                     } },
                     react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: filter.selectedOptions instanceof Set

package/lib/components/Feedback/Feedback.js

@@ -47,6 +47,7 @@ const Comment_1 = require("../../components/Feedback/Comment");
 const Mood_1 = require("../../components/Feedback/Mood");
 const Scale_1 = require("../../components/Feedback/Scale");
 const constants_1 = require("../../core/constants");
+const utils_1 = require("../../core/utils");
 const feedbackComponents = {
     rating: Rating_1.Rating,
     sentiment: Sentiment_1.Sentiment,
@@ -74,7 +75,9 @@ function Feedback(props) {
         return (React.createElement(FeedbackWrapper, { "data-component-name": "Feedback/Feedback" },
             React.createElement(FeedbackComponent, { settings: settings, onSubmit: (values) => {
                     submitFeedback({ type, values, path });
-                    telemetry.sendFeedbackMessage({ feedbackType: type });
+                    telemetry.sendFeedbackMessage([
+                        Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('feedbackFormId', 'feedbackForm')), { feedbackType: type }),
+                    ]);
                 } })));
     };
     return React.createElement(React.Fragment, { key: pathname }, renderFeedbackComponent());

package/lib/components/Feedback/Reasons.js

@@ -41,14 +41,13 @@ const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 function Reasons({ settings, onChange, className }) {
-    const { label, component, items = [] } = settings;
+    const { label, component = 'checkbox', items = [] } = settings;
     const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     if (!items.length) {
         return null;
     }
-    const input_type = component || 'checkbox';
     const handleOptionChange = (position) => {
         const updatedCheckedState = component === 'checkbox'
             ? checkedState.map((item, index) => (index === position ? !item : item))
@@ -60,7 +59,7 @@ function Reasons({ settings, onChange, className }) {
         React.createElement(Label, null, label ||
             translate('feedback.settings.reasons.label', 'Which statement describes your thoughts about this page?')),
         items.map((reason, idx) => (React.createElement(OptionWrapper, { key: reason },
-            React.createElement("input", { type: input_type, value: reason, checked: checkedState[idx], name: "reasons", onChange: () => handleOptionChange(idx) }),
+            React.createElement("input", { type: component, value: reason, checked: checkedState[idx], name: "reasons", onChange: () => handleOptionChange(idx) }),
             React.createElement("label", { "data-translation-key": `feedback.settings.reasons.items.${idx + 1}`, id: reason, onClick: () => handleOptionChange(idx) }, translate(`feedback.settings.reasons.items.${idx + 1}`, reason)))))));
 }
 const ReasonsWrapper = styled_components_1.default.div `

package/lib/components/Menu/MenuItem.js

@@ -49,6 +49,7 @@ const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
 const Tag_1 = require("../../components/Tag/Tag");
 function MenuItem(props) {
     var _a, _b;
+    var _c;
     const { item, depth, className, onClick } = props;
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
@@ -101,7 +102,7 @@ function MenuItem(props) {
     return (react_1.default.createElement(MenuItemWrapper, { "data-component-name": "Menu/MenuItem", className: generateClassName({ type, item, className }), role: "listitem" },
         item.link ? (react_1.default.createElement(MenuItemLink, { to: item.link, external: item.external, target: item.target, languageInsensitive: item.languageInsensitive, onKeyDown: handleExpandOnEnter }, label)) : (label),
         isNested ? (react_1.default.createElement(MenuItemNestedWrapper, { $isExpanded: isExpanded, $depth: depth, ref: nestedMenuRef, style: style }, isExpanded || !canUnmount ? props.children : null)) : null,
-        item.separatorLine ? (react_1.default.createElement(MenuItemSeparatorLine, { $depth: depth, $linePosition: item.linePosition })) : null));
+        item.separatorLine ? (react_1.default.createElement(MenuItemSeparatorLine, { $depth: depth, $linePosition: (_c = item.linePosition) !== null && _c !== void 0 ? _c : constants_1.DEFAULT_LINE_POSITION })) : null));
 }
 /* for backward compatibility */
 function isDirectColorValue(color) {

package/lib/components/Search/SearchAiDialog.js

@@ -47,11 +47,12 @@ const SearchAiMessage_1 = require("../../components/Search/SearchAiMessage");
 const Admonition_1 = require("../../components/Admonition/Admonition");
 const AiStarsIcon_1 = require("../../icons/AiStarsIcon/AiStarsIcon");
 function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error, resources, onMessageSent, className, conversation, setConversation, toolCalls = [], contentSegments, }) {
+    var _a;
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { aiAssistant } = (0, hooks_1.useThemeConfig)();
     const { translate } = useTranslate();
     const conversationEndRef = react_1.default.useRef(null);
-    const suggestions = aiAssistant === null || aiAssistant === void 0 ? void 0 : aiAssistant.suggestions;
+    const suggestions = (_a = aiAssistant === null || aiAssistant === void 0 ? void 0 : aiAssistant.suggestions) !== null && _a !== void 0 ? _a : [];
     const placeholder = isGeneratingResponse
         ? translate('search.ai.generatingResponse', 'Generating response...')
         : conversation.length > 0

package/lib/components/Search/SearchAiResponse.js

@@ -19,6 +19,7 @@ const ErrorFilledIcon_1 = require("../../icons/ErrorFilledIcon/ErrorFilledIcon")
 const constants_1 = require("../../core/constants");
 const ChatIcon_1 = require("../../icons/ChatIcon/ChatIcon");
 function SearchAiResponse(props) {
+    var _a;
     const { useMarkdownText } = (0, hooks_1.useThemeHooks)();
     const { question, response, isGeneratingResponse, resources, error, onSuggestionClick } = props;
     const { aiAssistant } = (0, hooks_1.useThemeConfig)();
@@ -26,7 +27,7 @@ function SearchAiResponse(props) {
     const { translate } = useTranslate();
     const markdownResponse = useMarkdownText(response || '');
     let responseContainer = null;
-    const suggestions = aiAssistant === null || aiAssistant === void 0 ? void 0 : aiAssistant.suggestions;
+    const suggestions = (_a = aiAssistant === null || aiAssistant === void 0 ? void 0 : aiAssistant.suggestions) !== null && _a !== void 0 ? _a : [];
     const hasPendingOrReceivedResponse = response || isGeneratingResponse || error;
     if (hasPendingOrReceivedResponse) {
         let icon;

package/lib/components/Search/SearchTrigger.js

@@ -43,14 +43,14 @@ const hooks_1 = require("../../core/hooks");
 const Button_1 = require("../../components/Button/Button");
 const SearchIcon_1 = require("../../icons/SearchIcon/SearchIcon");
 const utils_1 = require("../../core/utils");
+const constants_1 = require("../../core/constants");
 function SearchTrigger({ onClick, className }) {
     var _a;
     var _b;
     const themeSettings = (0, hooks_1.useThemeConfig)();
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const defaultKeyShortcut = '⌘+K,CTRL+K';
-    const keyShortcuts = (_b = (_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.search) === null || _a === void 0 ? void 0 : _a.shortcuts) !== null && _b !== void 0 ? _b : [defaultKeyShortcut];
+    const keyShortcuts = (_b = (_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.search) === null || _a === void 0 ? void 0 : _a.shortcuts) !== null && _b !== void 0 ? _b : [constants_1.DEFAULT_KEYBOARD_SHORTCUTS];
     let mainShortcutKey = null;
     if (keyShortcuts) {
         if (Array.isArray(keyShortcuts)) {
@@ -67,7 +67,7 @@ function SearchTrigger({ onClick, className }) {
         React.createElement(SearchTriggerInput, { "data-testid": "search-trigger-input", "data-translation-key": "search.navbar.label" },
             React.createElement(SearchIcon_1.SearchIcon, null),
             translate('search.navbar.label', 'Search'),
-            mainShortcutKey === defaultKeyShortcut ? (React.createElement("span", null, isMac ? '⌘K' : 'Ctrl+K')) : (React.createElement("span", null, mainShortcutKey)))));
+            mainShortcutKey === constants_1.DEFAULT_KEYBOARD_SHORTCUTS ? (React.createElement("span", null, isMac ? '⌘K' : 'Ctrl+K')) : (React.createElement("span", null, mainShortcutKey)))));
 }
 const SearchTriggerWrapper = styled_components_1.default.div `
   color: var(--search-trigger-color);

package/lib/core/constants/common.d.ts

@@ -30,3 +30,4 @@ export declare const DEFAULT_COLOR_MODES: {
     readonly LIGHT: 'light';
     readonly DARK: 'dark';
 };
+export declare const DEFAULT_LINE_POSITION = "top";

package/lib/core/constants/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_COLOR_MODES = exports.MobileMenuType = exports.MenuItemType = exports.DEFAULT_FEEDBACK_TYPE = exports.FEEDBACK_TYPES = exports.ICONS_CDN_URL = exports.CONTENT_ID = exports.DEFAULT_LOCALE_PLACEHOLDER = exports.REDOCLY_TEAMS_RBAC = void 0;
+exports.DEFAULT_LINE_POSITION = exports.DEFAULT_COLOR_MODES = exports.MobileMenuType = exports.MenuItemType = exports.DEFAULT_FEEDBACK_TYPE = exports.FEEDBACK_TYPES = exports.ICONS_CDN_URL = exports.CONTENT_ID = exports.DEFAULT_LOCALE_PLACEHOLDER = exports.REDOCLY_TEAMS_RBAC = void 0;
 var config_1 = require("@redocly/config");
 Object.defineProperty(exports, "REDOCLY_TEAMS_RBAC", { enumerable: true, get: function () { return config_1.REDOCLY_TEAMS_RBAC; } });
 exports.DEFAULT_LOCALE_PLACEHOLDER = 'default_locale';
@@ -37,4 +37,5 @@ exports.DEFAULT_COLOR_MODES = {
     LIGHT: 'light',
     DARK: 'dark',
 };
+exports.DEFAULT_LINE_POSITION = 'top';
 //# sourceMappingURL=common.js.map

package/lib/core/constants/search.d.ts

@@ -14,6 +14,7 @@ export type AiSearchConversationRole = (typeof AiSearchConversationRole)[keyof t
 export declare const AI_SEARCH_ERROR_CONFIG: Record<AiSearchError, AiSearchErrorConfig>;
 export declare const AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
 export declare const SEARCH_DEBOUNCE_TIME_MS = 300;
+export declare const DEFAULT_KEYBOARD_SHORTCUTS = "\u2318+K,CTRL+K";
 export declare const TOOL_CALL_DISPLAY_TEXT: Partial<Record<string, {
     inProgressText: string;
     completedText: string;

package/lib/core/constants/search.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TOOL_CALL_DISPLAY_TEXT = exports.SEARCH_DEBOUNCE_TIME_MS = exports.AI_SEARCH_MAX_MESSAGE_LENGTH = exports.AI_SEARCH_ERROR_CONFIG = exports.AiSearchConversationRole = exports.AiSearchError = void 0;
+exports.TOOL_CALL_DISPLAY_TEXT = exports.DEFAULT_KEYBOARD_SHORTCUTS = exports.SEARCH_DEBOUNCE_TIME_MS = exports.AI_SEARCH_MAX_MESSAGE_LENGTH = exports.AI_SEARCH_ERROR_CONFIG = exports.AiSearchConversationRole = exports.AiSearchError = void 0;
 const search_1 = require("../types/search");
 var AiSearchError;
 (function (AiSearchError) {
@@ -39,6 +39,7 @@ exports.AI_SEARCH_ERROR_CONFIG = {
 };
 exports.AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
 exports.SEARCH_DEBOUNCE_TIME_MS = 300;
+exports.DEFAULT_KEYBOARD_SHORTCUTS = '⌘+K,CTRL+K';
 exports.TOOL_CALL_DISPLAY_TEXT = {
     [search_1.ToolCallName.SearchDocumentation]: {
         inProgressText: 'Searching documentation...',

package/lib/core/hooks/search/use-search-dialog.js

@@ -11,6 +11,7 @@ const use_theme_hooks_1 = require("../use-theme-hooks");
 const use_theme_config_1 = require("../use-theme-config");
 const contexts_1 = require("../../contexts");
 const utils_1 = require("../../utils");
+const constants_1 = require("../../constants");
 function useSearchDialog() {
     var _a;
     var _b;
@@ -20,7 +21,7 @@ function useSearchDialog() {
     const { useTelemetry } = (0, use_theme_hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
     const { refreshSearchSessionId } = (0, contexts_1.useSearchSession)();
-    const keyShortcuts = (_b = (_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.search) === null || _a === void 0 ? void 0 : _a.shortcuts) !== null && _b !== void 0 ? _b : ['⌘+K,CTRL+K'];
+    const keyShortcuts = (_b = (_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.search) === null || _a === void 0 ? void 0 : _a.shortcuts) !== null && _b !== void 0 ? _b : [constants_1.DEFAULT_KEYBOARD_SHORTCUTS];
     const hotKeys = keyShortcuts === null || keyShortcuts === void 0 ? void 0 : keyShortcuts.join(',');
     (0, react_1.useEffect)(() => {
         if (hotKeys) {

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

@@ -46,8 +46,11 @@ function useActiveHeading(contentElement, displayedHeadings) {
         const allHeaders = allContent.querySelectorAll(`.${constants_1.HEADING_ANCHOR_CLASS}`);
         const headers = Array.from(allHeaders);
         if (displayedHeadingsRef.current && displayedHeadingsRef.current.length > 0) {
-            const displayedIds = displayedHeadingsRef.current.map((h) => h === null || h === void 0 ? void 0 : h.id).filter(Boolean);
-            return headers.filter((header) => displayedIds.includes(header.id));
+            // Resolve targets by id so anchors that are not headings (e.g. numbered
+            // list items with a lifted headline) can be scrolled to and tracked.
+            return displayedHeadingsRef.current
+                .map((heading) => (heading === null || heading === void 0 ? void 0 : heading.id) ? allContent.querySelector(`[id="${heading.id}"]`) : null)
+                .filter((element) => element !== null);
         }
         return headers;
     };

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

@@ -6,7 +6,7 @@ export declare const useTelemetryFallback: () => {
     sendCatalogEntitiesCopyDataSchemaClickedMessage: () => void;
     sendCatalogEntitiesViewModeChangedMessage: () => void;
     sendCatalogEntitiesRelatedEntitiesListSearchQueryMessage: () => void;
-    sendCatalogEntitiesRelatedEntitiesListSearchResultClickMessage: () => void;
+    sendCatalogEntitiesRelatedEntitiesListSearchResultClickedMessage: () => void;
     sendCatalogEntitiesListSearchQueryMessage: () => void;
     sendCatalogEntitiesListSearchResultClickedMessage: () => void;
     sendRedirectMessage: () => void;

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

@@ -11,7 +11,7 @@ const useTelemetryFallback = () => ({
     sendCatalogEntitiesCopyDataSchemaClickedMessage: () => { },
     sendCatalogEntitiesViewModeChangedMessage: () => { },
     sendCatalogEntitiesRelatedEntitiesListSearchQueryMessage: () => { },
-    sendCatalogEntitiesRelatedEntitiesListSearchResultClickMessage: () => { },
+    sendCatalogEntitiesRelatedEntitiesListSearchResultClickedMessage: () => { },
     sendCatalogEntitiesListSearchQueryMessage: () => { },
     sendCatalogEntitiesListSearchResultClickedMessage: () => { },
     sendRedirectMessage: () => { },

package/lib/core/styles/dark.js

@@ -58,6 +58,16 @@ const badgesDarkMode = (0, styled_components_1.css) `
 
   // @tokens End
 `;
+const numberedListDarkMode = (0, styled_components_1.css) `
+  /**
+    * @tokens Markdown Numbered List
+    */
+
+  --md-numbered-list-marker-bg-color: var(--color-warm-grey-3); // @presenter Color
+  --md-numbered-list-marker-bg-color-hover: var(--color-warm-grey-4); // @presenter Color
+
+  // @tokens End
+`;
 exports.darkMode = (0, styled_components_1.css) `
   /* === Dark Theme Colors  === */
 
@@ -349,6 +359,7 @@ exports.darkMode = (0, styled_components_1.css) `
   ${variables_dark_14.bannerDarkMode}
   ${variables_dark_15.admonitionDarkMode}
   ${badgesDarkMode}
+  ${numberedListDarkMode}
   ${palette_dark_1.activeBrandPaletteDark}
   ${variables_dark_16.codeBlockDarkMode}
   /**

package/lib/core/styles/global.js

@@ -31,23 +31,24 @@ const variables_26 = require("../../components/Product/variables");
 const variables_27 = require("../../components/Markdown/variables");
 const variables_28 = require("../../components/Banner/variables");
 const variables_29 = require("../../markdoc/components/Tabs/variables");
-const variables_30 = require("../../markdoc/components/Diagram/variables");
-const variables_31 = require("../../components/LastUpdated/variables");
-const variables_32 = require("../../components/Logo/variables");
-const variables_33 = require("../../components/StatusCode/variables");
-const variables_34 = require("../../components/Segmented/variables");
-const variables_35 = require("../../components/UserMenu/variables");
-const variables_36 = require("../../components/Tags/variables");
-const variables_37 = require("../../components/VersionPicker/variables");
-const variables_38 = require("../../components/DatePicker/variables");
-const variables_39 = require("../../components/Switch/variables");
-const variables_40 = require("../../markdoc/components/Cards/variables");
-const variables_41 = require("../../markdoc/components/CodeWalkthrough/variables");
-const variables_42 = require("../../components/SkipContent/variables");
-const variables_43 = require("../../components/PageActions/variables");
-const variables_44 = require("../../components/SvgViewer/variables");
-const variables_45 = require("../../components/Toast/variables");
-const variables_46 = require("../../components/PageNavigation/variables");
+const variables_30 = require("../../markdoc/components/NumberedList/variables");
+const variables_31 = require("../../markdoc/components/Diagram/variables");
+const variables_32 = require("../../components/LastUpdated/variables");
+const variables_33 = require("../../components/Logo/variables");
+const variables_34 = require("../../components/StatusCode/variables");
+const variables_35 = require("../../components/Segmented/variables");
+const variables_36 = require("../../components/UserMenu/variables");
+const variables_37 = require("../../components/Tags/variables");
+const variables_38 = require("../../components/VersionPicker/variables");
+const variables_39 = require("../../components/DatePicker/variables");
+const variables_40 = require("../../components/Switch/variables");
+const variables_41 = require("../../markdoc/components/Cards/variables");
+const variables_42 = require("../../markdoc/components/CodeWalkthrough/variables");
+const variables_43 = require("../../components/SkipContent/variables");
+const variables_44 = require("../../components/PageActions/variables");
+const variables_45 = require("../../components/SvgViewer/variables");
+const variables_46 = require("../../components/Toast/variables");
+const variables_47 = require("../../components/PageNavigation/variables");
 const palette_1 = require("./palette");
 const dark_1 = require("./dark");
 const themeColors = (0, styled_components_1.css) `
@@ -1300,28 +1301,29 @@ exports.styles = (0, styled_components_1.css) `
     ${variables_20.button}
     ${variables_21.aiAssistantButton}
     ${variables_21.connectMCPButton}
-    ${variables_40.cards}
+    ${variables_41.cards}
     ${variables_8.catalog}
     ${variables_11.catalogClassic}
     ${variables_25.code}
-    ${variables_41.codeWalkthrough}
+    ${variables_42.codeWalkthrough}
     ${docsDropdown}
     ${variables_15.dropdown}
     ${error}
     ${variables_10.filter}
     ${variables_19.footer}
     ${headingsTypography}
-    ${variables_36.httpTag}
+    ${variables_37.httpTag}
     ${variables_9.image}
     ${inputs}
     ${variables_1.languagePicker}
-    ${variables_31.lastUpdated}
+    ${variables_32.lastUpdated}
     ${links}
     ${loadProgressBar}
-    ${variables_32.logo}
+    ${variables_33.logo}
     ${variables_27.markdown}
     ${variables_29.markdownTabs}
-    ${variables_30.diagram}
+    ${variables_30.markdownNumberedList}
+    ${variables_31.diagram}
     ${variables_24.menu}
     ${variables_24.mobileMenu}
     ${modal}
@@ -1340,26 +1342,26 @@ exports.styles = (0, styled_components_1.css) `
     ${variables_7.toc}
     ${variables_16.tooltip}
     ${typography}
-    ${variables_35.userMenu}
-    ${variables_37.versionPicker}
+    ${variables_36.userMenu}
+    ${variables_38.versionPicker}
     ${zIndexDepth}
     ${scorecardColors}
-    ${variables_33.statusCode}
+    ${variables_34.statusCode}
     ${tab}
     ${icon}
     ${tree}
-    ${variables_34.segmented}
-    ${variables_39.switcher}
+    ${variables_35.segmented}
+    ${variables_40.switcher}
     ${variables_17.checkbox}
     ${variables_3.feedback}
     ${variables_2.scorecard}
-    ${variables_38.datePicker}
+    ${variables_39.datePicker}
     ${replay}
-    ${variables_42.skipContent}
-    ${variables_43.pageActions}
-    ${variables_44.svgViewer}
-    ${variables_45.toast}
-    ${variables_46.pageNavigation}
+    ${variables_43.skipContent}
+    ${variables_44.pageActions}
+    ${variables_45.svgViewer}
+    ${variables_46.toast}
+    ${variables_47.pageNavigation}
 
     background-color: var(--bg-color);
     color: var(--text-color-primary);