@redocly/theme 0.63.0-next.3 → 0.63.0-next.5

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { TooltipProps } from '../../components/Tooltip/Tooltip';
+import type { TooltipProps } from '../../core/types';
 import type { ButtonProps } from '../../components/Button/Button';
 export type CopyButtonProps = {
     data: unknown;

package/lib/components/Buttons/CopyButton.js

@@ -57,7 +57,7 @@ function CopyButtonComponent({ data, type = 'icon', toasterPlacement = 'top', to
         onCopyClick === null || onCopyClick === void 0 ? void 0 : onCopyClick(e);
     };
     return (react_1.default.createElement(Tooltip_1.Tooltip, { className: `copy-button ${className ? className : ''}`, tip: translate('codeSnippet.copy.buttonText', toasterText || 'Copied!'), isOpen: tooltip.isOpened, placement: toasterPlacement, width: "fit-content" },
-        react_1.default.createElement(Button_1.Button, { "data-component-name": "Buttons/CopyButton", onClick: (e) => copy(e, toasterDuration), "data-testid": dataTestId, icon: type === 'icon' || type === 'compound' ? react_1.default.createElement(CopyIcon_1.CopyIcon, null) : undefined, size: size, variant: variant, disabled: disabled, fullWidth: fullWidth, tone: tone, extraClass: extraClass, iconPosition: iconPosition }, (type === 'text' || type === 'compound') &&
+        react_1.default.createElement(Button_1.Button, { "data-component-name": "Buttons/CopyButton", onClick: (e) => copy(e, toasterDuration), "data-testid": dataTestId, icon: type === 'icon' || type === 'compound' ? react_1.default.createElement(CopyIcon_1.CopyIcon, null) : undefined, size: size, variant: variant, disabled: disabled, fullWidth: fullWidth, tone: tone, extraClass: extraClass, iconPosition: iconPosition, "aria-label": "Copy" }, (type === 'text' || type === 'compound') &&
             (buttonText || translate('codeSnippet.copy.toasterText', 'Copy')))));
 }
 exports.CopyButton = (0, react_1.memo)(CopyButtonComponent);

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

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+export type DownloadButtonProps = {
+    data: string;
+    dataTestId?: string;
+};
+export declare function DownloadButton({ data, dataTestId, }: DownloadButtonProps): JSX.Element;

package/lib/components/Buttons/DownloadButton.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DownloadButton = DownloadButton;
+const react_1 = __importDefault(require("react"));
+const Button_1 = require("../../components/Button/Button");
+const DownloadIcon_1 = require("../../icons/DownloadIcon/DownloadIcon");
+const Tooltip_1 = require("../../components/Tooltip/Tooltip");
+const hooks_1 = require("../../core/hooks");
+function DownloadButton({ data, dataTestId = 'download-button', }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    return (react_1.default.createElement("div", { "data-component-name": "Buttons/DownloadButton" },
+        react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('button.download.tooltipText', 'Download description'), placement: "top", arrowPosition: "right" },
+            react_1.default.createElement("a", { href: data, target: "_blank", download: true, rel: "noreferrer" },
+                react_1.default.createElement(Button_1.Button, { variant: "text", size: "small", "aria-label": "Download", icon: react_1.default.createElement(DownloadIcon_1.DownloadIcon, null), "data-testid": dataTestId })))));
+}
+//# sourceMappingURL=DownloadButton.js.map

package/lib/components/Buttons/EmailButton.js

@@ -7,11 +7,16 @@ exports.EmailButton = EmailButton;
 const react_1 = __importDefault(require("react"));
 const Button_1 = require("../../components/Button/Button");
 const EmailIcon_1 = require("../../icons/EmailIcon/EmailIcon");
+const Tooltip_1 = require("../../components/Tooltip/Tooltip");
+const hooks_1 = require("../../core/hooks");
 function EmailButton({ data, dataTestId = 'email-button' }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     const onClick = () => {
         window.location.href = `mailto:${data}`;
     };
     return (react_1.default.createElement("div", { "data-component-name": "Buttons/EmailButton" },
-        react_1.default.createElement(Button_1.Button, { onClick: onClick, icon: react_1.default.createElement(EmailIcon_1.EmailIcon, null), size: "small", variant: "text", "data-testid": dataTestId, "aria-label": "Email" })));
+        react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('button.email.tooltipText', 'Send email'), placement: "top", arrowPosition: "right" },
+            react_1.default.createElement(Button_1.Button, { onClick: onClick, icon: react_1.default.createElement(EmailIcon_1.EmailIcon, null), size: "small", variant: "text", "data-testid": dataTestId, "aria-label": "Email" }))));
 }
 //# sourceMappingURL=EmailButton.js.map

package/lib/components/Buttons/NewTabButton.js

@@ -7,11 +7,16 @@ exports.NewTabButton = NewTabButton;
 const react_1 = __importDefault(require("react"));
 const Button_1 = require("../../components/Button/Button");
 const ArrowUpRightIcon_1 = require("../../icons/ArrowUpRightIcon/ArrowUpRightIcon");
+const Tooltip_1 = require("../../components/Tooltip/Tooltip");
+const hooks_1 = require("../../core/hooks");
 function NewTabButton({ data, dataTestId = 'new-tab-button', }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     const onClick = () => {
         window.open(data, '_blank');
     };
     return (react_1.default.createElement("div", { "data-component-name": "Buttons/NewTabButton" },
-        react_1.default.createElement(Button_1.Button, { onClick: onClick, icon: react_1.default.createElement(ArrowUpRightIcon_1.ArrowUpRightIcon, null), "data-testid": dataTestId, "aria-label": "Open in new tab", size: "small", variant: "text" })));
+        react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('button.externalLink.tooltipText', 'Open in new tab'), placement: "top", arrowPosition: "right" },
+            react_1.default.createElement(Button_1.Button, { onClick: onClick, icon: react_1.default.createElement(ArrowUpRightIcon_1.ArrowUpRightIcon, null), "data-testid": dataTestId, "aria-label": "Open in new tab", size: "small", variant: "text" }))));
 }
 //# sourceMappingURL=NewTabButton.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar.js

@@ -111,10 +111,10 @@ function CatalogEntityHistorySidebar({ entityKey, revision, version, className,
 }
 const SidebarOverlay = styled_components_1.default.div `
   position: fixed;
-  top: var(--navbar-height);
+  top: calc(var(--navbar-height) + var(--banner-height, 0));
   left: 0;
   width: var(--sidebar-width);
-  height: calc(100vh - var(--navbar-height));
+  height: calc(100vh - var(--navbar-height) - var(--banner-height, 0));
   background-color: var(--catalog-history-sidebar-bg-color);
   border-right: 1px solid var(--catalog-history-sidebar-border-color);
   display: flex;

package/lib/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityVersionItem.js

@@ -70,12 +70,10 @@ function CatalogEntityVersionItem({ group, basePath, isExpanded, onToggle, }) {
     }, [isExpanded]);
     const isNotSpecifiedVersion = group.version === constants_1.VERSION_NOT_SPECIFIED;
     const singleRevisionLink = (0, utils_1.buildRevisionUrl)(basePath, group.singleRevisionDate, group.version);
-    const isClickable = hasRevisions || Boolean(singleRevisionLink);
-    const isSingleRevisionActive = Boolean(singleRevisionLink && group.isCurrent);
     const versionTitle = isNotSpecifiedVersion
         ? `${translate('catalog.history.version.label', 'Version')}: ${translate('catalog.history.version.notSpecified', 'not specified')}`
         : `${translate('catalog.history.version.label', 'Version')}: ${group.version}`;
-    const versionButton = (react_1.default.createElement(VersionButton, { type: "button", onClick: () => hasRevisions && onToggle(group.version), "$isClickable": isClickable, "$isCurrent": group.isCurrent, "$isActive": isSingleRevisionActive },
+    const versionButton = (react_1.default.createElement(VersionButton, { type: "button", onClick: () => hasRevisions && onToggle(group.version), "$isCurrent": group.isCurrent },
         react_1.default.createElement(VersionIcon, { "$isCurrent": group.isCurrent }, group.isCurrent ? (react_1.default.createElement(CheckmarkOutlineIcon_1.CheckmarkOutlineIcon, { size: "16px", color: "--catalog-history-sidebar-version-icon-color-current" })) : (react_1.default.createElement(NavaidMilitaryIcon_1.NavaidMilitaryIcon, { size: "16px", color: "--catalog-history-sidebar-version-icon-color" }))),
         react_1.default.createElement(VersionInfo, null,
             react_1.default.createElement(VersionTitleRow, null,
@@ -105,21 +103,16 @@ const VersionButton = styled_components_1.default.button `
   align-items: center;
   width: calc(100% - var(--catalog-history-sidebar-version-icon-margin-right));
   padding: var(--catalog-history-sidebar-version-header-padding);
-  cursor: ${({ $isClickable }) => ($isClickable ? 'pointer' : 'default')};
+  cursor: pointer;
   border-radius: var(--catalog-history-sidebar-version-header-border-radius);
   transition: 0.2s ease;
   text-decoration: none;
   color: inherit;
-  background-color: ${({ $isActive }) => $isActive ? 'var(--catalog-history-sidebar-revision-item-bg-color-active)' : 'transparent'};
+  background-color: 'transparent';
 
-  ${({ $isClickable, $isActive }) => $isClickable &&
-    `
-    &:hover {
-      background-color: ${$isActive
-        ? 'var(--catalog-history-sidebar-revision-item-bg-color-active)'
-        : 'var(--catalog-history-sidebar-version-header-bg-color-hover)'};
-    }
-  `}
+  &:hover {
+    background-color: var(--catalog-history-sidebar-version-header-bg-color-hover);
+  }
 
   ${({ $isCurrent }) => !$isCurrent &&
     `

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -39,11 +39,11 @@ function CodeBlockControls({ children, className, title, controls, tabs, dropdow
         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(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,
+                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, "aria-label": "Report a problem" }, 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(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,
+                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, "aria-label": "Expand all", 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(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,
+                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, "aria-label": "Collapse all" }, 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(Tooltip_1.Tooltip, { tip: translate('codeSnippet.copy.tooltipText', 'Copy to clipboard'), placement: "top", arrowPosition: "right" },

package/lib/components/Menu/MenuItem.js

@@ -100,7 +100,7 @@ function MenuItem(props) {
             item.sublabel ? (react_1.default.createElement(MenuItemSubLabel, null, translate(item.subLabelTranslationKey, item.sublabel))) : null),
         isDrilldown ? react_1.default.createElement(ArrowRightIcon_1.ArrowRightIcon, { size: "12px" }) : null,
         hasHttpTag ? (react_1.default.createElement(HttpTag_1.HttpTag, { color: httpColor || '' }, item.httpVerb === 'hook' ? 'event' : item.httpVerb)) : null));
-    return (react_1.default.createElement(MenuItemWrapper, { "data-component-name": "Menu/MenuItem", className: generateClassName({ type, item, className }) },
+    return (react_1.default.createElement(MenuItemWrapper, { "data-component-name": "Menu/MenuItem", className: generateClassName({ type, item, className }), role: "listitem" },
         item.link ? (react_1.default.createElement(MenuItemLink, { to: item.link, external: item.external, target: item.target, languageInsensitive: item.languageInsensitive, onKeyDown: handleExpandOnEnter }, label)) : (label),
         isNested ? (react_1.default.createElement(MenuItemNestedWrapper, { depth: depth, ref: nestedMenuRef, style: style }, isExpanded || !canUnmount ? props.children : null)) : null,
         item.separatorLine ? (react_1.default.createElement(MenuItemSeparatorLine, { depth: depth, linePosition: item.linePosition })) : null));

package/lib/components/PageActions/PageActions.js

@@ -88,7 +88,7 @@ function PageActions(props) {
     return (react_1.default.createElement(PageActionsWrapper, { "data-component-name": "PageActions/PageActions" },
         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(StyledDropdown, { withArrow: true, trigger: react_1.default.createElement(Button_1.Button, null), placement: "bottom", alignment: "end" },
+            actions.length > 1 ? (react_1.default.createElement(StyledDropdown, { withArrow: true, trigger: react_1.default.createElement(Button_1.Button, { "aria-label": "More actions" }), placement: "bottom", alignment: "end" },
                 react_1.default.createElement(StyledDropdownMenu, null, menuItems))) : null)));
 }
 function renderIcon(buttonAction, actionState) {

package/lib/components/Search/SearchDialog.js

@@ -73,7 +73,7 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
     const { query, setQuery, filter, setFilter, items, isSearchLoading, facets, setLoadMore, advancedSearch, askAi, groupField, } = useSearch(product === null || product === void 0 ? void 0 : product.name, autoSearchDisabled);
     const { isFilterOpen, onFilterToggle, onFilterChange, onFilterReset, onFacetReset, onQuickFilterReset, } = (0, hooks_1.useSearchFilter)(filter, setFilter);
     const { addSearchHistoryItem } = (0, hooks_1.useRecentSearches)();
-    const aiSearch = useAiSearch({ filter });
+    const aiSearch = useAiSearch({ filter: filter, product: product === null || product === void 0 ? void 0 : product.name });
     (0, hooks_1.useModalScrollLock)(true);
     const searchInputRef = (0, react_1.useRef)(null);
     const modalRef = (0, react_1.useRef)(null);

package/lib/components/SidebarActions/SidebarActions.js

@@ -30,7 +30,7 @@ const SidebarActions = ({ layout, hideCollapseSidebarButton = false, collapsedSi
                     else {
                         telemetry.sendSidebarItemCollapsedMessage();
                     }
-                }, size: "small", variant: "outlined", icon: collapsedSidebar ? react_1.default.createElement(SidePanelOpenIcon_1.SidePanelOpenIcon, null) : react_1.default.createElement(SidePanelCloseIcon_1.SidePanelCloseIcon, null) }))),
+                }, size: "small", variant: "outlined", "aria-label": collapsedSidebar ? 'Show sidebar' : 'Hide sidebar', icon: collapsedSidebar ? react_1.default.createElement(SidePanelOpenIcon_1.SidePanelOpenIcon, null) : react_1.default.createElement(SidePanelCloseIcon_1.SidePanelCloseIcon, null) }))),
         isApiDocs && (react_1.default.createElement(styled_1.ControlsWrapChangeLayoutButtons, { isCollapsed: collapsedSidebar },
             react_1.default.createElement(ChangeViewButton_1.ChangeViewButton, { collapsedSidebar: collapsedSidebar, layout: layout, onClick: () => {
                     onChangeViewClick();

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

@@ -1,7 +1,7 @@
 declare const StyledChangeViewButton: import("styled-components").StyledComponent<"span", any, {
     collapsedSidebar?: boolean;
 }, never>;
-declare const StyledChangeViewButtonWrap: import("styled-components").StyledComponent<import("react").NamedExoticComponent<import("react").PropsWithChildren<import("../../components/Tooltip/Tooltip").TooltipProps>>, any, {
+declare const StyledChangeViewButtonWrap: import("styled-components").StyledComponent<import("react").NamedExoticComponent<import("../..").TooltipProps>, any, {
     active?: boolean;
 }, never>;
 declare const ControlsWrap: import("styled-components").StyledComponent<"span", any, {

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { TooltipProps } from '../../core/types';
+type Props = Exclude<TooltipProps, 'arrowPosition'> & {
+    arrowPosition?: 'left' | 'right' | 'center';
+};
+export declare const Tooltip: React.NamedExoticComponent<React.PropsWithChildren<Props>>;
+export {};

package/lib/components/Tooltip/AnchorTooltip.js

@@ -0,0 +1,233 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+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', onClick, }) {
+    const tooltipWrapperRef = (0, react_1.useRef)(null);
+    const tooltipBodyRef = (0, react_1.useRef)(null);
+    const { isOpened, handleOpen, handleClose } = (0, hooks_1.useControl)(isOpen);
+    const anchorName = `--tooltip${(0, react_1.useId)().replace(/:/g, '')}`;
+    (0, hooks_1.useOutsideClick)(isOpened ? [tooltipWrapperRef, tooltipBodyRef] : tooltipWrapperRef, handleClose);
+    const isControlled = isOpen !== undefined;
+    (0, react_1.useEffect)(() => {
+        if (!isControlled)
+            return;
+        if (isOpen && !disabled) {
+            handleOpen();
+        }
+        else {
+            handleClose();
+        }
+    }, [isOpen, disabled, isControlled, handleOpen, handleClose]);
+    const controllers = !isControlled && !disabled
+        ? {
+            onMouseEnter: handleOpen,
+            onMouseLeave: handleClose,
+            onClick: (e) => {
+                onClick === null || onClick === void 0 ? void 0 : onClick(e);
+                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, { 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(-32px, -6px);
+            left: anchor(center);
+          `
+        : arrowPosition === 'right'
+            ? (0, styled_components_1.css) `
+              transform: translate(32px, -6px);
+              right: anchor(center);
+            `
+            : (0, styled_components_1.css) `
+              transform: translate(-50%, -6px);
+              left: anchor(center);
+            `}
+
+    ${({ withArrow, arrowPosition }) => withArrow &&
+        (0, styled_components_1.css) `
+        &::after {
+          border-left: 14px solid transparent;
+          border-right: 14px solid transparent;
+          border-top-width: 8px;
+          border-top-style: solid;
+          border-radius: 2px;
+          bottom: 0;
+          ${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(-32px, 6px);
+            left: anchor(center);
+          `
+        : arrowPosition === 'right'
+            ? (0, styled_components_1.css) `
+              transform: translate(32px, 6px);
+              right: anchor(center);
+            `
+            : (0, styled_components_1.css) `
+              transform: translate(-50%, 6px);
+              left: anchor(center);
+            `}
+
+    ${({ withArrow, arrowPosition }) => withArrow &&
+        (0, styled_components_1.css) `
+        &::after {
+          border-left: 14px solid transparent;
+          border-right: 14px solid transparent;
+          border-bottom-width: 8px;
+          border-bottom-style: solid;
+          border-radius: 0 0 2px 2px;
+          top: 0;
+          ${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: -7px;
+    top: anchor(center);
+    left: anchor(left);
+
+    ${({ withArrow }) => withArrow &&
+        (0, styled_components_1.css) `
+        &::after {
+          border-top: 14px solid transparent;
+          border-bottom: 14px solid transparent;
+          border-left-width: 8px;
+          border-left-style: solid;
+          border-radius: 2px 0 0 2px;
+          right: -9px;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      `}
+  `,
+    right: (0, styled_components_1.css) `
+    transform: translate(0, -50%);
+    margin-left: 7px;
+    top: anchor(center);
+    left: anchor(right);
+
+    ${({ withArrow }) => withArrow &&
+        (0, styled_components_1.css) `
+        &::after {
+          border-top: 14px solid transparent;
+          border-bottom: 14px solid transparent;
+          border-right-width: 8px;
+          border-right-style: solid;
+          border-radius: 0 2px 2px 0;
+          left: -9px;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      `}
+  `,
+};
+const TooltipWrapper = styled_components_1.default.div.attrs(({ anchorName }) => ({
+    style: {
+        anchorName: anchorName,
+    },
+})) `
+  display: flex;
+`;
+const TooltipBody = styled_components_1.default.span.attrs(({ anchorName }) => ({
+    style: {
+        positionAnchor: anchorName,
+    },
+})) `
+  position: fixed;
+  min-width: 64px;
+  padding: var(--tooltip-padding);
+  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;
+
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+
+  z-index: var(--z-index-overlay);
+
+  &::after {
+    position: absolute;
+
+    content: ' ';
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-color: var(--tooltip-arrow-color, var(--tooltip-bg-color));
+  }
+
+  background: var(--tooltip-bg-color);
+  color: var(--tooltip-text-color);
+  border: var(--tooltip-border-width, 0) var(--tooltip-border-style, solid)
+    var(--tooltip-border-color, transparent);
+  box-shadow: var(--bg-raised-shadow);
+
+  width: ${({ width }) => width || 'max-content'};
+
+  ${({ placement }) => (0, styled_components_1.css) `
+    ${PLACEMENTS[placement]};
+  `}
+`;
+//# sourceMappingURL=AnchorTooltip.js.map

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { TooltipProps } from '../../core/types';
+export declare const Tooltip: React.NamedExoticComponent<React.PropsWithChildren<TooltipProps>>;