@geotab/zenith 3.7.0 → 3.8.0-beta.0

package/esm/list/itemCompact/itemCompactWaiting.js

@@ -3,8 +3,6 @@ import { Skeleton } from "../../skeleton/skeleton";
 import { useMemo } from "react";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 export const ItemCompactWaiting = ({ isDrive, isMobile }) => {
-    const driveClassName = useMemo(() => isDrive
-        ? isMobile ? "zen-list-item-compact--drive" : "zen-list-item-compact--drive-tablet"
-        : "", [isDrive, isMobile]);
-    return _jsx("li", { className: classNames(["zen-list-item-compact", driveClassName]), children: _jsx(Skeleton, { className: "zen-list-item-compact__waiting" }) });
+    const driveClassName = useMemo(() => (isDrive ? (isMobile ? "zen-list-item-compact--drive" : "zen-list-item-compact--drive-tablet") : ""), [isDrive, isMobile]);
+    return (_jsx("li", { className: classNames(["zen-list-item-compact", driveClassName]), children: _jsx(Skeleton, { className: "zen-list-item-compact__waiting" }) }));
 };

package/esm/list/itemData/itemDataInternal.js

@@ -37,6 +37,7 @@ injectString("tr", "More", "Di\u011Fer");
 injectString("zh-Hans", "More", "\u66F4\u591A");
 injectString("zh-TW", "More", "\u66F4\u591A");
 injectString("ro-RO", "More", "Mai multe");
+injectString("ar-SA", "More", "\u0627\u0644\u0645\u0632\u064A\u062F");
 injectString("cs", "Open", "Otev\u0159\xEDt");
 injectString("da-DK", "Open", "\xC5bn");
 injectString("de", "Open", "Offen");
@@ -63,6 +64,7 @@ injectString("tr", "Open", "A\xE7");
 injectString("zh-Hans", "Open", "\u6253\u5F00");
 injectString("zh-TW", "Open", "\u958B\u555F");
 injectString("ro-RO", "Open", "Deschis");
+injectString("ar-SA", "Open", "\u0641\u062A\u062D");
 const ItemDataInternalInner = ({
   id,
   visible,

package/esm/list/itemData/itemDataWaiting.js

@@ -1,7 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { Skeleton } from "../../skeleton/skeleton";
-export const ItemDataWaiting = ({ id, isTall }) => (_jsxs("li", { className: classNames([
-        "zen-item-data",
-        isTall ? "zen-item-data--tall" : ""
-    ]), "data-list-item-id": id, children: [_jsx(Skeleton, { className: "zen-item-data__waiting" }), _jsx(Skeleton, { className: "zen-item-data__waiting" }), _jsx(Skeleton, { className: "zen-item-data__waiting" })] }, id));
+export const ItemDataWaiting = ({ id, isTall }) => (_jsxs("li", { className: classNames(["zen-item-data", isTall ? "zen-item-data--tall" : ""]), "data-list-item-id": id, children: [_jsx(Skeleton, { className: "zen-item-data__waiting" }), _jsx(Skeleton, { className: "zen-item-data__waiting" }), _jsx(Skeleton, { className: "zen-item-data__waiting" })] }, id));

package/esm/list/list.js

@@ -24,7 +24,7 @@ export const List = (props) => {
     const isMobile = useMobile();
     const { isInViewport } = useVirtualScroll(listRef, children);
     useLazyLoading(listRef, isLoading, onListEnd);
-    const childrenArray = useMemo(() => Children.map(children, (child) => {
+    const childrenArray = useMemo(() => Children.map(children, child => {
         const childProps = {
             isDrive: isDrive,
             isMobile: isMobile
@@ -36,9 +36,7 @@ export const List = (props) => {
         if (onCheck && checked && isChildDataListItem) {
             const id = child.props.id;
             childProps.checked = checked.indexOf(id) > -1;
-            childProps.onCheck = (itemChecked) => onCheck(itemChecked
-                ? [...checked, id]
-                : checked.filter((c) => c !== id));
+            childProps.onCheck = itemChecked => onCheck(itemChecked ? [...checked, id] : checked.filter(c => c !== id));
         }
         if (isChildDataListItem) {
             childProps.isTall = isTall;
@@ -47,16 +45,7 @@ export const List = (props) => {
             return cloneElement(child, childProps);
         }
         return child;
-    }), [
-        isTall,
-        checked,
-        children,
-        isDrive,
-        isMobile,
-        onChangeOrder,
-        onCheck,
-        onDragStart
-    ]);
+    }), [isTall, checked, children, isDrive, isMobile, onChangeOrder, onCheck, onDragStart]);
     const loadingChildren = useMemo(() => {
         if (!isLoading) {
             return null;

package/esm/list/listItem/listItem.js

@@ -40,6 +40,7 @@ injectString("tr", "More", "Di\u011Fer");
 injectString("zh-Hans", "More", "\u66F4\u591A");
 injectString("zh-TW", "More", "\u66F4\u591A");
 injectString("ro-RO", "More", "Mai multe");
+injectString("ar-SA", "More", "\u0627\u0644\u0645\u0632\u064A\u062F");
 injectString("cs", "View details", "Zobrazit podrobnosti");
 injectString("da-DK", "View details", "Se detaljer");
 injectString("de", "View details", "Details anzeigen");
@@ -66,6 +67,7 @@ injectString("tr", "View details", "Ayr\u0131nt\u0131lar\u0131 g\xF6r\xFCnt\xFCl
 injectString("zh-Hans", "View details", "\u67E5\u770B\u8BE6\u7EC6\u4FE1\u606F");
 injectString("zh-TW", "View details", "\u6AA2\u8996\u8A73\u7D30\u8CC7\u8A0A");
 injectString("ro-RO", "View details", "Afi\u0219a\u021Bi detaliile");
+injectString("ar-SA", "View details", "\u0639\u0631\u0636 \u0627\u0644\u062A\u0641\u0627\u0635\u064A\u0644");
 export const ListItem = ({
   id,
   className,
@@ -165,11 +167,11 @@ export const ListItem = ({
     }
   }, [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", mobileClassName || driveClassName || "", clickableClassName, className || ""]),
     onClick: handleClick,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ref: itemRef,
     children: [onDragStart ? _jsx("div", {
       className: "zen-list-item__dnd",

package/esm/list/listItem/listItemWaiting.js

@@ -3,8 +3,6 @@ import { useMemo } from "react";
 import { Skeleton } from "../../skeleton/skeleton";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 export const ListItemWaiting = ({ id, isDrive, isMobile }) => {
-    const driveClassName = useMemo(() => isDrive
-        ? isMobile ? "zen-list-item--drive" : "zen-list-item--drive-tablet"
-        : "", [isDrive, isMobile]);
-    return _jsx("li", { id: id, className: classNames(["zen-list-item", driveClassName]), children: _jsx(Skeleton, { className: "zen-list-item__waiting" }) });
+    const driveClassName = useMemo(() => (isDrive ? (isMobile ? "zen-list-item--drive" : "zen-list-item--drive-tablet") : ""), [isDrive, isMobile]);
+    return (_jsx("li", { id: id, className: classNames(["zen-list-item", driveClassName]), children: _jsx(Skeleton, { className: "zen-list-item__waiting" }) }));
 };

package/esm/list/utils/getLoadingItems.js

@@ -8,7 +8,7 @@ export const getLoadingItems = (type, count, listId, isDrive, isMobile, isTall)
         return _jsx(ItemDataWaiting, { id: id, isTall: isTall }, id);
     }
     if (type === "compact") {
-        return (_jsx(ItemCompactWaiting, { isDrive: isDrive, isMobile: isMobile }, id));
+        return _jsx(ItemCompactWaiting, { isDrive: isDrive, isMobile: isMobile }, id);
     }
-    return (_jsx(ListItemWaiting, { id: id, isDrive: isDrive, isMobile: isMobile }, id));
+    return _jsx(ListItemWaiting, { id: id, isDrive: isDrive, isMobile: isMobile }, id);
 });

package/esm/menu/components/menuButton.js

@@ -10,14 +10,14 @@ export const MenuButton = ({ id, onClick, hasChildren, disabled, icon, name, lin
     const driveMenuButtonActionClasses = useDriveClassName("zen-menu-button__action");
     const isDrive = useDrive();
     const linkEvents = useMemo(() => ({
-        onKeyDown: (e) => {
+        onKeyDown: e => {
             if (e.key === " ") {
                 e.preventDefault();
                 const linkEl = e.target;
                 linkEl.classList.add("zen-menu-button__action--active");
             }
         },
-        onKeyUp: (e) => {
+        onKeyUp: e => {
             if (e.key === " ") {
                 e.preventDefault();
                 const linkEl = e.target;
@@ -29,19 +29,27 @@ export const MenuButton = ({ id, onClick, hasChildren, disabled, icon, name, lin
     const onClickHandler = useCallback((e) => {
         onClick === null || onClick === void 0 ? void 0 : onClick(id, e);
     }, [id, onClick]);
-    const buttonTemplate = _jsxs("button", { type: "button", "data-id": id, ref: ref, disabled: !!disabled, title: name, className: classNames([
+    const buttonTemplate = (_jsxs("button", { type: "button", "data-id": id, ref: ref, disabled: !!disabled, title: name, className: classNames([
             "zen-menu-button__action",
-            "zen-button", "zen-caption",
+            "zen-button",
+            "zen-caption",
             hasChildren ? "zen-menu-button__action--has-children" : "",
             hasState && isActive ? "zen-menu-button__action--active" : "",
             driveMenuButtonActionClasses || ""
-        ]), role: hasState ? "menuitemcheckbox" : "menuitem", onClick: onClickHandler, "aria-checked": hasState ? isActive : undefined, children: [!!icon && createElement(icon, {
-                size: isDrive ? "huge" : "large",
-                className: classNames(["zen-caption__pre-content", "zen-menu-button__icon"])
-            }), _jsx("span", { className: "zen-menu-button__action-text", children: name }), !!hasChildren && _jsx(IconChevronRight, { size: isDrive ? "huge" : "large", className: classNames(["zen-caption__pre-content", "zen-menu-button__more-icon"]) })] });
-    const linkTemplate = _jsxs("a", Object.assign({ "data-id": id, role: "menuitem", className: classNames(["zen-menu-button__action", "zen-caption", disabled ? "zen-menu-button__action--disabled" : "", driveMenuButtonActionClasses || ""]), href: disabled ? undefined : link, "aria-disabled": disabled, onClick: onClickHandler, target: target, rel: rel }, linkEvents, { children: [!!icon && createElement(icon, {
-                size: isDrive ? "huge" : "large",
-                className: "zen-caption__pre-content"
-            }), name] }));
-    return _jsx("li", { role: "presentation", className: classNames(["zen-menu-button", className]), children: link ? linkTemplate : buttonTemplate });
+        ]), role: hasState ? "menuitemcheckbox" : "menuitem", onClick: onClickHandler, "aria-checked": hasState ? isActive : undefined, children: [!!icon &&
+                createElement(icon, {
+                    size: isDrive ? "huge" : "large",
+                    className: classNames(["zen-caption__pre-content", "zen-menu-button__icon"])
+                }), _jsx("span", { className: "zen-menu-button__action-text", children: name }), !!hasChildren && (_jsx(IconChevronRight, { size: isDrive ? "huge" : "large", className: classNames(["zen-caption__pre-content", "zen-menu-button__more-icon"]) }))] }));
+    const linkTemplate = (_jsxs("a", Object.assign({ "data-id": id, role: "menuitem", className: classNames([
+            "zen-menu-button__action",
+            "zen-caption",
+            disabled ? "zen-menu-button__action--disabled" : "",
+            driveMenuButtonActionClasses || ""
+        ]), href: disabled ? undefined : link, "aria-disabled": disabled, onClick: onClickHandler, target: target, rel: rel }, linkEvents, { children: [!!icon &&
+                createElement(icon, {
+                    size: isDrive ? "huge" : "large",
+                    className: "zen-caption__pre-content"
+                }), name] })));
+    return (_jsx("li", { role: "presentation", className: classNames(["zen-menu-button", className]), children: link ? linkTemplate : buttonTemplate }));
 };

package/esm/menu/components/menuErrorItem.js

@@ -3,12 +3,60 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { TextIconButton } from "../../textIconButton/textIconButton";
 import { IconWarning } from "../../icons/iconWarning";
 import { useLanguage } from "../../utils/localization/useLanguage";
+injectString("cs", "Error with loading", "Error with loading");
+injectString("da-DK", "Error with loading", "Error with loading");
+injectString("de", "Error with loading", "Error with loading");
 injectString("en", "Error with loading", "Error with loading");
+injectString("es", "Error with loading", "Error with loading");
+injectString("fi-FI", "Error with loading", "Error with loading");
+injectString("fr", "Error with loading", "Error with loading");
+injectString("fr-FR", "Error with loading", "Error with loading");
+injectString("hu-HU", "Error with loading", "Error with loading");
+injectString("id", "Error with loading", "Error with loading");
+injectString("it", "Error with loading", "Error with loading");
+injectString("ja", "Error with loading", "Error with loading");
+injectString("ko-KR", "Error with loading", "Error with loading");
+injectString("ms", "Error with loading", "Error with loading");
+injectString("nb-NO", "Error with loading", "Error with loading");
+injectString("nl", "Error with loading", "Error with loading");
+injectString("pl", "Error with loading", "Error with loading");
+injectString("pt-BR", "Error with loading", "Error with loading");
 injectString("pt-PT", "Error with loading", "Erro ao carregar");
+injectString("sk-SK", "Error with loading", "Error with loading");
+injectString("sv", "Error with loading", "Error with loading");
+injectString("th", "Error with loading", "Error with loading");
+injectString("tr", "Error with loading", "Error with loading");
+injectString("zh-Hans", "Error with loading", "Error with loading");
+injectString("zh-TW", "Error with loading", "Error with loading");
 injectString("ro-RO", "Error with loading", "Eroare la \xEEnc\u0103rcare");
+injectString("ar-SA", "Error with loading", "\u062E\u0637\u0623 \u0641\u064A \u0627\u0644\u062A\u062D\u0645\u064A\u0644");
+injectString("cs", "Click to refresh", "Click to refresh");
+injectString("da-DK", "Click to refresh", "Click to refresh");
+injectString("de", "Click to refresh", "Click to refresh");
 injectString("en", "Click to refresh", "Click to refresh");
+injectString("es", "Click to refresh", "Click to refresh");
+injectString("fi-FI", "Click to refresh", "Click to refresh");
+injectString("fr", "Click to refresh", "Click to refresh");
+injectString("fr-FR", "Click to refresh", "Click to refresh");
+injectString("hu-HU", "Click to refresh", "Click to refresh");
+injectString("id", "Click to refresh", "Click to refresh");
+injectString("it", "Click to refresh", "Click to refresh");
+injectString("ja", "Click to refresh", "Click to refresh");
+injectString("ko-KR", "Click to refresh", "Click to refresh");
+injectString("ms", "Click to refresh", "Click to refresh");
+injectString("nb-NO", "Click to refresh", "Click to refresh");
+injectString("nl", "Click to refresh", "Click to refresh");
+injectString("pl", "Click to refresh", "Click to refresh");
+injectString("pt-BR", "Click to refresh", "Click to refresh");
 injectString("pt-PT", "Click to refresh", "Clique para atualizar");
+injectString("sk-SK", "Click to refresh", "Click to refresh");
+injectString("sv", "Click to refresh", "Click to refresh");
+injectString("th", "Click to refresh", "Click to refresh");
+injectString("tr", "Click to refresh", "Click to refresh");
+injectString("zh-Hans", "Click to refresh", "Click to refresh");
+injectString("zh-TW", "Click to refresh", "Click to refresh");
 injectString("ro-RO", "Click to refresh", "Face\u021Bi clic pentru a re\xEEnc\u0103rca");
+injectString("ar-SA", "Click to refresh", "\u0627\u0646\u0642\u0631 \u0644\u0644\u062A\u062D\u062F\u064A\u062B");
 export const MenuErrorItem = ({
   id,
   onClick

package/esm/menu/components/menuItem.js

@@ -94,10 +94,10 @@ export const MenuItem = ({ id, children, name, icon, disabled, onClick, link, ta
     wasOpenRef.current = isOpen;
     const openedViaKeyboard = localOpenedViaKeyboardRef.current;
     if (content.length === 0) {
-        return _jsx(MenuButton, { id: id, name: name, icon: icon, disabled: disabled, link: link, target: target, rel: rel, onClick: memoizedDesktopActionOnClick, className: className, active: active, hasChildren: false }, id);
+        return (_jsx(MenuButton, { id: id, name: name, icon: icon, disabled: disabled, link: link, target: target, rel: rel, onClick: memoizedDesktopActionOnClick, className: className, active: active, hasChildren: false }, id));
     }
     if (isMobile) {
-        return _jsx(MenuButton, { id: id, name: name, icon: icon, disabled: disabled, link: link, target: target, rel: rel, onClick: memoizedMobileActionOnClick, active: active, hasChildren: true }, id);
+        return (_jsx(MenuButton, { id: id, name: name, icon: icon, disabled: disabled, link: link, target: target, rel: rel, onClick: memoizedMobileActionOnClick, active: active, hasChildren: true }, id));
     }
     let popupTrigger;
     if (trigger) {
@@ -107,8 +107,8 @@ export const MenuItem = ({ id, children, name, icon, disabled, onClick, link, ta
         });
     }
     else {
-        popupTrigger = _jsx(MenuButton, { id: id, ref: ref, name: name, icon: icon, disabled: disabled, hasChildren: true, onClick: memoizedTriggerOnClick, active: active }, id);
+        popupTrigger = (_jsx(MenuButton, { id: id, ref: ref, name: name, icon: icon, disabled: disabled, hasChildren: true, onClick: memoizedTriggerOnClick, active: active }, id));
     }
-    return _jsxs(Fragment, { children: [popupTrigger, _jsx(ControlledPopup, { className: classNames([`zen-controlled-menu-submenu--${path.length}`]), useTrapFocusWithTrigger: openedViaKeyboard ? "on" : "withTrigger", alignment: contentAlignment, triggerRef: ref, isOpen: isOpen, onOpenChange: memoizedOnOpenChange, ariaLabel: popupTrigger.props.name, recalculateOnScroll: true, children: _jsx("ul", { role: "menu", className: "zen-menu-item", children: content }) })] }, id);
+    return (_jsxs(Fragment, { children: [popupTrigger, _jsx(ControlledPopup, { className: classNames([`zen-controlled-menu-submenu--${path.length}`]), useTrapFocusWithTrigger: openedViaKeyboard ? "on" : "withTrigger", alignment: contentAlignment, triggerRef: ref, isOpen: isOpen, onOpenChange: memoizedOnOpenChange, ariaLabel: popupTrigger.props.name, recalculateOnScroll: true, children: _jsx("ul", { role: "menu", className: "zen-menu-item", children: content }) })] }, id));
 };
 MenuItem.displayName = "MenuItem";

package/esm/menu/controlledMenu.js

@@ -79,7 +79,7 @@ export const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLa
             return;
         }
         if (path.includes(branchId)) {
-            setPath((v) => {
+            setPath(v => {
                 const newPath = [...v];
                 newPath.pop();
                 return newPath;
@@ -87,7 +87,7 @@ export const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLa
         }
     }, [setPath, path]);
     const closeBranch = useCallback(() => {
-        setPath((v) => {
+        setPath(v => {
             const newPath = [...v];
             newPath.pop();
             return newPath;
@@ -165,7 +165,7 @@ export const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLa
     const onMouseDown = () => {
         keyboardActiveRef.current = false;
     };
-    const onKeyDown = (e) => {
+    const onKeyDown = e => {
         var _a, _b, _c, _d;
         keyboardActiveRef.current = true;
         const target = e.target;
@@ -199,24 +199,26 @@ export const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLa
             (_d = findLastFocusable(target)) === null || _d === void 0 ? void 0 : _d.focus();
             return;
         }
-        if (isButton(target) && (e.key === "ArrowRight" || e.key === "Enter" || e.key === " ") && target.classList.contains("zen-menu-button__action--has-children")) {
+        if (isButton(target) &&
+            (e.key === "ArrowRight" || e.key === "Enter" || e.key === " ") &&
+            target.classList.contains("zen-menu-button__action--has-children")) {
             e.preventDefault();
             navigatedViaKeyboardRef.current = true;
             target.click();
         }
     };
-    const renderMenuList = () => _jsx("div", { ref: menuListRef, tabIndex: -1, onKeyDown: onKeyDown, onMouseDown: onMouseDown, className: classNames(["zen-action-list", className]), children: _jsxs("ul", { role: "menu", className: classNames(["zen-menu-item", className, listClassName]), children: [parent ? _jsx(MenuButton, { id: "root", name: parent.props.name || "", icon: IconArrowLeft, onClick: closeBranch, hasChildren: false, disabled: false }, "root") : null, content] }) });
+    const renderMenuList = () => (_jsx("div", { ref: menuListRef, tabIndex: -1, onKeyDown: onKeyDown, onMouseDown: onMouseDown, className: classNames(["zen-action-list", className]), children: _jsxs("ul", { role: "menu", className: classNames(["zen-menu-item", className, listClassName]), children: [parent ? (_jsx(MenuButton, { id: "root", name: parent.props.name || "", icon: IconArrowLeft, onClick: closeBranch, hasChildren: false, disabled: false }, "root")) : null, content] }) }));
     const hideMenu = useCallback(() => {
         closeBranch();
         setIsOpen(false);
     }, [closeBranch, setIsOpen]);
     if (isMobile) {
-        return _jsx(_Fragment, { children: _jsx(PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: _jsxs(MobileSheet, { label: title, isOpen: isOpen, triggerRef: triggerRef, onHidePanel: hideMenu, onCloseClick: hideMenu, children: [_jsx(MobileSheet.Title, { children: title }), _jsx(MobileSheet.Content, { children: renderMenuList() })] }) }) });
+        return (_jsx(_Fragment, { children: _jsx(PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: _jsxs(MobileSheet, { label: title, isOpen: isOpen, triggerRef: triggerRef, onHidePanel: hideMenu, onCloseClick: hideMenu, children: [_jsx(MobileSheet.Title, { children: title }), _jsx(MobileSheet.Content, { children: renderMenuList() })] }) }) }));
     }
-    return _jsx(_Fragment, { children: _jsx(PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: _jsx(ControlledPopup, { id: id, useTrapFocusWithTrigger: "on", className: classNames(["zen-controlled-menu", className]), onOpenChange: memoizedOnChange, isOpen: isOpen, triggerRef: triggerRef, paddingX: paddingX, paddingY: paddingY, alignment: alignment, ariaLabelledby: ariaLabelledby, ariaLabel: ariaLabel || title, recalculateOnScroll: true, 
+    return (_jsx(_Fragment, { children: _jsx(PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: _jsx(ControlledPopup, { id: id, useTrapFocusWithTrigger: "on", className: classNames(["zen-controlled-menu", className]), onOpenChange: memoizedOnChange, isOpen: isOpen, triggerRef: triggerRef, paddingX: paddingX, paddingY: paddingY, alignment: alignment, ariaLabelledby: ariaLabelledby, ariaLabel: ariaLabel || title, recalculateOnScroll: true, 
                 // focusOnOpen is false - ControlledMenu handles focus based on input method
                 // (keyboard vs mouse) in its own useEffect
-                focusOnOpen: false, children: renderMenuList() }) }) });
+                focusOnOpen: false, children: renderMenuList() }) }) }));
 };
 ControlledMenu.Item = MenuItem;
 ControlledMenu.Separator = MenuSeparator;

package/esm/menu/menu.js

@@ -11,7 +11,7 @@ export const Menu = ({ children, title, trigger, triggerRef, ariaLabel, ariaLabe
     const [isOpen, setIsOpen] = useState(false);
     const innerRef = useRef(null);
     const shouldRenderTrigger = !!trigger;
-    const ref = (shouldRenderTrigger || !triggerRef) ? innerRef : triggerRef;
+    const ref = shouldRenderTrigger || !triggerRef ? innerRef : triggerRef;
     const abortEventsControllerRef = useRef(null);
     const renderTrigger = () => cloneElement(trigger, {
         ref,
@@ -28,7 +28,7 @@ export const Menu = ({ children, title, trigger, triggerRef, ariaLabel, ariaLabe
         }
     }, [triggerRef, isOpen, shouldRenderTrigger]);
     const triggerComp = shouldRenderTrigger ? renderTrigger() : null;
-    return _jsxs(_Fragment, { children: [triggerComp, _jsx(ControlledMenu, { alignment: alignment, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledBy || ((_a = triggerComp === null || triggerComp === void 0 ? void 0 : triggerComp.props) === null || _a === void 0 ? void 0 : _a.id), isOpen: isOpen, setIsOpen: setIsOpen, triggerRef: ref, title: title, className: classNames(["zen-menu", className || ""]), children: children })] });
+    return (_jsxs(_Fragment, { children: [triggerComp, _jsx(ControlledMenu, { alignment: alignment, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledBy || ((_a = triggerComp === null || triggerComp === void 0 ? void 0 : triggerComp.props) === null || _a === void 0 ? void 0 : _a.id), isOpen: isOpen, setIsOpen: setIsOpen, triggerRef: ref, title: title, className: classNames(["zen-menu", className || ""]), children: children })] }));
 };
 Menu.Item = MenuItem;
 Menu.Separator = MenuSeparator;

package/esm/miniTabs/miniTabs.js

@@ -33,5 +33,5 @@ export const MiniTabs = ({ activeTabId, onTabChange, children, size = MiniTabsSi
         var _a;
         (_a = activeButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [activeTabId]);
-    return _jsx("div", { className: classNames(["zen-mini-tabs", `zen-mini-tabs--${size}`, className ? className : ""]), children: tabs.length ? _jsxs(_Fragment, { children: [_jsx("div", { className: "zen-mini-tabs__header", role: "tablist", onKeyDown: keyDownHandler, ref: tabsRef, children: tabs.map(tab => (_jsx(MiniTabsHeaderItem, { id: tab.id, isActive: activeTabId === tab.id, handleClick: handleTabItemClick, buttonRef: tab.id === activeTabId ? activeButtonRef : undefined, children: tab.name }, tab.id))) }), _jsx("div", { className: "zen-mini-tabs__content", children: tabs.map((props) => (_createElement(MiniTabsItem, Object.assign({}, props, { key: props.id, activeId: activeTabId })))) })] }) : null });
+    return (_jsx("div", { className: classNames(["zen-mini-tabs", `zen-mini-tabs--${size}`, className ? className : ""]), children: tabs.length ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "zen-mini-tabs__header", role: "tablist", onKeyDown: keyDownHandler, ref: tabsRef, children: tabs.map(tab => (_jsx(MiniTabsHeaderItem, { id: tab.id, isActive: activeTabId === tab.id, handleClick: handleTabItemClick, buttonRef: tab.id === activeTabId ? activeButtonRef : undefined, children: tab.name }, tab.id))) }), _jsx("div", { className: "zen-mini-tabs__content", children: tabs.map((props) => (_createElement(MiniTabsItem, Object.assign({}, props, { key: props.id, activeId: activeTabId })))) })] })) : null }));
 };

package/esm/miniTabs/miniTabsHelper.js

@@ -31,14 +31,15 @@ export const convertChild = (child) => {
                 .map(el => (Object.assign({}, el.props)));
         }
         const nestedChild = fragmentProps.children;
-        return isValidElement(nestedChild) && nestedChild.type === MiniTabsItem ? Object.assign({}, nestedChild.props) : undefined;
+        return isValidElement(nestedChild) && nestedChild.type === MiniTabsItem
+            ? Object.assign({}, nestedChild.props) : undefined;
     }
     return undefined;
 };
 export const getChildrenForRender = (children) => {
     const childrenArray = Children.toArray(children);
     const result = [];
-    childrenArray.forEach((child) => {
+    childrenArray.forEach(child => {
         const converted = convertChild(child);
         if (converted) {
             if (Array.isArray(converted)) {

package/esm/miniTabs/miniTabsItem.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "../commonHelpers/classNames/classNames";
-export const MiniTabsItem = ({ id, children, activeId }) => _jsx("div", { className: "zen-mini-tabs__content", children: _jsx("div", { className: classNames(["zen-mini-tabs__content-wrapper", activeId !== id ? "zen-mini-tabs__content-wrapper--hidden" : ""]), role: "tabpanel", "aria-labelledby": id, tabIndex: 0, id: `panel-${id}`, hidden: activeId && activeId !== id ? true : false, children: children }) });
+export const MiniTabsItem = ({ id, children, activeId }) => (_jsx("div", { className: "zen-mini-tabs__content", children: _jsx("div", { className: classNames(["zen-mini-tabs__content-wrapper", activeId !== id ? "zen-mini-tabs__content-wrapper--hidden" : ""]), role: "tabpanel", "aria-labelledby": id, tabIndex: 0, id: `panel-${id}`, hidden: activeId && activeId !== id ? true : false, children: children }) }));

package/esm/mobileSheet/components/mobileSheetContent.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "../../commonHelpers/classNames/classNames";
-export const MobileSheetContent = ({ className = "", children }) => _jsx("div", { className: classNames(["zen-mobile-sheet-content", className]), children: children });
+export const MobileSheetContent = ({ className = "", children }) => (_jsx("div", { className: classNames(["zen-mobile-sheet-content", className]), children: children }));

package/esm/mobileSheet/components/mobileSheetFooter.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "../../commonHelpers/classNames/classNames";
-export const MobileSheetFooter = ({ className = "", children, borderless = false }) => _jsx("div", { className: classNames(["zen-mobile-sheet-footer", borderless ? "zen-mobile-sheet-footer--borderless" : "", className]), children: children });
+export const MobileSheetFooter = ({ className = "", children, borderless = false }) => (_jsx("div", { className: classNames(["zen-mobile-sheet-footer", borderless ? "zen-mobile-sheet-footer--borderless" : "", className]), children: children }));

package/esm/mobileSheet/mobileSheet.d.ts

@@ -16,6 +16,7 @@ export interface IMobileSheet extends IZenComponentProps, Pick<ISidePanel, "trig
     onReadyForFocus?: (currentIsOpen: boolean) => void;
     wrapperClassName?: string;
     stackingClassName?: string;
+    role?: string | false;
 }
 export declare const MobileSheet: FC<IMobileSheet> & {
     Footer: FC<IMobileSheetFooter>;

package/esm/mobileSheet/mobileSheet.js

@@ -18,7 +18,7 @@ import { useUniqueId } from "../commonHelpers/useUniqueId";
 import { useFadeComponent } from "../utils/useFadeComponent";
 import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { zen } from "../utils/zen";
-// eslint-disable-next-line @typescript-eslint/naming-convention
+/* eslint-disable @typescript-eslint/naming-convention */
 injectString("cs", "Back", "Zp\u011Bt");
 injectString("da-DK", "Back", "Tilbage");
 injectString("de", "Back", "Zur\xFCck");
@@ -45,6 +45,7 @@ injectString("tr", "Back", "Geri");
 injectString("zh-Hans", "Back", "\u8FD4\u56DE");
 injectString("zh-TW", "Back", "\u8FD4\u56DE");
 injectString("ro-RO", "Back", "\xCEnapoi");
+injectString("ar-SA", "Back", "\u0631\u062C\u0648\u0639");
 injectString("cs", "Close", "Zav\u0159\xEDt");
 injectString("da-DK", "Close", "Luk");
 injectString("de", "Close", "Schlie\xDFen");
@@ -71,7 +72,9 @@ injectString("tr", "Close", "Kapat");
 injectString("zh-Hans", "Close", "\u5173\u95ED");
 injectString("zh-TW", "Close", "\u95DC\u9589");
 injectString("ro-RO", "Close", "\xCEnchide\u021Bi");
+injectString("ar-SA", "Close", "\u0625\u063A\u0644\u0627\u0642");
 export const MobileSheet = ({
+  /* eslint-enable @typescript-eslint/naming-convention */
   triggerRef,
   label,
   isOpen,
@@ -88,7 +91,8 @@ export const MobileSheet = ({
   wrapperClassName,
   stackingClassName,
   preventFirstFocus,
-  id
+  id,
+  role
 }) => {
   var _a, _b;
   const {
@@ -178,6 +182,7 @@ export const MobileSheet = ({
       onHidePanel: onHidePanelAction,
       onTransitionEnd: handleTransitionEnd,
       id: id,
+      role: role,
       children: _jsxs("div", {
         className: classNames(["zen-mobile-sheet", className]),
         ref: ref,

package/esm/modal/modal.js

@@ -48,6 +48,7 @@ injectString("tr", "Close", "Kapat");
 injectString("zh-Hans", "Close", "\u5173\u95ED");
 injectString("zh-TW", "Close", "\u95DC\u9589");
 injectString("ro-RO", "Close", "\xCEnchide\u021Bi");
+injectString("ar-SA", "Close", "\u0625\u063A\u0644\u0627\u0642");
 export const Modal = ({
   isOpen,
   children,

package/esm/modal/modalHelpers.js

@@ -7,14 +7,14 @@ export const getPredefinedFocusableItem = (container, focusable) => {
         tertiary: "[data-focusable='tertiary']",
         close: "[data-focusable='close']"
     };
-    if (!focusable || focusable !== "content" && !focusableSelector[focusable]) {
+    if (!focusable || (focusable !== "content" && !focusableSelector[focusable])) {
         return null;
     }
     if (focusable === "content") {
         const contentElements = container.querySelectorAll(FOCUSABLE_SELECTOR);
-        const contentElement = Array.from(contentElements).find((el) => {
+        const contentElement = Array.from(contentElements).find(el => {
             const dataFocus = el.getAttribute("data-focusable");
-            return (dataFocus !== "primary" && dataFocus !== "secondary" && dataFocus !== "tertiary" && dataFocus !== "close") && isFocusable(el);
+            return dataFocus !== "primary" && dataFocus !== "secondary" && dataFocus !== "tertiary" && dataFocus !== "close" && isFocusable(el);
         });
         return contentElement ? contentElement : null;
     }

package/esm/modal/utils/isModalTarget.d.ts

@@ -0,0 +1 @@
+export declare const isModalTarget: (e: Event) => boolean;

package/esm/modal/utils/isModalTarget.js

@@ -0,0 +1,7 @@
+export const isModalTarget = (e) => {
+    if (!e.target) {
+        return false;
+    }
+    const target = e.target;
+    return !!target.closest(".zen-modal");
+};

package/esm/nav/nav.js

@@ -40,13 +40,13 @@ const NavContent = ({ children }) => {
         // Initial check
         handleResize();
     }, [handleResize]);
-    return _jsx("div", { ref: contentRef, onScroll: handleScroll, className: classNames([
+    return (_jsx("div", { ref: contentRef, onScroll: handleScroll, className: classNames([
             "zen-nav__content",
             showTopShadow && !isEditState ? "zen-nav__content--show-top-shadow" : "",
             showBottomShadow && !isEditState ? "zen-nav__content--show-bottom-shadow" : "",
             hasScrollbar ? "zen-nav__content--has-scrollbar" : "",
             hasOverlayScrollbar ? "zen-nav__content--overlay-scrollbar" : ""
-        ]), children: _jsx("div", { className: "zen-nav__content-inner", children: children }) });
+        ]), children: _jsx("div", { className: "zen-nav__content-inner", children: children }) }));
 };
 /**
  * @beta This component is not fully ready yet and may change in future releases.
@@ -72,16 +72,22 @@ export const Nav = ({ children, className, collapsed = false, onCollapseToggle,
         }
     }, [isMobile, isMobileMenuOpen]);
     const childrenArray = Children.toArray(children);
-    const header = isEditState ? undefined : childrenArray.find(child => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "NavHeader"; });
+    const header = isEditState
+        ? undefined
+        : childrenArray.find(child => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "NavHeader"; });
     const sections = childrenArray.filter(child => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "NavSection"; });
     const footer = childrenArray.find(child => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "NavFooter"; });
     const editFooter = childrenArray.find(child => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "NavEditFooter"; });
-    const secondarySections = sections.map(section => filterPrimaryNavItems(section, true)).filter(section => !!section && Children.count(section.props.children) > 0);
-    const primarySections = sections.map(section => filterPrimaryNavItems(section, false)).filter(section => !!section && Children.count(section.props.children) > 0);
+    const secondarySections = sections
+        .map(section => filterPrimaryNavItems(section, true))
+        .filter(section => !!section && Children.count(section.props.children) > 0);
+    const primarySections = sections
+        .map(section => filterPrimaryNavItems(section, false))
+        .filter(section => !!section && Children.count(section.props.children) > 0);
     const sectionsToRender = isMobile ? secondarySections : sections;
     const secondaryFooter = footer && filterPrimaryNavItems(footer, true);
     const primaryFooter = footer && filterPrimaryNavItems(footer, false);
-    const footerToRender = isEditState ? editFooter : (isMobile ? secondaryFooter : footer);
+    const footerToRender = isEditState ? editFooter : isMobile ? secondaryFooter : footer;
     const primaryItems = [...primarySections, ...(primaryFooter ? [primaryFooter] : [])].flatMap(e => collectNavItems(e));
     const editListItems = childrenArray.find(child => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "NavEditSection"; });
     const onSearchOpen = useCallback((isOpen) => {
@@ -126,7 +132,7 @@ export const Nav = ({ children, className, collapsed = false, onCollapseToggle,
     useEffect(() => {
         onMenuVisibilityToggle === null || onMenuVisibilityToggle === void 0 ? void 0 : onMenuVisibilityToggle(!isMobile || isMobileMenuOpen);
     }, [isMobile, isMobileMenuOpen, onMenuVisibilityToggle]);
-    return _jsxs(NavContext, { value: {
+    return (_jsxs(NavContext, { value: {
             collapsed,
             onCollapseToggle,
             searchOpen: isSearchOpen,
@@ -136,11 +142,13 @@ export const Nav = ({ children, className, collapsed = false, onCollapseToggle,
             searchTerm,
             onSearch: setSearchTerm,
             onNavigate: () => onIsMobileMenuOpenToggle && onIsMobileMenuOpenToggle(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, _jsx(NavContent, { children: isEditState
-                                ? editListItems
-                                : 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: isEditState ? editListItems : primaryItems }), mobileBarContainer)] });
+        }, 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, _jsx(NavContent, { children: isEditState
+                            ? editListItems
+                            : 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: isEditState ? editListItems : primaryItems }), mobileBarContainer)] }));
 };

package/esm/nav/navAddMenu/navAddMenu.js

@@ -22,12 +22,15 @@ export const NavAddMenu = ({ title, alignment, className, children }) => {
         return !!element.type && element.type.displayName === "NavItem";
     })
         .map(child => cloneElement(child, {
-        className: classNames([
-            "zen-nav-item--level-2",
-            child.props.className || ""
-        ]),
+        className: classNames(["zen-nav-item--level-2", child.props.className || ""]),
         collapsed: false
     }));
-    return _jsx(NavItemContext, { value: { parentLevel: 2 }, children: _jsxs("div", { className: classNames(["zen-nav-header__actions", className || ""]), children: [_jsx(Tooltip, { trigger: _jsx(TextIconButton, { id: triggerId, title: title, className: classNames(["zen-nav-footer__actions-icon", className || ""]), icon: isOpen && !isMobile ? IconClose : IconPlus, iconSize: "large", ref: triggerRef, onClick: () => setIsOpen(!isOpen), role: !isMobile ? "menuitem" : undefined }), alignment: isMobile ? "left" : collapsed ? "right" : "top", children: title }), _jsx(ControlledMenu, { title: title, isOpen: isOpen, setIsOpen: setIsOpen, triggerRef: triggerRef, alignment: alignment, paddingX: 8, paddingY: 8, className: classNames(["zen-nav-popup zen-nav-popup--narrow zen-nav-l2-popup zen-nav-l2-popup--narrow", isMobile ? "zen-nav-popup--mobile zen-nav-l2-popup--mobile" : ""]), listClassName: classNames(["zen-nav-popup__list zen-nav-l2-popup__list", isMobile ? "zen-nav-popup__list--mobile zen-nav-l2-popup__list--mobile" : ""]), ariaLabelledby: triggerId, children: validChildren })] }) });
+    return (_jsx(NavItemContext, { value: { parentLevel: 2 }, children: _jsxs("div", { className: classNames(["zen-nav-header__actions", className || ""]), children: [_jsx(Tooltip, { trigger: _jsx(TextIconButton, { id: triggerId, title: title, className: classNames(["zen-nav-footer__actions-icon", className || ""]), icon: isOpen && !isMobile ? IconClose : IconPlus, iconSize: "large", ref: triggerRef, onClick: () => setIsOpen(!isOpen), role: !isMobile ? "menuitem" : undefined }), alignment: isMobile ? "left" : collapsed ? "right" : "top", children: title }), _jsx(ControlledMenu, { title: title, isOpen: isOpen, setIsOpen: setIsOpen, triggerRef: triggerRef, alignment: alignment, paddingX: 8, paddingY: 8, className: classNames([
+                        "zen-nav-popup zen-nav-popup--narrow zen-nav-l2-popup zen-nav-l2-popup--narrow",
+                        isMobile ? "zen-nav-popup--mobile zen-nav-l2-popup--mobile" : ""
+                    ]), listClassName: classNames([
+                        "zen-nav-popup__list zen-nav-l2-popup__list",
+                        isMobile ? "zen-nav-popup__list--mobile zen-nav-l2-popup__list--mobile" : ""
+                    ]), ariaLabelledby: triggerId, children: validChildren })] }) }));
 };
 NavAddMenu.displayName = "NavAddMenu";