@geotab/zenith 3.5.0 → 3.6.0-beta.1

package/esm/nav/nav.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { NavContext } from "./context/nav.context";
+import { NavContext, useNavContext } from "./context/nav.context";
 import { Children, cloneElement, Fragment, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { NavDivider } from "./navDivider/navDivider";
 import { detectOverlayScrollbar, filterPrimaryNavItems, collectNavItems } from "./utils/navUtils";
@@ -9,7 +9,9 @@ import { createPortal } from "react-dom";
 import { NavMobileBar } from "./navMobileBar/navMobileBar";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
+import { zen } from "../utils/zen";
 const NavContent = ({ children }) => {
+    const { isEditState } = useNavContext();
     const contentRef = useRef(null);
     const [hasScrollbar, setHasScrollbar] = useState(false);
     const [showTopShadow, setShowTopShadow] = useState(false);
@@ -40,8 +42,8 @@ const NavContent = ({ children }) => {
     }, [handleResize]);
     return _jsx("div", { ref: contentRef, onScroll: handleScroll, className: 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: _jsx("div", { className: "zen-nav__content-inner", children: children }) });
@@ -49,48 +51,56 @@ const NavContent = ({ children }) => {
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
-export const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuVisibilityToggle, mobileBarContainer }) => {
-    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+export const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuVisibilityToggle, mobileBarContainer, isMobileMenuOpen = false, onIsMobileMenuOpenToggle
+// eslint-disable-next-line complexity
+ }) => {
     const menuRef = useRef(null);
     const [isSearchOpen, setIsSearchOpen] = useState(false);
+    const [isEditState, setIsEditState] = useState(false);
     const [searchTerm, setSearchTerm] = useState("");
     const isMobile = useMobile();
     const prevIsMobileRef = useRef(false);
     // Focus the first active element inside the Nav when mobile menu opens
     useLayoutEffect(() => {
-        var _a;
+        var _a, _b;
         if (isMobile && isMobileMenuOpen && menuRef.current) {
-            const currentFocus = document.activeElement;
+            const currentFocus = (_a = 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(FOCUSABLE_SELECTOR)) === null || _a === void 0 ? void 0 : _a.focus();
+                (_b = menuRef.current.querySelector(FOCUSABLE_SELECTOR)) === null || _b === void 0 ? void 0 : _b.focus();
             }
         }
     }, [isMobile, isMobileMenuOpen]);
     const childrenArray = 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 => filterPrimaryNavItems(section, true)).filter(section => !!section && Children.count(section.props.children) > 0);
     const primarySections = sections.map(section => filterPrimaryNavItems(section, false)).filter(section => !!section && Children.count(section.props.children) > 0);
     const sectionsToRender = isMobile ? secondarySections : sections;
     const secondaryFooter = footer && filterPrimaryNavItems(footer, true);
     const primaryFooter = footer && filterPrimaryNavItems(footer, false);
-    const footerToRender = isMobile ? secondaryFooter : footer;
+    const footerToRender = isEditState ? editFooter : (isMobile ? secondaryFooter : footer);
     const primaryItems = [...primarySections, ...(primaryFooter ? [primaryFooter] : [])].flatMap(e => collectNavItems(e));
+    const editListItems = childrenArray.find(child => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.name) === "NavEditSection"; });
     const onSearchOpen = useCallback((isOpen) => {
         isOpen && onCollapseToggle && onCollapseToggle(false);
         setIsSearchOpen(isOpen || isMobile);
     }, [onCollapseToggle, setIsSearchOpen, isMobile]);
     const onMobileMenuToggle = useCallback(() => {
-        setIsMobileMenuOpen(!isMobileMenuOpen);
-    }, [isMobileMenuOpen, setIsMobileMenuOpen]);
+        onIsMobileMenuOpenToggle && onIsMobileMenuOpenToggle(!isMobileMenuOpen);
+    }, [isMobileMenuOpen, onIsMobileMenuOpenToggle]);
+    const onEditStateToggle = useCallback((isEdit) => {
+        isEdit && onCollapseToggle && onCollapseToggle(false);
+        editListItems && editFooter && setIsEditState(isEdit);
+    }, [onCollapseToggle, setIsEditState, editListItems, editFooter]);
     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) {
@@ -111,7 +121,7 @@ export const Nav = ({ children, className, collapsed = false, onCollapseToggle,
         if (wasMobile && !searchTerm.trim()) {
             setIsSearchOpen(false);
         }
-    }, [collapsed, setIsSearchOpen, setIsMobileMenuOpen, searchTerm, isMobile]);
+    }, [collapsed, setIsSearchOpen, onIsMobileMenuOpenToggle, searchTerm, isMobile]);
     useEffect(() => {
         onMenuVisibilityToggle === null || onMenuVisibilityToggle === void 0 ? void 0 : onMenuVisibilityToggle(!isMobile || isMobileMenuOpen);
     }, [isMobile, isMobileMenuOpen, onMenuVisibilityToggle]);
@@ -119,13 +129,17 @@ export const Nav = ({ children, className, collapsed = false, onCollapseToggle,
             collapsed,
             onCollapseToggle,
             searchOpen: isSearchOpen,
+            isEditState: isEditState,
+            onEditStateToggle,
             onSearchToggle: onSearchOpen,
             searchTerm,
             onSearch: setSearchTerm,
-            onNavigate: () => setIsMobileMenuOpen(false)
+            onNavigate: () => onIsMobileMenuOpenToggle && onIsMobileMenuOpenToggle(false)
         }, children: [(!isMobile || isMobileMenuOpen)
-                ? _jsxs("div", { ref: menuRef, className: classNames(["zen-nav", isMobile ? "zen-nav--mobile" : "", collapsed ? "zen-nav--collapsed" : "", className || ""]), children: [header ? cloneElement(header, Object.assign(Object.assign({}, header.props), { className: classNames(["zen-nav__header", header.props.className || ""]) })) : null, _jsx(NavContent, { children: sectionsToRender.map((section, index) => (_jsxs(Fragment, { children: [cloneElement(section, {
-                                        className: classNames(["zen-nav__section", section.props.className || ""])
-                                    }), isMobile || index < sectionsToRender.length - 1 ? _jsx(NavDivider, {}) : null] }, index))) }), footerToRender] })
-                : null, mobileBarContainer && isMobile && createPortal(_jsx(NavMobileBar, { onMenuToggle: onMobileMenuToggle, isMenuOpen: isMobileMenuOpen, children: primaryItems }), mobileBarContainer)] });
+                ? _jsxs("div", { ref: menuRef, className: classNames(["zen-nav", isMobile ? "zen-nav--mobile" : "", collapsed ? "zen-nav--collapsed" : "", className || ""]), children: [header ? cloneElement(header, Object.assign(Object.assign({}, header.props), { className: classNames(["zen-nav__header", header.props.className || ""]) })) : null, _jsx(NavContent, { children: isEditState
+                                ? editListItems
+                                : sectionsToRender.map((section, index) => (_jsxs(Fragment, { children: [cloneElement(section, {
+                                            className: classNames(["zen-nav__section", section.props.className || ""])
+                                        }), isMobile || index < sectionsToRender.length - 1 ? _jsx(NavDivider, {}) : null] }, index))) }), footerToRender] })
+                : null, mobileBarContainer && isMobile && createPortal(_jsx(NavMobileBar, { onMenuToggle: onMobileMenuToggle, isMenuOpen: isMobileMenuOpen, children: editListItems ? editListItems : primaryItems }), mobileBarContainer)] });
 };

package/esm/nav/navAddMenu/navAddMenu.js

@@ -9,11 +9,13 @@ import { IconClose } from "../../icons/iconClose";
 import { IconPlus } from "../../icons/iconPlus";
 import { Tooltip } from "../../tooltip/tooltip";
 import { useNavContext } from "../context/nav.context";
+import { generateId } from "../../commonHelpers/utils";
 export const NavAddMenu = ({ title, alignment, className, children }) => {
     const [isOpen, setIsOpen] = useState(false);
     const isMobile = useMobile();
     const { collapsed } = useNavContext();
     const triggerRef = useRef(null);
+    const triggerId = generateId();
     const validChildren = Children.toArray(children)
         .filter((child) => {
         const element = child;
@@ -26,6 +28,6 @@ export const NavAddMenu = ({ title, alignment, className, children }) => {
         ]),
         collapsed: false
     }));
-    return _jsx(NavItemContext, { value: { parentLevel: 2 }, children: _jsxs("div", { className: classNames(["zen-nav-header__actions", className || ""]), children: [_jsx(Tooltip, { trigger: _jsx(TextIconButton, { title: title, className: classNames(["zen-nav-footer__actions-icon", className || ""]), icon: isOpen && !isMobile ? IconClose : IconPlus, iconSize: "large", ref: triggerRef, onClick: () => setIsOpen(!isOpen) }), alignment: isMobile ? "left" : collapsed ? "right" : "top", children: title }), _jsx(ControlledMenu, { title: title, isOpen: isOpen, setIsOpen: setIsOpen, triggerRef: triggerRef, alignment: alignment, paddingX: 8, paddingY: 8, className: 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: 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 _jsx(NavItemContext, { value: { parentLevel: 2 }, children: _jsxs("div", { className: classNames(["zen-nav-header__actions", className || ""]), children: [_jsx(Tooltip, { trigger: _jsx(TextIconButton, { id: triggerId, title: title, className: classNames(["zen-nav-footer__actions-icon", className || ""]), icon: isOpen && !isMobile ? IconClose : IconPlus, iconSize: "large", ref: triggerRef, onClick: () => setIsOpen(!isOpen), role: !isMobile ? "menuitem" : undefined }), alignment: isMobile ? "left" : collapsed ? "right" : "top", children: title }), _jsx(ControlledMenu, { title: title, isOpen: isOpen, setIsOpen: setIsOpen, triggerRef: triggerRef, alignment: alignment, paddingX: 8, paddingY: 8, className: 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: 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 })] }) });
 };
 NavAddMenu.displayName = "NavAddMenu";

package/esm/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/esm/nav/navEditList/navEditList.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, useMemo, useRef } from "react";
+import { useDragAndDrop } from "../../list/hooks/useDragAndDrop";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { attachDndHandler } from "./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"
+};
+export const NavEditList = ({ children, className, onItemsChangeOrder, onBeforeItemDrag }) => {
+    const appsListRef = useRef(null);
+    const dragHandler = onItemsChangeOrder ? onItemsChangeOrder : () => { };
+    const { onDragStart } = useDragAndDrop(appsListRef, dragHandler, marksClassNames, onBeforeItemDrag);
+    const childrenArray = useMemo(() => onItemsChangeOrder ? Children.map(children, child => attachDndHandler(child, onDragStart)) : children, [children, onItemsChangeOrder, onDragStart]);
+    return _jsx("div", { className: classNames(["zen-nav-edit-list", className || ""]), ref: appsListRef, children: childrenArray });
+};

package/esm/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/esm/nav/navEditList/navEditListUtils.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement } from "react";
+import { NavActionItem } from "../navItem/navActionItem";
+import { IconGrab } from "../../icons/iconGrab";
+export const attachDndHandler = (item, onPointerDown) => {
+    if (item.type === NavActionItem) {
+        return cloneElement(item, Object.assign(Object.assign({}, item.props), { startNode: _jsx("div", { className: "zen-nav-item__dnd", onPointerDown: onPointerDown, children: _jsx(IconGrab, { size: "large" }) }) }));
+    }
+    return item;
+};

package/esm/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/esm/nav/navEditSection/navEditSection.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+export const NavEditSection = ({ children, className }) => _jsx("div", { className: classNames(["zen-nav-edit-section", className || ""]), children: children });

package/esm/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/esm/nav/navFooter/navEditFooter/navEditFooter.js

@@ -0,0 +1,101 @@
+import { injectString } from "../../../utils/localization/translationsDictionary";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../../../button/button";
+import { classNames } from "../../../commonHelpers/classNames/classNames";
+import { useLanguage } from "../../../utils/localization/useLanguage";
+import { useNavContext } from "../../context/nav.context";
+import { useCallback } from "react";
+import { useMobile } from "../../../commonHelpers/hooks/useMobile";
+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");
+export const NavEditFooter = ({
+  className,
+  handleSaveClick,
+  handleCancelClick
+}) => {
+  const {
+    onEditStateToggle
+  } = useNavContext();
+  const isMobile = useMobile();
+  const {
+    translate
+  } = useLanguage();
+  const onSaveClick = useCallback(() => {
+    onEditStateToggle === null || onEditStateToggle === void 0 ? void 0 : onEditStateToggle(false);
+    handleSaveClick();
+  }, [onEditStateToggle, handleSaveClick]);
+  const onCancelClick = useCallback(() => {
+    onEditStateToggle === null || onEditStateToggle === void 0 ? void 0 : onEditStateToggle(false);
+    handleCancelClick();
+  }, [onEditStateToggle, handleCancelClick]);
+  const navEditFooterClassNames = 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 = classNames(["zen-nav-edit-footer__button", isMobile ? "zen-nav-edit-footer__button--with-margin" : ""]);
+  const saveButton = _jsx(Button, {
+    onClick: onSaveClick,
+    className: saveButtonClassNames,
+    type: "primary",
+    children: translate("Save")
+  });
+  const cancelButton = _jsx(Button, {
+    onClick: onCancelClick,
+    className: "zen-nav-edit-footer__button",
+    type: "secondary",
+    children: translate("Cancel")
+  });
+  return _jsxs("div", {
+    className: navEditFooterClassNames,
+    children: [isMobile ? saveButton : cancelButton, isMobile ? cancelButton : saveButton]
+  });
+};
+NavEditFooter.displayName = "NavEditFooter";

package/esm/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/esm/nav/navFooter/navFooter.js

@@ -52,6 +52,7 @@ const NavFooterBottom = ({
   });
   return _jsx("div", {
     className: classNames(["zen-nav-footer__bottom", isMobile ? "zen-nav-footer__bottom--mobile" : "", className || ""]),
+    role: "menu",
     children: childrenArray.map(child => {
       const childElement = child;
       return cloneElement(childElement, Object.assign(Object.assign({}, childElement.props), {
@@ -65,14 +66,14 @@ const NavFooterBottom = ({
 };
 NavFooterBottom.displayName = "NavFooterBottom";
 const NavFooterEditButton = ({
-  className,
-  onClick
+  className
 }) => {
   const {
     translate
   } = useLanguage();
   const {
-    collapsed
+    collapsed,
+    onEditStateToggle
   } = useNavContext();
   const isMobile = useMobile();
   return _jsx(NavItem, {
@@ -80,7 +81,7 @@ const NavFooterEditButton = ({
     title: translate("Edit Navigation"),
     collapsed: !isMobile,
     primaryIcon: IconEdit,
-    onClick: () => onClick && onClick(),
+    onClick: () => onEditStateToggle === null || onEditStateToggle === void 0 ? void 0 : onEditStateToggle(true),
     menuAlignment: "right-bottom",
     tooltipAlignment: collapsed ? "right" : "top"
   }, "edit-button");

package/esm/nav/navFooter/navFooterAction/navFooterAction.js

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

package/esm/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/esm/nav/navItem/navActionItem.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+export 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 = classNames(["zen-nav-item", className || ""]);
+    return (_jsxs("div", { className: itemClasses, id: id, children: [_jsx("div", { className: "zen-nav-item__main", children: _jsxs("div", { className: "zen-nav-item__content-left", children: [startNode ? _jsx("span", { className: "zen-nav-item__icon", children: startNode }) : null, PrimaryIconComponent ? _jsx(PrimaryIconComponent, { size: "huge" }) : null, _jsx("span", { className: "zen-nav-item__title", children: _jsx("span", { className: "zen-nav-item__title-text", children: title }) })] }) }), EndButtonIconComponent && endButtonTitle && onEndButtonClick
+                ? _jsx("button", { type: "button", className: "zen-nav-item__action", "aria-label": endButtonTitle, title: endButtonTitle, onClick: onEndButtonClick, children: _jsx(EndButtonIconComponent, { size: "huge" }) })
+                : null] }));
+};
+NavActionItem.displayName = "NavActionItem";

package/esm/nav/navItem/navItem.js

@@ -19,6 +19,7 @@ import { Tooltip } from "../../tooltip/tooltip";
 import { ControlledMenu } from "../../menu/controlledMenu";
 import { useNavContext } from "../context/nav.context";
 import { useMobile } from "../../commonHelpers/hooks/useMobile";
+import { generateId } from "../../commonHelpers/utils";
 const ICON_SIZE = "huge";
 const SUBMENU_ICON_SIZE = "large";
 export const NavItemContext = createContext({ parentLevel: 0 });
@@ -32,7 +33,7 @@ const NavItemContent = ({ primaryIcon, secondaryIcon, isBeta, counter, collapsed
     const primaryIconComponent = primaryIcon ? (_jsx("span", { ref: primaryIconRef, className: classNames(["zen-nav-item__icon", counter ? "zen-nav-item__icon--with-counter" : "", iconClass || ""]), children: PrimaryIconComponent ? _jsx(PrimaryIconComponent, { size: iconSize }) : primaryIcon })) : null;
     return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "zen-nav-item__content-left", children: [isBeta && !collapsed ? (_jsx("span", { className: "zen-nav-item__beta", children: _jsx(IconBeta, { size: "big" }) })) : null, primaryIconComponent, SecondaryIconComponent && !collapsed ? (_jsx("span", { className: "zen-nav-item__icon", children: _jsx(SecondaryIconComponent, { size: iconSize }) })) : null, !collapsed ? _jsx("span", { className: "zen-nav-item__title", children: children }) : null] }), !collapsed && (counter || hasSubmenu) ? (_jsxs("div", { className: "zen-nav-item__content-right", children: [counter ? _jsx("div", { className: "zen-nav-item__counter", children: counter }) : null, hasSubmenu ? _jsx(IconChevronRight, { className: "zen-nav-item__title-icon", size: iconSize }) : null] })) : null] }));
 };
-const NavItemAction = ({ actionIcon, actionIconTitle = "", onActionIconClick, collapsed, level = 1 }) => {
+const NavItemAction = ({ actionIcon, actionIconTitle = "", onActionIconClick, collapsed, isMenuItem, level = 1 }) => {
     const ActionIconComponent = actionIcon;
     const iconSize = level > 1 ? SUBMENU_ICON_SIZE : ICON_SIZE;
     if (!ActionIconComponent || collapsed) {
@@ -42,7 +43,7 @@ const NavItemAction = ({ actionIcon, actionIconTitle = "", onActionIconClick, co
         e.stopPropagation();
         onActionIconClick === null || onActionIconClick === void 0 ? void 0 : onActionIconClick(e);
     };
-    return (_jsx("button", { type: "button", className: "zen-nav-item__action", onClick: handleActionIconClick, "aria-label": actionIconTitle, title: actionIconTitle, children: _jsx(ActionIconComponent, { size: iconSize }) }));
+    return (_jsx("button", { type: "button", className: "zen-nav-item__action", onClick: handleActionIconClick, "aria-label": actionIconTitle, title: actionIconTitle, role: isMenuItem ? "menuitem" : undefined, children: _jsx(ActionIconComponent, { size: iconSize }) }));
 };
 const getWrapperClassName = ({ className, collapsed, active, isMobile, hasNested, isNested, isLink }) => classNames([
     "zen-nav-item",
@@ -65,7 +66,7 @@ const LinkNavItem = (_a) => {
             onNavigate && onNavigate();
         }, className: "zen-link--light zen-nav-item__main", children: _jsxs(NavItemContent, Object.assign({ title: title, collapsed: collapsed, level: currentLevel }, rest, { children: [_jsx("span", { className: "zen-nav-item__title-text", children: title }), isExternalLink && !collapsed ? _jsx(IconOpen2, { className: "zen-nav-item__title-icon", size: ICON_SIZE }) : null] })) }));
     const item = collapsed ? (_jsx(Tooltip, { trigger: linkElement, alignment: tooltipAlignment, children: title })) : (linkElement);
-    return (_jsxs("div", { className: getWrapperClassName({ className, collapsed, active, isMobile, isLink: true }), children: [item, _jsx(NavItemAction, { actionIcon: actionIcon, actionIconTitle: actionIconTitle, onActionIconClick: onActionIconClick, collapsed: collapsed, level: currentLevel })] }));
+    return (_jsxs("div", { className: getWrapperClassName({ className, collapsed, active, isMobile, isLink: true }), children: [item, _jsx(NavItemAction, { actionIcon: actionIcon, actionIconTitle: actionIconTitle, onActionIconClick: onActionIconClick, collapsed: collapsed, level: currentLevel, isMenuItem: isMenuItem })] }));
 };
 LinkNavItem.displayName = "LinkNavItem";
 const ButtonNavItem = (_a) => {
@@ -97,7 +98,8 @@ const ButtonNavItem = (_a) => {
     };
     const isMobile = useMobile();
     const isActive = active || (hasNestedItems && menuOpen);
-    const buttonElement = (_jsx("button", { ref: triggerRef, "aria-label": title, title: title, tabIndex: tabIndex, role: isMenuItem ? "menuitem" : undefined, className: "zen-nav-item__main", onClick: handleClick, onKeyDown: handleKeyPress, children: _jsx(NavItemContent, Object.assign({ title: title, collapsed: collapsed, hasSubmenu: hasNestedItems, level: currentLevel }, rest, { children: _jsx("span", { className: "zen-nav-item__title-text", children: title }) })) }));
+    const triggerId = generateId();
+    const buttonElement = (_jsx("button", { id: triggerId, ref: triggerRef, "aria-label": title, title: title, tabIndex: tabIndex, role: isMenuItem ? "menuitem" : undefined, className: "zen-nav-item__main", onClick: handleClick, onKeyDown: handleKeyPress, children: _jsx(NavItemContent, Object.assign({ title: title, collapsed: collapsed, hasSubmenu: hasNestedItems, level: currentLevel }, rest, { children: _jsx("span", { className: "zen-nav-item__title-text", children: title }) })) }));
     const trigger = collapsed ? (_jsx(Tooltip, { trigger: buttonElement, alignment: tooltipAlignment, children: title })) : (buttonElement);
     if (hasNestedItems) {
         // Process children to add appropriate level classes while allowing unlimited nesting
@@ -118,9 +120,9 @@ const ButtonNavItem = (_a) => {
             setMenuOpen(false);
             closeParentMenu && closeParentMenu();
         };
-        return (_jsxs("div", { className: getWrapperClassName({ className, collapsed, active: isActive, isMobile, hasNested: hasNestedItems }), children: [trigger, _jsx(NavItemContext, { value: { parentLevel: currentLevel, closeParentMenu: closeLevelMenu }, children: _jsx(ControlledMenu, { triggerRef: triggerRef, isOpen: menuOpen, setIsOpen: setMenuOpen, title: title, alignment: menuAlignment, className: classNames([popupClass, isMobile ? popupClassMobile : ""]), listClassName: classNames([popupListClass, isMobile ? popupListClassMobile : ""]), children: processedChildren }) })] }));
+        return (_jsxs("div", { className: getWrapperClassName({ className, collapsed, active: isActive, isMobile, hasNested: hasNestedItems }), children: [trigger, _jsx(NavItemContext, { value: { parentLevel: currentLevel, closeParentMenu: closeLevelMenu }, children: _jsx(ControlledMenu, { triggerRef: triggerRef, isOpen: menuOpen, setIsOpen: setMenuOpen, title: title, alignment: menuAlignment, className: classNames([popupClass, isMobile ? popupClassMobile : ""]), listClassName: classNames([popupListClass, isMobile ? popupListClassMobile : ""]), ariaLabelledby: triggerId, children: processedChildren }) })] }));
     }
-    return (_jsxs("div", { className: getWrapperClassName({ className, collapsed, active: isActive, isMobile, hasNested: hasNestedItems }), children: [trigger, _jsx(NavItemAction, { actionIcon: actionIcon, actionIconTitle: actionIconTitle, onActionIconClick: onActionIconClick, collapsed: collapsed, level: currentLevel })] }));
+    return (_jsxs("div", { className: getWrapperClassName({ className, collapsed, active: isActive, isMobile, hasNested: hasNestedItems }), children: [trigger, _jsx(NavItemAction, { actionIcon: actionIcon, actionIconTitle: actionIconTitle, onActionIconClick: onActionIconClick, collapsed: collapsed, level: currentLevel, isMenuItem: isMenuItem })] }));
 };
 ButtonNavItem.displayName = "ButtonNavItem";
 /**

package/esm/nav/navMobileBar/navMobileBar.js

@@ -62,6 +62,7 @@ export const NavMobileBar = ({
   });
   return _jsxs("div", {
     className: mobileBarClassNames,
+    role: "menu",
     children: [items, _jsx(NavItem, {
       className: "zen-nav-item--mobile-bar",
       title: translate("More"),

package/esm/nav/utils/navUtils.js

@@ -1,19 +1,27 @@
 import { Children, isValidElement } from "react";
+import { zen } from "../../utils/zen";
 export const navHeaderImage = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIzIiBoZWlnaHQ9IjE1IiB2aWV3Qm94PSIwIDAgMTIzIDE1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNDcuNDE3OCA1LjY2MDFIMzkuNTkxNVY2Ljc0NTI2SDQ1LjM1MjdDNDUuNDE5MiA3LjA2NjkzIDQ1LjQ1MjggNy4yNzc1IDQ1LjQ1MjggNy4zNzA5QzQ1LjQ1MjggOC41OTE3NyA0NS4xOTczIDkuMzU1MjUgNDQuNjk0IDkuNjM5OTdDNDQuMTg1NCA5LjkyODEzIDQyLjgyODkgMTAuMDczOSA0MC42NjIzIDEwLjA3MzlDMzcuODI1NyAxMC4wNzM5IDM2LjA1NzggOS45MTk3IDM1LjQwNzkgOS42MTUxNEMzNC43NjUzIDkuMzE0NDkgMzQuNDM5NyA4LjQ4ODM4IDM0LjQzOTcgNy4xNTkwM0wzNC40MjY2IDUuNjMwOThMMzQuNDUzIDQuMjExNTVDMzQuNDUzIDIuOTAyNCAzNC43NDYyIDIuMDc0MzkgMzUuMzI0MiAxLjc1MDMzQzM1LjkwNzcgMS40MjMxOSAzNy4zOTE1IDEuMjU3MzEgMzkuNzM0MiAxLjI1NzMxQzQyLjI3MjQgMS4yNTczMSA0My44NjMxIDEuMzYwOTMgNDQuNDYyIDEuNTY0ODRDNDUuMDQ5IDEuNzY1MTkgNDUuMzQ2NyAyLjI5OTU3IDQ1LjM0NjcgMy4xNTMwMVYzLjQ1MjQ2SDQ3LjQyMTlWMy4wMTE4NEM0Ny40MjE5IDEuODE2NCA0Ni45NjM3IDEuMDM0NjIgNDYuMDYwMyAwLjY4ODIyN0M0NS4xNjY1IDAuMzQ1NzU4IDQzLjE1ODUgMC4xNzIwMjggNDAuMDkyIDAuMTcyMDI4QzM3LjAzMjQgMC4xNzIwMjggMzQuOTY3NSAwLjQzNzI1NyAzMy45NTQxIDAuOTYwMjMxQzMyLjkzNDUgMS40ODcwMSAzMi40MTc2IDIuNTU5NTcgMzIuNDE3NiA0LjE0ODFMMzIuNDA0MyA1LjA5NzMyTDMyLjQxNzYgNi42NzMxM0MzMi40MTc2IDguNTYyODkgMzIuODgyNiA5Ljc5NzMgMzMuNzk5NyAxMC4zNDI0QzM0LjcxMjEgMTAuODg0MSAzNi43ODg3IDExLjE1OSAzOS45NzI3IDExLjE1OUM0My4zNDA5IDExLjE1OSA0NS40NTU0IDEwLjkyNjggNDYuMjU3NyAxMC40NjgyQzQ3LjA2NTMgMTAuMDA2NiA0Ny40NzQ4IDguNzkyODMgNDcuNDc0OCA2Ljg2MTM2QzQ3LjQ3NDggNi4zNjIzOSA0Ny40NTY5IDUuOTY4MTEgNDcuNDIxNCA1LjY4OTMzTDQ3LjQxNzggNS42NjAxWiIgZmlsbD0iIzI1NDc3QiIvPgo8cGF0aCBkPSJNNDkuNDEyMSAxMS4wNDk4SDYxLjExNDVWOS45NjQ2M0g1MS41MjcxVjYuMDMyMjlINjAuNzE2NlY0Ljk0NzI1SDUxLjUyNzFWMS4zNjc2SDYxLjExNDVWMC4yODI0NEg0OS40MTIxVjExLjA0OThaIiBmaWxsPSIjMjU0NzdCIi8+CjxwYXRoIGQ9Ik03Ni44NTk5IDEuMDY0OEM3NS45OTk4IDAuNDcyNTUgNzMuODMzIDAuMTcyMDI4IDcwLjQxOTcgMC4xNzIwMjhDNjcuNDY2NSAwLjE3MjAyOCA2NS40MTkyIDAuNDM1NzEzIDY0LjMzNjQgMC45NTU5NTNDNjMuMjQ1NSAxLjQ4IDYyLjY5MjUgMi40Njk3MyA2Mi42OTI1IDMuODk2ODlMNjIuNjY2IDQuOTA5MDlWNS42NjE2NEM2Mi42NjYgOC4xMjI2MiA2My4wOTIzIDkuNjcxOTQgNjMuOTMyNyAxMC4yNjYxQzY0Ljc3MTEgMTAuODU4NSA2Ni45NTM3IDExLjE1OSA3MC40MTk3IDExLjE1OUM3My45MDQgMTEuMTU5IDc2LjA4ODggMTAuODU2MSA3Ni45MTM5IDEwLjI1OEM3Ny43NDExIDkuNjU4NTEgNzguMTYwNiA4LjA2NDUyIDc4LjE2MDYgNS41MjA1OUM3OC4xNjA2IDMuMTU4NDggNzcuNzIzMSAxLjY1OTQzIDc2Ljg1OTkgMS4wNjQ4Wk02NS40MDQ1IDEuODEzNzlDNjUuODgxOCAxLjQ0NDU4IDY3LjU2NDUgMS4yNTcxOSA3MC40MDY3IDEuMjU3MTlDNzIuODgxNiAxLjI1NzE5IDc0LjQ3MzEgMS40MTY5IDc1LjEzNjkgMS43MzE4Qzc1Ljc5MzEgMi4wNDMxMyA3Ni4xMjUyIDIuNzkwMjIgNzYuMTI1MiAzLjk1Mjk4TDc2LjEzODYgNC45NjM4N1Y1LjY2MTc2Qzc2LjEzODYgNy44NTIyOCA3NS44OTc1IDkuMTQ5NTYgNzUuNDIyMSA5LjUxNzQ2Qzc0Ljk0NDggOS44ODY5IDczLjI1NzQgMTAuMDczOSA3MC40MDY3IDEwLjA3MzlDNjcuNTY0NSAxMC4wNzM5IDY1Ljg4MTYgOS44ODcwMiA2NS40MDQ1IDkuNTE3NDZDNjQuOTI5MiA5LjE0OTQ0IDY0LjY4ODEgNy44NTIxNiA2NC42ODgxIDUuNjYxNzZDNjQuNjg4MSAzLjQ3NjM1IDY0LjkyOTIgMi4xODE2OSA2NS40MDQ1IDEuODEzNzlaIiBmaWxsPSIjMjU0NzdCIi8+CjxwYXRoIGQ9Ik05Mi44NDYzIDAuMjgyNDRINzguOTgyNFYxLjQ2OTQ0SDg0Ljg4MzVWMTEuMDQ5OEg4Ni45OTg2VjEuNDY5NDRIOTIuODQ2M1YwLjI4MjQ0WiIgZmlsbD0iIzI1NDc3QiIvPgo8cGF0aCBkPSJNMTAwLjMxOCAwLjI4MjQ0SDk3LjQxMTVMOTAuNzQwMiAxMS4wNDk4SDkyLjk4NTRMOTQuMzc3NCA4Ljc4NDE3SDEwMy40OThMMTA0LjkwMyAxMS4wNDk4SDEwNy4xMjJMMTAwLjMyOSAwLjI5OTA3NkwxMDAuMzE4IDAuMjgyNDRaTTEwMi44NjEgNy44MDg4MUg5NS4wMDFMOTguOTA0OCAxLjM3MTE3TDEwMi44NjEgNy44MDg4MVoiIGZpbGw9IiMyNTQ3N0IiLz4KPHBhdGggZD0iTTEyMC4yMDcgNS40MDM2OEMxMjEuNjkxIDUuMDczOTMgMTIyLjQ0MiA0LjMxNDYgMTIyLjQ0MiAzLjE0NTU0QzEyMi40NDIgMS45NzI5MiAxMjIuMDkxIDEuMTkyOTIgMTIxLjM5NyAwLjgyNzc1NEMxMjAuNzA5IDAuNDY1Nzk2IDExOS4yMzcgMC4yODI0NCAxMTcuMDIyIDAuMjgyNDRIMTA4Ljk3N1YxMS4wNDk4SDExNy44ODRDMTE5Ljc1NyAxMS4wNDk4IDEyMS4wOTEgMTAuODE1OCAxMjEuODUgMTAuMzU0MkMxMjIuNjEzIDkuODkwMDEgMTIzIDkuMDc2MzggMTIzIDcuOTM1ODRDMTIzIDYuNTQ2MzYgMTIyLjA2IDUuNjk0ODIgMTIwLjIwNyA1LjQwMzY4Wk0xMTkuNzA0IDQuNjI5NUMxMTkuMjIgNC44NjYzMyAxMTguMTE4IDQuOTg2MjMgMTE2LjQyNiA0Ljk4NjIzSDExMS4wOTJWMS4zNjc0OEgxMTYuOTgzQzExOC40MjggMS4zNjc0OCAxMTkuMzc1IDEuNDczIDExOS43OTYgMS42ODA5NkMxMjAuMjExIDEuODg1NTggMTIwLjQyIDIuMzQ2NTMgMTIwLjQyIDMuMDUxNTVDMTIwLjQyIDMuODY1NjYgMTIwLjE4IDQuMzk2NTkgMTE5LjcwNCA0LjYyOTVaTTExMS4wOTIgNi4wNzEyN0gxMTYuMzJDMTE4LjQ2MSA2LjA3MTI3IDExOS43ODkgNi4xNzk3NiAxMjAuMjY5IDYuMzkzM0MxMjAuNzM5IDYuNjAzMzkgMTIwLjk3OCA3LjE4NTU1IDEyMC45NzggOC4xMjM3MUMxMjAuOTc4IDguODc1NDMgMTIwLjc0MSA5LjM3MzgxIDEyMC4yNzQgOS42MDM5OUMxMTkuOCA5LjgzODIgMTE4Ljc3NyA5Ljk1NzAzIDExNy4yMzUgOS45NTcwM0wxMTUuMzkxIDkuOTY0NTJIMTExLjA5MlY2LjA3MTI3WiIgZmlsbD0iIzI1NDc3QiIvPgo8cGF0aCBkPSJNMCAwLjI3NzM1MUgyLjk4NzI1VjEuNTE1OEMzLjQ5ODA3IDEuMDA3MjEgNC4wNjYzOCAwLjYyNzU0NCA0LjY4OTk1IDAuMzc2NDU1QzUuMzE0NyAwLjEyNTYwNCA1Ljk5NDg0IDAgNi43MzI3MiAwQzcuNDc2OTEgMCA4LjE0ODc4IDAuMTY1MjkzIDguNzQ3MTQgMC40OTUyODZDOS4zNDYxNyAwLjgyNTUxNiA5LjgyNzg2IDEuMzA3ODUgMTAuMTkzMyAxLjk0MTgxQzEwLjY2NzcgMS4zMDc4NSAxMS4yNDk2IDAuODI1NTE2IDExLjkzOTggMC40OTUyODZDMTIuNjMgMC4xNjUyOTMgMTMuMzgzNSAwIDE0LjIwMTQgMEMxNS4wNDc1IDAgMTUuNzkyNiAwLjE3ODI0NiAxNi40MzQ2IDAuNTM0OTc1QzE3LjA3NzYgMC44OTE3MDQgMTcuNTM5IDEuMzU3MjggMTcuODIwNyAxLjkzMjA3QzE4LjEwMTggMi41MDY2MSAxOC4yNDIgMy40NDEyMSAxOC4yNDIgNC43MzU3NVYxMS4wNTY1SDE1LjIzMjZWNS41ODc4OUMxNS4yMzI2IDQuMzY1OTUgMTUuMDY0OSAzLjUzODU0IDE0LjcyOTIgMy4xMDYxMUMxNC4zOTM4IDIuNjczMzMgMTMuODkwMyAyLjQ1NzE4IDEzLjIxOTEgMi40NTcxOEMxMi43MDg1IDIuNDU3MTggMTIuMjUwOSAyLjU4OTIgMTEuODQ1NyAyLjg1MzI0QzExLjQ0MSAzLjExNzUyIDExLjE0IDMuNDgyMzMgMTAuOTQzIDMuOTQ4MDNDMTAuNzQ2MSA0LjQxMzcyIDEwLjY0NzYgNS4xNjE2NCAxMC42NDc2IDYuMTkxOVYxMS4wNTY0SDcuNjM4MjJWNS44MzU1M0M3LjYzODIyIDQuODcxMjIgNy41NTk5OSA0LjE3MjczIDcuNDAyMSAzLjc0MDE5QzcuMjQ1MTIgMy4zMDc0MSA3LjAwOSAyLjk4NTUgNi42OTUzMiAyLjc3NDFDNi4zODA3MSAyLjU2MjU4IDYuMDAwNzQgMi40NTcxOCA1LjU1NDM2IDIuNDU3MThDNS4wNTY2NiAyLjQ1NzE4IDQuNjA1MDMgMi41OTA4NiA0LjE5OTQ3IDIuODU4MzVDMy43OTMzOCAzLjEyNTk2IDMuNDg5OTMgMy41MDA1MSAzLjI4OTI1IDMuOTgyODRDMy4wODc2NSA0LjQ2NDk0IDIuOTg3MjUgNS4yMjQ1IDIuOTg3MjUgNi4yNjE2NlYxMS4wNTY1SDBWMC4yNzczNTFaIiBmaWxsPSIjMDA3OEQzIi8+CjxwYXRoIGQ9Ik0xOC44MTg0IDAuMjc3MzY3SDIxLjg3MTJMMjQuOTYzOSA3LjA0MDg1TDI4LjM3NjkgMC4yNzczNjdIMzEuNDM4M0wyMy45ODE2IDE1SDIwLjg5NjZMMjMuMzQ0IDEwLjI1MjdMMTguODE4NCAwLjI3NzM2N1oiIGZpbGw9IiMwMDc4RDMiLz4KPC9zdmc+Cg==";
 export const navHeaderImageCollapsed = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOCIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDM4IDEzIiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTE1LjE5OTcgMC4yMjU0NTdIMTcuNjAyOEwyMC4wMzczIDYuMDk0TDIyLjcyNCAwLjIyNTQ1N0gyNS4xMzM5TDE5LjI2NDEgMTNIMTYuODM1NkwxOC43NjIyIDguODgwODhMMTUuMTk5NyAwLjIyNTQ1N1oiIGZpbGw9IiMwMDc4RDMiLz4KPHBhdGggZD0iTTAuMzg2NzE5IDAuMjQwNjUySDIuNzM4MjVWMS4zMTUyM0MzLjE0MDM2IDAuODczOTM1IDMuNTg3NzMgMC41NDQ1MDggNC4wNzg2IDAuMzI2NjQzQzQuNTcwMzkgMC4xMDg5ODQgNS4xMDU3OSAwIDUuNjg2NjUgMEM2LjI3MjQ2IDAgNi44MDEzNSAwLjE0MzQyMiA3LjI3MjM4IDAuNDI5NzVDNy43NDM5MiAwLjcxNjI4NCA4LjEyMzEgMS4xMzQ4IDguNDEwNzQgMS42ODQ4N0M4Ljc4NDI0IDEuMTM0OCA5LjI0MjI1IDAuNzE2Mjg0IDkuNzg1NiAwLjQyOTc1QzEwLjMyODkgMC4xNDM0MjIgMTAuOTIyMSAwIDExLjU2NTkgMEMxMi4yMzIgMCAxMi44MTg1IDAuMTU0NjYgMTMuMzIzOCAwLjQ2NDE4OEMxMy44MyAwLjc3MzcxNSAxNC4xOTMzIDEuMTc3NjkgMTQuNDE1IDEuNjc2NDJDMTQuNjM2MyAyLjE3NDk0IDE0Ljc0NjYgMi45ODU4NyAxNC43NDY2IDQuMTA5MTJWOS41OTM0OEgxMi4zNzc3VjQuODQ4NUMxMi4zNzc3IDMuNzg4MjUgMTIuMjQ1NiAzLjA3MDMyIDExLjk4MTQgMi42OTUxMUMxMS43MTczIDIuMzE5NiAxMS4zMjEgMi4xMzIwNSAxMC43OTI2IDIuMTMyMDVDMTAuMzkwNyAyLjEzMjA1IDEwLjAzMDUgMi4yNDY2IDkuNzExNTIgMi40NzU3QzkuMzkyOTkgMi43MDUwMSA5LjE1NTk4IDMuMDIxNTUgOS4wMDA4OSAzLjQyNTYzQzguODQ1OTIgMy44Mjk3IDguNzY4NDMgNC40Nzg2NiA4Ljc2ODQzIDUuMzcyNTlWOS41OTMzOEg2LjM5OTQ0VjUuMDYzMzhDNi4zOTk0NCA0LjIyNjY2IDYuMzM3ODYgMy42MjA2IDYuMjEzNTcgMy4yNDUyOUM2LjA5IDIuODY5NzggNS45MDQxMyAyLjU5MDQ2IDUuNjU3MiAyLjQwNzAzQzUuNDA5NTQgMi4yMjM1IDUuMTEwNDQgMi4xMzIwNSA0Ljc1OTA1IDIuMTMyMDVDNC4zNjcyNyAyLjEzMjA1IDQuMDExNzUgMi4yNDgwNCAzLjY5MjUgMi40ODAxNEMzLjM3MjgzIDIuNzEyMzMgMy4xMzM5NiAzLjAzNzMzIDIuOTc1OTggMy40NTU4NEMyLjgxNzI5IDMuODc0MTQgMi43MzgyNSA0LjUzMzIgMi43MzgyNSA1LjQzMzEyVjkuNTkzNDhIMC4zODY3MTlWMC4yNDA2NTJaIiBmaWxsPSIjMDA3OEQzIi8+CjxwYXRoIGQ9Ik0zNy41Njg1IDQuODc0NjhIMzEuNDA3N1Y1LjgxNjI2SDM1Ljk0MjlDMzUuOTk1MiA2LjA5NTM3IDM2LjAyMTYgNi4yNzgwNyAzNi4wMjE2IDYuMzU5MTJDMzYuMDIxNiA3LjQxODQ0IDM1LjgyMDYgOC4wODA5IDM1LjQyNDMgOC4zMjc5NEMzNS4wMjQgOC41Nzc5OCAzMy45NTYyIDguNzA0NDkgMzIuMjUwNiA4LjcwNDQ5QzMwLjAxNzcgOC43MDQ0OSAyOC42MjYgOC41NzA2NiAyOC4xMTQ0IDguMzA2MzlDMjcuNjA4NiA4LjA0NTUzIDI3LjM1MjMgNy4zMjg3MyAyNy4zNTIzIDYuMTc1MjhMMjcuMzQxOSA0Ljg0OTQyTDI3LjM2MjcgMy42MTc4MUMyNy4zNjI3IDIuNDgxODggMjcuNTkzNSAxLjc2MzQzIDI4LjA0ODUgMS40ODIyNkMyOC41MDc5IDEuMTk4NDEgMjkuNjc1OSAxLjA1NDQ3IDMxLjUyIDEuMDU0NDdDMzMuNTE4MSAxLjA1NDQ3IDM0Ljc3MDIgMS4xNDQzOCAzNS4yNDE3IDEuMzIxMzFDMzUuNzAzOCAxLjQ5NTE1IDM1LjkzODEgMS45NTg4MiAzNS45MzgxIDIuNjk5MzNWMi45NTkxNkgzNy41NzE3VjIuNTc2ODRDMzcuNTcxNyAxLjUzOTU5IDM3LjIxMSAwLjg2MTI0NiAzNi40OTk5IDAuNTYwNjlDMzUuNzk2MyAwLjI2MzUzNSAzNC4yMTU2IDAuMTEyNzkzIDMxLjgwMTcgMC4xMTI3OTNDMjkuMzkzMiAwLjExMjc5MyAyNy43Njc3IDAuMzQyOTI4IDI2Ljk3IDAuNzk2NzAxQzI2LjE2NzQgMS4yNTM3NyAyNS43NjA0IDIuMTg0NDIgMjUuNzYwNCAzLjU2Mjc1TDI1Ljc1IDQuMzg2MzdMMjUuNzYwNCA1Ljc1MzY3QzI1Ljc2MDQgNy4zOTMzOCAyNi4xMjY1IDguNDY0NDYgMjYuODQ4NSA4LjkzNzQxQzI3LjU2NjYgOS40MDc0NyAyOS4yMDE0IDkuNjQ1OTYgMzEuNzA3OCA5LjY0NTk2QzM0LjM1OTIgOS42NDU5NiAzNi4wMjM3IDkuNDQ0NDkgMzYuNjU1MyA5LjA0NjZDMzcuMjkxIDguNjQ2MDMgMzcuNjEzMyA3LjU5Mjg5IDM3LjYxMzMgNS45MTY5OUMzNy42MTMzIDUuNDg0MDUgMzcuNTk5MyA1LjE0MTk0IDM3LjU3MTMgNC45MDAwNUwzNy41Njg1IDQuODc0NjhaIiBmaWxsPSIjMjU0NzdCIi8+Cjwvc3ZnPg==";
 // Detect if scrollbar is overlay by checking if it takes up space
 export const detectOverlayScrollbar = () => {
-    const outer = document.createElement("div");
+    var _a, _b, _c, _d;
+    const outer = (_a = zen.document) === null || _a === void 0 ? void 0 : _a.createElement("div");
+    if (!outer) {
+        return false;
+    }
     outer.style.visibility = "hidden";
     outer.style.overflow = "scroll";
     outer.style.width = "100px";
     outer.style.position = "absolute";
-    document.body.appendChild(outer);
-    const inner = document.createElement("div");
+    (_b = zen.document) === null || _b === void 0 ? void 0 : _b.body.appendChild(outer);
+    const inner = (_c = zen.document) === null || _c === void 0 ? void 0 : _c.createElement("div");
+    if (!inner) {
+        return false;
+    }
     inner.style.width = "100%";
     outer.appendChild(inner);
     const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
-    document.body.removeChild(outer);
+    (_d = zen.document) === null || _d === void 0 ? void 0 : _d.body.removeChild(outer);
     // If scrollbarWidth is 0, the scrollbar is overlay (doesn't take space)
     return scrollbarWidth === 0;
 };

package/esm/pageHeader/pageHeader.d.ts

@@ -1,6 +1,6 @@
 import "./pageHeader.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
-import { ReactElement } from "react";
+import React, { ReactElement } from "react";
 import { IPageHeaderFilters } from "./pageHeaderFilters";
 import { IPageHeaderActions } from "./pageHeaderActions";
 export interface IPageHeader extends IZenComponentProps {
@@ -12,5 +12,5 @@ interface IPageHeaderComponents {
 }
 export declare const PageHeaderDisplayName = "PageHeader";
 export declare const PageHeaderInner: React.FC<IPageHeader>;
-export declare const PageHeader: import("react").FC<IPageHeader> & IPageHeaderComponents;
+export declare const PageHeader: React.FC<IPageHeader> & IPageHeaderComponents;
 export {};

package/esm/pageHeader/pageHeader.js

@@ -5,11 +5,13 @@ import { regulatePageHeaderChildren } from "./pageHeaderHelpers";
 import { PageHeaderFilters } from "./pageHeaderFilters";
 import { PageHeaderActions } from "./pageHeaderActions";
 import { HeaderCustomContent } from "../header/components/collapsedItemsControl/collapsedItemsControl";
+import { useMobileClassName } from "../utils/theme/useMobileClassName";
 export const PageHeaderDisplayName = "PageHeader";
 export const PageHeaderInner = ({ className, children }) => {
     const [filters, actions] = useMemo(() => regulatePageHeaderChildren(children), [children]);
+    const pageHeaderMobileClassName = useMobileClassName("zen-page-header-component");
     const [content, setContent] = useState(null);
-    return _jsx("div", { className: classNames(["zen-page-header-component", className || ""]), children: _jsxs(HeaderCustomContent.Provider, { value: { content, setContent }, children: [filters.length > 0 ? filters : _jsx(PageHeaderFilters, { className: "zen-page-header-component__filters--empty" }), actions] }) });
+    return (_jsx("div", { className: classNames(["zen-page-header-component", pageHeaderMobileClassName || "", className || ""]), children: _jsxs(HeaderCustomContent.Provider, { value: { content, setContent }, children: [filters.length > 0 ? filters : _jsx(PageHeaderFilters, { className: "zen-page-header-component__filters--empty" }), actions] }) }));
 };
 export const PageHeader = memo(PageHeaderInner);
 PageHeader.Filters = PageHeaderFilters;

package/esm/pageHeader/pageHeaderActions.js

@@ -2,27 +2,34 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { isNamedChildComponent } from "../header/headerHelpers";
+import { useMobile } from "../commonHelpers/hooks/useMobile";
 import React from "react";
 import { PageToolbarCollapsedItemsControl } from "../header/components/collapsedItemsControl/collapsedItemsControl";
 import { PageHeaderButtonDisplayName } from "./pageHeaderButton";
 import { PageHeaderMenuDisplayName } from "./pageHeaderMenu";
 import { getItemsFromFragments } from "./pageHeaderHelpers";
+import { usePortal } from "../commonHelpers/hooks/usePortal";
 export const PageHeaderActions = ({ className = "", children }) => {
+    const isMobile = useMobile();
     const childrenArray = useMemo(() => getItemsFromFragments(
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     Children.toArray(children).filter((child) => child !== null && child !== undefined && React.isValidElement(child))), [children]);
     const nonFittingElements = useMemo(() => childrenArray.slice(2, childrenArray.length), [childrenArray]);
     const fittingElements = useMemo(() => childrenArray.slice(0, 2).map(el => {
         if (isNamedChildComponent(el, PageHeaderButtonDisplayName)) {
-            return React.cloneElement(el, { key: el.props.id,
-                children: undefined
-            });
+            return React.cloneElement(el, { key: el.props.id, children: undefined });
         }
         if (isNamedChildComponent(el, PageHeaderMenuDisplayName)) {
             return React.cloneElement(el, { key: el.props.id, onlyIcon: true });
         }
         return el;
     }), [childrenArray]);
-    const moreButton = useMemo(() => _jsx(PageToolbarCollapsedItemsControl, { className: "zen-page-header-component__actions-more", children: nonFittingElements }, "page-header-more-actions-key"), [nonFittingElements]);
-    return (childrenArray.length ? _jsxs("div", { className: classNames(["zen-page-header-component__actions", className]), children: [nonFittingElements.length > 0 ? moreButton : null, fittingElements] }) : null);
+    const moreButton = useMemo(() => (_jsx(PageToolbarCollapsedItemsControl, { className: "zen-page-header-component__actions-more", children: nonFittingElements }, "page-header-more-actions-key")), [nonFittingElements]);
+    const actionsContent = childrenArray.length ? (_jsxs("div", { className: classNames(["zen-page-header-component__actions", isMobile ? "zen-page-header-component__actions--mobile-portal" : "", className]), children: [nonFittingElements.length > 0 ? moreButton : null, fittingElements] })) : null;
+    const portal = usePortal(actionsContent);
+    // For mobile, render actions in a portal at the bottom center of viewport
+    if (isMobile && actionsContent) {
+        return portal;
+    }
+    return actionsContent;
 };