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

package/esm/list/itemData/itemDataInternal.js

@@ -1,3 +1,4 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement, memo, useCallback, useMemo } from "react";
 import { isButtonAction } from "../interfaces";
@@ -9,55 +10,214 @@ import { IconDotVertical } from "../../icons/iconDotVertical";
 import { Menu } from "../../menu/menu";
 import { isActiveElement } from "../utils/isActiveElement";
 import { Checkbox } from "../../checkbox/checkbox";
-const ItemDataInternalInner = ({ id, visible, icon, iconClassName, name, link, secondary, status, actions, data, onClick, checked, onCheck, isDrive, isMobile, target }) => {
-    const { translate } = useLanguage();
-    const driveClassName = useMemo(() => isDrive
-        ? isMobile ? "zen-item-data-drive" : "zen-item-data-drive-tablet"
-        : "", [isDrive, isMobile]);
-    const renderActions = useCallback(() => {
-        if (!actions || actions.length === 0) {
-            return null;
-        }
-        return _jsx(Menu, { alignment: "bottom-right", title: translate("More"), trigger: _jsx(Button, { type: "tertiary-black", className: "zen-item-data__more-button", "aria-label": translate("More"), title: translate("More"), children: _jsx(IconDotVertical, { size: "large" }) }), children: actions.map((action) => _jsx(Menu.Item, { id: action.name, name: action.name, onClick: isButtonAction(action) ? action.onClick : undefined, link: !isButtonAction(action) ? action.link : undefined }, action.name)) });
-    }, [actions, translate]);
-    const renderIcon = useCallback((iconComponent, iClassName, className) => {
-        if (typeof iconComponent === "function") {
-            return createElement(iconComponent, { size: "large", className: classNames([className || "", iClassName || ""]) });
-        }
-        return iconComponent;
-    }, []);
-    const handleClick = useCallback((e) => {
-        if (!onClick) {
-            return;
-        }
-        if (e.target instanceof HTMLElement && isActiveElement(e.target)) {
-            return;
-        }
-        onClick();
-    }, [onClick]);
-    const handleCheck = useCallback((e) => {
-        if (onCheck) {
-            onCheck(e.target.checked);
-        }
-    }, [onCheck]);
-    const hasCheckbox = useMemo(() => checked !== undefined && onCheck, [checked, onCheck]);
-    const placeholderHeight = useMemo(() => {
-        let plHeight = secondary ? 32 : (icon ? 24 : 16);
-        if (data) {
-            plHeight += 4 + data.length * 16 + (data.length - 1) * 4;
-        }
-        return { height: `${plHeight + 12 * 2 + 1}px` };
-    }, [data, icon, secondary]);
-    const classNamesList = useMemo(() => classNames(["zen-item-data", driveClassName || ""]), [driveClassName]);
-    if (!visible) {
-        return _jsx("li", { style: placeholderHeight, className: classNamesList, "data-list-item-id": id }, id);
+injectString("cs", "More", "V\xEDce");
+injectString("da-DK", "More", "Mere");
+injectString("de", "More", "Mehr");
+injectString("en", "More", "More");
+injectString("es", "More", "M\xE1s");
+injectString("fi-FI", "More", "Lis\xE4\xE4");
+injectString("fr", "More", "Plus");
+injectString("fr-FR", "More", "En savoir plus");
+injectString("hu-HU", "More", "M\xE9g t\xF6bb.");
+injectString("id", "More", "Lainnya");
+injectString("it", "More", "Altro");
+injectString("ja", "More", "\u305D\u306E\u4ED6");
+injectString("ko-KR", "More", "\uC790\uC138\uD788");
+injectString("ms", "More", "Lagi");
+injectString("nb-NO", "More", "Mer");
+injectString("nl", "More", "Meer");
+injectString("pl", "More", "Wi\u0119cej");
+injectString("pt-BR", "More", "Mais");
+injectString("sk-SK", "More", "Viac");
+injectString("sv", "More", "Mer");
+injectString("th", "More", "\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21");
+injectString("tr", "More", "Di\u011Fer");
+injectString("zh-Hans", "More", "\u66F4\u591A");
+injectString("zh-TW", "More", "\u66F4\u591A");
+injectString("cs", "Open", "Otev\u0159\xEDt");
+injectString("da-DK", "Open", "\xC5bn");
+injectString("de", "Open", "Offen");
+injectString("en", "Open", "Open");
+injectString("es", "Open", "Abierto");
+injectString("fi-FI", "Open", "Avaa");
+injectString("fr", "Open", "Ouvert");
+injectString("fr-FR", "Open", "Ouvrir");
+injectString("hu-HU", "Open", "Megnyit\xE1s");
+injectString("id", "Open", "Buka");
+injectString("it", "Open", "Aperto");
+injectString("ja", "Open", "\u30AA\u30FC\u30D7\u30F3");
+injectString("ko-KR", "Open", "\uC5F4\uB824 \uC788\uB294");
+injectString("ms", "Open", "Buka");
+injectString("nb-NO", "Open", "\xC5pne");
+injectString("nl", "Open", "Open");
+injectString("pl", "Open", "Otw\xF3rz");
+injectString("pt-BR", "Open", "Aberto");
+injectString("sk-SK", "Open", "Otvoren\xE9");
+injectString("sv", "Open", "\xD6ppna");
+injectString("th", "Open", "\u0E40\u0E1B\u0E34\u0E14");
+injectString("tr", "Open", "A\xE7");
+injectString("zh-Hans", "Open", "\u6253\u5F00");
+injectString("zh-TW", "Open", "\u958B\u555F");
+const ItemDataInternalInner = ({
+  id,
+  visible,
+  icon,
+  iconClassName,
+  name,
+  link,
+  secondary,
+  status,
+  actions,
+  data,
+  onClick,
+  checked,
+  onCheck,
+  isDrive,
+  isMobile,
+  target
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  const driveClassName = useMemo(() => isDrive ? isMobile ? "zen-item-data-drive" : "zen-item-data-drive-tablet" : "", [isDrive, isMobile]);
+  const renderActions = useCallback(() => {
+    if (!actions || actions.length === 0) {
+      return null;
     }
-    return _jsxs("li", { className: classNames(["zen-item-data", driveClassName || ""]), "data-list-item-id": id, onClick: handleClick, children: [_jsxs("div", { className: "zen-item-data__main", children: [hasCheckbox && _jsx(Checkbox, { className: "zen-item-data__checkbox", checked: checked, onChange: handleCheck, title: name }), icon ? _jsx("div", { className: classNames(["zen-item-data__icon", iconClassName || ""]), children: renderIcon(icon) }) : null, _jsxs("div", { className: "zen-item-data__main-data", children: [_jsxs("div", { className: "zen-item-data__identifier", children: [link
-                                        ? _jsx("a", { href: link, target: target, className: "zen-item-data__link zen-link zen-link--light zen-link--inline", children: name })
-                                        : _jsx("div", { className: "zen-item-data__name", children: name }), secondary ? _jsx("div", { className: "zen-item-data__secondary", children: secondary }) : null] }), status ? _jsx("div", { className: "zen-item-data__status", children: status }) : null, renderActions(), onClick ? _jsx(Button, { type: "tertiary-black", className: "zen-item-data__click", onClick: onClick, title: translate("Open"), "aria-label": translate("Open"), children: _jsx(IconChevronRight, { size: "large", className: "zen-item-data__click-icon" }) }) : null] })] }), data && data.length > 0
-                ? _jsxs("div", { className: "zen-item-data__secondary-data", children: [hasCheckbox ? _jsx("div", { className: "zen-item-data__checkbox-placeholder" }) : null, icon ? _jsx("div", { className: "zen-item-data__icon-placeholder" }) : null, _jsx("div", { className: "zen-item-data__data", children: data.map((item, index) => (_jsxs("div", { className: "zen-item-data__data-row", children: [item.label ? _jsx("span", { className: "zen-item-data__data-label", children: item.label }) : null, _jsxs("span", { className: "zen-item-data__data-value", children: [item.icon ? renderIcon(item.icon, item.iconClassName, "zen-item-data__data-value-icon") : null, item.link
-                                                ? _jsx("a", { className: "zen-link zen-link--inline zen-link--light", href: item.link, target: target, children: item.value })
-                                                : _jsx("span", { className: "zen-item-data__data-value-text", children: item.value })] })] }, index))) })] })
-                : null] }, id);
+    return _jsx(Menu, {
+      alignment: "bottom-right",
+      title: translate("More"),
+      trigger: _jsx(Button, {
+        type: "tertiary-black",
+        className: "zen-item-data__more-button",
+        "aria-label": translate("More"),
+        title: translate("More"),
+        children: _jsx(IconDotVertical, {
+          size: "large"
+        })
+      }),
+      children: actions.map(action => _jsx(Menu.Item, {
+        id: action.name,
+        name: action.name,
+        onClick: isButtonAction(action) ? action.onClick : undefined,
+        link: !isButtonAction(action) ? action.link : undefined
+      }, action.name))
+    });
+  }, [actions, translate]);
+  const renderIcon = useCallback((iconComponent, iClassName, className) => {
+    if (typeof iconComponent === "function") {
+      return createElement(iconComponent, {
+        size: "large",
+        className: classNames([className || "", iClassName || ""])
+      });
+    }
+    return iconComponent;
+  }, []);
+  const handleClick = useCallback(e => {
+    if (!onClick) {
+      return;
+    }
+    if (e.target instanceof HTMLElement && isActiveElement(e.target)) {
+      return;
+    }
+    onClick();
+  }, [onClick]);
+  const handleCheck = useCallback(e => {
+    if (onCheck) {
+      onCheck(e.target.checked);
+    }
+  }, [onCheck]);
+  const hasCheckbox = useMemo(() => checked !== undefined && onCheck, [checked, onCheck]);
+  const placeholderHeight = useMemo(() => {
+    let plHeight = secondary ? 32 : icon ? 24 : 16;
+    if (data) {
+      plHeight += 4 + data.length * 16 + (data.length - 1) * 4;
+    }
+    return {
+      height: `${plHeight + 12 * 2 + 1}px`
+    };
+  }, [data, icon, secondary]);
+  const classNamesList = useMemo(() => classNames(["zen-item-data", driveClassName || ""]), [driveClassName]);
+  if (!visible) {
+    return _jsx("li", {
+      style: placeholderHeight,
+      className: classNamesList,
+      "data-list-item-id": id
+    }, id);
+  }
+  return _jsxs("li", {
+    className: classNames(["zen-item-data", driveClassName || ""]),
+    "data-list-item-id": id,
+    onClick: handleClick,
+    children: [_jsxs("div", {
+      className: "zen-item-data__main",
+      children: [hasCheckbox && _jsx(Checkbox, {
+        className: "zen-item-data__checkbox",
+        checked: checked,
+        onChange: handleCheck,
+        title: name
+      }), icon ? _jsx("div", {
+        className: classNames(["zen-item-data__icon", iconClassName || ""]),
+        children: renderIcon(icon)
+      }) : null, _jsxs("div", {
+        className: "zen-item-data__main-data",
+        children: [_jsxs("div", {
+          className: "zen-item-data__identifier",
+          children: [link ? _jsx("a", {
+            href: link,
+            target: target,
+            className: "zen-item-data__link zen-link zen-link--light zen-link--inline",
+            children: name
+          }) : _jsx("div", {
+            className: "zen-item-data__name",
+            children: name
+          }), secondary ? _jsx("div", {
+            className: "zen-item-data__secondary",
+            children: secondary
+          }) : null]
+        }), status ? _jsx("div", {
+          className: "zen-item-data__status",
+          children: status
+        }) : null, renderActions(), onClick ? _jsx(Button, {
+          type: "tertiary-black",
+          className: "zen-item-data__click",
+          onClick: onClick,
+          title: translate("Open"),
+          "aria-label": translate("Open"),
+          children: _jsx(IconChevronRight, {
+            size: "large",
+            className: "zen-item-data__click-icon"
+          })
+        }) : null]
+      })]
+    }), data && data.length > 0 ? _jsxs("div", {
+      className: "zen-item-data__secondary-data",
+      children: [hasCheckbox ? _jsx("div", {
+        className: "zen-item-data__checkbox-placeholder"
+      }) : null, icon ? _jsx("div", {
+        className: "zen-item-data__icon-placeholder"
+      }) : null, _jsx("div", {
+        className: "zen-item-data__data",
+        children: data.map((item, index) => _jsxs("div", {
+          className: "zen-item-data__data-row",
+          children: [item.label ? _jsx("span", {
+            className: "zen-item-data__data-label",
+            children: item.label
+          }) : null, _jsxs("span", {
+            className: "zen-item-data__data-value",
+            children: [item.icon ? renderIcon(item.icon, item.iconClassName, "zen-item-data__data-value-icon") : null, item.link ? _jsx("a", {
+              className: "zen-link zen-link--inline zen-link--light",
+              href: item.link,
+              target: target,
+              children: item.value
+            }) : _jsx("span", {
+              className: "zen-item-data__data-value-text",
+              children: item.value
+            })]
+          })]
+        }, index))
+      })]
+    }) : null]
+  }, id);
 };
-export const ItemDataInternal = memo(ItemDataInternalInner);
+export const ItemDataInternal = memo(ItemDataInternalInner);

package/esm/list/listItem/listItem.js

@@ -1,3 +1,4 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement, useCallback, useMemo, useRef } from "react";
 import { IconGrab } from "../../icons/iconGrab";
@@ -12,57 +13,164 @@ import { classNames } from "../../commonHelpers/classNames/classNames";
 import { useIconSize } from "../../utils/theme/useIconSize";
 import { IconChevronRight } from "../../icons/iconChevronRight";
 import { isActiveElement } from "../utils/isActiveElement";
-export const ListItem = ({ id, className, image, name, secondary, status, actions, onClick, link, target, onDragStart }) => {
-    const isMobile = useMobile();
-    const driveClassName = useDriveClassName("zen-list-item");
-    const iconSize = useIconSize();
-    const { translate } = useLanguage();
-    const itemRef = useRef(null);
-    const renderActions = useCallback(() => {
-        if (!actions || actions.length === 0) {
-            return null;
-        }
-        const { primaryActions, secondaryActions } = actions.reduce((acc, action) => {
-            if (!isMobile && action.hasOwnProperty("icon")) {
-                acc.primaryActions.push(action);
-            }
-            else {
-                acc.secondaryActions.push(action);
-            }
-            return acc;
-        }, { primaryActions: [], secondaryActions: [] });
-        const buttons = _jsx("div", { className: "zen-list-item__actions", children: primaryActions.map((action) => _jsx(Button, { type: "tertiary-black", className: "zen-list-item__action-button", onClick: isButtonAction(action) ? action.onClick : undefined, link: !isButtonAction(action) ? action.link : undefined, children: action.icon ? createElement(action.icon, { size: iconSize }) : null }, action.name)) });
-        const menu = secondaryActions.length > 0
-            ? _jsx(Menu, { alignment: "bottom-right", title: translate("More"), trigger: _jsx(Button, { type: "tertiary-black", className: "zen-list-item__more-button", children: _jsx(IconDotVertical, { size: "large" }) }), children: secondaryActions.map((action) => _jsx(Menu.Item, { id: action.name, name: action.name, onClick: isButtonAction(action) ? action.onClick : undefined, link: !isButtonAction(action) ? action.link : undefined }, action.name)) })
-            : null;
-        return _jsxs(_Fragment, { children: [buttons, menu] });
-    }, [actions, iconSize, isMobile, translate]);
-    const isDndElement = useCallback((el) => {
-        if (!el) {
-            return false;
-        }
-        if (typeof el.className !== "string") {
-            return false;
-        }
-        return el.className.indexOf("zen-list-item__dnd") !== -1;
-    }, []);
-    const handleClick = useCallback((e) => {
-        if (!onClick && !link) {
-            return;
-        }
-        if (isActiveElement(e.target) || isDndElement(e.target)) {
-            return;
-        }
-        if (onClick) {
-            onClick();
-            return;
-        }
-        if (itemRef.current) {
-            const linkEl = itemRef.current.querySelector(".zen-list-item__click");
-            linkEl === null || linkEl === void 0 ? void 0 : linkEl.click();
-        }
-    }, [isDndElement, link, onClick]);
-    const clickableClassName = useMemo(() => onClick || link ? "zen-list-item--clickable" : "", [link, onClick]);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return _jsxs("li", { id: id, className: classNames(["zen-list-item", driveClassName || "", clickableClassName, className || ""]), onClick: handleClick, ref: itemRef, children: [onDragStart ? _jsx("div", { className: "zen-list-item__dnd", onPointerDown: onDragStart, children: _jsx(IconGrab, { size: "large" }) }) : null, image ? _jsx("div", { className: "zen-list-item__image", children: image }) : null, _jsxs("div", { className: "zen-list-item__identifier", children: [_jsx("div", { className: "zen-list-item__name", children: name }), _jsx("div", { className: "zen-list-item__secondary", children: secondary })] }), status ? _jsx("div", { className: "zen-list-item__status", children: status }) : null, renderActions(), onClick || link ? _jsx(Button, { type: "tertiary-black", className: "zen-list-item__click", onClick: onClick, link: link, target: target, children: _jsx(IconChevronRight, { size: "large", className: "zen-list-item__click-icon" }) }) : null] });
-};
+injectString("cs", "More", "V\xEDce");
+injectString("da-DK", "More", "Mere");
+injectString("de", "More", "Mehr");
+injectString("en", "More", "More");
+injectString("es", "More", "M\xE1s");
+injectString("fi-FI", "More", "Lis\xE4\xE4");
+injectString("fr", "More", "Plus");
+injectString("fr-FR", "More", "En savoir plus");
+injectString("hu-HU", "More", "M\xE9g t\xF6bb.");
+injectString("id", "More", "Lainnya");
+injectString("it", "More", "Altro");
+injectString("ja", "More", "\u305D\u306E\u4ED6");
+injectString("ko-KR", "More", "\uC790\uC138\uD788");
+injectString("ms", "More", "Lagi");
+injectString("nb-NO", "More", "Mer");
+injectString("nl", "More", "Meer");
+injectString("pl", "More", "Wi\u0119cej");
+injectString("pt-BR", "More", "Mais");
+injectString("sk-SK", "More", "Viac");
+injectString("sv", "More", "Mer");
+injectString("th", "More", "\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21");
+injectString("tr", "More", "Di\u011Fer");
+injectString("zh-Hans", "More", "\u66F4\u591A");
+injectString("zh-TW", "More", "\u66F4\u591A");
+export const ListItem = ({
+  id,
+  className,
+  image,
+  name,
+  secondary,
+  status,
+  actions,
+  onClick,
+  link,
+  target,
+  onDragStart
+}) => {
+  const isMobile = useMobile();
+  const driveClassName = useDriveClassName("zen-list-item");
+  const iconSize = useIconSize();
+  const {
+    translate
+  } = useLanguage();
+  const itemRef = useRef(null);
+  const renderActions = useCallback(() => {
+    if (!actions || actions.length === 0) {
+      return null;
+    }
+    const {
+      primaryActions,
+      secondaryActions
+    } = actions.reduce((acc, action) => {
+      if (!isMobile && action.hasOwnProperty("icon")) {
+        acc.primaryActions.push(action);
+      } else {
+        acc.secondaryActions.push(action);
+      }
+      return acc;
+    }, {
+      primaryActions: [],
+      secondaryActions: []
+    });
+    const buttons = _jsx("div", {
+      className: "zen-list-item__actions",
+      children: primaryActions.map(action => _jsx(Button, {
+        type: "tertiary-black",
+        className: "zen-list-item__action-button",
+        onClick: isButtonAction(action) ? action.onClick : undefined,
+        link: !isButtonAction(action) ? action.link : undefined,
+        children: action.icon ? createElement(action.icon, {
+          size: iconSize
+        }) : null
+      }, action.name))
+    });
+    const menu = secondaryActions.length > 0 ? _jsx(Menu, {
+      alignment: "bottom-right",
+      title: translate("More"),
+      trigger: _jsx(Button, {
+        type: "tertiary-black",
+        className: "zen-list-item__more-button",
+        children: _jsx(IconDotVertical, {
+          size: "large"
+        })
+      }),
+      children: secondaryActions.map(action => _jsx(Menu.Item, {
+        id: action.name,
+        name: action.name,
+        onClick: isButtonAction(action) ? action.onClick : undefined,
+        link: !isButtonAction(action) ? action.link : undefined
+      }, action.name))
+    }) : null;
+    return _jsxs(_Fragment, {
+      children: [buttons, menu]
+    });
+  }, [actions, iconSize, isMobile, translate]);
+  const isDndElement = useCallback(el => {
+    if (!el) {
+      return false;
+    }
+    if (typeof el.className !== "string") {
+      return false;
+    }
+    return el.className.indexOf("zen-list-item__dnd") !== -1;
+  }, []);
+  const handleClick = useCallback(e => {
+    if (!onClick && !link) {
+      return;
+    }
+    if (isActiveElement(e.target) || isDndElement(e.target)) {
+      return;
+    }
+    if (onClick) {
+      onClick();
+      return;
+    }
+    if (itemRef.current) {
+      const linkEl = itemRef.current.querySelector(".zen-list-item__click");
+      linkEl === null || linkEl === void 0 ? void 0 : linkEl.click();
+    }
+  }, [isDndElement, link, onClick]);
+  const clickableClassName = useMemo(() => onClick || link ? "zen-list-item--clickable" : "", [link, onClick]);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return _jsxs("li", {
+    id: id,
+    className: classNames(["zen-list-item", driveClassName || "", clickableClassName, className || ""]),
+    onClick: handleClick,
+    ref: itemRef,
+    children: [onDragStart ? _jsx("div", {
+      className: "zen-list-item__dnd",
+      onPointerDown: onDragStart,
+      children: _jsx(IconGrab, {
+        size: "large"
+      })
+    }) : null, image ? _jsx("div", {
+      className: "zen-list-item__image",
+      children: image
+    }) : null, _jsxs("div", {
+      className: "zen-list-item__identifier",
+      children: [_jsx("div", {
+        className: "zen-list-item__name",
+        children: name
+      }), _jsx("div", {
+        className: "zen-list-item__secondary",
+        children: secondary
+      })]
+    }), status ? _jsx("div", {
+      className: "zen-list-item__status",
+      children: status
+    }) : null, renderActions(), onClick || link ? _jsx(Button, {
+      type: "tertiary-black",
+      className: "zen-list-item__click",
+      onClick: onClick,
+      link: link,
+      target: target,
+      children: _jsx(IconChevronRight, {
+        size: "large",
+        className: "zen-list-item__click-icon"
+      })
+    }) : null]
+  });
+};

package/esm/menu/components/menuErrorItem.js

@@ -1,8 +1,31 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { TextIconButton } from "../../textIconButton/textIconButton";
 import { IconWarning } from "../../icons/iconWarning";
 import { useLanguage } from "../../utils/localization/useLanguage";
-export const MenuErrorItem = ({ id, onClick }) => {
-    const { translate } = useLanguage();
-    return _jsx(TextIconButton, { id: id, className: "zen-menu-error-item", icon: IconWarning, type: "tertiary-destructive", onClick: onClick, role: "menuitem", children: _jsxs(_Fragment, { children: [_jsx("div", { children: translate("Error with loading") }, `error-msg-${id}`), _jsx("div", { className: "zen-menu-error-item__nav", children: translate("Click to refresh") }, `error-nav-${id}`)] }) });
-};
+injectString("en", "Error with loading", "Error with loading");
+injectString("en", "Click to refresh", "Click to refresh");
+export const MenuErrorItem = ({
+  id,
+  onClick
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  return _jsx(TextIconButton, {
+    id: id,
+    className: "zen-menu-error-item",
+    icon: IconWarning,
+    type: "tertiary-destructive",
+    onClick: onClick,
+    role: "menuitem",
+    children: _jsxs(_Fragment, {
+      children: [_jsx("div", {
+        children: translate("Error with loading")
+      }, `error-msg-${id}`), _jsx("div", {
+        className: "zen-menu-error-item__nav",
+        children: translate("Click to refresh")
+      }, `error-nav-${id}`)]
+    })
+  });
+};