oolib 2.225.2 → 2.225.4

package/dist/v2/components/Dropdowns/DropdownMulti/index.js

@@ -192,7 +192,7 @@ function DropdownMulti(_a) {
                         ? !showOptions && handleShowOptions() //if tagsStyle, then click always shows options
                         : showOptions ? handleHideOptions() : handleShowOptions(); //if dropdowns, then click toggles show/hide
                 } }, isTagsStyle ? genSelectTagsInput() : (react_1.default.createElement(SelectDropdown_1.SelectDropdown, { value: value, placeholder: placeholder, selectClassName: selectClassName, selectStyleOverride: selectStyleOverride, showOptions: showOptions, genCustomSelectComp: genCustomSelectComp, disableSelectTextUpdate: disableSelectTextUpdate, selectConfig: selectConfig, S: S, disabled: disabled, variant: variant }))),
-            react_1.default.createElement(OptionsMulti_1.OptionsMulti, { id: id, value: value, relativeToRef: selectRef, showOptions: showOptions, handleSelect: handleSelect, handleHideOptions: handleHideOptions, optionsClassName: optionsClassName, options: options, optionsFn: optionsFn, label: label, optionsModalLabel: optionsModalLabel, isTagsStyle: isTagsStyle, genCreateTagButton: genCreateTagButton, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, optionsAnchor: optionsAnchor, SelectComp: isTagsStyle && genSelectTagsInput({ style: { position: 'sticky', top: 0, zIndex: 1000 } }), setFocusSelectTagsInput: setFocusSelectTagsInput, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, S: S, alignDropdown: alignDropdown, matchSelectInputWidth: matchSelectInputWidth, searchbarPlaceholder: searchbarPlaceholder, isSearchable: isTagsStyle ? false : isSearchable, searchString: searchString, setSearchString: setSearchString })));
+            react_1.default.createElement(OptionsMulti_1.OptionsMulti, { parentOnChange: parentOnChange, id: id, value: value, relativeToRef: selectRef, showOptions: showOptions, handleSelect: handleSelect, handleHideOptions: handleHideOptions, optionsClassName: optionsClassName, options: options, optionsFn: optionsFn, label: label, optionsModalLabel: optionsModalLabel, isTagsStyle: isTagsStyle, genCreateTagButton: genCreateTagButton, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, optionsAnchor: optionsAnchor, SelectComp: isTagsStyle && genSelectTagsInput({ style: { position: 'sticky', top: 0, zIndex: 1000 } }), setFocusSelectTagsInput: setFocusSelectTagsInput, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, S: S, alignDropdown: alignDropdown, matchSelectInputWidth: matchSelectInputWidth, searchbarPlaceholder: searchbarPlaceholder, isSearchable: isTagsStyle ? false : isSearchable, searchString: searchString, setSearchString: setSearchString })));
     };
     return (react_1.default.createElement("div", { className: "OKE-Dropdown ".concat(className, " OKE-Dropdown--").concat(readOnly ? "displayComp" : "inputComp") },
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),

package/dist/v2/components/Dropdowns/comps/OptionsMulti/index.d.ts

@@ -1,4 +1,4 @@
-export function OptionsMulti({ lightboxHeight, lightboxStyle, optionsAnchor, value, id, optionsClassName, relativeToRef, showOptions, handleHideOptions, handleSelect, options, isSearchable, label, optionsModalLabel, searchString, setSearchString, SelectComp, isTagsStyle, genCreateTagButton, setFocusSelectTagsInput, popOutOfOverflowHiddenParent, S, searchbarPlaceholder, alignDropdown, matchSelectInputWidth }: {
+export function OptionsMulti({ lightboxHeight, lightboxStyle, optionsAnchor, value, id, optionsClassName, relativeToRef, showOptions, handleHideOptions, handleSelect, options, parentOnChange, isSearchable, label, optionsModalLabel, searchString, setSearchString, SelectComp, isTagsStyle, genCreateTagButton, setFocusSelectTagsInput, popOutOfOverflowHiddenParent, S, searchbarPlaceholder, alignDropdown, matchSelectInputWidth }: {
     lightboxHeight: any;
     lightboxStyle: any;
     optionsAnchor: any;
@@ -10,6 +10,7 @@ export function OptionsMulti({ lightboxHeight, lightboxStyle, optionsAnchor, val
     handleHideOptions: any;
     handleSelect: any;
     options: any;
+    parentOnChange: any;
     isSearchable: any;
     label: any;
     optionsModalLabel: any;

package/dist/v2/components/Dropdowns/comps/OptionsMulti/index.js

@@ -46,7 +46,7 @@ var OptionsMulti = function (_a) {
     lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, optionsAnchor = _a.optionsAnchor, value = _a.value, id = _a.id, optionsClassName = _a.optionsClassName, 
     //from Dropdown
     relativeToRef = _a.relativeToRef, //the element that this lightbox is being rendered against. i.e top or bottom
-    showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, handleSelect = _a.handleSelect, options = _a.options, isSearchable = _a.isSearchable, label = _a.label, optionsModalLabel = _a.optionsModalLabel, //label is just a fallback for optionsModalLabel. Don't know why both are needed
+    showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, handleSelect = _a.handleSelect, options = _a.options, parentOnChange = _a.parentOnChange, isSearchable = _a.isSearchable, label = _a.label, optionsModalLabel = _a.optionsModalLabel, //label is just a fallback for optionsModalLabel. Don't know why both are needed
     searchString = _a.searchString, setSearchString = _a.setSearchString, SelectComp = _a.SelectComp, // for mobile
     isTagsStyle = _a.isTagsStyle, genCreateTagButton = _a.genCreateTagButton, setFocusSelectTagsInput = _a.setFocusSelectTagsInput, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, searchbarPlaceholder = _a.searchbarPlaceholder, alignDropdown = _a.alignDropdown, matchSelectInputWidth = _a.matchSelectInputWidth;
     //INIT ORIENTATION STATE AND CUSTOM HOOK
@@ -84,10 +84,20 @@ var OptionsMulti = function (_a) {
     (0, react_1.useEffect)(function () {
         setSearchBarFocus(showOptions);
     }, [showOptions]);
+    var handleClearAll = function () {
+        parentOnChange(id, []);
+        setSearchString('');
+    };
     var createSelectedOptions = function () {
         return (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0 && (react_1.default.createElement("div", null,
-            react_1.default.createElement("div", { style: { padding: "0.4rem 0.8rem" } },
-                react_1.default.createElement(__1.UI_TAG, null, "Selected")),
+            react_1.default.createElement("div", { style: {
+                    padding: "0 0.8rem",
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                } },
+                react_1.default.createElement(__1.UI_TAG, null, "Selected"),
+                react_1.default.createElement(__1.ButtonTertiaryCompact, { onClick: handleClearAll, children: "Clear all", icon: "X" })),
             react_1.default.createElement(List_1.List, { key: value, options: selectedOptions, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: function (id, v) {
                     return handleSelect(v);
                 }, setSearchString: setSearchString, optionsClassName: optionsClassName, setFocusSelectTagsInput: setFocusSelectTagsInput, S: S, isMulti: true, style: { padding: "0" }, disableShadow: true }),
@@ -96,7 +106,6 @@ var OptionsMulti = function (_a) {
     };
     return (react_1.default.createElement(OptionsShell_1.OptionsShell, { ref: optionsRef, yOrientation: yOrientation, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, options: options, optionsAnchor: optionsAnchor, showOptions: showOptions, handleHideOptions: handleHideOptions, SelectComp: SelectComp, label: label, optionsModalLabel: optionsModalLabel, showDoneButton: true, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, relativeToRef: relativeToRef, S: S, alignDropdown: alignDropdown, matchSelectInputWidth: matchSelectInputWidth },
         react_1.default.createElement(List_1.List, { options: options, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: function (id, v) {
-                console.log({ id: id, v: v });
                 handleSelect(v);
             }, optionsClassName: optionsClassName, S: S, isMulti: true, disableShadow: true, isSearchable: isSearchable, searchbarPlaceholder: searchbarPlaceholder, searchBarFocus: searchBarFocus, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus, children: !isTagsStyle && createSelectedOptions(), showList: showOptions, usedIn: "dropdown" }),
         genCreateTagButton && genCreateTagButton(options)));

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, }: 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;
     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,7 +192,7 @@ 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.StyledTooltipContent, { "$bgColor": bgColor, "$textColor": textColor, "$borderRadius": cursorBorderRadius }, resolvedPrimaryContent && (0, utils_1.renderContent)(resolvedPrimaryContent)),
@@ -194,7 +201,7 @@ function Tooltip(_a) {
     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.StyledTooltipContent, { "$bgColor": bgColor, "$textColor": textColor, "$borderRadius": (0, utils_1.getBorderRadius)({

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

@@ -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,64 @@
+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';
+}
+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.2",
+  "version": "2.225.4",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",