@geotab/zenith 1.23.0 → 1.24.0

package/README.md

@@ -40,6 +40,28 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 1.24.0
+
+* * Create `Summary` component
+* Create `Mobile banner` and fix DriveApp banner paddings
+* Create context provider for buttons in `Header`
+* Allow `Pill` to be used without text
+* Fix `DataGrid` padding in `Layout`
+* Update `DateRange` with stepper: step button can be in a disabled state
+* Improve outline state in components
+* Align image in `ListItem` to the center when it's small
+* Set a height limit for the `ExpandablePill`
+* Update `Alert` to accommodate 4 lines of text
+* Update loading state `Dropdown` and `GroupsFilter`
+* Improve `Range` and `FiltersBarRange` components appearance 
+* Limit `SidePanel` width
+* Resolve React library vulnerability issue
+* Fix `DateRange` issue: Cannot clear date range back to initial or default value when only 'Custom' date range option is used
+* Fix `Dropdown` issue:  wrong colors on active state
+* Fix `Action columns` issue: failing to load in Mobile view
+* Fix `Groups filter` issue: losing focus after removing all symbols
+* Fix `FiltersBar` issue: mobile `SidePanel` state reset
+
 ### 1.23.0
 
  * Add the property `target` to `Modal` buttons

package/dist/banner/bannerMultipLine.js

@@ -15,9 +15,10 @@ const button_1 = require("../button/button");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const react_1 = require("react");
 const useNodeText_1 = require("../utils/useNodeText");
-const BannerMultiline = ({ children, header, type = "warning", icon, action, onClose, role, ariaAtomic, ariaLive, size = bannerUtils_1.DEFAULT_BANNER_SIZE, primaryAction, className }) => {
+const BannerMultiline = ({ children, header, type = "warning", icon, action, onClose, role, ariaAtomic, ariaLive, size = bannerUtils_1.DEFAULT_BANNER_SIZE, primaryAction, className = "" }) => {
     const bannerOptions = (0, bannerUtils_1.getBannerOptions)(type);
     const { translate } = (0, useLanguage_1.useLanguage)();
+    const bannerBlockClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__block");
     const bannerHeaderClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__header");
     const bannerMessageClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__message");
     const closeButtonClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__close-button");
@@ -27,7 +28,8 @@ const BannerMultiline = ({ children, header, type = "warning", icon, action, onC
     const blockClassNames = (0, classNames_1.classNames)([
         "zen-banner",
         "zen-banner__block",
-        bannerOptions.blockClassName, className || "",
+        bannerBlockClassName || "",
+        bannerOptions.blockClassName, className,
         "zen-banner__block--multiline",
         "zen-banner__block--" + size
     ]);

package/dist/commonStyles/common.less

@@ -11,6 +11,7 @@
 @import "link/link.less";
 @import "selectButton.less";
 @import "zIndex.less";
+@import "rangeFieldMixin.less";
 
 @border-width-default: 1px;
 @border-radius-default: 4px;

package/dist/commonStyles/rangeFieldMixin.less

@@ -0,0 +1,23 @@
+.zen-range-field-wrapper-column {
+    display: grid;
+    grid-template-columns: minmax(min-content, auto) minmax(auto, 168px) minmax(0, auto);
+    grid-template-rows: auto auto;
+    gap: 4px 8px;
+    align-items: center;
+    justify-items: start;
+}
+
+.zen-range-field-wrapper-row {
+    display: grid;
+    align-items: center;
+    justify-items: start;
+    grid-template-columns:
+    minmax(24px, 32px)
+    minmax(64px, 64px)
+    minmax(24px, 32px)
+    minmax(24px, 32px)
+    minmax(64px, 64px)
+    minmax(24px, 32px);
+    row-gap: 4px;
+    column-gap: 8px;
+}

package/dist/dataFeed/dataFeedColumnsItems.js

@@ -21,6 +21,9 @@ const FeedItemInner = ({ columnsList, expanded, collapsedColumnsQty, visibleColu
 exports.FeedItem = (0, react_1.memo)(FeedItemInner);
 const ActionFeedItemInner = ({ columnsList, expanded, collapsedColumnsQty, visibleColumns, visibleRows, entity, index, actions, className }) => {
     const actionsComp = (0, react_1.useMemo)(() => {
+        if (entity.isLoading) {
+            return null;
+        }
         if (typeof actions === "function") {
             return (0, jsx_runtime_1.jsx)(actionsMenu_1.ActionsMenu, { entity: entity, render: actions });
         }

package/dist/dateRange/dateRange.js

@@ -25,7 +25,6 @@ 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);
@@ -41,7 +40,6 @@ exports.parseLabel = parseLabel;
 const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, options: optionsArg, type, id, disabled, dropDownTitle, hasApplyButton, disableFutureDates, disablePastDates, disableDatesBefore, triggerLabel, 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");
@@ -52,12 +50,15 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
     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 [renderContent, setRenderContent] = (0, react_1.useState)(false);
     const isCustomDateOption = (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) === dateRangeInner_1.CUSTOM_CALENDAR_ID;
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const prevIsOpenRef = (0, react_1.useRef)(false);
     const [customDate, setCustomDate] = (0, react_1.useState)((0, normalizeDates_1.normalizeDates)(value === null || value === void 0 ? void 0 : value.from.toISOString(), value === null || value === void 0 ? void 0 : value.to.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter));
+    const isDefaultState = !defaultValue && !selectedRange
+        || defaultValue && selectedRange && defaultValue.label === selectedRange.label && defaultValue.label !== dateRangeInner_1.CUSTOM_CALENDAR_ID
+        || defaultValue && selectedRange && defaultValue.label === selectedRange.label && defaultValue.label === dateRangeInner_1.CUSTOM_CALENDAR_ID && customDate.from && customDate.to
+            && new Date(customDate.from).toISOString() === defaultValue.from.toISOString() && new Date(customDate.to).toISOString() === defaultValue.to.toISOString();
     const triggerRef = (0, react_1.useRef)(null);
     const [prevSelection, setPrevSelection] = (0, react_1.useState)((0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, value));
     const componentId = (0, useUniqueId_1.useUniqueId)();
@@ -204,11 +205,11 @@ 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", 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) &&
+    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 notFocusedComponent = (0, react_1.useMemo)(() => !range.from && !range.to, [range.from, range.to]);
     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 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;
         const applyButton = showMobileCalendar || hasApplyButton ?
             (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Primary, disabled: (isCustomDateOption && (!customDate.from || !customDate.to)) || isValueNotChanged || !selectedRange, onClick: handleApplyClick, children: translate("Apply") }) : null;
@@ -228,28 +229,11 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
         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]);
+    }, [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);
-    }, []);
+    }, [handleStepperClick, selectedRange]);
     (0, react_1.useEffect)(() => {
         if (!isMobile && !isOpen && prevIsOpenRef.current) {
             setTimeout(() => {
@@ -270,27 +254,7 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
         !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] });
+    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", disabled: checkIsRangeDisable(false), 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", disabled: checkIsRangeDisable(true), 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 })] });
 };
 exports.DateRange = DateRange;
 exports.TRANSLATIONS = [

package/dist/dropdown/dropdown.js

@@ -18,6 +18,7 @@ const useLanguage_1 = require("../utils/localization/useLanguage");
 const dropdownPopup_1 = require("./dropdownPopup");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const useDebounce_1 = require("../commonHelpers/hooks/useDebounce");
+const skeletonList_1 = require("../skeletonList/skeletonList");
 const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems, onChange, value, defaultValue, placeholder, dialogAriaLabel, width, isLoading, title, triggerAriaLabel, disabled, inputId, filterName, showCounterPill = true, showSelection, fullWidthTriggerButton, hasApplyButton, searchField = true, multiselect = true, forceSelection = false, selectAllButton = true, getNamedItems, getSelectedItem, buttonType = "secondary", listLimit = 500, alignment = "bottom-left", error, sortFn }) => {
     var _a;
     const isFullSelectionMode = (0, react_1.useMemo)(() => !Array.isArray(value), [value]);
@@ -358,7 +359,7 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
             currentWidth = 180;
         }
         if (state.showWaiting || isLoading) {
-            return (0, jsx_runtime_1.jsx)(dropdownList_1.WaitingList, { width: currentWidth });
+            return (0, jsx_runtime_1.jsx)(skeletonList_1.SkeletonList, { className: "zen-dropdown-list__container zen-dropdown-list__container--empty", width: currentWidth });
         }
         if (state.showEmptyList) {
             const isClearButtonDisabled = (0, dropdownHelper_1.compareStringsArrays)(state.selectedIds, state.defaultValue);

package/dist/dropdown/dropdownList.d.ts

@@ -38,10 +38,6 @@ export interface IDropdownList extends IZenComponentProps {
 interface IDropdownEmptyList extends Pick<IDropdownList, "translate" | "className" | "width" | "onClearClick" | "onApplyClick" | "onCancelClick" | "hasApplyButton" | "isApplyDisabled" | "isClearButtonDisabled" | "isWithFooter"> {
 }
 export declare const EmptyList: React.FC<IDropdownEmptyList>;
-export declare const WaitingList: React.FC<{
-    className?: string;
-    width?: number;
-}>;
 export declare const DropdownList: React.FC<IDropdownList>;
 export declare const TRANSLATIONS: string[];
 export {};

package/dist/dropdown/dropdownList.js

@@ -23,12 +23,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TRANSLATIONS = exports.DropdownList = exports.WaitingList = exports.EmptyList = void 0;
+exports.TRANSLATIONS = exports.DropdownList = exports.EmptyList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const checkboxListWithAction_1 = require("../checkboxListWithAction/checkboxListWithAction");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
-const waiting_1 = require("../waiting/waiting");
 const iconBackArrow_1 = require("../icons/deprecated/iconBackArrow");
 const iconCheckRadio_1 = require("../icons/iconCheckRadio");
 const button_1 = require("../button/button");
@@ -44,11 +43,6 @@ const EmptyList = ({ className, width, onClearClick, onApplyClick, onCancelClick
     return (0, jsx_runtime_1.jsxs)("div", Object.assign({}, styleWidth, { className: (0, classNames_1.classNames)(["zen-dropdown-list__container", className || ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-list__container--empty", children: translate("No data") }), isWithFooter ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-dropdown-list__footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onClearClick, disabled: isClearButtonDisabled, className: "zen-dropdown-list__clear-button", type: buttonType_1.ButtonType.Tertiary, title: translate("Clear"), children: translate("Clear") }), hasApplyButton && (0, jsx_runtime_1.jsxs)("div", { className: "zen-dropdown-list__button-group", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onCancelClick, className: "zen-dropdown-list__cancel-button", title: translate("Cancel"), children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onApplyClick, type: buttonType_1.ButtonType.Primary, disabled: isApplyDisabled, className: "zen-dropdown-list__apply-button", title: translate("Apply"), children: translate("Apply") })] })] }) : null] }));
 };
 exports.EmptyList = EmptyList;
-const WaitingList = ({ className, width }) => {
-    const styleWidth = width ? { style: { width: `${width}px` } } : {};
-    return (0, jsx_runtime_1.jsx)("div", Object.assign({}, styleWidth, { className: (0, classNames_1.classNames)(["zen-dropdown-list__container zen-dropdown-list__container--empty", className || ""]), children: (0, jsx_runtime_1.jsx)(waiting_1.Waiting, { isLoading: true, delay: Number.MAX_SAFE_INTEGER, hideOverlay: true }) }));
-};
-exports.WaitingList = WaitingList;
 const DropdownList = ({ onBackButtonClick, onSelectAllClick, onClearClick, onApplyClick, onCancelClick, onChange, onSelect, onSingleSelect, listData, isAllSelected, backButtonName, width, minWidth, isSelectAllButtonDisable, hasSelectAllButton, filterName, isMultiselect, hasApplyButton, isApplyDisabled, isClearButtonDisabled, activeValue, forceSelection, isWithFooter, isMobile }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const isDrive = (0, useDrive_1.useDrive)();

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

@@ -40,16 +40,13 @@ const FiltersBarDropdown = ({ sidePanelTitle, className, props, state, useSidePa
             onChange({ selectedOption: Array.from(selection).filter(el => el !== removedId) });
         }
     }, [isFullSelectionMode, onChange, selection, sortedItems, state]);
-    const isLimitedWidth = (0, react_1.useMemo)(() => props.width && props.width >= 280, [props.width]);
-    const componentWidth = (0, react_1.useMemo)(() => useSidePanelView ? (props.searchField === false ? (isLimitedWidth ? undefined : props.width) : (isLimitedWidth ? undefined : props.width || 180)) : props.width, [useSidePanelView, props.searchField, isLimitedWidth, props.width]);
-    const component = isFullSelectionMode ? (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown
-    //after updates in dropdown component if useSidePanelView change condition to (props.searchField === false ? props.width : props.width || 180)
-    , Object.assign({}, props, { width: componentWidth, inputId: props.inputId && useSidePanelView ? `${props.inputId}-side-panel` : props.inputId, className: (0, classNames_1.classNames)([className || "", useSidePanelView ? "zen-filters-bar-dropdown--side-panel" : "", !useSidePanelView && !props.width ? "zen-filters-bar-dropdown--toolbar" : ""]), classNamePopup: (0, classNames_1.classNames)(["zen-filters-bar-dropdown-popup", props.classNamePopup || ""]), value: { selected: Array.from(selection), isAllSelected: isCurrentAllSelected || false }, onChange: (newValue) => {
+    const componentWidth = (0, react_1.useMemo)(() => useSidePanelView ? undefined : props.width, [useSidePanelView, props.width]);
+    const component = isFullSelectionMode ? (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({}, props, { width: componentWidth, inputId: props.inputId && useSidePanelView ? `${props.inputId}-side-panel` : props.inputId, className: (0, classNames_1.classNames)([className || "", useSidePanelView ? "zen-filters-bar-dropdown--side-panel" : "", !useSidePanelView && !props.width ? "zen-filters-bar-dropdown--toolbar" : ""]), classNamePopup: (0, classNames_1.classNames)(["zen-filters-bar-dropdown-popup", props.classNamePopup || ""]), value: { selected: Array.from(selection), isAllSelected: isCurrentAllSelected || false }, onChange: (newValue) => {
             onChange({ selected: newValue.selected.map(el => el.id), isAllSelected: newValue.isAllSelected || false });
-        }, error: undefined, hasApplyButton: useSidePanelView ? false : props.hasApplyButton, getNamedItems: useSidePanelView ? (fn) => {
+        }, fullWidthTriggerButton: useSidePanelView ? true : props.fullWidthTriggerButton, error: undefined, hasApplyButton: useSidePanelView ? false : props.hasApplyButton, getNamedItems: useSidePanelView ? (fn) => {
             namedItemsFnRef.current = fn;
             setNamedFnReady(val => !val);
-        } : undefined, defaultValue: props.defaultValue, multiselect: true, selectAllButton: true })) : (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({}, props, { width: componentWidth, inputId: props.inputId && useSidePanelView ? `${props.inputId}-side-panel` : props.inputId, className: (0, classNames_1.classNames)([className || "", useSidePanelView ? "zen-filters-bar-dropdown--side-panel" : "", !useSidePanelView && !props.width ? "zen-filters-bar-dropdown--toolbar" : ""]), classNamePopup: (0, classNames_1.classNames)(["zen-filters-bar-dropdown-popup", props.classNamePopup || ""]), value: Array.from(selection), fullWidthTriggerButton: useSidePanelView && props.searchField === false && isLimitedWidth ? true : props.fullWidthTriggerButton, onChange: (newValue) => {
+        } : undefined, defaultValue: props.defaultValue, multiselect: true, selectAllButton: true })) : (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({}, props, { width: componentWidth, inputId: props.inputId && useSidePanelView ? `${props.inputId}-side-panel` : props.inputId, className: (0, classNames_1.classNames)([className || "", useSidePanelView ? "zen-filters-bar-dropdown--side-panel" : "", !useSidePanelView && !props.width ? "zen-filters-bar-dropdown--toolbar" : ""]), classNamePopup: (0, classNames_1.classNames)(["zen-filters-bar-dropdown-popup", props.classNamePopup || ""]), value: Array.from(selection), fullWidthTriggerButton: useSidePanelView ? true : props.fullWidthTriggerButton, onChange: (newValue) => {
             onChange({ selectedOption: newValue.map(el => el.id) });
         }, error: undefined, hasApplyButton: useSidePanelView ? false : props.hasApplyButton, getNamedItems: useSidePanelView ? (fn) => {
             namedItemsFnRef.current = fn;
@@ -84,7 +81,7 @@ const FiltersBarDropdown = ({ sidePanelTitle, className, props, state, useSidePa
                     : state.selected) : state.selectedOption })) });
     }
     const namedPills = namedItemsFnRef.current(Array.from(selection)).map(el => (el.name ? el : Object.assign(Object.assign({}, el), { name: "..." })));
-    return (0, jsx_runtime_1.jsx)(sidePanelCell_1.SidePanelCell, { title: sidePanelTitle, role: "group", labelledBy: dropdownLabelledId, titleId: dropdownLabelledId, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isLimitedWidth ? (0, jsx_runtime_1.jsx)("div", { style: { width: props.width ? `${props.width}px` : "100%", maxWidth: "100%" }, children: component }) : component, props.multiselect || props.multiselect === undefined ? (0, jsx_runtime_1.jsx)(pillBox_1.PillBox, { className: "zen-filters-bar-dropdown__pill-box", selectedPills: namedPills, onRemove: handleRemove }) : null] }) });
+    return (0, jsx_runtime_1.jsx)(sidePanelCell_1.SidePanelCell, { title: sidePanelTitle, role: "group", labelledBy: dropdownLabelledId, titleId: dropdownLabelledId, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [component, props.multiselect || props.multiselect === undefined ? (0, jsx_runtime_1.jsx)(pillBox_1.PillBox, { className: "zen-filters-bar-dropdown__pill-box", selectedPills: namedPills, onRemove: handleRemove }) : null] }) });
 };
 exports.FiltersBarDropdown = FiltersBarDropdown;
 exports.TRANSLATIONS = [...new Set([...dropdown_1.TRANSLATIONS])];

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

@@ -14,7 +14,7 @@ const FiltersBarGroupButton = ({ className, state, props, onChange: onChangeStat
         const value = event.target.value;
         onChangeState({ selectedValue: value });
     };
-    const component = (0, jsx_runtime_1.jsx)(groupButton_1.GroupButton, Object.assign({}, props, { className: (0, classNames_1.classNames)([className !== null && className !== void 0 ? className : ""]), groupData: fullGroupData, onChange: onChangeEvent }));
+    const component = (0, jsx_runtime_1.jsx)(groupButton_1.GroupButton, Object.assign({}, props, { fullWidth: useSidePanelView, className: (0, classNames_1.classNames)([className !== null && className !== void 0 ? className : ""]), groupData: fullGroupData, onChange: onChangeEvent }));
     if (!useSidePanelView) {
         return component;
     }

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

@@ -6,11 +6,11 @@ const groupsFilter_1 = require("../../../groupsFilter/groupsFilter");
 const sidePanelCell_1 = require("../../../sidePanel/sidePanelCell/sidePanelCell");
 const useUniqueId_1 = require("../../../commonHelpers/useUniqueId");
 const FiltersBarGroupsFilter = ({ props, state, sidePanelTitle, useSidePanelView, onChange: onChangeState }) => {
-    const component = (0, jsx_runtime_1.jsx)(groupsFilter_1.GroupsFilter, Object.assign({}, props, { initialFilterState: state.value, onChange: (value) => onChangeState({ value }) }));
+    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)();
     if (!useSidePanelView) {
         return component;
     }
-    return (0, jsx_runtime_1.jsx)(sidePanelCell_1.SidePanelCell, { title: sidePanelTitle, role: "group", labelledBy: groupFilterLabelledId, titleId: groupFilterLabelledId, children: component });
+    return (0, jsx_runtime_1.jsx)(sidePanelCell_1.SidePanelCell, { title: sidePanelTitle, role: "group", labelledBy: groupFilterLabelledId, titleId: groupFilterLabelledId, className: "zen-filters-bar-groups-filter--side-panel", children: component });
 };
 exports.FiltersBarGroupsFilter = FiltersBarGroupsFilter;

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", className !== null && className !== void 0 ? className : ""]), classNamePopup: (0, classNames_1.classNames)(["zen-filters-bar-period-picker__popup", 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/filtersBar.js

@@ -44,6 +44,15 @@ const getCurrentFiltersState = (children) => {
     });
     return state;
 };
+const mergeStates = (initialState, newState) => {
+    const state = Object.assign({}, initialState);
+    Object.keys(newState).forEach(key => {
+        if (state[key]) {
+            state[key] = newState[key] ? newState[key] : undefined;
+        }
+    });
+    return state;
+};
 const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersButton, parentElement, selectedQuantity, ignoreNewFunctionality = false, pillName, pillIcon, pillType, toggleAllFilters, getDefaultFiltersState, onClearAllFilters, onApplyAllFilters }) => {
     const allFiltersRef = (0, react_1.useRef)(null);
     const emptyFiltersRef = (0, react_1.useRef)(null);
@@ -52,6 +61,8 @@ const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersBu
     const { mobileTriggerRef } = (0, filtersBarProviderTrigger_1.useMobileTrigger)();
     const { setFiltersBarToggleAllFiltersFn, onUpdateNumberOfChangedFiltersFn } = (0, filtersBarProvider_1.useFiltersBarComponent)();
     const isAllFiltersButtonHidden = !isMobile && hideAllFiltersButton;
+    const prevIsShouldSync = (0, react_1.useRef)(isMobile && isAllFiltersVisible);
+    const prevIsOpen = (0, react_1.useRef)(isAllFiltersVisible);
     (0, react_1.useEffect)(() => {
         var _a, _b;
         if (!isAllFiltersVisible) {
@@ -82,13 +93,27 @@ const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersBu
             onUpdateNumberOfChangedFiltersFn(filtersBarState.numberOfChangedFilters);
         }
     }, [filtersBarState.numberOfChangedFilters, onUpdateNumberOfChangedFiltersFn]);
-    (0, react_1.useEffect)(() => {
+    const memoizedShouldUpdate = (0, react_1.useMemo)(() => {
         if (isMobile && isAllFiltersVisible) {
+            prevIsShouldSync.current = true;
+            return true;
+        }
+        prevIsShouldSync.current = false;
+        return false;
+    }, [isMobile, isAllFiltersVisible]);
+    (0, react_1.useEffect)(() => {
+        if (prevIsShouldSync.current && memoizedShouldUpdate) {
+            prevIsShouldSync.current = false;
+            if (prevIsOpen.current) {
+                prevIsOpen.current = false;
+                dispatchSidePanelState({ type: sidePanelReducer_1.StateActionType.Reinitialize, payload: mergeStates(stateFromChildren, sidePanelState) });
+                return;
+            }
             react_1.Children.forEach(filterBarChildren, (child) => {
                 dispatchSidePanelState({ type: sidePanelReducer_1.StateActionType.Change, payload: { id: child.props.id, value: { state: child.props.state } } });
             });
         }
-    }, [filterBarChildren, isAllFiltersVisible, isMobile]);
+    }, [filterBarChildren, memoizedShouldUpdate, sidePanelState, stateFromChildren]);
     const searchChild = childrenArray.find(child => child && child.type === filtersBarSearch_1.FiltersBarSearch);
     setSearchComponent(searchChild);
     (0, react_1.useEffect)(() => {
@@ -101,6 +126,7 @@ const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersBu
             });
         }
         toggleAllFilters(value);
+        prevIsOpen.current = value;
     }, [isAllFiltersVisible, toggleAllFilters, filterBarChildren]);
     const onClosePanel = (0, react_1.useCallback)(() => toggleAllFiltersCallback(false), [toggleAllFiltersCallback]);
     const handleApplyAllFilters = (0, react_1.useCallback)((isSidePanel) => (value) => {

package/dist/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange.js

@@ -7,6 +7,8 @@ const classNames_1 = require("../../../../commonHelpers/classNames/classNames");
 const rangeHelper_1 = require("../../../../range/rangeHelper");
 const useLanguage_1 = require("../../../../utils/localization/useLanguage");
 const rangeField_1 = require("../../../../range/rangeField");
+const useDirection_1 = require("../../hooks/useDirection");
+const useMobile_1 = require("../../../../commonHelpers/hooks/useMobile");
 const formFieldError_1 = require("../../../../formFieldError/formFieldError");
 const FiltersBarSidePanelRange = ({ className, id, onChange, value, unit, min, max, fullBounded, allowEqualMinMax, labelMin, labelMax, disabled }) => {
     const generatedId = (0, react_1.useId)();
@@ -37,9 +39,23 @@ const FiltersBarSidePanelRange = ({ className, id, onChange, value, unit, min, m
             setCurrentValue(value);
         }
     }, [currentValue.min, currentValue.max, value]);
-    const memoizedMinRangeField = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(rangeField_1.RangeField, { className: (0, classNames_1.classNames)(["zen-filters-bar-side-panel-range__item", "zen-filters-bar-side-panel-range__min-field"]), label: labelMin || translate("Min"), unit: unit, value: currentValue.min, id: "min", inputRef: minRef, errorString: (0, rangeHelper_1.getErrorString)("min", currentValue.min, translate, errorType, min, max), onChange: handleChange, max: max, min: min, hideErrorText: true, disabled: disabled }), [translate, unit, labelMin, currentValue.min, errorType, min, max, handleChange, disabled]);
-    const memoizedMaxRangeField = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(rangeField_1.RangeField, { className: (0, classNames_1.classNames)(["zen-filters-bar-side-panel-range__item", "zen-filters-bar-side-panel-range__max-field"]), label: labelMax || translate("Max"), unit: unit, value: currentValue.max, id: "max", inputRef: maxRef, errorString: (0, rangeHelper_1.getErrorString)("max", currentValue.max, translate, errorType, min, max), onChange: handleChange, max: max, min: min, hideErrorText: true, disabled: disabled }), [max, min, labelMax, handleChange, currentValue.max, translate, unit, errorType, disabled]);
-    return (0, jsx_runtime_1.jsxs)("div", { id: intId, className: (0, classNames_1.classNames)(["zen-filters-bar-side-panel-range", className || ""]), children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-filters-bar-side-panel-range__items-container", children: [memoizedMinRangeField, memoizedMaxRangeField] }), errorType !== undefined ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { className: "zen-filters-bar-side-panel-range__error", error: [(0, rangeHelper_1.getErrorString)("min", currentValue.min, translate, errorType, min, max) || "", (0, rangeHelper_1.getErrorString)("max", currentValue.max, translate, errorType, min, max) || ""] })
+    const { directionState, setContainerNode } = (0, useDirection_1.useDirection)();
+    const isMobile = (0, useMobile_1.useMobile)();
+    const setFieldsContainerRef = (0, react_1.useCallback)((node) => {
+        setContainerNode(node);
+    }, [setContainerNode]);
+    const rangeFieldClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)([
+        "zen-filters-bar-side-panel-range__item",
+        isMobile ? "zen-filters-bar-side-panel-range__item--mobile" : "",
+        directionState === "column" ? "zen-filters-bar-side-panel-range__item--column" : "zen-filters-bar-side-panel-range__item--row"
+    ]), [directionState, isMobile]);
+    const rangeFieldContainerClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)([
+        "zen-filters-bar-side-panel-range__items-container",
+        directionState === "column" ? "zen-filters-bar-side-panel-range__items-container--column" : "zen-filters-bar-side-panel-range__items-container--row"
+    ]), [directionState]);
+    const memoizedMinRangeField = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(rangeField_1.RangeField, { className: (0, classNames_1.classNames)([rangeFieldClasses, "zen-filters-bar-side-panel-range__min-field"]), label: labelMin || translate("Min"), unit: unit, value: currentValue.min, id: "min", inputRef: minRef, errorString: (0, rangeHelper_1.getErrorString)("min", currentValue.min, translate, errorType, min, max), onChange: handleChange, max: max, min: min, isMinField: true, direction: directionState, disabled: disabled }), [rangeFieldClasses, labelMin, translate, unit, currentValue.min, errorType, min, max, handleChange, directionState, disabled]);
+    const memoizedMaxRangeField = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(rangeField_1.RangeField, { className: (0, classNames_1.classNames)([rangeFieldClasses, "zen-filters-bar-side-panel-range__max-field"]), label: labelMax || translate("Max"), unit: unit, value: currentValue.max, id: "max", inputRef: maxRef, errorString: (0, rangeHelper_1.getErrorString)("max", currentValue.max, translate, errorType, min, max), onChange: handleChange, max: max, min: min, isMinField: false, direction: directionState, disabled: disabled }), [rangeFieldClasses, labelMax, translate, unit, currentValue.max, errorType, min, max, handleChange, directionState, disabled]);
+    return (0, jsx_runtime_1.jsxs)("div", { ref: setFieldsContainerRef, id: intId, className: (0, classNames_1.classNames)(["zen-filters-bar-side-panel-range", className || ""]), children: [(0, jsx_runtime_1.jsxs)("div", { className: rangeFieldContainerClasses, children: [memoizedMinRangeField, memoizedMaxRangeField] }), errorType !== undefined && directionState === "row" ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { className: "zen-filters-bar-side-panel-range__error", error: [(0, rangeHelper_1.getErrorString)("min", currentValue.min, translate, errorType, min, max) || "", (0, rangeHelper_1.getErrorString)("max", currentValue.max, translate, errorType, min, max) || ""] })
                 : null] });
 };
 exports.FiltersBarSidePanelRange = FiltersBarSidePanelRange;

package/dist/filtersBar/filtersBarSidePanel/hooks/useDirection.d.ts

@@ -0,0 +1,7 @@
+export type TDirection = "column" | "row";
+interface IUseDirectionProps {
+    directionState: TDirection;
+    setContainerNode: (node: HTMLDivElement | null) => void;
+}
+export declare const useDirection: (direction?: TDirection) => IUseDirectionProps;
+export {};

package/dist/filtersBar/filtersBarSidePanel/hooks/useDirection.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDirection = void 0;
+const react_1 = require("react");
+const useMobile_1 = require("../../../commonHelpers/hooks/useMobile");
+const useDirection = (direction) => {
+    const [directionState, setDirectionState] = (0, react_1.useState)(direction);
+    const isMobile = (0, useMobile_1.useMobile)();
+    const [containerNode, setContainerNode] = (0, react_1.useState)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        if (direction || !containerNode) {
+            setDirectionState(direction);
+            return;
+        }
+        const senseTexts = containerNode.querySelectorAll(".zen-range-field__sense-text");
+        const labels = containerNode.querySelectorAll(".zen-range-field__label");
+        if (!labels.length) {
+            return;
+        }
+        const senseText = senseTexts[0];
+        const labelMin = labels[0];
+        const labelMax = labels[1];
+        if (((senseText && senseText.textContent || "").length > 3) || (labelMin.textContent || "").length > 3 || (labelMax.textContent || "").length > 3) {
+            setDirectionState("column");
+        }
+        else {
+            setDirectionState("row");
+        }
+    }, [containerNode, direction, isMobile]);
+    return { directionState: directionState || "row", setContainerNode };
+};
+exports.useDirection = useDirection;

package/dist/filtersBar/filtersContainer/filtersContainer.js

@@ -95,7 +95,7 @@ const FiltersContainer = ({ className, children, getDefaultFiltersState, ignoreN
             window.requestAnimationFrame(animateScroll);
         }
     }, []);
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-filters-toolbar__filters-container", className !== null && className !== void 0 ? className : "", scrollButtonType]), children: [scrollButtonType === "start" || scrollButtonType === "both" ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-filters-toolbar__gradient", driveClassNameGradient || "", "zen-filters-toolbar__gradient--left"]) }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { title: translate("Scroll left"), className: (0, classNames_1.classNames)(["zen-filters-toolbar__scroller", driveClassNameScroller || "", "zen-filters-toolbar__start"]), icon: iconChevronRight_1.IconChevronRight, iconPosition: textIconButton_1.ButtonIconPosition.Start, onClick: handleScrollButtonClick(scrollableRef.current, -scrollableStep), iconClasses: "zen-filters-toolbar__start-icon" })] }) : null, (0, jsx_runtime_1.jsx)("div", { ref: scrollableRef, className: "zen-filters-toolbar__scrollable", children: (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-toolbar__filters", children: react_1.Children.map(children, (child, index) => {
+    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-filters-toolbar__filters-container", className !== null && className !== void 0 ? className : "", `zen-filters-toolbar__filters-container--${scrollButtonType || "none"}`]), children: [scrollButtonType === "start" || scrollButtonType === "both" ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-filters-toolbar__gradient", driveClassNameGradient || "", "zen-filters-toolbar__gradient--left"]) }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { title: translate("Scroll left"), className: (0, classNames_1.classNames)(["zen-filters-toolbar__scroller", driveClassNameScroller || "", "zen-filters-toolbar__start"]), icon: iconChevronRight_1.IconChevronRight, iconPosition: textIconButton_1.ButtonIconPosition.Start, onClick: handleScrollButtonClick(scrollableRef.current, -scrollableStep), iconClasses: "zen-filters-toolbar__start-icon" })] }) : null, (0, jsx_runtime_1.jsx)("div", { ref: scrollableRef, className: "zen-filters-toolbar__scrollable", children: (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-toolbar__filters", children: react_1.Children.map(children, (child, index) => {
                         if (child.props.hideInBar && !isFilterStateChanged(child.props.id, child.props.state) || (child.props.hideInBar && ignoreNewFunctionality)) {
                             return null;
                         }

package/dist/groupsFilter/groupsFilter.js

@@ -8,7 +8,6 @@ const groupsFilterMenu_1 = require("./groupsFilterMenu");
 const groupsFilterInitialState_1 = require("./groupsFilterInitialState");
 const groupsFilterAdjustmentState_1 = require("./groupsFilterAdjustmentState");
 const groupsFilterCurrentlySelectedState_1 = require("./groupsFilterCurrentlySelectedState");
-const waiting_1 = require("../waiting/waiting");
 const stateReducer_1 = require("./stateReducer/stateReducer");
 const stateActionType_1 = require("./stateReducer/stateActionType");
 const groupsHelper_1 = require("./groupsHelper");
@@ -26,6 +25,7 @@ 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 skeletonList_1 = require("../skeletonList/skeletonList");
 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"));
@@ -36,6 +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 prevSearchField = (0, react_1.useRef)("");
     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) => {
@@ -214,11 +215,14 @@ const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithCol
         if (!uiState.isOpen) {
             return;
         }
-        if (uiState.searchValue && uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial) {
+        if (uiState.searchValue && uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial || uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial && uiState.searchValue === ""
+            && prevSearchField.current !== uiState.searchValue) {
             inputRef.current.focus();
+            prevSearchField.current = uiState.searchValue;
         }
         else {
             const firstFocusable = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
+            prevSearchField.current = "";
             if (firstFocusable && !inputRef.current.value) {
                 firstFocusable.focus();
             }
@@ -245,7 +249,7 @@ const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithCol
     (0, useEscape_1.useEscape)(triggerRef, handleEscape, uiState.isOpen);
     const selectedCount = (0, stateReducerHelper_1.getFrozenCount)(state);
     const isStateHasData = Object.keys(state.groupsMap).length > 0;
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(groupsFilterTrigger_1.GroupsFilterTrigger, { value: uiState.searchValue, onChange: onSearchChange, isOpenPopup: uiState.isOpen, count: selectedCount, withGlobeIcon: state.frozenSideWideState && selectedCount > 0, inputRef: inputRef, handleClick: handleTriggerClick, ref: triggerRef, fullSize: fullSize, placeholder: groupPlaceHolder }), (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { isOpen: uiState.isOpen, className: (0, classNames_1.classNames)(["zen-groups-filter__popup", uiState.isOpenAdvancedFilter ? "zen-groups-filter__popup--inactive" : "", className ? className : ""]), onOpenChange: onOptionsToggle, useTrapFocusWithTrigger: uiState.isOpenAdvancedFilter ? "off" : "withTrigger", shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: translate("Organization groups filter"), recalculateOnScroll: true, children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-groups-filter-menu", ref: menuRef, children: [isStateHasData && !uiState.isLoadWithError && (0, jsx_runtime_1.jsxs)(groupsFilterMenu_1.GroupsFilterMenu, { onCancelClick: handleCancel, onApplyClick: handleApply, onResetClick: handleReset, isApplyDisabled: !(0, stateReducerHelper_1.isStateChanged)(state), children: [uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial && (0, jsx_runtime_1.jsx)(groupsFilterInitialState_1.GroupsFilterInitialState, { siteWideState: state.sideWideState, onDialogButtonClick: handleAdvancedDialogOpen, count: (0, stateReducerHelper_1.getCurrentlySelectedCount)(state), onSiteWideChange: onSideWideChange, onCurrentlySelectedClick: handleCurrentlySelectedClick, searchResult: uiState.searchValue ? getSearchResult() : "", children: getGroupsBox() }), uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Adjustment && (0, jsx_runtime_1.jsx)(groupsFilterAdjustmentState_1.GroupsFilterAdjustmentState, { onBackButtonClick: handleBackButtonClick, onHomeButtonClick: handleHomeButtonClick, onSelectAllClick: selectAllHandler, backButtonName: (0, groupsFilterStatesHelper_1.getBackButtonName)(state, uiState.currentAdjustmentId), isAllSelected: (0, groupsFilterStatesHelper_1.isAllChildrenSelected)(state, uiState.currentAdjustmentId), children: getGroupsBox() }), uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected && (0, jsx_runtime_1.jsx)(groupsFilterCurrentlySelectedState_1.GroupsFilterCurrentlySelectedState, { siteWideState: state.sideWideState, relation: state.relation, count: (0, stateReducerHelper_1.getCurrentlySelectedCount)(state), onBackButtonClick: basicHandleBackButtonClick, onSiteWideChange: onSideWideChange, onRelationChange: onRelationChange, children: getGroupsBox() })] }), !uiState.isLoadWithError && !isStateHasData && (0, jsx_runtime_1.jsx)(waiting_1.Waiting, { className: "zen-groups-filter__waiting", isLoading: !Object.keys(state.groupsMap).length, delay: 100 })] }) }), uiState.isOpenAdvancedFilter && getAdvancedDialog] });
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(groupsFilterTrigger_1.GroupsFilterTrigger, { value: uiState.searchValue, onChange: onSearchChange, isOpenPopup: uiState.isOpen, count: selectedCount, withGlobeIcon: state.frozenSideWideState && selectedCount > 0, inputRef: inputRef, handleClick: handleTriggerClick, ref: triggerRef, fullSize: fullSize, placeholder: groupPlaceHolder }), (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { isOpen: uiState.isOpen, className: (0, classNames_1.classNames)(["zen-groups-filter__popup", uiState.isOpenAdvancedFilter ? "zen-groups-filter__popup--inactive" : "", className ? className : ""]), onOpenChange: onOptionsToggle, useTrapFocusWithTrigger: uiState.isOpenAdvancedFilter ? "off" : "withTrigger", shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: translate("Organization groups filter"), recalculateOnScroll: true, children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-groups-filter-menu", ref: menuRef, children: [isStateHasData && !uiState.isLoadWithError && (0, jsx_runtime_1.jsxs)(groupsFilterMenu_1.GroupsFilterMenu, { onCancelClick: handleCancel, onApplyClick: handleApply, onResetClick: handleReset, isApplyDisabled: !(0, stateReducerHelper_1.isStateChanged)(state), children: [uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial && (0, jsx_runtime_1.jsx)(groupsFilterInitialState_1.GroupsFilterInitialState, { siteWideState: state.sideWideState, onDialogButtonClick: handleAdvancedDialogOpen, count: (0, stateReducerHelper_1.getCurrentlySelectedCount)(state), onSiteWideChange: onSideWideChange, onCurrentlySelectedClick: handleCurrentlySelectedClick, searchResult: uiState.searchValue ? getSearchResult() : "", children: getGroupsBox() }), uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Adjustment && (0, jsx_runtime_1.jsx)(groupsFilterAdjustmentState_1.GroupsFilterAdjustmentState, { onBackButtonClick: handleBackButtonClick, onHomeButtonClick: handleHomeButtonClick, onSelectAllClick: selectAllHandler, backButtonName: (0, groupsFilterStatesHelper_1.getBackButtonName)(state, uiState.currentAdjustmentId), isAllSelected: (0, groupsFilterStatesHelper_1.isAllChildrenSelected)(state, uiState.currentAdjustmentId), children: getGroupsBox() }), uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected && (0, jsx_runtime_1.jsx)(groupsFilterCurrentlySelectedState_1.GroupsFilterCurrentlySelectedState, { siteWideState: state.sideWideState, relation: state.relation, count: (0, stateReducerHelper_1.getCurrentlySelectedCount)(state), onBackButtonClick: basicHandleBackButtonClick, onSiteWideChange: onSideWideChange, onRelationChange: onRelationChange, children: getGroupsBox() })] }), !uiState.isLoadWithError && !isStateHasData && !Object.keys(state.groupsMap).length && (0, jsx_runtime_1.jsx)(skeletonList_1.SkeletonList, { className: "zen-groups-filter__waiting" })] }) }), uiState.isOpenAdvancedFilter && getAdvancedDialog] });
 };
 exports.GroupsFilter = GroupsFilter;
 exports.TRANSLATIONS = [