@geotab/zenith 3.1.1-beta.0 → 3.1.1-beta.2

package/dist/groupsFilterRaw/groupsFilterRaw.d.ts

@@ -0,0 +1,37 @@
+import React from "react";
+import { IAdvancedEntitiesNavigatorDialog, IGroupItem, IGroupsFilterTotalState } from "./groupsFilterInterfaces";
+import "./groupsFilterRaw.less";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { IFormFieldComponent } from "../formField/formField";
+import { IChipsParent } from "../chip/chip";
+import { TGroupsFilterRaw } from "./types";
+interface IGroupsFilterOptions {
+    /**
+    * @deprecated
+    * @param placeholder - will be removed in the next major release
+    */
+    placeholder?: string;
+}
+export interface IGroupsFilterRaw extends IZenComponentProps, IChipsParent {
+    initialFilterState?: IGroupsFilterTotalState;
+    dataLoader: () => Promise<IGroupItem[]>;
+    errorHandler: (e: Error) => void;
+    onChange: (state: IGroupsFilterTotalState) => void;
+    isWithColor?: boolean;
+    /**
+    * @deprecated
+    * @param translate - will be removed in the next major release
+    */
+    translate?: (s: string) => string;
+    fullSize?: boolean;
+    options?: IGroupsFilterOptions;
+    listLimit?: number;
+    /**
+    * @deprecated
+    * @param advancedDialog - will be removed in the next major release
+    */
+    advancedDialog?: IAdvancedEntitiesNavigatorDialog;
+}
+export declare const GroupsFilterRaw: React.FC<TGroupsFilterRaw & IFormFieldComponent>;
+export declare const TRANSLATIONS: string[];
+export {};

package/dist/groupsFilterRaw/groupsFilterRaw.js

@@ -0,0 +1,356 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TRANSLATIONS = exports.GroupsFilterRaw = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const groupsFilterInterfaces_1 = require("./groupsFilterInterfaces");
+const groupsFilterMenu_1 = require("./groupsFilterMenu");
+const groupsFilterInitialState_1 = require("./groupsFilterInitialState");
+const groupsFilterAdjustmentState_1 = require("./groupsFilterAdjustmentState");
+const groupsFilterCurrentlySelectedState_1 = require("./groupsFilterCurrentlySelectedState");
+const stateReducer_1 = require("./stateReducer/stateReducer");
+const stateActionType_1 = require("./stateReducer/stateActionType");
+const groupsHelper_1 = require("./groupsHelper");
+const groupsFilterStatesHelper_1 = require("./groupsFilterStatesHelper");
+const groupsFilterBox_1 = require("./groupsFilterBox");
+const groupsFilterHelper_1 = require("./groupsFilterHelper");
+const groupsFilterTrigger_1 = require("./groupsFilterTrigger");
+const useEscape_1 = require("../commonHelpers/hooks/useEscape");
+const focusableSelector_1 = require("../utils/focusableSelector");
+const controlledPopup_1 = require("../controlledPopup/controlledPopup");
+const stateReducerHelper_1 = require("./stateReducer/stateReducerHelper");
+const uiStateReducer_1 = require("./uiStateReducer/uiStateReducer");
+const uiStateActionType_1 = require("./uiStateReducer/uiStateActionType");
+const classNames_1 = require("../commonHelpers/classNames/classNames");
+const advancedGroupsFilter_1 = require("../advancedGroupsFilter/advancedGroupsFilter");
+const useLanguage_1 = require("../utils/localization/useLanguage");
+const groupsFilterAdvancedValue_1 = require("./groupsFilterAdvancedValue");
+const skeletonList_1 = require("../skeletonList/skeletonList");
+const chip_1 = require("../chip/chip");
+const chipStatusProvider_1 = require("../chip/chipStatusProvider");
+const searchInput_1 = require("../searchInput/searchInput");
+const button_1 = require("../button/button");
+const buttonType_1 = require("../button/buttonType");
+const useMobile_1 = require("../commonHelpers/hooks/useMobile");
+const footerButtons_1 = require("../footerButtons/footerButtons");
+const mobileSheet_1 = require("../mobileSheet/mobileSheet");
+const isFormItem_1 = require("../commonHelpers/isFormItem");
+const useFormField_1 = require("../commonHelpers/hooks/useFormField");
+const reviewTextControl_1 = require("../formGroup/components/reviewTextControl");
+// eslint-disable-next-line max-len, complexity
+const GroupsFilterRaw = (props) => {
+    var _a;
+    const { fullSize, className, dataLoader, errorHandler, initialFilterState, isWithColor, onChange, options, listLimit = 500, isError, isReadOnly, chip, chipIcon, chipId, chipName } = props;
+    const chipStatus = (0, chipStatusProvider_1.useChipStatus)();
+    const { field } = (0, useFormField_1.useFormField)(props.controller);
+    const isFormItemValue = (0, isFormItem_1.isFormItem)(props);
+    let initialFilterStateInner, onChangeInner;
+    if (isFormItemValue) {
+        initialFilterStateInner = (_a = props.controller) === null || _a === void 0 ? void 0 : _a.defaultValue;
+        onChangeInner = (state) => {
+            field === null || field === void 0 ? void 0 : field.onChange(state);
+        };
+    }
+    else {
+        initialFilterStateInner = initialFilterState;
+        onChangeInner = onChange;
+    }
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    const [groupPlaceHolder, setGroupPlaceHolder] = (0, react_1.useState)((options === null || options === void 0 ? void 0 : 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);
+    const [dataItems, setDataItems] = (0, react_1.useState)([]);
+    const isMobile = (0, useMobile_1.useMobile)();
+    const inputRef = (0, react_1.useRef)(null);
+    const emptyInputRef = (0, react_1.useRef)(null);
+    const triggerRef = (0, react_1.useRef)(null);
+    const menuRef = (0, react_1.useRef)(null);
+    const prevInitialState = (0, react_1.useRef)(initialFilterStateInner);
+    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 = (0, react_1.useCallback)(() => { 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 (((_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: "" });
+        }
+    }, [uiState.step]);
+    const onSearchChange = (0, react_1.useCallback)((event) => {
+        const newValue = event.currentTarget.value;
+        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 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 handleFocusOnClose = (0, react_1.useCallback)(() => {
+        var _a, _b, _c;
+        if (chip) {
+            (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            !isMobile && ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus());
+            isMobile && ((_c = emptyInputRef.current) === null || _c === void 0 ? void 0 : _c.focus());
+        }
+    }, [chip, isMobile]);
+    const handleCancel = (0, react_1.useCallback)(() => {
+        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetIsOpen, payload: false });
+        dispatchState({ type: stateActionType_1.StateActionType.SetState, payload: state.frozenState });
+        dispatchState({ type: stateActionType_1.StateActionType.SideWide, payload: state.frozenSideWideState });
+        handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
+        handleFocusOnClose();
+    }, [state.frozenState, state.frozenSideWideState, handleSetStep, handleFocusOnClose]);
+    const handleApply = (0, react_1.useCallback)(() => {
+        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: (0, stateReducerHelper_1.getCurrentState)(state) });
+        dispatchState({ type: stateActionType_1.StateActionType.FreezeSideWide, payload: state.sideWideState });
+        handleFocusOnClose();
+    }, [handleSetStep, state, handleFocusOnClose]);
+    const handleReset = (0, react_1.useCallback)(() => {
+        dispatchState({ type: stateActionType_1.StateActionType.ResetSelection, payload: undefined });
+    }, []);
+    const handleChipClose = (0, react_1.useCallback)(() => {
+        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 });
+    }, [handleSetStep]);
+    const handleCheckboxChange = (0, react_1.useCallback)((value) => {
+        if (value.partial) {
+            dispatchState({ type: stateActionType_1.StateActionType.DeselectAllChildren, payload: value.id });
+        }
+        else {
+            dispatchState({ type: stateActionType_1.StateActionType.ChangeSelection, payload: { value: value.state, itemId: value.id } });
+        }
+    }, [dispatchState]);
+    const handleCheckboxItemClick = (0, react_1.useCallback)((id) => {
+        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetCurrentAdjustmentId, payload: id });
+        handleSetStep(id ? groupsFilterInterfaces_1.FilterMenuStep.Adjustment : groupsFilterInterfaces_1.FilterMenuStep.Initial);
+    }, [dispatchUiState, handleSetStep]);
+    const handleCheckboxItemAdjustmentClick = (0, react_1.useCallback)((value) => {
+        if (value.id === groupsFilterBox_1.ADVANCED_FILTER_ID) {
+            const currentVal = value.state ? uiState.uncheckedAdvancedState : state.advancedFilterState;
+            !value.state && dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetUncheckedAdvancedState, payload: currentVal });
+            !value.state && dispatchState({ type: stateActionType_1.StateActionType.SetAdvancedFilterState, payload: (0, groupsHelper_1.getDefaultFilterState)() });
+            value.state && dispatchState({ type: stateActionType_1.StateActionType.SetAdvancedFilterState, payload: currentVal || state.frozenState.advancedFilterState || (0, groupsHelper_1.getDefaultFilterState)() });
+            return;
+        }
+        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetUncheckedAdjustmentIds, payload: !value.state ?
+                [...uiState.uncheckedAdjustmentIds, value.id] : uiState.uncheckedAdjustmentIds.filter(id => id !== value.id) });
+        dispatchState({ type: stateActionType_1.StateActionType.ChangeSelection, payload: { value: value.state, itemId: value.id } });
+    }, [dispatchState, dispatchUiState, state.advancedFilterState, state.frozenState.advancedFilterState, uiState.uncheckedAdvancedState, uiState.uncheckedAdjustmentIds]);
+    const basicHandleBackButtonClick = (0, react_1.useCallback)(() => {
+        handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
+    }, [handleSetStep]);
+    const handleBackButtonClick = (0, react_1.useCallback)(() => {
+        const currentEl = uiState.currentAdjustmentId ? (0, stateReducerHelper_1.getGroupsTreeItem)(state, uiState.currentAdjustmentId) : undefined;
+        if (!uiState.currentAdjustmentId || !(currentEl === null || currentEl === void 0 ? void 0 : currentEl.parent)) {
+            basicHandleBackButtonClick();
+            return;
+        }
+        const isNotRoot = currentEl.parent.id && currentEl.parent.id !== groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID;
+        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetCurrentAdjustmentId, payload: isNotRoot ? currentEl.parent.id : undefined });
+        handleSetStep(isNotRoot ? groupsFilterInterfaces_1.FilterMenuStep.Adjustment : groupsFilterInterfaces_1.FilterMenuStep.Initial);
+    }, [basicHandleBackButtonClick, handleSetStep, state, uiState.currentAdjustmentId]);
+    const handleHomeButtonClick = (0, react_1.useCallback)(() => {
+        handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
+        uiState.currentAdjustmentId && dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetCurrentAdjustmentId, payload: undefined });
+    }, [handleSetStep, uiState.currentAdjustmentId, dispatchUiState]);
+    const handleCurrentlySelectedClick = (0, react_1.useCallback)(() => {
+        handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected);
+    }, [handleSetStep]);
+    const selectAllHandler = (0, react_1.useCallback)((isAllSelected) => {
+        if (!uiState.currentAdjustmentId) {
+            return;
+        }
+        dispatchState({ type: isAllSelected ? stateActionType_1.StateActionType.DeselectAllChildren : stateActionType_1.StateActionType.SelectAllChildren, payload: uiState.currentAdjustmentId });
+    }, [uiState.currentAdjustmentId, dispatchState]);
+    const handleTriggerClick = () => {
+        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.ToggleOpen, payload: undefined });
+    };
+    const handleAdvancedDialogOpen = (0, react_1.useCallback)(() => {
+        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetAdvancedFilterIsOpen, payload: true });
+    }, []);
+    const handleAdvancedDialogClose = (0, react_1.useCallback)(() => {
+        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetAdvancedFilterIsOpen, payload: false });
+    }, []);
+    const handleAdvancedDialogApply = (0, react_1.useCallback)((val) => {
+        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetAdvancedFilterIsOpen, payload: false });
+        dispatchState({ type: stateActionType_1.StateActionType.SetAdvancedFilterState, payload: val.items.length ? val : (0, groupsHelper_1.getDefaultFilterState)() });
+    }, []);
+    const getAdvancedData = (0, react_1.useCallback)((_, searchValue) => dataLoader().then(data => (searchValue ? data.filter(el => (el.name || el.id).toLocaleLowerCase().indexOf(searchValue.toLocaleLowerCase()) > -1) : data)).catch((e) => {
+        errorHandler(e);
+        return [];
+    }), [dataLoader, errorHandler]);
+    (0, react_1.useEffect)(() => {
+        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetLoadWithError, payload: false });
+        dataLoader().then(groups => {
+            dispatchState({ type: stateActionType_1.StateActionType.CreateGroupsMap, payload: groups });
+            setDataItems(groups);
+        }).catch((e) => {
+            dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetLoadWithError, payload: true });
+            errorHandler(e);
+        });
+    }, [dataLoader, errorHandler]);
+    (0, react_1.useEffect)(() => {
+        const step = uiState.step;
+        if (step !== groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected) {
+            return;
+        }
+        const groupsBlocks = (0, groupsFilterAdvancedValue_1.getAdvancedFilterValue)({
+            blocks: blocksMap[uiState.step],
+            state,
+            isWithColor: isWithColor || false,
+            uncheckedItems: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdjustmentIds : [],
+            uncheckedAdvancedState: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdvancedState : undefined,
+            listLimit
+        });
+        const label = (0, groupsFilterAdvancedValue_1.getAdvancedLabel)({ groupsBlocks });
+        const selectedValues = dataItems.filter((item) => { var _a; return (_a = state.frozenState.simpleFilterState) === null || _a === void 0 ? void 0 : _a.find((id) => id === item.id); }).map((item) => item.name);
+        const selectedValuesLabel = selectedValues.join(` ${translate(state.frozenState.relation)} `);
+        if (!label && !selectedValuesLabel) {
+            setGroupPlaceHolder((options === null || options === void 0 ? void 0 : options.placeholder) || translate("Groups"));
+            return;
+        }
+        const separator = `${label && selectedValuesLabel ? ` ${translate(state.frozenState.relation)} ` : ""}`;
+        setGroupPlaceHolder(`${label}${separator}${selectedValuesLabel}`);
+    }, [uiState.searchValue, uiState.step, blocksMap, state, isWithColor, listLimit, uiState.currentAdjustmentId,
+        uiState.uncheckedAdjustmentIds, uiState.uncheckedAdvancedState, dataItems, options === null || options === void 0 ? void 0 : options.placeholder, translate]);
+    const getGroupsBox = (0, react_1.useCallback)(() => (0, jsx_runtime_1.jsx)(groupsFilterBox_1.GroupsFilterBox, { step: uiState.step, currentId: uiState.currentAdjustmentId, isWithColor: isWithColor || false, state: state, search: uiState.searchValue, blocks: uiState.searchValue && uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial ? [] : blocksMap[uiState.step], onChange: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? handleCheckboxItemAdjustmentClick : handleCheckboxChange, onClick: handleCheckboxItemClick, uncheckedItems: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdjustmentIds : [], uncheckedAdvancedState: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdvancedState : undefined, listLimit: listLimit }), [blocksMap, handleCheckboxChange, handleCheckboxItemAdjustmentClick, handleCheckboxItemClick, isWithColor, listLimit, state, uiState.currentAdjustmentId, uiState.searchValue, uiState.step,
+        uiState.uncheckedAdjustmentIds, uiState.uncheckedAdvancedState]);
+    const onSideWideChange = (newState) => { dispatchState({ type: stateActionType_1.StateActionType.SideWide, payload: newState }); };
+    const onRelationChange = (newRelation) => { dispatchState({ type: stateActionType_1.StateActionType.Relation, payload: newRelation }); };
+    const getSearchResult = (0, react_1.useCallback)(() => {
+        const result = (0, stateReducerHelper_1.getSearchResultFromObject)(state, uiState.searchValue);
+        return result ? (result.builtInGroups.length + result.userGroups.length).toString() : "0";
+    }, [state, uiState.searchValue]);
+    const getAdvancedDialog = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(advancedGroupsFilter_1.AdvancedGroupsFilter, { isOpen: uiState.isOpenAdvancedFilter, onClose: handleAdvancedDialogClose, onApply: handleAdvancedDialogApply, state: state.advancedFilterState, getData: getAdvancedData, errorHandler: errorHandler, dataItems: dataItems, isMobile: isMobile }), [uiState.isOpenAdvancedFilter, handleAdvancedDialogClose, handleAdvancedDialogApply, dataItems, state.advancedFilterState, getAdvancedData, errorHandler, isMobile]);
+    (0, react_1.useEffect)(() => {
+        if (!state.globalChanges) {
+            return;
+        }
+        const newState = {
+            groups: (0, groupsFilterHelper_1.convertPreparedFilters)(state.frozenState),
+            sideWide: state.frozenSideWideState
+        };
+        if ((initialFilterStateInner === null || initialFilterStateInner === void 0 ? void 0 : initialFilterStateInner.sideWide) === state.frozenSideWideState && (0, groupsFilterHelper_1.comparePreparedFilters)((0, groupsFilterHelper_1.prepareFilters)(initialFilterStateInner.groups), state.frozenState)) {
+            return;
+        }
+        const selectedValues = dataItems.filter(item => { var _a; return (_a = state.frozenState.simpleFilterState) === null || _a === void 0 ? void 0 : _a.find(id => id === item.id); }).map(item => item.name);
+        setGroupPlaceHolder(selectedValues.length > 0 ? selectedValues.join(", ") : translate("Groups"));
+        onChangeInner(Object.assign({}, newState));
+        dispatchState({ type: stateActionType_1.StateActionType.TurnOfGlobalChanges, payload: undefined });
+    }, [state.globalChanges, dataItems, translate, state.frozenState, state.frozenSideWideState, onChangeInner, initialFilterStateInner === null || initialFilterStateInner === void 0 ? void 0 : initialFilterStateInner.sideWide, initialFilterStateInner]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (((_a = prevInitialState.current) === null || _a === void 0 ? void 0 : _a.sideWide) === (initialFilterStateInner === null || initialFilterStateInner === void 0 ? void 0 : initialFilterStateInner.sideWide)
+            && (0, groupsFilterHelper_1.comparePreparedFilters)((0, groupsFilterHelper_1.prepareFilters)(initialFilterStateInner ? initialFilterStateInner.groups : (0, groupsHelper_1.getDefaultFilterState)()), (0, groupsFilterHelper_1.prepareFilters)(prevInitialState.current ? prevInitialState.current.groups : (0, groupsHelper_1.getDefaultFilterState)()))) {
+            return;
+        }
+        const stateForDispatch = (initialFilterStateInner === null || initialFilterStateInner === void 0 ? void 0 : initialFilterStateInner.groups) ?
+            { value: (0, groupsFilterHelper_1.prepareFilters)(initialFilterStateInner.groups), global: initialFilterStateInner.sideWide } : { value: (0, groupsFilterHelper_1.prepareFilters)((0, groupsHelper_1.getDefaultFilterState)()), global: false };
+        if (Object.keys(state.groupsMap).length > 0) {
+            prevInitialState.current = initialFilterStateInner ? Object.assign({}, initialFilterStateInner) : undefined;
+            dispatchState({ type: stateActionType_1.StateActionType.CreateInitialState, payload: stateForDispatch });
+            !(initialFilterStateInner === null || initialFilterStateInner === void 0 ? void 0 : initialFilterStateInner.groups) && dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetStep, payload: groupsFilterInterfaces_1.FilterMenuStep.Initial });
+        }
+    }, [initialFilterStateInner, state.groupsMap]);
+    const handleReadyForFocus = (0, react_1.useCallback)((isCurrentOpen) => {
+        var _a, _b, _c;
+        if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) {
+            return;
+        }
+        if (!isCurrentOpen) {
+            (_b = emptyInputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            return;
+        }
+        (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+    }, [inputRef]);
+    (0, react_1.useEffect)(() => {
+        var _a, _b, _c, _d;
+        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) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            prevSearchField.current = uiState.searchValue;
+        }
+        else {
+            const firstFocusable = chip ? (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR)[1] : (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
+            prevSearchField.current = "";
+            if (firstFocusable && !((_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.value)) {
+                firstFocusable.focus();
+            }
+        }
+    }, [uiState.searchValue, uiState.isOpen, uiState.step, handleSetStep, chip]);
+    (0, react_1.useEffect)(() => {
+        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)) {
+            dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetStep, payload: groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected });
+        }
+    }, [uiState.isOpen, state.frozenState, uiState.step]);
+    function handleEscape(e) {
+        var _a;
+        if (e && uiState.isOpen) {
+            (_a = e.nativeEvent) === null || _a === void 0 ? void 0 : _a.stopImmediatePropagation();
+        }
+        if (uiState.isOpenAdvancedFilter) {
+            handleAdvancedDialogClose();
+            return;
+        }
+        dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetIsOpen, payload: false });
+        if (triggerRef.current) {
+            triggerRef.current.focus();
+        }
+    }
+    (0, useEscape_1.useEscape)(triggerRef, handleEscape, uiState.isOpen);
+    const selectedCount = (0, stateReducerHelper_1.getFrozenCount)(state);
+    const isStateHasData = Object.keys(state.groupsMap).length > 0;
+    const isApplyDisabled = !(0, stateReducerHelper_1.isStateChanged)(state);
+    const memoizedContent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-groups-filter-menu", isMobile ? "zen-groups-filter-menu--mobile" : ""]), ref: menuRef, children: [(chip || isMobile) ? (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") }) }) : null, isStateHasData && !uiState.isLoadWithError && (0, jsx_runtime_1.jsxs)(groupsFilterMenu_1.GroupsFilterMenu, { onCancelClick: handleCancel, onApplyClick: handleApply, onResetClick: handleReset, isApplyDisabled: isApplyDisabled, hasFooter: !isMobile, 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" })] }), [isMobile, chip, onSearchChipChange, uiState.searchValue, uiState.isLoadWithError, uiState.step, uiState.currentAdjustmentId, groupsFilterId, translate,
+        isStateHasData, handleCancel, handleApply, handleReset, isApplyDisabled, state, handleAdvancedDialogOpen, handleCurrentlySelectedClick, getSearchResult,
+        getGroupsBox, handleBackButtonClick, handleHomeButtonClick, selectAllHandler, basicHandleBackButtonClick]);
+    const memoizedFooterButtons = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleApply, type: buttonType_1.ButtonType.Primary, disabled: isApplyDisabled, className: "zen-groups-filter-menu__apply-button zen-ellipsis", title: translate("Apply"), children: translate("Apply") }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleCancel, className: "zen-groups-filter-menu__cancel-button zen-ellipsis", title: translate("Cancel"), children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Tertiary, className: "zen-groups-filter-menu__reset-button zen-ellipsis", onClick: handleReset, children: translate("Clear") })] }), [handleApply, handleCancel, handleReset, isApplyDisabled, translate]);
+    const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { label: translate("Organization groups filter"), triggerRef: triggerRef, isOpen: uiState.isOpen, onHidePanel: onOptionsToggle, onCloseClick: onOptionsToggle, preventFirstFocus: true, onReadyForFocus: handleReadyForFocus, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: translate("Filter by group") }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: memoizedContent }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, { children: memoizedFooterButtons })] }), [translate, uiState.isOpen, onOptionsToggle, handleReadyForFocus, memoizedContent, memoizedFooterButtons]);
+    const memoizedDesktopView = (0, react_1.useMemo)(() => (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: memoizedContent }), [className, memoizedContent, onOptionsToggle, translate, uiState.isOpen, uiState.isOpenAdvancedFilter]);
+    const triggerClassName = (0, classNames_1.classNames)(["zen-groups-filter-trigger", isError ? "zen-groups-filter-trigger--error" : ""]);
+    if (isReadOnly) {
+        // TODO: how many items should we show?
+        return (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, { value: groupPlaceHolder });
+    }
+    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, className: triggerClassName, onChange: onSearchChange, isOpenPopup: uiState.isOpen, count: selectedCount, withGlobeIcon: state.frozenSideWideState && selectedCount > 0, inputRef: isMobile ? emptyInputRef : inputRef, handleClick: handleTriggerClick, ref: triggerRef, fullSize: fullSize, placeholder: groupPlaceHolder }), isMobile ? memoizedMobileView : memoizedDesktopView, uiState.isOpenAdvancedFilter && getAdvancedDialog] });
+};
+exports.GroupsFilterRaw = GroupsFilterRaw;
+exports.TRANSLATIONS = [
+    "Organization groups filter",
+    ...groupsFilterMenu_1.TRANSLATIONS,
+    ...groupsFilterTrigger_1.TRANSLATIONS,
+    ...groupsFilterAdjustmentState_1.TRANSLATIONS,
+    ...groupsFilterInitialState_1.TRANSLATIONS,
+    ...groupsFilterCurrentlySelectedState_1.TRANSLATIONS
+];

package/dist/groupsFilterRaw/groupsFilterTestData.d.ts

@@ -0,0 +1,37 @@
+import { ITypedHash } from "./groupsFilterInterfaces";
+export declare const groupsArr: ({
+    id: string;
+    name: string;
+    children: {
+        id: string;
+    }[];
+    color: {
+        a: number;
+        b: number;
+        g: number;
+        r: number;
+    };
+} | {
+    id: string;
+    name: string;
+    children: undefined;
+    color: {
+        a: number;
+        b: number;
+        g: number;
+        r: number;
+    };
+})[];
+export declare const groupsArrAdvanced: ({
+    id: string;
+    name: string;
+    children: {
+        id: string;
+        name: string;
+    }[];
+} | {
+    id: string;
+    name: string;
+    children?: undefined;
+})[];
+export declare const groupsMap: ITypedHash<unknown>;

package/dist/groupsFilterRaw/groupsFilterTestData.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.groupsMap = exports.groupsArrAdvanced = exports.groupsArr = void 0;
+exports.groupsArr = [
+    { id: "GroupCompanyId", name: "Company", children: [{ id: "ChildA" }, { id: "ChildB" }], color: { a: 255, b: 0, g: 165, r: 255 } },
+    { id: "ChildA", name: "A element", children: [{ id: "ChildC" }, { id: "ChildE" }], color: { a: 255, b: 255, g: 165, r: 0 } },
+    { id: "ChildB", name: "B element", children: [], color: { a: 255, b: 165, g: 255, r: 0 } },
+    { id: "ChildC", name: "C element", children: [{ id: "ChildD" }], color: { a: 255, b: 165, g: 100, r: 200 } },
+    { id: "ChildD", name: "D element", children: undefined, color: { a: 255, b: 110, g: 100, r: 240 } },
+    { id: "ChildE", name: "E element", children: undefined, color: { a: 135, b: 200, g: 100, r: 40 } }
+];
+exports.groupsArrAdvanced = [
+    { id: "GroupCompanyId", name: "Company", children: [{ id: "ChildA", name: "A element" }, { id: "ChildB", name: "B element" }] },
+    { id: "ChildA", name: "A element", children: [{ id: "ChildC", name: "C element" }, { id: "ChildE", name: "E element" }] },
+    { id: "ChildB", name: "B element" },
+    { id: "ChildC", name: "C element", children: [{ id: "ChildD", name: "D element" }] },
+    { id: "ChildD", name: "D element" },
+    { id: "ChildE", name: "E element" }
+];
+exports.groupsMap = {
+    GroupCompanyId: {
+        id: "GroupCompanyId",
+        name: "Company",
+        color: { a: 255, b: 0, g: 165, r: 255 },
+        children: [{ id: "ChildA", name: "A element", color: { a: 255, b: 255, g: 165, r: 0 }, children: [{ id: "ChildC", name: "C element", color: { a: 255, b: 165, g: 100, r: 200 },
+                        children: [{ id: "ChildD", name: "D element", color: { a: 255, b: 110, g: 100, r: 240 }, children: undefined,
+                                parent: { id: "ChildC", name: "C element", color: { a: 255, b: 165, g: 100, r: 200 }, children: [{ id: "ChildD" }] } }],
+                        parent: { id: "ChildA", name: "A element", color: { a: 255, b: 255, g: 165, r: 0 }, children: [{ id: "ChildC" }, { id: "ChildE" }] } },
+                    { id: "ChildE", name: "E element", color: { a: 135, b: 200, g: 100, r: 40 }, children: undefined, parent: { id: "ChildA", name: "A element", color: { a: 255, b: 255, g: 165, r: 0 }, children: [{ id: "ChildC" }, { id: "ChildE" }] } }], parent: { id: "GroupCompanyId", name: "Company", color: { a: 255, b: 0, g: 165, r: 255 }, children: [{ id: "ChildA" }, { id: "ChildB" }] }
+            }, { id: "ChildB", name: "B element", color: { a: 255, b: 165, g: 255, r: 0 },
+                children: [], parent: { id: "GroupCompanyId", name: "Company", color: { a: 255, b: 0, g: 165, r: 255 }, children: [{ id: "ChildA" }, { id: "ChildB" }] } }],
+        parent: { id: "root", name: "", parent: undefined,
+            children: [{ id: "GroupCompanyId", name: "Company", color: { a: 255, b: 0, g: 165, r: 255 }, parent: undefined, children: [
+                        { id: "ChildA", name: "A element", color: { a: 255, b: 255, g: 165, r: 0 }, children: [{ id: "ChildC", name: "C element", color: { a: 255, b: 165, g: 100, r: 200 }, children: [{ id: "ChildD", name: "D element", color: { a: 255, b: 110, g: 100, r: 240 }, children: undefined, parent: { id: "ChildC", name: "C element", color: { a: 255, b: 165, g: 100, r: 200 }, children: [{ id: "ChildD" }] } }],
+                                    parent: { id: "ChildA", name: "A element", color: { a: 255, b: 255, g: 165, r: 0 }, children: [{ id: "ChildC" }, { id: "ChildE" }] } },
+                                { id: "ChildE", name: "E element", color: { a: 135, b: 200, g: 100, r: 40 }, children: undefined,
+                                    parent: { id: "ChildA", name: "A element", color: { a: 255, b: 255, g: 165, r: 0 }, children: [{ id: "ChildC" }, { id: "ChildE" }] } }], parent: { id: "GroupCompanyId", name: "Company", color: { a: 255, b: 0, g: 165, r: 255 }, children: [{ id: "ChildA" }, { id: "ChildB" }] } },
+                        { id: "ChildB", name: "B element", color: { a: 255, b: 165, g: 255, r: 0 }, children: [], parent: { id: "GroupCompanyId", name: "Company", color: { a: 255, b: 0, g: 165, r: 255 }, children: [{ id: "ChildA" }, { id: "ChildB" }] } }
+                    ] }]
+        }
+    },
+    ChildA: {
+        id: "ChildA",
+        name: "A element",
+        color: { a: 255, b: 255, g: 165, r: 0 },
+        children: [{ id: "ChildC", name: "C element", color: { a: 255, b: 165, g: 100, r: 200 },
+                children: [{ id: "ChildD", name: "D element", color: { a: 255, b: 110, g: 100, r: 240 }, children: undefined,
+                        parent: { id: "ChildC", name: "C element", color: { a: 255, b: 165, g: 100, r: 200 }, children: [{ id: "ChildD" }] }
+                    }],
+                parent: { id: "ChildA", name: "A element", color: { a: 255, b: 255, g: 165, r: 0 }, children: [{ id: "ChildC" }, { id: "ChildE" }] } }, { id: "ChildE", name: "E element",
+                color: { a: 135, b: 200, g: 100, r: 40 }, children: undefined,
+                parent: { id: "ChildA", name: "A element", color: { a: 255, b: 255, g: 165, r: 0 }, children: [{ id: "ChildC" }, { id: "ChildE" }] } }],
+        parent: { id: "GroupCompanyId", name: "Company", color: { a: 255, b: 0, g: 165, r: 255 }, children: [{ id: "ChildA" }, { id: "ChildB" }] }
+    },
+    ChildB: { id: "ChildB", name: "B element",
+        color: { a: 255, b: 165, g: 255, r: 0 },
+        children: [],
+        parent: { id: "GroupCompanyId", name: "Company", color: { a: 255, b: 0, g: 165, r: 255 }, children: [{ id: "ChildA" }, { id: "ChildB" }] }
+    },
+    ChildC: { id: "ChildC", name: "C element",
+        color: { a: 255, b: 165, g: 100, r: 200 },
+        children: [{ id: "ChildD", name: "D element", color: { a: 255, b: 110, g: 100, r: 240 }, children: undefined,
+                parent: { id: "ChildC", name: "C element", color: { a: 255, b: 165, g: 100, r: 200 }, children: [{ id: "ChildD" }] } }],
+        parent: { id: "ChildA", name: "A element", color: { a: 255, b: 255, g: 165, r: 0 }, children: [{ id: "ChildC" }, { id: "ChildE" }] }
+    },
+    ChildD: { id: "ChildD", name: "D element",
+        color: { a: 255, b: 110, g: 100, r: 240 },
+        children: undefined,
+        parent: { id: "ChildC", name: "C element", color: { a: 255, b: 165, g: 100, r: 200 }, children: [{ id: "ChildD" }] }
+    },
+    ChildE: { id: "ChildE", name: "E element",
+        color: { a: 135, b: 200, g: 100, r: 40 },
+        children: undefined,
+        parent: { id: "ChildA", name: "A element", color: { a: 255, b: 255, g: 165, r: 0 }, children: [{ id: "ChildC" }, { id: "ChildE" }] }
+    }
+};

package/dist/{groupsFilter → groupsFilterRaw}/groupsFilterTrigger.d.ts

@@ -1,5 +1,5 @@
 import React, { ChangeEvent } from "react";
-import "./groupsFilter.less";
+import "./groupsFilterRaw.less";
 interface IGroupsFilterTrigger {
     value: string;
     className?: string;
@@ -13,9 +13,10 @@ interface IGroupsFilterTrigger {
     inputRef: React.RefObject<HTMLInputElement | null>;
     fullSize?: boolean;
     ref?: React.RefObject<HTMLDivElement | null>;
+    isError?: boolean;
 }
 export declare const GroupsFilterTrigger: {
-    ({ value, className, onChange, placeholder, isOpenPopup, count, withGlobeIcon, inputRef, handleClick, fullSize, ref, ...otherProps }: IGroupsFilterTrigger): import("react/jsx-runtime").JSX.Element;
+    ({ value, className, onChange, placeholder, isOpenPopup, count, withGlobeIcon, inputRef, handleClick, fullSize, ref, isError, ...otherProps }: IGroupsFilterTrigger): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const TRANSLATIONS: string[];

package/dist/{groupsFilter → groupsFilterRaw}/groupsFilterTrigger.js

@@ -20,7 +20,7 @@ const textInputRaw_1 = require("../textInputRaw/textInputRaw");
 const iconChevronDownSmall_1 = require("../icons/iconChevronDownSmall");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const GroupsFilterTrigger = (_a) => {
-    var { value, className = "", onChange, placeholder, isOpenPopup, count, withGlobeIcon, inputRef, handleClick, fullSize, ref } = _a, otherProps = __rest(_a, ["value", "className", "onChange", "placeholder", "isOpenPopup", "count", "withGlobeIcon", "inputRef", "handleClick", "fullSize", "ref"]);
+    var { value, className = "", onChange, placeholder, isOpenPopup, count, withGlobeIcon, inputRef, handleClick, fullSize, ref, isError } = _a, otherProps = __rest(_a, ["value", "className", "onChange", "placeholder", "isOpenPopup", "count", "withGlobeIcon", "inputRef", "handleClick", "fullSize", "ref", "isError"]);
     const { translate } = (0, useLanguage_1.useLanguage)();
     const groupsFilterId = (0, react_1.useId)();
     const handleKeydown = (e) => {
@@ -38,7 +38,7 @@ const GroupsFilterTrigger = (_a) => {
         }
         handleClick();
     };
-    return (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classNames_1.classNames)(["zen-groups-filter"]), ref: ref }, otherProps, { onClick: clickHandler, role: "combobox", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-groups-filter__search-container", fullSize ? "zen-groups-filter__search-container--full-size" : "", className]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-groups-filter__input-container", onKeyDown: handleKeydown, children: (0, jsx_runtime_1.jsx)(textInputRaw_1.TextInputRaw, { value: value, placeholder: placeholder || translate("Filter by group"), className: (0, classNames_1.classNames)(["zen-groups-filter__input", count > 0 ? "zen-groups-filter__input--selected" : ""]), onChange: onChange, disabled: false, type: "text", ref: inputRef, id: groupsFilterId }) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-groups-filter__search-input zen-groups-filter__search-input--post", children: (0, jsx_runtime_1.jsx)(groupsFilterLabelBox_1.GroupsFilterLabelBox, { count: count, withGlobeIcon: withGlobeIcon }) })] }), (0, jsx_runtime_1.jsx)("button", { tabIndex: -1, onMouseDown: e => e.preventDefault(), "aria-hidden": "true", type: "button", className: "zen-groups-filter__popup-trigger", title: translate("Open filter"), children: (0, jsx_runtime_1.jsx)(iconChevronDownSmall_1.IconChevronDownSmall, { className: isOpenPopup ? "zen-groups-filter__arrow-icon--up" : "zen-groups-filter__arrow-icon--down", size: "large" }) })] }));
+    return (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classNames_1.classNames)(["zen-groups-filter"]), ref: ref }, otherProps, { onClick: clickHandler, role: "combobox", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-groups-filter__search-container", isError ? "zen-groups-filter__search-container--error" : "", fullSize ? "zen-groups-filter__search-container--full-size" : "", className]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-groups-filter__input-container", onKeyDown: handleKeydown, children: (0, jsx_runtime_1.jsx)(textInputRaw_1.TextInputRaw, { value: value, placeholder: placeholder || translate("Filter by group"), className: (0, classNames_1.classNames)(["zen-groups-filter__input", count > 0 ? "zen-groups-filter__input--selected" : ""]), onChange: onChange, disabled: false, type: "text", ref: inputRef, id: groupsFilterId }) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-groups-filter__search-input zen-groups-filter__search-input--post", children: (0, jsx_runtime_1.jsx)(groupsFilterLabelBox_1.GroupsFilterLabelBox, { count: count, withGlobeIcon: withGlobeIcon }) })] }), (0, jsx_runtime_1.jsx)("button", { tabIndex: -1, onMouseDown: e => e.preventDefault(), "aria-hidden": "true", type: "button", className: (0, classNames_1.classNames)(["zen-groups-filter__popup-trigger", isError ? "zen-groups-filter__popup-trigger--error" : ""]), title: translate("Open filter"), children: (0, jsx_runtime_1.jsx)(iconChevronDownSmall_1.IconChevronDownSmall, { className: isOpenPopup ? "zen-groups-filter__arrow-icon--up" : "zen-groups-filter__arrow-icon--down", size: "large" }) })] }));
 };
 exports.GroupsFilterTrigger = GroupsFilterTrigger;
 exports.GroupsFilterTrigger.displayName = "GroupsFilterTrigger";

package/dist/groupsFilterRaw/stateReducer/stateAction.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/groupsFilterRaw/testData.d.ts

@@ -0,0 +1,26 @@
+export declare const mockGroupsArr: {
+    id: string;
+    color: {
+        a: number;
+        b: number;
+        g: number;
+        r: number;
+    };
+    isGlobalReportingGroup: boolean;
+    children: {
+        id: string;
+    }[];
+    comments: string;
+    name: string;
+    reference: string;
+}[];
+interface IEntityWithId {
+    id: string;
+}
+interface IDropdownItem extends IEntityWithId {
+    name?: string;
+    children?: IEntityWithId[];
+}
+export declare function createData(count: number, hasChildren: boolean): IDropdownItem[];
+export declare const getGroupsList: (grArr: IDropdownItem[], currentGroup: string) => IDropdownItem[];
+export {};