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

package/README.md

@@ -40,6 +40,23 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 3.1.0
+
+**🎉 Introducing the Beta `Filters` Component**
+
+We're excited to announce the beta launch of our new `Filters` component, designed to be the future successor to `FiltersBar`. This modern component delivers the same powerful functionality you rely on, while offering significant improvements:
+
+- **Clean, intuitive appearance** that reduces cognitive load for your users
+- **Developer-friendly API** that's simple to integrate and maintain
+- **React Query compatible** for seamless data fetching workflows
+
+Change log:
+
+* New `Filters` component is available in beta
+* Fix accessibility issue in `Dropdown` component
+* Update `Dropdown` to auto set 'All selected' state when all items are selected
+* Add ability to prevent step change in `FormStepper` component
+
 ### 3.0.1
 
 * Fix accessibility issues in `SelectList`

package/dist/advancedGroupsFilter/advancedGroupsFilter.d.ts

@@ -12,6 +12,7 @@ export interface IAdvancedGroupsFilter extends IZenComponentProps {
     errorHandler: (e: Error) => void;
     dataItems?: IDropdownItem[];
     tooltipText?: string;
+    isMobile?: boolean;
 }
 export declare const AdvancedGroupsFilter: React.FC<IAdvancedGroupsFilter>;
 export declare const TRANSLATIONS: string[];

package/dist/advancedGroupsFilter/advancedGroupsFilter.js

@@ -8,7 +8,7 @@ const advancedGroupsFilterForm_1 = require("./advancedGroupsFilterForm");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const modal_1 = require("../modal/modal");
-const AdvancedGroupsFilter = ({ isOpen, onClose, onApply, state, className, getData, errorHandler, dataItems, tooltipText }) => {
+const AdvancedGroupsFilter = ({ isOpen, onClose, onApply, state, className, getData, errorHandler, dataItems, tooltipText, isMobile }) => {
     //const dropdownFocusedListClasses = ["zen-dropdown-searchable-trigger__input", "zen-dropdown-searchable-trigger__popup-trigger"];
     const [currentState, setCurrentState] = (0, react_1.useState)((0, advancedGroupsFilterFormHelper_1.prepareCurrentFilterState)(state));
     const [dataItemsValue, setDataItemsValue] = (0, react_1.useState)(dataItems || []);
@@ -31,7 +31,7 @@ const AdvancedGroupsFilter = ({ isOpen, onClose, onApply, state, className, getD
     const handleApply = () => {
         onApply((0, advancedGroupsFilterFormHelper_1.prepareToFilterState)(currentState));
     };
-    return (0, jsx_runtime_1.jsxs)(modal_1.Modal, { title: translate("Advanced groups filter"), className: (0, classNames_1.classNames)(["zen-advanced-groups-filter", className || ""]), isOpen: isOpen, onClose: handleClose, children: [(0, jsx_runtime_1.jsx)(advancedGroupsFilterForm_1.AdvancedGroupsFilterForm, { dataItems: dataItemsValue, getData: getData, errorHandler: errorHandler, state: currentState, onStateChange: setCurrentState, tooltipText: tooltipText }), (0, jsx_runtime_1.jsx)(modal_1.Modal.SecondaryButton, { onClick: onClose, children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(modal_1.Modal.PrimaryButton, { onClick: handleApply, children: translate("Apply") })] });
+    return (0, jsx_runtime_1.jsxs)(modal_1.Modal, { title: translate("Advanced groups filter"), className: (0, classNames_1.classNames)(["zen-advanced-groups-filter", className || ""]), isOpen: isOpen, modalContainerClassName: isMobile ? "zen-advanced-groups-filter-prioritized-modal" : undefined, onClose: handleClose, children: [(0, jsx_runtime_1.jsx)(advancedGroupsFilterForm_1.AdvancedGroupsFilterForm, { dataItems: dataItemsValue, getData: getData, errorHandler: errorHandler, state: currentState, onStateChange: setCurrentState, tooltipText: tooltipText }), (0, jsx_runtime_1.jsx)(modal_1.Modal.SecondaryButton, { onClick: onClose, children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(modal_1.Modal.PrimaryButton, { onClick: handleApply, children: translate("Apply") })] });
 };
 exports.AdvancedGroupsFilter = AdvancedGroupsFilter;
 exports.TRANSLATIONS = [

package/dist/advancedGroupsFilter/advancedGroupsFilterFormSection.js

@@ -35,9 +35,11 @@ const advancedGroupsFilterHelper_1 = require("./advancedGroupsFilterHelper");
 const groupsHelper_1 = require("../groupsFilter/groupsHelper");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const focusableSelector_1 = require("../utils/focusableSelector");
+const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const AdvancedGroupsFilterFormSection = ({ state, interSectionRelation, itemId, onInterSectionChange, onRelationChange, onRemoveCondition, onStateChange, getData, errorHandler, dataItems, isHasRemoveConditionButton, isHasTooltip, tooltipText }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const inputItem = (0, react_1.useId)();
+    const isMobile = (0, useMobile_1.useMobile)();
     const [currentSelection, setCurrentSelection] = react_1.default.useState((0, advancedGroupsFilterHelper_1.getCurrentSelectionFromIds)(state.items, dataItems));
     const isPrevEmptyComboItems = (0, react_1.useRef)(dataItems.length === 0);
     const comboboxRef = (0, react_1.useRef)(null);
@@ -84,7 +86,7 @@ const AdvancedGroupsFilterFormSection = ({ state, interSectionRelation, itemId,
                         ] }) }) }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "zen-advanced-groups-filter-form__main-section", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-advanced-groups-filter-form__section-column zen-advanced-groups-filter-form__section-column--left", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-advanced-groups-filter-form__section-label zen-advanced-groups-filter-form__operator-section", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-advanced-groups-filter-form__operator-label", children: translate("Operator") }), isHasTooltip && (0, jsx_runtime_1.jsx)(advancedGroupsFilterSectionTooltip_1.AdvancedGroupsFilterSectionTooltip, { ariaLabel: "Information", text: tooltipText })] }), (0, jsx_runtime_1.jsx)(groupButton_1.GroupButton, { onChange: handleRelationChange, groupData: [
                                     { name: translate("And"), value: groupsFilterInterfaces_1.RelationOperator.AND, selected: state.relation === groupsFilterInterfaces_1.RelationOperator.AND },
                                     { name: translate("Or"), value: groupsFilterInterfaces_1.RelationOperator.OR, selected: state.relation === groupsFilterInterfaces_1.RelationOperator.OR }
-                                ] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-advanced-groups-filter-form__section-column zen-advanced-groups-filter-form__section-column--right", children: [(0, jsx_runtime_1.jsx)("label", { className: "zen-advanced-groups-filter-form__section-label", children: translate("Groups") }), isHasRemoveConditionButton && (0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-advanced-groups-filter-form__remove-button", "data-item": itemId, onClick: onRemoveCondition, children: translate("Remove condition") }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-advanced-groups-filter-form__combo-section", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-advanced-groups-filter-form__combo-box", ref: comboboxRef, children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { classNamePopup: "zen-advanced-groups-filter-form__popup", getData: getData, errorHandler: errorHandler, dataItems: dataItems, onChange: handleSelection, value: state.items.map((el) => el.id), placeholder: translate("Select groups…"), inputId: `${inputItem}-dropdown-${itemId}`, showCounterPill: true }) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-advanced-groups-filter-form__selected-box", ref: pillBoxRef, children: (0, jsx_runtime_1.jsx)(comboboxSelected_1.ComboboxSelected, { selection: (0, advancedGroupsFilterHelper_1.getCurrentSelectionFromIds)(state.items, dataItems).map((el) => ({ id: el.id, name: el.name })), onRemove: handleRemove, pillEmptyText: groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID }) })] })] })] })] });
+                                ] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-advanced-groups-filter-form__section-column zen-advanced-groups-filter-form__section-column--right", children: [(0, jsx_runtime_1.jsx)("label", { className: "zen-advanced-groups-filter-form__section-label", children: translate("Groups") }), isHasRemoveConditionButton && (0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-advanced-groups-filter-form__remove-button", "data-item": itemId, onClick: onRemoveCondition, children: translate("Remove condition") }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-advanced-groups-filter-form__combo-section", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-advanced-groups-filter-form__combo-box", ref: comboboxRef, children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { classNamePopup: "zen-advanced-groups-filter-form__popup", getData: getData, mobileSheetStackingClassName: isMobile ? "zen-advanced-groups-filter-form__mobile-sheet-stacking" : undefined, errorHandler: errorHandler, dataItems: dataItems, onChange: handleSelection, value: state.items.map((el) => el.id), placeholder: translate("Select groups…"), inputId: `${inputItem}-dropdown-${itemId}`, showCounterPill: true }) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-advanced-groups-filter-form__selected-box", ref: pillBoxRef, children: (0, jsx_runtime_1.jsx)(comboboxSelected_1.ComboboxSelected, { selection: (0, advancedGroupsFilterHelper_1.getCurrentSelectionFromIds)(state.items, dataItems).map((el) => ({ id: el.id, name: el.name })), onRemove: handleRemove, pillEmptyText: groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID }) })] })] })] })] });
 };
 exports.AdvancedGroupsFilterFormSection = AdvancedGroupsFilterFormSection;
 exports.TRANSLATIONS = [

package/dist/chip/chip.js

@@ -93,13 +93,13 @@ const Chip = (props) => {
         isTriggerMode ? (0, getChipStateClassName_1.getChipTriggerStateClassName)(!!disabled, isOpen, status) : (0, getChipStateClassName_1.getChipStateClassName)(!!disabled, !!readonly, active, status),
         className !== null && className !== void 0 ? className : ""
     ], [driveChipClass, isTriggerMode, disabled, isOpen, status, readonly, active, className]);
-    const chipComponent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("label", { className: (0, classNames_1.classNames)(memoizedClasses), ref: ref, title: chipTitle, htmlFor: id || chipId, children: [(0, jsx_runtime_1.jsx)("input", { checked: active, onBlur: onBlurHandler, onKeyUp: onKeyUpHandler, onKeyDown: onKeyDownHandler, onChange: onChangeHandler, id: id || chipId, className: "zen-chip__input", type: "checkbox", disabled: disabled, readOnly: readonly }), children ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-chip-text-content", driveTextClass !== null && driveTextClass !== void 0 ? driveTextClass : ""]), children: children }) : null, svgIcon, isClosable && (0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-chip__close-button", onClick: handleClose, title: closeAriaText || translate("Close"), "aria-label": closeAriaText || translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: isDrive ? "huger" : "large", className: "zen-pill-non-actionable__close-icon" }) })] }), [memoizedClasses, ref, chipTitle, id, chipId, active, onBlurHandler, onKeyUpHandler, onKeyDownHandler, onChangeHandler, disabled, readonly, children, driveTextClass, svgIcon, isClosable,
-        handleClose, closeAriaText, translate, isDrive]);
+    const chipComponent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("label", { className: (0, classNames_1.classNames)(memoizedClasses), ref: ref, title: title || chipTitle, htmlFor: id || chipId, children: [(0, jsx_runtime_1.jsx)("input", { checked: active, onBlur: onBlurHandler, onKeyUp: onKeyUpHandler, onKeyDown: onKeyDownHandler, onChange: onChangeHandler, id: id || chipId, className: "zen-chip__input", type: "checkbox", disabled: disabled, readOnly: readonly }), children ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-chip-text-content", driveTextClass !== null && driveTextClass !== void 0 ? driveTextClass : ""]), children: children }) : null, svgIcon, isClosable && (0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-chip__close-button", onClick: handleClose, title: closeAriaText || translate("Close"), "aria-label": closeAriaText || translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: isDrive ? "huger" : "large", className: "zen-pill-non-actionable__close-icon" }) })] }), [memoizedClasses, ref, title, chipTitle, id, chipId, active, onBlurHandler, onKeyUpHandler, onKeyDownHandler, onChangeHandler, disabled, readonly,
+        children, driveTextClass, svgIcon, isClosable, handleClose, closeAriaText, translate, isDrive]);
     const chipTriggerComponent = (0, react_1.useMemo)(() => {
-        const extraAttributes = chipTitle ? { "aria-label": chipTitle } : {};
+        const extraAttributes = title ? { "aria-label": title } : chipTitle ? { "aria-label": chipTitle } : {};
         return (0, jsx_runtime_1.jsx)("div", Object.assign({ role: "button", tabIndex: 0 }, extraAttributes, { onClick: handleClick, onKeyDown: chipTriggerKeyDownHandler, className: (0, classNames_1.classNames)(memoizedClasses), "data-id": id || chipId, ref: triggerRef, children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-chip__content-wrapper", children: [hasContent ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-chip-text-content", driveTextClass !== null && driveTextClass !== void 0 ? driveTextClass : ""]), children: children }) : null, svgIcon, isClosable && (0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-chip__close-button", onClick: handleClose, title: closeAriaText || translate("Close"), "aria-label": closeAriaText || translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: isDrive ? "huger" : "large", className: "zen-pill-non-actionable__close-icon" }) }), hasQuantity && quantity ? (0, jsx_runtime_1.jsx)("div", { className: "zen-chip__quantity", children: quantity }) : null] }) }));
-    }, [handleClick, chipTriggerKeyDownHandler, memoizedClasses, id, chipId, triggerRef, hasContent, chipTitle, driveTextClass, children, svgIcon, isClosable, handleClose,
-        closeAriaText, translate, isDrive, hasQuantity, quantity]);
+    }, [title, chipTitle, handleClick, chipTriggerKeyDownHandler, memoizedClasses, id, chipId, triggerRef, hasContent, driveTextClass,
+        children, svgIcon, isClosable, handleClose, closeAriaText, translate, isDrive, hasQuantity, quantity]);
     return isTriggerMode ? chipTriggerComponent : chipComponent;
 };
 exports.Chip = Chip;

package/dist/commonStyles/zIndex.less

@@ -6,6 +6,11 @@
 @z-index-11020: 11020;
 // Alert (inside FeedbackContainer)
 // Toast (inside FeedbackContainer)
+@z-index-11012: 11012;
+// MobileSheet dropdown (inside AdvancedGroupsFilter)
+
+@z-index-11011: 11011;
+// Modal with MobileSheet (inside FiltersSavedChipComponent)
 
 @z-index-11010: 11010;
 // MobileSheet

package/dist/dateInput/dateInput.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import "./dateInput.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
-export interface IDateInput extends IZenComponentProps {
+import { IChipsParent } from "../chip/chip";
+export interface IDateInput extends IZenComponentProps, IChipsParent {
     defaultValue?: string;
     value: string | undefined;
     onChange: (value: string | undefined) => void;

package/dist/dateInput/dateInput.js

@@ -21,9 +21,12 @@ const formFieldError_1 = require("../formFieldError/formFieldError");
 const footerButtons_1 = require("../footerButtons/footerButtons");
 const mobileSheet_1 = require("../mobileSheet/mobileSheet");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
-const DateInput = ({ className, classNamePopup, defaultValue, value, onChange, id, disabled, dropDownTitle, timeSelect, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, error, requireSelection = false, buttonLabel }) => {
+const chip_1 = require("../chip/chip");
+const chipStatusProvider_1 = require("../chip/chipStatusProvider");
+const DateInput = ({ className, classNamePopup, defaultValue, value, onChange, id, disabled, dropDownTitle, timeSelect, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, error, requireSelection = false, chip, chipIcon, chipId, chipName, buttonLabel }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const isMobile = (0, useMobile_1.useMobile)();
+    const chipStatus = (0, chipStatusProvider_1.useChipStatus)();
     const drivePopupClassName = (0, useDriveClassName_1.useDriveClassName)("zen-date-input-popup");
     const driveWrapperClassName = (0, useDriveClassName_1.useDriveClassName)("zen-date-input-popup-wrapper");
     const { dateFormat, timeFormat, weekStartsOnSunday, toLocalDateTime } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
@@ -69,6 +72,11 @@ const DateInput = ({ className, classNamePopup, defaultValue, value, onChange, i
     const handleClearClick = (0, react_1.useCallback)(() => {
         setCustomDate(defaultValue);
     }, [defaultValue]);
+    const handleClearAndApply = (0, react_1.useCallback)(() => {
+        setCustomDate(defaultValue);
+        setIsOpen(false);
+        onChange(defaultValue);
+    }, [defaultValue, onChange]);
     (0, react_1.useEffect)(() => {
         setCustomDate(value);
     }, [value]);
@@ -101,7 +109,8 @@ const DateInput = ({ className, classNamePopup, defaultValue, value, onChange, i
     }, [isOpen, isMobile]);
     const buttonCurrentLabel = getButtonLabel();
     const buttonCurrentTitle = getButtonLabel(true);
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { id: id || undefined, htmlType: "button", title: buttonCurrentTitle, icon: iconCalendar_1.IconCalendar, iconPosition: textIconButton_1.ButtonIconPosition.Start, className: cssClass, disabled: disabled, onClick: toggleVisibility, ref: triggerRef, children: buttonCurrentLabel }), isMobile ? memoizedMobileView : memoizedDesktopView, (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: error })] });
+    const chipTriggerComponent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(chip_1.Chip, { status: isDefaultState ? undefined : chipStatus || "active", title: isDefaultState ? chipName : buttonCurrentTitle, isOpen: isOpen, disabled: disabled, onClick: toggleVisibility, onClose: isDefaultState ? undefined : handleClearAndApply, triggerRef: triggerRef, icon: chipIcon || iconCalendar_1.IconCalendar, id: chipId, children: isDefaultState ? chipName : buttonCurrentLabel }), [isDefaultState, chipStatus, isOpen, disabled, toggleVisibility, handleClearAndApply, chipIcon, chipId, chipName, buttonCurrentLabel, buttonCurrentTitle]);
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [chip ? chipTriggerComponent : (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { id: id || undefined, htmlType: "button", title: buttonCurrentTitle, icon: iconCalendar_1.IconCalendar, iconPosition: textIconButton_1.ButtonIconPosition.Start, className: cssClass, disabled: disabled, onClick: toggleVisibility, ref: triggerRef, children: buttonCurrentLabel }), isMobile ? memoizedMobileView : memoizedDesktopView, (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: error })] });
 };
 exports.DateInput = DateInput;
 exports.TRANSLATIONS = [

package/dist/dateRange/dateRange.js

@@ -27,6 +27,7 @@ const useDrive_1 = require("../utils/theme/useDrive");
 const iconChevronRightSmall_1 = require("../icons/iconChevronRightSmall");
 const chip_1 = require("../chip/chip");
 const chipStatusProvider_1 = require("../chip/chipStatusProvider");
+const focusableSelector_1 = require("../utils/focusableSelector");
 const parseLabel = (option, dateFormat, translate, toLacalFn) => {
     const localeFrom = toLacalFn(option.from);
     const localeTo = toLacalFn(option.to);
@@ -53,7 +54,7 @@ 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 [renderContent, setRenderContent] = (0, react_1.useState)(false);
+    const mobileContentRef = (0, react_1.useRef)(null);
     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);
@@ -189,16 +190,17 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
         setIsOpen(false);
     }, [setIsOpen]);
     const onReadyForFocus = (0, react_1.useCallback)((isCurrentOpen) => {
+        var _a;
         if (!isMobile) {
             return;
         }
         if (isCurrentOpen) {
-            setRenderContent(true);
+            const focusableElement = (_a = mobileContentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
+            focusableElement === null || focusableElement === void 0 ? void 0 : focusableElement.focus();
             return;
         }
-        setRenderContent(false);
         prevIsOpenRef.current = isCurrentOpen;
-    }, [isMobile]);
+    }, [isMobile, mobileContentRef]);
     const isValueNotChanged = (0, react_1.useMemo)(() => {
         if (!hasApplyButton) {
             return false;
@@ -210,7 +212,6 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
     }, [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) &&
                             (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 cancelButton = hasApplyButton && !showMobileCalendar ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Secondary, onClick: handleCancelClick, children: translate("Cancel") }) : null;
@@ -219,8 +220,8 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
         return (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, { children: [applyButton, cancelButton, clearButton] });
     }, [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: notFocusedComponent ? false : true, isBackVisible: showMobileCalendar, onBackClick: handleMobileBackClick, onReadyForFocus: onReadyForFocus, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: showMobileCalendar ? calendarLabel : title }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: renderContent ? component : null }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, { children: memoizedMobileFooter })] }), [calendarLabel, classNamePopup, component, handleMobileBackClick, isOpen, memoizedHandleClose, memoizedMobileFooter, notFocusedComponent,
-        onReadyForFocus, renderContent, showMobileCalendar, title, 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: false, preventFirstFocus: true, isBackVisible: showMobileCalendar, onBackClick: handleMobileBackClick, onReadyForFocus: onReadyForFocus, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: showMobileCalendar ? calendarLabel : title }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: (0, jsx_runtime_1.jsx)("div", { ref: mobileContentRef, children: component }) }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, { children: memoizedMobileFooter })] }), [calendarLabel, classNamePopup, component, handleMobileBackClick, isOpen, memoizedHandleClose, memoizedMobileFooter,
+        onReadyForFocus, showMobileCalendar, title, translate, mobileContentRef]);
     const checkIsRangeDisable = (0, react_1.useCallback)((isIncrease) => {
         if (!selectedRange) {
             return true;
@@ -258,7 +259,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", title: buttonTitle, 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, buttonTitle]);
-    const chipTriggerComponent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(chip_1.Chip, { status: isDefaultState ? undefined : chipStatus || "active", isOpen: isOpen, disabled: disabled, onClick: toggleVisibility, onClose: isDefaultState ? undefined : handleClearClick, triggerRef: triggerRef, icon: chipIcon || iconCalendar_1.IconCalendar, id: chipId, children: isDefaultState ? chipName : buttonLabel }), [isDefaultState, chipStatus, isOpen, disabled, toggleVisibility, handleClearClick, chipIcon, chipId, chipName, buttonLabel]);
+    const chipTriggerComponent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(chip_1.Chip, { status: isDefaultState ? undefined : chipStatus || "active", title: isDefaultState ? chipName : buttonTitle, isOpen: isOpen, disabled: disabled, onClick: toggleVisibility, onClose: isDefaultState ? undefined : handleClearClick, triggerRef: triggerRef, icon: chipIcon || iconCalendar_1.IconCalendar, id: chipId, children: isDefaultState ? chipName : buttonLabel }), [isDefaultState, chipStatus, isOpen, disabled, toggleVisibility, handleClearClick, chipIcon, chipId, chipName, buttonLabel, buttonTitle]);
     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" }) })] }) : (chip ? chipTriggerComponent : popupTriggerComponent), isMobile ? memoizedMobileView : memoizedDesktopView, (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: error })] });
 };
 exports.DateRange = DateRange;

package/dist/dropdown/dropdown.d.ts

@@ -5,6 +5,7 @@ import { IColor } from "../groupsFilter/groupsFilterInterfaces";
 import { TFilterButton } from "../filterButton/filterButton";
 import { TAlignment } from "../absolute/absolute";
 import { IChipsParent } from "../chip/chip";
+export declare const LIST_LIMIT = 500;
 export interface ISelectionItem {
     id: string;
     name?: string;
@@ -49,6 +50,7 @@ interface IDropdownBase extends IChipsParent {
     isLoading?: boolean;
     alignment?: TAlignment;
     classNamePopup?: string;
+    mobileSheetStackingClassName?: string;
     error?: string;
     sortFn?: (a: IDropdownItem, b: IDropdownItem) => number;
     checkboxLabel?: string;

package/dist/dropdown/dropdown.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TRANSLATIONS = exports.Dropdown = void 0;
+exports.TRANSLATIONS = exports.Dropdown = exports.LIST_LIMIT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable complexity */
 const react_1 = require("react");
@@ -21,7 +21,8 @@ const useDebounce_1 = require("../commonHelpers/hooks/useDebounce");
 const skeletonList_1 = require("../skeletonList/skeletonList");
 const chip_1 = require("../chip/chip");
 const chipStatusProvider_1 = require("../chip/chipStatusProvider");
-const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems, fetchState, 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, checkboxLabel, chip, chipId, chipName, chipIcon, setChecked, setSearch }) => {
+exports.LIST_LIMIT = 500;
+const Dropdown = ({ className, classNamePopup, mobileSheetStackingClassName, getData, errorHandler, dataItems, fetchState, 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 = exports.LIST_LIMIT, alignment = "bottom-left", error, sortFn, checkboxLabel, chip, chipId, chipName, chipIcon, setChecked, setSearch }) => {
     var _a;
     const isFullSelectionMode = (0, react_1.useMemo)(() => typeof value === "object" &&
         "selected" in value &&
@@ -31,7 +32,7 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
     const isQueryMode = (0, react_1.useMemo)(() => typeof getData === "undefined" && typeof dataItems === "undefined", [getData, dataItems]);
     const isCheckboxMode = (0, react_1.useMemo)(() => checkboxLabel && typeof value === "object" && "isChecked" in value && typeof value.isChecked === "boolean" || false, [checkboxLabel, value]);
     const [initialInChecked] = (0, react_1.useState)(isCheckboxMode ? value.isChecked : undefined);
-    const [state, dispatchState] = (0, react_1.useReducer)(stateReducer_1.stateReducer, (0, stateReducer_1.getInitialState)(isFullSelectionMode, isQueryMode ? (fetchState === null || fetchState === void 0 ? void 0 : fetchState.data) || [] : dataItems || [], isFullSelectionMode || isCheckboxMode ? value.selected : value, defaultValue ? (isFullSelectionMode || isCheckboxMode ? defaultValue.selected : defaultValue) : undefined, isFullSelectionMode ? value.isAllSelected : undefined, defaultValue ? (isFullSelectionMode ? defaultValue.isAllSelected : undefined) : undefined, isCheckboxMode ? value.isChecked : undefined, isCheckboxMode && defaultValue ? defaultValue.isChecked : undefined));
+    const [state, dispatchState] = (0, react_1.useReducer)(stateReducer_1.stateReducer, (0, stateReducer_1.getInitialState)(isFullSelectionMode, isQueryMode ? (fetchState === null || fetchState === void 0 ? void 0 : fetchState.data) || [] : dataItems || [], isFullSelectionMode || isCheckboxMode ? value.selected : value, listLimit, defaultValue ? (isFullSelectionMode || isCheckboxMode ? defaultValue.selected : defaultValue) : undefined, isFullSelectionMode ? value.isAllSelected : undefined, defaultValue ? (isFullSelectionMode ? defaultValue.isAllSelected : undefined) : undefined, isCheckboxMode ? value.isChecked : undefined, isCheckboxMode && defaultValue ? defaultValue.isChecked : undefined));
     const chipStatus = (0, chipStatusProvider_1.useChipStatus)();
     const isMobile = (0, useMobile_1.useMobile)();
     const abortToken = (0, react_1.useRef)(new AbortController());
@@ -473,7 +474,7 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
                 : (0, dropdownHelper_1.sortDropdownItemArray)(((_b = state.groupsMap[state.currentId || groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID]) === null || _b === void 0 ? void 0 : _b.children) || [], sortFn).slice(0, listLimit) || [], multiselect, currentAllSelected);
             return (0, jsx_runtime_1.jsx)(dropdownList_1.DropdownList, { onBackButtonClick: handleBackButtonClick, onSelectAllClick: isSearchMode ? handleSelectAllInSearch : handleSelectAllClick, onClearClick: handleClearClick, onCancelClick: handleCancelClick, onApplyClick: handleApplyClick, onChange: handleSelect, onSelect: handleChangeCurrentId, onSingleSelect: handleSingleSelection, activeValue: state.selectedIds.length ? state.selectedIds[0] : "root", 
                 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                backButtonName: state.currentId ? (0, groupsHelper_1.getGroupDescription)(state.groupsMap[state.currentId], translate) : undefined, filterName: isMobile ? undefined : filterName, isAllSelected: currentAllSelected ? currentAllSelected : (isSearchMode ? (0, dropdownHelper_1.isEveryItemSelected)((0, dropdownHelper_1.getListDataWithDisabled)(state.listData, state.isNestedList), state.selectedIds)
+                backButtonName: state.currentId && state.groupsMap[state.currentId] ? (0, groupsHelper_1.getGroupDescription)(state.groupsMap[state.currentId], translate) : undefined, filterName: isMobile ? undefined : filterName, isAllSelected: currentAllSelected ? currentAllSelected : (isSearchMode ? (0, dropdownHelper_1.isEveryItemSelected)((0, dropdownHelper_1.getListDataWithDisabled)(state.listData, state.isNestedList), state.selectedIds)
                     : (currentAllSelected === undefined ? (0, dropdownHelper_1.isAllChildrenSelected)(state, state.currentId || groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID) : false)), isMultiselect: multiselect, forceSelection: forceSelection, 
                 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                 listData: currentListData, width: width || currentWidth === 180 ? undefined : currentWidth, minWidth: currentWidth, hasSelectAllButton: selectAllButton && multiselect, hasApplyButton: hasApplyButton, isApplyDisabled: memoizedIsApplyButtonDisabled, isSelectAllButtonDisable: currentListData.length === 0
@@ -493,7 +494,7 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
     const memoizedCurrentSelection = (0, react_1.useMemo)(() => showSelection && !state.inputValue ? currentStringFromSelected : "", [showSelection, state.inputValue, currentStringFromSelected]);
     const parentTriggerWidth = ((_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 420;
     return (0, jsx_runtime_1.jsxs)("div", { className: containerClassName, ref: comboboxRef, children: [chip ? (0, jsx_runtime_1.jsx)(chip_1.Chip, { status: memoizedIsClearButtonDisabled ? undefined : chipStatus || "active", isOpen: state.isOpenCombo, disabled: disabled, onClick: handleTriggerClick, onClose: memoizedIsClearButtonDisabled ? undefined : handleClearClick, triggerRef: triggerRef, icon: chipIcon, id: chipId, children: currentStringFromSelected || chipName }) :
-                (0, jsx_runtime_1.jsx)(dropdownTrigger_1.DropdownTrigger, { className: (0, classNames_1.classNames)([!width && !fullWidthTriggerButton && parentTriggerWidth < 420 && !searchField ? "zen-dropdown__trigger-button--width-parent" : ""]), currentSelection: memoizedCurrentSelection, isActive: state.isOpenCombo, id: inputId, disabled: disabled, count: showCounterPill ? countSelected : 0, fullWidth: fullWidthTriggerButton, inputValue: state.inputValue, placeholder: placeholder || translate("Filter by group"), searchField: searchField && !isMobile ? searchField : false, onSearchChange: onSearchChange, handleClick: handleTriggerClick, width: width && width > 420 ? 420 : width, title: title, triggerAriaLabel: triggerAriaLabel, triggerRef: triggerRef, inputRef: inputRef, buttonType: buttonType, error: error }), (0, jsx_runtime_1.jsx)(dropdownPopup_1.DropdownPopup, { alignment: alignment, triggerRef: triggerRef, classNamePopup: classNamePopup, isMobile: isMobile, dialogAriaLabel: dialogAriaLabel, disabled: disabled, filterName: filterName, hasApplyButton: hasApplyButton, inputId: inputId, isClearButtonDisabled: memoizedIsClearButtonDisabled, isApplyButtonDisabled: memoizedIsApplyButtonDisabled, isWithFooter: memoizedWithFooter, isOpenCombo: state.isOpenCombo, searchField: searchField, placeholder: placeholder, inputValue: state.inputValue, handleApplyClick: handleApplyClick, handleClearClick: multiselect ? handleClearClick : handleSingleSelection.bind(this, true), handleTriggerClick: handleTriggerClick, onInputChange: onInputChange, inputRef: inputRef, contentRef: contentRef, onReadyForFocus: handleReadyForFocus, handleCheckboxChange: isCheckboxMode && isMobile ? handleCheckboxChange : undefined, checkboxLabel: checkboxLabel, isChecked: state.isChecked, isSearchInPopup: chip, children: getPopupContent })] });
+                (0, jsx_runtime_1.jsx)(dropdownTrigger_1.DropdownTrigger, { className: (0, classNames_1.classNames)([!width && !fullWidthTriggerButton && parentTriggerWidth < 420 && !searchField ? "zen-dropdown__trigger-button--width-parent" : ""]), currentSelection: memoizedCurrentSelection, isActive: state.isOpenCombo, id: inputId, disabled: disabled, count: showCounterPill ? countSelected : 0, fullWidth: fullWidthTriggerButton, inputValue: state.inputValue, placeholder: placeholder || translate("Filter by group"), searchField: searchField && !isMobile ? searchField : false, onSearchChange: onSearchChange, handleClick: handleTriggerClick, width: width && width > 420 ? 420 : width, title: title, triggerAriaLabel: triggerAriaLabel, triggerRef: triggerRef, inputRef: inputRef, buttonType: buttonType, error: error }), (0, jsx_runtime_1.jsx)(dropdownPopup_1.DropdownPopup, { alignment: alignment, triggerRef: triggerRef, classNamePopup: classNamePopup, mobileSheetStackingClassName: mobileSheetStackingClassName, isMobile: isMobile, dialogAriaLabel: dialogAriaLabel, disabled: disabled, filterName: filterName, hasApplyButton: hasApplyButton, inputId: inputId, isClearButtonDisabled: memoizedIsClearButtonDisabled, isApplyButtonDisabled: memoizedIsApplyButtonDisabled, isWithFooter: memoizedWithFooter, isOpenCombo: state.isOpenCombo, searchField: searchField, placeholder: placeholder, inputValue: state.inputValue, handleApplyClick: handleApplyClick, handleClearClick: multiselect ? handleClearClick : handleSingleSelection.bind(this, true), handleTriggerClick: handleTriggerClick, onInputChange: onInputChange, inputRef: inputRef, contentRef: contentRef, onReadyForFocus: handleReadyForFocus, handleCheckboxChange: isCheckboxMode && isMobile ? handleCheckboxChange : undefined, checkboxLabel: checkboxLabel, isChecked: state.isChecked, isSearchInPopup: chip, children: getPopupContent })] });
 };
 exports.Dropdown = Dropdown;
 exports.TRANSLATIONS = [

package/dist/dropdown/dropdownHelper.d.ts

@@ -1,5 +1,5 @@
 import { ICheckboxListWithActionOption } from "../checkboxListWithAction/checkboxListWithAction";
-import { IGroupTree, ITypedHash } from "../groupsFilter/groupsFilterInterfaces";
+import { IGroupTree } from "../groupsFilter/groupsFilterInterfaces";
 import { IDropdownItem } from "./dropdown";
 import { IDropdownState } from "./stateReducer/stateReducer";
 export declare const getGroupsTreeItem: (stateObj: IDropdownState, itemId: string) => IGroupTree | undefined;
@@ -25,8 +25,8 @@ export declare const createListDataOptions: (stateObj: IDropdownState, translate
 }[];
 export declare const compareStringsArrays: (arr1: string[], arr2: string[]) => boolean;
 export declare const compareObjectsArrays: (arr1: IDropdownItem[], arr2: IDropdownItem[]) => boolean;
-export declare const prepareSelectedIdsToItems: (selectedIds: string[], groupsMap: ITypedHash<IGroupTree>, groupsMapSelected: Map<string, IDropdownItem>) => IDropdownItem[];
-export declare const checkIsDataProblem: (selectedIds: string[], groupsMap: ITypedHash<IGroupTree>) => boolean;
+export declare const prepareSelectedIdsToItems: (selectedIds: string[], groupsMap: IDropdownState["groupsMap"], groupsMapSelected: Map<string, IDropdownItem>) => IDropdownItem[];
+export declare const checkIsDataProblem: (selectedIds: string[], groupsMap: IDropdownState["groupsMap"]) => boolean;
 export declare const getStringFromSelected: (selectedIds: string[], groupsMapSelected: Map<string, IDropdownItem>, translate: (s: string) => string) => string;
-export declare const getStringFromAllSelected: (groupsMap: ITypedHash<IGroupTree>, translate: (s: string) => string) => string;
+export declare const getStringFromAllSelected: (groupsMap: IDropdownState["groupsMap"], translate: (s: string) => string) => string;
 export declare const getSelectedCount: (selectedIds: string[]) => number;

package/dist/dropdown/dropdownHelper.js

@@ -142,7 +142,8 @@ const getStringFromAllSelected = (groupsMap, translate) => {
     if (!((_a = groupsMap[groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID]) === null || _a === void 0 ? void 0 : _a.children) || groupsMap[groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID].children.length === 0) {
         return "";
     }
-    const selectedItems = groupsMap[groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID].children.map(el => groupsMap[el.id] ? (0, groupsHelper_1.getGroupDescription)(groupsMap[el.id], translate) : undefined).filter(el => el);
+    const selectedItems = groupsMap[groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID].children.map(el => groupsMap[el.id] ?
+        (0, groupsHelper_1.getGroupDescription)(groupsMap[el.id], translate) : undefined).filter(el => el);
     return selectedItems.join(", ");
 };
 exports.getStringFromAllSelected = getStringFromAllSelected;

package/dist/dropdown/dropdownList.js

@@ -72,7 +72,7 @@ const DropdownList = ({ onBackButtonClick, onSelectAllClick, onClearClick, onApp
         forceSelection ? onSingleSelect(false, newActiveEl || activeValue) : onSingleSelect(false, newActiveEl);
     }, [activeValue, forceSelection, onSingleSelect]);
     const selectButtonLabel = isAllSelected ? translate("Deselect all") : translate("Select all");
-    const getActionButton = (label, title, icon, isDisable, clickHandler, size) => (0, jsx_runtime_1.jsx)("button", { type: "button", disabled: isDisable, onClick: clickHandler, className: "zen-dropdown-list__item zen-dropdown-list__item--interactive zen-dropdown-list__action-button zen-dropdown-list__action-button-back", title: title, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [react_1.default.createElement(icon, { className: "zen-dropdown-list__icon zen-dropdown-list__action-icon", size: size }), (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-dropdown-list__action-label", "zen-dropdown-list__action-label--limited", "zen-ellipsis"]), children: label })] }) });
+    const getActionButton = (label, title, icon, isDisabled, clickHandler, size) => (0, jsx_runtime_1.jsx)("button", { type: "button", disabled: isDisabled, onClick: clickHandler, className: "zen-dropdown-list__item zen-dropdown-list__item--interactive zen-dropdown-list__action-button zen-dropdown-list__action-button-back", title: title, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [react_1.default.createElement(icon, { className: "zen-dropdown-list__icon zen-dropdown-list__action-icon", size: size }), (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-dropdown-list__action-label", "zen-dropdown-list__action-label--limited", "zen-ellipsis"]), children: label })] }) });
     const styleWidth = (0, react_1.useMemo)(() => {
         if (width && !isMobile) {
             return { style: Object.assign({ width: `${width}px` }, (minWidth ? { minWidth: `${minWidth}px` } : {})) };
@@ -89,7 +89,7 @@ const DropdownList = ({ onBackButtonClick, onSelectAllClick, onClearClick, onApp
         };
         return (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-list__elements", children: isMultiselect ? (0, jsx_runtime_1.jsx)(checkboxListWithAction_1.CheckboxListWithAction, { options: listData, label: "", onChange: handleChange, onClick: handleClick }) : (0, jsx_runtime_1.jsx)(selectList_1.SelectList, { onChange: handleSingleChange, onClick: handleClick, title: translate("Select option"), id: listId, multiselect: false, selectItemOnFocus: false, items: listData, forceSelection: forceSelection, value: createValue(listData, activeValue) }) });
     }, [isMultiselect, listData, handleChange, handleClick, handleSingleChange, translate, listId, forceSelection, activeValue]);
-    return (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classNames_1.classNames)(["zen-dropdown-list", driveComponentClass || ""]) }, styleWidth, { children: [filterName ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-list__label", children: filterName }) : null, handleCheckboxChange ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-list__checkbox-container", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: isChecked, onChange: handleCheckboxChange, children: checkboxLabel }) }) : null, backButtonName ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-list__item-wrapper", children: getActionButton(backButtonName, translate("Back"), iconBackArrow_1.IconBackArrow, false, onBackButtonClick, "large") }) : null, hasSelectAllButton ? getActionButton(selectButtonLabel, selectButtonLabel, iconCheckRadio_1.IconCheckRadio, isSelectAllButtonDisable, handleSelectAllClick, isDrive ? "huger" : "huge") : null, listDataComponent, isWithFooter ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-dropdown-list__footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: isMultiselect ? onClearClick : handleClearClick, disabled: isClearButtonDisabled, className: "zen-dropdown-list__clear-button zen-ellipsis", 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 zen-ellipsis", 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 zen-ellipsis", title: translate("Apply"), children: translate("Apply") })] })] }) : null] }));
+    return (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classNames_1.classNames)(["zen-dropdown-list", driveComponentClass || ""]) }, styleWidth, { children: [filterName ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-list__label", children: filterName }) : null, handleCheckboxChange ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-list__checkbox-container", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: isChecked, onChange: handleCheckboxChange, children: checkboxLabel }) }) : null, backButtonName ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-list__item-wrapper", children: getActionButton(backButtonName, translate("Back"), iconBackArrow_1.IconBackArrow, false, onBackButtonClick, "large") }) : null, hasSelectAllButton ? getActionButton(selectButtonLabel, selectButtonLabel, iconCheckRadio_1.IconCheckRadio, !!isSelectAllButtonDisable, handleSelectAllClick, isDrive ? "huger" : "huge") : null, listDataComponent, isWithFooter ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-dropdown-list__footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: isMultiselect ? onClearClick : handleClearClick, disabled: isClearButtonDisabled, className: "zen-dropdown-list__clear-button zen-ellipsis", 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 zen-ellipsis", 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 zen-ellipsis", title: translate("Apply"), children: translate("Apply") })] })] }) : null] }));
 };
 exports.DropdownList = DropdownList;
 exports.TRANSLATIONS = [

package/dist/dropdown/dropdownPopup.d.ts

@@ -5,6 +5,7 @@ export interface IDropdownPopup extends IZenComponentProps {
     alignment?: TAlignment;
     triggerRef: RefObject<HTMLElement | null>;
     classNamePopup?: string;
+    mobileSheetStackingClassName?: string;
     isMobile: boolean;
     dialogAriaLabel?: string;
     disabled?: boolean;

package/dist/dropdown/dropdownPopup.js

@@ -13,7 +13,7 @@ const useLanguage_1 = require("../utils/localization/useLanguage");
 const footerButtons_1 = require("../footerButtons/footerButtons");
 const checkbox_1 = require("../checkbox/checkbox");
 const useScrollWithAndroidKeyboard_1 = require("../utils/useScrollWithAndroidKeyboard");
-const DropdownPopup = ({ alignment, triggerRef, classNamePopup, isMobile, inputValue, dialogAriaLabel, disabled, filterName, handleApplyClick, handleClearClick, handleTriggerClick, onInputChange, hasApplyButton, inputId, isClearButtonDisabled, isWithFooter, placeholder, searchField, isSearchInPopup, isApplyButtonDisabled, isOpenCombo, inputRef, contentRef, children, onReadyForFocus, handleCheckboxChange, checkboxLabel, isChecked }) => {
+const DropdownPopup = ({ alignment, triggerRef, classNamePopup, isMobile, inputValue, dialogAriaLabel, disabled, filterName, handleApplyClick, handleClearClick, handleTriggerClick, mobileSheetStackingClassName, onInputChange, hasApplyButton, inputId, isClearButtonDisabled, isWithFooter, placeholder, searchField, isSearchInPopup, isApplyButtonDisabled, isOpenCombo, inputRef, contentRef, children, onReadyForFocus, handleCheckboxChange, checkboxLabel, isChecked }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const triggerId = (0, react_1.useId)();
     const { handleFocus, handleBlur, wrapperClass } = (0, useScrollWithAndroidKeyboard_1.useScrollWithAndroidKeyboard)();
@@ -28,7 +28,7 @@ const DropdownPopup = ({ alignment, triggerRef, classNamePopup, isMobile, inputV
         }
         return (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, { children: [hasApplyButton ? (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleApplyClick, type: buttonType_1.ButtonType.Primary, disabled: isApplyButtonDisabled, className: "zen-ellipsis", title: translate("Apply"), children: translate("Apply") }) : null, (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleClearClick, disabled: isClearButtonDisabled, className: "zen-ellipsis", type: buttonType_1.ButtonType.Tertiary, title: translate("Clear"), children: translate("Clear") })] });
     }, [handleApplyClick, handleClearClick, hasApplyButton, isApplyButtonDisabled, isClearButtonDisabled, isWithFooter, translate]);
-    const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { className: (0, classNames_1.classNames)(["zen-dropdown--mobile", classNamePopup || ""]), wrapperClassName: wrapperClass, label: "label", triggerRef: triggerRef, isOpen: isOpenCombo, onHidePanel: memoizedHandleHide, onCloseClick: memoizedHandleHide, useTrapFocusWithTrigger: true, onReadyForFocus: onReadyForFocus, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { className: "zen-dropdown-mobile-sheet__title", children: filterName || placeholder || "" }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: memoizedMobileContent }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, { children: memoizedMobileFooter })] }), [classNamePopup, wrapperClass, triggerRef, isOpenCombo, memoizedHandleHide, onReadyForFocus, filterName, placeholder, memoizedMobileContent, memoizedMobileFooter]);
+    const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { className: (0, classNames_1.classNames)(["zen-dropdown--mobile", classNamePopup || ""]), wrapperClassName: wrapperClass, stackingClassName: mobileSheetStackingClassName, label: "label", triggerRef: triggerRef, isOpen: isOpenCombo, onHidePanel: memoizedHandleHide, onCloseClick: memoizedHandleHide, useTrapFocusWithTrigger: true, onReadyForFocus: onReadyForFocus, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { className: "zen-dropdown-mobile-sheet__title", children: filterName || placeholder || "" }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: memoizedMobileContent }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, { children: memoizedMobileFooter })] }), [classNamePopup, wrapperClass, mobileSheetStackingClassName, triggerRef, isOpenCombo, memoizedHandleHide, onReadyForFocus, filterName, placeholder, memoizedMobileContent, memoizedMobileFooter]);
     const memoizedDesktopView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { isOpen: isOpenCombo, className: (0, classNames_1.classNames)(["zen-dropdown-popup zen-shadow-dropdown-default", classNamePopup || ""]), onOpenChange: handleTriggerClick, useTrapFocusWithTrigger: "withTrigger", alignment: alignment, shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: dialogAriaLabel || placeholder || translate("Filter by group"), recalculateOnScroll: true, children: (0, jsx_runtime_1.jsxs)("div", { ref: contentRef, children: [searchField && isSearchInPopup ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-popup__search-container", children: (0, jsx_runtime_1.jsx)(searchInput_1.SearchInput, { className: "zen-dropdown-chip__search", onChange: onInputChange, value: inputValue || "", ref: inputRef, id: inputId || triggerId, disabled: disabled, placeholder: placeholder || translate("Filter by group") }) }) : null, children] }) }), [alignment, children, classNamePopup, contentRef, dialogAriaLabel, disabled, handleTriggerClick, inputId, inputRef, inputValue, isOpenCombo, isSearchInPopup, onInputChange, placeholder, searchField, translate, triggerId, triggerRef]);
     return isMobile ? memoizedMobileView : memoizedDesktopView;
 };

package/dist/dropdown/dropdownSearchableTrigger.js

@@ -49,7 +49,7 @@ const DropdownSearchableTrigger = (_a) => {
         onChange(undefined);
     };
     return (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classNames_1.classNames)(["zen-dropdown-searchable-trigger", isError ? "zen-dropdown-searchable-trigger--error" : "",
-            driveComponentClass || "", disabled ? "zen-dropdown-searchable-trigger--disabled" : ""]) }, inputStyle, { ref: ref }, otherProps, { onClick: disabled ? () => { } : clickHandler, role: "combobox", "aria-label": placeholder, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-dropdown-searchable-trigger__search-container", className]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-searchable-trigger__input-container", onKeyDown: handleKeydown, children: (0, jsx_runtime_1.jsx)(textInputRaw_1.TextInputRaw, { value: value, placeholder: currentSelection ? currentSelection : placeholder || translate("Filter by group"), className: (0, classNames_1.classNames)(["zen-dropdown-searchable-trigger__input", "zen-ellipsis", currentSelection ? "zen-dropdown-searchable-trigger__input--selected" : ""]), onChange: onChange, disabled: disabled, type: "text", ref: inputRef, id: id || triggerId }) }), count ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-searchable-trigger__label-element", children: (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-searchable-trigger__counter", children: (0, jsx_runtime_1.jsx)("span", { children: isLargeNumber ? "99+" : count }) }) }) : null, value && (0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-dropdown-searchable-trigger__close-button", ref: clearRef, title: translate("Clear search"), onClick: handleClearSearch, children: (0, jsx_runtime_1.jsx)(iconCrossThin_1.IconCrossThin, { size: isDrive ? "big" : "small" }) })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", tabIndex: -1, "aria-hidden": "true", className: (0, classNames_1.classNames)(["zen-dropdown-searchable-trigger__popup-trigger", isOpenPopup ? "zen-dropdown-searchable-trigger__popup-trigger--active" : ""]), title: title || translate(isOpenPopup ? "Close filter" : "Open filter"), children: (0, jsx_runtime_1.jsx)(iconChevronDownSmall_1.IconChevronDownSmall, { className: isOpenPopup ? "zen-dropdown-searchable-trigger__arrow-icon--up" : "zen-dropdown-searchable-trigger__arrow-icon--down", size: isDrive ? "huge" : "large" }) })] }));
+            driveComponentClass || "", disabled ? "zen-dropdown-searchable-trigger--disabled" : ""]) }, inputStyle, { ref: ref }, otherProps, { onClick: disabled ? () => { } : clickHandler, role: "combobox", "aria-label": placeholder, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-dropdown-searchable-trigger__search-container", className]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-searchable-trigger__input-container", onKeyDown: handleKeydown, children: (0, jsx_runtime_1.jsx)(textInputRaw_1.TextInputRaw, { value: value, placeholder: currentSelection ? currentSelection : placeholder || translate("Filter by group"), className: (0, classNames_1.classNames)(["zen-dropdown-searchable-trigger__input", "zen-ellipsis", currentSelection ? "zen-dropdown-searchable-trigger__input--selected" : ""]), onChange: onChange, disabled: disabled, type: "text", ref: inputRef, id: id || triggerId }) }), count ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-searchable-trigger__label-element", children: (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-searchable-trigger__counter", children: (0, jsx_runtime_1.jsx)("span", { children: isLargeNumber ? "99+" : count }) }) }) : null, value && (0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-dropdown-searchable-trigger__close-button", ref: clearRef, title: translate("Clear search"), onClick: handleClearSearch, children: (0, jsx_runtime_1.jsx)(iconCrossThin_1.IconCrossThin, { size: isDrive ? "big" : "small" }) })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", onMouseDown: e => e.preventDefault(), tabIndex: -1, "aria-hidden": "true", className: (0, classNames_1.classNames)(["zen-dropdown-searchable-trigger__popup-trigger", isOpenPopup ? "zen-dropdown-searchable-trigger__popup-trigger--active" : ""]), title: title || translate(isOpenPopup ? "Close filter" : "Open filter"), children: (0, jsx_runtime_1.jsx)(iconChevronDownSmall_1.IconChevronDownSmall, { className: isOpenPopup ? "zen-dropdown-searchable-trigger__arrow-icon--up" : "zen-dropdown-searchable-trigger__arrow-icon--down", size: isDrive ? "huge" : "large" }) })] }));
 };
 exports.DropdownSearchableTrigger = DropdownSearchableTrigger;
 exports.DropdownSearchableTrigger.displayName = "DropdownSearchableTrigger";

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

@@ -3,7 +3,7 @@ import { TStateAction } from "./stateAction";
 import { IGroupTree, ITypedHash } from "../../groupsFilter/groupsFilterInterfaces";
 import { IDropdownItem } from "../dropdown";
 export interface IDropdownState {
-    groupsMap: ITypedHash<IGroupTree>;
+    groupsMap: ITypedHash<IGroupTree | undefined>;
     selectedIds: string[];
     globalSelectedIds: string[];
     defaultValue: string[];
@@ -20,6 +20,8 @@ export interface IDropdownState {
     pendingNamelessIds: boolean;
     isNestedList: boolean;
     isFullSelectionMode: boolean;
+    listLimit: number;
+    resultsExceedListLimit?: boolean;
     isAllSelected?: boolean;
     globalIsAllSelected?: boolean;
     defaultValueIsAllSelected?: boolean;
@@ -29,7 +31,7 @@ export interface IDropdownState {
 }
 export interface IStateReducer extends Reducer<IDropdownState, TStateAction> {
 }
-export declare const getInitialState: (isFullSelectionMode: boolean, comboItems: IDropdownItem[], selection: string[], defaultValue?: string[], isAllSelected?: boolean, defaultValueIsAllSelected?: boolean, isChecked?: boolean, defaultValueIsChecked?: boolean) => {
+export declare const getInitialState: (isFullSelectionMode: boolean, comboItems: IDropdownItem[], selection: string[], listLimit: number, defaultValue?: string[], isAllSelected?: boolean, defaultValueIsAllSelected?: boolean, isChecked?: boolean, defaultValueIsChecked?: boolean) => {
     groupsMap: ITypedHash<IGroupTree>;
     selectedIds: string[];
     globalSelectedIds: string[];
@@ -53,5 +55,7 @@ export declare const getInitialState: (isFullSelectionMode: boolean, comboItems:
     isChecked: boolean | undefined;
     defaultValueIsChecked: boolean | undefined;
     globalIsChecked: boolean | undefined;
+    listLimit: number;
+    resultsExceedListLimit: boolean;
 };
 export declare function stateReducer(state: IDropdownState, action: TStateAction): IDropdownState;