@geotab/zenith 3.5.0 → 3.6.0-beta.1

package/dist/filters/filtersHelper.js

@@ -1,9 +1,20 @@
 "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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRecentSearchesFromStorage = exports.getSavedFiltersFromStorage = exports.getArrayOfElements = exports.useCombineData = exports.MAX_TOTAL_RESULTS = exports.serializeEntriesToId = exports.getTotalChangedNumber = exports.getNumberOfChangedFilters = exports.createStateObject = exports.getFiltersState = exports.getChildren = exports.prepareDefaultDropdownState = exports.getDropdownStateType = exports.stabilizeChildrenWithId = exports.createPropsHash = exports.createStateHash = void 0;
+exports.processChildrenWithMetaData = exports.getRecentSearchesFromStorage = exports.getSavedFiltersFromStorage = exports.getArrayOfElements = exports.useCombineData = exports.MAX_TOTAL_RESULTS = exports.serializeEntriesToId = exports.getTotalChangedNumber = exports.getNumberOfChangedFilters = exports.createStateObject = exports.getFiltersState = exports.getChildren = exports.prepareDefaultDropdownState = exports.getDropdownStateType = exports.stabilizeChildrenWithId = exports.createPropsHash = exports.createStateHash = void 0;
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = require("react");
 const filtersGroups_1 = require("./components/filtersGroups");
@@ -14,6 +25,10 @@ const filtersChip_1 = require("./components/filtersChip");
 const filtersDropdown_1 = require("./components/filtersDropdown");
 const filtersSearchList_1 = require("./components/filtersSearchList");
 const types_1 = require("../groupsFilterRaw/types");
+const headerHelpers_1 = require("../header/headerHelpers");
+const filtersItem_1 = require("./components/filtersItem");
+const zen_1 = require("../utils/zen");
+require("../utils/globalThisPolyfill");
 const createStateHash = (state) => {
     if (state === undefined) {
         return "undefined";
@@ -108,13 +123,13 @@ const getFiltersState = (children) => {
         const childProps = child.props;
         state[childProps.id] = {};
         state[childProps.id].state = childProps.state;
-        if (child.type === filtersGroups_1.FiltersGroups) {
+        if (child.type === filtersGroups_1.FiltersGroups || childProps.childType === "FiltersGroups") {
             state[childProps.id].defaultState = types_1.groupsFilterTotalStateDefault;
         }
-        else if (child.type === filtersChip_1.FiltersChip) {
+        else if (child.type === filtersChip_1.FiltersChip || childProps.childType === "FiltersChip") {
             state[childProps.id].defaultState = false;
         }
-        else if (child.type === filtersDropdown_1.FiltersDropdown) {
+        else if (child.type === filtersDropdown_1.FiltersDropdown || childProps.childType === "FiltersDropdown") {
             state[childProps.id].defaultState = childProps.defaultState || (0, exports.prepareDefaultDropdownState)((0, exports.getDropdownStateType)(childProps.state));
         }
         else {
@@ -129,13 +144,13 @@ const createStateObject = (children, field) => {
     react_1.Children.forEach(children, (child) => {
         const childProps = child.props;
         state[childProps.id] = {};
-        if (child.type === filtersGroups_1.FiltersGroups && field === "defaultState") {
+        if ((child.type === filtersGroups_1.FiltersGroups || childProps.childType === "FiltersGroups") && field === "defaultState") {
             state[childProps.id] = types_1.groupsFilterTotalStateDefault;
         }
-        else if (child.type === filtersChip_1.FiltersChip && field === "defaultState") {
+        else if ((child.type === filtersChip_1.FiltersChip || childProps.childType === "FiltersChip") && field === "defaultState") {
             state[childProps.id] = false;
         }
-        else if (child.type === filtersDropdown_1.FiltersDropdown && field === "defaultState") {
+        else if ((child.type === filtersDropdown_1.FiltersDropdown || childProps.childType === "FiltersDropdown") && field === "defaultState") {
             state[childProps.id] = childProps.defaultState || (0, exports.prepareDefaultDropdownState)((0, exports.getDropdownStateType)(childProps.state));
         }
         else {
@@ -238,7 +253,8 @@ const dateReviver = (_, value) => {
     return value;
 };
 const getParsedFilters = (storageKey) => {
-    const storedData = localStorage.getItem(storageKey);
+    var _a;
+    const storedData = (_a = zen_1.zen.localStorage) === null || _a === void 0 ? void 0 : _a.getItem(storageKey);
     if (!storedData) {
         return [];
     }
@@ -256,7 +272,8 @@ async function getSavedFiltersFromStorage(key) {
 }
 exports.getSavedFiltersFromStorage = getSavedFiltersFromStorage;
 function getRecentSearchesFromStorage(key) {
-    const storedData = localStorage.getItem(key);
+    var _a;
+    const storedData = (_a = zen_1.zen.localStorage) === null || _a === void 0 ? void 0 : _a.getItem(key);
     if (!storedData) {
         return [];
     }
@@ -269,3 +286,45 @@ function getRecentSearchesFromStorage(key) {
     }
 }
 exports.getRecentSearchesFromStorage = getRecentSearchesFromStorage;
+const createDefaultStateMetaData = (defaultState, childType, state) => {
+    if (defaultState) {
+        return defaultState;
+    }
+    if (childType === "FiltersGroups") {
+        return types_1.groupsFilterTotalStateDefault;
+    }
+    if (childType === "FiltersChip") {
+        return false;
+    }
+    if (childType === "FiltersDropdown") {
+        return (0, exports.prepareDefaultDropdownState)((0, exports.getDropdownStateType)(state));
+    }
+    return defaultState;
+};
+/**
+ * Processes children to apply Static Metadata pattern
+ * If a component has metaData, it merges the metaData with component props
+ * @param children - React children to process
+ * @returns Processed ReactElement array
+ */
+const processChildrenWithMetaData = (children) => {
+    const childrenArray = (0, headerHelpers_1.getArrayOfChildren)(children);
+    const allowedElements = (0, filtersItem_1.getAllowedFilters)(childrenArray);
+    return allowedElements.map(child => {
+        const componentType = child.type;
+        const metaData = componentType === null || componentType === void 0 ? void 0 : componentType.metaData;
+        if (metaData) {
+            // If component has metaData, merge it with existing props
+            // MetaData provides: id, name, defaultState, visible, childType
+            // Component props provide: state, onChange, and other props
+            const childProps = child.props;
+            const { state, onChange } = childProps, otherProps = __rest(childProps, ["state", "onChange"]);
+            const mergedProps = Object.assign(Object.assign({}, otherProps), { id: metaData.id, defaultState: createDefaultStateMetaData(metaData.defaultState || childProps.defaultState, metaData.childType, state), visible: metaData.visible, state,
+                onChange, childType: metaData.childType });
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+            return react_2.default.cloneElement(child, mergedProps);
+        }
+        return child;
+    });
+};
+exports.processChildrenWithMetaData = processChildrenWithMetaData;

package/dist/filtersBar/components/filtersBarDropdown/filtersBarDropdown.js

@@ -7,7 +7,6 @@ const sidePanelCell_1 = require("../../../sidePanel/sidePanelCell/sidePanelCell"
 const dropdown_1 = require("../../../dropdown/dropdown");
 const filtersBarSidePanelRadioGroup_1 = require("../../filtersBarSidePanel/components/filtersBarSidePanelRadioGroup/filtersBarSidePanelRadioGroup");
 const filtersBarSidePanelCheckboxGroup_1 = require("../../filtersBarSidePanel/components/filtersBarSidePanelCheckboxGroup/filtersBarSidePanelCheckboxGroup");
-const useUniqueId_1 = require("../../../commonHelpers/useUniqueId");
 const pillBox_1 = require("../../../pillBox/pillBox");
 const classNames_1 = require("../../../commonHelpers/classNames/classNames");
 const useLanguage_1 = require("../../../utils/localization/useLanguage");
@@ -24,11 +23,11 @@ const FiltersBarDropdown = ({ sidePanelTitle, className, props, state, useSidePa
     const isCurrentAllSelected = (0, react_1.useMemo)(() => isFullSelectionMode ? state.isAllSelected : undefined, [isFullSelectionMode, state]);
     const [_, setNamedFnReady] = (0, react_1.useState)(false);
     const namedItemsFnRef = (0, react_1.useRef)(items => items.map(el => ({ id: el, name: "..." })));
-    const dropdownId = (0, useUniqueId_1.useUniqueId)();
-    const checkBoxLabelledId = (0, useUniqueId_1.useUniqueId)();
-    const radioGroupLabelledId = (0, useUniqueId_1.useUniqueId)();
-    const dropdownLabelledId = (0, useUniqueId_1.useUniqueId)();
     const sidePanelCellRef = (0, react_1.useRef)(null);
+    const dropdownId = (0, react_1.useId)();
+    const checkBoxLabelledId = (0, react_1.useId)();
+    const radioGroupLabelledId = (0, react_1.useId)();
+    const dropdownLabelledId = (0, react_1.useId)();
     const sortedItems = (0, react_1.useMemo)(() => (0, dropdownHelper_1.sortDropdownItemArray)(props.dataItems || [], props.sortFn), [props.sortFn, props.dataItems]);
     const handleFocusOnRemove = (0, react_1.useCallback)((newSelectedFirstItem) => {
         var _a, _b, _c;

package/dist/filtersBar/components/filtersBarGroupButton/filtersBarGroupButton.js

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FiltersBarGroupButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const classNames_1 = require("../../../commonHelpers/classNames/classNames");
-const useUniqueId_1 = require("../../../commonHelpers/useUniqueId");
 const groupButton_1 = require("../../../groupButton/groupButton");
 const sidePanelCell_1 = require("../../../sidePanel/sidePanelCell/sidePanelCell");
 const FiltersBarGroupButton = ({ className, state, props, onChange: onChangeState, useSidePanelView, sidePanelTitle }) => {
     const groupData = props.groupData;
-    const groupButtonLabelledId = (0, useUniqueId_1.useUniqueId)();
+    const groupButtonLabelledId = (0, react_1.useId)();
     const fullGroupData = groupData.map(item => (Object.assign(Object.assign({}, item), { selected: item.value === state.selectedValue })));
     const onChangeEvent = (event) => {
         const value = event.target.value;

package/dist/filtersBar/components/filtersBarGroupsFilter/filtersBarGroupsFilter.js

@@ -4,10 +4,10 @@ exports.FiltersBarGroupsFilter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const groupsFilter_1 = require("../../../groupsFilter/groupsFilter");
 const sidePanelCell_1 = require("../../../sidePanel/sidePanelCell/sidePanelCell");
-const useUniqueId_1 = require("../../../commonHelpers/useUniqueId");
+const react_1 = require("react");
 const FiltersBarGroupsFilter = ({ props, state, sidePanelTitle, useSidePanelView, onChange: onChangeState }) => {
     const component = (0, jsx_runtime_1.jsx)(groupsFilter_1.GroupsFilter, Object.assign({}, props, { fullSize: useSidePanelView, initialFilterState: state.value, onChange: (value) => onChangeState({ value }) }));
-    const groupFilterLabelledId = (0, useUniqueId_1.useUniqueId)();
+    const groupFilterLabelledId = (0, react_1.useId)();
     if (!useSidePanelView) {
         return component;
     }

package/dist/filtersBar/components/filtersBarPeriodPicker/filtersBarPeriodPicker.d.ts

@@ -35,8 +35,8 @@ interface IFiltersBarPeriodPickerImp extends IFiltersBarItem<IDateRangeValueOpti
     checkError?: (isError: boolean) => void;
     sidePanelMaxGroupedItemsLength?: number;
     /**
-    * @deprecated - will be removed in future releases
-    */
+     * @deprecated - will be removed in future releases
+     */
     hasApplyButton?: boolean;
 }
 export interface IFiltersBarPeriodPicker extends Omit<IFiltersBarPeriodPickerImp, "onChange"> {
@@ -50,8 +50,8 @@ interface IFiltersBarPeriodPickerUnsetValueImp extends IFiltersBarItem<IPeriodPi
     checkError?: (isError: boolean) => void;
     sidePanelMaxGroupedItemsLength?: number;
     /**
-    * @deprecated - will be removed in future releases
-    */
+     * @deprecated - will be removed in future releases
+     */
     hasApplyButton?: boolean;
 }
 export interface IFiltersBarPeriodPickerUnsetValue extends Omit<IFiltersBarPeriodPickerUnsetValueImp, "onChange"> {

package/dist/filtersBar/components/filtersBarPeriodPicker/filtersBarPeriodPicker.js

@@ -6,7 +6,6 @@ const react_1 = require("react");
 const sidePanelCell_1 = require("../../../sidePanel/sidePanelCell/sidePanelCell");
 const classNames_1 = require("../../../commonHelpers/classNames/classNames");
 const dateRangeInner_1 = require("../../../dateRangeInner/dateRangeInner");
-const useUniqueId_1 = require("../../../commonHelpers/useUniqueId");
 const useLanguage_1 = require("../../../utils/localization/useLanguage");
 const getRangeOption_1 = require("./getRangeOption");
 const userFormatContext_1 = require("../../../utils/userFormat/userFormatContext");
@@ -17,54 +16,67 @@ const FiltersBarPeriodPicker = ({ props, hasApplyButton, className, useSidePanel
     const { options: optionsArg, withCalendar, timeSelect, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, lockStartDate, lockEndDate, classNamePopup } = props;
     const { translate } = (0, useLanguage_1.useLanguage)();
     const { toLocalDateTime, toReverseOffsetDateTime, weekStartsOnSunday } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
-    const id = (0, useUniqueId_1.useUniqueId)();
+    const id = (0, react_1.useId)();
     const optionsMap = (0, react_1.useMemo)(() => (0, getRangeOption_1.getOptionsPeriodMap)(optionsArg, translate, toLocalDateTime, weekStartsOnSunday ? "Sunday" : "Monday", toReverseOffsetDateTime), [optionsArg, toLocalDateTime, toReverseOffsetDateTime, translate, weekStartsOnSunday]);
     const [selectedRange, setSelectedRange] = (0, react_1.useState)((0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, state));
-    const filterBarLabelledId = (0, useUniqueId_1.useUniqueId)();
+    const filterBarLabelledId = (0, react_1.useId)();
     const [prevSelection, setPrevSelection] = (0, react_1.useState)((0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, state));
+    const datesValidation = (0, react_1.useCallback)(val => (0, getRangeOption_1.isValidDateFn)(props.allowUnsetValue || false)(val), [props.allowUnsetValue]);
+    const isDatesValid = (0, react_1.useRef)(datesValidation(state));
     const getCustomRange = (0, react_1.useCallback)(() => ({ from: (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.from) || new Date(), to: (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.to) || new Date() }), [prevSelection]);
     const options = (0, react_1.useMemo)(() => (0, getRangeOption_1.getRangeOptionsArray)(optionsArg, translate, toLocalDateTime, weekStartsOnSunday ? "Sunday" : "Monday", toReverseOffsetDateTime, withCalendar || false, prevSelection && prevSelection.label === dateRangeInner_1.CUSTOM_CALENDAR_ID, prevSelection ? getCustomRange : undefined), [optionsArg, translate, toLocalDateTime, weekStartsOnSunday, toReverseOffsetDateTime, withCalendar, prevSelection, getCustomRange]);
     const hasCustomOption = (0, react_1.useMemo)(() => options.find(option => option.id === dateRangeInner_1.CUSTOM_CALENDAR_ID) !== undefined, [options]);
-    const [customDate, setCustomDate] = (0, react_1.useState)((0, normalizeDates_1.normalizeDates)(state === null || state === void 0 ? void 0 : state.from.toISOString(), state === null || state === void 0 ? void 0 : state.to.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter));
+    const [customDate, setCustomDate] = (0, react_1.useState)((0, normalizeDates_1.normalizeDates)((0, getRangeOption_1.isDateValid)(state === null || state === void 0 ? void 0 : state.from) ? state.from.toISOString() : undefined, (0, getRangeOption_1.isDateValid)(state === null || state === void 0 ? void 0 : state.to) ? state.to.toISOString() : undefined, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter));
+    const handleDateRangeSelection = (0, react_1.useCallback)(
     // eslint-disable-next-line complexity
-    const handleDateRangeSelection = (0, react_1.useCallback)((val) => {
+    (val) => {
         var _a, _b;
         const selection = options.find(option => option.id === val);
         if (selection && val !== dateRangeInner_1.CUSTOM_CALENDAR_ID && selection.getRange) {
             const range = selection.getRange();
             const normalizedDates = (0, normalizeDates_1.normalizeDates)(range.from.toISOString(), range.to.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
-            const newRange = val === dateRangeInner_1.CUSTOM_CALENDAR_ID ?
-                { from: new Date(normalizedDates.from), to: new Date(normalizedDates.to) }
-                : range;
+            const newRange = val === dateRangeInner_1.CUSTOM_CALENDAR_ID ? { from: new Date(normalizedDates.from), to: new Date(normalizedDates.to) } : range;
             setCustomDate({ from: newRange.from.toISOString(), to: newRange.to.toISOString() });
             // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
             checkError && checkError(!range.from || !range.to);
             onChange(Object.assign({ label: selection.id }, newRange));
         }
         else {
-            const startDateForNormalize = ((_a = selection === null || selection === void 0 ? void 0 : selection.getRange) === null || _a === void 0 ? void 0 : _a.call(selection)) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) !== val ? selection.getRange().from.toISOString() : state === null || state === void 0 ? void 0 : state.from.toISOString();
-            const endDateForNormalize = ((_b = selection === null || selection === void 0 ? void 0 : selection.getRange) === null || _b === void 0 ? void 0 : _b.call(selection)) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) !== val ? selection.getRange().to.toISOString() : state === null || state === void 0 ? void 0 : state.to.toISOString();
-            const normalizedDates = (0, normalizeDates_1.normalizeDates)(startDateForNormalize, endDateForNormalize, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
-            const newRange = val === dateRangeInner_1.CUSTOM_CALENDAR_ID ?
-                { from: new Date(normalizedDates.from), to: new Date(normalizedDates.to) }
-                : undefined;
+            const startDateForNormalize = ((_a = selection === null || selection === void 0 ? void 0 : selection.getRange) === null || _a === void 0 ? void 0 : _a.call(selection)) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) !== val ? selection.getRange().from : state === null || state === void 0 ? void 0 : state.from;
+            const endDateForNormalize = ((_b = selection === null || selection === void 0 ? void 0 : selection.getRange) === null || _b === void 0 ? void 0 : _b.call(selection)) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) !== val ? selection.getRange().to : state === null || state === void 0 ? void 0 : state.to;
+            if (!datesValidation(startDateForNormalize === undefined && endDateForNormalize === undefined ? undefined : { from: startDateForNormalize, to: endDateForNormalize })) {
+                console.error("Invalid Date objects provided to DateRange", { from: startDateForNormalize, to: endDateForNormalize });
+                return;
+            }
+            const normalizedDates = (0, normalizeDates_1.normalizeDates)(startDateForNormalize === null || startDateForNormalize === void 0 ? void 0 : startDateForNormalize.toISOString(), endDateForNormalize === null || endDateForNormalize === void 0 ? void 0 : endDateForNormalize.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+            const newRange = val === dateRangeInner_1.CUSTOM_CALENDAR_ID ? { from: new Date(normalizedDates.from), to: new Date(normalizedDates.to) } : undefined;
             const newValueFrom = (newRange === null || newRange === void 0 ? void 0 : newRange.from) || new Date();
             const newValueTo = (newRange === null || newRange === void 0 ? void 0 : newRange.to) || new Date();
             setSelectedRange({ label: val, from: newValueFrom, to: newValueTo });
             setCustomDate({ from: newValueFrom.toISOString(), to: newValueTo.toISOString() });
             onChange({ label: val, from: newValueFrom, to: newValueTo });
         }
-    }, [options, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, checkError, onChange, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, state === null || state === void 0 ? void 0 : state.from, state === null || state === void 0 ? void 0 : state.to]);
+    }, [options, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, checkError, onChange, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, state === null || state === void 0 ? void 0 : state.from, state === null || state === void 0 ? void 0 : state.to, datesValidation]);
     (0, react_1.useEffect)(() => {
         const currentState = (0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, state);
+        isDatesValid.current = datesValidation(state);
+        if (!datesValidation(state)) {
+            console.error("Invalid Date objects provided to DateRange", { from: state === null || state === void 0 ? void 0 : state.from, to: state === null || state === void 0 ? void 0 : state.to });
+            return;
+        }
         if ((prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label) !== (currentState === null || currentState === void 0 ? void 0 : currentState.label)) {
             setSelectedRange(currentState);
             setPrevSelection(currentState);
         }
-        if (useSidePanelView && (defaultState === null || defaultState === void 0 ? void 0 : defaultState.label) === dateRangeInner_1.CUSTOM_CALENDAR_ID && (currentState === null || currentState === void 0 ? void 0 : currentState.label) === dateRangeInner_1.CUSTOM_CALENDAR_ID &&
+        if (useSidePanelView &&
+            (defaultState === null || defaultState === void 0 ? void 0 : defaultState.label) === dateRangeInner_1.CUSTOM_CALENDAR_ID &&
+            (currentState === null || currentState === void 0 ? void 0 : currentState.label) === dateRangeInner_1.CUSTOM_CALENDAR_ID &&
             (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label) === dateRangeInner_1.CUSTOM_CALENDAR_ID &&
-            defaultState.from.toISOString() === currentState.from.toISOString() && defaultState.to.toISOString() === currentState.to.toISOString()
-            && customDate.from && customDate.to && (customDate.from !== defaultState.from.toISOString() || customDate.to !== defaultState.to.toISOString())) {
+            defaultState.from.toISOString() === currentState.from.toISOString() &&
+            defaultState.to.toISOString() === currentState.to.toISOString() &&
+            customDate.from &&
+            customDate.to &&
+            (customDate.from !== defaultState.from.toISOString() || customDate.to !== defaultState.to.toISOString())) {
             const normalizedDates = (0, normalizeDates_1.normalizeDates)(defaultState.from.toISOString(), defaultState.to.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
             const newRange = { from: new Date(normalizedDates.from), to: new Date(normalizedDates.to) };
             const updatedState = { label: dateRangeInner_1.CUSTOM_CALENDAR_ID, from: newRange.from, to: newRange.to };
@@ -72,24 +84,50 @@ const FiltersBarPeriodPicker = ({ props, hasApplyButton, className, useSidePanel
             setPrevSelection(updatedState);
             setCustomDate({ from: newRange.from.toISOString(), to: newRange.to.toISOString() });
         }
-    }, [prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label, state, defaultState, useSidePanelView, customDate.from, customDate.to,
-        disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, optionsMap]);
-    const handleCustomDate = (0, react_1.useCallback)((value) => {
+    }, [
+        prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label,
+        state,
+        defaultState,
+        useSidePanelView,
+        customDate.from,
+        customDate.to,
+        disableFutureDates,
+        disablePastDates,
+        disableDatesBefore,
+        disableDatesAfter,
+        optionsMap,
+        datesValidation
+    ]);
+    const handleCustomDate = (0, react_1.useCallback)(value => {
         const isHasError = !value.from || !value.to;
         checkError && checkError(isHasError);
         setSelectedRange({ label: dateRangeInner_1.CUSTOM_CALENDAR_ID, from: lockStartDate || value.from, to: lockEndDate || (lockStartDate ? value.to || value.from : value.to) });
         setCustomDate({ from: lockStartDate || value.from, to: lockEndDate || (lockStartDate ? value.to || value.from : value.to) });
-        !isHasError && onChange({
-            label: dateRangeInner_1.CUSTOM_CALENDAR_ID,
-            from: new Date((lockStartDate || value.from)),
-            to: new Date((lockEndDate || (lockStartDate ? value.to || value.from : value.to)))
-        });
+        !isHasError &&
+            onChange({
+                label: dateRangeInner_1.CUSTOM_CALENDAR_ID,
+                from: new Date((lockStartDate || value.from)),
+                to: new Date((lockEndDate || (lockStartDate ? value.to || value.from : value.to)))
+            });
     }, [checkError, lockEndDate, lockStartDate, onChange]);
     const range = (0, react_1.useMemo)(() => ({ from: customDate.from, to: customDate.to }), [customDate.from, customDate.to]);
-    const component = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(DateRangeInnerMemo, { id: `${id}-daterange`, options: options, onOptionSelect: handleDateRangeSelection, onCalendarSelect: hasCustomOption ? handleCustomDate : undefined, selection: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, range: range, timeSelect: timeSelect, disableFutureDates: disableFutureDates, disablePastDates: disablePastDates, disableDatesBefore: disableDatesBefore, disableDatesAfter: disableDatesAfter }) }), [id, options, handleDateRangeSelection, hasCustomOption, handleCustomDate, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, range, timeSelect, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter]);
+    const component = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(DateRangeInnerMemo, { id: `${id}-daterange`, options: options, onOptionSelect: handleDateRangeSelection, onCalendarSelect: hasCustomOption ? handleCustomDate : undefined, selection: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, range: range, timeSelect: timeSelect, disableFutureDates: disableFutureDates, disablePastDates: disablePastDates, disableDatesBefore: disableDatesBefore, disableDatesAfter: disableDatesAfter }) })), [
+        id,
+        options,
+        handleDateRangeSelection,
+        hasCustomOption,
+        handleCustomDate,
+        selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label,
+        range,
+        timeSelect,
+        disableFutureDates,
+        disablePastDates,
+        disableDatesBefore,
+        disableDatesAfter
+    ]);
     const popup = (0, react_1.useMemo)(() => {
         const commonProps = Object.assign(Object.assign({}, props), { hasApplyButton: useSidePanelView ? false : props.hasApplyButton || hasApplyButton, id: id, className: (0, classNames_1.classNames)(["zen-filters-bar-period-picker", useSidePanelView ? "zen-filters-bar-period-picker--full-width" : "", className !== null && className !== void 0 ? className : ""]), classNamePopup: (0, classNames_1.classNames)(["zen-filters-bar-period-picker__popup", useSidePanelView ? "zen-filters-bar-period-picker__popup--full-width" : "", classNamePopup || ""]), classNameWrapper: (0, classNames_1.classNames)([useSidePanelView ? "zen-filters-bar-period-picker-wrapper" : ""]), options: optionsArg });
-        return props.allowUnsetValue ? (0, jsx_runtime_1.jsx)(dateRangeRaw_1.DateRangeRaw, Object.assign({}, commonProps, { value: state, onChange: onChange, defaultValue: defaultState, allowUnsetValue: true })) : (0, jsx_runtime_1.jsx)(dateRangeRaw_1.DateRangeRaw, Object.assign({}, commonProps, { value: state, onChange: onChange, defaultValue: defaultState, allowUnsetValue: false }));
+        return props.allowUnsetValue ? ((0, jsx_runtime_1.jsx)(dateRangeRaw_1.DateRangeRaw, Object.assign({}, commonProps, { value: state, onChange: onChange, defaultValue: defaultState, allowUnsetValue: true }))) : ((0, jsx_runtime_1.jsx)(dateRangeRaw_1.DateRangeRaw, Object.assign({}, commonProps, { value: state, onChange: onChange, defaultValue: defaultState, allowUnsetValue: false })));
     }, [props, useSidePanelView, id, className, classNamePopup, optionsArg, state, onChange, defaultState, hasApplyButton]);
     if (!options.length && !hasCustomOption) {
         return "";
@@ -98,14 +136,7 @@ const FiltersBarPeriodPicker = ({ props, hasApplyButton, className, useSidePanel
         return popup;
     }
     const isUsePopup = options.length > sidePanelMaxGroupedItemsLength;
-    return (0, jsx_runtime_1.jsx)(sidePanelCell_1.SidePanelCell, { role: "group", labelledBy: filterBarLabelledId, titleId: filterBarLabelledId, title: sidePanelTitle, withoutSidePaddings: !isUsePopup, children: isUsePopup ? popup : component });
+    return ((0, jsx_runtime_1.jsx)(sidePanelCell_1.SidePanelCell, { role: "group", labelledBy: filterBarLabelledId, titleId: filterBarLabelledId, title: sidePanelTitle, withoutSidePaddings: !isUsePopup, children: isUsePopup ? popup : component }));
 };
 exports.FiltersBarPeriodPicker = FiltersBarPeriodPicker;
-exports.TRANSLATIONS = [
-    "Clear",
-    "Reset",
-    "Apply",
-    "Date range filter",
-    "The start date cannot be empty.",
-    "The end date cannot be empty."
-];
+exports.TRANSLATIONS = ["Clear", "Reset", "Apply", "Date range filter", "The start date cannot be empty.", "The end date cannot be empty."];

package/dist/filtersBar/components/filtersBarPeriodPicker/getRangeOption.d.ts

@@ -36,6 +36,8 @@ export interface IDateRangeOptionsItem {
 }
 export declare const getRangeOptionsArray: (initialOptions: TDateRangeOption[], translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date, customLabel?: boolean, isPrevRangeCustom?: boolean, customGetRangeOptions?: () => IDateRange) => IDateRangeOptionsItem[];
 export declare const getOptionsPeriodMap: (initialOptions: TDateRangeOption[], translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => Map<string, IDateRangeOptionId>;
+export declare const isDateValid: (value: unknown) => value is Date;
+export declare const isValidDateFn: (allowUnsetVal: boolean) => (val: any) => boolean;
 export declare const getSelectedRangeFromValue: (optionsMap: Map<string, IDateRangeOptionId>, value?: IDateRangeValueOptionalLabel) => {
     label: string;
     from: Date;

package/dist/filtersBar/components/filtersBarPeriodPicker/getRangeOption.js

@@ -6,7 +6,7 @@ const {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.dateRangeAdjustedFn = exports.getDateRangeAdjustedStep = exports.PERIOD_THIRTY_DAYS_STEP_OPTION = exports.PERIOD_SEVEN_DAYS_STEP_OPTION = exports.PERIOD_ONE_DAY_STEP_OPTION = exports.QUARTER_STEP_OPTION = exports.YEAR_STEP_OPTION = exports.DEFAULT_STEP_OPTION = exports.MONTH_STEP_OPTION = exports.getSelectedRangeFromValue = exports.getOptionsPeriodMap = exports.getRangeOptionsArray = exports.getRangeOption = void 0;
+exports.dateRangeAdjustedFn = exports.getDateRangeAdjustedStep = exports.PERIOD_THIRTY_DAYS_STEP_OPTION = exports.PERIOD_SEVEN_DAYS_STEP_OPTION = exports.PERIOD_ONE_DAY_STEP_OPTION = exports.QUARTER_STEP_OPTION = exports.YEAR_STEP_OPTION = exports.DEFAULT_STEP_OPTION = exports.MONTH_STEP_OPTION = exports.getSelectedRangeFromValue = exports.isValidDateFn = exports.isDateValid = exports.getOptionsPeriodMap = exports.getRangeOptionsArray = exports.getRangeOption = void 0;
 const dateRangeUtils_1 = require("../../../dateRange/dateRangeUtils");
 const dateRangeInner_1 = require("../../../dateRangeInner/dateRangeInner");
 injectString("cs", "This week", "Tento t\xFDden");
@@ -478,23 +478,23 @@ injectString("zh-Hans", "Last 30 days", "\u6700\u8FD1 30 \u5929");
 injectString("zh-TW", "Last 30 days", "\u904E\u53BB 30 \u5929");
 injectString("ro-RO", "Last 30 days", "Ultimele 30 de zile");
 const options = {
-  "Today": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_TODAY_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "Yesterday": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_YESTERDAY_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "ThisWeek": (translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_THIS_WEEK_OPTION)(toLocalDateTime, translate, firstDayOfWeek, toReverseOffsetDateTime),
-  "NextWeek": (translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_NEXT_WEEK_OPTION)(toLocalDateTime, translate, firstDayOfWeek, toReverseOffsetDateTime),
-  "LastWeek": (translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_LAST_WEEK_OPTION)(toLocalDateTime, translate, firstDayOfWeek, toReverseOffsetDateTime),
-  "ThisMonth": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_THIS_MONTH_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "NextMonth": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_NEXT_MONTH_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "LastMonth": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_LAST_MONTH_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "LastSevenDays": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_LAST_SEVEN_DAYS_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "LastThirtyDays": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_LAST_THIRTY_DAYS_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "LastTwelveMonths": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_LAST_TWELVE_MONTHS_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "LastThreeMonths": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_LAST_THREE_MONTH_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "ThisQuarter": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_THIS_QUARTER_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "LastQuarter": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_LAST_QUARTER_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "LastYear": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_LAST_YEAR_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "ThisYear": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_THIS_YEAR_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
-  "YearToDate": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_YEAR_TO_DATE_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime)
+  Today: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_TODAY_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
+  Yesterday: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_YESTERDAY_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
+  ThisWeek: (translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_THIS_WEEK_OPTION)(toLocalDateTime, translate, firstDayOfWeek, toReverseOffsetDateTime),
+  NextWeek: (translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_NEXT_WEEK_OPTION)(toLocalDateTime, translate, firstDayOfWeek, toReverseOffsetDateTime),
+  LastWeek: (translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_LAST_WEEK_OPTION)(toLocalDateTime, translate, firstDayOfWeek, toReverseOffsetDateTime),
+  ThisMonth: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_THIS_MONTH_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
+  NextMonth: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_NEXT_MONTH_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
+  LastMonth: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_LAST_MONTH_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
+  LastSevenDays: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_LAST_SEVEN_DAYS_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
+  LastThirtyDays: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_LAST_THIRTY_DAYS_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
+  LastTwelveMonths: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_LAST_TWELVE_MONTHS_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
+  LastThreeMonths: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_LAST_THREE_MONTH_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
+  ThisQuarter: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_THIS_QUARTER_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
+  LastQuarter: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_LAST_QUARTER_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
+  LastYear: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_LAST_YEAR_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
+  ThisYear: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_THIS_YEAR_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
+  YearToDate: (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_YEAR_TO_DATE_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime)
 };
 function getRangeOption(option, translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime) {
   if (typeof option === "string") {
@@ -512,9 +512,10 @@ function getRangeOption(option, translate, toLocalDateTime, firstDayOfWeek, toRe
 exports.getRangeOption = getRangeOption;
 const getSecondaryLabelOptions = translate => ["ThisWeek", "NextWeek", "LastWeek", "ThisMonth", "LastMonth", "NextMonth", "LastThreeMonths", "LastYear", "ThisYear", "ThisQuarter", "LastQuarter", "LastTwelveMonths", "YearToDate", translate("This week"), translate("Next week"), translate("Last week"), translate("This month"), translate("Last month"), translate("Next month"), translate("Last 3 months"), translate("Last year"), translate("This year"), translate("This quarter"), translate("Last quarter"), translate("Last 12 months"), translate("Year to date")];
 const getRangeOptionsArray = (initialOptions, translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime, customLabel, isPrevRangeCustom, customGetRangeOptions) => {
-  const optionsArray = initialOptions.map(opt => getRangeOption(opt, translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime)).filter(option => !!option);
+  const optionsArray = initialOptions.map(opt => getRangeOption(opt, translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime)).filter(option => option !== undefined);
   const hasCustomOption = customLabel || initialOptions.includes("Custom");
-  const customOptionIndex = optionsArray.findIndex(el => el.label === "Custom");
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  const customOptionIndex = optionsArray.findIndex(el => (el === null || el === void 0 ? void 0 : el.label) === "Custom");
   const secondaryLabelOptions = getSecondaryLabelOptions(translate);
   let customOption;
   if (customOptionIndex !== -1) {
@@ -536,7 +537,7 @@ const getRangeOptionsArray = (initialOptions, translate, toLocalDateTime, firstD
       hasSecondaryLabel: customOption ? customOption.hasSecondaryLabel || false : false
     });
   }
-  if (customOption && isPrevRangeCustom) {
+  if (customOption && isPrevRangeCustom && customGetRangeOptions) {
     customOption.getRange = customGetRangeOptions;
   }
   customOption && preparedOptions.push(Object.assign(Object.assign({}, customOption), {
@@ -568,10 +569,17 @@ const getOptionsPeriodMap = (initialOptions, translate, toLocalDateTime, firstDa
   return optionsMap;
 };
 exports.getOptionsPeriodMap = getOptionsPeriodMap;
+const isDateValid = value => value instanceof Date && !isNaN(value.getTime());
+exports.isDateValid = isDateValid;
+const isValidDateFn = allowUnsetVal => val => val !== undefined && (0, exports.isDateValid)(val.from) && (0, exports.isDateValid)(val.to) || val === undefined && allowUnsetVal;
+exports.isValidDateFn = isValidDateFn;
 const getSelectedRangeFromValue = (optionsMap, value) => {
   if (!value) {
     return undefined;
   }
+  if (!(0, exports.isDateValid)(value.from) || !(0, exports.isDateValid)(value.to)) {
+    return undefined;
+  }
   const currentOption = optionsMap.get(`${value.from.toISOString()}_${value.to.toISOString()}`);
   if (!currentOption || value.label === dateRangeInner_1.CUSTOM_CALENDAR_ID) {
     return {

package/dist/filtersBar/components/filtersBarRange/filtersBarRange.js

@@ -6,12 +6,12 @@ const sidePanelCell_1 = require("../../../sidePanel/sidePanelCell/sidePanelCell"
 const range_1 = require("../../../range/range");
 const filtersBarSidePanelRange_1 = require("../../filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange");
 const rangeHelper_1 = require("../../../rangeRaw/utils/rangeHelper");
-const useUniqueId_1 = require("../../../commonHelpers/useUniqueId");
+const react_1 = require("react");
 const FiltersBarRange = ({ sidePanelTitle, props, state, useSidePanelView, onChange, checkError }) => {
     const component = (0, jsx_runtime_1.jsx)(range_1.Range, Object.assign({}, props, { value: state.value, onChange: newValue => {
             onChange({ value: newValue });
         } }));
-    const rangeLabelledId = (0, useUniqueId_1.useUniqueId)();
+    const rangeLabelledId = (0, react_1.useId)();
     if (!useSidePanelView) {
         return component;
     }

package/dist/filtersBar/components/filtersBarSearch/filtersBarSearch.js

@@ -4,11 +4,11 @@ exports.FiltersBarSearch = exports.FiltersBarSearchDisplayName = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const searchInputRaw_1 = require("../../../searchInputRaw/searchInputRaw");
 const sidePanelCell_1 = require("../../../sidePanel/sidePanelCell/sidePanelCell");
-const useUniqueId_1 = require("../../../commonHelpers/useUniqueId");
+const react_1 = require("react");
 exports.FiltersBarSearchDisplayName = "FiltersBarSearch";
 const FiltersBarSearch = ({ className, state, props, sidePanelTitle, useSidePanelView, onChange: onChangeState }) => {
-    const inputId = (0, useUniqueId_1.useUniqueId)();
-    const filterBarLabelledId = (0, useUniqueId_1.useUniqueId)();
+    const inputId = (0, react_1.useId)();
+    const filterBarLabelledId = (0, react_1.useId)();
     const component = (0, jsx_runtime_1.jsx)(searchInputRaw_1.SearchInputRaw, Object.assign({}, props, { id: inputId, onChange: value => onChangeState({ value }), value: state.value, className: className }));
     if (!useSidePanelView) {
         return component;

package/dist/filtersBar/filtersBar.js

@@ -24,6 +24,7 @@ const filtersBarProviderSearch_1 = require("./filtersBarProviderSearch");
 const filtersBarProviderTrigger_1 = require("./filtersBarProviderTrigger");
 const focusableSelector_1 = require("../utils/focusableSelector");
 const filtersBarDateInput_1 = require("./components/filtersBarDateInput/filtersBarDateInput");
+const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 /* eslint-enable @typescript-eslint/naming-convention */
 exports.FiltersBarDisplayName = "FiltersBar";
 const getChildren = (children) => (!children
@@ -86,6 +87,7 @@ const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersBu
     const stateFromChildren = (0, react_1.useMemo)(() => getCurrentFiltersState(filterBarChildren), [filterBarChildren]);
     const [filtersBarState, dispatchFiltersBarState] = (0, react_1.useReducer)(filtersBarReducer_1.filtersBarReducer, (0, filtersBarReducer_1.getInitialFiltersBarState)(stateFromChildren, getDefaultFiltersState, onApplyAllFilters === undefined));
     const [sidePanelState, dispatchSidePanelState] = (0, react_1.useReducer)(sidePanelReducer_1.sidePanelReducer, stateFromChildren);
+    const isClientReady = (0, useClientReady_1.useClientReady)();
     (0, react_1.useEffect)(() => {
         // need for dynamic items loading
         if (Object.keys(stateFromChildren).length > Object.keys(sidePanelState).length) {
@@ -117,11 +119,13 @@ const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersBu
                 return;
             }
             react_1.Children.forEach(filterBarChildren, (child) => {
-                dispatchSidePanelState({ type: sidePanelReducer_1.StateActionType.Change, payload: { id: child.props.id, value: { state: child.props.state } } });
+                if (typeof child === "object" && "props" in child) {
+                    dispatchSidePanelState({ type: sidePanelReducer_1.StateActionType.Change, payload: { id: child.props.id, value: { state: child.props.state } } });
+                }
             });
         }
     }, [filterBarChildren, memoizedShouldUpdate, sidePanelState, stateFromChildren]);
-    const searchChild = childrenArray.find(child => child && child.type === filtersBarSearch_1.FiltersBarSearch);
+    const searchChild = childrenArray.find(child => child && typeof child === "object" && "type" in child && child.type === filtersBarSearch_1.FiltersBarSearch);
     setSearchComponent(searchChild);
     (0, react_1.useEffect)(() => {
         setFiltersBarToggleAllFiltersFn(toggleAllFilters);
@@ -129,7 +133,9 @@ const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersBu
     const toggleAllFiltersCallback = (0, react_1.useCallback)((value) => {
         if (!isAllFiltersVisible && value) {
             react_1.Children.forEach(filterBarChildren, (child) => {
-                dispatchSidePanelState({ type: sidePanelReducer_1.StateActionType.Change, payload: { id: child.props.id, value: { state: child.props.state } } });
+                if (typeof child === "object" && "props" in child) {
+                    dispatchSidePanelState({ type: sidePanelReducer_1.StateActionType.Change, payload: { id: child.props.id, value: { state: child.props.state } } });
+                }
             });
         }
         toggleAllFilters(value);
@@ -183,7 +189,7 @@ const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersBu
         return (0, getNumberOfChangedFilters_1.getNumberOfChangedFilters)(filtersBarState.childrenState, filtersBarState.prevChildrenState) > 0;
     }, [filtersBarState.childrenState, filtersBarState.prevChildrenState, getDefaultFiltersState, onApplyAllFilters]);
     const sidePanel = (0, react_1.useMemo)(() => {
-        const sidePanelChild = childrenArray.find(child => child && child.type === filtersBarSidePanel_1.FiltersBarSidePanelContainer);
+        const sidePanelChild = childrenArray.find(child => child && typeof child === "object" && "type" in child && child.type === filtersBarSidePanel_1.FiltersBarSidePanelContainer);
         if (!sidePanelChild) {
             return (0, jsx_runtime_1.jsx)(filtersBarSidePanel_1.FiltersBarSidePanel, { parentElement: parentElement, isOpen: isAllFiltersVisible, triggerRef: isMobile ? mobileTriggerRef || emptyFiltersRef : allFiltersRef, getDefaultFiltersState: getDefaultFiltersState, onClosePanel: onClosePanel, state: sidePanelState, onApplyAllFilters: handleApplyAllFilters(true), dispatch: dispatchSidePanelState, pillName: pillName, pillIcon: pillIcon, pillType: pillType, children: filterBarChildren });
         }
@@ -193,6 +199,9 @@ const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersBu
         pillName, pillIcon, pillType, sidePanelState, filterBarChildren]);
     const noActions = (0, react_1.useMemo)(() => isAllFiltersButtonHidden && (selectedQuantity === undefined && filtersBarState.currentNumberOfChangedFilters === 0 || selectedQuantity === 0)
         && (!isApplyButtonShown || onApplyAllFilters === undefined), [isAllFiltersButtonHidden, selectedQuantity, filtersBarState.currentNumberOfChangedFilters, isApplyButtonShown, onApplyAllFilters]);
+    if (!isClientReady) {
+        return null;
+    }
     return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isMobile && (0, jsx_runtime_1.jsxs)("div", { ref: toolbarRef, className: (0, classNames_1.classNames)(["zen-filters-toolbar", noActions ? "zen-filters-toolbar--no-actions" : "", className !== null && className !== void 0 ? className : ""]), children: [(0, jsx_runtime_1.jsx)(filtersContainer_1.FiltersContainer, { children: filterBarChildren }), (0, jsx_runtime_1.jsx)(filtersBarActions_1.FiltersBarActions, { allFiltersRef: allFiltersRef, onShowAllFilters: () => toggleAllFiltersCallback(true), onClearFilters: handleClearClick, selectedQuantity: selectedQuantity !== undefined ? selectedQuantity : filtersBarState.currentNumberOfChangedFilters, selectedQuantityToDisplay: selectedQuantity !== undefined ? selectedQuantity : filtersBarState.numberOfChangedFilters, hideAllFiltersButton: isAllFiltersButtonHidden, onApplyButtonClick: onApplyAllFilters ? handleApplyAllFilters(false) : undefined, isApplyButtonShown: isApplyButtonShown })] }), !isAllFiltersButtonHidden ? sidePanel : null] });
 };
 exports.FiltersBar = FiltersBar;