@geotab/zenith 3.12.3-beta.0 → 3.13.0-beta.0

package/esm/divider/divider.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "../commonHelpers/classNames/classNames";
 export const Divider = ({ className, spacing }) => {
     const classes = classNames(["zen-divider", className !== null && className !== void 0 ? className : ""]);
-    const style = spacing ? { marginTop: spacing, marginBottom: spacing } : undefined;
+    const style = spacing ? { marginBlockStart: spacing, marginBlockEnd: spacing } : undefined;
     return _jsx("hr", { className: classes, style: style, role: "separator" });
 };

package/esm/dropdownRaw/dropdownRaw.js

@@ -88,7 +88,7 @@ export const DropdownRaw = props => {
     getSelectedItem,
     buttonType = "secondary",
     listLimit = LIST_LIMIT,
-    alignment = "bottom-left",
+    alignment = "bottom-start",
     isReadOnly,
     sortFn,
     checkboxLabel,

package/esm/filtersBar/components/filtersBarPeriodPicker/filtersBarPeriodPicker.js

@@ -161,4 +161,4 @@ export const FiltersBarPeriodPicker = ({ props, hasApplyButton, className, useSi
     const isUsePopup = options.length > sidePanelMaxGroupedItemsLength;
     return (_jsx(SidePanelCell, { role: "group", labelledBy: filterBarLabelledId, titleId: filterBarLabelledId, title: sidePanelTitle, withoutSidePaddings: !isUsePopup, children: isUsePopup ? popup : component }));
 };
-export const TRANSLATIONS = ["Clear", "Reset", "Apply", "Date range filter", "The start date cannot be empty.", "The end date cannot be empty."];
+export const TRANSLATIONS = ["Clear", "Reset", "Apply", "Date range filter", "The Start date cannot be empty.", "The End date cannot be empty."];

package/esm/filtersBar/filtersBarSidePanel/filtersBarSidePanel.js

@@ -23,33 +23,33 @@ import { Pill } from "../../pill/pill";
 import { zen } from "../../utils/zen";
 import { usePortal } from "../../commonHelpers/hooks/usePortal";
 import { useClientReady } from "../../commonHelpers/hooks/useClientReady";
-injectString("cs", "Reset All", "Obnovit v\u0161e");
-injectString("da-DK", "Reset All", "Nulstil alle");
-injectString("de", "Reset All", "Alles zur\xFCcksetzen");
-injectString("en", "Reset All", "Reset all");
-injectString("es", "Reset All", "Restablecer todo");
-injectString("fi-FI", "Reset All", "Palauta kaikki");
-injectString("fr", "Reset All", "R\xE9initialiser tout");
-injectString("fr-FR", "Reset All", "R\xE9initialiser tout");
-injectString("hu-HU", "Reset All", "\xC1ll\xEDtsd vissza mindet.");
-injectString("id", "Reset All", "Atur ulang semua");
-injectString("it", "Reset All", "Ripristinare tutto");
-injectString("ja", "Reset All", "\u3059\u3079\u3066\u30EA\u30BB\u30C3\u30C8");
-injectString("ko-KR", "Reset All", "\uC804\uCCB4 \uC7AC\uC124\uC815");
-injectString("ms", "Reset All", "Tetapkan semula semua");
-injectString("nb-NO", "Reset All", "Tilbakestill alt");
-injectString("nl", "Reset All", "Alles resetten");
-injectString("pl", "Reset All", "Resetuj wszystko");
-injectString("pt-BR", "Reset All", "Redefinir tudo");
-injectString("pt-PT", "Reset All", "Redefinir tudo");
-injectString("sk-SK", "Reset All", "Vynulova\u0165 v\u0161etko");
-injectString("sv", "Reset All", "\xC5terst\xE4ll alla");
-injectString("th", "Reset All", "\u0E23\u0E35\u0E40\u0E0B\u0E47\u0E15\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14");
-injectString("tr", "Reset All", "T\xFCm\xFCn\xFC s\u0131f\u0131rla");
-injectString("zh-Hans", "Reset All", "\u5168\u90E8\u91CD\u7F6E");
-injectString("zh-TW", "Reset All", "\u5168\u90E8\u91CD\u8A2D");
-injectString("ro-RO", "Reset All", "Reseta\u021Bi tot");
-injectString("ar", "Reset All", "\u0625\u0639\u0627\u062F\u0629 \u062A\u0639\u064A\u064A\u0646 \u0627\u0644\u0643\u0644");
+injectString("cs", "Reset all", "Obnovit v\u0161e");
+injectString("da-DK", "Reset all", "Nulstil alle");
+injectString("de", "Reset all", "Alles zur\xFCcksetzen");
+injectString("en", "Reset all", "Reset all");
+injectString("es", "Reset all", "Restablecer todo");
+injectString("fi-FI", "Reset all", "Palauta kaikki");
+injectString("fr", "Reset all", "R\xE9initialiser tout");
+injectString("fr-FR", "Reset all", "R\xE9initialiser tout");
+injectString("hu-HU", "Reset all", "\xC1ll\xEDtsd vissza mindet.");
+injectString("id", "Reset all", "Atur ulang semua");
+injectString("it", "Reset all", "Ripristinare tutto");
+injectString("ja", "Reset all", "\u3059\u3079\u3066\u30EA\u30BB\u30C3\u30C8");
+injectString("ko-KR", "Reset all", "\uC804\uCCB4 \uC7AC\uC124\uC815");
+injectString("ms", "Reset all", "Tetapkan semula semua");
+injectString("nb-NO", "Reset all", "Tilbakestill alt");
+injectString("nl", "Reset all", "Alles resetten");
+injectString("pl", "Reset all", "Resetuj wszystko");
+injectString("pt-BR", "Reset all", "Redefinir tudo");
+injectString("pt-PT", "Reset all", "Redefinir tudo");
+injectString("sk-SK", "Reset all", "Vynulova\u0165 v\u0161etko");
+injectString("sv", "Reset all", "\xC5terst\xE4ll alla");
+injectString("th", "Reset all", "\u0E23\u0E35\u0E40\u0E0B\u0E47\u0E15\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14");
+injectString("tr", "Reset all", "T\xFCm\xFCn\xFC s\u0131f\u0131rla");
+injectString("zh-Hans", "Reset all", "\u5168\u90E8\u91CD\u7F6E");
+injectString("zh-TW", "Reset all", "\u5168\u90E8\u91CD\u8A2D");
+injectString("ro-RO", "Reset all", "Reseta\u021Bi tot");
+injectString("ar", "Reset all", "\u0625\u0639\u0627\u062F\u0629 \u062A\u0639\u064A\u064A\u0646 \u0627\u0644\u0643\u0644");
 injectString("cs", "Cancel", "Zru\u0161it");
 injectString("da-DK", "Cancel", "Annuller");
 injectString("de", "Cancel", "Abbrechen");
@@ -184,7 +184,7 @@ export const FiltersBarSidePanel = ({
   const {
     translate
   } = useLanguage();
-  const isLongTextLanguages = useMemo(() => `${translate("Reset All")}${translate("Cancel")}${translate("Apply")}`.length > 31, [translate]);
+  const isLongTextLanguages = useMemo(() => `${translate("Reset all")}${translate("Cancel")}${translate("Apply")}`.length > 31, [translate]);
   const dataShieldId = useUniqueId();
   const isMobile = useMobile();
   const {
@@ -357,7 +357,7 @@ export const FiltersBarSidePanel = ({
             className: "zen-side-panel-filters-bar__clear-button",
             onClick: onResetFilters,
             type: "tertiary",
-            children: translate("Reset All")
+            children: translate("Reset all")
           })]
         }) : _jsxs(_Fragment, {
           children: [_jsx("div", {
@@ -366,7 +366,7 @@ export const FiltersBarSidePanel = ({
               type: "tertiary",
               className: "zen-side-panel-filters-bar__clear-button",
               onClick: onResetFilters,
-              children: translate("Reset All")
+              children: translate("Reset all")
             })
           }), _jsxs("div", {
             className: "zen-side-panel-filters-bar__footer-section",
@@ -399,4 +399,4 @@ export const FiltersBarSidePanel = ({
   });
 };
 export const FiltersBarSidePanelContainer = _ => _jsx(_Fragment, {});
-export const TRANSLATIONS = ["Apply", "Clear", "Reset All", "Close", "Cancel"];
+export const TRANSLATIONS = ["Apply", "Clear", "Reset all", "Close", "Cancel"];

package/esm/filtersBar/filtersContainer/filtersContainer.js

@@ -8,6 +8,7 @@ import { IconChevronLeft } from "../../icons/iconChevronLeft";
 import { useDirectionalIcon } from "../../utils/localization/useDirectionalIcon";
 import { useLanguage } from "../../utils/localization/useLanguage";
 import { useDriveClassName } from "../../utils/theme/useDriveClassName";
+import { useIsRTL } from "../../utils/localization/useIsRTL";
 import { zen } from "../../utils/zen";
 injectString("cs", "Scroll to start", "P\u0159ej\xEDt na za\u010D\xE1tek");
 injectString("da-DK", "Scroll to start", "Rul til start");
@@ -61,13 +62,22 @@ injectString("tr", "Scroll to end", "Sona kayd\u0131r");
 injectString("zh-Hans", "Scroll to end", "\u6EDA\u52A8\u81F3\u672B\u5C3E");
 injectString("zh-TW", "Scroll to end", "\u6372\u52D5\u81F3\u7D50\u5C3E\u8655");
 injectString("ro-RO", "Scroll to end", "Derulare la sf\xE2r\u0219it");
-const getScrollButtonType = element => {
+const getScrollButtonType = (element, isRTL) => {
   const scrollLeft = element.scrollLeft;
   const scrollWidth = element.scrollWidth;
   const clientWidth = element.clientWidth;
   if (scrollLeft === 0 && scrollWidth === clientWidth) {
     return "";
   }
+  if (isRTL) {
+    if (scrollLeft < -1 && scrollLeft > clientWidth - scrollWidth + 1) {
+      return "both";
+    }
+    if (scrollLeft >= -1) {
+      return "start";
+    }
+    return "end";
+  }
   if (scrollLeft > 0 && scrollWidth > clientWidth + scrollLeft + 1) {
     return "both";
   }
@@ -87,6 +97,7 @@ export const FiltersContainer = ({
   } = useLanguage();
   const ScrollStartIcon = useDirectionalIcon(IconChevronLeft, IconChevronRight);
   const ScrollEndIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
+  const isRTL = useIsRTL();
   const gradientClass = "zen-filters-toolbar__gradient";
   const scrollerClass = "zen-filters-toolbar__scroller";
   const driveClassNameScroller = useDriveClassName(scrollerClass);
@@ -113,7 +124,7 @@ export const FiltersContainer = ({
       if (scrollableElt) {
         timer && ((_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, timer));
         timer = (_b = zen.setTimeout) === null || _b === void 0 ? void 0 : _b.call(zen, () => {
-          setScrollButtonType(getScrollButtonType(scrollableElt));
+          setScrollButtonType(getScrollButtonType(scrollableElt, isRTL));
         }, 200);
       }
     };
@@ -127,12 +138,12 @@ export const FiltersContainer = ({
       scrollableElement.removeEventListener("scroll", resizeHandler);
       (_b = zen.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(zen, "resize", resizeHandler);
     };
-  }, [scrollableRef]);
+  }, [scrollableRef, isRTL]);
   useEffect(() => {
     if (scrollableRef.current) {
-      setScrollButtonType(getScrollButtonType(scrollableRef.current));
+      setScrollButtonType(getScrollButtonType(scrollableRef.current, isRTL));
     }
-  }, [scrollableRef, children]);
+  }, [scrollableRef, children, isRTL]);
   useEffect(() => {
     var _a, _b, _c, _d;
     if (showLeft) {

package/esm/header/components/collapsedItemsControl/collapsedItemsControl.js

@@ -118,7 +118,7 @@ export const PageToolbarCollapsedItemsControl = ({
   return items.length ? _jsx(Menu, {
     title: translate("More"),
     trigger: adjustmentButton,
-    alignment: "bottom-right",
+    alignment: "bottom-end",
     children: items
   }) : null;
 };

package/esm/header/header.js

@@ -259,7 +259,7 @@ export const Header = ({ children, className, onFiltersBarOpen
     if (!isClientReady) {
         return null;
     }
-    return (_jsx(HeaderMenuProvider, { alignment: "left-top", children: _jsx(HeaderCustomContent.Provider, { value: { content, setContent }, children: _jsx(FiltersBarContextProvider, { value: { setFiltersBarToggleAllFiltersFn, onUpdateNumberOfChangedFiltersFn: setNumberOfChangedFilters }, children: _jsx(SearchContextProvider, { value: { setSearchComponent: handleSearchChange }, children: _jsx(TriggerContextProvider, { value: { triggerComponent: mobileFilterTrigger }, children: _jsxs("div", { className: fullClassName, ref: headerRef, children: [mainLineContainer, newLineContainer, tabs ? (_jsxs("div", { className: classNames([
+    return (_jsx(HeaderMenuProvider, { alignment: "start-top", children: _jsx(HeaderCustomContent.Provider, { value: { content, setContent }, children: _jsx(FiltersBarContextProvider, { value: { setFiltersBarToggleAllFiltersFn, onUpdateNumberOfChangedFiltersFn: setNumberOfChangedFilters }, children: _jsx(SearchContextProvider, { value: { setSearchComponent: handleSearchChange }, children: _jsx(TriggerContextProvider, { value: { triggerComponent: mobileFilterTrigger }, children: _jsxs("div", { className: fullClassName, ref: headerRef, children: [mainLineContainer, newLineContainer, tabs ? (_jsxs("div", { className: classNames([
                                         "zen-main-header__tabs",
                                         "zen-main-header--border",
                                         isMobile ? "zen-main-header__tabs--mobile" : "",

package/esm/header/headerMenu.js

@@ -21,7 +21,7 @@ import { useDrive } from "../utils/theme/useDrive";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 export const HeaderMenuDisplayName = "HeaderMenu";
 export const HeaderMenu = (_a) => {
-    var { name, children, icon, iconSize = "large", className = "", important, alignment = "bottom-right", inContextMenu, onlyIcon } = _a, restProps = __rest(_a, ["name", "children", "icon", "iconSize", "className", "important", "alignment", "inContextMenu", "onlyIcon"]);
+    var { name, children, icon, iconSize = "large", className = "", important, alignment = "bottom-end", inContextMenu, onlyIcon } = _a, restProps = __rest(_a, ["name", "children", "icon", "iconSize", "className", "important", "alignment", "inContextMenu", "onlyIcon"]);
     const isMobile = useMobile();
     const isDrive = useDrive();
     const driveClassName = useDriveClassName("zen-header-button-with-dropdown");

package/esm/list/itemData/itemDataInternal.js

@@ -98,7 +98,7 @@ const ItemDataInternalInner = ({
       return null;
     }
     return _jsx(Menu, {
-      alignment: "bottom-right",
+      alignment: "bottom-end",
       title: translate("More"),
       trigger: _jsx(Button, {
         type: "tertiary-black",

package/esm/list/listItem/listItem.js

@@ -124,7 +124,7 @@ export const ListItem = ({
       }, action.name))
     });
     const menu = secondaryActions.length > 0 ? _jsx(Menu, {
-      alignment: "bottom-right",
+      alignment: "bottom-end",
       title: translate("More"),
       trigger: _jsx(Button, {
         type: "tertiary-black",

package/esm/menu/menu.js

@@ -6,7 +6,7 @@ import { MenuItem } from "./components/menuItem";
 import { MenuSeparator } from "./components/menuSeparator";
 import { classNames } from "../commonHelpers/classNames/classNames";
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const Menu = ({ children, title, trigger, triggerRef, ariaLabel, ariaLabelledBy, alignment = "bottom-left", className }) => {
+export const Menu = ({ children, title, trigger, triggerRef, ariaLabel, ariaLabelledBy, alignment = "bottom-start", className }) => {
     var _a;
     const [isOpen, setIsOpen] = useState(false);
     const innerRef = useRef(null);

package/esm/nav/navAddMenu/navAddMenu.js

@@ -24,7 +24,7 @@ export const NavAddMenu = ({ title, alignment, className, children }) => {
         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([
+    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 ? "start" : collapsed ? "end" : "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([

package/esm/nav/navFooter/navFooter.js

@@ -82,8 +82,8 @@ const NavFooterBottom = ({
       return cloneElement(childElement, Object.assign(Object.assign({}, childElement.props), {
         collapsed: !isMobile,
         className: classNames([childElement.props.className || "", "zen-nav-footer__button"]),
-        menuAlignment: "right-bottom",
-        tooltipAlignment: collapsed ? "right" : "top"
+        menuAlignment: "end-bottom",
+        tooltipAlignment: collapsed ? "end" : "top"
       }));
     })
   });
@@ -106,8 +106,8 @@ const NavFooterEditButton = ({
     collapsed: !isMobile,
     primaryIcon: IconEdit,
     onClick: () => onEditStateToggle === null || onEditStateToggle === void 0 ? void 0 : onEditStateToggle(true),
-    menuAlignment: "right-bottom",
-    tooltipAlignment: collapsed ? "right" : "top"
+    menuAlignment: "end-bottom",
+    tooltipAlignment: collapsed ? "end" : "top"
   }, "edit-button");
 };
 NavFooterEditButton.displayName = "NavFooterEditButton";

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

@@ -50,7 +50,7 @@ export const NavFooterAction = ({
   return _jsx(NavItem, {
     primaryIcon: IconSettings4,
     title: translate("Configure"),
-    menuAlignment: "right-bottom",
+    menuAlignment: "end-bottom",
     isMenuItem: false,
     children: filteredItems
   });

package/esm/nav/navHeader/navHeader.js

@@ -85,7 +85,7 @@ const NavHeaderToggler = ({
       collapsed: true,
       isMenuItem: false,
       onClick: () => onCollapseToggle && onCollapseToggle(!collapsed),
-      tooltipAlignment: collapsed ? "right" : "bottom"
+      tooltipAlignment: collapsed ? "end" : "bottom"
     }, "collapse-button")
   });
 };

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

@@ -114,7 +114,7 @@ export const NavHeaderSearch = ({
       collapsed: true,
       isMenuItem: false,
       onClick: () => onSearchToggle === null || onSearchToggle === void 0 ? void 0 : onSearchToggle(true),
-      tooltipAlignment: collapsed ? "right" : "bottom"
+      tooltipAlignment: collapsed ? "end" : "bottom"
     }) : null, searchOpen || isMobile ? _jsx(SearchInput, {
       autoFocus: true,
       ariaLabel: translate("Search"),

package/esm/nav/navItem/navItem.js

@@ -24,7 +24,7 @@ import { useMobile } from "../../commonHelpers/hooks/useMobile";
 const ICON_SIZE = "huge";
 const SUBMENU_ICON_SIZE = "large";
 export const NavItemContext = createContext({ parentLevel: 0 });
-const defaultTooltipAlignment = "right";
+const defaultTooltipAlignment = "end";
 const isLinkNavItem = (item) => !!item.link;
 const NavItemContent = ({ primaryIcon, secondaryIcon, isBeta, counter, collapsed, hasSubmenu, iconClass, level = 1, children }) => {
     const primaryIconRef = useRef(null);
@@ -72,7 +72,7 @@ const LinkNavItem = (_a) => {
 };
 LinkNavItem.displayName = "LinkNavItem";
 const ButtonNavItem = (_a) => {
-    var { className, title, onClick, collapsed, active, children, tabIndex, menuAlignment = "right-top", isMenuItem = true, tooltipAlignment = defaultTooltipAlignment, actionIcon, actionIconTitle, onActionIconClick, onDropdownStateChange } = _a, rest = __rest(_a, ["className", "title", "onClick", "collapsed", "active", "children", "tabIndex", "menuAlignment", "isMenuItem", "tooltipAlignment", "actionIcon", "actionIconTitle", "onActionIconClick", "onDropdownStateChange"]);
+    var { className, title, onClick, collapsed, active, children, tabIndex, menuAlignment = "end-top", isMenuItem = true, tooltipAlignment = defaultTooltipAlignment, actionIcon, actionIconTitle, onActionIconClick, onDropdownStateChange } = _a, rest = __rest(_a, ["className", "title", "onClick", "collapsed", "active", "children", "tabIndex", "menuAlignment", "isMenuItem", "tooltipAlignment", "actionIcon", "actionIconTitle", "onActionIconClick", "onDropdownStateChange"]);
     const [menuOpen, setMenuOpen] = useState(false);
     const { parentLevel = 0, closeParentMenu } = useContext(NavItemContext);
     useEffect(() => {

package/esm/rangeRaw/rangeRaw.js

@@ -540,4 +540,4 @@ export const RangeRaw = props => {
     })), isMobile ? memoizedMobileView : memoizedDesktopView]
   });
 };
-export const TRANSLATIONS = ["Min", "Max", "Range Filter popup", "Clear", "Cancel", "Apply", "Must be less than the max", "Must be more than the min", "Must be more than {value}", "Must be less than {value}", "Must be in range {min} - {max}", "The min value must be set", "The max value must be set", "{rangeName} values {values}"];
+export const TRANSLATIONS = ["Min", "Max", "Range Filter popup", "Clear", "Cancel", "Apply", "Must be less than the max", "Must be more than the min", "Must be more than {value}", "Must be less than {value}", "Must be in the {min} - {max} range", "The min value must be set", "The max value must be set", "{rangeName} values {values}"];

package/esm/rangeRaw/utils/rangeHelper.js

@@ -1,31 +1,31 @@
 import { injectString } from "../../utils/localization/translationsDictionary";
-injectString("cs", "Must be in range {min} - {max}", "Mus\xED b\xFDt v rozsahu {min}\u2013{max}");
-injectString("da-DK", "Must be in range {min} - {max}", "Skal v\xE6re i omr\xE5det {min} - {max}");
-injectString("de", "Must be in range {min} - {max}", "Muss zwischen {min} und {max} liegen");
-injectString("en", "Must be in range {min} - {max}", "Must be in the {min} - {max} range");
-injectString("es", "Must be in range {min} - {max}", "Debe estar en el rango {min}-{max}");
-injectString("fi-FI", "Must be in range {min} - {max}", "On oltava v\xE4lill\xE4 {min} - {max}");
-injectString("fr", "Must be in range {min} - {max}", "Doit \xEAtre compris dans la plage {min} - {max}");
-injectString("fr-FR", "Must be in range {min} - {max}", "Doit \xEAtre compris entre {min} et {max}");
-injectString("hu-HU", "Must be in range {min} - {max}", "A(z) {min} \xE9s {max} k\xF6z\xF6tti tartom\xE1nyban kell lennie.");
-injectString("id", "Must be in range {min} - {max}", "Harus berada dalam rentang {min} - {max}");
-injectString("it", "Must be in range {min} - {max}", "Deve rientrare nell'intervallo {min} - {max}");
-injectString("ja", "Must be in range {min} - {max}", "{min} \uFF5E {max} \u306E\u7BC4\u56F2\u3067\u3042\u308B\u5FC5\u8981\u304C\u3042\u308A\u307E\u3059");
-injectString("ko-KR", "Must be in range {min} - {max}", "{min}~{max} \uBC94\uC704\uC5D0 \uC788\uC5B4\uC57C \uD569\uB2C8\uB2E4.");
-injectString("ms", "Must be in range {min} - {max}", "Mesti dalam julat {min} - {max}");
-injectString("nb-NO", "Must be in range {min} - {max}", "M\xE5 v\xE6re innenfor {min} - {max}");
-injectString("nl", "Must be in range {min} - {max}", "Moet binnen het bereik {min} - {max} liggen");
-injectString("pl", "Must be in range {min} - {max}", "Musi znajdowa\u0107 si\u0119 w zakresie {min}\u2013{max}");
-injectString("pt-BR", "Must be in range {min} - {max}", "Deve estar entre intervalo de {min} a {max}");
-injectString("pt-PT", "Must be in range {min} - {max}", "Deve estar no intervalo {min} - {max}");
-injectString("sk-SK", "Must be in range {min} - {max}", "Mus\xED by\u0165 v rozsahu {min} - {max}");
-injectString("sv", "Must be in range {min} - {max}", "M\xE5ste vara inom intervallet {min}\u2013{max}");
-injectString("th", "Must be in range {min} - {max}", "\u0E15\u0E49\u0E2D\u0E07\u0E2D\u0E22\u0E39\u0E48\u0E43\u0E19\u0E0A\u0E48\u0E27\u0E07 {min} - {max}");
-injectString("tr", "Must be in range {min} - {max}", "{min} - {max} aral\u0131\u011F\u0131nda olmal\u0131d\u0131r");
-injectString("zh-Hans", "Must be in range {min} - {max}", "\u5FC5\u987B\u5904\u4E8E {min} \u81F3 {max} \u8303\u56F4\u5185");
-injectString("zh-TW", "Must be in range {min} - {max}", "\u5FC5\u9808\u5728 {min} - {max} \u7BC4\u570D\u5167");
-injectString("ro-RO", "Must be in range {min} - {max}", "Trebuie s\u0103 fie \xEEn intervalul {min}-{max}");
-injectString("ar", "Must be in range {min} - {max}", "\u064A\u062C\u0628 \u0623\u0646 \u064A\u0643\u0648\u0646 \u0641\u064A \u0627\u0644\u0646\u0637\u0627\u0642 {min} - {max}");
+injectString("cs", "Must be in the {min} - {max} range", "Mus\xED b\xFDt v rozsahu {min}\u2013{max}");
+injectString("da-DK", "Must be in the {min} - {max} range", "Skal v\xE6re i omr\xE5det {min} - {max}");
+injectString("de", "Must be in the {min} - {max} range", "Muss zwischen {min} und {max} liegen");
+injectString("en", "Must be in the {min} - {max} range", "Must be in the {min} - {max} range");
+injectString("es", "Must be in the {min} - {max} range", "Debe estar en el rango {min}-{max}");
+injectString("fi-FI", "Must be in the {min} - {max} range", "On oltava v\xE4lill\xE4 {min} - {max}");
+injectString("fr", "Must be in the {min} - {max} range", "Doit \xEAtre compris dans la plage {min} - {max}");
+injectString("fr-FR", "Must be in the {min} - {max} range", "Doit \xEAtre compris entre {min} et {max}");
+injectString("hu-HU", "Must be in the {min} - {max} range", "A(z) {min} \xE9s {max} k\xF6z\xF6tti tartom\xE1nyban kell lennie.");
+injectString("id", "Must be in the {min} - {max} range", "Harus berada dalam rentang {min} - {max}");
+injectString("it", "Must be in the {min} - {max} range", "Deve rientrare nell'intervallo {min} - {max}");
+injectString("ja", "Must be in the {min} - {max} range", "{min} \uFF5E {max} \u306E\u7BC4\u56F2\u3067\u3042\u308B\u5FC5\u8981\u304C\u3042\u308A\u307E\u3059");
+injectString("ko-KR", "Must be in the {min} - {max} range", "{min}~{max} \uBC94\uC704\uC5D0 \uC788\uC5B4\uC57C \uD569\uB2C8\uB2E4.");
+injectString("ms", "Must be in the {min} - {max} range", "Mesti dalam julat {min} - {max}");
+injectString("nb-NO", "Must be in the {min} - {max} range", "M\xE5 v\xE6re innenfor {min} - {max}");
+injectString("nl", "Must be in the {min} - {max} range", "Moet binnen het bereik {min} - {max} liggen");
+injectString("pl", "Must be in the {min} - {max} range", "Musi znajdowa\u0107 si\u0119 w zakresie {min}\u2013{max}");
+injectString("pt-BR", "Must be in the {min} - {max} range", "Deve estar entre intervalo de {min} a {max}");
+injectString("pt-PT", "Must be in the {min} - {max} range", "Deve estar no intervalo {min} - {max}");
+injectString("sk-SK", "Must be in the {min} - {max} range", "Mus\xED by\u0165 v rozsahu {min} - {max}");
+injectString("sv", "Must be in the {min} - {max} range", "M\xE5ste vara inom intervallet {min}\u2013{max}");
+injectString("th", "Must be in the {min} - {max} range", "\u0E15\u0E49\u0E2D\u0E07\u0E2D\u0E22\u0E39\u0E48\u0E43\u0E19\u0E0A\u0E48\u0E27\u0E07 {min} - {max}");
+injectString("tr", "Must be in the {min} - {max} range", "{min} - {max} aral\u0131\u011F\u0131nda olmal\u0131d\u0131r");
+injectString("zh-Hans", "Must be in the {min} - {max} range", "\u5FC5\u987B\u5904\u4E8E {min} \u81F3 {max} \u8303\u56F4\u5185");
+injectString("zh-TW", "Must be in the {min} - {max} range", "\u5FC5\u9808\u5728 {min} - {max} \u7BC4\u570D\u5167");
+injectString("ro-RO", "Must be in the {min} - {max} range", "Trebuie s\u0103 fie \xEEn intervalul {min}-{max}");
+injectString("ar", "Must be in the {min} - {max} range", "\u064A\u062C\u0628 \u0623\u0646 \u064A\u0643\u0648\u0646 \u0641\u064A \u0627\u0644\u0646\u0637\u0627\u0642 {min} - {max}");
 injectString("cs", "Must be more than {value}", "Mus\xED b\xFDt v\u011Bt\u0161\xED ne\u017E {value}");
 injectString("da-DK", "Must be more than {value}", "Skal v\xE6re mere end {value}");
 injectString("de", "Must be more than {value}", "Muss gr\xF6\xDFer sein als {value}");
@@ -190,7 +190,7 @@ injectString("ro-RO", "Must be more than the min", "Trebuie s\u0103 fie peste mi
 injectString("ar", "Must be more than the min", "\u064A\u062C\u0628 \u0623\u0646 \u064A\u0643\u0648\u0646 \u0623\u0643\u062B\u0631 \u0645\u0646 \u0627\u0644\u062D\u062F \u0627\u0644\u0623\u062F\u0646\u0649");
 export const getRangeError = (translateFn, currentVal, defMin, defMax) => {
   if (defMin !== undefined && defMax !== undefined && currentVal !== null && (currentVal < defMin || currentVal > defMax)) {
-    return translateFn("Must be in range {min} - {max}").replace("{min}", defMin.toString()).replace("{max}", defMax.toString());
+    return translateFn("Must be in the {min} - {max} range").replace("{min}", defMin.toString()).replace("{max}", defMax.toString());
   }
   if (defMin !== undefined && currentVal !== null && currentVal < defMin) {
     return translateFn("Must be more than {value}").replace("{value}", defMin.toString());

package/esm/sortControl/sortControl.js

@@ -230,7 +230,7 @@ export const SortControl = ({
           size: isDrive ? "huge" : "large"
         })
       }),
-      alignment: "bottom-left",
+      alignment: "bottom-start",
       onOpenChange: isCurrentlyOpen => onOptionsToggle(isCurrentlyOpen),
       children: _jsx(SelectList, {
         id: "sortControlSelectList",

package/esm/summary/summary.d.ts

@@ -3,7 +3,8 @@ import "./summary.less";
 export interface ISummary {
     color?: string;
     title?: string;
-    value: string | number;
+    value: string | number | ReactNode;
+    prefix?: ReactNode;
     unit?: string;
     tooltip?: ReactNode;
     more?: ReactNode;
@@ -11,4 +12,4 @@ export interface ISummary {
     onToggle?: () => void;
     description?: ReactNode;
 }
-export declare const Summary: ({ color, title, value, unit, tooltip, more, isEnabled, onToggle, description }: ISummary) => import("react/jsx-runtime").JSX.Element;
+export declare const Summary: ({ color, title, value, prefix, unit, tooltip, more, isEnabled, onToggle, description }: ISummary) => import("react/jsx-runtime").JSX.Element;

package/esm/summary/summary.js

@@ -63,6 +63,7 @@ export const Summary = ({
   color,
   title,
   value,
+  prefix,
   unit,
   tooltip,
   more,
@@ -107,9 +108,12 @@ export const Summary = ({
       })]
     }), _jsxs("div", {
       className: "zen-summary__data",
-      children: [_jsx("div", {
+      children: [prefix && _jsx("div", {
+        className: "zen-summary__prefix",
+        children: prefix
+      }), _jsx("div", {
         className: "zen-summary__value zen-ellipsis",
-        children: typeof value === "string" ? value : value.toFixed(2)
+        children: typeof value === "number" ? value.toFixed(2) : value
       }), unit && _jsx("div", {
         className: "zen-summary__unit",
         children: unit

package/esm/summaryTileBar/summaryTileBar.js

@@ -5,16 +5,18 @@ import { ArrowNavButton } from "../commonHelpers/arrowNavigation/components/arro
 import { useHoldOnScroll } from "../commonHelpers/arrowNavigation/hooks/useHoldOnScroll";
 import { useScrolling } from "../commonHelpers/arrowNavigation/hooks/useScrolling";
 import { useManualScrolling } from "../commonHelpers/arrowNavigation/hooks/useManualScrolling";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 import { DeviceType } from "../commonHelpers/hooks/deviceType";
 import { useDeviceType } from "../commonHelpers/hooks/useDeviceType";
 export const SummaryTileBar = ({ className, children, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby }) => {
     const { isScrollable, scrollableElementRef, onMouseDown, onMouseUp } = useHoldOnScroll();
     const { scroll } = useManualScrolling({ elementRef: scrollableElementRef });
     const { onScroll, state } = useScrolling();
+    const isRTL = useIsRTL();
     const [deviceType, setDeviceType] = useState(DeviceType.Mobile);
     const isMobile = deviceType === DeviceType.Mobile;
     useDeviceType(setDeviceType);
-    return (_jsxs("div", { className: classNames(["zen-card-deck", isMobile ? "zen-card-deck--mobile" : "", className !== null && className !== void 0 ? className : ""]), children: [_jsx("div", { className: "zen-card-deck__cards-container", ref: scrollableElementRef, onScroll: onScroll, children: _jsx("ul", { className: "zen-card-deck__cards", role: role !== null && role !== void 0 ? role : "list", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children: Children.map(children, child => (_jsx("li", { role: role === "tablist" ? "presentation" : undefined, children: child }))) }) }), !isScrollable && (_jsxs("div", { className: "zen-card-deck__arrows", children: [_jsx(ArrowNavButton, { className: "zen-card-deck__arrow-button", value: "left", isHidden: false, disabled: state.scrolledLeft, arrowButtonHandler: scroll, onMouseDown: onMouseDown, onMouseUp: onMouseUp }), _jsx(ArrowNavButton, { className: "zen-card-deck__arrow-button", value: "right", isHidden: false, disabled: state.scrolledRight, arrowButtonHandler: scroll, onMouseDown: onMouseDown, onMouseUp: onMouseUp })] }))] }));
+    return (_jsxs("div", { className: classNames(["zen-card-deck", isMobile ? "zen-card-deck--mobile" : "", className !== null && className !== void 0 ? className : ""]), children: [_jsx("div", { className: "zen-card-deck__cards-container", ref: scrollableElementRef, onScroll: onScroll, children: _jsx("ul", { className: "zen-card-deck__cards", role: role !== null && role !== void 0 ? role : "list", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children: Children.map(children, child => (_jsx("li", { role: role === "tablist" ? "presentation" : undefined, children: child }))) }) }), !isScrollable && (_jsxs("div", { className: "zen-card-deck__arrows", children: [_jsx(ArrowNavButton, { className: "zen-card-deck__arrow-button", value: "left", action: isRTL ? "right" : undefined, isHidden: false, disabled: isRTL ? state.scrolledRight : state.scrolledLeft, arrowButtonHandler: scroll, onMouseDown: onMouseDown, onMouseUp: onMouseUp }), _jsx(ArrowNavButton, { className: "zen-card-deck__arrow-button", value: "right", action: isRTL ? "left" : undefined, isHidden: false, disabled: isRTL ? state.scrolledLeft : state.scrolledRight, arrowButtonHandler: scroll, onMouseDown: onMouseDown, onMouseUp: onMouseUp })] }))] }));
 };
 export const SummaryTileBarDisplayName = "SummaryTileBar";
 SummaryTileBar.displayName = SummaryTileBarDisplayName;

package/esm/table/actions/actionsMenu.js

@@ -168,7 +168,7 @@ export const ActionsMenu = ({
         ariaLabelledBy: buttonId,
         title: translate("Actions"),
         triggerRef: ref,
-        alignment: "bottom-right",
+        alignment: "bottom-end",
         children: menuItemsToRender
       })]
     });
@@ -179,7 +179,7 @@ export const ActionsMenu = ({
   return _jsx(Menu, {
     title: translate("Actions"),
     trigger: trigger,
-    alignment: "bottom-right",
+    alignment: "bottom-end",
     children: menuItems
   });
 };

package/esm/table/flexible/columnsPopup.js

@@ -68,7 +68,7 @@ export const ColumnsPopup = ({
   return _jsx(Popup, {
     ariaLabel: translate("Column Settings"),
     triggerRef: triggerRef,
-    alignment: "bottom-right",
+    alignment: "bottom-end",
     children: _jsx(ColumnSettings, {
       onReset: onResetListener,
       children: listOfColumns

package/esm/table/table.js

@@ -202,10 +202,8 @@ const TableInner = ({
   const handleOnTriggerClick = useCallback(() => setSelectMode(prev => !prev), []);
   const hasPostActions = useMemo(() => columnsPopup || isMobile && selectable || !isMobile && fullscreenButton || isFeedVisible, [columnsPopup, fullscreenButton, isFeedVisible, isMobile, selectable]);
   const hasToolbar = useMemo(() => bulkActions || feedSortControl || pagination && !isMobile || other.length || columnsPopup || !isMobile && fullscreenButton || isFeedVisible, [bulkActions, columnsPopup, feedSortControl, fullscreenButton, isFeedVisible, isMobile, other.length, pagination]);
-  const gridAutoHeight = useMemo(() => contentHeight ? `${contentHeight}px` : undefined, [contentHeight]);
-  const minHeight = "400px";
-  const gridHeight = useMemo(() => height || gridAutoHeight || minHeight, [gridAutoHeight, height]);
-  // TODO: disadvantages?
+  const gridAutoHeight = useMemo(() => contentHeight !== undefined ? `${contentHeight}px` : undefined, [contentHeight]);
+  const gridHeight = useMemo(() => height || gridAutoHeight, [gridAutoHeight, height]);
   const {
     gridClasses,
     restClasses
@@ -213,10 +211,10 @@ const TableInner = ({
   return _jsx(LayoutFullScreen, {
     className: classNames([...gridClasses]),
     children: _jsxs("div", {
-      style: {
+      style: gridHeight ? {
         height: gridHeight
-      },
-      className: classNames(["zen-table-wrapper", hasToolbar ? "zen-table-wrapper--with-toolbar" : "", ...restClasses]),
+      } : undefined,
+      className: classNames(["zen-table-wrapper", gridHeight ? "" : "zen-table-wrapper--fit-content", hasToolbar ? "zen-table-wrapper--with-toolbar" : "", ...restClasses]),
       children: [hasToolbar ? _jsxs(EntitiesListActions, {
         gridType: isMobile ? DeviceType.Mobile : DeviceType.Desktop,
         children: [_jsxs(EntitiesListActions.Actions, {