@geotab/zenith 3.0.1-beta.4 → 3.1.0-beta.0

package/dist/dropdown/stateReducer/stateReducer.js

@@ -5,7 +5,7 @@ const stateActionType_1 = require("./stateActionType");
 const stateReducerHelper_1 = require("./stateReducerHelper");
 const groupsFilterHelper_1 = require("../../groupsFilter/groupsFilterHelper");
 const groupsHelper_1 = require("../../groupsFilter/groupsHelper");
-const getInitialState = (isFullSelectionMode, comboItems, selection, defaultValue, isAllSelected, defaultValueIsAllSelected, isChecked, defaultValueIsChecked) => {
+const getInitialState = (isFullSelectionMode, comboItems, selection, listLimit, defaultValue, isAllSelected, defaultValueIsAllSelected, isChecked, defaultValueIsChecked) => {
     const updatedGroupsMapSelected = new Map();
     const updatedGroupsMap = comboItems.length ? (0, groupsFilterHelper_1.createGroupsMap)(comboItems, groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID) : {};
     const namelessIds = new Set();
@@ -46,13 +46,15 @@ const getInitialState = (isFullSelectionMode, comboItems, selection, defaultValu
         defaultValueIsAllSelected: isFullSelectionMode ? defaultValueIsAllSelected || false : undefined,
         isChecked: isChecked,
         defaultValueIsChecked: isChecked !== undefined ? defaultValueIsChecked || false : undefined,
-        globalIsChecked: isChecked
+        globalIsChecked: isChecked,
+        listLimit,
+        resultsExceedListLimit: false
     };
 };
 exports.getInitialState = getInitialState;
 // eslint-disable-next-line complexity
 function stateReducer(state, action) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     const { type, payload } = action;
     switch (type) {
         case stateActionType_1.StateActionType.CreateMap: {
@@ -73,7 +75,9 @@ function stateReducer(state, action) {
                 });
             }
             const isCurrentListNested = Object.keys(updatedGroupsMap).length > 0 && (updatedGroupsMap[groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID].children || []).some(el => el.children && el.children.length);
-            return Object.assign(Object.assign({}, state), { groupsMap: updatedGroupsMap, namelessIds: newNamelessIds, isNestedList: state.isNestedList ? state.isNestedList : isCurrentListNested });
+            state.groupsMap = updatedGroupsMap;
+            const additionalStateUpdates = (0, stateReducerHelper_1.updateAllSelectedStateValueBasedOnTotalSelected)(state, state.selectedIds.length - newNamelessIds.size);
+            return Object.assign(Object.assign(Object.assign({}, state), { namelessIds: newNamelessIds, isNestedList: state.isNestedList ? state.isNestedList : isCurrentListNested, resultsExceedListLimit: Object.keys(updatedGroupsMap).length - 1 >= state.listLimit }), additionalStateUpdates);
         }
         case stateActionType_1.StateActionType.SetListData: {
             state.selectedIds.forEach(id => {
@@ -116,11 +120,8 @@ function stateReducer(state, action) {
             const newNamelessIds = new Set(state.namelessIds);
             payload.selected.forEach(id => {
                 if (!state.groupsMapSelected.has(id)) {
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const item = state.groupsMap[id];
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     item && state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     !item && newNamelessIds.add(id);
                 }
             });
@@ -133,13 +134,9 @@ function stateReducer(state, action) {
             const newNamelessIds = new Set(state.namelessIds);
             state.selectedIds.forEach(id => {
                 if (!state.groupsMapSelected.has(id)) {
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const item = state.groupsMap[id];
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     item && state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     !item && newNamelessIds.add(id);
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     item && newNamelessIds.delete(id);
                 }
                 else {
@@ -167,11 +164,8 @@ function stateReducer(state, action) {
             const newNamelessIds = new Set(state.namelessIds);
             payload.forEach(id => {
                 if (!state.groupsMapSelected.has(id)) {
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const item = state.groupsMap[id] || state.listData.find(el => el.id === id);
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     item && state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     !item && newNamelessIds.add(id);
                 }
             });
@@ -183,9 +177,7 @@ function stateReducer(state, action) {
         case stateActionType_1.StateActionType.ChangeSingleSelection: {
             const newSelectedId = payload.value ? payload.value : state.defaultValue[0];
             if (newSelectedId && !state.groupsMapSelected.has(newSelectedId)) {
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                 const item = state.groupsMap[newSelectedId] || state.listData.find(el => el.id === newSelectedId);
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                 item && state.groupsMapSelected.set(newSelectedId, Object.assign(Object.assign({ id: newSelectedId }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
             }
             return Object.assign(Object.assign({}, state), { selectedIds: payload.value ? [payload.value] : (payload.reset ? [...state.defaultValue] : []) });
@@ -205,7 +197,7 @@ function stateReducer(state, action) {
                 let parent = (_b = (_a = state.groupsMap[payload.itemId]) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.id;
                 while (parent && parent !== "root") {
                     parentForDeselect.push(parent);
-                    parent = (_c = state.groupsMap[parent].parent) === null || _c === void 0 ? void 0 : _c.id;
+                    parent = (_d = (_c = state.groupsMap[parent]) === null || _c === void 0 ? void 0 : _c.parent) === null || _d === void 0 ? void 0 : _d.id;
                 }
                 parentForDeselect.forEach(parentId => {
                     currentSelectedIds.delete(parentId);
@@ -213,7 +205,7 @@ function stateReducer(state, action) {
                 // deselect children
                 const childrenForDeselect = [];
                 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                const currentChild = (0, stateReducerHelper_1.getChildList)((_d = state.groupsMap[payload.itemId]) === null || _d === void 0 ? void 0 : _d.children);
+                const currentChild = (0, stateReducerHelper_1.getChildList)((_e = state.groupsMap[payload.itemId]) === null || _e === void 0 ? void 0 : _e.children);
                 currentChild.forEach(el => {
                     childrenForDeselect.push(el.id);
                 });
@@ -221,13 +213,12 @@ function stateReducer(state, action) {
             }
             currentSelectedIds.forEach(id => {
                 if (!state.groupsMapSelected.has(id)) {
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const item = state.groupsMap[id] || state.listData.find(el => el.id === id);
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     item && 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) });
+            const additionalStateUpdates = (0, stateReducerHelper_1.updateAllSelectedStateValueBasedOnTotalSelected)(state, currentSelectedIds.size);
+            return Object.assign(Object.assign(Object.assign({}, state), { selectedIds: Array.from(currentSelectedIds) }), additionalStateUpdates);
         }
         case stateActionType_1.StateActionType.ChangeBulkSelection: {
             const { itemsIds, value } = payload;
@@ -235,17 +226,17 @@ function stateReducer(state, action) {
             const parentsToProcess = new Set();
             const childrenToProcess = new Set();
             itemsIds.forEach(itemId => {
-                var _a, _b, _c, _d;
+                var _a, _b, _c, _d, _e;
                 if (value) {
                     currentSelectedIds.add(itemId);
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     let parent = (_b = (_a = state.groupsMap[itemId]) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.id;
                     while (parent && parent !== "root") {
                         parentsToProcess.add(parent);
-                        parent = (_c = state.groupsMap[parent].parent) === null || _c === void 0 ? void 0 : _c.id;
+                        parent = (_d = (_c = state.groupsMap[parent]) === null || _c === void 0 ? void 0 : _c.parent) === null || _d === void 0 ? void 0 : _d.id;
                     }
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                    const currentChild = (0, stateReducerHelper_1.getChildList)((_d = state.groupsMap[itemId]) === null || _d === void 0 ? void 0 : _d.children);
+                    const currentChild = (0, stateReducerHelper_1.getChildList)((_e = state.groupsMap[itemId]) === null || _e === void 0 ? void 0 : _e.children);
                     currentChild.forEach(childId => childrenToProcess.add(childId.id));
                 }
                 else {
@@ -256,36 +247,35 @@ function stateReducer(state, action) {
             parentsToProcess.forEach(parentId => currentSelectedIds.delete(parentId));
             currentSelectedIds.forEach(id => {
                 if (!state.groupsMapSelected.has(id)) {
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const item = state.groupsMap[id] || state.listData.find(el => el.id === id);
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     item && 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) });
+            const additionalStateUpdates = (0, stateReducerHelper_1.updateAllSelectedStateValueBasedOnTotalSelected)(state, currentSelectedIds.size);
+            return Object.assign(Object.assign(Object.assign({}, state), { selectedIds: Array.from(currentSelectedIds) }), additionalStateUpdates);
         }
         case stateActionType_1.StateActionType.SelectAllChildren: {
             const currentEl = state.groupsMap[payload];
             const newSelected = new Set(state.selectedIds);
             const isDisableStateProhibited = state.isNestedList;
-            (currentEl.children || []).forEach(el => {
-                var _a, _b;
+            ((currentEl === null || currentEl === void 0 ? void 0 : currentEl.children) || []).forEach(el => {
+                var _a, _b, _c, _d, _e;
                 if (!newSelected.has(el.id)) {
                     // select when isDisableStateProhibited, or when disabled elements are allowed to be displayed, and this element is not disabled
                     (isDisableStateProhibited || !el.disabled) && newSelected.add(el.id);
                     // deselect parent
                     const parentForDeselect = [];
-                    let parent = (_a = state.groupsMap[el.id].parent) === null || _a === void 0 ? void 0 : _a.id;
+                    let parent = (_b = (_a = state.groupsMap[el.id]) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.id;
                     while (parent && parent !== "root") {
                         parentForDeselect.push(parent);
-                        parent = (_b = state.groupsMap[parent].parent) === null || _b === void 0 ? void 0 : _b.id;
+                        parent = (_d = (_c = state.groupsMap[parent]) === null || _c === void 0 ? void 0 : _c.parent) === null || _d === void 0 ? void 0 : _d.id;
                     }
                     parentForDeselect.forEach(parentId => {
                         newSelected.delete(parentId);
                     });
                     //deselect children
                     const childrenForDeselect = [];
-                    const currentChild = (0, stateReducerHelper_1.getChildList)(state.groupsMap[el.id].children);
+                    const currentChild = (0, stateReducerHelper_1.getChildList)((_e = state.groupsMap[el.id]) === null || _e === void 0 ? void 0 : _e.children);
                     currentChild.forEach(elt => {
                         childrenForDeselect.push(elt.id);
                     });
@@ -294,9 +284,7 @@ function stateReducer(state, action) {
             });
             newSelected.forEach(id => {
                 if (!state.groupsMapSelected.has(id)) {
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const item = state.groupsMap[id] || state.listData.find(el => el.id === id);
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     item && state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
                 }
             });
@@ -307,7 +295,7 @@ function stateReducer(state, action) {
             // action not submitted for disabled item, other items, even if disabled, not change their state
             const deselectedItems = payload ? new Set([payload]) : new Set(state.listData.filter(elem => !elem.disabled).map(el => el.id));
             const newSelected = new Set();
-            (currentEl.children || []).forEach(el => {
+            ((currentEl === null || currentEl === void 0 ? void 0 : currentEl.children) || []).forEach(el => {
                 if (!newSelected.has(el.id) && !deselectedItems.has(el.id)) {
                     newSelected.add(el.id);
                 }
@@ -319,9 +307,7 @@ function stateReducer(state, action) {
             });
             newSelected.forEach(id => {
                 if (!state.groupsMapSelected.has(id)) {
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const item = state.groupsMap[id] || state.listData.find(el => el.id === id);
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     item && state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
                 }
             });
@@ -330,24 +316,24 @@ function stateReducer(state, action) {
         case stateActionType_1.StateActionType.ToggleValueForAllSelected: {
             const currentEl = state.groupsMap[groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID];
             const newSelected = new Set();
-            state.isAllSelected && (currentEl.children || []).forEach(el => {
+            state.isAllSelected && ((currentEl === null || currentEl === void 0 ? void 0 : currentEl.children) || []).forEach(el => {
                 if (!newSelected.has(el.id) && el.disabled) {
                     newSelected.add(el.id);
                 }
             });
             newSelected.forEach(id => {
                 if (!state.groupsMapSelected.has(id)) {
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const item = state.groupsMap[id] || state.listData.find(el => el.id === id);
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     item && 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: state.isAllSelected ? Array.from(newSelected) : [], isAllSelected: state.isFullSelectionMode ? !state.isAllSelected : undefined });
+            const updatedIsAllSelectedValue = state.isFullSelectionMode ? !state.isAllSelected : undefined;
+            const additionalStateUpdates = (0, stateReducerHelper_1.updateAllSelectedStateValueBasedOnTotalSelected)(state, newSelected.size);
+            return Object.assign(Object.assign(Object.assign({}, state), { selectedIds: state.isAllSelected ? Array.from(newSelected) : [], isAllSelected: updatedIsAllSelectedValue }), additionalStateUpdates);
         }
         case stateActionType_1.StateActionType.DeselectAllChildren: {
             const childrenForDeselect = [];
-            const currentChild = (0, stateReducerHelper_1.getChildList)(state.groupsMap[payload].children);
+            const currentChild = (0, stateReducerHelper_1.getChildList)((_f = state.groupsMap[payload]) === null || _f === void 0 ? void 0 : _f.children);
             const isDisableStateProhibited = state.isNestedList;
             currentChild.forEach(el => {
                 // deselect when isDisableStateProhibited, or when disabled elements are allowed to be displayed, and this element is not disabled

package/dist/dropdown/stateReducer/stateReducerHelper.d.ts

@@ -1,2 +1,4 @@
 import { IDropdownItem } from "../dropdown";
+import { IDropdownState } from "./stateReducer";
 export declare function getChildList(childArr: IDropdownItem[] | undefined): IDropdownItem[];
+export declare const updateAllSelectedStateValueBasedOnTotalSelected: (state: IDropdownState, totalSelected: number) => Partial<Pick<IDropdownState, "isAllSelected">>;

package/dist/dropdown/stateReducer/stateReducerHelper.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getChildList = void 0;
+exports.updateAllSelectedStateValueBasedOnTotalSelected = exports.getChildList = void 0;
 function getChildList(childArr) {
     const list = [];
     if (!childArr) {
@@ -16,3 +16,14 @@ function getChildList(childArr) {
     return list;
 }
 exports.getChildList = getChildList;
+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;
+};
+exports.updateAllSelectedStateValueBasedOnTotalSelected = updateAllSelectedStateValueBasedOnTotalSelected;

package/dist/dropdown/useDropdownState.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const useDropdownState: (withCheckbox?: boolean) => {
+export declare const useDropdownState: (withCheckbox?: boolean, debounceTimeout?: number) => {
     checked?: boolean | undefined;
     setChecked?: import("react").Dispatch<import("react").SetStateAction<boolean>> | undefined;
     search: string;

package/dist/dropdown/useDropdownState.js

@@ -2,9 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDropdownState = void 0;
 const react_1 = require("react");
-const useDropdownState = (withCheckbox) => {
+const useDebouncedMemo_1 = require("../commonHelpers/hooks/useDebouncedMemo");
+const useDropdownState = (withCheckbox, debounceTimeout = 300) => {
     const [search, setSearch] = (0, react_1.useState)("");
     const [checked, setChecked] = (0, react_1.useState)(false);
-    return Object.assign({ search, setSearch }, (withCheckbox ? { checked, setChecked } : {}));
+    const debouncedSearch = (0, useDebouncedMemo_1.useDebouncedMemo)(() => search, [search], debounceTimeout);
+    const debouncedChecked = (0, useDebouncedMemo_1.useDebouncedMemo)(() => checked, [checked], debounceTimeout);
+    return Object.assign({ search: debouncedSearch, setSearch }, (withCheckbox ? { checked: debouncedChecked, setChecked } : {}));
 };
 exports.useDropdownState = useDropdownState;

package/dist/filters/components/filtersContainer.d.ts

@@ -8,5 +8,6 @@ export interface IFiltersContainer extends IZenComponentProps {
     hasSavedFilters: boolean;
     filtersForCalculation: ReactElement[];
     onSaveFilters?: (filterName: string, filterState?: Record<string, unknown>) => void;
+    filtersChipRef: React.RefObject<HTMLElement>;
 }
 export declare const FiltersContainer: React.FC<IFiltersContainer>;

package/dist/filters/components/filtersContainer.js

@@ -10,15 +10,16 @@ const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const chip_1 = require("../../chip/chip");
 const react_2 = __importDefault(require("react"));
 const iconFilter_1 = require("../../icons/iconFilter");
-const iconPin2_1 = require("../../icons/iconPin2");
 const filtersHelper_1 = require("../filtersHelper");
 const filtersSavedChipComponent_1 = require("./filtersSavedChipComponent");
 const iconClose_1 = require("../../icons/iconClose");
 const chipStatusProvider_1 = require("../../chip/chipStatusProvider");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
-const FiltersContainer = ({ className, isPinned = false, onPinChange, filtersClickHandler, hasSavedFilters, filtersForCalculation, children }) => {
+const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
+const FiltersContainer = ({ className, isPinned = false, onPinChange, filtersClickHandler, hasSavedFilters, filtersForCalculation, children, filtersChipRef }) => {
     const chipStatus = (0, chipStatusProvider_1.useChipStatus)();
     const { translate } = (0, useLanguage_1.useLanguage)();
+    const isMobile = (0, useMobile_1.useMobile)();
     const numberOfChangedFilters = (0, react_1.useMemo)(() => {
         const suppressedFilters = new Set();
         filtersForCalculation.forEach(filter => {
@@ -31,12 +32,7 @@ const FiltersContainer = ({ className, isPinned = false, onPinChange, filtersCli
         const filteredState = (0, filtersHelper_1.getFiltersState)(filtersForCalculation.filter(f => !suppressedFilters.has(f.props.id)));
         return (0, filtersHelper_1.getNumberOfChangedFilters)(filteredState);
     }, [filtersForCalculation]);
-    const filtersChipRef = (0, react_1.useRef)(null);
-    const handlePinChange = (0, react_1.useCallback)((newIsPinned) => {
-        onPinChange && onPinChange(newIsPinned);
-    }, [onPinChange]);
-    const pinComponent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(chip_1.Chip, { active: isPinned, status: isPinned ? "accent" : undefined, onChange: handlePinChange, icon: iconPin2_1.IconPin2, children: isPinned ? "" : "+" }), [isPinned, handlePinChange]);
-    const filtersChipComponent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(chip_1.Chip, { quantity: numberOfChangedFilters, isOpen: false, status: numberOfChangedFilters > 0 ? chipStatus || "active" : undefined, onClick: filtersClickHandler, icon: iconFilter_1.IconFilter, title: translate("All Filters"), triggerRef: filtersChipRef, children: "+" }), [numberOfChangedFilters, chipStatus, filtersClickHandler, translate]);
+    const filtersChipComponent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(chip_1.Chip, { quantity: numberOfChangedFilters, isOpen: false, status: numberOfChangedFilters > 0 ? chipStatus || "active" : undefined, onClick: filtersClickHandler, icon: iconFilter_1.IconFilter, title: translate("All Filters"), triggerRef: filtersChipRef, children: "+" }), [numberOfChangedFilters, chipStatus, filtersClickHandler, translate, filtersChipRef]);
     const childrenSignature = (0, react_1.useMemo)(() => {
         const childrenArray = react_2.default.Children.toArray(children).filter(Boolean);
         return childrenArray
@@ -48,10 +44,11 @@ const FiltersContainer = ({ className, isPinned = false, onPinChange, filtersCli
             const state = child.props.state;
             const defaultState = child.props.defaultState;
             const childPropsQuery = JSON.stringify(child.props.fetchState || {});
+            const childPropsDataItems = JSON.stringify(child.props.dataItems || "no-data-items");
             const stateHash = (0, filtersHelper_1.createStateHash)(state);
             const defaultStateHash = (0, filtersHelper_1.createStateHash)(defaultState);
             const propsHash = (0, filtersHelper_1.createPropsHash)(child.props);
-            return `${childId}|${stateHash}|${defaultStateHash}|${propsHash}|${childPropsQuery}`;
+            return `${childId}|${stateHash}|${defaultStateHash}|${propsHash}|${childPropsQuery}|${childPropsDataItems}`;
         })
             .join("||");
     }, [children]);
@@ -72,10 +69,12 @@ const FiltersContainer = ({ className, isPinned = false, onPinChange, filtersCli
             }
         });
         onPinChange === null || onPinChange === void 0 ? void 0 : onPinChange(false);
-    }, [filtersForCalculation, onPinChange]);
+        filtersChipRef.current.focus();
+    }, [filtersChipRef, filtersForCalculation, onPinChange]);
     const chipRemovalComponent = (0, react_1.useMemo)(() => numberOfChangedFilters ?
         (0, jsx_runtime_1.jsx)(chip_1.Chip, { title: translate("Clear"), className: "zen-filters-container__removal-chip", active: false, status: isPinned ? "accent" : undefined, onChange: handleRemovalClick, icon: iconClose_1.IconClose })
         : null, [isPinned, handleRemovalClick, translate, numberOfChangedFilters]);
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-filters-container", className || ""]), children: [memoizedChildren, onPinChange ? pinComponent : null, hasSavedFilters ? (0, jsx_runtime_1.jsx)(filtersSavedChipComponent_1.FiltersSavedChipComponent, {}) : null, filtersChipComponent, chipRemovalComponent] });
+    const memoizedFiltersElements = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [memoizedChildren, hasSavedFilters ? (0, jsx_runtime_1.jsx)(filtersSavedChipComponent_1.FiltersSavedChipComponent, {}) : null, filtersChipComponent, chipRemovalComponent] }), [chipRemovalComponent, filtersChipComponent, hasSavedFilters, memoizedChildren]);
+    return (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-filters-container", isMobile ? "zen-filters-container--mobile" : "", className || ""]), children: isMobile ? (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-container__mobile-scroll-wrapper", children: memoizedFiltersElements }) : memoizedFiltersElements });
 };
 exports.FiltersContainer = FiltersContainer;

package/dist/filters/components/filtersDateInput.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { IFiltersItem } from "./filtersItem";
+import { IDateInput } from "../../dateInput/dateInput";
+export interface IFiltersDateInputProps extends Pick<IDateInput, "classNamePopup" | "disabled" | "dropDownTitle" | "timeSelect" | "disableFutureDates" | "disablePastDates" | "disableDatesBefore" | "disableDatesAfter" | "requireSelection" | "chipIcon"> {
+}
+export type TFiltersDateInputState = string | undefined;
+export interface IFiltersDateInput extends IFiltersItem<TFiltersDateInputState>, IFiltersDateInputProps {
+}
+export declare const FiltersDateInputDisplayName = "FiltersDateInput";
+export declare const FiltersDateInput: React.FC<IFiltersDateInput>;

package/dist/filters/components/filtersDateInput.js

@@ -0,0 +1,27 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FiltersDateInput = exports.FiltersDateInputDisplayName = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const dateInput_1 = require("../../dateInput/dateInput");
+const iconCalendar_1 = require("../../icons/iconCalendar");
+exports.FiltersDateInputDisplayName = "FiltersDateInput";
+const FiltersDateInput = (_a) => {
+    var { className, state, defaultState, name, onChange: onChangeState, id, chipIcon } = _a, otherRangeProps = __rest(_a, ["className", "state", "defaultState", "name", "onChange", "id", "chipIcon"]);
+    const component = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(dateInput_1.DateInput, Object.assign({}, otherRangeProps, { buttonLabel: name, value: state, onChange: onChangeState, defaultValue: defaultState, className: (0, classNames_1.classNames)(["zen-filters-date-input", className || ""]), chip: true, chipId: id, chipName: name, chipIcon: chipIcon || iconCalendar_1.IconCalendar })), [otherRangeProps, chipIcon, state, onChangeState, defaultState, className, id, name]);
+    return component;
+};
+exports.FiltersDateInput = FiltersDateInput;
+exports.FiltersDateInput.displayName = exports.FiltersDateInputDisplayName;

package/dist/filters/components/filtersDropdown.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { IDropdown, IDropdownFullSelection, IDropdownFullSelectionWithCheckbox, IDropdownWithCheckbox, IFetchDropdownState } from "../../dropdown/dropdown";
+import { IDropdown, IDropdownFullSelection, IDropdownFullSelectionWithCheckbox, IDropdownWithCheckbox, IFetchDropdownState, IDropdownItem } from "../../dropdown/dropdown";
 import { IFiltersItem } from "./filtersItem";
-export interface IFiltersDropdownProps extends Omit<IDropdown | IDropdownFullSelection | IDropdownWithCheckbox | IDropdownFullSelectionWithCheckbox, "value" | "onChange" | "defaultValue" | "className" | "getData" | "dataItems" | "isLoading" | "errorHandler"> {
+export interface IFiltersDropdownProps extends Omit<IDropdown | IDropdownFullSelection | IDropdownWithCheckbox | IDropdownFullSelectionWithCheckbox, "value" | "onChange" | "defaultValue" | "className" | "getData" | "errorHandler"> {
 }
 export type TFiltersDropdownState = string[];
 export interface IFiltersDropdownFullSelectionState {
@@ -22,11 +22,12 @@ export type TFiltersDropdownAllStates = TFiltersDropdownState | TFiltersDropdown
 export type TInferOnChangeType<T> = T extends string[] ? (state: string[]) => void : T extends IFiltersDropdownWithCheckboxState ? (state: IFiltersDropdownWithCheckboxState) => void : T extends IFiltersDropdownFullSelectionState ? (state: IFiltersDropdownFullSelectionState) => void : T extends IFiltersDropdownFullSelectionWithCheckboxState ? (state: IFiltersDropdownFullSelectionWithCheckboxState) => void : (state: T) => void;
 export interface IFiltersDropdown<T extends TFiltersDropdownAllStates = TFiltersDropdownState> extends Omit<IFiltersItem<T>, "onChange" | "defaultState">, IFiltersDropdownProps {
     onChange: TInferOnChangeType<T>;
-    fetchState: IFetchDropdownState;
+    fetchState?: IFetchDropdownState;
+    dataItems?: IDropdownItem[];
     defaultState?: T;
 }
 export declare const FiltersDropdownDisplayName = "FiltersDropdown";
-export declare function FiltersDropdown<T extends TFiltersDropdownAllStates = TFiltersDropdownState>({ className, state, name, defaultState, onChange: onChangeState, id, chipIcon, classNamePopup, fetchState, ...restDropdownProps }: IFiltersDropdown<T>): React.JSX.Element;
+export declare function FiltersDropdown<T extends TFiltersDropdownAllStates = TFiltersDropdownState>({ className, state, name, defaultState, onChange: onChangeState, id, chipIcon, classNamePopup, fetchState, dataItems, isLoading, ...restDropdownProps }: IFiltersDropdown<T>): React.JSX.Element;
 export declare namespace FiltersDropdown {
     var displayName: string;
 }

package/dist/filters/components/filtersDropdown.js

@@ -20,7 +20,7 @@ const iconFilter_1 = require("../../icons/iconFilter");
 const filtersHelper_1 = require("../filtersHelper");
 exports.FiltersDropdownDisplayName = "FiltersDropdown";
 function FiltersDropdown(_a) {
-    var { className, state, name, defaultState, onChange: onChangeState, id, chipIcon, classNamePopup, fetchState } = _a, restDropdownProps = __rest(_a, ["className", "state", "name", "defaultState", "onChange", "id", "chipIcon", "classNamePopup", "fetchState"]);
+    var { className, state, name, defaultState, onChange: onChangeState, id, chipIcon, classNamePopup, fetchState, dataItems, isLoading } = _a, restDropdownProps = __rest(_a, ["className", "state", "name", "defaultState", "onChange", "id", "chipIcon", "classNamePopup", "fetchState", "dataItems", "isLoading"]);
     const prepareValue = (value) => {
         if (Array.isArray(value)) {
             return value.map((item) => item.id);
@@ -33,9 +33,9 @@ function FiltersDropdown(_a) {
         const dropdownPropsForComponent = Object.assign(Object.assign({}, restDropdownProps), { value: state, onChange: (newValue) => {
                 const preparedValue = prepareValue(newValue);
                 onChangeState(preparedValue);
-            }, multiselect: dropdownStateType === "fullSelection" || dropdownStateType === "fullSelectionWithCheckbox" ? true : restDropdownProps.multiselect, selectAllButton: dropdownStateType === "fullSelection" || dropdownStateType === "fullSelectionWithCheckbox" ? true : restDropdownProps.selectAllButton, fetchState: fetchState, isLoading: undefined, errorHandler: (() => { }), placeholder: restDropdownProps.placeholder || name, defaultValue: memoizedDefaultState, className: (0, classNames_1.classNames)(["zen-filters-dropdown", className || ""]), classNamePopup: (0, classNames_1.classNames)(["zen-filters-dropdown-popup", classNamePopup || ""]), chip: true, chipId: id, chipName: name, chipIcon: chipIcon || iconFilter_1.IconFilter });
+            }, multiselect: dropdownStateType === "fullSelection" || dropdownStateType === "fullSelectionWithCheckbox" ? true : restDropdownProps.multiselect, selectAllButton: dropdownStateType === "fullSelection" || dropdownStateType === "fullSelectionWithCheckbox" ? true : restDropdownProps.selectAllButton, fetchState: fetchState, dataItems: dataItems, isLoading: dataItems !== undefined ? isLoading : undefined, errorHandler: (() => { }), placeholder: restDropdownProps.placeholder || name, defaultValue: memoizedDefaultState, className: (0, classNames_1.classNames)(["zen-filters-dropdown", className || ""]), classNamePopup: (0, classNames_1.classNames)(["zen-filters-dropdown-popup", classNamePopup || ""]), chip: true, chipId: id, chipName: name, chipIcon: chipIcon || iconFilter_1.IconFilter });
         return (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({}, dropdownPropsForComponent));
-    }, [restDropdownProps, state, dropdownStateType, memoizedDefaultState, fetchState, className, classNamePopup, id, name, chipIcon, onChangeState]);
+    }, [restDropdownProps, state, dropdownStateType, fetchState, dataItems, isLoading, name, memoizedDefaultState, className, classNamePopup, id, chipIcon, onChangeState]);
     return component;
 }
 exports.FiltersDropdown = FiltersDropdown;

package/dist/filters/components/filtersEmptySelectedList.d.ts

@@ -0,0 +1,2 @@
+import "./filtersEmptySelectedList.less";
+export declare const FiltersEmptySelectedList: () => import("react/jsx-runtime").JSX.Element;

package/dist/filters/components/filtersEmptySelectedList.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FiltersEmptySelectedList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const useLanguage_1 = require("../../utils/localization/useLanguage");
+const imageLooking_1 = require("../../images/imageLooking");
+const FiltersEmptySelectedList = () => {
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    return (0, jsx_runtime_1.jsxs)("div", { className: "zen-filters-empty-selected-list", children: [(0, jsx_runtime_1.jsx)(imageLooking_1.ImageLooking, { className: "zen-filters-empty-selected-list__image", title: translate("No Filters Selected"), description: translate("Selected filters will appear here.") }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-filters-empty-selected-list__text", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-filters-empty-selected-list__header", children: translate("No Filters Selected") }), (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-empty-selected-list__description", children: translate("Selected filters will appear here.") })] })] });
+};
+exports.FiltersEmptySelectedList = FiltersEmptySelectedList;

package/dist/filters/components/filtersItem.d.ts

@@ -5,6 +5,7 @@ import { FiltersDateRange, IFiltersDateRangeItem, TFiltersDateRangeState } from
 import { FiltersDropdown, IFiltersDropdown, TFiltersDropdownAllStates } from "./filtersDropdown";
 import { FiltersGroups, IFiltersGroups } from "./filtersGroups";
 import { FiltersRange, IFiltersRange, IFiltersRangeState } from "./filtersRange";
+import { FiltersDateInput, IFiltersDateInput, TFiltersDateInputState } from "./filtersDateInput";
 export interface IFiltersItem<State = unknown> {
     id: string;
     name: string;
@@ -15,11 +16,11 @@ export interface IFiltersItem<State = unknown> {
     inhibit?: string[];
     className?: string;
 }
-export type TFiltersComponents = typeof FiltersChip | typeof FiltersDateRange | typeof FiltersDropdown | typeof FiltersGroups | typeof FiltersRange;
-export type TFiltersComponentsProps = IFiltersChip | IFiltersDateRangeItem | IFiltersDropdown | IFiltersGroups | IFiltersRange;
-export type TFiltersComponentsItemState = boolean | TFiltersDateRangeState | TFiltersDropdownAllStates | IGroupsFilterTotalState | IFiltersRangeState;
+export type TFiltersComponents = typeof FiltersChip | typeof FiltersDateRange | typeof FiltersDateInput | typeof FiltersDropdown | typeof FiltersGroups | typeof FiltersRange;
+export type TFiltersComponentsProps = IFiltersChip | IFiltersDateRangeItem | IFiltersDropdown | IFiltersGroups | IFiltersRange | IFiltersDateInput;
+export type TFiltersComponentsItemState = boolean | TFiltersDateRangeState | TFiltersDropdownAllStates | IGroupsFilterTotalState | IFiltersRangeState | TFiltersDateInputState;
 export declare const allowedFiltersComponents: ({
     <P extends import("./filtersDateRange").IFiltersDateRangeProps = import("./filtersDateRange").IFiltersDateRangeProps>({ className, state, defaultState, name, onChange: onChangeState, id, allowUnsetValue, chipIcon, ...dateRangeProps }: IFiltersDateRangeItem<P>): React.JSX.Element;
     displayName: string;
-} | React.FC<IFiltersGroups> | React.FC<IFiltersRange> | React.FC<IFiltersChip> | typeof FiltersDropdown)[];
+} | React.FC<IFiltersGroups> | React.FC<IFiltersRange> | React.FC<IFiltersDateInput> | React.FC<IFiltersChip> | typeof FiltersDropdown)[];
 export declare const getAllowedFilters: <T extends React.ReactNode>(items: T[]) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[];

package/dist/filters/components/filtersItem.js

@@ -10,7 +10,8 @@ const filtersDateRange_1 = require("./filtersDateRange");
 const filtersDropdown_1 = require("./filtersDropdown");
 const filtersGroups_1 = require("./filtersGroups");
 const filtersRange_1 = require("./filtersRange");
-exports.allowedFiltersComponents = [filtersChip_1.FiltersChip, filtersDateRange_1.FiltersDateRange, filtersDropdown_1.FiltersDropdown, filtersGroups_1.FiltersGroups, filtersRange_1.FiltersRange];
+const filtersDateInput_1 = require("./filtersDateInput");
+exports.allowedFiltersComponents = [filtersChip_1.FiltersChip, filtersDateRange_1.FiltersDateRange, filtersDropdown_1.FiltersDropdown, filtersGroups_1.FiltersGroups, filtersRange_1.FiltersRange, filtersDateInput_1.FiltersDateInput];
 const getAllowedFilters = (items) => items.reduce((acc, item) => {
     if (!item || !react_1.default.isValidElement(item)) {
         return acc;

package/dist/filters/components/filtersSaveModal.d.ts

@@ -3,5 +3,7 @@ export interface IFiltersModal {
     isOpen: boolean;
     onClose: (isOpen: boolean) => void;
     onSave: (filterName: string) => void;
+    className?: string;
+    prioritize?: boolean;
 }
-export declare const FiltersSaveModal: ({ isOpen, onClose, onSave }: IFiltersModal) => import("react/jsx-runtime").JSX.Element;
+export declare const FiltersSaveModal: ({ isOpen, onClose, onSave, className, prioritize }: IFiltersModal) => import("react/jsx-runtime").JSX.Element;

package/dist/filters/components/filtersSaveModal.js

@@ -9,7 +9,7 @@ const textInput_1 = require("../../textInput/textInput");
 const filtersSavedItemsProvider_1 = require("./filtersSavedItemsProvider");
 const iconDisk_1 = require("../../icons/iconDisk");
 const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
-const FiltersSaveModal = ({ isOpen, onClose, onSave }) => {
+const FiltersSaveModal = ({ isOpen, onClose, onSave, className, prioritize }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const { items } = (0, filtersSavedItemsProvider_1.useFiltersSavedItems)();
     const iconDriveClassName = (0, useDriveClassName_1.useDriveClassName)("icon");
@@ -48,6 +48,6 @@ const FiltersSaveModal = ({ isOpen, onClose, onSave }) => {
         return "";
     }, [filterName, isValidFilterName, items, translate]);
     const saveIcon = (0, react_1.useCallback)(() => (0, jsx_runtime_1.jsx)(iconDisk_1.IconDisk, { description: translate("Save"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }), [iconDriveClassName, translate]);
-    return (0, jsx_runtime_1.jsxs)(modal_1.Modal, { isOpen: isOpen, onClose: toggleSaveModal, title: translate("Save filters"), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-filters-modal__content", children: (0, jsx_runtime_1.jsx)(textInput_1.TextInput, { value: filterName, ariaLabel: translate("Filter title"), placeholder: translate("Filter title"), onChange: handleSaveModalFieldChange, maxLength: 100, error: errorText }) }), (0, jsx_runtime_1.jsx)(modal_1.Modal.SecondaryButton, { onClick: handleCancelSaveModal, title: translate("Cancel"), children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(modal_1.Modal.PrimaryButton, { onClick: handleApplySaveModal, icon: saveIcon, title: translate("Save"), children: translate("Save") })] });
+    return (0, jsx_runtime_1.jsxs)(modal_1.Modal, { focus: "content", modalContainerClassName: prioritize ? "zen-filters-prioritized-modal" : "", isOpen: isOpen, onClose: toggleSaveModal, title: translate("Save filters"), className: className || "", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-filters-modal__content", children: (0, jsx_runtime_1.jsx)(textInput_1.TextInput, { value: filterName, ariaLabel: translate("Filter title"), placeholder: translate("Filter title"), onChange: handleSaveModalFieldChange, maxLength: 100, error: errorText }) }), (0, jsx_runtime_1.jsx)(modal_1.Modal.SecondaryButton, { onClick: handleCancelSaveModal, title: translate("Cancel"), children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(modal_1.Modal.PrimaryButton, { onClick: handleApplySaveModal, icon: saveIcon, title: translate("Save"), children: translate("Save") })] });
 };
 exports.FiltersSaveModal = FiltersSaveModal;