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

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

@@ -1,24 +1,63 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.NavFooterAction = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+injectString("cs", "Configure", "Konfigurovat");
+injectString("da-DK", "Configure", "Konfigur\xE9r");
+injectString("de", "Configure", "Konfigurieren");
+injectString("en", "Configure", "Configure");
+injectString("es", "Configure", "Configurar");
+injectString("fi-FI", "Configure", "Konfiguroida");
+injectString("fr", "Configure", "Configurer");
+injectString("fr-FR", "Configure", "Configurer");
+injectString("hu-HU", "Configure", "Konfigur\xE1l\xE1s");
+injectString("id", "Configure", "Konfigurasi");
+injectString("it", "Configure", "Configurare");
+injectString("ja", "Configure", "\u8A2D\u5B9A");
+injectString("ko-KR", "Configure", "\uAD6C\uC131");
+injectString("ms", "Configure", "Konfigurasi");
+injectString("nb-NO", "Configure", "Konfigurer");
+injectString("nl", "Configure", "Configureren");
+injectString("pl", "Configure", "Konfiguruj");
+injectString("pt-BR", "Configure", "Configurar");
+injectString("sk-SK", "Configure", "Konfigurova\u0165");
+injectString("sv", "Configure", "Konfigurera");
+injectString("th", "Configure", "\u0E01\u0E33\u0E2B\u0E19\u0E14\u0E04\u0E48\u0E32");
+injectString("tr", "Configure", "Yap\u0131land\u0131r");
+injectString("zh-Hans", "Configure", "\u914D\u7F6E");
+injectString("zh-TW", "Configure", "\u914D\u7F6E");
 const useLanguage_1 = require("../../../utils/localization/useLanguage");
 const navItem_1 = require("../../navItem/navItem");
 const iconSettings4_1 = require("../../../icons/iconSettings4");
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
-const NavFooterAction = ({ children }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const itemsArray = children ? (Array.isArray(children) ? children : [children]) : [];
-    const filteredItems = itemsArray.filter(child => {
-        const element = child;
-        return element.type && element.type.displayName === "NavItem";
-    });
-    if (!filteredItems.length) {
-        return null;
-    }
-    return (0, jsx_runtime_1.jsx)(navItem_1.NavItem, { primaryIcon: iconSettings4_1.IconSettings4, title: translate("Configure"), menuAlignment: "right-bottom", children: filteredItems });
+const NavFooterAction = ({
+  children
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const itemsArray = children ? Array.isArray(children) ? children : [children] : [];
+  const filteredItems = itemsArray.filter(child => {
+    const element = child;
+    return element.type && element.type.displayName === "NavItem";
+  });
+  if (!filteredItems.length) {
+    return null;
+  }
+  return (0, jsx_runtime_1.jsx)(navItem_1.NavItem, {
+    primaryIcon: iconSettings4_1.IconSettings4,
+    title: translate("Configure"),
+    menuAlignment: "right-bottom",
+    children: filteredItems
+  });
 };
 exports.NavFooterAction = NavFooterAction;
-exports.NavFooterAction.displayName = "NavFooterAction";
+exports.NavFooterAction.displayName = "NavFooterAction";

package/dist/nav/navHeader/navHeader.js

@@ -1,7 +1,15 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.NavHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+injectString("en", "Expand Navigation", "Expand Navigation");
+injectString("en", "Collapse Navigation", "Collapse Navigation");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const react_1 = require("react");
 const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
@@ -12,33 +20,75 @@ const navItem_1 = require("../navItem/navItem");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
 const navAddMenu_1 = require("../navAddMenu/navAddMenu");
 const iconMenu_1 = require("../../icons/iconMenu");
-const NavHeaderToggler = ({ className }) => {
-    const { collapsed, onCollapseToggle } = (0, nav_context_1.useNavContext)();
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const isMobile = (0, useMobile_1.useMobile)();
-    const title = collapsed ? translate("Expand Navigation") : translate("Collapse Navigation");
-    return isMobile
-        ? null
-        : (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-nav-header__toggler", className || ""]), children: (0, jsx_runtime_1.jsx)(navItem_1.NavItem, { className: "zen-nav-header__button", title: title, primaryIcon: iconMenu_1.IconMenu, collapsed: true, isMenuItem: false, onClick: () => onCollapseToggle && onCollapseToggle(!collapsed), tooltipAlignment: collapsed ? "right" : "bottom" }, "collapse-button") });
+const NavHeaderToggler = ({
+  className
+}) => {
+  const {
+    collapsed,
+    onCollapseToggle
+  } = (0, nav_context_1.useNavContext)();
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const isMobile = (0, useMobile_1.useMobile)();
+  const title = collapsed ? translate("Expand Navigation") : translate("Collapse Navigation");
+  return isMobile ? null : (0, jsx_runtime_1.jsx)("div", {
+    className: (0, classNames_1.classNames)(["zen-nav-header__toggler", className || ""]),
+    children: (0, jsx_runtime_1.jsx)(navItem_1.NavItem, {
+      className: "zen-nav-header__button",
+      title: title,
+      primaryIcon: iconMenu_1.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 } = (0, nav_context_1.useNavContext)();
-    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", { className: "zen-nav-header__logo-image", src: logo, alt: imgTitle }) : logo;
-    const logoCollapsedElement = isCollapsedLogoImageString ? (0, jsx_runtime_1.jsx)("img", { className: "zen-nav-header__logo-image", src: collapsedLogo, alt: imgTitle }) : collapsedLogo;
-    const logoImage = collapsed && collapsedLogo ? logoCollapsedElement : logoElement;
-    const logoToRender = logoImage && logoLink ? (0, jsx_runtime_1.jsx)("a", { href: logoLink, className: "zen-nav-header__logo-link", children: logoImage }) : logoImage;
-    const navChildren = react_1.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 (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-nav-header", collapsed ? "zen-nav-header--collapsed" : "", searchOpen ? "zen-nav-header--mode-search" : "", className || ""]), children: [collapsed ? null : (0, jsx_runtime_1.jsx)(NavHeaderToggler, {}), searchOpen ? null : logoToRender, (0, jsx_runtime_1.jsxs)("div", { className: "zen-nav-header__controls", children: [collapsed ? (0, jsx_runtime_1.jsx)(NavHeaderToggler, {}) : null, navChildren] })] });
+const NavHeaderComponent = ({
+  className,
+  logo,
+  logoLink,
+  imgTitle,
+  collapsedLogo,
+  children
+}) => {
+  const {
+    collapsed,
+    searchOpen
+  } = (0, nav_context_1.useNavContext)();
+  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", {
+    className: "zen-nav-header__logo-image",
+    src: logo,
+    alt: imgTitle
+  }) : logo;
+  const logoCollapsedElement = isCollapsedLogoImageString ? (0, jsx_runtime_1.jsx)("img", {
+    className: "zen-nav-header__logo-image",
+    src: collapsedLogo,
+    alt: imgTitle
+  }) : collapsedLogo;
+  const logoImage = collapsed && collapsedLogo ? logoCollapsedElement : logoElement;
+  const logoToRender = logoImage && logoLink ? (0, jsx_runtime_1.jsx)("a", {
+    href: logoLink,
+    className: "zen-nav-header__logo-link",
+    children: logoImage
+  }) : logoImage;
+  const navChildren = react_1.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 (0, jsx_runtime_1.jsxs)("div", {
+    className: (0, classNames_1.classNames)(["zen-nav-header", collapsed ? "zen-nav-header--collapsed" : "", searchOpen ? "zen-nav-header--mode-search" : "", className || ""]),
+    children: [collapsed ? null : (0, jsx_runtime_1.jsx)(NavHeaderToggler, {}), searchOpen ? null : logoToRender, (0, jsx_runtime_1.jsxs)("div", {
+      className: "zen-nav-header__controls",
+      children: [collapsed ? (0, jsx_runtime_1.jsx)(NavHeaderToggler, {}) : null, navChildren]
+    })]
+  });
 };
 /**
  * @deprecated Use NavAddMenu instead. This component is left for backward compatibility and will be removed in future releases.
@@ -54,14 +104,14 @@ NavHeaderAction.displayName = "NavItem";
  * @beta This component is not fully ready yet and may change in future releases.
  */
 exports.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_1.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_1.NavHeaderSearch
 });
-exports.NavHeader.displayName = "NavHeader";
+exports.NavHeader.displayName = "NavHeader";

package/dist/nav/navHeader/navHeaderSearch/navHeaderSearch.js

@@ -1,5 +1,11 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.NavHeaderSearch = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -10,34 +16,87 @@ const useDebounce_1 = require("../../../commonHelpers/hooks/useDebounce");
 const classNames_1 = require("../../../commonHelpers/classNames/classNames");
 const iconSearch_1 = require("../../../icons/iconSearch");
 const searchInput_1 = require("../../../searchInput/searchInput");
+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");
 const navItem_1 = require("../../navItem/navItem");
-const NavHeaderSearch = ({ className, onSearch }) => {
-    const isMobile = (0, useMobile_1.useMobile)();
-    const { searchOpen, onSearchToggle, searchTerm = "", onSearch: contextOnSearch, collapsed } = (0, nav_context_1.useNavContext)();
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const onSearchCallback = (0, react_1.useCallback)((term) => {
-        onSearch === null || onSearch === void 0 ? void 0 : onSearch(term);
-    }, [onSearch]);
-    const debouncedSearch = (0, useDebounce_1.useDebounce)(onSearchCallback);
-    const handleChange = (0, react_1.useCallback)((term) => {
-        contextOnSearch === null || contextOnSearch === void 0 ? void 0 : contextOnSearch(term);
-        debouncedSearch(term);
-    }, [debouncedSearch, contextOnSearch]);
-    const handleBlur = (0, react_1.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 = (0, react_1.useCallback)((event) => {
-        if (event.key === "Escape") {
-            handleChange("");
-            onSearchToggle === null || onSearchToggle === void 0 ? void 0 : onSearchToggle(false);
-        }
-    }, [handleChange, onSearchToggle]);
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-nav-header-search", className || ""]), children: [!searchOpen && !isMobile
-                ? (0, jsx_runtime_1.jsx)(navItem_1.NavItem, { title: translate("Search"), className: "zen-nav-header-search__button", primaryIcon: iconSearch_1.IconSearch, collapsed: true, isMenuItem: false, onClick: () => onSearchToggle === null || onSearchToggle === void 0 ? void 0 : onSearchToggle(true), tooltipAlignment: collapsed ? "right" : "bottom" })
-                : null, searchOpen || isMobile ? (0, jsx_runtime_1.jsx)(searchInput_1.SearchInput, { autoFocus: true, ariaLabel: translate("Search"), value: searchTerm, placeholder: translate("Search"), className: "zen-nav-header-search__input", onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown }) : null] });
+const NavHeaderSearch = ({
+  className,
+  onSearch
+}) => {
+  const isMobile = (0, useMobile_1.useMobile)();
+  const {
+    searchOpen,
+    onSearchToggle,
+    searchTerm = "",
+    onSearch: contextOnSearch,
+    collapsed
+  } = (0, nav_context_1.useNavContext)();
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const onSearchCallback = (0, react_1.useCallback)(term => {
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(term);
+  }, [onSearch]);
+  const debouncedSearch = (0, useDebounce_1.useDebounce)(onSearchCallback);
+  const handleChange = (0, react_1.useCallback)(term => {
+    contextOnSearch === null || contextOnSearch === void 0 ? void 0 : contextOnSearch(term);
+    debouncedSearch(term);
+  }, [debouncedSearch, contextOnSearch]);
+  const handleBlur = (0, react_1.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 = (0, react_1.useCallback)(event => {
+    if (event.key === "Escape") {
+      handleChange("");
+      onSearchToggle === null || onSearchToggle === void 0 ? void 0 : onSearchToggle(false);
+    }
+  }, [handleChange, onSearchToggle]);
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: (0, classNames_1.classNames)(["zen-nav-header-search", className || ""]),
+    children: [!searchOpen && !isMobile ? (0, jsx_runtime_1.jsx)(navItem_1.NavItem, {
+      title: translate("Search"),
+      className: "zen-nav-header-search__button",
+      primaryIcon: iconSearch_1.IconSearch,
+      collapsed: true,
+      isMenuItem: false,
+      onClick: () => onSearchToggle === null || onSearchToggle === void 0 ? void 0 : onSearchToggle(true),
+      tooltipAlignment: collapsed ? "right" : "bottom"
+    }) : null, searchOpen || isMobile ? (0, jsx_runtime_1.jsx)(searchInput_1.SearchInput, {
+      autoFocus: true,
+      ariaLabel: translate("Search"),
+      value: searchTerm,
+      placeholder: translate("Search"),
+      className: "zen-nav-header-search__input",
+      onChange: handleChange,
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown
+    }) : null]
+  });
 };
 exports.NavHeaderSearch = NavHeaderSearch;
-exports.NavHeaderSearch.displayName = "NavHeaderSearch";
+exports.NavHeaderSearch.displayName = "NavHeaderSearch";

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

@@ -27,44 +27,56 @@ const SUBMENU_ICON_SIZE = "large";
 exports.NavItemContext = (0, react_1.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 = (0, react_1.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 ? ((0, jsx_runtime_1.jsx)("span", { ref: primaryIconRef, className: (0, classNames_1.classNames)(["zen-nav-item__icon", counter ? "zen-nav-item__icon--with-counter" : "", iconClass || ""]), children: PrimaryIconComponent ? (0, jsx_runtime_1.jsx)(PrimaryIconComponent, { size: iconSize }) : primaryIcon })) : null;
-    const handleTertiaryIconClick = (e) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-nav-item__content-left", children: [isBeta && !collapsed ? ((0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__beta", children: (0, jsx_runtime_1.jsx)(iconBeta_1.IconBeta, { size: "big" }) })) : null, primaryIconComponent, SecondaryIconComponent && !collapsed ? ((0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__icon", children: (0, jsx_runtime_1.jsx)(SecondaryIconComponent, { size: iconSize }) })) : null, !collapsed ? (0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__title", children: children }) : null] }), !collapsed && (counter || hasSubmenu) ? ((0, jsx_runtime_1.jsxs)("div", { className: "zen-nav-item__content-right", children: [counter ? (0, jsx_runtime_1.jsx)("div", { className: "zen-nav-item__counter", children: counter }) : null, hasSubmenu ? (0, jsx_runtime_1.jsx)(iconChevronRight_1.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-nav-item__content-left", children: [isBeta && !collapsed ? ((0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__beta", children: (0, jsx_runtime_1.jsx)(iconBeta_1.IconBeta, { size: "big" }) })) : null, primaryIconComponent, SecondaryIconComponent && !collapsed ? ((0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__icon", children: (0, jsx_runtime_1.jsx)(SecondaryIconComponent, { size: iconSize }) })) : null, !collapsed ? (0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__title", children: children }) : null] }), !collapsed && (counter || hasSubmenu || TertiaryIconComponent) ? ((0, jsx_runtime_1.jsxs)("div", { className: "zen-nav-item__content-right", children: [counter ? (0, jsx_runtime_1.jsx)("div", { className: "zen-nav-item__counter", children: counter }) : null, TertiaryIconComponent && !hasSubmenu ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-nav-item__tertiary-icon-button", onClick: handleTertiaryIconClick, "aria-label": tertiaryIconAriaLabel, children: (0, jsx_runtime_1.jsx)(TertiaryIconComponent, { size: iconSize }) })) : null, hasSubmenu ? (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, { className: "zen-nav-item__title-icon", size: iconSize }) : null] })) : null] }));
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-nav-item__action", onClick: handleActionIconClick, "aria-label": actionIconTitle, title: actionIconTitle, children: (0, jsx_runtime_1.jsx)(ActionIconComponent, { size: iconSize }) }));
 };
+const getWrapperClassName = ({ className, collapsed, active, isMobile, hasNested, isNested, isLink }) => (0, classNames_1.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 = (0, useMobile_1.useMobile)();
     const { parentLevel = 0, closeParentMenu } = (0, react_1.useContext)(exports.NavItemContext);
     const { onNavigate } = (0, nav_context_1.useNavContext)();
-    const item = ((0, jsx_runtime_1.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 = ((0, jsx_runtime_1.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: (0, classNames_1.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: (0, jsx_runtime_1.jsxs)(NavItemContent, Object.assign({ title: title, collapsed: collapsed, level: parentLevel + 1 }, rest, { children: [(0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__title-text", children: title }), isExternalLink && !collapsed ? (0, jsx_runtime_1.jsx)(iconOpen2_1.IconOpen2, { className: "zen-nav-item__title-icon", size: ICON_SIZE }) : null] })) }));
-    return collapsed ? ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { trigger: item, alignment: tooltipAlignment, children: title })) : (item);
+        }, className: "zen-link--light zen-nav-item__main", children: (0, jsx_runtime_1.jsxs)(NavItemContent, Object.assign({ title: title, collapsed: collapsed, level: currentLevel }, rest, { children: [(0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__title-text", children: title }), isExternalLink && !collapsed ? (0, jsx_runtime_1.jsx)(iconOpen2_1.IconOpen2, { className: "zen-nav-item__title-icon", size: ICON_SIZE }) : null] })) }));
+    const item = collapsed ? ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { trigger: linkElement, alignment: tooltipAlignment, children: title })) : (linkElement);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: getWrapperClassName({ className, collapsed, active, isMobile, isLink: true }), children: [item, (0, jsx_runtime_1.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] = (0, react_1.useState)(false);
     const { parentLevel = 0, closeParentMenu } = (0, react_1.useContext)(exports.NavItemContext);
     const triggerRef = (0, react_1.useRef)(null);
+    const currentLevel = parentLevel + 1;
     const validChildren = react_1.Children.toArray(children).filter(child => {
         const element = child;
         return element.type && element.type.displayName === "NavItem";
@@ -87,20 +99,11 @@ const ButtonNavItem = (_a) => {
         }
     };
     const isMobile = (0, useMobile_1.useMobile)();
-    const buttonElement = ((0, jsx_runtime_1.jsx)("button", { ref: triggerRef, "aria-label": title, title: title, tabIndex: tabIndex, role: isMenuItem ? "menuitem" : undefined, className: (0, classNames_1.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: (0, jsx_runtime_1.jsx)(NavItemContent, Object.assign({ title: title, collapsed: collapsed, hasSubmenu: hasNestedItems, level: parentLevel + 1 }, rest, { children: (0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__title-text", children: title }) })) }));
+    const isActive = active || (hasNestedItems && menuOpen);
+    const buttonElement = ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(NavItemContent, Object.assign({ title: title, collapsed: collapsed, hasSubmenu: hasNestedItems, level: currentLevel }, rest, { children: (0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__title-text", children: title }) })) }));
     const trigger = collapsed ? ((0, jsx_runtime_1.jsx)(tooltip_1.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;
@@ -118,9 +121,9 @@ const ButtonNavItem = (_a) => {
             setMenuOpen(false);
             closeParentMenu && closeParentMenu();
         };
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [trigger, (0, jsx_runtime_1.jsx)(exports.NavItemContext, { value: { parentLevel: currentLevel, closeParentMenu: closeLevelMenu }, children: (0, jsx_runtime_1.jsx)(controlledMenu_1.ControlledMenu, { triggerRef: triggerRef, isOpen: menuOpen, setIsOpen: setMenuOpen, title: title, alignment: menuAlignment, className: (0, classNames_1.classNames)([popupClass, isMobile ? popupClassMobile : ""]), listClassName: (0, classNames_1.classNames)([popupListClass, isMobile ? popupListClassMobile : ""]), children: processedChildren }) })] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: getWrapperClassName({ className, collapsed, active: isActive, isMobile, hasNested: hasNestedItems }), children: [trigger, (0, jsx_runtime_1.jsx)(exports.NavItemContext, { value: { parentLevel: currentLevel, closeParentMenu: closeLevelMenu }, children: (0, jsx_runtime_1.jsx)(controlledMenu_1.ControlledMenu, { triggerRef: triggerRef, isOpen: menuOpen, setIsOpen: setMenuOpen, title: title, alignment: menuAlignment, className: (0, classNames_1.classNames)([popupClass, isMobile ? popupClassMobile : ""]), listClassName: (0, classNames_1.classNames)([popupListClass, isMobile ? popupListClassMobile : ""]), children: processedChildren }) })] }));
     }
-    return trigger;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: getWrapperClassName({ className, collapsed, active: isActive, isMobile, hasNested: hasNestedItems }), children: [trigger, (0, jsx_runtime_1.jsx)(NavItemAction, { actionIcon: actionIcon, actionIconTitle: actionIconTitle, onActionIconClick: onActionIconClick, collapsed: collapsed, level: currentLevel })] }));
 };
 ButtonNavItem.displayName = "ButtonNavItem";
 /**
@@ -129,8 +132,7 @@ ButtonNavItem.displayName = "ButtonNavItem";
 const NavItem = (props) => {
     const isLink = isLinkNavItem(props);
     const { collapsed } = (0, nav_context_1.useNavContext)();
-    return isLink ? ((0, jsx_runtime_1.jsx)(LinkNavItem, Object.assign({ collapsed: collapsed }, props)) // Allow to override collapsed prop from context
-    ) : ((0, jsx_runtime_1.jsx)(ButtonNavItem, Object.assign({ collapsed: collapsed }, props)));
+    return isLink ? ((0, jsx_runtime_1.jsx)(LinkNavItem, Object.assign({ collapsed: collapsed }, props))) : ((0, jsx_runtime_1.jsx)(ButtonNavItem, Object.assign({ collapsed: collapsed }, props)));
 };
 exports.NavItem = NavItem;
 exports.NavItem.displayName = "NavItem";

package/dist/nav/navMobileBar/navMobileBar.js

@@ -1,9 +1,39 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.NavMobileBar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
+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");
 const navItem_1 = require("../navItem/navItem");
 const iconMenu_1 = require("../../icons/iconMenu");
 const iconClose_1 = require("../../icons/iconClose");
@@ -12,24 +42,40 @@ const generateId_1 = require("../../commonHelpers/generateId");
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
-const NavMobileBar = ({ className, children, isMenuOpen, onMenuToggle }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const mobileBarClassNames = (0, classNames_1.classNames)([
-        "zen-nav-mobile-bar",
-        className !== null && className !== void 0 ? className : ""
-    ]);
-    const items = react_1.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 = (0, generateId_1.generateId)();
-        return (0, react_1.cloneElement)(element, Object.assign(Object.assign({}, element.props), { key, collapsed: true, className: (0, classNames_1.classNames)([
-                existingClassName,
-                "zen-nav-item--mobile-bar"
-            ]), tooltipAlignment: "top" }));
-    });
-    return (0, jsx_runtime_1.jsxs)("div", { className: mobileBarClassNames, children: [items, (0, jsx_runtime_1.jsx)(navItem_1.NavItem, { className: "zen-nav-item--mobile-bar", title: translate("More"), primaryIcon: isMenuOpen ? iconClose_1.IconClose : iconMenu_1.IconMenu, collapsed: true, onClick: onMenuToggle, tooltipAlignment: "top" }, "nav-mobile-bar-more-button")] });
+const NavMobileBar = ({
+  className,
+  children,
+  isMenuOpen,
+  onMenuToggle
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const mobileBarClassNames = (0, classNames_1.classNames)(["zen-nav-mobile-bar", className !== null && className !== void 0 ? className : ""]);
+  const items = react_1.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 = (0, generateId_1.generateId)();
+    return (0, react_1.cloneElement)(element, Object.assign(Object.assign({}, element.props), {
+      key,
+      collapsed: true,
+      className: (0, classNames_1.classNames)([existingClassName, "zen-nav-item--mobile-bar"]),
+      tooltipAlignment: "top"
+    }));
+  });
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: mobileBarClassNames,
+    children: [items, (0, jsx_runtime_1.jsx)(navItem_1.NavItem, {
+      className: "zen-nav-item--mobile-bar",
+      title: translate("More"),
+      primaryIcon: isMenuOpen ? iconClose_1.IconClose : iconMenu_1.IconMenu,
+      collapsed: true,
+      onClick: onMenuToggle,
+      tooltipAlignment: "top"
+    }, "nav-mobile-bar-more-button")]
+  });
 };
-exports.NavMobileBar = NavMobileBar;
+exports.NavMobileBar = NavMobileBar;