@geotab/zenith 3.17.0-beta.1 → 3.17.0

package/dist/pageHeader/pageHeaderButton.d.ts

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

package/dist/pageHeader/pageHeaderButton.js

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

package/dist/pillExpandable/pillExpandable.js

@@ -428,6 +428,7 @@ const PillExpandableBase = ({
 }) => {
   const popupId = (0, react_1.useId)();
   const descriptionId = (0, react_1.useId)();
+  const counterId = (0, react_1.useId)();
   const [descriptionElement, setDescriptionElement] = (0, react_1.useState)(null);
   const isDrive = (0, useDrive_1.useDrive)();
   const [isMobile, setIsMobile] = (0, react_1.useState)(false);
@@ -596,10 +597,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 && (0, jsx_runtime_1.jsx)(pillExpandableSimple_1.PillExpandableSimple, {
+          id: counterId,
           icon: secondaryIcon || effectiveIcon,
           text: hideCounterNumber ? "" : counterText,
           includeExpandIcon: false,

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

@@ -8,7 +8,7 @@ const iconChevronTop_1 = require("../icons/iconChevronTop");
 const iconChevronBottom_1 = require("../icons/iconChevronBottom");
 const iconException_1 = require("../icons/iconException");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
-const PillExpandableSimple = ({ onExpand, text, expanded, includeExpandIcon = true, type = "warning", icon = iconException_1.IconException, isBeta, isMobile, ref, className, descriptionId, ariaHasPopup, isDecorative, dataAnalyticsId
+const PillExpandableSimple = ({ id, onExpand, text, expanded, includeExpandIcon = true, type = "warning", icon = iconException_1.IconException, isBeta, isMobile, ref, className, descriptionId, ariaHasPopup, isDecorative, dataAnalyticsId
 // eslint-disable-next-line complexity
  }) => {
     const iconDriveClassName = (0, useDriveClassName_1.useDriveClassName)("icon");
@@ -37,7 +37,7 @@ const PillExpandableSimple = ({ onExpand, text, expanded, includeExpandIcon = tr
                         size: iconSize
                     }) }) }))] }));
     if (isDecorative) {
-        return ((0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)([
+        return ((0, jsx_runtime_1.jsx)("span", { id: id, className: (0, classNames_1.classNames)([
                 "zen-status-pill__container",
                 `zen-status-pill__container--${type}`,
                 containerDriveClassName || "",

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

@@ -22,7 +22,7 @@ const useDragSelection = (rows, gridRef, onBatchSelect, getBaseSelection, isSele
     isEnabledRef.current = isEnabled;
     const anchorIdRef = (0, react_1.useRef)(null);
     const anchorSelectRef = (0, react_1.useRef)(true);
-    const baseSelectedRef = (0, react_1.useRef)(new Set());
+    const baseSelectedRef = (0, react_1.useRef)(null);
     const isDraggingRef = (0, react_1.useRef)(false);
     const movedRef = (0, react_1.useRef)(false);
     const lastResultKeyRef = (0, react_1.useRef)("");
@@ -31,7 +31,7 @@ const useDragSelection = (rows, gridRef, onBatchSelect, getBaseSelection, isSele
     const attachedGridElementRef = (0, react_1.useRef)(null);
     const emitRange = (0, react_1.useCallback)((currentId) => {
         const anchorId = anchorIdRef.current;
-        if (anchorId === null) {
+        if (anchorId === null || baseSelectedRef.current === null) {
             return;
         }
         const range = (0, getRangeIds_1.getRangeIds)(rowsRef.current, anchorId, currentId, isSelectableRef.current);
@@ -85,7 +85,7 @@ const useDragSelection = (rows, gridRef, onBatchSelect, getBaseSelection, isSele
         (_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 = (0, react_1.useCallback)((id, checked, e) => {
         var _a, _b, _c, _d, _e;
         // Right-click between drag-end and the trailing click must not clear suppression.
@@ -95,7 +95,7 @@ const useDragSelection = (rows, gridRef, onBatchSelect, getBaseSelection, isSele
         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/dist/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/dist/table/selectable/useSelectableRows.js

@@ -88,6 +88,7 @@ const getCurrentPageSelection_1 = require("./utils/getCurrentPageSelection");
 const useDragSelection_1 = require("./useDragSelection");
 const getDragSelectionRows_1 = require("./utils/getDragSelectionRows");
 const showMoreRow_1 = require("../../commonHelpers/showMoreRow");
+const groupExclusions_1 = require("./utils/groupExclusions");
 const getEmptySelection = () => ({
   all: false,
   selected: []
@@ -98,13 +99,14 @@ exports.isAllSelection = isAllSelection;
 exports.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 ? interfaces_1.SelectionState.All : interfaces_1.SelectionState.Partial : pageState;
 const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMode, selectable, isInfinite = false, gridRef, expandedRows) => {
   var _a;
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
-  const selections = (0, react_1.useMemo)(() => (0, getSelection_1.getSelections)(selectable === null || selectable === void 0 ? void 0 : selectable.selection), [selectable === null || selectable === void 0 ? void 0 : selectable.selection]);
+  const previousDatasetId = (0, react_1.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 = (0, react_1.useMemo)(() => (0, getSelection_1.getSelections)(selectable === null || selectable === void 0 ? void 0 : selectable.selection), [selectable === null || selectable === void 0 ? void 0 : selectable.selection]);
   const [state, setState] = (0, react_1.useState)(interfaces_1.SelectionState.None);
   const checkboxVisible = (0, react_1.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;
@@ -120,16 +122,19 @@ const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMod
     }
     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 = (0, react_1.useMemo)(() => selectable ? Object.assign(Object.assign({}, selectable), {
     checkboxVisible,
     checkboxDisabled
   }) : undefined, [selectable, checkboxVisible, checkboxDisabled]);
+  const resolvedSelection = (0, react_1.useMemo)(() => (0, groupExclusions_1.resolveGroupExclusions)(entities, wrappedSelectable, datasetWasReplaced), [datasetWasReplaced, entities, wrappedSelectable]);
+  const selections = (0, react_1.useMemo)(() => (0, getSelection_1.getSelections)(resolvedSelection), [resolvedSelection]);
+  const excludedGroupIds = (0, react_1.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 = (0, react_1.useMemo)(() => {
     if ((selectable === null || selectable === void 0 ? void 0 : selectable.checkboxPlaceholder) !== undefined) {
       return selectable.checkboxPlaceholder;
@@ -144,21 +149,21 @@ const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMod
     var _a;
     return (0, exports.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 = (0, react_1.useMemo)(() => (0, calculateSelectionState_1.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 = (0, react_1.useMemo)(() => (0, calculateSelectionState_1.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 = (0, react_1.useMemo)(() => columns.length > 0 ? columns[0].id : null, [columns]);
   (0, react_1.useEffect)(() => {
     if (selectable && selectable.selection) {
-      const newSelections = new Set(selectable.selection.selected);
-      const newState = (0, calculateSelectionState_1.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 = (0, react_1.useCallback)((id, checked) => {
     if (isAllSelected && !(selectable === null || selectable === void 0 ? void 0 : selectable.allowExclusions)) {
       const included = (0, getCurrentPageSelection_1.getCurrentPageSelection)(entities, wrappedSelectable);
       (0, checkRow_1.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.
@@ -166,22 +171,29 @@ const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMod
       // exclusion set - it must never be rebuilt from `entities` (the current page),
       // otherwise every other page's rows would silently fall out of the selection.
       const excluded = new Set(selections);
-      (0, checkRow_1.checkRow)(excluded, wrappedSelectable, entities, id, !checked);
-      return excluded;
+      const groups = new Set(excludedGroupIds);
+      (0, groupExclusions_1.checkExcludedRow)(excluded, groups, wrappedSelectable, entities, id, checked);
+      return {
+        selected: excluded,
+        groups
+      };
     }
     (0, checkRow_1.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 = (0, react_1.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 = (0, calculateSelectionState_1.calculateSelectionState)(entities, newSelection, wasAllSelected, checkboxVisible, checkboxDisabled, selectable === null || selectable === void 0 ? void 0 : selectable.strategy);
     // MYG-142234: once selection spans "all" pages, unchecking a row must keep `all: true`
     // and only record the exclusion - it must not collapse to the current page's ids.
-    const newValue = wasAllSelected ? {
-      selected: [...newSelection],
-      all: true
-    } : {
+    const newValue = wasAllSelected ? (0, groupExclusions_1.createExcludedSelection)(newSelection, groups) : {
       selected: [...newSelection],
       all: newState === interfaces_1.SelectionState.All
     };
@@ -190,24 +202,43 @@ const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMod
     setSelectMode(newValue.all || newValue.selected.length > 0);
   }, [checkboxDisabled, checkboxVisible, entities, selectable, setSelectMode, setState, getNewSelection, isAllSelected]);
   const onBatchSelect = (0, react_1.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;
       }
-      (0, checkRow_1.checkRow)(result, wrappedSelectable, entities, id, wasAllSelected ? !select : select);
+      if (wasAllSelected) {
+        (0, groupExclusions_1.checkExcludedRow)(result, groups, wrappedSelectable, entities, id, select);
+      } else {
+        (0, checkRow_1.checkRow)(result, wrappedSelectable, entities, id, select);
+      }
     }
     const newState = (0, calculateSelectionState_1.calculateSelectionState)(entities, result, wasAllSelected, checkboxVisible, checkboxDisabled, selectable === null || selectable === void 0 ? void 0 : selectable.strategy);
-    const newValue = {
+    const newValue = wasAllSelected ? (0, groupExclusions_1.createExcludedSelection)(result, groups) : {
       selected: [...result],
-      all: wasAllSelected || newState === interfaces_1.SelectionState.All
+      all: newState === interfaces_1.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.
+  (0, react_1.useEffect)(() => {
+    previousDatasetId.current = selectable === null || selectable === void 0 ? void 0 : selectable.selectionDatasetId;
+  }, [selectable === null || selectable === void 0 ? void 0 : selectable.selectionDatasetId]);
+  (0, react_1.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 {
@@ -218,7 +249,12 @@ const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMod
     const entity = entityById.get(row.id);
     return !!entity && checkboxVisible(entity, row.isNested) && !checkboxDisabled(entity, row.isNested);
   }, [entityById, checkboxVisible, checkboxDisabled]);
-  const getBaseSelection = (0, react_1.useCallback)(() => isAllSelected && !(selectable === null || selectable === void 0 ? void 0 : selectable.allowExclusions) ? (0, getCurrentPageSelection_1.getCurrentPageSelection)(entities, wrappedSelectable) : new Set(selections), [isAllSelected, selectable === null || selectable === void 0 ? void 0 : selectable.allowExclusions, entities, wrappedSelectable, selections]);
+  const getBaseSelection = (0, react_1.useCallback)(() => Object.assign({
+    all: isAllSelected,
+    selected: [...(isAllSelected && !(selectable === null || selectable === void 0 ? void 0 : selectable.allowExclusions) ? (0, getCurrentPageSelection_1.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
@@ -231,7 +267,7 @@ const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMod
     onSelectListener(id, checked);
   }, [onSelectListener, suppressNextChangeRef]);
   const onChangeSelectionState = (0, react_1.useCallback)(newState => {
-    var _a, _b, _c;
+    var _a;
     if (newState === interfaces_1.SelectionState.All) {
       (selectable === null || selectable === void 0 ? void 0 : selectable.onSelect) && selectable.onSelect({
         selected: [],
@@ -250,17 +286,16 @@ const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMod
     }
     const newSelections = (0, getCurrentPageSelection_1.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) ? (0, groupExclusions_1.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 = (0, react_1.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 = (0, react_1.useCallback)(() => {
     if (selectable === null || selectable === void 0 ? void 0 : selectable.headerTitle) {
@@ -276,7 +311,15 @@ const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMod
   // row must be evaluated through the SelectionState.All (exclusion-aware) branch of
   // isRowChecked - not the per-page `state`, which can be Partial/None for a page that
   // contains some of those exclusions.
-  (entity, isNested) => (0, isRowChecked_1.isRowChecked)(selections, isAllSelected ? interfaces_1.SelectionState.All : state, selectable === null || selectable === void 0 ? void 0 : selectable.strategy, entity, isNested, 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 (0, isRowChecked_1.isRowChecked)(selections, isAllSelected ? interfaces_1.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;
@@ -342,13 +385,17 @@ const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMod
               // keep `all: true` - it must never be treated as an inclusion list, or
               // every other page's selection would be silently wiped out.
               const currentPageIds = (0, getCurrentPageSelection_1.getCurrentPageSelection)(entities, wrappedSelectable);
-              const newExcluded = new Set([...selectable.selection.selected, ...currentPageIds]);
-              const newState = (0, calculateSelectionState_1.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 = (0, showMoreRow_1.getChildrenForSelection)(entity)) === null || _a === void 0 ? void 0 : _a.length) groups.add(entity.id);
+                });
+              }
+              const newState = (0, calculateSelectionState_1.calculateSelectionState)(entities, new Set([...newExcluded, ...groups]), true, checkboxVisible, checkboxDisabled, selectable.strategy);
               setState(newState);
-              selectable.onSelect({
-                selected: [...newExcluded],
-                all: true
-              });
+              selectable.onSelect((0, groupExclusions_1.createExcludedSelection)(newExcluded, groups));
               setSelectMode(true);
             } else {
               // Intentionally different from onSelect(None) ("Deselect all" menu item, which clears everything).
@@ -364,7 +411,7 @@ const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMod
               setSelectMode(remaining.length > 0);
             }
           },
-          calculateSelectionState: () => selectionMenuState,
+          calculateSelectionState: () => isAllSelected ? selections.size === 0 && excludedGroupIds.size === 0 ? interfaces_1.SelectionState.All : interfaces_1.SelectionState.Partial : selections.size === 0 ? interfaces_1.SelectionState.None : selectableState === interfaces_1.SelectionState.CurrentPage ? interfaces_1.SelectionState.CurrentPage : interfaces_1.SelectionState.Partial,
           checkboxInHeader: checkboxInHeaderValue,
           header: selectableHeader,
           onSelect: newState => {
@@ -377,7 +424,7 @@ const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMod
         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 = (0, react_1.useCallback)((primaryData, secondaryData, entity, isNested) => {
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (!entity) {

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.calculateSelectionState = void 0;
 const showMoreRow_1 = require("../../../commonHelpers/showMoreRow");
 const interfaces_1 = require("../interfaces");
+const areAllLoading = (children) => children.every(child => child.isLoading);
 const calculateSelectionState = (entities, selections, all, checkboxVisible, checkboxDisabled, strategy) => {
     if (selections.size === 0) {
         return all ? interfaces_1.SelectionState.All : interfaces_1.SelectionState.None;
@@ -12,7 +13,7 @@ const calculateSelectionState = (entities, selections, all, checkboxVisible, che
         // otherwise-fully-selected set (see ISelectionValue), rather than included ids.
         const isExcluded = (entity) => {
             const children = strategy === "nested" ? (0, showMoreRow_1.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;
@@ -27,7 +28,7 @@ const calculateSelectionState = (entities, selections, all, checkboxVisible, che
         };
         const isPartiallyExcluded = (entity) => {
             const children = strategy === "nested" ? (0, showMoreRow_1.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/dist/table/selectable/utils/getCurrentPageSelection.js

@@ -2,17 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCurrentPageSelection = void 0;
 const showMoreRow_1 = require("../../../commonHelpers/showMoreRow");
+const isLoadingRow = (entity) => !!entity.isLoading;
 const getCurrentPageSelection = (entities, selectable) => {
     const newSelections = new Set();
     entities.forEach(entity => {
-        const isVisible = !entity.isLoading && !(0, showMoreRow_1.isShowMoreRow)(entity) && ((selectable === null || selectable === void 0 ? void 0 : selectable.checkboxVisible) ? selectable.checkboxVisible(entity) : true);
+        if (isLoadingRow(entity) || (0, showMoreRow_1.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" ? (0, showMoreRow_1.getChildrenForSelection)(entity) : undefined;
         if (children && children.length > 0) {
             children.forEach(child => {
-                const isChildVisible = !child.isLoading &&
-                    !(0, showMoreRow_1.isShowMoreRow)(child) &&
-                    ((selectable === null || selectable === void 0 ? void 0 : selectable.checkboxVisible) ? selectable.checkboxVisible(child, true) : true);
+                if (isLoadingRow(child) || (0, showMoreRow_1.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/dist/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/dist/table/selectable/utils/groupExclusions.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkExcludedRow = exports.resolveGroupExclusions = exports.createExcludedSelection = void 0;
+const showMoreRow_1 = require("../../../commonHelpers/showMoreRow");
+const checkRow_1 = require("./checkRow");
+const getCurrentPageSelection_1 = require("./getCurrentPageSelection");
+const createExcludedSelection = (selected, groups) => (Object.assign({ all: true, selected: [...selected] }, (groups.size > 0 ? { excludedGroupIds: [...groups] } : {})));
+exports.createExcludedSelection = createExcludedSelection;
+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 = (0, showMoreRow_1.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 = (0, showMoreRow_1.getChildrenForSelection)(entity)) === null || _b === void 0 ? void 0 : _b.length) {
+            selected.delete(id);
+        }
+        for (const childId of (0, getCurrentPageSelection_1.getCurrentPageSelection)([entity], selectable)) {
+            selected.add(childId);
+        }
+    }
+    return (0, exports.createExcludedSelection)(selected, groups);
+};
+exports.resolveGroupExclusions = resolveGroupExclusions;
+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 = (0, showMoreRow_1.getChildrenForSelection)(parent)) === null || _a === void 0 ? void 0 : _a.some(child => child.id === id)) {
+                    groups.delete(parent.id);
+                }
+            }
+        }
+        else if (entity && ((_b = (0, showMoreRow_1.getChildrenForSelection)(entity)) === null || _b === void 0 ? void 0 : _b.length)) {
+            groups.add(id);
+        }
+    }
+    (0, checkRow_1.checkRow)(selected, selectable, entities, id, !checked);
+};
+exports.checkExcludedRow = checkExcludedRow;

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

@@ -27,7 +27,7 @@ const isRowChecked = (selections, state, strategy, entity, isNested, checkboxVis
         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));