@geotab/zenith 2.0.0 → 3.0.0-beta.1

package/esm/menu/controlledMenu.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable @typescript-eslint/naming-convention, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument */
 import { Children, cloneElement, isValidElement, useState, useMemo, useCallback, useEffect } from "react";
-import { MenuItem } from "./components/menuItem";
+import { MenuItem, isMenuItem } from "./components/menuItem";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { findContent } from "./utils/findContent";
 import { findFirstFocusable } from "./utils/findFirstFocusable";
@@ -18,7 +18,7 @@ import { DeviceType } from "../commonHelpers/hooks/deviceType";
 import { useDeviceType } from "../commonHelpers/hooks/useDeviceType";
 import { generateId } from "../commonHelpers/utils";
 import { PathProvider } from "./contexts/pathProvider";
-import { MenuSeparator } from "./components/menuSeparator";
+import { isSeparator, MenuSeparator } from "./components/menuSeparator";
 // eslint-disable-next-line react/prop-types
 export const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ariaLabelledby, id, title, className = "", listClassName = "", paddingX = 0, paddingY = 0, alignment }) => {
     const [deviceType, setDeviceType] = useState(DeviceType.Desktop);
@@ -60,7 +60,8 @@ export const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLa
         if (isMobile && path.length > 0) {
             const el = findContent(children, ControlledMenu.Item, path[path.length - 1]);
             if (el || isValidElement(el)) {
-                currentChildren = el.props.children;
+                const elProps = el.props;
+                currentChildren = elProps.children;
                 par = el;
             }
         }
@@ -73,14 +74,14 @@ export const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLa
                 cont.push(_jsx("li", { role: "presentation", className: classNames(["zen-menu-item__content"]), children: child }, generateId()));
                 return;
             }
-            if (child.type === MenuSeparator) {
+            if (isValidElement(child) && isSeparator(child)) {
                 const clone = cloneElement(child, {
                     key: child.props.key || generateId()
                 });
                 cont.push(clone);
                 return;
             }
-            if (child.type === ControlledMenu.Item) {
+            if (isValidElement(child) && isMenuItem(child)) {
                 const clone = cloneElement(child, {
                     isMobile,
                     key: child.props.id,
@@ -90,17 +91,17 @@ export const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLa
                 cont.push(clone);
                 return;
             }
-            cont.push(_jsx("li", { className: classNames(["zen-menu-item__content"]), 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"]), role: "presentation", children: child }, childProps.id || childProps["data-id"] || generateId()));
         });
-        while (cont[0] && cont[0].type === MenuSeparator) {
+        while (cont[0] && isSeparator(cont[0])) {
             cont.shift();
         }
-        while (cont[cont.length - 1] && cont[cont.length - 1].type === MenuSeparator) {
+        while (cont[cont.length - 1] && isSeparator(cont[cont.length - 1])) {
             cont.pop();
         }
         cont = cont.filter((el, indx, arr) => {
-            var _a;
-            if (el.type === MenuSeparator && ((_a = arr[indx - 1]) === null || _a === void 0 ? void 0 : _a.type) === MenuSeparator) {
+            if (isSeparator(el) && arr[indx - 1] && isSeparator(arr[indx - 1])) {
                 return false;
             }
             return true;
@@ -140,7 +141,7 @@ export const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLa
             }
         }
     };
-    const renderMenuList = () => _jsx("div", { onKeyDown: onKeyDown, className: classNames(["zen-action-list", className]), children: _jsxs("ul", { role: "menu", className: classNames(["zen-menu-item", className, listClassName]), children: [parent ? _jsx(MenuButton, { id: "root", name: parent.props.name, icon: IconArrowLeft, onClick: closeBranch, hasChildren: false, disabled: false }, "root") : null, content] }) });
+    const renderMenuList = () => _jsx("div", { onKeyDown: onKeyDown, className: classNames(["zen-action-list", className]), children: _jsxs("ul", { role: "menu", className: classNames(["zen-menu-item", className, listClassName]), children: [parent ? _jsx(MenuButton, { id: "root", name: parent.props.name || "", icon: IconArrowLeft, onClick: closeBranch, hasChildren: false, disabled: false }, "root") : null, content] }) });
     const hideMenu = useCallback(() => {
         closeBranch();
         setIsOpen(false);

package/esm/menu/menu.d.ts

@@ -5,7 +5,7 @@ import { TAlignment } from "../absolute/absolute";
 import { IMenuSeparator } from "./components/menuSeparator";
 export interface IMenu extends Pick<IZenComponentProps, "children"> {
     trigger?: ReactElement;
-    triggerRef?: RefObject<HTMLElement>;
+    triggerRef?: RefObject<HTMLElement | null>;
     title: string;
     alignment?: TAlignment;
     ariaLabel?: string;

package/esm/menu/menu.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument */
 import { cloneElement, useEffect, useRef, useState } from "react";
 import { ControlledMenu } from "./controlledMenu";
 import { MenuItem } from "./components/menuItem";
@@ -8,6 +9,7 @@ import { classNames } from "../commonHelpers/classNames/classNames";
 export const Menu = 
 // eslint-disable-next-line react/prop-types
 ({ children, title, trigger, triggerRef, ariaLabel, ariaLabelledBy, alignment = "bottom-left", className }) => {
+    var _a;
     const [isOpen, setIsOpen] = useState(false);
     const innerRef = useRef(null);
     const shouldRenderTrigger = !!trigger;
@@ -28,7 +30,7 @@ export const Menu =
         }
     }, [triggerRef, isOpen, shouldRenderTrigger]);
     const triggerComp = shouldRenderTrigger ? renderTrigger() : null;
-    return _jsxs(_Fragment, { children: [triggerComp, _jsx(ControlledMenu, { alignment: alignment, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledBy || (triggerComp === null || triggerComp === void 0 ? void 0 : triggerComp.props.id), isOpen: isOpen, setIsOpen: setIsOpen, triggerRef: ref, title: title, className: classNames(["zen-menu", className || ""]), children: children })] });
+    return _jsxs(_Fragment, { children: [triggerComp, _jsx(ControlledMenu, { alignment: alignment, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledBy || ((_a = triggerComp === null || triggerComp === void 0 ? void 0 : triggerComp.props) === null || _a === void 0 ? void 0 : _a.id), isOpen: isOpen, setIsOpen: setIsOpen, triggerRef: ref, title: title, className: classNames(["zen-menu", className || ""]), children: children })] });
 };
 Menu.Item = MenuItem;
 Menu.Separator = MenuSeparator;

package/esm/menu/utils/findContent.js

@@ -5,12 +5,13 @@ export const findContent = (children, targetComponent, id) => {
         if (found || !React.isValidElement(child)) {
             return;
         }
-        if (id ? child.type === targetComponent && child.props.id === id : child.type === targetComponent) {
+        const childProps = child.props;
+        if (id ? child.type === targetComponent && childProps.id === id : child.type === targetComponent) {
             found = child;
             return;
         }
-        if (child.props.children) {
-            found = findContent(child.props.children, targetComponent, id);
+        if (childProps.children) {
+            found = findContent(childProps.children, targetComponent, id);
         }
     });
     return found;

package/esm/miniTabs/miniTabsHeaderItem.d.ts

@@ -1,10 +1,10 @@
-import React from "react";
+import React, { RefObject } from "react";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 export interface IMiniTabsHeaderItem extends IZenComponentProps {
     id: string;
     isActive: boolean;
     handleClick: (e: React.MouseEvent<HTMLElement>) => void;
     children: string;
-    buttonRef?: React.RefObject<HTMLButtonElement>;
+    buttonRef?: RefObject<HTMLButtonElement | null>;
 }
 export declare const MiniTabsHeaderItem: React.FC<IMiniTabsHeaderItem>;

package/esm/miniTabs/miniTabsHelper.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactElement } from "react";
 import { IMiniTabsItem, MiniTabsItem } from "./miniTabsItem";
 export declare const getChildren: (elem: ReactElement<typeof MiniTabsItem> | ReactElement<typeof MiniTabsItem>[] | undefined) => React.ReactElement<React.FC<IMiniTabsItem>, string | React.JSXElementConstructor<any>>[] | undefined;
-export declare const convertChild: (child: React.ReactElement) => any;
+export declare const convertChild: (child: React.ReactNode) => IMiniTabsItem | IMiniTabsItem[] | undefined;
 export declare const getChildrenForRender: (children: React.ReactElement<typeof MiniTabsItem> | React.ReactElement<typeof MiniTabsItem>[]) => IMiniTabsItem[];

package/esm/miniTabs/miniTabsHelper.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Children, isValidElement } from "react";
 import { MiniTabsItem } from "./miniTabsItem";
 export const getChildren = (elem) => {
     if (!elem) {
@@ -9,20 +9,45 @@ export const getChildren = (elem) => {
     }
     return [elem];
 };
+const hasChildren = (child) => {
+    if (!isValidElement(child)) {
+        return false;
+    }
+    const childElement = child;
+    return "children" in childElement.props && Children.count(childElement.props.children) > 0;
+};
 export const convertChild = (child) => {
+    if (!isValidElement(child)) {
+        return undefined;
+    }
     if (child.type === MiniTabsItem) {
         return Object.assign({}, child.props);
     }
-    if (child.type === React.Fragment && child.props.children) {
-        if (Array.isArray(child.props.children)) {
-            return [...child.props.children].filter(el => (el.type === MiniTabsItem)).map(el => el.props);
+    if (child.type === React.Fragment && hasChildren(child)) {
+        const fragmentProps = child.props;
+        if (fragmentProps.children && Array.isArray(fragmentProps.children)) {
+            return fragmentProps.children
+                .filter((el) => isValidElement(el) && el.type === MiniTabsItem)
+                .map(el => (Object.assign({}, el.props)));
         }
-        return child.props.children.type === MiniTabsItem ? Object.assign({}, child.props.children.props) : undefined;
+        const nestedChild = fragmentProps.children;
+        return isValidElement(nestedChild) && nestedChild.type === MiniTabsItem ? Object.assign({}, nestedChild.props) : undefined;
     }
     return undefined;
 };
 export const getChildrenForRender = (children) => {
-    var _a;
-    const childElements = (_a = getChildren(children)) === null || _a === void 0 ? void 0 : _a.map(convertChild).filter(el => el).reduce((acc, curr) => acc.concat(curr), []);
-    return childElements || [];
+    const childrenArray = Children.toArray(children);
+    const result = [];
+    childrenArray.forEach((child) => {
+        const converted = convertChild(child);
+        if (converted) {
+            if (Array.isArray(converted)) {
+                result.push(...converted);
+            }
+            else {
+                result.push(converted);
+            }
+        }
+    });
+    return result;
 };

package/esm/mobileSheet/mobileSheet.d.ts

@@ -12,11 +12,6 @@ export interface IMobileSheet extends IZenComponentProps, Pick<ISidePanel, "trig
     useTrapFocusWithTrigger?: boolean;
     onCloseClick?: () => void;
     onBackClick?: () => void;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
     onReadyForFocus?: (currentIsOpen: boolean) => void;
     wrapperClassName?: string;
 }

package/esm/mobileSheet/mobileSheet.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Children, useCallback, useEffect, useMemo, useRef } from "react";
+import { Children, isValidElement, useCallback, useEffect, useMemo, useRef } from "react";
 import { SidePanel, SidePanelCloseReason } from "../sidePanel/sidePanel";
 import { Shield } from "../shield/shield";
 import { classNames } from "../commonHelpers/classNames/classNames";
@@ -34,15 +34,15 @@ export const MobileSheet =
         const f = [];
         const t = [];
         Children.forEach(children, (child) => {
-            if (!f.length && child.type === MobileSheet.Footer) {
+            if (!f.length && isValidElement(child) && child.type === MobileSheet.Footer) {
                 f.push(child);
                 return;
             }
-            if (!c.length && child.type === MobileSheet.Content) {
+            if (!c.length && isValidElement(child) && child.type === MobileSheet.Content) {
                 c.push(child);
                 return;
             }
-            if (!t.length && child.type === MobileSheet.Title) {
+            if (!t.length && isValidElement(child) && child.type === MobileSheet.Title) {
                 t.push(child);
                 return;
             }
@@ -79,7 +79,7 @@ export const MobileSheet =
                                     _jsx(TextIconButton, { onClick: (e) => {
                                             e.stopPropagation();
                                             onBackClick === null || onBackClick === void 0 ? void 0 : onBackClick();
-                                        }, "aria-label": backButtonAriaLabel || ((_b = (_a = title[0]) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.children) || translate("Back"), type: ButtonType.TertiaryBlack, className: "zen-mobile-sheet__back-button", iconPosition: ButtonIconPosition.Start, icon: IconBackArrow, contentClasses: "ellipsis", children: title[0] }) : _jsx("span", { className: "zen-mobile-sheet__title-text", children: title[0] }), _jsx(TextIconButton, { onClick: onCloseClick, "aria-label": translate("Close"), iconSize: isDrive ? "huge" : "large", type: ButtonType.TertiaryBlack, iconPosition: ButtonIconPosition.Start, className: "zen-mobile-sheet__close-button", icon: IconClose })] }), _jsx("div", { className: "zen-mobile-sheet__content", children: content[0] }), _jsx("div", { className: classNames(["zen-mobile-sheet__footer", driveFooterClassName || ""]), children: footer[0] })] }) })] });
+                                        }, "aria-label": backButtonAriaLabel || (((_b = (_a = title[0]) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.children) || translate("Back")), type: ButtonType.TertiaryBlack, className: "zen-mobile-sheet__back-button", iconPosition: ButtonIconPosition.Start, icon: IconBackArrow, contentClasses: "ellipsis", children: title[0] }) : _jsx("span", { className: "zen-mobile-sheet__title-text", children: title[0] }), _jsx(TextIconButton, { onClick: onCloseClick, "aria-label": translate("Close"), iconSize: isDrive ? "huge" : "large", type: ButtonType.TertiaryBlack, iconPosition: ButtonIconPosition.Start, className: "zen-mobile-sheet__close-button", icon: IconClose })] }), _jsx("div", { className: "zen-mobile-sheet__content", children: content[0] }), _jsx("div", { className: classNames(["zen-mobile-sheet__footer", driveFooterClassName || ""]), children: footer[0] })] }) })] });
 };
 export const TRANSLATIONS = [
     "Close"

package/esm/modal/modal.js

@@ -41,6 +41,9 @@ export const Modal = ({ isOpen, children, onClose, closeOnClickOutside, maxWidth
         if (isOpen) {
             document.body.classList.add("zen-modal-content--hidden-overflow");
         }
+        return () => {
+            document.body.classList.remove("zen-modal-content--hidden-overflow");
+        };
     }, [isOpen]);
     useEffect(() => {
         const changeTopSpace = () => {

package/esm/nav/nav.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable max-len */
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { NavContext } from "./context/nav.context";
 import { Children, cloneElement, Fragment, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
@@ -56,7 +57,7 @@ export const Nav = ({ children, className, collapsed = false, onCollapseToggle,
     const [isSearchOpen, setIsSearchOpen] = useState(false);
     const [searchTerm, setSearchTerm] = useState("");
     const isMobile = useMobile();
-    const prevIsMobileRef = useRef();
+    const prevIsMobileRef = useRef(false);
     // Focus the first active element inside the Nav when mobile menu opens
     useLayoutEffect(() => {
         var _a;

package/esm/nav/navHeader/navHeader.js

@@ -25,9 +25,12 @@ const NavHeaderComponent = ({ className, logo, logoLink, imgTitle, collapsedLogo
             const element = child;
             return element.type && element.type.displayName === "NavItem";
         })
-            .map(child => cloneElement(child, {
+            .map(child => cloneElement(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        child, {
             className: classNames([
                 "zen-nav-item--level-2",
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 child.props.className || ""
             ]),
             collapsed: false

package/esm/nav/utils/navUtils.d.ts

@@ -7,4 +7,4 @@ export declare function isImageUrl(str?: string | ReactNode): boolean;
 export declare const filterPrimaryNavItems: <T extends {
     children?: ReactNode;
 }>(element: ReactElement<T>, isNegative: boolean) => ReactElement<T> | null;
-export declare const collectNavItems: (element: ReactElement) => ReactElement<ILinkNavItem | IButtonNavItem>[];
+export declare const collectNavItems: (element: ReactElement) => (ReactElement<ILinkNavItem> | ReactElement<IButtonNavItem>)[];

package/esm/nav/utils/navUtils.js

@@ -1,4 +1,4 @@
-import { Children } from "react";
+import { Children, isValidElement } from "react";
 export const navHeaderImage = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIzIiBoZWlnaHQ9IjE1IiB2aWV3Qm94PSIwIDAgMTIzIDE1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNDcuNDE3OCA1LjY2MDFIMzkuNTkxNVY2Ljc0NTI2SDQ1LjM1MjdDNDUuNDE5MiA3LjA2NjkzIDQ1LjQ1MjggNy4yNzc1IDQ1LjQ1MjggNy4zNzA5QzQ1LjQ1MjggOC41OTE3NyA0NS4xOTczIDkuMzU1MjUgNDQuNjk0IDkuNjM5OTdDNDQuMTg1NCA5LjkyODEzIDQyLjgyODkgMTAuMDczOSA0MC42NjIzIDEwLjA3MzlDMzcuODI1NyAxMC4wNzM5IDM2LjA1NzggOS45MTk3IDM1LjQwNzkgOS42MTUxNEMzNC43NjUzIDkuMzE0NDkgMzQuNDM5NyA4LjQ4ODM4IDM0LjQzOTcgNy4xNTkwM0wzNC40MjY2IDUuNjMwOThMMzQuNDUzIDQuMjExNTVDMzQuNDUzIDIuOTAyNCAzNC43NDYyIDIuMDc0MzkgMzUuMzI0MiAxLjc1MDMzQzM1LjkwNzcgMS40MjMxOSAzNy4zOTE1IDEuMjU3MzEgMzkuNzM0MiAxLjI1NzMxQzQyLjI3MjQgMS4yNTczMSA0My44NjMxIDEuMzYwOTMgNDQuNDYyIDEuNTY0ODRDNDUuMDQ5IDEuNzY1MTkgNDUuMzQ2NyAyLjI5OTU3IDQ1LjM0NjcgMy4xNTMwMVYzLjQ1MjQ2SDQ3LjQyMTlWMy4wMTE4NEM0Ny40MjE5IDEuODE2NCA0Ni45NjM3IDEuMDM0NjIgNDYuMDYwMyAwLjY4ODIyN0M0NS4xNjY1IDAuMzQ1NzU4IDQzLjE1ODUgMC4xNzIwMjggNDAuMDkyIDAuMTcyMDI4QzM3LjAzMjQgMC4xNzIwMjggMzQuOTY3NSAwLjQzNzI1NyAzMy45NTQxIDAuOTYwMjMxQzMyLjkzNDUgMS40ODcwMSAzMi40MTc2IDIuNTU5NTcgMzIuNDE3NiA0LjE0ODFMMzIuNDA0MyA1LjA5NzMyTDMyLjQxNzYgNi42NzMxM0MzMi40MTc2IDguNTYyODkgMzIuODgyNiA5Ljc5NzMgMzMuNzk5NyAxMC4zNDI0QzM0LjcxMjEgMTAuODg0MSAzNi43ODg3IDExLjE1OSAzOS45NzI3IDExLjE1OUM0My4zNDA5IDExLjE1OSA0NS40NTU0IDEwLjkyNjggNDYuMjU3NyAxMC40NjgyQzQ3LjA2NTMgMTAuMDA2NiA0Ny40NzQ4IDguNzkyODMgNDcuNDc0OCA2Ljg2MTM2QzQ3LjQ3NDggNi4zNjIzOSA0Ny40NTY5IDUuOTY4MTEgNDcuNDIxNCA1LjY4OTMzTDQ3LjQxNzggNS42NjAxWiIgZmlsbD0iIzI1NDc3QiIvPgo8cGF0aCBkPSJNNDkuNDEyMSAxMS4wNDk4SDYxLjExNDVWOS45NjQ2M0g1MS41MjcxVjYuMDMyMjlINjAuNzE2NlY0Ljk0NzI1SDUxLjUyNzFWMS4zNjc2SDYxLjExNDVWMC4yODI0NEg0OS40MTIxVjExLjA0OThaIiBmaWxsPSIjMjU0NzdCIi8+CjxwYXRoIGQ9Ik03Ni44NTk5IDEuMDY0OEM3NS45OTk4IDAuNDcyNTUgNzMuODMzIDAuMTcyMDI4IDcwLjQxOTcgMC4xNzIwMjhDNjcuNDY2NSAwLjE3MjAyOCA2NS40MTkyIDAuNDM1NzEzIDY0LjMzNjQgMC45NTU5NTNDNjMuMjQ1NSAxLjQ4IDYyLjY5MjUgMi40Njk3MyA2Mi42OTI1IDMuODk2ODlMNjIuNjY2IDQuOTA5MDlWNS42NjE2NEM2Mi42NjYgOC4xMjI2MiA2My4wOTIzIDkuNjcxOTQgNjMuOTMyNyAxMC4yNjYxQzY0Ljc3MTEgMTAuODU4NSA2Ni45NTM3IDExLjE1OSA3MC40MTk3IDExLjE1OUM3My45MDQgMTEuMTU5IDc2LjA4ODggMTAuODU2MSA3Ni45MTM5IDEwLjI1OEM3Ny43NDExIDkuNjU4NTEgNzguMTYwNiA4LjA2NDUyIDc4LjE2MDYgNS41MjA1OUM3OC4xNjA2IDMuMTU4NDggNzcuNzIzMSAxLjY1OTQzIDc2Ljg1OTkgMS4wNjQ4Wk02NS40MDQ1IDEuODEzNzlDNjUuODgxOCAxLjQ0NDU4IDY3LjU2NDUgMS4yNTcxOSA3MC40MDY3IDEuMjU3MTlDNzIuODgxNiAxLjI1NzE5IDc0LjQ3MzEgMS40MTY5IDc1LjEzNjkgMS43MzE4Qzc1Ljc5MzEgMi4wNDMxMyA3Ni4xMjUyIDIuNzkwMjIgNzYuMTI1MiAzLjk1Mjk4TDc2LjEzODYgNC45NjM4N1Y1LjY2MTc2Qzc2LjEzODYgNy44NTIyOCA3NS44OTc1IDkuMTQ5NTYgNzUuNDIyMSA5LjUxNzQ2Qzc0Ljk0NDggOS44ODY5IDczLjI1NzQgMTAuMDczOSA3MC40MDY3IDEwLjA3MzlDNjcuNTY0NSAxMC4wNzM5IDY1Ljg4MTYgOS44ODcwMiA2NS40MDQ1IDkuNTE3NDZDNjQuOTI5MiA5LjE0OTQ0IDY0LjY4ODEgNy44NTIxNiA2NC42ODgxIDUuNjYxNzZDNjQuNjg4MSAzLjQ3NjM1IDY0LjkyOTIgMi4xODE2OSA2NS40MDQ1IDEuODEzNzlaIiBmaWxsPSIjMjU0NzdCIi8+CjxwYXRoIGQ9Ik05Mi44NDYzIDAuMjgyNDRINzguOTgyNFYxLjQ2OTQ0SDg0Ljg4MzVWMTEuMDQ5OEg4Ni45OTg2VjEuNDY5NDRIOTIuODQ2M1YwLjI4MjQ0WiIgZmlsbD0iIzI1NDc3QiIvPgo8cGF0aCBkPSJNMTAwLjMxOCAwLjI4MjQ0SDk3LjQxMTVMOTAuNzQwMiAxMS4wNDk4SDkyLjk4NTRMOTQuMzc3NCA4Ljc4NDE3SDEwMy40OThMMTA0LjkwMyAxMS4wNDk4SDEwNy4xMjJMMTAwLjMyOSAwLjI5OTA3NkwxMDAuMzE4IDAuMjgyNDRaTTEwMi44NjEgNy44MDg4MUg5NS4wMDFMOTguOTA0OCAxLjM3MTE3TDEwMi44NjEgNy44MDg4MVoiIGZpbGw9IiMyNTQ3N0IiLz4KPHBhdGggZD0iTTEyMC4yMDcgNS40MDM2OEMxMjEuNjkxIDUuMDczOTMgMTIyLjQ0MiA0LjMxNDYgMTIyLjQ0MiAzLjE0NTU0QzEyMi40NDIgMS45NzI5MiAxMjIuMDkxIDEuMTkyOTIgMTIxLjM5NyAwLjgyNzc1NEMxMjAuNzA5IDAuNDY1Nzk2IDExOS4yMzcgMC4yODI0NCAxMTcuMDIyIDAuMjgyNDRIMTA4Ljk3N1YxMS4wNDk4SDExNy44ODRDMTE5Ljc1NyAxMS4wNDk4IDEyMS4wOTEgMTAuODE1OCAxMjEuODUgMTAuMzU0MkMxMjIuNjEzIDkuODkwMDEgMTIzIDkuMDc2MzggMTIzIDcuOTM1ODRDMTIzIDYuNTQ2MzYgMTIyLjA2IDUuNjk0ODIgMTIwLjIwNyA1LjQwMzY4Wk0xMTkuNzA0IDQuNjI5NUMxMTkuMjIgNC44NjYzMyAxMTguMTE4IDQuOTg2MjMgMTE2LjQyNiA0Ljk4NjIzSDExMS4wOTJWMS4zNjc0OEgxMTYuOTgzQzExOC40MjggMS4zNjc0OCAxMTkuMzc1IDEuNDczIDExOS43OTYgMS42ODA5NkMxMjAuMjExIDEuODg1NTggMTIwLjQyIDIuMzQ2NTMgMTIwLjQyIDMuMDUxNTVDMTIwLjQyIDMuODY1NjYgMTIwLjE4IDQuMzk2NTkgMTE5LjcwNCA0LjYyOTVaTTExMS4wOTIgNi4wNzEyN0gxMTYuMzJDMTE4LjQ2MSA2LjA3MTI3IDExOS43ODkgNi4xNzk3NiAxMjAuMjY5IDYuMzkzM0MxMjAuNzM5IDYuNjAzMzkgMTIwLjk3OCA3LjE4NTU1IDEyMC45NzggOC4xMjM3MUMxMjAuOTc4IDguODc1NDMgMTIwLjc0MSA5LjM3MzgxIDEyMC4yNzQgOS42MDM5OUMxMTkuOCA5LjgzODIgMTE4Ljc3NyA5Ljk1NzAzIDExNy4yMzUgOS45NTcwM0wxMTUuMzkxIDkuOTY0NTJIMTExLjA5MlY2LjA3MTI3WiIgZmlsbD0iIzI1NDc3QiIvPgo8cGF0aCBkPSJNMCAwLjI3NzM1MUgyLjk4NzI1VjEuNTE1OEMzLjQ5ODA3IDEuMDA3MjEgNC4wNjYzOCAwLjYyNzU0NCA0LjY4OTk1IDAuMzc2NDU1QzUuMzE0NyAwLjEyNTYwNCA1Ljk5NDg0IDAgNi43MzI3MiAwQzcuNDc2OTEgMCA4LjE0ODc4IDAuMTY1MjkzIDguNzQ3MTQgMC40OTUyODZDOS4zNDYxNyAwLjgyNTUxNiA5LjgyNzg2IDEuMzA3ODUgMTAuMTkzMyAxLjk0MTgxQzEwLjY2NzcgMS4zMDc4NSAxMS4yNDk2IDAuODI1NTE2IDExLjkzOTggMC40OTUyODZDMTIuNjMgMC4xNjUyOTMgMTMuMzgzNSAwIDE0LjIwMTQgMEMxNS4wNDc1IDAgMTUuNzkyNiAwLjE3ODI0NiAxNi40MzQ2IDAuNTM0OTc1QzE3LjA3NzYgMC44OTE3MDQgMTcuNTM5IDEuMzU3MjggMTcuODIwNyAxLjkzMjA3QzE4LjEwMTggMi41MDY2MSAxOC4yNDIgMy40NDEyMSAxOC4yNDIgNC43MzU3NVYxMS4wNTY1SDE1LjIzMjZWNS41ODc4OUMxNS4yMzI2IDQuMzY1OTUgMTUuMDY0OSAzLjUzODU0IDE0LjcyOTIgMy4xMDYxMUMxNC4zOTM4IDIuNjczMzMgMTMuODkwMyAyLjQ1NzE4IDEzLjIxOTEgMi40NTcxOEMxMi43MDg1IDIuNDU3MTggMTIuMjUwOSAyLjU4OTIgMTEuODQ1NyAyLjg1MzI0QzExLjQ0MSAzLjExNzUyIDExLjE0IDMuNDgyMzMgMTAuOTQzIDMuOTQ4MDNDMTAuNzQ2MSA0LjQxMzcyIDEwLjY0NzYgNS4xNjE2NCAxMC42NDc2IDYuMTkxOVYxMS4wNTY0SDcuNjM4MjJWNS44MzU1M0M3LjYzODIyIDQuODcxMjIgNy41NTk5OSA0LjE3MjczIDcuNDAyMSAzLjc0MDE5QzcuMjQ1MTIgMy4zMDc0MSA3LjAwOSAyLjk4NTUgNi42OTUzMiAyLjc3NDFDNi4zODA3MSAyLjU2MjU4IDYuMDAwNzQgMi40NTcxOCA1LjU1NDM2IDIuNDU3MThDNS4wNTY2NiAyLjQ1NzE4IDQuNjA1MDMgMi41OTA4NiA0LjE5OTQ3IDIuODU4MzVDMy43OTMzOCAzLjEyNTk2IDMuNDg5OTMgMy41MDA1MSAzLjI4OTI1IDMuOTgyODRDMy4wODc2NSA0LjQ2NDk0IDIuOTg3MjUgNS4yMjQ1IDIuOTg3MjUgNi4yNjE2NlYxMS4wNTY1SDBWMC4yNzczNTFaIiBmaWxsPSIjMDA3OEQzIi8+CjxwYXRoIGQ9Ik0xOC44MTg0IDAuMjc3MzY3SDIxLjg3MTJMMjQuOTYzOSA3LjA0MDg1TDI4LjM3NjkgMC4yNzczNjdIMzEuNDM4M0wyMy45ODE2IDE1SDIwLjg5NjZMMjMuMzQ0IDEwLjI1MjdMMTguODE4NCAwLjI3NzM2N1oiIGZpbGw9IiMwMDc4RDMiLz4KPC9zdmc+Cg==";
 export const navHeaderImageCollapsed = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOCIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDM4IDEzIiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTE1LjE5OTcgMC4yMjU0NTdIMTcuNjAyOEwyMC4wMzczIDYuMDk0TDIyLjcyNCAwLjIyNTQ1N0gyNS4xMzM5TDE5LjI2NDEgMTNIMTYuODM1NkwxOC43NjIyIDguODgwODhMMTUuMTk5NyAwLjIyNTQ1N1oiIGZpbGw9IiMwMDc4RDMiLz4KPHBhdGggZD0iTTAuMzg2NzE5IDAuMjQwNjUySDIuNzM4MjVWMS4zMTUyM0MzLjE0MDM2IDAuODczOTM1IDMuNTg3NzMgMC41NDQ1MDggNC4wNzg2IDAuMzI2NjQzQzQuNTcwMzkgMC4xMDg5ODQgNS4xMDU3OSAwIDUuNjg2NjUgMEM2LjI3MjQ2IDAgNi44MDEzNSAwLjE0MzQyMiA3LjI3MjM4IDAuNDI5NzVDNy43NDM5MiAwLjcxNjI4NCA4LjEyMzEgMS4xMzQ4IDguNDEwNzQgMS42ODQ4N0M4Ljc4NDI0IDEuMTM0OCA5LjI0MjI1IDAuNzE2Mjg0IDkuNzg1NiAwLjQyOTc1QzEwLjMyODkgMC4xNDM0MjIgMTAuOTIyMSAwIDExLjU2NTkgMEMxMi4yMzIgMCAxMi44MTg1IDAuMTU0NjYgMTMuMzIzOCAwLjQ2NDE4OEMxMy44MyAwLjc3MzcxNSAxNC4xOTMzIDEuMTc3NjkgMTQuNDE1IDEuNjc2NDJDMTQuNjM2MyAyLjE3NDk0IDE0Ljc0NjYgMi45ODU4NyAxNC43NDY2IDQuMTA5MTJWOS41OTM0OEgxMi4zNzc3VjQuODQ4NUMxMi4zNzc3IDMuNzg4MjUgMTIuMjQ1NiAzLjA3MDMyIDExLjk4MTQgMi42OTUxMUMxMS43MTczIDIuMzE5NiAxMS4zMjEgMi4xMzIwNSAxMC43OTI2IDIuMTMyMDVDMTAuMzkwNyAyLjEzMjA1IDEwLjAzMDUgMi4yNDY2IDkuNzExNTIgMi40NzU3QzkuMzkyOTkgMi43MDUwMSA5LjE1NTk4IDMuMDIxNTUgOS4wMDA4OSAzLjQyNTYzQzguODQ1OTIgMy44Mjk3IDguNzY4NDMgNC40Nzg2NiA4Ljc2ODQzIDUuMzcyNTlWOS41OTMzOEg2LjM5OTQ0VjUuMDYzMzhDNi4zOTk0NCA0LjIyNjY2IDYuMzM3ODYgMy42MjA2IDYuMjEzNTcgMy4yNDUyOUM2LjA5IDIuODY5NzggNS45MDQxMyAyLjU5MDQ2IDUuNjU3MiAyLjQwNzAzQzUuNDA5NTQgMi4yMjM1IDUuMTEwNDQgMi4xMzIwNSA0Ljc1OTA1IDIuMTMyMDVDNC4zNjcyNyAyLjEzMjA1IDQuMDExNzUgMi4yNDgwNCAzLjY5MjUgMi40ODAxNEMzLjM3MjgzIDIuNzEyMzMgMy4xMzM5NiAzLjAzNzMzIDIuOTc1OTggMy40NTU4NEMyLjgxNzI5IDMuODc0MTQgMi43MzgyNSA0LjUzMzIgMi43MzgyNSA1LjQzMzEyVjkuNTkzNDhIMC4zODY3MTlWMC4yNDA2NTJaIiBmaWxsPSIjMDA3OEQzIi8+CjxwYXRoIGQ9Ik0zNy41Njg1IDQuODc0NjhIMzEuNDA3N1Y1LjgxNjI2SDM1Ljk0MjlDMzUuOTk1MiA2LjA5NTM3IDM2LjAyMTYgNi4yNzgwNyAzNi4wMjE2IDYuMzU5MTJDMzYuMDIxNiA3LjQxODQ0IDM1LjgyMDYgOC4wODA5IDM1LjQyNDMgOC4zMjc5NEMzNS4wMjQgOC41Nzc5OCAzMy45NTYyIDguNzA0NDkgMzIuMjUwNiA4LjcwNDQ5QzMwLjAxNzcgOC43MDQ0OSAyOC42MjYgOC41NzA2NiAyOC4xMTQ0IDguMzA2MzlDMjcuNjA4NiA4LjA0NTUzIDI3LjM1MjMgNy4zMjg3MyAyNy4zNTIzIDYuMTc1MjhMMjcuMzQxOSA0Ljg0OTQyTDI3LjM2MjcgMy42MTc4MUMyNy4zNjI3IDIuNDgxODggMjcuNTkzNSAxLjc2MzQzIDI4LjA0ODUgMS40ODIyNkMyOC41MDc5IDEuMTk4NDEgMjkuNjc1OSAxLjA1NDQ3IDMxLjUyIDEuMDU0NDdDMzMuNTE4MSAxLjA1NDQ3IDM0Ljc3MDIgMS4xNDQzOCAzNS4yNDE3IDEuMzIxMzFDMzUuNzAzOCAxLjQ5NTE1IDM1LjkzODEgMS45NTg4MiAzNS45MzgxIDIuNjk5MzNWMi45NTkxNkgzNy41NzE3VjIuNTc2ODRDMzcuNTcxNyAxLjUzOTU5IDM3LjIxMSAwLjg2MTI0NiAzNi40OTk5IDAuNTYwNjlDMzUuNzk2MyAwLjI2MzUzNSAzNC4yMTU2IDAuMTEyNzkzIDMxLjgwMTcgMC4xMTI3OTNDMjkuMzkzMiAwLjExMjc5MyAyNy43Njc3IDAuMzQyOTI4IDI2Ljk3IDAuNzk2NzAxQzI2LjE2NzQgMS4yNTM3NyAyNS43NjA0IDIuMTg0NDIgMjUuNzYwNCAzLjU2Mjc1TDI1Ljc1IDQuMzg2MzdMMjUuNzYwNCA1Ljc1MzY3QzI1Ljc2MDQgNy4zOTMzOCAyNi4xMjY1IDguNDY0NDYgMjYuODQ4NSA4LjkzNzQxQzI3LjU2NjYgOS40MDc0NyAyOS4yMDE0IDkuNjQ1OTYgMzEuNzA3OCA5LjY0NTk2QzM0LjM1OTIgOS42NDU5NiAzNi4wMjM3IDkuNDQ0NDkgMzYuNjU1MyA5LjA0NjZDMzcuMjkxIDguNjQ2MDMgMzcuNjEzMyA3LjU5Mjg5IDM3LjYxMzMgNS45MTY5OUMzNy42MTMzIDUuNDg0MDUgMzcuNTk5MyA1LjE0MTk0IDM3LjU3MTMgNC45MDAwNUwzNy41Njg1IDQuODc0NjhaIiBmaWxsPSIjMjU0NzdCIi8+Cjwvc3ZnPg==";
 // Detect if scrollbar is overlay by checking if it takes up space
@@ -30,13 +30,13 @@ export function isImageUrl(str) {
     }
     return false;
 }
+const isNavItem = (element) => element.type && element.type.displayName === "NavItem";
 export const filterPrimaryNavItems = (element, isNegative) => {
-    const isNavItem = element.type && element.type.displayName === "NavItem";
     const children = element.props.children;
-    if (!isNavItem && !children) {
+    if (!isNavItem(element) && !children) {
         return element;
     }
-    if (!isNavItem && children) {
+    if (!isNavItem(element) && children) {
         const filteredChildren = Children.map(children, child => filterPrimaryNavItems(child, isNegative));
         if (!filteredChildren) {
             return null;
@@ -44,7 +44,7 @@ export const filterPrimaryNavItems = (element, isNegative) => {
         const validChildren = filteredChildren.filter(Boolean);
         return validChildren.length > 0 ? Object.assign(Object.assign({}, element), { props: Object.assign(Object.assign({}, element.props), { children: validChildren }) }) : null;
     }
-    if (isNavItem) {
+    if (isNavItem(element)) {
         const itemProps = element.props;
         const isPrimary = itemProps.isPrimary;
         const shouldInclude = isNegative ? isPrimary !== true : isPrimary === true;
@@ -64,10 +64,9 @@ export const filterPrimaryNavItems = (element, isNegative) => {
     return element;
 };
 export const collectNavItems = (element) => {
-    const isNavItem = element.type && element.type.displayName === "NavItem";
-    const childrenArray = Children.toArray(element.props.children);
+    const childrenArray = isValidElement(element) ? Children.toArray(element.props.children) : [];
     const children = childrenArray.filter((child) => Boolean(child && typeof child === "object" && "type" in child));
-    if (isNavItem) {
+    if (isNavItem(element)) {
         return [element];
     }
     return children.length > 0

package/esm/notification/notification.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { RefObject } from "react";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import "./notification.less";
 export type NotificationType = "error" | "info" | "success" | "warning";
@@ -10,6 +10,7 @@ export interface INotificationProps extends IZenComponentProps {
     type?: NotificationType;
     id?: string;
     isCollapsible?: boolean;
+    ref?: RefObject<HTMLDivElement | null>;
     footerButtons?: {
         teritary?: {
             title?: string;
@@ -25,5 +26,5 @@ export interface INotificationProps extends IZenComponentProps {
         };
     };
 }
-export declare const Notification: import("react").ForwardRefExoticComponent<INotificationProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Notification: ({ id, isCollapsible, type, title, text, footerButtons, className, onClose, isOpen, ref }: INotificationProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];

package/esm/notification/notification.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement, forwardRef, useCallback } from "react";
+import { createElement, useCallback } from "react";
 import PushNotification from "./pushNotification/pushNotification";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { IconCrossThin } from "../icons/deprecated/iconCrossThin";
@@ -10,9 +10,7 @@ import { IconHexonalWarning } from "../icons/iconHexonalWarning";
 import { IconCheckRadio } from "../icons/iconCheckRadio";
 import { IconDiamondWarning } from "../icons/iconDiamondWarning";
 import { useLanguage } from "../utils/localization/useLanguage";
-export const Notification = 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-forwardRef(function InnerNotification({ id, isCollapsible = true, type, title, text, footerButtons, className, onClose, isOpen = true }, ref) {
+export const Notification = ({ id, isCollapsible = true, type, title, text, footerButtons, className, onClose, isOpen = true, ref }) => {
     const getIcon = useCallback((t) => {
         switch (t) {
             case "error": return IconHexonalWarning;
@@ -27,7 +25,7 @@ forwardRef(function InnerNotification({ id, isCollapsible = true, type, title, t
                                         size: "huge",
                                         className: `zen-push__icon--${type || "info"}`
                                     }) }), _jsx("div", { className: `zen-push__title zen-push__title--${type || "info"}`, children: title })] }), _jsxs("div", { className: "zen-push__body", children: [_jsx("div", { className: "zen-push__text", children: text }), _jsx("div", { className: "zen-push__body-buttons", children: footerButtons && _jsxs("div", { className: "zen-push__body-buttons", children: [footerButtons.teritary && _jsx(Button, { title: footerButtons.teritary.title, type: ButtonType.Tertiary, className: `zen-push__button zen-push__tertiary-button zen-push__tertiary-button--${type || "info"}`, onClick: footerButtons.teritary.onClick, link: footerButtons.teritary.link, children: footerButtons.teritary.text }), footerButtons.primary && _jsx(Button, { onClick: footerButtons.primary.onClick, link: footerButtons.primary.link, className: "zen-push__button zen-push__primary-button zen-push__primary-button--" + (type || "info"), title: footerButtons.primary.title, type: ButtonType.Primary, children: footerButtons.primary.text })] }) })] })] }), isCollapsible && _jsx("div", { className: "zen-push__actions", children: _jsx("button", { type: "button", className: classNames(["zen-push__close-button", `zen-push__close-button--${type || "info"}`]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: _jsx(IconCrossThin, {}) }) })] }) });
-});
+};
 export const TRANSLATIONS = [
     "Close"
 ];

package/esm/oldPill/pill.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
 import "./pill.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { RefObject } from "react";
 export declare enum PillSize {
     Normal = "normal",
     Small = "small"
@@ -16,8 +16,9 @@ export interface IPill extends IZenComponentProps {
     type?: PillType;
     long?: boolean;
     size?: PillSize;
+    ref?: RefObject<HTMLDivElement | null>;
 }
 /**
  * @deprecated - will be removed in the next releases.
  */
-export declare const Pill: React.ForwardRefExoticComponent<IPill & React.RefAttributes<HTMLDivElement>>;
+export declare const Pill: ({ children, className, type, long, size, ref, ...restProps }: IPill) => import("react/jsx-runtime").JSX.Element;

package/esm/oldPill/pill.js

@@ -10,7 +10,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 export var PillSize;
 (function (PillSize) {
@@ -42,11 +41,11 @@ const getPillTypeClassName = (type) => pillClassesByType[type] || "";
  *  2. Rename .zen-pill-new-content to zen-pill-content
  *  3. Remove commonStyles/pillStyles/pillStyles.less
 */
-export const Pill = React.forwardRef(function pill(_a, ref) {
-    var { children, className = "", type, long, size = PillSize.Normal } = _a, restProps = __rest(_a, ["children", "className", "type", "long", "size"]);
+export const Pill = (_a) => {
+    var { children, className = "", type, long, size = PillSize.Normal, ref } = _a, restProps = __rest(_a, ["children", "className", "type", "long", "size", "ref"]);
     const pillTypeClass = getPillTypeClassName(type || "");
     const pillLongClass = long ? "zen-pill--long" : "";
     const pillSizeClass = size === PillSize.Small ? "zen-pill--small" : "";
     const pillClasses = classNames(["zen-pill", pillTypeClass, pillLongClass, pillSizeClass, className]);
     return _jsx("div", Object.assign({}, restProps, { className: pillClasses, ref: ref, children: children }));
-});
+};

package/esm/pageHeader/pageHeaderActions.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { Children, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { getArrayOfChildren, isNamedChildComponent } from "../header/headerHelpers";
+import { isNamedChildComponent } from "../header/headerHelpers";
 import React from "react";
 import { PageToolbarCollapsedItemsControl } from "../header/components/collapsedItemsControl/collapsedItemsControl";
 import { PageHeaderButtonDisplayName } from "./pageHeaderButton";
@@ -10,7 +10,7 @@ import { getItemsFromFragments } from "./pageHeaderHelpers";
 export const PageHeaderActions = ({ className = "", children }) => {
     const childrenArray = useMemo(() => getItemsFromFragments(
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    getArrayOfChildren(children).filter((child) => child !== null && child !== undefined && React.isValidElement(child))), [children]);
+    Children.toArray(children).filter((child) => child !== null && child !== undefined && React.isValidElement(child))), [children]);
     const nonFittingElements = useMemo(() => childrenArray.slice(2, childrenArray.length), [childrenArray]);
     const fittingElements = useMemo(() => childrenArray.slice(0, 2).map(el => {
         if (isNamedChildComponent(el, PageHeaderButtonDisplayName)) {

package/esm/pageHeader/pageHeaderHelpers.d.ts

@@ -1,4 +1,4 @@
 import { ReactElement } from "react";
 import React from "react";
-export declare const getItemsFromFragments: <T extends ReactElement<any, string | React.JSXElementConstructor<any>>>(items: T[]) => T[];
-export declare const regulatePageHeaderChildren: (children: ReactElement | ReactElement[] | (ReactElement | null | undefined)[] | null | undefined) => ReactElement<any, string | React.JSXElementConstructor<any>>[][];
+export declare const getItemsFromFragments: <T extends ReactElement<unknown, string | React.JSXElementConstructor<any>>>(items: T[]) => T[];
+export declare const regulatePageHeaderChildren: (children: ReactElement | ReactElement[] | (ReactElement | null | undefined)[] | null | undefined) => ReactElement<unknown, string | React.JSXElementConstructor<any>>[][];

package/esm/pageHeader/pageHeaderHelpers.js

@@ -10,8 +10,9 @@ export const getItemsFromFragments = (items) => {
     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 && fragmentProps.children) {
+                const fragmentArr = getArrayOfChildren(fragmentProps.children);
                 itemsArr.push(...fragmentArr.filter((el) => React.isValidElement(el)));
             }
         }

package/esm/pageLayout/pageContentLayout/pageContentLayout.d.ts

@@ -1,7 +1,11 @@
-import * as React from "react";
+import { RefObject } from "react";
 import { IZenComponentProps } from "../../commonHelpers/zenComponent";
 export interface IPageContentLayout extends IZenComponentProps {
     id?: string;
     oldStyle?: boolean;
+    ref?: RefObject<HTMLDivElement | null>;
 }
-export declare const PageContentLayout: React.ForwardRefExoticComponent<IPageContentLayout & React.RefAttributes<HTMLDivElement>>;
+export declare const PageContentLayout: {
+    ({ id, className, children, oldStyle, ref }: IPageContentLayout): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/esm/pageLayout/pageContentLayout/pageContentLayout.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const PageContentLayout = React.forwardRef(function PageContentLayout({ id, className, children, oldStyle }, ref) {
+export const PageContentLayout = ({ id, className, children, oldStyle, ref }) => {
     const cssClassName = classNames([
         "zen-page-layout__content",
         oldStyle ? "zen-page-layout__content--old" : "",
         className || ""
     ]);
     return _jsx("div", { id: id, className: cssClassName, ref: ref, children: children });
-});
+};
 PageContentLayout.displayName = "PageContentLayout";

package/esm/pagination/pagination.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { RefObject } from "react";
 import "./pagination.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { PaginationType } from "./paginationType";
@@ -7,15 +7,10 @@ export interface IPagination extends IZenComponentProps {
     total: number;
     perPage: number;
     onChange: (newActivePage: number) => void;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
     className?: string;
     includeText?: boolean;
     type?: PaginationType;
-    gridRef?: React.RefObject<HTMLElement>;
+    gridRef?: RefObject<HTMLElement | null>;
     disabled?: boolean;
 }
 export declare const Pagination: React.FC<IPagination>;

package/esm/pagination/paginationText/paginationText.d.ts

@@ -3,11 +3,6 @@ interface IPaginationText {
     amount: number;
     from: number;
     to: number;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
 }
 export declare const PaginationText: React.FC<IPaginationText>;
 export declare const TRANSLATIONS: string[];

package/esm/parallelSelection/parallelSelection.d.ts

@@ -1,5 +1,5 @@
 import "./parallelSelection.less";
-import React, { ReactNode } from "react";
+import React, { ReactNode, RefObject } from "react";
 import { TAlignment } from "../absolute/absolute";
 interface IParallelSelectionItem {
     id: string;
@@ -8,7 +8,7 @@ interface IParallelSelectionItem {
 export interface IParallelSelection {
     selected: string;
     items: IParallelSelectionItem[];
-    triggerRef?: React.RefObject<HTMLElement>;
+    triggerRef?: RefObject<HTMLElement | null>;
     onSelect: (selected: string) => void;
     title: string;
     isMobileView?: boolean;
@@ -18,6 +18,7 @@ export declare const ParallelSelection: React.FC<IParallelSelection>;
 export interface IParallelSelectionTrigger {
     title: string;
     className?: string;
+    ref?: RefObject<HTMLButtonElement | null>;
 }
-export declare const ParallelSelectionTrigger: React.ForwardRefExoticComponent<IParallelSelectionTrigger & React.RefAttributes<HTMLButtonElement>>;
+export declare const ParallelSelectionTrigger: ({ className, title, ref, ...otherProps }: IParallelSelectionTrigger) => import("react/jsx-runtime").JSX.Element;
 export {};