@geotab/zenith 3.17.0-beta.1 → 3.17.0

package/dist/table/table.js

@@ -148,6 +148,7 @@ const useTableChildren_1 = require("./children/useTableChildren");
 const deviceType_1 = require("../commonHelpers/hooks/deviceType");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const getCurrentPageSelection_1 = require("./selectable/utils/getCurrentPageSelection");
+const groupExclusions_1 = require("./selectable/utils/groupExclusions");
 const tableFullscreen_1 = require("./children/tableFullscreen");
 const tableBulkActions_1 = require("./children/tableBulkActions");
 const tablePagination_1 = require("./children/tablePagination");
@@ -235,7 +236,7 @@ const TableInner = ({
   active,
   onClick
 }) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   const isMobile = (0, useMobile_1.useMobile)();
   const {
     translate
@@ -329,15 +330,15 @@ const TableInner = ({
     var _a, _b;
     return (0, useSelectableRows_1.isAllSelection)((_a = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _a === void 0 ? void 0 : _a.all, (_b = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _b === void 0 ? void 0 : _b.selected.length, selectable === null || selectable === void 0 ? void 0 : selectable.allowExclusions);
   }, [(_c = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _c === void 0 ? void 0 : _c.all, selectable === null || selectable === void 0 ? void 0 : selectable.allowExclusions, (_d = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _d === void 0 ? void 0 : _d.selected.length]);
+  const resolvedSelection = (0, react_1.useMemo)(() => (0, groupExclusions_1.resolveGroupExclusions)(entities, selectable), [entities, selectable]);
   const selectionQty = (0, react_1.useMemo)(() => {
-    var _a;
     if (!selectable) {
       return 0;
     }
-    const ids = new Set((_a = selectable.selection) === null || _a === void 0 ? void 0 : _a.selected);
+    const ids = new Set(resolvedSelection === null || resolvedSelection === void 0 ? void 0 : resolvedSelection.selected);
     const base = entities.length > 0 ? entities : loadingEntities;
     return allSelected ? [...(0, getCurrentPageSelection_1.getCurrentPageSelection)(base, selectable)].filter(id => !selectable.allowExclusions || !ids.has(id)).length : ids.size;
-  }, [selectable, entities, loadingEntities, allSelected]);
+  }, [selectable, resolvedSelection, entities, loadingEntities, allSelected]);
   const clearSelection = (0, react_1.useCallback)(() => {
     setSelectMode(false);
     selectable === null || selectable === void 0 ? void 0 : selectable.onSelect({
@@ -363,7 +364,7 @@ const TableInner = ({
     detailPanel,
     footer,
     other
-  } = (0, useTableChildren_1.useTableChildren)(children, isMobile, selectionQty, allSelected, clearSelection, activeId, gridRef, onCloseDetailPanel, isInfinite, entities.length, (selectable === null || selectable === void 0 ? void 0 : selectable.allowExclusions) && ((_e = selectable.selection) === null || _e === void 0 ? void 0 : _e.all) ? new Set(selectable.selection.selected).size : 0, (selectable === null || selectable === void 0 ? void 0 : selectable.strategy) !== "nested" && !(selectable === null || selectable === void 0 ? void 0 : selectable.checkboxDisabled) && !(selectable === null || selectable === void 0 ? void 0 : selectable.checkboxVisible), !!feedEndCallback || !!isLoading);
+  } = (0, useTableChildren_1.useTableChildren)(children, isMobile, selectionQty, allSelected, clearSelection, activeId, gridRef, onCloseDetailPanel, isInfinite, entities.length, (selectable === null || selectable === void 0 ? void 0 : selectable.allowExclusions) && (resolvedSelection === null || resolvedSelection === void 0 ? void 0 : resolvedSelection.all) ? new Set(resolvedSelection.selected).size + ((_f = (_e = resolvedSelection.excludedGroupIds) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0) : 0, (selectable === null || selectable === void 0 ? void 0 : selectable.strategy) !== "nested" && !(selectable === null || selectable === void 0 ? void 0 : selectable.checkboxDisabled) && !(selectable === null || selectable === void 0 ? void 0 : selectable.checkboxVisible), !!feedEndCallback || !!isLoading);
   const hasDetailPanel = !!detailPanel;
   const shouldEnableRowClick = hasDetailPanel || !!onClick;
   const activeIdForRow = shouldEnableRowClick ? activeId : undefined;

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/dataGrid/withSelectableRows/components/bulkActions/bulkActions.d.ts

@@ -12,7 +12,7 @@ export interface IBulkActionsProps extends IZenComponentProps {
      * even when `selected` is 0 (i.e., cross-page "select all" is active).
      */
     allSelected?: boolean;
-    /** Show a selection label without a count when the selected total is unknown. */
+    /** The selection spans unloaded rows and its total is not available. */
     selectionCountUnknown?: boolean;
     onClearSelection: () => void;
     onSelectAll?: () => void;

package/esm/dropdownRaw/dropdownHelper.d.ts

@@ -12,12 +12,28 @@ export declare const isAllItemsHasOneParent: (listData: IDropdownRawItem[], chil
 export declare function prepareComboOptionsForList(actionListData: Set<string>, translate: (s: string) => string, options: IDropdownRawItem[], getSelectedFn: () => string[], getSelectedChildFn: (optionId: any) => string[], isFlatList: boolean, getTitle?: (itemId: string) => string, isAllSelected?: boolean): ICheckboxListWithActionOption[];
 export declare const createOptions: (stateObj: IDropdownState, translate: (s: string) => string, listItem: IDropdownRawItem[], isAllSelected?: boolean) => ICheckboxListWithActionOption[];
 export declare const sortDropdownItemArray: (arr: IDropdownRawItem[], sortFn?: (a: IDropdownRawItem, b: IDropdownRawItem) => number) => IDropdownRawItem[];
+/**
+ * An item is half selected when at least one of its direct children is selected — the state its checkbox
+ * shows as indeterminate (see `prepareComboOptionsForList`). `selectedSet` is passed in so the sort can use
+ * its own snapshot of the selection instead of the live one.
+ */
+export declare const hasSelectedChild: (groupsMap: IDropdownState["groupsMap"], itemId: string, selectedSet: Set<string>) => boolean;
+interface ISortSelectedToTopOptions {
+    /** Items that count as selected although their own id is not, e.g. a half selected parent. */
+    isPartiallySelected?: (item: IDropdownRawItem) => boolean;
+    /** Disabled items cannot be toggled, so they follow the selectable ones. */
+    isDisabled?: (item: IDropdownRawItem) => boolean;
+}
 /**
  * Floats selected items to the top of the list while preserving the relative order within each
- * group (selected and unselected). When `selectedIds` is empty the original array is returned
- * unchanged (no allocation). Uses a single-pass partition to avoid traversing `items` twice.
+ * group. The order is: selected items that can be toggled, then selected items that are disabled
+ * (so a newly selected item is never pushed down by disabled ones), then everything else. An item
+ * counts as selected when its own id is in `selectedIds` or when `isPartiallySelected` returns true
+ * for it, so half selected items sit with the selected ones. When `selectedIds` is empty the original
+ * array is returned unchanged (no allocation). Uses a single-pass partition to avoid traversing
+ * `items` more than once.
  */
-export declare const applySortSelectedToTop: (items: IDropdownRawItem[], selectedIds: string[]) => IDropdownRawItem[];
+export declare const applySortSelectedToTop: (items: IDropdownRawItem[], selectedIds: string[], { isPartiallySelected, isDisabled }?: ISortSelectedToTopOptions) => IDropdownRawItem[];
 export declare const createSingleListOptions: (stateObj: IDropdownState, translate: (s: string) => string, listItem: IDropdownRawItem[]) => {
     destructive: boolean | undefined;
     divider?: boolean | undefined;
@@ -56,3 +72,4 @@ export declare const getAllyTriggerProps: (allyPattern: "selectOnlyCombobox" | "
     readonly role: "button";
     readonly "aria-haspopup": "menu";
 };
+export {};

package/esm/dropdownRaw/dropdownHelper.js

@@ -81,21 +81,43 @@ export const sortDropdownItemArray = (arr, sortFn) => {
     }
     return arr;
 };
+/**
+ * An item is half selected when at least one of its direct children is selected — the state its checkbox
+ * shows as indeterminate (see `prepareComboOptionsForList`). `selectedSet` is passed in so the sort can use
+ * its own snapshot of the selection instead of the live one.
+ */
+export const hasSelectedChild = (groupsMap, itemId, selectedSet) => {
+    const group = groupsMap[itemId];
+    return group ? getChildList(group.children).some(child => selectedSet.has(child.id)) : false;
+};
 /**
  * Floats selected items to the top of the list while preserving the relative order within each
- * group (selected and unselected). When `selectedIds` is empty the original array is returned
- * unchanged (no allocation). Uses a single-pass partition to avoid traversing `items` twice.
+ * group. The order is: selected items that can be toggled, then selected items that are disabled
+ * (so a newly selected item is never pushed down by disabled ones), then everything else. An item
+ * counts as selected when its own id is in `selectedIds` or when `isPartiallySelected` returns true
+ * for it, so half selected items sit with the selected ones. When `selectedIds` is empty the original
+ * array is returned unchanged (no allocation). Uses a single-pass partition to avoid traversing
+ * `items` more than once.
  */
-export const applySortSelectedToTop = (items, selectedIds) => {
+export const applySortSelectedToTop = (items, selectedIds, { isPartiallySelected, isDisabled } = {}) => {
     if (!selectedIds.length)
         return items;
     const selectedSet = new Set(selectedIds);
     const selected = [];
+    const selectedDisabled = [];
     const unselected = [];
     for (const item of items) {
-        (selectedSet.has(item.id) ? selected : unselected).push(item);
+        if (!selectedSet.has(item.id) && !(isPartiallySelected === null || isPartiallySelected === void 0 ? void 0 : isPartiallySelected(item))) {
+            unselected.push(item);
+        }
+        else if (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(item)) {
+            selectedDisabled.push(item);
+        }
+        else {
+            selected.push(item);
+        }
     }
-    return [...selected, ...unselected];
+    return [...selected, ...selectedDisabled, ...unselected];
 };
 export const createSingleListOptions = (stateObj, translate, listItem) => {
     const preparedOptions = listItem && listItem.length

package/esm/dropdownRaw/dropdownRaw.js

@@ -8,7 +8,7 @@ import { getInitialState, stateReducer, ROOT_GROUP_ID } from "./stateReducer/sta
 import { StateActionType } from "./stateReducer/stateActionType";
 import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
 import { useEscape } from "../commonHelpers/hooks/useEscape";
-import { applySortSelectedToTop, checkIsDataProblem, compareObjectsArrays, compareStringsArrays, createListDataOptions, getDataForChange, getListDataWithDisabled, getSelectedCount, getStringFromAllSelected, getStringFromSelected, isAllChildrenSelected, isAllItemsHasOneParent, isEveryItemSelected, prepareSelectedIdsToItems, sortDropdownItemArray } from "./dropdownHelper";
+import { applySortSelectedToTop, hasSelectedChild, checkIsDataProblem, compareObjectsArrays, compareStringsArrays, createListDataOptions, getDataForChange, getListDataWithDisabled, getSelectedCount, getStringFromAllSelected, getStringFromSelected, isAllChildrenSelected, isAllItemsHasOneParent, isEveryItemSelected, prepareSelectedIdsToItems, sortDropdownItemArray } from "./dropdownHelper";
 import { DropdownTrigger } from "./dropdownTrigger";
 import { isFocusable } from "../dialog/dialogHelpers";
 import { useLanguage } from "../utils/localization/useLanguage";
@@ -1147,20 +1147,36 @@ export const DropdownRaw = props => {
         // hasApplyButton=true: uses globalSelectedIds (committed selection) — reordering
         //   only takes effect after the user clicks "Apply".
         const idsForSort = hasApplyButton ? state.globalSelectedIds : state.sortedTopSnapshot;
-        const floated = sortSelectedToTop ? applySortSelectedToTop(children, idsForSort) : children;
-        rawItems = floated.slice(0, listLimit);
         if (sortSelectedToTop) {
+          // Half selected items (a direct child is selected, shown as indeterminate) float with the selected ones.
+          // Disabled selected items follow the selectable ones; in a nested list `disabled` is not enforced (see createOptions).
           const selectedSet = new Set(idsForSort);
-          pinnedCount = rawItems.filter(item => selectedSet.has(item.id)).length;
+          const isPartiallySelected = item => hasSelectedChild(state.groupsMap, item.id, selectedSet);
+          const isDisabled = item => Boolean(item.disabled) && !state.isNestedList;
+          rawItems = applySortSelectedToTop(children, idsForSort, {
+            isPartiallySelected,
+            isDisabled
+          }).slice(0, listLimit);
+          pinnedCount = rawItems.filter(item => selectedSet.has(item.id) || isPartiallySelected(item)).length;
+        } else {
+          rawItems = children.slice(0, listLimit);
         }
       }
       const listData = createListDataOptions(state, translate, rawItems, multiselect, currentAllSelected);
       // Explicit bounds check (rather than relying on CheckboxListWithAction's own
       // `ind < optionsArr.length - 1` guard) keeps the "don't draw a trailing divider"
       // intent local to where the boundary is computed.
-      const currentListData = multiselect && sortSelectedToTop && pinnedCount > 0 && pinnedCount < listData.length ? listData.map((opt, ind) => ind === pinnedCount - 1 ? Object.assign(Object.assign({}, opt), {
-        divider: true
-      }) : opt) : listData;
+      // Floated items drop their own dividers, so the boundary divider is the only one drawn between them and the rest.
+      const currentListData = multiselect && sortSelectedToTop && pinnedCount > 0 && pinnedCount < listData.length ? listData.map((opt, ind) => {
+        if (ind === pinnedCount - 1) {
+          return Object.assign(Object.assign({}, opt), {
+            divider: true
+          });
+        }
+        return ind < pinnedCount && opt.divider ? Object.assign(Object.assign({}, opt), {
+          divider: false
+        }) : opt;
+      }) : listData;
       return _jsx(DropdownList, {
         onBackButtonClick: handleBackButtonClick,
         onSelectAllClick: isSearchMode ? handleSelectAllInSearch : handleSelectAllClick,

package/esm/header/components/collapsedItemsControl/collapsedItemsControl.js

@@ -102,7 +102,7 @@ export const PageToolbarCollapsedItemsControl = ({
         rel: child.props.rel,
         icon: child.props.icon,
         iconOpen: child.props.iconOpen,
-        destructive: child.props.destructive
+        destructive: child.props.type === ButtonType.Destructive || child.props.type === ButtonType.TertiaryDestructive
       });
       items.push(el);
     }

package/esm/header/headerButton.d.ts

@@ -2,20 +2,33 @@ 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;
     inContextMenu?: boolean;
     icon?: React.FC<IIcon>;
     iconOpen?: boolean;
-    destructive?: boolean;
     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, destructive, 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, destructive, iconPosition = ButtonIconPosition.Start, className = "", important, onClick, inContextMenu, disabled, focusableWhenDisabled } = _a, restProps = __rest(_a, ["id", "children", "icon", "iconOpen", "destructive", "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 }));
 };