@geotab/zenith 3.12.3 → 3.13.0-beta.1

package/dist/list/itemData/itemDataInternal.js

@@ -106,7 +106,7 @@ const ItemDataInternalInner = ({
       return null;
     }
     return (0, jsx_runtime_1.jsx)(menu_1.Menu, {
-      alignment: "bottom-right",
+      alignment: "bottom-end",
       title: translate("More"),
       trigger: (0, jsx_runtime_1.jsx)(button_1.Button, {
         type: "tertiary-black",

package/dist/list/listItem/listItem.js

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

package/dist/menu/menu.js

@@ -9,7 +9,7 @@ const menuItem_1 = require("./components/menuItem");
 const menuSeparator_1 = require("./components/menuSeparator");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const Menu = ({ children, title, trigger, triggerRef, ariaLabel, ariaLabelledBy, alignment = "bottom-left", className }) => {
+const Menu = ({ children, title, trigger, triggerRef, ariaLabel, ariaLabelledBy, alignment = "bottom-start", className }) => {
     var _a;
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const innerRef = (0, react_1.useRef)(null);

package/dist/nav/navAddMenu/navAddMenu.js

@@ -27,7 +27,7 @@ const NavAddMenu = ({ title, alignment, className, children }) => {
         className: (0, classNames_1.classNames)(["zen-nav-item--level-2", child.props.className || ""]),
         collapsed: false
     }));
-    return ((0, jsx_runtime_1.jsx)(navItem_1.NavItemContext, { value: { parentLevel: 2 }, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-nav-header__actions", className || ""]), children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { id: triggerId, title: title, className: (0, classNames_1.classNames)(["zen-nav-footer__actions-icon", className || ""]), icon: isOpen && !isMobile ? iconClose_1.IconClose : iconPlus_1.IconPlus, iconSize: "large", ref: triggerRef, onClick: () => setIsOpen(!isOpen), role: !isMobile ? "menuitem" : undefined }), alignment: isMobile ? "left" : collapsed ? "right" : "top", children: title }), (0, jsx_runtime_1.jsx)(controlledMenu_1.ControlledMenu, { title: title, isOpen: isOpen, setIsOpen: setIsOpen, triggerRef: triggerRef, alignment: alignment, paddingX: 8, paddingY: 8, className: (0, classNames_1.classNames)([
+    return ((0, jsx_runtime_1.jsx)(navItem_1.NavItemContext, { value: { parentLevel: 2 }, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-nav-header__actions", className || ""]), children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { id: triggerId, title: title, className: (0, classNames_1.classNames)(["zen-nav-footer__actions-icon", className || ""]), icon: isOpen && !isMobile ? iconClose_1.IconClose : iconPlus_1.IconPlus, iconSize: "large", ref: triggerRef, onClick: () => setIsOpen(!isOpen), role: !isMobile ? "menuitem" : undefined }), alignment: isMobile ? "start" : collapsed ? "end" : "top", children: title }), (0, jsx_runtime_1.jsx)(controlledMenu_1.ControlledMenu, { title: title, isOpen: isOpen, setIsOpen: setIsOpen, triggerRef: triggerRef, alignment: alignment, paddingX: 8, paddingY: 8, className: (0, classNames_1.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: (0, classNames_1.classNames)([

package/dist/nav/navFooter/navFooter.js

@@ -90,8 +90,8 @@ const NavFooterBottom = ({
       return (0, react_1.cloneElement)(childElement, Object.assign(Object.assign({}, childElement.props), {
         collapsed: !isMobile,
         className: (0, classNames_1.classNames)([childElement.props.className || "", "zen-nav-footer__button"]),
-        menuAlignment: "right-bottom",
-        tooltipAlignment: collapsed ? "right" : "top"
+        menuAlignment: "end-bottom",
+        tooltipAlignment: collapsed ? "end" : "top"
       }));
     })
   });
@@ -114,8 +114,8 @@ const NavFooterEditButton = ({
     collapsed: !isMobile,
     primaryIcon: iconEdit_1.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/dist/nav/navFooter/navFooterAction/navFooterAction.js

@@ -58,7 +58,7 @@ const NavFooterAction = ({
   return (0, jsx_runtime_1.jsx)(navItem_1.NavItem, {
     primaryIcon: iconSettings4_1.IconSettings4,
     title: translate("Configure"),
-    menuAlignment: "right-bottom",
+    menuAlignment: "end-bottom",
     isMenuItem: false,
     children: filteredItems
   });

package/dist/nav/navHeader/navHeader.js

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

package/dist/nav/navHeader/navHeaderSearch/navHeaderSearch.js

@@ -122,7 +122,7 @@ 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 ? (0, jsx_runtime_1.jsx)(searchInput_1.SearchInput, {
       autoFocus: true,
       ariaLabel: translate("Search"),

package/dist/nav/navItem/navItem.js

@@ -27,7 +27,7 @@ const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
 const ICON_SIZE = "huge";
 const SUBMENU_ICON_SIZE = "large";
 exports.NavItemContext = (0, react_1.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 = (0, react_1.useRef)(null);
@@ -75,7 +75,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] = (0, react_1.useState)(false);
     const { parentLevel = 0, closeParentMenu } = (0, react_1.useContext)(exports.NavItemContext);
     (0, react_1.useEffect)(() => {

package/dist/rangeRaw/rangeRaw.js

@@ -549,4 +549,4 @@ const RangeRaw = props => {
   });
 };
 exports.RangeRaw = RangeRaw;
-exports.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}"];
+exports.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/dist/rangeRaw/utils/rangeHelper.js

@@ -3,33 +3,33 @@
 const {
   injectString
 } = require("../../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}");
@@ -198,7 +198,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.checkErrorType = exports.getErrorString = exports.getRangeError = void 0;
 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/dist/sortControl/sortControl.js

@@ -238,7 +238,7 @@ const SortControl = ({
           size: isDrive ? "huge" : "large"
         })
       }),
-      alignment: "bottom-left",
+      alignment: "bottom-start",
       onOpenChange: isCurrentlyOpen => onOptionsToggle(isCurrentlyOpen),
       children: (0, jsx_runtime_1.jsx)(selectList_1.SelectList, {
         id: "sortControlSelectList",

package/dist/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/dist/summary/summary.js

@@ -71,6 +71,7 @@ const Summary = ({
   color,
   title,
   value,
+  prefix,
   unit,
   tooltip,
   more,
@@ -115,9 +116,12 @@ const Summary = ({
       })]
     }), (0, jsx_runtime_1.jsxs)("div", {
       className: "zen-summary__data",
-      children: [(0, jsx_runtime_1.jsx)("div", {
+      children: [prefix && (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-summary__prefix",
+        children: prefix
+      }), (0, jsx_runtime_1.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 && (0, jsx_runtime_1.jsx)("div", {
         className: "zen-summary__unit",
         children: unit

package/dist/summaryTileBar/summaryTileBar.js

@@ -8,16 +8,18 @@ const arrowButton_1 = require("../commonHelpers/arrowNavigation/components/arrow
 const useHoldOnScroll_1 = require("../commonHelpers/arrowNavigation/hooks/useHoldOnScroll");
 const useScrolling_1 = require("../commonHelpers/arrowNavigation/hooks/useScrolling");
 const useManualScrolling_1 = require("../commonHelpers/arrowNavigation/hooks/useManualScrolling");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const deviceType_1 = require("../commonHelpers/hooks/deviceType");
 const useDeviceType_1 = require("../commonHelpers/hooks/useDeviceType");
 const SummaryTileBar = ({ className, children, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby }) => {
     const { isScrollable, scrollableElementRef, onMouseDown, onMouseUp } = (0, useHoldOnScroll_1.useHoldOnScroll)();
     const { scroll } = (0, useManualScrolling_1.useManualScrolling)({ elementRef: scrollableElementRef });
     const { onScroll, state } = (0, useScrolling_1.useScrolling)();
+    const isRTL = (0, useIsRTL_1.useIsRTL)();
     const [deviceType, setDeviceType] = (0, react_1.useState)(deviceType_1.DeviceType.Mobile);
     const isMobile = deviceType === deviceType_1.DeviceType.Mobile;
     (0, useDeviceType_1.useDeviceType)(setDeviceType);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-card-deck", isMobile ? "zen-card-deck--mobile" : "", className !== null && className !== void 0 ? className : ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-card-deck__cards-container", ref: scrollableElementRef, onScroll: onScroll, children: (0, jsx_runtime_1.jsx)("ul", { className: "zen-card-deck__cards", role: role !== null && role !== void 0 ? role : "list", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children: react_1.Children.map(children, child => ((0, jsx_runtime_1.jsx)("li", { role: role === "tablist" ? "presentation" : undefined, children: child }))) }) }), !isScrollable && ((0, jsx_runtime_1.jsxs)("div", { className: "zen-card-deck__arrows", children: [(0, jsx_runtime_1.jsx)(arrowButton_1.ArrowNavButton, { className: "zen-card-deck__arrow-button", value: "left", isHidden: false, disabled: state.scrolledLeft, arrowButtonHandler: scroll, onMouseDown: onMouseDown, onMouseUp: onMouseUp }), (0, jsx_runtime_1.jsx)(arrowButton_1.ArrowNavButton, { className: "zen-card-deck__arrow-button", value: "right", isHidden: false, disabled: state.scrolledRight, arrowButtonHandler: scroll, onMouseDown: onMouseDown, onMouseUp: onMouseUp })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-card-deck", isMobile ? "zen-card-deck--mobile" : "", className !== null && className !== void 0 ? className : ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-card-deck__cards-container", ref: scrollableElementRef, onScroll: onScroll, children: (0, jsx_runtime_1.jsx)("ul", { className: "zen-card-deck__cards", role: role !== null && role !== void 0 ? role : "list", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children: react_1.Children.map(children, child => ((0, jsx_runtime_1.jsx)("li", { role: role === "tablist" ? "presentation" : undefined, children: child }))) }) }), !isScrollable && ((0, jsx_runtime_1.jsxs)("div", { className: "zen-card-deck__arrows", children: [(0, jsx_runtime_1.jsx)(arrowButton_1.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 }), (0, jsx_runtime_1.jsx)(arrowButton_1.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 })] }))] }));
 };
 exports.SummaryTileBar = SummaryTileBar;
 exports.SummaryTileBarDisplayName = "SummaryTileBar";

package/dist/table/actions/actionsMenu.js

@@ -176,7 +176,7 @@ const ActionsMenu = ({
         ariaLabelledBy: buttonId,
         title: translate("Actions"),
         triggerRef: ref,
-        alignment: "bottom-right",
+        alignment: "bottom-end",
         children: menuItemsToRender
       })]
     });
@@ -187,7 +187,7 @@ const ActionsMenu = ({
   return (0, jsx_runtime_1.jsx)(menu_1.Menu, {
     title: translate("Actions"),
     trigger: trigger,
-    alignment: "bottom-right",
+    alignment: "bottom-end",
     children: menuItems
   });
 };

package/dist/table/flexible/columnsPopup.js

@@ -76,7 +76,7 @@ const ColumnsPopup = ({
   return (0, jsx_runtime_1.jsx)(popup_1.Popup, {
     ariaLabel: translate("Column Settings"),
     triggerRef: triggerRef,
-    alignment: "bottom-right",
+    alignment: "bottom-end",
     children: (0, jsx_runtime_1.jsx)(columnSettings_1.ColumnSettings, {
       onReset: onResetListener,
       children: listOfColumns

package/dist/table/table.js

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

package/dist/tabs/tabs.js

@@ -64,6 +64,7 @@ injectString("ro-RO", "Scroll to end", "Derulare la sf\xE2r\u0219it");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const useLanguage_1 = require("../utils/localization/useLanguage");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const tabItem_1 = require("./tabItem/tabItem");
 const iconChevronRight_1 = require("../icons/iconChevronRight");
 const iconChevronLeft_1 = require("../icons/iconChevronLeft");
@@ -74,13 +75,22 @@ const useMobileClassName_1 = require("../utils/theme/useMobileClassName");
 require("../utils/globalThisPolyfill");
 const zen_1 = require("../utils/zen");
 exports.TabsDisplayName = "Tabs";
-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";
   }
@@ -104,6 +114,7 @@ const Tabs = ({
   } = (0, useLanguage_1.useLanguage)();
   const ScrollStartIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronLeft_1.IconChevronLeft, iconChevronRight_1.IconChevronRight);
   const ScrollEndIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronRight_1.IconChevronRight, iconChevronLeft_1.IconChevronLeft);
+  const isRTL = (0, useIsRTL_1.useIsRTL)();
   const driveClassNameScroller = (0, useDriveClassName_1.useDriveClassName)("zen-tabs__scroller");
   const mobileClassNameScroller = (0, useMobileClassName_1.useMobileClassName)("zen-tabs__scroller");
   const driveClassNameGradient = (0, useDriveClassName_1.useDriveClassName)("zen-tabs__gradient");
@@ -164,7 +175,7 @@ const Tabs = ({
       if (scrollableElt) {
         timer && ((_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timer));
         timer = (_b = zen_1.zen.setTimeout) === null || _b === void 0 ? void 0 : _b.call(zen_1.zen, () => {
-          setScrollButtonType(getScrollButtonType(scrollableElt));
+          setScrollButtonType(getScrollButtonType(scrollableElt, isRTL));
         }, 200);
       }
     };
@@ -178,12 +189,12 @@ const Tabs = ({
       scrollableElement.removeEventListener("scroll", resizeHandler);
       (_b = zen_1.zen.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(zen_1.zen, "resize", resizeHandler);
     };
-  }, [scrollableRef]);
+  }, [scrollableRef, isRTL]);
   (0, react_1.useEffect)(() => {
     if (scrollableRef.current) {
-      setScrollButtonType(getScrollButtonType(scrollableRef.current));
+      setScrollButtonType(getScrollButtonType(scrollableRef.current, isRTL));
     }
-  }, [scrollableRef, tabs, activeTabId]);
+  }, [scrollableRef, tabs, activeTabId, isRTL]);
   const handleScrollButtonClick = (0, react_1.useCallback)((scrollableElt, delta) => () => {
     var _a;
     if (scrollableElt) {

package/dist/toolbar/helpers/getWidthWithMargin.js

@@ -4,8 +4,8 @@ exports.getWidthWithMargin = void 0;
 const zen_1 = require("../../utils/zen");
 const getWidthWithMargin = (elem) => {
     var _a;
-    const style = ((_a = zen_1.zen.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, elem)) || { marginLeft: "0", marginRight: "0" };
-    const margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight) || 0;
+    const style = ((_a = zen_1.zen.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, elem)) || { marginInlineStart: "0", marginInlineEnd: "0" };
+    const margin = parseFloat(style.marginInlineStart) + parseFloat(style.marginInlineEnd) || 0;
     const width = elem.getBoundingClientRect().width;
     return width + margin;
 };

package/dist/tooltip/helpers/calculateArrowPosition.js

@@ -5,13 +5,7 @@ const borderRadius = 4;
 const normalizeLeft = (left, tooltipWidth, arrowWidth) => Math.min(tooltipWidth - borderRadius - arrowWidth, Math.max(borderRadius, left));
 const normalizeTop = (top, tooltipHeight, arrowHeight) => Math.min(tooltipHeight - borderRadius - arrowHeight, Math.max(borderRadius, top));
 const calculateArrowPosition = (triggerRef, tooltipRef, arrowRef, alignment) => {
-    if (!triggerRef.current) {
-        return;
-    }
-    if (!tooltipRef.current) {
-        return;
-    }
-    if (!arrowRef.current) {
+    if (!triggerRef.current || !tooltipRef.current || !arrowRef.current) {
         return;
     }
     const triggerElement = triggerRef.current;

package/dist/tooltip/tooltip.js

@@ -101,6 +101,7 @@ const classNames_1 = require("../commonHelpers/classNames/classNames");
 const calculateArrowPosition_1 = require("./helpers/calculateArrowPosition");
 const deviceType_1 = require("../commonHelpers/hooks/deviceType");
 const useDeviceType_1 = require("../commonHelpers/hooks/useDeviceType");
+const normalizeLogicalAlignment_1 = require("../utils/positioningUtils/normalizeLogicalAlignment");
 const themeContext_1 = require("../utils/theme/themeContext");
 const tooltipAlignments_1 = require("../utils/positioningUtils/tooltipAlignments");
 const iconClose_1 = require("../icons/iconClose");
@@ -201,6 +202,7 @@ const Tooltip = ({
   var _a, _b, _c, _d;
   const GAP = 12;
   const isDrive = (0, useDrive_1.useDrive)();
+  const direction = (0, useDirection_1.useDirection)();
   const triggerRefNative = trigger ? trigger.props.ref : undefined;
   const triggerLocalRef = (0, react_1.useRef)(null);
   const triggerRef = triggerRefNative || triggerLocalRef;
@@ -215,14 +217,14 @@ const Tooltip = ({
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
-  const direction = (0, useDirection_1.useDirection)();
   const {
     dark
   } = (0, react_1.useContext)(themeContext_1.themeContext);
-  const tooltipAlignment = (0, react_1.useMemo)(() => isMobile ? "bottom" : alignment || "right", [isMobile, alignment]);
+  const tooltipAlignment = (0, react_1.useMemo)(() => isMobile ? "bottom" : alignment || (direction === "ltr" ? "right" : "left"), [isMobile, alignment, direction]);
+  const normalizedTooltipAlignment = (0, react_1.useMemo)(() => (0, normalizeLogicalAlignment_1.normalizeLogicalAlignment)(tooltipAlignment, direction), [tooltipAlignment, direction]);
   const TOOLTIP_ARROW_HEIGHT = (0, react_1.useMemo)(() => isMobile || isDrive ? 0 : 6, [isMobile, isDrive]);
-  const tooltipAlignmentRef = (0, react_1.useRef)(tooltipAlignment);
-  tooltipAlignmentRef.current = tooltipAlignment;
+  const tooltipAlignmentRef = (0, react_1.useRef)(normalizedTooltipAlignment);
+  tooltipAlignmentRef.current = normalizedTooltipAlignment;
   const setDeviceTypeStable = (0, react_1.useCallback)(newType => {
     setDeviceType(currentDeviceType => newType !== currentDeviceType ? newType : currentDeviceType);
   }, []);
@@ -283,7 +285,7 @@ const Tooltip = ({
     }, triggerCloneProps))
   });
   // Initial arrow class - will be updated by calculatePosition
-  const arrowClass = (0, react_1.useMemo)(() => arrowClasses[tooltipAlignment] || "", [tooltipAlignment]);
+  const arrowClass = (0, react_1.useMemo)(() => arrowClasses[normalizedTooltipAlignment] || "", [normalizedTooltipAlignment]);
   const getOppositeAlignment = main => {
     // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
     switch (main) {

package/dist/utils/localization/translations/ar.json

@@ -167,21 +167,21 @@
     "ShortSaturday": "س",
     "ShortSunday": "ح",
     "Date range": "نطاق التاريخ",
-    "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.": "استخدم عوامل تشغيل متعددة عند البحث عن مجموعة معينة. على سبيل المثال، تصفية الأصول التي تنتمي إلى مجموعة الجرارات ومجموعة تورنتو تعرض قائمة الجرارات التي تنتمي إلى فرع تورنتو.",
+    "Use multiple Operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.": "استخدم عوامل تشغيل متعددة عند البحث عن مجموعة معينة. على سبيل المثال، تصفية الأصول التي تنتمي إلى مجموعة الجرارات ومجموعة تورنتو تعرض قائمة الجرارات التي تنتمي إلى فرع تورنتو.",
     "Select columns": "تحديد الأعمدة",
     "Must be less than the max": "يجب أن يكون أقل من الحد الأقصى",
     "Must be more than the min": "يجب أن يكون أكثر من الحد الأدنى",
     "Must be more than {value}": "يجب أن يكون أكثر من {value}",
     "Must be less than {value}": "يجب أن يكون أقل من {value}",
-    "Must be in range {min} - {max}": "يجب أن يكون في النطاق {min} - {max}",
+    "Must be in the {min} - {max} range": "يجب أن يكون في النطاق {min} - {max}",
     "The min value must be set": "يجب تعيين الحد الأدنى",
     "The max value must be set": "يجب تعيين الحد الأقصى",
     "Range Filter popup": "نافذة تصفية النطاق",
     "{rangeName} values {values}": "قيم {rangeName} {values}",
-    "The end date cannot be empty.": "لا يمكن أن يكون تاريخ الانتهاء فارغاً.",
-    "The start date cannot be empty.": "لا يمكن أن يكون تاريخ البدء فارغاً.",
-    "The date must be set": "يجب تعيين التاريخ.",
-    "The time must be set": "يجب تعيين الوقت.",
+    "The End date cannot be empty.": "لا يمكن أن يكون تاريخ الانتهاء فارغاً.",
+    "The Start date cannot be empty.": "لا يمكن أن يكون تاريخ البدء فارغاً.",
+    "The date must be set.": "يجب تعيين التاريخ.",
+    "The time must be set.": "يجب تعيين الوقت.",
     "Selecting...": "جارٍ التحديد...",
     "Reset column settings": "إعادة تعيين إعدادات الأعمدة",
     "Filters": "التصفيات",
@@ -215,7 +215,7 @@
     "Open": "فتح",
     "Favorite": "المفضلة",
     "All Filters": "جميع التصفيات",
-    "Reset All": "إعادة تعيين الكل",
+    "Reset all": "إعادة تعيين الكل",
     "Loading": "جارٍ التحميل",
     "Select option": "اختيار خيار",
     "Value": "القيمة",

package/dist/utils/localization/translations/cs.json

@@ -176,13 +176,13 @@
     "ShortFriday": "Pá",
     "ShortSaturday": "So",
     "ShortSunday": "Ne",
-    "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.": "Při hledání konkrétní skupiny použijte více operátorů. Například při filtrování prostředků, které spadají do skupiny Traktory, skupina Toronto zobrazí seznam traktorů, které patří do pobočky v Torontu.",
+    "Use multiple Operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.": "Při hledání konkrétní skupiny použijte více operátorů. Například při filtrování prostředků, které spadají do skupiny Traktory, skupina Toronto zobrazí seznam traktorů, které patří do pobočky v Torontu.",
     "Select columns": "Vyberte sloupce",
     "Must be less than the max": "Musí být menší než max.",
     "Must be more than the min": "Musí být větší než min.",
     "Must be more than {value}": "Musí být větší než {value}",
     "Must be less than {value}": "Musí být menší než {value}",
-    "Must be in range {min} - {max}": "Musí být v rozsahu {min}–{max}",
+    "Must be in the {min} - {max} range": "Musí být v rozsahu {min}–{max}",
     "The min value must be set": "Musí být nastavena minimální hodnota",
     "The max value must be set": "Musí být nastavena maximální hodnota",
     "Range Filter popup": "Vyskakovací okno Filtr rozmezí",
@@ -190,16 +190,16 @@
     "Try adjusting your search or filter.": "Zkuste upravit své vyhledávání nebo filtr.",
     "Change date, {date}": "Změňte datum, {date}",
     "Date range": "Rozmezí dat",
-    "The end date cannot be empty.": "Datum konce nemůže být prázdné.",
-    "The start date cannot be empty.": "‌Datum začátku nemůže být prázdné.",
+    "The End date cannot be empty.": "Datum konce nemůže být prázdné.",
+    "The Start date cannot be empty.": "‌Datum začátku nemůže být prázdné.",
     "Pick a date": "Vyberte datum",
     "This year": "Tento rok",
     "Last year": "Minulý rok",
     "This quarter": "Toto čtvrtletí",
     "View all": "Zobrazit vše",
     "Expand": "Rozbalit",
-    "The date must be set": "Je třeba nastavit datum.",
-    "The time must be set": "Je třeba nastavit čas.",
+    "The date must be set.": "Je třeba nastavit datum.",
+    "The time must be set.": "Je třeba nastavit čas.",
     "Reset column settings": "Obnovit nastavení sloupce",
     "Filters": "Filtry",
     "Next": "Další",
@@ -223,7 +223,7 @@
     "Choose your date range": "Vyberte rozsah dat",
     "Some of the dates you selected aren't available. Please try a different range.": "Některá z vybraných dat nejsou k dispozici. Zkuste prosím jiný rozsah.",
     "Please select the dates you want to view.": "Vyberte prosím data, která chcete zobrazit.",
-    "Reset All": "Obnovit vše",
+    "Reset all": "Obnovit vše",
     "Favorite": "Oblíbené",
     "Summary color": "Barva souhrnu",
     "Chart data": "Data grafu",

package/dist/utils/localization/translations/da-DK.json

@@ -165,21 +165,21 @@
     "ShortSaturday": "L",
     "ShortSunday": "S",
     "Date range": "Datointerval",
-    "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.": "Brug flere operatorer, når du søger efter en bestemt gruppe. Hvis du f.eks. filtrerer efter aktiver, der tilhører gruppen Traktor og Toronto-gruppen, vises en liste over traktorer, der tilhører Toronto-grenen.",
+    "Use multiple Operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.": "Brug flere operatorer, når du søger efter en bestemt gruppe. Hvis du f.eks. filtrerer efter aktiver, der tilhører gruppen Traktor og Toronto-gruppen, vises en liste over traktorer, der tilhører Toronto-grenen.",
     "Select columns": "Vælg kolonner",
     "Must be less than the max": "Skal være mindre end maks.",
     "Must be more than the min": "Skal være mere end minimum.",
     "Must be more than {value}": "Skal være mere end {value}",
     "Must be less than {value}": "Skal være mindre end {value}",
-    "Must be in range {min} - {max}": "Skal være i området {min} - {max}",
+    "Must be in the {min} - {max} range": "Skal være i området {min} - {max}",
     "The min value must be set": "Den mindste værdi skal indstilles.",
     "The max value must be set": "Den maksimale værdi skal indstilles",
     "Range Filter popup": "Pop op-vindue med områdefilter",
     "{rangeName} values {values}": "{rangeName} værdier {values}",
-    "The end date cannot be empty.": "Slutdatoen kan ikke være tom.",
-    "The start date cannot be empty.": "Startdatoen må ikke være tom.",
-    "The date must be set": "Datoen skal indstilles.",
-    "The time must be set": "Tiden skal indstilles.",
+    "The End date cannot be empty.": "Slutdatoen kan ikke være tom.",
+    "The Start date cannot be empty.": "Startdatoen må ikke være tom.",
+    "The date must be set.": "Datoen skal indstilles.",
+    "The time must be set.": "Tiden skal indstilles.",
     "Selecting...": "Vælger...",
     "Reset column settings": "Nulstil kolonneindstillinger",
     "Filters": "Filtre",
@@ -213,7 +213,7 @@
     "Open": "Åbn",
     "Favorite": "Favorit",
     "All Filters": "Alle filtre",
-    "Reset All": "Nulstil alle",
+    "Reset all": "Nulstil alle",
     "Loading": "Indlæser",
     "Select option": "Vælg mulighed",
     "Previous step": "Forrige trin",