@geotab/zenith 3.17.0-beta.2 → 3.17.0

package/dist/button/button.d.ts

@@ -9,7 +9,6 @@ export interface IButton extends IZenComponentProps, IZenGridItem {
     title?: string;
     type?: TButton;
     disabled?: boolean;
-    focusableWhenDisabled?: boolean;
     onClick?: React.MouseEventHandler;
     onBlur?: React.FocusEventHandler;
     onMouseOver?: (e: React.MouseEvent<HTMLElement>) => void;
@@ -28,6 +27,6 @@ export interface IButton extends IZenComponentProps, IZenGridItem {
     dataAnalyticsId?: string;
 }
 export declare const Button: {
-    ({ className, type, disabled, focusableWhenDisabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, name, onBlur, role, ariaLabel, dataAnalyticsId, ...other }: IButton): import("react/jsx-runtime").JSX.Element;
+    ({ className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, name, onBlur, role, ariaLabel, dataAnalyticsId, ...other }: IButton): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/button/button.js

@@ -18,36 +18,19 @@ const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const filterGridProps_1 = require("../gridLayout/utils/filterGridProps");
 const useMobileClassName_1 = require("../utils/theme/useMobileClassName");
-const blockActivation = (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-};
-// Guards on `disabled` alone, not just `focusableWhenDisabled`, so clicks are blocked in JS regardless of
-// CSS. `onKeyDown`/`onKeyUp` stay unguarded — Tooltip needs them.
-const getDisabledGuardedHandlers = (disabled, isFocusableWhenDisabled, onClick, onMouseDown, onMouseUp) => ({
-    onClick: disabled ? blockActivation : onClick,
-    onMouseDown: isFocusableWhenDisabled ? blockActivation : onMouseDown,
-    onMouseUp: isFocusableWhenDisabled ? blockActivation : onMouseUp
-});
-const getButtonClassName = (type, disabled, isFocusableWhenDisabled, mobileOrDriveClasses, className) => {
+const Button = (_a) => {
+    var { className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, name, onBlur, role, ariaLabel, dataAnalyticsId } = _a, other = __rest(_a, ["className", "type", "disabled", "id", "title", "onClick", "onMouseOver", "onMouseOut", "onMouseDown", "onMouseUp", "onKeyDown", "onKeyUp", "children", "link", "target", "htmlType", "rel", "ref", "name", "onBlur", "role", "ariaLabel", "dataAnalyticsId"]);
     const modifierClassName = type && type !== buttonType_1.ButtonType.Secondary ? `zen-button--${type}` : "";
     const disabledClassName = disabled ? "zen-button--disabled" : "";
-    const disabledFocusableClassName = isFocusableWhenDisabled ? "zen-button--disabled-focusable" : "";
-    return (0, classNames_1.classNames)(["zen-button", mobileOrDriveClasses, modifierClassName, disabledClassName, disabledFocusableClassName, className !== null && className !== void 0 ? className : ""]);
-};
-const Button = (_a) => {
-    var { className, type, disabled, focusableWhenDisabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, name, onBlur, role, ariaLabel, dataAnalyticsId } = _a, other = __rest(_a, ["className", "type", "disabled", "focusableWhenDisabled", "id", "title", "onClick", "onMouseOver", "onMouseOut", "onMouseDown", "onMouseUp", "onKeyDown", "onKeyUp", "children", "link", "target", "htmlType", "rel", "ref", "name", "onBlur", "role", "ariaLabel", "dataAnalyticsId"]);
-    const isFocusableWhenDisabled = Boolean(disabled) && Boolean(focusableWhenDisabled);
     const driveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-button");
     const ariaLabelValue = ariaLabel || title;
     const mobileClasses = (0, useMobileClassName_1.useMobileClassName)("zen-button");
     const commonArgs = Object.assign(Object.assign(Object.assign({ id,
-        title }, (ariaLabelValue ? { "aria-label": ariaLabelValue } : {})), (dataAnalyticsId ? { "data-analytics-id": dataAnalyticsId } : {})), { className: getButtonClassName(type, disabled, isFocusableWhenDisabled, mobileClasses || driveClasses || "", className) });
-    const { onClick: onClickWithDisabledGuard, onMouseDown: onMouseDownWithDisabledGuard, onMouseUp: onMouseUpWithDisabledGuard } = getDisabledGuardedHandlers(disabled, isFocusableWhenDisabled, onClick, onMouseDown, onMouseUp);
+        title }, (ariaLabelValue ? { "aria-label": ariaLabelValue } : {})), (dataAnalyticsId ? { "data-analytics-id": dataAnalyticsId } : {})), { className: (0, classNames_1.classNames)(["zen-button", mobileClasses || driveClasses || "", modifierClassName, disabledClassName, className !== null && className !== void 0 ? className : ""]) });
     if (link) {
-        return ((0, jsx_runtime_1.jsx)("a", Object.assign({ role: "link", rel: rel, target: target, href: disabled ? undefined : link, tabIndex: isFocusableWhenDisabled ? 0 : undefined, "aria-disabled": disabled ? true : undefined, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onClick: onClickWithDisabledGuard }, commonArgs, (0, filterGridProps_1.filterGridProps)(other), { children: children })));
+        return ((0, jsx_runtime_1.jsx)("a", Object.assign({ role: "link", rel: rel, target: target, href: disabled ? undefined : link, "aria-disabled": disabled, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onClick: onClick }, commonArgs, (0, filterGridProps_1.filterGridProps)(other), { children: children })));
     }
-    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ name: name, onBlur: onBlur, onClick: onClickWithDisabledGuard, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onMouseDown: onMouseDownWithDisabledGuard, onMouseUp: onMouseUpWithDisabledGuard, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ref: ref, type: htmlType, disabled: isFocusableWhenDisabled ? undefined : disabled, "aria-disabled": isFocusableWhenDisabled ? true : undefined, role: role }, commonArgs, (0, filterGridProps_1.filterGridProps)(other), { children: children })));
+    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ name: name, onBlur: onBlur, onClick: onClick, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ref: ref, type: htmlType, disabled: disabled, role: role }, commonArgs, (0, filterGridProps_1.filterGridProps)(other), { children: children })));
 };
 exports.Button = Button;
 exports.Button.displayName = "Button";

package/dist/button/buttonDisabledProps.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+export declare const BUTTON_DISABLED_CLASS = "zen-button--disabled";
+export declare const BUTTON_DISABLED_FOCUSABLE_CLASS = "zen-button--disabled-focusable";
+export interface IButtonDisabledOptions {
+    disabled?: boolean;
+    /**
+     * Keeps a disabled button in the tab order and hoverable, using `aria-disabled` instead of the native
+     * `disabled` attribute. Has no effect while the button is enabled.
+     */
+    focusable?: boolean;
+    /** The `link` prop of the button, a link without `href` is not tabbable, so it needs an explicit `tabIndex`. */
+    link?: string;
+}
+export interface IButtonDisabledProps {
+    disabled?: boolean;
+    "aria-disabled"?: boolean;
+    tabIndex?: number;
+    className?: string;
+    onClick?: (event: React.SyntheticEvent) => void;
+    onMouseDown?: (event: React.SyntheticEvent) => void;
+    onMouseUp?: (event: React.SyntheticEvent) => void;
+}
+/**
+ * Props that make `Button` (or `TextIconButton`) disabled. `Button` itself only applies them.
+ *
+ * - enabled: `{ disabled }`
+ * - disabled: native `disabled`, the button leaves the tab order
+ * - disabled and `focusable`: `aria-disabled`, activation is blocked, the button stays focusable and hoverable
+ *
+ * `onKeyDown`/`onKeyUp` are left untouched: Tooltip needs them. Enter/Space on a focused button without the native
+ * `disabled` attribute fire a click, which is blocked here.
+ *
+ * The caller merges the returned `className` with its own and wraps the button in whatever explains the state.
+ */
+export declare const getButtonDisabledProps: ({ disabled, focusable, link }: IButtonDisabledOptions) => IButtonDisabledProps;

package/dist/button/buttonDisabledProps.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getButtonDisabledProps = exports.BUTTON_DISABLED_FOCUSABLE_CLASS = exports.BUTTON_DISABLED_CLASS = void 0;
+const classNames_1 = require("../commonHelpers/classNames/classNames");
+// `button.less` styles these classes: `--disabled-focusable` keeps pointer events so hover/tooltip still work.
+exports.BUTTON_DISABLED_CLASS = "zen-button--disabled";
+exports.BUTTON_DISABLED_FOCUSABLE_CLASS = "zen-button--disabled-focusable";
+const blockActivation = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+};
+/**
+ * Props that make `Button` (or `TextIconButton`) disabled. `Button` itself only applies them.
+ *
+ * - enabled: `{ disabled }`
+ * - disabled: native `disabled`, the button leaves the tab order
+ * - disabled and `focusable`: `aria-disabled`, activation is blocked, the button stays focusable and hoverable
+ *
+ * `onKeyDown`/`onKeyUp` are left untouched: Tooltip needs them. Enter/Space on a focused button without the native
+ * `disabled` attribute fire a click, which is blocked here.
+ *
+ * The caller merges the returned `className` with its own and wraps the button in whatever explains the state.
+ */
+const getButtonDisabledProps = ({ disabled, focusable, link }) => {
+    if (!disabled || !focusable) {
+        return { disabled };
+    }
+    const hasLink = Boolean(link);
+    return Object.assign(Object.assign({}, (hasLink ? { disabled: true, tabIndex: 0 } : { "aria-disabled": true })), { 
+        // Button adds `zen-button--disabled` to a disabled link itself.
+        className: (0, classNames_1.classNames)([hasLink ? "" : exports.BUTTON_DISABLED_CLASS, exports.BUTTON_DISABLED_FOCUSABLE_CLASS]), onClick: blockActivation, onMouseDown: blockActivation, onMouseUp: blockActivation });
+};
+exports.getButtonDisabledProps = getButtonDisabledProps;

package/dist/header/headerButton.d.ts

@@ -2,6 +2,7 @@ import { IButton } from "../button/button";
 import { TButtonIconPosition } from "../textIconButton/textIconButton";
 import { TSvgIconSize } from "../svgIcon/svgIconSize";
 import { IIcon } from "../icons/icon";
+import { TAlignment } from "../absolute/absolute";
 export interface IHeaderButton extends Omit<IButton, "onClick"> {
     id: string;
     important?: boolean;
@@ -11,10 +12,23 @@ export interface IHeaderButton extends Omit<IButton, "onClick"> {
     iconPosition?: TButtonIconPosition;
     iconClasses?: string;
     iconSize?: TSvgIconSize;
+    /**
+     * Tooltip content shown only while the button is `disabled`.
+     *
+     * When `disabled` and `disabledTooltip` are both set, the button uses `aria-disabled` instead of the native
+     * `disabled` attribute, so it stays focusable and hoverable and the tooltip can explain why it is unavailable.
+     * In every other case the standard `disabled` attribute is used, and `disabledTooltip` is ignored while the
+     * button is enabled.
+     */
+    disabledTooltip?: React.ReactNode;
     onClick?: (id: string, event: React.MouseEvent) => void;
 }
+interface IHeaderButtonInternal {
+    tooltipAlignment?: TAlignment;
+}
 export declare const HeaderButtonDisplayName = "HeaderButton";
 export declare const HeaderButton: {
-    ({ id, children, icon, iconOpen, iconPosition, className, important, onClick, inContextMenu, disabled, focusableWhenDisabled, ...restProps }: IHeaderButton): import("react/jsx-runtime").JSX.Element;
+    ({ id, children, icon, iconOpen, iconPosition, className, important, onClick, inContextMenu, disabledTooltip, tooltipAlignment, disabled, link, ...restProps }: IHeaderButton & IHeaderButtonInternal): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+export {};

package/dist/header/headerButton.js

@@ -16,14 +16,19 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const button_1 = require("../button/button");
 const textIconButton_1 = require("../textIconButton/textIconButton");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const tooltip_1 = require("../tooltip/tooltip");
+const buttonDisabledProps_1 = require("../button/buttonDisabledProps");
 exports.HeaderButtonDisplayName = "HeaderButton";
 const HeaderButton = (_a) => {
-    var { id, children, icon, iconOpen, iconPosition = textIconButton_1.ButtonIconPosition.Start, className = "", important, onClick, inContextMenu, disabled, focusableWhenDisabled } = _a, restProps = __rest(_a, ["id", "children", "icon", "iconOpen", "iconPosition", "className", "important", "onClick", "inContextMenu", "disabled", "focusableWhenDisabled"]);
-    const fullClassName = (0, classNames_1.classNames)(["zen-header-button", className]);
-    const props = Object.assign(Object.assign({}, restProps), { disabled, "data-important": important ? "1" : "0", 
-        // Defaults on when disabled; pass `focusableWhenDisabled={false}` to opt back into native `disabled`.
-        focusableWhenDisabled: focusableWhenDisabled !== null && focusableWhenDisabled !== void 0 ? focusableWhenDisabled : Boolean(disabled) });
-    return icon ? ((0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, Object.assign({ id: id, icon: icon, iconPosition: iconPosition, className: fullClassName, onClick: onClick ? e => onClick(id, e) : undefined }, props, { children: children }))) : ((0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ id: id, className: fullClassName, onClick: onClick ? e => onClick(id, e) : undefined }, props, { children: children })));
+    var { id, children, icon, iconOpen, iconPosition = textIconButton_1.ButtonIconPosition.Start, className = "", important, onClick, inContextMenu, disabledTooltip, tooltipAlignment = "bottom", disabled, link } = _a, restProps = __rest(_a, ["id", "children", "icon", "iconOpen", "iconPosition", "className", "important", "onClick", "inContextMenu", "disabledTooltip", "tooltipAlignment", "disabled", "link"]);
+    const tooltip = disabled ? disabledTooltip : undefined;
+    // Native `disabled` takes a button out of the tab order and blocks hover, so a tooltip could never be reached.
+    // Only a disabled button that has a tooltip to show is kept focusable, via `aria-disabled`.
+    const _b = (0, buttonDisabledProps_1.getButtonDisabledProps)({ disabled, focusable: Boolean(tooltip), link }), { className: disabledClassName } = _b, disabledProps = __rest(_b, ["className"]);
+    const fullClassName = (0, classNames_1.classNames)(["zen-header-button", className, disabledClassName !== null && disabledClassName !== void 0 ? disabledClassName : ""]);
+    const props = Object.assign(Object.assign(Object.assign({}, restProps), { link, "data-important": important ? "1" : "0" }), disabledProps);
+    const button = icon ? ((0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, Object.assign({ id: id, icon: icon, iconPosition: iconPosition, className: fullClassName, onClick: onClick ? e => onClick(id, e) : undefined }, props, { children: children }))) : ((0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ id: id, className: fullClassName, onClick: onClick ? e => onClick(id, e) : undefined }, props, { children: children })));
+    return tooltip ? ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { trigger: button, alignment: tooltipAlignment, children: tooltip })) : (button);
 };
 exports.HeaderButton = HeaderButton;
 exports.HeaderButton.displayName = exports.HeaderButtonDisplayName;

package/dist/index.css

@@ -4007,8 +4007,8 @@ html:lang(ar) .zen-menu-button__action {
   padding-block: 0.75rem;
   padding-inline: 1rem 0.5rem;
 }
-.zen-menu-button__action:focus:not(.zen-menu-button__action--disabled),
-.zen-menu-button__action:focus-visible:not(.zen-menu-button__action--disabled),
+.zen-menu-button__action:focus,
+.zen-menu-button__action:focus-visible,
 .zen-menu-button__action:hover:not(.zen-menu-button__action--disabled):not(.zen-menu-button__action--selected):not(.zen-menu-button__action--active) {
   color: var(--zen-menu-action-color);
   fill: var(--zen-menu-action-fill);
@@ -4083,10 +4083,6 @@ html:lang(ar) .zen-menu-button__action {
 .zen-menu-button__action.zen-menu-button__action {
   outline: none;
 }
-.zen-menu-button__action--disabled:focus-visible {
-  outline: 1px solid var(--borders-form-field--active);
-  outline-offset: -2px;
-}
 .zen-menu-button__icon {
   flex: 0 0 auto;
 }

package/dist/menu/components/menuButton.js

@@ -13,60 +13,6 @@ const useDrive_1 = require("../../utils/theme/useDrive");
 const getMenuButtonState_1 = require("../utils/getMenuButtonState");
 const isSafeHref_1 = require("../utils/isSafeHref");
 const getSafeRel_1 = require("../utils/getSafeRel");
-// Templates below drop native `disabled` to stay focusable/hoverable; this guard blocks activation instead.
-const handleDisabledGuardedClick = (e, disabled, id, onClick) => {
-    if (disabled) {
-        e.preventDefault();
-        e.stopPropagation();
-        return;
-    }
-    onClick === null || onClick === void 0 ? void 0 : onClick(id, e);
-};
-// Skip Space-to-activate when disabled, so it doesn't flash `--active` or self-click via `linkEl.click()`.
-const createDisabledGuardedLinkKeyEvents = (disabled) => ({
-    onKeyDown: (e) => {
-        if (disabled || e.key !== " ") {
-            return;
-        }
-        e.preventDefault();
-        const linkEl = e.target;
-        linkEl.dataset.spaceDown = "1";
-        linkEl.classList.add("zen-menu-button__action--active");
-    },
-    onKeyUp: (e) => {
-        if (disabled || e.key !== " ") {
-            return;
-        }
-        e.preventDefault();
-        const linkEl = e.target;
-        linkEl.classList.remove("zen-menu-button__action--active");
-        if (linkEl.dataset.spaceDown) {
-            delete linkEl.dataset.spaceDown;
-            linkEl.click();
-        }
-    }
-});
-const getMenuButtonActionClassName = (hasChildren, hasState, isActive, disabled, destructiveClass, driveClasses) => (0, classNames_1.classNames)([
-    "zen-menu-button__action",
-    "zen-button",
-    "zen-caption",
-    hasChildren ? "zen-menu-button__action--has-children" : "",
-    hasState && isActive ? "zen-menu-button__action--active" : "",
-    disabled ? "zen-menu-button__action--disabled" : "",
-    disabled ? "zen-button--disabled" : "",
-    disabled ? "zen-button--disabled-focusable" : "",
-    destructiveClass,
-    driveClasses || ""
-]);
-const getMenuLinkActionClassName = (disabled, destructiveClass, driveClasses) => (0, classNames_1.classNames)(["zen-menu-button__action", "zen-caption", disabled ? "zen-menu-button__action--disabled" : "", destructiveClass, driveClasses || ""]);
-// An <a> without `href` isn't tabbable, so `tabIndex="0"` keeps a disabled link item in the tab order.
-const getMenuLinkAccessibilityProps = (disabled, link) => ({
-    href: disabled || !(0, isSafeHref_1.isSafeHref)(link) ? undefined : link,
-    tabIndex: disabled ? 0 : undefined,
-    "aria-disabled": disabled
-});
-const getMenuItemRole = (hasState) => (hasState ? "menuitemcheckbox" : "menuitem");
-const getMenuItemAriaChecked = (hasState, isActive) => (hasState ? isActive : undefined);
 const createMenuIcon = (iconComponent, size, className) => iconComponent ? (0, react_1.createElement)(iconComponent, { size, className }) : null;
 const resolveTarget = (target, iconOpen) => target !== null && target !== void 0 ? target : (iconOpen ? "_blank" : undefined);
 const MenuButton = ({ id, onClick, hasChildren, disabled, icon, iconOpen, destructive, name, link, target, rel, className = "", active = null, ref, dataAnalyticsId }) => {
@@ -77,11 +23,47 @@ const MenuButton = ({ id, onClick, hasChildren, disabled, icon, iconOpen, destru
     const destructiveClass = destructive ? "zen-menu-button__action--destructive" : "";
     const effectiveTarget = resolveTarget(target, iconOpen);
     const ChevronIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronRight_1.IconChevronRight, iconChevronLeft_1.IconChevronLeft);
-    const linkEvents = (0, react_1.useMemo)(() => createDisabledGuardedLinkKeyEvents(disabled), [disabled]);
-    const onClickHandler = (0, react_1.useCallback)((e) => handleDisabledGuardedClick(e, disabled, id, onClick), [id, onClick, disabled]);
+    const linkEvents = (0, react_1.useMemo)(() => ({
+        onKeyDown: e => {
+            if (e.key === " ") {
+                e.preventDefault();
+                const linkEl = e.target;
+                linkEl.dataset.spaceDown = "1";
+                linkEl.classList.add("zen-menu-button__action--active");
+            }
+        },
+        onKeyUp: e => {
+            if (e.key === " ") {
+                e.preventDefault();
+                const linkEl = e.target;
+                linkEl.classList.remove("zen-menu-button__action--active");
+                if (linkEl.dataset.spaceDown) {
+                    delete linkEl.dataset.spaceDown;
+                    linkEl.click();
+                }
+            }
+        }
+    }), []);
+    const onClickHandler = (0, react_1.useCallback)((e) => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(id, e);
+    }, [id, onClick]);
     const iconAfterElement = createMenuIcon(iconOpen ? iconOpen_1.IconOpen : undefined, iconSize, "zen-menu-button__icon-after");
-    const buttonTemplate = ((0, jsx_runtime_1.jsxs)("button", { type: "button", "data-id": id, ref: ref, title: name, className: getMenuButtonActionClassName(hasChildren, hasState, isActive, disabled, destructiveClass, driveMenuButtonActionClasses), role: getMenuItemRole(hasState), onClick: onClickHandler, "aria-disabled": disabled ? true : undefined, "aria-checked": getMenuItemAriaChecked(hasState, isActive), "data-analytics-id": dataAnalyticsId, children: [createMenuIcon(icon, iconSize, (0, classNames_1.classNames)(["zen-caption__pre-content", "zen-menu-button__icon"])), (0, jsx_runtime_1.jsx)("span", { className: "zen-menu-button__action-text", children: name }), iconAfterElement, !!hasChildren && (0, jsx_runtime_1.jsx)(ChevronIcon, { size: iconSize, className: (0, classNames_1.classNames)(["zen-caption__pre-content", "zen-menu-button__more-icon"]) })] }));
-    const linkTemplate = ((0, jsx_runtime_1.jsxs)("a", Object.assign({ "data-id": id, role: "menuitem", className: getMenuLinkActionClassName(disabled, destructiveClass, driveMenuButtonActionClasses) }, getMenuLinkAccessibilityProps(disabled, link), { onClick: onClickHandler, target: effectiveTarget, rel: (0, getSafeRel_1.getSafeRel)(rel, effectiveTarget), "data-analytics-id": dataAnalyticsId }, linkEvents, { children: [createMenuIcon(icon, iconSize, "zen-caption__pre-content"), iconAfterElement ? (0, jsx_runtime_1.jsx)("span", { className: "zen-menu-button__action-text", children: name }) : name, iconAfterElement] })));
+    const buttonTemplate = ((0, jsx_runtime_1.jsxs)("button", { type: "button", "data-id": id, ref: ref, disabled: !!disabled, title: name, className: (0, classNames_1.classNames)([
+            "zen-menu-button__action",
+            "zen-button",
+            "zen-caption",
+            hasChildren ? "zen-menu-button__action--has-children" : "",
+            hasState && isActive ? "zen-menu-button__action--active" : "",
+            destructiveClass,
+            driveMenuButtonActionClasses || ""
+        ]), role: hasState ? "menuitemcheckbox" : "menuitem", onClick: onClickHandler, "aria-checked": hasState ? isActive : undefined, "data-analytics-id": dataAnalyticsId, children: [createMenuIcon(icon, iconSize, (0, classNames_1.classNames)(["zen-caption__pre-content", "zen-menu-button__icon"])), (0, jsx_runtime_1.jsx)("span", { className: "zen-menu-button__action-text", children: name }), iconAfterElement, !!hasChildren && (0, jsx_runtime_1.jsx)(ChevronIcon, { size: iconSize, className: (0, classNames_1.classNames)(["zen-caption__pre-content", "zen-menu-button__more-icon"]) })] }));
+    const linkTemplate = ((0, jsx_runtime_1.jsxs)("a", Object.assign({ "data-id": id, role: "menuitem", className: (0, classNames_1.classNames)([
+            "zen-menu-button__action",
+            "zen-caption",
+            disabled ? "zen-menu-button__action--disabled" : "",
+            destructiveClass,
+            driveMenuButtonActionClasses || ""
+        ]), href: disabled || !(0, isSafeHref_1.isSafeHref)(link) ? undefined : link, "aria-disabled": disabled, onClick: onClickHandler, target: effectiveTarget, rel: (0, getSafeRel_1.getSafeRel)(rel, effectiveTarget), "data-analytics-id": dataAnalyticsId }, linkEvents, { children: [createMenuIcon(icon, iconSize, "zen-caption__pre-content"), iconAfterElement ? (0, jsx_runtime_1.jsx)("span", { className: "zen-menu-button__action-text", children: name }) : name, iconAfterElement] })));
     return ((0, jsx_runtime_1.jsx)("li", { role: "presentation", className: (0, classNames_1.classNames)(["zen-menu-button", className]), children: link ? linkTemplate : buttonTemplate }));
 };
 exports.MenuButton = MenuButton;

package/dist/pageHeader/pageHeaderButton.d.ts

@@ -2,6 +2,7 @@ import { IButton } from "../button/button";
 import { TButtonIconPosition } from "../textIconButton/textIconButton";
 import { TSvgIconSize } from "../svgIcon/svgIconSize";
 import { IIcon } from "../icons/icon";
+import { TAlignment } from "../absolute/absolute";
 export interface IPageHeaderButton extends Omit<IButton, "onClick" | "icon" | "title"> {
     id: string;
     icon: React.FC<IIcon>;
@@ -9,10 +10,23 @@ export interface IPageHeaderButton extends Omit<IButton, "onClick" | "icon" | "t
     iconPosition?: TButtonIconPosition;
     iconClasses?: string;
     iconSize?: TSvgIconSize;
+    /**
+     * Tooltip content shown only while the button is `disabled`.
+     *
+     * When `disabled` and `disabledTooltip` are both set, the button uses `aria-disabled` instead of the native
+     * `disabled` attribute, so it stays focusable and hoverable and the tooltip can explain why it is unavailable.
+     * In every other case the standard `disabled` attribute is used, and `disabledTooltip` is ignored while the
+     * button is enabled.
+     */
+    disabledTooltip?: React.ReactNode;
     onClick?: (id: string, event: React.MouseEvent) => void;
 }
+interface IPageHeaderButtonInternal {
+    tooltipAlignment?: TAlignment;
+}
 export declare const PageHeaderButtonDisplayName = "PageHeaderButton";
 export declare const PageHeaderButton: {
-    ({ id, children, icon, iconPosition, className, onClick, title, disabled, focusableWhenDisabled, ...restProps }: IPageHeaderButton): import("react/jsx-runtime").JSX.Element;
+    ({ id, children, icon, iconPosition, className, onClick, title, disabledTooltip, tooltipAlignment, disabled, link, ...restProps }: IPageHeaderButton & IPageHeaderButtonInternal): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+export {};

package/dist/pageHeader/pageHeaderButton.js

@@ -15,14 +15,16 @@ exports.PageHeaderButton = exports.PageHeaderButtonDisplayName = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const textIconButton_1 = require("../textIconButton/textIconButton");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const tooltip_1 = require("../tooltip/tooltip");
+const buttonDisabledProps_1 = require("../button/buttonDisabledProps");
 exports.PageHeaderButtonDisplayName = "PageHeaderButton";
 const PageHeaderButton = (_a) => {
-    var { id, children, icon, iconPosition = textIconButton_1.ButtonIconPosition.Start, className = "", onClick, title, disabled, focusableWhenDisabled } = _a, restProps = __rest(_a, ["id", "children", "icon", "iconPosition", "className", "onClick", "title", "disabled", "focusableWhenDisabled"]);
-    const fullClassName = (0, classNames_1.classNames)(["zen-page-header-button", className || ""]);
-    const props = Object.assign(Object.assign({}, restProps), { disabled, 
-        // Defaults on when disabled; pass `focusableWhenDisabled={false}` to opt back into native `disabled`.
-        focusableWhenDisabled: focusableWhenDisabled !== null && focusableWhenDisabled !== void 0 ? focusableWhenDisabled : Boolean(disabled) });
-    return ((0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, Object.assign({ id: id, icon: icon, title: title, iconPosition: iconPosition, className: fullClassName, onClick: onClick ? e => onClick(id, e) : undefined }, props, { children: children })));
+    var { id, children, icon, iconPosition = textIconButton_1.ButtonIconPosition.Start, className = "", onClick, title, disabledTooltip, tooltipAlignment = "bottom", disabled, link } = _a, restProps = __rest(_a, ["id", "children", "icon", "iconPosition", "className", "onClick", "title", "disabledTooltip", "tooltipAlignment", "disabled", "link"]);
+    const tooltip = disabled ? disabledTooltip : undefined;
+    const _b = (0, buttonDisabledProps_1.getButtonDisabledProps)({ disabled, focusable: Boolean(tooltip), link }), { className: disabledClassName } = _b, disabledProps = __rest(_b, ["className"]);
+    const fullClassName = (0, classNames_1.classNames)(["zen-page-header-button", className || "", disabledClassName !== null && disabledClassName !== void 0 ? disabledClassName : ""]);
+    const button = ((0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, Object.assign({ id: id, icon: icon, title: title, iconPosition: iconPosition, className: fullClassName, onClick: onClick ? e => onClick(id, e) : undefined, link: link }, restProps, disabledProps, { children: children })));
+    return tooltip ? ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { trigger: button, alignment: tooltipAlignment, children: tooltip })) : (button);
 };
 exports.PageHeaderButton = PageHeaderButton;
 exports.PageHeaderButton.displayName = exports.PageHeaderButtonDisplayName;

package/dist/tooltip/tooltip.d.ts

@@ -5,11 +5,13 @@ import { TAlignment } from "../absolute/absolute";
 import { IInlineTrigger } from "./components/inlineTrigger";
 export type TooltipSize = "large" | "small" | "auto";
 export type TMobileView = "default" | "mobileSheet";
+interface ITriggerDisabledProps {
+    disabled?: boolean;
+    "aria-disabled"?: boolean | "true" | "false";
+}
 interface ITooltip extends IZenComponentProps {
-    trigger?: ReactElement<PropsWithChildren & {
+    trigger?: ReactElement<PropsWithChildren & ITriggerDisabledProps & {
         onClick?: (e: React.MouseEvent) => void;
-        disabled?: boolean;
-        focusableWhenDisabled?: boolean;
     }>;
     alignment?: TAlignment;
     triggerClassName?: string;

package/dist/tooltip/tooltip.js

@@ -159,12 +159,14 @@ const getInitialDeviceType = () => {
   }
   return deviceType_1.DeviceType.Desktop;
 };
+// A disabled trigger (native `disabled`, or `aria-disabled` when it must stay focusable) never runs its own
+// `onClick`, so the tooltip has to react to the click capture phase instead.
+const isTriggerDisabled = props => Boolean(props === null || props === void 0 ? void 0 : props.disabled) || (props === null || props === void 0 ? void 0 : props["aria-disabled"]) === true || (props === null || props === void 0 ? void 0 : props["aria-disabled"]) === "true";
 const EventWrapper = ({
   children,
   deviceType,
   onKeyDownHandler,
   handleUniversalClick,
-  isTriggerDisabledFocusable,
   setTooltipVisible,
   timerRef,
   timerMouseLeaveRef,
@@ -173,8 +175,9 @@ const EventWrapper = ({
   const isCurrentDeviceDesktop = deviceType === deviceType_1.DeviceType.Desktop;
   const triggerProps = children.props;
   const originalOnClick = triggerProps.onClick;
-  // A disabled-focusable trigger's own `onClick` is a no-op guard, so `composedOnClick` never runs on
-  // mobile — see the `onClickCapture` handling in `mobileEvents` below.
+  // A disabled trigger doesn't run its own `onClick`, so on mobile the tap is handled in the capture phase
+  // instead — see `mobileEvents` below.
+  const isDisabledTrigger = isTriggerDisabled(triggerProps);
   const composedOnClick = (0, react_1.useCallback)(e => {
     // Call original onClick first if it exists
     if (originalOnClick) {
@@ -213,7 +216,7 @@ const EventWrapper = ({
   }, [handleUniversalClick]);
   const mobileEvents = Object.assign({
     onKeyDown: mobileOnKeyDown
-  }, isTriggerDisabledFocusable ? {
+  }, isDisabledTrigger ? {
     onClickCapture: handleUniversalClick
   } : {
     onClick: composedOnClick
@@ -248,7 +251,7 @@ const Tooltip = ({
   const [deviceType, setDeviceType] = (0, react_1.useState)(getInitialDeviceType);
   const isMobile = deviceType === deviceType_1.DeviceType.Mobile;
   const triggerProps = trigger === null || trigger === void 0 ? void 0 : trigger.props;
-  const isTriggerDisabledFocusable = Boolean(triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.disabled) && (triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.focusableWhenDisabled) !== false;
+  const isDisabledTrigger = isTriggerDisabled(triggerProps);
   const tooltipId = (0, react_1.useId)();
   const {
     translate
@@ -279,7 +282,7 @@ const Tooltip = ({
     }
   };
   const handleUniversalClick = (0, react_1.useCallback)(e => {
-    const hasExternalClickHandler = !!(triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onClick) && !isTriggerDisabledFocusable;
+    const hasExternalClickHandler = !!(triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onClick) && !isDisabledTrigger;
     if (deviceType === deviceType_1.DeviceType.Desktop) {
       setTooltipVisible(currentVisible => {
         if (currentVisible) {
@@ -288,14 +291,14 @@ const Tooltip = ({
         return currentVisible;
       });
     } else {
-      if (!isTriggerDisabledFocusable) {
+      if (!isDisabledTrigger) {
         e === null || e === void 0 ? void 0 : e.stopPropagation();
       }
       if (!hasExternalClickHandler) {
         setTooltipVisible(isVisible => !isVisible);
       }
     }
-  }, [deviceType, isTriggerDisabledFocusable, triggerProps]);
+  }, [deviceType, isDisabledTrigger, triggerProps]);
   // Apply `triggerAriaLabel` to a `Tooltip.InlineTrigger` trigger (it has no `ariaLabel` prop
   // of its own); the default info-icon trigger below handles `triggerAriaLabel` separately.
   // An `aria-label` set directly on the `Tooltip.InlineTrigger` element takes priority over
@@ -322,7 +325,6 @@ const Tooltip = ({
     isTooltipVisible: isTooltipVisible,
     onKeyDownHandler: onKeyDownHandler,
     handleUniversalClick: handleUniversalClick,
-    isTriggerDisabledFocusable: isTriggerDisabledFocusable,
     setTooltipVisible: setTooltipVisible,
     timerRef: timerRef,
     timerMouseLeaveRef: timerMouseLeaveRef,

package/esm/button/button.d.ts

@@ -9,7 +9,6 @@ export interface IButton extends IZenComponentProps, IZenGridItem {
     title?: string;
     type?: TButton;
     disabled?: boolean;
-    focusableWhenDisabled?: boolean;
     onClick?: React.MouseEventHandler;
     onBlur?: React.FocusEventHandler;
     onMouseOver?: (e: React.MouseEvent<HTMLElement>) => void;
@@ -28,6 +27,6 @@ export interface IButton extends IZenComponentProps, IZenGridItem {
     dataAnalyticsId?: string;
 }
 export declare const Button: {
-    ({ className, type, disabled, focusableWhenDisabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, name, onBlur, role, ariaLabel, dataAnalyticsId, ...other }: IButton): import("react/jsx-runtime").JSX.Element;
+    ({ className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, name, onBlur, role, ariaLabel, dataAnalyticsId, ...other }: IButton): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/esm/button/button.js

@@ -15,35 +15,18 @@ import { classNames } from "../commonHelpers/classNames/classNames";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { filterGridProps } from "../gridLayout/utils/filterGridProps";
 import { useMobileClassName } from "../utils/theme/useMobileClassName";
-const blockActivation = (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-};
-// Guards on `disabled` alone, not just `focusableWhenDisabled`, so clicks are blocked in JS regardless of
-// CSS. `onKeyDown`/`onKeyUp` stay unguarded — Tooltip needs them.
-const getDisabledGuardedHandlers = (disabled, isFocusableWhenDisabled, onClick, onMouseDown, onMouseUp) => ({
-    onClick: disabled ? blockActivation : onClick,
-    onMouseDown: isFocusableWhenDisabled ? blockActivation : onMouseDown,
-    onMouseUp: isFocusableWhenDisabled ? blockActivation : onMouseUp
-});
-const getButtonClassName = (type, disabled, isFocusableWhenDisabled, mobileOrDriveClasses, className) => {
+export const Button = (_a) => {
+    var { className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, name, onBlur, role, ariaLabel, dataAnalyticsId } = _a, other = __rest(_a, ["className", "type", "disabled", "id", "title", "onClick", "onMouseOver", "onMouseOut", "onMouseDown", "onMouseUp", "onKeyDown", "onKeyUp", "children", "link", "target", "htmlType", "rel", "ref", "name", "onBlur", "role", "ariaLabel", "dataAnalyticsId"]);
     const modifierClassName = type && type !== ButtonType.Secondary ? `zen-button--${type}` : "";
     const disabledClassName = disabled ? "zen-button--disabled" : "";
-    const disabledFocusableClassName = isFocusableWhenDisabled ? "zen-button--disabled-focusable" : "";
-    return classNames(["zen-button", mobileOrDriveClasses, modifierClassName, disabledClassName, disabledFocusableClassName, className !== null && className !== void 0 ? className : ""]);
-};
-export const Button = (_a) => {
-    var { className, type, disabled, focusableWhenDisabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, name, onBlur, role, ariaLabel, dataAnalyticsId } = _a, other = __rest(_a, ["className", "type", "disabled", "focusableWhenDisabled", "id", "title", "onClick", "onMouseOver", "onMouseOut", "onMouseDown", "onMouseUp", "onKeyDown", "onKeyUp", "children", "link", "target", "htmlType", "rel", "ref", "name", "onBlur", "role", "ariaLabel", "dataAnalyticsId"]);
-    const isFocusableWhenDisabled = Boolean(disabled) && Boolean(focusableWhenDisabled);
     const driveClasses = useDriveClassName("zen-button");
     const ariaLabelValue = ariaLabel || title;
     const mobileClasses = useMobileClassName("zen-button");
     const commonArgs = Object.assign(Object.assign(Object.assign({ id,
-        title }, (ariaLabelValue ? { "aria-label": ariaLabelValue } : {})), (dataAnalyticsId ? { "data-analytics-id": dataAnalyticsId } : {})), { className: getButtonClassName(type, disabled, isFocusableWhenDisabled, mobileClasses || driveClasses || "", className) });
-    const { onClick: onClickWithDisabledGuard, onMouseDown: onMouseDownWithDisabledGuard, onMouseUp: onMouseUpWithDisabledGuard } = getDisabledGuardedHandlers(disabled, isFocusableWhenDisabled, onClick, onMouseDown, onMouseUp);
+        title }, (ariaLabelValue ? { "aria-label": ariaLabelValue } : {})), (dataAnalyticsId ? { "data-analytics-id": dataAnalyticsId } : {})), { className: classNames(["zen-button", mobileClasses || driveClasses || "", modifierClassName, disabledClassName, className !== null && className !== void 0 ? className : ""]) });
     if (link) {
-        return (_jsx("a", Object.assign({ role: "link", rel: rel, target: target, href: disabled ? undefined : link, tabIndex: isFocusableWhenDisabled ? 0 : undefined, "aria-disabled": disabled ? true : undefined, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onClick: onClickWithDisabledGuard }, commonArgs, filterGridProps(other), { children: children })));
+        return (_jsx("a", Object.assign({ role: "link", rel: rel, target: target, href: disabled ? undefined : link, "aria-disabled": disabled, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onClick: onClick }, commonArgs, filterGridProps(other), { children: children })));
     }
-    return (_jsx("button", Object.assign({ name: name, onBlur: onBlur, onClick: onClickWithDisabledGuard, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onMouseDown: onMouseDownWithDisabledGuard, onMouseUp: onMouseUpWithDisabledGuard, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ref: ref, type: htmlType, disabled: isFocusableWhenDisabled ? undefined : disabled, "aria-disabled": isFocusableWhenDisabled ? true : undefined, role: role }, commonArgs, filterGridProps(other), { children: children })));
+    return (_jsx("button", Object.assign({ name: name, onBlur: onBlur, onClick: onClick, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ref: ref, type: htmlType, disabled: disabled, role: role }, commonArgs, filterGridProps(other), { children: children })));
 };
 Button.displayName = "Button";

package/esm/button/buttonDisabledProps.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+export declare const BUTTON_DISABLED_CLASS = "zen-button--disabled";
+export declare const BUTTON_DISABLED_FOCUSABLE_CLASS = "zen-button--disabled-focusable";
+export interface IButtonDisabledOptions {
+    disabled?: boolean;
+    /**
+     * Keeps a disabled button in the tab order and hoverable, using `aria-disabled` instead of the native
+     * `disabled` attribute. Has no effect while the button is enabled.
+     */
+    focusable?: boolean;
+    /** The `link` prop of the button, a link without `href` is not tabbable, so it needs an explicit `tabIndex`. */
+    link?: string;
+}
+export interface IButtonDisabledProps {
+    disabled?: boolean;
+    "aria-disabled"?: boolean;
+    tabIndex?: number;
+    className?: string;
+    onClick?: (event: React.SyntheticEvent) => void;
+    onMouseDown?: (event: React.SyntheticEvent) => void;
+    onMouseUp?: (event: React.SyntheticEvent) => void;
+}
+/**
+ * Props that make `Button` (or `TextIconButton`) disabled. `Button` itself only applies them.
+ *
+ * - enabled: `{ disabled }`
+ * - disabled: native `disabled`, the button leaves the tab order
+ * - disabled and `focusable`: `aria-disabled`, activation is blocked, the button stays focusable and hoverable
+ *
+ * `onKeyDown`/`onKeyUp` are left untouched: Tooltip needs them. Enter/Space on a focused button without the native
+ * `disabled` attribute fire a click, which is blocked here.
+ *
+ * The caller merges the returned `className` with its own and wraps the button in whatever explains the state.
+ */
+export declare const getButtonDisabledProps: ({ disabled, focusable, link }: IButtonDisabledOptions) => IButtonDisabledProps;

package/esm/button/buttonDisabledProps.js

@@ -0,0 +1,29 @@
+import { classNames } from "../commonHelpers/classNames/classNames";
+// `button.less` styles these classes: `--disabled-focusable` keeps pointer events so hover/tooltip still work.
+export const BUTTON_DISABLED_CLASS = "zen-button--disabled";
+export const BUTTON_DISABLED_FOCUSABLE_CLASS = "zen-button--disabled-focusable";
+const blockActivation = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+};
+/**
+ * Props that make `Button` (or `TextIconButton`) disabled. `Button` itself only applies them.
+ *
+ * - enabled: `{ disabled }`
+ * - disabled: native `disabled`, the button leaves the tab order
+ * - disabled and `focusable`: `aria-disabled`, activation is blocked, the button stays focusable and hoverable
+ *
+ * `onKeyDown`/`onKeyUp` are left untouched: Tooltip needs them. Enter/Space on a focused button without the native
+ * `disabled` attribute fire a click, which is blocked here.
+ *
+ * The caller merges the returned `className` with its own and wraps the button in whatever explains the state.
+ */
+export const getButtonDisabledProps = ({ disabled, focusable, link }) => {
+    if (!disabled || !focusable) {
+        return { disabled };
+    }
+    const hasLink = Boolean(link);
+    return Object.assign(Object.assign({}, (hasLink ? { disabled: true, tabIndex: 0 } : { "aria-disabled": true })), { 
+        // Button adds `zen-button--disabled` to a disabled link itself.
+        className: classNames([hasLink ? "" : BUTTON_DISABLED_CLASS, BUTTON_DISABLED_FOCUSABLE_CLASS]), onClick: blockActivation, onMouseDown: blockActivation, onMouseUp: blockActivation });
+};

package/esm/header/headerButton.d.ts

@@ -2,6 +2,7 @@ import { IButton } from "../button/button";
 import { TButtonIconPosition } from "../textIconButton/textIconButton";
 import { TSvgIconSize } from "../svgIcon/svgIconSize";
 import { IIcon } from "../icons/icon";
+import { TAlignment } from "../absolute/absolute";
 export interface IHeaderButton extends Omit<IButton, "onClick"> {
     id: string;
     important?: boolean;
@@ -11,10 +12,23 @@ export interface IHeaderButton extends Omit<IButton, "onClick"> {
     iconPosition?: TButtonIconPosition;
     iconClasses?: string;
     iconSize?: TSvgIconSize;
+    /**
+     * Tooltip content shown only while the button is `disabled`.
+     *
+     * When `disabled` and `disabledTooltip` are both set, the button uses `aria-disabled` instead of the native
+     * `disabled` attribute, so it stays focusable and hoverable and the tooltip can explain why it is unavailable.
+     * In every other case the standard `disabled` attribute is used, and `disabledTooltip` is ignored while the
+     * button is enabled.
+     */
+    disabledTooltip?: React.ReactNode;
     onClick?: (id: string, event: React.MouseEvent) => void;
 }
+interface IHeaderButtonInternal {
+    tooltipAlignment?: TAlignment;
+}
 export declare const HeaderButtonDisplayName = "HeaderButton";
 export declare const HeaderButton: {
-    ({ id, children, icon, iconOpen, iconPosition, className, important, onClick, inContextMenu, disabled, focusableWhenDisabled, ...restProps }: IHeaderButton): import("react/jsx-runtime").JSX.Element;
+    ({ id, children, icon, iconOpen, iconPosition, className, important, onClick, inContextMenu, disabledTooltip, tooltipAlignment, disabled, link, ...restProps }: IHeaderButton & IHeaderButtonInternal): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+export {};

package/esm/header/headerButton.js

@@ -13,13 +13,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from "../button/button";
 import { ButtonIconPosition, TextIconButton } from "../textIconButton/textIconButton";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { Tooltip } from "../tooltip/tooltip";
+import { getButtonDisabledProps } from "../button/buttonDisabledProps";
 export const HeaderButtonDisplayName = "HeaderButton";
 export const HeaderButton = (_a) => {
-    var { id, children, icon, iconOpen, iconPosition = ButtonIconPosition.Start, className = "", important, onClick, inContextMenu, disabled, focusableWhenDisabled } = _a, restProps = __rest(_a, ["id", "children", "icon", "iconOpen", "iconPosition", "className", "important", "onClick", "inContextMenu", "disabled", "focusableWhenDisabled"]);
-    const fullClassName = classNames(["zen-header-button", className]);
-    const props = Object.assign(Object.assign({}, restProps), { disabled, "data-important": important ? "1" : "0", 
-        // Defaults on when disabled; pass `focusableWhenDisabled={false}` to opt back into native `disabled`.
-        focusableWhenDisabled: focusableWhenDisabled !== null && focusableWhenDisabled !== void 0 ? focusableWhenDisabled : Boolean(disabled) });
-    return icon ? (_jsx(TextIconButton, Object.assign({ id: id, icon: icon, iconPosition: iconPosition, className: fullClassName, onClick: onClick ? e => onClick(id, e) : undefined }, props, { children: children }))) : (_jsx(Button, Object.assign({ id: id, className: fullClassName, onClick: onClick ? e => onClick(id, e) : undefined }, props, { children: children })));
+    var { id, children, icon, iconOpen, iconPosition = ButtonIconPosition.Start, className = "", important, onClick, inContextMenu, disabledTooltip, tooltipAlignment = "bottom", disabled, link } = _a, restProps = __rest(_a, ["id", "children", "icon", "iconOpen", "iconPosition", "className", "important", "onClick", "inContextMenu", "disabledTooltip", "tooltipAlignment", "disabled", "link"]);
+    const tooltip = disabled ? disabledTooltip : undefined;
+    // Native `disabled` takes a button out of the tab order and blocks hover, so a tooltip could never be reached.
+    // Only a disabled button that has a tooltip to show is kept focusable, via `aria-disabled`.
+    const _b = getButtonDisabledProps({ disabled, focusable: Boolean(tooltip), link }), { className: disabledClassName } = _b, disabledProps = __rest(_b, ["className"]);
+    const fullClassName = classNames(["zen-header-button", className, disabledClassName !== null && disabledClassName !== void 0 ? disabledClassName : ""]);
+    const props = Object.assign(Object.assign(Object.assign({}, restProps), { link, "data-important": important ? "1" : "0" }), disabledProps);
+    const button = icon ? (_jsx(TextIconButton, Object.assign({ id: id, icon: icon, iconPosition: iconPosition, className: fullClassName, onClick: onClick ? e => onClick(id, e) : undefined }, props, { children: children }))) : (_jsx(Button, Object.assign({ id: id, className: fullClassName, onClick: onClick ? e => onClick(id, e) : undefined }, props, { children: children })));
+    return tooltip ? (_jsx(Tooltip, { trigger: button, alignment: tooltipAlignment, children: tooltip })) : (button);
 };
 HeaderButton.displayName = HeaderButtonDisplayName;

package/esm/menu/components/menuButton.js

@@ -10,60 +10,6 @@ import { useDrive } from "../../utils/theme/useDrive";
 import { getMenuButtonState } from "../utils/getMenuButtonState";
 import { isSafeHref } from "../utils/isSafeHref";
 import { getSafeRel } from "../utils/getSafeRel";
-// Templates below drop native `disabled` to stay focusable/hoverable; this guard blocks activation instead.
-const handleDisabledGuardedClick = (e, disabled, id, onClick) => {
-    if (disabled) {
-        e.preventDefault();
-        e.stopPropagation();
-        return;
-    }
-    onClick === null || onClick === void 0 ? void 0 : onClick(id, e);
-};
-// Skip Space-to-activate when disabled, so it doesn't flash `--active` or self-click via `linkEl.click()`.
-const createDisabledGuardedLinkKeyEvents = (disabled) => ({
-    onKeyDown: (e) => {
-        if (disabled || e.key !== " ") {
-            return;
-        }
-        e.preventDefault();
-        const linkEl = e.target;
-        linkEl.dataset.spaceDown = "1";
-        linkEl.classList.add("zen-menu-button__action--active");
-    },
-    onKeyUp: (e) => {
-        if (disabled || e.key !== " ") {
-            return;
-        }
-        e.preventDefault();
-        const linkEl = e.target;
-        linkEl.classList.remove("zen-menu-button__action--active");
-        if (linkEl.dataset.spaceDown) {
-            delete linkEl.dataset.spaceDown;
-            linkEl.click();
-        }
-    }
-});
-const getMenuButtonActionClassName = (hasChildren, hasState, isActive, disabled, destructiveClass, driveClasses) => classNames([
-    "zen-menu-button__action",
-    "zen-button",
-    "zen-caption",
-    hasChildren ? "zen-menu-button__action--has-children" : "",
-    hasState && isActive ? "zen-menu-button__action--active" : "",
-    disabled ? "zen-menu-button__action--disabled" : "",
-    disabled ? "zen-button--disabled" : "",
-    disabled ? "zen-button--disabled-focusable" : "",
-    destructiveClass,
-    driveClasses || ""
-]);
-const getMenuLinkActionClassName = (disabled, destructiveClass, driveClasses) => classNames(["zen-menu-button__action", "zen-caption", disabled ? "zen-menu-button__action--disabled" : "", destructiveClass, driveClasses || ""]);
-// An <a> without `href` isn't tabbable, so `tabIndex="0"` keeps a disabled link item in the tab order.
-const getMenuLinkAccessibilityProps = (disabled, link) => ({
-    href: disabled || !isSafeHref(link) ? undefined : link,
-    tabIndex: disabled ? 0 : undefined,
-    "aria-disabled": disabled
-});
-const getMenuItemRole = (hasState) => (hasState ? "menuitemcheckbox" : "menuitem");
-const getMenuItemAriaChecked = (hasState, isActive) => (hasState ? isActive : undefined);
 const createMenuIcon = (iconComponent, size, className) => iconComponent ? createElement(iconComponent, { size, className }) : null;
 const resolveTarget = (target, iconOpen) => target !== null && target !== void 0 ? target : (iconOpen ? "_blank" : undefined);
 export const MenuButton = ({ id, onClick, hasChildren, disabled, icon, iconOpen, destructive, name, link, target, rel, className = "", active = null, ref, dataAnalyticsId }) => {
@@ -74,10 +20,46 @@ export const MenuButton = ({ id, onClick, hasChildren, disabled, icon, iconOpen,
     const destructiveClass = destructive ? "zen-menu-button__action--destructive" : "";
     const effectiveTarget = resolveTarget(target, iconOpen);
     const ChevronIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
-    const linkEvents = useMemo(() => createDisabledGuardedLinkKeyEvents(disabled), [disabled]);
-    const onClickHandler = useCallback((e) => handleDisabledGuardedClick(e, disabled, id, onClick), [id, onClick, disabled]);
+    const linkEvents = useMemo(() => ({
+        onKeyDown: e => {
+            if (e.key === " ") {
+                e.preventDefault();
+                const linkEl = e.target;
+                linkEl.dataset.spaceDown = "1";
+                linkEl.classList.add("zen-menu-button__action--active");
+            }
+        },
+        onKeyUp: e => {
+            if (e.key === " ") {
+                e.preventDefault();
+                const linkEl = e.target;
+                linkEl.classList.remove("zen-menu-button__action--active");
+                if (linkEl.dataset.spaceDown) {
+                    delete linkEl.dataset.spaceDown;
+                    linkEl.click();
+                }
+            }
+        }
+    }), []);
+    const onClickHandler = useCallback((e) => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(id, e);
+    }, [id, onClick]);
     const iconAfterElement = createMenuIcon(iconOpen ? IconOpen : undefined, iconSize, "zen-menu-button__icon-after");
-    const buttonTemplate = (_jsxs("button", { type: "button", "data-id": id, ref: ref, title: name, className: getMenuButtonActionClassName(hasChildren, hasState, isActive, disabled, destructiveClass, driveMenuButtonActionClasses), role: getMenuItemRole(hasState), onClick: onClickHandler, "aria-disabled": disabled ? true : undefined, "aria-checked": getMenuItemAriaChecked(hasState, isActive), "data-analytics-id": dataAnalyticsId, children: [createMenuIcon(icon, iconSize, classNames(["zen-caption__pre-content", "zen-menu-button__icon"])), _jsx("span", { className: "zen-menu-button__action-text", children: name }), iconAfterElement, !!hasChildren && _jsx(ChevronIcon, { size: iconSize, className: classNames(["zen-caption__pre-content", "zen-menu-button__more-icon"]) })] }));
-    const linkTemplate = (_jsxs("a", Object.assign({ "data-id": id, role: "menuitem", className: getMenuLinkActionClassName(disabled, destructiveClass, driveMenuButtonActionClasses) }, getMenuLinkAccessibilityProps(disabled, link), { onClick: onClickHandler, target: effectiveTarget, rel: getSafeRel(rel, effectiveTarget), "data-analytics-id": dataAnalyticsId }, linkEvents, { children: [createMenuIcon(icon, iconSize, "zen-caption__pre-content"), iconAfterElement ? _jsx("span", { className: "zen-menu-button__action-text", children: name }) : name, iconAfterElement] })));
+    const buttonTemplate = (_jsxs("button", { type: "button", "data-id": id, ref: ref, disabled: !!disabled, title: name, className: classNames([
+            "zen-menu-button__action",
+            "zen-button",
+            "zen-caption",
+            hasChildren ? "zen-menu-button__action--has-children" : "",
+            hasState && isActive ? "zen-menu-button__action--active" : "",
+            destructiveClass,
+            driveMenuButtonActionClasses || ""
+        ]), role: hasState ? "menuitemcheckbox" : "menuitem", onClick: onClickHandler, "aria-checked": hasState ? isActive : undefined, "data-analytics-id": dataAnalyticsId, children: [createMenuIcon(icon, iconSize, classNames(["zen-caption__pre-content", "zen-menu-button__icon"])), _jsx("span", { className: "zen-menu-button__action-text", children: name }), iconAfterElement, !!hasChildren && _jsx(ChevronIcon, { size: iconSize, className: classNames(["zen-caption__pre-content", "zen-menu-button__more-icon"]) })] }));
+    const linkTemplate = (_jsxs("a", Object.assign({ "data-id": id, role: "menuitem", className: classNames([
+            "zen-menu-button__action",
+            "zen-caption",
+            disabled ? "zen-menu-button__action--disabled" : "",
+            destructiveClass,
+            driveMenuButtonActionClasses || ""
+        ]), href: disabled || !isSafeHref(link) ? undefined : link, "aria-disabled": disabled, onClick: onClickHandler, target: effectiveTarget, rel: getSafeRel(rel, effectiveTarget), "data-analytics-id": dataAnalyticsId }, linkEvents, { children: [createMenuIcon(icon, iconSize, "zen-caption__pre-content"), iconAfterElement ? _jsx("span", { className: "zen-menu-button__action-text", children: name }) : name, iconAfterElement] })));
     return (_jsx("li", { role: "presentation", className: classNames(["zen-menu-button", className]), children: link ? linkTemplate : buttonTemplate }));
 };

package/esm/pageHeader/pageHeaderButton.d.ts

@@ -2,6 +2,7 @@ import { IButton } from "../button/button";
 import { TButtonIconPosition } from "../textIconButton/textIconButton";
 import { TSvgIconSize } from "../svgIcon/svgIconSize";
 import { IIcon } from "../icons/icon";
+import { TAlignment } from "../absolute/absolute";
 export interface IPageHeaderButton extends Omit<IButton, "onClick" | "icon" | "title"> {
     id: string;
     icon: React.FC<IIcon>;
@@ -9,10 +10,23 @@ export interface IPageHeaderButton extends Omit<IButton, "onClick" | "icon" | "t
     iconPosition?: TButtonIconPosition;
     iconClasses?: string;
     iconSize?: TSvgIconSize;
+    /**
+     * Tooltip content shown only while the button is `disabled`.
+     *
+     * When `disabled` and `disabledTooltip` are both set, the button uses `aria-disabled` instead of the native
+     * `disabled` attribute, so it stays focusable and hoverable and the tooltip can explain why it is unavailable.
+     * In every other case the standard `disabled` attribute is used, and `disabledTooltip` is ignored while the
+     * button is enabled.
+     */
+    disabledTooltip?: React.ReactNode;
     onClick?: (id: string, event: React.MouseEvent) => void;
 }
+interface IPageHeaderButtonInternal {
+    tooltipAlignment?: TAlignment;
+}
 export declare const PageHeaderButtonDisplayName = "PageHeaderButton";
 export declare const PageHeaderButton: {
-    ({ id, children, icon, iconPosition, className, onClick, title, disabled, focusableWhenDisabled, ...restProps }: IPageHeaderButton): import("react/jsx-runtime").JSX.Element;
+    ({ id, children, icon, iconPosition, className, onClick, title, disabledTooltip, tooltipAlignment, disabled, link, ...restProps }: IPageHeaderButton & IPageHeaderButtonInternal): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+export {};

package/esm/pageHeader/pageHeaderButton.js

@@ -12,13 +12,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ButtonIconPosition, TextIconButton } from "../textIconButton/textIconButton";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { Tooltip } from "../tooltip/tooltip";
+import { getButtonDisabledProps } from "../button/buttonDisabledProps";
 export const PageHeaderButtonDisplayName = "PageHeaderButton";
 export const PageHeaderButton = (_a) => {
-    var { id, children, icon, iconPosition = ButtonIconPosition.Start, className = "", onClick, title, disabled, focusableWhenDisabled } = _a, restProps = __rest(_a, ["id", "children", "icon", "iconPosition", "className", "onClick", "title", "disabled", "focusableWhenDisabled"]);
-    const fullClassName = classNames(["zen-page-header-button", className || ""]);
-    const props = Object.assign(Object.assign({}, restProps), { disabled, 
-        // Defaults on when disabled; pass `focusableWhenDisabled={false}` to opt back into native `disabled`.
-        focusableWhenDisabled: focusableWhenDisabled !== null && focusableWhenDisabled !== void 0 ? focusableWhenDisabled : Boolean(disabled) });
-    return (_jsx(TextIconButton, Object.assign({ id: id, icon: icon, title: title, iconPosition: iconPosition, className: fullClassName, onClick: onClick ? e => onClick(id, e) : undefined }, props, { children: children })));
+    var { id, children, icon, iconPosition = ButtonIconPosition.Start, className = "", onClick, title, disabledTooltip, tooltipAlignment = "bottom", disabled, link } = _a, restProps = __rest(_a, ["id", "children", "icon", "iconPosition", "className", "onClick", "title", "disabledTooltip", "tooltipAlignment", "disabled", "link"]);
+    const tooltip = disabled ? disabledTooltip : undefined;
+    const _b = getButtonDisabledProps({ disabled, focusable: Boolean(tooltip), link }), { className: disabledClassName } = _b, disabledProps = __rest(_b, ["className"]);
+    const fullClassName = classNames(["zen-page-header-button", className || "", disabledClassName !== null && disabledClassName !== void 0 ? disabledClassName : ""]);
+    const button = (_jsx(TextIconButton, Object.assign({ id: id, icon: icon, title: title, iconPosition: iconPosition, className: fullClassName, onClick: onClick ? e => onClick(id, e) : undefined, link: link }, restProps, disabledProps, { children: children })));
+    return tooltip ? (_jsx(Tooltip, { trigger: button, alignment: tooltipAlignment, children: tooltip })) : (button);
 };
 PageHeaderButton.displayName = PageHeaderButtonDisplayName;

package/esm/tooltip/tooltip.d.ts

@@ -5,11 +5,13 @@ import { TAlignment } from "../absolute/absolute";
 import { IInlineTrigger } from "./components/inlineTrigger";
 export type TooltipSize = "large" | "small" | "auto";
 export type TMobileView = "default" | "mobileSheet";
+interface ITriggerDisabledProps {
+    disabled?: boolean;
+    "aria-disabled"?: boolean | "true" | "false";
+}
 interface ITooltip extends IZenComponentProps {
-    trigger?: ReactElement<PropsWithChildren & {
+    trigger?: ReactElement<PropsWithChildren & ITriggerDisabledProps & {
         onClick?: (e: React.MouseEvent) => void;
-        disabled?: boolean;
-        focusableWhenDisabled?: boolean;
     }>;
     alignment?: TAlignment;
     triggerClassName?: string;

package/esm/tooltip/tooltip.js

@@ -110,12 +110,14 @@ const getInitialDeviceType = () => {
   }
   return DeviceType.Desktop;
 };
+// A disabled trigger (native `disabled`, or `aria-disabled` when it must stay focusable) never runs its own
+// `onClick`, so the tooltip has to react to the click capture phase instead.
+const isTriggerDisabled = props => Boolean(props === null || props === void 0 ? void 0 : props.disabled) || (props === null || props === void 0 ? void 0 : props["aria-disabled"]) === true || (props === null || props === void 0 ? void 0 : props["aria-disabled"]) === "true";
 const EventWrapper = ({
   children,
   deviceType,
   onKeyDownHandler,
   handleUniversalClick,
-  isTriggerDisabledFocusable,
   setTooltipVisible,
   timerRef,
   timerMouseLeaveRef,
@@ -124,8 +126,9 @@ const EventWrapper = ({
   const isCurrentDeviceDesktop = deviceType === DeviceType.Desktop;
   const triggerProps = children.props;
   const originalOnClick = triggerProps.onClick;
-  // A disabled-focusable trigger's own `onClick` is a no-op guard, so `composedOnClick` never runs on
-  // mobile — see the `onClickCapture` handling in `mobileEvents` below.
+  // A disabled trigger doesn't run its own `onClick`, so on mobile the tap is handled in the capture phase
+  // instead — see `mobileEvents` below.
+  const isDisabledTrigger = isTriggerDisabled(triggerProps);
   const composedOnClick = useCallback(e => {
     // Call original onClick first if it exists
     if (originalOnClick) {
@@ -164,7 +167,7 @@ const EventWrapper = ({
   }, [handleUniversalClick]);
   const mobileEvents = Object.assign({
     onKeyDown: mobileOnKeyDown
-  }, isTriggerDisabledFocusable ? {
+  }, isDisabledTrigger ? {
     onClickCapture: handleUniversalClick
   } : {
     onClick: composedOnClick
@@ -199,7 +202,7 @@ export const Tooltip = ({
   const [deviceType, setDeviceType] = useState(getInitialDeviceType);
   const isMobile = deviceType === DeviceType.Mobile;
   const triggerProps = trigger === null || trigger === void 0 ? void 0 : trigger.props;
-  const isTriggerDisabledFocusable = Boolean(triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.disabled) && (triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.focusableWhenDisabled) !== false;
+  const isDisabledTrigger = isTriggerDisabled(triggerProps);
   const tooltipId = useId();
   const {
     translate
@@ -230,7 +233,7 @@ export const Tooltip = ({
     }
   };
   const handleUniversalClick = useCallback(e => {
-    const hasExternalClickHandler = !!(triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onClick) && !isTriggerDisabledFocusable;
+    const hasExternalClickHandler = !!(triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onClick) && !isDisabledTrigger;
     if (deviceType === DeviceType.Desktop) {
       setTooltipVisible(currentVisible => {
         if (currentVisible) {
@@ -239,14 +242,14 @@ export const Tooltip = ({
         return currentVisible;
       });
     } else {
-      if (!isTriggerDisabledFocusable) {
+      if (!isDisabledTrigger) {
         e === null || e === void 0 ? void 0 : e.stopPropagation();
       }
       if (!hasExternalClickHandler) {
         setTooltipVisible(isVisible => !isVisible);
       }
     }
-  }, [deviceType, isTriggerDisabledFocusable, triggerProps]);
+  }, [deviceType, isDisabledTrigger, triggerProps]);
   // Apply `triggerAriaLabel` to a `Tooltip.InlineTrigger` trigger (it has no `ariaLabel` prop
   // of its own); the default info-icon trigger below handles `triggerAriaLabel` separately.
   // An `aria-label` set directly on the `Tooltip.InlineTrigger` element takes priority over
@@ -273,7 +276,6 @@ export const Tooltip = ({
     isTooltipVisible: isTooltipVisible,
     onKeyDownHandler: onKeyDownHandler,
     handleUniversalClick: handleUniversalClick,
-    isTriggerDisabledFocusable: isTriggerDisabledFocusable,
     setTooltipVisible: setTooltipVisible,
     timerRef: timerRef,
     timerMouseLeaveRef: timerMouseLeaveRef,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@geotab/zenith",
-    "version": "3.17.0-beta.2",
+    "version": "3.17.0",
     "description": "Zenith components library on React",
     "main": "dist/index.js",
     "types": "esm/index.d.ts",
@@ -156,5 +156,8 @@
         "minimatch@<9": {
             "brace-expansion": "^1.1.18"
         }
+    },
+    "publishConfig": {
+        "access": "public"
     }
 }