@geotab/zenith 2.0.0 → 3.0.0-beta.1

package/esm/header/header.d.ts

@@ -13,16 +13,6 @@ export declare enum HeaderType {
 export interface IHeader extends IZenComponentProps {
     children: ReactElement | ReactElement[] | undefined;
     onFiltersBarOpen?: () => void;
-    /**
-     * @deprecated
-     * @param useMobileVersion - will be removed in the next major release
-    */
-    useMobileVersion?: boolean;
-    /**
-     * @deprecated
-     * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
 }
 export declare const Header: React.FC<IHeader> & {
     Button: React.FC<IHeaderButton>;

package/esm/header/header.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument, max-len */
 import React, { cloneElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { filterItems, getArrayOfChildren, getItemsForRender, findFirstScrollableParent } from "./headerHelpers";
 import { HeaderBack, TRANSLATIONS as HeaderBackTranslations } from "./headerBack";
@@ -103,7 +104,13 @@ export const Header = ({ children, className, onFiltersBarOpen }) => {
     const headerItems = getArrayOfChildren(children);
     const { leftElements, resizableElements, rightElements, tabs, filtersBar } = useMemo(() => filterItems(priority ? [...headerItems, ...additionalButtons] : [...additionalButtons, ...headerItems], isMobile), [additionalButtons, headerItems, isMobile, priority]);
     const [numberOfChangedFilters, setNumberOfChangedFilters] = useState(undefined);
-    const isOnlySearch = useMemo(() => filtersBar && searchComponent && React.Children.count(filtersBar.props.children) === 1, [filtersBar, searchComponent]);
+    const isOnlySearch = useMemo(() => {
+        if (!filtersBar || !searchComponent) {
+            return false;
+        }
+        const props = filtersBar.props;
+        return React.Children.count(props.children) === 1;
+    }, [filtersBar, searchComponent]);
     const memoizedFiltersBar = useMemo(() => filtersBar, [filtersBar]);
     const filtersBarToggler = useCallback(() => {
         if (onFiltersBarOpen || filtersBarToggleAllFiltersFn) {
@@ -153,7 +160,13 @@ export const Header = ({ children, className, onFiltersBarOpen }) => {
         _jsx(MobileSearchControl, { state: searchExpandedState, searchInput: searchComponent, onClick: (state) => setSearchExpandedState(state) }) : null, [searchComponent, searchExpandedState]);
     const mobileFilterButton = useMemo(() => isMobile && memoizedFiltersBar ? _jsx(MobileFilterControl, { count: numberOfChangedFilters, onClick: filtersBarToggler, ref: mobileFilterControlRef }) : null, [filtersBarToggler, isMobile, memoizedFiltersBar, numberOfChangedFilters]);
     const mobileFilterNewlineButton = useMemo(() => isMobile && memoizedFiltersBar ? _jsx(MobileFilterControl, { count: numberOfChangedFilters, onClick: filtersBarToggler, ref: mobileFilterNewLineControlRef }) : null, [filtersBarToggler, isMobile, memoizedFiltersBar, numberOfChangedFilters]);
-    const mobileNewLineContainer = useMemo(() => !searchComponent || isFilterHidden ? null : _jsxs("div", { className: "zen-main-header__mobile-container-new-line", children: [cloneElement(searchComponent, { key: "searchComponentKey", className: `${searchComponent.props.className || ""} zen-main-header__mobile-search-input` }), !isOnlySearch ? mobileFilterNewlineButton : null] }), [searchComponent, isFilterHidden, mobileFilterNewlineButton, isOnlySearch]);
+    const mobileNewLineContainer = useMemo(() => {
+        if (!searchComponent || isFilterHidden) {
+            return null;
+        }
+        const searchProps = searchComponent.props;
+        return _jsxs("div", { className: "zen-main-header__mobile-container-new-line", children: [cloneElement(searchComponent, { key: "searchComponentKey", className: `${searchProps.className || ""} zen-main-header__mobile-search-input` }), !isOnlySearch ? mobileFilterNewlineButton : null] });
+    }, [searchComponent, isFilterHidden, mobileFilterNewlineButton, isOnlySearch]);
     const isFilterInNewLine = useMemo(() => !!searchComponent && !isOnlySearch && resizableElements.length > 0 && !searchExpandedState, [searchComponent, isOnlySearch, resizableElements.length, searchExpandedState]);
     const collapsedElements = useMemo(() => nonFittingElements.length ? [moreButton] : [], [moreButton, nonFittingElements.length]);
     const mobileSearchCondition = !resizableElements.length && mobileSearch !== null;

package/esm/header/headerHelpers.d.ts

@@ -2,9 +2,9 @@ import React from "react";
 export declare const HeaderCustomMenuWrapper = "HeaderCustomMenuWrapper";
 export declare const getArrayOfChildren: <T>(children: T | T[] | undefined) => T[];
 export declare const isNamedChildComponent: <T>(item: any, componentName: string) => item is React.ReactElement<T, string | React.JSXElementConstructor<any>>;
-export declare const getItemsForRender: <T extends React.ReactElement<any, string | React.JSXElementConstructor<any>>>(items: T[], isMobile: boolean) => React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
-export declare const filterItems: <T extends React.ReactElement<any, string | React.JSXElementConstructor<any>>>(items: T[], isMobile: boolean) => {
-    resizableElements: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+export declare const getItemsForRender: <T extends React.ReactElement<unknown, string | React.JSXElementConstructor<any>>>(items: T[], isMobile: boolean) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[];
+export declare const filterItems: <T extends React.ReactElement<unknown, string | React.JSXElementConstructor<any>>>(items: T[], isMobile: boolean) => {
+    resizableElements: React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[];
     leftElements: T[];
     rightElements: T[];
     tabs: T | null;

package/esm/header/headerHelpers.js

@@ -24,7 +24,8 @@ export const isNamedChildComponent = (item, componentName) => {
     return type.displayName === componentName;
 };
 const getFiltersBar = (item) => {
-    const children = getArrayOfChildren(item.props.children);
+    const itemProps = item.props;
+    const children = getArrayOfChildren(itemProps.children);
     return children.find(child => child.type ? isNamedChildComponent(child, FiltersBarDisplayName) : false);
 };
 export const getItemsForRender = (items, isMobile) => {
@@ -35,10 +36,11 @@ export const getItemsForRender = (items, isMobile) => {
         if (el.type !== HeaderButton) {
             return el;
         }
+        const elProps = el.props;
         const clone = cloneElement(el, {
-            children: el.props.icon ? null : el.props.children,
+            children: elProps.icon ? null : elProps.children,
             key: `hidden-key-${ind}-${items.length}`,
-            title: el.props.title ? el.props.title : (typeof el.props.children === "string" ? el.props.children : "")
+            title: elProps.title ? elProps.title : (typeof elProps.children === "string" ? elProps.children : "")
         });
         return clone;
     });
@@ -47,8 +49,9 @@ export const filterItems = (items, isMobile) => {
     const itemsArr = [];
     React.Children.forEach(items, (child) => {
         if (React.isValidElement(child) && child.type === React.Fragment) {
-            if (child.props && child.props.children) {
-                const fragmentArr = getArrayOfChildren(child.props.children);
+            const fragmentProps = child.props;
+            if (fragmentProps.children) {
+                const fragmentArr = getArrayOfChildren(fragmentProps.children);
                 itemsArr.push(...fragmentArr.filter((el) => React.isValidElement(el)));
             }
         }
@@ -57,7 +60,6 @@ export const filterItems = (items, isMobile) => {
         }
     });
     const result = itemsArr.reduce((acc, item) => {
-        var _a, _b;
         if (isNamedChildComponent(item, HeaderTitleDisplayName)) {
             acc.leftElements.push(item);
         }
@@ -70,18 +72,19 @@ export const filterItems = (items, isMobile) => {
         else if (isNamedChildComponent(item, HeaderButtonDisplayName) ||
             isNamedChildComponent(item, HeaderMenuDisplayName) ||
             isNamedChildComponent(item, HeaderCustomMenuWrapper)) {
-            const targetElements = ((_a = item.props) === null || _a === void 0 ? void 0 : _a.important) && !acc.rightElements.length ? acc.rightElements : acc.resizableElements;
-            if (((_b = item.props) === null || _b === void 0 ? void 0 : _b.important) && item.type === HeaderButton && isMobile) {
+            const itemProps = item.props;
+            const targetElements = itemProps.important && !acc.rightElements.length ? acc.rightElements : acc.resizableElements;
+            if (itemProps.important && item.type === HeaderButton && isMobile) {
                 const clone = cloneElement(item, {
-                    children: item.props.icon ? null : item.props.children,
-                    key: item.key || `key-${item.props.id}`,
-                    title: item.props.title ? item.props.title : (typeof item.props.children === "string" ? item.props.children : "")
+                    children: itemProps.icon ? null : itemProps.children,
+                    key: item.key || `key-${itemProps.id}`,
+                    title: itemProps.title ? itemProps.title : (typeof itemProps.children === "string" ? itemProps.children : "")
                 });
                 targetElements.push(clone);
             }
             else {
-                const element = item.key || item.props.id ? cloneElement(item, {
-                    key: item.key || `key-${item.props.id}`
+                const element = item.key || itemProps.id ? cloneElement(item, {
+                    key: item.key || `key-${itemProps.id}`
                 }) : item;
                 targetElements.push(element);
             }
@@ -90,13 +93,14 @@ export const filterItems = (items, isMobile) => {
     }, { leftElements: [], resizableElements: [], rightElements: [], tabs: null, filtersBar: null });
     let isHasPrimary = result.rightElements.length > 0;
     const preparedResizableElements = result.resizableElements.map((el) => {
-        if (el.props.important || el.props.type === "primary") {
+        const elProps = el.props;
+        if (elProps.important || elProps.type === "primary") {
             const elClone = cloneElement(el, {
                 key: el.key,
                 important: false,
-                type: el.props.type === "primary" && isHasPrimary ? "secondary" : el.props.type
+                type: elProps.type === "primary" && isHasPrimary ? "secondary" : elProps.type
             });
-            isHasPrimary = el.props.type === "primary" ? true : isHasPrimary;
+            isHasPrimary = elProps.type === "primary" ? true : isHasPrimary;
             return elClone;
         }
         return el;

package/esm/header/hooks/useNonFittingElements.d.ts

@@ -18,6 +18,6 @@ export declare const useNonFittingElements: <T extends {
 }>({ maxWidth, data, hiddenElementsCountToRender, widthDelta, reverseOrderOfVisible }: INonFittingElementProps<T>) => {
     visibleElements: T[];
     nonFittingElements: T[];
-    hiddenContainerRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    hiddenContainerRef: import("react").RefObject<HTMLDivElement | null>;
 };
 export {};

package/esm/headerTitle/headerTitle.d.ts

@@ -14,11 +14,6 @@ export interface IHeaderTitle extends IZenComponentProps {
     isBeta?: boolean;
     isMobile?: boolean;
     allowBookmarkWithBack?: boolean;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
     feedBackAction?: IBetaPillActions;
     betaOptionAction?: IBetaPillActions;
 }

package/esm/index.d.ts

@@ -56,6 +56,7 @@ export { useMobile } from "./commonHelpers/hooks/useMobile";
 export { useResize } from "./commonHelpers/hooks/useResize";
 export { useScroll } from "./commonHelpers/hooks/useScroll";
 export { useThrottle } from "./commonHelpers/hooks/useThrottle";
+export { type TRef } from "./commonHelpers/ref";
 export { echo, flattenArrays, deepMerge, deepClone } from "./commonHelpers/utils";
 export { type IControlledPopup, ControlledPopup } from "./controlledPopup/controlledPopup";
 export { cutSeconds } from "./dateInput/cutSeconds";
@@ -92,7 +93,7 @@ export { TriggerContext, TriggerContextProvider } from "./filtersBar/filtersBarP
 export { type IFooterButtons, FooterButtons } from "./footerButtons/footerButtons";
 export { type IFormField, type IFormFieldComponent, type TFormFieldComponentProps, FormField } from "./formField/formField";
 export { type IStepItem } from "./formStepper/components/formStep";
-export { type IFormStepper, FormStepper } from "./formStepper/formStepper";
+export { STEPPER_LAST_STEP, type TFormStepperMode, type IFormStepper, FormStepper } from "./formStepper/formStepper";
 export { type IFormStepperButtons, FormStepperButtons } from "./formStepperButtons/formStepperButtons";
 export { type IGridLayout, GridLayout } from "./gridLayout/gridLayout";
 export { type IGroupButton, GroupButton } from "./groupButton/groupButton";
@@ -107,7 +108,6 @@ export { useCustomMenu } from "./header/hooks/useCustomMenu";
 export { type IIcon } from "./icons/icon";
 export { IconActivity } from "./icons/iconActivity";
 export { IconAddPeople } from "./icons/iconAddPeople";
-export { IconAddPeople2 } from "./icons/iconAddPeople2";
 export { IconAiImages } from "./icons/iconAiImages";
 export { IconAiSparkles } from "./icons/iconAiSparkles";
 export { IconAiSparkles2 } from "./icons/iconAiSparkles2";
@@ -198,7 +198,6 @@ export { IconBulletList } from "./icons/iconBulletList";
 export { IconBusiness } from "./icons/iconBusiness";
 export { IconCalculator } from "./icons/iconCalculator";
 export { IconCalendar } from "./icons/iconCalendar";
-export { IconCalendar2 } from "./icons/iconCalendar2";
 export { IconCamera } from "./icons/iconCamera";
 export { IconCamera2 } from "./icons/iconCamera2";
 export { IconCamera3 } from "./icons/iconCamera3";
@@ -274,7 +273,6 @@ export { IconCornerRightDown } from "./icons/iconCornerRightDown";
 export { IconCornerRightUp } from "./icons/iconCornerRightUp";
 export { IconCornerUpLeft } from "./icons/iconCornerUpLeft";
 export { IconCornerUpRight } from "./icons/iconCornerUpRight";
-export { IconCornerUpRight2 } from "./icons/iconCornerUpRight2";
 export { IconCreditCard } from "./icons/iconCreditCard";
 export { IconCreditCard2 } from "./icons/iconCreditCard2";
 export { IconCreditCard3 } from "./icons/iconCreditCard3";
@@ -382,12 +380,10 @@ export { IconHourglass } from "./icons/iconHourglass";
 export { IconITS } from "./icons/iconITS";
 export { IconIcon } from "./icons/iconIcon";
 export { IconImac } from "./icons/iconImac";
-export { IconImac2 } from "./icons/iconImac2";
 export { IconImage } from "./icons/iconImage";
 export { IconImages } from "./icons/iconImages";
 export { IconImages2 } from "./icons/iconImages2";
 export { IconInbox } from "./icons/iconInbox";
-export { IconInbox2 } from "./icons/iconInbox2";
 export { IconInfoCircle } from "./icons/iconInfoCircle";
 export { IconInfoSquare } from "./icons/iconInfoSquare";
 export { IconInspect } from "./icons/iconInspect";
@@ -443,7 +439,6 @@ export { IconMenu } from "./icons/iconMenu";
 export { IconMenu2 } from "./icons/iconMenu2";
 export { IconMenu3 } from "./icons/iconMenu3";
 export { IconMenuCircle } from "./icons/iconMenuCircle";
-export { IconMenuCircle2 } from "./icons/iconMenuCircle2";
 export { IconMicrophone } from "./icons/iconMicrophone";
 export { IconMicrophone2 } from "./icons/iconMicrophone2";
 export { IconMinimize } from "./icons/iconMinimize";
@@ -546,7 +541,6 @@ export { IconSettings6 } from "./icons/iconSettings6";
 export { IconSettings7 } from "./icons/iconSettings7";
 export { IconSettings8 } from "./icons/iconSettings8";
 export { IconShare } from "./icons/iconShare";
-export { IconShare2 } from "./icons/iconShare2";
 export { IconShare3 } from "./icons/iconShare3";
 export { IconShield } from "./icons/iconShield";
 export { IconShield2 } from "./icons/iconShield2";
@@ -603,7 +597,6 @@ export { IconVolumeDown } from "./icons/iconVolumeDown";
 export { IconVolumeFull } from "./icons/iconVolumeFull";
 export { IconVolumeHalf } from "./icons/iconVolumeHalf";
 export { IconVolumeMinimum } from "./icons/iconVolumeMinimum";
-export { IconVolumeOf } from "./icons/iconVolumeOf";
 export { IconVolumeOff } from "./icons/iconVolumeOff";
 export { IconVolumeOn } from "./icons/iconVolumeOn";
 export { IconWallet } from "./icons/iconWallet";

package/esm/index.js

@@ -87,7 +87,7 @@ export { FiltersBarActions } from "./filtersBar/filtersBarActions/filtersBarActi
 export { TriggerContext, TriggerContextProvider } from "./filtersBar/filtersBarProviderTrigger";
 export { FooterButtons } from "./footerButtons/footerButtons";
 export { FormField } from "./formField/formField";
-export { FormStepper } from "./formStepper/formStepper";
+export { STEPPER_LAST_STEP, FormStepper } from "./formStepper/formStepper";
 export { FormStepperButtons } from "./formStepperButtons/formStepperButtons";
 export { GridLayout } from "./gridLayout/gridLayout";
 export { GroupButton } from "./groupButton/groupButton";
@@ -101,7 +101,6 @@ export { HeaderMenuDisplayName, HeaderMenu } from "./header/headerMenu";
 export { useCustomMenu } from "./header/hooks/useCustomMenu";
 export { IconActivity } from "./icons/iconActivity";
 export { IconAddPeople } from "./icons/iconAddPeople";
-export { IconAddPeople2 } from "./icons/iconAddPeople2";
 export { IconAiImages } from "./icons/iconAiImages";
 export { IconAiSparkles } from "./icons/iconAiSparkles";
 export { IconAiSparkles2 } from "./icons/iconAiSparkles2";
@@ -192,7 +191,6 @@ export { IconBulletList } from "./icons/iconBulletList";
 export { IconBusiness } from "./icons/iconBusiness";
 export { IconCalculator } from "./icons/iconCalculator";
 export { IconCalendar } from "./icons/iconCalendar";
-export { IconCalendar2 } from "./icons/iconCalendar2";
 export { IconCamera } from "./icons/iconCamera";
 export { IconCamera2 } from "./icons/iconCamera2";
 export { IconCamera3 } from "./icons/iconCamera3";
@@ -268,7 +266,6 @@ export { IconCornerRightDown } from "./icons/iconCornerRightDown";
 export { IconCornerRightUp } from "./icons/iconCornerRightUp";
 export { IconCornerUpLeft } from "./icons/iconCornerUpLeft";
 export { IconCornerUpRight } from "./icons/iconCornerUpRight";
-export { IconCornerUpRight2 } from "./icons/iconCornerUpRight2";
 export { IconCreditCard } from "./icons/iconCreditCard";
 export { IconCreditCard2 } from "./icons/iconCreditCard2";
 export { IconCreditCard3 } from "./icons/iconCreditCard3";
@@ -376,12 +373,10 @@ export { IconHourglass } from "./icons/iconHourglass";
 export { IconITS } from "./icons/iconITS";
 export { IconIcon } from "./icons/iconIcon";
 export { IconImac } from "./icons/iconImac";
-export { IconImac2 } from "./icons/iconImac2";
 export { IconImage } from "./icons/iconImage";
 export { IconImages } from "./icons/iconImages";
 export { IconImages2 } from "./icons/iconImages2";
 export { IconInbox } from "./icons/iconInbox";
-export { IconInbox2 } from "./icons/iconInbox2";
 export { IconInfoCircle } from "./icons/iconInfoCircle";
 export { IconInfoSquare } from "./icons/iconInfoSquare";
 export { IconInspect } from "./icons/iconInspect";
@@ -437,7 +432,6 @@ export { IconMenu } from "./icons/iconMenu";
 export { IconMenu2 } from "./icons/iconMenu2";
 export { IconMenu3 } from "./icons/iconMenu3";
 export { IconMenuCircle } from "./icons/iconMenuCircle";
-export { IconMenuCircle2 } from "./icons/iconMenuCircle2";
 export { IconMicrophone } from "./icons/iconMicrophone";
 export { IconMicrophone2 } from "./icons/iconMicrophone2";
 export { IconMinimize } from "./icons/iconMinimize";
@@ -540,7 +534,6 @@ export { IconSettings6 } from "./icons/iconSettings6";
 export { IconSettings7 } from "./icons/iconSettings7";
 export { IconSettings8 } from "./icons/iconSettings8";
 export { IconShare } from "./icons/iconShare";
-export { IconShare2 } from "./icons/iconShare2";
 export { IconShare3 } from "./icons/iconShare3";
 export { IconShield } from "./icons/iconShield";
 export { IconShield2 } from "./icons/iconShield2";
@@ -596,7 +589,6 @@ export { IconVolumeDown } from "./icons/iconVolumeDown";
 export { IconVolumeFull } from "./icons/iconVolumeFull";
 export { IconVolumeHalf } from "./icons/iconVolumeHalf";
 export { IconVolumeMinimum } from "./icons/iconVolumeMinimum";
-export { IconVolumeOf } from "./icons/iconVolumeOf";
 export { IconVolumeOff } from "./icons/iconVolumeOff";
 export { IconVolumeOn } from "./icons/iconVolumeOn";
 export { IconWallet } from "./icons/iconWallet";

package/esm/inputAdornments/inputAdornments.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ReactNode } from "react";
+import { ReactNode, RefObject } from "react";
 import "./inputAdornments.less";
 export interface IInputAdornments {
     value: string;
@@ -17,5 +17,9 @@ export interface IInputAdornments {
     maxLength?: number;
     id?: string;
     autoFocus?: boolean;
+    ref?: RefObject<HTMLInputElement | null>;
 }
-export declare const InputAdornments: React.ForwardRefExoticComponent<IInputAdornments & React.RefAttributes<HTMLInputElement>>;
+export declare const InputAdornments: {
+    ({ id, value, className, disabled, isError, maxLength, onChange, onKeyDown, onFocus, onBlur, startAdornment, endAdornment, placeholder, inputType, autoFocus, ref }: IInputAdornments): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/esm/inputAdornments/inputAdornments.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
 import { useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { TextInputRaw } from "../textInputRaw/textInputRaw";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
-export const InputAdornments = React.forwardRef(({ id, value, className = "", disabled, isError, maxLength, onChange, onKeyDown, onFocus, onBlur, startAdornment, endAdornment, placeholder, inputType = "text", autoFocus }, ref) => {
+export const InputAdornments = ({ id, value, className = "", disabled, isError, maxLength, onChange, onKeyDown, onFocus, onBlur, startAdornment, endAdornment, placeholder, inputType = "text", autoFocus, ref }) => {
     const disabledClassName = disabled ? "zen-input-adornments--disabled" : "";
     const driveComponentClass = useDriveClassName("zen-input-adornments");
     const classes = useMemo(() => classNames([
@@ -20,5 +19,5 @@ export const InputAdornments = React.forwardRef(({ id, value, className = "", di
         className
     ]), [className, endAdornment, value]);
     return (_jsxs("div", { className: classes, children: [!!startAdornment && (_jsx("div", { className: "zen-input-adornments__adornment zen-input-adornments__adornment--start", children: startAdornment })), _jsx("div", { className: wrapperClasses, children: _jsx(TextInputRaw, { ref: ref, id: id, value: value, maxLength: maxLength, isError: isError, placeholder: placeholder, onChange: onChange, onKeyDown: onKeyDown, onBlur: onBlur, onFocus: onFocus, disabled: disabled, type: inputType, autoFocus: autoFocus, className: "zen-input-adornments__input zen-input-adornments__input--border-none" }) }), !!endAdornment && (_jsx("div", { className: "zen-input-adornments__adornment zen-input-adornments__adornment--end", children: endAdornment }))] }));
-});
+};
 InputAdornments.displayName = "InputAdornments";

package/esm/layout/layout.js

@@ -54,7 +54,7 @@ const LayoutInner = ({ id, className, pageScrolling = true, children }) => {
                 h.push(_jsx(LayoutHeader, { children: child }, "header-key"));
                 return;
             }
-            if (!s.length && child.type === LayoutSummaryTiles && isValidElement) {
+            if (!s.length && child.type === LayoutSummaryTiles && React.isValidElement(child)) {
                 s.push(child);
                 return;
             }

package/esm/layout/layoutSummaryTiles.d.ts

@@ -1,7 +1,7 @@
-import { ReactElement } from "react";
+import { ReactElement, RefObject } from "react";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
-import React from "react";
 export interface ILayoutSummaryTiles extends IZenComponentProps {
     children: ReactElement | ReactElement[] | null | undefined | (ReactElement | null | undefined)[];
+    ref?: RefObject<HTMLDivElement | null>;
 }
-export declare const LayoutSummaryTiles: React.ForwardRefExoticComponent<ILayoutSummaryTiles & React.RefAttributes<HTMLDivElement>>;
+export declare const LayoutSummaryTiles: ({ className, children, ref }: ILayoutSummaryTiles) => import("react/jsx-runtime").JSX.Element;

package/esm/layout/layoutSummaryTiles.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
+import { useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { getArrayOfChildren, isNamedChildComponent } from "../header/headerHelpers";
 import { SummaryTileDisplayName } from "../summaryTile/summaryTile";
 import { SummaryTileBar } from "../summaryTileBar/summaryTileBar";
 import React from "react";
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const LayoutSummaryTiles = forwardRef(function LayoutSummaryTilesFn({ className = "", children }, ref) {
+export const LayoutSummaryTiles = ({ className = "", children, ref }) => {
     const childrenArray = useMemo(() => getArrayOfChildren(children).filter((child) => child !== null && child !== undefined && React.isValidElement(child)), [children]);
     // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     const isEachChildrenSummaryTile = childrenArray.every((child) => isNamedChildComponent(child, SummaryTileDisplayName));
     return (_jsx("div", { ref: ref, className: classNames(["zen-layout__summary-tiles", !isEachChildrenSummaryTile ? "zen-layout__summary-tiles--custom" : "", className]), children: childrenArray.length && isEachChildrenSummaryTile ? _jsx(SummaryTileBar, { children: childrenArray }) : children }));
-});
+};

package/esm/list/hooks/useLazyLoading.d.ts

@@ -1 +1,2 @@
-export declare const useLazyLoading: (ref: React.RefObject<HTMLUListElement | null>, isLoading: boolean | undefined, onListEnd: (() => void) | undefined) => void;
+import { RefObject } from "react";
+export declare const useLazyLoading: (ref: RefObject<HTMLUListElement | null>, isLoading: boolean | undefined, onListEnd: (() => void) | undefined) => void;

package/esm/list/hooks/useVirtualScroll.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
-export declare const useVirtualScroll: (ref: React.RefObject<HTMLUListElement | null>, children: ReactNode) => {
+import { ReactNode, RefObject } from "react";
+export declare const useVirtualScroll: (ref: RefObject<HTMLUListElement | null>, children: ReactNode) => {
     isInViewport: (id: string) => boolean;
 };

package/esm/list/list.js

@@ -1,4 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Children, cloneElement, useCallback, useId, useMemo, useRef } from "react";
 import { useDragAndDrop } from "./hooks/useDragAndDrop";
 import { isDataListItem } from "./utils/isDataListitem";

package/esm/menu/components/menuButton.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, RefObject } from "react";
 import { IZenIdComponentProps } from "../../commonHelpers/zenComponent";
 import "../../button/button.less";
 import "./menuButton.less";
@@ -15,6 +15,7 @@ export interface IMenuButton extends IZenIdComponentProps {
     rel?: string;
     onClick?: (id: string, e: React.MouseEvent) => void;
     active?: boolean | null;
+    ref?: RefObject<HTMLButtonElement | null>;
 }
-export declare const MenuButton: import("react").ForwardRefExoticComponent<IMenuButton & IMenuButtonInternal & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const MenuButton: ({ id, onClick, hasChildren, disabled, icon, name, link, target, rel, className, active, ref }: IMenuButton & IMenuButtonInternal) => import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/menu/components/menuButton.js

@@ -1,13 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement, forwardRef, useCallback, useMemo } from "react";
+import { createElement, useCallback, useMemo } from "react";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { IconChevronRight } from "../../icons/iconChevronRight";
 import { useDriveClassName } from "../../utils/theme/useDriveClassName";
 import { useDrive } from "../../utils/theme/useDrive";
 import { getMenuButtonState } from "../utils/getMenuButtonState";
-export const MenuButton = forwardRef(
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function MenuButton({ id, onClick, hasChildren, disabled, icon, name, link, target, rel, className = "", active = null }, ref) {
+export const MenuButton = ({ id, onClick, hasChildren, disabled, icon, name, link, target, rel, className = "", active = null, ref }) => {
     const { hasState, isActive } = getMenuButtonState(active, disabled);
     const driveMenuButtonActionClasses = useDriveClassName("zen-menu-button__action");
     const isDrive = useDrive();
@@ -46,4 +44,4 @@ function MenuButton({ id, onClick, hasChildren, disabled, icon, name, link, targ
                 className: "zen-caption__pre-content"
             }), name] }));
     return _jsx("li", { role: "presentation", className: classNames(["zen-menu-button", className]), children: link ? linkTemplate : buttonTemplate });
-});
+};

package/esm/menu/components/menuItem.d.ts

@@ -12,5 +12,6 @@ export interface IMenuControlledItem extends IMenuItem {
 export interface IMenuItem extends IMenuButton {
     alignment?: TAlignment;
 }
+export declare const isMenuItem: (element: ReactElement | undefined) => boolean;
 export declare const MenuItem: FC<Omit<IMenuItem & IMenuControlledItem & IMenuItemInternal, "hasChildren">>;
 export {};

package/esm/menu/components/menuItem.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, Fragment, cloneElement, useMemo, useRef, useContext, useCallback } from "react";
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument, @typescript-eslint/naming-convention */
+import { Children, Fragment, cloneElement, useMemo, useRef, useContext, useCallback, isValidElement } from "react";
 import { MenuButton } from "./menuButton";
 import { ControlledMenu } from "../controlledMenu";
 import { ControlledPopup } from "../../controlledPopup/controlledPopup";
@@ -7,6 +8,19 @@ import { PathContext } from "../contexts/pathContext";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { generateId } from "../../commonHelpers/utils";
 import { MenuAlignmentContext } from "../../header/headerContext";
+import { isSeparator } from "./menuSeparator";
+export const isMenuItem = (element) => {
+    if (!element || !element.type) {
+        return false;
+    }
+    if (element.type === ControlledMenu.Item) {
+        return true;
+    }
+    if ((typeof element.type === "object" || typeof element.type === "function") && "displayName" in element.type) {
+        return element.type.displayName === "MenuItem";
+    }
+    return false;
+};
 export const MenuItem = ({ id, children, name, icon, disabled, onClick, link, target, rel, isMobile = false, setIsOpen, trigger, className, active, alignment }) => {
     const aligmentContext = useContext(MenuAlignmentContext);
     const contentAlignment = alignment || aligmentContext.alignment || "right-top";
@@ -24,10 +38,10 @@ export const MenuItem = ({ id, children, name, icon, disabled, onClick, link, ta
         !link && (onClick === null || onClick === void 0 ? void 0 : onClick(itemId, e));
     }, [onClick, onOpenBranch, id, link]);
     const memoizedCustomTriggerOnClick = useCallback((e, ...rest) => {
-        var _a, _b;
         onOpenBranch(id);
-        if ((_a = trigger === null || trigger === void 0 ? void 0 : trigger.props) === null || _a === void 0 ? void 0 : _a.onClick) {
-            (_b = trigger.props) === null || _b === void 0 ? void 0 : _b.onClick(...[e, ...rest]);
+        const triggerProps = trigger === null || trigger === void 0 ? void 0 : trigger.props;
+        if (triggerProps.onClick) {
+            triggerProps.onClick(...[e, ...rest]);
             return;
         }
         onClick === null || onClick === void 0 ? void 0 : onClick(id, e);
@@ -46,16 +60,25 @@ export const MenuItem = ({ id, children, name, icon, disabled, onClick, link, ta
                 cont.push(_jsx("li", { className: classNames(["zen-menu-item__content", className !== null && className !== void 0 ? className : ""]), role: "presentation", children: child }, generateId()));
                 return;
             }
-            if (child.type === ControlledMenu.Item) {
+            if (isValidElement(child) && isSeparator(child)) {
+                const clone = cloneElement(child, {
+                    key: child.props.key || generateId()
+                });
+                cont.push(clone);
+                return;
+            }
+            if (isMenuItem(child)) {
+                const childProps = child.props;
                 const clone = cloneElement(child, {
                     isMobile,
-                    key: child.props.id,
+                    key: childProps.id,
                     setIsOpen
                 });
                 cont.push(clone);
                 return;
             }
-            cont.push(_jsx("li", { className: classNames(["zen-menu-item__content", className !== null && className !== void 0 ? className : ""]), role: "presentation", children: child }, child.props.id || child.props["data-id"] || generateId()));
+            const childProps = child.props;
+            cont.push(_jsx("li", { className: classNames(["zen-menu-item__content", className !== null && className !== void 0 ? className : ""]), role: "presentation", children: child }, childProps.id || childProps["data-id"] || generateId()));
         });
         return cont;
     }, [children, isMobile, setIsOpen, className]);
@@ -78,3 +101,4 @@ export const MenuItem = ({ id, children, name, icon, disabled, onClick, link, ta
     }
     return _jsxs(Fragment, { children: [popupTrigger, _jsx(ControlledPopup, { className: classNames([`zen-controlled-menu-submenu--${path.length}`]), useTrapFocusWithTrigger: "on", alignment: contentAlignment, triggerRef: ref, isOpen: isOpen, onOpenChange: memoizedOnOpenChange, ariaLabel: popupTrigger.props.name, recalculateOnScroll: true, children: _jsx("ul", { role: "menu", className: "zen-menu-item", children: content }) })] }, id);
 };
+MenuItem.displayName = "MenuItem";

package/esm/menu/components/menuSeparator.d.ts

@@ -1,5 +1,6 @@
-import { FC } from "react";
+import { FC, ReactElement } from "react";
 import "./menuSeparator.less";
 export interface IMenuSeparator {
 }
 export declare const MenuSeparator: FC<IMenuSeparator>;
+export declare const isSeparator: (element: ReactElement | undefined) => boolean;

package/esm/menu/components/menuSeparator.js

@@ -1,2 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const MenuSeparator = () => _jsx("li", { className: "zen-menu-separator", role: "separator" });
+MenuSeparator.displayName = "MenuSeparator";
+export const isSeparator = (element) => {
+    if (!element || !element.type) {
+        return false;
+    }
+    if (element.type === MenuSeparator) {
+        return true;
+    }
+    if ((typeof element.type === "object" || typeof element.type === "function") && "displayName" in element.type) {
+        return element.type.displayName === "MenuSeparator";
+    }
+    return false;
+};

package/esm/menu/controlledMenu.d.ts

@@ -12,7 +12,7 @@ export interface IControlledMenu extends IZenComponentProps {
     paddingY?: number;
     isOpen: boolean;
     setIsOpen: (v: boolean) => void;
-    triggerRef: RefObject<HTMLElement>;
+    triggerRef: RefObject<HTMLElement | null>;
     alignment?: TAlignment;
     ariaLabel?: string;
     ariaLabelledby?: string;