@geotab/zenith 1.24.2 → 1.25.1-beta.0

package/README.md

@@ -40,6 +40,21 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 1.25.1
+
+ * `FiltersBar.DropdownWithCheckbox` has been added
+ * `FormStepper` has been added
+ * Add tooltip for a long title in `Card`
+ * Add property to configure `SidePanel` width
+ * Add translations for tranditional chinese language
+ * Fix `Chart` tooltip in `Modal`
+ * Description can be a `ReactNode` in `PillExpandable`
+ * Allow buttons in `Header` to be in context menu by default
+ * Fix visual appearance of `PillExpandable`
+ * Fix loading option names in pills under the `Dropdown` 
+ * Add `aria-label` to single-select dropdown
+ * Add the property `error` to `TimePicker`
+
 ### 1.24.2
 
  * Add Summary component in Charts

package/dist/card/components/title.js

@@ -15,7 +15,7 @@ const Title = ({ isMobile, link, title, id, icon, iconType, className = "" }) =>
     return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-card-title", driveClassNames || ""]), children: [icon
                 ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-card-title__icon", iconClassName]), children: (0, react_1.createElement)(icon, { size: iconSize }) })
                 : null, link
-                ? (0, jsx_runtime_1.jsxs)("a", { id: id, className: (0, classNames_1.classNames)(["zen-card-title__link"]), href: link, children: [(0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-card-title__link-text"]), children: title }), (0, jsx_runtime_1.jsx)("div", { className: "zen-card-title__link-chevron", children: (0, jsx_runtime_1.jsx)(iconChevronRightSmall_1.IconChevronRightSmall, { size: iconSize, className: "zen-card-title__chevron-icon" }) })] })
-                : (0, jsx_runtime_1.jsx)("span", { id: id, className: (0, classNames_1.classNames)(["zen-card-title__text", (isMobile && !isDrive) ? "zen-card-title__text--mobile" : "", className]), children: title })] });
+                ? (0, jsx_runtime_1.jsxs)("a", { id: id, className: (0, classNames_1.classNames)(["zen-card-title__link"]), href: link, children: [(0, jsx_runtime_1.jsx)("span", { title: title, className: (0, classNames_1.classNames)(["zen-card-title__link-text"]), children: title }), (0, jsx_runtime_1.jsx)("div", { className: "zen-card-title__link-chevron", children: (0, jsx_runtime_1.jsx)(iconChevronRightSmall_1.IconChevronRightSmall, { size: iconSize, className: "zen-card-title__chevron-icon" }) })] })
+                : (0, jsx_runtime_1.jsx)("span", { title: title, id: id, className: (0, classNames_1.classNames)(["zen-card-title__text", (isMobile && !isDrive) ? "zen-card-title__text--mobile" : "", className]), children: title })] });
 };
 exports.Title = Title;

package/dist/commonStyles/zIndex.less

@@ -1,3 +1,5 @@
+// ---- Dropdowns, Tooltips, Popups, Modals ----
+
 @z-index-11100: 11100;
 // Tooltip
 
@@ -46,6 +48,7 @@
 // Modal
 // GroupsFilter
 
+// AdvancedGroupsFilter (inner; part of GroupsFilter)
 // DialogContent (deprecated)
 
 @z-index-11000: 11000;
@@ -57,6 +60,9 @@
 // ModalShield (inner)
 // Dialog shield (deprecated)
 
+@z-index-10999: 10999; // hidden in storybook
+// GroupsFilter (when AdvancedGroupsFilter is open)
+
 @z-index-10007: 10007;
 // SidePanel
 
@@ -65,3 +71,46 @@
 
 @z-index-10005: 10005;
 // Waiting
+
+
+// ---- Non modal/internal items (hidden in storybook) ----
+
+@z-index-5001: 5001;
+// DataGrid (flexibleColumnsReorder, inner)
+
+@z-index-5000: 5000;
+// DataGrid (FlexibleColumnsResizer, inner)
+
+@z-index-1000: 1000;
+// FiltersBar inner items (Drive)
+// PageLayout (deprecated)
+
+@z-index-10: 10;
+// Header
+// Layout (inner items)
+
+@z-index-4: 4;
+// DataGrid inner items
+
+@z-index-3: 3;
+// DataGrid inner items
+
+@z-index-2: 2;
+// Calendar inner items
+// DataGrid inner items
+// BulkActions inner items (internal component)
+// SearchableField inner items (deprecated)
+// SortControl inner items
+
+@z-index-1: 1;
+// Calendar inner items
+// GroupsFilter inner items
+// SearchableField inner items (deprecated)
+// DateRange inner items
+
+
+@z-index--1: -1;
+// BulkActions inner items (internal component)
+// Header inner items
+
+

package/dist/dropdown/dropdown.d.ts

@@ -48,15 +48,39 @@ interface IDropdownBase {
     classNamePopup?: string;
     error?: string;
     sortFn?: (a: IDropdownItem, b: IDropdownItem) => number;
+    checkboxLabel?: string;
 }
 export interface IDropdownValueFullSelection {
     selected: string[];
     isAllSelected: boolean;
 }
+export interface IDropdownWithCheckboxValue {
+    selected: string[];
+    isChecked: boolean;
+}
+export interface IDropdownWithCheckboxSelected {
+    selected: ISelectionItem[];
+    isChecked: boolean;
+}
+export interface IDropdownValueFullSelectionWithCheckbox {
+    selected: string[];
+    isAllSelected: boolean;
+    isChecked: boolean;
+}
+export interface IDropdownPrevValueFullSelection {
+    selected: string[];
+    isAllSelected?: boolean;
+    isChecked?: boolean;
+}
 export interface IDropdownFullSelectedValue {
     selected: ISelectionItem[];
     isAllSelected: boolean;
 }
+export interface IDropdownFullSelectedValueWithCheckbox {
+    selected: ISelectionItem[];
+    isAllSelected: boolean;
+    isChecked: boolean;
+}
 export interface IDropdownFullSelection extends IDropdownBase {
     multiselect: true;
     selectAllButton: true;
@@ -71,6 +95,20 @@ export interface IDropdown extends IDropdownBase {
     selectAllButton?: boolean;
     defaultValue?: string[];
 }
-export declare const Dropdown: React.FC<IDropdown | IDropdownFullSelection>;
+export interface IDropdownWithCheckbox extends Omit<IDropdown, "value" | "onChange" | "getData" | "defaultValue"> {
+    checkboxLabel: string;
+    value: IDropdownWithCheckboxValue;
+    getData: (signal?: AbortSignal, searchValue?: string, isChecked?: boolean) => Promise<IDropdownItem[]>;
+    defaultValue?: IDropdownWithCheckboxValue;
+    onChange: (selected: IDropdownWithCheckboxSelected) => void;
+}
+export interface IDropdownFullSelectionWithCheckbox extends Omit<IDropdownFullSelection, "value" | "onChange" | "getData" | "defaultValue"> {
+    checkboxLabel: string;
+    value: IDropdownValueFullSelectionWithCheckbox;
+    getData: (signal?: AbortSignal, searchValue?: string, isChecked?: boolean) => Promise<IDropdownItem[]>;
+    defaultValue?: IDropdownValueFullSelectionWithCheckbox;
+    onChange: (selected: IDropdownFullSelectedValueWithCheckbox) => void;
+}
+export declare const Dropdown: React.FC<IDropdown | IDropdownFullSelection | IDropdownWithCheckbox | IDropdownFullSelectionWithCheckbox>;
 export declare const TRANSLATIONS: string[];
 export {};

package/dist/dropdown/dropdown.js

@@ -19,36 +19,46 @@ const dropdownPopup_1 = require("./dropdownPopup");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const useDebounce_1 = require("../commonHelpers/hooks/useDebounce");
 const skeletonList_1 = require("../skeletonList/skeletonList");
-const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems, onChange, value, defaultValue, placeholder, dialogAriaLabel, width, isLoading, title, triggerAriaLabel, disabled, inputId, filterName, showCounterPill = true, showSelection, fullWidthTriggerButton, hasApplyButton, searchField = true, multiselect = true, forceSelection = false, selectAllButton = true, getNamedItems, getSelectedItem, buttonType = "secondary", listLimit = 500, alignment = "bottom-left", error, sortFn }) => {
+const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems, onChange, value, defaultValue, placeholder, dialogAriaLabel, width, isLoading, title, triggerAriaLabel, disabled, inputId, filterName, showCounterPill = true, showSelection, fullWidthTriggerButton, hasApplyButton, searchField = true, multiselect = true, forceSelection = false, selectAllButton = true, getNamedItems, getSelectedItem, buttonType = "secondary", listLimit = 500, alignment = "bottom-left", error, sortFn, checkboxLabel }) => {
     var _a;
-    const isFullSelectionMode = (0, react_1.useMemo)(() => !Array.isArray(value), [value]);
-    const [state, dispatchState] = (0, react_1.useReducer)(stateReducer_1.stateReducer, (0, stateReducer_1.getInitialState)(isFullSelectionMode, dataItems || [], isFullSelectionMode ? value.selected : value, defaultValue ? (isFullSelectionMode ? defaultValue.selected : defaultValue) : undefined, isFullSelectionMode ? value.isAllSelected : undefined, defaultValue ? (isFullSelectionMode ? defaultValue.isAllSelected : undefined) : undefined));
+    const isFullSelectionMode = (0, react_1.useMemo)(() => typeof value === "object" &&
+        "selected" in value &&
+        Array.isArray(value.selected) &&
+        "isAllSelected" in value &&
+        typeof value.isAllSelected === "boolean", [value]);
+    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, 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 isMobile = (0, useMobile_1.useMobile)();
     const abortToken = (0, react_1.useRef)(new AbortController());
     const triggerRef = (0, react_1.useRef)(null);
     const comboboxRef = (0, react_1.useRef)(null);
     const inputRef = (0, react_1.useRef)(null);
     const contentRef = (0, react_1.useRef)(null);
-    const prevSelectedIds = (0, react_1.useRef)({ selected: [], isAllSelected: undefined });
-    const prevSelection = (0, react_1.useRef)({ selected: [], isAllSelected: undefined });
+    const prevSelectedIds = (0, react_1.useRef)({ selected: [], isAllSelected: undefined, isChecked: initialInChecked });
+    const prevSelection = (0, react_1.useRef)({ selected: [], isAllSelected: undefined, isChecked: initialInChecked });
     const { translate } = (0, useLanguage_1.useLanguage)();
     const getNamedItemsHasBeenCalled = (0, react_1.useRef)(false);
     const selectedItemsLoader = (0, react_1.useRef)(undefined);
     const previousMapDataItems = (0, react_1.useRef)(!getData && (dataItems === null || dataItems === void 0 ? void 0 : dataItems.length) ? dataItems : []);
+    const prevIsLoading = (0, react_1.useRef)(isLoading);
+    const prevIsChecked = (0, react_1.useRef)(isCheckboxMode ? value.isChecked : undefined);
     const currentAllSelected = (0, react_1.useMemo)(() => (state.isNestedList || !multiselect || !isFullSelectionMode)
         ? undefined : state.isAllSelected, [state.isNestedList, state.isAllSelected, multiselect, isFullSelectionMode]);
+    const currentIsChecked = (0, react_1.useMemo)(() => isCheckboxMode ?
+        value.isChecked : undefined, [isCheckboxMode, value]);
     (0, react_1.useEffect)(() => {
         const timeoutId = setTimeout(() => {
             if (Object.keys(state.groupsMap).length === 0 && getData) {
                 const currentAbort = abortToken.current;
-                getData(currentAbort.signal, undefined).then((data) => {
+                (initialInChecked !== undefined ? getData(currentAbort.signal, undefined, initialInChecked) : getData(currentAbort.signal, undefined)).then((data) => {
                     data.length && dispatchState({ type: stateActionType_1.StateActionType.CreateMap, payload: data });
                     previousMapDataItems.current = [...data];
                 }).catch(errorHandler);
             }
         });
         return () => clearTimeout(timeoutId);
-    }, [getData, errorHandler, state.groupsMap]);
+    }, [getData, errorHandler, state.groupsMap, initialInChecked]);
     (0, react_1.useEffect)(() => {
         const timeoutId = setTimeout(() => {
             if (!getData && dataItems && dataItems.length && !(0, dropdownHelper_1.compareObjectsArrays)(dataItems, previousMapDataItems.current)) {
@@ -59,16 +69,28 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
         return () => clearTimeout(timeoutId);
     }, [dataItems, getData, state.groupsMap]);
     (0, react_1.useEffect)(() => {
-        const defaultSelectedValue = defaultValue ? (isFullSelectionMode ? defaultValue.selected : defaultValue) : [];
+        if (prevIsLoading.current !== isLoading && Object.keys(state.groupsMap).length !== 0) {
+            isLoading === false && dispatchState({ type: stateActionType_1.StateActionType.ShowList, payload: undefined });
+            prevIsLoading.current = isLoading;
+        }
+    }, [isLoading, dataItems, state.groupsMap]);
+    (0, react_1.useEffect)(() => {
+        const defaultSelectedValue = defaultValue ? (isFullSelectionMode || isCheckboxMode ? defaultValue.selected : defaultValue) : [];
         const defaultAllSelectedValue = defaultValue ? (isFullSelectionMode ? defaultValue.isAllSelected : undefined)
             : (isFullSelectionMode ? false : undefined);
+        const defaultIsCheckedValue = defaultValue ?
+            (isCheckboxMode ? defaultValue.isChecked || false : undefined)
+            : (isCheckboxMode ? false : undefined);
+        if (defaultIsCheckedValue !== state.defaultValueIsChecked) {
+            defaultIsCheckedValue !== undefined && dispatchState({ type: stateActionType_1.StateActionType.SetDefaultIsChecked, payload: defaultIsCheckedValue });
+        }
         if ((0, dropdownHelper_1.compareStringsArrays)(defaultSelectedValue, state.defaultValue) && defaultAllSelectedValue === state.defaultValueIsAllSelected) {
             return;
         }
         dispatchState({ type: stateActionType_1.StateActionType.SetDefaultValue, payload: defaultSelectedValue });
         isFullSelectionMode && defaultAllSelectedValue !== state.defaultValueIsAllSelected
             && dispatchState({ type: stateActionType_1.StateActionType.SetDefaultAllSelected, payload: defaultAllSelectedValue });
-    }, [defaultValue, isFullSelectionMode, state.defaultValue, state.defaultValueIsAllSelected]);
+    }, [defaultValue, isCheckboxMode, isFullSelectionMode, state.defaultValue, state.defaultValueIsAllSelected, state.defaultValueIsChecked]);
     const loadSelectedItems = (0, react_1.useCallback)((ids) => {
         if (!getSelectedItem || !ids.size) {
             return;
@@ -175,7 +197,7 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
         handleClose();
     }, [handleClose]);
     const handleApplyClick = (0, react_1.useCallback)(() => {
-        dispatchState({ type: stateActionType_1.StateActionType.SetGlobalState, payload: { selected: state.selectedIds, isAllSelected: state.isAllSelected } });
+        dispatchState({ type: stateActionType_1.StateActionType.SetGlobalState, payload: Object.assign({ selected: state.selectedIds, isAllSelected: state.isAllSelected }, (isCheckboxMode ? { isChecked: state.isChecked } : {})) });
         dispatchState({ type: stateActionType_1.StateActionType.SetIsOpenCombo, payload: false });
         dispatchState({ type: stateActionType_1.StateActionType.SetCurrentId, payload: undefined });
         abortToken.current.abort();
@@ -184,12 +206,18 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
         dispatchState({ type: stateActionType_1.StateActionType.SetDataProblem, payload: (0, dropdownHelper_1.checkIsDataProblem)(state.selectedIds, state.groupsMap) });
         const preparedItems = (0, dropdownHelper_1.prepareSelectedIdsToItems)(state.selectedIds, state.groupsMap, state.groupsMapSelected);
         if (isFullSelectionMode) {
-            onChange({ selected: preparedItems, isAllSelected: state.isAllSelected || false });
+            const newValue = (isCheckboxMode
+                ? { selected: preparedItems, isAllSelected: state.isAllSelected || false, isChecked: state.isChecked }
+                : { selected: preparedItems, isAllSelected: state.isAllSelected || false });
+            onChange(newValue);
         }
         else {
-            onChange(preparedItems);
+            const newValue = isCheckboxMode
+                ? { selected: preparedItems, isChecked: state.isChecked }
+                : preparedItems;
+            onChange(newValue);
         }
-    }, [state.selectedIds, state.groupsMap, state.groupsMapSelected, state.isAllSelected, handleClose, onChange, isFullSelectionMode]);
+    }, [state.selectedIds, state.isAllSelected, state.groupsMap, state.groupsMapSelected, state.isChecked, handleClose, isFullSelectionMode, isCheckboxMode, onChange]);
     const customGetData = (0, react_1.useCallback)((str) => (str && dataItems
         ? Promise.resolve(dataItems.filter(el => { var _a; return (((_a = el.name) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) || "").indexOf(str.trim().toLocaleLowerCase()) > -1; }))
         : Promise.resolve(dataItems || [])), [dataItems]);
@@ -206,73 +234,109 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
         errorHandler(e);
         dispatchState({ type: stateActionType_1.StateActionType.NothingToShow, payload: undefined });
     }, [errorHandler]);
-    const debouncedGetData = (0, useDebounce_1.useDebounce)((signal, searchValue) => getData ? getData(signal, searchValue).then((data) => handleData(data, searchValue)).catch(handleError)
+    const debouncedGetData = (0, useDebounce_1.useDebounce)((signal, searchValue, isChecked) => getData ? (isCheckboxMode ? getData(signal, searchValue, isChecked) : getData(signal, searchValue)).then((data) => handleData(data, searchValue)).catch(handleError)
         : customGetData(searchValue).then((data) => handleData(data, searchValue)).catch(handleError), 200);
-    const controlData = (0, react_1.useCallback)((signal, searchValue) => {
+    const controlData = (0, react_1.useCallback)((signal, searchValue, isChecked) => {
         dispatchState({ type: stateActionType_1.StateActionType.ShowWaiting, payload: undefined });
-        debouncedGetData(signal, searchValue);
+        debouncedGetData(signal, searchValue, isChecked);
     }, [debouncedGetData]);
     (0, react_1.useEffect)(() => {
+        // when change inside
         if (hasApplyButton) {
             return;
         }
-        if ((0, dropdownHelper_1.compareStringsArrays)(prevSelectedIds.current.selected, state.selectedIds) && prevSelectedIds.current.isAllSelected === state.isAllSelected) {
+        const prevIsCheckedValue = isCheckboxMode ?
+            prevSelectedIds.current.isChecked : undefined;
+        if ((0, dropdownHelper_1.compareStringsArrays)(prevSelectedIds.current.selected, state.selectedIds)
+            && prevSelectedIds.current.isAllSelected === state.isAllSelected
+            && prevIsCheckedValue === state.isChecked) {
             return;
         }
-        prevSelectedIds.current = { selected: state.selectedIds, isAllSelected: state.isAllSelected };
-        if ((0, dropdownHelper_1.compareStringsArrays)(state.selectedIds, isFullSelectionMode ? value.selected : value)
-            && state.isAllSelected === (isFullSelectionMode ? value.isAllSelected : undefined)) {
+        prevSelectedIds.current = { selected: state.selectedIds, isAllSelected: state.isAllSelected, isChecked: state.isChecked };
+        if ((0, dropdownHelper_1.compareStringsArrays)(state.selectedIds, isFullSelectionMode || isCheckboxMode ? value.selected : value)
+            && state.isAllSelected === (isFullSelectionMode ? value.isAllSelected : undefined)
+            && state.isChecked === (isCheckboxMode ? value.isChecked : undefined)) {
             return;
         }
         dispatchState({ type: stateActionType_1.StateActionType.SetDataProblem, payload: (0, dropdownHelper_1.checkIsDataProblem)(state.selectedIds, state.groupsMap) });
         const preparedItems = (0, dropdownHelper_1.prepareSelectedIdsToItems)(state.selectedIds, state.groupsMap, state.groupsMapSelected);
         if (isFullSelectionMode) {
-            onChange({ selected: preparedItems, isAllSelected: state.isAllSelected || false });
+            const newValue = (isCheckboxMode
+                ? { selected: preparedItems, isAllSelected: state.isAllSelected || false, isChecked: state.isChecked }
+                : { selected: preparedItems, isAllSelected: state.isAllSelected || false });
+            onChange(newValue);
         }
         else {
-            onChange(preparedItems);
+            const newValue = isCheckboxMode
+                ? { selected: preparedItems, isChecked: state.isChecked }
+                : preparedItems;
+            onChange(newValue);
         }
-    }, [onChange, value, state.selectedIds, state.groupsMapSelected, state.groupsMap, hasApplyButton, state.isAllSelected, isFullSelectionMode]);
+    }, [onChange, value, state.selectedIds, state.groupsMapSelected, state.groupsMap, hasApplyButton, state.isAllSelected, isFullSelectionMode, state.isChecked, isCheckboxMode]);
     (0, react_1.useEffect)(() => {
-        const selectedValue = isFullSelectionMode ? value.selected : value;
+        // when change outside
+        const selectedValue = isFullSelectionMode || isCheckboxMode ? value.selected : value;
         const isAllSelectedValue = isFullSelectionMode ? value.isAllSelected : undefined;
-        if ((0, dropdownHelper_1.compareStringsArrays)(prevSelection.current.selected, selectedValue) && isAllSelectedValue === prevSelection.current.isAllSelected) {
+        const isCheckedValue = isCheckboxMode ? value.isChecked : undefined;
+        if ((0, dropdownHelper_1.compareStringsArrays)(prevSelection.current.selected, selectedValue) && isAllSelectedValue === prevSelection.current.isAllSelected && prevSelection.current.isChecked === isCheckedValue) {
             return;
         }
-        prevSelection.current = { selected: selectedValue, isAllSelected: isAllSelectedValue };
+        prevSelection.current = { selected: selectedValue, isAllSelected: isAllSelectedValue, isChecked: isCheckedValue };
         if ((0, dropdownHelper_1.compareStringsArrays)(hasApplyButton ? state.globalSelectedIds : state.selectedIds, selectedValue)
-            && isAllSelectedValue === (hasApplyButton ? state.globalIsAllSelected : state.isAllSelected)) {
+            && isAllSelectedValue === (hasApplyButton ? state.globalIsAllSelected : state.isAllSelected)
+            && isCheckedValue === (hasApplyButton ? state.globalIsChecked : state.isChecked)) {
             return;
         }
+        // prevSelectedIds.current = { selected: selectedValue, isAllSelected: isAllSelectedValue, isChecked: isCheckedValue };
         hasApplyButton && dispatchState({ type: stateActionType_1.StateActionType.SetGlobalState,
-            payload: { selected: selectedValue, isAllSelected: isAllSelectedValue } });
+            payload: { selected: selectedValue, isAllSelected: isAllSelectedValue, isChecked: isCheckedValue } });
         dispatchState({ type: stateActionType_1.StateActionType.SetState,
             payload: { selected: selectedValue, isAllSelected: isAllSelectedValue } });
-    }, [value, state.selectedIds, state.globalSelectedIds, hasApplyButton, isFullSelectionMode, state.isAllSelected, state.globalIsAllSelected]);
+        isCheckboxMode && isCheckedValue !== undefined && dispatchState({ type: stateActionType_1.StateActionType.SetIsChecked, payload: isCheckedValue });
+    }, [value, state.selectedIds, state.globalSelectedIds, hasApplyButton, isFullSelectionMode, state.isAllSelected, state.globalIsAllSelected, isCheckboxMode,
+        state.globalIsChecked, state.isChecked]);
+    (0, react_1.useEffect)(() => {
+        if (!isCheckboxMode || prevIsChecked.current === undefined) {
+            return;
+        }
+        if (state.isChecked === prevIsChecked.current) {
+            return;
+        }
+        prevIsChecked.current = state.isChecked;
+        const currentAbort = abortToken.current;
+        controlData(currentAbort.signal, state.inputValue, state.isChecked);
+    }, [controlData, state.inputValue, state.isChecked, isCheckboxMode]);
     (0, useEscape_1.useEscape)(triggerRef, handleEscape, state.isOpenCombo);
     const onSearchChange = (0, react_1.useCallback)((event) => {
         const newValue = event ? event.currentTarget.value : "";
         dispatchState({ type: stateActionType_1.StateActionType.SetInputValue, payload: newValue });
         const currentAbort = abortToken.current;
-        controlData(currentAbort.signal, newValue);
-    }, [controlData]);
+        controlData(currentAbort.signal, newValue, state.isChecked);
+    }, [controlData, state.isChecked]);
     const onInputChange = (0, react_1.useCallback)((newValue) => {
         dispatchState({ type: stateActionType_1.StateActionType.SetInputValue, payload: newValue || "" });
         const currentAbort = abortToken.current;
-        controlData(currentAbort.signal, newValue);
-    }, [controlData]);
+        controlData(currentAbort.signal, newValue, state.isChecked);
+    }, [controlData, state.isChecked]);
     const containerClassName = (0, classNames_1.classNames)([
         "zen-dropdown",
         "zen-dropdown__container",
         className || ""
     ]);
+    const handleCheckboxChange = (0, react_1.useCallback)((e) => {
+        const isChecked = e.target.checked;
+        dispatchState({ type: stateActionType_1.StateActionType.SetIsChecked, payload: isChecked });
+        prevIsChecked.current = isChecked;
+        const currentAbort = abortToken.current;
+        controlData(currentAbort.signal, state.inputValue, isChecked);
+    }, [controlData, state.inputValue]);
     const handleTriggerClick = (0, react_1.useCallback)((newVal) => {
         const currentAbort = abortToken.current;
         dispatchState({ type: stateActionType_1.StateActionType.SetCurrentId, payload: undefined });
         dispatchState({ type: stateActionType_1.StateActionType.SetIsOpenCombo, payload: newVal });
-        newVal && controlData(currentAbort.signal, state.inputValue);
+        newVal && controlData(currentAbort.signal, state.inputValue, state.isChecked);
         !newVal && dispatchState({ type: stateActionType_1.StateActionType.SetInputValue, payload: "" });
-    }, [controlData, state.inputValue]);
+    }, [controlData, state.inputValue, state.isChecked]);
     const handleReadyForFocus = (0, react_1.useCallback)((isCurrentOpen) => {
         var _a;
         if (!state.showList) {
@@ -305,15 +369,16 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
         }
     }, [state.isOpenCombo, state.currentId, state.showList, searchField]);
     (0, react_1.useEffect)(() => {
-        if ((Object.keys(state.groupsMap).length === 0 && Object.keys(state.groupsMapSelected).length === 0) || !getNamedItems || getNamedItemsHasBeenCalled.current) {
-            return undefined;
+        const shouldExit = !getNamedItems ||
+            (Object.keys(state.groupsMap).length === 0 && Object.keys(state.groupsMapSelected).length === 0) ||
+            getNamedItemsHasBeenCalled.current ||
+            state.groupsMapSelected.size === 0;
+        if (shouldExit) {
+            return;
         }
         getNamedItemsHasBeenCalled.current = true;
-        const timeoutId = setTimeout(() => {
-            getNamedItems((items) => (0, dropdownHelper_1.prepareSelectedIdsToItems)(items, state.groupsMap, state.groupsMapSelected));
-        }, 200);
-        return () => clearTimeout(timeoutId);
-    }, [getNamedItems, state.groupsMap, state.groupsMapSelected]);
+        getNamedItems((items) => (0, dropdownHelper_1.prepareSelectedIdsToItems)(items, state.groupsMap, state.groupsMapSelected));
+    }, [getNamedItems, state.groupsMap, state.groupsMapSelected, state.namelessIds]);
     (0, react_1.useEffect)(() => {
         if (state.hasDataProblem && multiselect && state.isNestedList) {
             // eslint-disable-next-line max-len
@@ -332,13 +397,15 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
             return true;
         }
         const isStringsTheSame = (0, dropdownHelper_1.compareStringsArrays)(state.selectedIds, state.defaultValue);
-        if (currentAllSelected !== undefined && state.defaultValueIsAllSelected !== undefined && state.defaultValueIsAllSelected) {
+        const isCheckedEqualDefault = currentIsChecked !== undefined ? currentIsChecked === state.defaultValueIsChecked : true;
+        if (currentAllSelected !== undefined && state.defaultValueIsAllSelected !== undefined && state.defaultValueIsAllSelected && isCheckedEqualDefault) {
             return currentAllSelected === state.defaultValueIsAllSelected;
         }
-        return currentAllSelected !== undefined ? state.defaultValueIsAllSelected === currentAllSelected && isStringsTheSame : isStringsTheSame;
-    }, [currentAllSelected, forceSelection, multiselect, state.defaultValue, state.defaultValueIsAllSelected, state.selectedIds]);
+        return currentAllSelected !== undefined ? state.defaultValueIsAllSelected === currentAllSelected && isStringsTheSame && isCheckedEqualDefault : isStringsTheSame && isCheckedEqualDefault;
+    }, [currentAllSelected, currentIsChecked, forceSelection, multiselect, state.defaultValue, state.defaultValueIsAllSelected, state.defaultValueIsChecked, state.selectedIds]);
     const memoizedIsApplyButtonDisabled = (0, react_1.useMemo)(() => (0, dropdownHelper_1.compareStringsArrays)(state.globalSelectedIds, state.selectedIds)
-        && (isFullSelectionMode ? state.globalIsAllSelected === state.isAllSelected : true), [isFullSelectionMode, state.globalIsAllSelected, state.globalSelectedIds, state.isAllSelected, state.selectedIds]);
+        && (isFullSelectionMode ? state.globalIsAllSelected === state.isAllSelected : true)
+        && (isCheckboxMode ? state.globalIsChecked === state.isChecked : true), [isCheckboxMode, isFullSelectionMode, state.globalIsAllSelected, state.globalIsChecked, state.globalSelectedIds, state.isAllSelected, state.isChecked, state.selectedIds]);
     const countSelected = (0, react_1.useMemo)(() => {
         var _a, _b;
         if (hasApplyButton && state.globalIsAllSelected || !hasApplyButton && state.isAllSelected) {
@@ -363,7 +430,7 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
         }
         if (state.showEmptyList) {
             const isClearButtonDisabled = (0, dropdownHelper_1.compareStringsArrays)(state.selectedIds, state.defaultValue);
-            return (0, jsx_runtime_1.jsx)(dropdownList_1.EmptyList, { width: currentWidth, onClearClick: handleClearClick, onCancelClick: handleCancelClick, onApplyClick: handleApplyClick, hasApplyButton: hasApplyButton, isApplyDisabled: (0, dropdownHelper_1.compareStringsArrays)(state.globalSelectedIds, state.selectedIds), isClearButtonDisabled: isClearButtonDisabled, isWithFooter: Object.keys(state.groupsMap).length === 0 && ((!hasApplyButton && !isClearButtonDisabled) || hasApplyButton || false) });
+            return (0, jsx_runtime_1.jsx)(dropdownList_1.EmptyList, { width: currentWidth, onClearClick: handleClearClick, onCancelClick: handleCancelClick, onApplyClick: handleApplyClick, hasApplyButton: hasApplyButton, isApplyDisabled: (0, dropdownHelper_1.compareStringsArrays)(state.globalSelectedIds, state.selectedIds), isClearButtonDisabled: isClearButtonDisabled, isWithFooter: memoizedWithFooter && Object.keys(state.groupsMap).length === 0 && ((!hasApplyButton && !isClearButtonDisabled) || hasApplyButton || false) });
         }
         if (state.showList) {
             const isSearchMode = state.inputValue && !state.currentId;
@@ -379,18 +446,18 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
                     || isSearchMode !== "" && state.isNestedList
                         && (0, dropdownHelper_1.isAllItemsHasOneParent)(state.listData.filter(el => el.id !== groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID), 
                         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                        (((_c = state.groupsMap[groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID]) === null || _c === void 0 ? void 0 : _c.children) || []).map(el => el.id)), isClearButtonDisabled: memoizedIsClearButtonDisabled, isWithFooter: memoizedWithFooter && !isMobile, isMobile: isMobile });
+                        (((_c = state.groupsMap[groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID]) === null || _c === void 0 ? void 0 : _c.children) || []).map(el => el.id)), isClearButtonDisabled: memoizedIsClearButtonDisabled, isWithFooter: memoizedWithFooter && !isMobile, isMobile: isMobile, handleCheckboxChange: isCheckboxMode && !isMobile ? handleCheckboxChange : undefined, checkboxLabel: checkboxLabel, isChecked: state.isChecked });
         }
         return null;
-    }, [state, isLoading, translate, handleClearClick, handleCancelClick, handleApplyClick, hasApplyButton, sortFn, listLimit, multiselect, handleBackButtonClick,
-        handleSelectAllInSearch, handleSelectAllClick, handleSelect, handleChangeCurrentId, handleSingleSelection, isMobile, filterName, forceSelection, width, selectAllButton,
-        memoizedIsApplyButtonDisabled, memoizedIsClearButtonDisabled, memoizedWithFooter, currentAllSelected]);
+    }, [state, isLoading, handleClearClick, handleCancelClick, handleApplyClick, hasApplyButton, translate, sortFn, listLimit, multiselect, currentAllSelected,
+        handleBackButtonClick, handleSelectAllInSearch, handleSelectAllClick, handleSelect, handleChangeCurrentId, handleSingleSelection, isMobile, filterName, forceSelection,
+        width, selectAllButton, memoizedIsApplyButtonDisabled, memoizedIsClearButtonDisabled, memoizedWithFooter, checkboxLabel, isCheckboxMode, handleCheckboxChange]);
     const currentStringFromSelected = isFullSelectionMode && hasApplyButton && state.globalIsAllSelected ||
         isFullSelectionMode && !hasApplyButton && state.isAllSelected ? (0, dropdownHelper_1.getStringFromAllSelected)(state.groupsMap, translate)
         : (0, dropdownHelper_1.getStringFromSelected)(hasApplyButton ? state.globalSelectedIds : state.selectedIds, state.groupsMapSelected, translate);
     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: [(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, children: getPopupContent })] });
+    return (0, jsx_runtime_1.jsxs)("div", { className: containerClassName, ref: comboboxRef, children: [(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, children: getPopupContent })] });
 };
 exports.Dropdown = Dropdown;
 exports.TRANSLATIONS = [

package/dist/dropdown/dropdownList.d.ts

@@ -34,6 +34,9 @@ export interface IDropdownList extends IZenComponentProps {
     isClearButtonDisabled?: boolean;
     forceSelection?: boolean;
     isMobile: boolean;
+    handleCheckboxChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    checkboxLabel?: string;
+    isChecked?: boolean;
 }
 interface IDropdownEmptyList extends Pick<IDropdownList, "translate" | "className" | "width" | "onClearClick" | "onApplyClick" | "onCancelClick" | "hasApplyButton" | "isApplyDisabled" | "isClearButtonDisabled" | "isWithFooter"> {
 }

package/dist/dropdown/dropdownList.js

@@ -37,13 +37,14 @@ const checkboxState_1 = require("../checkbox/checkboxState");
 const useDrive_1 = require("../utils/theme/useDrive");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const useLanguage_1 = require("../utils/localization/useLanguage");
+const checkbox_1 = require("../checkbox/checkbox");
 const EmptyList = ({ className, width, onClearClick, onApplyClick, onCancelClick, hasApplyButton, isApplyDisabled, isClearButtonDisabled, isWithFooter }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const styleWidth = width ? { style: { width: `${width}px` } } : {};
     return (0, jsx_runtime_1.jsxs)("div", Object.assign({}, styleWidth, { className: (0, classNames_1.classNames)(["zen-dropdown-list__container", className || ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-list__container--empty", children: translate("No data") }), isWithFooter ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-dropdown-list__footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onClearClick, disabled: isClearButtonDisabled, className: "zen-dropdown-list__clear-button", type: buttonType_1.ButtonType.Tertiary, title: translate("Clear"), children: translate("Clear") }), hasApplyButton && (0, jsx_runtime_1.jsxs)("div", { className: "zen-dropdown-list__button-group", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onCancelClick, className: "zen-dropdown-list__cancel-button", title: translate("Cancel"), children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onApplyClick, type: buttonType_1.ButtonType.Primary, disabled: isApplyDisabled, className: "zen-dropdown-list__apply-button", title: translate("Apply"), children: translate("Apply") })] })] }) : null] }));
 };
 exports.EmptyList = EmptyList;
-const DropdownList = ({ onBackButtonClick, onSelectAllClick, onClearClick, onApplyClick, onCancelClick, onChange, onSelect, onSingleSelect, listData, isAllSelected, backButtonName, width, minWidth, isSelectAllButtonDisable, hasSelectAllButton, filterName, isMultiselect, hasApplyButton, isApplyDisabled, isClearButtonDisabled, activeValue, forceSelection, isWithFooter, isMobile }) => {
+const DropdownList = ({ onBackButtonClick, onSelectAllClick, onClearClick, onApplyClick, onCancelClick, onChange, onSelect, onSingleSelect, listData, isAllSelected, backButtonName, width, minWidth, isSelectAllButtonDisable, hasSelectAllButton, filterName, isMultiselect, hasApplyButton, isApplyDisabled, isClearButtonDisabled, activeValue, forceSelection, isWithFooter, isMobile, handleCheckboxChange, checkboxLabel, isChecked }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const isDrive = (0, useDrive_1.useDrive)();
     const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-dropdown-list");
@@ -86,9 +87,9 @@ const DropdownList = ({ onBackButtonClick, onSelectAllClick, onClearClick, onApp
             });
             return values;
         };
-        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: "", id: listId, multiselect: false, selectItemOnFocus: false, items: listData, forceSelection: forceSelection, value: createValue(listData, activeValue) }) });
-    }, [isMultiselect, listData, handleChange, handleClick, handleSingleChange, 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, 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.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] }));
 };
 exports.DropdownList = DropdownList;
 exports.TRANSLATIONS = [

package/dist/dropdown/dropdownPopup.d.ts

@@ -25,5 +25,8 @@ export interface IDropdownPopup extends IZenComponentProps {
     inputRef: React.MutableRefObject<HTMLInputElement>;
     contentRef: React.RefObject<HTMLDivElement>;
     onReadyForFocus?: (isCurrentOpen: boolean) => void;
+    handleCheckboxChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    checkboxLabel?: string;
+    isChecked?: boolean;
 }
 export declare const DropdownPopup: React.FC<IDropdownPopup>;

package/dist/dropdown/dropdownPopup.js

@@ -11,13 +11,14 @@ const classNames_1 = require("../commonHelpers/classNames/classNames");
 const searchInput_1 = require("../searchInput/searchInput");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const footerButtons_1 = require("../footerButtons/footerButtons");
-const DropdownPopup = ({ alignment, triggerRef, classNamePopup, isMobile, inputValue, dialogAriaLabel, disabled, filterName, handleApplyClick, handleClearClick, handleTriggerClick, onInputChange, hasApplyButton, inputId, isClearButtonDisabled, isWithFooter, placeholder, searchField, isApplyButtonDisabled, isOpenCombo, inputRef, contentRef, children, onReadyForFocus }) => {
+const checkbox_1 = require("../checkbox/checkbox");
+const DropdownPopup = ({ alignment, triggerRef, classNamePopup, isMobile, inputValue, dialogAriaLabel, disabled, filterName, handleApplyClick, handleClearClick, handleTriggerClick, onInputChange, hasApplyButton, inputId, isClearButtonDisabled, isWithFooter, placeholder, searchField, isApplyButtonDisabled, isOpenCombo, inputRef, contentRef, children, onReadyForFocus, handleCheckboxChange, checkboxLabel, isChecked }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const triggerId = (0, react_1.useId)();
     const memoizedHandleHide = (0, react_1.useCallback)(() => {
         handleTriggerClick(false);
     }, [handleTriggerClick]);
-    const memoizedMobileContent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchField ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-mobile-sheet__search-container", children: (0, jsx_runtime_1.jsx)(searchInput_1.SearchInput, { className: "zen-dropdown-mobile-sheet__search", onChange: onInputChange, value: inputValue || "", ref: inputRef, id: inputId || triggerId, disabled: disabled, placeholder: placeholder || translate("Filter by group") }) }) : null, (0, jsx_runtime_1.jsx)("div", { ref: contentRef, children: children })] }), [children, contentRef, disabled, inputId, inputRef, inputValue, onInputChange, placeholder, searchField, translate, triggerId]);
+    const memoizedMobileContent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchField ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-mobile-sheet__search-container", children: (0, jsx_runtime_1.jsx)(searchInput_1.SearchInput, { className: "zen-dropdown-mobile-sheet__search", onChange: onInputChange, value: inputValue || "", ref: inputRef, id: inputId || triggerId, disabled: disabled, placeholder: placeholder || translate("Filter by group") }) }) : null, handleCheckboxChange ? (0, jsx_runtime_1.jsx)("div", { className: "zen-dropdown-mobile-sheet__checkbox-container", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: isChecked, onChange: handleCheckboxChange, children: checkboxLabel }) }) : null, (0, jsx_runtime_1.jsx)("div", { ref: contentRef, children: children })] }), [checkboxLabel, children, contentRef, disabled, handleCheckboxChange, inputId, inputRef, inputValue, isChecked, onInputChange, placeholder, searchField, translate, triggerId]);
     const memoizedMobileFooter = (0, react_1.useMemo)(() => {
         if (!isWithFooter) {
             return null;

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

@@ -15,6 +15,7 @@ interface IPayloadSingleSelectionAction {
 interface IStateActionPayload {
     selected: string[];
     isAllSelected?: boolean;
+    isChecked?: boolean;
 }
 interface ISetStateAction {
     type: StateActionType.SetState;
@@ -116,9 +117,17 @@ interface ISetPendingStateAction {
     type: StateActionType.SetPendingState;
     payload: boolean;
 }
+interface ISetDefaultIsCheckedAction {
+    type: StateActionType.SetDefaultIsChecked;
+    payload: boolean;
+}
+interface ISetIsCheckedAction {
+    type: StateActionType.SetIsChecked;
+    payload: boolean;
+}
 interface IUpdateNamelessItemsAction {
     type: StateActionType.UpdateNamelessItems;
     payload: undefined;
 }
-export type TStateAction = ICreateMapAction | ISetStateAction | ISetGlobalStateAction | ISetListDataAction | ISetIsOpenComboAction | IShowAction | IShowWaitingAction | IShowEmptyListAction | IShowListAction | ISetInputValueAction | INothingToShowAction | ISetCurrentIdAction | IChangeSelectionAction | IChangeSingleSelectionAction | ISelectAllChildrenAction | IDeselectAllChildrenAction | IResetSelection | IResetStateToGlobal | ISetDataProblemAction | ISetDefaultValueAction | IUpdateSelectedItemsAction | ISetPendingStateAction | IUpdateNamelessItemsAction | IToggleValueForAllSelectedAction | IDeselectItemsFromAllSelectedAction | ISetDefaultAllSelectedAction;
+export type TStateAction = ICreateMapAction | ISetStateAction | ISetGlobalStateAction | ISetListDataAction | ISetIsOpenComboAction | IShowAction | IShowWaitingAction | IShowEmptyListAction | IShowListAction | ISetInputValueAction | INothingToShowAction | ISetCurrentIdAction | IChangeSelectionAction | IChangeSingleSelectionAction | ISelectAllChildrenAction | IDeselectAllChildrenAction | IResetSelection | IResetStateToGlobal | ISetDataProblemAction | ISetDefaultValueAction | IUpdateSelectedItemsAction | ISetPendingStateAction | IUpdateNamelessItemsAction | IToggleValueForAllSelectedAction | IDeselectItemsFromAllSelectedAction | ISetDefaultAllSelectedAction | ISetIsCheckedAction | ISetIsCheckedAction | ISetDefaultIsCheckedAction;
 export {};