@geotab/zenith 3.13.1 → 3.14.0-beta.1

package/dist/filtersBar/filtersContainer/filtersContainer.js

@@ -16,6 +16,7 @@ const iconChevronLeft_1 = require("../../icons/iconChevronLeft");
 const useDirectionalIcon_1 = require("../../utils/localization/useDirectionalIcon");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
 const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
+const useIsRTL_1 = require("../../utils/localization/useIsRTL");
 const zen_1 = require("../../utils/zen");
 injectString("cs", "Scroll to start", "P\u0159ej\xEDt na za\u010D\xE1tek");
 injectString("da-DK", "Scroll to start", "Rul til start");
@@ -69,13 +70,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";
   }
@@ -95,6 +105,7 @@ const FiltersContainer = ({
   } = (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 gradientClass = "zen-filters-toolbar__gradient";
   const scrollerClass = "zen-filters-toolbar__scroller";
   const driveClassNameScroller = (0, useDriveClassName_1.useDriveClassName)(scrollerClass);
@@ -121,7 +132,7 @@ const FiltersContainer = ({
       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);
       }
     };
@@ -135,12 +146,12 @@ const FiltersContainer = ({
       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, children]);
+  }, [scrollableRef, children, isRTL]);
   (0, react_1.useEffect)(() => {
     var _a, _b, _c, _d;
     if (showLeft) {

package/dist/header/components/collapsedItemsControl/collapsedItemsControl.js

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

package/dist/header/header.js

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

package/dist/header/headerMenu.js

@@ -24,7 +24,7 @@ const useDrive_1 = require("../utils/theme/useDrive");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 exports.HeaderMenuDisplayName = "HeaderMenu";
 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 = (0, useMobile_1.useMobile)();
     const isDrive = (0, useDrive_1.useDrive)();
     const driveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-header-button-with-dropdown");