oolib 2.225.3 → 2.225.5

package/dist/v2/components/List/comps/ListItem.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -48,12 +59,13 @@ var themes_1 = require("../../../themes");
 var genColor_1 = require("../../Dropdowns/utils/genColor");
 var RadioAndCheckbox_1 = require("../../RadioAndCheckbox");
 var styled_1 = require("./styled");
+var Tooltip_1 = __importDefault(require("../../Tooltip"));
 var grey40 = themes_1.colors.grey40, grey80 = themes_1.colors.grey80, grey60 = themes_1.colors.grey60;
 var ListItem = function (_a) {
     var id = _a.id, option = _a.option, isSelected = _a.isSelected, isFocussed = _a.isFocussed, scrollFocussedOpIntoView = _a.scrollFocussedOpIntoView, parentOnChange = _a.onChange, setSearchString = _a.setSearchString, optionsClassName = _a.optionsClassName, S = _a.S, observerRef = _a.observerRef, isTagsStyle = _a.isTagsStyle, isMulti = _a.isMulti, value = _a.value, index = _a.index, _b = _a.alignCheckbox, alignCheckbox = _b === void 0 ? "left" : _b, iconAfter = _a.iconAfter;
     var theme = (0, styled_components_1.useTheme)();
     var TypoComp = S ? Typo2_1.UI_BODY_SM_DF : Typo2_1.UI_BODY_SM_DF;
-    var image = option.image, display = option.display, icon = option.icon, desc = option.desc, color = option.color, loading = option.loading, disabled = option.disabled;
+    var image = option.image, display = option.display, icon = option.icon, desc = option.desc, color = option.color, loading = option.loading, disabled = option.disabled, tooltip = option.tooltip;
     var handleClick = function () {
         if (!loading) {
             parentOnChange(id, option);
@@ -73,7 +85,7 @@ var ListItem = function (_a) {
         }
         return null;
     };
-    return (react_1.default.createElement(styled_1.StyledListItemWrapper, { index: index, isSelected: isSelected, isFocussed: isFocussed, className: "OKE-Dropdown__option", ref: function (el) { return isFocussed && el && scrollFocussedOpIntoView(el); }, onClick: handleClick, S: S, style: { pointerEvents: disabled && "none", cursor: !disabled && "pointer" } },
+    var listItemContent = (react_1.default.createElement(styled_1.StyledListItemWrapper, { index: index, isSelected: isSelected, isFocussed: isFocussed, className: "OKE-Dropdown__option", ref: function (el) { return isFocussed && el && scrollFocussedOpIntoView(el); }, onClick: handleClick, S: S, style: { pointerEvents: disabled && "none", cursor: !disabled && "pointer" } },
         react_1.default.createElement(styled_1.StyledWrapper, { ref: observerRef, style: {
                 display: "flex",
                 alignItems: desc ? "flex-start" : "center",
@@ -106,5 +118,10 @@ var ListItem = function (_a) {
                 className: "OKE-Dropdown__optionIcon",
                 disabled: disabled
             }))));
+    if (tooltip) {
+        var tooltipProps = typeof tooltip === 'string' ? { text: tooltip } : tooltip;
+        return (react_1.default.createElement(Tooltip_1.default, __assign({ placement: "right", wrapperDisplay: "block" }, tooltipProps), listItemContent));
+    }
+    return listItemContent;
 };
 exports.ListItem = ListItem;

package/dist/v2/components/Tooltip/Layout/TooltipHeading.d.ts

@@ -1,10 +1,3 @@
 import React from 'react';
-interface TooltipHeadingProps {
-    heading: string;
-    text: string;
-    containerStyle?: React.CSSProperties;
-    headingStyle?: React.CSSProperties;
-    textStyle?: React.CSSProperties;
-}
-export default function TooltipHeading({ heading, text, containerStyle, headingStyle, textStyle }: TooltipHeadingProps): React.JSX.Element;
-export {};
+import { TooltipHeadingProps } from '../types';
+export default function TooltipHeading({ heading, text, blocks, containerStyle, headingStyle, textStyle, linkStyle, }: TooltipHeadingProps): React.JSX.Element;

package/dist/v2/components/Tooltip/Layout/TooltipHeading.js

@@ -17,13 +17,42 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = TooltipHeading;
 var react_1 = __importDefault(require("react"));
 var Typo2_1 = require("../../Typo2");
+var utils_1 = require("../utils");
 var defaultContainerStyle = {
     padding: '0.8rem',
     maxWidth: '30rem',
 };
+var renderBlock = function (block, index, headingStyle, textStyle, linkStyle) {
+    var heading = block.heading, text = block.text, link = block.link;
+    var linkElement = link ? (0, utils_1.renderLink)(link, linkStyle) : null;
+    var position = (link === null || link === void 0 ? void 0 : link.position) || 'end';
+    var renderLine = function (content, showLink, TextComponent, style) {
+        if (!content && !showLink)
+            return null;
+        if (!content)
+            return react_1.default.createElement(TextComponent, { style: style }, linkElement);
+        return (react_1.default.createElement(TextComponent, { style: style },
+            position === 'start' && showLink && react_1.default.createElement(react_1.default.Fragment, null,
+                linkElement,
+                " "),
+            content,
+            position === 'end' && showLink && linkElement && react_1.default.createElement(react_1.default.Fragment, null,
+                " ",
+                linkElement)));
+    };
+    return (react_1.default.createElement("div", { key: index, style: { marginTop: index > 0 ? '0.6rem' : 0 } },
+        heading && renderLine(heading, !text, Typo2_1.UI_CAPTION_SEMIBOLD, headingStyle),
+        (text || (!heading && link)) && renderLine(text, true, Typo2_1.UI_CAPTION, textStyle)));
+};
 function TooltipHeading(_a) {
-    var heading = _a.heading, text = _a.text, containerStyle = _a.containerStyle, headingStyle = _a.headingStyle, textStyle = _a.textStyle;
+    var heading = _a.heading, text = _a.text, blocks = _a.blocks, containerStyle = _a.containerStyle, headingStyle = _a.headingStyle, textStyle = _a.textStyle, linkStyle = _a.linkStyle;
+    // If blocks are provided, use the new multi-block rendering
+    if (blocks && blocks.length > 0) {
+        return (react_1.default.createElement("div", { style: __assign(__assign({}, defaultContainerStyle), containerStyle) }, blocks.map(function (block, index) {
+            return renderBlock(block, index, headingStyle, textStyle, linkStyle);
+        })));
+    }
     return (react_1.default.createElement("div", { style: __assign(__assign({}, defaultContainerStyle), containerStyle) },
-        react_1.default.createElement(Typo2_1.UI_CAPTION_SEMIBOLD, { style: headingStyle }, heading),
-        react_1.default.createElement(Typo2_1.UI_CAPTION, { style: textStyle }, text)));
+        heading && (react_1.default.createElement(Typo2_1.UI_CAPTION_SEMIBOLD, { style: headingStyle }, heading)),
+        text && (react_1.default.createElement(Typo2_1.UI_CAPTION, { style: textStyle }, text))));
 }

package/dist/v2/components/Tooltip/Layout/TooltipText.d.ts

@@ -1,8 +1,3 @@
 import React from 'react';
-interface TooltipTextProps {
-    text: string;
-    containerStyle?: React.CSSProperties;
-    textStyle?: React.CSSProperties;
-}
-export default function TooltipText({ text, containerStyle, textStyle }: TooltipTextProps): React.JSX.Element;
-export {};
+import { TooltipTextProps } from '../types';
+export default function TooltipText({ text, link, containerStyle, textStyle, linkStyle }: TooltipTextProps): React.JSX.Element;

package/dist/v2/components/Tooltip/Layout/TooltipText.js

@@ -17,12 +17,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = TooltipText;
 var react_1 = __importDefault(require("react"));
 var Typo2_1 = require("../../Typo2");
+var utils_1 = require("../utils");
 var defaultContainerStyle = {
     padding: '0.8rem',
     maxWidth: '30rem',
 };
 function TooltipText(_a) {
-    var text = _a.text, containerStyle = _a.containerStyle, textStyle = _a.textStyle;
+    var text = _a.text, link = _a.link, containerStyle = _a.containerStyle, textStyle = _a.textStyle, linkStyle = _a.linkStyle;
+    var position = (link === null || link === void 0 ? void 0 : link.position) || 'end';
+    var linkElement = link ? (0, utils_1.renderLink)(link, linkStyle) : null;
     return (react_1.default.createElement("div", { style: __assign(__assign({}, defaultContainerStyle), containerStyle) },
-        react_1.default.createElement(Typo2_1.UI_CAPTION, { style: textStyle }, text)));
+        react_1.default.createElement(Typo2_1.UI_CAPTION, { style: textStyle },
+            position === 'start' && linkElement,
+            position === 'start' && linkElement && text && ' ',
+            text,
+            position === 'end' && linkElement && text && ' ',
+            position === 'end' && linkElement)));
 }

package/dist/v2/components/Tooltip/index.d.ts

@@ -1,21 +1,3 @@
 import React from 'react';
-import { ContentConfig } from './utils';
-interface TooltipProps {
-    text?: string;
-    heading?: string;
-    primaryContent?: ContentConfig;
-    secondaryContent?: ContentConfig;
-    progressiveDelay?: number;
-    progressiveGap?: number;
-    children: React.ReactElement;
-    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
-    showPointer?: boolean;
-    showDelay?: number;
-    hideDelay?: number;
-    animation?: 'fade' | 'none';
-    followCursor?: boolean;
-    cursorOffset?: number;
-    invert?: boolean;
-}
-export default function Tooltip({ text, heading, primaryContent, secondaryContent, progressiveDelay, progressiveGap, children, placement, showPointer, showDelay, hideDelay, animation, followCursor, cursorOffset, invert, }: TooltipProps): React.JSX.Element;
-export {};
+import { TooltipProps } from './types';
+export default function Tooltip({ text, heading, primaryContent, secondaryContent, progressiveDelay, progressiveGap, children, placement, showPointer, showDelay, hideDelay, animation, followCursor, cursorOffset, invert, wrapperDisplay, trigger, style, }: TooltipProps): React.JSX.Element;

package/dist/v2/components/Tooltip/index.js

@@ -53,15 +53,15 @@ var utils_1 = require("./utils");
 var styled_1 = require("./styled");
 var CURSOR_HEIGHT = 20;
 function Tooltip(_a) {
-    var text = _a.text, heading = _a.heading, primaryContent = _a.primaryContent, secondaryContent = _a.secondaryContent, _b = _a.progressiveDelay, progressiveDelay = _b === void 0 ? 1000 : _b, _c = _a.progressiveGap, progressiveGap = _c === void 0 ? 8 : _c, children = _a.children, _d = _a.placement, placement = _d === void 0 ? 'top' : _d, _e = _a.showPointer, showPointer = _e === void 0 ? true : _e, _f = _a.showDelay, showDelay = _f === void 0 ? 0 : _f, _g = _a.hideDelay, hideDelay = _g === void 0 ? 0 : _g, _h = _a.animation, animation = _h === void 0 ? 'none' : _h, _j = _a.followCursor, followCursor = _j === void 0 ? false : _j, _k = _a.cursorOffset, cursorOffset = _k === void 0 ? 10 : _k, _l = _a.invert, invert = _l === void 0 ? false : _l;
+    var text = _a.text, heading = _a.heading, primaryContent = _a.primaryContent, secondaryContent = _a.secondaryContent, _b = _a.progressiveDelay, progressiveDelay = _b === void 0 ? 1000 : _b, _c = _a.progressiveGap, progressiveGap = _c === void 0 ? 8 : _c, children = _a.children, _d = _a.placement, placement = _d === void 0 ? 'top' : _d, _e = _a.showPointer, showPointer = _e === void 0 ? true : _e, _f = _a.showDelay, showDelay = _f === void 0 ? 0 : _f, _g = _a.hideDelay, hideDelay = _g === void 0 ? 0 : _g, _h = _a.animation, animation = _h === void 0 ? 'none' : _h, _j = _a.followCursor, followCursor = _j === void 0 ? false : _j, _k = _a.cursorOffset, cursorOffset = _k === void 0 ? 10 : _k, _l = _a.invert, invert = _l === void 0 ? false : _l, wrapperDisplay = _a.wrapperDisplay, _m = _a.trigger, trigger = _m === void 0 ? 'hover' : _m, style = _a.style;
     var bgColor = invert ? __1.colors2.white : __1.colors2.black;
     var textColor = invert ? __1.colors2.black : __1.colors2.white;
     var resolvedPrimaryContent = (0, utils_1.resolvePrimaryContent)(text, heading, primaryContent);
-    var _m = (0, react_1.useState)(false), isOpen = _m[0], setIsOpen = _m[1];
-    var _o = (0, react_1.useState)(false), showSecondary = _o[0], setShowSecondary = _o[1];
-    var _p = (0, react_1.useState)(false), isPinned = _p[0], setIsPinned = _p[1];
-    var _q = (0, react_1.useState)({ x: 0, y: 0 }), mousePos = _q[0], setMousePos = _q[1];
-    var _r = (0, react_1.useState)({}), cursorTooltipStyle = _r[0], setCursorTooltipStyle = _r[1];
+    var _o = (0, react_1.useState)(false), isOpen = _o[0], setIsOpen = _o[1];
+    var _p = (0, react_1.useState)(false), showSecondary = _p[0], setShowSecondary = _p[1];
+    var _q = (0, react_1.useState)(false), isPinned = _q[0], setIsPinned = _q[1];
+    var _r = (0, react_1.useState)({ x: 0, y: 0 }), mousePos = _r[0], setMousePos = _r[1];
+    var _s = (0, react_1.useState)({}), cursorTooltipStyle = _s[0], setCursorTooltipStyle = _s[1];
     var progressiveTimerRef = (0, react_1.useRef)(null);
     var containerRef = (0, react_1.useRef)(null);
     var arrowRef = (0, react_1.useRef)(null);
@@ -88,11 +88,17 @@ function Tooltip(_a) {
         open: { opacity: 1 },
         close: { opacity: 0 },
     } : undefined;
-    var _s = (0, useFloatingPosition_1.useFloatingPosition)({
+    var isClickTrigger = trigger === 'click';
+    var _t = (0, useFloatingPosition_1.useFloatingPosition)({
         open: isOpen,
         onOpenChange: function (open) {
             if (followCursor)
                 return;
+            if (isClickTrigger) {
+                // For click trigger, toggle on click
+                setIsOpen(open);
+                return;
+            }
             if (isPinned) {
                 if (!open) {
                     setIsPinned(false);
@@ -108,21 +114,22 @@ function Tooltip(_a) {
         arrowPadding: utils_1.ARROW_PADDING,
         customMiddleware: followCursor ? undefined : [utils_1.autoSafeFlip],
         disableAutoUpdate: followCursor,
-        enableDelayGroups: false,
-        enableHover: !isPinned && !followCursor,
+        enableDelayGroups: !isClickTrigger,
+        enableTriggerOnClick: isClickTrigger,
+        enableHover: !isClickTrigger && !isPinned && !followCursor,
         hoverOptions: {
             delay: { open: showDelay, close: hideDelay },
         },
-        focusOptions: { enabled: !followCursor },
+        focusOptions: { enabled: !followCursor && !isClickTrigger },
         dismissOptions: { enabled: !followCursor },
         roleOptions: { role: 'tooltip' },
         transitionOptions: transitionOptions,
         middlewareOptions: {
             offset: { config: followCursor ? cursorOffset : 10 },
             shift: { enabled: true, config: { padding: 8 } },
-            flip: { enabled: followCursor, config: { fallbackPlacements: ['top-start'] } },
+            flip: { enabled: true, config: followCursor ? { fallbackPlacements: ['top-start'] } : { fallbackAxisSideDirection: 'start' } },
         },
-    }), refs = _s.refs, floatingStyles = _s.floatingStyles, context = _s.context, getReferenceProps = _s.getReferenceProps, getFloatingProps = _s.getFloatingProps, isMounted = _s.isMounted, transitionStyles = _s.transitionStyles;
+    }), refs = _t.refs, floatingStyles = _t.floatingStyles, context = _t.context, getReferenceProps = _t.getReferenceProps, getFloatingProps = _t.getFloatingProps, isMounted = _t.isMounted, transitionStyles = _t.transitionStyles;
     var handleMouseMove = (0, react_1.useCallback)(function (e) {
         if (followCursor) {
             setMousePos({ x: e.clientX, y: e.clientY });
@@ -140,8 +147,8 @@ function Tooltip(_a) {
         }
     }, [followCursor]);
     var handleClick = function (e) {
-        if (followCursor)
-            return;
+        if (followCursor || isClickTrigger)
+            return; //useClick
         e.stopPropagation();
         if (isOpen) {
             setIsPinned(false);
@@ -185,18 +192,18 @@ function Tooltip(_a) {
             ? "0 0 ".concat(utils_1.BORDER_RADIUS, " ").concat(utils_1.BORDER_RADIUS)
             : utils_1.BORDER_RADIUS;
         return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(styled_1.StyledInlineWrapper, { ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove }, children),
+            react_1.default.createElement(styled_1.StyledInlineWrapper, { ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, "$display": wrapperDisplay }, children),
             isOpen && (react_1.default.createElement(react_2.FloatingPortal, null,
-                react_1.default.createElement(styled_1.StyledCursorTooltipWrapper, { ref: tooltipRef, style: cursorTooltipStyle, "$gap": progressiveGap },
+                react_1.default.createElement(styled_1.StyledCursorTooltipWrapper, { ref: tooltipRef, style: __assign(__assign({}, cursorTooltipStyle), style), "$gap": progressiveGap },
                     react_1.default.createElement(styled_1.StyledTooltipContent, { "$bgColor": bgColor, "$textColor": textColor, "$borderRadius": cursorBorderRadius }, resolvedPrimaryContent && (0, utils_1.renderContent)(resolvedPrimaryContent)),
                     secondaryContent && showSecondary && (react_1.default.createElement(styled_1.StyledTooltipContent, { "$bgColor": bgColor, "$textColor": textColor, "$borderRadius": cursorSecondaryBorderRadius }, (0, utils_1.renderContent)(secondaryContent))))))));
     }
     var isVertical = placement.startsWith('top') || placement.startsWith('bottom');
     var secondaryFirst = placement.startsWith('top') || placement.startsWith('left');
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.cloneElement(children, __assign({ ref: refs.setReference }, getReferenceProps({ onClick: handleClick }))),
+        react_1.default.createElement(styled_1.StyledInlineWrapper, __assign({ ref: refs.setReference }, getReferenceProps({ onClick: handleClick }), { "$display": wrapperDisplay }), children),
         (hasFadeAnimation ? isMounted : isOpen) && (react_1.default.createElement(react_2.FloatingPortal, null,
-            react_1.default.createElement(styled_1.StyledTooltipWrapper, __assign({ ref: refs.setFloating, style: __assign(__assign({}, floatingStyles), (hasFadeAnimation ? transitionStyles : {})), "$isVertical": isVertical, "$gap": progressiveGap }, getFloatingProps()),
+            react_1.default.createElement(styled_1.StyledTooltipWrapper, __assign({ ref: refs.setFloating, style: __assign(__assign(__assign({}, floatingStyles), (hasFadeAnimation ? transitionStyles : {})), style), "$isVertical": isVertical, "$gap": progressiveGap }, getFloatingProps()),
                 react_1.default.createElement(styled_1.StyledTooltipContent, { "$bgColor": bgColor, "$textColor": textColor, "$borderRadius": (0, utils_1.getBorderRadius)({
                         isPrimary: true,
                         progressiveGap: progressiveGap,

package/dist/v2/components/Tooltip/styled.d.ts

@@ -21,4 +21,6 @@ export declare const StyledTooltipContent: import("styled-components").StyledCom
     $borderRadius?: string;
     $order?: number;
 }, never>;
-export declare const StyledInlineWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledInlineWrapper: import("styled-components").StyledComponent<"div", any, {
+    $display?: "inline-block" | "block" | "contents";
+}, never>;

package/dist/v2/components/Tooltip/styled.js

@@ -53,14 +53,14 @@ exports.StyledSecondaryContentWrapper = styled_components_1.default.div(template
     var $animate = _a.$animate;
     return $animate && exports.slideAnimation;
 });
-exports.StyledTooltipWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    z-index: 9999;\n    display: flex;\n    flex-direction: ", ";\n    gap: ", ";\n"], ["\n    z-index: 9999;\n    display: flex;\n    flex-direction: ", ";\n    gap: ", ";\n"])), function (_a) {
+exports.StyledTooltipWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    z-index: 1000000000;\n    display: flex;\n    flex-direction: ", ";\n    gap: ", ";\n"], ["\n    z-index: 1000000000;\n    display: flex;\n    flex-direction: ", ";\n    gap: ", ";\n"])), function (_a) {
     var $isVertical = _a.$isVertical;
     return ($isVertical ? 'column' : 'row');
 }, function (_a) {
     var _b = _a.$gap, $gap = _b === void 0 ? 0 : _b;
     return "".concat($gap, "px");
 });
-exports.StyledCursorTooltipWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    z-index: 9999;\n    pointer-events: none;\n    display: flex;\n    flex-direction: column;\n    gap: ", ";\n"], ["\n    z-index: 9999;\n    pointer-events: none;\n    display: flex;\n    flex-direction: column;\n    gap: ", ";\n"])), function (_a) {
+exports.StyledCursorTooltipWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    z-index: 1000000000;\n    pointer-events: none;\n    display: flex;\n    flex-direction: column;\n    gap: ", ";\n"], ["\n    z-index: 1000000000;\n    pointer-events: none;\n    display: flex;\n    flex-direction: column;\n    gap: ", ";\n"])), function (_a) {
     var _b = _a.$gap, $gap = _b === void 0 ? 0 : _b;
     return "".concat($gap, "px");
 });
@@ -77,5 +77,8 @@ exports.StyledTooltipContent = styled_components_1.default.div(templateObject_9
     var $order = _a.$order;
     return $order !== undefined && "order: ".concat($order, ";");
 });
-exports.StyledInlineWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: inline-block;\n"], ["\n    display: inline-block;\n"])));
+exports.StyledInlineWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: ", ";\n"], ["\n    display: ", ";\n"])), function (_a) {
+    var _b = _a.$display, $display = _b === void 0 ? 'inline-block' : _b;
+    return $display;
+});
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

package/dist/v2/components/Tooltip/types.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+export interface TooltipLink {
+    text: string;
+    href: string;
+    position?: 'start' | 'end';
+    newTab?: boolean;
+}
+export interface TooltipTextProps {
+    text?: string;
+    link?: TooltipLink;
+    containerStyle?: React.CSSProperties;
+    textStyle?: React.CSSProperties;
+    linkStyle?: React.CSSProperties;
+}
+export interface ContentBlock {
+    heading?: string;
+    text?: string;
+    link?: TooltipLink;
+}
+export interface TooltipHeadingProps {
+    heading?: string;
+    text?: string;
+    blocks?: ContentBlock[];
+    containerStyle?: React.CSSProperties;
+    headingStyle?: React.CSSProperties;
+    textStyle?: React.CSSProperties;
+    linkStyle?: React.CSSProperties;
+}
+export type ContentConfig = {
+    layout: 'TooltipText';
+    props: TooltipTextProps;
+} | {
+    layout: 'TooltipHeading';
+    props: TooltipHeadingProps;
+} | {
+    layout: 'custom';
+    render: React.ReactNode;
+};
+export interface TooltipProps {
+    text?: string;
+    heading?: string;
+    primaryContent?: ContentConfig;
+    secondaryContent?: ContentConfig;
+    progressiveDelay?: number;
+    progressiveGap?: number;
+    children: React.ReactElement;
+    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+    showPointer?: boolean;
+    showDelay?: number;
+    hideDelay?: number;
+    animation?: 'fade' | 'none';
+    followCursor?: boolean;
+    cursorOffset?: number;
+    invert?: boolean;
+    wrapperDisplay?: 'inline-block' | 'block' | 'contents';
+    trigger?: 'hover' | 'click';
+    style?: React.CSSProperties;
+}
+export interface GetBorderRadiusOptions {
+    isPrimary: boolean;
+    progressiveGap: number;
+    secondaryContent: boolean;
+    showSecondary: boolean;
+    placement: string;
+}

package/dist/v2/components/Tooltip/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/v2/components/Tooltip/utils/index.d.ts

@@ -1,26 +1,9 @@
 import React from 'react';
-import { TooltipText, TooltipHeading } from '../Layout';
+import { ContentConfig, GetBorderRadiusOptions, TooltipLink } from '../types';
 export { autoSafeFlip, ARROW_PADDING } from './autoSafeFlip';
-type TooltipTextProps = React.ComponentProps<typeof TooltipText>;
-type TooltipHeadingProps = React.ComponentProps<typeof TooltipHeading>;
-export type ContentConfig = {
-    layout: 'TooltipText';
-    props: TooltipTextProps;
-} | {
-    layout: 'TooltipHeading';
-    props: TooltipHeadingProps;
-} | {
-    layout: 'custom';
-    render: React.ReactNode;
-};
+export type { ContentConfig } from '../types';
 export declare const renderContent: (config: ContentConfig) => React.ReactNode;
 export declare const resolvePrimaryContent: (text?: string, heading?: string, primaryContent?: ContentConfig) => ContentConfig | null;
 export declare const BORDER_RADIUS = "0.8rem";
-interface GetBorderRadiusOptions {
-    isPrimary: boolean;
-    progressiveGap: number;
-    secondaryContent: boolean;
-    showSecondary: boolean;
-    placement: string;
-}
 export declare const getBorderRadius: ({ isPrimary, progressiveGap, secondaryContent, showSecondary, placement, }: GetBorderRadiusOptions) => string;
+export declare const renderLink: (link: TooltipLink, linkStyle?: React.CSSProperties) => React.JSX.Element;

package/dist/v2/components/Tooltip/utils/index.js

@@ -3,9 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBorderRadius = exports.BORDER_RADIUS = exports.resolvePrimaryContent = exports.renderContent = exports.ARROW_PADDING = exports.autoSafeFlip = void 0;
+exports.renderLink = exports.getBorderRadius = exports.BORDER_RADIUS = exports.resolvePrimaryContent = exports.renderContent = exports.ARROW_PADDING = exports.autoSafeFlip = void 0;
 var react_1 = __importDefault(require("react"));
 var Layout_1 = require("../Layout");
+var OKELink_1 = require("../../OKELink");
 var autoSafeFlip_1 = require("./autoSafeFlip");
 Object.defineProperty(exports, "autoSafeFlip", { enumerable: true, get: function () { return autoSafeFlip_1.autoSafeFlip; } });
 Object.defineProperty(exports, "ARROW_PADDING", { enumerable: true, get: function () { return autoSafeFlip_1.ARROW_PADDING; } });
@@ -64,3 +65,8 @@ var getBorderRadius = function (_a) {
         : "0 ".concat(exports.BORDER_RADIUS, " ").concat(exports.BORDER_RADIUS, " 0");
 };
 exports.getBorderRadius = getBorderRadius;
+var renderLink = function (link, linkStyle) {
+    var invertUnderline = (linkStyle === null || linkStyle === void 0 ? void 0 : linkStyle.textDecoration) === 'none';
+    return (react_1.default.createElement(OKELink_1.OKELink, { link: link.href, text: link.text, color: "white", invertUnderline: invertUnderline, style: linkStyle }));
+};
+exports.renderLink = renderLink;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.225.3",
+  "version": "2.225.5",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",