@geotab/zenith 3.5.0 → 3.6.0-beta.1

package/dist/commonHelpers/hooks/useKeydown.js

@@ -2,13 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useKeydown = void 0;
 const react_1 = require("react");
+const zen_1 = require("../../utils/zen");
 const useKeydown = (callback, subscriptionTrigger, condition) => {
     (0, react_1.useEffect)(() => {
+        var _a;
         if (condition ? condition(subscriptionTrigger) : subscriptionTrigger) {
-            document.body.addEventListener("keydown", callback);
+            (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.body.addEventListener("keydown", callback);
         }
         return () => {
-            document.body.removeEventListener("keydown", callback);
+            var _a;
+            (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.body.removeEventListener("keydown", callback);
         };
     }, [callback, condition, subscriptionTrigger]);
 };

package/dist/commonHelpers/hooks/useMobile.js

@@ -5,10 +5,13 @@ const react_1 = require("react");
 const deviceType_1 = require("./deviceType");
 const useDeviceType_1 = require("./useDeviceType");
 const getParentWindow_1 = require("../../utils/getParentWindow");
-const initialParent = (0, getParentWindow_1.getParentWindow)(window);
+const deviceProvider_1 = require("./deviceProvider");
+const zen_1 = require("../../utils/zen");
+const initialParent = (0, getParentWindow_1.getParentWindow)(zen_1.zen);
 exports.initialValue = (0, useDeviceType_1.getDeviceType)(initialParent.innerWidth);
 const useMobile = () => {
-    const [deviceType, setDeviceType] = (0, react_1.useState)(exports.initialValue);
+    const deviceTypeFromProvider = (0, react_1.useContext)(deviceProvider_1.DeviceContext);
+    const [deviceType, setDeviceType] = (0, react_1.useState)(deviceTypeFromProvider || exports.initialValue);
     (0, useDeviceType_1.useDeviceType)(setDeviceType);
     const isMobile = (0, react_1.useMemo)(() => deviceType === deviceType_1.DeviceType.Mobile, [deviceType]);
     return isMobile;

package/dist/commonHelpers/hooks/usePillSize.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const classNames_1 = require("../classNames/classNames");
 const useResize_1 = require("./useResize");
 const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
+const useMobileClassName_1 = require("../../utils/theme/useMobileClassName");
 const PILL_WIDTH_WITHOUT_CONTENT = 64;
 const usePillSize = ({ size, iconPosition, onClose, hasContent, initialTitle }) => {
     const isFixedSize = size && size !== "default" && size !== "fullWidth";
@@ -14,6 +15,7 @@ const usePillSize = ({ size, iconPosition, onClose, hasContent, initialTitle })
     const [textContent, setTextContent] = (0, react_1.useState)(initialTitle || "");
     const ref = (0, react_1.useRef)(null);
     const driveClass = (0, useDriveClassName_1.useDriveClassName)("zen-pill-new-content");
+    const mobileClass = (0, useMobileClassName_1.useMobileClassName)("zen-pill-new-content");
     (0, react_1.useEffect)(() => {
         var _a;
         if (initialTitle) {
@@ -31,7 +33,7 @@ const usePillSize = ({ size, iconPosition, onClose, hasContent, initialTitle })
     }, [isContentHidden, textContent]);
     const contentClasses = (0, classNames_1.classNames)([
         "zen-pill-new-content",
-        driveClass || "",
+        mobileClass || driveClass || "",
         iconPosition === "left" ? "zen-pill-new-content--icon-left" : iconPosition === "right" ? "zen-pill-new-content--icon-right" : "",
         isContentHidden ? "zen-pill-new-content--hidden" : "",
         isClosable ? "zen-pill-new-content--closable" : "",

package/dist/commonHelpers/hooks/usePortal.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from "react";
+export declare const usePortal: (children: ReactNode, container?: Element | DocumentFragment, key?: null | string) => import("react").ReactPortal | null;

package/dist/commonHelpers/hooks/usePortal.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePortal = void 0;
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const usePortal = (children, container, key) => {
+    const [portalContainer, setPortalContainer] = (0, react_1.useState)(container);
+    (0, react_1.useEffect)(() => {
+        if (portalContainer || !container) {
+            return;
+        }
+        setPortalContainer(container);
+    }, [portalContainer, container]);
+    return portalContainer ? (0, react_dom_1.createPortal)(children, portalContainer, key) : null;
+};
+exports.usePortal = usePortal;

package/dist/commonHelpers/hooks/useResize.js

@@ -2,15 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useResize = void 0;
 const react_1 = require("react");
+const zen_1 = require("../../utils/zen");
 const useResize = (callback, active) => {
     (0, react_1.useEffect)(() => {
+        var _a;
         if (!active) {
-            return;
+            return undefined;
         }
-        window.addEventListener("resize", callback);
-        // eslint-disable-next-line consistent-return
+        (_a = zen_1.zen.addEventListener) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, "resize", callback);
         return () => {
-            window.removeEventListener("resize", callback);
+            var _a;
+            (_a = zen_1.zen.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, "resize", callback);
         };
     }, [callback, active]);
 };

package/dist/commonHelpers/hooks/useResizeObserver.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useResizeObserver = void 0;
 const react_1 = require("react");
+const zen_1 = require("../../utils/zen");
 const isRefObject = (target) => !!target && target.hasOwnProperty("current");
 const getTarget = (target) => {
     const targetObj = isRefObject(target) ? target.current : target;
@@ -10,17 +11,21 @@ const getTarget = (target) => {
 const useResizeObserver = ({ target }) => {
     const [result, setResult] = (0, react_1.useState)(null);
     const timeoutRef = (0, react_1.useRef)(null);
-    const observer = (0, react_1.useRef)(new ResizeObserver((entities) => {
-        timeoutRef.current && cancelAnimationFrame(timeoutRef.current);
-        timeoutRef.current = requestAnimationFrame(() => setResult(entities[0]));
-    }));
+    const ResizeObserverFn = zen_1.zen.ResizeObserver;
+    const observerCallback = ResizeObserverFn ? new ResizeObserverFn((entities) => {
+        var _a, _b;
+        timeoutRef.current && ((_a = zen_1.zen.cancelAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timeoutRef.current));
+        timeoutRef.current = (_b = zen_1.zen.requestAnimationFrame) === null || _b === void 0 ? void 0 : _b.call(zen_1.zen, () => setResult(entities[0]));
+    }) : undefined;
+    const observer = (0, react_1.useRef)(observerCallback);
     (0, react_1.useLayoutEffect)(() => {
         const targetObj = getTarget(target);
         const observerObj = observer.current;
-        targetObj && observerObj.observe(targetObj);
+        targetObj && (observerObj === null || observerObj === void 0 ? void 0 : observerObj.observe(targetObj));
         return () => {
-            timeoutRef.current && cancelAnimationFrame(timeoutRef.current);
-            observerObj.disconnect();
+            var _a;
+            timeoutRef.current && ((_a = zen_1.zen.cancelAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timeoutRef.current));
+            observerObj === null || observerObj === void 0 ? void 0 : observerObj.disconnect();
         };
     }, [target]);
     return { result };

package/dist/commonHelpers/hooks/useScroll.js

@@ -2,7 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useScroll = void 0;
 const react_1 = require("react");
-const useScroll = (callback, active, triggerRef = document.body) => {
+const zen_1 = require("../../utils/zen");
+const useScroll = (callback, active, triggerRef) => {
+    var _a;
+    if (triggerRef === void 0) { triggerRef = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.body; }
     (0, react_1.useEffect)(() => {
         if (!active || triggerRef === null) {
             return;

package/dist/commonHelpers/hooks/useThrottle.d.ts

@@ -1 +1 @@
-export declare const useThrottle: <T extends unknown[]>(callback: (...rest: T) => void, delay?: number) => (...rest: T) => () => void;
+export declare const useThrottle: <T extends unknown[]>(callback: (...rest: T) => void, delay?: number) => (...rest: T) => () => void | undefined;

package/dist/commonHelpers/hooks/useThrottle.js

@@ -2,19 +2,21 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useThrottle = void 0;
 const react_1 = require("react");
+const zen_1 = require("../../utils/zen");
 const useThrottle = function (callback, delay = 400) {
     const timeoutRef = (0, react_1.useRef)(undefined);
     const latestValuesRef = (0, react_1.useRef)(undefined);
     return (0, react_1.useCallback)((...rest) => {
+        var _a;
         if (!timeoutRef.current) {
-            timeoutRef.current = setTimeout(() => {
+            timeoutRef.current = (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
                 latestValuesRef.current && callback(...(latestValuesRef.current));
                 timeoutRef.current = undefined;
                 latestValuesRef.current = undefined;
             }, delay);
         }
         latestValuesRef.current = rest;
-        return () => clearTimeout(timeoutRef.current);
+        return () => { var _a; return (_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timeoutRef.current); };
     }, [callback, delay]);
 };
 exports.useThrottle = useThrottle;

package/dist/commonHelpers/hooks/useTrapFocus.js

@@ -7,14 +7,19 @@ const focusableSelector_1 = require("../../utils/focusableSelector");
 const useKeydown_1 = require("./useKeydown");
 const isChildOf_1 = require("../../utils/isChildOf");
 const isElementHidden_1 = require("../../utils/isElementHidden");
+const zen_1 = require("../../utils/zen");
 const findFirstVisible = (elems, isElementVisible) => elems.find(elem => isElementVisible(elem));
 const useTrapFocus = (containerRef, triggerRef, subscriptionTrigger, condition, isElementVisible) => {
     // eslint-disable-next-line complexity
     const handleKeyDown = (0, react_1.useCallback)((e) => {
-        var _a;
-        const getChildCondition = () => triggerRef
-            ? !(0, isChildOf_1.isChildOf)(e.target, containerRef.current) && e.target !== document.body && !(0, isChildOf_1.isChildOf)(e.target, triggerRef.current)
-            : !(0, isChildOf_1.isChildOf)(e.target, containerRef.current) && e.target !== document.body;
+        var _a, _b, _c, _d, _e, _f;
+        const getChildCondition = () => {
+            var _a, _b;
+            return triggerRef
+                ? !(0, isChildOf_1.isChildOf)(e.target, containerRef.current)
+                    && e.target !== ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.body) && !(0, isChildOf_1.isChildOf)(e.target, triggerRef.current)
+                : !(0, isChildOf_1.isChildOf)(e.target, containerRef.current) && e.target !== ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body);
+        };
         if (!containerRef.current || getChildCondition()) {
             return;
         }
@@ -40,27 +45,27 @@ const useTrapFocus = (containerRef, triggerRef, subscriptionTrigger, condition,
                 return;
             }
             if (e.shiftKey) {
-                if (document.activeElement === first) {
+                if (((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.activeElement) === first) {
                     e.preventDefault();
                     last === null || last === void 0 ? void 0 : last.focus();
                     return;
                 }
-                if (firstContainerFocusable && document.activeElement === firstContainerFocusable) {
+                if (firstContainerFocusable && ((_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.activeElement) === firstContainerFocusable) {
                     e.preventDefault();
                     lastTriggerFocusable === null || lastTriggerFocusable === void 0 ? void 0 : lastTriggerFocusable.focus();
                 }
                 return;
             }
-            if (document.activeElement === last) {
+            if (((_d = zen_1.zen.document) === null || _d === void 0 ? void 0 : _d.activeElement) === last) {
                 e.preventDefault();
                 first === null || first === void 0 ? void 0 : first.focus();
                 return;
             }
-            if (lastTriggerFocusable && document.activeElement === lastTriggerFocusable) {
+            if (lastTriggerFocusable && ((_e = zen_1.zen.document) === null || _e === void 0 ? void 0 : _e.activeElement) === lastTriggerFocusable) {
                 e.preventDefault();
                 firstContainerFocusable === null || firstContainerFocusable === void 0 ? void 0 : firstContainerFocusable.focus();
             }
-            else if (isLastChildOfFirst && first && (0, isChildOf_1.isChildOf)(document.activeElement, first)) {
+            else if (isLastChildOfFirst && first && (0, isChildOf_1.isChildOf)((_f = zen_1.zen.document) === null || _f === void 0 ? void 0 : _f.activeElement, first)) {
                 e.preventDefault();
             }
             return;

package/dist/commonHelpers/isDomEnv.d.ts

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

package/dist/commonHelpers/isDomEnv.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isDomEnv = void 0;
+/* eslint-disable */
+const isDomEnv = () => {
+    var _a;
+    return !!(typeof window !== "undefined" &&
+        typeof (window === null || window === void 0 ? void 0 : window.document) !== "undefined" &&
+        typeof ((_a = window === null || window === void 0 ? void 0 : window.document) === null || _a === void 0 ? void 0 : _a.createElement) !== "undefined");
+};
+exports.isDomEnv = isDomEnv;

package/dist/commonHelpers/utils.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.deepClone = exports.deepMerge = exports.flattenArrays = exports.echo = exports.generateId = void 0;
+const zen_1 = require("../utils/zen");
 const generateId = () => "id" + Math.random().toString().substring(2);
 exports.generateId = generateId;
 const echo = (_) => _;
@@ -47,8 +48,8 @@ const deepCloneFallback = (candidateToCopy) => {
     }, {});
 };
 const deepClone = (candidateToCopy) => {
-    if (typeof window.structuredClone === "function") {
-        return window.structuredClone(candidateToCopy);
+    if (typeof zen_1.zen.structuredClone === "function") {
+        return zen_1.zen.structuredClone(candidateToCopy);
     }
     return (candidateToCopy === undefined ? undefined : deepCloneFallback(candidateToCopy));
 };

package/dist/commonStyles/pillStyles/pillContent.less

@@ -8,6 +8,7 @@
 .zen-pill-new-content {
     @pill-height: 22px;
     @pill-height--drive: 34px;
+    @pill-height--mobile: 34px;
 
     .body-04();
     display: flex;
@@ -65,6 +66,33 @@
             grid-template-columns: 16px 1fr 22px;
     
     
+            &.zen-pill-new-content--empty {
+                grid-template-columns: 16px 22px;
+                gap: 8px;
+            }
+        }
+    }
+    &.zen-pill-new-content--mobile {
+        height: @pill-height--mobile;
+        .body-m-400-short();
+        .zen-pill-non-actionable__icon {
+            min-width: 16px;
+            max-width: 16px;
+            height: 16px;
+        }
+
+        &.zen-pill-new-content--icon-left {
+            grid-template-columns: 16px 1fr;
+    
+            &.zen-pill-new-content--empty {
+                grid-template-columns: 16px;
+            }
+        }
+
+        &.zen-pill-new-content--closable.zen-pill-new-content--icon-left {
+            grid-template-columns: 16px 1fr 22px;
+    
+    
             &.zen-pill-new-content--empty {
                 grid-template-columns: 16px 22px;
                 gap: 8px;

package/dist/controlledPopup/controlledPopup.js

@@ -5,11 +5,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const absolute_1 = require("../absolute/absolute");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, preventAttributesAutoSet }) => {
     const autoId = (0, react_1.useId)();
     const popupId = id || autoId;
+    const isClientReady = (0, useClientReady_1.useClientReady)();
     (0, react_1.useEffect)(() => {
-        if (!triggerRef.current) {
+        if (!triggerRef.current || !isClientReady) {
             return;
         }
         triggerRef.current.setAttribute("data-popup-id", popupId);
@@ -21,7 +23,7 @@ const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className
         triggerRef.current.setAttribute("aria-haspopup", triggerRole ? triggerRole : refTriggerRole === "menuitem" ? "menu" : "true");
         triggerRef.current.setAttribute("aria-expanded", isOpen ? "true" : "false");
         triggerRef.current.setAttribute("aria-controls", popupId);
-    }, [triggerRef, isOpen, popupId, preventAttributesAutoSet]);
+    }, [triggerRef, isOpen, popupId, preventAttributesAutoSet, isClientReady]);
     return ((0, jsx_runtime_1.jsx)(absolute_1.Absolute, { triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: (0, classNames_1.classNames)(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll, role: "dialog", ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, recalculateOnScroll: recalculateOnScroll, children: children }));
 };
 exports.ControlledPopup = ControlledPopup;

package/dist/dataFeed/dataFeed.js

@@ -9,6 +9,7 @@ const toBasicColumn_1 = require("../dataGrid/extensions/toBasicColumn");
 const useResize_1 = require("../commonHelpers/hooks/useResize");
 const dataFeedColumnsItems_1 = require("./dataFeedColumnsItems");
 const getRowClassName_1 = require("../dataGrid/getRowClassName");
+const zen_1 = require("../utils/zen");
 const EmptyList = ({ children }) => (0, jsx_runtime_1.jsx)("div", { className: "zen-data-feed__empty", children: children });
 exports.EmptyList = EmptyList;
 const Footer = ({ children }) => (0, jsx_runtime_1.jsx)("div", { className: "zen-data-feed__footer", children: children });
@@ -58,34 +59,38 @@ const DataFeedInner = ({ entities, columns, feedWrappers, className, expanded, o
         }
         return (0, findVisible_1.findVisibleRows)([...itemsEls], top, bottom);
     };
-    const scheduleVisibleChanges = (0, react_1.useCallback)(() => requestAnimationFrame(() => {
-        const visible = getVisibleItems();
-        const newVisibleRows = visible.filter(row => {
-            const id = row.dataset.rowId;
-            if (id === undefined) {
-                return false;
+    const scheduleVisibleChanges = (0, react_1.useCallback)(() => {
+        var _a;
+        return (_a = zen_1.zen.requestAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
+            const visible = getVisibleItems();
+            const newVisibleRows = visible.filter(row => {
+                const id = row.dataset.rowId;
+                if (id === undefined) {
+                    return false;
+                }
+                const entity = itemsMap.get(id);
+                if (entity === undefined) {
+                    return false;
+                }
+                return row;
+            }).map(row => row.dataset.rowId);
+            const hasNewRows = newVisibleRows.some(id => !visibleRows.has(id));
+            if (hasNewRows) {
+                const newRowsSet = new Set(visibleRows);
+                newVisibleRows.forEach(row => newRowsSet.add(row));
+                setVisibleRows(newRowsSet);
             }
-            const entity = itemsMap.get(id);
-            if (entity === undefined) {
-                return false;
+            if (visibleRows.size && checkCloseToTheEnd(feedRef.current)) {
+                if (entities.length > data.length) {
+                    setPages(pages + 1);
+                }
+                onFeedEnd && onFeedEnd();
             }
-            return row;
-        }).map(row => row.dataset.rowId);
-        const hasNewRows = newVisibleRows.some(id => !visibleRows.has(id));
-        if (hasNewRows) {
-            const newRowsSet = new Set(visibleRows);
-            newVisibleRows.forEach(row => newRowsSet.add(row));
-            setVisibleRows(newRowsSet);
-        }
-        if (visibleRows.size && checkCloseToTheEnd(feedRef.current)) {
-            if (entities.length > data.length) {
-                setPages(pages + 1);
-            }
-            onFeedEnd && onFeedEnd();
-        }
-    }), [itemsMap, visibleRows, setVisibleRows, onFeedEnd, pages, setPages, entities, data.length]);
+        });
+    }, [itemsMap, visibleRows, setVisibleRows, onFeedEnd, pages, setPages, entities, data.length]);
     const scheduleLazyRender = (0, react_1.useCallback)(() => {
-        cancelAnimationFrame(lazyRenderTimerRef.current);
+        var _a;
+        (_a = zen_1.zen.cancelAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, lazyRenderTimerRef.current);
         lazyRenderTimerRef.current = scheduleVisibleChanges();
     }, [scheduleVisibleChanges]);
     const handleScroll = (0, react_1.useCallback)(() => {

package/dist/dataFeed/dataFeedCell/dataFeedCell.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const basicColumn_1 = require("../../dataGrid/columns/basicColumn");
+const zen_1 = require("../../utils/zen");
 const FeedCell = ({ limited = false, visibleOnHover = false, isVisible, title, render, renderWrappers, renderPlaceholder, defaultValue, entity, isNested }) => {
     const [labelContent, setLabelContent] = (0, react_1.useState)("");
     const [content, setContent] = (0, react_1.useState)("");
@@ -29,26 +30,29 @@ const FeedCell = ({ limited = false, visibleOnHover = false, isVisible, title, r
         return [label, renderWrappers(postponedResult, entity)];
     }, [defaultValue, entity, render, renderWrappers, title, isNested]);
     (0, react_1.useEffect)(() => {
+        var _a;
         if (!isVisible) {
             setContent("");
             return () => { };
         }
-        const placeholderTimeout = requestAnimationFrame(() => {
+        const placeholderTimeout = (_a = zen_1.zen.requestAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
             const [label, value] = placeholderRenderer();
             setLabelContent(label);
             setContent(value);
         });
         renderer().then(([label, value]) => {
-            cancelAnimationFrame(placeholderTimeout);
+            var _a;
+            (_a = zen_1.zen.cancelAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, placeholderTimeout);
             setLabelContent(label);
             setContent(value);
         }).catch((e) => {
+            var _a;
             console.error(e);
-            cancelAnimationFrame(placeholderTimeout);
+            (_a = zen_1.zen.cancelAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, placeholderTimeout);
             setLabelContent("");
             setContent("");
         });
-        return () => cancelAnimationFrame(placeholderTimeout);
+        return () => { var _a; return (_a = zen_1.zen.cancelAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, placeholderTimeout); };
     }, [isVisible, renderer, placeholderRenderer]);
     return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [labelContent ? (0, jsx_runtime_1.jsx)("div", { className: "zen-feed-item__label", children: labelContent }) : null, content
                 ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)([

package/dist/dataFeed/dataFeedColumnsItems.js

@@ -35,7 +35,7 @@ const FeedItemInner = ({ columnsList, feedWrappers, expanded, collapsedColumnsQt
                 if (primaryActionsList && primaryActionsList.length > 0) {
                     primaryActionsContent = (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: primaryActionsList.map((action) => (0, jsx_runtime_1.jsx)(menu_1.Menu.Item, { id: action.id, icon: action.icon, name: action.createTitle(rowEntity), onClick: typeof action.handler === "function" ?
                                 (_1, e) => { var _a; (_a = action.handler) === null || _a === void 0 ? void 0 : _a.call(action, entity, e.target); } :
-                                undefined }, action.id)) });
+                                undefined, link: typeof action.createLink === "function" ? action.createLink(rowEntity) : undefined }, action.id)) });
                 }
             }
             if (!actions && !actionsAsync && !primaryActionsList) {

package/dist/dataGrid/cell/cell.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const basicColumn_1 = require("../columns/basicColumn");
 const isActiveElement_1 = require("../../list/utils/isActiveElement");
+const zen_1 = require("../../utils/zen");
 const Cell = ({ index, limited, visibleOnHover, isVisible, width, render, renderWrappers, renderPlaceholder, defaultValue, entity, colspan, className, onClick, isActive }) => {
     const [content, setContent] = (0, react_1.useState)("");
     const placeholderRenderer = (0, react_1.useCallback)(() => {
@@ -34,22 +35,26 @@ const Cell = ({ index, limited, visibleOnHover, isVisible, width, render, render
         }
     }, [defaultValue, entity, render, renderWrappers]);
     (0, react_1.useEffect)(() => {
+        var _a;
         if (!isVisible) {
             setContent("");
             return undefined;
         }
-        const placeholderTimeout = requestAnimationFrame(() => {
+        const placeholderTimeout = (_a = zen_1.zen.requestAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
             setContent(placeholderRenderer());
         });
         renderer().then(res => {
-            cancelAnimationFrame(placeholderTimeout);
+            var _a;
+            (_a = zen_1.zen.cancelAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, placeholderTimeout);
             setContent(res);
         }).catch(() => {
-            cancelAnimationFrame(placeholderTimeout);
+            var _a;
+            (_a = zen_1.zen.cancelAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, placeholderTimeout);
             setContent("");
         });
         return () => {
-            cancelAnimationFrame(placeholderTimeout);
+            var _a;
+            (_a = zen_1.zen.cancelAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, placeholderTimeout);
         };
     }, [isVisible, entity, renderer, placeholderRenderer]);
     const onCellClick = (0, react_1.useCallback)((e) => {

package/dist/dataGrid/dataGrid.js

@@ -44,12 +44,18 @@ const useResize_1 = require("../commonHelpers/hooks/useResize");
 const useResizeObserver_1 = require("../commonHelpers/hooks/useResizeObserver");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const getRowClassName_1 = require("./getRowClassName");
+const zen_1 = require("../utils/zen");
 exports.NOT_INTERACTIVE_MODIFIER = "zen-data-grid--not-interactive";
 exports.DRAGGING_MODIFIER = "zen-data-grid--dragging";
 exports.HORIZONTAL_SCROLL_MODIFIER = "zen-data-grid--horizontal-scroll";
 exports.VERTICAL_SCROLL_MODIFIER = "zen-data-grid--vertical-scroll";
 exports.MIN_CELL_WIDTH = 100;
 const renderHeaderWrappers = (wrappers, value) => wrappers.reduce((result, wrapper) => wrapper.renderHeader(result), value);
+const getHeaderPropsFromWrappers = wrappers => wrappers.reduce((result, wrapper) => {
+  var _a;
+  const props = (_a = wrapper.getHeaderProps) === null || _a === void 0 ? void 0 : _a.call(wrapper);
+  return props ? Object.assign(Object.assign({}, result), props) : result;
+}, {});
 const getColumnWidth = defaultWidth => Math.floor(Math.max(defaultWidth, exports.MIN_CELL_WIDTH));
 const EmptyList = ({
   children
@@ -107,28 +113,32 @@ const DataGridInner = ({
     } = gridRef.current.getBoundingClientRect();
     return (0, findVisible_1.findVisibleRows)([...bodyRef.current.children], top, bottom);
   };
-  const scheduleVisibleChanges = (0, react_1.useCallback)(() => requestAnimationFrame(() => {
-    const visible = getVisibleRows();
-    const newVisibleRows = visible.filter(row => {
-      const id = row.dataset.rowId;
-      if (id === undefined) {
-        return false;
-      }
-      const entity = rowsMap.get(id);
-      if (entity === undefined) {
-        return false;
+  const scheduleVisibleChanges = (0, react_1.useCallback)(() => {
+    var _a;
+    return (_a = zen_1.zen.requestAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
+      const visible = getVisibleRows();
+      const newVisibleRows = visible.filter(row => {
+        const id = row.dataset.rowId;
+        if (id === undefined) {
+          return false;
+        }
+        const entity = rowsMap.get(id);
+        if (entity === undefined) {
+          return false;
+        }
+        return row;
+      }).map(row => row.dataset.rowId);
+      const hasNewRows = newVisibleRows.some(id => !visibleRows.has(id));
+      if (hasNewRows) {
+        const newRowsSet = new Set(visibleRows);
+        newVisibleRows.forEach(row => newRowsSet.add(row));
+        setVisibleRows(newRowsSet);
       }
-      return row;
-    }).map(row => row.dataset.rowId);
-    const hasNewRows = newVisibleRows.some(id => !visibleRows.has(id));
-    if (hasNewRows) {
-      const newRowsSet = new Set(visibleRows);
-      newVisibleRows.forEach(row => newRowsSet.add(row));
-      setVisibleRows(newRowsSet);
-    }
-  }), [rowsMap, setVisibleRows, visibleRows]);
+    });
+  }, [rowsMap, setVisibleRows, visibleRows]);
   const scheduleLazyRender = (0, react_1.useCallback)(() => {
-    cancelAnimationFrame(lazyRenderTimerRef.current);
+    var _a;
+    (_a = zen_1.zen.cancelAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, lazyRenderTimerRef.current);
     lazyRenderTimerRef.current = scheduleVisibleChanges();
   }, [scheduleVisibleChanges]);
   (0, react_1.useEffect)(() => {
@@ -191,6 +201,7 @@ const DataGridInner = ({
       width
     } = getCellParams(columnIndex);
     const text = ((_a = column.columnComponent.renderHeader) === null || _a === void 0 ? void 0 : _a.bind(column.columnComponent)) ? column.columnComponent.renderHeader(column.title) : column.title;
+    const headerProps = getHeaderPropsFromWrappers(column.wrappers);
     return (0, jsx_runtime_1.jsx)(headerCell_1.DataGridHeaderCell, {
       id: column.id,
       isFirst: isFirst,
@@ -198,6 +209,7 @@ const DataGridInner = ({
       name: column.name,
       width: width,
       hidden: !text,
+      ariaSort: headerProps.ariaSort,
       children: (0, jsx_runtime_1.jsx)("div", {
         className: "zen-data-grid__header-cell-content",
         children: renderHeaderWrappers(column.wrappers, (0, jsx_runtime_1.jsx)("div", {

package/dist/dataGrid/headerCell/headerCell.d.ts

@@ -6,5 +6,6 @@ export interface IDataGridHeaderCell extends PropsWithChildren, IEntityWithId {
     isLast: boolean;
     hidden?: boolean;
     width?: number;
+    ariaSort?: "ascending" | "descending" | "none";
 }
-export declare const DataGridHeaderCell: import("react").MemoExoticComponent<({ id, name, isFirst, isLast, width, hidden, children }: IDataGridHeaderCell) => import("react/jsx-runtime").JSX.Element>;
+export declare const DataGridHeaderCell: import("react").MemoExoticComponent<({ id, name, isFirst, isLast, width, hidden, ariaSort, children }: IDataGridHeaderCell) => import("react/jsx-runtime").JSX.Element>;

package/dist/dataGrid/headerCell/headerCell.js

@@ -4,9 +4,9 @@ exports.DataGridHeaderCell = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
-const HeaderCell = ({ id, name, isFirst, isLast, width, hidden, children }) => (0, jsx_runtime_1.jsx)("th", { scope: "col", "data-column-id": id, "data-column-name": name, className: (0, classNames_1.classNames)([
+const HeaderCell = ({ id, name, isFirst, isLast, width, hidden, ariaSort, children }) => (0, jsx_runtime_1.jsx)("th", { scope: "col", "data-column-id": id, "data-column-name": name, className: (0, classNames_1.classNames)([
         "zen-data-grid__header-cell",
         isFirst ? "zen-data-grid__header-cell--first" : "",
         isLast ? "zen-data-grid__header-cell--last" : ""
-    ]), "aria-hidden": hidden, style: { width: isLast ? undefined : width, maxWidth: width }, children: children });
+    ]), "aria-hidden": hidden, "aria-sort": ariaSort, style: { width: isLast ? undefined : width, maxWidth: width }, children: children });
 exports.DataGridHeaderCell = (0, react_1.memo)(HeaderCell);