@geotab/zenith 3.5.0 → 3.6.0-beta.1

package/esm/list/hooks/useDragAndDrop.js

@@ -1,32 +1,59 @@
 import { useCallback, useRef } from "react";
 import { getScrollableParent } from "../../utils/getScrollableParent";
-import { findListElement } from "../utils/findListElement";
+import { findElement } from "../utils/findElement";
 import { useContainerScroll } from "./useContainerScroll";
 import { findItemPosition } from "../utils/findItemPosition";
-export const useDragAndDrop = (containerRef, onChangeOrder) => {
+import { isDragNotClick } from "../utils/isDragNotClick";
+import { zen } from "../../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
+ */
+export const useDragAndDrop = (containerRef, onChangeOrder, marksClassNames, onBeforeDragOver) => {
     const dragImageRef = useRef(null);
     const dragMoveRef = useRef(undefined);
     const { moveScroll, cancelMoveScroll } = useContainerScroll();
+    const cssMarks = marksClassNames
+        ? marksClassNames
+        : {
+            general: "zen-list-item",
+            placeholder: "zen-list-item--placeholder",
+            dragging: "zen-list-item--dragging"
+        };
     const getPlaceholder = useCallback((height) => {
-        const placeholder = document.createElement("li");
-        placeholder.className = "zen-list-item zen-list-item--placeholder";
+        var _a;
+        const placeholder = (_a = 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 = 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 = 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);
@@ -40,18 +67,25 @@ export 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;
@@ -64,49 +98,63 @@ export const useDragAndDrop = (containerRef, onChangeOrder) => {
                 return;
             }
         }
-    }, [containerRef, getPlaceholder, removePlaceholders]);
+    }, [containerRef, getPlaceholder, removePlaceholders, onBeforeDragOver, cssMarks.general, cssMarks.placeholder, cssMarks.dragging]);
     const onDragStart = useCallback((e) => {
-        const listItemElement = findListElement(e.currentTarget);
+        var _a, _b, _c, _d;
+        e.preventDefault();
+        const listItemElement = findElement(e.currentTarget, cssMarks.general);
         if (!listItemElement) {
             return;
         }
-        const startPosition = findItemPosition(listItemElement);
+        const startPosition = 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.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 || isDragNotClick(initialCoords, { x: moveEvent.clientX, y: moveEvent.clientY })) {
+                if (!isDragStarted) {
+                    isDragStarted = true;
+                    listItemElement.classList.add(cssMarks.dragging);
+                    const scrollableParent = getScrollableParent(containerRef.current);
+                    moveScroll((scrollableParent || containerRef.current), dragImageRef.current, () => setPlaceholder(dragImageRef.current));
+                }
+                const pageScroll = zen.window ? 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.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 ? 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 ? findItemPosition(placeholderElement, cssMarks.dragging) : null;
+            listItemElement.classList.remove(cssMarks.dragging);
             if (containerRef.current) {
                 removePlaceholders(containerRef.current);
             }
@@ -115,16 +163,12 @@ export const useDragAndDrop = (containerRef, onChangeOrder) => {
             if (endPosition !== null && startPosition !== endPosition) {
                 onChangeOrder(startPosition, endPosition);
             }
-            document.body.removeEventListener("pointerup", onDragEnd, false);
-            document.removeEventListener("mouseleave", onDragEnd);
+            (_c = zen.document) === null || _c === void 0 ? void 0 : _c.body.removeEventListener("pointerup", onDragEnd, false);
+            (_d = 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 = getScrollableParent(containerRef.current);
-        moveScroll((scrollableParent || containerRef.current), dragImageRef.current, () => setPlaceholder(dragImageRef.current));
-    }, [cancelMoveScroll, containerRef, moveScroll, onChangeOrder, removePlaceholders, setPlaceholder]);
+        (_b = zen.document) === null || _b === void 0 ? void 0 : _b.body.addEventListener("pointermove", dragMoveRef.current, false);
+        (_c = zen.document) === null || _c === void 0 ? void 0 : _c.body.addEventListener("pointerup", onDragEnd, false);
+        (_d = 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 };
 };

package/esm/list/hooks/useVirtualScroll.js

@@ -1,6 +1,7 @@
 import { useState, useCallback, useRef, useEffect, useMemo } from "react";
 import { getScrollableParent } from "../../utils/getScrollableParent";
 import { findVisibleListItems } from "../utils/findVisibleListItems";
+import { zen } from "../../utils/zen";
 const FIRST_RENDERED_ROWS = 100;
 export const useVirtualScroll = (ref, children) => {
     const isEnabled = useMemo(() => {
@@ -54,25 +55,29 @@ export const useVirtualScroll = (ref, children) => {
         const { top, bottom } = scrollableParent.getBoundingClientRect();
         return findVisibleListItems([...ref.current.children], top, bottom);
     }, [ref, scrollableParent]);
-    const scheduleVisibleChanges = useCallback(() => requestAnimationFrame(() => {
-        const visible = getVisibleRows();
-        const newVisibleRows = visible.filter(row => {
-            const id = row.dataset.listItemId;
-            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 = 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 = useRef(0);
     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/list/itemData/itemDataInternal.js

@@ -10,6 +10,7 @@ import { IconDotVertical } from "../../icons/iconDotVertical";
 import { Menu } from "../../menu/menu";
 import { isActiveElement } from "../utils/isActiveElement";
 import { Checkbox } from "../../checkbox/checkbox";
+import { useMobileClassName } from "../../utils/theme/useMobileClassName";
 injectString("cs", "More", "V\xEDce");
 injectString("da-DK", "More", "Mere");
 injectString("de", "More", "Mehr");
@@ -85,6 +86,7 @@ const ItemDataInternalInner = ({
     translate
   } = useLanguage();
   const driveClassName = useMemo(() => isDrive ? isMobile ? "zen-item-data-drive" : "zen-item-data-drive-tablet" : "", [isDrive, isMobile]);
+  const mobileClassName = useMobileClassName("zen-item-data");
   const aceClassName = useMemo(() => isTall ? "zen-item-data--tall" : "", [isTall]);
   const renderActions = useCallback(() => {
     if (!actions || actions.length === 0) {
@@ -99,7 +101,7 @@ const ItemDataInternalInner = ({
         "aria-label": translate("More"),
         title: translate("More"),
         children: _jsx(IconDotVertical, {
-          size: "large"
+          size: isMobile ? "huge" : "large"
         })
       }),
       children: actions.map(action => _jsx(Menu.Item, {
@@ -109,7 +111,7 @@ const ItemDataInternalInner = ({
         link: !isButtonAction(action) ? action.link : undefined
       }, action.name))
     });
-  }, [actions, translate]);
+  }, [actions, isMobile, translate]);
   const renderIcon = useCallback((iconComponent, iClassName, className) => {
     if (typeof iconComponent === "function") {
       return createElement(iconComponent, {
@@ -143,7 +145,7 @@ const ItemDataInternalInner = ({
       height: `${plHeight + 12 * 2 + 1}px`
     };
   }, [data, icon, secondary]);
-  const classNamesList = useMemo(() => classNames(["zen-item-data", driveClassName || "", aceClassName]), [driveClassName, aceClassName]);
+  const classNamesList = useMemo(() => classNames(["zen-item-data", driveClassName || "", mobileClassName || "", aceClassName]), [driveClassName, mobileClassName, aceClassName]);
   if (!visible) {
     return _jsx("li", {
       style: placeholderHeight,
@@ -152,7 +154,7 @@ const ItemDataInternalInner = ({
     }, id);
   }
   return _jsxs("li", {
-    className: classNames(["zen-item-data", driveClassName || "", aceClassName]),
+    className: classNames(["zen-item-data", driveClassName || "", mobileClassName || "", aceClassName]),
     "data-list-item-id": id,
     onClick: handleClick,
     children: [_jsxs("div", {

package/esm/list/listItem/listItem.js

@@ -13,6 +13,7 @@ import { classNames } from "../../commonHelpers/classNames/classNames";
 import { useIconSize } from "../../utils/theme/useIconSize";
 import { IconChevronRight } from "../../icons/iconChevronRight";
 import { isActiveElement } from "../utils/isActiveElement";
+import { useMobileClassName } from "../../utils/theme/useMobileClassName";
 injectString("cs", "More", "V\xEDce");
 injectString("da-DK", "More", "Mere");
 injectString("de", "More", "Mehr");
@@ -80,6 +81,7 @@ export const ListItem = ({
 }) => {
   const isMobile = useMobile();
   const driveClassName = useDriveClassName("zen-list-item");
+  const mobileClassName = useMobileClassName("zen-list-item");
   const iconSize = useIconSize();
   const {
     translate
@@ -123,7 +125,7 @@ export const ListItem = ({
         type: "tertiary-black",
         className: "zen-list-item__more-button",
         children: _jsx(IconDotVertical, {
-          size: "large"
+          size: isMobile ? "huge" : "large"
         })
       }),
       children: secondaryActions.map(action => _jsx(Menu.Item, {
@@ -166,7 +168,7 @@ export const ListItem = ({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return _jsxs("li", {
     id: id,
-    className: classNames(["zen-list-item", driveClassName || "", clickableClassName, className || ""]),
+    className: classNames(["zen-list-item", mobileClassName || driveClassName || "", clickableClassName, className || ""]),
     onClick: handleClick,
     ref: itemRef,
     children: [onDragStart ? _jsx("div", {
@@ -198,7 +200,7 @@ export const ListItem = ({
       target: target,
       title: translate("View details"),
       children: _jsx(IconChevronRight, {
-        size: "large",
+        size: isMobile ? "huge" : "large",
         className: "zen-list-item__click-icon"
       })
     }) : null]

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

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

package/esm/list/utils/findElement.js

@@ -0,0 +1,9 @@
+export const findElement = (element, className) => {
+    if (element.classList.contains(className)) {
+        return element;
+    }
+    if (element.parentElement) {
+        return findElement(element.parentElement, className);
+    }
+    return null;
+};

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

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

package/esm/list/utils/findItemPosition.js

@@ -1,4 +1,4 @@
-export const findItemPosition = (element) => {
+export const findItemPosition = (element, draggingClass = "zen-list-item--dragging") => {
     const parent = element.parentElement;
     if (!parent) {
         return -1;
@@ -6,7 +6,7 @@ export 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/esm/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/esm/list/utils/isDragNotClick.js

@@ -0,0 +1,5 @@
+export 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;
+};

package/esm/menu/controlledMenu.js

@@ -148,7 +148,7 @@ export const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLa
     if (isMobile) {
         return _jsx(_Fragment, { children: _jsx(PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, children: _jsxs(MobileSheet, { label: title, isOpen: isOpen, triggerRef: triggerRef, onHidePanel: hideMenu, onCloseClick: hideMenu, children: [_jsx(MobileSheet.Title, { children: title }), _jsx(MobileSheet.Content, { children: renderMenuList() })] }) }) });
     }
-    return _jsx(_Fragment, { children: _jsx(PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, children: _jsx(ControlledPopup, { id: id, useTrapFocusWithTrigger: "on", className: 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 _jsx(_Fragment, { children: _jsx(PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, children: _jsx(ControlledPopup, { id: id, useTrapFocusWithTrigger: "on", className: 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() }) }) });
 };
 ControlledMenu.Item = MenuItem;
 ControlledMenu.Separator = MenuSeparator;

package/esm/mobileSheet/mobileSheet.js

@@ -12,11 +12,12 @@ import { TextIconButton, ButtonIconPosition } from "../textIconButton/textIconBu
 import { IconBackArrow } from "../icons/deprecated/iconBackArrow";
 import { IconClose } from "../icons/iconClose";
 import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
-import { useDrive } from "../utils/theme/useDrive";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { useUniqueId } from "../commonHelpers/useUniqueId";
 import { useFadeComponent } from "../utils/useFadeComponent";
+import { useClientReady } from "../commonHelpers/hooks/useClientReady";
+import { zen } from "../utils/zen";
 // eslint-disable-next-line @typescript-eslint/naming-convention
 injectString("cs", "Back", "Zp\u011Bt");
 injectString("da-DK", "Back", "Tilbage");
@@ -102,7 +103,6 @@ export const MobileSheet = ({
     translate
   } = useLanguage();
   const ref = useRef(null);
-  const isDrive = useDrive();
   const driveWrapperMobileSheetClassName = useDriveClassName("zen-mobile-sheet-wrapper");
   const driveTitleClassName = useDriveClassName("zen-mobile-sheet__title");
   const driveFooterClassName = useDriveClassName("zen-mobile-sheet__footer");
@@ -132,19 +132,23 @@ export const MobileSheet = ({
       return;
     }
   }, [onHidePanel, dataShieldId]);
+  const isClientReady = useClientReady();
   useEffect(() => {
     setIsOpen(isOpen);
   }, [isOpen, setIsOpen]);
   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.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(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(FOCUSABLE_SELECTOR)) === null || _d === void 0 ? void 0 : _d.focus());
+  }, [content, showContent, readyForFocus, useTrapFocusWithTrigger, preventFirstFocus, isClientReady]);
   useEffect(() => {
     var _a;
     if (triggerRef && !renderComponent && !readyForFocus && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute("aria-expanded")) === "true") {
@@ -152,6 +156,9 @@ export const MobileSheet = ({
       triggerRef.current.focus();
     }
   }, [triggerRef, renderComponent, readyForFocus]);
+  if (!isClientReady) {
+    return null;
+  }
   if (!renderComponent && !isOpen) {
     return null;
   }
@@ -194,7 +201,7 @@ export const MobileSheet = ({
           }), _jsx(TextIconButton, {
             onClick: onCloseClick,
             "aria-label": translate("Close"),
-            iconSize: isDrive ? "huge" : "large",
+            iconSize: "huge",
             type: ButtonType.TertiaryBlack,
             iconPosition: ButtonIconPosition.Start,
             className: "zen-mobile-sheet__close-button",

package/esm/modal/modal.js

@@ -15,11 +15,13 @@ import { IconException } from "../icons/iconException";
 import { IconCheckRadio } from "../icons/iconCheckRadio";
 import { IconWarning } from "../icons/iconWarning";
 import { IconInfoCircle } from "../icons/iconInfoCircle";
-import { createPortal } from "react-dom";
 import { isFocusable } from "../dialog/dialogHelpers";
 import { themeContext } from "../utils/theme/themeContext";
 import { getPredefinedFocusableItem } from "./modalHelpers";
 import { TextIconButton } from "../textIconButton/textIconButton";
+import { usePortal } from "../commonHelpers/hooks/usePortal";
+import { useClientReady } from "../commonHelpers/hooks/useClientReady";
+import { zen } from "../utils/zen";
 injectString("cs", "Close", "Zav\u0159\xEDt");
 injectString("da-DK", "Close", "Luk");
 injectString("de", "Close", "Schlie\xDFen");
@@ -58,44 +60,63 @@ export const Modal = ({
   focus,
   modalContainerClassName
 }) => {
-  const lastActiveOutsideElement = useRef(document.activeElement);
-  const modalRoot = document.fullscreenElement || document.body;
-  const [top, setTop] = useState(`${window.pageYOffset}px`);
+  var _a, _b, _c;
+  const lastActiveOutsideElement = useRef((_a = zen.document) === null || _a === void 0 ? void 0 : _a.activeElement);
+  // eslint-disable-next-line
+  const modalRoot = ((_b = zen === null || zen === void 0 ? void 0 : zen.document) === null || _b === void 0 ? void 0 : _b.fullscreenElement) || ((_c = zen === null || zen === void 0 ? void 0 : zen.document) === null || _c === void 0 ? void 0 : _c.body);
+  const [top, setTop] = useState(`${zen.pageYOffset || 0}px`);
   const {
     dark
   } = useContext(themeContext);
+  const isClientReady = useClientReady();
   const onOutSideClick = useCallback(() => {
+    if (!isClientReady) {
+      return;
+    }
     if (!isOpen || !closeOnClickOutside || !onClose) {
       return;
     }
     onClose();
-  }, [onClose, isOpen, closeOnClickOutside]);
+  }, [isClientReady, isOpen, closeOnClickOutside, onClose]);
   useEffect(() => {
+    if (!isClientReady) {
+      return undefined;
+    }
     const copyActive = lastActiveOutsideElement.current;
     return () => {
       isFocusable(copyActive) && copyActive.focus();
     };
-  }, []);
+  }, [isClientReady]);
   useEffect(() => {
-    document.body.classList.remove("zen-modal-content--hidden-overflow");
+    var _a, _b;
+    if (!isClientReady) {
+      return undefined;
+    }
+    (_a = zen.document) === null || _a === void 0 ? void 0 : _a.body.classList.remove("zen-modal-content--hidden-overflow");
     if (isOpen) {
-      document.body.classList.add("zen-modal-content--hidden-overflow");
+      (_b = zen.document) === null || _b === void 0 ? void 0 : _b.body.classList.add("zen-modal-content--hidden-overflow");
     }
     return () => {
-      document.body.classList.remove("zen-modal-content--hidden-overflow");
+      var _a;
+      (_a = zen.document) === null || _a === void 0 ? void 0 : _a.body.classList.remove("zen-modal-content--hidden-overflow");
     };
-  }, [isOpen]);
+  }, [isClientReady, isOpen]);
   useEffect(() => {
+    var _a, _b;
+    if (!isClientReady) {
+      return undefined;
+    }
     const changeTopSpace = () => {
-      setTop(`${window.pageYOffset}px`);
+      setTop(`${zen.pageYOffset || 0}px`);
     };
-    window.addEventListener("resize", changeTopSpace);
-    window.addEventListener("scroll", changeTopSpace);
+    (_a = zen.addEventListener) === null || _a === void 0 ? void 0 : _a.call(zen, "resize", changeTopSpace);
+    (_b = zen.addEventListener) === null || _b === void 0 ? void 0 : _b.call(zen, "scroll", changeTopSpace);
     return () => {
-      window.removeEventListener("resize", changeTopSpace);
-      window.removeEventListener("scroll", changeTopSpace);
+      var _a, _b;
+      (_a = zen.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(zen, "resize", changeTopSpace);
+      (_b = zen.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(zen, "scroll", changeTopSpace);
     };
-  }, []);
+  }, [isClientReady]);
   const labeledId = useId();
   const darkClass = dark ? "zen-dark" : "";
   const modalContent = useMemo(() => {
@@ -130,10 +151,11 @@ export const Modal = ({
       onClick: onOutSideClick
     })]
   }), [darkClass, modalContainerClassName, labeledId, top, onClose, maxWidth, title, className, type, focus, modalContent, onOutSideClick]);
-  if (!isOpen) {
+  const modalPortal = usePortal(dialogHTML(labeledId), isOpen ? modalRoot : undefined);
+  if (!isOpen || !isClientReady) {
     return null;
   }
-  return createPortal(dialogHTML(labeledId), modalRoot, "ModalPortal" + labeledId);
+  return modalPortal;
 };
 const dummyOnClose = () => {};
 export const DialogContentNew = ({
@@ -146,12 +168,13 @@ export const DialogContentNew = ({
   focus,
   children
 }) => {
+  var _a;
   const {
     translate
   } = useLanguage();
   const isMobile = useMobile();
   const contentRef = useRef(null);
-  const lastActiveOutsideElement = useRef(document.activeElement);
+  const lastActiveOutsideElement = useRef((_a = zen.document) === null || _a === void 0 ? void 0 : _a.activeElement);
   const iconDriveClassName = useDriveClassName("icon");
   const iconsByType = useMemo(() => ({
     "error": IconException,

package/esm/nav/context/nav.context.d.ts

@@ -7,6 +7,8 @@ export interface INavContext {
     searchOpen?: boolean;
     onSearchToggle?: (isOpen: boolean) => void;
     onNavigate?: () => void;
+    isEditState?: boolean;
+    onEditStateToggle?: (isEdit: boolean) => void;
 }
 /**
  * @beta This component is not fully ready yet and may change in future releases.

package/esm/nav/context/nav.context.js

@@ -9,7 +9,9 @@ export const NavContext = createContext({
     onSearch: undefined,
     searchOpen: false,
     onSearchToggle: undefined,
-    onNavigate: undefined
+    onNavigate: undefined,
+    isEditState: false,
+    onEditStateToggle: undefined
 });
 /**
  * @beta This component is not fully ready yet and may change in future releases.

package/esm/nav/nav.d.ts

@@ -5,8 +5,10 @@ export interface INav extends IZenComponentProps {
     collapsed?: boolean;
     onCollapseToggle?: (isCollapsed: boolean) => void;
     onMenuVisibilityToggle?: (isOpen: boolean) => void;
+    isMobileMenuOpen?: boolean;
+    onIsMobileMenuOpenToggle?: (isOpen: boolean) => void;
 }
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
-export declare const Nav: ({ children, className, collapsed, onCollapseToggle, onMenuVisibilityToggle, mobileBarContainer }: INav) => import("react/jsx-runtime").JSX.Element;
+export declare const Nav: ({ children, className, collapsed, onCollapseToggle, onMenuVisibilityToggle, mobileBarContainer, isMobileMenuOpen, onIsMobileMenuOpenToggle }: INav) => import("react/jsx-runtime").JSX.Element;