[DataGridPremium] Make clipboard paste feature stable (mui#11248)

Signed-off-by: Bilal Shafi <[email protected]>
DanailH · Dec 1, 2023 · a48961b · a48961b
1 parent 66cf56c
commit a48961b
Show file tree

Hide file tree

Showing 39 changed files with 141 additions and 194 deletions.
diff --git 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
         />
       </div>
       <Alert severity="info" sx={{ width: '100%', mt: 1 }}>

diff --git 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
         />
       </div>
       <Alert severity="info" sx={{ width: '100%', mt: 1 }}>

diff --git 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
       />
     </div>
   );

diff --git 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
       />
     </div>
   );

diff --git 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
 />
diff --git 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
@@ -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
@@ -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(','))
   }
 />
diff --git 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 (
     <div style={{ height: 400, width: '100%' }}>
-      <DataGridPremium
-        {...data}
-        experimentalFeatures={{ clipboardPaste: true }}
-        disableClipboardPaste
-      />
+      <DataGridPremium {...data} disableClipboardPaste />
     </div>
   );
 }
diff --git 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 (
     <div style={{ height: 400, width: '100%' }}>
-      <DataGridPremium
-        {...data}
-        experimentalFeatures={{ clipboardPaste: true }}
-        disableClipboardPaste
-      />
+      <DataGridPremium {...data} disableClipboardPaste />
     </div>
   );
 }
diff --git a/docs/data/data-grid/clipboard/ClipboardPasteDisabled.tsx.preview b/docs/data/data-grid/clipboard/ClipboardPasteDisabled.tsx.preview
@@ -1,5 +1 @@
-<DataGridPremium
-  {...data}
-  experimentalFeatures={{ clipboardPaste: true }}
-  disableClipboardPaste
-/>
+<DataGridPremium {...data} disableClipboardPaste />
diff --git 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
       />
     </div>
   );

diff --git 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
       />
     </div>
   );

diff --git 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
 />
diff --git 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
         />
       </div>
     </div>

diff --git 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
         />
       </div>
     </div>

diff --git 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
   />
 </div>
diff --git 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
-<DataGridPremium
-  experimentalFeatures={{ clipboardPaste: true }}
-  unstable_ignoreValueFormatterDuringExport
-/>
+<DataGridPremium ignoreValueFormatterDuringExport />
 ```
 
 :::
@@ -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
 <DataGridPremium
   {...otherProps}
   // support comma separated values
   clipboardCopyCellDelimiter={','}
-  unstable_splitClipboardPastedText={(text) =>
-    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
@@ -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
@@ -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
@@ -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
@@ -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 }<br>&#124;&nbsp;bool"
+      },
+      "default": "false"
+    },
     "initialState": { "type": { "name": "object" } },
     "isCellEditable": {
       "type": { "name": "func" },
@@ -592,6 +599,10 @@
         "description": "Array&lt;{ field: string, sort?: 'asc'<br>&#124;&nbsp;'desc' }&gt;"
       }
     },
+    "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 }<br>&#124;&nbsp;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
@@ -154,6 +154,13 @@
     },
     "hideFooterSelectedRowCount": { "type": { "name": "bool" } },
     "ignoreDiacritics": { "type": { "name": "bool" } },
+    "ignoreValueFormatterDuringExport": {
+      "type": {
+        "name": "union",
+        "description": "{ clipboardExport?: bool, csvExport?: bool }<br>&#124;&nbsp;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 }<br>&#124;&nbsp;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
@@ -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 }<br>&#124;&nbsp;bool"
+      },
+      "default": "false"
+    },
     "initialState": { "type": { "name": "object" } },
     "isCellEditable": {
       "type": { "name": "func" },
@@ -415,13 +422,6 @@
         "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
       },
       "additionalInfo": { "sx": true }
-    },
-    "unstable_ignoreValueFormatterDuringExport": {
-      "type": {
-        "name": "union",
-        "description": "{ clipboardExport?: bool, csvExport?: bool }<br>&#124;&nbsp;bool"
-      },
-      "default": "false"
     }
   },
   "slots": [