@geotab/zenith 3.15.0 → 3.16.0-beta.1

package/README.md

@@ -47,6 +47,27 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 3.16.0
+
+- Add `Tooltip.Inline` subcomponent for inline tooltip triggers
+- Add popup button variant for `Nav` items
+- Add integer-only mode prop to `Range` / `FilterBar.Range`
+- Add experimental feature-flag infrastructure (`ZenithExperimentalProvider`, `useExperimentalFeature`)
+- Export `getTrendIndicatorDirection` helper
+- Add support for six additional languages
+- Fix cross-page selection in selectable tables clearing when a row is unchecked after select-all
+- Fix multiline `Banner` header spacing when there is no close button
+- Fix scrolling in `Tabs` and `FiltersBar`
+- Fix `Tabs` fading and side panel slide direction in RTL layouts
+- Fix pills and chips scrolling the page to a blank area in RTL
+- Fix icons ignoring their component's colour
+- Fix mobile header overflow and `ReportsPopup` missing from the kebab menu in non-English languages
+- Move `Tabs` :focus-visible outline outside the tab to distinguish it from the active state
+- Fix `BetaPill` synthesising a Send feedback button when `feedbackAction` is undefined
+- Migrate component alignment defaults to logical direction values
+- Fix Storybook brand URL to resolve based on the environment
+- Resolve 20 npm audit vulnerabilities in Zenith dependencies
+
 ### 3.15.0
 
 - Add infinite scroll support for desktop `DataGrid`

package/dist/absolute/absolute.js

@@ -111,7 +111,7 @@ const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, trigger
             returnFocusToTrigger();
         }
     }, [isOpen, returnFocusToTrigger]);
-    const condition = (0, react_1.useCallback)(() => (useTrapFocusWithTrigger === "off" ? false : true), [useTrapFocusWithTrigger]);
+    const condition = (0, react_1.useCallback)((subscriptionTrigger) => useTrapFocusWithTrigger !== "off" && !!subscriptionTrigger, [useTrapFocusWithTrigger]);
     (0, useTrapFocus_1.useTrapFocus)(popupRef, useTrapFocusWithTrigger === "withTrigger" ? triggerRef : undefined, isOpen, condition);
     (0, useEscape_1.useEscape)(popupRef, handleEscape, isOpen);
     (0, useArrowKey_1.useArrowKey)(popupRef, handleEscape, isOpen);

package/dist/betaPill/betaPill.js

@@ -162,15 +162,15 @@ const BetaPill = props => {
   const isMobile = (0, useMobile_1.useMobile)();
   const pillClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-caption", "zen-beta-pill", isMobile ? "zen-beta-pill--mobile" : "", className !== null && className !== void 0 ? className : ""]), [isMobile, className]);
   const contextActions = (0, betaPillContext_1.useBetaPillActions)();
-  let resolvedMainAction = feedbackAction || (contextActions === null || contextActions === void 0 ? void 0 : contextActions.feedbackAction);
-  let resolvedSecondaryAction = betaOptionAction || (contextActions === null || contextActions === void 0 ? void 0 : contextActions.betaOptionAction);
-  if (resolvedMainAction || resolvedSecondaryAction) {
-    resolvedMainAction = Object.assign(Object.assign({}, resolvedMainAction), {
-      text: (resolvedMainAction === null || resolvedMainAction === void 0 ? void 0 : resolvedMainAction.text) || translate("Send feedback")
-    });
-    resolvedSecondaryAction = Object.assign(Object.assign({}, resolvedSecondaryAction), {
-      text: (resolvedSecondaryAction === null || resolvedSecondaryAction === void 0 ? void 0 : resolvedSecondaryAction.text) || translate("Manage beta option")
-    });
+  const rawMainAction = feedbackAction || (contextActions === null || contextActions === void 0 ? void 0 : contextActions.feedbackAction);
+  const rawSecondaryAction = betaOptionAction || (contextActions === null || contextActions === void 0 ? void 0 : contextActions.betaOptionAction);
+  if (rawMainAction || rawSecondaryAction) {
+    const resolvedMainAction = rawMainAction ? Object.assign(Object.assign({}, rawMainAction), {
+      text: rawMainAction.text || translate("Send feedback")
+    }) : undefined;
+    const resolvedSecondaryAction = rawSecondaryAction ? Object.assign(Object.assign({}, rawSecondaryAction), {
+      text: rawSecondaryAction.text || translate("Manage beta option")
+    }) : undefined;
     return (0, jsx_runtime_1.jsx)(pillExpandable_1.PillExpandable, {
       isBeta: true,
       icon: iconLab_1.IconLab,

package/dist/commonHelpers/arrowNavigation/arrowNavigationHelper.d.ts

@@ -5,6 +5,7 @@ interface IScrollOptions {
     top: number;
     left: number;
 }
+export declare const getDirectionalScrollDelta: (delta: number, isRTL: boolean) => number;
 export declare const getScrollOptions: (action: string, element: HTMLElement | null, isRTL?: boolean) => IScrollOptions;
 export declare const extractButtonAction: (event: React.MouseEvent<HTMLElement>) => TArrowsNavValue | null;
 export declare const scrollElement: (element: HTMLElement, options: IScrollOptions) => void;

package/dist/commonHelpers/arrowNavigation/arrowNavigationHelper.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.scrollElement = exports.extractButtonAction = exports.getScrollOptions = exports.clearTimerTimeout = exports.clearTimerInterval = void 0;
+exports.scrollElement = exports.extractButtonAction = exports.getScrollOptions = exports.getDirectionalScrollDelta = exports.clearTimerTimeout = exports.clearTimerInterval = void 0;
 const zen_1 = require("../../utils/zen");
 const clearTimerInterval = (timerId) => {
     var _a;
@@ -38,6 +38,10 @@ const getLTRScrollLeft = (action, scrollLeft, step, element) => {
     }
     return scrollLeft;
 };
+// In RTL the horizontal scroll axis is inverted: scrollLeft is 0 at the right edge and goes negative
+// toward the left edge, so a delta meant to move the viewport toward the arrow must flip sign.
+const getDirectionalScrollDelta = (delta, isRTL) => (isRTL ? -delta : delta);
+exports.getDirectionalScrollDelta = getDirectionalScrollDelta;
 const getScrollOptions = (action, element, isRTL = false) => {
     const step = (element === null || element === void 0 ? void 0 : element.offsetWidth) ? element.offsetWidth : 100;
     const scrollTop = (element === null || element === void 0 ? void 0 : element.scrollTop) || 0;

package/dist/commonHelpers/hooks/useTrapFocus.d.ts

@@ -1,4 +1,13 @@
 import { RefObject } from "react";
 type TElementToBool = (element: HTMLElement) => boolean;
+/**
+ * Traps keyboard (Tab) focus within `containerRef` (and optionally its `triggerRef`).
+ *
+ * Nested-popup contract: for correct nested-popup behaviour, a focused element that triggers an
+ * open child popup must expose a `data-popup-id` attribute whose value is the `id` of the child
+ * popup element rendered in the DOM. When present, focus is deferred to that child popup's trap.
+ * This contract is fulfilled automatically by `ControlledPopup`; callers using `useTrapFocus`
+ * directly must set `data-popup-id` themselves or nested popups will silently lose focus handling.
+ */
 export declare const useTrapFocus: (containerRef: RefObject<HTMLElement | null>, triggerRef: RefObject<HTMLElement | null> | undefined, subscriptionTrigger: unknown, condition?: (t: unknown) => boolean, isElementVisible?: TElementToBool) => void;
 export {};

package/dist/commonHelpers/hooks/useTrapFocus.js

@@ -9,18 +9,38 @@ const isChildOf_1 = require("../../utils/isChildOf");
 const isElementHidden_1 = require("../../utils/isElementHidden");
 const zen_1 = require("../../utils/zen");
 const findFirstVisible = (elems, isElementVisible) => elems.find(elem => isElementVisible(elem));
+/**
+ * Traps keyboard (Tab) focus within `containerRef` (and optionally its `triggerRef`).
+ *
+ * Nested-popup contract: for correct nested-popup behaviour, a focused element that triggers an
+ * open child popup must expose a `data-popup-id` attribute whose value is the `id` of the child
+ * popup element rendered in the DOM. When present, focus is deferred to that child popup's trap.
+ * This contract is fulfilled automatically by `ControlledPopup`; callers using `useTrapFocus`
+ * directly must set `data-popup-id` themselves or nested popups will silently lose focus handling.
+ */
 const useTrapFocus = (containerRef, triggerRef, subscriptionTrigger, condition, isElementVisible) => {
     /* eslint-disable complexity */
     const handleKeyDown = (0, react_1.useCallback)(e => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         /* eslint-enable complexity */
         const getChildCondition = () => {
-            var _a, _b;
+            var _a, _b, _c;
+            const targetEl = e.target;
+            // If the target is a trigger for an open child popup, defer to that popup's
+            // focus trap. Key on data-popup-id + DOM presence so this works even when
+            // preventAttributesAutoSet suppresses aria-expanded.
+            const dataPopupId = targetEl.getAttribute("data-popup-id");
+            if (dataPopupId &&
+                ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.getElementById(dataPopupId)) &&
+                (0, isChildOf_1.isChildOf)(targetEl, containerRef.current) &&
+                targetEl !== (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current)) {
+                return true;
+            }
             return triggerRef
-                ? !(0, isChildOf_1.isChildOf)(e.target, containerRef.current) &&
-                    e.target !== ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.body) &&
-                    !(0, isChildOf_1.isChildOf)(e.target, triggerRef.current)
-                : !(0, isChildOf_1.isChildOf)(e.target, containerRef.current) && e.target !== ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body);
+                ? !(0, isChildOf_1.isChildOf)(targetEl, containerRef.current) &&
+                    targetEl !== ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body) &&
+                    !(0, isChildOf_1.isChildOf)(targetEl, triggerRef.current)
+                : !(0, isChildOf_1.isChildOf)(targetEl, containerRef.current) && targetEl !== ((_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body);
         };
         if (!containerRef.current || getChildCondition()) {
             return;
@@ -30,9 +50,14 @@ const useTrapFocus = (containerRef, triggerRef, subscriptionTrigger, condition,
             : !(0, dialogHelpers_1.isElementInsideContainer)(target, containerEl.current) &&
                 !(0, dialogHelpers_1.isElementInsideContainer)(target, triggerEl.current);
         const isTargetOutside = e.target ? checkIsElementOutside(e.target, containerRef, triggerRef) : undefined;
-        const triggerSelectors = ((_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR)) || [];
+        const triggerElement = (_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) !== null && _a !== void 0 ? _a : null;
+        const triggerSelf = (triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.matches(focusableSelector_1.FOCUSABLE_SELECTOR)) ? [triggerElement] : [];
+        const triggerChildren = Array.from((_b = triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR)) !== null && _b !== void 0 ? _b : []);
+        // querySelectorAll only returns descendants (never the element itself), so triggerSelf
+        // and triggerChildren are disjoint by definition and need no deduplication.
+        const triggerSelectors = [...triggerSelf, ...triggerChildren];
         const containerSelectors = containerRef.current.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR);
-        const focusable = triggerRef ? [...Array.from(triggerSelectors), ...Array.from(containerSelectors)] : [...Array.from(containerSelectors)];
+        const focusable = triggerRef ? [...triggerSelectors, ...Array.from(containerSelectors)] : [...Array.from(containerSelectors)];
         if (!focusable.length) {
             return;
         }
@@ -49,32 +74,59 @@ const useTrapFocus = (containerRef, triggerRef, subscriptionTrigger, condition,
                 return;
             }
             if (e.shiftKey) {
-                if (((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.activeElement) === first) {
+                if (((_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.activeElement) === first) {
                     e.preventDefault();
                     last === null || last === void 0 ? void 0 : last.focus();
                     return;
                 }
-                if (firstContainerFocusable && ((_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.activeElement) === firstContainerFocusable) {
+                if (firstContainerFocusable && ((_d = zen_1.zen.document) === null || _d === void 0 ? void 0 : _d.activeElement) === firstContainerFocusable) {
                     e.preventDefault();
                     lastTriggerFocusable === null || lastTriggerFocusable === void 0 ? void 0 : lastTriggerFocusable.focus();
                 }
                 return;
             }
-            if (((_d = zen_1.zen.document) === null || _d === void 0 ? void 0 : _d.activeElement) === last) {
+            if (((_e = zen_1.zen.document) === null || _e === void 0 ? void 0 : _e.activeElement) === last) {
                 e.preventDefault();
                 first === null || first === void 0 ? void 0 : first.focus();
                 return;
             }
-            if (lastTriggerFocusable && ((_e = zen_1.zen.document) === null || _e === void 0 ? void 0 : _e.activeElement) === lastTriggerFocusable) {
+            if (lastTriggerFocusable && ((_f = zen_1.zen.document) === null || _f === void 0 ? void 0 : _f.activeElement) === lastTriggerFocusable) {
                 e.preventDefault();
                 firstContainerFocusable === null || firstContainerFocusable === void 0 ? void 0 : firstContainerFocusable.focus();
             }
-            else if (isLastChildOfFirst && first && (0, isChildOf_1.isChildOf)((_f = zen_1.zen.document) === null || _f === void 0 ? void 0 : _f.activeElement, first)) {
+            else if (isLastChildOfFirst && first && (0, isChildOf_1.isChildOf)((_g = zen_1.zen.document) === null || _g === void 0 ? void 0 : _g.activeElement, first)) {
                 e.preventDefault();
             }
             return;
         }
-    }, [containerRef, triggerRef, isElementVisible]);
+    }, 
+    // condition is consumed by useKeydown below, not read by handleKeyDown directly; its absence from deps is intentional.
+    [containerRef, triggerRef, isElementVisible]);
     (0, useKeydown_1.useKeydown)(handleKeyDown, subscriptionTrigger, condition);
+    // When withTrigger mode closes (condition goes false), restore focus to the trigger
+    // if focus landed on body (which happens when the popup's focused element is unmounted).
+    // This restoration is intentionally scoped to the "focused element unmounted → body" case;
+    // the general close case (e.g. click-outside, item selection) is handled separately by the
+    // returnFocusToTrigger effect in absolute.tsx. Both are idempotent, so overlap is harmless.
+    // Initialized to false because popups mount closed; the guard below reconciles the first
+    // active/inactive edge, so a popup that mounts already open still resolves correctly.
+    const isActiveRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        const isActive = condition ? condition(subscriptionTrigger) : !!subscriptionTrigger;
+        // Guard: short-circuit when the raw open/close state is unchanged to avoid spurious
+        // focus restoration if an unstable condition reference re-fires this effect.
+        if (!!subscriptionTrigger === isActiveRef.current) {
+            isActiveRef.current = isActive;
+            return;
+        }
+        if (!isActive && isActiveRef.current && (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current)) {
+            const active = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.activeElement;
+            if (!active || active === ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body)) {
+                triggerRef.current.focus();
+            }
+        }
+        isActiveRef.current = isActive;
+    }, [condition, subscriptionTrigger, triggerRef]);
 };
 exports.useTrapFocus = useTrapFocus;

package/dist/controlledPopup/controlledPopup.d.ts

@@ -10,7 +10,7 @@ import { IAlignment } from "../utils/positioningUtils/alignments";
 export type TAlignment = "top" | "top-left" | "top-right" | "left" | "left-top" | "left-bottom" | "right" | "right-top" | "right-bottom" | "bottom" | "bottom-left" | "bottom-right";
 export interface IControlledPopup extends IZenComponentProps {
     triggerRef: RefObject<HTMLElement | null>;
-    /** Alignment of the popup relative to its trigger. Defaults to `"bottom-left"` (flips to `"bottom-right"` in RTL). */
+    /** Alignment of the popup relative to its trigger. Defaults to `"bottom-start"`. */
     alignment?: TAlignmentAbsolute;
     id?: string;
     className?: string;

package/dist/controlledPopup/controlledPopup.js

@@ -11,7 +11,7 @@ const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className
     const autoId = (0, react_1.useId)();
     const popupId = id || autoId;
     const isClientReady = (0, useClientReady_1.useClientReady)();
-    const rtlAlignment = (0, useRTLAlignment_1.useRTLAlignment)(alignment !== null && alignment !== void 0 ? alignment : "bottom-left");
+    const rtlAlignment = (0, useRTLAlignment_1.useRTLAlignment)(alignment !== null && alignment !== void 0 ? alignment : "bottom-start");
     (0, react_1.useEffect)(() => {
         if (!triggerRef.current || !isClientReady) {
             return;

package/dist/dropdownRaw/dropdownSearchableTrigger.js

@@ -183,7 +183,7 @@ const DropdownSearchableTrigger = _a => {
     } = _a,
     otherProps = __rest(_a, ["value", "className", "onChange", "placeholder", "isOpenPopup", "inputRef", "handleClick", "width", "title", "id", "disabled", "count", "currentSelection", "isError", "fullWidth", "ref", "name", "onBlur", "popupId", "handleFocusOnPopup", "dataAnalyticsId"])
     // eslint-disable-next-line complexity
-  ;
+;
   const {
     isFormSection
   } = (0, react_1.useContext)(formSectionProvider_1.FormSectionContext);

package/dist/filtersBar/components/filtersBarRange/filtersBarRange.d.ts

@@ -3,7 +3,7 @@ import { IRange, IRangeValues } from "../../../range/range";
 export interface IFiltersBarRangeState {
     value: IRangeValues;
 }
-interface IFiltersBarRangeProps extends Pick<IRange, "id" | "defaultValue" | "unit" | "labelMin" | "labelMax" | "disabled" | "label" | "triggerAriaLabel" | "min" | "max" | "fullWidthTriggerButton" | "fullBounded" | "className" | "allowEqualMinMax"> {
+interface IFiltersBarRangeProps extends Pick<IRange, "id" | "defaultValue" | "unit" | "labelMin" | "labelMax" | "disabled" | "label" | "triggerAriaLabel" | "min" | "max" | "fullWidthTriggerButton" | "fullBounded" | "className" | "allowEqualMinMax" | "integer"> {
 }
 export interface IFiltersBarRange extends IFiltersBarItem<IFiltersBarRangeState, IFiltersBarRangeProps> {
     className?: string;

package/dist/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange.d.ts

@@ -2,4 +2,4 @@ import "./filtersBarSidePanelRange.less";
 import { IRange } from "../../../../range/range";
 export interface IFiltersBarSidePanelRange extends Omit<IRange, "label" | "fullWidthTriggerButton" | "defaultValue"> {
 }
-export declare const FiltersBarSidePanelRange: ({ className, id, onChange, value, unit, min, max, fullBounded, allowEqualMinMax, labelMin, labelMax, disabled }: IFiltersBarSidePanelRange) => import("react/jsx-runtime").JSX.Element;
+export declare const FiltersBarSidePanelRange: ({ className, id, onChange, value, unit, min, max, fullBounded, allowEqualMinMax, labelMin, labelMax, disabled, integer }: IFiltersBarSidePanelRange) => import("react/jsx-runtime").JSX.Element;

package/dist/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange.js

@@ -94,7 +94,8 @@ const FiltersBarSidePanelRange = ({
   allowEqualMinMax,
   labelMin,
   labelMax,
-  disabled
+  disabled,
+  integer
 }) => {
   const generatedId = (0, react_1.useId)();
   const intId = id || generatedId;
@@ -153,8 +154,9 @@ const FiltersBarSidePanelRange = ({
     min: min,
     isMinField: true,
     direction: directionState,
-    disabled: disabled
-  }), [rangeFieldClasses, labelMin, translate, unit, currentValue.min, errorType, min, max, handleChange, directionState, disabled]);
+    disabled: disabled,
+    integer: integer
+  }), [rangeFieldClasses, labelMin, translate, unit, currentValue.min, errorType, min, max, handleChange, directionState, disabled, integer]);
   const memoizedMaxRangeField = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(rangeField_1.RangeField, {
     className: (0, classNames_1.classNames)([rangeFieldClasses, "zen-filters-bar-side-panel-range__max-field"]),
     label: labelMax || translate("Max"),
@@ -168,8 +170,9 @@ const FiltersBarSidePanelRange = ({
     min: min,
     isMinField: false,
     direction: directionState,
-    disabled: disabled
-  }), [rangeFieldClasses, labelMax, translate, unit, currentValue.max, errorType, min, max, handleChange, directionState, disabled]);
+    disabled: disabled,
+    integer: integer
+  }), [rangeFieldClasses, labelMax, translate, unit, currentValue.max, errorType, min, max, handleChange, directionState, disabled, integer]);
   return (0, jsx_runtime_1.jsxs)("div", {
     ref: setFieldsContainerRef,
     id: intId,

package/dist/filtersBar/filtersContainer/filtersContainer.js

@@ -17,6 +17,7 @@ const useDirectionalIcon_1 = require("../../utils/localization/useDirectionalIco
 const useLanguage_1 = require("../../utils/localization/useLanguage");
 const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
 const useIsRTL_1 = require("../../utils/localization/useIsRTL");
+const arrowNavigationHelper_1 = require("../../commonHelpers/arrowNavigation/arrowNavigationHelper");
 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");
@@ -92,13 +93,15 @@ const getScrollButtonType = (element, isRTL) => {
     return "";
   }
   if (isRTL) {
+    // scrollLeft is 0 at the start (right edge) and negative toward the end (left edge),
+    // so the button to offer is the mirror of the LTR case below.
     if (scrollLeft < -1 && scrollLeft > clientWidth - scrollWidth + 1) {
       return "both";
     }
     if (scrollLeft >= -1) {
-      return "start";
+      return "end";
     }
-    return "end";
+    return "start";
   }
   if (scrollLeft > 0 && scrollWidth > clientWidth + scrollLeft + 1) {
     return "both";
@@ -234,7 +237,7 @@ const FiltersContainer = ({
       className: (0, classNames_1.classNames)(["zen-filters-toolbar__scroller", driveClassNameScroller || "", "zen-filters-toolbar__start", showLeft ? `${scrollerClass}--visible` : "", isHiddenDisplay.left ? `${scrollerClass}--hidden` : ""]),
       icon: ScrollStartIcon,
       iconPosition: textIconButton_1.ButtonIconPosition.Start,
-      onClick: handleScrollButtonClick(-scrollableStep)
+      onClick: handleScrollButtonClick((0, arrowNavigationHelper_1.getDirectionalScrollDelta)(-scrollableStep, isRTL))
     }), (0, jsx_runtime_1.jsx)("div", {
       ref: scrollableRef,
       className: (0, classNames_1.classNames)(["zen-filters-toolbar__scrollable", !isHiddenDisplay.left ? "has-left-scroller" : "", !isHiddenDisplay.right ? "has-right-scroller" : ""]),
@@ -248,7 +251,7 @@ const FiltersContainer = ({
       title: translate("Scroll to end"),
       className: (0, classNames_1.classNames)([scrollerClass, driveClassNameScroller || "", "zen-filters-toolbar__end", showRight ? `${scrollerClass}--visible` : "", isHiddenDisplay.right ? `${scrollerClass}--hidden` : ""]),
       icon: ScrollEndIcon,
-      onClick: handleScrollButtonClick(scrollableStep),
+      onClick: handleScrollButtonClick((0, arrowNavigationHelper_1.getDirectionalScrollDelta)(scrollableStep, isRTL)),
       iconPosition: textIconButton_1.ButtonIconPosition.End
     })]
   }) : null;

package/dist/header/header.js

@@ -187,11 +187,13 @@ const Header = ({ children, className, onFiltersBarOpen
         const headerRefWidth = ((_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
         const leftElementsRefWidth = ((_b = leftElementsRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width) || 0;
         const rightelementsRefWidth = ((_c = rightElementsRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width) || 0;
-        const paddings = 48;
+        // Mobile padding: 8px * 2 = 16px (zen-main-header--mobile .zen-main-header__section--padding)
+        // Desktop padding: 20px * 2 = 40px + 8px gaps between sections ≈ 48px
+        const paddings = isMobile ? 16 : 48;
         const gaps = 8 + (rightelementsRefWidth ? 8 : 0);
         const calculatedMiddleWidth = headerRefWidth - gaps - paddings - rightelementsRefWidth - leftElementsRefWidth;
         setMiddleWidth(calculatedMiddleWidth);
-    }, []);
+    }, [isMobile]);
     const resizeCallBack = (0, useThrottle_1.useThrottle)(() => {
         calculateMiddleWidth();
         if (!isMobile) {
@@ -248,6 +250,11 @@ const Header = ({ children, className, onFiltersBarOpen
         const prefixesForTitleSize = ["large", "medium", "small"];
         return prefixesForTitleSize[count - 1];
     }, [collapsedElements.length, mobileFilterCondition, mobileSearchCondition, rightElements.length, visibleElements.length]);
+    // On mobile, title shrink when items overflow is handled via CSS (flex-shrink: 1 and
+    // min-width: 0 are always set on .zen-header__section--left for mobile in header.less).
+    // Applying this via React state caused a measurement feedback loop: adding shrink-title
+    // increased middleWidth → items fit → condition became false → title expanded → items
+    // overflowed → condition became true again → oscillation.
     const titleShrinkCondition = (visibleElements.length === 0 && rightElements.length) || (mobileSearchCondition && mobileFilterCondition);
     const fullClassName = (0, classNames_1.classNames)([
         "zen-main-header zen-main-header--background-color",

package/dist/header/headerHelpers.js

@@ -87,11 +87,14 @@ const getItemsForRender = (items, isMobile) => {
 exports.getItemsForRender = getItemsForRender;
 const getItemsForMeasure = (items, isMobile) => (0, exports.getItemsForRender)(items, isMobile).map((el, ind) => {
     const elProps = el.props;
-    return (0, react_1.cloneElement)(el, {
-        key: `measure-key-${ind}-${items.length}`,
-        id: undefined,
-        "data-zen-measure-id": elProps.id
-    });
+    // Only HeaderCustomMenuWrapper components receive their original id in the
+    // measurement clone. These components use id purely as a registration key inside
+    // useCustomMenu and do NOT forward it to a DOM attribute, so no duplicate HTML
+    // element id is created in the hidden measurement container (MYG-141810).
+    // All other items (HeaderButton, HeaderMenu, …) keep id: undefined, preserving
+    // the MYG-133482 protection against duplicate DOM ids.
+    const isCustomMenuWrapper = el.type.displayName === exports.HeaderCustomMenuWrapper;
+    return (0, react_1.cloneElement)(el, Object.assign(Object.assign({ key: `measure-key-${ind}-${items.length}` }, (isCustomMenuWrapper ? {} : { id: undefined })), { "data-zen-measure-id": elProps.id }));
 });
 exports.getItemsForMeasure = getItemsForMeasure;
 const filterItems = (items, isMobile) => {