@mui/x-data-grid 6.3.1 → 6.4.0

package/modern/joy/joySlots.js

@@ -18,7 +18,13 @@ import JoyIconButton from '@mui/joy/IconButton';
 import JoySwitch from '@mui/joy/Switch';
 import JoySelect from '@mui/joy/Select';
 import JoyOption from '@mui/joy/Option';
+import JoyBox from '@mui/joy/Box';
+import JoyTypography from '@mui/joy/Typography';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import joyIconSlots, { GridKeyboardArrowRight, GridKeyboardArrowLeft } from './icons';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { gridFilteredTopLevelRowCountSelector, gridPaginationModelSelector } from '../hooks';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function convertColor(color) {
@@ -261,7 +267,107 @@ const InputLabel = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
     sx: sx
   }));
 });
-const joySlots = {
+function labelDisplayedRows({
+  from,
+  to,
+  count
+}) {
+  return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
+}
+const getLabelDisplayedRowsTo = ({
+  page,
+  pageSize,
+  rowCount
+}) => {
+  if (rowCount === -1) {
+    return (page + 1) * pageSize;
+  }
+  return pageSize === -1 ? rowCount : Math.min(rowCount, (page + 1) * pageSize);
+};
+const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const paginationModel = gridPaginationModelSelector(apiRef);
+  const visibleTopLevelRowCount = gridFilteredTopLevelRowCountSelector(apiRef);
+  const rowCount = React.useMemo(() => rootProps.rowCount ?? visibleTopLevelRowCount ?? 0, [rootProps.rowCount, visibleTopLevelRowCount]);
+  const lastPage = React.useMemo(() => Math.floor(rowCount / (paginationModel.pageSize || 1)), [rowCount, paginationModel.pageSize]);
+  const handlePageChange = React.useCallback(page => {
+    apiRef.current.setPage(page);
+  }, [apiRef]);
+  const page = paginationModel.page <= lastPage ? paginationModel.page : lastPage;
+  const pageSize = paginationModel.pageSize;
+  const pageSizeOptions = rootProps.pageSizeOptions?.includes(pageSize) ? rootProps.pageSizeOptions : [];
+  const handleChangeRowsPerPage = (event, newValue) => {
+    const newPageSize = Number(newValue);
+    apiRef.current.setPageSize(newPageSize);
+  };
+  return /*#__PURE__*/_jsxs(JoyBox, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 2,
+      justifyContent: 'flex-end',
+      px: 2
+    },
+    ref: ref,
+    children: [/*#__PURE__*/_jsxs(JoyFormControl, {
+      orientation: "horizontal",
+      size: "sm",
+      children: [/*#__PURE__*/_jsx(JoyFormLabel, {
+        children: "Rows per page:"
+      }), /*#__PURE__*/_jsx(JoySelect, {
+        onChange: handleChangeRowsPerPage,
+        value: pageSize,
+        children: pageSizeOptions.map(option => {
+          return /*#__PURE__*/_jsx(Option, {
+            value: option,
+            children: option
+          }, option);
+        })
+      })]
+    }), /*#__PURE__*/_jsx(JoyTypography, {
+      textAlign: "center",
+      fontSize: "xs",
+      fontWeight: "md",
+      children: labelDisplayedRows({
+        from: rowCount === 0 ? 0 : page * pageSize + 1,
+        to: getLabelDisplayedRowsTo({
+          page,
+          pageSize,
+          rowCount
+        }),
+        count: rowCount === -1 ? -1 : rowCount
+      })
+    }), /*#__PURE__*/_jsxs(JoyBox, {
+      sx: {
+        display: 'flex',
+        gap: 0.5
+      },
+      children: [/*#__PURE__*/_jsx(JoyIconButton, {
+        size: "sm",
+        color: "neutral",
+        variant: "outlined",
+        disabled: page === 0,
+        onClick: () => handlePageChange(page - 1),
+        sx: {
+          bgcolor: 'background.surface'
+        },
+        children: /*#__PURE__*/_jsx(GridKeyboardArrowLeft, {})
+      }), /*#__PURE__*/_jsx(JoyIconButton, {
+        size: "sm",
+        color: "neutral",
+        variant: "outlined",
+        disabled: rowCount !== -1 ? page >= Math.ceil(rowCount / pageSize) - 1 : false,
+        onClick: () => handlePageChange(page + 1),
+        sx: {
+          bgcolor: 'background.surface'
+        },
+        children: /*#__PURE__*/_jsx(GridKeyboardArrowRight, {})
+      })]
+    })]
+  });
+});
+const joySlots = _extends({}, joyIconSlots, {
   baseCheckbox: Checkbox,
   baseTextField: TextField,
   baseButton: Button,
@@ -270,9 +376,9 @@ const joySlots = {
   baseSelect: Select,
   baseSelectOption: Option,
   baseInputLabel: InputLabel,
-  baseFormControl: JoyFormControl
+  baseFormControl: JoyFormControl,
   // BaseTooltip: MUITooltip,
   // BasePopper: MUIPopper,
-};
-
+  pagination: Pagination
+});
 export default joySlots;

package/modern/locales/deDE.js

@@ -37,7 +37,7 @@ const deDEGrid = {
   columnsPanelHideAllButton: 'Verberge alle',
   // Filter panel text
   filterPanelAddFilter: 'Filter hinzufügen',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Alle entfernen',
   filterPanelDeleteIconLabel: 'Löschen',
   filterPanelLogicOperator: 'Logische Operatoren',
   filterPanelOperator: 'Operatoren',
@@ -67,7 +67,7 @@ const deDEGrid = {
   // Column menu text
   columnMenuLabel: 'Menü',
   columnMenuShowColumns: 'Zeige alle Spalten',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Spalten verwalten',
   columnMenuFilter: 'Filter',
   columnMenuHideColumn: 'Verbergen',
   columnMenuUnsort: 'Sortierung deaktivieren',

package/modern/locales/frFR.js

@@ -7,7 +7,7 @@ const frFRGrid = {
   // Density selector toolbar button text
   toolbarDensity: 'Densité',
   toolbarDensityLabel: 'Densité',
-  toolbarDensityCompact: 'Compact',
+  toolbarDensityCompact: 'Compacte',
   toolbarDensityStandard: 'Standard',
   toolbarDensityComfortable: 'Confortable',
   // Columns selector toolbar button text
@@ -20,7 +20,7 @@ const frFRGrid = {
   toolbarFiltersTooltipShow: 'Afficher les filtres',
   toolbarFiltersTooltipActive: count => count > 1 ? `${count} filtres actifs` : `${count} filtre actif`,
   // Quick filter toolbar field
-  toolbarQuickFilterPlaceholder: 'Recherche…',
+  toolbarQuickFilterPlaceholder: 'Rechercher…',
   toolbarQuickFilterLabel: 'Recherche',
   toolbarQuickFilterDeleteIconLabel: 'Supprimer',
   // Export selector toolbar button text
@@ -30,7 +30,7 @@ const frFRGrid = {
   toolbarExportPrint: 'Imprimer',
   toolbarExportExcel: 'Télécharger pour Excel',
   // Columns panel text
-  columnsPanelTextFieldLabel: 'Chercher colonne',
+  columnsPanelTextFieldLabel: 'Chercher une colonne',
   columnsPanelTextFieldPlaceholder: 'Titre de la colonne',
   columnsPanelDragIconLabel: 'Réorganiser la colonne',
   columnsPanelShowAllButton: 'Tout afficher',
@@ -43,12 +43,12 @@ const frFRGrid = {
   filterPanelOperator: 'Opérateur',
   filterPanelOperatorAnd: 'Et',
   filterPanelOperatorOr: 'Ou',
-  filterPanelColumns: 'Colonnes',
+  filterPanelColumns: 'Colonne',
   filterPanelInputLabel: 'Valeur',
   filterPanelInputPlaceholder: 'Filtrer la valeur',
   // Filter operators text
   filterOperatorContains: 'contient',
-  filterOperatorEquals: 'égal à',
+  filterOperatorEquals: 'est égal à',
   filterOperatorStartsWith: 'commence par',
   filterOperatorEndsWith: 'se termine par',
   filterOperatorIs: 'est',
@@ -80,7 +80,7 @@ const frFRGrid = {
   // Rows selected footer text
   footerRowSelected: count => count > 1 ? `${count.toLocaleString()} lignes sélectionnées` : `${count.toLocaleString()} ligne sélectionnée`,
   // Total row amount footer text
-  footerTotalRows: 'Lignes totales :',
+  footerTotalRows: 'Total de lignes :',
   // Total visible row amount footer text
   footerTotalVisibleRows: (visibleCount, totalCount) => `${visibleCount.toLocaleString()} sur ${totalCount.toLocaleString()}`,
   // Checkbox selection text

package/modern/locales/ptBR.js

@@ -37,7 +37,7 @@ const ptBRGrid = {
   columnsPanelHideAllButton: 'Ocultar todas',
   // Filter panel text
   filterPanelAddFilter: 'Adicionar filtro',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Remover todos',
   filterPanelDeleteIconLabel: 'Excluir',
   filterPanelLogicOperator: 'Operador lógico',
   filterPanelOperator: 'Operador',

package/modern/locales/ukUA.js

@@ -51,7 +51,7 @@ const ukUAGrid = {
   columnsPanelHideAllButton: 'Приховати всі',
   // Filter panel text
   filterPanelAddFilter: 'Додати фільтр',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Видалити всі',
   filterPanelDeleteIconLabel: 'Видалити',
   filterPanelLogicOperator: 'Логічна функція',
   filterPanelOperator: 'Оператори',
@@ -81,7 +81,7 @@ const ukUAGrid = {
   // Column menu text
   columnMenuLabel: 'Меню',
   columnMenuShowColumns: 'Показати стовпці',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Керування стовпцями',
   columnMenuFilter: 'Фільтр',
   columnMenuHideColumn: 'Приховати',
   columnMenuUnsort: 'Скасувати сортування',
@@ -135,12 +135,11 @@ const ukUAGrid = {
   // Row reordering text
   rowReorderingHeaderName: 'Порядок рядків',
   // Aggregation
-  aggregationMenuItemHeader: 'Агрегація'
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
+  aggregationMenuItemHeader: 'Агрегація',
+  aggregationFunctionLabelSum: 'сума',
+  aggregationFunctionLabelAvg: 'сер',
+  aggregationFunctionLabelMin: 'мін',
+  aggregationFunctionLabelMax: 'макс',
+  aggregationFunctionLabelSize: 'кількість'
 };
-
 export const ukUA = getGridLocalization(ukUAGrid, ukUACore);

package/modern/material/index.js

@@ -9,6 +9,7 @@ import MUIIconButton from '@mui/material/IconButton';
 import MUITooltip from '@mui/material/Tooltip';
 import MUIPopper from '@mui/material/Popper';
 import MUIInputLabel from '@mui/material/InputLabel';
+import MUIChip from '@mui/material/Chip';
 import { GridColumnUnsortedIcon } from './icons/GridColumnUnsortedIcon';
 import { GridAddIcon, GridArrowDownwardIcon, GridArrowUpwardIcon, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridDragIcon, GridExpandMoreIcon, GridFilterAltIcon, GridFilterListIcon, GridKeyboardArrowRight, GridMoreVertIcon, GridRemoveIcon, GridSaveAltIcon, GridSearchIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridVisibilityOffIcon, GridViewColumnIcon, GridClearIcon, GridLoadIcon, GridDeleteForeverIcon } from './icons';
 import MUISelectOption from './components/MUISelectOption';
@@ -60,6 +61,7 @@ const materialSlots = _extends({}, iconSlots, {
   BaseTooltip: MUITooltip,
   BasePopper: MUIPopper,
   BaseInputLabel: MUIInputLabel,
-  BaseSelectOption: MUISelectOption
+  BaseSelectOption: MUISelectOption,
+  BaseChip: MUIChip
 });
 export default materialSlots;

package/modern/models/api/index.js

@@ -11,7 +11,6 @@ export * from './gridColumnMenuApi';
 export * from './gridPreferencesPanelApi';
 export * from './gridPrintExportApi';
 export * from './gridDisableVirtualizationApi';
-export * from './gridClipboardApi';
 export * from './gridCallbackDetails';
 export * from './gridScrollApi';
 export * from './gridVirtualScrollerApi';

package/modern/utils/domUtils.js

@@ -39,4 +39,16 @@ export function getGridCellElement(root, {
   const cellSelector = `.${gridClasses.cell}[data-field="${escapeOperandAttributeSelector(field)}"]`;
   const selector = `${rowSelector} ${cellSelector}`;
   return root.querySelector(selector);
-}
+}
+
+// https://www.abeautifulsite.net/posts/finding-the-active-element-in-a-shadow-root/
+export const getActiveElement = (root = document) => {
+  const activeEl = root.activeElement;
+  if (!activeEl) {
+    return null;
+  }
+  if (activeEl.shadowRoot) {
+    return getActiveElement(activeEl.shadowRoot);
+  }
+  return activeEl;
+};

package/node/DataGrid/DataGrid.js

@@ -77,6 +77,11 @@ DataGridRaw.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: _propTypes.default.object,
+  /**
+   * The character used to separate cell values when copying to the clipboard.
+   * @default '\t'
+   */
+  clipboardCopyCellDelimiter: _propTypes.default.string,
   /**
    * Number of extra columns to be rendered before/after the visible slice.
    * @default 3
@@ -335,6 +340,11 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onCellModesModelChange: _propTypes.default.func,
+  /**
+   * Callback called when the data is copied to the clipboard.
+   * @param {string} data The data copied to the clipboard.
+   */
+  onClipboardCopy: _propTypes.default.func,
   /**
    * Callback fired when a click event comes from a column header element.
    * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
@@ -620,5 +630,14 @@ DataGridRaw.propTypes = {
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  /**
+   * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard.
+   * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export.
+   * @default: false
+   */
+  unstable_ignoreValueFormatterDuringExport: _propTypes.default.oneOfType([_propTypes.default.shape({
+    clipboardExport: _propTypes.default.bool,
+    csvExport: _propTypes.default.bool
+  }), _propTypes.default.bool])
 };

package/node/DataGrid/useDataGridComponent.js

@@ -73,9 +73,9 @@ const useDataGridComponent = (inputApiRef, props) => {
   (0, _useGridRowsMeta.useGridRowsMeta)(privateApiRef, props);
   (0, _useGridScroll.useGridScroll)(privateApiRef, props);
   (0, _useGridColumnMenu.useGridColumnMenu)(privateApiRef);
-  (0, _useGridCsvExport.useGridCsvExport)(privateApiRef);
+  (0, _useGridCsvExport.useGridCsvExport)(privateApiRef, props);
   (0, _useGridPrintExport.useGridPrintExport)(privateApiRef, props);
-  (0, _useGridClipboard.useGridClipboard)(privateApiRef);
+  (0, _useGridClipboard.useGridClipboard)(privateApiRef, props);
   (0, _useGridDimensions.useGridDimensions)(privateApiRef, props);
   (0, _useGridEvents.useGridEvents)(privateApiRef, props);
   (0, _useGridStatePersistence.useGridStatePersistence)(privateApiRef);

package/node/DataGrid/useDataGridProps.js

@@ -75,7 +75,9 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = {
   disableColumnReorder: false,
   disableColumnResize: false,
   keepNonExistentRowsSelected: false,
-  keepColumnPositionIfDraggedOutside: false
+  keepColumnPositionIfDraggedOutside: false,
+  unstable_ignoreValueFormatterDuringExport: false,
+  clipboardCopyCellDelimiter: '\t'
 };
 exports.DATA_GRID_PROPS_DEFAULT_VALUES = DATA_GRID_PROPS_DEFAULT_VALUES;
 const defaultSlots = (0, _utils.uncapitalizeObjectKeys)(_defaultGridSlotsComponents.DATA_GRID_DEFAULT_SLOTS_COMPONENTS);

package/node/colDef/gridBooleanColDef.js

@@ -17,6 +17,22 @@ function gridBooleanFormatter({
 }) {
   return value ? api.getLocaleText('booleanCellTrueLabel') : api.getLocaleText('booleanCellFalseLabel');
 }
+const stringToBoolean = value => {
+  switch (value.toLowerCase().trim()) {
+    case 'true':
+    case 'yes':
+    case '1':
+      return true;
+    case 'false':
+    case 'no':
+    case '0':
+    case 'null':
+    case 'undefined':
+      return false;
+    default:
+      return undefined;
+  }
+};
 const GRID_BOOLEAN_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_STRING_COL_DEF, {
   type: 'boolean',
   align: 'center',
@@ -28,6 +44,8 @@ const GRID_BOOLEAN_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_S
   filterOperators: (0, _gridBooleanOperators.getGridBooleanOperators)(),
   getApplyQuickFilterFn: undefined,
   // @ts-ignore
-  aggregable: false
+  aggregable: false,
+  // @ts-ignore
+  pastedValueParser: value => stringToBoolean(value)
 });
 exports.GRID_BOOLEAN_COL_DEF = GRID_BOOLEAN_COL_DEF;

package/node/colDef/gridDateColDef.js

@@ -60,7 +60,9 @@ const GRID_DATE_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_STRI
   valueFormatter: gridDateFormatter,
   filterOperators: (0, _gridDateOperators.getGridDateOperators)(),
   renderEditCell: _GridEditDateCell.renderEditDateCell,
-  getApplyQuickFilterFn: undefined
+  getApplyQuickFilterFn: undefined,
+  // @ts-ignore
+  pastedValueParser: value => new Date(value)
 });
 exports.GRID_DATE_COL_DEF = GRID_DATE_COL_DEF;
 const GRID_DATETIME_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_STRING_COL_DEF, {
@@ -69,6 +71,8 @@ const GRID_DATETIME_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_
   valueFormatter: gridDateTimeFormatter,
   filterOperators: (0, _gridDateOperators.getGridDateOperators)(true),
   renderEditCell: _GridEditDateCell.renderEditDateCell,
-  getApplyQuickFilterFn: undefined
+  getApplyQuickFilterFn: undefined,
+  // @ts-ignore
+  pastedValueParser: value => new Date(value)
 });
 exports.GRID_DATETIME_COL_DEF = GRID_DATETIME_COL_DEF;

package/node/colDef/gridSingleSelectColDef.js

@@ -58,6 +58,26 @@ const GRID_SINGLE_SELECT_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.
     return valueOption ? colDef.getOptionLabel(valueOption) : '';
   },
   renderEditCell: _GridEditSingleSelectCell.renderEditSingleSelectCell,
-  filterOperators: (0, _gridSingleSelectOperators.getGridSingleSelectOperators)()
+  filterOperators: (0, _gridSingleSelectOperators.getGridSingleSelectOperators)(),
+  // @ts-ignore
+  pastedValueParser: (value, params) => {
+    const colDef = params.colDef;
+    const colDefValueOptions = colDef.valueOptions;
+    const valueOptions = typeof colDefValueOptions === 'function' ? colDefValueOptions({
+      field: colDef.field
+    }) : colDefValueOptions || [];
+    const getOptionValue = colDef.getOptionValue;
+    const valueOption = valueOptions.find(option => {
+      if (getOptionValue(option) === value) {
+        return true;
+      }
+      return false;
+    });
+    if (valueOption) {
+      return value;
+    }
+    // do not paste the value if it is not in the valueOptions
+    return undefined;
+  }
 });
 exports.GRID_SINGLE_SELECT_COL_DEF = GRID_SINGLE_SELECT_COL_DEF;

package/node/components/base/GridBody.js

@@ -97,7 +97,8 @@ function GridBody(props) {
   apiRef.current.register('private', {
     columnHeadersContainerElementRef: columnsContainerRef,
     columnHeadersElementRef: columnHeadersRef,
-    virtualScrollerRef
+    virtualScrollerRef,
+    mainElementRef: rootRef
   });
   const hasDimensions = !!apiRef.current.getRootDimensions();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridMainContainer.GridMainContainer, {

package/node/components/containers/GridRootStyles.js

@@ -156,6 +156,7 @@ const GridRootStyles = (0, _styles.styled)('div', {
     outline: 'none',
     height: '100%',
     display: 'flex',
+    overflow: 'hidden',
     flexDirection: 'column',
     overflowAnchor: 'none',
     // Keep the same scrolling position

package/node/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -10,7 +10,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Autocomplete = _interopRequireWildcard(require("@mui/material/Autocomplete"));
-var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
 var _utils = require("@mui/utils");
 var _filterPanelUtils = require("./filterPanelUtils");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
@@ -105,7 +104,7 @@ function GridFilterInputMultipleSingleSelect(props) {
     value: filteredValues,
     onChange: handleChange,
     getOptionLabel: getOptionLabel,
-    renderTags: (value, getTagProps) => value.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, (0, _extends2.default)({
+    renderTags: (value, getTagProps) => value.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseChip, (0, _extends2.default)({
       variant: "outlined",
       size: "small",
       label: getOptionLabel(option)

package/node/components/panel/filterPanel/GridFilterInputMultipleValue.js

@@ -10,7 +10,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete"));
-var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
 var _utils = require("@mui/utils");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -64,7 +63,7 @@ function GridFilterInputMultipleValue(props) {
     id: id,
     value: filterValueState,
     onChange: handleChange,
-    renderTags: (value, getTagProps) => value.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, (0, _extends2.default)({
+    renderTags: (value, getTagProps) => value.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseChip, (0, _extends2.default)({
       variant: "outlined",
       size: "small",
       label: option

package/node/hooks/features/clipboard/useGridClipboard.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridClipboard = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("../../utils");
+var _gridFocusStateSelector = require("../focus/gridFocusStateSelector");
+var _csvSerializer = require("../export/serializers/csvSerializer");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function writeToClipboardPolyfill(data) {
@@ -26,6 +28,15 @@ function writeToClipboardPolyfill(data) {
     document.body.removeChild(span);
   }
 }
+function copyToClipboard(data) {
+  if (navigator.clipboard) {
+    navigator.clipboard.writeText(data).catch(() => {
+      writeToClipboardPolyfill(data);
+    });
+  } else {
+    writeToClipboardPolyfill(data);
+  }
+}
 function hasNativeSelection(element) {
   // When getSelection is called on an <iframe> that is not displayed Firefox will return null.
   if (window.getSelection()?.toString()) {
@@ -45,24 +56,11 @@ function hasNativeSelection(element) {
  * @requires useGridCsvExport (method)
  * @requires useGridSelection (method)
  */
-const useGridClipboard = apiRef => {
-  const copySelectedRowsToClipboard = React.useCallback(() => {
-    if (apiRef.current.getSelectedRows().size === 0) {
-      return;
-    }
-    const data = apiRef.current.getDataAsCsv({
-      includeHeaders: false,
-      delimiter: '\t'
-    });
-    if (navigator.clipboard) {
-      navigator.clipboard.writeText(data).catch(() => {
-        writeToClipboardPolyfill(data);
-      });
-    } else {
-      writeToClipboardPolyfill(data);
-    }
-  }, [apiRef]);
-  const handleKeydown = React.useCallback(event => {
+const useGridClipboard = (apiRef, props) => {
+  const ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
+  const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.clipboardExport : ignoreValueFormatterProp) || false;
+  const clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
+  const handleCopy = React.useCallback(event => {
     const isModifierKeyPressed = event.ctrlKey || event.metaKey;
     // event.code === 'KeyC' is not enough as event.code assume a QWERTY keyboard layout which would
     // be wrong with a Dvorak keyboard (as if pressing J).
@@ -74,12 +72,31 @@ const useGridClipboard = apiRef => {
     if (hasNativeSelection(event.target)) {
       return;
     }
-    apiRef.current.unstable_copySelectedRowsToClipboard();
-  }, [apiRef]);
-  (0, _utils.useGridNativeEventListener)(apiRef, apiRef.current.rootElementRef, 'keydown', handleKeydown);
-  const clipboardApi = {
-    unstable_copySelectedRowsToClipboard: copySelectedRowsToClipboard
-  };
-  (0, _utils.useGridApiMethod)(apiRef, clipboardApi, 'public');
+    let textToCopy = '';
+    const selectedRows = apiRef.current.getSelectedRows();
+    if (selectedRows.size > 0) {
+      textToCopy = apiRef.current.getDataAsCsv({
+        includeHeaders: false,
+        // TODO: make it configurable
+        delimiter: clipboardCopyCellDelimiter
+      });
+    } else {
+      const focusedCell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
+      if (focusedCell) {
+        const cellParams = apiRef.current.getCellParams(focusedCell.id, focusedCell.field);
+        textToCopy = (0, _csvSerializer.serializeCellValue)(cellParams, {
+          delimiterCharacter: clipboardCopyCellDelimiter,
+          ignoreValueFormatter
+        });
+      }
+    }
+    textToCopy = apiRef.current.unstable_applyPipeProcessors('clipboardCopy', textToCopy);
+    if (textToCopy) {
+      copyToClipboard(textToCopy);
+      apiRef.current.publishEvent('clipboardCopy', textToCopy);
+    }
+  }, [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter]);
+  (0, _utils.useGridNativeEventListener)(apiRef, apiRef.current.rootElementRef, 'keydown', handleCopy);
+  (0, _utils.useGridApiOptionHandler)(apiRef, 'clipboardCopy', props.onClipboardCopy);
 };
 exports.useGridClipboard = useGridClipboard;

package/node/hooks/features/dimensions/useGridDimensions.js

@@ -16,7 +16,6 @@ var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _gridColumnsUtils = require("../columns/gridColumnsUtils");
-var _gridClasses = require("../../../constants/gridClasses");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const isTestEnvironment = process.env.NODE_ENV === 'test';
@@ -158,8 +157,7 @@ function useGridDimensions(apiRef, props) {
     return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
   }, [apiRef, props.pagination, props.paginationMode, props.getRowHeight, rowHeight]);
   const computeSizeAndPublishResizeEvent = React.useCallback(() => {
-    const rootEl = apiRef.current.rootElementRef?.current;
-    const mainEl = rootEl?.querySelector(`.${_gridClasses.gridClasses.main}`);
+    const mainEl = apiRef.current.mainElementRef?.current;
     if (!mainEl) {
       return;
     }

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

@@ -99,10 +99,14 @@ const useGridCellEditing = (apiRef, props) => {
       }
     } else if (params.isEditable) {
       let reason;
-      if (event.key === ' ') {
-        return; // Space scrolls to the last row
+      const canStartEditing = apiRef.current.unstable_applyPipeProcessors('canStartEditing', true, {
+        event,
+        cellParams: params,
+        editMode: 'cell'
+      });
+      if (!canStartEditing) {
+        return;
       }
-
       if ((0, _keyboardUtils.isPrintableKey)(event)) {
         reason = _gridEditCellParams.GridCellEditStartReasons.printableKeyDown;
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {

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

@@ -152,10 +152,14 @@ const useGridRowEditing = (apiRef, props) => {
       }
     } else if (params.isEditable) {
       let reason;
-      if (event.key === ' ') {
-        return; // Space scrolls to the last row
+      const canStartEditing = apiRef.current.unstable_applyPipeProcessors('canStartEditing', true, {
+        event,
+        cellParams: params,
+        editMode: 'row'
+      });
+      if (!canStartEditing) {
+        return;
       }
-
       if ((0, _keyboardUtils.isPrintableKey)(event)) {
         reason = _gridRowParams.GridRowEditStartReasons.printableKeyDown;
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {