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

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/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/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/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,230 @@
+"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', }) {
+    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: 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>>;

package/lib/components/Tooltip/JsTooltip.js

@@ -0,0 +1,274 @@
+"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', }) {
+    const ref = (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 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.useLayoutEffect)(() => {
+        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 (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" }),
+        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)))));
+}
+exports.Tooltip = (0, react_1.memo)(TooltipComponent);
+const PLACEMENTS = {
+    top: (0, styled_components_1.css) `
+    ${({ withArrow, arrowPosition }) => withArrow && arrowPosition === 'left'
+        ? (0, styled_components_1.css) `
+            transform: translate(0, -100%);
+            margin-top: -10px;
+          `
+        : arrowPosition === 'right'
+            ? (0, styled_components_1.css) `
+              transform: translate(-100%, -100%);
+              margin-top: -10px;
+            `
+            : (0, styled_components_1.css) `
+              transform: translate(-50%, -100%);
+              margin-top: -10px;
+            `}
+
+    ${({ 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(99%);'}
+          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 99%);'}
+          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(99%);'}
+        }
+      `}
+  `,
+    bottom: (0, styled_components_1.css) `
+    ${({ withArrow, arrowPosition }) => withArrow && arrowPosition === 'left'
+        ? (0, styled_components_1.css) `
+            transform: translate(0, 10px);
+            margin-top: 0;
+          `
+        : arrowPosition === 'right'
+            ? (0, styled_components_1.css) `
+              transform: translate(-100%, 10px);
+              margin-top: 0;
+            `
+            : (0, styled_components_1.css) `
+              transform: translate(-50%, 10px);
+              margin-top: 0;
+            `}
+
+    ${({ 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(-99%);'}
+          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -99%);'}
+          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(-99%);'}
+        }
+      `}
+  `,
+    left: (0, styled_components_1.css) `
+    transform: translate(-100%, -50%);
+    margin-left: -10px;
+
+    ${({ withArrow, arrowPosition }) => 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;
+          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%);'}
+        }
+      `}
+  `,
+    right: (0, styled_components_1.css) `
+    transform: translate(0, -50%);
+    margin-left: 10px;
+
+    ${({ withArrow, arrowPosition }) => 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;
+          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%);'}
+        }
+      `}
+  `,
+};
+const TooltipWrapper = styled_components_1.default.div `
+  position: relative;
+  display: flex;
+`;
+const TooltipBody = styled_components_1.default.span `
+  display: inline-block;
+
+  padding: var(--tooltip-padding);
+  max-width: ${({ width }) => width || 'var(--tooltip-max-width)'};
+  white-space: normal;
+  word-break: normal;
+  overflow-wrap: break-word;
+
+  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 || 'auto'};
+  ${({ placement }) => (0, styled_components_1.css) `
+    ${PLACEMENTS[placement]};
+  `}
+`;
+//# sourceMappingURL=JsTooltip.js.map

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

@@ -1,14 +1,3 @@
 import React from 'react';
-import type { ReactNode } from 'react';
-export type TooltipProps = {
-    tip: string | ReactNode;
-    isOpen?: boolean;
-    withArrow?: boolean;
-    placement?: 'top' | 'bottom' | 'left' | 'right';
-    className?: string;
-    width?: string;
-    dataTestId?: string;
-    disabled?: boolean;
-    arrowPosition?: 'left' | 'right' | 'center';
-};
-export declare const Tooltip: React.NamedExoticComponent<React.PropsWithChildren<TooltipProps>>;
+import { TooltipProps } from '../../core/types';
+export declare const Tooltip: React.NamedExoticComponent<TooltipProps>;