@mui/x-data-grid 6.3.0 → 6.4.0

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

@@ -1,6 +1,6 @@
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../../colDef';
 import { buildWarning } from '../../../../utils/warning';
-const serializeCellValue = (value, delimiterCharacter) => {
+function sanitizeCellValue(value, delimiterCharacter) {
   if (typeof value === 'string') {
     const formattedValue = value.replace(/"/g, '""');
 
@@ -11,16 +11,49 @@ const serializeCellValue = (value, delimiterCharacter) => {
     return formattedValue;
   }
   return value;
+}
+export const serializeCellValue = (cellParams, options) => {
+  const {
+    delimiterCharacter,
+    ignoreValueFormatter
+  } = options;
+  let value;
+  if (ignoreValueFormatter) {
+    var _cellParams$value2;
+    const 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);
 };
 const 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.']);
-const serializeRow = (id, columns, getCellParams, delimiterCharacter) => columns.map(column => {
+const serializeRow = ({
+  id,
+  columns,
+  getCellParams,
+  delimiterCharacter,
+  ignoreValueFormatter
+}) => columns.map(column => {
   const cellParams = getCellParams(id, column.field);
   if (process.env.NODE_ENV !== 'production') {
     if (String(cellParams.formattedValue) === '[object Object]') {
       objectFormattedValueWarning();
     }
   }
-  return serializeCellValue(cellParams.formattedValue, delimiterCharacter);
+  return serializeCellValue(cellParams, {
+    delimiterCharacter,
+    ignoreValueFormatter
+  });
 });
 export function buildCSV(options) {
   const {
@@ -28,12 +61,19 @@ export function buildCSV(options) {
     rowIds,
     getCellParams,
     delimiterCharacter,
-    includeHeaders
+    includeHeaders,
+    ignoreValueFormatter
   } = options;
-  const CSVBody = rowIds.reduce((acc, id) => `${acc}${serializeRow(id, columns, getCellParams, delimiterCharacter).join(delimiterCharacter)}\r\n`, '').trim();
+  const CSVBody = rowIds.reduce((acc, id) => `${acc}${serializeRow({
+    id,
+    columns,
+    getCellParams,
+    delimiterCharacter,
+    ignoreValueFormatter
+  }).join(delimiterCharacter)}\r\n`, '').trim();
   if (!includeHeaders) {
     return CSVBody;
   }
-  const CSVHead = `${columns.filter(column => column.field !== GRID_CHECKBOX_SELECTION_COL_DEF.field).map(column => serializeCellValue(column.headerName || column.field, delimiterCharacter)).join(delimiterCharacter)}\r\n`;
+  const CSVHead = `${columns.filter(column => column.field !== GRID_CHECKBOX_SELECTION_COL_DEF.field).map(column => sanitizeCellValue(column.headerName || column.field, delimiterCharacter)).join(delimiterCharacter)}\r\n`;
   return `${CSVHead}${CSVBody}`.trim();
 }

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
+import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 /**
  * @requires useGridColumns (state)
  * @requires useGridFilter (state)
@@ -7,4 +8,4 @@ import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
  * @requires useGridSelection (state)
  * @requires useGridParamsApi (method)
  */
-export declare const useGridCsvExport: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>) => void;
+export declare const useGridCsvExport: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'unstable_ignoreValueFormatterDuringExport'>) => void;

package/hooks/features/export/useGridCsvExport.js

@@ -6,7 +6,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)
@@ -14,9 +14,10 @@ import { GridCsvExportMenuItem } from '../../../components/toolbar/GridToolbarEx
  * @requires useGridSelection (state)
  * @requires useGridParamsApi (method)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-export const useGridCsvExport = apiRef => {
+export const useGridCsvExport = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridCsvExport');
+  const ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
+  const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.csvExport : ignoreValueFormatterProp) || false;
   const getDataAsCsv = React.useCallback((options = {}) => {
     var _options$getRowsToExp, _options$includeHeade;
     logger.debug(`Get data as CSV`);
@@ -33,9 +34,10 @@ export const 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
     });
-  }, [logger, apiRef]);
+  }, [logger, apiRef, ignoreValueFormatter]);
   const exportDataAsCsv = React.useCallback(options => {
     logger.debug(`Export data as CSV`);
     const csv = getDataAsCsv(options);

package/hooks/features/focus/useGridFocus.js

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

package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -14,6 +14,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) {
   const pinnedRows = gridPinnedRowsSelector(apiRef) || {};
   return [...(pinnedRows.top || []), ...rows, ...(pinnedRows.bottom || [])];
@@ -450,6 +451,16 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       event.preventDefault();
     }
   }, [apiRef, currentPageRows, theme.direction, getRowIdFromIndex, goToCell, goToHeader]);
+  const checkIfCanStartEditing = React.useCallback((initialValue, {
+    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/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/internals/index.d.ts

@@ -51,13 +51,13 @@ export { useGridDimensions } from '../hooks/features/dimensions/useGridDimension
 export { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
 export type { GridRestoreStatePreProcessingContext } from '../hooks/features/statePersistence/gridStatePersistenceInterface';
 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 type { GridStateInitializer } from '../hooks/utils/useGridInitializeState';
 export type { GridExperimentalFeatures, DataGridPropsWithoutDefaultValue, DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithComplexDefaultValueBeforeProcessing, } from '../models/props/DataGridProps';
 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';
@@ -66,4 +66,5 @@ export type { GridPrivateOnlyApiCommon } from '../models/api/gridApiCommon';
 export { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
 export type { GridApiCommunity } from '../models/api/gridApiCommunity';
 export type { GridApiCaches } from '../models/gridApiCaches';
+export { serializeCellValue } from '../hooks/features/export/serializers/csvSerializer';
 export * from './utils';

package/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';

package/joy/icons.d.ts

@@ -0,0 +1,33 @@
+import { GridIconSlotsComponent } from '../models/gridIconSlotsComponent';
+import { UncapitalizeObjectKeys } from '../internals/utils';
+export declare const GridArrowUpwardIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridArrowDownwardIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridKeyboardArrowLeft: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridKeyboardArrowRight: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridExpandMoreIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridFilterListIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridFilterAltIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridSearchIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridMenuIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridCheckCircleIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridColumnIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridSeparatorIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridViewHeadlineIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridTableRowsIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridViewStreamIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridTripleDotsVerticalIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridCloseIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridAddIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridRemoveIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridLoadIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridDragIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridSaveAltIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridCheckIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridMoreVertIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridVisibilityOffIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridViewColumnIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridClearIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridDeleteIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+export declare const GridDeleteForeverIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
+declare const joyIconSlots: UncapitalizeObjectKeys<GridIconSlotsComponent>;
+export default joyIconSlots;