@redocly/theme 0.62.0-next.6 → 0.62.0-next.7

package/lib/components/Breadcrumbs/Breadcrumb.js

@@ -51,7 +51,7 @@ function Breadcrumb({ label, link, isActive, onClick, icon }) {
         react_1.default.createElement(BreadcrumbIcon_1.BreadcrumbIcon, { icon: icon }),
         displayLabel));
     const breadcrumbContent = link ? (react_1.default.createElement(BreadcrumbLink, { "data-component-name": "Breadcrumbs/BreadcrumbLink", to: link, onClick: onClick, "$isActive": isActive }, content)) : (react_1.default.createElement(BreadcrumbWrapper, { "data-component-name": "Breadcrumbs/BreadcrumbWrapper", "$isActive": isActive, onClick: onClick, tabIndex: -1 }, content));
-    return isTruncated ? (react_1.default.createElement(Tooltip_1.TooltipComponent, { tip: label, placement: "bottom", width: "max-content" }, breadcrumbContent)) : (breadcrumbContent);
+    return isTruncated ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: label, placement: "bottom" }, breadcrumbContent)) : (breadcrumbContent);
 }
 const baseBreadcrumbStyles = `
   display: flex;

package/lib/components/Breadcrumbs/BreadcrumbDropdown.js

@@ -55,7 +55,7 @@ function BreadcrumbDropdown({ children, label, items, onItemClick, className, })
         return null;
     }
     const isTruncated = label.length > constants_1.BREADCRUMB_MAX_LENGTH;
-    const triggerContent = isTruncated ? (react_1.default.createElement(Tooltip_1.TooltipComponent, { tip: label, placement: "bottom", width: "max-content" },
+    const triggerContent = isTruncated ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: label, placement: "bottom" },
         react_1.default.createElement(TriggerContentWrapper, null, children))) : (children);
     const trigger = react_1.default.createElement(StyledDropdownTrigger, null, triggerContent);
     return (react_1.default.createElement(BreadcrumbDropdownWrapper, { "data-component-name": "Breadcrumbs/BreadcrumbDropdown", className: className, "data-testid": "breadcrumb-dropdown" },

package/lib/components/Catalog/CatalogTagsWithTooltip.js

@@ -27,7 +27,7 @@ function CatalogTagsWithTooltip({ items, itemsToShow = 1, showPlaceholder = true
     }
     const displayedItems = items.slice(0, itemsToShow);
     const remainingCount = items.length - itemsToShow;
-    return (react_1.default.createElement(Tooltip_1.TooltipComponent, { tip: items.join(', '), placement: "bottom", className: "catalog", width: "400px" },
+    return (react_1.default.createElement(Tooltip_1.Tooltip, { tip: items.join(', '), placement: "bottom", className: "catalog", width: "400px" },
         react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" },
             displayedItems.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, { textTransform: "none", maxLength: constants_1.CATALOG_TAG_MAX_LENGTH }),
                 react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, item)))),

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -8,7 +8,7 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CodeBlockTabs_1 = require("../../components/CodeBlock/CodeBlockTabs");
 const CopyButton_1 = require("../../components/Buttons/CopyButton");
-const TooltipWrapper_1 = require("../../components/Tooltip/TooltipWrapper");
+const Tooltip_1 = require("../../components/Tooltip/Tooltip");
 const hooks_1 = require("../../core/hooks");
 const DeselectIcon_1 = require("../../icons/DeselectIcon/DeselectIcon");
 const MaximizeIcon_1 = require("../../icons/MaximizeIcon/MaximizeIcon");
@@ -38,15 +38,15 @@ function CodeBlockControls({ children, className, title, controls, tabs, dropdow
         tabs && react_1.default.createElement(CodeBlockTabs_1.CodeBlockTabs, { tabs: tabs }),
         react_1.default.createElement(ControlsWrapper, null,
             dropdown && react_1.default.createElement(CodeBlockDropdown_1.CodeBlockDropdown, Object.assign({}, dropdown)),
-            report && !report.hidden && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tip: translate('codeSnippet.report.tooltipText', 'Report a problem'), placement: "top" },
+            report && !report.hidden && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('codeSnippet.report.tooltipText', 'Report a problem'), placement: "top", arrowPosition: "right" },
                 react_1.default.createElement(ControlButton, Object.assign({ variant: "text", size: "small", "data-testid": "report-button", icon: controlsType === 'icon' ? react_1.default.createElement(WarningSquareIcon_1.WarningSquareIcon, { size: "18px" }) : undefined }, report.props), controlsType != 'icon' && (((_b = report.props) === null || _b === void 0 ? void 0 : _b.buttonText) || 'Report')))) : null,
-            expand && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tip: translate('codeSnippet.expand.tooltipText', 'Expand all'), placement: "top" },
+            expand && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('codeSnippet.expand.tooltipText', 'Expand all'), placement: "top", arrowPosition: "right" },
                 react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "expand-all", icon: controlsType === 'icon' ? react_1.default.createElement(MaximizeIcon_1.MaximizeIcon, null) : undefined, onClick: expand === null || expand === void 0 ? void 0 : expand.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Expand all')))) : null,
-            collapse && !((_d = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _d === void 0 ? void 0 : _d.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tip: translate('codeSnippet.collapse.tooltipText', 'Collapse all'), placement: "top" },
+            collapse && !((_d = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _d === void 0 ? void 0 : _d.hide) ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('codeSnippet.collapse.tooltipText', 'Collapse all'), placement: "top", arrowPosition: "right" },
                 react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "collapse-all", icon: controlsType === 'icon' ? react_1.default.createElement(MinimizeIcon_1.MinimizeIcon, null) : undefined, onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Collapse all')))) : null,
             select ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "select-all", icon: controlsType === 'icon' ? react_1.default.createElement(SelectIcon_1.SelectIcon, null) : undefined, onClick: select === null || select === void 0 ? void 0 : select.onClick }, controlsType !== 'icon' && (select === null || select === void 0 ? void 0 : select.label) ? select.label : 'Select all')) : null,
             deselect ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "clear-all", icon: controlsType === 'icon' ? react_1.default.createElement(DeselectIcon_1.DeselectIcon, null) : undefined, onClick: deselect === null || deselect === void 0 ? void 0 : deselect.onClick }, controlsType !== 'icon' && (deselect === null || deselect === void 0 ? void 0 : deselect.label) ? deselect.label : 'Clear all')) : null,
-            copy && !((_e = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _e === void 0 ? void 0 : _e.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tip: translate('codeSnippet.copy.tooltipText', 'Copy to clipboard'), placement: "top" },
+            copy && !((_e = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _e === void 0 ? void 0 : _e.hide) ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('codeSnippet.copy.tooltipText', 'Copy to clipboard'), placement: "top", arrowPosition: "right" },
                 react_1.default.createElement(StyledCopyButton, { data: copy.data, "data-source": copy.dataSource, "data-hash": copy.dataHash, type: controlsType, toasterPlacement: copy.toasterPlacement, toasterDuration: copy.toasterDuration, buttonText: copy.label, onCopyClick: () => {
                         var _a;
                         // If there already is a click handler, events should be handled there, cause they pass additional data

package/lib/components/Tooltip/Tooltip.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { JSX, PropsWithChildren, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export type TooltipProps = {
     tip: string | ReactNode;
     isOpen?: boolean;
@@ -9,7 +9,6 @@ export type TooltipProps = {
     width?: string;
     dataTestId?: string;
     disabled?: boolean;
-    arrowPosition?: 'top' | 'bottom' | 'left' | 'right' | 'center';
+    arrowPosition?: 'left' | 'right' | 'center';
 };
-export declare function TooltipComponent({ children, isOpen, tip, withArrow, placement, className, width, dataTestId, disabled, arrowPosition, }: PropsWithChildren<TooltipProps>): JSX.Element;
 export declare const Tooltip: React.NamedExoticComponent<React.PropsWithChildren<TooltipProps>>;

package/lib/components/Tooltip/Tooltip.js

@@ -34,113 +34,58 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
-exports.TooltipComponent = TooltipComponent;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const Portal_1 = require("../../components/Portal/Portal");
 function TooltipComponent({ children, isOpen, tip, withArrow = true, placement = 'top', className = 'default', width, dataTestId, disabled = false, arrowPosition = 'center', }) {
-    const ref = (0, react_1.useRef)(null);
+    const tooltipWrapperRef = (0, react_1.useRef)(null);
+    const tooltipBodyRef = (0, react_1.useRef)(null);
     const { isOpened, handleOpen, handleClose } = (0, hooks_1.useControl)(isOpen);
-    const [tooltipPosition, setTooltipPosition] = (0, react_1.useState)({ top: 0, left: 0 });
-    (0, hooks_1.useOutsideClick)(ref, handleClose);
+    const anchorName = `--tooltip${(0, react_1.useId)().replace(/:/g, '')}`;
+    (0, hooks_1.useOutsideClick)(isOpened ? [tooltipWrapperRef, tooltipBodyRef] : tooltipWrapperRef, handleClose);
     const isControlled = isOpen !== undefined;
-    const updateTooltipPosition = (0, react_1.useCallback)(() => {
-        if (isOpened && ref.current) {
-            const rect = ref.current.getBoundingClientRect();
-            let top = 0;
-            let left = 0;
-            switch (placement) {
-                case 'top':
-                    top = rect.top;
-                    if (arrowPosition === 'left') {
-                        left = rect.left - 24;
-                    }
-                    else if (arrowPosition === 'right') {
-                        left = rect.right + 24;
-                    }
-                    else {
-                        left = rect.left + rect.width / 2;
-                    }
-                    break;
-                case 'bottom':
-                    top = rect.bottom;
-                    if (arrowPosition === 'left') {
-                        left = rect.left - 24;
-                    }
-                    else if (arrowPosition === 'right') {
-                        left = rect.right + 24;
-                    }
-                    else {
-                        left = rect.left + rect.width / 2;
-                    }
-                    break;
-                case 'left':
-                    top = rect.top + rect.height / 2;
-                    left = rect.left;
-                    break;
-                case 'right':
-                    top = rect.top + rect.height / 2;
-                    left = rect.right;
-                    break;
-            }
-            setTooltipPosition({ top, left });
-        }
-    }, [isOpened, placement, arrowPosition]);
-    (0, react_1.useEffect)(() => {
-        if (isOpened && ref.current) {
-            updateTooltipPosition();
-            const handleScroll = () => updateTooltipPosition();
-            const handleResize = () => updateTooltipPosition();
-            window.addEventListener('scroll', handleScroll, true);
-            window.addEventListener('resize', handleResize);
-            return () => {
-                window.removeEventListener('scroll', handleScroll, true);
-                window.removeEventListener('resize', handleResize);
-            };
-        }
-    }, [isOpened, placement, updateTooltipPosition]);
     (0, react_1.useEffect)(() => {
+        if (!isControlled)
+            return;
         if (isOpen && !disabled) {
             handleOpen();
         }
         else {
             handleClose();
         }
-    }, [isOpen, handleOpen, handleClose, disabled]);
-    const controllers = !isControlled &&
-        !disabled && {
-        onMouseEnter: handleOpen,
-        onMouseLeave: handleClose,
-        onClick: handleClose,
-        onFocus: handleOpen,
-        onBlur: handleClose,
-    };
-    return (react_1.default.createElement(TooltipWrapper, Object.assign({ ref: ref }, controllers, { className: `tooltip-${className}`, "data-component-name": "Tooltip/Tooltip" }),
+    }, [isOpen, disabled, isControlled, handleOpen, handleClose]);
+    const controllers = !isControlled && !disabled
+        ? {
+            onMouseEnter: handleOpen,
+            onMouseLeave: handleClose,
+            onClick: handleClose,
+            onFocus: handleOpen,
+            onBlur: handleClose,
+        }
+        : {};
+    return (react_1.default.createElement(TooltipWrapper, Object.assign({ ref: tooltipWrapperRef }, controllers, { className: `tooltip-${className}`, "data-component-name": "Tooltip/Tooltip", anchorName: anchorName }),
         children,
         isOpened && !disabled && (react_1.default.createElement(Portal_1.Portal, null,
-            react_1.default.createElement(TooltipBody, { "data-testid": dataTestId || (typeof tip === 'string' ? tip : ''), placement: placement, width: width, withArrow: withArrow, arrowPosition: arrowPosition, style: {
-                    position: 'fixed',
-                    top: tooltipPosition.top,
-                    left: tooltipPosition.left,
-                } }, tip)))));
+            react_1.default.createElement(TooltipBody, { ref: tooltipBodyRef, "data-testid": dataTestId || (typeof tip === 'string' ? tip : ''), placement: placement, width: width, withArrow: withArrow, arrowPosition: arrowPosition, anchorName: anchorName }, tip)))));
 }
 exports.Tooltip = (0, react_1.memo)(TooltipComponent);
 const PLACEMENTS = {
     top: (0, styled_components_1.css) `
+    bottom: anchor(top);
     ${({ withArrow, arrowPosition }) => withArrow && arrowPosition === 'left'
         ? (0, styled_components_1.css) `
-            transform: translate(0, -100%);
-            margin-top: -10px;
+            transform: translate(-32px, -6px);
+            left: anchor(center);
           `
         : arrowPosition === 'right'
             ? (0, styled_components_1.css) `
-              transform: translate(-100%, -100%);
-              margin-top: -10px;
+              transform: translate(32px, -6px);
+              right: anchor(center);
             `
             : (0, styled_components_1.css) `
-              transform: translate(-50%, -100%);
-              margin-top: -10px;
+              transform: translate(-50%, -6px);
+              left: anchor(center);
             `}
 
     ${({ withArrow, arrowPosition }) => withArrow &&
@@ -152,26 +97,27 @@ const PLACEMENTS = {
           border-top-style: solid;
           border-radius: 2px;
           bottom: 0;
-          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(99%);'}
-          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 99%);'}
-          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(99%);'}
+          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(100%);'}
+          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 100%);'}
+          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(100%);'}
         }
       `}
   `,
     bottom: (0, styled_components_1.css) `
+    top: anchor(bottom);
     ${({ withArrow, arrowPosition }) => withArrow && arrowPosition === 'left'
         ? (0, styled_components_1.css) `
-            transform: translate(0, 10px);
-            margin-top: 0;
+            transform: translate(-32px, 6px);
+            left: anchor(center);
           `
         : arrowPosition === 'right'
             ? (0, styled_components_1.css) `
-              transform: translate(-100%, 10px);
-              margin-top: 0;
+              transform: translate(32px, 6px);
+              right: anchor(center);
             `
             : (0, styled_components_1.css) `
-              transform: translate(-50%, 10px);
-              margin-top: 0;
+              transform: translate(-50%, 6px);
+              left: anchor(center);
             `}
 
     ${({ withArrow, arrowPosition }) => withArrow &&
@@ -183,17 +129,19 @@ const PLACEMENTS = {
           border-bottom-style: solid;
           border-radius: 0 0 2px 2px;
           top: 0;
-          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(-99%);'}
-          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -99%);'}
-          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(-99%);'}
+          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(-100%);'}
+          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -100%);'}
+          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(-100%);'}
         }
       `}
   `,
     left: (0, styled_components_1.css) `
     transform: translate(-100%, -50%);
-    margin-left: -10px;
+    margin-left: -7px;
+    top: anchor(center);
+    left: anchor(left);
 
-    ${({ withArrow, arrowPosition }) => withArrow &&
+    ${({ withArrow }) => withArrow &&
         (0, styled_components_1.css) `
         &::after {
           border-top: 14px solid transparent;
@@ -201,19 +149,19 @@ const PLACEMENTS = {
           border-left-width: 8px;
           border-left-style: solid;
           border-radius: 2px 0 0 2px;
+          right: -9px;
           top: 50%;
-          right: 0;
-          ${arrowPosition === 'top' && 'top: 16px; transform: translateX(99%);'}
-          ${arrowPosition === 'center' && 'top: 50%; transform: translate(99%, -50%);'}
-          ${arrowPosition === 'bottom' && 'bottom: 16px; transform: translateX(99%);'}
+          transform: translateY(-50%);
         }
       `}
   `,
     right: (0, styled_components_1.css) `
     transform: translate(0, -50%);
-    margin-left: 10px;
+    margin-left: 7px;
+    top: anchor(center);
+    left: anchor(right);
 
-    ${({ withArrow, arrowPosition }) => withArrow &&
+    ${({ withArrow }) => withArrow &&
         (0, styled_components_1.css) `
         &::after {
           border-top: 14px solid transparent;
@@ -221,28 +169,33 @@ const PLACEMENTS = {
           border-right-width: 8px;
           border-right-style: solid;
           border-radius: 0 2px 2px 0;
+          left: -9px;
           top: 50%;
-          left: 0;
-          ${arrowPosition === 'top' && 'top: 16px; transform: translateX(-99%);'}
-          ${arrowPosition === 'center' && 'top: 50%; transform: translate(-99%, -50%);'}
-          ${arrowPosition === 'bottom' && 'bottom: 16px; transform: translateX(-99%);'}
+          transform: translateY(-50%);
         }
       `}
   `,
 };
-const TooltipWrapper = styled_components_1.default.div `
-  position: relative;
+const TooltipWrapper = styled_components_1.default.div.attrs(({ anchorName }) => ({
+    style: {
+        anchorName: anchorName,
+    },
+})) `
   display: flex;
 `;
-/* eslint-disable theme/no-raw-colors-in-styles */
-const TooltipBody = styled_components_1.default.span `
-  display: inline-block;
-
+const TooltipBody = styled_components_1.default.span.attrs(({ anchorName }) => ({
+    style: {
+        positionAnchor: anchorName,
+    },
+})) `
+  position: fixed;
+  min-width: 64px;
   padding: var(--tooltip-padding);
-  max-width: ${({ width }) => width || 'var(--tooltip-max-width)'};
+  max-width: var(--tooltip-max-width);
   white-space: normal;
   word-break: normal;
   overflow-wrap: break-word;
+  text-align: left;
 
   border-radius: var(--border-radius-md);
   transition: opacity 0.3s ease-out;
@@ -270,10 +223,10 @@ const TooltipBody = styled_components_1.default.span `
     0px 8px 24px 8px #0000000a,
     0px 4px 12px 0px #00000014;
 
-  width: ${({ width }) => width || 'auto'};
+  width: ${({ width }) => width || 'max-content'};
+
   ${({ placement }) => (0, styled_components_1.css) `
     ${PLACEMENTS[placement]};
   `}
 `;
-/* eslint-enable theme/no-raw-colors-in-styles */
 //# sourceMappingURL=Tooltip.js.map

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

@@ -5,5 +5,9 @@ const styled_components_1 = require("styled-components");
 exports.tooltipDarkMode = (0, styled_components_1.css) `
   --tooltip-bg-color: var(--color-warm-grey-4);
   --tooltip-border-color: var(--color-warm-grey-5);
+
+  .tooltip-copy-button {
+    --tooltip-bg-color: var(--color-warm-grey-4);
+  }
 `;
 //# sourceMappingURL=variables.dark.js.map

package/lib/components/Tooltip/variables.js

@@ -20,9 +20,9 @@ exports.tooltip = (0, styled_components_1.css) `
   --tooltip-max-width: 400px;
 
   .tooltip-copy-button {
-    --tooltip-text-color: var(--text-color-secondary);
-    --tooltip-bg-color: var(--bg-color-raised);
-    --tooltip-arrow-color: var(--tooltip-bg-color);
+    --tooltip-text-color: var(--color-static-white);
+    --tooltip-bg-color: var(--color-warm-grey-10);
+    --tooltip-arrow-color: var(--tooltip-border-color);
   }
 
   .tooltip-catalog {

package/lib/core/hooks/use-outside-click.d.ts

@@ -1,2 +1,4 @@
 import type { RefObject } from 'react';
-export declare function useOutsideClick(ref: RefObject<HTMLElement | null>, handler?: (event: MouseEvent | TouchEvent) => void): void;
+type OutsideClickRef = RefObject<HTMLElement | null>;
+export declare function useOutsideClick(refs: OutsideClickRef | OutsideClickRef[], handler?: (event: MouseEvent | TouchEvent) => void): void;
+export {};

package/lib/core/hooks/use-outside-click.js

@@ -2,13 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useOutsideClick = useOutsideClick;
 const react_1 = require("react");
-function useOutsideClick(ref, handler) {
+function useOutsideClick(refs, handler) {
     (0, react_1.useEffect)(() => {
+        const refList = Array.isArray(refs) ? refs : [refs];
         const listener = (event) => {
-            if (!handler || !ref.current || ref.current.contains(event.target)) {
+            if (!handler)
                 return;
+            const target = event.target;
+            const isInside = refList.some((ref) => ref.current && ref.current.contains(target));
+            if (!isInside) {
+                handler(event);
             }
-            handler(event);
         };
         document.addEventListener('mousedown', listener);
         document.addEventListener('touchstart', listener);
@@ -16,6 +20,6 @@ function useOutsideClick(ref, handler) {
             document.removeEventListener('mousedown', listener);
             document.removeEventListener('touchstart', listener);
         };
-    }, [ref, handler]);
+    }, [refs, handler]);
 }
 //# sourceMappingURL=use-outside-click.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.62.0-next.6",
+  "version": "0.62.0-next.7",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -31,7 +31,7 @@
     "lodash.throttle": "^4.1.1",
     "react": "19.2.4",
     "react-dom": "19.2.4",
-    "react-router-dom": "^6.21.1",
+    "react-router-dom": "^6.30.3",
     "styled-components": "^4.1.1 || ^5.3.11 || ^6.0.0"
   },
   "devDependencies": {
@@ -51,7 +51,7 @@
     "@vitest/coverage-v8": "4.0.10",
     "@vitest/ui": "3.2.4",
     "concurrently": "7.6.0",
-    "react-router-dom": "^6.21.1",
+    "react-router-dom": "^6.30.3",
     "resize-observer-polyfill": "1.5.1",
     "rimraf": "5.0.7",
     "styled-components": "5.3.11",
@@ -63,7 +63,7 @@
     "vitest": "4.0.10",
     "vitest-when": "0.6.2",
     "webpack": "5.94.0",
-    "@redocly/realm-asyncapi-sdk": "0.8.0-next.2"
+    "@redocly/realm-asyncapi-sdk": "0.8.0-next.3"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",

package/src/components/Breadcrumbs/Breadcrumb.tsx

@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components';
 import type { JSX } from 'react';
 
 import { Link } from '@redocly/theme/components/Link/Link';
-import { TooltipComponent } from '@redocly/theme/components/Tooltip/Tooltip';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 import { BreadcrumbIcon } from '@redocly/theme/components/Breadcrumbs/BreadcrumbIcon';
 import { trimText } from '@redocly/theme/core/utils';
 import { BREADCRUMB_MAX_LENGTH } from '@redocly/theme/core/constants';
@@ -48,9 +48,9 @@ export function Breadcrumb({ label, link, isActive, onClick, icon }: BreadcrumbP
   );
 
   return isTruncated ? (
-    <TooltipComponent tip={label} placement="bottom" width="max-content">
+    <Tooltip tip={label} placement="bottom">
       {breadcrumbContent}
-    </TooltipComponent>
+    </Tooltip>
   ) : (
     breadcrumbContent
   );

package/src/components/Breadcrumbs/BreadcrumbDropdown.tsx

@@ -8,7 +8,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
-import { TooltipComponent } from '@redocly/theme/components/Tooltip/Tooltip';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
 import { BREADCRUMB_MAX_LENGTH } from '@redocly/theme/core/constants';
 import { BreadcrumbIcon } from '@redocly/theme/components/Breadcrumbs/BreadcrumbIcon';
@@ -39,9 +39,9 @@ export function BreadcrumbDropdown({
   const isTruncated = label.length > BREADCRUMB_MAX_LENGTH;
 
   const triggerContent = isTruncated ? (
-    <TooltipComponent tip={label} placement="bottom" width="max-content">
+    <Tooltip tip={label} placement="bottom">
       <TriggerContentWrapper>{children}</TriggerContentWrapper>
-    </TooltipComponent>
+    </Tooltip>
   ) : (
     children
   );

package/src/components/Catalog/CatalogTagsWithTooltip.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { CATALOG_TAG_MAX_LENGTH } from '@redocly/theme/core/constants';
 import { Tag, TagProps } from '@redocly/theme/components/Tag/Tag';
-import { TooltipComponent } from '@redocly/theme/components/Tooltip/Tooltip';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 
@@ -53,7 +53,7 @@ export function CatalogTagsWithTooltip({
   const remainingCount = items.length - itemsToShow;
 
   return (
-    <TooltipComponent tip={items.join(', ')} placement="bottom" className="catalog" width="400px">
+    <Tooltip tip={items.join(', ')} placement="bottom" className="catalog" width="400px">
       <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
         {displayedItems.map((item, index) => (
           <Tag
@@ -70,7 +70,7 @@ export function CatalogTagsWithTooltip({
           +{remainingCount} {translate('catalog.tags.more', 'more')}
         </MoreTagsButton>
       </CatalogTagsWrapper>
-    </TooltipComponent>
+    </Tooltip>
   );
 }
 

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -6,7 +6,7 @@ import type { CodeBlockItems } from '@redocly/theme/components/CodeBlock/CodeBlo
 
 import { CodeBlockTabs } from '@redocly/theme/components/CodeBlock/CodeBlockTabs';
 import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
-import { TooltipWrapper } from '@redocly/theme/components/Tooltip/TooltipWrapper';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
 import { DeselectIcon } from '@redocly/theme/icons/DeselectIcon/DeselectIcon';
 import { MaximizeIcon } from '@redocly/theme/icons/MaximizeIcon/MaximizeIcon';
@@ -86,9 +86,10 @@ export function CodeBlockControls({
       <ControlsWrapper>
         {dropdown && <CodeBlockDropdown {...dropdown} />}
         {report && !report.hidden && !report?.props?.hide ? (
-          <TooltipWrapper
+          <Tooltip
             tip={translate('codeSnippet.report.tooltipText', 'Report a problem')}
             placement="top"
+            arrowPosition="right"
           >
             <ControlButton
               variant="text"
@@ -99,13 +100,14 @@ export function CodeBlockControls({
             >
               {controlsType != 'icon' && (report.props?.buttonText || 'Report')}
             </ControlButton>
-          </TooltipWrapper>
+          </Tooltip>
         ) : null}
 
         {expand && !codeSnippet?.expand?.hide ? (
-          <TooltipWrapper
+          <Tooltip
             tip={translate('codeSnippet.expand.tooltipText', 'Expand all')}
             placement="top"
+            arrowPosition="right"
           >
             <ControlButton
               variant="text"
@@ -116,13 +118,14 @@ export function CodeBlockControls({
             >
               {controlsType !== 'icon' && (expand?.label || 'Expand all')}
             </ControlButton>
-          </TooltipWrapper>
+          </Tooltip>
         ) : null}
 
         {collapse && !codeSnippet?.collapse?.hide ? (
-          <TooltipWrapper
+          <Tooltip
             tip={translate('codeSnippet.collapse.tooltipText', 'Collapse all')}
             placement="top"
+            arrowPosition="right"
           >
             <ControlButton
               variant="text"
@@ -133,7 +136,7 @@ export function CodeBlockControls({
             >
               {controlsType !== 'icon' && (expand?.label || 'Collapse all')}
             </ControlButton>
-          </TooltipWrapper>
+          </Tooltip>
         ) : null}
 
         {select ? (
@@ -161,9 +164,10 @@ export function CodeBlockControls({
         ) : null}
 
         {copy && !codeSnippet?.copy?.hide ? (
-          <TooltipWrapper
+          <Tooltip
             tip={translate('codeSnippet.copy.tooltipText', 'Copy to clipboard')}
             placement="top"
+            arrowPosition="right"
           >
             <StyledCopyButton
               data={copy.data}
@@ -184,7 +188,7 @@ export function CodeBlockControls({
                 }
               }}
             />
-          </TooltipWrapper>
+          </Tooltip>
         ) : null}
       </ControlsWrapper>
     </>

package/src/components/Tooltip/Tooltip.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, memo, useRef, useState, useCallback } from 'react';
+import React, { memo, useEffect, useRef, useId } from 'react';
 import styled, { css } from 'styled-components';
 
 import type { JSX, PropsWithChildren, ReactNode } from 'react';
@@ -15,10 +15,10 @@ export type TooltipProps = {
   width?: string;
   dataTestId?: string;
   disabled?: boolean;
-  arrowPosition?: 'top' | 'bottom' | 'left' | 'right' | 'center';
+  arrowPosition?: 'left' | 'right' | 'center';
 };
 
-export function TooltipComponent({
+function TooltipComponent({
   children,
   isOpen,
   tip,
@@ -30,111 +30,55 @@ export function TooltipComponent({
   disabled = false,
   arrowPosition = 'center',
 }: PropsWithChildren<TooltipProps>): JSX.Element {
-  const ref = useRef<HTMLDivElement | null>(null);
+  const tooltipWrapperRef = useRef<HTMLDivElement | null>(null);
+  const tooltipBodyRef = useRef<HTMLDivElement | null>(null);
   const { isOpened, handleOpen, handleClose } = useControl(isOpen);
-  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
+  const anchorName = `--tooltip${useId().replace(/:/g, '')}`;
 
-  useOutsideClick(ref, handleClose);
+  useOutsideClick(isOpened ? [tooltipWrapperRef, tooltipBodyRef] : tooltipWrapperRef, handleClose);
 
   const isControlled = isOpen !== undefined;
 
-  const updateTooltipPosition = useCallback(() => {
-    if (isOpened && ref.current) {
-      const rect = ref.current.getBoundingClientRect();
-
-      let top = 0;
-      let left = 0;
-
-      switch (placement) {
-        case 'top':
-          top = rect.top;
-          if (arrowPosition === 'left') {
-            left = rect.left - 24;
-          } else if (arrowPosition === 'right') {
-            left = rect.right + 24;
-          } else {
-            left = rect.left + rect.width / 2;
-          }
-          break;
-        case 'bottom':
-          top = rect.bottom;
-          if (arrowPosition === 'left') {
-            left = rect.left - 24;
-          } else if (arrowPosition === 'right') {
-            left = rect.right + 24;
-          } else {
-            left = rect.left + rect.width / 2;
-          }
-          break;
-        case 'left':
-          top = rect.top + rect.height / 2;
-          left = rect.left;
-          break;
-        case 'right':
-          top = rect.top + rect.height / 2;
-          left = rect.right;
-          break;
-      }
-
-      setTooltipPosition({ top, left });
-    }
-  }, [isOpened, placement, arrowPosition]);
-
   useEffect(() => {
-    if (isOpened && ref.current) {
-      updateTooltipPosition();
-
-      const handleScroll = () => updateTooltipPosition();
-      const handleResize = () => updateTooltipPosition();
-
-      window.addEventListener('scroll', handleScroll, true);
-      window.addEventListener('resize', handleResize);
-
-      return () => {
-        window.removeEventListener('scroll', handleScroll, true);
-        window.removeEventListener('resize', handleResize);
-      };
-    }
-  }, [isOpened, placement, updateTooltipPosition]);
+    if (!isControlled) return;
 
-  useEffect(() => {
     if (isOpen && !disabled) {
       handleOpen();
     } else {
       handleClose();
     }
-  }, [isOpen, handleOpen, handleClose, disabled]);
-
-  const controllers = !isControlled &&
-    !disabled && {
-      onMouseEnter: handleOpen,
-      onMouseLeave: handleClose,
-      onClick: handleClose,
-      onFocus: handleOpen,
-      onBlur: handleClose,
-    };
+  }, [isOpen, disabled, isControlled, handleOpen, handleClose]);
+
+  const controllers =
+    !isControlled && !disabled
+      ? {
+          onMouseEnter: handleOpen,
+          onMouseLeave: handleClose,
+          onClick: handleClose,
+          onFocus: handleOpen,
+          onBlur: handleClose,
+        }
+      : {};
 
   return (
     <TooltipWrapper
-      ref={ref}
+      ref={tooltipWrapperRef}
       {...controllers}
       className={`tooltip-${className}`}
       data-component-name="Tooltip/Tooltip"
+      anchorName={anchorName}
     >
       {children}
       {isOpened && !disabled && (
         <Portal>
           <TooltipBody
+            ref={tooltipBodyRef}
             data-testid={dataTestId || (typeof tip === 'string' ? tip : '')}
             placement={placement}
             width={width}
             withArrow={withArrow}
             arrowPosition={arrowPosition}
-            style={{
-              position: 'fixed',
-              top: tooltipPosition.top,
-              left: tooltipPosition.left,
-            }}
+            anchorName={anchorName}
           >
             {tip}
           </TooltipBody>
@@ -148,20 +92,21 @@ export const Tooltip = memo<PropsWithChildren<TooltipProps>>(TooltipComponent);
 
 const PLACEMENTS = {
   top: css<Pick<TooltipProps, 'withArrow' | 'arrowPosition'>>`
+    bottom: anchor(top);
     ${({ withArrow, arrowPosition }) =>
       withArrow && arrowPosition === 'left'
         ? css`
-            transform: translate(0, -100%);
-            margin-top: -10px;
+            transform: translate(-32px, -6px);
+            left: anchor(center);
           `
         : arrowPosition === 'right'
           ? css`
-              transform: translate(-100%, -100%);
-              margin-top: -10px;
+              transform: translate(32px, -6px);
+              right: anchor(center);
             `
           : css`
-              transform: translate(-50%, -100%);
-              margin-top: -10px;
+              transform: translate(-50%, -6px);
+              left: anchor(center);
             `}
 
     ${({ withArrow, arrowPosition }) =>
@@ -174,27 +119,28 @@ const PLACEMENTS = {
           border-top-style: solid;
           border-radius: 2px;
           bottom: 0;
-          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(99%);'}
-          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 99%);'}
-          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(99%);'}
+          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(100%);'}
+          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 100%);'}
+          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(100%);'}
         }
       `}
   `,
   bottom: css<Pick<TooltipProps, 'withArrow' | 'arrowPosition'>>`
+    top: anchor(bottom);
     ${({ withArrow, arrowPosition }) =>
       withArrow && arrowPosition === 'left'
         ? css`
-            transform: translate(0, 10px);
-            margin-top: 0;
+            transform: translate(-32px, 6px);
+            left: anchor(center);
           `
         : arrowPosition === 'right'
           ? css`
-              transform: translate(-100%, 10px);
-              margin-top: 0;
+              transform: translate(32px, 6px);
+              right: anchor(center);
             `
           : css`
-              transform: translate(-50%, 10px);
-              margin-top: 0;
+              transform: translate(-50%, 6px);
+              left: anchor(center);
             `}
 
     ${({ withArrow, arrowPosition }) =>
@@ -207,17 +153,19 @@ const PLACEMENTS = {
           border-bottom-style: solid;
           border-radius: 0 0 2px 2px;
           top: 0;
-          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(-99%);'}
-          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -99%);'}
-          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(-99%);'}
+          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(-100%);'}
+          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -100%);'}
+          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(-100%);'}
         }
       `}
   `,
   left: css<Pick<TooltipProps, 'withArrow' | 'arrowPosition'>>`
     transform: translate(-100%, -50%);
-    margin-left: -10px;
+    margin-left: -7px;
+    top: anchor(center);
+    left: anchor(left);
 
-    ${({ withArrow, arrowPosition }) =>
+    ${({ withArrow }) =>
       withArrow &&
       css`
         &::after {
@@ -226,19 +174,19 @@ const PLACEMENTS = {
           border-left-width: 8px;
           border-left-style: solid;
           border-radius: 2px 0 0 2px;
+          right: -9px;
           top: 50%;
-          right: 0;
-          ${arrowPosition === 'top' && 'top: 16px; transform: translateX(99%);'}
-          ${arrowPosition === 'center' && 'top: 50%; transform: translate(99%, -50%);'}
-          ${arrowPosition === 'bottom' && 'bottom: 16px; transform: translateX(99%);'}
+          transform: translateY(-50%);
         }
       `}
   `,
   right: css<Pick<TooltipProps, 'withArrow' | 'arrowPosition'>>`
     transform: translate(0, -50%);
-    margin-left: 10px;
+    margin-left: 7px;
+    top: anchor(center);
+    left: anchor(right);
 
-    ${({ withArrow, arrowPosition }) =>
+    ${({ withArrow }) =>
       withArrow &&
       css`
         &::after {
@@ -247,31 +195,40 @@ const PLACEMENTS = {
           border-right-width: 8px;
           border-right-style: solid;
           border-radius: 0 2px 2px 0;
+          left: -9px;
           top: 50%;
-          left: 0;
-          ${arrowPosition === 'top' && 'top: 16px; transform: translateX(-99%);'}
-          ${arrowPosition === 'center' && 'top: 50%; transform: translate(-99%, -50%);'}
-          ${arrowPosition === 'bottom' && 'bottom: 16px; transform: translateX(-99%);'}
+          transform: translateY(-50%);
         }
       `}
   `,
 };
 
-const TooltipWrapper = styled.div`
-  position: relative;
+const TooltipWrapper = styled.div.attrs<{ anchorName: string }>(({ anchorName }) => ({
+  style: {
+    anchorName: anchorName,
+  } as React.CSSProperties,
+}))<{ anchorName: string }>`
   display: flex;
 `;
-/* eslint-disable theme/no-raw-colors-in-styles */
-const TooltipBody = styled.span<
-  Pick<Required<TooltipProps>, 'placement' | 'withArrow' | 'arrowPosition'> & { width?: string }
->`
-  display: inline-block;
 
+const TooltipBody = styled.span.attrs<{ anchorName: string }>(({ anchorName }) => ({
+  style: {
+    positionAnchor: anchorName,
+  } as React.CSSProperties,
+}))<
+  Pick<Required<TooltipProps>, 'placement' | 'withArrow' | 'arrowPosition'> & {
+    width?: string;
+    anchorName: string;
+  }
+>`
+  position: fixed;
+  min-width: 64px;
   padding: var(--tooltip-padding);
-  max-width: ${({ width }) => width || 'var(--tooltip-max-width)'};
+  max-width: var(--tooltip-max-width);
   white-space: normal;
   word-break: normal;
   overflow-wrap: break-word;
+  text-align: left;
 
   border-radius: var(--border-radius-md);
   transition: opacity 0.3s ease-out;
@@ -299,9 +256,9 @@ const TooltipBody = styled.span<
     0px 8px 24px 8px #0000000a,
     0px 4px 12px 0px #00000014;
 
-  width: ${({ width }) => width || 'auto'};
+  width: ${({ width }) => width || 'max-content'};
+
   ${({ placement }) => css`
     ${PLACEMENTS[placement]};
   `}
 `;
-/* eslint-enable theme/no-raw-colors-in-styles */

package/src/components/Tooltip/variables.dark.ts

@@ -3,4 +3,8 @@ import { css } from 'styled-components';
 export const tooltipDarkMode = css`
   --tooltip-bg-color: var(--color-warm-grey-4);
   --tooltip-border-color: var(--color-warm-grey-5);
+
+  .tooltip-copy-button {
+    --tooltip-bg-color: var(--color-warm-grey-4);
+  }
 `;

package/src/components/Tooltip/variables.ts

@@ -18,9 +18,9 @@ export const tooltip = css`
   --tooltip-max-width: 400px;
 
   .tooltip-copy-button {
-    --tooltip-text-color: var(--text-color-secondary);
-    --tooltip-bg-color: var(--bg-color-raised);
-    --tooltip-arrow-color: var(--tooltip-bg-color);
+    --tooltip-text-color: var(--color-static-white);
+    --tooltip-bg-color: var(--color-warm-grey-10);
+    --tooltip-arrow-color: var(--tooltip-border-color);
   }
 
   .tooltip-catalog {

package/src/core/hooks/use-outside-click.ts

@@ -2,22 +2,33 @@ import { useEffect } from 'react';
 
 import type { RefObject } from 'react';
 
+type OutsideClickRef = RefObject<HTMLElement | null>;
+
 export function useOutsideClick(
-  ref: RefObject<HTMLElement | null>,
+  refs: OutsideClickRef | OutsideClickRef[],
   handler?: (event: MouseEvent | TouchEvent) => void,
 ): void {
   useEffect(() => {
+    const refList = Array.isArray(refs) ? refs : [refs];
+
     const listener = (event: MouseEvent | TouchEvent) => {
-      if (!handler || !ref.current || ref.current.contains(event.target as Node)) {
-        return;
+      if (!handler) return;
+
+      const target = event.target as Node;
+
+      const isInside = refList.some((ref) => ref.current && ref.current.contains(target));
+
+      if (!isInside) {
+        handler(event);
       }
-      handler(event);
     };
+
     document.addEventListener('mousedown', listener);
     document.addEventListener('touchstart', listener);
+
     return () => {
       document.removeEventListener('mousedown', listener);
       document.removeEventListener('touchstart', listener);
     };
-  }, [ref, handler]);
+  }, [refs, handler]);
 }

package/lib/components/Tooltip/TooltipWrapper.d.ts

@@ -1,12 +0,0 @@
-import type { JSX, ReactElement } from 'react';
-import type { TooltipProps } from '../../components/Tooltip/Tooltip';
-export type TooltipWrapperProps = {
-    children: ReactElement;
-    tip: string;
-    placement?: TooltipProps['placement'];
-    width?: string;
-    className?: string;
-    showOnHover?: boolean;
-    disabled?: boolean;
-};
-export declare function TooltipWrapper({ children, tip, placement, width, className, showOnHover, disabled, }: TooltipWrapperProps): JSX.Element;

package/lib/components/Tooltip/TooltipWrapper.js

@@ -1,34 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TooltipWrapper = TooltipWrapper;
-const styled_components_1 = __importDefault(require("styled-components"));
-const react_1 = __importDefault(require("react"));
-const hooks_1 = require("../../core/hooks");
-const Tooltip_1 = require("../../components/Tooltip/Tooltip");
-function TooltipWrapper({ children, tip, placement = 'top', width = 'max-content', className = '', showOnHover = true, disabled = false, }) {
-    const tooltip = (0, hooks_1.useControl)(false);
-    const handleMouseEnter = () => {
-        if (showOnHover && !disabled) {
-            tooltip.handleOpen();
-        }
-    };
-    const handleMouseLeave = () => {
-        if (showOnHover) {
-            tooltip.handleClose();
-        }
-    };
-    const handleClick = () => {
-        if (showOnHover) {
-            tooltip.handleClose();
-        }
-    };
-    return (react_1.default.createElement(Tooltip_1.Tooltip, { className: className, tip: tip, isOpen: tooltip.isOpened, placement: placement, width: width },
-        react_1.default.createElement(TooltipEventWrapper, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick }, children)));
-}
-const TooltipEventWrapper = styled_components_1.default.div `
-  display: contents;
-`;
-//# sourceMappingURL=TooltipWrapper.js.map

package/src/components/Tooltip/TooltipWrapper.tsx

@@ -1,70 +0,0 @@
-import styled from 'styled-components';
-import React from 'react';
-
-import type { JSX, ReactElement } from 'react';
-import type { TooltipProps } from '@redocly/theme/components/Tooltip/Tooltip';
-
-import { useControl } from '@redocly/theme/core/hooks';
-import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
-
-export type TooltipWrapperProps = {
-  children: ReactElement;
-  tip: string;
-  placement?: TooltipProps['placement'];
-  width?: string;
-  className?: string;
-  showOnHover?: boolean;
-  disabled?: boolean;
-};
-
-export function TooltipWrapper({
-  children,
-  tip,
-  placement = 'top',
-  width = 'max-content',
-  className = '',
-  showOnHover = true,
-  disabled = false,
-}: TooltipWrapperProps): JSX.Element {
-  const tooltip = useControl(false);
-
-  const handleMouseEnter = (): void => {
-    if (showOnHover && !disabled) {
-      tooltip.handleOpen();
-    }
-  };
-
-  const handleMouseLeave = (): void => {
-    if (showOnHover) {
-      tooltip.handleClose();
-    }
-  };
-
-  const handleClick = (): void => {
-    if (showOnHover) {
-      tooltip.handleClose();
-    }
-  };
-
-  return (
-    <Tooltip
-      className={className}
-      tip={tip}
-      isOpen={tooltip.isOpened}
-      placement={placement}
-      width={width}
-    >
-      <TooltipEventWrapper
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        onClick={handleClick}
-      >
-        {children}
-      </TooltipEventWrapper>
-    </Tooltip>
-  );
-}
-
-const TooltipEventWrapper = styled.div`
-  display: contents;
-`;