@geotab/zenith 2.0.0 → 3.0.0-beta.0

package/dist/filtersBar/utils/isCustomElementValid.js

@@ -1,5 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isCustomElementValid = void 0;
-const isCustomElementValid = (el) => !!(el && el.props && el.props.id && el.props.state && el.props.onChange);
+const isCustomElementValid = (el) => {
+    if (!el || !el.props) {
+        return false;
+    }
+    const props = el.props;
+    return !!(props.id && props.state && props.onChange);
+};
 exports.isCustomElementValid = isCustomElementValid;

package/dist/formField/formField.d.ts

@@ -1,9 +1,9 @@
-import React from "react";
+import React, { RefObject } from "react";
 import "./formField.less";
 export interface IFormField {
     className?: string;
     inputClassName?: string;
-    ref?: React.RefObject<HTMLElement>;
+    ref?: RefObject<HTMLElement | null>;
     error?: string;
     assistive?: string;
     counter?: string;
@@ -12,4 +12,7 @@ export interface IFormFieldComponent {
     isError?: boolean;
 }
 export type TFormFieldComponentProps<T> = Omit<T, "isError"> & IFormField;
-export declare const FormField: <T extends IFormFieldComponent>(WrappedComponent: React.FC<T>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<TFormFieldComponentProps<T>> & React.RefAttributes<HTMLElement | null>>;
+export declare const FormField: <T extends IFormFieldComponent>(WrappedComponent: React.FC<T>) => {
+    (props: TFormFieldComponentProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/formField/formField.js

@@ -10,24 +10,20 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const formFieldError_1 = require("../formFieldError/formFieldError");
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const FormField = function formFieldInner(WrappedComponent) {
-    const innerFormField = react_1.default.forwardRef((props, ref) => {
+    const InnerFormField = (props) => {
         const { className, inputClassName, error, assistive, counter } = props, rest = __rest(props, ["className", "inputClassName", "error", "assistive", "counter"]);
         const driveTextClass = (0, useDriveClassName_1.useDriveClassName)("zen-form-field__text");
         const showAdditionalInfo = error || assistive || counter;
         const componentClassName = (0, classNames_1.classNames)(["zen-form-field__input", inputClassName || ""]);
-        return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-form-field", className || ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-form-field__input-container", children: (0, jsx_runtime_1.jsx)(WrappedComponent, Object.assign({}, rest, { className: componentClassName, ref: ref, isError: !!error })) }), showAdditionalInfo ?
+        return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-form-field", className || ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-form-field__input-container", children: (0, jsx_runtime_1.jsx)(WrappedComponent, Object.assign({}, rest, { className: componentClassName, isError: !!error })) }), showAdditionalInfo ?
                     (0, jsx_runtime_1.jsxs)("div", { className: "zen-form-field__secondary", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)([
                                     "zen-form-field__text",
                                     driveTextClass || "",
@@ -36,8 +32,8 @@ const FormField = function formFieldInner(WrappedComponent) {
                                 ? (0, jsx_runtime_1.jsx)("div", { className: "zen-form-field__length", children: counter })
                                 : ""] })
                     : null] });
-    });
-    innerFormField.displayName = "InnerFormField";
-    return innerFormField;
+    };
+    InnerFormField.displayName = "InnerFormField";
+    return InnerFormField;
 };
 exports.FormField = FormField;

package/dist/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/dist/formStepper/components/formStep.js

@@ -6,12 +6,13 @@ const iconCheck_1 = require("../../icons/iconCheck");
 const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
 const formStepRaw_1 = require("./formStepRaw");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
-const FormStep = ({ isFirst, value, isError = false, isCurrent = false, isComplete = false, label, onClick, optional, id }) => {
+const FormStep = ({ isFirst, value, isError = false, isCurrent = false, isComplete = false, label, onClick, optional, id, compact }) => {
     const isMobile = (0, useMobile_1.useMobile)();
+    const isCompactMode = compact || isMobile;
     const { translate } = (0, useLanguage_1.useLanguage)();
     const type = isCurrent ? "current" : isError ? "error" : isComplete ? "complete" : "incomplete";
     const content = isCurrent ? value : isError ? "!" : isComplete ? (0, jsx_runtime_1.jsx)(iconCheck_1.IconCheck, {}) : value;
     const labelSecondary = optional ? translate("Optional") : undefined;
-    return ((0, jsx_runtime_1.jsx)("div", { className: `zen-form-step ${isFirst ? "zen-form-step--first" : ""} ${isMobile ? "zen-form-step--mobile" : ""} zen-form-step--${type}`, children: (0, jsx_runtime_1.jsx)(formStepRaw_1.FormStepRaw, { id: id, type: type, isFirst: isFirst, isMobile: isMobile, onClick: onClick, content: content, label: label, labelSecondary: labelSecondary }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: `zen-form-step ${isFirst ? "zen-form-step--first" : ""} ${isCompactMode ? "zen-form-step--mobile" : ""} zen-form-step--${type}`, children: (0, jsx_runtime_1.jsx)(formStepRaw_1.FormStepRaw, { id: id, type: type, isFirst: isFirst, isCompact: isCompactMode, onClick: onClick, content: content, label: label, labelSecondary: labelSecondary }) }));
 };
 exports.FormStep = FormStep;

package/dist/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/dist/formStepper/components/formStepRaw.js

@@ -6,10 +6,12 @@ const isAreaSelected_1 = require("../utils/isAreaSelected");
 const getOnClick_1 = require("../utils/getOnClick");
 const getTabIndex_1 = require("../utils/getTabIndex");
 const getAriaLabelMobile_1 = require("../utils/getAriaLabelMobile");
-const FormStepRaw = ({ type, isFirst, isMobile, onClick, content, label, labelSecondary, id }) => {
-    if (isMobile) {
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isFirst && (0, jsx_runtime_1.jsx)("div", { className: `zen-form-step__connector zen-form-step__connector--mobile zen-form-step__connector--${type}` }), (0, jsx_runtime_1.jsx)("button", { tabIndex: (0, getTabIndex_1.getTabIndex)(type), id: id, "aria-label": (0, getAriaLabelMobile_1.getAriaLabelMobile)(label, labelSecondary), "aria-selected": (0, isAreaSelected_1.isAreaSelected)(type), role: "tab", onClick: (0, getOnClick_1.getOnClick)(type, onClick), className: "zen-form-step__item zen-form-step__item--mobile", children: (0, jsx_runtime_1.jsx)("div", { className: `zen-form-step__marker zen-form-step__marker--${type} zen-form-step__marker--mobile` }) })] });
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const FormStepRaw = ({ type, isFirst, isCompact, onClick, content, label, labelSecondary, id }) => {
+    const isNonClickable = onClick === false;
+    if (isCompact) {
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isFirst && (0, jsx_runtime_1.jsx)("div", { className: `zen-form-step__connector zen-form-step__connector--mobile zen-form-step__connector--${type}` }), (0, jsx_runtime_1.jsx)("button", { tabIndex: (0, getTabIndex_1.getTabIndex)(type, onClick), id: id, "aria-label": (0, getAriaLabelMobile_1.getAriaLabelMobile)(label, labelSecondary), "aria-selected": (0, isAreaSelected_1.isAreaSelected)(type), role: "tab", onClick: (0, getOnClick_1.getOnClick)(type, onClick), className: (0, classNames_1.classNames)(["zen-form-step__item", "zen-form-step__item--mobile"]), children: (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-form-step__marker", `zen-form-step__marker--${type}`, "zen-form-step__marker--mobile", isNonClickable ? "zen-form-step__marker--non-clickable" : ""]) }) })] });
     }
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isFirst && (0, jsx_runtime_1.jsx)("div", { className: `zen-form-step__connector zen-form-step__connector--${type}` }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-form-step__item", children: [(0, jsx_runtime_1.jsx)("button", { onClick: (0, getOnClick_1.getOnClick)(type, onClick), tabIndex: (0, getTabIndex_1.getTabIndex)(type), id: id, "aria-selected": (0, isAreaSelected_1.isAreaSelected)(type), role: "tab", className: `zen-form-step__marker zen-form-step__marker--${type}`, children: (type === "current" || type === "error") ? ((0, jsx_runtime_1.jsx)("div", { className: "zen-form-step__marker--inner", children: content })) : content }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: id, className: `zen-form-step__label zen-form-step__label--${type}`, children: [(0, jsx_runtime_1.jsx)("span", { className: "zen-form-step__label-primary", children: label }), labelSecondary && (0, jsx_runtime_1.jsx)("span", { className: "zen-form-step__label-secondary", children: labelSecondary })] })] })] });
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isFirst && (0, jsx_runtime_1.jsx)("div", { className: `zen-form-step__connector zen-form-step__connector--${type}` }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-form-step__item", children: [(0, jsx_runtime_1.jsx)("button", { onClick: (0, getOnClick_1.getOnClick)(type, onClick), tabIndex: (0, getTabIndex_1.getTabIndex)(type, onClick), id: id, "aria-selected": (0, isAreaSelected_1.isAreaSelected)(type), role: "tab", className: (0, classNames_1.classNames)([`zen-form-step__marker`, `zen-form-step__marker--${type}`, isNonClickable ? "zen-form-step__marker--non-clickable" : ""]), children: (type === "current" || type === "error") ? ((0, jsx_runtime_1.jsx)("div", { className: "zen-form-step__marker--inner", children: content })) : content }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: id, className: `zen-form-step__label zen-form-step__label--${type}`, children: [(0, jsx_runtime_1.jsx)("span", { className: "zen-form-step__label-primary", children: label }), labelSecondary && (0, jsx_runtime_1.jsx)("span", { className: "zen-form-step__label-secondary", children: labelSecondary })] })] })] });
 };
 exports.FormStepRaw = FormStepRaw;

package/dist/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/dist/formStepper/formStepper.js

@@ -1,16 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormStepper = void 0;
+exports.FormStepper = exports.STEPPER_LAST_STEP = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const formStep_1 = require("./components/formStep");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const MAX_STEPS = 7;
-const FormStepper = ({ steps, onStepClicked, className = "", current, errors, setCurrent }) => {
-    const activeStepIndex = (0, react_1.useMemo)(() => steps.findIndex(step => step.id === current) || 0, [steps, current]);
+exports.STEPPER_LAST_STEP = "lastStep";
+const FormStepper = ({ steps, onStepClicked, className = "", current, errors, setCurrent, mode = "default" }) => {
+    var _a, _b, _c;
+    const activeStepIndex = (0, react_1.useMemo)(() => {
+        if (current === exports.STEPPER_LAST_STEP) {
+            return steps.length;
+        }
+        return steps.findIndex(step => step.id === current) || 0;
+    }, [steps, current]);
     const isMobile = (0, useMobile_1.useMobile)();
     const { translate } = (0, useLanguage_1.useLanguage)();
+    const isStepperNonClickable = onStepClicked === false;
     const adjustedSteps = (0, react_1.useMemo)(() => {
         if (steps.length > MAX_STEPS) {
             return steps.slice(0, MAX_STEPS);
@@ -19,9 +27,14 @@ const FormStepper = ({ steps, onStepClicked, className = "", current, errors, se
     }, [steps]);
     const onStepClickedHandler = (0, react_1.useCallback)((id) => {
         setCurrent(id);
-        onStepClicked === null || onStepClicked === void 0 ? void 0 : onStepClicked(id);
-    }, [setCurrent, onStepClicked]);
-    const isOptionalStep = isMobile && adjustedSteps[activeStepIndex].optional;
-    return (0, jsx_runtime_1.jsxs)("div", { className: `zen-form-stepper ${className}`, role: "tablist", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-form-stepper__steps", children: adjustedSteps.map((step, indx) => ((0, jsx_runtime_1.jsx)(formStep_1.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 && (0, jsx_runtime_1.jsxs)("label", { className: "zen-form-stepper__mobile-labels", children: [(0, jsx_runtime_1.jsx)("span", { className: "zen-form-stepper__mobile-counter", children: translate("Step {0} of {1}").replace("{0}", String(activeStepIndex + 1)).replace("{1}", String(adjustedSteps.length)) }), (0, jsx_runtime_1.jsx)("span", { title: adjustedSteps[activeStepIndex].label, className: "zen-form-stepper__mobile-label", children: adjustedSteps[activeStepIndex].label }), (0, jsx_runtime_1.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 === exports.STEPPER_LAST_STEP ? adjustedSteps.length : activeStepIndex + 1;
+    const stepLabel = current === exports.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 (0, jsx_runtime_1.jsxs)("div", { className: `zen-form-stepper ${className}`, role: "tablist", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-form-stepper__steps", children: adjustedSteps.map((step, indx) => ((0, jsx_runtime_1.jsx)(formStep_1.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 && (0, jsx_runtime_1.jsxs)("label", { className: "zen-form-stepper__mobile-labels", children: [(0, jsx_runtime_1.jsx)("span", { className: "zen-form-stepper__mobile-counter", children: translate("Step {0} of {1}").replace("{0}", String(stepNumber)).replace("{1}", String(adjustedSteps.length)) }), (0, jsx_runtime_1.jsx)("span", { title: stepLabel, className: "zen-form-stepper__mobile-label", children: stepLabel }), (0, jsx_runtime_1.jsx)("span", { title: translate("Optional"), className: `zen-form-stepper__mobile-secondary-label ${isOptionalStep ? "zen-form-stepper__mobile-secondary-label--visible" : ""}`, children: translate("Optional") })] })] });
 };
 exports.FormStepper = FormStepper;

package/dist/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/dist/formStepper/utils/getOnClick.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getOnClick = void 0;
 const getOnClick = (type, onClick) => {
-    if (type === "error" || type === "complete") {
+    if ((type === "error" || type === "complete") && onClick !== false) {
         return onClick;
     }
     return undefined;

package/dist/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/dist/formStepper/utils/getTabIndex.js

@@ -1,7 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTabIndex = void 0;
-const getTabIndex = (type) => {
+const getTabIndex = (type, onClick) => {
+    if (onClick === false) {
+        return -1;
+    }
     switch (type) {
         case "complete":
         case "current":

package/dist/formStepperButtons/formStepperButtons.js

@@ -7,11 +7,12 @@ const button_1 = require("../button/button");
 const iconChevronLeft_1 = require("../icons/iconChevronLeft");
 const textIconButton_1 = require("../textIconButton/textIconButton");
 const useLanguage_1 = require("../utils/localization/useLanguage");
+const formStepper_1 = require("../formStepper/formStepper");
 const FormStepperButtons = ({ onPrevious, onCancel, onContinue, onSubmit, current, setCurrent, steps, isNextDisabled, className = "" }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const onPreviousHandler = (0, react_1.useCallback)(() => {
         setCurrent((prev) => {
-            const currentIndex = steps.findIndex((step) => step.id === prev);
+            const currentIndex = prev === formStepper_1.STEPPER_LAST_STEP ? steps.length : steps.findIndex((step) => step.id === prev);
             if (currentIndex === -1) {
                 return prev;
             }
@@ -30,7 +31,7 @@ const FormStepperButtons = ({ onPrevious, onCancel, onContinue, onSubmit, curren
         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 === formStepper_1.STEPPER_LAST_STEP;
     return ((0, jsx_runtime_1.jsxs)("div", { className: `zen-form-step-buttons ${className}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-form-step-buttons__left", children: !isFirstStep && (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-form-step-buttons__previous", icon: iconChevronLeft_1.IconChevronLeft, type: "tertiary-black", onClick: onPreviousHandler, children: translate("Previous step") }) }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-form-step-buttons__right", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-form-step-buttons__cancel", type: "secondary", onClick: onCancel, children: translate("Cancel") }), isLastStep ? ((0, jsx_runtime_1.jsx)(button_1.Button, { disabled: isNextDisabled, className: "zen-form-step-buttons__submit", type: "primary", onClick: onSubmit, children: translate("Submit") })) : ((0, jsx_runtime_1.jsx)(button_1.Button, { disabled: isNextDisabled, className: "zen-form-step-buttons__continue", type: "primary", onClick: onContinueHandler, children: translate("Continue") }))] })] }));
 };
 exports.FormStepperButtons = FormStepperButtons;

package/dist/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/dist/gridLayout/hooks/useStretch.js

@@ -43,12 +43,13 @@ const useStretch = (stretch, childrenArr, ref, setChildrenArrState) => {
             if (indx === maxIndexInRow) {
                 return child;
             }
+            const childProps = child.props;
             const clone = (0, react_1.cloneElement)(child, {
                 className: (0, classNames_1.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/dist/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/dist/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/dist/groupsFilter/groupsFilter.js

@@ -31,10 +31,10 @@ const searchInput_1 = require("../searchInput/searchInput");
 const chipStatusProvider_1 = require("../chip/chipStatusProvider");
 exports.groupsFilterTotalStateDefault = { groups: (0, groupsHelper_1.getDefaultFilterState)(), sideWide: false };
 // eslint-disable-next-line complexity
-const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithColor, onChange, initialFilterState, options = {}, listLimit = 500, chip, chipIcon, chipId, chipName }) => {
+const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithColor, onChange, initialFilterState, listLimit = 500, chip, chipIcon, chipId, chipName }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const chipStatus = (0, chipStatusProvider_1.useChipStatus)();
-    const [groupPlaceHolder, setGroupPlaceHolder] = (0, react_1.useState)(options.placeholder || translate("Groups"));
+    const [groupPlaceHolder, setGroupPlaceHolder] = (0, react_1.useState)(translate("Groups"));
     const [state, dispatchState] = (0, react_1.useReducer)(stateReducer_1.stateReducer, (0, stateReducer_1.getInitialState)(translate, initialFilterState));
     const [uiState, dispatchUiState] = (0, react_1.useReducer)(uiStateReducer_1.uiStateReducer, uiStateReducer_1.uiInitialGroupsFilterState);
     const [dataItems, setDataItems] = (0, react_1.useState)([]);
@@ -196,13 +196,13 @@ const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithCol
         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 = () => (0, jsx_runtime_1.jsx)(groupsFilterBox_1.GroupsFilterBox, { step: uiState.step, currentId: uiState.currentAdjustmentId, isWithColor: isWithColor || false, state: state, search: uiState.searchValue, blocks: uiState.searchValue && uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial ? [] : blocksMap[uiState.step], onChange: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? handleCheckboxItemAdjustmentClick : handleCheckboxChange, onClick: handleCheckboxItemClick, uncheckedItems: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdjustmentIds : [], uncheckedAdvancedState: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdvancedState : undefined, listLimit: listLimit });
     const onSideWideChange = (newState) => { dispatchState({ type: stateActionType_1.StateActionType.SideWide, payload: newState }); };
     const onRelationChange = (newRelation) => { dispatchState({ type: stateActionType_1.StateActionType.Relation, payload: newRelation }); };
@@ -223,10 +223,10 @@ const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithCol
             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_1.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]);
     (0, react_1.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/dist/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/dist/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/dist/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/dist/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/dist/groupsFilter/groupsFilterCurrentlySelectedState.js

@@ -14,9 +14,7 @@ const GroupsFilterCurrentlySelectedState = ({ children, siteWideState, relation,
     const { translate } = (0, useLanguage_1.useLanguage)();
     const togglerId = (0, react_1.useId)();
     const getActionButton = (label, title, icon, handleClick) => (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, react_1.createElement)(icon, { className: "zen-groups-filter__icon zen-groups-filter-menu__action-icon", size: "large" }), (0, jsx_runtime_1.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 === groupsFilterInterfaces_1.RelationOperator.AND ? groupsFilterInterfaces_1.RelationOperator.AND : groupsFilterInterfaces_1.RelationOperator.OR);

package/dist/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/dist/groupsFilter/groupsFilterInitialState.js

@@ -12,9 +12,7 @@ const useLanguage_1 = require("../utils/localization/useLanguage");
 const GroupsFilterInitialState = ({ children, siteWideState, searchResult, count, onCurrentlySelectedClick, onSiteWideChange, onDialogButtonClick }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const togglerId = (0, react_1.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 (0, jsx_runtime_1.jsxs)("div", { className: "zen-groups-filter-menu__content-initial", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-groups-filter-menu__item-wrapper", children: [(0, jsx_runtime_1.jsx)(toggleButton_1.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: (0, jsx_runtime_1.jsxs)("div", { className: "zen-groups-filter-menu__toggle-label zen-ellipsis", children: [(0, jsx_runtime_1.jsx)(iconGlobe_1.IconGlobe, { className: "zen-groups-filter__icon zen-groups-filter-menu__action-icon", size: "large" }), (0, jsx_runtime_1.jsx)("span", { className: "zen-groups-filter__label-element", children: translate("Apply site-wide") })] }) }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(iconOrgFilter_1.IconOrgFilter, { className: "zen-groups-filter__icon zen-groups-filter-menu__action-icon", size: "large" }), (0, jsx_runtime_1.jsx)("span", { className: "body-02-short zen-ellipsis", children: translate("Advanced") })] }) })] }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(groupsFilterCommon_1.GroupsFilterCurrentlySelectedLabel, { count: count }), (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, { size: "large" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-groups-filter-menu__item zen-groups-filter-menu__item--stretched", children: [(0, jsx_runtime_1.jsx)("span", { className: "zen-groups-filter-menu__select-filters body-02-short", children: translate("Select Filters:") }), (0, jsx_runtime_1.jsx)("span", { className: "zen-groups-filter-menu__additional-info--faded zen-groups-filter-menu__filter-count", children: searchResult ? `${searchResult} ${translate("Results")}` : "" })] }), (0, jsx_runtime_1.jsx)("div", { className: "zen-groups-filter-menu__separator" }), (0, jsx_runtime_1.jsx)("div", { className: "zen-groups-filter-menu__groups-box", children: children })] });
 };

package/dist/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/dist/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/dist/groupsFilter/groupsFilterTrigger.js

@@ -1,27 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 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)
@@ -36,14 +13,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TRANSLATIONS = exports.GroupsFilterTrigger = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const groupsFilterLabelBox_1 = require("./groupsFilterLabelBox");
 const textInputRaw_1 = require("../textInputRaw/textInputRaw");
 const iconChevronDownSmall_1 = require("../icons/iconChevronDownSmall");
 const useLanguage_1 = require("../utils/localization/useLanguage");
-exports.GroupsFilterTrigger = react_1.default.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"]);
+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 } = (0, useLanguage_1.useLanguage)();
     const groupsFilterId = (0, react_1.useId)();
     const handleKeydown = (e) => {
@@ -62,7 +39,8 @@ exports.GroupsFilterTrigger = react_1.default.forwardRef((_a, ref) => {
         handleClick();
     };
     return (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classNames_1.classNames)(["zen-groups-filter"]), ref: ref }, otherProps, { onClick: clickHandler, role: "combobox", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-groups-filter__search-container", fullSize ? "zen-groups-filter__search-container--full-size" : "", className]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-groups-filter__input-container", onKeyDown: handleKeydown, children: (0, jsx_runtime_1.jsx)(textInputRaw_1.TextInputRaw, { value: value, placeholder: placeholder || translate("Filter by group"), className: (0, classNames_1.classNames)(["zen-groups-filter__input", count > 0 ? "zen-groups-filter__input--selected" : ""]), onChange: onChange, disabled: false, type: "text", ref: inputRef, id: groupsFilterId }) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-groups-filter__search-input zen-groups-filter__search-input--post", children: (0, jsx_runtime_1.jsx)(groupsFilterLabelBox_1.GroupsFilterLabelBox, { count: count, withGlobeIcon: withGlobeIcon }) })] }), (0, jsx_runtime_1.jsx)("button", { tabIndex: -1, "aria-hidden": "true", type: "button", className: "zen-groups-filter__popup-trigger", title: translate("Open filter"), children: (0, jsx_runtime_1.jsx)(iconChevronDownSmall_1.IconChevronDownSmall, { className: isOpenPopup ? "zen-groups-filter__arrow-icon--up" : "zen-groups-filter__arrow-icon--down", size: "large" }) })] }));
-});
+};
+exports.GroupsFilterTrigger = GroupsFilterTrigger;
 exports.GroupsFilterTrigger.displayName = "GroupsFilterTrigger";
 exports.TRANSLATIONS = [
     "Filter by group",

package/dist/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/dist/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[];