@geotab/zenith 3.1.1-beta.6 → 3.2.0-beta.0

package/esm/nav/navHeader/navHeader.js

@@ -1,3 +1,4 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { Children, useMemo } from "react";
@@ -9,33 +10,77 @@ import { NavItem } from "../navItem/navItem";
 import { useLanguage } from "../../utils/localization/useLanguage";
 import { NavAddMenu } from "../navAddMenu/navAddMenu";
 import { IconMenu } from "../../icons/iconMenu";
-const NavHeaderToggler = ({ className }) => {
-    const { collapsed, onCollapseToggle } = useNavContext();
-    const { translate } = useLanguage();
-    const isMobile = useMobile();
-    const title = collapsed ? translate("Expand Navigation") : translate("Collapse Navigation");
-    return isMobile
-        ? null
-        : _jsx("div", { className: classNames(["zen-nav-header__toggler", className || ""]), children: _jsx(NavItem, { className: "zen-nav-header__button", title: title, primaryIcon: IconMenu, collapsed: true, isMenuItem: false, onClick: () => onCollapseToggle && onCollapseToggle(!collapsed), tooltipAlignment: collapsed ? "right" : "bottom" }, "collapse-button") });
+injectString("en", "Expand Navigation", "Expand Navigation");
+injectString("en", "Collapse Navigation", "Collapse Navigation");
+const NavHeaderToggler = ({
+  className
+}) => {
+  const {
+    collapsed,
+    onCollapseToggle
+  } = useNavContext();
+  const {
+    translate
+  } = useLanguage();
+  const isMobile = useMobile();
+  const title = collapsed ? translate("Expand Navigation") : translate("Collapse Navigation");
+  return isMobile ? null : _jsx("div", {
+    className: classNames(["zen-nav-header__toggler", className || ""]),
+    children: _jsx(NavItem, {
+      className: "zen-nav-header__button",
+      title: title,
+      primaryIcon: IconMenu,
+      collapsed: true,
+      isMenuItem: false,
+      onClick: () => onCollapseToggle && onCollapseToggle(!collapsed),
+      tooltipAlignment: collapsed ? "right" : "bottom"
+    }, "collapse-button")
+  });
 };
 NavHeaderToggler.displayName = "NavHeaderToggler";
-const NavHeaderComponent = ({ className, logo, logoLink, imgTitle, collapsedLogo, children }) => {
-    const { collapsed, searchOpen } = useNavContext();
-    const isLogoImageString = useMemo(() => isImageUrl(logo), [logo]);
-    const isCollapsedLogoImageString = useMemo(() => isImageUrl(collapsedLogo), [collapsedLogo]);
-    const logoElement = isLogoImageString ? _jsx("img", { className: "zen-nav-header__logo-image", src: logo, alt: imgTitle }) : logo;
-    const logoCollapsedElement = isCollapsedLogoImageString ? _jsx("img", { className: "zen-nav-header__logo-image", src: collapsedLogo, alt: imgTitle }) : collapsedLogo;
-    const logoImage = collapsed && collapsedLogo ? logoCollapsedElement : logoElement;
-    const logoToRender = logoImage && logoLink ? _jsx("a", { href: logoLink, className: "zen-nav-header__logo-link", children: logoImage }) : logoImage;
-    const navChildren = Children.toArray(children)
-        .filter(child => {
-        const element = child;
-        return element && element.type &&
-            (element.type.displayName === "NavHeaderSearch" ||
-                element.type.displayName === "NavHeaderActions" || // TODO: Left for backward compatibility, to be removed in future releases
-                element.type.displayName === "NavAddMenu");
-    });
-    return _jsxs("div", { className: classNames(["zen-nav-header", collapsed ? "zen-nav-header--collapsed" : "", searchOpen ? "zen-nav-header--mode-search" : "", className || ""]), children: [collapsed ? null : _jsx(NavHeaderToggler, {}), searchOpen ? null : logoToRender, _jsxs("div", { className: "zen-nav-header__controls", children: [collapsed ? _jsx(NavHeaderToggler, {}) : null, navChildren] })] });
+const NavHeaderComponent = ({
+  className,
+  logo,
+  logoLink,
+  imgTitle,
+  collapsedLogo,
+  children
+}) => {
+  const {
+    collapsed,
+    searchOpen
+  } = useNavContext();
+  const isLogoImageString = useMemo(() => isImageUrl(logo), [logo]);
+  const isCollapsedLogoImageString = useMemo(() => isImageUrl(collapsedLogo), [collapsedLogo]);
+  const logoElement = isLogoImageString ? _jsx("img", {
+    className: "zen-nav-header__logo-image",
+    src: logo,
+    alt: imgTitle
+  }) : logo;
+  const logoCollapsedElement = isCollapsedLogoImageString ? _jsx("img", {
+    className: "zen-nav-header__logo-image",
+    src: collapsedLogo,
+    alt: imgTitle
+  }) : collapsedLogo;
+  const logoImage = collapsed && collapsedLogo ? logoCollapsedElement : logoElement;
+  const logoToRender = logoImage && logoLink ? _jsx("a", {
+    href: logoLink,
+    className: "zen-nav-header__logo-link",
+    children: logoImage
+  }) : logoImage;
+  const navChildren = Children.toArray(children).filter(child => {
+    const element = child;
+    return element && element.type && (element.type.displayName === "NavHeaderSearch" || element.type.displayName === "NavHeaderActions" ||
+    // TODO: Left for backward compatibility, to be removed in future releases
+    element.type.displayName === "NavAddMenu");
+  });
+  return _jsxs("div", {
+    className: classNames(["zen-nav-header", collapsed ? "zen-nav-header--collapsed" : "", searchOpen ? "zen-nav-header--mode-search" : "", className || ""]),
+    children: [collapsed ? null : _jsx(NavHeaderToggler, {}), searchOpen ? null : logoToRender, _jsxs("div", {
+      className: "zen-nav-header__controls",
+      children: [collapsed ? _jsx(NavHeaderToggler, {}) : null, navChildren]
+    })]
+  });
 };
 /**
  * @deprecated Use NavAddMenu instead. This component is left for backward compatibility and will be removed in future releases.
@@ -51,14 +96,14 @@ NavHeaderAction.displayName = "NavItem";
  * @beta This component is not fully ready yet and may change in future releases.
  */
 export const NavHeader = Object.assign(NavHeaderComponent, {
-    /**
-     * @deprecated Use NavAddMenu instead. Will be removed in future releases.
-     */
-    Actions: NavHeaderActions,
-    /**
-     * @deprecated Use NavItem instead. Will be removed in future releases.
-     */
-    Action: NavHeaderAction,
-    Search: NavHeaderSearch
+  /**
+   * @deprecated Use NavAddMenu instead. Will be removed in future releases.
+   */
+  Actions: NavHeaderActions,
+  /**
+   * @deprecated Use NavItem instead. Will be removed in future releases.
+   */
+  Action: NavHeaderAction,
+  Search: NavHeaderSearch
 });
-NavHeader.displayName = "NavHeader";
+NavHeader.displayName = "NavHeader";

package/esm/nav/navHeader/navHeaderSearch/navHeaderSearch.js

@@ -1,3 +1,4 @@
+import { injectString } from "../../../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { useMobile } from "../../../commonHelpers/hooks/useMobile";
@@ -8,32 +9,85 @@ import { classNames } from "../../../commonHelpers/classNames/classNames";
 import { IconSearch } from "../../../icons/iconSearch";
 import { SearchInput } from "../../../searchInput/searchInput";
 import { NavItem } from "../../navItem/navItem";
-export const NavHeaderSearch = ({ className, onSearch }) => {
-    const isMobile = useMobile();
-    const { searchOpen, onSearchToggle, searchTerm = "", onSearch: contextOnSearch, collapsed } = useNavContext();
-    const { translate } = useLanguage();
-    const onSearchCallback = useCallback((term) => {
-        onSearch === null || onSearch === void 0 ? void 0 : onSearch(term);
-    }, [onSearch]);
-    const debouncedSearch = useDebounce(onSearchCallback);
-    const handleChange = useCallback((term) => {
-        contextOnSearch === null || contextOnSearch === void 0 ? void 0 : contextOnSearch(term);
-        debouncedSearch(term);
-    }, [debouncedSearch, contextOnSearch]);
-    const handleBlur = useCallback(() => {
-        // On desktop, close search if term is empty
-        if (!isMobile && !searchTerm.trim()) {
-            onSearchToggle === null || onSearchToggle === void 0 ? void 0 : onSearchToggle(false);
-        }
-    }, [isMobile, searchTerm, onSearchToggle]);
-    const handleKeyDown = useCallback((event) => {
-        if (event.key === "Escape") {
-            handleChange("");
-            onSearchToggle === null || onSearchToggle === void 0 ? void 0 : onSearchToggle(false);
-        }
-    }, [handleChange, onSearchToggle]);
-    return _jsxs("div", { className: classNames(["zen-nav-header-search", className || ""]), children: [!searchOpen && !isMobile
-                ? _jsx(NavItem, { title: translate("Search"), className: "zen-nav-header-search__button", primaryIcon: IconSearch, collapsed: true, isMenuItem: false, onClick: () => onSearchToggle === null || onSearchToggle === void 0 ? void 0 : onSearchToggle(true), tooltipAlignment: collapsed ? "right" : "bottom" })
-                : null, searchOpen || isMobile ? _jsx(SearchInput, { autoFocus: true, ariaLabel: translate("Search"), value: searchTerm, placeholder: translate("Search"), className: "zen-nav-header-search__input", onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown }) : null] });
+injectString("cs", "Search", "Hledat");
+injectString("da-DK", "Search", "S\xF8g");
+injectString("de", "Search", "Suche");
+injectString("en", "Search", "Search");
+injectString("es", "Search", "Buscar");
+injectString("fi-FI", "Search", "Etsi");
+injectString("fr", "Search", "Rechercher");
+injectString("fr-FR", "Search", "Rechercher");
+injectString("hu-HU", "Search", "Keres\xE9s");
+injectString("id", "Search", "Cari");
+injectString("it", "Search", "Cercare");
+injectString("ja", "Search", "\u691C\u7D22");
+injectString("ko-KR", "Search", "\uAC80\uC0C9");
+injectString("ms", "Search", "Cari");
+injectString("nb-NO", "Search", "S\xF8k");
+injectString("nl", "Search", "Zoeken");
+injectString("pl", "Search", "Wyszukaj");
+injectString("pt-BR", "Search", "Pesquisar");
+injectString("sk-SK", "Search", "H\u013Eadaj.");
+injectString("sv", "Search", "S\xF6k");
+injectString("th", "Search", "\u0E04\u0E49\u0E19\u0E2B\u0E32");
+injectString("tr", "Search", "Ara");
+injectString("zh-Hans", "Search", "\u641C\u7D22");
+injectString("zh-TW", "Search", "\u641C\u5C0B");
+export const NavHeaderSearch = ({
+  className,
+  onSearch
+}) => {
+  const isMobile = useMobile();
+  const {
+    searchOpen,
+    onSearchToggle,
+    searchTerm = "",
+    onSearch: contextOnSearch,
+    collapsed
+  } = useNavContext();
+  const {
+    translate
+  } = useLanguage();
+  const onSearchCallback = useCallback(term => {
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(term);
+  }, [onSearch]);
+  const debouncedSearch = useDebounce(onSearchCallback);
+  const handleChange = useCallback(term => {
+    contextOnSearch === null || contextOnSearch === void 0 ? void 0 : contextOnSearch(term);
+    debouncedSearch(term);
+  }, [debouncedSearch, contextOnSearch]);
+  const handleBlur = useCallback(() => {
+    // On desktop, close search if term is empty
+    if (!isMobile && !searchTerm.trim()) {
+      onSearchToggle === null || onSearchToggle === void 0 ? void 0 : onSearchToggle(false);
+    }
+  }, [isMobile, searchTerm, onSearchToggle]);
+  const handleKeyDown = useCallback(event => {
+    if (event.key === "Escape") {
+      handleChange("");
+      onSearchToggle === null || onSearchToggle === void 0 ? void 0 : onSearchToggle(false);
+    }
+  }, [handleChange, onSearchToggle]);
+  return _jsxs("div", {
+    className: classNames(["zen-nav-header-search", className || ""]),
+    children: [!searchOpen && !isMobile ? _jsx(NavItem, {
+      title: translate("Search"),
+      className: "zen-nav-header-search__button",
+      primaryIcon: IconSearch,
+      collapsed: true,
+      isMenuItem: false,
+      onClick: () => onSearchToggle === null || onSearchToggle === void 0 ? void 0 : onSearchToggle(true),
+      tooltipAlignment: collapsed ? "right" : "bottom"
+    }) : null, searchOpen || isMobile ? _jsx(SearchInput, {
+      autoFocus: true,
+      ariaLabel: translate("Search"),
+      value: searchTerm,
+      placeholder: translate("Search"),
+      className: "zen-nav-header-search__input",
+      onChange: handleChange,
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown
+    }) : null]
+  });
 };
-NavHeaderSearch.displayName = "NavHeaderSearch";
+NavHeaderSearch.displayName = "NavHeaderSearch";

package/esm/nav/navItem/navItem.d.ts

@@ -7,9 +7,9 @@ interface INavItemCommon extends IZenComponentProps {
     title: string;
     primaryIcon?: FC<IIcon> | ReactNode;
     secondaryIcon?: FC<IIcon>;
-    tertiaryIcon?: FC<IIcon>;
-    tertiaryIconAriaLabel?: string;
-    onTertiaryIconClick?: (e: React.MouseEvent) => void;
+    actionIcon?: FC<IIcon>;
+    actionIconTitle?: string;
+    onActionIconClick?: (e: React.MouseEvent) => void;
     isBeta?: boolean;
     counter?: string;
     collapsed?: boolean;

package/esm/nav/navItem/navItem.js

@@ -24,44 +24,56 @@ const SUBMENU_ICON_SIZE = "large";
 export const NavItemContext = createContext({ parentLevel: 0 });
 const defaultTooltipAlignment = "right";
 const isLinkNavItem = (item) => !!item.link;
-const NavItemContent = ({ primaryIcon, secondaryIcon, tertiaryIcon, tertiaryIconAriaLabel = "", onTertiaryIconClick, isBeta, counter, collapsed, hasSubmenu, iconClass, level = 1, children }) => {
+const NavItemContent = ({ primaryIcon, secondaryIcon, isBeta, counter, collapsed, hasSubmenu, iconClass, level = 1, children }) => {
     const primaryIconRef = useRef(null);
     const PrimaryIconComponent = typeof primaryIcon === "function" ? primaryIcon : null;
     const SecondaryIconComponent = secondaryIcon;
-    const TertiaryIconComponent = tertiaryIcon;
     const iconSize = level > 1 ? SUBMENU_ICON_SIZE : ICON_SIZE;
     const primaryIconComponent = primaryIcon ? (_jsx("span", { ref: primaryIconRef, className: classNames(["zen-nav-item__icon", counter ? "zen-nav-item__icon--with-counter" : "", iconClass || ""]), children: PrimaryIconComponent ? _jsx(PrimaryIconComponent, { size: iconSize }) : primaryIcon })) : null;
-    const handleTertiaryIconClick = (e) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "zen-nav-item__content-left", children: [isBeta && !collapsed ? (_jsx("span", { className: "zen-nav-item__beta", children: _jsx(IconBeta, { size: "big" }) })) : null, primaryIconComponent, SecondaryIconComponent && !collapsed ? (_jsx("span", { className: "zen-nav-item__icon", children: _jsx(SecondaryIconComponent, { size: iconSize }) })) : null, !collapsed ? _jsx("span", { className: "zen-nav-item__title", children: children }) : null] }), !collapsed && (counter || hasSubmenu) ? (_jsxs("div", { className: "zen-nav-item__content-right", children: [counter ? _jsx("div", { className: "zen-nav-item__counter", children: counter }) : null, hasSubmenu ? _jsx(IconChevronRight, { className: "zen-nav-item__title-icon", size: iconSize }) : null] })) : null] }));
+};
+const NavItemAction = ({ actionIcon, actionIconTitle = "", onActionIconClick, collapsed, level = 1 }) => {
+    const ActionIconComponent = actionIcon;
+    const iconSize = level > 1 ? SUBMENU_ICON_SIZE : ICON_SIZE;
+    if (!ActionIconComponent || collapsed) {
+        return null;
+    }
+    const handleActionIconClick = (e) => {
         e.stopPropagation();
-        onTertiaryIconClick === null || onTertiaryIconClick === void 0 ? void 0 : onTertiaryIconClick(e);
+        onActionIconClick === null || onActionIconClick === void 0 ? void 0 : onActionIconClick(e);
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "zen-nav-item__content-left", children: [isBeta && !collapsed ? (_jsx("span", { className: "zen-nav-item__beta", children: _jsx(IconBeta, { size: "big" }) })) : null, primaryIconComponent, SecondaryIconComponent && !collapsed ? (_jsx("span", { className: "zen-nav-item__icon", children: _jsx(SecondaryIconComponent, { size: iconSize }) })) : null, !collapsed ? _jsx("span", { className: "zen-nav-item__title", children: children }) : null] }), !collapsed && (counter || hasSubmenu || TertiaryIconComponent) ? (_jsxs("div", { className: "zen-nav-item__content-right", children: [counter ? _jsx("div", { className: "zen-nav-item__counter", children: counter }) : null, TertiaryIconComponent && !hasSubmenu ? (_jsx("button", { type: "button", className: "zen-nav-item__tertiary-icon-button", onClick: handleTertiaryIconClick, "aria-label": tertiaryIconAriaLabel, children: _jsx(TertiaryIconComponent, { size: iconSize }) })) : null, hasSubmenu ? _jsx(IconChevronRight, { className: "zen-nav-item__title-icon", size: iconSize }) : null] })) : null] }));
+    return (_jsx("button", { type: "button", className: "zen-nav-item__action", onClick: handleActionIconClick, "aria-label": actionIconTitle, title: actionIconTitle, children: _jsx(ActionIconComponent, { size: iconSize }) }));
 };
+const getWrapperClassName = ({ className, collapsed, active, isMobile, hasNested, isNested, isLink }) => classNames([
+    "zen-nav-item",
+    isLink ? "zen-nav-item--link" : "zen-nav-item--button",
+    isMobile ? "zen-nav-item--mobile" : "",
+    collapsed ? "zen-nav-item--collapsed" : "",
+    active ? "zen-nav-item--active" : "",
+    hasNested ? "zen-nav-item--has-nested" : "",
+    isNested ? "zen-nav-item--nested" : "",
+    className || ""
+]);
 const LinkNavItem = (_a) => {
-    var { className, title, collapsed, active, link, isExternalLink, tabIndex, isMenuItem = true, tooltipAlignment = defaultTooltipAlignment } = _a, rest = __rest(_a, ["className", "title", "collapsed", "active", "link", "isExternalLink", "tabIndex", "isMenuItem", "tooltipAlignment"]);
+    var { className, title, collapsed, active, link, isExternalLink, tabIndex, isMenuItem = true, tooltipAlignment = defaultTooltipAlignment, actionIcon, actionIconTitle, onActionIconClick } = _a, rest = __rest(_a, ["className", "title", "collapsed", "active", "link", "isExternalLink", "tabIndex", "isMenuItem", "tooltipAlignment", "actionIcon", "actionIconTitle", "onActionIconClick"]);
     const isMobile = useMobile();
     const { parentLevel = 0, closeParentMenu } = useContext(NavItemContext);
     const { onNavigate } = useNavContext();
-    const item = (_jsx("a", { href: link, "aria-label": title, title: title, target: isExternalLink ? "_blank" : undefined, rel: isExternalLink ? "noopener noreferrer" : undefined, tabIndex: tabIndex, role: isMenuItem ? "menuitem" : undefined, onClick: () => {
+    const currentLevel = parentLevel + 1;
+    const linkElement = (_jsx("a", { href: link, "aria-label": title, title: title, target: isExternalLink ? "_blank" : undefined, rel: isExternalLink ? "noopener noreferrer" : undefined, tabIndex: tabIndex, role: isMenuItem ? "menuitem" : undefined, onClick: () => {
             closeParentMenu && closeParentMenu();
             onNavigate && onNavigate();
-        }, className: classNames([
-            "zen-link--light",
-            "zen-nav-item",
-            "zen-nav-item--link",
-            isMobile ? "zen-nav-item--mobile" : "",
-            collapsed ? "zen-nav-item--collapsed" : "",
-            active ? "zen-nav-item--active" : "",
-            className || ""
-        ]), children: _jsxs(NavItemContent, Object.assign({ title: title, collapsed: collapsed, level: parentLevel + 1 }, rest, { children: [_jsx("span", { className: "zen-nav-item__title-text", children: title }), isExternalLink && !collapsed ? _jsx(IconOpen2, { className: "zen-nav-item__title-icon", size: ICON_SIZE }) : null] })) }));
-    return collapsed ? (_jsx(Tooltip, { trigger: item, alignment: tooltipAlignment, children: title })) : (item);
+        }, className: "zen-link--light zen-nav-item__main", children: _jsxs(NavItemContent, Object.assign({ title: title, collapsed: collapsed, level: currentLevel }, rest, { children: [_jsx("span", { className: "zen-nav-item__title-text", children: title }), isExternalLink && !collapsed ? _jsx(IconOpen2, { className: "zen-nav-item__title-icon", size: ICON_SIZE }) : null] })) }));
+    const item = collapsed ? (_jsx(Tooltip, { trigger: linkElement, alignment: tooltipAlignment, children: title })) : (linkElement);
+    return (_jsxs("div", { className: getWrapperClassName({ className, collapsed, active, isMobile, isLink: true }), children: [item, _jsx(NavItemAction, { actionIcon: actionIcon, actionIconTitle: actionIconTitle, onActionIconClick: onActionIconClick, collapsed: collapsed, level: currentLevel })] }));
 };
 LinkNavItem.displayName = "LinkNavItem";
 const ButtonNavItem = (_a) => {
-    var { className, title, onClick, collapsed, active, children, tabIndex, menuAlignment = "right-top", isMenuItem = true, tooltipAlignment = defaultTooltipAlignment } = _a, rest = __rest(_a, ["className", "title", "onClick", "collapsed", "active", "children", "tabIndex", "menuAlignment", "isMenuItem", "tooltipAlignment"]);
+    var { className, title, onClick, collapsed, active, children, tabIndex, menuAlignment = "right-top", isMenuItem = true, tooltipAlignment = defaultTooltipAlignment, actionIcon, actionIconTitle, onActionIconClick } = _a, rest = __rest(_a, ["className", "title", "onClick", "collapsed", "active", "children", "tabIndex", "menuAlignment", "isMenuItem", "tooltipAlignment", "actionIcon", "actionIconTitle", "onActionIconClick"]);
     const [menuOpen, setMenuOpen] = useState(false);
     const { parentLevel = 0, closeParentMenu } = useContext(NavItemContext);
     const triggerRef = useRef(null);
+    const currentLevel = parentLevel + 1;
     const validChildren = Children.toArray(children).filter(child => {
         const element = child;
         return element.type && element.type.displayName === "NavItem";
@@ -84,20 +96,11 @@ const ButtonNavItem = (_a) => {
         }
     };
     const isMobile = useMobile();
-    const buttonElement = (_jsx("button", { ref: triggerRef, "aria-label": title, title: title, tabIndex: tabIndex, role: isMenuItem ? "menuitem" : undefined, className: classNames([
-            "zen-nav-item",
-            "zen-nav-item--button",
-            isMobile ? "zen-nav-item--mobile" : "",
-            collapsed ? "zen-nav-item--collapsed" : "",
-            active ? "zen-nav-item--active" : "",
-            hasNestedItems ? "zen-nav-item--has-nested" : "",
-            hasNestedItems && menuOpen ? "zen-nav-item--active" : "",
-            className || ""
-        ]), onClick: handleClick, onKeyDown: handleKeyPress, children: _jsx(NavItemContent, Object.assign({ title: title, collapsed: collapsed, hasSubmenu: hasNestedItems, level: parentLevel + 1 }, rest, { children: _jsx("span", { className: "zen-nav-item__title-text", children: title }) })) }));
+    const isActive = active || (hasNestedItems && menuOpen);
+    const buttonElement = (_jsx("button", { ref: triggerRef, "aria-label": title, title: title, tabIndex: tabIndex, role: isMenuItem ? "menuitem" : undefined, className: "zen-nav-item__main", onClick: handleClick, onKeyDown: handleKeyPress, children: _jsx(NavItemContent, Object.assign({ title: title, collapsed: collapsed, hasSubmenu: hasNestedItems, level: currentLevel }, rest, { children: _jsx("span", { className: "zen-nav-item__title-text", children: title }) })) }));
     const trigger = collapsed ? (_jsx(Tooltip, { trigger: buttonElement, alignment: tooltipAlignment, children: title })) : (buttonElement);
     if (hasNestedItems) {
         // Process children to add appropriate level classes while allowing unlimited nesting
-        const currentLevel = parentLevel + 1;
         const childLevel = currentLevel + 1;
         const processedChildren = validChildren.map(child => {
             const childElement = child;
@@ -115,9 +118,9 @@ const ButtonNavItem = (_a) => {
             setMenuOpen(false);
             closeParentMenu && closeParentMenu();
         };
-        return (_jsxs(_Fragment, { children: [trigger, _jsx(NavItemContext, { value: { parentLevel: currentLevel, closeParentMenu: closeLevelMenu }, children: _jsx(ControlledMenu, { triggerRef: triggerRef, isOpen: menuOpen, setIsOpen: setMenuOpen, title: title, alignment: menuAlignment, className: classNames([popupClass, isMobile ? popupClassMobile : ""]), listClassName: classNames([popupListClass, isMobile ? popupListClassMobile : ""]), children: processedChildren }) })] }));
+        return (_jsxs("div", { className: getWrapperClassName({ className, collapsed, active: isActive, isMobile, hasNested: hasNestedItems }), children: [trigger, _jsx(NavItemContext, { value: { parentLevel: currentLevel, closeParentMenu: closeLevelMenu }, children: _jsx(ControlledMenu, { triggerRef: triggerRef, isOpen: menuOpen, setIsOpen: setMenuOpen, title: title, alignment: menuAlignment, className: classNames([popupClass, isMobile ? popupClassMobile : ""]), listClassName: classNames([popupListClass, isMobile ? popupListClassMobile : ""]), children: processedChildren }) })] }));
     }
-    return trigger;
+    return (_jsxs("div", { className: getWrapperClassName({ className, collapsed, active: isActive, isMobile, hasNested: hasNestedItems }), children: [trigger, _jsx(NavItemAction, { actionIcon: actionIcon, actionIconTitle: actionIconTitle, onActionIconClick: onActionIconClick, collapsed: collapsed, level: currentLevel })] }));
 };
 ButtonNavItem.displayName = "ButtonNavItem";
 /**
@@ -126,7 +129,6 @@ ButtonNavItem.displayName = "ButtonNavItem";
 export const NavItem = (props) => {
     const isLink = isLinkNavItem(props);
     const { collapsed } = useNavContext();
-    return isLink ? (_jsx(LinkNavItem, Object.assign({ collapsed: collapsed }, props)) // Allow to override collapsed prop from context
-    ) : (_jsx(ButtonNavItem, Object.assign({ collapsed: collapsed }, props)));
+    return isLink ? (_jsx(LinkNavItem, Object.assign({ collapsed: collapsed }, props))) : (_jsx(ButtonNavItem, Object.assign({ collapsed: collapsed }, props)));
 };
 NavItem.displayName = "NavItem";

package/esm/nav/navMobileBar/navMobileBar.js

@@ -1,3 +1,4 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, cloneElement } from "react";
 import { classNames } from "../../commonHelpers/classNames/classNames";
@@ -9,23 +10,63 @@ import { generateId } from "../../commonHelpers/generateId";
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
-export const NavMobileBar = ({ className, children, isMenuOpen, onMenuToggle }) => {
-    const { translate } = useLanguage();
-    const mobileBarClassNames = classNames([
-        "zen-nav-mobile-bar",
-        className !== null && className !== void 0 ? className : ""
-    ]);
-    const items = Children.toArray(children).filter(child => {
-        const element = child;
-        return element.type && element.type.displayName === "NavItem";
-    }).map(child => {
-        const element = child;
-        const existingClassName = element.props.className || "";
-        const key = generateId();
-        return cloneElement(element, Object.assign(Object.assign({}, element.props), { key, collapsed: true, className: classNames([
-                existingClassName,
-                "zen-nav-item--mobile-bar"
-            ]), tooltipAlignment: "top" }));
-    });
-    return _jsxs("div", { className: mobileBarClassNames, children: [items, _jsx(NavItem, { className: "zen-nav-item--mobile-bar", title: translate("More"), primaryIcon: isMenuOpen ? IconClose : IconMenu, collapsed: true, onClick: onMenuToggle, tooltipAlignment: "top" }, "nav-mobile-bar-more-button")] });
-};
+injectString("cs", "More", "V\xEDce");
+injectString("da-DK", "More", "Mere");
+injectString("de", "More", "Mehr");
+injectString("en", "More", "More");
+injectString("es", "More", "M\xE1s");
+injectString("fi-FI", "More", "Lis\xE4\xE4");
+injectString("fr", "More", "Plus");
+injectString("fr-FR", "More", "En savoir plus");
+injectString("hu-HU", "More", "M\xE9g t\xF6bb.");
+injectString("id", "More", "Lainnya");
+injectString("it", "More", "Altro");
+injectString("ja", "More", "\u305D\u306E\u4ED6");
+injectString("ko-KR", "More", "\uC790\uC138\uD788");
+injectString("ms", "More", "Lagi");
+injectString("nb-NO", "More", "Mer");
+injectString("nl", "More", "Meer");
+injectString("pl", "More", "Wi\u0119cej");
+injectString("pt-BR", "More", "Mais");
+injectString("sk-SK", "More", "Viac");
+injectString("sv", "More", "Mer");
+injectString("th", "More", "\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21");
+injectString("tr", "More", "Di\u011Fer");
+injectString("zh-Hans", "More", "\u66F4\u591A");
+injectString("zh-TW", "More", "\u66F4\u591A");
+export const NavMobileBar = ({
+  className,
+  children,
+  isMenuOpen,
+  onMenuToggle
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  const mobileBarClassNames = classNames(["zen-nav-mobile-bar", className !== null && className !== void 0 ? className : ""]);
+  const items = Children.toArray(children).filter(child => {
+    const element = child;
+    return element.type && element.type.displayName === "NavItem";
+  }).map(child => {
+    const element = child;
+    const existingClassName = element.props.className || "";
+    const key = generateId();
+    return cloneElement(element, Object.assign(Object.assign({}, element.props), {
+      key,
+      collapsed: true,
+      className: classNames([existingClassName, "zen-nav-item--mobile-bar"]),
+      tooltipAlignment: "top"
+    }));
+  });
+  return _jsxs("div", {
+    className: mobileBarClassNames,
+    children: [items, _jsx(NavItem, {
+      className: "zen-nav-item--mobile-bar",
+      title: translate("More"),
+      primaryIcon: isMenuOpen ? IconClose : IconMenu,
+      collapsed: true,
+      onClick: onMenuToggle,
+      tooltipAlignment: "top"
+    }, "nav-mobile-bar-more-button")]
+  });
+};

package/esm/notification/notification.js

@@ -1,3 +1,4 @@
+import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement, useCallback } from "react";
 import PushNotification from "./pushNotification/pushNotification";
@@ -10,22 +11,117 @@ import { IconHexonalWarning } from "../icons/iconHexonalWarning";
 import { IconCheckRadio } from "../icons/iconCheckRadio";
 import { IconDiamondWarning } from "../icons/iconDiamondWarning";
 import { useLanguage } from "../utils/localization/useLanguage";
-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;
-            case "success": return IconCheckRadio;
-            case "warning": return IconDiamondWarning;
-            case "info":
-            default: return IconInfoCircle;
-        }
-    }, []);
-    const { translate } = useLanguage();
-    return _jsx(PushNotification, { isOpen: isOpen, children: _jsxs("div", { ref: ref, className: `zen-push zen-push--${type || "info"} ${className || ""}`, id: id, children: [_jsxs("div", { className: "zen-push__content", children: [_jsxs("div", { className: "zen-push__header", children: [_jsx("div", { className: "zen-push__icon", children: createElement(getIcon(type || "info"), {
-                                        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, {}) }) })] }) });
+injectString("cs", "Close", "Zav\u0159\xEDt");
+injectString("da-DK", "Close", "Luk");
+injectString("de", "Close", "Schlie\xDFen");
+injectString("en", "Close", "Close");
+injectString("es", "Close", "Cerrar");
+injectString("fi-FI", "Close", "Sulje");
+injectString("fr", "Close", "Fermer");
+injectString("fr-FR", "Close", "Fermer");
+injectString("hu-HU", "Close", "Z\xE1rd be.");
+injectString("id", "Close", "Tutup");
+injectString("it", "Close", "Chiudere");
+injectString("ja", "Close", "\u9589\u3058\u308B");
+injectString("ko-KR", "Close", "\uB2EB\uAE30");
+injectString("ms", "Close", "Tutup");
+injectString("nb-NO", "Close", "Lukk");
+injectString("nl", "Close", "Sluiten");
+injectString("pl", "Close", "Zamknij");
+injectString("pt-BR", "Close", "Fechar");
+injectString("sk-SK", "Close", "Zatvor");
+injectString("sv", "Close", "St\xE4ng");
+injectString("th", "Close", "\u0E1B\u0E34\u0E14");
+injectString("tr", "Close", "Kapat");
+injectString("zh-Hans", "Close", "\u5173\u95ED");
+injectString("zh-TW", "Close", "\u95DC\u9589");
+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;
+      case "success":
+        return IconCheckRadio;
+      case "warning":
+        return IconDiamondWarning;
+      case "info":
+      default:
+        return IconInfoCircle;
+    }
+  }, []);
+  const {
+    translate
+  } = useLanguage();
+  return _jsx(PushNotification, {
+    isOpen: isOpen,
+    children: _jsxs("div", {
+      ref: ref,
+      className: `zen-push zen-push--${type || "info"} ${className || ""}`,
+      id: id,
+      children: [_jsxs("div", {
+        className: "zen-push__content",
+        children: [_jsxs("div", {
+          className: "zen-push__header",
+          children: [_jsx("div", {
+            className: "zen-push__icon",
+            children: createElement(getIcon(type || "info"), {
+              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"
-];
+export const TRANSLATIONS = ["Close"];