@geotab/zenith 3.5.0 → 3.6.0-beta.0

package/esm/commonHelpers/hooks/useTrapFocus.js

@@ -4,14 +4,19 @@ import { FOCUSABLE_SELECTOR } from "../../utils/focusableSelector";
 import { useKeydown } from "./useKeydown";
 import { isChildOf } from "../../utils/isChildOf";
 import { isElementHidden } from "../../utils/isElementHidden";
+import { zen } from "../../utils/zen";
 const findFirstVisible = (elems, isElementVisible) => elems.find(elem => isElementVisible(elem));
 export const useTrapFocus = (containerRef, triggerRef, subscriptionTrigger, condition, isElementVisible) => {
     // eslint-disable-next-line complexity
     const handleKeyDown = useCallback((e) => {
-        var _a;
-        const getChildCondition = () => triggerRef
-            ? !isChildOf(e.target, containerRef.current) && e.target !== document.body && !isChildOf(e.target, triggerRef.current)
-            : !isChildOf(e.target, containerRef.current) && e.target !== document.body;
+        var _a, _b, _c, _d, _e, _f;
+        const getChildCondition = () => {
+            var _a, _b;
+            return triggerRef
+                ? !isChildOf(e.target, containerRef.current)
+                    && e.target !== ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.body) && !isChildOf(e.target, triggerRef.current)
+                : !isChildOf(e.target, containerRef.current) && e.target !== ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.body);
+        };
         if (!containerRef.current || getChildCondition()) {
             return;
         }
@@ -37,27 +42,27 @@ export const useTrapFocus = (containerRef, triggerRef, subscriptionTrigger, cond
                 return;
             }
             if (e.shiftKey) {
-                if (document.activeElement === first) {
+                if (((_b = 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.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.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.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 && isChildOf(document.activeElement, first)) {
+            else if (isLastChildOfFirst && first && isChildOf((_f = zen.document) === null || _f === void 0 ? void 0 : _f.activeElement, first)) {
                 e.preventDefault();
             }
             return;

package/esm/commonHelpers/isDomEnv.d.ts

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

package/esm/commonHelpers/isDomEnv.js

@@ -0,0 +1,7 @@
+/* eslint-disable */
+export 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");
+};

package/esm/commonHelpers/utils.js

@@ -1,3 +1,4 @@
+import { zen } from "../utils/zen";
 export const generateId = () => "id" + Math.random().toString().substring(2);
 export const echo = (_) => _;
 export function flattenArrays(arrayOfArrays) {
@@ -40,8 +41,8 @@ const deepCloneFallback = (candidateToCopy) => {
     }, {});
 };
 export const deepClone = (candidateToCopy) => {
-    if (typeof window.structuredClone === "function") {
-        return window.structuredClone(candidateToCopy);
+    if (typeof zen.structuredClone === "function") {
+        return zen.structuredClone(candidateToCopy);
     }
     return (candidateToCopy === undefined ? undefined : deepCloneFallback(candidateToCopy));
 };

package/esm/commonStyles/typography/components/typographyItem.js

@@ -3,6 +3,7 @@ import { useLayoutEffect, useRef, useState } from "react";
 import { classNames } from "../../../commonHelpers/classNames/classNames";
 import { useMobile } from "../../../commonHelpers/hooks/useMobile";
 import { useDrive } from "../../../utils/theme/useDrive";
+import { zen } from "../../../utils/zen";
 const getFontWeightName = (value) => {
     switch (value) {
         case 300:
@@ -28,8 +29,8 @@ export const TypographyItem = ({ content = "The brown fox jumped over the lazy d
     const bigScreenName = isDrive ? "Tablet" : "Desktop";
     const deviceName = device || (isMobile ? "Mobile" : bigScreenName);
     useLayoutEffect(() => {
-        if (ref.current) {
-            const { fontWeight, fontSize, lineHeight, letterSpacing } = getComputedStyle(ref.current);
+        if (ref.current && zen.getComputedStyle) {
+            const { fontWeight, fontSize, lineHeight, letterSpacing } = zen.getComputedStyle(ref.current);
             setFontWeight(getFontWeightName(parseInt(fontWeight)));
             setFontSize(fontSize);
             setLineHeight(lineHeight);

package/esm/controlledPopup/controlledPopup.js

@@ -2,11 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useId } from "react";
 import { Absolute } from "../absolute/absolute";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, preventAttributesAutoSet }) => {
     const autoId = useId();
     const popupId = id || autoId;
+    const isClientReady = useClientReady();
     useEffect(() => {
-        if (!triggerRef.current) {
+        if (!triggerRef.current || !isClientReady) {
             return;
         }
         triggerRef.current.setAttribute("data-popup-id", popupId);
@@ -18,6 +20,6 @@ export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, cl
         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 (_jsx(Absolute, { triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: 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 }));
 };

package/esm/dataFeed/dataFeed.js

@@ -6,6 +6,7 @@ import { toBasicColumn } from "../dataGrid/extensions/toBasicColumn";
 import { useResize } from "../commonHelpers/hooks/useResize";
 import { FeedItem } from "./dataFeedColumnsItems";
 import { getRowClassName } from "../dataGrid/getRowClassName";
+import { zen } from "../utils/zen";
 export const EmptyList = ({ children }) => _jsx("div", { className: "zen-data-feed__empty", children: children });
 export const Footer = ({ children }) => _jsx("div", { className: "zen-data-feed__footer", children: children });
 const endOfFeedThreshold = 100;
@@ -53,34 +54,38 @@ const DataFeedInner = ({ entities, columns, feedWrappers, className, expanded, o
         }
         return findVisibleRows([...itemsEls], top, bottom);
     };
-    const scheduleVisibleChanges = useCallback(() => requestAnimationFrame(() => {
-        const visible = getVisibleItems();
-        const newVisibleRows = visible.filter(row => {
-            const id = row.dataset.rowId;
-            if (id === undefined) {
-                return false;
+    const scheduleVisibleChanges = useCallback(() => {
+        var _a;
+        return (_a = zen.requestAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(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 = useCallback(() => {
-        cancelAnimationFrame(lazyRenderTimerRef.current);
+        var _a;
+        (_a = zen.cancelAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen, lazyRenderTimerRef.current);
         lazyRenderTimerRef.current = scheduleVisibleChanges();
     }, [scheduleVisibleChanges]);
     const handleScroll = useCallback(() => {

package/esm/dataFeed/dataFeedCell/dataFeedCell.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { memo, useCallback, useEffect, useState } from "react";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { isPromiseLike } from "../../dataGrid/columns/basicColumn";
+import { zen } from "../../utils/zen";
 const FeedCell = ({ limited = false, visibleOnHover = false, isVisible, title, render, renderWrappers, renderPlaceholder, defaultValue, entity, isNested }) => {
     const [labelContent, setLabelContent] = useState("");
     const [content, setContent] = useState("");
@@ -26,26 +27,29 @@ const FeedCell = ({ limited = false, visibleOnHover = false, isVisible, title, r
         return [label, renderWrappers(postponedResult, entity)];
     }, [defaultValue, entity, render, renderWrappers, title, isNested]);
     useEffect(() => {
+        var _a;
         if (!isVisible) {
             setContent("");
             return () => { };
         }
-        const placeholderTimeout = requestAnimationFrame(() => {
+        const placeholderTimeout = (_a = zen.requestAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
             const [label, value] = placeholderRenderer();
             setLabelContent(label);
             setContent(value);
         });
         renderer().then(([label, value]) => {
-            cancelAnimationFrame(placeholderTimeout);
+            var _a;
+            (_a = zen.cancelAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen, placeholderTimeout);
             setLabelContent(label);
             setContent(value);
         }).catch((e) => {
+            var _a;
             console.error(e);
-            cancelAnimationFrame(placeholderTimeout);
+            (_a = zen.cancelAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen, placeholderTimeout);
             setLabelContent("");
             setContent("");
         });
-        return () => cancelAnimationFrame(placeholderTimeout);
+        return () => { var _a; return (_a = zen.cancelAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen, placeholderTimeout); };
     }, [isVisible, renderer, placeholderRenderer]);
     return _jsxs(_Fragment, { children: [labelContent ? _jsx("div", { className: "zen-feed-item__label", children: labelContent }) : null, content
                 ? _jsx("div", { className: classNames([

package/esm/dataFeed/dataFeedColumnsItems.js

@@ -32,7 +32,7 @@ const FeedItemInner = ({ columnsList, feedWrappers, expanded, collapsedColumnsQt
                 if (primaryActionsList && primaryActionsList.length > 0) {
                     primaryActionsContent = _jsx(_Fragment, { children: primaryActionsList.map((action) => _jsx(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/esm/dataGrid/cell/cell.js

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

package/esm/dataGrid/dataGrid.js

@@ -10,6 +10,7 @@ import { useResize } from "../commonHelpers/hooks/useResize";
 import { useResizeObserver } from "../commonHelpers/hooks/useResizeObserver";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { getRowClassName } from "./getRowClassName";
+import { zen } from "../utils/zen";
 injectString("cs", "Action", "Akce");
 injectString("da-DK", "Action", "Handling");
 injectString("de", "Action", "Aktion");
@@ -42,6 +43,11 @@ export const HORIZONTAL_SCROLL_MODIFIER = "zen-data-grid--horizontal-scroll";
 export const VERTICAL_SCROLL_MODIFIER = "zen-data-grid--vertical-scroll";
 export const 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, MIN_CELL_WIDTH));
 export const EmptyList = ({
   children
@@ -97,28 +103,32 @@ const DataGridInner = ({
     } = gridRef.current.getBoundingClientRect();
     return findVisibleRows([...bodyRef.current.children], top, bottom);
   };
-  const scheduleVisibleChanges = 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 = useCallback(() => {
+    var _a;
+    return (_a = zen.requestAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(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 = useCallback(() => {
-    cancelAnimationFrame(lazyRenderTimerRef.current);
+    var _a;
+    (_a = zen.cancelAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen, lazyRenderTimerRef.current);
     lazyRenderTimerRef.current = scheduleVisibleChanges();
   }, [scheduleVisibleChanges]);
   useEffect(() => {
@@ -181,6 +191,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 _jsx(DataGridHeaderCell, {
       id: column.id,
       isFirst: isFirst,
@@ -188,6 +199,7 @@ const DataGridInner = ({
       name: column.name,
       width: width,
       hidden: !text,
+      ariaSort: headerProps.ariaSort,
       children: _jsx("div", {
         className: "zen-data-grid__header-cell-content",
         children: renderHeaderWrappers(column.wrappers, _jsx("div", {

package/esm/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/esm/dataGrid/headerCell/headerCell.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from "react";
 import { classNames } from "../../commonHelpers/classNames/classNames";
-const HeaderCell = ({ id, name, isFirst, isLast, width, hidden, children }) => _jsx("th", { scope: "col", "data-column-id": id, "data-column-name": name, className: classNames([
+const HeaderCell = ({ id, name, isFirst, isLast, width, hidden, ariaSort, children }) => _jsx("th", { scope: "col", "data-column-id": id, "data-column-name": name, className: 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 });
 export const DataGridHeaderCell = memo(HeaderCell);

package/esm/dataGrid/listColumn.d.ts

@@ -41,10 +41,14 @@ export interface IListColumnStrict<T, N> {
     render: (entity: T | N, isNested?: boolean) => TRenderResult;
     renderFeed: (title: string, entity: T | N, isNested?: boolean) => TFeedResult;
 }
+export interface IHeaderCellProps {
+    ariaSort?: "ascending" | "descending" | "none";
+}
 interface IListColumnWrapperBasic<T, N> {
     renderHeader: (title: ReactNode) => ReactNode;
     render: (result: ReactNode, entity: T | N, isNested?: boolean) => ReactNode;
     name?: string;
+    getHeaderProps?: () => IHeaderCellProps;
 }
 export type IListColumnWrapper<T, N = T> = IListColumnWrapperBasic<T, N>;
 export {};

package/esm/dataGrid/withFlexibleColumns/flexibleColumnsReorder.js

@@ -1,19 +1,21 @@
 import { SimpleEventHandler } from "../../commonHelpers/simpleEventHandler";
 import { DRAGGING_MODIFIER, NOT_INTERACTIVE_MODIFIER } from "../dataGrid";
+import { zen } from "../../utils/zen";
 export class FlexibleColumnReorder extends SimpleEventHandler {
     createColumnToDrag() {
+        var _a, _b;
         if (this.dragElt === undefined) {
-            this.dragElt = document.createElement("table");
-            this.dragElt.classList.add("zen-table-column");
+            this.dragElt = (_a = zen.document) === null || _a === void 0 ? void 0 : _a.createElement("table");
+            (_b = this.dragElt) === null || _b === void 0 ? void 0 : _b.classList.add("zen-table-column");
         }
-        this.list.append(this.dragElt);
+        this.dragElt && this.list.append(this.dragElt);
         return this.dragElt;
     }
     cloneCell(columnCell) {
         let cell = columnCell;
         const cellPart = columnCell.querySelector("[data-column]");
-        if (cellPart !== null) {
-            cell = document.createElement("td");
+        if (cellPart !== null && zen.document) {
+            cell = zen.document.createElement("td");
             cell.classList.add("zen-data-grid__row-cell");
             cell.append(cellPart.cloneNode(true));
             return cell;
@@ -21,13 +23,17 @@ export class FlexibleColumnReorder extends SimpleEventHandler {
         return cell.cloneNode(true);
     }
     cloneCellContent(cell, parent) {
+        var _a;
         const clone = this.cloneCell(cell);
         // we should prevent id duplication
         const eltsWithIds = clone.querySelectorAll("[id]");
         eltsWithIds.forEach(elt => {
             elt.id = "";
         });
-        const p = document.createElement("tr");
+        const p = (_a = zen.document) === null || _a === void 0 ? void 0 : _a.createElement("tr");
+        if (!p) {
+            return;
+        }
         p.classList.add("zen-table-column__row");
         p.append(clone);
         parent.append(p);
@@ -178,14 +184,15 @@ export class FlexibleColumnReorder extends SimpleEventHandler {
             configurable: true,
             writable: true,
             value: () => {
+                var _a, _b, _c;
                 this.pageX = 0;
                 this.pageY = 0;
                 this.columnIndex = 0;
                 this.pointerOffset = 0;
                 this.closest = -1;
-                document.removeEventListener("pointermove", this.moveColumn);
-                document.removeEventListener("pointerup", this.endColumn);
-                document.removeEventListener("pointercancel", this.stopMoving);
+                (_a = zen.document) === null || _a === void 0 ? void 0 : _a.removeEventListener("pointermove", this.moveColumn);
+                (_b = zen.document) === null || _b === void 0 ? void 0 : _b.removeEventListener("pointerup", this.endColumn);
+                (_c = zen.document) === null || _c === void 0 ? void 0 : _c.removeEventListener("pointercancel", this.stopMoving);
                 this.list.classList.remove(NOT_INTERACTIVE_MODIFIER);
                 this.list.classList.remove(DRAGGING_MODIFIER);
                 if (this.dragElt === undefined) {
@@ -244,11 +251,13 @@ export class FlexibleColumnReorder extends SimpleEventHandler {
                     return undefined;
                 }
                 const dragElt = this.createColumnToDrag();
-                dragElt.style.left = `${this.offsetLeft}px`;
-                dragElt.style.top = `${this.offsetTop}px`;
-                dragElt.style.width = `${this.targetCellElt.offsetWidth}px`;
+                if (dragElt) {
+                    dragElt.style.left = `${this.offsetLeft}px`;
+                    dragElt.style.top = `${this.offsetTop}px`;
+                    dragElt.style.width = `${this.targetCellElt.offsetWidth}px`;
+                }
                 this.resizer.showResizerForColumn(this.closest - 1);
-                this.cloneCellContent(this.targetCellElt, dragElt);
+                dragElt && this.cloneCellContent(this.targetCellElt, dragElt);
                 this.list.classList.add(NOT_INTERACTIVE_MODIFIER);
                 this.list.classList.add(DRAGGING_MODIFIER);
                 const columns = ((_a = this.targetCellElt.parentElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll("th")) || [];
@@ -261,13 +270,13 @@ export class FlexibleColumnReorder extends SimpleEventHandler {
             configurable: true,
             writable: true,
             value: (e) => {
-                var _a;
+                var _a, _b, _c, _d, _e;
                 if (e.button !== 0) {
                     return;
                 }
                 this.pageX = e.pageX;
                 this.pageY = e.pageY;
-                (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
+                (_b = (_a = zen.getSelection) === null || _a === void 0 ? void 0 : _a.call(zen)) === null || _b === void 0 ? void 0 : _b.removeAllRanges();
                 const th = e.target.closest("th");
                 if (th === null) {
                     return;
@@ -277,9 +286,9 @@ export class FlexibleColumnReorder extends SimpleEventHandler {
                 this.offsetTop = th.offsetTop;
                 this.columnIndex = Math.max(th.cellIndex, 0);
                 this.pointerOffset = (e.offsetX || (th.clientWidth / 2));
-                document.addEventListener("pointermove", this.moveColumn);
-                document.addEventListener("pointerup", this.endColumn);
-                document.addEventListener("pointercancel", this.stopMoving);
+                (_c = zen.document) === null || _c === void 0 ? void 0 : _c.addEventListener("pointermove", this.moveColumn);
+                (_d = zen.document) === null || _d === void 0 ? void 0 : _d.addEventListener("pointerup", this.endColumn);
+                (_e = zen.document) === null || _e === void 0 ? void 0 : _e.addEventListener("pointercancel", this.stopMoving);
                 this.closest = this.columnIndex;
             }
         });

package/esm/dataGrid/withFlexibleColumns/flexibleColumnsResizer.js

@@ -1,11 +1,13 @@
 import { SimpleEventHandler } from "../../commonHelpers/simpleEventHandler";
 import { NOT_INTERACTIVE_MODIFIER } from "../dataGrid";
+import { zen } from "../../utils/zen";
 const MIN_COLUMN_WIDTH = 100;
 export class FlexibleColumnResizer extends SimpleEventHandler {
     createResizer() {
+        var _a;
         if (this.resizer === undefined) {
-            const resizer = document.createElement("DIV");
-            resizer.classList.add("zen-resizer", "zen-resizer--active", "zen-resizer--vertical");
+            const resizer = (_a = zen.document) === null || _a === void 0 ? void 0 : _a.createElement("DIV");
+            resizer === null || resizer === void 0 ? void 0 : resizer.classList.add("zen-resizer", "zen-resizer--active", "zen-resizer--vertical");
             this.resizer = resizer;
         }
         this.listRef.append(this.resizer);
@@ -75,12 +77,13 @@ export class FlexibleColumnResizer extends SimpleEventHandler {
             configurable: true,
             writable: true,
             value: () => {
+                var _a, _b, _c;
                 this.pageX = 0;
                 this.currentWidth = 0;
                 this.columnIndex = 0;
-                document.removeEventListener("pointermove", this.resizeColumn);
-                document.removeEventListener("pointerup", this.endColumn);
-                document.removeEventListener("pointercancel", this.stopResizing);
+                (_a = zen.document) === null || _a === void 0 ? void 0 : _a.removeEventListener("pointermove", this.resizeColumn);
+                (_b = zen.document) === null || _b === void 0 ? void 0 : _b.removeEventListener("pointerup", this.endColumn);
+                (_c = zen.document) === null || _c === void 0 ? void 0 : _c.removeEventListener("pointercancel", this.stopResizing);
                 this.listRef.classList.remove(NOT_INTERACTIVE_MODIFIER);
                 this.hideResizer();
             }
@@ -114,7 +117,7 @@ export class FlexibleColumnResizer extends SimpleEventHandler {
             configurable: true,
             writable: true,
             value: (e) => {
-                var _a;
+                var _a, _b, _c, _d;
                 if (e.button !== 0) {
                     return;
                 }
@@ -132,12 +135,15 @@ export class FlexibleColumnResizer extends SimpleEventHandler {
                     return;
                 }
                 this.currentWidth = headerEl.offsetWidth || 0;
-                document.addEventListener("pointermove", this.resizeColumn);
-                document.addEventListener("pointerup", this.endColumn);
-                document.addEventListener("pointercancel", this.stopResizing);
+                (_b = zen.document) === null || _b === void 0 ? void 0 : _b.addEventListener("pointermove", this.resizeColumn);
+                (_c = zen.document) === null || _c === void 0 ? void 0 : _c.addEventListener("pointerup", this.endColumn);
+                (_d = zen.document) === null || _d === void 0 ? void 0 : _d.addEventListener("pointercancel", this.stopResizing);
                 this.listRef.classList.add(NOT_INTERACTIVE_MODIFIER);
                 const scrollTop = this.listRef.scrollTop;
                 const resizer = this.createResizer();
+                if (resizer === undefined) {
+                    return;
+                }
                 resizer.style.left = `${this.offsetLeft}px`;
                 resizer.style.top = `${scrollTop}px`;
                 resizer.style.height = `${height}px`;
@@ -154,6 +160,9 @@ export class FlexibleColumnResizer extends SimpleEventHandler {
         const height = this.listRef.clientHeight;
         const scrollTop = this.listRef.scrollTop;
         const resizer = this.createResizer();
+        if (resizer === undefined) {
+            return;
+        }
         resizer.style.left = `${this.offsetLeft}px`;
         resizer.style.top = `${scrollTop}px`;
         resizer.style.height = `${height}px`;

package/esm/dataGrid/withFlexibleColumns/withFlexibleColumns.js

@@ -10,6 +10,7 @@ import { FlexibleColumnWrapper } from "./columns/flexibleColumnWrapper";
 import { ColumnSettings } from "./components/columnSettings";
 import { ColumnSettingsList } from "./components/columnSettingsList";
 import { ColumnSettingsSidePanel } from "./components/columnSettingsSidePanel";
+import { zen } from "../../utils/zen";
 // T - type of entity
 // P - props of wrapped component
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -45,7 +46,8 @@ export const withFlexibleColumns = (DataGridComponent) => {
         const saveSettingsToTheStore = useCallback((newSettings) => 
         // not to block main thread this operation can be postponed
         new Promise((resolve, reject) => {
-            setTimeout(() => {
+            var _a;
+            (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
                 try {
                     settingsStore.setItem(newSettings);
                     resolve();