@mui/x-data-grid 5.4.0 → 5.6.0

package/modern/hooks/features/selection/useGridSelection.js

@@ -0,0 +1,344 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GridEvents } from '../../../models/events';
+import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridLogger } from '../../utils/useGridLogger';
+import { gridRowsLookupSelector } from '../rows/gridRowsSelector';
+import { isGridCellRoot } from '../../../utils/domUtils';
+import { gridSelectionStateSelector, selectedGridRowsSelector, selectedIdsLookupSelector } from './gridSelectionSelector';
+import { gridPaginatedVisibleSortedGridRowIdsSelector } from '../pagination';
+import { gridVisibleSortedRowIdsSelector } from '../filter/gridFilterSelector';
+import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from '../../../colDef';
+import { useGridStateInit } from '../../utils/useGridStateInit';
+import { GridCellModes } from '../../../models/gridEditRowModel';
+import { isKeyboardEvent } from '../../../utils/keyboardUtils';
+import { getCurrentPageRows } from '../../utils/useCurrentPageRows';
+/**
+ * @requires useGridRows (state, method)
+ * @requires useGridParamsApi (method)
+ */
+
+export const useGridSelection = (apiRef, props) => {
+  const logger = useGridLogger(apiRef, 'useGridSelection');
+  const propSelectionModel = React.useMemo(() => {
+    if (props.selectionModel == null) {
+      return props.selectionModel;
+    }
+
+    if (Array.isArray(props.selectionModel)) {
+      return props.selectionModel;
+    }
+
+    return [props.selectionModel];
+  }, [props.selectionModel]);
+  useGridStateInit(apiRef, state => _extends({}, state, {
+    selection: propSelectionModel ?? []
+  }));
+  const lastRowToggled = React.useRef(null);
+  apiRef.current.unstable_updateControlState({
+    stateId: 'selection',
+    propModel: propSelectionModel,
+    propOnChange: props.onSelectionModelChange,
+    stateSelector: gridSelectionStateSelector,
+    changeEvent: GridEvents.selectionChange
+  });
+  const {
+    checkboxSelection,
+    disableMultipleSelection,
+    disableSelectionOnClick,
+    isRowSelectable,
+    pagination,
+    paginationMode
+  } = props;
+  const canHaveMultipleSelection = !disableMultipleSelection || checkboxSelection;
+  const expandRowRangeSelection = React.useCallback(id => {
+    let endId = id;
+    const startId = lastRowToggled.current ?? id;
+    const isSelected = apiRef.current.isRowSelected(id);
+
+    if (isSelected) {
+      const visibleRowIds = gridVisibleSortedRowIdsSelector(apiRef);
+      const startIndex = visibleRowIds.findIndex(rowId => rowId === startId);
+      const endIndex = visibleRowIds.findIndex(rowId => rowId === endId);
+
+      if (startIndex > endIndex) {
+        endId = visibleRowIds[endIndex + 1];
+      } else {
+        endId = visibleRowIds[endIndex - 1];
+      }
+    }
+
+    lastRowToggled.current = id;
+    apiRef.current.selectRowRange({
+      startId,
+      endId
+    }, !isSelected);
+  }, [apiRef]);
+  /**
+   * API METHODS
+   */
+
+  const setSelectionModel = React.useCallback(model => {
+    const currentModel = gridSelectionStateSelector(apiRef.current.state);
+
+    if (currentModel !== model) {
+      logger.debug(`Setting selection model`);
+      apiRef.current.setState(state => _extends({}, state, {
+        selection: model
+      }));
+      apiRef.current.forceUpdate();
+    }
+  }, [apiRef, logger]);
+  const isRowSelected = React.useCallback(id => gridSelectionStateSelector(apiRef.current.state).includes(id), [apiRef]);
+  const getSelectedRows = React.useCallback(() => selectedGridRowsSelector(apiRef), [apiRef]);
+  const selectRow = React.useCallback((id, isSelected = true, resetSelection = false) => {
+    if (isRowSelectable && !isRowSelectable(apiRef.current.getRowParams(id))) {
+      return;
+    }
+
+    lastRowToggled.current = id;
+
+    if (resetSelection) {
+      logger.debug(`Setting selection for row ${id}`);
+      apiRef.current.setSelectionModel(isSelected ? [id] : []);
+    } else {
+      logger.debug(`Toggling selection for row ${id}`);
+      const selection = gridSelectionStateSelector(apiRef.current.state);
+      const newSelection = selection.filter(el => el !== id);
+
+      if (isSelected) {
+        newSelection.push(id);
+      }
+
+      const isSelectionValid = newSelection.length < 2 || canHaveMultipleSelection;
+
+      if (isSelectionValid) {
+        apiRef.current.setSelectionModel(newSelection);
+      }
+    }
+  }, [apiRef, isRowSelectable, logger, canHaveMultipleSelection]);
+  const selectRows = React.useCallback((ids, isSelected = true, resetSelection = false) => {
+    logger.debug(`Setting selection for several rows`);
+    const selectableIds = isRowSelectable ? ids.filter(id => isRowSelectable(apiRef.current.getRowParams(id))) : ids;
+    let newSelection;
+
+    if (resetSelection) {
+      newSelection = isSelected ? selectableIds : [];
+    } else {
+      // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
+      const selectionLookup = _extends({}, selectedIdsLookupSelector(apiRef));
+
+      selectableIds.forEach(id => {
+        if (isSelected) {
+          selectionLookup[id] = id;
+        } else {
+          delete selectionLookup[id];
+        }
+      });
+      newSelection = Object.values(selectionLookup);
+    }
+
+    const isSelectionValid = newSelection.length < 2 || canHaveMultipleSelection;
+
+    if (isSelectionValid) {
+      apiRef.current.setSelectionModel(newSelection);
+    }
+  }, [apiRef, isRowSelectable, logger, canHaveMultipleSelection]);
+  const selectRowRange = React.useCallback(({
+    startId,
+    endId
+  }, isSelected = true, resetSelection) => {
+    if (!apiRef.current.getRow(startId) || !apiRef.current.getRow(endId)) {
+      return;
+    }
+
+    logger.debug(`Expanding selection from row ${startId} to row ${endId}`);
+    const visibleRowIds = gridVisibleSortedRowIdsSelector(apiRef);
+    const startIndex = visibleRowIds.indexOf(startId);
+    const endIndex = visibleRowIds.indexOf(endId);
+    const [start, end] = startIndex > endIndex ? [endIndex, startIndex] : [startIndex, endIndex];
+    const rowsBetweenStartAndEnd = visibleRowIds.slice(start, end + 1);
+    apiRef.current.selectRows(rowsBetweenStartAndEnd, isSelected, resetSelection);
+  }, [apiRef, logger]);
+  const selectionApi = {
+    selectRow,
+    selectRows,
+    selectRowRange,
+    setSelectionModel,
+    getSelectedRows,
+    isRowSelected
+  };
+  useGridApiMethod(apiRef, selectionApi, 'GridSelectionApi');
+  /**
+   * EVENTS
+   */
+
+  const removeOutdatedSelection = React.useCallback(() => {
+    const currentSelection = gridSelectionStateSelector(apiRef.current.state);
+    const rowsLookup = gridRowsLookupSelector(apiRef); // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
+
+    const selectionLookup = _extends({}, selectedIdsLookupSelector(apiRef));
+
+    let hasChanged = false;
+    currentSelection.forEach(id => {
+      if (!rowsLookup[id]) {
+        delete selectionLookup[id];
+        hasChanged = true;
+      }
+    });
+
+    if (hasChanged) {
+      apiRef.current.setSelectionModel(Object.values(selectionLookup));
+    }
+  }, [apiRef]);
+  const handleSingleRowSelection = React.useCallback((id, event) => {
+    const hasCtrlKey = event.metaKey || event.ctrlKey; // multiple selection is only allowed if:
+    // - it is a checkboxSelection
+    // - it is a keyboard selection
+    // - CTRL is pressed
+
+    const isMultipleSelectionDisabled = !checkboxSelection && !hasCtrlKey && !isKeyboardEvent(event);
+    const resetSelection = !canHaveMultipleSelection || isMultipleSelectionDisabled;
+    const isSelected = apiRef.current.isRowSelected(id);
+
+    if (resetSelection) {
+      apiRef.current.selectRow(id, !isMultipleSelectionDisabled ? !isSelected : true, true);
+    } else {
+      apiRef.current.selectRow(id, !isSelected, false);
+    }
+  }, [apiRef, canHaveMultipleSelection, checkboxSelection]);
+  const handleCellClick = React.useCallback((params, event) => {
+    if (disableSelectionOnClick) {
+      return;
+    }
+
+    if (params.field === GRID_CHECKBOX_SELECTION_COL_DEF.field) {
+      // click on checkbox should not trigger row selection
+      return;
+    }
+
+    if (params.field === '__detail_panel_toggle__') {
+      // click to open the detail panel should not select the row
+      return;
+    }
+
+    if (params.field) {
+      const column = apiRef.current.getColumn(params.field);
+
+      if (column.type === GRID_ACTIONS_COLUMN_TYPE) {
+        return;
+      }
+    }
+
+    if (event.shiftKey && (canHaveMultipleSelection || checkboxSelection)) {
+      expandRowRangeSelection(params.id);
+    } else {
+      handleSingleRowSelection(params.id, event);
+    }
+  }, [disableSelectionOnClick, canHaveMultipleSelection, checkboxSelection, apiRef, expandRowRangeSelection, handleSingleRowSelection]);
+  const preventSelectionOnShift = React.useCallback((params, event) => {
+    if (canHaveMultipleSelection && event.shiftKey) {
+      window.getSelection()?.removeAllRanges();
+    }
+  }, [canHaveMultipleSelection]);
+  const handleRowSelectionCheckboxChange = React.useCallback((params, event) => {
+    if (event.nativeEvent.shiftKey) {
+      expandRowRangeSelection(params.id);
+    } else {
+      apiRef.current.selectRow(params.id, params.value);
+    }
+  }, [apiRef, expandRowRangeSelection]);
+  const handleHeaderSelectionCheckboxChange = React.useCallback(params => {
+    const shouldLimitSelectionToCurrentPage = props.checkboxSelectionVisibleOnly && props.pagination;
+    const rowsToBeSelected = shouldLimitSelectionToCurrentPage ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef) : gridVisibleSortedRowIdsSelector(apiRef);
+    apiRef.current.selectRows(rowsToBeSelected, params.value);
+  }, [apiRef, props.checkboxSelectionVisibleOnly, props.pagination]);
+  const handleCellKeyDown = React.useCallback((params, event) => {
+    // Ignore portal
+    // Do not apply shortcuts if the focus is not on the cell root component
+    // TODO replace with !event.currentTarget.contains(event.target as Element)
+    if (!isGridCellRoot(event.target)) {
+      return;
+    } // Get the most recent params because the cell mode may have changed by another listener
+
+
+    const cellParams = apiRef.current.getCellParams(params.id, params.field);
+    const isEditMode = cellParams.cellMode === GridCellModes.Edit;
+
+    if (isEditMode) {
+      return;
+    }
+
+    if (event.key === ' ' && event.shiftKey) {
+      event.preventDefault();
+      handleSingleRowSelection(cellParams.id, event);
+      return;
+    }
+
+    if (event.key.toLowerCase() === 'a' && (event.ctrlKey || event.metaKey)) {
+      event.preventDefault();
+      selectRows(apiRef.current.getAllRowIds(), true);
+    }
+  }, [apiRef, handleSingleRowSelection, selectRows]);
+  useGridApiEventHandler(apiRef, GridEvents.visibleRowsSet, removeOutdatedSelection);
+  useGridApiEventHandler(apiRef, GridEvents.cellClick, handleCellClick);
+  useGridApiEventHandler(apiRef, GridEvents.rowSelectionCheckboxChange, handleRowSelectionCheckboxChange);
+  useGridApiEventHandler(apiRef, GridEvents.headerSelectionCheckboxChange, handleHeaderSelectionCheckboxChange);
+  useGridApiEventHandler(apiRef, GridEvents.cellMouseDown, preventSelectionOnShift);
+  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
+  /**
+   * EFFECTS
+   */
+
+  React.useEffect(() => {
+    if (propSelectionModel !== undefined) {
+      apiRef.current.setSelectionModel(propSelectionModel);
+    }
+  }, [apiRef, propSelectionModel]);
+  const isStateControlled = propSelectionModel != null;
+  React.useEffect(() => {
+    if (isStateControlled) {
+      return;
+    } // isRowSelectable changed
+
+
+    const currentSelection = gridSelectionStateSelector(apiRef.current.state);
+
+    if (isRowSelectable) {
+      const newSelection = currentSelection.filter(id => isRowSelectable(apiRef.current.getRowParams(id)));
+
+      if (newSelection.length < currentSelection.length) {
+        apiRef.current.setSelectionModel(newSelection);
+      }
+    }
+  }, [apiRef, isRowSelectable, isStateControlled]);
+  React.useEffect(() => {
+    const currentSelection = gridSelectionStateSelector(apiRef.current.state);
+
+    if (!canHaveMultipleSelection && currentSelection.length > 1) {
+      const {
+        rows: currentPageRows
+      } = getCurrentPageRows(apiRef, {
+        pagination,
+        paginationMode
+      });
+      const currentPageRowsLookup = currentPageRows.reduce((acc, {
+        id
+      }) => {
+        acc[id] = true;
+        return acc;
+      }, {});
+      const firstSelectableRow = currentSelection.find(id => {
+        let isSelectable = true;
+
+        if (isRowSelectable) {
+          isSelectable = isRowSelectable(apiRef.current.getRowParams(id));
+        }
+
+        return isSelectable && currentPageRowsLookup[id]; // Check if the row is in the current page
+      });
+      apiRef.current.setSelectionModel(firstSelectableRow !== undefined ? [firstSelectableRow] : []);
+    }
+  }, [apiRef, canHaveMultipleSelection, checkboxSelection, disableMultipleSelection, isRowSelectable, pagination, paginationMode]);
+};

package/modern/hooks/features/selection/useGridSelectionPreProcessors.js

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { getDataGridUtilityClass } from '../../../constants';
+import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../colDef';
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  return React.useMemo(() => {
+    const slots = {
+      cellCheckbox: ['cellCheckbox'],
+      columnHeaderCheckbox: ['columnHeaderCheckbox']
+    };
+    return composeClasses(slots, getDataGridUtilityClass, classes);
+  }, [classes]);
+};
+
+export const useGridSelectionPreProcessors = (apiRef, props) => {
+  const ownerState = {
+    classes: props.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  const updateSelectionColumn = React.useCallback(columnsState => {
+    const selectionColumn = _extends({}, GRID_CHECKBOX_SELECTION_COL_DEF, {
+      cellClassName: classes.cellCheckbox,
+      headerClassName: classes.columnHeaderCheckbox,
+      headerName: apiRef.current.getLocaleText('checkboxSelectionHeaderName')
+    });
+
+    const shouldHaveSelectionColumn = props.checkboxSelection;
+    const haveSelectionColumn = columnsState.lookup[selectionColumn.field] != null;
+
+    if (shouldHaveSelectionColumn && !haveSelectionColumn) {
+      columnsState.lookup[selectionColumn.field] = selectionColumn;
+      columnsState.all = [selectionColumn.field, ...columnsState.all];
+    } else if (!shouldHaveSelectionColumn && haveSelectionColumn) {
+      delete columnsState.lookup[selectionColumn.field];
+      columnsState.all = columnsState.all.filter(field => field !== selectionColumn.field);
+    }
+
+    return columnsState;
+  }, [apiRef, classes, props.checkboxSelection]);
+  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', updateSelectionColumn);
+};

package/modern/hooks/features/sorting/gridSortingSelector.js

@@ -0,0 +1,44 @@
+import { createSelector } from '../../../utils/createSelector';
+import { gridRowsLookupSelector } from '../rows/gridRowsSelector';
+/**
+ * @category Sorting
+ * @ignore - do not document.
+ */
+
+export const gridSortingStateSelector = state => state.sorting;
+/**
+ * Get the id of the rows after the sorting process.
+ * @category Sorting
+ */
+
+export const gridSortedRowIdsSelector = createSelector(gridSortingStateSelector, sortingState => sortingState.sortedRows);
+/**
+ * Get the id and the model of the rows after the sorting process.
+ * @category Sorting
+ */
+
+export const gridSortedRowEntriesSelector = createSelector(gridSortedRowIdsSelector, gridRowsLookupSelector, (sortedIds, idRowsLookup) => sortedIds.map(id => ({
+  id,
+  model: idRowsLookup[id]
+})));
+/**
+ * Get the current sorting model.
+ * @category Sorting
+ */
+
+export const gridSortModelSelector = createSelector(gridSortingStateSelector, sorting => sorting.sortModel);
+
+/**
+ * @category Sorting
+ * @ignore - do not document.
+ */
+export const gridSortColumnLookupSelector = createSelector(gridSortModelSelector, sortModel => {
+  const result = sortModel.reduce((res, sortItem, index) => {
+    res[sortItem.field] = {
+      sortDirection: sortItem.sort,
+      sortIndex: sortModel.length > 1 ? index + 1 : undefined
+    };
+    return res;
+  }, {});
+  return result;
+});

package/modern/hooks/features/sorting/gridSortingState.js

@@ -0,0 +1 @@
+export {};

package/modern/hooks/features/sorting/gridSortingUtils.js

@@ -0,0 +1,157 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { buildWarning } from '../../../utils/warning';
+const sortModelDisableMultiColumnsSortingWarning = buildWarning(['MUI: The `sortModel` can only contain a single item when the `disableMultipleColumnsSorting` prop is set to `true`.', 'If you are using the community version of the `DataGrid`, this prop is always `true`.'], 'error');
+export const sanitizeSortModel = (model, disableMultipleColumnsSorting) => {
+  if (disableMultipleColumnsSorting && model.length > 1) {
+    sortModelDisableMultiColumnsSortingWarning();
+    return [model[0]];
+  }
+
+  return model;
+};
+export const mergeStateWithSortModel = (sortModel, disableMultipleColumnsSorting) => state => _extends({}, state, {
+  sorting: _extends({}, state.sorting, {
+    sortModel: sanitizeSortModel(sortModel, disableMultipleColumnsSorting)
+  })
+});
+
+const isDesc = direction => direction === 'desc';
+/**
+ * Transform an item of the sorting model into a method comparing two rows.
+ * @param {GridSortItem} sortItem The sort item we want to apply.
+ * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @returns {GridParsedSortItem | null} The parsed sort item. Returns `null` is the sort item is not valid.
+ */
+
+
+const parseSortItem = (sortItem, apiRef) => {
+  const column = apiRef.current.getColumn(sortItem.field);
+
+  if (!column) {
+    return null;
+  }
+
+  const comparator = isDesc(sortItem.sort) ? (...args) => -1 * column.sortComparator(...args) : column.sortComparator;
+
+  const getSortCellParams = id => ({
+    id,
+    field: column.field,
+    rowNode: apiRef.current.getRowNode(id),
+    value: apiRef.current.getCellValue(id, column.field),
+    api: apiRef.current
+  });
+
+  return {
+    getSortCellParams,
+    comparator
+  };
+};
+/**
+ * Compare two rows according to a list of valid sort items.
+ * The `row1Params` and `row2Params` must have the same length as `parsedSortItems`,
+ * and each of their index must contain the `GridSortCellParams` of the sort item with the same index.
+ * @param {GridParsedSortItem[]} parsedSortItems All the sort items with which we want to compare the rows.
+ * @param {GridSortCellParams} row1Params The params of the 1st row for each sort item.
+ * @param {GridSortCellParams} row2Params The params of the 2nd row for each sort item.
+ */
+
+
+const compareRows = (parsedSortItems, row1Params, row2Params) => {
+  return parsedSortItems.reduce((res, item, index) => {
+    if (res !== 0) {
+      // return the results of the first comparator which distinguish the two rows
+      return res;
+    }
+
+    const sortCellParams1 = row1Params[index];
+    const sortCellParams2 = row2Params[index];
+    res = item.comparator(sortCellParams1.value, sortCellParams2.value, sortCellParams1, sortCellParams2);
+    return res;
+  }, 0);
+};
+/**
+ * Generates a method to easily sort a list of rows according to the current sort model.
+ * @param {GridSortModel} sortModel The model with which we want to sort the rows.
+ * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @returns {GridSortingModelApplier | null} A method that generates a list of sorted row ids from a list of rows according to the current sort model. If `null`, we consider that the rows should remain in the order there were provided.
+ */
+
+
+export const buildAggregatedSortingApplier = (sortModel, apiRef) => {
+  const comparatorList = sortModel.map(item => parseSortItem(item, apiRef)).filter(comparator => !!comparator);
+
+  if (comparatorList.length === 0) {
+    return null;
+  }
+
+  return rowList => rowList.map(value => ({
+    value,
+    params: comparatorList.map(el => el.getSortCellParams(value.id))
+  })).sort((a, b) => compareRows(comparatorList, a.params, b.params)).map(row => row.value.id);
+};
+export const getNextGridSortDirection = (sortingOrder, current) => {
+  const currentIdx = sortingOrder.indexOf(current);
+
+  if (!current || currentIdx === -1 || currentIdx + 1 === sortingOrder.length) {
+    return sortingOrder[0];
+  }
+
+  return sortingOrder[currentIdx + 1];
+};
+
+const gridNillComparator = (v1, v2) => {
+  if (v1 == null && v2 != null) {
+    return -1;
+  }
+
+  if (v2 == null && v1 != null) {
+    return 1;
+  }
+
+  if (v1 == null && v2 == null) {
+    return 0;
+  }
+
+  return null;
+};
+
+const collator = new Intl.Collator();
+export const gridStringOrNumberComparator = (value1, value2) => {
+  const nillResult = gridNillComparator(value1, value2);
+
+  if (nillResult !== null) {
+    return nillResult;
+  }
+
+  if (typeof value1 === 'string') {
+    return collator.compare(value1.toString(), value2.toString());
+  }
+
+  return value1 - value2;
+};
+export const gridNumberComparator = (value1, value2) => {
+  const nillResult = gridNillComparator(value1, value2);
+
+  if (nillResult !== null) {
+    return nillResult;
+  }
+
+  return Number(value1) - Number(value2);
+};
+export const gridDateComparator = (value1, value2) => {
+  const nillResult = gridNillComparator(value1, value2);
+
+  if (nillResult !== null) {
+    return nillResult;
+  }
+
+  if (value1 > value2) {
+    return 1;
+  }
+
+  if (value1 < value2) {
+    return -1;
+  }
+
+  return 0;
+};

package/modern/hooks/features/sorting/index.js

@@ -0,0 +1,2 @@
+export * from './gridSortingSelector';
+export { gridDateComparator, gridNumberComparator, gridStringOrNumberComparator } from './gridSortingUtils';

package/modern/hooks/features/sorting/useGridRegisterSortingMethod.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+export const useGridRegisterSortingMethod = (apiRef, groupingName, filteringMethod) => {
+  const updateRegistration = React.useCallback(sortingMethodCollection => {
+    sortingMethodCollection[groupingName] = filteringMethod;
+    return sortingMethodCollection;
+  }, [groupingName, filteringMethod]);
+  useGridRegisterPreProcessor(apiRef, 'sortingMethod', updateRegistration);
+};