@geotab/zenith 3.3.0 → 3.4.0-beta.0

package/esm/timePickerRaw/timePickerRaw.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IFormFieldComponent } from "../formField/formField";
+import { IFormFieldComponent } from "../formField/types";
 import { ITimePickerRawDefault, TTimePickerRaw } from "./types";
 import "./timePickerRaw.less";
 export interface ITimePickerRaw extends ITimePickerRawDefault {

package/esm/tooltip/tooltip.d.ts

@@ -1,13 +1,24 @@
-import { FC, PropsWithChildren, ReactElement } from "react";
+import React, { FC, PropsWithChildren, ReactElement } from "react";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
-import { TAlignment } from "../absolute/absolute";
 import "./tooltip.less";
+import { TAlignment } from "../absolute/absolute";
 export type TooltipSize = "large" | "small" | "auto";
 export type TMobileView = "default" | "mobileSheet";
 interface ITooltip extends IZenComponentProps {
-    trigger: ReactElement<PropsWithChildren>;
-    size?: TooltipSize;
+    trigger?: ReactElement<PropsWithChildren & {
+        onClick?: (e: React.MouseEvent) => void;
+    }>;
     alignment?: TAlignment;
+    triggerClassName?: string;
+    mobileTitle?: string;
+    /**
+    * @deprecated
+    * @param mobileSheetTitle - will be removed in the next major release
+    * @param mobileView - will be removed in the next major release
+    * @param size - will be removed in the next major release
+    * @param padding - will be removed in the next major release
+    */
+    size?: TooltipSize;
     padding?: number;
     mobileView?: TMobileView;
     mobileSheetTitle?: ReactElement | string;

package/esm/tooltip/tooltip.js

@@ -1,154 +1,404 @@
+import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { createElement, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useResize } from "../commonHelpers/hooks/useResize";
 import { calculatePosition as calculatePos } from "../utils/positioningUtils/calculatePosition";
 import { createPortal } from "react-dom";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { calculateArrowPosition } from "./helpers/calculateArrowPosition";
 import { DeviceType } from "../commonHelpers/hooks/deviceType";
-import { useDeviceType } from "../commonHelpers/hooks/useDeviceType";
-import { MobileSheet } from "../mobileSheet/mobileSheet";
+import { getDeviceType, useDeviceType } from "../commonHelpers/hooks/useDeviceType";
 import { themeContext } from "../utils/theme/themeContext";
 import { tooltipAlignments } from "../utils/positioningUtils/tooltipAlignments";
-const TOOLTIP_ARROW_HEIGHT = 6;
+import { IconClose } from "../icons/iconClose";
+import { Button } from "../button/button";
+import { useLanguage } from "../utils/localization/useLanguage";
+import { IconInfoCircle } from "../icons/iconInfoCircle";
+import { useDrive } from "../utils/theme/useDrive";
+import { Shield } from "../shield/shield";
+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 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"
 };
-export const Tooltip = ({ trigger, className = "", size = "small", alignment = "bottom", padding = 0, children, mobileView = "default", mobileSheetTitle }) => {
-    const triggerRefNative = trigger.props.ref;
-    const triggerLocalRef = useRef(null);
-    const triggerRef = triggerRefNative || triggerLocalRef;
-    const timerRef = useRef(null);
-    const timerMouseOutRef = useRef(null);
-    const tooltipRef = useRef(null);
-    const arrowRef = useRef(null);
-    const [isTooltipVisible, setTooltipVisible] = useState(false);
-    const [deviceType, setDeviceType] = useState(DeviceType.Desktop);
-    const tooltipId = useId();
-    const { dark } = useContext(themeContext);
-    useDeviceType(setDeviceType);
-    const onKeyDownHandler = useCallback((e) => {
-        if (e.code === "Escape") {
-            setTooltipVisible(false);
-        }
-    }, []);
-    const triggerEvents = useMemo(() => {
-        if (deviceType === 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.cloneElement(trigger, Object.assign(Object.assign({ ref: triggerRef }, triggerCloneProps), triggerEvents
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ));
-    const arrowClass = useMemo(() => arrowClasses[alignment] || arrowClasses.bottom, [alignment]);
-    const renderTooltip = () => {
-        if (mobileView === "mobileSheet" && deviceType === DeviceType.Mobile) {
-            return _jsxs(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: [_jsx(MobileSheet.Content, { className: "zen-tooltip__mobile-sheet-content", children: children }), _jsx(MobileSheet.Title, { children: mobileSheetTitle })] });
+const getInitialDeviceType = () => {
+  if (typeof window !== "undefined") {
+    return getDeviceType(window.innerWidth);
+  }
+  return DeviceType.Desktop;
+};
+const EventWrapper = ({
+  children,
+  deviceType,
+  onKeyDownHandler,
+  handleUniversalClick,
+  setTooltipVisible,
+  timerRef,
+  timerMouseOutRef
+}) => {
+  const isCurrentDeviceDesktop = deviceType === DeviceType.Desktop;
+  const originalOnClick = children.props.onClick;
+  const composedOnClick = 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 = useCallback(e => {
+    if (e.key === "Enter") {
+      handleUniversalClick(undefined);
+    }
+  }, [handleUniversalClick]);
+  const mobileEvents = {
+    onClick: composedOnClick,
+    onKeyDown: mobileOnKeyDown
+  };
+  const propsToApply = isCurrentDeviceDesktop ? desktopEvents : mobileEvents;
+  return React.cloneElement(children, propsToApply);
+};
+export const Tooltip = ({
+  trigger,
+  triggerClassName,
+  className = "",
+  alignment,
+  children,
+  mobileSheetTitle,
+  mobileTitle
+}) => {
+  const GAP = 12;
+  const isDrive = useDrive();
+  const triggerRefNative = trigger === null || trigger === void 0 ? void 0 : trigger.ref;
+  const triggerLocalRef = useRef(null);
+  const triggerRef = triggerRefNative || triggerLocalRef;
+  const timerRef = useRef(null);
+  const timerMouseOutRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const arrowRef = useRef(null);
+  const [isTooltipVisible, setTooltipVisible] = useState(false);
+  const [deviceType, setDeviceType] = useState(getInitialDeviceType);
+  const isMobile = deviceType === DeviceType.Mobile;
+  const tooltipId = useId();
+  const {
+    translate
+  } = useLanguage();
+  const {
+    dark
+  } = useContext(themeContext);
+  const tooltipAlignment = useMemo(() => isMobile ? "bottom" : alignment || "right", [isMobile, alignment]);
+  const TOOLTIP_ARROW_HEIGHT = useMemo(() => isMobile || isDrive ? 0 : 6, [isMobile, isDrive]);
+  const tooltipAlignmentRef = useRef(tooltipAlignment);
+  tooltipAlignmentRef.current = tooltipAlignment;
+  const setDeviceTypeStable = useCallback(newType => {
+    setDeviceType(currentDeviceType => newType !== currentDeviceType ? newType : currentDeviceType);
+  }, []);
+  const setDeviceTypeConditional = useCallback(newType => {
+    setTooltipVisible(currentVisible => {
+      if (!currentVisible) {
+        setDeviceTypeStable(newType);
+      }
+      return currentVisible;
+    });
+  }, [setDeviceTypeStable]);
+  useDeviceType(setDeviceTypeConditional);
+  const onKeyDownHandler = e => {
+    if (e.code === "Escape") {
+      setTooltipVisible(false);
+    }
+  };
+  const handleUniversalClick = useCallback(e => {
+    const hasExternalClickHandler = !!(trigger === null || trigger === void 0 ? void 0 : trigger.props.onClick);
+    if (deviceType === DeviceType.Desktop) {
+      setTooltipVisible(currentVisible => {
+        if (currentVisible) {
+          return false;
         }
-        return createPortal(_jsxs("div", { id: tooltipId, role: "tooltip", ref: tooltipRef, className: 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: [_jsx("div", { className: classNames(["zen-tooltip__arrow", arrowClass]), ref: arrowRef }), _jsx("div", { className: 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 = useMemo(() => isTooltipVisible ? {
+    "aria-describedby": tooltipId
+  } : {}, [isTooltipVisible, tooltipId]);
+  const tooltipTrigger = useMemo(() => trigger ? trigger : _jsx("button", {
+    tabIndex: 0,
+    type: "button",
+    className: "zen-tooltip__trigger-container",
+    "aria-label": translate("Information"),
+    children: createElement(IconInfoCircle, {
+      size: isMobile ? "huge" : "large",
+      className: classNames([triggerClassName || "", "zen-tooltip__trigger"])
+    })
+  }), [trigger, isMobile, triggerClassName, translate]);
+  const triggerClone = _jsx(EventWrapper, {
+    deviceType: deviceType,
+    isTooltipVisible: isTooltipVisible,
+    onKeyDownHandler: onKeyDownHandler,
+    handleUniversalClick: handleUniversalClick,
+    setTooltipVisible: setTooltipVisible,
+    timerRef: timerRef,
+    timerMouseOutRef: timerMouseOutRef,
+    children: React.cloneElement(tooltipTrigger, Object.assign({
+      ref: triggerRef
+    }, triggerCloneProps))
+  });
+  // Initial arrow class - will be updated by calculatePosition
+  const arrowClass = 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 = 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 = 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 = useCallback(() => {
-        calculatePos(triggerRef, tooltipRef, TOOLTIP_ARROW_HEIGHT + padding, TOOLTIP_ARROW_HEIGHT + padding, false, alignment, tooltipAlignments);
-        calculateArrowPosition(triggerRef, tooltipRef, arrowRef, alignment);
-    }, [alignment, padding, triggerRef]);
-    const handleClickOutside = 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[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[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 = _jsxs(_Fragment, {
+      children: [isMobile && _jsx(Shield, {
+        className: "zen-tooltip__shield"
+      }), _jsxs("div", {
+        id: tooltipId,
+        role: "tooltip",
+        ref: tooltipRef,
+        className: 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 && _jsx("div", {
+          className: classNames(["zen-tooltip__arrow", arrowClass]),
+          ref: arrowRef
+        }), _jsxs("div", {
+          className: classNames(["zen-tooltip__body", "zen-tooltip__body--auto", isDrive ? "zen-tooltip__body--drive" : "", isMobile ? "zen-tooltip__body--mobile" : "", deviceType === DeviceType.Desktop && !isDrive ? "zen-tooltip__body--desktop" : ""]),
+          children: [(mobileSheetTitle || mobileTitle) && (deviceType === DeviceType.Mobile || isDrive) && _jsx("div", {
+            className: "zen-tooltip__title",
+            children: mobileSheetTitle || mobileTitle
+          }), children]
+        }), (deviceType === DeviceType.Mobile || isDrive) && _jsx(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: _jsx(IconClose, {
+            description: translate("Close"),
+            className: "svgIcon",
+            size: "huge"
+          })
+        })]
+      })]
+    });
+    return createPortal(content, document.fullscreenElement || document.body, tooltipId);
+  };
+  const calculatePosition = useCallback(() => {
+    const eAlignment = getEffectiveAlignment(tooltipAlignmentRef.current);
+    calculatePos(triggerRef, tooltipRef, TOOLTIP_ARROW_HEIGHT + GAP, TOOLTIP_ARROW_HEIGHT + GAP, false, eAlignment, tooltipAlignments, undefined, isMobile);
+    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]);
+  useResize(calculatePosition, isTooltipVisible);
+  useLayoutEffect(calculatePosition, [isTooltipVisible, calculatePosition]);
+  useEffect(() => {
+    const finalClickHandler = event => {
+      var _a, _b;
+      if (!isTooltipVisible) {
+        return;
+      }
+      if (deviceType === 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]);
-    useResize(calculatePosition, isTooltipVisible);
-    useLayoutEffect(calculatePosition, [isTooltipVisible, calculatePosition]);
-    useEffect(() => {
-        if (deviceType === DeviceType.Mobile && isTooltipVisible) {
-            document.addEventListener("click", handleClickOutside);
-        }
-        return () => {
-            document.removeEventListener("click", handleClickOutside);
-        };
-    }, [deviceType, isTooltipVisible, handleClickOutside]);
-    useEffect(() => {
-        if (deviceType === DeviceType.Mobile && isTooltipVisible) {
-            document.addEventListener("click", handleClickOutside);
-        }
-        return () => {
-            document.removeEventListener("click", handleClickOutside);
-        };
-    }, [deviceType, isTooltipVisible, handleClickOutside]);
-    useEffect(() => {
-        const escapeHandler = onKeyDownHandler;
-        document.addEventListener("keydown", escapeHandler);
-        return () => document.removeEventListener("keydown", escapeHandler);
-    }, [onKeyDownHandler]);
-    return _jsxs(_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
+  useEffect(() => () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    if (timerMouseOutRef.current) {
+      clearTimeout(timerMouseOutRef.current);
+    }
+  }, []);
+  return _jsxs(_Fragment, {
+    children: [isTooltipVisible && renderTooltip(), triggerClone]
+  });
+};

package/esm/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/esm/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/esm/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/esm/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"
 }

package/esm/utils/localization/translations/es.json

@@ -93,7 +93,7 @@
     "Custom": "Personalizado",
     "GroupTrailerId": "Remolque",
     "GroupVehicleId": "Vehículo",
-    "GroupCompanyId": "Grupo Compañía",
+    "GroupCompanyId": "Grupo Empresa",
     "GroupDieselId": "Diésel",
     "GroupAssetTypeId": "Tipo de activo",
     "GroupAssetInformationId": "Información del activo",
@@ -248,5 +248,6 @@
     "Confirm": "Confirmar",
     "Clear all": "Borrar todo",
     "Reload": "Volver a cargar",
-    "View details": "Ver detalles"
+    "View details": "Ver detalles",
+    "Year to date": "Año a la fecha"
 }

package/esm/utils/localization/translations/fi-FI.json

@@ -258,5 +258,6 @@
     "On": "Päälle",
     "Off": "Pois",
     "Reload": "Ladata uudelleen",
-    "View details": "Näytä tiedot"
+    "View details": "Näytä tiedot",
+    "Year to date": "Vuoden alusta"
 }