@geotab/zenith 3.0.1 → 3.1.0-beta.0

package/esm/dropdown/dropdown.js

@@ -18,7 +18,8 @@ import { useDebounce } from "../commonHelpers/hooks/useDebounce";
 import { SkeletonList } from "../skeletonList/skeletonList";
 import { Chip } from "../chip/chip";
 import { useChipStatus } from "../chip/chipStatusProvider";
-export 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 }) => {
+export const LIST_LIMIT = 500;
+export 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 = LIST_LIMIT, alignment = "bottom-left", error, sortFn, checkboxLabel, chip, chipId, chipName, chipIcon, setChecked, setSearch }) => {
     var _a;
     const isFullSelectionMode = useMemo(() => typeof value === "object" &&
         "selected" in value &&
@@ -28,7 +29,7 @@ export const Dropdown = ({ className, classNamePopup, getData, errorHandler, dat
     const isQueryMode = useMemo(() => typeof getData === "undefined" && typeof dataItems === "undefined", [getData, dataItems]);
     const isCheckboxMode = useMemo(() => checkboxLabel && typeof value === "object" && "isChecked" in value && typeof value.isChecked === "boolean" || false, [checkboxLabel, value]);
     const [initialInChecked] = useState(isCheckboxMode ? value.isChecked : undefined);
-    const [state, dispatchState] = useReducer(stateReducer, 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] = useReducer(stateReducer, 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 = useChipStatus();
     const isMobile = useMobile();
     const abortToken = useRef(new AbortController());
@@ -470,7 +471,7 @@ export const Dropdown = ({ className, classNamePopup, getData, errorHandler, dat
                 : sortDropdownItemArray(((_b = state.groupsMap[state.currentId || ENTIRE_ORGANIZATION_GROUP_ID]) === null || _b === void 0 ? void 0 : _b.children) || [], sortFn).slice(0, listLimit) || [], multiselect, currentAllSelected);
             return _jsx(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 ? getGroupDescription(state.groupsMap[state.currentId], translate) : undefined, filterName: isMobile ? undefined : filterName, isAllSelected: currentAllSelected ? currentAllSelected : (isSearchMode ? isEveryItemSelected(getListDataWithDisabled(state.listData, state.isNestedList), state.selectedIds)
+                backButtonName: state.currentId && state.groupsMap[state.currentId] ? getGroupDescription(state.groupsMap[state.currentId], translate) : undefined, filterName: isMobile ? undefined : filterName, isAllSelected: currentAllSelected ? currentAllSelected : (isSearchMode ? isEveryItemSelected(getListDataWithDisabled(state.listData, state.isNestedList), state.selectedIds)
                     : (currentAllSelected === undefined ? isAllChildrenSelected(state, state.currentId || 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
@@ -490,7 +491,7 @@ export const Dropdown = ({ className, classNamePopup, getData, errorHandler, dat
     const memoizedCurrentSelection = 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 _jsxs("div", { className: containerClassName, ref: comboboxRef, children: [chip ? _jsx(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 }) :
-                _jsx(DropdownTrigger, { className: 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 }), _jsx(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 })] });
+                _jsx(DropdownTrigger, { className: 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 }), _jsx(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 })] });
 };
 export const TRANSLATIONS = [
     ...TriggerTranslations,

package/esm/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/esm/dropdown/dropdownHelper.js

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

package/esm/dropdown/dropdownList.js

@@ -45,7 +45,7 @@ export const DropdownList = ({ onBackButtonClick, onSelectAllClick, onClearClick
         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) => _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: _jsxs(_Fragment, { children: [React.createElement(icon, { className: "zen-dropdown-list__icon zen-dropdown-list__action-icon", size: size }), _jsx("div", { className: classNames(["zen-dropdown-list__action-label", "zen-dropdown-list__action-label--limited", "zen-ellipsis"]), children: label })] }) });
+    const getActionButton = (label, title, icon, isDisabled, clickHandler, size) => _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: _jsxs(_Fragment, { children: [React.createElement(icon, { className: "zen-dropdown-list__icon zen-dropdown-list__action-icon", size: size }), _jsx("div", { className: classNames(["zen-dropdown-list__action-label", "zen-dropdown-list__action-label--limited", "zen-ellipsis"]), children: label })] }) });
     const styleWidth = useMemo(() => {
         if (width && !isMobile) {
             return { style: Object.assign({ width: `${width}px` }, (minWidth ? { minWidth: `${minWidth}px` } : {})) };
@@ -62,7 +62,7 @@ export const DropdownList = ({ onBackButtonClick, onSelectAllClick, onClearClick
         };
         return _jsx("div", { className: "zen-dropdown-list__elements", children: isMultiselect ? _jsx(CheckboxListWithAction, { options: listData, label: "", onChange: handleChange, onClick: handleClick }) : _jsx(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 _jsxs("div", Object.assign({ className: classNames(["zen-dropdown-list", driveComponentClass || ""]) }, styleWidth, { children: [filterName ? _jsx("div", { className: "zen-dropdown-list__label", children: filterName }) : null, handleCheckboxChange ? _jsx("div", { className: "zen-dropdown-list__checkbox-container", children: _jsx(Checkbox, { checked: isChecked, onChange: handleCheckboxChange, children: checkboxLabel }) }) : null, backButtonName ? _jsx("div", { className: "zen-dropdown-list__item-wrapper", children: getActionButton(backButtonName, translate("Back"), IconBackArrow, false, onBackButtonClick, "large") }) : null, hasSelectAllButton ? getActionButton(selectButtonLabel, selectButtonLabel, IconCheckRadio, isSelectAllButtonDisable, handleSelectAllClick, isDrive ? "huger" : "huge") : null, listDataComponent, isWithFooter ? _jsxs("div", { className: "zen-dropdown-list__footer", children: [_jsx(Button, { onClick: isMultiselect ? onClearClick : handleClearClick, disabled: isClearButtonDisabled, className: "zen-dropdown-list__clear-button zen-ellipsis", type: ButtonType.Tertiary, title: translate("Clear"), children: translate("Clear") }), hasApplyButton && _jsxs("div", { className: "zen-dropdown-list__button-group", children: [_jsx(Button, { onClick: onCancelClick, className: "zen-dropdown-list__cancel-button zen-ellipsis", title: translate("Cancel"), children: translate("Cancel") }), _jsx(Button, { onClick: onApplyClick, type: ButtonType.Primary, disabled: isApplyDisabled, className: "zen-dropdown-list__apply-button zen-ellipsis", title: translate("Apply"), children: translate("Apply") })] })] }) : null] }));
+    return _jsxs("div", Object.assign({ className: classNames(["zen-dropdown-list", driveComponentClass || ""]) }, styleWidth, { children: [filterName ? _jsx("div", { className: "zen-dropdown-list__label", children: filterName }) : null, handleCheckboxChange ? _jsx("div", { className: "zen-dropdown-list__checkbox-container", children: _jsx(Checkbox, { checked: isChecked, onChange: handleCheckboxChange, children: checkboxLabel }) }) : null, backButtonName ? _jsx("div", { className: "zen-dropdown-list__item-wrapper", children: getActionButton(backButtonName, translate("Back"), IconBackArrow, false, onBackButtonClick, "large") }) : null, hasSelectAllButton ? getActionButton(selectButtonLabel, selectButtonLabel, IconCheckRadio, !!isSelectAllButtonDisable, handleSelectAllClick, isDrive ? "huger" : "huge") : null, listDataComponent, isWithFooter ? _jsxs("div", { className: "zen-dropdown-list__footer", children: [_jsx(Button, { onClick: isMultiselect ? onClearClick : handleClearClick, disabled: isClearButtonDisabled, className: "zen-dropdown-list__clear-button zen-ellipsis", type: ButtonType.Tertiary, title: translate("Clear"), children: translate("Clear") }), hasApplyButton && _jsxs("div", { className: "zen-dropdown-list__button-group", children: [_jsx(Button, { onClick: onCancelClick, className: "zen-dropdown-list__cancel-button zen-ellipsis", title: translate("Cancel"), children: translate("Cancel") }), _jsx(Button, { onClick: onApplyClick, type: ButtonType.Primary, disabled: isApplyDisabled, className: "zen-dropdown-list__apply-button zen-ellipsis", title: translate("Apply"), children: translate("Apply") })] })] }) : null] }));
 };
 export const TRANSLATIONS = [
     "Select all",

package/esm/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/esm/dropdown/dropdownPopup.js

@@ -10,7 +10,7 @@ import { useLanguage } from "../utils/localization/useLanguage";
 import { FooterButtons } from "../footerButtons/footerButtons";
 import { Checkbox } from "../checkbox/checkbox";
 import { useScrollWithAndroidKeyboard } from "../utils/useScrollWithAndroidKeyboard";
-export 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 }) => {
+export 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 } = useLanguage();
     const triggerId = useId();
     const { handleFocus, handleBlur, wrapperClass } = useScrollWithAndroidKeyboard();
@@ -25,7 +25,7 @@ export const DropdownPopup = ({ alignment, triggerRef, classNamePopup, isMobile,
         }
         return _jsxs(FooterButtons, { children: [hasApplyButton ? _jsx(Button, { onClick: handleApplyClick, type: ButtonType.Primary, disabled: isApplyButtonDisabled, className: "zen-ellipsis", title: translate("Apply"), children: translate("Apply") }) : null, _jsx(Button, { onClick: handleClearClick, disabled: isClearButtonDisabled, className: "zen-ellipsis", type: ButtonType.Tertiary, title: translate("Clear"), children: translate("Clear") })] });
     }, [handleApplyClick, handleClearClick, hasApplyButton, isApplyButtonDisabled, isClearButtonDisabled, isWithFooter, translate]);
-    const memoizedMobileView = useMemo(() => _jsxs(MobileSheet, { className: classNames(["zen-dropdown--mobile", classNamePopup || ""]), wrapperClassName: wrapperClass, label: "label", triggerRef: triggerRef, isOpen: isOpenCombo, onHidePanel: memoizedHandleHide, onCloseClick: memoizedHandleHide, useTrapFocusWithTrigger: true, onReadyForFocus: onReadyForFocus, children: [_jsx(MobileSheet.Title, { className: "zen-dropdown-mobile-sheet__title", children: filterName || placeholder || "" }), _jsx(MobileSheet.Content, { children: memoizedMobileContent }), _jsx(MobileSheet.Footer, { children: memoizedMobileFooter })] }), [classNamePopup, wrapperClass, triggerRef, isOpenCombo, memoizedHandleHide, onReadyForFocus, filterName, placeholder, memoizedMobileContent, memoizedMobileFooter]);
+    const memoizedMobileView = useMemo(() => _jsxs(MobileSheet, { className: classNames(["zen-dropdown--mobile", classNamePopup || ""]), wrapperClassName: wrapperClass, stackingClassName: mobileSheetStackingClassName, label: "label", triggerRef: triggerRef, isOpen: isOpenCombo, onHidePanel: memoizedHandleHide, onCloseClick: memoizedHandleHide, useTrapFocusWithTrigger: true, onReadyForFocus: onReadyForFocus, children: [_jsx(MobileSheet.Title, { className: "zen-dropdown-mobile-sheet__title", children: filterName || placeholder || "" }), _jsx(MobileSheet.Content, { children: memoizedMobileContent }), _jsx(MobileSheet.Footer, { children: memoizedMobileFooter })] }), [classNamePopup, wrapperClass, mobileSheetStackingClassName, triggerRef, isOpenCombo, memoizedHandleHide, onReadyForFocus, filterName, placeholder, memoizedMobileContent, memoizedMobileFooter]);
     const memoizedDesktopView = useMemo(() => _jsx(ControlledPopup, { isOpen: isOpenCombo, className: 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: _jsxs("div", { ref: contentRef, children: [searchField && isSearchInPopup ? _jsx("div", { className: "zen-dropdown-popup__search-container", children: _jsx(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/esm/dropdown/dropdownSearchableTrigger.js

@@ -46,7 +46,7 @@ export const DropdownSearchableTrigger = (_a) => {
         onChange(undefined);
     };
     return _jsxs("div", Object.assign({ className: 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: [_jsxs("div", { className: classNames(["zen-dropdown-searchable-trigger__search-container", className]), children: [_jsx("div", { className: "zen-dropdown-searchable-trigger__input-container", onKeyDown: handleKeydown, children: _jsx(TextInputRaw, { value: value, placeholder: currentSelection ? currentSelection : placeholder || translate("Filter by group"), className: 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 ? _jsx("div", { className: "zen-dropdown-searchable-trigger__label-element", children: _jsx("div", { className: "zen-dropdown-searchable-trigger__counter", children: _jsx("span", { children: isLargeNumber ? "99+" : count }) }) }) : null, value && _jsx("button", { type: "button", className: "zen-dropdown-searchable-trigger__close-button", ref: clearRef, title: translate("Clear search"), onClick: handleClearSearch, children: _jsx(IconCrossThin, { size: isDrive ? "big" : "small" }) })] }), _jsx("button", { type: "button", tabIndex: -1, "aria-hidden": "true", className: classNames(["zen-dropdown-searchable-trigger__popup-trigger", isOpenPopup ? "zen-dropdown-searchable-trigger__popup-trigger--active" : ""]), title: title || translate(isOpenPopup ? "Close filter" : "Open filter"), children: _jsx(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: [_jsxs("div", { className: classNames(["zen-dropdown-searchable-trigger__search-container", className]), children: [_jsx("div", { className: "zen-dropdown-searchable-trigger__input-container", onKeyDown: handleKeydown, children: _jsx(TextInputRaw, { value: value, placeholder: currentSelection ? currentSelection : placeholder || translate("Filter by group"), className: 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 ? _jsx("div", { className: "zen-dropdown-searchable-trigger__label-element", children: _jsx("div", { className: "zen-dropdown-searchable-trigger__counter", children: _jsx("span", { children: isLargeNumber ? "99+" : count }) }) }) : null, value && _jsx("button", { type: "button", className: "zen-dropdown-searchable-trigger__close-button", ref: clearRef, title: translate("Clear search"), onClick: handleClearSearch, children: _jsx(IconCrossThin, { size: isDrive ? "big" : "small" }) })] }), _jsx("button", { type: "button", onMouseDown: e => e.preventDefault(), tabIndex: -1, "aria-hidden": "true", className: classNames(["zen-dropdown-searchable-trigger__popup-trigger", isOpenPopup ? "zen-dropdown-searchable-trigger__popup-trigger--active" : ""]), title: title || translate(isOpenPopup ? "Close filter" : "Open filter"), children: _jsx(IconChevronDownSmall, { className: isOpenPopup ? "zen-dropdown-searchable-trigger__arrow-icon--up" : "zen-dropdown-searchable-trigger__arrow-icon--down", size: isDrive ? "huge" : "large" }) })] }));
 };
 DropdownSearchableTrigger.displayName = "DropdownSearchableTrigger";
 export const TRANSLATIONS = [

package/esm/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;

package/esm/dropdown/stateReducer/stateReducer.js

@@ -1,8 +1,8 @@
 import { StateActionType } from "./stateActionType";
-import { getChildList } from "./stateReducerHelper";
+import { getChildList, updateAllSelectedStateValueBasedOnTotalSelected } from "./stateReducerHelper";
 import { createGroupsMap } from "../../groupsFilter/groupsFilterHelper";
 import { ENTIRE_ORGANIZATION_GROUP_ID } from "../../groupsFilter/groupsHelper";
-export const getInitialState = (isFullSelectionMode, comboItems, selection, defaultValue, isAllSelected, defaultValueIsAllSelected, isChecked, defaultValueIsChecked) => {
+export const getInitialState = (isFullSelectionMode, comboItems, selection, listLimit, defaultValue, isAllSelected, defaultValueIsAllSelected, isChecked, defaultValueIsChecked) => {
     const updatedGroupsMapSelected = new Map();
     const updatedGroupsMap = comboItems.length ? createGroupsMap(comboItems, ENTIRE_ORGANIZATION_GROUP_ID) : {};
     const namelessIds = new Set();
@@ -43,12 +43,14 @@ export const getInitialState = (isFullSelectionMode, comboItems, selection, defa
         defaultValueIsAllSelected: isFullSelectionMode ? defaultValueIsAllSelected || false : undefined,
         isChecked: isChecked,
         defaultValueIsChecked: isChecked !== undefined ? defaultValueIsChecked || false : undefined,
-        globalIsChecked: isChecked
+        globalIsChecked: isChecked,
+        listLimit,
+        resultsExceedListLimit: false
     };
 };
 // eslint-disable-next-line complexity
 export function stateReducer(state, action) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     const { type, payload } = action;
     switch (type) {
         case StateActionType.CreateMap: {
@@ -69,7 +71,9 @@ export function stateReducer(state, action) {
                 });
             }
             const isCurrentListNested = Object.keys(updatedGroupsMap).length > 0 && (updatedGroupsMap[ENTIRE_ORGANIZATION_GROUP_ID].children || []).some(el => el.children && el.children.length);
-            return Object.assign(Object.assign({}, state), { groupsMap: updatedGroupsMap, namelessIds: newNamelessIds, isNestedList: state.isNestedList ? state.isNestedList : isCurrentListNested });
+            state.groupsMap = updatedGroupsMap;
+            const additionalStateUpdates = updateAllSelectedStateValueBasedOnTotalSelected(state, state.selectedIds.length - newNamelessIds.size);
+            return Object.assign(Object.assign(Object.assign({}, state), { namelessIds: newNamelessIds, isNestedList: state.isNestedList ? state.isNestedList : isCurrentListNested, resultsExceedListLimit: Object.keys(updatedGroupsMap).length - 1 >= state.listLimit }), additionalStateUpdates);
         }
         case StateActionType.SetListData: {
             state.selectedIds.forEach(id => {
@@ -112,11 +116,8 @@ export function stateReducer(state, action) {
             const newNamelessIds = new Set(state.namelessIds);
             payload.selected.forEach(id => {
                 if (!state.groupsMapSelected.has(id)) {
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const item = state.groupsMap[id];
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     item && state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     !item && newNamelessIds.add(id);
                 }
             });
@@ -129,13 +130,9 @@ export function stateReducer(state, action) {
             const newNamelessIds = new Set(state.namelessIds);
             state.selectedIds.forEach(id => {
                 if (!state.groupsMapSelected.has(id)) {
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const item = state.groupsMap[id];
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     item && state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     !item && newNamelessIds.add(id);
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     item && newNamelessIds.delete(id);
                 }
                 else {
@@ -163,11 +160,8 @@ export function stateReducer(state, action) {
             const newNamelessIds = new Set(state.namelessIds);
             payload.forEach(id => {
                 if (!state.groupsMapSelected.has(id)) {
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const item = state.groupsMap[id] || state.listData.find(el => el.id === id);
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     item && state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     !item && newNamelessIds.add(id);
                 }
             });
@@ -179,9 +173,7 @@ export function stateReducer(state, action) {
         case StateActionType.ChangeSingleSelection: {
             const newSelectedId = payload.value ? payload.value : state.defaultValue[0];
             if (newSelectedId && !state.groupsMapSelected.has(newSelectedId)) {
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                 const item = state.groupsMap[newSelectedId] || state.listData.find(el => el.id === newSelectedId);
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                 item && state.groupsMapSelected.set(newSelectedId, Object.assign(Object.assign({ id: newSelectedId }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
             }
             return Object.assign(Object.assign({}, state), { selectedIds: payload.value ? [payload.value] : (payload.reset ? [...state.defaultValue] : []) });
@@ -201,7 +193,7 @@ export function stateReducer(state, action) {
                 let parent = (_b = (_a = state.groupsMap[payload.itemId]) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.id;
                 while (parent && parent !== "root") {
                     parentForDeselect.push(parent);
-                    parent = (_c = state.groupsMap[parent].parent) === null || _c === void 0 ? void 0 : _c.id;
+                    parent = (_d = (_c = state.groupsMap[parent]) === null || _c === void 0 ? void 0 : _c.parent) === null || _d === void 0 ? void 0 : _d.id;
                 }
                 parentForDeselect.forEach(parentId => {
                     currentSelectedIds.delete(parentId);
@@ -209,7 +201,7 @@ export function stateReducer(state, action) {
                 // deselect children
                 const childrenForDeselect = [];
                 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                const currentChild = getChildList((_d = state.groupsMap[payload.itemId]) === null || _d === void 0 ? void 0 : _d.children);
+                const currentChild = getChildList((_e = state.groupsMap[payload.itemId]) === null || _e === void 0 ? void 0 : _e.children);
                 currentChild.forEach(el => {
                     childrenForDeselect.push(el.id);
                 });
@@ -217,13 +209,12 @@ export function stateReducer(state, action) {
             }
             currentSelectedIds.forEach(id => {
                 if (!state.groupsMapSelected.has(id)) {
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const item = state.groupsMap[id] || state.listData.find(el => el.id === id);
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     item && state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
                 }
             });
-            return Object.assign(Object.assign({}, state), { selectedIds: Array.from(currentSelectedIds) });
+            const additionalStateUpdates = updateAllSelectedStateValueBasedOnTotalSelected(state, currentSelectedIds.size);
+            return Object.assign(Object.assign(Object.assign({}, state), { selectedIds: Array.from(currentSelectedIds) }), additionalStateUpdates);
         }
         case StateActionType.ChangeBulkSelection: {
             const { itemsIds, value } = payload;
@@ -231,17 +222,17 @@ export function stateReducer(state, action) {
             const parentsToProcess = new Set();
             const childrenToProcess = new Set();
             itemsIds.forEach(itemId => {
-                var _a, _b, _c, _d;
+                var _a, _b, _c, _d, _e;
                 if (value) {
                     currentSelectedIds.add(itemId);
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     let parent = (_b = (_a = state.groupsMap[itemId]) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.id;
                     while (parent && parent !== "root") {
                         parentsToProcess.add(parent);
-                        parent = (_c = state.groupsMap[parent].parent) === null || _c === void 0 ? void 0 : _c.id;
+                        parent = (_d = (_c = state.groupsMap[parent]) === null || _c === void 0 ? void 0 : _c.parent) === null || _d === void 0 ? void 0 : _d.id;
                     }
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                    const currentChild = getChildList((_d = state.groupsMap[itemId]) === null || _d === void 0 ? void 0 : _d.children);
+                    const currentChild = getChildList((_e = state.groupsMap[itemId]) === null || _e === void 0 ? void 0 : _e.children);
                     currentChild.forEach(childId => childrenToProcess.add(childId.id));
                 }
                 else {
@@ -252,36 +243,35 @@ export function stateReducer(state, action) {
             parentsToProcess.forEach(parentId => currentSelectedIds.delete(parentId));
             currentSelectedIds.forEach(id => {
                 if (!state.groupsMapSelected.has(id)) {
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const item = state.groupsMap[id] || state.listData.find(el => el.id === id);
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     item && state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
                 }
             });
-            return Object.assign(Object.assign({}, state), { selectedIds: Array.from(currentSelectedIds) });
+            const additionalStateUpdates = updateAllSelectedStateValueBasedOnTotalSelected(state, currentSelectedIds.size);
+            return Object.assign(Object.assign(Object.assign({}, state), { selectedIds: Array.from(currentSelectedIds) }), additionalStateUpdates);
         }
         case StateActionType.SelectAllChildren: {
             const currentEl = state.groupsMap[payload];
             const newSelected = new Set(state.selectedIds);
             const isDisableStateProhibited = state.isNestedList;
-            (currentEl.children || []).forEach(el => {
-                var _a, _b;
+            ((currentEl === null || currentEl === void 0 ? void 0 : currentEl.children) || []).forEach(el => {
+                var _a, _b, _c, _d, _e;
                 if (!newSelected.has(el.id)) {
                     // select when isDisableStateProhibited, or when disabled elements are allowed to be displayed, and this element is not disabled
                     (isDisableStateProhibited || !el.disabled) && newSelected.add(el.id);
                     // deselect parent
                     const parentForDeselect = [];
-                    let parent = (_a = state.groupsMap[el.id].parent) === null || _a === void 0 ? void 0 : _a.id;
+                    let parent = (_b = (_a = state.groupsMap[el.id]) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.id;
                     while (parent && parent !== "root") {
                         parentForDeselect.push(parent);
-                        parent = (_b = state.groupsMap[parent].parent) === null || _b === void 0 ? void 0 : _b.id;
+                        parent = (_d = (_c = state.groupsMap[parent]) === null || _c === void 0 ? void 0 : _c.parent) === null || _d === void 0 ? void 0 : _d.id;
                     }
                     parentForDeselect.forEach(parentId => {
                         newSelected.delete(parentId);
                     });
                     //deselect children
                     const childrenForDeselect = [];
-                    const currentChild = getChildList(state.groupsMap[el.id].children);
+                    const currentChild = getChildList((_e = state.groupsMap[el.id]) === null || _e === void 0 ? void 0 : _e.children);
                     currentChild.forEach(elt => {
                         childrenForDeselect.push(elt.id);
                     });
@@ -290,9 +280,7 @@ export function stateReducer(state, action) {
             });
             newSelected.forEach(id => {
                 if (!state.groupsMapSelected.has(id)) {
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const item = state.groupsMap[id] || state.listData.find(el => el.id === id);
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     item && state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
                 }
             });
@@ -303,7 +291,7 @@ export function stateReducer(state, action) {
             // action not submitted for disabled item, other items, even if disabled, not change their state
             const deselectedItems = payload ? new Set([payload]) : new Set(state.listData.filter(elem => !elem.disabled).map(el => el.id));
             const newSelected = new Set();
-            (currentEl.children || []).forEach(el => {
+            ((currentEl === null || currentEl === void 0 ? void 0 : currentEl.children) || []).forEach(el => {
                 if (!newSelected.has(el.id) && !deselectedItems.has(el.id)) {
                     newSelected.add(el.id);
                 }
@@ -315,9 +303,7 @@ export function stateReducer(state, action) {
             });
             newSelected.forEach(id => {
                 if (!state.groupsMapSelected.has(id)) {
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const item = state.groupsMap[id] || state.listData.find(el => el.id === id);
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     item && state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
                 }
             });
@@ -326,24 +312,24 @@ export function stateReducer(state, action) {
         case StateActionType.ToggleValueForAllSelected: {
             const currentEl = state.groupsMap[ENTIRE_ORGANIZATION_GROUP_ID];
             const newSelected = new Set();
-            state.isAllSelected && (currentEl.children || []).forEach(el => {
+            state.isAllSelected && ((currentEl === null || currentEl === void 0 ? void 0 : currentEl.children) || []).forEach(el => {
                 if (!newSelected.has(el.id) && el.disabled) {
                     newSelected.add(el.id);
                 }
             });
             newSelected.forEach(id => {
                 if (!state.groupsMapSelected.has(id)) {
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const item = state.groupsMap[id] || state.listData.find(el => el.id === id);
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     item && state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
                 }
             });
-            return Object.assign(Object.assign({}, state), { selectedIds: state.isAllSelected ? Array.from(newSelected) : [], isAllSelected: state.isFullSelectionMode ? !state.isAllSelected : undefined });
+            const updatedIsAllSelectedValue = state.isFullSelectionMode ? !state.isAllSelected : undefined;
+            const additionalStateUpdates = updateAllSelectedStateValueBasedOnTotalSelected(state, newSelected.size);
+            return Object.assign(Object.assign(Object.assign({}, state), { selectedIds: state.isAllSelected ? Array.from(newSelected) : [], isAllSelected: updatedIsAllSelectedValue }), additionalStateUpdates);
         }
         case StateActionType.DeselectAllChildren: {
             const childrenForDeselect = [];
-            const currentChild = getChildList(state.groupsMap[payload].children);
+            const currentChild = getChildList((_f = state.groupsMap[payload]) === null || _f === void 0 ? void 0 : _f.children);
             const isDisableStateProhibited = state.isNestedList;
             currentChild.forEach(el => {
                 // deselect when isDisableStateProhibited, or when disabled elements are allowed to be displayed, and this element is not disabled

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

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

package/esm/dropdown/stateReducer/stateReducerHelper.js

@@ -12,3 +12,13 @@ export function getChildList(childArr) {
     });
     return list;
 }
+export const updateAllSelectedStateValueBasedOnTotalSelected = (state, totalSelected) => {
+    const additionalStateUpdates = {};
+    const groupsMapLength = Object.keys(state.groupsMap).length - 1;
+    if (!state.resultsExceedListLimit && !state.isAllSelected && state.isFullSelectionMode && groupsMapLength > 0) {
+        if (totalSelected >= groupsMapLength) {
+            additionalStateUpdates.isAllSelected = true;
+        }
+    }
+    return additionalStateUpdates;
+};

package/esm/dropdown/useDropdownState.d.ts

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

package/esm/dropdown/useDropdownState.js

@@ -1,6 +1,9 @@
 import { useState } from "react";
-export const useDropdownState = (withCheckbox) => {
+import { useDebouncedMemo } from "../commonHelpers/hooks/useDebouncedMemo";
+export const useDropdownState = (withCheckbox, debounceTimeout = 300) => {
     const [search, setSearch] = useState("");
     const [checked, setChecked] = useState(false);
-    return Object.assign({ search, setSearch }, (withCheckbox ? { checked, setChecked } : {}));
+    const debouncedSearch = useDebouncedMemo(() => search, [search], debounceTimeout);
+    const debouncedChecked = useDebouncedMemo(() => checked, [checked], debounceTimeout);
+    return Object.assign({ search: debouncedSearch, setSearch }, (withCheckbox ? { checked: debouncedChecked, setChecked } : {}));
 };

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

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

package/esm/filters/components/filtersContainer.js

@@ -1,18 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useRef } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { Chip } from "../../chip/chip";
 import React from "react";
 import { IconFilter } from "../../icons/iconFilter";
-import { IconPin2 } from "../../icons/iconPin2";
 import { createPropsHash, createStateHash, createStateObject, getFiltersState, getNumberOfChangedFilters, stabilizeChildrenWithId } from "../filtersHelper";
 import { FiltersSavedChipComponent } from "./filtersSavedChipComponent";
 import { IconClose } from "../../icons/iconClose";
 import { useChipStatus } from "../../chip/chipStatusProvider";
 import { useLanguage } from "../../utils/localization/useLanguage";
-export const FiltersContainer = ({ className, isPinned = false, onPinChange, filtersClickHandler, hasSavedFilters, filtersForCalculation, children }) => {
+import { useMobile } from "../../commonHelpers/hooks/useMobile";
+export const FiltersContainer = ({ className, isPinned = false, onPinChange, filtersClickHandler, hasSavedFilters, filtersForCalculation, children, filtersChipRef }) => {
     const chipStatus = useChipStatus();
     const { translate } = useLanguage();
+    const isMobile = useMobile();
     const numberOfChangedFilters = useMemo(() => {
         const suppressedFilters = new Set();
         filtersForCalculation.forEach(filter => {
@@ -25,12 +26,7 @@ export const FiltersContainer = ({ className, isPinned = false, onPinChange, fil
         const filteredState = getFiltersState(filtersForCalculation.filter(f => !suppressedFilters.has(f.props.id)));
         return getNumberOfChangedFilters(filteredState);
     }, [filtersForCalculation]);
-    const filtersChipRef = useRef(null);
-    const handlePinChange = useCallback((newIsPinned) => {
-        onPinChange && onPinChange(newIsPinned);
-    }, [onPinChange]);
-    const pinComponent = useMemo(() => _jsx(Chip, { active: isPinned, status: isPinned ? "accent" : undefined, onChange: handlePinChange, icon: IconPin2, children: isPinned ? "" : "+" }), [isPinned, handlePinChange]);
-    const filtersChipComponent = useMemo(() => _jsx(Chip, { quantity: numberOfChangedFilters, isOpen: false, status: numberOfChangedFilters > 0 ? chipStatus || "active" : undefined, onClick: filtersClickHandler, icon: IconFilter, title: translate("All Filters"), triggerRef: filtersChipRef, children: "+" }), [numberOfChangedFilters, chipStatus, filtersClickHandler, translate]);
+    const filtersChipComponent = useMemo(() => _jsx(Chip, { quantity: numberOfChangedFilters, isOpen: false, status: numberOfChangedFilters > 0 ? chipStatus || "active" : undefined, onClick: filtersClickHandler, icon: IconFilter, title: translate("All Filters"), triggerRef: filtersChipRef, children: "+" }), [numberOfChangedFilters, chipStatus, filtersClickHandler, translate, filtersChipRef]);
     const childrenSignature = useMemo(() => {
         const childrenArray = React.Children.toArray(children).filter(Boolean);
         return childrenArray
@@ -42,10 +38,11 @@ export const FiltersContainer = ({ className, isPinned = false, onPinChange, fil
             const state = child.props.state;
             const defaultState = child.props.defaultState;
             const childPropsQuery = JSON.stringify(child.props.fetchState || {});
+            const childPropsDataItems = JSON.stringify(child.props.dataItems || "no-data-items");
             const stateHash = createStateHash(state);
             const defaultStateHash = createStateHash(defaultState);
             const propsHash = createPropsHash(child.props);
-            return `${childId}|${stateHash}|${defaultStateHash}|${propsHash}|${childPropsQuery}`;
+            return `${childId}|${stateHash}|${defaultStateHash}|${propsHash}|${childPropsQuery}|${childPropsDataItems}`;
         })
             .join("||");
     }, [children]);
@@ -66,9 +63,11 @@ export const FiltersContainer = ({ className, isPinned = false, onPinChange, fil
             }
         });
         onPinChange === null || onPinChange === void 0 ? void 0 : onPinChange(false);
-    }, [filtersForCalculation, onPinChange]);
+        filtersChipRef.current.focus();
+    }, [filtersChipRef, filtersForCalculation, onPinChange]);
     const chipRemovalComponent = useMemo(() => numberOfChangedFilters ?
         _jsx(Chip, { title: translate("Clear"), className: "zen-filters-container__removal-chip", active: false, status: isPinned ? "accent" : undefined, onChange: handleRemovalClick, icon: IconClose })
         : null, [isPinned, handleRemovalClick, translate, numberOfChangedFilters]);
-    return _jsxs("div", { className: classNames(["zen-filters-container", className || ""]), children: [memoizedChildren, onPinChange ? pinComponent : null, hasSavedFilters ? _jsx(FiltersSavedChipComponent, {}) : null, filtersChipComponent, chipRemovalComponent] });
+    const memoizedFiltersElements = useMemo(() => _jsxs(_Fragment, { children: [memoizedChildren, hasSavedFilters ? _jsx(FiltersSavedChipComponent, {}) : null, filtersChipComponent, chipRemovalComponent] }), [chipRemovalComponent, filtersChipComponent, hasSavedFilters, memoizedChildren]);
+    return _jsx("div", { className: classNames(["zen-filters-container", isMobile ? "zen-filters-container--mobile" : "", className || ""]), children: isMobile ? _jsx("div", { className: "zen-filters-container__mobile-scroll-wrapper", children: memoizedFiltersElements }) : memoizedFiltersElements });
 };

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

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

package/esm/filters/components/filtersDateInput.js

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