@geotab/zenith 3.15.0 → 3.16.0-beta.0

package/dist/nav/navItem/navItem.js

@@ -25,6 +25,11 @@ const navItemType_1 = require("./navItemType");
 exports.NavItemContext = (0, react_1.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) => (0, react_1.isValidElement)(child) && child.type.displayName === "NavItem";
 const getWrapperClassName = ({ className, collapsed, active, isMobile, hasNested, isNested, isLink, type }) => (0, classNames_1.classNames)([
     "zen-nav-item",
@@ -77,11 +82,19 @@ const LinkNavItem = (_a) => {
             onNavigate && onNavigate();
         }, className: "zen-link--light zen-nav-item__main", children: (0, jsx_runtime_1.jsx)(navItemContent_1.NavItemContent, Object.assign({ title: title, collapsed: collapsed, level: currentLevel, isExternalLink: isExternalLink }, rest)) }));
     const item = collapsed ? ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { trigger: linkElement, alignment: tooltipAlignment, children: title })) : (linkElement);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: getWrapperClassName({ className, collapsed, active, isMobile, isLink: true, type }), children: [item, (0, jsx_runtime_1.jsx)(NavItemAction, { actionIcon: actionIcon, actionIconTitle: actionIconTitle, onActionIconClick: onActionIconClick, collapsed: collapsed, level: currentLevel, isMenuItem: isMenuItem })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: getWrapperClassName({
+            className,
+            collapsed,
+            active,
+            isMobile,
+            isLink: true,
+            type
+        }), children: [item, (0, jsx_runtime_1.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] = (0, react_1.useState)(false);
     const { parentLevel = 0, closeParentMenu } = (0, react_1.useContext)(exports.NavItemContext);
     (0, react_1.useEffect)(() => {
@@ -116,7 +129,15 @@ const ButtonNavItem = (_a) => {
     const { onNavigate } = (0, nav_context_1.useNavContext)();
     const isActive = active || (hasNestedItems && menuOpen);
     const triggerId = (0, react_1.useId)();
-    const buttonElement = ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(navItemContent_1.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 = ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(navItemContent_1.NavItemContent, Object.assign({ title: title, collapsed: collapsed, hasSubmenu: hasNestedItems, level: currentLevel }, rest)) }));
     const trigger = collapsed ? ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { trigger: buttonElement, alignment: tooltipAlignment, children: title })) : (buttonElement);
     if (hasNestedItems) {
         const childLevel = currentLevel + 1;
@@ -130,7 +151,14 @@ const ButtonNavItem = (_a) => {
         };
         // For mobiles convert the entire subtree into a static NavMenuItem tree
         if (isMobile) {
-            return ((0, jsx_runtime_1.jsxs)("div", { className: getWrapperClassName({ className, collapsed, active: isActive, isMobile, hasNested: hasNestedItems, type }), children: [trigger, (0, jsx_runtime_1.jsx)(controlledMenu_1.ControlledMenu, { triggerRef: triggerRef, isOpen: menuOpen, setIsOpen: setMenuOpen, title: title, alignment: menuAlignment, className: (0, classNames_1.classNames)([popupClass, popupClassMobile]), listClassName: (0, classNames_1.classNames)([popupListClass, popupListClassMobile]), ariaLabelledby: triggerId, children: buildMobileMenuItems(children, triggerId, onNavigate) })] }));
+            return ((0, jsx_runtime_1.jsxs)("div", { className: getWrapperClassName({
+                    className,
+                    collapsed,
+                    active: isActive,
+                    isMobile,
+                    hasNested: hasNestedItems,
+                    type
+                }), children: [trigger, (0, jsx_runtime_1.jsx)(controlledMenu_1.ControlledMenu, { triggerRef: triggerRef, isOpen: menuOpen, setIsOpen: setMenuOpen, title: title, alignment: menuAlignment, className: (0, classNames_1.classNames)([popupClass, popupClassMobile]), listClassName: (0, classNames_1.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 => {
@@ -139,9 +167,23 @@ const ButtonNavItem = (_a) => {
             const nestedClass = childLevel > 1 ? "zen-nav-item--nested" : "";
             return (0, react_1.cloneElement)(childElement, Object.assign(Object.assign({}, childElement.props), { className: (0, classNames_1.classNames)([levelClass, nestedClass, childElement.props.className || ""]), collapsed: false }));
         });
-        return ((0, jsx_runtime_1.jsxs)("div", { className: getWrapperClassName({ className, collapsed, active: isActive, isMobile, hasNested: hasNestedItems, type }), children: [trigger, (0, jsx_runtime_1.jsx)(exports.NavItemContext, { value: { parentLevel: currentLevel, closeParentMenu: closeLevelMenu }, children: (0, jsx_runtime_1.jsx)(controlledMenu_1.ControlledMenu, { triggerRef: triggerRef, isOpen: menuOpen, setIsOpen: setMenuOpen, title: title, alignment: menuAlignment, className: popupClass, listClassName: popupListClass, ariaLabelledby: triggerId, children: processedChildren }) })] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: getWrapperClassName({
+                className,
+                collapsed,
+                active: isActive,
+                isMobile,
+                hasNested: hasNestedItems,
+                type
+            }), children: [trigger, (0, jsx_runtime_1.jsx)(exports.NavItemContext, { value: { parentLevel: currentLevel, closeParentMenu: closeLevelMenu }, children: (0, jsx_runtime_1.jsx)(controlledMenu_1.ControlledMenu, { triggerRef: triggerRef, isOpen: menuOpen, setIsOpen: setMenuOpen, title: title, alignment: menuAlignment, className: popupClass, listClassName: popupListClass, ariaLabelledby: triggerId, children: processedChildren }) })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: getWrapperClassName({ className, collapsed, active: isActive, isMobile, hasNested: hasNestedItems, type }), children: [trigger, (0, jsx_runtime_1.jsx)(NavItemAction, { actionIcon: actionIcon, actionIconTitle: actionIconTitle, onActionIconClick: onActionIconClick, collapsed: collapsed, level: currentLevel, isMenuItem: isMenuItem })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: getWrapperClassName({
+            className,
+            collapsed,
+            active: isActive,
+            isMobile,
+            hasNested: hasNestedItems,
+            type
+        }), children: [trigger, (0, jsx_runtime_1.jsx)(NavItemAction, { actionIcon: actionIcon, actionIconTitle: actionIconTitle, onActionIconClick: onActionIconClick, collapsed: collapsed, level: currentLevel, isMenuItem: isMenuItem })] }));
 };
 ButtonNavItem.displayName = "ButtonNavItem";
 /**

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

@@ -176,7 +176,8 @@ const PillExpandableChild = ({
   type,
   errorHandler,
   content,
-  autoExpandChildren
+  autoExpandChildren,
+  dataAnalyticsId
 }) => {
   const pillId = (0, react_1.useId)();
   const descriptionId = (0, react_1.useId)();
@@ -234,7 +235,8 @@ const PillExpandableChild = ({
       onExpand: handleChildToggle,
       type: type,
       errorHandler: errorHandler,
-      descriptionId: descriptionId
+      descriptionId: descriptionId,
+      dataAnalyticsId: dataAnalyticsId
     }), (0, jsx_runtime_1.jsx)(pillContent_1.PillContent, {
       onActionClick: handleChildToggle,
       descriptionText: content.description,
@@ -555,7 +557,8 @@ const PillExpandableBase = ({
       type: type,
       errorHandler: errorHandler,
       content: content,
-      autoExpandChildren: autoExpandChildren
+      autoExpandChildren: autoExpandChildren,
+      dataAnalyticsId: dataAnalyticsId
     });
   }
   return (0, jsx_runtime_1.jsx)(PillContext.Provider, {

package/dist/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/dist/rangeRaw/components/rangeField.js

@@ -7,7 +7,7 @@ const textInput_1 = require("../../textInput/textInput");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const iconException_1 = require("../../icons/iconException");
 const useMobileClassName_1 = require("../../utils/theme/useMobileClassName");
-const RangeField = ({ value, onChange, onBlur, id, label, unit, disabled, min, max, inputRef, errorString, className, direction, isMinField }) => {
+const RangeField = ({ value, onChange, onBlur, id, label, unit, disabled, min, max, inputRef, errorString, className, direction, isMinField, integer }) => {
     const inputId = (0, react_1.useId)();
     const labelId = (0, react_1.useId)();
     const unitId = (0, react_1.useId)();
@@ -15,7 +15,8 @@ const RangeField = ({ value, onChange, onBlur, id, label, unit, disabled, min, m
     const mobileSenseClass = (0, useMobileClassName_1.useMobileClassName)("zen-range-field__sense");
     const mobileInputClass = (0, useMobileClassName_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)([
@@ -23,6 +24,6 @@ const RangeField = ({ value, onChange, onBlur, id, label, unit, disabled, min, m
             direction === "row" ? "zen-range-field--row" : "zen-range-field--column",
             isMinField ? "zen-range-field--min" : "zen-range-field--max",
             className || ""
-        ]), children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-range-field__content", children: [(0, jsx_runtime_1.jsx)("label", { className: (0, classNames_1.classNames)(["zen-range-field__label", "zen-ellipsis", mobileLabelClass || ""]), id: labelId, htmlFor: inputId, children: label }), (0, jsx_runtime_1.jsx)("div", { className: "zen-range-field__input-container", children: (0, jsx_runtime_1.jsx)(textInput_1.TextInput, { inputClassName: (0, classNames_1.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 ? ((0, jsx_runtime_1.jsx)("div", { id: unitId, className: (0, classNames_1.classNames)(["zen-range-field__sense", "zen-ellipsis", mobileSenseClass || ""]), children: (0, jsx_runtime_1.jsx)("div", { className: "zen-range-field__sense-text zen-ellipsis", children: unit }) })) : null] }), errorString && direction !== "row" ? ((0, jsx_runtime_1.jsxs)("div", { className: "zen-range-field__error", children: [(0, jsx_runtime_1.jsx)(iconException_1.IconException, { className: "zen-range-field__error-icon", size: "bigger" }), (0, jsx_runtime_1.jsx)("div", { className: "zen-range-field__error-text", children: errorString })] })) : null] }));
+        ]), children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-range-field__content", children: [(0, jsx_runtime_1.jsx)("label", { className: (0, classNames_1.classNames)(["zen-range-field__label", "zen-ellipsis", mobileLabelClass || ""]), id: labelId, htmlFor: inputId, children: label }), (0, jsx_runtime_1.jsx)("div", { className: "zen-range-field__input-container", children: (0, jsx_runtime_1.jsx)(textInput_1.TextInput, { inputClassName: (0, classNames_1.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 ? ((0, jsx_runtime_1.jsx)("div", { id: unitId, className: (0, classNames_1.classNames)(["zen-range-field__sense", "zen-ellipsis", mobileSenseClass || ""]), children: (0, jsx_runtime_1.jsx)("div", { className: "zen-range-field__sense-text zen-ellipsis", children: unit }) })) : null] }), errorString && direction !== "row" ? ((0, jsx_runtime_1.jsxs)("div", { className: "zen-range-field__error", children: [(0, jsx_runtime_1.jsx)(iconException_1.IconException, { className: "zen-range-field__error-icon", size: "bigger" }), (0, jsx_runtime_1.jsx)("div", { className: "zen-range-field__error-text", children: errorString })] })) : null] }));
 };
 exports.RangeField = RangeField;

package/dist/rangeRaw/rangeRaw.js

@@ -281,7 +281,8 @@ const RangeRaw = props => {
     chip,
     chipIcon,
     chipId,
-    chipName
+    chipName,
+    integer
   } = props;
   const labelLocal = label && !title ? label : title;
   const accessibilityProps = (0, getAriaAttributes_1.getAriaAttributes)(props);
@@ -432,8 +433,9 @@ 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 = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(rangeField_1.RangeField, {
     className: "zen-range__max-field",
     label: labelMax || translate("Max"),
@@ -447,8 +449,9 @@ 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 = (0, react_1.useMemo)(() => getSelection(), [getSelection]);
   const memoizedContent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("div", {
     className: "zen-range__fields-wrapper",

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

@@ -18,12 +18,13 @@ const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const isAlertTarget_1 = require("../alert/utils/isAlertTarget");
 const isToastTarget_1 = require("../toast/utils/isToastTarget");
 const isModalTarget_1 = require("../modal/utils/isModalTarget");
-const isBannerTarget_1 = require("../banner/utils/isBannerTarget");
 const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 const zen_1 = require("../utils/zen");
 const usePortal_1 = require("../commonHelpers/hooks/usePortal");
 /* eslint-enable @typescript-eslint/naming-convention */
-const OVERLAY_TARGET_CHECKS = [isAlertTarget_1.isAlertTarget, isToastTarget_1.isToastTarget, isModalTarget_1.isModalTarget, isBannerTarget_1.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_1.isAlertTarget, isToastTarget_1.isToastTarget, isModalTarget_1.isModalTarget];
 const isChildPopup = (target, stopElement) => {
     var _a;
     const parentPopup = (0, getParentByClass_1.getParentByClass)(target, "zen-absolute");

package/dist/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/dist/table/selectable/useSelectableRows.js

@@ -142,19 +142,30 @@ const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMod
     }
   }, [checkboxDisabled, checkboxVisible, entities, selectable, setSelectMode, selectable === null || selectable === void 0 ? void 0 : selectable.strategy]);
   const getNewSelection = (0, react_1.useCallback)((id, checked) => {
-    if (state === interfaces_1.SelectionState.All) {
-      const newSelection = (0, getCurrentPageSelection_1.getCurrentPageSelection)(entities, selectable);
-      (0, checkRow_1.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);
+      (0, checkRow_1.checkRow)(excluded, selectable, entities, id, !checked);
+      return excluded;
     }
     (0, checkRow_1.checkRow)(selections, selectable, entities, id, checked);
     return selections;
-  }, [state, entities, selectable, selections]);
+  }, [entities, selectable, selections]);
   const onSelectListener = (0, react_1.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 = (0, calculateSelectionState_1.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 = (0, calculateSelectionState_1.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 === interfaces_1.SelectionState.All
     };
@@ -163,7 +174,7 @@ const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMod
     setSelectMode(newValue.all || newValue.selected.length > 0);
   }, [checkboxDisabled, checkboxVisible, entities, selectable, setSelectMode, setState, getNewSelection]);
   const onChangeSelectionState = (0, react_1.useCallback)(newState => {
-    var _a, _b;
+    var _a, _b, _c;
     if (newState === interfaces_1.SelectionState.All) {
       (selectable === null || selectable === void 0 ? void 0 : selectable.onSelect) && selectable.onSelect({
         selected: [],
@@ -182,7 +193,11 @@ const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMod
     }
     const newSelections = (0, getCurrentPageSelection_1.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],
@@ -201,7 +216,12 @@ const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMod
     }
     return translate("Deselect all");
   }, [selectable, selectableState, state, translate]);
-  const isEntityChecked = (0, react_1.useCallback)((entity, isNested) => (0, isRowChecked_1.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 = (0, react_1.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) => (0, isRowChecked_1.isRowChecked)(selections, isAllSelected ? interfaces_1.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;
@@ -253,16 +273,30 @@ const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMod
           checked: state === interfaces_1.SelectionState.CurrentPage || state === interfaces_1.SelectionState.All,
           indeterminate: state === interfaces_1.SelectionState.Partial,
           onChange: newValue => {
-            var _a, _b;
+            var _a, _b, _c;
             if (newValue) {
               const newState = checkboxEmitsCurrentPage ? interfaces_1.SelectionState.CurrentPage : interfaces_1.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 = (0, getCurrentPageSelection_1.getCurrentPageSelection)(entities, selectable);
+              const newExcluded = new Set([...selectable.selection.selected, ...currentPageIds]);
+              const newState = (0, calculateSelectionState_1.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 = (0, getCurrentPageSelection_1.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 ? interfaces_1.SelectionState.Partial : interfaces_1.SelectionState.None;
               setState(newState);
               selectable.onSelect({

package/dist/table/selectable/utils/calculateSelectionState.js

@@ -6,6 +6,41 @@ const calculateSelectionState = (entities, selections, all, checkboxVisible, che
     if (selections.size === 0) {
         return all ? interfaces_1.SelectionState.All : interfaces_1.SelectionState.None;
     }
+    if (all) {
+        // When `all` is true, `selections` holds the ids explicitly excluded from the
+        // otherwise-fully-selected set (see ISelectionValue), rather than included ids.
+        const isExcluded = (entity) => {
+            if (strategy === "nested" && entity.children) {
+                if (entity.children.length === 0) {
+                    return false;
+                }
+                return entity.children.every(child => {
+                    if (!checkboxVisible(child)) {
+                        return true;
+                    }
+                    if (checkboxDisabled(child)) {
+                        return true;
+                    }
+                    return selections.has(child.id);
+                });
+            }
+            return selections.has(entity.id);
+        };
+        const isPartiallyExcluded = (entity) => {
+            if (strategy === "nested" && entity.children) {
+                return entity.children.some(child => selections.has(child.id));
+            }
+            return selections.has(entity.id);
+        };
+        const relevantEntities = entities.filter(entity => checkboxVisible(entity) && !checkboxDisabled(entity));
+        if (relevantEntities.length === 0) {
+            return interfaces_1.SelectionState.All;
+        }
+        if (relevantEntities.every(entity => !isPartiallyExcluded(entity))) {
+            return interfaces_1.SelectionState.All;
+        }
+        return relevantEntities.every(entity => isExcluded(entity)) ? interfaces_1.SelectionState.None : interfaces_1.SelectionState.Partial;
+    }
     return entities.every(entity => {
         if (!checkboxVisible(entity)) {
             return true;

package/dist/table/selectable/utils/isRowChecked.js

@@ -4,7 +4,18 @@ exports.isRowChecked = void 0;
 const interfaces_1 = require("../interfaces");
 const isRowChecked = (selections, state, strategy, entity, isNested) => {
     if (state === interfaces_1.SelectionState.All) {
-        return { indeterminate: false, checked: true };
+        // When the overall selection is "all", `selections` holds the ids that have been
+        // explicitly excluded from that selection (see ISelectionValue), not included ids.
+        if (isNested) {
+            return { indeterminate: false, checked: !selections.has(entity.id) };
+        }
+        const mainEntity = entity;
+        if (strategy === "nested" && mainEntity.children && mainEntity.children.length > 0) {
+            const allChildrenChecked = mainEntity.children.every(child => !selections.has(child.id));
+            const someChildrenChecked = mainEntity.children.some(child => !selections.has(child.id));
+            return { indeterminate: someChildrenChecked && !allChildrenChecked, checked: allChildrenChecked };
+        }
+        return { indeterminate: false, checked: !selections.has(entity.id) };
     }
     if (isNested) {
         return { indeterminate: false, checked: selections.has(entity.id) };

package/dist/table/table.d.ts

@@ -25,6 +25,7 @@ import { IRowEntity } from "../dataGrid/row/row";
 import { IEntityWithId } from "../commonHelpers/entity";
 import "../cardContainer/cardContainer.less";
 import { ITableDetailPanel } from "./children/tableDetailPanel";
+import { ITrendIndicator } from "../trendIndicator/trendIndicator";
 export interface IListColumn<T extends IRowEntity<N>, N extends IEntityWithId = T> {
     readonly id: string;
     readonly title: string;
@@ -92,6 +93,7 @@ interface ITableComponents {
     BulkButton: React.FC<IBulkActionButton>;
     BulkLink: React.FC<IBulkActionLink>;
     DetailPanel: React.FC<ITableDetailPanel>;
+    TrendIndicator: React.FC<ITrendIndicator>;
 }
 declare const TableInner: <T extends IRowEntity<N>, N extends IEntityWithId = T>({ entities, columns, selectable, sortable, flexible, isLoading, loading, children, className, height, onFeedEnd, onScrollEnd, rowClassName, feedExpandable, expandedRows, onExpand, active, onClick }: ITable<T, N>) => import("react/jsx-runtime").JSX.Element;
 declare const Table: typeof TableInner & ITableComponents;

package/dist/table/table.js

@@ -204,6 +204,7 @@ const feedExpandControl_1 = require("../dataFeed/feedExpandControl/feedExpandCon
 const getGridClasses_1 = require("../gridLayout/utils/getGridClasses");
 const useNestedRows_1 = require("./nested/useNestedRows");
 const tableDetailPanel_1 = require("./children/tableDetailPanel");
+const trendIndicator_1 = require("../trendIndicator/trendIndicator");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 // Interpolation placeholder used in the "{count} more rows loaded" translation key.
 // `translate()` has no interpolation overload, so the count is substituted at runtime via
@@ -452,4 +453,5 @@ Table.Pagination = tablePagination_1.TablePagination;
 Table.Fullscreen = tableFullscreen_1.TableFullscreen;
 Table.BulkButton = bulkActionButton_1.BulkActionButton;
 Table.BulkLink = bulkActionLink_1.BulkActionLink;
-Table.DetailPanel = tableDetailPanel_1.TableDetailPanel;
+Table.DetailPanel = tableDetailPanel_1.TableDetailPanel;
+Table.TrendIndicator = trendIndicator_1.TrendIndicator;

package/dist/tabs/tabs.js

@@ -85,6 +85,7 @@ const iconChevronLeft_1 = require("../icons/iconChevronLeft");
 const useDirectionalIcon_1 = require("../utils/localization/useDirectionalIcon");
 const textIconButton_1 = require("../textIconButton/textIconButton");
 const tabsKeyboard_1 = require("../commonHelpers/tabsKeyboard");
+const arrowNavigationHelper_1 = require("../commonHelpers/arrowNavigation/arrowNavigationHelper");
 const useMobileClassName_1 = require("../utils/theme/useMobileClassName");
 require("../utils/globalThisPolyfill");
 const zen_1 = require("../utils/zen");
@@ -97,13 +98,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";
@@ -137,6 +140,7 @@ const Tabs = ({
   const scrollableRef = (0, react_1.useRef)(null);
   const scrollRef = (0, react_1.useRef)(0);
   const focusableTabIdRef = (0, react_1.useRef)("");
+  const userInitiatedTabChangeRef = (0, react_1.useRef)(false);
   const handleButtonClick = e => {
     if (disabled) {
       return;
@@ -144,6 +148,7 @@ const Tabs = ({
     const newState = e.currentTarget.id;
     focusableTabIdRef.current = newState;
     if (newState !== activeTabId) {
+      userInitiatedTabChangeRef.current = true;
       onTabChange(newState);
     }
   };
@@ -160,6 +165,7 @@ const Tabs = ({
       // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
       if (target && target.id && tabs.some(tab => tab.id === target.id)) {
         focusableTabIdRef.current = target.id;
+        userInitiatedTabChangeRef.current = true;
         onTabChange(target.id);
       }
       return;
@@ -241,7 +247,10 @@ const Tabs = ({
     const activeTab = scrollableRef.current.querySelector(`.zen-tab-item[id='${activeTabId}']`);
     if (activeTab instanceof HTMLElement) {
       focusableTabIdRef.current = activeTab.getAttribute("id") || "";
-      // activeTab.focus();
+      if (userInitiatedTabChangeRef.current) {
+        userInitiatedTabChangeRef.current = false;
+        activeTab.focus();
+      }
     }
   }, [activeTabId]);
   return (0, jsx_runtime_1.jsx)("div", {
@@ -257,7 +266,7 @@ const Tabs = ({
           icon: ScrollStartIcon,
           type: "tertiary",
           iconPosition: textIconButton_1.ButtonIconPosition.Start,
-          onClick: handleScrollButtonClick(scrollableRef.current, -scrollableStep),
+          onClick: handleScrollButtonClick(scrollableRef.current, (0, arrowNavigationHelper_1.getDirectionalScrollDelta)(-scrollableStep, isRTL)),
           iconClasses: "zen-tabs__start-icon"
         })]
       }) : null, (0, jsx_runtime_1.jsx)("div", {
@@ -290,7 +299,7 @@ const Tabs = ({
           className: (0, classNames_1.classNames)(["zen-tabs__scroller", driveClassNameScroller || mobileClassNameScroller || "", "zen-tabs__end"]),
           icon: ScrollEndIcon,
           type: "tertiary",
-          onClick: handleScrollButtonClick(scrollableRef.current, scrollableStep),
+          onClick: handleScrollButtonClick(scrollableRef.current, (0, arrowNavigationHelper_1.getDirectionalScrollDelta)(scrollableStep, isRTL)),
           iconPosition: textIconButton_1.ButtonIconPosition.End
         })]
       }) : null]

package/dist/textInputRaw/textInputRaw.js

@@ -21,7 +21,7 @@ const TextInputRaw = (props) => {
             props.isError ? "zen-text-input--error" : ""
         ]), value: maxLength ? value.substring(0, maxLength) : value, placeholder: props.placeholder, disabled: disabled, onChange: onChange, onKeyDown: props.onKeyDown, onBlur: onBlur, maxLength: maxLength, autoComplete: props.autocomplete, 
         // TODO: add tests
-        min: min, max: max, "aria-labelledby": props.ariaLabelledby, "aria-label": props.ariaLabel, autoFocus: props.autoFocus, required: !!required, onFocus: props.onFocus, minLength: minLength, name: name, pattern: pattern, role: props.role, "aria-expanded": props.ariaExpanded === undefined ? undefined : props.ariaExpanded === "true" || props.ariaExpanded === true, "aria-haspopup": props.ariaHaspopup, "aria-controls": props.ariaControls, "aria-autocomplete": props.ariaAutocomplete, "aria-describedby": props.ariaDescribedby }));
+        min: min, max: max, step: props.step, "aria-labelledby": props.ariaLabelledby, "aria-label": props.ariaLabel, autoFocus: props.autoFocus, required: !!required, onFocus: props.onFocus, minLength: minLength, name: name, pattern: pattern, role: props.role, "aria-expanded": props.ariaExpanded === undefined ? undefined : props.ariaExpanded === "true" || props.ariaExpanded === true, "aria-haspopup": props.ariaHaspopup, "aria-controls": props.ariaControls, "aria-autocomplete": props.ariaAutocomplete, "aria-describedby": props.ariaDescribedby }));
 };
 exports.TextInputRaw = TextInputRaw;
 exports.TextInputRaw.displayName = "TextInputRaw";

package/dist/textInputRaw/types.d.ts

@@ -31,6 +31,7 @@ export interface ITextInputDefaultRaw extends IZenComponentProps, ITextInputRawB
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
     min?: number;
     max?: number;
+    step?: number | "any";
     minLength?: number;
     maxLength?: number;
     pattern?: RegExp;