Merge

mui · Apr 11, 2022 · 36069be · 36069be
2 parents 0cac80d + 8da0649
commit 36069be
Show file tree

Hide file tree

Showing 284 changed files with 873 additions and 5,981 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/README.md b/README.md
@@ -27,8 +27,8 @@ We provide three options:
 
 ## Components
 
-- [DataGrid](https://mui.com/components/data-grid/), published under `@mui/x-data-grid`, MIT licensed.
-- [DataGridPro](https://mui.com/components/data-grid/#commercial-version), published under `@mui/x-data-grid-pro`, commercially licensed.
+- [DataGrid](https://mui.com/x/react-data-grid/), published under `@mui/x-data-grid`, MIT licensed.
+- [DataGridPro](https://mui.com/x/react-data-grid/#commercial-version), published under `@mui/x-data-grid-pro`, commercially licensed.
 
 ## Questions
 

diff --git a/benchmark/package.json b/benchmark/package.json
@@ -25,7 +25,7 @@
     "react-virtualized": "^9.22.3",
     "serve-handler": "^6.1.3",
     "style-loader": "^3.3.1",
-    "webpack": "^5.70.0",
+    "webpack": "^5.71.0",
     "webpack-cli": "^4.9.2"
   }
 }
diff --git a/docs/data/data-grid/accessibility/accessibility.md b/docs/data/data-grid/accessibility/accessibility.md
@@ -103,5 +103,5 @@ On macOS:
 
 ## API
 
-- [DataGrid](/api/data-grid/data-grid/)
-- [DataGridPro](/api/data-grid/data-grid-pro/)
+- [DataGrid](/x/api/data-grid/data-grid/)
+- [DataGridPro](/x/api/data-grid/data-grid-pro/)
diff --git a/docs/data/data-grid/columns/columns.md b/docs/data/data-grid/columns/columns.md
@@ -127,7 +127,7 @@ The value generated is used for filtering, sorting, rendering, etc. unless overr
 The value setter is to be used when editing rows and it is the counterpart of the value getter.
 This enables you to customize how the entered value is stored in the row.
 A common use case for it is when the data is a nested structure.
-Refer to the [cell editing](/components/data-grid/editing/#saving-nested-structures) documentation to see an example using it.
+Refer to the [cell editing](/x/react-data-grid/editing/#saving-nested-structures) documentation to see an example using it.
 
 ```tsx
 function setFullName(params: GridValueSetterParams) {
@@ -158,13 +158,13 @@ In the following demo, a formatter is used to display the tax rate's decimal val
 
 The value generated is only used for rendering purposes.
 Filtering and sorting do not rely on the formatted value.
-Use the [`valueParser`](/components/data-grid/columns/#value-parser) to support filtering.
+Use the [`valueParser`](/x/react-data-grid/columns/#value-parser) to support filtering.
 
 ### Value parser
 
 The value parser allows you to convert the user-entered value to another one used for filtering or editing.
 Common use cases include parsing date strings to JavaScript `Date` objects or formatted numbers (e.g. "1,000.50") into `Number`.
-It can be understood as the inverse of [`valueFormatter`](/components/data-grid/columns/#value-formatter).
+It can be understood as the inverse of [`valueFormatter`](/x/react-data-grid/columns/#value-formatter).
 
 In the following demo, the tax rate is displayed as a percentage (e.g. 20%) but a decimal number is used as value (e.g. 0.2).
 
@@ -207,17 +207,17 @@ const columns: GridColDef[] = [
 
 {{"demo": "RenderCellGrid.js", "bg": "inline"}}
 
-**Note**: It is recommended to also set a `valueFormatter` providing a representation for the value to be used when [exporting](/components/data-grid/export/#exported-cells) the data.
+**Note**: It is recommended to also set a `valueFormatter` providing a representation for the value to be used when [exporting](/x/react-data-grid/export/#exported-cells) the data.
 
 > ⚠️ When using `renderCell` with object cell values
-> remember to handle [sorting](/components/data-grid/sorting/#custom-comparator).
+> remember to handle [sorting](/x/react-data-grid/sorting/#custom-comparator).
 > Otherwise, sorting won't work.
 
 #### Render edit cell
 
 The `renderCell` render function allows customizing the rendered in "view mode" only.
 For the "edit mode", set the `renderEditCell` function to customize the edit component.
-Check the [editing page](/components/data-grid/editing/) for more details about editing.
+Check the [editing page](/x/react-data-grid/editing/) for more details about editing.
 
 #### Expand cell renderer
 
@@ -253,11 +253,11 @@ const columns: GridColDef[] = [
 
 ### Styling header
 
-You can check the [styling header](/components/data-grid/style/#styling-column-headers) section for more information.
+You can check the [styling header](/x/react-data-grid/style/#styling-column-headers) section for more information.
 
 ### Styling cells
 
-You can check the [styling cells](/components/data-grid/style/#styling-cells) section for more information.
+You can check the [styling cells](/x/react-data-grid/style/#styling-cells) section for more information.
 
 ## Column types
 
@@ -447,9 +447,9 @@ They can be pinned either to the left or right side and cannot be reordered.
 To pin a column, there are a few ways:
 
 - Using the `initialState` prop
-- [Controlling](/components/data-grid/columns/#controlling-the-pinned-columns) the `pinnedColumns` and `onPinnedColumnsChange` props
+- [Controlling](/x/react-data-grid/columns/#controlling-the-pinned-columns) the `pinnedColumns` and `onPinnedColumnsChange` props
 - Dedicated buttons in the column menu
-- Accessing the [imperative](/components/data-grid/columns/#apiref) API
+- Accessing the [imperative](/x/react-data-grid/columns/#apiref) API
 
 To set pinned columns via `initialState`, pass an object with the following shape to this prop:
 
@@ -542,9 +542,9 @@ Those selectors consider all the defined columns, including hidden ones.
 
 {{"demo": "ColumnsSelectorsNoSnap.js", "bg": "inline", "hideToolbar": true}}
 
-More information about the selectors and how to use them on the [dedicated page](/components/data-grid/state/#access-the-state).
+More information about the selectors and how to use them on the [dedicated page](/x/react-data-grid/state/#access-the-state).
 
 ## API
 
-- [DataGrid](/api/data-grid/data-grid/)
-- [DataGridPro](/api/data-grid/data-grid-pro/)
+- [DataGrid](/x/api/data-grid/data-grid/)
+- [DataGridPro](/x/api/data-grid/data-grid-pro/)
diff --git a/docs/data/data-grid/components/components.md b/docs/data/data-grid/components/components.md
@@ -9,7 +9,7 @@ title: Data Grid - Components
 ## Overriding components
 
 As part of the customization API, the grid allows you to override internal components with the `components` prop.
-The prop accepts an object of type [`GridSlotsComponent`](/api/data-grid/data-grid/#slots).
+The prop accepts an object of type [`GridSlotsComponent`](/x/api/data-grid/data-grid/#slots).
 
 If you wish to pass additional props in a component slot, you can do it using the `componentsProps` prop.
 This prop is of type `GridSlotsComponentsProps`.
@@ -40,7 +40,7 @@ They can be used as below:
 - `useGridApiContext`: returns the `apiRef`.
 - `useGridSelector`: returns the result of a selector on the current state.
 
-More details about the selectors in the [State page](/components/data-grid/state/#access-the-state)
+More details about the selectors in the [State page](/x/react-data-grid/state/#access-the-state)
 
 ```tsx
 function CustomPagination() {
@@ -60,7 +60,7 @@ function CustomPagination() {
 
 ## Components
 
-The full list of overridable components can be found on the [`GridSlotsComponent`](/api/data-grid/data-grid/#slots) API page.
+The full list of overridable components can be found on the [`GridSlotsComponent`](/x/api/data-grid/data-grid/#slots) API page.
 
 ### Column menu
 
@@ -125,8 +125,8 @@ The grid exposes props to hide specific elements of the UI:
 
 ### Pagination
 
-By default, pagination uses the [TablePagination](/components/pagination/#table-pagination) component that is optimized for handling tabular data.
-This demo replaces it with the [Pagination](/components/pagination/) component.
+By default, pagination uses the [TablePagination](/material-ui/react-pagination/#table-pagination) component that is optimized for handling tabular data.
+This demo replaces it with the [Pagination](/material-ui/react-pagination/) component.
 
 {{"demo": "CustomPaginationGrid.js", "bg": "inline"}}
 
@@ -148,7 +148,7 @@ In the following demo, an illustration is added on top of the default "No Rows"
 ### Row
 
 The `componentsProps.row` prop can be used to pass additional props to the row component.
-One common use case might be to listen for events not exposed by [default](/components/data-grid/events/#catalog-of-events).
+One common use case might be to listen for events not exposed by [default](/x/react-data-grid/events/#catalog-of-events).
 The demo below shows a context menu when a row is right-clicked.
 
 {{"demo": "RowContextMenu.js", "bg": "inline"}}
@@ -168,5 +168,5 @@ As any component slot, every icon can be customized. However, it is not yet poss
 
 ## API
 
-- [DataGrid](/api/data-grid/data-grid/)
-- [DataGridPro](/api/data-grid/data-grid-pro/)
+- [DataGrid](/x/api/data-grid/data-grid/)
+- [DataGridPro](/x/api/data-grid/data-grid-pro/)
diff --git a/docs/data/data-grid/demo/demo.md b/docs/data/data-grid/demo/demo.md
@@ -10,5 +10,5 @@ title: Data Grid - Demo
 
 ## API
 
-- [DataGrid](/api/data-grid/data-grid/)
-- [DataGridPro](/api/data-grid/data-grid-pro/)
+- [DataGrid](/x/api/data-grid/data-grid/)
+- [DataGridPro](/x/api/data-grid/data-grid-pro/)
diff --git a/docs/data/data-grid/editing-legacy/editing.md b/docs/data/data-grid/editing-legacy/editing.md
@@ -73,11 +73,11 @@ The following demo shows how these two functions can be used:
 {{"demo": "ValueGetterSetterGrid.js", "bg": "inline"}}
 
 > Calling the `valueSetter` is the last step in the saving process.
-> The [validation](/components/data-grid/editing/#client-side-validation) will still be called with the values before they pass through the setter.
+> The [validation](/x/react-data-grid/editing/#client-side-validation) will still be called with the values before they pass through the setter.
 
 ### Client-side validation
 
-To validate the value of a cell, add the `preProcessEditCellProps` callback to the [column definition](/api/data-grid/grid-col-def/) of the field you wish to validate.
+To validate the value of a cell, add the `preProcessEditCellProps` callback to the [column definition](/x/api/data-grid/grid-col-def/) of the field you wish to validate.
 Once it is called, you can validate the value provided in `params.props.value`.
 Then, return a new object containing `params.props` along with `error` attribute set to true or false.
 If the `error` attribute is true, the value will never be committed.
@@ -143,7 +143,7 @@ The demo lets you edit the ratings by double-clicking the cell.
 
 ### Edit using external button [<span class="plan-pro"></span>](https://mui.com/store/items/material-ui-pro/)
 
-You can override the default [start editing](#start-editing) triggers using the [`event.defaultMuiPrevented`](/components/data-grid/events/#disabling-the-default-behavior) on the synthetic React events.
+You can override the default [start editing](#start-editing) triggers using the [`event.defaultMuiPrevented`](/x/react-data-grid/events/#disabling-the-default-behavior) on the synthetic React events.
 
 {{"demo": "StartEditButtonGrid.js", "bg": "inline", "disableAd": true}}
 
@@ -166,7 +166,7 @@ The demo shows how to catch the start and end edit events in order to log which
 ## Row editing
 
 Row editing lets you edit all cells in a given row simultaneously.
-It supports most of the same features as those available for [cell editing](/components/data-grid/editing/#cell-editing).
+It supports most of the same features as those available for [cell editing](/x/react-data-grid/editing/#cell-editing).
 To enable it, change the edit mode to `"row"` using the `editMode` prop, then set to `true` the `editable` property in the `GridColDef` object of those columns that should be editable.
 
 ```tsx
@@ -211,7 +211,7 @@ You can handle the `onEditRowsModelChange` callback to control the `GridEditRows
 ### Conditional validation [<span class="plan-pro"></span>](https://mui.com/store/items/material-ui-pro/)
 
 Having all cells of a row in edit mode allows validating a field based on the value of another one
-To do this, you will first need to add a `preProcessEditCellProps` callback to the [column definition](/api/data-grid/grid-col-def/).
+To do this, you will first need to add a `preProcessEditCellProps` callback to the [column definition](/x/api/data-grid/grid-col-def/).
 When all cells in a row are in edit mode, you can validate fields by comparing their values.
 Return a new object contaning `params.props` and the `error` attribute with the validation status.
 Once at the least one field has the `error` attribute equals to true no new value will be committed.
@@ -231,7 +231,7 @@ The following demo requires a value for the **Payment method** column if the **I
 
 ### Control with external buttons [<span class="plan-pro"></span>](https://mui.com/store/items/material-ui-pro/)
 
-You can [disable the default behavior](/components/data-grid/events/#disabling-the-default-behavior) of the grid and control the row edit using external buttons.
+You can [disable the default behavior](/x/react-data-grid/events/#disabling-the-default-behavior) of the grid and control the row edit using external buttons.
 
 Here is how you can create a full-featured CRUD:
 
@@ -240,7 +240,7 @@ Here is how you can create a full-featured CRUD:
 ### Saving rows with nested structures
 
 You can save columns that make use of `valueGetter` by adding a `valueSetter`.
-The same [approach](/components/data-grid/editing/#saving-nested-structures) from the cell editing mode can be used here.
+The same [approach](/x/react-data-grid/editing/#saving-nested-structures) from the cell editing mode can be used here.
 Note that the `valueSetter` will be called for each field.
 
 ### Server-side persistence [<span class="plan-pro"></span>](https://mui.com/store/items/material-ui-pro/)
@@ -270,5 +270,5 @@ You can import the following events to customize the editing experience:
 
 ## API
 
-- [DataGrid](/api/data-grid/data-grid/)
-- [DataGridPro](/api/data-grid/data-grid-pro/)
+- [DataGrid](/x/api/data-grid/data-grid/)
+- [DataGridPro](/x/api/data-grid/data-grid-pro/)
diff --git a/docs/data/data-grid/editing/editing.md b/docs/data/data-grid/editing/editing.md
@@ -16,13 +16,13 @@ title: Data Grid - Editing
 > This additional step is required because the default editing API has a couple of issues that can only be fixed with breaking changes, that will only be possible in v6.
 > To avoid having to wait for the next major release window, all breaking changes needed were included inside this flag.
 >
-> If you are looking for the documentation for the default editing API, visit [this page](/components/data-grid/editing-legacy/).
+> If you are looking for the documentation for the default editing API, visit [this page](/x/react-data-grid/editing-legacy/).
 > Note that it is encouraged to migrate to the new editing API since it will be enabled by default in v6.
 > Although it says "experimental," you can consider it stable.
 
 ## Making a column editable
 
-You can make a column editable by enabling the `editable` property in its [column definition](/api/data-grid/grid-col-def/):
+You can make a column editable by enabling the `editable` property in its [column definition](/x/api/data-grid/grid-col-def/):
 
 ```tsx
 <DataGrid columns={[{ field: 'name', editable: true }]} />
@@ -96,7 +96,7 @@ When a cell is in edit mode, the user can stop editing with any of the following
 
 The `editable` property controls which cells are editable at the column level.
 You can use the `isCellEditable` callback prop to define which individual cells the user can edit in a given row.
-It is called with a [`GridCellParams`](/api/data-grid/grid-cell-params/) object and must return `true` if the cell is editable, or `false` if not.
+It is called with a [`GridCellParams`](/x/api/data-grid/grid-cell-params/) object and must return `true` if the cell is editable, or `false` if not.
 
 In the following demo, only the rows with an even `Age` value are editable.
 The editable cells have a green background for better visibility.
@@ -140,7 +140,7 @@ The `valueParser` capitalizes the value entered, and the `valueSetter` splits th
 
 ## Events
 
-The mouse and keyboard interactions that [start](#start-editing) and [stop](#stop-editing) cell editing do so by triggering the `'cellEditStart'` and `'cellEditStop'` [events](/components/data-grid/events/), respectively.
+The mouse and keyboard interactions that [start](#start-editing) and [stop](#stop-editing) cell editing do so by triggering the `'cellEditStart'` and `'cellEditStop'` [events](/x/react-data-grid/events/), respectively.
 For row editing, the events are `'rowEditStart'` and `'rowEditStop'`.
 You can control how these events are handled to customize editing behavior.
 
@@ -156,7 +156,7 @@ The object also contains a `reason` param that specifies which type of interacti
 
 The following demo shows how to prevent the user from exiting edit mode when clicking outside of a cell.
 To do this, the `onCellEditStop` prop is used to check if the `reason` is `'cellFocusOut'`.
-If that condition is true, it [disables](/components/data-grid/events/#disabling-the-default-behavior) the default event behavior.
+If that condition is true, it [disables](/x/react-data-grid/events/#disabling-the-default-behavior) the default event behavior.
 In this scenario, the user can only stop editing a cell by pressing <kbd class="key">Enter</kbd>, <kbd class="key">Escape</kbd> or <kbd class="key">Tab</kbd>.
 
 {{"demo": "DisableStopEditModeOnFocusOut.js", "bg": "inline"}}
@@ -295,7 +295,7 @@ function CustomEditComponent(props: GridRenderEditCellParams) {
 }
 ```
 
-The following demo implements a custom edit component, based on the [`Rating`](https://mui.com/components/rating) component from `@mui/material`, for the **Rating** column.
+The following demo implements a custom edit component, based on the [`Rating`](https://mui.com/material-ui/react-rating) component from `@mui/material`, for the **Rating** column.
 
 {{"demo": "CustomEditComponent.js", "bg": "inline", "defaultCodeOpen": false}}
 
@@ -362,7 +362,7 @@ const handleChange = async (event: SelectChangeEvent) => {
 };
 ```
 
-The following demo implements an edit component with auto-stop, based on a native [`Select`](https://mui.com/components/selects) component for the **Role** column.
+The following demo implements an edit component with auto-stop, based on a native [`Select`](/material-ui/react-select/) component for the **Role** column.
 
 {{"demo": "AutoStopEditComponent.js", "bg": "inline", "defaultCodeOpen": false}}
 
@@ -415,5 +415,5 @@ Instead, use the buttons available in each row or in the toolbar.
 
 ## API
 
-- [DataGrid](/api/data-grid/data-grid/)
-- [DataGridPro](/api/data-grid/data-grid-pro/)
+- [DataGrid](/x/api/data-grid/data-grid/)
+- [DataGridPro](/x/api/data-grid/data-grid-pro/)
diff --git a/docs/data/data-grid/events/events.json b/docs/data/data-grid/events/events.json
@@ -229,13 +229,13 @@
   },
   {
     "name": "rowMouseEnter",
-    "description": "Fired when the mouse enters the row. Called with a <a href=\"/api/data-grid/grid-row-params/\">GridRowParams</a> object.",
+    "description": "Fired when the mouse enters the row. Called with a <a href=\"/x/api/data-grid/grid-row-params/\">GridRowParams</a> object.",
     "params": "GridRowParams",
     "event": "MuiEvent<React.MouseEvent<HTMLElement>>"
   },
   {
     "name": "rowMouseLeave",
-    "description": "Fired when the mouse leaves the row. Called with a <a href=\"/api/data-grid/grid-row-params/\">GridRowParams</a> object.",
+    "description": "Fired when the mouse leaves the row. Called with a <a href=\"/x/api/data-grid/grid-row-params/\">GridRowParams</a> object.",
     "params": "GridRowParams",
     "event": "MuiEvent<React.MouseEvent<HTMLElement>>"
   },