@geotab/zenith 3.6.3 → 3.7.0

package/dist/index.css

@@ -1653,6 +1653,7 @@
   position: absolute;
   z-index: 11000;
   overflow-y: auto;
+  outline: none;
 }
 .zen-absolute * {
   box-sizing: border-box;
@@ -2813,7 +2814,7 @@
   padding: 12px 8px 12px 16px;
 }
 .zen-menu-button__action:focus,
-.zen-menu-button__action:focus-within,
+.zen-menu-button__action:focus-visible,
 .zen-menu-button__action:hover:not(.zen-menu-button__action--disabled):not(.zen-menu-button__action--selected):not(.zen-menu-button__action--active) {
   color: var(--text-primary);
   fill: var(--text-secondary);
@@ -3534,6 +3535,9 @@
     left: 0;
   }
 }
+.zen-action-list {
+  outline: none;
+}
 .zen-controlled-menu {
   z-index: 11002;
 }
@@ -5316,12 +5320,59 @@
 }
 .zen-summary-tile__trigger {
   cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  line-height: 0;
+  position: relative;
+}
+.zen-summary-tile__trigger::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 24px;
+  height: 24px;
+}
+.zen-summary-tile__trigger:focus-visible {
+  outline: 2px solid var(--borders-form-field--active);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+.zen-summary-tile--action > .zen-summary-tile__trigger {
+  position: absolute;
+  top: 12px;
+  right: 12px;
 }
 .zen-summary-tile--action {
   cursor: pointer;
   display: flex;
   flex-direction: column;
   text-align: start;
+  position: relative;
+}
+.zen-summary-tile__clickable-area {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  text-align: start;
+  width: 100%;
+  height: 100%;
+  color: inherit;
+  fill: inherit;
+  font: inherit;
+  border-radius: inherit;
+}
+.zen-summary-tile__clickable-area:focus-visible {
+  outline: none;
+}
+.zen-summary-tile--action:has(.zen-summary-tile__clickable-area:focus-visible) {
+  outline: 2px solid var(--borders-form-field--active);
+  outline-offset: -1px;
 }
 .zen-summary-tile__title-block {
   height: 16px;
@@ -6670,6 +6721,13 @@
 .zen-checkbox-list-with-action__color-info--hidden {
   display: none;
 }
+.zen-checkbox-list-with-action__sr-only {
+  position: absolute;
+  left: -9999px;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+}
 .zen-checkbox-list-with-action.zen-checkbox-list-with-action--drive .zen-checkbox-list-with-action__action-checkbox,
 .zen-checkbox-list-with-action.zen-checkbox-list-with-action--drive-tablet .zen-checkbox-list-with-action__action-checkbox {
   height: 60px;
@@ -6809,6 +6867,13 @@
 .zen-dropdown-list__item--end {
   justify-content: flex-end;
 }
+.zen-dropdown-list__sentinel-item {
+  position: "absolute";
+  left: "-9999px";
+  width: "1px";
+  height: "1px";
+  opacity: 0;
+}
 .zen-dropdown-list__action-label {
   font-family: var(--main-font);
   font-size: 14px;
@@ -8481,7 +8546,7 @@
 .zen-status-pill__pill-container {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
   position: relative;
   cursor: pointer;
 }
@@ -8500,6 +8565,9 @@
 .zen-status-pill__pill-container:hover .zen-status-pill__container--error {
   border-color: var(--accents-error--detail);
 }
+.zen-status-pill__pill-container:hover .zen-status-pill__container--upsell {
+  border-color: var(--action-secondary--hover);
+}
 .zen-status-pill__container {
   font-family: var(--main-font);
   font-size: 12px;
@@ -8583,8 +8651,15 @@
 .zen-status-pill__container--error:hover {
   border-color: var(--accents-error--detail);
 }
-.zen-status-pill__container:focus-visible,
-.zen-status-pill__container:focus-visible + .zen-status-pill__container {
+.zen-status-pill__container--upsell {
+  background-color: var(--action-secondary--default);
+  fill: var(--text-reverse-primary);
+  color: var(--text-reverse-primary);
+}
+.zen-status-pill__container--upsell:hover {
+  border-color: var(--action-secondary--hover);
+}
+.zen-status-pill__container:focus-visible {
   outline: none;
   border-color: var(--borders-form-field--active);
 }
@@ -8609,6 +8684,12 @@
 .zen-status-pill__text--error {
   color: var(--accents-error--detail);
 }
+.zen-status-pill__text--upsell {
+  color: var(--text-reverse-primary);
+}
+.zen-status-pill__text--centered {
+  margin-right: 0;
+}
 .zen-status-pill__expand-button {
   padding: 0;
   margin-left: auto;
@@ -8634,13 +8715,20 @@
   fill: var(--accents-error--detail);
   color: var(--accents-error--detail);
 }
+.zen-status-pill__expand-button--upsell {
+  fill: var(--text-reverse-primary);
+  color: var(--text-reverse-primary);
+}
 .zen-status-pill__icon {
   display: flex;
   align-items: center;
-  height: 16px;
+  height: 12px;
   margin-right: 4px;
   flex-shrink: 0;
 }
+.zen-status-pill__icon--large {
+  height: 16px;
+}
 .zen-status-pill__icon--default {
   fill: var(--action-secondary--default);
   color: var(--action-secondary--default);
@@ -8661,25 +8749,71 @@
   fill: var(--accents-error--detail);
   color: var(--accents-error--detail);
 }
+.zen-status-pill__icon--upsell {
+  fill: var(--text-reverse-primary);
+  color: var(--text-reverse-primary);
+}
 .zen-status-pill__icon--standalone {
   margin-right: 0;
 }
-.zen-status-pill-popup__main-pill {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+.zen-absolute:has(.zen-status-pill-popup) {
+  overflow: visible;
+}
+.zen-status-pill-popup {
+  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  background-color: white;
+  max-height: 560px;
+  overflow: hidden;
+  outline: none;
 }
 .zen-status-pill-popup__container {
-  box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
   display: flex;
   flex-direction: column;
-  border-radius: 8px;
-  padding: 16px 16px 16px 16px;
+  padding: 12px 8px;
   gap: 16px;
-  background-color: white;
-  width: 308px;
-  margin: 10px;
-  max-height: 420px;
+  overflow-y: auto;
+  max-height: 480px;
+}
+.zen-status-pill-popup__container--small {
+  width: 220px;
+}
+.zen-status-pill-popup__container--medium {
+  width: 320px;
+}
+.zen-status-pill-popup__container--large {
+  width: 420px;
+}
+.zen-status-pill-popup__title-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 8px;
+  gap: 16px;
+  border-bottom: 1px solid var(--borders-general);
+}
+.zen-status-pill-popup__title-item-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-secondary);
+  font-feature-settings: 'liga' off, 'clig' off;
+  font-family: Roboto, sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0.16px;
+}
+.zen-status-pill-popup__footer {
+  display: flex;
+  flex-direction: column;
+}
+.zen-status-pill-popup__children {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 .zen-status-pill-popup__content-header {
   display: flex;
@@ -8749,10 +8883,61 @@
 .zen-status-pill-popup__actions {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 4px;
 }
 .zen-status-pill-popup__divider.zen-divider {
-  background-color: var(--borders-secondary);
+  background-color: var(--borders-general);
+}
+.zen-status-pill-popup--mobile .zen-mobile-sheet__title {
+  border-bottom: 1px solid var(--borders-general);
+}
+.zen-status-pill-popup--mobile .zen-mobile-sheet__content {
+  padding: 16px;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+.zen-status-pill-popup__mobile-title {
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 24px;
+  text-transform: none;
+  color: var(--text-primary);
+}
+.zen-status-pill-popup__mobile-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.zen-status-pill-popup__view-more-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin: 16px 8px 8px;
+}
+.zen-status-pill-popup__view-more-badge {
+  font-family: var(--main-font);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 16px;
+  text-transform: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  height: 22px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background-color: var(--action-primary--default);
+  color: var(--text-reverse-primary);
+  line-height: 1;
+  text-align: center;
+  box-sizing: border-box;
 }
 .zen-beta-pill--mobile {
   min-width: unset;
@@ -9400,6 +9585,25 @@ button.zen-summary__clickable {
   display: flex;
   fill: var(--text-secondary);
   justify-content: center;
+  background: none;
+  border: none;
+  padding: 0;
+  line-height: 0;
+  position: relative;
+}
+.zen-summary__trigger::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 24px;
+  height: 24px;
+}
+.zen-summary__trigger:focus-visible {
+  outline: 2px solid var(--borders-form-field--active);
+  outline-offset: 2px;
+  border-radius: 2px;
 }
 .zen-summary__data {
   align-items: center;

package/dist/index.d.ts

@@ -720,7 +720,7 @@ export { PageLayout } from "./pageLayout/pageLayout";
 export { type IPagination, Pagination } from "./pagination/pagination";
 export { PaginationType } from "./pagination/paginationType";
 export { Pill } from "./pill/pill";
-export { type IPillExpandableAction, type IBaseData, type IPromisedBaseData, type IPillExpandable, PillExpandable } from "./pillExpandable/pillExpandable";
+export { type IPillExpandableAction, type IBaseData, type IPromisedBaseData, type TPopoverSize, type IPillExpandable, PillExpandable } from "./pillExpandable/pillExpandable";
 export { type IPopup, Popup } from "./popup/popup";
 export { type IPrimaryIcon, PrimaryIcon } from "./primaryIcon/primaryIcon";
 export { ProgressBarType, ProgreesBarSize, type TProgressBarSize, ProgressBar } from "./progressBar/progressBar";

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

@@ -14,9 +14,11 @@ interface IMarkerClasses {
  *                          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.
+ * @param itemsGap - Optional gap size in pixels between list items. Used to adjust placeholder positioning
+ *                   calculations during drag operations. Defaults to 0.
  * @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) => {
+export declare const useDragAndDrop: (containerRef: RefObject<HTMLElement | null>, onChangeOrder: (startPosition: number, endPosition: number) => void, marksClassNames?: IMarkerClasses, onBeforeDragOver?: (endPosition: number) => boolean, itemsGap?: number) => {
     onDragStart: (e: React.PointerEvent<HTMLElement>) => void;
 };
 export {};

package/dist/list/hooks/useDragAndDrop.js

@@ -17,9 +17,11 @@ const zen_1 = require("../../utils/zen");
  *                          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.
+ * @param itemsGap - Optional gap size in pixels between list items. Used to adjust placeholder positioning
+ *                   calculations during drag operations. Defaults to 0.
  * @returns An object containing the `onDragStart` event handler to be attached to draggable elements
  */
-const useDragAndDrop = (containerRef, onChangeOrder, marksClassNames, onBeforeDragOver) => {
+const useDragAndDrop = (containerRef, onChangeOrder, marksClassNames, onBeforeDragOver, itemsGap = 0) => {
     const dragImageRef = (0, react_1.useRef)(null);
     const dragMoveRef = (0, react_1.useRef)(undefined);
     const { moveScroll, cancelMoveScroll } = (0, useContainerScroll_1.useContainerScroll)();
@@ -50,8 +52,12 @@ const useDragAndDrop = (containerRef, onChangeOrder, marksClassNames, onBeforeDr
         if (!containerRef.current) {
             return;
         }
-        const items = containerRef.current.querySelectorAll(`.${cssMarks.general}`);
         const rect = element.getBoundingClientRect();
+        // preventing placeholder alignment when dragged element is not properly positioned yet
+        if (rect.top < 0) {
+            return;
+        }
+        const items = containerRef.current.querySelectorAll(`.${cssMarks.general}`);
         const listRect = containerRef.current.getBoundingClientRect();
         if (rect.top < listRect.top) {
             if (onBeforeDragOver && !onBeforeDragOver(0)) {
@@ -79,13 +85,14 @@ const useDragAndDrop = (containerRef, onChangeOrder, marksClassNames, onBeforeDr
             return;
         }
         const dragItemTopOffset = 4;
+        const halfGap = itemsGap / 2;
         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 (item !== element && rect.top > itemRect.top + dragItemTopOffset - halfGap && rect.top <= itemRect.bottom + halfGap) {
                 if (onBeforeDragOver && !onBeforeDragOver(i + 1)) {
                     return;
                 }
@@ -101,7 +108,7 @@ const useDragAndDrop = (containerRef, onChangeOrder, marksClassNames, onBeforeDr
                 return;
             }
         }
-    }, [containerRef, getPlaceholder, removePlaceholders, onBeforeDragOver, cssMarks.general, cssMarks.placeholder, cssMarks.dragging]);
+    }, [containerRef, getPlaceholder, removePlaceholders, onBeforeDragOver, cssMarks.general, cssMarks.placeholder, cssMarks.dragging, itemsGap]);
     const onDragStart = (0, react_1.useCallback)((e) => {
         var _a, _b, _c, _d, _e;
         e.preventDefault();

package/dist/menu/components/menuItem.js

@@ -28,7 +28,7 @@ exports.isMenuItem = isMenuItem;
 const MenuItem = ({ id, children, name, icon, disabled, onClick, link, target, rel, isMobile = false, setIsOpen, trigger, className, active, alignment }) => {
     const aligmentContext = (0, react_1.useContext)(headerContext_1.MenuAlignmentContext);
     const contentAlignment = alignment || aligmentContext.alignment || "right-top";
-    const { path, onOpenBranch, closeBranch } = (0, react_1.useContext)(pathContext_1.PathContext);
+    const { path, onOpenBranch, closeBranch, navigatedViaKeyboardRef } = (0, react_1.useContext)(pathContext_1.PathContext);
     const memoizedDesktopActionOnClick = (0, react_1.useCallback)((itemId, e) => {
         setIsOpen === null || setIsOpen === void 0 ? void 0 : setIsOpen(false);
         onClick === null || onClick === void 0 ? void 0 : onClick(itemId, e);
@@ -87,6 +87,16 @@ const MenuItem = ({ id, children, name, icon, disabled, onClick, link, target, r
         return cont;
     }, [children, isMobile, setIsOpen, className]);
     const isOpen = (0, react_1.useMemo)(() => path.includes(id), [path, id]);
+    // Track previous isOpen state to detect when submenu opens
+    const wasOpenRef = (0, react_1.useRef)(false);
+    const localOpenedViaKeyboardRef = (0, react_1.useRef)(false);
+    // Capture keyboard navigation state synchronously when isOpen transitions to true
+    if (isOpen && !wasOpenRef.current && navigatedViaKeyboardRef) {
+        localOpenedViaKeyboardRef.current = navigatedViaKeyboardRef.current;
+        navigatedViaKeyboardRef.current = false; // Reset for next navigation
+    }
+    wasOpenRef.current = isOpen;
+    const openedViaKeyboard = localOpenedViaKeyboardRef.current;
     if (content.length === 0) {
         return (0, jsx_runtime_1.jsx)(menuButton_1.MenuButton, { id: id, name: name, icon: icon, disabled: disabled, link: link, target: target, rel: rel, onClick: memoizedDesktopActionOnClick, className: className, active: active, hasChildren: false }, id);
     }
@@ -103,7 +113,7 @@ const MenuItem = ({ id, children, name, icon, disabled, onClick, link, target, r
     else {
         popupTrigger = (0, jsx_runtime_1.jsx)(menuButton_1.MenuButton, { id: id, ref: ref, name: name, icon: icon, disabled: disabled, hasChildren: true, onClick: memoizedTriggerOnClick, active: active }, id);
     }
-    return (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [popupTrigger, (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { className: (0, classNames_1.classNames)([`zen-controlled-menu-submenu--${path.length}`]), useTrapFocusWithTrigger: "on", alignment: contentAlignment, triggerRef: ref, isOpen: isOpen, onOpenChange: memoizedOnOpenChange, ariaLabel: popupTrigger.props.name, recalculateOnScroll: true, children: (0, jsx_runtime_1.jsx)("ul", { role: "menu", className: "zen-menu-item", children: content }) })] }, id);
+    return (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [popupTrigger, (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { className: (0, classNames_1.classNames)([`zen-controlled-menu-submenu--${path.length}`]), useTrapFocusWithTrigger: openedViaKeyboard ? "on" : "withTrigger", alignment: contentAlignment, triggerRef: ref, isOpen: isOpen, onOpenChange: memoizedOnOpenChange, ariaLabel: popupTrigger.props.name, recalculateOnScroll: true, children: (0, jsx_runtime_1.jsx)("ul", { role: "menu", className: "zen-menu-item", children: content }) })] }, id);
 };
 exports.MenuItem = MenuItem;
 exports.MenuItem.displayName = "MenuItem";

package/dist/menu/contexts/pathContext.d.ts

@@ -1,7 +1,9 @@
-/// <reference types="react" />
+import { RefObject } from "react";
 export interface IPathContext {
     path: string[];
     onOpenBranch: (id: string) => void;
     closeBranch: () => void;
+    navigatedViaKeyboardRef?: RefObject<boolean>;
+    keyboardActiveRef?: RefObject<boolean>;
 }
 export declare const PathContext: import("react").Context<IPathContext>;

package/dist/menu/contexts/pathProvider.d.ts

@@ -2,5 +2,5 @@ import { PropsWithChildren } from "react";
 import { IPathContext } from "./pathContext";
 interface IPathProvider extends IPathContext, PropsWithChildren {
 }
-export declare const PathProvider: ({ children, path, onOpenBranch, closeBranch }: IPathProvider) => import("react/jsx-runtime").JSX.Element;
+export declare const PathProvider: ({ children, path, onOpenBranch, closeBranch, navigatedViaKeyboardRef, keyboardActiveRef }: IPathProvider) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/menu/contexts/pathProvider.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PathProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const pathContext_1 = require("./pathContext");
-const PathProvider = ({ children, path, onOpenBranch, closeBranch }) => ((0, jsx_runtime_1.jsx)(pathContext_1.PathContext.Provider, { value: { path, onOpenBranch, closeBranch }, children: children }));
+const PathProvider = ({ children, path, onOpenBranch, closeBranch, navigatedViaKeyboardRef, keyboardActiveRef }) => ((0, jsx_runtime_1.jsx)(pathContext_1.PathContext.Provider, { value: { path, onOpenBranch, closeBranch, navigatedViaKeyboardRef, keyboardActiveRef }, children: children }));
 exports.PathProvider = PathProvider;

package/dist/menu/controlledMenu.js

@@ -22,17 +22,57 @@ const useDeviceType_1 = require("../commonHelpers/hooks/useDeviceType");
 const utils_1 = require("../commonHelpers/utils");
 const pathProvider_1 = require("./contexts/pathProvider");
 const menuSeparator_1 = require("./components/menuSeparator");
+const focusableSelector_1 = require("../utils/focusableSelector");
 const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ariaLabelledby, id, title, className = "", listClassName = "", paddingX = 0, paddingY = 0, alignment }) => {
     const [deviceType, setDeviceType] = (0, react_1.useState)(deviceType_1.DeviceType.Desktop);
     const isMobile = deviceType === deviceType_1.DeviceType.Mobile;
     const memoizedOnChange = (0, react_1.useCallback)(setIsOpen, [setIsOpen]);
     (0, useDeviceType_1.useDeviceType)(setDeviceType);
+    const menuListRef = (0, react_1.useRef)(null);
     const [path, setPath] = (0, react_1.useState)([]);
+    // Track if the trigger was activated via keyboard
+    const openedViaKeyboardRef = (0, react_1.useRef)(false);
+    // Track if submenu was navigated via keyboard (ArrowRight)
+    const navigatedViaKeyboardRef = (0, react_1.useRef)(false);
+    // Track if keyboard is actively being used for navigation (vs mouse/touch)
+    const keyboardActiveRef = (0, react_1.useRef)(false);
+    // Listen for keyboard activation on trigger
+    (0, react_1.useEffect)(() => {
+        const trigger = triggerRef.current;
+        if (!trigger)
+            return undefined;
+        const handleKeyDown = (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                openedViaKeyboardRef.current = true;
+            }
+        };
+        const handleMouseDown = () => {
+            openedViaKeyboardRef.current = false;
+        };
+        trigger.addEventListener("keydown", handleKeyDown);
+        trigger.addEventListener("mousedown", handleMouseDown);
+        return () => {
+            trigger.removeEventListener("keydown", handleKeyDown);
+            trigger.removeEventListener("mousedown", handleMouseDown);
+        };
+    }, [triggerRef]);
     (0, react_1.useEffect)(() => {
         if (path.length && !isOpen) {
             setPath([]);
         }
     }, [isOpen, path, setPath]);
+    // Focus the menu list container or first item when menu opens (for keyboard navigation)
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (isOpen && !isMobile && menuListRef.current) {
+            if (openedViaKeyboardRef.current) {
+                (_a = menuListRef.current.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR)) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                menuListRef.current.focus();
+            }
+        }
+    }, [isOpen, isMobile]);
     const onOpenBranch = (0, react_1.useCallback)((branchId) => {
         if (!branchId) {
             return;
@@ -110,48 +150,76 @@ const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ar
         });
         return [cont, par];
     }, [children, isMobile, path, setIsOpen]);
+    // Handle keyboard navigation when no menu item is focused (e.g., when menu just opened)
+    const handleUnfocusedKeyDown = (e, menuList) => {
+        var _a, _b;
+        if (e.key === "ArrowDown" || e.key === "Home") {
+            e.preventDefault();
+            (_a = (0, findFirstFocusable_1.findFirstFocusable)(menuList)) === null || _a === void 0 ? void 0 : _a.focus();
+            return true;
+        }
+        if (e.key === "ArrowUp" || e.key === "End") {
+            e.preventDefault();
+            (_b = (0, findLastFocusable_1.findLastFocusable)(menuList)) === null || _b === void 0 ? void 0 : _b.focus();
+            return true;
+        }
+        return false;
+    };
+    const onMouseDown = () => {
+        keyboardActiveRef.current = false;
+    };
     const onKeyDown = (e) => {
         var _a, _b, _c, _d;
+        keyboardActiveRef.current = true;
         const target = e.target;
-        if ((0, isButton_1.isButton)(target) || (0, isLink_1.isLink)(target)) {
-            if (e.key === "ArrowDown") {
-                e.preventDefault();
-                (_a = (0, findNextFocusable_1.findNextFocusable)(target)) === null || _a === void 0 ? void 0 : _a.focus();
-                return;
-            }
-            if (e.key === "ArrowUp") {
-                e.preventDefault();
-                (_b = (0, findPrevFocusable_1.findPrevFocusable)(target)) === null || _b === void 0 ? void 0 : _b.focus();
-                return;
-            }
-            if (e.key === "Home") {
-                e.preventDefault();
-                (_c = (0, findFirstFocusable_1.findFirstFocusable)(target)) === null || _c === void 0 ? void 0 : _c.focus();
-                return;
-            }
-            if (e.key === "End") {
-                e.preventDefault();
-                (_d = (0, findLastFocusable_1.findLastFocusable)(target)) === null || _d === void 0 ? void 0 : _d.focus();
-                return;
+        const currentTarget = e.currentTarget;
+        if (!(0, isButton_1.isButton)(target) && !(0, isLink_1.isLink)(target)) {
+            if (target === currentTarget) {
+                const menuList = currentTarget.querySelector("ul");
+                if (menuList) {
+                    handleUnfocusedKeyDown(e, menuList);
+                }
             }
+            return;
         }
-        if ((0, isButton_1.isButton)(target)) {
-            if (e.key === "ArrowRight" && target.classList.contains("zen-menu-button__action--has-children")) {
-                e.preventDefault();
-                target.click();
-                return;
-            }
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            (_a = (0, findNextFocusable_1.findNextFocusable)(target)) === null || _a === void 0 ? void 0 : _a.focus();
+            return;
+        }
+        if (e.key === "ArrowUp") {
+            e.preventDefault();
+            (_b = (0, findPrevFocusable_1.findPrevFocusable)(target)) === null || _b === void 0 ? void 0 : _b.focus();
+            return;
+        }
+        if (e.key === "Home") {
+            e.preventDefault();
+            (_c = (0, findFirstFocusable_1.findFirstFocusable)(target)) === null || _c === void 0 ? void 0 : _c.focus();
+            return;
+        }
+        if (e.key === "End") {
+            e.preventDefault();
+            (_d = (0, findLastFocusable_1.findLastFocusable)(target)) === null || _d === void 0 ? void 0 : _d.focus();
+            return;
+        }
+        if ((0, isButton_1.isButton)(target) && (e.key === "ArrowRight" || e.key === "Enter" || e.key === " ") && target.classList.contains("zen-menu-button__action--has-children")) {
+            e.preventDefault();
+            navigatedViaKeyboardRef.current = true;
+            target.click();
         }
     };
-    const renderMenuList = () => (0, jsx_runtime_1.jsx)("div", { onKeyDown: onKeyDown, className: (0, classNames_1.classNames)(["zen-action-list", className]), children: (0, jsx_runtime_1.jsxs)("ul", { role: "menu", className: (0, classNames_1.classNames)(["zen-menu-item", className, listClassName]), children: [parent ? (0, jsx_runtime_1.jsx)(menuButton_1.MenuButton, { id: "root", name: parent.props.name || "", icon: iconArrowLeft_1.IconArrowLeft, onClick: closeBranch, hasChildren: false, disabled: false }, "root") : null, content] }) });
+    const renderMenuList = () => (0, jsx_runtime_1.jsx)("div", { ref: menuListRef, tabIndex: -1, onKeyDown: onKeyDown, onMouseDown: onMouseDown, className: (0, classNames_1.classNames)(["zen-action-list", className]), children: (0, jsx_runtime_1.jsxs)("ul", { role: "menu", className: (0, classNames_1.classNames)(["zen-menu-item", className, listClassName]), children: [parent ? (0, jsx_runtime_1.jsx)(menuButton_1.MenuButton, { id: "root", name: parent.props.name || "", icon: iconArrowLeft_1.IconArrowLeft, onClick: closeBranch, hasChildren: false, disabled: false }, "root") : null, content] }) });
     const hideMenu = (0, react_1.useCallback)(() => {
         closeBranch();
         setIsOpen(false);
     }, [closeBranch, setIsOpen]);
     if (isMobile) {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(pathProvider_1.PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, children: (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { label: title, isOpen: isOpen, triggerRef: triggerRef, onHidePanel: hideMenu, onCloseClick: hideMenu, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: title }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: renderMenuList() })] }) }) });
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(pathProvider_1.PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { label: title, isOpen: isOpen, triggerRef: triggerRef, onHidePanel: hideMenu, onCloseClick: hideMenu, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: title }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: renderMenuList() })] }) }) });
     }
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(pathProvider_1.PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, children: (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { id: id, useTrapFocusWithTrigger: "on", className: (0, classNames_1.classNames)(["zen-controlled-menu", className]), onOpenChange: memoizedOnChange, isOpen: isOpen, triggerRef: triggerRef, paddingX: paddingX, paddingY: paddingY, alignment: alignment, ariaLabelledby: ariaLabelledby, ariaLabel: ariaLabel || title, recalculateOnScroll: true, children: renderMenuList() }) }) });
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(pathProvider_1.PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { id: id, useTrapFocusWithTrigger: "on", className: (0, classNames_1.classNames)(["zen-controlled-menu", className]), onOpenChange: memoizedOnChange, isOpen: isOpen, triggerRef: triggerRef, paddingX: paddingX, paddingY: paddingY, alignment: alignment, ariaLabelledby: ariaLabelledby, ariaLabel: ariaLabel || title, recalculateOnScroll: true, 
+                // focusOnOpen is false - ControlledMenu handles focus based on input method
+                // (keyboard vs mouse) in its own useEffect
+                focusOnOpen: false, children: renderMenuList() }) }) });
 };
 exports.ControlledMenu = ControlledMenu;
 exports.ControlledMenu.Item = menuItem_1.MenuItem;

package/dist/nav/nav.d.ts

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