Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DataGridPremium] Make clipboard paste feature stable #11248

Merged
merged 8 commits into from
Dec 1, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/data/data-grid/clipboard/ClipboardCopy.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}>
Expand Down
2 changes: 1 addition & 1 deletion docs/data/data-grid/clipboard/ClipboardCopy.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}>
Expand Down
3 changes: 1 addition & 2 deletions docs/data/data-grid/clipboard/ClipboardPaste.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,8 @@ export default function ClipboardPaste() {
initialState={initialState}
checkboxSelection
disableRowSelectionOnClick
ignoreValueFormatterDuringExport
cellSelection
experimentalFeatures={{ clipboardPaste: true }}
unstable_ignoreValueFormatterDuringExport
/>
</div>
);
Expand Down
3 changes: 1 addition & 2 deletions docs/data/data-grid/clipboard/ClipboardPaste.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,8 @@ export default function ClipboardPaste() {
initialState={initialState}
checkboxSelection
disableRowSelectionOnClick
ignoreValueFormatterDuringExport
cellSelection
experimentalFeatures={{ clipboardPaste: true }}
unstable_ignoreValueFormatterDuringExport
/>
</div>
);
Expand Down
3 changes: 1 addition & 2 deletions docs/data/data-grid/clipboard/ClipboardPaste.tsx.preview
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
initialState={initialState}
checkboxSelection
disableRowSelectionOnClick
ignoreValueFormatterDuringExport
cellSelection
experimentalFeatures={{ clipboardPaste: true }}
unstable_ignoreValueFormatterDuringExport
/>
5 changes: 2 additions & 3 deletions docs/data/data-grid/clipboard/ClipboardPasteDelimiter.js
Original file line number Diff line number Diff line change
Expand Up @@ -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(','))
}
/>
Expand Down
5 changes: 2 additions & 3 deletions docs/data/data-grid/clipboard/ClipboardPasteDelimiter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(','))
}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(','))
}
/>
6 changes: 1 addition & 5 deletions docs/data/data-grid/clipboard/ClipboardPasteDisabled.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
6 changes: 1 addition & 5 deletions docs/data/data-grid/clipboard/ClipboardPasteDisabled.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Original file line number Diff line number Diff line change
@@ -1,5 +1 @@
<DataGridPremium
{...data}
experimentalFeatures={{ clipboardPaste: true }}
disableClipboardPaste
/>
<DataGridPremium {...data} disableClipboardPaste />
3 changes: 1 addition & 2 deletions docs/data/data-grid/clipboard/ClipboardPasteEvents.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,7 @@ export default function ClipboardPasteEvents() {
processRowUpdate={processRowUpdate}
onClipboardPasteStart={() => setLoading(true)}
onClipboardPasteEnd={() => setLoading(false)}
experimentalFeatures={{ clipboardPaste: true }}
unstable_ignoreValueFormatterDuringExport
ignoreValueFormatterDuringExport
/>
</div>
);
Expand Down
3 changes: 1 addition & 2 deletions docs/data/data-grid/clipboard/ClipboardPasteEvents.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,7 @@ export default function ClipboardPasteEvents() {
processRowUpdate={processRowUpdate}
onClipboardPasteStart={() => setLoading(true)}
onClipboardPasteEnd={() => setLoading(false)}
experimentalFeatures={{ clipboardPaste: true }}
unstable_ignoreValueFormatterDuringExport
ignoreValueFormatterDuringExport
/>
</div>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,5 @@
processRowUpdate={processRowUpdate}
onClipboardPasteStart={() => setLoading(true)}
onClipboardPasteEnd={() => setLoading(false)}
experimentalFeatures={{ clipboardPaste: true }}
unstable_ignoreValueFormatterDuringExport
ignoreValueFormatterDuringExport
/>
3 changes: 1 addition & 2 deletions docs/data/data-grid/clipboard/ClipboardPastePersistence.js
Original file line number Diff line number Diff line change
Expand Up @@ -252,8 +252,7 @@ export default function ClipboardPastePersistence() {
checkboxSelection
cellSelection
processRowUpdate={processRowUpdate}
experimentalFeatures={{ clipboardPaste: true }}
unstable_ignoreValueFormatterDuringExport
ignoreValueFormatterDuringExport
/>
</div>
</div>
Expand Down
3 changes: 1 addition & 2 deletions docs/data/data-grid/clipboard/ClipboardPastePersistence.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -258,8 +258,7 @@ export default function ClipboardPastePersistence() {
checkboxSelection
cellSelection
processRowUpdate={processRowUpdate}
experimentalFeatures={{ clipboardPaste: true }}
unstable_ignoreValueFormatterDuringExport
ignoreValueFormatterDuringExport
/>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
checkboxSelection
cellSelection
processRowUpdate={processRowUpdate}
experimentalFeatures={{ clipboardPaste: true }}
unstable_ignoreValueFormatterDuringExport
ignoreValueFormatterDuringExport
/>
</div>
17 changes: 5 additions & 12 deletions docs/data/data-grid/clipboard/clipboard.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
```

:::
Expand Down Expand Up @@ -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(','))}
/>
```

Expand Down
3 changes: 1 addition & 2 deletions docs/data/data-grid/recipes-editing/BulkEditingNoSnap.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
3 changes: 1 addition & 2 deletions docs/data/data-grid/recipes-editing/BulkEditingNoSnap.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
26 changes: 13 additions & 13 deletions docs/pages/x/api/data-grid/data-grid-premium.json
Original file line number Diff line number Diff line change
Expand Up @@ -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" },
Expand Down Expand Up @@ -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" },
Expand Down Expand Up @@ -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",
Expand All @@ -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": [
{
Expand Down
16 changes: 8 additions & 8 deletions docs/pages/x/api/data-grid/data-grid-pro.json
Original file line number Diff line number Diff line change
Expand Up @@ -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" },
Expand Down Expand Up @@ -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": [
{
Expand Down
14 changes: 7 additions & 7 deletions docs/pages/x/api/data-grid/data-grid.json
Original file line number Diff line number Diff line change
Expand Up @@ -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" },
Expand Down Expand Up @@ -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": [
Expand Down
Loading