@redocly/theme 0.81.2-rc.1 → 0.82.1-rc.1

package/lib/components/Breadcrumbs/Breadcrumb.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type BreadcrumbProps = {
     label: string;
     link?: string;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type EditPageButtonProps = {
     to: string;
 };

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { CatalogConfig } from '../../config';
 export default function Catalog(props: {
     pageProps: {

package/lib/components/Catalog/CatalogActions.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedFilter } from '../../core/types';
 type CatalogActionsProps = {
     onOpenFilter: () => void;

package/lib/components/Catalog/CatalogCard.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { CatalogItem } from '../../core/types';
 type CatalogCardProps = {
     item: CatalogItem;

package/lib/components/Catalog/CatalogInfoBlock.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type CatalogInfoBlockProps = {
     metadata?: {
         scorecardLevel?: string;

package/lib/components/CodeBlock/CodeBlockTabs.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { FileTabs } from '../../components/CodeBlock/CodeBlock';
 type CodeBlockTabsProps = {
     tabs: FileTabs;

package/lib/components/CodeBlock/variables.js

@@ -36,7 +36,7 @@ exports.code = (0, styled_components_1.css) `
   --code-block-bg-color: var(--layer-color); // @presenter Color
   --code-block-padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-sm);
   --code-block-margin: 0;
-  --code-block-max-height: calc(100vh - 260px); // Where 260 is combined value of navbar, code block heading, controls height and paddings
+  --code-block-max-height: calc(100vh - 300px); // Where 300 is combined value of navbar, code block heading, controls height and paddings
   --code-block-word-break: initial;
 
   /**

package/lib/components/ColorModeSwitcher/ColorModeSwitcher.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type ColorModeSwitcherProps = {
     className?: string;
 };

package/lib/components/Dropdown/Dropdown.js

@@ -53,7 +53,7 @@ function Dropdown({ children, className, active, trigger, triggerEvent = 'click'
     };
     (0, hooks_1.useOutsideClick)(dropdownRef, handleClose);
     const triggerChild = react_1.default.Children.only(trigger);
-    const dropdownTrigger = (0, react_1.cloneElement)(triggerChild, 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, iconPosition: withArrow ? 'right' : undefined, tabIndex: 0 }, triggerChild.props), { onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined }));
+    const dropdownTrigger = (0, react_1.cloneElement)(triggerChild, Object.assign(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' } : {})), { tabIndex: 0 }), 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 }),
         dropdownTrigger,
         isOpen && (react_1.default.createElement(ChildrenWrapper, { placement: placement, alignment: alignment, onClick: closeOnClick ? handleClose : undefined }, children))));

package/lib/components/Feedback/Comment.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type CommentProps = {
     onSubmit: (value: {
         comment: string;

package/lib/components/Feedback/Mood.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare enum MOOD_STATES {
     SATISFIED = "satisfied",
     NEUTRAL = "neutral",

package/lib/components/Feedback/Rating.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const FEEDBACK_MAX_RATING = 5;
 export type RatingProps = {
     onSubmit: (value: {

package/lib/components/Feedback/Reasons.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type ReasonsProps = {
     onChange: (value: string[]) => void;
     settings: {

package/lib/components/Feedback/ReportDialog.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { SubmitFeedbackParams } from '../../core/types';
 export type ReportDialogProps = {
     location: string;

package/lib/components/Feedback/Scale.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const MAX_SCALE = 10;
 export type ScaleProps = {
     onSubmit: (value: {

package/lib/components/Feedback/Sentiment.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type SentimentProps = {
     onSubmit: (value: {
         score: number;

package/lib/components/Feedback/Stars.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type StarsProps = {
     max?: number;
     name?: string;

package/lib/components/Filter/Filter.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { FilterProps } from '../../core/types';
 export declare function Filter({ filter, filterValuesCasing }: FilterProps): JSX.Element | null;

package/lib/components/Filter/FilterCheckboxes.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { FilterProps } from '../../core/types';
 export declare function FilterCheckboxes({ filter, filterValuesCasing }: FilterProps): JSX.Element;

package/lib/components/Filter/FilterContent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedFilter } from '../../core/types';
 import type { ThemeConfig } from '../../config';
 type FilterContentProps = {

package/lib/components/Filter/FilterDateRange.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { FilterProps } from '../../core/types';
 export declare function FilterDateRange({ filter }: FilterProps): JSX.Element;

package/lib/components/Filter/FilterInput.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type FilterInputProps = {
     value: string;
     onChange: (newValue: string) => void;

package/lib/components/Filter/FilterPopover.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedFilter } from '../../core/types';
 import type { ThemeConfig } from '../../config';
 type FilterPopoverProps = {

package/lib/components/Filter/FilterSelect.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { FilterProps } from '../../core/types';
 export declare function FilterSelect({ filter, filterValuesCasing }: FilterProps): JSX.Element;

package/lib/components/Footer/Footer.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type FooterProps = {
     className?: string;
 };

package/lib/components/Footer/FooterColumn.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedNavItem } from '@redocly/config';
 type FooterColumnProps = {
     column: ResolvedNavItem;

package/lib/components/Footer/FooterCopyright.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type FooterCopyrightProps = {
     copyrightText: string;
     className?: string;

package/lib/components/Footer/FooterItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedNavItem } from '@redocly/config';
 type FooterItemProps = {
     item: ResolvedNavItem;

package/lib/components/LanguagePicker/LanguagePicker.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type LanguagePickerProps = {
     onChangeLanguage: (newLang: string) => void;
     onlyIcon?: boolean;

package/lib/components/LastUpdated/LastUpdated.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const FORMATS: {
     timeago: (date: Date, locale: string) => string;
     iso: (date: Date) => string;

package/lib/components/Loading/Loading.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface LoadingProps {
     color: string;
 }

package/lib/components/Logo/Logo.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { LogoConfig } from '../../core/types';
 type LogoProps = {
     config: LogoConfig;

package/lib/components/Menu/Menu.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { DrilldownMenuItemDetails, ItemState } from '../../core/types';
 type MenuListProps = {
     items: ItemState[];

package/lib/components/Menu/MenuMobile.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type MobileMenuProps = {
     className?: string;
     hideUserProfile?: boolean;

package/lib/components/Navbar/Navbar.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type NavbarProps = {
     className?: string;
 };

package/lib/components/Navbar/NavbarItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedNavItem } from '@redocly/config';
 type NavbarItemProps = {
     navItem: ResolvedNavItem;

package/lib/components/Navbar/NavbarMenu.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedConfigLinks } from '@redocly/config';
 type NavbarMenuProps = {
     menuItems: ResolvedConfigLinks;

package/lib/components/PageNavigation/NextButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedNavItemWithLink } from '@redocly/config';
 type NextPageType = {
     nextPage?: ResolvedNavItemWithLink | null;

package/lib/components/PageNavigation/PageNavigation.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedNavItemWithLink } from '@redocly/config';
 type PageNavigationType = {
     nextPage?: ResolvedNavItemWithLink | null;

package/lib/components/PageNavigation/PreviousButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedNavItemWithLink } from '@redocly/config';
 type PreviousPageType = {
     prevPage?: ResolvedNavItemWithLink | null;

package/lib/components/Product/Product.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ProductConfig } from '../../config';
 type ProductProps = {
     product: ProductConfig;

package/lib/components/Product/ProductPicker.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare function ProductPicker(): JSX.Element | null;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type SearchProps = {
     className?: string;
 };

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type SearchDialogProps = {
     onClose: () => void;
     className?: string;

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

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare function highlight(text: string | string[]): JSX.Element | string;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { SearchDocument } from '../../core/types';
 type ActiveItem<T> = T & {
     active?: boolean;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type SearchRecentProps = {
     onSelect: (value: string) => void;
     className?: string;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type SearchShortcutProps = {
     combination: string;
     text: string;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type SearchSuggestedPagesProps = {
     className?: string;
 };

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type SearchTriggerProps = {
     onClick: () => void;
     className?: string;

package/lib/components/SidebarActions/ChangeViewButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { LayoutVariant } from '../../components/SidebarActions/SidebarActions';
 interface ChangeViewButtonProps {
     layout: LayoutVariant;

package/lib/components/SidebarLogo/SidebarLogo.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface LogoProps {
     imageUrl?: string;
     href?: string;

package/lib/components/TableOfContent/TableOfContent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { MdHeading } from '../../core/types';
 type TableOfContentProps = {
     headings?: Array<MdHeading | null> | null | undefined;

package/lib/components/UserMenu/LoginButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type LoginButtonProps = {
     href: string;
     className?: string;

package/lib/components/UserMenu/LogoutMenuItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type LogoutMenuItemProps = {
     iconOnly?: boolean;
     className?: string;

package/lib/components/UserMenu/UserAvatar.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type UserAvatarProps = {
     picture?: string;
     className?: string;

package/lib/components/UserMenu/UserInfoMenuItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type UserInfoMenuItemProps = {
     name: string;
     email?: string;

package/lib/components/UserMenu/UserMenuMobile.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type UserMenuMobileProps = {
     className?: string;
 };

package/lib/core/hooks/__mocks__/index.d.ts

@@ -1,6 +1,7 @@
 export * from '../../../core/hooks/__mocks__/use-theme-config';
 export * from '../../../core/hooks/__mocks__/use-theme-hooks';
 export * from '../../../core/hooks/__mocks__/use-mobile-menu';
+export * from '../../../core/hooks/__mocks__/use-controlled-state';
 export * from '../../../core/hooks/__mocks__/search/use-recent-searches';
 export * from '../../../core/hooks/__mocks__/search/use-suggested-pages';
 export * from '../../../core/hooks/menu/__mocks__/use-mobile-menu-items';

package/lib/core/hooks/__mocks__/index.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../../core/hooks/__mocks__/use-theme-config"), exports);
 __exportStar(require("../../../core/hooks/__mocks__/use-theme-hooks"), exports);
 __exportStar(require("../../../core/hooks/__mocks__/use-mobile-menu"), exports);
+__exportStar(require("../../../core/hooks/__mocks__/use-controlled-state"), exports);
 __exportStar(require("../../../core/hooks/__mocks__/search/use-recent-searches"), exports);
 __exportStar(require("../../../core/hooks/__mocks__/search/use-suggested-pages"), exports);
 __exportStar(require("../../../core/hooks/menu/__mocks__/use-mobile-menu-items"), exports);

package/lib/core/hooks/__mocks__/use-controlled-state.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="jest" />
+export declare const useControlledState: () => (boolean | jest.Mock<any, any, any>)[];

package/lib/core/hooks/__mocks__/use-controlled-state.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useControlledState = void 0;
+const useControlledState = () => [false, jest.fn()];
+exports.useControlledState = useControlledState;
+//# sourceMappingURL=use-controlled-state.js.map

package/lib/core/hooks/menu/use-menu-item-expanded.js

@@ -18,6 +18,7 @@ function useMenuItemExpanded(item) {
         setIsExpanded(newValue);
         setControlledValue(newValue);
         // we have different sensitivity to changes for items from openapi-docs sidebar and for items from portal sidebar
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [!item.modified ? item : item.active, item.hasActiveSubItem, item.expanded]);
     return [isExpanded, setControlledValue];
 }

package/lib/core/hooks/use-codeblock-tabs-controls.js

@@ -10,7 +10,9 @@ function useCodeBlockTabsControls({ tabs, containerRef, tabRefs }) {
         return ((_a = tabRefs === null || tabRefs === void 0 ? void 0 : tabRefs.current) === null || _a === void 0 ? void 0 : _a.reduce((acc, tabRef) => {
             return tabRef ? acc + tabRef.offsetWidth : acc;
         }, 0)) || 0;
-    }, [(_a = tabRefs === null || tabRefs === void 0 ? void 0 : tabRefs.current) === null || _a === void 0 ? void 0 : _a.length]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [(_a = tabRefs === null || tabRefs === void 0 ? void 0 : tabRefs.current) === null || _a === void 0 ? void 0 : _a.length]);
     const { currentIndex, isFirstTab, isLastTab } = (0, react_1.useMemo)(() => {
         const currentIndex = tabs.files.findIndex((file) => file.name === tabs.activeTabName);
         return {
@@ -18,30 +20,35 @@ function useCodeBlockTabsControls({ tabs, containerRef, tabRefs }) {
             isFirstTab: currentIndex === 0,
             isLastTab: currentIndex === tabs.files.length - 1,
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [tabs]);
     (0, react_1.useEffect)(() => {
         if (containerRef.current) {
+            const container = containerRef.current;
             const resizeObserver = new ResizeObserver((entries) => {
                 const containerWidth = entries[0].contentRect.width;
                 setShowControls(tabsWidth > containerWidth);
             });
-            resizeObserver.observe(containerRef.current);
+            resizeObserver.observe(container);
             return () => {
-                resizeObserver.unobserve(containerRef.current);
+                resizeObserver.unobserve(container);
             };
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [containerRef.current]);
     const handlePrevTab = (0, react_1.useCallback)(() => {
         if (!isFirstTab) {
             const prevTab = tabs.files[currentIndex - 1].name;
             tabs.handleTabSwitch(prevTab);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currentIndex]);
     const handleNextTab = (0, react_1.useCallback)(() => {
         if (!isLastTab) {
             const nextTab = tabs.files[currentIndex + 1].name;
             tabs.handleTabSwitch(nextTab);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currentIndex]);
     return { showControls, handlePrevTab, handleNextTab };
 }

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

@@ -31,6 +31,7 @@ function useSearch() {
     const onOpen = (0, react_1.useCallback)(function () {
         telemetry.send('search_opened', { method: 'click' });
         setIsOpen(true);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const onClose = (0, react_1.useCallback)(() => {
         setIsOpen(false);

package/lib/core/styles/global.js

@@ -956,26 +956,18 @@ const pages = (0, styled_components_1.css) `
   // @tokens End
 `;
 const error = (0, styled_components_1.css) `
-  --error-bubble-padding: var(--spacing-md);
-  --error-bubble-bottom: var(--spacing-xl);
-  --error-bubble-left: var(--spacing-xl);
-  --error-bubble-max-width: 20%;
-  --error-bubble-mobile-max-width: 50%;
-  --error-bubble-text-overflow: ellipsis;
-  --error-bubble-gap: var(--spacing-base);
+  --error-bubble-padding: var(--spacing-sm);
+  --error-bubble-gap: var(--spacing-xxs);
   --error-bubble-font-family: var(--font-family-base);
+  --error-bubble-font-size: var(--font-size-base);
   --error-bubble-z-index: var(--z-index-popover);
+  --error-bubble-bg-color: var(--color-raspberry-1);
+  --error-bubble-bg-color-hover: var(--color-raspberry-2);
+  --error-bubble-bg-color-pressed: var(--color-raspberry-3);
+  --error-bubble-content-color: var(--color-raspberry-6);
+  --error-bubble-content-color-hover: var(--color-raspberry-6);
+  --error-bubble-content-color-pressed: var(--color-raspberry-6);
 
-  --error-card-border-radius: calc(var(--spacing-xxs) * 1.5);
-  --error-card-bg-color: var(--bg-color-raised);
-  --error-card-padding: var(--spacing-xs) var(--spacing-base);
-  --error-card-text-color: var(--text-color-primary);
-  --error-card-font-size: var(--font-size-base);
-  --error-card-font-style: normal;
-  --error-card-font-weight: var(--font-weight-regular);
-  --error-card-line-height: var(--line-height-base);
-  --error-card-box-shadow: var(--bg-raised-shadow);
-  --error-card-icon-margin: 0 var(--spacing-xs) 0 0;
 
   --detailed-error-overlay-bg-color: #4f4f4f;
   --detailed-error-overlay-opacity: 0.9;

package/lib/layouts/Forbidden.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare function Forbidden(): JSX.Element;

package/lib/layouts/NotFound.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare function NotFound(): JSX.Element;

package/lib/layouts/OIDCForbidden.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare function OIDCForbidden(): JSX.Element;

package/lib/markdoc/components/Mermaid/Mermaid.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type MermaidProps = {
     diagramHtml: string;
     'data-source'?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.81.2-rc.1",
+  "version": "0.82.1-rc.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -56,8 +56,8 @@
     "@types/lodash.throttle": "4.1.9",
     "@types/node": "18.19.3",
     "@types/prismjs": "1.26.3",
-    "@types/react": "18.2.45",
-    "@types/react-dom": "18.2.17",
+    "@types/react": "18.2.79",
+    "@types/react-dom": "18.2.25",
     "@types/styled-components": "5.1.34",
     "@types/styled-system": "5.1.22",
     "@types/nprogress": "^0.2.0",
@@ -98,7 +98,7 @@
     "timeago.js": "^4.0.2",
     "i18next": "^22.4.12",
     "nprogress": "^0.2.0",
-    "@redocly/config": "0.4.0"
+    "@redocly/config": "0.5.0"
   },
   "scripts": {
     "start": "npm-run-all --parallel storybook storybook:tokens:watch",

package/src/components/CodeBlock/variables.ts

@@ -34,7 +34,7 @@ export const code = css`
   --code-block-bg-color: var(--layer-color); // @presenter Color
   --code-block-padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-sm);
   --code-block-margin: 0;
-  --code-block-max-height: calc(100vh - 260px); // Where 260 is combined value of navbar, code block heading, controls height and paddings
+  --code-block-max-height: calc(100vh - 300px); // Where 300 is combined value of navbar, code block heading, controls height and paddings
   --code-block-word-break: initial;
 
   /**

package/src/components/Dropdown/Dropdown.tsx

@@ -63,7 +63,7 @@ export function Dropdown({
   const dropdownTrigger = cloneElement(triggerChild, {
     onClick: triggerEvent === 'click' ? handleToggle : undefined,
     icon: withArrow ? isOpen ? <ChevronUpIcon /> : <ChevronDownIcon /> : undefined,
-    iconPosition: withArrow ? 'right' : undefined,
+    ...(withArrow ? { iconPosition: 'right' } : {}),
     tabIndex: 0,
     ...triggerChild.props,
     onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined,

package/src/core/hooks/__mocks__/index.ts

@@ -1,6 +1,7 @@
 export * from '@redocly/theme/core/hooks/__mocks__/use-theme-config';
 export * from '@redocly/theme/core/hooks/__mocks__/use-theme-hooks';
 export * from '@redocly/theme/core/hooks/__mocks__/use-mobile-menu';
+export * from '@redocly/theme/core/hooks/__mocks__/use-controlled-state';
 export * from '@redocly/theme/core/hooks/__mocks__/search/use-recent-searches';
 export * from '@redocly/theme/core/hooks/__mocks__/search/use-suggested-pages';
 export * from '@redocly/theme/core/hooks/menu/__mocks__/use-mobile-menu-items';

package/src/core/hooks/__mocks__/use-controlled-state.ts

@@ -0,0 +1 @@
+export const useControlledState = () => [false, jest.fn()];

package/src/core/hooks/menu/use-menu-item-expanded.ts

@@ -24,6 +24,7 @@ export function useMenuItemExpanded(item: ItemState): [boolean, Dispatch<SetStat
     setIsExpanded(newValue);
     setControlledValue(newValue);
     // we have different sensitivity to changes for items from openapi-docs sidebar and for items from portal sidebar
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [!item.modified ? item : item.active, item.hasActiveSubItem, item.expanded]);
 
   return [isExpanded, setControlledValue];

package/src/core/hooks/use-codeblock-tabs-controls.ts

@@ -16,6 +16,7 @@ export function useCodeBlockTabsControls({ tabs, containerRef, tabRefs }: CodeBl
       tabRefs?.current?.reduce((acc, tabRef) => {
         return tabRef ? acc + tabRef.offsetWidth : acc;
       }, 0) || 0,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [tabRefs?.current?.length],
   );
 
@@ -26,22 +27,25 @@ export function useCodeBlockTabsControls({ tabs, containerRef, tabRefs }: CodeBl
       isFirstTab: currentIndex === 0,
       isLastTab: currentIndex === tabs.files.length - 1,
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tabs]);
 
   useEffect(() => {
     if (containerRef.current) {
+      const container = containerRef.current;
       const resizeObserver = new ResizeObserver((entries) => {
         const containerWidth = entries[0].contentRect.width;
 
         setShowControls(tabsWidth > containerWidth);
       });
 
-      resizeObserver.observe(containerRef.current);
+      resizeObserver.observe(container);
 
       return () => {
-        resizeObserver.unobserve(containerRef.current as HTMLDivElement);
+        resizeObserver.unobserve(container as HTMLDivElement);
       };
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [containerRef.current]);
 
   const handlePrevTab = useCallback(() => {
@@ -49,6 +53,7 @@ export function useCodeBlockTabsControls({ tabs, containerRef, tabRefs }: CodeBl
       const prevTab = tabs.files[currentIndex - 1].name;
       tabs.handleTabSwitch(prevTab);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentIndex]);
 
   const handleNextTab = useCallback(() => {
@@ -56,6 +61,7 @@ export function useCodeBlockTabsControls({ tabs, containerRef, tabRefs }: CodeBl
       const nextTab = tabs.files[currentIndex + 1].name;
       tabs.handleTabSwitch(nextTab);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentIndex]);
 
   return { showControls, handlePrevTab, handleNextTab };

package/src/core/hooks/use-search.ts

@@ -29,6 +29,7 @@ export function useSearch() {
   const onOpen = useCallback(function () {
     telemetry.send('search_opened', { method: 'click' });
     setIsOpen(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const onClose = useCallback(() => {

package/src/core/styles/global.ts

@@ -970,26 +970,18 @@ const pages = css`
 `;
 
 const error = css`
-  --error-bubble-padding: var(--spacing-md);
-  --error-bubble-bottom: var(--spacing-xl);
-  --error-bubble-left: var(--spacing-xl);
-  --error-bubble-max-width: 20%;
-  --error-bubble-mobile-max-width: 50%;
-  --error-bubble-text-overflow: ellipsis;
-  --error-bubble-gap: var(--spacing-base);
+  --error-bubble-padding: var(--spacing-sm);
+  --error-bubble-gap: var(--spacing-xxs);
   --error-bubble-font-family: var(--font-family-base);
+  --error-bubble-font-size: var(--font-size-base);
   --error-bubble-z-index: var(--z-index-popover);
+  --error-bubble-bg-color: var(--color-raspberry-1);
+  --error-bubble-bg-color-hover: var(--color-raspberry-2);
+  --error-bubble-bg-color-pressed: var(--color-raspberry-3);
+  --error-bubble-content-color: var(--color-raspberry-6);
+  --error-bubble-content-color-hover: var(--color-raspberry-6);
+  --error-bubble-content-color-pressed: var(--color-raspberry-6);
 
-  --error-card-border-radius: calc(var(--spacing-xxs) * 1.5);
-  --error-card-bg-color: var(--bg-color-raised);
-  --error-card-padding: var(--spacing-xs) var(--spacing-base);
-  --error-card-text-color: var(--text-color-primary);
-  --error-card-font-size: var(--font-size-base);
-  --error-card-font-style: normal;
-  --error-card-font-weight: var(--font-weight-regular);
-  --error-card-line-height: var(--line-height-base);
-  --error-card-box-shadow: var(--bg-raised-shadow);
-  --error-card-icon-margin: 0 var(--spacing-xs) 0 0;
 
   --detailed-error-overlay-bg-color: #4f4f4f;
   --detailed-error-overlay-opacity: 0.9;