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

package/esm/modal/modal.js

@@ -1,3 +1,4 @@
+import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/naming-convention */
 import React, { cloneElement, createElement, Fragment, isValidElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
@@ -19,129 +20,273 @@ import { isFocusable } from "../dialog/dialogHelpers";
 import { themeContext } from "../utils/theme/themeContext";
 import { getPredefinedFocusableItem } from "./modalHelpers";
 import { TextIconButton } from "../textIconButton/textIconButton";
-export const Modal = ({ isOpen, children, onClose, closeOnClickOutside, maxWidth, title, type, className, focus, modalContainerClassName }) => {
-    const lastActiveOutsideElement = useRef(document.activeElement);
-    const modalRoot = document.fullscreenElement || document.body;
-    const [top, setTop] = useState(`${window.pageYOffset}px`);
-    const { dark } = useContext(themeContext);
-    const onOutSideClick = useCallback(() => {
-        if (!isOpen || !closeOnClickOutside || !onClose) {
-            return;
-        }
-        onClose();
-    }, [onClose, isOpen, closeOnClickOutside]);
-    useEffect(() => {
-        const copyActive = lastActiveOutsideElement.current;
-        return () => {
-            isFocusable(copyActive) && copyActive.focus();
-        };
-    }, []);
-    useEffect(() => {
-        document.body.classList.remove("zen-modal-content--hidden-overflow");
-        if (isOpen) {
-            document.body.classList.add("zen-modal-content--hidden-overflow");
-        }
-        return () => {
-            document.body.classList.remove("zen-modal-content--hidden-overflow");
-        };
-    }, [isOpen]);
-    useEffect(() => {
-        const changeTopSpace = () => {
-            setTop(`${window.pageYOffset}px`);
-        };
-        window.addEventListener("resize", changeTopSpace);
-        window.addEventListener("scroll", changeTopSpace);
-        return () => {
-            window.removeEventListener("resize", changeTopSpace);
-            window.removeEventListener("scroll", changeTopSpace);
-        };
-    }, []);
-    const labeledId = useId();
-    const darkClass = dark ? "zen-dark" : "";
-    const modalContent = useMemo(() => {
-        const someContent = [];
-        React.Children.forEach(children, (child, index) => {
-            const childrenWithProps = isValidElement(child)
-                ? cloneElement(child, Object.assign(Object.assign({}, child.props), { key: index }))
-                : child;
-            someContent.push(childrenWithProps);
-        });
-        return someContent;
-    }, [children]);
-    const dialogHTML = useCallback((id) => _jsxs("div", { className: classNames(["zen-modal", darkClass, modalContainerClassName || ""]), "aria-labelledby": labeledId, "aria-modal": "true", role: "dialog", style: { top: top }, children: [_jsx(Modal.Content, { onClose: onClose, maxWidth: maxWidth, title: title, className: className, type: type, labeledId: id, focus: focus, children: modalContent.length > 0 && modalContent.map((el) => el) }), _jsx("div", { className: "zen-modal__shield", onClick: onOutSideClick })] }), [darkClass, modalContainerClassName, labeledId, top, onClose, maxWidth, title, className, type, focus, modalContent, onOutSideClick]);
-    if (!isOpen) {
-        return null;
+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 Modal = ({
+  isOpen,
+  children,
+  onClose,
+  closeOnClickOutside,
+  maxWidth,
+  title,
+  type,
+  className,
+  focus,
+  modalContainerClassName
+}) => {
+  const lastActiveOutsideElement = useRef(document.activeElement);
+  const modalRoot = document.fullscreenElement || document.body;
+  const [top, setTop] = useState(`${window.pageYOffset}px`);
+  const {
+    dark
+  } = useContext(themeContext);
+  const onOutSideClick = useCallback(() => {
+    if (!isOpen || !closeOnClickOutside || !onClose) {
+      return;
     }
-    return createPortal(dialogHTML(labeledId), modalRoot, "ModalPortal" + labeledId);
+    onClose();
+  }, [onClose, isOpen, closeOnClickOutside]);
+  useEffect(() => {
+    const copyActive = lastActiveOutsideElement.current;
+    return () => {
+      isFocusable(copyActive) && copyActive.focus();
+    };
+  }, []);
+  useEffect(() => {
+    document.body.classList.remove("zen-modal-content--hidden-overflow");
+    if (isOpen) {
+      document.body.classList.add("zen-modal-content--hidden-overflow");
+    }
+    return () => {
+      document.body.classList.remove("zen-modal-content--hidden-overflow");
+    };
+  }, [isOpen]);
+  useEffect(() => {
+    const changeTopSpace = () => {
+      setTop(`${window.pageYOffset}px`);
+    };
+    window.addEventListener("resize", changeTopSpace);
+    window.addEventListener("scroll", changeTopSpace);
+    return () => {
+      window.removeEventListener("resize", changeTopSpace);
+      window.removeEventListener("scroll", changeTopSpace);
+    };
+  }, []);
+  const labeledId = useId();
+  const darkClass = dark ? "zen-dark" : "";
+  const modalContent = useMemo(() => {
+    const someContent = [];
+    React.Children.forEach(children, (child, index) => {
+      const childrenWithProps = isValidElement(child) ? cloneElement(child, Object.assign(Object.assign({}, child.props), {
+        key: index
+      })) : child;
+      someContent.push(childrenWithProps);
+    });
+    return someContent;
+  }, [children]);
+  const dialogHTML = useCallback(id => _jsxs("div", {
+    className: classNames(["zen-modal", darkClass, modalContainerClassName || ""]),
+    "aria-labelledby": labeledId,
+    "aria-modal": "true",
+    role: "dialog",
+    style: {
+      top: top
+    },
+    children: [_jsx(Modal.Content, {
+      onClose: onClose,
+      maxWidth: maxWidth,
+      title: title,
+      className: className,
+      type: type,
+      labeledId: id,
+      focus: focus,
+      children: modalContent.length > 0 && modalContent.map(el => el)
+    }), _jsx("div", {
+      className: "zen-modal__shield",
+      onClick: onOutSideClick
+    })]
+  }), [darkClass, modalContainerClassName, labeledId, top, onClose, maxWidth, title, className, type, focus, modalContent, onOutSideClick]);
+  if (!isOpen) {
+    return null;
+  }
+  return createPortal(dialogHTML(labeledId), modalRoot, "ModalPortal" + labeledId);
 };
-const dummyOnClose = () => { };
-export const DialogContentNew = ({ onClose, className, title, type, maxWidth = "600px", labeledId, focus, children }) => {
-    const { translate } = useLanguage();
-    const isMobile = useMobile();
-    const contentRef = useRef(null);
-    const iconDriveClassName = useDriveClassName("icon");
-    const iconsByType = useMemo(() => ({
-        "error": IconException,
-        "success": IconCheckRadio,
-        "warning": IconWarning,
-        "info": IconInfoCircle
-    }), []);
-    const subscriptionCondition = useCallback((trigger) => trigger.current !== null, []);
-    useTrapFocus(contentRef, undefined, contentRef, subscriptionCondition);
-    useEscape(contentRef, onClose || dummyOnClose, contentRef, subscriptionCondition);
-    useEffect(() => {
-        if (contentRef.current === null) {
-            return;
-        }
-        const firstFocusableElement = getPredefinedFocusableItem(contentRef.current, focus);
-        if (firstFocusableElement) {
-            firstFocusableElement.focus();
-            return;
-        }
-        const focusable = contentRef.current.querySelectorAll(FOCUSABLE_SELECTOR);
-        focusable.length && focusable[focusable.length - 1].focus();
-    }, [contentRef, focus]);
-    const bodyContent = useMemo(() => {
-        const modalContent = [];
-        let tertiaryButton;
-        let primaryButton;
-        let secondaryButton;
-        React.Children.forEach(children, (child) => {
-            if (!isValidElement(child)) {
-                modalContent.push(child);
-                return;
-            }
-            if (child.type === Modal.PrimaryButton) {
-                primaryButton = child;
-                return;
-            }
-            if (child.type === Modal.SecondaryButton) {
-                secondaryButton = child;
-                return;
-            }
-            if (child.type === Modal.TertiaryButton) {
-                tertiaryButton = child;
-                return;
-            }
-            modalContent.push(child);
-        });
-        return { modalContent, primaryButton, secondaryButton, tertiaryButton };
-    }, [children]);
-    const isFooterVisible = !!bodyContent.tertiaryButton || !!bodyContent.secondaryButton || !!bodyContent.primaryButton;
-    const modalContentClasses = classNames(["zen-modal-content__body", "body-02-short", !isFooterVisible ? "zen-modal-content__body--no-footer" : ""]);
-    return _jsxs("div", { className: classNames(["zen-modal-content", "body-02", className ? className : ""]), 
-        // TODO implement sizing for modal and get rid of style
-        style: { maxWidth: maxWidth }, ref: contentRef, children: [_jsxs("div", { className: "zen-modal-content__header", children: [_jsxs("div", { className: "zen-modal-content__header-title heading-04 zen-ellipsis", id: labeledId, children: [type && _jsx("div", { className: classNames(["zen-modal-content__icon", `${("zen-modal-content__icon--" + type)}`]), children: createElement(iconsByType[type], {
-                                    size: iconDriveClassName ? "huge" : "large"
-                                }) }), title] }), onClose && _jsx(Button, { type: "tertiary", "data-focusable": "close", className: "zen-modal-content__header-close-button", title: translate("Close"), "aria-label": translate("Close"), onClick: onClose, children: _jsx(IconClose, { description: translate("Close"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }) })] }), bodyContent.modalContent.length > 0 && _jsx("div", { className: modalContentClasses, children: bodyContent.modalContent.map((el, index) => _jsx(Fragment, { children: el }, index)) }), isFooterVisible &&
-                _jsxs("div", { className: classNames(["zen-modal-content__footer", isMobile ? "zen-modal-content__footer--mobile" : ""]), children: [_jsx("div", { className: classNames(["zen-modal-content__footer-left", isMobile ? "zen-modal-content__footer-left--mobile" : ""]), children: bodyContent.tertiaryButton }), (bodyContent.secondaryButton || bodyContent.primaryButton) && _jsxs("div", { className: classNames(["zen-modal-content__footer-right", isMobile ? "zen-modal-content__footer-right--mobile" : ""]), children: [bodyContent.secondaryButton, bodyContent.primaryButton] })] })] });
+const dummyOnClose = () => {};
+export const DialogContentNew = ({
+  onClose,
+  className,
+  title,
+  type,
+  maxWidth = "600px",
+  labeledId,
+  focus,
+  children
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  const isMobile = useMobile();
+  const contentRef = useRef(null);
+  const iconDriveClassName = useDriveClassName("icon");
+  const iconsByType = useMemo(() => ({
+    "error": IconException,
+    "success": IconCheckRadio,
+    "warning": IconWarning,
+    "info": IconInfoCircle
+  }), []);
+  const subscriptionCondition = useCallback(trigger => trigger.current !== null, []);
+  useTrapFocus(contentRef, undefined, contentRef, subscriptionCondition);
+  useEscape(contentRef, onClose || dummyOnClose, contentRef, subscriptionCondition);
+  useEffect(() => {
+    if (contentRef.current === null) {
+      return;
+    }
+    const firstFocusableElement = getPredefinedFocusableItem(contentRef.current, focus);
+    if (firstFocusableElement) {
+      firstFocusableElement.focus();
+      return;
+    }
+    const focusable = contentRef.current.querySelectorAll(FOCUSABLE_SELECTOR);
+    focusable.length && focusable[focusable.length - 1].focus();
+  }, [contentRef, focus]);
+  const bodyContent = useMemo(() => {
+    const modalContent = [];
+    let tertiaryButton;
+    let primaryButton;
+    let secondaryButton;
+    React.Children.forEach(children, child => {
+      if (!isValidElement(child)) {
+        modalContent.push(child);
+        return;
+      }
+      if (child.type === Modal.PrimaryButton) {
+        primaryButton = child;
+        return;
+      }
+      if (child.type === Modal.SecondaryButton) {
+        secondaryButton = child;
+        return;
+      }
+      if (child.type === Modal.TertiaryButton) {
+        tertiaryButton = child;
+        return;
+      }
+      modalContent.push(child);
+    });
+    return {
+      modalContent,
+      primaryButton,
+      secondaryButton,
+      tertiaryButton
+    };
+  }, [children]);
+  const isFooterVisible = !!bodyContent.tertiaryButton || !!bodyContent.secondaryButton || !!bodyContent.primaryButton;
+  const modalContentClasses = classNames(["zen-modal-content__body", "body-02-short", !isFooterVisible ? "zen-modal-content__body--no-footer" : ""]);
+  return _jsxs("div", {
+    className: classNames(["zen-modal-content", "body-02", className ? className : ""]),
+    // TODO implement sizing for modal and get rid of style
+    style: {
+      maxWidth: maxWidth
+    },
+    ref: contentRef,
+    children: [_jsxs("div", {
+      className: "zen-modal-content__header",
+      children: [_jsxs("div", {
+        className: "zen-modal-content__header-title heading-04 zen-ellipsis",
+        id: labeledId,
+        children: [type && _jsx("div", {
+          className: classNames(["zen-modal-content__icon", `${"zen-modal-content__icon--" + type}`]),
+          children: createElement(iconsByType[type], {
+            size: iconDriveClassName ? "huge" : "large"
+          })
+        }), title]
+      }), onClose && _jsx(Button, {
+        type: "tertiary",
+        "data-focusable": "close",
+        className: "zen-modal-content__header-close-button",
+        title: translate("Close"),
+        "aria-label": translate("Close"),
+        onClick: onClose,
+        children: _jsx(IconClose, {
+          description: translate("Close"),
+          className: "svgIcon",
+          size: iconDriveClassName ? "huge" : "large"
+        })
+      })]
+    }), bodyContent.modalContent.length > 0 && _jsx("div", {
+      className: modalContentClasses,
+      children: bodyContent.modalContent.map((el, index) => _jsx(Fragment, {
+        children: el
+      }, index))
+    }), isFooterVisible && _jsxs("div", {
+      className: classNames(["zen-modal-content__footer", isMobile ? "zen-modal-content__footer--mobile" : ""]),
+      children: [_jsx("div", {
+        className: classNames(["zen-modal-content__footer-left", isMobile ? "zen-modal-content__footer-left--mobile" : ""]),
+        children: bodyContent.tertiaryButton
+      }), (bodyContent.secondaryButton || bodyContent.primaryButton) && _jsxs("div", {
+        className: classNames(["zen-modal-content__footer-right", isMobile ? "zen-modal-content__footer-right--mobile" : ""]),
+        children: [bodyContent.secondaryButton, bodyContent.primaryButton]
+      })]
+    })]
+  });
 };
-const SecondaryButton = (secondaryButton) => secondaryButton.icon ? _jsx(TextIconButton, Object.assign({ className: "zen-modal-content__icon-button" }, secondaryButton, { icon: secondaryButton.icon, "data-focusable": "secondary", children: secondaryButton.children }))
-    : _jsx(Button, Object.assign({}, secondaryButton, { "data-focusable": "secondary", children: secondaryButton.children }));
-const PrimaryButton = (primaryButton) => primaryButton.icon ? _jsx(TextIconButton, Object.assign({ className: "zen-modal-content__icon-button" }, primaryButton, { type: primaryButton.type || "primary", icon: primaryButton.icon, "data-focusable": "primary", children: primaryButton.children })) : _jsx(Button, Object.assign({}, primaryButton, { "data-focusable": "primary", type: primaryButton.type || "primary", children: primaryButton.children }));
-const TertiaryButton = (tertiaryButton) => tertiaryButton.icon ?
-    _jsx(TextIconButton, Object.assign({}, tertiaryButton, { icon: tertiaryButton.icon, className: "zen-modal-content__left-button zen-modal-content__icon-button", "data-focusable": "tertiary", type: tertiaryButton.type || "tertiary", children: tertiaryButton.children })) : _jsx(Button, Object.assign({}, tertiaryButton, { type: tertiaryButton.type || "tertiary", className: "zen-modal-content__left-button", "data-focusable": "tertiary", children: tertiaryButton.children }));
+const SecondaryButton = secondaryButton => secondaryButton.icon ? _jsx(TextIconButton, Object.assign({
+  className: "zen-modal-content__icon-button"
+}, secondaryButton, {
+  icon: secondaryButton.icon,
+  "data-focusable": "secondary",
+  children: secondaryButton.children
+})) : _jsx(Button, Object.assign({}, secondaryButton, {
+  "data-focusable": "secondary",
+  children: secondaryButton.children
+}));
+const PrimaryButton = primaryButton => primaryButton.icon ? _jsx(TextIconButton, Object.assign({
+  className: "zen-modal-content__icon-button"
+}, primaryButton, {
+  type: primaryButton.type || "primary",
+  icon: primaryButton.icon,
+  "data-focusable": "primary",
+  children: primaryButton.children
+})) : _jsx(Button, Object.assign({}, primaryButton, {
+  "data-focusable": "primary",
+  type: primaryButton.type || "primary",
+  children: primaryButton.children
+}));
+const TertiaryButton = tertiaryButton => tertiaryButton.icon ? _jsx(TextIconButton, Object.assign({}, tertiaryButton, {
+  icon: tertiaryButton.icon,
+  className: "zen-modal-content__left-button zen-modal-content__icon-button",
+  "data-focusable": "tertiary",
+  type: tertiaryButton.type || "tertiary",
+  children: tertiaryButton.children
+})) : _jsx(Button, Object.assign({}, tertiaryButton, {
+  type: tertiaryButton.type || "tertiary",
+  className: "zen-modal-content__left-button",
+  "data-focusable": "tertiary",
+  children: tertiaryButton.children
+}));
 Modal.Content = DialogContentNew;
 Modal.SecondaryButton = SecondaryButton;
 Modal.PrimaryButton = PrimaryButton;
-Modal.TertiaryButton = TertiaryButton;
+Modal.TertiaryButton = TertiaryButton;

package/esm/nav/nav.js

@@ -125,7 +125,7 @@ export const Nav = ({ children, className, collapsed = false, onCollapseToggle,
             onSearch: setSearchTerm,
             onNavigate: () => setIsMobileMenuOpen(false)
         }, children: [(!isMobile || isMobileMenuOpen)
-                ? _jsxs("div", { ref: menuRef, className: classNames(["zen-nav", isMobile ? "zen-nav--mobile" : "", collapsed ? "zen-nav--collapsed" : "", className || ""]), children: [header ? cloneElement(header, Object.assign(Object.assign({}, header.props), { className: classNames(["zen-nav__header", header.props.className || ""]) })) : null, collapsed ? _jsx(NavDivider, {}) : null, _jsx(NavContent, { children: sectionsToRender.map((section, index) => (_jsxs(Fragment, { children: [cloneElement(section, {
+                ? _jsxs("div", { ref: menuRef, className: classNames(["zen-nav", isMobile ? "zen-nav--mobile" : "", collapsed ? "zen-nav--collapsed" : "", className || ""]), children: [header ? cloneElement(header, Object.assign(Object.assign({}, header.props), { className: classNames(["zen-nav__header", header.props.className || ""]) })) : null, _jsx(NavContent, { children: sectionsToRender.map((section, index) => (_jsxs(Fragment, { children: [cloneElement(section, {
                                         className: classNames(["zen-nav__section", section.props.className || ""])
                                     }), isMobile || index < sectionsToRender.length - 1 ? _jsx(NavDivider, {}) : null] }, index))) }), footerToRender] })
                 : null, mobileBarContainer && isMobile && createPortal(_jsx(NavMobileBar, { onMenuToggle: onMobileMenuToggle, isMenuOpen: isMobileMenuOpen, children: primaryItems }), mobileBarContainer)] });

package/esm/nav/navFooter/navFooter.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, cloneElement } from "react";
@@ -7,51 +8,88 @@ import { useMobile } from "../../commonHelpers/hooks/useMobile";
 import { NavFooterAction } from "./navFooterAction/navFooterAction";
 import { IconEdit } from "../../icons/iconEdit";
 import { useNavContext } from "../context/nav.context";
-const NavFooterComponent = ({ className, children }) => {
-    const { collapsed } = useNavContext();
-    const footerAction = Children.toArray(children).find(child => {
-        const element = child;
-        return element.type && element.type.displayName === "NavFooterAction";
-    });
-    const bottom = Children.toArray(children).find(child => {
-        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 }), bottom] });
+injectString("en", "Edit Navigation", "Edit Navigation");
+const NavFooterComponent = ({
+  className,
+  children
+}) => {
+  const {
+    collapsed
+  } = useNavContext();
+  const footerAction = Children.toArray(children).find(child => {
+    const element = child;
+    return element.type && element.type.displayName === "NavFooterAction";
+  });
+  const bottom = Children.toArray(children).find(child => {
+    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
+    }), bottom]
+  });
 };
-const NavFooterBottom = ({ className, children }) => {
-    const isMobile = useMobile();
-    const { collapsed } = useNavContext();
-    const childrenArray = Children.toArray(children).filter(child => {
-        const element = child;
-        if (!element.type) {
-            return false;
-        }
-        const displayName = element.type.displayName;
-        return displayName === "NavItem" || displayName === "NavAddMenu" || displayName === "NavFooterEditButton";
-    });
-    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" }));
-        }) });
+const NavFooterBottom = ({
+  className,
+  children
+}) => {
+  const isMobile = useMobile();
+  const {
+    collapsed
+  } = useNavContext();
+  const childrenArray = Children.toArray(children).filter(child => {
+    const element = child;
+    if (!element.type) {
+      return false;
+    }
+    const displayName = element.type.displayName;
+    return displayName === "NavItem" || displayName === "NavAddMenu" || displayName === "NavFooterEditButton";
+  });
+  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");
+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,
-    EditButton: NavFooterEditButton
+  Action: NavFooterAction,
+  Bottom: NavFooterBottom,
+  EditButton: NavFooterEditButton
 });
-NavFooter.displayName = "NavFooter";
+NavFooter.displayName = "NavFooter";

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

@@ -1,3 +1,4 @@
+import { injectString } from "../../../utils/localization/translationsDictionary";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useLanguage } from "../../../utils/localization/useLanguage";
 import { NavItem } from "../../navItem/navItem";
@@ -5,16 +6,49 @@ import { IconSettings4 } from "../../../icons/iconSettings4";
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
-export const NavFooterAction = ({ children }) => {
-    const { translate } = 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 _jsx(NavItem, { primaryIcon: IconSettings4, title: translate("Configure"), menuAlignment: "right-bottom", children: filteredItems });
+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");
+export const NavFooterAction = ({
+  children
+}) => {
+  const {
+    translate
+  } = 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 _jsx(NavItem, {
+    primaryIcon: IconSettings4,
+    title: translate("Configure"),
+    menuAlignment: "right-bottom",
+    children: filteredItems
+  });
 };
-NavFooterAction.displayName = "NavFooterAction";
+NavFooterAction.displayName = "NavFooterAction";