@geotab/zenith 3.16.0-beta.2 → 3.16.0-beta.3

package/esm/commonHelpers/hooks/useTrapFocus.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback } from "react";
 import { isElementInsideContainer } from "../../dialog/dialogHelpers";
 import { FOCUSABLE_SELECTOR } from "../../utils/focusableSelector";
 import { useKeydown } from "./useKeydown";
@@ -6,38 +6,18 @@ import { isChildOf } from "../../utils/isChildOf";
 import { isElementHidden } from "../../utils/isElementHidden";
 import { zen } from "../../utils/zen";
 const findFirstVisible = (elems, isElementVisible) => elems.find(elem => isElementVisible(elem));
-/**
- * Traps keyboard (Tab) focus within `containerRef` (and optionally its `triggerRef`).
- *
- * Nested-popup contract: for correct nested-popup behaviour, a focused element that triggers an
- * open child popup must expose a `data-popup-id` attribute whose value is the `id` of the child
- * popup element rendered in the DOM. When present, focus is deferred to that child popup's trap.
- * This contract is fulfilled automatically by `ControlledPopup`; callers using `useTrapFocus`
- * directly must set `data-popup-id` themselves or nested popups will silently lose focus handling.
- */
 export const useTrapFocus = (containerRef, triggerRef, subscriptionTrigger, condition, isElementVisible) => {
     /* eslint-disable complexity */
     const handleKeyDown = useCallback(e => {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f;
         /* eslint-enable complexity */
         const getChildCondition = () => {
-            var _a, _b, _c;
-            const targetEl = e.target;
-            // If the target is a trigger for an open child popup, defer to that popup's
-            // focus trap. Key on data-popup-id + DOM presence so this works even when
-            // preventAttributesAutoSet suppresses aria-expanded.
-            const dataPopupId = targetEl.getAttribute("data-popup-id");
-            if (dataPopupId &&
-                ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.getElementById(dataPopupId)) &&
-                isChildOf(targetEl, containerRef.current) &&
-                targetEl !== (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current)) {
-                return true;
-            }
+            var _a, _b;
             return triggerRef
-                ? !isChildOf(targetEl, containerRef.current) &&
-                    targetEl !== ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.body) &&
-                    !isChildOf(targetEl, triggerRef.current)
-                : !isChildOf(targetEl, containerRef.current) && targetEl !== ((_c = zen.document) === null || _c === void 0 ? void 0 : _c.body);
+                ? !isChildOf(e.target, containerRef.current) &&
+                    e.target !== ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.body) &&
+                    !isChildOf(e.target, triggerRef.current)
+                : !isChildOf(e.target, containerRef.current) && e.target !== ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.body);
         };
         if (!containerRef.current || getChildCondition()) {
             return;
@@ -47,14 +27,9 @@ export const useTrapFocus = (containerRef, triggerRef, subscriptionTrigger, cond
             : !isElementInsideContainer(target, containerEl.current) &&
                 !isElementInsideContainer(target, triggerEl.current);
         const isTargetOutside = e.target ? checkIsElementOutside(e.target, containerRef, triggerRef) : undefined;
-        const triggerElement = (_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) !== null && _a !== void 0 ? _a : null;
-        const triggerSelf = (triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.matches(FOCUSABLE_SELECTOR)) ? [triggerElement] : [];
-        const triggerChildren = Array.from((_b = triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.querySelectorAll(FOCUSABLE_SELECTOR)) !== null && _b !== void 0 ? _b : []);
-        // querySelectorAll only returns descendants (never the element itself), so triggerSelf
-        // and triggerChildren are disjoint by definition and need no deduplication.
-        const triggerSelectors = [...triggerSelf, ...triggerChildren];
+        const triggerSelectors = ((_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(FOCUSABLE_SELECTOR)) || [];
         const containerSelectors = containerRef.current.querySelectorAll(FOCUSABLE_SELECTOR);
-        const focusable = triggerRef ? [...triggerSelectors, ...Array.from(containerSelectors)] : [...Array.from(containerSelectors)];
+        const focusable = triggerRef ? [...Array.from(triggerSelectors), ...Array.from(containerSelectors)] : [...Array.from(containerSelectors)];
         if (!focusable.length) {
             return;
         }
@@ -71,58 +46,31 @@ export const useTrapFocus = (containerRef, triggerRef, subscriptionTrigger, cond
                 return;
             }
             if (e.shiftKey) {
-                if (((_c = zen.document) === null || _c === void 0 ? void 0 : _c.activeElement) === first) {
+                if (((_b = zen.document) === null || _b === void 0 ? void 0 : _b.activeElement) === first) {
                     e.preventDefault();
                     last === null || last === void 0 ? void 0 : last.focus();
                     return;
                 }
-                if (firstContainerFocusable && ((_d = zen.document) === null || _d === void 0 ? void 0 : _d.activeElement) === firstContainerFocusable) {
+                if (firstContainerFocusable && ((_c = zen.document) === null || _c === void 0 ? void 0 : _c.activeElement) === firstContainerFocusable) {
                     e.preventDefault();
                     lastTriggerFocusable === null || lastTriggerFocusable === void 0 ? void 0 : lastTriggerFocusable.focus();
                 }
                 return;
             }
-            if (((_e = zen.document) === null || _e === void 0 ? void 0 : _e.activeElement) === last) {
+            if (((_d = zen.document) === null || _d === void 0 ? void 0 : _d.activeElement) === last) {
                 e.preventDefault();
                 first === null || first === void 0 ? void 0 : first.focus();
                 return;
             }
-            if (lastTriggerFocusable && ((_f = zen.document) === null || _f === void 0 ? void 0 : _f.activeElement) === lastTriggerFocusable) {
+            if (lastTriggerFocusable && ((_e = zen.document) === null || _e === void 0 ? void 0 : _e.activeElement) === lastTriggerFocusable) {
                 e.preventDefault();
                 firstContainerFocusable === null || firstContainerFocusable === void 0 ? void 0 : firstContainerFocusable.focus();
             }
-            else if (isLastChildOfFirst && first && isChildOf((_g = zen.document) === null || _g === void 0 ? void 0 : _g.activeElement, first)) {
+            else if (isLastChildOfFirst && first && isChildOf((_f = zen.document) === null || _f === void 0 ? void 0 : _f.activeElement, first)) {
                 e.preventDefault();
             }
             return;
         }
-    }, 
-    // condition is consumed by useKeydown below, not read by handleKeyDown directly; its absence from deps is intentional.
-    [containerRef, triggerRef, isElementVisible]);
+    }, [containerRef, triggerRef, isElementVisible]);
     useKeydown(handleKeyDown, subscriptionTrigger, condition);
-    // When withTrigger mode closes (condition goes false), restore focus to the trigger
-    // if focus landed on body (which happens when the popup's focused element is unmounted).
-    // This restoration is intentionally scoped to the "focused element unmounted → body" case;
-    // the general close case (e.g. click-outside, item selection) is handled separately by the
-    // returnFocusToTrigger effect in absolute.tsx. Both are idempotent, so overlap is harmless.
-    // Initialized to false because popups mount closed; the guard below reconciles the first
-    // active/inactive edge, so a popup that mounts already open still resolves correctly.
-    const isActiveRef = useRef(false);
-    useEffect(() => {
-        var _a, _b;
-        const isActive = condition ? condition(subscriptionTrigger) : !!subscriptionTrigger;
-        // Guard: short-circuit when the raw open/close state is unchanged to avoid spurious
-        // focus restoration if an unstable condition reference re-fires this effect.
-        if (!!subscriptionTrigger === isActiveRef.current) {
-            isActiveRef.current = isActive;
-            return;
-        }
-        if (!isActive && isActiveRef.current && (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current)) {
-            const active = (_a = zen.document) === null || _a === void 0 ? void 0 : _a.activeElement;
-            if (!active || active === ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.body)) {
-                triggerRef.current.focus();
-            }
-        }
-        isActiveRef.current = isActive;
-    }, [condition, subscriptionTrigger, triggerRef]);
 };

package/esm/dataGrid/columns/checkboxColumn/checkboxCell.d.ts

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, ReactElement } from "react";
+import { FC, MouseEvent as ReactMouseEvent, PropsWithChildren, ReactElement } from "react";
 import { IZenIdComponentProps } from "../../../commonHelpers/zenComponent";
 import "./checkboxColumn.less";
 interface ICheckboxCellProps extends IZenIdComponentProps {
@@ -8,6 +8,7 @@ interface ICheckboxCellProps extends IZenIdComponentProps {
     disabled?: boolean;
     children?: ReactElement<typeof CheckboxCell.Content>;
     onChange?: (id: string, checked: boolean) => void;
+    onMouseDown?: (id: string, checked: boolean, e: ReactMouseEvent) => void;
 }
 interface ICheckboxCell extends FC<ICheckboxCellProps> {
     Content: FC<PropsWithChildren>;

package/esm/dataGrid/columns/checkboxColumn/checkboxCell.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Checkbox } from "../../../checkbox/checkbox";
 import { classNames } from "../../../commonHelpers/classNames/classNames";
-export const CheckboxCell = ({ id, checked, indeterminate, label, disabled, className, onChange, children }) => (_jsxs("div", { className: classNames(["zen-checkbox-column", className || ""]), children: [_jsx(Checkbox, { className: "zen-checkbox-column__checkbox", checked: checked, indeterminate: indeterminate, disabled: disabled, title: label, onChange: e => onChange && onChange(id, e.target.checked), wrapped: true }), children] }));
+export const CheckboxCell = ({ id, checked, indeterminate, label, disabled, className, onChange, onMouseDown, children }) => (_jsxs("div", { className: classNames(["zen-checkbox-column", className || ""]), onMouseDown: onMouseDown ? e => onMouseDown(id, checked, e) : undefined, children: [_jsx(Checkbox, { className: "zen-checkbox-column__checkbox", checked: checked, indeterminate: indeterminate, disabled: disabled, title: label, onChange: e => onChange && onChange(id, e.target.checked), wrapped: true }), children] }));
 CheckboxCell.Content = function content({ children }) {
     return _jsx("div", { className: "zen-checkbox-column__content", children: children });
 };

package/esm/dataGrid/columns/checkboxColumn/checkboxColumnWrapper.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, RefObject } from "react";
+import { MouseEvent as ReactMouseEvent, ReactNode, RefObject } from "react";
 import { IListColumnWrapper } from "../../listColumn";
 import "./checkboxColumn.less";
 import { SimpleEventHandler } from "../../../commonHelpers/simpleEventHandler";
@@ -17,7 +17,8 @@ export interface ICheckboxColumnWrapper<T extends object> extends IListColumnWra
     attach(event: "toggle", handler: (state: [Event, HTMLButtonElement]) => void): this;
     attach(event: "change", handler: (state: [string, boolean]) => void): this;
     attach(event: "change-all", handler: (state: [boolean]) => void): this;
-    detach(event: "change" | "toggle" | "change-all", handler?: (state: unknown) => void): this;
+    attach(event: "mousedown", handler: (state: [string, boolean, ReactMouseEvent]) => void): this;
+    detach(event: "change" | "toggle" | "change-all" | "mousedown", handler?: (state: unknown) => void): this;
 }
 export declare enum SelectionState {
     All = 0,
@@ -34,6 +35,7 @@ export declare class CheckboxColumnWrapper<T extends IEntityWithId> extends Simp
     private state;
     private readonly actionsClickHandler;
     private readonly changeHandler;
+    private readonly mouseDownHandler;
     private readonly changeHandlerAll;
     constructor(selections: Set<string>, options: ICheckboxColumnOptions<T>, menuTriggerRef: RefObject<HTMLButtonElement | null>);
     get selectionState(): SelectionState;

package/esm/dataGrid/columns/checkboxColumn/checkboxColumnWrapper.js

@@ -64,6 +64,15 @@ export class CheckboxColumnWrapper extends SimpleEventHandler {
                 this.fire("change", [id, checked]);
             }
         });
+        // Only fired for enabled checkboxes, so a disabled row can never become a drag anchor.
+        Object.defineProperty(this, "mouseDownHandler", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (id, checked, e) => {
+                this.fire("mousedown", [id, checked, e]);
+            }
+        });
         Object.defineProperty(this, "changeHandlerAll", {
             enumerable: true,
             configurable: true,
@@ -89,7 +98,7 @@ export class CheckboxColumnWrapper extends SimpleEventHandler {
         }
         const allowed = this.condition(entity);
         const isDisable = this.disabled ? this.disabled(entity) : this.state === SelectionState.All;
-        const cell = (_jsx(CheckboxCell, { id: entity.id, className: allowed ? "" : "zen-checkbox-column--no-checkbox", checked: this.state === SelectionState.All || this.selections.has(entity.id), indeterminate: false, disabled: isDisable, label: this.options.createTitle(entity), onChange: this.changeHandler, children: _jsx(CheckboxCell.Content, { children: value }) }));
+        const cell = (_jsx(CheckboxCell, { id: entity.id, className: allowed ? "" : "zen-checkbox-column--no-checkbox", checked: this.state === SelectionState.All || this.selections.has(entity.id), indeterminate: false, disabled: isDisable, label: this.options.createTitle(entity), onChange: this.changeHandler, onMouseDown: isDisable ? undefined : this.mouseDownHandler, children: _jsx(CheckboxCell.Content, { children: value }) }));
         return cell;
     }
     renderHeader(title) {

package/esm/dataGrid/row/row.js

@@ -57,7 +57,8 @@ const Row = ({ id, entity, columns, visibleRows, flexibleColumnWidth, isLastRow,
         return acc;
     }, { cells: [], colspan: 0 }).cells, [columns, expanded, getCellParams, isVisible, onExpandedChange, isActive, active, onClick]);
     const cells = useMemo(() => renderCells(entity, false), [entity, renderCells]);
-    const nestedCells = useMemo(() => (expanded && entity.children ? entity.children : []).map(nestedEntity => renderCells(nestedEntity, true)), [entity.children, expanded, renderCells]);
-    return (_jsxs(_Fragment, { children: [_jsx("tr", { "data-row-id": id, id: mainRowId, role: "row", "aria-level": isTreeGrid ? 1 : undefined, "aria-posinset": isTreeGrid ? ariaPosinset : undefined, "aria-setsize": isTreeGrid ? ariaSetsize : undefined, "aria-expanded": isTreeGrid ? expanded : undefined, className: classNames(["zen-data-grid__row", className || "", isLastRow ? "zen-data-grid__row--last" : ""]), children: cells }, mainRowId), nestedCells.map((nestedRow, index) => (_jsx("tr", { id: `${mainRowId}_child_${index}`, role: "row", "aria-level": 2, "aria-posinset": index + 1, "aria-setsize": nestedCells.length, className: "zen-data-grid__row zen-data-grid__row--nested", children: nestedRow }, `${mainRowId}_child_${index}`)))] }));
+    const nestedEntities = useMemo(() => (expanded && entity.children ? entity.children : []), [entity.children, expanded]);
+    const nestedCells = useMemo(() => nestedEntities.map(nestedEntity => renderCells(nestedEntity, true)), [nestedEntities, renderCells]);
+    return (_jsxs(_Fragment, { children: [_jsx("tr", { "data-row-id": id, id: mainRowId, role: "row", "aria-level": isTreeGrid ? 1 : undefined, "aria-posinset": isTreeGrid ? ariaPosinset : undefined, "aria-setsize": isTreeGrid ? ariaSetsize : undefined, "aria-expanded": isTreeGrid ? expanded : undefined, className: classNames(["zen-data-grid__row", className || "", isLastRow ? "zen-data-grid__row--last" : ""]), children: cells }, mainRowId), nestedCells.map((nestedRow, index) => (_jsx("tr", { "data-row-id": nestedEntities[index].id, id: `${mainRowId}_child_${index}`, role: "row", "aria-level": 2, "aria-posinset": index + 1, "aria-setsize": nestedCells.length, className: "zen-data-grid__row zen-data-grid__row--nested", children: nestedRow }, `${mainRowId}_child_${index}`)))] }));
 };
 export const DataGridRow = memo(Row);

package/esm/dataGrid/withSelectableRows/withSelectableRows.js

@@ -7,6 +7,8 @@ import { SelectList } from "../../selectList/selectList";
 import { CheckboxState } from "../../checkbox/checkboxState";
 import { SelectableRowsColumnWrapper } from "./columns/selectableRowsColumnWrapper";
 import { useLanguage } from "../../utils/localization/useLanguage";
+import { useDragSelection } from "../../table/selectable/useDragSelection";
+import { getDragSelectionRows } from "../../table/selectable/utils/getDragSelectionRows";
 injectString("cs", "Select all", "Vybrat v\u0161e");
 injectString("da-DK", "Select all", "V\xE6lg alle");
 injectString("de", "Select all", "Alle ausw\xE4hlen");
@@ -200,13 +202,29 @@ export const withSelectableRows = DataGridComponent => {
     const selectMenuRef = useRef(null);
     const selections = getSelections(selection);
     const allSelected = selection !== undefined && selection.allSelected;
-    const wrapper = useMemo(() => selectMode ? new SelectableRowsColumnWrapper(selections, {
-      createTitle: options.createTitle,
-      headerTitle: options.headerTitle,
-      condition: options.condition || options.checkboxVisible,
-      disabled: options.checkboxDisabled ? options.checkboxDisabled : entity => options.selectionLimit !== undefined ? !selections.has(entity.id) && selections.size >= options.selectionLimit : false,
-      header: options.selectionLimit === undefined && options.checkboxDisabled === undefined && options.checkboxVisible === undefined && options.condition === undefined || options.checkboxInHeader === true && !options.selectionLimit
-    }, selectMenuRef) : null, [selectMode, selections, options.createTitle, options.headerTitle, options.condition, options.checkboxVisible, options.checkboxDisabled, options.selectionLimit, options.checkboxInHeader]);
+    const isCheckboxVisible = useCallback(entity => {
+      const condition = options.condition || options.checkboxVisible;
+      return condition ? condition(entity) : true;
+    }, [options.condition, options.checkboxVisible]);
+    const isCheckboxDisabled = useCallback(entity => {
+      if (options.checkboxDisabled) {
+        return options.checkboxDisabled(entity);
+      }
+      if (options.selectionLimit !== undefined) {
+        return !selections.has(entity.id) && selections.size >= options.selectionLimit;
+      }
+      return false;
+    }, [options, selections]);
+    const wrapper = useMemo(() => {
+      var _a;
+      return selectMode ? new SelectableRowsColumnWrapper(selections, {
+        createTitle: options.createTitle,
+        headerTitle: options.headerTitle,
+        condition: options.condition || options.checkboxVisible,
+        disabled: (_a = options.checkboxDisabled) !== null && _a !== void 0 ? _a : isCheckboxDisabled,
+        header: options.selectionLimit === undefined && options.checkboxDisabled === undefined && options.checkboxVisible === undefined && options.condition === undefined || options.checkboxInHeader === true && !options.selectionLimit
+      }, selectMenuRef) : null;
+    }, [selectMode, selections, options.createTitle, options.headerTitle, options.condition, options.checkboxVisible, options.checkboxDisabled, options.selectionLimit, options.checkboxInHeader, isCheckboxDisabled]);
     if (wrapper) {
       wrapper.selectionState = calculateSelectionState(entities, selections, allSelected, options);
     }
@@ -214,9 +232,10 @@ export const withSelectableRows = DataGridComponent => {
       const newSelections = new Set(selections);
       entities.forEach(entity => {
         if (checked) {
-          const isVisible = options.condition ? options.condition(entity) : options.checkboxVisible ? options.checkboxVisible(entity) : true;
+          // Intentionally not isCheckboxDisabled: "select all" ignores the selection
+          // limit, it only skips rows the consumer explicitly disabled.
           const isEnabled = !options.checkboxDisabled || !options.checkboxDisabled(entity);
-          if (isVisible && isEnabled) {
+          if (isCheckboxVisible(entity) && isEnabled) {
             newSelections.add(entity.id);
           }
           return;
@@ -229,8 +248,49 @@ export const withSelectableRows = DataGridComponent => {
         allSelected: newState === SelectionState.All,
         turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
       });
-    }, [selections, entities, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
+    }, [selections, entities, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll, isCheckboxVisible]);
+    const {
+      rows: dragRows,
+      entityById
+    } = useMemo(() => getDragSelectionRows(entities), [entities]);
+    const isRowSelectable = useCallback(row => {
+      const entity = entityById.get(row.id);
+      return !!entity && isCheckboxVisible(entity) && !isCheckboxDisabled(entity);
+    }, [entityById, isCheckboxVisible, isCheckboxDisabled]);
+    // "Select all" is held as a flag rather than a list of ids, so materialise the page before
+    // a range starts editing it — otherwise the range would be applied to an empty selection.
+    const getBaseSelection = useCallback(() => allSelected ? new Set(entities.map(entity => entity.id)) : new Set(selections), [allSelected, entities, selections]);
+    const onBatchSelect = useCallback((rangeIds, select, base) => {
+      const result = new Set(base);
+      const limit = options.selectionLimit;
+      for (const id of rangeIds) {
+        if (select) {
+          if (limit !== undefined && result.size >= limit) {
+            break;
+          }
+          result.add(id);
+        } else {
+          result.delete(id);
+        }
+      }
+      const newState = calculateSelectionState(entities, result, false, options);
+      onSelect({
+        selected: [...result],
+        allSelected: newState === SelectionState.All,
+        turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
+      });
+    }, [entities, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
+    const {
+      onCheckboxMouseDown,
+      suppressNextChangeRef
+    } = useDragSelection(dragRows, props.ref, onBatchSelect, getBaseSelection, isRowSelectable, selectMode);
     const onSelectListener = useCallback(([id, checked]) => {
+      // A drag or shift-click has already emitted the whole range; swallow the click that
+      // ends it so the row it landed on is not toggled back.
+      if (suppressNextChangeRef.current) {
+        suppressNextChangeRef.current = false;
+        return;
+      }
       if (allSelected) {
         const newSelection = new Set(entities.map(entity => entity.id));
         newSelection.delete(id);
@@ -252,7 +312,7 @@ export const withSelectableRows = DataGridComponent => {
         allSelected: newState === SelectionState.All,
         turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
       });
-    }, [entities, selections, allSelected, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
+    }, [entities, selections, allSelected, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll, suppressNextChangeRef]);
     const onSelectAll = useCallback(([checked]) => {
       if (checked && ((selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll) || options.turnOffSelectAll)) {
         selectAll(true);
@@ -301,10 +361,11 @@ export const withSelectableRows = DataGridComponent => {
       wrapper.attach("change", onSelectListener);
       wrapper.attach("change-all", onSelectAll);
       wrapper.attach("toggle", onTriggerClick);
+      wrapper.attach("mousedown", ([id, checked, e]) => onCheckboxMouseDown(id, checked, e));
       return () => {
         wrapper.detach();
       };
-    }, [wrapper, onSelectListener, onSelectAll, onTriggerClick]);
+    }, [wrapper, onSelectListener, onSelectAll, onTriggerClick, onCheckboxMouseDown]);
     const listColumns = useMemo(() => {
       const newColumns = columns.map(c => Object.assign({}, c));
       // Remove CheckboxColumnWrappers from wrappers list

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

@@ -5,19 +5,15 @@ export declare enum SelectionState {
     None = "none"
 }
 export interface ISelectionValue {
-    /**
-     * Whether every selectable row across every page is selected.
-     */
     all: boolean;
-    /**
-     * The meaning of this list depends on `all`:
-     * - when `all` is `false`, it is the ids explicitly *included* in the selection.
-     * - when `all` is `true`, it is the ids explicitly *excluded* from the otherwise
-     *   fully-selected set (e.g. rows unchecked after a "select all" across paginated data).
-     *
-     * This lets `all: true` represent "all except these ids" without needing to know the
-     * full id universe (MYG-142234) - unchecking a row while `all` is true only ever adds
-     * to this exclusion list; it must never be rebuilt from the currently rendered page.
-     */
     selected: string[];
 }
+/**
+ * One checkbox row in the order it is rendered. Expanded nested rows are part of this list,
+ * directly after their parent, so a drag or shift-click range can span nesting levels the
+ * same way it spans sibling rows.
+ */
+export interface IDragSelectionRow {
+    id: string;
+    isNested: boolean;
+}

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

@@ -0,0 +1,10 @@
+import { MouseEvent as ReactMouseEvent, RefObject } from "react";
+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) => {
+    onCheckboxMouseDown: (id: string, checked: boolean, e: ReactMouseEvent) => void;
+    suppressNextChangeRef: RefObject<boolean>;
+};

package/esm/table/selectable/useDragSelection.js

@@ -0,0 +1,135 @@
+import { useCallback, useEffect, useRef } from "react";
+import { zen } from "../../utils/zen";
+import { getRangeIds } from "./utils/getRangeIds";
+const DRAG_CLASS = "zen-not-selectable";
+/**
+ * @param rows every checkbox row in render order, expanded nested rows included, so ranges can
+ * span nesting levels.
+ */
+export const useDragSelection = (rows, gridRef, onBatchSelect, getBaseSelection, isSelectable, isEnabled) => {
+    const rowsRef = useRef(rows);
+    rowsRef.current = rows;
+    const getBaseSelectionRef = useRef(getBaseSelection);
+    getBaseSelectionRef.current = getBaseSelection;
+    const onBatchSelectRef = useRef(onBatchSelect);
+    onBatchSelectRef.current = onBatchSelect;
+    const isSelectableRef = useRef(isSelectable);
+    isSelectableRef.current = isSelectable;
+    const isEnabledRef = useRef(isEnabled);
+    isEnabledRef.current = isEnabled;
+    const anchorIdRef = useRef(null);
+    const anchorSelectRef = useRef(true);
+    const baseSelectedRef = useRef(new Set());
+    const isDraggingRef = useRef(false);
+    const movedRef = useRef(false);
+    const lastResultKeyRef = useRef("");
+    const lastPointRef = useRef(null);
+    const suppressNextChangeRef = useRef(false);
+    const attachedGridElementRef = useRef(null);
+    const emitRange = useCallback((currentId) => {
+        const anchorId = anchorIdRef.current;
+        if (anchorId === null) {
+            return;
+        }
+        const range = getRangeIds(rowsRef.current, anchorId, currentId, isSelectableRef.current);
+        if (range.length === 0) {
+            return;
+        }
+        const select = anchorSelectRef.current;
+        const key = `${select}|${range.join(",")}`;
+        if (key === lastResultKeyRef.current) {
+            return;
+        }
+        lastResultKeyRef.current = key;
+        onBatchSelectRef.current(range, select, baseSelectedRef.current);
+    }, []);
+    const extend = useCallback((x, y) => {
+        var _a, _b;
+        lastPointRef.current = { x, y };
+        const row = (_b = (_a = zen.document) === null || _a === void 0 ? void 0 : _a.elementFromPoint(x, y)) === null || _b === void 0 ? void 0 : _b.closest("[data-row-id]");
+        const currentId = row === null || row === void 0 ? void 0 : row.getAttribute("data-row-id");
+        if (!currentId) {
+            return;
+        }
+        if (currentId !== anchorIdRef.current) {
+            movedRef.current = true;
+        }
+        if (!movedRef.current) {
+            return;
+        }
+        emitRange(currentId);
+    }, [emitRange]);
+    const onMouseMove = useCallback((e) => {
+        extend(e.clientX, e.clientY);
+    }, [extend]);
+    const onScroll = useCallback(() => {
+        const point = lastPointRef.current;
+        if (point) {
+            extend(point.x, point.y);
+        }
+    }, [extend]);
+    const endDrag = useCallback(() => {
+        var _a, _b, _c, _d;
+        if (!isDraggingRef.current) {
+            return;
+        }
+        isDraggingRef.current = false;
+        if (movedRef.current) {
+            suppressNextChangeRef.current = true;
+        }
+        (_a = zen.document) === null || _a === void 0 ? void 0 : _a.removeEventListener("mousemove", onMouseMove);
+        (_b = zen.document) === null || _b === void 0 ? void 0 : _b.removeEventListener("mouseup", endDrag);
+        (_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
+    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.
+        if (e.button === 0) {
+            suppressNextChangeRef.current = false;
+        }
+        if (!isEnabledRef.current || e.button !== 0) {
+            return;
+        }
+        if (e.shiftKey && anchorIdRef.current !== null) {
+            e.preventDefault();
+            const anchorId = anchorIdRef.current;
+            const anchorInList = rowsRef.current.some(row => row.id === anchorId);
+            if (!anchorInList) {
+                // The anchor is no longer rendered (e.g. its parent was collapsed, or the list was
+                // re-filtered/paginated since). Drop the stale anchor and let the target row's own
+                // onChange fire normally, rather than swallowing it as a silent no-op.
+                anchorIdRef.current = null;
+                return;
+            }
+            // Gmail-style: every shift-click re-applies the range to the selection captured when
+            // the anchor was clicked, so moving the target closer to the anchor deselects the rows
+            // that dropped out of the range. Shift-clicking the anchor itself collapses the range
+            // to nothing, restoring that captured selection — the anchor included.
+            const range = id === anchorId ? [] : getRangeIds(rowsRef.current, anchorId, id, isSelectableRef.current);
+            // Suppress even when the range is empty to prevent the anchor from double-toggling
+            // on a same-row shift-click.
+            suppressNextChangeRef.current = true;
+            onBatchSelectRef.current(range, anchorSelectRef.current, baseSelectedRef.current);
+            return;
+        }
+        anchorIdRef.current = id;
+        anchorSelectRef.current = !checked;
+        baseSelectedRef.current = getBaseSelectionRef.current();
+        isDraggingRef.current = true;
+        movedRef.current = false;
+        lastResultKeyRef.current = "";
+        lastPointRef.current = { x: e.clientX, y: e.clientY };
+        attachedGridElementRef.current = (_a = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) !== null && _a !== void 0 ? _a : null;
+        (_b = attachedGridElementRef.current) === null || _b === void 0 ? void 0 : _b.classList.add(DRAG_CLASS);
+        (_c = zen.document) === null || _c === void 0 ? void 0 : _c.addEventListener("mousemove", onMouseMove);
+        (_d = zen.document) === null || _d === void 0 ? void 0 : _d.addEventListener("mouseup", endDrag);
+        (_e = attachedGridElementRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener("scroll", onScroll);
+    }, [gridRef, onMouseMove, onScroll, endDrag]);
+    useEffect(() => {
+        anchorIdRef.current = null;
+    }, [rows]);
+    useEffect(() => endDrag, [endDrag]);
+    return { onCheckboxMouseDown, suppressNextChangeRef };
+};

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

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, RefObject } from "react";
 import { IListColumn } from "../table";
 import { ISelectionValue, SelectionState } from "./interfaces";
 import "./selectableColumn.less";
@@ -33,7 +33,7 @@ export declare const getEmptySelection: () => {
     selected: string[];
 };
 export declare const SelectableWrapperName = "Selectable";
-export declare const useSelectableRows: <T extends IRowEntity<N>, N extends IEntityWithId>(columns: IListColumn<T, N>[], entities: T[], isMobile: boolean, selectMode: boolean, setSelectMode: (value: boolean) => void, selectable?: ISelectableRowsOptions<T, N>, isInfinite?: boolean) => {
+export declare const useSelectableRows: <T extends IRowEntity<N>, N extends IEntityWithId>(columns: IListColumn<T, N>[], entities: T[], isMobile: boolean, selectMode: boolean, setSelectMode: (value: boolean) => void, selectable?: ISelectableRowsOptions<T, N>, isInfinite?: boolean, gridRef?: RefObject<HTMLElement | null>, expandedRows?: string[]) => {
     selectableColumns: IListColumn<T, N>[];
     selectableFeedWrapper: (primaryData: ReactNode, secondaryData: ReactNode, entity: T | N, isNested: boolean) => [ReactNode, ReactNode];
 };