@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.10

package/esm/core/Table/TableRowMemoized.d.ts

@@ -22,11 +22,11 @@ export declare const TableRow: <T extends Record<string, unknown>>(props: {
     isDisabled: boolean;
     tableHasSubRows: boolean;
     tableInstance: TableInstance<T>;
-    expanderCell?: ((cellProps: CellProps<T, any>) => React.ReactNode) | undefined;
+    expanderCell?: ((cellProps: CellProps<T>) => React.ReactNode) | undefined;
     bodyRef: HTMLDivElement | null;
     tableRowRef?: React.Ref<HTMLDivElement> | undefined;
     density?: "default" | "condensed" | "extra-condensed" | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export declare const TableRowMemoized: <T extends Record<string, unknown>>(props: {
     row: Row<T>;
     rowProps?: ((row: Row<T>) => React.ComponentPropsWithRef<'div'> & {
@@ -43,8 +43,8 @@ export declare const TableRowMemoized: <T extends Record<string, unknown>>(props
     isDisabled: boolean;
     tableHasSubRows: boolean;
     tableInstance: TableInstance<T>;
-    expanderCell?: ((cellProps: CellProps<T, any>) => React.ReactNode) | undefined;
+    expanderCell?: ((cellProps: CellProps<T>) => React.ReactNode) | undefined;
     bodyRef: HTMLDivElement | null;
     tableRowRef?: React.Ref<HTMLDivElement> | undefined;
     density?: "default" | "condensed" | "extra-condensed" | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/esm/core/Table/TableRowMemoized.js

@@ -4,7 +4,12 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useIntersection, useMergedRefs, WithCSSTransition, } from '../utils/index.js';
+import {
+  Box,
+  useIntersection,
+  useMergedRefs,
+  WithCSSTransition,
+} from '../utils/index.js';
 import { TableCell } from './TableCell.js';
 /**
  * Memoization is needed to avoid unnecessary re-renders of all rows when additional data is added when lazy-loading.
@@ -13,90 +18,149 @@ import { TableCell } from './TableCell.js';
  * When adding new features check whether it changes state that affects row. If it does then add equality check to `React.memo`.
  */
 export const TableRow = (props) => {
-    var _a;
-    const { row, rowProps, isLast, onRowInViewport, onBottomReached, intersectionMargin, onClick, subComponent, isDisabled, tableHasSubRows, tableInstance, expanderCell, bodyRef, tableRowRef, density, } = props;
-    const onIntersect = React.useCallback(() => {
-        var _a, _b;
-        (_a = onRowInViewport.current) === null || _a === void 0 ? void 0 : _a.call(onRowInViewport, row.original);
-        isLast && ((_b = onBottomReached.current) === null || _b === void 0 ? void 0 : _b.call(onBottomReached));
-    }, [isLast, onBottomReached, onRowInViewport, row.original]);
-    const intersectionRoot = React.useMemo(() => {
-        var _a, _b;
-        const isTableBodyScrollable = ((_a = bodyRef === null || bodyRef === void 0 ? void 0 : bodyRef.scrollHeight) !== null && _a !== void 0 ? _a : 0) > ((_b = bodyRef === null || bodyRef === void 0 ? void 0 : bodyRef.offsetHeight) !== null && _b !== void 0 ? _b : 0);
-        // If table body is scrollable, make it the intersection root
-        if (isTableBodyScrollable) {
-            return bodyRef;
-        }
-        // Otherwise, make the viewport the intersection root
-        return undefined;
-    }, [bodyRef]);
-    const intersectionRef = useIntersection(onIntersect, {
-        rootMargin: `${intersectionMargin}px`,
-        root: intersectionRoot,
-    });
-    const userRowProps = (_a = rowProps === null || rowProps === void 0 ? void 0 : rowProps(row)) !== null && _a !== void 0 ? _a : {};
-    const { status, isLoading, ...restUserRowProps } = userRowProps;
-    const mergedProps = {
-        ...row.getRowProps({ style: { flex: `0 0 auto`, minWidth: '100%' } }),
-        ...restUserRowProps,
-        ...{
-            className: cx('iui-table-row', {
-                'iui-table-row-expanded': row.isExpanded && subComponent,
-                'iui-loading': isLoading,
-            }, userRowProps === null || userRowProps === void 0 ? void 0 : userRowProps.className),
-            'aria-selected': row.isSelected || undefined,
-            'aria-disabled': isDisabled || undefined,
-            'data-iui-status': status,
+  const {
+    row,
+    rowProps,
+    isLast,
+    onRowInViewport,
+    onBottomReached,
+    intersectionMargin,
+    onClick,
+    subComponent,
+    isDisabled,
+    tableHasSubRows,
+    tableInstance,
+    expanderCell,
+    bodyRef,
+    tableRowRef,
+    density,
+  } = props;
+  const onIntersect = React.useCallback(() => {
+    onRowInViewport.current?.(row.original);
+    isLast && onBottomReached.current?.();
+  }, [isLast, onBottomReached, onRowInViewport, row.original]);
+  const intersectionRoot = React.useMemo(() => {
+    const isTableBodyScrollable =
+      (bodyRef?.scrollHeight ?? 0) > (bodyRef?.offsetHeight ?? 0);
+    // If table body is scrollable, make it the intersection root
+    if (isTableBodyScrollable) {
+      return bodyRef;
+    }
+    // Otherwise, make the viewport the intersection root
+    return undefined;
+  }, [bodyRef]);
+  const intersectionRef = useIntersection(onIntersect, {
+    rootMargin: `${intersectionMargin}px`,
+    root: intersectionRoot,
+  });
+  const userRowProps = rowProps?.(row) ?? {};
+  const { status, isLoading, ...restUserRowProps } = userRowProps;
+  const mergedProps = {
+    ...row.getRowProps({ style: { flex: `0 0 auto`, minWidth: '100%' } }),
+    ...restUserRowProps,
+    ...{
+      className: cx(
+        'iui-table-row',
+        {
+          'iui-table-row-expanded': row.isExpanded && subComponent,
+          'iui-loading': isLoading,
+        },
+        userRowProps?.className,
+      ),
+      'aria-selected': row.isSelected || undefined,
+      'aria-disabled': isDisabled || undefined,
+      'data-iui-status': status,
+    },
+  };
+  const refs = useMergedRefs(intersectionRef, mergedProps.ref, tableRowRef);
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      Box,
+      {
+        ...mergedProps,
+        ref: refs,
+        onClick: (event) => {
+          mergedProps?.onClick?.(event);
+          onClick?.(event, row);
         },
-    };
-    const refs = useMergedRefs(intersectionRef, mergedProps.ref, tableRowRef);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { ...mergedProps, ref: refs, onClick: (event) => {
-                var _a;
-                (_a = mergedProps === null || mergedProps === void 0 ? void 0 : mergedProps.onClick) === null || _a === void 0 ? void 0 : _a.call(mergedProps, event);
-                onClick === null || onClick === void 0 ? void 0 : onClick(event, row);
-            } }, row.cells.map((cell, index) => {
-            return (React.createElement(TableCell, { key: cell.getCellProps().key, cell: cell, cellIndex: index, isDisabled: isDisabled, tableHasSubRows: tableHasSubRows, tableInstance: tableInstance, expanderCell: expanderCell, density: density }));
-        })),
-        subComponent && (React.createElement(WithCSSTransition, { in: row.isExpanded },
-            React.createElement("div", { className: cx('iui-table-row', 'iui-table-expanded-content'), "aria-disabled": isDisabled }, subComponent(row))))));
+      },
+      row.cells.map((cell, index) => {
+        return React.createElement(TableCell, {
+          key: cell.getCellProps().key,
+          cell: cell,
+          cellIndex: index,
+          isDisabled: isDisabled,
+          tableHasSubRows: tableHasSubRows,
+          tableInstance: tableInstance,
+          expanderCell: expanderCell,
+          density: density,
+        });
+      }),
+    ),
+    subComponent &&
+      React.createElement(
+        WithCSSTransition,
+        { in: row.isExpanded },
+        React.createElement(
+          Box,
+          {
+            className: cx('iui-table-row', 'iui-table-expanded-content'),
+            'aria-disabled': isDisabled,
+          },
+          subComponent(row),
+        ),
+      ),
+  );
 };
 const hasAnySelectedSubRow = (row, selectedRowIds) => {
-    if (selectedRowIds === null || selectedRowIds === void 0 ? void 0 : selectedRowIds[row.id]) {
-        return true;
-    }
-    return row.subRows.some((subRow) => hasAnySelectedSubRow(subRow, selectedRowIds));
+  if (selectedRowIds?.[row.id]) {
+    return true;
+  }
+  return row.subRows.some((subRow) =>
+    hasAnySelectedSubRow(subRow, selectedRowIds),
+  );
 };
-export const TableRowMemoized = React.memo(TableRow, (prevProp, nextProp) => {
-    var _a, _b, _c, _d, _e, _f, _g;
-    return prevProp.isLast === nextProp.isLast &&
-        ((_a = prevProp.state.hiddenColumns) === null || _a === void 0 ? void 0 : _a.length) ===
-            ((_b = nextProp.state.hiddenColumns) === null || _b === void 0 ? void 0 : _b.length) &&
-        !!((_c = prevProp.state.hiddenColumns) === null || _c === void 0 ? void 0 : _c.every((column, index) => { var _a; return ((_a = nextProp.state.hiddenColumns) === null || _a === void 0 ? void 0 : _a[index]) === column; })) &&
-        prevProp.onRowInViewport === nextProp.onRowInViewport &&
-        prevProp.onBottomReached === nextProp.onBottomReached &&
-        prevProp.onClick === nextProp.onClick &&
-        prevProp.row.original === nextProp.row.original &&
-        ((_d = prevProp.state.selectedRowIds) === null || _d === void 0 ? void 0 : _d[prevProp.row.id]) ===
-            ((_e = nextProp.state.selectedRowIds) === null || _e === void 0 ? void 0 : _e[nextProp.row.id]) &&
-        // Check if sub-rows selection has changed and whether to show indeterminate state or not
-        prevProp.row.subRows.some((subRow) => hasAnySelectedSubRow(subRow, prevProp.state.selectedRowIds)) ===
-            nextProp.row.subRows.some((subRow) => hasAnySelectedSubRow(subRow, nextProp.state.selectedRowIds)) &&
-        ((_f = prevProp.state.expanded) === null || _f === void 0 ? void 0 : _f[prevProp.row.id]) ===
-            ((_g = nextProp.state.expanded) === null || _g === void 0 ? void 0 : _g[nextProp.row.id]) &&
-        prevProp.subComponent === nextProp.subComponent &&
-        prevProp.row.cells.every((cell, index) => nextProp.row.cells[index].column === cell.column) &&
-        prevProp.isDisabled === nextProp.isDisabled &&
-        prevProp.rowProps === nextProp.rowProps &&
-        prevProp.expanderCell === nextProp.expanderCell &&
-        prevProp.tableHasSubRows === nextProp.tableHasSubRows &&
-        prevProp.bodyRef === nextProp.bodyRef &&
-        prevProp.state.columnOrder === nextProp.state.columnOrder &&
-        !nextProp.state.columnResizing.isResizingColumn &&
-        prevProp.state.isTableResizing === nextProp.state.isTableResizing &&
-        prevProp.state.sticky.isScrolledToLeft ===
-            nextProp.state.sticky.isScrolledToLeft &&
-        prevProp.state.sticky.isScrolledToRight ===
-            nextProp.state.sticky.isScrolledToRight &&
-        prevProp.density === nextProp.density;
-});
+export const TableRowMemoized = React.memo(
+  TableRow,
+  (prevProp, nextProp) =>
+    prevProp.isLast === nextProp.isLast &&
+    prevProp.state.hiddenColumns?.length ===
+      nextProp.state.hiddenColumns?.length &&
+    !!prevProp.state.hiddenColumns?.every(
+      (column, index) => nextProp.state.hiddenColumns?.[index] === column,
+    ) &&
+    prevProp.onRowInViewport === nextProp.onRowInViewport &&
+    prevProp.onBottomReached === nextProp.onBottomReached &&
+    prevProp.onClick === nextProp.onClick &&
+    prevProp.row.original === nextProp.row.original &&
+    prevProp.state.selectedRowIds?.[prevProp.row.id] ===
+      nextProp.state.selectedRowIds?.[nextProp.row.id] &&
+    // Check if sub-rows selection has changed and whether to show indeterminate state or not
+    prevProp.row.subRows.some((subRow) =>
+      hasAnySelectedSubRow(subRow, prevProp.state.selectedRowIds),
+    ) ===
+      nextProp.row.subRows.some((subRow) =>
+        hasAnySelectedSubRow(subRow, nextProp.state.selectedRowIds),
+      ) &&
+    prevProp.state.expanded?.[prevProp.row.id] ===
+      nextProp.state.expanded?.[nextProp.row.id] &&
+    prevProp.subComponent === nextProp.subComponent &&
+    prevProp.row.cells.every(
+      (cell, index) => nextProp.row.cells[index].column === cell.column,
+    ) &&
+    prevProp.isDisabled === nextProp.isDisabled &&
+    prevProp.rowProps === nextProp.rowProps &&
+    prevProp.expanderCell === nextProp.expanderCell &&
+    prevProp.tableHasSubRows === nextProp.tableHasSubRows &&
+    prevProp.bodyRef === nextProp.bodyRef &&
+    prevProp.state.columnOrder === nextProp.state.columnOrder &&
+    !nextProp.state.columnResizing.isResizingColumn &&
+    prevProp.state.isTableResizing === nextProp.state.isTableResizing &&
+    prevProp.state.sticky.isScrolledToLeft ===
+      nextProp.state.sticky.isScrolledToLeft &&
+    prevProp.state.sticky.isScrolledToRight ===
+      nextProp.state.sticky.isScrolledToRight &&
+    prevProp.density === nextProp.density,
+);

package/esm/core/Table/actionHandlers/expandHandler.js

@@ -1,13 +1,13 @@
 export const onExpandHandler = (newState, instance, onExpand) => {
-    if (!(instance === null || instance === void 0 ? void 0 : instance.preFilteredFlatRows.length)) {
-        onExpand === null || onExpand === void 0 ? void 0 : onExpand([], newState);
-        return;
+  if (!instance?.preFilteredFlatRows.length) {
+    onExpand?.([], newState);
+    return;
+  }
+  const expandedData = [];
+  instance.preFilteredFlatRows.forEach((row) => {
+    if (newState.expanded[row.id]) {
+      expandedData.push(row.original);
     }
-    const expandedData = [];
-    instance.preFilteredFlatRows.forEach((row) => {
-        if (newState.expanded[row.id]) {
-            expandedData.push(row.original);
-        }
-    });
-    onExpand === null || onExpand === void 0 ? void 0 : onExpand(expandedData, newState);
+  });
+  onExpand?.(expandedData, newState);
 };

package/esm/core/Table/actionHandlers/filterHandler.js

@@ -1,17 +1,24 @@
-export const onFilterHandler = (newState, action, previousState, currentFilter, instance) => {
-    const previousFilter = previousState.filters.find((f) => f.id === action.columnId);
-    if ((previousFilter === null || previousFilter === void 0 ? void 0 : previousFilter.value) != action.filterValue) {
-        const filters = newState.filters.map((f) => {
-            var _a, _b;
-            const column = instance === null || instance === void 0 ? void 0 : instance.allColumns.find((c) => c.id === f.id);
-            return {
-                id: f.id,
-                value: f.value,
-                fieldType: (_a = column === null || column === void 0 ? void 0 : column.fieldType) !== null && _a !== void 0 ? _a : 'text',
-                filterType: (_b = column === null || column === void 0 ? void 0 : column.filter) !== null && _b !== void 0 ? _b : 'text',
-            };
-        });
-        return filters;
-    }
-    return currentFilter;
+export const onFilterHandler = (
+  newState,
+  action,
+  previousState,
+  currentFilter,
+  instance,
+) => {
+  const previousFilter = previousState.filters.find(
+    (f) => f.id === action.columnId,
+  );
+  if (previousFilter?.value != action.filterValue) {
+    const filters = newState.filters.map((f) => {
+      const column = instance?.allColumns.find((c) => c.id === f.id);
+      return {
+        id: f.id,
+        value: f.value,
+        fieldType: column?.fieldType ?? 'text',
+        filterType: column?.filter ?? 'text',
+      };
+    });
+    return filters;
+  }
+  return currentFilter;
 };

package/esm/core/Table/actionHandlers/index.js

@@ -4,5 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 export { onExpandHandler } from './expandHandler.js';
 export { onFilterHandler } from './filterHandler.js';
-export { onToggleHandler, onSingleSelectHandler, onShiftSelectHandler, } from './selectHandler.js';
+export {
+  onToggleHandler,
+  onSingleSelectHandler,
+  onShiftSelectHandler,
+} from './selectHandler.js';
 export { onTableResizeStart, onTableResizeEnd } from './resizeHandler.js';

package/esm/core/Table/actionHandlers/resizeHandler.js

@@ -1,15 +1,15 @@
 export const onTableResizeStart = (state) => {
-    return { ...state, isTableResizing: true };
+  return { ...state, isTableResizing: true };
 };
 export const onTableResizeEnd = (state, action) => {
-    return {
-        ...state,
-        isTableResizing: false,
-        columnResizing: {
-            ...state.columnResizing,
-            columnWidths: {
-                ...action.columnWidths,
-            },
-        },
-    };
+  return {
+    ...state,
+    isTableResizing: false,
+    columnResizing: {
+      ...state.columnResizing,
+      columnWidths: {
+        ...action.columnWidths,
+      },
+    },
+  };
 };

package/esm/core/Table/actionHandlers/selectHandler.js

@@ -4,113 +4,137 @@
  * - Validation: Ensures that any disabled/unselectable row/subrow is not selected
  */
 const onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
-    if (!(instance === null || instance === void 0 ? void 0 : instance.rows.length)) {
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect([], newState);
-        return;
+  if (!instance?.rows.length) {
+    onSelect?.([], newState);
+    return;
+  }
+  const newSelectedRowIds = {};
+  const handleRow = (row) => {
+    if (isRowDisabled?.(row.original)) {
+      return false;
     }
-    const newSelectedRowIds = {};
-    const handleRow = (row) => {
-        if (isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)) {
-            return false;
-        }
-        let isAllSubSelected = true;
-        row.initialSubRows.forEach((subRow) => {
-            const result = handleRow(subRow);
-            if (!result) {
-                isAllSubSelected = false;
-            }
-        });
-        // If `selectSubRows` is false, then no need to select sub-rows and just check current selection state.
-        // If a row doesn't have sub-rows then check its selection state.
-        // If it has sub-rows then check whether all of them are selected.
-        if ((!instance.selectSubRows && newState.selectedRowIds[row.id]) ||
-            (!row.initialSubRows.length && newState.selectedRowIds[row.id]) ||
-            (row.initialSubRows.length && isAllSubSelected)) {
-            newSelectedRowIds[row.id] = true;
-        }
-        return !!newSelectedRowIds[row.id];
-    };
-    instance.initialRows.forEach((row) => handleRow(row));
-    const selectedData = getSelectedData(newSelectedRowIds, instance);
-    newState.selectedRowIds = newSelectedRowIds;
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedData, newState);
+    let isAllSubSelected = true;
+    row.initialSubRows.forEach((subRow) => {
+      const result = handleRow(subRow);
+      if (!result) {
+        isAllSubSelected = false;
+      }
+    });
+    // If `selectSubRows` is false, then no need to select sub-rows and just check current selection state.
+    // If a row doesn't have sub-rows then check its selection state.
+    // If it has sub-rows then check whether all of them are selected.
+    if (
+      (!instance.selectSubRows && newState.selectedRowIds[row.id]) ||
+      (!row.initialSubRows.length && newState.selectedRowIds[row.id]) ||
+      (row.initialSubRows.length && isAllSubSelected)
+    ) {
+      newSelectedRowIds[row.id] = true;
+    }
+    return !!newSelectedRowIds[row.id];
+  };
+  instance.initialRows.forEach((row) => handleRow(row));
+  const selectedData = getSelectedData(newSelectedRowIds, instance);
+  newState.selectedRowIds = newSelectedRowIds;
+  onSelect?.(selectedData, newState);
 };
 /**
  * Handles selection when toggling a row (Ctrl click or checkbox click)
  */
-export const onToggleHandler = (newState, action, instance, onSelect, isRowDisabled) => {
-    onSelectHandler(newState, instance, onSelect, isRowDisabled);
-    // Toggling a row (ctrl click or checkbox click) updates the lastSelectedRowId
-    newState.lastSelectedRowId = action.id;
+export const onToggleHandler = (
+  newState,
+  action,
+  instance,
+  onSelect,
+  isRowDisabled,
+) => {
+  onSelectHandler(newState, instance, onSelect, isRowDisabled);
+  // Toggling a row (ctrl click or checkbox click) updates the lastSelectedRowId
+  newState.lastSelectedRowId = action.id;
 };
 /**
  * Handles selection when clicked on a row.
  */
-export const onSingleSelectHandler = (state, action, instance, onSelect, isRowDisabled) => {
-    const selectedRowIds = { [action.id]: true };
-    if (instance === null || instance === void 0 ? void 0 : instance.selectSubRows) {
-        const handleRow = (row) => {
-            selectedRowIds[row.id] = true;
-            row.subRows.forEach((r) => handleRow(r));
-        };
-        handleRow(instance.rowsById[action.id]);
-    }
-    const newState = {
-        ...state,
-        lastSelectedRowId: action.id,
-        selectedRowIds,
+export const onSingleSelectHandler = (
+  state,
+  action,
+  instance,
+  onSelect,
+  isRowDisabled,
+) => {
+  const selectedRowIds = { [action.id]: true };
+  if (instance?.selectSubRows) {
+    const handleRow = (row) => {
+      selectedRowIds[row.id] = true;
+      row.subRows.forEach((r) => handleRow(r));
     };
-    // Passing to `onSelectHandler` to handle filtered sub-rows
-    onSelectHandler(newState, instance, onSelect, isRowDisabled);
-    return newState;
+    handleRow(instance.rowsById[action.id]);
+  }
+  const newState = {
+    ...state,
+    lastSelectedRowId: action.id,
+    selectedRowIds,
+  };
+  // Passing to `onSelectHandler` to handle filtered sub-rows
+  onSelectHandler(newState, instance, onSelect, isRowDisabled);
+  return newState;
 };
 /**
  * Handles selection when clicked on a row while shift key is pressed.
  */
-export const onShiftSelectHandler = (state, action, instance, onSelect, isRowDisabled) => {
-    if (instance == null) {
-        return state;
-    }
-    let startIndex = Math.max(0, instance.flatRows.findIndex((row) => row.id === state.lastSelectedRowId));
-    let endIndex = Math.max(0, instance.flatRows.findIndex((row) => row.id === action.id));
-    if (startIndex > endIndex) {
-        const temp = startIndex;
-        startIndex = endIndex;
-        endIndex = temp;
-    }
-    // If ctrl + shift click, do not lose previous selection
-    // If shift click, start new selection
-    const selectedRowIds = !!action.ctrlPressed
-        ? state.selectedRowIds
-        : {};
-    // 1. Select all rows between start and end
-    instance.flatRows
-        .slice(startIndex, endIndex + 1)
-        .forEach((r) => (selectedRowIds[r.id] = true));
-    // 2. Select all children of the last row (endIndex)
-    // Since lastRow's children come after endIndex + 1 (not selected in step 1)
-    const handleRow = (row) => {
-        selectedRowIds[row.id] = true;
-        row.subRows.forEach((r) => handleRow(r));
-    };
-    handleRow(instance.flatRows[endIndex]);
-    const newState = {
-        ...state,
-        selectedRowIds,
-    };
-    // 3.1 Deselect all selected disabled rows and their children
-    // 3.2 Convert all partially selected rows marked with tick mark to horizontal line
-    onSelectHandler(newState, instance, onSelect, isRowDisabled);
-    return newState;
+export const onShiftSelectHandler = (
+  state,
+  action,
+  instance,
+  onSelect,
+  isRowDisabled,
+) => {
+  if (instance == null) {
+    return state;
+  }
+  let startIndex = Math.max(
+    0,
+    instance.flatRows.findIndex((row) => row.id === state.lastSelectedRowId),
+  );
+  let endIndex = Math.max(
+    0,
+    instance.flatRows.findIndex((row) => row.id === action.id),
+  );
+  if (startIndex > endIndex) {
+    const temp = startIndex;
+    startIndex = endIndex;
+    endIndex = temp;
+  }
+  // If ctrl + shift click, do not lose previous selection
+  // If shift click, start new selection
+  const selectedRowIds = !!action.ctrlPressed ? state.selectedRowIds : {};
+  // 1. Select all rows between start and end
+  instance.flatRows
+    .slice(startIndex, endIndex + 1)
+    .forEach((r) => (selectedRowIds[r.id] = true));
+  // 2. Select all children of the last row (endIndex)
+  // Since lastRow's children come after endIndex + 1 (not selected in step 1)
+  const handleRow = (row) => {
+    selectedRowIds[row.id] = true;
+    row.subRows.forEach((r) => handleRow(r));
+  };
+  handleRow(instance.flatRows[endIndex]);
+  const newState = {
+    ...state,
+    selectedRowIds,
+  };
+  // 3.1 Deselect all selected disabled rows and their children
+  // 3.2 Convert all partially selected rows marked with tick mark to horizontal line
+  onSelectHandler(newState, instance, onSelect, isRowDisabled);
+  return newState;
 };
 const getSelectedData = (selectedRowIds, instance) => {
-    const selectedData = [];
-    const setSelectedData = (row) => {
-        if (selectedRowIds[row.id]) {
-            selectedData.push(row.original);
-        }
-        row.initialSubRows.forEach((subRow) => setSelectedData(subRow));
-    };
-    instance === null || instance === void 0 ? void 0 : instance.initialRows.forEach((row) => setSelectedData(row));
-    return selectedData;
+  const selectedData = [];
+  const setSelectedData = (row) => {
+    if (selectedRowIds[row.id]) {
+      selectedData.push(row.original);
+    }
+    row.initialSubRows.forEach((subRow) => setSelectedData(subRow));
+  };
+  instance?.initialRows.forEach((row) => setSelectedData(row));
+  return selectedData;
 };

package/esm/core/Table/cells/DefaultCell.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { CellRendererProps } from 'react-table';
-export declare type DefaultCellProps<T extends Record<string, unknown>> = {
+export type DefaultCellProps<T extends Record<string, unknown>> = {
     /**
      * Custom icon to be displayed at the beginning of the cell.
      */
@@ -25,5 +25,5 @@ export declare type DefaultCellProps<T extends Record<string, unknown>> = {
  *   cellRenderer: (props) => <DefaultCell {...props} />,
  * }
  */
-export declare const DefaultCell: <T extends Record<string, unknown>>(props: DefaultCellProps<T>) => JSX.Element;
+export declare const DefaultCell: <T extends Record<string, unknown>>(props: DefaultCellProps<T>) => React.JSX.Element;
 export default DefaultCell;