@geotab/zenith 3.5.0 → 3.6.0-beta.0

package/dist/modal/modal.js

@@ -80,11 +80,13 @@ const iconException_1 = require("../icons/iconException");
 const iconCheckRadio_1 = require("../icons/iconCheckRadio");
 const iconWarning_1 = require("../icons/iconWarning");
 const iconInfoCircle_1 = require("../icons/iconInfoCircle");
-const react_dom_1 = require("react-dom");
 const dialogHelpers_1 = require("../dialog/dialogHelpers");
 const themeContext_1 = require("../utils/theme/themeContext");
 const modalHelpers_1 = require("./modalHelpers");
 const textIconButton_1 = require("../textIconButton/textIconButton");
+const usePortal_1 = require("../commonHelpers/hooks/usePortal");
+const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
+const zen_1 = require("../utils/zen");
 const Modal = ({
   isOpen,
   children,
@@ -97,44 +99,63 @@ const Modal = ({
   focus,
   modalContainerClassName
 }) => {
-  const lastActiveOutsideElement = (0, react_1.useRef)(document.activeElement);
-  const modalRoot = document.fullscreenElement || document.body;
-  const [top, setTop] = (0, react_1.useState)(`${window.pageYOffset}px`);
+  var _a, _b, _c;
+  const lastActiveOutsideElement = (0, react_1.useRef)((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.activeElement);
+  // eslint-disable-next-line
+  const modalRoot = ((_b = zen_1.zen === null || zen_1.zen === void 0 ? void 0 : zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.fullscreenElement) || ((_c = zen_1.zen === null || zen_1.zen === void 0 ? void 0 : zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body);
+  const [top, setTop] = (0, react_1.useState)(`${zen_1.zen.pageYOffset || 0}px`);
   const {
     dark
   } = (0, react_1.useContext)(themeContext_1.themeContext);
+  const isClientReady = (0, useClientReady_1.useClientReady)();
   const onOutSideClick = (0, react_1.useCallback)(() => {
+    if (!isClientReady) {
+      return;
+    }
     if (!isOpen || !closeOnClickOutside || !onClose) {
       return;
     }
     onClose();
-  }, [onClose, isOpen, closeOnClickOutside]);
+  }, [isClientReady, isOpen, closeOnClickOutside, onClose]);
   (0, react_1.useEffect)(() => {
+    if (!isClientReady) {
+      return undefined;
+    }
     const copyActive = lastActiveOutsideElement.current;
     return () => {
       (0, dialogHelpers_1.isFocusable)(copyActive) && copyActive.focus();
     };
-  }, []);
+  }, [isClientReady]);
   (0, react_1.useEffect)(() => {
-    document.body.classList.remove("zen-modal-content--hidden-overflow");
+    var _a, _b;
+    if (!isClientReady) {
+      return undefined;
+    }
+    (_a = zen_1.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_1.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_1.zen.document) === null || _a === void 0 ? void 0 : _a.body.classList.remove("zen-modal-content--hidden-overflow");
     };
-  }, [isOpen]);
+  }, [isClientReady, isOpen]);
   (0, react_1.useEffect)(() => {
+    var _a, _b;
+    if (!isClientReady) {
+      return undefined;
+    }
     const changeTopSpace = () => {
-      setTop(`${window.pageYOffset}px`);
+      setTop(`${zen_1.zen.pageYOffset || 0}px`);
     };
-    window.addEventListener("resize", changeTopSpace);
-    window.addEventListener("scroll", changeTopSpace);
+    (_a = zen_1.zen.addEventListener) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, "resize", changeTopSpace);
+    (_b = zen_1.zen.addEventListener) === null || _b === void 0 ? void 0 : _b.call(zen_1.zen, "scroll", changeTopSpace);
     return () => {
-      window.removeEventListener("resize", changeTopSpace);
-      window.removeEventListener("scroll", changeTopSpace);
+      var _a, _b;
+      (_a = zen_1.zen.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, "resize", changeTopSpace);
+      (_b = zen_1.zen.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(zen_1.zen, "scroll", changeTopSpace);
     };
-  }, []);
+  }, [isClientReady]);
   const labeledId = (0, react_1.useId)();
   const darkClass = dark ? "zen-dark" : "";
   const modalContent = (0, react_1.useMemo)(() => {
@@ -169,10 +190,11 @@ const Modal = ({
       onClick: onOutSideClick
     })]
   }), [darkClass, modalContainerClassName, labeledId, top, onClose, maxWidth, title, className, type, focus, modalContent, onOutSideClick]);
-  if (!isOpen) {
+  const modalPortal = (0, usePortal_1.usePortal)(dialogHTML(labeledId), isOpen ? modalRoot : undefined);
+  if (!isOpen || !isClientReady) {
     return null;
   }
-  return (0, react_dom_1.createPortal)(dialogHTML(labeledId), modalRoot, "ModalPortal" + labeledId);
+  return modalPortal;
 };
 exports.Modal = Modal;
 const dummyOnClose = () => {};
@@ -186,12 +208,13 @@ const DialogContentNew = ({
   focus,
   children
 }) => {
+  var _a;
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
   const isMobile = (0, useMobile_1.useMobile)();
   const contentRef = (0, react_1.useRef)(null);
-  const lastActiveOutsideElement = (0, react_1.useRef)(document.activeElement);
+  const lastActiveOutsideElement = (0, react_1.useRef)((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.activeElement);
   const iconDriveClassName = (0, useDriveClassName_1.useDriveClassName)("icon");
   const iconsByType = (0, react_1.useMemo)(() => ({
     "error": iconException_1.IconException,

package/dist/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/dist/nav/context/nav.context.js

@@ -12,7 +12,9 @@ exports.NavContext = (0, react_1.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/dist/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;

package/dist/nav/nav.js

@@ -12,7 +12,9 @@ const react_dom_1 = require("react-dom");
 const navMobileBar_1 = require("./navMobileBar/navMobileBar");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const focusableSelector_1 = require("../utils/focusableSelector");
+const zen_1 = require("../utils/zen");
 const NavContent = ({ children }) => {
+    const { isEditState } = (0, nav_context_1.useNavContext)();
     const contentRef = (0, react_1.useRef)(null);
     const [hasScrollbar, setHasScrollbar] = (0, react_1.useState)(false);
     const [showTopShadow, setShowTopShadow] = (0, react_1.useState)(false);
@@ -43,8 +45,8 @@ const NavContent = ({ children }) => {
     }, [handleResize]);
     return (0, jsx_runtime_1.jsx)("div", { ref: contentRef, onScroll: handleScroll, className: (0, classNames_1.classNames)([
             "zen-nav__content",
-            showTopShadow ? "zen-nav__content--show-top-shadow" : "",
-            showBottomShadow ? "zen-nav__content--show-bottom-shadow" : "",
+            showTopShadow && !isEditState ? "zen-nav__content--show-top-shadow" : "",
+            showBottomShadow && !isEditState ? "zen-nav__content--show-bottom-shadow" : "",
             hasScrollbar ? "zen-nav__content--has-scrollbar" : "",
             hasOverlayScrollbar ? "zen-nav__content--overlay-scrollbar" : ""
         ]), children: (0, jsx_runtime_1.jsx)("div", { className: "zen-nav__content-inner", children: children }) });
@@ -52,48 +54,56 @@ const NavContent = ({ children }) => {
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
-const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuVisibilityToggle, mobileBarContainer }) => {
-    const [isMobileMenuOpen, setIsMobileMenuOpen] = (0, react_1.useState)(false);
+const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuVisibilityToggle, mobileBarContainer, isMobileMenuOpen = false, onIsMobileMenuOpenToggle
+// eslint-disable-next-line complexity
+ }) => {
     const menuRef = (0, react_1.useRef)(null);
     const [isSearchOpen, setIsSearchOpen] = (0, react_1.useState)(false);
+    const [isEditState, setIsEditState] = (0, react_1.useState)(false);
     const [searchTerm, setSearchTerm] = (0, react_1.useState)("");
     const isMobile = (0, useMobile_1.useMobile)();
     const prevIsMobileRef = (0, react_1.useRef)(false);
     // Focus the first active element inside the Nav when mobile menu opens
     (0, react_1.useLayoutEffect)(() => {
-        var _a;
+        var _a, _b;
         if (isMobile && isMobileMenuOpen && menuRef.current) {
-            const currentFocus = document.activeElement;
+            const currentFocus = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.activeElement;
             // If focused element is not inside the nav, focus the first focusable element
             if (!currentFocus.closest(".zen-nav")) {
-                (_a = menuRef.current.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR)) === null || _a === void 0 ? void 0 : _a.focus();
+                (_b = menuRef.current.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR)) === null || _b === void 0 ? void 0 : _b.focus();
             }
         }
     }, [isMobile, isMobileMenuOpen]);
     const childrenArray = react_1.Children.toArray(children);
-    const header = childrenArray.find(child => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "NavHeader"; });
+    const header = isEditState ? undefined : childrenArray.find(child => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "NavHeader"; });
     const sections = childrenArray.filter(child => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "NavSection"; });
     const footer = childrenArray.find(child => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "NavFooter"; });
+    const editFooter = childrenArray.find(child => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "NavEditFooter"; });
     const secondarySections = sections.map(section => (0, navUtils_1.filterPrimaryNavItems)(section, true)).filter(section => !!section && react_1.Children.count(section.props.children) > 0);
     const primarySections = sections.map(section => (0, navUtils_1.filterPrimaryNavItems)(section, false)).filter(section => !!section && react_1.Children.count(section.props.children) > 0);
     const sectionsToRender = isMobile ? secondarySections : sections;
     const secondaryFooter = footer && (0, navUtils_1.filterPrimaryNavItems)(footer, true);
     const primaryFooter = footer && (0, navUtils_1.filterPrimaryNavItems)(footer, false);
-    const footerToRender = isMobile ? secondaryFooter : footer;
+    const footerToRender = isEditState ? editFooter : (isMobile ? secondaryFooter : footer);
     const primaryItems = [...primarySections, ...(primaryFooter ? [primaryFooter] : [])].flatMap(e => (0, navUtils_1.collectNavItems)(e));
+    const editListItems = childrenArray.find(child => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.name) === "NavEditSection"; });
     const onSearchOpen = (0, react_1.useCallback)((isOpen) => {
         isOpen && onCollapseToggle && onCollapseToggle(false);
         setIsSearchOpen(isOpen || isMobile);
     }, [onCollapseToggle, setIsSearchOpen, isMobile]);
     const onMobileMenuToggle = (0, react_1.useCallback)(() => {
-        setIsMobileMenuOpen(!isMobileMenuOpen);
-    }, [isMobileMenuOpen, setIsMobileMenuOpen]);
+        onIsMobileMenuOpenToggle && onIsMobileMenuOpenToggle(!isMobileMenuOpen);
+    }, [isMobileMenuOpen, onIsMobileMenuOpenToggle]);
+    const onEditStateToggle = (0, react_1.useCallback)((isEdit) => {
+        isEdit && onCollapseToggle && onCollapseToggle(false);
+        editListItems && editFooter && setIsEditState(isEdit);
+    }, [onCollapseToggle, setIsEditState, editListItems, editFooter]);
     (0, react_1.useEffect)(() => {
         const wasMobile = prevIsMobileRef.current;
         prevIsMobileRef.current = isMobile;
         // Close mobile menu when switching to desktop
         if (wasMobile && !isMobile) {
-            setIsMobileMenuOpen(false);
+            onIsMobileMenuOpenToggle && onIsMobileMenuOpenToggle(false);
         }
         // Close search input when collapsed
         if (collapsed) {
@@ -114,7 +124,7 @@ const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuV
         if (wasMobile && !searchTerm.trim()) {
             setIsSearchOpen(false);
         }
-    }, [collapsed, setIsSearchOpen, setIsMobileMenuOpen, searchTerm, isMobile]);
+    }, [collapsed, setIsSearchOpen, onIsMobileMenuOpenToggle, searchTerm, isMobile]);
     (0, react_1.useEffect)(() => {
         onMenuVisibilityToggle === null || onMenuVisibilityToggle === void 0 ? void 0 : onMenuVisibilityToggle(!isMobile || isMobileMenuOpen);
     }, [isMobile, isMobileMenuOpen, onMenuVisibilityToggle]);
@@ -122,14 +132,18 @@ const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuV
             collapsed,
             onCollapseToggle,
             searchOpen: isSearchOpen,
+            isEditState: isEditState,
+            onEditStateToggle,
             onSearchToggle: onSearchOpen,
             searchTerm,
             onSearch: setSearchTerm,
-            onNavigate: () => setIsMobileMenuOpen(false)
+            onNavigate: () => onIsMobileMenuOpenToggle && onIsMobileMenuOpenToggle(false)
         }, children: [(!isMobile || isMobileMenuOpen)
-                ? (0, jsx_runtime_1.jsxs)("div", { ref: menuRef, className: (0, classNames_1.classNames)(["zen-nav", isMobile ? "zen-nav--mobile" : "", collapsed ? "zen-nav--collapsed" : "", className || ""]), children: [header ? (0, react_1.cloneElement)(header, Object.assign(Object.assign({}, header.props), { className: (0, classNames_1.classNames)(["zen-nav__header", header.props.className || ""]) })) : null, (0, jsx_runtime_1.jsx)(NavContent, { children: sectionsToRender.map((section, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, react_1.cloneElement)(section, {
-                                        className: (0, classNames_1.classNames)(["zen-nav__section", section.props.className || ""])
-                                    }), isMobile || index < sectionsToRender.length - 1 ? (0, jsx_runtime_1.jsx)(navDivider_1.NavDivider, {}) : null] }, index))) }), footerToRender] })
-                : null, mobileBarContainer && isMobile && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(navMobileBar_1.NavMobileBar, { onMenuToggle: onMobileMenuToggle, isMenuOpen: isMobileMenuOpen, children: primaryItems }), mobileBarContainer)] });
+                ? (0, jsx_runtime_1.jsxs)("div", { ref: menuRef, className: (0, classNames_1.classNames)(["zen-nav", isMobile ? "zen-nav--mobile" : "", collapsed ? "zen-nav--collapsed" : "", className || ""]), children: [header ? (0, react_1.cloneElement)(header, Object.assign(Object.assign({}, header.props), { className: (0, classNames_1.classNames)(["zen-nav__header", header.props.className || ""]) })) : null, (0, jsx_runtime_1.jsx)(NavContent, { children: isEditState
+                                ? editListItems
+                                : sectionsToRender.map((section, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, react_1.cloneElement)(section, {
+                                            className: (0, classNames_1.classNames)(["zen-nav__section", section.props.className || ""])
+                                        }), isMobile || index < sectionsToRender.length - 1 ? (0, jsx_runtime_1.jsx)(navDivider_1.NavDivider, {}) : null] }, index))) }), footerToRender] })
+                : null, mobileBarContainer && isMobile && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(navMobileBar_1.NavMobileBar, { onMenuToggle: onMobileMenuToggle, isMenuOpen: isMobileMenuOpen, children: editListItems ? editListItems : primaryItems }), mobileBarContainer)] });
 };
 exports.Nav = Nav;

package/dist/nav/navAddMenu/navAddMenu.js

@@ -12,11 +12,13 @@ const iconClose_1 = require("../../icons/iconClose");
 const iconPlus_1 = require("../../icons/iconPlus");
 const tooltip_1 = require("../../tooltip/tooltip");
 const nav_context_1 = require("../context/nav.context");
+const utils_1 = require("../../commonHelpers/utils");
 const NavAddMenu = ({ title, alignment, className, children }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const isMobile = (0, useMobile_1.useMobile)();
     const { collapsed } = (0, nav_context_1.useNavContext)();
     const triggerRef = (0, react_1.useRef)(null);
+    const triggerId = (0, utils_1.generateId)();
     const validChildren = react_1.Children.toArray(children)
         .filter((child) => {
         const element = child;
@@ -29,7 +31,7 @@ const NavAddMenu = ({ title, alignment, className, children }) => {
         ]),
         collapsed: false
     }));
-    return (0, jsx_runtime_1.jsx)(navItem_1.NavItemContext, { value: { parentLevel: 2 }, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-nav-header__actions", className || ""]), children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { title: title, className: (0, classNames_1.classNames)(["zen-nav-footer__actions-icon", className || ""]), icon: isOpen && !isMobile ? iconClose_1.IconClose : iconPlus_1.IconPlus, iconSize: "large", ref: triggerRef, onClick: () => setIsOpen(!isOpen) }), alignment: isMobile ? "left" : collapsed ? "right" : "top", children: title }), (0, jsx_runtime_1.jsx)(controlledMenu_1.ControlledMenu, { title: title, isOpen: isOpen, setIsOpen: setIsOpen, triggerRef: triggerRef, alignment: alignment, paddingX: 8, paddingY: 8, className: (0, classNames_1.classNames)(["zen-nav-popup zen-nav-popup--narrow zen-nav-l2-popup zen-nav-l2-popup--narrow", isMobile ? "zen-nav-popup--mobile zen-nav-l2-popup--mobile" : ""]), listClassName: (0, classNames_1.classNames)(["zen-nav-popup__list zen-nav-l2-popup__list", isMobile ? "zen-nav-popup__list--mobile zen-nav-l2-popup__list--mobile" : ""]), children: validChildren })] }) });
+    return (0, jsx_runtime_1.jsx)(navItem_1.NavItemContext, { value: { parentLevel: 2 }, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-nav-header__actions", className || ""]), children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { id: triggerId, title: title, className: (0, classNames_1.classNames)(["zen-nav-footer__actions-icon", className || ""]), icon: isOpen && !isMobile ? iconClose_1.IconClose : iconPlus_1.IconPlus, iconSize: "large", ref: triggerRef, onClick: () => setIsOpen(!isOpen), role: !isMobile ? "menuitem" : undefined }), alignment: isMobile ? "left" : collapsed ? "right" : "top", children: title }), (0, jsx_runtime_1.jsx)(controlledMenu_1.ControlledMenu, { title: title, isOpen: isOpen, setIsOpen: setIsOpen, triggerRef: triggerRef, alignment: alignment, paddingX: 8, paddingY: 8, className: (0, classNames_1.classNames)(["zen-nav-popup zen-nav-popup--narrow zen-nav-l2-popup zen-nav-l2-popup--narrow", isMobile ? "zen-nav-popup--mobile zen-nav-l2-popup--mobile" : ""]), listClassName: (0, classNames_1.classNames)(["zen-nav-popup__list zen-nav-l2-popup__list", isMobile ? "zen-nav-popup__list--mobile zen-nav-l2-popup__list--mobile" : ""]), ariaLabelledby: triggerId, children: validChildren })] }) });
 };
 exports.NavAddMenu = NavAddMenu;
 exports.NavAddMenu.displayName = "NavAddMenu";

package/dist/nav/navEditList/navEditList.d.ts

@@ -0,0 +1,7 @@
+import "./navEditList.less";
+import { IZenComponentProps } from "../../commonHelpers/zenComponent";
+export interface INavEditList extends IZenComponentProps {
+    onItemsChangeOrder?: (startPosition: number, endPosition: number) => void;
+    onBeforeItemDrag?: (position: number) => boolean;
+}
+export declare const NavEditList: ({ children, className, onItemsChangeOrder, onBeforeItemDrag }: INavEditList) => import("react/jsx-runtime").JSX.Element;

package/dist/nav/navEditList/navEditList.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavEditList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useDragAndDrop_1 = require("../../list/hooks/useDragAndDrop");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const navEditListUtils_1 = require("./navEditListUtils");
+const marksClassNames = {
+    general: "zen-nav-edit-list__item",
+    placeholder: "zen-nav-edit-list__item--placeholder",
+    dragging: "zen-nav-edit-list__item--dragging",
+    dragged: "zen-nav-edit-list__item--dragged"
+};
+const NavEditList = ({ children, className, onItemsChangeOrder, onBeforeItemDrag }) => {
+    const appsListRef = (0, react_1.useRef)(null);
+    const dragHandler = onItemsChangeOrder ? onItemsChangeOrder : () => { };
+    const { onDragStart } = (0, useDragAndDrop_1.useDragAndDrop)(appsListRef, dragHandler, marksClassNames, onBeforeItemDrag);
+    const childrenArray = (0, react_1.useMemo)(() => onItemsChangeOrder ? react_1.Children.map(children, child => (0, navEditListUtils_1.attachDndHandler)(child, onDragStart)) : children, [children, onItemsChangeOrder, onDragStart]);
+    return (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-nav-edit-list", className || ""]), ref: appsListRef, children: childrenArray });
+};
+exports.NavEditList = NavEditList;

package/dist/nav/navEditList/navEditListUtils.d.ts

@@ -0,0 +1,3 @@
+import { PointerEvent, ReactElement } from "react";
+import { INavActionItem } from "../navItem/navActionItem";
+export declare const attachDndHandler: (item: ReactElement<INavActionItem>, onPointerDown: (e: PointerEvent<HTMLElement>) => void) => ReactElement<INavActionItem, string | import("react").JSXElementConstructor<any>>;

package/dist/nav/navEditList/navEditListUtils.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.attachDndHandler = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const navActionItem_1 = require("../navItem/navActionItem");
+const iconGrab_1 = require("../../icons/iconGrab");
+const attachDndHandler = (item, onPointerDown) => {
+    if (item.type === navActionItem_1.NavActionItem) {
+        return (0, react_1.cloneElement)(item, Object.assign(Object.assign({}, item.props), { startNode: (0, jsx_runtime_1.jsx)("div", { className: "zen-nav-item__dnd", onPointerDown: onPointerDown, children: (0, jsx_runtime_1.jsx)(iconGrab_1.IconGrab, { size: "large" }) }) }));
+    }
+    return item;
+};
+exports.attachDndHandler = attachDndHandler;

package/dist/nav/navEditSection/navEditSection.d.ts

@@ -0,0 +1,3 @@
+import "./navEditSection.less";
+import { IZenComponentProps } from "../../commonHelpers/zenComponent";
+export declare const NavEditSection: ({ children, className }: IZenComponentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/nav/navEditSection/navEditSection.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavEditSection = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const NavEditSection = ({ children, className }) => (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-nav-edit-section", className || ""]), children: children });
+exports.NavEditSection = NavEditSection;

package/dist/nav/navFooter/navEditFooter/navEditFooter.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import "./navEditFooter.less";
+import { IZenComponentProps } from "../../../commonHelpers/zenComponent";
+/**
+ * @beta This component is not fully ready yet and may change in future releases.
+ */
+export interface INavEditFooter extends IZenComponentProps {
+    handleSaveClick: () => void;
+    handleCancelClick: () => void;
+}
+export declare const NavEditFooter: React.FC<INavEditFooter>;

package/dist/nav/navFooter/navEditFooter/navEditFooter.js

@@ -0,0 +1,110 @@
+"use strict";
+
+const {
+  injectString
+} = require("../../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavEditFooter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+injectString("cs", "Save", "Ulo\u017Eit");
+injectString("da-DK", "Save", "Spare");
+injectString("de", "Save", "Speichern");
+injectString("en", "Save", "Save");
+injectString("es", "Save", "Guardar");
+injectString("fi-FI", "Save", "S\xE4\xE4st\xE4\xE4");
+injectString("fr", "Save", "Enregistrer");
+injectString("fr-FR", "Save", "Enregistrer");
+injectString("hu-HU", "Save", "Ment\xE9s");
+injectString("id", "Save", "Simpan");
+injectString("it", "Save", "Salvare");
+injectString("ja", "Save", "\u4FDD\u5B58");
+injectString("ko-KR", "Save", "\uC800\uC7A5");
+injectString("ms", "Save", "Simpan");
+injectString("nb-NO", "Save", "Lagre");
+injectString("nl", "Save", "Opslaan");
+injectString("pl", "Save", "Zapisz");
+injectString("pt-BR", "Save", "Salvar");
+injectString("pt-PT", "Save", "Guardar");
+injectString("sk-SK", "Save", "Ulo\u017Ei\u0165");
+injectString("sv", "Save", "Spara");
+injectString("th", "Save", "\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01");
+injectString("tr", "Save", "Kaydet");
+injectString("zh-Hans", "Save", "\u4FDD\u5B58");
+injectString("zh-TW", "Save", "\u5132\u5B58");
+injectString("ro-RO", "Save", "Salva\u021Bi");
+injectString("cs", "Cancel", "Zru\u0161it");
+injectString("da-DK", "Cancel", "Annuller");
+injectString("de", "Cancel", "Abbrechen");
+injectString("en", "Cancel", "Cancel");
+injectString("es", "Cancel", "Cancelar");
+injectString("fi-FI", "Cancel", "Peruuta");
+injectString("fr", "Cancel", "Annuler");
+injectString("fr-FR", "Cancel", "Annuler");
+injectString("hu-HU", "Cancel", "M\xE9gse");
+injectString("id", "Cancel", "Batalkan");
+injectString("it", "Cancel", "Annullare");
+injectString("ja", "Cancel", "\u30AD\u30E3\u30F3\u30BB\u30EB");
+injectString("ko-KR", "Cancel", "\uCDE8\uC18C");
+injectString("ms", "Cancel", "Batal");
+injectString("nb-NO", "Cancel", "Avbryt");
+injectString("nl", "Cancel", "Annuleren");
+injectString("pl", "Cancel", "Anuluj");
+injectString("pt-BR", "Cancel", "Cancelar");
+injectString("pt-PT", "Cancel", "Cancelar");
+injectString("sk-SK", "Cancel", "Zru\u0161.");
+injectString("sv", "Cancel", "Avbryt");
+injectString("th", "Cancel", "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01");
+injectString("tr", "Cancel", "\u0130ptal");
+injectString("zh-Hans", "Cancel", "\u53D6\u6D88");
+injectString("zh-TW", "Cancel", "\u53D6\u6D88");
+injectString("ro-RO", "Cancel", "Anula\u021Bi");
+const button_1 = require("../../../button/button");
+const classNames_1 = require("../../../commonHelpers/classNames/classNames");
+const useLanguage_1 = require("../../../utils/localization/useLanguage");
+const nav_context_1 = require("../../context/nav.context");
+const react_1 = require("react");
+const useMobile_1 = require("../../../commonHelpers/hooks/useMobile");
+const NavEditFooter = ({
+  className,
+  handleSaveClick,
+  handleCancelClick
+}) => {
+  const {
+    onEditStateToggle
+  } = (0, nav_context_1.useNavContext)();
+  const isMobile = (0, useMobile_1.useMobile)();
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const onSaveClick = (0, react_1.useCallback)(() => {
+    onEditStateToggle === null || onEditStateToggle === void 0 ? void 0 : onEditStateToggle(false);
+    handleSaveClick();
+  }, [onEditStateToggle, handleSaveClick]);
+  const onCancelClick = (0, react_1.useCallback)(() => {
+    onEditStateToggle === null || onEditStateToggle === void 0 ? void 0 : onEditStateToggle(false);
+    handleCancelClick();
+  }, [onEditStateToggle, handleCancelClick]);
+  const navEditFooterClassNames = (0, classNames_1.classNames)(["zen-nav-edit-footer", isMobile ? "zen-nav-edit-footer--mobile" : "", className !== null && className !== void 0 ? className : ""]);
+  // needed to change buttons order between mobile and desktop modes
+  const saveButtonClassNames = (0, classNames_1.classNames)(["zen-nav-edit-footer__button", isMobile ? "zen-nav-edit-footer__button--with-margin" : ""]);
+  const saveButton = (0, jsx_runtime_1.jsx)(button_1.Button, {
+    onClick: onSaveClick,
+    className: saveButtonClassNames,
+    type: "primary",
+    children: translate("Save")
+  });
+  const cancelButton = (0, jsx_runtime_1.jsx)(button_1.Button, {
+    onClick: onCancelClick,
+    className: "zen-nav-edit-footer__button",
+    type: "secondary",
+    children: translate("Cancel")
+  });
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: navEditFooterClassNames,
+    children: [isMobile ? saveButton : cancelButton, isMobile ? cancelButton : saveButton]
+  });
+};
+exports.NavEditFooter = NavEditFooter;
+exports.NavEditFooter.displayName = "NavEditFooter";

package/dist/nav/navFooter/navFooter.d.ts

@@ -3,11 +3,6 @@ import { IZenComponentProps } from "../../commonHelpers/zenComponent";
 import { FC } from "react";
 export interface INavFooter extends IZenComponentProps {
 }
-export interface INavFooterBottom extends IZenComponentProps {
-}
-export interface INavFooterEditButton extends IZenComponentProps {
-    onClick?: () => void;
-}
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
@@ -16,6 +11,6 @@ export declare const NavFooter: FC<INavFooter> & {
         ({ children }: import("./navFooterAction/navFooterAction").INavFooterActionProps): import("react/jsx-runtime").JSX.Element | null;
         displayName: string;
     };
-    Bottom: FC<INavFooterBottom>;
-    EditButton: FC<INavFooterEditButton>;
+    Bottom: FC<IZenComponentProps>;
+    EditButton: FC<IZenComponentProps>;
 };

package/dist/nav/navFooter/navFooter.js

@@ -60,6 +60,7 @@ const NavFooterBottom = ({
   });
   return (0, jsx_runtime_1.jsx)("div", {
     className: (0, classNames_1.classNames)(["zen-nav-footer__bottom", isMobile ? "zen-nav-footer__bottom--mobile" : "", className || ""]),
+    role: "menu",
     children: childrenArray.map(child => {
       const childElement = child;
       return (0, react_1.cloneElement)(childElement, Object.assign(Object.assign({}, childElement.props), {
@@ -73,14 +74,14 @@ const NavFooterBottom = ({
 };
 NavFooterBottom.displayName = "NavFooterBottom";
 const NavFooterEditButton = ({
-  className,
-  onClick
+  className
 }) => {
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
   const {
-    collapsed
+    collapsed,
+    onEditStateToggle
   } = (0, nav_context_1.useNavContext)();
   const isMobile = (0, useMobile_1.useMobile)();
   return (0, jsx_runtime_1.jsx)(navItem_1.NavItem, {
@@ -88,7 +89,7 @@ const NavFooterEditButton = ({
     title: translate("Edit Navigation"),
     collapsed: !isMobile,
     primaryIcon: iconEdit_1.IconEdit,
-    onClick: () => onClick && onClick(),
+    onClick: () => onEditStateToggle === null || onEditStateToggle === void 0 ? void 0 : onEditStateToggle(true),
     menuAlignment: "right-bottom",
     tooltipAlignment: collapsed ? "right" : "top"
   }, "edit-button");

package/dist/nav/navFooter/navFooterAction/navFooterAction.js

@@ -58,6 +58,7 @@ const NavFooterAction = ({
     primaryIcon: iconSettings4_1.IconSettings4,
     title: translate("Configure"),
     menuAlignment: "right-bottom",
+    isMenuItem: false,
     children: filteredItems
   });
 };

package/dist/nav/navItem/navActionItem.d.ts

@@ -0,0 +1,14 @@
+import { FC, MouseEvent, ReactNode } from "react";
+import { IZenComponentProps } from "../../commonHelpers/zenComponent";
+import { IIcon } from "../../icons/icon";
+import "./navItem.less";
+export interface INavActionItem extends IZenComponentProps {
+    title: string;
+    id?: string;
+    icon?: FC<IIcon>;
+    startNode?: ReactNode;
+    endButtonIcon?: FC<IIcon>;
+    endButtonTitle?: string;
+    onEndButtonClick?: (e: MouseEvent) => void;
+}
+export declare const NavActionItem: FC<INavActionItem>;

package/dist/nav/navItem/navActionItem.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavActionItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const NavActionItem = ({ title, id, icon, className, startNode, endButtonIcon, endButtonTitle, onEndButtonClick }) => {
+    const PrimaryIconComponent = typeof icon === "function" ? icon : null;
+    const EndButtonIconComponent = typeof endButtonIcon === "function" ? endButtonIcon : null;
+    const itemClasses = (0, classNames_1.classNames)(["zen-nav-item", className || ""]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: itemClasses, id: id, children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-nav-item__main", children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-nav-item__content-left", children: [startNode ? (0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__icon", children: startNode }) : null, PrimaryIconComponent ? (0, jsx_runtime_1.jsx)(PrimaryIconComponent, { size: "huge" }) : null, (0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__title", children: (0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__title-text", children: title }) })] }) }), EndButtonIconComponent && endButtonTitle && onEndButtonClick
+                ? (0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-nav-item__action", "aria-label": endButtonTitle, title: endButtonTitle, onClick: onEndButtonClick, children: (0, jsx_runtime_1.jsx)(EndButtonIconComponent, { size: "huge" }) })
+                : null] }));
+};
+exports.NavActionItem = NavActionItem;
+exports.NavActionItem.displayName = "NavActionItem";