[docs] Migrate content to the new location

docs/src/pages/components/data-grid/accessibility/accessibility.md → docs/data/data-grid/accessibility/accessibility.md

@@ -29,7 +29,7 @@ To enable the density selector, you need to compose a toolbar containing the `Gr
 
 The user can change the density of the data grid by using the density selector from the toolbar.
 
-{{"demo": "pages/components/data-grid/accessibility/DensitySelectorGrid.js", "bg": "inline"}}
+{{"demo": "DensitySelectorGrid.js", "bg": "inline"}}
 
 To hide the density selector add the `disableDensitySelector` prop to the data grid.
 
@@ -39,7 +39,7 @@ The vertical density of the data grid can be set using the `density` prop.
 The `density` prop applies the values determined by the `rowHeight` and `headerHeight` props if supplied.
 The user can override this setting with the toolbar density selector if provided.
 
-{{"demo": "pages/components/data-grid/accessibility/DensitySelectorSmallGrid.js", "bg": "inline"}}
+{{"demo": "DensitySelectorSmallGrid.js", "bg": "inline"}}
 
 ## Keyboard navigation
 

docs/src/pages/components/data-grid/columns/ColumnPinningApiNoSnap.js → docs/data/data-grid/columns/ColumnPinningApiNoSnap.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ApiDocs from 'docsx/src/modules/components/ApiDocs';
-import api from 'docsx/pages/api-docs/data-grid/grid-column-pinning-api.json';
+import api from 'docsx/pages/x/api/data-grid/grid-column-pinning-api.json';
 
 export default function ColumnPinningApiNoSnap() {
   return <ApiDocs api={api} />;

docs/src/pages/components/data-grid/columns/columns.md → docs/data/data-grid/columns/columns.md

@@ -24,7 +24,7 @@ interface GridColDef {
 }
 ```
 
-{{"demo": "pages/components/data-grid/columns/BasicColumnsGrid.js", "bg": "inline"}}
+{{"demo": "BasicColumnsGrid.js", "bg": "inline"}}
 
 By default, columns are ordered according to the order they are included in the `columns` array.
 
@@ -40,23 +40,23 @@ You can configure the headers with:
 - `headerName`: The title of the column rendered in the column header cell.
 - `description`: The description of the column rendered as tooltip if the column header name is not fully displayed.
 
-{{"demo": "pages/components/data-grid/columns/HeaderColumnsGrid.js", "bg": "inline"}}
+{{"demo": "HeaderColumnsGrid.js", "bg": "inline"}}
 
 ### Width
 
 By default, the columns have a width of 100px.
 This is an arbitrary, easy-to-remember value.
 To change the width of a column, use the `width` property available in `GridColDef`.
 
-{{"demo": "pages/components/data-grid/columns/ColumnWidthGrid.js", "bg": "inline"}}
+{{"demo": "ColumnWidthGrid.js", "bg": "inline"}}
 
 ### Minimum width
 
 By default, the columns have a minimum width of 50px.
 This is an arbitrary, easy-to-remember value.
 To change the minimum width of a column, use the `minWidth` property available in `GridColDef`.
 
-{{"demo": "pages/components/data-grid/columns/ColumnMinWidthGrid.js", "bg": "inline"}}
+{{"demo": "ColumnMinWidthGrid.js", "bg": "inline"}}
 
 ### Fluid width
 
@@ -75,7 +75,7 @@ To set a minimum and maximum width for a `flex` column set the `minWidth` and th
 - `flex` doesn't work together with `width`. If you set both `flex` and `width` in `GridColDef`, `flex` will override `width`.
 - `flex` doesn't work if the combined width of the columns that have `width` is more than the width of the grid itself. If that is the case a scroll bar will be visible, and the columns that have `flex` will default back to their base value of 100px.
 
-{{"demo": "pages/components/data-grid/columns/ColumnFluidWidthGrid.js", "bg": "inline"}}
+{{"demo": "ColumnFluidWidthGrid.js", "bg": "inline"}}
 
 ### Resizing [<span class="plan-pro"></span>](https://mui.com/store/items/material-ui-pro/)
 
@@ -88,7 +88,7 @@ To restrict resizing a column under a certain width set the `minWidth` property
 
 To restrict resizing a column above a certain width set the `maxWidth` property in `GridColDef`.
 
-{{"demo": "pages/components/data-grid/columns/ColumnSizingGrid.js", "disableAd": true, "bg": "inline"}}
+{{"demo": "ColumnSizingGrid.js", "disableAd": true, "bg": "inline"}}
 
 To capture changes in the width of a column there are two callbacks that are called:
 
@@ -118,7 +118,7 @@ const columns: GridColDef[] = [
 ];
 ```
 
-{{"demo": "pages/components/data-grid/columns/ValueGetterGrid.js", "bg": "inline"}}
+{{"demo": "ValueGetterGrid.js", "bg": "inline"}}
 
 The value generated is used for filtering, sorting, rendering, etc. unless overridden by a more specific configuration.
 
@@ -154,7 +154,7 @@ Common use cases include converting a JavaScript `Date` object to a date string
 
 In the following demo, a formatter is used to display the tax rate's decimal value (e.g. 0.2) as a percentage (e.g. 20%).
 
-{{"demo": "pages/components/data-grid/columns/ValueFormatterGrid.js", "bg": "inline"}}
+{{"demo": "ValueFormatterGrid.js", "bg": "inline"}}
 
 The value generated is only used for rendering purposes.
 Filtering and sorting will not relay on the formatted value.
@@ -168,7 +168,7 @@ It can be understood as the inverse of [`valueFormatter`](/components/data-grid/
 
 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).
 
-{{"demo": "pages/components/data-grid/columns/ValueParserGrid.js", "bg": "inline"}}
+{{"demo": "ValueParserGrid.js", "bg": "inline"}}
 
 ### Render cell
 
@@ -205,7 +205,7 @@ const columns: GridColDef[] = [
 ];
 ```
 
-{{"demo": "pages/components/data-grid/columns/RenderCellGrid.js", "bg": "inline"}}
+{{"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/#export-custom-rendered-cells) the data.
 
@@ -224,7 +224,7 @@ Check the [editing page](/components/data-grid/editing) for more details about e
 By default, the grid cuts the content of a cell and renders an ellipsis if the content of the cell does not fit in the cell.
 As a workaround, you can create a cell renderer that will allow seeing the full content of the cell in the grid.
 
-{{"demo": "pages/components/data-grid/columns/RenderExpandCellGrid.js", "bg": "inline"}}
+{{"demo": "RenderExpandCellGrid.js", "bg": "inline"}}
 
 ### Render header
 
@@ -249,7 +249,7 @@ const columns: GridColDef[] = [
 ];
 ```
 
-{{"demo": "pages/components/data-grid/columns/RenderHeaderGrid.js", "bg": "inline"}}
+{{"demo": "RenderHeaderGrid.js", "bg": "inline"}}
 
 ### Styling header
 
@@ -319,7 +319,7 @@ However, some types require additional properties to be set to make them work co
   }
   ```
 
-{{"demo": "pages/components/data-grid/columns/ColumnTypesGrid.js", "bg": "inline"}}
+{{"demo": "ColumnTypesGrid.js", "bg": "inline"}}
 
 ## Column visibility
 
@@ -333,7 +333,7 @@ You can prevent the user from hiding a column through the user interface by sett
 
 In the following demo, the "username" column cannot be hidden.
 
-{{"demo": "pages/components/data-grid/columns/VisibleColumnsBasicExample.js", "bg": "inline"}}
+{{"demo": "VisibleColumnsBasicExample.js", "bg": "inline"}}
 
 ### Initialize the visible columns
 
@@ -353,7 +353,7 @@ To initialize the visible columns without controlling them, provide the model to
 />
 ```
 
-{{"demo": "pages/components/data-grid/columns/VisibleColumnsModelInitialState.js", "bg": "inline", "defaultCodeOpen": false }}
+{{"demo": "VisibleColumnsModelInitialState.js", "bg": "inline", "defaultCodeOpen": false }}
 
 ### Controlled visible columns
 
@@ -374,14 +374,14 @@ You can use the `onColumnVisibilityModelChange` prop to listen to the changes to
 >
 > This edge case will be supported in v6 after the removal of legacy `hide` field.
 
-{{"demo": "pages/components/data-grid/columns/VisibleColumnsModelControlled.js", "bg": "inline"}}
+{{"demo": "VisibleColumnsModelControlled.js", "bg": "inline"}}
 
 ### Column `hide` property (deprecated)
 
 Before the introduction of the `columnVisibilityModel`, the columns could be hidden by setting the `hide` property in `GridColDef` to `true`.
 This method still works but will be removed on the next major release.
 
-{{"demo": "pages/components/data-grid/columns/ColumnHiding.js", "bg": "inline"}}
+{{"demo": "ColumnHiding.js", "bg": "inline"}}
 
 ## Custom column types
 
@@ -398,15 +398,15 @@ const usdPrice: GridColTypeDef = {
 };
 ```
 
-{{"demo": "pages/components/data-grid/columns/CustomColumnTypesGrid.js", "bg": "inline"}}
+{{"demo": "CustomColumnTypesGrid.js", "bg": "inline"}}
 
 > ⚠ If an unsupported column type is used the `string` column type will be used instead.
 
 ## Column menu
 
 By default, each column header displays a column menu. The column menu allows actions to be performed in the context of the target column, e.g. filtering. To disable the column menu, set the prop `disableColumnMenu={true}`.
 
-{{"demo": "pages/components/data-grid/columns/ColumnMenuGrid.js", "bg": "inline"}}
+{{"demo": "ColumnMenuGrid.js", "bg": "inline"}}
 
 ## Column selector
 
@@ -418,19 +418,19 @@ The user can choose which columns are visible using the column selector from the
 
 To disable the column selector, set the prop `disableColumnSelector={true}`.
 
-{{"demo": "pages/components/data-grid/columns/ColumnSelectorGrid.js", "bg": "inline"}}
+{{"demo": "ColumnSelectorGrid.js", "bg": "inline"}}
 
 ## Column reorder [<span class="plan-pro"></span>](https://mui.com/store/items/material-ui-pro/)
 
 By default, `DataGridPro` allows all column reordering by dragging the header cells and moving them left or right.
 
-{{"demo": "pages/components/data-grid/columns/ColumnOrderingGrid.js", "disableAd": true, "bg": "inline"}}
+{{"demo": "ColumnOrderingGrid.js", "disableAd": true, "bg": "inline"}}
 
 To disable reordering on all columns, set the prop `disableColumnReorder={true}`.
 
 To disable reordering in a specific column, set the `disableReorder` property to true in the `GridColDef` of the respective column.
 
-{{"demo": "pages/components/data-grid/columns/ColumnOrderingDisabledGrid.js", "disableAd": true, "bg": "inline"}}
+{{"demo": "ColumnOrderingDisabledGrid.js", "disableAd": true, "bg": "inline"}}
 
 In addition, column reordering emits the following events that can be imported:
 
@@ -462,7 +462,7 @@ interface GridPinnedColumns {
 
 The following demos illustrates how this approach works:
 
-{{"demo": "pages/components/data-grid/columns/BasicColumnPinning.js", "disableAd": true, "bg": "inline"}}
+{{"demo": "BasicColumnPinning.js", "disableAd": true, "bg": "inline"}}
 
 **Note:** The column pinning feature can be completely disabled with `disableColumnPinning`.
 
@@ -479,7 +479,7 @@ While the `initialState` prop only works for setting pinned columns during the i
 The value passed to it follows the same shape from the previous approach.
 Use it together with `onPinnedColumnsChange` to know when a column is pinned or unpinned.
 
-{{"demo": "pages/components/data-grid/columns/ControlPinnedColumns.js", "disableAd": true, "bg": "inline"}}
+{{"demo": "ControlPinnedColumns.js", "disableAd": true, "bg": "inline"}}
 
 ### Blocking column unpinning
 
@@ -495,19 +495,19 @@ This can be done in two ways:
 
 2. By providing a custom menu, as demonstrated below:
 
-{{"demo": "pages/components/data-grid/columns/DisableColumnPinningButtons.js", "disableAd": true, "bg": "inline"}}
+{{"demo": "DisableColumnPinningButtons.js", "disableAd": true, "bg": "inline"}}
 
 **Note:** Using the `disableColumnMenu` prop also works, however, you disable completely the column menu with this approach.
 
 ### Pinning the checkbox selection column
 
 To pin the checkbox column added when using `checkboxSelection`, add `GRID_CHECKBOX_SELECTION_COL_DEF.field` to the list of pinned columns.
 
-{{"demo": "pages/components/data-grid/columns/ColumnPinningWithCheckboxSelection.js", "disableAd": true, "bg": "inline"}}
+{{"demo": "ColumnPinningWithCheckboxSelection.js", "disableAd": true, "bg": "inline"}}
 
 ### apiRef
 
-{{"demo": "pages/components/data-grid/columns/ColumnPinningApiNoSnap.js", "bg": "inline", "hideToolbar": true}}
+{{"demo": "ColumnPinningApiNoSnap.js", "bg": "inline", "hideToolbar": true}}
 
 ## 🚧 Column groups
 

docs/src/pages/components/data-grid/components/components.md → docs/data/data-grid/components/components.md

@@ -66,7 +66,7 @@ The full list of overridable components can be found on the [`GridSlotsComponent
 
 As mentioned above, the column menu is a component slot that can be recomposed easily and customized on each column as in the demo below.
 
-{{"demo": "pages/components/data-grid/components/CustomColumnMenu.js", "bg": "inline"}}
+{{"demo": "CustomColumnMenu.js", "bg": "inline"}}
 
 Below is the default `GridColumnMenu`.
 
@@ -93,7 +93,7 @@ export const GridColumnMenu = React.forwardRef<
 To enable the toolbar you need to add the `Toolbar: GridToolbar` to the grid `components` prop.
 This demo showcases how this can be achieved.
 
-{{"demo": "pages/components/data-grid/components/ToolbarGrid.js", "bg": "inline"}}
+{{"demo": "ToolbarGrid.js", "bg": "inline"}}
 
 Alternatively, you can compose your own toolbar.
 
@@ -110,7 +110,7 @@ function CustomToolbar() {
 }
 ```
 
-{{"demo": "pages/components/data-grid/components/CustomToolbarGrid.js", "bg": "inline"}}
+{{"demo": "CustomToolbarGrid.js", "bg": "inline"}}
 
 ### Footer
 
@@ -121,27 +121,27 @@ The grid exposes props to hide specific elements of the UI:
 - `hideFooterSelectedRowCount`: If `true`, the selected row count in the footer is hidden.
 - `hideFooterPagination`: If `true`, the pagination component in the footer is hidden.
 
-{{"demo": "pages/components/data-grid/components/CustomFooter.js", "bg": "inline"}}
+{{"demo": "CustomFooter.js", "bg": "inline"}}
 
 ### 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.
 
-{{"demo": "pages/components/data-grid/components/CustomPaginationGrid.js", "bg": "inline"}}
+{{"demo": "CustomPaginationGrid.js", "bg": "inline"}}
 
 ### Loading overlay
 
 By default, the loading overlay displays a circular progress.
 This demo replaces it with a linear progress.
 
-{{"demo": "pages/components/data-grid/components/CustomLoadingOverlayGrid.js", "bg": "inline"}}
+{{"demo": "CustomLoadingOverlayGrid.js", "bg": "inline"}}
 
 ### No rows overlay
 
 In the following demo, an illustration is added on top of the default "No Rows" message.
 
-{{"demo": "pages/components/data-grid/components/CustomEmptyOverlayGrid.js", "bg": "inline"}}
+{{"demo": "CustomEmptyOverlayGrid.js", "bg": "inline"}}
 
 **Note**: As the no rows overlay, the grid allows to override the no results overlay with the `NoResultsOverlay` slot.
 
@@ -151,20 +151,20 @@ The `componentsProps.row` prop can be used to pass additional props to the row c
 One common use case might be to listen for events not exposed by [default](/components/data-grid/events/#catalog-of-events).
 The demo below shows a context menu when a row is right-clicked.
 
-{{"demo": "pages/components/data-grid/components/RowContextMenu.js", "bg": "inline"}}
+{{"demo": "RowContextMenu.js", "bg": "inline"}}
 
 ### Cell
 
 The following demo uses the `componentsProps.cell` prop to listen for specific events emitted by the cells.
 Try it by hovering a cell with the mouse and it should display the number of characters each cell has.
 
-{{"demo": "pages/components/data-grid/components/CellWithPopover.js", "bg": "inline"}}
+{{"demo": "CellWithPopover.js", "bg": "inline"}}
 
 ### Icons
 
 As any component slot, every icon can be customized. However, it is not yet possible to use the `componentsProps` with icons.
 
-{{"demo": "pages/components/data-grid/components/CustomSortIcons.js", "bg": "inline"}}
+{{"demo": "CustomSortIcons.js", "bg": "inline"}}
 
 ## API
 

docs/src/pages/components/data-grid/demo/demo.md → docs/data/data-grid/demo/demo.md

@@ -6,7 +6,7 @@ title: Data Grid - Demo
 
 <p class="description">Use the demo below to explore the available features</p>
 
-{{"demo": "pages/components/data-grid/demo/FullFeaturedDemo.js", "defaultCodeOpen": false, "bg": "inline"}}
+{{"demo": "FullFeaturedDemo.js", "defaultCodeOpen": false, "bg": "inline"}}
 
 ## API
 

docs/src/pages/components/data-grid/editing/EditApiNoSnap.js → docs/data/data-grid/editing/EditApiNoSnap.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ApiDocs from 'docsx/src/modules/components/ApiDocs';
-import api from 'docsx/pages/api-docs/data-grid/grid-editing-api.json';
+import api from 'docsx/pages/x/api/data-grid/grid-editing-api.json';
 
 export default function EditApiNoSnap() {
   return <ApiDocs api={api} />;