From bae7c103ecfee7b183503c77961236f841370ca4 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Mon, 18 Mar 2024 11:05:06 +0100 Subject: [PATCH 01/20] [DataGridPremium] Fix single grouping column sorting (#9679) --- ...owGroupingFilteringSingleGroupingColDef.js} | 2 +- ...wGroupingFilteringSingleGroupingColDef.tsx} | 2 +- .../data-grid/row-grouping/row-grouping.md | 9 ++++++--- .../rowGrouping/createGroupingColDef.tsx | 6 +++--- .../tests/rowGrouping.DataGridPremium.test.tsx | 18 +++++++++--------- 5 files changed, 20 insertions(+), 17 deletions(-) rename docs/data/data-grid/row-grouping/{RowGroupingSortingSingleGroupingColDef.js => RowGroupingFilteringSingleGroupingColDef.js} (96%) rename docs/data/data-grid/row-grouping/{RowGroupingSortingSingleGroupingColDef.tsx => RowGroupingFilteringSingleGroupingColDef.tsx} (96%) diff --git a/docs/data/data-grid/row-grouping/RowGroupingSortingSingleGroupingColDef.js b/docs/data/data-grid/row-grouping/RowGroupingFilteringSingleGroupingColDef.js similarity index 96% rename from docs/data/data-grid/row-grouping/RowGroupingSortingSingleGroupingColDef.js rename to docs/data/data-grid/row-grouping/RowGroupingFilteringSingleGroupingColDef.js index 9274284cb3d09..1b61c77665195 100644 --- a/docs/data/data-grid/row-grouping/RowGroupingSortingSingleGroupingColDef.js +++ b/docs/data/data-grid/row-grouping/RowGroupingFilteringSingleGroupingColDef.js @@ -11,7 +11,7 @@ import FormControl from '@mui/material/FormControl'; import InputLabel from '@mui/material/InputLabel'; import Select from '@mui/material/Select'; -export default function RowGroupingSortingSingleGroupingColDef() { +export default function RowGroupingFilteringSingleGroupingColDef() { const data = useMovieData(); const [mainGroupingCriteria, setMainGroupingCriteria] = React.useState('undefined'); diff --git a/docs/data/data-grid/row-grouping/RowGroupingSortingSingleGroupingColDef.tsx b/docs/data/data-grid/row-grouping/RowGroupingFilteringSingleGroupingColDef.tsx similarity index 96% rename from docs/data/data-grid/row-grouping/RowGroupingSortingSingleGroupingColDef.tsx rename to docs/data/data-grid/row-grouping/RowGroupingFilteringSingleGroupingColDef.tsx index bc0cf2b01f876..ec2ffa02b495a 100644 --- a/docs/data/data-grid/row-grouping/RowGroupingSortingSingleGroupingColDef.tsx +++ b/docs/data/data-grid/row-grouping/RowGroupingFilteringSingleGroupingColDef.tsx @@ -11,7 +11,7 @@ import FormControl from '@mui/material/FormControl'; import InputLabel from '@mui/material/InputLabel'; import Select from '@mui/material/Select'; -export default function RowGroupingSortingSingleGroupingColDef() { +export default function RowGroupingFilteringSingleGroupingColDef() { const data = useMovieData(); const [mainGroupingCriteria, setMainGroupingCriteria] = React.useState('undefined'); diff --git a/docs/data/data-grid/row-grouping/row-grouping.md b/docs/data/data-grid/row-grouping/row-grouping.md index bb7aca8496d32..08ef4281d6cfd 100644 --- a/docs/data/data-grid/row-grouping/row-grouping.md +++ b/docs/data/data-grid/row-grouping/row-grouping.md @@ -271,17 +271,20 @@ To change the default cell indent, you can use the `--DataGrid-cellOffsetMultipl ### Single grouping column -When using `rowGroupingColumnMode = "single"`, the default behavior is to apply the `sortComparator` and `filterOperators` of the top-level grouping criteria. +When using `rowGroupingColumnMode = "single"`, the default behavior is to: + +- sort each grouping criteria using the `sortComparator` of the column +- apply the `filterOperators` of the top-level grouping criteria If you are rendering leaves with the `leafField` property of `groupingColDef`, the sorting and filtering will be applied on the leaves based on the `sortComparator` and `filterOperators` of their original column. -In both cases, you can force the sorting and filtering to be applied on another grouping criteria with the `mainGroupingCriteria` property of `groupingColDef` +You can force the filtering to be applied on another grouping criteria with the `mainGroupingCriteria` property of `groupingColDef` :::warning This feature is not yet compatible with `sortingMode = "server"` and `filteringMode = "server"`. ::: -{{"demo": "RowGroupingSortingSingleGroupingColDef.js", "bg": "inline", "defaultCodeOpen": false}} +{{"demo": "RowGroupingFilteringSingleGroupingColDef.js", "bg": "inline", "defaultCodeOpen": false}} ### Multiple grouping columns diff --git a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx index fd0573c80f842..e82a47871fc52 100644 --- a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx +++ b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx @@ -88,11 +88,11 @@ const getGroupingCriteriaProperties = (groupedByColDef: GridColDef, applyHeaderN // We only want to sort the groups of the current grouping criteria if ( cellParams1.rowNode.type === 'group' && - cellParams1.rowNode.groupingField === groupedByColDef.field && cellParams2.rowNode.type === 'group' && - cellParams2.rowNode.groupingField === groupedByColDef.field + cellParams1.rowNode.groupingField === cellParams2.rowNode.groupingField ) { - return groupedByColDef.sortComparator!(v1, v2, cellParams1, cellParams2); + const colDef = cellParams1.api.getColumn(cellParams1.rowNode.groupingField); + return colDef.sortComparator(v1, v2, cellParams1, cellParams2); } return groupingFieldIndexComparator(v1, v2, cellParams1, cellParams2); diff --git a/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx index 1a9740d208265..601df54088683 100644 --- a/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx @@ -1852,7 +1852,7 @@ describe(' - Row grouping', () => { clock.withFakeTimers(); describe('prop: rowGroupingColumnMode = "single"', () => { - it('should use the top level grouping criteria for sorting if mainGroupingCriteria and leafField are not defined', async () => { + it('should use each grouping criteria for sorting if leafField are not defined', async () => { render( - Row grouping', () => { 'Cat 1 (1)', '', 'Cat A (3)', - 'Cat 1 (1)', - '', 'Cat 2 (2)', '', '', + 'Cat 1 (1)', + '', ]); }); - it('should use the column grouping criteria for sorting if mainGroupingCriteria is one of the grouping criteria and leaf field is defined', () => { + it('should sort leaves if leaf field is defined', () => { render( - Row grouping', () => { />, ); expect(getColumnValues(0)).to.deep.equal([ + 'Cat B (2)', + 'Cat 2 (1)', + '3', + 'Cat 1 (1)', + '4', 'Cat A (3)', 'Cat 2 (2)', '1', '2', 'Cat 1 (1)', '0', - 'Cat B (2)', - 'Cat 2 (1)', - '3', - 'Cat 1 (1)', - '4', ]); }); From b438784f6a2138c74a3177791b820e069fc1225c Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Mon, 18 Mar 2024 11:47:44 +0100 Subject: [PATCH 02/20] [TreeView] Update JSDoc of the `ContentComponent` prop to avoid using the word "node" (#12476) --- docs/translations/api-docs/tree-view/tree-item/tree-item.json | 2 +- packages/x-tree-view/src/TreeItem/TreeItem.tsx | 2 +- packages/x-tree-view/src/TreeItem/TreeItem.types.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/translations/api-docs/tree-view/tree-item/tree-item.json b/docs/translations/api-docs/tree-view/tree-item/tree-item.json index 24a2ba62082e6..e1cf3bc289491 100644 --- a/docs/translations/api-docs/tree-view/tree-item/tree-item.json +++ b/docs/translations/api-docs/tree-view/tree-item/tree-item.json @@ -4,7 +4,7 @@ "children": { "description": "The content of the component." }, "classes": { "description": "Override or extend the styles applied to the component." }, "ContentComponent": { - "description": "The component used for the content node.", + "description": "The component used to render the content of the item.", "requiresRef": true }, "ContentProps": { "description": "Props applied to ContentComponent." }, diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.tsx b/packages/x-tree-view/src/TreeItem/TreeItem.tsx index 46defc7f74c0e..17450737dbe01 100644 --- a/packages/x-tree-view/src/TreeItem/TreeItem.tsx +++ b/packages/x-tree-view/src/TreeItem/TreeItem.tsx @@ -362,7 +362,7 @@ TreeItem.propTypes = { classes: PropTypes.object, className: PropTypes.string, /** - * The component used for the content node. + * The component used to render the content of the item. * @default TreeItemContent */ ContentComponent: elementTypeAcceptingRef, diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.types.ts b/packages/x-tree-view/src/TreeItem/TreeItem.types.ts index 631781fb6ddfe..1c141c12e6abf 100644 --- a/packages/x-tree-view/src/TreeItem/TreeItem.types.ts +++ b/packages/x-tree-view/src/TreeItem/TreeItem.types.ts @@ -61,7 +61,7 @@ export interface TreeItemProps extends Omit, */ slotProps?: TreeItemSlotProps; /** - * The component used for the content node. + * The component used to render the content of the item. * @default TreeItemContent */ ContentComponent?: React.JSXElementConstructor; From 83de93f39d8f9224e020623fa411e6c6ff661e21 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Mon, 18 Mar 2024 12:17:52 +0100 Subject: [PATCH 03/20] [core] Fix `no-restricted-imports` ESLint rule not working for data grid packages (#12477) --- .eslintrc.js | 8 ++++---- .../components/headerFiltering/GridHeaderFilterCell.tsx | 4 +--- .../features/infiniteLoader/useGridInfiniteLoader.tsx | 3 +-- packages/x-data-grid-pro/src/models/gridApiPro.ts | 3 +-- packages/x-data-grid/src/internals/index.ts | 2 ++ packages/x-data-grid/src/models/api/index.ts | 2 +- scripts/x-data-grid-premium.exports.json | 1 - scripts/x-data-grid-pro.exports.json | 1 - scripts/x-data-grid.exports.json | 1 - 9 files changed, 10 insertions(+), 15 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index cfd1113f822de..99d1462f8f7d4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -157,10 +157,10 @@ module.exports = { }, }, buildPackageRestrictedImports('@mui/x-charts', 'x-charts'), - buildPackageRestrictedImports('@mui/x-data-grid', 'grid/x-data-grid'), - buildPackageRestrictedImports('@mui/x-data-grid-pro', 'grid/x-data-grid-pro'), - buildPackageRestrictedImports('@mui/x-data-grid-premium', 'grid/x-data-grid-premium'), - buildPackageRestrictedImports('@mui/x-data-grid-generator', 'grid/x-data-grid-generator'), + buildPackageRestrictedImports('@mui/x-data-grid', 'x-data-grid'), + buildPackageRestrictedImports('@mui/x-data-grid-pro', 'x-data-grid-pro'), + buildPackageRestrictedImports('@mui/x-data-grid-premium', 'x-data-grid-premium'), + buildPackageRestrictedImports('@mui/x-data-grid-generator', 'x-data-grid-generator'), buildPackageRestrictedImports('@mui/x-pickers', 'x-pickers'), buildPackageRestrictedImports('@mui/x-pickers-pro', 'x-pickers-pro'), buildPackageRestrictedImports('@mui/x-license', 'x-license'), diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx index 16d4e3618500a..68833b01e116f 100644 --- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx +++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx @@ -25,11 +25,9 @@ import { gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector, isNavigationKey, -} from '@mui/x-data-grid/internals'; -import { shouldCellShowLeftBorder, shouldCellShowRightBorder, -} from '@mui/x-data-grid/utils/cellBorderUtils'; +} from '@mui/x-data-grid/internals'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; import { DataGridProProcessedProps } from '../../models/dataGridProProps'; import { GridHeaderFilterMenuContainer } from './GridHeaderFilterMenuContainer'; diff --git a/packages/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.tsx b/packages/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.tsx index 6b8372a7393aa..1558c773857ae 100644 --- a/packages/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.tsx @@ -6,10 +6,9 @@ import { useGridApiMethod, gridDimensionsSelector, } from '@mui/x-data-grid'; -import { useGridVisibleRows } from '@mui/x-data-grid/internals'; +import { useGridVisibleRows, GridInfiniteLoaderPrivateApi } from '@mui/x-data-grid/internals'; import useEventCallback from '@mui/utils/useEventCallback'; import { styled } from '@mui/system'; -import type { GridInfiniteLoaderPrivateApi } from '@mui/x-data-grid/models/api/gridInfiniteLoaderApi'; import { GridRowScrollEndParams } from '../../../models'; import { GridPrivateApiPro } from '../../../models/gridApiPro'; import { DataGridProProcessedProps } from '../../../models/dataGridProProps'; diff --git a/packages/x-data-grid-pro/src/models/gridApiPro.ts b/packages/x-data-grid-pro/src/models/gridApiPro.ts index d70437eeb15a2..33e5f884a0d42 100644 --- a/packages/x-data-grid-pro/src/models/gridApiPro.ts +++ b/packages/x-data-grid-pro/src/models/gridApiPro.ts @@ -4,8 +4,7 @@ import { GridRowMultiSelectionApi, GridRowProApi, } from '@mui/x-data-grid'; -import { GridPrivateOnlyApiCommon } from '@mui/x-data-grid/internals'; -import type { GridInfiniteLoaderPrivateApi } from '@mui/x-data-grid/models/api/gridInfiniteLoaderApi'; +import { GridPrivateOnlyApiCommon, GridInfiniteLoaderPrivateApi } from '@mui/x-data-grid/internals'; import { GridInitialStatePro, GridStatePro } from './gridStatePro'; import type { GridColumnPinningApi, diff --git a/packages/x-data-grid/src/internals/index.ts b/packages/x-data-grid/src/internals/index.ts index 1a61da047e6f3..1380dbf4d4c06 100644 --- a/packages/x-data-grid/src/internals/index.ts +++ b/packages/x-data-grid/src/internals/index.ts @@ -151,7 +151,9 @@ export * from '../utils/fastMemo'; export { buildWarning } from '../utils/warning'; export { exportAs } from '../utils/exportAs'; export * from '../utils/getPublicApiRef'; +export * from '../utils/cellBorderUtils'; export type { GridPrivateOnlyApiCommon } from '../models/api/gridApiCommon'; +export type { GridInfiniteLoaderPrivateApi } from '../models/api/gridInfiniteLoaderApi'; export { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext'; export * from '../hooks/utils'; diff --git a/packages/x-data-grid/src/models/api/index.ts b/packages/x-data-grid/src/models/api/index.ts index 709885eea44ad..16cae502d7ec8 100644 --- a/packages/x-data-grid/src/models/api/index.ts +++ b/packages/x-data-grid/src/models/api/index.ts @@ -18,7 +18,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'; diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index 227740915c9d6..b0cddf8620c36 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -598,7 +598,6 @@ { "name": "GridVirtualizationApi", "kind": "Interface" }, { "name": "gridVirtualizationColumnEnabledSelector", "kind": "Variable" }, { "name": "gridVirtualizationEnabledSelector", "kind": "Variable" }, - { "name": "GridVirtualizationPrivateApi", "kind": "Interface" }, { "name": "gridVirtualizationSelector", "kind": "Variable" }, { "name": "GridVirtualizationState", "kind": "TypeAlias" }, { "name": "GridVisibilityOffIcon", "kind": "Variable" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index f9e4d9888c0e0..1946f832da008 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -552,7 +552,6 @@ { "name": "GridVirtualizationApi", "kind": "Interface" }, { "name": "gridVirtualizationColumnEnabledSelector", "kind": "Variable" }, { "name": "gridVirtualizationEnabledSelector", "kind": "Variable" }, - { "name": "GridVirtualizationPrivateApi", "kind": "Interface" }, { "name": "gridVirtualizationSelector", "kind": "Variable" }, { "name": "GridVirtualizationState", "kind": "TypeAlias" }, { "name": "GridVisibilityOffIcon", "kind": "Variable" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index 5464d87a7253d..484adb49bc66c 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -511,7 +511,6 @@ { "name": "GridVirtualizationApi", "kind": "Interface" }, { "name": "gridVirtualizationColumnEnabledSelector", "kind": "Variable" }, { "name": "gridVirtualizationEnabledSelector", "kind": "Variable" }, - { "name": "GridVirtualizationPrivateApi", "kind": "Interface" }, { "name": "gridVirtualizationSelector", "kind": "Variable" }, { "name": "GridVirtualizationState", "kind": "TypeAlias" }, { "name": "GridVisibilityOffIcon", "kind": "Variable" }, From 534220383ea476cbaec6092c9d33f2843e40248e Mon Sep 17 00:00:00 2001 From: sai chand <60743144+sai6855@users.noreply.github.com> Date: Mon, 18 Mar 2024 23:25:02 +0530 Subject: [PATCH 04/20] [DataGrid] Fix cell value formatting on copy (#12357) Co-authored-by: Andrew Cherniavskyi --- .../cellSelection/useGridCellSelection.ts | 1 + .../features/clipboard/useGridClipboard.ts | 2 + .../export/serializers/csvSerializer.ts | 49 ++++++++++++++----- .../features/export/useGridCsvExport.tsx | 1 + packages/x-data-grid/src/models/gridExport.ts | 6 +++ 5 files changed, 48 insertions(+), 11 deletions(-) diff --git a/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts b/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts index ce473b32e794b..e407ed045a0a2 100644 --- a/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts +++ b/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts @@ -561,6 +561,7 @@ export const useGridCellSelection = ( cellData = serializeCellValue(cellParams, { delimiterCharacter: clipboardCopyCellDelimiter, ignoreValueFormatter, + shouldAppendQuotes: true, }); } else { cellData = ''; diff --git a/packages/x-data-grid/src/hooks/features/clipboard/useGridClipboard.ts b/packages/x-data-grid/src/hooks/features/clipboard/useGridClipboard.ts index 8180196fb05a3..ee308a38076da 100644 --- a/packages/x-data-grid/src/hooks/features/clipboard/useGridClipboard.ts +++ b/packages/x-data-grid/src/hooks/features/clipboard/useGridClipboard.ts @@ -97,6 +97,7 @@ export const useGridClipboard = ( includeHeaders: false, // TODO: make it configurable delimiter: clipboardCopyCellDelimiter, + shouldAppendQuotes: false, }); } else { const focusedCell = gridFocusCellSelector(apiRef); @@ -105,6 +106,7 @@ export const useGridClipboard = ( textToCopy = serializeCellValue(cellParams, { delimiterCharacter: clipboardCopyCellDelimiter, ignoreValueFormatter, + shouldAppendQuotes: false, }); } } diff --git a/packages/x-data-grid/src/hooks/features/export/serializers/csvSerializer.ts b/packages/x-data-grid/src/hooks/features/export/serializers/csvSerializer.ts index 8acd473d7e24d..88eea0e800fe6 100644 --- a/packages/x-data-grid/src/hooks/features/export/serializers/csvSerializer.ts +++ b/packages/x-data-grid/src/hooks/features/export/serializers/csvSerializer.ts @@ -5,11 +5,14 @@ import type { GridStateColDef } from '../../../../models/colDef/gridColDef'; import type { GridApiCommunity } from '../../../../models/api/gridApiCommunity'; import { buildWarning } from '../../../../utils/warning'; -function sanitizeCellValue(value: any, delimiterCharacter: string) { +function sanitizeCellValue(value: any, delimiterCharacter: string, shouldAppendQuotes: boolean) { if (typeof value === 'string') { // Make sure value containing delimiter or line break won't be split into multiple rows if ([delimiterCharacter, '\n', '\r', '"'].some((delimiter) => value.includes(delimiter))) { - return `"${value.replace(/"/g, '""')}"`; + if (shouldAppendQuotes) { + return `"${value.replace(/"/g, '""')}"`; + } + return `${value.replace(/"/g, '""')}`; } return value; @@ -20,9 +23,13 @@ function sanitizeCellValue(value: any, delimiterCharacter: string) { export const serializeCellValue = ( cellParams: GridCellParams, - options: { delimiterCharacter: string; ignoreValueFormatter: boolean }, + options: { + delimiterCharacter: string; + ignoreValueFormatter: boolean; + shouldAppendQuotes: boolean; + }, ) => { - const { delimiterCharacter, ignoreValueFormatter } = options; + const { delimiterCharacter, ignoreValueFormatter, shouldAppendQuotes } = options; let value: any; if (ignoreValueFormatter) { const columnType = cellParams.colDef.type; @@ -39,7 +46,7 @@ export const serializeCellValue = ( value = cellParams.formattedValue; } - return sanitizeCellValue(value, delimiterCharacter); + return sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes); }; const objectFormattedValueWarning = buildWarning([ @@ -49,7 +56,8 @@ const objectFormattedValueWarning = buildWarning([ type CSVRowOptions = { delimiterCharacter: string; - sanitizeCellValue?: (value: any, delimiterCharacter: string) => any; + sanitizeCellValue?: (value: any, delimiterCharacter: string, shouldAppendQuotes: boolean) => any; + shouldAppendQuotes: boolean; }; class CSVRow { options: CSVRowOptions; @@ -69,7 +77,11 @@ class CSVRow { if (value === null || value === undefined) { this.rowString += ''; } else if (typeof this.options.sanitizeCellValue === 'function') { - this.rowString += this.options.sanitizeCellValue(value, this.options.delimiterCharacter); + this.rowString += this.options.sanitizeCellValue( + value, + this.options.delimiterCharacter, + this.options.shouldAppendQuotes, + ); } else { this.rowString += value; } @@ -87,14 +99,16 @@ const serializeRow = ({ getCellParams, delimiterCharacter, ignoreValueFormatter, + shouldAppendQuotes, }: { id: GridRowId; columns: GridStateColDef[]; getCellParams: (id: GridRowId, field: string) => GridCellParams; delimiterCharacter: string; ignoreValueFormatter: boolean; + shouldAppendQuotes: boolean; }) => { - const row = new CSVRow({ delimiterCharacter }); + const row = new CSVRow({ delimiterCharacter, shouldAppendQuotes }); columns.forEach((column) => { const cellParams = getCellParams(id, column.field); @@ -103,7 +117,13 @@ const serializeRow = ({ objectFormattedValueWarning(); } } - row.addValue(serializeCellValue(cellParams, { delimiterCharacter, ignoreValueFormatter })); + row.addValue( + serializeCellValue(cellParams, { + delimiterCharacter, + ignoreValueFormatter, + shouldAppendQuotes, + }), + ); }); return row.getRowString(); @@ -117,6 +137,7 @@ interface BuildCSVOptions { includeColumnGroupsHeaders: NonNullable; ignoreValueFormatter: boolean; apiRef: React.MutableRefObject; + shouldAppendQuotes: boolean; } export function buildCSV(options: BuildCSVOptions): string { @@ -128,6 +149,7 @@ export function buildCSV(options: BuildCSVOptions): string { includeColumnGroupsHeaders, ignoreValueFormatter, apiRef, + shouldAppendQuotes, } = options; const CSVBody = rowIds @@ -139,6 +161,7 @@ export function buildCSV(options: BuildCSVOptions): string { getCellParams: apiRef.current.getCellParams, delimiterCharacter, ignoreValueFormatter, + shouldAppendQuotes, })}\r\n`, '', ) @@ -168,7 +191,11 @@ export function buildCSV(options: BuildCSVOptions): string { }, {}); for (let i = 0; i < maxColumnGroupsDepth; i += 1) { - const headerGroupRow = new CSVRow({ delimiterCharacter, sanitizeCellValue }); + const headerGroupRow = new CSVRow({ + delimiterCharacter, + sanitizeCellValue, + shouldAppendQuotes, + }); headerRows.push(headerGroupRow); filteredColumns.forEach((column) => { const columnGroupId = (columnGroupPathsLookup[column.field] || [])[i]; @@ -178,7 +205,7 @@ export function buildCSV(options: BuildCSVOptions): string { } } - const mainHeaderRow = new CSVRow({ delimiterCharacter, sanitizeCellValue }); + const mainHeaderRow = new CSVRow({ delimiterCharacter, sanitizeCellValue, shouldAppendQuotes }); filteredColumns.forEach((column) => { mainHeaderRow.addValue(column.headerName || column.field); }); diff --git a/packages/x-data-grid/src/hooks/features/export/useGridCsvExport.tsx b/packages/x-data-grid/src/hooks/features/export/useGridCsvExport.tsx index 8f5291a365df6..cb6f4d9d7d3fe 100644 --- a/packages/x-data-grid/src/hooks/features/export/useGridCsvExport.tsx +++ b/packages/x-data-grid/src/hooks/features/export/useGridCsvExport.tsx @@ -53,6 +53,7 @@ export const useGridCsvExport = ( includeColumnGroupsHeaders: options.includeColumnGroupsHeaders ?? true, ignoreValueFormatter, apiRef, + shouldAppendQuotes: options.shouldAppendQuotes ?? true, }); }, [logger, apiRef, ignoreValueFormatter], diff --git a/packages/x-data-grid/src/models/gridExport.ts b/packages/x-data-grid/src/models/gridExport.ts index 46c95e2a8062c..1b0366be669a5 100644 --- a/packages/x-data-grid/src/models/gridExport.ts +++ b/packages/x-data-grid/src/models/gridExport.ts @@ -95,6 +95,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; } /** From a764d21da83f6aff970f047233fe0875fa27f985 Mon Sep 17 00:00:00 2001 From: Jeevan Kumar Date: Tue, 19 Mar 2024 01:22:11 +0530 Subject: [PATCH 05/20] Fix checkbox selection is keeping selection when filtering (#11751) Co-authored-by: Andrew Cherniavskyi --- .../rowSelection/useGridRowSelection.ts | 8 ++- .../src/tests/rowSelection.DataGrid.test.tsx | 52 ++++++++++++++++++- 2 files changed, 57 insertions(+), 3 deletions(-) diff --git a/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts b/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts index 4938f01d3a2d7..7362b7a848bed 100644 --- a/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts +++ b/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts @@ -18,7 +18,10 @@ import { } from './gridRowSelectionSelector'; import { gridPaginatedVisibleSortedGridRowIdsSelector } from '../pagination'; import { gridFocusCellSelector } from '../focus/gridFocusStateSelector'; -import { gridExpandedSortedRowIdsSelector } from '../filter/gridFilterSelector'; +import { + gridExpandedSortedRowIdsSelector, + gridFilterModelSelector, +} from '../filter/gridFilterSelector'; import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from '../../../colDef'; import { GridCellModes } from '../../../models/gridEditRowModel'; import { isKeyboardEvent, isNavigationKey } from '../../../utils/keyboardUtils'; @@ -445,7 +448,8 @@ export const useGridRowSelection = ( ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef) : gridExpandedSortedRowIdsSelector(apiRef); - apiRef.current.selectRows(rowsToBeSelected, params.value); + const filterModel = gridFilterModelSelector(apiRef); + apiRef.current.selectRows(rowsToBeSelected, params.value, filterModel?.items.length > 0); }, [apiRef, props.checkboxSelectionVisibleOnly, props.pagination], ); diff --git a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx index ea693c8a4d585..4765a170bd59b 100644 --- a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx @@ -1,7 +1,14 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { createRenderer, fireEvent, screen, act, userEvent } from '@mui-internal/test-utils'; +import { + createRenderer, + fireEvent, + screen, + act, + userEvent, + waitFor, +} from '@mui-internal/test-utils'; import { DataGrid, DataGridProps, @@ -10,6 +17,7 @@ import { GridEditModes, useGridApiRef, GridApi, + GridPreferencePanelsValue, } from '@mui/x-data-grid'; import { getCell, @@ -18,6 +26,7 @@ import { getColumnHeaderCell, getColumnHeadersTextContent, getActiveCell, + grid, } from 'test/utils/helperFn'; import { getBasicGridData } from '@mui/x-data-grid-generator'; @@ -354,6 +363,47 @@ describe(' - Row selection', () => { expect(input1.checked).to.equal(false); expect(input2.checked).to.equal(true); }); + + it('should only select filtered items when "select all" is toggled after applying a filter', async () => { + render( + , + ); + const selectAllCheckbox = screen.getByRole('checkbox', { name: 'Select all rows' }); + fireEvent.click(selectAllCheckbox); + await waitFor(() => { + expect(getSelectedRowIds()).to.deep.equal([0, 1, 2, 3]); + expect(grid('selectedRowCount')?.textContent).to.equal('4 rows selected'); + }); + + fireEvent.change(screen.getByRole('spinbutton', { name: 'Value' }), { + target: { value: 1 }, + }); + await waitFor(() => { + // Previous selection remains, but only one row is visible + expect(getSelectedRowIds()).to.deep.equal([1]); + expect(grid('selectedRowCount')?.textContent).to.equal('4 rows selected'); + }); + + fireEvent.click(selectAllCheckbox); // Unselect all + await waitFor(() => { + expect(getSelectedRowIds()).to.deep.equal([]); + expect(grid('selectedRowCount')).to.equal(null); + }); + + fireEvent.click(selectAllCheckbox); // Select all filtered rows + await waitFor(() => { + expect(getSelectedRowIds()).to.deep.equal([1]); + expect(grid('selectedRowCount')?.textContent).to.equal('1 row selected'); + }); + }); }); describe('prop: checkboxSelection = true (multi selection), with keyboard events', () => { From 5e1718e931a4673d947468cbba1125ed0a663987 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Rodolfo=20Freitas?= Date: Tue, 19 Mar 2024 10:32:42 +0100 Subject: [PATCH 06/20] [license] Fix grammar on expired license error message (#12460) --- packages/x-license/src/utils/licenseErrorMessageUtils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/x-license/src/utils/licenseErrorMessageUtils.ts b/packages/x-license/src/utils/licenseErrorMessageUtils.ts index 6ffe358e7b439..9924da8404b51 100644 --- a/packages/x-license/src/utils/licenseErrorMessageUtils.ts +++ b/packages/x-license/src/utils/licenseErrorMessageUtils.ts @@ -71,7 +71,7 @@ export function showExpiredAnnualGraceLicenseKeyError({ showError([ 'MUI X: Expired license key.', '', - `Your annual license key to use MUI X ${plan}'s on non-production environments is expired. If you are seeing this development console message, you might be close to breach the license terms by making direct or indirect changes to the frontend of an app that render a MUI X ${plan} component (more details in https://mui.com/r/x-license-annual).`, + `Your annual license key to use MUI X ${plan} in non-production environments has expired. If you are seeing this development console message, you might be close to breach the license terms by making direct or indirect changes to the frontend of an app that render a MUI X ${plan} component (more details in https://mui.com/r/x-license-annual).`, '', 'To solve the problem you can either:', '', @@ -99,7 +99,7 @@ export function showExpiredAnnualLicenseKeyError({ [ 'MUI X: Expired license key.', '', - `Your annual license key to use MUI X ${plan}'s on non-production environments is expired. If you are seeing this development console message, you might be close to breach the license terms by making direct or indirect changes to the frontend of an app that render a MUI X ${plan} component (more details in https://mui.com/r/x-license-annual).`, + `Your annual license key to use MUI X ${plan} in non-production environments has expired. If you are seeing this development console message, you might be close to breach the license terms by making direct or indirect changes to the frontend of an app that render a MUI X ${plan} component (more details in https://mui.com/r/x-license-annual).`, '', 'To solve the problem you can either:', '', From 1eec2ea8e45818d7788e060771f65c6fc8a7c376 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Tue, 19 Mar 2024 11:35:24 +0100 Subject: [PATCH 07/20] [core] Lower the frequency of no-response action runs (#12491) --- .github/workflows/no-response.yml | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/.github/workflows/no-response.yml b/.github/workflows/no-response.yml index cab433e1444d4..1c97b2f528c67 100644 --- a/.github/workflows/no-response.yml +++ b/.github/workflows/no-response.yml @@ -8,8 +8,10 @@ on: issue_comment: types: [created] schedule: - # Schedule for five minutes after the hour, every hour - - cron: '5 * * * *' + # These runs in our repos are spread evenly throughout the day to avoid hitting rate limits. + # If you change this schedule, consider changing the remaining repositories as well. + # Runs at 3 am, 3 pm + - cron: '0 3,15 * * *' permissions: {} From eeb960372fa352175dff27bcd9d2185c1690fd5c Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Tue, 19 Mar 2024 13:49:08 +0100 Subject: [PATCH 08/20] [TreeView] Set focus on the focused Tree Item instead of the Tree View (#12226) --- .../migration-tree-view-v6.md | 32 + .../SimpleTreeView/SimpleTreeView.test.tsx | 273 +++--- .../src/TreeItem/TreeItem.test.tsx | 832 ++++++++---------- .../x-tree-view/src/TreeItem/TreeItem.tsx | 23 +- .../useTreeViewExpansion.ts | 2 +- .../useTreeViewExpansion.types.ts | 2 +- .../useTreeViewFocus/useTreeViewFocus.ts | 105 ++- .../useTreeViewFocus.types.ts | 9 +- .../useTreeViewKeyboardNavigation.ts | 334 ++++--- .../useTreeViewKeyboardNavigation.types.ts | 6 + .../useTreeViewNodes/useTreeViewNodes.ts | 13 +- .../useTreeViewSelection.ts | 4 +- .../useTreeViewSelection.types.ts | 4 +- .../src/internals/useTreeView/useTreeView.ts | 1 - .../x-tree-view/src/internals/utils/utils.ts | 1 + .../src/useTreeItem2/useTreeItem2.ts | 36 +- .../src/useTreeItem2/useTreeItem2.types.ts | 6 +- 17 files changed, 827 insertions(+), 856 deletions(-) diff --git a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md index 389ee9b382188..bd4557049c723 100644 --- a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md +++ b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md @@ -402,6 +402,38 @@ you can use the new `onItemSelectionToggle` prop which is called whenever an ite ::: +### Focus the Tree Item instead of the Tree View + +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( + + One + Two + + ); +- const tree = getByRole('tree'); ++ const treeItem = getByRole('treeitem', { name: 'One' }); + act(() => { +- tree.focus(); ++ treeItem.focus(); + }); +- fireEvent.keyDown(tree, { key: 'ArrowDown' }); ++ fireEvent.keyDown(treeItem, { key: 'ArrowDown' }); + }) +``` + ### ✅ Use `useTreeItemState` instead of `useTreeItem` The `useTreeItem` hook has been renamed `useTreeItemState`. diff --git a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.test.tsx b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.test.tsx index 69e2f4b8bccab..ee134b0e87a23 100644 --- a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.test.tsx +++ b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.test.tsx @@ -79,16 +79,6 @@ describe('', () => { expect(screen.getByTestId('item-2')).to.have.attribute('aria-selected', 'true'); }); - it('should not crash on keydown on an empty tree', () => { - render(); - - act(() => { - screen.getByRole('tree').focus(); - }); - - fireEvent.keyDown(screen.getByRole('tree'), { key: ' ' }); - }); - it('should not crash when unmounting with duplicate ids', () => { // eslint-disable-next-line @typescript-eslint/no-unused-vars function CustomTreeItem(props: any) { @@ -128,76 +118,47 @@ describe('', () => { }); it('should call onKeyDown when a key is pressed', () => { - const handleKeyDown = spy(); + const handleTreeViewKeyDown = spy(); + const handleTreeItemKeyDown = spy(); - const { getByRole } = render( - - + const { getByTestId } = render( + + , ); + + const itemOne = getByTestId('one'); act(() => { - getByRole('tree').focus(); + itemOne.focus(); }); - fireEvent.keyDown(getByRole('tree'), { key: 'Enter' }); - fireEvent.keyDown(getByRole('tree'), { key: 'A' }); - fireEvent.keyDown(getByRole('tree'), { key: ']' }); + fireEvent.keyDown(itemOne, { key: 'Enter' }); + fireEvent.keyDown(itemOne, { key: 'A' }); + fireEvent.keyDown(itemOne, { key: ']' }); - expect(handleKeyDown.callCount).to.equal(3); + expect(handleTreeViewKeyDown.callCount).to.equal(3); + expect(handleTreeItemKeyDown.callCount).to.equal(3); }); it('should select item when Enter key is pressed ', () => { const handleKeyDown = spy(); - const { getByRole, getByTestId } = render( + const { getByTestId } = render( - + , ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); expect(getByTestId('one')).not.to.have.attribute('aria-selected'); - fireEvent.keyDown(getByRole('tree'), { key: 'Enter' }); + fireEvent.keyDown(getByTestId('one'), { key: 'Enter' }); expect(getByTestId('one')).to.have.attribute('aria-selected'); }); - it('should call onFocus when tree is focused', () => { - const handleFocus = spy(); - const { getByRole } = render( - - - , - ); - - act(() => { - getByRole('tree').focus(); - }); - - expect(handleFocus.callCount).to.equal(1); - }); - - it('should call onBlur when tree is blurred', () => { - const handleBlur = spy(); - const { getByRole } = render( - - - , - ); - - act(() => { - getByRole('tree').focus(); - }); - act(() => { - getByRole('tree').blur(); - }); - - expect(handleBlur.callCount).to.equal(1); - }); - it('should be able to be controlled with the expandedItems prop', () => { function MyComponent() { const [expandedState, setExpandedState] = React.useState([]); @@ -206,20 +167,20 @@ describe('', () => { }; return ( - - + + ); } - const { getByRole, getByTestId, getByText } = render(); + const { getByTestId, getByText } = render(); expect(getByTestId('one')).to.have.attribute('aria-expanded', 'false'); fireEvent.click(getByText('one')); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); @@ -228,7 +189,7 @@ describe('', () => { expect(getByTestId('one')).to.have.attribute('aria-expanded', 'false'); - fireEvent.keyDown(getByRole('tree'), { key: '*' }); + fireEvent.keyDown(getByTestId('one'), { key: '*' }); expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); }); @@ -303,39 +264,35 @@ describe('', () => { return ( { + defaultExpandedItems={['one']} + onItemFocus={() => { setState(Math.random); }} - id="tree" > - - + + ); } - const { getByRole, getByText, getByTestId } = render(); - - fireEvent.click(getByText('one')); - // Clicks would normally focus tree - act(() => { - getByRole('tree').focus(); - }); + const { getByTestId } = render(); - expect(getByTestId('one')).toHaveVirtualFocus(); + fireEvent.focus(getByTestId('one')); + fireEvent.focus(getByTestId('one')); + expect(getByTestId('one')).toHaveFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown' }); + fireEvent.keyDown(getByTestId('one'), { key: 'ArrowDown' }); - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('two')).toHaveFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp' }); + fireEvent.keyDown(getByTestId('two'), { key: 'ArrowUp' }); - expect(getByTestId('one')).toHaveVirtualFocus(); + expect(getByTestId('one')).toHaveFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown' }); + fireEvent.keyDown(getByTestId('one'), { key: 'ArrowDown' }); - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('two')).toHaveFocus(); }); it('should support conditional rendered tree items', () => { @@ -360,49 +317,48 @@ describe('', () => { }); it('should work in a portal', () => { - const { getByRole, getByTestId } = render( + const { getByTestId } = render( - - - - - + + + + + , ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown' }); + fireEvent.keyDown(getByTestId('one'), { key: 'ArrowDown' }); - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('two')).toHaveFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown' }); + fireEvent.keyDown(getByTestId('two'), { key: 'ArrowDown' }); - expect(getByTestId('three')).toHaveVirtualFocus(); + expect(getByTestId('three')).toHaveFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown' }); + fireEvent.keyDown(getByTestId('three'), { key: 'ArrowDown' }); - expect(getByTestId('four')).toHaveVirtualFocus(); + expect(getByTestId('four')).toHaveFocus(); }); describe('onItemFocus', () => { - it('should be called when item is focused', () => { - const focusSpy = spy(); - const { getByRole } = render( - - + it('should be called when an item is focused', () => { + const onFocus = spy(); + const { getByTestId } = render( + + , ); - // First item receives focus when tree focused act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - expect(focusSpy.callCount).to.equal(1); - expect(focusSpy.args[0][1]).to.equal('1'); + expect(onFocus.callCount).to.equal(1); + expect(onFocus.args[0][1]).to.equal('one'); }); }); @@ -443,95 +399,70 @@ describe('', () => { }); describe('useTreeViewFocus', () => { - it('should focus the selected item when the tree is focused', () => { - const onItemFocus = spy(); - - const { getByRole } = render( - - - + it('should set tabIndex={0} on the selected item', () => { + const { getByTestId } = render( + + + , ); - act(() => { - getByRole('tree').focus(); - }); - - expect(onItemFocus.lastCall.lastArg).to.equal('2'); + expect(getByTestId('one').tabIndex).to.equal(0); + expect(getByTestId('two').tabIndex).to.equal(-1); }); - it('should focus the selected item when the tree is focused (multi select)', () => { - const onItemFocus = spy(); - - const { getByRole } = render( - - - + it('should set tabIndex={0} on the selected item (multi select)', () => { + const { getByTestId } = render( + + + , ); - act(() => { - getByRole('tree').focus(); - }); - - expect(onItemFocus.lastCall.lastArg).to.equal('2'); + expect(getByTestId('one').tabIndex).to.equal(0); + expect(getByTestId('two').tabIndex).to.equal(-1); }); - it('should focus the first visible selected item when the tree is focused (multi select)', () => { - const onItemFocus = spy(); - - const { getByRole } = render( - - - + it('should set tabIndex={0} on the first visible selected item (multi select)', () => { + const { getByTestId } = render( + + + - + , ); - act(() => { - getByRole('tree').focus(); - }); - - expect(onItemFocus.lastCall.lastArg).to.equal('2'); + expect(getByTestId('one').tabIndex).to.equal(-1); + expect(getByTestId('three').tabIndex).to.equal(0); }); - it('should focus the first item if the selected item is not visible', () => { - const onItemFocus = spy(); - - const { getByRole } = render( - - - + it('should set tabIndex={0} on the first item if the selected item is not visible', () => { + const { getByTestId } = render( + + + - + , ); - act(() => { - getByRole('tree').focus(); - }); - - expect(onItemFocus.lastCall.lastArg).to.equal('1'); + expect(getByTestId('one').tabIndex).to.equal(0); + expect(getByTestId('three').tabIndex).to.equal(-1); }); - it('should focus the first item if no selected item is visible (multi select)', () => { - const onItemFocus = spy(); - - const { getByRole } = render( - - - + it('should set tabIndex={0} on the first item if no selected item is visible (multi select)', () => { + const { getByTestId } = render( + + + - + , ); - act(() => { - getByRole('tree').focus(); - }); - - expect(onItemFocus.lastCall.lastArg).to.equal('1'); + expect(getByTestId('one').tabIndex).to.equal(0); + expect(getByTestId('three').tabIndex).to.equal(-1); }); it('should focus specific item using `apiRef`', () => { @@ -542,22 +473,22 @@ describe('', () => { apiRef = useTreeViewApiRef(); return ( - - + + - + ); } - const { getByRole } = render(); + const { getByTestId } = render(); act(() => { - apiRef.current?.focusItem({} as React.SyntheticEvent, '2'); + apiRef.current?.focusItem({} as React.SyntheticEvent, 'three'); }); - expect(getByRole('tree')).toHaveFocus(); - expect(onItemFocus.lastCall.lastArg).to.equal('2'); + expect(getByTestId('three')).toHaveFocus(); + expect(onItemFocus.lastCall.lastArg).to.equal('three'); }); it('should not focus item if parent is collapsed', () => { diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx b/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx index 87728e407c48a..92ee6764f4ed8 100644 --- a/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx +++ b/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { expect } from 'chai'; import PropTypes from 'prop-types'; import { spy } from 'sinon'; -import { act, createEvent, createRenderer, fireEvent, screen } from '@mui-internal/test-utils'; +import { act, createEvent, createRenderer, fireEvent } from '@mui-internal/test-utils'; import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; import { SimpleTreeViewPlugins } from '@mui/x-tree-view/SimpleTreeView/SimpleTreeView.plugins'; import { TreeItem, treeItemClasses as classes } from '@mui/x-tree-view/TreeItem'; @@ -19,6 +19,7 @@ const TEST_TREE_VIEW_CONTEXT_VALUE: TreeViewContextValue isNodeDisabled: (itemId: string | null): itemId is string => !!itemId, getTreeItemId: () => '', mapFirstCharFromJSX: () => () => {}, + canItemBeTabbed: () => false, } as any, publicAPI: { focusItem: () => {}, @@ -251,14 +252,14 @@ describe('', () => { }); it('should be able to use a custom id', () => { - const { getByRole } = render( + const { getByRole, getByTestId } = render( - + , ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); expect(getByRole('tree')).to.have.attribute('aria-activedescendant', 'customId'); @@ -401,10 +402,10 @@ describe('', () => { }); }); - describe('when a tree receives focus', () => { + describe('when an item receives focus', () => { it('should focus the first node if none of the nodes are selected before the tree receives focus', () => { - const { getByRole, getByTestId, queryAllByRole } = render( - + const { getByTestId, queryAllByRole } = render( + @@ -414,51 +415,33 @@ describe('', () => { expect(queryAllByRole('treeitem', { selected: true })).to.have.length(0); act(() => { - getByRole('tree').focus(); - }); - - expect(getByTestId('one')).toHaveVirtualFocus(); - }); - - it('should focus the selected node if a node is selected before the tree receives focus', () => { - const { getByTestId, getByRole } = render( - - - - - , - ); - - expect(getByTestId('two')).to.have.attribute('aria-selected', 'true'); - - act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('one')).toHaveFocus(); }); it('should work with programmatic focus', () => { - const { getByRole, getByTestId } = render( + const { getByTestId } = render( - - + + , ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - expect(getByTestId('one')).toHaveVirtualFocus(); + expect(getByTestId('one')).toHaveFocus(); act(() => { getByTestId('two').focus(); }); - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('two')).toHaveFocus(); }); - it('should work when focused item is removed', () => { + it('should work when focused node is removed', () => { let removeActiveItem; // a TreeItem which can remove from the tree by calling `removeActiveItem` function ControlledTreeItem(props) { @@ -471,25 +454,19 @@ describe('', () => { return ; } - const { getByRole, getByTestId, getByText } = render( - - - - + const { getByTestId } = render( + + + + , ); - const tree = getByRole('tree'); act(() => { - tree.focus(); + getByTestId('three').focus(); }); - - expect(getByTestId('parent')).toHaveVirtualFocus(); - - fireEvent.click(getByText('two')); - - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('three')).toHaveFocus(); // generic action that removes an item. // Could be promise based, or timeout, or another user interaction @@ -497,31 +474,15 @@ describe('', () => { removeActiveItem(); }); - expect(getByTestId('parent')).toHaveVirtualFocus(); - }); - - it('should focus on tree with scroll prevented', () => { - const { getByRole, getByTestId } = render( - - - - , - ); - const focus = spy(getByRole('tree'), 'focus'); - - act(() => { - getByTestId('one').focus(); - }); - - expect(focus.calledOnceWithExactly({ preventScroll: true })).to.equals(true); + expect(getByTestId('one')).toHaveFocus(); }); }); describe('Navigation', () => { describe('right arrow interaction', () => { it('should open the node and not move the focus if focus is on a closed node', () => { - const { getByRole, getByTestId } = render( - + const { getByTestId } = render( + @@ -531,17 +492,17 @@ describe('', () => { expect(getByTestId('one')).to.have.attribute('aria-expanded', 'false'); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowRight' }); + fireEvent.keyDown(getByTestId('one'), { key: 'ArrowRight' }); expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); - expect(getByTestId('one')).toHaveVirtualFocus(); + expect(getByTestId('one')).toHaveFocus(); }); - it('should move focus to the first child if focus is on an open item', () => { - const { getByTestId, getByRole } = render( - + it('should move focus to the first child if focus is on an open node', () => { + const { getByTestId } = render( + @@ -551,87 +512,81 @@ describe('', () => { expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowRight' }); + fireEvent.keyDown(getByTestId('one'), { key: 'ArrowRight' }); - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('two')).toHaveFocus(); }); it('should do nothing if focus is on an end item', () => { - const { getByRole, getByTestId, getByText } = render( - + const { getByTestId } = render( + , ); - fireEvent.click(getByText('two')); act(() => { - getByRole('tree').focus(); + getByTestId('two').focus(); }); - expect(getByTestId('two')).toHaveVirtualFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowRight' }); + expect(getByTestId('two')).toHaveFocus(); + fireEvent.keyDown(getByTestId('two'), { key: 'ArrowRight' }); - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('two')).toHaveFocus(); }); }); describe('left arrow interaction', () => { - it('should close the node if focus is on an open node', () => { - render( - + it('should close the item if focus is on an open item', () => { + const { getByTestId, getByText } = render( + , ); - const [firstItem] = screen.getAllByRole('treeitem'); - const firstItemLabel = screen.getByText('one'); - - fireEvent.click(firstItemLabel); - - expect(firstItem).to.have.attribute('aria-expanded', 'true'); + fireEvent.click(getByText('one')); act(() => { - screen.getByRole('tree').focus(); + getByTestId('one').focus(); }); - fireEvent.keyDown(screen.getByRole('tree'), { key: 'ArrowLeft' }); - expect(firstItem).to.have.attribute('aria-expanded', 'false'); - expect(screen.getByTestId('one')).toHaveVirtualFocus(); + expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); + + fireEvent.keyDown(getByTestId('one'), { key: 'ArrowLeft' }); + + expect(getByTestId('one')).to.have.attribute('aria-expanded', 'false'); + expect(getByTestId('one')).toHaveFocus(); }); - it("should move focus to the item's parent item if focus is on a child that is an end node", () => { - render( - + it("should move focus to the item's parent item if focus is on a child node that is an end item", () => { + const { getByTestId } = render( + , ); - const [firstItem] = screen.getAllByRole('treeitem'); - const secondItemLabel = screen.getByText('two'); - expect(firstItem).to.have.attribute('aria-expanded', 'true'); + expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); - fireEvent.click(secondItemLabel); act(() => { - screen.getByRole('tree').focus(); + getByTestId('two').focus(); }); - expect(screen.getByTestId('two')).toHaveVirtualFocus(); - fireEvent.keyDown(screen.getByRole('tree'), { key: 'ArrowLeft' }); + expect(getByTestId('two')).toHaveFocus(); + fireEvent.keyDown(getByTestId('two'), { key: 'ArrowLeft' }); - expect(screen.getByTestId('one')).toHaveVirtualFocus(); - expect(firstItem).to.have.attribute('aria-expanded', 'true'); + expect(getByTestId('one')).toHaveFocus(); + expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); }); it("should move focus to the node's parent node if focus is on a child node that is closed", () => { - render( - + const { getByTestId } = render( + @@ -640,25 +595,23 @@ describe('', () => { , ); - fireEvent.click(screen.getByText('one')); - - expect(screen.getByTestId('one')).to.have.attribute('aria-expanded', 'true'); + expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); act(() => { - screen.getByTestId('two').focus(); + getByTestId('two').focus(); }); - expect(screen.getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('two')).toHaveFocus(); - fireEvent.keyDown(screen.getByRole('tree'), { key: 'ArrowLeft' }); + fireEvent.keyDown(getByTestId('two'), { key: 'ArrowLeft' }); - expect(screen.getByTestId('one')).toHaveVirtualFocus(); - expect(screen.getByTestId('one')).to.have.attribute('aria-expanded', 'true'); + expect(getByTestId('one')).toHaveFocus(); + expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); }); it('should do nothing if focus is on a root node that is closed', () => { - const { getByRole, getByTestId } = render( - + const { getByTestId } = render( + @@ -666,50 +619,50 @@ describe('', () => { ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); expect(getByTestId('one')).to.have.attribute('aria-expanded', 'false'); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowLeft' }); - expect(getByTestId('one')).toHaveVirtualFocus(); + fireEvent.keyDown(getByTestId('one'), { key: 'ArrowLeft' }); + expect(getByTestId('one')).toHaveFocus(); }); it('should do nothing if focus is on a root node that is an end node', () => { - const { getByRole, getByTestId } = render( - + const { getByTestId } = render( + , ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowLeft' }); + fireEvent.keyDown(getByTestId('one'), { key: 'ArrowLeft' }); - expect(getByTestId('one')).toHaveVirtualFocus(); + expect(getByTestId('one')).toHaveFocus(); }); }); describe('down arrow interaction', () => { it('moves focus to a sibling node', () => { - const { getByRole, getByTestId } = render( - + const { getByTestId } = render( + , ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown' }); + fireEvent.keyDown(getByTestId('one'), { key: 'ArrowDown' }); - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('two')).toHaveFocus(); }); it('moves focus to a child item', () => { - const { getByRole, getByTestId } = render( - + const { getByTestId } = render( + @@ -719,11 +672,11 @@ describe('', () => { expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown' }); + fireEvent.keyDown(getByTestId('one'), { key: 'ArrowDown' }); - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('two')).toHaveFocus(); }); it('moves focus to a child item works with a dynamic tree', () => { @@ -739,7 +692,7 @@ describe('', () => { > Toggle Hide - + {!hide && ( @@ -751,7 +704,7 @@ describe('', () => { ); } - const { getByRole, queryByTestId, getByTestId, getByText } = render(); + const { queryByTestId, getByTestId, getByText } = render(); expect(getByTestId('one')).not.to.equal(null); fireEvent.click(getByText('Toggle Hide')); @@ -760,16 +713,16 @@ describe('', () => { expect(getByTestId('one')).not.to.equal(null); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown' }); + fireEvent.keyDown(getByTestId('one'), { key: 'ArrowDown' }); - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('two')).toHaveFocus(); }); it("moves focus to a parent's sibling", () => { - const { getByRole, getByTestId, getByText } = render( - + const { getByTestId } = render( + @@ -779,43 +732,41 @@ describe('', () => { expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); - fireEvent.click(getByText('two')); act(() => { - getByRole('tree').focus(); + getByTestId('two').focus(); }); - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('two')).toHaveFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown' }); + fireEvent.keyDown(getByTestId('two'), { key: 'ArrowDown' }); - expect(getByTestId('three')).toHaveVirtualFocus(); + expect(getByTestId('three')).toHaveFocus(); }); }); describe('up arrow interaction', () => { it('moves focus to a sibling node', () => { - const { getByRole, getByTestId, getByText } = render( - + const { getByTestId } = render( + , ); - fireEvent.click(getByText('two')); act(() => { - getByRole('tree').focus(); + getByTestId('two').focus(); }); - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('two')).toHaveFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp' }); + fireEvent.keyDown(getByTestId('two'), { key: 'ArrowUp' }); - expect(getByTestId('one')).toHaveVirtualFocus(); + expect(getByTestId('one')).toHaveFocus(); }); it('moves focus to a parent', () => { - const { getByRole, getByTestId, getByText } = render( - + const { getByTestId } = render( + @@ -824,21 +775,20 @@ describe('', () => { expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); - fireEvent.click(getByText('two')); act(() => { - getByRole('tree').focus(); + getByTestId('two').focus(); }); - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('two')).toHaveFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp' }); + fireEvent.keyDown(getByTestId('two'), { key: 'ArrowUp' }); - expect(getByTestId('one')).toHaveVirtualFocus(); + expect(getByTestId('one')).toHaveFocus(); }); it("moves focus to a sibling's child", () => { - const { getByRole, getByTestId, getByText } = render( - + const { getByTestId } = render( + @@ -848,23 +798,22 @@ describe('', () => { expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); - fireEvent.click(getByText('three')); act(() => { - getByRole('tree').focus(); + getByTestId('three').focus(); }); - expect(getByTestId('three')).toHaveVirtualFocus(); + expect(getByTestId('three')).toHaveFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp' }); + fireEvent.keyDown(getByTestId('three'), { key: 'ArrowUp' }); - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('two')).toHaveFocus(); }); }); describe('home key interaction', () => { it('moves focus to the first node in the tree', () => { - const { getByRole, getByTestId, getByText } = render( - + const { getByTestId } = render( + @@ -872,23 +821,22 @@ describe('', () => { , ); - fireEvent.click(getByText('four')); act(() => { - getByRole('tree').focus(); + getByTestId('four').focus(); }); - expect(getByTestId('four')).toHaveVirtualFocus(); + expect(getByTestId('four')).toHaveFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 'Home' }); + fireEvent.keyDown(getByTestId('four'), { key: 'Home' }); - expect(getByTestId('one')).toHaveVirtualFocus(); + expect(getByTestId('one')).toHaveFocus(); }); }); describe('end key interaction', () => { it('moves focus to the last node in the tree without expanded items', () => { - const { getByRole, getByTestId } = render( - + const { getByTestId } = render( + @@ -897,19 +845,19 @@ describe('', () => { ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - expect(getByTestId('one')).toHaveVirtualFocus(); + expect(getByTestId('one')).toHaveFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 'End' }); + fireEvent.keyDown(getByTestId('one'), { key: 'End' }); - expect(getByTestId('four')).toHaveVirtualFocus(); + expect(getByTestId('four')).toHaveFocus(); }); - it('moves focus to the last item in the tree with expanded items', () => { - const { getByRole, getByTestId } = render( - + it('moves focus to the last node in the tree with expanded items', () => { + const { getByTestId } = render( + @@ -922,21 +870,21 @@ describe('', () => { ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - expect(getByTestId('one')).toHaveVirtualFocus(); + expect(getByTestId('one')).toHaveFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 'End' }); + fireEvent.keyDown(getByTestId('one'), { key: 'End' }); - expect(getByTestId('six')).toHaveVirtualFocus(); + expect(getByTestId('six')).toHaveFocus(); }); }); describe('type-ahead functionality', () => { it('moves focus to the next node with a name that starts with the typed character', () => { - const { getByRole, getByTestId } = render( - + const { getByTestId } = render( + two} data-testid="two" /> @@ -945,27 +893,27 @@ describe('', () => { ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - expect(getByTestId('one')).toHaveVirtualFocus(); + expect(getByTestId('one')).toHaveFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 't' }); + fireEvent.keyDown(getByTestId('one'), { key: 't' }); - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('two')).toHaveFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 'f' }); + fireEvent.keyDown(getByTestId('two'), { key: 'f' }); - expect(getByTestId('four')).toHaveVirtualFocus(); + expect(getByTestId('four')).toHaveFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 'o' }); + fireEvent.keyDown(getByTestId('four'), { key: 'o' }); - expect(getByTestId('one')).toHaveVirtualFocus(); + expect(getByTestId('one')).toHaveFocus(); }); it('moves focus to the next node with the same starting character', () => { - const { getByRole, getByTestId } = render( - + const { getByTestId } = render( + @@ -974,51 +922,51 @@ describe('', () => { ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - expect(getByTestId('one')).toHaveVirtualFocus(); + expect(getByTestId('one')).toHaveFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 't' }); + fireEvent.keyDown(getByTestId('one'), { key: 't' }); - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('two')).toHaveFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 't' }); + fireEvent.keyDown(getByTestId('two'), { key: 't' }); - expect(getByTestId('three')).toHaveVirtualFocus(); + expect(getByTestId('three')).toHaveFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 't' }); + fireEvent.keyDown(getByTestId('three'), { key: 't' }); - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('two')).toHaveFocus(); }); it('should not move focus when pressing a modifier key + letter', () => { - const { getByRole, getByTestId } = render( - - - - - + const { getByTestId } = render( + + + + + , ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - expect(getByTestId('apple')).toHaveVirtualFocus(); + expect(getByTestId('one')).toHaveFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 'v', ctrlKey: true }); + fireEvent.keyDown(getByTestId('one'), { key: 'f', ctrlKey: true }); - expect(getByTestId('apple')).toHaveVirtualFocus(); + expect(getByTestId('one')).toHaveFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 'v', metaKey: true }); + fireEvent.keyDown(getByTestId('one'), { key: 'f', metaKey: true }); - expect(getByTestId('apple')).toHaveVirtualFocus(); + expect(getByTestId('one')).toHaveFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 'v', shiftKey: true }); + fireEvent.keyDown(getByTestId('one'), { key: 'f', shiftKey: true }); - expect(getByTestId('apple')).toHaveVirtualFocus(); + expect(getByTestId('one')).toHaveFocus(); }); it('should not throw when an item is removed', () => { @@ -1029,7 +977,7 @@ describe('', () => { - + {!hide && } @@ -1038,21 +986,21 @@ describe('', () => { ); } - const { getByRole, getByText, getByTestId } = render(); + const { getByText, getByTestId } = render(); fireEvent.click(getByText('Hide')); - expect(getByTestId('navTo')).not.toHaveVirtualFocus(); + expect(getByTestId('navTo')).not.toHaveFocus(); expect(() => { act(() => { - getByRole('tree').focus(); + getByTestId('keyDown').focus(); }); - expect(getByTestId('keyDown')).toHaveVirtualFocus(); + expect(getByTestId('keyDown')).toHaveFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 'a' }); + fireEvent.keyDown(getByTestId('keyDown'), { key: 'a' }); }).not.to.throw(); - expect(getByTestId('navTo')).toHaveVirtualFocus(); + expect(getByTestId('navTo')).toHaveFocus(); }); }); @@ -1060,7 +1008,7 @@ describe('', () => { it('expands all siblings that are at the same level as the current item', () => { const onExpandedItemsChange = spy(); - const { getByRole, getByTestId } = render( + const { getByTestId } = render( @@ -1078,14 +1026,14 @@ describe('', () => { ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); expect(getByTestId('one')).to.have.attribute('aria-expanded', 'false'); expect(getByTestId('three')).to.have.attribute('aria-expanded', 'false'); expect(getByTestId('five')).to.have.attribute('aria-expanded', 'false'); - fireEvent.keyDown(getByRole('tree'), { key: '*' }); + fireEvent.keyDown(getByTestId('one'), { key: '*' }); expect(onExpandedItemsChange.args[0][1]).to.have.length(3); @@ -1101,7 +1049,7 @@ describe('', () => { describe('Expansion', () => { describe('enter key interaction', () => { it('expands a node with children', () => { - const { getByRole, getByTestId } = render( + const { getByTestId } = render( @@ -1110,18 +1058,18 @@ describe('', () => { ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); expect(getByTestId('one')).to.have.attribute('aria-expanded', 'false'); - fireEvent.keyDown(getByRole('tree'), { key: 'Enter' }); + fireEvent.keyDown(getByTestId('one'), { key: 'Enter' }); expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); }); it('collapses a node with children', () => { - const { getByRole, getByTestId, getByText } = render( + const { getByTestId } = render( @@ -1129,15 +1077,16 @@ describe('', () => { , ); - fireEvent.click(getByText('one')); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); + expect(getByTestId('one')).to.have.attribute('aria-expanded', 'false'); - fireEvent.keyDown(getByRole('tree'), { key: 'Enter' }); + fireEvent.keyDown(getByTestId('one'), { key: 'Enter' }); + expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); + fireEvent.keyDown(getByTestId('one'), { key: 'Enter' }); expect(getByTestId('one')).to.have.attribute('aria-expanded', 'false'); }); }); @@ -1146,83 +1095,83 @@ describe('', () => { describe('Single Selection', () => { describe('keyboard', () => { it('should select a node when space is pressed', () => { - const { getByRole, getByTestId } = render( + const { getByTestId } = render( , ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); expect(getByTestId('one')).not.to.have.attribute('aria-selected'); - fireEvent.keyDown(getByRole('tree'), { key: ' ' }); + fireEvent.keyDown(getByTestId('one'), { key: ' ' }); expect(getByTestId('one')).to.have.attribute('aria-selected', 'true'); }); it('should not deselect a node when space is pressed on a selected node', () => { - const { getByRole, getByTestId } = render( + const { getByTestId } = render( , ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - expect(getByTestId('one')).toHaveVirtualFocus(); + expect(getByTestId('one')).toHaveFocus(); expect(getByTestId('one')).to.have.attribute('aria-selected', 'true'); - fireEvent.keyDown(getByRole('tree'), { key: ' ' }); + fireEvent.keyDown(getByTestId('one'), { key: ' ' }); expect(getByTestId('one')).to.have.attribute('aria-selected', 'true'); }); it('should not select a node when space is pressed and disableSelection', () => { - const { getByRole, getByTestId } = render( + const { getByTestId } = render( , ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - fireEvent.keyDown(getByRole('tree'), { key: ' ' }); + fireEvent.keyDown(getByTestId('one'), { key: ' ' }); expect(getByTestId('one')).not.to.have.attribute('aria-selected'); }); it('should select a node when Enter is pressed and the node is not selected', () => { - const { getByRole, getByTestId } = render( + const { getByTestId } = render( , ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - fireEvent.keyDown(getByRole('tree'), { key: 'Enter' }); + fireEvent.keyDown(getByTestId('one'), { key: 'Enter' }); expect(getByTestId('one')).to.have.attribute('aria-selected'); }); it('should not un-select a node when Enter is pressed and the node is selected', () => { - const { getByRole, getByTestId } = render( + const { getByTestId } = render( , ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - fireEvent.keyDown(getByRole('tree'), { key: 'Enter' }); + fireEvent.keyDown(getByTestId('one'), { key: 'Enter' }); expect(getByTestId('one')).to.have.attribute('aria-selected'); }); @@ -1269,7 +1218,7 @@ describe('', () => { describe('Multi Selection', () => { describe('deselection', () => { describe('mouse behavior when multiple nodes are selected', () => { - specify('clicking a selected node holding ctrl should deselect the node', () => { + it('clicking a selected node holding ctrl should deselect the node', () => { const { getByText, getByTestId } = render( @@ -1284,7 +1233,7 @@ describe('', () => { expect(getByTestId('two')).to.have.attribute('aria-selected', 'true'); }); - specify('clicking a selected node holding meta should deselect the node', () => { + it('clicking a selected node holding meta should deselect the node', () => { const { getByText, getByTestId } = render( @@ -1318,27 +1267,27 @@ describe('', () => { }); it('should deselect the item when pressing space on a selected item', () => { - const { getByTestId, getByRole } = render( + const { getByTestId } = render( , ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - expect(getByTestId('one')).toHaveVirtualFocus(); + expect(getByTestId('one')).toHaveFocus(); expect(getByTestId('one')).to.have.attribute('aria-selected', 'true'); - fireEvent.keyDown(getByRole('tree'), { key: ' ' }); + fireEvent.keyDown(getByTestId('one'), { key: ' ' }); expect(getByTestId('one')).to.have.attribute('aria-selected', 'false'); }); }); describe('range selection', () => { - specify('keyboard arrow', () => { - const { getByRole, getByTestId, getByText, queryAllByRole } = render( - + it('keyboard arrow', () => { + const { getByTestId, queryAllByRole, getByText } = render( + @@ -1349,37 +1298,37 @@ describe('', () => { fireEvent.click(getByText('three')); act(() => { - getByRole('tree').focus(); + getByTestId('three').focus(); }); expect(getByTestId('three')).to.have.attribute('aria-selected', 'true'); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown', shiftKey: true }); + fireEvent.keyDown(getByTestId('three'), { key: 'ArrowDown', shiftKey: true }); - expect(getByTestId('four')).toHaveVirtualFocus(); + expect(getByTestId('four')).toHaveFocus(); expect(queryAllByRole('treeitem', { selected: true })).to.have.length(2); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown', shiftKey: true }); + fireEvent.keyDown(getByTestId('four'), { key: 'ArrowDown', shiftKey: true }); expect(getByTestId('three')).to.have.attribute('aria-selected', 'true'); expect(getByTestId('four')).to.have.attribute('aria-selected', 'true'); expect(getByTestId('five')).to.have.attribute('aria-selected', 'true'); expect(queryAllByRole('treeitem', { selected: true })).to.have.length(3); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp', shiftKey: true }); + fireEvent.keyDown(getByTestId('five'), { key: 'ArrowUp', shiftKey: true }); - expect(getByTestId('four')).toHaveVirtualFocus(); + expect(getByTestId('four')).toHaveFocus(); expect(queryAllByRole('treeitem', { selected: true })).to.have.length(2); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp', shiftKey: true }); + fireEvent.keyDown(getByTestId('four'), { key: 'ArrowUp', shiftKey: true }); expect(queryAllByRole('treeitem', { selected: true })).to.have.length(1); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp', shiftKey: true }); + fireEvent.keyDown(getByTestId('three'), { key: 'ArrowUp', shiftKey: true }); expect(queryAllByRole('treeitem', { selected: true })).to.have.length(2); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp', shiftKey: true }); + fireEvent.keyDown(getByTestId('two'), { key: 'ArrowUp', shiftKey: true }); expect(getByTestId('one')).to.have.attribute('aria-selected', 'true'); expect(getByTestId('two')).to.have.attribute('aria-selected', 'true'); @@ -1389,9 +1338,9 @@ describe('', () => { expect(queryAllByRole('treeitem', { selected: true })).to.have.length(3); }); - specify('keyboard arrow does not select when selectionDisabled', () => { - const { getByRole, getByTestId, queryAllByRole } = render( - + it('keyboard arrow does not select when selectionDisabled', () => { + const { getByTestId, queryAllByRole } = render( + @@ -1401,21 +1350,21 @@ describe('', () => { ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown', shiftKey: true }); + fireEvent.keyDown(getByTestId('one'), { key: 'ArrowDown', shiftKey: true }); - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('two')).toHaveFocus(); expect(queryAllByRole('treeitem', { selected: true })).to.have.length(0); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp', shiftKey: true }); + fireEvent.keyDown(getByTestId('two'), { key: 'ArrowUp', shiftKey: true }); expect(queryAllByRole('treeitem', { selected: true })).to.have.length(0); }); - specify('keyboard arrow merge', () => { - const { getByRole, getByTestId, getByText, queryAllByRole } = render( + it('keyboard arrow merge', () => { + const { getByTestId, getByText, queryAllByRole } = render( @@ -1428,28 +1377,28 @@ describe('', () => { fireEvent.click(getByText('three')); act(() => { - getByRole('tree').focus(); + getByTestId('three').focus(); }); expect(getByTestId('three')).to.have.attribute('aria-selected', 'true'); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp', shiftKey: true }); + fireEvent.keyDown(getByTestId('three'), { key: 'ArrowUp', shiftKey: true }); fireEvent.click(getByText('six'), { ctrlKey: true }); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp', shiftKey: true }); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp', shiftKey: true }); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp', shiftKey: true }); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp', shiftKey: true }); + fireEvent.keyDown(getByTestId('six'), { key: 'ArrowUp', shiftKey: true }); + fireEvent.keyDown(getByTestId('five'), { key: 'ArrowUp', shiftKey: true }); + fireEvent.keyDown(getByTestId('four'), { key: 'ArrowUp', shiftKey: true }); + fireEvent.keyDown(getByTestId('three'), { key: 'ArrowUp', shiftKey: true }); expect(queryAllByRole('treeitem', { selected: true })).to.have.length(5); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown', shiftKey: true }); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown', shiftKey: true }); + fireEvent.keyDown(getByTestId('two'), { key: 'ArrowDown', shiftKey: true }); + fireEvent.keyDown(getByTestId('three'), { key: 'ArrowDown', shiftKey: true }); expect(queryAllByRole('treeitem', { selected: true })).to.have.length(3); }); - specify('keyboard space', () => { - const { getByRole, getByTestId, getByText } = render( + it('keyboard space', () => { + const { getByTestId, getByText } = render( @@ -1464,26 +1413,36 @@ describe('', () => { , ); - const tree = getByRole('tree'); fireEvent.click(getByText('five')); act(() => { - tree.focus(); + getByTestId('five').focus(); }); - for (let i = 0; i < 5; i += 1) { - fireEvent.keyDown(tree, { key: 'ArrowDown' }); - } - fireEvent.keyDown(tree, { key: ' ', shiftKey: true }); + + fireEvent.keyDown(getByTestId('five'), { key: 'ArrowDown' }); + fireEvent.keyDown(getByTestId('six'), { key: 'ArrowDown' }); + fireEvent.keyDown(getByTestId('seven'), { key: 'ArrowDown' }); + fireEvent.keyDown(getByTestId('eight'), { key: 'ArrowDown' }); + fireEvent.keyDown(getByTestId('nine'), { key: 'ArrowDown' }); + fireEvent.keyDown(getByTestId('nine'), { key: ' ', shiftKey: true }); expect(getByTestId('five')).to.have.attribute('aria-selected', 'true'); expect(getByTestId('six')).to.have.attribute('aria-selected', 'true'); expect(getByTestId('seven')).to.have.attribute('aria-selected', 'true'); expect(getByTestId('eight')).to.have.attribute('aria-selected', 'true'); expect(getByTestId('nine')).to.have.attribute('aria-selected', 'true'); - for (let i = 0; i < 9; i += 1) { - fireEvent.keyDown(tree, { key: 'ArrowUp' }); - } - fireEvent.keyDown(tree, { key: ' ', shiftKey: true }); + + fireEvent.keyDown(getByTestId('nine'), { key: 'ArrowUp' }); + fireEvent.keyDown(getByTestId('eight'), { key: 'ArrowUp' }); + fireEvent.keyDown(getByTestId('seven'), { key: 'ArrowUp' }); + fireEvent.keyDown(getByTestId('six'), { key: 'ArrowUp' }); + fireEvent.keyDown(getByTestId('five'), { key: 'ArrowUp' }); + fireEvent.keyDown(getByTestId('four'), { key: 'ArrowUp' }); + fireEvent.keyDown(getByTestId('three'), { key: 'ArrowUp' }); + fireEvent.keyDown(getByTestId('two'), { key: 'ArrowUp' }); + fireEvent.keyDown(getByTestId('one'), { key: 'ArrowUp' }); + + fireEvent.keyDown(getByTestId('one'), { key: ' ', shiftKey: true }); expect(getByTestId('one')).to.have.attribute('aria-selected', 'true'); expect(getByTestId('two')).to.have.attribute('aria-selected', 'true'); expect(getByTestId('three')).to.have.attribute('aria-selected', 'true'); @@ -1495,8 +1454,8 @@ describe('', () => { expect(getByTestId('nine')).to.have.attribute('aria-selected', 'false'); }); - specify('keyboard home and end', () => { - const { getByRole, getByTestId } = render( + it('keyboard home and end', () => { + const { getByTestId } = render( @@ -1516,7 +1475,7 @@ describe('', () => { getByTestId('five').focus(); }); - fireEvent.keyDown(getByRole('tree'), { + fireEvent.keyDown(getByTestId('five'), { key: 'End', shiftKey: true, ctrlKey: true, @@ -1528,7 +1487,7 @@ describe('', () => { expect(getByTestId('eight')).to.have.attribute('aria-selected', 'true'); expect(getByTestId('nine')).to.have.attribute('aria-selected', 'true'); - fireEvent.keyDown(getByRole('tree'), { + fireEvent.keyDown(getByTestId('nine'), { key: 'Home', shiftKey: true, ctrlKey: true, @@ -1545,8 +1504,8 @@ describe('', () => { expect(getByTestId('nine')).to.have.attribute('aria-selected', 'false'); }); - specify('keyboard home and end do not select when selectionDisabled', () => { - const { getByRole, getByText, queryAllByRole } = render( + it('keyboard home and end do not select when selectionDisabled', () => { + const { getByTestId, getByText, queryAllByRole } = render( @@ -1563,12 +1522,10 @@ describe('', () => { ); fireEvent.click(getByText('five')); - fireEvent.click(getByText('five')); - // Focus node five act(() => { - getByRole('tree').focus(); + getByTestId('five').focus(); }); - fireEvent.keyDown(getByRole('tree'), { + fireEvent.keyDown(getByTestId('five'), { key: 'End', shiftKey: true, ctrlKey: true, @@ -1576,7 +1533,7 @@ describe('', () => { expect(queryAllByRole('treeitem', { selected: true })).to.have.length(0); - fireEvent.keyDown(getByRole('tree'), { + fireEvent.keyDown(getByTestId('nine'), { key: 'Home', shiftKey: true, ctrlKey: true, @@ -1585,7 +1542,7 @@ describe('', () => { expect(queryAllByRole('treeitem', { selected: true })).to.have.length(0); }); - specify('mouse', () => { + it('mouse', () => { const { getByTestId, getByText } = render( @@ -1650,7 +1607,7 @@ describe('', () => { expect(getByTestId('five')).to.have.attribute('aria-selected', 'false'); }); - specify('mouse does not range select when selectionDisabled', () => { + it('mouse does not range select when selectionDisabled', () => { const { getByText, queryAllByRole } = render( @@ -1674,8 +1631,8 @@ describe('', () => { }); describe('multi selection', () => { - specify('keyboard', () => { - const { getByRole, getByTestId } = render( + it('keyboard', () => { + const { getByTestId } = render( @@ -1683,26 +1640,26 @@ describe('', () => { ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); expect(getByTestId('one')).to.have.attribute('aria-selected', 'false'); expect(getByTestId('two')).to.have.attribute('aria-selected', 'false'); - fireEvent.keyDown(getByRole('tree'), { key: ' ' }); + fireEvent.keyDown(getByTestId('one'), { key: ' ' }); expect(getByTestId('one')).to.have.attribute('aria-selected', 'true'); expect(getByTestId('two')).to.have.attribute('aria-selected', 'false'); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown' }); - fireEvent.keyDown(getByRole('tree'), { key: ' ' }); + fireEvent.keyDown(getByTestId('one'), { key: 'ArrowDown' }); + fireEvent.keyDown(getByTestId('two'), { key: ' ' }); expect(getByTestId('one')).to.have.attribute('aria-selected', 'true'); expect(getByTestId('two')).to.have.attribute('aria-selected', 'true'); }); - specify('keyboard holding ctrl', () => { - const { getByRole, getByTestId } = render( + it('keyboard holding ctrl', () => { + const { getByTestId } = render( @@ -1710,25 +1667,25 @@ describe('', () => { ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); expect(getByTestId('one')).to.have.attribute('aria-selected', 'false'); expect(getByTestId('two')).to.have.attribute('aria-selected', 'false'); - fireEvent.keyDown(getByRole('tree'), { key: ' ' }); + fireEvent.keyDown(getByTestId('one'), { key: ' ' }); expect(getByTestId('one')).to.have.attribute('aria-selected', 'true'); expect(getByTestId('two')).to.have.attribute('aria-selected', 'false'); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown' }); - fireEvent.keyDown(getByRole('tree'), { key: ' ', ctrlKey: true }); + fireEvent.keyDown(getByTestId('one'), { key: 'ArrowDown' }); + fireEvent.keyDown(getByTestId('two'), { key: ' ', ctrlKey: true }); expect(getByTestId('one')).to.have.attribute('aria-selected', 'true'); expect(getByTestId('two')).to.have.attribute('aria-selected', 'true'); }); - specify('mouse', () => { + it('mouse', () => { const { getByText, getByTestId } = render( @@ -1750,7 +1707,7 @@ describe('', () => { expect(getByTestId('two')).to.have.attribute('aria-selected', 'true'); }); - specify('mouse using ctrl', () => { + it('mouse using ctrl', () => { const { getByTestId, getByText } = render( @@ -1768,7 +1725,7 @@ describe('', () => { expect(getByTestId('two')).to.have.attribute('aria-selected', 'true'); }); - specify('mouse using meta', () => { + it('mouse using meta', () => { const { getByTestId, getByText } = render( @@ -1787,8 +1744,8 @@ describe('', () => { }); }); - specify('ctrl + a selects all', () => { - const { getByRole, queryAllByRole } = render( + it('ctrl + a selects all', () => { + const { getByTestId, queryAllByRole } = render( @@ -1799,15 +1756,15 @@ describe('', () => { ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - fireEvent.keyDown(getByRole('tree'), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(getByTestId('one'), { key: 'a', ctrlKey: true }); expect(queryAllByRole('treeitem', { selected: true })).to.have.length(5); }); - specify('ctrl + a does not select all when disableSelection', () => { - const { getByRole, queryAllByRole } = render( + it('ctrl + a does not select all when disableSelection', () => { + const { getByTestId, queryAllByRole } = render( @@ -1818,9 +1775,9 @@ describe('', () => { ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - fireEvent.keyDown(getByRole('tree'), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(getByTestId('one'), { key: 'a', ctrlKey: true }); expect(queryAllByRole('treeitem', { selected: true })).to.have.length(0); }); @@ -1899,7 +1856,7 @@ describe('', () => { describe('keyboard', () => { describe('`disabledItemsFocusable={true}`', () => { it('should prevent selection by keyboard', () => { - const { getByRole, getByTestId } = render( + const { getByTestId } = render( , @@ -1908,13 +1865,13 @@ describe('', () => { act(() => { getByTestId('one').focus(); }); - expect(getByTestId('one')).toHaveVirtualFocus(); - fireEvent.keyDown(getByRole('tree'), { key: ' ' }); + expect(getByTestId('one')).toHaveFocus(); + fireEvent.keyDown(getByTestId('one'), { key: ' ' }); expect(getByTestId('one')).not.to.have.attribute('aria-selected'); }); it('should not prevent next node being range selected by keyboard', () => { - const { getByRole, getByTestId } = render( + const { getByTestId } = render( @@ -1926,15 +1883,15 @@ describe('', () => { act(() => { getByTestId('one').focus(); }); - expect(getByTestId('one')).toHaveVirtualFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown', shiftKey: true }); + expect(getByTestId('one')).toHaveFocus(); + fireEvent.keyDown(getByTestId('one'), { key: 'ArrowDown', shiftKey: true }); expect(getByTestId('one')).to.have.attribute('aria-selected', 'false'); expect(getByTestId('two')).to.have.attribute('aria-selected', 'true'); - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('two')).toHaveFocus(); }); it('should prevent range selection by keyboard + arrow down', () => { - const { getByRole, getByTestId } = render( + const { getByTestId } = render( @@ -1944,17 +1901,17 @@ describe('', () => { act(() => { getByTestId('one').focus(); }); - expect(getByTestId('one')).toHaveVirtualFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown', shiftKey: true }); + expect(getByTestId('one')).toHaveFocus(); + fireEvent.keyDown(getByTestId('one'), { key: 'ArrowDown', shiftKey: true }); expect(getByTestId('one')).to.have.attribute('aria-selected', 'false'); expect(getByTestId('two')).to.have.attribute('aria-selected', 'false'); - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('two')).toHaveFocus(); }); }); - describe('`disabledItemsFocusable=false`', () => { + describe('`disabledItemsFocusable={false}`', () => { it('should select the next non disabled node by keyboard + arrow down', () => { - const { getByRole, getByTestId } = render( + const { getByTestId } = render( @@ -1965,11 +1922,11 @@ describe('', () => { act(() => { getByTestId('one').focus(); }); - expect(getByTestId('one')).toHaveVirtualFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown', shiftKey: true }); + expect(getByTestId('one')).toHaveFocus(); + fireEvent.keyDown(getByTestId('one'), { key: 'ArrowDown', shiftKey: true }); expect(getByTestId('one')).to.have.attribute('aria-selected', 'false'); expect(getByTestId('two')).to.have.attribute('aria-selected', 'false'); - expect(getByTestId('three')).toHaveVirtualFocus(); + expect(getByTestId('three')).toHaveFocus(); expect(getByTestId('one')).to.have.attribute('aria-selected', 'false'); expect(getByTestId('two')).to.have.attribute('aria-selected', 'false'); expect(getByTestId('three')).to.have.attribute('aria-selected', 'true'); @@ -1977,7 +1934,7 @@ describe('', () => { }); it('should prevent range selection by keyboard + space', () => { - const { getByRole, getByTestId, getByText } = render( + const { getByTestId, getByText } = render( @@ -1986,16 +1943,17 @@ describe('', () => { , ); - const tree = getByRole('tree'); fireEvent.click(getByText('one')); act(() => { - tree.focus(); + getByTestId('one').focus(); }); - for (let i = 0; i < 5; i += 1) { - fireEvent.keyDown(tree, { key: 'ArrowDown' }); - } - fireEvent.keyDown(tree, { key: ' ', shiftKey: true }); + + fireEvent.keyDown(getByTestId('one'), { key: 'ArrowDown' }); + fireEvent.keyDown(getByTestId('two'), { key: 'ArrowDown' }); + fireEvent.keyDown(getByTestId('four'), { key: 'ArrowDown' }); + + fireEvent.keyDown(getByTestId('five'), { key: ' ', shiftKey: true }); expect(getByTestId('one')).to.have.attribute('aria-selected', 'true'); expect(getByTestId('two')).to.have.attribute('aria-selected', 'true'); @@ -2005,7 +1963,7 @@ describe('', () => { }); it('should prevent selection by ctrl + a', () => { - const { getByRole, queryAllByRole } = render( + const { getByTestId, queryAllByRole } = render( @@ -2016,15 +1974,15 @@ describe('', () => { ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - fireEvent.keyDown(getByRole('tree'), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(getByTestId('one'), { key: 'a', ctrlKey: true }); expect(queryAllByRole('treeitem', { selected: true })).to.have.length(4); }); it('should prevent selection by keyboard end', () => { - const { getByRole, getByTestId } = render( + const { getByTestId } = render( @@ -2035,10 +1993,10 @@ describe('', () => { ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - expect(getByTestId('one')).toHaveVirtualFocus(); - fireEvent.keyDown(getByRole('tree'), { + expect(getByTestId('one')).toHaveFocus(); + fireEvent.keyDown(getByTestId('one'), { key: 'End', shiftKey: true, ctrlKey: true, @@ -2052,7 +2010,7 @@ describe('', () => { }); it('should prevent selection by keyboard home', () => { - const { getByRole, getByTestId } = render( + const { getByTestId } = render( @@ -2065,8 +2023,8 @@ describe('', () => { act(() => { getByTestId('five').focus(); }); - expect(getByTestId('five')).toHaveVirtualFocus(); - fireEvent.keyDown(getByRole('tree'), { + expect(getByTestId('five')).toHaveFocus(); + fireEvent.keyDown(getByTestId('five'), { key: 'Home', shiftKey: true, ctrlKey: true, @@ -2084,16 +2042,16 @@ describe('', () => { describe('focus', () => { describe('`disabledItemsFocusable={true}`', () => { it('should prevent focus by mouse', () => { - const focusSpy = spy(); + const onItemFocus = spy(); const { getByText } = render( - + , ); fireEvent.click(getByText('two')); - expect(focusSpy.callCount).to.equal(0); + expect(onItemFocus.callCount).to.equal(0); }); it('should not prevent programmatic focus', () => { @@ -2107,11 +2065,11 @@ describe('', () => { act(() => { getByTestId('one').focus(); }); - expect(getByTestId('one')).toHaveVirtualFocus(); + expect(getByTestId('one')).toHaveFocus(); }); it('should not prevent focus by type-ahead', () => { - const { getByRole, getByTestId } = render( + const { getByTestId } = render( @@ -2119,15 +2077,15 @@ describe('', () => { ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - expect(getByTestId('one')).toHaveVirtualFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 't' }); - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('one')).toHaveFocus(); + fireEvent.keyDown(getByTestId('one'), { key: 't' }); + expect(getByTestId('two')).toHaveFocus(); }); it('should not prevent focus by arrow keys', () => { - const { getByRole, getByTestId } = render( + const { getByTestId } = render( @@ -2135,61 +2093,52 @@ describe('', () => { ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - expect(getByTestId('one')).toHaveVirtualFocus(); + expect(getByTestId('one')).toHaveFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown' }); - expect(getByTestId('two')).toHaveVirtualFocus(); - }); - - it('should be focused on tree focus', () => { - const { getByRole, getByTestId } = render( - - - - , - ); - - act(() => { - getByRole('tree').focus(); - }); - - expect(getByTestId('one')).toHaveVirtualFocus(); + fireEvent.keyDown(getByTestId('one'), { key: 'ArrowDown' }); + expect(getByTestId('two')).toHaveFocus(); }); }); describe('`disabledItemsFocusable=false`', () => { it('should prevent focus by mouse', () => { - const focusSpy = spy(); + const onItemFocus = spy(); const { getByText } = render( - + , ); fireEvent.click(getByText('two')); - expect(focusSpy.callCount).to.equal(0); + expect(onItemFocus.callCount).to.equal(0); }); - it('should prevent programmatic focus', () => { - const { getByTestId } = render( + it('should prevent focus when clicking', () => { + const handleMouseDown = spy(); + + const { getByText } = render( - + , ); - act(() => { - getByTestId('one').focus(); - }); - expect(getByTestId('one')).not.toHaveVirtualFocus(); + fireEvent.mouseDown(getByText('one')); + expect(handleMouseDown.lastCall.firstArg.defaultPrevented).to.equal(true); }); it('should prevent focus by type-ahead', () => { - const { getByRole, getByTestId } = render( + const { getByTestId } = render( @@ -2197,15 +2146,15 @@ describe('', () => { ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - expect(getByTestId('one')).toHaveVirtualFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 't' }); - expect(getByTestId('one')).toHaveVirtualFocus(); + expect(getByTestId('one')).toHaveFocus(); + fireEvent.keyDown(getByTestId('one'), { key: 't' }); + expect(getByTestId('one')).toHaveFocus(); }); it('should be skipped on navigation with arrow keys', () => { - const { getByRole, getByTestId } = render( + const { getByTestId } = render( @@ -2214,36 +2163,33 @@ describe('', () => { ); act(() => { - getByRole('tree').focus(); + getByTestId('one').focus(); }); - expect(getByTestId('one')).toHaveVirtualFocus(); + expect(getByTestId('one')).toHaveFocus(); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown' }); - expect(getByTestId('three')).toHaveVirtualFocus(); + fireEvent.keyDown(getByTestId('one'), { key: 'ArrowDown' }); + expect(getByTestId('three')).toHaveFocus(); }); - it('should not be focused on tree focus', () => { - const { getByRole, getByTestId } = render( + it('should set tabIndex={-1} and tabIndex={0} on next item', () => { + const { getByTestId } = render( , ); - act(() => { - getByRole('tree').focus(); - }); - - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('one').tabIndex).to.equal(-1); + expect(getByTestId('two').tabIndex).to.equal(0); }); }); }); describe('expansion', () => { describe('`disabledItemsFocusable={true}`', () => { - it('should prevent expansion on enter', () => { - const { getByRole, getByTestId } = render( + it('should prevent expansion on Enter', () => { + const { getByTestId } = render( @@ -2255,14 +2201,14 @@ describe('', () => { act(() => { getByTestId('two').focus(); }); - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('two')).toHaveFocus(); expect(getByTestId('two')).to.have.attribute('aria-expanded', 'false'); - fireEvent.keyDown(getByRole('tree'), { key: 'Enter' }); + fireEvent.keyDown(getByTestId('two'), { key: 'Enter' }); expect(getByTestId('two')).to.have.attribute('aria-expanded', 'false'); }); it('should prevent expansion on right arrow', () => { - const { getByRole, getByTestId } = render( + const { getByTestId } = render( @@ -2274,14 +2220,14 @@ describe('', () => { act(() => { getByTestId('two').focus(); }); - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('two')).toHaveFocus(); expect(getByTestId('two')).to.have.attribute('aria-expanded', 'false'); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowRight' }); + fireEvent.keyDown(getByTestId('two'), { key: 'ArrowRight' }); expect(getByTestId('two')).to.have.attribute('aria-expanded', 'false'); }); it('should prevent collapse on left arrow', () => { - const { getByRole, getByTestId } = render( + const { getByTestId } = render( @@ -2293,9 +2239,9 @@ describe('', () => { act(() => { getByTestId('two').focus(); }); - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('two')).toHaveFocus(); expect(getByTestId('two')).to.have.attribute('aria-expanded', 'true'); - fireEvent.keyDown(getByRole('tree'), { key: 'ArrowLeft' }); + fireEvent.keyDown(getByTestId('two'), { key: 'ArrowLeft' }); expect(getByTestId('two')).to.have.attribute('aria-expanded', 'true'); }); }); @@ -2418,7 +2364,7 @@ describe('', () => { const { getByText, getByTestId, getByRole } = render( - + @@ -2427,10 +2373,10 @@ describe('', () => { fireEvent.click(getByText('two')); act(() => { - getByRole('tree').focus(); + getByTestId('two').focus(); }); - expect(getByTestId('two')).toHaveVirtualFocus(); + expect(getByTestId('two')).toHaveFocus(); act(() => { getByRole('button').focus(); diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.tsx b/packages/x-tree-view/src/TreeItem/TreeItem.tsx index 17450737dbe01..bfa635fd4f3c1 100644 --- a/packages/x-tree-view/src/TreeItem/TreeItem.tsx +++ b/packages/x-tree-view/src/TreeItem/TreeItem.tsx @@ -176,6 +176,9 @@ export const TreeItem = React.forwardRef(function TreeItem( label, onClick, onMouseDown, + onFocus, + onBlur, + onKeyDown, ...other } = props; @@ -287,18 +290,24 @@ export const TreeItem = React.forwardRef(function TreeItem( } function handleFocus(event: React.FocusEvent) { - // DOM focus stays on the tree which manages focus with aria-activedescendant - if (event.target === event.currentTarget) { - instance.focusRoot(); - } - const canBeFocused = !disabled || disabledItemsFocusable; if (!focused && canBeFocused && event.currentTarget === event.target) { instance.focusItem(event, itemId); } } + function handleBlur(event: React.FocusEvent) { + onBlur?.(event); + instance.removeFocusedItem(); + } + + const handleKeyDown = (event: React.KeyboardEvent) => { + onKeyDown?.(event); + instance.handleItemKeyDown(event, itemId); + }; + const idAttribute = instance.getTreeItemId(itemId, id); + const tabIndex = instance.canItemBeTabbed(itemId) ? 0 : -1; return ( @@ -309,10 +318,12 @@ export const TreeItem = React.forwardRef(function TreeItem( aria-selected={ariaSelected} aria-disabled={disabled || undefined} id={idAttribute} - tabIndex={-1} + tabIndex={tabIndex} {...other} ownerState={ownerState} onFocus={handleFocus} + onBlur={handleBlur} + onKeyDown={handleKeyDown} ref={handleRootRef} > }, ); - const expandAllSiblings = (event: React.KeyboardEvent, itemId: string) => { + const expandAllSiblings = (event: React.KeyboardEvent, itemId: string) => { const node = instance.getNode(itemId); const siblings = instance.getChildrenIds(node.parentId); diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.ts index 54fff61870b76..1a66b9dd86fd0 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.ts @@ -6,7 +6,7 @@ export interface UseTreeViewExpansionInstance { isNodeExpanded: (itemId: string) => boolean; isNodeExpandable: (itemId: string) => boolean; toggleNodeExpansion: (event: React.SyntheticEvent, value: string) => void; - expandAllSiblings: (event: React.KeyboardEvent, itemId: string) => void; + expandAllSiblings: (event: React.KeyboardEvent, itemId: string) => void; } export interface UseTreeViewExpansionParameters { diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts index e0aa4229e38d2..68d3337ec9378 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts @@ -2,12 +2,35 @@ import * as React from 'react'; import useEventCallback from '@mui/utils/useEventCallback'; import { EventHandlers } from '@mui/base/utils'; import ownerDocument from '@mui/utils/ownerDocument'; -import { TreeViewPlugin } from '../../models'; +import { TreeViewPlugin, TreeViewUsedInstance } from '../../models'; import { populateInstance, populatePublicAPI } from '../../useTreeView/useTreeView.utils'; import { UseTreeViewFocusSignature } from './useTreeViewFocus.types'; import { useInstanceEventHandler } from '../../hooks/useInstanceEventHandler'; import { getActiveElement } from '../../utils/utils'; +const useTabbableItemId = ( + instance: TreeViewUsedInstance, + selectedItems: string | string[] | null, +) => { + const isItemVisible = (itemId: string) => { + const node = instance.getNode(itemId); + return node && (node.parentId == null || instance.isNodeExpanded(node.parentId)); + }; + + let tabbableItemId: string | null | undefined; + if (Array.isArray(selectedItems)) { + tabbableItemId = selectedItems.find(isItemVisible); + } else if (selectedItems != null && isItemVisible(selectedItems)) { + tabbableItemId = selectedItems; + } + + if (tabbableItemId == null) { + tabbableItemId = instance.getNavigableChildrenIds(null)[0]; + } + + return tabbableItemId; +}; + export const useTreeViewFocus: TreeViewPlugin = ({ instance, publicAPI, @@ -17,6 +40,8 @@ export const useTreeViewFocus: TreeViewPlugin = ({ models, rootRef, }) => { + const tabbableItemId = useTabbableItemId(instance, models.selectedItems.value); + const setFocusedItemId = useEventCallback((itemId: React.SetStateAction) => { const cleanItemId = typeof itemId === 'function' ? itemId(state.focusedNodeId) : itemId; if (state.focusedNodeId !== cleanItemId) { @@ -25,7 +50,9 @@ export const useTreeViewFocus: TreeViewPlugin = ({ }); const isTreeViewFocused = React.useCallback( - () => !!rootRef.current && rootRef.current === getActiveElement(ownerDocument(rootRef.current)), + () => + !!rootRef.current && + rootRef.current.contains(getActiveElement(ownerDocument(rootRef.current))), [rootRef], ); @@ -39,20 +66,27 @@ export const useTreeViewFocus: TreeViewPlugin = ({ return node && (node.parentId == null || instance.isNodeExpanded(node.parentId)); }; - const focusItem = useEventCallback((event: React.SyntheticEvent, itemId: string | null) => { - // if we receive an itemId, and it is visible, the focus will be set to it - if (itemId && isNodeVisible(itemId)) { - if (!isTreeViewFocused()) { - instance.focusRoot(); - } - setFocusedItemId(itemId); - if (params.onItemFocus) { - params.onItemFocus(event, itemId); - } + const innerFocusItem = (event: React.SyntheticEvent | null, itemId: string) => { + const node = instance.getNode(itemId); + const itemElement = document.getElementById(instance.getTreeItemId(itemId, node.idAttribute)); + if (itemElement) { + itemElement.focus(); + } + + setFocusedItemId(itemId); + if (params.onItemFocus) { + params.onItemFocus(event, itemId); + } + }; + + const focusItem = useEventCallback((event: React.SyntheticEvent, nodeId: string) => { + // If we receive a nodeId, and it is visible, the focus will be set to it + if (isNodeVisible(nodeId)) { + innerFocusItem(event, nodeId); } }); - const focusDefaultNode = useEventCallback((event: React.SyntheticEvent) => { + const focusDefaultNode = useEventCallback((event: React.SyntheticEvent | null) => { let nodeToFocusId: string | null | undefined; if (Array.isArray(models.selectedItems.value)) { nodeToFocusId = models.selectedItems.value.find(isNodeVisible); @@ -64,21 +98,33 @@ export const useTreeViewFocus: TreeViewPlugin = ({ nodeToFocusId = instance.getNavigableChildrenIds(null)[0]; } - setFocusedItemId(nodeToFocusId); - if (params.onItemFocus) { - params.onItemFocus(event, nodeToFocusId); - } + innerFocusItem(event, nodeToFocusId); }); - const focusRoot = useEventCallback(() => { - rootRef.current?.focus({ preventScroll: true }); + const removeFocusedItem = useEventCallback(() => { + if (state.focusedNodeId == null) { + return; + } + + const node = instance.getNode(state.focusedNodeId); + const itemElement = document.getElementById( + instance.getTreeItemId(state.focusedNodeId, node.idAttribute), + ); + if (itemElement) { + itemElement.blur(); + } + + setFocusedItemId(null); }); + const canItemBeTabbed = (itemId: string) => itemId === tabbableItemId; + populateInstance(instance, { isNodeFocused, + canItemBeTabbed, focusItem, - focusRoot, focusDefaultNode, + removeFocusedItem, }); populatePublicAPI(publicAPI, { @@ -86,15 +132,9 @@ export const useTreeViewFocus: TreeViewPlugin = ({ }); useInstanceEventHandler(instance, 'removeNode', ({ id }) => { - setFocusedItemId((oldFocusedItemId) => { - if ( - oldFocusedItemId === id && - rootRef.current === ownerDocument(rootRef.current).activeElement - ) { - return instance.getChildrenIds(null)[0]; - } - return oldFocusedItemId; - }); + if (state.focusedNodeId === id) { + instance.focusDefaultNode(null); + } }); const createHandleFocus = @@ -106,12 +146,6 @@ export const useTreeViewFocus: TreeViewPlugin = ({ } }; - const createHandleBlur = - (otherHandlers: EventHandlers) => (event: React.FocusEvent) => { - otherHandlers.onBlur?.(event); - setFocusedItemId(null); - }; - const focusedNode = instance.getNode(state.focusedNodeId!); const activeDescendant = focusedNode ? instance.getTreeItemId(focusedNode.id, focusedNode.idAttribute) @@ -120,7 +154,6 @@ export const useTreeViewFocus: TreeViewPlugin = ({ return { getRootProps: (otherHandlers) => ({ onFocus: createHandleFocus(otherHandlers), - onBlur: createHandleBlur(otherHandlers), 'aria-activedescendant': activeDescendant ?? undefined, }), }; diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.ts index f6013ad19ab7c..2b9fe5f6f1e66 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.ts @@ -7,9 +7,10 @@ import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion'; export interface UseTreeViewFocusInstance { isNodeFocused: (itemId: string) => boolean; - focusItem: (event: React.SyntheticEvent, itemId: string | null) => void; - focusDefaultNode: (event: React.SyntheticEvent) => void; - focusRoot: () => void; + canItemBeTabbed: (itemId: string) => boolean; + focusItem: (event: React.SyntheticEvent, nodeId: string) => void; + focusDefaultNode: (event: React.SyntheticEvent | null) => void; + removeFocusedItem: () => void; } export interface UseTreeViewFocusPublicAPI extends Pick {} @@ -21,7 +22,7 @@ export interface UseTreeViewFocusParameters { * @param {string} itemId The id of the focused item. * @param {string} value of the focused item. */ - onItemFocus?: (event: React.SyntheticEvent, itemId: string) => void; + onItemFocus?: (event: React.SyntheticEvent | null, itemId: string) => void; } export type UseTreeViewFocusDefaultizedParameters = UseTreeViewFocusParameters; diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts index f5abd106a5761..762573b4dada2 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts @@ -1,6 +1,5 @@ import * as React from 'react'; import { useTheme } from '@mui/material/styles'; -import { EventHandlers } from '@mui/base/utils'; import useEventCallback from '@mui/utils/useEventCallback'; import { TreeViewPlugin } from '../../models'; import { @@ -32,7 +31,7 @@ function findNextFirstChar(firstChars: string[], startIndex: number, char: strin export const useTreeViewKeyboardNavigation: TreeViewPlugin< UseTreeViewKeyboardNavigationSignature -> = ({ instance, params, state }) => { +> = ({ instance, params }) => { const theme = useTheme(); const isRTL = theme.direction === 'rtl'; const firstCharMap = React.useRef({}); @@ -63,10 +62,6 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin< firstCharMap.current = newFirstCharMap; }, [params.items, params.getItemId, instance]); - populateInstance(instance, { - updateFirstCharMap, - }); - const getFirstMatchingItem = (itemId: string, firstChar: string) => { let start: number; let index: number; @@ -118,209 +113,200 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin< }; // ARIA specification: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction - const createHandleKeyDown = - (otherHandlers: EventHandlers) => - (event: React.KeyboardEvent & MuiCancellableEvent) => { - otherHandlers.onKeyDown?.(event); + const handleItemKeyDown = ( + event: React.KeyboardEvent & MuiCancellableEvent, + itemId: string, + ) => { + if (event.defaultMuiPrevented) { + return; + } - if (event.defaultMuiPrevented) { - return; - } + if (event.altKey || event.currentTarget !== event.target) { + return; + } - // If the tree is empty, there will be no focused node - if (event.altKey || event.currentTarget !== event.target || state.focusedNodeId == null) { - return; + const ctrlPressed = event.ctrlKey || event.metaKey; + const key = event.key; + + // eslint-disable-next-line default-case + switch (true) { + // Select the node when pressing "Space" + case key === ' ' && canToggleItemSelection(itemId): { + event.preventDefault(); + if (params.multiSelect && event.shiftKey) { + instance.selectRange(event, { end: itemId }); + } else if (params.multiSelect) { + instance.selectNode(event, itemId, true); + } else { + instance.selectNode(event, itemId); + } + break; } - const ctrlPressed = event.ctrlKey || event.metaKey; - const key = event.key; - - // eslint-disable-next-line default-case - switch (true) { - // Select the node when pressing "Space" - case key === ' ' && canToggleItemSelection(state.focusedNodeId): { + // If the focused node has children, we expand it. + // If the focused node has no children, we select it. + case key === 'Enter': { + if (canToggleItemExpansion(itemId)) { + instance.toggleNodeExpansion(event, itemId); event.preventDefault(); - if (params.multiSelect && event.shiftKey) { - instance.selectRange(event, { end: state.focusedNodeId }); - } else if (params.multiSelect) { - instance.selectNode(event, state.focusedNodeId, true); - } else { - instance.selectNode(event, state.focusedNodeId); + } else if (canToggleItemSelection(itemId)) { + if (params.multiSelect) { + event.preventDefault(); + instance.selectNode(event, itemId, true); + } else if (!instance.isNodeSelected(itemId)) { + instance.selectNode(event, itemId); + event.preventDefault(); } - break; } - // If the focused node has children, we expand it. - // If the focused node has no children, we select it. - case key === 'Enter': { - if (canToggleItemExpansion(state.focusedNodeId)) { - instance.toggleNodeExpansion(event, state.focusedNodeId); - event.preventDefault(); - } else if (canToggleItemSelection(state.focusedNodeId)) { - if (params.multiSelect) { - event.preventDefault(); - instance.selectNode(event, state.focusedNodeId, true); - } else if (!instance.isNodeSelected(state.focusedNodeId)) { - instance.selectNode(event, state.focusedNodeId); - event.preventDefault(); - } - } + break; + } - break; + // Focus the next focusable item + case key === 'ArrowDown': { + const nextItem = getNextNode(instance, itemId); + if (nextItem) { + event.preventDefault(); + instance.focusItem(event, nextItem); + + // Multi select behavior when pressing Shift + ArrowDown + // Toggles the selection state of the next item + if (params.multiSelect && event.shiftKey && canToggleItemSelection(nextItem)) { + instance.selectRange( + event, + { + end: nextItem, + current: itemId, + }, + true, + ); + } } - // Focus the next focusable item - case key === 'ArrowDown': { - const nextItem = getNextNode(instance, state.focusedNodeId); - if (nextItem) { - event.preventDefault(); - instance.focusItem(event, nextItem); - - // Multi select behavior when pressing Shift + ArrowDown - // Toggles the selection state of the next item - if (params.multiSelect && event.shiftKey && canToggleItemSelection(nextItem)) { - instance.selectRange( - event, - { - end: nextItem, - current: state.focusedNodeId, - }, - true, - ); - } - } + break; + } - break; + // Focuses the previous focusable item + case key === 'ArrowUp': { + const previousItem = getPreviousNode(instance, itemId); + if (previousItem) { + event.preventDefault(); + instance.focusItem(event, previousItem); + + // Multi select behavior when pressing Shift + ArrowUp + // Toggles the selection state of the previous item + if (params.multiSelect && event.shiftKey && canToggleItemSelection(previousItem)) { + instance.selectRange( + event, + { + end: previousItem, + current: itemId, + }, + true, + ); + } } - // Focuses the previous focusable item - case key === 'ArrowUp': { - const previousItem = getPreviousNode(instance, state.focusedNodeId); - if (previousItem) { + break; + } + + // If the focused item is expanded, we move the focus to its first child + // If the focused item is collapsed and has children, we expand it + case (key === 'ArrowRight' && !isRTL) || (key === 'ArrowLeft' && isRTL): { + if (instance.isNodeExpanded(itemId)) { + const nextNodeId = getNextNode(instance, itemId); + if (nextNodeId) { + instance.focusItem(event, nextNodeId); event.preventDefault(); - instance.focusItem(event, previousItem); - - // Multi select behavior when pressing Shift + ArrowUp - // Toggles the selection state of the previous item - if (params.multiSelect && event.shiftKey && canToggleItemSelection(previousItem)) { - instance.selectRange( - event, - { - end: previousItem, - current: state.focusedNodeId, - }, - true, - ); - } } - - break; + } else if (canToggleItemExpansion(itemId)) { + instance.toggleNodeExpansion(event, itemId); + event.preventDefault(); } - // If the focused item is expanded, we move the focus to its first child - // If the focused item is collapsed and has children, we expand it - case (key === 'ArrowRight' && !isRTL) || (key === 'ArrowLeft' && isRTL): { - if (instance.isNodeExpanded(state.focusedNodeId)) { - instance.focusItem(event, getNextNode(instance, state.focusedNodeId)); - event.preventDefault(); - } else if (canToggleItemExpansion(state.focusedNodeId)) { - instance.toggleNodeExpansion(event, state.focusedNodeId); + break; + } + + // If the focused item is expanded, we collapse it + // If the focused item is collapsed and has a parent, we move the focus to this parent + case (key === 'ArrowLeft' && !isRTL) || (key === 'ArrowRight' && isRTL): { + if (canToggleItemExpansion(itemId) && instance.isNodeExpanded(itemId)) { + instance.toggleNodeExpansion(event, itemId); + event.preventDefault(); + } else { + const parent = instance.getNode(itemId).parentId; + if (parent) { + instance.focusItem(event, parent); event.preventDefault(); } - - break; } - // If the focused item is expanded, we collapse it - // If the focused item is collapsed and has a parent, we move the focus to this parent - case (key === 'ArrowLeft' && !isRTL) || (key === 'ArrowRight' && isRTL): { - if ( - canToggleItemExpansion(state.focusedNodeId) && - instance.isNodeExpanded(state.focusedNodeId) - ) { - instance.toggleNodeExpansion(event, state.focusedNodeId!); - event.preventDefault(); - } else { - const parent = instance.getNode(state.focusedNodeId).parentId; - if (parent) { - instance.focusItem(event, parent); - event.preventDefault(); - } - } + break; + } - break; + // Focuses the first node in the tree + case key === 'Home': { + instance.focusItem(event, getFirstNode(instance)); + + // Multi select behavior when pressing Ctrl + Shift + Home + // Selects the focused node and all nodes up to the first node. + if (canToggleItemSelection(itemId) && params.multiSelect && ctrlPressed && event.shiftKey) { + instance.rangeSelectToFirst(event, itemId); } - // Focuses the first node in the tree - case key === 'Home': { - instance.focusItem(event, getFirstNode(instance)); - - // Multi select behavior when pressing Ctrl + Shift + Home - // Selects the focused node and all nodes up to the first node. - if ( - canToggleItemSelection(state.focusedNodeId) && - params.multiSelect && - ctrlPressed && - event.shiftKey - ) { - instance.rangeSelectToFirst(event, state.focusedNodeId); - } + event.preventDefault(); + break; + } - event.preventDefault(); - break; + // Focuses the last item in the tree + case key === 'End': { + instance.focusItem(event, getLastNode(instance)); + + // Multi select behavior when pressing Ctrl + Shirt + End + // Selects the focused item and all the items down to the last item. + if (canToggleItemSelection(itemId) && params.multiSelect && ctrlPressed && event.shiftKey) { + instance.rangeSelectToLast(event, itemId); } - // Focuses the last item in the tree - case key === 'End': { - instance.focusItem(event, getLastNode(instance)); - - // Multi select behavior when pressing Ctrl + Shirt + End - // Selects the focused item and all the items down to the last item. - if ( - canToggleItemSelection(state.focusedNodeId) && - params.multiSelect && - ctrlPressed && - event.shiftKey - ) { - instance.rangeSelectToLast(event, state.focusedNodeId); - } + event.preventDefault(); + break; + } - event.preventDefault(); - break; - } + // Expand all siblings that are at the same level as the focused item + case key === '*': { + instance.expandAllSiblings(event, itemId); + event.preventDefault(); + break; + } - // Expand all siblings that are at the same level as the focused item - case key === '*': { - instance.expandAllSiblings(event, state.focusedNodeId); - event.preventDefault(); - break; - } + // Multi select behavior when pressing Ctrl + a + // Selects all the nodes + case key === 'a' && ctrlPressed && params.multiSelect && !params.disableSelection: { + instance.selectRange(event, { + start: getFirstNode(instance), + end: getLastNode(instance), + }); + event.preventDefault(); + break; + } - // Multi select behavior when pressing Ctrl + a - // Selects all the nodes - case key === 'a' && ctrlPressed && params.multiSelect && !params.disableSelection: { - instance.selectRange(event, { - start: getFirstNode(instance), - end: getLastNode(instance), - }); + // Type-ahead + // TODO: Support typing multiple characters + case !ctrlPressed && !event.shiftKey && isPrintableCharacter(key): { + const matchingNode = getFirstMatchingItem(itemId, key); + if (matchingNode != null) { + instance.focusItem(event, matchingNode); event.preventDefault(); - break; - } - - // Type-ahead - // TODO: Support typing multiple characters - case !ctrlPressed && !event.shiftKey && isPrintableCharacter(key): { - const matchingNode = getFirstMatchingItem(state.focusedNodeId, key); - if (matchingNode != null) { - instance.focusItem(event, matchingNode); - event.preventDefault(); - } - break; } + break; } - }; + } + }; - return { getRootProps: (otherHandlers) => ({ onKeyDown: createHandleKeyDown(otherHandlers) }) }; + populateInstance(instance, { + updateFirstCharMap, + handleItemKeyDown, + }); }; useTreeViewKeyboardNavigation.params = {}; diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.ts index 9727caa58e113..729b8a875c47f 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.ts @@ -1,11 +1,17 @@ +import * as React from 'react'; import { TreeViewPluginSignature } from '../../models'; import { UseTreeViewNodesSignature } from '../useTreeViewNodes'; import { UseTreeViewSelectionSignature } from '../useTreeViewSelection'; import { UseTreeViewFocusSignature } from '../useTreeViewFocus'; import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion'; +import { MuiCancellableEvent } from '../../models/MuiCancellableEvent'; export interface UseTreeViewKeyboardNavigationInstance { updateFirstCharMap: (updater: (map: TreeViewFirstCharMap) => TreeViewFirstCharMap) => void; + handleItemKeyDown: ( + event: React.KeyboardEvent & MuiCancellableEvent, + itemId: string, + ) => void; } export type UseTreeViewKeyboardNavigationSignature = TreeViewPluginSignature<{ diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewNodes/useTreeViewNodes.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewNodes/useTreeViewNodes.ts index 15fa2ab2665b9..39a63d0281d8e 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewNodes/useTreeViewNodes.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewNodes/useTreeViewNodes.ts @@ -1,5 +1,4 @@ import * as React from 'react'; -import useEventCallback from '@mui/utils/useEventCallback'; import { TreeViewPlugin } from '../../models'; import { populateInstance, populatePublicAPI } from '../../useTreeView/useTreeView.utils'; import { @@ -138,11 +137,13 @@ export const useTreeViewNodes: TreeViewPlugin = ({ [instance], ); - const getChildrenIds = useEventCallback((itemId: string | null) => - Object.values(state.nodes.nodeMap) - .filter((item) => item.parentId === itemId) - .sort((a, b) => a.index - b.index) - .map((child) => child.id), + const getChildrenIds = React.useCallback( + (itemId: string | null) => + Object.values(state.nodes.nodeMap) + .filter((item) => item.parentId === itemId) + .sort((a, b) => a.index - b.index) + .map((child) => child.id), + [state.nodes.nodeMap], ); const getNavigableChildrenIds = (itemId: string | null) => { diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.ts index af9da8dffe5c7..c382816220cb2 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.ts @@ -161,7 +161,7 @@ export const useTreeViewSelection: TreeViewPlugin lastSelectionWasRange.current = true; }; - const rangeSelectToFirst = (event: React.KeyboardEvent, itemId: string) => { + const rangeSelectToFirst = (event: React.KeyboardEvent, itemId: string) => { if (!lastSelectedNode.current) { lastSelectedNode.current = itemId; } @@ -174,7 +174,7 @@ export const useTreeViewSelection: TreeViewPlugin }); }; - const rangeSelectToLast = (event: React.KeyboardEvent, itemId: string) => { + const rangeSelectToLast = (event: React.KeyboardEvent, itemId: string) => { if (!lastSelectedNode.current) { lastSelectedNode.current = itemId; } diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.ts index e14cf7c8666d6..37d6324909cee 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.ts @@ -7,8 +7,8 @@ export interface UseTreeViewSelectionInstance { isNodeSelected: (itemId: string) => boolean; selectNode: (event: React.SyntheticEvent, itemId: string, multiple?: boolean) => void; selectRange: (event: React.SyntheticEvent, nodes: TreeViewItemRange, stacked?: boolean) => void; - rangeSelectToFirst: (event: React.KeyboardEvent, itemId: string) => void; - rangeSelectToLast: (event: React.KeyboardEvent, itemId: string) => void; + rangeSelectToFirst: (event: React.KeyboardEvent, itemId: string) => void; + rangeSelectToLast: (event: React.KeyboardEvent, itemId: string) => void; } type TreeViewSelectionValue = Multiple extends true diff --git a/packages/x-tree-view/src/internals/useTreeView/useTreeView.ts b/packages/x-tree-view/src/internals/useTreeView/useTreeView.ts index b8e847672800c..17f7d3769f4af 100644 --- a/packages/x-tree-view/src/internals/useTreeView/useTreeView.ts +++ b/packages/x-tree-view/src/internals/useTreeView/useTreeView.ts @@ -155,7 +155,6 @@ export const useTreeView = { const rootProps: UseTreeViewRootSlotProps = { role: 'tree', - tabIndex: 0, ...otherHandlers, ref: handleRootRef, }; diff --git a/packages/x-tree-view/src/internals/utils/utils.ts b/packages/x-tree-view/src/internals/utils/utils.ts index 71dc45b2f144d..5401ae664aab2 100644 --- a/packages/x-tree-view/src/internals/utils/utils.ts +++ b/packages/x-tree-view/src/internals/utils/utils.ts @@ -1,3 +1,4 @@ +// https://www.abeautifulsite.net/posts/finding-the-active-element-in-a-shadow-root/ export const getActiveElement = (root: Document | ShadowRoot = document): Element | null => { const activeEl = root.activeElement; diff --git a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.ts b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.ts index a23ecf339d03e..fcfcb93a19f0e 100644 --- a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.ts +++ b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.ts @@ -34,24 +34,44 @@ export const useTreeItem2 = (event: React.FocusEvent & MuiCancellableEvent) => { + (otherHandlers: EventHandlers) => + (event: React.FocusEvent & MuiCancellableEvent) => { otherHandlers.onFocus?.(event); if (event.defaultMuiPrevented) { return; } - // DOM focus stays on the tree which manages focus with aria-activedescendant - if (event.target === event.currentTarget) { - instance.focusRoot(); - } - const canBeFocused = !status.disabled || disabledItemsFocusable; if (!status.focused && canBeFocused && event.currentTarget === event.target) { instance.focusItem(event, itemId); } }; + const createRootHandleBlur = + (otherHandlers: EventHandlers) => + (event: React.FocusEvent & MuiCancellableEvent) => { + otherHandlers.onBlur?.(event); + + if (event.defaultMuiPrevented) { + return; + } + + instance.removeFocusedItem(); + }; + + const createRootHandleKeyDown = + (otherHandlers: EventHandlers) => + (event: React.KeyboardEvent & MuiCancellableEvent) => { + otherHandlers.onKeyDown?.(event); + + if (event.defaultMuiPrevented) { + return; + } + + instance.handleItemKeyDown(event, itemId); + }; + const createContentHandleClick = (otherHandlers: EventHandlers) => (event: React.MouseEvent & MuiCancellableEvent) => { otherHandlers.onClick?.(event); @@ -103,13 +123,15 @@ export const useTreeItem2 = ; + onFocus: MuiCancellableEventHandler>; + onBlur: MuiCancellableEventHandler>; + onKeyDown: MuiCancellableEventHandler>; ref: React.RefCallback; } From 22c774ee22a0e8c28406587c02b52455361060a7 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Tue, 19 Mar 2024 14:34:22 +0100 Subject: [PATCH 09/20] Bump core (#12499) --- docs/package.json | 12 +- package.json | 6 +- packages/x-charts/package.json | 6 +- packages/x-data-grid-generator/package.json | 2 +- packages/x-data-grid-premium/package.json | 4 +- packages/x-data-grid-pro/package.json | 4 +- packages/x-data-grid/package.json | 4 +- packages/x-date-pickers-pro/package.json | 6 +- packages/x-date-pickers/package.json | 6 +- packages/x-license/package.json | 2 +- packages/x-tree-view/package.json | 6 +- yarn.lock | 144 ++++++++++---------- 12 files changed, 101 insertions(+), 101 deletions(-) diff --git a/docs/package.json b/docs/package.json index 75a7b5f3ee778..753e6bcd105bb 100644 --- a/docs/package.json +++ b/docs/package.json @@ -26,12 +26,12 @@ "@emotion/react": "^11.11.4", "@emotion/server": "^11.11.0", "@emotion/styled": "^11.11.0", - "@mui/icons-material": "^5.15.9", - "@mui/joy": "^5.0.0-beta.27", - "@mui/lab": "^5.0.0-alpha.165", - "@mui/material": "^5.15.9", - "@mui/styles": "^5.15.9", - "@mui/utils": "^5.15.9", + "@mui/icons-material": "^5.15.14", + "@mui/joy": "^5.0.0-beta.32", + "@mui/lab": "^5.0.0-alpha.169", + "@mui/material": "^5.15.14", + "@mui/styles": "^5.15.14", + "@mui/utils": "^5.15.14", "@react-spring/web": "^9.7.3", "@trendmicro/react-interpolate": "^0.5.5", "@types/lodash": "^4.14.202", diff --git a/package.json b/package.json index 9c2387ee2ca1c..24d1c700fac1e 100644 --- a/package.json +++ b/package.json @@ -84,10 +84,10 @@ "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.0", "@mnajdova/enzyme-adapter-react-18": "^0.2.0", - "@mui/icons-material": "^5.15.9", - "@mui/material": "^5.15.9", + "@mui/icons-material": "^5.15.14", + "@mui/material": "^5.15.14", "@mui/monorepo": "https://github.com/mui/material-ui.git#master", - "@mui/utils": "^5.15.9", + "@mui/utils": "^5.15.14", "@next/eslint-plugin-next": "14.0.4", "@octokit/plugin-retry": "^6.0.1", "@octokit/rest": "^20.0.2", diff --git a/packages/x-charts/package.json b/packages/x-charts/package.json index 85f3bb57bb507..f159427f6eae6 100644 --- a/packages/x-charts/package.json +++ b/packages/x-charts/package.json @@ -39,9 +39,9 @@ }, "dependencies": { "@babel/runtime": "^7.24.0", - "@mui/base": "^5.0.0-beta.36", - "@mui/system": "^5.15.9", - "@mui/utils": "^5.15.9", + "@mui/base": "^5.0.0-beta.40", + "@mui/system": "^5.15.14", + "@mui/utils": "^5.15.14", "@react-spring/rafz": "^9.7.3", "@react-spring/web": "^9.7.3", "clsx": "^2.1.0", diff --git a/packages/x-data-grid-generator/package.json b/packages/x-data-grid-generator/package.json index 0ba9efa091f9e..e097faf0b225e 100644 --- a/packages/x-data-grid-generator/package.json +++ b/packages/x-data-grid-generator/package.json @@ -33,7 +33,7 @@ }, "dependencies": { "@babel/runtime": "^7.24.0", - "@mui/base": "^5.0.0-beta.36", + "@mui/base": "^5.0.0-beta.40", "@mui/x-data-grid-premium": "7.0.0-beta.7", "chance": "^1.1.11", "clsx": "^2.1.0", diff --git a/packages/x-data-grid-premium/package.json b/packages/x-data-grid-premium/package.json index 7e362f5b6ac16..98b0369aeb8d2 100644 --- a/packages/x-data-grid-premium/package.json +++ b/packages/x-data-grid-premium/package.json @@ -43,8 +43,8 @@ }, "dependencies": { "@babel/runtime": "^7.24.0", - "@mui/system": "^5.15.9", - "@mui/utils": "^5.15.9", + "@mui/system": "^5.15.14", + "@mui/utils": "^5.15.14", "@mui/x-data-grid": "7.0.0-beta.7", "@mui/x-data-grid-pro": "7.0.0-beta.7", "@mui/x-license": "7.0.0-beta.6", diff --git a/packages/x-data-grid-pro/package.json b/packages/x-data-grid-pro/package.json index 86eacf60fabbe..e854a3da2c97d 100644 --- a/packages/x-data-grid-pro/package.json +++ b/packages/x-data-grid-pro/package.json @@ -43,8 +43,8 @@ }, "dependencies": { "@babel/runtime": "^7.24.0", - "@mui/system": "^5.15.9", - "@mui/utils": "^5.15.9", + "@mui/system": "^5.15.14", + "@mui/utils": "^5.15.14", "@mui/x-data-grid": "7.0.0-beta.7", "@mui/x-license": "7.0.0-beta.6", "@types/format-util": "^1.0.4", diff --git a/packages/x-data-grid/package.json b/packages/x-data-grid/package.json index 3d0fb9944d210..41f0619973426 100644 --- a/packages/x-data-grid/package.json +++ b/packages/x-data-grid/package.json @@ -47,8 +47,8 @@ }, "dependencies": { "@babel/runtime": "^7.24.0", - "@mui/system": "^5.15.9", - "@mui/utils": "^5.15.9", + "@mui/system": "^5.15.14", + "@mui/utils": "^5.15.14", "clsx": "^2.1.0", "prop-types": "^15.8.1", "reselect": "^4.1.8" diff --git a/packages/x-date-pickers-pro/package.json b/packages/x-date-pickers-pro/package.json index 63f7862cfe44a..9d3fb05c38a89 100644 --- a/packages/x-date-pickers-pro/package.json +++ b/packages/x-date-pickers-pro/package.json @@ -42,9 +42,9 @@ }, "dependencies": { "@babel/runtime": "^7.24.0", - "@mui/base": "^5.0.0-beta.36", - "@mui/system": "^5.15.9", - "@mui/utils": "^5.15.9", + "@mui/base": "^5.0.0-beta.40", + "@mui/system": "^5.15.14", + "@mui/utils": "^5.15.14", "@mui/x-date-pickers": "7.0.0-beta.7", "@mui/x-license": "7.0.0-beta.6", "clsx": "^2.1.0", diff --git a/packages/x-date-pickers/package.json b/packages/x-date-pickers/package.json index 4bf22951c0ce0..f632410d6f6ea 100644 --- a/packages/x-date-pickers/package.json +++ b/packages/x-date-pickers/package.json @@ -45,9 +45,9 @@ }, "dependencies": { "@babel/runtime": "^7.24.0", - "@mui/base": "^5.0.0-beta.36", - "@mui/system": "^5.15.9", - "@mui/utils": "^5.15.9", + "@mui/base": "^5.0.0-beta.40", + "@mui/system": "^5.15.14", + "@mui/utils": "^5.15.14", "@types/react-transition-group": "^4.4.10", "clsx": "^2.1.0", "prop-types": "^15.8.1", diff --git a/packages/x-license/package.json b/packages/x-license/package.json index f640f9a2e22ce..87851acac3a19 100644 --- a/packages/x-license/package.json +++ b/packages/x-license/package.json @@ -34,7 +34,7 @@ }, "dependencies": { "@babel/runtime": "^7.24.0", - "@mui/utils": "^5.15.9" + "@mui/utils": "^5.15.14" }, "peerDependencies": { "react": "^17.0.0 || ^18.0.0" diff --git a/packages/x-tree-view/package.json b/packages/x-tree-view/package.json index 47319dacd2d45..b8986a8762bf7 100644 --- a/packages/x-tree-view/package.json +++ b/packages/x-tree-view/package.json @@ -43,9 +43,9 @@ }, "dependencies": { "@babel/runtime": "^7.24.0", - "@mui/base": "^5.0.0-beta.36", - "@mui/system": "^5.15.9", - "@mui/utils": "^5.15.9", + "@mui/base": "^5.0.0-beta.40", + "@mui/system": "^5.15.14", + "@mui/utils": "^5.15.14", "@types/react-transition-group": "^4.4.10", "clsx": "^2.1.0", "prop-types": "^15.8.1", diff --git a/yarn.lock b/yarn.lock index f6bb4b7a86e37..8471de5ce33c1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1912,28 +1912,28 @@ rimraf "^5.0.5" typescript "^5.3.3" -"@mui/base@5.0.0-beta.36", "@mui/base@^5.0.0-beta.36": - version "5.0.0-beta.36" - resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.36.tgz#29ca2de9d387f6d3943b6f18a84415c43e5f206c" - integrity sha512-6A8fYiXgjqTO6pgj31Hc8wm1M3rFYCxDRh09dBVk0L0W4cb2lnurRJa3cAyic6hHY+we1S58OdGYRbKmOsDpGQ== +"@mui/base@5.0.0-beta.40", "@mui/base@^5.0.0-beta.40": + version "5.0.0-beta.40" + resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.40.tgz#1f8a782f1fbf3f84a961e954c8176b187de3dae2" + integrity sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ== dependencies: "@babel/runtime" "^7.23.9" "@floating-ui/react-dom" "^2.0.8" - "@mui/types" "^7.2.13" - "@mui/utils" "^5.15.9" + "@mui/types" "^7.2.14" + "@mui/utils" "^5.15.14" "@popperjs/core" "^2.11.8" clsx "^2.1.0" prop-types "^15.8.1" -"@mui/core-downloads-tracker@^5.15.9": - version "5.15.9" - resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.9.tgz#c29138c70cc0fb49cd909c29beef3fb0647e5af7" - integrity sha512-CSDpVevGaxsvMkiYBZ8ztki1z/eT0mM2MqUT21eCRiMz3DU4zQw5rXG5ML/yTuJF9Z2Wv9SliIeaRAuSR/9Nig== +"@mui/core-downloads-tracker@^5.15.14": + version "5.15.14" + resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.14.tgz#f7c57b261904831877220182303761c012d05046" + integrity sha512-on75VMd0XqZfaQW+9pGjSNiqW+ghc5E2ZSLRBXwcXl/C4YzjfyjrLPhrEpKnR9Uym9KXBvxrhoHfPcczYHweyA== -"@mui/icons-material@^5.15.9": - version "5.15.9" - resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.15.9.tgz#8d11839d35cf3cfd62df40934d8e9485f66be620" - integrity sha512-6tLQoM6RylQuDnHR6qQay0G0pJgKmrhn5MIm0IfrwtmSO8eV5iUFR+nNUTXsWa24gt7ZbIKnJ962UlYaeXa4bg== +"@mui/icons-material@^5.15.14": + version "5.15.14" + resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.15.14.tgz#333468c94988d96203946d1cfeb8f4d7e8e7de34" + integrity sha512-vj/51k7MdFmt+XVw94sl30SCvGx6+wJLsNYjZRgxhS6y3UtnWnypMOsm3Kmg8TN+P0dqwsjy4/fX7B1HufJIhw== dependencies: "@babel/runtime" "^7.23.9" @@ -1953,44 +1953,44 @@ typescript "^5.3.3" uuid "^9.0.1" -"@mui/joy@^5.0.0-beta.27": - version "5.0.0-beta.27" - resolved "https://registry.yarnpkg.com/@mui/joy/-/joy-5.0.0-beta.27.tgz#b408b3312d2408d6c4648ccb14881af68545ad88" - integrity sha512-WuyE3c8l77Ph5aBPd9FZAfScx+bMxDS0dLpe5+cno2fMFW1Hua1muTd1Id2e3hebNMwos1NzqaeYFXHgd1yfBw== +"@mui/joy@^5.0.0-beta.32": + version "5.0.0-beta.32" + resolved "https://registry.yarnpkg.com/@mui/joy/-/joy-5.0.0-beta.32.tgz#a7cd6b35b18f812210fe5e089a0aedda8dddd286" + integrity sha512-QJW5Mu2GTJUX4sXjxt4nQBugpJAiSkUT49S/bwoKCCWx8bCfsEyplTzZPK+FraweiGhGgZWExWOTAPpxH83RUQ== dependencies: "@babel/runtime" "^7.23.9" - "@mui/base" "5.0.0-beta.36" - "@mui/core-downloads-tracker" "^5.15.9" - "@mui/system" "^5.15.9" - "@mui/types" "^7.2.13" - "@mui/utils" "^5.15.9" + "@mui/base" "5.0.0-beta.40" + "@mui/core-downloads-tracker" "^5.15.14" + "@mui/system" "^5.15.14" + "@mui/types" "^7.2.14" + "@mui/utils" "^5.15.14" clsx "^2.1.0" prop-types "^15.8.1" -"@mui/lab@^5.0.0-alpha.165": - version "5.0.0-alpha.165" - resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.165.tgz#7fd60d26597f60b1dbf7d3ddbd646fcece276385" - integrity sha512-8/zJStT10nh9yrAzLOPTICGhpf5YiGp/JpM0bdTP7u5AE+YT+X2u6QwMxuCrVeW8/WVLAPFg0vtzyfgPcN5T7g== +"@mui/lab@^5.0.0-alpha.169": + version "5.0.0-alpha.169" + resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.169.tgz#85b88b2f06ad78c586cde2b47970653e5fd895eb" + integrity sha512-h6xe1K6ISKUbyxTDgdvql4qoDP6+q8ad5fg9nXQxGLUrIeT2jVrBuT/jRECSTufbnhzP+V5kulvYxaMfM8rEdA== dependencies: "@babel/runtime" "^7.23.9" - "@mui/base" "5.0.0-beta.36" - "@mui/system" "^5.15.9" - "@mui/types" "^7.2.13" - "@mui/utils" "^5.15.9" + "@mui/base" "5.0.0-beta.40" + "@mui/system" "^5.15.14" + "@mui/types" "^7.2.14" + "@mui/utils" "^5.15.14" clsx "^2.1.0" prop-types "^15.8.1" -"@mui/material@^5.15.9": - version "5.15.9" - resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.15.9.tgz#4d6a4aee002c6a2d0e174e08c6d23245c18dd828" - integrity sha512-kbHTZDcFmN8GHKzRpImUEl9AJfFWI/0Kl+DsYVT3kHzQWUuHiKm3uHXR1RCOqr7H8IgHFPdbxItmCSQ/mj7zgg== +"@mui/material@^5.15.14": + version "5.15.14" + resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.15.14.tgz#a40bd5eccfa9fc925535e1f4d70c6cef77fa3a75" + integrity sha512-kEbRw6fASdQ1SQ7LVdWR5OlWV3y7Y54ZxkLzd6LV5tmz+NpO3MJKZXSfgR0LHMP7meKsPiMm4AuzV0pXDpk/BQ== dependencies: "@babel/runtime" "^7.23.9" - "@mui/base" "5.0.0-beta.36" - "@mui/core-downloads-tracker" "^5.15.9" - "@mui/system" "^5.15.9" - "@mui/types" "^7.2.13" - "@mui/utils" "^5.15.9" + "@mui/base" "5.0.0-beta.40" + "@mui/core-downloads-tracker" "^5.15.14" + "@mui/system" "^5.15.14" + "@mui/types" "^7.2.14" + "@mui/utils" "^5.15.14" "@types/react-transition-group" "^4.4.10" clsx "^2.1.0" csstype "^3.1.3" @@ -2007,35 +2007,35 @@ execa "^8.0.1" google-auth-library "^9.5.0" -"@mui/private-theming@^5.15.9": - version "5.15.9" - resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.15.9.tgz#3ea3514ed2f6bf68541dbe9206665a82cd89cb01" - integrity sha512-/aMJlDOxOTAXyp4F2rIukW1O0anodAMCkv1DfBh/z9vaKHY3bd5fFf42wmP+0GRmwMinC5aWPpNfHXOED1fEtg== +"@mui/private-theming@^5.15.14": + version "5.15.14" + resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.15.14.tgz#edd9a82948ed01586a01c842eb89f0e3f68970ee" + integrity sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw== dependencies: "@babel/runtime" "^7.23.9" - "@mui/utils" "^5.15.9" + "@mui/utils" "^5.15.14" prop-types "^15.8.1" -"@mui/styled-engine@^5.15.9": - version "5.15.9" - resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.15.9.tgz#444605039ec3fe456bdd5d5cb94330183be62b91" - integrity sha512-NRKtYkL5PZDH7dEmaLEIiipd3mxNnQSO+Yo8rFNBNptY8wzQnQ+VjayTq39qH7Sast5cwHKYFusUrQyD+SS4Og== +"@mui/styled-engine@^5.15.14": + version "5.15.14" + resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.15.14.tgz#168b154c4327fa4ccc1933a498331d53f61c0de2" + integrity sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw== dependencies: "@babel/runtime" "^7.23.9" "@emotion/cache" "^11.11.0" csstype "^3.1.3" prop-types "^15.8.1" -"@mui/styles@^5.15.9": - version "5.15.9" - resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.15.9.tgz#b123e49c52578911354abd7adf9b63a9c360461d" - integrity sha512-xwQ1uI2rB6Ra9fZM0jPjmUWsr2Jbtf8+VMNs7DiallJDrzdmmvHzBkVe74bTWWmHq1HdsYIz2vIcH0wnFYGe4Q== +"@mui/styles@^5.15.14": + version "5.15.14" + resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.15.14.tgz#b0f157ccbb4270bbda68e518b035fb3b71cc7470" + integrity sha512-EspFoCqLf3BadSIRM5dBqrrbE0hioI6/YZXDGzvcPsedQ7j7wAdcIs9Ex6TVqrRUADNWI/Azg6/mhcqWiBDFOg== dependencies: "@babel/runtime" "^7.23.9" "@emotion/hash" "^0.9.1" - "@mui/private-theming" "^5.15.9" - "@mui/types" "^7.2.13" - "@mui/utils" "^5.15.9" + "@mui/private-theming" "^5.15.14" + "@mui/types" "^7.2.14" + "@mui/utils" "^5.15.14" clsx "^2.1.0" csstype "^3.1.3" hoist-non-react-statics "^3.3.2" @@ -2049,29 +2049,29 @@ jss-plugin-vendor-prefixer "^10.10.0" prop-types "^15.8.1" -"@mui/system@^5.15.9": - version "5.15.9" - resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.15.9.tgz#8a34ac0ab133af2550cc7ab980a35174142fd265" - integrity sha512-SxkaaZ8jsnIJ77bBXttfG//LUf6nTfOcaOuIgItqfHv60ZCQy/Hu7moaob35kBb+guxVJnoSZ+7vQJrA/E7pKg== +"@mui/system@^5.15.14": + version "5.15.14" + resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.15.14.tgz#8a0c6571077eeb6b5f1ff7aa7ff6a3dc4a14200d" + integrity sha512-auXLXzUaCSSOLqJXmsAaq7P96VPRXg2Rrz6OHNV7lr+kB8lobUF+/N84Vd9C4G/wvCXYPs5TYuuGBRhcGbiBGg== dependencies: "@babel/runtime" "^7.23.9" - "@mui/private-theming" "^5.15.9" - "@mui/styled-engine" "^5.15.9" - "@mui/types" "^7.2.13" - "@mui/utils" "^5.15.9" + "@mui/private-theming" "^5.15.14" + "@mui/styled-engine" "^5.15.14" + "@mui/types" "^7.2.14" + "@mui/utils" "^5.15.14" clsx "^2.1.0" csstype "^3.1.3" prop-types "^15.8.1" -"@mui/types@^7.2.13": - version "7.2.13" - resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.13.tgz#d1584912942f9dc042441ecc2d1452be39c666b8" - integrity sha512-qP9OgacN62s+l8rdDhSFRe05HWtLLJ5TGclC9I1+tQngbssu0m2dmFZs+Px53AcOs9fD7TbYd4gc9AXzVqO/+g== +"@mui/types@^7.2.14": + version "7.2.14" + resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.14.tgz#8a02ac129b70f3d82f2f9b76ded2c8d48e3fc8c9" + integrity sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ== -"@mui/utils@^5.15.9": - version "5.15.9" - resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.15.9.tgz#2bdf925e274d87cbe90c14eb52d0835318205e86" - integrity sha512-yDYfr61bCYUz1QtwvpqYy/3687Z8/nS4zv7lv/ih/6ZFGMl1iolEvxRmR84v2lOYxlds+kq1IVYbXxDKh8Z9sg== +"@mui/utils@^5.15.14": + version "5.15.14" + resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.15.14.tgz#e414d7efd5db00bfdc875273a40c0a89112ade3a" + integrity sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA== dependencies: "@babel/runtime" "^7.23.9" "@types/prop-types" "^15.7.11" From c9f1006752a321011f7ae4b6754a47f801f4d0d0 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Tue, 19 Mar 2024 14:52:35 +0100 Subject: [PATCH 10/20] [docs] Update links to v6 (#12496) --- docs/pages/_app.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/pages/_app.js b/docs/pages/_app.js index b9ca17827e0a7..76826c3c75eff 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -215,7 +215,7 @@ function AppWrapper(props) { text: `v${process.env.LIB_VERSION}`, current: true, }, - { text: 'v6', href: `https://mui.com${languagePrefix}/x/introduction/` }, + { text: 'v6', href: `https://v6.mui.com${languagePrefix}/x/introduction/` }, { text: 'v5', href: `https://v5.mui.com${languagePrefix}/x/introduction/` }, { text: 'v4', href: `https://v4.mui.com${languagePrefix}/components/data-grid/` }, ], @@ -230,7 +230,7 @@ function AppWrapper(props) { text: `v${process.env.DATA_GRID_VERSION}`, current: true, }, - { text: 'v6', href: `https://mui.com${languagePrefix}/x/react-data-grid/` }, + { text: 'v6', href: `https://v6.mui.com${languagePrefix}/x/react-data-grid/` }, { text: 'v5', href: `https://v5.mui.com${languagePrefix}/x/react-data-grid/` }, { text: 'v4', href: `https://v4.mui.com${languagePrefix}/components/data-grid/` }, ], @@ -246,7 +246,7 @@ function AppWrapper(props) { }, { text: 'v6', - href: `https://mui.com${languagePrefix}/x/react-date-pickers/`, + href: `https://v6.mui.com${languagePrefix}/x/react-date-pickers/`, }, { text: 'v5', @@ -263,7 +263,7 @@ function AppWrapper(props) { text: `v${process.env.CHARTS_VERSION}`, current: true, }, - { text: 'v6', href: `https://mui.com${languagePrefix}/x/react-charts/` }, + { text: 'v6', href: `https://v6.mui.com${languagePrefix}/x/react-charts/` }, ], }; } else if (productId === 'x-tree-view') { @@ -277,7 +277,7 @@ function AppWrapper(props) { }, { text: 'v6', - href: `https://mui.com${languagePrefix}/x/react-tree-view/getting-started`, + href: `https://v6.mui.com${languagePrefix}/x/react-tree-view/getting-started`, }, ], }; From aea5ef70c47f3eece1cc8139b12746c86f0b5871 Mon Sep 17 00:00:00 2001 From: Nora <72460825+noraleonte@users.noreply.github.com> Date: Tue, 19 Mar 2024 15:56:59 +0200 Subject: [PATCH 11/20] [docs] Update links to v7 docs (#12500) --- docs/translations/api-docs/tree-view/tree-view/tree-view.json | 2 +- .../src/internals/hooks/useField/useFieldV7TextField.ts | 2 +- packages/x-tree-view/src/RichTreeView/RichTreeView.tsx | 2 +- packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx | 2 +- packages/x-tree-view/src/TreeView/TreeView.tsx | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/translations/api-docs/tree-view/tree-view/tree-view.json b/docs/translations/api-docs/tree-view/tree-view/tree-view.json index a8a98ee8ae876..c6d01a54bd44e 100644 --- a/docs/translations/api-docs/tree-view/tree-view/tree-view.json +++ b/docs/translations/api-docs/tree-view/tree-view/tree-view.json @@ -1,5 +1,5 @@ { - "componentDescription": "This component has been deprecated in favor of the new `SimpleTreeView` component.\nYou can have a look at how to migrate to the new component in the v7 [migration guide](https://next.mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview)", + "componentDescription": "This component has been deprecated in favor of the new `SimpleTreeView` component.\nYou can have a look at how to migrate to the new component in the v7 [migration guide](https://mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview)", "propDescriptions": { "apiRef": { "description": "The ref object that allows Tree View manipulation. Can be instantiated with useTreeViewApiRef()." diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV7TextField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldV7TextField.ts index c0c707676fd12..ec2457a8d76b6 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV7TextField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldV7TextField.ts @@ -494,7 +494,7 @@ export const useFieldV7TextField: UseFieldTextField = (params) => { '', '', '', - 'Learn more about the field accessible DOM structure on the MUI documentation: https://next.mui.com/x/react-date-pickers/fields/#fields-to-edit-a-single-element', + 'Learn more about the field accessible DOM structure on the MUI documentation: https://mui.com/x/react-date-pickers/fields/#fields-to-edit-a-single-element', ].join('\n'), ); } diff --git a/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx b/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx index 27f3df1b64cfc..051e56a30c5d8 100644 --- a/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx +++ b/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx @@ -62,7 +62,7 @@ function WrappedTreeItem({ const childrenWarning = buildWarning([ 'MUI X: The `RichTreeView` component does not support JSX children.', 'If you want to add items, you need to use the `items` prop', - 'Check the documentation for more details: https://next.mui.com/x/react-tree-view/rich-tree-view/items/', + 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/', ]); /** diff --git a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx index 54c093ba1b5b6..c78cd8dcd2538 100644 --- a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx +++ b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx @@ -47,7 +47,7 @@ const EMPTY_ITEMS: any[] = []; const itemsPropWarning = buildWarning([ 'MUI X: The `SimpleTreeView` component does not support the `items` prop.', 'If you want to add items, you need to pass them as JSX children.', - 'Check the documentation for more details: https://next.mui.com/x/react-tree-view/simple-tree-view/items/', + 'Check the documentation for more details: https://mui.com/x/react-tree-view/simple-tree-view/items/', ]); /** diff --git a/packages/x-tree-view/src/TreeView/TreeView.tsx b/packages/x-tree-view/src/TreeView/TreeView.tsx index 6cc59d4ff1623..5d21d2a0d7aca 100644 --- a/packages/x-tree-view/src/TreeView/TreeView.tsx +++ b/packages/x-tree-view/src/TreeView/TreeView.tsx @@ -48,7 +48,7 @@ const warn = () => { /** * This component has been deprecated in favor of the new `SimpleTreeView` component. - * You can have a look at how to migrate to the new component in the v7 [migration guide](https://next.mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview) + * You can have a look at how to migrate to the new component in the v7 [migration guide](https://mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview) * * Demos: * From d968a6391227097623176041b03abeb8199f98dd Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Tue, 19 Mar 2024 19:21:17 +0500 Subject: [PATCH 12/20] [DataGrid] Allow to control the grid density (#12332) Signed-off-by: Bilal Shafi Co-authored-by: Flavien DELANGLE Co-authored-by: Andrew Cherniavskii --- .../accessibility/DensitySelectorSmallGrid.js | 8 +- .../DensitySelectorSmallGrid.tsx | 9 +- .../DensitySelectorSmallGrid.tsx.preview | 6 +- .../data-grid/accessibility/accessibility.md | 50 +++- docs/data/data-grid/events/events.json | 7 + .../migration-data-grid-v6.md | 26 ++ .../x/api/data-grid/data-grid-premium.json | 7 + docs/pages/x/api/data-grid/data-grid-pro.json | 7 + docs/pages/x/api/data-grid/data-grid.json | 7 + docs/pages/x/api/data-grid/selectors.json | 8 +- .../data-grid-premium/data-grid-premium.json | 4 + .../data-grid-pro/data-grid-pro.json | 4 + .../data-grid/data-grid/data-grid.json | 4 + .../src/DataGridPremium/DataGridPremium.tsx | 5 + .../src/DataGridPro/DataGridPro.tsx | 5 + .../x-data-grid/src/DataGrid/DataGrid.tsx | 5 + .../src/DataGrid/useDataGridProps.ts | 1 - .../src/components/containers/GridRoot.tsx | 6 +- .../toolbar/GridToolbarDensitySelector.tsx | 10 +- .../hooks/features/density/densitySelector.ts | 17 +- .../hooks/features/density/densityState.ts | 5 +- .../hooks/features/density/useGridDensity.tsx | 59 ++--- .../src/models/events/gridEventLookup.ts | 5 + .../src/models/gridStateCommunity.ts | 1 + .../src/models/props/DataGridProps.ts | 15 +- .../src/tests/density.DataGrid.test.tsx | 229 ++++++++++++++++++ .../src/tests/rows.DataGrid.test.tsx | 2 +- .../src/tests/toolbar.DataGrid.test.tsx | 114 +-------- scripts/x-data-grid-premium.exports.json | 5 +- scripts/x-data-grid-pro.exports.json | 5 +- scripts/x-data-grid.exports.json | 5 +- 31 files changed, 448 insertions(+), 193 deletions(-) create mode 100644 packages/x-data-grid/src/tests/density.DataGrid.test.tsx diff --git a/docs/data/data-grid/accessibility/DensitySelectorSmallGrid.js b/docs/data/data-grid/accessibility/DensitySelectorSmallGrid.js index d9d61b7c7433f..9fe1c320f95be 100644 --- a/docs/data/data-grid/accessibility/DensitySelectorSmallGrid.js +++ b/docs/data/data-grid/accessibility/DensitySelectorSmallGrid.js @@ -15,6 +15,8 @@ function CustomToolbar() { } export default function DensitySelectorSmallGrid() { + const [density, setDensity] = React.useState('compact'); + const { data } = useDemoData({ dataSet: 'Commodity', rowLength: 4, @@ -25,7 +27,11 @@ export default function DensitySelectorSmallGrid() {
{ + console.info(`Density updated to: ${newDensity}`); + setDensity(newDensity); + }} slots={{ toolbar: CustomToolbar, }} diff --git a/docs/data/data-grid/accessibility/DensitySelectorSmallGrid.tsx b/docs/data/data-grid/accessibility/DensitySelectorSmallGrid.tsx index d9d61b7c7433f..d7d04073e9425 100644 --- a/docs/data/data-grid/accessibility/DensitySelectorSmallGrid.tsx +++ b/docs/data/data-grid/accessibility/DensitySelectorSmallGrid.tsx @@ -3,6 +3,7 @@ import { DataGrid, GridToolbarContainer, GridToolbarDensitySelector, + GridDensity, } from '@mui/x-data-grid'; import { useDemoData } from '@mui/x-data-grid-generator'; @@ -15,6 +16,8 @@ function CustomToolbar() { } export default function DensitySelectorSmallGrid() { + const [density, setDensity] = React.useState('compact'); + const { data } = useDemoData({ dataSet: 'Commodity', rowLength: 4, @@ -25,7 +28,11 @@ export default function DensitySelectorSmallGrid() {
{ + console.info(`Density updated to: ${newDensity}`); + setDensity(newDensity); + }} slots={{ toolbar: CustomToolbar, }} diff --git a/docs/data/data-grid/accessibility/DensitySelectorSmallGrid.tsx.preview b/docs/data/data-grid/accessibility/DensitySelectorSmallGrid.tsx.preview index 9d198ee8add6a..cd87eee43b444 100644 --- a/docs/data/data-grid/accessibility/DensitySelectorSmallGrid.tsx.preview +++ b/docs/data/data-grid/accessibility/DensitySelectorSmallGrid.tsx.preview @@ -1,6 +1,10 @@ { + console.info(`Density updated to: ${newDensity}`); + setDensity(newDensity); + }} slots={{ toolbar: CustomToolbar, }} diff --git a/docs/data/data-grid/accessibility/accessibility.md b/docs/data/data-grid/accessibility/accessibility.md index 3a54c27b73b07..afb47c68a23a7 100644 --- a/docs/data/data-grid/accessibility/accessibility.md +++ b/docs/data/data-grid/accessibility/accessibility.md @@ -22,22 +22,56 @@ The [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/grid You can change the density of the rows and the column header. -### Density selector +### Density selection from the toolbar -To enable the density selector, create a toolbar containing the `GridToolbarDensitySelector` component and apply it using the `toolbar` property in the Data Grid's `slots` prop. -The user can then change the density of the Data Grid by using the density selector from the toolbar, as the following demo illustrates: +To enable the density selection from the toolbar, you can do one of the following: + +1. Enable the default toolbar component by passing the `slots.toolbar` prop to the Data Grid. +2. Create a specific toolbar containing only the `GridToolbarDensitySelector` component and apply it using the `toolbar` property in the Data Grid's `slots` prop. + +The user can then change the density of the Data Grid by using the density selection menu from the toolbar, as the following demo illustrates: {{"demo": "DensitySelectorGrid.js", "bg": "inline"}} -To hide the density selector, add the `disableDensitySelector` prop to the Data Grid. +To disable the density selection menu, pass the `disableDensitySelector` prop to the Data Grid. + +### Set the density programmatically + +The Data Grid exposes the `density` prop which supports the following values: + +- `standard` (default) +- `compact` +- `comfortable` + +You can set the density programmatically in one of the following ways: + +1. Uncontrolled – initialize the density with the `initialState.density` prop. + + ```tsx + + ``` + +2. Controlled – pass the `density` and `onDensityChange` props. For more advanced use cases, you can also subscribe to the `densityChange` grid event. + + ```tsx + const [density, setDensity] = React.useState('compact'); -### Density prop + return ( + setDensity(newDensity)} + /> + ); + ``` -Set the vertical density of the Data Grid using the `density` prop. -This prop applies the values determined by the `rowHeight` and `columnHeaderHeight` props, if supplied. +The `density` prop applies the values determined by the `rowHeight` and `columnHeaderHeight` props, if supplied. The user can override this setting with the optional toolbar density selector. -The following demo shows a Data Grid with the default density set to `compact`: +The following demo shows a Data Grid with the controlled density set to `compact` and outputs the current density to the console when the user changes it using the density selector from the toolbar: {{"demo": "DensitySelectorSmallGrid.js", "bg": "inline"}} diff --git a/docs/data/data-grid/events/events.json b/docs/data/data-grid/events/events.json index 6bb6029718fa7..64c820e1c397d 100644 --- a/docs/data/data-grid/events/events.json +++ b/docs/data/data-grid/events/events.json @@ -202,6 +202,13 @@ "event": "MuiEvent<{}>", "componentProp": "onResize" }, + { + "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"], + "name": "densityChange", + "description": "Fired when the density changes.", + "params": "GridDensity", + "event": "MuiEvent<{}>" + }, { "projects": ["x-data-grid-premium"], "name": "excelExportStateChange", diff --git a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md index 8e693b6e8e61c..fd89b82c9ecda 100644 --- a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md +++ b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md @@ -303,6 +303,32 @@ See the [Direct state access](/x/react-data-grid/state/#direct-selector-access) + groupingValueGetter: (value: { name: string }) => value.name, ``` +### Density + +- The `density` is a [controlled prop](/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 + +``` + +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('compact'); + setDensity(newDensity)} + /> +``` + +- The selector `gridDensityValueSelector` was removed, use the `gridDensitySelector` instead. + diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json index 559aa75b2e3f4..4c43103ed7e0b 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -361,6 +361,13 @@ "describedArgs": ["params", "event", "details"] } }, + "onDensityChange": { + "type": { "name": "func" }, + "signature": { + "type": "function(density: GridDensity) => void", + "describedArgs": ["density"] + } + }, "onDetailPanelExpandedRowIdsChange": { "type": { "name": "func" }, "signature": { diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json index 198c5f68c6da7..6c2382cfa2982 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -318,6 +318,13 @@ "describedArgs": ["params", "event", "details"] } }, + "onDensityChange": { + "type": { "name": "func" }, + "signature": { + "type": "function(density: GridDensity) => void", + "describedArgs": ["density"] + } + }, "onDetailPanelExpandedRowIdsChange": { "type": { "name": "func" }, "signature": { diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index 468423143dd70..9fd2b885eb548 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -278,6 +278,13 @@ "describedArgs": ["params", "event", "details"] } }, + "onDensityChange": { + "type": { "name": "func" }, + "signature": { + "type": "function(density: GridDensity) => void", + "describedArgs": ["density"] + } + }, "onFilterModelChange": { "type": { "name": "func" }, "signature": { diff --git a/docs/pages/x/api/data-grid/selectors.json b/docs/pages/x/api/data-grid/selectors.json index fc2fa812d4817..1140b1bf1d946 100644 --- a/docs/pages/x/api/data-grid/selectors.json +++ b/docs/pages/x/api/data-grid/selectors.json @@ -124,15 +124,9 @@ }, { "name": "gridDensitySelector", - "returnType": "GridDensityState", - "description": "", - "supportsApiRef": false - }, - { - "name": "gridDensityValueSelector", "returnType": "GridDensity", "description": "", - "supportsApiRef": true + "supportsApiRef": false }, { "name": "gridDetailPanelExpandedRowIdsSelector", diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json index 96b941032c92d..55da4f984364f 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json @@ -394,6 +394,10 @@ "details": "Additional details for this callback." } }, + "onDensityChange": { + "description": "Callback fired when the density changes.", + "typeDescriptions": { "density": "New density value." } + }, "onDetailPanelExpandedRowIdsChange": { "description": "Callback fired when the detail panel of a row is opened or closed.", "typeDescriptions": { diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json index c4f04eb81c606..32c54712411fd 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json @@ -351,6 +351,10 @@ "details": "Additional details for this callback." } }, + "onDensityChange": { + "description": "Callback fired when the density changes.", + "typeDescriptions": { "density": "New density value." } + }, "onDetailPanelExpandedRowIdsChange": { "description": "Callback fired when the detail panel of a row is opened or closed.", "typeDescriptions": { diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json index c6d25a3f35a80..a9dd4e497f260 100644 --- a/docs/translations/api-docs/data-grid/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid/data-grid.json @@ -295,6 +295,10 @@ "details": "Additional details for this callback." } }, + "onDensityChange": { + "description": "Callback fired when the density changes.", + "typeDescriptions": { "density": "New density value." } + }, "onFilterModelChange": { "description": "Callback fired when the Filter model changes before the filters are applied.", "typeDescriptions": { diff --git a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index a411583a776c3..8991449eda96b 100644 --- a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -678,6 +678,11 @@ DataGridPremiumRaw.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 detail panel of a row is opened or closed. * @param {GridRowId[]} ids The ids of the rows which have the detail panel open. diff --git a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx index 55bae26091799..df1e21319472d 100644 --- a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -591,6 +591,11 @@ DataGridProRaw.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 detail panel of a row is opened or closed. * @param {GridRowId[]} ids The ids of the rows which have the detail panel open. diff --git a/packages/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/x-data-grid/src/DataGrid/DataGrid.tsx index 475dc646e981f..fe0f14bbb9d6c 100644 --- a/packages/x-data-grid/src/DataGrid/DataGrid.tsx +++ b/packages/x-data-grid/src/DataGrid/DataGrid.tsx @@ -506,6 +506,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]]. diff --git a/packages/x-data-grid/src/DataGrid/useDataGridProps.ts b/packages/x-data-grid/src/DataGrid/useDataGridProps.ts index b0f91d49cf291..3759d21e04241 100644 --- a/packages/x-data-grid/src/DataGrid/useDataGridProps.ts +++ b/packages/x-data-grid/src/DataGrid/useDataGridProps.ts @@ -36,7 +36,6 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES: DataGridPropsWithDefaultValues = { columnThreshold: 3, rowThreshold: 3, rowSelection: true, - density: 'standard', disableColumnFilter: false, disableColumnMenu: false, disableColumnSelector: false, diff --git a/packages/x-data-grid/src/components/containers/GridRoot.tsx b/packages/x-data-grid/src/components/containers/GridRoot.tsx index b42fcb4341ed4..a8e56cecfc30a 100644 --- a/packages/x-data-grid/src/components/containers/GridRoot.tsx +++ b/packages/x-data-grid/src/components/containers/GridRoot.tsx @@ -14,7 +14,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 { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { GridDensity } from '../../models/gridDensity'; @@ -55,13 +55,13 @@ const GridRoot = React.forwardRef(function GridRo const rootProps = useGridRootProps(); const { children, className, ...other } = props; 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 = { ...rootProps, - density: densityValue, + density, }; const classes = useUtilityClasses(ownerState); diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx index 1c4b0b6a63511..4c790f2ee720b 100644 --- a/packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx +++ b/packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx @@ -6,7 +6,7 @@ import { ButtonProps } from '@mui/material/Button'; import { TooltipProps } from '@mui/material/Tooltip'; 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 { GridDensity } from '../../models/gridDensity'; import { isHideMenuKey, isTabKey } from '../../utils/keyboardUtils'; import { useGridApiContext } from '../../hooks/utils/useGridApiContext'; @@ -33,7 +33,7 @@ const GridToolbarDensitySelector = React.forwardRef< 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(); @@ -60,7 +60,7 @@ const GridToolbarDensitySelector = React.forwardRef< ]; const startIcon = React.useMemo(() => { - switch (densityValue) { + switch (density) { case 'compact': return ; case 'comfortable': @@ -68,7 +68,7 @@ const GridToolbarDensitySelector = React.forwardRef< default: return ; } - }, [densityValue, rootProps]); + }, [density, rootProps]); const handleDensitySelectorOpen = (event: React.MouseEvent) => { setOpen((prevOpen) => !prevOpen); @@ -100,7 +100,7 @@ const GridToolbarDensitySelector = React.forwardRef< handleDensityUpdate(option.value)} - selected={option.value === densityValue} + selected={option.value === density} > {option.icon} {option.label} diff --git a/packages/x-data-grid/src/hooks/features/density/densitySelector.ts b/packages/x-data-grid/src/hooks/features/density/densitySelector.ts index 277cc3cfbfc61..0fcbacc3ec7f4 100644 --- a/packages/x-data-grid/src/hooks/features/density/densitySelector.ts +++ b/packages/x-data-grid/src/hooks/features/density/densitySelector.ts @@ -1,14 +1,19 @@ import { createSelector } from '../../../utils/createSelector'; import { GridStateCommunity } from '../../../models/gridStateCommunity'; +import { GridDensity } from '../../../models/gridDensity'; -export const gridDensitySelector = (state: GridStateCommunity) => state.density; +export const COMPACT_DENSITY_FACTOR = 0.7; +export const COMFORTABLE_DENSITY_FACTOR = 1.3; -export const gridDensityValueSelector = createSelector( - gridDensitySelector, - (density) => density.value, -); +const DENSITY_FACTORS: Record = { + compact: COMPACT_DENSITY_FACTOR, + comfortable: COMFORTABLE_DENSITY_FACTOR, + standard: 1, +}; + +export const gridDensitySelector = (state: GridStateCommunity) => state.density; export const gridDensityFactorSelector = createSelector( gridDensitySelector, - (density) => density.factor, + (density) => DENSITY_FACTORS[density], ); diff --git a/packages/x-data-grid/src/hooks/features/density/densityState.ts b/packages/x-data-grid/src/hooks/features/density/densityState.ts index bebaa1844b514..fdc6aa28a9a10 100644 --- a/packages/x-data-grid/src/hooks/features/density/densityState.ts +++ b/packages/x-data-grid/src/hooks/features/density/densityState.ts @@ -1,6 +1,3 @@ import { GridDensity } from '../../../models/gridDensity'; -export interface GridDensityState { - value: GridDensity; - factor: number; -} +export type GridDensityState = GridDensity; diff --git a/packages/x-data-grid/src/hooks/features/density/useGridDensity.tsx b/packages/x-data-grid/src/hooks/features/density/useGridDensity.tsx index 3b3bf2d7dab45..172b161c2cdbf 100644 --- a/packages/x-data-grid/src/hooks/features/density/useGridDensity.tsx +++ b/packages/x-data-grid/src/hooks/features/density/useGridDensity.tsx @@ -1,59 +1,52 @@ import * as React from 'react'; -import { GridDensity } from '../../../models/gridDensity'; +import useEventCallback from '@mui/utils/useEventCallback'; import { useGridLogger } from '../../utils/useGridLogger'; import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity'; import { useGridApiMethod } from '../../utils/useGridApiMethod'; import { GridDensityApi } from '../../../models/api/gridDensityApi'; import { DataGridProcessedProps } from '../../../models/props/DataGridProps'; import { gridDensitySelector } from './densitySelector'; -import { isDeepEqual } from '../../../utils/utils'; import { GridStateInitializer } from '../../utils/useGridInitializeState'; -export const COMPACT_DENSITY_FACTOR = 0.7; -export const COMFORTABLE_DENSITY_FACTOR = 1.3; - -const DENSITY_FACTORS: Record = { - compact: COMPACT_DENSITY_FACTOR, - comfortable: COMFORTABLE_DENSITY_FACTOR, - standard: 1, -}; - export const densityStateInitializer: GridStateInitializer< - Pick + Pick > = (state, props) => ({ ...state, - density: { value: props.density, factor: DENSITY_FACTORS[props.density] }, + density: props.initialState?.density ?? props.density ?? 'standard', }); export const useGridDensity = ( apiRef: React.MutableRefObject, - props: Pick, + props: Pick, ): void => { const logger = useGridLogger(apiRef, 'useDensity'); - const setDensity = React.useCallback( - (newDensity): void => { - logger.debug(`Set grid density to ${newDensity}`); - apiRef.current.setState((state) => { - const currentDensityState = gridDensitySelector(state); - const newDensityState = { value: newDensity, factor: DENSITY_FACTORS[newDensity] }; + apiRef.current.registerControlState({ + stateId: 'density', + propModel: props.density, + propOnChange: props.onDensityChange, + stateSelector: gridDensitySelector, + changeEvent: 'densityChange', + }); + + const setDensity = useEventCallback((newDensity): void => { + const currentDensity = gridDensitySelector(apiRef.current.state); + if (currentDensity === newDensity) { + return; + } - if (isDeepEqual(currentDensityState, newDensityState)) { - return state; - } + logger.debug(`Set grid density to ${newDensity}`); - return { - ...state, - density: newDensityState, - }; - }); - apiRef.current.forceUpdate(); - }, - [logger, apiRef], - ); + apiRef.current.setState((state) => ({ + ...state, + density: newDensity, + })); + }); React.useEffect(() => { - apiRef.current.setDensity(props.density); + if (props.density) { + apiRef.current.setDensity(props.density); + } }, [apiRef, props.density]); const densityApi: GridDensityApi = { diff --git a/packages/x-data-grid/src/models/events/gridEventLookup.ts b/packages/x-data-grid/src/models/events/gridEventLookup.ts index 451988f596a1d..5f29dceffb45d 100644 --- a/packages/x-data-grid/src/models/events/gridEventLookup.ts +++ b/packages/x-data-grid/src/models/events/gridEventLookup.ts @@ -25,6 +25,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 { /** @@ -362,6 +363,10 @@ export interface GridControlledStateEventLookup { * Fired when the row count change. */ rowCountChange: { params: number }; + /** + * Fired when the density changes. + */ + densityChange: { params: GridDensity }; } export interface GridControlledStateReasonLookup { diff --git a/packages/x-data-grid/src/models/gridStateCommunity.ts b/packages/x-data-grid/src/models/gridStateCommunity.ts index 95015838ddc1b..7e00992692bf8 100644 --- a/packages/x-data-grid/src/models/gridStateCommunity.ts +++ b/packages/x-data-grid/src/models/gridStateCommunity.ts @@ -63,4 +63,5 @@ export interface GridInitialStateCommunity { filter?: GridFilterInitialState; columns?: GridColumnsInitialState; preferencePanel?: GridPreferencePanelInitialState; + density?: GridDensityState; } diff --git a/packages/x-data-grid/src/models/props/DataGridProps.ts b/packages/x-data-grid/src/models/props/DataGridProps.ts index 90c2b031ccbea..13918cd9b5ab5 100644 --- a/packages/x-data-grid/src/models/props/DataGridProps.ts +++ b/packages/x-data-grid/src/models/props/DataGridProps.ts @@ -152,11 +152,6 @@ export interface DataGridPropsWithDefaultValues { * @default 3 */ columnThreshold: number; - /** - * Set the density of the Data Grid. - * @default "standard" - */ - density: GridDensity; /** * If `true`, column filters are disabled. * @default false @@ -408,6 +403,11 @@ export interface DataGridPropsWithoutDefaultValue; + /** + * 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. @@ -561,6 +561,11 @@ export interface DataGridPropsWithoutDefaultValue; + /** + * 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. diff --git a/packages/x-data-grid/src/tests/density.DataGrid.test.tsx b/packages/x-data-grid/src/tests/density.DataGrid.test.tsx new file mode 100644 index 0000000000000..6e71774e9651a --- /dev/null +++ b/packages/x-data-grid/src/tests/density.DataGrid.test.tsx @@ -0,0 +1,229 @@ +import * as React from 'react'; +import { spy } from 'sinon'; +import { createRenderer, fireEvent, screen } from '@mui-internal/test-utils'; +import { grid } from 'test/utils/helperFn'; +import { expect } from 'chai'; +import { DataGrid, DataGridProps, GridToolbar, gridClasses } from '@mui/x-data-grid'; +import { + COMFORTABLE_DENSITY_FACTOR, + COMPACT_DENSITY_FACTOR, +} from '../hooks/features/density/densitySelector'; + +const isJSDOM = /jsdom/.test(window.navigator.userAgent); + +describe(' - Density', () => { + const { render, clock } = createRenderer({ clock: 'fake' }); + + const baselineProps = { + autoHeight: isJSDOM, + rows: [ + { + id: 0, + brand: 'Nike', + }, + { + id: 1, + brand: 'Adidas', + }, + { + id: 2, + brand: 'Puma', + }, + ], + columns: [ + { + field: 'id', + }, + { + field: 'brand', + }, + ], + }; + + function expectHeight(value: number) { + expect(screen.getAllByRole('row')[1]).toHaveInlineStyle({ + maxHeight: `${Math.floor(value)}px`, + }); + + expect(getComputedStyle(screen.getAllByRole('gridcell')[1]).height).to.equal( + `${Math.floor(value)}px`, + ); + } + + before(function beforeHook() { + if (isJSDOM) { + // JSDOM seem to not support CSS variables properly and `height: var(--height)` ends up being `height: ''` + this.skip(); + } + }); + + describe('prop: `initialState.density`', () => { + it('should set the density to the value of initialState.density', () => { + const rowHeight = 30; + render( +
+ +
, + ); + + expectHeight(rowHeight * COMPACT_DENSITY_FACTOR); + }); + }); + + describe('prop: `density`', () => { + it('should set the density value using density prop', () => { + const rowHeight = 30; + render( +
+ +
, + ); + + expectHeight(rowHeight * COMPACT_DENSITY_FACTOR); + }); + + it('should allow to control the density from the prop using state', () => { + const rowHeight = 30; + + function Grid(props: Partial) { + return ( +
+ +
+ ); + } + + const { setProps, getByText } = render(); + + expectHeight(rowHeight); + + fireEvent.click(getByText('Density')); + clock.tick(100); + fireEvent.click(getByText('Compact')); + + // Not updated because of the controlled prop + expectHeight(rowHeight); + + // Explicitly update the prop + setProps({ density: 'compact' }); + clock.tick(200); + expectHeight(rowHeight * COMPACT_DENSITY_FACTOR); + }); + + it('should call `onDensityChange` prop when density gets updated', () => { + const onDensityChange = spy(); + function Test() { + return ( +
+ +
+ ); + } + const { getByText } = render(); + fireEvent.click(getByText('Density')); + fireEvent.click(getByText('Comfortable')); + expect(onDensityChange.callCount).to.equal(1); + expect(onDensityChange.firstCall.args[0]).to.equal('comfortable'); + }); + }); + + describe('density selection menu', () => { + it('should increase grid density when selecting compact density', () => { + const rowHeight = 30; + const { getByText } = render( +
+ +
, + ); + + fireEvent.click(getByText('Density')); + clock.tick(100); + fireEvent.click(getByText('Compact')); + + expectHeight(rowHeight * COMPACT_DENSITY_FACTOR); + }); + + it('should decrease grid density when selecting comfortable density', () => { + const rowHeight = 30; + const { getByText } = render( +
+ +
, + ); + + fireEvent.click(getByText('Density')); + fireEvent.click(getByText('Comfortable')); + + expectHeight(rowHeight * COMFORTABLE_DENSITY_FACTOR); + }); + + it('should increase grid density even if toolbar is not enabled', () => { + const rowHeight = 30; + render( +
+ +
, + ); + + expectHeight(rowHeight * COMPACT_DENSITY_FACTOR); + }); + + it('should decrease grid density even if toolbar is not enabled', () => { + const rowHeight = 30; + render( +
+ +
, + ); + + expectHeight(rowHeight * COMFORTABLE_DENSITY_FACTOR); + }); + + it('should apply to the root element a class corresponding to the current density', () => { + function Test(props: Partial) { + return ( +
+ +
+ ); + } + const { setProps } = render(); + expect(grid('root')).to.have.class(gridClasses['root--densityStandard']); + setProps({ density: 'compact' }); + expect(grid('root')).to.have.class(gridClasses['root--densityCompact']); + setProps({ density: 'comfortable' }); + expect(grid('root')).to.have.class(gridClasses['root--densityComfortable']); + }); + }); +}); diff --git a/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx index 0056600086a73..12a40be44b724 100644 --- a/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx @@ -35,7 +35,7 @@ import { } from 'test/utils/helperFn'; import Dialog from '@mui/material/Dialog'; -import { COMPACT_DENSITY_FACTOR } from '../hooks/features/density/useGridDensity'; +import { COMPACT_DENSITY_FACTOR } from '../hooks/features/density/densitySelector'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); diff --git a/packages/x-data-grid/src/tests/toolbar.DataGrid.test.tsx b/packages/x-data-grid/src/tests/toolbar.DataGrid.test.tsx index 1839faa819dc0..cfba3fb2e0f15 100644 --- a/packages/x-data-grid/src/tests/toolbar.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/toolbar.DataGrid.test.tsx @@ -1,23 +1,13 @@ import * as React from 'react'; import { createRenderer, fireEvent, screen, act } from '@mui-internal/test-utils'; -import { getColumnHeadersTextContent, grid } from 'test/utils/helperFn'; +import { getColumnHeadersTextContent } from 'test/utils/helperFn'; import { expect } from 'chai'; -import { - DataGrid, - DataGridProps, - GridToolbar, - gridClasses, - GridColumnsManagementProps, -} from '@mui/x-data-grid'; -import { - COMFORTABLE_DENSITY_FACTOR, - COMPACT_DENSITY_FACTOR, -} from '../hooks/features/density/useGridDensity'; +import { DataGrid, GridToolbar, GridColumnsManagementProps } from '@mui/x-data-grid'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); describe(' - Toolbar', () => { - const { render, clock } = createRenderer({ clock: 'fake' }); + const { render } = createRenderer({ clock: 'fake' }); const baselineProps = { autoHeight: isJSDOM, @@ -45,104 +35,6 @@ describe(' - Toolbar', () => { ], }; - describe('density selector', () => { - before(function beforeHook() { - if (isJSDOM) { - // JSDOM seem to not support CSS variables properly and `height: var(--height)` ends up being `height: ''` - this.skip(); - } - }); - - function expectHeight(value: number) { - expect(screen.getAllByRole('row')[1]).toHaveInlineStyle({ - maxHeight: `${Math.floor(value)}px`, - }); - - expect(getComputedStyle(screen.getAllByRole('gridcell')[1]).height).to.equal( - `${Math.floor(value)}px`, - ); - } - - it('should increase grid density when selecting compact density', () => { - const rowHeight = 30; - const { getByText } = render( -
- -
, - ); - - fireEvent.click(getByText('Density')); - clock.tick(100); - fireEvent.click(getByText('Compact')); - - expectHeight(rowHeight * COMPACT_DENSITY_FACTOR); - }); - - it('should decrease grid density when selecting comfortable density', () => { - const rowHeight = 30; - const { getByText } = render( -
- -
, - ); - - fireEvent.click(getByText('Density')); - fireEvent.click(getByText('Comfortable')); - - expectHeight(rowHeight * COMFORTABLE_DENSITY_FACTOR); - }); - - it('should increase grid density even if toolbar is not enabled', () => { - const rowHeight = 30; - render( -
- -
, - ); - - expectHeight(rowHeight * COMPACT_DENSITY_FACTOR); - }); - - it('should decrease grid density even if toolbar is not enabled', () => { - const rowHeight = 30; - render( -
- -
, - ); - - expectHeight(rowHeight * COMFORTABLE_DENSITY_FACTOR); - }); - - it('should apply to the root element a class corresponding to the current density', () => { - function Test(props: Partial) { - return ( -
- -
- ); - } - const { setProps } = render(); - expect(grid('root')).to.have.class(gridClasses['root--densityStandard']); - setProps({ density: 'compact' }); - expect(grid('root')).to.have.class(gridClasses['root--densityCompact']); - setProps({ density: 'comfortable' }); - expect(grid('root')).to.have.class(gridClasses['root--densityComfortable']); - }); - }); - describe('column selector', () => { it('should hide "id" column when hiding it from the column selector', () => { const { getByText } = render( diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index b0cddf8620c36..5641efdd4b4cf 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -20,6 +20,8 @@ { "name": "ColumnsManagementPropsOverrides", "kind": "Interface" }, { "name": "ColumnsPanelPropsOverrides", "kind": "Interface" }, { "name": "ColumnsStylesInterface", "kind": "Interface" }, + { "name": "COMFORTABLE_DENSITY_FACTOR", "kind": "Variable" }, + { "name": "COMPACT_DENSITY_FACTOR", "kind": "Variable" }, { "name": "createUseGridApiEventHandler", "kind": "Function" }, { "name": "CursorCoordinates", "kind": "Interface" }, { "name": "DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES", "kind": "Variable" }, @@ -251,8 +253,7 @@ { "name": "gridDensityFactorSelector", "kind": "Variable" }, { "name": "GridDensityOption", "kind": "Interface" }, { "name": "gridDensitySelector", "kind": "Variable" }, - { "name": "GridDensityState", "kind": "Interface" }, - { "name": "gridDensityValueSelector", "kind": "Variable" }, + { "name": "GridDensityState", "kind": "TypeAlias" }, { "name": "GridDetailPanelApi", "kind": "Interface" }, { "name": "gridDetailPanelExpandedRowIdsSelector", "kind": "Variable" }, { "name": "gridDetailPanelExpandedRowsContentCacheSelector", "kind": "Variable" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index 1946f832da008..44386f2892c85 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -19,6 +19,8 @@ { "name": "ColumnMenuPropsOverrides", "kind": "Interface" }, { "name": "ColumnsManagementPropsOverrides", "kind": "Interface" }, { "name": "ColumnsPanelPropsOverrides", "kind": "Interface" }, + { "name": "COMFORTABLE_DENSITY_FACTOR", "kind": "Variable" }, + { "name": "COMPACT_DENSITY_FACTOR", "kind": "Variable" }, { "name": "createUseGridApiEventHandler", "kind": "Function" }, { "name": "CursorCoordinates", "kind": "Interface" }, { "name": "DATA_GRID_PRO_PROPS_DEFAULT_VALUES", "kind": "Variable" }, @@ -225,8 +227,7 @@ { "name": "gridDensityFactorSelector", "kind": "Variable" }, { "name": "GridDensityOption", "kind": "Interface" }, { "name": "gridDensitySelector", "kind": "Variable" }, - { "name": "GridDensityState", "kind": "Interface" }, - { "name": "gridDensityValueSelector", "kind": "Variable" }, + { "name": "GridDensityState", "kind": "TypeAlias" }, { "name": "GridDetailPanelApi", "kind": "Interface" }, { "name": "gridDetailPanelExpandedRowIdsSelector", "kind": "Variable" }, { "name": "gridDetailPanelExpandedRowsContentCacheSelector", "kind": "Variable" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index 484adb49bc66c..f2755ff699bee 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -19,6 +19,8 @@ { "name": "ColumnMenuPropsOverrides", "kind": "Interface" }, { "name": "ColumnsManagementPropsOverrides", "kind": "Interface" }, { "name": "ColumnsPanelPropsOverrides", "kind": "Interface" }, + { "name": "COMFORTABLE_DENSITY_FACTOR", "kind": "Variable" }, + { "name": "COMPACT_DENSITY_FACTOR", "kind": "Variable" }, { "name": "createUseGridApiEventHandler", "kind": "Function" }, { "name": "CursorCoordinates", "kind": "Interface" }, { "name": "DATA_GRID_PROPS_DEFAULT_VALUES", "kind": "Variable" }, @@ -211,8 +213,7 @@ { "name": "gridDensityFactorSelector", "kind": "Variable" }, { "name": "GridDensityOption", "kind": "Interface" }, { "name": "gridDensitySelector", "kind": "Variable" }, - { "name": "GridDensityState", "kind": "Interface" }, - { "name": "gridDensityValueSelector", "kind": "Variable" }, + { "name": "GridDensityState", "kind": "TypeAlias" }, { "name": "GridDimensions", "kind": "Interface" }, { "name": "GridDimensionsApi", "kind": "Interface" }, { "name": "gridDimensionsSelector", "kind": "Variable" }, From 51952b6c81495222e98f7ce416313f710fb5b82a Mon Sep 17 00:00:00 2001 From: Nora <72460825+noraleonte@users.noreply.github.com> Date: Tue, 19 Mar 2024 16:27:46 +0200 Subject: [PATCH 13/20] [docs] Finalize migration guide (#12501) --- .../migration/migration-charts-v6/migration-charts-v6.md | 2 +- .../migration-data-grid-v6/migration-data-grid-v6.md | 5 +++-- .../migration/migration-pickers-v6/migration-pickers-v6.md | 3 ++- .../migration-tree-view-v6/migration-tree-view-v6.md | 3 ++- 4 files changed, 8 insertions(+), 5 deletions(-) diff --git a/docs/data/migration/migration-charts-v6/migration-charts-v6.md b/docs/data/migration/migration-charts-v6/migration-charts-v6.md index ca9b8da21fce2..01265fb8cb84a 100644 --- a/docs/data/migration/migration-charts-v6/migration-charts-v6.md +++ b/docs/data/migration/migration-charts-v6/migration-charts-v6.md @@ -10,7 +10,7 @@ productId: x-charts This is a reference guide for upgrading `@mui/x-charts` from v6 to v7. The change between v6 and v7 is mostly here to match the version with other MUI X packages. -Not big breaking changes are expected. +No big breaking changes are expected. ## Start using the new release diff --git a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md index fd89b82c9ecda..28089d0600bb6 100644 --- a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md +++ b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md @@ -8,9 +8,10 @@ productId: x-data-grid

This guide describes the changes needed to migrate the Data Grid from v6 to v7.

- +This is a reference guide for upgrading `@mui/x-data-grid` from v6 to v7. +To read more about the changes from the new major, check out [the blog post about the release of MUI X v7](https://mui.com/blog/mui-x-v7-beta/). ## Start using the new release diff --git a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md index d31db5d3b9299..92357cea938f3 100644 --- a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md +++ b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md @@ -10,7 +10,8 @@ productId: x-date-pickers ## Introduction -TBD +This is a reference guide for upgrading `@mui/x-date-pickers` from v6 to v7. +To read more about the changes from the new major, check out [the blog post about the release of MUI X v7](https://mui.com/blog/mui-x-v7-beta/). ## Start using the new release diff --git a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md index bd4557049c723..9e34405bb7968 100644 --- a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md +++ b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md @@ -10,7 +10,8 @@ productId: x-tree-view ## Introduction -TBD +This is a reference guide for upgrading `@mui/x-tree-view` from v6 to v7. +To read more about the changes from the new major, check out [the blog post about the release of MUI X v7](https://mui.com/blog/mui-x-v7-beta/). ## Start using the beta release From 84b4e02c69e05921b73dd1cf2a17f0e949afc333 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Tue, 19 Mar 2024 19:50:29 +0500 Subject: [PATCH 14/20] [codemod] Add a codemod and update the grid migration guide (#12488) --- .../migration-data-grid-v6.md | 8 ++--- packages/x-codemod/README.md | 20 +++++++++++ .../data-grid/preset-safe/actual.spec.js | 6 ++++ .../data-grid/preset-safe/expected.spec.js | 3 +- .../src/v7.0.0/data-grid/preset-safe/index.ts | 2 ++ .../actual.spec.js | 34 +++++++++++++++++++ .../expected.spec.js | 17 ++++++++++ .../index.ts | 22 ++++++++++++ ...ve-stabilized-experimentalFeatures.test.ts | 27 +++++++++++++++ .../rename-cell-selection-props/index.ts | 2 ++ 10 files changed, 135 insertions(+), 6 deletions(-) create mode 100644 packages/x-codemod/src/v7.0.0/data-grid/remove-stabilized-experimentalFeatures/actual.spec.js create mode 100644 packages/x-codemod/src/v7.0.0/data-grid/remove-stabilized-experimentalFeatures/expected.spec.js create mode 100644 packages/x-codemod/src/v7.0.0/data-grid/remove-stabilized-experimentalFeatures/index.ts create mode 100644 packages/x-codemod/src/v7.0.0/data-grid/remove-stabilized-experimentalFeatures/remove-stabilized-experimentalFeatures.test.ts diff --git a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md index 28089d0600bb6..6e0e5494e6fe0 100644 --- a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md +++ b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md @@ -122,7 +122,7 @@ As a result, the following changes have been made: ### Removed props -- The deprecated props `components` and `componentsProps` have been removed. Use `slots` and `slotProps` instead. See [components section](/x/react-data-grid/components/) for more details. +- ✅ The deprecated props `components` and `componentsProps` have been removed. Use `slots` and `slotProps` instead. See [components section](/x/react-data-grid/components/) for more details. - The `slots.preferencesPanel` slot and the `slotProps.preferencesPanel` prop were removed. Use `slots.panel` and `slotProps.panel` instead. - The `getOptionValue` and `getOptionLabel` props were removed from the following components: @@ -145,7 +145,7 @@ As a result, the following changes have been made: }; ``` -- Some feature flags were removed from the `experimentalFeatures` prop. These features are now stable and enabled by default: +- ✅ Some feature flags were removed from the `experimentalFeatures` prop. These features are now stable and enabled by default: - [`columnGrouping`](/x/react-data-grid/column-groups/) - [`clipboardPaste`](/x/react-data-grid/clipboard/#clipboard-paste) - [`lazyLoading`](/x/react-data-grid/row-updates/#lazy-loading) @@ -340,7 +340,7 @@ See the [Direct state access](/x/react-data-grid/state/#direct-selector-access) ### Clipboard -- The clipboard related exports `ignoreValueFormatterDuringExport` and `splitClipboardPastedText` are not anymore prefixed with `unstable_`. +- ✅ The clipboard related exports `ignoreValueFormatterDuringExport` and `splitClipboardPastedText` are not anymore prefixed with `unstable_`. ### Print export @@ -430,7 +430,7 @@ See the [Direct state access](/x/react-data-grid/state/#direct-selector-access) ### Accessibility -- The `ariaV7` experimental flag has been removed and the Data Grid now uses the improved accessibility implementation by default. +- ✅ The `ariaV7` experimental flag has been removed and the Data Grid now uses the improved accessibility implementation by default. If you were using the `ariaV7` flag, you can remove it from the `experimentalFeatures` prop: ```diff diff --git a/packages/x-codemod/README.md b/packages/x-codemod/README.md index 5894102fcca66..9f9e6e967890a 100644 --- a/packages/x-codemod/README.md +++ b/packages/x-codemod/README.md @@ -166,6 +166,7 @@ The list includes these transformers - [`rename-components-to-slots-data-grid`](#rename-components-to-slots-data-grid) - [`rename-cell-selection-props`](#rename-cell-selection-props) +- [`remove-stabilized-v7-experimentalFeatures`](#remove-stabilized-v7-experimentalFeatures) #### `rename-components-to-slots-data-grid` @@ -205,6 +206,25 @@ Rename props related to `cellSelection` feature. npx @mui/x-codemod@next v7.0.0/data-grid/rename-cell-selection-props ``` +#### `remove-stabilized-v7-experimentalFeatures` + +Remove feature flags for stabilized `experimentalFeatures`. + +```diff + +``` + +```bash +npx @mui/x-codemod@next v7.0.0/data-grid/remove-stabilized-experimentalFeatures +``` + ### Tree View codemods #### `preset-safe` for tree view v7.0.0 diff --git a/packages/x-codemod/src/v7.0.0/data-grid/preset-safe/actual.spec.js b/packages/x-codemod/src/v7.0.0/data-grid/preset-safe/actual.spec.js index 223be3fca8717..ed4ea3a7781f8 100644 --- a/packages/x-codemod/src/v7.0.0/data-grid/preset-safe/actual.spec.js +++ b/packages/x-codemod/src/v7.0.0/data-grid/preset-safe/actual.spec.js @@ -26,6 +26,12 @@ export default function App() { checked: 'true', }, }} + experimentalFeatures={{ + lazyLoading: true, + ariaV7: true, + columnGrouping: true, + clipboardPaste: true, + }} /> + }} /> + + + + + + ); +} + +export default App; diff --git a/packages/x-codemod/src/v7.0.0/data-grid/remove-stabilized-experimentalFeatures/expected.spec.js b/packages/x-codemod/src/v7.0.0/data-grid/remove-stabilized-experimentalFeatures/expected.spec.js new file mode 100644 index 0000000000000..85baca51c531e --- /dev/null +++ b/packages/x-codemod/src/v7.0.0/data-grid/remove-stabilized-experimentalFeatures/expected.spec.js @@ -0,0 +1,17 @@ +import * as React from 'react'; +import { DataGrid } from '@mui/x-data-grid'; +import { DataGridPro } from '@mui/x-data-grid-pro'; +import { DataGridPremium } from '@mui/x-data-grid-premium'; + +function App() { + return ( + + + + + + + ); +} + +export default App; diff --git a/packages/x-codemod/src/v7.0.0/data-grid/remove-stabilized-experimentalFeatures/index.ts b/packages/x-codemod/src/v7.0.0/data-grid/remove-stabilized-experimentalFeatures/index.ts new file mode 100644 index 0000000000000..9b42c64500b14 --- /dev/null +++ b/packages/x-codemod/src/v7.0.0/data-grid/remove-stabilized-experimentalFeatures/index.ts @@ -0,0 +1,22 @@ +import removeObjectProperty from '../../../util/removeObjectProperty'; +import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types'; + +const componentsNames = ['DataGrid', 'DataGridPro', 'DataGridPremium']; +const propName = 'experimentalFeatures'; +const propKeys = ['columnGrouping', 'clipboardPaste', 'lazyLoading', 'ariaV7']; + +export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) { + const j = api.jscodeshift; + const root = j(file.source); + + const printOptions = options.printOptions || { + quote: 'single', + trailingComma: true, + }; + + propKeys.forEach((propKey) => { + removeObjectProperty({ root, j, propName, componentsNames, propKey }); + }); + + return root.toSource(printOptions); +} diff --git a/packages/x-codemod/src/v7.0.0/data-grid/remove-stabilized-experimentalFeatures/remove-stabilized-experimentalFeatures.test.ts b/packages/x-codemod/src/v7.0.0/data-grid/remove-stabilized-experimentalFeatures/remove-stabilized-experimentalFeatures.test.ts new file mode 100644 index 0000000000000..d5610209aafd4 --- /dev/null +++ b/packages/x-codemod/src/v7.0.0/data-grid/remove-stabilized-experimentalFeatures/remove-stabilized-experimentalFeatures.test.ts @@ -0,0 +1,27 @@ +import path from 'path'; +import { expect } from 'chai'; +import jscodeshift from 'jscodeshift'; +import transform from '.'; +import readFile from '../../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +describe('v7.0.0/data-grid', () => { + describe('remove-stabilized-experimentalFeatures', () => { + it('transforms props as needed', () => { + const actual = transform({ source: read('./actual.spec.js') }, { jscodeshift }, {}); + + const expected = read('./expected.spec.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform({ source: read('./expected.spec.js') }, { jscodeshift }, {}); + + const expected = read('./expected.spec.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); +}); diff --git a/packages/x-codemod/src/v7.0.0/data-grid/rename-cell-selection-props/index.ts b/packages/x-codemod/src/v7.0.0/data-grid/rename-cell-selection-props/index.ts index 8d61dff5088b2..74c0d48003d94 100644 --- a/packages/x-codemod/src/v7.0.0/data-grid/rename-cell-selection-props/index.ts +++ b/packages/x-codemod/src/v7.0.0/data-grid/rename-cell-selection-props/index.ts @@ -6,6 +6,8 @@ const props = { unstable_cellSelection: 'cellSelection', unstable_cellSelectionModel: 'cellSelectionModel', unstable_onCellSelectionModelChange: 'onCellSelectionModelChange', + unstable_ignoreValueFormatterDuringExport: 'ignoreValueFormatterDuringExport', + unstable_splitClipboardPastedText: 'splitClipboardPastedText', }; export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) { From 1a54927f5c208eb24fb95767145136859d36f1d6 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Tue, 19 Mar 2024 17:19:08 +0100 Subject: [PATCH 15/20] [docs] Update branch name and tags (#12498) --- docs/constants.js | 2 +- .../charts/getting-started/getting-started.md | 8 ++- .../getting-started/getting-started.md | 4 -- docs/data/data-grid/localization/data.json | 66 +++++++++---------- .../getting-started/getting-started.md | 4 -- docs/data/date-pickers/localization/data.json | 66 +++++++++---------- docs/data/introduction/support/support.md | 4 +- .../migration-charts-v6.md | 4 +- .../migration-data-grid-v6.md | 16 ++--- .../migration-pickers-v6.md | 14 ++-- .../migration-tree-view-v6.md | 6 +- .../getting-started/getting-started.md | 10 +-- docs/pages/_app.js | 2 +- .../DataGridInstallationInstructions.js | 6 +- .../PickersInstallationInstructions.js | 4 +- packages/x-codemod/README.md | 32 ++++----- scripts/README.md | 2 +- scripts/releaseChangelog.mjs | 2 +- 18 files changed, 119 insertions(+), 133 deletions(-) diff --git a/docs/constants.js b/docs/constants.js index 8b2dbe4c383c9..7a90120b71745 100644 --- a/docs/constants.js +++ b/docs/constants.js @@ -2,5 +2,5 @@ module.exports = { SOURCE_CODE_REPO: 'https://github.com/mui/mui-x', - SOURCE_GITHUB_BRANCH: 'next', // #default-branch-switch + SOURCE_GITHUB_BRANCH: 'master', // #default-branch-switch }; diff --git a/docs/data/charts/getting-started/getting-started.md b/docs/data/charts/getting-started/getting-started.md index 45880b4fe07b2..933206fe3af01 100644 --- a/docs/data/charts/getting-started/getting-started.md +++ b/docs/data/charts/getting-started/getting-started.md @@ -13,17 +13,19 @@ packageName: '@mui/x-charts' Run one of the following commands to add the MUI X Charts to your project: + + ```bash npm -npm install @mui/x-charts@next +npm install @mui/x-charts ``` ```bash yarn -yarn add @mui/x-charts@next +yarn add @mui/x-charts ``` ```bash pnpm -pnpm add @mui/x-charts@next +pnpm add @mui/x-charts ``` diff --git a/docs/data/data-grid/getting-started/getting-started.md b/docs/data/data-grid/getting-started/getting-started.md index 4d9fbcef475ba..466ff5502429b 100644 --- a/docs/data/data-grid/getting-started/getting-started.md +++ b/docs/data/data-grid/getting-started/getting-started.md @@ -8,10 +8,6 @@ Using your favorite package manager, install `@mui/x-data-grid-pro` or `@mui/x-d -:::warning -The `next` tag is used to download the latest v7 **pre-release** version. -::: - {{"component": "modules/components/DataGridInstallationInstructions.js"}} The Data Grid package has a peer dependency on `@mui/material`. diff --git a/docs/data/data-grid/localization/data.json b/docs/data/data-grid/localization/data.json index 2d51946c58760..3ee05aff82c5c 100644 --- a/docs/data/data-grid/localization/data.json +++ b/docs/data/data-grid/localization/data.json @@ -5,7 +5,7 @@ "localeName": "Arabic (Sudan)", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/arSD.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/arSD.ts" }, { "languageTag": "be-BY", @@ -13,7 +13,7 @@ "localeName": "Belarusian", "missingKeysCount": 29, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/beBY.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/beBY.ts" }, { "languageTag": "bg-BG", @@ -21,7 +21,7 @@ "localeName": "Bulgarian", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/bgBG.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/bgBG.ts" }, { "languageTag": "zh-HK", @@ -29,7 +29,7 @@ "localeName": "Chinese (Hong Kong)", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/zhHK.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/zhHK.ts" }, { "languageTag": "zh-CN", @@ -37,7 +37,7 @@ "localeName": "Chinese (Simplified)", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/zhCN.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/zhCN.ts" }, { "languageTag": "zh-TW", @@ -45,7 +45,7 @@ "localeName": "Chinese (Taiwan)", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/zhTW.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/zhTW.ts" }, { "languageTag": "hr-HR", @@ -53,7 +53,7 @@ "localeName": "Croatian", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/hrHR.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/hrHR.ts" }, { "languageTag": "cs-CZ", @@ -61,7 +61,7 @@ "localeName": "Czech", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/csCZ.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/csCZ.ts" }, { "languageTag": "da-DK", @@ -69,7 +69,7 @@ "localeName": "Danish", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/daDK.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/daDK.ts" }, { "languageTag": "nl-NL", @@ -77,7 +77,7 @@ "localeName": "Dutch", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/nlNL.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/nlNL.ts" }, { "languageTag": "fi-FI", @@ -85,7 +85,7 @@ "localeName": "Finnish", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/fiFI.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/fiFI.ts" }, { "languageTag": "fr-FR", @@ -93,7 +93,7 @@ "localeName": "French", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/frFR.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/frFR.ts" }, { "languageTag": "de-DE", @@ -101,7 +101,7 @@ "localeName": "German", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/deDE.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/deDE.ts" }, { "languageTag": "el-GR", @@ -109,7 +109,7 @@ "localeName": "Greek", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/elGR.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/elGR.ts" }, { "languageTag": "he-IL", @@ -117,7 +117,7 @@ "localeName": "Hebrew", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/heIL.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/heIL.ts" }, { "languageTag": "hu-HU", @@ -125,7 +125,7 @@ "localeName": "Hungarian", "missingKeysCount": 5, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/huHU.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/huHU.ts" }, { "languageTag": "it-IT", @@ -133,7 +133,7 @@ "localeName": "Italian", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/itIT.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/itIT.ts" }, { "languageTag": "ja-JP", @@ -141,7 +141,7 @@ "localeName": "Japanese", "missingKeysCount": 0, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/jaJP.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/jaJP.ts" }, { "languageTag": "ko-KR", @@ -149,7 +149,7 @@ "localeName": "Korean", "missingKeysCount": 30, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/koKR.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/koKR.ts" }, { "languageTag": "nb-NO", @@ -157,7 +157,7 @@ "localeName": "Norwegian (Bokmål)", "missingKeysCount": 28, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/nbNO.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/nbNO.ts" }, { "languageTag": "fa-IR", @@ -165,7 +165,7 @@ "localeName": "Persian", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/faIR.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/faIR.ts" }, { "languageTag": "pl-PL", @@ -173,7 +173,7 @@ "localeName": "Polish", "missingKeysCount": 30, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/plPL.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/plPL.ts" }, { "languageTag": "pt-PT", @@ -181,7 +181,7 @@ "localeName": "Portuguese", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/ptPT.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ptPT.ts" }, { "languageTag": "pt-BR", @@ -189,7 +189,7 @@ "localeName": "Portuguese (Brazil)", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/ptBR.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ptBR.ts" }, { "languageTag": "ro-RO", @@ -197,7 +197,7 @@ "localeName": "Romanian", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/roRO.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/roRO.ts" }, { "languageTag": "ru-RU", @@ -205,7 +205,7 @@ "localeName": "Russian", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/ruRU.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ruRU.ts" }, { "languageTag": "sk-SK", @@ -213,7 +213,7 @@ "localeName": "Slovak", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/skSK.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/skSK.ts" }, { "languageTag": "es-ES", @@ -221,7 +221,7 @@ "localeName": "Spanish", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/esES.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/esES.ts" }, { "languageTag": "sv-SE", @@ -229,7 +229,7 @@ "localeName": "Swedish", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/svSE.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/svSE.ts" }, { "languageTag": "tr-TR", @@ -237,7 +237,7 @@ "localeName": "Turkish", "missingKeysCount": 18, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/trTR.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/trTR.ts" }, { "languageTag": "uk-UA", @@ -245,7 +245,7 @@ "localeName": "Ukrainian", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/ukUA.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ukUA.ts" }, { "languageTag": "ur-PK", @@ -253,7 +253,7 @@ "localeName": "Urdu (Pakistan)", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/urPK.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/urPK.ts" }, { "languageTag": "vi-VN", @@ -261,6 +261,6 @@ "localeName": "Vietnamese", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/viVN.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/viVN.ts" } ] diff --git a/docs/data/date-pickers/getting-started/getting-started.md b/docs/data/date-pickers/getting-started/getting-started.md index ce67d380a66f1..ac7925ea7c394 100644 --- a/docs/data/date-pickers/getting-started/getting-started.md +++ b/docs/data/date-pickers/getting-started/getting-started.md @@ -20,10 +20,6 @@ Using your favorite package manager, install: -:::warning -The `next` tag is used to download the latest v7 **pre-release** version. -::: - {{"component": "modules/components/PickersInstallationInstructions.js"}} :::info diff --git a/docs/data/date-pickers/localization/data.json b/docs/data/date-pickers/localization/data.json index 1ba2f8bb68bbe..52aa6c3832b94 100644 --- a/docs/data/date-pickers/localization/data.json +++ b/docs/data/date-pickers/localization/data.json @@ -5,7 +5,7 @@ "localeName": "Basque", "missingKeysCount": 13, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/eu.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/eu.ts" }, { "languageTag": "be-BY", @@ -13,7 +13,7 @@ "localeName": "Belarusian", "missingKeysCount": 15, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/beBY.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/beBY.ts" }, { "languageTag": "ca-ES", @@ -21,7 +21,7 @@ "localeName": "Catalan", "missingKeysCount": 14, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/caES.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/caES.ts" }, { "languageTag": "zh-HK", @@ -29,7 +29,7 @@ "localeName": "Chinese (Hong Kong)", "missingKeysCount": 14, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/zhHK.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/zhHK.ts" }, { "languageTag": "zh-CN", @@ -37,7 +37,7 @@ "localeName": "Chinese (Simplified)", "missingKeysCount": 0, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/zhCN.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/zhCN.ts" }, { "languageTag": "cs-CZ", @@ -45,7 +45,7 @@ "localeName": "Czech", "missingKeysCount": 15, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/csCZ.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/csCZ.ts" }, { "languageTag": "da-DK", @@ -53,7 +53,7 @@ "localeName": "Danish", "missingKeysCount": 14, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/daDK.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/daDK.ts" }, { "languageTag": "nl-NL", @@ -61,7 +61,7 @@ "localeName": "Dutch", "missingKeysCount": 14, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/nlNL.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/nlNL.ts" }, { "languageTag": "fi-FI", @@ -69,7 +69,7 @@ "localeName": "Finnish", "missingKeysCount": 14, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/fiFI.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/fiFI.ts" }, { "languageTag": "fr-FR", @@ -77,7 +77,7 @@ "localeName": "French", "missingKeysCount": 15, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/frFR.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/frFR.ts" }, { "languageTag": "de-DE", @@ -85,7 +85,7 @@ "localeName": "German", "missingKeysCount": 13, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/deDE.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/deDE.ts" }, { "languageTag": "el-GR", @@ -93,7 +93,7 @@ "localeName": "Greek", "missingKeysCount": 14, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/elGR.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/elGR.ts" }, { "languageTag": "he-IL", @@ -101,7 +101,7 @@ "localeName": "Hebrew", "missingKeysCount": 14, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/heIL.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/heIL.ts" }, { "languageTag": "hu-HU", @@ -109,7 +109,7 @@ "localeName": "Hungarian", "missingKeysCount": 14, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/huHU.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/huHU.ts" }, { "languageTag": "is-IS", @@ -117,7 +117,7 @@ "localeName": "Icelandic", "missingKeysCount": 14, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/isIS.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/isIS.ts" }, { "languageTag": "it-IT", @@ -125,7 +125,7 @@ "localeName": "Italian", "missingKeysCount": 15, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/itIT.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/itIT.ts" }, { "languageTag": "ja-JP", @@ -133,7 +133,7 @@ "localeName": "Japanese", "missingKeysCount": 0, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/jaJP.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/jaJP.ts" }, { "languageTag": "kz-KZ", @@ -141,7 +141,7 @@ "localeName": "Kazakh", "missingKeysCount": 15, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/kzKZ.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/kzKZ.ts" }, { "languageTag": "ko-KR", @@ -149,7 +149,7 @@ "localeName": "Korean", "missingKeysCount": 14, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/koKR.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/koKR.ts" }, { "languageTag": "mk", @@ -157,7 +157,7 @@ "localeName": "Macedonian", "missingKeysCount": 13, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/mk.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/mk.ts" }, { "languageTag": "nb-NO", @@ -165,7 +165,7 @@ "localeName": "Norwegian (Bokmål)", "missingKeysCount": 14, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/nbNO.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/nbNO.ts" }, { "languageTag": "fa-IR", @@ -173,7 +173,7 @@ "localeName": "Persian", "missingKeysCount": 14, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/faIR.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/faIR.ts" }, { "languageTag": "pl-PL", @@ -181,7 +181,7 @@ "localeName": "Polish", "missingKeysCount": 22, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/plPL.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/plPL.ts" }, { "languageTag": "pt-BR", @@ -189,7 +189,7 @@ "localeName": "Portuguese (Brazil)", "missingKeysCount": 14, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/ptBR.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/ptBR.ts" }, { "languageTag": "ro-RO", @@ -197,7 +197,7 @@ "localeName": "Romanian", "missingKeysCount": 14, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/roRO.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/roRO.ts" }, { "languageTag": "ru-RU", @@ -205,7 +205,7 @@ "localeName": "Russian", "missingKeysCount": 14, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/ruRU.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/ruRU.ts" }, { "languageTag": "sk-SK", @@ -213,7 +213,7 @@ "localeName": "Slovak", "missingKeysCount": 15, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/skSK.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/skSK.ts" }, { "languageTag": "es-ES", @@ -221,7 +221,7 @@ "localeName": "Spanish", "missingKeysCount": 13, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/esES.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/esES.ts" }, { "languageTag": "sv-SE", @@ -229,7 +229,7 @@ "localeName": "Swedish", "missingKeysCount": 22, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/svSE.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/svSE.ts" }, { "languageTag": "tr-TR", @@ -237,7 +237,7 @@ "localeName": "Turkish", "missingKeysCount": 14, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/trTR.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/trTR.ts" }, { "languageTag": "uk-UA", @@ -245,7 +245,7 @@ "localeName": "Ukrainian", "missingKeysCount": 14, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/ukUA.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/ukUA.ts" }, { "languageTag": "ur-PK", @@ -253,7 +253,7 @@ "localeName": "Urdu (Pakistan)", "missingKeysCount": 22, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/urPK.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/urPK.ts" }, { "languageTag": "vi-VN", @@ -261,6 +261,6 @@ "localeName": "Vietnamese", "missingKeysCount": 14, "totalKeysCount": 50, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/viVN.ts" + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/viVN.ts" } ] diff --git a/docs/data/introduction/support/support.md b/docs/data/introduction/support/support.md index ce015dcceb0d8..b13f6488b9f61 100644 --- a/docs/data/introduction/support/support.md +++ b/docs/data/introduction/support/support.md @@ -48,8 +48,10 @@ You can browse the documentation, find an example close to your use case, and th #### Use starter templates You can use a starter template to build a reproduction case with: + -- A minimal Data Grid [TypeScript template](https://stackblitz.com/github/mui/mui-x/tree/next/bug-reproductions/x-data-grid?file=src/index.tsx) + +- A minimal Data Grid [TypeScript template](https://stackblitz.com/github/mui/mui-x/tree/master/bug-reproductions/x-data-grid?file=src/index.tsx) - A plain React [JavaScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react) or [TypeScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react-ts) template ## Stack Overflow diff --git a/docs/data/migration/migration-charts-v6/migration-charts-v6.md b/docs/data/migration/migration-charts-v6/migration-charts-v6.md index 01265fb8cb84a..f5fb3d31b08d0 100644 --- a/docs/data/migration/migration-charts-v6/migration-charts-v6.md +++ b/docs/data/migration/migration-charts-v6/migration-charts-v6.md @@ -14,11 +14,11 @@ No big breaking changes are expected. ## Start using the new release -In `package.json`, change the version of the charts package to `next`. +In `package.json`, change the version of the charts package to `^7.0.0`. ```diff -"@mui/x-charts": "6.x.x", -+"@mui/x-charts": "next", ++"@mui/x-charts": "^7.0.0", ``` ## Update `@mui/material` package diff --git a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md index 6e0e5494e6fe0..0c939947a016d 100644 --- a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md +++ b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md @@ -4,8 +4,6 @@ productId: x-data-grid # Migration from v6 to v7 - -

This guide describes the changes needed to migrate the Data Grid from v6 to v7.

## Introduction @@ -15,15 +13,15 @@ To read more about the changes from the new major, check out [the blog post abou ## Start using the new release -In `package.json`, change the version of the data grid package to `next`. +In `package.json`, change the version of the data grid package to `^7.0.0`. ```diff -"@mui/x-data-grid": "6.x.x", -+"@mui/x-data-grid": "next", ++"@mui/x-data-grid": "^7.0.0", -"@mui/x-data-grid-pro": "6.x.x", -+"@mui/x-data-grid-pro": "next", ++"@mui/x-data-grid-pro": "^7.0.0", -"@mui/x-data-grid-premium": "6.x.x", -+"@mui/x-data-grid-premium": "next", ++"@mui/x-data-grid-premium": "^7.0.0", ``` Since v7 is a major release, it contains changes that affect the public API. @@ -49,7 +47,7 @@ If you have `@mui/x-license-pro` in the `dependencies` section of your `package. ```diff -"@mui/x-license-pro": "6.x.x", -+"@mui/x-license": "next", ++"@mui/x-license": "^7.0.0", ``` ## Run codemods @@ -61,10 +59,10 @@ You can either run it on a specific file, folder, or your entire codebase when c ```bash // Data Grid specific -npx @mui/x-codemod@next v7.0.0/data-grid/preset-safe +npx @mui/x-codemod v7.0.0/data-grid/preset-safe // Target other MUI X components as well -npx @mui/x-codemod@next v7.0.0/preset-safe +npx @mui/x-codemod v7.0.0/preset-safe ``` :::info diff --git a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md index 92357cea938f3..07220a0af7850 100644 --- a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md +++ b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md @@ -4,8 +4,6 @@ productId: x-date-pickers # Migration from v6 to v7 - -

This guide describes the changes needed to migrate the Date and Time Pickers from v6 to v7.

## Introduction @@ -15,11 +13,11 @@ To read more about the changes from the new major, check out [the blog post abou ## Start using the new release -In `package.json`, change the version of the date pickers package to `next`. +In `package.json`, change the version of the date pickers package to `^7.0.0`. ```diff -"@mui/x-date-pickers": "6.x.x", -+"@mui/x-date-pickers": "next", ++"@mui/x-date-pickers": "^7.0.0", ``` Since `v7` is a major release, it contains changes that affect the public API. @@ -45,7 +43,7 @@ If you have `@mui/x-license-pro` in the `dependencies` section of your `package. ```diff -"@mui/x-license-pro": "6.x.x", -+"@mui/x-license": "next", ++"@mui/x-license": "^7.0.0", ``` ## Run codemods @@ -56,10 +54,10 @@ You can either run it on a specific file, folder, or your entire codebase when c ```bash // Date and Time Pickers specific -npx @mui/x-codemod@next v7.0.0/pickers/preset-safe +npx @mui/x-codemod v7.0.0/pickers/preset-safe // Target Data Grid as well -npx @mui/x-codemod@next v7.0.0/preset-safe +npx @mui/x-codemod v7.0.0/preset-safe ``` :::info @@ -107,7 +105,7 @@ And are removed from the v7. If not already done, this modification can be handled by the codemod ```bash -npx @mui/x-codemod@next v7.0.0/pickers/ +npx @mui/x-codemod v7.0.0/pickers/ ``` Take a look at [the RFC](https://github.com/mui/material-ui/issues/33416) for more information. diff --git a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md index 9e34405bb7968..55ff88eac6b3a 100644 --- a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md +++ b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md @@ -4,8 +4,6 @@ productId: x-tree-view # Migration from v6 to v7 - -

This guide describes the changes needed to migrate the Tree View from v6 to v7.

## Introduction @@ -15,11 +13,11 @@ To read more about the changes from the new major, check out [the blog post abou ## Start using the beta release -In `package.json`, change the version of the tree view package to `next`. +In `package.json`, change the version of the tree view package to `^7.0.0`. ```diff -"@mui/x-tree-view": "6.x.x", -+"@mui/x-tree-view": "next", ++"@mui/x-tree-view": "^7.0.0", ``` ## Update `@mui/material` package diff --git a/docs/data/tree-view/getting-started/getting-started.md b/docs/data/tree-view/getting-started/getting-started.md index 9c1f3403a46ce..3ae405a02a8d7 100644 --- a/docs/data/tree-view/getting-started/getting-started.md +++ b/docs/data/tree-view/getting-started/getting-started.md @@ -17,21 +17,17 @@ Using your favorite package manager, install `@mui/x-tree-view`: -:::warning -The `next` tag is used to download the latest v7 **pre-release** version. -::: - ```bash npm -npm install @mui/x-tree-view@next +npm install @mui/x-tree-view ``` ```bash yarn -yarn add @mui/x-tree-view@next +yarn add @mui/x-tree-view ``` ```bash pnpm -pnpm add @mui/x-tree-view@next +pnpm add @mui/x-tree-view ``` diff --git a/docs/pages/_app.js b/docs/pages/_app.js index 76826c3c75eff..06e3770e405c7 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -30,7 +30,7 @@ function getMuiPackageVersion(packageName, commitRef) { // #default-branch-switch // Use the "latest" npm tag for the master git branch // Use the "next" npm tag for the next git branch - return 'next'; + return 'latest'; } const shortSha = commitRef.slice(0, 8); return `https://pkg.csb.dev/mui/mui-x/commit/${shortSha}/@mui/${packageName}`; diff --git a/docs/src/modules/components/DataGridInstallationInstructions.js b/docs/src/modules/components/DataGridInstallationInstructions.js index 030004edd155f..fd41a7bddc3e2 100644 --- a/docs/src/modules/components/DataGridInstallationInstructions.js +++ b/docs/src/modules/components/DataGridInstallationInstructions.js @@ -4,9 +4,9 @@ import InstallationInstructions from './InstallationInstructions'; // #default-branch-switch const packages = { - Community: '@mui/x-data-grid@next', - Pro: '@mui/x-data-grid-pro@next', - Premium: '@mui/x-data-grid-premium@next', + Community: '@mui/x-data-grid', + Pro: '@mui/x-data-grid-pro', + Premium: '@mui/x-data-grid-premium', }; export default function DataGridInstallationInstructions() { diff --git a/docs/src/modules/components/PickersInstallationInstructions.js b/docs/src/modules/components/PickersInstallationInstructions.js index 81a2cf652e9ef..2651d0ca1158c 100644 --- a/docs/src/modules/components/PickersInstallationInstructions.js +++ b/docs/src/modules/components/PickersInstallationInstructions.js @@ -4,8 +4,8 @@ import InstallationInstructions from './InstallationInstructions'; // #default-branch-switch const packages = { - Community: '@mui/x-date-pickers@next', - Pro: '@mui/x-date-pickers-pro@next', + Community: '@mui/x-date-pickers', + Pro: '@mui/x-date-pickers-pro', }; const peerDependency = { diff --git a/packages/x-codemod/README.md b/packages/x-codemod/README.md index 9f9e6e967890a..3a9ac6e08276c 100644 --- a/packages/x-codemod/README.md +++ b/packages/x-codemod/README.md @@ -13,7 +13,7 @@ This repository contains a collection of codemod scripts based for use with ```bash -npx @mui/x-codemod@next +npx @mui/x-codemod Applies a `@mui/x-codemod` to the specified paths @@ -29,8 +29,8 @@ Options: --jscodeshift Pass options directly to jscodeshift [array] Examples: - npx @mui/x-codemod@latest v6.0.0/preset-safe src - npx @mui/x-codemod@latest v6.0.0/component-rename-prop src -- + npx @mui/x-codemod v6.0.0/preset-safe src + npx @mui/x-codemod v6.0.0/component-rename-prop src -- --component=DataGrid --from=prop --to=newProp ``` @@ -40,9 +40,9 @@ To pass more options directly to jscodeshift, use `--jscodeshift=...`. For examp ```bash // single option -npx @mui/x-codemod@next --jscodeshift=--run-in-band +npx @mui/x-codemod --jscodeshift=--run-in-band // multiple options -npx @mui/x-codemod@next --jscodeshift=--cpus=1 --jscodeshift=--print --jscodeshift=--dry --jscodeshift=--verbose=2 +npx @mui/x-codemod --jscodeshift=--cpus=1 --jscodeshift=--print --jscodeshift=--dry --jscodeshift=--verbose=2 ``` See all available options [here](https://github.com/facebook/jscodeshift#usage-cli). @@ -53,7 +53,7 @@ Options to [recast](https://github.com/benjamn/recast)'s printer can be provided through jscodeshift's `printOptions` command line argument ```bash -npx @mui/x-codemod@next --jscodeshift="--printOptions='{\"quote\":\"double\"}'" +npx @mui/x-codemod --jscodeshift="--printOptions='{\"quote\":\"double\"}'" ``` ## v7.0.0 @@ -66,7 +66,7 @@ It runs codemods for both Data Grid and Date and Time Pickers packages. To run codemods for a specific package, refer to the respective section. ```bash -npx @mui/x-codemod@next v7.0.0/preset-safe +npx @mui/x-codemod v7.0.0/preset-safe ``` The corresponding sub-sections are listed below @@ -82,7 +82,7 @@ The corresponding sub-sections are listed below The `preset-safe` codemods for pickers. ```bash -npx @mui/x-codemod@next v7.0.0/pickers/preset-safe +npx @mui/x-codemod v7.0.0/pickers/preset-safe ``` The list includes these transformers @@ -108,7 +108,7 @@ This change only affects Date and Time Picker components. ``` ```bash -npx @mui/x-codemod@next v7.0.0/pickers/rename-components-to-slots +npx @mui/x-codemod v7.0.0/pickers/rename-components-to-slots ``` #### `rename-default-calendar-month-to-reference-date` @@ -121,7 +121,7 @@ Replace the `defaultCalendarMonth` prop with the `referenceDate` prop. ``` ```bash -npx @mui/x-codemod@next v7.0.0/pickers/rename-default-calendar-month-to-reference-date +npx @mui/x-codemod v7.0.0/pickers/rename-default-calendar-month-to-reference-date ``` #### `rename-day-picker-classes` @@ -134,7 +134,7 @@ Rename the `dayPickerClasses` variable to `dayCalendarClasses`. ``` ```bash -npx @mui/x-codemod@next v7.0.0/pickers/rename-day-picker-classes +npx @mui/x-codemod v7.0.0/pickers/rename-day-picker-classes ``` #### `rename-slots-types` @@ -149,7 +149,7 @@ Replace types suffix `SlotsComponent` by `Slots` and `SlotsComponentsProps` by ` ``` ```bash -npx @mui/x-codemod@next v7.0.0/pickers/rename-slots-types +npx @mui/x-codemod v7.0.0/pickers/rename-slots-types ``` ### Data Grid codemods @@ -159,7 +159,7 @@ npx @mui/x-codemod@next v7.0.0/pickers/rename-slots-types The `preset-safe` codemods for data grid. ```bash -npx @mui/x-codemod@next v7.0.0/data-grid/preset-safe +npx @mui/x-codemod v7.0.0/data-grid/preset-safe ``` The list includes these transformers @@ -184,7 +184,7 @@ This change only affects Data Grid components. ``` ```bash -npx @mui/x-codemod@next v7.0.0/data-grid/rename-components-to-slots +npx @mui/x-codemod v7.0.0/data-grid/rename-components-to-slots ``` #### `rename-cell-selection-props` @@ -203,7 +203,7 @@ Rename props related to `cellSelection` feature. ``` ```bash -npx @mui/x-codemod@next v7.0.0/data-grid/rename-cell-selection-props +npx @mui/x-codemod v7.0.0/data-grid/rename-cell-selection-props ``` #### `remove-stabilized-v7-experimentalFeatures` @@ -232,7 +232,7 @@ npx @mui/x-codemod@next v7.0.0/data-grid/remove-stabilized-experimentalFeatures The `preset-safe` codemods for tree view. ```bash -npx @mui/x-codemod@next v7.0.0/tree-view/preset-safe +npx @mui/x-codemod v7.0.0/tree-view/preset-safe ``` The list includes these transformers diff --git a/scripts/README.md b/scripts/README.md index e810994e0d2bd..677fec421dd6e 100644 --- a/scripts/README.md +++ b/scripts/README.md @@ -49,7 +49,7 @@ Push the working branch on the documentation release branch to deploy the docume ```bash -git push -f upstream next:docs-next +git push -f upstream master:docs-v7 ``` You can follow the deployment process [on the Netlify Dashboard](https://app.netlify.com/sites/material-ui-x/deploys?filter=docs-next) diff --git a/scripts/releaseChangelog.mjs b/scripts/releaseChangelog.mjs index f05642243277f..01152512c8b63 100644 --- a/scripts/releaseChangelog.mjs +++ b/scripts/releaseChangelog.mjs @@ -300,7 +300,7 @@ yargs(process.argv.slice(2)) }) .option('release', { // #default-branch-switch - default: 'next', + default: 'master', describe: 'Ref which we want to release', type: 'string', }); From 6fc1da5a1de101bbeb65435f955f5752421eabfa Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Tue, 19 Mar 2024 17:25:52 +0100 Subject: [PATCH 16/20] [DataGrid] Fix `ElementType` usage (#12479) --- .../src/components/GridPagination.tsx | 180 ++++++++++-------- .../components/cell/GridActionsCellItem.tsx | 33 ++-- 2 files changed, 120 insertions(+), 93 deletions(-) diff --git a/packages/x-data-grid/src/components/GridPagination.tsx b/packages/x-data-grid/src/components/GridPagination.tsx index 03be488965cad..9fe8e5cf2f931 100644 --- a/packages/x-data-grid/src/components/GridPagination.tsx +++ b/packages/x-data-grid/src/components/GridPagination.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import PropTypes from 'prop-types'; import TablePagination, { tablePaginationClasses, TablePaginationProps, @@ -31,88 +32,107 @@ const GridPaginationRoot = styled(TablePagination)(({ theme }) => ({ type MutableArray = A extends readonly (infer T)[] ? T[] : never; -export const GridPagination = React.forwardRef>( - function GridPagination(props, ref) { - const apiRef = useGridApiContext(); - const rootProps = useGridRootProps(); - const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector); - const rowCount = useGridSelector(apiRef, gridPaginationRowCountSelector); - - const lastPage = React.useMemo(() => { - const calculatedValue = Math.ceil(rowCount / (paginationModel.pageSize || 1)) - 1; - return Math.max(0, calculatedValue); - }, [rowCount, paginationModel.pageSize]); - - const handlePageSizeChange = React.useCallback( - (event: React.ChangeEvent) => { - const pageSize = Number(event.target.value); - apiRef.current.setPageSize(pageSize); - }, - [apiRef], - ); - - const handlePageChange = React.useCallback( - (_, page) => { - apiRef.current.setPage(page); - }, - [apiRef], - ); - - const isPageSizeIncludedInPageSizeOptions = (pageSize: number) => { - for (let i = 0; i < rootProps.pageSizeOptions.length; i += 1) { - const option = rootProps.pageSizeOptions[i]; - if (typeof option === 'number') { - if (option === pageSize) { - return true; - } - } else if (option.value === pageSize) { +interface GridPaginationOwnProps { + component?: React.ElementType; +} + +const GridPagination = React.forwardRef< + unknown, + Partial< + // See https://github.com/mui/material-ui/issues/40427 + Omit + > & + GridPaginationOwnProps +>(function GridPagination(props, ref) { + const apiRef = useGridApiContext(); + const rootProps = useGridRootProps(); + const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector); + const rowCount = useGridSelector(apiRef, gridPaginationRowCountSelector); + + const lastPage = React.useMemo(() => { + const calculatedValue = Math.ceil(rowCount / (paginationModel.pageSize || 1)) - 1; + return Math.max(0, calculatedValue); + }, [rowCount, paginationModel.pageSize]); + + const handlePageSizeChange = React.useCallback( + (event: React.ChangeEvent) => { + const pageSize = Number(event.target.value); + apiRef.current.setPageSize(pageSize); + }, + [apiRef], + ); + + const handlePageChange = React.useCallback( + (_, page) => { + apiRef.current.setPage(page); + }, + [apiRef], + ); + + const isPageSizeIncludedInPageSizeOptions = (pageSize: number) => { + for (let i = 0; i < rootProps.pageSizeOptions.length; i += 1) { + const option = rootProps.pageSizeOptions[i]; + if (typeof option === 'number') { + if (option === pageSize) { return true; } - } - return false; - }; - - if (process.env.NODE_ENV !== 'production') { - // eslint-disable-next-line react-hooks/rules-of-hooks - const warnedOnceMissingInPageSizeOptions = React.useRef(false); - - 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; + } else if (option.value === pageSize) { + return true; } } + return false; + }; - const pageSizeOptions = isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize) - ? rootProps.pageSizeOptions - : []; - - return ( - } - rowsPerPage={paginationModel.pageSize} - onPageChange={handlePageChange} - onRowsPerPageChange={handlePageSizeChange} - {...apiRef.current.getLocaleText('MuiTablePagination')} - {...props} - /> - ); - }, -); + if (process.env.NODE_ENV !== 'production') { + // eslint-disable-next-line react-hooks/rules-of-hooks + const warnedOnceMissingInPageSizeOptions = React.useRef(false); + + 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; + } + } + + const pageSizeOptions = isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize) + ? rootProps.pageSizeOptions + : []; + + return ( + } + rowsPerPage={paginationModel.pageSize} + onPageChange={handlePageChange} + onRowsPerPageChange={handlePageSizeChange} + {...apiRef.current.getLocaleText('MuiTablePagination')} + {...props} + /> + ); +}); + +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, +} as any; + +export { GridPagination }; diff --git a/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx b/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx index 642d410d54ed9..d11bd15188a02 100644 --- a/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx +++ b/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx @@ -5,23 +5,26 @@ import MenuItem, { MenuItemProps } from '@mui/material/MenuItem'; import ListItemIcon from '@mui/material/ListItemIcon'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; -export type GridActionsCellItemProps = { +interface GridActionsCellItemCommonProps { label: string; icon?: React.ReactElement; /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */ component?: React.ElementType; -} & ( - | ({ showInMenu?: false; icon: React.ReactElement } & IconButtonProps) - | ({ - showInMenu: true; - /** - * If false, the menu will not close when this item is clicked. - * @default true - */ - closeMenuOnClick?: boolean; - closeMenu?: () => void; - } & MenuItemProps) -); +} + +export type GridActionsCellItemProps = GridActionsCellItemCommonProps & + ( + | ({ showInMenu?: false; icon: React.ReactElement } & Omit) + | ({ + showInMenu: true; + /** + * If false, the menu will not close when this item is clicked. + * @default true + */ + closeMenuOnClick?: boolean; + closeMenu?: () => void; + } & Omit) + ); const GridActionsCellItem = React.forwardRef( (props, ref) => { @@ -80,6 +83,10 @@ 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, From 1418ac21dab1eead4248ff8e0ddfbf06f6c1bc18 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Wed, 20 Mar 2024 02:05:34 -0400 Subject: [PATCH 17/20] [DataGrid] Dynamic virtualization range (#12353) Signed-off-by: Rom Grk Co-authored-by: Andrew Cherniavskii --- .../ColumnAutosizingAsync.js | 11 +- .../ColumnAutosizingAsync.tsx | 11 +- docs/data/data-grid/demo/FullFeaturedDemo.js | 1 - docs/data/data-grid/demo/FullFeaturedDemo.tsx | 1 - .../master-detail/BasicDetailPanels.js | 1 - .../master-detail/BasicDetailPanels.tsx | 1 - .../BasicDetailPanels.tsx.preview | 1 - .../master-detail/ControlMasterDetail.js | 1 - .../master-detail/ControlMasterDetail.tsx | 1 - .../CustomizeDetailPanelToggle.js | 1 - .../CustomizeDetailPanelToggle.tsx | 1 - .../CustomizeDetailPanelToggle.tsx.preview | 1 - .../master-detail/DetailPanelAutoHeight.js | 1 - .../master-detail/DetailPanelAutoHeight.tsx | 1 - .../DetailPanelAutoHeight.tsx.preview | 1 - .../master-detail/FormDetailPanel.js | 1 - .../master-detail/FormDetailPanel.tsx | 1 - .../master-detail/FormDetailPanel.tsx.preview | 1 - .../master-detail/FullWidthDetailPanel.js | 1 - .../master-detail/FullWidthDetailPanel.tsx | 1 - .../FullWidthDetailPanel.tsx.preview | 1 - .../data-grid/master-detail/master-detail.md | 9 - .../ColumnVirtualizationGrid.js | 2 +- .../ColumnVirtualizationGrid.tsx | 2 +- .../ColumnVirtualizationGrid.tsx.preview | 2 +- .../virtualization/virtualization.md | 6 +- .../migration-data-grid-v6.md | 7 +- .../x/api/data-grid/data-grid-premium.json | 6 +- docs/pages/x/api/data-grid/data-grid-pro.json | 6 +- docs/pages/x/api/data-grid/data-grid.json | 6 +- .../data-grid-premium/data-grid-premium.json | 14 +- .../data-grid-pro/data-grid-pro.json | 14 +- .../data-grid/data-grid/data-grid.json | 14 +- .../src/DataGridPremium/DataGridPremium.tsx | 22 +- .../tests/columns.DataGridPremium.test.tsx | 2 +- .../src/DataGridPro/DataGridPro.tsx | 22 +- .../features/lazyLoader/useGridLazyLoader.ts | 7 +- .../tests/detailPanel.DataGridPro.test.tsx | 3 +- .../tests/infiniteLoader.DataGridPro.test.tsx | 20 +- .../src/tests/rows.DataGridPro.test.tsx | 53 ++- .../x-data-grid/src/DataGrid/DataGrid.tsx | 22 +- .../src/DataGrid/useDataGridProps.ts | 6 +- .../features/columns/gridColumnsUtils.ts | 30 -- .../virtualization/useGridVirtualScroller.tsx | 376 ++++++++++++++---- .../src/models/props/DataGridProps.ts | 22 +- .../tests/columnSpanning.DataGrid.test.tsx | 25 +- .../src/tests/keyboard.DataGrid.test.tsx | 4 +- .../src/tests/layout.DataGrid.test.tsx | 2 - .../src/tests/rows.DataGrid.test.tsx | 26 +- .../DataGridPro/KeyboardNavigationFocus.tsx | 2 +- 50 files changed, 428 insertions(+), 345 deletions(-) diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.js b/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.js index 58cdeef72eb40..06da1d5d56555 100644 --- a/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.js +++ b/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.js @@ -60,11 +60,14 @@ export default function ColumnAutosizingAsync() { setIsLoading(true); getFakeData(100) .then((data) => { - return ReactDOM.flushSync(() => { + ReactDOM.flushSync(() => { setIsLoading(false); apiRef.current.updateRows(data.rows); }); }) + // `sleep`/`setTimeout` is required because `.updateRows` is an + // async function throttled to avoid choking on frequent changes. + .then(() => sleep(0)) .then(() => apiRef.current.autosizeColumns({ includeHeaders: true, @@ -103,3 +106,9 @@ export default function ColumnAutosizingAsync() {
); } + +function sleep(ms) { + return new Promise((resolve) => { + setTimeout(resolve, ms); + }); +} diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.tsx b/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.tsx index 3c00a2b4bb01f..650f0e1bced9e 100644 --- a/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.tsx +++ b/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.tsx @@ -60,11 +60,14 @@ export default function ColumnAutosizingAsync() { setIsLoading(true); getFakeData(100) .then((data) => { - return ReactDOM.flushSync(() => { + ReactDOM.flushSync(() => { setIsLoading(false); apiRef.current.updateRows(data.rows); }); }) + // `sleep`/`setTimeout` is required because `.updateRows` is an + // async function throttled to avoid choking on frequent changes. + .then(() => sleep(0)) .then(() => apiRef.current.autosizeColumns({ includeHeaders: true, @@ -103,3 +106,9 @@ export default function ColumnAutosizingAsync() {
); } + +function sleep(ms: number) { + return new Promise((resolve) => { + setTimeout(resolve, ms); + }); +} diff --git a/docs/data/data-grid/demo/FullFeaturedDemo.js b/docs/data/data-grid/demo/FullFeaturedDemo.js index ef0717f61f405..3fc0fb9d27edc 100644 --- a/docs/data/data-grid/demo/FullFeaturedDemo.js +++ b/docs/data/data-grid/demo/FullFeaturedDemo.js @@ -301,7 +301,6 @@ export default function FullFeaturedDemo() { loading={loading} checkboxSelection disableRowSelectionOnClick - rowThreshold={0} initialState={{ ...data.initialState, pinnedColumns: { left: [GRID_CHECKBOX_SELECTION_FIELD, 'desk'] }, diff --git a/docs/data/data-grid/demo/FullFeaturedDemo.tsx b/docs/data/data-grid/demo/FullFeaturedDemo.tsx index bb11d75390382..2928393ef60ec 100644 --- a/docs/data/data-grid/demo/FullFeaturedDemo.tsx +++ b/docs/data/data-grid/demo/FullFeaturedDemo.tsx @@ -341,7 +341,6 @@ export default function FullFeaturedDemo() { loading={loading} checkboxSelection disableRowSelectionOnClick - rowThreshold={0} initialState={{ ...data.initialState, pinnedColumns: { left: [GRID_CHECKBOX_SELECTION_FIELD, 'desk'] }, diff --git a/docs/data/data-grid/master-detail/BasicDetailPanels.js b/docs/data/data-grid/master-detail/BasicDetailPanels.js index 20da411552c06..172e2c73444a1 100644 --- a/docs/data/data-grid/master-detail/BasicDetailPanels.js +++ b/docs/data/data-grid/master-detail/BasicDetailPanels.js @@ -175,7 +175,6 @@ export default function BasicDetailPanels() { diff --git a/docs/data/data-grid/master-detail/BasicDetailPanels.tsx b/docs/data/data-grid/master-detail/BasicDetailPanels.tsx index b9c17508bd5b5..e34bdf9861969 100644 --- a/docs/data/data-grid/master-detail/BasicDetailPanels.tsx +++ b/docs/data/data-grid/master-detail/BasicDetailPanels.tsx @@ -177,7 +177,6 @@ export default function BasicDetailPanels() { diff --git a/docs/data/data-grid/master-detail/BasicDetailPanels.tsx.preview b/docs/data/data-grid/master-detail/BasicDetailPanels.tsx.preview index ea6bfcbf5f283..ac41382b6e510 100644 --- a/docs/data/data-grid/master-detail/BasicDetailPanels.tsx.preview +++ b/docs/data/data-grid/master-detail/BasicDetailPanels.tsx.preview @@ -1,7 +1,6 @@ \ No newline at end of file diff --git a/docs/data/data-grid/master-detail/ControlMasterDetail.js b/docs/data/data-grid/master-detail/ControlMasterDetail.js index ac0e5159d101e..bebc52b7b1778 100644 --- a/docs/data/data-grid/master-detail/ControlMasterDetail.js +++ b/docs/data/data-grid/master-detail/ControlMasterDetail.js @@ -29,7 +29,6 @@ export default function ControlMasterDetail() { ( {`Order #${row.id}`} )} diff --git a/docs/data/data-grid/master-detail/ControlMasterDetail.tsx b/docs/data/data-grid/master-detail/ControlMasterDetail.tsx index 77c09b13a4e4a..611e8f8dd434f 100644 --- a/docs/data/data-grid/master-detail/ControlMasterDetail.tsx +++ b/docs/data/data-grid/master-detail/ControlMasterDetail.tsx @@ -37,7 +37,6 @@ export default function ControlMasterDetail() { ( {`Order #${row.id}`} )} diff --git a/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.js b/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.js index af60da408ca75..0f9a8b1b1f648 100644 --- a/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.js +++ b/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.js @@ -30,7 +30,6 @@ export default function CustomizeDetailPanelToggle() { diff --git a/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.tsx b/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.tsx index 4692667b60d5f..47a78a7af50a3 100644 --- a/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.tsx +++ b/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.tsx @@ -34,7 +34,6 @@ export default function CustomizeDetailPanelToggle() { diff --git a/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.tsx.preview b/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.tsx.preview index 953b7b32aa504..d89161b50e8d3 100644 --- a/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.tsx.preview +++ b/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.tsx.preview @@ -1,7 +1,6 @@ \ No newline at end of file diff --git a/docs/data/data-grid/master-detail/DetailPanelAutoHeight.js b/docs/data/data-grid/master-detail/DetailPanelAutoHeight.js index 6819a2be2b18b..cc6d34bac8231 100644 --- a/docs/data/data-grid/master-detail/DetailPanelAutoHeight.js +++ b/docs/data/data-grid/master-detail/DetailPanelAutoHeight.js @@ -228,7 +228,6 @@ export default function DetailPanelAutoHeight() { diff --git a/docs/data/data-grid/master-detail/DetailPanelAutoHeight.tsx b/docs/data/data-grid/master-detail/DetailPanelAutoHeight.tsx index dfe9d815e169f..ed845bdc8f50c 100644 --- a/docs/data/data-grid/master-detail/DetailPanelAutoHeight.tsx +++ b/docs/data/data-grid/master-detail/DetailPanelAutoHeight.tsx @@ -234,7 +234,6 @@ export default function DetailPanelAutoHeight() { diff --git a/docs/data/data-grid/master-detail/DetailPanelAutoHeight.tsx.preview b/docs/data/data-grid/master-detail/DetailPanelAutoHeight.tsx.preview index ea6bfcbf5f283..ac41382b6e510 100644 --- a/docs/data/data-grid/master-detail/DetailPanelAutoHeight.tsx.preview +++ b/docs/data/data-grid/master-detail/DetailPanelAutoHeight.tsx.preview @@ -1,7 +1,6 @@ \ No newline at end of file diff --git a/docs/data/data-grid/master-detail/FormDetailPanel.js b/docs/data/data-grid/master-detail/FormDetailPanel.js index ce6831835d533..a09c4b6ab2e21 100644 --- a/docs/data/data-grid/master-detail/FormDetailPanel.js +++ b/docs/data/data-grid/master-detail/FormDetailPanel.js @@ -131,7 +131,6 @@ export default function FormDetailPanel() { diff --git a/docs/data/data-grid/master-detail/FormDetailPanel.tsx b/docs/data/data-grid/master-detail/FormDetailPanel.tsx index f202ae9ba07e4..12d6f209fc9b7 100644 --- a/docs/data/data-grid/master-detail/FormDetailPanel.tsx +++ b/docs/data/data-grid/master-detail/FormDetailPanel.tsx @@ -139,7 +139,6 @@ export default function FormDetailPanel() { diff --git a/docs/data/data-grid/master-detail/FormDetailPanel.tsx.preview b/docs/data/data-grid/master-detail/FormDetailPanel.tsx.preview index ea6bfcbf5f283..ac41382b6e510 100644 --- a/docs/data/data-grid/master-detail/FormDetailPanel.tsx.preview +++ b/docs/data/data-grid/master-detail/FormDetailPanel.tsx.preview @@ -1,7 +1,6 @@ \ No newline at end of file diff --git a/docs/data/data-grid/master-detail/FullWidthDetailPanel.js b/docs/data/data-grid/master-detail/FullWidthDetailPanel.js index 16bd2837aba38..c7aed919254cf 100644 --- a/docs/data/data-grid/master-detail/FullWidthDetailPanel.js +++ b/docs/data/data-grid/master-detail/FullWidthDetailPanel.js @@ -201,7 +201,6 @@ export default function FullWidthDetailPanel() { { ... }, []); ``` -Depending on the height of the detail panel, you may see a blank space when scrolling. -This is caused by the data grid using a lazy approach to update the rendered rows. -Set `rowThreshold` to 0 to force new rows to be rendered more often to fill the blank space. -Note that this may reduce the performance. - -```tsx - -``` - ::: ## Infer height from the content diff --git a/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.js b/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.js index b789fd690dc4c..014b0e55bfec3 100644 --- a/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.js +++ b/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.js @@ -39,7 +39,7 @@ export default function ColumnVirtualizationGrid() { return (
- +
); } diff --git a/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.tsx b/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.tsx index ef0aa8f4d8a9f..c314fa3160c4e 100644 --- a/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.tsx +++ b/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.tsx @@ -49,7 +49,7 @@ export default function ColumnVirtualizationGrid() { return (
- +
); } diff --git a/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.tsx.preview b/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.tsx.preview index 0fa5d537a93f7..ce7543c27f818 100644 --- a/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.tsx.preview +++ b/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.tsx.preview @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/data/data-grid/virtualization/virtualization.md b/docs/data/data-grid/virtualization/virtualization.md index 201affbcfc9ff..bc14f817113f9 100644 --- a/docs/data/data-grid/virtualization/virtualization.md +++ b/docs/data/data-grid/virtualization/virtualization.md @@ -11,7 +11,7 @@ _\*unlimited: Browsers set a limit on the number of pixels a scroll container ca Row virtualization is the insertion and removal of rows as the data grid scrolls vertically. -The grid renders twice as many rows as are visible. It isn't configurable yet. +The grid renders some additional rows above and below the visible rows. You can use `rowBufferPx` prop to hint to the Data Grid the area to render, but this value may not be respected in certain situations, for example during high-speed scrolling. Row virtualization is limited to 100 rows in the `DataGrid` component. ## Column virtualization @@ -23,11 +23,11 @@ Column virtualization is the insertion and removal of columns as the data grid s - Overscanning more allows the built-in search feature of the browser to find more matching cells. - Overscanning too much can negatively impact performance. -By default, 2 columns are rendered outside of the viewport. You can change this option with the `columnBuffer` prop. The following demo renders 1,000 columns in total: +By default, columns coming under 150 pixels region are rendered outside of the viewport. You can change this option with the `columnBufferPx` prop. As for `rowBufferPx`, the value may be ignored in some situations. The following demo renders 1,000 columns in total: {{"demo": "ColumnVirtualizationGrid.js", "bg": "inline"}} -You can disable column virtualization by setting the column buffer to a higher number than the number of rendered columns, for example with `columnBuffer={columns.length}` or `columnBuffer={Number.MAX_SAFE_INTEGER}`. +You can disable column virtualization by calling `apiRef.current.unstable_setColumnVirtualization(false)`, or by setting the column buffer to the number of total columns. ## Disable virtualization diff --git a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md index 0c939947a016d..c3fc8fc79c1c7 100644 --- a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md +++ b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md @@ -114,9 +114,10 @@ As a result, the following changes have been made: - Pinned row and column sections are now contained in the virtual scroller. - The cell inner wrapper `.MuiDataGrid-cellContent` has been removed. - +- 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`. ### Removed props @@ -143,6 +144,8 @@ As a result, the following changes have been made: }; ``` +- 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. - ✅ Some feature flags were removed from the `experimentalFeatures` prop. These features are now stable and enabled by default: - [`columnGrouping`](/x/react-data-grid/column-groups/) - [`clipboardPaste`](/x/react-data-grid/clipboard/#clipboard-paste) diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json index 4c43103ed7e0b..25c4610c05ebc 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -36,9 +36,8 @@ "checkboxSelectionVisibleOnly": { "type": { "name": "bool" }, "default": "false" }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "clipboardCopyCellDelimiter": { "type": { "name": "string" }, "default": "'\\t'" }, - "columnBuffer": { "type": { "name": "number" }, "default": "3" }, + "columnBufferPx": { "type": { "name": "number" }, "default": "150" }, "columnHeaderHeight": { "type": { "name": "number" }, "default": "56" }, - "columnThreshold": { "type": { "name": "number" }, "default": "3" }, "columnVisibilityModel": { "type": { "name": "object" } }, "defaultGroupingExpansionDepth": { "type": { "name": "number" }, "default": "0" }, "density": { @@ -553,7 +552,7 @@ "returned": "Promise | R" } }, - "rowBuffer": { "type": { "name": "number" }, "default": "3" }, + "rowBufferPx": { "type": { "name": "number" }, "default": "150" }, "rowCount": { "type": { "name": "number" } }, "rowGroupingColumnMode": { "type": { "name": "enum", "description": "'multiple'
| 'single'" }, @@ -578,7 +577,6 @@ "type": { "name": "enum", "description": "'border'
| 'margin'" }, "default": "\"margin\"" }, - "rowThreshold": { "type": { "name": "number" }, "default": "3" }, "scrollbarSize": { "type": { "name": "number" } }, "scrollEndThreshold": { "type": { "name": "number" }, "default": "80" }, "showCellVerticalBorder": { "type": { "name": "bool" }, "default": "false" }, diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json index 6c2382cfa2982..7b50ed4ccad70 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -25,9 +25,8 @@ "checkboxSelectionVisibleOnly": { "type": { "name": "bool" }, "default": "false" }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "clipboardCopyCellDelimiter": { "type": { "name": "string" }, "default": "'\\t'" }, - "columnBuffer": { "type": { "name": "number" }, "default": "3" }, + "columnBufferPx": { "type": { "name": "number" }, "default": "150" }, "columnHeaderHeight": { "type": { "name": "number" }, "default": "56" }, - "columnThreshold": { "type": { "name": "number" }, "default": "3" }, "columnVisibilityModel": { "type": { "name": "object" } }, "defaultGroupingExpansionDepth": { "type": { "name": "number" }, "default": "0" }, "density": { @@ -496,7 +495,7 @@ "returned": "Promise | R" } }, - "rowBuffer": { "type": { "name": "number" }, "default": "3" }, + "rowBufferPx": { "type": { "name": "number" }, "default": "150" }, "rowCount": { "type": { "name": "number" } }, "rowHeight": { "type": { "name": "number" }, "default": "52" }, "rowModesModel": { "type": { "name": "object" } }, @@ -516,7 +515,6 @@ "type": { "name": "enum", "description": "'border'
| 'margin'" }, "default": "\"margin\"" }, - "rowThreshold": { "type": { "name": "number" }, "default": "3" }, "scrollbarSize": { "type": { "name": "number" } }, "scrollEndThreshold": { "type": { "name": "number" }, "default": "80" }, "showCellVerticalBorder": { "type": { "name": "bool" }, "default": "false" }, diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index 9fd2b885eb548..d9ba3743b0d7c 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -24,9 +24,8 @@ "checkboxSelection": { "type": { "name": "bool" }, "default": "false" }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "clipboardCopyCellDelimiter": { "type": { "name": "string" }, "default": "'\\t'" }, - "columnBuffer": { "type": { "name": "number" }, "default": "3" }, + "columnBufferPx": { "type": { "name": "number" }, "default": "150" }, "columnHeaderHeight": { "type": { "name": "number" }, "default": "56" }, - "columnThreshold": { "type": { "name": "number" }, "default": "3" }, "columnVisibilityModel": { "type": { "name": "object" } }, "density": { "type": { @@ -413,7 +412,7 @@ "returned": "Promise | R" } }, - "rowBuffer": { "type": { "name": "number" }, "default": "3" }, + "rowBufferPx": { "type": { "name": "number" }, "default": "150" }, "rowCount": { "type": { "name": "number" } }, "rowHeight": { "type": { "name": "number" }, "default": "52" }, "rowModesModel": { "type": { "name": "object" } }, @@ -429,7 +428,6 @@ "type": { "name": "enum", "description": "'border'
| 'margin'" }, "default": "\"margin\"" }, - "rowThreshold": { "type": { "name": "number" }, "default": "3" }, "scrollbarSize": { "type": { "name": "number" } }, "showCellVerticalBorder": { "type": { "name": "bool" }, "default": "false" }, "showColumnVerticalBorder": { "type": { "name": "bool" }, "default": "false" }, diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json index 55da4f984364f..43e271be77231 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json @@ -36,8 +36,8 @@ "clipboardCopyCellDelimiter": { "description": "The character used to separate cell values when copying to the clipboard." }, - "columnBuffer": { - "description": "Number of extra columns to be rendered before/after the visible slice." + "columnBufferPx": { + "description": "Column region in pixels to render before/after the viewport" }, "columnHeaderHeight": { "description": "Sets the height in pixel of the column headers in the Data Grid." @@ -45,9 +45,6 @@ "columns": { "description": "Set of columns of type GridColDef[]." }, - "columnThreshold": { - "description": "Number of rows from the columnBuffer that can be visible before a new slice is rendered." - }, "columnVisibilityModel": { "description": "Set the column visibility model of the Data Grid. If defined, the Data Grid will ignore the hide property in GridColDef." }, @@ -578,9 +575,7 @@ "Promise | R": "The final values to update the row." } }, - "rowBuffer": { - "description": "Number of extra rows to be rendered before/after the visible slice." - }, + "rowBufferPx": { "description": "Row region in pixels to render before/after the viewport" }, "rowCount": { "description": "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." }, @@ -603,9 +598,6 @@ "rowSpacingType": { "description": "Sets the type of space between rows added by getRowSpacing." }, - "rowThreshold": { - "description": "Number of rows from the rowBuffer that can be visible before a new slice is rendered." - }, "scrollbarSize": { "description": "Override the height/width of the Data Grid inner scrollbar." }, diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json index 32c54712411fd..714f0c82153de 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json @@ -29,8 +29,8 @@ "clipboardCopyCellDelimiter": { "description": "The character used to separate cell values when copying to the clipboard." }, - "columnBuffer": { - "description": "Number of extra columns to be rendered before/after the visible slice." + "columnBufferPx": { + "description": "Column region in pixels to render before/after the viewport" }, "columnHeaderHeight": { "description": "Sets the height in pixel of the column headers in the Data Grid." @@ -38,9 +38,6 @@ "columns": { "description": "Set of columns of type GridColDef[]." }, - "columnThreshold": { - "description": "Number of rows from the columnBuffer that can be visible before a new slice is rendered." - }, "columnVisibilityModel": { "description": "Set the column visibility model of the Data Grid. If defined, the Data Grid will ignore the hide property in GridColDef." }, @@ -524,9 +521,7 @@ "Promise | R": "The final values to update the row." } }, - "rowBuffer": { - "description": "Number of extra rows to be rendered before/after the visible slice." - }, + "rowBufferPx": { "description": "Row region in pixels to render before/after the viewport" }, "rowCount": { "description": "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." }, @@ -545,9 +540,6 @@ "rowSpacingType": { "description": "Sets the type of space between rows added by getRowSpacing." }, - "rowThreshold": { - "description": "Number of rows from the rowBuffer that can be visible before a new slice is rendered." - }, "scrollbarSize": { "description": "Override the height/width of the Data Grid inner scrollbar." }, diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json index a9dd4e497f260..18b8f9aee4f18 100644 --- a/docs/translations/api-docs/data-grid/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid/data-grid.json @@ -26,8 +26,8 @@ "clipboardCopyCellDelimiter": { "description": "The character used to separate cell values when copying to the clipboard." }, - "columnBuffer": { - "description": "Number of extra columns to be rendered before/after the visible slice." + "columnBufferPx": { + "description": "Column region in pixels to render before/after the viewport" }, "columnHeaderHeight": { "description": "Sets the height in pixel of the column headers in the Data Grid." @@ -35,9 +35,6 @@ "columns": { "description": "Set of columns of type GridColDef[]." }, - "columnThreshold": { - "description": "Number of rows from the columnBuffer that can be visible before a new slice is rendered." - }, "columnVisibilityModel": { "description": "Set the column visibility model of the Data Grid. If defined, the Data Grid will ignore the hide property in GridColDef." }, @@ -427,9 +424,7 @@ "Promise | R": "The final values to update the row." } }, - "rowBuffer": { - "description": "Number of extra rows to be rendered before/after the visible slice." - }, + "rowBufferPx": { "description": "Row region in pixels to render before/after the viewport" }, "rowCount": { "description": "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." }, @@ -444,9 +439,6 @@ "rowSpacingType": { "description": "Sets the type of space between rows added by getRowSpacing." }, - "rowThreshold": { - "description": "Number of rows from the rowBuffer that can be visible before a new slice is rendered." - }, "scrollbarSize": { "description": "Override the height/width of the Data Grid inner scrollbar." }, diff --git a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index 8991449eda96b..9007fa80d6534 100644 --- a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -171,10 +171,10 @@ DataGridPremiumRaw.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. @@ -185,11 +185,6 @@ DataGridPremiumRaw.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]]. @@ -889,10 +884,10 @@ DataGridPremiumRaw.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. @@ -958,11 +953,6 @@ DataGridPremiumRaw.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. */ diff --git a/packages/x-data-grid-premium/src/tests/columns.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/columns.DataGridPremium.test.tsx index 14267f4ac7dca..63543419ab26c 100644 --- a/packages/x-data-grid-premium/src/tests/columns.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/columns.DataGridPremium.test.tsx @@ -32,7 +32,7 @@ describe(' - Columns', () => { columns={[{ field: 'brand' }]} initialState={{ aggregation: { model: { brand: 'size' } } }} showCellVerticalBorder - rowBuffer={1} + rowBufferPx={52} /> , ); diff --git a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx index df1e21319472d..ca490f839706a 100644 --- a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -134,10 +134,10 @@ DataGridProRaw.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. @@ -148,11 +148,6 @@ DataGridProRaw.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]]. @@ -791,10 +786,10 @@ DataGridProRaw.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. @@ -850,11 +845,6 @@ DataGridProRaw.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. */ diff --git a/packages/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoader.ts b/packages/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoader.ts index 745a4fb63d5d5..0ced8d346ae75 100644 --- a/packages/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoader.ts +++ b/packages/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoader.ts @@ -68,12 +68,7 @@ export const useGridLazyLoader = ( privateApiRef: React.MutableRefObject, props: Pick< DataGridProProcessedProps, - | 'onFetchRows' - | 'rowsLoadingMode' - | 'pagination' - | 'paginationMode' - | 'rowBuffer' - | 'experimentalFeatures' + 'onFetchRows' | 'rowsLoadingMode' | 'pagination' | 'paginationMode' | 'experimentalFeatures' >, ): void => { const sortModel = useGridSelector(privateApiRef, gridSortModelSelector); diff --git a/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx index 511e024d7b53f..bfe5efda3299e 100644 --- a/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx @@ -59,8 +59,7 @@ describe(' - Detail panel', () => { getDetailPanelHeight={({ id }) => (Number(id) % 2 === 0 ? 1 : 2) * rowHeight} // 50px for even rows, otherwise 100px getDetailPanelContent={() =>
} rowHeight={rowHeight} - rowBuffer={0} - rowThreshold={0} + rowBufferPx={0} initialState={{ detailPanel: { expandedRowIds: [0, 1], diff --git a/packages/x-data-grid-pro/src/tests/infiniteLoader.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/infiniteLoader.DataGridPro.test.tsx index 9973b2a200b45..eb99be09db6db 100644 --- a/packages/x-data-grid-pro/src/tests/infiniteLoader.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/infiniteLoader.DataGridPro.test.tsx @@ -124,27 +124,37 @@ describe(' - Infnite loader', () => { await waitFor(() => { expect(getRow.callCount).to.equal(1); }); - expect(getColumnValues(0)).to.deep.equal(['0', '1']); + await waitFor(() => { + expect(getColumnValues(0)).to.deep.equal(['0', '1']); + }); await waitFor(() => { expect(getRow.callCount).to.equal(2); }); - expect(getColumnValues(0)).to.deep.equal(['0', '1', '2']); + await waitFor(() => { + expect(getColumnValues(0)).to.deep.equal(['0', '1', '2']); + }); await waitFor(() => { expect(getRow.callCount).to.equal(3); }); - expect(getColumnValues(0)).to.deep.equal(['0', '1', '2', '3']); + await waitFor(() => { + expect(getColumnValues(0)).to.deep.equal(['0', '1', '2', '3']); + }); await waitFor(() => { expect(getRow.callCount).to.equal(4); }); - expect(getColumnValues(0)).to.deep.equal(['0', '1', '2', '3', '4']); + await waitFor(() => { + expect(getColumnValues(0)).to.deep.equal(['0', '1', '2', '3', '4']); + }); await waitFor(() => { expect(getRow.callCount).to.equal(5); }); - expect(getColumnValues(0)).to.deep.equal(['0', '1', '2', '3', '4', '5']); + await waitFor(() => { + expect(getColumnValues(0)).to.deep.equal(['0', '1', '2', '3', '4', '5']); + }); await sleep(200); // should not load more rows because the threshold is not reached diff --git a/packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx index ece96b663e629..0433592c536bc 100644 --- a/packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx @@ -419,7 +419,7 @@ describe(' - Rows', () => { it('should compute rows correctly on height change', async () => { const { setProps } = render( - , + , ); expect(getRows()).to.have.length(1); setProps({ @@ -430,9 +430,10 @@ describe(' - Rows', () => { expect(getRows()).to.have.length(3); }); - it('should render last row when scrolling to the bottom', () => { + it('should render last row when scrolling to the bottom', async () => { + const n = 4; const rowHeight = 50; - const rowBuffer = 4; + const rowBufferPx = n * rowHeight; const nbRows = 996; const height = 600; render( @@ -440,7 +441,7 @@ describe(' - Rows', () => { nbRows={nbRows} columnHeaderHeight={0} rowHeight={rowHeight} - rowBuffer={rowBuffer} + rowBufferPx={rowBufferPx} hideFooter height={height} />, @@ -451,11 +452,11 @@ describe(' - Rows', () => { virtualScroller.scrollTop = 10e6; // scroll to the bottom act(() => virtualScroller.dispatchEvent(new Event('scroll'))); + clock.runToLast(); + const lastCell = $$('[role="row"]:last-child [role="gridcell"]')[0]; expect(lastCell).to.have.text('995'); - expect(renderingZone.children.length).to.equal( - Math.floor((height - 1) / rowHeight) + rowBuffer, - ); // Subtracting 1 is needed because of the column header borders + expect(renderingZone.children.length).to.equal(Math.floor(height / rowHeight) + n); const scrollbarSize = apiRef.current.state.dimensions.scrollbarSize; const distanceToFirstRow = (nbRows - renderingZone.children.length) * rowHeight; expect(gridOffsetTop()).to.equal(distanceToFirstRow); @@ -475,58 +476,56 @@ describe(' - Rows', () => { it('should render extra columns when the columnBuffer prop is present', () => { const border = 1; const width = 300; - const columnBuffer = 2; + const n = 2; const columnWidth = 100; + const columnBufferPx = n * columnWidth; render( , ); const firstRow = getRow(0); - expect($$(firstRow, '[role="gridcell"]')).to.have.length( - Math.floor(width / columnWidth) + columnBuffer, - ); + expect($$(firstRow, '[role="gridcell"]')).to.have.length(Math.floor(width / columnWidth) + n); const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; virtualScroller.scrollLeft = 301; act(() => virtualScroller.dispatchEvent(new Event('scroll'))); + clock.runToLast(); expect($$(firstRow, '[role="gridcell"]')).to.have.length( - columnBuffer + 1 + Math.floor(width / columnWidth) + columnBuffer, + n + 1 + Math.floor(width / columnWidth) + n, ); }); - it('should render new rows when scrolling past the rowThreshold value', () => { - const rowThreshold = 3; + it('should render new rows when scrolling past the threshold value', () => { const rowHeight = 50; - render( - , - ); + const rowThresholdPx = 1 * rowHeight; + render(); const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; const renderingZone = document.querySelector('.MuiDataGrid-virtualScrollerRenderZone')!; let firstRow = renderingZone.firstChild; expect(firstRow).to.have.attr('data-rowindex', '0'); - virtualScroller.scrollTop = rowThreshold * rowHeight; + virtualScroller.scrollTop = rowThresholdPx; act(() => virtualScroller.dispatchEvent(new Event('scroll'))); + clock.runToLast(); firstRow = renderingZone.firstChild; - expect(firstRow).to.have.attr('data-rowindex', '3'); + expect(firstRow).to.have.attr('data-rowindex', '1'); }); - it('should render new columns when scrolling past the columnThreshold value', () => { - const columnThreshold = 3; + it('should render new columns when scrolling past the threshold value', () => { const columnWidth = 100; - render( - , - ); + const columnThresholdPx = 1 * columnWidth; + render(); const virtualScroller = grid('virtualScroller')!; const renderingZone = grid('virtualScrollerRenderZone')!; const firstRow = $(renderingZone, '[role="row"]:first-child')!; let firstColumn = $$(firstRow, '[role="gridcell"]')[0]; expect(firstColumn).to.have.attr('data-colindex', '0'); - virtualScroller.scrollLeft = columnThreshold * columnWidth; + virtualScroller.scrollLeft = columnThresholdPx; act(() => virtualScroller.dispatchEvent(new Event('scroll'))); + clock.runToLast(); firstColumn = $(renderingZone, '[role="row"] > [role="gridcell"]')!; - expect(firstColumn).to.have.attr('data-colindex', '3'); + expect(firstColumn).to.have.attr('data-colindex', '1'); }); describe('Pagination', () => { diff --git a/packages/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/x-data-grid/src/DataGrid/DataGrid.tsx index fe0f14bbb9d6c..013d06d2cf2c3 100644 --- a/packages/x-data-grid/src/DataGrid/DataGrid.tsx +++ b/packages/x-data-grid/src/DataGrid/DataGrid.tsx @@ -135,10 +135,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. @@ -149,11 +149,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]]. @@ -658,10 +653,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. @@ -705,11 +700,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. */ diff --git a/packages/x-data-grid/src/DataGrid/useDataGridProps.ts b/packages/x-data-grid/src/DataGrid/useDataGridProps.ts index 3759d21e04241..af9812ee7466a 100644 --- a/packages/x-data-grid/src/DataGrid/useDataGridProps.ts +++ b/packages/x-data-grid/src/DataGrid/useDataGridProps.ts @@ -31,10 +31,8 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES: DataGridPropsWithDefaultValues = { autoPageSize: false, checkboxSelection: false, checkboxSelectionVisibleOnly: false, - columnBuffer: 3, - rowBuffer: 3, - columnThreshold: 3, - rowThreshold: 3, + columnBufferPx: 150, + rowBufferPx: 150, rowSelection: true, disableColumnFilter: false, disableColumnMenu: false, diff --git a/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts b/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts index 5dc3c3b1c836e..7da63d617fef2 100644 --- a/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts +++ b/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts @@ -429,36 +429,6 @@ export function getFirstNonSpannedColumnToRender({ return firstNonSpannedColumnToRender; } -export function getFirstColumnIndexToRender({ - firstColumnIndex, - minColumnIndex, - columnBuffer, - firstRowToRender, - lastRowToRender, - apiRef, - visibleRows, -}: { - firstColumnIndex: number; - minColumnIndex: number; - columnBuffer: number; - apiRef: React.MutableRefObject; - firstRowToRender: number; - lastRowToRender: number; - visibleRows: GridRowEntry[]; -}) { - const initialFirstColumnToRender = Math.max(firstColumnIndex - columnBuffer, minColumnIndex); - - const firstColumnToRender = getFirstNonSpannedColumnToRender({ - firstColumnToRender: initialFirstColumnToRender, - apiRef, - firstRowToRender, - lastRowToRender, - visibleRows, - }); - - return firstColumnToRender; -} - export function getTotalHeaderHeight( apiRef: React.MutableRefObject, headerHeight: number, diff --git a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 50c85b23376d7..8ed66d64e1ae8 100644 --- a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -4,6 +4,8 @@ import { unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback, } from '@mui/utils'; +import useLazyRef from '@mui/utils/useLazyRef'; +import useTimeout from '@mui/utils/useTimeout'; import { useTheme, Theme } from '@mui/material/styles'; import type { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity'; import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext'; @@ -43,20 +45,53 @@ import { } from './gridVirtualizationSelectors'; import { EMPTY_RENDER_CONTEXT } from './useGridVirtualization'; -export const EMPTY_DETAIL_PANELS = Object.freeze(new Map()); - -export type VirtualScroller = ReturnType; +const MINIMUM_COLUMN_WIDTH = 50; interface PrivateApiWithInfiniteLoader extends GridPrivateApiCommunity, GridInfiniteLoaderPrivateApi {} +export type VirtualScroller = ReturnType; + +type ScrollPosition = { top: number; left: number }; +enum ScrollDirection { + NONE, + UP, + DOWN, + LEFT, + RIGHT, +} + +const EMPTY_SCROLL_POSITION = { top: 0, left: 0 }; + +export const EMPTY_DETAIL_PANELS = Object.freeze(new Map()); + +const createScrollCache = ( + rowBufferPx: number, + columnBufferPx: number, + verticalBuffer: number, + horizontalBuffer: number, +) => ({ + direction: ScrollDirection.NONE, + buffer: bufferForDirection( + ScrollDirection.NONE, + rowBufferPx, + columnBufferPx, + verticalBuffer, + horizontalBuffer, + ), +}); +type ScrollCache = ReturnType; + +const isJSDOM = typeof window !== 'undefined' ? /jsdom/.test(window.navigator.userAgent) : false; + export const useGridVirtualScroller = () => { const apiRef = useGridPrivateApiContext() as React.MutableRefObject; const rootProps = useGridRootProps(); const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector); - const enabled = useGridSelector(apiRef, gridVirtualizationEnabledSelector); - const enabledForColumns = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector); + const enabled = useGridSelector(apiRef, gridVirtualizationEnabledSelector) && !isJSDOM; + const enabledForColumns = + useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector) && !isJSDOM; const dimensions = useGridSelector(apiRef, gridDimensionsSelector); const outerSize = dimensions.viewportOuterSize; const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector); @@ -81,11 +116,35 @@ export const useGridVirtualScroller = () => { useResizeObserver(mainRef, () => apiRef.current.resize()); - const previousContext = React.useRef(EMPTY_RENDER_CONTEXT); + /* + * Scroll context logic + * ==================== + * We only render the cells contained in the `renderContext`. However, when the user starts scrolling the grid + * in a direction, we want to render as many cells as possible in that direction, as to avoid presenting white + * areas if the user scrolls too fast/far and the viewport ends up in a region we haven't rendered yet. To render + * more cells, we store some offsets to add to the viewport in `scrollCache.buffer`. Those offsets make the render + * context wider in the direction the user is going, but also makes the buffer around the viewport `0` for the + * dimension (horizontal or vertical) in which the user is not scrolling. So if the normal viewport is 8 columns + * wide, with a 1 column buffer (10 columns total), then we want it to be exactly 8 columns wide during vertical + * scroll. + * However, we don't want the rows in the old context to re-render from e.g. 10 columns to 8 columns, because that's + * work that's not necessary. Thus we store the context at the start of the scroll in `frozenContext`, and the rows + * that are part of this old context will keep their same render context as to avoid re-rendering. + */ + const scrollPosition = React.useRef(EMPTY_SCROLL_POSITION); + const previousContextScrollPosition = React.useRef(EMPTY_SCROLL_POSITION); const previousRowContext = React.useRef(EMPTY_RENDER_CONTEXT); const renderContext = useGridSelector(apiRef, gridRenderContextSelector); - const scrollPosition = React.useRef({ top: 0, left: 0 }).current; - const prevTotalWidth = React.useRef(columnsTotalWidth); + const scrollTimeout = useTimeout(); + const frozenContext = React.useRef(undefined); + const scrollCache = useLazyRef(() => + createScrollCache( + rootProps.rowBufferPx, + rootProps.columnBufferPx, + dimensions.rowHeight * 15, + MINIMUM_COLUMN_WIDTH * 6, + ), + ).current; const focusedCell = { rowIndex: React.useMemo( @@ -100,7 +159,7 @@ export const useGridVirtualScroller = () => { }; const updateRenderContext = React.useCallback( - (nextRenderContext: GridRenderContext, rawRenderContext: GridRenderContext) => { + (nextRenderContext: GridRenderContext) => { if ( areRenderContextsEqual(nextRenderContext, apiRef.current.state.virtualization.renderContext) ) { @@ -129,62 +188,90 @@ export const useGridVirtualScroller = () => { apiRef.current.publishEvent('renderedRowsIntervalChange', nextRenderContext); } - previousContext.current = rawRenderContext; - prevTotalWidth.current = dimensions.columnsTotalWidth; + previousContextScrollPosition.current = scrollPosition.current; }, - [apiRef, dimensions.isReady, dimensions.columnsTotalWidth], + [apiRef, dimensions.isReady], ); const triggerUpdateRenderContext = () => { - const inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns); - const [nextRenderContext, rawRenderContext] = computeRenderContext(inputs, scrollPosition); + const newScroll = { + top: scrollerRef.current!.scrollTop, + left: scrollerRef.current!.scrollLeft, + }; - // Since previous render, we have scrolled... - const topRowsScrolled = Math.abs( - rawRenderContext.firstRowIndex - previousContext.current.firstRowIndex, - ); - const bottomRowsScrolled = Math.abs( - rawRenderContext.lastRowIndex - previousContext.current.lastRowIndex, - ); + const dx = newScroll.left - scrollPosition.current.left; + const dy = newScroll.top - scrollPosition.current.top; + + const isScrolling = dx !== 0 || dy !== 0; + + scrollPosition.current = newScroll; - const topColumnsScrolled = Math.abs( - rawRenderContext.firstColumnIndex - previousContext.current.firstColumnIndex, + const direction = isScrolling ? directionForDelta(dx, dy) : ScrollDirection.NONE; + + // Since previous render, we have scrolled... + const rowScroll = Math.abs( + scrollPosition.current.top - previousContextScrollPosition.current.top, ); - const bottomColumnsScrolled = Math.abs( - rawRenderContext.lastColumnIndex - previousContext.current.lastColumnIndex, + const columnScroll = Math.abs( + scrollPosition.current.left - previousContextScrollPosition.current.left, ); - const shouldUpdate = - topRowsScrolled >= rootProps.rowThreshold || - bottomRowsScrolled >= rootProps.rowThreshold || - topColumnsScrolled >= rootProps.columnThreshold || - bottomColumnsScrolled >= rootProps.columnThreshold || - prevTotalWidth.current !== dimensions.columnsTotalWidth; + // PERF: use the computed minimum column width instead of a static one + const didCrossThreshold = + rowScroll >= dimensions.rowHeight || columnScroll >= MINIMUM_COLUMN_WIDTH; + const didChangeDirection = scrollCache.direction !== direction; + const shouldUpdate = didCrossThreshold || didChangeDirection; if (!shouldUpdate) { - return previousContext.current; + return renderContext; + } + + // Render a new context + + if (didChangeDirection) { + switch (direction) { + case ScrollDirection.NONE: + case ScrollDirection.LEFT: + case ScrollDirection.RIGHT: + frozenContext.current = undefined; + break; + default: + frozenContext.current = renderContext; + break; + } } + scrollCache.direction = direction; + scrollCache.buffer = bufferForDirection( + direction, + rootProps.rowBufferPx, + rootProps.columnBufferPx, + dimensions.rowHeight * 15, + MINIMUM_COLUMN_WIDTH * 6, + ); + + const inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns); + const nextRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache); + // Prevents batching render context changes ReactDOM.flushSync(() => { - updateRenderContext(nextRenderContext, rawRenderContext); + updateRenderContext(nextRenderContext); }); + scrollTimeout.start(1000, triggerUpdateRenderContext); + return nextRenderContext; }; const forceUpdateRenderContext = () => { const inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns); - const [nextRenderContext, rawRenderContext] = computeRenderContext(inputs, scrollPosition); - updateRenderContext(nextRenderContext, rawRenderContext); + const nextRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache); + updateRenderContext(nextRenderContext); }; const handleScroll = useEventCallback((event: React.UIEvent) => { const { scrollTop, scrollLeft } = event.currentTarget; - scrollPosition.top = scrollTop; - scrollPosition.left = scrollLeft; - // On iOS and macOS, negative offsets are possible when swiping past the start if (scrollTop < 0) { return; @@ -228,8 +315,7 @@ export const useGridVirtualScroller = () => { return []; } - const columnPositions = gridColumnPositionsSelector(apiRef); - const currentRenderContext = params.renderContext ?? renderContext; + const baseRenderContext = params.renderContext ?? renderContext; const isLastSection = (!hasBottomPinnedRows && params.position === undefined) || @@ -253,8 +339,8 @@ export const useGridVirtualScroller = () => { const rowModels = params.rows ?? currentPage.rows; - const firstRowToRender = currentRenderContext.firstRowIndex; - const lastRowToRender = Math.min(currentRenderContext.lastRowIndex, rowModels.length); + const firstRowToRender = baseRenderContext.firstRowIndex; + const lastRowToRender = Math.min(baseRenderContext.lastRowIndex, rowModels.length); const rowIndexes = params.rows ? range(0, params.rows.length) @@ -274,6 +360,7 @@ export const useGridVirtualScroller = () => { const rows: React.ReactNode[] = []; const rowProps = rootProps.slotProps?.row; + const columnPositions = gridColumnPositionsSelector(apiRef); rowIndexes.forEach((rowIndexInPage) => { const { id, model } = rowModels[rowIndexInPage]; @@ -350,6 +437,16 @@ export const useGridVirtualScroller = () => { tabbableCell = cellParams.cellMode === 'view' ? cellTabIndex.field : null; } + let currentRenderContext = baseRenderContext; + if ( + !isPinnedSection && + frozenContext.current && + rowIndexInPage >= frozenContext.current.firstRowIndex && + rowIndexInPage < frozenContext.current.lastRowIndex + ) { + currentRenderContext = frozenContext.current; + } + const offsetLeft = computeOffsetLeft( columnPositions, currentRenderContext, @@ -453,12 +550,12 @@ export const useGridVirtualScroller = () => { useRunOnce(outerSize.width !== 0, () => { const inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns); - const [initialRenderContext, rawRenderContext] = computeRenderContext(inputs, scrollPosition); - updateRenderContext(initialRenderContext, rawRenderContext); + const initialRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache); + updateRenderContext(initialRenderContext); apiRef.current.publishEvent('scrollPositionChange', { - top: scrollPosition.top, - left: scrollPosition.left, + top: scrollPosition.current.top, + left: scrollPosition.current.left, renderContext: initialRenderContext, }); }); @@ -497,18 +594,19 @@ export const useGridVirtualScroller = () => { }; }; -type ScrollPosition = { top: number; left: number }; type RenderContextInputs = { enabled: boolean; enabledForColumns: boolean; apiRef: React.MutableRefObject; autoHeight: boolean; - rowBuffer: number; - columnBuffer: number; + rowBufferPx: number; + columnBufferPx: number; leftPinnedWidth: number; columnsTotalWidth: number; viewportInnerWidth: number; viewportInnerHeight: number; + lastRowHeight: number; + lastColumnWidth: number; rowsMeta: ReturnType; columnPositions: ReturnType; rows: ReturnType['rows']; @@ -525,27 +623,36 @@ function inputsSelector( ): RenderContextInputs { const dimensions = gridDimensionsSelector(apiRef.current.state); const currentPage = getVisibleRows(apiRef, rootProps); + const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef); + const lastRowId = apiRef.current.state.rows.dataRowIds.at(-1); + const lastColumn = visibleColumns.at(-1); return { enabled, enabledForColumns, apiRef, autoHeight: rootProps.autoHeight, - rowBuffer: rootProps.rowBuffer, - columnBuffer: rootProps.columnBuffer, + rowBufferPx: rootProps.rowBufferPx, + columnBufferPx: rootProps.columnBufferPx, leftPinnedWidth: dimensions.leftPinnedWidth, columnsTotalWidth: dimensions.columnsTotalWidth, viewportInnerWidth: dimensions.viewportInnerSize.width, viewportInnerHeight: dimensions.viewportInnerSize.height, + lastRowHeight: lastRowId !== undefined ? apiRef.current.unstable_getRowHeight(lastRowId) : 0, + lastColumnWidth: lastColumn?.computedWidth ?? 0, rowsMeta: gridRowsMetaSelector(apiRef.current.state), columnPositions: gridColumnPositionsSelector(apiRef), rows: currentPage.rows, range: currentPage.range, pinnedColumns: gridVisiblePinnedColumnDefinitionsSelector(apiRef), - visibleColumns: gridVisibleColumnDefinitionsSelector(apiRef), + visibleColumns, }; } -function computeRenderContext(inputs: RenderContextInputs, scrollPosition: ScrollPosition) { +function computeRenderContext( + inputs: RenderContextInputs, + scrollPosition: ScrollPosition, + scrollCache: ScrollCache, +) { let renderContext: GridRenderContext; if (!inputs.enabled) { @@ -562,7 +669,11 @@ function computeRenderContext(inputs: RenderContextInputs, scrollPosition: Scrol // Clamp the value because the search may return an index out of bounds. // In the last index, this is not needed because Array.slice doesn't include it. const firstRowIndex = Math.min( - getNearestIndexToRender(inputs, top), + getNearestIndexToRender(inputs, top, { + atStart: true, + lastPosition: + inputs.rowsMeta.positions[inputs.rowsMeta.positions.length - 1] + inputs.lastRowHeight, + }), inputs.rowsMeta.positions.length - 1, ); @@ -581,7 +692,10 @@ function computeRenderContext(inputs: RenderContextInputs, scrollPosition: Scrol lastIndex: lastRowIndex, minFirstIndex: 0, maxLastIndex: inputs.rows.length, - buffer: inputs.rowBuffer, + bufferBefore: scrollCache.buffer.rowBefore, + bufferAfter: scrollCache.buffer.rowAfter, + positions: inputs.rowsMeta.positions, + lastSize: inputs.lastRowHeight, }); for (let i = firstRowToRender; i < lastRowToRender && !hasRowWithAutoHeight; i += 1) { @@ -609,20 +723,16 @@ function computeRenderContext(inputs: RenderContextInputs, scrollPosition: Scrol }; } - const actualRenderContext = deriveRenderContext( - inputs.apiRef, - inputs.rowBuffer, - inputs.columnBuffer, - inputs.rows, - inputs.pinnedColumns, - inputs.visibleColumns, - renderContext, - ); + const actualRenderContext = deriveRenderContext(inputs, renderContext, scrollCache); - return [actualRenderContext, renderContext]; + return actualRenderContext; } -function getNearestIndexToRender(inputs: RenderContextInputs, offset: number) { +function getNearestIndexToRender( + inputs: RenderContextInputs, + offset: number, + options?: SearchOptions, +) { const lastMeasuredIndexRelativeToAllRows = inputs.apiRef.current.getLastMeasuredRowIndex(); let allRowsMeasured = lastMeasuredIndexRelativeToAllRows === Infinity; if (inputs.range?.lastRowIndex && !allRowsMeasured) { @@ -642,7 +752,7 @@ function getNearestIndexToRender(inputs: RenderContextInputs, offset: number) { ) { // If all rows were measured (when no row has "auto" as height) or all rows before the offset // were measured, then use a binary search because it's faster. - return binarySearch(offset, inputs.rowsMeta.positions); + return binarySearch(offset, inputs.rowsMeta.positions, options); } // Otherwise, use an exponential search. @@ -653,6 +763,7 @@ function getNearestIndexToRender(inputs: RenderContextInputs, offset: number) { offset, inputs.rowsMeta.positions, lastMeasuredIndexRelativeToCurrentPage, + options, ); } @@ -662,36 +773,38 @@ function getNearestIndexToRender(inputs: RenderContextInputs, offset: number) { * spanning. */ function deriveRenderContext( - apiRef: React.MutableRefObject, - rowBuffer: number, - columnBuffer: number, - rows: ReturnType['rows'], - pinnedColumns: ReturnType, - visibleColumns: ReturnType, + inputs: RenderContextInputs, nextRenderContext: GridRenderContext, + scrollCache: ScrollCache, ) { const [firstRowToRender, lastRowToRender] = getIndexesToRender({ firstIndex: nextRenderContext.firstRowIndex, lastIndex: nextRenderContext.lastRowIndex, minFirstIndex: 0, - maxLastIndex: rows.length, - buffer: rowBuffer, + maxLastIndex: inputs.rows.length, + bufferBefore: scrollCache.buffer.rowBefore, + bufferAfter: scrollCache.buffer.rowAfter, + positions: inputs.rowsMeta.positions, + lastSize: inputs.lastRowHeight, }); const [initialFirstColumnToRender, lastColumnToRender] = getIndexesToRender({ firstIndex: nextRenderContext.firstColumnIndex, lastIndex: nextRenderContext.lastColumnIndex, - minFirstIndex: pinnedColumns.left.length, - maxLastIndex: visibleColumns.length - pinnedColumns.right.length, - buffer: columnBuffer, + minFirstIndex: inputs.pinnedColumns.left.length, + maxLastIndex: inputs.visibleColumns.length - inputs.pinnedColumns.right.length, + bufferBefore: scrollCache.buffer.columnBefore, + bufferAfter: scrollCache.buffer.columnAfter, + positions: inputs.columnPositions, + lastSize: inputs.lastColumnWidth, }); const firstColumnToRender = getFirstNonSpannedColumnToRender({ firstColumnToRender: initialFirstColumnToRender, - apiRef, + apiRef: inputs.apiRef, firstRowToRender, lastRowToRender, - visibleRows: rows, + visibleRows: inputs.rows, }); return { @@ -745,7 +858,12 @@ function binarySearch( : binarySearch(offset, positions, options, pivot + 1, sliceEnd); } -function exponentialSearch(offset: number, positions: number[], index: number): number { +function exponentialSearch( + offset: number, + positions: number[], + index: number, + options: SearchOptions | undefined = undefined, +): number { let interval = 1; while (index < positions.length && Math.abs(positions[index]) < offset) { @@ -756,7 +874,7 @@ function exponentialSearch(offset: number, positions: number[], index: number): return binarySearch( offset, positions, - undefined, + options, Math.floor(index / 2), Math.min(index, positions.length), ); @@ -765,19 +883,35 @@ function exponentialSearch(offset: number, positions: number[], index: number): function getIndexesToRender({ firstIndex, lastIndex, - buffer, + bufferBefore, + bufferAfter, minFirstIndex, maxLastIndex, + positions, + lastSize, }: { firstIndex: number; lastIndex: number; - buffer: number; + bufferBefore: number; + bufferAfter: number; minFirstIndex: number; maxLastIndex: number; + positions: number[]; + lastSize: number; }) { + const firstPosition = positions[firstIndex] - bufferBefore; + const lastPosition = positions[lastIndex] + bufferAfter; + + const firstIndexPadded = binarySearch(firstPosition, positions, { + atStart: true, + lastPosition: positions[positions.length - 1] + lastSize, + }); + + const lastIndexPadded = binarySearch(lastPosition, positions); + return [ - clamp(firstIndex - buffer, minFirstIndex, maxLastIndex), - clamp(lastIndex + buffer, minFirstIndex, maxLastIndex), + clamp(firstIndexPadded, minFirstIndex, maxLastIndex), + clamp(lastIndexPadded, minFirstIndex, maxLastIndex), ]; } @@ -806,3 +940,73 @@ export function computeOffsetLeft( return left; } + +function directionForDelta(dx: number, dy: number) { + if (dx === 0 && dy === 0) { + return ScrollDirection.NONE; + } + /* eslint-disable */ + if (Math.abs(dy) >= Math.abs(dx)) { + if (dy > 0) { + return ScrollDirection.DOWN; + } else { + return ScrollDirection.UP; + } + } else { + if (dx > 0) { + return ScrollDirection.RIGHT; + } else { + return ScrollDirection.LEFT; + } + } + /* eslint-enable */ +} + +function bufferForDirection( + direction: ScrollDirection, + rowBufferPx: number, + columnBufferPx: number, + verticalBuffer: number, + horizontalBuffer: number, +) { + switch (direction) { + case ScrollDirection.NONE: + return { + rowAfter: rowBufferPx, + rowBefore: rowBufferPx, + columnAfter: columnBufferPx, + columnBefore: columnBufferPx, + }; + case ScrollDirection.LEFT: + return { + rowAfter: 0, + rowBefore: 0, + columnAfter: 0, + columnBefore: horizontalBuffer, + }; + case ScrollDirection.RIGHT: + return { + rowAfter: 0, + rowBefore: 0, + columnAfter: horizontalBuffer, + columnBefore: 0, + }; + case ScrollDirection.UP: + return { + rowAfter: 0, + rowBefore: verticalBuffer, + columnAfter: 0, + columnBefore: 0, + }; + case ScrollDirection.DOWN: + return { + rowAfter: verticalBuffer, + rowBefore: 0, + columnAfter: 0, + columnBefore: 0, + }; + default: + // eslint unable to figure out enum exhaustiveness + throw new Error('unreachable'); + } +} diff --git a/packages/x-data-grid/src/models/props/DataGridProps.ts b/packages/x-data-grid/src/models/props/DataGridProps.ts index 13918cd9b5ab5..eca76ffebad09 100644 --- a/packages/x-data-grid/src/models/props/DataGridProps.ts +++ b/packages/x-data-grid/src/models/props/DataGridProps.ts @@ -128,30 +128,20 @@ 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 - */ - columnThreshold: number; /** * If `true`, column filters are disabled. * @default false diff --git a/packages/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx b/packages/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx index 57f591f6f573b..25071ffe04e88 100644 --- a/packages/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx @@ -312,8 +312,7 @@ describe(' - Column spanning', () => { { field: 'price' }, ]} rows={rows} - rowBuffer={1} - rowThreshold={1} + rowBufferPx={rowHeight} rowHeight={rowHeight} />
, @@ -348,8 +347,7 @@ describe(' - Column spanning', () => { { field: 'col3', width: 100 }, ]} rows={[{ id: 0, col0: '0-0', col1: '0-1', col2: '0-2', col3: '0-3' }]} - columnBuffer={1} - columnThreshold={1} + columnBufferPx={100} /> , ); @@ -456,8 +454,7 @@ describe(' - Column spanning', () => { { field: 'col4', width: 100 }, ]} rows={[{ id: 0, col0: '0-0', col1: '0-1', col2: '0-2', col3: '0-3', col4: '0-4' }]} - columnBuffer={1} - columnThreshold={1} + columnBufferPx={100} /> , ); @@ -743,8 +740,7 @@ describe(' - Column spanning', () => { { id: 0, col0: '0-0', col1: '0-1', col2: '0-2', col3: '0-3', col4: '0-4', col5: '0-5' }, { id: 1, col0: '1-0', col1: '1-1', col2: '1-2', col3: '1-3', col4: '1-4', col5: '1-5' }, ]} - columnBuffer={1} - columnThreshold={1} + columnBufferPx={100} /> , ); @@ -803,10 +799,8 @@ describe(' - Column spanning', () => { { id: 5, col0: '5-0', col1: '5-1', col2: '5-2', col3: '5-3', col4: '5-4', col5: '5-5' }, { id: 6, col0: '6-0', col1: '6-1', col2: '6-2', col3: '6-3', col4: '6-4', col5: '6-5' }, ]} - columnBuffer={1} - columnThreshold={1} - rowBuffer={1} - rowThreshold={1} + columnBufferPx={100} + rowBufferPx={50} rowHeight={rowHeight} /> , @@ -828,6 +822,7 @@ describe(' - Column spanning', () => { // hide first row to trigger row virtualization virtualScroller.scrollTop = rowHeight + 10; virtualScroller.dispatchEvent(new Event('scroll')); + clock.runToLast(); expect(getCell(2, 5).offsetLeft).to.equal( getCell(1, 5).offsetLeft, @@ -918,10 +913,8 @@ describe(' - Column spanning', () => { col5: '5-5', }, ]} - columnBuffer={1} - columnThreshold={1} - rowBuffer={1} - rowThreshold={1} + columnBufferPx={100} + rowBufferPx={50} rowHeight={rowHeight} /> diff --git a/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx b/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx index 3508850d91a8a..6fccae286deea 100644 --- a/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx @@ -57,7 +57,7 @@ describe(' - Keyboard', () => { columns={transformColSizes(data.columns)} initialState={{ pagination: { paginationModel: { pageSize: PAGE_SIZE } } }} pageSizeOptions={[PAGE_SIZE]} - rowBuffer={PAGE_SIZE} + rowBufferPx={PAGE_SIZE * ROW_HEIGHT} rowHeight={ROW_HEIGHT} columnHeaderHeight={HEADER_HEIGHT} hideFooter @@ -485,7 +485,7 @@ describe(' - Keyboard', () => { columns={transformColSizes(data.columns)} paginationModel={{ pageSize: PAGE_SIZE, page: 0 }} pageSizeOptions={[PAGE_SIZE]} - rowBuffer={PAGE_SIZE} + rowBufferPx={PAGE_SIZE * ROW_HEIGHT} rowHeight={ROW_HEIGHT} columnHeaderHeight={HEADER_HEIGHT} hideFooter diff --git a/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx b/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx index 52b7342ccb617..468d5709d28a4 100644 --- a/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx @@ -1202,8 +1202,6 @@ describe(' - Layout & warnings', () => { }).toErrorDev([ 'Warning: Encountered two children with the same key, `id`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.', 'Warning: Encountered two children with the same key, `id`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.', - 'Warning: Encountered two children with the same key, `id`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.', - 'Warning: Encountered two children with the same key, `id`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.', ]); }); diff --git a/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx index 12a40be44b724..3993d846fb4bd 100644 --- a/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx @@ -663,7 +663,7 @@ describe(' - Rows', () => { height={columnHeaderHeight + 20 + border * 2} // Force to only measure the first row getBioContentHeight={() => measuredRowHeight} getRowHeight={() => 'auto'} - rowBuffer={0} + rowBufferPx={0} />, ); const virtualScrollerContent = document.querySelector( @@ -693,7 +693,7 @@ describe(' - Rows', () => { getBioContentHeight={() => measuredRowHeight} getEstimatedRowHeight={() => estimatedRowHeight} getRowHeight={() => 'auto'} - rowBuffer={0} + rowBufferPx={0} />, ); const virtualScrollerContent = document.querySelector( @@ -716,7 +716,7 @@ describe(' - Rows', () => { getBioContentHeight={(row) => (row.expanded ? 200 : 100)} rows={[{ clientId: 'c1', expanded: false }]} getRowHeight={() => 'auto'} - rowBuffer={0} + rowBufferPx={0} />, ); const virtualScrollerContent = document.querySelector( @@ -742,7 +742,7 @@ describe(' - Rows', () => { 50} getRowHeight={({ id }) => (id === 'c3' ? 100 : 'auto')} - rowBuffer={0} + rowBufferPx={0} />, ); expect(getRow(0)).toHaveInlineStyle({ minHeight: 'auto' }); @@ -756,8 +756,7 @@ describe(' - Rows', () => { rows={baselineProps.rows.slice(0, 1)} getBioContentHeight={() => 100} getRowHeight={() => 'auto'} - columnBuffer={0} - columnThreshold={0} + columnBufferPx={0} width={100} />, ); @@ -771,8 +770,7 @@ describe(' - Rows', () => { 100} getRowHeight={() => 'auto'} - rowBuffer={0} - rowThreshold={0} + rowBufferPx={0} columnHeaderHeight={columnHeaderHeight} height={columnHeaderHeight + 52 + border * 2} />, @@ -807,8 +805,7 @@ describe(' - Rows', () => { getRowHeight={({ id }) => (id === 'c1' ? 'auto' : null)} density="comfortable" rows={baselineProps.rows.slice(0, 2)} - rowBuffer={0} - rowThreshold={0} + rowBufferPx={0} columnHeaderHeight={columnHeaderHeight} />, ); @@ -835,8 +832,7 @@ describe(' - Rows', () => { measuredRowHeight} getRowHeight={() => 'auto'} - rowBuffer={0} - rowThreshold={0} + rowBufferPx={0} columnHeaderHeight={columnHeaderHeight} getRowId={(row) => row.id} hideFooter={false} @@ -863,8 +859,7 @@ describe(' - Rows', () => { measuredRowHeight} getRowHeight={() => 'auto'} - rowBuffer={0} - rowThreshold={0} + rowBufferPx={0} columnHeaderHeight={columnHeaderHeight} getRowId={(row) => row.id} hideFooter={false} @@ -892,8 +887,7 @@ describe(' - Rows', () => { measuredRowHeight} getRowHeight={() => 'auto'} - rowBuffer={0} - rowThreshold={0} + rowBufferPx={0} columnHeaderHeight={columnHeaderHeight} getRowId={(row) => row.id} hideFooter={false} diff --git a/test/e2e/fixtures/DataGridPro/KeyboardNavigationFocus.tsx b/test/e2e/fixtures/DataGridPro/KeyboardNavigationFocus.tsx index fa9f918881536..57f00d3c8af01 100644 --- a/test/e2e/fixtures/DataGridPro/KeyboardNavigationFocus.tsx +++ b/test/e2e/fixtures/DataGridPro/KeyboardNavigationFocus.tsx @@ -13,7 +13,7 @@ export default function KeyboardNavigationFocus() { initial focus
- +
); From 6787e71e9686cf6826da4fc1e523ac54da7ec939 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Wed, 20 Mar 2024 08:42:42 +0100 Subject: [PATCH 18/20] [fields] Support format without separator (#12489) --- .../src/AdapterLuxon/AdapterLuxon.ts | 14 ++-- .../DateField/tests/format.DateField.test.tsx | 9 +++ .../hooks/useField/buildSectionsFromFormat.ts | 66 ++++++++++--------- 3 files changed, 54 insertions(+), 35 deletions(-) diff --git a/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts b/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts index 6dba4e0d75201..066a0ab572b6e 100644 --- a/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts +++ b/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts @@ -214,6 +214,10 @@ export class AdapterLuxon implements MuiPickersAdapter { // Extract escaped section to avoid extending them const catchEscapedSectionsRegexp = /''|'(''|[^'])+('|$)|[^']*/g; + // This RegExp tests if a string is only mad of supported tokens + const validTokens = [...Object.keys(this.formatTokenMap), 'yyyyy']; + const isWordComposedOfTokens = new RegExp(`^(${validTokens.join('|')})+$`); + // Extract words to test if they are a token or a word to escape. const catchWordsRegexp = /(?:^|[^a-z])([a-z]+)(?:[^a-z]|$)|([a-z]+)/gi; return ( @@ -225,12 +229,14 @@ export class AdapterLuxon implements MuiPickersAdapter { return token; } const expandedToken = DateTime.expandFormat(token, { locale: this.locale }); - return expandedToken.replace(catchWordsRegexp, (correspondance, g1, g2) => { + + return expandedToken.replace(catchWordsRegexp, (substring, g1, g2) => { const word = g1 || g2; // words are either in group 1 or group 2 - if (word === 'yyyyy' || formatTokenMap[word] !== undefined) { - return correspondance; + + if (isWordComposedOfTokens.test(word)) { + return substring; } - return `'${correspondance}'`; + return `'${substring}'`; }); }) .join('') diff --git a/packages/x-date-pickers/src/DateField/tests/format.DateField.test.tsx b/packages/x-date-pickers/src/DateField/tests/format.DateField.test.tsx index 51e71600acee8..f680275405ce3 100644 --- a/packages/x-date-pickers/src/DateField/tests/format.DateField.test.tsx +++ b/packages/x-date-pickers/src/DateField/tests/format.DateField.test.tsx @@ -160,6 +160,15 @@ describeAdapters(' - Format', DateField, ({ adapter, renderWithProp expectFieldPlaceholderV6(input, 'Escaped Escaped'); }); + it('should support format without separators', () => { + const v7Response = renderWithProps({ + enableAccessibleFieldDOMStructure: true, + format: `${adapter.formats.dayOfMonth}${adapter.formats.monthShort}`, + }); + + expectFieldValueV7(v7Response.getSectionsContainer(), 'DDMMMM'); + }); + it('should add spaces around `/` when `formatDensity = "spacious"`', () => { // Test with v7 input const v7Response = renderWithProps({ diff --git a/packages/x-date-pickers/src/internals/hooks/useField/buildSectionsFromFormat.ts b/packages/x-date-pickers/src/internals/hooks/useField/buildSectionsFromFormat.ts index 5e2732cb0b275..63e05d31e7765 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/buildSectionsFromFormat.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/buildSectionsFromFormat.ts @@ -202,30 +202,44 @@ const buildSections = ( const sections: FieldSection[] = []; let startSeparator: string = ''; - // This RegExp test if the beginning of a string corresponds to a supported token - const isTokenStartRegExp = new RegExp( - `^(${Object.keys(utils.formatTokenMap) - .sort((a, b) => b.length - a.length) // Sort to put longest word first - .join('|')})`, - 'g', // used to get access to lastIndex state - ); + // This RegExp tests if the beginning of a string corresponds to a supported token + const validTokens = Object.keys(utils.formatTokenMap).sort((a, b) => b.length - a.length); // Sort to put longest word first - let currentTokenValue = ''; + const regExpFirstWordInFormat = /^([a-zA-Z]+)/; + const regExpWordOnlyComposedOfTokens = new RegExp(`^(${validTokens.join('|')})*$`); + const regExpFirstTokenInWord = new RegExp(`^(${validTokens.join('|')})`); - for (let i = 0; i < expandedFormat.length; i += 1) { - const escapedPartOfCurrentChar = escapedParts.find( - (escapeIndex) => escapeIndex.start <= i && escapeIndex.end >= i, - ); + const getEscapedPartOfCurrentChar = (i: number) => + escapedParts.find((escapeIndex) => escapeIndex.start <= i && escapeIndex.end >= i); - const char = expandedFormat[i]; + let i = 0; + while (i < expandedFormat.length) { + const escapedPartOfCurrentChar = getEscapedPartOfCurrentChar(i); const isEscapedChar = escapedPartOfCurrentChar != null; - const potentialToken = `${currentTokenValue}${expandedFormat.slice(i)}`; - const regExpMatch = isTokenStartRegExp.test(potentialToken); + const firstWordInFormat = regExpFirstWordInFormat.exec(expandedFormat.slice(i))?.[1]; + + // The first word in the format is only composed of tokens. + // We extract those tokens to create a new sections. + if ( + !isEscapedChar && + firstWordInFormat != null && + regExpWordOnlyComposedOfTokens.test(firstWordInFormat) + ) { + let word = firstWordInFormat; + while (word.length > 0) { + const firstWord = regExpFirstTokenInWord.exec(word)![1]; + word = word.slice(firstWord.length); + sections.push(createSection({ ...params, now, token: firstWord, startSeparator })); + startSeparator = ''; + } + + i += firstWordInFormat.length; + } + // The remaining format does not start with a token, + // We take the first character and add it to the current section's end separator. + else { + const char = expandedFormat[i]; - if (!isEscapedChar && char.match(/([A-Za-z]+)/) && regExpMatch) { - currentTokenValue = potentialToken.slice(0, isTokenStartRegExp.lastIndex); - i += isTokenStartRegExp.lastIndex - 1; - } else { // If we are on the opening or closing character of an escaped part of the format, // Then we ignore this character. const isEscapeBoundary = @@ -233,25 +247,15 @@ const buildSections = ( escapedPartOfCurrentChar?.end === i; if (!isEscapeBoundary) { - if (currentTokenValue !== '') { - sections.push( - createSection({ ...params, now, token: currentTokenValue, startSeparator }), - ); - currentTokenValue = ''; - } - if (sections.length === 0) { startSeparator += char; } else { - startSeparator = ''; sections[sections.length - 1].endSeparator += char; } } - } - } - if (currentTokenValue !== '') { - sections.push(createSection({ ...params, now, token: currentTokenValue, startSeparator })); + i += 1; + } } if (sections.length === 0 && startSeparator.length > 0) { From 719dc04c55b7397ce6851061eba32e5ba87f4c15 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Wed, 20 Mar 2024 08:44:27 +0100 Subject: [PATCH 19/20] [fields] Allow to override the separator between the start and the end date in all range fields (#12174) Signed-off-by: Flavien DELANGLE Co-authored-by: Lukas --- .../MultiInputFieldSeparatorSlotProps.js | 2 +- .../MultiInputFieldSeparatorSlotProps.tsx | 2 +- ...tiInputFieldSeparatorSlotProps.tsx.preview | 2 +- .../custom-field/RangeFieldDateSeparator.js | 20 ++++++++++++++++ .../custom-field/RangeFieldDateSeparator.tsx | 20 ++++++++++++++++ .../RangeFieldDateSeparator.tsx.preview | 5 ++++ .../date-pickers/custom-field/custom-field.md | 8 ++++++- .../multi-input-date-range-field.json | 1 + .../multi-input-date-time-range-field.json | 1 + .../multi-input-time-range-field.json | 1 + .../single-input-date-range-field.json | 1 + .../single-input-date-time-range-field.json | 1 + .../single-input-time-range-field.json | 1 + .../multi-input-date-range-field.json | 1 + .../multi-input-date-time-range-field.json | 1 + .../multi-input-time-range-field.json | 1 + .../single-input-date-range-field.json | 1 + .../single-input-date-time-range-field.json | 1 + .../single-input-time-range-field.json | 1 + .../MultiInputDateRangeField.tsx | 23 +++++++++++-------- .../MultiInputDateTimeRangeField.tsx | 23 +++++++++++-------- .../MultiInputTimeRangeField.tsx | 23 +++++++++++-------- .../SingleInputDateRangeField.tsx | 5 ++++ .../useSingleInputDateRangeField.ts | 10 ++++++-- .../SingleInputDateTimeRangeField.tsx | 5 ++++ .../useSingleInputDateTimeRangeField.ts | 10 ++++++-- .../SingleInputTimeRangeField.tsx | 5 ++++ .../useSingleInputTimeRangeField.ts | 10 ++++++-- .../src/internals/models/dateRange.ts | 8 ++++++- .../src/internals/models/dateTimeRange.ts | 8 ++++++- .../src/internals/models/timeRange.ts | 8 ++++++- .../src/internals/utils/valueManagers.ts | 22 ++++++++++-------- .../x-date-pickers-pro/src/models/fields.ts | 15 +++++++++--- .../src/internals/utils/fields.ts | 1 + scripts/x-date-pickers-pro.exports.json | 1 + 35 files changed, 196 insertions(+), 52 deletions(-) create mode 100644 docs/data/date-pickers/custom-field/RangeFieldDateSeparator.js create mode 100644 docs/data/date-pickers/custom-field/RangeFieldDateSeparator.tsx create mode 100644 docs/data/date-pickers/custom-field/RangeFieldDateSeparator.tsx.preview diff --git a/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.js b/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.js index 37a41e39987e3..7d27a3a3220d0 100644 --- a/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.js +++ b/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.js @@ -8,7 +8,7 @@ export default function MultiInputFieldSeparatorSlotProps() { return ( - + diff --git a/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx b/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx index 37a41e39987e3..7d27a3a3220d0 100644 --- a/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx +++ b/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx @@ -8,7 +8,7 @@ export default function MultiInputFieldSeparatorSlotProps() { return ( - + diff --git a/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx.preview b/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx.preview index b912174c22804..079351c0f2759 100644 --- a/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx.preview +++ b/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx.preview @@ -1,2 +1,2 @@ - + \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.js b/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.js new file mode 100644 index 0000000000000..6c39cc8d08fcd --- /dev/null +++ b/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.js @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker'; +import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; + +export default function RangeFieldDateSeparator() { + return ( + + + + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.tsx b/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.tsx new file mode 100644 index 0000000000000..6c39cc8d08fcd --- /dev/null +++ b/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker'; +import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; + +export default function RangeFieldDateSeparator() { + return ( + + + + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.tsx.preview b/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.tsx.preview new file mode 100644 index 0000000000000..916dd54d45056 --- /dev/null +++ b/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.tsx.preview @@ -0,0 +1,5 @@ + + \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/custom-field.md b/docs/data/date-pickers/custom-field/custom-field.md index 302cde45d08c8..81438b384a3ca 100644 --- a/docs/data/date-pickers/custom-field/custom-field.md +++ b/docs/data/date-pickers/custom-field/custom-field.md @@ -18,7 +18,7 @@ You can use the `textField` slot to pass custom props to the `TextField`: {{"demo": "TextFieldSlotProps.js"}} -### Customize the separator of multi input fields [](/x/introduction/licensing/#pro-plan 'Pro plan') +### Customize the separator of multi input range fields [](/x/introduction/licensing/#pro-plan 'Pro plan') You can use the `fieldSeparator` slot to pass custom props to the `Typography` rendered between the two `TextField`: @@ -49,6 +49,12 @@ You can manually add an `endAdornment` if you want your range picker to look exa This adornment is purely decorative, the focus remains on the field when the picker is opened. ::: +### Change the separator of range fields [](/x/introduction/licensing/#pro-plan 'Pro plan') + +You can use the `dateSeparator` prop to change the separator rendered between the start and end dates: + +{{"demo": "RangeFieldDateSeparator.js"}} + ### Change the format density You can control the field format spacing using the `formatDensity` prop. diff --git a/docs/pages/x/api/date-pickers/multi-input-date-range-field.json b/docs/pages/x/api/date-pickers/multi-input-date-range-field.json index 81aa049a9cf74..6ac27db9ea703 100644 --- a/docs/pages/x/api/date-pickers/multi-input-date-range-field.json +++ b/docs/pages/x/api/date-pickers/multi-input-date-range-field.json @@ -2,6 +2,7 @@ "props": { "autoFocus": { "type": { "name": "bool" } }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, + "dateSeparator": { "type": { "name": "string" }, "default": "\"–\"" }, "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "direction": { "type": { diff --git a/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json b/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json index 7c3409b379817..82462976a3f1f 100644 --- a/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json +++ b/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json @@ -3,6 +3,7 @@ "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, "autoFocus": { "type": { "name": "bool" } }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, + "dateSeparator": { "type": { "name": "string" }, "default": "\"–\"" }, "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "direction": { "type": { diff --git a/docs/pages/x/api/date-pickers/multi-input-time-range-field.json b/docs/pages/x/api/date-pickers/multi-input-time-range-field.json index 7eaa36103979b..9119c6dcc2818 100644 --- a/docs/pages/x/api/date-pickers/multi-input-time-range-field.json +++ b/docs/pages/x/api/date-pickers/multi-input-time-range-field.json @@ -3,6 +3,7 @@ "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, "autoFocus": { "type": { "name": "bool" } }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, + "dateSeparator": { "type": { "name": "string" }, "default": "\"–\"" }, "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "direction": { "type": { diff --git a/docs/pages/x/api/date-pickers/single-input-date-range-field.json b/docs/pages/x/api/date-pickers/single-input-date-range-field.json index edcc1144f2fa5..697d60d0ef899 100644 --- a/docs/pages/x/api/date-pickers/single-input-date-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-date-range-field.json @@ -9,6 +9,7 @@ }, "default": "'primary'" }, + "dateSeparator": { "type": { "name": "string" }, "default": "\"–\"" }, "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableFuture": { "type": { "name": "bool" }, "default": "false" }, diff --git a/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json b/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json index 34b899ca07dad..3fe2a80977788 100644 --- a/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json @@ -10,6 +10,7 @@ }, "default": "'primary'" }, + "dateSeparator": { "type": { "name": "string" }, "default": "\"–\"" }, "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableFuture": { "type": { "name": "bool" }, "default": "false" }, diff --git a/docs/pages/x/api/date-pickers/single-input-time-range-field.json b/docs/pages/x/api/date-pickers/single-input-time-range-field.json index 5a450b178c85d..d04206f9390c6 100644 --- a/docs/pages/x/api/date-pickers/single-input-time-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-time-range-field.json @@ -10,6 +10,7 @@ }, "default": "'primary'" }, + "dateSeparator": { "type": { "name": "string" }, "default": "\"–\"" }, "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableFuture": { "type": { "name": "bool" }, "default": "false" }, diff --git a/docs/translations/api-docs/date-pickers/multi-input-date-range-field/multi-input-date-range-field.json b/docs/translations/api-docs/date-pickers/multi-input-date-range-field/multi-input-date-range-field.json index 3ca6292ec5f9f..3249b81c4e446 100644 --- a/docs/translations/api-docs/date-pickers/multi-input-date-range-field/multi-input-date-range-field.json +++ b/docs/translations/api-docs/date-pickers/multi-input-date-range-field/multi-input-date-range-field.json @@ -5,6 +5,7 @@ "description": "If true, the input element is focused during the first mount." }, "classes": { "description": "Override or extend the styles applied to the component." }, + "dateSeparator": { "description": "String displayed between the start and the end dates." }, "defaultValue": { "description": "The default value. Use when the component is not controlled." }, diff --git a/docs/translations/api-docs/date-pickers/multi-input-date-time-range-field/multi-input-date-time-range-field.json b/docs/translations/api-docs/date-pickers/multi-input-date-time-range-field/multi-input-date-time-range-field.json index f6be2a6546e27..5a80d81c50d94 100644 --- a/docs/translations/api-docs/date-pickers/multi-input-date-time-range-field/multi-input-date-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/multi-input-date-time-range-field/multi-input-date-time-range-field.json @@ -6,6 +6,7 @@ "description": "If true, the input element is focused during the first mount." }, "classes": { "description": "Override or extend the styles applied to the component." }, + "dateSeparator": { "description": "String displayed between the start and the end dates." }, "defaultValue": { "description": "The default value. Use when the component is not controlled." }, diff --git a/docs/translations/api-docs/date-pickers/multi-input-time-range-field/multi-input-time-range-field.json b/docs/translations/api-docs/date-pickers/multi-input-time-range-field/multi-input-time-range-field.json index 4adf72573ec25..36121c5af67de 100644 --- a/docs/translations/api-docs/date-pickers/multi-input-time-range-field/multi-input-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/multi-input-time-range-field/multi-input-time-range-field.json @@ -6,6 +6,7 @@ "description": "If true, the input element is focused during the first mount." }, "classes": { "description": "Override or extend the styles applied to the component." }, + "dateSeparator": { "description": "String displayed between the start and the end dates." }, "defaultValue": { "description": "The default value. Use when the component is not controlled." }, diff --git a/docs/translations/api-docs/date-pickers/single-input-date-range-field/single-input-date-range-field.json b/docs/translations/api-docs/date-pickers/single-input-date-range-field/single-input-date-range-field.json index 238caa628da90..4b27f2a622210 100644 --- a/docs/translations/api-docs/date-pickers/single-input-date-range-field/single-input-date-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-date-range-field/single-input-date-range-field.json @@ -10,6 +10,7 @@ "color": { "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide." }, + "dateSeparator": { "description": "String displayed between the start and the end dates." }, "defaultValue": { "description": "The default value. Use when the component is not controlled." }, diff --git a/docs/translations/api-docs/date-pickers/single-input-date-time-range-field/single-input-date-time-range-field.json b/docs/translations/api-docs/date-pickers/single-input-date-time-range-field/single-input-date-time-range-field.json index 191ca78e1814a..2fd5f39606135 100644 --- a/docs/translations/api-docs/date-pickers/single-input-date-time-range-field/single-input-date-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-date-time-range-field/single-input-date-time-range-field.json @@ -11,6 +11,7 @@ "color": { "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide." }, + "dateSeparator": { "description": "String displayed between the start and the end dates." }, "defaultValue": { "description": "The default value. Use when the component is not controlled." }, diff --git a/docs/translations/api-docs/date-pickers/single-input-time-range-field/single-input-time-range-field.json b/docs/translations/api-docs/date-pickers/single-input-time-range-field/single-input-time-range-field.json index afe1273696503..d14d95e0e73be 100644 --- a/docs/translations/api-docs/date-pickers/single-input-time-range-field/single-input-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-time-range-field/single-input-time-range-field.json @@ -11,6 +11,7 @@ "color": { "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide." }, + "dateSeparator": { "description": "String displayed between the start and the end dates." }, "defaultValue": { "description": "The default value. Use when the component is not controlled." }, diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx index e8097c7106430..1147592ae933c 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import Stack, { StackProps } from '@mui/material/Stack'; import MuiTextField from '@mui/material/TextField'; -import Typography, { TypographyProps } from '@mui/material/Typography'; +import Typography from '@mui/material/Typography'; import { styled, useThemeProps } from '@mui/material/styles'; import { useSlotProps } from '@mui/base/utils'; import { @@ -54,14 +54,11 @@ const MultiInputDateRangeFieldRoot = styled( }, )({}); -const MultiInputDateRangeFieldSeparator = styled( - (props: TypographyProps) => {props.children ?? ' – '}, - { - name: 'MuiMultiInputDateRangeField', - slot: 'Separator', - overridesResolver: (props, styles) => styles.separator, - }, -)({ +const MultiInputDateRangeFieldSeparator = styled(Typography, { + name: 'MuiMultiInputDateRangeField', + slot: 'Separator', + overridesResolver: (props, styles) => styles.separator, +})({ lineHeight: '1.4375em', // 23px }); @@ -156,6 +153,9 @@ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeFi const separatorProps = useSlotProps({ elementType: Separator, externalSlotProps: slotProps?.separator, + additionalProps: { + children: ` ${internalProps.dateSeparator ?? '–'} `, + }, ownerState, className: classes.separator, }); @@ -199,6 +199,11 @@ MultiInputDateRangeField.propTypes = { classes: PropTypes.object, className: PropTypes.string, component: PropTypes.elementType, + /** + * String displayed between the start and the end dates. + * @default "–" + */ + dateSeparator: PropTypes.string, /** * The default value. Use when the component is not controlled. */ diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx index 30283e239e2d7..2dc6505ae1657 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import Stack, { StackProps } from '@mui/material/Stack'; import MuiTextField from '@mui/material/TextField'; -import Typography, { TypographyProps } from '@mui/material/Typography'; +import Typography from '@mui/material/Typography'; import { styled, useThemeProps } from '@mui/material/styles'; import { useSlotProps } from '@mui/base/utils'; import { @@ -52,14 +52,11 @@ const MultiInputDateTimeRangeFieldRoot = styled( }, )({}); -const MultiInputDateTimeRangeFieldSeparator = styled( - (props: TypographyProps) => {props.children ?? ' – '}, - { - name: 'MuiMultiInputDateTimeRangeField', - slot: 'Separator', - overridesResolver: (props, styles) => styles.separator, - }, -)({ +const MultiInputDateTimeRangeFieldSeparator = styled(Typography, { + name: 'MuiMultiInputDateTimeRangeField', + slot: 'Separator', + overridesResolver: (props, styles) => styles.separator, +})({ lineHeight: '1.4375em', // 23px }); @@ -154,6 +151,9 @@ const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTim const separatorProps = useSlotProps({ elementType: Separator, externalSlotProps: slotProps?.separator, + additionalProps: { + children: ` ${internalProps.dateSeparator ?? '–'} `, + }, ownerState, className: classes.separator, }); @@ -202,6 +202,11 @@ MultiInputDateTimeRangeField.propTypes = { classes: PropTypes.object, className: PropTypes.string, component: PropTypes.elementType, + /** + * String displayed between the start and the end dates. + * @default "–" + */ + dateSeparator: PropTypes.string, /** * The default value. Use when the component is not controlled. */ diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx index c57fd8c6e1b0e..c86686d723c54 100644 --- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { clsx } from 'clsx'; import Stack, { StackProps } from '@mui/material/Stack'; import MuiTextField from '@mui/material/TextField'; -import Typography, { TypographyProps } from '@mui/material/Typography'; +import Typography from '@mui/material/Typography'; import { styled, useThemeProps } from '@mui/material/styles'; import { useSlotProps } from '@mui/base/utils'; import { @@ -54,14 +54,11 @@ const MultiInputTimeRangeFieldRoot = styled( }, )({}); -const MultiInputTimeRangeFieldSeparator = styled( - (props: TypographyProps) => {props.children ?? ' – '}, - { - name: 'MuiMultiInputTimeRangeField', - slot: 'Separator', - overridesResolver: (props, styles) => styles.separator, - }, -)({ +const MultiInputTimeRangeFieldSeparator = styled(Typography, { + name: 'MuiMultiInputTimeRangeField', + slot: 'Separator', + overridesResolver: (props, styles) => styles.separator, +})({ lineHeight: '1.4375em', // 23px }); @@ -157,6 +154,9 @@ const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeFi const separatorProps = useSlotProps({ elementType: Separator, externalSlotProps: slotProps?.separator, + additionalProps: { + children: ` ${internalProps.dateSeparator ?? '–'} `, + }, ownerState, className: classes.separator, }); @@ -205,6 +205,11 @@ MultiInputTimeRangeField.propTypes = { classes: PropTypes.object, className: PropTypes.string, component: PropTypes.elementType, + /** + * String displayed between the start and the end dates. + * @default "–" + */ + dateSeparator: PropTypes.string, /** * The default value. Use when the component is not controlled. */ diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx index a576e897b46e1..cd7ba4d08c318 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx @@ -105,6 +105,11 @@ SingleInputDateRangeField.propTypes = { */ color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), component: PropTypes.elementType, + /** + * String displayed between the start and the end dates. + * @default "–" + */ + dateSeparator: PropTypes.string, /** * The default value. Use when the component is not controlled. */ diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts index d328ad1d1d7f1..acd9177c5fa67 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts @@ -1,3 +1,4 @@ +import * as React from 'react'; import { useField, splitFieldInternalAndForwardedProps, @@ -5,7 +6,7 @@ import { } from '@mui/x-date-pickers/internals'; import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseSingleInputDateRangeFieldProps } from './SingleInputDateRangeField.types'; -import { rangeValueManager, rangeFieldValueManager } from '../internals/utils/valueManagers'; +import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers'; import { validateDateRange } from '../internals/utils/validation/validateDateRange'; import { RangeFieldSection, DateRange } from '../models'; @@ -27,6 +28,11 @@ export const useSingleInputDateRangeField = < keyof UseSingleInputDateRangeFieldProps >(props, 'date'); + const fieldValueManager = React.useMemo( + () => getRangeFieldValueManager({ dateSeparator: internalProps.dateSeparator }), + [internalProps.dateSeparator], + ); + return useField< DateRange, TDate, @@ -38,7 +44,7 @@ export const useSingleInputDateRangeField = < forwardedProps, internalProps, valueManager: rangeValueManager, - fieldValueManager: rangeFieldValueManager, + fieldValueManager, validator: validateDateRange, valueType: 'date', }); diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx index 86c93f642d88b..e5a9b0e36fc31 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx @@ -110,6 +110,11 @@ SingleInputDateTimeRangeField.propTypes = { */ color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), component: PropTypes.elementType, + /** + * String displayed between the start and the end dates. + * @default "–" + */ + dateSeparator: PropTypes.string, /** * The default value. Use when the component is not controlled. */ diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts index b7c796ba8abad..c27ab9b259b30 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts @@ -1,3 +1,4 @@ +import * as React from 'react'; import { useField, splitFieldInternalAndForwardedProps, @@ -5,7 +6,7 @@ import { } from '@mui/x-date-pickers/internals'; import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseSingleInputDateTimeRangeFieldProps } from './SingleInputDateTimeRangeField.types'; -import { rangeValueManager, rangeFieldValueManager } from '../internals/utils/valueManagers'; +import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers'; import { validateDateTimeRange } from '../internals/utils/validation/validateDateTimeRange'; import { RangeFieldSection, DateRange } from '../models'; @@ -30,6 +31,11 @@ export const useSingleInputDateTimeRangeField = < keyof UseSingleInputDateTimeRangeFieldProps >(props, 'date-time'); + const fieldValueManager = React.useMemo( + () => getRangeFieldValueManager({ dateSeparator: internalProps.dateSeparator }), + [internalProps.dateSeparator], + ); + return useField< DateRange, TDate, @@ -41,7 +47,7 @@ export const useSingleInputDateTimeRangeField = < forwardedProps, internalProps, valueManager: rangeValueManager, - fieldValueManager: rangeFieldValueManager, + fieldValueManager, validator: validateDateTimeRange, valueType: 'date-time', }); diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx index a9789bd0e0473..d7dc77c6c6fe0 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx @@ -110,6 +110,11 @@ SingleInputTimeRangeField.propTypes = { */ color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), component: PropTypes.elementType, + /** + * String displayed between the start and the end dates. + * @default "–" + */ + dateSeparator: PropTypes.string, /** * The default value. Use when the component is not controlled. */ diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts index 0b8da45b33146..98d9703e7eb85 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts @@ -1,3 +1,4 @@ +import * as React from 'react'; import { useField, splitFieldInternalAndForwardedProps, @@ -5,7 +6,7 @@ import { } from '@mui/x-date-pickers/internals'; import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseSingleInputTimeRangeFieldProps } from './SingleInputTimeRangeField.types'; -import { rangeValueManager, rangeFieldValueManager } from '../internals/utils/valueManagers'; +import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers'; import { validateTimeRange } from '../internals/utils/validation/validateTimeRange'; import { RangeFieldSection, DateRange } from '../models'; @@ -27,6 +28,11 @@ export const useSingleInputTimeRangeField = < keyof UseSingleInputTimeRangeFieldProps >(props, 'time'); + const fieldValueManager = React.useMemo( + () => getRangeFieldValueManager({ dateSeparator: internalProps.dateSeparator }), + [internalProps.dateSeparator], + ); + return useField< DateRange, TDate, @@ -38,7 +44,7 @@ export const useSingleInputTimeRangeField = < forwardedProps, internalProps, valueManager: rangeValueManager, - fieldValueManager: rangeFieldValueManager, + fieldValueManager, validator: validateTimeRange, valueType: 'time', }); diff --git a/packages/x-date-pickers-pro/src/internals/models/dateRange.ts b/packages/x-date-pickers-pro/src/internals/models/dateRange.ts index b9404d00d6322..941200a5e3754 100644 --- a/packages/x-date-pickers-pro/src/internals/models/dateRange.ts +++ b/packages/x-date-pickers-pro/src/internals/models/dateRange.ts @@ -4,7 +4,12 @@ import { UseFieldInternalProps, } from '@mui/x-date-pickers/internals'; import { PickerValidDate } from '@mui/x-date-pickers/models'; -import type { DateRangeValidationError, RangeFieldSection, DateRange } from '../../models'; +import { + DateRangeValidationError, + RangeFieldSection, + DateRange, + RangeFieldSeparatorProps, +} from '../../models'; /** * Props used to validate a day value in range pickers. @@ -39,5 +44,6 @@ export interface UseDateRangeFieldProps< >, 'format' >, + RangeFieldSeparatorProps, DayRangeValidationProps, BaseDateValidationProps {} diff --git a/packages/x-date-pickers-pro/src/internals/models/dateTimeRange.ts b/packages/x-date-pickers-pro/src/internals/models/dateTimeRange.ts index aeb49c239f773..b1a8bbe3fa931 100644 --- a/packages/x-date-pickers-pro/src/internals/models/dateTimeRange.ts +++ b/packages/x-date-pickers-pro/src/internals/models/dateTimeRange.ts @@ -8,7 +8,12 @@ import { } from '@mui/x-date-pickers/internals'; import { PickerValidDate } from '@mui/x-date-pickers/models'; import { DayRangeValidationProps } from './dateRange'; -import { DateTimeRangeValidationError, RangeFieldSection, DateRange } from '../../models'; +import { + DateTimeRangeValidationError, + RangeFieldSection, + DateRange, + RangeFieldSeparatorProps, +} from '../../models'; export interface UseDateTimeRangeFieldProps< TDate extends PickerValidDate, @@ -26,6 +31,7 @@ export interface UseDateTimeRangeFieldProps< >, 'format' >, + RangeFieldSeparatorProps, DayRangeValidationProps, TimeValidationProps, BaseDateValidationProps, diff --git a/packages/x-date-pickers-pro/src/internals/models/timeRange.ts b/packages/x-date-pickers-pro/src/internals/models/timeRange.ts index 09cf4f179dd5f..2ef5443f3da3b 100644 --- a/packages/x-date-pickers-pro/src/internals/models/timeRange.ts +++ b/packages/x-date-pickers-pro/src/internals/models/timeRange.ts @@ -5,7 +5,12 @@ import { UseFieldInternalProps, } from '@mui/x-date-pickers/internals'; import { PickerValidDate } from '@mui/x-date-pickers/models'; -import { TimeRangeValidationError, RangeFieldSection, DateRange } from '../../models'; +import { + TimeRangeValidationError, + RangeFieldSection, + DateRange, + RangeFieldSeparatorProps, +} from '../../models'; export interface UseTimeRangeFieldProps< TDate extends PickerValidDate, @@ -23,6 +28,7 @@ export interface UseTimeRangeFieldProps< >, 'format' >, + RangeFieldSeparatorProps, TimeValidationProps, BaseTimeValidationProps { /** diff --git a/packages/x-date-pickers-pro/src/internals/utils/valueManagers.ts b/packages/x-date-pickers-pro/src/internals/utils/valueManagers.ts index 9fe081690daf2..b3dc56a8d2ce3 100644 --- a/packages/x-date-pickers-pro/src/internals/utils/valueManagers.ts +++ b/packages/x-date-pickers-pro/src/internals/utils/valueManagers.ts @@ -74,7 +74,11 @@ export const rangeValueManager: RangePickerValueManager = { ], }; -export const rangeFieldValueManager: FieldValueManager, any, RangeFieldSection> = { +export const getRangeFieldValueManager = ({ + dateSeparator = '–', +}: { + dateSeparator: string | undefined; +}): FieldValueManager, TDate, RangeFieldSection> => ({ updateReferenceValue: (utils, value, prevReferenceValue) => { const shouldKeepStartDate = value[0] != null && utils.isValid(value[0]); const shouldKeepEndDate = value[1] != null && utils.isValid(value[1]); @@ -117,7 +121,7 @@ export const rangeFieldValueManager: FieldValueManager, any, Rang ...section, dateName: position, // TODO: Check if RTL still works - endSeparator: `${section.endSeparator} – `, + endSeparator: `${section.endSeparator} ${dateSeparator} `, }; } @@ -149,26 +153,26 @@ export const rangeFieldValueManager: FieldValueManager, any, Rang ); }, parseValueStr: (valueStr, referenceValue, parseDate) => { - // TODO: Improve because it would not work if the date format has `–` as a separator. - const [startStr, endStr] = valueStr.split('–'); + // TODO: Improve because it would not work if some section have the same separator as the dateSeparator. + const [startStr, endStr] = valueStr.split(dateSeparator); return [startStr, endStr].map((dateStr, index) => { if (dateStr == null) { return null; } - return parseDate(dateStr.trim(), referenceValue[index]); + return parseDate(dateStr.trim(), referenceValue[index]!); }) as DateRange; }, getActiveDateManager: (utils, state, activeSection) => { const index = activeSection.dateName === 'start' ? 0 : 1; - const updateDateInRange = (newDate: any, prevDateRange: DateRange) => - (index === 0 ? [newDate, prevDateRange[1]] : [prevDateRange[0], newDate]) as DateRange; + const updateDateInRange = (newDate: TDate | null, prevDateRange: DateRange) => + (index === 0 ? [newDate, prevDateRange[1]] : [prevDateRange[0], newDate]) as DateRange; return { date: state.value[index], - referenceDate: state.referenceValue[index], + referenceDate: state.referenceValue[index]!, getSections: (sections) => { const dateRangeSections = splitDateRangeSections(sections); if (index === 0) { @@ -186,4 +190,4 @@ export const rangeFieldValueManager: FieldValueManager, any, Rang }), }; }, -}; +}); diff --git a/packages/x-date-pickers-pro/src/models/fields.ts b/packages/x-date-pickers-pro/src/models/fields.ts index 8bc89688a769f..7bb292bc8e511 100644 --- a/packages/x-date-pickers-pro/src/models/fields.ts +++ b/packages/x-date-pickers-pro/src/models/fields.ts @@ -47,6 +47,14 @@ export interface MultiInputFieldRefs { unstableEndFieldRef?: React.Ref>; } +export interface RangeFieldSeparatorProps { + /** + * String displayed between the start and the end dates. + * @default "–" + */ + dateSeparator?: string; +} + /** * Props the multi input field can receive when used inside a picker. * Only contains what the MUI components are passing to the field, @@ -59,9 +67,10 @@ export interface BaseMultiInputFieldProps< TEnableAccessibleFieldDOMStructure extends boolean, TError, > extends Omit< - BaseFieldProps, - 'unstableFieldRef' - > { + BaseFieldProps, + 'unstableFieldRef' + >, + RangeFieldSeparatorProps { sx?: SxProps; unstableStartFieldRef?: React.Ref>; unstableEndFieldRef?: React.Ref>; diff --git a/packages/x-date-pickers/src/internals/utils/fields.ts b/packages/x-date-pickers/src/internals/utils/fields.ts index 1839ff03acfb8..ef5e19e58f089 100644 --- a/packages/x-date-pickers/src/internals/utils/fields.ts +++ b/packages/x-date-pickers/src/internals/utils/fields.ts @@ -21,6 +21,7 @@ const SHARED_FIELD_INTERNAL_PROP_NAMES = [ 'enableAccessibleFieldDOMStructure', 'disabled', 'readOnly', + 'dateSeparator', ] as const; export const splitFieldInternalAndForwardedProps = < diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index 2601b8337e8ed..69101c17aabd0 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -326,6 +326,7 @@ { "name": "PickerValidDate", "kind": "TypeAlias" }, { "name": "PickerValidDateLookup", "kind": "Interface" }, { "name": "RangeFieldSection", "kind": "Interface" }, + { "name": "RangeFieldSeparatorProps", "kind": "Interface" }, { "name": "RangePosition", "kind": "TypeAlias" }, { "name": "renderDateRangeViewCalendar", "kind": "Variable" }, { "name": "renderDateViewCalendar", "kind": "Variable" }, From 0b3a64d681805ce4faff4832af6205cba4927655 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 20 Mar 2024 10:42:09 +0100 Subject: [PATCH 20/20] Bump MUI Core (#12105) Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: alexandre Co-authored-by: Lukas Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> --- babel.config.js | 1 - docs/babel.config.js | 1 - docs/next.config.mjs | 14 ++++- docs/package.json | 3 +- .../x/api/data-grid/grid-actions-col-def.js | 2 +- .../data-grid/grid-aggregation-function.js | 2 +- docs/pages/x/api/data-grid/grid-api.js | 2 +- .../pages/x/api/data-grid/grid-cell-params.js | 2 +- docs/pages/x/api/data-grid/grid-col-def.js | 2 +- .../api/data-grid/grid-csv-export-options.js | 2 +- .../data-grid/grid-excel-export-options.js | 2 +- .../api/data-grid/grid-export-state-params.js | 2 +- .../pages/x/api/data-grid/grid-filter-item.js | 2 +- .../x/api/data-grid/grid-filter-model.js | 2 +- .../x/api/data-grid/grid-filter-operator.js | 2 +- .../data-grid/grid-print-export-options.js | 2 +- .../data-grid/grid-row-class-name-params.js | 2 +- docs/pages/x/api/data-grid/grid-row-params.js | 2 +- .../api/data-grid/grid-row-spacing-params.js | 2 +- .../data-grid/grid-single-select-col-def.js | 2 +- docs/pages/x/api/data-grid/index.js | 2 +- docs/pages/x/api/date-pickers/index.js | 2 +- docs/pages/x/introduction/index.js | 2 +- docs/pages/x/introduction/installation.js | 2 +- docs/pages/x/introduction/licensing.js | 2 +- docs/pages/x/introduction/roadmap.js | 2 +- docs/pages/x/introduction/support.js | 2 +- docs/pages/x/migration/migration-charts-v6.js | 2 +- .../x/migration/migration-data-grid-v4.js | 2 +- .../x/migration/migration-data-grid-v5.js | 2 +- .../x/migration/migration-data-grid-v6.js | 2 +- .../x/migration/migration-pickers-lab.js | 2 +- .../pages/x/migration/migration-pickers-v5.js | 2 +- .../pages/x/migration/migration-pickers-v6.js | 2 +- .../x/migration/migration-tree-view-lab.js | 2 +- .../x/migration/migration-tree-view-v6.js | 2 +- docs/pages/x/react-charts/areas-demo.js | 2 +- docs/pages/x/react-charts/axis.js | 2 +- docs/pages/x/react-charts/bar-demo.js | 2 +- docs/pages/x/react-charts/bars.js | 2 +- docs/pages/x/react-charts/components.js | 2 +- docs/pages/x/react-charts/composition.js | 2 +- docs/pages/x/react-charts/funnel.js | 2 +- docs/pages/x/react-charts/gantt.js | 2 +- docs/pages/x/react-charts/gauge.js | 2 +- docs/pages/x/react-charts/getting-started.js | 2 +- docs/pages/x/react-charts/heat-map.js | 2 +- docs/pages/x/react-charts/index.js | 2 +- docs/pages/x/react-charts/legend.js | 2 +- docs/pages/x/react-charts/line-demo.js | 2 +- docs/pages/x/react-charts/lines.js | 2 +- docs/pages/x/react-charts/pie-demo.js | 2 +- docs/pages/x/react-charts/pie.js | 2 +- docs/pages/x/react-charts/radar.js | 2 +- docs/pages/x/react-charts/sankey.js | 2 +- docs/pages/x/react-charts/scatter-demo.js | 2 +- docs/pages/x/react-charts/scatter.js | 2 +- docs/pages/x/react-charts/sparkline.js | 2 +- docs/pages/x/react-charts/stacking.js | 2 +- docs/pages/x/react-charts/styling.js | 2 +- docs/pages/x/react-charts/tooltip.js | 2 +- docs/pages/x/react-charts/tree-map.js | 2 +- docs/pages/x/react-data-grid/accessibility.js | 2 +- docs/pages/x/react-data-grid/aggregation.js | 2 +- docs/pages/x/react-data-grid/api-object.js | 2 +- .../pages/x/react-data-grid/cell-selection.js | 2 +- docs/pages/x/react-data-grid/clipboard.js | 2 +- .../x/react-data-grid/column-definition.js | 2 +- .../x/react-data-grid/column-dimensions.js | 2 +- docs/pages/x/react-data-grid/column-groups.js | 2 +- docs/pages/x/react-data-grid/column-header.js | 2 +- docs/pages/x/react-data-grid/column-menu.js | 2 +- .../x/react-data-grid/column-ordering.js | 2 +- .../pages/x/react-data-grid/column-pinning.js | 2 +- .../x/react-data-grid/column-spanning.js | 2 +- .../x/react-data-grid/column-visibility.js | 2 +- docs/pages/x/react-data-grid/components.js | 2 +- .../pages/x/react-data-grid/custom-columns.js | 2 +- docs/pages/x/react-data-grid/demo.js | 2 +- docs/pages/x/react-data-grid/editing.js | 2 +- docs/pages/x/react-data-grid/events.js | 2 +- .../x/react-data-grid/experiments/joy-ui.js | 2 +- docs/pages/x/react-data-grid/export.js | 2 +- docs/pages/x/react-data-grid/faq.js | 2 +- .../x/react-data-grid/filtering-recipes.js | 2 +- .../filtering/customization.js | 2 +- .../filtering/header-filters.js | 2 +- .../x/react-data-grid/filtering/index.js | 2 +- .../filtering/multi-filters.js | 2 +- .../react-data-grid/filtering/quick-filter.js | 2 +- .../react-data-grid/filtering/server-side.js | 2 +- .../x/react-data-grid/getting-started.js | 2 +- docs/pages/x/react-data-grid/index.js | 2 +- docs/pages/x/react-data-grid/layout.js | 2 +- docs/pages/x/react-data-grid/localization.js | 2 +- docs/pages/x/react-data-grid/master-detail.js | 2 +- docs/pages/x/react-data-grid/pagination.js | 2 +- docs/pages/x/react-data-grid/performance.js | 2 +- docs/pages/x/react-data-grid/pivoting.js | 2 +- .../x/react-data-grid/recipes-editing.js | 2 +- .../x/react-data-grid/recipes-row-grouping.js | 2 +- .../pages/x/react-data-grid/row-definition.js | 2 +- docs/pages/x/react-data-grid/row-grouping.js | 2 +- docs/pages/x/react-data-grid/row-height.js | 2 +- docs/pages/x/react-data-grid/row-ordering.js | 2 +- docs/pages/x/react-data-grid/row-pinning.js | 2 +- docs/pages/x/react-data-grid/row-recipes.js | 2 +- docs/pages/x/react-data-grid/row-selection.js | 2 +- docs/pages/x/react-data-grid/row-spanning.js | 2 +- docs/pages/x/react-data-grid/row-updates.js | 2 +- docs/pages/x/react-data-grid/scrolling.js | 2 +- .../server-side-data/aggregation.js | 2 +- .../react-data-grid/server-side-data/index.js | 2 +- .../server-side-data/infinite-loading.js | 2 +- .../server-side-data/lazy-loading.js | 2 +- .../server-side-data/row-grouping.js | 2 +- .../server-side-data/tree-data.js | 2 +- docs/pages/x/react-data-grid/sorting.js | 2 +- docs/pages/x/react-data-grid/state.js | 2 +- docs/pages/x/react-data-grid/style-recipes.js | 2 +- docs/pages/x/react-data-grid/style.js | 2 +- docs/pages/x/react-data-grid/tree-data.js | 2 +- .../pages/x/react-data-grid/virtualization.js | 2 +- .../x/react-date-pickers/adapters-locale.js | 2 +- .../x/react-date-pickers/base-concepts.js | 2 +- .../x/react-date-pickers/calendar-systems.js | 2 +- .../x/react-date-pickers/custom-components.js | 2 +- .../x/react-date-pickers/custom-field.js | 2 +- .../x/react-date-pickers/custom-layout.js | 2 +- .../custom-opening-button.js | 2 +- .../x/react-date-pickers/date-calendar.js | 2 +- docs/pages/x/react-date-pickers/date-field.js | 2 +- .../pages/x/react-date-pickers/date-picker.js | 2 +- .../react-date-pickers/date-range-calendar.js | 2 +- .../x/react-date-pickers/date-range-field.js | 2 +- .../x/react-date-pickers/date-range-picker.js | 2 +- .../x/react-date-pickers/date-time-field.js | 2 +- .../x/react-date-pickers/date-time-picker.js | 2 +- .../date-time-range-field.js | 2 +- .../date-time-range-picker.js | 2 +- .../x/react-date-pickers/digital-clock.js | 2 +- docs/pages/x/react-date-pickers/faq.js | 2 +- docs/pages/x/react-date-pickers/fields.js | 2 +- .../x/react-date-pickers/getting-started.js | 2 +- docs/pages/x/react-date-pickers/index.js | 2 +- docs/pages/x/react-date-pickers/lifecycle.js | 2 +- .../x/react-date-pickers/localization.js | 2 +- docs/pages/x/react-date-pickers/playground.js | 2 +- docs/pages/x/react-date-pickers/shortcuts.js | 2 +- docs/pages/x/react-date-pickers/time-clock.js | 2 +- docs/pages/x/react-date-pickers/time-field.js | 2 +- .../pages/x/react-date-pickers/time-picker.js | 2 +- .../x/react-date-pickers/time-range-field.js | 2 +- .../x/react-date-pickers/time-range-picker.js | 2 +- docs/pages/x/react-date-pickers/timezone.js | 2 +- docs/pages/x/react-date-pickers/validation.js | 2 +- .../x/react-tree-view/getting-started.js | 2 +- docs/pages/x/react-tree-view/index.js | 2 +- .../rich-tree-view/customization.js | 2 +- .../rich-tree-view/expansion.js | 2 +- .../x/react-tree-view/rich-tree-view/focus.js | 2 +- .../rich-tree-view/headless.js | 2 +- .../x/react-tree-view/rich-tree-view/items.js | 2 +- .../rich-tree-view/selection.js | 2 +- .../simple-tree-view/customization.js | 2 +- .../simple-tree-view/expansion.js | 2 +- .../react-tree-view/simple-tree-view/focus.js | 2 +- .../react-tree-view/simple-tree-view/items.js | 2 +- .../simple-tree-view/selection.js | 2 +- docs/pages/x/whats-new.js | 2 +- .../api/buildInterfacesDocumentation.ts | 2 +- docs/scripts/createXTypeScriptProjects.ts | 2 +- docs/scripts/generateProptypes.ts | 2 +- docs/scripts/reportBrokenLinks.js | 3 +- .../chartsSettings/getComponentInfo.ts | 2 +- .../pickersSettings/getComponentInfo.ts | 2 +- .../treeViewSettings/getComponentInfo.ts | 2 +- scripts/buildApiDocs/tsconfig.json | 1 - webpackBaseConfig.js | 1 - yarn.lock | 58 ++++++++++++++++--- 180 files changed, 237 insertions(+), 189 deletions(-) diff --git a/babel.config.js b/babel.config.js index 4b9c46dc91c7c..e57e327f19eea 100644 --- a/babel.config.js +++ b/babel.config.js @@ -16,7 +16,6 @@ const defaultAlias = { '@mui/x-date-pickers-pro': resolveAliasPath('./packages/x-date-pickers-pro/src'), '@mui/x-charts': resolveAliasPath('./packages/x-charts/src'), '@mui/x-tree-view': resolveAliasPath('./packages/x-tree-view/src'), - '@mui/markdown': '@mui/monorepo/packages/markdown', '@mui/material-nextjs': '@mui/monorepo/packages/mui-material-nextjs/src', '@mui-internal/api-docs-builder': resolveAliasPath( './node_modules/@mui/monorepo/packages/api-docs-builder', diff --git a/docs/babel.config.js b/docs/babel.config.js index d7a30a01f9136..4523a10447b15 100644 --- a/docs/babel.config.js +++ b/docs/babel.config.js @@ -12,7 +12,6 @@ const alias = { '@mui/x-tree-view': '../packages/x-tree-view/src', '@mui/x-license': '../packages/x-license/src', '@mui/docs': '../node_modules/@mui/monorepo/packages/mui-docs/src', - '@mui/markdown': '../node_modules/@mui/monorepo/packages/markdown', '@mui/monorepo': '../node_modules/@mui/monorepo', '@mui/material-nextjs': '../node_modules/@mui/monorepo/packages/mui-material-nextjs/src', '@mui-internal/api-docs-builder': '../node_modules/@mui/monorepo/packages/api-docs-builder', diff --git a/docs/next.config.mjs b/docs/next.config.mjs index 31b9a4a0b1027..c8e56e9d40923 100644 --- a/docs/next.config.mjs +++ b/docs/next.config.mjs @@ -8,7 +8,12 @@ import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; // @ts-expect-error This expected error should be gone once we update the monorepo import withDocsInfra from '@mui/monorepo/docs/nextConfigDocsInfra.js'; import { findPages } from './src/modules/utils/find.mjs'; -import { LANGUAGES, LANGUAGES_SSR } from './config.js'; +import { + LANGUAGES, + LANGUAGES_SSR, + LANGUAGES_IGNORE_PAGES, + LANGUAGES_IN_PROGRESS, +} from './config.js'; import constants from './constants.js'; const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url)); @@ -97,12 +102,15 @@ export default withDocsInfra({ test: /\.md$/, oneOf: [ { - resourceQuery: /@mui\/markdown/, + resourceQuery: /muiMarkdown/, use: [ options.defaultLoaders.babel, { - loader: require.resolve('@mui/monorepo/packages/markdown/loader'), + loader: require.resolve('@mui/internal-markdown/loader'), options: { + workspaceRoot, + ignoreLanguagePages: LANGUAGES_IGNORE_PAGES, + languagesInProgress: LANGUAGES_IN_PROGRESS, env: { SOURCE_CODE_REPO: options.config.env.SOURCE_CODE_REPO, LIB_VERSION: options.config.env.LIB_VERSION, diff --git a/docs/package.json b/docs/package.json index 753e6bcd105bb..3f427728648ff 100644 --- a/docs/package.json +++ b/docs/package.json @@ -27,6 +27,7 @@ "@emotion/server": "^11.11.0", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.15.14", + "@mui/internal-markdown": "^1.0.0", "@mui/joy": "^5.0.0-beta.32", "@mui/lab": "^5.0.0-alpha.169", "@mui/material": "^5.15.14", @@ -91,7 +92,7 @@ "devDependencies": { "@babel/plugin-transform-react-constant-elements": "^7.23.3", "@babel/preset-typescript": "^7.23.3", - "@mui-internal/docs-utils": "^1.0.2", + "@mui/internal-docs-utils": "^1.0.4", "@mui/internal-scripts": "^1.0.1", "@types/doctrine": "^0.0.9", "@types/stylis": "^4.2.5", diff --git a/docs/pages/x/api/data-grid/grid-actions-col-def.js b/docs/pages/x/api/data-grid/grid-actions-col-def.js index 6756e560aee69..7ca29be5152ee 100644 --- a/docs/pages/x/api/data-grid/grid-actions-col-def.js +++ b/docs/pages/x/api/data-grid/grid-actions-col-def.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-actions-col-def.md?@mui/markdown'; +import * as pageProps from './grid-actions-col-def.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-aggregation-function.js b/docs/pages/x/api/data-grid/grid-aggregation-function.js index 87645327d96fd..c2255c2117caf 100644 --- a/docs/pages/x/api/data-grid/grid-aggregation-function.js +++ b/docs/pages/x/api/data-grid/grid-aggregation-function.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-aggregation-function.md?@mui/markdown'; +import * as pageProps from './grid-aggregation-function.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-api.js b/docs/pages/x/api/data-grid/grid-api.js index 96ffa85910a76..3ec62f326b405 100644 --- a/docs/pages/x/api/data-grid/grid-api.js +++ b/docs/pages/x/api/data-grid/grid-api.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-api.md?@mui/markdown'; +import * as pageProps from './grid-api.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-cell-params.js b/docs/pages/x/api/data-grid/grid-cell-params.js index e87eb30e52422..aa00cd5368325 100644 --- a/docs/pages/x/api/data-grid/grid-cell-params.js +++ b/docs/pages/x/api/data-grid/grid-cell-params.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-cell-params.md?@mui/markdown'; +import * as pageProps from './grid-cell-params.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-col-def.js b/docs/pages/x/api/data-grid/grid-col-def.js index 7528cd203c416..01c423562290e 100644 --- a/docs/pages/x/api/data-grid/grid-col-def.js +++ b/docs/pages/x/api/data-grid/grid-col-def.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-col-def.md?@mui/markdown'; +import * as pageProps from './grid-col-def.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-csv-export-options.js b/docs/pages/x/api/data-grid/grid-csv-export-options.js index 12edbd4d9cafe..6063630516517 100644 --- a/docs/pages/x/api/data-grid/grid-csv-export-options.js +++ b/docs/pages/x/api/data-grid/grid-csv-export-options.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-csv-export-options.md?@mui/markdown'; +import * as pageProps from './grid-csv-export-options.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-excel-export-options.js b/docs/pages/x/api/data-grid/grid-excel-export-options.js index 8aa0941180c9b..8807a36df2fe3 100644 --- a/docs/pages/x/api/data-grid/grid-excel-export-options.js +++ b/docs/pages/x/api/data-grid/grid-excel-export-options.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-excel-export-options.md?@mui/markdown'; +import * as pageProps from './grid-excel-export-options.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-export-state-params.js b/docs/pages/x/api/data-grid/grid-export-state-params.js index e9bf971a63e47..e1f093bdb24ec 100644 --- a/docs/pages/x/api/data-grid/grid-export-state-params.js +++ b/docs/pages/x/api/data-grid/grid-export-state-params.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-export-state-params.md?@mui/markdown'; +import * as pageProps from './grid-export-state-params.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-filter-item.js b/docs/pages/x/api/data-grid/grid-filter-item.js index 7a5c021d7bb40..0e496ac37ad72 100644 --- a/docs/pages/x/api/data-grid/grid-filter-item.js +++ b/docs/pages/x/api/data-grid/grid-filter-item.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-filter-item.md?@mui/markdown'; +import * as pageProps from './grid-filter-item.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-filter-model.js b/docs/pages/x/api/data-grid/grid-filter-model.js index 101f8899005cb..4e4fb6f1cfe42 100644 --- a/docs/pages/x/api/data-grid/grid-filter-model.js +++ b/docs/pages/x/api/data-grid/grid-filter-model.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-filter-model.md?@mui/markdown'; +import * as pageProps from './grid-filter-model.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-filter-operator.js b/docs/pages/x/api/data-grid/grid-filter-operator.js index 777de2ebb0102..6f8a943208801 100644 --- a/docs/pages/x/api/data-grid/grid-filter-operator.js +++ b/docs/pages/x/api/data-grid/grid-filter-operator.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-filter-operator.md?@mui/markdown'; +import * as pageProps from './grid-filter-operator.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-print-export-options.js b/docs/pages/x/api/data-grid/grid-print-export-options.js index 96b09b359c77c..bf0ba5f8800d0 100644 --- a/docs/pages/x/api/data-grid/grid-print-export-options.js +++ b/docs/pages/x/api/data-grid/grid-print-export-options.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-print-export-options.md?@mui/markdown'; +import * as pageProps from './grid-print-export-options.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-row-class-name-params.js b/docs/pages/x/api/data-grid/grid-row-class-name-params.js index aedfbd3ad613b..02f1a861f343f 100644 --- a/docs/pages/x/api/data-grid/grid-row-class-name-params.js +++ b/docs/pages/x/api/data-grid/grid-row-class-name-params.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-row-class-name-params.md?@mui/markdown'; +import * as pageProps from './grid-row-class-name-params.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-row-params.js b/docs/pages/x/api/data-grid/grid-row-params.js index 7a145e372f375..e963d9494bf6f 100644 --- a/docs/pages/x/api/data-grid/grid-row-params.js +++ b/docs/pages/x/api/data-grid/grid-row-params.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-row-params.md?@mui/markdown'; +import * as pageProps from './grid-row-params.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-row-spacing-params.js b/docs/pages/x/api/data-grid/grid-row-spacing-params.js index bad1db240627c..4e3be6c537597 100644 --- a/docs/pages/x/api/data-grid/grid-row-spacing-params.js +++ b/docs/pages/x/api/data-grid/grid-row-spacing-params.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-row-spacing-params.md?@mui/markdown'; +import * as pageProps from './grid-row-spacing-params.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-single-select-col-def.js b/docs/pages/x/api/data-grid/grid-single-select-col-def.js index 30a321aa92942..bb9fedb9b8798 100644 --- a/docs/pages/x/api/data-grid/grid-single-select-col-def.js +++ b/docs/pages/x/api/data-grid/grid-single-select-col-def.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-single-select-col-def.md?@mui/markdown'; +import * as pageProps from './grid-single-select-col-def.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/index.js b/docs/pages/x/api/data-grid/index.js index d9d08f84a8875..217644aebd179 100644 --- a/docs/pages/x/api/data-grid/index.js +++ b/docs/pages/x/api/data-grid/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './index.md?@mui/markdown'; +import * as pageProps from './index.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/date-pickers/index.js b/docs/pages/x/api/date-pickers/index.js index d9d08f84a8875..217644aebd179 100644 --- a/docs/pages/x/api/date-pickers/index.js +++ b/docs/pages/x/api/date-pickers/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './index.md?@mui/markdown'; +import * as pageProps from './index.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/introduction/index.js b/docs/pages/x/introduction/index.js index eddce3552992e..00ae99afc960c 100644 --- a/docs/pages/x/introduction/index.js +++ b/docs/pages/x/introduction/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/introduction/overview/overview.md?@mui/markdown'; +import * as pageProps from 'docsx/data/introduction/overview/overview.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/introduction/installation.js b/docs/pages/x/introduction/installation.js index 6076987bb7549..29debac122aa1 100644 --- a/docs/pages/x/introduction/installation.js +++ b/docs/pages/x/introduction/installation.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/introduction/installation/installation.md?@mui/markdown'; +import * as pageProps from 'docsx/data/introduction/installation/installation.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/introduction/licensing.js b/docs/pages/x/introduction/licensing.js index 2376c5ace5c2d..a6b125f3cb0f2 100644 --- a/docs/pages/x/introduction/licensing.js +++ b/docs/pages/x/introduction/licensing.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/introduction/licensing/licensing.md?@mui/markdown'; +import * as pageProps from 'docsx/data/introduction/licensing/licensing.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/introduction/roadmap.js b/docs/pages/x/introduction/roadmap.js index 6df07e53a3ff6..6f3de3b61effa 100644 --- a/docs/pages/x/introduction/roadmap.js +++ b/docs/pages/x/introduction/roadmap.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/introduction/roadmap/roadmap.md?@mui/markdown'; +import * as pageProps from 'docsx/data/introduction/roadmap/roadmap.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/introduction/support.js b/docs/pages/x/introduction/support.js index 46890f3c485c0..15552e02d41c8 100644 --- a/docs/pages/x/introduction/support.js +++ b/docs/pages/x/introduction/support.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/introduction/support/support.md?@mui/markdown'; +import * as pageProps from 'docsx/data/introduction/support/support.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/migration/migration-charts-v6.js b/docs/pages/x/migration/migration-charts-v6.js index 4ba678d249864..721617a21c2f9 100644 --- a/docs/pages/x/migration/migration-charts-v6.js +++ b/docs/pages/x/migration/migration-charts-v6.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/migration/migration-charts-v6/migration-charts-v6.md?@mui/markdown'; +import * as pageProps from 'docsx/data/migration/migration-charts-v6/migration-charts-v6.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/migration/migration-data-grid-v4.js b/docs/pages/x/migration/migration-data-grid-v4.js index b296ea65c67d9..f3779384ae66e 100644 --- a/docs/pages/x/migration/migration-data-grid-v4.js +++ b/docs/pages/x/migration/migration-data-grid-v4.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/migration/migration-data-grid-v4/migration-data-grid-v4.md?@mui/markdown'; +import * as pageProps from 'docsx/data/migration/migration-data-grid-v4/migration-data-grid-v4.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/migration/migration-data-grid-v5.js b/docs/pages/x/migration/migration-data-grid-v5.js index b8115f0748313..e85af9f8f9888 100644 --- a/docs/pages/x/migration/migration-data-grid-v5.js +++ b/docs/pages/x/migration/migration-data-grid-v5.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/migration/migration-data-grid-v5/migration-data-grid-v5.md?@mui/markdown'; +import * as pageProps from 'docsx/data/migration/migration-data-grid-v5/migration-data-grid-v5.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/migration/migration-data-grid-v6.js b/docs/pages/x/migration/migration-data-grid-v6.js index 8ce5141b987e5..fa75c908bfc08 100644 --- a/docs/pages/x/migration/migration-data-grid-v6.js +++ b/docs/pages/x/migration/migration-data-grid-v6.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/migration/migration-data-grid-v6/migration-data-grid-v6.md?@mui/markdown'; +import * as pageProps from 'docsx/data/migration/migration-data-grid-v6/migration-data-grid-v6.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/migration/migration-pickers-lab.js b/docs/pages/x/migration/migration-pickers-lab.js index a210d290ec13a..fe467cd460239 100644 --- a/docs/pages/x/migration/migration-pickers-lab.js +++ b/docs/pages/x/migration/migration-pickers-lab.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/migration/migration-pickers-lab/migration-pickers-lab.md?@mui/markdown'; +import * as pageProps from 'docsx/data/migration/migration-pickers-lab/migration-pickers-lab.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/migration/migration-pickers-v5.js b/docs/pages/x/migration/migration-pickers-v5.js index 4ca852bcef695..033ea7936e04a 100644 --- a/docs/pages/x/migration/migration-pickers-v5.js +++ b/docs/pages/x/migration/migration-pickers-v5.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/migration/migration-pickers-v5/migration-pickers-v5.md?@mui/markdown'; +import * as pageProps from 'docsx/data/migration/migration-pickers-v5/migration-pickers-v5.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/migration/migration-pickers-v6.js b/docs/pages/x/migration/migration-pickers-v6.js index 8f64f9f109e48..1352c597f95e8 100644 --- a/docs/pages/x/migration/migration-pickers-v6.js +++ b/docs/pages/x/migration/migration-pickers-v6.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/migration/migration-pickers-v6/migration-pickers-v6.md?@mui/markdown'; +import * as pageProps from 'docsx/data/migration/migration-pickers-v6/migration-pickers-v6.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/migration/migration-tree-view-lab.js b/docs/pages/x/migration/migration-tree-view-lab.js index c9eae940b4563..859d1273373ef 100644 --- a/docs/pages/x/migration/migration-tree-view-lab.js +++ b/docs/pages/x/migration/migration-tree-view-lab.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/migration/migration-tree-view-lab/migration-tree-view-lab.md?@mui/markdown'; +import * as pageProps from 'docsx/data/migration/migration-tree-view-lab/migration-tree-view-lab.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/migration/migration-tree-view-v6.js b/docs/pages/x/migration/migration-tree-view-v6.js index 1ebe531b3f6b2..4ff608066da94 100644 --- a/docs/pages/x/migration/migration-tree-view-v6.js +++ b/docs/pages/x/migration/migration-tree-view-v6.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/migration/migration-tree-view-v6/migration-tree-view-v6.md?@mui/markdown'; +import * as pageProps from 'docsx/data/migration/migration-tree-view-v6/migration-tree-view-v6.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/areas-demo.js b/docs/pages/x/react-charts/areas-demo.js index 7c4e36ca78e5f..659ea0a6f3cc6 100644 --- a/docs/pages/x/react-charts/areas-demo.js +++ b/docs/pages/x/react-charts/areas-demo.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/areas-demo/areas-demo.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/areas-demo/areas-demo.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/axis.js b/docs/pages/x/react-charts/axis.js index bb865f7f75da8..b2ba2e0834265 100644 --- a/docs/pages/x/react-charts/axis.js +++ b/docs/pages/x/react-charts/axis.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/axis/axis.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/axis/axis.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/bar-demo.js b/docs/pages/x/react-charts/bar-demo.js index 1669aefdb6e99..edfb5ab19d6be 100644 --- a/docs/pages/x/react-charts/bar-demo.js +++ b/docs/pages/x/react-charts/bar-demo.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/bar-demo/bar-demo.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/bar-demo/bar-demo.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/bars.js b/docs/pages/x/react-charts/bars.js index 8f575b3d98190..51f9ab3d034b1 100644 --- a/docs/pages/x/react-charts/bars.js +++ b/docs/pages/x/react-charts/bars.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/bars/bars.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/bars/bars.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/components.js b/docs/pages/x/react-charts/components.js index 7f74333487c2b..e061d37ded7de 100644 --- a/docs/pages/x/react-charts/components.js +++ b/docs/pages/x/react-charts/components.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/components/components.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/components/components.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/composition.js b/docs/pages/x/react-charts/composition.js index a49089a512652..20aa86d6acf92 100644 --- a/docs/pages/x/react-charts/composition.js +++ b/docs/pages/x/react-charts/composition.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/composition/composition.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/composition/composition.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/funnel.js b/docs/pages/x/react-charts/funnel.js index 3500b4c849ac0..7b0beb682f04a 100644 --- a/docs/pages/x/react-charts/funnel.js +++ b/docs/pages/x/react-charts/funnel.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/funnel/funnel.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/funnel/funnel.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/gantt.js b/docs/pages/x/react-charts/gantt.js index e897b8385bb32..083cea9284bbe 100644 --- a/docs/pages/x/react-charts/gantt.js +++ b/docs/pages/x/react-charts/gantt.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/gantt/gantt.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/gantt/gantt.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/gauge.js b/docs/pages/x/react-charts/gauge.js index 7234d0343dcc3..fad6260b737ee 100644 --- a/docs/pages/x/react-charts/gauge.js +++ b/docs/pages/x/react-charts/gauge.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/gauge/gauge.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/gauge/gauge.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/getting-started.js b/docs/pages/x/react-charts/getting-started.js index 951ac46c0aba6..fcb53b26968b1 100644 --- a/docs/pages/x/react-charts/getting-started.js +++ b/docs/pages/x/react-charts/getting-started.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/getting-started/getting-started.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/getting-started/getting-started.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/heat-map.js b/docs/pages/x/react-charts/heat-map.js index efbb52253ce27..1ca391b5fe221 100644 --- a/docs/pages/x/react-charts/heat-map.js +++ b/docs/pages/x/react-charts/heat-map.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/heat-map/heat-map.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/heat-map/heat-map.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/index.js b/docs/pages/x/react-charts/index.js index 5dc7a6db300f1..530e78d58513b 100644 --- a/docs/pages/x/react-charts/index.js +++ b/docs/pages/x/react-charts/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/overview/overview.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/overview/overview.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/legend.js b/docs/pages/x/react-charts/legend.js index 63bca9fec7d7a..ea99c2b6a8cfd 100644 --- a/docs/pages/x/react-charts/legend.js +++ b/docs/pages/x/react-charts/legend.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/legend/legend.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/legend/legend.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/line-demo.js b/docs/pages/x/react-charts/line-demo.js index 3da1723075987..b3d76d1388f90 100644 --- a/docs/pages/x/react-charts/line-demo.js +++ b/docs/pages/x/react-charts/line-demo.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/line-demo/line-demo.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/line-demo/line-demo.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/lines.js b/docs/pages/x/react-charts/lines.js index f06aa85b1d77a..9d3dc690e4d6b 100644 --- a/docs/pages/x/react-charts/lines.js +++ b/docs/pages/x/react-charts/lines.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/lines/lines.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/lines/lines.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/pie-demo.js b/docs/pages/x/react-charts/pie-demo.js index 62fd7d85b9549..31982a1525f99 100644 --- a/docs/pages/x/react-charts/pie-demo.js +++ b/docs/pages/x/react-charts/pie-demo.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/pie-demo/pie-demo.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/pie-demo/pie-demo.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/pie.js b/docs/pages/x/react-charts/pie.js index 930ebb85a5113..870382b38abf6 100644 --- a/docs/pages/x/react-charts/pie.js +++ b/docs/pages/x/react-charts/pie.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/pie/pie.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/pie/pie.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/radar.js b/docs/pages/x/react-charts/radar.js index 105a5975a8dfb..d0cb579975f1f 100644 --- a/docs/pages/x/react-charts/radar.js +++ b/docs/pages/x/react-charts/radar.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/radar/radar.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/radar/radar.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/sankey.js b/docs/pages/x/react-charts/sankey.js index 98525d5604850..ef2676c2873e5 100644 --- a/docs/pages/x/react-charts/sankey.js +++ b/docs/pages/x/react-charts/sankey.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/sankey/sankey.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/sankey/sankey.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/scatter-demo.js b/docs/pages/x/react-charts/scatter-demo.js index f06d196243c32..e74172dbb64e2 100644 --- a/docs/pages/x/react-charts/scatter-demo.js +++ b/docs/pages/x/react-charts/scatter-demo.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/scatter-demo/scatter-demo.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/scatter-demo/scatter-demo.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/scatter.js b/docs/pages/x/react-charts/scatter.js index d15c0a858219a..4e0675e0c588c 100644 --- a/docs/pages/x/react-charts/scatter.js +++ b/docs/pages/x/react-charts/scatter.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/scatter/scatter.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/scatter/scatter.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/sparkline.js b/docs/pages/x/react-charts/sparkline.js index 88b682afd3b66..9b4ed941558c6 100644 --- a/docs/pages/x/react-charts/sparkline.js +++ b/docs/pages/x/react-charts/sparkline.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/sparkline/sparkline.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/sparkline/sparkline.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/stacking.js b/docs/pages/x/react-charts/stacking.js index 85d2559b2e8d0..0e39babc4c72d 100644 --- a/docs/pages/x/react-charts/stacking.js +++ b/docs/pages/x/react-charts/stacking.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/stacking/stacking.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/stacking/stacking.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/styling.js b/docs/pages/x/react-charts/styling.js index 2f47cd803d90d..5dcd6bbafcdcf 100644 --- a/docs/pages/x/react-charts/styling.js +++ b/docs/pages/x/react-charts/styling.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/styling/styling.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/styling/styling.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/tooltip.js b/docs/pages/x/react-charts/tooltip.js index 5d8df6cec858a..e096fbfc88954 100644 --- a/docs/pages/x/react-charts/tooltip.js +++ b/docs/pages/x/react-charts/tooltip.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/tooltip/tooltip.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/tooltip/tooltip.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/tree-map.js b/docs/pages/x/react-charts/tree-map.js index db641a96691f1..227f21269d4ae 100644 --- a/docs/pages/x/react-charts/tree-map.js +++ b/docs/pages/x/react-charts/tree-map.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/tree-map/tree-map.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/tree-map/tree-map.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/accessibility.js b/docs/pages/x/react-data-grid/accessibility.js index cbe154fea4056..072cc45486df6 100644 --- a/docs/pages/x/react-data-grid/accessibility.js +++ b/docs/pages/x/react-data-grid/accessibility.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/accessibility/accessibility.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/accessibility/accessibility.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/aggregation.js b/docs/pages/x/react-data-grid/aggregation.js index 6df4a3bd42e72..b387d85cf7b9c 100644 --- a/docs/pages/x/react-data-grid/aggregation.js +++ b/docs/pages/x/react-data-grid/aggregation.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/aggregation/aggregation.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/aggregation/aggregation.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/api-object.js b/docs/pages/x/react-data-grid/api-object.js index 51169592bc0e2..0c0f259b50668 100644 --- a/docs/pages/x/react-data-grid/api-object.js +++ b/docs/pages/x/react-data-grid/api-object.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/api-object/api-object.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/api-object/api-object.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/cell-selection.js b/docs/pages/x/react-data-grid/cell-selection.js index 85b2ff2d74968..4e2b8afd74b06 100644 --- a/docs/pages/x/react-data-grid/cell-selection.js +++ b/docs/pages/x/react-data-grid/cell-selection.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/cell-selection/cell-selection.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/cell-selection/cell-selection.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/clipboard.js b/docs/pages/x/react-data-grid/clipboard.js index 700cc6ab1d4b9..b2247312c476c 100644 --- a/docs/pages/x/react-data-grid/clipboard.js +++ b/docs/pages/x/react-data-grid/clipboard.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/clipboard/clipboard.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/clipboard/clipboard.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/column-definition.js b/docs/pages/x/react-data-grid/column-definition.js index e1bcbdef4e737..b2eb691fa880a 100644 --- a/docs/pages/x/react-data-grid/column-definition.js +++ b/docs/pages/x/react-data-grid/column-definition.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/column-definition/column-definition.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/column-definition/column-definition.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/column-dimensions.js b/docs/pages/x/react-data-grid/column-dimensions.js index 2288bfcc59e53..d9def3d2ba987 100644 --- a/docs/pages/x/react-data-grid/column-dimensions.js +++ b/docs/pages/x/react-data-grid/column-dimensions.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/column-dimensions/column-dimensions.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/column-dimensions/column-dimensions.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/column-groups.js b/docs/pages/x/react-data-grid/column-groups.js index 0686da7f2b021..1e823ed671281 100644 --- a/docs/pages/x/react-data-grid/column-groups.js +++ b/docs/pages/x/react-data-grid/column-groups.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/column-groups/column-groups.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/column-groups/column-groups.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/column-header.js b/docs/pages/x/react-data-grid/column-header.js index 4b421607a4888..de8381a6b09f5 100644 --- a/docs/pages/x/react-data-grid/column-header.js +++ b/docs/pages/x/react-data-grid/column-header.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/column-header/column-header.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/column-header/column-header.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/column-menu.js b/docs/pages/x/react-data-grid/column-menu.js index 293f6c798acaf..fb52f314069b7 100644 --- a/docs/pages/x/react-data-grid/column-menu.js +++ b/docs/pages/x/react-data-grid/column-menu.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/column-menu/column-menu.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/column-menu/column-menu.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/column-ordering.js b/docs/pages/x/react-data-grid/column-ordering.js index ac9644e04c8df..d63fc7161bbc9 100644 --- a/docs/pages/x/react-data-grid/column-ordering.js +++ b/docs/pages/x/react-data-grid/column-ordering.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/column-ordering/column-ordering.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/column-ordering/column-ordering.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/column-pinning.js b/docs/pages/x/react-data-grid/column-pinning.js index 77dd14759a635..07939fdd86a97 100644 --- a/docs/pages/x/react-data-grid/column-pinning.js +++ b/docs/pages/x/react-data-grid/column-pinning.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/column-pinning/column-pinning.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/column-pinning/column-pinning.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/column-spanning.js b/docs/pages/x/react-data-grid/column-spanning.js index 0a847589b2c11..7817df7d46a67 100644 --- a/docs/pages/x/react-data-grid/column-spanning.js +++ b/docs/pages/x/react-data-grid/column-spanning.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/column-spanning/column-spanning.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/column-spanning/column-spanning.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/column-visibility.js b/docs/pages/x/react-data-grid/column-visibility.js index 3403e8b85f4a9..6daeb967ba1fe 100644 --- a/docs/pages/x/react-data-grid/column-visibility.js +++ b/docs/pages/x/react-data-grid/column-visibility.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/column-visibility/column-visibility.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/column-visibility/column-visibility.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/components.js b/docs/pages/x/react-data-grid/components.js index 3da2cd6918680..adbe72c8412ed 100644 --- a/docs/pages/x/react-data-grid/components.js +++ b/docs/pages/x/react-data-grid/components.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/components/components.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/components/components.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/custom-columns.js b/docs/pages/x/react-data-grid/custom-columns.js index 4af41a45ef3d2..7276dfed70754 100644 --- a/docs/pages/x/react-data-grid/custom-columns.js +++ b/docs/pages/x/react-data-grid/custom-columns.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/custom-columns/custom-columns.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/custom-columns/custom-columns.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/demo.js b/docs/pages/x/react-data-grid/demo.js index 303d86f6b9c35..0e8f0e21416c6 100644 --- a/docs/pages/x/react-data-grid/demo.js +++ b/docs/pages/x/react-data-grid/demo.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/demo/demo.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/demo/demo.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/editing.js b/docs/pages/x/react-data-grid/editing.js index 65ecc60a6e24c..96374f70fda14 100644 --- a/docs/pages/x/react-data-grid/editing.js +++ b/docs/pages/x/react-data-grid/editing.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/editing/editing.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/editing/editing.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/events.js b/docs/pages/x/react-data-grid/events.js index 370407e4860a7..fdbea37bedfaa 100644 --- a/docs/pages/x/react-data-grid/events.js +++ b/docs/pages/x/react-data-grid/events.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/events/events.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/events/events.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/experiments/joy-ui.js b/docs/pages/x/react-data-grid/experiments/joy-ui.js index 545055476bf95..49f733491cb3d 100644 --- a/docs/pages/x/react-data-grid/experiments/joy-ui.js +++ b/docs/pages/x/react-data-grid/experiments/joy-ui.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/joy-ui/joy-ui.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/joy-ui/joy-ui.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/export.js b/docs/pages/x/react-data-grid/export.js index 347bd1887005b..f39c99f13a49d 100644 --- a/docs/pages/x/react-data-grid/export.js +++ b/docs/pages/x/react-data-grid/export.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/export/export.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/export/export.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/faq.js b/docs/pages/x/react-data-grid/faq.js index 294944846af0a..0cd81c85f54b1 100644 --- a/docs/pages/x/react-data-grid/faq.js +++ b/docs/pages/x/react-data-grid/faq.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/faq/faq.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/faq/faq.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/filtering-recipes.js b/docs/pages/x/react-data-grid/filtering-recipes.js index 61d91d4c1aab9..453a2ce2d6b77 100644 --- a/docs/pages/x/react-data-grid/filtering-recipes.js +++ b/docs/pages/x/react-data-grid/filtering-recipes.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/filtering-recipes/filtering-recipes.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/filtering-recipes/filtering-recipes.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/filtering/customization.js b/docs/pages/x/react-data-grid/filtering/customization.js index 2feac758bf6a8..a4687a8700b79 100644 --- a/docs/pages/x/react-data-grid/filtering/customization.js +++ b/docs/pages/x/react-data-grid/filtering/customization.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/filtering/customization.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/filtering/customization.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/filtering/header-filters.js b/docs/pages/x/react-data-grid/filtering/header-filters.js index df8157252ed81..5496581ce55e3 100644 --- a/docs/pages/x/react-data-grid/filtering/header-filters.js +++ b/docs/pages/x/react-data-grid/filtering/header-filters.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/filtering/header-filters.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/filtering/header-filters.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/filtering/index.js b/docs/pages/x/react-data-grid/filtering/index.js index 49113326bfbf5..805884707370b 100644 --- a/docs/pages/x/react-data-grid/filtering/index.js +++ b/docs/pages/x/react-data-grid/filtering/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/filtering/index.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/filtering/index.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/filtering/multi-filters.js b/docs/pages/x/react-data-grid/filtering/multi-filters.js index cf66367f21636..067655490f343 100644 --- a/docs/pages/x/react-data-grid/filtering/multi-filters.js +++ b/docs/pages/x/react-data-grid/filtering/multi-filters.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/filtering/multi-filters.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/filtering/multi-filters.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/filtering/quick-filter.js b/docs/pages/x/react-data-grid/filtering/quick-filter.js index aab4f12ea6407..3168c70e4aab7 100644 --- a/docs/pages/x/react-data-grid/filtering/quick-filter.js +++ b/docs/pages/x/react-data-grid/filtering/quick-filter.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/filtering/quick-filter.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/filtering/quick-filter.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/filtering/server-side.js b/docs/pages/x/react-data-grid/filtering/server-side.js index b7f55f31f6706..493b8a073b332 100644 --- a/docs/pages/x/react-data-grid/filtering/server-side.js +++ b/docs/pages/x/react-data-grid/filtering/server-side.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/filtering/server-side.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/filtering/server-side.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/getting-started.js b/docs/pages/x/react-data-grid/getting-started.js index 81ad516c5a7f2..005cd237802b2 100644 --- a/docs/pages/x/react-data-grid/getting-started.js +++ b/docs/pages/x/react-data-grid/getting-started.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/getting-started/getting-started.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/getting-started/getting-started.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/index.js b/docs/pages/x/react-data-grid/index.js index d41dc4a3d05c7..b83bd081ef57a 100644 --- a/docs/pages/x/react-data-grid/index.js +++ b/docs/pages/x/react-data-grid/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/overview/overview.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/overview/overview.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/layout.js b/docs/pages/x/react-data-grid/layout.js index 67f99c5fd9b23..d291f25763cfc 100644 --- a/docs/pages/x/react-data-grid/layout.js +++ b/docs/pages/x/react-data-grid/layout.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/layout/layout.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/layout/layout.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/localization.js b/docs/pages/x/react-data-grid/localization.js index 9101ce8d8bdd6..64ea4b6d054f6 100644 --- a/docs/pages/x/react-data-grid/localization.js +++ b/docs/pages/x/react-data-grid/localization.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/localization/localization.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/localization/localization.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/master-detail.js b/docs/pages/x/react-data-grid/master-detail.js index 42c48741b1fb7..f0d3bd62121c1 100644 --- a/docs/pages/x/react-data-grid/master-detail.js +++ b/docs/pages/x/react-data-grid/master-detail.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/master-detail/master-detail.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/master-detail/master-detail.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/pagination.js b/docs/pages/x/react-data-grid/pagination.js index 644c44f6b74ce..43109087c047b 100644 --- a/docs/pages/x/react-data-grid/pagination.js +++ b/docs/pages/x/react-data-grid/pagination.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/pagination/pagination.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/pagination/pagination.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/performance.js b/docs/pages/x/react-data-grid/performance.js index c3600d16c9d56..692a6f658064c 100644 --- a/docs/pages/x/react-data-grid/performance.js +++ b/docs/pages/x/react-data-grid/performance.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/performance/performance.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/performance/performance.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/pivoting.js b/docs/pages/x/react-data-grid/pivoting.js index 274f9790e35c2..30ebec8549008 100644 --- a/docs/pages/x/react-data-grid/pivoting.js +++ b/docs/pages/x/react-data-grid/pivoting.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/pivoting/pivoting.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/pivoting/pivoting.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/recipes-editing.js b/docs/pages/x/react-data-grid/recipes-editing.js index 52341237e7deb..9353af94f3d7f 100644 --- a/docs/pages/x/react-data-grid/recipes-editing.js +++ b/docs/pages/x/react-data-grid/recipes-editing.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/recipes-editing/recipes-editing.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/recipes-editing/recipes-editing.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/recipes-row-grouping.js b/docs/pages/x/react-data-grid/recipes-row-grouping.js index 60cbfc6c999fa..d9057913ef70d 100644 --- a/docs/pages/x/react-data-grid/recipes-row-grouping.js +++ b/docs/pages/x/react-data-grid/recipes-row-grouping.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/recipes-row-grouping/recipes-row-grouping.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/recipes-row-grouping/recipes-row-grouping.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/row-definition.js b/docs/pages/x/react-data-grid/row-definition.js index a0200f6664197..3815759335e50 100644 --- a/docs/pages/x/react-data-grid/row-definition.js +++ b/docs/pages/x/react-data-grid/row-definition.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/row-definition/row-definition.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/row-definition/row-definition.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/row-grouping.js b/docs/pages/x/react-data-grid/row-grouping.js index d3b1bb3ed2282..5f59bb46ca736 100644 --- a/docs/pages/x/react-data-grid/row-grouping.js +++ b/docs/pages/x/react-data-grid/row-grouping.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/row-grouping/row-grouping.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/row-grouping/row-grouping.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/row-height.js b/docs/pages/x/react-data-grid/row-height.js index cc84668d40ea5..54c43a8dcba01 100644 --- a/docs/pages/x/react-data-grid/row-height.js +++ b/docs/pages/x/react-data-grid/row-height.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/row-height/row-height.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/row-height/row-height.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/row-ordering.js b/docs/pages/x/react-data-grid/row-ordering.js index 3fd9eadd08d5f..08cc8d0c4c38d 100644 --- a/docs/pages/x/react-data-grid/row-ordering.js +++ b/docs/pages/x/react-data-grid/row-ordering.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/row-ordering/row-ordering.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/row-ordering/row-ordering.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/row-pinning.js b/docs/pages/x/react-data-grid/row-pinning.js index 296e34cb63274..9d3cb5cc87da0 100644 --- a/docs/pages/x/react-data-grid/row-pinning.js +++ b/docs/pages/x/react-data-grid/row-pinning.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/row-pinning/row-pinning.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/row-pinning/row-pinning.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/row-recipes.js b/docs/pages/x/react-data-grid/row-recipes.js index 8402f18c13151..1e83ecfbc4743 100644 --- a/docs/pages/x/react-data-grid/row-recipes.js +++ b/docs/pages/x/react-data-grid/row-recipes.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/row-recipes/row-recipes.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/row-recipes/row-recipes.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/row-selection.js b/docs/pages/x/react-data-grid/row-selection.js index 5559aa8aa8394..981927779de52 100644 --- a/docs/pages/x/react-data-grid/row-selection.js +++ b/docs/pages/x/react-data-grid/row-selection.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/row-selection/row-selection.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/row-selection/row-selection.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/row-spanning.js b/docs/pages/x/react-data-grid/row-spanning.js index f6d7073bd13a5..f414586573626 100644 --- a/docs/pages/x/react-data-grid/row-spanning.js +++ b/docs/pages/x/react-data-grid/row-spanning.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/row-spanning/row-spanning.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/row-spanning/row-spanning.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/row-updates.js b/docs/pages/x/react-data-grid/row-updates.js index bc2c0642c532c..b1208c38e8be9 100644 --- a/docs/pages/x/react-data-grid/row-updates.js +++ b/docs/pages/x/react-data-grid/row-updates.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/row-updates/row-updates.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/row-updates/row-updates.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/scrolling.js b/docs/pages/x/react-data-grid/scrolling.js index fe59ae7b233ff..82c1c76c9915a 100644 --- a/docs/pages/x/react-data-grid/scrolling.js +++ b/docs/pages/x/react-data-grid/scrolling.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/scrolling/scrolling.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/scrolling/scrolling.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/server-side-data/aggregation.js b/docs/pages/x/react-data-grid/server-side-data/aggregation.js index 35594f6fa6413..bfcbd582f587d 100644 --- a/docs/pages/x/react-data-grid/server-side-data/aggregation.js +++ b/docs/pages/x/react-data-grid/server-side-data/aggregation.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/server-side-data/aggregation.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/server-side-data/aggregation.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/server-side-data/index.js b/docs/pages/x/react-data-grid/server-side-data/index.js index 8d183d6d499c0..d9df4aa83ae58 100644 --- a/docs/pages/x/react-data-grid/server-side-data/index.js +++ b/docs/pages/x/react-data-grid/server-side-data/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/server-side-data/index.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/server-side-data/index.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/server-side-data/infinite-loading.js b/docs/pages/x/react-data-grid/server-side-data/infinite-loading.js index 9b9c08c05e85f..17c80ea529aab 100644 --- a/docs/pages/x/react-data-grid/server-side-data/infinite-loading.js +++ b/docs/pages/x/react-data-grid/server-side-data/infinite-loading.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/server-side-data/infinite-loading.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/server-side-data/infinite-loading.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/server-side-data/lazy-loading.js b/docs/pages/x/react-data-grid/server-side-data/lazy-loading.js index f0b78beb6cac3..a5a2bfb0671a9 100644 --- a/docs/pages/x/react-data-grid/server-side-data/lazy-loading.js +++ b/docs/pages/x/react-data-grid/server-side-data/lazy-loading.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/server-side-data/lazy-loading.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/server-side-data/lazy-loading.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/server-side-data/row-grouping.js b/docs/pages/x/react-data-grid/server-side-data/row-grouping.js index 06017357e71e6..0ca6eb198e2f3 100644 --- a/docs/pages/x/react-data-grid/server-side-data/row-grouping.js +++ b/docs/pages/x/react-data-grid/server-side-data/row-grouping.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/server-side-data/row-grouping.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/server-side-data/row-grouping.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/server-side-data/tree-data.js b/docs/pages/x/react-data-grid/server-side-data/tree-data.js index 6d122e9e139f9..0f161a986cc3e 100644 --- a/docs/pages/x/react-data-grid/server-side-data/tree-data.js +++ b/docs/pages/x/react-data-grid/server-side-data/tree-data.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/server-side-data/tree-data.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/server-side-data/tree-data.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/sorting.js b/docs/pages/x/react-data-grid/sorting.js index 4420b66875ecd..f130b2e4b2742 100644 --- a/docs/pages/x/react-data-grid/sorting.js +++ b/docs/pages/x/react-data-grid/sorting.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/sorting/sorting.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/sorting/sorting.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/state.js b/docs/pages/x/react-data-grid/state.js index 5987027592aed..4c09f99a195e5 100644 --- a/docs/pages/x/react-data-grid/state.js +++ b/docs/pages/x/react-data-grid/state.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/state/state.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/state/state.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/style-recipes.js b/docs/pages/x/react-data-grid/style-recipes.js index bdfb64e5b91bf..df8e4a1a13f6e 100644 --- a/docs/pages/x/react-data-grid/style-recipes.js +++ b/docs/pages/x/react-data-grid/style-recipes.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/style-recipes/style-recipes.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/style-recipes/style-recipes.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/style.js b/docs/pages/x/react-data-grid/style.js index 3d5db41d56f9f..e6da5d356eb4c 100644 --- a/docs/pages/x/react-data-grid/style.js +++ b/docs/pages/x/react-data-grid/style.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/style/style.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/style/style.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/tree-data.js b/docs/pages/x/react-data-grid/tree-data.js index 42a0f874094d9..9c15aa65bd0f8 100644 --- a/docs/pages/x/react-data-grid/tree-data.js +++ b/docs/pages/x/react-data-grid/tree-data.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/tree-data/tree-data.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/tree-data/tree-data.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/virtualization.js b/docs/pages/x/react-data-grid/virtualization.js index 0b6c704b8c672..c28f420966717 100644 --- a/docs/pages/x/react-data-grid/virtualization.js +++ b/docs/pages/x/react-data-grid/virtualization.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/virtualization/virtualization.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/virtualization/virtualization.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/adapters-locale.js b/docs/pages/x/react-date-pickers/adapters-locale.js index 5d8fa68201e13..cd83f2be8bd2e 100644 --- a/docs/pages/x/react-date-pickers/adapters-locale.js +++ b/docs/pages/x/react-date-pickers/adapters-locale.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/adapters-locale/adapters-locale.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/adapters-locale/adapters-locale.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/base-concepts.js b/docs/pages/x/react-date-pickers/base-concepts.js index bef093e9f0122..ba857eac006f5 100644 --- a/docs/pages/x/react-date-pickers/base-concepts.js +++ b/docs/pages/x/react-date-pickers/base-concepts.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/base-concepts/base-concepts.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/base-concepts/base-concepts.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/calendar-systems.js b/docs/pages/x/react-date-pickers/calendar-systems.js index 83655dd7be993..ff3f9cd73d018 100644 --- a/docs/pages/x/react-date-pickers/calendar-systems.js +++ b/docs/pages/x/react-date-pickers/calendar-systems.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/calendar-systems/calendar-systems.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/calendar-systems/calendar-systems.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/custom-components.js b/docs/pages/x/react-date-pickers/custom-components.js index 0b8538617bdcf..5381b1492cc2b 100644 --- a/docs/pages/x/react-date-pickers/custom-components.js +++ b/docs/pages/x/react-date-pickers/custom-components.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/custom-components/custom-components.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/custom-components/custom-components.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/custom-field.js b/docs/pages/x/react-date-pickers/custom-field.js index a61d4354da7b5..59f9121bc2d96 100644 --- a/docs/pages/x/react-date-pickers/custom-field.js +++ b/docs/pages/x/react-date-pickers/custom-field.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/custom-field/custom-field.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/custom-field/custom-field.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/custom-layout.js b/docs/pages/x/react-date-pickers/custom-layout.js index 856ce743606f7..c463f55ce6af3 100644 --- a/docs/pages/x/react-date-pickers/custom-layout.js +++ b/docs/pages/x/react-date-pickers/custom-layout.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/custom-layout/custom-layout.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/custom-layout/custom-layout.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/custom-opening-button.js b/docs/pages/x/react-date-pickers/custom-opening-button.js index 9cacfc0c8bf4d..f5057c1fce5fb 100644 --- a/docs/pages/x/react-date-pickers/custom-opening-button.js +++ b/docs/pages/x/react-date-pickers/custom-opening-button.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/custom-opening-button/custom-opening-button.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/custom-opening-button/custom-opening-button.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/date-calendar.js b/docs/pages/x/react-date-pickers/date-calendar.js index 59c3e550f89d6..a992e4b0de5d1 100644 --- a/docs/pages/x/react-date-pickers/date-calendar.js +++ b/docs/pages/x/react-date-pickers/date-calendar.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/date-calendar/date-calendar.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/date-calendar/date-calendar.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/date-field.js b/docs/pages/x/react-date-pickers/date-field.js index b304c9916a827..2a74bf38ae977 100644 --- a/docs/pages/x/react-date-pickers/date-field.js +++ b/docs/pages/x/react-date-pickers/date-field.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/date-field/date-field.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/date-field/date-field.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/date-picker.js b/docs/pages/x/react-date-pickers/date-picker.js index 0b557edd38ecc..35a6e789235b7 100644 --- a/docs/pages/x/react-date-pickers/date-picker.js +++ b/docs/pages/x/react-date-pickers/date-picker.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/date-picker/date-picker.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/date-picker/date-picker.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/date-range-calendar.js b/docs/pages/x/react-date-pickers/date-range-calendar.js index 42f1d68f4722d..f836963663644 100644 --- a/docs/pages/x/react-date-pickers/date-range-calendar.js +++ b/docs/pages/x/react-date-pickers/date-range-calendar.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/date-range-calendar/date-range-calendar.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/date-range-calendar/date-range-calendar.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/date-range-field.js b/docs/pages/x/react-date-pickers/date-range-field.js index 59f98fca25b51..ce78c1cc59174 100644 --- a/docs/pages/x/react-date-pickers/date-range-field.js +++ b/docs/pages/x/react-date-pickers/date-range-field.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/date-range-field/date-range-field.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/date-range-field/date-range-field.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/date-range-picker.js b/docs/pages/x/react-date-pickers/date-range-picker.js index dfff7f7f0ba7d..ab25b03483bc2 100644 --- a/docs/pages/x/react-date-pickers/date-range-picker.js +++ b/docs/pages/x/react-date-pickers/date-range-picker.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/date-range-picker/date-range-picker.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/date-range-picker/date-range-picker.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/date-time-field.js b/docs/pages/x/react-date-pickers/date-time-field.js index e2028fceeda1b..51acf836d94c9 100644 --- a/docs/pages/x/react-date-pickers/date-time-field.js +++ b/docs/pages/x/react-date-pickers/date-time-field.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/date-time-field/date-time-field.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/date-time-field/date-time-field.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/date-time-picker.js b/docs/pages/x/react-date-pickers/date-time-picker.js index 660b039301132..6df664fdb28e7 100644 --- a/docs/pages/x/react-date-pickers/date-time-picker.js +++ b/docs/pages/x/react-date-pickers/date-time-picker.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/date-time-picker/date-time-picker.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/date-time-picker/date-time-picker.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/date-time-range-field.js b/docs/pages/x/react-date-pickers/date-time-range-field.js index 2fb043f9890ee..dd23aeaec0b9d 100644 --- a/docs/pages/x/react-date-pickers/date-time-range-field.js +++ b/docs/pages/x/react-date-pickers/date-time-range-field.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/date-time-range-field/date-time-range-field.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/date-time-range-field/date-time-range-field.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/date-time-range-picker.js b/docs/pages/x/react-date-pickers/date-time-range-picker.js index e0402806e46b2..74b37d9ea661e 100644 --- a/docs/pages/x/react-date-pickers/date-time-range-picker.js +++ b/docs/pages/x/react-date-pickers/date-time-range-picker.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/date-time-range-picker/date-time-range-picker.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/date-time-range-picker/date-time-range-picker.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/digital-clock.js b/docs/pages/x/react-date-pickers/digital-clock.js index ac943c96310b2..78ad04990f96f 100644 --- a/docs/pages/x/react-date-pickers/digital-clock.js +++ b/docs/pages/x/react-date-pickers/digital-clock.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/digital-clock/digital-clock.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/digital-clock/digital-clock.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/faq.js b/docs/pages/x/react-date-pickers/faq.js index 983e8f5de7c6f..d99c53ff3582d 100644 --- a/docs/pages/x/react-date-pickers/faq.js +++ b/docs/pages/x/react-date-pickers/faq.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/faq/faq.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/faq/faq.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/fields.js b/docs/pages/x/react-date-pickers/fields.js index 6967295bb2bdf..ad138ea92cfcd 100644 --- a/docs/pages/x/react-date-pickers/fields.js +++ b/docs/pages/x/react-date-pickers/fields.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/fields/fields.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/fields/fields.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/getting-started.js b/docs/pages/x/react-date-pickers/getting-started.js index a185eb514873e..a158c4ae22ba2 100644 --- a/docs/pages/x/react-date-pickers/getting-started.js +++ b/docs/pages/x/react-date-pickers/getting-started.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/getting-started/getting-started.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/getting-started/getting-started.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/index.js b/docs/pages/x/react-date-pickers/index.js index 49f0406222f25..b3933fe81dc28 100644 --- a/docs/pages/x/react-date-pickers/index.js +++ b/docs/pages/x/react-date-pickers/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/overview/overview.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/overview/overview.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/lifecycle.js b/docs/pages/x/react-date-pickers/lifecycle.js index f3a7821d27d75..b16c0700668d9 100644 --- a/docs/pages/x/react-date-pickers/lifecycle.js +++ b/docs/pages/x/react-date-pickers/lifecycle.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/lifecycle/lifecycle.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/lifecycle/lifecycle.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/localization.js b/docs/pages/x/react-date-pickers/localization.js index 623484139d4f2..67d9e53cc02a3 100644 --- a/docs/pages/x/react-date-pickers/localization.js +++ b/docs/pages/x/react-date-pickers/localization.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/localization/localization.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/localization/localization.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/playground.js b/docs/pages/x/react-date-pickers/playground.js index c027e5b071760..3efc9f5957458 100644 --- a/docs/pages/x/react-date-pickers/playground.js +++ b/docs/pages/x/react-date-pickers/playground.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/playground/playground.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/playground/playground.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/shortcuts.js b/docs/pages/x/react-date-pickers/shortcuts.js index 94e59a643237a..4ab7a714e0781 100644 --- a/docs/pages/x/react-date-pickers/shortcuts.js +++ b/docs/pages/x/react-date-pickers/shortcuts.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/shortcuts/shortcuts.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/shortcuts/shortcuts.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/time-clock.js b/docs/pages/x/react-date-pickers/time-clock.js index 1da4a3e17d024..0d5cfb635c0b7 100644 --- a/docs/pages/x/react-date-pickers/time-clock.js +++ b/docs/pages/x/react-date-pickers/time-clock.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/time-clock/time-clock.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/time-clock/time-clock.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/time-field.js b/docs/pages/x/react-date-pickers/time-field.js index 4f259ee3ac23a..8766af0f99cc2 100644 --- a/docs/pages/x/react-date-pickers/time-field.js +++ b/docs/pages/x/react-date-pickers/time-field.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/time-field/time-field.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/time-field/time-field.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/time-picker.js b/docs/pages/x/react-date-pickers/time-picker.js index 29550735e5266..dbcc5d72a3269 100644 --- a/docs/pages/x/react-date-pickers/time-picker.js +++ b/docs/pages/x/react-date-pickers/time-picker.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/time-picker/time-picker.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/time-picker/time-picker.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/time-range-field.js b/docs/pages/x/react-date-pickers/time-range-field.js index 433160ae48bb3..9cf50ac31f83a 100644 --- a/docs/pages/x/react-date-pickers/time-range-field.js +++ b/docs/pages/x/react-date-pickers/time-range-field.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/time-range-field/time-range-field.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/time-range-field/time-range-field.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/time-range-picker.js b/docs/pages/x/react-date-pickers/time-range-picker.js index e0a5ded2c459b..2d3f40437cc0f 100644 --- a/docs/pages/x/react-date-pickers/time-range-picker.js +++ b/docs/pages/x/react-date-pickers/time-range-picker.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/time-range-picker/time-range-picker.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/time-range-picker/time-range-picker.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/timezone.js b/docs/pages/x/react-date-pickers/timezone.js index 23ff5978628f9..89100e048080b 100644 --- a/docs/pages/x/react-date-pickers/timezone.js +++ b/docs/pages/x/react-date-pickers/timezone.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/timezone/timezone.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/timezone/timezone.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/validation.js b/docs/pages/x/react-date-pickers/validation.js index e569857fa4496..a1775e8a5497c 100644 --- a/docs/pages/x/react-date-pickers/validation.js +++ b/docs/pages/x/react-date-pickers/validation.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/validation/validation.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/validation/validation.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-tree-view/getting-started.js b/docs/pages/x/react-tree-view/getting-started.js index a13676cf3b513..f0279289f29b2 100644 --- a/docs/pages/x/react-tree-view/getting-started.js +++ b/docs/pages/x/react-tree-view/getting-started.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/tree-view/getting-started/getting-started.md?@mui/markdown'; +import * as pageProps from 'docsx/data/tree-view/getting-started/getting-started.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-tree-view/index.js b/docs/pages/x/react-tree-view/index.js index 515674eeef712..b0930dcc0fab5 100644 --- a/docs/pages/x/react-tree-view/index.js +++ b/docs/pages/x/react-tree-view/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/tree-view/overview/overview.md?@mui/markdown'; +import * as pageProps from 'docsx/data/tree-view/overview/overview.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-tree-view/rich-tree-view/customization.js b/docs/pages/x/react-tree-view/rich-tree-view/customization.js index 84fa88a51b3a8..87547ab6f441a 100644 --- a/docs/pages/x/react-tree-view/rich-tree-view/customization.js +++ b/docs/pages/x/react-tree-view/rich-tree-view/customization.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/tree-view/rich-tree-view/customization/customization.md?@mui/markdown'; +import * as pageProps from 'docsx/data/tree-view/rich-tree-view/customization/customization.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-tree-view/rich-tree-view/expansion.js b/docs/pages/x/react-tree-view/rich-tree-view/expansion.js index 1bfd853d15103..4fd7c767e9aed 100644 --- a/docs/pages/x/react-tree-view/rich-tree-view/expansion.js +++ b/docs/pages/x/react-tree-view/rich-tree-view/expansion.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/tree-view/rich-tree-view/expansion/expansion.md?@mui/markdown'; +import * as pageProps from 'docsx/data/tree-view/rich-tree-view/expansion/expansion.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-tree-view/rich-tree-view/focus.js b/docs/pages/x/react-tree-view/rich-tree-view/focus.js index 6b2b63c962650..66eaf318950dc 100644 --- a/docs/pages/x/react-tree-view/rich-tree-view/focus.js +++ b/docs/pages/x/react-tree-view/rich-tree-view/focus.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/tree-view/rich-tree-view/focus/focus.md?@mui/markdown'; +import * as pageProps from 'docsx/data/tree-view/rich-tree-view/focus/focus.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-tree-view/rich-tree-view/headless.js b/docs/pages/x/react-tree-view/rich-tree-view/headless.js index 1e37db1bcc688..af96db7a61ca5 100644 --- a/docs/pages/x/react-tree-view/rich-tree-view/headless.js +++ b/docs/pages/x/react-tree-view/rich-tree-view/headless.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/tree-view/rich-tree-view/headless/headless.md?@mui/markdown'; +import * as pageProps from 'docsx/data/tree-view/rich-tree-view/headless/headless.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-tree-view/rich-tree-view/items.js b/docs/pages/x/react-tree-view/rich-tree-view/items.js index 6e5a250799f0b..04a90fe070dc0 100644 --- a/docs/pages/x/react-tree-view/rich-tree-view/items.js +++ b/docs/pages/x/react-tree-view/rich-tree-view/items.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/tree-view/rich-tree-view/items/items.md?@mui/markdown'; +import * as pageProps from 'docsx/data/tree-view/rich-tree-view/items/items.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-tree-view/rich-tree-view/selection.js b/docs/pages/x/react-tree-view/rich-tree-view/selection.js index 799c8ff04f095..2e47e4936d17e 100644 --- a/docs/pages/x/react-tree-view/rich-tree-view/selection.js +++ b/docs/pages/x/react-tree-view/rich-tree-view/selection.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/tree-view/rich-tree-view/selection/selection.md?@mui/markdown'; +import * as pageProps from 'docsx/data/tree-view/rich-tree-view/selection/selection.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-tree-view/simple-tree-view/customization.js b/docs/pages/x/react-tree-view/simple-tree-view/customization.js index 2d8abf569cdff..167e049bc9245 100644 --- a/docs/pages/x/react-tree-view/simple-tree-view/customization.js +++ b/docs/pages/x/react-tree-view/simple-tree-view/customization.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/tree-view/simple-tree-view/customization/customization.md?@mui/markdown'; +import * as pageProps from 'docsx/data/tree-view/simple-tree-view/customization/customization.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-tree-view/simple-tree-view/expansion.js b/docs/pages/x/react-tree-view/simple-tree-view/expansion.js index a683fd872355e..442cd953bcae5 100644 --- a/docs/pages/x/react-tree-view/simple-tree-view/expansion.js +++ b/docs/pages/x/react-tree-view/simple-tree-view/expansion.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/tree-view/simple-tree-view/expansion/expansion.md?@mui/markdown'; +import * as pageProps from 'docsx/data/tree-view/simple-tree-view/expansion/expansion.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-tree-view/simple-tree-view/focus.js b/docs/pages/x/react-tree-view/simple-tree-view/focus.js index a545ed30a37ff..3e324f2b93a48 100644 --- a/docs/pages/x/react-tree-view/simple-tree-view/focus.js +++ b/docs/pages/x/react-tree-view/simple-tree-view/focus.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/tree-view/simple-tree-view/focus/focus.md?@mui/markdown'; +import * as pageProps from 'docsx/data/tree-view/simple-tree-view/focus/focus.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-tree-view/simple-tree-view/items.js b/docs/pages/x/react-tree-view/simple-tree-view/items.js index 0a8eff89d0b37..feb509dfc372b 100644 --- a/docs/pages/x/react-tree-view/simple-tree-view/items.js +++ b/docs/pages/x/react-tree-view/simple-tree-view/items.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/tree-view/simple-tree-view/items/items.md?@mui/markdown'; +import * as pageProps from 'docsx/data/tree-view/simple-tree-view/items/items.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-tree-view/simple-tree-view/selection.js b/docs/pages/x/react-tree-view/simple-tree-view/selection.js index f700b2f911cfc..a7ff23bffbcb2 100644 --- a/docs/pages/x/react-tree-view/simple-tree-view/selection.js +++ b/docs/pages/x/react-tree-view/simple-tree-view/selection.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/tree-view/simple-tree-view/selection/selection.md?@mui/markdown'; +import * as pageProps from 'docsx/data/tree-view/simple-tree-view/selection/selection.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/whats-new.js b/docs/pages/x/whats-new.js index d30bf447441f7..45e23d5801f7c 100644 --- a/docs/pages/x/whats-new.js +++ b/docs/pages/x/whats-new.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/whats-new/whats-new.md?@mui/markdown'; +import * as pageProps from 'docsx/data/whats-new/whats-new.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/scripts/api/buildInterfacesDocumentation.ts b/docs/scripts/api/buildInterfacesDocumentation.ts index d21706c22965b..fe5d16a3bf28a 100644 --- a/docs/scripts/api/buildInterfacesDocumentation.ts +++ b/docs/scripts/api/buildInterfacesDocumentation.ts @@ -370,7 +370,7 @@ export default async function buildInterfacesDocumentation( path.resolve(apiPagesFolder, project.documentationFolderName, `${slug}.js`), `import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; - import * as pageProps from './${slug}.md?@mui/markdown'; + import * as pageProps from './${slug}.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/scripts/createXTypeScriptProjects.ts b/docs/scripts/createXTypeScriptProjects.ts index 43d10d66f14b5..b5bc86f9850a1 100644 --- a/docs/scripts/createXTypeScriptProjects.ts +++ b/docs/scripts/createXTypeScriptProjects.ts @@ -3,7 +3,7 @@ import { createTypeScriptProject, CreateTypeScriptProjectOptions, TypeScriptProject, -} from '@mui-internal/docs-utils'; +} from '@mui/internal-docs-utils'; import { getComponentFilesInFolder } from './utils'; const workspaceRoot = path.resolve(__dirname, '../../'); diff --git a/docs/scripts/generateProptypes.ts b/docs/scripts/generateProptypes.ts index c12d312eed728..dbc2280c520d0 100644 --- a/docs/scripts/generateProptypes.ts +++ b/docs/scripts/generateProptypes.ts @@ -6,7 +6,7 @@ import { getPropTypesFromFile, injectPropTypesInFile, } from '@mui/internal-scripts/typescript-to-proptypes'; -import { fixBabelGeneratorIssues, fixLineEndings } from '@mui-internal/docs-utils'; +import { fixBabelGeneratorIssues, fixLineEndings } from '@mui/internal-docs-utils'; import { createXTypeScriptProjects, XTypeScriptProject } from './createXTypeScriptProjects'; async function generateProptypes(project: XTypeScriptProject, sourceFile: string) { diff --git a/docs/scripts/reportBrokenLinks.js b/docs/scripts/reportBrokenLinks.js index aba1b6ac8cc31..9b22cad9c0455 100644 --- a/docs/scripts/reportBrokenLinks.js +++ b/docs/scripts/reportBrokenLinks.js @@ -26,12 +26,11 @@ const availableLinksCore = {}; const usedLinksX = {}; const usedLinksCore = {}; -parseDocFolder(path.join(docsSpaceRoot, './pages/'), availableLinksX, usedLinksX, ''); +parseDocFolder(path.join(docsSpaceRoot, './pages/'), availableLinksX, usedLinksX); parseDocFolder( path.resolve(__dirname, '../../node_modules/@mui/monorepo/docs/pages/'), availableLinksCore, usedLinksCore, - '', ); function removeApiLinkHash(link) { diff --git a/scripts/buildApiDocs/chartsSettings/getComponentInfo.ts b/scripts/buildApiDocs/chartsSettings/getComponentInfo.ts index fe78e85736914..bb32c62e0d5bd 100644 --- a/scripts/buildApiDocs/chartsSettings/getComponentInfo.ts +++ b/scripts/buildApiDocs/chartsSettings/getComponentInfo.ts @@ -1,7 +1,7 @@ import fs from 'fs'; import path from 'path'; import kebabCase from 'lodash/kebabCase'; -import { getHeaders, getTitle, renderMarkdown } from '@mui/markdown'; +import { getHeaders, getTitle, renderMarkdown } from '@mui/internal-markdown'; import { ComponentInfo, extractPackageFile, diff --git a/scripts/buildApiDocs/pickersSettings/getComponentInfo.ts b/scripts/buildApiDocs/pickersSettings/getComponentInfo.ts index 136b8727b6e7d..4e6602e26f6ad 100644 --- a/scripts/buildApiDocs/pickersSettings/getComponentInfo.ts +++ b/scripts/buildApiDocs/pickersSettings/getComponentInfo.ts @@ -1,7 +1,7 @@ import fs from 'fs'; import path from 'path'; import kebabCase from 'lodash/kebabCase'; -import { getHeaders, getTitle, renderMarkdown } from '@mui/markdown'; +import { getHeaders, getTitle, renderMarkdown } from '@mui/internal-markdown'; import { ComponentInfo, extractPackageFile, diff --git a/scripts/buildApiDocs/treeViewSettings/getComponentInfo.ts b/scripts/buildApiDocs/treeViewSettings/getComponentInfo.ts index fbb3d0028e30f..a26a5287af449 100644 --- a/scripts/buildApiDocs/treeViewSettings/getComponentInfo.ts +++ b/scripts/buildApiDocs/treeViewSettings/getComponentInfo.ts @@ -1,7 +1,7 @@ import fs from 'fs'; import path from 'path'; import kebabCase from 'lodash/kebabCase'; -import { getHeaders, getTitle, renderMarkdown } from '@mui/markdown'; +import { getHeaders, getTitle, renderMarkdown } from '@mui/internal-markdown'; import { ComponentInfo, extractPackageFile, diff --git a/scripts/buildApiDocs/tsconfig.json b/scripts/buildApiDocs/tsconfig.json index 255b9b902efe5..f8afa28bc48bb 100644 --- a/scripts/buildApiDocs/tsconfig.json +++ b/scripts/buildApiDocs/tsconfig.json @@ -14,7 +14,6 @@ "strict": true, "baseUrl": "./", "paths": { - "@mui/markdown": ["../../node_modules/@mui/monorepo/packages/markdown/index.d.ts"], "@mui/material-nextjs/*": [ "../../node_modules/@mui/monorepo/packages/mui-material-nextjs/src/*" ], diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js index 12431dba8223d..6549bda5c809e 100644 --- a/webpackBaseConfig.js +++ b/webpackBaseConfig.js @@ -17,7 +17,6 @@ module.exports = { '@mui/x-charts': path.resolve(__dirname, './packages/x-charts/src'), '@mui/x-tree-view': path.resolve(__dirname, './packages/x-tree-view/src'), '@mui/x-license': path.resolve(__dirname, './packages/x-license/src'), - '@mui/markdown': path.resolve(__dirname, './node_modules/@mui/monorepo/packages/markdown'), '@mui/material-nextjs': path.resolve( __dirname, './node_modules/@mui/monorepo/packages/mui-material-nextjs/src', diff --git a/yarn.lock b/yarn.lock index 8471de5ce33c1..572f5f7489679 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1937,6 +1937,24 @@ dependencies: "@babel/runtime" "^7.23.9" +"@mui/internal-docs-utils@^1.0.4": + version "1.0.4" + resolved "https://registry.yarnpkg.com/@mui/internal-docs-utils/-/internal-docs-utils-1.0.4.tgz#dd20bde31582e09e3b475f5956795c3297291cae" + integrity sha512-aZ70CqKohMZ/RS3V5Nl3FmBNVMKHNjtXachtkcWnxyQCi9DPuaGCz8l1Q0Iealjax+j08vT5vDO0JwWFImMsnA== + dependencies: + rimraf "^5.0.5" + typescript "^5.3.3" + +"@mui/internal-markdown@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@mui/internal-markdown/-/internal-markdown-1.0.0.tgz#e7c19efc9a8989dff410c99bfb7d09f491ed4738" + integrity sha512-jbj1XYQZN5Jqphq9K/Tyt42v/eRPmXEZzAYOHbsvHfFo9XnMC2OKJAsYOwpXGVmZQpvkg1z9vA55gOe6ceTW/w== + dependencies: + "@babel/runtime" "^7.23.9" + lodash "^4.17.21" + marked "^5.1.2" + prismjs "^1.29.0" + "@mui/internal-scripts@^1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@mui/internal-scripts/-/internal-scripts-1.0.1.tgz#9c4d4bdc9d9434688ca2d57d044729b366d98215" @@ -1999,13 +2017,14 @@ react-transition-group "^4.4.5" "@mui/monorepo@https://github.com/mui/material-ui.git#master": - version "5.15.10" - resolved "https://github.com/mui/material-ui.git#daee6ef96a246bec6ba96f0ef580b17772d0e1ea" + version "5.15.14" + resolved "https://github.com/mui/material-ui.git#9585d28317c90f2c71ab88dd5ae37638bb64ad82" dependencies: "@googleapis/sheets" "^5.0.5" + "@netlify/functions" "^2.6.0" "@slack/bolt" "^3.17.1" execa "^8.0.1" - google-auth-library "^9.5.0" + google-auth-library "^9.7.0" "@mui/private-theming@^5.15.14": version "5.15.14" @@ -2078,6 +2097,26 @@ prop-types "^15.8.1" react-is "^18.2.0" +"@netlify/functions@^2.6.0": + version "2.6.0" + resolved "https://registry.yarnpkg.com/@netlify/functions/-/functions-2.6.0.tgz#801a6fe8ceef2ce1512c637a28e53e6a3aae289b" + integrity sha512-vU20tij0fb4nRGACqb+5SQvKd50JYyTyEhQetCMHdakcJFzjLDivvRR16u1G2Oy4A7xNAtGJF1uz8reeOtTVcQ== + dependencies: + "@netlify/serverless-functions-api" "1.14.0" + +"@netlify/node-cookies@^0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@netlify/node-cookies/-/node-cookies-0.1.0.tgz#dda912ba618527695cf519fafa221c5e6777c612" + integrity sha512-OAs1xG+FfLX0LoRASpqzVntVV/RpYkgpI0VrUnw2u0Q1qiZUzcPffxRK8HF3gc4GjuhG5ahOEMJ9bswBiZPq0g== + +"@netlify/serverless-functions-api@1.14.0": + version "1.14.0" + resolved "https://registry.yarnpkg.com/@netlify/serverless-functions-api/-/serverless-functions-api-1.14.0.tgz#2bedff76cf898e24e48161aa2508776c4d261ed1" + integrity sha512-HUNETLNvNiC2J+SB/YuRwJA9+agPrc0azSoWVk8H85GC+YE114hcS5JW+dstpKwVerp2xILE3vNWN7IMXP5Q5Q== + dependencies: + "@netlify/node-cookies" "^0.1.0" + urlpattern-polyfill "8.0.2" + "@next/env@14.1.1": version "14.1.1" resolved "https://registry.yarnpkg.com/@next/env/-/env-14.1.1.tgz#80150a8440eb0022a73ba353c6088d419b908bac" @@ -8108,10 +8147,10 @@ gm@^1.25.0: cross-spawn "^4.0.0" debug "^3.1.0" -google-auth-library@^9.0.0, google-auth-library@^9.5.0: - version "9.6.1" - resolved "https://registry.yarnpkg.com/google-auth-library/-/google-auth-library-9.6.1.tgz#f22c575383a7900c63de189e1a66b61e50ebda19" - integrity sha512-rPL44wV0yJnA11+ggxA348ylUY1o7mkcHLwlZNlLZsKROPLl7q3LgMU5nM65h1QpxhJu/shk2FLml7173XIthA== +google-auth-library@^9.0.0, google-auth-library@^9.7.0: + version "9.7.0" + resolved "https://registry.yarnpkg.com/google-auth-library/-/google-auth-library-9.7.0.tgz#dd99a08e2e3f70778de8be4ed8556460e237550a" + integrity sha512-I/AvzBiUXDzLOy4iIZ2W+Zq33W4lcukQv1nl7C8WUA6SQwyQwUwu3waNmWNAvzds//FG8SZ+DnKnW/2k6mQS8A== dependencies: base64-js "^1.3.0" ecdsa-sig-formatter "^1.0.11" @@ -14814,6 +14853,11 @@ url-template@^2.0.8: resolved "https://registry.yarnpkg.com/url-template/-/url-template-2.0.8.tgz#fc565a3cccbff7730c775f5641f9555791439f21" integrity sha512-XdVKMF4SJ0nP/O7XIPB0JwAEuT9lDIYnNsK8yGVe43y0AWoKeJNdv3ZNWh7ksJ6KqQFjOO6ox/VEitLnaVNufw== +urlpattern-polyfill@8.0.2: + version "8.0.2" + resolved "https://registry.yarnpkg.com/urlpattern-polyfill/-/urlpattern-polyfill-8.0.2.tgz#99f096e35eff8bf4b5a2aa7d58a1523d6ebc7ce5" + integrity sha512-Qp95D4TPJl1kC9SKigDcqgyM2VDVO4RiJc2d4qe5GrYm+zbIQCWWKAFaJNQ4BhdFeDGwBmAxqJBwWSJDb9T3BQ== + use@^3.1.0: version "3.1.1" resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"