@redocly/theme 0.59.0-rc.2 → 0.59.0

package/LICENSE

@@ -1 +1,7 @@
-(c) Copyright 2022 Redocly Inc, all rights reserved.
+Copyright 2022 Redocly Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/lib/components/Buttons/AIAssistantButton.js

@@ -49,7 +49,7 @@ const RedoclyIcon_1 = require("../../icons/RedoclyIcon/RedoclyIcon");
 const defaultConfig = {
     hide: false,
     inputType: 'button',
-    inputIcon: 'redocly',
+    inputIcon: 'sparkles',
 };
 const getIcon = (iconType, inputType = 'button') => {
     const iconSize = inputType === 'icon'
@@ -73,8 +73,9 @@ function AIAssistantButton() {
     var _a, _b;
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const themeConfig = (0, hooks_1.useThemeConfig)();
-    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
+    const telemetry = useTelemetry();
     const buttonConfig = Object.assign(Object.assign({}, defaultConfig), ((_b = (_a = themeConfig.aiAssistant) === null || _a === void 0 ? void 0 : _a.trigger) !== null && _b !== void 0 ? _b : {}));
     const { hide, inputIcon, inputType } = buttonConfig;
     if (hide) {
@@ -84,6 +85,9 @@ function AIAssistantButton() {
     const text = translate('aiAssistant.trigger', 'Ask AI');
     const handleOpen = () => {
         setIsOpen(true);
+        telemetry.sendSearchAiOpenedMessage({
+            method: 'ai_trigger_button',
+        });
     };
     const handleClose = () => {
         setIsOpen(false);

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

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+import type { MCPOption } from '../../core/types';
+export type ConnectMCPButtonProps = {
+    placement?: 'top' | 'bottom';
+    alignment?: 'start' | 'end';
+    options?: MCPOption[];
+};
+export declare function ConnectMCPButton({ placement, alignment, options, }: ConnectMCPButtonProps): JSX.Element;

package/lib/components/Buttons/ConnectMCPButton.js

@@ -0,0 +1,145 @@
+"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.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");
+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 use_connect_mcp_button_1 = require("../../core/hooks/use-connect-mcp-button");
+const hooks_1 = 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',
+        icon: CursorIcon_1.CursorIcon,
+        titleTranslationKey: 'page.actions.connectMcp.cursor',
+        titleDefault: 'Connect to Cursor',
+        descriptionTranslationKey: 'page.actions.connectMcp.cursorDescription',
+        descriptionDefault: 'Install MCP server on Cursor',
+    },
+    {
+        key: 'vscode',
+        icon: VSCodeIcon_1.VSCodeIcon,
+        titleTranslationKey: 'page.actions.connectMcp.vscode',
+        titleDefault: 'Connect to VS Code',
+        descriptionTranslationKey: 'page.actions.connectMcp.vscodeDescription',
+        descriptionDefault: 'Install MCP server on VS Code',
+    },
+    {
+        key: 'copy',
+        icon: CopyIcon_1.CopyIcon,
+        titleTranslationKey: 'page.actions.connectMcp.copyConfig',
+        titleDefault: 'Copy MCP Configuration',
+        descriptionTranslationKey: 'page.actions.connectMcp.copyConfigDescription',
+        descriptionDefault: 'Copy MCP JSON Configuration',
+    },
+];
+function ConnectMCPButton({ placement = 'bottom', alignment = 'end', options = ['cursor', 'vscode', 'copy'], }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const { isCopied, triggerButtonText, visibleOptions, handleAction } = (0, use_connect_mcp_button_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 Icon = option.icon;
+                const showCheckmark = option.key === 'copy' && isCopied;
+                return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: option.key, onAction: () => handleAction(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) `
+  --button-gap: var(--connect-mcp-button-gap);
+`;
+const MenuItemContent = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--connect-mcp-button-menu-item-gap);
+  padding: var(--connect-mcp-button-menu-item-padding-block)
+    var(--connect-mcp-button-menu-item-padding-inline);
+`;
+const MenuItemIcon = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--connect-mcp-button-menu-item-icon-size);
+  height: var(--connect-mcp-button-menu-item-icon-size);
+  flex-shrink: 0;
+  border: var(--connect-mcp-button-menu-item-icon-border);
+  border-radius: var(--connect-mcp-button-menu-item-icon-border-radius);
+  color: var(--connect-mcp-button-menu-item-icon-color);
+`;
+const MenuItemText = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--connect-mcp-button-menu-item-text-gap);
+  flex: 1;
+`;
+const MenuItemTitle = styled_components_1.default.div `
+  font-size: var(--connect-mcp-button-menu-item-title-font-size);
+  font-weight: var(--connect-mcp-button-menu-item-title-font-weight);
+  line-height: var(--connect-mcp-button-menu-item-title-line-height);
+  color: var(--connect-mcp-button-menu-item-title-color);
+`;
+const MenuItemDescription = styled_components_1.default.div `
+  font-size: var(--connect-mcp-button-menu-item-description-font-size);
+  font-weight: var(--connect-mcp-button-menu-item-description-font-weight);
+  line-height: var(--connect-mcp-button-menu-item-description-line-height);
+  color: var(--connect-mcp-button-menu-item-description-color);
+`;
+//# sourceMappingURL=ConnectMCPButton.js.map

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

@@ -1 +1,2 @@
 export declare const aiAssistantButton: import("styled-components").FlattenSimpleInterpolation;
+export declare const connectMCPButton: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Buttons/variables.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.aiAssistantButton = void 0;
+exports.connectMCPButton = exports.aiAssistantButton = void 0;
 const styled_components_1 = require("styled-components");
 exports.aiAssistantButton = (0, styled_components_1.css) `
   /**
@@ -23,7 +23,7 @@ exports.aiAssistantButton = (0, styled_components_1.css) `
   /* Positioning */
   --ai-assistant-button-bottom: var(--spacing-xl);
   --ai-assistant-button-right: var(--spacing-xl);
-  --ai-assistant-button-z-index: 1000;
+  --ai-assistant-button-z-index: 50
 
   /* Typography */
   --ai-assistant-button-font-size: var(--font-size-base);
@@ -48,4 +48,44 @@ exports.aiAssistantButton = (0, styled_components_1.css) `
   /* Transition */
   --ai-assistant-button-transition: box-shadow 0.3s ease, transform 0.2s ease;
 `;
+exports.connectMCPButton = (0, styled_components_1.css) `
+  /**
+   * @tokens Connect MCP Button
+   * @presenter Color
+   */
+
+  /* Button gap */
+  --connect-mcp-button-gap: 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);
+  --connect-mcp-button-menu-item-padding-inline: 0;
+
+  /* Menu item icon */
+  --connect-mcp-button-menu-item-icon-size: 32px;
+  --connect-mcp-button-menu-item-icon-border-color: var(--border-color-secondary);
+  --connect-mcp-button-menu-item-icon-border-style: solid;
+  --connect-mcp-button-menu-item-icon-border-width: 1px;
+  --connect-mcp-button-menu-item-icon-border: var(--connect-mcp-button-menu-item-icon-border-width)
+    var(--connect-mcp-button-menu-item-icon-border-style)
+    var(--connect-mcp-button-menu-item-icon-border-color);
+  --connect-mcp-button-menu-item-icon-border-radius: var(--border-radius);
+  --connect-mcp-button-menu-item-icon-color: var(--icon-color-secondary);
+
+  /* Menu item text */
+  --connect-mcp-button-menu-item-text-gap: var(--spacing-xxs);
+
+  /* Menu item title */
+  --connect-mcp-button-menu-item-title-font-size: var(--font-size-base);
+  --connect-mcp-button-menu-item-title-font-weight: var(--font-weight-regular);
+  --connect-mcp-button-menu-item-title-line-height: var(--line-height-base);
+  --connect-mcp-button-menu-item-title-color: var(--text-color-secondary);
+
+  /* Menu item description */
+  --connect-mcp-button-menu-item-description-font-size: var(--font-size-sm);
+  --connect-mcp-button-menu-item-description-font-weight: var(--font-weight-regular);
+  --connect-mcp-button-menu-item-description-line-height: var(--line-height-sm);
+  --connect-mcp-button-menu-item-description-color: var(--text-color-description);
+`;
 //# sourceMappingURL=variables.js.map

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

@@ -25,6 +25,7 @@ const InfoBarWrapper = styled_components_1.default.div `
   transition: all 0.2s ease-in-out;
   height: 100%;
   padding: var(--catalog-card-gap);
+  margin-bottom: var(--spacing-xs);
 
   ${({ hoverEffect }) => hoverEffect &&
     `

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

@@ -13,7 +13,7 @@ const MoleculesIcon_1 = require("../../../../icons/MoleculesIcon/MoleculesIcon")
 const NetworkIcon_1 = require("../../../../icons/NetworkIcon/NetworkIcon");
 function CatalogEntityApiDescriptionRelations({ entity, relations, query, searchQuery, setSearchQuery, setFilter, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations" },
-        react_1.default.createElement(Tabs_1.Tabs, { key: entity.id, size: Tabs_1.TabsSize.MEDIUM },
+        react_1.default.createElement(Tabs_1.Tabs, { key: entity.id, forceReady: relations.length > 0, size: Tabs_1.TabsSize.MEDIUM },
             react_1.default.createElement(TabItem, { label: "Operations", icon: react_1.default.createElement(MoleculesIcon_1.MoleculesIcon, null), onClick: () => setFilter('type:api-operation') },
                 react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { key: "operations-table", entity: entity, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, shouldShowHeading: false, listType: "api-operation" })),
             react_1.default.createElement(TabItem, { label: "Schemas", icon: react_1.default.createElement(NetworkIcon_1.NetworkIcon, null), onClick: () => setFilter('type:data-schema') },

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

@@ -40,7 +40,7 @@ const teamColumns = [
 ];
 function CatalogEntityTeamRelations({ entity, relations, query, searchQuery, setSearchQuery, setFilter, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations" },
-        react_1.default.createElement(Tabs_1.Tabs, { size: Tabs_1.TabsSize.MEDIUM },
+        react_1.default.createElement(Tabs_1.Tabs, { forceReady: relations.length > 0, size: Tabs_1.TabsSize.MEDIUM },
             react_1.default.createElement(TabItem, { label: "Members", icon: react_1.default.createElement(PeopleIcon_1.PeopleIcon, null), onClick: () => setFilter('type:user') },
                 react_1.default.createElement(CatalogEntityRelationsTable_1.CatalogEntityRelationsTable, { key: "members-table", entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, columns: teamColumns, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, listType: "team" })),
             react_1.default.createElement(TabItem, { label: "Related entities", icon: react_1.default.createElement(EntityTypeIcon_1.EntityTypeIcon, null), onClick: () => setFilter('-type:user') },

package/lib/components/Catalog/CatalogEntityIcon.js

@@ -14,6 +14,7 @@ const HierarchyIcon_1 = require("../../icons/HierarchyIcon/HierarchyIcon");
 const Image_1 = require("../../components/Image/Image");
 const core_1 = require("../../core");
 const NoteIcon_1 = require("../../icons/NoteIcon/NoteIcon");
+const CubeIcon_1 = require("../../icons/CubeIcon/CubeIcon");
 const getIconColor = (entityType) => `var(--catalog-entity-icon-color-${entityType})`;
 const getEntityIcon = ({ entityType, defaultColor, forceColor, entitiesCatalogConfig, }) => {
     var _a, _b;
@@ -34,7 +35,7 @@ const getEntityIcon = ({ entityType, defaultColor, forceColor, entitiesCatalogCo
     if ((iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.src) || (iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.srcSet)) {
         return (react_1.default.createElement(Image_1.Image, { src: iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.src, srcSet: iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.srcSet, alt: `${entityType} icon`, width: "16", height: "16" }));
     }
-    return react_1.default.createElement(CodeIcon_1.CodeIcon, { color: "var(--catalog-entity-icon-color)" }); // @TODO: add default icon
+    return react_1.default.createElement(CubeIcon_1.CubeIcon, { color: "var(--catalog-entity-icon-color)" });
 };
 function CatalogEntityIcon({ entityType, defaultColor = false, forceColor, }) {
     const themeConfig = (0, core_1.useThemeConfig)();

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

@@ -17,6 +17,10 @@ const filterComponents = {
 function CatalogFilter({ filter, filterValuesCasing, showCounter = true, className, }) {
     if (!filter.parentUsed)
         return null;
+    const filteredOptions = filter.filteredOptions || filter.options;
+    if (!filteredOptions || filteredOptions.length === 0) {
+        return null;
+    }
     const FilterComponent = filterComponents[(filter.type || 'checkboxes')];
     return (react_1.default.createElement(CatalogFilterGroup, { className: className, "data-component-name": "Catalog/CatalogFilter", key: filter.property + filter.title },
         react_1.default.createElement(FilterComponent, { filter: filter, filterValuesCasing: filterValuesCasing, showCounter: showCounter })));

package/lib/components/Catalog/CatalogTagsWithTooltip.js

@@ -14,7 +14,7 @@ function CatalogTagsWithTooltip({ items, itemsToShow = 1, showPlaceholder = true
     if (!items || items.length === 0) {
         if (showPlaceholder) {
             return (react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" },
-                react_1.default.createElement(Tag_1.Tag, { variant: "outline", style: { backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }, color: "grey" }, "N/A")));
+                react_1.default.createElement(Tag_1.Tag, { style: { backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }, color: "grey" }, "N/A")));
         }
         return null;
     }

package/lib/components/Catalog/variables.js

@@ -99,7 +99,7 @@ exports.catalog = (0, styled_components_1.css) `
   /**
     * @tokens Catalog entity icon
     */
-  --catalog-entity-icon-color: var(--color-primary-base);
+  --catalog-entity-icon-color: var(--color-persian-green-8);
   --catalog-entity-border-color: var(--border-color-secondary);
   --catalog-entity-bg-color: var(--bg-color-tonal);
 

package/lib/components/Dropdown/Dropdown.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { PropsWithChildren, JSX } from 'react';
+import type { PropsWithChildren } from 'react';
 export type DropdownProps = PropsWithChildren<{
     trigger: React.ReactNode;
     triggerEvent?: 'click' | 'hover';
@@ -13,4 +13,18 @@ export type DropdownProps = PropsWithChildren<{
     onClick?: (event: React.UIEvent) => void;
     onClose?: () => void;
 }>;
-export declare function Dropdown({ children, className, active, trigger, triggerEvent, closeOnClick, withArrow, dataAttributes, placement, alignment, onClick, onClose, }: DropdownProps): JSX.Element;
+export declare const Dropdown: React.ForwardRefExoticComponent<{
+    trigger: React.ReactNode;
+    triggerEvent?: "click" | "hover";
+    placement?: "top" | "bottom";
+    alignment?: "start" | "end";
+    active?: boolean;
+    closeOnClick?: boolean;
+    dataAttributes?: Record<string, string>;
+    className?: string;
+    withArrow?: boolean;
+    onClick?: (event: React.UIEvent) => void;
+    onClose?: () => void;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

package/lib/components/Dropdown/Dropdown.js

@@ -36,13 +36,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dropdown = Dropdown;
+exports.Dropdown = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
 const ChevronUpIcon_1 = require("../../icons/ChevronUpIcon/ChevronUpIcon");
-function Dropdown({ children, className, active, trigger, triggerEvent = 'click', closeOnClick = true, withArrow, dataAttributes, placement, alignment, onClick, onClose, }) {
+exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigger, triggerEvent = 'click', closeOnClick = true, withArrow, dataAttributes, placement, alignment, onClick, onClose, }, ref) => {
     const dropdownRef = (0, react_1.useRef)(null);
     const [isOpen, setIsOpen] = (0, hooks_1.useControlledState)(false, active);
     const handleOpen = () => {
@@ -65,13 +65,13 @@ function Dropdown({ children, className, active, trigger, triggerEvent = 'click'
             handleToggle(event);
         }
     };
-    (0, hooks_1.useOutsideClick)(dropdownRef, handleClose);
+    (0, hooks_1.useOutsideClick)(ref || dropdownRef, handleClose);
     const triggerChild = react_1.default.Children.only(trigger);
     const dropdownTrigger = (0, react_1.cloneElement)(triggerChild, Object.assign(Object.assign(Object.assign({ onClick: triggerEvent === 'click' ? handleToggle : undefined, icon: withArrow ? isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null) : undefined }, (withArrow ? { iconPosition: 'right' } : {})), triggerChild.props), { onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined }));
-    return (react_1.default.createElement(DropdownWrapper, Object.assign({ "data-component-name": "Dropdown/Dropdown", "data-testid": "dropdown" }, dataAttributes, { className: className, ref: dropdownRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: onClick }),
+    return (react_1.default.createElement(DropdownWrapper, Object.assign({ "data-component-name": "Dropdown/Dropdown", "data-testid": "dropdown" }, dataAttributes, { className: className, ref: ref || dropdownRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: onClick }),
         dropdownTrigger,
         react_1.default.createElement(ChildrenWrapper, { placement: placement, alignment: alignment, isOpen: isOpen, onClick: closeOnClick ? handleChildClick : undefined }, children)));
-}
+});
 const DropdownWrapper = styled_components_1.default.div `
   --button-gap: var(--spacing-xxs);
 

package/lib/components/Menu/MenuItem.js

@@ -81,7 +81,7 @@ function MenuItem(props) {
     };
     const chevron = hasChevron ? (isExpanded ? (react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" })) : (react_1.default.createElement(ChevronRightIcon_1.ChevronRightIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" }))) : null;
     const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
-    const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, isSeparator: isSeparator, onClick: handleOnClick, onKeyDown: handleExpandOnEnter, ref: labelRef, role: item.link ? 'none' : 'link', tabIndex: !item.link ? 0 : undefined, "data-testid": "menu-item-label" },
+    const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, isSeparator: isSeparator, onClick: handleOnClick, onKeyDown: handleExpandOnEnter, ref: labelRef, role: item.link ? 'none' : 'link', tabIndex: !item.link ? 0 : undefined, "data-testid": "menu-item-label", "data-active": item.active },
         hasChevron ? react_1.default.createElement(ChevronWrapper, null, chevron) : null,
         react_1.default.createElement(MenuItemIcon, { icon: item.icon, srcSet: item.srcSet }),
         react_1.default.createElement(MenuItemLabelTextWrapper, null,

package/lib/components/Navbar/NavbarItem.js

@@ -24,9 +24,9 @@ function NavbarItem({ navItem, className }) {
     if (navItem.type !== 'link' && !navItem.items)
         return null;
     const item = navItem;
-    const normalizedPath = (item.link && item.link !== '/' ? (0, utils_1.removeTrailingSlash)(item.link) : item.link) || '';
-    const isActive = pathname ===
-        (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(normalizedPath, defaultLocale, currentLocale, locales));
+    const normalizedPath = (item.link ? (0, utils_1.removeTrailingSlash)(item.link) : item.link) || '';
+    const pathWithPathPrefix = (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(normalizedPath, defaultLocale, currentLocale, locales));
+    const isActive = (0, utils_1.removeTrailingSlash)(pathname) === (0, utils_1.removeTrailingSlash)(pathWithPathPrefix);
     const itemContent = (react_1.default.createElement(NavbarMenuItem, { as: item.link ? Link_1.Link : undefined, active: isActive, className: className, onClick: () => telemetry.sendNavbarMenuItemClickedMessage({ type: item.type }), external: item.external, target: item.target, to: item.link },
         react_1.default.createElement(NavbarIcon, { icon: item.icon, srcSet: item.srcSet }),
         react_1.default.createElement(NavbarLabel, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label)),

package/lib/components/PageActions/PageActions.js

@@ -86,7 +86,7 @@ function PageActions(props) {
         react_1.default.createElement(ButtonGroup_1.ButtonGroup, { variant: "outlined", size: "medium" },
             react_1.default.createElement(Button_1.Button, { icon: renderIcon(buttonAction, actionState), to: 'link' in buttonAction ? buttonAction.link : undefined, external: true, onClick: () => handleActionClick(buttonAction) }, buttonAction.buttonText),
             actions.length > 1 ? (react_1.default.createElement(Dropdown_1.Dropdown, { withArrow: true, trigger: react_1.default.createElement(Button_1.Button, null), placement: "bottom", alignment: "end" },
-                react_1.default.createElement(DropdownMenu_1.DropdownMenu, { items: menuItems }))) : null)));
+                react_1.default.createElement(StyledDropdownMenu, { items: menuItems }))) : null)));
 }
 function renderIcon(buttonAction, actionState) {
     switch (actionState) {
@@ -111,4 +111,7 @@ const LinkMenuItem = (0, styled_components_1.default)(Link_1.Link) `
   text-decoration: none;
   --link-decoration-hover: none;
 `;
+const StyledDropdownMenu = (0, styled_components_1.default)(DropdownMenu_1.DropdownMenu) `
+  --dropdown-menu-max-height: var(--page-actions-dropdown-max-height);
+`;
 //# sourceMappingURL=PageActions.js.map

package/lib/components/PageActions/variables.js

@@ -9,6 +9,8 @@ exports.pageActions = (0, styled_components_1.css) `
   --page-actions-button-text-color: var(--text-color-secondary);
   --page-actions-button-padding: 5px 14px 5px var(--spacing-sm);
 
+  --page-actions-dropdown-max-height: fit-content;
+
   --page-actions-menu-item-padding: 3px 0;
   --page-actions-menu-item-gap: var(--spacing-xs);
   --page-actions-menu-item-icon-color: var(--icon-color-secondary);

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

@@ -23,7 +23,7 @@ function SearchFilterFieldTags({ className, facet, selectedValues, onChange, })
                 if (e.key === 'Enter') {
                     updateSelectedValues();
                 }
-            }, active: active, borderless: true },
+            }, active: active, borderless: true, selectable: true },
             value,
             " ",
             isCounterVisible && react_1.default.createElement("span", null, count)));
@@ -37,7 +37,6 @@ const FilterTagsWrapper = styled_components_1.default.div `
 const FilterTagWrapper = (0, styled_components_1.default)(Tag_1.Tag) `
   text-transform: uppercase;
   cursor: pointer;
-  ${({ color }) => color && `background-color: var(--tag-operation-bg-color-${color});`}
   margin: var(--search-filter-field-tags-tag-margin);
 `;
 //# sourceMappingURL=SearchFilterFieldTags.js.map

package/lib/components/Search/SearchAiActionButtons.d.ts

@@ -0,0 +1,10 @@
+import type { JSX } from 'react';
+import { FeedbackType } from '../../core/types';
+export type SearchAiActionButtonsProps = {
+    content: string;
+    className?: string;
+    feedback?: FeedbackType;
+    onFeedback: (feedback: FeedbackType) => void;
+    disabled?: boolean;
+};
+export declare function SearchAiActionButtons({ content, className, feedback, onFeedback, disabled, }: SearchAiActionButtonsProps): JSX.Element;

package/lib/components/Search/SearchAiActionButtons.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchAiActionButtons = SearchAiActionButtons;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const types_1 = require("../../core/types");
+const Button_1 = require("../../components/Button/Button");
+const ThumbUpIcon_1 = require("../../icons/ThumbUpIcon/ThumbUpIcon");
+const ThumbUpFilledIcon_1 = require("../../icons/ThumbUpFilledIcon/ThumbUpFilledIcon");
+const ThumbDownIcon_1 = require("../../icons/ThumbDownIcon/ThumbDownIcon");
+const ThumbDownFilledIcon_1 = require("../../icons/ThumbDownFilledIcon/ThumbDownFilledIcon");
+const CopyButton_1 = require("../../components/Buttons/CopyButton");
+function SearchAiActionButtons({ content, className, feedback, onFeedback, disabled, }) {
+    return (react_1.default.createElement(ActionButtonsWrapper, { className: className, "data-component-name": "Search/SearchAiActionButtons" },
+        react_1.default.createElement(CopyButton_1.CopyButton, { data: content }),
+        react_1.default.createElement(FeedbackButton, { variant: "text", size: "small", icon: feedback === types_1.FeedbackType.Like ? react_1.default.createElement(ThumbUpFilledIcon_1.ThumbUpFilledIcon, null) : react_1.default.createElement(ThumbUpIcon_1.ThumbUpIcon, null), onClick: () => !disabled && onFeedback(types_1.FeedbackType.Like), extraClass: feedback === types_1.FeedbackType.Like ? 'active' : '', "aria-label": "Like this response", disabled: disabled }),
+        react_1.default.createElement(FeedbackButton, { variant: "text", size: "small", icon: feedback === types_1.FeedbackType.Dislike ? react_1.default.createElement(ThumbDownFilledIcon_1.ThumbDownFilledIcon, null) : react_1.default.createElement(ThumbDownIcon_1.ThumbDownIcon, null), onClick: () => !disabled && onFeedback(types_1.FeedbackType.Dislike), extraClass: feedback === types_1.FeedbackType.Dislike ? 'active' : '', "aria-label": "Dislike this response", disabled: disabled })));
+}
+const ActionButtonsWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--search-ai-feedback-gap);
+`;
+const FeedbackButton = (0, styled_components_1.default)(Button_1.Button) `
+  &:disabled {
+    pointer-events: none;
+    cursor: default;
+    opacity: 1;
+    background-color: var(--button-bg-color);
+    color: var(--button-color);
+    border-color: var(--button-border-color);
+  }
+
+  &:disabled.active {
+    background-color: var(--button-bg-color-active);
+    border-color: var(--button-border-color-active);
+    color: var(--button-color-active);
+  }
+`;
+//# sourceMappingURL=SearchAiActionButtons.js.map

package/lib/components/Search/SearchAiConversationInput.d.ts

@@ -4,6 +4,8 @@ type SearchAiConversationInputProps = {
     isGeneratingResponse: boolean;
     placeholder?: string;
     className?: string;
+    disabled?: boolean;
+    multiline?: boolean;
 };
-export declare function SearchAiConversationInput({ isGeneratingResponse, onMessageSent, className, placeholder, }: SearchAiConversationInputProps): JSX.Element;
+export declare function SearchAiConversationInput({ isGeneratingResponse, onMessageSent, className, placeholder, disabled, multiline, }: SearchAiConversationInputProps): JSX.Element;
 export {};