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

package/CHANGELOG.md

@@ -3,6 +3,189 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v7.0.0
+
+_Mar 22, 2024_
+
+We're excited to [announce the first v7 stable release](https://mui.com/blog/mui-x-v7/)! 🎉🚀
+
+This is now the officially supported major version, where we'll keep rolling out new features, bug fixes, and improvements.
+Migration guides are available with a complete list of the breaking changes:
+
+- [Data Grid](https://mui.com/x/migration/migration-data-grid-v6/)
+- [Date and Time Pickers](https://mui.com/x/migration/migration-pickers-v6/)
+- [Tree View](https://mui.com/x/migration/migration-tree-view-v6/)
+- [Charts](https://mui.com/x/migration/migration-charts-v6/)
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Improve the usage of custom `viewRenderers` on `DateTimePicker` (#12441) @LukasTy
+- ✨ Set focus on the focused Tree Item instead of the Tree View (#12226) @flaviendelangle
+- 🕹️ Support controlled `density` for the Data Grid (#12332) @MBilalShafi
+- 🎁 Dynamic virtualization range for the Data Grid (#12353) @romgrk
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### Breaking changes
+
+- The `density` is a [controlled prop](https://mui.com/x/react-data-grid/accessibility/#set-the-density-programmatically) now, if you were previously passing the `density` prop to the Data Grid, you will need to do one of the following:
+
+  1. Move it to the `initialState.density` to initialize it.
+
+  ```diff
+   <DataGrid
+  -  density="compact"
+  +  initialState={{ density: "compact" }}
+   />
+  ```
+
+  2. Move it to the state and use `onDensityChange` callback to update the `density` prop accordingly for it to work as expected.
+
+  ```diff
+  + const [density, setDensity] = React.useState<GridDensity>('compact');
+   <DataGrid
+  -  density="compact"
+  +  density={density}
+  +  onDensityChange={(newDensity) => setDensity(newDensity)}
+   />
+  ```
+
+- The selector `gridDensityValueSelector` was removed, use the `gridDensitySelector` instead.
+
+- The props `rowBuffer` and `columnBuffer` were renamed to `rowBufferPx` and `columnBufferPx`.
+  Their value is now a pixel value rather than a number of items. Their default value is now `150`.
+
+- The props `rowThreshold` and `columnThreshold` have been removed.
+  If you had the `rowThreshold` prop set to `0` to force new rows to be rendered more often – this is no longer necessary.
+
+#### `@mui/x-data-grid@7.0.0`
+
+- [DataGrid] Allow to control the grid density (#12332) @MBilalShafi
+- [DataGrid] Dynamic virtualization range (#12353) @romgrk
+- [DataGrid] Fix `ElementType` usage (#12479) @cherniavskii
+- [DataGrid] Fix cell value formatting on copy (#12357) @sai6855
+- [DataGrid] Fix checkbox selection is keeping selection when filtering (#11751) @g1mishra
+- [DataGrid] Make `rows` an optional prop (#12478) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@7.0.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.0.0`.
+
+#### `@mui/x-data-grid-premium@7.0.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.0.0`, plus:
+
+- [DataGridPremium] Add support for confirmation before clipboard paste (#12225) @cherniavskii
+- [DataGridPremium] Fix single grouping column sorting (#9679) @cherniavskii
+- [DataGridPremium] Fix boolean cell not rendered in group rows (#12492) @sai6855
+
+### Date and Time Pickers
+
+#### Breaking changes
+
+- The `DesktopDateTimePicker` view rendering has been optimized by using the same technique as for `DesktopDateTimeRangePicker`.
+  - The `dateTimeViewRenderers` have been removed in favor of reusing existing time view renderers (`renderTimeViewClock`, `renderDigitalClockTimeView` and `renderMultiSectionDigitalClockTimeView`) and date view renderer (`renderDateViewCalendar`).
+  - Passing `renderTimeViewClock` to time view renderers will no longer revert to the old behavior of rendering only date or time view.
+
+#### `@mui/x-date-pickers@7.0.0`
+
+- [fields] Allow to override the separator between the start and the end date in all range fields (#12174) @flaviendelangle
+- [fields] Support format without separator (#12489) @flaviendelangle
+- [pickers] Use renderer interceptor on `DesktopDateTimePicker` (#12441) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.0.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.0.0`, plus:
+
+- [DateTimeRangePicker] Add component `JSDoc` (#12518) @LukasTy
+- [DateTimeRangePicker] Fix views behavior regression (#12529) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@7.0.0`
+
+- [charts] Fix small typo in `CartesianContextProvider` (#12461) @Janpot
+
+### Tree View
+
+#### Breaking changes
+
+- The required `nodeId` prop used by the `TreeItem` has been renamed to `itemId` for consistency:
+
+```diff
+ <TreeView>
+-    <TreeItem label="Item 1" nodeId="one">
++    <TreeItem label="Item 1" itemId="one">
+ </TreeView>
+```
+
+- The focus is now applied to the Tree Item root element instead of the Tree View root element.
+
+  This change will allow new features that require the focus to be on the Tree Item,
+  like the drag and drop reordering of items.
+  It also solves several issues with focus management,
+  like the inability to scroll to the focused item when a lot of items are rendered.
+
+  This will mostly impact how you write tests to interact with the Tree View:
+
+  For example, if you were writing a test with `react-testing-library`, here is what the changes could look like:
+
+  ```diff
+   it('test example on first item', () => {
+  -  const { getByRole } = render(
+  +  const { getAllByRole } = render(
+       <SimpleTreeView>
+         <TreeItem nodeId="one" />
+         <TreeItem nodeId="two" />
+      </SimpleTreeView>
+     );
+
+  -  const tree = getByRole('tree');
+  +  const firstTreeItem = getAllByRole('treeitem')[0];
+     act(() => {
+  -    tree.focus();
+  +    firstTreeItem.focus();
+     });
+  -  fireEvent.keyDown(tree, { key: 'ArrowDown' });
+  +  fireEvent.keyDown(firstTreeItem, { key: 'ArrowDown' });
+   })
+  ```
+
+#### `@mui/x-tree-view@7.0.0`
+
+- [TreeView] Rename `nodeId` to `itemId` (#12418) @noraleonte
+- [TreeView] Set focus on the focused Tree Item instead of the Tree View (#12226) @flaviendelangle
+- [TreeView] Update JSDoc of the `ContentComponent` prop to avoid using the word "node" (#12476) @flaviendelangle
+
+### `@mui/x-codemod@7.0.0`
+
+- [codemod] Add a codemod and update the grid migration guide (#12488) @MBilalShafi
+
+### Docs
+
+- [docs] Finalize migration guide (#12501) @noraleonte
+- [docs] Fix nested cells alignment in the popular features demo (#12450) @cherniavskii
+- [docs] Fix some Vale errors (#12469) @oliviertassinari
+- [docs] Remove mentions of pre release (#12513) @noraleonte
+- [docs] Update branch name and tags (#12498) @cherniavskii
+- [docs] Update links to v6 (#12496) @cherniavskii
+- [docs] Update links to v7 docs (#12500) @noraleonte
+- [docs] Update supported versions (#12508) @joserodolfofreitas
+- [docs] Update "What's new in MUI X" page #12527 @cherniavskii
+
+### Core
+
+- [core] Bump `@mui/material` peer dependency for all packages (#12516) @LukasTy
+- [core] Fix `no-restricted-imports` ESLint rule not working for Data Grid packages (#12477) @cherniavskii
+- [core] Lower the frequency of `no-response` action runs (#12491) @michaldudak
+- [core] Remove leftover `legacy` `browserlistrc` entry (#12415) @LukasTy
+- [core] Update NPM tag (#12511) @cherniavskii
+- [core] Update supported browsers (browserlistrc) (#12521) @LukasTy
+- [core] Use Circle CI context @oliviertassinari
+- [license] Fix grammar on expired license error message (#12460) @joserodolfofreitas
+
 ## 7.0.0-beta.7
 
 _Mar 14, 2024_
@@ -90,7 +273,7 @@ The `onNodeFocus` callback has been renamed to `onItemFocus` for consistency:
 - [docs] Add `legacy` bundle drop mention in migration pages (#12424) @LukasTy
 - [docs] Add missing luxon `Info` import (#12427) @LukasTy
 - [docs] Improve slots definitions for charts (#12408) @alexfauquette
-- [docs] Polish What's new in MUI X blog titles (#12309) @oliviertassinari
+- [docs] Polish What's new in MUI X blog titles (#12309) @oliviertassinari
 - [docs] Replace `rel="noreferrer"` by `rel="noopener"` @oliviertassinari
 - [docs] Update `date-fns` `weekStarsOn` overriding example (#12416) @LukasTy
 
@@ -252,7 +435,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-beta.5`.
 ### Docs
 
 - [docs] Fix image layout shift when loading @oliviertassinari
-- [docs] Match Material UI repo comment for redirections @oliviertassinari
+- [docs] Match Material UI repo comment for redirections @oliviertassinari
 - [docs] Non breaking spaces @oliviertassinari
 - [docs] Polish the Date Picker playground (#11869) @zanivan
 - [docs] Standardize WAI-ARIA references @oliviertassinari
@@ -263,9 +446,9 @@ Same changes as in `@mui/x-date-pickers@7.0.0-beta.5`.
 - [core] Remove grid folder from `getComponentInfo` RegExp (#12241) @flaviendelangle
 - [core] Remove `window.` reference for common globals @oliviertassinari
 - [core] Use runtime agnostic setTimeout type @oliviertassinari
-- [docs-infra] Fix Stack Overflow breaking space @oliviertassinari
+- [docs-infra] Fix Stack Overflow breaking space @oliviertassinari
 - [docs-infra] Fix missing non breaking spaces @oliviertassinari
-- [github] Update `no-response` workflow (#12193) @MBilalShafi
+- [infra] Update `no-response` workflow (#12193) @MBilalShafi
 - [infra] Fix missing permission reset @oliviertassinari
 
 ## 7.0.0-beta.4
@@ -282,7 +465,7 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 
 ### Breaking changes
 
-- The support for IE11 has been removed from all MUI X packages. The `legacy` bundle that used to support old browsers like IE11 is no longer included.
+- The support for IE11 has been removed from all MUI X packages. The `legacy` bundle that used to support old browsers like IE11 is no longer included.
 
 ### Data Grid
 
@@ -324,7 +507,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.4`.
 - The headless field hooks (e.g.: `useDateField`) now returns a new prop called `enableAccessibleFieldDOMStructure`.
   This property is utilized to determine whether the anticipated UI is constructed using an accessible DOM structure. Learn more about this new [accessible DOM structure](/x/react-date-pickers/fields/#accessible-dom-structure).
 
- When building a custom UI, you are most-likely only supporting one DOM structure, so you can remove `enableAccessibleFieldDOMStructure` before it is passed to the DOM:
+  When building a custom UI, you are most-likely only supporting one DOM structure, so you can remove `enableAccessibleFieldDOMStructure` before it is passed to the DOM:
 
   ```diff
     function MyCustomTextField(props) {
@@ -392,7 +575,7 @@ These components are no longer exported from `@mui/x-charts`:
 ### Docs
 
 - [docs] Add recipe for hiding separator on non-resizable columns (#12134) @michelengelen
-- [docs] Add small improvements to the Gauge Chart page (#12076) @danilo-leal
+- [docs] Add small improvements to the Gauge page (#12076) @danilo-leal
 - [docs] Add the 'point' scaleType to the axis documentation (#12179) @alexfauquette
 - [docs] Clarify Pickers 'Component composition' section (#12097) @LukasTy
 - [docs] Fix "Licensing" page link (#12156) @LukasTy
@@ -975,7 +1158,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.9`.
 
 - [charts] Do not propagate `innerRadius` and `outerRadius` to the DOM (#11689) @alexfauquette
 - [charts] Fix default `stackOffset` for `LineChart` (#11647) @alexfauquette
-- [charts] Remove a TS ignore (#11688) @alexfauquette
+- [charts] Remove a TypeScript ignore (#11688) @alexfauquette
 
 ### Tree View
 
@@ -1404,7 +1587,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.7`.
 - [core] Fix release changelog (#11496) @romgrk
 - [core] Fix use of ::before & ::after (#11515) @oliviertassinari
 - [core] Localize the issue template to MUI X (#11511) @oliviertassinari
-- [core] Regen api files (#11542) @flaviendelangle
+- [core] Regenerate API files (#11542) @flaviendelangle
 - [core] Remove issue emoji @oliviertassinari
 - [core] Sync the release instructions with MUI Core @oliviertassinari
 - [core] Yaml format match most common convention @oliviertassinari
@@ -1447,7 +1630,7 @@ We'd like to offer a big thanks to the 6 contributors who made this release poss
 
 - The `filterModel` now supports `Date` objects as values for `date` and `dateTime` column types.
   The `filterModel` still accepts strings as values for `date` and `dateTime` column types,
-  but all updates to the `filterModel` coming from the UI (e.g. filter panel) will set the value as a `Date` object.
+  but all updates to the `filterModel` coming from the UI (for example filter panel) will set the value as a `Date` object.
 
 #### `@mui/x-data-grid@7.0.0-alpha.6`
 
@@ -1658,7 +1841,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.5`, plus:
 ### Core
 
 - [core] Automate cherry-pick of PRs from `next` -> `master` (#11382) @MBilalShafi
-- [github] Update `no-response` workflow (#11369) @MBilalShafi
+- [infra] Update `no-response` workflow (#11369) @MBilalShafi
 - [test] Fix flaky screenshots (#11388) @cherniavskii
 
 ## 7.0.0-alpha.4
@@ -1896,7 +2079,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.3`.
 
 - [charts] Adjusted `defaultizeValueFormatter` util to accept an optional `series.valueFormatter` value (#11144) @michelengelen
 - [charts] Apply `labelStyle` and `tickLabelStyle` props on `<ChartsYAxis />` (#11180) @akamfoad
-- [charts] Fix TS config (#11259) @alexfauquette
+- [charts] Fix TypeScript config (#11259) @alexfauquette
 - [charts] Fix error with empty dataset (#11063) @alexfauquette
 - [charts] Fix export strategy (#11235) @alexfauquette
 - [charts] Remove outdated prop-types (#11045) @alexfauquette

package/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,10 @@ DataGridRaw.propTypes = {
    */
   processRowUpdate: PropTypes.func,
   /**
-   * 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: PropTypes.number,
+  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 +636,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 +653,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/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,

package/README.md

@@ -15,7 +15,7 @@ This component has the following peer dependencies that you will need to install
 
 ```json
 "peerDependencies": {
-  "@mui/material": "^5.15.0",
+  "@mui/material": "^5.15.14",
   "react": "^17.0.0 || ^18.0.0",
   "react-dom": "^17.0.0 || ^18.0.0"
 },

package/components/GridFooter.js

@@ -12,7 +12,6 @@ import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
-  var _rootProps$slotProps, _rootProps$slotProps2;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const totalTopLevelRowCount = useGridSelector(apiRef, gridTopLevelRowCountSelector);
@@ -21,11 +20,11 @@ const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref)
   const selectedRowCountElement = !rootProps.hideFooterSelectedRowCount && selectedRowCount > 0 ? /*#__PURE__*/_jsx(GridSelectedRowCount, {
     selectedRowCount: selectedRowCount
   }) : /*#__PURE__*/_jsx("div", {});
-  const rowCountElement = !rootProps.hideFooterRowCount && !rootProps.pagination ? /*#__PURE__*/_jsx(rootProps.slots.footerRowCount, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.footerRowCount, {
+  const rowCountElement = !rootProps.hideFooterRowCount && !rootProps.pagination ? /*#__PURE__*/_jsx(rootProps.slots.footerRowCount, _extends({}, rootProps.slotProps?.footerRowCount, {
     rowCount: totalTopLevelRowCount,
     visibleRowCount: visibleTopLevelRowCount
   })) : null;
-  const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && /*#__PURE__*/_jsx(rootProps.slots.pagination, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.pagination));
+  const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && /*#__PURE__*/_jsx(rootProps.slots.pagination, _extends({}, rootProps.slotProps?.pagination));
   return /*#__PURE__*/_jsxs(GridFooterContainer, _extends({
     ref: ref
   }, props, {

package/components/GridHeader.js

@@ -5,9 +5,8 @@ import { GridPreferencesPanel } from './panel/GridPreferencesPanel';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export function GridHeader() {
-  var _rootProps$slotProps;
   const rootProps = useGridRootProps();
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(GridPreferencesPanel, {}), rootProps.slots.toolbar && /*#__PURE__*/_jsx(rootProps.slots.toolbar, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.toolbar))]
+    children: [/*#__PURE__*/_jsx(GridPreferencesPanel, {}), rootProps.slots.toolbar && /*#__PURE__*/_jsx(rootProps.slots.toolbar, _extends({}, rootProps.slotProps?.toolbar))]
   });
 }

package/components/GridPagination.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
-export declare const GridPagination: React.ForwardRefExoticComponent<(Omit<Partial<import("@mui/material/TablePagination").TablePaginationOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("@mui/material/TablePagination").TablePaginationBaseProps, "hidden" | "color" | "page" | "content" | "size" | "style" | "height" | "translate" | "width" | "padding" | "disabled" | "abbr" | "slot" | "title" | "ref" | "colSpan" | "headers" | "rowSpan" | "scope" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "align" | "valign" | "sx" | "classes" | "variant" | "slotProps" | "slots" | "count" | "getItemAriaLabel" | "onPageChange" | "rowsPerPage" | "showFirstButton" | "showLastButton" | "labelDisplayedRows" | "labelRowsPerPage" | "onRowsPerPageChange" | "rowsPerPageOptions" | "backIconButtonProps" | "nextIconButtonProps" | "sortDirection" | "ActionsComponent" | "SelectProps"> & {
-    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-}>, "ref"> | Omit<Partial<import("@mui/material/TablePagination").TablePaginationOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("@mui/material/TablePagination").TablePaginationBaseProps, "ref"> & React.RefAttributes<React.Component<any, any, any>>, "hidden" | "color" | "page" | "content" | "size" | "style" | "height" | "translate" | "width" | "padding" | "disabled" | "abbr" | "slot" | "title" | "ref" | "colSpan" | "headers" | "rowSpan" | "scope" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "align" | "valign" | "sx" | "classes" | "variant" | "slotProps" | "slots" | "count" | "getItemAriaLabel" | "onPageChange" | "rowsPerPage" | "showFirstButton" | "showLastButton" | "labelDisplayedRows" | "labelRowsPerPage" | "onRowsPerPageChange" | "rowsPerPageOptions" | "backIconButtonProps" | "nextIconButtonProps" | "sortDirection" | "ActionsComponent" | "SelectProps"> & {
-    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-}>, "ref">) & React.RefAttributes<unknown>>;
+import { TablePaginationProps } from '@mui/material/TablePagination';
+interface GridPaginationOwnProps {
+    component?: React.ElementType;
+}
+declare const GridPagination: React.ForwardRefExoticComponent<Omit<Partial<Omit<TablePaginationProps, "component">> & GridPaginationOwnProps, "ref"> & React.RefAttributes<unknown>>;
+export { GridPagination };

package/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);
@@ -56,10 +57,9 @@ export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginat
     return false;
   };
   if (process.env.NODE_ENV !== 'production') {
-    var _rootProps$pagination, _rootProps$pagination2;
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const warnedOnceMissingInPageSizeOptions = React.useRef(false);
-    const pageSize = (_rootProps$pagination = (_rootProps$pagination2 = rootProps.paginationModel) == null ? void 0 : _rootProps$pagination2.pageSize) != null ? _rootProps$pagination : paginationModel.pageSize;
+    const pageSize = rootProps.paginationModel?.pageSize ?? paginationModel.pageSize;
     if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !isPageSizeIncludedInPageSizeOptions(pageSize)) {
       console.warn([`MUI X: The page size \`${paginationModel.pageSize}\` is not preset in the \`pageSizeOptions\`.`, `Add it to show the pagination select.`].join('\n'));
       warnedOnceMissingInPageSizeOptions.current = true;
@@ -80,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/components/GridRow.js

@@ -157,7 +157,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   }, [apiRef, rowId]);
   const publishClick = React.useCallback(event => {
     const cell = findParentElementFromClassName(event.target, gridClasses.cell);
-    const field = cell == null ? void 0 : cell.getAttribute('data-field');
+    const field = cell?.getAttribute('data-field');
 
     // Check if the field is available because the cell that fills the empty
     // space of the row has no field.
@@ -184,7 +184,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
 
       // User clicked a button from the "actions" column type
       const column = apiRef.current.getColumn(field);
-      if ((column == null ? void 0 : column.type) === GRID_ACTIONS_COLUMN_TYPE) {
+      if (column?.type === GRID_ACTIONS_COLUMN_TYPE) {
         return;
       }
     }
@@ -199,9 +199,8 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const sizes = useGridSelector(apiRef, () => _extends({}, apiRef.current.unstable_getRowInternalSizes(rowId)), objectShallowCompare);
   let minHeight = rowHeight;
   if (minHeight === 'auto' && sizes) {
-    var _sizes$baseCenter;
     const numberOfBaseSizes = 1;
-    const maximumSize = (_sizes$baseCenter = sizes.baseCenter) != null ? _sizes$baseCenter : 0;
+    const maximumSize = sizes.baseCenter ?? 0;
     if (maximumSize > 0 && numberOfBaseSizes > 1) {
       minHeight = maximumSize;
     }
@@ -220,11 +219,11 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       minHeight,
       '--height': typeof rowHeight === 'number' ? `${rowHeight}px` : rowHeight
     });
-    if (sizes != null && sizes.spacingTop) {
+    if (sizes?.spacingTop) {
       const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
       rowStyle[property] = sizes.spacingTop;
     }
-    if (sizes != null && sizes.spacingBottom) {
+    if (sizes?.spacingBottom) {
       const property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
       let propertyValue = rowStyle[property];
       // avoid overriding existing value
@@ -238,8 +237,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   }, [isNotVisible, rowHeight, styleProp, minHeight, sizes, rootProps.rowSpacingType]);
   const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
   if (typeof rootProps.getRowClassName === 'function') {
-    var _currentPage$range;
-    const indexRelativeToCurrentPage = index - (((_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.firstRowIndex) || 0);
+    const indexRelativeToCurrentPage = index - (currentPage.range?.firstRowIndex || 0);
     const rowParams = _extends({}, apiRef.current.getRowParams(rowId), {
       isFirstVisible: indexRelativeToCurrentPage === 0,
       isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
@@ -248,24 +246,22 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
   const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = PinnedPosition.NONE) => {
-    var _cellColSpanInfo$cell, _cellColSpanInfo$cell2, _editRowsState$rowId$, _editRowsState$rowId;
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
-    if (cellColSpanInfo != null && cellColSpanInfo.spannedByColSpan) {
+    if (cellColSpanInfo?.spannedByColSpan) {
       return null;
     }
-    const width = (_cellColSpanInfo$cell = cellColSpanInfo == null ? void 0 : cellColSpanInfo.cellProps.width) != null ? _cellColSpanInfo$cell : column.computedWidth;
-    const colSpan = (_cellColSpanInfo$cell2 = cellColSpanInfo == null ? void 0 : cellColSpanInfo.cellProps.colSpan) != null ? _cellColSpanInfo$cell2 : 1;
+    const width = cellColSpanInfo?.cellProps.width ?? column.computedWidth;
+    const colSpan = cellColSpanInfo?.cellProps.colSpan ?? 1;
     const pinnedOffset = getPinnedCellOffset(gridPinnedColumnPositionLookup[pinnedPosition], column.computedWidth, indexRelativeToAllColumns, columnPositions, dimensions);
-    if ((rowNode == null ? void 0 : rowNode.type) === 'skeletonRow') {
-      var _column$align;
+    if (rowNode?.type === 'skeletonRow') {
       return /*#__PURE__*/_jsx(slots.skeletonCell, {
         width: width,
         height: rowHeight,
         field: column.field,
-        align: (_column$align = column.align) != null ? _column$align : 'left'
+        align: column.align ?? 'left'
       }, column.field);
     }
-    const editCellState = (_editRowsState$rowId$ = (_editRowsState$rowId = editRowsState[rowId]) == null ? void 0 : _editRowsState$rowId[column.field]) != null ? _editRowsState$rowId$ : null;
+    const editCellState = editRowsState[rowId]?.[column.field] ?? null;
 
     // when the cell is a reorder cell we are not allowing to reorder the col
     // fixes https://github.com/mui/mui-x/issues/11126
@@ -289,7 +285,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       pinnedPosition: pinnedPosition,
       sectionIndex: indexInSection,
       sectionLength: sectionLength
-    }, slotProps == null ? void 0 : slotProps.cell), column.field);
+    }, slotProps?.cell), column.field);
   };
 
   /* Start of rendering */

package/components/base/GridFooterPlaceholder.js

@@ -3,10 +3,9 @@ import * as React from 'react';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function GridFooterPlaceholder() {
-  var _rootProps$slotProps;
   const rootProps = useGridRootProps();
   if (rootProps.hideFooter) {
     return null;
   }
-  return /*#__PURE__*/_jsx(rootProps.slots.footer, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.footer /* FIXME: typing error */));
+  return /*#__PURE__*/_jsx(rootProps.slots.footer, _extends({}, rootProps.slotProps?.footer /* FIXME: typing error */));
 }

package/components/base/GridOverlays.js

@@ -91,18 +91,15 @@ export function GridOverlays() {
   let overlay = null;
   let overlayType = '';
   if (showNoRowsOverlay) {
-    var _rootProps$slotProps;
-    overlay = /*#__PURE__*/_jsx(rootProps.slots.noRowsOverlay, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.noRowsOverlay));
+    overlay = /*#__PURE__*/_jsx(rootProps.slots.noRowsOverlay, _extends({}, rootProps.slotProps?.noRowsOverlay));
     overlayType = 'noRowsOverlay';
   }
   if (showNoResultsOverlay) {
-    var _rootProps$slotProps2;
-    overlay = /*#__PURE__*/_jsx(rootProps.slots.noResultsOverlay, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.noResultsOverlay));
+    overlay = /*#__PURE__*/_jsx(rootProps.slots.noResultsOverlay, _extends({}, rootProps.slotProps?.noResultsOverlay));
     overlayType = 'noResultsOverlay';
   }
   if (loading) {
-    var _rootProps$slotProps3;
-    overlay = /*#__PURE__*/_jsx(rootProps.slots.loadingOverlay, _extends({}, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.loadingOverlay));
+    overlay = /*#__PURE__*/_jsx(rootProps.slots.loadingOverlay, _extends({}, rootProps.slotProps?.loadingOverlay));
     overlayType = 'loadingOverlay';
   }
   if (overlay === null) {