@geotab/zenith 3.10.0-beta.3 → 3.10.0-beta.4

package/esm/dataGrid/cell/cell.js

@@ -4,7 +4,7 @@ import { classNames } from "../../commonHelpers/classNames/classNames";
 import { isPromiseLike } from "../columns/basicColumn";
 import { isActiveElement } from "../../list/utils/isActiveElement";
 import { zen } from "../../utils/zen";
-const Cell = ({ index, limited, visibleOnHover, isVisible, width, render, renderWrappers, renderPlaceholder, defaultValue, entity, colspan, className, onClick, isActive }) => {
+const Cell = ({ index, limited, visibleOnHover, isVisible, width, maxWidth, render, renderWrappers, renderPlaceholder, defaultValue, entity, colspan, className, onClick, isActive }) => {
     const [content, setContent] = useState("");
     const placeholderRenderer = useCallback(() => {
         const renderFn = renderPlaceholder || (() => "...");
@@ -69,6 +69,6 @@ const Cell = ({ index, limited, visibleOnHover, isVisible, width, render, render
             visibleOnHover ? "zen-data-grid__row-cell--visible-on-hover" : "",
             onClick ? "zen-data-grid__row-cell--clickable" : "",
             limited ? "zen-ellipsis" : ""
-        ]), style: { minWidth: width || "auto", maxWidth: width || "auto" }, role: "gridcell", children: content }));
+        ]), style: { minWidth: width || "auto", maxWidth: maxWidth ? `${Math.max(width !== null && width !== void 0 ? width : 0, maxWidth)}px` : width || "auto" }, role: "gridcell", children: content }));
 };
 export const DataGridCell = memo(Cell);

package/esm/dataGrid/dataGrid.js

@@ -49,7 +49,7 @@ const getHeaderPropsFromWrappers = wrappers => wrappers.reduce((result, wrapper)
   const props = (_a = wrapper.getHeaderProps) === null || _a === void 0 ? void 0 : _a.call(wrapper);
   return props ? Object.assign(Object.assign({}, result), props) : result;
 }, {});
-const getColumnWidth = defaultWidth => Math.floor(Math.max(defaultWidth, MIN_CELL_WIDTH));
+const getColumnWidth = (defaultWidth, minWidth) => Math.floor(Math.max(defaultWidth, minWidth !== null && minWidth !== void 0 ? minWidth : MIN_CELL_WIDTH));
 export const EmptyList = ({
   children
 }) => _jsx("div", {
@@ -144,12 +144,13 @@ const DataGridInner = ({
     setVisibleRows(visible);
   }, [entities]);
   const listOfDefaultWidthColumns = useMemo(() => columnsList.map(column => column.meta.defaultWidth), [columnsList]);
+  const listOfMinWidthColumns = useMemo(() => columnsList.map(column => column.meta.minWidth), [columnsList]);
   const {
     result: observerResult
   } = useResizeObserver({
     target: gridRef.current
   });
-  const allocatedSpace = listOfDefaultWidthColumns.reduce((acc, width) => acc + (width === undefined ? 0 : getColumnWidth(width)), 0);
+  const allocatedSpace = listOfDefaultWidthColumns.reduce((acc, width, index) => acc + (width === undefined ? 0 : getColumnWidth(width, listOfMinWidthColumns[index])), 0);
   const unallocatedSpace = observerResult && observerResult.contentRect.width - allocatedSpace || 0;
   const flexibleColumnsQty = listOfDefaultWidthColumns.filter(width => width === undefined).length;
   const flexibleColumnWidth = getColumnWidth(unallocatedSpace / flexibleColumnsQty);
@@ -172,18 +173,19 @@ const DataGridInner = ({
   }, [updateScroll, scheduleLazyRender]);
   const getCellParams = useCallback(columnIndex => {
     const defaultWidth = listOfDefaultWidthColumns[columnIndex];
+    const minWidth = listOfMinWidthColumns[columnIndex];
     const limited = !!defaultWidth && defaultWidth > 0;
     const isFirst = columnIndex === 0;
     const isLast = columnIndex === listOfDefaultWidthColumns.length - 1;
     // If the column is the last one or doesn't have a default width, it should be limited to the remaining space
-    const width = getColumnWidth(defaultWidth || flexibleColumnWidth);
+    const width = getColumnWidth(defaultWidth || flexibleColumnWidth, minWidth);
     return {
       limited,
       isFirst,
       isLast,
       width
     };
-  }, [listOfDefaultWidthColumns, flexibleColumnWidth]);
+  }, [listOfDefaultWidthColumns, listOfMinWidthColumns, flexibleColumnWidth]);
   const renderHeaderCell = useCallback((column, columnIndex) => {
     var _a;
     const {

package/esm/dataGrid/listColumn.d.ts

@@ -2,6 +2,8 @@ import { ReactNode } from "react";
 import { ColumnSortDirection } from "../table/table";
 export interface IListColumnMeta<T, N = T> {
     readonly defaultWidth?: number;
+    readonly minWidth?: number;
+    readonly maxWidth?: number;
     readonly defaultValue?: string;
     readonly lazyLoad?: boolean;
     readonly visibleOnHover?: boolean;

package/esm/dataGrid/row/row.js

@@ -3,10 +3,12 @@ import { memo, useCallback, useId, useMemo } from "react";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { DataGridCell } from "../cell/cell";
 export const MIN_CELL_WIDTH = 100;
-const getColumnWidth = (defaultWidth) => Math.floor(Math.max(defaultWidth, MIN_CELL_WIDTH));
+const getColumnWidth = (defaultWidth, minWidth) => Math.floor(Math.max(defaultWidth, minWidth !== null && minWidth !== void 0 ? minWidth : MIN_CELL_WIDTH));
 const Row = ({ id, entity, columns, visibleRows, flexibleColumnWidth, isLastRow, className, expanded, onExpandedChange, isTreeGrid, ariaPosinset, ariaSetsize, onClick, isActive }) => {
     const isVisible = visibleRows.has(entity.id);
     const listOfDefaultWidthColumns = useMemo(() => columns.map(column => column.meta.defaultWidth), [columns]);
+    const listOfMinWidthColumns = useMemo(() => columns.map(column => column.meta.minWidth), [columns]);
+    const listOfMaxWidthColumns = useMemo(() => columns.map(column => column.meta.maxWidth), [columns]);
     const getColWidth = useCallback((columnIndex, colspan) => {
         const colsp = colspan || 1;
         let columnWidth = 0;
@@ -15,26 +17,28 @@ const Row = ({ id, entity, columns, visibleRows, flexibleColumnWidth, isLastRow,
                 continue;
             }
             const defaultWidth = listOfDefaultWidthColumns[columnIndex + i];
+            const minWidth = listOfMinWidthColumns[columnIndex + i];
             // If the column is the last one or doesn't have a default width, it should be limited to the remaining space
-            const width = getColumnWidth(defaultWidth || flexibleColumnWidth);
+            const width = getColumnWidth(defaultWidth || flexibleColumnWidth, minWidth);
             columnWidth += width;
         }
         return columnWidth;
-    }, [flexibleColumnWidth, listOfDefaultWidthColumns]);
+    }, [flexibleColumnWidth, listOfDefaultWidthColumns, listOfMinWidthColumns]);
     const getCellParams = useCallback((columnIndex, colspan) => {
         const width = getColWidth(columnIndex, colspan);
         const defaultWidth = listOfDefaultWidthColumns[columnIndex];
+        const maxWidth = listOfMaxWidthColumns[columnIndex];
         const limited = !!defaultWidth && defaultWidth > 0;
         const isFirst = columnIndex === 0;
         const isLast = columnIndex === listOfDefaultWidthColumns.length - 1;
-        return { limited, isFirst, isLast, width };
-    }, [getColWidth, listOfDefaultWidthColumns]);
+        return { limited, isFirst, isLast, width, maxWidth };
+    }, [getColWidth, listOfDefaultWidthColumns, listOfMaxWidthColumns]);
     const mainRowId = useId();
     const renderCells = useCallback((rowEntity, isNested) => columns.reduce((acc, column, index) => {
         const colspanFn = column.colspan;
         let colspan = colspanFn ? (typeof colspanFn === "function" ? colspanFn(rowEntity) : colspanFn) : undefined;
         colspan = colspan && colspan > 1 ? colspan : undefined;
-        const { limited, width } = getCellParams(index, colspan);
+        const { limited, width, maxWidth } = getCellParams(index, colspan);
         if (acc.colspan > 0) {
             acc.colspan--;
             return acc;
@@ -49,7 +53,7 @@ const Row = ({ id, entity, columns, visibleRows, flexibleColumnWidth, isLastRow,
                     ? column.columnComponent.renderNested.bind(column.columnComponent)
                     : column.columnComponent.render.bind(column.columnComponent))
             : column.columnComponent.render.bind(column.columnComponent);
-        acc.cells.push(_jsx(DataGridCell, { render: e => renderFn(e, isNested), renderPlaceholder: column.meta.renderPlaceholder, renderWrappers: renderWrappers, defaultValue: column.meta.defaultValue, entity: rowEntity, index: index, limited: limited, visibleOnHover: column.meta.visibleOnHover, width: column.meta.visibleOnHover ? 0 : width, isVisible: isVisible, colspan: colspan, onClick: !isNested && onExpandedChange ? () => onExpandedChange(!expanded) : onClick ? () => onClick(rowEntity.id) : undefined, isActive: isActive, className: isNested ? "zen-data-grid__row-cell--nested" : "" }, `${rowEntity.id}_${column.name}`));
+        acc.cells.push(_jsx(DataGridCell, { render: e => renderFn(e, isNested), renderPlaceholder: column.meta.renderPlaceholder, renderWrappers: renderWrappers, defaultValue: column.meta.defaultValue, entity: rowEntity, index: index, limited: limited, visibleOnHover: column.meta.visibleOnHover, width: column.meta.visibleOnHover ? 0 : width, maxWidth: column.meta.visibleOnHover ? undefined : maxWidth, isVisible: isVisible, colspan: colspan, onClick: !isNested && onExpandedChange ? () => onExpandedChange(!expanded) : onClick ? () => onClick(rowEntity.id) : undefined, isActive: isActive, className: isNested ? "zen-data-grid__row-cell--nested" : "" }, `${rowEntity.id}_${column.name}`));
         return acc;
     }, { cells: [], colspan: 0 }).cells, [columns, expanded, getCellParams, isVisible, onExpandedChange, isActive, onClick]);
     const cells = useMemo(() => renderCells(entity, false), [entity, renderCells]);

package/esm/dataGrid/withFlexibleColumns/components/columnSettingsList.js

@@ -18,6 +18,7 @@ const SubColumnsList = ({ title, columns, settings, disabledColumns, onChange, s
         showCheckbox: true,
         children: c.title
     })), [columns, disabledColumns, sortColumnsInt]);
+    const allDisabled = useMemo(() => items.every(item => item.disabled), [items]);
     const state = columns.reduce((res, c) => {
         res.set(c.id, settings.get(c.name) !== false ? CheckboxState.On : CheckboxState.Off);
         return res;
@@ -30,7 +31,7 @@ const SubColumnsList = ({ title, columns, settings, disabledColumns, onChange, s
         });
         onChange && onChange(newSettings);
     }, [columns, settings, onChange]);
-    const list = useMemo(() => _jsx(SelectList, { id: id, items: items, value: state, title: title || "", multiselect: true, showCheckbox: true, onChange: onChangeItem }), [id, items, state, title, onChangeItem]);
+    const list = useMemo(() => (_jsx(SelectList, { id: id, items: items, value: state, title: title || "", multiselect: true, showCheckbox: true, onChange: onChangeItem, disabled: allDisabled })), [id, items, state, title, onChangeItem, allDisabled]);
     if (!title) {
         return list;
     }

package/esm/dataGrid/withSelectableRows/components/bulkActions/bulkActions.d.ts

@@ -7,6 +7,10 @@ import { DeviceType } from "../../../../commonHelpers/hooks/deviceType";
 type TBulkAction = IBulkActionLink | IBulkActionButton;
 export interface IBulkActionsProps extends IZenComponentProps {
     selected: number;
+    /**
+     * When `true`, displays "All selected" instead of a count, and enables action buttons
+     * even when `selected` is 0 (i.e., cross-page "select all" is active).
+     */
     allSelected?: boolean;
     onClearSelection: () => void;
     onSelectAll?: () => void;

package/esm/dateRangeRaw/utils/parseLabel.js

@@ -7,5 +7,5 @@ export const parseLabel = (option, dateFormat, translate, toLocalFn) => {
         localeFrom.getFullYear() === localeTo.getFullYear()) {
         return formatDate(localeFrom, dateFormat, translate);
     }
-    return `${formatDate(localeFrom, dateFormat, translate)} - ${formatDate(localeTo, dateFormat, translate)}`;
+    return `${formatDate(localeFrom, dateFormat, translate)} – ${formatDate(localeTo, dateFormat, translate)}`;
 };

package/esm/dropdownRaw/dropdownList.d.ts

@@ -15,7 +15,6 @@ export interface IDropdownList extends IZenComponentProps {
     backButtonName?: string;
     isAllSelected?: boolean;
     isSelectAllActive?: boolean;
-    shouldBlockItems?: boolean;
     listData: ICheckboxListWithActionOption[] | ISelectListItem[];
     isWithFooter: boolean;
     width?: number;
@@ -41,6 +40,6 @@ interface IDropdownEmptyList extends Pick<IDropdownList, "className" | "width" |
     hasError: boolean;
 }
 export declare const EmptyList: ({ className, width, onClearClick, onApplyClick, onCancelClick, hasApplyButton, isApplyDisabled, isClearButtonDisabled, isWithFooter, hasError }: IDropdownEmptyList) => import("react/jsx-runtime").JSX.Element;
-export declare const DropdownList: ({ onBackButtonClick, onSelectAllClick, onClearClick, onApplyClick, onCancelClick, onChange, onSelect, onSingleSelect, listData, isSelectAllActive, shouldBlockItems, backButtonName, width, minWidth, isSelectAllButtonDisable, hasSelectAllButton, filterName, isMultiselect, hasApplyButton, isApplyDisabled, isClearButtonDisabled, activeValue, forceSelection, isWithFooter, isMobile, handleCheckboxChange, checkboxLabel, isChecked, listElementRef, listId }: IDropdownList) => import("react/jsx-runtime").JSX.Element;
+export declare const DropdownList: ({ onBackButtonClick, onSelectAllClick, onClearClick, onApplyClick, onCancelClick, onChange, onSelect, onSingleSelect, listData, isSelectAllActive, backButtonName, width, minWidth, isSelectAllButtonDisable, hasSelectAllButton, filterName, isMultiselect, hasApplyButton, isApplyDisabled, isClearButtonDisabled, activeValue, forceSelection, isWithFooter, isMobile, handleCheckboxChange, checkboxLabel, isChecked, listElementRef, listId }: IDropdownList) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];
 export {};

package/esm/dropdownRaw/dropdownList.js

@@ -293,7 +293,6 @@ export const DropdownList = ({
   onSingleSelect,
   listData,
   isSelectAllActive,
-  shouldBlockItems,
   backButtonName,
   width,
   minWidth,
@@ -393,15 +392,11 @@ export const DropdownList = ({
       });
       return values;
     };
-    const multiselectOptions = shouldBlockItems ? listData.map(item => Object.assign(Object.assign({}, item), {
-      blocked: true,
-      checked: false
-    })) : listData;
     return _jsx("div", {
       className: "zen-dropdown-list__elements",
       ref: listElementRef,
       children: isMultiselect ? _jsx(CheckboxListWithAction, {
-        options: multiselectOptions,
+        options: listData,
         label: "",
         onChange: handleChange,
         onClick: handleClick
@@ -417,7 +412,7 @@ export const DropdownList = ({
         value: createValue(listData, activeValue)
       })
     });
-  }, [listElementRef, isMultiselect, shouldBlockItems, listData, handleChange, handleClick, handleSingleChange, translate, selectListId, forceSelection, activeValue]);
+  }, [listElementRef, isMultiselect, listData, handleChange, handleClick, handleSingleChange, translate, selectListId, forceSelection, activeValue]);
   return _jsxs("div", Object.assign({
     className: classNames(["zen-dropdown-list", driveComponentClass || ""])
   }, styleWidth, {

package/esm/dropdownRaw/dropdownRaw.js

@@ -526,12 +526,18 @@ export const DropdownRaw = props => {
   }, [setChecked, setSearch]);
   const debouncedGetData = useDebounce((signal, searchValue, isChecked) => getData ? (isCheckboxMode ? getData(signal, searchValue, isChecked) : getData(signal, searchValue)).then(dta => handleData(dta, searchValue)).catch(handleError) : customGetData(searchValue).then(dta => handleData(dta, searchValue)).catch(handleError), 200);
   const controlData = useCallback((signal, searchValue, isChecked) => {
-    !isQueryMode && dispatchState({
-      type: StateActionType.ShowWaiting,
-      payload: undefined
-    });
-    isQueryMode ? handleQueryMode(searchValue, isChecked) : debouncedGetData(signal, searchValue, isChecked);
-  }, [debouncedGetData, handleQueryMode, isQueryMode]);
+    if (isQueryMode) {
+      handleQueryMode(searchValue, isChecked);
+    } else if (!getData && dataItems && !searchValue) {
+      handleData(dataItems, "");
+    } else {
+      dispatchState({
+        type: StateActionType.ShowWaiting,
+        payload: undefined
+      });
+      debouncedGetData(signal, searchValue, isChecked);
+    }
+  }, [debouncedGetData, handleData, handleQueryMode, isQueryMode, getData, dataItems]);
   useEffect(() => {
     var _a;
     const timeoutId = (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
@@ -856,7 +862,6 @@ export const DropdownRaw = props => {
         filterName: isMobile ? undefined : filterName,
         isAllSelected: currentAllSelected ? currentAllSelected : isSearchMode ? isEveryItemSelected(getListDataWithDisabled(state.listData, state.isNestedList), state.selectedIds) : currentAllSelected === undefined ? isAllChildrenSelected(state, state.currentId || state.rootId) : false,
         isSelectAllActive: isFullSelectionMode ? currentAllSelected : selectAllActiveForCurrentLevel,
-        shouldBlockItems: !state.inputValue && !isFullSelectionMode && selectAllActiveForCurrentLevel,
         isMultiselect: multiselect,
         forceSelection: forceSelection,
         listData: currentListData,

package/esm/filtersBar/filtersContainer/filtersContainer.js

@@ -4,8 +4,10 @@ import { ButtonIconPosition, TextIconButton } from "../../textIconButton/textIco
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { useEffect, useRef, useState, Children, cloneElement, useCallback } from "react";
 import { IconChevronRight } from "../../icons/iconChevronRight";
+import { IconChevronLeft } from "../../icons/iconChevronLeft";
 import { useLanguage } from "../../utils/localization/useLanguage";
 import { useDriveClassName } from "../../utils/theme/useDriveClassName";
+import { useIsRTL } from "../../utils/localization/useIsRTL";
 import { zen } from "../../utils/zen";
 injectString("cs", "Scroll left", "P\u0159ej\xEDt doleva");
 injectString("da-DK", "Scroll left", "Rul til venstre");
@@ -76,6 +78,10 @@ const getScrollButtonType = element => {
   }
   return "start";
 };
+const getScrollIcons = isRTL => ({
+  start: isRTL ? IconChevronRight : IconChevronLeft,
+  end: isRTL ? IconChevronLeft : IconChevronRight
+});
 export const FiltersContainer = ({
   className,
   children
@@ -85,6 +91,11 @@ export const FiltersContainer = ({
   const {
     translate
   } = useLanguage();
+  const isRTL = useIsRTL();
+  const {
+    start: startScrollIcon,
+    end: endScrollIcon
+  } = getScrollIcons(isRTL);
   const gradientClass = "zen-filters-toolbar__gradient";
   const scrollerClass = "zen-filters-toolbar__scroller";
   const driveClassNameScroller = useDriveClassName(scrollerClass);
@@ -197,10 +208,9 @@ export const FiltersContainer = ({
     }), _jsx(TextIconButton, {
       title: translate("Scroll left"),
       className: classNames(["zen-filters-toolbar__scroller", driveClassNameScroller || "", "zen-filters-toolbar__start", showLeft ? `${scrollerClass}--visible` : "", isHiddenDisplay.left ? `${scrollerClass}--hidden` : ""]),
-      icon: IconChevronRight,
+      icon: startScrollIcon,
       iconPosition: ButtonIconPosition.Start,
-      onClick: handleScrollButtonClick(-scrollableStep),
-      iconClasses: "zen-filters-toolbar__start-icon"
+      onClick: handleScrollButtonClick(-scrollableStep)
     }), _jsx("div", {
       ref: scrollableRef,
       className: classNames(["zen-filters-toolbar__scrollable", !isHiddenDisplay.left ? "has-left-scroller" : "", !isHiddenDisplay.right ? "has-right-scroller" : ""]),
@@ -213,7 +223,7 @@ export const FiltersContainer = ({
     }), _jsx(TextIconButton, {
       title: translate("Scroll right"),
       className: classNames([scrollerClass, driveClassNameScroller || "", "zen-filters-toolbar__end", showRight ? `${scrollerClass}--visible` : "", isHiddenDisplay.right ? `${scrollerClass}--hidden` : ""]),
-      icon: IconChevronRight,
+      icon: endScrollIcon,
       onClick: handleScrollButtonClick(scrollableStep),
       iconPosition: ButtonIconPosition.End
     })]

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/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,27 +35,52 @@ 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++) {
-        if (state.get(items[i].id) === CheckboxState.On) {
+        if (!items[i].disabled && state.get(items[i].id) === CheckboxState.On) {
             return i;
         }
     }
-    return multiselect && items.length > 0 ? 0 : -1;
+    return multiselect ? items.findIndex(item => !item.disabled) : -1;
 };
 export const getItemsState = (items, value, multiselect) => {
     let forceUncheck = false;

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/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");
@@ -149,7 +203,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 +215,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, {
@@ -188,4 +244,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]);

package/esm/table/flexible/columnsList.js

@@ -57,6 +57,7 @@ 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;
@@ -76,8 +77,9 @@ const SubColumnsList = ({
     title: title || translate("Select visible columns"),
     multiselect: true,
     showCheckbox: true,
-    onChange: onChangeItem
-  }), [id, items, state, title, translate, onChangeItem]);
+    onChange: onChangeItem,
+    disabled: allDisabled
+  }), [id, items, state, title, translate, onChangeItem, allDisabled]);
   if (!title) {
     return list;
   }

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

@@ -16,6 +16,14 @@ 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;

package/esm/table/selectable/useSelectableRows.js

@@ -179,8 +179,16 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
     return translate("Deselect all");
   }, [selectable, selectableState, state, translate]);
   const isEntityChecked = useCallback((entity, isNested) => isRowChecked(selections, state, selectable === null || selectable === void 0 ? void 0 : selectable.strategy, entity, isNested), [selections, state, selectable === null || selectable === void 0 ? void 0 : selectable.strategy]);
+  const hasSelectable = !!selectable;
+  const selectableCheckboxSelectsCurrentPage = selectable === null || selectable === void 0 ? void 0 : selectable.checkboxSelectsCurrentPage;
+  const selectableTurnOffSelectAll = selectable === null || selectable === void 0 ? void 0 : selectable.turnOffSelectAll;
+  const selectableCheckboxInHeader = selectable === null || selectable === void 0 ? void 0 : selectable.checkboxInHeader;
+  const selectableSelectionLimit = selectable === null || selectable === void 0 ? void 0 : selectable.selectionLimit;
+  const selectableHeader = selectable === null || selectable === void 0 ? void 0 : selectable.header;
+  const checkboxEmitsCurrentPage = selectableCheckboxSelectsCurrentPage !== null && selectableCheckboxSelectsCurrentPage !== void 0 ? selectableCheckboxSelectsCurrentPage : selectableTurnOffSelectAll;
+  const checkboxInHeaderValue = selectableCheckboxInHeader !== undefined ? selectableCheckboxInHeader : selectableSelectionLimit !== undefined ? false : undefined;
   const wrapper = useMemo(() => {
-    if (!selectable) {
+    if (!hasSelectable) {
       return null;
     }
     return {
@@ -224,7 +232,7 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
           onChange: newValue => {
             var _a, _b;
             if (newValue) {
-              const newState = selectable.turnOffSelectAll ? SelectionState.CurrentPage : SelectionState.All;
+              const newState = checkboxEmitsCurrentPage ? SelectionState.CurrentPage : SelectionState.All;
               setState(newState);
               onChangeSelectionState(newState);
             } else {
@@ -242,18 +250,18 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
             }
           },
           calculateSelectionState: () => selectableState,
-          checkboxInHeader: selectable.checkboxInHeader !== undefined ? selectable.checkboxInHeader : selectable.selectionLimit !== undefined ? false : undefined,
-          header: selectable.header,
+          checkboxInHeader: checkboxInHeaderValue,
+          header: selectableHeader,
           onSelect: newState => {
             setState(newState);
             onChangeSelectionState(newState);
           },
-          turnOffSelectAll: selectable.turnOffSelectAll
+          turnOffSelectAll: selectableTurnOffSelectAll
         });
         return cell;
       }
     };
-  }, [checkboxDisabled, checkboxTitle, checkboxVisible, headerTitle, onChangeSelectionState, onSelectListener, selectable, selectableState, state, isMobile, checkboxPlaceholder, isEntityChecked, entities, setSelectMode]);
+  }, [checkboxDisabled, checkboxTitle, checkboxVisible, headerTitle, onChangeSelectionState, onSelectListener, hasSelectable, checkboxEmitsCurrentPage, checkboxInHeaderValue, selectableHeader, selectableTurnOffSelectAll, selectable, selectableState, state, isMobile, checkboxPlaceholder, isEntityChecked, entities, setSelectMode]);
   const selectableFeedWrapper = useCallback((primaryData, secondaryData, entity, isNested) => {
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (!entity) {