@geotab/zenith 3.3.0 → 3.4.0-beta.0

package/dist/tooltip/tooltip.js

@@ -1,30 +1,92 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+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 __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+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 (mod) {
+  if (mod && mod.__esModule) return mod;
+  var result = {};
+  if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+  __setModuleDefault(result, mod);
+  return result;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.Tooltip = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+injectString("cs", "Information", "Informace");
+injectString("da-DK", "Information", "Information");
+injectString("de", "Information", "Information");
+injectString("en", "Information", "Information");
+injectString("es", "Information", "Informaci\xF3n");
+injectString("fi-FI", "Information", "Tiedot");
+injectString("fr", "Information", "Renseignements");
+injectString("fr-FR", "Information", "Informations");
+injectString("hu-HU", "Information", "Inform\xE1ci\xF3");
+injectString("id", "Information", "Informasi");
+injectString("it", "Information", "Informazioni");
+injectString("ja", "Information", "\u60C5\u5831");
+injectString("ko-KR", "Information", "\uC815\uBCF4");
+injectString("ms", "Information", "Maklumat");
+injectString("nb-NO", "Information", "Informasjon");
+injectString("nl", "Information", "Informatie");
+injectString("pl", "Information", "Informacje");
+injectString("pt-BR", "Information", "Informa\xE7\xF5es");
+injectString("sk-SK", "Information", "Inform\xE1cie");
+injectString("sv", "Information", "Information");
+injectString("th", "Information", "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25");
+injectString("tr", "Information", "Bilgi");
+injectString("zh-Hans", "Information", "\u4FE1\u606F");
+injectString("zh-TW", "Information", "\u8CC7\u8A0A");
+injectString("cs", "Close", "Zav\u0159\xEDt");
+injectString("da-DK", "Close", "Luk");
+injectString("de", "Close", "Schlie\xDFen");
+injectString("en", "Close", "Close");
+injectString("es", "Close", "Cerrar");
+injectString("fi-FI", "Close", "Sulje");
+injectString("fr", "Close", "Fermer");
+injectString("fr-FR", "Close", "Fermer");
+injectString("hu-HU", "Close", "Z\xE1rd be.");
+injectString("id", "Close", "Tutup");
+injectString("it", "Close", "Chiudere");
+injectString("ja", "Close", "\u9589\u3058\u308B");
+injectString("ko-KR", "Close", "\uB2EB\uAE30");
+injectString("ms", "Close", "Tutup");
+injectString("nb-NO", "Close", "Lukk");
+injectString("nl", "Close", "Sluiten");
+injectString("pl", "Close", "Zamknij");
+injectString("pt-BR", "Close", "Fechar");
+injectString("sk-SK", "Close", "Zatvor");
+injectString("sv", "Close", "St\xE4ng");
+injectString("th", "Close", "\u0E1B\u0E34\u0E14");
+injectString("tr", "Close", "Kapat");
+injectString("zh-Hans", "Close", "\u5173\u95ED");
+injectString("zh-TW", "Close", "\u95DC\u9589");
 const react_1 = __importStar(require("react"));
 const useResize_1 = require("../commonHelpers/hooks/useResize");
 const calculatePosition_1 = require("../utils/positioningUtils/calculatePosition");
@@ -33,149 +95,350 @@ const classNames_1 = require("../commonHelpers/classNames/classNames");
 const calculateArrowPosition_1 = require("./helpers/calculateArrowPosition");
 const deviceType_1 = require("../commonHelpers/hooks/deviceType");
 const useDeviceType_1 = require("../commonHelpers/hooks/useDeviceType");
-const mobileSheet_1 = require("../mobileSheet/mobileSheet");
 const themeContext_1 = require("../utils/theme/themeContext");
 const tooltipAlignments_1 = require("../utils/positioningUtils/tooltipAlignments");
-const TOOLTIP_ARROW_HEIGHT = 6;
+const iconClose_1 = require("../icons/iconClose");
+const button_1 = require("../button/button");
+const useLanguage_1 = require("../utils/localization/useLanguage");
+const iconInfoCircle_1 = require("../icons/iconInfoCircle");
+const useDrive_1 = require("../utils/theme/useDrive");
+const shield_1 = require("../shield/shield");
 const TOOLTIP_VISIBILITY_DELAY = 100;
 const arrowClasses = {
-    "top": "zen-tooltip__arrow--top",
-    "top-left": "zen-tooltip__arrow--top",
-    "top-right": "zen-tooltip__arrow--top",
-    "bottom": "zen-tooltip__arrow--bottom",
-    "bottom-left": "zen-tooltip__arrow--bottom",
-    "bottom-right": "zen-tooltip__arrow--bottom",
-    "right": "zen-tooltip__arrow--right",
-    "right-top": "zen-tooltip__arrow--right",
-    "right-bottom": "zen-tooltip__arrow--right",
-    "left": "zen-tooltip__arrow--left",
-    "left-top": "zen-tooltip__arrow--left",
-    "left-bottom": "zen-tooltip__arrow--left"
+  "top": "zen-tooltip__arrow--top",
+  "top-left": "zen-tooltip__arrow--top",
+  "top-right": "zen-tooltip__arrow--top",
+  "bottom": "zen-tooltip__arrow--bottom",
+  "bottom-left": "zen-tooltip__arrow--bottom",
+  "bottom-right": "zen-tooltip__arrow--bottom",
+  "right": "zen-tooltip__arrow--right",
+  "right-top": "zen-tooltip__arrow--right",
+  "right-bottom": "zen-tooltip__arrow--right",
+  "left": "zen-tooltip__arrow--left",
+  "left-top": "zen-tooltip__arrow--left",
+  "left-bottom": "zen-tooltip__arrow--left"
 };
-const Tooltip = ({ trigger, className = "", size = "small", alignment = "bottom", padding = 0, children, mobileView = "default", mobileSheetTitle }) => {
-    const triggerRefNative = trigger.props.ref;
-    const triggerLocalRef = (0, react_1.useRef)(null);
-    const triggerRef = triggerRefNative || triggerLocalRef;
-    const timerRef = (0, react_1.useRef)(null);
-    const timerMouseOutRef = (0, react_1.useRef)(null);
-    const tooltipRef = (0, react_1.useRef)(null);
-    const arrowRef = (0, react_1.useRef)(null);
-    const [isTooltipVisible, setTooltipVisible] = (0, react_1.useState)(false);
-    const [deviceType, setDeviceType] = (0, react_1.useState)(deviceType_1.DeviceType.Desktop);
-    const tooltipId = (0, react_1.useId)();
-    const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
-    (0, useDeviceType_1.useDeviceType)(setDeviceType);
-    const onKeyDownHandler = (0, react_1.useCallback)((e) => {
-        if (e.code === "Escape") {
-            setTooltipVisible(false);
-        }
-    }, []);
-    const triggerEvents = (0, react_1.useMemo)(() => {
-        if (deviceType === deviceType_1.DeviceType.Desktop) {
-            return {
-                onMouseOver: () => {
-                    setTooltipVisible(true);
-                    timerMouseOutRef.current && clearTimeout(timerMouseOutRef.current);
-                },
-                onMouseLeave: () => {
-                    timerRef.current = setTimeout(() => {
-                        setTooltipVisible(false);
-                    }, TOOLTIP_VISIBILITY_DELAY);
-                },
-                onFocus: () => setTooltipVisible(true),
-                onBlur: () => setTooltipVisible(false),
-                onKeyDown: onKeyDownHandler,
-                onClick: (...args) => {
-                    const triggerProps = trigger.props;
-                    if (triggerProps.onClick) {
-                        triggerProps.onClick(...args);
-                    }
-                    if (isTooltipVisible) {
-                        setTooltipVisible(false);
-                    }
-                }
-            };
-        }
-        if (mobileView === "mobileSheet") {
-            return {
-                onClick: () => setTooltipVisible(true)
-            };
-        }
-        return {
-            onClick: (e) => {
-                e.stopPropagation();
-                const triggerProps = trigger.props;
-                if (triggerProps.onClick) {
-                    triggerProps.onClick(e);
-                }
-                else {
-                    setTooltipVisible(isVisible => !isVisible);
-                }
-            },
-            onTouchStart: () => setTooltipVisible(true),
-            onTouchEnd: () => setTooltipVisible(false)
-        };
-    }, [deviceType, mobileView, onKeyDownHandler, trigger.props, isTooltipVisible]);
-    const triggerCloneProps = isTooltipVisible ? {
-        "aria-describedby": tooltipId
-    } : {};
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-    const triggerClone = react_1.default.cloneElement(trigger, Object.assign(Object.assign({ ref: triggerRef }, triggerCloneProps), triggerEvents
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ));
-    const arrowClass = (0, react_1.useMemo)(() => arrowClasses[alignment] || arrowClasses.bottom, [alignment]);
-    const renderTooltip = () => {
-        if (mobileView === "mobileSheet" && deviceType === deviceType_1.DeviceType.Mobile) {
-            return (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { onHidePanel: () => {
-                    var _a;
-                    setTooltipVisible(false);
-                    (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                }, triggerRef: triggerRef, label: "", isOpen: isTooltipVisible, onCloseClick: () => {
-                    var _a;
-                    setTooltipVisible(false);
-                    (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                }, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { className: "zen-tooltip__mobile-sheet-content", children: children }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: mobileSheetTitle })] });
+const getInitialDeviceType = () => {
+  if (typeof window !== "undefined") {
+    return (0, useDeviceType_1.getDeviceType)(window.innerWidth);
+  }
+  return deviceType_1.DeviceType.Desktop;
+};
+const EventWrapper = ({
+  children,
+  deviceType,
+  onKeyDownHandler,
+  handleUniversalClick,
+  setTooltipVisible,
+  timerRef,
+  timerMouseOutRef
+}) => {
+  const isCurrentDeviceDesktop = deviceType === deviceType_1.DeviceType.Desktop;
+  const originalOnClick = children.props.onClick;
+  const composedOnClick = (0, react_1.useCallback)(e => {
+    // Call original onClick first if it exists
+    if (originalOnClick) {
+      originalOnClick(e);
+    }
+    // Then call tooltip's click handler
+    handleUniversalClick(e);
+  }, [originalOnClick, handleUniversalClick]);
+  const desktopEvents = {
+    onMouseOver: () => {
+      setTooltipVisible(true);
+      timerMouseOutRef.current && clearTimeout(timerMouseOutRef.current);
+    },
+    onMouseLeave: () => {
+      timerRef.current = setTimeout(() => {
+        setTooltipVisible(false);
+      }, TOOLTIP_VISIBILITY_DELAY);
+    },
+    onFocus: () => setTooltipVisible(true),
+    onBlur: () => setTooltipVisible(false),
+    onKeyDown: onKeyDownHandler,
+    onClick: composedOnClick
+  };
+  const mobileOnKeyDown = (0, react_1.useCallback)(e => {
+    if (e.key === "Enter") {
+      handleUniversalClick(undefined);
+    }
+  }, [handleUniversalClick]);
+  const mobileEvents = {
+    onClick: composedOnClick,
+    onKeyDown: mobileOnKeyDown
+  };
+  const propsToApply = isCurrentDeviceDesktop ? desktopEvents : mobileEvents;
+  return react_1.default.cloneElement(children, propsToApply);
+};
+const Tooltip = ({
+  trigger,
+  triggerClassName,
+  className = "",
+  alignment,
+  children,
+  mobileSheetTitle,
+  mobileTitle
+}) => {
+  const GAP = 12;
+  const isDrive = (0, useDrive_1.useDrive)();
+  const triggerRefNative = trigger === null || trigger === void 0 ? void 0 : trigger.ref;
+  const triggerLocalRef = (0, react_1.useRef)(null);
+  const triggerRef = triggerRefNative || triggerLocalRef;
+  const timerRef = (0, react_1.useRef)(null);
+  const timerMouseOutRef = (0, react_1.useRef)(null);
+  const tooltipRef = (0, react_1.useRef)(null);
+  const arrowRef = (0, react_1.useRef)(null);
+  const [isTooltipVisible, setTooltipVisible] = (0, react_1.useState)(false);
+  const [deviceType, setDeviceType] = (0, react_1.useState)(getInitialDeviceType);
+  const isMobile = deviceType === deviceType_1.DeviceType.Mobile;
+  const tooltipId = (0, react_1.useId)();
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const {
+    dark
+  } = (0, react_1.useContext)(themeContext_1.themeContext);
+  const tooltipAlignment = (0, react_1.useMemo)(() => isMobile ? "bottom" : alignment || "right", [isMobile, alignment]);
+  const TOOLTIP_ARROW_HEIGHT = (0, react_1.useMemo)(() => isMobile || isDrive ? 0 : 6, [isMobile, isDrive]);
+  const tooltipAlignmentRef = (0, react_1.useRef)(tooltipAlignment);
+  tooltipAlignmentRef.current = tooltipAlignment;
+  const setDeviceTypeStable = (0, react_1.useCallback)(newType => {
+    setDeviceType(currentDeviceType => newType !== currentDeviceType ? newType : currentDeviceType);
+  }, []);
+  const setDeviceTypeConditional = (0, react_1.useCallback)(newType => {
+    setTooltipVisible(currentVisible => {
+      if (!currentVisible) {
+        setDeviceTypeStable(newType);
+      }
+      return currentVisible;
+    });
+  }, [setDeviceTypeStable]);
+  (0, useDeviceType_1.useDeviceType)(setDeviceTypeConditional);
+  const onKeyDownHandler = e => {
+    if (e.code === "Escape") {
+      setTooltipVisible(false);
+    }
+  };
+  const handleUniversalClick = (0, react_1.useCallback)(e => {
+    const hasExternalClickHandler = !!(trigger === null || trigger === void 0 ? void 0 : trigger.props.onClick);
+    if (deviceType === deviceType_1.DeviceType.Desktop) {
+      setTooltipVisible(currentVisible => {
+        if (currentVisible) {
+          return false;
         }
-        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { id: tooltipId, role: "tooltip", ref: tooltipRef, className: (0, classNames_1.classNames)(["zen-tooltip", dark ? "zen-dark" : "", `zen-tooltip--${size}`, className]), onMouseOver: () => {
-                timerRef.current && clearTimeout(timerRef.current);
-                timerMouseOutRef.current && clearTimeout(timerMouseOutRef.current);
-            }, onMouseOut: () => {
-                timerMouseOutRef.current = setTimeout(() => setTooltipVisible(false), TOOLTIP_VISIBILITY_DELAY);
-            }, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-tooltip__arrow", arrowClass]), ref: arrowRef }), (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-tooltip__body", `zen-tooltip__body--${size}`]), children: children })] }), document.fullscreenElement || document.body);
+        return currentVisible;
+      });
+    } else {
+      e === null || e === void 0 ? void 0 : e.stopPropagation();
+      if (!hasExternalClickHandler) {
+        setTooltipVisible(isVisible => !isVisible);
+      }
+    }
+  }, [trigger === null || trigger === void 0 ? void 0 : trigger.props, deviceType]);
+  const triggerCloneProps = (0, react_1.useMemo)(() => isTooltipVisible ? {
+    "aria-describedby": tooltipId
+  } : {}, [isTooltipVisible, tooltipId]);
+  const tooltipTrigger = (0, react_1.useMemo)(() => trigger ? trigger : (0, jsx_runtime_1.jsx)("button", {
+    tabIndex: 0,
+    type: "button",
+    className: "zen-tooltip__trigger-container",
+    "aria-label": translate("Information"),
+    children: (0, react_1.createElement)(iconInfoCircle_1.IconInfoCircle, {
+      size: isMobile ? "huge" : "large",
+      className: (0, classNames_1.classNames)([triggerClassName || "", "zen-tooltip__trigger"])
+    })
+  }), [trigger, isMobile, triggerClassName, translate]);
+  const triggerClone = (0, jsx_runtime_1.jsx)(EventWrapper, {
+    deviceType: deviceType,
+    isTooltipVisible: isTooltipVisible,
+    onKeyDownHandler: onKeyDownHandler,
+    handleUniversalClick: handleUniversalClick,
+    setTooltipVisible: setTooltipVisible,
+    timerRef: timerRef,
+    timerMouseOutRef: timerMouseOutRef,
+    children: react_1.default.cloneElement(tooltipTrigger, Object.assign({
+      ref: triggerRef
+    }, triggerCloneProps))
+  });
+  // Initial arrow class - will be updated by calculatePosition
+  const arrowClass = (0, react_1.useMemo)(() => arrowClasses[tooltipAlignment], [tooltipAlignment]);
+  const getOppositeAlignment = main => {
+    switch (main) {
+      case "right":
+        return "left";
+      case "left":
+        return "right";
+      case "top":
+        return "bottom";
+      case "bottom":
+        return "top";
+      default:
+        return main;
+    }
+  };
+  const checkNaturalFit = (0, react_1.useCallback)((rawPosition, popupRect) => {
+    const docWidth = window.innerWidth + window.scrollX;
+    const docHeight = window.innerHeight + window.scrollY;
+    // Check horizontal fit
+    if (rawPosition.left !== undefined) {
+      if (rawPosition.left < 0 || rawPosition.left + popupRect.width > docWidth) {
+        return false;
+      }
+    } else if (rawPosition.right !== undefined) {
+      if (docWidth - rawPosition.right < popupRect.width) {
+        return false;
+      }
+    }
+    // Check vertical fit
+    if (rawPosition.top !== undefined) {
+      if (rawPosition.top < 0 || rawPosition.top + popupRect.height > docHeight) {
+        return false;
+      }
+    } else if (rawPosition.bottom !== undefined) {
+      if (docHeight - rawPosition.bottom < popupRect.height) {
+        return false;
+      }
+    }
+    return true;
+  }, []);
+  const getEffectiveAlignment = (0, react_1.useCallback)(preferredAlignment => {
+    if (isMobile) {
+      return preferredAlignment;
+    }
+    const triggerEl = triggerRef.current;
+    const popupEl = tooltipRef.current;
+    if (!triggerEl || !popupEl) {
+      return preferredAlignment;
+    }
+    const triggerRect = triggerEl.getBoundingClientRect();
+    const popupRect = popupEl.getBoundingClientRect();
+    const parentRect = {
+      top: 0,
+      left: 0,
+      right: window.innerWidth,
+      bottom: window.innerHeight,
+      width: window.innerWidth,
+      height: window.innerHeight
     };
-    const calculatePosition = (0, react_1.useCallback)(() => {
-        (0, calculatePosition_1.calculatePosition)(triggerRef, tooltipRef, TOOLTIP_ARROW_HEIGHT + padding, TOOLTIP_ARROW_HEIGHT + padding, false, alignment, tooltipAlignments_1.tooltipAlignments);
-        (0, calculateArrowPosition_1.calculateArrowPosition)(triggerRef, tooltipRef, arrowRef, alignment);
-    }, [alignment, padding, triggerRef]);
-    const handleClickOutside = (0, react_1.useCallback)((event) => {
-        var _a, _b;
-        if (!((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) && !((_b = tooltipRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target))) {
+    const [mainAlignment, subAlignment] = preferredAlignment.split("-");
+    const oppositeMain = getOppositeAlignment(mainAlignment);
+    const preferredFn = tooltipAlignments_1.tooltipAlignments[preferredAlignment];
+    const rawPreferredPos = preferredFn(triggerRect, popupRect, parentRect, TOOLTIP_ARROW_HEIGHT + GAP, TOOLTIP_ARROW_HEIGHT + GAP);
+    if (checkNaturalFit(rawPreferredPos, popupRect)) {
+      return preferredAlignment;
+    }
+    const fallbackAlignment = subAlignment ? `${oppositeMain}-${subAlignment}` : oppositeMain;
+    const fallbackFn = tooltipAlignments_1.tooltipAlignments[fallbackAlignment];
+    const rawFallbackPos = fallbackFn(triggerRect, popupRect, parentRect, TOOLTIP_ARROW_HEIGHT + GAP, TOOLTIP_ARROW_HEIGHT + GAP);
+    if (checkNaturalFit(rawFallbackPos, popupRect)) {
+      return fallbackAlignment;
+    }
+    return preferredAlignment;
+  }, [isMobile, TOOLTIP_ARROW_HEIGHT, triggerRef, checkNaturalFit]);
+  const renderTooltip = () => {
+    if (!isTooltipVisible) {
+      return "";
+    }
+    const content = (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+      children: [isMobile && (0, jsx_runtime_1.jsx)(shield_1.Shield, {
+        className: "zen-tooltip__shield"
+      }), (0, jsx_runtime_1.jsxs)("div", {
+        id: tooltipId,
+        role: "tooltip",
+        ref: tooltipRef,
+        className: (0, classNames_1.classNames)(["zen-tooltip", dark ? "zen-dark" : "", `zen-tooltip--auto`, isMobile ? "zen-tooltip--mobile" : "", isDrive ? "zen-tooltip--drive" : "", className]),
+        onMouseOver: () => {
+          timerRef.current && clearTimeout(timerRef.current);
+          timerMouseOutRef.current && clearTimeout(timerMouseOutRef.current);
+        },
+        onMouseOut: () => {
+          timerMouseOutRef.current = setTimeout(() => {
+            if (!isMobile && !isDrive) {
+              setTooltipVisible(false);
+            }
+          }, TOOLTIP_VISIBILITY_DELAY);
+        },
+        children: [!isMobile && !isDrive && (0, jsx_runtime_1.jsx)("div", {
+          className: (0, classNames_1.classNames)(["zen-tooltip__arrow", arrowClass]),
+          ref: arrowRef
+        }), (0, jsx_runtime_1.jsxs)("div", {
+          className: (0, classNames_1.classNames)(["zen-tooltip__body", "zen-tooltip__body--auto", isDrive ? "zen-tooltip__body--drive" : "", isMobile ? "zen-tooltip__body--mobile" : "", deviceType === deviceType_1.DeviceType.Desktop && !isDrive ? "zen-tooltip__body--desktop" : ""]),
+          children: [(mobileSheetTitle || mobileTitle) && (deviceType === deviceType_1.DeviceType.Mobile || isDrive) && (0, jsx_runtime_1.jsx)("div", {
+            className: "zen-tooltip__title",
+            children: mobileSheetTitle || mobileTitle
+          }), children]
+        }), (deviceType === deviceType_1.DeviceType.Mobile || isDrive) && (0, jsx_runtime_1.jsx)(button_1.Button, {
+          className: "zen-tooltip__close-button",
+          title: translate("Close"),
+          "aria-label": translate("Close"),
+          onClick: () => {
+            var _a;
             setTooltipVisible(false);
+            (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+          },
+          children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, {
+            description: translate("Close"),
+            className: "svgIcon",
+            size: "huge"
+          })
+        })]
+      })]
+    });
+    return (0, react_dom_1.createPortal)(content, document.fullscreenElement || document.body, tooltipId);
+  };
+  const calculatePosition = (0, react_1.useCallback)(() => {
+    const eAlignment = getEffectiveAlignment(tooltipAlignmentRef.current);
+    (0, calculatePosition_1.calculatePosition)(triggerRef, tooltipRef, TOOLTIP_ARROW_HEIGHT + GAP, TOOLTIP_ARROW_HEIGHT + GAP, false, eAlignment, tooltipAlignments_1.tooltipAlignments, undefined, isMobile);
+    (0, calculateArrowPosition_1.calculateArrowPosition)(triggerRef, tooltipRef, arrowRef, eAlignment);
+    // Update arrow class directly in DOM to avoid triggering re-renders
+    if (arrowRef.current) {
+      const newArrowClass = arrowClasses[eAlignment];
+      arrowRef.current.className = arrowRef.current.className.replace(/zen-tooltip__arrow--\S+/g, "").trim();
+      if (newArrowClass) {
+        arrowRef.current.classList.add(newArrowClass.replace("zen-tooltip__arrow ", ""));
+      }
+    }
+  }, [TOOLTIP_ARROW_HEIGHT, triggerRef, tooltipRef, arrowRef, getEffectiveAlignment, isMobile]);
+  (0, useResize_1.useResize)(calculatePosition, isTooltipVisible);
+  (0, react_1.useLayoutEffect)(calculatePosition, [isTooltipVisible, calculatePosition]);
+  (0, react_1.useEffect)(() => {
+    const finalClickHandler = event => {
+      var _a, _b;
+      if (!isTooltipVisible) {
+        return;
+      }
+      if (deviceType === deviceType_1.DeviceType.Mobile) {
+        if (!((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) && !((_b = tooltipRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target))) {
+          setTooltipVisible(false);
         }
-    }, [triggerRef]);
-    (0, useResize_1.useResize)(calculatePosition, isTooltipVisible);
-    (0, react_1.useLayoutEffect)(calculatePosition, [isTooltipVisible, calculatePosition]);
-    (0, react_1.useEffect)(() => {
-        if (deviceType === deviceType_1.DeviceType.Mobile && isTooltipVisible) {
-            document.addEventListener("click", handleClickOutside);
-        }
-        return () => {
-            document.removeEventListener("click", handleClickOutside);
-        };
-    }, [deviceType, isTooltipVisible, handleClickOutside]);
-    (0, react_1.useEffect)(() => {
-        if (deviceType === deviceType_1.DeviceType.Mobile && isTooltipVisible) {
-            document.addEventListener("click", handleClickOutside);
-        }
-        return () => {
-            document.removeEventListener("click", handleClickOutside);
-        };
-    }, [deviceType, isTooltipVisible, handleClickOutside]);
-    (0, react_1.useEffect)(() => {
-        const escapeHandler = onKeyDownHandler;
-        document.addEventListener("keydown", escapeHandler);
-        return () => document.removeEventListener("keydown", escapeHandler);
-    }, [onKeyDownHandler]);
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isTooltipVisible && renderTooltip(), triggerClone] });
+      }
+    };
+    const escapeHandler = e => {
+      if (!isTooltipVisible) {
+        return;
+      }
+      if (e.code === "Escape") {
+        setTooltipVisible(false);
+      }
+    };
+    document.addEventListener("click", finalClickHandler);
+    document.addEventListener("keydown", escapeHandler);
+    return () => {
+      document.removeEventListener("click", finalClickHandler);
+      document.removeEventListener("keydown", escapeHandler);
+    };
+  }, [isTooltipVisible, deviceType, triggerRef, tooltipRef]);
+  // Cleanup timers and event listeners on unmount to prevent memory leaks and test issues
+  (0, react_1.useEffect)(() => () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    if (timerMouseOutRef.current) {
+      clearTimeout(timerMouseOutRef.current);
+    }
+  }, []);
+  return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+    children: [isTooltipVisible && renderTooltip(), triggerClone]
+  });
 };
-exports.Tooltip = Tooltip;
+exports.Tooltip = Tooltip;

package/dist/utils/localization/translations/cs.json

@@ -248,5 +248,6 @@
     "Confirm": "Potvrdit",
     "Clear all": "Vymazat vše",
     "Reload": "Načíst znovu",
-    "View details": "Zobrazit podrobnosti"
+    "View details": "Zobrazit podrobnosti",
+    "Year to date": "Od začátku roku"
 }

package/dist/utils/localization/translations/da-DK.json

@@ -258,5 +258,6 @@
     "On": "På",
     "Off": "Slukket",
     "Reload": "Genindlæs",
-    "View details": "Se detaljer"
+    "View details": "Se detaljer",
+    "Year to date": "År til dato"
 }

package/dist/utils/localization/translations/de.json

@@ -248,5 +248,6 @@
     "Confirm": "Bestätigen",
     "Clear all": "Alle löschen",
     "Reload": "Neu laden",
-    "View details": "Details anzeigen"
+    "View details": "Details anzeigen",
+    "Year to date": "Seit Jahresbeginn"
 }

package/dist/utils/localization/translations/en.json

@@ -308,5 +308,6 @@
     "Details": "Details",
     "View details": "View details",
     "Selection panel": "Selection panel",
-    "Bulk select": "Bulk select"
+    "Bulk select": "Bulk select",
+    "Year to date": "Year to date"
 }