@geotab/zenith 3.17.0-beta.1 → 3.17.0

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

@@ -420,6 +420,7 @@ const PillExpandableBase = ({
 }) => {
   const popupId = useId();
   const descriptionId = useId();
+  const counterId = useId();
   const [descriptionElement, setDescriptionElement] = useState(null);
   const isDrive = useDrive();
   const [isMobile, setIsMobile] = useState(false);
@@ -588,10 +589,11 @@ const PillExpandableBase = ({
           errorHandler: errorHandler,
           isBeta: isBeta,
           isMobile: isMobile,
-          descriptionId: isPopupOpen && descriptionElement ? descriptionId : undefined,
+          descriptionId: [uniqueChildren && !hideCounterNumber ? counterId : undefined, isPopupOpen && descriptionElement ? descriptionId : undefined].filter(Boolean).join(" ") || undefined,
           ariaHasPopup: "dialog",
           dataAnalyticsId: dataAnalyticsId
         }), uniqueChildren && _jsx(PillExpandableSimple, {
+          id: counterId,
           icon: secondaryIcon || effectiveIcon,
           text: hideCounterNumber ? "" : counterText,
           includeExpandIcon: false,

package/esm/pillExpandable/pillExpandableSimple.d.ts

@@ -2,6 +2,7 @@ import { FC, RefObject } from "react";
 import { IPillExpandableBase, TPillType } from "./pillExpandable";
 import { IIcon } from "../icons/icon";
 interface IPillExpandableSimple extends IPillExpandableBase {
+    id?: string;
     includeExpandIcon?: boolean;
     expanded?: boolean;
     onExpand?: () => void;
@@ -15,7 +16,7 @@ interface IPillExpandableSimple extends IPillExpandableBase {
     type?: TPillType;
 }
 export declare const PillExpandableSimple: {
-    ({ onExpand, text, expanded, includeExpandIcon, type, icon, isBeta, isMobile, ref, className, descriptionId, ariaHasPopup, isDecorative, dataAnalyticsId }: IPillExpandableSimple): import("react/jsx-runtime").JSX.Element;
+    ({ id, onExpand, text, expanded, includeExpandIcon, type, icon, isBeta, isMobile, ref, className, descriptionId, ariaHasPopup, isDecorative, dataAnalyticsId }: IPillExpandableSimple): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/esm/pillExpandable/pillExpandableSimple.js

@@ -5,7 +5,7 @@ import { IconChevronTop } from "../icons/iconChevronTop";
 import { IconChevronBottom } from "../icons/iconChevronBottom";
 import { IconException } from "../icons/iconException";
 import { classNames } from "../commonHelpers/classNames/classNames";
-export const PillExpandableSimple = ({ onExpand, text, expanded, includeExpandIcon = true, type = "warning", icon = IconException, isBeta, isMobile, ref, className, descriptionId, ariaHasPopup, isDecorative, dataAnalyticsId
+export const PillExpandableSimple = ({ id, onExpand, text, expanded, includeExpandIcon = true, type = "warning", icon = IconException, isBeta, isMobile, ref, className, descriptionId, ariaHasPopup, isDecorative, dataAnalyticsId
 // eslint-disable-next-line complexity
  }) => {
     const iconDriveClassName = useDriveClassName("icon");
@@ -34,7 +34,7 @@ export const PillExpandableSimple = ({ onExpand, text, expanded, includeExpandIc
                         size: iconSize
                     }) }) }))] }));
     if (isDecorative) {
-        return (_jsx("span", { className: classNames([
+        return (_jsx("span", { id: id, className: classNames([
                 "zen-status-pill__container",
                 `zen-status-pill__container--${type}`,
                 containerDriveClassName || "",

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

@@ -15,6 +15,12 @@ export interface ISelectionValue {
      * Consumers opting in must resolve the effective selection before running bulk actions.
      */
     selected: string[];
+    /**
+     * Excluded nested groups, including children that have not loaded yet. Only used with
+     * allowExclusions and all: true. Preserve this field when saving controlled selection;
+     * resolve these groups as well as selected before running a bulk action.
+     */
+    excludedGroupIds?: string[];
 }
 /**
  * One checkbox row in the order it is rendered. Expanded nested rows are part of this list,

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

@@ -4,7 +4,7 @@ import { IDragSelectionRow } from "./interfaces";
  * @param rows every checkbox row in render order, expanded nested rows included, so ranges can
  * span nesting levels.
  */
-export declare const useDragSelection: (rows: IDragSelectionRow[], gridRef: RefObject<HTMLElement | null> | undefined, onBatchSelect: (rangeIds: string[], select: boolean, base: Set<string>) => void, getBaseSelection: () => Set<string>, isSelectable: (row: IDragSelectionRow) => boolean, isEnabled: boolean) => {
+export declare const useDragSelection: <TSelection = Set<string>>(rows: IDragSelectionRow[], gridRef: RefObject<HTMLElement | null> | undefined, onBatchSelect: (rangeIds: string[], select: boolean, base: TSelection) => void, getBaseSelection: () => TSelection, isSelectable: (row: IDragSelectionRow) => boolean, isEnabled: boolean) => {
     onCheckboxMouseDown: (id: string, checked: boolean, e: ReactMouseEvent) => void;
     suppressNextChangeRef: RefObject<boolean>;
 };

package/esm/table/selectable/useDragSelection.js

@@ -19,7 +19,7 @@ export const useDragSelection = (rows, gridRef, onBatchSelect, getBaseSelection,
     isEnabledRef.current = isEnabled;
     const anchorIdRef = useRef(null);
     const anchorSelectRef = useRef(true);
-    const baseSelectedRef = useRef(new Set());
+    const baseSelectedRef = useRef(null);
     const isDraggingRef = useRef(false);
     const movedRef = useRef(false);
     const lastResultKeyRef = useRef("");
@@ -28,7 +28,7 @@ export const useDragSelection = (rows, gridRef, onBatchSelect, getBaseSelection,
     const attachedGridElementRef = useRef(null);
     const emitRange = useCallback((currentId) => {
         const anchorId = anchorIdRef.current;
-        if (anchorId === null) {
+        if (anchorId === null || baseSelectedRef.current === null) {
             return;
         }
         const range = getRangeIds(rowsRef.current, anchorId, currentId, isSelectableRef.current);
@@ -82,7 +82,7 @@ export const useDragSelection = (rows, gridRef, onBatchSelect, getBaseSelection,
         (_c = attachedGridElementRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener("scroll", onScroll);
         (_d = attachedGridElementRef.current) === null || _d === void 0 ? void 0 : _d.classList.remove(DRAG_CLASS);
         attachedGridElementRef.current = null;
-    }, [onMouseMove, onScroll]); // eslint-disable-line react-hooks/exhaustive-deps
+    }, [onMouseMove, onScroll]);
     const onCheckboxMouseDown = useCallback((id, checked, e) => {
         var _a, _b, _c, _d, _e;
         // Right-click between drag-end and the trailing click must not clear suppression.
@@ -92,7 +92,7 @@ export const useDragSelection = (rows, gridRef, onBatchSelect, getBaseSelection,
         if (!isEnabledRef.current || e.button !== 0) {
             return;
         }
-        if (e.shiftKey && anchorIdRef.current !== null) {
+        if (e.shiftKey && anchorIdRef.current !== null && baseSelectedRef.current !== null) {
             e.preventDefault();
             const anchorId = anchorIdRef.current;
             const anchorInList = rowsRef.current.some(row => row.id === anchorId);

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

@@ -10,6 +10,8 @@ export interface ISelectableRowsOptions<T extends IRowEntity<N>, N extends IEnti
     onSelect: (selection: ISelectionValue) => void;
     /** Preserve cross-page Select All using excluded IDs. Consumers must resolve exclusions before running bulk actions. Defaults to false. */
     allowExclusions?: boolean;
+    /** Changes when the dataset represented by the selection is replaced, rather than paged. */
+    selectionDatasetId?: string | number;
     checkboxDisabled?: (entity: T | N, isNested?: boolean) => boolean;
     checkboxVisible?: (entity: T | N, isNested?: boolean) => boolean;
     checkboxInHeader?: boolean;

package/esm/table/selectable/useSelectableRows.js

@@ -1,7 +1,7 @@
 import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable complexity */
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { SelectionState } from "./interfaces";
 import { CheckboxCell } from "../../dataGrid/columns/checkboxColumn/checkboxCell";
 import { SelectableHeader } from "./selectableHeader";
@@ -13,7 +13,8 @@ import { isRowChecked } from "./utils/isRowChecked";
 import { getCurrentPageSelection } from "./utils/getCurrentPageSelection";
 import { useDragSelection } from "./useDragSelection";
 import { getDragSelectionRows } from "./utils/getDragSelectionRows";
-import { isShowMoreRow } from "../../commonHelpers/showMoreRow";
+import { getChildrenForSelection, isShowMoreRow } from "../../commonHelpers/showMoreRow";
+import { checkExcludedRow, createExcludedSelection, resolveGroupExclusions } from "./utils/groupExclusions";
 injectString("cs", "Select all", "Vybrat v\u0161e");
 injectString("da-DK", "Select all", "V\xE6lg alle");
 injectString("de", "Select all", "Alle ausw\xE4hlen");
@@ -88,13 +89,14 @@ export const isAllSelection = (all, selectedCount, allowExclusions) => !!all &&
 export const SelectableWrapperName = "Selectable";
 // Infinite scroll has no pages, so the header checkbox always means "select all" (never current page).
 const resolveCheckboxEmitsCurrentPage = (isInfinite, checkboxSelectsCurrentPage, turnOffSelectAll) => isInfinite ? false : checkboxSelectsCurrentPage !== null && checkboxSelectsCurrentPage !== void 0 ? checkboxSelectsCurrentPage : turnOffSelectAll;
-const getSelectionMenuState = (allSelected, selections, pageState) => allSelected ? selections.size === 0 ? SelectionState.All : SelectionState.Partial : pageState;
 export const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMode, selectable, isInfinite = false, gridRef, expandedRows) => {
   var _a;
   const {
     translate
   } = useLanguage();
-  const selections = useMemo(() => getSelections(selectable === null || selectable === void 0 ? void 0 : selectable.selection), [selectable === null || selectable === void 0 ? void 0 : selectable.selection]);
+  const previousDatasetId = useRef(selectable === null || selectable === void 0 ? void 0 : selectable.selectionDatasetId);
+  const datasetWasReplaced = (selectable === null || selectable === void 0 ? void 0 : selectable.selectionDatasetId) !== undefined && previousDatasetId.current !== undefined && selectable.selectionDatasetId !== previousDatasetId.current;
+  const appliedSelections = useMemo(() => getSelections(selectable === null || selectable === void 0 ? void 0 : selectable.selection), [selectable === null || selectable === void 0 ? void 0 : selectable.selection]);
   const [state, setState] = useState(SelectionState.None);
   const checkboxVisible = useMemo(() => {
     const base = (selectable === null || selectable === void 0 ? void 0 : selectable.checkboxVisible) ? selectable.checkboxVisible : (selectable === null || selectable === void 0 ? void 0 : selectable.strategy) !== "nested" ? (_, isNested) => !isNested : () => true;
@@ -110,16 +112,19 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
     }
     if (selectable === null || selectable === void 0 ? void 0 : selectable.selectionLimit) {
       const limit = selectable.selectionLimit;
-      return entity => selections.size >= limit && !selections.has(entity.id);
+      return entity => appliedSelections.size >= limit && !appliedSelections.has(entity.id);
     }
     return () => false;
-  }, [selectable, selections]);
+  }, [selectable, appliedSelections]);
   // `checkRow` and `getCurrentPageSelection` read callbacks off `selectable`, so hand them the
   // wrapped ones to apply the same exclusions.
   const wrappedSelectable = useMemo(() => selectable ? Object.assign(Object.assign({}, selectable), {
     checkboxVisible,
     checkboxDisabled
   }) : undefined, [selectable, checkboxVisible, checkboxDisabled]);
+  const resolvedSelection = useMemo(() => resolveGroupExclusions(entities, wrappedSelectable, datasetWasReplaced), [datasetWasReplaced, entities, wrappedSelectable]);
+  const selections = useMemo(() => getSelections(resolvedSelection), [resolvedSelection]);
+  const excludedGroupIds = useMemo(() => new Set((selectable === null || selectable === void 0 ? void 0 : selectable.allowExclusions) && selectable.strategy === "nested" && (resolvedSelection === null || resolvedSelection === void 0 ? void 0 : resolvedSelection.all) ? resolvedSelection.excludedGroupIds : []), [selectable === null || selectable === void 0 ? void 0 : selectable.allowExclusions, selectable === null || selectable === void 0 ? void 0 : selectable.strategy, resolvedSelection === null || resolvedSelection === void 0 ? void 0 : resolvedSelection.all, resolvedSelection === null || resolvedSelection === void 0 ? void 0 : resolvedSelection.excludedGroupIds]);
   const checkboxPlaceholder = useMemo(() => {
     if ((selectable === null || selectable === void 0 ? void 0 : selectable.checkboxPlaceholder) !== undefined) {
       return selectable.checkboxPlaceholder;
@@ -134,21 +139,21 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
     var _a;
     return isAllSelection((_a = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _a === void 0 ? void 0 : _a.all, selections.size, selectable === null || selectable === void 0 ? void 0 : selectable.allowExclusions);
   }, [(_a = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _a === void 0 ? void 0 : _a.all, selectable === null || selectable === void 0 ? void 0 : selectable.allowExclusions, selections.size]);
-  const selectableState = useMemo(() => calculateSelectionState(entities, selections, isAllSelected, checkboxVisible, checkboxDisabled, selectable === null || selectable === void 0 ? void 0 : selectable.strategy), [checkboxDisabled, checkboxVisible, entities, isAllSelected, selections, selectable === null || selectable === void 0 ? void 0 : selectable.strategy]);
-  const selectionMenuState = getSelectionMenuState(isAllSelected, selections, selectableState);
+  const selectableState = useMemo(() => calculateSelectionState(entities, new Set([...selections, ...excludedGroupIds]), isAllSelected, checkboxVisible, checkboxDisabled, selectable === null || selectable === void 0 ? void 0 : selectable.strategy), [checkboxDisabled, checkboxVisible, entities, isAllSelected, selections, excludedGroupIds, selectable === null || selectable === void 0 ? void 0 : selectable.strategy]);
   const firstColumnId = useMemo(() => columns.length > 0 ? columns[0].id : null, [columns]);
   useEffect(() => {
     if (selectable && selectable.selection) {
-      const newSelections = new Set(selectable.selection.selected);
-      const newState = calculateSelectionState(entities, newSelections, isAllSelected, checkboxVisible, checkboxDisabled, selectable.strategy);
-      setState(newState);
+      setState(selectableState);
     }
-  }, [checkboxDisabled, checkboxVisible, entities, selectable, setSelectMode, selectable === null || selectable === void 0 ? void 0 : selectable.strategy, isAllSelected]);
+  }, [selectable, selectableState]);
   const getNewSelection = useCallback((id, checked) => {
     if (isAllSelected && !(selectable === null || selectable === void 0 ? void 0 : selectable.allowExclusions)) {
       const included = getCurrentPageSelection(entities, wrappedSelectable);
       checkRow(included, wrappedSelectable, entities, id, checked);
-      return included;
+      return {
+        selected: included,
+        groups: new Set()
+      };
     }
     if (isAllSelected) {
       // MYG-142234: `selections` holds the ids excluded from the "all" selection.
@@ -156,22 +161,29 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
       // exclusion set - it must never be rebuilt from `entities` (the current page),
       // otherwise every other page's rows would silently fall out of the selection.
       const excluded = new Set(selections);
-      checkRow(excluded, wrappedSelectable, entities, id, !checked);
-      return excluded;
+      const groups = new Set(excludedGroupIds);
+      checkExcludedRow(excluded, groups, wrappedSelectable, entities, id, checked);
+      return {
+        selected: excluded,
+        groups
+      };
     }
     checkRow(selections, wrappedSelectable, entities, id, checked);
-    return selections;
-  }, [entities, selectable, wrappedSelectable, selections, isAllSelected]);
+    return {
+      selected: selections,
+      groups: new Set()
+    };
+  }, [entities, selectable, wrappedSelectable, selections, excludedGroupIds, isAllSelected]);
   const onSelectListener = useCallback((id, checked) => {
     const wasAllSelected = !!(selectable === null || selectable === void 0 ? void 0 : selectable.allowExclusions) && isAllSelected;
-    const newSelection = getNewSelection(id, checked);
+    const {
+      selected: newSelection,
+      groups
+    } = getNewSelection(id, checked);
     const newState = calculateSelectionState(entities, newSelection, wasAllSelected, checkboxVisible, checkboxDisabled, selectable === null || selectable === void 0 ? void 0 : selectable.strategy);
     // MYG-142234: once selection spans "all" pages, unchecking a row must keep `all: true`
     // and only record the exclusion - it must not collapse to the current page's ids.
-    const newValue = wasAllSelected ? {
-      selected: [...newSelection],
-      all: true
-    } : {
+    const newValue = wasAllSelected ? createExcludedSelection(newSelection, groups) : {
       selected: [...newSelection],
       all: newState === SelectionState.All
     };
@@ -180,24 +192,43 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
     setSelectMode(newValue.all || newValue.selected.length > 0);
   }, [checkboxDisabled, checkboxVisible, entities, selectable, setSelectMode, setState, getNewSelection, isAllSelected]);
   const onBatchSelect = useCallback((rangeIds, select, base) => {
-    const result = new Set(base);
+    const result = new Set(base.selected);
+    const groups = new Set(base.excludedGroupIds);
     const limit = selectable === null || selectable === void 0 ? void 0 : selectable.selectionLimit;
     const wasAllSelected = !!(selectable === null || selectable === void 0 ? void 0 : selectable.allowExclusions) && isAllSelected;
     for (const id of rangeIds) {
       if (!wasAllSelected && select && limit !== undefined && result.size >= limit) {
         break;
       }
-      checkRow(result, wrappedSelectable, entities, id, wasAllSelected ? !select : select);
+      if (wasAllSelected) {
+        checkExcludedRow(result, groups, wrappedSelectable, entities, id, select);
+      } else {
+        checkRow(result, wrappedSelectable, entities, id, select);
+      }
     }
     const newState = calculateSelectionState(entities, result, wasAllSelected, checkboxVisible, checkboxDisabled, selectable === null || selectable === void 0 ? void 0 : selectable.strategy);
-    const newValue = {
+    const newValue = wasAllSelected ? createExcludedSelection(result, groups) : {
       selected: [...result],
-      all: wasAllSelected || newState === SelectionState.All
+      all: newState === SelectionState.All
     };
     setState(newState);
     selectable === null || selectable === void 0 ? void 0 : selectable.onSelect(newValue);
     setSelectMode(newValue.all || newValue.selected.length > 0);
   }, [entities, selectable, wrappedSelectable, checkboxVisible, checkboxDisabled, setSelectMode, isAllSelected]);
+  // Persist group intent separately from concrete IDs so remounts and incremental batches agree.
+  useEffect(() => {
+    previousDatasetId.current = selectable === null || selectable === void 0 ? void 0 : selectable.selectionDatasetId;
+  }, [selectable === null || selectable === void 0 ? void 0 : selectable.selectionDatasetId]);
+  useEffect(() => {
+    const applied = selectable === null || selectable === void 0 ? void 0 : selectable.selection;
+    if (!applied || !resolvedSelection || !selectable.allowExclusions || !applied.all || selectable.strategy !== "nested") {
+      return;
+    }
+    const sameIds = (left = [], right = []) => left.length === right.length && left.every((id, index) => id === right[index]);
+    if (!sameIds(applied.selected, resolvedSelection.selected) || !sameIds(applied.excludedGroupIds, resolvedSelection.excludedGroupIds)) {
+      selectable.onSelect(resolvedSelection);
+    }
+  }, [selectable, resolvedSelection]);
   // Deliberately independent of the current selection, so the drag anchor survives the
   // selection changes a drag itself produces.
   const {
@@ -208,7 +239,12 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
     const entity = entityById.get(row.id);
     return !!entity && checkboxVisible(entity, row.isNested) && !checkboxDisabled(entity, row.isNested);
   }, [entityById, checkboxVisible, checkboxDisabled]);
-  const getBaseSelection = useCallback(() => isAllSelected && !(selectable === null || selectable === void 0 ? void 0 : selectable.allowExclusions) ? getCurrentPageSelection(entities, wrappedSelectable) : new Set(selections), [isAllSelected, selectable === null || selectable === void 0 ? void 0 : selectable.allowExclusions, entities, wrappedSelectable, selections]);
+  const getBaseSelection = useCallback(() => Object.assign({
+    all: isAllSelected,
+    selected: [...(isAllSelected && !(selectable === null || selectable === void 0 ? void 0 : selectable.allowExclusions) ? getCurrentPageSelection(entities, wrappedSelectable) : selections)]
+  }, excludedGroupIds.size > 0 ? {
+    excludedGroupIds: [...excludedGroupIds]
+  } : {}), [isAllSelected, selectable === null || selectable === void 0 ? void 0 : selectable.allowExclusions, entities, wrappedSelectable, selections, excludedGroupIds]);
   const {
     onCheckboxMouseDown,
     suppressNextChangeRef
@@ -221,7 +257,7 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
     onSelectListener(id, checked);
   }, [onSelectListener, suppressNextChangeRef]);
   const onChangeSelectionState = useCallback(newState => {
-    var _a, _b, _c;
+    var _a;
     if (newState === SelectionState.All) {
       (selectable === null || selectable === void 0 ? void 0 : selectable.onSelect) && selectable.onSelect({
         selected: [],
@@ -240,17 +276,16 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
     }
     const newSelections = getCurrentPageSelection(entities, wrappedSelectable);
     setState(newState);
-    const previousSelections = (_b = (_a = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _a === void 0 ? void 0 : _a.selected) !== null && _b !== void 0 ? _b : [];
-    const newValue = (selectable === null || selectable === void 0 ? void 0 : selectable.allowExclusions) && ((_c = selectable.selection) === null || _c === void 0 ? void 0 : _c.all) ? {
-      selected: previousSelections.filter(id => !newSelections.has(id)),
-      all: true
-    } : {
+    const previousSelections = [...selections];
+    const groups = new Set(excludedGroupIds);
+    entities.forEach(entity => groups.delete(entity.id));
+    const newValue = (selectable === null || selectable === void 0 ? void 0 : selectable.allowExclusions) && ((_a = selectable.selection) === null || _a === void 0 ? void 0 : _a.all) ? createExcludedSelection(new Set(previousSelections.filter(id => !newSelections.has(id))), groups) : {
       selected: [...new Set([...previousSelections, ...newSelections])],
       all: false
     };
     selectable === null || selectable === void 0 ? void 0 : selectable.onSelect(newValue);
     setSelectMode(newValue.all || newValue.selected.length > 0);
-  }, [selectable, wrappedSelectable, entities, setSelectMode]);
+  }, [selectable, wrappedSelectable, entities, setSelectMode, selections, excludedGroupIds]);
   const checkboxTitle = useCallback(entity => (selectable === null || selectable === void 0 ? void 0 : selectable.checkboxTitle) ? selectable.checkboxTitle(entity) : firstColumnId ? entity[firstColumnId] || entity.id : entity.id, [firstColumnId, selectable]);
   const headerTitle = useCallback(() => {
     if (selectable === null || selectable === void 0 ? void 0 : selectable.headerTitle) {
@@ -266,7 +301,15 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
   // row must be evaluated through the SelectionState.All (exclusion-aware) branch of
   // isRowChecked - not the per-page `state`, which can be Partial/None for a page that
   // contains some of those exclusions.
-  (entity, isNested) => isRowChecked(selections, isAllSelected ? SelectionState.All : state, selectable === null || selectable === void 0 ? void 0 : selectable.strategy, entity, isNested, checkboxVisible, checkboxDisabled), [selections, isAllSelected, state, selectable === null || selectable === void 0 ? void 0 : selectable.strategy, checkboxVisible, checkboxDisabled]);
+  (entity, isNested) => {
+    if (!isNested && isAllSelected && excludedGroupIds.has(entity.id)) {
+      return {
+        indeterminate: false,
+        checked: false
+      };
+    }
+    return isRowChecked(selections, isAllSelected ? SelectionState.All : state, selectable === null || selectable === void 0 ? void 0 : selectable.strategy, entity, isNested, checkboxVisible, checkboxDisabled);
+  }, [selections, excludedGroupIds, isAllSelected, state, selectable === null || selectable === void 0 ? void 0 : selectable.strategy, checkboxVisible, checkboxDisabled]);
   const hasSelectable = !!selectable;
   const selectableCheckboxSelectsCurrentPage = selectable === null || selectable === void 0 ? void 0 : selectable.checkboxSelectsCurrentPage;
   const selectableTurnOffSelectAll = selectable === null || selectable === void 0 ? void 0 : selectable.turnOffSelectAll;
@@ -332,13 +375,17 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
               // keep `all: true` - it must never be treated as an inclusion list, or
               // every other page's selection would be silently wiped out.
               const currentPageIds = getCurrentPageSelection(entities, wrappedSelectable);
-              const newExcluded = new Set([...selectable.selection.selected, ...currentPageIds]);
-              const newState = calculateSelectionState(entities, newExcluded, true, checkboxVisible, checkboxDisabled, selectable.strategy);
+              const newExcluded = new Set([...selections, ...currentPageIds]);
+              const groups = new Set(excludedGroupIds);
+              if (selectable.strategy === "nested") {
+                entities.forEach(entity => {
+                  var _a;
+                  if ((_a = getChildrenForSelection(entity)) === null || _a === void 0 ? void 0 : _a.length) groups.add(entity.id);
+                });
+              }
+              const newState = calculateSelectionState(entities, new Set([...newExcluded, ...groups]), true, checkboxVisible, checkboxDisabled, selectable.strategy);
               setState(newState);
-              selectable.onSelect({
-                selected: [...newExcluded],
-                all: true
-              });
+              selectable.onSelect(createExcludedSelection(newExcluded, groups));
               setSelectMode(true);
             } else {
               // Intentionally different from onSelect(None) ("Deselect all" menu item, which clears everything).
@@ -354,7 +401,7 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
               setSelectMode(remaining.length > 0);
             }
           },
-          calculateSelectionState: () => selectionMenuState,
+          calculateSelectionState: () => isAllSelected ? selections.size === 0 && excludedGroupIds.size === 0 ? SelectionState.All : SelectionState.Partial : selections.size === 0 ? SelectionState.None : selectableState === SelectionState.CurrentPage ? SelectionState.CurrentPage : SelectionState.Partial,
           checkboxInHeader: checkboxInHeaderValue,
           header: selectableHeader,
           onSelect: newState => {
@@ -367,7 +414,7 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
         return cell;
       }
     };
-  }, [checkboxDisabled, checkboxTitle, checkboxVisible, headerTitle, onChangeSelectionState, onCheckboxChange, onCheckboxMouseDown, hasSelectable, checkboxEmitsCurrentPage, checkboxInHeaderValue, selectableHeader, selectableTurnOffSelectAll, isInfinite, selectable, wrappedSelectable, selectionMenuState, state, isMobile, checkboxPlaceholder, isEntityChecked, entities, setSelectMode]);
+  }, [checkboxDisabled, checkboxTitle, checkboxVisible, headerTitle, onChangeSelectionState, onCheckboxChange, onCheckboxMouseDown, hasSelectable, checkboxEmitsCurrentPage, checkboxInHeaderValue, selectableHeader, selectableTurnOffSelectAll, isInfinite, selectable, wrappedSelectable, selectableState, isAllSelected, selections, excludedGroupIds, state, isMobile, checkboxPlaceholder, isEntityChecked, entities, setSelectMode]);
   const selectableFeedWrapper = useCallback((primaryData, secondaryData, entity, isNested) => {
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (!entity) {

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

@@ -1,5 +1,6 @@
 import { getChildrenForSelection } from "../../../commonHelpers/showMoreRow";
 import { SelectionState } from "../interfaces";
+const areAllLoading = (children) => children.every(child => child.isLoading);
 export const calculateSelectionState = (entities, selections, all, checkboxVisible, checkboxDisabled, strategy) => {
     if (selections.size === 0) {
         return all ? SelectionState.All : SelectionState.None;
@@ -9,7 +10,7 @@ export const calculateSelectionState = (entities, selections, all, checkboxVisib
         // otherwise-fully-selected set (see ISelectionValue), rather than included ids.
         const isExcluded = (entity) => {
             const children = strategy === "nested" ? getChildrenForSelection(entity) : undefined;
-            if (children && children.length > 0) {
+            if (children && children.length > 0 && !areAllLoading(children)) {
                 return children.every(child => {
                     if (!checkboxVisible(child, true)) {
                         return true;
@@ -24,7 +25,7 @@ export const calculateSelectionState = (entities, selections, all, checkboxVisib
         };
         const isPartiallyExcluded = (entity) => {
             const children = strategy === "nested" ? getChildrenForSelection(entity) : undefined;
-            if (children && children.length > 0) {
+            if (children && children.length > 0 && !areAllLoading(children)) {
                 return children.some(child => selections.has(child.id));
             }
             return selections.has(entity.id);

package/esm/table/selectable/utils/getCurrentPageSelection.js

@@ -1,15 +1,20 @@
 import { getChildrenForSelection, isShowMoreRow } from "../../../commonHelpers/showMoreRow";
+const isLoadingRow = (entity) => !!entity.isLoading;
 export const getCurrentPageSelection = (entities, selectable) => {
     const newSelections = new Set();
     entities.forEach(entity => {
-        const isVisible = !entity.isLoading && !isShowMoreRow(entity) && ((selectable === null || selectable === void 0 ? void 0 : selectable.checkboxVisible) ? selectable.checkboxVisible(entity) : true);
+        if (isLoadingRow(entity) || isShowMoreRow(entity)) {
+            return;
+        }
+        const isVisible = (selectable === null || selectable === void 0 ? void 0 : selectable.checkboxVisible) ? selectable.checkboxVisible(entity) : true;
         const isEnabled = !(selectable === null || selectable === void 0 ? void 0 : selectable.checkboxDisabled) || !selectable.checkboxDisabled(entity);
         const children = (selectable === null || selectable === void 0 ? void 0 : selectable.strategy) === "nested" ? getChildrenForSelection(entity) : undefined;
         if (children && children.length > 0) {
             children.forEach(child => {
-                const isChildVisible = !child.isLoading &&
-                    !isShowMoreRow(child) &&
-                    ((selectable === null || selectable === void 0 ? void 0 : selectable.checkboxVisible) ? selectable.checkboxVisible(child, true) : true);
+                if (isLoadingRow(child) || isShowMoreRow(child)) {
+                    return;
+                }
+                const isChildVisible = (selectable === null || selectable === void 0 ? void 0 : selectable.checkboxVisible) ? selectable.checkboxVisible(child, true) : true;
                 const isChildEnabled = !(selectable === null || selectable === void 0 ? void 0 : selectable.checkboxDisabled) || !selectable.checkboxDisabled(child, true);
                 if (isChildVisible && isChildEnabled) {
                     newSelections.add(child.id);

package/esm/table/selectable/utils/groupExclusions.d.ts

@@ -0,0 +1,7 @@
+import { IEntityWithId } from "../../../commonHelpers/entity";
+import { IRowEntity } from "../../../dataGrid/row/row";
+import { ISelectionValue } from "../interfaces";
+import { ISelectableRowsOptions } from "../useSelectableRows";
+export declare const createExcludedSelection: (selected: Set<string>, groups: Set<string>) => ISelectionValue;
+export declare const resolveGroupExclusions: <T extends IRowEntity<N>, N extends IEntityWithId>(entities: T[], selectable: ISelectableRowsOptions<T, N> | undefined, pruneMissingGroups?: boolean) => ISelectionValue | undefined;
+export declare const checkExcludedRow: <T extends IRowEntity<N>, N extends IEntityWithId>(selected: Set<string>, groups: Set<string>, selectable: ISelectableRowsOptions<T, N> | undefined, entities: T[], id: string, checked: boolean) => void;

package/esm/table/selectable/utils/groupExclusions.js

@@ -0,0 +1,55 @@
+import { getChildrenForSelection } from "../../../commonHelpers/showMoreRow";
+import { checkRow } from "./checkRow";
+import { getCurrentPageSelection } from "./getCurrentPageSelection";
+export const createExcludedSelection = (selected, groups) => (Object.assign({ all: true, selected: [...selected] }, (groups.size > 0 ? { excludedGroupIds: [...groups] } : {})));
+export const resolveGroupExclusions = (entities, selectable, pruneMissingGroups = false) => {
+    var _a, _b;
+    const selection = selectable === null || selectable === void 0 ? void 0 : selectable.selection;
+    if (!(selectable === null || selectable === void 0 ? void 0 : selectable.allowExclusions) || !(selection === null || selection === void 0 ? void 0 : selection.all) || selectable.strategy !== "nested") {
+        return selection;
+    }
+    const selected = new Set(selection.selected);
+    const groups = new Set(selection.excludedGroupIds);
+    for (const entity of entities) {
+        if (selected.has(entity.id) && ((_a = getChildrenForSelection(entity)) === null || _a === void 0 ? void 0 : _a.length)) {
+            groups.add(entity.id);
+        }
+    }
+    for (const id of groups) {
+        const entity = entities.find(item => item.id === id);
+        if (!entity && pruneMissingGroups) {
+            selected.delete(id);
+            groups.delete(id);
+            continue;
+        }
+        if (!entity)
+            continue;
+        if ((_b = getChildrenForSelection(entity)) === null || _b === void 0 ? void 0 : _b.length) {
+            selected.delete(id);
+        }
+        for (const childId of getCurrentPageSelection([entity], selectable)) {
+            selected.add(childId);
+        }
+    }
+    return createExcludedSelection(selected, groups);
+};
+export const checkExcludedRow = (selected, groups, selectable, entities, id, checked) => {
+    var _a, _b;
+    if ((selectable === null || selectable === void 0 ? void 0 : selectable.strategy) === "nested") {
+        const entity = entities.find(item => item.id === id);
+        if (checked) {
+            groups.delete(id);
+            selected.delete(id);
+            // Selecting a child overrides the whole-group intent, retaining the other concrete exclusions.
+            for (const parent of entities) {
+                if ((_a = getChildrenForSelection(parent)) === null || _a === void 0 ? void 0 : _a.some(child => child.id === id)) {
+                    groups.delete(parent.id);
+                }
+            }
+        }
+        else if (entity && ((_b = getChildrenForSelection(entity)) === null || _b === void 0 ? void 0 : _b.length)) {
+            groups.add(id);
+        }
+    }
+    checkRow(selected, selectable, entities, id, !checked);
+};

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

@@ -24,7 +24,7 @@ export const isRowChecked = (selections, state, strategy, entity, isNested, chec
         if (children && children.length > 0) {
             const selectableChildren = filterSelectable(children, checkboxVisible, checkboxDisabled);
             if (selectableChildren.length === 0) {
-                return { indeterminate: false, checked: true };
+                return { indeterminate: false, checked: !selections.has(entity.id) };
             }
             const allChildrenChecked = selectableChildren.every(child => !selections.has(child.id));
             const someChildrenChecked = selectableChildren.some(child => !selections.has(child.id));