@mui/x-data-grid 6.7.0 → 6.8.0

package/locales/elGR.js

@@ -1,3 +1,4 @@
+import { elGR as elGRCore } from '@mui/material/locale';
 import { getGridLocalization } from '../utils/getGridLocalization';
 const elGRGrid = {
   // Root
@@ -19,17 +20,15 @@ const elGRGrid = {
   toolbarFiltersTooltipShow: 'Εμφάνιση φίλτρων',
   toolbarFiltersTooltipActive: count => count !== 1 ? `${count} ενεργά φίλτρα` : `${count} ενεργό φίλτρο`,
   // Quick filter toolbar field
-  // toolbarQuickFilterPlaceholder: 'Search…',
-  // toolbarQuickFilterLabel: 'Search',
-  // toolbarQuickFilterDeleteIconLabel: 'Clear',
-
+  toolbarQuickFilterPlaceholder: 'Αναζήτηση…',
+  toolbarQuickFilterLabel: 'Αναζήτηση',
+  toolbarQuickFilterDeleteIconLabel: 'Καθαρισμός',
   // Export selector toolbar button text
   toolbarExport: 'Εξαγωγή',
   toolbarExportLabel: 'Εξαγωγή',
   toolbarExportCSV: 'Λήψη ως CSV',
-  // toolbarExportPrint: 'Print',
-  // toolbarExportExcel: 'Download as Excel',
-
+  toolbarExportPrint: 'Εκτύπωση',
+  toolbarExportExcel: 'Λήψη ως Excel',
   // Columns panel text
   columnsPanelTextFieldLabel: 'Εύρεση στήλης',
   columnsPanelTextFieldPlaceholder: 'Επικεφαλίδα στήλης',
@@ -38,9 +37,9 @@ const elGRGrid = {
   columnsPanelHideAllButton: 'Απόκρυψη όλων',
   // Filter panel text
   filterPanelAddFilter: 'Προσθήκη φίλτρου',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Αφαίρεση όλων',
   filterPanelDeleteIconLabel: 'Διαγραφή',
-  // filterPanelLogicOperator: 'Logic operator',
+  filterPanelLogicOperator: 'Λογικός τελεστής',
   filterPanelOperator: 'Τελεστές',
   filterPanelOperatorAnd: 'Καί',
   filterPanelOperatorOr: 'Ή',
@@ -60,44 +59,41 @@ const elGRGrid = {
   filterOperatorOnOrBefore: 'είναι ίσο ή πριν',
   filterOperatorIsEmpty: 'είναι κενό',
   filterOperatorIsNotEmpty: 'δεν είναι κενό',
-  // filterOperatorIsAnyOf: 'is any of',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  filterOperatorIsAnyOf: 'είναι οποιοδήποτε από',
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
-  // headerFilterOperatorIs: 'Is',
-  // headerFilterOperatorNot: 'Is not',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // 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',
-
+  headerFilterOperatorContains: 'Περιέχει',
+  headerFilterOperatorEquals: 'Ισούται',
+  headerFilterOperatorStartsWith: 'Ξεκινάει με',
+  headerFilterOperatorEndsWith: 'Τελειώνει με',
+  headerFilterOperatorIs: 'Είναι',
+  headerFilterOperatorNot: 'Δεν είναι',
+  headerFilterOperatorAfter: 'Είναι μετά',
+  headerFilterOperatorOnOrAfter: 'Είναι ίσο ή μετά',
+  headerFilterOperatorBefore: 'Είναι πριν',
+  headerFilterOperatorOnOrBefore: 'Είναι ίσο ή πριν',
+  headerFilterOperatorIsEmpty: 'Είναι κενό',
+  headerFilterOperatorIsNotEmpty: 'Δεν είναι κενό',
+  headerFilterOperatorIsAnyOf: 'Είναι οποιοδήποτε από',
+  'headerFilterOperator=': 'Ισούται',
+  'headerFilterOperator!=': 'Δεν ισούται',
+  'headerFilterOperator>': 'Μεγαλύτερο από',
+  'headerFilterOperator>=': 'Μεγαλύτερο ή ίσο με',
+  'headerFilterOperator<': 'Μικρότερο από',
+  'headerFilterOperator<=': 'Μικρότερο ή ίσο με',
   // Filter values text
-  // filterValueAny: 'any',
-  // filterValueTrue: 'true',
-  // filterValueFalse: 'false',
-
+  filterValueAny: 'οποιοδήποτε',
+  filterValueTrue: 'αληθές',
+  filterValueFalse: 'ψευδές',
   // Column menu text
   columnMenuLabel: 'Μενού',
   columnMenuShowColumns: 'Εμφάνιση στηλών',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Διαχείριση στηλών',
   columnMenuFilter: 'Φίλτρο',
   columnMenuHideColumn: 'Απόκρυψη',
   columnMenuUnsort: 'Απενεργοποίηση ταξινόμησης',
@@ -114,49 +110,40 @@ const elGRGrid = {
   // Total visible row amount footer text
   footerTotalVisibleRows: (visibleCount, totalCount) => `${visibleCount.toLocaleString()} από ${totalCount.toLocaleString()}`,
   // Checkbox selection text
-  // checkboxSelectionHeaderName: 'Checkbox selection',
-  // checkboxSelectionSelectAllRows: 'Select all rows',
-  // checkboxSelectionUnselectAllRows: 'Unselect all rows',
-  // checkboxSelectionSelectRow: 'Select row',
-  // checkboxSelectionUnselectRow: 'Unselect row',
-
+  checkboxSelectionHeaderName: 'Επιλογή πλαισίου ελέγχου',
+  checkboxSelectionSelectAllRows: 'Επιλέξτε όλες τις σειρές',
+  checkboxSelectionUnselectAllRows: 'Καταργήση επιλογής όλων των σειρών',
+  checkboxSelectionSelectRow: 'Επιλογή γραμμής',
+  checkboxSelectionUnselectRow: 'Καταργήση επιλογής γραμμής',
   // Boolean cell text
-  // booleanCellTrueLabel: 'yes',
-  // booleanCellFalseLabel: 'no',
-
+  booleanCellTrueLabel: 'ναί',
+  booleanCellFalseLabel: 'όχι',
   // Actions cell more text
-  actionsCellMore: 'περισσότερα'
-
+  actionsCellMore: 'περισσότερα',
   // Column pinning text
-  // pinToLeft: 'Pin to left',
-  // pinToRight: 'Pin to right',
-  // unpin: 'Unpin',
-
+  pinToLeft: 'Καρφιτσώμα στα αριστερά',
+  pinToRight: 'Καρφιτσώμα στα δεξιά',
+  unpin: 'Ξεκαρφίτσωμα',
   // Tree Data
-  // treeDataGroupingHeaderName: 'Group',
-  // treeDataExpand: 'see children',
-  // treeDataCollapse: 'hide children',
-
+  treeDataGroupingHeaderName: 'Ομαδοποίηση',
+  treeDataExpand: 'εμφάνιση περιεχομένων',
+  treeDataCollapse: 'απόκρυψη περιεχομένων',
   // Grouping columns
-  // groupingColumnHeaderName: 'Group',
-  // groupColumn: name => `Group by ${name}`,
-  // unGroupColumn: name => `Stop grouping by ${name}`,
-
+  groupingColumnHeaderName: 'Ομαδοποίηση',
+  groupColumn: name => `Ομαδοποίηση κατά ${name}`,
+  unGroupColumn: name => `Διακοπή ομαδοποίησης κατά ${name}`,
   // Master/detail
-  // detailPanelToggle: 'Detail panel toggle',
-  // expandDetailPanel: 'Expand',
-  // collapseDetailPanel: 'Collapse',
-
+  detailPanelToggle: 'Εναλλαγή πίνακα λεπτομερειών',
+  expandDetailPanel: 'Ανάπτυξη',
+  collapseDetailPanel: 'Σύμπτυξη',
   // Row reordering text
-  // rowReorderingHeaderName: 'Row reordering',
-
+  rowReorderingHeaderName: 'Αναδιάταξη γραμμών',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
+  aggregationMenuItemHeader: 'Συσσωμάτωση',
+  aggregationFunctionLabelSum: 'άθροισμα',
+  aggregationFunctionLabelAvg: 'μέση τιμή',
+  aggregationFunctionLabelMin: 'ελάχιστο',
+  aggregationFunctionLabelMax: 'μέγιστο',
+  aggregationFunctionLabelSize: 'μέγεθος'
 };
-
-export const elGR = getGridLocalization(elGRGrid);
+export const elGR = getGridLocalization(elGRGrid, elGRCore);

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,
@@ -394,4 +346,5 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   tabbableCell: PropTypes.string,
   visibleColumns: PropTypes.arrayOf(PropTypes.object)
 } : void 0;
-export { GridRow };
+const MemoizedGridRow = fastMemo(GridRow);
+export { MemoizedGridRow as GridRow };