@geotab/zenith 1.20.0 → 1.21.0

package/README.md

@@ -40,6 +40,14 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+## 1.21.0
+
+ * Implement `DateRange` with stepper
+ * Implement GroupsFilter selection placeholder for advanced groups filter case
+ * Fix table scroll position with pagination
+ * Fix incorrect clear button disabled state
+ * Update Header's title max-width
+
 ## 1.20.0
 
  * New component `Chart`

package/dist/dateRange/dateRange.d.ts

@@ -7,6 +7,7 @@ interface IDateRangeBase extends IZenComponentProps {
     options: TDateRangeOption[];
     className?: string;
     classNamePopup?: string;
+    classNameWrapper?: string;
     hasApplyButton?: boolean;
     type?: TButton;
     disabled?: boolean;
@@ -21,6 +22,7 @@ interface IDateRangeBase extends IZenComponentProps {
     lockStartDate?: string;
     id?: string;
     error?: string;
+    stepper?: boolean;
 }
 export interface IDateRange extends IDateRangeBase {
     defaultValue: IDateRangeValue;

package/dist/dateRange/dateRange.js

@@ -22,6 +22,10 @@ const mobileSheet_1 = require("../mobileSheet/mobileSheet");
 const footerButtons_1 = require("../footerButtons/footerButtons");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const areMapsEqual_1 = require("./utils/areMapsEqual");
+const iconChevronLeftSmall_1 = require("../icons/iconChevronLeftSmall");
+const useDrive_1 = require("../utils/theme/useDrive");
+const iconChevronRightSmall_1 = require("../icons/iconChevronRightSmall");
+const alert_1 = require("../alert/alert");
 const parseLabel = (option, dateFormat, translate, toLacalFn) => {
     const localeFrom = toLacalFn(option.from);
     const localeTo = toLacalFn(option.to);
@@ -33,15 +37,20 @@ const parseLabel = (option, dateFormat, translate, toLacalFn) => {
     return `${(0, formatDate_1.formatDate)(localeFrom, dateFormat, translate)} - ${(0, formatDate_1.formatDate)(localeTo, dateFormat, translate)}`;
 };
 exports.parseLabel = parseLabel;
-const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, options: optionsArg, type, id, disabled, dropDownTitle, hasApplyButton, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, withCalendar, lockStartDate, lockEndDate, timeSelect, error, allowUnsetValue = false }) => {
+// eslint-disable-next-line complexity
+const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, options: optionsArg, type, id, disabled, dropDownTitle, hasApplyButton, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, withCalendar, lockStartDate, lockEndDate, timeSelect, error, allowUnsetValue = false, stepper = false, classNameWrapper }) => {
     var _a;
     const { translate } = (0, useLanguage_1.useLanguage)();
+    const [alertReason, setAlertReason] = (0, react_1.useState)("");
     const isMobile = (0, useMobile_1.useMobile)();
+    const isDrive = (0, useDrive_1.useDrive)();
+    const driveWrapperTriggerClassName = (0, useDriveClassName_1.useDriveClassName)("zen-date-range-wrapper");
     const drivePopupClassName = (0, useDriveClassName_1.useDriveClassName)("zen-date-range-popup");
-    const driveWrapperClassName = (0, useDriveClassName_1.useDriveClassName)("zen-date-range-popup-wrapper");
+    const driveWrapperPopupClassName = (0, useDriveClassName_1.useDriveClassName)("zen-date-range-popup-wrapper");
     const [showMobileCalendar, setShowMobileCalendar] = (0, react_1.useState)(false);
     const { dateFormat, toLocalDateTime, toReverseOffsetDateTime, weekStartsOnSunday } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
     const optionsMap = (0, react_1.useMemo)(() => (0, getRangeOption_1.getOptionsPeriodMap)(optionsArg, translate, toLocalDateTime, weekStartsOnSunday ? "Sunday" : "Monday", toReverseOffsetDateTime), [optionsArg, toLocalDateTime, toReverseOffsetDateTime, translate, weekStartsOnSunday]);
+    const previousStepOption = (0, react_1.useRef)("");
     const [selectedRange, setSelectedRange] = (0, react_1.useState)((0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, value));
     const isDefaultState = !defaultValue && !selectedRange || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.label) === (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label);
     const isCustomDateOption = (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) === dateRangeInner_1.CUSTOM_CALENDAR_ID;
@@ -54,14 +63,12 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
     const calendarLabel = translate(dateRangeInner_1.CUSTOM_CALENDAR_ID);
     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 optionsMapRef = (0, react_1.useRef)(optionsMap);
+    const isEqualMaps = (0, react_1.useMemo)(() => (0, areMapsEqual_1.areMapsEqual)(optionsMapRef.current, optionsMap), [optionsMap]);
+    if (!isEqualMaps) {
+        optionsMapRef.current = optionsMap;
+    }
     const hasCustomOption = (0, react_1.useMemo)(() => options.find(option => option.id === dateRangeInner_1.CUSTOM_CALENDAR_ID) !== undefined, [options]);
-    const currentLabel = (_a = (0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, value)) === null || _a === void 0 ? void 0 : _a.label;
-    const cssClass = (0, classNames_1.classNames)([
-        "zen-date-range",
-        error ? "zen-date-range--error" : "",
-        className !== null && className !== void 0 ? className : "",
-        !defaultValue && !value || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.label) === currentLabel || type && type !== buttonType_1.ButtonType.Secondary ? "" : "zen-date-range--active"
-    ]);
     const title = (0, react_1.useMemo)(() => dropDownTitle || translate("Date range"), [dropDownTitle, translate]);
     const toggleVisibility = (0, react_1.useCallback)(() => setIsOpen(currentIsOpen => !currentIsOpen), []);
     const getButtonLabel = (0, react_1.useCallback)((rangeValue) => {
@@ -77,11 +84,11 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
     }, [dateFormat, options, translate, toLocalDateTime]);
     (0, react_1.useEffect)(() => {
         const currentValue = (0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, value);
-        if ((prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label) !== (currentValue === null || currentValue === void 0 ? void 0 : currentValue.label)) {
+        if ((prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label) !== (currentValue === null || currentValue === void 0 ? void 0 : currentValue.label) || ((prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.from.getTime()) !== (currentValue === null || currentValue === void 0 ? void 0 : currentValue.from.getTime()) || (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.to.getTime()) !== (currentValue === null || currentValue === void 0 ? void 0 : currentValue.to.getTime()))) {
             setSelectedRange(currentValue);
             setPrevSelection(currentValue);
         }
-    }, [optionsMap, prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label, value]);
+    }, [optionsMap, prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.from, prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label, prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.to, value]);
     const handleDateRangeSelection = (0, react_1.useCallback)((newVal) => {
         var _a, _b;
         const selection = options.find(option => option.id === newVal);
@@ -95,6 +102,7 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
             setSelectedRange(Object.assign({ label: selection.id }, newRange));
             !hasApplyButton && setPrevSelection(Object.assign({ label: selection.id }, newRange));
             !hasApplyButton && onChange(Object.assign({ label: selection.id }, newRange));
+            previousStepOption.current = "";
         }
         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) !== newVal ? selection.getRange().from.toISOString() : value === null || value === void 0 ? void 0 : value.from.toISOString();
@@ -125,6 +133,7 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
         setShowMobileCalendar(false);
         if (isCustomDateOption) {
             handleRangeSelection();
+            previousStepOption.current = "";
             return;
         }
         selectedRange && onChange(selectedRange);
@@ -141,17 +150,26 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
         !hasApplyButton && (defaultValue || allowUnsetValue) && onChange(defaultValue);
         !hasApplyButton && setIsOpen(false);
         setSelectedRange(defaultValue);
+        previousStepOption.current = "";
         (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.label) === dateRangeInner_1.CUSTOM_CALENDAR_ID && !allowUnsetValue && setCustomDate({ from: defaultValue.from.toISOString(), to: defaultValue.to.toISOString() });
         setShowMobileCalendar(false);
     }, [allowUnsetValue, defaultValue, hasApplyButton, onChange]);
     const handleMobileBackClick = (0, react_1.useCallback)(() => {
         setShowMobileCalendar(false);
     }, []);
-    const optionsMapRef = (0, react_1.useRef)(optionsMap);
-    const isEqualMaps = (0, react_1.useMemo)(() => (0, areMapsEqual_1.areMapsEqual)(optionsMapRef.current, optionsMap), [optionsMap]);
-    if (!isEqualMaps) {
-        optionsMapRef.current = optionsMap;
-    }
+    const handleStepperClick = (0, react_1.useCallback)((currentRange, isIncrease) => {
+        let step = previousStepOption.current ? previousStepOption.current : (0, getRangeOption_1.getDateRangeAdjustedStep)(translate, currentRange.label);
+        if (previousStepOption.current === "") {
+            previousStepOption.current = step;
+        }
+        else if (previousStepOption.current !== getRangeOption_1.DEFAULT_STEP_OPTION) {
+            step = previousStepOption.current;
+        }
+        const adjustFn = getRangeOption_1.dateRangeAdjustedFn[step];
+        const newValue = adjustFn(currentRange, isIncrease, toLocalDateTime, toReverseOffsetDateTime);
+        const labeledValue = (0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, newValue);
+        labeledValue && onChange(labeledValue);
+    }, [onChange, optionsMap, toLocalDateTime, toReverseOffsetDateTime, translate]);
     (0, react_1.useEffect)(() => {
         setCustomDate({ from: value === null || value === void 0 ? void 0 : value.from.toISOString(), to: value === null || value === void 0 ? void 0 : value.to.toISOString() });
         const currentValue = (0, getRangeOption_1.getSelectedRangeFromValue)(optionsMapRef.current, value);
@@ -174,8 +192,8 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
         }
         return selectedRange.label === (value === null || value === void 0 ? void 0 : value.label) && customDate.from === value.from.toISOString() && customDate.to === value.to.toISOString();
     }, [customDate.from, customDate.to, hasApplyButton, isCustomDateOption, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, value === null || value === void 0 ? void 0 : value.from, value === null || value === void 0 ? void 0 : value.label, value === null || value === void 0 ? void 0 : value.to]);
-    const memoizedDesktopView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { className: (0, classNames_1.classNames)(["zen-date-range-popup-wrapper", driveWrapperClassName || ""]), ariaLabel: translate("Date range"), useTrapFocusWithTrigger: "on", role: "dialog", triggerRef: triggerRef, onOpenChange: setIsOpen, shouldHoldScroll: true, isOpen: isOpen, recalculateOnScroll: true, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-date-range-popup", drivePopupClassName || "", classNamePopup !== null && classNamePopup !== void 0 ? classNamePopup : ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-date-range-popup__header", children: title }), component, (0, jsx_runtime_1.jsxs)("div", { className: "zen-date-range-popup__footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-date-range-popup__button-clear", type: buttonType_1.ButtonType.Tertiary, disabled: isDefaultState, onClick: handleClearClick, children: translate("Clear") }), (!isCustomDateOption && hasApplyButton) &&
-                            (0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-date-range-popup__button-reset", type: buttonType_1.ButtonType.Secondary, onClick: handleCancelClick, children: translate("Cancel") }), (isCustomDateOption || hasApplyButton) && (0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-date-range-popup__button-apply", type: buttonType_1.ButtonType.Primary, disabled: (isCustomDateOption && (!customDate.from || !customDate.to)) || isValueNotChanged || !selectedRange, onClick: handleApplyClick, children: translate("Apply") })] })] }) }), [classNamePopup, component, customDate.from, customDate.to, drivePopupClassName, driveWrapperClassName, handleApplyClick, handleCancelClick, handleClearClick, hasApplyButton, isCustomDateOption, isDefaultState, isOpen, isValueNotChanged, selectedRange, title, translate]);
+    const memoizedDesktopView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { className: (0, classNames_1.classNames)(["zen-date-range-popup-wrapper", driveWrapperPopupClassName || ""]), ariaLabel: translate("Date range"), useTrapFocusWithTrigger: "on", role: "dialog", triggerRef: triggerRef, onOpenChange: setIsOpen, shouldHoldScroll: true, isOpen: isOpen, recalculateOnScroll: true, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-date-range-popup", drivePopupClassName || "", classNamePopup !== null && classNamePopup !== void 0 ? classNamePopup : ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-date-range-popup__header", children: title }), component, (0, jsx_runtime_1.jsxs)("div", { className: "zen-date-range-popup__footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-date-range-popup__button-clear", type: buttonType_1.ButtonType.Tertiary, disabled: isDefaultState, onClick: handleClearClick, children: translate("Clear") }), (!isCustomDateOption && hasApplyButton) &&
+                            (0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-date-range-popup__button-reset", type: buttonType_1.ButtonType.Secondary, onClick: handleCancelClick, children: translate("Cancel") }), (isCustomDateOption || hasApplyButton) && (0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-date-range-popup__button-apply", type: buttonType_1.ButtonType.Primary, disabled: (isCustomDateOption && (!customDate.from || !customDate.to)) || isValueNotChanged || !selectedRange, onClick: handleApplyClick, children: translate("Apply") })] })] }) }), [classNamePopup, component, customDate.from, customDate.to, drivePopupClassName, driveWrapperPopupClassName, handleApplyClick, handleCancelClick, handleClearClick, hasApplyButton, isCustomDateOption, isDefaultState, isOpen, isValueNotChanged, selectedRange, title, translate]);
     const memoizedMobileFooter = (0, react_1.useMemo)(() => {
         const clearButton = (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Tertiary, disabled: isDefaultState, onClick: handleClearClick, children: translate("Clear") });
         const cancelButton = hasApplyButton && !showMobileCalendar ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Secondary, onClick: handleCancelClick, children: translate("Cancel") }) : null;
@@ -185,6 +203,39 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
     }, [customDate.from, customDate.to, handleApplyClick, handleCancelClick, handleClearClick, hasApplyButton, isCustomDateOption, isDefaultState, isValueNotChanged, selectedRange,
         showMobileCalendar, translate]);
     const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { className: (0, classNames_1.classNames)(["zen-date-range-mobile-sheet", classNamePopup ? `${classNamePopup}--mobile-sheet` : ""]), label: translate("Date range"), triggerRef: triggerRef, isOpen: isOpen, onHidePanel: memoizedHandleClose, onCloseClick: memoizedHandleClose, useTrapFocusWithTrigger: true, isBackVisible: showMobileCalendar, onBackClick: handleMobileBackClick, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: showMobileCalendar ? calendarLabel : title }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: component }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, { children: memoizedMobileFooter })] }), [calendarLabel, classNamePopup, component, handleMobileBackClick, isOpen, memoizedHandleClose, memoizedMobileFooter, showMobileCalendar, title, translate]);
+    const checkIsRangeDisable = (0, react_1.useCallback)((isIncrease) => {
+        if (!selectedRange) {
+            return true;
+        }
+        const step = previousStepOption.current ? previousStepOption.current : (0, getRangeOption_1.getDateRangeAdjustedStep)(translate, selectedRange.label);
+        const adjustFn = getRangeOption_1.dateRangeAdjustedFn[step];
+        const newValue = adjustFn({ from: selectedRange.from, to: selectedRange.to }, isIncrease, toLocalDateTime, toReverseOffsetDateTime);
+        const normalizeNewValue = (0, normalizeDates_1.normalizeDates)(newValue.from.toISOString(), newValue.to.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+        return newValue.from.getTime() !== new Date(normalizeNewValue.from).getTime() || newValue.to.getTime() !== new Date(normalizeNewValue.to).getTime();
+    }, [disableDatesAfter, disableDatesBefore, disableFutureDates, disablePastDates, selectedRange, toLocalDateTime, toReverseOffsetDateTime, translate]);
+    const increaseRange = (0, react_1.useCallback)(() => {
+        const isDateDisabled = checkIsRangeDisable(true);
+        if (isDateDisabled) {
+            setAlertReason(selectedRange ? "NotAvailable" : "NoSelection");
+            return;
+        }
+        selectedRange && handleStepperClick(selectedRange, true);
+    }, [checkIsRangeDisable, handleStepperClick, selectedRange]);
+    const decreaseRange = (0, react_1.useCallback)(() => {
+        const isDateDisabled = checkIsRangeDisable(false);
+        if (isDateDisabled) {
+            setAlertReason(selectedRange ? "NotAvailable" : "NoSelection");
+            return;
+        }
+        selectedRange && handleStepperClick(selectedRange, false);
+    }, [checkIsRangeDisable, handleStepperClick, selectedRange]);
+    const handleCloseAlert = (0, react_1.useCallback)(() => {
+        setAlertReason("");
+    }, []);
+    const handleUnavailableRangeAlert = (0, react_1.useCallback)(() => {
+        setAlertReason("");
+        setIsOpen(true);
+    }, []);
     (0, react_1.useEffect)(() => {
         if (!isOpen && prevIsOpenRef.current) {
             setTimeout(() => {
@@ -194,7 +245,38 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
         }
         prevIsOpenRef.current = isOpen;
     }, [isOpen]);
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { htmlType: "button", icon: iconCalendar_1.IconCalendar, iconPosition: textIconButton_1.ButtonIconPosition.Start, className: cssClass, type: type, disabled: disabled, onClick: toggleVisibility, ref: triggerRef, children: getButtonLabel((0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, value)) }), isMobile ? memoizedMobileView : memoizedDesktopView, (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: error })] });
+    const buttonLabel = (0, react_1.useMemo)(() => getButtonLabel((0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, value)), [getButtonLabel, optionsMap, value]);
+    const currentLabel = (_a = (0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, value)) === null || _a === void 0 ? void 0 : _a.label;
+    const cssClass = (0, classNames_1.classNames)([
+        "zen-date-range",
+        error ? "zen-date-range--error" : "",
+        className !== null && className !== void 0 ? className : "",
+        stepper ? "zen-date-range--with-stepper" : "",
+        stepper && currentLabel === dateRangeInner_1.CUSTOM_CALENDAR_ID && buttonLabel.length > 20 ? "zen-date-range--with-stepper-custom" : "",
+        !defaultValue && !value || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.label) === currentLabel || type && type !== buttonType_1.ButtonType.Secondary ? "" : "zen-date-range--active"
+    ]);
+    const popupTriggerComponent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { htmlType: "button", icon: iconCalendar_1.IconCalendar, iconPosition: textIconButton_1.ButtonIconPosition.Start, className: cssClass, type: type, disabled: disabled, onClick: toggleVisibility, ref: triggerRef, children: buttonLabel }), [cssClass, type, disabled, toggleVisibility, buttonLabel]);
+    const memoizedAlertData = (0, react_1.useMemo)(() => {
+        if (alertReason === "NotAvailable") {
+            return {
+                header: translate("Date range not available"),
+                text: translate("Some of the dates you selected aren’t available. Please try a different range.")
+            };
+        }
+        if (alertReason === "NoSelection") {
+            return {
+                header: translate("Choose your date range"),
+                text: translate("Please select the dates you want to view.")
+            };
+        }
+        return { header: "", text: "" };
+    }, [alertReason, translate]);
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [stepper ? (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-date-range-wrapper", driveWrapperTriggerClassName || "", classNameWrapper || ""]), children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: decreaseRange, className: (0, classNames_1.classNames)(["zen-date-range__stepper", "zen-date-range__stepper--left"]), title: translate("Previous"), children: (0, jsx_runtime_1.jsx)(iconChevronLeftSmall_1.IconChevronLeftSmall, { size: isDrive ? "huge" : "large" }) }), popupTriggerComponent, (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: increaseRange, className: (0, classNames_1.classNames)(["zen-date-range__stepper", "zen-date-range__stepper--right"]), title: translate("Next"), children: (0, jsx_runtime_1.jsx)(iconChevronRightSmall_1.IconChevronRightSmall, { size: isDrive ? "huge" : "large" }) })] }) : popupTriggerComponent, isMobile ? memoizedMobileView : memoizedDesktopView, (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: error }), stepper ? (0, jsx_runtime_1.jsx)(alert_1.Alert, { isOpen: alertReason !== "", header: memoizedAlertData.header, text: memoizedAlertData.text, onClose: handleCloseAlert, type: "warning", buttons: {
+                    primary: {
+                        text: translate("Choose dates"),
+                        onClick: handleUnavailableRangeAlert
+                    }
+                } }) : null] });
 };
 exports.DateRange = DateRange;
 exports.TRANSLATIONS = [
@@ -204,5 +286,12 @@ exports.TRANSLATIONS = [
     "Cancel",
     "Apply",
     "Reset",
-    "Today"
+    "Today",
+    "Next",
+    "Previous",
+    "Choose dates",
+    "Date range not available",
+    "Choose your date range",
+    "Some of the dates you selected aren’t available. Please try a different range.",
+    "Please select the dates you want to view."
 ];

package/dist/dropdown/dropdown.js

@@ -330,7 +330,7 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
         if (currentAllSelected !== undefined && state.defaultValueIsAllSelected !== undefined && state.defaultValueIsAllSelected) {
             return currentAllSelected === state.defaultValueIsAllSelected;
         }
-        return isStringsTheSame;
+        return currentAllSelected !== undefined ? state.defaultValueIsAllSelected === currentAllSelected && isStringsTheSame : isStringsTheSame;
     }, [currentAllSelected, forceSelection, multiselect, state.defaultValue, state.defaultValueIsAllSelected, state.selectedIds]);
     const memoizedIsApplyButtonDisabled = (0, react_1.useMemo)(() => (0, dropdownHelper_1.compareStringsArrays)(state.globalSelectedIds, state.selectedIds)
         && (isFullSelectionMode ? state.globalIsAllSelected === state.isAllSelected : true), [isFullSelectionMode, state.globalIsAllSelected, state.globalSelectedIds, state.isAllSelected, state.selectedIds]);

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

@@ -25,6 +25,7 @@ interface IFiltersBarDateRangePickerBase extends Pick<IButton, "type" | "disable
     classNamePopup?: string;
     disableDatesBefore?: string;
     disableDatesAfter?: string;
+    stepper?: boolean;
 }
 interface IFiltersBarDateRangePicker extends IFiltersBarDateRangePickerBase {
     allowUnsetValue?: false;

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

@@ -87,7 +87,7 @@ const FiltersBarPeriodPicker = ({ props, hasApplyButton, className, useSidePanel
     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 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 || ""]), options: optionsArg });
+        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)(dateRange_1.DateRange, Object.assign({}, commonProps, { value: state, onChange: onChange, defaultValue: defaultState, allowUnsetValue: true })) : (0, jsx_runtime_1.jsx)(dateRange_1.DateRange, 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) {

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

@@ -40,4 +40,32 @@ export declare const getSelectedRangeFromValue: (optionsMap: Map<string, IDateRa
     from: Date;
     to: Date;
 } | undefined;
+export declare const MONTH_STEP_OPTION = "month_step_option";
+export declare const PERIOD_STEP_OPTION = "period_step_option";
+export declare const DEFAULT_STEP_OPTION = "default_step_option";
+export declare const YEAR_STEP_OPTION = "year_step_option";
+export declare const QUARTER_STEP_OPTION = "quarter_step_option";
+export declare const getDateRangeAdjustedStep: (translate: (s: string) => string, label?: string) => "default_step_option" | "month_step_option" | "quarter_step_option" | "year_step_option" | "period_step_option";
+export declare const dateRangeAdjustedFn: {
+    month_step_option: (dateRange: IDateRange, increase: boolean, toLocalDateTime: (date: Date | string) => Date, toReverseOffsetDateTime: (d: Date | string) => Date) => {
+        from: Date;
+        to: Date;
+    };
+    year_step_option: (dateRange: IDateRange, increase: boolean, _: any, _1: any) => {
+        from: Date;
+        to: Date;
+    };
+    quarter_step_option: (dateRange: IDateRange, increase: boolean, toLocalDateTime: (date: Date | string) => Date, toReverseOffsetDateTime: (d: Date | string) => Date) => {
+        from: Date;
+        to: Date;
+    };
+    period_step_option: (dateRange: IDateRange, increase: boolean, toLocalDateTime: (date: Date | string) => Date, toReverseOffsetDateTime: (d: Date | string) => Date) => {
+        from: Date;
+        to: Date;
+    };
+    default_step_option: (dateRange: IDateRange, increase: boolean, toLocalDateTime: (date: Date | string) => Date, toReverseOffsetDateTime: (d: Date | string) => Date) => {
+        from: Date;
+        to: Date;
+    };
+};
 export {};

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSelectedRangeFromValue = exports.getOptionsPeriodMap = exports.getRangeOptionsArray = exports.getRangeOption = void 0;
+exports.dateRangeAdjustedFn = exports.getDateRangeAdjustedStep = exports.QUARTER_STEP_OPTION = exports.YEAR_STEP_OPTION = exports.DEFAULT_STEP_OPTION = exports.PERIOD_STEP_OPTION = exports.MONTH_STEP_OPTION = exports.getSelectedRangeFromValue = exports.getOptionsPeriodMap = exports.getRangeOptionsArray = exports.getRangeOption = void 0;
 const dateRangeUtils_1 = require("../../../dateRange/dateRangeUtils");
 const dateRangeInner_1 = require("../../../dateRangeInner/dateRangeInner");
 const options = {
@@ -113,3 +113,179 @@ const getSelectedRangeFromValue = (optionsMap, value) => {
     };
 };
 exports.getSelectedRangeFromValue = getSelectedRangeFromValue;
+const adjustDateRange = (dateRange, increase, toLocalDateTime, toReverseOffsetDateTime) => {
+    const { from, to } = dateRange;
+    const interval = to.getTime() - from.getTime();
+    let newFrom;
+    let newTo;
+    const fromToLocalDateTime = toLocalDateTime(from);
+    const toToLocalDateTime = toLocalDateTime(to);
+    if (!increase) {
+        // Decrease logic
+        newTo = new Date(fromToLocalDateTime);
+        newTo.setDate(fromToLocalDateTime.getDate() - 1);
+        newTo.setHours(toToLocalDateTime.getHours());
+        newTo.setMinutes(toToLocalDateTime.getMinutes());
+        newTo.setSeconds(toToLocalDateTime.getSeconds());
+        newTo.setMilliseconds(toToLocalDateTime.getMilliseconds());
+        newFrom = new Date(newTo.getTime() - interval);
+    }
+    else {
+        // Increase logic
+        newFrom = new Date(toToLocalDateTime);
+        newFrom.setDate(toToLocalDateTime.getDate() + 1);
+        newFrom.setHours(fromToLocalDateTime.getHours());
+        newFrom.setMinutes(fromToLocalDateTime.getMinutes());
+        newFrom.setSeconds(fromToLocalDateTime.getSeconds());
+        newFrom.setMilliseconds(fromToLocalDateTime.getMilliseconds());
+        newTo = new Date(newFrom.getTime() + interval);
+    }
+    return { from: toReverseOffsetDateTime(newFrom), to: toReverseOffsetDateTime(newTo) };
+};
+const adjustDateRangeMonth = (dateRange, increase, toLocalDateTime, toReverseOffsetDateTime) => {
+    const { from, to } = dateRange;
+    let newFrom;
+    let newTo;
+    const fromToLocalDateTime = toLocalDateTime(from);
+    const toToLocalDateTime = toLocalDateTime(to);
+    const fromMonth = fromToLocalDateTime.getMonth();
+    const fromYear = fromToLocalDateTime.getFullYear();
+    const toMonth = toToLocalDateTime.getMonth();
+    const toYear = toToLocalDateTime.getFullYear();
+    // Calculate the number of months in the original range
+    const monthsDifference = (toYear - fromYear) * 12 + (toMonth - fromMonth) + 1;
+    if (!increase) {
+        // Decrease
+        let newFromMonth = fromMonth - monthsDifference;
+        let newFromYear = fromYear;
+        while (newFromMonth < 0) {
+            newFromMonth += 12;
+            newFromYear--;
+        }
+        newFrom = new Date(newFromYear, newFromMonth, 1); // First day of the month
+        let newToMonth = toMonth - monthsDifference;
+        let newToYear = toYear;
+        while (newToMonth < 0) {
+            newToMonth += 12;
+            newToYear--;
+        }
+        // Get the last day of the month for newTo
+        const nextMonth = new Date(newToYear, newToMonth + 1, 1);
+        newTo = new Date(nextMonth.getTime() - (24 * 60 * 60 * 1000));
+    }
+    else {
+        // Increase
+        let newFromMonth = fromMonth + monthsDifference;
+        let newFromYear = fromYear;
+        while (newFromMonth >= 12) {
+            newFromMonth -= 12;
+            newFromYear++;
+        }
+        newFrom = new Date(newFromYear, newFromMonth, 1); // First day of the month
+        let newToMonth = toMonth + monthsDifference;
+        let newToYear = toYear;
+        while (newToMonth >= 12) {
+            newToMonth -= 12;
+            newToYear++;
+        }
+        // Get the last day of the month for newTo
+        const nextMonth = new Date(newToYear, newToMonth + 1, 1);
+        newTo = new Date(nextMonth.getTime() - (24 * 60 * 60 * 1000));
+    }
+    // Preserve original time components
+    newFrom.setHours(fromToLocalDateTime.getHours());
+    newFrom.setMinutes(fromToLocalDateTime.getMinutes());
+    newFrom.setSeconds(fromToLocalDateTime.getSeconds());
+    newFrom.setMilliseconds(fromToLocalDateTime.getMilliseconds());
+    newTo.setHours(toToLocalDateTime.getHours());
+    newTo.setMinutes(toToLocalDateTime.getMinutes());
+    newTo.setSeconds(toToLocalDateTime.getSeconds());
+    newTo.setMilliseconds(toToLocalDateTime.getMilliseconds());
+    return { from: toReverseOffsetDateTime(newFrom), to: toReverseOffsetDateTime(newTo) };
+};
+const adjustDateRangeQuarter = (dateRange, increase, toLocalDateTime, toReverseOffsetDateTime) => {
+    const { from, to } = dateRange;
+    const quarterStartMonth = [0, 3, 6, 9]; // January, April, July, October
+    const fromToLocalDateTime = toLocalDateTime(from);
+    const toToLocalDateTime = toLocalDateTime(to);
+    const fromMonth = fromToLocalDateTime.getMonth();
+    const fromYear = fromToLocalDateTime.getFullYear();
+    let newFrom;
+    let newTo;
+    const monthsInQuarter = 3;
+    const currentQuarterIndex = quarterStartMonth.findIndex(month => month === fromMonth);
+    if (!increase) {
+        // Previous Quarter
+        const newFromMonth = currentQuarterIndex === 0 ? 9 : quarterStartMonth[currentQuarterIndex - 1];
+        const newFromYear = currentQuarterIndex === 0 ? fromYear - 1 : fromYear;
+        newFrom = new Date(newFromYear, newFromMonth, fromToLocalDateTime.getDate(), fromToLocalDateTime.getHours(), fromToLocalDateTime.getMinutes(), fromToLocalDateTime.getSeconds(), fromToLocalDateTime.getMilliseconds());
+        newTo = new Date(newFromYear, newFromMonth + monthsInQuarter - 1, newFromMonth === 0 || newFromMonth === 9 ? 31 : 30, toToLocalDateTime.getHours(), toToLocalDateTime.getMinutes(), toToLocalDateTime.getSeconds(), toToLocalDateTime.getMilliseconds());
+    }
+    else {
+        // Next Quarter
+        const newFromMonth = currentQuarterIndex === 3 ? 0 : quarterStartMonth[currentQuarterIndex + 1];
+        const newFromYear = currentQuarterIndex === 3 ? fromYear + 1 : fromYear;
+        newFrom = new Date(newFromYear, newFromMonth, fromToLocalDateTime.getDate(), fromToLocalDateTime.getHours(), fromToLocalDateTime.getMinutes(), fromToLocalDateTime.getSeconds(), fromToLocalDateTime.getMilliseconds());
+        newTo = new Date(newFromYear, newFromMonth + monthsInQuarter - 1, newFromMonth === 0 || newFromMonth === 9 ? 31 : 30, toToLocalDateTime.getHours(), toToLocalDateTime.getMinutes(), toToLocalDateTime.getSeconds(), toToLocalDateTime.getMilliseconds());
+    }
+    return { from: toReverseOffsetDateTime(newFrom), to: toReverseOffsetDateTime(newTo) };
+};
+const adjustDateRangeYear = (dateRange, increase, _, _1) => {
+    const { from, to } = dateRange;
+    let newFrom;
+    let newTo;
+    const fromYear = from.getFullYear();
+    const toYear = to.getFullYear();
+    if (!increase) {
+        const previousFromYear = fromYear - 1;
+        const previousToYear = toYear - 1;
+        newFrom = new Date(from);
+        newFrom.setFullYear(previousFromYear);
+        newTo = new Date(to);
+        newTo.setFullYear(previousToYear);
+    }
+    else {
+        const nextFromYear = fromYear + 1;
+        const nextToYear = toYear + 1;
+        newFrom = new Date(from);
+        newFrom.setFullYear(nextFromYear);
+        newTo = new Date(to);
+        newTo.setFullYear(nextToYear);
+    }
+    return { from: newFrom, to: newTo };
+};
+exports.MONTH_STEP_OPTION = "month_step_option";
+exports.PERIOD_STEP_OPTION = "period_step_option";
+exports.DEFAULT_STEP_OPTION = "default_step_option";
+exports.YEAR_STEP_OPTION = "year_step_option";
+exports.QUARTER_STEP_OPTION = "quarter_step_option";
+const getDateRangeAdjustedStep = (translate, label) => {
+    const monthsAdjusted = ["LastMonth", "ThisMonth", "NextMonth", "LastThreeMonths", translate("This month"), translate("Last month"), translate("Next month"), translate("Last 3 months")];
+    const periodAdjusted = ["Today", "Yesterday", "ThisWeek", "NextWeek", "LastWeek", "LastSevenDays", "LastThirtyDays", translate("Today"), translate("Yesterday"), translate("This week"), translate("Next week"), translate("Last week"), translate("Last 7 days"), translate("Last 30 days")];
+    const yearAdjusted = ["LastYear", "ThisYear", "LastTwelveMonths", translate("Last 12 months"), translate("Last year"), translate("This year")];
+    const quarterAdjusted = ["ThisQuarter", "LastQuarter", translate("This quarter"), translate("Last quarter")];
+    if (!label) {
+        return exports.DEFAULT_STEP_OPTION;
+    }
+    if (monthsAdjusted.includes(label)) {
+        return exports.MONTH_STEP_OPTION;
+    }
+    if (quarterAdjusted.includes(label)) {
+        return exports.QUARTER_STEP_OPTION;
+    }
+    if (yearAdjusted.includes(label)) {
+        return exports.YEAR_STEP_OPTION;
+    }
+    if (periodAdjusted.includes(label)) {
+        return exports.PERIOD_STEP_OPTION;
+    }
+    return exports.DEFAULT_STEP_OPTION;
+};
+exports.getDateRangeAdjustedStep = getDateRangeAdjustedStep;
+exports.dateRangeAdjustedFn = {
+    [exports.MONTH_STEP_OPTION]: adjustDateRangeMonth,
+    [exports.YEAR_STEP_OPTION]: adjustDateRangeYear,
+    [exports.QUARTER_STEP_OPTION]: adjustDateRangeQuarter,
+    [exports.PERIOD_STEP_OPTION]: adjustDateRange,
+    [exports.DEFAULT_STEP_OPTION]: adjustDateRange
+};

package/dist/groupsFilter/groupsFilter.js

@@ -25,6 +25,7 @@ const uiStateActionType_1 = require("./uiStateReducer/uiStateActionType");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const advancedGroupsFilter_1 = require("../advancedGroupsFilter/advancedGroupsFilter");
 const useLanguage_1 = require("../utils/localization/useLanguage");
+const groupsFilterAdvancedValue_1 = require("./groupsFilterAdvancedValue");
 const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithColor, onChange, initialFilterState, options = {}, listLimit = 500 }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const [groupPlaceHolder, setGroupPlaceHolder] = (0, react_1.useState)(options.placeholder || translate("Groups"));
@@ -35,7 +36,7 @@ const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithCol
     const triggerRef = (0, react_1.useRef)(null);
     const menuRef = (0, react_1.useRef)(null);
     const prevInitialState = (0, react_1.useRef)(initialFilterState);
-    const blocksMap = [["builtInGroups", "userGroups"], ["advancedGroups", "builtInGroups", "userGroups"], ["builtInGroups", "userGroups"]];
+    const blocksMap = (0, react_1.useMemo)(() => [["builtInGroups", "userGroups"], ["advancedGroups", "builtInGroups", "userGroups"], ["builtInGroups", "userGroups"]], []);
     const onOptionsToggle = () => { dispatchUiState({ type: uiStateActionType_1.UiStateActionType.ToggleOpen, payload: undefined }); };
     const handleSetStep = (0, react_1.useCallback)((newStep) => {
         uiState.step !== groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected && dispatchUiState({ type: uiStateActionType_1.UiStateActionType.ClearUncheckedState, payload: undefined });
@@ -146,9 +147,29 @@ const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithCol
         });
     }, [dataLoader, errorHandler]);
     (0, react_1.useEffect)(() => {
+        const step = uiState.step;
+        if (step !== groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected) {
+            return;
+        }
+        const groupsBlocks = (0, groupsFilterAdvancedValue_1.getAdvancedFilterValue)({
+            blocks: blocksMap[uiState.step],
+            state,
+            isWithColor: isWithColor || false,
+            uncheckedItems: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdjustmentIds : [],
+            uncheckedAdvancedState: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdvancedState : undefined,
+            listLimit
+        });
+        const label = (0, groupsFilterAdvancedValue_1.getAdvancedLabel)({ groupsBlocks });
         const selectedValues = dataItems.filter((item) => { var _a; return (_a = state.frozenState.simpleFilterState) === null || _a === void 0 ? void 0 : _a.find((id) => id === item.id); }).map((item) => item.name);
-        setGroupPlaceHolder(selectedValues.length > 0 ? selectedValues.join(", ") : options.placeholder || translate("Groups"));
-    }, [dataItems, state.frozenState.simpleFilterState, translate, options.placeholder]);
+        const selectedValuesLabel = selectedValues.join(` ${translate(state.frozenState.relation)} `);
+        if (!label && !selectedValuesLabel) {
+            setGroupPlaceHolder(options.placeholder || translate("Groups"));
+            return;
+        }
+        const separator = `${label && selectedValuesLabel ? ` ${translate(state.frozenState.relation)} ` : ""}`;
+        setGroupPlaceHolder(`${label}${separator}${selectedValuesLabel}`);
+    }, [uiState.searchValue, uiState.step, blocksMap, state, isWithColor, listLimit, uiState.currentAdjustmentId,
+        uiState.uncheckedAdjustmentIds, uiState.uncheckedAdvancedState, dataItems, options.placeholder, translate]);
     const getGroupsBox = () => (0, jsx_runtime_1.jsx)(groupsFilterBox_1.GroupsFilterBox, { step: uiState.step, currentId: uiState.currentAdjustmentId, isWithColor: isWithColor || false, state: state, search: uiState.searchValue, blocks: uiState.searchValue && uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial ? [] : blocksMap[uiState.step], onChange: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? handleCheckboxItemAdjustmentClick : handleCheckboxChange, onClick: handleCheckboxItemClick, uncheckedItems: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdjustmentIds : [], uncheckedAdvancedState: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdvancedState : undefined, listLimit: listLimit });
     const onSideWideChange = (newState) => { dispatchState({ type: stateActionType_1.StateActionType.SideWide, payload: newState }); };
     const onRelationChange = (newRelation) => { dispatchState({ type: stateActionType_1.StateActionType.Relation, payload: newRelation }); };

package/dist/groupsFilter/groupsFilterAdvancedValue.d.ts

@@ -0,0 +1,16 @@
+import { ICheckboxListWithActionOption } from "./groupsFilterBox";
+import { IFilterState } from "./groupsFilterInterfaces";
+import { TValueOptions, TValueOptionsSelected } from "./groupsFilterStatesHelper";
+import { IGroupsFilterState } from "./stateReducer/stateReducer";
+export declare const getAdvancedFilterValue: ({ blocks, state, isWithColor, uncheckedItems, uncheckedAdvancedState, listLimit }: {
+    blocks: TValueOptions[] | TValueOptionsSelected[];
+    state: IGroupsFilterState;
+    isWithColor: boolean;
+    uncheckedItems: string[];
+    uncheckedAdvancedState?: IFilterState;
+    listLimit: number;
+}) => ICheckboxListWithActionOption[][];
+export interface IGetAdvancedLabelInput {
+    groupsBlocks: ICheckboxListWithActionOption[][];
+}
+export declare const getAdvancedLabel: ({ groupsBlocks }: IGetAdvancedLabelInput) => string;

package/dist/groupsFilter/groupsFilterAdvancedValue.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAdvancedLabel = exports.getAdvancedFilterValue = void 0;
+const groupsFilterStatesHelper_1 = require("./groupsFilterStatesHelper");
+const getAdvancedFilterValue = ({ blocks, state, isWithColor, uncheckedItems, uncheckedAdvancedState, listLimit }) => {
+    const getGroupsMenuValue = (limit, value) => {
+        if (!value || value !== "advancedGroups") {
+            return [];
+        }
+        const result = (0, groupsFilterStatesHelper_1.createCurrentlySelectedOptions)(state, value, isWithColor || false, uncheckedItems, limit, uncheckedAdvancedState);
+        return result;
+    };
+    const groupsBlocks = blocks.map((val) => getGroupsMenuValue(listLimit, val)).filter((el) => el.length);
+    return groupsBlocks;
+};
+exports.getAdvancedFilterValue = getAdvancedFilterValue;
+const getAdvancedLabel = ({ groupsBlocks }) => {
+    const combinedLabel = groupsBlocks.reduce((outerAccumulator, group) => {
+        const groupLabel = group.reduce((innerAccumulator, item) => {
+            if (item.label) {
+                const updatedAccumulator = innerAccumulator + item.label;
+                return updatedAccumulator;
+            }
+            return innerAccumulator;
+        }, "");
+        if (!groupLabel) {
+            return outerAccumulator;
+        }
+        const updatedAccumulator = outerAccumulator + groupLabel;
+        return updatedAccumulator;
+    }, "");
+    return combinedLabel;
+};
+exports.getAdvancedLabel = getAdvancedLabel;