@geotab/zenith 2.0.0 → 3.0.0-beta.0

package/dist/menu/controlledMenu.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TRANSLATIONS = exports.ControlledMenu = void 0;
 const jsx_runtime_1 = require("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 */
 const react_1 = require("react");
 const menuItem_1 = require("./components/menuItem");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
@@ -63,7 +63,8 @@ const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ar
         if (isMobile && path.length > 0) {
             const el = (0, findContent_1.findContent)(children, exports.ControlledMenu.Item, path[path.length - 1]);
             if (el || (0, react_1.isValidElement)(el)) {
-                currentChildren = el.props.children;
+                const elProps = el.props;
+                currentChildren = elProps.children;
                 par = el;
             }
         }
@@ -76,14 +77,14 @@ const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ar
                 cont.push((0, jsx_runtime_1.jsx)("li", { role: "presentation", className: (0, classNames_1.classNames)(["zen-menu-item__content"]), children: child }, (0, utils_1.generateId)()));
                 return;
             }
-            if (child.type === menuSeparator_1.MenuSeparator) {
+            if ((0, react_1.isValidElement)(child) && (0, menuSeparator_1.isSeparator)(child)) {
                 const clone = (0, react_1.cloneElement)(child, {
                     key: child.props.key || (0, utils_1.generateId)()
                 });
                 cont.push(clone);
                 return;
             }
-            if (child.type === exports.ControlledMenu.Item) {
+            if ((0, react_1.isValidElement)(child) && (0, menuItem_1.isMenuItem)(child)) {
                 const clone = (0, react_1.cloneElement)(child, {
                     isMobile,
                     key: child.props.id,
@@ -93,17 +94,17 @@ const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ar
                 cont.push(clone);
                 return;
             }
-            cont.push((0, jsx_runtime_1.jsx)("li", { className: (0, classNames_1.classNames)(["zen-menu-item__content"]), role: "presentation", children: child }, child.props.id || child.props["data-id"] || (0, utils_1.generateId)()));
+            const childProps = child.props;
+            cont.push((0, jsx_runtime_1.jsx)("li", { className: (0, classNames_1.classNames)(["zen-menu-item__content"]), role: "presentation", children: child }, childProps.id || childProps["data-id"] || (0, utils_1.generateId)()));
         });
-        while (cont[0] && cont[0].type === menuSeparator_1.MenuSeparator) {
+        while (cont[0] && (0, menuSeparator_1.isSeparator)(cont[0])) {
             cont.shift();
         }
-        while (cont[cont.length - 1] && cont[cont.length - 1].type === menuSeparator_1.MenuSeparator) {
+        while (cont[cont.length - 1] && (0, menuSeparator_1.isSeparator)(cont[cont.length - 1])) {
             cont.pop();
         }
         cont = cont.filter((el, indx, arr) => {
-            var _a;
-            if (el.type === menuSeparator_1.MenuSeparator && ((_a = arr[indx - 1]) === null || _a === void 0 ? void 0 : _a.type) === menuSeparator_1.MenuSeparator) {
+            if ((0, menuSeparator_1.isSeparator)(el) && arr[indx - 1] && (0, menuSeparator_1.isSeparator)(arr[indx - 1])) {
                 return false;
             }
             return true;
@@ -143,7 +144,7 @@ const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ar
             }
         }
     };
-    const renderMenuList = () => (0, jsx_runtime_1.jsx)("div", { onKeyDown: onKeyDown, className: (0, classNames_1.classNames)(["zen-action-list", className]), children: (0, jsx_runtime_1.jsxs)("ul", { role: "menu", className: (0, classNames_1.classNames)(["zen-menu-item", className, listClassName]), children: [parent ? (0, jsx_runtime_1.jsx)(menuButton_1.MenuButton, { id: "root", name: parent.props.name, icon: iconArrowLeft_1.IconArrowLeft, onClick: closeBranch, hasChildren: false, disabled: false }, "root") : null, content] }) });
+    const renderMenuList = () => (0, jsx_runtime_1.jsx)("div", { onKeyDown: onKeyDown, className: (0, classNames_1.classNames)(["zen-action-list", className]), children: (0, jsx_runtime_1.jsxs)("ul", { role: "menu", className: (0, classNames_1.classNames)(["zen-menu-item", className, listClassName]), children: [parent ? (0, jsx_runtime_1.jsx)(menuButton_1.MenuButton, { id: "root", name: parent.props.name || "", icon: iconArrowLeft_1.IconArrowLeft, onClick: closeBranch, hasChildren: false, disabled: false }, "root") : null, content] }) });
     const hideMenu = (0, react_1.useCallback)(() => {
         closeBranch();
         setIsOpen(false);

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Menu = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument */
 const react_1 = require("react");
 const controlledMenu_1 = require("./controlledMenu");
 const menuItem_1 = require("./components/menuItem");
@@ -11,6 +12,7 @@ const classNames_1 = require("../commonHelpers/classNames/classNames");
 const Menu = 
 // eslint-disable-next-line react/prop-types
 ({ children, title, trigger, triggerRef, ariaLabel, ariaLabelledBy, alignment = "bottom-left", className }) => {
+    var _a;
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const innerRef = (0, react_1.useRef)(null);
     const shouldRenderTrigger = !!trigger;
@@ -31,7 +33,7 @@ const Menu =
         }
     }, [triggerRef, isOpen, shouldRenderTrigger]);
     const triggerComp = shouldRenderTrigger ? renderTrigger() : null;
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [triggerComp, (0, jsx_runtime_1.jsx)(controlledMenu_1.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: (0, classNames_1.classNames)(["zen-menu", className || ""]), children: children })] });
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [triggerComp, (0, jsx_runtime_1.jsx)(controlledMenu_1.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: (0, classNames_1.classNames)(["zen-menu", className || ""]), children: children })] });
 };
 exports.Menu = Menu;
 exports.Menu.Item = menuItem_1.MenuItem;

package/dist/menu/utils/findContent.js

@@ -11,12 +11,13 @@ const findContent = (children, targetComponent, id) => {
         if (found || !react_1.default.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 = (0, exports.findContent)(child.props.children, targetComponent, id);
+        if (childProps.children) {
+            found = (0, exports.findContent)(childProps.children, targetComponent, id);
         }
     });
     return found;

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

@@ -1,10 +1,30 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getChildrenForRender = exports.convertChild = exports.getChildren = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const miniTabsItem_1 = require("./miniTabsItem");
 const getChildren = (elem) => {
     if (!elem) {
@@ -16,22 +36,47 @@ const getChildren = (elem) => {
     return [elem];
 };
 exports.getChildren = getChildren;
+const hasChildren = (child) => {
+    if (!(0, react_1.isValidElement)(child)) {
+        return false;
+    }
+    const childElement = child;
+    return "children" in childElement.props && react_1.Children.count(childElement.props.children) > 0;
+};
 const convertChild = (child) => {
+    if (!(0, react_1.isValidElement)(child)) {
+        return undefined;
+    }
     if (child.type === miniTabsItem_1.MiniTabsItem) {
         return Object.assign({}, child.props);
     }
-    if (child.type === react_1.default.Fragment && child.props.children) {
-        if (Array.isArray(child.props.children)) {
-            return [...child.props.children].filter(el => (el.type === miniTabsItem_1.MiniTabsItem)).map(el => el.props);
+    if (child.type === react_1.default.Fragment && hasChildren(child)) {
+        const fragmentProps = child.props;
+        if (fragmentProps.children && Array.isArray(fragmentProps.children)) {
+            return fragmentProps.children
+                .filter((el) => (0, react_1.isValidElement)(el) && el.type === miniTabsItem_1.MiniTabsItem)
+                .map(el => (Object.assign({}, el.props)));
         }
-        return child.props.children.type === miniTabsItem_1.MiniTabsItem ? Object.assign({}, child.props.children.props) : undefined;
+        const nestedChild = fragmentProps.children;
+        return (0, react_1.isValidElement)(nestedChild) && nestedChild.type === miniTabsItem_1.MiniTabsItem ? Object.assign({}, nestedChild.props) : undefined;
     }
     return undefined;
 };
 exports.convertChild = convertChild;
 const getChildrenForRender = (children) => {
-    var _a;
-    const childElements = (_a = (0, exports.getChildren)(children)) === null || _a === void 0 ? void 0 : _a.map(exports.convertChild).filter(el => el).reduce((acc, curr) => acc.concat(curr), []);
-    return childElements || [];
+    const childrenArray = react_1.Children.toArray(children);
+    const result = [];
+    childrenArray.forEach((child) => {
+        const converted = (0, exports.convertChild)(child);
+        if (converted) {
+            if (Array.isArray(converted)) {
+                result.push(...converted);
+            }
+            else {
+                result.push(converted);
+            }
+        }
+    });
+    return result;
 };
 exports.getChildrenForRender = getChildrenForRender;

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

@@ -37,15 +37,15 @@ const MobileSheet =
         const f = [];
         const t = [];
         react_1.Children.forEach(children, (child) => {
-            if (!f.length && child.type === exports.MobileSheet.Footer) {
+            if (!f.length && (0, react_1.isValidElement)(child) && child.type === exports.MobileSheet.Footer) {
                 f.push(child);
                 return;
             }
-            if (!c.length && child.type === exports.MobileSheet.Content) {
+            if (!c.length && (0, react_1.isValidElement)(child) && child.type === exports.MobileSheet.Content) {
                 c.push(child);
                 return;
             }
-            if (!t.length && child.type === exports.MobileSheet.Title) {
+            if (!t.length && (0, react_1.isValidElement)(child) && child.type === exports.MobileSheet.Title) {
                 t.push(child);
                 return;
             }
@@ -82,7 +82,7 @@ const MobileSheet =
                                     (0, jsx_runtime_1.jsx)(textIconButton_1.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_1.ButtonType.TertiaryBlack, className: "zen-mobile-sheet__back-button", iconPosition: textIconButton_1.ButtonIconPosition.Start, icon: iconBackArrow_1.IconBackArrow, contentClasses: "ellipsis", children: title[0] }) : (0, jsx_runtime_1.jsx)("span", { className: "zen-mobile-sheet__title-text", children: title[0] }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { onClick: onCloseClick, "aria-label": translate("Close"), iconSize: isDrive ? "huge" : "large", type: buttonType_1.ButtonType.TertiaryBlack, iconPosition: textIconButton_1.ButtonIconPosition.Start, className: "zen-mobile-sheet__close-button", icon: iconClose_1.IconClose })] }), (0, jsx_runtime_1.jsx)("div", { className: "zen-mobile-sheet__content", children: content[0] }), (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.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_1.ButtonType.TertiaryBlack, className: "zen-mobile-sheet__back-button", iconPosition: textIconButton_1.ButtonIconPosition.Start, icon: iconBackArrow_1.IconBackArrow, contentClasses: "ellipsis", children: title[0] }) : (0, jsx_runtime_1.jsx)("span", { className: "zen-mobile-sheet__title-text", children: title[0] }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { onClick: onCloseClick, "aria-label": translate("Close"), iconSize: isDrive ? "huge" : "large", type: buttonType_1.ButtonType.TertiaryBlack, iconPosition: textIconButton_1.ButtonIconPosition.Start, className: "zen-mobile-sheet__close-button", icon: iconClose_1.IconClose })] }), (0, jsx_runtime_1.jsx)("div", { className: "zen-mobile-sheet__content", children: content[0] }), (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-mobile-sheet__footer", driveFooterClassName || ""]), children: footer[0] })] }) })] });
 };
 exports.MobileSheet = MobileSheet;
 exports.TRANSLATIONS = [

package/dist/modal/modal.js

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

package/dist/nav/nav.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Nav = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable max-len */
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const nav_context_1 = require("./context/nav.context");
 const react_1 = require("react");
@@ -59,7 +60,7 @@ const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuV
     const [isSearchOpen, setIsSearchOpen] = (0, react_1.useState)(false);
     const [searchTerm, setSearchTerm] = (0, react_1.useState)("");
     const isMobile = (0, useMobile_1.useMobile)();
-    const prevIsMobileRef = (0, react_1.useRef)();
+    const prevIsMobileRef = (0, react_1.useRef)(false);
     // Focus the first active element inside the Nav when mobile menu opens
     (0, react_1.useLayoutEffect)(() => {
         var _a;

package/dist/nav/navHeader/navHeader.js

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

package/dist/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/dist/nav/utils/navUtils.js

@@ -35,13 +35,13 @@ function isImageUrl(str) {
     return false;
 }
 exports.isImageUrl = isImageUrl;
+const isNavItem = (element) => element.type && element.type.displayName === "NavItem";
 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 = react_1.Children.map(children, child => (0, exports.filterPrimaryNavItems)(child, isNegative));
         if (!filteredChildren) {
             return null;
@@ -49,7 +49,7 @@ 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;
@@ -70,10 +70,9 @@ const filterPrimaryNavItems = (element, isNegative) => {
 };
 exports.filterPrimaryNavItems = filterPrimaryNavItems;
 const collectNavItems = (element) => {
-    const isNavItem = element.type && element.type.displayName === "NavItem";
-    const childrenArray = react_1.Children.toArray(element.props.children);
+    const childrenArray = (0, react_1.isValidElement)(element) ? react_1.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/dist/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/dist/notification/notification.js

@@ -16,9 +16,7 @@ const iconHexonalWarning_1 = require("../icons/iconHexonalWarning");
 const iconCheckRadio_1 = require("../icons/iconCheckRadio");
 const iconDiamondWarning_1 = require("../icons/iconDiamondWarning");
 const useLanguage_1 = require("../utils/localization/useLanguage");
-exports.Notification = 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-(0, react_1.forwardRef)(function InnerNotification({ id, isCollapsible = true, type, title, text, footerButtons, className, onClose, isOpen = true }, ref) {
+const Notification = ({ id, isCollapsible = true, type, title, text, footerButtons, className, onClose, isOpen = true, ref }) => {
     const getIcon = (0, react_1.useCallback)((t) => {
         switch (t) {
             case "error": return iconHexonalWarning_1.IconHexonalWarning;
@@ -33,7 +31,8 @@ exports.Notification =
                                         size: "huge",
                                         className: `zen-push__icon--${type || "info"}`
                                     }) }), (0, jsx_runtime_1.jsx)("div", { className: `zen-push__title zen-push__title--${type || "info"}`, children: title })] }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-push__body", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-push__text", children: text }), (0, jsx_runtime_1.jsx)("div", { className: "zen-push__body-buttons", children: footerButtons && (0, jsx_runtime_1.jsxs)("div", { className: "zen-push__body-buttons", children: [footerButtons.teritary && (0, jsx_runtime_1.jsx)(button_1.Button, { title: footerButtons.teritary.title, type: buttonType_1.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 && (0, jsx_runtime_1.jsx)(button_1.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_1.ButtonType.Primary, children: footerButtons.primary.text })] }) })] })] }), isCollapsible && (0, jsx_runtime_1.jsx)("div", { className: "zen-push__actions", children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, classNames_1.classNames)(["zen-push__close-button", `zen-push__close-button--${type || "info"}`]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconCrossThin_1.IconCrossThin, {}) }) })] }) });
-});
+};
+exports.Notification = Notification;
 exports.TRANSLATIONS = [
     "Close"
 ];

package/dist/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/dist/oldPill/pill.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,7 +13,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Pill = exports.PillType = exports.PillSize = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const React = __importStar(require("react"));
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 var PillSize;
 (function (PillSize) {
@@ -68,11 +44,12 @@ const getPillTypeClassName = (type) => pillClassesByType[type] || "";
  *  2. Rename .zen-pill-new-content to zen-pill-content
  *  3. Remove commonStyles/pillStyles/pillStyles.less
 */
-exports.Pill = React.forwardRef(function pill(_a, ref) {
-    var { children, className = "", type, long, size = PillSize.Normal } = _a, restProps = __rest(_a, ["children", "className", "type", "long", "size"]);
+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 = (0, classNames_1.classNames)(["zen-pill", pillTypeClass, pillLongClass, pillSizeClass, className]);
     return (0, jsx_runtime_1.jsx)("div", Object.assign({}, restProps, { className: pillClasses, ref: ref, children: children }));
-});
+};
+exports.Pill = Pill;

package/dist/pageHeader/pageHeaderActions.js

@@ -16,7 +16,7 @@ const pageHeaderHelpers_1 = require("./pageHeaderHelpers");
 const PageHeaderActions = ({ className = "", children }) => {
     const childrenArray = (0, react_1.useMemo)(() => (0, pageHeaderHelpers_1.getItemsFromFragments)(
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    (0, headerHelpers_1.getArrayOfChildren)(children).filter((child) => child !== null && child !== undefined && react_2.default.isValidElement(child))), [children]);
+    react_1.Children.toArray(children).filter((child) => child !== null && child !== undefined && react_2.default.isValidElement(child))), [children]);
     const nonFittingElements = (0, react_1.useMemo)(() => childrenArray.slice(2, childrenArray.length), [childrenArray]);
     const fittingElements = (0, react_1.useMemo)(() => childrenArray.slice(0, 2).map(el => {
         if ((0, headerHelpers_1.isNamedChildComponent)(el, pageHeaderButton_1.PageHeaderButtonDisplayName)) {

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

@@ -16,8 +16,9 @@ const getItemsFromFragments = (items) => {
     const itemsArr = [];
     react_1.default.Children.forEach(items, (child) => {
         if (react_1.default.isValidElement(child) && child.type === react_1.default.Fragment) {
-            if (child.props && child.props.children) {
-                const fragmentArr = (0, headerHelpers_1.getArrayOfChildren)(child.props.children);
+            const fragmentProps = child.props;
+            if (fragmentProps && fragmentProps.children) {
+                const fragmentArr = (0, headerHelpers_1.getArrayOfChildren)(fragmentProps.children);
                 itemsArr.push(...fragmentArr.filter((el) => react_1.default.isValidElement(el)));
             }
         }

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

@@ -1,39 +1,16 @@
 "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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageContentLayout = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const React = __importStar(require("react"));
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 // eslint-disable-next-line @typescript-eslint/naming-convention
-exports.PageContentLayout = React.forwardRef(function PageContentLayout({ id, className, children, oldStyle }, ref) {
+const PageContentLayout = ({ id, className, children, oldStyle, ref }) => {
     const cssClassName = (0, classNames_1.classNames)([
         "zen-page-layout__content",
         oldStyle ? "zen-page-layout__content--old" : "",
         className || ""
     ]);
     return (0, jsx_runtime_1.jsx)("div", { id: id, className: cssClassName, ref: ref, children: children });
-});
+};
+exports.PageContentLayout = PageContentLayout;
 exports.PageContentLayout.displayName = "PageContentLayout";

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