@mui/x-data-grid 5.4.0 → 5.6.0

package/hooks/features/editRows/useGridRowEditing.js

@@ -0,0 +1,329 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useEventCallback } from '@mui/material/utils';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { GridRowModes, GridEditModes, GridCellModes } from '../../../models/gridEditRowModel';
+import { useGridSelector } from '../../utils/useGridSelector';
+import { gridColumnFieldsSelector } from '../columns/gridColumnsSelector';
+import { gridEditRowsStateSelector } from './gridEditRowsSelector';
+import { GridEvents } from '../../../models/events/gridEvents';
+import { gridFocusCellSelector } from '../focus/gridFocusStateSelector';
+import { useGridApiOptionHandler, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+export const useGridRowEditing = (apiRef, props) => {
+  var _props$experimentalFe2, _props$experimentalFe4;
+
+  const focusTimeout = React.useRef(null);
+  const nextFocusedCell = React.useRef(null);
+  const columnFields = useGridSelector(apiRef, gridColumnFieldsSelector);
+
+  const buildCallback = callback => (...args) => {
+    if (props.editMode === GridEditModes.Row) {
+      callback(...args);
+    }
+  };
+
+  const setRowMode = React.useCallback((id, mode) => {
+    if (mode === apiRef.current.getRowMode(id)) {
+      return;
+    }
+
+    apiRef.current.setState(state => {
+      const newEditRowsState = _extends({}, state.editRows);
+
+      if (mode === GridRowModes.Edit) {
+        newEditRowsState[id] = {};
+        columnFields.forEach(field => {
+          const cellParams = apiRef.current.getCellParams(id, field);
+
+          if (cellParams.isEditable) {
+            newEditRowsState[id][field] = {
+              value: cellParams.value
+            };
+          }
+        });
+      } else {
+        delete newEditRowsState[id];
+      }
+
+      return _extends({}, state, {
+        editRows: newEditRowsState
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef, columnFields]);
+  const getRowMode = React.useCallback(id => {
+    if (props.editMode === GridEditModes.Cell) {
+      return GridRowModes.View;
+    }
+
+    const editRowsState = gridEditRowsStateSelector(apiRef.current.state);
+    return editRowsState[id] ? GridRowModes.Edit : GridRowModes.View;
+  }, [apiRef, props.editMode]);
+  const commitRowChange = React.useCallback((id, event = {}) => {
+    var _props$experimentalFe;
+
+    if (props.editMode === GridEditModes.Cell) {
+      throw new Error(`MUI: You can't commit changes when the edit mode is 'cell'.`);
+    }
+
+    apiRef.current.unstable_runPendingEditCellValueChangeDebounce(id);
+    const model = apiRef.current.getEditRowsModel();
+    const editRowProps = model[id];
+
+    if (!editRowProps) {
+      throw new Error(`MUI: Row at id: ${id} is not being edited.`);
+    }
+
+    if ((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.preventCommitWhileValidating) {
+      const isValid = Object.keys(editRowProps).reduce((acc, field) => {
+        return acc && !editRowProps[field].isValidating && !editRowProps[field].error;
+      }, true);
+
+      if (!isValid) {
+        return false;
+      }
+    }
+
+    const hasFieldWithError = Object.values(editRowProps).some(value => !!value.error);
+
+    if (hasFieldWithError) {
+      return false;
+    }
+
+    const fieldsWithValidator = Object.keys(editRowProps).filter(field => {
+      const column = apiRef.current.getColumn(field);
+      return typeof column.preProcessEditCellProps === 'function';
+    });
+
+    if (fieldsWithValidator.length > 0) {
+      const row = apiRef.current.getRow(id);
+      const validatorErrors = fieldsWithValidator.map(async field => {
+        const column = apiRef.current.getColumn(field);
+        const newEditCellProps = await Promise.resolve(column.preProcessEditCellProps({
+          id,
+          row,
+          props: editRowProps[field]
+        }));
+        apiRef.current.unstable_setEditCellProps({
+          id,
+          field,
+          props: newEditCellProps
+        });
+        return newEditCellProps.error;
+      });
+      return Promise.all(validatorErrors).then(errors => {
+        if (errors.some(error => !!error)) {
+          return false;
+        }
+
+        apiRef.current.publishEvent(GridEvents.rowEditCommit, id, event);
+        return true;
+      });
+    }
+
+    apiRef.current.publishEvent(GridEvents.rowEditCommit, id, event);
+    return true;
+  }, [apiRef, props.editMode, (_props$experimentalFe2 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe2.preventCommitWhileValidating]);
+  const setRowEditingEditCellValue = React.useCallback(params => {
+    const model = apiRef.current.getEditRowsModel();
+    const editRow = model[params.id];
+    const row = apiRef.current.getRow(params.id);
+    let isValid = true;
+    return new Promise(resolve => {
+      Object.keys(editRow).forEach(async field => {
+        const column = apiRef.current.getColumn(field);
+        let editCellProps = field === params.field ? {
+          value: params.value
+        } : editRow[field]; // setEditCellProps runs the value parser and returns the updated props
+
+        editCellProps = apiRef.current.unstable_setEditCellProps({
+          id: params.id,
+          field,
+          props: _extends({}, editCellProps, {
+            isValidating: true
+          })
+        });
+
+        if (column.preProcessEditCellProps) {
+          editCellProps = await Promise.resolve(column.preProcessEditCellProps({
+            id: params.id,
+            row,
+            props: _extends({}, editCellProps, {
+              value: field === params.field ? apiRef.current.unstable_parseValue(params.id, field, params.value) : editCellProps.value
+            })
+          }));
+        }
+
+        if (editCellProps.error) {
+          isValid = false;
+        }
+
+        apiRef.current.unstable_setEditCellProps({
+          id: params.id,
+          field,
+          props: _extends({}, editCellProps, {
+            isValidating: false
+          })
+        });
+      });
+      resolve(isValid);
+    });
+  }, [apiRef]);
+  const rowEditingApi = {
+    setRowMode,
+    getRowMode,
+    commitRowChange,
+    unstable_setRowEditingEditCellValue: setRowEditingEditCellValue
+  };
+  useGridApiMethod(apiRef, rowEditingApi, 'EditRowApi');
+  const handleCellKeyDown = React.useCallback(async (params, event) => {
+    const {
+      cellMode,
+      isEditable
+    } = params;
+
+    if (!isEditable) {
+      return;
+    }
+
+    const isEditMode = cellMode === GridCellModes.Edit;
+    const rowParams = apiRef.current.getRowParams(params.id);
+
+    if (isEditMode) {
+      if (event.key === 'Enter') {
+        var _props$experimentalFe3;
+
+        // TODO: check the return before firing GridEvents.rowEditStop
+        // On cell editing, it won't exits the edit mode with error
+        const isValid = await apiRef.current.commitRowChange(params.id);
+
+        if (!isValid && (_props$experimentalFe3 = props.experimentalFeatures) != null && _props$experimentalFe3.preventCommitWhileValidating) {
+          return;
+        }
+
+        apiRef.current.publishEvent(GridEvents.rowEditStop, rowParams, event);
+      } else if (event.key === 'Escape') {
+        apiRef.current.publishEvent(GridEvents.rowEditStop, rowParams, event);
+      }
+    } else if (event.key === 'Enter') {
+      apiRef.current.publishEvent(GridEvents.rowEditStart, rowParams, event);
+    }
+  }, [apiRef, (_props$experimentalFe4 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe4.preventCommitWhileValidating]);
+  const handleCellDoubleClick = React.useCallback((params, event) => {
+    if (!params.isEditable) {
+      return;
+    }
+
+    const rowParams = apiRef.current.getRowParams(params.id);
+    apiRef.current.publishEvent(GridEvents.rowEditStart, rowParams, event);
+  }, [apiRef]);
+  const handleEditCellPropsChange = React.useCallback(params => {
+    const row = apiRef.current.getRow(params.id);
+    const model = apiRef.current.getEditRowsModel();
+    const editRow = model[params.id];
+    Object.keys(editRow).forEach(async field => {
+      const column = apiRef.current.getColumn(field);
+
+      if (column.preProcessEditCellProps) {
+        const editCellProps = field === params.field ? params.props : editRow[field];
+        const newEditCellProps = await Promise.resolve(column.preProcessEditCellProps({
+          id: params.id,
+          row,
+          props: editCellProps
+        }));
+        apiRef.current.unstable_setEditCellProps({
+          id: params.id,
+          field,
+          props: newEditCellProps
+        });
+      } else if (field === params.field) {
+        apiRef.current.unstable_setEditCellProps(params);
+      }
+    });
+  }, [apiRef]);
+  const handleRowEditStart = React.useCallback(params => {
+    apiRef.current.setRowMode(params.id, GridRowModes.Edit);
+  }, [apiRef]);
+  const handleRowEditStop = React.useCallback((params, event) => {
+    apiRef.current.setRowMode(params.id, GridRowModes.View);
+
+    if (event.key === 'Enter') {
+      apiRef.current.publishEvent(GridEvents.cellNavigationKeyDown, params, event);
+    }
+  }, [apiRef]);
+  const handleRowEditCommit = React.useCallback(id => {
+    const model = apiRef.current.getEditRowsModel();
+    const editRow = model[id];
+
+    if (!editRow) {
+      throw new Error(`MUI: Row at id: ${id} is not being edited.`);
+    }
+
+    const row = apiRef.current.getRow(id);
+
+    if (row) {
+      let rowUpdate = _extends({}, row);
+
+      Object.keys(editRow).forEach(field => {
+        const column = apiRef.current.getColumn(field);
+        const value = editRow[field].value;
+
+        if (column.valueSetter) {
+          rowUpdate = column.valueSetter({
+            row: rowUpdate,
+            value
+          });
+        } else {
+          rowUpdate[field] = value;
+        }
+      });
+      apiRef.current.updateRows([rowUpdate]);
+    }
+  }, [apiRef]);
+  const handleCellFocusIn = React.useCallback(params => {
+    nextFocusedCell.current = params;
+  }, []);
+
+  const commitPropsAndExit = async (params, event) => {
+    if (params.cellMode === GridCellModes.View) {
+      return;
+    }
+
+    nextFocusedCell.current = null;
+    focusTimeout.current = setTimeout(async () => {
+      var _nextFocusedCell$curr;
+
+      if (((_nextFocusedCell$curr = nextFocusedCell.current) == null ? void 0 : _nextFocusedCell$curr.id) !== params.id) {
+        await apiRef.current.commitRowChange(params.id, event);
+        const rowParams = apiRef.current.getRowParams(params.id);
+        apiRef.current.publishEvent(GridEvents.rowEditStop, rowParams, event);
+      }
+    });
+  };
+
+  const handleCellFocusOut = useEventCallback((params, event) => {
+    commitPropsAndExit(params, event);
+  });
+  const handleColumnHeaderDragStart = useEventCallback(() => {
+    const cell = gridFocusCellSelector(apiRef);
+
+    if (!cell) {
+      return;
+    }
+
+    const params = apiRef.current.getCellParams(cell.id, cell.field);
+    commitPropsAndExit(params, {});
+  });
+  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, buildCallback(handleCellKeyDown));
+  useGridApiEventHandler(apiRef, GridEvents.cellDoubleClick, buildCallback(handleCellDoubleClick));
+  useGridApiEventHandler(apiRef, GridEvents.editCellPropsChange, buildCallback(handleEditCellPropsChange));
+  useGridApiEventHandler(apiRef, GridEvents.rowEditStart, buildCallback(handleRowEditStart));
+  useGridApiEventHandler(apiRef, GridEvents.rowEditStop, buildCallback(handleRowEditStop));
+  useGridApiEventHandler(apiRef, GridEvents.rowEditCommit, buildCallback(handleRowEditCommit));
+  useGridApiEventHandler(apiRef, GridEvents.cellFocusIn, buildCallback(handleCellFocusIn));
+  useGridApiEventHandler(apiRef, GridEvents.cellFocusOut, buildCallback(handleCellFocusOut));
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, buildCallback(handleColumnHeaderDragStart));
+  useGridApiOptionHandler(apiRef, GridEvents.rowEditCommit, props.onRowEditCommit);
+  useGridApiOptionHandler(apiRef, GridEvents.rowEditStart, props.onRowEditStart);
+  useGridApiOptionHandler(apiRef, GridEvents.rowEditStop, props.onRowEditStop);
+};

package/hooks/features/events/useGridEvents.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
+import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+/**
+ * @requires useGridFocus (event) - can be after, async only
+ * @requires useGridColumns (event) - can be after, async only
+ */
+export declare function useGridEvents(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'onColumnHeaderClick' | 'onColumnHeaderDoubleClick' | 'onColumnHeaderOver' | 'onColumnHeaderOut' | 'onColumnHeaderEnter' | 'onColumnHeaderLeave' | 'onColumnOrderChange' | 'onCellClick' | 'onCellDoubleClick' | 'onCellKeyDown' | 'onCellFocusOut' | 'onRowDoubleClick' | 'onRowClick' | 'onError' | 'onStateChange'>): void;

package/hooks/features/events/useGridEvents.js

@@ -0,0 +1,24 @@
+import { GridEvents } from '../../../models/events';
+import { useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
+
+/**
+ * @requires useGridFocus (event) - can be after, async only
+ * @requires useGridColumns (event) - can be after, async only
+ */
+export function useGridEvents(apiRef, props) {
+  useGridApiOptionHandler(apiRef, GridEvents.columnHeaderClick, props.onColumnHeaderClick);
+  useGridApiOptionHandler(apiRef, GridEvents.columnHeaderDoubleClick, props.onColumnHeaderDoubleClick);
+  useGridApiOptionHandler(apiRef, GridEvents.columnHeaderOver, props.onColumnHeaderOver);
+  useGridApiOptionHandler(apiRef, GridEvents.columnHeaderOut, props.onColumnHeaderOut);
+  useGridApiOptionHandler(apiRef, GridEvents.columnHeaderEnter, props.onColumnHeaderEnter);
+  useGridApiOptionHandler(apiRef, GridEvents.columnHeaderLeave, props.onColumnHeaderLeave);
+  useGridApiOptionHandler(apiRef, GridEvents.columnOrderChange, props.onColumnOrderChange);
+  useGridApiOptionHandler(apiRef, GridEvents.cellClick, props.onCellClick);
+  useGridApiOptionHandler(apiRef, GridEvents.cellDoubleClick, props.onCellDoubleClick);
+  useGridApiOptionHandler(apiRef, GridEvents.cellKeyDown, props.onCellKeyDown);
+  useGridApiOptionHandler(apiRef, GridEvents.cellFocusOut, props.onCellFocusOut);
+  useGridApiOptionHandler(apiRef, GridEvents.rowDoubleClick, props.onRowDoubleClick);
+  useGridApiOptionHandler(apiRef, GridEvents.rowClick, props.onRowClick);
+  useGridApiOptionHandler(apiRef, GridEvents.componentError, props.onError);
+  useGridApiOptionHandler(apiRef, GridEvents.stateChange, props.onStateChange);
+}

package/hooks/features/export/serializers/csvSerializer.d.ts

@@ -0,0 +1,12 @@
+import { GridRowId } from '../../../../models';
+import { GridCellParams } from '../../../../models/params/gridCellParams';
+import { GridStateColDef } from '../../../../models/colDef/gridColDef';
+interface BuildCSVOptions {
+    columns: GridStateColDef[];
+    rowIds: GridRowId[];
+    getCellParams: (id: GridRowId, field: string) => GridCellParams;
+    delimiterCharacter: string;
+    includeHeaders: boolean;
+}
+export declare function buildCSV(options: BuildCSVOptions): string;
+export {};

package/hooks/features/export/serializers/csvSerializer.js

@@ -0,0 +1,48 @@
+import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../../colDef';
+
+const serialiseCellValue = (value, delimiterCharacter) => {
+  if (typeof value === 'string') {
+    const formattedValue = value.replace(/"/g, '""'); // Make sure value containing delimiter or line break won't be split into multiple rows
+
+    if ([delimiterCharacter, '\n', '\r'].some(delimiter => formattedValue.includes(delimiter))) {
+      return `"${formattedValue}"`;
+    }
+
+    return formattedValue;
+  }
+
+  return value;
+};
+
+let warnedOnce = false;
+
+const serialiseRow = (id, columns, getCellParams, delimiterCharacter) => columns.map(column => {
+  const cellParams = getCellParams(id, column.field);
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (!warnedOnce && String(cellParams.formattedValue) === '[object Object]') {
+      console.warn(['MUI: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.'].join('\n'));
+      warnedOnce = true;
+    }
+  }
+
+  return serialiseCellValue(cellParams.formattedValue, delimiterCharacter);
+});
+
+export function buildCSV(options) {
+  const {
+    columns,
+    rowIds,
+    getCellParams,
+    delimiterCharacter,
+    includeHeaders
+  } = options;
+  const CSVBody = rowIds.reduce((acc, id) => `${acc}${serialiseRow(id, columns, getCellParams, delimiterCharacter).join(delimiterCharacter)}\r\n`, '').trim();
+
+  if (!includeHeaders) {
+    return CSVBody;
+  }
+
+  const CSVHead = `${columns.filter(column => column.field !== GRID_CHECKBOX_SELECTION_COL_DEF.field).map(column => serialiseCellValue(column.headerName || column.field, delimiterCharacter)).join(delimiterCharacter)}\r\n`;
+  return `${CSVHead}${CSVBody}`.trim();
+}

package/hooks/features/export/useGridCsvExport.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
+/**
+ * @requires useGridColumns (state)
+ * @requires useGridFilter (state)
+ * @requires useGridSorting (state)
+ * @requires useGridSelection (state)
+ * @requires useGridParamsApi (method)
+ */
+export declare const useGridCsvExport: (apiRef: React.MutableRefObject<GridApiCommunity>) => void;

package/hooks/features/export/useGridCsvExport.js

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { gridFilteredSortedRowIdsSelector } from '../filter';
+import { useGridLogger } from '../../utils/useGridLogger';
+import { exportAs } from '../../../utils/exportAs';
+import { buildCSV } from './serializers/csvSerializer';
+import { getColumnsToExport } from './utils';
+
+const defaultGetRowsToExport = ({
+  apiRef
+}) => {
+  const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
+  const selectedRows = apiRef.current.getSelectedRows();
+
+  if (selectedRows.size > 0) {
+    return filteredSortedRowIds.filter(id => selectedRows.has(id));
+  }
+
+  return filteredSortedRowIds;
+};
+/**
+ * @requires useGridColumns (state)
+ * @requires useGridFilter (state)
+ * @requires useGridSorting (state)
+ * @requires useGridSelection (state)
+ * @requires useGridParamsApi (method)
+ */
+
+
+export const useGridCsvExport = apiRef => {
+  const logger = useGridLogger(apiRef, 'useGridCsvExport');
+  const getDataAsCsv = React.useCallback((options = {}) => {
+    var _options$getRowsToExp, _options$includeHeade;
+
+    logger.debug(`Get data as CSV`);
+    const exportedColumns = getColumnsToExport({
+      apiRef,
+      options
+    });
+    const getRowsToExport = (_options$getRowsToExp = options.getRowsToExport) != null ? _options$getRowsToExp : defaultGetRowsToExport;
+    const exportedRowIds = getRowsToExport({
+      apiRef
+    });
+    return buildCSV({
+      columns: exportedColumns,
+      rowIds: exportedRowIds,
+      getCellParams: apiRef.current.getCellParams,
+      delimiterCharacter: options.delimiter || ',',
+      includeHeaders: (_options$includeHeade = options.includeHeaders) != null ? _options$includeHeade : true
+    });
+  }, [logger, apiRef]);
+  const exportDataAsCsv = React.useCallback(options => {
+    logger.debug(`Export data as CSV`);
+    const csv = getDataAsCsv(options);
+    const blob = new Blob([options != null && options.utf8WithBom ? new Uint8Array([0xef, 0xbb, 0xbf]) : '', csv], {
+      type: 'text/csv'
+    });
+    exportAs(blob, 'csv', options == null ? void 0 : options.fileName);
+  }, [logger, getDataAsCsv]);
+  const csvExportApi = {
+    getDataAsCsv,
+    exportDataAsCsv
+  };
+  useGridApiMethod(apiRef, csvExportApi, 'GridCsvExportApi');
+};

package/hooks/features/export/useGridPrintExport.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
+import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+/**
+ * @requires useGridColumns (state)
+ * @requires useGridFilter (state)
+ * @requires useGridSorting (state)
+ * @requires useGridParamsApi (method)
+ */
+export declare const useGridPrintExport: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'pagination'>) => void;