From a48961be4c5a1b0394411f6eb4d03af3330d31a8 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Fri, 1 Dec 2023 14:52:33 +0500 Subject: [PATCH] [DataGridPremium] Make `clipboard paste` feature stable (#11248) Signed-off-by: Bilal Shafi --- .../data/data-grid/clipboard/ClipboardCopy.js | 2 +- .../data-grid/clipboard/ClipboardCopy.tsx | 2 +- .../data-grid/clipboard/ClipboardPaste.js | 3 +- .../data-grid/clipboard/ClipboardPaste.tsx | 3 +- .../clipboard/ClipboardPaste.tsx.preview | 3 +- .../clipboard/ClipboardPasteDelimiter.js | 5 +-- .../clipboard/ClipboardPasteDelimiter.tsx | 5 +-- .../ClipboardPasteDelimiter.tsx.preview | 5 +-- .../clipboard/ClipboardPasteDisabled.js | 6 +-- .../clipboard/ClipboardPasteDisabled.tsx | 6 +-- .../ClipboardPasteDisabled.tsx.preview | 6 +-- .../clipboard/ClipboardPasteEvents.js | 3 +- .../clipboard/ClipboardPasteEvents.tsx | 3 +- .../ClipboardPasteEvents.tsx.preview | 3 +- .../clipboard/ClipboardPastePersistence.js | 3 +- .../clipboard/ClipboardPastePersistence.tsx | 3 +- .../ClipboardPastePersistence.tsx.preview | 3 +- docs/data/data-grid/clipboard/clipboard.md | 17 +++----- .../recipes-editing/BulkEditingNoSnap.js | 3 +- .../recipes-editing/BulkEditingNoSnap.tsx | 3 +- .../migration-data-grid-v6.md | 5 +++ .../x/api/data-grid/data-grid-premium.json | 26 ++++++------- docs/pages/x/api/data-grid/data-grid-pro.json | 16 ++++---- docs/pages/x/api/data-grid/data-grid.json | 14 +++---- .../api-docs/data-grid/data-grid-premium.json | 20 +++++----- .../api-docs/data-grid/data-grid-pro.json | 10 ++--- .../api-docs/data-grid/data-grid.json | 10 ++--- .../src/DataGridPremium/DataGridPremium.tsx | 39 +++++++++---------- .../useDataGridPremiumProps.ts | 2 +- .../cellSelection/useGridCellSelection.ts | 4 +- .../clipboard/useGridClipboardImport.ts | 8 ++-- .../src/models/dataGridPremiumProps.ts | 9 +---- .../tests/clipboard.DataGridPremium.test.tsx | 25 ++---------- .../src/DataGridPro/DataGridPro.tsx | 24 ++++++------ .../x-data-grid/src/DataGrid/DataGrid.tsx | 24 ++++++------ .../src/DataGrid/useDataGridProps.ts | 2 +- .../features/clipboard/useGridClipboard.ts | 4 +- .../features/export/useGridCsvExport.tsx | 4 +- .../src/models/props/DataGridProps.ts | 2 +- 39 files changed, 141 insertions(+), 194 deletions(-) diff --git a/docs/data/data-grid/clipboard/ClipboardCopy.js b/docs/data/data-grid/clipboard/ClipboardCopy.js index 2c37ce6b6322f..b8af11afe30b7 100644 --- a/docs/data/data-grid/clipboard/ClipboardCopy.js +++ b/docs/data/data-grid/clipboard/ClipboardCopy.js @@ -33,7 +33,7 @@ export default function ClipboardCopy() { disableRowSelectionOnClick cellSelection onClipboardCopy={(copiedString) => setCopiedData(copiedString)} - unstable_ignoreValueFormatterDuringExport + ignoreValueFormatterDuringExport /> diff --git a/docs/data/data-grid/clipboard/ClipboardCopy.tsx b/docs/data/data-grid/clipboard/ClipboardCopy.tsx index 2c37ce6b6322f..b8af11afe30b7 100644 --- a/docs/data/data-grid/clipboard/ClipboardCopy.tsx +++ b/docs/data/data-grid/clipboard/ClipboardCopy.tsx @@ -33,7 +33,7 @@ export default function ClipboardCopy() { disableRowSelectionOnClick cellSelection onClipboardCopy={(copiedString) => setCopiedData(copiedString)} - unstable_ignoreValueFormatterDuringExport + ignoreValueFormatterDuringExport /> diff --git a/docs/data/data-grid/clipboard/ClipboardPaste.js b/docs/data/data-grid/clipboard/ClipboardPaste.js index 66723904be4d6..88c0c6f021079 100644 --- a/docs/data/data-grid/clipboard/ClipboardPaste.js +++ b/docs/data/data-grid/clipboard/ClipboardPaste.js @@ -27,9 +27,8 @@ export default function ClipboardPaste() { initialState={initialState} checkboxSelection disableRowSelectionOnClick + ignoreValueFormatterDuringExport cellSelection - experimentalFeatures={{ clipboardPaste: true }} - unstable_ignoreValueFormatterDuringExport /> ); diff --git a/docs/data/data-grid/clipboard/ClipboardPaste.tsx b/docs/data/data-grid/clipboard/ClipboardPaste.tsx index 66723904be4d6..88c0c6f021079 100644 --- a/docs/data/data-grid/clipboard/ClipboardPaste.tsx +++ b/docs/data/data-grid/clipboard/ClipboardPaste.tsx @@ -27,9 +27,8 @@ export default function ClipboardPaste() { initialState={initialState} checkboxSelection disableRowSelectionOnClick + ignoreValueFormatterDuringExport cellSelection - experimentalFeatures={{ clipboardPaste: true }} - unstable_ignoreValueFormatterDuringExport /> ); diff --git a/docs/data/data-grid/clipboard/ClipboardPaste.tsx.preview b/docs/data/data-grid/clipboard/ClipboardPaste.tsx.preview index 1eaa137680fe5..5b82d897165aa 100644 --- a/docs/data/data-grid/clipboard/ClipboardPaste.tsx.preview +++ b/docs/data/data-grid/clipboard/ClipboardPaste.tsx.preview @@ -3,7 +3,6 @@ initialState={initialState} checkboxSelection disableRowSelectionOnClick + ignoreValueFormatterDuringExport cellSelection - experimentalFeatures={{ clipboardPaste: true }} - unstable_ignoreValueFormatterDuringExport /> \ No newline at end of file diff --git a/docs/data/data-grid/clipboard/ClipboardPasteDelimiter.js b/docs/data/data-grid/clipboard/ClipboardPasteDelimiter.js index 6e8e87663d45f..987421d181471 100644 --- a/docs/data/data-grid/clipboard/ClipboardPasteDelimiter.js +++ b/docs/data/data-grid/clipboard/ClipboardPasteDelimiter.js @@ -26,11 +26,10 @@ export default function ClipboardPasteDelimiter() { {...data} initialState={initialState} disableRowSelectionOnClick + ignoreValueFormatterDuringExport cellSelection - experimentalFeatures={{ clipboardPaste: true }} - unstable_ignoreValueFormatterDuringExport clipboardCopyCellDelimiter={','} - unstable_splitClipboardPastedText={(text) => + splitClipboardPastedText={(text) => text.split('\n').map((row) => row.split(',')) } /> diff --git a/docs/data/data-grid/clipboard/ClipboardPasteDelimiter.tsx b/docs/data/data-grid/clipboard/ClipboardPasteDelimiter.tsx index 6e8e87663d45f..987421d181471 100644 --- a/docs/data/data-grid/clipboard/ClipboardPasteDelimiter.tsx +++ b/docs/data/data-grid/clipboard/ClipboardPasteDelimiter.tsx @@ -26,11 +26,10 @@ export default function ClipboardPasteDelimiter() { {...data} initialState={initialState} disableRowSelectionOnClick + ignoreValueFormatterDuringExport cellSelection - experimentalFeatures={{ clipboardPaste: true }} - unstable_ignoreValueFormatterDuringExport clipboardCopyCellDelimiter={','} - unstable_splitClipboardPastedText={(text) => + splitClipboardPastedText={(text) => text.split('\n').map((row) => row.split(',')) } /> diff --git a/docs/data/data-grid/clipboard/ClipboardPasteDelimiter.tsx.preview b/docs/data/data-grid/clipboard/ClipboardPasteDelimiter.tsx.preview index 6605c1ee32b14..3009de771c1d7 100644 --- a/docs/data/data-grid/clipboard/ClipboardPasteDelimiter.tsx.preview +++ b/docs/data/data-grid/clipboard/ClipboardPasteDelimiter.tsx.preview @@ -2,11 +2,10 @@ {...data} initialState={initialState} disableRowSelectionOnClick + ignoreValueFormatterDuringExport cellSelection - experimentalFeatures={{ clipboardPaste: true }} - unstable_ignoreValueFormatterDuringExport clipboardCopyCellDelimiter={','} - unstable_splitClipboardPastedText={(text) => + splitClipboardPastedText={(text) => text.split('\n').map((row) => row.split(',')) } /> \ No newline at end of file diff --git a/docs/data/data-grid/clipboard/ClipboardPasteDisabled.js b/docs/data/data-grid/clipboard/ClipboardPasteDisabled.js index 0b62e12228c5d..04a5afe7fb416 100644 --- a/docs/data/data-grid/clipboard/ClipboardPasteDisabled.js +++ b/docs/data/data-grid/clipboard/ClipboardPasteDisabled.js @@ -12,11 +12,7 @@ export default function ClipboardPasteDisabled() { return (
- +
); } diff --git a/docs/data/data-grid/clipboard/ClipboardPasteDisabled.tsx b/docs/data/data-grid/clipboard/ClipboardPasteDisabled.tsx index 0b62e12228c5d..04a5afe7fb416 100644 --- a/docs/data/data-grid/clipboard/ClipboardPasteDisabled.tsx +++ b/docs/data/data-grid/clipboard/ClipboardPasteDisabled.tsx @@ -12,11 +12,7 @@ export default function ClipboardPasteDisabled() { return (
- +
); } diff --git a/docs/data/data-grid/clipboard/ClipboardPasteDisabled.tsx.preview b/docs/data/data-grid/clipboard/ClipboardPasteDisabled.tsx.preview index d3edaf11d6987..d1067b22161ae 100644 --- a/docs/data/data-grid/clipboard/ClipboardPasteDisabled.tsx.preview +++ b/docs/data/data-grid/clipboard/ClipboardPasteDisabled.tsx.preview @@ -1,5 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/data/data-grid/clipboard/ClipboardPasteEvents.js b/docs/data/data-grid/clipboard/ClipboardPasteEvents.js index a399126a51ca5..299a2ea33c05a 100644 --- a/docs/data/data-grid/clipboard/ClipboardPasteEvents.js +++ b/docs/data/data-grid/clipboard/ClipboardPasteEvents.js @@ -38,8 +38,7 @@ export default function ClipboardPasteEvents() { processRowUpdate={processRowUpdate} onClipboardPasteStart={() => setLoading(true)} onClipboardPasteEnd={() => setLoading(false)} - experimentalFeatures={{ clipboardPaste: true }} - unstable_ignoreValueFormatterDuringExport + ignoreValueFormatterDuringExport /> ); diff --git a/docs/data/data-grid/clipboard/ClipboardPasteEvents.tsx b/docs/data/data-grid/clipboard/ClipboardPasteEvents.tsx index 38e3d5cd823c6..0139a1fc04293 100644 --- a/docs/data/data-grid/clipboard/ClipboardPasteEvents.tsx +++ b/docs/data/data-grid/clipboard/ClipboardPasteEvents.tsx @@ -40,8 +40,7 @@ export default function ClipboardPasteEvents() { processRowUpdate={processRowUpdate} onClipboardPasteStart={() => setLoading(true)} onClipboardPasteEnd={() => setLoading(false)} - experimentalFeatures={{ clipboardPaste: true }} - unstable_ignoreValueFormatterDuringExport + ignoreValueFormatterDuringExport /> ); diff --git a/docs/data/data-grid/clipboard/ClipboardPasteEvents.tsx.preview b/docs/data/data-grid/clipboard/ClipboardPasteEvents.tsx.preview index a7ad3c1cbe968..0c6f364b0155b 100644 --- a/docs/data/data-grid/clipboard/ClipboardPasteEvents.tsx.preview +++ b/docs/data/data-grid/clipboard/ClipboardPasteEvents.tsx.preview @@ -6,6 +6,5 @@ processRowUpdate={processRowUpdate} onClipboardPasteStart={() => setLoading(true)} onClipboardPasteEnd={() => setLoading(false)} - experimentalFeatures={{ clipboardPaste: true }} - unstable_ignoreValueFormatterDuringExport + ignoreValueFormatterDuringExport /> \ No newline at end of file diff --git a/docs/data/data-grid/clipboard/ClipboardPastePersistence.js b/docs/data/data-grid/clipboard/ClipboardPastePersistence.js index ebe966c38b4c5..23e7fe9c5cf1c 100644 --- a/docs/data/data-grid/clipboard/ClipboardPastePersistence.js +++ b/docs/data/data-grid/clipboard/ClipboardPastePersistence.js @@ -252,8 +252,7 @@ export default function ClipboardPastePersistence() { checkboxSelection cellSelection processRowUpdate={processRowUpdate} - experimentalFeatures={{ clipboardPaste: true }} - unstable_ignoreValueFormatterDuringExport + ignoreValueFormatterDuringExport /> diff --git a/docs/data/data-grid/clipboard/ClipboardPastePersistence.tsx b/docs/data/data-grid/clipboard/ClipboardPastePersistence.tsx index 198d41de018a4..5041a80fdee3d 100644 --- a/docs/data/data-grid/clipboard/ClipboardPastePersistence.tsx +++ b/docs/data/data-grid/clipboard/ClipboardPastePersistence.tsx @@ -258,8 +258,7 @@ export default function ClipboardPastePersistence() { checkboxSelection cellSelection processRowUpdate={processRowUpdate} - experimentalFeatures={{ clipboardPaste: true }} - unstable_ignoreValueFormatterDuringExport + ignoreValueFormatterDuringExport /> diff --git a/docs/data/data-grid/clipboard/ClipboardPastePersistence.tsx.preview b/docs/data/data-grid/clipboard/ClipboardPastePersistence.tsx.preview index a1f1ba94cb6ad..89cee4542efa0 100644 --- a/docs/data/data-grid/clipboard/ClipboardPastePersistence.tsx.preview +++ b/docs/data/data-grid/clipboard/ClipboardPastePersistence.tsx.preview @@ -10,7 +10,6 @@ checkboxSelection cellSelection processRowUpdate={processRowUpdate} - experimentalFeatures={{ clipboardPaste: true }} - unstable_ignoreValueFormatterDuringExport + ignoreValueFormatterDuringExport /> \ No newline at end of file diff --git a/docs/data/data-grid/clipboard/clipboard.md b/docs/data/data-grid/clipboard/clipboard.md index c6cdcda143c0c..c9a922c10b10a 100644 --- a/docs/data/data-grid/clipboard/clipboard.md +++ b/docs/data/data-grid/clipboard/clipboard.md @@ -28,18 +28,13 @@ The priority of the data copied to the clipboard is the following, from highest ::: :::warning -This feature is experimental, it needs to be explicitly activated using the `clipboardPaste` experimental feature flag. - -Additionally, to make sure the copied cells are formatted correctly and can be parsed, -it's recommended to set the `unstable_ignoreValueFormatterDuringExport` prop to `true`. +To make sure the copied cells are formatted correctly and can be parsed, +it is recommended to set the `ignoreValueFormatterDuringExport` prop to `true`. During clipboard copy operation, the raw cell values will be copied instead of the formatted values, so that the values can be parsed correctly during the paste operation. ```tsx - + ``` ::: @@ -103,16 +98,14 @@ By default, the clipboard copy and paste operations use the following format: - The cell values are separated by a tab (`\t`) character. - The rows are separated by a new line (`\n`) character. -You can use `clipboardCopyCellDelimiter` and `unstable_splitClipboardPastedText` props to change the format: +You can use `clipboardCopyCellDelimiter` and `splitClipboardPastedText` props to change the format: ```tsx - text.split('\n').map((row) => row.split(',')) - } + splitClipboardPastedText={(text) => text.split('\n').map((row) => row.split(','))} /> ``` diff --git a/docs/data/data-grid/recipes-editing/BulkEditingNoSnap.js b/docs/data/data-grid/recipes-editing/BulkEditingNoSnap.js index 15d3be0a5775a..64cbfeecdaa7a 100644 --- a/docs/data/data-grid/recipes-editing/BulkEditingNoSnap.js +++ b/docs/data/data-grid/recipes-editing/BulkEditingNoSnap.js @@ -158,8 +158,7 @@ export default function BulkEditingNoSnap() { disableRowSelectionOnClick cellSelection processRowUpdate={processRowUpdate} - experimentalFeatures={{ clipboardPaste: true }} - unstable_ignoreValueFormatterDuringExport + ignoreValueFormatterDuringExport sx={{ '& .MuiDataGrid-row.row--removed': { backgroundColor: (theme) => { diff --git a/docs/data/data-grid/recipes-editing/BulkEditingNoSnap.tsx b/docs/data/data-grid/recipes-editing/BulkEditingNoSnap.tsx index 206a26aa998b7..728b007901149 100644 --- a/docs/data/data-grid/recipes-editing/BulkEditingNoSnap.tsx +++ b/docs/data/data-grid/recipes-editing/BulkEditingNoSnap.tsx @@ -168,8 +168,7 @@ export default function BulkEditingNoSnap() { disableRowSelectionOnClick cellSelection processRowUpdate={processRowUpdate} - experimentalFeatures={{ clipboardPaste: true }} - unstable_ignoreValueFormatterDuringExport + ignoreValueFormatterDuringExport sx={{ '& .MuiDataGrid-row.row--removed': { backgroundColor: (theme) => { 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 70bb276417061..0a1d618185a25 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 @@ -102,6 +102,11 @@ Below are described the steps you need to make to migrate from v6 to v7. - --> +### Clipboard + +- Clipboard paste is now enabled by default. The flag `clipboardPaste` is no longer needed to be passed to the `experimentalFeatures` prop to enable it. +- The clipboard related exports `ignoreValueFormatterDuringExport` and `splitClipboardPastedText` are not anymore prefixed with `unstable_`. + ### Print export - The print export will now only print the selected rows if there are any. 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 a1a26ee31b328..7222120dedd9e 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -79,7 +79,7 @@ "experimentalFeatures": { "type": { "name": "shape", - "description": "{ ariaV7?: bool, clipboardPaste?: bool, columnGrouping?: bool, lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool }" + "description": "{ ariaV7?: bool, columnGrouping?: bool, lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool }" } }, "filterDebounceMs": { "type": { "name": "number" }, "default": "150" }, @@ -177,6 +177,13 @@ }, "hideFooterSelectedRowCount": { "type": { "name": "bool" } }, "ignoreDiacritics": { "type": { "name": "bool" } }, + "ignoreValueFormatterDuringExport": { + "type": { + "name": "union", + "description": "{ clipboardExport?: bool, csvExport?: bool }
| bool" + }, + "default": "false" + }, "initialState": { "type": { "name": "object" } }, "isCellEditable": { "type": { "name": "func" }, @@ -592,6 +599,10 @@ "description": "Array<{ field: string, sort?: 'asc'
| 'desc' }>" } }, + "splitClipboardPastedText": { + "type": { "name": "func" }, + "signature": { "type": "function(text: string) => void", "describedArgs": ["text"] } + }, "sx": { "type": { "name": "union", @@ -601,18 +612,7 @@ }, "throttleRowsMs": { "type": { "name": "number" }, "default": "0" }, "treeData": { "type": { "name": "bool" } }, - "unstable_headerFilters": { "type": { "name": "bool" } }, - "unstable_ignoreValueFormatterDuringExport": { - "type": { - "name": "union", - "description": "{ clipboardExport?: bool, csvExport?: bool }
| bool" - }, - "default": "false" - }, - "unstable_splitClipboardPastedText": { - "type": { "name": "func" }, - "signature": { "type": "function(text: string) => void", "describedArgs": ["text"] } - } + "unstable_headerFilters": { "type": { "name": "bool" } } }, "slots": [ { 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 dbd999b6ea7d3..38d8bab4d3168 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -154,6 +154,13 @@ }, "hideFooterSelectedRowCount": { "type": { "name": "bool" } }, "ignoreDiacritics": { "type": { "name": "bool" } }, + "ignoreValueFormatterDuringExport": { + "type": { + "name": "union", + "description": "{ clipboardExport?: bool, csvExport?: bool }
| bool" + }, + "default": "false" + }, "initialState": { "type": { "name": "object" } }, "isCellEditable": { "type": { "name": "func" }, @@ -543,14 +550,7 @@ }, "throttleRowsMs": { "type": { "name": "number" }, "default": "0" }, "treeData": { "type": { "name": "bool" } }, - "unstable_headerFilters": { "type": { "name": "bool" } }, - "unstable_ignoreValueFormatterDuringExport": { - "type": { - "name": "union", - "description": "{ clipboardExport?: bool, csvExport?: bool }
| bool" - }, - "default": "false" - } + "unstable_headerFilters": { "type": { "name": "bool" } } }, "slots": [ { diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index cf8106fd83e92..299578dfe9e9b 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -105,6 +105,13 @@ "hideFooterPagination": { "type": { "name": "bool" } }, "hideFooterSelectedRowCount": { "type": { "name": "bool" } }, "ignoreDiacritics": { "type": { "name": "bool" } }, + "ignoreValueFormatterDuringExport": { + "type": { + "name": "union", + "description": "{ clipboardExport?: bool, csvExport?: bool }
| bool" + }, + "default": "false" + }, "initialState": { "type": { "name": "object" } }, "isCellEditable": { "type": { "name": "func" }, @@ -415,13 +422,6 @@ "description": "Array<func
| object
| bool>
| func
| object" }, "additionalInfo": { "sx": true } - }, - "unstable_ignoreValueFormatterDuringExport": { - "type": { - "name": "union", - "description": "{ clipboardExport?: bool, csvExport?: bool }
| bool" - }, - "default": "false" } }, "slots": [ diff --git a/docs/translations/api-docs/data-grid/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium.json index 8bdc939ada4d9..a311b0f990199 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium.json @@ -348,6 +348,11 @@ "deprecated": "", "typeDescriptions": {} }, + "ignoreValueFormatterDuringExport": { + "description": "If true, the grid will not use valueFormatter when exporting to CSV or copying to clipboard. If an object is provided, you can choose to ignore the valueFormatter for CSV export or clipboard export.", + "deprecated": "", + "typeDescriptions": {} + }, "initialState": { "description": "The initial state of the DataGridPremium. The data in it is set in the state on initialization but isn't controlled. If one of the data in initialState is also being controlled, then the control state wins.", "deprecated": "", @@ -921,6 +926,11 @@ "deprecated": "", "typeDescriptions": {} }, + "splitClipboardPastedText": { + "description": "The function is used to split the pasted text into rows and cells.", + "deprecated": "", + "typeDescriptions": { "text": "The text pasted from the clipboard." } + }, "sx": { "description": "The system prop that allows defining system overrides as well as additional CSS styles.", "deprecated": "", @@ -940,16 +950,6 @@ "description": "If true, enables the data grid filtering on header feature.", "deprecated": "", "typeDescriptions": {} - }, - "unstable_ignoreValueFormatterDuringExport": { - "description": "If true, the grid will not use valueFormatter when exporting to CSV or copying to clipboard. If an object is provided, you can choose to ignore the valueFormatter for CSV export or clipboard export.", - "deprecated": "", - "typeDescriptions": {} - }, - "unstable_splitClipboardPastedText": { - "description": "The function is used to split the pasted text into rows and cells.", - "deprecated": "", - "typeDescriptions": { "text": "The text pasted from the clipboard." } } }, "classDescriptions": { diff --git a/docs/translations/api-docs/data-grid/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro.json index 933cbc386bae2..71042703b0e0b 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro.json @@ -300,6 +300,11 @@ "deprecated": "", "typeDescriptions": {} }, + "ignoreValueFormatterDuringExport": { + "description": "If true, the grid will not use valueFormatter when exporting to CSV or copying to clipboard. If an object is provided, you can choose to ignore the valueFormatter for CSV export or clipboard export.", + "deprecated": "", + "typeDescriptions": {} + }, "initialState": { "description": "The initial state of the DataGridPro. The data in it will be set in the state on initialization but will not be controlled. If one of the data in initialState is also being controlled, then the control state wins.", "deprecated": "", @@ -843,11 +848,6 @@ "description": "If true, enables the data grid filtering on header feature.", "deprecated": "", "typeDescriptions": {} - }, - "unstable_ignoreValueFormatterDuringExport": { - "description": "If true, the grid will not use valueFormatter when exporting to CSV or copying to clipboard. If an object is provided, you can choose to ignore the valueFormatter for CSV export or clipboard export.", - "deprecated": "", - "typeDescriptions": {} } }, "classDescriptions": { diff --git a/docs/translations/api-docs/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid.json index b3486cd33c78a..9ca32efd6d6e7 100644 --- a/docs/translations/api-docs/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid.json @@ -204,6 +204,11 @@ "deprecated": "", "typeDescriptions": {} }, + "ignoreValueFormatterDuringExport": { + "description": "If true, the grid will not use valueFormatter when exporting to CSV or copying to clipboard. If an object is provided, you can choose to ignore the valueFormatter for CSV export or clipboard export.", + "deprecated": "", + "typeDescriptions": {} + }, "initialState": { "description": "The initial state of the DataGrid. The data in it will be set in the state on initialization but will not be controlled. If one of the data in initialState is also being controlled, then the control state wins.", "deprecated": "", @@ -628,11 +633,6 @@ "description": "The system prop that allows defining system overrides as well as additional CSS styles.", "deprecated": "", "typeDescriptions": {} - }, - "unstable_ignoreValueFormatterDuringExport": { - "description": "If true, the grid will not use valueFormatter when exporting to CSV or copying to clipboard. If an object is provided, you can choose to ignore the valueFormatter for CSV export or clipboard export.", - "deprecated": "", - "typeDescriptions": {} } }, "classDescriptions": { diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index 179711b9cdbd7..a9748de8707b1 100644 --- a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -318,7 +318,6 @@ DataGridPremiumRaw.propTypes = { */ experimentalFeatures: PropTypes.shape({ ariaV7: PropTypes.bool, - clipboardPaste: PropTypes.bool, columnGrouping: PropTypes.bool, lazyLoading: PropTypes.bool, warnIfFocusStateIsNotSynced: PropTypes.bool, @@ -466,6 +465,18 @@ DataGridPremiumRaw.propTypes = { * @default false */ ignoreDiacritics: PropTypes.bool, + /** + * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard. + * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export. + * @default false + */ + ignoreValueFormatterDuringExport: PropTypes.oneOfType([ + PropTypes.shape({ + clipboardExport: PropTypes.bool, + csvExport: PropTypes.bool, + }), + PropTypes.bool, + ]), /** * The initial state of the DataGridPremium. * The data in it is set in the state on initialization but isn't controlled. @@ -997,6 +1008,13 @@ DataGridPremiumRaw.propTypes = { sort: PropTypes.oneOf(['asc', 'desc']), }), ), + /** + * The function is used to split the pasted text into rows and cells. + * @param {string} text The text pasted from the clipboard. + * @returns {string[][] | null} A 2D array of strings. The first dimension is the rows, the second dimension is the columns. + * @default `(pastedText) => { const text = pastedText.replace(/\r?\n$/, ''); return text.split(/\r\n|\n|\r/).map((row) => row.split('\t')); }` + */ + splitClipboardPastedText: PropTypes.func, /** * The system prop that allows defining system overrides as well as additional CSS styles. */ @@ -1021,23 +1039,4 @@ DataGridPremiumRaw.propTypes = { * @default false */ unstable_headerFilters: PropTypes.bool, - /** - * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard. - * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export. - * @default false - */ - unstable_ignoreValueFormatterDuringExport: PropTypes.oneOfType([ - PropTypes.shape({ - clipboardExport: PropTypes.bool, - csvExport: PropTypes.bool, - }), - PropTypes.bool, - ]), - /** - * The function is used to split the pasted text into rows and cells. - * @param {string} text The text pasted from the clipboard. - * @returns {string[][] | null} A 2D array of strings. The first dimension is the rows, the second dimension is the columns. - * @default `(pastedText) => { const text = pastedText.replace(/\r?\n$/, ''); return text.split(/\r\n|\n|\r/).map((row) => row.split('\t')); }` - */ - unstable_splitClipboardPastedText: PropTypes.func, } as any; diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumProps.ts b/packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumProps.ts index 8111c14f23600..ca1c799c21019 100644 --- a/packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumProps.ts +++ b/packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumProps.ts @@ -24,7 +24,7 @@ export const DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES: DataGridPremiumPropsWithDef aggregationRowsScope: 'filtered', getAggregationPosition: (groupNode) => (groupNode.depth === -1 ? 'footer' : 'inline'), disableClipboardPaste: false, - unstable_splitClipboardPastedText: (pastedText) => { + splitClipboardPastedText: (pastedText) => { // Excel on Windows adds an empty line break at the end of the copied text. // See https://github.com/mui/mui-x/issues/9103 const text = pastedText.replace(/\r?\n$/, ''); diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts b/packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts index af5decb904aef..bc0062559120e 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts +++ b/packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts @@ -51,7 +51,7 @@ export const useGridCellSelection = ( | 'onCellSelectionModelChange' | 'pagination' | 'paginationMode' - | 'unstable_ignoreValueFormatterDuringExport' + | 'ignoreValueFormatterDuringExport' | 'clipboardCopyCellDelimiter' >, ) => { @@ -61,7 +61,7 @@ export const useGridCellSelection = ( const mousePosition = React.useRef<{ x: number; y: number } | null>(null); const autoScrollRAF = React.useRef(); - const ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport; + const ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport; const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.clipboardExport diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts b/packages/grid/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts index 38e0bb65921f3..158730522c0cb 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts +++ b/packages/grid/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts @@ -321,19 +321,17 @@ export const useGridClipboardImport = ( | 'getRowId' | 'onClipboardPasteStart' | 'onClipboardPasteEnd' - | 'experimentalFeatures' - | 'unstable_splitClipboardPastedText' + | 'splitClipboardPastedText' | 'disableClipboardPaste' >, ): void => { const processRowUpdate = props.processRowUpdate; const onProcessRowUpdateError = props.onProcessRowUpdateError; const getRowId = props.getRowId; - const enableClipboardPaste = - (!props.disableClipboardPaste && props.experimentalFeatures?.clipboardPaste) ?? false; + const enableClipboardPaste = !props.disableClipboardPaste; const rootEl = apiRef.current.rootElementRef?.current; - const splitClipboardPastedText = props.unstable_splitClipboardPastedText; + const splitClipboardPastedText = props.splitClipboardPastedText; const handlePaste = React.useCallback>( async (params, event) => { diff --git a/packages/grid/x-data-grid-premium/src/models/dataGridPremiumProps.ts b/packages/grid/x-data-grid-premium/src/models/dataGridPremiumProps.ts index bb80cba011bc5..add53ef3b59d4 100644 --- a/packages/grid/x-data-grid-premium/src/models/dataGridPremiumProps.ts +++ b/packages/grid/x-data-grid-premium/src/models/dataGridPremiumProps.ts @@ -23,12 +23,7 @@ import { GridInitialStatePremium } from './gridStatePremium'; import { GridApiPremium } from './gridApiPremium'; import { GridCellSelectionModel } from '../hooks/features/cellSelection'; -export interface GridExperimentalPremiumFeatures extends GridExperimentalProFeatures { - /** - * If `true`, the grid will allow to paste data from clipboard. - */ - clipboardPaste?: boolean; -} +export interface GridExperimentalPremiumFeatures extends GridExperimentalProFeatures {} export interface DataGridPremiumPropsWithComplexDefaultValueBeforeProcessing extends Pick { @@ -121,7 +116,7 @@ export interface DataGridPremiumPropsWithDefaultValue extends DataGridProPropsWi * @returns {string[][] | null} A 2D array of strings. The first dimension is the rows, the second dimension is the columns. * @default `(pastedText) => { const text = pastedText.replace(/\r?\n$/, ''); return text.split(/\r\n|\n|\r/).map((row) => row.split('\t')); }` */ - unstable_splitClipboardPastedText: (text: string) => string[][] | null; + splitClipboardPastedText: (text: string) => string[][] | null; } export interface DataGridPremiumPropsWithoutDefaultValue diff --git a/packages/grid/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx index 070d657ef6ada..efb5aba1f178e 100644 --- a/packages/grid/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx @@ -46,7 +46,6 @@ describe(' - Clipboard', () => { disableRowSelectionOnClick cellSelection disableVirtualization - experimentalFeatures={{ clipboardPaste: true }} /> ); @@ -378,7 +377,6 @@ describe(' - Clipboard', () => { getRowId={(row) => row.customIdField} rowSelection={false} cellSelection - experimentalFeatures={{ clipboardPaste: true }} /> ); @@ -444,7 +442,6 @@ describe(' - Clipboard', () => { getRowId={(row) => row.customIdField} rowSelection={false} cellSelection - experimentalFeatures={{ clipboardPaste: true }} /> ); @@ -494,7 +491,6 @@ describe(' - Clipboard', () => { rows={rows} rowSelection={false} processRowUpdate={processRowUpdateSpy} - experimentalFeatures={{ clipboardPaste: true }} /> ); @@ -536,12 +532,7 @@ describe(' - Clipboard', () => { function Component() { return (
- +
); } @@ -579,7 +570,6 @@ describe(' - Clipboard', () => { rows={rows} rowSelection={false} cellSelection - experimentalFeatures={{ clipboardPaste: true }} disableVirtualization /> @@ -810,12 +800,7 @@ describe(' - Clipboard', () => { function CopyPasteTest(props: DataGridPremiumProps) { return (
- +
); } @@ -1017,16 +1002,14 @@ describe(' - Clipboard', () => { }); }); - it('should use `unstable_splitClipboardPastedText` prop to parse the clipboard string', async () => { + it('should use `splitClipboardPastedText` prop to parse the clipboard string', async () => { const cellDelimiter = ','; const rowDelimiter = ';\n'; const splitClipboardText = (text: string) => text.split(rowDelimiter).map((row) => row.split(cellDelimiter)); - render( - , - ); + render(); const cell = getCell(0, 1); cell.focus(); diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx index 39e2e4fdab1ef..cc26d836eee24 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -417,6 +417,18 @@ DataGridProRaw.propTypes = { * @default false */ ignoreDiacritics: PropTypes.bool, + /** + * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard. + * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export. + * @default false + */ + ignoreValueFormatterDuringExport: PropTypes.oneOfType([ + PropTypes.shape({ + clipboardExport: PropTypes.bool, + csvExport: PropTypes.bool, + }), + PropTypes.bool, + ]), /** * The initial state of the DataGridPro. * The data in it will be set in the state on initialization but will not be controlled. @@ -931,16 +943,4 @@ DataGridProRaw.propTypes = { * @default false */ unstable_headerFilters: PropTypes.bool, - /** - * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard. - * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export. - * @default false - */ - unstable_ignoreValueFormatterDuringExport: PropTypes.oneOfType([ - PropTypes.shape({ - clipboardExport: PropTypes.bool, - csvExport: PropTypes.bool, - }), - PropTypes.bool, - ]), } as any; diff --git a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx index 84ca9bc91d480..92a0c87aeae55 100644 --- a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx +++ b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx @@ -285,6 +285,18 @@ DataGridRaw.propTypes = { * @default false */ ignoreDiacritics: PropTypes.bool, + /** + * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard. + * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export. + * @default false + */ + ignoreValueFormatterDuringExport: PropTypes.oneOfType([ + PropTypes.shape({ + clipboardExport: PropTypes.bool, + csvExport: PropTypes.bool, + }), + PropTypes.bool, + ]), /** * The initial state of the DataGrid. * The data in it will be set in the state on initialization but will not be controlled. @@ -700,16 +712,4 @@ DataGridRaw.propTypes = { PropTypes.func, PropTypes.object, ]), - /** - * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard. - * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export. - * @default false - */ - unstable_ignoreValueFormatterDuringExport: PropTypes.oneOfType([ - PropTypes.shape({ - clipboardExport: PropTypes.bool, - csvExport: PropTypes.bool, - }), - PropTypes.bool, - ]), } as any; diff --git a/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts b/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts index 57bf123e18980..6a59c12d8ac77 100644 --- a/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts +++ b/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts @@ -74,7 +74,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES: DataGridPropsWithDefaultValues = { disableColumnResize: false, keepNonExistentRowsSelected: false, keepColumnPositionIfDraggedOutside: false, - unstable_ignoreValueFormatterDuringExport: false, + ignoreValueFormatterDuringExport: false, clipboardCopyCellDelimiter: '\t', rowPositionsDebounceMs: 166, }; diff --git a/packages/grid/x-data-grid/src/hooks/features/clipboard/useGridClipboard.ts b/packages/grid/x-data-grid/src/hooks/features/clipboard/useGridClipboard.ts index 38cc084886e09..0acc23c0b2e41 100644 --- a/packages/grid/x-data-grid/src/hooks/features/clipboard/useGridClipboard.ts +++ b/packages/grid/x-data-grid/src/hooks/features/clipboard/useGridClipboard.ts @@ -61,10 +61,10 @@ export const useGridClipboard = ( apiRef: React.MutableRefObject, props: Pick< DataGridProcessedProps, - 'unstable_ignoreValueFormatterDuringExport' | 'onClipboardCopy' | 'clipboardCopyCellDelimiter' + 'ignoreValueFormatterDuringExport' | 'onClipboardCopy' | 'clipboardCopyCellDelimiter' >, ): void => { - const ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport; + const ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport; const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.clipboardExport diff --git a/packages/grid/x-data-grid/src/hooks/features/export/useGridCsvExport.tsx b/packages/grid/x-data-grid/src/hooks/features/export/useGridCsvExport.tsx index 3f54ba00d0650..8f5291a365df6 100644 --- a/packages/grid/x-data-grid/src/hooks/features/export/useGridCsvExport.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/export/useGridCsvExport.tsx @@ -23,11 +23,11 @@ import type { DataGridProcessedProps } from '../../../models/props/DataGridProps */ export const useGridCsvExport = ( apiRef: React.MutableRefObject, - props: Pick, + props: Pick, ): void => { const logger = useGridLogger(apiRef, 'useGridCsvExport'); - const ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport; + const ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport; const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.csvExport diff --git a/packages/grid/x-data-grid/src/models/props/DataGridProps.ts b/packages/grid/x-data-grid/src/models/props/DataGridProps.ts index 31c3c31728514..025032c1f4b59 100644 --- a/packages/grid/x-data-grid/src/models/props/DataGridProps.ts +++ b/packages/grid/x-data-grid/src/models/props/DataGridProps.ts @@ -360,7 +360,7 @@ export interface DataGridPropsWithDefaultValues { * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export. * @default false */ - unstable_ignoreValueFormatterDuringExport: + ignoreValueFormatterDuringExport: | boolean | { csvExport?: boolean;