@geotab/zenith 1.26.4 → 1.26.5-beta.1

package/dist/dropdown/dropdownHelper.d.ts

@@ -6,7 +6,7 @@ export declare const getGroupsTreeItem: (stateObj: IDropdownState, itemId: strin
 export declare const getListDataWithDisabled: (listData: IDropdownItem[], isIgnoreDisabled: boolean) => IDropdownItem[];
 export declare const isAllChildrenSelected: (stateObj: IDropdownState, currentId?: string) => boolean;
 export declare const isEveryItemSelected: (listData: IDropdownItem[], selectedItems: string[]) => boolean;
-export declare const getDataForChange: (listData: IDropdownItem[], selectedItems: string[], isDeselect: boolean) => IDropdownItem[];
+export declare const getDataForChange: (listData: IDropdownItem[], selectedItems: string[], isDeselect: boolean) => string[];
 export declare const isAllItemsHasOneParent: (listData: IDropdownItem[], childrenArr: string[]) => boolean;
 export declare function prepareComboOptionsForList(actionListData: Set<string>, translate: (s: string) => string, options: IDropdownItem[], getSelectedFn: () => string[], getSelectedChildFn: (optionId: any) => string[], isFlatList: boolean, getTitle?: (itemId: string) => string, isAllSelected?: boolean): ICheckboxListWithActionOption[];
 export declare const createOptions: (stateObj: IDropdownState, translate: (s: string) => string, listItem: IDropdownItem[], isAllSelected?: boolean) => ICheckboxListWithActionOption[];

package/dist/dropdown/dropdownHelper.js

@@ -29,10 +29,14 @@ const isEveryItemSelected = (listData, selectedItems) => {
 exports.isEveryItemSelected = isEveryItemSelected;
 const getDataForChange = (listData, selectedItems, isDeselect) => {
     const selectedItemsSet = new Set(selectedItems);
-    if (isDeselect) {
-        return listData.filter(el => selectedItemsSet.has(el.id));
+    const result = [];
+    for (const item of listData) {
+        const isSelected = selectedItemsSet.has(item.id);
+        if ((isDeselect && isSelected) || (!isDeselect && !isSelected)) {
+            result.push(item.id);
+        }
     }
-    return listData.filter(el => !selectedItemsSet.has(el.id));
+    return result;
 };
 exports.getDataForChange = getDataForChange;
 const isAllItemsHasOneParent = (listData, childrenArr) => {

package/dist/dropdown/dropdownList.d.ts

@@ -39,6 +39,7 @@ export interface IDropdownList extends IZenComponentProps {
     isChecked?: boolean;
 }
 interface IDropdownEmptyList extends Pick<IDropdownList, "translate" | "className" | "width" | "onClearClick" | "onApplyClick" | "onCancelClick" | "hasApplyButton" | "isApplyDisabled" | "isClearButtonDisabled" | "isWithFooter"> {
+    hasError: boolean;
 }
 export declare const EmptyList: React.FC<IDropdownEmptyList>;
 export declare const DropdownList: React.FC<IDropdownList>;

package/dist/dropdown/dropdownList.js

@@ -38,10 +38,10 @@ 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 EmptyList = ({ className, width, onClearClick, onApplyClick, onCancelClick, hasApplyButton, isApplyDisabled, isClearButtonDisabled, isWithFooter, hasError }) => {
     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] }));
+    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(hasError ? "Error Loading Items" : "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, handleCheckboxChange, checkboxLabel, isChecked }) => {

package/dist/dropdown/dropdownPopup.d.ts

@@ -28,5 +28,6 @@ export interface IDropdownPopup extends IZenComponentProps {
     handleCheckboxChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     checkboxLabel?: string;
     isChecked?: boolean;
+    isSearchInPopup?: boolean;
 }
 export declare const DropdownPopup: React.FC<IDropdownPopup>;

package/dist/dropdown/dropdownPopup.js

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

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

@@ -4,6 +4,10 @@ interface IPayloadSelectionAction {
     value: boolean;
     itemId: string;
 }
+interface IPayloadBulkSelectionAction {
+    value: boolean;
+    itemsIds: string[];
+}
 interface IPayloadShowAction {
     show: "showWaiting" | "showEmptyList" | "showList";
     value: boolean;
@@ -69,6 +73,10 @@ interface IChangeSelectionAction {
     type: StateActionType.ChangeSelection;
     payload: IPayloadSelectionAction;
 }
+interface IChangeBulkSelectionAction {
+    type: StateActionType.ChangeBulkSelection;
+    payload: IPayloadBulkSelectionAction;
+}
 interface IChangeSingleSelectionAction {
     type: StateActionType.ChangeSingleSelection;
     payload: IPayloadSingleSelectionAction;
@@ -129,5 +137,5 @@ 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 | ISetIsCheckedAction | ISetIsCheckedAction | ISetDefaultIsCheckedAction;
+export type TStateAction = ICreateMapAction | ISetStateAction | ISetGlobalStateAction | ISetListDataAction | ISetIsOpenComboAction | IShowAction | IShowWaitingAction | IShowEmptyListAction | IShowListAction | ISetInputValueAction | INothingToShowAction | ISetCurrentIdAction | IChangeSelectionAction | IChangeBulkSelectionAction | IChangeSingleSelectionAction | ISelectAllChildrenAction | IDeselectAllChildrenAction | IResetSelection | IResetStateToGlobal | ISetDataProblemAction | ISetDefaultValueAction | IUpdateSelectedItemsAction | ISetPendingStateAction | IUpdateNamelessItemsAction | IToggleValueForAllSelectedAction | IDeselectItemsFromAllSelectedAction | ISetDefaultAllSelectedAction | ISetIsCheckedAction | ISetIsCheckedAction | ISetDefaultIsCheckedAction;
 export {};

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

@@ -5,6 +5,7 @@ export declare enum StateActionType {
     SetGlobalState = "SET_GLOBAL_STATE",
     SetListData = "SET_LIST_DATA",
     ChangeSelection = "CHANGE_SELECTION",
+    ChangeBulkSelection = "CHANGE_BULK_SELECTION",
     ChangeSingleSelection = "CHANGE_SINGLE_SELECTION",
     DeselectAllChildren = "DESELECT_ALL_CHILDREN",
     SelectAllChildren = "SELECT_ALL_CHILDREN",

package/dist/dropdown/stateReducer/stateActionType.js

@@ -9,6 +9,7 @@ var StateActionType;
     StateActionType["SetGlobalState"] = "SET_GLOBAL_STATE";
     StateActionType["SetListData"] = "SET_LIST_DATA";
     StateActionType["ChangeSelection"] = "CHANGE_SELECTION";
+    StateActionType["ChangeBulkSelection"] = "CHANGE_BULK_SELECTION";
     StateActionType["ChangeSingleSelection"] = "CHANGE_SINGLE_SELECTION";
     StateActionType["DeselectAllChildren"] = "DESELECT_ALL_CHILDREN";
     StateActionType["SelectAllChildren"] = "SELECT_ALL_CHILDREN";

package/dist/dropdown/stateReducer/stateReducer.js

@@ -229,6 +229,41 @@ function stateReducer(state, action) {
             });
             return Object.assign(Object.assign({}, state), { selectedIds: Array.from(currentSelectedIds) });
         }
+        case stateActionType_1.StateActionType.ChangeBulkSelection: {
+            const { itemsIds, value } = payload;
+            const currentSelectedIds = new Set(state.selectedIds);
+            const parentsToProcess = new Set();
+            const childrenToProcess = new Set();
+            itemsIds.forEach(itemId => {
+                var _a, _b, _c, _d;
+                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;
+                    }
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                    const currentChild = (0, stateReducerHelper_1.getChildList)((_d = state.groupsMap[itemId]) === null || _d === void 0 ? void 0 : _d.children);
+                    currentChild.forEach(childId => childrenToProcess.add(childId.id));
+                }
+                else {
+                    currentSelectedIds.delete(itemId);
+                }
+            });
+            childrenToProcess.forEach(childId => currentSelectedIds.delete(childId));
+            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) });
+        }
         case stateActionType_1.StateActionType.SelectAllChildren: {
             const currentEl = state.groupsMap[payload];
             const newSelected = new Set(state.selectedIds);

package/dist/dropdown/useDropdownState.d.ts

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

package/dist/dropdown/useDropdownState.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDropdownState = void 0;
+const react_1 = require("react");
+const useDropdownState = (withCheckbox) => {
+    const [search, setSearch] = (0, react_1.useState)("");
+    const [checked, setChecked] = (0, react_1.useState)(false);
+    return Object.assign({ search, setSearch }, (withCheckbox ? { checked, setChecked } : {}));
+};
+exports.useDropdownState = useDropdownState;

package/dist/filters/components/filtersChip.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { IFiltersItem } from "./filtersItem";
+import { IChip } from "../../chip/chip";
+export interface IFiltersChipProps extends Pick<IChip, "disabled" | "icon" | "status" | "readonly"> {
+}
+export interface IFiltersChip extends Omit<IFiltersItem<boolean>, "defaultState">, IFiltersChipProps {
+}
+export declare const FiltersChipDisplayName = "FiltersChip";
+export declare const FiltersChip: React.FC<IFiltersChip>;

package/dist/filters/components/filtersChip.js

@@ -0,0 +1,28 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FiltersChip = exports.FiltersChipDisplayName = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const chip_1 = require("../../chip/chip");
+const chipStatusProvider_1 = require("../../chip/chipStatusProvider");
+exports.FiltersChipDisplayName = "FiltersChip";
+const FiltersChip = (_a) => {
+    var { className, name, state, onChange: onChangeState, id } = _a, componentProps = __rest(_a, ["className", "name", "state", "onChange", "id"]);
+    const chipStatus = (0, chipStatusProvider_1.useChipStatus)();
+    const component = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(chip_1.Chip, Object.assign({ id: id }, componentProps, { className: (0, classNames_1.classNames)(["zen-filters-chip", className || ""]), active: state, status: state ? chipStatus || undefined : undefined, onChange: () => onChangeState(!state), children: name })), [id, componentProps, className, state, chipStatus, name, onChangeState]);
+    return component;
+};
+exports.FiltersChip = FiltersChip;
+exports.FiltersChip.displayName = exports.FiltersChipDisplayName;

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

@@ -0,0 +1,12 @@
+import { ReactElement } from "react";
+import { IZenComponentProps } from "../../commonHelpers/zenComponent";
+import React from "react";
+export interface IFiltersContainer extends IZenComponentProps {
+    isPinned?: boolean;
+    onPinChange?: (isPinned: boolean) => void;
+    filtersClickHandler: () => void;
+    hasSavedFilters: boolean;
+    filtersForCalculation: ReactElement[];
+    onSaveFilters?: (filterName: string, filterState?: Record<string, unknown>) => void;
+}
+export declare const FiltersContainer: React.FC<IFiltersContainer>;

package/dist/filters/components/filtersContainer.js

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FiltersContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const chip_1 = require("../../chip/chip");
+const react_2 = __importDefault(require("react"));
+const iconFilter_1 = require("../../icons/iconFilter");
+const iconPin2_1 = require("../../icons/iconPin2");
+const filtersHelper_1 = require("../filtersHelper");
+const filtersSavedChipComponent_1 = require("./filtersSavedChipComponent");
+const iconClose_1 = require("../../icons/iconClose");
+const chipStatusProvider_1 = require("../../chip/chipStatusProvider");
+const useLanguage_1 = require("../../utils/localization/useLanguage");
+const FiltersContainer = ({ className, isPinned = false, onPinChange, filtersClickHandler, hasSavedFilters, filtersForCalculation, children }) => {
+    const chipStatus = (0, chipStatusProvider_1.useChipStatus)();
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    const numberOfChangedFilters = (0, react_1.useMemo)(() => {
+        const suppressedFilters = new Set();
+        filtersForCalculation.forEach(filter => {
+            const inhibited = (filter.props).inhibit;
+            if (inhibited) {
+                inhibited.forEach((id) => suppressedFilters.add(id));
+            }
+        });
+        const filteredState = (0, filtersHelper_1.getFiltersState)(filtersForCalculation.filter(f => !suppressedFilters.has(f.props.id)));
+        return (0, filtersHelper_1.getNumberOfChangedFilters)(filteredState);
+    }, [filtersForCalculation]);
+    const filtersChipRef = (0, react_1.useRef)(null);
+    const handlePinChange = (0, react_1.useCallback)((newIsPinned) => {
+        onPinChange && onPinChange(newIsPinned);
+    }, [onPinChange]);
+    const pinComponent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(chip_1.Chip, { active: isPinned, status: isPinned ? "accent" : undefined, onChange: handlePinChange, icon: iconPin2_1.IconPin2, children: isPinned ? "" : "+" }), [isPinned, handlePinChange]);
+    const filtersChipComponent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(chip_1.Chip, { quantity: numberOfChangedFilters, isOpen: false, status: numberOfChangedFilters > 0 ? chipStatus || "active" : undefined, onClick: filtersClickHandler, icon: iconFilter_1.IconFilter, title: translate("All Filters"), triggerRef: filtersChipRef, children: "+" }), [numberOfChangedFilters, chipStatus, filtersClickHandler, translate]);
+    const childrenSignature = (0, react_1.useMemo)(() => {
+        const childrenArray = react_2.default.Children.toArray(children).filter(Boolean);
+        return childrenArray
+            .map(child => {
+            if (!react_2.default.isValidElement(child)) {
+                return "invalid";
+            }
+            const childId = child.props.id || "no-id";
+            const state = child.props.state;
+            const defaultState = child.props.defaultState;
+            const childPropsQuery = JSON.stringify(child.props.fetchState || {});
+            const stateHash = (0, filtersHelper_1.createStateHash)(state);
+            const defaultStateHash = (0, filtersHelper_1.createStateHash)(defaultState);
+            const propsHash = (0, filtersHelper_1.createPropsHash)(child.props);
+            return `${childId}|${stateHash}|${defaultStateHash}|${propsHash}|${childPropsQuery}`;
+        })
+            .join("||");
+    }, [children]);
+    const memoizedChildren = (0, react_1.useMemo)(() => (0, filtersHelper_1.stabilizeChildrenWithId)(children).filter(Boolean), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [childrenSignature]);
+    const handleRemovalClick = (0, react_1.useCallback)(() => {
+        const defaultState = (0, filtersHelper_1.createStateObject)(filtersForCalculation, "defaultState");
+        filtersForCalculation.forEach((child) => {
+            var _a, _b;
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            if (child) {
+                const childDefaultState = defaultState[child.props.id];
+                (_b = (_a = child.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, childDefaultState);
+            }
+        });
+        onPinChange === null || onPinChange === void 0 ? void 0 : onPinChange(false);
+    }, [filtersForCalculation, onPinChange]);
+    const chipRemovalComponent = (0, react_1.useMemo)(() => numberOfChangedFilters ?
+        (0, jsx_runtime_1.jsx)(chip_1.Chip, { title: translate("Clear"), className: "zen-filters-container__removal-chip", active: false, status: isPinned ? "accent" : undefined, onChange: handleRemovalClick, icon: iconClose_1.IconClose })
+        : null, [isPinned, handleRemovalClick, translate, numberOfChangedFilters]);
+    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-filters-container", className || ""]), children: [memoizedChildren, onPinChange ? pinComponent : null, hasSavedFilters ? (0, jsx_runtime_1.jsx)(filtersSavedChipComponent_1.FiltersSavedChipComponent, {}) : null, filtersChipComponent, chipRemovalComponent] });
+};
+exports.FiltersContainer = FiltersContainer;

package/dist/filters/components/filtersCustom.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { IFiltersItem } from "./filtersItem";
+import { IIcon } from "../../icons/icon";
+export interface IFiltersCustom<T> extends IFiltersItem<T> {
+    chipIcon?: React.FC<IIcon>;
+    chipName?: string;
+    children?: React.ReactNode;
+}
+export declare const FiltersCustomDisplayName = "FiltersCustom";
+export declare const FiltersCustom: {
+    <T = unknown>({ state, defaultState, name, chipIcon, chipName, id }: IFiltersCustom<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/filters/components/filtersCustom.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FiltersCustom = exports.FiltersCustomDisplayName = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const iconFilter_1 = require("../../icons/iconFilter");
+const chip_1 = require("../../chip/chip");
+exports.FiltersCustomDisplayName = "FiltersCustom";
+const FiltersCustom = ({ state, defaultState, name, chipIcon, chipName, id }) => {
+    const triggerRef = (0, react_1.useRef)(null);
+    const chipComponent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(chip_1.Chip, { status: state === defaultState ? undefined : "active", isOpen: false, disabled: false, onClick: () => { }, onClose: state === defaultState ? undefined : () => { }, triggerRef: triggerRef, icon: chipIcon || iconFilter_1.IconFilter, id: id, children: chipName || name }), [state, defaultState, chipIcon, id, chipName, name]);
+    return chipComponent;
+};
+exports.FiltersCustom = FiltersCustom;
+exports.FiltersCustom.displayName = exports.FiltersCustomDisplayName;

package/dist/filters/components/filtersDateRange.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import { IFiltersItem } from "./filtersItem";
+import { IDateRangeValue, IDateRangeValueOptionalLabel } from "../../dateRange/dateRangeUtils";
+import { IDateRange } from "../../dateRange/dateRange";
+export interface IFiltersDateRangeProps extends Pick<IDateRange, "options" | "dropDownTitle" | "timeSelect" | "disableFutureDates" | "disablePastDates" | "lockEndDate" | "lockStartDate" | "classNamePopup" | "disableDatesBefore" | "disableDatesAfter" | "chipIcon"> {
+    allowUnsetValue?: boolean;
+}
+export interface IFiltersDateRangeState extends IDateRangeValueOptionalLabel {
+}
+export interface IFiltersDateRangeCompleteState extends IDateRangeValue {
+}
+export interface IFiltersDateRangeDefaultState extends IDateRangeValue {
+}
+export type TFiltersDateRangeState = IFiltersDateRangeState | undefined;
+export type TFiltersDateRangeCompleteState = IFiltersDateRangeCompleteState | undefined;
+type TDateRangeStateType<P> = P extends {
+    allowUnsetValue: true;
+} ? TFiltersDateRangeState : IFiltersDateRangeState;
+export type TFiltersDateRangeStateOptional = TFiltersDateRangeState;
+export type TFiltersDateRangeStateRequired = IFiltersDateRangeState;
+type InferDateRangeOnChangeType<P> = (state: TDateRangeStateType<P>) => void;
+export type IFiltersDateRangeItem<P extends IFiltersDateRangeProps = IFiltersDateRangeProps> = Omit<IFiltersItem<TDateRangeStateType<P>>, "onChange"> & P & {
+    state: TDateRangeStateType<P>;
+    onChange: InferDateRangeOnChangeType<P>;
+    defaultState: TDateRangeStateType<P>;
+};
+export type IFiltersDateRange = IFiltersDateRangeItem;
+export declare const FiltersDateRangeDisplayName = "FiltersDateRange";
+export declare const FiltersDateRange: {
+    <P extends IFiltersDateRangeProps = IFiltersDateRangeProps>({ className, state, defaultState, name, onChange: onChangeState, id, allowUnsetValue, chipIcon, ...dateRangeProps }: IFiltersDateRangeItem<P>): JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/filters/components/filtersDateRange.js

@@ -0,0 +1,27 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FiltersDateRange = exports.FiltersDateRangeDisplayName = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const dateRange_1 = require("../../dateRange/dateRange");
+const iconCalendar_1 = require("../../icons/iconCalendar");
+exports.FiltersDateRangeDisplayName = "FiltersDateRange";
+const FiltersDateRange = (_a) => {
+    var { className, state, defaultState, name, onChange: onChangeState, id, allowUnsetValue, chipIcon } = _a, dateRangeProps = __rest(_a, ["className", "state", "defaultState", "name", "onChange", "id", "allowUnsetValue", "chipIcon"]);
+    const component = (0, react_1.useMemo)(() => allowUnsetValue ? (0, jsx_runtime_1.jsx)(dateRange_1.DateRange, Object.assign({}, dateRangeProps, { value: state, onChange: onChangeState, defaultValue: defaultState, allowUnsetValue: true, className: (0, classNames_1.classNames)(["zen-filters-date-range", className || ""]), chip: true, chipId: id, chipName: name, chipIcon: chipIcon || iconCalendar_1.IconCalendar })) : (0, jsx_runtime_1.jsx)(dateRange_1.DateRange, Object.assign({}, dateRangeProps, { value: state, onChange: onChangeState, defaultValue: defaultState, allowUnsetValue: false, className: (0, classNames_1.classNames)(["zen-filters-date-range", className || ""]), chip: true, chipId: id, chipName: name, chipIcon: chipIcon || iconCalendar_1.IconCalendar })), [dateRangeProps, id, state, defaultState, className, name, onChangeState, allowUnsetValue, chipIcon]);
+    return component;
+};
+exports.FiltersDateRange = FiltersDateRange;
+exports.FiltersDateRange.displayName = exports.FiltersDateRangeDisplayName;

package/dist/filters/components/filtersDropdown.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { IDropdown, IDropdownFullSelection, IDropdownFullSelectionWithCheckbox, IDropdownWithCheckbox, IFetchDropdownState } from "../../dropdown/dropdown";
+import { IFiltersItem } from "./filtersItem";
+export interface IFiltersDropdownProps extends Omit<IDropdown | IDropdownFullSelection | IDropdownWithCheckbox | IDropdownFullSelectionWithCheckbox, "value" | "onChange" | "defaultValue" | "className" | "getData" | "dataItems" | "isLoading" | "errorHandler"> {
+}
+export type TFiltersDropdownState = string[];
+export interface IFiltersDropdownFullSelectionState {
+    selected: string[];
+    isAllSelected: boolean;
+}
+export interface IFiltersDropdownWithCheckboxState {
+    selected: string[];
+    isChecked: boolean;
+}
+export interface IFiltersDropdownFullSelectionWithCheckboxState {
+    selected: string[];
+    isAllSelected: boolean;
+    isChecked: boolean;
+}
+export type TFiltersDropdownComplexState = IFiltersDropdownFullSelectionState | IFiltersDropdownWithCheckboxState | IFiltersDropdownFullSelectionWithCheckboxState;
+export type TFiltersDropdownAllStates = TFiltersDropdownState | TFiltersDropdownComplexState;
+export type TInferOnChangeType<T> = T extends string[] ? (state: string[]) => void : T extends IFiltersDropdownWithCheckboxState ? (state: IFiltersDropdownWithCheckboxState) => void : T extends IFiltersDropdownFullSelectionState ? (state: IFiltersDropdownFullSelectionState) => void : T extends IFiltersDropdownFullSelectionWithCheckboxState ? (state: IFiltersDropdownFullSelectionWithCheckboxState) => void : (state: T) => void;
+export interface IFiltersDropdown<T extends TFiltersDropdownAllStates = TFiltersDropdownState> extends Omit<IFiltersItem<T>, "onChange" | "defaultState">, IFiltersDropdownProps {
+    onChange: TInferOnChangeType<T>;
+    fetchState: IFetchDropdownState;
+    defaultState?: T;
+}
+export declare const FiltersDropdownDisplayName = "FiltersDropdown";
+export declare function FiltersDropdown<T extends TFiltersDropdownAllStates = TFiltersDropdownState>({ className, state, name, defaultState, onChange: onChangeState, id, chipIcon, classNamePopup, fetchState, ...restDropdownProps }: IFiltersDropdown<T>): JSX.Element;
+export declare namespace FiltersDropdown {
+    var displayName: string;
+}

package/dist/filters/components/filtersDropdown.js

@@ -0,0 +1,42 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FiltersDropdown = exports.FiltersDropdownDisplayName = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const dropdown_1 = require("../../dropdown/dropdown");
+const iconFilter_1 = require("../../icons/iconFilter");
+const filtersHelper_1 = require("../filtersHelper");
+exports.FiltersDropdownDisplayName = "FiltersDropdown";
+function FiltersDropdown(_a) {
+    var { className, state, name, defaultState, onChange: onChangeState, id, chipIcon, classNamePopup, fetchState } = _a, restDropdownProps = __rest(_a, ["className", "state", "name", "defaultState", "onChange", "id", "chipIcon", "classNamePopup", "fetchState"]);
+    const prepareValue = (value) => {
+        if (Array.isArray(value)) {
+            return value.map((item) => item.id);
+        }
+        return Object.assign(Object.assign({}, value), { selected: value.selected.map((item) => item.id) });
+    };
+    const dropdownStateType = (0, filtersHelper_1.getDropdownStateType)(state);
+    const memoizedDefaultState = (0, react_1.useMemo)(() => defaultState ? defaultState : (0, filtersHelper_1.prepareDefaultDropdownState)(dropdownStateType), [dropdownStateType, defaultState]);
+    const component = (0, react_1.useMemo)(() => {
+        const dropdownPropsForComponent = Object.assign(Object.assign({}, restDropdownProps), { value: state, onChange: (newValue) => {
+                const preparedValue = prepareValue(newValue);
+                onChangeState(preparedValue);
+            }, multiselect: dropdownStateType === "fullSelection" || dropdownStateType === "fullSelectionWithCheckbox" ? true : restDropdownProps.multiselect, selectAllButton: dropdownStateType === "fullSelection" || dropdownStateType === "fullSelectionWithCheckbox" ? true : restDropdownProps.selectAllButton, fetchState: fetchState, isLoading: undefined, errorHandler: (() => { }), placeholder: restDropdownProps.placeholder || name, defaultValue: memoizedDefaultState, className: (0, classNames_1.classNames)(["zen-filters-dropdown", className || ""]), classNamePopup: (0, classNames_1.classNames)(["zen-filters-dropdown-popup", classNamePopup || ""]), chip: true, chipId: id, chipName: name, chipIcon: chipIcon || iconFilter_1.IconFilter });
+        return (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({}, dropdownPropsForComponent));
+    }, [restDropdownProps, state, dropdownStateType, memoizedDefaultState, fetchState, className, classNamePopup, id, name, chipIcon, onChangeState]);
+    return component;
+}
+exports.FiltersDropdown = FiltersDropdown;
+FiltersDropdown.displayName = exports.FiltersDropdownDisplayName;

package/dist/filters/components/filtersGroups.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { IFiltersItem } from "./filtersItem";
+import { IGroupsFilterTotalState } from "../../groupsFilter/groupsFilterInterfaces";
+import { IGroupsFilter } from "../../groupsFilter/groupsFilter";
+export interface IFiltersGroupsProps extends Pick<IGroupsFilter, "dataLoader" | "errorHandler" | "listLimit" | "chipIcon"> {
+}
+export interface IFiltersGroupsItem extends Omit<IFiltersItem<IGroupsFilterTotalState>, "defaultState"> {
+    state: IGroupsFilterTotalState;
+    onChange: (state: IGroupsFilterTotalState) => void;
+}
+export interface IFiltersGroups extends IFiltersGroupsItem, IFiltersGroupsProps {
+}
+export declare const FiltersGroupsDisplayName = "FiltersGroups";
+export declare const FiltersGroups: React.FC<IFiltersGroups>;

package/dist/filters/components/filtersGroups.js

@@ -0,0 +1,28 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FiltersGroups = exports.FiltersGroupsDisplayName = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const groupsFilter_1 = require("../../groupsFilter/groupsFilter");
+const iconFolders_1 = require("../../icons/iconFolders");
+exports.FiltersGroupsDisplayName = "FiltersGroups";
+const FiltersGroups = (_a) => {
+    var { className, state, name, onChange: onChangeState, id, chipIcon } = _a, otherGroupsFilterProps = __rest(_a, ["className", "state", "name", "onChange", "id", "chipIcon"]);
+    // defaultState here getDefaultFilterState()
+    const component = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(groupsFilter_1.GroupsFilter, Object.assign({}, otherGroupsFilterProps, { initialFilterState: state, onChange: onChangeState, className: (0, classNames_1.classNames)(["zen-filters-groups", className || ""]), chip: true, chipId: id, chipName: name, chipIcon: chipIcon || iconFolders_1.IconFolders })), [otherGroupsFilterProps, state, onChangeState, className, id, name, chipIcon]);
+    return component;
+};
+exports.FiltersGroups = FiltersGroups;
+exports.FiltersGroups.displayName = exports.FiltersGroupsDisplayName;

package/dist/filters/components/filtersItem.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { IGroupsFilterTotalState } from "../../groupsFilter/groupsFilterInterfaces";
+import { FiltersChip, IFiltersChip } from "./filtersChip";
+import { FiltersDateRange, IFiltersDateRangeItem, TFiltersDateRangeState } from "./filtersDateRange";
+import { FiltersDropdown, IFiltersDropdown, TFiltersDropdownAllStates } from "./filtersDropdown";
+import { FiltersGroups, IFiltersGroups } from "./filtersGroups";
+import { FiltersRange, IFiltersRange, IFiltersRangeState } from "./filtersRange";
+export interface IFiltersItem<State = unknown> {
+    id: string;
+    name: string;
+    state: State;
+    onChange: (state: State) => void;
+    defaultState: State;
+    visible?: ((selection: string[], allFiltersState?: Record<string, TFiltersComponentsItemState>) => boolean) | boolean;
+    inhibit?: string[];
+    className?: string;
+}
+export type TFiltersComponents = typeof FiltersChip | typeof FiltersDateRange | typeof FiltersDropdown | typeof FiltersGroups | typeof FiltersRange;
+export type TFiltersComponentsProps = IFiltersChip | IFiltersDateRangeItem | IFiltersDropdown | IFiltersGroups | IFiltersRange;
+export type TFiltersComponentsItemState = boolean | TFiltersDateRangeState | TFiltersDropdownAllStates | IGroupsFilterTotalState | IFiltersRangeState;
+export declare const allowedFiltersComponents: ({
+    <P extends import("./filtersDateRange").IFiltersDateRangeProps = import("./filtersDateRange").IFiltersDateRangeProps>({ className, state, defaultState, name, onChange: onChangeState, id, allowUnsetValue, chipIcon, ...dateRangeProps }: IFiltersDateRangeItem<P>): JSX.Element;
+    displayName: string;
+} | React.FC<IFiltersGroups> | React.FC<IFiltersRange> | React.FC<IFiltersChip> | typeof FiltersDropdown)[];
+export declare const getAllowedFilters: <T extends React.ReactNode>(items: T[]) => React.ReactElement<any, string | React.JSXElementConstructor<any>>[];

package/dist/filters/components/filtersItem.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAllowedFilters = exports.allowedFiltersComponents = void 0;
+const react_1 = __importDefault(require("react"));
+const filtersChip_1 = require("./filtersChip");
+const filtersDateRange_1 = require("./filtersDateRange");
+const filtersDropdown_1 = require("./filtersDropdown");
+const filtersGroups_1 = require("./filtersGroups");
+const filtersRange_1 = require("./filtersRange");
+exports.allowedFiltersComponents = [filtersChip_1.FiltersChip, filtersDateRange_1.FiltersDateRange, filtersDropdown_1.FiltersDropdown, filtersGroups_1.FiltersGroups, filtersRange_1.FiltersRange];
+const getAllowedFilters = (items) => items.reduce((acc, item) => {
+    if (!item || !react_1.default.isValidElement(item)) {
+        return acc;
+    }
+    if (exports.allowedFiltersComponents.includes(item.type)) {
+        acc.push(item);
+    }
+    return acc;
+}, []);
+exports.getAllowedFilters = getAllowedFilters;