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

package/README.md

@@ -54,13 +54,21 @@ Zenith library provides components defined in Zenith Design System. It includes
 - `Nav` component: support show/hide separator between Core and Apps sections
 - `Nav` empty state support
 - Allow multiple columns to be disabled in `ColumnsList`
+- Fix `SelectList` keyboard focus skipping disabled items
 - Flip icons for Arabic (RTL) language
-- `Dropdown` search and select-all improvements
+- `Dropdown` select-all button shows active state when all items are selected
+- Add `ariaLabel` prop to `CardButton` for accessible name override
+- Fix `GroupsFilter` dropdown scrolling into blank space
+- Fix `Dropdown` ARIA pattern — non-search dropdowns now use `menu` role instead of `dialog`
+- Reverse RTL slide-in animation direction for `Toast` and `Notification`
 - Fix `SidePanel` not animating open due to RTL regression
 - Add `closeOnScroll` prop to close `ContextMenu` on scroll
 - Fix checkbox accessibility by moving input inside label wrapper
 - Fix multi-page selection in `Table` selectable rows
 - Add `titleAs` prop to `Card` title to control heading tag (`h1`–`h6`)
+- Convert selection and toggle inputs (`Checkbox`, `Radio`, `Toggle`) to rem units
+- Convert text, search, and file inputs to rem units
+- Convert utility and standalone components to rem units
 
 ### 3.9.2
 

package/dist/commonStyles/pillStyles/pillContent.less

@@ -1,7 +1,7 @@
 @import "../common.less";
 @import "../typography/typography.less";
 
-@pill-min-width-default: 30px;
+@pill-min-width-default: (30 / @rem);
 @pill-max-width-default: 200px;
 
 // TODO: update to .zen-pill-content after old pill component removed remove
@@ -14,12 +14,12 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    border-radius: 30px;
+    border-radius: (30 / @rem);
     height: @pill-height;
     display: grid;
     grid-auto-flow: column;
 
-    gap: 8px;
+    gap: (8 / @rem);
 
     &--icon-left {
         grid-template-columns: 12px 1fr;
@@ -38,18 +38,18 @@
 
         &.zen-pill-new-content--empty {
             grid-template-columns: 12px 18px;
-            gap: 8px;
+            gap: (8 / @rem);
         }
     }
 
     &--hidden {
-        gap: 4px;
+        gap: (4 / @rem);
     }
     &.zen-pill-new-content--drive,
     &.zen-pill-new-content--drive-tablet {
         height: @pill-height--drive;
         .zen-pill-non-actionable__icon {
-            min-width: 16px;
+            min-width: (16 / @rem);
             max-width: 16px;
             height: 16px;
         }
@@ -67,7 +67,7 @@
 
             &.zen-pill-new-content--empty {
                 grid-template-columns: 16px 22px;
-                gap: 8px;
+                gap: (8 / @rem);
             }
         }
     }
@@ -75,7 +75,7 @@
         height: @pill-height--mobile;
         .body-m-400-short();
         .zen-pill-non-actionable__icon {
-            min-width: 16px;
+            min-width: (16 / @rem);
             max-width: 16px;
             height: 16px;
         }
@@ -93,7 +93,7 @@
 
             &.zen-pill-new-content--empty {
                 grid-template-columns: 16px 22px;
-                gap: 8px;
+                gap: (8 / @rem);
             }
         }
     }

package/dist/commonStyles/pillStyles/pillStyles.less

@@ -7,7 +7,7 @@
     color: var(--text-primary);
     align-items: center;
     justify-content: space-between;
-    padding: 4px 12px 4px 12px;
-    border-radius: 30px;
+    padding: (4 / @rem) (12 / @rem) (4 / @rem) (12 / @rem);
+    border-radius: (30 / @rem);
     background: var(--backgrounds-content-1);
 }

package/dist/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/dist/dataGrid/cell/cell.js

@@ -7,7 +7,7 @@ const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const basicColumn_1 = require("../columns/basicColumn");
 const isActiveElement_1 = require("../../list/utils/isActiveElement");
 const zen_1 = require("../../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] = (0, react_1.useState)("");
     const placeholderRenderer = (0, react_1.useCallback)(() => {
         const renderFn = renderPlaceholder || (() => "...");
@@ -72,6 +72,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 }));
 };
 exports.DataGridCell = (0, react_1.memo)(Cell);

package/dist/dataGrid/dataGrid.js

@@ -57,7 +57,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, exports.MIN_CELL_WIDTH));
+const getColumnWidth = (defaultWidth, minWidth) => Math.floor(Math.max(defaultWidth, minWidth !== null && minWidth !== void 0 ? minWidth : exports.MIN_CELL_WIDTH));
 const EmptyList = ({
   children
 }) => (0, jsx_runtime_1.jsx)("div", {
@@ -154,12 +154,13 @@ const DataGridInner = ({
     setVisibleRows(visible);
   }, [entities]);
   const listOfDefaultWidthColumns = (0, react_1.useMemo)(() => columnsList.map(column => column.meta.defaultWidth), [columnsList]);
+  const listOfMinWidthColumns = (0, react_1.useMemo)(() => columnsList.map(column => column.meta.minWidth), [columnsList]);
   const {
     result: observerResult
   } = (0, useResizeObserver_1.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);
@@ -182,18 +183,19 @@ const DataGridInner = ({
   }, [updateScroll, scheduleLazyRender]);
   const getCellParams = (0, react_1.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 = (0, react_1.useCallback)((column, columnIndex) => {
     var _a;
     const {

package/dist/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/dist/dataGrid/row/row.js

@@ -6,10 +6,12 @@ const react_1 = require("react");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const cell_1 = require("../cell/cell");
 exports.MIN_CELL_WIDTH = 100;
-const getColumnWidth = (defaultWidth) => Math.floor(Math.max(defaultWidth, exports.MIN_CELL_WIDTH));
+const getColumnWidth = (defaultWidth, minWidth) => Math.floor(Math.max(defaultWidth, minWidth !== null && minWidth !== void 0 ? minWidth : exports.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 = (0, react_1.useMemo)(() => columns.map(column => column.meta.defaultWidth), [columns]);
+    const listOfMinWidthColumns = (0, react_1.useMemo)(() => columns.map(column => column.meta.minWidth), [columns]);
+    const listOfMaxWidthColumns = (0, react_1.useMemo)(() => columns.map(column => column.meta.maxWidth), [columns]);
     const getColWidth = (0, react_1.useCallback)((columnIndex, colspan) => {
         const colsp = colspan || 1;
         let columnWidth = 0;
@@ -18,26 +20,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 = (0, react_1.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 = (0, react_1.useId)();
     const renderCells = (0, react_1.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;
@@ -52,7 +56,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((0, jsx_runtime_1.jsx)(cell_1.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((0, jsx_runtime_1.jsx)(cell_1.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 = (0, react_1.useMemo)(() => renderCells(entity, false), [entity, renderCells]);

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

@@ -21,6 +21,7 @@ const SubColumnsList = ({ title, columns, settings, disabledColumns, onChange, s
         showCheckbox: true,
         children: c.title
     })), [columns, disabledColumns, sortColumnsInt]);
+    const allDisabled = (0, react_1.useMemo)(() => items.every(item => item.disabled), [items]);
     const state = columns.reduce((res, c) => {
         res.set(c.id, settings.get(c.name) !== false ? checkboxState_1.CheckboxState.On : checkboxState_1.CheckboxState.Off);
         return res;
@@ -33,7 +34,7 @@ const SubColumnsList = ({ title, columns, settings, disabledColumns, onChange, s
         });
         onChange && onChange(newSettings);
     }, [columns, settings, onChange]);
-    const list = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(selectList_1.SelectList, { id: id, items: items, value: state, title: title || "", multiselect: true, showCheckbox: true, onChange: onChangeItem }), [id, items, state, title, onChangeItem]);
+    const list = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(selectList_1.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/dist/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/dist/dateRangeRaw/utils/parseLabel.js

@@ -10,6 +10,6 @@ const parseLabel = (option, dateFormat, translate, toLocalFn) => {
         localeFrom.getFullYear() === localeTo.getFullYear()) {
         return (0, formatDate_1.formatDate)(localeFrom, dateFormat, translate);
     }
-    return `${(0, formatDate_1.formatDate)(localeFrom, dateFormat, translate)} - ${(0, formatDate_1.formatDate)(localeTo, dateFormat, translate)}`;
+    return `${(0, formatDate_1.formatDate)(localeFrom, dateFormat, translate)} – ${(0, formatDate_1.formatDate)(localeTo, dateFormat, translate)}`;
 };
 exports.parseLabel = parseLabel;

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

@@ -333,7 +333,6 @@ const DropdownList = ({
   onSingleSelect,
   listData,
   isSelectAllActive,
-  shouldBlockItems,
   backButtonName,
   width,
   minWidth,
@@ -433,15 +432,11 @@ const DropdownList = ({
       });
       return values;
     };
-    const multiselectOptions = shouldBlockItems ? listData.map(item => Object.assign(Object.assign({}, item), {
-      blocked: true,
-      checked: false
-    })) : listData;
     return (0, jsx_runtime_1.jsx)("div", {
       className: "zen-dropdown-list__elements",
       ref: listElementRef,
       children: isMultiselect ? (0, jsx_runtime_1.jsx)(checkboxListWithAction_1.CheckboxListWithAction, {
-        options: multiselectOptions,
+        options: listData,
         label: "",
         onChange: handleChange,
         onClick: handleClick
@@ -457,7 +452,7 @@ 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 (0, jsx_runtime_1.jsxs)("div", Object.assign({
     className: (0, classNames_1.classNames)(["zen-dropdown-list", driveComponentClass || ""])
   }, styleWidth, {

package/dist/dropdownRaw/dropdownRaw.js

@@ -534,12 +534,18 @@ const DropdownRaw = props => {
   }, [setChecked, setSearch]);
   const debouncedGetData = (0, useDebounce_1.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 = (0, react_1.useCallback)((signal, searchValue, isChecked) => {
-    !isQueryMode && dispatchState({
-      type: stateActionType_1.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_1.StateActionType.ShowWaiting,
+        payload: undefined
+      });
+      debouncedGetData(signal, searchValue, isChecked);
+    }
+  }, [debouncedGetData, handleData, handleQueryMode, isQueryMode, getData, dataItems]);
   (0, react_1.useEffect)(() => {
     var _a;
     const timeoutId = (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
@@ -864,7 +870,6 @@ const DropdownRaw = props => {
         filterName: isMobile ? undefined : filterName,
         isAllSelected: currentAllSelected ? currentAllSelected : isSearchMode ? (0, dropdownHelper_1.isEveryItemSelected)((0, dropdownHelper_1.getListDataWithDisabled)(state.listData, state.isNestedList), state.selectedIds) : currentAllSelected === undefined ? (0, dropdownHelper_1.isAllChildrenSelected)(state, state.currentId || state.rootId) : false,
         isSelectAllActive: isFullSelectionMode ? currentAllSelected : selectAllActiveForCurrentLevel,
-        shouldBlockItems: !state.inputValue && !isFullSelectionMode && selectAllActiveForCurrentLevel,
         isMultiselect: multiselect,
         forceSelection: forceSelection,
         listData: currentListData,

package/dist/filtersBar/filtersContainer/filtersContainer.js

@@ -12,8 +12,10 @@ const textIconButton_1 = require("../../textIconButton/textIconButton");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const react_1 = require("react");
 const iconChevronRight_1 = require("../../icons/iconChevronRight");
+const iconChevronLeft_1 = require("../../icons/iconChevronLeft");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
 const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
+const useIsRTL_1 = require("../../utils/localization/useIsRTL");
 const zen_1 = require("../../utils/zen");
 injectString("cs", "Scroll left", "P\u0159ej\xEDt doleva");
 injectString("da-DK", "Scroll left", "Rul til venstre");
@@ -84,6 +86,10 @@ const getScrollButtonType = element => {
   }
   return "start";
 };
+const getScrollIcons = isRTL => ({
+  start: isRTL ? iconChevronRight_1.IconChevronRight : iconChevronLeft_1.IconChevronLeft,
+  end: isRTL ? iconChevronLeft_1.IconChevronLeft : iconChevronRight_1.IconChevronRight
+});
 const FiltersContainer = ({
   className,
   children
@@ -93,6 +99,11 @@ const FiltersContainer = ({
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
+  const isRTL = (0, useIsRTL_1.useIsRTL)();
+  const {
+    start: startScrollIcon,
+    end: endScrollIcon
+  } = getScrollIcons(isRTL);
   const gradientClass = "zen-filters-toolbar__gradient";
   const scrollerClass = "zen-filters-toolbar__scroller";
   const driveClassNameScroller = (0, useDriveClassName_1.useDriveClassName)(scrollerClass);
@@ -205,10 +216,9 @@ const FiltersContainer = ({
     }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
       title: translate("Scroll left"),
       className: (0, classNames_1.classNames)(["zen-filters-toolbar__scroller", driveClassNameScroller || "", "zen-filters-toolbar__start", showLeft ? `${scrollerClass}--visible` : "", isHiddenDisplay.left ? `${scrollerClass}--hidden` : ""]),
-      icon: iconChevronRight_1.IconChevronRight,
+      icon: startScrollIcon,
       iconPosition: textIconButton_1.ButtonIconPosition.Start,
-      onClick: handleScrollButtonClick(-scrollableStep),
-      iconClasses: "zen-filters-toolbar__start-icon"
+      onClick: handleScrollButtonClick(-scrollableStep)
     }), (0, jsx_runtime_1.jsx)("div", {
       ref: scrollableRef,
       className: (0, classNames_1.classNames)(["zen-filters-toolbar__scrollable", !isHiddenDisplay.left ? "has-left-scroller" : "", !isHiddenDisplay.right ? "has-right-scroller" : ""]),
@@ -221,7 +231,7 @@ const FiltersContainer = ({
     }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
       title: translate("Scroll right"),
       className: (0, classNames_1.classNames)([scrollerClass, driveClassNameScroller || "", "zen-filters-toolbar__end", showRight ? `${scrollerClass}--visible` : "", isHiddenDisplay.right ? `${scrollerClass}--hidden` : ""]),
-      icon: iconChevronRight_1.IconChevronRight,
+      icon: endScrollIcon,
       onClick: handleScrollButtonClick(scrollableStep),
       iconPosition: textIconButton_1.ButtonIconPosition.End
     })]