@redocly/theme 0.59.0-rc.3 → 0.60.0-custom.2

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/CatalogFilter/CatalogFilterDateRange.js

@@ -61,14 +61,14 @@ function CatalogFilterDateRange({ filter, className, }) {
             react_1.default.createElement(FilterOptions_1.FilterOptions, null,
                 react_1.default.createElement(DateRangeWrapper, null,
                     react_1.default.createElement(DateRangeRow, null,
-                        react_1.default.createElement("span", null, "From:"),
+                        react_1.default.createElement("span", null, translate('filter.dateRange.from', 'From:')),
                         react_1.default.createElement(DatePicker_1.DatePicker, { closeCalendar: true, format: "y-MM-dd", dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", value: from, maxDate: new Date(), onChange: (from) => {
                                 if (Array.isArray(from))
                                     return;
                                 filter.selectOption(Object.assign(Object.assign({}, filter.selectedOptions), { from: (0, utils_1.formatDateWithoutTimeZone)(from), to: (0, utils_1.formatDateWithoutTimeZone)(to) }));
                             } })),
                     react_1.default.createElement(DateRangeRow, null,
-                        react_1.default.createElement("span", null, "To:"),
+                        react_1.default.createElement("span", null, translate('filter.dateRange.to', 'To:')),
                         react_1.default.createElement(DatePicker_1.DatePicker, { closeCalendar: true, dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", format: "y-MM-dd", minDate: from, value: to, onChange: (to) => {
                                 if (Array.isArray(to))
                                     return;

package/lib/components/Catalog/CatalogSelector.js

@@ -24,7 +24,7 @@ function CatalogSelector({ catalogSwitcherItems, setSearchQuery, setSortOption,
     }));
     const selectedCatalogItem = catalogSwitcherItems.find((item) => item.selected);
     return (react_1.default.createElement(exports.CatalogSelectWrapper, { "data-component-name": "Catalog/CatalogSelector" },
-        react_1.default.createElement(exports.CatalogSelectLabel, null, "Catalogs"),
+        react_1.default.createElement(exports.CatalogSelectLabel, null, translate('catalog.catalogs.label', 'Catalogs')),
         react_1.default.createElement(exports.CatalogSelect, { value: selectedCatalogItem === null || selectedCatalogItem === void 0 ? void 0 : selectedCatalogItem.slug, options: options, onChange: (value) => {
                 navigate(`${pathPrefix}/catalogs/${value}`);
                 setSearchQuery('');

package/lib/components/Catalog/CatalogSortButton.js

@@ -44,7 +44,10 @@ const DescSortIcon_1 = require("../../icons/DescSortIcon/DescSortIcon");
 const Dropdown_1 = require("../../components/Dropdown/Dropdown");
 const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
 const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
+const hooks_1 = require("../../core/hooks");
 function CatalogSortButton({ onSortChange, currentSort, }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     const toggleSort = (0, react_1.useCallback)((field) => {
         const newSort = currentSort === `-${field}` ? field : `-${field}`;
         onSortChange(newSort);
@@ -52,7 +55,7 @@ function CatalogSortButton({ onSortChange, currentSort, }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogSortButton" },
         react_1.default.createElement(Dropdown_1.Dropdown, { trigger: react_1.default.createElement(SortTrigger, null,
                 react_1.default.createElement(SortIconWrapper, null, currentSort === '-title' ? react_1.default.createElement(DescSortIcon_1.DescSortIcon, null) : react_1.default.createElement(AscSortIcon_1.AscSortIcon, null)),
-                react_1.default.createElement(SortText, null, "Sort")), alignment: "end" },
+                react_1.default.createElement(SortText, null, translate('catalog.sort', 'Sort'))), alignment: "end" },
             react_1.default.createElement(DropdownMenu_1.DropdownMenu, null,
                 react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { onAction: () => toggleSort('title') }, currentSort === '-title' ? 'Title | A → Z' : 'Title | Z → A')))));
 }

package/lib/components/Catalog/CatalogTableView/CatalogTableHeaderCell.js

@@ -41,9 +41,9 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const CaretDownIcon_1 = require("../../../icons/CaretDownIcon/CaretDownIcon");
 const CaretUpIcon_1 = require("../../../icons/CaretUpIcon/CaretUpIcon");
-const useCatalogTableHeaderCellActions_1 = require("../../../core/hooks/catalog/useCatalogTableHeaderCellActions");
+const hooks_1 = require("../../../core/hooks");
 const CatalogTableHeaderCell = ({ column, handleSortClick, isColumnSorted, setSortOption, }) => {
-    const { handleCellClick, sortKey, isUpActive, isDownActive } = (0, useCatalogTableHeaderCellActions_1.useCatalogTableHeaderCellActions)({
+    const { handleCellClick, sortKey, isUpActive, isDownActive } = (0, hooks_1.useCatalogTableHeaderCellActions)({
         column,
         handleSortClick,
         isColumnSorted,

package/lib/components/Catalog/CatalogTableView/CatalogTableViewRow.js

@@ -10,7 +10,7 @@ const CatalogOwnersCell_1 = require("../../../components/Catalog/CatalogTableVie
 const CatalogDomainsCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogDomainsCell");
 const CatalogEntityCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogEntityCell");
 const CatalogTagsCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogTagsCell");
-const useCatalogTableViewRow_1 = require("../../../core/hooks/catalog/useCatalogTableViewRow");
+const hooks_1 = require("../../../core/hooks");
 const CatalogEntityTypeTag_1 = require("../../../components/Catalog/CatalogEntityTypeTag");
 const Link_1 = require("../../Link/Link");
 const baseColumns = [
@@ -61,7 +61,7 @@ const baseColumns = [
     },
 ];
 const CatalogTableViewRow = ({ entity, entitiesCatalogConfig, catalogConfig, columns = baseColumns, }) => {
-    const { getEntityDetailsLink } = (0, useCatalogTableViewRow_1.useCatalogTableViewRow)({
+    const { getEntityDetailsLink } = (0, hooks_1.useCatalogTableViewRow)({
         entityKey: entity.key,
         entityType: entity.type,
         catalogConfig,

package/lib/components/Catalog/CatalogTagsWithTooltip.js

@@ -10,7 +10,10 @@ const constants_1 = require("../../core/constants");
 const Tag_1 = require("../../components/Tag/Tag");
 const Tooltip_1 = require("../../components/Tooltip/Tooltip");
 const CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
+const hooks_1 = require("../../core/hooks");
 function CatalogTagsWithTooltip({ items, itemsToShow = 1, showPlaceholder = true, tagProps, }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     if (!items || items.length === 0) {
         if (showPlaceholder) {
             return (react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" },
@@ -31,7 +34,8 @@ function CatalogTagsWithTooltip({ items, itemsToShow = 1, showPlaceholder = true
             react_1.default.createElement(MoreTagsButton, null,
                 "+",
                 remainingCount,
-                " more"))));
+                " ",
+                translate('catalog.tags.more', 'more')))));
 }
 const CatalogTagsWrapper = styled_components_1.default.div `
   display: flex;

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

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.catalogDarkMode = void 0;
 const styled_components_1 = require("styled-components");
 exports.catalogDarkMode = (0, styled_components_1.css) `
-  --catalog-avatar-bg-color: #3b3c45;
+  --catalog-avatar-bg-color: var(--color-warm-grey-4);
 `;
 //# sourceMappingURL=variables.dark.js.map

package/lib/components/Catalog/variables.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.catalog = void 0;
 const styled_components_1 = require("styled-components");
+/* eslint-disable theme/no-raw-colors-in-styles */
 exports.catalog = (0, styled_components_1.css) `
   /* === Catalog === */
   /**
@@ -99,7 +100,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);
 
@@ -286,7 +287,7 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-page-badge-line-height: var(--line-height-base);
 
   --catalog-page-badge-dot-size: 6px;
-  --catalog-page-badge-dot-border-color: #ffffff;
+  --catalog-page-badge-dot-border-color: var(--color-static-white);
 
   /**
     * @tokens Catalog table
@@ -407,8 +408,8 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-entity-relations-node-font-weight-root: 600;
 
   --catalog-entity-relations-node-root-bg-color: var(--color-blue-6);
-  --catalog-entity-relations-node-root-text-color: #ffffff;
-  --catalog-entity-relations-node-root-icon-color: #ffffff;
+  --catalog-entity-relations-node-root-text-color: var(--color-static-white);
+  --catalog-entity-relations-node-root-icon-color: var(--color-static-white);
   // @tokens End
 
   /**
@@ -429,4 +430,5 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-entity-relations-edge-label-line-height: 1.2;
   // @tokens End
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */
 //# sourceMappingURL=variables.js.map

package/lib/components/CatalogClassic/variables.js

@@ -102,7 +102,7 @@ exports.catalogClassic = (0, styled_components_1.css) `
   --catalog-classic-page-badge-line-height: var(--line-height-base);
 
   --catalog-classic-page-badge-dot-size: 6px;
-  --catalog-classic-page-badge-dot-border-color: #ffffff;
+  --catalog-classic-page-badge-dot-border-color: var(--color-static-white);
 
   // @tokens End
 `;

package/lib/components/CodeBlock/CodeBlock.js

@@ -92,7 +92,9 @@ function CodeBlock(_a) {
                     ? {
                         __html: highlightedCode,
                     }
-                    : undefined, suppressHydrationWarning // TODO: investigate issue
+                    : undefined, 
+                /* eslint-disable-next-line no-warning-comments */
+                suppressHydrationWarning // TODO: investigate issue
                 : true, "data-testid": dataTestId, hideCodeColors: hideCodeColors, maxHeight: codeBlockMaxHeight, wrapContents: wrapContents, tabIndex: 0 }, children),
             reportDialog.visible && (react_1.default.createElement(ReportDialog_1.ReportDialog, Object.assign({}, reportDialog.props, { location: sourceCode, lang: lang }))))));
 }

package/lib/components/CodeBlock/CodeBlockTabs.js

@@ -40,7 +40,7 @@ const hooks_1 = require("../../core/hooks");
 const Button_1 = require("../../components/Button/Button");
 const ChevronLeftIcon_1 = require("../../icons/ChevronLeftIcon/ChevronLeftIcon");
 const ChevronRightIcon_1 = require("../../icons/ChevronRightIcon/ChevronRightIcon");
-const get_file_icon_1 = require("../../core/utils/get-file-icon");
+const utils_1 = require("../../core/utils");
 function CodeBlockTabs({ tabs }) {
     const containerRef = (0, react_1.useRef)(null);
     const tabRefs = (0, react_1.useRef)([]);
@@ -62,9 +62,9 @@ function CodeBlockTabs({ tabs }) {
                 const { name, lang, id } = item;
                 const ext = (_a = name.match(/\.([^.]+)$/)) === null || _a === void 0 ? void 0 : _a[1];
                 const fileIcon = lang
-                    ? (0, get_file_icon_1.getFileIconByLanguage)(lang)
+                    ? (0, utils_1.getFileIconByLanguage)(lang)
                     : ext
-                        ? (0, get_file_icon_1.getFileIconByExt)(ext)
+                        ? (0, utils_1.getFileIconByExt)(ext)
                         : null;
                 return (react_1.default.createElement(Tab, { ref: (el) => {
                         tabRefs.current[i] = el;

package/lib/components/DatePicker/variables.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.datePicker = void 0;
 const styled_components_1 = require("styled-components");
+/* eslint-disable theme/no-raw-colors-in-styles */
 exports.datePicker = (0, styled_components_1.css) `
   --date-picker-nav-color: #000000;
   --date-picker-tile-bg-color: var(--color-blue-2);
@@ -21,4 +22,5 @@ exports.datePicker = (0, styled_components_1.css) `
   --date-picker-wrapper-radius: var(--border-radius-md);
   --date-picker-wrapper-padding: calc(var(--spacing-xxs) / 2) var(--spacing-xs);
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */ 
 //# sourceMappingURL=variables.js.map

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/Feedback/Mood.js

@@ -177,8 +177,8 @@ function Mood({ settings, onSubmit, className }) {
                         }
                     } }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
-                React.createElement(Button_1.Button, { onClick: onCancelMoodForm, variant: "text", size: "small" }, "Cancel"),
-                React.createElement(Button_1.Button, { type: "submit", variant: "secondary", size: "small" }, "Submit"))))));
+                React.createElement(Button_1.Button, { onClick: onCancelMoodForm, variant: "text", size: "small" }, translate('feedback.cancel', 'Cancel')),
+                React.createElement(Button_1.Button, { type: "submit", variant: "secondary", size: "small" }, translate('feedback.submit', 'Submit')))))));
 }
 const remapScore = (score) => {
     switch (score) {

package/lib/components/Feedback/Rating.js

@@ -122,8 +122,8 @@ function Rating({ settings, onSubmit, className }) {
                         }
                     } }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
-                React.createElement(Button_1.Button, { onClick: onCancelRatingForm, variant: "text", size: "small" }, "Cancel"),
-                React.createElement(Button_1.Button, { onClick: onSubmitRatingForm, variant: "secondary", size: "small" }, "Submit"))))));
+                React.createElement(Button_1.Button, { onClick: onCancelRatingForm, variant: "text", size: "small" }, translate('feedback.cancel', 'Cancel')),
+                React.createElement(Button_1.Button, { onClick: onSubmitRatingForm, variant: "secondary", size: "small" }, translate('feedback.submit', 'Submit')))))));
 }
 const StyledForm = styled_components_1.default.form `
   width: 100%;

package/lib/components/Filter/FilterDateRange.js

@@ -21,14 +21,14 @@ function FilterDateRange({ filter }) {
         react_1.default.createElement(FilterOptions_1.FilterOptions, null,
             react_1.default.createElement(DateRangeWrapper, null,
                 react_1.default.createElement(DateRangeRow, null,
-                    react_1.default.createElement("span", null, "From:"),
+                    react_1.default.createElement("span", null, translate('filter.dateRange.from', 'From:')),
                     react_1.default.createElement(DatePicker_1.DatePicker, { closeCalendar: true, format: "y-MM-dd", dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", value: from, maxDate: new Date(), onChange: (from) => {
                             if (Array.isArray(from))
                                 return;
                             filter.selectOption(Object.assign(Object.assign({}, filter.selectedOptions), { from: (0, utils_1.formatDateWithoutTimeZone)(from), to: (0, utils_1.formatDateWithoutTimeZone)(to) }));
                         } })),
                 react_1.default.createElement(DateRangeRow, null,
-                    react_1.default.createElement("span", null, "To:"),
+                    react_1.default.createElement("span", null, translate('filter.dateRange.to', 'To:')),
                     react_1.default.createElement(DatePicker_1.DatePicker, { closeCalendar: true, dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", format: "y-MM-dd", minDate: from, value: to, onChange: (to) => {
                             if (Array.isArray(to))
                                 return;

package/lib/components/Filter/FilterSelect.js

@@ -35,7 +35,11 @@ function FilterSelect({ filter, filterValuesCasing, showCounter = true, }) {
     ];
     return (react_1.default.createElement(FilterSelectWrapper, { "data-component-name": "Filter/FilterSelect" },
         react_1.default.createElement(FilterTitle_1.FilterTitle, { "data-translation-key": filter.titleTranslationKey }, translate(filter.titleTranslationKey, filter.title)),
-        react_1.default.createElement(StyledSelect, { value: ((_a = filter.selectedOptions.values().next()) === null || _a === void 0 ? void 0 : _a.value) || '', onChange: (value) => filter.selectOption(value), options: selectOptions })));
+        react_1.default.createElement(StyledSelect
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        , { 
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            value: ((_a = filter.selectedOptions.values().next()) === null || _a === void 0 ? void 0 : _a.value) || '', onChange: (value) => filter.selectOption(value), options: selectOptions })));
 }
 const FilterSelectWrapper = styled_components_1.default.div `
   display: flex;

package/lib/components/Link/Link.d.ts

@@ -10,5 +10,6 @@ export type LinkProps = {
     languageInsensitive?: boolean;
     onClick?: () => void;
     [key: string]: unknown;
+    rel?: string;
 };
 export declare function Link(props: React.PropsWithChildren<LinkProps>): JSX.Element;

package/lib/components/Loaders/Loading.js

@@ -8,6 +8,7 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
 const Spinner_1 = require("../../icons/Spinner/Spinner");
+const hooks_1 = require("../../core/hooks");
 const LoadingMessage = styled_components_1.default.div `
   font-family: helvetica, sans, sans-serif;
   width: 100%;
@@ -17,8 +18,10 @@ const LoadingMessage = styled_components_1.default.div `
   color: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
 `;
 function Loading({ color }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     return (react_1.default.createElement("div", { style: { textAlign: 'center' } },
-        react_1.default.createElement(LoadingMessage, { color: color }, "Loading ..."),
+        react_1.default.createElement(LoadingMessage, { color: color }, translate('loaders.loading', 'Loading...')),
         react_1.default.createElement(Spinner_1.Spinner, { color: color })));
 }
 //# sourceMappingURL=Loading.js.map

package/lib/components/Markdown/Markdown.js

@@ -36,9 +36,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Markdown = void 0;
 const styled_components_1 = __importStar(require("styled-components"));
 const utils_1 = require("../../core/utils");
-const baseTable_1 = require("../../components/Markdown/styles/baseTable");
+const base_table_1 = require("../../components/Markdown/styles/base-table");
 const links_1 = require("../../components/Markdown/styles/links");
-const headingAnchor_1 = require("../../components/Markdown/styles/headingAnchor");
+const heading_anchor_1 = require("../../components/Markdown/styles/heading-anchor");
 exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
     'data-component-name': 'Markdown/Markdown',
     className,
@@ -133,7 +133,7 @@ exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
     }
   }
 
-  ${baseTable_1.markdownBaseTableCss};
+  ${base_table_1.markdownBaseTableCss};
 
   p {
     margin: var(--md-paragraph-margin);
@@ -142,37 +142,37 @@ exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
   h1.md {
     ${(0, utils_1.typography)('h1')};
     margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
-    ${(0, headingAnchor_1.headingAnchorCss)()};
+    ${(0, heading_anchor_1.headingAnchorCss)()};
   }
 
   h2.md {
     ${(0, utils_1.typography)('h2')};
     margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;
-    ${(0, headingAnchor_1.headingAnchorCss)()};
+    ${(0, heading_anchor_1.headingAnchorCss)()};
   }
 
   h3.md {
     ${(0, utils_1.typography)('h3')};
     margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;
-    ${(0, headingAnchor_1.headingAnchorCss)()};
+    ${(0, heading_anchor_1.headingAnchorCss)()};
   }
 
   h4.md {
     ${(0, utils_1.typography)('h4')};
     margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;
-    ${(0, headingAnchor_1.headingAnchorCss)()};
+    ${(0, heading_anchor_1.headingAnchorCss)()};
   }
 
   h5.md {
     ${(0, utils_1.typography)('h5')};
     margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;
-    ${(0, headingAnchor_1.headingAnchorCss)()};
+    ${(0, heading_anchor_1.headingAnchorCss)()};
   }
 
   h6.md {
     ${(0, utils_1.typography)('h6')};
     margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;
-    ${(0, headingAnchor_1.headingAnchorCss)()};
+    ${(0, heading_anchor_1.headingAnchorCss)()};
   }
 
   h1.md code {

package/lib/components/Markdown/styles/{baseTable.js → base-table.js}

@@ -65,4 +65,4 @@ exports.markdownBaseTableCss = (0, styled_components_1.css) `
     }
   }
 `;
-//# sourceMappingURL=baseTable.js.map
+//# sourceMappingURL=base-table.js.map

package/lib/components/Markdown/styles/{headingAnchor.js → heading-anchor.js}

@@ -32,4 +32,4 @@ function headingAnchorCss(className = 'anchor') {
     }
   `;
 }
-//# sourceMappingURL=headingAnchor.js.map
+//# sourceMappingURL=heading-anchor.js.map

package/lib/components/Menu/MenuItem.js

@@ -80,8 +80,12 @@ 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 httpColor = (0, utils_1.getOperationColor)({
+        isAdditionalOperation: item.isAdditionalOperation,
+        deprecated: item.deprecated,
+        httpVerb: 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", "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/OpenApiDocs/hooks/AdditionalOverviewInfo.js

@@ -7,5 +7,6 @@ exports.AdditionalOverviewInfo = void 0;
 // export function AdditionalOverviewInfo(_props: AdditionalOverviewInfoProps) {
 //   return null;
 // }
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 exports.AdditionalOverviewInfo = null;
 //# sourceMappingURL=AdditionalOverviewInfo.js.map

package/lib/components/OpenApiDocs/hooks/AfterOpenApiDescription.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AfterOpenApiDescription = void 0;
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 exports.AfterOpenApiDescription = null;
 //# sourceMappingURL=AfterOpenApiDescription.js.map

package/lib/components/OpenApiDocs/hooks/AfterOpenApiOperation.js

@@ -7,5 +7,6 @@ exports.AfterOpenApiOperation = void 0;
 // export function AfterOpenApiOperation(_props: AfterOpenAPIOperationProps) {
 //   return null;
 // }
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 exports.AfterOpenApiOperation = null;
 //# sourceMappingURL=AfterOpenApiOperation.js.map

package/lib/components/OpenApiDocs/hooks/AfterOpenApiTitle.js

@@ -7,5 +7,6 @@ exports.AfterOpenApiTitle = void 0;
 // export function AfterOpenApiTitle(_props: AfterOpenApiTitleProps) {
 //   return null;
 // }
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 exports.AfterOpenApiTitle = null;
 //# sourceMappingURL=AfterOpenApiTitle.js.map

package/lib/components/OpenApiDocs/hooks/BeforeOpenApiOperation.js

@@ -7,5 +7,6 @@ exports.BeforeOpenApiOperation = void 0;
 // export function BeforeOpenApiOperation(_props: BeforeOpenAPIOperationProps) {
 //   return null;
 // }
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 exports.BeforeOpenApiOperation = null;
 //# sourceMappingURL=BeforeOpenApiOperation.js.map

package/lib/components/OpenApiDocs/hooks/OpenApiFooter.js

@@ -1,8 +1,9 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpenApiFooter = void 0;
 // export function OpenApiFooter() {
 //   return null;
 // }
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OpenApiFooter = void 0;
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 exports.OpenApiFooter = null;
 //# sourceMappingURL=OpenApiFooter.js.map

package/lib/components/OpenApiDocs/hooks/OpenApiHeader.js

@@ -1,8 +1,9 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpenApiHeader = void 0;
 // export function OpenApiHeader() {
 //   return null;
 // }
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OpenApiHeader = void 0;
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 exports.OpenApiHeader = null;
 //# sourceMappingURL=OpenApiHeader.js.map

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

@@ -47,6 +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)(() => {
@@ -96,7 +97,7 @@ function SearchFilterFieldSelect({ facet, filter, query, selectedValues, onChang
             ? 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, "Search to show more items...")) : null, onSearch: onSearch, checkmarkIconPosition: "start" }));
+            : 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" }));
 }
 const FilterSelectOptionWrapper = styled_components_1.default.div `
   width: 100%;