@geotab/zenith 3.5.0 → 3.6.0-beta.0

package/dist/textIconButton/textIconButton.js

@@ -49,14 +49,14 @@ exports.ButtonIconPosition = {
 const TextIconButton = (_a) => {
     var { icon, iconClasses, iconPosition = exports.ButtonIconPosition.Start, iconSize, children, className, contentClasses, ref } = _a, restProps = __rest(_a, ["icon", "iconClasses", "iconPosition", "iconSize", "children", "className", "contentClasses", "ref"]);
     const isDrive = (0, useDrive_1.useDrive)();
-    const defaultIconSize = isDrive ? svgIconSize_1.SvgIconSize.Huge : svgIconSize_1.SvgIconSize.Large;
     const isMobile = (0, useMobile_1.useMobile)();
+    const defaultIconSize = isDrive || isMobile ? svgIconSize_1.SvgIconSize.Huge : svgIconSize_1.SvgIconSize.Large;
     const buttonIconSize = iconSize ? iconSize : defaultIconSize;
     const svgIconClasses = React.useMemo(() => {
         const postfix = iconPosition === exports.ButtonIconPosition.End ? "post-content" : "pre-content";
         return (0, classNames_1.classNames)([`zen-caption__${children ? postfix : "icon"}`, iconClasses !== null && iconClasses !== void 0 ? iconClasses : ""]);
     }, [iconPosition, iconClasses, children]);
-    const buttonExtraClasses = React.useMemo(() => (0, classNames_1.classNames)(["zen-caption", !isMobile && isDrive ? "zen-button--huge" : "", className !== null && className !== void 0 ? className : ""]), [className, isMobile, isDrive]);
+    const buttonExtraClasses = React.useMemo(() => (0, classNames_1.classNames)(["zen-caption", "zen-text-icon-button", !isMobile && isDrive ? "zen-button--huge" : "", className !== null && className !== void 0 ? className : ""]), [className, isMobile, isDrive]);
     // init react functional component
     const svgIcon = React.useMemo(() => React.createElement(icon, {
         className: svgIconClasses,

package/dist/textInputRaw/textInputRaw.js

@@ -6,15 +6,17 @@ const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const reviewTextControl_1 = require("../formGroup/components/reviewTextControl");
 const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");
+const useMobileClassName_1 = require("../utils/theme/useMobileClassName");
 const TextInputRaw = (props) => {
     const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-text-input");
+    const mobileComponentClass = (0, useMobileClassName_1.useMobileClassName)("zen-text-input");
     const { required, min, max, maxLength, minLength, value = "", onChange, onBlur, disabled, name, pattern } = (0, useFormFieldValues_1.useFormFieldValues)(props.controller, props);
     if (props.isReadOnly) {
         return (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, { value: value, password: props.type === "password" });
     }
     return (0, jsx_runtime_1.jsx)("input", { id: props.id, ref: props.ref, type: props.type || "text", className: (0, classNames_1.classNames)([
             "zen-text-input",
-            driveComponentClass || "",
+            mobileComponentClass || driveComponentClass || "",
             props.className || "",
             props.isError ? "zen-text-input--error" : ""
         ]), value: maxLength ? value.substring(0, maxLength) : value, placeholder: props.placeholder, disabled: disabled, onChange: onChange, onKeyDown: props.onKeyDown, onBlur: onBlur, maxLength: maxLength, autoComplete: props.autocomplete, 

package/dist/timePickerRaw/timePickerRaw.js

@@ -18,6 +18,7 @@ const button_1 = require("../button/button");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const reviewTextControl_1 = require("../formGroup/components/reviewTextControl");
 const timePickerUtils_1 = require("./timePickerUtils");
+const divider_1 = require("../divider/divider");
 injectString("cs", "Time", "\u010Cas");
 injectString("da-DK", "Time", "Tid");
 injectString("de", "Time", "Zeit");
@@ -296,8 +297,8 @@ const TimePickerRaw = props => {
                 hour: newHourValue
               }));
             }
-          }), (0, jsx_runtime_1.jsx)("div", {
-            className: "zen-time-picker-select__separator"
+          }), (0, jsx_runtime_1.jsx)(divider_1.Divider, {
+            className: "zen-time-picker-select__divider"
           }), (0, jsx_runtime_1.jsx)(timeSelect_1.TimeSelect, {
             title: translate("Select minutes"),
             selected: timeValue.minutes,

package/dist/toast/toast.js

@@ -4,7 +4,7 @@ exports.Toast = void 0;
 const react_1 = require("react");
 const feedbackContext_1 = require("../feedbackContainer/feedbackContext");
 const useWarning_1 = require("../feedbackProvider/hooks/useWarning");
-const Toast = ({ isOpen, header, type, onClose, hasIcon, action, id }) => {
+const Toast = ({ isOpen, header, type, onClose, hasIcon, action, id, showSeconds, className }) => {
     const { addToast, removeToast, toasts, toastsAnimation, toastsQueue, removedToastId, apiToastActions, setApiToastActions, mode } = (0, react_1.useContext)(feedbackContext_1.FeedbackContext);
     const generatedId = (0, react_1.useId)();
     const localId = id || generatedId;
@@ -18,9 +18,9 @@ const Toast = ({ isOpen, header, type, onClose, hasIcon, action, id }) => {
     (0, react_1.useEffect)(() => {
         if (isApi) {
             if (isOpen && !isInApiToasts) {
-                addToast({ header, id: localId, type, onClose: () => {
+                addToast({ showSeconds, header, id: localId, type, onClose: () => {
                         onClose();
-                    }, hasIcon, action });
+                    }, hasIcon, action, className });
                 return;
             }
             if (!isOpen && isInApiToasts) {
@@ -34,9 +34,9 @@ const Toast = ({ isOpen, header, type, onClose, hasIcon, action, id }) => {
             return;
         }
         if (isOpen && (!isInQueue && !isRendered)) {
-            addToast({ header, id: localId, type, onClose: () => {
+            addToast({ showSeconds, header, id: localId, type, onClose: () => {
                     onClose();
-                }, hasIcon, action });
+                }, hasIcon, action, className });
         }
         if (!isOpen && isRendered && !isInQueue && !isAnimating) {
             if (toastIndex !== -1) {
@@ -63,7 +63,9 @@ const Toast = ({ isOpen, header, type, onClose, hasIcon, action, id }) => {
         isApi,
         apiToastActions,
         setApiToastActions,
-        isInApiToasts
+        isInApiToasts,
+        className,
+        showSeconds
     ]);
     return null;
 };

package/dist/toast/utils/isToastTarget.d.ts

@@ -0,0 +1 @@
+export declare const isToastTarget: (e: Event) => boolean;

package/dist/toast/utils/isToastTarget.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isToastTarget = void 0;
+const isToastTarget = (e) => {
+    if (!e.target) {
+        return false;
+    }
+    const target = e.target;
+    return !!target.closest(".zen-toast");
+};
+exports.isToastTarget = isToastTarget;

package/dist/toastRaw/hooks/useProgress.js

@@ -2,28 +2,31 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useProgress = exports.MIN_SECONDS_TO_SHOW = void 0;
 const react_1 = require("react");
+const zen_1 = require("../../utils/zen");
 exports.MIN_SECONDS_TO_SHOW = 7;
 const useProgress = ({ isOpen, onClose, showSeconds = exports.MIN_SECONDS_TO_SHOW }) => {
     const [progress, setProgress] = (0, react_1.useState)(100);
     const isFinishedRef = (0, react_1.useRef)(false);
     const seconds = showSeconds <= 0 ? exports.MIN_SECONDS_TO_SHOW : showSeconds;
     (0, react_1.useEffect)(() => {
+        var _a;
         if (isOpen && !isFinishedRef.current) {
-            const interval = setInterval(() => {
+            const interval = (_a = zen_1.zen.setInterval) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
                 setProgress((prev) => {
+                    var _a, _b;
                     if (isFinishedRef.current) {
                         return prev;
                     }
                     if (prev < 0) {
-                        clearInterval(interval);
+                        (_a = zen_1.zen.clearInterval) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, interval);
                         isFinishedRef.current = true;
-                        setTimeout(onClose);
+                        (_b = zen_1.zen.setTimeout) === null || _b === void 0 ? void 0 : _b.call(zen_1.zen, onClose);
                         return 0;
                     }
                     return prev - 1;
                 });
             }, seconds * 10);
-            return () => clearInterval(interval);
+            return () => { var _a; return (_a = zen_1.zen.clearInterval) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, interval); };
         }
         return undefined;
     }, [isOpen, onClose, seconds, showSeconds]);

package/dist/toastRaw/toastRaw.d.ts

@@ -25,4 +25,5 @@ export interface IToastRaw extends IZenComponentProps {
     action?: IAction;
     ref?: RefObject<HTMLDivElement | null>;
 }
-export declare const ToastRaw: ({ isOpen, onClose, animation, type, hasIcon, header, id, action, showSeconds, ref }: IToastRaw) => import("react/jsx-runtime").JSX.Element;
+export declare const TOAST_CLASSNAME = "zen-toast";
+export declare const ToastRaw: ({ className, isOpen, onClose, animation, type, hasIcon, header, id, action, showSeconds, ref }: IToastRaw) => import("react/jsx-runtime").JSX.Element;

package/dist/toastRaw/toastRaw.js

@@ -6,7 +6,7 @@ const {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ToastRaw = void 0;
+exports.ToastRaw = exports.TOAST_CLASSNAME = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 injectString("cs", "Close", "Zav\u0159\xEDt");
 injectString("da-DK", "Close", "Luk");
@@ -52,7 +52,9 @@ const typedIcons = {
   info: iconInfoCircle_1.IconInfoCircle
 };
 const getIcon = t => typedIcons[t];
+exports.TOAST_CLASSNAME = "zen-toast";
 const ToastRaw = ({
+  className,
   isOpen,
   onClose,
   animation,
@@ -79,9 +81,9 @@ const ToastRaw = ({
     onClose,
     showSeconds
   });
-  const toastClasses = (0, classNames_1.classNames)(["zen-toast", `zen-toast--${type || "info"}`, isMobile ? "zen-toast--mobile" : "", isDrive ? "zen-toast--drive" : "", dark ? "zen-dark" : ""]);
-  const contentStartClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-toast__content-start", hasIcon ? "zen-toast__content-start--icon" : ""]), [hasIcon]);
-  const contentEndClasses = (0, classNames_1.classNames)(["zen-toast__content-end", action ? "zen-toast__content-end--action" : ""]);
+  const toastClasses = (0, classNames_1.classNames)([exports.TOAST_CLASSNAME, `${exports.TOAST_CLASSNAME}--${type || "info"}`, isMobile ? `${exports.TOAST_CLASSNAME}--mobile` : "", isDrive ? `${exports.TOAST_CLASSNAME}--drive` : "", dark ? "zen-dark" : "", className || ""]);
+  const contentStartClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)([`${exports.TOAST_CLASSNAME}__content-start`, hasIcon ? `${exports.TOAST_CLASSNAME}__content-start--icon` : ""]), [hasIcon]);
+  const contentEndClasses = (0, classNames_1.classNames)([`${exports.TOAST_CLASSNAME}__content-end`, action ? `${exports.TOAST_CLASSNAME}__content-end--action` : ""]);
   const onActionClick = (0, react_1.useCallback)(() => {
     var _a;
     (_a = action === null || action === void 0 ? void 0 : action.onClick) === null || _a === void 0 ? void 0 : _a.call(action);
@@ -93,7 +95,7 @@ const ToastRaw = ({
     }
     if (action.icon) {
       return (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
-        className: "zen-toast__action",
+        className: `${exports.TOAST_CLASSNAME}__action`,
         type: "tertiary",
         icon: action.icon,
         iconPosition: action.iconPosition || textIconButton_1.ButtonIconPosition.Start,
@@ -104,7 +106,7 @@ const ToastRaw = ({
       });
     }
     return (0, jsx_runtime_1.jsx)(button_1.Button, {
-      className: "zen-toast__action",
+      className: `${exports.TOAST_CLASSNAME}__action`,
       type: "tertiary",
       link: action.link,
       onClick: onActionClick,
@@ -127,23 +129,23 @@ const ToastRaw = ({
         style: {
           width: `${progress}%`
         },
-        className: (0, classNames_1.classNames)(["zen-toast__progress", "progress", `zen-toast__progress--${type || "info"}`, progress !== 100 ? "zen-toast__progress--active" : ""])
+        className: (0, classNames_1.classNames)([`${exports.TOAST_CLASSNAME}__progress`, "progress", `${exports.TOAST_CLASSNAME}__progress--${type || "info"}`, progress !== 100 ? `${exports.TOAST_CLASSNAME}__progress--active` : ""])
       }), (0, jsx_runtime_1.jsxs)("div", {
-        className: "zen-toast__content",
+        className: `${exports.TOAST_CLASSNAME}__content`,
         children: [(0, jsx_runtime_1.jsxs)("div", {
           className: contentStartClasses,
           children: [hasIcon && (0, react_1.createElement)(getIcon(type || "info"), {
             size: isDrive ? "huge" : "large",
-            className: `zen-toast__icon--${type || "info"}`
+            className: `${exports.TOAST_CLASSNAME}__icon--${type || "info"}`
           }), (0, jsx_runtime_1.jsx)("div", {
-            className: (0, classNames_1.classNames)(["zen-toast__header", `zen-toast__header--${type || "info"}`]),
+            className: (0, classNames_1.classNames)([`${exports.TOAST_CLASSNAME}__header`, `${exports.TOAST_CLASSNAME}__header--${type || "info"}`]),
             children: header
           })]
         }), (0, jsx_runtime_1.jsxs)("div", {
           className: contentEndClasses,
           children: [actionButton, (0, jsx_runtime_1.jsx)("button", {
             type: "button",
-            className: (0, classNames_1.classNames)(["zen-toast__close-button", `zen-toast__close-button--${type || "info"}`]),
+            className: (0, classNames_1.classNames)([`${exports.TOAST_CLASSNAME}__close-button`, `${exports.TOAST_CLASSNAME}__close-button--${type || "info"}`]),
             onClick: onClose,
             title: translate("Close"),
             "aria-label": translate("Close"),

package/dist/toolbar/helpers/getWidthWithMargin.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getWidthWithMargin = void 0;
+const zen_1 = require("../../utils/zen");
 const getWidthWithMargin = (elem) => {
-    const style = window.getComputedStyle(elem);
+    var _a;
+    const style = ((_a = zen_1.zen.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, elem)) || { marginLeft: "0", marginRight: "0" };
     const margin = (parseFloat(style.marginLeft) + parseFloat(style.marginRight)) || 0;
     const width = elem.getBoundingClientRect().width;
     return width + margin;

package/dist/toolbar/helpers/getWidthWithoutPadding.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getWidthWithoutPadding = void 0;
+const zen_1 = require("../../utils/zen");
 const getWidthWithoutPadding = (elem) => {
-    const style = window.getComputedStyle(elem);
-    const padding = (parseFloat(style.paddingLeft) + parseFloat(style.paddingRight)) || 0;
+    var _a;
+    const style = (_a = zen_1.zen.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, elem);
+    const padding = (parseFloat((style === null || style === void 0 ? void 0 : style.paddingLeft) || "0") + parseFloat((style === null || style === void 0 ? void 0 : style.paddingRight) || "0")) || 0;
     const width = elem.getBoundingClientRect().width;
     return width - padding;
 };

package/dist/tooltip/tooltip.js

@@ -107,6 +107,7 @@ 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 zen_1 = require("../utils/zen");
 const TOOLTIP_VISIBILITY_DELAY = 100;
 const arrowClasses = {
   "top": "zen-tooltip__arrow--top",
@@ -123,8 +124,8 @@ const arrowClasses = {
   "left-bottom": "zen-tooltip__arrow--left"
 };
 const getInitialDeviceType = () => {
-  if (typeof window !== "undefined") {
-    return (0, useDeviceType_1.getDeviceType)(window.innerWidth);
+  if (typeof zen_1.zen.window !== "undefined") {
+    return (0, useDeviceType_1.getDeviceType)(zen_1.zen.window.innerWidth);
   }
   return deviceType_1.DeviceType.Desktop;
 };
@@ -149,11 +150,13 @@ const EventWrapper = ({
   }, [originalOnClick, handleUniversalClick]);
   const desktopEvents = {
     onMouseOver: () => {
+      var _a;
       setTooltipVisible(true);
-      timerMouseOutRef.current && clearTimeout(timerMouseOutRef.current);
+      timerMouseOutRef.current && ((_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timerMouseOutRef.current));
     },
     onMouseLeave: () => {
-      timerRef.current = setTimeout(() => {
+      var _a;
+      timerRef.current = (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
         setTooltipVisible(false);
       }, TOOLTIP_VISIBILITY_DELAY);
     },
@@ -282,8 +285,9 @@ const Tooltip = ({
     }
   };
   const checkNaturalFit = (0, react_1.useCallback)((rawPosition, popupRect) => {
-    const docWidth = window.innerWidth + window.scrollX;
-    const docHeight = window.innerHeight + window.scrollY;
+    var _a, _b, _c, _d;
+    const docWidth = (((_a = zen_1.zen.window) === null || _a === void 0 ? void 0 : _a.innerWidth) || 0) + (((_b = zen_1.zen.window) === null || _b === void 0 ? void 0 : _b.scrollX) || 0);
+    const docHeight = (((_c = zen_1.zen.window) === null || _c === void 0 ? void 0 : _c.innerHeight) || 0) + (((_d = zen_1.zen.window) === null || _d === void 0 ? void 0 : _d.scrollY) || 0);
     // Check horizontal fit
     if (rawPosition.left !== undefined) {
       if (rawPosition.left < 0 || rawPosition.left + popupRect.width > docWidth) {
@@ -307,6 +311,7 @@ const Tooltip = ({
     return true;
   }, []);
   const getEffectiveAlignment = (0, react_1.useCallback)(preferredAlignment => {
+    var _a, _b, _c, _d;
     if (isMobile) {
       return preferredAlignment;
     }
@@ -320,10 +325,10 @@ const Tooltip = ({
     const parentRect = {
       top: 0,
       left: 0,
-      right: window.innerWidth,
-      bottom: window.innerHeight,
-      width: window.innerWidth,
-      height: window.innerHeight
+      right: ((_a = zen_1.zen.window) === null || _a === void 0 ? void 0 : _a.innerWidth) || 0,
+      bottom: ((_b = zen_1.zen.window) === null || _b === void 0 ? void 0 : _b.innerHeight) || 0,
+      width: ((_c = zen_1.zen.window) === null || _c === void 0 ? void 0 : _c.innerWidth) || 0,
+      height: ((_d = zen_1.zen.window) === null || _d === void 0 ? void 0 : _d.innerHeight) || 0
     };
     const [mainAlignment, subAlignment] = preferredAlignment.split("-");
     const oppositeMain = getOppositeAlignment(mainAlignment);
@@ -340,7 +345,9 @@ const Tooltip = ({
     }
     return preferredAlignment;
   }, [isMobile, TOOLTIP_ARROW_HEIGHT, triggerRef, checkNaturalFit]);
+  // eslint-disable-next-line complexity
   const renderTooltip = () => {
+    var _a, _b;
     if (!isTooltipVisible) {
       return "";
     }
@@ -353,11 +360,13 @@ const 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);
+          var _a, _b;
+          timerRef.current && ((_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timerRef.current));
+          timerMouseOutRef.current && ((_b = zen_1.zen.clearTimeout) === null || _b === void 0 ? void 0 : _b.call(zen_1.zen, timerMouseOutRef.current));
         },
         onMouseOut: () => {
-          timerMouseOutRef.current = setTimeout(() => {
+          var _a;
+          timerMouseOutRef.current = (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
             if (!isMobile && !isDrive) {
               setTooltipVisible(false);
             }
@@ -389,7 +398,7 @@ const Tooltip = ({
         })]
       })]
     });
-    return (0, react_dom_1.createPortal)(content, document.fullscreenElement || document.body, tooltipId);
+    return (0, react_dom_1.createPortal)(content, ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body), tooltipId);
   };
   const calculatePosition = (0, react_1.useCallback)(() => {
     const eAlignment = getEffectiveAlignment(tooltipAlignmentRef.current);
@@ -407,6 +416,7 @@ const Tooltip = ({
   (0, useResize_1.useResize)(calculatePosition, isTooltipVisible);
   (0, react_1.useLayoutEffect)(calculatePosition, [isTooltipVisible, calculatePosition]);
   (0, react_1.useEffect)(() => {
+    var _a, _b;
     const finalClickHandler = event => {
       var _a, _b;
       if (!isTooltipVisible) {
@@ -426,20 +436,22 @@ const Tooltip = ({
         setTooltipVisible(false);
       }
     };
-    document.addEventListener("click", finalClickHandler);
-    document.addEventListener("keydown", escapeHandler);
+    (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.addEventListener("click", finalClickHandler);
+    (_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.addEventListener("keydown", escapeHandler);
     return () => {
-      document.removeEventListener("click", finalClickHandler);
-      document.removeEventListener("keydown", escapeHandler);
+      var _a, _b;
+      (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.removeEventListener("click", finalClickHandler);
+      (_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.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)(() => () => {
+    var _a, _b;
     if (timerRef.current) {
-      clearTimeout(timerRef.current);
+      (_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timerRef.current);
     }
     if (timerMouseOutRef.current) {
-      clearTimeout(timerMouseOutRef.current);
+      (_b = zen_1.zen.clearTimeout) === null || _b === void 0 ? void 0 : _b.call(zen_1.zen, timerMouseOutRef.current);
     }
   }, []);
   return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {

package/dist/utils/getParentWithHiddenOverflow.js

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getParentWithHiddenOverflow = void 0;
+const zen_1 = require("./zen");
 const getParentWithHiddenOverflow = function (element) {
+    var _a;
     let el = element.parentElement;
     while (el && el instanceof Element) {
-        const overflow = window.getComputedStyle(el).overflow || "";
+        const overflow = ((_a = zen_1.zen.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, el).overflow) || "";
         if (overflow === "hidden") {
             return el;
         }

package/dist/utils/getRelativeParent.js

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getRelativeParent = void 0;
+const zen_1 = require("./zen");
 const getRelativeParent = function (element) {
+    var _a;
     let el = element.parentElement;
     while (el && el instanceof Element) {
-        const pos = window.getComputedStyle(el).position || "";
+        const pos = ((_a = zen_1.zen.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, el).position) || "";
         if (pos === "relative" || pos === "absolute") {
             return el;
         }

package/dist/utils/globalThisPolyfill.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Polyfill for globalThis to ensure compatibility with older browsers and Node.js versions.
+ * This provides a consistent way to access the global object across different environments.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis
+ */
+/**
+ * Ensures globalThis polyfill is applied.
+ * Import this file to guarantee globalThis is available.
+ */
+export declare const ensureGlobalThis: () => typeof globalThis;

package/dist/utils/globalThisPolyfill.js

@@ -0,0 +1,33 @@
+"use strict";
+/**
+ * Polyfill for globalThis to ensure compatibility with older browsers and Node.js versions.
+ * This provides a consistent way to access the global object across different environments.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ensureGlobalThis = void 0;
+(function () {
+    if (typeof globalThis === "object") {
+        return;
+    }
+    Object.defineProperty(Object.prototype, "__temp__", {
+        get: function () {
+            return this;
+        },
+        configurable: true
+    });
+    // eslint-disable-next-line
+    // @ts-ignore
+    __temp__.globalThis = __temp__;
+    // eslint-disable-next-line
+    // @ts-ignore
+    // eslint-disable-next-line
+    delete Object.prototype.__temp__;
+}());
+/**
+ * Ensures globalThis polyfill is applied.
+ * Import this file to guarantee globalThis is available.
+ */
+const ensureGlobalThis = () => globalThis;
+exports.ensureGlobalThis = ensureGlobalThis;

package/dist/utils/keyboardHelpers.js

@@ -2,12 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getFirstFocusableItem = exports.getNewFocusableItem = void 0;
 const focusableSelector_1 = require("./focusableSelector");
+const zen_1 = require("./zen");
 const getNewFocusableItem = (step, container, specificSelector) => {
+    var _a;
     if (!container) {
         return undefined;
     }
     const allFocusables = Array.from(container.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR));
-    const currentElement = document.activeElement;
+    const currentElement = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.activeElement;
     if (allFocusables.length === 0) {
         return undefined;
     }

package/dist/utils/localization/languageContext.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const languageContext: import("react").Context<"th" | "tr" | "ms" | "id" | "en" | "es" | "de" | "cs" | "fr-FR" | "fr" | "it" | "ja" | "nl" | "pl" | "pt-BR" | "sv" | "zh-Hans" | "ko-KR" | "zh-TW" | "da-DK" | "fi-FI" | "hu-HU" | "nb-NO" | "sk-SK" | "pt-PT" | "ro-RO">;
+export declare const languageContext: import("react").Context<"it" | "th" | "tr" | "ms" | "id" | "en" | "es" | "de" | "cs" | "fr-FR" | "fr" | "ja" | "nl" | "pl" | "pt-BR" | "sv" | "zh-Hans" | "ko-KR" | "zh-TW" | "da-DK" | "fi-FI" | "hu-HU" | "nb-NO" | "sk-SK" | "pt-PT" | "ro-RO">;

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

@@ -250,5 +250,7 @@
     "Reload": "Načíst znovu",
     "View details": "Zobrazit podrobnosti",
     "Year to date": "Od začátku roku",
-    "Time": "Čas"
+    "Time": "Čas",
+    "Apply filter": "Použít filtr",
+    "Remove filter": "Odebrat filtr"
 }

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

@@ -260,5 +260,7 @@
     "Reload": "Genindlæs",
     "View details": "Se detaljer",
     "Year to date": "År til dato",
-    "Time": "Tid"
+    "Time": "Tid",
+    "Apply filter": "Anvend filter",
+    "Remove filter": "Fjern filter"
 }

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

@@ -250,5 +250,7 @@
     "Reload": "Neu laden",
     "View details": "Details anzeigen",
     "Year to date": "Seit Jahresbeginn",
-    "Time": "Zeit"
+    "Time": "Zeit",
+    "Apply filter": "Filter anwenden",
+    "Remove filter": "Filter entfernen"
 }

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

@@ -310,5 +310,9 @@
     "Selection panel": "Selection panel",
     "Bulk select": "Bulk select",
     "Year to date": "Year to date",
-    "Time": "Time"
+    "Time": "Time",
+    "Filters and search": "Filters and search",
+    "Apply filter": "Apply filter",
+    "This filter is currently applied.": "This filter is currently applied.",
+    "Remove filter": "Remove filter"
 }

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

@@ -250,5 +250,7 @@
     "Reload": "Volver a cargar",
     "View details": "Ver detalles",
     "Year to date": "Año a la fecha",
-    "Time": "Hora"
+    "Time": "Hora",
+    "Apply filter": "Aplicar filtro",
+    "Remove filter": "Eliminar filtro"
 }

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

@@ -260,5 +260,7 @@
     "Reload": "Ladata uudelleen",
     "View details": "Näytä tiedot",
     "Year to date": "Vuoden alusta",
-    "Time": "Aika"
+    "Time": "Aika",
+    "Apply filter": "Käytä suodatinta",
+    "Remove filter": "Poista suodatin"
 }

package/dist/utils/localization/translations/fr-FR.json

@@ -250,5 +250,7 @@
     "Reload": "Actualiser",
     "View details": "Voir les détails",
     "Year to date": "L’année passée",
-    "Time": "Heure"
+    "Time": "Heure",
+    "Apply filter": "Appliquer filtre",
+    "Remove filter": "Supprimer filtre"
 }

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

@@ -250,5 +250,7 @@
     "Reload": "Recharger",
     "View details": "Afficher les détails",
     "Year to date": "Cumul jusqu’à ce jour",
-    "Time": "Heure"
+    "Time": "Heure",
+    "Apply filter": "Appliquer les filtres",
+    "Remove filter": "Supprimer le filtre"
 }

package/dist/utils/localization/translations/hu-HU.json

@@ -260,5 +260,7 @@
     "Reload": "Újratöltés",
     "View details": "Részletek megtekintése",
     "Year to date": "Év a mai napig",
-    "Time": "Idő"
+    "Time": "Idő",
+    "Apply filter": "Szűrő alkalmazása",
+    "Remove filter": "Szűrő eltávolítása"
 }

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

@@ -250,5 +250,7 @@
     "Reload": "Muat ulang",
     "View details": "Lihat detail",
     "Year to date": "Tahun hingga saat ini",
-    "Time": "Waktu"
+    "Time": "Waktu",
+    "Apply filter": "Terapkan filter",
+    "Remove filter": "Hapus filter"
 }

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

@@ -250,5 +250,7 @@
     "Reload": "Ricarica",
     "View details": "Visualizzare dettagli",
     "Year to date": "Dall'inizio dell'anno",
-    "Time": "Tempo"
+    "Time": "Tempo",
+    "Apply filter": "Applicare filtro",
+    "Remove filter": "Rimuovere filtro"
 }