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

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 {

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.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 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,7 +49,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, 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}`));
+        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, onClick]);
     const cells = useMemo(() => renderCells(entity, false), [entity, renderCells]);

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

@@ -20,4 +20,4 @@ export const Dropdown = (_a) => {
     var props = __rest(_a, []);
     return _jsx(DropDownFormField, Object.assign({}, props));
 };
-export const TRANSLATIONS = ["Filter by group", "Open filter", "Clear search", "Select all", "Clear", "Back", "No data"];
+export const TRANSLATIONS = ["Filter by group", "Open filter", "Clear search", "Select all", "Deselect all", "Clear", "Back", "No data"];

package/esm/dropdownRaw/dropdownList.d.ts

@@ -13,8 +13,7 @@ export interface IDropdownList extends IZenComponentProps {
     onSelect: (id: string) => void;
     onSingleSelect: (reset: boolean, selected?: string) => void;
     backButtonName?: string;
-    isAllSelected?: boolean;
-    isSelectAllActive?: boolean;
+    isAllSelected: boolean;
     listData: ICheckboxListWithActionOption[] | ISelectListItem[];
     isWithFooter: boolean;
     width?: number;
@@ -40,6 +39,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, 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, isAllSelected, 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

@@ -148,6 +148,33 @@ injectString("zh-Hans", "Apply", "\u5E94\u7528");
 injectString("zh-TW", "Apply", "\u5957\u7528");
 injectString("ro-RO", "Apply", "Aplica\u021Bi");
 injectString("ar-SA", "Apply", "\u062A\u0637\u0628\u064A\u0642");
+injectString("cs", "Deselect all", "Zru\u0161it v\xFDb\u011Br v\u0161ech");
+injectString("da-DK", "Deselect all", "Frav\xE6lg alle");
+injectString("de", "Deselect all", "Auswahl f\xFCr alle aufheben");
+injectString("en", "Deselect all", "Deselect all");
+injectString("es", "Deselect all", "Deseleccionar todo");
+injectString("fi-FI", "Deselect all", "Poista kaikki valinnat");
+injectString("fr", "Deselect all", "D\xE9s\xE9lectionner tout");
+injectString("fr-FR", "Deselect all", "D\xE9s\xE9lectionner tout");
+injectString("hu-HU", "Deselect all", "Ne v\xE1lassz ki semmit.");
+injectString("id", "Deselect all", "Batalkan pilih semua");
+injectString("it", "Deselect all", "Deselezionare tutto");
+injectString("ja", "Deselect all", "\u3059\u3079\u3066\u3092\u9078\u629E\u89E3\u9664");
+injectString("ko-KR", "Deselect all", "\uBAA8\uB450 \uC120\uD0DD \uCDE8\uC18C");
+injectString("ms", "Deselect all", "Nyahpilih semua");
+injectString("nb-NO", "Deselect all", "Fjern alle valg");
+injectString("nl", "Deselect all", "Alles deselecteren");
+injectString("pl", "Deselect all", "Usu\u0144 wyb\xF3r wszystkich");
+injectString("pt-BR", "Deselect all", "Desmarcar tudo");
+injectString("pt-PT", "Deselect all", "Desmarcar tudo");
+injectString("sk-SK", "Deselect all", "Zru\u0161 v\xFDber v\u0161etk\xFDch.");
+injectString("sv", "Deselect all", "Avmarkera alla");
+injectString("th", "Deselect all", "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01\u0E01\u0E32\u0E23\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14");
+injectString("tr", "Deselect all", "T\xFCm\xFCn\xFCn se\xE7imini iptal et");
+injectString("zh-Hans", "Deselect all", "\u53D6\u6D88\u5168\u9009");
+injectString("zh-TW", "Deselect all", "\u53D6\u6D88\u5168\u9078");
+injectString("ro-RO", "Deselect all", "Deselecta\u021Bi tot");
+injectString("ar-SA", "Deselect all", "\u0625\u0644\u063A\u0627\u0621 \u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0643\u0644");
 injectString("cs", "Select all", "Vybrat v\u0161e");
 injectString("da-DK", "Select all", "V\xE6lg alle");
 injectString("de", "Select all", "Alle ausw\xE4hlen");
@@ -292,7 +319,7 @@ export const DropdownList = ({
   onSelect,
   onSingleSelect,
   listData,
-  isSelectAllActive,
+  isAllSelected,
   backButtonName,
   width,
   minWidth,
@@ -321,7 +348,7 @@ export const DropdownList = ({
   const internalListId = useId();
   const selectListId = listId || internalListId;
   const handleSelectAllClick = () => {
-    onSelectAllClick(isSelectAllActive === true);
+    onSelectAllClick(isAllSelected);
   };
   const handleBackButtonKeyDown = useCallback(event => {
     if (event.key === "ArrowLeft") {
@@ -349,14 +376,13 @@ export const DropdownList = ({
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     forceSelection ? onSingleSelect(false, newActiveEl || activeValue) : onSingleSelect(false, newActiveEl);
   }, [activeValue, forceSelection, onSingleSelect]);
-  const selectButtonLabel = translate("Select all");
-  const getActionButton = (label, title, icon, isDisabled, clickHandler, size, onKeyDown, isSelected) => _jsx("button", {
+  const selectButtonLabel = isAllSelected ? translate("Deselect all") : translate("Select all");
+  const getActionButton = (label, title, icon, isDisabled, clickHandler, size, onKeyDown) => _jsx("button", {
     type: "button",
     disabled: isDisabled,
     onClick: clickHandler,
     onKeyDown: onKeyDown,
-    "aria-pressed": isSelected,
-    className: classNames(["zen-dropdown-list__item zen-dropdown-list__item--interactive zen-dropdown-list__action-button zen-dropdown-list__action-button-back", isSelected ? "zen-dropdown-list__action-button--selected" : ""]),
+    className: "zen-dropdown-list__item zen-dropdown-list__item--interactive zen-dropdown-list__action-button zen-dropdown-list__action-button-back",
     title: title,
     children: _jsxs(_Fragment, {
       children: [React.createElement(icon, {
@@ -430,7 +456,7 @@ export const DropdownList = ({
     }) : null, backButtonName ? _jsx("div", {
       className: "zen-dropdown-list__item-wrapper",
       children: getActionButton(backButtonName, translate("Back"), IconBackArrow, false, onBackButtonClick, "large", handleBackButtonKeyDown)
-    }) : null, hasSelectAllButton ? getActionButton(selectButtonLabel, selectButtonLabel, IconCheckRadio, !!isSelectAllButtonDisable, handleSelectAllClick, isDrive ? "huger" : "huge", undefined, isSelectAllActive) : null, listDataComponent, isWithFooter ? _jsxs("div", {
+    }) : null, hasSelectAllButton ? getActionButton(selectButtonLabel, selectButtonLabel, IconCheckRadio, !!isSelectAllButtonDisable, handleSelectAllClick, isDrive ? "huger" : "huge") : null, listDataComponent, isWithFooter ? _jsxs("div", {
       className: "zen-dropdown-list__footer",
       children: [_jsx(Button, {
         onClick: isMultiselect ? onClearClick : handleClearClick,
@@ -458,4 +484,4 @@ export const DropdownList = ({
     }) : null]
   }));
 };
-export const TRANSLATIONS = ["Select all", "Clear", "Back", "No data"];
+export const TRANSLATIONS = ["Select all", "Deselect all", "Clear", "Back", "No data"];

package/esm/dropdownRaw/dropdownRaw.js

@@ -8,7 +8,7 @@ import { getInitialState, stateReducer, ROOT_GROUP_ID } from "./stateReducer/sta
 import { StateActionType } from "./stateReducer/stateActionType";
 import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
 import { useEscape } from "../commonHelpers/hooks/useEscape";
-import { checkIsDataProblem, compareObjectsArrays, compareStringsArrays, createListDataOptions, getListDataWithDisabled, getSelectedCount, getStringFromAllSelected, getStringFromSelected, isAllChildrenSelected, isAllItemsHasOneParent, isEveryItemSelected, prepareSelectedIdsToItems, sortDropdownItemArray } from "./dropdownHelper";
+import { checkIsDataProblem, compareObjectsArrays, compareStringsArrays, createListDataOptions, getDataForChange, getListDataWithDisabled, getSelectedCount, getStringFromAllSelected, getStringFromSelected, isAllChildrenSelected, isAllItemsHasOneParent, isEveryItemSelected, prepareSelectedIdsToItems, sortDropdownItemArray } from "./dropdownHelper";
 import { DropdownTrigger } from "./dropdownTrigger";
 import { isFocusable } from "../dialog/dialogHelpers";
 import { useLanguage } from "../utils/localization/useLanguage";
@@ -391,6 +391,23 @@ export const DropdownRaw = props => {
       payload: state.currentId || state.rootId
     });
   }, [isFullSelectionMode, state.currentId, state.rootId]);
+  const handleSelectAllInSearch = useCallback(isAllSelect => {
+    if (isFullSelectionMode && state.isAllSelected) {
+      dispatchState({
+        type: StateActionType.DeselectItemsFromAllSelected,
+        payload: undefined
+      });
+      return;
+    }
+    const dataForChange = getDataForChange(getListDataWithDisabled(state.listData, state.isNestedList), state.selectedIds, isAllSelect);
+    dispatchState({
+      type: StateActionType.ChangeBulkSelection,
+      payload: {
+        itemsIds: dataForChange,
+        value: !isAllSelect
+      }
+    });
+  }, [isFullSelectionMode, state.isAllSelected, state.listData, state.isNestedList, state.selectedIds]);
   const handleClearClick = useCallback(() => {
     var _a, _b;
     dispatchState({
@@ -526,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, () => {
@@ -843,14 +854,13 @@ export const DropdownRaw = props => {
       });
     }
     if (state.showList) {
-      const isSearchMode = Boolean(state.inputValue) && !state.currentId;
+      const isSearchMode = state.inputValue && !state.currentId;
       const currentListData = createListDataOptions(state, translate, isSearchMode ? sortDropdownItemArray(state.listData, sortFn).slice(0, listLimit).filter(el => el.id !== state.rootId) :
       // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
       sortDropdownItemArray(((_b = state.groupsMap[state.currentId || state.rootId]) === null || _b === void 0 ? void 0 : _b.children) || [], sortFn).slice(0, listLimit) || [], multiselect, currentAllSelected);
-      const selectAllActiveForCurrentLevel = state.selectAllActiveForId === (state.currentId || state.rootId);
       return _jsx(DropdownList, {
         onBackButtonClick: handleBackButtonClick,
-        onSelectAllClick: handleSelectAllClick,
+        onSelectAllClick: isSearchMode ? handleSelectAllInSearch : handleSelectAllClick,
         onClearClick: handleClearClick,
         onCancelClick: handleCancelClick,
         onApplyClick: handleApplyClick,
@@ -861,7 +871,6 @@ export const DropdownRaw = props => {
         backButtonName: state.currentId && state.groupsMap[state.currentId] ? getGroupDescription(state.groupsMap[state.currentId], translate) : undefined,
         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,
         isMultiselect: multiselect,
         forceSelection: forceSelection,
         listData: currentListData,
@@ -870,7 +879,7 @@ export const DropdownRaw = props => {
         hasSelectAllButton: selectAllButton && multiselect,
         hasApplyButton: hasApplyButton,
         isApplyDisabled: memoizedIsApplyButtonDisabled,
-        isSelectAllButtonDisable: currentListData.length === 0 || isSearchMode && state.isNestedList && isAllItemsHasOneParent(state.listData.filter(el => el.id !== state.rootId), (((_c = state.groupsMap[state.rootId]) === null || _c === void 0 ? void 0 : _c.children) || []).map(el => el.id)),
+        isSelectAllButtonDisable: currentListData.length === 0 || isSearchMode !== "" && state.isNestedList && isAllItemsHasOneParent(state.listData.filter(el => el.id !== state.rootId), (((_c = state.groupsMap[state.rootId]) === null || _c === void 0 ? void 0 : _c.children) || []).map(el => el.id)),
         isClearButtonDisabled: memoizedIsClearButtonDisabled,
         isWithFooter: memoizedWithFooter && !isMobile,
         isMobile: isMobile,
@@ -882,7 +891,7 @@ export const DropdownRaw = props => {
       });
     }
     return null;
-  }, [state, isLoading, isQueryMode, fetchState === null || fetchState === void 0 ? void 0 : fetchState.isLoading, fetchState === null || fetchState === void 0 ? void 0 : fetchState.error, handleClearClick, handleCancelClick, handleApplyClick, hasApplyButton, memoizedWithFooter, translate, sortFn, listLimit, multiselect, currentAllSelected, handleBackButtonClick, handleSelectAllClick, handleSelect, handleChangeCurrentId, handleSingleSelection, isMobile, filterName, forceSelection, width, selectAllButton, memoizedIsApplyButtonDisabled, memoizedIsClearButtonDisabled, isCheckboxMode, handleCheckboxChange, checkboxLabel, selectListId, isFullSelectionMode]);
+  }, [state, isLoading, isQueryMode, fetchState === null || fetchState === void 0 ? void 0 : fetchState.isLoading, fetchState === null || fetchState === void 0 ? void 0 : fetchState.error, handleClearClick, handleCancelClick, handleApplyClick, hasApplyButton, memoizedWithFooter, translate, sortFn, listLimit, multiselect, currentAllSelected, handleBackButtonClick, handleSelectAllInSearch, handleSelectAllClick, handleSelect, handleChangeCurrentId, handleSingleSelection, isMobile, filterName, forceSelection, width, selectAllButton, memoizedIsApplyButtonDisabled, memoizedIsClearButtonDisabled, isCheckboxMode, handleCheckboxChange, checkboxLabel, selectListId]);
   const currentStringFromSelected = isFullSelectionMode && hasApplyButton && state.globalIsAllSelected || isFullSelectionMode && !hasApplyButton && state.isAllSelected ? getStringFromAllSelected(state.groupsMap, translate, state.rootId) : getStringFromSelected(hasApplyButton ? state.globalSelectedIds : state.selectedIds, state.groupsMapSelected, translate, state.rootId);
   const memoizedCurrentSelection = useMemo(() => showSelection && !state.inputValue ? currentStringFromSelected : "", [showSelection, state.inputValue, currentStringFromSelected]);
   const parentTriggerWidth = ((_b = comboboxRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width) || 420;
@@ -979,4 +988,4 @@ export const DropdownRaw = props => {
   });
 };
 DropdownRaw.displayName = "DropdownRaw";
-export const TRANSLATIONS = ["Filter by group", "Open filter", "Clear search", "Select all", "Clear", "Back", "No data"];
+export const TRANSLATIONS = ["Filter by group", "Open filter", "Clear search", "Select all", "Deselect all", "Clear", "Back", "No data"];

package/esm/dropdownRaw/stateReducer/stateReducer.d.ts

@@ -25,7 +25,6 @@ export interface IDropdownState {
     listLimit: number;
     resultsExceedListLimit?: boolean;
     isAllSelected?: boolean;
-    selectAllActiveForId?: string;
     globalIsAllSelected?: boolean;
     defaultValueIsAllSelected?: boolean;
     isChecked?: boolean;

package/esm/dropdownRaw/stateReducer/stateReducer.js

@@ -1,5 +1,5 @@
 import { StateActionType } from "./stateActionType";
-import { getChildList, getRootId, computeIsAllSelected } from "./stateReducerHelper";
+import { getChildList, updateAllSelectedStateValueBasedOnTotalSelected, getRootId } from "./stateReducerHelper";
 import { createGroupsMap } from "../../groupsFilterRaw/groupsFilterHelper";
 export const ROOT_GROUP_ID = "zen_dropdown_root_group_id";
 export const getInitialState = (isFullSelectionMode, comboItems, selection, listLimit, defaultValue, isAllSelected, defaultValueIsAllSelected, isChecked, defaultValueIsChecked, firstParentNodeIsVisible) => {
@@ -73,12 +73,10 @@ export function stateReducer(state, action) {
             }
             const isCurrentListNested = Object.keys(updatedGroupsMap).length > 0 &&
                 (updatedGroupsMap[ROOT_GROUP_ID].children || []).some(el => el.children && el.children.length);
-            const groupsMapLength = Object.keys(updatedGroupsMap).length - 1;
-            const newResultsExceedListLimit = groupsMapLength >= state.listLimit;
-            const selectedInNewMap = state.selectedIds.filter(id => id in updatedGroupsMap).length;
-            const newIsAllSelected = computeIsAllSelected(state.isAllSelected, state.isFullSelectionMode, newResultsExceedListLimit, groupsMapLength, selectedInNewMap);
+            state.groupsMap = updatedGroupsMap;
+            const additionalStateUpdates = updateAllSelectedStateValueBasedOnTotalSelected(state, state.selectedIds.length - newNamelessIds.size);
             const rootId = getRootId(updatedGroupsMap, ROOT_GROUP_ID, state.firstParentNodeIsVisible);
-            return Object.assign(Object.assign({}, state), { groupsMap: updatedGroupsMap, rootId: rootId || ROOT_GROUP_ID, namelessIds: newNamelessIds, isNestedList: state.isNestedList ? state.isNestedList : isCurrentListNested, resultsExceedListLimit: newResultsExceedListLimit, isAllSelected: newIsAllSelected });
+            return Object.assign(Object.assign(Object.assign({}, state), { rootId: rootId || ROOT_GROUP_ID, namelessIds: newNamelessIds, isNestedList: state.isNestedList ? state.isNestedList : isCurrentListNested, resultsExceedListLimit: Object.keys(updatedGroupsMap).length - 1 >= state.listLimit }), additionalStateUpdates);
         }
         case StateActionType.SetListData: {
             state.selectedIds.forEach(id => {
@@ -103,9 +101,9 @@ export function stateReducer(state, action) {
         case StateActionType.SetIsOpenCombo:
             return Object.assign(Object.assign({}, state), { isOpenCombo: payload });
         case StateActionType.ResetSelection:
-            return Object.assign(Object.assign({}, state), { selectedIds: [...state.defaultValue], isAllSelected: state.defaultValueIsAllSelected, isChecked: typeof state.isChecked === "boolean" ? state.defaultValueIsChecked || false : undefined, selectAllActiveForId: undefined });
+            return Object.assign(Object.assign({}, state), { selectedIds: [...state.defaultValue], isAllSelected: state.defaultValueIsAllSelected, isChecked: typeof state.isChecked === "boolean" ? state.defaultValueIsChecked || false : undefined });
         case StateActionType.ResetStateToGlobal:
-            return Object.assign(Object.assign({}, state), { selectedIds: [...state.globalSelectedIds], isAllSelected: state.globalIsAllSelected, isChecked: state.globalIsChecked, selectAllActiveForId: undefined });
+            return Object.assign(Object.assign({}, state), { selectedIds: [...state.globalSelectedIds], isAllSelected: state.globalIsAllSelected, isChecked: state.globalIsChecked });
         case StateActionType.NothingToShow:
             return Object.assign(Object.assign({}, state), { showWaiting: false, showEmptyList: false, showList: false });
         case StateActionType.Show:
@@ -221,7 +219,8 @@ export function stateReducer(state, action) {
                         state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
                 }
             });
-            return Object.assign(Object.assign({}, state), { selectedIds: Array.from(currentSelectedIds), selectAllActiveForId: undefined, isAllSelected: state.isAllSelected });
+            const additionalStateUpdates = updateAllSelectedStateValueBasedOnTotalSelected(state, currentSelectedIds.size);
+            return Object.assign(Object.assign(Object.assign({}, state), { selectedIds: Array.from(currentSelectedIds) }), additionalStateUpdates);
         }
         case StateActionType.ChangeBulkSelection: {
             const { itemsIds, value } = payload;
@@ -254,7 +253,8 @@ export function stateReducer(state, action) {
                         state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
                 }
             });
-            return Object.assign(Object.assign({}, state), { selectedIds: Array.from(currentSelectedIds), selectAllActiveForId: undefined });
+            const additionalStateUpdates = updateAllSelectedStateValueBasedOnTotalSelected(state, currentSelectedIds.size);
+            return Object.assign(Object.assign(Object.assign({}, state), { selectedIds: Array.from(currentSelectedIds) }), additionalStateUpdates);
         }
         case StateActionType.SelectAllChildren: {
             const currentEl = state.groupsMap[payload];
@@ -291,7 +291,7 @@ export function stateReducer(state, action) {
                         state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
                 }
             });
-            return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected), selectAllActiveForId: payload });
+            return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected) });
         }
         case StateActionType.DeselectItemsFromAllSelected: {
             const currentEl = state.groupsMap[state.rootId];
@@ -315,7 +315,7 @@ export function stateReducer(state, action) {
                         state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
                 }
             });
-            return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected), isAllSelected: state.isFullSelectionMode ? false : undefined, selectAllActiveForId: undefined });
+            return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected), isAllSelected: state.isFullSelectionMode ? false : undefined });
         }
         case StateActionType.ToggleValueForAllSelected: {
             const currentEl = state.groupsMap[state.rootId];
@@ -334,7 +334,8 @@ export function stateReducer(state, action) {
                 }
             });
             const updatedIsAllSelectedValue = state.isFullSelectionMode ? !state.isAllSelected : undefined;
-            return Object.assign(Object.assign({}, state), { selectedIds: state.isAllSelected ? Array.from(newSelected) : [], isAllSelected: updatedIsAllSelectedValue });
+            const additionalStateUpdates = updateAllSelectedStateValueBasedOnTotalSelected(state, newSelected.size);
+            return Object.assign(Object.assign(Object.assign({}, state), { selectedIds: state.isAllSelected ? Array.from(newSelected) : [], isAllSelected: updatedIsAllSelectedValue }), additionalStateUpdates);
         }
         case StateActionType.DeselectAllChildren: {
             const childrenForDeselect = [];
@@ -346,7 +347,7 @@ export function stateReducer(state, action) {
             });
             const newSelected = new Set(state.selectedIds);
             childrenForDeselect.forEach(childId => newSelected.delete(childId));
-            return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected), selectAllActiveForId: undefined });
+            return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected) });
         }
         case StateActionType.SetFirstParentNodeIsVisible: {
             if (state.firstParentNodeIsVisible === payload) {

package/esm/dropdownRaw/stateReducer/stateReducerHelper.d.ts

@@ -1,5 +1,6 @@
+import { IDropdownState } from "./stateReducer";
 import { IDropdownRawItem } from "../types";
 import { IGroupTree, ITypedHash } from "../../groupsFilterRaw/groupsFilterInterfaces";
 export declare function getChildList(childArr: IDropdownRawItem[] | undefined): IDropdownRawItem[];
-export declare const computeIsAllSelected: (currentIsAllSelected: boolean | undefined, isFullSelectionMode: boolean, resultsExceedListLimit: boolean | undefined, groupsMapLength: number, selectedCount: number) => boolean | undefined;
+export declare const updateAllSelectedStateValueBasedOnTotalSelected: (state: IDropdownState, totalSelected: number) => Partial<Pick<IDropdownState, "isAllSelected">>;
 export declare const getRootId: (groupsMap: ITypedHash<IGroupTree>, rootIdKey: string, firstParentNodeIsVisible?: boolean) => string | undefined;

package/esm/dropdownRaw/stateReducer/stateReducerHelper.js

@@ -13,9 +13,16 @@ export function getChildList(childArr) {
     });
     return list;
 }
-export const computeIsAllSelected = (currentIsAllSelected, isFullSelectionMode, resultsExceedListLimit, groupsMapLength, selectedCount) => !resultsExceedListLimit && currentIsAllSelected === false && isFullSelectionMode && groupsMapLength > 0 && selectedCount >= groupsMapLength
-    ? true
-    : currentIsAllSelected;
+export const updateAllSelectedStateValueBasedOnTotalSelected = (state, totalSelected) => {
+    const additionalStateUpdates = {};
+    const groupsMapLength = Object.keys(state.groupsMap).length - 1;
+    if (!state.resultsExceedListLimit && !state.isAllSelected && state.isFullSelectionMode && groupsMapLength > 0) {
+        if (totalSelected >= groupsMapLength) {
+            additionalStateUpdates.isAllSelected = true;
+        }
+    }
+    return additionalStateUpdates;
+};
 export const getRootId = (groupsMap, rootIdKey, firstParentNodeIsVisible) => {
     var _a;
     if (Object.keys(groupsMap).length === 0) {

package/esm/filtersBar/filtersContainer/filtersContainer.js

@@ -4,10 +4,8 @@ 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");
@@ -78,10 +76,6 @@ const getScrollButtonType = element => {
   }
   return "start";
 };
-const getScrollIcons = isRTL => ({
-  start: isRTL ? IconChevronRight : IconChevronLeft,
-  end: isRTL ? IconChevronLeft : IconChevronRight
-});
 export const FiltersContainer = ({
   className,
   children
@@ -91,11 +85,6 @@ 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);
@@ -208,9 +197,10 @@ 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: startScrollIcon,
+      icon: IconChevronRight,
       iconPosition: ButtonIconPosition.Start,
-      onClick: handleScrollButtonClick(-scrollableStep)
+      onClick: handleScrollButtonClick(-scrollableStep),
+      iconClasses: "zen-filters-toolbar__start-icon"
     }), _jsx("div", {
       ref: scrollableRef,
       className: classNames(["zen-filters-toolbar__scrollable", !isHiddenDisplay.left ? "has-left-scroller" : "", !isHiddenDisplay.right ? "has-right-scroller" : ""]),
@@ -223,7 +213,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: endScrollIcon,
+      icon: IconChevronRight,
       onClick: handleScrollButtonClick(scrollableStep),
       iconPosition: ButtonIconPosition.End
     })]

package/esm/radioGroupRaw/radioGroupRaw.js

@@ -63,7 +63,6 @@ export const RadioGroupRaw = (props) => {
                         "zen-radio-group__item",
                         wrappedInLabel ? "zen-radio-group__item--no-paddings" : "",
                         type === "interactive" ? "zen-radio--interactive" : "",
-                        size === "small" ? "zen-radio-group__item--small" : "",
-                        direction === "horizontal" ? "zen-radio--align-start" : ""
+                        size === "small" ? "zen-radio-group__item--small" : ""
                     ]), key: ind, checked: item.value === value, disabled: disabled ? disabled : item.disabled, name: name, reverse: reverse, fullWidth: fullWidth, value: item.value, onChange: onChangeInner, wrappedInLabel: wrappedInLabel, tabIndex: selectItemOnFocus || disabled || item.disabled ? undefined : ind === focusedIndex ? 0 : -1, ref: selectItemOnFocus ? undefined : ind === focusedIndex ? focusElementRef : undefined, role: itemRole }), item.children) }, `${ind}-li`))) })) }));
 };

package/esm/selectList/selectList.helpers.d.ts

@@ -5,7 +5,7 @@ export declare const getItemIdByIndex: (state: Map<string, CheckboxState>, index
 export declare const getItemIndexById: (state: Map<string, CheckboxState>, id: string) => number;
 export declare const updateItemState: (initialState: Map<string, CheckboxState>, multiselect: boolean, updatedId: string, newState: CheckboxState) => [Map<string, CheckboxState>, boolean];
 export declare const searchItemIndex: (items: ISelectListItem[], searchStr: string) => number;
-export declare const getFirstIndex: (items: ISelectListItem[]) => number;
+export declare const getFirstIndex: (items: ISelectListItem[]) => 0 | -1;
 export declare const getLastIndex: (items: ISelectListItem[]) => number;
 export declare const getNextIndex: (currIndex: number, items: ISelectListItem[]) => number;
 export declare const getPrevIndex: (currIndex: number, items: ISelectListItem[]) => number;