@geotab/zenith 3.10.0-beta.7 → 3.11.0-beta.0

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

@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+import { TAlignment } from "../../absolute/absolute";
+export interface IUseMenuItemCoreParams {
+    id: string;
+    children?: ReactNode;
+    className?: string;
+    alignment?: TAlignment;
+    isMobile?: boolean;
+    setIsOpen?: (v: boolean) => void;
+    onClick?: (id: string, e: React.MouseEvent) => void;
+    onOpenChange?: (isOpen: boolean) => void;
+}
+/**
+ * Core menu item logic shared between MenuItem and createMenuItem.
+ * Consolidates context access, state computation, and callback memoization.
+ */
+export declare const useMenuItemCore: ({ id, children, className, alignment, isMobile, setIsOpen, onClick, onOpenChange }: IUseMenuItemCoreParams) => {
+    ref: import("react").RefObject<HTMLButtonElement | null>;
+    isOpen: boolean;
+    hasChildren: boolean;
+    content: ReactNode[];
+    openedViaKeyboard: boolean;
+    contentAlignment: TAlignment;
+    path: string[];
+    onOpenBranch: (id: string) => void;
+    closeBranch: () => void;
+    navigatedViaKeyboardRef: import("react").RefObject<boolean> | undefined;
+    handleDesktopActionClick: (e: React.MouseEvent) => void;
+    handleTriggerClick: () => void;
+    handleOpenChange: () => void;
+};

package/esm/menu/utils/useMenuItemCore.js

@@ -0,0 +1,50 @@
+import { useRef, useContext, useMemo, useCallback, useEffect } from "react";
+import { PathContext } from "../contexts/pathContext";
+import { MenuAlignmentContext } from "../../header/headerContext";
+import { buildMenuContent } from "./buildMenuContent";
+import { useMenuItemKeyboardNav } from "./useMenuItemKeyboardNav";
+import { directionContext } from "../../utils/localization/directionContext";
+/**
+ * Core menu item logic shared between MenuItem and createMenuItem.
+ * Consolidates context access, state computation, and callback memoization.
+ */
+export const useMenuItemCore = ({ id, children, className, alignment, isMobile = false, setIsOpen, onClick, onOpenChange }) => {
+    const alignmentContext = useContext(MenuAlignmentContext);
+    const direction = useContext(directionContext);
+    const defaultAlignment = direction === "rtl" ? "left-top" : "right-top";
+    const contentAlignment = alignment || alignmentContext.alignment || defaultAlignment;
+    const { path, onOpenBranch, closeBranch, navigatedViaKeyboardRef } = useContext(PathContext);
+    const ref = useRef(null);
+    const content = useMemo(() => buildMenuContent(children, isMobile, setIsOpen, className), [children, isMobile, setIsOpen, className]);
+    const isOpen = useMemo(() => path.includes(id), [path, id]);
+    const hasChildren = content.length > 0;
+    const openedViaKeyboard = useMenuItemKeyboardNav(isOpen, navigatedViaKeyboardRef);
+    const handleDesktopActionClick = useCallback((e) => {
+        setIsOpen === null || setIsOpen === void 0 ? void 0 : setIsOpen(false);
+        onClick === null || onClick === void 0 ? void 0 : onClick(id, e);
+    }, [setIsOpen, onClick, id]);
+    const handleTriggerClick = useCallback(() => {
+        onOpenBranch(id);
+    }, [id, onOpenBranch]);
+    const handleOpenChange = useCallback(() => {
+        closeBranch();
+    }, [closeBranch]);
+    useEffect(() => {
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
+    }, [isOpen, onOpenChange]);
+    return {
+        ref,
+        isOpen,
+        hasChildren,
+        content,
+        openedViaKeyboard,
+        contentAlignment,
+        path,
+        onOpenBranch,
+        closeBranch,
+        navigatedViaKeyboardRef,
+        handleDesktopActionClick,
+        handleTriggerClick,
+        handleOpenChange
+    };
+};

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

@@ -14,7 +14,9 @@ import { classNames } from "../../commonHelpers/classNames/classNames";
 import { useRef, useState, useEffect, Children, cloneElement, createContext, useContext, useId } from "react";
 import { IconBeta } from "../../icons/iconBeta";
 import { IconChevronRight } from "../../icons/iconChevronRight";
+import { IconChevronLeft } from "../../icons/iconChevronLeft";
 import { IconOpen2 } from "../../icons/iconOpen2";
+import { useDirectionalIcon } from "../../utils/localization/useDirectionalIcon";
 import { Tooltip } from "../../tooltip/tooltip";
 import { ControlledMenu } from "../../menu/controlledMenu";
 import { useNavContext } from "../context/nav.context";
@@ -26,11 +28,12 @@ const defaultTooltipAlignment = "right";
 const isLinkNavItem = (item) => !!item.link;
 const NavItemContent = ({ primaryIcon, secondaryIcon, isBeta, counter, collapsed, hasSubmenu, iconClass, level = 1, children }) => {
     const primaryIconRef = useRef(null);
+    const ChevronIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
     const PrimaryIconComponent = typeof primaryIcon === "function" ? primaryIcon : null;
     const SecondaryIconComponent = secondaryIcon;
     const iconSize = level > 1 ? SUBMENU_ICON_SIZE : ICON_SIZE;
     const primaryIconComponent = primaryIcon ? (_jsx("span", { ref: primaryIconRef, className: classNames(["zen-nav-item__icon", counter ? "zen-nav-item__icon--with-counter" : "", iconClass || ""]), children: PrimaryIconComponent ? _jsx(PrimaryIconComponent, { size: iconSize }) : primaryIcon })) : null;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "zen-nav-item__content-left", children: [isBeta && !collapsed ? (_jsx("span", { className: "zen-nav-item__beta", children: _jsx(IconBeta, { size: "big" }) })) : null, primaryIconComponent, SecondaryIconComponent && !collapsed ? (_jsx("span", { className: "zen-nav-item__icon", children: _jsx(SecondaryIconComponent, { size: iconSize }) })) : null, !collapsed ? _jsx("span", { className: "zen-nav-item__title", children: children }) : null] }), !collapsed && (counter || hasSubmenu) ? (_jsxs("div", { className: "zen-nav-item__content-right", children: [counter ? _jsx("div", { className: "zen-nav-item__counter", children: counter }) : null, hasSubmenu ? _jsx(IconChevronRight, { className: "zen-nav-item__title-icon", size: iconSize }) : null] })) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "zen-nav-item__content-left", children: [isBeta && !collapsed ? (_jsx("span", { className: "zen-nav-item__beta", children: _jsx(IconBeta, { size: "big" }) })) : null, primaryIconComponent, SecondaryIconComponent && !collapsed ? (_jsx("span", { className: "zen-nav-item__icon", children: _jsx(SecondaryIconComponent, { size: iconSize }) })) : null, !collapsed ? _jsx("span", { className: "zen-nav-item__title", children: children }) : null] }), !collapsed && (counter || hasSubmenu) ? (_jsxs("div", { className: "zen-nav-item__content-right", children: [counter ? _jsx("div", { className: "zen-nav-item__counter", children: counter }) : null, hasSubmenu ? _jsx(ChevronIcon, { className: "zen-nav-item__title-icon", size: iconSize }) : null] })) : null] }));
 };
 const NavItemAction = ({ actionIcon, actionIconTitle = "", onActionIconClick, collapsed, isMenuItem, level = 1 }) => {
     const ActionIconComponent = actionIcon;
@@ -91,17 +94,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/esm/pagination/paginationArrow.js

@@ -1,13 +1,15 @@
 import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../commonHelpers/classNames/classNames";
 import { SvgIconSize } from "../svgIcon/svgIconSize";
 import { PaginationType } from "./paginationType";
 import { ButtonIconPosition, TextIconButton } from "../textIconButton/textIconButton";
 import { ButtonType } from "../button/buttonType";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { IconChevronRight } from "../icons/iconChevronRight";
+import { IconChevronLeft } from "../icons/iconChevronLeft";
 import { IconArrowRight } from "../icons/iconArrowRight";
+import { IconArrowLeft } from "../icons/iconArrowLeft";
+import { useDirectionalIcon } from "../utils/localization/useDirectionalIcon";
 injectString("cs", "Previous page", "P\u0159edchoz\xED str\xE1nka");
 injectString("da-DK", "Previous page", "Forrige side");
 injectString("de", "Previous page", "Vorherige Seite");
@@ -71,6 +73,11 @@ export const PaginationArrow = ({
   const {
     translate
   } = useLanguage();
+  const isPrevious = value === "previous";
+  const [ltrCompact, rtlCompact] = isPrevious ? [IconChevronLeft, IconChevronRight] : [IconChevronRight, IconChevronLeft];
+  const [ltrNormal, rtlNormal] = isPrevious ? [IconArrowLeft, IconArrowRight] : [IconArrowRight, IconArrowLeft];
+  const CompactIcon = useDirectionalIcon(ltrCompact, rtlCompact);
+  const NormalIcon = useDirectionalIcon(ltrNormal, rtlNormal);
   const previousButtonTitle = translate("Previous page");
   const nextButtonTitle = translate("Next page");
   const buttonTitle = value === "next" ? nextButtonTitle : previousButtonTitle;
@@ -82,10 +89,10 @@ export const PaginationArrow = ({
     disabled: disabled,
     onClick: arrowButtonHandler,
     type: type === PaginationType.Compact ? ButtonType.TertiaryBlack : ButtonType.Secondary,
-    icon: type === PaginationType.Compact ? IconChevronRight : IconArrowRight,
+    icon: type === PaginationType.Compact ? CompactIcon : NormalIcon,
     iconSize: type === PaginationType.Compact ? SvgIconSize.Big : SvgIconSize.Large,
     iconPosition: ButtonIconPosition.Start,
-    iconClasses: classNames(["zen-pagination__arrow-navigation-button-icon", value === "previous" ? "zen-pagination__arrow-navigation-button-icon--rotate" : ""])
+    iconClasses: "zen-pagination__arrow-navigation-button-icon"
   });
 };
 export const TRANSLATIONS = ["Previous page", "Next page"];

package/esm/radioGroupRaw/radioGroupRaw.js

@@ -63,6 +63,7 @@ export const RadioGroupRaw = (props) => {
                         "zen-radio-group__item",
                         wrappedInLabel ? "zen-radio-group__item--no-paddings" : "",
                         type === "interactive" ? "zen-radio--interactive" : "",
-                        size === "small" ? "zen-radio-group__item--small" : ""
+                        size === "small" ? "zen-radio-group__item--small" : "",
+                        direction === "horizontal" ? "zen-radio--align-start" : ""
                     ]), key: ind, checked: item.value === value, disabled: disabled ? disabled : item.disabled, name: name, reverse: reverse, fullWidth: fullWidth, value: item.value, onChange: onChangeInner, wrappedInLabel: wrappedInLabel, tabIndex: selectItemOnFocus || disabled || item.disabled ? undefined : ind === focusedIndex ? 0 : -1, ref: selectItemOnFocus ? undefined : ind === focusedIndex ? focusElementRef : undefined, role: itemRole }), item.children) }, `${ind}-li`))) })) }));
 };

package/esm/rangeRaw/rangeRaw.js

@@ -419,7 +419,6 @@ export const RangeRaw = props => {
     className: classNames(["zen-range-popup zen-shadow-dropdown-default", className ? className : ""]),
     onOpenChange: handleTriggerClick,
     useTrapFocusWithTrigger: "on",
-    alignment: "bottom-left",
     shouldHoldScroll: true,
     triggerRef: triggerRef,
     ariaLabel: translate("Range Filter popup"),

package/esm/selectList/selectList.helpers.d.ts

@@ -5,7 +5,7 @@ export declare const getItemIdByIndex: (state: Map<string, CheckboxState>, index
 export declare const getItemIndexById: (state: Map<string, CheckboxState>, id: string) => number;
 export declare const updateItemState: (initialState: Map<string, CheckboxState>, multiselect: boolean, updatedId: string, newState: CheckboxState) => [Map<string, CheckboxState>, boolean];
 export declare const searchItemIndex: (items: ISelectListItem[], searchStr: string) => number;
-export declare const getFirstIndex: (items: ISelectListItem[]) => 0 | -1;
+export declare const getFirstIndex: (items: ISelectListItem[]) => number;
 export declare const getLastIndex: (items: ISelectListItem[]) => number;
 export declare const getNextIndex: (currIndex: number, items: ISelectListItem[]) => number;
 export declare const getPrevIndex: (currIndex: number, items: ISelectListItem[]) => number;

package/esm/selectList/selectList.helpers.js

@@ -35,19 +35,44 @@ export const searchItemIndex = (items, searchStr) => {
         return content.toLocaleLowerCase().indexOf(searchStr.toLocaleLowerCase()) > -1;
     });
 };
-export const getFirstIndex = (items) => (items.length > 0 ? 0 : -1);
-export const getLastIndex = (items) => (items.length > 0 ? items.length - 1 : -1);
+export const getFirstIndex = (items) => items.findIndex(item => !item.disabled);
+export const getLastIndex = (items) => {
+    for (let i = items.length - 1; i >= 0; i--) {
+        if (!items[i].disabled) {
+            return i;
+        }
+    }
+    return -1;
+};
 export const getNextIndex = (currIndex, items) => {
+    var _a;
     if (items.length === 0) {
         return -1;
     }
-    return currIndex + 1 >= items.length ? 0 : currIndex + 1;
+    let nextIndex = currIndex + 1 >= items.length ? 0 : currIndex + 1;
+    const startIndex = nextIndex;
+    while ((_a = items[nextIndex]) === null || _a === void 0 ? void 0 : _a.disabled) {
+        nextIndex = nextIndex + 1 >= items.length ? 0 : nextIndex + 1;
+        if (nextIndex === startIndex) {
+            return currIndex;
+        }
+    }
+    return nextIndex;
 };
 export const getPrevIndex = (currIndex, items) => {
+    var _a;
     if (items.length === 0) {
         return -1;
     }
-    return currIndex <= 0 || currIndex >= items.length ? items.length - 1 : currIndex - 1;
+    let prevIndex = currIndex <= 0 || currIndex >= items.length ? items.length - 1 : currIndex - 1;
+    const startIndex = prevIndex;
+    while ((_a = items[prevIndex]) === null || _a === void 0 ? void 0 : _a.disabled) {
+        prevIndex = prevIndex <= 0 ? items.length - 1 : prevIndex - 1;
+        if (prevIndex === startIndex) {
+            return currIndex;
+        }
+    }
+    return prevIndex;
 };
 export const getFirstActiveIndex = (state, items, multiselect) => {
     for (let i = 0; i < items.length; i++) {

package/esm/selectList/selectList.js

@@ -48,7 +48,9 @@ export const SelectList = (_a) => {
         if (!multiselect && selectItemOnFocus) {
             dispatchState({ type: ListAction.FocusFirst, payload: { items } });
         }
-        dispatchState({ type: ListAction.Focus, payload: { items, multiselect } });
+        if (!multiselect) {
+            dispatchState({ type: ListAction.Focus, payload: { items, multiselect } });
+        }
     }, [multiselect, items, selectItemOnFocus]);
     useEffect(() => {
         onChange && state.isItemsStateChanged && onChange(new Map(state.itemsState));

package/esm/selectList/selectList.reducer.js

@@ -117,8 +117,7 @@ export const selectListReducer = (state, action) => {
                 newItemsState = updatedState;
             });
             const prevActiveItemId = getItemIdByIndex(state.itemsState, state.activeIndex);
-            const newActiveItemIndex = !!prevActiveItemId && getItemIndexById(newItemsState, prevActiveItemId);
-            const activeIndex = newActiveItemIndex ? newActiveItemIndex : -1;
+            const activeIndex = prevActiveItemId !== undefined ? getItemIndexById(newItemsState, prevActiveItemId) : -1;
             return Object.assign(Object.assign({}, state), { itemsState: newItemsState, activeIndex, isItemsStateChanged: false });
         }
         case ListAction.SetLevel: {

package/esm/selectList/selectListItem.js

@@ -3,9 +3,12 @@ import { CheckboxState } from "../checkbox/checkboxState";
 import { CheckboxNonInteractive } from "../checkboxNonInteractive/checkboxNonInteractive";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { IconChevronRight } from "../icons/iconChevronRight";
+import { IconChevronLeft } from "../icons/iconChevronLeft";
+import { useDirectionalIcon } from "../utils/localization/useDirectionalIcon";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 export const SelectListItem = ({ id, disabled = false, state = CheckboxState.Off, showCheckbox = false, focused = false, onChange, onClick, multiLevel, className = "", children }) => {
     const driveClassName = useDriveClassName("zen-select-item");
+    const ChevronIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
     const onClickFunc = () => {
         if (disabled) {
             return;
@@ -27,5 +30,5 @@ export const SelectListItem = ({ id, disabled = false, state = CheckboxState.Off
                 "zen-select-item__wrapper",
                 "zen-ellipsis",
                 multiLevel ? "zen-select-item__wrapper--with-arrow" : ""
-            ]), children: [showCheckbox ? (_jsx(CheckboxNonInteractive, { className: "zen-select-item__control-view", checked: state === CheckboxState.On, indeterminate: state === CheckboxState.Indeterminate, disabled: disabled, children: children })) : (children), multiLevel && !showCheckbox ? _jsx(IconChevronRight, { size: "large" }) : null] }) }));
+            ]), children: [showCheckbox ? (_jsx(CheckboxNonInteractive, { className: "zen-select-item__control-view", checked: state === CheckboxState.On, indeterminate: state === CheckboxState.Indeterminate, disabled: disabled, children: children })) : (children), multiLevel && !showCheckbox ? _jsx(ChevronIcon, { size: "large" }) : null] }) }));
 };

package/esm/sortControl/sortControl.js

@@ -65,6 +65,60 @@ injectString("zh-Hans", "Change sort direction", "\u66F4\u6539\u6392\u5E8F");
 injectString("zh-TW", "Change sort direction", "\u8B8A\u66F4\u6392\u5E8F\u65B9\u5411");
 injectString("ro-RO", "Change sort direction", "Schimba\u021Bi direc\u021Bia sort\u0103rii");
 injectString("ar-SA", "Change sort direction", "\u062A\u063A\u064A\u064A\u0631 \u0627\u062A\u062C\u0627\u0647 \u0627\u0644\u062A\u0631\u062A\u064A\u0628");
+injectString("cs", "Ascending", "Vzestupn\u011B");
+injectString("da-DK", "Ascending", "Stigende");
+injectString("de", "Ascending", "Aufsteigend");
+injectString("en", "Ascending", "Ascending");
+injectString("es", "Ascending", "Ascendente");
+injectString("fi-FI", "Ascending", "Nouseva");
+injectString("fr", "Ascending", "Croissant");
+injectString("fr-FR", "Ascending", "Croissant");
+injectString("hu-HU", "Ascending", "N\xF6vekv\u0151");
+injectString("id", "Ascending", "Naik");
+injectString("it", "Ascending", "Crescente");
+injectString("ja", "Ascending", "\u6607\u9806");
+injectString("ko-KR", "Ascending", "\uC624\uB984\uCC28\uC21C");
+injectString("ms", "Ascending", "Menaik");
+injectString("nb-NO", "Ascending", "Stigende");
+injectString("nl", "Ascending", "Oplopend");
+injectString("pl", "Ascending", "Rosn\u0105co");
+injectString("pt-BR", "Ascending", "Crescente");
+injectString("pt-PT", "Ascending", "Ascendente");
+injectString("sk-SK", "Ascending", "Vzostupne");
+injectString("sv", "Ascending", "Stigande");
+injectString("th", "Ascending", "\u0E08\u0E32\u0E01\u0E19\u0E49\u0E2D\u0E22\u0E44\u0E1B\u0E21\u0E32\u0E01");
+injectString("tr", "Ascending", "Artan");
+injectString("zh-Hans", "Ascending", "\u5347\u5E8F");
+injectString("zh-TW", "Ascending", "\u905E\u589E");
+injectString("ro-RO", "Ascending", "Ascensiune");
+injectString("ar-SA", "Ascending", "\u062A\u0635\u0627\u0639\u062F\u064A");
+injectString("cs", "Descending", "Sestupn\u011B");
+injectString("da-DK", "Descending", "Faldende");
+injectString("de", "Descending", "Absteigend");
+injectString("en", "Descending", "Descending");
+injectString("es", "Descending", "Descendente");
+injectString("fi-FI", "Descending", "Laskeva");
+injectString("fr", "Descending", "D\xE9croissant");
+injectString("fr-FR", "Descending", "Descendant");
+injectString("hu-HU", "Descending", "Cs\xF6kken\u0151");
+injectString("id", "Descending", "Menurun");
+injectString("it", "Descending", "Decrescente");
+injectString("ja", "Descending", "\u964D\u9806");
+injectString("ko-KR", "Descending", "\uB0B4\uB9BC\uCC28\uC21C");
+injectString("ms", "Descending", "Menurun");
+injectString("nb-NO", "Descending", "Synkende");
+injectString("nl", "Descending", "Aflopend");
+injectString("pl", "Descending", "Malej\u0105co");
+injectString("pt-BR", "Descending", "Decrescente");
+injectString("pt-PT", "Descending", "Descendente");
+injectString("sk-SK", "Descending", "Zostupne");
+injectString("sv", "Descending", "Fallande");
+injectString("th", "Descending", "\u0E08\u0E32\u0E01\u0E21\u0E32\u0E01\u0E44\u0E1B\u0E19\u0E49\u0E2D\u0E22");
+injectString("tr", "Descending", "Azalan");
+injectString("zh-Hans", "Descending", "\u964D\u5E8F");
+injectString("zh-TW", "Descending", "\u905E\u6E1B");
+injectString("ro-RO", "Descending", "Cobor\xE2re");
+injectString("ar-SA", "Descending", "\u062A\u0646\u0627\u0632\u0644\u064A");
 injectString("cs", "Sort Options", "Sort Options");
 injectString("da-DK", "Sort Options", "Sorteringsmuligheder");
 injectString("de", "Sort Options", "Sort Options");
@@ -92,7 +146,6 @@ injectString("zh-Hans", "Sort Options", "Sort Options");
 injectString("zh-TW", "Sort Options", "\u6392\u5E8F\u9078\u9805");
 injectString("ro-RO", "Sort Options", "Op\u021Biuni de sortare");
 injectString("ar-SA", "Sort Options", "\u062E\u064A\u0627\u0631\u0627\u062A \u0627\u0644\u062A\u0631\u062A\u064A\u0628");
-const MENU_POSITION = "bottom-left";
 const BUTTON_TEXT_DEFAULT = "Sort by";
 export var SortDirections;
 (function (SortDirections) {
@@ -149,7 +202,6 @@ export const SortControl = ({
       onClick: () => onSortDirectionToggle(),
       disabled: disabled,
       title: translate("Change sort direction"),
-      "aria-label": translate("Change sort direction"),
       children: [directionIcon ? sortDirection === SortDirections.Ascending ? _jsx(IconFilter3Asc, {
         className: "zen-sort-container__sort-icon",
         size: isDrive ? "huge" : "large"
@@ -162,6 +214,9 @@ export const SortControl = ({
           children: [buttonTextValue, ": "]
         }), _jsx("span", {
           children: (items.find(item => item.id === sortBy) || items[0]).children
+        }), _jsxs("span", {
+          className: "zen-visually-hidden",
+          children: [" ", sortDirection === SortDirections.Ascending ? translate("Ascending") : translate("Descending")]
         })]
       })]
     }), isSingleItem ? "" : _jsx(Popup, {
@@ -175,7 +230,7 @@ export const SortControl = ({
           size: isDrive ? "huge" : "large"
         })
       }),
-      alignment: MENU_POSITION,
+      alignment: "bottom-left",
       onOpenChange: isCurrentlyOpen => onOptionsToggle(isCurrentlyOpen),
       children: _jsx(SelectList, {
         id: "sortControlSelectList",
@@ -188,4 +243,4 @@ export const SortControl = ({
     }, popupKey)]
   });
 };
-export const TRANSLATIONS = ["Sort by", "Sort Options", "Change sort direction"];
+export const TRANSLATIONS = ["Sort by", "Sort Options", "Change sort direction", "Ascending", "Descending"];

package/esm/table/children/useTableChildren.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode, RefObject } from "react";
-export declare const useTableChildren: (children: ReactNode, isMobile: boolean, selected: number, allSelected: boolean, clearSelection: () => void, selectAll: () => void, turnOffSelectAll?: boolean, activeId?: string, gridRef?: RefObject<HTMLElement | null>, onCloseDetailPanel?: () => void) => {
+export declare const useTableChildren: (children: ReactNode, isMobile: boolean, selected: number, allSelected: boolean, clearSelection: () => void, activeId?: string, gridRef?: RefObject<HTMLElement | null>, onCloseDetailPanel?: () => void) => {
     bulkActions: ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
     pagination: ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
     activePage: number | undefined;

package/esm/table/children/useTableChildren.js

@@ -24,7 +24,7 @@ const isChildElement = function (child, expectedType) {
     }
     return false;
 };
-export const useTableChildren = (children, isMobile, selected, allSelected, clearSelection, selectAll, turnOffSelectAll, activeId, gridRef, onCloseDetailPanel) => useMemo(() => {
+export const useTableChildren = (children, isMobile, selected, allSelected, clearSelection, activeId, gridRef, onCloseDetailPanel) => useMemo(() => {
     let bulkActions = undefined;
     let tablePagination = undefined;
     let activePage = undefined;
@@ -39,7 +39,7 @@ export const useTableChildren = (children, isMobile, selected, allSelected, clea
         }
         if (isChildElement(child, TableBulkActions.displayName)) {
             const bulkActionButtons = child.props.children || [];
-            bulkActions = (_jsx(BulkActions, { gridType: isMobile ? DeviceType.Mobile : DeviceType.Desktop, selected: selected, allSelected: allSelected, onClearSelection: clearSelection, onSelectAll: selectAll, turnOffSelectAll: turnOffSelectAll, children: bulkActionButtons }));
+            bulkActions = (_jsx(BulkActions, { gridType: isMobile ? DeviceType.Mobile : DeviceType.Desktop, selected: selected, allSelected: allSelected, onClearSelection: clearSelection, children: bulkActionButtons }));
             return;
         }
         if (isChildElement(child, TablePagination.displayName)) {
@@ -100,4 +100,4 @@ export const useTableChildren = (children, isMobile, selected, allSelected, clea
         detailPanel: detailPanel,
         other: other
     };
-}, [children, clearSelection, isMobile, selected, gridRef, allSelected, selectAll, turnOffSelectAll, activeId, onCloseDetailPanel]);
+}, [children, clearSelection, isMobile, selected, gridRef, allSelected, activeId, onCloseDetailPanel]);