@geotab/zenith 3.1.0 → 3.1.1-beta.1

package/esm/groupsFilterRaw/groupsFilterRaw.js

@@ -0,0 +1,352 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useMemo, useReducer, useRef, useState } from "react";
+import { FilterMenuStep } from "./groupsFilterInterfaces";
+import { GroupsFilterMenu, TRANSLATIONS as GroupsFilterMenuTranslations } from "./groupsFilterMenu";
+import { GroupsFilterInitialState, TRANSLATIONS as GroupsFilterInitialStateTranslations } from "./groupsFilterInitialState";
+import { GroupsFilterAdjustmentState, TRANSLATIONS as GroupsFilterAdjustmentStateTranslations } from "./groupsFilterAdjustmentState";
+import { GroupsFilterCurrentlySelectedState, TRANSLATIONS as GroupsFilterCurrentlySelectedStateTranslations } from "./groupsFilterCurrentlySelectedState";
+import { defaultPreparedFilterState, getInitialState, stateReducer } from "./stateReducer/stateReducer";
+import { StateActionType } from "./stateReducer/stateActionType";
+import { ENTIRE_ORGANIZATION_GROUP_ID, getDefaultFilterState } from "./groupsHelper";
+import { getBackButtonName, isAllChildrenSelected } from "./groupsFilterStatesHelper";
+import { ADVANCED_FILTER_ID, GroupsFilterBox } from "./groupsFilterBox";
+import { convertPreparedFilters, prepareFilters, isFilterHasSelection, comparePreparedFilters } from "./groupsFilterHelper";
+import { GroupsFilterTrigger, TRANSLATIONS as GroupsFilterTriggerTranslations } from "./groupsFilterTrigger";
+import { useEscape } from "../commonHelpers/hooks/useEscape";
+import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
+import { ControlledPopup } from "../controlledPopup/controlledPopup";
+import { getCurrentState, getCurrentlySelectedCount, getFrozenCount, getGroupsTreeItem, getSearchResultFromObject, isStateChanged } from "./stateReducer/stateReducerHelper";
+import { uiInitialGroupsFilterState, uiStateReducer } from "./uiStateReducer/uiStateReducer";
+import { UiStateActionType } from "./uiStateReducer/uiStateActionType";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { AdvancedGroupsFilter } from "../advancedGroupsFilter/advancedGroupsFilter";
+import { useLanguage } from "../utils/localization/useLanguage";
+import { getAdvancedFilterValue, getAdvancedLabel } from "./groupsFilterAdvancedValue";
+import { SkeletonList } from "../skeletonList/skeletonList";
+import { Chip } from "../chip/chip";
+import { useChipStatus } from "../chip/chipStatusProvider";
+import { SearchInput } from "../searchInput/searchInput";
+import { Button } from "../button/button";
+import { ButtonType } from "../button/buttonType";
+import { useMobile } from "../commonHelpers/hooks/useMobile";
+import { FooterButtons } from "../footerButtons/footerButtons";
+import { MobileSheet } from "../mobileSheet/mobileSheet";
+import { isFormItem } from "../commonHelpers/isFormItem";
+import { useFormField } from "../commonHelpers/hooks/useFormField";
+import { ReviewTextControl } from "../formGroup/components/reviewTextControl";
+// eslint-disable-next-line max-len, complexity
+export 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 = useChipStatus();
+    const { field } = useFormField(props.controller);
+    const isFormItemValue = 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 } = useLanguage();
+    const [groupPlaceHolder, setGroupPlaceHolder] = useState((options === null || options === void 0 ? void 0 : options.placeholder) || translate("Groups"));
+    const [state, dispatchState] = useReducer(stateReducer, getInitialState(translate, initialFilterState));
+    const [uiState, dispatchUiState] = useReducer(uiStateReducer, uiInitialGroupsFilterState);
+    const [dataItems, setDataItems] = useState([]);
+    const isMobile = useMobile();
+    const inputRef = useRef(null);
+    const emptyInputRef = useRef(null);
+    const triggerRef = useRef(null);
+    const menuRef = useRef(null);
+    const prevInitialState = useRef(initialFilterStateInner);
+    const prevSearchField = useRef("");
+    const groupsFilterId = useId();
+    const blocksMap = useMemo(() => [["builtInGroups", "userGroups"], ["advancedGroups", "builtInGroups", "userGroups"], ["builtInGroups", "userGroups"]], []);
+    const onOptionsToggle = useCallback(() => { dispatchUiState({ type: UiStateActionType.ToggleOpen, payload: undefined }); }, []);
+    const handleSetStep = useCallback((newStep) => {
+        var _a;
+        uiState.step !== FilterMenuStep.CurrentlySelected && dispatchUiState({ type: UiStateActionType.ClearUncheckedState, payload: undefined });
+        dispatchUiState({ type: UiStateActionType.SetStep, payload: newStep });
+        if (((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) && newStep !== FilterMenuStep.Initial) {
+            inputRef.current.value = "";
+            dispatchUiState({ type: UiStateActionType.SetSearchValue, payload: "" });
+        }
+    }, [uiState.step]);
+    const onSearchChange = useCallback((event) => {
+        const newValue = event.currentTarget.value;
+        dispatchUiState({ type: UiStateActionType.SetSearchValue, payload: newValue });
+        dispatchUiState({ type: UiStateActionType.SetIsOpen, payload: true });
+        uiState.step !== FilterMenuStep.Initial && handleSetStep(FilterMenuStep.Initial);
+    }, [handleSetStep, uiState.step]);
+    const onSearchChipChange = useCallback((newValue) => {
+        dispatchUiState({ type: UiStateActionType.SetSearchValue, payload: newValue || "" });
+        dispatchUiState({ type: UiStateActionType.SetIsOpen, payload: true });
+        uiState.step !== FilterMenuStep.Initial && handleSetStep(FilterMenuStep.Initial);
+    }, [handleSetStep, uiState.step]);
+    const handleFocusOnClose = 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 = useCallback(() => {
+        dispatchUiState({ type: UiStateActionType.SetIsOpen, payload: false });
+        dispatchState({ type: StateActionType.SetState, payload: state.frozenState });
+        dispatchState({ type: StateActionType.SideWide, payload: state.frozenSideWideState });
+        handleSetStep(FilterMenuStep.Initial);
+        handleFocusOnClose();
+    }, [state.frozenState, state.frozenSideWideState, handleSetStep, handleFocusOnClose]);
+    const handleApply = useCallback(() => {
+        dispatchUiState({ type: UiStateActionType.SetIsOpen, payload: false });
+        dispatchUiState({ type: UiStateActionType.SetSearchValue, payload: "" });
+        dispatchUiState({ type: UiStateActionType.ClearUncheckedState, payload: undefined });
+        if (inputRef.current) {
+            inputRef.current.value = "";
+        }
+        handleSetStep(FilterMenuStep.Initial);
+        dispatchState({ type: StateActionType.FreezeState, payload: getCurrentState(state) });
+        dispatchState({ type: StateActionType.FreezeSideWide, payload: state.sideWideState });
+        handleFocusOnClose();
+    }, [handleSetStep, state, handleFocusOnClose]);
+    const handleReset = useCallback(() => {
+        dispatchState({ type: StateActionType.ResetSelection, payload: undefined });
+    }, []);
+    const handleChipClose = useCallback(() => {
+        dispatchState({ type: StateActionType.ResetSelection, payload: undefined });
+        dispatchUiState({ type: UiStateActionType.SetIsOpen, payload: false });
+        dispatchUiState({ type: UiStateActionType.SetSearchValue, payload: "" });
+        dispatchUiState({ type: UiStateActionType.ClearUncheckedState, payload: undefined });
+        if (inputRef.current) {
+            inputRef.current.value = "";
+        }
+        handleSetStep(FilterMenuStep.Initial);
+        dispatchState({ type: StateActionType.FreezeState, payload: defaultPreparedFilterState });
+        dispatchState({ type: StateActionType.FreezeSideWide, payload: false });
+    }, [handleSetStep]);
+    const handleCheckboxChange = useCallback((value) => {
+        if (value.partial) {
+            dispatchState({ type: StateActionType.DeselectAllChildren, payload: value.id });
+        }
+        else {
+            dispatchState({ type: StateActionType.ChangeSelection, payload: { value: value.state, itemId: value.id } });
+        }
+    }, [dispatchState]);
+    const handleCheckboxItemClick = useCallback((id) => {
+        dispatchUiState({ type: UiStateActionType.SetCurrentAdjustmentId, payload: id });
+        handleSetStep(id ? FilterMenuStep.Adjustment : FilterMenuStep.Initial);
+    }, [dispatchUiState, handleSetStep]);
+    const handleCheckboxItemAdjustmentClick = useCallback((value) => {
+        if (value.id === ADVANCED_FILTER_ID) {
+            const currentVal = value.state ? uiState.uncheckedAdvancedState : state.advancedFilterState;
+            !value.state && dispatchUiState({ type: UiStateActionType.SetUncheckedAdvancedState, payload: currentVal });
+            !value.state && dispatchState({ type: StateActionType.SetAdvancedFilterState, payload: getDefaultFilterState() });
+            value.state && dispatchState({ type: StateActionType.SetAdvancedFilterState, payload: currentVal || state.frozenState.advancedFilterState || getDefaultFilterState() });
+            return;
+        }
+        dispatchUiState({ type: UiStateActionType.SetUncheckedAdjustmentIds, payload: !value.state ?
+                [...uiState.uncheckedAdjustmentIds, value.id] : uiState.uncheckedAdjustmentIds.filter(id => id !== value.id) });
+        dispatchState({ type: StateActionType.ChangeSelection, payload: { value: value.state, itemId: value.id } });
+    }, [dispatchState, dispatchUiState, state.advancedFilterState, state.frozenState.advancedFilterState, uiState.uncheckedAdvancedState, uiState.uncheckedAdjustmentIds]);
+    const basicHandleBackButtonClick = useCallback(() => {
+        handleSetStep(FilterMenuStep.Initial);
+    }, [handleSetStep]);
+    const handleBackButtonClick = useCallback(() => {
+        const currentEl = uiState.currentAdjustmentId ? 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 !== ENTIRE_ORGANIZATION_GROUP_ID;
+        dispatchUiState({ type: UiStateActionType.SetCurrentAdjustmentId, payload: isNotRoot ? currentEl.parent.id : undefined });
+        handleSetStep(isNotRoot ? FilterMenuStep.Adjustment : FilterMenuStep.Initial);
+    }, [basicHandleBackButtonClick, handleSetStep, state, uiState.currentAdjustmentId]);
+    const handleHomeButtonClick = useCallback(() => {
+        handleSetStep(FilterMenuStep.Initial);
+        uiState.currentAdjustmentId && dispatchUiState({ type: UiStateActionType.SetCurrentAdjustmentId, payload: undefined });
+    }, [handleSetStep, uiState.currentAdjustmentId, dispatchUiState]);
+    const handleCurrentlySelectedClick = useCallback(() => {
+        handleSetStep(FilterMenuStep.CurrentlySelected);
+    }, [handleSetStep]);
+    const selectAllHandler = useCallback((isAllSelected) => {
+        if (!uiState.currentAdjustmentId) {
+            return;
+        }
+        dispatchState({ type: isAllSelected ? StateActionType.DeselectAllChildren : StateActionType.SelectAllChildren, payload: uiState.currentAdjustmentId });
+    }, [uiState.currentAdjustmentId, dispatchState]);
+    const handleTriggerClick = () => {
+        dispatchUiState({ type: UiStateActionType.ToggleOpen, payload: undefined });
+    };
+    const handleAdvancedDialogOpen = useCallback(() => {
+        dispatchUiState({ type: UiStateActionType.SetAdvancedFilterIsOpen, payload: true });
+    }, []);
+    const handleAdvancedDialogClose = useCallback(() => {
+        dispatchUiState({ type: UiStateActionType.SetAdvancedFilterIsOpen, payload: false });
+    }, []);
+    const handleAdvancedDialogApply = useCallback((val) => {
+        dispatchUiState({ type: UiStateActionType.SetAdvancedFilterIsOpen, payload: false });
+        dispatchState({ type: StateActionType.SetAdvancedFilterState, payload: val.items.length ? val : getDefaultFilterState() });
+    }, []);
+    const getAdvancedData = 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]);
+    useEffect(() => {
+        dispatchUiState({ type: UiStateActionType.SetLoadWithError, payload: false });
+        dataLoader().then(groups => {
+            dispatchState({ type: StateActionType.CreateGroupsMap, payload: groups });
+            setDataItems(groups);
+        }).catch((e) => {
+            dispatchUiState({ type: UiStateActionType.SetLoadWithError, payload: true });
+            errorHandler(e);
+        });
+    }, [dataLoader, errorHandler]);
+    useEffect(() => {
+        const step = uiState.step;
+        if (step !== FilterMenuStep.CurrentlySelected) {
+            return;
+        }
+        const groupsBlocks = getAdvancedFilterValue({
+            blocks: blocksMap[uiState.step],
+            state,
+            isWithColor: isWithColor || false,
+            uncheckedItems: uiState.step === FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdjustmentIds : [],
+            uncheckedAdvancedState: uiState.step === FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdvancedState : undefined,
+            listLimit
+        });
+        const label = 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 = useCallback(() => _jsx(GroupsFilterBox, { step: uiState.step, currentId: uiState.currentAdjustmentId, isWithColor: isWithColor || false, state: state, search: uiState.searchValue, blocks: uiState.searchValue && uiState.step === FilterMenuStep.Initial ? [] : blocksMap[uiState.step], onChange: uiState.step === FilterMenuStep.CurrentlySelected ? handleCheckboxItemAdjustmentClick : handleCheckboxChange, onClick: handleCheckboxItemClick, uncheckedItems: uiState.step === FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdjustmentIds : [], uncheckedAdvancedState: uiState.step === 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.SideWide, payload: newState }); };
+    const onRelationChange = (newRelation) => { dispatchState({ type: StateActionType.Relation, payload: newRelation }); };
+    const getSearchResult = useCallback(() => {
+        const result = getSearchResultFromObject(state, uiState.searchValue);
+        return result ? (result.builtInGroups.length + result.userGroups.length).toString() : "0";
+    }, [state, uiState.searchValue]);
+    const getAdvancedDialog = useMemo(() => _jsx(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]);
+    useEffect(() => {
+        if (!state.globalChanges) {
+            return;
+        }
+        const newState = {
+            groups: convertPreparedFilters(state.frozenState),
+            sideWide: state.frozenSideWideState
+        };
+        if ((initialFilterStateInner === null || initialFilterStateInner === void 0 ? void 0 : initialFilterStateInner.sideWide) === state.frozenSideWideState && comparePreparedFilters(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.TurnOfGlobalChanges, payload: undefined });
+    }, [state.globalChanges, dataItems, translate, state.frozenState, state.frozenSideWideState, onChangeInner, initialFilterStateInner === null || initialFilterStateInner === void 0 ? void 0 : initialFilterStateInner.sideWide, initialFilterStateInner]);
+    useEffect(() => {
+        var _a;
+        if (((_a = prevInitialState.current) === null || _a === void 0 ? void 0 : _a.sideWide) === (initialFilterStateInner === null || initialFilterStateInner === void 0 ? void 0 : initialFilterStateInner.sideWide)
+            && comparePreparedFilters(prepareFilters(initialFilterStateInner ? initialFilterStateInner.groups : getDefaultFilterState()), prepareFilters(prevInitialState.current ? prevInitialState.current.groups : getDefaultFilterState()))) {
+            return;
+        }
+        const stateForDispatch = (initialFilterStateInner === null || initialFilterStateInner === void 0 ? void 0 : initialFilterStateInner.groups) ?
+            { value: prepareFilters(initialFilterStateInner.groups), global: initialFilterStateInner.sideWide } : { value: prepareFilters(getDefaultFilterState()), global: false };
+        if (Object.keys(state.groupsMap).length > 0) {
+            prevInitialState.current = initialFilterStateInner ? Object.assign({}, initialFilterStateInner) : undefined;
+            dispatchState({ type: StateActionType.CreateInitialState, payload: stateForDispatch });
+            !(initialFilterStateInner === null || initialFilterStateInner === void 0 ? void 0 : initialFilterStateInner.groups) && dispatchUiState({ type: UiStateActionType.SetStep, payload: FilterMenuStep.Initial });
+        }
+    }, [initialFilterStateInner, state.groupsMap]);
+    const handleReadyForFocus = 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]);
+    useEffect(() => {
+        var _a, _b, _c, _d;
+        if (!uiState.isOpen) {
+            return;
+        }
+        if (uiState.searchValue && uiState.step === FilterMenuStep.Initial || uiState.step === 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(FOCUSABLE_SELECTOR)[1] : (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.querySelector(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]);
+    useEffect(() => {
+        var _a;
+        uiState.isOpen && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus());
+    }, [inputRef, uiState.isOpen]);
+    useEffect(() => {
+        if (!uiState.isOpen && uiState.step === FilterMenuStep.Initial && isFilterHasSelection(state.frozenState)) {
+            dispatchUiState({ type: UiStateActionType.SetStep, payload: 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.SetIsOpen, payload: false });
+        if (triggerRef.current) {
+            triggerRef.current.focus();
+        }
+    }
+    useEscape(triggerRef, handleEscape, uiState.isOpen);
+    const selectedCount = getFrozenCount(state);
+    const isStateHasData = Object.keys(state.groupsMap).length > 0;
+    const isApplyDisabled = !isStateChanged(state);
+    const memoizedContent = useMemo(() => _jsxs("div", { className: classNames(["zen-groups-filter-menu", isMobile ? "zen-groups-filter-menu--mobile" : ""]), ref: menuRef, children: [(chip || isMobile) ? _jsx("div", { className: "zen-groups-filter__input-container", children: _jsx(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 && _jsxs(GroupsFilterMenu, { onCancelClick: handleCancel, onApplyClick: handleApply, onResetClick: handleReset, isApplyDisabled: isApplyDisabled, hasFooter: !isMobile, children: [uiState.step === FilterMenuStep.Initial && _jsx(GroupsFilterInitialState, { siteWideState: state.sideWideState, onDialogButtonClick: handleAdvancedDialogOpen, count: getCurrentlySelectedCount(state), onSiteWideChange: onSideWideChange, onCurrentlySelectedClick: handleCurrentlySelectedClick, searchResult: uiState.searchValue ? getSearchResult() : "", children: getGroupsBox() }), uiState.step === FilterMenuStep.Adjustment && _jsx(GroupsFilterAdjustmentState, { onBackButtonClick: handleBackButtonClick, onHomeButtonClick: handleHomeButtonClick, onSelectAllClick: selectAllHandler, backButtonName: getBackButtonName(state, uiState.currentAdjustmentId), isAllSelected: isAllChildrenSelected(state, uiState.currentAdjustmentId), children: getGroupsBox() }), uiState.step === FilterMenuStep.CurrentlySelected && _jsx(GroupsFilterCurrentlySelectedState, { siteWideState: state.sideWideState, relation: state.relation, count: getCurrentlySelectedCount(state), onBackButtonClick: basicHandleBackButtonClick, onSiteWideChange: onSideWideChange, onRelationChange: onRelationChange, children: getGroupsBox() })] }), !uiState.isLoadWithError && !isStateHasData && !Object.keys(state.groupsMap).length && _jsx(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 = useMemo(() => _jsxs(FooterButtons, { children: [_jsx(Button, { onClick: handleApply, type: ButtonType.Primary, disabled: isApplyDisabled, className: "zen-groups-filter-menu__apply-button zen-ellipsis", title: translate("Apply"), children: translate("Apply") }), _jsx(Button, { onClick: handleCancel, className: "zen-groups-filter-menu__cancel-button zen-ellipsis", title: translate("Cancel"), children: translate("Cancel") }), _jsx(Button, { type: ButtonType.Tertiary, className: "zen-groups-filter-menu__reset-button zen-ellipsis", onClick: handleReset, children: translate("Clear") })] }), [handleApply, handleCancel, handleReset, isApplyDisabled, translate]);
+    const memoizedMobileView = useMemo(() => _jsxs(MobileSheet, { label: translate("Organization groups filter"), triggerRef: triggerRef, isOpen: uiState.isOpen, onHidePanel: onOptionsToggle, onCloseClick: onOptionsToggle, preventFirstFocus: true, onReadyForFocus: handleReadyForFocus, children: [_jsx(MobileSheet.Title, { children: translate("Filter by group") }), _jsx(MobileSheet.Content, { children: memoizedContent }), _jsx(MobileSheet.Footer, { children: memoizedFooterButtons })] }), [translate, uiState.isOpen, onOptionsToggle, handleReadyForFocus, memoizedContent, memoizedFooterButtons]);
+    const memoizedDesktopView = useMemo(() => _jsx(ControlledPopup, { isOpen: uiState.isOpen, className: 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 = classNames(["zen-groups-filter-trigger", isError ? "zen-groups-filter-trigger--error" : ""]);
+    if (isReadOnly) {
+        // TODO: how many items should we show?
+        return _jsx(ReviewTextControl, { value: groupPlaceHolder });
+    }
+    return _jsxs(_Fragment, { children: [chip ? _jsx(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 })
+                : _jsx(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] });
+};
+export const TRANSLATIONS = [
+    "Organization groups filter",
+    ...GroupsFilterMenuTranslations,
+    ...GroupsFilterTriggerTranslations,
+    ...GroupsFilterAdjustmentStateTranslations,
+    ...GroupsFilterInitialStateTranslations,
+    ...GroupsFilterCurrentlySelectedStateTranslations
+];

package/esm/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/esm/groupsFilterRaw/groupsFilterTestData.js

@@ -0,0 +1,73 @@
+export const 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 } }
+];
+export const 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" }
+];
+export const 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/esm/{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/esm/{groupsFilter → groupsFilterRaw}/groupsFilterTrigger.js

@@ -17,7 +17,7 @@ import { TextInputRaw } from "../textInputRaw/textInputRaw";
 import { IconChevronDownSmall } from "../icons/iconChevronDownSmall";
 import { useLanguage } from "../utils/localization/useLanguage";
 export 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 } = useLanguage();
     const groupsFilterId = useId();
     const handleKeydown = (e) => {
@@ -35,7 +35,7 @@ export const GroupsFilterTrigger = (_a) => {
         }
         handleClick();
     };
-    return _jsxs("div", Object.assign({ className: classNames(["zen-groups-filter"]), ref: ref }, otherProps, { onClick: clickHandler, role: "combobox", children: [_jsxs("div", { className: classNames(["zen-groups-filter__search-container", fullSize ? "zen-groups-filter__search-container--full-size" : "", className]), children: [_jsx("div", { className: "zen-groups-filter__input-container", onKeyDown: handleKeydown, children: _jsx(TextInputRaw, { value: value, placeholder: placeholder || translate("Filter by group"), className: classNames(["zen-groups-filter__input", count > 0 ? "zen-groups-filter__input--selected" : ""]), onChange: onChange, disabled: false, type: "text", ref: inputRef, id: groupsFilterId }) }), _jsx("div", { className: "zen-groups-filter__search-input zen-groups-filter__search-input--post", children: _jsx(GroupsFilterLabelBox, { count: count, withGlobeIcon: withGlobeIcon }) })] }), _jsx("button", { tabIndex: -1, onMouseDown: e => e.preventDefault(), "aria-hidden": "true", type: "button", className: "zen-groups-filter__popup-trigger", title: translate("Open filter"), children: _jsx(IconChevronDownSmall, { className: isOpenPopup ? "zen-groups-filter__arrow-icon--up" : "zen-groups-filter__arrow-icon--down", size: "large" }) })] }));
+    return _jsxs("div", Object.assign({ className: classNames(["zen-groups-filter"]), ref: ref }, otherProps, { onClick: clickHandler, role: "combobox", children: [_jsxs("div", { className: classNames(["zen-groups-filter__search-container", isError ? "zen-groups-filter__search-container--error" : "", fullSize ? "zen-groups-filter__search-container--full-size" : "", className]), children: [_jsx("div", { className: "zen-groups-filter__input-container", onKeyDown: handleKeydown, children: _jsx(TextInputRaw, { value: value, placeholder: placeholder || translate("Filter by group"), className: classNames(["zen-groups-filter__input", count > 0 ? "zen-groups-filter__input--selected" : ""]), onChange: onChange, disabled: false, type: "text", ref: inputRef, id: groupsFilterId }) }), _jsx("div", { className: "zen-groups-filter__search-input zen-groups-filter__search-input--post", children: _jsx(GroupsFilterLabelBox, { count: count, withGlobeIcon: withGlobeIcon }) })] }), _jsx("button", { tabIndex: -1, onMouseDown: e => e.preventDefault(), "aria-hidden": "true", type: "button", className: classNames(["zen-groups-filter__popup-trigger", isError ? "zen-groups-filter__popup-trigger--error" : ""]), title: translate("Open filter"), children: _jsx(IconChevronDownSmall, { className: isOpenPopup ? "zen-groups-filter__arrow-icon--up" : "zen-groups-filter__arrow-icon--down", size: "large" }) })] }));
 };
 GroupsFilterTrigger.displayName = "GroupsFilterTrigger";
 export const TRANSLATIONS = [

package/esm/groupsFilterRaw/stateReducer/stateAction.js

@@ -0,0 +1 @@
+export {};

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