@geotab/zenith 1.26.2 → 1.26.4-beta.0

package/dist/menu/components/menuErrorItem.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuErrorItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const textIconButton_1 = require("../../textIconButton/textIconButton");
+const iconWarning_1 = require("../../icons/iconWarning");
+const useLanguage_1 = require("../../utils/localization/useLanguage");
+const MenuErrorItem = ({ id, onClick }) => {
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    return (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { id: id, className: "zen-menu-error-item", icon: iconWarning_1.IconWarning, type: "tertiary-destructive", onClick: onClick, role: "menuitem", children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { children: translate("Error with loading") }, `error-msg-${id}`), (0, jsx_runtime_1.jsx)("div", { className: "zen-menu-error-item__nav", children: translate("Click to refresh") }, `error-nav-${id}`)] }) });
+};
+exports.MenuErrorItem = MenuErrorItem;

package/dist/menu/components/menuItem.js

@@ -4,7 +4,6 @@ exports.MenuItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const menuButton_1 = require("./menuButton");
-require("./menuItem.less");
 const controlledMenu_1 = require("../controlledMenu");
 const controlledPopup_1 = require("../../controlledPopup/controlledPopup");
 const pathContext_1 = require("../contexts/pathContext");
@@ -16,24 +15,25 @@ const MenuItem = ({ id, children, name, icon, disabled, onClick, link, target, r
     const contentAlignment = alignment || aligmentContext.alignment || "right-top";
     const { path, onOpenBranch, closeBranch } = (0, react_1.useContext)(pathContext_1.PathContext);
     const memoizedDesktopActionOnClick = (0, react_1.useCallback)((itemId, e) => {
-        setIsOpen?.(false);
-        onClick?.(itemId, e);
+        setIsOpen === null || setIsOpen === void 0 ? void 0 : setIsOpen(false);
+        onClick === null || onClick === void 0 ? void 0 : onClick(itemId, e);
     }, [setIsOpen, onClick]);
     const memoizedMobileActionOnClick = (0, react_1.useCallback)((itemId, e) => {
         onOpenBranch(id);
-        !link && onClick?.(itemId, e);
+        !link && (onClick === null || onClick === void 0 ? void 0 : onClick(itemId, e));
     }, [id, onClick, link, onOpenBranch]);
     const memoizedTriggerOnClick = (0, react_1.useCallback)((itemId, e) => {
         onOpenBranch(id);
-        !link && onClick?.(itemId, e);
+        !link && (onClick === null || onClick === void 0 ? void 0 : onClick(itemId, e));
     }, [onClick, onOpenBranch, id, link]);
     const memoizedCustomTriggerOnClick = (0, react_1.useCallback)((e, ...rest) => {
+        var _a, _b;
         onOpenBranch(id);
-        if (trigger?.props?.onClick) {
-            trigger.props?.onClick(...[e, ...rest]);
+        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]);
             return;
         }
-        onClick?.(id, e);
+        onClick === null || onClick === void 0 ? void 0 : onClick(id, e);
     }, [onClick, onOpenBranch, id, trigger]);
     const memoizedOnOpenChange = (0, react_1.useCallback)(() => {
         closeBranch();
@@ -46,7 +46,7 @@ const MenuItem = ({ id, children, name, icon, disabled, onClick, link, target, r
                 return;
             }
             if (typeof child === "string") {
-                cont.push((0, jsx_runtime_1.jsx)("li", { className: (0, classNames_1.classNames)(["zen-menu-item__content", className ?? ""]), role: "presentation", children: child }, (0, utils_1.generateId)()));
+                cont.push((0, jsx_runtime_1.jsx)("li", { className: (0, classNames_1.classNames)(["zen-menu-item__content", className !== null && className !== void 0 ? className : ""]), role: "presentation", children: child }, (0, utils_1.generateId)()));
                 return;
             }
             if (child.type === controlledMenu_1.ControlledMenu.Item) {
@@ -58,7 +58,7 @@ const MenuItem = ({ id, children, name, icon, disabled, onClick, link, target, r
                 cont.push(clone);
                 return;
             }
-            cont.push((0, jsx_runtime_1.jsx)("li", { className: (0, classNames_1.classNames)(["zen-menu-item__content", className ?? ""]), role: "presentation", children: child }, child.props.id || child.props["data-id"] || (0, utils_1.generateId)()));
+            cont.push((0, jsx_runtime_1.jsx)("li", { className: (0, classNames_1.classNames)(["zen-menu-item__content", className !== null && className !== void 0 ? className : ""]), role: "presentation", children: child }, child.props.id || child.props["data-id"] || (0, utils_1.generateId)()));
         });
         return cont;
     }, [children, isMobile, setIsOpen, className]);
@@ -82,4 +82,3 @@ const MenuItem = ({ id, children, name, icon, disabled, onClick, link, target, r
     return (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [popupTrigger, (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { className: (0, classNames_1.classNames)([`zen-controlled-menu-submenu--${path.length}`]), useTrapFocusWithTrigger: "on", alignment: contentAlignment, triggerRef: ref, isOpen: isOpen, onOpenChange: memoizedOnOpenChange, ariaLabel: popupTrigger.props.name, recalculateOnScroll: true, children: (0, jsx_runtime_1.jsx)("ul", { role: "menu", className: "zen-menu-item", children: content }) })] }, id);
 };
 exports.MenuItem = MenuItem;
-//# sourceMappingURL=menuItem.js.map

package/dist/menu/components/menuSeparator.js

@@ -2,7 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuSeparator = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-require("./menuSeparator.less");
 const MenuSeparator = () => (0, jsx_runtime_1.jsx)("li", { className: "zen-menu-separator", role: "separator" });
 exports.MenuSeparator = MenuSeparator;
-//# sourceMappingURL=menuSeparator.js.map

package/dist/menu/contexts/pathContext.js

@@ -7,4 +7,3 @@ exports.PathContext = (0, react_1.createContext)({
     onOpenBranch: () => { },
     closeBranch: () => { }
 });
-//# sourceMappingURL=pathContext.js.map

package/dist/menu/contexts/pathProvider.js

@@ -5,4 +5,3 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const pathContext_1 = require("./pathContext");
 const PathProvider = ({ children, path, onOpenBranch, closeBranch }) => ((0, jsx_runtime_1.jsx)(pathContext_1.PathContext.Provider, { value: { path, onOpenBranch, closeBranch }, children: children }));
 exports.PathProvider = PathProvider;
-//# sourceMappingURL=pathProvider.js.map

package/dist/menu/controlledMenu.js

@@ -21,8 +21,6 @@ const deviceType_1 = require("../commonHelpers/hooks/deviceType");
 const useDeviceType_1 = require("../commonHelpers/hooks/useDeviceType");
 const utils_1 = require("../commonHelpers/utils");
 const pathProvider_1 = require("./contexts/pathProvider");
-require("./controlledMenu.less");
-require("./controlledMenuSubmenu.less");
 const menuSeparator_1 = require("./components/menuSeparator");
 // eslint-disable-next-line react/prop-types
 const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ariaLabelledby, id, title, className = "", paddingX = 0, paddingY = 0, alignment }) => {
@@ -104,7 +102,8 @@ const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ar
             cont.pop();
         }
         cont = cont.filter((el, indx, arr) => {
-            if (el.type === menuSeparator_1.MenuSeparator && arr[indx - 1]?.type === menuSeparator_1.MenuSeparator) {
+            var _a;
+            if (el.type === menuSeparator_1.MenuSeparator && ((_a = arr[indx - 1]) === null || _a === void 0 ? void 0 : _a.type) === menuSeparator_1.MenuSeparator) {
                 return false;
             }
             return true;
@@ -112,26 +111,27 @@ const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ar
         return [cont, par];
     }, [children, isMobile, path, setIsOpen]);
     const onKeyDown = (e) => {
+        var _a, _b, _c, _d;
         const target = e.target;
         if ((0, isButton_1.isButton)(target) || (0, isLink_1.isLink)(target)) {
             if (e.key === "ArrowDown") {
                 e.preventDefault();
-                (0, findNextFocusable_1.findNextFocusable)(target)?.focus();
+                (_a = (0, findNextFocusable_1.findNextFocusable)(target)) === null || _a === void 0 ? void 0 : _a.focus();
                 return;
             }
             if (e.key === "ArrowUp") {
                 e.preventDefault();
-                (0, findPrevFocusable_1.findPrevFocusable)(target)?.focus();
+                (_b = (0, findPrevFocusable_1.findPrevFocusable)(target)) === null || _b === void 0 ? void 0 : _b.focus();
                 return;
             }
             if (e.key === "Home") {
                 e.preventDefault();
-                (0, findFirstFocusable_1.findFirstFocusable)(target)?.focus();
+                (_c = (0, findFirstFocusable_1.findFirstFocusable)(target)) === null || _c === void 0 ? void 0 : _c.focus();
                 return;
             }
             if (e.key === "End") {
                 e.preventDefault();
-                (0, findLastFocusable_1.findLastFocusable)(target)?.focus();
+                (_d = (0, findLastFocusable_1.findLastFocusable)(target)) === null || _d === void 0 ? void 0 : _d.focus();
                 return;
             }
         }
@@ -157,4 +157,3 @@ exports.ControlledMenu = ControlledMenu;
 exports.ControlledMenu.Item = menuItem_1.MenuItem;
 exports.ControlledMenu.Separator = menuSeparator_1.MenuSeparator;
 exports.TRANSLATIONS = ["Back"];
-//# sourceMappingURL=controlledMenu.js.map

package/dist/menu/menu.js

@@ -23,16 +23,16 @@ const Menu =
         }
     });
     (0, react_1.useEffect)(() => {
-        if (triggerRef?.current && !shouldRenderTrigger) {
-            abortEventsControllerRef.current?.abort();
+        var _a;
+        if ((triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) && !shouldRenderTrigger) {
+            (_a = abortEventsControllerRef.current) === null || _a === void 0 ? void 0 : _a.abort();
             abortEventsControllerRef.current = new AbortController();
             triggerRef.current.addEventListener("click", () => setIsOpen(!isOpen), { signal: abortEventsControllerRef.current.signal });
         }
     }, [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?.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 || (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 })] });
 };
 exports.Menu = Menu;
 exports.Menu.Item = menuItem_1.MenuItem;
 exports.Menu.Separator = menuSeparator_1.MenuSeparator;
-//# sourceMappingURL=menu.js.map

package/dist/menu/utils/findContent.js

@@ -22,4 +22,3 @@ const findContent = (children, targetComponent, id) => {
     return found;
 };
 exports.findContent = findContent;
-//# sourceMappingURL=findContent.js.map

package/dist/menu/utils/findFirstFocusable.js

@@ -7,7 +7,6 @@ const findFirstFocusable = (element) => {
         return undefined;
     }
     const ulElement = element.closest("ul");
-    return ulElement?.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
+    return ulElement === null || ulElement === void 0 ? void 0 : ulElement.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
 };
 exports.findFirstFocusable = findFirstFocusable;
-//# sourceMappingURL=findFirstFocusable.js.map

package/dist/menu/utils/findLastFocusable.js

@@ -7,8 +7,7 @@ const findLastFocusable = (element) => {
         return undefined;
     }
     const ulElement = element.closest("ul");
-    const focusable = ulElement?.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR);
-    return focusable?.[focusable.length - 1];
+    const focusable = ulElement === null || ulElement === void 0 ? void 0 : ulElement.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR);
+    return focusable === null || focusable === void 0 ? void 0 : focusable[focusable.length - 1];
 };
 exports.findLastFocusable = findLastFocusable;
-//# sourceMappingURL=findLastFocusable.js.map

package/dist/menu/utils/findNextFocusable.js

@@ -17,4 +17,3 @@ const findNextFocusable = (element) => {
     return listItemEl.parentNode.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
 };
 exports.findNextFocusable = findNextFocusable;
-//# sourceMappingURL=findNextFocusable.js.map

package/dist/menu/utils/findPrevFocusable.js

@@ -18,4 +18,3 @@ function findPrevFocusable(element) {
     return focusable[focusable.length - 1];
 }
 exports.findPrevFocusable = findPrevFocusable;
-//# sourceMappingURL=findPrevFocusable.js.map

package/dist/menu/utils/getMenuButtonState.js

@@ -8,4 +8,3 @@ const getMenuButtonState = (active, disabled = false) => {
     return { hasState: true, isActive: active };
 };
 exports.getMenuButtonState = getMenuButtonState;
-//# sourceMappingURL=getMenuButtonState.js.map

package/dist/menu/utils/isButton.js

@@ -3,4 +3,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.isButton = void 0;
 const isButton = (el) => !!el && el.tagName === "BUTTON";
 exports.isButton = isButton;
-//# sourceMappingURL=isButton.js.map

package/dist/menu/utils/isLink.js

@@ -3,4 +3,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.isLink = void 0;
 const isLink = (el) => !!el && el.tagName === "A";
 exports.isLink = isLink;
-//# sourceMappingURL=isLink.js.map

package/dist/miniTabs/miniTabs.js

@@ -4,7 +4,6 @@ exports.MiniTabs = exports.MiniTabsSize = void 0;
 const react_1 = require("react");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_2 = require("react");
-require("./miniTabs.less");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const miniTabsHeaderItem_1 = require("./miniTabsHeaderItem");
 const miniTabsItem_1 = require("./miniTabsItem");
@@ -34,9 +33,9 @@ const MiniTabs = ({ activeTabId, onTabChange, children, size = MiniTabsSize.Medi
     }, [tabs, activeTabId, onTabChange]);
     (0, react_2.useEffect)(() => setTabs((0, miniTabsHelper_1.getChildrenForRender)(children).slice(0, maxTabsValue)), [children]);
     (0, react_2.useEffect)(() => {
-        activeButtonRef.current?.focus();
+        var _a;
+        (_a = activeButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [activeTabId]);
-    return (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-mini-tabs", `zen-mini-tabs--${size}`, className ? className : ""]), children: tabs.length ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-mini-tabs__header", role: "tablist", onKeyDown: keyDownHandler, ref: tabsRef, children: tabs.map(tab => ((0, jsx_runtime_1.jsx)(miniTabsHeaderItem_1.MiniTabsHeaderItem, { id: tab.id, isActive: activeTabId === tab.id, handleClick: handleTabItemClick, buttonRef: tab.id === activeTabId ? activeButtonRef : undefined, children: tab.name }, tab.id))) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-mini-tabs__content", children: tabs.map((props) => ((0, react_1.createElement)(miniTabsItem_1.MiniTabsItem, { ...props, key: props.id, activeId: activeTabId }))) })] }) : null });
+    return (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-mini-tabs", `zen-mini-tabs--${size}`, className ? className : ""]), children: tabs.length ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-mini-tabs__header", role: "tablist", onKeyDown: keyDownHandler, ref: tabsRef, children: tabs.map(tab => ((0, jsx_runtime_1.jsx)(miniTabsHeaderItem_1.MiniTabsHeaderItem, { id: tab.id, isActive: activeTabId === tab.id, handleClick: handleTabItemClick, buttonRef: tab.id === activeTabId ? activeButtonRef : undefined, children: tab.name }, tab.id))) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-mini-tabs__content", children: tabs.map((props) => ((0, react_1.createElement)(miniTabsItem_1.MiniTabsItem, Object.assign({}, props, { key: props.id, activeId: activeTabId })))) })] }) : null });
 };
 exports.MiniTabs = MiniTabs;
-//# sourceMappingURL=miniTabs.js.map

package/dist/miniTabs/miniTabsHeaderItem.js

@@ -5,4 +5,3 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const MiniTabsHeaderItem = ({ id, isActive, handleClick, children, buttonRef }) => ((0, jsx_runtime_1.jsx)("button", { id: id, className: (0, classNames_1.classNames)(["zen-mini-tabs__header-item", isActive ? "zen-mini-tabs__header-item--active" : "", "zen-ellipsis", "label-01"]), role: "tab", type: "button", "aria-controls": `panel-${id}`, "aria-selected": isActive ? "true" : "false", title: children, tabIndex: isActive ? 0 : -1, ref: buttonRef, onClick: handleClick, children: children }));
 exports.MiniTabsHeaderItem = MiniTabsHeaderItem;
-//# sourceMappingURL=miniTabsHeaderItem.js.map

package/dist/miniTabs/miniTabsHelper.js

@@ -18,20 +18,20 @@ const getChildren = (elem) => {
 exports.getChildren = getChildren;
 const convertChild = (child) => {
     if (child.type === miniTabsItem_1.MiniTabsItem) {
-        return { ...child.props };
+        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);
         }
-        return child.props.children.type === miniTabsItem_1.MiniTabsItem ? { ...child.props.children.props } : undefined;
+        return child.props.children.type === miniTabsItem_1.MiniTabsItem ? Object.assign({}, child.props.children.props) : undefined;
     }
     return undefined;
 };
 exports.convertChild = convertChild;
 const getChildrenForRender = (children) => {
-    const childElements = (0, exports.getChildren)(children)?.map(exports.convertChild).filter(el => el).reduce((acc, curr) => acc.concat(curr), []);
+    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 || [];
 };
 exports.getChildrenForRender = getChildrenForRender;
-//# sourceMappingURL=miniTabsHelper.js.map

package/dist/miniTabs/miniTabsItem.js

@@ -5,4 +5,3 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const MiniTabsItem = ({ id, children, activeId }) => (0, jsx_runtime_1.jsx)("div", { className: "zen-mini-tabs__content", children: (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-mini-tabs__content-wrapper", activeId !== id ? "zen-mini-tabs__content-wrapper--hidden" : ""]), role: "tabpanel", "aria-labelledby": id, tabIndex: 0, id: `panel-${id}`, hidden: activeId && activeId !== id ? true : false, children: children }) });
 exports.MiniTabsItem = MiniTabsItem;
-//# sourceMappingURL=miniTabsItem.js.map

package/dist/mobileSheet/components/mobileSheetContent.js

@@ -5,4 +5,3 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const MobileSheetContent = ({ className = "", children }) => (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-mobile-sheet-content", className]), children: children });
 exports.MobileSheetContent = MobileSheetContent;
-//# sourceMappingURL=mobileSheetContent.js.map

package/dist/mobileSheet/components/mobileSheetFooter.js

@@ -3,7 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MobileSheetFooter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
-require("./mobileSheetFooter.less");
 const MobileSheetFooter = ({ className = "", children }) => (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-mobile-sheet-footer", className]), children: children });
 exports.MobileSheetFooter = MobileSheetFooter;
-//# sourceMappingURL=mobileSheetFooter.js.map

package/dist/mobileSheet/components/mobileSheetTitle.js

@@ -3,4 +3,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MobileSheetTitle = void 0;
 const MobileSheetTitle = ({ children }) => children;
 exports.MobileSheetTitle = MobileSheetTitle;
-//# sourceMappingURL=mobileSheetTitle.js.map

package/dist/mobileSheet/mobileSheet.js

@@ -11,7 +11,6 @@ const mobileSheetContent_1 = require("./components/mobileSheetContent");
 const mobileSheetTitle_1 = require("./components/mobileSheetTitle");
 const buttonType_1 = require("../button/buttonType");
 const textIconButton_1 = require("../textIconButton/textIconButton");
-require("./mobileSheet.less");
 const iconBackArrow_1 = require("../icons/deprecated/iconBackArrow");
 const iconClose_1 = require("../icons/iconClose");
 const focusableSelector_1 = require("../utils/focusableSelector");
@@ -24,6 +23,7 @@ const useFadeComponent_1 = require("../utils/useFadeComponent");
 const MobileSheet = 
 // eslint-disable-next-line react/prop-types
 ({ triggerRef, label, isOpen, onHidePanel, className = "", panelPosition = "bottom", onBackClick, onCloseClick, isBackVisible, backButtonAriaLabel, children, useTrapFocusWithTrigger, onReadyForFocus, wrapperClassName }) => {
+    var _a, _b;
     const { renderComponent, showContent, readyForFocus, setIsOpen, handleTransitionEnd } = (0, useFadeComponent_1.useFadeComponent)(isOpen, onReadyForFocus);
     const dataShieldId = (0, useUniqueId_1.useUniqueId)();
     const { translate } = (0, useLanguage_1.useLanguage)();
@@ -62,13 +62,15 @@ const MobileSheet =
         setIsOpen(isOpen);
     }, [isOpen, setIsOpen]);
     (0, react_1.useEffect)(() => {
+        var _a, _b;
         if (useTrapFocusWithTrigger) {
             return;
         }
-        showContent && ref.current?.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR)?.focus();
+        showContent && ((_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR)) === null || _b === void 0 ? void 0 : _b.focus());
     }, [content, showContent, readyForFocus, useTrapFocusWithTrigger]);
     (0, react_1.useEffect)(() => {
-        if (!renderComponent && !readyForFocus && triggerRef.current?.getAttribute("aria-expanded") === "true") {
+        var _a;
+        if (!renderComponent && !readyForFocus && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute("aria-expanded")) === "true") {
             triggerRef.current.setAttribute("aria-expanded", "false");
             triggerRef.current.focus();
         }
@@ -79,8 +81,8 @@ const MobileSheet =
     return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(shield_1.Shield, { className: "zen-mobile-sheet-shield", dataShieldId: dataShieldId, isVisible: showContent }), (0, jsx_runtime_1.jsx)(sidePanel_1.SidePanel, { className: (0, classNames_1.classNames)(["zen-mobile-sheet-wrapper", wrapperClassName || "", driveWrapperMobileSheetClassName || ""]), panelPosition: panelPosition, triggerRef: triggerRef, label: label, isOpen: showContent, useTrapFocusWithTrigger: useTrapFocusWithTrigger, onHidePanel: onHidePanelAction, onTransitionEnd: handleTransitionEnd, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-mobile-sheet", className]), ref: ref, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-mobile-sheet__title", driveTitleClassName || ""]), children: [isBackVisible ?
                                     (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { onClick: (e) => {
                                             e.stopPropagation();
-                                            onBackClick?.();
-                                        }, "aria-label": backButtonAriaLabel || title[0]?.props?.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] })] }) })] });
+                                            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] })] }) })] });
 };
 exports.MobileSheet = MobileSheet;
 exports.TRANSLATIONS = [
@@ -89,4 +91,3 @@ exports.TRANSLATIONS = [
 exports.MobileSheet.Footer = mobileSheetFooter_1.MobileSheetFooter;
 exports.MobileSheet.Content = mobileSheetContent_1.MobileSheetContent;
 exports.MobileSheet.Title = mobileSheetTitle_1.MobileSheetTitle;
-//# sourceMappingURL=mobileSheet.js.map

package/dist/modal/modal.js

@@ -26,7 +26,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogContentNew = exports.Modal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
-require("./modal.less");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const button_1 = require("../button/button");
 const focusableSelector_1 = require("../utils/focusableSelector");
@@ -85,7 +84,7 @@ const Modal = ({ isOpen, children, onClose, closeOnClickOutside, maxWidth, title
         const someContent = [];
         react_1.default.Children.forEach(children, (child, index) => {
             const childrenWithProps = (0, react_1.isValidElement)(child)
-                ? (0, react_1.cloneElement)(child, { ...child.props, key: index })
+                ? (0, react_1.cloneElement)(child, Object.assign(Object.assign({}, child.props), { key: index }))
                 : child;
             someContent.push(childrenWithProps);
         });
@@ -161,11 +160,10 @@ const DialogContentNew = ({ onClose, className, title, type, maxWidth = "600px",
                 (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-modal-content__footer", isMobile ? "zen-modal-content__footer--mobile" : ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-modal-content__footer-left", isMobile ? "zen-modal-content__footer-left--mobile" : ""]), children: bodyContent.tertiaryButton }), (bodyContent.secondaryButton || bodyContent.primaryButton) && (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-modal-content__footer-right", isMobile ? "zen-modal-content__footer-right--mobile" : ""]), children: [bodyContent.secondaryButton, bodyContent.primaryButton] })] })] });
 };
 exports.DialogContentNew = DialogContentNew;
-const SecondaryButton = (secondaryButton) => (0, jsx_runtime_1.jsx)(button_1.Button, { ...secondaryButton, "data-focusable": "secondary", children: secondaryButton.children });
-const PrimaryButton = (primaryButton) => (0, jsx_runtime_1.jsx)(button_1.Button, { ...primaryButton, "data-focusable": "primary", type: primaryButton.type || "primary", children: primaryButton.children });
-const TertiaryButton = (tertiaryButton) => (0, jsx_runtime_1.jsx)(button_1.Button, { ...tertiaryButton, "data-focusable": "tertiary", className: "zen-modal-content__left-button", type: tertiaryButton.type || "tertiary", children: tertiaryButton.children });
+const SecondaryButton = (secondaryButton) => (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({}, secondaryButton, { "data-focusable": "secondary", children: secondaryButton.children }));
+const PrimaryButton = (primaryButton) => (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({}, primaryButton, { "data-focusable": "primary", type: primaryButton.type || "primary", children: primaryButton.children }));
+const TertiaryButton = (tertiaryButton) => (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({}, tertiaryButton, { "data-focusable": "tertiary", className: "zen-modal-content__left-button", type: tertiaryButton.type || "tertiary", children: tertiaryButton.children }));
 exports.Modal.Content = exports.DialogContentNew;
 exports.Modal.SecondaryButton = SecondaryButton;
 exports.Modal.PrimaryButton = PrimaryButton;
 exports.Modal.TertiaryButton = TertiaryButton;
-//# sourceMappingURL=modal.js.map

package/dist/modal/modalHelpers.js

@@ -28,4 +28,3 @@ const getPredefinedFocusableItem = (container, focusable) => {
     return null;
 };
 exports.getPredefinedFocusableItem = getPredefinedFocusableItem;
-//# sourceMappingURL=modalHelpers.js.map

package/dist/nav/context/nav.context.js

@@ -14,4 +14,3 @@ exports.NavContext = (0, react_1.createContext)({
  */
 const useNavContext = () => (0, react_1.useContext)(exports.NavContext);
 exports.useNavContext = useNavContext;
-//# sourceMappingURL=nav.context.js.map

package/dist/nav/nav.js

@@ -4,7 +4,6 @@ exports.Nav = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const nav_context_1 = require("./context/nav.context");
-require("./nav.less");
 const react_1 = require("react");
 const generateId_1 = require("../commonHelpers/generateId");
 const navDivider_1 = require("./navDivider/navDivider");
@@ -53,15 +52,14 @@ const NavContent = ({ children }) => {
  */
 const Nav = ({ children, className, collapsed = false, onCollapseToggle }) => {
     const childrenArray = react_1.Children.toArray(children);
-    const header = childrenArray.find(child => child.type?.displayName === "NavHeader");
-    const sections = childrenArray.filter(child => child.type?.displayName === "NavSection");
-    const footer = childrenArray.find(child => child.type?.displayName === "NavFooter");
-    return (0, jsx_runtime_1.jsx)(nav_context_1.NavContext.Provider, { value: { collapsed, onCollapseToggle }, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-nav", className || ""]), children: [header ? (0, react_1.cloneElement)(header, { ...header.props, className: (0, classNames_1.classNames)(["zen-nav__header", header.props.className || ""]) }) : null, (0, jsx_runtime_1.jsx)(NavContent, { children: sections.map((section, index) => {
+    const header = childrenArray.find(child => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "NavHeader"; });
+    const sections = childrenArray.filter(child => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "NavSection"; });
+    const footer = childrenArray.find(child => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "NavFooter"; });
+    return (0, jsx_runtime_1.jsx)(nav_context_1.NavContext.Provider, { value: { collapsed, onCollapseToggle }, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-nav", className || ""]), children: [header ? (0, react_1.cloneElement)(header, Object.assign(Object.assign({}, header.props), { className: (0, classNames_1.classNames)(["zen-nav__header", header.props.className || ""]) })) : null, (0, jsx_runtime_1.jsx)(NavContent, { children: sections.map((section, index) => {
                         const sectionKey = (0, generateId_1.generateId)();
                         return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, react_1.cloneElement)(section, {
                                     className: (0, classNames_1.classNames)(["zen-nav__section", section.props.className || ""])
                                 }), index < sections.length - 1 ? (0, jsx_runtime_1.jsx)(navDivider_1.NavDivider, {}) : null] }, sectionKey));
-                    }) }), footer ? (0, react_1.cloneElement)(footer, { ...footer.props, className: (0, classNames_1.classNames)(["zen-nav__footer", footer.props.className || ""]) }) : null] }) });
+                    }) }), footer ? (0, react_1.cloneElement)(footer, Object.assign(Object.assign({}, footer.props), { className: (0, classNames_1.classNames)(["zen-nav__footer", footer.props.className || ""]) })) : null] }) });
 };
 exports.Nav = Nav;
-//# sourceMappingURL=nav.js.map

package/dist/nav/navDivider/navDivider.js

@@ -3,16 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavDivider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
-require("./navDivider.less");
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
 const NavDivider = ({ className }) => {
     const dividerClassNames = (0, classNames_1.classNames)([
         "zen-nav-divider",
-        className ?? ""
+        className !== null && className !== void 0 ? className : ""
     ]);
     return (0, jsx_runtime_1.jsx)("div", { className: dividerClassNames, role: "separator" });
 };
 exports.NavDivider = NavDivider;
-//# sourceMappingURL=navDivider.js.map

package/dist/nav/navFooter/navFooter.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavFooter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-require("./navFooter.less");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const react_1 = require("react");
 const navItem_1 = require("../navItem/navItem");
@@ -58,4 +57,3 @@ exports.NavFooter = Object.assign(NavFooterComponent, {
     Bottom: NavFooterBottom
 });
 exports.NavFooter.displayName = "NavFooter";
-//# sourceMappingURL=navFooter.js.map

package/dist/nav/navFooter/navFooterAction/navFooterAction.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavFooterAction = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-require("./navFooterAction.less");
 const useLanguage_1 = require("../../../utils/localization/useLanguage");
 const navItem_1 = require("../../navItem/navItem");
 const iconSettings4_1 = require("../../../icons/iconSettings4");
@@ -23,4 +22,3 @@ const NavFooterAction = ({ children }) => {
 };
 exports.NavFooterAction = NavFooterAction;
 exports.NavFooterAction.displayName = "NavFooterAction";
-//# sourceMappingURL=navFooterAction.js.map

package/dist/nav/navHeader/navHeader.d.ts

@@ -1,10 +1,10 @@
 import "./navHeader.less";
 import { IZenComponentProps } from "../../commonHelpers/zenComponent";
-import { FC, ReactElement } from "react";
+import { FC, ReactElement, ReactNode } from "react";
 export interface INavHeader extends Omit<IZenComponentProps, "children"> {
-    imgUrl: string;
+    logo: string | ReactNode;
+    collapsedLogo?: string | ReactNode;
     imgTitle: string;
-    collapsedImgUrl?: string;
     children?: ReactElement<INavHeaderActions>;
 }
 declare const NavHeaderAction: FC<import("../../menu/components/menuItem").IMenuControlledItem>;

package/dist/nav/navHeader/navHeader.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-require("./navHeader.less");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const react_1 = require("react");
 const iconPlus_1 = require("../../icons/iconPlus");
@@ -11,10 +10,15 @@ const controlledMenu_1 = require("../../menu/controlledMenu");
 const iconClose_1 = require("../../icons/iconClose");
 const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
 const nav_context_1 = require("../context/nav.context");
-const NavHeaderComponent = ({ className, imgUrl, imgTitle, collapsedImgUrl, children }) => {
+const navUtils_1 = require("../utils/navUtils");
+const NavHeaderComponent = ({ className, logo, imgTitle, collapsedLogo, children }) => {
     const { collapsed } = (0, nav_context_1.useNavContext)();
-    const imgProp = collapsed && collapsedImgUrl ? collapsedImgUrl : imgUrl;
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-nav-header", collapsed ? "zen-nav-header--collapsed" : "", className || ""]), children: [(0, jsx_runtime_1.jsx)("img", { src: imgProp, alt: imgTitle }), children] });
+    const isLogoImageString = (0, react_1.useMemo)(() => (0, navUtils_1.isImageUrl)(logo), [logo]);
+    const isCollapsedLogoImageString = (0, react_1.useMemo)(() => (0, navUtils_1.isImageUrl)(collapsedLogo), [collapsedLogo]);
+    const logoElement = isLogoImageString ? (0, jsx_runtime_1.jsx)("img", { src: logo, alt: imgTitle }) : logo;
+    const logoCollapsedElement = isCollapsedLogoImageString ? (0, jsx_runtime_1.jsx)("img", { src: collapsedLogo, alt: imgTitle }) : collapsedLogo;
+    const logoToRender = collapsed && collapsedLogo ? logoCollapsedElement : logoElement;
+    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-nav-header", collapsed ? "zen-nav-header--collapsed" : "", className || ""]), children: [logoToRender, children] });
 };
 const NavHeaderAction = controlledMenu_1.ControlledMenu.Item;
 const NavHeaderActions = ({ title, className, children }) => {
@@ -28,4 +32,3 @@ const NavHeaderActions = ({ title, className, children }) => {
  */
 exports.NavHeader = Object.assign(NavHeaderComponent, { Actions: NavHeaderActions, Action: NavHeaderAction });
 exports.NavHeader.displayName = "NavHeader";
-//# sourceMappingURL=navHeader.js.map

package/dist/nav/navItem/navItem.d.ts

@@ -1,16 +1,17 @@
 import "./navItem.less";
 import { IZenComponentProps } from "../../commonHelpers/zenComponent";
-import { FC } from "react";
+import { FC, ReactNode } from "react";
 import { IIcon } from "../../icons/icon";
 interface INavItemCommon extends IZenComponentProps {
     title: string;
-    primaryIcon?: FC<IIcon>;
+    primaryIcon?: FC<IIcon> | ReactNode;
     secondaryIcon?: FC<IIcon>;
     isBeta?: boolean;
     counter?: string;
     collapsed?: boolean;
     active?: boolean;
     isExternalLink?: boolean;
+    iconClass?: string;
 }
 interface ILinkNavItem extends INavItemCommon {
     link: string;