@geotab/zenith 1.26.4 → 1.26.5-beta.0

package/dist/filters/filtersHelper.js

@@ -0,0 +1,226 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getArrayOfElements = exports.useCombineData = exports.MAX_TOTAL_RESULTS = exports.serializeEntriesToId = exports.getTotalChangedNumber = exports.getNumberOfChangedFilters = exports.createStateObject = exports.getFiltersState = exports.getChildren = exports.prepareDefaultDropdownState = exports.getDropdownStateType = exports.stabilizeChildrenWithId = exports.createPropsHash = exports.createStateHash = void 0;
+const react_1 = require("react");
+const filtersGroups_1 = require("./components/filtersGroups");
+const react_2 = __importDefault(require("react"));
+const isArraysEqualDeeply_1 = require("../utils/compareElementsUtils/isArraysEqualDeeply");
+const isElementsEqual_1 = require("../utils/compareElementsUtils/isElementsEqual");
+const groupsFilter_1 = require("../groupsFilter/groupsFilter");
+const filtersChip_1 = require("./components/filtersChip");
+const filtersDropdown_1 = require("./components/filtersDropdown");
+const filtersSearchList_1 = require("./components/filtersSearchList");
+const createStateHash = (state) => {
+    if (state === undefined) {
+        return "undefined";
+    }
+    if (state === null) {
+        return "null";
+    }
+    try {
+        const jsonString = JSON.stringify(state);
+        if (jsonString.length > 100) {
+            return `hash:${jsonString.length}:${jsonString.slice(0, 50)}`;
+        }
+        return jsonString;
+    }
+    catch (_a) {
+        return `[object ${typeof state}]`;
+    }
+};
+exports.createStateHash = createStateHash;
+const createPropsHash = (props) => {
+    const relevantKeys = Object.keys(props)
+        .filter(key => key !== "children")
+        .sort();
+    return relevantKeys
+        .map(key => {
+        const value = props[key];
+        if (typeof value === "function") {
+            return `${key}:fn(${value.name || value.toString().slice(0, 30)})`;
+        }
+        if (key === "defaultState" || key === "onChange") {
+            try {
+                return `${key}:${JSON.stringify(value)}`;
+            }
+            catch (_a) {
+                return `${key}:${typeof value}`;
+            }
+        }
+        return `${key}:${typeof value}`;
+    })
+        .join(",");
+};
+exports.createPropsHash = createPropsHash;
+const stabilizeChildrenWithId = (children) => {
+    const childrenArray = react_2.default.Children.toArray(children).filter(Boolean);
+    return childrenArray.map((child, index) => {
+        if (!react_2.default.isValidElement(child)) {
+            return child;
+        }
+        const childId = child.props.id;
+        if (!childId) {
+            console.error(`FiltersContainer: Child component at index ${index} is missing required 'id' prop. ` +
+                `Component will not be rendered. All filter components must have a unique 'id' for proper performance optimization.`, child);
+            return null;
+        }
+        return react_2.default.cloneElement(child, { key: childId });
+    });
+};
+exports.stabilizeChildrenWithId = stabilizeChildrenWithId;
+const getDropdownStateType = (dropdownState) => {
+    if (Array.isArray(dropdownState)) {
+        return "base";
+    }
+    if (dropdownState.hasOwnProperty("isChecked") && dropdownState.hasOwnProperty("isAllSelected")) {
+        return "fullSelectionWithCheckbox";
+    }
+    if (dropdownState.hasOwnProperty("isAllSelected")) {
+        return "fullSelection";
+    }
+    return "withCheckbox";
+};
+exports.getDropdownStateType = getDropdownStateType;
+const prepareDefaultDropdownState = (type) => {
+    if (type === "fullSelectionWithCheckbox") {
+        return { selected: [], isAllSelected: false, isChecked: false };
+    }
+    if (type === "withCheckbox") {
+        return { selected: [], isChecked: false };
+    }
+    if (type === "fullSelection") {
+        return { selected: [], isAllSelected: false };
+    }
+    return [];
+};
+exports.prepareDefaultDropdownState = prepareDefaultDropdownState;
+const getChildren = (children) => (!children
+    ? []
+    : (react_1.Children.count(children) === 1 ? [children] : children)).filter(c => !!c);
+exports.getChildren = getChildren;
+const getFiltersState = (children) => {
+    const state = {};
+    react_1.Children.forEach(children, (child) => {
+        state[child.props.id] = {};
+        state[child.props.id].state = child.props.state;
+        if (child.type === filtersGroups_1.FiltersGroups) {
+            state[child.props.id].defaultState = groupsFilter_1.groupsFilterTotalStateDefault;
+        }
+        else if (child.type === filtersChip_1.FiltersChip) {
+            state[child.props.id].defaultState = false;
+        }
+        else if (child.type === filtersDropdown_1.FiltersDropdown) {
+            state[child.props.id].defaultState = child.props.defaultState || (0, exports.prepareDefaultDropdownState)((0, exports.getDropdownStateType)(child.props.state));
+        }
+        else {
+            state[child.props.id].defaultState = child.props.defaultState;
+        }
+    });
+    return state;
+};
+exports.getFiltersState = getFiltersState;
+const createStateObject = (children, field) => {
+    const state = {};
+    react_1.Children.forEach(children, (child) => {
+        state[child.props.id] = {};
+        if (child.type === filtersGroups_1.FiltersGroups && field === "defaultState") {
+            state[child.props.id] = groupsFilter_1.groupsFilterTotalStateDefault;
+        }
+        else if (child.type === filtersChip_1.FiltersChip && field === "defaultState") {
+            state[child.props.id] = false;
+        }
+        else if (child.type === filtersDropdown_1.FiltersDropdown && field === "defaultState") {
+            state[child.props.id] = child.props.defaultState || (0, exports.prepareDefaultDropdownState)((0, exports.getDropdownStateType)(child.props.state));
+        }
+        else {
+            state[child.props.id] = child.props[field];
+        }
+    });
+    return state;
+};
+exports.createStateObject = createStateObject;
+function getNumberOfChangedFilters(state) {
+    let changes = 0;
+    Object.keys(state).forEach(key => {
+        const defaultState = state[key].defaultState;
+        const currentState = state[key].state;
+        if (!state[key].hasOwnProperty("state") || !state[key].hasOwnProperty("defaultState")) {
+            changes++;
+            return;
+        }
+        if (Array.isArray(defaultState) && Array.isArray(currentState)) {
+            if (!(0, isArraysEqualDeeply_1.isArraysEqualDeeply)(defaultState, currentState)) {
+                changes++;
+            }
+            return;
+        }
+        if (typeof defaultState === "object" && typeof currentState === "object") {
+            if (!(0, isElementsEqual_1.isElementsEqual)(defaultState, currentState)) {
+                changes++;
+            }
+            return;
+        }
+        if (defaultState !== currentState) {
+            changes++;
+        }
+    });
+    return changes;
+}
+exports.getNumberOfChangedFilters = getNumberOfChangedFilters;
+const getTotalChangedNumber = (selectState, filters, isModalCondition) => {
+    const stateObject = (0, exports.createStateObject)(filters, "state");
+    const filteredFilters = filters.filter(el => typeof el.props.visible === "boolean" ? el.props.visible
+        : (el.props.visible === undefined ? true
+            : el.props.visible(Array.from(selectState), isModalCondition ? stateObject : undefined)));
+    const filteredChildrenState = (0, exports.getFiltersState)(filteredFilters);
+    const numberOfChangedFilters = getNumberOfChangedFilters(filteredChildrenState);
+    return numberOfChangedFilters;
+};
+exports.getTotalChangedNumber = getTotalChangedNumber;
+const serializeEntriesToId = (entries) => {
+    const serializedEntries = entries.map(({ id, name, type }) => `${type || filtersSearchList_1.NO_TYPED_SEARCH_ITEM}:${id}:${name}`);
+    return serializedEntries.join("_");
+};
+exports.serializeEntriesToId = serializeEntriesToId;
+exports.MAX_TOTAL_RESULTS = 500;
+const useCombineData = (searchTypes) => {
+    var _a;
+    const combinedData = (0, react_1.useMemo)(() => {
+        const finalResults = [];
+        const totalRelevance = searchTypes.reduce((sum, item) => sum + (item.relevance !== undefined ? item.relevance : 1.0), 0);
+        if (totalRelevance === 0) {
+            return [];
+        }
+        searchTypes.forEach(item => {
+            const fetchedData = item.data.data;
+            const rawRelevance = item.relevance !== undefined ? item.relevance : 1.0;
+            if (fetchedData && Array.isArray(fetchedData)) {
+                const effectiveShare = rawRelevance / totalRelevance;
+                const limit = Math.round(exports.MAX_TOTAL_RESULTS * effectiveShare);
+                const takeCount = Math.min(limit, fetchedData.length);
+                const subset = fetchedData
+                    .slice(0, takeCount)
+                    .map((el) => (Object.assign(Object.assign({}, el), { type: item.id })));
+                finalResults.push(...subset);
+            }
+        });
+        return finalResults.slice(0, exports.MAX_TOTAL_RESULTS);
+    }, [searchTypes]);
+    const isLoading = searchTypes.some(item => item.data.isLoading);
+    return {
+        data: combinedData,
+        isLoading,
+        error: ((_a = searchTypes.find(item => item.data.error)) === null || _a === void 0 ? void 0 : _a.data.error) || null
+    };
+};
+exports.useCombineData = useCombineData;
+function getArrayOfElements(elem) {
+    if (!elem) {
+        return [];
+    }
+    return Array.isArray(elem) ? elem : [elem];
+}
+exports.getArrayOfElements = getArrayOfElements;

package/dist/filters/filtersHooks.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { IFiltersSearchType } from "./components/filtersSelect";
+import { ISearchItem } from "./components/filtersSearchList";
+export declare const useFiltersSearch: (keywordDebounceTime?: number) => {
+    keyword: string;
+    setKeyword: import("react").Dispatch<import("react").SetStateAction<string>>;
+    searchType: IFiltersSearchType;
+    setSearchType: import("react").Dispatch<import("react").SetStateAction<IFiltersSearchType>>;
+    isTypeEnabled: (type: string) => boolean;
+    debouncedKeyword: string;
+};
+export declare const usePinnedFilters: () => {
+    isPinned: boolean;
+    onPinChange: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};
+export declare const useFiltersSelection: () => {
+    searchSelection: ISearchItem[];
+    setSearchSelection: import("react").Dispatch<import("react").SetStateAction<ISearchItem[]>>;
+};

package/dist/filters/filtersHooks.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFiltersSelection = exports.usePinnedFilters = exports.useFiltersSearch = void 0;
+const react_1 = require("react");
+const filtersSelect_1 = require("./components/filtersSelect");
+const useDebouncedMemo_1 = require("../commonHelpers/hooks/useDebouncedMemo");
+const useFiltersSearch = (keywordDebounceTime = 300) => {
+    const [keyword, setKeyword] = (0, react_1.useState)("");
+    const [searchType, setSearchType] = (0, react_1.useState)((0, filtersSelect_1.getFiltersSearchTypeAllOption)());
+    const isTypeEnabled = (0, react_1.useCallback)((type) => Object.keys(searchType).includes(filtersSelect_1.ALL_SELECT_OPTION_ID) || Object.keys(searchType).includes(type), [searchType]);
+    const debouncedKeyword = (0, useDebouncedMemo_1.useDebouncedMemo)(() => keyword, [keyword], keywordDebounceTime);
+    return { keyword, setKeyword, searchType, setSearchType, isTypeEnabled, debouncedKeyword };
+};
+exports.useFiltersSearch = useFiltersSearch;
+const usePinnedFilters = () => {
+    const [isPinned, setIsPinned] = (0, react_1.useState)(false);
+    const pinnedFilters = (0, react_1.useMemo)(() => ({ isPinned, onPinChange: setIsPinned }), [isPinned, setIsPinned]);
+    return pinnedFilters;
+};
+exports.usePinnedFilters = usePinnedFilters;
+const useFiltersSelection = () => {
+    const [searchSelection, setSearchSelection] = (0, react_1.useState)([]);
+    return { searchSelection, setSearchSelection };
+};
+exports.useFiltersSelection = useFiltersSelection;

package/dist/filtersBar/components/filtersBarDropdownWithCheckbox/filtersBarDropdownWithCheckbox.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import "./filtersBarDropdownWithCheckbox.less";
 import { IFiltersBarItem } from "../interfaces";
-import { IDropdownWithCheckbox, IDropdownFullSelectionWithCheckbox } from "../../../dropdown/dropdown";
+import { IDropdownWithCheckbox, IDropdownFullSelectionWithCheckbox, IDropdownItem } from "../../../dropdown/dropdown";
 export interface IFiltersBarDropdownWithCheckboxState {
     selected: string[];
     isChecked: boolean;
@@ -11,9 +11,11 @@ export interface IFiltersBarDropdownWithCheckboxFullSelectionState {
     isChecked: boolean;
     isAllSelected: boolean;
 }
-export interface IFiltersBarDropdownWithCheckboxProps extends Omit<IDropdownWithCheckbox, "value" | "onChange" | "dataItems" | "getNamedItems" | "buttonType" | "alignment" | "error" | "className" | "children"> {
+export interface IFiltersBarDropdownWithCheckboxProps extends Omit<IDropdownWithCheckbox, "value" | "onChange" | "dataItems" | "fetchState" | "getNamedItems" | "buttonType" | "alignment" | "error" | "className" | "children"> {
+    getData: (signal?: AbortSignal, searchValue?: string, checkboxValue?: boolean) => Promise<IDropdownItem[]>;
 }
-export interface IFiltersBarDropdownFullSelectionWithCheckboxProps extends Omit<IDropdownFullSelectionWithCheckbox, "value" | "onChange" | "getNamedItems" | "dataItems" | "buttonType" | "alignment" | "error" | "className" | "children"> {
+export interface IFiltersBarDropdownFullSelectionWithCheckboxProps extends Omit<IDropdownFullSelectionWithCheckbox, "value" | "onChange" | "getNamedItems" | "dataItems" | "fetchState" | "buttonType" | "alignment" | "error" | "className" | "children"> {
+    getData: (signal?: AbortSignal, searchValue?: string, checkboxValue?: boolean) => Promise<IDropdownItem[]>;
 }
 export interface IFiltersBarDropdownWithCheckbox extends IFiltersBarItem<IFiltersBarDropdownWithCheckboxState, IFiltersBarDropdownWithCheckboxProps> {
     className?: string;

package/dist/groupsFilter/groupsFilter.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import { IAdvancedEntitiesNavigatorDialog, IGroupItem, IGroupsFilterTotalState } from "./groupsFilterInterfaces";
 import "./groupsFilter.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { IChipsParent } from "../chip/chip";
 interface IGroupsFilterOptions {
     /**
     * @deprecated
@@ -9,7 +10,11 @@ interface IGroupsFilterOptions {
     */
     placeholder?: string;
 }
-export interface IGroupsFilter extends IZenComponentProps {
+export declare const groupsFilterTotalStateDefault: {
+    groups: import("./groupsFilterInterfaces").ILeafStateItem<import("..").IEntityWithId>;
+    sideWide: boolean;
+};
+export interface IGroupsFilter extends IZenComponentProps, IChipsParent {
     initialFilterState?: IGroupsFilterTotalState;
     dataLoader: () => Promise<IGroupItem[]>;
     errorHandler: (e: Error) => void;
@@ -23,6 +28,10 @@ export interface IGroupsFilter extends IZenComponentProps {
     fullSize?: boolean;
     options?: IGroupsFilterOptions;
     listLimit?: number;
+    /**
+    * @deprecated
+    * @param advancedDialog - will be removed in the next major release
+    */
     advancedDialog?: IAdvancedEntitiesNavigatorDialog;
 }
 export declare const GroupsFilter: React.FC<IGroupsFilter>;

package/dist/groupsFilter/groupsFilter.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TRANSLATIONS = exports.GroupsFilter = void 0;
+exports.TRANSLATIONS = exports.GroupsFilter = exports.groupsFilterTotalStateDefault = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const groupsFilterInterfaces_1 = require("./groupsFilterInterfaces");
@@ -26,8 +26,14 @@ const advancedGroupsFilter_1 = require("../advancedGroupsFilter/advancedGroupsFi
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const groupsFilterAdvancedValue_1 = require("./groupsFilterAdvancedValue");
 const skeletonList_1 = require("../skeletonList/skeletonList");
-const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithColor, onChange, initialFilterState, options = {}, listLimit = 500 }) => {
+const chip_1 = require("../chip/chip");
+const searchInput_1 = require("../searchInput/searchInput");
+const chipStatusProvider_1 = require("../chip/chipStatusProvider");
+exports.groupsFilterTotalStateDefault = { groups: (0, groupsHelper_1.getDefaultFilterState)(), sideWide: false };
+// eslint-disable-next-line complexity
+const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithColor, onChange, initialFilterState, options = {}, listLimit = 500, chip, chipIcon, chipId, chipName }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
+    const chipStatus = (0, chipStatusProvider_1.useChipStatus)();
     const [groupPlaceHolder, setGroupPlaceHolder] = (0, react_1.useState)(options.placeholder || translate("Groups"));
     const [state, dispatchState] = (0, react_1.useReducer)(stateReducer_1.stateReducer, (0, stateReducer_1.getInitialState)(translate, initialFilterState));
     const [uiState, dispatchUiState] = (0, react_1.useReducer)(uiStateReducer_1.uiStateReducer, uiStateReducer_1.uiInitialGroupsFilterState);
@@ -37,12 +43,14 @@ const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithCol
     const menuRef = (0, react_1.useRef)(null);
     const prevInitialState = (0, react_1.useRef)(initialFilterState);
     const prevSearchField = (0, react_1.useRef)("");
+    const groupsFilterId = (0, react_1.useId)();
     const blocksMap = (0, react_1.useMemo)(() => [["builtInGroups", "userGroups"], ["advancedGroups", "builtInGroups", "userGroups"], ["builtInGroups", "userGroups"]], []);
     const onOptionsToggle = () => { dispatchUiState({ type: uiStateActionType_1.UiStateActionType.ToggleOpen, payload: undefined }); };
     const handleSetStep = (0, react_1.useCallback)((newStep) => {
+        var _a;
         uiState.step !== groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected && dispatchUiState({ type: uiStateActionType_1.UiStateActionType.ClearUncheckedState, payload: undefined });
         dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetStep, payload: newStep });
-        if (inputRef.current.value && newStep !== groupsFilterInterfaces_1.FilterMenuStep.Initial) {
+        if (((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) && newStep !== groupsFilterInterfaces_1.FilterMenuStep.Initial) {
             inputRef.current.value = "";
             dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetSearchValue, payload: "" });
         }
@@ -53,6 +61,11 @@ const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithCol
         dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetIsOpen, payload: true });
         uiState.step !== groupsFilterInterfaces_1.FilterMenuStep.Initial && handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
     }, [handleSetStep, uiState.step]);
+    const onSearchChipChange = (0, react_1.useCallback)((newValue) => {
+        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetSearchValue, payload: newValue || "" });
+        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetIsOpen, payload: true });
+        uiState.step !== groupsFilterInterfaces_1.FilterMenuStep.Initial && handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
+    }, [handleSetStep, uiState.step]);
     const handleCancel = () => {
         dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetIsOpen, payload: false });
         dispatchState({ type: stateActionType_1.StateActionType.SetState, payload: state.frozenState });
@@ -63,7 +76,9 @@ const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithCol
         dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetIsOpen, payload: false });
         dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetSearchValue, payload: "" });
         dispatchUiState({ type: uiStateActionType_1.UiStateActionType.ClearUncheckedState, payload: undefined });
-        inputRef.current.value = "";
+        if (inputRef.current) {
+            inputRef.current.value = "";
+        }
         handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
         dispatchState({ type: stateActionType_1.StateActionType.FreezeState, payload: (0, stateReducerHelper_1.getCurrentState)(state) });
         dispatchState({ type: stateActionType_1.StateActionType.FreezeSideWide, payload: state.sideWideState });
@@ -71,6 +86,18 @@ const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithCol
     const handleReset = () => {
         dispatchState({ type: stateActionType_1.StateActionType.ResetSelection, payload: undefined });
     };
+    const handleChipClose = () => {
+        dispatchState({ type: stateActionType_1.StateActionType.ResetSelection, payload: undefined });
+        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetIsOpen, payload: false });
+        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetSearchValue, payload: "" });
+        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.ClearUncheckedState, payload: undefined });
+        if (inputRef.current) {
+            inputRef.current.value = "";
+        }
+        handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
+        dispatchState({ type: stateActionType_1.StateActionType.FreezeState, payload: stateReducer_1.defaultPreparedFilterState });
+        dispatchState({ type: stateActionType_1.StateActionType.FreezeSideWide, payload: false });
+    };
     const handleCheckboxChange = (value) => {
         if (value.partial) {
             dispatchState({ type: stateActionType_1.StateActionType.DeselectAllChildren, payload: value.id });
@@ -211,25 +238,26 @@ const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithCol
         }
     }, [initialFilterState, state.groupsMap]);
     (0, react_1.useEffect)(() => {
-        var _a;
+        var _a, _b, _c;
         if (!uiState.isOpen) {
             return;
         }
         if (uiState.searchValue && uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial || uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial && uiState.searchValue === ""
             && prevSearchField.current !== uiState.searchValue) {
-            inputRef.current.focus();
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             prevSearchField.current = uiState.searchValue;
         }
         else {
-            const firstFocusable = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
+            const firstFocusable = (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
             prevSearchField.current = "";
-            if (firstFocusable && !inputRef.current.value) {
+            if (firstFocusable && !((_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.value)) {
                 firstFocusable.focus();
             }
         }
-    }, [uiState.searchValue, uiState.isOpen, uiState.step, handleSetStep]);
+    }, [uiState.searchValue, uiState.isOpen, uiState.step, handleSetStep, chip]);
     (0, react_1.useEffect)(() => {
-        uiState.isOpen && inputRef.current.focus();
+        var _a;
+        uiState.isOpen && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus());
     }, [inputRef, uiState.isOpen]);
     (0, react_1.useEffect)(() => {
         if (!uiState.isOpen && uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial && (0, groupsFilterHelper_1.isFilterHasSelection)(state.frozenState)) {
@@ -249,7 +277,8 @@ const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithCol
     (0, useEscape_1.useEscape)(triggerRef, handleEscape, uiState.isOpen);
     const selectedCount = (0, stateReducerHelper_1.getFrozenCount)(state);
     const isStateHasData = Object.keys(state.groupsMap).length > 0;
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(groupsFilterTrigger_1.GroupsFilterTrigger, { value: uiState.searchValue, onChange: onSearchChange, isOpenPopup: uiState.isOpen, count: selectedCount, withGlobeIcon: state.frozenSideWideState && selectedCount > 0, inputRef: inputRef, handleClick: handleTriggerClick, ref: triggerRef, fullSize: fullSize, placeholder: groupPlaceHolder }), (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { isOpen: uiState.isOpen, className: (0, classNames_1.classNames)(["zen-groups-filter__popup", uiState.isOpenAdvancedFilter ? "zen-groups-filter__popup--inactive" : "", className ? className : ""]), onOpenChange: onOptionsToggle, useTrapFocusWithTrigger: uiState.isOpenAdvancedFilter ? "off" : "withTrigger", shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: translate("Organization groups filter"), recalculateOnScroll: true, children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-groups-filter-menu", ref: menuRef, children: [isStateHasData && !uiState.isLoadWithError && (0, jsx_runtime_1.jsxs)(groupsFilterMenu_1.GroupsFilterMenu, { onCancelClick: handleCancel, onApplyClick: handleApply, onResetClick: handleReset, isApplyDisabled: !(0, stateReducerHelper_1.isStateChanged)(state), children: [uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial && (0, jsx_runtime_1.jsx)(groupsFilterInitialState_1.GroupsFilterInitialState, { siteWideState: state.sideWideState, onDialogButtonClick: handleAdvancedDialogOpen, count: (0, stateReducerHelper_1.getCurrentlySelectedCount)(state), onSiteWideChange: onSideWideChange, onCurrentlySelectedClick: handleCurrentlySelectedClick, searchResult: uiState.searchValue ? getSearchResult() : "", children: getGroupsBox() }), uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Adjustment && (0, jsx_runtime_1.jsx)(groupsFilterAdjustmentState_1.GroupsFilterAdjustmentState, { onBackButtonClick: handleBackButtonClick, onHomeButtonClick: handleHomeButtonClick, onSelectAllClick: selectAllHandler, backButtonName: (0, groupsFilterStatesHelper_1.getBackButtonName)(state, uiState.currentAdjustmentId), isAllSelected: (0, groupsFilterStatesHelper_1.isAllChildrenSelected)(state, uiState.currentAdjustmentId), children: getGroupsBox() }), uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected && (0, jsx_runtime_1.jsx)(groupsFilterCurrentlySelectedState_1.GroupsFilterCurrentlySelectedState, { siteWideState: state.sideWideState, relation: state.relation, count: (0, stateReducerHelper_1.getCurrentlySelectedCount)(state), onBackButtonClick: basicHandleBackButtonClick, onSiteWideChange: onSideWideChange, onRelationChange: onRelationChange, children: getGroupsBox() })] }), !uiState.isLoadWithError && !isStateHasData && !Object.keys(state.groupsMap).length && (0, jsx_runtime_1.jsx)(skeletonList_1.SkeletonList, { className: "zen-groups-filter__waiting" })] }) }), uiState.isOpenAdvancedFilter && getAdvancedDialog] });
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [chip ? (0, jsx_runtime_1.jsx)(chip_1.Chip, { status: selectedCount ? chipStatus || "active" : undefined, isOpen: uiState.isOpen, disabled: false, onClick: handleTriggerClick, onClose: selectedCount ? handleChipClose : undefined, triggerRef: triggerRef, icon: chipIcon, id: chipId, children: groupPlaceHolder !== translate("Groups") ? groupPlaceHolder : chipName })
+                : (0, jsx_runtime_1.jsx)(groupsFilterTrigger_1.GroupsFilterTrigger, { value: uiState.searchValue, onChange: onSearchChange, isOpenPopup: uiState.isOpen, count: selectedCount, withGlobeIcon: state.frozenSideWideState && selectedCount > 0, inputRef: inputRef, handleClick: handleTriggerClick, ref: triggerRef, fullSize: fullSize, placeholder: groupPlaceHolder }), (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { isOpen: uiState.isOpen, className: (0, classNames_1.classNames)(["zen-groups-filter__popup", uiState.isOpenAdvancedFilter ? "zen-groups-filter__popup--inactive" : "", className ? className : ""]), onOpenChange: onOptionsToggle, useTrapFocusWithTrigger: uiState.isOpenAdvancedFilter ? "off" : "withTrigger", shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: translate("Organization groups filter"), recalculateOnScroll: true, children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-groups-filter-menu", ref: menuRef, children: [chip && (0, jsx_runtime_1.jsx)("div", { className: "zen-groups-filter__input-container", children: (0, jsx_runtime_1.jsx)(searchInput_1.SearchInput, { className: "zen-groups-filter__chip-input", onChange: onSearchChipChange, value: uiState.searchValue, ref: inputRef, id: groupsFilterId, placeholder: translate("Filter by group") }) }), isStateHasData && !uiState.isLoadWithError && (0, jsx_runtime_1.jsxs)(groupsFilterMenu_1.GroupsFilterMenu, { onCancelClick: handleCancel, onApplyClick: handleApply, onResetClick: handleReset, isApplyDisabled: !(0, stateReducerHelper_1.isStateChanged)(state), children: [uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial && (0, jsx_runtime_1.jsx)(groupsFilterInitialState_1.GroupsFilterInitialState, { siteWideState: state.sideWideState, onDialogButtonClick: handleAdvancedDialogOpen, count: (0, stateReducerHelper_1.getCurrentlySelectedCount)(state), onSiteWideChange: onSideWideChange, onCurrentlySelectedClick: handleCurrentlySelectedClick, searchResult: uiState.searchValue ? getSearchResult() : "", children: getGroupsBox() }), uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Adjustment && (0, jsx_runtime_1.jsx)(groupsFilterAdjustmentState_1.GroupsFilterAdjustmentState, { onBackButtonClick: handleBackButtonClick, onHomeButtonClick: handleHomeButtonClick, onSelectAllClick: selectAllHandler, backButtonName: (0, groupsFilterStatesHelper_1.getBackButtonName)(state, uiState.currentAdjustmentId), isAllSelected: (0, groupsFilterStatesHelper_1.isAllChildrenSelected)(state, uiState.currentAdjustmentId), children: getGroupsBox() }), uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected && (0, jsx_runtime_1.jsx)(groupsFilterCurrentlySelectedState_1.GroupsFilterCurrentlySelectedState, { siteWideState: state.sideWideState, relation: state.relation, count: (0, stateReducerHelper_1.getCurrentlySelectedCount)(state), onBackButtonClick: basicHandleBackButtonClick, onSiteWideChange: onSideWideChange, onRelationChange: onRelationChange, children: getGroupsBox() })] }), !uiState.isLoadWithError && !isStateHasData && !Object.keys(state.groupsMap).length && (0, jsx_runtime_1.jsx)(skeletonList_1.SkeletonList, { className: "zen-groups-filter__waiting" })] }) }), uiState.isOpenAdvancedFilter && getAdvancedDialog] });
 };
 exports.GroupsFilter = GroupsFilter;
 exports.TRANSLATIONS = [

package/dist/header/components/collapsedItemsControl/collapsedItemsControl.js

@@ -14,21 +14,24 @@ const headerHelpers_1 = require("../../headerHelpers");
 const iconDotVertical_1 = require("../../../icons/iconDotVertical");
 const useDrive_1 = require("../../../utils/theme/useDrive");
 const handleCustomMenuWrapper_1 = require("./utils/handleCustomMenuWrapper");
+const pageHeaderButton_1 = require("../../../pageHeader/pageHeaderButton");
+const pageHeaderMenu_1 = require("../../../pageHeader/pageHeaderMenu");
+const classNames_1 = require("../../../commonHelpers/classNames/classNames");
 exports.HeaderCustomContent = (0, react_1.createContext)({
     content: null,
     setContent: (_1) => { }
 });
 const HeaderCustomContentProvider = ({ children, content, setContent }) => (0, jsx_runtime_1.jsx)(exports.HeaderCustomContent.Provider, { value: { content: content, setContent }, children: children });
 exports.HeaderCustomContentProvider = HeaderCustomContentProvider;
-const PageToolbarCollapsedItemsControl = ({ children }) => {
+const PageToolbarCollapsedItemsControl = ({ children, className }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const isDrive = (0, useDrive_1.useDrive)();
     const { content } = (0, react_1.useContext)(exports.HeaderCustomContent);
-    const adjustmentButton = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { "aria-label": translate("More"), className: "zen-header-more-button", type: buttonType_1.ButtonType.TertiaryBlack, iconPosition: textIconButton_1.ButtonIconPosition.End, iconSize: isDrive ? svgIconSize_1.SvgIconSize.Huge : svgIconSize_1.SvgIconSize.Large, icon: iconDotVertical_1.IconDotVertical }), [isDrive, translate]);
+    const adjustmentButton = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { "aria-label": translate("More"), className: (0, classNames_1.classNames)(["zen-header-more-button", className || ""]), type: buttonType_1.ButtonType.TertiaryBlack, iconPosition: textIconButton_1.ButtonIconPosition.End, iconSize: isDrive ? svgIconSize_1.SvgIconSize.Huge : svgIconSize_1.SvgIconSize.Large, icon: iconDotVertical_1.IconDotVertical }), [isDrive, translate, className]);
     const items = [];
     const clickHandler = (0, react_1.useCallback)((propsOnClick) => ((_, e) => { propsOnClick(e); }), []);
     react_1.Children.forEach(children, (child) => {
-        if ((0, headerHelpers_1.isNamedChildComponent)(child, headerButton_1.HeaderButtonDisplayName)) {
+        if ((0, headerHelpers_1.isNamedChildComponent)(child, headerButton_1.HeaderButtonDisplayName) || (0, headerHelpers_1.isNamedChildComponent)(child, pageHeaderButton_1.PageHeaderButtonDisplayName)) {
             const onClick = child.props.onClick;
             const el = (0, react_1.createElement)(menu_1.Menu.Item, {
                 id: child.props.id,
@@ -47,7 +50,7 @@ const PageToolbarCollapsedItemsControl = ({ children }) => {
             });
             items.push(el);
         }
-        if ((0, headerHelpers_1.isNamedChildComponent)(child, headerMenu_1.HeaderMenuDisplayName)) {
+        if ((0, headerHelpers_1.isNamedChildComponent)(child, headerMenu_1.HeaderMenuDisplayName) || (0, headerHelpers_1.isNamedChildComponent)(child, pageHeaderMenu_1.PageHeaderMenuDisplayName)) {
             const el = (0, react_1.createElement)(menu_1.Menu.Item, {
                 id: child.props.id,
                 key: child.props.id,

package/dist/header/headerMenu.d.ts

@@ -12,6 +12,7 @@ export interface IHeaderMenu extends Omit<IButton, "onClick"> {
     icon?: FC<IIcon>;
     iconSize?: TSvgIconSize;
     alignment?: TAlignment;
+    onlyIcon?: boolean;
 }
 export declare const HeaderMenuDisplayName = "HeaderMenu";
 export declare const HeaderMenu: FC<IHeaderMenu>;

package/dist/header/headerMenu.js

@@ -24,18 +24,25 @@ const useDrive_1 = require("../utils/theme/useDrive");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 exports.HeaderMenuDisplayName = "HeaderMenu";
 const HeaderMenu = (_a) => {
-    var { name, children, icon, iconSize = "large", className = "", important, alignment = "bottom-right", inContextMenu } = _a, restProps = __rest(_a, ["name", "children", "icon", "iconSize", "className", "important", "alignment", "inContextMenu"]);
+    var { name, children, icon, iconSize = "large", className = "", important, alignment = "bottom-right", inContextMenu, onlyIcon } = _a, restProps = __rest(_a, ["name", "children", "icon", "iconSize", "className", "important", "alignment", "inContextMenu", "onlyIcon"]);
     const isMobile = (0, useMobile_1.useMobile)();
     const isDrive = (0, useDrive_1.useDrive)();
     const driveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-header-button-with-dropdown");
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
-    const fullClassName = (0, classNames_1.classNames)(["zen-header-button zen-header-button--with-dropdown", isMobile ? "zen-header-button--mobile" : "", "zen-caption", driveClassName || "", className]);
-    const props = Object.assign(Object.assign(Object.assign({}, restProps), { "data-important": important ? "1" : "0" }), (isMobile ? { title: restProps.title || name } : {}));
+    const fullClassName = (0, classNames_1.classNames)([
+        "zen-header-button zen-header-button--with-dropdown",
+        "zen-caption",
+        isMobile ? "zen-header-button--mobile" : "",
+        onlyIcon ? "zen-header-button--hidden-name" : "",
+        driveClassName || "",
+        className
+    ]);
+    const props = Object.assign(Object.assign(Object.assign({}, restProps), { "data-important": important ? "1" : "0" }), (isMobile || onlyIcon ? { title: restProps.title || name } : {}));
     const onTriggerClick = (0, react_1.useCallback)(() => {
         setIsOpen(!isOpen);
     }, [isOpen]);
-    const trigger = (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ onClick: onTriggerClick, ref: ref, className: fullClassName }, props, { children: [icon ? icon({ className: "zen-caption__pre-content", size: isDrive ? (0, svgIconSize_1.driveIconSize)(iconSize) : iconSize }) : null, isMobile ? null : (0, jsx_runtime_1.jsx)("span", { className: "zen-caption__content", children: name }), (0, jsx_runtime_1.jsx)(iconChevronDownSmall_1.IconChevronDownSmall, { size: isDrive ? (0, svgIconSize_1.driveIconSize)("large") : "large", className: "zen-caption__post-content" })] }));
+    const trigger = (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ onClick: onTriggerClick, ref: ref, className: fullClassName }, props, { children: [icon ? icon({ className: "zen-caption__pre-content", size: isDrive ? (0, svgIconSize_1.driveIconSize)(iconSize) : iconSize }) : null, isMobile || onlyIcon ? null : (0, jsx_runtime_1.jsx)("span", { className: "zen-caption__content", children: name }), onlyIcon ? null : (0, jsx_runtime_1.jsx)(iconChevronDownSmall_1.IconChevronDownSmall, { size: isDrive ? (0, svgIconSize_1.driveIconSize)("large") : "large", className: "zen-caption__post-content" })] }));
     return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [trigger, (0, jsx_runtime_1.jsx)(controlledMenu_1.ControlledMenu, { title: name, triggerRef: ref, isOpen: isOpen, setIsOpen: setIsOpen, alignment: alignment, children: children })] });
 };
 exports.HeaderMenu = HeaderMenu;