@mui/x-data-grid 7.5.0 → 7.6.0

package/node/hooks/features/columnResize/useGridColumnResize.js

@@ -22,27 +22,6 @@ var _gridColumnsInterfaces = require("../columns/gridColumnsInterfaces");
 var _columns = require("../columns");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-// TODO: remove support for Safari < 13.
-// https://caniuse.com/#search=touch-action
-//
-// Safari, on iOS, supports touch action since v13.
-// Over 80% of the iOS phones are compatible
-// in August 2020.
-// Utilizing the CSS.supports method to check if touch-action is supported.
-// Since CSS.supports is supported on all but Edge@12 and IE and touch-action
-// is supported on both Edge@12 and IE if CSS.supports is not available that means that
-// touch-action will be supported
-let cachedSupportsTouchActionNone = false;
-function doesSupportTouchActionNone() {
-  if (cachedSupportsTouchActionNone === undefined) {
-    if (typeof CSS !== 'undefined' && typeof CSS.supports === 'function') {
-      cachedSupportsTouchActionNone = CSS.supports('touch-action', 'none');
-    } else {
-      cachedSupportsTouchActionNone = true;
-    }
-  }
-  return cachedSupportsTouchActionNone;
-}
 function trackFinger(event, currentTouchId) {
   if (currentTouchId !== undefined && event.changedTouches) {
     for (let i = 0; i < event.changedTouches.length; i += 1) {
@@ -304,6 +283,10 @@ const useGridColumnResize = (apiRef, props) => {
     if (refs.colDef) {
       apiRef.current.setColumnWidth(refs.colDef.field, refs.colDef.width);
       logger.debug(`Updating col ${refs.colDef.field} with new width: ${refs.colDef.width}`);
+
+      // Since during resizing we update the columns width outside of React, React is unable to
+      // reapply the right style properties. We need to sync the state manually.
+      // So we reapply the same logic as in https://github.com/mui/mui-x/blob/0511bf65543ca05d2602a5a3e0a6156f2fc8e759/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx#L405
       const columnsState = (0, _columns.gridColumnsStateSelector)(apiRef.current.state);
       refs.groupHeaderElements.forEach(element => {
         const fields = (0, _domUtils.getFieldsFromGroupHeaderElem)(element);
@@ -397,10 +380,6 @@ const useGridColumnResize = (apiRef, props) => {
     if (!cellSeparator) {
       return;
     }
-    // If touch-action: none; is not supported we need to prevent the scroll manually.
-    if (!doesSupportTouchActionNone()) {
-      event.preventDefault();
-    }
     const touch = event.changedTouches[0];
     if (touch != null) {
       // A number that uniquely identifies the current finger in the touch session.
@@ -572,7 +551,7 @@ const useGridColumnResize = (apiRef, props) => {
     }
   });
   (0, _utils2.useGridNativeEventListener)(apiRef, () => apiRef.current.columnHeadersContainerRef?.current, 'touchstart', handleTouchStart, {
-    passive: doesSupportTouchActionNone()
+    passive: true
   });
   (0, _utils2.useGridApiMethod)(apiRef, {
     autosizeColumns

package/node/hooks/features/columns/gridColumnsUtils.js

@@ -129,24 +129,29 @@ const hydrateColumnsWidth = (rawState, dimensions) => {
   const flexColumns = [];
 
   // For the non-flex columns, compute their width
-  // For the flex columns, compute there minimum width and how much width must be allocated during the flex allocation
+  // For the flex columns, compute their minimum width and how much width must be allocated during the flex allocation
   rawState.orderedFields.forEach(columnField => {
-    const newColumn = (0, _extends2.default)({}, rawState.lookup[columnField]);
-    if (rawState.columnVisibilityModel[columnField] === false) {
-      newColumn.computedWidth = 0;
-    } else {
-      let computedWidth;
-      if (newColumn.flex && newColumn.flex > 0) {
-        totalFlexUnits += newColumn.flex;
-        computedWidth = 0;
-        flexColumns.push(newColumn);
+    let column = rawState.lookup[columnField];
+    let computedWidth = 0;
+    let isFlex = false;
+    if (rawState.columnVisibilityModel[columnField] !== false) {
+      if (column.flex && column.flex > 0) {
+        totalFlexUnits += column.flex;
+        isFlex = true;
       } else {
-        computedWidth = (0, _utils.clamp)(newColumn.width || _colDef.GRID_STRING_COL_DEF.width, newColumn.minWidth || _colDef.GRID_STRING_COL_DEF.minWidth, newColumn.maxWidth || _colDef.GRID_STRING_COL_DEF.maxWidth);
+        computedWidth = (0, _utils.clamp)(column.width || _colDef.GRID_STRING_COL_DEF.width, column.minWidth || _colDef.GRID_STRING_COL_DEF.minWidth, column.maxWidth || _colDef.GRID_STRING_COL_DEF.maxWidth);
       }
       widthAllocatedBeforeFlex += computedWidth;
-      newColumn.computedWidth = computedWidth;
     }
-    columnsLookup[columnField] = newColumn;
+    if (column.computedWidth !== computedWidth) {
+      column = (0, _extends2.default)({}, column, {
+        computedWidth
+      });
+    }
+    if (isFlex) {
+      flexColumns.push(column);
+    }
+    columnsLookup[columnField] = column;
   });
   const availableWidth = dimensions === undefined ? 0 : dimensions.viewportOuterSize.width - (dimensions.hasScrollY ? dimensions.scrollbarSize : 0);
   const initialFreeSpace = Math.max(availableWidth - widthAllocatedBeforeFlex, 0);

package/node/hooks/features/columns/useGridColumnSpanning.js

@@ -18,6 +18,9 @@ const useGridColumnSpanning = apiRef => {
   const getCellColSpanInfo = (rowId, columnIndex) => {
     return lookup.current[rowId]?.[columnIndex];
   };
+  const resetColSpan = () => {
+    lookup.current = {};
+  };
 
   // Calculate `colSpan` for each cell in the row
   const calculateColSpan = React.useCallback(({
@@ -45,15 +48,12 @@ const useGridColumnSpanning = apiRef => {
     unstable_getCellColSpanInfo: getCellColSpanInfo
   };
   const columnSpanningPrivateApi = {
+    resetColSpan,
     calculateColSpan
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, columnSpanningPublicApi, 'public');
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, columnSpanningPrivateApi, 'private');
-  const handleColumnReorderChange = React.useCallback(() => {
-    // `colSpan` needs to be recalculated after column reordering
-    lookup.current = {};
-  }, []);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnOrderChange', handleColumnReorderChange);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnOrderChange', resetColSpan);
 };
 exports.useGridColumnSpanning = useGridColumnSpanning;
 function calculateCellColSpan(params) {

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

@@ -7,14 +7,20 @@ exports.buildCSV = buildCSV;
 exports.serializeCellValue = void 0;
 var _colDef = require("../../../../colDef");
 var _warning = require("../../../../utils/warning");
-function sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes) {
+function sanitizeCellValue(value, csvOptions) {
   if (typeof value === 'string') {
-    if (shouldAppendQuotes) {
+    if (csvOptions.shouldAppendQuotes || csvOptions.escapeFormulas) {
       const escapedValue = value.replace(/"/g, '""');
-      // Make sure value containing delimiter or line break won't be split into multiple rows
-      if ([delimiterCharacter, '\n', '\r', '"'].some(delimiter => value.includes(delimiter))) {
+      // Make sure value containing delimiter or line break won't be split into multiple cells
+      if ([csvOptions.delimiter, '\n', '\r', '"'].some(delimiter => value.includes(delimiter))) {
         return `"${escapedValue}"`;
       }
+      if (csvOptions.escapeFormulas) {
+        // See https://owasp.org/www-community/attacks/CSV_Injection
+        if (['=', '+', '-', '@', '\t', '\r'].includes(escapedValue[0])) {
+          return `'${escapedValue}`;
+        }
+      }
       return escapedValue;
     }
     return value;
@@ -23,9 +29,8 @@ function sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes) {
 }
 const serializeCellValue = (cellParams, options) => {
   const {
-    delimiterCharacter,
-    ignoreValueFormatter,
-    shouldAppendQuotes
+    csvOptions,
+    ignoreValueFormatter
   } = options;
   let value;
   if (ignoreValueFormatter) {
@@ -42,7 +47,7 @@ const serializeCellValue = (cellParams, options) => {
   } else {
     value = cellParams.formattedValue;
   }
-  return sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes);
+  return sanitizeCellValue(value, csvOptions);
 };
 exports.serializeCellValue = serializeCellValue;
 const objectFormattedValueWarning = (0, _warning.buildWarning)(['MUI X: 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.']);
@@ -55,12 +60,12 @@ class CSVRow {
   }
   addValue(value) {
     if (!this.isEmpty) {
-      this.rowString += this.options.delimiterCharacter;
+      this.rowString += this.options.csvOptions.delimiter;
     }
     if (value === null || value === undefined) {
       this.rowString += '';
     } else if (typeof this.options.sanitizeCellValue === 'function') {
-      this.rowString += this.options.sanitizeCellValue(value, this.options.delimiterCharacter, this.options.shouldAppendQuotes);
+      this.rowString += this.options.sanitizeCellValue(value, this.options.csvOptions);
     } else {
       this.rowString += value;
     }
@@ -74,13 +79,11 @@ const serializeRow = ({
   id,
   columns,
   getCellParams,
-  delimiterCharacter,
-  ignoreValueFormatter,
-  shouldAppendQuotes
+  csvOptions,
+  ignoreValueFormatter
 }) => {
   const row = new CSVRow({
-    delimiterCharacter,
-    shouldAppendQuotes
+    csvOptions
   });
   columns.forEach(column => {
     const cellParams = getCellParams(id, column.field);
@@ -90,9 +93,8 @@ const serializeRow = ({
       }
     }
     row.addValue(serializeCellValue(cellParams, {
-      delimiterCharacter,
       ignoreValueFormatter,
-      shouldAppendQuotes
+      csvOptions
     }));
   });
   return row.getRowString();
@@ -101,27 +103,23 @@ function buildCSV(options) {
   const {
     columns,
     rowIds,
-    delimiterCharacter,
-    includeHeaders,
-    includeColumnGroupsHeaders,
+    csvOptions,
     ignoreValueFormatter,
-    apiRef,
-    shouldAppendQuotes
+    apiRef
   } = options;
   const CSVBody = rowIds.reduce((acc, id) => `${acc}${serializeRow({
     id,
     columns,
     getCellParams: apiRef.current.getCellParams,
-    delimiterCharacter,
     ignoreValueFormatter,
-    shouldAppendQuotes
+    csvOptions
   })}\r\n`, '').trim();
-  if (!includeHeaders) {
+  if (!csvOptions.includeHeaders) {
     return CSVBody;
   }
   const filteredColumns = columns.filter(column => column.field !== _colDef.GRID_CHECKBOX_SELECTION_COL_DEF.field);
   const headerRows = [];
-  if (includeColumnGroupsHeaders) {
+  if (csvOptions.includeColumnGroupsHeaders) {
     const columnGroupLookup = apiRef.current.getAllGroupDetails();
     let maxColumnGroupsDepth = 0;
     const columnGroupPathsLookup = filteredColumns.reduce((acc, column) => {
@@ -132,9 +130,8 @@ function buildCSV(options) {
     }, {});
     for (let i = 0; i < maxColumnGroupsDepth; i += 1) {
       const headerGroupRow = new CSVRow({
-        delimiterCharacter,
-        sanitizeCellValue,
-        shouldAppendQuotes
+        csvOptions,
+        sanitizeCellValue
       });
       headerRows.push(headerGroupRow);
       filteredColumns.forEach(column => {
@@ -145,9 +142,8 @@ function buildCSV(options) {
     }
   }
   const mainHeaderRow = new CSVRow({
-    delimiterCharacter,
-    sanitizeCellValue,
-    shouldAppendQuotes
+    csvOptions,
+    sanitizeCellValue
   });
   filteredColumns.forEach(column => {
     mainHeaderRow.addValue(column.headerName || column.field);

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

@@ -39,12 +39,15 @@ const useGridCsvExport = (apiRef, props) => {
     return (0, _csvSerializer.buildCSV)({
       columns: exportedColumns,
       rowIds: exportedRowIds,
-      delimiterCharacter: options.delimiter || ',',
-      includeHeaders: options.includeHeaders ?? true,
-      includeColumnGroupsHeaders: options.includeColumnGroupsHeaders ?? true,
+      csvOptions: {
+        delimiter: options.delimiter || ',',
+        shouldAppendQuotes: options.shouldAppendQuotes ?? true,
+        includeHeaders: options.includeHeaders ?? true,
+        includeColumnGroupsHeaders: options.includeColumnGroupsHeaders ?? true,
+        escapeFormulas: options.escapeFormulas ?? true
+      },
       ignoreValueFormatter,
-      apiRef,
-      shouldAppendQuotes: options.shouldAppendQuotes ?? true
+      apiRef
     });
   }, [logger, apiRef, ignoreValueFormatter]);
   const exportDataAsCsv = React.useCallback(options => {

package/node/hooks/features/virtualization/useGridVirtualScroller.js

@@ -54,7 +54,14 @@ const createScrollCache = (mode, rowBufferPx, columnBufferPx, verticalBuffer, ho
   direction: ScrollDirection.NONE,
   buffer: bufferForDirection(mode, ScrollDirection.NONE, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer)
 });
-const isJSDOM = typeof window !== 'undefined' ? /jsdom/.test(window.navigator.userAgent) : false;
+let isJSDOM = false;
+try {
+  if (typeof window !== 'undefined') {
+    isJSDOM = /jsdom/.test(window.navigator.userAgent);
+  }
+} catch (_) {
+  /* ignore */
+}
 const useGridVirtualScroller = () => {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();

package/node/index.js

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

package/node/locales/faIR.js

@@ -9,7 +9,7 @@ var _getGridLocalization = require("../utils/getGridLocalization");
 const faIRGrid = {
   // Root
   noRowsLabel: 'بدون سطر',
-  noResultsOverlayLabel: 'نتیجه ای پیدا نشد.',
+  noResultsOverlayLabel: 'نتیجه‌ای پیدا نشد.',
   // Density selector toolbar button text
   toolbarDensity: 'تراکم',
   toolbarDensityLabel: 'تراکم',
@@ -103,12 +103,12 @@ const faIRGrid = {
   columnMenuFilter: 'فیلتر',
   columnMenuHideColumn: 'مخفی',
   columnMenuUnsort: 'نامرتب‌کردن',
-  columnMenuSortAsc: 'مرتب‌کردن صعودی',
-  columnMenuSortDesc: 'مرتب‌کردن نزولی',
+  columnMenuSortAsc: 'مرتب‌سازی صعودی',
+  columnMenuSortDesc: 'مرتب‌سازی نزولی',
   // Column header text
   columnHeaderFiltersTooltipActive: count => count !== 1 ? `${count} فیلتر‌های فعال` : `${count} فیلتر فعال`,
   columnHeaderFiltersLabel: 'نمایش فیلترها',
-  columnHeaderSortIconLabel: 'مرتب‌کردن',
+  columnHeaderSortIconLabel: 'مرتب‌سازی',
   // Rows selected footer text
   footerRowSelected: count => count !== 1 ? `${count.toLocaleString()} سطرهای انتخاب شده` : `${count.toLocaleString()} سطر انتخاب شده`,
   // Total row amount footer text

package/node/locales/fiFI.js

@@ -36,11 +36,10 @@ const fiFIGrid = {
   toolbarExportPrint: 'Tulosta',
   toolbarExportExcel: 'Lataa Excel-muodossa',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementSearchTitle: 'Hae',
+  columnsManagementNoColumns: 'Ei sarakkeita näytettäväksi',
+  columnsManagementShowHideAllText: 'Näytä/Piilota kaikki',
+  columnsManagementReset: 'Palauta',
   // Filter panel text
   filterPanelAddFilter: 'Lisää suodatin',
   filterPanelRemoveAll: 'Poista kaikki',

package/node/utils/domUtils.js

@@ -79,8 +79,7 @@ function findHeaderElementFromField(elem, field) {
   return elem.querySelector(`[data-field="${field}"]`);
 }
 function getFieldsFromGroupHeaderElem(colCellEl) {
-  const fieldsString = colCellEl.getAttribute('data-fields');
-  return fieldsString?.startsWith('|-') ? fieldsString.slice(2, -2).split('-|-') : [];
+  return colCellEl.getAttribute('data-fields').slice(2, -2).split('-|-');
 }
 function findGroupHeaderElementsFromField(elem, field) {
   return Array.from(elem.querySelectorAll(`[data-fields*="|-${field}-|"]`) ?? []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.5.0",
+  "version": "7.6.0",
   "description": "The Community plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -37,8 +37,9 @@
     "directory": "packages/x-data-grid"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
-    "@mui/system": "^5.15.14",
+    "@babel/runtime": "^7.24.6",
+    "@mui/internal-test-utils": "1.0.0-dev.20240529-082515-213b5e33ab",
+    "@mui/system": "^5.15.15",
     "@mui/utils": "^5.15.14",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",

package/utils/domUtils.js

@@ -54,8 +54,7 @@ export function findHeaderElementFromField(elem, field) {
   return elem.querySelector(`[data-field="${field}"]`);
 }
 export function getFieldsFromGroupHeaderElem(colCellEl) {
-  const fieldsString = colCellEl.getAttribute('data-fields');
-  return fieldsString?.startsWith('|-') ? fieldsString.slice(2, -2).split('-|-') : [];
+  return colCellEl.getAttribute('data-fields').slice(2, -2).split('-|-');
 }
 export function findGroupHeaderElementsFromField(elem, field) {
   return Array.from(elem.querySelectorAll(`[data-fields*="|-${field}-|"]`) ?? []);