@geotab/zenith 3.5.0 → 3.5.1

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

@@ -73,14 +73,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 +88,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/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";

package/esm/index.d.ts

@@ -697,6 +697,7 @@ export { type IItemData, ItemData } from "./list/itemData/itemData";
 export { type IList, List } from "./list/list";
 export { type IListItem, ListItem } from "./list/listItem/listItem";
 export { changeOrder } from "./list/utils/changeOrder";
+export { isDragNotClick } from "./list/utils/isDragNotClick";
 export { type IControlledMenu, ControlledMenu } from "./menu/controlledMenu";
 export { type IMenu, Menu } from "./menu/menu";
 export { findFirstFocusable } from "./menu/utils/findFirstFocusable";

package/esm/index.js

@@ -684,6 +684,7 @@ export { ItemData } from "./list/itemData/itemData";
 export { List } from "./list/list";
 export { ListItem } from "./list/listItem/listItem";
 export { changeOrder } from "./list/utils/changeOrder";
+export { isDragNotClick } from "./list/utils/isDragNotClick";
 export { ControlledMenu } from "./menu/controlledMenu";
 export { Menu } from "./menu/menu";
 export { findFirstFocusable } from "./menu/utils/findFirstFocusable";

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

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

package/esm/list/hooks/useDragAndDrop.js

@@ -1,32 +1,54 @@
 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";
+/**
+ * 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";
+        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 +62,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,19 +93,24 @@ 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);
+        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);
+        if (cssMarks.dragged) {
+            div.classList.add(cssMarks.dragged);
+        }
         document.body.appendChild(div);
         dragImageRef.current = div;
         div.style.position = "absolute";
@@ -84,16 +118,25 @@ export const useDragAndDrop = (containerRef, onChangeOrder) => {
         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));
+                }
+                // 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();
+            }
         };
         const onDragEnd = () => {
             var _a;
@@ -104,9 +147,9 @@ export const useDragAndDrop = (containerRef, onChangeOrder) => {
             if (dragMoveRef.current) {
                 document.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 = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${cssMarks.placeholder}`);
+            const endPosition = placeholderElement ? findItemPosition(placeholderElement, cssMarks.dragging) : null;
+            listItemElement.classList.remove(cssMarks.dragging);
             if (containerRef.current) {
                 removePlaceholders(containerRef.current);
             }
@@ -121,10 +164,6 @@ export const useDragAndDrop = (containerRef, onChangeOrder) => {
         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]);
+    }, [cancelMoveScroll, containerRef, moveScroll, onChangeOrder, removePlaceholders, setPlaceholder, cssMarks.general, cssMarks.placeholder, cssMarks.dragging, cssMarks.dragged]);
     return { onDragStart };
 };

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/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.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";
@@ -10,6 +10,7 @@ import { NavMobileBar } from "./navMobileBar/navMobileBar";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
 const NavContent = ({ children }) => {
+    const { isEditState } = useNavContext();
     const contentRef = useRef(null);
     const [hasScrollbar, setHasScrollbar] = useState(false);
     const [showTopShadow, setShowTopShadow] = useState(false);
@@ -40,8 +41,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 }) });
@@ -53,6 +54,7 @@ export const Nav = ({ children, className, collapsed = false, onCollapseToggle,
     const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
     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);
@@ -68,16 +70,18 @@ export const Nav = ({ children, className, collapsed = false, onCollapseToggle,
         }
     }, [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);
@@ -85,6 +89,10 @@ export const Nav = ({ children, className, collapsed = false, onCollapseToggle,
     const onMobileMenuToggle = useCallback(() => {
         setIsMobileMenuOpen(!isMobileMenuOpen);
     }, [isMobileMenuOpen, setIsMobileMenuOpen]);
+    const onEditStateToggle = useCallback((isEdit) => {
+        isEdit && onCollapseToggle && onCollapseToggle(false);
+        editListItems && editFooter && setIsEditState(isEdit);
+    }, [onCollapseToggle, setIsEditState, editListItems, editFooter]);
     useEffect(() => {
         const wasMobile = prevIsMobileRef.current;
         prevIsMobileRef.current = isMobile;
@@ -119,13 +127,17 @@ export const Nav = ({ children, className, collapsed = false, onCollapseToggle,
             collapsed,
             onCollapseToggle,
             searchOpen: isSearchOpen,
+            isEditState: isEditState,
+            onEditStateToggle,
             onSearchToggle: onSearchOpen,
             searchTerm,
             onSearch: setSearchTerm,
             onNavigate: () => setIsMobileMenuOpen(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/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 });