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

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

@@ -1,4 +1,4 @@
-import { FC, MouseEvent as ReactMouseEvent, PropsWithChildren, ReactElement } from "react";
+import { FC, PropsWithChildren, ReactElement } from "react";
 import { IZenIdComponentProps } from "../../../commonHelpers/zenComponent";
 import "./checkboxColumn.less";
 interface ICheckboxCellProps extends IZenIdComponentProps {
@@ -8,7 +8,6 @@ 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/dist/dataGrid/columns/checkboxColumn/checkboxCell.js

@@ -4,7 +4,7 @@ exports.CheckboxCell = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const checkbox_1 = require("../../../checkbox/checkbox");
 const classNames_1 = require("../../../commonHelpers/classNames/classNames");
-const CheckboxCell = ({ id, checked, indeterminate, label, disabled, className, onChange, onMouseDown, children }) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-checkbox-column", className || ""]), onMouseDown: onMouseDown ? e => onMouseDown(id, checked, e) : undefined, children: [(0, jsx_runtime_1.jsx)(checkbox_1.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] }));
+const CheckboxCell = ({ id, checked, indeterminate, label, disabled, className, onChange, children }) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-checkbox-column", className || ""]), children: [(0, jsx_runtime_1.jsx)(checkbox_1.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] }));
 exports.CheckboxCell = CheckboxCell;
 exports.CheckboxCell.Content = function content({ children }) {
     return (0, jsx_runtime_1.jsx)("div", { className: "zen-checkbox-column__content", children: children });

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

@@ -1,4 +1,4 @@
-import { MouseEvent as ReactMouseEvent, ReactNode, RefObject } from "react";
+import { ReactNode, RefObject } from "react";
 import { IListColumnWrapper } from "../../listColumn";
 import "./checkboxColumn.less";
 import { SimpleEventHandler } from "../../../commonHelpers/simpleEventHandler";
@@ -17,8 +17,7 @@ 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;
-    attach(event: "mousedown", handler: (state: [string, boolean, ReactMouseEvent]) => void): this;
-    detach(event: "change" | "toggle" | "change-all" | "mousedown", handler?: (state: unknown) => void): this;
+    detach(event: "change" | "toggle" | "change-all", handler?: (state: unknown) => void): this;
 }
 export declare enum SelectionState {
     All = 0,
@@ -35,7 +34,6 @@ 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/dist/dataGrid/columns/checkboxColumn/checkboxColumnWrapper.js

@@ -67,15 +67,6 @@ class CheckboxColumnWrapper extends simpleEventHandler_1.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,
@@ -101,7 +92,7 @@ class CheckboxColumnWrapper extends simpleEventHandler_1.SimpleEventHandler {
         }
         const allowed = this.condition(entity);
         const isDisable = this.disabled ? this.disabled(entity) : this.state === SelectionState.All;
-        const cell = ((0, jsx_runtime_1.jsx)(checkboxCell_1.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: (0, jsx_runtime_1.jsx)(checkboxCell_1.CheckboxCell.Content, { children: value }) }));
+        const cell = ((0, jsx_runtime_1.jsx)(checkboxCell_1.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: (0, jsx_runtime_1.jsx)(checkboxCell_1.CheckboxCell.Content, { children: value }) }));
         return cell;
     }
     renderHeader(title) {

package/dist/dataGrid/row/row.js

@@ -60,8 +60,7 @@ const Row = ({ id, entity, columns, visibleRows, flexibleColumnWidth, isLastRow,
         return acc;
     }, { cells: [], colspan: 0 }).cells, [columns, expanded, getCellParams, isVisible, onExpandedChange, isActive, active, onClick]);
     const cells = (0, react_1.useMemo)(() => renderCells(entity, false), [entity, renderCells]);
-    const nestedEntities = (0, react_1.useMemo)(() => (expanded && entity.children ? entity.children : []), [entity.children, expanded]);
-    const nestedCells = (0, react_1.useMemo)(() => nestedEntities.map(nestedEntity => renderCells(nestedEntity, true)), [nestedEntities, renderCells]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.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: (0, classNames_1.classNames)(["zen-data-grid__row", className || "", isLastRow ? "zen-data-grid__row--last" : ""]), children: cells }, mainRowId), nestedCells.map((nestedRow, index) => ((0, jsx_runtime_1.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}`)))] }));
+    const nestedCells = (0, react_1.useMemo)(() => (expanded && entity.children ? entity.children : []).map(nestedEntity => renderCells(nestedEntity, true)), [entity.children, expanded, renderCells]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.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: (0, classNames_1.classNames)(["zen-data-grid__row", className || "", isLastRow ? "zen-data-grid__row--last" : ""]), children: cells }, mainRowId), nestedCells.map((nestedRow, index) => ((0, jsx_runtime_1.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}`)))] }));
 };
 exports.DataGridRow = (0, react_1.memo)(Row);

package/dist/dataGrid/withSelectableRows/withSelectableRows.js

@@ -15,8 +15,6 @@ const selectList_1 = require("../../selectList/selectList");
 const checkboxState_1 = require("../../checkbox/checkboxState");
 const selectableRowsColumnWrapper_1 = require("./columns/selectableRowsColumnWrapper");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
-const useDragSelection_1 = require("../../table/selectable/useDragSelection");
-const getDragSelectionRows_1 = require("../../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");
@@ -211,29 +209,13 @@ const withSelectableRows = DataGridComponent => {
     const selectMenuRef = (0, react_1.useRef)(null);
     const selections = (0, exports.getSelections)(selection);
     const allSelected = selection !== undefined && selection.allSelected;
-    const isCheckboxVisible = (0, react_1.useCallback)(entity => {
-      const condition = options.condition || options.checkboxVisible;
-      return condition ? condition(entity) : true;
-    }, [options.condition, options.checkboxVisible]);
-    const isCheckboxDisabled = (0, react_1.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 = (0, react_1.useMemo)(() => {
-      var _a;
-      return selectMode ? new selectableRowsColumnWrapper_1.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]);
+    const wrapper = (0, react_1.useMemo)(() => selectMode ? new selectableRowsColumnWrapper_1.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]);
     if (wrapper) {
       wrapper.selectionState = calculateSelectionState(entities, selections, allSelected, options);
     }
@@ -241,10 +223,9 @@ const withSelectableRows = DataGridComponent => {
       const newSelections = new Set(selections);
       entities.forEach(entity => {
         if (checked) {
-          // Intentionally not isCheckboxDisabled: "select all" ignores the selection
-          // limit, it only skips rows the consumer explicitly disabled.
+          const isVisible = options.condition ? options.condition(entity) : options.checkboxVisible ? options.checkboxVisible(entity) : true;
           const isEnabled = !options.checkboxDisabled || !options.checkboxDisabled(entity);
-          if (isCheckboxVisible(entity) && isEnabled) {
+          if (isVisible && isEnabled) {
             newSelections.add(entity.id);
           }
           return;
@@ -257,49 +238,8 @@ const withSelectableRows = DataGridComponent => {
         allSelected: newState === checkboxColumnWrapper_1.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, isCheckboxVisible]);
-    const {
-      rows: dragRows,
-      entityById
-    } = (0, react_1.useMemo)(() => (0, getDragSelectionRows_1.getDragSelectionRows)(entities), [entities]);
-    const isRowSelectable = (0, react_1.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 = (0, react_1.useCallback)(() => allSelected ? new Set(entities.map(entity => entity.id)) : new Set(selections), [allSelected, entities, selections]);
-    const onBatchSelect = (0, react_1.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 === checkboxColumnWrapper_1.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
-    } = (0, useDragSelection_1.useDragSelection)(dragRows, props.ref, onBatchSelect, getBaseSelection, isRowSelectable, selectMode);
+    }, [selections, entities, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
     const onSelectListener = (0, react_1.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);
@@ -321,7 +261,7 @@ const withSelectableRows = DataGridComponent => {
         allSelected: newState === checkboxColumnWrapper_1.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, suppressNextChangeRef]);
+    }, [entities, selections, allSelected, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
     const onSelectAll = (0, react_1.useCallback)(([checked]) => {
       if (checked && ((selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll) || options.turnOffSelectAll)) {
         selectAll(true);
@@ -370,11 +310,10 @@ 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, onCheckboxMouseDown]);
+    }, [wrapper, onSelectListener, onSelectAll, onTriggerClick]);
     const listColumns = (0, react_1.useMemo)(() => {
       const newColumns = columns.map(c => Object.assign({}, c));
       // Remove CheckboxColumnWrappers from wrappers list

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

@@ -8,12 +8,3 @@ export interface ISelectionValue {
     all: boolean;
     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/dist/table/selectable/useSelectableRows.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, RefObject } from "react";
+import { ReactNode } 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, gridRef?: RefObject<HTMLElement | null>, expandedRows?: string[]) => {
+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) => {
     selectableColumns: IListColumn<T, N>[];
     selectableFeedWrapper: (primaryData: ReactNode, secondaryData: ReactNode, entity: T | N, isNested: boolean) => [ReactNode, ReactNode];
 };

package/dist/table/selectable/useSelectableRows.js

@@ -84,8 +84,6 @@ const useLanguage_1 = require("../../utils/localization/useLanguage");
 const checkRow_1 = require("./utils/checkRow");
 const isRowChecked_1 = require("./utils/isRowChecked");
 const getCurrentPageSelection_1 = require("./utils/getCurrentPageSelection");
-const useDragSelection_1 = require("./useDragSelection");
-const getDragSelectionRows_1 = require("./utils/getDragSelectionRows");
 const getEmptySelection = () => ({
   all: false,
   selected: []
@@ -94,7 +92,7 @@ exports.getEmptySelection = getEmptySelection;
 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 useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMode, selectable, isInfinite = false, gridRef, expandedRows) => {
+const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMode, selectable, isInfinite = false) => {
   var _a;
   const {
     translate
@@ -164,47 +162,6 @@ const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMod
     selectable === null || selectable === void 0 ? void 0 : selectable.onSelect(newValue);
     setSelectMode(newValue.all || newValue.selected.length > 0);
   }, [checkboxDisabled, checkboxVisible, entities, selectable, setSelectMode, setState, getNewSelection]);
-  const onBatchSelect = (0, react_1.useCallback)((rangeIds, select, base) => {
-    var _a;
-    const result = new Set(base);
-    const limit = selectable === null || selectable === void 0 ? void 0 : selectable.selectionLimit;
-    for (const id of rangeIds) {
-      if (select && limit !== undefined && result.size >= limit) {
-        break;
-      }
-      (0, checkRow_1.checkRow)(result, selectable, entities, id, select);
-    }
-    const newState = (0, calculateSelectionState_1.calculateSelectionState)(entities, result, ((_a = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _a === void 0 ? void 0 : _a.all) || false, checkboxVisible, checkboxDisabled, selectable === null || selectable === void 0 ? void 0 : selectable.strategy);
-    const newValue = {
-      selected: [...result],
-      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, checkboxVisible, checkboxDisabled, setSelectMode]);
-  // Deliberately independent of the current selection, so the drag anchor survives the
-  // selection changes a drag itself produces.
-  const {
-    rows: dragRows,
-    entityById
-  } = (0, react_1.useMemo)(() => (0, getDragSelectionRows_1.getDragSelectionRows)(entities, expandedRows), [entities, expandedRows]);
-  const isSelectable = (0, react_1.useCallback)(row => {
-    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)(() => state === interfaces_1.SelectionState.All ? (0, getCurrentPageSelection_1.getCurrentPageSelection)(entities, selectable) : new Set(selections), [state, entities, selectable, selections]);
-  const {
-    onCheckboxMouseDown,
-    suppressNextChangeRef
-  } = (0, useDragSelection_1.useDragSelection)(dragRows, gridRef, onBatchSelect, getBaseSelection, isSelectable, !!selectable);
-  const onCheckboxChange = (0, react_1.useCallback)((id, checked) => {
-    if (suppressNextChangeRef.current) {
-      suppressNextChangeRef.current = false;
-      return;
-    }
-    onSelectListener(id, checked);
-  }, [onSelectListener, suppressNextChangeRef]);
   const onChangeSelectionState = (0, react_1.useCallback)(newState => {
     var _a, _b;
     if (newState === interfaces_1.SelectionState.All) {
@@ -282,8 +239,7 @@ const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMod
           indeterminate: checked.indeterminate,
           disabled: isDisable,
           label: checkboxTitle(entity),
-          onChange: onCheckboxChange,
-          onMouseDown: isDisable ? undefined : onCheckboxMouseDown,
+          onChange: onSelectListener,
           children: (0, jsx_runtime_1.jsx)(checkboxCell_1.CheckboxCell.Content, {
             children: value
           })
@@ -329,7 +285,7 @@ const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMod
         return cell;
       }
     };
-  }, [checkboxDisabled, checkboxTitle, checkboxVisible, headerTitle, onChangeSelectionState, onCheckboxChange, onCheckboxMouseDown, hasSelectable, checkboxEmitsCurrentPage, checkboxInHeaderValue, selectableHeader, selectableTurnOffSelectAll, isInfinite, selectable, selectableState, state, isMobile, checkboxPlaceholder, isEntityChecked, entities, setSelectMode]);
+  }, [checkboxDisabled, checkboxTitle, checkboxVisible, headerTitle, onChangeSelectionState, onSelectListener, hasSelectable, checkboxEmitsCurrentPage, checkboxInHeaderValue, selectableHeader, selectableTurnOffSelectAll, isInfinite, selectable, selectableState, 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/table.js

@@ -288,7 +288,7 @@ const TableInner = ({
   const {
     selectableColumns,
     selectableFeedWrapper
-  } = (0, useSelectableRows_1.useSelectableRows)(nestedColumns, entities, isMobile, selectMode, setMobileSelectMode, isLoading ? undefined : selectable, isInfinite, gridRef, expanded);
+  } = (0, useSelectableRows_1.useSelectableRows)(nestedColumns, entities, isMobile, selectMode, setMobileSelectMode, isLoading ? undefined : selectable, isInfinite);
   const {
     sortableColumns,
     feedSortControl

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

@@ -1,4 +1,4 @@
-import { FC, MouseEvent as ReactMouseEvent, PropsWithChildren, ReactElement } from "react";
+import { FC, PropsWithChildren, ReactElement } from "react";
 import { IZenIdComponentProps } from "../../../commonHelpers/zenComponent";
 import "./checkboxColumn.less";
 interface ICheckboxCellProps extends IZenIdComponentProps {
@@ -8,7 +8,6 @@ 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, 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] }));
+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] }));
 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 { MouseEvent as ReactMouseEvent, ReactNode, RefObject } from "react";
+import { ReactNode, RefObject } from "react";
 import { IListColumnWrapper } from "../../listColumn";
 import "./checkboxColumn.less";
 import { SimpleEventHandler } from "../../../commonHelpers/simpleEventHandler";
@@ -17,8 +17,7 @@ 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;
-    attach(event: "mousedown", handler: (state: [string, boolean, ReactMouseEvent]) => void): this;
-    detach(event: "change" | "toggle" | "change-all" | "mousedown", handler?: (state: unknown) => void): this;
+    detach(event: "change" | "toggle" | "change-all", handler?: (state: unknown) => void): this;
 }
 export declare enum SelectionState {
     All = 0,
@@ -35,7 +34,6 @@ 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,15 +64,6 @@ 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,
@@ -98,7 +89,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, onMouseDown: isDisable ? undefined : this.mouseDownHandler, 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, children: _jsx(CheckboxCell.Content, { children: value }) }));
         return cell;
     }
     renderHeader(title) {

package/esm/dataGrid/row/row.js

@@ -57,8 +57,7 @@ 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 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}`)))] }));
+    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}`)))] }));
 };
 export const DataGridRow = memo(Row);

package/esm/dataGrid/withSelectableRows/withSelectableRows.js

@@ -7,8 +7,6 @@ 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");
@@ -202,29 +200,13 @@ export const withSelectableRows = DataGridComponent => {
     const selectMenuRef = useRef(null);
     const selections = getSelections(selection);
     const allSelected = selection !== undefined && selection.allSelected;
-    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]);
+    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]);
     if (wrapper) {
       wrapper.selectionState = calculateSelectionState(entities, selections, allSelected, options);
     }
@@ -232,10 +214,9 @@ export const withSelectableRows = DataGridComponent => {
       const newSelections = new Set(selections);
       entities.forEach(entity => {
         if (checked) {
-          // Intentionally not isCheckboxDisabled: "select all" ignores the selection
-          // limit, it only skips rows the consumer explicitly disabled.
+          const isVisible = options.condition ? options.condition(entity) : options.checkboxVisible ? options.checkboxVisible(entity) : true;
           const isEnabled = !options.checkboxDisabled || !options.checkboxDisabled(entity);
-          if (isCheckboxVisible(entity) && isEnabled) {
+          if (isVisible && isEnabled) {
             newSelections.add(entity.id);
           }
           return;
@@ -248,49 +229,8 @@ 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, 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);
+    }, [selections, entities, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
     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);
@@ -312,7 +252,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, suppressNextChangeRef]);
+    }, [entities, selections, allSelected, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
     const onSelectAll = useCallback(([checked]) => {
       if (checked && ((selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll) || options.turnOffSelectAll)) {
         selectAll(true);
@@ -361,11 +301,10 @@ 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, onCheckboxMouseDown]);
+    }, [wrapper, onSelectListener, onSelectAll, onTriggerClick]);
     const listColumns = useMemo(() => {
       const newColumns = columns.map(c => Object.assign({}, c));
       // Remove CheckboxColumnWrappers from wrappers list

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

@@ -8,12 +8,3 @@ export interface ISelectionValue {
     all: boolean;
     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/useSelectableRows.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, RefObject } from "react";
+import { ReactNode } 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, gridRef?: RefObject<HTMLElement | null>, expandedRows?: string[]) => {
+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) => {
     selectableColumns: IListColumn<T, N>[];
     selectableFeedWrapper: (primaryData: ReactNode, secondaryData: ReactNode, entity: T | N, isNested: boolean) => [ReactNode, ReactNode];
 };

package/esm/table/selectable/useSelectableRows.js

@@ -10,8 +10,6 @@ import { useLanguage } from "../../utils/localization/useLanguage";
 import { checkRow } from "./utils/checkRow";
 import { isRowChecked } from "./utils/isRowChecked";
 import { getCurrentPageSelection } from "./utils/getCurrentPageSelection";
-import { useDragSelection } from "./useDragSelection";
-import { getDragSelectionRows } from "./utils/getDragSelectionRows";
 injectString("cs", "Select all", "Vybrat v\u0161e");
 injectString("da-DK", "Select all", "V\xE6lg alle");
 injectString("de", "Select all", "Alle ausw\xE4hlen");
@@ -85,7 +83,7 @@ export const getEmptySelection = () => ({
 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;
-export const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMode, selectable, isInfinite = false, gridRef, expandedRows) => {
+export const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMode, selectable, isInfinite = false) => {
   var _a;
   const {
     translate
@@ -155,47 +153,6 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
     selectable === null || selectable === void 0 ? void 0 : selectable.onSelect(newValue);
     setSelectMode(newValue.all || newValue.selected.length > 0);
   }, [checkboxDisabled, checkboxVisible, entities, selectable, setSelectMode, setState, getNewSelection]);
-  const onBatchSelect = useCallback((rangeIds, select, base) => {
-    var _a;
-    const result = new Set(base);
-    const limit = selectable === null || selectable === void 0 ? void 0 : selectable.selectionLimit;
-    for (const id of rangeIds) {
-      if (select && limit !== undefined && result.size >= limit) {
-        break;
-      }
-      checkRow(result, selectable, entities, id, select);
-    }
-    const newState = calculateSelectionState(entities, result, ((_a = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _a === void 0 ? void 0 : _a.all) || false, checkboxVisible, checkboxDisabled, selectable === null || selectable === void 0 ? void 0 : selectable.strategy);
-    const newValue = {
-      selected: [...result],
-      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, checkboxVisible, checkboxDisabled, setSelectMode]);
-  // Deliberately independent of the current selection, so the drag anchor survives the
-  // selection changes a drag itself produces.
-  const {
-    rows: dragRows,
-    entityById
-  } = useMemo(() => getDragSelectionRows(entities, expandedRows), [entities, expandedRows]);
-  const isSelectable = useCallback(row => {
-    const entity = entityById.get(row.id);
-    return !!entity && checkboxVisible(entity, row.isNested) && !checkboxDisabled(entity, row.isNested);
-  }, [entityById, checkboxVisible, checkboxDisabled]);
-  const getBaseSelection = useCallback(() => state === SelectionState.All ? getCurrentPageSelection(entities, selectable) : new Set(selections), [state, entities, selectable, selections]);
-  const {
-    onCheckboxMouseDown,
-    suppressNextChangeRef
-  } = useDragSelection(dragRows, gridRef, onBatchSelect, getBaseSelection, isSelectable, !!selectable);
-  const onCheckboxChange = useCallback((id, checked) => {
-    if (suppressNextChangeRef.current) {
-      suppressNextChangeRef.current = false;
-      return;
-    }
-    onSelectListener(id, checked);
-  }, [onSelectListener, suppressNextChangeRef]);
   const onChangeSelectionState = useCallback(newState => {
     var _a, _b;
     if (newState === SelectionState.All) {
@@ -273,8 +230,7 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
           indeterminate: checked.indeterminate,
           disabled: isDisable,
           label: checkboxTitle(entity),
-          onChange: onCheckboxChange,
-          onMouseDown: isDisable ? undefined : onCheckboxMouseDown,
+          onChange: onSelectListener,
           children: _jsx(CheckboxCell.Content, {
             children: value
           })
@@ -320,7 +276,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, selectableState, state, isMobile, checkboxPlaceholder, isEntityChecked, entities, setSelectMode]);
+  }, [checkboxDisabled, checkboxTitle, checkboxVisible, headerTitle, onChangeSelectionState, onSelectListener, hasSelectable, checkboxEmitsCurrentPage, checkboxInHeaderValue, selectableHeader, selectableTurnOffSelectAll, isInfinite, selectable, selectableState, 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/table.js

@@ -238,7 +238,7 @@ const TableInner = ({
   const {
     selectableColumns,
     selectableFeedWrapper
-  } = useSelectableRows(nestedColumns, entities, isMobile, selectMode, setMobileSelectMode, isLoading ? undefined : selectable, isInfinite, gridRef, expanded);
+  } = useSelectableRows(nestedColumns, entities, isMobile, selectMode, setMobileSelectMode, isLoading ? undefined : selectable, isInfinite);
   const {
     sortableColumns,
     feedSortControl

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@geotab/zenith",
-    "version": "3.16.0-beta.3",
+    "version": "3.16.0-beta.4",
     "description": "Zenith components library on React",
     "main": "dist/index.js",
     "types": "esm/index.d.ts",

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

@@ -1,10 +0,0 @@
-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/dist/table/selectable/useDragSelection.js

@@ -1,139 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDragSelection = void 0;
-const react_1 = require("react");
-const zen_1 = require("../../utils/zen");
-const getRangeIds_1 = require("./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.
- */
-const useDragSelection = (rows, gridRef, onBatchSelect, getBaseSelection, isSelectable, isEnabled) => {
-    const rowsRef = (0, react_1.useRef)(rows);
-    rowsRef.current = rows;
-    const getBaseSelectionRef = (0, react_1.useRef)(getBaseSelection);
-    getBaseSelectionRef.current = getBaseSelection;
-    const onBatchSelectRef = (0, react_1.useRef)(onBatchSelect);
-    onBatchSelectRef.current = onBatchSelect;
-    const isSelectableRef = (0, react_1.useRef)(isSelectable);
-    isSelectableRef.current = isSelectable;
-    const isEnabledRef = (0, react_1.useRef)(isEnabled);
-    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 isDraggingRef = (0, react_1.useRef)(false);
-    const movedRef = (0, react_1.useRef)(false);
-    const lastResultKeyRef = (0, react_1.useRef)("");
-    const lastPointRef = (0, react_1.useRef)(null);
-    const suppressNextChangeRef = (0, react_1.useRef)(false);
-    const attachedGridElementRef = (0, react_1.useRef)(null);
-    const emitRange = (0, react_1.useCallback)((currentId) => {
-        const anchorId = anchorIdRef.current;
-        if (anchorId === null) {
-            return;
-        }
-        const range = (0, getRangeIds_1.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 = (0, react_1.useCallback)((x, y) => {
-        var _a, _b;
-        lastPointRef.current = { x, y };
-        const row = (_b = (_a = zen_1.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 = (0, react_1.useCallback)((e) => {
-        extend(e.clientX, e.clientY);
-    }, [extend]);
-    const onScroll = (0, react_1.useCallback)(() => {
-        const point = lastPointRef.current;
-        if (point) {
-            extend(point.x, point.y);
-        }
-    }, [extend]);
-    const endDrag = (0, react_1.useCallback)(() => {
-        var _a, _b, _c, _d;
-        if (!isDraggingRef.current) {
-            return;
-        }
-        isDraggingRef.current = false;
-        if (movedRef.current) {
-            suppressNextChangeRef.current = true;
-        }
-        (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.removeEventListener("mousemove", onMouseMove);
-        (_b = zen_1.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 = (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.
-        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 ? [] : (0, getRangeIds_1.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_1.zen.document) === null || _c === void 0 ? void 0 : _c.addEventListener("mousemove", onMouseMove);
-        (_d = zen_1.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]);
-    (0, react_1.useEffect)(() => {
-        anchorIdRef.current = null;
-    }, [rows]);
-    (0, react_1.useEffect)(() => endDrag, [endDrag]);
-    return { onCheckboxMouseDown, suppressNextChangeRef };
-};
-exports.useDragSelection = useDragSelection;

package/dist/table/selectable/utils/getDragSelectionRows.d.ts

@@ -1,15 +0,0 @@
-import { IEntityWithId } from "../../../commonHelpers/entity";
-import { IRowEntity } from "../../../dataGrid/row/row";
-import { IDragSelectionRow } from "../interfaces";
-export interface IDragSelection<T> {
-    /** The rows in render order. */
-    rows: IDragSelectionRow[];
-    /** Every entity a row can point at, parents and children alike. */
-    entityById: Map<string, T>;
-}
-/**
- * Flattens the entities into the rows the grid actually renders: each entity followed by its
- * children while it is expanded. Drag and shift-click ranges walk this list, so they cross
- * nesting levels the way the user sees them on screen.
- */
-export declare const getDragSelectionRows: <T extends IRowEntity<N>, N extends IEntityWithId>(entities: T[], expandedRows?: string[]) => IDragSelection<T | N>;

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

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDragSelectionRows = void 0;
-/**
- * Flattens the entities into the rows the grid actually renders: each entity followed by its
- * children while it is expanded. Drag and shift-click ranges walk this list, so they cross
- * nesting levels the way the user sees them on screen.
- */
-const getDragSelectionRows = (entities, expandedRows) => {
-    const expanded = new Set(expandedRows);
-    const rows = [];
-    const entityById = new Map();
-    entities.forEach(entity => {
-        rows.push({ id: entity.id, isNested: false });
-        entityById.set(entity.id, entity);
-        // Children are always indexed — a collapsed row's children still need to resolve for
-        // the selection predicates — but only an expanded row contributes them to the range.
-        const isExpanded = expanded.has(entity.id);
-        (entity.children || []).forEach(child => {
-            entityById.set(child.id, child);
-            if (isExpanded) {
-                rows.push({ id: child.id, isNested: true });
-            }
-        });
-    });
-    return { rows, entityById };
-};
-exports.getDragSelectionRows = getDragSelectionRows;

package/dist/table/selectable/utils/getRangeIds.d.ts

@@ -1,2 +0,0 @@
-import { IDragSelectionRow } from "../interfaces";
-export declare const getRangeIds: (rows: IDragSelectionRow[], fromId: string, toId: string, isSelectable: (row: IDragSelectionRow) => boolean) => string[];

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

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRangeIds = void 0;
-const getRangeIds = (rows, fromId, toId, isSelectable) => {
-    const fromIdx = rows.findIndex(row => row.id === fromId);
-    const toIdx = rows.findIndex(row => row.id === toId);
-    if (fromIdx === -1 || toIdx === -1) {
-        return [];
-    }
-    const start = Math.min(fromIdx, toIdx);
-    const end = Math.max(fromIdx, toIdx);
-    const ids = [];
-    for (let i = start; i <= end; i++) {
-        const row = rows[i];
-        if (isSelectable(row)) {
-            ids.push(row.id);
-        }
-    }
-    return ids;
-};
-exports.getRangeIds = getRangeIds;

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

@@ -1,10 +0,0 @@
-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

@@ -1,135 +0,0 @@
-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/utils/getDragSelectionRows.d.ts

@@ -1,15 +0,0 @@
-import { IEntityWithId } from "../../../commonHelpers/entity";
-import { IRowEntity } from "../../../dataGrid/row/row";
-import { IDragSelectionRow } from "../interfaces";
-export interface IDragSelection<T> {
-    /** The rows in render order. */
-    rows: IDragSelectionRow[];
-    /** Every entity a row can point at, parents and children alike. */
-    entityById: Map<string, T>;
-}
-/**
- * Flattens the entities into the rows the grid actually renders: each entity followed by its
- * children while it is expanded. Drag and shift-click ranges walk this list, so they cross
- * nesting levels the way the user sees them on screen.
- */
-export declare const getDragSelectionRows: <T extends IRowEntity<N>, N extends IEntityWithId>(entities: T[], expandedRows?: string[]) => IDragSelection<T | N>;

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

@@ -1,24 +0,0 @@
-/**
- * Flattens the entities into the rows the grid actually renders: each entity followed by its
- * children while it is expanded. Drag and shift-click ranges walk this list, so they cross
- * nesting levels the way the user sees them on screen.
- */
-export const getDragSelectionRows = (entities, expandedRows) => {
-    const expanded = new Set(expandedRows);
-    const rows = [];
-    const entityById = new Map();
-    entities.forEach(entity => {
-        rows.push({ id: entity.id, isNested: false });
-        entityById.set(entity.id, entity);
-        // Children are always indexed — a collapsed row's children still need to resolve for
-        // the selection predicates — but only an expanded row contributes them to the range.
-        const isExpanded = expanded.has(entity.id);
-        (entity.children || []).forEach(child => {
-            entityById.set(child.id, child);
-            if (isExpanded) {
-                rows.push({ id: child.id, isNested: true });
-            }
-        });
-    });
-    return { rows, entityById };
-};

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

@@ -1,2 +0,0 @@
-import { IDragSelectionRow } from "../interfaces";
-export declare const getRangeIds: (rows: IDragSelectionRow[], fromId: string, toId: string, isSelectable: (row: IDragSelectionRow) => boolean) => string[];

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

@@ -1,17 +0,0 @@
-export const getRangeIds = (rows, fromId, toId, isSelectable) => {
-    const fromIdx = rows.findIndex(row => row.id === fromId);
-    const toIdx = rows.findIndex(row => row.id === toId);
-    if (fromIdx === -1 || toIdx === -1) {
-        return [];
-    }
-    const start = Math.min(fromIdx, toIdx);
-    const end = Math.max(fromIdx, toIdx);
-    const ids = [];
-    for (let i = start; i <= end; i++) {
-        const row = rows[i];
-        if (isSelectable(row)) {
-            ids.push(row.id);
-        }
-    }
-    return ids;
-};