@geotab/zenith 3.10.0 → 3.11.0-beta.0

package/esm/chart/lineChart/getDefaultOptions.js

@@ -44,9 +44,11 @@ const getFormatFromDateRange = (minDate, maxDate, ticks) => {
     }
     return { unit: "millisecond", format: "HH:mm:ss.l" };
 };
-export const getDefaultOptions = (yAxis, xAxis, isTimedData, ticks, isDark, translate) => {
+export const getDefaultOptions = (yAxis, xAxis, isTimedData, ticks, isDark, translate, isRtl = false) => {
     const time = getFormatFromDateRange(xAxis.minDate, xAxis.maxDate, ticks);
     const textColor = isDark ? "#C0CCD8" : "#4E677E";
+    const primaryYPosition = isRtl ? "right" : "left";
+    const secondaryYPosition = isRtl ? "left" : "right";
     const scales = {
         x: {
             title: {
@@ -55,6 +57,7 @@ export const getDefaultOptions = (yAxis, xAxis, isTimedData, ticks, isDark, tran
             grid: {
                 display: false
             },
+            reverse: isRtl,
             type: isTimedData ? "time" : "linear",
             time: isTimedData
                 ? {
@@ -101,7 +104,7 @@ export const getDefaultOptions = (yAxis, xAxis, isTimedData, ticks, isDark, tran
             border: defaultGridBorderStyle,
             min: yAxis[i].min,
             max: yAxis[i].max,
-            position: i === 0 ? "left" : "right"
+            position: i === 0 ? primaryYPosition : secondaryYPosition
         };
     }
     return {

package/esm/chart/lineChart.js

@@ -31,6 +31,7 @@ import { getDefaultOptions } from "./lineChart/getDefaultOptions";
 import { useHidden } from "./utils/useHidden";
 import { LinePlugin } from "./plugins/linePlugin/linePlugin";
 import { useLanguage } from "../utils/localization/useLanguage";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 import { useChartTicks } from "./lineChart/useChartTicks";
 import { ChartInsight } from "./chartInsight/chartInsight";
 import { getXAxisMeta } from "./utils/getXAxisMeta";
@@ -43,6 +44,7 @@ export const LineChart = (_a) => {
     const { translate } = useLanguage();
     const isDrive = useDrive();
     const isMobile = useMobile();
+    const isRtl = useIsRTL();
     const fontSize = useMemo(() => (isDrive ? (isMobile ? 14 : 16) : 12), [isDrive, isMobile]);
     const { dark } = useContext(themeContext);
     useEffect(() => {
@@ -73,7 +75,7 @@ export const LineChart = (_a) => {
     const yAxisMeta = useMemo(() => getYAxisMeta(chartData), [chartData]);
     const xAxisMeta = useMemo(() => getXAxisMeta(chartData, isTimedData), [chartData, isTimedData]);
     const { chartRef, ticks } = useChartTicks();
-    const defOptions = useMemo(() => getDefaultOptions(yAxisMeta, xAxisMeta, isTimedData, ticks, dark, translate), [yAxisMeta, xAxisMeta, isTimedData, ticks, dark, translate]);
+    const defOptions = useMemo(() => getDefaultOptions(yAxisMeta, xAxisMeta, isTimedData, ticks, dark, translate, isRtl), [yAxisMeta, xAxisMeta, isTimedData, ticks, dark, translate, isRtl]);
     const chartOptions = deepMerge(defOptions, options);
     const chartTooltip = useMemo(() => LinePlugin(tooltipId, tooltip, dark), [tooltip, tooltipId, dark]);
     const chartLegend = useMemo(() => legendPlugin(legendId, legend, isDrive, isHidden, toggleHidden), [isDrive, legend, legendId, isHidden, toggleHidden]);
@@ -82,5 +84,5 @@ export const LineChart = (_a) => {
     const intSummary = useSummary(summary, chartData);
     const isMainHidden = useMemo(() => isHidden(0), [isHidden]);
     const toggleMainDataset = useCallback(() => toggleHidden(0), [toggleHidden]);
-    return (_jsxs("div", { className: classNames(["zen-chart", className || ""]), ref: chartRef, children: [insight ? _jsx(ChartInsight, Object.assign({}, insight)) : null, summary !== false ? _jsx(Summary, Object.assign({}, intSummary, { onToggle: toggleMainDataset, isEnabled: isMainHidden })) : null, (isDrive ? undefined : xLabels) || yLabels.length > 0 ? _jsx(ChartAxis, { xLabel: isDrive ? undefined : xLabels, yLabels: yLabels }) : null, _jsx("div", { className: "zen-chart__chart", children: _jsx(Line, Object.assign({ width: 100, height: 100, options: chartOptions, data: chartData, plugins: chartPlugins, "aria-hidden": true }, rest)) }), _jsx("div", { className: "zen-chart__legend", id: legendId }), isDrive && xLabels ? _jsx("div", { className: "zen-chart__x-axis", children: xLabels }) : null, _jsx(AccessibleChart, { type: "line", data: chartData, options: chartOptions })] }));
+    return (_jsxs("div", { className: classNames(["zen-chart", className || ""]), ref: chartRef, children: [insight ? _jsx(ChartInsight, Object.assign({}, insight)) : null, summary !== false ? _jsx(Summary, Object.assign({}, intSummary, { onToggle: toggleMainDataset, isEnabled: isMainHidden })) : null, (isDrive ? undefined : xLabels) || yLabels.length > 0 ? (_jsx(ChartAxis, { xLabel: isDrive ? undefined : xLabels, yLabels: yLabels, yAxisPosition: isRtl ? "left" : "right" })) : null, _jsx("div", { className: "zen-chart__chart", children: _jsx(Line, Object.assign({ width: 100, height: 100, options: chartOptions, data: chartData, plugins: chartPlugins, "aria-hidden": true }, rest)) }), _jsx("div", { className: "zen-chart__legend", id: legendId }), isDrive && xLabels ? _jsx("div", { className: "zen-chart__x-axis", children: xLabels }) : null, _jsx(AccessibleChart, { type: "line", data: chartData, options: chartOptions })] }));
 };

package/esm/checkboxListWithAction/checkboxListWithAction.js

@@ -4,6 +4,8 @@ import { Fragment, useCallback, useEffect, useId, useRef, useState } from "react
 import { Checkbox } from "../checkbox/checkbox";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { IconChevronRight } from "../icons/iconChevronRight";
+import { IconChevronLeft } from "../icons/iconChevronLeft";
+import { useDirectionalIcon } from "../utils/localization/useDirectionalIcon";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 injectString("cs", "Number of selected child groups - {count}", "Po\u010Det vybran\xFDch pod\u0159\xEDzen\xFDch skupin\xA0\u2013 {count}");
@@ -127,6 +129,7 @@ export const CheckboxListWithAction = ({
     translate
   } = useLanguage();
   const driveComponentClass = useDriveClassName("zen-checkbox-list-with-action");
+  const ChevronIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
   const listId = useId();
   const checkboxId = `${listId}_check_list-item_`;
   const navigationInstructionsId = `${listId}_navigation_instructions`;
@@ -361,7 +364,7 @@ export const CheckboxListWithAction = ({
       })), _jsxs("div", Object.assign({
         className: "zen-checkbox-list-with-action__label-info"
       }, otherArgs, {
-        children: [getLabelColorInfo(option.color, option.isWithAction, option.partialChecked, otherArgs), option.isWithAction && _jsx(IconChevronRight, {
+        children: [getLabelColorInfo(option.color, option.isWithAction, option.partialChecked, otherArgs), option.isWithAction && _jsx(ChevronIcon, {
           size: "large"
         })]
       }))]

package/esm/commonHelpers/arrowNavigation/components/arrowButton/arrowButton.js

@@ -4,9 +4,12 @@ import { Button } from "../../../../button/button";
 import { IconChevronLeft } from "../../../../icons/iconChevronLeft";
 import { IconChevronRight } from "../../../../icons/iconChevronRight";
 import { useDrive } from "../../../../utils/theme/useDrive";
+import { useDirectionalIcon } from "../../../../utils/localization/useDirectionalIcon";
 import { driveIconSize } from "../../../../svgIcon/svgIconSize";
 export const ArrowNavButton = ({ value, isHidden, disabled, className, arrowButtonHandler, onMouseDown, onMouseUp }) => {
     const isDrive = useDrive();
     const iconSize = isDrive ? driveIconSize("large") : "large";
-    return (_jsx(Button, { type: "tertiary-black", className: classNames(["zen-arrow-nav-button", isHidden ? "zen-arrow-nav-button--invisible" : "", className !== null && className !== void 0 ? className : ""]), "aria-label": value, disabled: disabled, onClick: arrowButtonHandler, "data-action": value, onMouseDown: onMouseDown, onMouseUp: onMouseUp, children: value === "left" ? (_jsx(IconChevronLeft, { size: iconSize, className: "zen-arrow-nav-button__icon" })) : (_jsx(IconChevronRight, { size: iconSize, className: "zen-arrow-nav-button__icon" })) }));
+    const LeftIcon = useDirectionalIcon(IconChevronLeft, IconChevronRight);
+    const RightIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
+    return (_jsx(Button, { type: "tertiary-black", className: classNames(["zen-arrow-nav-button", isHidden ? "zen-arrow-nav-button--invisible" : "", className !== null && className !== void 0 ? className : ""]), "aria-label": value, disabled: disabled, onClick: arrowButtonHandler, "data-action": value, onMouseDown: onMouseDown, onMouseUp: onMouseUp, children: value === "left" ? (_jsx(LeftIcon, { size: iconSize, className: "zen-arrow-nav-button__icon" })) : (_jsx(RightIcon, { size: iconSize, className: "zen-arrow-nav-button__icon" })) }));
 };

package/esm/controlledPopup/controlledPopup.d.ts

@@ -9,6 +9,7 @@ import { TAlignment as TAlignmentAbsolute } from "../absolute/absolute";
 export type TAlignment = "top" | "top-left" | "top-right" | "left" | "left-top" | "left-bottom" | "right" | "right-top" | "right-bottom" | "bottom" | "bottom-left" | "bottom-right";
 export interface IControlledPopup extends IZenComponentProps {
     triggerRef: RefObject<HTMLElement | null>;
+    /** Alignment of the popup relative to its trigger. Defaults to `"bottom-left"` (flips to `"bottom-right"` in RTL). */
     alignment?: TAlignmentAbsolute;
     id?: string;
     className?: string;

package/esm/controlledPopup/controlledPopup.js

@@ -3,10 +3,12 @@ import { useEffect, useId } from "react";
 import { Absolute } from "../absolute/absolute";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useClientReady } from "../commonHelpers/hooks/useClientReady";
+import { useRTLAlignment } from "../utils/localization/useRTLAlignment";
 export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, closeOnScroll, preventAttributesAutoSet, focusOnOpen, role = "dialog" }) => {
     const autoId = useId();
     const popupId = id || autoId;
     const isClientReady = useClientReady();
+    const rtlAlignment = useRTLAlignment(alignment !== null && alignment !== void 0 ? alignment : "bottom-left");
     useEffect(() => {
         if (!triggerRef.current || !isClientReady) {
             return;
@@ -21,5 +23,5 @@ export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, cl
         triggerRef.current.setAttribute("aria-expanded", isOpen ? "true" : "false");
         triggerRef.current.setAttribute("aria-controls", popupId);
     }, [triggerRef, isOpen, popupId, preventAttributesAutoSet, isClientReady]);
-    return (_jsx(Absolute, Object.assign({ triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: classNames(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll }, (role !== false && typeof role === "string" ? { role } : {}), (role !== false && ariaLabel ? { ariaLabel } : {}), (role !== false && ariaLabelledby ? { ariaLabelledby } : {}), { recalculateOnScroll: recalculateOnScroll, closeOnScroll: closeOnScroll, focusOnOpen: focusOnOpen, children: children })));
+    return (_jsx(Absolute, Object.assign({ triggerRef: triggerRef, alignment: rtlAlignment, id: popupId, isOpen: isOpen, className: classNames(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll }, (role !== false && typeof role === "string" ? { role } : {}), (role !== false && ariaLabel ? { ariaLabel } : {}), (role !== false && ariaLabelledby ? { ariaLabelledby } : {}), { recalculateOnScroll: recalculateOnScroll, closeOnScroll: closeOnScroll, focusOnOpen: focusOnOpen, children: children })));
 };

package/esm/dataGrid/cell/cell.d.ts

@@ -13,8 +13,9 @@ export interface IDataGridCell<T extends IEntityWithId> extends IZenComponentPro
     defaultValue: string | undefined;
     entity: T;
     width?: number;
+    maxWidth?: number;
     colspan?: number;
     onClick?: () => void;
     isActive?: boolean;
 }
-export declare const DataGridCell: <T extends IEntityWithId>({ index, limited, visibleOnHover, isVisible, width, render, renderWrappers, renderPlaceholder, defaultValue, entity, colspan, className, onClick, isActive }: IDataGridCell<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGridCell: <T extends IEntityWithId>({ index, limited, visibleOnHover, isVisible, width, maxWidth, render, renderWrappers, renderPlaceholder, defaultValue, entity, colspan, className, onClick, isActive }: IDataGridCell<T>) => import("react/jsx-runtime").JSX.Element;

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 {
@@ -222,6 +224,7 @@ const DataGridInner = ({
     expanded: expandedRows && expandedRows.indexOf(entity.id) > -1,
     onExpandedChange: entity.children && entity.children.length > 0 ? isExpanded => onExpandedChange && onExpandedChange(entity.id, isExpanded) : undefined,
     isActive: active === entity.id,
+    active: active,
     onClick: onClick,
     isTreeGrid: isTreeGrid,
     ariaPosinset: entityIndex + 1,

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.d.ts

@@ -16,7 +16,8 @@ export interface IDataGridRow<T extends IRowEntity<N>, N extends IEntityWithId>
     ariaPosinset: number;
     ariaSetsize: number;
     isActive?: boolean;
+    active?: string;
     onClick?: (id: string) => void;
 }
 export declare const MIN_CELL_WIDTH = 100;
-export declare const DataGridRow: <T extends IRowEntity<N>, N extends IEntityWithId = T>({ id, entity, columns, visibleRows, flexibleColumnWidth, isLastRow, className, expanded, onExpandedChange, isTreeGrid, ariaPosinset, ariaSetsize, onClick, isActive }: IDataGridRow<T, N>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGridRow: <T extends IRowEntity<N>, N extends IEntityWithId = T>({ id, entity, columns, visibleRows, flexibleColumnWidth, isLastRow, className, expanded, onExpandedChange, isTreeGrid, ariaPosinset, ariaSetsize, onClick, isActive, active }: IDataGridRow<T, N>) => import("react/jsx-runtime").JSX.Element;

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 Row = ({ id, entity, columns, visibleRows, flexibleColumnWidth, isLastRow, className, expanded, onExpandedChange, isTreeGrid, ariaPosinset, ariaSetsize, onClick, isActive }) => {
+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, active }) => {
     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,9 +53,9 @@ 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: isNested ? active === rowEntity.id : isActive || active === rowEntity.id, 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]);
+    }, { cells: [], colspan: 0 }).cells, [columns, expanded, getCellParams, isVisible, onExpandedChange, isActive, active, onClick]);
     const cells = useMemo(() => renderCells(entity, false), [entity, renderCells]);
     const nestedCells = useMemo(() => (expanded && entity.children ? entity.children : []).map(nestedEntity => renderCells(nestedEntity, true)), [entity.children, expanded, renderCells]);
     return (_jsxs(_Fragment, { children: [_jsx("tr", { "data-row-id": id, id: mainRowId, role: "row", "aria-level": isTreeGrid ? 1 : undefined, "aria-posinset": isTreeGrid ? ariaPosinset : undefined, "aria-setsize": isTreeGrid ? ariaSetsize : undefined, "aria-expanded": isTreeGrid ? expanded : undefined, className: classNames(["zen-data-grid__row", className || "", isLastRow ? "zen-data-grid__row--last" : ""]), children: cells }, mainRowId), nestedCells.map((nestedRow, index) => (_jsx("tr", { id: `${mainRowId}_child_${index}`, role: "row", "aria-level": 2, "aria-posinset": index + 1, "aria-setsize": nestedCells.length, className: "zen-data-grid__row zen-data-grid__row--nested", children: nestedRow }, `${mainRowId}_child_${index}`)))] }));

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/dateRangeInner/dateRangeInner.js

@@ -6,6 +6,8 @@ import { useLanguage } from "../utils/localization/useLanguage";
 import { userFormatContext } from "../utils/userFormat/userFormatContext";
 import { deformatDate, formatDate } from "../utils/formatDate";
 import { IconChevronRight } from "../icons/iconChevronRight";
+import { IconChevronLeft } from "../icons/iconChevronLeft";
+import { useDirectionalIcon } from "../utils/localization/useDirectionalIcon";
 import { parseLabel } from "../dateRange/dateRange";
 import { normalizeDates } from "../filtersBar/components/filtersBarPeriodPicker/normalizeDates";
 import { classNames } from "../commonHelpers/classNames/classNames";
@@ -60,6 +62,7 @@ export const DateRangeInner = ({
     translate
   } = useLanguage();
   const isMobileView = !!setShowMobileCalendar;
+  const ChevronIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
   const {
     dateFormat,
     weekStartsOnSunday,
@@ -98,7 +101,7 @@ export const DateRangeInner = ({
         }) : null]
       }), _jsx("div", {
         className: "zen-date-range-inner__mobile-custom-icon-wrapper",
-        children: _jsx(IconChevronRight, {
+        children: _jsx(ChevronIcon, {
           size: "large"
         })
       })]
@@ -119,7 +122,7 @@ export const DateRangeInner = ({
       key: option.id
     }));
     return optionsToPass;
-  }, [calendarLabel, isMobileView, onOptionSelect, options, selection, setShowMobileCalendar]);
+  }, [ChevronIcon, calendarLabel, isMobileView, onOptionSelect, options, selection, setShowMobileCalendar]);
   const calendarId = useMemo(() => `${id}-calendar`, [id]);
   const optionSelectHandler = useCallback(e => {
     let selectedValue = e.target.value;

package/esm/dateRangeRaw/dateRangeRaw.js

@@ -21,6 +21,7 @@ import { areMapsEqual } from "./utils/areMapsEqual";
 import { IconChevronLeftSmall } from "../icons/iconChevronLeftSmall";
 import { useDrive } from "../utils/theme/useDrive";
 import { IconChevronRightSmall } from "../icons/iconChevronRightSmall";
+import { useDirectionalIcon } from "../utils/localization/useDirectionalIcon";
 import { ReviewTextControl } from "../formGroup/components/reviewTextControl";
 import { Chip } from "../chip/chip";
 import { useChipStatus } from "../chip/chipStatusProvider";
@@ -290,6 +291,8 @@ export const DateRangeRaw = props => {
   } = useLanguage();
   const isMobile = useMobile();
   const isDrive = useDrive();
+  const PrevStepperIcon = useDirectionalIcon(IconChevronLeftSmall, IconChevronRightSmall);
+  const NextStepperIcon = useDirectionalIcon(IconChevronRightSmall, IconChevronLeftSmall);
   const chipStatus = useChipStatus();
   const driveWrapperTriggerClassName = useDriveClassName("zen-date-range-wrapper");
   const mobileWrapperTriggerClassName = useMobileClassName("zen-date-range-wrapper");
@@ -696,7 +699,7 @@ export const DateRangeRaw = props => {
         className: classNames(["zen-date-range__stepper", "zen-date-range__stepper--left"]),
         title: translate("Previous"),
         "aria-label": translate("Previous date period"),
-        children: _jsx(IconChevronLeftSmall, {
+        children: _jsx(PrevStepperIcon, {
           size: isDrive || isMobile ? "huge" : "large"
         })
       }), popupTriggerComponent, _jsx("button", {
@@ -706,7 +709,7 @@ export const DateRangeRaw = props => {
         className: classNames(["zen-date-range__stepper", "zen-date-range__stepper--right"]),
         title: translate("Next"),
         "aria-label": translate("Next date period"),
-        children: _jsx(IconChevronRightSmall, {
+        children: _jsx(NextStepperIcon, {
           size: isDrive || isMobile ? "huge" : "large"
         })
       })]

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/dropdownRaw.js

@@ -543,12 +543,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, () => {