@geotab/zenith 3.0.0 → 3.0.1-beta.1

package/esm/nav/navFooter/navFooter.js

@@ -1,21 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "../../commonHelpers/classNames/classNames";
-import { Children, cloneElement, createContext, useContext } from "react";
+import { Children, cloneElement } from "react";
 import { NavItem } from "../navItem/navItem";
 import { useLanguage } from "../../utils/localization/useLanguage";
 import { useMobile } from "../../commonHelpers/hooks/useMobile";
-import { IconNavigationFooterCollapsed } from "../../icons/iconNavigationFooterCollapsed";
-import { IconNavigationFooterExpanded } from "../../icons/iconNavigationFooterExpanded";
 import { NavFooterAction } from "./navFooterAction/navFooterAction";
 import { IconEdit } from "../../icons/iconEdit";
 import { useNavContext } from "../context/nav.context";
-const InnerContext = createContext({
-    collapsed: false,
-    onCollapseToggle: (_) => { },
-    onEditNavClick: () => { }
-});
-const NavFooterComponent = ({ className, onEditNavClick, children }) => {
-    const { collapsed, onCollapseToggle } = useNavContext();
+const NavFooterComponent = ({ className, children }) => {
+    const { collapsed } = useNavContext();
     const footerAction = Children.toArray(children).find(child => {
         const element = child;
         return element.type && element.type.displayName === "NavFooterAction";
@@ -24,34 +17,41 @@ const NavFooterComponent = ({ className, onEditNavClick, children }) => {
         const element = child;
         return element.type && element.type.displayName === "NavFooterBottom";
     });
-    return _jsxs("div", { className: classNames(["zen-nav-footer", collapsed ? "zen-nav-footer--collapsed" : "", className || ""]), children: [_jsx("div", { className: "zen-nav-footer__top", children: footerAction }), _jsx(InnerContext.Provider, { value: { collapsed, onCollapseToggle, onEditNavClick }, children: bottom })] });
+    return _jsxs("div", { className: classNames(["zen-nav-footer", collapsed ? "zen-nav-footer--collapsed" : "", className || ""]), children: [_jsx("div", { className: "zen-nav-footer__top", children: footerAction }), bottom] });
 };
 const NavFooterBottom = ({ className, children }) => {
-    const { translate } = useLanguage();
-    const { collapsed, onCollapseToggle, onEditNavClick } = useContext(InnerContext);
     const isMobile = useMobile();
+    const { collapsed } = useNavContext();
     const childrenArray = Children.toArray(children).filter(child => {
         const element = child;
-        return element.type && element.type.displayName === "NavItem";
+        if (!element.type) {
+            return false;
+        }
+        const displayName = element.type.displayName;
+        return displayName === "NavItem" || displayName === "NavAddMenu" || displayName === "NavFooterEditButton";
     });
-    return _jsxs("div", { className: classNames(["zen-nav-footer__bottom", isMobile ? "zen-nav-footer__bottom--mobile" : "", className || ""]), children: [childrenArray.map(child => {
-                const childElement = child;
-                return cloneElement(childElement, {
-                    collapsed: !isMobile,
-                    className: classNames([
-                        childElement.props.className || "",
-                        "zen-nav-footer__button"
-                    ]),
-                    menuAlignment: "right-bottom"
-                });
-            }), _jsx(NavItem, { className: "zen-nav-footer__button", title: translate("Edit Navigation"), collapsed: !isMobile, primaryIcon: IconEdit, onClick: () => onEditNavClick && onEditNavClick(), menuAlignment: "right-bottom" }, "help-button"), isMobile ? null : _jsx(NavItem, { className: "zen-nav-footer__button", title: collapsed ? translate("Expand Navigation") : translate("Collapse Navigation"), collapsed: !isMobile, primaryIcon: collapsed ? IconNavigationFooterCollapsed : IconNavigationFooterExpanded, onClick: () => onCollapseToggle && onCollapseToggle(!collapsed), menuAlignment: "right-bottom" }, "collapse-button")] });
+    return _jsx("div", { className: classNames(["zen-nav-footer__bottom", isMobile ? "zen-nav-footer__bottom--mobile" : "", className || ""]), children: childrenArray.map(child => {
+            const childElement = child;
+            return cloneElement(childElement, Object.assign(Object.assign({}, childElement.props), { collapsed: !isMobile, className: classNames([
+                    childElement.props.className || "",
+                    "zen-nav-footer__button"
+                ]), menuAlignment: "right-bottom", tooltipAlignment: collapsed ? "right" : "top" }));
+        }) });
 };
 NavFooterBottom.displayName = "NavFooterBottom";
+const NavFooterEditButton = ({ className, onClick }) => {
+    const { translate } = useLanguage();
+    const { collapsed } = useNavContext();
+    const isMobile = useMobile();
+    return _jsx(NavItem, { className: classNames(["zen-nav-footer__button", className || ""]), title: translate("Edit Navigation"), collapsed: !isMobile, primaryIcon: IconEdit, onClick: () => onClick && onClick(), menuAlignment: "right-bottom", tooltipAlignment: collapsed ? "right" : "top" }, "edit-button");
+};
+NavFooterEditButton.displayName = "NavFooterEditButton";
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
 export const NavFooter = Object.assign(NavFooterComponent, {
     Action: NavFooterAction,
-    Bottom: NavFooterBottom
+    Bottom: NavFooterBottom,
+    EditButton: NavFooterEditButton
 });
 NavFooter.displayName = "NavFooter";

package/esm/nav/navFooter/navFooterAction/navFooterAction.js

@@ -15,7 +15,6 @@ export const NavFooterAction = ({ children }) => {
     if (!filteredItems.length) {
         return null;
     }
-    // TODO: set menuAlignment value to "right-bottom" when positioning is fixed
     return _jsx(NavItem, { primaryIcon: IconSettings4, title: translate("Configure"), menuAlignment: "right-bottom", children: filteredItems });
 };
 NavFooterAction.displayName = "NavFooterAction";

package/esm/nav/navHeader/navHeader.d.ts

@@ -2,27 +2,28 @@ import "./navHeader.less";
 import { IZenComponentProps } from "../../commonHelpers/zenComponent";
 import { FC, ReactElement, ReactNode } from "react";
 import { INavHeaderSearch } from "./navHeaderSearch/navHeaderSearch";
+import { INavAddMenuProps } from "../navAddMenu/navAddMenu";
 export interface INavHeader extends Omit<IZenComponentProps, "children"> {
     logo: string | ReactNode;
     collapsedLogo?: string | ReactNode;
     logoLink?: string;
     imgTitle: string;
-    children?: ReactElement<INavHeaderActions> | ReactElement<INavHeaderSearch> | (ReactElement<INavHeaderActions> | ReactElement<INavHeaderSearch>)[];
+    children?: null | ReactElement<INavAddMenuProps> | ReactElement<INavHeaderToggler> | ReactElement<INavHeaderSearch> | (null | ReactElement<INavAddMenuProps> | ReactElement<INavHeaderToggler> | ReactElement<INavHeaderSearch>)[];
     onSearch?: (searchTerm: string) => void;
 }
-declare const NavHeaderAction: {
-    (props: import("../navItem/navItem").ILinkNavItem | import("../navItem/navItem").IButtonNavItem): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-interface INavHeaderActions extends Omit<IZenComponentProps, "children"> {
-    title: string;
-    children: ReactElement<typeof NavHeaderAction> | ReactElement<typeof NavHeaderAction>[];
+interface INavHeaderToggler extends IZenComponentProps {
 }
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
 export declare const NavHeader: FC<INavHeader> & {
-    Actions: FC<INavHeaderActions>;
+    /**
+     * @deprecated Use NavAddMenu instead. Will be removed in future releases.
+     */
+    Actions: FC<INavAddMenuProps>;
+    /**
+     * @deprecated Use NavItem instead. Will be removed in future releases.
+     */
     Action: {
         (props: import("../navItem/navItem").ILinkNavItem | import("../navItem/navItem").IButtonNavItem): import("react/jsx-runtime").JSX.Element;
         displayName: string;

package/esm/nav/navHeader/navHeader.js

@@ -1,15 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "../../commonHelpers/classNames/classNames";
-import { Children, cloneElement, useMemo, useRef, useState } from "react";
-import { IconPlus } from "../../icons/iconPlus";
-import { TextIconButton } from "../../textIconButton/textIconButton";
-import { ControlledMenu } from "../../menu/controlledMenu";
-import { IconClose } from "../../icons/iconClose";
+import { Children, useMemo } from "react";
 import { useMobile } from "../../commonHelpers/hooks/useMobile";
 import { useNavContext } from "../context/nav.context";
 import { isImageUrl } from "../utils/navUtils";
 import { NavHeaderSearch } from "./navHeaderSearch/navHeaderSearch";
-import { NavItem, NavItemContext } from "../navItem/navItem";
+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") });
+};
+NavHeaderToggler.displayName = "NavHeaderToggler";
 const NavHeaderComponent = ({ className, logo, logoLink, imgTitle, collapsedLogo, children }) => {
     const { collapsed, searchOpen } = useNavContext();
     const isLogoImageString = useMemo(() => isImageUrl(logo), [logo]);
@@ -18,36 +27,38 @@ const NavHeaderComponent = ({ className, logo, logoLink, imgTitle, collapsedLogo
     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).map(actions => {
-        const childrenActions = actions.props.children;
-        const validChildren = Children.toArray(childrenActions)
-            .filter(child => {
-            const element = child;
-            return element.type && element.type.displayName === "NavItem";
-        })
-            .map(child => cloneElement(
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        child, {
-            className: classNames([
-                "zen-nav-item--level-2",
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                child.props.className || ""
-            ]),
-            collapsed: false
-        }));
-        return cloneElement(actions, Object.assign(Object.assign({}, actions.props), { children: validChildren }));
+    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: [searchOpen ? null : logoToRender, _jsx("div", { className: "zen-nav-header__controls", children: navChildren })] });
+    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.
+ */
+const NavHeaderActions = NavAddMenu;
+NavHeaderActions.displayName = "NavAddMenu";
+/**
+ * @deprecated Use NavItem instead. This component is left for backward compatibility and will be removed in future releases.
+ */
 const NavHeaderAction = NavItem;
-const NavHeaderActions = ({ title, className, children }) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const isMobile = useMobile();
-    const triggerRef = useRef(null);
-    return _jsx(NavItemContext.Provider, { value: { parentLevel: 2 }, children: _jsxs("div", { className: classNames(["zen-nav-header__actions", className || ""]), children: [_jsx(TextIconButton, { type: "primary", title: title, className: "zen-nav-header__actions-icon", icon: isOpen && !isMobile ? IconClose : IconPlus, iconSize: "large", ref: triggerRef, onClick: () => setIsOpen(!isOpen) }), _jsx(ControlledMenu, { title: title, isOpen: isOpen, setIsOpen: setIsOpen, triggerRef: triggerRef, alignment: "right-top", paddingX: 8, paddingY: 8, className: classNames(["zen-nav-l2-popup  zen-nav-l2-popup--narrow", isMobile ? "zen-nav-l2-popup--mobile" : ""]), listClassName: classNames(["zen-nav-l2-popup__list", isMobile ? "zen-nav-l2-popup__list--mobile" : ""]), children: children })] }) });
-};
+NavHeaderAction.displayName = "NavItem";
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
-export const NavHeader = Object.assign(NavHeaderComponent, { Actions: NavHeaderActions, Action: NavHeaderAction, Search: NavHeaderSearch });
+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
+});
 NavHeader.displayName = "NavHeader";

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

@@ -5,12 +5,12 @@ import { useNavContext } from "../../context/nav.context";
 import { useLanguage } from "../../../utils/localization/useLanguage";
 import { useDebounce } from "../../../commonHelpers/hooks/useDebounce";
 import { classNames } from "../../../commonHelpers/classNames/classNames";
-import { TextIconButton } from "../../../textIconButton/textIconButton";
 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 } = useNavContext();
+    const { searchOpen, onSearchToggle, searchTerm = "", onSearch: contextOnSearch, collapsed } = useNavContext();
     const { translate } = useLanguage();
     const onSearchCallback = useCallback((term) => {
         onSearch === null || onSearch === void 0 ? void 0 : onSearch(term);
@@ -32,5 +32,8 @@ export const NavHeaderSearch = ({ className, onSearch }) => {
             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(TextIconButton, { className: "zen-nav-header-search__button", icon: IconSearch, onClick: () => onSearchToggle === null || onSearchToggle === void 0 ? void 0 : onSearchToggle(true), title: translate("Search") }) : 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] });
+    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";

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

@@ -7,6 +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;
     isBeta?: boolean;
     counter?: string;
     collapsed?: boolean;
@@ -15,6 +18,8 @@ interface INavItemCommon extends IZenComponentProps {
     iconClass?: string;
     isPrimary?: boolean;
     tabIndex?: 0 | -1;
+    isMenuItem?: boolean;
+    tooltipAlignment?: TAlignment;
 }
 export interface ILinkNavItem extends INavItemCommon {
     link: string;
@@ -23,9 +28,11 @@ export interface IButtonNavItem extends INavItemCommon {
     onClick?: () => void;
     menuAlignment?: TAlignment;
 }
-export declare const NavItemContext: import("react").Context<{
-    parentLevel?: number | undefined;
-}>;
+interface INavItemContext {
+    parentLevel?: number;
+    closeParentMenu?: () => void;
+}
+export declare const NavItemContext: import("react").Context<INavItemContext>;
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */

package/esm/nav/navItem/navItem.js

@@ -21,22 +21,31 @@ import { useNavContext } from "../context/nav.context";
 import { useMobile } from "../../commonHelpers/hooks/useMobile";
 const ICON_SIZE = "huge";
 const SUBMENU_ICON_SIZE = "large";
-// Context for tracking parent level for nested navigation items
 export const NavItemContext = createContext({ parentLevel: 0 });
+const defaultTooltipAlignment = "right";
 const isLinkNavItem = (item) => !!item.link;
-const NavItemContent = ({ primaryIcon, secondaryIcon, isBeta, counter, collapsed, hasSubmenu, iconClass, level = 1, children }) => {
+const NavItemContent = ({ primaryIcon, secondaryIcon, tertiaryIcon, tertiaryIconAriaLabel = "", onTertiaryIconClick, 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;
-    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 handleTertiaryIconClick = (e) => {
+        e.stopPropagation();
+        onTertiaryIconClick === null || onTertiaryIconClick === void 0 ? void 0 : onTertiaryIconClick(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] }));
 };
 const LinkNavItem = (_a) => {
-    var { className, title, collapsed, active, link, isExternalLink, tabIndex } = _a, rest = __rest(_a, ["className", "title", "collapsed", "active", "link", "isExternalLink", "tabIndex"]);
+    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"]);
     const isMobile = useMobile();
-    const { parentLevel = 0 } = useContext(NavItemContext);
-    const item = (_jsx("a", { href: link, "aria-label": title, title: title, target: isExternalLink ? "_blank" : undefined, rel: isExternalLink ? "noopener noreferrer" : undefined, tabIndex: tabIndex, role: "menuitem", className: classNames([
+    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: () => {
+            closeParentMenu && closeParentMenu();
+            onNavigate && onNavigate();
+        }, className: classNames([
             "zen-link--light",
             "zen-nav-item",
             "zen-nav-item--link",
@@ -45,13 +54,13 @@ const LinkNavItem = (_a) => {
             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: "right", children: title })) : (item);
+    return collapsed ? (_jsx(Tooltip, { trigger: item, alignment: tooltipAlignment, children: title })) : (item);
 };
 LinkNavItem.displayName = "LinkNavItem";
 const ButtonNavItem = (_a) => {
-    var { className, title, onClick, collapsed, active, children, tabIndex, menuAlignment = "right-top" } = _a, rest = __rest(_a, ["className", "title", "onClick", "collapsed", "active", "children", "tabIndex", "menuAlignment"]);
+    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"]);
     const [menuOpen, setMenuOpen] = useState(false);
-    const { parentLevel = 0 } = useContext(NavItemContext);
+    const { parentLevel = 0, closeParentMenu } = useContext(NavItemContext);
     const triggerRef = useRef(null);
     const validChildren = Children.toArray(children).filter(child => {
         const element = child;
@@ -75,7 +84,7 @@ const ButtonNavItem = (_a) => {
         }
     };
     const isMobile = useMobile();
-    const buttonElement = (_jsx("button", { ref: triggerRef, "aria-label": title, title: title, tabIndex: tabIndex, role: "menuitem", className: classNames([
+    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" : "",
@@ -85,7 +94,7 @@ const ButtonNavItem = (_a) => {
             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 trigger = collapsed ? (_jsx(Tooltip, { trigger: buttonElement, alignment: "right", children: title })) : (buttonElement);
+    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;
@@ -98,11 +107,15 @@ const ButtonNavItem = (_a) => {
             return cloneElement(childElement, Object.assign(Object.assign({}, childElement.props), { className: classNames([levelClass, nestedClass, isMobile ? levelClassMobile : "", childElement.props.className || ""]), collapsed: false }));
         });
         const popupLevel = childLevel;
-        const popupClass = `zen-nav-l${popupLevel}-popup`;
-        const popupClassMobile = `zen-nav-l${popupLevel}-popup--mobile`;
-        const popupListClass = `zen-nav-l${popupLevel}-popup__list`;
-        const popupListClassMobile = `zen-nav-l${popupLevel}-popup__list--mobile`;
-        return (_jsxs(_Fragment, { children: [trigger, _jsx(NavItemContext.Provider, { value: { parentLevel: currentLevel }, 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 }) })] }));
+        const popupClass = `zen-nav-popup zen-nav-l${popupLevel}-popup`;
+        const popupClassMobile = `zen-nav-popup--mobile zen-nav-l${popupLevel}-popup--mobile`;
+        const popupListClass = `zen-nav-popup__list zen-nav-l${popupLevel}-popup__list`;
+        const popupListClassMobile = `zen-nav-popup__list--mobile zen-nav-l${popupLevel}-popup__list--mobile`;
+        const closeLevelMenu = () => {
+            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 trigger;
 };

package/esm/nav/navMobileBar/navMobileBar.js

@@ -25,7 +25,7 @@ export const NavMobileBar = ({ className, children, isMenuOpen, onMenuToggle })
         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 }, "nav-mobile-bar-more-button")] });
+    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/nav/storyHelpers/storyDecorator.d.ts

@@ -1,4 +1,5 @@
 import type { Decorator } from "@storybook/react";
+import "../nav.less";
 export interface INavContainerDecoratorOptions {
     collapsed?: boolean;
     collapsedWidth?: string;

package/esm/nav/storyHelpers/storyDecorator.js

@@ -11,7 +11,7 @@ export const createNavContainerDecorator = (options = {}) => {
         const [isMobile, setIsMobile] = useState(false);
         const isCollapsedState = !isMobile && isCollapsed && !isSearchOpen;
         const containerWidth = isMobile ? "100%" : isCollapsedState ? collapsedWidth : expandedWidth;
-        return (_jsx("div", { className: withoutStyles ? "" : "zen-shadow-dropdown-default", style: {
+        return (_jsx("div", { className: withoutStyles ? "" : "zen-nav zen-shadow-dropdown-default", style: {
                 maxWidth: "100%",
                 width: containerWidth,
                 overflow: withoutStyles ? undefined : "hidden",
@@ -23,7 +23,7 @@ export const createNavContainerDecorator = (options = {}) => {
             }, children: _jsx(NavContext.Provider, { value: {
                     collapsed: !!isCollapsedState,
                     onCollapseToggle: setIsCollapsed,
-                    searchOpen: isSearchOpen,
+                    searchOpen: isMobile || isSearchOpen,
                     onSearchToggle: setIsSearchOpen,
                     searchTerm,
                     onSearch: setSearchTerm

package/esm/nav/utils/navUtils.js

@@ -37,7 +37,7 @@ export const filterPrimaryNavItems = (element, isNegative) => {
         return element;
     }
     if (!isNavItem(element) && children) {
-        const filteredChildren = Children.map(children, child => filterPrimaryNavItems(child, isNegative));
+        const filteredChildren = Children.map(children, child => child ? filterPrimaryNavItems(child, isNegative) : null);
         if (!filteredChildren) {
             return null;
         }

package/esm/selectList/selectList.js

@@ -43,12 +43,6 @@ export const SelectList = (_a) => {
         const parsedValue = JSON.parse(innerValue);
         dispatchState({ type: ListAction.Reset, payload: { items, value: new Map(parsedValue), multiselect } });
     }, [innerValue, multiselect, items]);
-    useEffect(() => {
-        if (!multiselect) {
-            dispatchState({ type: ListAction.FocusFirst, payload: { items } });
-        }
-        dispatchState({ type: ListAction.Focus, payload: { items, multiselect } });
-    }, [multiselect, items]);
     useEffect(() => {
         onChange && state.isItemsStateChanged && onChange(new Map(state.itemsState));
     }, [state.isItemsStateChanged, state.itemsState, onChange]);
@@ -56,7 +50,8 @@ export const SelectList = (_a) => {
         dispatchState({ type: ListAction.ChangeItemState, payload: { updatedId, updatedState, multiselect } });
     }, [multiselect]);
     useEffect(() => {
-        if (state.activeIndex >= 0 && document.activeElement && listRef.current && isChildOf(document.activeElement, listRef.current)) {
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (state.activeIndex >= 0 && document.activeElement && listRef && listRef.current && isChildOf(document.activeElement, listRef.current)) {
             const itemEl = listRef.current.querySelector(`.zen-select-list__item:nth-child(${state.activeIndex + 1})`);
             itemEl === null || itemEl === void 0 ? void 0 : itemEl.scrollIntoView({ block: "nearest" });
         }
@@ -71,9 +66,7 @@ export const SelectList = (_a) => {
     const onKeyDown = (e) => {
         const handlers = {
             "ArrowUp": () => multiselect || !selectItemOnFocus ? dispatchState({ type: ListAction.FocusPrev, payload: { items } }) : dispatchState({ type: ListAction.SelectPrev, payload: { items, multiselect } }),
-            "Shift+Tab": () => multiselect || !selectItemOnFocus ? dispatchState({ type: ListAction.FocusPrev, payload: { items } }) : dispatchState({ type: ListAction.SelectPrev, payload: { items, multiselect } }),
             "ArrowDown": () => multiselect || !selectItemOnFocus ? dispatchState({ type: ListAction.FocusNext, payload: { items } }) : dispatchState({ type: ListAction.SelectNext, payload: { items, multiselect } }),
-            "Tab": () => multiselect || !selectItemOnFocus ? dispatchState({ type: ListAction.FocusNext, payload: { items } }) : dispatchState({ type: ListAction.SelectNext, payload: { items, multiselect } }),
             "Enter": () => {
                 const item = items[state.activeIndex];
                 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition

package/esm/storybookHelpers/storyThemeDecorator.js

@@ -3,8 +3,8 @@ import { ThemeDrive } from "../utils/theme/themeDrive";
 import { ThemeDark } from "../utils/theme/themeDark";
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const StoryThemeDecorator = (Story, context) => {
-    var _a, _b;
-    const isDark = ((_a = context.globals.backgrounds) === null || _a === void 0 ? void 0 : _a.value) === "#333333" || ((_b = context.globals.backgrounds) === null || _b === void 0 ? void 0 : _b.value) === "#333";
+    var _a, _b, _c;
+    const isDark = ((_a = context.globals.backgrounds) === null || _a === void 0 ? void 0 : _a.value) === "#333333" || ((_b = context.globals.backgrounds) === null || _b === void 0 ? void 0 : _b.value) === "#333" || ((_c = context.globals.backgrounds) === null || _c === void 0 ? void 0 : _c.value) === "dark";
     if (context.globals.theme === "drive") {
         return _jsx(ThemeDrive, { dark: isDark, children: _jsx(Story, Object.assign({}, context)) });
     }

package/esm/table/flexible/columnsList.js

@@ -3,8 +3,10 @@ import { useCallback, useId, useMemo } from "react";
 import { CheckboxState } from "../../checkbox/checkboxState";
 import { SelectList } from "../../selectList/selectList";
 import { groupColumns } from "./groupColumns";
+import { useLanguage } from "../../utils/localization/useLanguage";
 const SubColumnsList = ({ title, columns, settings, firstColumn, onChange, sortColumns }) => {
     const id = useId();
+    const { translate } = useLanguage();
     const sortColumnsInt = useCallback((a, b) => {
         if (sortColumns) {
             return sortColumns(a.title, b.title);
@@ -30,7 +32,7 @@ const SubColumnsList = ({ title, columns, settings, firstColumn, onChange, sortC
         });
         onChange && onChange(newSettings);
     }, [columns, settings, onChange]);
-    const list = useMemo(() => _jsx(SelectList, { id: id, items: items, value: state, title: title || "", multiselect: true, showCheckbox: true, onChange: onChangeItem }), [id, items, state, title, onChangeItem]);
+    const list = useMemo(() => _jsx(SelectList, { id: id, items: items, value: state, title: title || translate("Select visible columns"), multiselect: true, showCheckbox: true, onChange: onChangeItem }), [id, items, state, title, translate, onChangeItem]);
     if (!title) {
         return list;
     }

package/esm/table/flexible/columnsPopup.js

@@ -3,10 +3,12 @@ import { useCallback, useMemo } from "react";
 import { ColumnSettings } from "./columnSettings";
 import { Popup } from "../../popup/popup";
 import { ColumnSettingsList } from "./columnsList";
+import { useLanguage } from "../../utils/localization/useLanguage";
 export const ColumnsPopup = ({ onReset, onChange, columnSettings, columns, sortGroups, sortColumns, triggerRef }) => {
     const onResetListener = useCallback(() => {
         onReset();
     }, [onReset]);
+    const { translate } = useLanguage();
     const listOfColumns = useMemo(() => {
         var _a;
         const firstColumn = ((_a = columns[0]) === null || _a === void 0 ? void 0 : _a.id) || "";
@@ -19,5 +21,5 @@ export const ColumnsPopup = ({ onReset, onChange, columnSettings, columns, sortG
                 onChange(settings);
             }, sortGroups: sortGroups, sortColumns: sortColumns });
     }, [columns, columnSettings, sortGroups, sortColumns, onChange]);
-    return _jsx(Popup, { triggerRef: triggerRef, alignment: "bottom-right", children: _jsx(ColumnSettings, { onReset: onResetListener, children: listOfColumns }) }, "flexible-popup");
+    return _jsx(Popup, { ariaLabel: translate("Column Settings"), triggerRef: triggerRef, alignment: "bottom-right", children: _jsx(ColumnSettings, { onReset: onResetListener, children: listOfColumns }) }, "flexible-popup");
 };

package/esm/testHelpers/renderAsync.js

@@ -3,5 +3,6 @@ import { render } from "@testing-library/react";
 export const renderAsync = async (component) => act(async () => {
     const result = render(component);
     await Promise.resolve();
+    await Promise.resolve();
     return result;
 });

package/esm/timePicker/timePicker.js

@@ -20,16 +20,21 @@ export const TimePicker = ({ className, disabled, fullWidth, value, onChange, is
     const minutesValue = value ? value.getMinutes().toString().padStart(2, "0") : "";
     const [timeValue, setTimeValue] = useState({ hour: hourValue, minutes: minutesValue });
     const onCancelHandler = () => {
+        var _a;
         setTimeValue({ hour: hourValue, minutes: minutesValue });
         setIsOpen(false);
+        (_a = innerTriggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
     const onApplyHandler = () => {
+        var _a, _b;
         if (!timeValue.hour && !timeValue.minutes) {
             setIsOpen(false);
+            (_a = innerTriggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             return;
         }
         setTimeValue(timeValue);
         setIsOpen(false);
+        (_b = innerTriggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
         const copyDate = value ? new Date(value) : new Date();
         copyDate.setHours(parseInt(timeValue.hour || "00"));
         copyDate.setMinutes(parseInt(timeValue.minutes || "00"));

package/esm/utils/localization/translations/cs-json.d.ts

@@ -130,7 +130,6 @@ export declare const translations: {
     "Select groups\u2026": string;
     "Sort by {COLUMN_NAME} descending": string;
     "Sort by {COLUMN_NAME} ascending": string;
-    "Show list of columns": string;
     "Multiple row selection menu": string;
     "Convert table to full screen": string;
     "View on map": string;
@@ -244,4 +243,5 @@ export declare const translations: {
     "Close filter": string;
     "Column Settings": string;
     Category: string;
+    "Select visible columns": string;
 };

package/esm/utils/localization/translations/cs-json.js

@@ -130,7 +130,6 @@ export const translations = {
     "Select groups…": "Vybrat skupiny…",
     "Sort by {COLUMN_NAME} descending": "Seřadit sestupně podle {COLUMN_NAME}",
     "Sort by {COLUMN_NAME} ascending": "Seřadit vzestupně podle {COLUMN_NAME}",
-    "Show list of columns": "Zobrazit seznam sloupců",
     "Multiple row selection menu": "Nabídka s vícenásobným výběrem řádků",
     "Convert table to full screen": "Konvertovat tabulku do režimu plného zobrazení",
     "View on map": "Zobrazit na mapě",
@@ -243,5 +242,6 @@ export const translations = {
     "Configure": "Konfigurovat",
     "Close filter": "Zavřít filtr",
     "Column Settings": "Nastavení sloupců",
-    "Category": "Kategorie"
+    "Category": "Kategorie",
+    "Select visible columns": "Vyberte viditelné sloupce"
 };

package/esm/utils/localization/translations/da-DK-json.d.ts

@@ -151,7 +151,6 @@ export declare const translations: {
     "Select groups\u2026": string;
     "Sort by {COLUMN_NAME} descending": string;
     "Sort by {COLUMN_NAME} ascending": string;
-    "Show list of columns": string;
     "Multiple row selection menu": string;
     "Convert table to full screen": string;
     "View on map": string;
@@ -249,4 +248,5 @@ export declare const translations: {
     Collapse: string;
     "Column Settings": string;
     Category: string;
+    "Select visible columns": string;
 };