@mui/x-data-grid 7.0.0-beta.7 → 7.1.0

package/joy/joySlots.js

@@ -79,7 +79,6 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }));
 });
 const TextField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  var _props$InputProps, _props$inputProps;
   let {
       onChange,
       label,
@@ -91,8 +90,8 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       variant
     } = _ref2,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-  const rootRef = useForkRef(ref, (_props$InputProps = props.InputProps) == null ? void 0 : _props$InputProps.ref);
-  const inputForkRef = useForkRef(inputRef, props == null || (_props$inputProps = props.inputProps) == null ? void 0 : _props$inputProps.ref);
+  const rootRef = useForkRef(ref, props.InputProps?.ref);
+  const inputForkRef = useForkRef(inputRef, props?.inputProps?.ref);
   const {
     startAdornment,
     endAdornment
@@ -109,7 +108,7 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       variant: convertVariant(variant, 'outlined'),
       size: convertSize(size),
       slotProps: {
-        input: _extends({}, props == null ? void 0 : props.inputProps, {
+        input: _extends({}, props?.inputProps, {
           ref: inputForkRef
         })
       },
@@ -139,7 +138,6 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(_ref3, ref) {
   }));
 });
 const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref4, ref) {
-  var _convertColor;
   let {
       color,
       size,
@@ -148,7 +146,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref4, ref)
     props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
   return /*#__PURE__*/_jsx(JoyIconButton, _extends({}, props, {
     size: convertSize(size),
-    color: (_convertColor = convertColor(color)) != null ? _convertColor : 'neutral',
+    color: convertColor(color) ?? 'neutral',
     variant: "plain",
     ref: ref,
     sx: sx
@@ -193,10 +191,9 @@ const Select = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     listboxOpen: open,
     onListboxOpenChange: isOpen => {
       if (isOpen) {
-        onOpen == null || onOpen({});
+        onOpen?.({});
       } else {
-        var _MenuProps$onClose;
-        MenuProps == null || (_MenuProps$onClose = MenuProps.onClose) == null || _MenuProps$onClose.call(MenuProps, {}, undefined);
+        MenuProps?.onClose?.({}, undefined);
       }
     },
     size: convertSize(size),
@@ -257,10 +254,7 @@ const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
   const rootProps = useGridRootProps();
   const paginationModel = gridPaginationModelSelector(apiRef);
   const visibleTopLevelRowCount = gridFilteredTopLevelRowCountSelector(apiRef);
-  const rowCount = React.useMemo(() => {
-    var _ref8, _rootProps$rowCount;
-    return (_ref8 = (_rootProps$rowCount = rootProps.rowCount) != null ? _rootProps$rowCount : visibleTopLevelRowCount) != null ? _ref8 : 0;
-  }, [rootProps.rowCount, visibleTopLevelRowCount]);
+  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);

package/models/api/gridRowsMetaApi.d.ts

@@ -52,7 +52,7 @@ export interface GridRowsMetaPrivateApi {
     rowHasAutoHeight: (id: GridRowId) => boolean;
     /**
      * Returns the index of the last row measured.
-     * The value considers only the rows reachable by scroll, e.g. first row has index=0 in all pages.
+     * The value considers only the rows reachable by scroll, for example first row has index=0 in all pages.
      * @returns {number} The index of the last measured row.
      */
     getLastMeasuredRowIndex: () => number;

package/models/api/index.d.ts

@@ -17,7 +17,7 @@ export * from './gridPreferencesPanelApi';
 export * from './gridPrintExportApi';
 export * from './gridCallbackDetails';
 export * from './gridScrollApi';
-export * from './gridVirtualizationApi';
+export type { GridVirtualizationApi } from './gridVirtualizationApi';
 export type { GridApiCommon } from './gridApiCommon';
 export type { GridEditingApi, GridCellModesModel, GridRowModesModel } from './gridEditingApi';
 export type GridEditRowApi = GridEditingApi;

package/models/api/index.js

@@ -12,5 +12,4 @@ export * from './gridPreferencesPanelApi';
 export * from './gridPrintExportApi';
 export * from './gridCallbackDetails';
 export * from './gridScrollApi';
-export * from './gridVirtualizationApi';
 export {};

package/models/events/gridEventLookup.d.ts

@@ -13,6 +13,7 @@ import type { GridStrategyProcessorName } from '../../hooks/core/strategyProcess
 import { GridRowEditStartParams, GridRowEditStopParams } from '../params/gridRowParams';
 import { GridCellModesModel, GridRowModesModel } from '../api/gridEditingApi';
 import { GridPaginationModel } from '../gridPaginationProps';
+import { GridDensity } from '../gridDensity';
 export interface GridRowEventLookup {
     /**
      * Fired when a row is clicked.
@@ -375,6 +376,12 @@ export interface GridControlledStateEventLookup {
     rowCountChange: {
         params: number;
     };
+    /**
+     * Fired when the density changes.
+     */
+    densityChange: {
+        params: GridDensity;
+    };
 }
 export interface GridControlledStateReasonLookup {
     filter: 'upsertFilterItem' | 'upsertFilterItems' | 'deleteFilterItem' | 'changeLogicOperator' | 'restoreState' | 'removeAllFilterItems';

package/models/gridExport.d.ts

@@ -88,6 +88,12 @@ export interface GridCsvExportOptions extends GridFileExportOptions {
      * @returns {GridRowId[]} The list of row ids to export.
      */
     getRowsToExport?: (params: GridCsvGetRowsToExportParams) => GridRowId[];
+    /**
+     * @ignore
+     * If `false`, the quotes will not be appended to the cell value.
+     * @default true
+     */
+    shouldAppendQuotes?: boolean;
 }
 /**
  * The options to apply on the Print export.

package/models/gridStateCommunity.d.ts

@@ -41,4 +41,5 @@ export interface GridInitialStateCommunity {
     filter?: GridFilterInitialState;
     columns?: GridColumnsInitialState;
     preferencePanel?: GridPreferencePanelInitialState;
+    density?: GridDensityState;
 }

package/models/props/DataGridProps.d.ts

@@ -35,7 +35,7 @@ export interface GridExperimentalFeatures {
 /**
  * The props users can give to the `DataGrid` component.
  */
-export type DataGridProps<R extends GridValidRowModel = any> = Omit<Partial<DataGridPropsWithDefaultValues> & DataGridPropsWithComplexDefaultValueBeforeProcessing & DataGridPropsWithoutDefaultValue<R>, DataGridForcedPropsKey> & {
+export type DataGridProps<R extends GridValidRowModel = any> = Omit<Partial<DataGridPropsWithDefaultValues<R>> & DataGridPropsWithComplexDefaultValueBeforeProcessing & DataGridPropsWithoutDefaultValue<R>, DataGridForcedPropsKey> & {
     pagination?: true;
 };
 /**
@@ -75,7 +75,7 @@ export interface DataGridPropsWithComplexDefaultValueBeforeProcessing {
  * The controlled model do not have a default value at the prop processing level, so they must be defined in `DataGridOtherProps`
  * TODO: add multiSortKey
  */
-export interface DataGridPropsWithDefaultValues {
+export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = any> {
     /**
      * If `true`, the Data Grid height is dynamic and follow the number of rows in the Data Grid.
      * @default false
@@ -98,35 +98,25 @@ export interface DataGridPropsWithDefaultValues {
      */
     checkboxSelectionVisibleOnly: boolean;
     /**
-     * Number of extra columns to be rendered before/after the visible slice.
-     * @default 3
+     * Column region in pixels to render before/after the viewport
+     * @default 150
      */
-    columnBuffer: number;
+    columnBufferPx: number;
     /**
-     * Number of extra rows to be rendered before/after the visible slice.
-     * @default 3
+     * Row region in pixels to render before/after the viewport
+     * @default 150
      */
-    rowBuffer: number;
+    rowBufferPx: number;
     /**
      * If `false`, the row selection mode is disabled.
      * @default true
      */
     rowSelection: boolean;
     /**
-     * Number of rows from the `rowBuffer` that can be visible before a new slice is rendered.
-     * @default 3
-     */
-    rowThreshold: number;
-    /**
-     * Number of rows from the `columnBuffer` that can be visible before a new slice is rendered.
-     * @default 3
+     * The milliseconds throttle delay for resizing the grid.
+     * @default 60
      */
-    columnThreshold: number;
-    /**
-     * Set the density of the Data Grid.
-     * @default "standard"
-     */
-    density: GridDensity;
+    resizeThrottleMs: number;
     /**
      * If `true`, column filters are disabled.
      * @default false
@@ -260,6 +250,11 @@ export interface DataGridPropsWithDefaultValues {
      * @default "client"
      */
     paginationMode: GridFeatureMode;
+    /**
+     * Set of rows of type [[GridRowsProp]].
+     * @default []
+     */
+    rows: GridRowsProp<R>;
     /**
      * Sets the height in pixel of a row in the Data Grid.
      * @default 52
@@ -377,6 +372,11 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<GridClasses>;
+    /**
+     * Set the density of the Data Grid.
+     * @default "standard"
+     */
+    density?: GridDensity;
     /**
      * Set the total number of rows, if it is different from the length of the value `rows` prop.
      * If some rows have children (for instance in the tree data), this number represents the amount of top level rows.
@@ -530,6 +530,11 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
     onColumnOrderChange?: GridEventListener<'columnOrderChange'>;
+    /**
+     * Callback fired when the density changes.
+     * @param {GridDensity} density New density value.
+     */
+    onDensityChange?: (density: GridDensity) => void;
     /**
      * Callback fired when a row is clicked.
      * Not called if the target clicked is an interactive element added by the built-in columns.
@@ -688,10 +693,6 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * Nonce of the inline styles for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute).
      */
     nonce?: string;
-    /**
-     * Set of rows of type [[GridRowsProp]].
-     */
-    rows: GridRowsProp<R>;
     /**
      * The initial state of the DataGrid.
      * The data in it will be set in the state on initialization but will not be controlled.

package/modern/DataGrid/DataGrid.js

@@ -101,10 +101,10 @@ DataGridRaw.propTypes = {
    */
   clipboardCopyCellDelimiter: PropTypes.string,
   /**
-   * Number of extra columns to be rendered before/after the visible slice.
-   * @default 3
+   * Column region in pixels to render before/after the viewport
+   * @default 150
    */
-  columnBuffer: PropTypes.number,
+  columnBufferPx: PropTypes.number,
   columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
   /**
    * Sets the height in pixel of the column headers in the Data Grid.
@@ -115,11 +115,6 @@ DataGridRaw.propTypes = {
    * Set of columns of type [[GridColDef]][].
    */
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  /**
-   * Number of rows from the `columnBuffer` that can be visible before a new slice is rendered.
-   * @default 3
-   */
-  columnThreshold: PropTypes.number,
   /**
    * Set the column visibility model of the Data Grid.
    * If defined, the Data Grid will ignore the `hide` property in [[GridColDef]].
@@ -467,6 +462,11 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onColumnWidthChange: PropTypes.func,
+  /**
+   * Callback fired when the density changes.
+   * @param {GridDensity} density New density value.
+   */
+  onDensityChange: PropTypes.func,
   /**
    * Callback fired when the Filter model changes before the filters are applied.
    * @param {GridFilterModel} model With all properties from [[GridFilterModel]].
@@ -609,10 +609,15 @@ DataGridRaw.propTypes = {
    */
   processRowUpdate: PropTypes.func,
   /**
-   * Number of extra rows to be rendered before/after the visible slice.
-   * @default 3
+   * The milliseconds throttle delay for resizing the grid.
+   * @default 60
    */
-  rowBuffer: PropTypes.number,
+  resizeThrottleMs: PropTypes.number,
+  /**
+   * Row region in pixels to render before/after the viewport
+   * @default 150
+   */
+  rowBufferPx: PropTypes.number,
   /**
    * Set the total number of rows, if it is different from the length of the value `rows` prop.
    * If some rows have children (for instance in the tree data), this number represents the amount of top level rows.
@@ -636,8 +641,9 @@ DataGridRaw.propTypes = {
   rowPositionsDebounceMs: PropTypes.number,
   /**
    * Set of rows of type [[GridRowsProp]].
+   * @default []
    */
-  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
+  rows: PropTypes.arrayOf(PropTypes.object),
   /**
    * If `false`, the row selection mode is disabled.
    * @default true
@@ -652,11 +658,6 @@ DataGridRaw.propTypes = {
    * @default "margin"
    */
   rowSpacingType: PropTypes.oneOf(['border', 'margin']),
-  /**
-   * Number of rows from the `rowBuffer` that can be visible before a new slice is rendered.
-   * @default 3
-   */
-  rowThreshold: PropTypes.number,
   /**
    * Override the height/width of the Data Grid inner scrollbar.
    */

package/modern/DataGrid/useDataGridProps.js

@@ -25,12 +25,10 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   autoPageSize: false,
   checkboxSelection: false,
   checkboxSelectionVisibleOnly: false,
-  columnBuffer: 3,
-  rowBuffer: 3,
-  columnThreshold: 3,
-  rowThreshold: 3,
+  columnBufferPx: 150,
+  rowBufferPx: 150,
+  rows: [],
   rowSelection: true,
-  density: 'standard',
   disableColumnFilter: false,
   disableColumnMenu: false,
   disableColumnSelector: false,
@@ -56,6 +54,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   pagination: false,
   paginationMode: 'client',
   rowHeight: 52,
+  resizeThrottleMs: 60,
   pageSizeOptions: [25, 50, 100],
   rowSpacingType: 'margin',
   showCellVerticalBorder: false,

package/modern/components/GridPagination.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import TablePagination, { tablePaginationClasses } from '@mui/material/TablePagination';
 import { styled } from '@mui/material/styles';
 import { useGridSelector } from '../hooks/utils/useGridSelector';
@@ -26,7 +27,7 @@ const GridPaginationRoot = styled(TablePagination)(({
 
 // A mutable version of a readonly array.
 
-export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(props, ref) {
+const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(props, ref) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
@@ -79,4 +80,12 @@ export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginat
     onPageChange: handlePageChange,
     onRowsPerPageChange: handlePageSizeChange
   }, apiRef.current.getLocaleText('MuiTablePagination'), props));
-});
+});
+process.env.NODE_ENV !== "production" ? GridPagination.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  component: PropTypes.elementType
+} : void 0;
+export { GridPagination };

package/modern/components/cell/GridActionsCell.js

@@ -128,7 +128,7 @@ function GridActionsCell(props) {
     }
     if (newIndex !== focusedButtonIndex) {
       event.preventDefault(); // Prevent scrolling
-      event.stopPropagation(); // Don't stop propagation for other keys, e.g. ArrowUp
+      event.stopPropagation(); // Don't stop propagation for other keys, for example ArrowUp
       setFocusedButtonIndex(newIndex);
     }
   };

package/modern/components/cell/GridActionsCellItem.js

@@ -62,6 +62,10 @@ process.env.NODE_ENV !== "production" ? GridActionsCellItem.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component
+   */
+  component: PropTypes.elementType,
   icon: PropTypes.element,
   label: PropTypes.string.isRequired,
   showInMenu: PropTypes.bool

package/modern/components/cell/GridBooleanCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "hasFocus", "tabIndex"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "hasFocus", "tabIndex", "hideDescendantCount"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
@@ -76,6 +76,7 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
    * If true, the cell is the active element.
    */
   hasFocus: PropTypes.bool.isRequired,
+  hideDescendantCount: PropTypes.bool,
   /**
    * The grid row id.
    */
@@ -105,7 +106,7 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
 const GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
 export { GridBooleanCell };
 export const renderBooleanCell = params => {
-  if (isAutoGeneratedRow(params.rowNode)) {
+  if (params.field !== '__row_group_by_columns_group__' && isAutoGeneratedRow(params.rowNode)) {
     return '';
   }
   return /*#__PURE__*/_jsx(GridBooleanCell, _extends({}, params));

package/modern/components/columnHeaders/GridColumnHeaderItem.js

@@ -153,7 +153,9 @@ function GridColumnHeaderItem(props) {
       const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || headerCellRef.current;
       elementToFocus?.focus();
-      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+      if (apiRef.current.columnHeadersContainerRef?.current) {
+        apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+      }
     }
   }, [apiRef, hasFocus]);
   const headerClassName = typeof colDef.headerClassName === 'function' ? colDef.headerClassName({

package/modern/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -56,7 +56,9 @@ const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridG
       const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || headerCellRef.current;
       elementToFocus?.focus();
-      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+      if (apiRef.current.columnHeadersContainerRef?.current) {
+        apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+      }
     }
   }, [apiRef, hasFocus]);
   return /*#__PURE__*/_jsxs("div", _extends({

package/modern/components/containers/GridRoot.js

@@ -11,7 +11,7 @@ import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { gridDensityValueSelector } from '../../hooks/features/density/densitySelector';
+import { gridDensitySelector } from '../../hooks/features/density/densitySelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -39,11 +39,11 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridPrivateApiContext();
-  const densityValue = useGridSelector(apiRef, gridDensityValueSelector);
+  const density = useGridSelector(apiRef, gridDensitySelector);
   const rootElementRef = apiRef.current.rootElementRef;
   const handleRef = useForkRef(rootElementRef, ref);
   const ownerState = _extends({}, rootProps, {
-    density: densityValue
+    density
   });
   const classes = useUtilityClasses(ownerState);
 

package/modern/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -99,7 +99,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputBoolean.propTypes = {
   focusElementRef: refType,
   /**
    * It is `true` if the filter either has a value or an operator with no value
-   * required is selected (e.g. `isEmpty`)
+   * required is selected (for example `isEmpty`)
    */
   isFilterActive: PropTypes.bool,
   item: PropTypes.shape({

package/modern/components/panel/filterPanel/GridFilterInputDate.js

@@ -99,7 +99,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputDate.propTypes = {
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * It is `true` if the filter either has a value or an operator with no value
-   * required is selected (e.g. `isEmpty`)
+   * required is selected (for example `isEmpty`)
    */
   isFilterActive: PropTypes.bool,
   item: PropTypes.shape({

package/modern/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -134,7 +134,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * It is `true` if the filter either has a value or an operator with no value
-   * required is selected (e.g. `isEmpty`)
+   * required is selected (for example `isEmpty`)
    */
   isFilterActive: PropTypes.bool,
   item: PropTypes.shape({

package/modern/components/panel/filterPanel/GridFilterInputValue.js

@@ -86,7 +86,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * It is `true` if the filter either has a value or an operator with no value
-   * required is selected (e.g. `isEmpty`)
+   * required is selected (for example `isEmpty`)
    */
   isFilterActive: PropTypes.bool,
   item: PropTypes.shape({

package/modern/components/toolbar/GridToolbarDensitySelector.js

@@ -5,7 +5,7 @@ import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui
 import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
-import { gridDensityValueSelector } from '../../hooks/features/density/densitySelector';
+import { gridDensitySelector } from '../../hooks/features/density/densitySelector';
 import { isHideMenuKey, isTabKey } from '../../utils/keyboardUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
@@ -22,7 +22,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
   const tooltipProps = slotProps.tooltip || {};
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const densityValue = useGridSelector(apiRef, gridDensityValueSelector);
+  const density = useGridSelector(apiRef, gridDensitySelector);
   const densityButtonId = useId();
   const densityMenuId = useId();
   const [open, setOpen] = React.useState(false);
@@ -42,7 +42,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
     value: 'comfortable'
   }];
   const startIcon = React.useMemo(() => {
-    switch (densityValue) {
+    switch (density) {
       case 'compact':
         return /*#__PURE__*/_jsx(rootProps.slots.densityCompactIcon, {});
       case 'comfortable':
@@ -50,7 +50,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
       default:
         return /*#__PURE__*/_jsx(rootProps.slots.densityStandardIcon, {});
     }
-  }, [densityValue, rootProps]);
+  }, [density, rootProps]);
   const handleDensitySelectorOpen = event => {
     setOpen(prevOpen => !prevOpen);
     buttonProps.onClick?.(event);
@@ -77,7 +77,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
   }
   const densityElements = densityOptions.map((option, index) => /*#__PURE__*/_jsxs(MenuItem, {
     onClick: () => handleDensityUpdate(option.value),
-    selected: option.value === densityValue,
+    selected: option.value === density,
     children: [/*#__PURE__*/_jsx(ListItemIcon, {
       children: option.icon
     }), option.label]

package/modern/components/toolbar/GridToolbarQuickFilter.js

@@ -1,17 +1,29 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs"];
+const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs", "className"];
 import * as React from 'react';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import TextField from '@mui/material/TextField';
 import { styled } from '@mui/material/styles';
 import { unstable_debounce as debounce } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
+import { getDataGridUtilityClass } from '../../constants';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridQuickFilterValuesSelector } from '../../hooks/features/filter';
 import { isDeepEqual } from '../../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['toolbarQuickFilter']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
 const GridToolbarQuickFilterRoot = styled(TextField, {
   name: 'MuiDataGrid',
   slot: 'ToolbarQuickFilter',
@@ -47,11 +59,13 @@ const defaultSearchValueFormatter = values => values.join(' ');
 function GridToolbarQuickFilter(props) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
   const quickFilterValues = useGridSelector(apiRef, gridQuickFilterValuesSelector);
   const {
       quickFilterParser = defaultSearchValueParser,
       quickFilterFormatter = defaultSearchValueFormatter,
-      debounceMs = rootProps.filterDebounceMs
+      debounceMs = rootProps.filterDebounceMs,
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const [searchValue, setSearchValue] = React.useState(() => quickFilterFormatter(quickFilterValues ?? []));
@@ -86,6 +100,7 @@ function GridToolbarQuickFilter(props) {
     variant: "standard",
     value: searchValue,
     onChange: handleSearchValueChange,
+    className: clsx(className, classes.root),
     placeholder: apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder'),
     "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
     type: "search"

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

@@ -67,7 +67,8 @@ export const useGridClipboard = (apiRef, props) => {
       textToCopy = apiRef.current.getDataAsCsv({
         includeHeaders: false,
         // TODO: make it configurable
-        delimiter: clipboardCopyCellDelimiter
+        delimiter: clipboardCopyCellDelimiter,
+        shouldAppendQuotes: false
       });
     } else {
       const focusedCell = gridFocusCellSelector(apiRef);
@@ -75,7 +76,8 @@ export const useGridClipboard = (apiRef, props) => {
         const cellParams = apiRef.current.getCellParams(focusedCell.id, focusedCell.field);
         textToCopy = serializeCellValue(cellParams, {
           delimiterCharacter: clipboardCopyCellDelimiter,
-          ignoreValueFormatter
+          ignoreValueFormatter,
+          shouldAppendQuotes: false
         });
       }
     }

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

@@ -126,7 +126,7 @@ function excludeOutliers(inputValues, factor) {
   const iqr = q3 - q1;
 
   // We make a small adjustment if `iqr < 5` for the cases where the IQR is
-  // very small (e.g. zero) due to very close by values in the input data.
+  // very small (for example zero) due to very close by values in the input data.
   // Otherwise, with an IQR of `0`, anything outside that would be considered
   // an outlier, but it makes more sense visually to allow for this 5px variance
   // rather than showing a cropped cell.