@mui/x-data-grid 6.3.0 → 6.4.0

package/legacy/hooks/features/clipboard/useGridClipboard.js

@@ -1,5 +1,8 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
 import * as React from 'react';
-import { useGridApiMethod, useGridNativeEventListener } from '../../utils';
+import { useGridApiOptionHandler, useGridNativeEventListener } from '../../utils';
+import { gridFocusCellSelector } from '../focus/gridFocusStateSelector';
+import { serializeCellValue } from '../export/serializers/csvSerializer';
 function writeToClipboardPolyfill(data) {
   var span = document.createElement('span');
   span.style.whiteSpace = 'pre';
@@ -18,6 +21,15 @@ function writeToClipboardPolyfill(data) {
     document.body.removeChild(span);
   }
 }
+function copyToClipboard(data) {
+  if (navigator.clipboard) {
+    navigator.clipboard.writeText(data).catch(function () {
+      writeToClipboardPolyfill(data);
+    });
+  } else {
+    writeToClipboardPolyfill(data);
+  }
+}
 function hasNativeSelection(element) {
   var _window$getSelection;
   // When getSelection is called on an <iframe> that is not displayed Firefox will return null.
@@ -38,24 +50,11 @@ function hasNativeSelection(element) {
  * @requires useGridCsvExport (method)
  * @requires useGridSelection (method)
  */
-export var useGridClipboard = function useGridClipboard(apiRef) {
-  var copySelectedRowsToClipboard = React.useCallback(function () {
-    if (apiRef.current.getSelectedRows().size === 0) {
-      return;
-    }
-    var data = apiRef.current.getDataAsCsv({
-      includeHeaders: false,
-      delimiter: '\t'
-    });
-    if (navigator.clipboard) {
-      navigator.clipboard.writeText(data).catch(function () {
-        writeToClipboardPolyfill(data);
-      });
-    } else {
-      writeToClipboardPolyfill(data);
-    }
-  }, [apiRef]);
-  var handleKeydown = React.useCallback(function (event) {
+export var useGridClipboard = function useGridClipboard(apiRef, props) {
+  var ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
+  var ignoreValueFormatter = (_typeof(ignoreValueFormatterProp) === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.clipboardExport : ignoreValueFormatterProp) || false;
+  var clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
+  var handleCopy = React.useCallback(function (event) {
     var isModifierKeyPressed = event.ctrlKey || event.metaKey;
     // event.code === 'KeyC' is not enough as event.code assume a QWERTY keyboard layout which would
     // be wrong with a Dvorak keyboard (as if pressing J).
@@ -67,11 +66,30 @@ export var useGridClipboard = function useGridClipboard(apiRef) {
     if (hasNativeSelection(event.target)) {
       return;
     }
-    apiRef.current.unstable_copySelectedRowsToClipboard();
-  }, [apiRef]);
-  useGridNativeEventListener(apiRef, apiRef.current.rootElementRef, 'keydown', handleKeydown);
-  var clipboardApi = {
-    unstable_copySelectedRowsToClipboard: copySelectedRowsToClipboard
-  };
-  useGridApiMethod(apiRef, clipboardApi, 'public');
+    var textToCopy = '';
+    var selectedRows = apiRef.current.getSelectedRows();
+    if (selectedRows.size > 0) {
+      textToCopy = apiRef.current.getDataAsCsv({
+        includeHeaders: false,
+        // TODO: make it configurable
+        delimiter: clipboardCopyCellDelimiter
+      });
+    } else {
+      var focusedCell = gridFocusCellSelector(apiRef);
+      if (focusedCell) {
+        var cellParams = apiRef.current.getCellParams(focusedCell.id, focusedCell.field);
+        textToCopy = serializeCellValue(cellParams, {
+          delimiterCharacter: clipboardCopyCellDelimiter,
+          ignoreValueFormatter: ignoreValueFormatter
+        });
+      }
+    }
+    textToCopy = apiRef.current.unstable_applyPipeProcessors('clipboardCopy', textToCopy);
+    if (textToCopy) {
+      copyToClipboard(textToCopy);
+      apiRef.current.publishEvent('clipboardCopy', textToCopy);
+    }
+  }, [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter]);
+  useGridNativeEventListener(apiRef, apiRef.current.rootElementRef, 'keydown', handleCopy);
+  useGridApiOptionHandler(apiRef, 'clipboardCopy', props.onClipboardCopy);
 };

package/legacy/hooks/features/dimensions/useGridDimensions.js

@@ -11,7 +11,6 @@ import { getVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { calculatePinnedRowsHeight } from '../rows/gridRowsUtils';
 import { getTotalHeaderHeight } from '../columns/gridColumnsUtils';
-import { gridClasses } from '../../../constants/gridClasses';
 var isTestEnvironment = process.env.NODE_ENV === 'test';
 var hasScroll = function hasScroll(_ref) {
   var content = _ref.content,
@@ -158,9 +157,8 @@ export function useGridDimensions(apiRef, props) {
     return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
   }, [apiRef, props.pagination, props.paginationMode, props.getRowHeight, rowHeight]);
   var computeSizeAndPublishResizeEvent = React.useCallback(function () {
-    var _apiRef$current$rootE2, _previousSize$current, _previousSize$current2;
-    var rootEl = (_apiRef$current$rootE2 = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE2.current;
-    var mainEl = rootEl == null ? void 0 : rootEl.querySelector(".".concat(gridClasses.main));
+    var _apiRef$current$mainE, _previousSize$current, _previousSize$current2;
+    var mainEl = (_apiRef$current$mainE = apiRef.current.mainElementRef) == null ? void 0 : _apiRef$current$mainE.current;
     if (!mainEl) {
       return;
     }

package/legacy/hooks/features/editing/useGridCellEditing.js

@@ -97,10 +97,14 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
       }
     } else if (params.isEditable) {
       var _reason;
-      if (event.key === ' ') {
-        return; // Space scrolls to the last row
+      var canStartEditing = apiRef.current.unstable_applyPipeProcessors('canStartEditing', true, {
+        event: event,
+        cellParams: params,
+        editMode: 'cell'
+      });
+      if (!canStartEditing) {
+        return;
       }
-
       if (isPrintableKey(event)) {
         _reason = GridCellEditStartReasons.printableKeyDown;
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {

package/legacy/hooks/features/editing/useGridRowEditing.js

@@ -153,10 +153,14 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
       }
     } else if (params.isEditable) {
       var _reason;
-      if (event.key === ' ') {
-        return; // Space scrolls to the last row
+      var canStartEditing = apiRef.current.unstable_applyPipeProcessors('canStartEditing', true, {
+        event: event,
+        cellParams: params,
+        editMode: 'row'
+      });
+      if (!canStartEditing) {
+        return;
       }
-
       if (isPrintableKey(event)) {
         _reason = GridRowEditStartReasons.printableKeyDown;
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {

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

@@ -1,6 +1,6 @@
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../../colDef';
 import { buildWarning } from '../../../../utils/warning';
-var serializeCellValue = function serializeCellValue(value, delimiterCharacter) {
+function sanitizeCellValue(value, delimiterCharacter) {
   if (typeof value === 'string') {
     var formattedValue = value.replace(/"/g, '""');
 
@@ -13,9 +13,36 @@ var serializeCellValue = function serializeCellValue(value, delimiterCharacter)
     return formattedValue;
   }
   return value;
+}
+export var serializeCellValue = function serializeCellValue(cellParams, options) {
+  var delimiterCharacter = options.delimiterCharacter,
+    ignoreValueFormatter = options.ignoreValueFormatter;
+  var value;
+  if (ignoreValueFormatter) {
+    var _cellParams$value2;
+    var columnType = cellParams.colDef.type;
+    if (columnType === 'number') {
+      value = String(cellParams.value);
+    } else if (columnType === 'date' || columnType === 'dateTime') {
+      var _cellParams$value;
+      value = (_cellParams$value = cellParams.value) == null ? void 0 : _cellParams$value.toISOString();
+    } else if (typeof ((_cellParams$value2 = cellParams.value) == null ? void 0 : _cellParams$value2.toString) === 'function') {
+      value = cellParams.value.toString();
+    } else {
+      value = cellParams.value;
+    }
+  } else {
+    value = cellParams.formattedValue;
+  }
+  return sanitizeCellValue(value, delimiterCharacter);
 };
 var objectFormattedValueWarning = buildWarning(['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.']);
-var serializeRow = function serializeRow(id, columns, getCellParams, delimiterCharacter) {
+var serializeRow = function serializeRow(_ref) {
+  var id = _ref.id,
+    columns = _ref.columns,
+    getCellParams = _ref.getCellParams,
+    delimiterCharacter = _ref.delimiterCharacter,
+    ignoreValueFormatter = _ref.ignoreValueFormatter;
   return columns.map(function (column) {
     var cellParams = getCellParams(id, column.field);
     if (process.env.NODE_ENV !== 'production') {
@@ -23,7 +50,10 @@ var serializeRow = function serializeRow(id, columns, getCellParams, delimiterCh
         objectFormattedValueWarning();
       }
     }
-    return serializeCellValue(cellParams.formattedValue, delimiterCharacter);
+    return serializeCellValue(cellParams, {
+      delimiterCharacter: delimiterCharacter,
+      ignoreValueFormatter: ignoreValueFormatter
+    });
   });
 };
 export function buildCSV(options) {
@@ -31,9 +61,16 @@ export function buildCSV(options) {
     rowIds = options.rowIds,
     getCellParams = options.getCellParams,
     delimiterCharacter = options.delimiterCharacter,
-    includeHeaders = options.includeHeaders;
+    includeHeaders = options.includeHeaders,
+    ignoreValueFormatter = options.ignoreValueFormatter;
   var CSVBody = rowIds.reduce(function (acc, id) {
-    return "".concat(acc).concat(serializeRow(id, columns, getCellParams, delimiterCharacter).join(delimiterCharacter), "\r\n");
+    return "".concat(acc).concat(serializeRow({
+      id: id,
+      columns: columns,
+      getCellParams: getCellParams,
+      delimiterCharacter: delimiterCharacter,
+      ignoreValueFormatter: ignoreValueFormatter
+    }).join(delimiterCharacter), "\r\n");
   }, '').trim();
   if (!includeHeaders) {
     return CSVBody;
@@ -41,7 +78,7 @@ export function buildCSV(options) {
   var CSVHead = "".concat(columns.filter(function (column) {
     return column.field !== GRID_CHECKBOX_SELECTION_COL_DEF.field;
   }).map(function (column) {
-    return serializeCellValue(column.headerName || column.field, delimiterCharacter);
+    return sanitizeCellValue(column.headerName || column.field, delimiterCharacter);
   }).join(delimiterCharacter), "\r\n");
   return "".concat(CSVHead).concat(CSVBody).trim();
 }

package/legacy/hooks/features/export/useGridCsvExport.js

@@ -1,4 +1,5 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
@@ -7,7 +8,7 @@ import { buildCSV } from './serializers/csvSerializer';
 import { getColumnsToExport, defaultGetRowsToExport } from './utils';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { GridCsvExportMenuItem } from '../../../components/toolbar/GridToolbarExport';
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @requires useGridColumns (state)
  * @requires useGridFilter (state)
@@ -15,9 +16,10 @@ import { GridCsvExportMenuItem } from '../../../components/toolbar/GridToolbarEx
  * @requires useGridSelection (state)
  * @requires useGridParamsApi (method)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-export var useGridCsvExport = function useGridCsvExport(apiRef) {
+export var useGridCsvExport = function useGridCsvExport(apiRef, props) {
   var logger = useGridLogger(apiRef, 'useGridCsvExport');
+  var ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
+  var ignoreValueFormatter = (_typeof(ignoreValueFormatterProp) === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.csvExport : ignoreValueFormatterProp) || false;
   var getDataAsCsv = React.useCallback(function () {
     var _options$getRowsToExp, _options$includeHeade;
     var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -35,9 +37,10 @@ export var useGridCsvExport = function useGridCsvExport(apiRef) {
       rowIds: exportedRowIds,
       getCellParams: apiRef.current.getCellParams,
       delimiterCharacter: options.delimiter || ',',
-      includeHeaders: (_options$includeHeade = options.includeHeaders) != null ? _options$includeHeade : true
+      includeHeaders: (_options$includeHeade = options.includeHeaders) != null ? _options$includeHeade : true,
+      ignoreValueFormatter: ignoreValueFormatter
     });
-  }, [logger, apiRef]);
+  }, [logger, apiRef, ignoreValueFormatter]);
   var exportDataAsCsv = React.useCallback(function (options) {
     logger.debug("Export data as CSV");
     var csv = getDataAsCsv(options);

package/legacy/hooks/features/focus/useGridFocus.js

@@ -307,9 +307,9 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
   useGridApiMethod(apiRef, focusPrivateApi, 'private');
   React.useEffect(function () {
     var doc = ownerDocument(apiRef.current.rootElementRef.current);
-    doc.addEventListener('click', handleDocumentClick);
+    doc.addEventListener('mouseup', handleDocumentClick);
     return function () {
-      doc.removeEventListener('click', handleDocumentClick);
+      doc.removeEventListener('mouseup', handleDocumentClick);
     };
   }, [apiRef, handleDocumentClick]);
   useGridApiEventHandler(apiRef, 'columnHeaderBlur', handleBlur);

package/legacy/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -15,6 +15,7 @@ import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
 import { unstable_gridFocusColumnGroupHeaderSelector } from '../focus';
 import { gridColumnGroupsHeaderMaxDepthSelector } from '../columnGrouping/gridColumnGroupsSelector';
 import { useGridSelector } from '../../utils/useGridSelector';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 function enrichPageRowsWithPinnedRows(apiRef, rows) {
   var pinnedRows = gridPinnedRowsSelector(apiRef) || {};
   return [].concat(_toConsumableArray(pinnedRows.top || []), _toConsumableArray(rows), _toConsumableArray(pinnedRows.bottom || []));
@@ -450,6 +451,15 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
       event.preventDefault();
     }
   }, [apiRef, currentPageRows, theme.direction, getRowIdFromIndex, goToCell, goToHeader]);
+  var checkIfCanStartEditing = React.useCallback(function (initialValue, _ref3) {
+    var event = _ref3.event;
+    if (event.key === ' ') {
+      // Space scrolls to the last row
+      return false;
+    }
+    return initialValue;
+  }, []);
+  useGridRegisterPipeProcessor(apiRef, 'canStartEditing', checkIfCanStartEditing);
   useGridApiEventHandler(apiRef, 'columnHeaderKeyDown', handleColumnHeaderKeyDown);
   useGridApiEventHandler(apiRef, 'columnGroupHeaderKeyDown', handleColumnGroupHeaderKeyDown);
   useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.3.0
+ * @mui/x-data-grid v6.4.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/internals/index.js

@@ -41,14 +41,15 @@ export { useGridEvents } from '../hooks/features/events/useGridEvents';
 export { useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
 export { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
 export { useGridVirtualScroller, getRenderableIndexes } from '../hooks/features/virtualization/useGridVirtualScroller';
-export { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
+export { useGridVisibleRows, getVisibleRows } from '../hooks/utils/useGridVisibleRows';
 export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
 export { createSelector, unstable_resetCreateSelectorCache } from '../utils/createSelector';
-export { findParentElementFromClassName } from '../utils/domUtils';
+export { findParentElementFromClassName, getActiveElement } from '../utils/domUtils';
 export { isNavigationKey } from '../utils/keyboardUtils';
 export { clamp, isDeepEqual, isNumber, isFunction, isObject } from '../utils/utils';
 export { buildWarning } from '../utils/warning';
 export { exportAs } from '../utils/exportAs';
 export { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
+export { serializeCellValue } from '../hooks/features/export/serializers/csvSerializer';
 export * from './utils';