@mui/x-data-grid 6.7.0 → 6.9.0

package/locales/ptBR.js

@@ -68,12 +68,12 @@ const ptBRGrid = {
   // 'filterOperator<=': '<=',
 
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
-  // headerFilterOperatorIs: 'Is',
-  // headerFilterOperatorNot: 'Is not',
+  headerFilterOperatorContains: 'Contém',
+  headerFilterOperatorEquals: 'Igual',
+  headerFilterOperatorStartsWith: 'Começa com',
+  headerFilterOperatorEndsWith: 'Termina com',
+  headerFilterOperatorIs: 'É',
+  headerFilterOperatorNot: 'Não é',
   // headerFilterOperatorAfter: 'Is after',
   // headerFilterOperatorOnOrAfter: 'Is on or after',
   // headerFilterOperatorBefore: 'Is before',
@@ -81,13 +81,12 @@ const ptBRGrid = {
   // headerFilterOperatorIsEmpty: 'Is empty',
   // headerFilterOperatorIsNotEmpty: 'Is not empty',
   // headerFilterOperatorIsAnyOf: 'Is any of',
-  // 'headerFilterOperator=': 'Equals',
-  // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Greater than',
-  // 'headerFilterOperator>=': 'Greater than or equal to',
-  // 'headerFilterOperator<': 'Less than',
-  // 'headerFilterOperator<=': 'Less than or equal to',
-
+  'headerFilterOperator=': 'Igual',
+  'headerFilterOperator!=': 'Não igual',
+  'headerFilterOperator>': 'Maior que',
+  'headerFilterOperator>=': 'Maior que ou igual a',
+  'headerFilterOperator<': 'Menor que',
+  'headerFilterOperator<=': 'Menor que ou igual a',
   // Filter values text
   filterValueAny: 'qualquer',
   filterValueTrue: 'verdadeiro',

package/models/api/gridCoreApi.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { GridEventPublisher, GridEventListener, GridEvents } from '../events';
+import { Store } from '../../utils/Store';
 import { EventManager, EventListenerOptions } from '../../utils/EventManager';
 import { GridApiCaches } from '../gridApiCaches';
 import type { GridApiCommon, GridPrivateApiCommon } from './gridApiCommon';
@@ -34,6 +35,11 @@ export interface GridCoreApi {
     instanceId: {
         id: number;
     };
+    /**
+     * The pub/sub store containing a reference to the public state.
+     * @ignore - do not document.
+     */
+    store: Store<GridApiCommon['state']>;
 }
 export interface GridCorePrivateApi<GridPublicApi extends GridApiCommon, GridPrivateApi extends GridPrivateApiCommon> {
     /**

package/models/colDef/gridColDef.d.ts

@@ -102,8 +102,9 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
      */
     sortComparator?: GridComparatorFn<V>;
     /**
-     * Type allows to merge this object with a default definition [[GridColDef]].
+     * The type of the column.
      * @default 'string'
+     * @see See {@link https://mui.com/x/react-data-grid/column-definition/#column-types column types docs} for more details.
      */
     type?: GridColType;
     /**
@@ -230,7 +231,7 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
  */
 export interface GridActionsColDef<R extends GridValidRowModel = any, V = any, F = V> extends GridBaseColDef<R, V, F> {
     /**
-     * Type allows to merge this object with a default definition [[GridColDef]].
+     * The type of the column.
      * @default 'actions'
      */
     type: 'actions';
@@ -248,7 +249,7 @@ export interface GridActionsColDef<R extends GridValidRowModel = any, V = any, F
  */
 export interface GridSingleSelectColDef<R extends GridValidRowModel = any, V = any, F = V> extends GridBaseColDef<R, V, F> {
     /**
-     * Type allows to merge this object with a default definition [[GridColDef]].
+     * The type of the column.
      * @default 'singleSelect'
      */
     type: 'singleSelect';

package/models/colDef/gridColType.d.ts

@@ -1,2 +1,4 @@
+type LiteralUnion<LiteralType, BaseType> = LiteralType | (BaseType & Record<never, never>);
 export type GridNativeColTypes = 'string' | 'number' | 'date' | 'dateTime' | 'boolean' | 'singleSelect' | 'actions';
-export type GridColType = GridNativeColTypes | string;
+export type GridColType = LiteralUnion<GridNativeColTypes, string>;
+export {};

package/models/events/gridEventLookup.d.ts

@@ -563,20 +563,20 @@ export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEve
         event: React.TouchEvent;
     };
     /**
-     * Fired when the value of the selection checkbox of the header is changed
+     * Fired when the value of the selection checkbox of the header is changed.
      */
     headerSelectionCheckboxChange: {
         params: GridHeaderSelectionCheckboxParams;
     };
     /**
-     * Fired when the value of the selection checkbox of a row is changed
+     * Fired when the value of the selection checkbox of a row is changed.
      */
     rowSelectionCheckboxChange: {
         params: GridRowSelectionCheckboxParams;
         event: React.ChangeEvent<HTMLElement>;
     };
     /**
-     * Fired when the data is copied to the clipboard
+     * Fired when the data is copied to the clipboard.
      */
     clipboardCopy: {
         params: string;

package/modern/components/GridColumnHeaders.js

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["innerRef", "className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnPositions", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "densityFactor", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { fastMemo } from '../utils/fastMemo';
 import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
 import { GridBaseColumnHeaders } from './columnHeaders/GridBaseColumnHeaders';
 import { GridColumnHeadersInner } from './columnHeaders/GridColumnHeadersInner';
@@ -100,4 +101,5 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
   sortColumnLookup: PropTypes.object.isRequired,
   visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired
 } : void 0;
-export { GridColumnHeaders };
+const MemoizedGridColumnHeaders = fastMemo(GridColumnHeaders);
+export { MemoizedGridColumnHeaders as GridColumnHeaders };

package/modern/components/GridRow.js

@@ -1,17 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"],
-  _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
+const _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses, unstable_useForkRef as useForkRef } from '@mui/utils';
+import { fastMemo } from '../utils/fastMemo';
 import { GridEditModes, GridRowModes, GridCellModes } from '../models/gridEditRowModel';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { gridColumnsTotalWidthSelector } from '../hooks/features/columns/gridColumnsSelector';
-import { useGridSelector } from '../hooks/utils/useGridSelector';
+import { useGridSelector, objectShallowCompare } from '../hooks/utils/useGridSelector';
 import { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
 import { findParentElementFromClassName } from '../utils/domUtils';
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelectionColDef';
@@ -21,6 +21,7 @@ import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSele
 import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
 import { gridColumnGroupsHeaderMaxDepthSelector } from '../hooks/features/columnGrouping/gridColumnGroupsSelector';
 import { randomNumberBetween } from '../utils/utils';
+import { GridCellWrapper, GridCellV7 } from './cell/GridCell';
 import { gridEditRowsStateSelector } from '../hooks/features/editing/gridEditingSelectors';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -67,8 +68,6 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       containerWidth,
       firstColumnToRender,
       isLastVisible = false,
-      focusedCell,
-      tabbableCell,
       onClick,
       onDoubleClick,
       onMouseEnter,
@@ -183,78 +182,27 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const {
     slots,
     slotProps,
-    classes: rootClasses,
-    disableColumnReorder,
-    getCellClassName
+    disableColumnReorder
   } = rootProps;
+  const CellComponent = slots.cell === GridCellV7 ? GridCellV7 : GridCellWrapper;
   const rowReordering = rootProps.rowReordering;
-  const CellComponent = slots.cell;
-  const getCell = React.useCallback((column, cellProps) => {
-    const cellParams = apiRef.current.getCellParams(rowId, column.field);
-    const classNames = apiRef.current.unstable_applyPipeProcessors('cellClassName', [], {
-      id: rowId,
-      field: column.field
-    });
+  const getCell = (column, cellProps) => {
     const disableDragEvents = disableColumnReorder && column.disableReorder || !rowReordering && !!sortModel.length && treeDepth > 1 && Object.keys(editRowsState).length > 0;
-    if (column.cellClassName) {
-      classNames.push(clsx(typeof column.cellClassName === 'function' ? column.cellClassName(cellParams) : column.cellClassName));
-    }
-    const editCellState = editRowsState[rowId] ? editRowsState[rowId][column.field] : null;
-    let content;
-    if (editCellState == null && column.renderCell) {
-      content = column.renderCell(_extends({}, cellParams, {
-        api: apiRef.current
-      }));
-      // TODO move to GridCell
-      classNames.push(clsx(gridClasses['cell--withRenderer'], rootClasses?.['cell--withRenderer']));
-    }
-    if (editCellState != null && column.renderEditCell) {
-      const updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
-
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      const editCellStateRest = _objectWithoutPropertiesLoose(editCellState, _excluded2);
-      const params = _extends({}, cellParams, {
-        row: updatedRow
-      }, editCellStateRest, {
-        api: apiRef.current
-      });
-      content = column.renderEditCell(params);
-      // TODO move to GridCell
-      classNames.push(clsx(gridClasses['cell--editing'], rootClasses?.['cell--editing']));
-    }
-    if (getCellClassName) {
-      // TODO move to GridCell
-      classNames.push(getCellClassName(cellParams));
-    }
-    const hasFocus = focusedCell === column.field;
-    const tabIndex = tabbableCell === column.field ? 0 : -1;
-    const isSelected = apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
-      id: rowId,
-      field: column.field
-    });
+    const editCellState = editRowsState[rowId]?.[column.field] ?? null;
     return /*#__PURE__*/_jsx(CellComponent, _extends({
-      value: cellParams.value,
-      field: column.field,
+      column: column,
       width: cellProps.width,
       rowId: rowId,
       height: rowHeight,
       showRightBorder: cellProps.showRightBorder,
-      formattedValue: cellParams.formattedValue,
       align: column.align || 'left',
-      cellMode: cellParams.cellMode,
       colIndex: cellProps.indexRelativeToAllColumns,
-      isEditable: cellParams.isEditable,
-      isSelected: isSelected,
-      hasFocus: hasFocus,
-      tabIndex: tabIndex,
-      className: clsx(classNames),
       colSpan: cellProps.colSpan,
-      disableDragEvents: disableDragEvents
-    }, slotProps?.cell, {
-      children: content
-    }), column.field);
-  }, [apiRef, rowId, disableColumnReorder, rowReordering, sortModel.length, treeDepth, editRowsState, getCellClassName, focusedCell, tabbableCell, CellComponent, rowHeight, slotProps?.cell, rootClasses]);
-  const sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
+      disableDragEvents: disableDragEvents,
+      editCellState: editCellState
+    }, slotProps?.cell), column.field);
+  };
+  const sizes = useGridSelector(apiRef, () => _extends({}, apiRef.current.unstable_getRowInternalSizes(rowId)), objectShallowCompare);
   let minHeight = rowHeight;
   if (minHeight === 'auto' && sizes) {
     let numberOfBaseSizes = 0;
@@ -303,7 +251,11 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
   const randomNumber = randomNumberBetween(10000, 20, 80);
-  const rowType = apiRef.current.getRowNode(rowId).type;
+  const rowNode = apiRef.current.getRowNode(rowId);
+  if (!rowNode) {
+    return null;
+  }
+  const rowType = rowNode.type;
   const cells = [];
   for (let i = 0; i < renderedColumns.length; i += 1) {
     const column = renderedColumns[i];
@@ -327,7 +279,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
           width
         } = cellColSpanInfo.cellProps;
         const contentWidth = Math.round(randomNumber());
-        cells.push( /*#__PURE__*/_jsx(rootProps.slots.skeletonCell, {
+        cells.push( /*#__PURE__*/_jsx(slots.skeletonCell, {
           width: width,
           contentWidth: contentWidth,
           field: column.field,
@@ -363,8 +315,8 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  containerWidth: PropTypes.number,
-  firstColumnToRender: PropTypes.number,
+  containerWidth: PropTypes.number.isRequired,
+  firstColumnToRender: PropTypes.number.isRequired,
   /**
    * Determines which cell has focus.
    * If `null`, no cell in this row has focus.
@@ -374,24 +326,25 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
    * Index of the row in the whole sorted and filtered dataset.
    * If some rows above have expanded children, this index also take those children into account.
    */
-  index: PropTypes.number,
+  index: PropTypes.number.isRequired,
   isLastVisible: PropTypes.bool,
-  lastColumnToRender: PropTypes.number,
+  lastColumnToRender: PropTypes.number.isRequired,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,
   onMouseEnter: PropTypes.func,
   onMouseLeave: PropTypes.func,
-  position: PropTypes.oneOf(['center', 'left', 'right']),
-  renderedColumns: PropTypes.arrayOf(PropTypes.object),
+  position: PropTypes.oneOf(['center', 'left', 'right']).isRequired,
+  renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
   row: PropTypes.object,
-  rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
-  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  selected: PropTypes.bool,
+  rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
+  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  selected: PropTypes.bool.isRequired,
   /**
    * Determines which cell should be tabbable by having tabIndex=0.
    * If `null`, no cell in this row is in the tab sequence.
    */
   tabbableCell: PropTypes.string,
-  visibleColumns: PropTypes.arrayOf(PropTypes.object)
+  visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired
 } : void 0;
-export { GridRow };
+const MemoizedGridRow = fastMemo(GridRow);
+export { MemoizedGridRow as GridRow };