@geotab/zenith 3.10.0 → 3.11.0-beta.0

package/dist/menu/utils/useMenuItemCore.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMenuItemCore = void 0;
+const react_1 = require("react");
+const pathContext_1 = require("../contexts/pathContext");
+const headerContext_1 = require("../../header/headerContext");
+const buildMenuContent_1 = require("./buildMenuContent");
+const useMenuItemKeyboardNav_1 = require("./useMenuItemKeyboardNav");
+const directionContext_1 = require("../../utils/localization/directionContext");
+/**
+ * Core menu item logic shared between MenuItem and createMenuItem.
+ * Consolidates context access, state computation, and callback memoization.
+ */
+const useMenuItemCore = ({ id, children, className, alignment, isMobile = false, setIsOpen, onClick, onOpenChange }) => {
+    const alignmentContext = (0, react_1.useContext)(headerContext_1.MenuAlignmentContext);
+    const direction = (0, react_1.useContext)(directionContext_1.directionContext);
+    const defaultAlignment = direction === "rtl" ? "left-top" : "right-top";
+    const contentAlignment = alignment || alignmentContext.alignment || defaultAlignment;
+    const { path, onOpenBranch, closeBranch, navigatedViaKeyboardRef } = (0, react_1.useContext)(pathContext_1.PathContext);
+    const ref = (0, react_1.useRef)(null);
+    const content = (0, react_1.useMemo)(() => (0, buildMenuContent_1.buildMenuContent)(children, isMobile, setIsOpen, className), [children, isMobile, setIsOpen, className]);
+    const isOpen = (0, react_1.useMemo)(() => path.includes(id), [path, id]);
+    const hasChildren = content.length > 0;
+    const openedViaKeyboard = (0, useMenuItemKeyboardNav_1.useMenuItemKeyboardNav)(isOpen, navigatedViaKeyboardRef);
+    const handleDesktopActionClick = (0, react_1.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 = (0, react_1.useCallback)(() => {
+        onOpenBranch(id);
+    }, [id, onOpenBranch]);
+    const handleOpenChange = (0, react_1.useCallback)(() => {
+        closeBranch();
+    }, [closeBranch]);
+    (0, react_1.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
+    };
+};
+exports.useMenuItemCore = useMenuItemCore;

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMenuItemKeyboardNav = void 0;
+const react_1 = require("react");
+function useMenuItemKeyboardNav(isOpen, navigatedViaKeyboardRef) {
+    const wasOpenRef = (0, react_1.useRef)(false);
+    const localOpenedViaKeyboardRef = (0, react_1.useRef)(false);
+    if (isOpen && !wasOpenRef.current && navigatedViaKeyboardRef) {
+        localOpenedViaKeyboardRef.current = navigatedViaKeyboardRef.current;
+        navigatedViaKeyboardRef.current = false;
+    }
+    wasOpenRef.current = isOpen;
+    return localOpenedViaKeyboardRef.current;
+}
+exports.useMenuItemKeyboardNav = useMenuItemKeyboardNav;

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

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMenuListKeyboardNav = void 0;
+const react_1 = require("react");
+const findFirstFocusable_1 = require("./findFirstFocusable");
+const findLastFocusable_1 = require("./findLastFocusable");
+const findNextFocusable_1 = require("./findNextFocusable");
+const findPrevFocusable_1 = require("./findPrevFocusable");
+const isButton_1 = require("./isButton");
+const isLink_1 = require("./isLink");
+const resolveKeys_1 = require("./resolveKeys");
+const useMenuListKeyboardNav = (keyboardActiveRef, navigatedViaKeyboardRef, isHorizontal) => {
+    const handleNavigation = (0, react_1.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 (!(0, isButton_1.isButton)(target) && !(0, isLink_1.isLink)(target)) {
+            if (target === currentTarget) {
+                const menuList = currentTarget.querySelector("ul");
+                if (menuList) {
+                    if (e.key === keyMap.keyNext || e.key === "Home") {
+                        e.preventDefault();
+                        (_a = (0, findFirstFocusable_1.findFirstFocusable)(menuList)) === null || _a === void 0 ? void 0 : _a.focus();
+                    }
+                    else if (e.key === keyMap.keyPrev || e.key === "End") {
+                        e.preventDefault();
+                        (_b = (0, findLastFocusable_1.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 = (0, findNextFocusable_1.findNextFocusable)(target)) === null || _c === void 0 ? void 0 : _c.focus();
+            return;
+        }
+        if (e.key === keyMap.keyPrev) {
+            e.preventDefault();
+            (_d = (0, findPrevFocusable_1.findPrevFocusable)(target)) === null || _d === void 0 ? void 0 : _d.focus();
+            return;
+        }
+        if (e.key === "Home") {
+            e.preventDefault();
+            (_e = (0, findFirstFocusable_1.findFirstFocusable)(target)) === null || _e === void 0 ? void 0 : _e.focus();
+            return;
+        }
+        if (e.key === "End") {
+            e.preventDefault();
+            (_f = (0, findLastFocusable_1.findLastFocusable)(target)) === null || _f === void 0 ? void 0 : _f.focus();
+            return;
+        }
+        if ((0, isButton_1.isButton)(target) && (isItemWithChildren || isBackButton)) {
+            e.preventDefault();
+            navigatedViaKeyboardRef.current = true;
+            target.click();
+        }
+    }, [keyboardActiveRef, navigatedViaKeyboardRef]);
+    const onKeyDown = (0, react_1.useCallback)((e) => {
+        handleNavigation(e, (0, resolveKeys_1.resolveKeys)(e.target, isHorizontal));
+    }, [isHorizontal, handleNavigation]);
+    const onKeyDownVertical = (0, react_1.useCallback)((e) => {
+        handleNavigation(e, resolveKeys_1.verticalKeys);
+    }, [handleNavigation]);
+    const onMouseDown = (0, react_1.useCallback)(() => {
+        keyboardActiveRef.current = false;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return { onKeyDown, onKeyDownVertical, onMouseDown };
+};
+exports.useMenuListKeyboardNav = useMenuListKeyboardNav;

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMenuPath = void 0;
+const react_1 = require("react");
+const useMenuPath = (isOpen) => {
+    const [path, setPath] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        if (isOpen === false) {
+            setPath(v => (v.length ? [] : v));
+        }
+    }, [isOpen]);
+    const onOpenBranch = (0, react_1.useCallback)((branchId) => {
+        if (!branchId) {
+            return;
+        }
+        setPath(v => {
+            if (!v.includes(branchId)) {
+                return [...v, branchId];
+            }
+            const newPath = [...v];
+            newPath.pop();
+            return newPath;
+        });
+    }, []);
+    const closeBranch = (0, react_1.useCallback)(() => {
+        setPath(v => {
+            const newPath = [...v];
+            newPath.pop();
+            return newPath;
+        });
+    }, []);
+    const closeAll = (0, react_1.useCallback)(() => setPath([]), []);
+    return { path, onOpenBranch, closeBranch, closeAll };
+};
+exports.useMenuPath = useMenuPath;

package/dist/nav/navItem/navItem.js

@@ -17,7 +17,9 @@ const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const react_1 = require("react");
 const iconBeta_1 = require("../../icons/iconBeta");
 const iconChevronRight_1 = require("../../icons/iconChevronRight");
+const iconChevronLeft_1 = require("../../icons/iconChevronLeft");
 const iconOpen2_1 = require("../../icons/iconOpen2");
+const useDirectionalIcon_1 = require("../../utils/localization/useDirectionalIcon");
 const tooltip_1 = require("../../tooltip/tooltip");
 const controlledMenu_1 = require("../../menu/controlledMenu");
 const nav_context_1 = require("../context/nav.context");
@@ -29,11 +31,12 @@ const defaultTooltipAlignment = "right";
 const isLinkNavItem = (item) => !!item.link;
 const NavItemContent = ({ primaryIcon, secondaryIcon, isBeta, counter, collapsed, hasSubmenu, iconClass, level = 1, children }) => {
     const primaryIconRef = (0, react_1.useRef)(null);
+    const ChevronIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronRight_1.IconChevronRight, iconChevronLeft_1.IconChevronLeft);
     const PrimaryIconComponent = typeof primaryIcon === "function" ? primaryIcon : null;
     const SecondaryIconComponent = secondaryIcon;
     const iconSize = level > 1 ? SUBMENU_ICON_SIZE : ICON_SIZE;
     const primaryIconComponent = primaryIcon ? ((0, jsx_runtime_1.jsx)("span", { ref: primaryIconRef, className: (0, classNames_1.classNames)(["zen-nav-item__icon", counter ? "zen-nav-item__icon--with-counter" : "", iconClass || ""]), children: PrimaryIconComponent ? (0, jsx_runtime_1.jsx)(PrimaryIconComponent, { size: iconSize }) : primaryIcon })) : null;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-nav-item__content-left", children: [isBeta && !collapsed ? ((0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__beta", children: (0, jsx_runtime_1.jsx)(iconBeta_1.IconBeta, { size: "big" }) })) : null, primaryIconComponent, SecondaryIconComponent && !collapsed ? ((0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__icon", children: (0, jsx_runtime_1.jsx)(SecondaryIconComponent, { size: iconSize }) })) : null, !collapsed ? (0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__title", children: children }) : null] }), !collapsed && (counter || hasSubmenu) ? ((0, jsx_runtime_1.jsxs)("div", { className: "zen-nav-item__content-right", children: [counter ? (0, jsx_runtime_1.jsx)("div", { className: "zen-nav-item__counter", children: counter }) : null, hasSubmenu ? (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, { className: "zen-nav-item__title-icon", size: iconSize }) : null] })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-nav-item__content-left", children: [isBeta && !collapsed ? ((0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__beta", children: (0, jsx_runtime_1.jsx)(iconBeta_1.IconBeta, { size: "big" }) })) : null, primaryIconComponent, SecondaryIconComponent && !collapsed ? ((0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__icon", children: (0, jsx_runtime_1.jsx)(SecondaryIconComponent, { size: iconSize }) })) : null, !collapsed ? (0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__title", children: children }) : null] }), !collapsed && (counter || hasSubmenu) ? ((0, jsx_runtime_1.jsxs)("div", { className: "zen-nav-item__content-right", children: [counter ? (0, jsx_runtime_1.jsx)("div", { className: "zen-nav-item__counter", children: counter }) : null, hasSubmenu ? (0, jsx_runtime_1.jsx)(ChevronIcon, { className: "zen-nav-item__title-icon", size: iconSize }) : null] })) : null] }));
 };
 const NavItemAction = ({ actionIcon, actionIconTitle = "", onActionIconClick, collapsed, isMenuItem, level = 1 }) => {
     const ActionIconComponent = actionIcon;
@@ -94,17 +97,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 = (0, useMobile_1.useMobile)();
     const isActive = active || (hasNestedItems && menuOpen);
     const triggerId = (0, react_1.useId)();
-    const buttonElement = ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(NavItemContent, Object.assign({ title: title, collapsed: collapsed, hasSubmenu: hasNestedItems, level: currentLevel }, rest, { children: (0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__title-text", children: title }) })) }));
+    const buttonElement = ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(NavItemContent, Object.assign({ title: title, collapsed: collapsed, hasSubmenu: hasNestedItems, level: currentLevel }, rest, { children: (0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__title-text", children: title }) })) }));
     const trigger = collapsed ? ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { trigger: buttonElement, alignment: tooltipAlignment, children: title })) : (buttonElement);
     if (hasNestedItems) {
         // Process children to add appropriate level classes while allowing unlimited nesting

package/dist/nav/navSection/navSection.js

@@ -6,6 +6,7 @@ const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const react_1 = require("react");
 const nav_context_1 = require("../context/nav.context");
 const navItem_1 = require("../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.
  */
@@ -26,11 +27,11 @@ 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 = (0, react_1.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
@@ -39,7 +40,7 @@ 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 === react_1.Children.count(children) - 1 ? 0 : focusedIndex.current + 1;
@@ -54,8 +55,9 @@ const NavSection = ({ children, className }) => {
         if (key === "End" || key === "PageDown") {
             focusedIndex.current = react_1.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 = (0, classNames_1.classNames)(["zen-nav-section", className || "", collapsed ? "zen-nav-section--collapsed" : ""]);
     return ((0, jsx_runtime_1.jsx)("div", { ref: sectionRef, role: "menu", className: cssClasses, onKeyDown: arrowClickHandler, children: focusableChildren }));

package/dist/pagination/paginationArrow.js

@@ -8,14 +8,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TRANSLATIONS = exports.PaginationArrow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const classNames_1 = require("../commonHelpers/classNames/classNames");
 const svgIconSize_1 = require("../svgIcon/svgIconSize");
 const paginationType_1 = require("./paginationType");
 const textIconButton_1 = require("../textIconButton/textIconButton");
 const buttonType_1 = require("../button/buttonType");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const iconChevronRight_1 = require("../icons/iconChevronRight");
+const iconChevronLeft_1 = require("../icons/iconChevronLeft");
 const iconArrowRight_1 = require("../icons/iconArrowRight");
+const iconArrowLeft_1 = require("../icons/iconArrowLeft");
+const useDirectionalIcon_1 = require("../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");
@@ -79,6 +81,11 @@ const PaginationArrow = ({
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
+  const isPrevious = value === "previous";
+  const [ltrCompact, rtlCompact] = isPrevious ? [iconChevronLeft_1.IconChevronLeft, iconChevronRight_1.IconChevronRight] : [iconChevronRight_1.IconChevronRight, iconChevronLeft_1.IconChevronLeft];
+  const [ltrNormal, rtlNormal] = isPrevious ? [iconArrowLeft_1.IconArrowLeft, iconArrowRight_1.IconArrowRight] : [iconArrowRight_1.IconArrowRight, iconArrowLeft_1.IconArrowLeft];
+  const CompactIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(ltrCompact, rtlCompact);
+  const NormalIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(ltrNormal, rtlNormal);
   const previousButtonTitle = translate("Previous page");
   const nextButtonTitle = translate("Next page");
   const buttonTitle = value === "next" ? nextButtonTitle : previousButtonTitle;
@@ -90,10 +97,10 @@ const PaginationArrow = ({
     disabled: disabled,
     onClick: arrowButtonHandler,
     type: type === paginationType_1.PaginationType.Compact ? buttonType_1.ButtonType.TertiaryBlack : buttonType_1.ButtonType.Secondary,
-    icon: type === paginationType_1.PaginationType.Compact ? iconChevronRight_1.IconChevronRight : iconArrowRight_1.IconArrowRight,
+    icon: type === paginationType_1.PaginationType.Compact ? CompactIcon : NormalIcon,
     iconSize: type === paginationType_1.PaginationType.Compact ? svgIconSize_1.SvgIconSize.Big : svgIconSize_1.SvgIconSize.Large,
     iconPosition: textIconButton_1.ButtonIconPosition.Start,
-    iconClasses: (0, classNames_1.classNames)(["zen-pagination__arrow-navigation-button-icon", value === "previous" ? "zen-pagination__arrow-navigation-button-icon--rotate" : ""])
+    iconClasses: "zen-pagination__arrow-navigation-button-icon"
   });
 };
 exports.PaginationArrow = PaginationArrow;

package/dist/radioGroupRaw/radioGroupRaw.js

@@ -89,7 +89,8 @@ 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`))) })) }));
 };
 exports.RadioGroupRaw = RadioGroupRaw;

package/dist/rangeRaw/rangeRaw.js

@@ -427,7 +427,6 @@ const RangeRaw = props => {
     className: (0, classNames_1.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/dist/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/dist/selectList/selectList.helpers.js

@@ -42,22 +42,47 @@ const searchItemIndex = (items, searchStr) => {
     });
 };
 exports.searchItemIndex = searchItemIndex;
-const getFirstIndex = (items) => (items.length > 0 ? 0 : -1);
+const getFirstIndex = (items) => items.findIndex(item => !item.disabled);
 exports.getFirstIndex = getFirstIndex;
-const getLastIndex = (items) => (items.length > 0 ? items.length - 1 : -1);
+const getLastIndex = (items) => {
+    for (let i = items.length - 1; i >= 0; i--) {
+        if (!items[i].disabled) {
+            return i;
+        }
+    }
+    return -1;
+};
 exports.getLastIndex = getLastIndex;
 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;
 };
 exports.getNextIndex = getNextIndex;
 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;
 };
 exports.getPrevIndex = getPrevIndex;
 const getFirstActiveIndex = (state, items, multiselect) => {

package/dist/selectList/selectList.js

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

package/dist/selectList/selectList.reducer.js

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

package/dist/selectList/selectListItem.js

@@ -6,9 +6,12 @@ const checkboxState_1 = require("../checkbox/checkboxState");
 const checkboxNonInteractive_1 = require("../checkboxNonInteractive/checkboxNonInteractive");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const iconChevronRight_1 = require("../icons/iconChevronRight");
+const iconChevronLeft_1 = require("../icons/iconChevronLeft");
+const useDirectionalIcon_1 = require("../utils/localization/useDirectionalIcon");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const SelectListItem = ({ id, disabled = false, state = checkboxState_1.CheckboxState.Off, showCheckbox = false, focused = false, onChange, onClick, multiLevel, className = "", children }) => {
     const driveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-select-item");
+    const ChevronIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronRight_1.IconChevronRight, iconChevronLeft_1.IconChevronLeft);
     const onClickFunc = () => {
         if (disabled) {
             return;
@@ -30,6 +33,6 @@ const SelectListItem = ({ id, disabled = false, state = checkboxState_1.Checkbox
                 "zen-select-item__wrapper",
                 "zen-ellipsis",
                 multiLevel ? "zen-select-item__wrapper--with-arrow" : ""
-            ]), children: [showCheckbox ? ((0, jsx_runtime_1.jsx)(checkboxNonInteractive_1.CheckboxNonInteractive, { className: "zen-select-item__control-view", checked: state === checkboxState_1.CheckboxState.On, indeterminate: state === checkboxState_1.CheckboxState.Indeterminate, disabled: disabled, children: children })) : (children), multiLevel && !showCheckbox ? (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, { size: "large" }) : null] }) }));
+            ]), children: [showCheckbox ? ((0, jsx_runtime_1.jsx)(checkboxNonInteractive_1.CheckboxNonInteractive, { className: "zen-select-item__control-view", checked: state === checkboxState_1.CheckboxState.On, indeterminate: state === checkboxState_1.CheckboxState.Indeterminate, disabled: disabled, children: children })) : (children), multiLevel && !showCheckbox ? (0, jsx_runtime_1.jsx)(ChevronIcon, { size: "large" }) : null] }) }));
 };
 exports.SelectListItem = SelectListItem;

package/dist/sortControl/sortControl.js

@@ -66,6 +66,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");
@@ -100,7 +154,6 @@ const useDrive_1 = require("../utils/theme/useDrive");
 const iconChevronDownSmall_1 = require("../icons/iconChevronDownSmall");
 const iconFilter3Asc_1 = require("../icons/iconFilter3Asc");
 const iconFilter3Desc_1 = require("../icons/iconFilter3Desc");
-const MENU_POSITION = "bottom-left";
 const BUTTON_TEXT_DEFAULT = "Sort by";
 var SortDirections;
 (function (SortDirections) {
@@ -157,7 +210,6 @@ const SortControl = ({
       onClick: () => onSortDirectionToggle(),
       disabled: disabled,
       title: translate("Change sort direction"),
-      "aria-label": translate("Change sort direction"),
       children: [directionIcon ? sortDirection === SortDirections.Ascending ? (0, jsx_runtime_1.jsx)(iconFilter3Asc_1.IconFilter3Asc, {
         className: "zen-sort-container__sort-icon",
         size: isDrive ? "huge" : "large"
@@ -170,6 +222,9 @@ const SortControl = ({
           children: [buttonTextValue, ": "]
         }), (0, jsx_runtime_1.jsx)("span", {
           children: (items.find(item => item.id === sortBy) || items[0]).children
+        }), (0, jsx_runtime_1.jsxs)("span", {
+          className: "zen-visually-hidden",
+          children: [" ", sortDirection === SortDirections.Ascending ? translate("Ascending") : translate("Descending")]
         })]
       })]
     }), isSingleItem ? "" : (0, jsx_runtime_1.jsx)(popup_1.Popup, {
@@ -183,7 +238,7 @@ const SortControl = ({
           size: isDrive ? "huge" : "large"
         })
       }),
-      alignment: MENU_POSITION,
+      alignment: "bottom-left",
       onOpenChange: isCurrentlyOpen => onOptionsToggle(isCurrentlyOpen),
       children: (0, jsx_runtime_1.jsx)(selectList_1.SelectList, {
         id: "sortControlSelectList",
@@ -197,4 +252,4 @@ const SortControl = ({
   });
 };
 exports.SortControl = SortControl;
-exports.TRANSLATIONS = ["Sort by", "Sort Options", "Change sort direction"];
+exports.TRANSLATIONS = ["Sort by", "Sort Options", "Change sort direction", "Ascending", "Descending"];

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

@@ -27,7 +27,7 @@ const isChildElement = function (child, expectedType) {
     }
     return false;
 };
-const useTableChildren = (children, isMobile, selected, allSelected, clearSelection, selectAll, turnOffSelectAll, activeId, gridRef, onCloseDetailPanel) => (0, react_1.useMemo)(() => {
+const useTableChildren = (children, isMobile, selected, allSelected, clearSelection, activeId, gridRef, onCloseDetailPanel) => (0, react_1.useMemo)(() => {
     let bulkActions = undefined;
     let tablePagination = undefined;
     let activePage = undefined;
@@ -42,7 +42,7 @@ const useTableChildren = (children, isMobile, selected, allSelected, clearSelect
         }
         if (isChildElement(child, tableBulkActions_1.TableBulkActions.displayName)) {
             const bulkActionButtons = child.props.children || [];
-            bulkActions = ((0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions, { gridType: isMobile ? deviceType_1.DeviceType.Mobile : deviceType_1.DeviceType.Desktop, selected: selected, allSelected: allSelected, onClearSelection: clearSelection, onSelectAll: selectAll, turnOffSelectAll: turnOffSelectAll, children: bulkActionButtons }));
+            bulkActions = ((0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions, { gridType: isMobile ? deviceType_1.DeviceType.Mobile : deviceType_1.DeviceType.Desktop, selected: selected, allSelected: allSelected, onClearSelection: clearSelection, children: bulkActionButtons }));
             return;
         }
         if (isChildElement(child, tablePagination_1.TablePagination.displayName)) {
@@ -103,5 +103,5 @@ const useTableChildren = (children, isMobile, selected, allSelected, clearSelect
         detailPanel: detailPanel,
         other: other
     };
-}, [children, clearSelection, isMobile, selected, gridRef, allSelected, selectAll, turnOffSelectAll, activeId, onCloseDetailPanel]);
+}, [children, clearSelection, isMobile, selected, gridRef, allSelected, activeId, onCloseDetailPanel]);
 exports.useTableChildren = useTableChildren;