@geotab/zenith 3.17.0-beta.1 → 3.17.0

package/README.md

@@ -45,39 +45,36 @@ Now components are ready for usage.
 
 Zenith library provides components defined in Zenith Design System. It includes very basic blocks like colors, icons, font presets, atom components like buttons, checkboxes etc and high order components - header, table, filters bar etc. List of existing components can be found in [Storybook](https://developers.geotab.com/zenith-storybook/index.html).
 
-## Translations
-
-Zenith has English and 32 non-English locale dictionaries, including Arabic (`ar-001`) with right-to-left support. The [translation process guide](./docs/TRANSLATIONS.md) covers adding strings, Tech Content and Localization handoffs, spreadsheet sync, build-time injection, and validation. Read it before adding or changing a user-facing string, reviewing English copy, or running the sync. Locale availability does not imply that every string has a reviewed translation.
-
 ## Change log
 
 ### 3.17.0
 
-- [MYG-138984](https://geotab.atlassian.net/browse/MYG-138984): Add Primary, Destructive, and TertiaryDestructive trigger variants to `Dropdown` / `FilterButton`
-- [MYG-138985](https://geotab.atlassian.net/browse/MYG-138985): Add optional separators below single- and multi-select `Dropdown` items
-- [MYG-138983](https://geotab.atlassian.net/browse/MYG-138983): Add destructive styling to single-select `Dropdown` items
-- [MYG-105567](https://geotab.atlassian.net/browse/MYG-105567): Add `sortSelectedToTop` to float selected `Dropdown` options to the top when opened
-- [MYG-147075](https://geotab.atlassian.net/browse/MYG-147075): Show full single-select `Dropdown` option labels on hover
-- [MYG-147879](https://geotab.atlassian.net/browse/MYG-147879): Add loaded/total counts and an end-of-results message for desktop infinite-scroll tables; improve row-loading announcements
-- [MYG-130553](https://geotab.atlassian.net/browse/MYG-130553): Add progressive loading of nested `Table` rows with a +N more control, plus the `useShowMore` hook and `DEFAULT_SHOW_MORE_CAP` export
-- [MYG-148443](https://geotab.atlassian.net/browse/MYG-148443): Add seven sequential and seven diverging data-visualization color tokens
-- [MYG-129023](https://geotab.atlassian.net/browse/MYG-129023): Support destructive menu items and open-in-new-page indicators, including collapsed `Header` actions
-- [MYG-142469](https://geotab.atlassian.net/browse/MYG-142469): Export `PillBox`, `DEFAULT_MAX_PILLS`, `IPillData`, and `IPillBox` from the package entry point
-- [MYG-139327](https://geotab.atlassian.net/browse/MYG-139327): Add mouse-drag and Shift-click range selection to `Table` and selectable `DataGrid` rows, including expanded nested rows
-- [MYG-142234](https://geotab.atlassian.net/browse/MYG-142234): Add opt-in cross-page Select All exclusions when individual rows or the current-page header are unchecked
-- [MYG-149449](https://geotab.atlassian.net/browse/MYG-149449): Preserve cross-page Select All and existing exclusions during drag and Shift-click range selection; correct exclusion counts, childless nested-row selection, and global selection commands; exclude loading and show-more placeholders from fully loaded selection counts
-- [MYG-148015](https://geotab.atlassian.net/browse/MYG-148015): Make cross-page exclusions opt-in through `selectable.allowExclusions` while preserving the existing selection contract by default; correct selection feedback during reloads and empty-selection bulk actions
-- [MYG-147924](https://geotab.atlassian.net/browse/MYG-147924): Preserve `Table` selection during append loading and refreshes
-- [MYG-143552](https://geotab.atlassian.net/browse/MYG-143552): Keep `Waiting` overlays covering scrollable content, improve spinner positioning, and block keyboard interaction with sibling content while the overlay is visible
-- [MYG-148751](https://geotab.atlassian.net/browse/MYG-148751): Remove special bold styling from the first `Table` / `DataGrid` column header
-- [MYG-113389](https://geotab.atlassian.net/browse/MYG-113389): Reduce form label/control gaps and correct `Dropdown` form-field styling and width
-- [MYG-148954](https://geotab.atlassian.net/browse/MYG-148954): Close `PillExpandable` popovers on user scrolling while ignoring browser scroll-anchoring adjustments
-- [MYG-149705](https://geotab.atlassian.net/browse/MYG-149705): Fix RTL tab keyboard navigation, focus scrolling, and tab/pill/chip/accordion styling
-- [MYG-145500](https://geotab.atlassian.net/browse/MYG-145500): Allow `Tabs` to associate tabs with explicitly named panels through `ariaControls`, including panels outside the default tab layout
-- [MYG-148568](https://geotab.atlassian.net/browse/MYG-148568): Forward ARIA attributes to the appropriate input elements in `DropdownRaw` and `TextInputRaw`
-- [MYG-150227](https://geotab.atlassian.net/browse/MYG-150227): Make `FormLayout` positioning deterministic for fractional and invalid positions
-- [MYG-145929](https://geotab.atlassian.net/browse/MYG-145929): Keep disabled `Button` and related menu/header buttons keyboard-focusable while preventing activation
-- [MYG-148696](https://geotab.atlassian.net/browse/MYG-148696): Improve `PillExpandable` popover focus management and accessible trigger/content relationships
+- Add Primary, Destructive, and TertiaryDestructive trigger variants to `Dropdown` / `FilterButton`
+- Add optional separators below single- and multi-select `Dropdown` items
+- Add destructive styling to single-select `Dropdown` items
+- Add `sortSelectedToTop` to float selected `Dropdown` options to the top when opened
+- Show full single-select `Dropdown` option labels on hover
+- Add loaded/total counts and an end-of-results message for desktop infinite-scroll tables; improve row-loading announcements
+- Add progressive loading of nested `Table` rows with a +N more control, plus the `useShowMore` hook and `DEFAULT_SHOW_MORE_CAP` export
+- Add seven sequential and seven diverging data-visualization color tokens
+- Support destructive menu items and open-in-new-page indicators, including collapsed `Header` actions
+- Export `PillBox`, `DEFAULT_MAX_PILLS`, `IPillData`, and `IPillBox` from the package entry point
+- Add mouse-drag and Shift-click range selection to `Table` and selectable `DataGrid` rows, including expanded nested rows
+- Add opt-in cross-page Select All exclusions when individual rows or the current-page header are unchecked
+- Preserve cross-page Select All and existing exclusions during drag and Shift-click range selection; correct exclusion counts, childless nested-row selection, and global selection commands; exclude loading and show-more placeholders from fully loaded selection counts
+- Make cross-page exclusions opt-in through `selectable.allowExclusions` while preserving the existing selection contract by default; correct selection feedback during reloads and empty-selection bulk actions
+- Preserve `Table` selection during append loading and refreshes
+- Keep `Waiting` overlays covering scrollable content, improve spinner positioning, and block keyboard interaction with sibling content while the overlay is visible
+- Remove special bold styling from the first `Table` / `DataGrid` column header
+- Reduce form label/control gaps and correct `Dropdown` form-field styling and width
+- Close `PillExpandable` popovers on user scrolling while ignoring browser scroll-anchoring adjustments
+- Fix RTL tab keyboard navigation, focus scrolling, and tab/pill/chip/accordion styling
+- Allow `Tabs` to associate tabs with explicitly named panels through `ariaControls`, including panels outside the default tab layout
+- Forward ARIA attributes to the appropriate input elements in `DropdownRaw` and `TextInputRaw`
+- Make `FormLayout` positioning deterministic for fractional and invalid positions
+- Keep disabled `Button` and related menu/header buttons keyboard-focusable while preventing activation
+- Improve `PillExpandable` popover focus management and accessible trigger/content relationships
+- Keep `Waiting` content interactive when `hideOverlay` is enabled while loading
 
 ### 3.16.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/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/dist/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/dist/dropdownRaw/dropdownHelper.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAllyTriggerProps = exports.getSelectedCount = exports.getStringFromAllSelected = exports.getStringFromSelected = exports.checkIsDataProblem = exports.prepareSelectedIdsToItems = exports.compareObjectsArrays = exports.compareStringsArrays = exports.createListDataOptions = exports.createSingleListOptions = exports.applySortSelectedToTop = exports.sortDropdownItemArray = exports.createOptions = exports.isAllItemsHasOneParent = exports.getDataForChange = exports.isEveryItemSelected = exports.isAllChildrenSelected = exports.getListDataWithDisabled = exports.getGroupsTreeItem = void 0;
+exports.getAllyTriggerProps = exports.getSelectedCount = exports.getStringFromAllSelected = exports.getStringFromSelected = exports.checkIsDataProblem = exports.prepareSelectedIdsToItems = exports.compareObjectsArrays = exports.compareStringsArrays = exports.createListDataOptions = exports.createSingleListOptions = exports.applySortSelectedToTop = exports.hasSelectedChild = exports.sortDropdownItemArray = exports.createOptions = exports.isAllItemsHasOneParent = exports.getDataForChange = exports.isEveryItemSelected = exports.isAllChildrenSelected = exports.getListDataWithDisabled = exports.getGroupsTreeItem = void 0;
 exports.prepareComboOptionsForList = prepareComboOptionsForList;
 const groupsHelper_1 = require("../groupsFilterRaw/groupsHelper");
 const stateReducerHelper_1 = require("./stateReducer/stateReducerHelper");
@@ -93,21 +93,44 @@ const sortDropdownItemArray = (arr, sortFn) => {
     return arr;
 };
 exports.sortDropdownItemArray = sortDropdownItemArray;
+/**
+ * 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.
+ */
+const hasSelectedChild = (groupsMap, itemId, selectedSet) => {
+    const group = groupsMap[itemId];
+    return group ? (0, stateReducerHelper_1.getChildList)(group.children).some(child => selectedSet.has(child.id)) : false;
+};
+exports.hasSelectedChild = hasSelectedChild;
 /**
  * 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.
  */
-const applySortSelectedToTop = (items, selectedIds) => {
+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];
 };
 exports.applySortSelectedToTop = applySortSelectedToTop;
 const createSingleListOptions = (stateObj, translate, listItem) => {

package/dist/dropdownRaw/dropdownRaw.js

@@ -1155,20 +1155,36 @@ 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 ? (0, dropdownHelper_1.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 => (0, dropdownHelper_1.hasSelectedChild)(state.groupsMap, item.id, selectedSet);
+          const isDisabled = item => Boolean(item.disabled) && !state.isNestedList;
+          rawItems = (0, dropdownHelper_1.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 = (0, dropdownHelper_1.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 (0, jsx_runtime_1.jsx)(dropdownList_1.DropdownList, {
         onBackButtonClick: handleBackButtonClick,
         onSelectAllClick: isSearchMode ? handleSelectAllInSearch : handleSelectAllClick,

package/dist/header/components/collapsedItemsControl/collapsedItemsControl.js

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

package/dist/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/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, destructive, iconPosition = textIconButton_1.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 = (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;
 }
@@ -4931,8 +4927,8 @@ html:lang(ar) .zen-mobile-sheet__title {
   gap: 1.5rem;
   height: 100%;
 }
-.zen-form-section .zen-form-field-label--top + .zen-form-control {
-  margin-block-start: -1.25rem;
+.zen-form-section .zen-form-field-label--top {
+  margin-block-end: -1.25rem;
 }
 .zen-form-section--desktop.zen-form-section--one-column {
   grid-template-columns: repeat(8, 1fr);

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;