@geotab/zenith 3.1.0 → 3.1.1-beta.1

package/esm/gridLayout/utils/updateGridStateWithDefaultValues.js

@@ -9,6 +9,7 @@ import { CardContainer } from "../../cardContainer/cardContainer";
 import { BannerUpsell } from "../../banner/bannerUpsell";
 import { FormStepper } from "../../formStepper/formStepper";
 import { FormStepperButtons } from "../../formStepperButtons/formStepperButtons";
+import { Divider } from "../../divider/divider";
 export const updateGridStateWithDefaultValues = (item, gridState) => {
     const { lg, md, sm } = gridState;
     if (lg || md || sm) {
@@ -41,4 +42,7 @@ export const updateGridStateWithDefaultValues = (item, gridState) => {
     if (item.type === FormStepperButtons) {
         gridState.lg = 12;
     }
+    if (item.type === Divider) {
+        gridState.lg = 12;
+    }
 };

package/esm/groupButton/groupButton.d.ts

@@ -1,16 +1,10 @@
-import React from "react";
-import "./groupButton.less";
-import { IZenComponentProps } from "../commonHelpers/zenComponent";
-interface IGroupButtons {
-    name: string;
-    value: string;
-    selected?: boolean;
+import { FC } from "react";
+import { TFormFieldComponentProps } from "../formField/formField";
+import { IGroupButtonRaw } from "../groupButtonRaw/groupButtonRaw";
+import { TGroupButtonRaw } from "../groupButtonRaw/types";
+export interface IGroupButton extends IGroupButtonRaw {
 }
-export interface IGroupButton extends IZenComponentProps {
-    groupData: IGroupButtons[];
-    disabled?: boolean;
-    fullWidth?: boolean;
-    onChange?: (e: any) => void;
-}
-export declare const GroupButton: React.FC<IGroupButton>;
+type TFormFieldGroupButton = TFormFieldComponentProps<TGroupButtonRaw>;
+export type TGroupButton = Omit<TFormFieldGroupButton, "counter" | "ref">;
+export declare const GroupButton: FC<TGroupButton>;
 export {};

package/esm/groupButton/groupButton.js

@@ -1,16 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useId } from "react";
-import { classNames } from "../commonHelpers/classNames/classNames";
-import { useDriveClassName } from "../utils/theme/useDriveClassName";
-const GroupButtonOption = ({ nameGroup, labelName, value, disabled, checked, onChange }) => {
-    const inputGroupId = useId();
-    const inputKey = useId();
-    const labelKey = useId();
-    return _jsxs(React.Fragment, { children: [_jsx("input", { type: "radio", onChange: onChange, checked: checked, id: inputGroupId, value: value, disabled: disabled, className: "zen-group-button__input", name: nameGroup }, inputKey), _jsx("label", { htmlFor: inputGroupId, className: "zen-group-button__label zen-ellipsis", children: labelName }, labelKey)] });
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 };
-export const GroupButton = ({ fullWidth, disabled, onChange, groupData, className }) => {
-    const nameGroup = useId();
-    const onChangeHandler = useCallback((e) => { onChange && onChange(e); }, [onChange]);
-    const driveClasses = useDriveClassName("zen-group-button");
-    return _jsx("div", { className: classNames(["zen-group-button", driveClasses || "", fullWidth ? "zen-group-button--full-width" : "", className || ""]), children: groupData.map((el, index) => _jsx(GroupButtonOption, { nameGroup: nameGroup, labelName: el.name, value: el.value, disabled: !!disabled, checked: el.selected, onChange: onChangeHandler }, `${nameGroup}_${index}_btngroup`)) });
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormField } from "../formField/formField";
+import { GroupButtonRaw } from "../groupButtonRaw/groupButtonRaw";
+const FormGroupButton = FormField(GroupButtonRaw);
+export const GroupButton = (_a) => {
+    var props = __rest(_a, []);
+    return _jsx(FormGroupButton, Object.assign({}, props));
 };
+GroupButton.displayName = "GroupButton";

package/esm/groupButtonRaw/components/groupButtonOption.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface IGroupButtonOption {
+    nameGroup: string;
+    labelName: string;
+    value: string;
+    disabled: boolean;
+    checked?: boolean;
+    onChange: (e: any) => void;
+}
+export declare const GroupButtonOption: React.FC<IGroupButtonOption>;
+export {};

package/esm/groupButtonRaw/components/groupButtonOption.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+export const GroupButtonOption = ({ nameGroup, labelName, value, disabled, checked, onChange }) => {
+    const inputGroupId = useId();
+    const inputKey = useId();
+    const labelKey = useId();
+    return _jsxs(_Fragment, { children: [_jsx("input", { type: "radio", onChange: onChange, checked: checked, id: inputGroupId, value: value, disabled: disabled, className: "zen-group-button__input", name: nameGroup }, inputKey), _jsx("label", { htmlFor: inputGroupId, className: "zen-group-button__label zen-ellipsis", children: labelName }, labelKey)] });
+};

package/esm/groupButtonRaw/groupButtonRaw.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { IFormFieldComponent } from "../formField/formField";
+import { IGroupButtonRawDefault, TGroupButtonRaw } from "./types";
+import "./groupButtonRaw.less";
+export interface IGroupButtonRaw extends IGroupButtonRawDefault {
+}
+export declare const GroupButtonRaw: React.FC<TGroupButtonRaw & IFormFieldComponent>;

package/esm/groupButtonRaw/groupButtonRaw.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useId } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { useDriveClassName } from "../utils/theme/useDriveClassName";
+import { ReviewTextControl } from "../formGroup/components/reviewTextControl";
+import { GroupButtonOption } from "./components/groupButtonOption";
+import { useFormFieldValues } from "../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
+// TODO: tests
+export const GroupButtonRaw = (props) => {
+    var _a;
+    const { fullWidth, groupData, className, isError, isReadOnly, controller, value: valueProp } = props;
+    const nameGroupId = useId();
+    const driveClasses = useDriveClassName("zen-group-button");
+    const { name = nameGroupId, disabled, onChange = () => { }, onBlur = () => { }, value = "" } = useFormFieldValues(controller, Object.assign(Object.assign({}, props), { value: valueProp || ((_a = groupData.find((el) => el.selected)) === null || _a === void 0 ? void 0 : _a.value) || (controller === null || controller === void 0 ? void 0 : controller.defaultValue) || "" }));
+    const onChangeHandlerMemo = useCallback(onChange, [onChange]);
+    const onBlurHandlerMemo = useCallback(onBlur, [onBlur]);
+    // TODO: do we need pass classes(GridClasses)
+    if (isReadOnly && value) {
+        return _jsx(ReviewTextControl, { value: value.name, className: "zen-group-button__review" });
+    }
+    // TODO: is it a proper place for onBlur handler?
+    return _jsx("div", { onBlur: onBlurHandlerMemo, className: classNames(["zen-group-button", isError ? "zen-group-button--error" : "", driveClasses || "", fullWidth ? "zen-group-button--full-width" : "", className || ""]), children: groupData.map((el, index) => _jsx(GroupButtonOption, { nameGroup: name, labelName: el.name, value: el.value, disabled: !!disabled, checked: value === el.value, onChange: onChangeHandlerMemo }, `${name}_${index}_btngroup`)) });
+};

package/esm/groupButtonRaw/types.d.ts

@@ -0,0 +1,26 @@
+import { Exclusive } from "../commonHelpers/types/exclusive";
+import { IReactFormItemController, IZenComponentProps } from "../commonHelpers/zenComponent";
+interface IGroupButtons {
+    name: string;
+    value: string;
+    /**
+     * @deprecated
+     * @param selected - use **value** prop in `GroupButton` component instead
+     * */
+    selected?: boolean;
+}
+export interface IGroupButtonRawBase extends IZenComponentProps {
+    groupData: IGroupButtons[];
+    fullWidth?: boolean;
+    value?: string;
+}
+export interface IGroupButtonRawDefault extends IGroupButtonRawBase {
+    disabled?: boolean;
+    onChange?: (e: any) => void;
+    onBlur?: (e: any) => void;
+    name?: string;
+}
+export interface IGroupButtonRawForm extends IGroupButtonRawBase, IReactFormItemController {
+}
+export type TGroupButtonRaw = Exclusive<IGroupButtonRawDefault, IGroupButtonRawForm>;
+export {};

package/esm/groupButtonRaw/types.js

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

package/esm/groupsFilter/groupsFilter.d.ts

@@ -1,24 +1,10 @@
-import React from "react";
-import { IGroupItem, IGroupsFilterTotalState } from "./groupsFilterInterfaces";
-import "./groupsFilter.less";
-import { IZenComponentProps } from "../commonHelpers/zenComponent";
-import { IChipsParent } from "../chip/chip";
-interface IGroupsFilterOptions {
+import { TFormFieldComponentProps } from "../formField/formField";
+import { IGroupsFilterRaw } from "../groupsFilterRaw/groupsFilterRaw";
+import { TGroupsFilterRaw } from "../groupsFilterRaw/types";
+type TFormFieldGroupsFilter = TFormFieldComponentProps<TGroupsFilterRaw>;
+export interface IGroupsFilter extends IGroupsFilterRaw {
 }
-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;
-    onChange: (state: IGroupsFilterTotalState) => void;
-    isWithColor?: boolean;
-    fullSize?: boolean;
-    options?: IGroupsFilterOptions;
-    listLimit?: number;
-}
-export declare const GroupsFilter: React.FC<IGroupsFilter>;
+export type TGroupsFilter = Omit<TFormFieldGroupsFilter, "counter" | "ref">;
+export declare const GroupsFilter: ({ ...props }: TGroupsFilter) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];
 export {};

package/esm/groupsFilter/groupsFilter.js

@@ -1,330 +1,23 @@
-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 { SearchInput } from "../searchInput/searchInput";
-import { useChipStatus } from "../chip/chipStatusProvider";
-import { MobileSheet } from "../mobileSheet/mobileSheet";
-import { useMobile } from "../commonHelpers/hooks/useMobile";
-import { Button } from "../button/button";
-import { FooterButtons } from "../footerButtons/footerButtons";
-import { ButtonType } from "../button/buttonType";
-export const groupsFilterTotalStateDefault = { groups: getDefaultFilterState(), sideWide: false };
-// eslint-disable-next-line complexity
-export const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithColor, onChange, initialFilterState, listLimit = 500, chip, chipIcon, chipId, chipName }) => {
-    const { translate } = useLanguage();
-    const isMobile = useMobile();
-    const chipStatus = useChipStatus();
-    const [groupPlaceHolder, setGroupPlaceHolder] = useState(translate("Groups"));
-    const [state, dispatchState] = useReducer(stateReducer, getInitialState(translate, initialFilterState));
-    const [uiState, dispatchUiState] = useReducer(uiStateReducer, uiInitialGroupsFilterState);
-    const [dataItems, setDataItems] = useState([]);
-    const inputRef = useRef(null);
-    const emptyInputRef = useRef(null);
-    const triggerRef = useRef(null);
-    const menuRef = useRef(null);
-    const prevInitialState = useRef(initialFilterState);
-    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(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, 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 ((initialFilterState === null || initialFilterState === void 0 ? void 0 : initialFilterState.sideWide) === state.frozenSideWideState && comparePreparedFilters(prepareFilters(initialFilterState.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"));
-        onChange(Object.assign({}, newState));
-        dispatchState({ type: StateActionType.TurnOfGlobalChanges, payload: undefined });
-    }, [state.globalChanges, dataItems, translate, state.frozenState, state.frozenSideWideState, onChange, initialFilterState === null || initialFilterState === void 0 ? void 0 : initialFilterState.sideWide, initialFilterState]);
-    useEffect(() => {
-        var _a;
-        if (((_a = prevInitialState.current) === null || _a === void 0 ? void 0 : _a.sideWide) === (initialFilterState === null || initialFilterState === void 0 ? void 0 : initialFilterState.sideWide)
-            && comparePreparedFilters(prepareFilters(initialFilterState ? initialFilterState.groups : getDefaultFilterState()), prepareFilters(prevInitialState.current ? prevInitialState.current.groups : getDefaultFilterState()))) {
-            return;
-        }
-        const stateForDispatch = (initialFilterState === null || initialFilterState === void 0 ? void 0 : initialFilterState.groups) ?
-            { value: prepareFilters(initialFilterState.groups), global: initialFilterState.sideWide } : { value: prepareFilters(getDefaultFilterState()), global: false };
-        if (Object.keys(state.groupsMap).length > 0) {
-            prevInitialState.current = initialFilterState ? Object.assign({}, initialFilterState) : undefined;
-            dispatchState({ type: StateActionType.CreateInitialState, payload: stateForDispatch });
-            !(initialFilterState === null || initialFilterState === void 0 ? void 0 : initialFilterState.groups) && dispatchUiState({ type: UiStateActionType.SetStep, payload: FilterMenuStep.Initial });
-        }
-    }, [initialFilterState, 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]);
-    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, 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] });
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormField } from "../formField/formField";
+import { GroupsFilterRaw } from "../groupsFilterRaw/groupsFilterRaw";
+import { TRANSLATIONS as GroupsFilterRawTranslations } from "../groupsFilterRaw/groupsFilterRaw";
+const GroupsFilterFormField = FormField(GroupsFilterRaw);
+export const GroupsFilter = (_a) => {
+    var props = __rest(_a, []);
+    return _jsx(GroupsFilterFormField, Object.assign({}, props));
 };
 export const TRANSLATIONS = [
-    "Organization groups filter",
-    ...GroupsFilterMenuTranslations,
-    ...GroupsFilterTriggerTranslations,
-    ...GroupsFilterAdjustmentStateTranslations,
-    ...GroupsFilterInitialStateTranslations,
-    ...GroupsFilterCurrentlySelectedStateTranslations
+    ...GroupsFilterRawTranslations
 ];

package/{dist/groupsFilter → esm/groupsFilterRaw}/groupsFilterCommon.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./groupsFilter.less";
+import "./groupsFilterRaw.less";
 import "./groupsFilterMenu.less";
 interface ICurrentlySelectedLabel {
     count: number;

package/{dist/groupsFilter → esm/groupsFilterRaw}/groupsFilterCounter.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./groupsFilter.less";
+import "./groupsFilterRaw.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 interface IGroupsFilterCounter extends IZenComponentProps {
     count: number;

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