@geotab/zenith 3.7.0 → 3.8.0-beta.0

package/esm/nav/navDivider/navDivider.js

@@ -4,9 +4,6 @@ import { classNames } from "../../commonHelpers/classNames/classNames";
  * @beta This component is not fully ready yet and may change in future releases.
  */
 export const NavDivider = ({ className }) => {
-    const dividerClassNames = classNames([
-        "zen-nav-divider",
-        className !== null && className !== void 0 ? className : ""
-    ]);
+    const dividerClassNames = classNames(["zen-nav-divider", className !== null && className !== void 0 ? className : ""]);
     return _jsx("div", { className: dividerClassNames, role: "separator" });
 };

package/esm/nav/navEditList/navEditList.js

@@ -14,6 +14,6 @@ export const NavEditList = ({ children, className, onItemsChangeOrder, onBeforeI
     const appsListRef = useRef(null);
     const dragHandler = onItemsChangeOrder ? onItemsChangeOrder : () => { };
     const { onDragStart } = useDragAndDrop(appsListRef, dragHandler, marksClassNames, onBeforeItemDrag, EDIT_ITEM_GAP);
-    const childrenArray = useMemo(() => onItemsChangeOrder ? Children.map(children, child => attachDndHandler(child, onDragStart)) : children, [children, onItemsChangeOrder, onDragStart]);
-    return _jsx("div", { className: classNames(["zen-nav-edit-list", className || ""]), ref: appsListRef, children: childrenArray });
+    const childrenArray = useMemo(() => (onItemsChangeOrder ? Children.map(children, child => attachDndHandler(child, onDragStart)) : children), [children, onItemsChangeOrder, onDragStart]);
+    return (_jsx("div", { className: classNames(["zen-nav-edit-list", className || ""]), ref: appsListRef, children: childrenArray }));
 };

package/esm/nav/navEditList/navEditListUtils.js

@@ -4,7 +4,7 @@ import { NavActionItem } from "../navItem/navActionItem";
 import { IconGrab } from "../../icons/iconGrab";
 export const attachDndHandler = (item, onPointerDown) => {
     if (item.type === NavActionItem) {
-        return cloneElement(item, Object.assign(Object.assign({}, item.props), { startNode: _jsx("div", { className: "zen-nav-item__dnd", onPointerDown: onPointerDown, children: _jsx(IconGrab, { size: "large" }) }) }));
+        return cloneElement(item, Object.assign(Object.assign({}, item.props), { startNode: (_jsx("div", { className: "zen-nav-item__dnd", onPointerDown: onPointerDown, children: _jsx(IconGrab, { size: "large" }) })) }));
     }
     return item;
 };

package/esm/nav/navEditSection/navEditSection.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "../../commonHelpers/classNames/classNames";
-export const NavEditSection = ({ children, className }) => _jsx("div", { className: classNames(["zen-nav-edit-section", className || ""]), children: children });
+export const NavEditSection = ({ children, className }) => (_jsx("div", { className: classNames(["zen-nav-edit-section", className || ""]), children: children }));
 NavEditSection.displayName = "NavEditSection";

package/esm/nav/navFooter/navEditFooter/navEditFooter.js

@@ -32,6 +32,7 @@ injectString("tr", "Save", "Kaydet");
 injectString("zh-Hans", "Save", "\u4FDD\u5B58");
 injectString("zh-TW", "Save", "\u5132\u5B58");
 injectString("ro-RO", "Save", "Salva\u021Bi");
+injectString("ar-SA", "Save", "\u062D\u0641\u0638");
 injectString("cs", "Cancel", "Zru\u0161it");
 injectString("da-DK", "Cancel", "Annuller");
 injectString("de", "Cancel", "Abbrechen");
@@ -58,6 +59,7 @@ injectString("tr", "Cancel", "\u0130ptal");
 injectString("zh-Hans", "Cancel", "\u53D6\u6D88");
 injectString("zh-TW", "Cancel", "\u53D6\u6D88");
 injectString("ro-RO", "Cancel", "Anula\u021Bi");
+injectString("ar-SA", "Cancel", "\u0625\u0644\u063A\u0627\u0621");
 export const NavEditFooter = ({
   className,
   handleSaveClick,

package/esm/nav/navFooter/navFooter.js

@@ -8,9 +8,33 @@ import { useMobile } from "../../commonHelpers/hooks/useMobile";
 import { NavFooterAction } from "./navFooterAction/navFooterAction";
 import { IconEdit } from "../../icons/iconEdit";
 import { useNavContext } from "../context/nav.context";
+injectString("cs", "Edit Navigation", "Edit Navigation");
+injectString("da-DK", "Edit Navigation", "Edit Navigation");
+injectString("de", "Edit Navigation", "Edit Navigation");
 injectString("en", "Edit Navigation", "Edit Navigation");
+injectString("es", "Edit Navigation", "Edit Navigation");
+injectString("fi-FI", "Edit Navigation", "Edit Navigation");
+injectString("fr", "Edit Navigation", "Edit Navigation");
+injectString("fr-FR", "Edit Navigation", "Edit Navigation");
+injectString("hu-HU", "Edit Navigation", "Edit Navigation");
+injectString("id", "Edit Navigation", "Edit Navigation");
+injectString("it", "Edit Navigation", "Edit Navigation");
+injectString("ja", "Edit Navigation", "Edit Navigation");
+injectString("ko-KR", "Edit Navigation", "Edit Navigation");
+injectString("ms", "Edit Navigation", "Edit Navigation");
+injectString("nb-NO", "Edit Navigation", "Edit Navigation");
+injectString("nl", "Edit Navigation", "Edit Navigation");
+injectString("pl", "Edit Navigation", "Edit Navigation");
+injectString("pt-BR", "Edit Navigation", "Edit Navigation");
 injectString("pt-PT", "Edit Navigation", "Editar navega\xE7\xE3o");
+injectString("sk-SK", "Edit Navigation", "Edit Navigation");
+injectString("sv", "Edit Navigation", "Edit Navigation");
+injectString("th", "Edit Navigation", "Edit Navigation");
+injectString("tr", "Edit Navigation", "Edit Navigation");
+injectString("zh-Hans", "Edit Navigation", "Edit Navigation");
+injectString("zh-TW", "Edit Navigation", "Edit Navigation");
 injectString("ro-RO", "Edit Navigation", "Edita\u021Bi navigarea");
+injectString("ar-SA", "Edit Navigation", "\u062A\u0639\u062F\u064A\u0644 \u0627\u0644\u062A\u0646\u0642\u0644");
 const NavFooterComponent = ({
   className,
   children

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

@@ -32,6 +32,7 @@ injectString("tr", "Configure", "Yap\u0131land\u0131r");
 injectString("zh-Hans", "Configure", "\u914D\u7F6E");
 injectString("zh-TW", "Configure", "\u914D\u7F6E");
 injectString("ro-RO", "Configure", "Configura\u021Bi");
+injectString("ar-SA", "Configure", "\u062A\u0643\u0648\u064A\u0646");
 export const NavFooterAction = ({
   children
 }) => {

package/esm/nav/navHeader/navHeader.js

@@ -10,12 +10,60 @@ import { NavItem } from "../navItem/navItem";
 import { useLanguage } from "../../utils/localization/useLanguage";
 import { NavAddMenu } from "../navAddMenu/navAddMenu";
 import { IconMenu } from "../../icons/iconMenu";
+injectString("cs", "Expand Navigation", "Expand Navigation");
+injectString("da-DK", "Expand Navigation", "Expand Navigation");
+injectString("de", "Expand Navigation", "Expand Navigation");
 injectString("en", "Expand Navigation", "Expand Navigation");
+injectString("es", "Expand Navigation", "Expand Navigation");
+injectString("fi-FI", "Expand Navigation", "Expand Navigation");
+injectString("fr", "Expand Navigation", "Expand Navigation");
+injectString("fr-FR", "Expand Navigation", "Expand Navigation");
+injectString("hu-HU", "Expand Navigation", "Expand Navigation");
+injectString("id", "Expand Navigation", "Expand Navigation");
+injectString("it", "Expand Navigation", "Expand Navigation");
+injectString("ja", "Expand Navigation", "Expand Navigation");
+injectString("ko-KR", "Expand Navigation", "Expand Navigation");
+injectString("ms", "Expand Navigation", "Expand Navigation");
+injectString("nb-NO", "Expand Navigation", "Expand Navigation");
+injectString("nl", "Expand Navigation", "Expand Navigation");
+injectString("pl", "Expand Navigation", "Expand Navigation");
+injectString("pt-BR", "Expand Navigation", "Expand Navigation");
 injectString("pt-PT", "Expand Navigation", "Expandir navega\xE7\xE3o");
+injectString("sk-SK", "Expand Navigation", "Expand Navigation");
+injectString("sv", "Expand Navigation", "Expand Navigation");
+injectString("th", "Expand Navigation", "Expand Navigation");
+injectString("tr", "Expand Navigation", "Expand Navigation");
+injectString("zh-Hans", "Expand Navigation", "Expand Navigation");
+injectString("zh-TW", "Expand Navigation", "Expand Navigation");
 injectString("ro-RO", "Expand Navigation", "Extinde\u021Bi navigarea");
+injectString("ar-SA", "Expand Navigation", "\u062A\u0648\u0633\u064A\u0639 \u0627\u0644\u062A\u0646\u0642\u0644");
+injectString("cs", "Collapse Navigation", "Collapse Navigation");
+injectString("da-DK", "Collapse Navigation", "Collapse Navigation");
+injectString("de", "Collapse Navigation", "Collapse Navigation");
 injectString("en", "Collapse Navigation", "Collapse Navigation");
+injectString("es", "Collapse Navigation", "Collapse Navigation");
+injectString("fi-FI", "Collapse Navigation", "Collapse Navigation");
+injectString("fr", "Collapse Navigation", "Collapse Navigation");
+injectString("fr-FR", "Collapse Navigation", "Collapse Navigation");
+injectString("hu-HU", "Collapse Navigation", "Collapse Navigation");
+injectString("id", "Collapse Navigation", "Collapse Navigation");
+injectString("it", "Collapse Navigation", "Collapse Navigation");
+injectString("ja", "Collapse Navigation", "Collapse Navigation");
+injectString("ko-KR", "Collapse Navigation", "Collapse Navigation");
+injectString("ms", "Collapse Navigation", "Collapse Navigation");
+injectString("nb-NO", "Collapse Navigation", "Collapse Navigation");
+injectString("nl", "Collapse Navigation", "Collapse Navigation");
+injectString("pl", "Collapse Navigation", "Collapse Navigation");
+injectString("pt-BR", "Collapse Navigation", "Collapse Navigation");
 injectString("pt-PT", "Collapse Navigation", "Recolher navega\xE7\xE3o");
+injectString("sk-SK", "Collapse Navigation", "Collapse Navigation");
+injectString("sv", "Collapse Navigation", "Collapse Navigation");
+injectString("th", "Collapse Navigation", "Collapse Navigation");
+injectString("tr", "Collapse Navigation", "Collapse Navigation");
+injectString("zh-Hans", "Collapse Navigation", "Collapse Navigation");
+injectString("zh-TW", "Collapse Navigation", "Collapse Navigation");
 injectString("ro-RO", "Collapse Navigation", "Restr\xE2nge\u021Bi navigarea");
+injectString("ar-SA", "Collapse Navigation", "\u0637\u064A \u0627\u0644\u062A\u0646\u0642\u0644");
 const NavHeaderToggler = ({
   className
 }) => {

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

@@ -38,7 +38,34 @@ injectString("tr", "Search", "Ara");
 injectString("zh-Hans", "Search", "\u641C\u7D22");
 injectString("zh-TW", "Search", "\u641C\u5C0B");
 injectString("ro-RO", "Search", "C\u0103uta\u021Bi");
+injectString("ar-SA", "Search", "\u0628\u062D\u062B");
+injectString("cs", "Close search", "Close search");
+injectString("da-DK", "Close search", "Close search");
+injectString("de", "Close search", "Close search");
 injectString("en", "Close search", "Close search");
+injectString("es", "Close search", "Close search");
+injectString("fi-FI", "Close search", "Close search");
+injectString("fr", "Close search", "Close search");
+injectString("fr-FR", "Close search", "Close search");
+injectString("hu-HU", "Close search", "Close search");
+injectString("id", "Close search", "Close search");
+injectString("it", "Close search", "Close search");
+injectString("ja", "Close search", "Close search");
+injectString("ko-KR", "Close search", "Close search");
+injectString("ms", "Close search", "Close search");
+injectString("nb-NO", "Close search", "Close search");
+injectString("nl", "Close search", "Close search");
+injectString("pl", "Close search", "Close search");
+injectString("pt-BR", "Close search", "Close search");
+injectString("pt-PT", "Close search", "Close search");
+injectString("sk-SK", "Close search", "Close search");
+injectString("sv", "Close search", "Close search");
+injectString("th", "Close search", "Close search");
+injectString("tr", "Close search", "Close search");
+injectString("zh-Hans", "Close search", "Close search");
+injectString("zh-TW", "Close search", "Close search");
+injectString("ro-RO", "Close search", "Close search");
+injectString("ar-SA", "Close search", "\u0625\u063A\u0644\u0627\u0642 \u0627\u0644\u0628\u062D\u062B");
 export const NavHeaderSearch = ({
   className,
   onSearch

package/esm/nav/navItem/navActionItem.js

@@ -4,8 +4,6 @@ export const NavActionItem = ({ title, id, icon, className, startNode, endButton
     const PrimaryIconComponent = typeof icon === "function" ? icon : null;
     const EndButtonIconComponent = typeof endButtonIcon === "function" ? endButtonIcon : null;
     const itemClasses = classNames(["zen-nav-item", className || ""]);
-    return (_jsxs("div", { className: itemClasses, id: id, children: [_jsx("div", { className: "zen-nav-item__main", children: _jsxs("div", { className: "zen-nav-item__content-left", children: [startNode ? _jsx("span", { className: "zen-nav-item__icon", children: startNode }) : null, PrimaryIconComponent ? _jsx(PrimaryIconComponent, { size: "huge" }) : null, _jsx("span", { className: "zen-nav-item__title", children: _jsx("span", { className: "zen-nav-item__title-text", children: title }) })] }) }), EndButtonIconComponent && endButtonTitle && onEndButtonClick
-                ? _jsx("button", { type: "button", className: "zen-nav-item__action", "aria-label": endButtonTitle, title: endButtonTitle, onClick: onEndButtonClick, children: _jsx(EndButtonIconComponent, { size: "huge" }) })
-                : null] }));
+    return (_jsxs("div", { className: itemClasses, id: id, children: [_jsx("div", { className: "zen-nav-item__main", children: _jsxs("div", { className: "zen-nav-item__content-left", children: [startNode ? _jsx("span", { className: "zen-nav-item__icon", children: startNode }) : null, PrimaryIconComponent ? _jsx(PrimaryIconComponent, { size: "huge" }) : null, _jsx("span", { className: "zen-nav-item__title", children: _jsx("span", { className: "zen-nav-item__title-text", children: title }) })] }) }), EndButtonIconComponent && endButtonTitle && onEndButtonClick ? (_jsx("button", { type: "button", className: "zen-nav-item__action", "aria-label": endButtonTitle, title: endButtonTitle, onClick: onEndButtonClick, children: _jsx(EndButtonIconComponent, { size: "huge" }) })) : null] }));
 };
 NavActionItem.displayName = "NavActionItem";

package/esm/nav/navItem/navItem.js

@@ -134,6 +134,6 @@ ButtonNavItem.displayName = "ButtonNavItem";
 export const NavItem = (props) => {
     const isLink = isLinkNavItem(props);
     const { collapsed } = useNavContext();
-    return isLink ? (_jsx(LinkNavItem, Object.assign({ collapsed: collapsed }, props))) : (_jsx(ButtonNavItem, Object.assign({ collapsed: collapsed }, props)));
+    return isLink ? _jsx(LinkNavItem, Object.assign({ collapsed: collapsed }, props)) : _jsx(ButtonNavItem, Object.assign({ collapsed: collapsed }, props));
 };
 NavItem.displayName = "NavItem";

package/esm/nav/navMobileBar/navMobileBar.js

@@ -36,6 +36,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");
 export const NavMobileBar = ({
   className,
   children,

package/esm/nav/navSection/navSection.js

@@ -26,12 +26,10 @@ export const NavSection = ({ children, className }) => {
         const navItemElements = sectionRef.current.querySelectorAll(".zen-nav-item");
         childRefs.current = Array.from(navItemElements);
     }, [children]);
-    const arrowClickHandler = useCallback((evt) => {
+    const arrowClickHandler = useCallback(evt => {
         var _a, _b, _c;
         const key = evt.key;
-        if ((key !== "ArrowDown" && key !== "ArrowUp" &&
-            key !== "Home" && key !== "End" &&
-            key !== "PageUp" && key !== "PageDown") || // non-handled keys
+        if ((key !== "ArrowDown" && key !== "ArrowUp" && key !== "Home" && key !== "End" && key !== "PageUp" && key !== "PageDown") || // non-handled keys
             !children || // section is empty
             !evt.target.closest(".zen-nav-section") // event triggered outside of section
         ) {
@@ -57,6 +55,6 @@ export const NavSection = ({ children, className }) => {
         (_c = childRefs.current[focusedIndex.current]) === null || _c === void 0 ? void 0 : _c.focus();
     }, [children]);
     const cssClasses = classNames(["zen-nav-section", className || "", collapsed ? "zen-nav-section--collapsed" : ""]);
-    return _jsx("div", { ref: sectionRef, role: "menu", className: cssClasses, onKeyDown: arrowClickHandler, children: focusableChildren });
+    return (_jsx("div", { ref: sectionRef, role: "menu", className: cssClasses, onKeyDown: arrowClickHandler, children: focusableChildren }));
 };
 NavSection.displayName = "NavSection";

package/esm/nav/utils/navUtils.js

@@ -77,7 +77,5 @@ export const collectNavItems = (element) => {
     if (isNavItem(element)) {
         return [element];
     }
-    return children.length > 0
-        ? children.flatMap(child => collectNavItems(child))
-        : [];
+    return children.length > 0 ? children.flatMap(child => collectNavItems(child)) : [];
 };

package/esm/notification/notification.js

@@ -37,6 +37,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 Notification = ({
   id,
   isCollapsible = true,

package/esm/notification/pushNotification/pushNotification.js

@@ -6,15 +6,12 @@ export const PushNotification = ({ children, isOpen }) => {
         if (!ref.current || !isOpen) {
             return;
         }
-        ref.current.animate([
-            { left: "120%" },
-            { left: "0%" }
-        ], {
+        ref.current.animate([{ left: "120%" }, { left: "0%" }], {
             duration: 150,
             iterations: 1,
             delay: 0
         });
     }, [isOpen]);
-    return isOpen && _jsx("div", { style: { position: "relative" }, ref: ref, children: children });
+    return (isOpen && (_jsx("div", { style: { position: "relative" }, ref: ref, children: children })));
 };
 export default PushNotification;

package/esm/oldPill/pill.js

@@ -40,12 +40,12 @@ const getPillTypeClassName = (type) => pillClassesByType[type] || "";
  *  1. Rename .zen-pill-new to .zen-pill
  *  2. Rename .zen-pill-new-content to zen-pill-content
  *  3. Remove commonStyles/pillStyles/pillStyles.less
-*/
+ */
 export const Pill = (_a) => {
     var { children, className = "", type, long, size = PillSize.Normal, ref } = _a, restProps = __rest(_a, ["children", "className", "type", "long", "size", "ref"]);
     const pillTypeClass = getPillTypeClassName(type || "");
     const pillLongClass = long ? "zen-pill--long" : "";
     const pillSizeClass = size === PillSize.Small ? "zen-pill--small" : "";
     const pillClasses = classNames(["zen-pill", pillTypeClass, pillLongClass, pillSizeClass, className]);
-    return _jsx("div", Object.assign({}, restProps, { className: pillClasses, ref: ref, children: children }));
+    return (_jsx("div", Object.assign({}, restProps, { className: pillClasses, ref: ref, children: children })));
 };

package/esm/overview/overview.js

@@ -20,9 +20,7 @@ export const Overview = ({ className, title, description, icon, label }) => {
         if (!(label === null || label === void 0 ? void 0 : label.type) || label.type === OverviewOptionsType.Neutral || !label.arrow) {
             return _jsxs("div", { className: "zen-overview__label-item", children: [label === null || label === void 0 ? void 0 : label.percentage, "%"] });
         }
-        return _jsx(Pill, { type: label.type === OverviewOptionsType.Positive ? PillType.Success : PillType.Error, size: PillSize.Small, children: _jsxs(_Fragment, { children: [label.arrow === OverviewOptionsArrow.Up
-                        ? _jsx(IconArrowTop, {})
-                        : _jsx(IconArrowBottom, {}), _jsxs("span", { children: [label.percentage, "%"] })] }) });
+        return (_jsx(Pill, { type: label.type === OverviewOptionsType.Positive ? PillType.Success : PillType.Error, size: PillSize.Small, children: _jsxs(_Fragment, { children: [label.arrow === OverviewOptionsArrow.Up ? _jsx(IconArrowTop, {}) : _jsx(IconArrowBottom, {}), _jsxs("span", { children: [label.percentage, "%"] })] }) }));
     }, [label === null || label === void 0 ? void 0 : label.type, label === null || label === void 0 ? void 0 : label.percentage, label === null || label === void 0 ? void 0 : label.arrow]);
-    return _jsxs("div", { className: classNames(["zen-overview", className ? className : ""]), children: [icon ? _jsx("div", { className: "zen-overview__icon", children: icon }) : null, _jsxs("div", { className: classNames(["zen-overview__content", icon ? "" : "zen-overview__content--full"]), children: [_jsx("div", { className: "zen-overview__title zen-ellipsis heading-05", children: title }), _jsxs("div", { className: "zen-overview__additional", children: [_jsx("div", { className: "zen-overview__description zen-ellipsis body-04", children: description }), label ? _jsx("div", { className: "zen-overview__label", children: getLabel() }) : null] })] })] });
+    return (_jsxs("div", { className: classNames(["zen-overview", className ? className : ""]), children: [icon ? _jsx("div", { className: "zen-overview__icon", children: icon }) : null, _jsxs("div", { className: classNames(["zen-overview__content", icon ? "" : "zen-overview__content--full"]), children: [_jsx("div", { className: "zen-overview__title zen-ellipsis heading-05", children: title }), _jsxs("div", { className: "zen-overview__additional", children: [_jsx("div", { className: "zen-overview__description zen-ellipsis body-04", children: description }), label ? _jsx("div", { className: "zen-overview__label", children: getLabel() }) : null] })] })] }));
 };

package/esm/pageHeader/pageHeaderActions.js

@@ -13,9 +13,9 @@ import { zen } from "../utils/zen";
 export const PageHeaderActions = ({ className = "", children }) => {
     var _a, _b;
     const isMobile = useMobile();
-    const childrenArray = useMemo(() => getItemsFromFragments(
+    const childrenArray = useMemo(() => getItemsFromFragments(Children.toArray(children).filter(
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    Children.toArray(children).filter((child) => child !== null && child !== undefined && React.isValidElement(child))), [children]);
+    (child) => child !== null && child !== undefined && React.isValidElement(child))), [children]);
     const nonFittingElements = useMemo(() => childrenArray.slice(2, childrenArray.length), [childrenArray]);
     const fittingElements = useMemo(() => childrenArray.slice(0, 2).map(el => {
         if (isNamedChildComponent(el, PageHeaderButtonDisplayName)) {
@@ -27,7 +27,11 @@ export const PageHeaderActions = ({ className = "", children }) => {
         return el;
     }), [childrenArray]);
     const moreButton = useMemo(() => (_jsx(PageToolbarCollapsedItemsControl, { className: "zen-page-header-component__actions-more", children: nonFittingElements }, "page-header-more-actions-key")), [nonFittingElements]);
-    const actionsContent = childrenArray.length ? (_jsxs("div", { className: classNames(["zen-page-header-component__actions", isMobile ? "zen-page-header-component__actions--mobile-portal" : "", className]), children: [nonFittingElements.length > 0 ? moreButton : null, fittingElements] })) : null;
+    const actionsContent = childrenArray.length ? (_jsxs("div", { className: classNames([
+            "zen-page-header-component__actions",
+            isMobile ? "zen-page-header-component__actions--mobile-portal" : "",
+            className
+        ]), children: [nonFittingElements.length > 0 ? moreButton : null, fittingElements] })) : null;
     // For mobile, render actions in a portal at the bottom center of viewport
     if (isMobile && actionsContent) {
         const modalRoot = ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.body);

package/esm/pageHeader/pageHeaderButton.js

@@ -17,6 +17,6 @@ export const PageHeaderButton = (_a) => {
     var { id, children, icon, iconPosition = ButtonIconPosition.Start, className = "", onClick, title } = _a, restProps = __rest(_a, ["id", "children", "icon", "iconPosition", "className", "onClick", "title"]);
     const fullClassName = classNames(["zen-page-header-button", className || ""]);
     const props = Object.assign({}, restProps);
-    return _jsx(TextIconButton, Object.assign({ id: id, icon: icon, title: title, iconPosition: iconPosition, className: fullClassName, onClick: onClick ? (e) => onClick(id, e) : undefined }, props, { children: children }));
+    return (_jsx(TextIconButton, Object.assign({ id: id, icon: icon, title: title, iconPosition: iconPosition, className: fullClassName, onClick: onClick ? e => onClick(id, e) : undefined }, props, { children: children })));
 };
 PageHeaderButton.displayName = PageHeaderButtonDisplayName;

package/esm/pageLayout/pageContentLayout/pageContentLayout.js

@@ -1,11 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 export const PageContentLayout = ({ id, className, children, oldStyle, ref }) => {
-    const cssClassName = classNames([
-        "zen-page-layout__content",
-        oldStyle ? "zen-page-layout__content--old" : "",
-        className || ""
-    ]);
-    return _jsx("div", { id: id, className: cssClassName, ref: ref, children: children });
+    const cssClassName = classNames(["zen-page-layout__content", oldStyle ? "zen-page-layout__content--old" : "", className || ""]);
+    return (_jsx("div", { id: id, className: cssClassName, ref: ref, children: children }));
 };
 PageContentLayout.displayName = "PageContentLayout";

package/esm/pageLayout/pageLayout.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "../commonHelpers/classNames/classNames";
-export const PageLayout = ({ id, className, children }) => _jsx("section", { id: id, className: classNames(["zen-page-layout", className || ""]), children: children });
+export const PageLayout = ({ id, className, children }) => (_jsx("section", { id: id, className: classNames(["zen-page-layout", className || ""]), children: children }));

package/esm/pageSection/pageSection.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "../commonHelpers/classNames/classNames";
-export const PageSection = ({ title, className, children }) => _jsxs("section", { className: classNames(["zen-page-section", className || ""]), children: [_jsx("div", { className: "zen-page-section__title", children: title }), _jsx("div", { className: "zen-page-section__content", children: children })] });
+export const PageSection = ({ title, className, children }) => (_jsxs("section", { className: classNames(["zen-page-section", className || ""]), children: [_jsx("div", { className: "zen-page-section__title", children: title }), _jsx("div", { className: "zen-page-section__content", children: children })] }));

package/esm/pagination/pagination.js

@@ -7,8 +7,7 @@ import { PaginationText } from "./paginationText/paginationText";
 import { PaginationType } from "./paginationType";
 export const Pagination = ({ className, activePage, total, perPage, onChange, disabled, includeText = false, type = PaginationType.Compact, gridRef }) => {
     var _a, _b;
-    const gridNode = ((_a = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) === null || _a === void 0 ? void 0 : _a.classList.contains("zen-data-grid")) ?
-        gridRef.current : (_b = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) === null || _b === void 0 ? void 0 : _b.querySelector(".zen-data-grid");
+    const gridNode = ((_a = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) === null || _a === void 0 ? void 0 : _a.classList.contains("zen-data-grid")) ? gridRef.current : (_b = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) === null || _b === void 0 ? void 0 : _b.querySelector(".zen-data-grid");
     const displayedPagesCount = 6;
     const totalNumberOfPages = useMemo(() => Math.ceil(total / perPage), [total, perPage]);
     const getPaginationValues = () => {
@@ -47,13 +46,5 @@ export const Pagination = ({ className, activePage, total, perPage, onChange, di
         }
     };
     const isSinglePage = total <= perPage;
-    return _jsxs("div", { className: classNames(["zen-pagination", `zen-pagination--type-${type}`, className ? className : ""]), children: [includeText
-                ? _jsx(PaginationText, { amount: total, from: total === 0 ? total : activePage * perPage + 1, to: Math.min((activePage + 1) * perPage, total) })
-                : null, isSinglePage
-                ? null
-                : _jsx(PaginationArrow, { value: "previous", disabled: activePage === 0 || disabled, arrowButtonHandler: () => handlePageChange(activePage - 1), type: type }), type === PaginationType.Normal
-                ? _jsx(PaginationButtonsRow, { paginationValues: getPaginationValues(), activePage: activePage, upperBoundIndex: totalNumberOfPages - 1, onChange: handlePageChange })
-                : null, isSinglePage
-                ? null
-                : _jsx(PaginationArrow, { value: "next", disabled: activePage >= totalNumberOfPages - 1 || disabled, arrowButtonHandler: () => handlePageChange(activePage + 1), type: type })] });
+    return (_jsxs("div", { className: classNames(["zen-pagination", `zen-pagination--type-${type}`, className ? className : ""]), children: [includeText ? (_jsx(PaginationText, { amount: total, from: total === 0 ? total : activePage * perPage + 1, to: Math.min((activePage + 1) * perPage, total) })) : null, isSinglePage ? null : (_jsx(PaginationArrow, { value: "previous", disabled: activePage === 0 || disabled, arrowButtonHandler: () => handlePageChange(activePage - 1), type: type })), type === PaginationType.Normal ? (_jsx(PaginationButtonsRow, { paginationValues: getPaginationValues(), activePage: activePage, upperBoundIndex: totalNumberOfPages - 1, onChange: handlePageChange })) : null, isSinglePage ? null : (_jsx(PaginationArrow, { value: "next", disabled: activePage >= totalNumberOfPages - 1 || disabled, arrowButtonHandler: () => handlePageChange(activePage + 1), type: type }))] }));
 };

package/esm/pagination/paginationArrow.js

@@ -34,6 +34,7 @@ injectString("tr", "Previous page", "\xD6nceki sayfa");
 injectString("zh-Hans", "Previous page", "\u4E0A\u4E00\u9875");
 injectString("zh-TW", "Previous page", "\u4E0A\u4E00\u9801");
 injectString("ro-RO", "Previous page", "Pagina anterioar\u0103");
+injectString("ar-SA", "Previous page", "\u0627\u0644\u0635\u0641\u062D\u0629 \u0627\u0644\u0633\u0627\u0628\u0642\u0629");
 injectString("cs", "Next page", "Dal\u0161\xED str\xE1nka");
 injectString("da-DK", "Next page", "N\xE6ste side");
 injectString("de", "Next page", "N\xE4chste Seite");
@@ -60,6 +61,7 @@ injectString("tr", "Next page", "Sonraki sayfa");
 injectString("zh-Hans", "Next page", "\u4E0B\u4E00\u9875");
 injectString("zh-TW", "Next page", "\u4E0B\u4E00\u9801");
 injectString("ro-RO", "Next page", "Pagina urm\u0103toare");
+injectString("ar-SA", "Next page", "\u0627\u0644\u0635\u0641\u062D\u0629 \u0627\u0644\u062A\u0627\u0644\u064A\u0629");
 export const PaginationArrow = ({
   value,
   disabled,

package/esm/pagination/paginationButtonsRow.js

@@ -4,7 +4,7 @@ import { ButtonType } from "../button/buttonType";
 const getTitle = (pNumber) => "Navigate to page {0}".replace("{0}", String(pNumber));
 export const PaginationButtonsRow = ({ paginationValues, activePage, upperBoundIndex, onChange }) => {
     const paginationButtonsRow = [];
-    const getOutBoundsIndicator = (key) => _jsx("span", { className: "zen-pagination__out-bounds-indicator", children: "..." }, key);
+    const getOutBoundsIndicator = (key) => (_jsx("span", { className: "zen-pagination__out-bounds-indicator", children: "..." }, key));
     paginationValues.forEach((pageIndex, ind) => {
         const title = getTitle(pageIndex + 1);
         if (ind === 1 && pageIndex !== ind) {

package/esm/pagination/paginationText/paginationText.js

@@ -27,6 +27,7 @@ injectString("tr", "Showing {from} - {to} of {total}", "{from} - {to} / {total}
 injectString("zh-Hans", "Showing {from} - {to} of {total}", "\u663E\u793A {from} - {to} \u9875\uFF0C\u5171 {total} \u9875");
 injectString("zh-TW", "Showing {from} - {to} of {total}", "\u986F\u793A {from} - {to} (\u5171 {total})");
 injectString("ro-RO", "Showing {from} - {to} of {total}", "Se afi\u0219eaz\u0103 {from}-{to} din {total}");
+injectString("ar-SA", "Showing {from} - {to} of {total}", "\u0639\u0631\u0636 {from} - {to} \u0645\u0646 {total}");
 export const PaginationText = ({
   amount,
   from,

package/esm/pagination/paginationType.d.ts

@@ -1,7 +1,7 @@
 export declare enum PaginationType {
     /**
      * @deprecated Please use {@link PaginationType.Compact} instead
-    */
+     */
     Normal = "normal",
     Compact = "compact"
 }

package/esm/pagination/paginationType.js

@@ -2,7 +2,7 @@ export var PaginationType;
 (function (PaginationType) {
     /**
      * @deprecated Please use {@link PaginationType.Compact} instead
-    */
+     */
     PaginationType["Normal"] = "normal";
     PaginationType["Compact"] = "compact";
 })(PaginationType || (PaginationType = {}));

package/esm/parallelSelection/parallelSelection.js

@@ -40,10 +40,13 @@ export const ParallelSelection = ({ selected, items, triggerRef, title, onSelect
             setOuterIsOpen(undefined);
         }
     }, [outerIsOpen]);
-    const selectList = useMemo(() => _jsx(SelectList, { id: selectListId, title: title, onChange: handleSelection, multiselect: false, selectItemOnFocus: false, value: new Map([[selected, CheckboxState.On]]), items: items, className: "zen-parallel-selection__select" }), [selectListId, title, handleSelection, selected, items]);
-    return _jsx(Popup, { alignment: alignment, className: classNames(["zen-parallel-selection zen-parallel-selection-popup", isMobileView ? "zen-parallel-selection-popup--mobile" : ""]), triggerRef: triggerRef, triggerBy: "click", outerIsOpen: outerIsOpen, recalculateOnScroll: true, children: selectList });
+    const selectList = useMemo(() => (_jsx(SelectList, { id: selectListId, title: title, onChange: handleSelection, multiselect: false, selectItemOnFocus: false, value: new Map([[selected, CheckboxState.On]]), items: items, className: "zen-parallel-selection__select" })), [selectListId, title, handleSelection, selected, items]);
+    return (_jsx(Popup, { alignment: alignment, className: classNames([
+            "zen-parallel-selection zen-parallel-selection-popup",
+            isMobileView ? "zen-parallel-selection-popup--mobile" : ""
+        ]), triggerRef: triggerRef, triggerBy: "click", outerIsOpen: outerIsOpen, recalculateOnScroll: true, children: selectList }));
 };
 export const ParallelSelectionTrigger = (_a) => {
     var { className, title, ref } = _a, otherProps = __rest(_a, ["className", "title", "ref"]);
-    return _jsx(TextIconButton, Object.assign({ className: className || "", type: "tertiary-black", icon: IconChevronDownSmall, ref: ref, title: title, iconPosition: ButtonIconPosition.Start }, otherProps));
+    return (_jsx(TextIconButton, Object.assign({ className: className || "", type: "tertiary-black", icon: IconChevronDownSmall, ref: ref, title: title, iconPosition: ButtonIconPosition.Start }, otherProps)));
 };

package/esm/pill/components/pillActionable/pillActionable.js

@@ -12,17 +12,19 @@ export const ActionablePill = ({ onChange, disabled, readonly, className, childr
     const drivePillClass = useDriveClassName("zen-pill-actionable");
     const hasIcon = !!icon;
     const { contentClasses, ref, isFixedSize, isTextContentHidden, textContent } = usePillSize({ size, iconPosition: "right", initialTitle: title });
-    const svgIcon = useMemo(() => hasIcon ? createElement(icon, {
-        className: "zen-pill-non-actionable__icon",
-        size: isDrive ? "bigger" : "medium"
-    }) : null, [hasIcon, icon, isDrive]);
-    const onChangeHandler = useCallback((e) => {
+    const svgIcon = useMemo(() => hasIcon
+        ? createElement(icon, {
+            className: "zen-pill-non-actionable__icon",
+            size: isDrive ? "bigger" : "medium"
+        })
+        : null, [hasIcon, icon, isDrive]);
+    const onChangeHandler = useCallback(e => {
         if (readonly) {
             return;
         }
         onChange(e.target.checked);
     }, [onChange, readonly]);
-    const onKeyUpHandler = useCallback((e) => {
+    const onKeyUpHandler = useCallback(e => {
         if (e.key === "Enter" && !disabled && !readonly) {
             onChange(!active);
             return;
@@ -35,11 +37,11 @@ export const ActionablePill = ({ onChange, disabled, readonly, className, childr
     // Only show title when icon is visible but text is hidden, or when explicit title is provided with hidden text
     const showTitle = hasIcon && isTextContentHidden;
     const titleValue = title || textContent;
-    const titleAttribute = showTitle && titleValue ? { "title": titleValue, "aria-label": titleValue } : {};
-    return _jsxs("label", Object.assign({ style: { width: isFixedSize ? size : "" } }, titleAttribute, { ref: ref, className: classNames([
+    const titleAttribute = showTitle && titleValue ? { title: titleValue, "aria-label": titleValue } : {};
+    return (_jsxs("label", Object.assign({ style: { width: isFixedSize ? size : "" } }, titleAttribute, { ref: ref, className: classNames([
             "zen-pill-actionable",
             drivePillClass !== null && drivePillClass !== void 0 ? drivePillClass : "",
             getActionablePillStateClassName(!!disabled, !!readonly, active),
             className !== null && className !== void 0 ? className : ""
-        ]), htmlFor: id, children: [_jsx("input", { checked: active, onKeyUp: onKeyUpHandler, onChange: onChangeHandler, id: id, className: "zen-pill-actionable__input", type: "checkbox", disabled: disabled, readOnly: readonly }), _jsxs("div", { className: classNames(["zen-pill-actionable__content-wrapper", contentClasses]), children: [_jsx("div", { className: classNames(["zen-pill-text-content", driveTextClass !== null && driveTextClass !== void 0 ? driveTextClass : ""]), children: children }), svgIcon] })] }));
+        ]), htmlFor: id, children: [_jsx("input", { checked: active, onKeyUp: onKeyUpHandler, onChange: onChangeHandler, id: id, className: "zen-pill-actionable__input", type: "checkbox", disabled: disabled, readOnly: readonly }), _jsxs("div", { className: classNames(["zen-pill-actionable__content-wrapper", contentClasses]), children: [_jsx("div", { className: classNames(["zen-pill-text-content", driveTextClass !== null && driveTextClass !== void 0 ? driveTextClass : ""]), children: children }), svgIcon] })] })));
 };

package/esm/pill/components/pillNonActionable/pillNonActionable.js

@@ -34,6 +34,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 NonActionablePill = ({
   icon,
   type = "default",
@@ -73,9 +74,9 @@ export const NonActionablePill = ({
     size: isDrive ? "large" : "big"
   }) : null, [hasIcon, icon, isDrive]);
   const titleAttribute = title ? {
-    "title": title
+    title: title
   } : pillTitle ? {
-    "title": pillTitle
+    title: pillTitle
   } : {};
   return _jsx("div", {
     "data-id": id,

package/esm/pill/pill.js

@@ -37,6 +37,4 @@ export const Pill = (_a) => {
     }
     return _jsx(NonActionablePill, Object.assign({ className: pillClassNames }, props));
 };
-export const TRANSLATIONS = [
-    ...NON_ACTIONABLE_PILL_TRANSLATIONS
-];
+export const TRANSLATIONS = [...NON_ACTIONABLE_PILL_TRANSLATIONS];

package/esm/pillAction/pillAction.js

@@ -6,5 +6,5 @@ import { IconCheckmark } from "../icons/deprecated/iconCheckmark";
  */
 export const PillAction = ({ onChange, disabled, children }) => {
     const id = useId();
-    return _jsxs("div", { className: "zen-pill-actionable", children: [_jsx("input", { onChange: onChange, id: id, className: "zen-pill-actionable__input", type: "checkbox", disabled: disabled }), _jsxs("label", { className: "zen-pill-actionable__block zen-pill-actionable__block--actionable", htmlFor: id, children: [_jsx(IconCheckmark, { size: "big", className: "zen-pill-actionable__icon" }), children] })] });
+    return (_jsxs("div", { className: "zen-pill-actionable", children: [_jsx("input", { onChange: onChange, id: id, className: "zen-pill-actionable__input", type: "checkbox", disabled: disabled }), _jsxs("label", { className: "zen-pill-actionable__block zen-pill-actionable__block--actionable", htmlFor: id, children: [_jsx(IconCheckmark, { size: "big", className: "zen-pill-actionable__icon" }), children] })] }));
 };

package/esm/pillBox/components/pillBoxItem.js

@@ -30,6 +30,7 @@ injectString("tr", "Remove selection", "Se\xE7imi kald\u0131r");
 injectString("zh-Hans", "Remove selection", "\u5220\u9664\u6240\u9009\u5185\u5BB9");
 injectString("zh-TW", "Remove selection", "\u79FB\u9664\u9078\u53D6\u9805\u76EE");
 injectString("ro-RO", "Remove selection", "Elimina\u021Bi selec\u021Bia");
+injectString("ar-SA", "Remove selection", "\u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u062A\u062D\u062F\u064A\u062F");
 export const PillBoxItem = memo(function innerPillItem({
   item,
   onRemove,