@geotab/zenith 3.15.0 → 3.16.0-beta.0

package/esm/modal/modal.d.ts

@@ -4,6 +4,11 @@ import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { IIcon } from "../icons/icon";
 import { TButtonIconPosition } from "../textIconButton/textIconButton";
 import { TSvgIconSize } from "../svgIcon/svgIconSize";
+/**
+ * The CSS class applied to `document.body` while a Modal is open to prevent page scrolling.
+ * Exported so consumers can reference it without coupling to internal implementation details.
+ */
+export declare const MODAL_SCROLL_LOCK_CLASS = "zen-modal-content--hidden-overflow";
 interface IButtonIconProps {
     icon?: React.FC<IIcon>;
     iconPosition?: TButtonIconPosition;
@@ -38,6 +43,49 @@ export interface IModal {
     className?: string;
     modalContainerClassName?: string;
     focus?: TFocusElement;
+    /**
+     * Called once the body scroll-lock has been synchronously released after the modal closes.
+     * Use this to safely sequence scroll operations that depend on the modal being fully closed.
+     *
+     * **Triggers:** the callback fires in two scenarios:
+     * - `isOpen` transitions from `true` to `false` (normal close)
+     * - The component unmounts while `isOpen` is still `true` (e.g. conditional rendering with
+     *   `{condition && <Modal isOpen={true} ... />}` where `condition` flips to `false`)
+     *
+     * It is **not** called when the modal mounts already closed, or when `isOpen` remains `false`
+     * across re-renders.
+     *
+     * **Layout-phase timing:** this callback fires inside a `useLayoutEffect` cleanup, which runs
+     * synchronously before the browser paints. This makes it safe for DOM reads and imperative
+     * scroll operations. However, calling `setState` inside this callback will trigger an
+     * additional synchronous re-render before the next paint — prefer keeping the callback
+     * side-effect-free or deferring state updates with `setTimeout`/`queueMicrotask` if needed.
+     *
+     * **React Strict Mode (development only):** React 18 Strict Mode intentionally
+     * double-invokes effects on mount (setup → cleanup → setup) to surface side-effect bugs.
+     * If `isOpen` is `true` on initial render, the cleanup from the first (discarded) mount
+     * fires with `wasOpen.current = true`, which triggers this callback once at mount even
+     * though the modal has not closed. This is a dev-mode artefact and does not occur in
+     * production builds.
+     *
+     * @example
+     * ```tsx
+     * // Safe: imperative scroll (no state update)
+     * <Modal
+     *   isOpen={isOpen}
+     *   onScrollLockReleased={() => window.scrollTo({ top: newSectionOffset, behavior: "smooth" })}
+     *   ...
+     * />
+     *
+     * // Use caution: setState inside the callback causes a synchronous re-render before paint
+     * <Modal
+     *   isOpen={isOpen}
+     *   onScrollLockReleased={() => setScrollTarget(newSectionOffset)}
+     *   ...
+     * />
+     * ```
+     */
+    onScrollLockReleased?: () => void;
 }
 export declare const Modal: FC<IModal> & {
     Content: FC<IDialogContent>;

package/esm/modal/modal.js

@@ -1,7 +1,7 @@
 import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/naming-convention */
-import React, { cloneElement, createElement, Fragment, isValidElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import React, { cloneElement, createElement, Fragment, isValidElement, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { Button } from "../button/button";
 import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
@@ -22,6 +22,10 @@ import { TextIconButton } from "../textIconButton/textIconButton";
 import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { zen } from "../utils/zen";
 import { createPortal } from "react-dom";
+/**
+ * The CSS class applied to `document.body` while a Modal is open to prevent page scrolling.
+ * Exported so consumers can reference it without coupling to internal implementation details.
+ */
 injectString("cs", "Close", "Zav\u0159\xEDt");
 injectString("da-DK", "Close", "Luk");
 injectString("de", "Close", "Schlie\xDFen");
@@ -55,6 +59,7 @@ injectString("ka-GE", "Close", "\u10D3\u10D0\u10EE\u10E3\u10E0\u10D5\u10D0");
 injectString("el-GR", "Close", "\u039A\u03BB\u03B5\u03AF\u03C3\u03B9\u03BC\u03BF");
 injectString("et-EE", "Close", "Sulge");
 injectString("bg-BG", "Close", "\u0417\u0430\u0442\u0432\u0430\u0440\u044F\u043D\u0435");
+export const MODAL_SCROLL_LOCK_CLASS = "zen-modal-content--hidden-overflow";
 export const Modal = ({
   isOpen,
   children,
@@ -65,7 +70,8 @@ export const Modal = ({
   type,
   className,
   focus,
-  modalContainerClassName
+  modalContainerClassName,
+  onScrollLockReleased
 }) => {
   var _a, _b, _c;
   const lastActiveOutsideElement = useRef((_a = zen.document) === null || _a === void 0 ? void 0 : _a.activeElement);
@@ -74,6 +80,14 @@ export const Modal = ({
     dark
   } = useContext(themeContext);
   const isClientReady = useClientReady();
+  // Tracks whether the modal was open on the previous render so we can detect open→closed transitions.
+  const wasOpen = useRef(false);
+  // Keep the latest callback in a ref so it never needs to enter the useLayoutEffect deps array.
+  // Assigning directly in the render body (rather than via a sync effect) guarantees the ref is
+  // always current before any effects or cleanups run in the same commit — eliminating the stale
+  // callback edge case that occurred when isOpen and onScrollLockReleased changed simultaneously.
+  const onScrollLockReleasedRef = useRef(onScrollLockReleased);
+  onScrollLockReleasedRef.current = onScrollLockReleased;
   const onOutSideClick = useCallback(() => {
     if (!isClientReady) {
       return;
@@ -92,19 +106,35 @@ export const Modal = ({
       isFocusable(copyActive) && copyActive.focus();
     };
   }, [isClientReady]);
-  useEffect(() => {
+  // useLayoutEffect runs synchronously after DOM mutations, before the browser paints.
+  // This guarantees the scroll-lock class is removed (and onScrollLockReleased fires)
+  // before the browser repaints — eliminating the timing gap that existed with useEffect.
+  // onScrollLockReleased is intentionally excluded from deps: it is read via ref so that
+  // inline arrow functions passed by consumers do not cause redundant DOM mutations on
+  // every parent re-render while the modal is open.
+  useLayoutEffect(() => {
     var _a, _b;
     if (!isClientReady) {
       return undefined;
     }
-    (_a = zen.document) === null || _a === void 0 ? void 0 : _a.body.classList.remove("zen-modal-content--hidden-overflow");
+    (_a = zen.document) === null || _a === void 0 ? void 0 : _a.body.classList.remove(MODAL_SCROLL_LOCK_CLASS);
     if (isOpen) {
-      (_b = zen.document) === null || _b === void 0 ? void 0 : _b.body.classList.add("zen-modal-content--hidden-overflow");
+      wasOpen.current = true;
+      (_b = zen.document) === null || _b === void 0 ? void 0 : _b.body.classList.add(MODAL_SCROLL_LOCK_CLASS);
     }
     return () => {
-      var _a;
-      (_a = zen.document) === null || _a === void 0 ? void 0 : _a.body.classList.remove("zen-modal-content--hidden-overflow");
+      var _a, _b;
+      (_a = zen.document) === null || _a === void 0 ? void 0 : _a.body.classList.remove(MODAL_SCROLL_LOCK_CLASS);
+      // Fire the callback in cleanup so it is triggered in both cases:
+      //   1. isOpen prop transitions true → false
+      //   2. component unmounts while isOpen is still true
+      // wasOpen guards against spurious calls (e.g. closing an already-closed modal).
+      if (wasOpen.current) {
+        wasOpen.current = false;
+        (_b = onScrollLockReleasedRef.current) === null || _b === void 0 ? void 0 : _b.call(onScrollLockReleasedRef);
+      }
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isClientReady, isOpen]);
   useEffect(() => {
     var _a, _b;

package/esm/nav/navHeader/navHeader.d.ts

@@ -28,7 +28,7 @@ export declare const NavHeader: FC<INavHeader> & {
      * @deprecated Use NavItem instead. Will be removed in future releases.
      */
     Action: {
-        (props: import("../navItem/navItem").ILinkNavItem | import("../navItem/navItem").IButtonNavItem): import("react/jsx-runtime").JSX.Element;
+        (props: import("../navItem/navItem").ILinkNavItem | import("../navItem/navItem").TButtonNavItem): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Search: {

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

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

package/esm/nav/navItem/navItem.d.ts

@@ -26,11 +26,24 @@ interface INavItemCommon extends IZenComponentProps {
 export interface ILinkNavItem extends INavItemCommon {
     link: string;
 }
-export interface IButtonNavItem extends INavItemCommon {
+interface IButtonNavItemBase extends INavItemCommon {
     onClick?: () => void;
     menuAlignment?: TAlignment;
     onDropdownStateChange?: (isOpen: boolean) => void;
 }
+export type TNavItemPopupType = "dialog" | "menu" | "listbox" | "tree" | "grid";
+export interface IPopupButtonNavItem extends IButtonNavItemBase {
+    popupId: string;
+    isPopupOpen: boolean;
+    popupType?: TNavItemPopupType;
+    children?: never;
+}
+interface IPlainButtonNavItem extends IButtonNavItemBase {
+    popupId?: never;
+    isPopupOpen?: never;
+    popupType?: never;
+}
+export type TButtonNavItem = IPlainButtonNavItem | IPopupButtonNavItem;
 interface INavItemContext {
     parentLevel?: number;
     closeParentMenu?: () => void;
@@ -40,7 +53,7 @@ export declare const NavItemContext: import("react").Context<INavItemContext>;
  * @beta This component is not fully ready yet and may change in future releases.
  */
 export declare const NavItem: {
-    (props: ILinkNavItem | IButtonNavItem): import("react/jsx-runtime").JSX.Element;
+    (props: ILinkNavItem | TButtonNavItem): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/esm/nav/navItem/navItem.js

@@ -22,6 +22,11 @@ import { NavItemType } from "./navItemType";
 export const NavItemContext = createContext({ parentLevel: 0 });
 const defaultTooltipAlignment = "end";
 const isLinkNavItem = (item) => !!item.link;
+// An empty popupId would render aria-controls="", i.e. a trigger that advertises a popup but names no
+// element. Nothing else catches that — TypeScript accepts "" as a string, and aria-controls is
+// allowEmpty for validators — so reject it here and fall back to the plain button variant rather than
+// emitting a relationship that resolves to nothing.
+const isPopupButtonNavItem = (item) => "popupId" in item && typeof item.popupId === "string" && item.popupId !== "";
 const isNavItemElement = (child) => isValidElement(child) && child.type.displayName === "NavItem";
 const getWrapperClassName = ({ className, collapsed, active, isMobile, hasNested, isNested, isLink, type }) => classNames([
     "zen-nav-item",
@@ -74,11 +79,19 @@ const LinkNavItem = (_a) => {
             onNavigate && onNavigate();
         }, className: "zen-link--light zen-nav-item__main", children: _jsx(NavItemContent, Object.assign({ title: title, collapsed: collapsed, level: currentLevel, isExternalLink: isExternalLink }, rest)) }));
     const item = collapsed ? (_jsx(Tooltip, { trigger: linkElement, alignment: tooltipAlignment, children: title })) : (linkElement);
-    return (_jsxs("div", { className: getWrapperClassName({ className, collapsed, active, isMobile, isLink: true, type }), children: [item, _jsx(NavItemAction, { actionIcon: actionIcon, actionIconTitle: actionIconTitle, onActionIconClick: onActionIconClick, collapsed: collapsed, level: currentLevel, isMenuItem: isMenuItem })] }));
+    return (_jsxs("div", { className: getWrapperClassName({
+            className,
+            collapsed,
+            active,
+            isMobile,
+            isLink: true,
+            type
+        }), children: [item, _jsx(NavItemAction, { actionIcon: actionIcon, actionIconTitle: actionIconTitle, onActionIconClick: onActionIconClick, collapsed: collapsed, level: currentLevel, isMenuItem: isMenuItem })] }));
 };
 LinkNavItem.displayName = "LinkNavItem";
-const ButtonNavItem = (_a) => {
-    var { className, title, onClick, collapsed, active, children, tabIndex, menuAlignment = "end-top", isMenuItem = true, tooltipAlignment = defaultTooltipAlignment, actionIcon, actionIconTitle, onActionIconClick, onDropdownStateChange, type } = _a, rest = __rest(_a, ["className", "title", "onClick", "collapsed", "active", "children", "tabIndex", "menuAlignment", "isMenuItem", "tooltipAlignment", "actionIcon", "actionIconTitle", "onActionIconClick", "onDropdownStateChange", "type"]);
+const ButtonNavItem = (props) => {
+    const isPopupTrigger = isPopupButtonNavItem(props);
+    const { className, title, onClick, collapsed, active, children, tabIndex, menuAlignment = "end-top", isMenuItem = true, tooltipAlignment = defaultTooltipAlignment, actionIcon, actionIconTitle, onActionIconClick, onDropdownStateChange, popupId, isPopupOpen, popupType, type } = props, rest = __rest(props, ["className", "title", "onClick", "collapsed", "active", "children", "tabIndex", "menuAlignment", "isMenuItem", "tooltipAlignment", "actionIcon", "actionIconTitle", "onActionIconClick", "onDropdownStateChange", "popupId", "isPopupOpen", "popupType", "type"]);
     const [menuOpen, setMenuOpen] = useState(false);
     const { parentLevel = 0, closeParentMenu } = useContext(NavItemContext);
     useEffect(() => {
@@ -113,7 +126,15 @@ const ButtonNavItem = (_a) => {
     const { onNavigate } = useNavContext();
     const isActive = active || (hasNestedItems && menuOpen);
     const triggerId = useId();
-    const buttonElement = (_jsx("button", { id: triggerId, ref: triggerRef, "aria-label": title, title: title, tabIndex: tabIndex, role: isMenuItem ? "menuitem" : undefined, "aria-haspopup": hasNestedItems ? "menu" : undefined, "aria-expanded": hasNestedItems ? menuOpen : undefined, className: "zen-nav-item__main", onClick: handleClick, onKeyDown: handleKeyPress, children: _jsx(NavItemContent, Object.assign({ title: title, collapsed: collapsed, hasSubmenu: hasNestedItems, level: currentLevel }, rest)) }));
+    // All three attributes branch on hasNestedItems first so they always describe the same popup. A
+    // nested submenu wins: one button cannot honestly advertise both a submenu and an external popup.
+    // TypeScript already forbids the combination (IPopupButtonNavItem declares children?: never); the
+    // guard here keeps the triple consistent when that is bypassed at runtime — JS consumers, spread
+    // props, or `as any`.
+    const ariaHasPopup = hasNestedItems ? "menu" : isPopupTrigger ? (popupType !== null && popupType !== void 0 ? popupType : "dialog") : undefined;
+    const ariaExpanded = hasNestedItems ? menuOpen : isPopupTrigger ? isPopupOpen : undefined;
+    const ariaControls = hasNestedItems || !isPopupTrigger ? undefined : popupId;
+    const buttonElement = (_jsx("button", { id: triggerId, ref: triggerRef, "aria-label": title, title: title, tabIndex: tabIndex, role: isMenuItem ? "menuitem" : undefined, "aria-haspopup": ariaHasPopup, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, className: "zen-nav-item__main", onClick: handleClick, onKeyDown: handleKeyPress, children: _jsx(NavItemContent, Object.assign({ title: title, collapsed: collapsed, hasSubmenu: hasNestedItems, level: currentLevel }, rest)) }));
     const trigger = collapsed ? (_jsx(Tooltip, { trigger: buttonElement, alignment: tooltipAlignment, children: title })) : (buttonElement);
     if (hasNestedItems) {
         const childLevel = currentLevel + 1;
@@ -127,7 +148,14 @@ const ButtonNavItem = (_a) => {
         };
         // For mobiles convert the entire subtree into a static NavMenuItem tree
         if (isMobile) {
-            return (_jsxs("div", { className: getWrapperClassName({ className, collapsed, active: isActive, isMobile, hasNested: hasNestedItems, type }), children: [trigger, _jsx(ControlledMenu, { triggerRef: triggerRef, isOpen: menuOpen, setIsOpen: setMenuOpen, title: title, alignment: menuAlignment, className: classNames([popupClass, popupClassMobile]), listClassName: classNames([popupListClass, popupListClassMobile]), ariaLabelledby: triggerId, children: buildMobileMenuItems(children, triggerId, onNavigate) })] }));
+            return (_jsxs("div", { className: getWrapperClassName({
+                    className,
+                    collapsed,
+                    active: isActive,
+                    isMobile,
+                    hasNested: hasNestedItems,
+                    type
+                }), children: [trigger, _jsx(ControlledMenu, { triggerRef: triggerRef, isOpen: menuOpen, setIsOpen: setMenuOpen, title: title, alignment: menuAlignment, className: classNames([popupClass, popupClassMobile]), listClassName: classNames([popupListClass, popupListClassMobile]), ariaLabelledby: triggerId, children: buildMobileMenuItems(children, triggerId, onNavigate) })] }));
         }
         // Desktop: clone children with level classes and render nested ControlledMenu popups per level.
         const processedChildren = validChildren.map(child => {
@@ -136,9 +164,23 @@ const ButtonNavItem = (_a) => {
             const nestedClass = childLevel > 1 ? "zen-nav-item--nested" : "";
             return cloneElement(childElement, Object.assign(Object.assign({}, childElement.props), { className: classNames([levelClass, nestedClass, childElement.props.className || ""]), collapsed: false }));
         });
-        return (_jsxs("div", { className: getWrapperClassName({ className, collapsed, active: isActive, isMobile, hasNested: hasNestedItems, type }), children: [trigger, _jsx(NavItemContext, { value: { parentLevel: currentLevel, closeParentMenu: closeLevelMenu }, children: _jsx(ControlledMenu, { triggerRef: triggerRef, isOpen: menuOpen, setIsOpen: setMenuOpen, title: title, alignment: menuAlignment, className: popupClass, listClassName: popupListClass, ariaLabelledby: triggerId, children: processedChildren }) })] }));
+        return (_jsxs("div", { className: getWrapperClassName({
+                className,
+                collapsed,
+                active: isActive,
+                isMobile,
+                hasNested: hasNestedItems,
+                type
+            }), children: [trigger, _jsx(NavItemContext, { value: { parentLevel: currentLevel, closeParentMenu: closeLevelMenu }, children: _jsx(ControlledMenu, { triggerRef: triggerRef, isOpen: menuOpen, setIsOpen: setMenuOpen, title: title, alignment: menuAlignment, className: popupClass, listClassName: popupListClass, ariaLabelledby: triggerId, children: processedChildren }) })] }));
     }
-    return (_jsxs("div", { className: getWrapperClassName({ className, collapsed, active: isActive, isMobile, hasNested: hasNestedItems, type }), children: [trigger, _jsx(NavItemAction, { actionIcon: actionIcon, actionIconTitle: actionIconTitle, onActionIconClick: onActionIconClick, collapsed: collapsed, level: currentLevel, isMenuItem: isMenuItem })] }));
+    return (_jsxs("div", { className: getWrapperClassName({
+            className,
+            collapsed,
+            active: isActive,
+            isMobile,
+            hasNested: hasNestedItems,
+            type
+        }), children: [trigger, _jsx(NavItemAction, { actionIcon: actionIcon, actionIconTitle: actionIconTitle, onActionIconClick: onActionIconClick, collapsed: collapsed, level: currentLevel, isMenuItem: isMenuItem })] }));
 };
 ButtonNavItem.displayName = "ButtonNavItem";
 /**

package/esm/nav/utils/navUtils.d.ts

@@ -1,8 +1,8 @@
 import { PropsWithChildren, ReactElement, ReactNode } from "react";
-import { IButtonNavItem, ILinkNavItem } from "../navItem/navItem";
+import { ILinkNavItem, TButtonNavItem } from "../navItem/navItem";
 export declare const navHeaderImage = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIzIiBoZWlnaHQ9IjE1IiB2aWV3Qm94PSIwIDAgMTIzIDE1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNDcuNDE3OCA1LjY2MDFIMzkuNTkxNVY2Ljc0NTI2SDQ1LjM1MjdDNDUuNDE5MiA3LjA2NjkzIDQ1LjQ1MjggNy4yNzc1IDQ1LjQ1MjggNy4zNzA5QzQ1LjQ1MjggOC41OTE3NyA0NS4xOTczIDkuMzU1MjUgNDQuNjk0IDkuNjM5OTdDNDQuMTg1NCA5LjkyODEzIDQyLjgyODkgMTAuMDczOSA0MC42NjIzIDEwLjA3MzlDMzcuODI1NyAxMC4wNzM5IDM2LjA1NzggOS45MTk3IDM1LjQwNzkgOS42MTUxNEMzNC43NjUzIDkuMzE0NDkgMzQuNDM5NyA4LjQ4ODM4IDM0LjQzOTcgNy4xNTkwM0wzNC40MjY2IDUuNjMwOThMMzQuNDUzIDQuMjExNTVDMzQuNDUzIDIuOTAyNCAzNC43NDYyIDIuMDc0MzkgMzUuMzI0MiAxLjc1MDMzQzM1LjkwNzcgMS40MjMxOSAzNy4zOTE1IDEuMjU3MzEgMzkuNzM0MiAxLjI1NzMxQzQyLjI3MjQgMS4yNTczMSA0My44NjMxIDEuMzYwOTMgNDQuNDYyIDEuNTY0ODRDNDUuMDQ5IDEuNzY1MTkgNDUuMzQ2NyAyLjI5OTU3IDQ1LjM0NjcgMy4xNTMwMVYzLjQ1MjQ2SDQ3LjQyMTlWMy4wMTE4NEM0Ny40MjE5IDEuODE2NCA0Ni45NjM3IDEuMDM0NjIgNDYuMDYwMyAwLjY4ODIyN0M0NS4xNjY1IDAuMzQ1NzU4IDQzLjE1ODUgMC4xNzIwMjggNDAuMDkyIDAuMTcyMDI4QzM3LjAzMjQgMC4xNzIwMjggMzQuOTY3NSAwLjQzNzI1NyAzMy45NTQxIDAuOTYwMjMxQzMyLjkzNDUgMS40ODcwMSAzMi40MTc2IDIuNTU5NTcgMzIuNDE3NiA0LjE0ODFMMzIuNDA0MyA1LjA5NzMyTDMyLjQxNzYgNi42NzMxM0MzMi40MTc2IDguNTYyODkgMzIuODgyNiA5Ljc5NzMgMzMuNzk5NyAxMC4zNDI0QzM0LjcxMjEgMTAuODg0MSAzNi43ODg3IDExLjE1OSAzOS45NzI3IDExLjE1OUM0My4zNDA5IDExLjE1OSA0NS40NTU0IDEwLjkyNjggNDYuMjU3NyAxMC40NjgyQzQ3LjA2NTMgMTAuMDA2NiA0Ny40NzQ4IDguNzkyODMgNDcuNDc0OCA2Ljg2MTM2QzQ3LjQ3NDggNi4zNjIzOSA0Ny40NTY5IDUuOTY4MTEgNDcuNDIxNCA1LjY4OTMzTDQ3LjQxNzggNS42NjAxWiIgZmlsbD0iIzI1NDc3QiIvPgo8cGF0aCBkPSJNNDkuNDEyMSAxMS4wNDk4SDYxLjExNDVWOS45NjQ2M0g1MS41MjcxVjYuMDMyMjlINjAuNzE2NlY0Ljk0NzI1SDUxLjUyNzFWMS4zNjc2SDYxLjExNDVWMC4yODI0NEg0OS40MTIxVjExLjA0OThaIiBmaWxsPSIjMjU0NzdCIi8+CjxwYXRoIGQ9Ik03Ni44NTk5IDEuMDY0OEM3NS45OTk4IDAuNDcyNTUgNzMuODMzIDAuMTcyMDI4IDcwLjQxOTcgMC4xNzIwMjhDNjcuNDY2NSAwLjE3MjAyOCA2NS40MTkyIDAuNDM1NzEzIDY0LjMzNjQgMC45NTU5NTNDNjMuMjQ1NSAxLjQ4IDYyLjY5MjUgMi40Njk3MyA2Mi42OTI1IDMuODk2ODlMNjIuNjY2IDQuOTA5MDlWNS42NjE2NEM2Mi42NjYgOC4xMjI2MiA2My4wOTIzIDkuNjcxOTQgNjMuOTMyNyAxMC4yNjYxQzY0Ljc3MTEgMTAuODU4NSA2Ni45NTM3IDExLjE1OSA3MC40MTk3IDExLjE1OUM3My45MDQgMTEuMTU5IDc2LjA4ODggMTAuODU2MSA3Ni45MTM5IDEwLjI1OEM3Ny43NDExIDkuNjU4NTEgNzguMTYwNiA4LjA2NDUyIDc4LjE2MDYgNS41MjA1OUM3OC4xNjA2IDMuMTU4NDggNzcuNzIzMSAxLjY1OTQzIDc2Ljg1OTkgMS4wNjQ4Wk02NS40MDQ1IDEuODEzNzlDNjUuODgxOCAxLjQ0NDU4IDY3LjU2NDUgMS4yNTcxOSA3MC40MDY3IDEuMjU3MTlDNzIuODgxNiAxLjI1NzE5IDc0LjQ3MzEgMS40MTY5IDc1LjEzNjkgMS43MzE4Qzc1Ljc5MzEgMi4wNDMxMyA3Ni4xMjUyIDIuNzkwMjIgNzYuMTI1MiAzLjk1Mjk4TDc2LjEzODYgNC45NjM4N1Y1LjY2MTc2Qzc2LjEzODYgNy44NTIyOCA3NS44OTc1IDkuMTQ5NTYgNzUuNDIyMSA5LjUxNzQ2Qzc0Ljk0NDggOS44ODY5IDczLjI1NzQgMTAuMDczOSA3MC40MDY3IDEwLjA3MzlDNjcuNTY0NSAxMC4wNzM5IDY1Ljg4MTYgOS44ODcwMiA2NS40MDQ1IDkuNTE3NDZDNjQuOTI5MiA5LjE0OTQ0IDY0LjY4ODEgNy44NTIxNiA2NC42ODgxIDUuNjYxNzZDNjQuNjg4MSAzLjQ3NjM1IDY0LjkyOTIgMi4xODE2OSA2NS40MDQ1IDEuODEzNzlaIiBmaWxsPSIjMjU0NzdCIi8+CjxwYXRoIGQ9Ik05Mi44NDYzIDAuMjgyNDRINzguOTgyNFYxLjQ2OTQ0SDg0Ljg4MzVWMTEuMDQ5OEg4Ni45OTg2VjEuNDY5NDRIOTIuODQ2M1YwLjI4MjQ0WiIgZmlsbD0iIzI1NDc3QiIvPgo8cGF0aCBkPSJNMTAwLjMxOCAwLjI4MjQ0SDk3LjQxMTVMOTAuNzQwMiAxMS4wNDk4SDkyLjk4NTRMOTQuMzc3NCA4Ljc4NDE3SDEwMy40OThMMTA0LjkwMyAxMS4wNDk4SDEwNy4xMjJMMTAwLjMyOSAwLjI5OTA3NkwxMDAuMzE4IDAuMjgyNDRaTTEwMi44NjEgNy44MDg4MUg5NS4wMDFMOTguOTA0OCAxLjM3MTE3TDEwMi44NjEgNy44MDg4MVoiIGZpbGw9IiMyNTQ3N0IiLz4KPHBhdGggZD0iTTEyMC4yMDcgNS40MDM2OEMxMjEuNjkxIDUuMDczOTMgMTIyLjQ0MiA0LjMxNDYgMTIyLjQ0MiAzLjE0NTU0QzEyMi40NDIgMS45NzI5MiAxMjIuMDkxIDEuMTkyOTIgMTIxLjM5NyAwLjgyNzc1NEMxMjAuNzA5IDAuNDY1Nzk2IDExOS4yMzcgMC4yODI0NCAxMTcuMDIyIDAuMjgyNDRIMTA4Ljk3N1YxMS4wNDk4SDExNy44ODRDMTE5Ljc1NyAxMS4wNDk4IDEyMS4wOTEgMTAuODE1OCAxMjEuODUgMTAuMzU0MkMxMjIuNjEzIDkuODkwMDEgMTIzIDkuMDc2MzggMTIzIDcuOTM1ODRDMTIzIDYuNTQ2MzYgMTIyLjA2IDUuNjk0ODIgMTIwLjIwNyA1LjQwMzY4Wk0xMTkuNzA0IDQuNjI5NUMxMTkuMjIgNC44NjYzMyAxMTguMTE4IDQuOTg2MjMgMTE2LjQyNiA0Ljk4NjIzSDExMS4wOTJWMS4zNjc0OEgxMTYuOTgzQzExOC40MjggMS4zNjc0OCAxMTkuMzc1IDEuNDczIDExOS43OTYgMS42ODA5NkMxMjAuMjExIDEuODg1NTggMTIwLjQyIDIuMzQ2NTMgMTIwLjQyIDMuMDUxNTVDMTIwLjQyIDMuODY1NjYgMTIwLjE4IDQuMzk2NTkgMTE5LjcwNCA0LjYyOTVaTTExMS4wOTIgNi4wNzEyN0gxMTYuMzJDMTE4LjQ2MSA2LjA3MTI3IDExOS43ODkgNi4xNzk3NiAxMjAuMjY5IDYuMzkzM0MxMjAuNzM5IDYuNjAzMzkgMTIwLjk3OCA3LjE4NTU1IDEyMC45NzggOC4xMjM3MUMxMjAuOTc4IDguODc1NDMgMTIwLjc0MSA5LjM3MzgxIDEyMC4yNzQgOS42MDM5OUMxMTkuOCA5LjgzODIgMTE4Ljc3NyA5Ljk1NzAzIDExNy4yMzUgOS45NTcwM0wxMTUuMzkxIDkuOTY0NTJIMTExLjA5MlY2LjA3MTI3WiIgZmlsbD0iIzI1NDc3QiIvPgo8cGF0aCBkPSJNMCAwLjI3NzM1MUgyLjk4NzI1VjEuNTE1OEMzLjQ5ODA3IDEuMDA3MjEgNC4wNjYzOCAwLjYyNzU0NCA0LjY4OTk1IDAuMzc2NDU1QzUuMzE0NyAwLjEyNTYwNCA1Ljk5NDg0IDAgNi43MzI3MiAwQzcuNDc2OTEgMCA4LjE0ODc4IDAuMTY1MjkzIDguNzQ3MTQgMC40OTUyODZDOS4zNDYxNyAwLjgyNTUxNiA5LjgyNzg2IDEuMzA3ODUgMTAuMTkzMyAxLjk0MTgxQzEwLjY2NzcgMS4zMDc4NSAxMS4yNDk2IDAuODI1NTE2IDExLjkzOTggMC40OTUyODZDMTIuNjMgMC4xNjUyOTMgMTMuMzgzNSAwIDE0LjIwMTQgMEMxNS4wNDc1IDAgMTUuNzkyNiAwLjE3ODI0NiAxNi40MzQ2IDAuNTM0OTc1QzE3LjA3NzYgMC44OTE3MDQgMTcuNTM5IDEuMzU3MjggMTcuODIwNyAxLjkzMjA3QzE4LjEwMTggMi41MDY2MSAxOC4yNDIgMy40NDEyMSAxOC4yNDIgNC43MzU3NVYxMS4wNTY1SDE1LjIzMjZWNS41ODc4OUMxNS4yMzI2IDQuMzY1OTUgMTUuMDY0OSAzLjUzODU0IDE0LjcyOTIgMy4xMDYxMUMxNC4zOTM4IDIuNjczMzMgMTMuODkwMyAyLjQ1NzE4IDEzLjIxOTEgMi40NTcxOEMxMi43MDg1IDIuNDU3MTggMTIuMjUwOSAyLjU4OTIgMTEuODQ1NyAyLjg1MzI0QzExLjQ0MSAzLjExNzUyIDExLjE0IDMuNDgyMzMgMTAuOTQzIDMuOTQ4MDNDMTAuNzQ2MSA0LjQxMzcyIDEwLjY0NzYgNS4xNjE2NCAxMC42NDc2IDYuMTkxOVYxMS4wNTY0SDcuNjM4MjJWNS44MzU1M0M3LjYzODIyIDQuODcxMjIgNy41NTk5OSA0LjE3MjczIDcuNDAyMSAzLjc0MDE5QzcuMjQ1MTIgMy4zMDc0MSA3LjAwOSAyLjk4NTUgNi42OTUzMiAyLjc3NDFDNi4zODA3MSAyLjU2MjU4IDYuMDAwNzQgMi40NTcxOCA1LjU1NDM2IDIuNDU3MThDNS4wNTY2NiAyLjQ1NzE4IDQuNjA1MDMgMi41OTA4NiA0LjE5OTQ3IDIuODU4MzVDMy43OTMzOCAzLjEyNTk2IDMuNDg5OTMgMy41MDA1MSAzLjI4OTI1IDMuOTgyODRDMy4wODc2NSA0LjQ2NDk0IDIuOTg3MjUgNS4yMjQ1IDIuOTg3MjUgNi4yNjE2NlYxMS4wNTY1SDBWMC4yNzczNTFaIiBmaWxsPSIjMDA3OEQzIi8+CjxwYXRoIGQ9Ik0xOC44MTg0IDAuMjc3MzY3SDIxLjg3MTJMMjQuOTYzOSA3LjA0MDg1TDI4LjM3NjkgMC4yNzczNjdIMzEuNDM4M0wyMy45ODE2IDE1SDIwLjg5NjZMMjMuMzQ0IDEwLjI1MjdMMTguODE4NCAwLjI3NzM2N1oiIGZpbGw9IiMwMDc4RDMiLz4KPC9zdmc+Cg==";
 export declare const navHeaderImageCollapsed = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOCIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDM4IDEzIiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTE1LjE5OTcgMC4yMjU0NTdIMTcuNjAyOEwyMC4wMzczIDYuMDk0TDIyLjcyNCAwLjIyNTQ1N0gyNS4xMzM5TDE5LjI2NDEgMTNIMTYuODM1NkwxOC43NjIyIDguODgwODhMMTUuMTk5NyAwLjIyNTQ1N1oiIGZpbGw9IiMwMDc4RDMiLz4KPHBhdGggZD0iTTAuMzg2NzE5IDAuMjQwNjUySDIuNzM4MjVWMS4zMTUyM0MzLjE0MDM2IDAuODczOTM1IDMuNTg3NzMgMC41NDQ1MDggNC4wNzg2IDAuMzI2NjQzQzQuNTcwMzkgMC4xMDg5ODQgNS4xMDU3OSAwIDUuNjg2NjUgMEM2LjI3MjQ2IDAgNi44MDEzNSAwLjE0MzQyMiA3LjI3MjM4IDAuNDI5NzVDNy43NDM5MiAwLjcxNjI4NCA4LjEyMzEgMS4xMzQ4IDguNDEwNzQgMS42ODQ4N0M4Ljc4NDI0IDEuMTM0OCA5LjI0MjI1IDAuNzE2Mjg0IDkuNzg1NiAwLjQyOTc1QzEwLjMyODkgMC4xNDM0MjIgMTAuOTIyMSAwIDExLjU2NTkgMEMxMi4yMzIgMCAxMi44MTg1IDAuMTU0NjYgMTMuMzIzOCAwLjQ2NDE4OEMxMy44MyAwLjc3MzcxNSAxNC4xOTMzIDEuMTc3NjkgMTQuNDE1IDEuNjc2NDJDMTQuNjM2MyAyLjE3NDk0IDE0Ljc0NjYgMi45ODU4NyAxNC43NDY2IDQuMTA5MTJWOS41OTM0OEgxMi4zNzc3VjQuODQ4NUMxMi4zNzc3IDMuNzg4MjUgMTIuMjQ1NiAzLjA3MDMyIDExLjk4MTQgMi42OTUxMUMxMS43MTczIDIuMzE5NiAxMS4zMjEgMi4xMzIwNSAxMC43OTI2IDIuMTMyMDVDMTAuMzkwNyAyLjEzMjA1IDEwLjAzMDUgMi4yNDY2IDkuNzExNTIgMi40NzU3QzkuMzkyOTkgMi43MDUwMSA5LjE1NTk4IDMuMDIxNTUgOS4wMDA4OSAzLjQyNTYzQzguODQ1OTIgMy44Mjk3IDguNzY4NDMgNC40Nzg2NiA4Ljc2ODQzIDUuMzcyNTlWOS41OTMzOEg2LjM5OTQ0VjUuMDYzMzhDNi4zOTk0NCA0LjIyNjY2IDYuMzM3ODYgMy42MjA2IDYuMjEzNTcgMy4yNDUyOUM2LjA5IDIuODY5NzggNS45MDQxMyAyLjU5MDQ2IDUuNjU3MiAyLjQwNzAzQzUuNDA5NTQgMi4yMjM1IDUuMTEwNDQgMi4xMzIwNSA0Ljc1OTA1IDIuMTMyMDVDNC4zNjcyNyAyLjEzMjA1IDQuMDExNzUgMi4yNDgwNCAzLjY5MjUgMi40ODAxNEMzLjM3MjgzIDIuNzEyMzMgMy4xMzM5NiAzLjAzNzMzIDIuOTc1OTggMy40NTU4NEMyLjgxNzI5IDMuODc0MTQgMi43MzgyNSA0LjUzMzIgMi43MzgyNSA1LjQzMzEyVjkuNTkzNDhIMC4zODY3MTlWMC4yNDA2NTJaIiBmaWxsPSIjMDA3OEQzIi8+CjxwYXRoIGQ9Ik0zNy41Njg1IDQuODc0NjhIMzEuNDA3N1Y1LjgxNjI2SDM1Ljk0MjlDMzUuOTk1MiA2LjA5NTM3IDM2LjAyMTYgNi4yNzgwNyAzNi4wMjE2IDYuMzU5MTJDMzYuMDIxNiA3LjQxODQ0IDM1LjgyMDYgOC4wODA5IDM1LjQyNDMgOC4zMjc5NEMzNS4wMjQgOC41Nzc5OCAzMy45NTYyIDguNzA0NDkgMzIuMjUwNiA4LjcwNDQ5QzMwLjAxNzcgOC43MDQ0OSAyOC42MjYgOC41NzA2NiAyOC4xMTQ0IDguMzA2MzlDMjcuNjA4NiA4LjA0NTUzIDI3LjM1MjMgNy4zMjg3MyAyNy4zNTIzIDYuMTc1MjhMMjcuMzQxOSA0Ljg0OTQyTDI3LjM2MjcgMy42MTc4MUMyNy4zNjI3IDIuNDgxODggMjcuNTkzNSAxLjc2MzQzIDI4LjA0ODUgMS40ODIyNkMyOC41MDc5IDEuMTk4NDEgMjkuNjc1OSAxLjA1NDQ3IDMxLjUyIDEuMDU0NDdDMzMuNTE4MSAxLjA1NDQ3IDM0Ljc3MDIgMS4xNDQzOCAzNS4yNDE3IDEuMzIxMzFDMzUuNzAzOCAxLjQ5NTE1IDM1LjkzODEgMS45NTg4MiAzNS45MzgxIDIuNjk5MzNWMi45NTkxNkgzNy41NzE3VjIuNTc2ODRDMzcuNTcxNyAxLjUzOTU5IDM3LjIxMSAwLjg2MTI0NiAzNi40OTk5IDAuNTYwNjlDMzUuNzk2MyAwLjI2MzUzNSAzNC4yMTU2IDAuMTEyNzkzIDMxLjgwMTcgMC4xMTI3OTNDMjkuMzkzMiAwLjExMjc5MyAyNy43Njc3IDAuMzQyOTI4IDI2Ljk3IDAuNzk2NzAxQzI2LjE2NzQgMS4yNTM3NyAyNS43NjA0IDIuMTg0NDIgMjUuNzYwNCAzLjU2Mjc1TDI1Ljc1IDQuMzg2MzdMMjUuNzYwNCA1Ljc1MzY3QzI1Ljc2MDQgNy4zOTMzOCAyNi4xMjY1IDguNDY0NDYgMjYuODQ4NSA4LjkzNzQxQzI3LjU2NjYgOS40MDc0NyAyOS4yMDE0IDkuNjQ1OTYgMzEuNzA3OCA5LjY0NTk2QzM0LjM1OTIgOS42NDU5NiAzNi4wMjM3IDkuNDQ0NDkgMzYuNjU1MyA5LjA0NjZDMzcuMjkxIDguNjQ2MDMgMzcuNjEzMyA3LjU5Mjg5IDM3LjYxMzMgNS45MTY5OUMzNy42MTMzIDUuNDg0MDUgMzcuNTk5MyA1LjE0MTk0IDM3LjU3MTMgNC45MDAwNUwzNy41Njg1IDQuODc0NjhaIiBmaWxsPSIjMjU0NzdCIi8+Cjwvc3ZnPg==";
 export declare const detectOverlayScrollbar: () => boolean;
 export declare function isImageUrl(str?: string | ReactNode): boolean;
 export declare const filterPrimaryNavItems: <T extends PropsWithChildren>(element: ReactElement<T>, isNegative: boolean) => ReactElement<T> | null;
-export declare const collectNavItems: (element: ReactElement) => (ReactElement<ILinkNavItem> | ReactElement<IButtonNavItem>)[];
+export declare const collectNavItems: (element: ReactElement) => (ReactElement<ILinkNavItem> | ReactElement<TButtonNavItem>)[];

package/esm/pillExpandable/pillExpandable.js

@@ -168,7 +168,8 @@ const PillExpandableChild = ({
   type,
   errorHandler,
   content,
-  autoExpandChildren
+  autoExpandChildren,
+  dataAnalyticsId
 }) => {
   const pillId = useId();
   const descriptionId = useId();
@@ -226,7 +227,8 @@ const PillExpandableChild = ({
       onExpand: handleChildToggle,
       type: type,
       errorHandler: errorHandler,
-      descriptionId: descriptionId
+      descriptionId: descriptionId,
+      dataAnalyticsId: dataAnalyticsId
     }), _jsx(PillContent, {
       onActionClick: handleChildToggle,
       descriptionText: content.description,
@@ -547,7 +549,8 @@ const PillExpandableBase = ({
       type: type,
       errorHandler: errorHandler,
       content: content,
-      autoExpandChildren: autoExpandChildren
+      autoExpandChildren: autoExpandChildren,
+      dataAnalyticsId: dataAnalyticsId
     });
   }
   return _jsx(PillContext.Provider, {

package/esm/rangeRaw/components/rangeField.d.ts

@@ -16,5 +16,6 @@ export interface IRangeField {
     errorString?: string;
     direction?: TDirection;
     isMinField: boolean;
+    integer?: boolean;
 }
-export declare const RangeField: ({ value, onChange, onBlur, id, label, unit, disabled, min, max, inputRef, errorString, className, direction, isMinField }: IRangeField) => import("react/jsx-runtime").JSX.Element;
+export declare const RangeField: ({ value, onChange, onBlur, id, label, unit, disabled, min, max, inputRef, errorString, className, direction, isMinField, integer }: IRangeField) => import("react/jsx-runtime").JSX.Element;

package/esm/rangeRaw/components/rangeField.js

@@ -4,7 +4,7 @@ import { TextInput } from "../../textInput/textInput";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { IconException } from "../../icons/iconException";
 import { useMobileClassName } from "../../utils/theme/useMobileClassName";
-export const RangeField = ({ value, onChange, onBlur, id, label, unit, disabled, min, max, inputRef, errorString, className, direction, isMinField }) => {
+export const RangeField = ({ value, onChange, onBlur, id, label, unit, disabled, min, max, inputRef, errorString, className, direction, isMinField, integer }) => {
     const inputId = useId();
     const labelId = useId();
     const unitId = useId();
@@ -12,7 +12,8 @@ export const RangeField = ({ value, onChange, onBlur, id, label, unit, disabled,
     const mobileSenseClass = useMobileClassName("zen-range-field__sense");
     const mobileInputClass = useMobileClassName("zen-range-field__input");
     const handleChange = e => {
-        const newValue = e.target.value ? Number(e.target.value) : null;
+        const rawValue = e.target.value ? Number(e.target.value) : null;
+        const newValue = integer && rawValue !== null ? Math.trunc(rawValue) : rawValue;
         onChange(id, newValue);
     };
     return (_jsxs("div", { className: classNames([
@@ -20,5 +21,5 @@ export const RangeField = ({ value, onChange, onBlur, id, label, unit, disabled,
             direction === "row" ? "zen-range-field--row" : "zen-range-field--column",
             isMinField ? "zen-range-field--min" : "zen-range-field--max",
             className || ""
-        ]), children: [_jsxs("div", { className: "zen-range-field__content", children: [_jsx("label", { className: classNames(["zen-range-field__label", "zen-ellipsis", mobileLabelClass || ""]), id: labelId, htmlFor: inputId, children: label }), _jsx("div", { className: "zen-range-field__input-container", children: _jsx(TextInput, { inputClassName: classNames(["zen-range-field__input", mobileInputClass || "", errorString ? "zen-text-input--error" : ""]), value: value !== null ? value.toString() : "", placeholder: "", onChange: handleChange, onBlur: onBlur, disabled: disabled, type: "number", ref: inputRef, id: inputId, error: "", ariaLabelledby: `${labelId} ${unit ? unitId : ""}`, min: min, max: max }) }), unit ? (_jsx("div", { id: unitId, className: classNames(["zen-range-field__sense", "zen-ellipsis", mobileSenseClass || ""]), children: _jsx("div", { className: "zen-range-field__sense-text zen-ellipsis", children: unit }) })) : null] }), errorString && direction !== "row" ? (_jsxs("div", { className: "zen-range-field__error", children: [_jsx(IconException, { className: "zen-range-field__error-icon", size: "bigger" }), _jsx("div", { className: "zen-range-field__error-text", children: errorString })] })) : null] }));
+        ]), children: [_jsxs("div", { className: "zen-range-field__content", children: [_jsx("label", { className: classNames(["zen-range-field__label", "zen-ellipsis", mobileLabelClass || ""]), id: labelId, htmlFor: inputId, children: label }), _jsx("div", { className: "zen-range-field__input-container", children: _jsx(TextInput, { inputClassName: classNames(["zen-range-field__input", mobileInputClass || "", errorString ? "zen-text-input--error" : ""]), value: value !== null ? value.toString() : "", placeholder: "", onChange: handleChange, onBlur: onBlur, disabled: disabled, type: "number", ref: inputRef, id: inputId, error: "", ariaLabelledby: `${labelId} ${unit ? unitId : ""}`, min: min, max: max, step: integer ? 1 : undefined }) }), unit ? (_jsx("div", { id: unitId, className: classNames(["zen-range-field__sense", "zen-ellipsis", mobileSenseClass || ""]), children: _jsx("div", { className: "zen-range-field__sense-text zen-ellipsis", children: unit }) })) : null] }), errorString && direction !== "row" ? (_jsxs("div", { className: "zen-range-field__error", children: [_jsx(IconException, { className: "zen-range-field__error-icon", size: "bigger" }), _jsx("div", { className: "zen-range-field__error-text", children: errorString })] })) : null] }));
 };

package/esm/rangeRaw/rangeRaw.js

@@ -273,7 +273,8 @@ export const RangeRaw = props => {
     chip,
     chipIcon,
     chipId,
-    chipName
+    chipName,
+    integer
   } = props;
   const labelLocal = label && !title ? label : title;
   const accessibilityProps = getAriaAttributes(props);
@@ -424,8 +425,9 @@ export const RangeRaw = props => {
     max: max,
     min: min,
     isMinField: true,
-    direction: directionState
-  }), [labelMin, translate, unit, currentValue.min, errorType, min, max, handleChange, handleBlur, directionState]);
+    direction: directionState,
+    integer: integer
+  }), [labelMin, translate, unit, currentValue.min, errorType, min, max, handleChange, handleBlur, directionState, integer]);
   const memoizedMaxRangeField = useMemo(() => _jsx(RangeField, {
     className: "zen-range__max-field",
     label: labelMax || translate("Max"),
@@ -439,8 +441,9 @@ export const RangeRaw = props => {
     max: max,
     min: min,
     isMinField: false,
-    direction: directionState
-  }), [max, min, labelMax, handleChange, handleBlur, currentValue.max, translate, unit, errorType, directionState]);
+    direction: directionState,
+    integer: integer
+  }), [max, min, labelMax, handleChange, handleBlur, currentValue.max, translate, unit, errorType, directionState, integer]);
   const selection = useMemo(() => getSelection(), [getSelection]);
   const memoizedContent = useMemo(() => _jsxs("div", {
     className: "zen-range__fields-wrapper",

package/esm/rangeRaw/types.d.ts

@@ -20,6 +20,7 @@ export interface IRangeRawBase extends IZenComponentProps, IChipsParent {
     allowEqualMinMax?: boolean;
     error?: string;
     triggerAriaLabel?: string;
+    integer?: boolean;
 }
 export interface IRangeRawDefault extends IRangeRawBase {
     onChange: (values: IRangeValuesRaw) => void;

package/esm/sidePanel/sidePanel.js

@@ -15,12 +15,13 @@ import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { isAlertTarget } from "../alert/utils/isAlertTarget";
 import { isToastTarget } from "../toast/utils/isToastTarget";
 import { isModalTarget } from "../modal/utils/isModalTarget";
-import { isBannerTarget } from "../banner/utils/isBannerTarget";
 import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { zen } from "../utils/zen";
 import { usePortal } from "../commonHelpers/hooks/usePortal";
 /* eslint-enable @typescript-eslint/naming-convention */
-const OVERLAY_TARGET_CHECKS = [isAlertTarget, isToastTarget, isModalTarget, isBannerTarget];
+// Banner is an inline/static element, not a floating overlay — clicks on it should close the panel.
+// Only Modal, Toast and Alert are floating overlays that should suppress click-outside close.
+const OVERLAY_TARGET_CHECKS = [isAlertTarget, isToastTarget, isModalTarget];
 export const isChildPopup = (target, stopElement) => {
     var _a;
     const parentPopup = getParentByClass(target, "zen-absolute");

package/esm/table/selectable/interfaces.d.ts

@@ -5,6 +5,19 @@ export declare enum SelectionState {
     None = "none"
 }
 export interface ISelectionValue {
+    /**
+     * Whether every selectable row across every page is selected.
+     */
     all: boolean;
+    /**
+     * The meaning of this list depends on `all`:
+     * - when `all` is `false`, it is the ids explicitly *included* in the selection.
+     * - when `all` is `true`, it is the ids explicitly *excluded* from the otherwise
+     *   fully-selected set (e.g. rows unchecked after a "select all" across paginated data).
+     *
+     * This lets `all: true` represent "all except these ids" without needing to know the
+     * full id universe (MYG-142234) - unchecking a row while `all` is true only ever adds
+     * to this exclusion list; it must never be rebuilt from the currently rendered page.
+     */
     selected: string[];
 }

package/esm/table/selectable/useSelectableRows.js

@@ -133,19 +133,30 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
     }
   }, [checkboxDisabled, checkboxVisible, entities, selectable, setSelectMode, selectable === null || selectable === void 0 ? void 0 : selectable.strategy]);
   const getNewSelection = useCallback((id, checked) => {
-    if (state === SelectionState.All) {
-      const newSelection = getCurrentPageSelection(entities, selectable);
-      checkRow(newSelection, selectable, entities, id, false);
-      return newSelection;
+    var _a;
+    if ((_a = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _a === void 0 ? void 0 : _a.all) {
+      // MYG-142234: `selections` holds the ids excluded from the "all" selection.
+      // Toggling a row here must only ever add/remove that single id from the
+      // exclusion set - it must never be rebuilt from `entities` (the current page),
+      // otherwise every other page's rows would silently fall out of the selection.
+      const excluded = new Set(selections);
+      checkRow(excluded, selectable, entities, id, !checked);
+      return excluded;
     }
     checkRow(selections, selectable, entities, id, checked);
     return selections;
-  }, [state, entities, selectable, selections]);
+  }, [entities, selectable, selections]);
   const onSelectListener = useCallback((id, checked) => {
     var _a;
+    const wasAllSelected = ((_a = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _a === void 0 ? void 0 : _a.all) || false;
     const newSelection = getNewSelection(id, checked);
-    const newState = calculateSelectionState(entities, newSelection, ((_a = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _a === void 0 ? void 0 : _a.all) || false, checkboxVisible, checkboxDisabled, selectable === null || selectable === void 0 ? void 0 : selectable.strategy);
-    const newValue = {
+    const newState = calculateSelectionState(entities, newSelection, wasAllSelected, checkboxVisible, checkboxDisabled, selectable === null || selectable === void 0 ? void 0 : selectable.strategy);
+    // MYG-142234: once selection spans "all" pages, unchecking a row must keep `all: true`
+    // and only record the exclusion - it must not collapse to the current page's ids.
+    const newValue = wasAllSelected ? {
+      selected: [...newSelection],
+      all: true
+    } : {
       selected: [...newSelection],
       all: newState === SelectionState.All
     };
@@ -154,7 +165,7 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
     setSelectMode(newValue.all || newValue.selected.length > 0);
   }, [checkboxDisabled, checkboxVisible, entities, selectable, setSelectMode, setState, getNewSelection]);
   const onChangeSelectionState = useCallback(newState => {
-    var _a, _b;
+    var _a, _b, _c;
     if (newState === SelectionState.All) {
       (selectable === null || selectable === void 0 ? void 0 : selectable.onSelect) && selectable.onSelect({
         selected: [],
@@ -173,7 +184,11 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
     }
     const newSelections = getCurrentPageSelection(entities, selectable);
     setState(newState);
-    const previousSelections = (_b = (_a = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _a === void 0 ? void 0 : _a.selected) !== null && _b !== void 0 ? _b : [];
+    // MYG-142234: previous `selected` ids mean something different depending on `all` -
+    // included ids when `all` is false, excluded ids when `all` is true. Switching to an
+    // explicit "select current page" here always leaves `all: false`, so a previous
+    // exclusion list must not be reinterpreted as an inclusion list.
+    const previousSelections = ((_a = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _a === void 0 ? void 0 : _a.all) ? [] : (_c = (_b = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _b === void 0 ? void 0 : _b.selected) !== null && _c !== void 0 ? _c : [];
     const mergedSelections = new Set([...previousSelections, ...newSelections]);
     const newValue = {
       selected: [...mergedSelections],
@@ -192,7 +207,12 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
     }
     return translate("Deselect all");
   }, [selectable, selectableState, state, translate]);
-  const isEntityChecked = useCallback((entity, isNested) => isRowChecked(selections, state, selectable === null || selectable === void 0 ? void 0 : selectable.strategy, entity, isNested), [selections, state, selectable === null || selectable === void 0 ? void 0 : selectable.strategy]);
+  const isEntityChecked = useCallback(
+  // MYG-142234: while `selection.all` is true, `selections` holds excluded ids, and every
+  // row must be evaluated through the SelectionState.All (exclusion-aware) branch of
+  // isRowChecked - not the per-page `state`, which can be Partial/None for a page that
+  // contains some of those exclusions.
+  (entity, isNested) => isRowChecked(selections, isAllSelected ? SelectionState.All : state, selectable === null || selectable === void 0 ? void 0 : selectable.strategy, entity, isNested), [selections, isAllSelected, state, selectable === null || selectable === void 0 ? void 0 : selectable.strategy]);
   const hasSelectable = !!selectable;
   const selectableCheckboxSelectsCurrentPage = selectable === null || selectable === void 0 ? void 0 : selectable.checkboxSelectsCurrentPage;
   const selectableTurnOffSelectAll = selectable === null || selectable === void 0 ? void 0 : selectable.turnOffSelectAll;
@@ -244,16 +264,30 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
           checked: state === SelectionState.CurrentPage || state === SelectionState.All,
           indeterminate: state === SelectionState.Partial,
           onChange: newValue => {
-            var _a, _b;
+            var _a, _b, _c;
             if (newValue) {
               const newState = checkboxEmitsCurrentPage ? SelectionState.CurrentPage : SelectionState.All;
               setState(newState);
               onChangeSelectionState(newState);
+            } else if ((_a = selectable.selection) === null || _a === void 0 ? void 0 : _a.all) {
+              // MYG-142234: in exclusion mode, `selected` holds excluded ids. Unchecking
+              // the header must add the current page's ids to that exclusion set and
+              // keep `all: true` - it must never be treated as an inclusion list, or
+              // every other page's selection would be silently wiped out.
+              const currentPageIds = getCurrentPageSelection(entities, selectable);
+              const newExcluded = new Set([...selectable.selection.selected, ...currentPageIds]);
+              const newState = calculateSelectionState(entities, newExcluded, true, checkboxVisible, checkboxDisabled, selectable.strategy);
+              setState(newState);
+              selectable.onSelect({
+                selected: [...newExcluded],
+                all: true
+              });
+              setSelectMode(true);
             } else {
               // Intentionally different from onSelect(None) ("Deselect all" menu item, which clears everything).
               // Unchecking the header checkbox only removes the current page from the selection, preserving other pages.
               const currentPageIds = getCurrentPageSelection(entities, selectable);
-              const remaining = ((_b = (_a = selectable.selection) === null || _a === void 0 ? void 0 : _a.selected) !== null && _b !== void 0 ? _b : []).filter(id => !currentPageIds.has(id));
+              const remaining = ((_c = (_b = selectable.selection) === null || _b === void 0 ? void 0 : _b.selected) !== null && _c !== void 0 ? _c : []).filter(id => !currentPageIds.has(id));
               const newState = remaining.length > 0 ? SelectionState.Partial : SelectionState.None;
               setState(newState);
               selectable.onSelect({