@mui/x-data-grid 7.0.0-alpha.9 → 7.0.0-beta.1

package/legacy/components/panel/GridColumnsPanel.js

@@ -1,216 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["sort", "searchPredicate", "autoFocusSearchField", "disableHideAllButton", "disableShowAllButton", "getTogglableColumns"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import IconButton from '@mui/material/IconButton';
-import { switchClasses } from '@mui/material/Switch';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import { styled } from '@mui/material/styles';
-import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector } from '../../hooks/features/columns/gridColumnsSelector';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { GridPanelContent } from './GridPanelContent';
-import { GridPanelFooter } from './GridPanelFooter';
-import { GridPanelHeader } from './GridPanelHeader';
 import { GridPanelWrapper } from './GridPanelWrapper';
-import { GRID_EXPERIMENTAL_ENABLED } from '../../constants/envConstants';
+import { GridColumnsManagement } from '../columnsManagement';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var classes = ownerState.classes;
-  var slots = {
-    root: ['columnsPanel'],
-    columnsPanelRow: ['columnsPanelRow']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-var GridColumnsPanelRoot = styled('div', {
-  name: 'MuiDataGrid',
-  slot: 'ColumnsPanel',
-  overridesResolver: function overridesResolver(props, styles) {
-    return styles.columnsPanel;
-  }
-})({
-  padding: '8px 0px 8px 8px'
-});
-var GridColumnsPanelRowRoot = styled('div', {
-  name: 'MuiDataGrid',
-  slot: 'ColumnsPanelRow',
-  overridesResolver: function overridesResolver(props, styles) {
-    return styles.columnsPanelRow;
-  }
-})(function (_ref) {
-  var theme = _ref.theme;
-  return _defineProperty({
-    display: 'flex',
-    justifyContent: 'space-between',
-    padding: '1px 8px 1px 7px'
-  }, "& .".concat(switchClasses.root), {
-    marginRight: theme.spacing(0.5)
-  });
-});
-var GridIconButtonRoot = styled(IconButton)({
-  justifyContent: 'flex-end'
-});
-var collator = new Intl.Collator();
-var defaultSearchPredicate = function defaultSearchPredicate(column, searchValue) {
-  return (column.headerName || column.field).toLowerCase().indexOf(searchValue) > -1;
-};
 function GridColumnsPanel(props) {
-  var _rootProps$slotProps, _rootProps$slotProps3, _rootProps$slotProps4;
-  var apiRef = useGridApiContext();
-  var searchInputRef = React.useRef(null);
-  var columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
-  var columnVisibilityModel = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
+  var _rootProps$slotProps;
   var rootProps = useGridRootProps();
-  var _React$useState = React.useState(''),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    searchValue = _React$useState2[0],
-    setSearchValue = _React$useState2[1];
-  var classes = useUtilityClasses(rootProps);
-  var sort = props.sort,
-    _props$searchPredicat = props.searchPredicate,
-    searchPredicate = _props$searchPredicat === void 0 ? defaultSearchPredicate : _props$searchPredicat,
-    _props$autoFocusSearc = props.autoFocusSearchField,
-    autoFocusSearchField = _props$autoFocusSearc === void 0 ? true : _props$autoFocusSearc,
-    _props$disableHideAll = props.disableHideAllButton,
-    disableHideAllButton = _props$disableHideAll === void 0 ? false : _props$disableHideAll,
-    _props$disableShowAll = props.disableShowAllButton,
-    disableShowAllButton = _props$disableShowAll === void 0 ? false : _props$disableShowAll,
-    getTogglableColumns = props.getTogglableColumns,
-    other = _objectWithoutProperties(props, _excluded);
-  var sortedColumns = React.useMemo(function () {
-    switch (sort) {
-      case 'asc':
-        return _toConsumableArray(columns).sort(function (a, b) {
-          return collator.compare(a.headerName || a.field, b.headerName || b.field);
-        });
-      case 'desc':
-        return _toConsumableArray(columns).sort(function (a, b) {
-          return -collator.compare(a.headerName || a.field, b.headerName || b.field);
-        });
-      default:
-        return columns;
-    }
-  }, [columns, sort]);
-  var toggleColumn = function toggleColumn(event) {
-    var _ref3 = event.target,
-      field = _ref3.name;
-    apiRef.current.setColumnVisibility(field, columnVisibilityModel[field] === false);
-  };
-  var toggleAllColumns = React.useCallback(function (isVisible) {
-    var currentModel = gridColumnVisibilityModelSelector(apiRef);
-    var newModel = _extends({}, currentModel);
-    var togglableColumns = getTogglableColumns ? getTogglableColumns(columns) : null;
-    columns.forEach(function (col) {
-      if (col.hideable && (togglableColumns == null || togglableColumns.includes(col.field))) {
-        if (isVisible) {
-          // delete the key from the model instead of setting it to `true`
-          delete newModel[col.field];
-        } else {
-          newModel[col.field] = false;
-        }
-      }
-    });
-    return apiRef.current.setColumnVisibilityModel(newModel);
-  }, [apiRef, columns, getTogglableColumns]);
-  var handleSearchValueChange = React.useCallback(function (event) {
-    setSearchValue(event.target.value);
-  }, []);
-  var currentColumns = React.useMemo(function () {
-    var togglableColumns = getTogglableColumns ? getTogglableColumns(sortedColumns) : null;
-    var togglableSortedColumns = togglableColumns ? sortedColumns.filter(function (_ref4) {
-      var field = _ref4.field;
-      return togglableColumns.includes(field);
-    }) : sortedColumns;
-    if (!searchValue) {
-      return togglableSortedColumns;
-    }
-    return togglableSortedColumns.filter(function (column) {
-      return searchPredicate(column, searchValue.toLowerCase());
-    });
-  }, [sortedColumns, searchValue, searchPredicate, getTogglableColumns]);
-  var firstSwitchRef = React.useRef(null);
-  React.useEffect(function () {
-    if (autoFocusSearchField) {
-      searchInputRef.current.focus();
-    } else if (firstSwitchRef.current && typeof firstSwitchRef.current.focus === 'function') {
-      firstSwitchRef.current.focus();
-    }
-  }, [autoFocusSearchField]);
-  var firstHideableColumnFound = false;
-  var isFirstHideableColumn = function isFirstHideableColumn(column) {
-    if (firstHideableColumnFound === false && column.hideable !== false) {
-      firstHideableColumnFound = true;
-      return true;
-    }
-    return false;
-  };
-  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, other, {
-    children: [/*#__PURE__*/_jsx(GridPanelHeader, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
-        label: apiRef.current.getLocaleText('columnsPanelTextFieldLabel'),
-        placeholder: apiRef.current.getLocaleText('columnsPanelTextFieldPlaceholder'),
-        inputRef: searchInputRef,
-        value: searchValue,
-        onChange: handleSearchValueChange,
-        variant: "standard",
-        fullWidth: true
-      }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTextField))
-    }), /*#__PURE__*/_jsx(GridPanelContent, {
-      children: /*#__PURE__*/_jsx(GridColumnsPanelRoot, {
-        className: classes.root,
-        ownerState: rootProps,
-        children: currentColumns.map(function (column) {
-          var _rootProps$slotProps2;
-          return /*#__PURE__*/_jsxs(GridColumnsPanelRowRoot, {
-            className: classes.columnsPanelRow,
-            ownerState: rootProps,
-            children: [/*#__PURE__*/_jsx(FormControlLabel, {
-              control: /*#__PURE__*/_jsx(rootProps.slots.baseSwitch, _extends({
-                disabled: column.hideable === false,
-                checked: columnVisibilityModel[column.field] !== false,
-                onClick: toggleColumn,
-                name: column.field,
-                size: "small",
-                inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined
-              }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSwitch)),
-              label: column.headerName || column.field
-            }), !rootProps.disableColumnReorder && GRID_EXPERIMENTAL_ENABLED && /*#__PURE__*/_jsx(GridIconButtonRoot, {
-              draggable: true,
-              "aria-label": apiRef.current.getLocaleText('columnsPanelDragIconLabel'),
-              title: apiRef.current.getLocaleText('columnsPanelDragIconLabel'),
-              size: "small",
-              disabled: true,
-              children: /*#__PURE__*/_jsx(rootProps.slots.columnReorderIcon, {})
-            })]
-          }, column.field);
-        })
-      })
-    }), disableShowAllButton && disableHideAllButton ? null : /*#__PURE__*/_jsxs(GridPanelFooter, {
-      children: [!disableHideAllButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-        onClick: function onClick() {
-          return toggleAllColumns(false);
-        }
-      }, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseButton, {
-        disabled: disableHideAllButton,
-        children: apiRef.current.getLocaleText('columnsPanelHideAllButton')
-      })) : /*#__PURE__*/_jsx("span", {}), !disableShowAllButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-        onClick: function onClick() {
-          return toggleAllColumns(true);
-        }
-      }, (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseButton, {
-        disabled: disableShowAllButton,
-        children: apiRef.current.getLocaleText('columnsPanelShowAllButton')
-      })) : null]
-    })]
+  return /*#__PURE__*/_jsx(GridPanelWrapper, _extends({}, props, {
+    children: /*#__PURE__*/_jsx(GridColumnsManagement, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.columnsManagement))
   }));
 }
 process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
@@ -218,33 +17,6 @@ process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  /**
-   * If `true`, the column search field will be focused automatically.
-   * If `false`, the first column switch input will be focused automatically.
-   * This helps to avoid input keyboard panel to popup automatically on touch devices.
-   * @default true
-   */
-  autoFocusSearchField: PropTypes.bool,
-  /**
-   * If `true`, the `Hide all` button will not be displayed.
-   * @default false
-   */
-  disableHideAllButton: PropTypes.bool,
-  /**
-   * If `true`, the `Show all` button will be disabled
-   * @default false
-   */
-  disableShowAllButton: PropTypes.bool,
-  /**
-   * Returns the list of togglable columns.
-   * If used, only those columns will be displayed in the panel
-   * which are passed as the return value of the function.
-   * @param {GridColDef[]} columns The `ColDef` list of all columns.
-   * @returns {GridColDef['field'][]} The list of togglable columns' field names.
-   */
-  getTogglableColumns: PropTypes.func,
-  searchPredicate: PropTypes.func,
-  slotProps: PropTypes.object,
-  sort: PropTypes.oneOf(['asc', 'desc'])
+  slotProps: PropTypes.object
 } : void 0;
 export { GridColumnsPanel };

package/legacy/constants/defaultGridSlotsComponents.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount } from '../components';
+import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount, GridColumnsManagement } from '../components';
 import { GridCell } from '../components/cell/GridCell';
 import { GridColumnHeaders } from '../components/GridColumnHeaders';
 import { GridColumnMenu } from '../components/menu/columnMenu/GridColumnMenu';
@@ -27,6 +27,7 @@ export var DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, materialSlots, {
   pagination: GridPagination,
   filterPanel: GridFilterPanel,
   columnsPanel: GridColumnsPanel,
+  columnsManagement: GridColumnsManagement,
   panel: GridPanel,
   row: GridRow
 });

package/legacy/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export var gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellContent', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export var gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellContent', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/legacy/constants/localeTextConstants.js

@@ -29,12 +29,10 @@ export var GRID_DEFAULT_LOCALE_TEXT = {
   toolbarExportCSV: 'Download as CSV',
   toolbarExportPrint: 'Print',
   toolbarExportExcel: 'Download as Excel',
-  // Columns panel text
-  columnsPanelTextFieldLabel: 'Find column',
-  columnsPanelTextFieldPlaceholder: 'Column title',
-  columnsPanelDragIconLabel: 'Reorder column',
-  columnsPanelShowAllButton: 'Show all',
-  columnsPanelHideAllButton: 'Hide all',
+  // Columns management text
+  columnsManagementSearchTitle: 'Search',
+  columnsManagementNoColumns: 'No columns',
+  columnsManagementShowHideAllText: 'Show/Hide All',
   // Filter panel text
   filterPanelAddFilter: 'Add filter',
   filterPanelRemoveAll: 'Remove all',

package/legacy/hooks/core/useGridApiInitialization.js

@@ -71,6 +71,7 @@ function createPublicAPI(privateApiRef) {
   return publicApi;
 }
 export function useGridApiInitialization(inputApiRef, props) {
+  var _inputApiRef$current;
   var publicApiRef = React.useRef();
   var privateApiRef = React.useRef();
   if (!privateApiRef.current) {
@@ -107,6 +108,9 @@ export function useGridApiInitialization(inputApiRef, props) {
     subscribeEvent: subscribeEvent,
     publishEvent: publishEvent
   }, 'public');
+  if (inputApiRef && !((_inputApiRef$current = inputApiRef.current) != null && _inputApiRef$current.state)) {
+    inputApiRef.current = publicApiRef.current;
+  }
   React.useImperativeHandle(inputApiRef, function () {
     return publicApiRef.current;
   }, [publicApiRef]);

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

@@ -57,7 +57,9 @@ function calculateCellColSpan(params) {
     columns = params.columns;
   var columnsLength = columns.length;
   var column = columns[columnIndex];
-  var colSpan = typeof column.colSpan === 'function' ? column.colSpan(apiRef.current.getCellParams(rowId, column.field)) : column.colSpan;
+  var row = apiRef.current.getRow(rowId);
+  var value = apiRef.current.getRowValue(row, column);
+  var colSpan = typeof column.colSpan === 'function' ? column.colSpan(value, row, column, apiRef) : column.colSpan;
   if (!colSpan || colSpan === 1) {
     setCellColSpanInfo(lookup, rowId, columnIndex, {
       spannedByColSpan: false,

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

@@ -340,7 +340,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
             row = apiRef.current.getRow(id);
             parsedValue = value;
             if (column.valueParser && !skipValueParser) {
-              parsedValue = column.valueParser(value, apiRef.current.getCellParams(id, field));
+              parsedValue = column.valueParser(value, row, column, apiRef);
             }
             editingState = gridEditRowsStateSelector(apiRef.current.state);
             newProps = _extends({}, editingState[id][field], {
@@ -401,10 +401,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
       return apiRef.current.getRow(id);
     }
     var value = editingState[id][field].value;
-    return column.valueSetter ? column.valueSetter({
-      value: value,
-      row: row
-    }) : _extends({}, row, _defineProperty({}, field, value));
+    return column.valueSetter ? column.valueSetter(value, row, column, apiRef) : _extends({}, row, _defineProperty({}, field, value));
   }, [apiRef]);
   var editingApi = {
     getCellMode: getCellMode,

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

@@ -406,7 +406,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     var row = apiRef.current.getRow(id);
     var parsedValue = value;
     if (column.valueParser && !skipValueParser) {
-      parsedValue = column.valueParser(value, apiRef.current.getCellParams(id, field));
+      parsedValue = column.valueParser(value, row, column, apiRef);
     }
     var editingState = gridEditRowsStateSelector(apiRef.current.state);
     var newProps = _extends({}, editingState[id][field], {
@@ -514,10 +514,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
         fieldProps = _ref4[1];
       var column = apiRef.current.getColumn(field);
       if (column.valueSetter) {
-        rowUpdate = column.valueSetter({
-          value: fieldProps.value,
-          row: rowUpdate
-        });
+        rowUpdate = column.valueSetter(fieldProps.value, rowUpdate, column, apiRef);
       } else {
         rowUpdate[field] = fieldProps.value;
       }

package/legacy/hooks/features/filter/gridFilterUtils.js

@@ -100,8 +100,8 @@ var getFilterCallbackFromItem = function getFilterCallbackFromItem(filterItem, a
     var _filterItem$value;
     var parser = column.valueParser;
     parsedValue = Array.isArray(filterItem.value) ? (_filterItem$value = filterItem.value) == null ? void 0 : _filterItem$value.map(function (x) {
-      return parser(x);
-    }) : parser(filterItem.value);
+      return parser(x, undefined, column, apiRef);
+    }) : parser(filterItem.value, undefined, column, apiRef);
   } else {
     parsedValue = filterItem.value;
   }

package/legacy/hooks/features/rows/gridRowsUtils.js

@@ -135,7 +135,10 @@ export var getTreeNodeDescendants = function getTreeNodeDescendants(tree, parent
     if (!skipAutoGeneratedRows || !isAutoGeneratedRow(tree[child])) {
       validDescendants.push(child);
     }
-    validDescendants.push.apply(validDescendants, _toConsumableArray(getTreeNodeDescendants(tree, child, skipAutoGeneratedRows)));
+    var childDescendants = getTreeNodeDescendants(tree, child, skipAutoGeneratedRows);
+    for (var j = 0; j < childDescendants.length; j += 1) {
+      validDescendants.push(childDescendants[j]);
+    }
   }
   if (!skipAutoGeneratedRows && node.footerId != null) {
     validDescendants.push(node.footerId);

package/legacy/hooks/features/rows/useGridParamsApi.js

@@ -8,7 +8,6 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import * as React from 'react';
 import { getGridCellElement, getGridColumnHeaderElement, getGridRowElement } from '../../../utils/domUtils';
-import { GRID_ID_AUTOGENERATED } from './gridRowsUtils';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
 export var MissingRowIdError = /*#__PURE__*/function (_Error) {
@@ -28,8 +27,7 @@ export var MissingRowIdError = /*#__PURE__*/function (_Error) {
  * TODO: Impossible priority - useGridEditing also needs to be after useGridParamsApi
  * TODO: Impossible priority - useGridFocus also needs to be after useGridParamsApi
  */
-export function useGridParamsApi(apiRef, props) {
-  var getRowId = props.getRowId;
+export function useGridParamsApi(apiRef) {
   var getColumnHeaderParams = React.useCallback(function (field) {
     return {
       field: field,
@@ -48,28 +46,6 @@ export function useGridParamsApi(apiRef, props) {
     };
     return params;
   }, [apiRef]);
-  var getBaseCellParams = React.useCallback(function (id, field) {
-    var row = apiRef.current.getRow(id);
-    var rowNode = apiRef.current.getRowNode(id);
-    if (!row || !rowNode) {
-      throw new MissingRowIdError("No row with id #".concat(id, " found"));
-    }
-    var cellFocus = gridFocusCellSelector(apiRef);
-    var cellTabIndex = gridTabIndexCellSelector(apiRef);
-    var params = {
-      id: id,
-      field: field,
-      row: row,
-      rowNode: rowNode,
-      value: row[field],
-      colDef: apiRef.current.getColumn(field),
-      cellMode: apiRef.current.getCellMode(id, field),
-      api: apiRef.current,
-      hasFocus: cellFocus !== null && cellFocus.field === field && cellFocus.id === id,
-      tabIndex: cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === id ? 0 : -1
-    };
-    return params;
-  }, [apiRef]);
   var getCellParams = React.useCallback(function (id, field) {
     var colDef = apiRef.current.getColumn(field);
     var value = apiRef.current.getCellValue(id, field);
@@ -94,12 +70,7 @@ export function useGridParamsApi(apiRef, props) {
       isEditable: false
     };
     if (colDef && colDef.valueFormatter) {
-      params.formattedValue = colDef.valueFormatter({
-        id: id,
-        field: params.field,
-        value: params.value,
-        api: apiRef.current
-      });
+      params.formattedValue = colDef.valueFormatter(value, row, colDef, apiRef);
     }
     params.isEditable = colDef && apiRef.current.isCellEditable(params);
     return params;
@@ -113,32 +84,28 @@ export function useGridParamsApi(apiRef, props) {
       }
       return rowModel[field];
     }
-    return colDef.valueGetter(getBaseCellParams(id, field));
-  }, [apiRef, getBaseCellParams]);
+    var row = apiRef.current.getRow(id);
+    if (!row) {
+      throw new MissingRowIdError("No row with id #".concat(id, " found"));
+    }
+    var value = row[colDef.field];
+    return colDef.valueGetter(value, row, colDef, apiRef);
+  }, [apiRef]);
   var getRowValue = React.useCallback(function (row, colDef) {
-    var _getRowId;
-    var id = GRID_ID_AUTOGENERATED in row ? row[GRID_ID_AUTOGENERATED] : (_getRowId = getRowId == null ? void 0 : getRowId(row)) != null ? _getRowId : row.id;
     var field = colDef.field;
     if (!colDef || !colDef.valueGetter) {
       return row[field];
     }
-    return colDef.valueGetter(getBaseCellParams(id, field));
-  }, [getBaseCellParams, getRowId]);
+    var value = row[colDef.field];
+    return colDef.valueGetter(value, row, colDef, apiRef);
+  }, [apiRef]);
   var getRowFormattedValue = React.useCallback(function (row, colDef) {
-    var _ref;
     var value = getRowValue(row, colDef);
     if (!colDef || !colDef.valueFormatter) {
       return value;
     }
-    var id = (_ref = getRowId ? getRowId(row) : row.id) != null ? _ref : row[GRID_ID_AUTOGENERATED];
-    var field = colDef.field;
-    return colDef.valueFormatter({
-      id: id,
-      field: field,
-      value: value,
-      api: apiRef.current
-    });
-  }, [apiRef, getRowId, getRowValue]);
+    return colDef.valueFormatter(value, row, colDef, apiRef);
+  }, [apiRef, getRowValue]);
   var getColumnHeaderElement = React.useCallback(function (field) {
     if (!apiRef.current.rootElementRef.current) {
       return null;

package/legacy/index.js

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

package/legacy/locales/arSD.js

@@ -31,12 +31,11 @@ var arSDGrid = {
   toolbarExportCSV: 'تنزيل كملف CSV',
   toolbarExportPrint: 'طباعة',
   toolbarExportExcel: 'تحميل كملف الإكسل',
-  // Columns panel text
-  columnsPanelTextFieldLabel: 'البحث عن العمود',
-  columnsPanelTextFieldPlaceholder: 'عنوان العمود',
-  columnsPanelDragIconLabel: 'إعادة ترتيب العمود',
-  columnsPanelShowAllButton: 'إظهار الكل',
-  columnsPanelHideAllButton: 'إخفاء الكل',
+  // Columns management text
+  // columnsManagementSearchTitle: 'Search',
+  // columnsManagementNoColumns: 'No columns',
+  // columnsManagementShowHideAllText: 'Show/Hide All',
+
   // Filter panel text
   filterPanelAddFilter: 'إضافة مرشِح',
   filterPanelRemoveAll: 'حذف الكل',

package/legacy/locales/beBY.js

@@ -45,12 +45,11 @@ var beBYGrid = {
   toolbarExportCSV: 'Спампаваць у фармаце CSV',
   toolbarExportPrint: 'Друк',
   toolbarExportExcel: 'Спампаваць у фармаце Excel',
-  // Columns panel text
-  columnsPanelTextFieldLabel: 'Знайсці слупок',
-  columnsPanelTextFieldPlaceholder: 'Загаловак слупка',
-  columnsPanelDragIconLabel: 'Змяніць чарговасць слупкоў',
-  columnsPanelShowAllButton: 'Паказаць усе',
-  columnsPanelHideAllButton: 'Схаваць усе',
+  // Columns management text
+  // columnsManagementSearchTitle: 'Search',
+  // columnsManagementNoColumns: 'No columns',
+  // columnsManagementShowHideAllText: 'Show/Hide All',
+
   // Filter panel text
   filterPanelAddFilter: 'Дадаць фільтр',
   // filterPanelRemoveAll: 'Remove all',

package/legacy/locales/bgBG.js

@@ -31,12 +31,11 @@ var bgBGGrid = {
   toolbarExportCSV: 'Изтегли като CSV',
   toolbarExportPrint: 'Принтиране',
   toolbarExportExcel: 'Изтегли като Excel',
-  // Columns panel text
-  columnsPanelTextFieldLabel: 'Намери колона',
-  columnsPanelTextFieldPlaceholder: 'Заглавие на колона',
-  columnsPanelDragIconLabel: 'Пренареди на колона',
-  columnsPanelShowAllButton: 'Покажи Всички',
-  columnsPanelHideAllButton: 'Скрий Всички',
+  // Columns management text
+  // columnsManagementSearchTitle: 'Search',
+  // columnsManagementNoColumns: 'No columns',
+  // columnsManagementShowHideAllText: 'Show/Hide All',
+
   // Filter panel text
   filterPanelAddFilter: 'Добави Филтър',
   filterPanelRemoveAll: 'Премахни всички',

package/legacy/locales/csCZ.js

@@ -37,12 +37,11 @@ var csCZGrid = {
   toolbarExportCSV: 'Stáhnout jako CSV',
   toolbarExportPrint: 'Vytisknout',
   toolbarExportExcel: 'Stáhnout jako Excel',
-  // Columns panel text
-  columnsPanelTextFieldLabel: 'Najít sloupec',
-  columnsPanelTextFieldPlaceholder: 'Název sloupce',
-  columnsPanelDragIconLabel: 'Uspořádat sloupce',
-  columnsPanelShowAllButton: 'Zobrazit vše',
-  columnsPanelHideAllButton: 'Skrýt vše',
+  // Columns management text
+  // columnsManagementSearchTitle: 'Search',
+  // columnsManagementNoColumns: 'No columns',
+  // columnsManagementShowHideAllText: 'Show/Hide All',
+
   // Filter panel text
   filterPanelAddFilter: 'Přidat filtr',
   filterPanelRemoveAll: 'Odstranit vše',

package/legacy/locales/daDK.js

@@ -31,12 +31,11 @@ var daDKGrid = {
   toolbarExportCSV: 'Download som CSV',
   toolbarExportPrint: 'Print',
   toolbarExportExcel: 'Download som Excel',
-  // Columns panel text
-  columnsPanelTextFieldLabel: 'Find kolonne',
-  columnsPanelTextFieldPlaceholder: 'Kolonne titel',
-  columnsPanelDragIconLabel: 'Reorder kolonne',
-  columnsPanelShowAllButton: 'Vis alle',
-  columnsPanelHideAllButton: 'Skjul alle',
+  // Columns management text
+  // columnsManagementSearchTitle: 'Search',
+  // columnsManagementNoColumns: 'No columns',
+  // columnsManagementShowHideAllText: 'Show/Hide All',
+
   // Filter panel text
   filterPanelAddFilter: 'Tilføj filter',
   filterPanelRemoveAll: 'Fjern alle',

package/legacy/locales/deDE.js

@@ -31,12 +31,11 @@ var deDEGrid = {
   toolbarExportCSV: 'Download als CSV',
   toolbarExportPrint: 'Drucken',
   toolbarExportExcel: 'Download als Excel',
-  // Columns panel text
-  columnsPanelTextFieldLabel: 'Finde Spalte',
-  columnsPanelTextFieldPlaceholder: 'Spaltenüberschrift',
-  columnsPanelDragIconLabel: 'Spalte umsortieren',
-  columnsPanelShowAllButton: 'Zeige alle',
-  columnsPanelHideAllButton: 'Verberge alle',
+  // Columns management text
+  // columnsManagementSearchTitle: 'Search',
+  // columnsManagementNoColumns: 'No columns',
+  // columnsManagementShowHideAllText: 'Show/Hide All',
+
   // Filter panel text
   filterPanelAddFilter: 'Filter hinzufügen',
   filterPanelRemoveAll: 'Alle entfernen',