oolib 2.223.3 → 2.225.0

package/dist/utils/customHooks/useFloatingPosition.d.ts

@@ -0,0 +1,99 @@
+import { type UseFloatingOptions, type OpenChangeReason, type UseHoverProps, type UseClickProps, type UseDismissProps, type UseFocusProps, type UseRoleProps, type ArrowOptions, type OffsetOptions, type ShiftOptions, type FlipOptions, type AutoPlacementOptions, type HideOptions, type UseTransitionStylesProps, type Middleware } from "@floating-ui/react";
+import { type CSSProperties } from "react";
+interface UseFloatingPositionPropsBase {
+    placement?: UseFloatingOptions["placement"];
+    strategy?: UseFloatingOptions["strategy"];
+    transform?: UseFloatingOptions["transform"];
+    open?: boolean;
+    onOpenChange?(open: boolean, event?: Event, reason?: OpenChangeReason): void;
+    dismissOptions?: UseDismissProps;
+    focusOptions?: UseFocusProps;
+    roleOptions?: UseRoleProps;
+    showArrow?: boolean;
+    arrowRef?: ArrowOptions["element"];
+    arrowPadding?: number;
+    enableDelayGroups?: boolean;
+    transitionOptions?: UseTransitionStylesProps;
+    customMiddleware?: Middleware[];
+    disableAutoUpdate?: boolean;
+    middlewareOptions?: {
+        offset?: {
+            enabled?: boolean;
+            config?: OffsetOptions;
+        };
+        shift?: {
+            enabled?: boolean;
+            config?: ShiftOptions;
+        };
+        flip?: {
+            enabled?: boolean;
+            config?: FlipOptions;
+        };
+        autoPlacement?: {
+            enabled?: boolean;
+            config?: AutoPlacementOptions;
+        };
+        hide?: {
+            enabled?: boolean;
+            config?: HideOptions;
+        };
+    };
+}
+interface UseFloatingPositionPropsHover extends UseFloatingPositionPropsBase {
+    enableTriggerOnClick?: false;
+    enableHover?: boolean;
+    hoverOptions?: Omit<UseHoverProps, "enabled">;
+}
+interface UseFloatingPositionPropsClick extends UseFloatingPositionPropsBase {
+    enableTriggerOnClick: true;
+    clickOptions?: Omit<UseClickProps, "enabled">;
+}
+export type UseFloatingPositionProps = UseFloatingPositionPropsHover | UseFloatingPositionPropsClick;
+export declare const useFloatingPosition: ({ placement, strategy, transform, open, onOpenChange, enableTriggerOnClick, dismissOptions, focusOptions, roleOptions, showArrow, arrowRef, arrowPadding, enableDelayGroups, transitionOptions, customMiddleware, disableAutoUpdate, middlewareOptions, ...options }: UseFloatingPositionProps) => {
+    getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getItemProps: (userProps?: Omit<React.HTMLProps<HTMLElement>, "selected" | "active"> & {
+        active?: boolean;
+        selected?: boolean;
+    }) => Record<string, unknown>;
+    strategy: import("@floating-ui/utils").Strategy;
+    y: number;
+    x: number;
+    floatingStyles: React.CSSProperties;
+    refs: {
+        reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    elements: {
+        reference: import("@floating-ui/react-dom").ReferenceType;
+        floating: HTMLElement | null;
+    } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    state: "initial" | "unmounted" | "positioned";
+    middlewareData: import("@floating-ui/core").MiddlewareData;
+    context: {
+        y: number;
+        x: number;
+        placement: import("@floating-ui/utils").Placement;
+        strategy: import("@floating-ui/utils").Strategy;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event, reason?: OpenChangeReason) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string | undefined;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+    computedPlacement: import("@floating-ui/utils").Placement;
+    isPositioned: boolean;
+    isMounted: boolean;
+    transitionStyles: CSSProperties;
+    update: () => void;
+};
+export {};

package/dist/utils/customHooks/useFloatingPosition.js

@@ -0,0 +1,102 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFloatingPosition = void 0;
+var react_1 = require("@floating-ui/react");
+var react_2 = require("react");
+var useFloatingPosition = function (_a) {
+    var placement = _a.placement, strategy = _a.strategy, transform = _a.transform, open = _a.open, onOpenChange = _a.onOpenChange, _b = _a.enableTriggerOnClick, enableTriggerOnClick = _b === void 0 ? false : _b, dismissOptions = _a.dismissOptions, focusOptions = _a.focusOptions, roleOptions = _a.roleOptions, _c = _a.showArrow, showArrow = _c === void 0 ? false : _c, arrowRef = _a.arrowRef, arrowPadding = _a.arrowPadding, _d = _a.enableDelayGroups, enableDelayGroups = _d === void 0 ? true : _d, transitionOptions = _a.transitionOptions, customMiddleware = _a.customMiddleware, _e = _a.disableAutoUpdate, disableAutoUpdate = _e === void 0 ? false : _e, _f = _a.middlewareOptions, middlewareOptions = _f === void 0 ? {} : _f, options = __rest(_a, ["placement", "strategy", "transform", "open", "onOpenChange", "enableTriggerOnClick", "dismissOptions", "focusOptions", "roleOptions", "showArrow", "arrowRef", "arrowPadding", "enableDelayGroups", "transitionOptions", "customMiddleware", "disableAutoUpdate", "middlewareOptions"]);
+    var _g = (0, react_2.useState)("unmounted"), state = _g[0], setState = _g[1];
+    var middlewares = [];
+    var offsetConfig = middlewareOptions.offset;
+    if ((offsetConfig === null || offsetConfig === void 0 ? void 0 : offsetConfig.enabled) !== false) {
+        middlewares.push((0, react_1.offset)((offsetConfig === null || offsetConfig === void 0 ? void 0 : offsetConfig.config) || 5));
+    }
+    var shiftConfig = middlewareOptions.shift;
+    if ((shiftConfig === null || shiftConfig === void 0 ? void 0 : shiftConfig.enabled) === true) {
+        middlewares.push((0, react_1.shift)(shiftConfig === null || shiftConfig === void 0 ? void 0 : shiftConfig.config));
+    }
+    // flip and autoPlacement are mutually exclusive
+    var flipConfig = middlewareOptions.flip;
+    var autoPlacementConfig = middlewareOptions.autoPlacement;
+    if ((flipConfig === null || flipConfig === void 0 ? void 0 : flipConfig.enabled) !== false && (autoPlacementConfig === null || autoPlacementConfig === void 0 ? void 0 : autoPlacementConfig.enabled) !== true) {
+        middlewares.push((0, react_1.flip)(flipConfig === null || flipConfig === void 0 ? void 0 : flipConfig.config));
+    }
+    else if ((autoPlacementConfig === null || autoPlacementConfig === void 0 ? void 0 : autoPlacementConfig.enabled) === true &&
+        (flipConfig === null || flipConfig === void 0 ? void 0 : flipConfig.enabled) !== true) {
+        middlewares.push((0, react_1.autoPlacement)(autoPlacementConfig === null || autoPlacementConfig === void 0 ? void 0 : autoPlacementConfig.config));
+    }
+    if (customMiddleware && customMiddleware.length > 0) {
+        middlewares.push.apply(middlewares, customMiddleware);
+    }
+    if (showArrow && arrowRef) {
+        middlewares.push((0, react_1.arrow)({ element: arrowRef, padding: arrowPadding }));
+    }
+    var hideConfig = middlewareOptions.hide;
+    if ((hideConfig === null || hideConfig === void 0 ? void 0 : hideConfig.enabled) === true) {
+        middlewares.push((0, react_1.hide)(hideConfig === null || hideConfig === void 0 ? void 0 : hideConfig.config));
+    }
+    var _h = (0, react_1.useFloating)({
+        placement: placement,
+        strategy: strategy,
+        transform: transform,
+        open: open,
+        onOpenChange: function (open) {
+            onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(open);
+            if (open) {
+                if (state === "unmounted")
+                    setState("initial");
+            }
+        },
+        whileElementsMounted: disableAutoUpdate ? undefined : react_1.autoUpdate,
+        middleware: middlewares,
+    }), context = _h.context, middlewareData = _h.middlewareData, isPositioned = _h.isPositioned, computedPlacement = _h.placement, update = _h.update, rest = __rest(_h, ["context", "middlewareData", "isPositioned", "placement", "update"]);
+    var delayGroupContext = (0, react_1.useDelayGroup)(context, {
+        enabled: enableDelayGroups,
+    });
+    var delayGroupDelay = enableDelayGroups && delayGroupContext
+        ? delayGroupContext.delay
+        : undefined;
+    var enableHover = "enableHover" in options ? options.enableHover : true;
+    var hover = (0, react_1.useHover)(context, __assign(__assign({}, ("hoverOptions" in options ? options.hoverOptions : {})), { enabled: !enableTriggerOnClick && enableHover !== false, delay: enableDelayGroups ? delayGroupDelay : undefined }));
+    var click = (0, react_1.useClick)(context, __assign(__assign({}, ("clickOptions" in options ? options.clickOptions : {})), { enabled: enableTriggerOnClick }));
+    var focus = (0, react_1.useFocus)(context, focusOptions);
+    var role = (0, react_1.useRole)(context, roleOptions);
+    var dismiss = (0, react_1.useDismiss)(context, dismissOptions);
+    var interactionProps = (0, react_1.useInteractions)([
+        hover,
+        click,
+        focus,
+        role,
+        dismiss,
+    ]);
+    var _j = (0, react_1.useTransitionStyles)(context, transitionOptions), isMounted = _j.isMounted, transitionStyles = _j.styles;
+    (0, react_2.useLayoutEffect)(function () {
+        if (isPositioned && state !== "positioned") {
+            setState("positioned");
+        }
+    }, [isPositioned, state]);
+    return __assign(__assign({ state: state, middlewareData: middlewareData, context: context, computedPlacement: computedPlacement, isPositioned: isPositioned, isMounted: isMounted, transitionStyles: transitionStyles, update: update }, rest), interactionProps);
+};
+exports.useFloatingPosition = useFloatingPosition;

package/dist/v2/components/TextInputs/index.styled.js

@@ -61,7 +61,7 @@ exports.InputContainerStyled = styled_components_1.default.div(templateObject_5
     var readOnly = _a.readOnly;
     return readOnly && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
 });
-exports.InputStyled = styled_components_1.default.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: ", ";\n  border: none;\n  outline: none;\n  flex-grow: 1;\n  background: transparent;\n  color: inherit;\n\n  &:-webkit-autofill {\n    transition-delay: 9999s;\n  }\n\n  ::placeholder {\n    ", ";\n    opacity: 1;\n  }\n"], ["\n  height: ", ";\n  border: none;\n  outline: none;\n  flex-grow: 1;\n  background: transparent;\n  color: inherit;\n\n  &:-webkit-autofill {\n    transition-delay: 9999s;\n  }\n\n  ::placeholder {\n    ", ";\n    opacity: 1;\n  }\n"])), function (_a) {
+exports.InputStyled = styled_components_1.default.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: ", ";\n  border: none;\n  outline: none;\n  flex-grow: 1;\n  min-width: 0; /* Allow input to shrink below its default size */\n  background: transparent;\n  color: inherit;\n\n  &:-webkit-autofill {\n    transition-delay: 9999s;\n  }\n\n  ::placeholder {\n    ", ";\n    opacity: 1;\n  }\n"], ["\n  height: ", ";\n  border: none;\n  outline: none;\n  flex-grow: 1;\n  min-width: 0; /* Allow input to shrink below its default size */\n  background: transparent;\n  color: inherit;\n\n  &:-webkit-autofill {\n    transition-delay: 9999s;\n  }\n\n  ::placeholder {\n    ", ";\n    opacity: 1;\n  }\n"])), function (_a) {
     var size = _a.size;
     return size === "S" ? "36px" : "45px";
 }, globalStyles_1.globalInputElemPlaceholderColor);

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

@@ -0,0 +1,10 @@
+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 {};

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

@@ -0,0 +1,29 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = TooltipHeading;
+var react_1 = __importDefault(require("react"));
+var Typo2_1 = require("../../Typo2");
+var defaultContainerStyle = {
+    padding: '0.8rem',
+    maxWidth: '30rem',
+};
+function TooltipHeading(_a) {
+    var heading = _a.heading, text = _a.text, containerStyle = _a.containerStyle, headingStyle = _a.headingStyle, textStyle = _a.textStyle;
+    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)));
+}

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

@@ -0,0 +1,8 @@
+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 {};

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

@@ -0,0 +1,28 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = TooltipText;
+var react_1 = __importDefault(require("react"));
+var Typo2_1 = require("../../Typo2");
+var defaultContainerStyle = {
+    padding: '0.8rem',
+    maxWidth: '30rem',
+};
+function TooltipText(_a) {
+    var text = _a.text, containerStyle = _a.containerStyle, textStyle = _a.textStyle;
+    return (react_1.default.createElement("div", { style: __assign(__assign({}, defaultContainerStyle), containerStyle) },
+        react_1.default.createElement(Typo2_1.UI_CAPTION, { style: textStyle }, text)));
+}

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

@@ -0,0 +1,2 @@
+export { default as TooltipText } from './TooltipText';
+export { default as TooltipHeading } from './TooltipHeading';

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

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipHeading = exports.TooltipText = void 0;
+var TooltipText_1 = require("./TooltipText");
+Object.defineProperty(exports, "TooltipText", { enumerable: true, get: function () { return __importDefault(TooltipText_1).default; } });
+var TooltipHeading_1 = require("./TooltipHeading");
+Object.defineProperty(exports, "TooltipHeading", { enumerable: true, get: function () { return __importDefault(TooltipHeading_1).default; } });

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

@@ -0,0 +1,21 @@
+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 {};

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

@@ -0,0 +1,216 @@
+"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);
+    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.default = Tooltip;
+var react_1 = __importStar(require("react"));
+var react_2 = require("@floating-ui/react");
+var __1 = require("../../..");
+var useFloatingPosition_1 = require("../../../utils/customHooks/useFloatingPosition");
+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 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 progressiveTimerRef = (0, react_1.useRef)(null);
+    var containerRef = (0, react_1.useRef)(null);
+    var arrowRef = (0, react_1.useRef)(null);
+    var tooltipRef = (0, react_1.useRef)(null);
+    // Progressive tooltip logic
+    (0, react_1.useEffect)(function () {
+        if (isOpen && secondaryContent) {
+            progressiveTimerRef.current = setTimeout(function () { return setShowSecondary(true); }, progressiveDelay);
+        }
+        else {
+            setShowSecondary(false);
+            if (progressiveTimerRef.current)
+                clearTimeout(progressiveTimerRef.current);
+        }
+        return function () {
+            if (progressiveTimerRef.current)
+                clearTimeout(progressiveTimerRef.current);
+        };
+    }, [isOpen, progressiveDelay, secondaryContent]);
+    var hasFadeAnimation = animation === 'fade';
+    var transitionOptions = hasFadeAnimation ? {
+        duration: 150,
+        initial: { opacity: 0 },
+        open: { opacity: 1 },
+        close: { opacity: 0 },
+    } : undefined;
+    var _s = (0, useFloatingPosition_1.useFloatingPosition)({
+        open: isOpen,
+        onOpenChange: function (open) {
+            if (followCursor)
+                return;
+            if (isPinned) {
+                if (!open) {
+                    setIsPinned(false);
+                    setIsOpen(false);
+                }
+                return;
+            }
+            setIsOpen(open);
+        },
+        placement: followCursor ? 'bottom-start' : placement,
+        showArrow: showPointer && !followCursor,
+        arrowRef: arrowRef,
+        arrowPadding: utils_1.ARROW_PADDING,
+        customMiddleware: followCursor ? undefined : [utils_1.autoSafeFlip],
+        disableAutoUpdate: followCursor,
+        enableDelayGroups: false,
+        enableHover: !isPinned && !followCursor,
+        hoverOptions: {
+            delay: { open: showDelay, close: hideDelay },
+        },
+        focusOptions: { enabled: !followCursor },
+        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'] } },
+        },
+    }), refs = _s.refs, floatingStyles = _s.floatingStyles, context = _s.context, getReferenceProps = _s.getReferenceProps, getFloatingProps = _s.getFloatingProps, isMounted = _s.isMounted, transitionStyles = _s.transitionStyles;
+    var handleMouseMove = (0, react_1.useCallback)(function (e) {
+        if (followCursor) {
+            setMousePos({ x: e.clientX, y: e.clientY });
+        }
+    }, [followCursor]);
+    var handleMouseEnter = (0, react_1.useCallback)(function (e) {
+        if (followCursor) {
+            setMousePos({ x: e.clientX, y: e.clientY });
+            setIsOpen(true);
+        }
+    }, [followCursor]);
+    var handleMouseLeave = (0, react_1.useCallback)(function () {
+        if (followCursor) {
+            setIsOpen(false);
+        }
+    }, [followCursor]);
+    var handleClick = function (e) {
+        if (followCursor)
+            return;
+        e.stopPropagation();
+        if (isOpen) {
+            setIsPinned(false);
+            setIsOpen(false);
+        }
+        else {
+            setIsPinned(true);
+            setIsOpen(true);
+        }
+    };
+    // Calculate cursor tooltip position
+    (0, react_1.useEffect)(function () {
+        if (followCursor && isOpen && tooltipRef.current) {
+            var tooltipRect = tooltipRef.current.getBoundingClientRect();
+            var viewportHeight = window.innerHeight;
+            var viewportWidth = window.innerWidth;
+            var top_1 = mousePos.y + CURSOR_HEIGHT + cursorOffset;
+            var left = mousePos.x;
+            if (top_1 + tooltipRect.height > viewportHeight - 8) {
+                top_1 = mousePos.y - tooltipRect.height - cursorOffset;
+            }
+            if (left + tooltipRect.width > viewportWidth - 8) {
+                left = viewportWidth - tooltipRect.width - 8;
+            }
+            if (left < 8) {
+                left = 8;
+            }
+            setCursorTooltipStyle({
+                position: 'fixed',
+                top: "".concat(top_1, "px"),
+                left: "".concat(left, "px"),
+            });
+        }
+    }, [followCursor, isOpen, mousePos, cursorOffset]);
+    // Render cursor-following mode
+    if (followCursor) {
+        var cursorBorderRadius = secondaryContent && showSecondary && progressiveGap === 0
+            ? "".concat(utils_1.BORDER_RADIUS, " ").concat(utils_1.BORDER_RADIUS, " 0 0")
+            : utils_1.BORDER_RADIUS;
+        var cursorSecondaryBorderRadius = progressiveGap === 0
+            ? "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),
+            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)),
+                    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 }))),
+        (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)({
+                        isPrimary: true,
+                        progressiveGap: progressiveGap,
+                        secondaryContent: !!secondaryContent,
+                        showSecondary: showSecondary,
+                        placement: placement,
+                    }), "$order": 1 },
+                    resolvedPrimaryContent && (0, utils_1.renderContent)(resolvedPrimaryContent),
+                    showPointer && react_1.default.createElement(react_2.FloatingArrow, { ref: arrowRef, context: context, fill: bgColor, tipRadius: 2 })),
+                secondaryContent && showSecondary && (react_1.default.createElement(styled_1.StyledTooltipContent, { "$bgColor": bgColor, "$textColor": textColor, "$borderRadius": (0, utils_1.getBorderRadius)({
+                        isPrimary: false,
+                        progressiveGap: progressiveGap,
+                        secondaryContent: !!secondaryContent,
+                        showSecondary: showSecondary,
+                        placement: placement,
+                    }), "$order": secondaryFirst ? 0 : 2 }, (0, utils_1.renderContent)(secondaryContent))))))));
+}

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

@@ -0,0 +1,24 @@
+export declare const tooltipFadeIn: import("styled-components").Keyframes;
+export declare const fadeSlideIn: import("styled-components").Keyframes;
+export declare const fadeAnimation: import("styled-components").FlattenSimpleInterpolation;
+export declare const slideAnimation: import("styled-components").FlattenSimpleInterpolation;
+export declare const StyledTooltipContainer: import("styled-components").StyledComponent<"div", any, {
+    $animate?: boolean;
+}, never>;
+export declare const StyledSecondaryContentWrapper: import("styled-components").StyledComponent<"div", any, {
+    $animate?: boolean;
+}, never>;
+export declare const StyledTooltipWrapper: import("styled-components").StyledComponent<"div", any, {
+    $isVertical?: boolean;
+    $gap?: number;
+}, never>;
+export declare const StyledCursorTooltipWrapper: import("styled-components").StyledComponent<"div", any, {
+    $gap?: number;
+}, never>;
+export declare const StyledTooltipContent: import("styled-components").StyledComponent<"div", any, {
+    $bgColor: string;
+    $textColor: string;
+    $borderRadius?: string;
+    $order?: number;
+}, never>;
+export declare const StyledInlineWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;