@geotab/zenith 3.11.0-beta.0 → 3.11.0-beta.1

package/esm/icons/iconCornerUpRight.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconCornerUpRight = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = useIsRTL();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconCornerUpRight", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4 20.87a1 1 0 001-1v-9h12.586l-2.293 2.293a1 1 0 001.414 1.414l4-4a1 1 0 000-1.414l-4-4a1 1 0 10-1.414 1.414l2.293 2.293H4a1 1 0 00-1 1v10a1 1 0 001 1z" })] }));
 };

package/esm/index.d.ts

@@ -775,7 +775,6 @@ export { getNewFocusableItem, getFirstFocusableItem } from "./utils/keyboardHelp
 export { LanguageProvider } from "./utils/localization/languageProvider";
 export { dictionaries, injectString } from "./utils/localization/translationsDictionary";
 export { useDirection } from "./utils/localization/useDirection";
-export { useDirectionalIcon } from "./utils/localization/useDirectionalIcon";
 export { useLanguage } from "./utils/localization/useLanguage";
 export { ThemeDark } from "./utils/theme/themeDark";
 export { ThemeDrive } from "./utils/theme/themeDrive";

package/esm/index.js

@@ -759,7 +759,6 @@ export { getNewFocusableItem, getFirstFocusableItem } from "./utils/keyboardHelp
 export { LanguageProvider } from "./utils/localization/languageProvider";
 export { dictionaries, injectString } from "./utils/localization/translationsDictionary";
 export { useDirection } from "./utils/localization/useDirection";
-export { useDirectionalIcon } from "./utils/localization/useDirectionalIcon";
 export { useLanguage } from "./utils/localization/useLanguage";
 export { ThemeDark } from "./utils/theme/themeDark";
 export { ThemeDrive } from "./utils/theme/themeDrive";

package/esm/lineChartMini/lineChartMini.js

@@ -18,7 +18,6 @@ import { getDefaultDatasetStyle } from "../lineChart/utils";
 import { useDrive } from "../utils/theme/useDrive";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { themeContext } from "../utils/theme/themeContext";
-import { useIsRTL } from "../utils/localization/useIsRTL";
 import { AccessibleChart } from "../chart/accessibleChart/accessibleChart";
 ChartJS.defaults.font = {
     family: "Roboto",
@@ -31,26 +30,17 @@ const defaultGridStyle = {
 const defaultGridBorderStyle = {
     display: false
 };
-const getDefaultOptions = (isRtl) => ({
+const defaultOptions = {
     responsive: true,
     maintainAspectRatio: false,
-    layout: {
-        padding: {
-            left: isRtl ? 16 : 0,
-            right: isRtl ? 0 : 16
-        }
-    },
     scales: {
         x: {
             grid: defaultGridStyle,
-            border: defaultGridBorderStyle,
-            reverse: isRtl,
-            offset: false
+            border: defaultGridBorderStyle
         },
         y: {
             grid: defaultGridStyle,
             border: defaultGridBorderStyle,
-            position: isRtl ? "right" : "left",
             ticks: {
                 display: false
             }
@@ -64,7 +54,7 @@ const getDefaultOptions = (isRtl) => ({
             enabled: false
         }
     }
-});
+};
 export const LineChartMini = (_a) => {
     var _b, _c;
     var { data, options = {} } = _a, rest = __rest(_a, ["data", "options"]);
@@ -72,7 +62,6 @@ export const LineChartMini = (_a) => {
     const isMobile = useMobile();
     const memoizedFontSize = useMemo(() => (isDrive ? (isMobile ? 14 : 16) : 12), [isDrive, isMobile]);
     const { dark } = useContext(themeContext);
-    const isRtl = useIsRTL();
     useEffect(() => {
         ChartJS.defaults.font = {
             family: "Roboto",
@@ -81,7 +70,6 @@ export const LineChartMini = (_a) => {
         ChartJS.defaults.color = dark ? "#FFFFFF" : "#1F2833";
     }, [memoizedFontSize, dark]);
     const adaptedData = Object.assign({}, data);
-    const defaultOptions = useMemo(() => getDefaultOptions(isRtl), [isRtl]);
     const adaptedOptions = deepMerge(defaultOptions, options);
     if (((_b = adaptedData.labels) === null || _b === void 0 ? void 0 : _b.length) === 2) {
         const maxLabelsCount = Math.max(...data.datasets.map(ds => ds.data.length));

package/esm/list/itemData/itemDataInternal.js

@@ -6,8 +6,6 @@ import { useLanguage } from "../../utils/localization/useLanguage";
 import { Button } from "../../button/button";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { IconChevronRight } from "../../icons/iconChevronRight";
-import { IconChevronLeft } from "../../icons/iconChevronLeft";
-import { useDirectionalIcon } from "../../utils/localization/useDirectionalIcon";
 import { IconDotVertical } from "../../icons/iconDotVertical";
 import { Menu } from "../../menu/menu";
 import { isActiveElement } from "../utils/isActiveElement";
@@ -89,7 +87,6 @@ const ItemDataInternalInner = ({
   const {
     translate
   } = useLanguage();
-  const ChevronIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
   const driveClassName = useMemo(() => isDrive ? isMobile ? "zen-item-data-drive" : "zen-item-data-drive-tablet" : "", [isDrive, isMobile]);
   const mobileClassName = useMobileClassName("zen-item-data");
   const aceClassName = useMemo(() => isTall ? "zen-item-data--tall" : "", [isTall]);
@@ -197,7 +194,7 @@ const ItemDataInternalInner = ({
           onClick: onClick,
           title: translate("Open"),
           "aria-label": translate("Open"),
-          children: _jsx(ChevronIcon, {
+          children: _jsx(IconChevronRight, {
             size: "large",
             className: "zen-item-data__click-icon"
           })

package/esm/list/listItem/listItem.js

@@ -12,8 +12,6 @@ import { useDriveClassName } from "../../utils/theme/useDriveClassName";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { useIconSize } from "../../utils/theme/useIconSize";
 import { IconChevronRight } from "../../icons/iconChevronRight";
-import { IconChevronLeft } from "../../icons/iconChevronLeft";
-import { useDirectionalIcon } from "../../utils/localization/useDirectionalIcon";
 import { isActiveElement } from "../utils/isActiveElement";
 import { useMobileClassName } from "../../utils/theme/useMobileClassName";
 injectString("cs", "More", "V\xEDce");
@@ -91,7 +89,6 @@ export const ListItem = ({
     translate
   } = useLanguage();
   const itemRef = useRef(null);
-  const ChevronIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
   const renderActions = useCallback(() => {
     if (!actions || actions.length === 0) {
       return null;
@@ -204,7 +201,7 @@ export const ListItem = ({
       link: link,
       target: target,
       title: translate("View details"),
-      children: _jsx(ChevronIcon, {
+      children: _jsx(IconChevronRight, {
         size: isMobile ? "huge" : "large",
         className: "zen-list-item__click-icon"
       })

package/esm/menu/components/controlledMenuList/controlledMenuList.js

@@ -17,12 +17,9 @@ import { generateId } from "../../../commonHelpers/generateId";
 import { PathProvider } from "../../contexts/pathProvider";
 import { MobileSheet } from "../../../mobileSheet/mobileSheet";
 import { isSeparator, MenuSeparator } from "../menuSeparator";
-import { IconArrowRight } from "../../../icons/iconArrowRight";
-import { useDirectionalIcon } from "../../../utils/localization/useDirectionalIcon";
 const ControlledMenuListBase = forwardRef(({ children, setIsOpen, isOpen, className = "", listClassName = "", ariaLabel, defaultTooltipAlignment, defaultAlignment, direction = "vertical" }, ref) => {
     const [deviceType, setDeviceType] = useState(DeviceType.Desktop);
     const isMobile = deviceType === DeviceType.Mobile;
-    const BackArrowIcon = useDirectionalIcon(IconArrowLeft, IconArrowRight);
     useDeviceType(setDeviceType);
     // True when mounted inside ControlledMenu, which injects setIsOpen and isOpen.
     // Standalone usage leaves both undefined.
@@ -113,7 +110,7 @@ const ControlledMenuListBase = forwardRef(({ children, setIsOpen, isOpen, classN
                 className,
                 listClassName,
                 applyDirection && direction === "horizontal" ? "zen-menu-item--horizontal" : ""
-            ]), children: [backParent ? (_jsx(MenuButton, { id: "root", name: getItemLabel(backParent), icon: BackArrowIcon, onClick: closeBranch, hasChildren: false, disabled: false }, "root")) : null, listContent] }) }));
+            ]), children: [backParent ? (_jsx(MenuButton, { id: "root", name: getItemLabel(backParent), icon: IconArrowLeft, onClick: closeBranch, hasChildren: false, disabled: false }, "root")) : null, listContent] }) }));
     const { sheetContent, sheetParent, sheetPathLength, sheetParentName } = useLastValidSheet(nestedContent, nestedParent, path, children);
     return (_jsxs(PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: [renderList(content, parent, divRefCallback), !isEmbedded && isMobile && (_jsxs(MobileSheet, { label: sheetParentName, isOpen: path.length > 0, triggerRef: internalRef, onHidePanel: closeAll, onCloseClick: closeAll, children: [_jsx(MobileSheet.Title, { children: sheetParentName }), _jsx(MobileSheet.Content, { children: renderList(sheetContent, sheetPathLength > 1 ? sheetParent : null, undefined, false, onKeyDownVertical) })] }))] }));
 });

package/esm/menu/components/menuButton.js

@@ -2,8 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement, useCallback, useMemo } from "react";
 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";
 import { useDrive } from "../../utils/theme/useDrive";
 import { getMenuButtonState } from "../utils/getMenuButtonState";
@@ -13,7 +11,6 @@ export const MenuButton = ({ id, onClick, hasChildren, disabled, icon, name, lin
     const { hasState, isActive } = getMenuButtonState(active, disabled);
     const driveMenuButtonActionClasses = useDriveClassName("zen-menu-button__action");
     const isDrive = useDrive();
-    const ChevronIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
     const linkEvents = useMemo(() => ({
         onKeyDown: e => {
             if (e.key === " ") {
@@ -49,7 +46,7 @@ export const MenuButton = ({ id, onClick, hasChildren, disabled, icon, name, lin
                 createElement(icon, {
                     size: isDrive ? "huge" : "large",
                     className: classNames(["zen-caption__pre-content", "zen-menu-button__icon"])
-                }), _jsx("span", { className: "zen-menu-button__action-text", children: name }), !!hasChildren && (_jsx(ChevronIcon, { size: isDrive ? "huge" : "large", className: classNames(["zen-caption__pre-content", "zen-menu-button__more-icon"]) }))] }));
+                }), _jsx("span", { className: "zen-menu-button__action-text", children: name }), !!hasChildren && (_jsx(IconChevronRight, { size: isDrive ? "huge" : "large", className: classNames(["zen-caption__pre-content", "zen-menu-button__more-icon"]) }))] }));
     const linkTemplate = (_jsxs("a", Object.assign({ "data-id": id, role: "menuitem", className: classNames([
             "zen-menu-button__action",
             "zen-caption",

package/esm/menu/utils/useMenuItemCore.js

@@ -3,16 +3,13 @@ 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 contentAlignment = alignment || alignmentContext.alignment || "right-top";
     const { path, onOpenBranch, closeBranch, navigatedViaKeyboardRef } = useContext(PathContext);
     const ref = useRef(null);
     const content = useMemo(() => buildMenuContent(children, isMobile, setIsOpen, className), [children, isMobile, setIsOpen, className]);

package/esm/nav/navItem/navItem.js

@@ -14,9 +14,7 @@ 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";
@@ -28,12 +26,11 @@ 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(ChevronIcon, { 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(IconChevronRight, { className: "zen-nav-item__title-icon", size: iconSize }) : null] })) : null] }));
 };
 const NavItemAction = ({ actionIcon, actionIconTitle = "", onActionIconClick, collapsed, isMenuItem, level = 1 }) => {
     const ActionIconComponent = actionIcon;

package/esm/pagination/paginationArrow.js

@@ -1,15 +1,13 @@
 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");
@@ -73,11 +71,6 @@ 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;
@@ -89,10 +82,10 @@ export const PaginationArrow = ({
     disabled: disabled,
     onClick: arrowButtonHandler,
     type: type === PaginationType.Compact ? ButtonType.TertiaryBlack : ButtonType.Secondary,
-    icon: type === PaginationType.Compact ? CompactIcon : NormalIcon,
+    icon: type === PaginationType.Compact ? IconChevronRight : IconArrowRight,
     iconSize: type === PaginationType.Compact ? SvgIconSize.Big : SvgIconSize.Large,
     iconPosition: ButtonIconPosition.Start,
-    iconClasses: "zen-pagination__arrow-navigation-button-icon"
+    iconClasses: classNames(["zen-pagination__arrow-navigation-button-icon", value === "previous" ? "zen-pagination__arrow-navigation-button-icon--rotate" : ""])
   });
 };
 export const TRANSLATIONS = ["Previous page", "Next page"];

package/esm/radioGroupRaw/radioGroupRaw.js

@@ -63,7 +63,6 @@ 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" : "",
-                        direction === "horizontal" ? "zen-radio--align-start" : ""
+                        size === "small" ? "zen-radio-group__item--small" : ""
                     ]), 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,6 +419,7 @@ 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[]) => number;
+export declare const getFirstIndex: (items: ISelectListItem[]) => 0 | -1;
 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,44 +35,19 @@ export const searchItemIndex = (items, searchStr) => {
         return content.toLocaleLowerCase().indexOf(searchStr.toLocaleLowerCase()) > -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 getFirstIndex = (items) => (items.length > 0 ? 0 : -1);
+export const getLastIndex = (items) => (items.length > 0 ? items.length - 1 : -1);
 export const getNextIndex = (currIndex, items) => {
-    var _a;
     if (items.length === 0) {
         return -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;
+    return currIndex + 1 >= items.length ? 0 : currIndex + 1;
 };
 export const getPrevIndex = (currIndex, items) => {
-    var _a;
     if (items.length === 0) {
         return -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;
+    return currIndex <= 0 || currIndex >= items.length ? items.length - 1 : currIndex - 1;
 };
 export const getFirstActiveIndex = (state, items, multiselect) => {
     for (let i = 0; i < items.length; i++) {

package/esm/selectList/selectList.js

@@ -48,9 +48,7 @@ export const SelectList = (_a) => {
         if (!multiselect && selectItemOnFocus) {
             dispatchState({ type: ListAction.FocusFirst, payload: { items } });
         }
-        if (!multiselect) {
-            dispatchState({ type: ListAction.Focus, payload: { items, 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,7 +117,8 @@ export const selectListReducer = (state, action) => {
                 newItemsState = updatedState;
             });
             const prevActiveItemId = getItemIdByIndex(state.itemsState, state.activeIndex);
-            const activeIndex = prevActiveItemId !== undefined ? getItemIndexById(newItemsState, prevActiveItemId) : -1;
+            const newActiveItemIndex = !!prevActiveItemId && getItemIndexById(newItemsState, prevActiveItemId);
+            const activeIndex = newActiveItemIndex ? newActiveItemIndex : -1;
             return Object.assign(Object.assign({}, state), { itemsState: newItemsState, activeIndex, isItemsStateChanged: false });
         }
         case ListAction.SetLevel: {

package/esm/selectList/selectListItem.js

@@ -3,12 +3,9 @@ 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;
@@ -30,5 +27,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(ChevronIcon, { 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(IconChevronRight, { size: "large" }) : null] }) }));
 };

package/esm/sortControl/sortControl.js

@@ -65,60 +65,6 @@ 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");
@@ -146,6 +92,7 @@ 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) {
@@ -202,6 +149,7 @@ 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"
@@ -214,9 +162,6 @@ 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, {
@@ -230,7 +175,7 @@ export const SortControl = ({
           size: isDrive ? "huge" : "large"
         })
       }),
-      alignment: "bottom-left",
+      alignment: MENU_POSITION,
       onOpenChange: isCurrentlyOpen => onOptionsToggle(isCurrentlyOpen),
       children: _jsx(SelectList, {
         id: "sortControlSelectList",
@@ -243,4 +188,4 @@ export const SortControl = ({
     }, popupKey)]
   });
 };
-export const TRANSLATIONS = ["Sort by", "Sort Options", "Change sort direction", "Ascending", "Descending"];
+export const TRANSLATIONS = ["Sort by", "Sort Options", "Change sort direction"];

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, activeId?: string, gridRef?: RefObject<HTMLElement | null>, onCloseDetailPanel?: () => void) => {
+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) => {
     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, activeId, gridRef, onCloseDetailPanel) => useMemo(() => {
+export const useTableChildren = (children, isMobile, selected, allSelected, clearSelection, selectAll, turnOffSelectAll, 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, children: bulkActionButtons }));
+            bulkActions = (_jsx(BulkActions, { gridType: isMobile ? DeviceType.Mobile : DeviceType.Desktop, selected: selected, allSelected: allSelected, onClearSelection: clearSelection, onSelectAll: selectAll, turnOffSelectAll: turnOffSelectAll, 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, activeId, onCloseDetailPanel]);
+}, [children, clearSelection, isMobile, selected, gridRef, allSelected, selectAll, turnOffSelectAll, activeId, onCloseDetailPanel]);

package/esm/table/flexible/columnsList.js

@@ -57,7 +57,6 @@ const SubColumnsList = ({
     showCheckbox: true,
     children: c.title
   })), [columns, sortColumnsInt, lastVisibleColumnId]);
-  const allDisabled = useMemo(() => items.every(item => item.disabled), [items]);
   const state = columns.reduce((res, c) => {
     res.set(c.id, settings.get(c.id) !== false ? CheckboxState.On : CheckboxState.Off);
     return res;
@@ -77,9 +76,8 @@ const SubColumnsList = ({
     title: title || translate("Select visible columns"),
     multiselect: true,
     showCheckbox: true,
-    onChange: onChangeItem,
-    disabled: allDisabled
-  }), [id, items, state, title, translate, onChangeItem, allDisabled]);
+    onChange: onChangeItem
+  }), [id, items, state, title, translate, onChangeItem]);
   if (!title) {
     return list;
   }

package/esm/table/selectable/useSelectableRows.d.ts

@@ -16,14 +16,6 @@ export interface ISelectableRowsOptions<T extends IRowEntity<N>, N extends IEnti
     checkboxTitle?: (entity: T | N) => string;
     headerTitle?: (state: SelectionState) => string;
     turnOffSelectAll?: boolean;
-    /**
-     * When `true`, the header checkbox emits the current page's IDs instead of `{ all: true }`.
-     * When `undefined`, falls back to `turnOffSelectAll` for backward compatibility.
-     *
-     * Note: avoid setting this to `false` alongside `turnOffSelectAll: true` — the checkbox
-     * will emit `{ all: true }` while the dropdown hides the "Select all" option, which is inconsistent.
-     */
-    checkboxSelectsCurrentPage?: boolean;
     checkboxPlaceholder?: boolean;
     strategy?: TSelectionStrategy;
     selectAll?: boolean;