@geotab/zenith 2.0.0-beta.2 → 3.0.0-beta.0

package/esm/formField/formField.js

@@ -10,18 +10,17 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { FormFieldError } from "../formFieldError/formFieldError";
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const FormField = function formFieldInner(WrappedComponent) {
-    const innerFormField = React.forwardRef((props, ref) => {
+    const InnerFormField = (props) => {
         const { className, inputClassName, error, assistive, counter } = props, rest = __rest(props, ["className", "inputClassName", "error", "assistive", "counter"]);
         const driveTextClass = useDriveClassName("zen-form-field__text");
         const showAdditionalInfo = error || assistive || counter;
         const componentClassName = classNames(["zen-form-field__input", inputClassName || ""]);
-        return _jsxs("div", { className: classNames(["zen-form-field", className || ""]), children: [_jsx("div", { className: "zen-form-field__input-container", children: _jsx(WrappedComponent, Object.assign({}, rest, { className: componentClassName, ref: ref, isError: !!error })) }), showAdditionalInfo ?
+        return _jsxs("div", { className: classNames(["zen-form-field", className || ""]), children: [_jsx("div", { className: "zen-form-field__input-container", children: _jsx(WrappedComponent, Object.assign({}, rest, { className: componentClassName, isError: !!error })) }), showAdditionalInfo ?
                     _jsxs("div", { className: "zen-form-field__secondary", children: [_jsx("div", { className: classNames([
                                     "zen-form-field__text",
                                     driveTextClass || "",
@@ -30,7 +29,7 @@ export const FormField = function formFieldInner(WrappedComponent) {
                                 ? _jsx("div", { className: "zen-form-field__length", children: counter })
                                 : ""] })
                     : null] });
-    });
-    innerFormField.displayName = "InnerFormField";
-    return innerFormField;
+    };
+    InnerFormField.displayName = "InnerFormField";
+    return InnerFormField;
 };

package/esm/formStepper/components/formStep.d.ts

@@ -8,9 +8,10 @@ export interface IStepItem {
 export interface IFormStep extends IStepItem {
     isFirst?: boolean;
     value?: string | number;
-    onClick?: () => void;
+    onClick?: (() => void) | false;
     isError?: boolean;
     isCurrent?: boolean;
     isComplete?: boolean;
+    compact?: boolean;
 }
 export declare const FormStep: FC<IFormStep>;

package/esm/formStepper/components/formStep.js

@@ -3,11 +3,12 @@ import { IconCheck } from "../../icons/iconCheck";
 import { useMobile } from "../../commonHelpers/hooks/useMobile";
 import { FormStepRaw } from "./formStepRaw";
 import { useLanguage } from "../../utils/localization/useLanguage";
-export const FormStep = ({ isFirst, value, isError = false, isCurrent = false, isComplete = false, label, onClick, optional, id }) => {
+export const FormStep = ({ isFirst, value, isError = false, isCurrent = false, isComplete = false, label, onClick, optional, id, compact }) => {
     const isMobile = useMobile();
+    const isCompactMode = compact || isMobile;
     const { translate } = useLanguage();
     const type = isCurrent ? "current" : isError ? "error" : isComplete ? "complete" : "incomplete";
     const content = isCurrent ? value : isError ? "!" : isComplete ? _jsx(IconCheck, {}) : value;
     const labelSecondary = optional ? translate("Optional") : undefined;
-    return (_jsx("div", { className: `zen-form-step ${isFirst ? "zen-form-step--first" : ""} ${isMobile ? "zen-form-step--mobile" : ""} zen-form-step--${type}`, children: _jsx(FormStepRaw, { id: id, type: type, isFirst: isFirst, isMobile: isMobile, onClick: onClick, content: content, label: label, labelSecondary: labelSecondary }) }));
+    return (_jsx("div", { className: `zen-form-step ${isFirst ? "zen-form-step--first" : ""} ${isCompactMode ? "zen-form-step--mobile" : ""} zen-form-step--${type}`, children: _jsx(FormStepRaw, { id: id, type: type, isFirst: isFirst, isCompact: isCompactMode, onClick: onClick, content: content, label: label, labelSecondary: labelSecondary }) }));
 };

package/esm/formStepper/components/formStepRaw.d.ts

@@ -5,8 +5,8 @@ export interface IFormStepRaw {
     type: TStepType;
     label?: string;
     isFirst?: boolean;
-    isMobile?: boolean;
-    onClick?: () => void;
+    isCompact?: boolean;
+    onClick?: (() => void) | false;
     content?: React.ReactNode;
     labelSecondary?: string;
 }

package/esm/formStepper/components/formStepRaw.js

@@ -3,9 +3,11 @@ import { isAreaSelected } from "../utils/isAreaSelected";
 import { getOnClick } from "../utils/getOnClick";
 import { getTabIndex } from "../utils/getTabIndex";
 import { getAriaLabelMobile } from "../utils/getAriaLabelMobile";
-export const FormStepRaw = ({ type, isFirst, isMobile, onClick, content, label, labelSecondary, id }) => {
-    if (isMobile) {
-        return _jsxs(_Fragment, { children: [!isFirst && _jsx("div", { className: `zen-form-step__connector zen-form-step__connector--mobile zen-form-step__connector--${type}` }), _jsx("button", { tabIndex: getTabIndex(type), id: id, "aria-label": getAriaLabelMobile(label, labelSecondary), "aria-selected": isAreaSelected(type), role: "tab", onClick: getOnClick(type, onClick), className: "zen-form-step__item zen-form-step__item--mobile", children: _jsx("div", { className: `zen-form-step__marker zen-form-step__marker--${type} zen-form-step__marker--mobile` }) })] });
+import { classNames } from "../../commonHelpers/classNames/classNames";
+export const FormStepRaw = ({ type, isFirst, isCompact, onClick, content, label, labelSecondary, id }) => {
+    const isNonClickable = onClick === false;
+    if (isCompact) {
+        return _jsxs(_Fragment, { children: [!isFirst && _jsx("div", { className: `zen-form-step__connector zen-form-step__connector--mobile zen-form-step__connector--${type}` }), _jsx("button", { tabIndex: getTabIndex(type, onClick), id: id, "aria-label": getAriaLabelMobile(label, labelSecondary), "aria-selected": isAreaSelected(type), role: "tab", onClick: getOnClick(type, onClick), className: classNames(["zen-form-step__item", "zen-form-step__item--mobile"]), children: _jsx("div", { className: classNames(["zen-form-step__marker", `zen-form-step__marker--${type}`, "zen-form-step__marker--mobile", isNonClickable ? "zen-form-step__marker--non-clickable" : ""]) }) })] });
     }
-    return _jsxs(_Fragment, { children: [!isFirst && _jsx("div", { className: `zen-form-step__connector zen-form-step__connector--${type}` }), _jsxs("div", { className: "zen-form-step__item", children: [_jsx("button", { onClick: getOnClick(type, onClick), tabIndex: getTabIndex(type), id: id, "aria-selected": isAreaSelected(type), role: "tab", className: `zen-form-step__marker zen-form-step__marker--${type}`, children: (type === "current" || type === "error") ? (_jsx("div", { className: "zen-form-step__marker--inner", children: content })) : content }), _jsxs("label", { htmlFor: id, className: `zen-form-step__label zen-form-step__label--${type}`, children: [_jsx("span", { className: "zen-form-step__label-primary", children: label }), labelSecondary && _jsx("span", { className: "zen-form-step__label-secondary", children: labelSecondary })] })] })] });
+    return _jsxs(_Fragment, { children: [!isFirst && _jsx("div", { className: `zen-form-step__connector zen-form-step__connector--${type}` }), _jsxs("div", { className: "zen-form-step__item", children: [_jsx("button", { onClick: getOnClick(type, onClick), tabIndex: getTabIndex(type, onClick), id: id, "aria-selected": isAreaSelected(type), role: "tab", className: classNames([`zen-form-step__marker`, `zen-form-step__marker--${type}`, isNonClickable ? "zen-form-step__marker--non-clickable" : ""]), children: (type === "current" || type === "error") ? (_jsx("div", { className: "zen-form-step__marker--inner", children: content })) : content }), _jsxs("label", { htmlFor: id, className: `zen-form-step__label zen-form-step__label--${type}`, children: [_jsx("span", { className: "zen-form-step__label-primary", children: label }), labelSecondary && _jsx("span", { className: "zen-form-step__label-secondary", children: labelSecondary })] })] })] });
 };

package/esm/formStepper/formStepper.d.ts

@@ -1,12 +1,15 @@
 import { FC } from "react";
 import { IStepItem } from "./components/formStep";
 import "./formStepper.less";
+export declare const STEPPER_LAST_STEP = "lastStep";
+export type TFormStepperMode = "default" | "compact";
 export interface IFormStepper {
     steps: IStepItem[];
     current: string;
     setCurrent: React.Dispatch<React.SetStateAction<string>>;
     errors?: string[];
-    onStepClicked?: (id: string) => void;
+    onStepClicked?: ((id: string) => void) | false;
     className?: string;
+    mode?: TFormStepperMode;
 }
 export declare const FormStepper: FC<IFormStepper>;

package/esm/formStepper/formStepper.js

@@ -4,10 +4,18 @@ import { FormStep } from "./components/formStep";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { useLanguage } from "../utils/localization/useLanguage";
 const MAX_STEPS = 7;
-export const FormStepper = ({ steps, onStepClicked, className = "", current, errors, setCurrent }) => {
-    const activeStepIndex = useMemo(() => steps.findIndex(step => step.id === current) || 0, [steps, current]);
+export const STEPPER_LAST_STEP = "lastStep";
+export const FormStepper = ({ steps, onStepClicked, className = "", current, errors, setCurrent, mode = "default" }) => {
+    var _a, _b, _c;
+    const activeStepIndex = useMemo(() => {
+        if (current === STEPPER_LAST_STEP) {
+            return steps.length;
+        }
+        return steps.findIndex(step => step.id === current) || 0;
+    }, [steps, current]);
     const isMobile = useMobile();
     const { translate } = useLanguage();
+    const isStepperNonClickable = onStepClicked === false;
     const adjustedSteps = useMemo(() => {
         if (steps.length > MAX_STEPS) {
             return steps.slice(0, MAX_STEPS);
@@ -16,8 +24,13 @@ export const FormStepper = ({ steps, onStepClicked, className = "", current, err
     }, [steps]);
     const onStepClickedHandler = useCallback((id) => {
         setCurrent(id);
-        onStepClicked === null || onStepClicked === void 0 ? void 0 : onStepClicked(id);
-    }, [setCurrent, onStepClicked]);
-    const isOptionalStep = isMobile && adjustedSteps[activeStepIndex].optional;
-    return _jsxs("div", { className: `zen-form-stepper ${className}`, role: "tablist", children: [_jsx("div", { className: "zen-form-stepper__steps", children: adjustedSteps.map((step, indx) => (_jsx(FormStep, { id: step.id, label: step.label, isFirst: step.id === steps[0].id, value: indx + 1, onClick: () => onStepClickedHandler(step.id), isError: errors === null || errors === void 0 ? void 0 : errors.includes(step.id), isCurrent: current === step.id, isComplete: indx < activeStepIndex, optional: step.optional }, step.id))) }), isMobile && _jsxs("label", { className: "zen-form-stepper__mobile-labels", children: [_jsx("span", { className: "zen-form-stepper__mobile-counter", children: translate("Step {0} of {1}").replace("{0}", String(activeStepIndex + 1)).replace("{1}", String(adjustedSteps.length)) }), _jsx("span", { title: adjustedSteps[activeStepIndex].label, className: "zen-form-stepper__mobile-label", children: adjustedSteps[activeStepIndex].label }), _jsx("span", { title: translate("Optional"), className: `zen-form-stepper__mobile-secondary-label ${isOptionalStep ? "zen-form-stepper__mobile-secondary-label--visible" : ""}`, children: translate("Optional") })] })] });
+        if (!isStepperNonClickable) {
+            onStepClicked === null || onStepClicked === void 0 ? void 0 : onStepClicked(id);
+        }
+    }, [setCurrent, isStepperNonClickable, onStepClicked]);
+    const isCompactMode = mode === "compact" || isMobile;
+    const isOptionalStep = isCompactMode && ((_a = adjustedSteps[activeStepIndex]) === null || _a === void 0 ? void 0 : _a.optional);
+    const stepNumber = current === STEPPER_LAST_STEP ? adjustedSteps.length : activeStepIndex + 1;
+    const stepLabel = current === STEPPER_LAST_STEP ? (_b = adjustedSteps[activeStepIndex - 1]) === null || _b === void 0 ? void 0 : _b.label : (_c = adjustedSteps[activeStepIndex]) === null || _c === void 0 ? void 0 : _c.label;
+    return _jsxs("div", { className: `zen-form-stepper ${className}`, role: "tablist", children: [_jsx("div", { className: "zen-form-stepper__steps", children: adjustedSteps.map((step, indx) => (_jsx(FormStep, { id: step.id, label: step.label, isFirst: step.id === steps[0].id, value: indx + 1, onClick: isStepperNonClickable ? false : () => onStepClickedHandler(step.id), isError: errors === null || errors === void 0 ? void 0 : errors.includes(step.id), isCurrent: current === step.id, isComplete: indx < activeStepIndex, optional: step.optional, compact: isCompactMode }, step.id))) }), isCompactMode && _jsxs("label", { className: "zen-form-stepper__mobile-labels", children: [_jsx("span", { className: "zen-form-stepper__mobile-counter", children: translate("Step {0} of {1}").replace("{0}", String(stepNumber)).replace("{1}", String(adjustedSteps.length)) }), _jsx("span", { title: stepLabel, className: "zen-form-stepper__mobile-label", children: stepLabel }), _jsx("span", { title: translate("Optional"), className: `zen-form-stepper__mobile-secondary-label ${isOptionalStep ? "zen-form-stepper__mobile-secondary-label--visible" : ""}`, children: translate("Optional") })] })] });
 };

package/esm/formStepper/utils/getOnClick.d.ts

@@ -1,2 +1,2 @@
 import { TStepType } from "../components/formStepRaw";
-export declare const getOnClick: (type: TStepType, onClick?: () => void) => (() => void) | undefined;
+export declare const getOnClick: (type: TStepType, onClick?: (() => void) | false) => (() => void) | undefined;

package/esm/formStepper/utils/getOnClick.js

@@ -1,5 +1,5 @@
 export const getOnClick = (type, onClick) => {
-    if (type === "error" || type === "complete") {
+    if ((type === "error" || type === "complete") && onClick !== false) {
         return onClick;
     }
     return undefined;

package/esm/formStepper/utils/getTabIndex.d.ts

@@ -1,2 +1,2 @@
 import { TStepType } from "../components/formStepRaw";
-export declare const getTabIndex: (type: TStepType) => 0 | -1;
+export declare const getTabIndex: (type: TStepType, onClick?: (() => void) | false) => 0 | -1;

package/esm/formStepper/utils/getTabIndex.js

@@ -1,4 +1,7 @@
-export const getTabIndex = (type) => {
+export const getTabIndex = (type, onClick) => {
+    if (onClick === false) {
+        return -1;
+    }
     switch (type) {
         case "complete":
         case "current":

package/esm/formStepperButtons/formStepperButtons.js

@@ -4,11 +4,12 @@ import { Button } from "../button/button";
 import { IconChevronLeft } from "../icons/iconChevronLeft";
 import { TextIconButton } from "../textIconButton/textIconButton";
 import { useLanguage } from "../utils/localization/useLanguage";
+import { STEPPER_LAST_STEP } from "../formStepper/formStepper";
 export const FormStepperButtons = ({ onPrevious, onCancel, onContinue, onSubmit, current, setCurrent, steps, isNextDisabled, className = "" }) => {
     const { translate } = useLanguage();
     const onPreviousHandler = useCallback(() => {
         setCurrent((prev) => {
-            const currentIndex = steps.findIndex((step) => step.id === prev);
+            const currentIndex = prev === STEPPER_LAST_STEP ? steps.length : steps.findIndex((step) => step.id === prev);
             if (currentIndex === -1) {
                 return prev;
             }
@@ -27,6 +28,6 @@ export const FormStepperButtons = ({ onPrevious, onCancel, onContinue, onSubmit,
         onContinue === null || onContinue === void 0 ? void 0 : onContinue();
     }, [onContinue, setCurrent, steps]);
     const isFirstStep = steps[0].id === current;
-    const isLastStep = steps[steps.length - 1].id === current;
+    const isLastStep = steps[steps.length - 1].id === current || current === STEPPER_LAST_STEP;
     return (_jsxs("div", { className: `zen-form-step-buttons ${className}`, children: [_jsx("div", { className: "zen-form-step-buttons__left", children: !isFirstStep && _jsx(TextIconButton, { className: "zen-form-step-buttons__previous", icon: IconChevronLeft, type: "tertiary-black", onClick: onPreviousHandler, children: translate("Previous step") }) }), _jsxs("div", { className: "zen-form-step-buttons__right", children: [_jsx(Button, { className: "zen-form-step-buttons__cancel", type: "secondary", onClick: onCancel, children: translate("Cancel") }), isLastStep ? (_jsx(Button, { disabled: isNextDisabled, className: "zen-form-step-buttons__submit", type: "primary", onClick: onSubmit, children: translate("Submit") })) : (_jsx(Button, { disabled: isNextDisabled, className: "zen-form-step-buttons__continue", type: "primary", onClick: onContinueHandler, children: translate("Continue") }))] })] }));
 };

package/esm/gridLayout/hooks/useStretch.d.ts

@@ -1,2 +1,2 @@
 import { ReactElement, RefObject } from "react";
-export declare const useStretch: (stretch: boolean, childrenArr: ReactElement[], ref: RefObject<HTMLDivElement>, setChildrenArrState: any) => void;
+export declare const useStretch: (stretch: boolean, childrenArr: ReactElement[], ref: RefObject<HTMLDivElement | null>, setChildrenArrState: any) => void;

package/esm/gridLayout/hooks/useStretch.js

@@ -40,12 +40,13 @@ export const useStretch = (stretch, childrenArr, ref, setChildrenArrState) => {
             if (indx === maxIndexInRow) {
                 return child;
             }
+            const childProps = child.props;
             const clone = cloneElement(child, {
                 className: classNames([
-                    (child.props.className || ""),
+                    childProps.className || "",
                     "zen-col-stretch"
                 ]),
-                key: child.props.id || child.key || indx
+                key: childProps.id || child.key || indx
             });
             return clone;
         });

package/esm/gridLayout/utils/isGridItem.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement } from "react";
 import { IZenGridItem } from "../../commonHelpers/zenComponent";
-export declare const isGridItem: (element: ReactElement<unknown>) => element is ReactElement<IZenGridItem, string | import("react").JSXElementConstructor<any>>;
+export declare const isGridItem: (element: ReactElement) => element is ReactElement<IZenGridItem, string | import("react").JSXElementConstructor<any>>;

package/esm/groupsFilter/groupsFilter.d.ts

@@ -1,14 +1,9 @@
 import React from "react";
-import { IAdvancedEntitiesNavigatorDialog, IGroupItem, IGroupsFilterTotalState } from "./groupsFilterInterfaces";
+import { IGroupItem, IGroupsFilterTotalState } from "./groupsFilterInterfaces";
 import "./groupsFilter.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { IChipsParent } from "../chip/chip";
 interface IGroupsFilterOptions {
-    /**
-    * @deprecated
-    * @param placeholder - will be removed in the next major release
-    */
-    placeholder?: string;
 }
 export declare const groupsFilterTotalStateDefault: {
     groups: import("./groupsFilterInterfaces").ILeafStateItem<import("..").IEntityWithId>;
@@ -20,19 +15,9 @@ export interface IGroupsFilter extends IZenComponentProps, IChipsParent {
     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 GroupsFilter: React.FC<IGroupsFilter>;
 export declare const TRANSLATIONS: string[];

package/esm/groupsFilter/groupsFilter.js

@@ -28,10 +28,10 @@ import { SearchInput } from "../searchInput/searchInput";
 import { useChipStatus } from "../chip/chipStatusProvider";
 export const groupsFilterTotalStateDefault = { groups: getDefaultFilterState(), sideWide: false };
 // eslint-disable-next-line complexity
-export const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithColor, onChange, initialFilterState, options = {}, listLimit = 500, chip, chipIcon, chipId, chipName }) => {
+export const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithColor, onChange, initialFilterState, listLimit = 500, chip, chipIcon, chipId, chipName }) => {
     const { translate } = useLanguage();
     const chipStatus = useChipStatus();
-    const [groupPlaceHolder, setGroupPlaceHolder] = useState(options.placeholder || translate("Groups"));
+    const [groupPlaceHolder, setGroupPlaceHolder] = useState(translate("Groups"));
     const [state, dispatchState] = useReducer(stateReducer, getInitialState(translate, initialFilterState));
     const [uiState, dispatchUiState] = useReducer(uiStateReducer, uiInitialGroupsFilterState);
     const [dataItems, setDataItems] = useState([]);
@@ -193,13 +193,13 @@ export const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, is
         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.placeholder || translate("Groups"));
+            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, options.placeholder, translate]);
+        uiState.uncheckedAdjustmentIds, uiState.uncheckedAdvancedState, dataItems, translate]);
     const getGroupsBox = () => _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 });
     const onSideWideChange = (newState) => { dispatchState({ type: StateActionType.SideWide, payload: newState }); };
     const onRelationChange = (newRelation) => { dispatchState({ type: StateActionType.Relation, payload: newRelation }); };
@@ -220,10 +220,10 @@ export const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, is
             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(", ") : options.placeholder || translate("Groups"));
+        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, options.placeholder, onChange, initialFilterState === null || initialFilterState === void 0 ? void 0 : initialFilterState.sideWide, initialFilterState]);
+    }, [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)

package/esm/groupsFilter/groupsFilterAdjustmentState.d.ts

@@ -7,11 +7,6 @@ export interface IGroupsFilterAdjustmentState extends IZenComponentProps {
     onSelectAllClick: (isAllSelected: boolean) => void;
     backButtonName?: string;
     isAllSelected: boolean;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
 }
 export declare const GroupsFilterAdjustmentState: React.FC<IGroupsFilterAdjustmentState>;
 export declare const TRANSLATIONS: string[];

package/esm/groupsFilter/groupsFilterBox.d.ts

@@ -24,11 +24,6 @@ export interface IGroupsFilterBox {
     search: string | undefined;
     onChange: (value: IChangeCheckbox) => void;
     onClick: (id: string) => void;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
     state: IGroupsFilterState;
     currentId: string | undefined;
     isWithColor: boolean;

package/esm/groupsFilter/groupsFilterCommon.d.ts

@@ -4,11 +4,6 @@ import "./groupsFilterMenu.less";
 interface ICurrentlySelectedLabel {
     count: number;
     className?: string;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
 }
 export declare const GroupsFilterCurrentlySelectedLabel: React.FC<ICurrentlySelectedLabel>;
 export declare const TRANSLATIONS: string[];

package/esm/groupsFilter/groupsFilterCurrentlySelectedState.d.ts

@@ -9,11 +9,6 @@ export interface IGroupsFilterCurrentlySelectedState extends IZenComponentProps
     onRelationChange: (newRelation: RelationOperator) => void;
     relation: RelationOperator;
     count: number;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
 }
 export declare const GroupsFilterCurrentlySelectedState: React.FC<IGroupsFilterCurrentlySelectedState>;
 export declare const TRANSLATIONS: string[];

package/esm/groupsFilter/groupsFilterCurrentlySelectedState.js

@@ -11,9 +11,7 @@ export const GroupsFilterCurrentlySelectedState = ({ children, siteWideState, re
     const { translate } = useLanguage();
     const togglerId = useId();
     const getActionButton = (label, title, icon, handleClick) => _jsx("button", { type: "button", onClick: handleClick, className: "zen-groups-filter-menu__item zen-groups-filter-menu__item--interactive zen-groups-filter-menu__action-button zen-groups-filter-menu__action-button-back", title: title, children: _jsxs(_Fragment, { children: [createElement(icon, { className: "zen-groups-filter__icon zen-groups-filter-menu__action-icon", size: "large" }), _jsx("div", { className: "zen-groups-filter-menu__action-label zen-groups-filter-menu__action-label--limited zen-ellipsis body-02-short", children: label })] }) });
-    const handleTogglerChange = (newState) => {
-        onSiteWideChange(newState.target.checked);
-    };
+    const handleTogglerChange = (checked) => onSiteWideChange(checked);
     const handleRelationChange = (newState) => {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
         onRelationChange(newState === RelationOperator.AND ? RelationOperator.AND : RelationOperator.OR);

package/esm/groupsFilter/groupsFilterInitialState.d.ts

@@ -8,11 +8,6 @@ export interface IGroupsFilterInitialState extends IZenComponentProps {
     onDialogButtonClick: () => void;
     onCurrentlySelectedClick: () => void;
     onSiteWideChange: (newState: boolean) => void;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
 }
 export declare const GroupsFilterInitialState: React.FC<IGroupsFilterInitialState>;
 export declare const TRANSLATIONS: string[];

package/esm/groupsFilter/groupsFilterInitialState.js

@@ -9,9 +9,7 @@ import { useLanguage } from "../utils/localization/useLanguage";
 export const GroupsFilterInitialState = ({ children, siteWideState, searchResult, count, onCurrentlySelectedClick, onSiteWideChange, onDialogButtonClick }) => {
     const { translate } = useLanguage();
     const togglerId = useId();
-    const handleTogglerChange = (newState) => {
-        onSiteWideChange(newState.target.checked);
-    };
+    const handleTogglerChange = (newState) => onSiteWideChange(newState);
     const currentlySelectedAriaLabel = translate("View currently selected filters").concat(". ").concat(count ? translate("Number of selected groups - {count}").replace("{count}", count.toString()) : translate("All groups selected"));
     return _jsxs("div", { className: "zen-groups-filter-menu__content-initial", children: [_jsxs("div", { className: "zen-groups-filter-menu__item-wrapper", children: [_jsx(ToggleButton, { onChange: handleTogglerChange, id: togglerId, checked: siteWideState, isReverted: true, className: "zen-groups-filter-menu__item zen-groups-filter-menu__advanced-neighbor", title: translate("Apply site-wide"), children: _jsxs("div", { className: "zen-groups-filter-menu__toggle-label zen-ellipsis", children: [_jsx(IconGlobe, { className: "zen-groups-filter__icon zen-groups-filter-menu__action-icon", size: "large" }), _jsx("span", { className: "zen-groups-filter__label-element", children: translate("Apply site-wide") })] }) }), _jsx("button", { type: "button", onClick: onDialogButtonClick, className: "zen-groups-filter-menu__item zen-groups-filter-menu__item--interactive zen-groups-filter-menu__item--end zen-groups-filter-menu__advanced-button", title: translate("Advanced groups filter"), "aria-label": translate("Advanced groups filter"), children: _jsxs(_Fragment, { children: [_jsx(IconOrgFilter, { className: "zen-groups-filter__icon zen-groups-filter-menu__action-icon", size: "large" }), _jsx("span", { className: "body-02-short zen-ellipsis", children: translate("Advanced") })] }) })] }), _jsx("button", { type: "button", onClick: onCurrentlySelectedClick, className: "zen-groups-filter-menu__item zen-groups-filter-menu__item--interactive zen-groups-filter-menu__item--stretched zen-groups-filter-menu__currently-selected-button", title: translate("View currently selected filters"), "aria-label": currentlySelectedAriaLabel, children: _jsxs(_Fragment, { children: [_jsx(GroupsFilterCurrentlySelectedLabel, { count: count }), _jsx(IconChevronRight, { size: "large" })] }) }), _jsxs("div", { className: "zen-groups-filter-menu__item zen-groups-filter-menu__item--stretched", children: [_jsx("span", { className: "zen-groups-filter-menu__select-filters body-02-short", children: translate("Select Filters:") }), _jsx("span", { className: "zen-groups-filter-menu__additional-info--faded zen-groups-filter-menu__filter-count", children: searchResult ? `${searchResult} ${translate("Results")}` : "" })] }), _jsx("div", { className: "zen-groups-filter-menu__separator" }), _jsx("div", { className: "zen-groups-filter-menu__groups-box", children: children })] });
 };

package/esm/groupsFilter/groupsFilterMenu.d.ts

@@ -5,11 +5,6 @@ export interface IGroupsFilterMenu extends IZenComponentProps {
     onCancelClick: () => void;
     onApplyClick: () => void;
     onResetClick: () => void;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
     isApplyDisabled: boolean;
 }
 export declare const GroupsFilterMenu: React.FC<IGroupsFilterMenu>;

package/esm/groupsFilter/groupsFilterTrigger.d.ts

@@ -5,19 +5,18 @@ interface IGroupsFilterTrigger {
     className?: string;
     onChange: (event: ChangeEvent<HTMLInputElement>) => void;
     handleClick: () => void;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
     placeholder?: string;
     id?: string;
     isOpenPopup: boolean;
     count: number;
     withGlobeIcon: boolean;
-    inputRef: React.RefObject<HTMLInputElement>;
+    inputRef: React.RefObject<HTMLInputElement | null>;
     fullSize?: boolean;
+    ref?: React.RefObject<HTMLDivElement | null>;
 }
-export declare const GroupsFilterTrigger: React.ForwardRefExoticComponent<IGroupsFilterTrigger & React.RefAttributes<HTMLDivElement>>;
+export declare const GroupsFilterTrigger: {
+    ({ value, className, onChange, placeholder, isOpenPopup, count, withGlobeIcon, inputRef, handleClick, fullSize, ref, ...otherProps }: IGroupsFilterTrigger): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export declare const TRANSLATIONS: string[];
 export {};

package/esm/groupsFilter/groupsFilterTrigger.js

@@ -10,14 +10,14 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useId } from "react";
+import { useId } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { GroupsFilterLabelBox } from "./groupsFilterLabelBox";
 import { TextInputRaw } from "../textInputRaw/textInputRaw";
 import { IconChevronDownSmall } from "../icons/iconChevronDownSmall";
 import { useLanguage } from "../utils/localization/useLanguage";
-export const GroupsFilterTrigger = React.forwardRef((_a, ref) => {
-    var { value, className = "", onChange, placeholder, isOpenPopup, count, withGlobeIcon, inputRef, handleClick, translate: _, fullSize } = _a, otherProps = __rest(_a, ["value", "className", "onChange", "placeholder", "isOpenPopup", "count", "withGlobeIcon", "inputRef", "handleClick", "translate", "fullSize"]);
+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"]);
     const { translate } = useLanguage();
     const groupsFilterId = useId();
     const handleKeydown = (e) => {
@@ -36,7 +36,7 @@ export const GroupsFilterTrigger = React.forwardRef((_a, ref) => {
         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, "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" }) })] }));
-});
+};
 GroupsFilterTrigger.displayName = "GroupsFilterTrigger";
 export const TRANSLATIONS = [
     "Filter by group",

package/esm/header/components/basicToolbar/basicToolbar.d.ts

@@ -6,7 +6,7 @@ export interface IBasicToolbar extends IZenComponentProps {
     middleElements: ReactNode | undefined;
     rightElements: ReactNode | undefined;
     isMobile?: boolean;
-    leftElementsRef?: React.MutableRefObject<HTMLDivElement | null>;
-    rightElementsRef?: React.MutableRefObject<HTMLDivElement | null>;
+    leftElementsRef?: React.RefObject<HTMLDivElement | null>;
+    rightElementsRef?: React.RefObject<HTMLDivElement | null>;
 }
 export declare const BasicToolbar: React.FC<IBasicToolbar>;

package/esm/header/components/collapsedItemsControl/collapsedItemsControl.d.ts

@@ -3,7 +3,7 @@ import "./collapsedItemsControl.less";
 import { IZenComponentProps } from "../../../commonHelpers/zenComponent";
 import { IMenuItem } from "../../../menu/components/menuItem";
 export interface ICustomContent {
-    [key: string]: React.ReactElement | undefined;
+    [key: string]: React.ReactElement<PropsWithChildren> | undefined;
 }
 export interface IHeaderCustomMenuComponent extends Pick<IMenuItem, "id" | "name" | "disabled" | "link" | "target" | "rel" | "icon"> {
 }
@@ -16,11 +16,6 @@ export interface IHeaderCustomContent {
 export declare const HeaderCustomContent: import("react").Context<IHeaderCustomContent>;
 export declare const HeaderCustomContentProvider: ({ children, content, setContent }: IHeaderCustomContent & PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
 export interface IPageToolbarCollapsedItemsControl extends IZenComponentProps {
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
 }
 export declare const PageToolbarCollapsedItemsControl: FC<IPageToolbarCollapsedItemsControl>;
 export declare const TRANSLATIONS: string[];

package/esm/header/components/collapsedItemsControl/utils/handleCustomMenuWrapper.js

@@ -1,7 +1,7 @@
 import { HeaderCustomMenuWrapper, isNamedChildComponent } from "../../../headerHelpers";
 import { ControlledMenu } from "../../../../menu/controlledMenu";
 import { Menu } from "../../../../menu/menu";
-import { Children, createElement } from "react";
+import { Children, createElement, isValidElement } from "react";
 import { HeaderButton } from "../../../headerButton";
 // eslint-disable-next-line complexity
 export const handleCustomMenuWrapper = (reactNode, content, menuItems) => {
@@ -18,10 +18,10 @@ export const handleCustomMenuWrapper = (reactNode, content, menuItems) => {
         }
         else {
             Children.forEach(customContent.props.children, ch => {
-                if (ch.type === Menu || ch.type === ControlledMenu) {
+                if (isValidElement(ch) && (ch.type === Menu || ch.type === ControlledMenu)) {
                     menu = ch;
                 }
-                if (ch.type === HeaderButton) {
+                if (isValidElement(ch) && ch.type === HeaderButton) {
                     isOnlyButton = true;
                     menu = ch;
                 }
@@ -34,7 +34,7 @@ export const handleCustomMenuWrapper = (reactNode, content, menuItems) => {
         const el = createElement(Menu.Item, {
             id: reactNode.props.id || menu.props.id,
             key: reactNode.props.id || menu.props.id,
-            name: reactNode.props.name || menu.props.name,
+            name: reactNode.props.name || "",
             disabled: reactNode.props.disabled || menu.props.disabled,
             link: reactNode.props.link || menu.props.link,
             target: reactNode.props.target || menu.props.target,

package/esm/header/components/mobileFilterControl/mobileFilterControl.d.ts

@@ -1,15 +1,10 @@
-import React from "react";
+/// <reference types="react" />
 import "./mobileFilterControl.less";
 export interface IMobileFilterControl {
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
     className?: string;
     count?: number;
     onClick?: () => void;
-    ref?: React.Ref<HTMLButtonElement>;
+    ref?: React.RefObject<HTMLButtonElement | null>;
 }
-export declare const MobileFilterControl: React.ForwardRefExoticComponent<Omit<IMobileFilterControl, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const MobileFilterControl: ({ className, onClick, count, ref }: IMobileFilterControl) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];

package/esm/header/components/mobileFilterControl/mobileFilterControl.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
 import { ButtonType } from "../../../button/buttonType";
 import { SvgIconSize } from "../../../svgIcon/svgIconSize";
 import { TextIconButton, ButtonIconPosition } from "../../../textIconButton/textIconButton";
@@ -8,12 +7,12 @@ import { useLanguage } from "../../../utils/localization/useLanguage";
 import { IconSettings6 } from "../../../icons/iconSettings6";
 import { useDrive } from "../../../utils/theme/useDrive";
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const MobileFilterControl = React.forwardRef(function MobileFilterControl({ className, onClick, count }, ref) {
+export const MobileFilterControl = ({ className, onClick, count, ref }) => {
     const { translate } = useLanguage();
     const isDrive = useDrive();
     const filterIconButton = _jsx(TextIconButton, { iconPosition: ButtonIconPosition.End, icon: IconSettings6, iconSize: isDrive ? SvgIconSize.Huge : SvgIconSize.Large, className: "zen-mobile-filter-control__actions zen-mobile-filter-control__actions--button", iconClasses: "zen-mobile-filter-control__actions--icon", title: translate("Show all filters"), type: ButtonType.TertiaryBlack, contentClasses: count ? "zen-mobile-filter-control__counter-wrapper" : "", onClick: onClick, ref: ref, children: count ? _jsx("div", { className: "zen-mobile-filter-control__counter", children: count }) : null });
     return _jsx("div", { className: classNames(["zen-mobile-filter-control", className !== null && className !== void 0 ? className : ""]), children: filterIconButton });
-});
+};
 export const TRANSLATIONS = [
     "Show all filters"
 ];

package/esm/header/components/mobileSearchControl/mobileSearchControl.d.ts

@@ -2,11 +2,6 @@ import React from "react";
 import "./mobileSearchControl.less";
 export interface IMobileSearchControl {
     searchInput: React.ReactElement;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
     onClick: (state: boolean) => void;
     state: boolean;
     className?: string;