@geotab/zenith 3.5.0 → 3.5.1-beta.0

package/README.md

@@ -47,6 +47,10 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 3.5.1
+
+Edit mode in the `Nav` component has been added.
+
 ### 3.5.0
 
 Accessibility improvements, new DateInput control in FiltersBar, custom chart legend formatting, and new languages support. Plus several performance and stability fixes.

package/dist/index.css

@@ -14397,6 +14397,7 @@ button.zen-summary__clickable {
 }
 .zen-nav {
   --nav-gap: 16px;
+  --nav-items-gap: 8px;
   --nav-bottom-padding: 12px;
   --nav-top-padding: 9px;
   --nav-left-right-padding: 12px;
@@ -14827,6 +14828,62 @@ button.zen-summary__clickable {
   background: var(--backgrounds-content-0);
   border-top: 1px solid var(--borders-general);
 }
+.zen-nav-edit-footer {
+  position: absolute;
+  left: 0px;
+  bottom: 0px;
+  padding: 12px;
+  width: calc(100% - 24px);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.zen-nav-edit-footer__button {
+  width: calc(50% - 4px);
+}
+.zen-nav-edit-footer__button--with-margin {
+  margin-bottom: 8px;
+}
+.zen-nav-edit-footer--mobile {
+  flex-direction: column;
+  bottom: 48px;
+}
+.zen-nav-edit-footer--mobile .zen-nav-edit-footer__button {
+  width: 100%;
+}
+.zen-nav-edit-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--nav-gap);
+}
+.zen-nav-edit-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--nav-items-gap);
+}
+.zen-nav-edit-list__header {
+  font-family: var(--main-font);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0.16px;
+  line-height: 16px;
+  text-transform: none;
+  color: var(--text-secondary);
+  margin: 0;
+}
+.zen-nav-edit-list__header--no-gap {
+  margin-bottom: calc(var(--nav-items-gap) * -1);
+}
+.zen-nav-edit-list .zen-nav-edit-list__item--placeholder {
+  list-style-type: none;
+}
+.zen-nav-edit-list .zen-nav-edit-list__item--dragging {
+  display: none;
+}
+.zen-nav-edit-list__item--dragged {
+  background-color: var(--backgrounds-hover);
+}
 .zen-push {
   box-sizing: border-box;
   font-family: var(--main-font);

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

@@ -15,9 +15,9 @@ exports.IconMove = exports.IconMouseScrollUp = exports.IconMouseScrollDown = exp
 exports.IconPullRequest = exports.IconProcessor = exports.IconPrinter = exports.IconPound = exports.IconPlusSquare = exports.IconPlusLines = exports.IconPlusFile = exports.IconPlusCircle = exports.IconPlus = exports.IconPlay = exports.IconPinLocation3 = exports.IconPinLocation2 = exports.IconPinLocation = exports.IconPin2 = exports.IconPin = exports.IconPhoneMobile = exports.IconPhone = exports.IconPerformance = exports.IconPercent = exports.IconPeopleLike = exports.IconPeopleGroup2 = exports.IconPeopleGroup = exports.IconPeople = exports.IconPencil2 = exports.IconPencil = exports.IconPause = exports.IconPassword = exports.IconPaperPlane = exports.IconPackage3 = exports.IconPackage2 = exports.IconPackage = exports.IconPDF = exports.IconOptAlt = exports.IconOpt = exports.IconOpen2 = exports.IconOpen = exports.IconOnDuty = exports.IconNumberedList = exports.IconNotifications = exports.IconNotificationOff = exports.IconNotificationBell = exports.IconNotificationAlarm = exports.IconNote = exports.IconNewspaper = exports.IconNews = exports.IconNavigationFooterExpanded = exports.IconNavigationFooterCollapsed = exports.IconMyGeotab = exports.IconMyAdmin = exports.IconMove2 = void 0;
 exports.IconSortHorizontal = exports.IconSort2Vertical = exports.IconSort2Horizontal = exports.IconSmiley = exports.IconSign = exports.IconSidebar = exports.IconShield4 = exports.IconShield3 = exports.IconShield2 = exports.IconShield = exports.IconShare3 = exports.IconShare = exports.IconSettings8 = exports.IconSettings7 = exports.IconSettings6 = exports.IconSettings4 = exports.IconSettings3 = exports.IconSettings2 = exports.IconSettings1 = exports.IconServer3 = exports.IconServer2 = exports.IconServer = exports.IconSend = exports.IconSecuredLines = exports.IconSecured = exports.IconSeatbelt = exports.IconSearchPage = exports.IconSearchLines = exports.IconSearchDocument = exports.IconSearch = exports.IconSdCard = exports.IconRuler = exports.IconRoute = exports.IconRotateRepeat2 = exports.IconRotateRepeat = exports.IconRotateCounterclockwise = exports.IconRotateClockwise = exports.IconResizeSmall = exports.IconResizeBig = exports.IconRepeat2 = exports.IconRepeat = exports.IconRemovePeople = exports.IconRefrigeration = exports.IconRedo2 = exports.IconRedo = exports.IconRecord = exports.IconReceipt = exports.IconRadar = exports.IconQuestion = exports.IconPuzzle = void 0;
 exports.IconWatch = exports.IconWarning = exports.IconWallet1 = exports.IconWallet = exports.IconVolumeOn = exports.IconVolumeOff = exports.IconVolumeMinimum = exports.IconVolumeHalf = exports.IconVolumeFull = exports.IconVolumeDown = exports.IconVoice = exports.IconVisitPage = exports.IconVideoReplay = exports.IconVideo2 = exports.IconVideo = exports.IconUsbHub = exports.IconUsb = exports.IconUpload = exports.IconUnlocked = exports.IconUndock = exports.IconUndo2 = exports.IconUndo = exports.IconUnderline = exports.IconUmbrella = exports.IconTrailer = exports.IconThumbsUp = exports.IconThumbsDown = exports.IconThermometer = exports.IconThermograph = exports.IconTextSize = exports.IconTelevision2 = exports.IconTelevision = exports.IconTarget3 = exports.IconTarget2 = exports.IconTarget = exports.IconTachographTimeCard = exports.IconTachograph = exports.IconTable = exports.IconSupport = exports.IconSun = exports.IconStrikeThrough = exports.IconStore = exports.IconStorage = exports.IconStopwatch = exports.IconStarFilled = exports.IconStarAi = exports.IconStar = exports.IconSquare = exports.IconSpeaker = exports.IconSortVertical = void 0;
-exports.PageHeader = exports.PageHeaderDisplayName = exports.Notification = exports.getPredefinedFocusableItem = exports.DialogContentNew = exports.Modal = exports.MobileSheet = exports.MiniTabs = exports.MiniTabsSize = exports.isLink = exports.isButton = exports.findPrevFocusable = exports.findNextFocusable = exports.findLastFocusable = exports.findFirstFocusable = exports.Menu = exports.ControlledMenu = exports.changeOrder = exports.ListItem = exports.List = exports.ItemData = exports.ItemCompact = exports.LineChartMini = exports.getDefaultDatasetStyle = exports.htmlLegendPlugin = exports.LEGEND_PLUGIN_ID = exports.LineChart = exports.useLayoutSize = exports.LayoutFullScreenProvider = exports.useLayoutFullScreen = exports.LayoutFullScreenElementProvider = exports.useLayoutFullScreenElement = exports.Layout = exports.ImageNothingFound = exports.ImageNoMatchingAssets = exports.ImageLooking = exports.ImageAdjustFilter = exports.IconZoom2 = exports.IconZoom = exports.IconZone = exports.IconYen = exports.IconWrite = exports.IconWrench = exports.IconWorld = exports.IconWorkday = exports.IconWifi2 = exports.IconWifi = exports.IconWhisper = exports.IconWebcam = exports.IconWatch2 = void 0;
-exports.MainColumn = exports.ActionsColumn = exports.getSortableValue = exports.ColumnSortDirection = exports.getEmptySelection = exports.Table = exports.useNestedRows = exports.NestedData = exports.TabBarContent = exports.TabBar = exports.SummaryTileBarDisplayName = exports.SummaryTileBar = exports.getTypeClassName = exports.SummaryTileTrigger = exports.SummaryTile = exports.SummaryTileDisplayName = exports.SummaryTileSize = exports.SummaryTileType = exports.Summary = exports.Summaries = exports.Stepper = exports.SortControl = exports.SortDirections = exports.Skeleton = exports.LazyContent = exports.SidePanel = exports.CUSTOM_POPUP_COMPONENT_CLASSNAME = exports.SidePanelCloseReason = exports.isChildPopup = exports.SelectField = exports.Select = exports.SearchInput = exports.Range = exports.RadioGroup = exports.Radio = exports.ProgressBar = exports.ProgreesBarSize = exports.ProgressBarType = exports.PrimaryIcon = exports.Popup = exports.PillExpandable = exports.Pill = exports.PaginationType = exports.Pagination = exports.PageLayout = exports.PageContentLayout = exports.PageHeaderMenu = exports.PageHeaderMenuDisplayName = exports.PageHeaderButton = exports.PageHeaderButtonDisplayName = void 0;
-exports.Waiting = exports.UserFormatProvider = exports.useDrive = exports.ThemeProvider = exports.ThemeDrive = exports.ThemeDark = exports.useLanguage = exports.injectString = exports.dictionaries = exports.LanguageProvider = exports.getFirstFocusableItem = exports.getNewFocusableItem = exports.HeaderButtonsProvider = exports.AbortablePromise = exports.Tooltip = exports.removeArrowClasses = exports.calculateArrowPosition = exports.ToggleButtonRaw = exports.ToggleButton = exports.Toast = exports.useToast = exports.TimePicker = exports.TextareaRaw = exports.Textarea = exports.TextInputRaw = exports.TextInput = exports.TextIconButton = exports.ButtonIconPosition = exports.Tabs = exports.TabsDisplayName = exports.ActionLinkColumn = exports.CheckboxColumn = void 0;
+exports.PageHeaderDisplayName = exports.Notification = exports.getPredefinedFocusableItem = exports.DialogContentNew = exports.Modal = exports.MobileSheet = exports.MiniTabs = exports.MiniTabsSize = exports.isLink = exports.isButton = exports.findPrevFocusable = exports.findNextFocusable = exports.findLastFocusable = exports.findFirstFocusable = exports.Menu = exports.ControlledMenu = exports.isDragNotClick = exports.changeOrder = exports.ListItem = exports.List = exports.ItemData = exports.ItemCompact = exports.LineChartMini = exports.getDefaultDatasetStyle = exports.htmlLegendPlugin = exports.LEGEND_PLUGIN_ID = exports.LineChart = exports.useLayoutSize = exports.LayoutFullScreenProvider = exports.useLayoutFullScreen = exports.LayoutFullScreenElementProvider = exports.useLayoutFullScreenElement = exports.Layout = exports.ImageNothingFound = exports.ImageNoMatchingAssets = exports.ImageLooking = exports.ImageAdjustFilter = exports.IconZoom2 = exports.IconZoom = exports.IconZone = exports.IconYen = exports.IconWrite = exports.IconWrench = exports.IconWorld = exports.IconWorkday = exports.IconWifi2 = exports.IconWifi = exports.IconWhisper = exports.IconWebcam = exports.IconWatch2 = void 0;
+exports.ActionsColumn = exports.getSortableValue = exports.ColumnSortDirection = exports.getEmptySelection = exports.Table = exports.useNestedRows = exports.NestedData = exports.TabBarContent = exports.TabBar = exports.SummaryTileBarDisplayName = exports.SummaryTileBar = exports.getTypeClassName = exports.SummaryTileTrigger = exports.SummaryTile = exports.SummaryTileDisplayName = exports.SummaryTileSize = exports.SummaryTileType = exports.Summary = exports.Summaries = exports.Stepper = exports.SortControl = exports.SortDirections = exports.Skeleton = exports.LazyContent = exports.SidePanel = exports.CUSTOM_POPUP_COMPONENT_CLASSNAME = exports.SidePanelCloseReason = exports.isChildPopup = exports.SelectField = exports.Select = exports.SearchInput = exports.Range = exports.RadioGroup = exports.Radio = exports.ProgressBar = exports.ProgreesBarSize = exports.ProgressBarType = exports.PrimaryIcon = exports.Popup = exports.PillExpandable = exports.Pill = exports.PaginationType = exports.Pagination = exports.PageLayout = exports.PageContentLayout = exports.PageHeaderMenu = exports.PageHeaderMenuDisplayName = exports.PageHeaderButton = exports.PageHeaderButtonDisplayName = exports.PageHeader = void 0;
+exports.Waiting = exports.UserFormatProvider = exports.useDrive = exports.ThemeProvider = exports.ThemeDrive = exports.ThemeDark = exports.useLanguage = exports.injectString = exports.dictionaries = exports.LanguageProvider = exports.getFirstFocusableItem = exports.getNewFocusableItem = exports.HeaderButtonsProvider = exports.AbortablePromise = exports.Tooltip = exports.removeArrowClasses = exports.calculateArrowPosition = exports.ToggleButtonRaw = exports.ToggleButton = exports.Toast = exports.useToast = exports.TimePicker = exports.TextareaRaw = exports.Textarea = exports.TextInputRaw = exports.TextInput = exports.TextIconButton = exports.ButtonIconPosition = exports.Tabs = exports.TabsDisplayName = exports.ActionLinkColumn = exports.CheckboxColumn = exports.MainColumn = void 0;
 /* eslint-disable max-len */
 var absolute_1 = require("./absolute/absolute");
 Object.defineProperty(exports, "Absolute", { enumerable: true, get: function () { return absolute_1.Absolute; } });
@@ -1487,6 +1487,8 @@ var listItem_1 = require("./list/listItem/listItem");
 Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return listItem_1.ListItem; } });
 var changeOrder_1 = require("./list/utils/changeOrder");
 Object.defineProperty(exports, "changeOrder", { enumerable: true, get: function () { return changeOrder_1.changeOrder; } });
+var isDragNotClick_1 = require("./list/utils/isDragNotClick");
+Object.defineProperty(exports, "isDragNotClick", { enumerable: true, get: function () { return isDragNotClick_1.isDragNotClick; } });
 var controlledMenu_1 = require("./menu/controlledMenu");
 Object.defineProperty(exports, "ControlledMenu", { enumerable: true, get: function () { return controlledMenu_1.ControlledMenu; } });
 var menu_1 = require("./menu/menu");

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

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

package/dist/list/hooks/useDragAndDrop.js

@@ -3,33 +3,55 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDragAndDrop = void 0;
 const react_1 = require("react");
 const getScrollableParent_1 = require("../../utils/getScrollableParent");
-const findListElement_1 = require("../utils/findListElement");
+const findElement_1 = require("../utils/findElement");
 const useContainerScroll_1 = require("./useContainerScroll");
 const findItemPosition_1 = require("../utils/findItemPosition");
-const useDragAndDrop = (containerRef, onChangeOrder) => {
+const isDragNotClick_1 = require("../utils/isDragNotClick");
+/**
+ * A custom React hook that provides drag-and-drop functionality for reorderable list items.
+ * @param containerRef - A React ref pointing to the container element that holds the draggable items
+ * @param onChangeOrder - Callback function invoked when an item is dropped at a new position.
+ *                        Receives the start position and end position of the dragged item
+ * @param marksClassNames - Optional custom CSS class names for marking different states of list items.
+ *                          If not provided, defaults to 'zen-list-item' based classes
+ * @param onBeforeDragOver - Optional callback function called before placing the placeholder at a new position.
+ *                       Receives the target position and should return false to prevent the drag operation.
+ * @returns An object containing the `onDragStart` event handler to be attached to draggable elements
+ */
+const useDragAndDrop = (containerRef, onChangeOrder, marksClassNames, onBeforeDragOver) => {
     const dragImageRef = (0, react_1.useRef)(null);
     const dragMoveRef = (0, react_1.useRef)(undefined);
     const { moveScroll, cancelMoveScroll } = (0, useContainerScroll_1.useContainerScroll)();
+    const cssMarks = marksClassNames
+        ? marksClassNames
+        : {
+            general: "zen-list-item",
+            placeholder: "zen-list-item--placeholder",
+            dragging: "zen-list-item--dragging"
+        };
     const getPlaceholder = (0, react_1.useCallback)((height) => {
         const placeholder = document.createElement("li");
-        placeholder.className = "zen-list-item zen-list-item--placeholder";
+        placeholder.className = `${cssMarks.general} ${cssMarks.placeholder}`;
         placeholder.style.height = height + "px";
         return placeholder;
-    }, []);
+    }, [cssMarks.general, cssMarks.placeholder]);
     const removePlaceholders = (0, react_1.useCallback)((element) => {
-        const placeholders = element.querySelectorAll(".zen-list-item--placeholder");
+        const placeholders = element.querySelectorAll(`.${cssMarks.placeholder}`);
         for (const placeholder of placeholders) {
             placeholder.remove();
         }
-    }, []);
+    }, [cssMarks.placeholder]);
     const setPlaceholder = (0, react_1.useCallback)((element) => {
         if (!containerRef.current) {
             return;
         }
-        const items = containerRef.current.querySelectorAll(".zen-list-item");
+        const items = containerRef.current.querySelectorAll(`.${cssMarks.general}`);
         const rect = element.getBoundingClientRect();
         const listRect = containerRef.current.getBoundingClientRect();
         if (rect.top < listRect.top) {
+            if (onBeforeDragOver && !onBeforeDragOver(0)) {
+                return;
+            }
             // If the dragged element is above the list, insert placeholder at the top
             const placeholder = getPlaceholder(rect.height);
             removePlaceholders(containerRef.current);
@@ -43,18 +65,25 @@ const useDragAndDrop = (containerRef, onChangeOrder) => {
             return;
         }
         if (rect.top > listRect.bottom) {
+            if (onBeforeDragOver && !onBeforeDragOver(items.length)) {
+                return;
+            }
             const placeholder = getPlaceholder(rect.height);
             removePlaceholders(containerRef.current);
             containerRef.current.appendChild(placeholder);
             return;
         }
         const dragItemTopOffset = 4;
-        for (const item of items) {
-            if (item.classList.contains("zen-list-item--placeholder") || item.classList.contains("zen-list-item--dragging")) {
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            if (item.classList.contains(cssMarks.placeholder) || item.classList.contains(cssMarks.dragging)) {
                 continue;
             }
             const itemRect = item.getBoundingClientRect();
             if (item !== element && rect.top > itemRect.top + dragItemTopOffset && rect.top <= itemRect.bottom) {
+                if (onBeforeDragOver && !onBeforeDragOver(i + 1)) {
+                    return;
+                }
                 const placeholder = getPlaceholder(rect.height);
                 removePlaceholders(containerRef.current);
                 const next = item.nextSibling;
@@ -67,19 +96,24 @@ const useDragAndDrop = (containerRef, onChangeOrder) => {
                 return;
             }
         }
-    }, [containerRef, getPlaceholder, removePlaceholders]);
+    }, [containerRef, getPlaceholder, removePlaceholders, onBeforeDragOver, cssMarks.general, cssMarks.placeholder, cssMarks.dragging]);
     const onDragStart = (0, react_1.useCallback)((e) => {
-        const listItemElement = (0, findListElement_1.findListElement)(e.currentTarget);
+        e.preventDefault();
+        const listItemElement = (0, findElement_1.findElement)(e.currentTarget, cssMarks.general);
         if (!listItemElement) {
             return;
         }
-        const startPosition = (0, findItemPosition_1.findItemPosition)(listItemElement);
+        const startPosition = (0, findItemPosition_1.findItemPosition)(listItemElement, cssMarks.dragging);
         const rect = listItemElement.getBoundingClientRect();
         const offset = {
             x: e.clientX - rect.left,
             y: e.clientY - rect.top
         };
+        const initialCoords = { x: e.clientX, y: e.clientY };
         const div = listItemElement.cloneNode(true);
+        if (cssMarks.dragged) {
+            div.classList.add(cssMarks.dragged);
+        }
         document.body.appendChild(div);
         dragImageRef.current = div;
         div.style.position = "absolute";
@@ -87,16 +121,25 @@ 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 || (0, isDragNotClick_1.isDragNotClick)(initialCoords, { x: moveEvent.clientX, y: moveEvent.clientY })) {
+                if (!isDragStarted) {
+                    isDragStarted = true;
+                    listItemElement.classList.add(cssMarks.dragging);
+                    const scrollableParent = (0, getScrollableParent_1.getScrollableParent)(containerRef.current);
+                    moveScroll((scrollableParent || containerRef.current), dragImageRef.current, () => setPlaceholder(dragImageRef.current));
+                }
+                // 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;
@@ -107,9 +150,9 @@ 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 ? (0, findItemPosition_1.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 ? (0, findItemPosition_1.findItemPosition)(placeholderElement, cssMarks.dragging) : null;
+            listItemElement.classList.remove(cssMarks.dragging);
             if (containerRef.current) {
                 removePlaceholders(containerRef.current);
             }
@@ -124,11 +167,7 @@ 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 = (0, getScrollableParent_1.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 };
 };
 exports.useDragAndDrop = useDragAndDrop;

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

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

package/dist/list/utils/findElement.js

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

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

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

package/dist/list/utils/findItemPosition.js

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

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

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

package/dist/list/utils/isDragNotClick.js

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

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

@@ -13,6 +13,7 @@ const navMobileBar_1 = require("./navMobileBar/navMobileBar");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const focusableSelector_1 = require("../utils/focusableSelector");
 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 +44,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 }) });
@@ -56,6 +57,7 @@ const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuV
     const [isMobileMenuOpen, setIsMobileMenuOpen] = (0, react_1.useState)(false);
     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);
@@ -71,16 +73,18 @@ const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuV
         }
     }, [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);
@@ -88,6 +92,10 @@ const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuV
     const onMobileMenuToggle = (0, react_1.useCallback)(() => {
         setIsMobileMenuOpen(!isMobileMenuOpen);
     }, [isMobileMenuOpen, setIsMobileMenuOpen]);
+    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;
@@ -122,14 +130,18 @@ const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuV
             collapsed,
             onCollapseToggle,
             searchOpen: isSearchOpen,
+            isEditState: isEditState,
+            onEditStateToggle,
             onSearchToggle: onSearchOpen,
             searchTerm,
             onSearch: setSearchTerm,
             onNavigate: () => setIsMobileMenuOpen(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/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>;