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

package/esm/checkboxListWithAction/checkboxListWithAction.js

@@ -4,8 +4,6 @@ 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}");
@@ -129,7 +127,6 @@ 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`;
@@ -364,7 +361,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(ChevronIcon, {
+        children: [getLabelColorInfo(option.color, option.isWithAction, option.partialChecked, otherArgs), option.isWithAction && _jsx(IconChevronRight, {
           size: "large"
         })]
       }))]

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

@@ -4,12 +4,9 @@ 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";
-    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" })) }));
+    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" })) }));
 };

package/esm/controlledPopup/controlledPopup.d.ts

@@ -9,7 +9,6 @@ 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,12 +3,10 @@ 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;
@@ -23,5 +21,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: 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 })));
+    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 })));
 };

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

@@ -13,9 +13,8 @@ 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, maxWidth, 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, 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, maxWidth, render, renderWrappers, renderPlaceholder, defaultValue, entity, colspan, className, onClick, isActive }) => {
+const Cell = ({ index, limited, visibleOnHover, isVisible, width, 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, maxWidth, rend
             visibleOnHover ? "zen-data-grid__row-cell--visible-on-hover" : "",
             onClick ? "zen-data-grid__row-cell--clickable" : "",
             limited ? "zen-ellipsis" : ""
-        ]), style: { minWidth: width || "auto", maxWidth: maxWidth ? `${Math.max(width !== null && width !== void 0 ? width : 0, maxWidth)}px` : width || "auto" }, role: "gridcell", children: content }));
+        ]), style: { minWidth: width || "auto", maxWidth: 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, minWidth) => Math.floor(Math.max(defaultWidth, minWidth !== null && minWidth !== void 0 ? minWidth : MIN_CELL_WIDTH));
+const getColumnWidth = defaultWidth => Math.floor(Math.max(defaultWidth, MIN_CELL_WIDTH));
 export const EmptyList = ({
   children
 }) => _jsx("div", {
@@ -144,13 +144,12 @@ 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, index) => acc + (width === undefined ? 0 : getColumnWidth(width, listOfMinWidthColumns[index])), 0);
+  const allocatedSpace = listOfDefaultWidthColumns.reduce((acc, width) => acc + (width === undefined ? 0 : getColumnWidth(width)), 0);
   const unallocatedSpace = observerResult && observerResult.contentRect.width - allocatedSpace || 0;
   const flexibleColumnsQty = listOfDefaultWidthColumns.filter(width => width === undefined).length;
   const flexibleColumnWidth = getColumnWidth(unallocatedSpace / flexibleColumnsQty);
@@ -173,19 +172,18 @@ 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, minWidth);
+    const width = getColumnWidth(defaultWidth || flexibleColumnWidth);
     return {
       limited,
       isFirst,
       isLast,
       width
     };
-  }, [listOfDefaultWidthColumns, listOfMinWidthColumns, flexibleColumnWidth]);
+  }, [listOfDefaultWidthColumns, flexibleColumnWidth]);
   const renderHeaderCell = useCallback((column, columnIndex) => {
     var _a;
     const {
@@ -224,7 +222,6 @@ 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,8 +2,6 @@ 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,8 +16,7 @@ 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, active }: 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 }: IDataGridRow<T, N>) => import("react/jsx-runtime").JSX.Element;

package/esm/dataGrid/row/row.js

@@ -3,12 +3,10 @@ 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, 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 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 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;
@@ -17,28 +15,26 @@ 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, minWidth);
+            const width = getColumnWidth(defaultWidth || flexibleColumnWidth);
             columnWidth += width;
         }
         return columnWidth;
-    }, [flexibleColumnWidth, listOfDefaultWidthColumns, listOfMinWidthColumns]);
+    }, [flexibleColumnWidth, listOfDefaultWidthColumns]);
     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, maxWidth };
-    }, [getColWidth, listOfDefaultWidthColumns, listOfMaxWidthColumns]);
+        return { limited, isFirst, isLast, width };
+    }, [getColWidth, listOfDefaultWidthColumns]);
     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, maxWidth } = getCellParams(index, colspan);
+        const { limited, width } = getCellParams(index, colspan);
         if (acc.colspan > 0) {
             acc.colspan--;
             return acc;
@@ -53,9 +49,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, 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}`));
+        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}`));
         return acc;
-    }, { cells: [], colspan: 0 }).cells, [columns, expanded, getCellParams, isVisible, onExpandedChange, isActive, active, onClick]);
+    }, { cells: [], colspan: 0 }).cells, [columns, expanded, getCellParams, isVisible, onExpandedChange, isActive, 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,7 +18,6 @@ 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;
@@ -31,7 +30,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, disabled: allDisabled })), [id, items, state, title, onChangeItem, allDisabled]);
+    const list = useMemo(() => _jsx(SelectList, { id: id, items: items, value: state, title: title || "", multiselect: true, showCheckbox: true, onChange: onChangeItem }), [id, items, state, title, onChangeItem]);
     if (!title) {
         return list;
     }

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

@@ -7,10 +7,6 @@ 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,8 +6,6 @@ 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";
@@ -62,7 +60,6 @@ export const DateRangeInner = ({
     translate
   } = useLanguage();
   const isMobileView = !!setShowMobileCalendar;
-  const ChevronIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
   const {
     dateFormat,
     weekStartsOnSunday,
@@ -101,7 +98,7 @@ export const DateRangeInner = ({
         }) : null]
       }), _jsx("div", {
         className: "zen-date-range-inner__mobile-custom-icon-wrapper",
-        children: _jsx(ChevronIcon, {
+        children: _jsx(IconChevronRight, {
           size: "large"
         })
       })]
@@ -122,7 +119,7 @@ export const DateRangeInner = ({
       key: option.id
     }));
     return optionsToPass;
-  }, [ChevronIcon, calendarLabel, isMobileView, onOptionSelect, options, selection, setShowMobileCalendar]);
+  }, [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,7 +21,6 @@ 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";
@@ -291,8 +290,6 @@ 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");
@@ -699,7 +696,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(PrevStepperIcon, {
+        children: _jsx(IconChevronLeftSmall, {
           size: isDrive || isMobile ? "huge" : "large"
         })
       }), popupTriggerComponent, _jsx("button", {
@@ -709,7 +706,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(NextStepperIcon, {
+        children: _jsx(IconChevronRightSmall, {
           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,18 +543,12 @@ 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) => {
-    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]);
+    !isQueryMode && dispatchState({
+      type: StateActionType.ShowWaiting,
+      payload: undefined
+    });
+    isQueryMode ? handleQueryMode(searchValue, isChecked) : debouncedGetData(signal, searchValue, isChecked);
+  }, [debouncedGetData, handleQueryMode, isQueryMode]);
   useEffect(() => {
     var _a;
     const timeoutId = (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => {