@geotab/zenith 3.5.0 → 3.6.0-beta.1

package/dist/list/hooks/useContainerScroll.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useContainerScroll = void 0;
 const react_1 = require("react");
+const zen_1 = require("../../utils/zen");
 const useContainerScroll = () => {
     const scrollTimeoutRef = (0, react_1.useRef)(null);
     const moveScrollFunc = (container, dndElement) => {
@@ -17,19 +18,21 @@ const useContainerScroll = () => {
         }
     };
     const moveScroll = (0, react_1.useCallback)((container, dndElement, callback) => {
+        var _a;
         if (scrollTimeoutRef.current) {
             return;
         }
         moveScrollFunc(container, dndElement);
         callback();
-        scrollTimeoutRef.current = setTimeout(() => {
+        scrollTimeoutRef.current = (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
             scrollTimeoutRef.current = null;
             moveScroll(container, dndElement, callback);
         }, 50);
     }, [scrollTimeoutRef]);
     const cancelMoveScroll = (0, react_1.useCallback)(() => {
+        var _a;
         if (scrollTimeoutRef.current) {
-            clearTimeout(scrollTimeoutRef.current);
+            (_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, scrollTimeoutRef.current);
             scrollTimeoutRef.current = null;
         }
     }, [scrollTimeoutRef]);

package/dist/list/hooks/useDragAndDrop.d.ts

@@ -1,4 +1,22 @@
 import { RefObject } from "react";
-export declare const useDragAndDrop: (containerRef: RefObject<HTMLElement | null>, onChangeOrder: (startPosition: number, endPosition: number) => void) => {
+interface IMarkerClasses {
+    general: string;
+    placeholder: string;
+    dragging: string;
+    dragged?: string;
+}
+/**
+ * A custom React hook that provides drag-and-drop functionality for reorderable list items.
+ * @param containerRef - A React ref pointing to the container element that holds the draggable items
+ * @param onChangeOrder - Callback function invoked when an item is dropped at a new position.
+ *                        Receives the start position and end position of the dragged item
+ * @param marksClassNames - Optional custom CSS class names for marking different states of list items.
+ *                          If not provided, defaults to 'zen-list-item' based classes
+ * @param onBeforeDragOver - Optional callback function called before placing the placeholder at a new position.
+ *                       Receives the target position and should return false to prevent the drag operation.
+ * @returns An object containing the `onDragStart` event handler to be attached to draggable elements
+ */
+export declare const useDragAndDrop: (containerRef: RefObject<HTMLElement | null>, onChangeOrder: (startPosition: number, endPosition: number) => void, marksClassNames?: IMarkerClasses, onBeforeDragOver?: (endPosition: number) => boolean) => {
     onDragStart: (e: React.PointerEvent<HTMLElement>) => void;
 };
+export {};

package/dist/list/hooks/useDragAndDrop.js

@@ -3,33 +3,60 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDragAndDrop = void 0;
 const react_1 = require("react");
 const getScrollableParent_1 = require("../../utils/getScrollableParent");
-const findListElement_1 = require("../utils/findListElement");
+const findElement_1 = require("../utils/findElement");
 const useContainerScroll_1 = require("./useContainerScroll");
 const findItemPosition_1 = require("../utils/findItemPosition");
-const useDragAndDrop = (containerRef, onChangeOrder) => {
+const isDragNotClick_1 = require("../utils/isDragNotClick");
+const zen_1 = require("../../utils/zen");
+/**
+ * A custom React hook that provides drag-and-drop functionality for reorderable list items.
+ * @param containerRef - A React ref pointing to the container element that holds the draggable items
+ * @param onChangeOrder - Callback function invoked when an item is dropped at a new position.
+ *                        Receives the start position and end position of the dragged item
+ * @param marksClassNames - Optional custom CSS class names for marking different states of list items.
+ *                          If not provided, defaults to 'zen-list-item' based classes
+ * @param onBeforeDragOver - Optional callback function called before placing the placeholder at a new position.
+ *                       Receives the target position and should return false to prevent the drag operation.
+ * @returns An object containing the `onDragStart` event handler to be attached to draggable elements
+ */
+const useDragAndDrop = (containerRef, onChangeOrder, marksClassNames, onBeforeDragOver) => {
     const dragImageRef = (0, react_1.useRef)(null);
     const dragMoveRef = (0, react_1.useRef)(undefined);
     const { moveScroll, cancelMoveScroll } = (0, useContainerScroll_1.useContainerScroll)();
+    const cssMarks = marksClassNames
+        ? marksClassNames
+        : {
+            general: "zen-list-item",
+            placeholder: "zen-list-item--placeholder",
+            dragging: "zen-list-item--dragging"
+        };
     const getPlaceholder = (0, react_1.useCallback)((height) => {
-        const placeholder = document.createElement("li");
-        placeholder.className = "zen-list-item zen-list-item--placeholder";
+        var _a;
+        const placeholder = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.createElement("li");
+        if (!placeholder) {
+            return undefined;
+        }
+        placeholder.className = `${cssMarks.general} ${cssMarks.placeholder}`;
         placeholder.style.height = height + "px";
         return placeholder;
-    }, []);
+    }, [cssMarks.general, cssMarks.placeholder]);
     const removePlaceholders = (0, react_1.useCallback)((element) => {
-        const placeholders = element.querySelectorAll(".zen-list-item--placeholder");
+        const placeholders = element.querySelectorAll(`.${cssMarks.placeholder}`);
         for (const placeholder of placeholders) {
             placeholder.remove();
         }
-    }, []);
+    }, [cssMarks.placeholder]);
     const setPlaceholder = (0, react_1.useCallback)((element) => {
         if (!containerRef.current) {
             return;
         }
-        const items = containerRef.current.querySelectorAll(".zen-list-item");
+        const items = containerRef.current.querySelectorAll(`.${cssMarks.general}`);
         const rect = element.getBoundingClientRect();
         const listRect = containerRef.current.getBoundingClientRect();
         if (rect.top < listRect.top) {
+            if (onBeforeDragOver && !onBeforeDragOver(0)) {
+                return;
+            }
             // If the dragged element is above the list, insert placeholder at the top
             const placeholder = getPlaceholder(rect.height);
             removePlaceholders(containerRef.current);
@@ -43,18 +70,25 @@ const useDragAndDrop = (containerRef, onChangeOrder) => {
             return;
         }
         if (rect.top > listRect.bottom) {
+            if (onBeforeDragOver && !onBeforeDragOver(items.length)) {
+                return;
+            }
             const placeholder = getPlaceholder(rect.height);
             removePlaceholders(containerRef.current);
             containerRef.current.appendChild(placeholder);
             return;
         }
         const dragItemTopOffset = 4;
-        for (const item of items) {
-            if (item.classList.contains("zen-list-item--placeholder") || item.classList.contains("zen-list-item--dragging")) {
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            if (item.classList.contains(cssMarks.placeholder) || item.classList.contains(cssMarks.dragging)) {
                 continue;
             }
             const itemRect = item.getBoundingClientRect();
             if (item !== element && rect.top > itemRect.top + dragItemTopOffset && rect.top <= itemRect.bottom) {
+                if (onBeforeDragOver && !onBeforeDragOver(i + 1)) {
+                    return;
+                }
                 const placeholder = getPlaceholder(rect.height);
                 removePlaceholders(containerRef.current);
                 const next = item.nextSibling;
@@ -67,49 +101,63 @@ const useDragAndDrop = (containerRef, onChangeOrder) => {
                 return;
             }
         }
-    }, [containerRef, getPlaceholder, removePlaceholders]);
+    }, [containerRef, getPlaceholder, removePlaceholders, onBeforeDragOver, cssMarks.general, cssMarks.placeholder, cssMarks.dragging]);
     const onDragStart = (0, react_1.useCallback)((e) => {
-        const listItemElement = (0, findListElement_1.findListElement)(e.currentTarget);
+        var _a, _b, _c, _d;
+        e.preventDefault();
+        const listItemElement = (0, findElement_1.findElement)(e.currentTarget, cssMarks.general);
         if (!listItemElement) {
             return;
         }
-        const startPosition = (0, findItemPosition_1.findItemPosition)(listItemElement);
+        const startPosition = (0, findItemPosition_1.findItemPosition)(listItemElement, cssMarks.dragging);
         const rect = listItemElement.getBoundingClientRect();
         const offset = {
             x: e.clientX - rect.left,
             y: e.clientY - rect.top
         };
+        const initialCoords = { x: e.clientX, y: e.clientY };
         const div = listItemElement.cloneNode(true);
-        document.body.appendChild(div);
+        if (cssMarks.dragged) {
+            div.classList.add(cssMarks.dragged);
+        }
+        (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.body.appendChild(div);
         dragImageRef.current = div;
         div.style.position = "absolute";
         div.style.left = (e.clientX - offset.x) + "px";
         div.style.top = (e.clientY - offset.y) + "px";
         div.style.width = listItemElement.offsetWidth + "px";
         div.style.height = listItemElement.offsetHeight + "px";
+        let isDragStarted = false;
         dragMoveRef.current = (moveEvent) => {
             if (!dragImageRef.current) {
                 return;
             }
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            const pageScroll = window ? window.scrollY : 0;
-            dragImageRef.current.style.left = (moveEvent.clientX - offset.x) + "px";
-            dragImageRef.current.style.top = (pageScroll + moveEvent.clientY - offset.y) + "px";
-            setPlaceholder(dragImageRef.current);
-            moveEvent.preventDefault();
+            if (isDragStarted || (0, isDragNotClick_1.isDragNotClick)(initialCoords, { x: moveEvent.clientX, y: moveEvent.clientY })) {
+                if (!isDragStarted) {
+                    isDragStarted = true;
+                    listItemElement.classList.add(cssMarks.dragging);
+                    const scrollableParent = (0, getScrollableParent_1.getScrollableParent)(containerRef.current);
+                    moveScroll((scrollableParent || containerRef.current), dragImageRef.current, () => setPlaceholder(dragImageRef.current));
+                }
+                const pageScroll = zen_1.zen.window ? zen_1.zen.window.scrollY : 0;
+                dragImageRef.current.style.left = (moveEvent.clientX - offset.x) + "px";
+                dragImageRef.current.style.top = (pageScroll + moveEvent.clientY - offset.y) + "px";
+                setPlaceholder(dragImageRef.current);
+                moveEvent.preventDefault();
+            }
         };
         const onDragEnd = () => {
-            var _a;
+            var _a, _b, _c, _d;
             if (dragImageRef.current) {
                 dragImageRef.current.remove();
                 dragImageRef.current = null;
             }
             if (dragMoveRef.current) {
-                document.body.removeEventListener("pointermove", dragMoveRef.current, false);
+                (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.body.removeEventListener("pointermove", dragMoveRef.current, false);
             }
-            const placeholderElement = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".zen-list-item--placeholder");
-            const endPosition = placeholderElement ? (0, findItemPosition_1.findItemPosition)(placeholderElement) : null;
-            listItemElement.classList.remove("zen-list-item--dragging");
+            const placeholderElement = (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.querySelector(`.${cssMarks.placeholder}`);
+            const endPosition = placeholderElement ? (0, findItemPosition_1.findItemPosition)(placeholderElement, cssMarks.dragging) : null;
+            listItemElement.classList.remove(cssMarks.dragging);
             if (containerRef.current) {
                 removePlaceholders(containerRef.current);
             }
@@ -118,17 +166,13 @@ const useDragAndDrop = (containerRef, onChangeOrder) => {
             if (endPosition !== null && startPosition !== endPosition) {
                 onChangeOrder(startPosition, endPosition);
             }
-            document.body.removeEventListener("pointerup", onDragEnd, false);
-            document.removeEventListener("mouseleave", onDragEnd);
+            (_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body.removeEventListener("pointerup", onDragEnd, false);
+            (_d = zen_1.zen.document) === null || _d === void 0 ? void 0 : _d.removeEventListener("mouseleave", onDragEnd);
         };
-        document.body.addEventListener("pointermove", dragMoveRef.current, false);
-        document.body.addEventListener("pointerup", onDragEnd, false);
-        document.addEventListener("mouseleave", onDragEnd);
-        listItemElement.classList.add("zen-list-item--dragging");
-        setPlaceholder(dragImageRef.current);
-        const scrollableParent = (0, getScrollableParent_1.getScrollableParent)(containerRef.current);
-        moveScroll((scrollableParent || containerRef.current), dragImageRef.current, () => setPlaceholder(dragImageRef.current));
-    }, [cancelMoveScroll, containerRef, moveScroll, onChangeOrder, removePlaceholders, setPlaceholder]);
+        (_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body.addEventListener("pointermove", dragMoveRef.current, false);
+        (_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body.addEventListener("pointerup", onDragEnd, false);
+        (_d = zen_1.zen.document) === null || _d === void 0 ? void 0 : _d.addEventListener("mouseleave", onDragEnd);
+    }, [cancelMoveScroll, containerRef, moveScroll, onChangeOrder, removePlaceholders, setPlaceholder, cssMarks.general, cssMarks.placeholder, cssMarks.dragging, cssMarks.dragged]);
     return { onDragStart };
 };
 exports.useDragAndDrop = useDragAndDrop;

package/dist/list/hooks/useVirtualScroll.js

@@ -4,6 +4,7 @@ exports.useVirtualScroll = void 0;
 const react_1 = require("react");
 const getScrollableParent_1 = require("../../utils/getScrollableParent");
 const findVisibleListItems_1 = require("../utils/findVisibleListItems");
+const zen_1 = require("../../utils/zen");
 const FIRST_RENDERED_ROWS = 100;
 const useVirtualScroll = (ref, children) => {
     const isEnabled = (0, react_1.useMemo)(() => {
@@ -57,25 +58,29 @@ const useVirtualScroll = (ref, children) => {
         const { top, bottom } = scrollableParent.getBoundingClientRect();
         return (0, findVisibleListItems_1.findVisibleListItems)([...ref.current.children], top, bottom);
     }, [ref, scrollableParent]);
-    const scheduleVisibleChanges = (0, react_1.useCallback)(() => requestAnimationFrame(() => {
-        const visible = getVisibleRows();
-        const newVisibleRows = visible.filter(row => {
-            const id = row.dataset.listItemId;
-            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 = getVisibleRows();
+            const newVisibleRows = visible.filter(row => {
+                const id = row.dataset.listItemId;
+                if (id === undefined) {
+                    return false;
+                }
+                return true;
+            }).map(row => row.dataset.listItemId);
+            const hasNewRows = newVisibleRows.some(id => !visibleRows.has(id));
+            if (hasNewRows) {
+                const newRowsSet = new Set(newVisibleRows);
+                initialVisibleRows.forEach(row => newRowsSet.add(row));
+                setVisibleRows(newRowsSet);
             }
-            return true;
-        }).map(row => row.dataset.listItemId);
-        const hasNewRows = newVisibleRows.some(id => !visibleRows.has(id));
-        if (hasNewRows) {
-            const newRowsSet = new Set(newVisibleRows);
-            initialVisibleRows.forEach(row => newRowsSet.add(row));
-            setVisibleRows(newRowsSet);
-        }
-    }), [getVisibleRows, initialVisibleRows, visibleRows]);
+        });
+    }, [getVisibleRows, initialVisibleRows, visibleRows]);
     const lazyRenderTimerRef = (0, react_1.useRef)(0);
     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/list/itemData/itemDataInternal.js

@@ -18,6 +18,7 @@ const iconDotVertical_1 = require("../../icons/iconDotVertical");
 const menu_1 = require("../../menu/menu");
 const isActiveElement_1 = require("../utils/isActiveElement");
 const checkbox_1 = require("../../checkbox/checkbox");
+const useMobileClassName_1 = require("../../utils/theme/useMobileClassName");
 injectString("cs", "More", "V\xEDce");
 injectString("da-DK", "More", "Mere");
 injectString("de", "More", "Mehr");
@@ -93,6 +94,7 @@ const ItemDataInternalInner = ({
     translate
   } = (0, useLanguage_1.useLanguage)();
   const driveClassName = (0, react_1.useMemo)(() => isDrive ? isMobile ? "zen-item-data-drive" : "zen-item-data-drive-tablet" : "", [isDrive, isMobile]);
+  const mobileClassName = (0, useMobileClassName_1.useMobileClassName)("zen-item-data");
   const aceClassName = (0, react_1.useMemo)(() => isTall ? "zen-item-data--tall" : "", [isTall]);
   const renderActions = (0, react_1.useCallback)(() => {
     if (!actions || actions.length === 0) {
@@ -107,7 +109,7 @@ const ItemDataInternalInner = ({
         "aria-label": translate("More"),
         title: translate("More"),
         children: (0, jsx_runtime_1.jsx)(iconDotVertical_1.IconDotVertical, {
-          size: "large"
+          size: isMobile ? "huge" : "large"
         })
       }),
       children: actions.map(action => (0, jsx_runtime_1.jsx)(menu_1.Menu.Item, {
@@ -117,7 +119,7 @@ const ItemDataInternalInner = ({
         link: !(0, interfaces_1.isButtonAction)(action) ? action.link : undefined
       }, action.name))
     });
-  }, [actions, translate]);
+  }, [actions, isMobile, translate]);
   const renderIcon = (0, react_1.useCallback)((iconComponent, iClassName, className) => {
     if (typeof iconComponent === "function") {
       return (0, react_1.createElement)(iconComponent, {
@@ -151,7 +153,7 @@ const ItemDataInternalInner = ({
       height: `${plHeight + 12 * 2 + 1}px`
     };
   }, [data, icon, secondary]);
-  const classNamesList = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-item-data", driveClassName || "", aceClassName]), [driveClassName, aceClassName]);
+  const classNamesList = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-item-data", driveClassName || "", mobileClassName || "", aceClassName]), [driveClassName, mobileClassName, aceClassName]);
   if (!visible) {
     return (0, jsx_runtime_1.jsx)("li", {
       style: placeholderHeight,
@@ -160,7 +162,7 @@ const ItemDataInternalInner = ({
     }, id);
   }
   return (0, jsx_runtime_1.jsxs)("li", {
-    className: (0, classNames_1.classNames)(["zen-item-data", driveClassName || "", aceClassName]),
+    className: (0, classNames_1.classNames)(["zen-item-data", driveClassName || "", mobileClassName || "", aceClassName]),
     "data-list-item-id": id,
     onClick: handleClick,
     children: [(0, jsx_runtime_1.jsxs)("div", {

package/dist/list/listItem/listItem.js

@@ -73,6 +73,7 @@ const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const useIconSize_1 = require("../../utils/theme/useIconSize");
 const iconChevronRight_1 = require("../../icons/iconChevronRight");
 const isActiveElement_1 = require("../utils/isActiveElement");
+const useMobileClassName_1 = require("../../utils/theme/useMobileClassName");
 const ListItem = ({
   id,
   className,
@@ -88,6 +89,7 @@ const ListItem = ({
 }) => {
   const isMobile = (0, useMobile_1.useMobile)();
   const driveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-list-item");
+  const mobileClassName = (0, useMobileClassName_1.useMobileClassName)("zen-list-item");
   const iconSize = (0, useIconSize_1.useIconSize)();
   const {
     translate
@@ -131,7 +133,7 @@ const ListItem = ({
         type: "tertiary-black",
         className: "zen-list-item__more-button",
         children: (0, jsx_runtime_1.jsx)(iconDotVertical_1.IconDotVertical, {
-          size: "large"
+          size: isMobile ? "huge" : "large"
         })
       }),
       children: secondaryActions.map(action => (0, jsx_runtime_1.jsx)(menu_1.Menu.Item, {
@@ -174,7 +176,7 @@ const ListItem = ({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return (0, jsx_runtime_1.jsxs)("li", {
     id: id,
-    className: (0, classNames_1.classNames)(["zen-list-item", driveClassName || "", clickableClassName, className || ""]),
+    className: (0, classNames_1.classNames)(["zen-list-item", mobileClassName || driveClassName || "", clickableClassName, className || ""]),
     onClick: handleClick,
     ref: itemRef,
     children: [onDragStart ? (0, jsx_runtime_1.jsx)("div", {
@@ -206,7 +208,7 @@ const ListItem = ({
       target: target,
       title: translate("View details"),
       children: (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, {
-        size: "large",
+        size: isMobile ? "huge" : "large",
         className: "zen-list-item__click-icon"
       })
     }) : null]

package/dist/list/utils/findElement.d.ts

@@ -0,0 +1 @@
+export declare const findElement: (element: HTMLElement, className: string) => HTMLElement | null;

package/dist/list/utils/findElement.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findElement = void 0;
+const findElement = (element, className) => {
+    if (element.classList.contains(className)) {
+        return element;
+    }
+    if (element.parentElement) {
+        return (0, exports.findElement)(element.parentElement, className);
+    }
+    return null;
+};
+exports.findElement = findElement;

package/dist/list/utils/findItemPosition.d.ts

@@ -1 +1 @@
-export declare const findItemPosition: (element: HTMLElement) => number;
+export declare const findItemPosition: (element: HTMLElement, draggingClass?: string) => number;

package/dist/list/utils/findItemPosition.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.findItemPosition = void 0;
-const findItemPosition = (element) => {
+const findItemPosition = (element, draggingClass = "zen-list-item--dragging") => {
     const parent = element.parentElement;
     if (!parent) {
         return -1;
@@ -9,7 +9,7 @@ const findItemPosition = (element) => {
     let ignoreOriginalElement = false;
     for (let i = 0; i < parent.children.length; i++) {
         const currentChild = parent.children[i];
-        ignoreOriginalElement = ignoreOriginalElement || currentChild.classList.contains("zen-list-item--dragging");
+        ignoreOriginalElement = ignoreOriginalElement || currentChild.classList.contains(draggingClass);
         if (currentChild === element) {
             return i - (ignoreOriginalElement ? 1 : 0);
         }

package/dist/list/utils/isDragNotClick.d.ts

@@ -0,0 +1,6 @@
+interface ICoord {
+    x: number;
+    y: number;
+}
+export declare const isDragNotClick: (initialCoords: ICoord, currentCoords: ICoord, threshold?: number) => boolean;
+export {};

package/dist/list/utils/isDragNotClick.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isDragNotClick = void 0;
+const isDragNotClick = (initialCoords, currentCoords, threshold = 5) => {
+    const xShift = initialCoords.x - currentCoords.x;
+    const yShift = initialCoords.y - currentCoords.y;
+    return Math.sqrt(xShift * xShift + yShift * yShift) > threshold;
+};
+exports.isDragNotClick = isDragNotClick;

package/dist/menu/controlledMenu.js

@@ -151,7 +151,7 @@ const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ar
     if (isMobile) {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(pathProvider_1.PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, children: (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { label: title, isOpen: isOpen, triggerRef: triggerRef, onHidePanel: hideMenu, onCloseClick: hideMenu, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: title }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: renderMenuList() })] }) }) });
     }
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(pathProvider_1.PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, children: (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { id: id, useTrapFocusWithTrigger: "on", className: (0, classNames_1.classNames)(["zen-controlled-menu", className]), onOpenChange: memoizedOnChange, isOpen: isOpen, triggerRef: triggerRef, paddingX: paddingX, paddingY: paddingY, alignment: alignment, ariaLabelledby: ariaLabelledby, ariaLabel: ariaLabel, recalculateOnScroll: true, children: renderMenuList() }) }) });
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(pathProvider_1.PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, children: (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { id: id, useTrapFocusWithTrigger: "on", className: (0, classNames_1.classNames)(["zen-controlled-menu", className]), onOpenChange: memoizedOnChange, isOpen: isOpen, triggerRef: triggerRef, paddingX: paddingX, paddingY: paddingY, alignment: alignment, ariaLabelledby: ariaLabelledby, ariaLabel: ariaLabel || title, recalculateOnScroll: true, children: renderMenuList() }) }) });
 };
 exports.ControlledMenu = ControlledMenu;
 exports.ControlledMenu.Item = menuItem_1.MenuItem;

package/dist/mobileSheet/mobileSheet.js

@@ -72,11 +72,12 @@ injectString("ro-RO", "Close", "\xCEnchide\u021Bi");
 const iconBackArrow_1 = require("../icons/deprecated/iconBackArrow");
 const iconClose_1 = require("../icons/iconClose");
 const focusableSelector_1 = require("../utils/focusableSelector");
-const useDrive_1 = require("../utils/theme/useDrive");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const useUniqueId_1 = require("../commonHelpers/useUniqueId");
 const useFadeComponent_1 = require("../utils/useFadeComponent");
+const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
+const zen_1 = require("../utils/zen");
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const MobileSheet = ({
   triggerRef,
@@ -110,7 +111,6 @@ const MobileSheet = ({
     translate
   } = (0, useLanguage_1.useLanguage)();
   const ref = (0, react_1.useRef)(null);
-  const isDrive = (0, useDrive_1.useDrive)();
   const driveWrapperMobileSheetClassName = (0, useDriveClassName_1.useDriveClassName)("zen-mobile-sheet-wrapper");
   const driveTitleClassName = (0, useDriveClassName_1.useDriveClassName)("zen-mobile-sheet__title");
   const driveFooterClassName = (0, useDriveClassName_1.useDriveClassName)("zen-mobile-sheet__footer");
@@ -140,19 +140,23 @@ const MobileSheet = ({
       return;
     }
   }, [onHidePanel, dataShieldId]);
+  const isClientReady = (0, useClientReady_1.useClientReady)();
   (0, react_1.useEffect)(() => {
     setIsOpen(isOpen);
   }, [isOpen, setIsOpen]);
   (0, react_1.useEffect)(() => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
+    if (!isClientReady) {
+      return;
+    }
     if (useTrapFocusWithTrigger) {
       return;
     }
-    if ((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(".zen-mobile-sheet")) {
+    if ((_b = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.activeElement) === null || _b === void 0 ? void 0 : _b.closest(".zen-mobile-sheet")) {
       return;
     }
-    showContent && !preventFirstFocus && ((_c = (_b = ref.current) === null || _b === void 0 ? void 0 : _b.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR)) === null || _c === void 0 ? void 0 : _c.focus());
-  }, [content, showContent, readyForFocus, useTrapFocusWithTrigger, preventFirstFocus]);
+    showContent && !preventFirstFocus && ((_d = (_c = ref.current) === null || _c === void 0 ? void 0 : _c.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR)) === null || _d === void 0 ? void 0 : _d.focus());
+  }, [content, showContent, readyForFocus, useTrapFocusWithTrigger, preventFirstFocus, isClientReady]);
   (0, react_1.useEffect)(() => {
     var _a;
     if (triggerRef && !renderComponent && !readyForFocus && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute("aria-expanded")) === "true") {
@@ -160,6 +164,9 @@ const MobileSheet = ({
       triggerRef.current.focus();
     }
   }, [triggerRef, renderComponent, readyForFocus]);
+  if (!isClientReady) {
+    return null;
+  }
   if (!renderComponent && !isOpen) {
     return null;
   }
@@ -202,7 +209,7 @@ const MobileSheet = ({
           }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
             onClick: onCloseClick,
             "aria-label": translate("Close"),
-            iconSize: isDrive ? "huge" : "large",
+            iconSize: "huge",
             type: buttonType_1.ButtonType.TertiaryBlack,
             iconPosition: textIconButton_1.ButtonIconPosition.Start,
             className: "zen-mobile-sheet__close-button",