@geotab/zenith 3.10.0 → 3.11.0-beta.1

package/esm/menu/utils/useMenuItemKeyboardNav.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from "react";
+export declare function useMenuItemKeyboardNav(isOpen: boolean, navigatedViaKeyboardRef: RefObject<boolean> | undefined): boolean;

package/esm/menu/utils/useMenuItemKeyboardNav.js

@@ -0,0 +1,11 @@
+import { useRef } from "react";
+export function useMenuItemKeyboardNav(isOpen, navigatedViaKeyboardRef) {
+    const wasOpenRef = useRef(false);
+    const localOpenedViaKeyboardRef = useRef(false);
+    if (isOpen && !wasOpenRef.current && navigatedViaKeyboardRef) {
+        localOpenedViaKeyboardRef.current = navigatedViaKeyboardRef.current;
+        navigatedViaKeyboardRef.current = false;
+    }
+    wasOpenRef.current = isOpen;
+    return localOpenedViaKeyboardRef.current;
+}

package/esm/menu/utils/useMenuListKeyboardNav.d.ts

@@ -0,0 +1,12 @@
+import { MutableRefObject } from "react";
+export interface IKeyMap {
+    keyNext: string;
+    keyPrev: string;
+    keyOpenNested: string;
+    keyBack: string;
+}
+export declare const useMenuListKeyboardNav: (keyboardActiveRef: MutableRefObject<boolean>, navigatedViaKeyboardRef: MutableRefObject<boolean>, isHorizontal: boolean) => {
+    onKeyDown: (e: React.KeyboardEvent) => void;
+    onKeyDownVertical: (e: React.KeyboardEvent) => void;
+    onMouseDown: () => void;
+};

package/esm/menu/utils/useMenuListKeyboardNav.js

@@ -0,0 +1,73 @@
+import { useCallback } from "react";
+import { findFirstFocusable } from "./findFirstFocusable";
+import { findLastFocusable } from "./findLastFocusable";
+import { findNextFocusable } from "./findNextFocusable";
+import { findPrevFocusable } from "./findPrevFocusable";
+import { isButton } from "./isButton";
+import { isLink } from "./isLink";
+import { resolveKeys, verticalKeys } from "./resolveKeys";
+export const useMenuListKeyboardNav = (keyboardActiveRef, navigatedViaKeyboardRef, isHorizontal) => {
+    const handleNavigation = useCallback(
+    // eslint-disable-next-line complexity
+    (e, keyMap) => {
+        var _a, _b, _c, _d, _e, _f;
+        keyboardActiveRef.current = true;
+        const target = e.target;
+        const currentTarget = e.currentTarget;
+        if (!isButton(target) && !isLink(target)) {
+            if (target === currentTarget) {
+                const menuList = currentTarget.querySelector("ul");
+                if (menuList) {
+                    if (e.key === keyMap.keyNext || e.key === "Home") {
+                        e.preventDefault();
+                        (_a = findFirstFocusable(menuList)) === null || _a === void 0 ? void 0 : _a.focus();
+                    }
+                    else if (e.key === keyMap.keyPrev || e.key === "End") {
+                        e.preventDefault();
+                        (_b = findLastFocusable(menuList)) === null || _b === void 0 ? void 0 : _b.focus();
+                    }
+                }
+            }
+            return;
+        }
+        const isItemWithChildren = (e.key === keyMap.keyOpenNested || e.key === "Enter" || e.key === " ") &&
+            target.classList.contains("zen-menu-button__action--has-children");
+        const isBackButton = (e.key === keyMap.keyBack || e.key === "Enter" || e.key === " ") && target.dataset.id === "root";
+        if (e.key === keyMap.keyNext) {
+            e.preventDefault();
+            (_c = findNextFocusable(target)) === null || _c === void 0 ? void 0 : _c.focus();
+            return;
+        }
+        if (e.key === keyMap.keyPrev) {
+            e.preventDefault();
+            (_d = findPrevFocusable(target)) === null || _d === void 0 ? void 0 : _d.focus();
+            return;
+        }
+        if (e.key === "Home") {
+            e.preventDefault();
+            (_e = findFirstFocusable(target)) === null || _e === void 0 ? void 0 : _e.focus();
+            return;
+        }
+        if (e.key === "End") {
+            e.preventDefault();
+            (_f = findLastFocusable(target)) === null || _f === void 0 ? void 0 : _f.focus();
+            return;
+        }
+        if (isButton(target) && (isItemWithChildren || isBackButton)) {
+            e.preventDefault();
+            navigatedViaKeyboardRef.current = true;
+            target.click();
+        }
+    }, [keyboardActiveRef, navigatedViaKeyboardRef]);
+    const onKeyDown = useCallback((e) => {
+        handleNavigation(e, resolveKeys(e.target, isHorizontal));
+    }, [isHorizontal, handleNavigation]);
+    const onKeyDownVertical = useCallback((e) => {
+        handleNavigation(e, verticalKeys);
+    }, [handleNavigation]);
+    const onMouseDown = useCallback(() => {
+        keyboardActiveRef.current = false;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return { onKeyDown, onKeyDownVertical, onMouseDown };
+};

package/esm/menu/utils/useMenuPath.d.ts

@@ -0,0 +1,6 @@
+export declare const useMenuPath: (isOpen?: boolean) => {
+    path: string[];
+    onOpenBranch: (branchId?: string) => void;
+    closeBranch: () => void;
+    closeAll: () => void;
+};

package/esm/menu/utils/useMenuPath.js

@@ -0,0 +1,31 @@
+import { useState, useCallback, useEffect } from "react";
+export const useMenuPath = (isOpen) => {
+    const [path, setPath] = useState([]);
+    useEffect(() => {
+        if (isOpen === false) {
+            setPath(v => (v.length ? [] : v));
+        }
+    }, [isOpen]);
+    const onOpenBranch = useCallback((branchId) => {
+        if (!branchId) {
+            return;
+        }
+        setPath(v => {
+            if (!v.includes(branchId)) {
+                return [...v, branchId];
+            }
+            const newPath = [...v];
+            newPath.pop();
+            return newPath;
+        });
+    }, []);
+    const closeBranch = useCallback(() => {
+        setPath(v => {
+            const newPath = [...v];
+            newPath.pop();
+            return newPath;
+        });
+    }, []);
+    const closeAll = useCallback(() => setPath([]), []);
+    return { path, onOpenBranch, closeBranch, closeAll };
+};

package/esm/nav/navItem/navItem.js

@@ -91,17 +91,19 @@ const ButtonNavItem = (_a) => {
         }
     };
     const handleKeyPress = evt => {
-        if (evt.key !== "ArrowRight") {
+        if (hasNestedItems && (evt.key === "Enter" || evt.key === " ")) {
+            evt.preventDefault();
+            setMenuOpen(true);
             return;
         }
-        if (hasNestedItems) {
-            setMenuOpen(prevOpen => !prevOpen);
+        if (hasNestedItems && evt.key === "ArrowRight") {
+            setMenuOpen(true);
         }
     };
     const isMobile = useMobile();
     const isActive = active || (hasNestedItems && menuOpen);
     const triggerId = useId();
-    const buttonElement = (_jsx("button", { id: triggerId, ref: triggerRef, "aria-label": title, title: title, tabIndex: tabIndex, role: isMenuItem ? "menuitem" : undefined, className: "zen-nav-item__main", onClick: handleClick, onKeyDown: handleKeyPress, children: _jsx(NavItemContent, Object.assign({ title: title, collapsed: collapsed, hasSubmenu: hasNestedItems, level: currentLevel }, rest, { children: _jsx("span", { className: "zen-nav-item__title-text", children: title }) })) }));
+    const buttonElement = (_jsx("button", { id: triggerId, ref: triggerRef, "aria-label": title, title: title, tabIndex: tabIndex, role: isMenuItem ? "menuitem" : undefined, "aria-haspopup": hasNestedItems ? "menu" : undefined, "aria-expanded": hasNestedItems ? menuOpen : undefined, className: "zen-nav-item__main", onClick: handleClick, onKeyDown: handleKeyPress, children: _jsx(NavItemContent, Object.assign({ title: title, collapsed: collapsed, hasSubmenu: hasNestedItems, level: currentLevel }, rest, { children: _jsx("span", { className: "zen-nav-item__title-text", children: title }) })) }));
     const trigger = collapsed ? (_jsx(Tooltip, { trigger: buttonElement, alignment: tooltipAlignment, children: title })) : (buttonElement);
     if (hasNestedItems) {
         // Process children to add appropriate level classes while allowing unlimited nesting

package/esm/nav/navSection/navSection.js

@@ -3,6 +3,7 @@ import { classNames } from "../../commonHelpers/classNames/classNames";
 import { Children, cloneElement, isValidElement, useCallback, useEffect, useMemo, useRef } from "react";
 import { useNavContext } from "../context/nav.context";
 import { NavItem } from "../navItem/navItem";
+const getNavItemMain = (wrapper) => { var _a; return (_a = wrapper === null || wrapper === void 0 ? void 0 : wrapper.querySelector(".zen-nav-item__main")) !== null && _a !== void 0 ? _a : wrapper; };
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
@@ -23,11 +24,11 @@ export const NavSection = ({ children, className }) => {
         if (!sectionRef.current) {
             return;
         }
-        const navItemElements = sectionRef.current.querySelectorAll(".zen-nav-item");
+        const navItemElements = sectionRef.current.querySelectorAll(":scope > .zen-nav-item");
         childRefs.current = Array.from(navItemElements);
     }, [children]);
     const arrowClickHandler = useCallback(evt => {
-        var _a, _b, _c;
+        var _a;
         const key = evt.key;
         if ((key !== "ArrowDown" && key !== "ArrowUp" && key !== "Home" && key !== "End" && key !== "PageUp" && key !== "PageDown") || // non-handled keys
             !children || // section is empty
@@ -36,7 +37,7 @@ export const NavSection = ({ children, className }) => {
             return;
         }
         evt.preventDefault();
-        (_a = childRefs.current[focusedIndex.current]) === null || _a === void 0 ? void 0 : _a.setAttribute("tabindex", "-1");
+        (_a = getNavItemMain(childRefs.current[focusedIndex.current])) === null || _a === void 0 ? void 0 : _a.setAttribute("tabindex", "-1");
         if (key === "ArrowDown") {
             // get next in a loop
             focusedIndex.current = focusedIndex.current === Children.count(children) - 1 ? 0 : focusedIndex.current + 1;
@@ -51,8 +52,9 @@ export const NavSection = ({ children, className }) => {
         if (key === "End" || key === "PageDown") {
             focusedIndex.current = Children.count(children) - 1;
         }
-        (_b = childRefs.current[focusedIndex.current]) === null || _b === void 0 ? void 0 : _b.setAttribute("tabindex", "0");
-        (_c = childRefs.current[focusedIndex.current]) === null || _c === void 0 ? void 0 : _c.focus();
+        const nextMain = getNavItemMain(childRefs.current[focusedIndex.current]);
+        nextMain === null || nextMain === void 0 ? void 0 : nextMain.setAttribute("tabindex", "0");
+        nextMain === null || nextMain === void 0 ? void 0 : nextMain.focus();
     }, [children]);
     const cssClasses = classNames(["zen-nav-section", className || "", collapsed ? "zen-nav-section--collapsed" : ""]);
     return (_jsx("div", { ref: sectionRef, role: "menu", className: cssClasses, onKeyDown: arrowClickHandler, children: focusableChildren }));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@geotab/zenith",
-    "version": "3.10.0",
+    "version": "3.11.0-beta.1",
     "description": "Zenith components library on React",
     "main": "dist/index.js",
     "types": "esm/index.d.ts",