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

package/dist/modal/modal.js

@@ -1,31 +1,69 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {
+  Object.defineProperty(o, "default", {
+    enumerable: true,
+    value: v
+  });
+} : function (o, v) {
+  o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importStar = this && this.__importStar || function (mod) {
+  if (mod && mod.__esModule) return mod;
+  var result = {};
+  if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+  __setModuleDefault(result, mod);
+  return result;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.DialogContentNew = exports.Modal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/naming-convention */
+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");
 const react_1 = __importStar(require("react"));
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const button_1 = require("../button/button");
@@ -45,131 +83,251 @@ const dialogHelpers_1 = require("../dialog/dialogHelpers");
 const themeContext_1 = require("../utils/theme/themeContext");
 const modalHelpers_1 = require("./modalHelpers");
 const textIconButton_1 = require("../textIconButton/textIconButton");
-const Modal = ({ isOpen, children, onClose, closeOnClickOutside, maxWidth, title, type, className, focus, modalContainerClassName }) => {
-    const lastActiveOutsideElement = (0, react_1.useRef)(document.activeElement);
-    const modalRoot = document.fullscreenElement || document.body;
-    const [top, setTop] = (0, react_1.useState)(`${window.pageYOffset}px`);
-    const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
-    const onOutSideClick = (0, react_1.useCallback)(() => {
-        if (!isOpen || !closeOnClickOutside || !onClose) {
-            return;
-        }
-        onClose();
-    }, [onClose, isOpen, closeOnClickOutside]);
-    (0, react_1.useEffect)(() => {
-        const copyActive = lastActiveOutsideElement.current;
-        return () => {
-            (0, dialogHelpers_1.isFocusable)(copyActive) && copyActive.focus();
-        };
-    }, []);
-    (0, react_1.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]);
-    (0, react_1.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 = (0, react_1.useId)();
-    const darkClass = dark ? "zen-dark" : "";
-    const modalContent = (0, react_1.useMemo)(() => {
-        const someContent = [];
-        react_1.default.Children.forEach(children, (child, index) => {
-            const childrenWithProps = (0, react_1.isValidElement)(child)
-                ? (0, react_1.cloneElement)(child, Object.assign(Object.assign({}, child.props), { key: index }))
-                : child;
-            someContent.push(childrenWithProps);
-        });
-        return someContent;
-    }, [children]);
-    const dialogHTML = (0, react_1.useCallback)((id) => (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-modal", darkClass, modalContainerClassName || ""]), "aria-labelledby": labeledId, "aria-modal": "true", role: "dialog", style: { top: top }, children: [(0, jsx_runtime_1.jsx)(exports.Modal.Content, { onClose: onClose, maxWidth: maxWidth, title: title, className: className, type: type, labeledId: id, focus: focus, children: modalContent.length > 0 && modalContent.map((el) => el) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-modal__shield", onClick: onOutSideClick })] }), [darkClass, modalContainerClassName, labeledId, top, onClose, maxWidth, title, className, type, focus, modalContent, onOutSideClick]);
-    if (!isOpen) {
-        return null;
+const Modal = ({
+  isOpen,
+  children,
+  onClose,
+  closeOnClickOutside,
+  maxWidth,
+  title,
+  type,
+  className,
+  focus,
+  modalContainerClassName
+}) => {
+  const lastActiveOutsideElement = (0, react_1.useRef)(document.activeElement);
+  const modalRoot = document.fullscreenElement || document.body;
+  const [top, setTop] = (0, react_1.useState)(`${window.pageYOffset}px`);
+  const {
+    dark
+  } = (0, react_1.useContext)(themeContext_1.themeContext);
+  const onOutSideClick = (0, react_1.useCallback)(() => {
+    if (!isOpen || !closeOnClickOutside || !onClose) {
+      return;
+    }
+    onClose();
+  }, [onClose, isOpen, closeOnClickOutside]);
+  (0, react_1.useEffect)(() => {
+    const copyActive = lastActiveOutsideElement.current;
+    return () => {
+      (0, dialogHelpers_1.isFocusable)(copyActive) && copyActive.focus();
+    };
+  }, []);
+  (0, react_1.useEffect)(() => {
+    document.body.classList.remove("zen-modal-content--hidden-overflow");
+    if (isOpen) {
+      document.body.classList.add("zen-modal-content--hidden-overflow");
     }
-    return (0, react_dom_1.createPortal)(dialogHTML(labeledId), modalRoot, "ModalPortal" + labeledId);
+    return () => {
+      document.body.classList.remove("zen-modal-content--hidden-overflow");
+    };
+  }, [isOpen]);
+  (0, react_1.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 = (0, react_1.useId)();
+  const darkClass = dark ? "zen-dark" : "";
+  const modalContent = (0, react_1.useMemo)(() => {
+    const someContent = [];
+    react_1.default.Children.forEach(children, (child, index) => {
+      const childrenWithProps = (0, react_1.isValidElement)(child) ? (0, react_1.cloneElement)(child, Object.assign(Object.assign({}, child.props), {
+        key: index
+      })) : child;
+      someContent.push(childrenWithProps);
+    });
+    return someContent;
+  }, [children]);
+  const dialogHTML = (0, react_1.useCallback)(id => (0, jsx_runtime_1.jsxs)("div", {
+    className: (0, classNames_1.classNames)(["zen-modal", darkClass, modalContainerClassName || ""]),
+    "aria-labelledby": labeledId,
+    "aria-modal": "true",
+    role: "dialog",
+    style: {
+      top: top
+    },
+    children: [(0, jsx_runtime_1.jsx)(exports.Modal.Content, {
+      onClose: onClose,
+      maxWidth: maxWidth,
+      title: title,
+      className: className,
+      type: type,
+      labeledId: id,
+      focus: focus,
+      children: modalContent.length > 0 && modalContent.map(el => el)
+    }), (0, jsx_runtime_1.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 (0, react_dom_1.createPortal)(dialogHTML(labeledId), modalRoot, "ModalPortal" + labeledId);
 };
 exports.Modal = Modal;
-const dummyOnClose = () => { };
-const DialogContentNew = ({ onClose, className, title, type, maxWidth = "600px", labeledId, focus, children }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const isMobile = (0, useMobile_1.useMobile)();
-    const contentRef = (0, react_1.useRef)(null);
-    const iconDriveClassName = (0, useDriveClassName_1.useDriveClassName)("icon");
-    const iconsByType = (0, react_1.useMemo)(() => ({
-        "error": iconException_1.IconException,
-        "success": iconCheckRadio_1.IconCheckRadio,
-        "warning": iconWarning_1.IconWarning,
-        "info": iconInfoCircle_1.IconInfoCircle
-    }), []);
-    const subscriptionCondition = (0, react_1.useCallback)((trigger) => trigger.current !== null, []);
-    (0, useTrapFocus_1.useTrapFocus)(contentRef, undefined, contentRef, subscriptionCondition);
-    (0, useEscape_1.useEscape)(contentRef, onClose || dummyOnClose, contentRef, subscriptionCondition);
-    (0, react_1.useEffect)(() => {
-        if (contentRef.current === null) {
-            return;
-        }
-        const firstFocusableElement = (0, modalHelpers_1.getPredefinedFocusableItem)(contentRef.current, focus);
-        if (firstFocusableElement) {
-            firstFocusableElement.focus();
-            return;
-        }
-        const focusable = contentRef.current.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR);
-        focusable.length && focusable[focusable.length - 1].focus();
-    }, [contentRef, focus]);
-    const bodyContent = (0, react_1.useMemo)(() => {
-        const modalContent = [];
-        let tertiaryButton;
-        let primaryButton;
-        let secondaryButton;
-        react_1.default.Children.forEach(children, (child) => {
-            if (!(0, react_1.isValidElement)(child)) {
-                modalContent.push(child);
-                return;
-            }
-            if (child.type === exports.Modal.PrimaryButton) {
-                primaryButton = child;
-                return;
-            }
-            if (child.type === exports.Modal.SecondaryButton) {
-                secondaryButton = child;
-                return;
-            }
-            if (child.type === exports.Modal.TertiaryButton) {
-                tertiaryButton = child;
-                return;
-            }
-            modalContent.push(child);
-        });
-        return { modalContent, primaryButton, secondaryButton, tertiaryButton };
-    }, [children]);
-    const isFooterVisible = !!bodyContent.tertiaryButton || !!bodyContent.secondaryButton || !!bodyContent.primaryButton;
-    const modalContentClasses = (0, classNames_1.classNames)(["zen-modal-content__body", "body-02-short", !isFooterVisible ? "zen-modal-content__body--no-footer" : ""]);
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-modal-content", "body-02", className ? className : ""]), 
-        // TODO implement sizing for modal and get rid of style
-        style: { maxWidth: maxWidth }, ref: contentRef, children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-modal-content__header", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-modal-content__header-title heading-04 zen-ellipsis", id: labeledId, children: [type && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-modal-content__icon", `${("zen-modal-content__icon--" + type)}`]), children: (0, react_1.createElement)(iconsByType[type], {
-                                    size: iconDriveClassName ? "huge" : "large"
-                                }) }), title] }), onClose && (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary", "data-focusable": "close", className: "zen-modal-content__header-close-button", title: translate("Close"), "aria-label": translate("Close"), onClick: onClose, children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { description: translate("Close"), className: "svgIcon", size: iconDriveClassName ? "huge" : "large" }) })] }), bodyContent.modalContent.length > 0 && (0, jsx_runtime_1.jsx)("div", { className: modalContentClasses, children: bodyContent.modalContent.map((el, index) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: el }, index)) }), isFooterVisible &&
-                (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-modal-content__footer", isMobile ? "zen-modal-content__footer--mobile" : ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-modal-content__footer-left", isMobile ? "zen-modal-content__footer-left--mobile" : ""]), children: bodyContent.tertiaryButton }), (bodyContent.secondaryButton || bodyContent.primaryButton) && (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-modal-content__footer-right", isMobile ? "zen-modal-content__footer-right--mobile" : ""]), children: [bodyContent.secondaryButton, bodyContent.primaryButton] })] })] });
+const dummyOnClose = () => {};
+const DialogContentNew = ({
+  onClose,
+  className,
+  title,
+  type,
+  maxWidth = "600px",
+  labeledId,
+  focus,
+  children
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const isMobile = (0, useMobile_1.useMobile)();
+  const contentRef = (0, react_1.useRef)(null);
+  const iconDriveClassName = (0, useDriveClassName_1.useDriveClassName)("icon");
+  const iconsByType = (0, react_1.useMemo)(() => ({
+    "error": iconException_1.IconException,
+    "success": iconCheckRadio_1.IconCheckRadio,
+    "warning": iconWarning_1.IconWarning,
+    "info": iconInfoCircle_1.IconInfoCircle
+  }), []);
+  const subscriptionCondition = (0, react_1.useCallback)(trigger => trigger.current !== null, []);
+  (0, useTrapFocus_1.useTrapFocus)(contentRef, undefined, contentRef, subscriptionCondition);
+  (0, useEscape_1.useEscape)(contentRef, onClose || dummyOnClose, contentRef, subscriptionCondition);
+  (0, react_1.useEffect)(() => {
+    if (contentRef.current === null) {
+      return;
+    }
+    const firstFocusableElement = (0, modalHelpers_1.getPredefinedFocusableItem)(contentRef.current, focus);
+    if (firstFocusableElement) {
+      firstFocusableElement.focus();
+      return;
+    }
+    const focusable = contentRef.current.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR);
+    focusable.length && focusable[focusable.length - 1].focus();
+  }, [contentRef, focus]);
+  const bodyContent = (0, react_1.useMemo)(() => {
+    const modalContent = [];
+    let tertiaryButton;
+    let primaryButton;
+    let secondaryButton;
+    react_1.default.Children.forEach(children, child => {
+      if (!(0, react_1.isValidElement)(child)) {
+        modalContent.push(child);
+        return;
+      }
+      if (child.type === exports.Modal.PrimaryButton) {
+        primaryButton = child;
+        return;
+      }
+      if (child.type === exports.Modal.SecondaryButton) {
+        secondaryButton = child;
+        return;
+      }
+      if (child.type === exports.Modal.TertiaryButton) {
+        tertiaryButton = child;
+        return;
+      }
+      modalContent.push(child);
+    });
+    return {
+      modalContent,
+      primaryButton,
+      secondaryButton,
+      tertiaryButton
+    };
+  }, [children]);
+  const isFooterVisible = !!bodyContent.tertiaryButton || !!bodyContent.secondaryButton || !!bodyContent.primaryButton;
+  const modalContentClasses = (0, classNames_1.classNames)(["zen-modal-content__body", "body-02-short", !isFooterVisible ? "zen-modal-content__body--no-footer" : ""]);
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: (0, classNames_1.classNames)(["zen-modal-content", "body-02", className ? className : ""]),
+    // TODO implement sizing for modal and get rid of style
+    style: {
+      maxWidth: maxWidth
+    },
+    ref: contentRef,
+    children: [(0, jsx_runtime_1.jsxs)("div", {
+      className: "zen-modal-content__header",
+      children: [(0, jsx_runtime_1.jsxs)("div", {
+        className: "zen-modal-content__header-title heading-04 zen-ellipsis",
+        id: labeledId,
+        children: [type && (0, jsx_runtime_1.jsx)("div", {
+          className: (0, classNames_1.classNames)(["zen-modal-content__icon", `${"zen-modal-content__icon--" + type}`]),
+          children: (0, react_1.createElement)(iconsByType[type], {
+            size: iconDriveClassName ? "huge" : "large"
+          })
+        }), title]
+      }), onClose && (0, jsx_runtime_1.jsx)(button_1.Button, {
+        type: "tertiary",
+        "data-focusable": "close",
+        className: "zen-modal-content__header-close-button",
+        title: translate("Close"),
+        "aria-label": translate("Close"),
+        onClick: onClose,
+        children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, {
+          description: translate("Close"),
+          className: "svgIcon",
+          size: iconDriveClassName ? "huge" : "large"
+        })
+      })]
+    }), bodyContent.modalContent.length > 0 && (0, jsx_runtime_1.jsx)("div", {
+      className: modalContentClasses,
+      children: bodyContent.modalContent.map((el, index) => (0, jsx_runtime_1.jsx)(react_1.Fragment, {
+        children: el
+      }, index))
+    }), isFooterVisible && (0, jsx_runtime_1.jsxs)("div", {
+      className: (0, classNames_1.classNames)(["zen-modal-content__footer", isMobile ? "zen-modal-content__footer--mobile" : ""]),
+      children: [(0, jsx_runtime_1.jsx)("div", {
+        className: (0, classNames_1.classNames)(["zen-modal-content__footer-left", isMobile ? "zen-modal-content__footer-left--mobile" : ""]),
+        children: bodyContent.tertiaryButton
+      }), (bodyContent.secondaryButton || bodyContent.primaryButton) && (0, jsx_runtime_1.jsxs)("div", {
+        className: (0, classNames_1.classNames)(["zen-modal-content__footer-right", isMobile ? "zen-modal-content__footer-right--mobile" : ""]),
+        children: [bodyContent.secondaryButton, bodyContent.primaryButton]
+      })]
+    })]
+  });
 };
 exports.DialogContentNew = DialogContentNew;
-const SecondaryButton = (secondaryButton) => secondaryButton.icon ? (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, Object.assign({ className: "zen-modal-content__icon-button" }, secondaryButton, { icon: secondaryButton.icon, "data-focusable": "secondary", children: secondaryButton.children }))
-    : (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({}, secondaryButton, { "data-focusable": "secondary", children: secondaryButton.children }));
-const PrimaryButton = (primaryButton) => primaryButton.icon ? (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, Object.assign({ className: "zen-modal-content__icon-button" }, primaryButton, { type: primaryButton.type || "primary", icon: primaryButton.icon, "data-focusable": "primary", children: primaryButton.children })) : (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({}, primaryButton, { "data-focusable": "primary", type: primaryButton.type || "primary", children: primaryButton.children }));
-const TertiaryButton = (tertiaryButton) => tertiaryButton.icon ?
-    (0, jsx_runtime_1.jsx)(textIconButton_1.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 })) : (0, jsx_runtime_1.jsx)(button_1.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 ? (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, Object.assign({
+  className: "zen-modal-content__icon-button"
+}, secondaryButton, {
+  icon: secondaryButton.icon,
+  "data-focusable": "secondary",
+  children: secondaryButton.children
+})) : (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({}, secondaryButton, {
+  "data-focusable": "secondary",
+  children: secondaryButton.children
+}));
+const PrimaryButton = primaryButton => primaryButton.icon ? (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, Object.assign({
+  className: "zen-modal-content__icon-button"
+}, primaryButton, {
+  type: primaryButton.type || "primary",
+  icon: primaryButton.icon,
+  "data-focusable": "primary",
+  children: primaryButton.children
+})) : (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({}, primaryButton, {
+  "data-focusable": "primary",
+  type: primaryButton.type || "primary",
+  children: primaryButton.children
+}));
+const TertiaryButton = tertiaryButton => tertiaryButton.icon ? (0, jsx_runtime_1.jsx)(textIconButton_1.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
+})) : (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({}, tertiaryButton, {
+  type: tertiaryButton.type || "tertiary",
+  className: "zen-modal-content__left-button",
+  "data-focusable": "tertiary",
+  children: tertiaryButton.children
+}));
 exports.Modal.Content = exports.DialogContentNew;
 exports.Modal.SecondaryButton = SecondaryButton;
 exports.Modal.PrimaryButton = PrimaryButton;
-exports.Modal.TertiaryButton = TertiaryButton;
+exports.Modal.TertiaryButton = TertiaryButton;

package/dist/nav/nav.js

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

package/dist/nav/navFooter/navFooter.js

@@ -1,7 +1,14 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.NavFooter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+injectString("en", "Edit Navigation", "Edit Navigation");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const react_1 = require("react");
 const navItem_1 = require("../navItem/navItem");
@@ -10,51 +17,87 @@ const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
 const navFooterAction_1 = require("./navFooterAction/navFooterAction");
 const iconEdit_1 = require("../../icons/iconEdit");
 const nav_context_1 = require("../context/nav.context");
-const NavFooterComponent = ({ className, children }) => {
-    const { collapsed } = (0, nav_context_1.useNavContext)();
-    const footerAction = react_1.Children.toArray(children).find(child => {
-        const element = child;
-        return element.type && element.type.displayName === "NavFooterAction";
-    });
-    const bottom = react_1.Children.toArray(children).find(child => {
-        const element = child;
-        return element.type && element.type.displayName === "NavFooterBottom";
-    });
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-nav-footer", collapsed ? "zen-nav-footer--collapsed" : "", className || ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-nav-footer__top", children: footerAction }), bottom] });
+const NavFooterComponent = ({
+  className,
+  children
+}) => {
+  const {
+    collapsed
+  } = (0, nav_context_1.useNavContext)();
+  const footerAction = react_1.Children.toArray(children).find(child => {
+    const element = child;
+    return element.type && element.type.displayName === "NavFooterAction";
+  });
+  const bottom = react_1.Children.toArray(children).find(child => {
+    const element = child;
+    return element.type && element.type.displayName === "NavFooterBottom";
+  });
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: (0, classNames_1.classNames)(["zen-nav-footer", collapsed ? "zen-nav-footer--collapsed" : "", className || ""]),
+    children: [(0, jsx_runtime_1.jsx)("div", {
+      className: "zen-nav-footer__top",
+      children: footerAction
+    }), bottom]
+  });
 };
-const NavFooterBottom = ({ className, children }) => {
-    const isMobile = (0, useMobile_1.useMobile)();
-    const { collapsed } = (0, nav_context_1.useNavContext)();
-    const childrenArray = react_1.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 (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-nav-footer__bottom", isMobile ? "zen-nav-footer__bottom--mobile" : "", className || ""]), children: childrenArray.map(child => {
-            const childElement = child;
-            return (0, react_1.cloneElement)(childElement, Object.assign(Object.assign({}, childElement.props), { collapsed: !isMobile, className: (0, classNames_1.classNames)([
-                    childElement.props.className || "",
-                    "zen-nav-footer__button"
-                ]), menuAlignment: "right-bottom", tooltipAlignment: collapsed ? "right" : "top" }));
-        }) });
+const NavFooterBottom = ({
+  className,
+  children
+}) => {
+  const isMobile = (0, useMobile_1.useMobile)();
+  const {
+    collapsed
+  } = (0, nav_context_1.useNavContext)();
+  const childrenArray = react_1.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 (0, jsx_runtime_1.jsx)("div", {
+    className: (0, classNames_1.classNames)(["zen-nav-footer__bottom", isMobile ? "zen-nav-footer__bottom--mobile" : "", className || ""]),
+    children: childrenArray.map(child => {
+      const childElement = child;
+      return (0, react_1.cloneElement)(childElement, Object.assign(Object.assign({}, childElement.props), {
+        collapsed: !isMobile,
+        className: (0, classNames_1.classNames)([childElement.props.className || "", "zen-nav-footer__button"]),
+        menuAlignment: "right-bottom",
+        tooltipAlignment: collapsed ? "right" : "top"
+      }));
+    })
+  });
 };
 NavFooterBottom.displayName = "NavFooterBottom";
-const NavFooterEditButton = ({ className, onClick }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const { collapsed } = (0, nav_context_1.useNavContext)();
-    const isMobile = (0, useMobile_1.useMobile)();
-    return (0, jsx_runtime_1.jsx)(navItem_1.NavItem, { className: (0, classNames_1.classNames)(["zen-nav-footer__button", className || ""]), title: translate("Edit Navigation"), collapsed: !isMobile, primaryIcon: iconEdit_1.IconEdit, onClick: () => onClick && onClick(), menuAlignment: "right-bottom", tooltipAlignment: collapsed ? "right" : "top" }, "edit-button");
+const NavFooterEditButton = ({
+  className,
+  onClick
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const {
+    collapsed
+  } = (0, nav_context_1.useNavContext)();
+  const isMobile = (0, useMobile_1.useMobile)();
+  return (0, jsx_runtime_1.jsx)(navItem_1.NavItem, {
+    className: (0, classNames_1.classNames)(["zen-nav-footer__button", className || ""]),
+    title: translate("Edit Navigation"),
+    collapsed: !isMobile,
+    primaryIcon: iconEdit_1.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.
  */
 exports.NavFooter = Object.assign(NavFooterComponent, {
-    Action: navFooterAction_1.NavFooterAction,
-    Bottom: NavFooterBottom,
-    EditButton: NavFooterEditButton
+  Action: navFooterAction_1.NavFooterAction,
+  Bottom: NavFooterBottom,
+  EditButton: NavFooterEditButton
 });
-exports.NavFooter.displayName = "NavFooter";
+exports.NavFooter.displayName = "NavFooter";