From 89c3137e9a6b19e0c178250afa6172d9999dfd96 Mon Sep 17 00:00:00 2001 From: Lukas Date: Fri, 24 Feb 2023 13:37:15 +0200 Subject: [PATCH 01/24] [pickers] Document and deprecate `onClose` callback on static pickers (#8021) --- docs/pages/x/api/date-pickers/static-date-picker.json | 5 +++++ docs/pages/x/api/date-pickers/static-date-range-picker.json | 5 +++++ docs/pages/x/api/date-pickers/static-date-time-picker.json | 5 +++++ docs/pages/x/api/date-pickers/static-time-picker.json | 5 +++++ .../api-docs/date-pickers/static-date-picker.json | 1 + .../api-docs/date-pickers/static-date-range-picker.json | 1 + .../api-docs/date-pickers/static-date-time-picker.json | 1 + .../api-docs/date-pickers/static-time-picker.json | 1 + .../src/StaticDateRangePicker/StaticDateRangePicker.tsx | 6 ++++++ .../src/StaticDatePicker/StaticDatePicker.tsx | 6 ++++++ .../src/StaticDateTimePicker/StaticDateTimePicker.tsx | 6 ++++++ .../src/StaticTimePicker/StaticTimePicker.tsx | 6 ++++++ .../hooks/useStaticPicker/useStaticPicker.types.ts | 6 ++++++ 13 files changed, 54 insertions(+) diff --git a/docs/pages/x/api/date-pickers/static-date-picker.json b/docs/pages/x/api/date-pickers/static-date-picker.json index 36851e0f3dad2..f3397cd1a3583 100644 --- a/docs/pages/x/api/date-pickers/static-date-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-picker.json @@ -40,6 +40,11 @@ }, "onAccept": { "type": { "name": "func" } }, "onChange": { "type": { "name": "func" } }, + "onClose": { + "type": { "name": "func" }, + "deprecated": true, + "deprecationInfo": "Please avoid using as it will be removed in next major version." + }, "onError": { "type": { "name": "func" } }, "onMonthChange": { "type": { "name": "func" } }, "onViewChange": { "type": { "name": "func" } }, diff --git a/docs/pages/x/api/date-pickers/static-date-range-picker.json b/docs/pages/x/api/date-pickers/static-date-range-picker.json index ca4dd6042e7dd..f108610e6178d 100644 --- a/docs/pages/x/api/date-pickers/static-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-range-picker.json @@ -46,6 +46,11 @@ "minDate": { "type": { "name": "any" } }, "onAccept": { "type": { "name": "func" } }, "onChange": { "type": { "name": "func" } }, + "onClose": { + "type": { "name": "func" }, + "deprecated": true, + "deprecationInfo": "Please avoid using as it will be removed in next major version." + }, "onError": { "type": { "name": "func" } }, "onMonthChange": { "type": { "name": "func" } }, "onRangePositionChange": { "type": { "name": "func" } }, diff --git a/docs/pages/x/api/date-pickers/static-date-time-picker.json b/docs/pages/x/api/date-pickers/static-date-time-picker.json index 7e913b78325b5..00bc94cc06a24 100644 --- a/docs/pages/x/api/date-pickers/static-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-time-picker.json @@ -48,6 +48,11 @@ }, "onAccept": { "type": { "name": "func" } }, "onChange": { "type": { "name": "func" } }, + "onClose": { + "type": { "name": "func" }, + "deprecated": true, + "deprecationInfo": "Please avoid using as it will be removed in next major version." + }, "onError": { "type": { "name": "func" } }, "onMonthChange": { "type": { "name": "func" } }, "onViewChange": { "type": { "name": "func" } }, diff --git a/docs/pages/x/api/date-pickers/static-time-picker.json b/docs/pages/x/api/date-pickers/static-time-picker.json index b0972e6a9c5ce..62317e7a06e17 100644 --- a/docs/pages/x/api/date-pickers/static-time-picker.json +++ b/docs/pages/x/api/date-pickers/static-time-picker.json @@ -31,6 +31,11 @@ "minutesStep": { "type": { "name": "number" }, "default": "1" }, "onAccept": { "type": { "name": "func" } }, "onChange": { "type": { "name": "func" } }, + "onClose": { + "type": { "name": "func" }, + "deprecated": true, + "deprecationInfo": "Please avoid using as it will be removed in next major version." + }, "onError": { "type": { "name": "func" } }, "onViewChange": { "type": { "name": "func" } }, "openTo": { diff --git a/docs/translations/api-docs/date-pickers/static-date-picker.json b/docs/translations/api-docs/date-pickers/static-date-picker.json index 99aca0be2ae85..7d56d312bafee 100644 --- a/docs/translations/api-docs/date-pickers/static-date-picker.json +++ b/docs/translations/api-docs/date-pickers/static-date-picker.json @@ -22,6 +22,7 @@ "monthsPerRow": "Months rendered per row.", "onAccept": "Callback fired when the value is accepted.

Signature:
function(value: TValue) => void
value: The value that was just accepted.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, context: FieldChangeHandlerContext<TError>) => void
value: The new value.
context: The context containing the validation result of the current value.", + "onClose": "Callback fired when component requests to be closed. Can be fired when selecting (by default on desktop mode) or clearing a value.", "onError": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the TextField will be rendered in error state.

Signature:
function(error: TError, value: TValue) => void
error: The new error describing why the current value is not valid.
value: The value associated to the error.", "onMonthChange": "Callback fired on month change.

Signature:
function(month: TDate) => void
month: The new month.", "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", diff --git a/docs/translations/api-docs/date-pickers/static-date-range-picker.json b/docs/translations/api-docs/date-pickers/static-date-range-picker.json index 7acfca3bd3819..c717dfabe5c20 100644 --- a/docs/translations/api-docs/date-pickers/static-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/static-date-range-picker.json @@ -25,6 +25,7 @@ "minDate": "Minimal selectable date.", "onAccept": "Callback fired when the value is accepted.

Signature:
function(value: TValue) => void
value: The value that was just accepted.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, context: FieldChangeHandlerContext<TError>) => void
value: The new value.
context: The context containing the validation result of the current value.", + "onClose": "Callback fired when component requests to be closed. Can be fired when selecting (by default on desktop mode) or clearing a value.", "onError": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the TextField will be rendered in error state.

Signature:
function(error: TError, value: TValue) => void
error: The new error describing why the current value is not valid.
value: The value associated to the error.", "onMonthChange": "Callback fired on month change.

Signature:
function(month: TDate) => void
month: The new month.", "onRangePositionChange": "Callback fired when the range position changes.

Signature:
function(rangePosition: RangePosition) => void
rangePosition: The new range position.", diff --git a/docs/translations/api-docs/date-pickers/static-date-time-picker.json b/docs/translations/api-docs/date-pickers/static-date-time-picker.json index 961816dc4a0d2..09f7b8b684f69 100644 --- a/docs/translations/api-docs/date-pickers/static-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/static-date-time-picker.json @@ -30,6 +30,7 @@ "monthsPerRow": "Months rendered per row.", "onAccept": "Callback fired when the value is accepted.

Signature:
function(value: TValue) => void
value: The value that was just accepted.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, context: FieldChangeHandlerContext<TError>) => void
value: The new value.
context: The context containing the validation result of the current value.", + "onClose": "Callback fired when component requests to be closed. Can be fired when selecting (by default on desktop mode) or clearing a value.", "onError": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the TextField will be rendered in error state.

Signature:
function(error: TError, value: TValue) => void
error: The new error describing why the current value is not valid.
value: The value associated to the error.", "onMonthChange": "Callback fired on month change.

Signature:
function(month: TDate) => void
month: The new month.", "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", diff --git a/docs/translations/api-docs/date-pickers/static-time-picker.json b/docs/translations/api-docs/date-pickers/static-time-picker.json index d4b64ca889334..07453d2f64252 100644 --- a/docs/translations/api-docs/date-pickers/static-time-picker.json +++ b/docs/translations/api-docs/date-pickers/static-time-picker.json @@ -19,6 +19,7 @@ "minutesStep": "Step over minutes.", "onAccept": "Callback fired when the value is accepted.

Signature:
function(value: TValue) => void
value: The value that was just accepted.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, context: FieldChangeHandlerContext<TError>) => void
value: The new value.
context: The context containing the validation result of the current value.", + "onClose": "Callback fired when component requests to be closed. Can be fired when selecting (by default on desktop mode) or clearing a value.", "onError": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the TextField will be rendered in error state.

Signature:
function(error: TError, value: TValue) => void
error: The new error describing why the current value is not valid.
value: The value associated to the error.", "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", diff --git a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx index 99479f87a920f..ea1e1e6401e8f 100644 --- a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx @@ -189,6 +189,12 @@ StaticDateRangePicker.propTypes = { * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, + /** + * Callback fired when component requests to be closed. + * Can be fired when selecting (by default on `desktop` mode) or clearing a value. + * @deprecated Please avoid using as it will be removed in next major version. + */ + onClose: PropTypes.func, /** * Callback fired when the error associated to the current value changes. * If the error has a non-null value, then the `TextField` will be rendered in `error` state. diff --git a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx index 25b55d5c993ab..e0fd3a097f2c0 100644 --- a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx +++ b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx @@ -172,6 +172,12 @@ StaticDatePicker.propTypes = { * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, + /** + * Callback fired when component requests to be closed. + * Can be fired when selecting (by default on `desktop` mode) or clearing a value. + * @deprecated Please avoid using as it will be removed in next major version. + */ + onClose: PropTypes.func, /** * Callback fired when the error associated to the current value changes. * If the error has a non-null value, then the `TextField` will be rendered in `error` state. diff --git a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx index d3206b0535608..618ba6df30cf1 100644 --- a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx +++ b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx @@ -219,6 +219,12 @@ StaticDateTimePicker.propTypes = { * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, + /** + * Callback fired when component requests to be closed. + * Can be fired when selecting (by default on `desktop` mode) or clearing a value. + * @deprecated Please avoid using as it will be removed in next major version. + */ + onClose: PropTypes.func, /** * Callback fired when the error associated to the current value changes. * If the error has a non-null value, then the `TextField` will be rendered in `error` state. diff --git a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx index bcd3df4bb6482..287b4399d45ea 100644 --- a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx +++ b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx @@ -157,6 +157,12 @@ StaticTimePicker.propTypes = { * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, + /** + * Callback fired when component requests to be closed. + * Can be fired when selecting (by default on `desktop` mode) or clearing a value. + * @deprecated Please avoid using as it will be removed in next major version. + */ + onClose: PropTypes.func, /** * Callback fired when the error associated to the current value changes. * If the error has a non-null value, then the `TextField` will be rendered in `error` state. diff --git a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.types.ts index 3c16865962063..8aa9b6e41dd71 100644 --- a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.types.ts @@ -25,6 +25,12 @@ export interface StaticOnlyPickerProps { * If `true`, the view is focused during the first mount. */ autoFocus?: boolean; + /** + * Callback fired when component requests to be closed. + * Can be fired when selecting (by default on `desktop` mode) or clearing a value. + * @deprecated Please avoid using as it will be removed in next major version. + */ + onClose?: () => void; } export interface UseStaticPickerProps< From 9340be6f4019573a8dc4efc4a195825e4dfe709a Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Fri, 24 Feb 2023 20:27:49 +0200 Subject: [PATCH 02/24] Update esES.ts Signed-off-by: Andrew Cherniavskii --- packages/grid/x-data-grid/src/locales/esES.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid/src/locales/esES.ts b/packages/grid/x-data-grid/src/locales/esES.ts index aa8c97afbd6ba..78c4840b62b5a 100644 --- a/packages/grid/x-data-grid/src/locales/esES.ts +++ b/packages/grid/x-data-grid/src/locales/esES.ts @@ -41,7 +41,7 @@ const esESGrid: Partial = { // Columns panel text columnsPanelTextFieldLabel: 'Columna de búsqueda', columnsPanelTextFieldPlaceholder: 'Título de columna', - columnsPanelDragIconLabel: 'Reorder columna', + columnsPanelDragIconLabel: 'Reordenar columna', columnsPanelShowAllButton: 'Mostrar todo', columnsPanelHideAllButton: 'Ocultar todo', From c6830a5376a71717f8a59b5d13d8d202eedd9392 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 25 Feb 2023 18:17:01 +0100 Subject: [PATCH 03/24] [docs] Update Accessibility to be more up to date (#7970) --- .../data/data-grid/accessibility/accessibility.md | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/docs/data/data-grid/accessibility/accessibility.md b/docs/data/data-grid/accessibility/accessibility.md index 854b36901a055..c778621609770 100644 --- a/docs/data/data-grid/accessibility/accessibility.md +++ b/docs/data/data-grid/accessibility/accessibility.md @@ -6,14 +6,17 @@ The most commonly encountered conformance guidelines for accessibility are: -- [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) - Globally accepted standard -- [ADA](https://www.ada.gov/) - US Department of Justice -- [Section 508](https://www.section508.gov/) - US federal agencies +- Globally accepted standard: [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) +- US: + - [ADA](https://www.ada.gov/) - US Department of Justice + - [Section 508](https://www.section508.gov/) - US federal agencies +- Europe: [EAA](https://ec.europa.eu/social/main.jsp?catId=1202) (European Accessibility Act) -WCAG 2.0 has three levels of conformance: A, AA, and AAA. -Level AA matches the ADA and Section 508 guidelines, so this is the most common target for organizations to aim for. +WCAG 2.1 has three levels of conformance: A, AA, and AAA. +Level AA meet the most commonly encountered conformance guidelines. +This is the most common target for organizations so what MUI aims to support very well. -The [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) provide valuable information on how to optimize the accessibility of a grid. +The [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) provide valuable information on how to optimize the accessibility of a data grid. ## Density From 16b0165762fc3e5ed6cee1ef9c6b8d2e453cbff2 Mon Sep 17 00:00:00 2001 From: Arun Rao Date: Sun, 26 Feb 2023 09:28:28 +0100 Subject: [PATCH 04/24] [docs] Clarify the MIT license restriction for grid pagination (#8045) Signed-off-by: Arun Rao Co-authored-by: Olivier Tassinari --- docs/data/data-grid/pagination/pagination.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/data-grid/pagination/pagination.md b/docs/data/data-grid/pagination/pagination.md index 495282ee98e3b..0668ec573a8cb 100644 --- a/docs/data/data-grid/pagination/pagination.md +++ b/docs/data/data-grid/pagination/pagination.md @@ -12,7 +12,7 @@ The default pagination behavior depends on your plan. ## Size of the page -The MIT `DataGrid` is limited to pages of up to 100 rows. +The `DataGrid` (MIT license) is limited to pages of up to 100 rows. If you want larger pages, you will need to upgrade to [Pro plan](/x/introduction/licensing/#pro-plan) or above. By default, each page contains 100 rows. The user can change the size of the page through the selector in the footer. From a86c3c9fef1c69781bc6574d3e6d223355ebfc6d Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Mon, 27 Feb 2023 15:38:42 +0100 Subject: [PATCH 05/24] [core] Add modified docs page links in the PR (#7848) Co-authored-by: Matheus Wichman --- dangerfile.js | 48 +++++++++++++++++-- docs/data/data-grid/editing/editing.md | 2 + .../custom-components/custom-components.md | 2 + 3 files changed, 49 insertions(+), 3 deletions(-) diff --git a/dangerfile.js b/dangerfile.js index a07fa0d0baaaa..6ab8e1eae667f 100644 --- a/dangerfile.js +++ b/dangerfile.js @@ -1,4 +1,4 @@ -const { markdown, message } = require('danger'); +const { danger, markdown } = require('danger'); const fse = require('fs-extra'); const path = require('path'); const prettier = require('prettier'); @@ -35,9 +35,51 @@ ${headers}\n`; markdown(prettier.format(text, { prettierConfig, parser: 'markdown' })); } +function addDeployPreviewUrls() { + /** + * The incoming docsPath from danger does not start with `/` + * e.g. ['docs/data/data-grid/editing/editing.md'] + */ + function formatFileToLink(docsPath) { + const url = docsPath.replace('docs/data', 'x/').replace(/\/[^/]+\.md$/, '/'); + + return url + .replace('data-grid/', 'react-data-grid/') + .replace('date-pickers/', 'react-date-pickers/') + .replace(/\/[^/]+\.md$/, '/'); + } + + const netlifyPreview = `https://deploy-preview-${danger.github.pr.number}--material-ui-x.netlify.app/`; + + const files = [...danger.git.created_files, ...danger.git.modified_files]; + + // limit to the first 5 docs + const docs = files + .filter((file) => file.startsWith('docs/data') && file.endsWith('.md')) + .slice(0, 5); + + markdown(` +## Netlify deploy preview + +Netlify deploy preview: ${netlifyPreview} + +### Updated pages + +${ + docs.length + ? docs + .map((docsPath) => { + const formattedUrl = formatFileToLink(docsPath); + return `- [${docsPath}](${netlifyPreview}${formattedUrl})`; + }) + .join('\n') + : 'No updates.' +} +`); +} + async function run() { - const netlifyPreview = `https://deploy-preview-${process.env.CIRCLE_PR_NUMBER}--material-ui-x.netlify.app/`; - message(`Netlify deploy preview: ${netlifyPreview}`); + addDeployPreviewUrls(); switch (dangerCommand) { case 'reportPerformance': diff --git a/docs/data/data-grid/editing/editing.md b/docs/data/data-grid/editing/editing.md index 7a99150ea0dcf..627957c782642 100644 --- a/docs/data/data-grid/editing/editing.md +++ b/docs/data/data-grid/editing/editing.md @@ -2,6 +2,8 @@

The data grid has built-in support for cell and row editing.

+## New test section + ## Making a column editable You can make a column editable by enabling the `editable` property in its [column definition](/x/api/data-grid/grid-col-def/): diff --git a/docs/data/date-pickers/custom-components/custom-components.md b/docs/data/date-pickers/custom-components/custom-components.md index b9c8877faf2e6..49774e412ca69 100644 --- a/docs/data/date-pickers/custom-components/custom-components.md +++ b/docs/data/date-pickers/custom-components/custom-components.md @@ -13,6 +13,8 @@ The components that can be customized are listed under `slots` section in Date a For example, available Date Picker slots can be found [here](/x/api/date-pickers/date-picker/#slots). ::: +## New test section + ## Overriding components You can override the internal elements of the component (known as "slots") using the `slots` prop. From aed59d8247177c80997b3c9cc08461763deeae01 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Mon, 27 Feb 2023 16:31:54 +0100 Subject: [PATCH 06/24] [core] Add test on value timezone (#7867) Co-authored-by: Lukas --- .../tests/timezone.DateTimeField.test.tsx | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx diff --git a/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx b/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx new file mode 100644 index 0000000000000..7edfd48ebdb26 --- /dev/null +++ b/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +import { DateTimeField } from '@mui/x-date-pickers/DateTimeField'; +import { screen } from '@mui/monorepo/test/utils'; +import { createPickerRenderer, expectInputValue } from 'test/utils/pickers-utils'; + +describe(' - TimeZone', () => { + describe('Value time-zone modification - Luxon', () => { + const { render, adapter } = createPickerRenderer({ clock: 'fake', adapterName: 'luxon' }); + it('should update the field when time zone changes (timestamp remains the same)', () => { + const { setProps } = render(); + const input = screen.getByRole('textbox'); + + const date = adapter.date(new Date('2020-06-18T14:30:10.000Z')).setZone('UTC'); + setProps({ value: date }); + + expectInputValue(input, '6 / 18 / 2020 02:30 PM'); + + setProps({ value: date.setZone('America/Los_Angeles') }); + + expectInputValue(input, '6 / 18 / 2020 07:30 AM'); + }); + }); +}); From f1716c7a1e6063dad0ef51ad1978ce58b0c0c14f Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 27 Feb 2023 16:35:07 +0100 Subject: [PATCH 07/24] [pickers] Increase min `moment` peer dependency version (#8046) --- packages/x-date-pickers-pro/package.json | 2 +- packages/x-date-pickers/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/x-date-pickers-pro/package.json b/packages/x-date-pickers-pro/package.json index bf5d317f9f15d..81004fb51ed87 100644 --- a/packages/x-date-pickers-pro/package.json +++ b/packages/x-date-pickers-pro/package.json @@ -59,7 +59,7 @@ "date-fns": "^2.25.0", "dayjs": "^1.10.7", "luxon": "^3.0.2", - "moment": "^2.29.1", + "moment": "^2.29.4", "react": "^17.0.2 || ^18.0.0", "react-dom": "^17.0.2 || ^18.0.0" }, diff --git a/packages/x-date-pickers/package.json b/packages/x-date-pickers/package.json index 2a47864fee0f3..5617cbe0a78ac 100644 --- a/packages/x-date-pickers/package.json +++ b/packages/x-date-pickers/package.json @@ -68,7 +68,7 @@ "date-fns-jalali": "^2.13.0-0", "dayjs": "^1.10.7", "luxon": "^3.0.2", - "moment": "^2.29.1", + "moment": "^2.29.4", "moment-hijri": "^2.1.2", "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0", "react": "^17.0.2 || ^18.0.0", From a1d03101992d55579595b6327c66a40eae28d170 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Mon, 27 Feb 2023 22:46:35 +0500 Subject: [PATCH 08/24] [DataGridPro] Improve typing for `getColumnForNewFilter` method (#8043) --- .../filtering/DisableMultiFiltersDataGridPro.js | 2 +- .../filtering/DisableMultiFiltersDataGridPro.tsx | 2 +- .../src/tests/filtering.DataGridPro.test.tsx | 2 +- .../panel/filterPanel/GridFilterPanel.tsx | 14 +++++++++++--- 4 files changed, 14 insertions(+), 6 deletions(-) diff --git a/docs/data/data-grid/filtering/DisableMultiFiltersDataGridPro.js b/docs/data/data-grid/filtering/DisableMultiFiltersDataGridPro.js index 74aa5712500c8..43358973e6330 100644 --- a/docs/data/data-grid/filtering/DisableMultiFiltersDataGridPro.js +++ b/docs/data/data-grid/filtering/DisableMultiFiltersDataGridPro.js @@ -30,7 +30,7 @@ export default function DisableMultiFiltersDataGridPro() { (colDef) => colDef.filterable && !filteredFields.includes(colDef.field), ) .find((colDef) => colDef.filterOperators?.length); - return columnForNewFilter?.field; + return columnForNewFilter?.field ?? null; }; return ( diff --git a/docs/data/data-grid/filtering/DisableMultiFiltersDataGridPro.tsx b/docs/data/data-grid/filtering/DisableMultiFiltersDataGridPro.tsx index 27ec90b72c422..8b338186018d4 100644 --- a/docs/data/data-grid/filtering/DisableMultiFiltersDataGridPro.tsx +++ b/docs/data/data-grid/filtering/DisableMultiFiltersDataGridPro.tsx @@ -38,7 +38,7 @@ export default function DisableMultiFiltersDataGridPro() { (colDef) => colDef.filterable && !filteredFields.includes(colDef.field), ) .find((colDef) => colDef.filterOperators?.length); - return columnForNewFilter?.field; + return columnForNewFilter?.field ?? null; }; return ( diff --git a/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx index b4ed0dd5ecf9e..17004d37f3c93 100644 --- a/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx @@ -90,7 +90,7 @@ describe(' - Filter', () => { const columnForNewFilter = columns .filter((colDef) => colDef.filterable && !filteredFields.includes(colDef.field)) .find((colDef) => colDef.filterOperators?.length); - return columnForNewFilter?.field; + return columnForNewFilter?.field ?? null; }; render( diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterPanel.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterPanel.tsx index a2cb0e635c7a0..6091cf7686998 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterPanel.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterPanel.tsx @@ -27,9 +27,9 @@ export interface GridFilterPanelProps /** * Function that returns the next filter item to be picked as default filter. * @param {GetColumnForNewFilterArgs} args Currently configured filters and columns. - * @returns {GridColDef['field']} The field to be used for the next filter. + * @returns {GridColDef['field']} The field to be used for the next filter or `null` to prevent adding a filter. */ - getColumnForNewFilter?: (args: GetColumnForNewFilterArgs) => GridColDef['field']; + getColumnForNewFilter?: (args: GetColumnForNewFilterArgs) => GridColDef['field'] | null; /** * Props passed to each filter form. */ @@ -108,6 +108,10 @@ const GridFilterPanel = React.forwardRef( columns: filterableColumns, }); + if (nextFieldName === null) { + return null; + } + nextColumnWithOperator = filterableColumns.find(({ field }) => field === nextFieldName); } else { nextColumnWithOperator = filterableColumns.find((colDef) => colDef.filterOperators?.length); @@ -135,6 +139,10 @@ const GridFilterPanel = React.forwardRef( columns: filterableColumns, }); + if (nextColumnFieldName === null) { + return null; + } + const nextColumnWithOperator = filterableColumns.find( ({ field }) => field === nextColumnFieldName, ); @@ -284,7 +292,7 @@ GridFilterPanel.propTypes = { /** * Function that returns the next filter item to be picked as default filter. * @param {GetColumnForNewFilterArgs} args Currently configured filters and columns. - * @returns {GridColDef['field']} The field to be used for the next filter. + * @returns {GridColDef['field']} The field to be used for the next filter or `null` to prevent adding a filter. */ getColumnForNewFilter: PropTypes.func, /** From e1792210d06c80c47da586885b75cb80625cb364 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Mon, 27 Feb 2023 22:47:14 +0500 Subject: [PATCH 09/24] [DataGridPro] Remove row pinning from experimental features (#8055) --- docs/data/data-grid/row-pinning/RowPinning.js | 7 +------ docs/data/data-grid/row-pinning/RowPinning.tsx | 7 +------ .../data-grid/row-pinning/RowPinning.tsx.preview | 7 +------ .../data-grid/row-pinning/RowPinningWithActions.js | 7 +------ .../data-grid/row-pinning/RowPinningWithActions.tsx | 9 ++------- .../row-pinning/RowPinningWithActions.tsx.preview | 7 +------ .../row-pinning/RowPinningWithPagination.js | 1 - .../row-pinning/RowPinningWithPagination.tsx | 1 - .../RowPinningWithPagination.tsx.preview | 1 - docs/data/data-grid/row-pinning/row-pinning.md | 9 --------- .../migration-data-grid-v5.md | 6 ++++++ docs/pages/x/api/data-grid/data-grid-premium.json | 2 +- docs/pages/x/api/data-grid/data-grid-pro.json | 2 +- .../src/DataGridPremium/DataGridPremium.tsx | 1 - .../src/tests/rowPinning.DataGridPremium.test.tsx | 1 - .../x-data-grid-pro/src/DataGridPro/DataGridPro.tsx | 1 - .../hooks/features/rowPinning/useGridRowPinning.ts | 12 ++---------- .../x-data-grid-pro/src/models/dataGridProProps.ts | 4 ---- .../src/tests/rowPinning.DataGridPro.test.tsx | 13 +------------ .../actual.spec.js | 5 ++++- .../expected.spec.js | 5 +---- .../remove-stabilized-experimentalFeatures/index.ts | 6 ++++-- 22 files changed, 27 insertions(+), 87 deletions(-) diff --git a/docs/data/data-grid/row-pinning/RowPinning.js b/docs/data/data-grid/row-pinning/RowPinning.js index 0a189a7b85e4b..8d4b5c997a66a 100644 --- a/docs/data/data-grid/row-pinning/RowPinning.js +++ b/docs/data/data-grid/row-pinning/RowPinning.js @@ -42,12 +42,7 @@ const pinnedRows = { export default function RowPinning() { return (
- +
); } diff --git a/docs/data/data-grid/row-pinning/RowPinning.tsx b/docs/data/data-grid/row-pinning/RowPinning.tsx index 2269a6dce8797..3f0cd8e88314e 100644 --- a/docs/data/data-grid/row-pinning/RowPinning.tsx +++ b/docs/data/data-grid/row-pinning/RowPinning.tsx @@ -42,12 +42,7 @@ const pinnedRows: GridPinnedRowsProp = { export default function RowPinning() { return (
- +
); } diff --git a/docs/data/data-grid/row-pinning/RowPinning.tsx.preview b/docs/data/data-grid/row-pinning/RowPinning.tsx.preview index a96f72064f95c..ef42a1dbc8c5b 100644 --- a/docs/data/data-grid/row-pinning/RowPinning.tsx.preview +++ b/docs/data/data-grid/row-pinning/RowPinning.tsx.preview @@ -1,6 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/data/data-grid/row-pinning/RowPinningWithActions.js b/docs/data/data-grid/row-pinning/RowPinningWithActions.js index 387a6343ee339..41e307d03591c 100644 --- a/docs/data/data-grid/row-pinning/RowPinningWithActions.js +++ b/docs/data/data-grid/row-pinning/RowPinningWithActions.js @@ -129,12 +129,7 @@ export default function RowPinningWithActions() { return (
- +
); } diff --git a/docs/data/data-grid/row-pinning/RowPinningWithActions.tsx b/docs/data/data-grid/row-pinning/RowPinningWithActions.tsx index c8cdfb176a83b..b278453bc7b81 100644 --- a/docs/data/data-grid/row-pinning/RowPinningWithActions.tsx +++ b/docs/data/data-grid/row-pinning/RowPinningWithActions.tsx @@ -65,7 +65,7 @@ export default function RowPinningWithActions() { }; }, [pinnedRowsIds]); - const columns = React.useMemo[]>( + const columns = React.useMemo[]>( () => [ { field: 'actions', @@ -138,12 +138,7 @@ export default function RowPinningWithActions() { return (
- +
); } diff --git a/docs/data/data-grid/row-pinning/RowPinningWithActions.tsx.preview b/docs/data/data-grid/row-pinning/RowPinningWithActions.tsx.preview index 3bacf37f55715..b45c8a527e245 100644 --- a/docs/data/data-grid/row-pinning/RowPinningWithActions.tsx.preview +++ b/docs/data/data-grid/row-pinning/RowPinningWithActions.tsx.preview @@ -1,6 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/data/data-grid/row-pinning/RowPinningWithPagination.js b/docs/data/data-grid/row-pinning/RowPinningWithPagination.js index 6d147e6138fb0..764ad8bb201e7 100644 --- a/docs/data/data-grid/row-pinning/RowPinningWithPagination.js +++ b/docs/data/data-grid/row-pinning/RowPinningWithPagination.js @@ -38,7 +38,6 @@ export default function RowPinningWithPagination() { }} pagination pageSizeOptions={[5, 10, 25, 50, 100]} - experimentalFeatures={{ rowPinning: true }} /> ); diff --git a/docs/data/data-grid/row-pinning/RowPinningWithPagination.tsx b/docs/data/data-grid/row-pinning/RowPinningWithPagination.tsx index 6d147e6138fb0..764ad8bb201e7 100644 --- a/docs/data/data-grid/row-pinning/RowPinningWithPagination.tsx +++ b/docs/data/data-grid/row-pinning/RowPinningWithPagination.tsx @@ -38,7 +38,6 @@ export default function RowPinningWithPagination() { }} pagination pageSizeOptions={[5, 10, 25, 50, 100]} - experimentalFeatures={{ rowPinning: true }} /> ); diff --git a/docs/data/data-grid/row-pinning/RowPinningWithPagination.tsx.preview b/docs/data/data-grid/row-pinning/RowPinningWithPagination.tsx.preview index 1a2d655520ced..944ad96bc22a9 100644 --- a/docs/data/data-grid/row-pinning/RowPinningWithPagination.tsx.preview +++ b/docs/data/data-grid/row-pinning/RowPinningWithPagination.tsx.preview @@ -11,5 +11,4 @@ }} pagination pageSizeOptions={[5, 10, 25, 50, 100]} - experimentalFeatures={{ rowPinning: true }} /> \ No newline at end of file diff --git a/docs/data/data-grid/row-pinning/row-pinning.md b/docs/data/data-grid/row-pinning/row-pinning.md index a437de0a8041e..80cbc0682ea1e 100644 --- a/docs/data/data-grid/row-pinning/row-pinning.md +++ b/docs/data/data-grid/row-pinning/row-pinning.md @@ -8,15 +8,6 @@ title: Data Grid - Row pinning Pinned (or frozen, locked, or floating) rows are those visible at all times while the user scrolls the grid vertically. -:::warning -This feature is experimental, it needs to be explicitly activated using the `rowPinning` experimental feature flag. - -```tsx - -``` - -::: - You can pin rows at the top or bottom of the grid by passing pinned rows data through the `pinnedRows` prop: ```tsx diff --git a/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md b/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md index b6373e272eceb..a3aa641132211 100644 --- a/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md +++ b/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md @@ -377,6 +377,12 @@ Most of this breaking change is handled by `preset-safe` codemod but some furthe - experimentalFeatures={{ newEditingApi: true }} /> ``` +- ✅ The row pinning is no longer experimental. The flag `experimentalFeatures.rowPinning` can be removed now. + ```diff + + ``` - The `editCellPropsChange` event was removed. If you still need it please file a new issue so we can propose an alternative. - The `cellEditCommit` event was removed and the `processRowUpdate` prop can be used in place. More information, check the [docs](https://mui.com/x/react-data-grid/editing/#persistence) section about the topic. - The `editRowsModel` and `onEditRowsModelChange` props were removed. The [`cellModesModel`](https://mui.com/x/react-data-grid/editing/#controlled-mode) or [`rowModesModel`](https://mui.com/x/react-data-grid/editing/#controlled-mode) props can be used to achieve the same goal. 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 fab2e67853143..9ba9f40430f7b 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -77,7 +77,7 @@ "experimentalFeatures": { "type": { "name": "shape", - "description": "{ columnGrouping?: bool, lazyLoading?: bool, rowPinning?: bool, warnIfFocusStateIsNotSynced?: bool }" + "description": "{ columnGrouping?: bool, lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool }" } }, "filterMode": { 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 e13ef04727ea6..49f7f3d22f1ab 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -66,7 +66,7 @@ "experimentalFeatures": { "type": { "name": "shape", - "description": "{ columnGrouping?: bool, lazyLoading?: bool, rowPinning?: bool, warnIfFocusStateIsNotSynced?: bool }" + "description": "{ columnGrouping?: bool, lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool }" } }, "filterMode": { 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 5e1ee92bd0682..5f1e6f4f93936 100644 --- a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -270,7 +270,6 @@ DataGridPremiumRaw.propTypes = { experimentalFeatures: PropTypes.shape({ columnGrouping: PropTypes.bool, lazyLoading: PropTypes.bool, - rowPinning: PropTypes.bool, warnIfFocusStateIsNotSynced: PropTypes.bool, }), /** diff --git a/packages/grid/x-data-grid-premium/src/tests/rowPinning.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/rowPinning.DataGridPremium.test.tsx index aab941eb7a949..e2c250ea2e606 100644 --- a/packages/grid/x-data-grid-premium/src/tests/rowPinning.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/rowPinning.DataGridPremium.test.tsx @@ -74,7 +74,6 @@ describe(' - Row pinning', () => { top: [pinnedRow0], bottom: [pinnedRow1], }} - experimentalFeatures={{ rowPinning: true }} /> ); 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 16340518941d5..2b9e08e07518d 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -241,7 +241,6 @@ DataGridProRaw.propTypes = { experimentalFeatures: PropTypes.shape({ columnGrouping: PropTypes.bool, lazyLoading: PropTypes.bool, - rowPinning: PropTypes.bool, warnIfFocusStateIsNotSynced: PropTypes.bool, }), /** diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/rowPinning/useGridRowPinning.ts b/packages/grid/x-data-grid-pro/src/hooks/features/rowPinning/useGridRowPinning.ts index 4b86644d3d3c3..ed6f6890b349b 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/rowPinning/useGridRowPinning.ts +++ b/packages/grid/x-data-grid-pro/src/hooks/features/rowPinning/useGridRowPinning.ts @@ -38,10 +38,6 @@ function createPinnedRowsInternalCache( export const rowPinningStateInitializer: GridStateInitializer< Pick > = (state, props, apiRef) => { - if (!props.experimentalFeatures?.rowPinning) { - return state; - } - apiRef.current.caches.pinnedRows = createPinnedRowsInternalCache( props.pinnedRows, props.getRowId, @@ -61,14 +57,10 @@ export const rowPinningStateInitializer: GridStateInitializer< export const useGridRowPinning = ( apiRef: React.MutableRefObject, - props: Pick, + props: Pick, ): void => { const setPinnedRows = React.useCallback( (newPinnedRows) => { - if (!props.experimentalFeatures?.rowPinning) { - return; - } - apiRef.current.caches.pinnedRows = createPinnedRowsInternalCache( newPinnedRows, props.getRowId, @@ -76,7 +68,7 @@ export const useGridRowPinning = ( apiRef.current.requestPipeProcessorsApplication('hydrateRows'); }, - [apiRef, props.experimentalFeatures?.rowPinning, props.getRowId], + [apiRef, props.getRowId], ); useGridApiMethod( diff --git a/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts b/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts index 6b97847d0993e..71fb8988b9180 100644 --- a/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts +++ b/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts @@ -30,10 +30,6 @@ export interface GridExperimentalProFeatures extends GridExperimentalFeatures { * Enables the data grid to lazy load rows while scrolling. */ lazyLoading: boolean; - /** - * Enables the ability for rows to be pinned in data grid. - */ - rowPinning: boolean; } interface DataGridProPropsWithComplexDefaultValueBeforeProcessing diff --git a/packages/grid/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx index 5879918a7907b..9052f425c6c2e 100644 --- a/packages/grid/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx @@ -73,7 +73,6 @@ describe(' - Row pinning', () => { top: [pinnedRow0], bottom: [pinnedRow1], }} - experimentalFeatures={{ rowPinning: true }} {...props} /> @@ -105,12 +104,7 @@ describe(' - Row pinning', () => { return (
- +
); } @@ -281,7 +275,6 @@ describe(' - Row pinning', () => { bottom: [pinnedRow1], }} getRowId={getRowId} - experimentalFeatures={{ rowPinning: true }} /> ); @@ -368,7 +361,6 @@ describe(' - Row pinning', () => { pinnedRows={{ top: [pinnedRow1, pinnedRow0], }} - experimentalFeatures={{ rowPinning: true }} /> ); @@ -411,7 +403,6 @@ describe(' - Row pinning', () => { pinnedRows={{ bottom: [pinnedRow0, pinnedRow1], }} - experimentalFeatures={{ rowPinning: true }} /> ); @@ -463,7 +454,6 @@ describe(' - Row pinning', () => { right: ['price2M'], }, }} - experimentalFeatures={{ rowPinning: true }} /> ); @@ -703,7 +693,6 @@ describe(' - Row pinning', () => { top: [pinnedRow0], bottom: [pinnedRow1], }} - experimentalFeatures={{ rowPinning: true }} /> ); diff --git a/packages/x-codemod/src/v6.0.0/data-grid/remove-stabilized-experimentalFeatures/actual.spec.js b/packages/x-codemod/src/v6.0.0/data-grid/remove-stabilized-experimentalFeatures/actual.spec.js index 182dde2982550..a374d51274e9d 100644 --- a/packages/x-codemod/src/v6.0.0/data-grid/remove-stabilized-experimentalFeatures/actual.spec.js +++ b/packages/x-codemod/src/v6.0.0/data-grid/remove-stabilized-experimentalFeatures/actual.spec.js @@ -6,7 +6,10 @@ import { DataGridPremium } from '@mui/x-data-grid-premium'; function App() { return ( - + - + diff --git a/packages/x-codemod/src/v6.0.0/data-grid/remove-stabilized-experimentalFeatures/index.ts b/packages/x-codemod/src/v6.0.0/data-grid/remove-stabilized-experimentalFeatures/index.ts index dff4d983edbcd..0f53976e205bc 100644 --- a/packages/x-codemod/src/v6.0.0/data-grid/remove-stabilized-experimentalFeatures/index.ts +++ b/packages/x-codemod/src/v6.0.0/data-grid/remove-stabilized-experimentalFeatures/index.ts @@ -3,7 +3,7 @@ import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types'; const componentsNames = ['DataGrid', 'DataGridPro', 'DataGridPremium']; const propName = 'experimentalFeatures'; -const propKey = 'newEditingApi'; +const propKeys = ['newEditingApi', 'rowPinning']; export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) { const j = api.jscodeshift; @@ -14,7 +14,9 @@ export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftA trailingComma: true, }; - removeObjectProperty({ root, j, propName, componentsNames, propKey }); + propKeys.forEach((propKey) => { + removeObjectProperty({ root, j, propName, componentsNames, propKey }); + }); return root.toSource(printOptions); } From 17dd6ebf9d712718bd970bc05c5370055d639f4e Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Mon, 27 Feb 2023 23:36:44 +0500 Subject: [PATCH 10/24] [docs] Add `aggregation` experimental flag removal to the migration guide (#8056) --- .../migration-data-grid-v5/migration-data-grid-v5.md | 7 +++++-- .../remove-stabilized-experimentalFeatures/actual.spec.js | 1 + .../remove-stabilized-experimentalFeatures/index.ts | 2 +- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md b/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md index a3aa641132211..1d839e7973057 100644 --- a/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md +++ b/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md @@ -377,10 +377,13 @@ Most of this breaking change is handled by `preset-safe` codemod but some furthe - experimentalFeatures={{ newEditingApi: true }} /> ``` -- ✅ The row pinning is no longer experimental. The flag `experimentalFeatures.rowPinning` can be removed now. +- ✅ The aggregation and row pinning are no longer experimental features. The flags `experimentalFeatures.aggregation` and `experimentalFeatures.rowPinning` can be removed now. ```diff ``` - The `editCellPropsChange` event was removed. If you still need it please file a new issue so we can propose an alternative. diff --git a/packages/x-codemod/src/v6.0.0/data-grid/remove-stabilized-experimentalFeatures/actual.spec.js b/packages/x-codemod/src/v6.0.0/data-grid/remove-stabilized-experimentalFeatures/actual.spec.js index a374d51274e9d..156e2a1f0270e 100644 --- a/packages/x-codemod/src/v6.0.0/data-grid/remove-stabilized-experimentalFeatures/actual.spec.js +++ b/packages/x-codemod/src/v6.0.0/data-grid/remove-stabilized-experimentalFeatures/actual.spec.js @@ -19,6 +19,7 @@ function App() { newEditingApi: true, rowPinning: true, columnGrouping: true, + aggregation: true, }} /> ); diff --git a/packages/x-codemod/src/v6.0.0/data-grid/remove-stabilized-experimentalFeatures/index.ts b/packages/x-codemod/src/v6.0.0/data-grid/remove-stabilized-experimentalFeatures/index.ts index 0f53976e205bc..63bbff997e8a6 100644 --- a/packages/x-codemod/src/v6.0.0/data-grid/remove-stabilized-experimentalFeatures/index.ts +++ b/packages/x-codemod/src/v6.0.0/data-grid/remove-stabilized-experimentalFeatures/index.ts @@ -3,7 +3,7 @@ import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types'; const componentsNames = ['DataGrid', 'DataGridPro', 'DataGridPremium']; const propName = 'experimentalFeatures'; -const propKeys = ['newEditingApi', 'rowPinning']; +const propKeys = ['newEditingApi', 'rowPinning', 'aggregation']; export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) { const j = api.jscodeshift; From 13c7b105b67c473231ffbb90c17597b27a54782d Mon Sep 17 00:00:00 2001 From: Matheus Wichman Date: Mon, 27 Feb 2023 19:49:17 -0300 Subject: [PATCH 11/24] [DataGrid] Make possible to memoize rows and cells (#7846) Signed-off-by: Matheus Wichman Co-authored-by: Andrew Cherniavskii --- .../data-grid/overview/DataGridProDemo.js | 10 +- .../data-grid/overview/DataGridProDemo.tsx | 10 +- .../overview/DataGridProDemo.tsx.preview | 4 + .../performance/GridWithReactMemo.js | 70 ++++ .../performance/GridWithReactMemo.tsx | 70 ++++ .../performance/GridWithReactMemo.tsx.preview | 10 + .../data/data-grid/performance/performance.md | 47 +++ .../migration-data-grid-v5.md | 17 +- docs/data/pages.ts | 1 + .../x/api/data-grid/data-grid-premium.json | 1 + docs/pages/x/api/data-grid/data-grid-pro.json | 1 + docs/pages/x/api/data-grid/data-grid.json | 1 + docs/pages/x/react-data-grid/performance.js | 7 + .../api-docs/data-grid/data-grid-premium.json | 1 + .../api-docs/data-grid/data-grid-pro.json | 1 + .../api-docs/data-grid/data-grid.json | 1 + .../src/DataGridPremium/DataGridPremium.tsx | 11 +- .../grid/x-data-grid-premium/src/index.ts | 2 + .../src/DataGridPro/DataGridPro.tsx | 7 +- .../components/DataGridProColumnHeaders.tsx | 256 ------------- .../components/DataGridProVirtualScroller.tsx | 17 +- .../src/components/GridColumnHeaders.tsx | 354 ++++++++++++++++++ .../dataGridProDefaultSlotsComponents.ts | 2 + packages/grid/x-data-grid-pro/src/index.ts | 2 + .../x-data-grid-pro/src/internals/index.ts | 2 +- .../x-data-grid/src/DataGrid/DataGrid.tsx | 6 +- .../src/components/DataGridColumnHeaders.tsx | 31 -- .../src/components/GridColumnHeaders.tsx | 119 ++++++ .../x-data-grid/src/components/GridRow.tsx | 100 +++-- .../src/components/base/GridBody.tsx | 87 ++++- .../src/components/cell/GridCell.tsx | 26 +- ...nHeaders.tsx => GridBaseColumnHeaders.tsx} | 4 +- .../constants/defaultGridSlotsComponents.ts | 2 + .../columnHeaders/useGridColumnHeaders.tsx | 94 +++-- .../virtualization/useGridVirtualScroller.tsx | 63 +++- packages/grid/x-data-grid/src/index.ts | 2 + .../grid/x-data-grid/src/internals/index.ts | 3 +- .../src/models/gridSlotsComponent.ts | 5 + scripts/x-data-grid-premium.exports.json | 3 +- scripts/x-data-grid-pro.exports.json | 3 +- scripts/x-data-grid.exports.json | 3 +- 41 files changed, 1010 insertions(+), 446 deletions(-) create mode 100644 docs/data/data-grid/performance/GridWithReactMemo.js create mode 100644 docs/data/data-grid/performance/GridWithReactMemo.tsx create mode 100644 docs/data/data-grid/performance/GridWithReactMemo.tsx.preview create mode 100644 docs/data/data-grid/performance/performance.md create mode 100644 docs/pages/x/react-data-grid/performance.js delete mode 100644 packages/grid/x-data-grid-pro/src/components/DataGridProColumnHeaders.tsx create mode 100644 packages/grid/x-data-grid-pro/src/components/GridColumnHeaders.tsx delete mode 100644 packages/grid/x-data-grid/src/components/DataGridColumnHeaders.tsx create mode 100644 packages/grid/x-data-grid/src/components/GridColumnHeaders.tsx rename packages/grid/x-data-grid/src/components/columnHeaders/{GridColumnHeaders.tsx => GridBaseColumnHeaders.tsx} (89%) diff --git a/docs/data/data-grid/overview/DataGridProDemo.js b/docs/data/data-grid/overview/DataGridProDemo.js index 10cc6a348fe17..3e0a22b660475 100644 --- a/docs/data/data-grid/overview/DataGridProDemo.js +++ b/docs/data/data-grid/overview/DataGridProDemo.js @@ -1,8 +1,12 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import { DataGridPro } from '@mui/x-data-grid-pro'; +import { DataGridPro, GridRow, GridColumnHeaders } from '@mui/x-data-grid-pro'; import { useDemoData } from '@mui/x-data-grid-generator'; +const MemoizedRow = React.memo(GridRow); + +const MemoizedColumnHeaders = React.memo(GridColumnHeaders); + export default function DataGridProDemo() { const { data } = useDemoData({ dataSet: 'Commodity', @@ -18,6 +22,10 @@ export default function DataGridProDemo() { rowHeight={38} checkboxSelection disableRowSelectionOnClick + components={{ + Row: MemoizedRow, + ColumnHeaders: MemoizedColumnHeaders, + }} /> ); diff --git a/docs/data/data-grid/overview/DataGridProDemo.tsx b/docs/data/data-grid/overview/DataGridProDemo.tsx index 10cc6a348fe17..3e0a22b660475 100644 --- a/docs/data/data-grid/overview/DataGridProDemo.tsx +++ b/docs/data/data-grid/overview/DataGridProDemo.tsx @@ -1,8 +1,12 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import { DataGridPro } from '@mui/x-data-grid-pro'; +import { DataGridPro, GridRow, GridColumnHeaders } from '@mui/x-data-grid-pro'; import { useDemoData } from '@mui/x-data-grid-generator'; +const MemoizedRow = React.memo(GridRow); + +const MemoizedColumnHeaders = React.memo(GridColumnHeaders); + export default function DataGridProDemo() { const { data } = useDemoData({ dataSet: 'Commodity', @@ -18,6 +22,10 @@ export default function DataGridProDemo() { rowHeight={38} checkboxSelection disableRowSelectionOnClick + components={{ + Row: MemoizedRow, + ColumnHeaders: MemoizedColumnHeaders, + }} /> ); diff --git a/docs/data/data-grid/overview/DataGridProDemo.tsx.preview b/docs/data/data-grid/overview/DataGridProDemo.tsx.preview index 1f8c5e44257e8..272b35f8a747b 100644 --- a/docs/data/data-grid/overview/DataGridProDemo.tsx.preview +++ b/docs/data/data-grid/overview/DataGridProDemo.tsx.preview @@ -4,4 +4,8 @@ rowHeight={38} checkboxSelection disableRowSelectionOnClick + components={{ + Row: MemoizedRow, + ColumnHeaders: MemoizedColumnHeaders, + }} /> \ No newline at end of file diff --git a/docs/data/data-grid/performance/GridWithReactMemo.js b/docs/data/data-grid/performance/GridWithReactMemo.js new file mode 100644 index 0000000000000..a99fbe9953eed --- /dev/null +++ b/docs/data/data-grid/performance/GridWithReactMemo.js @@ -0,0 +1,70 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import { teal } from '@mui/material/colors'; +import { unstable_useForkRef as useForkRef } from '@mui/utils'; +import { DataGridPro, GridRow, GridColumnHeaders } from '@mui/x-data-grid-pro'; +import { useDemoData } from '@mui/x-data-grid-generator'; + +const TraceUpdates = React.forwardRef((props, ref) => { + const { Component, ...other } = props; + const rootRef = React.useRef(); + const handleRef = useForkRef(rootRef, ref); + + React.useEffect(() => { + rootRef.current?.classList.add('updating'); + + const timer = setTimeout(() => { + rootRef.current?.classList.remove('updating'); + }, 500); + + return () => clearTimeout(timer); + }); + + return ; +}); + +const RowWithTracer = React.forwardRef((props, ref) => { + return ; +}); + +const ColumnHeadersWithTracer = React.forwardRef((props, ref) => { + return ; +}); + +const MemoizedRow = React.memo(RowWithTracer); +const MemoizedColumnHeaders = React.memo(ColumnHeadersWithTracer); + +export default function GridWithReactMemo() { + const { data } = useDemoData({ + dataSet: 'Commodity', + rowLength: 100, + editable: true, + maxColumns: 15, + }); + + return ( + ({ + background: teal[theme.palette.mode === 'dark' ? 900 : 100], + transition: theme.transitions.create('background', { + duration: theme.transitions.duration.standard, + }), + }), + }} + > + + + ); +} diff --git a/docs/data/data-grid/performance/GridWithReactMemo.tsx b/docs/data/data-grid/performance/GridWithReactMemo.tsx new file mode 100644 index 0000000000000..f933dd3749024 --- /dev/null +++ b/docs/data/data-grid/performance/GridWithReactMemo.tsx @@ -0,0 +1,70 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import { teal } from '@mui/material/colors'; +import { unstable_useForkRef as useForkRef } from '@mui/utils'; +import { DataGridPro, GridRow, GridColumnHeaders } from '@mui/x-data-grid-pro'; +import { useDemoData } from '@mui/x-data-grid-generator'; + +const TraceUpdates = React.forwardRef((props, ref) => { + const { Component, ...other } = props; + const rootRef = React.useRef(); + const handleRef = useForkRef(rootRef, ref); + + React.useEffect(() => { + rootRef.current?.classList.add('updating'); + + const timer = setTimeout(() => { + rootRef.current?.classList.remove('updating'); + }, 500); + + return () => clearTimeout(timer); + }); + + return ; +}); + +const RowWithTracer = React.forwardRef((props, ref) => { + return ; +}); + +const ColumnHeadersWithTracer = React.forwardRef((props, ref) => { + return ; +}); + +const MemoizedRow = React.memo(RowWithTracer); +const MemoizedColumnHeaders = React.memo(ColumnHeadersWithTracer); + +export default function GridWithReactMemo() { + const { data } = useDemoData({ + dataSet: 'Commodity', + rowLength: 100, + editable: true, + maxColumns: 15, + }); + + return ( + ({ + background: teal[theme.palette.mode === 'dark' ? 900 : 100], + transition: theme.transitions.create('background', { + duration: theme.transitions.duration.standard, + }), + }), + }} + > + + + ); +} diff --git a/docs/data/data-grid/performance/GridWithReactMemo.tsx.preview b/docs/data/data-grid/performance/GridWithReactMemo.tsx.preview new file mode 100644 index 0000000000000..f1bd1aea7658a --- /dev/null +++ b/docs/data/data-grid/performance/GridWithReactMemo.tsx.preview @@ -0,0 +1,10 @@ + \ No newline at end of file diff --git a/docs/data/data-grid/performance/performance.md b/docs/data/data-grid/performance/performance.md new file mode 100644 index 0000000000000..a26c29d8d89d4 --- /dev/null +++ b/docs/data/data-grid/performance/performance.md @@ -0,0 +1,47 @@ +# Data Grid - Performance + +

Improve the performance of the DataGrid using the recommendations from this guide.

+ +## Memoize inner components with `React.memo` + +The `DataGrid` component is composed of a central state object where all data is stored. +When an API method is called, a prop changes, or the user interacts with the UI (e.g. filtering a column), this state object is updated with the changes made. +To reflect the changes in the interface, the component must re-render. +Since the state behaves like `React.useState`, the `DataGrid` component will re-render its children, including column headers, rows, and cells. +With smaller datasets, this is not a problem for concern, but it can become a bottleneck if the number of rows increases, especially if many columns render [custom content](/x/react-data-grid/column-definition/#rendering-cells). +One way to overcome this issue is using `React.memo` to only re-render the child components when their props have changed. +To start using memoization, import the inner components, then pass their memoized version to the respective slots, as follow: + +```tsx +import { + GridRow, + GridColumnHeaders, + DataGrid, // or DataGridPro, DataGridPremium +} from '@mui/x-data-grid'; + +const MemoizedRow = React.memo(GridRow); +const MemoizedColumnHeaders = React.memo(GridColumnHeaders); + +; +``` + +The following demo show this trick in action. +It also contains additional logic to highlight the components when they re-render. + +{{"demo": "GridWithReactMemo.js", "bg": "inline", "defaultCodeOpen": false}} + +:::warning +We do not ship the components above already wrapped with `React.memo` because if you have rows whose cells display custom content not derived from the received props, e.g. selectors, these cells may display outdated information. +If you define a column with a custom cell renderer where content comes from a [selector](/x/react-data-grid/state/#catalog-of-selectors) that changes more often than the props passed to `GridRow`, the row component should not be memoized. +::: + +## API + +- [DataGrid](/x/api/data-grid/data-grid/) +- [DataGridPro](/x/api/data-grid/data-grid-pro/) +- [DataGridPremium](/x/api/data-grid/data-grid-premium/) diff --git a/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md b/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md index 1d839e7973057..62f807513bdca 100644 --- a/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md +++ b/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md @@ -270,6 +270,17 @@ Most of this breaking change is handled by `preset-safe` codemod but some furthe - The `GridActionsCellProps['api']` property was removed. Use `useGridApiContext` hook instead to get `apiRef`. - The `GridActionsCellProps['getValue']` property was removed. Use `params.row` instead. - The `GridFooterCellProps['getValue']` property was removed. Use `params.row` instead. +- The `cellFocus`, `cellTabIndex` and `editRowsState` props are not passed to the `Row` slot anymore. + Use the `focusedCell` and `tabbableCell` props instead. + For the editing state, use the API methods. + ```diff + const CustomRow = (props) => { + - const focusedField = props.cellFocus.field; + + const focusedField = props.focusedCell; + - const tabIndex = props.cellTabIndex.field && cellMode === 'view' ? 0 : 1; + + const tabIndex = props.tabbableCell === column.field ? 0 : 1; + } + ``` ### Pagination @@ -449,12 +460,6 @@ Most of this breaking change is handled by `preset-safe` codemod but some furthe | `.MuiDataGrid-withBorder` | `.MuiDataGrid-withBorderColor` | The class only sets `border-color` CSS property | | `.MuiDataGrid-filterFormLinkOperatorInput` | `.MuiDataGrid-filterFormLogicOperatorInput` | | - - ### Removals from the public API - The `getGridSingleSelectQuickFilterFn` function was removed. diff --git a/docs/data/pages.ts b/docs/data/pages.ts index 59b1a04a992b1..b5dedfeaa5c6d 100644 --- a/docs/data/pages.ts +++ b/docs/data/pages.ts @@ -71,6 +71,7 @@ const pages: MuiPage[] = [ { pathname: '/x/react-data-grid/scrolling' }, { pathname: '/x/react-data-grid/virtualization' }, { pathname: '/x/react-data-grid/accessibility' }, + { pathname: '/x/react-data-grid/performance' }, { pathname: '/x/react-data-grid-group-pivot', title: 'Group & Pivot', 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 9ba9f40430f7b..3cf1001d4bf44 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -274,6 +274,7 @@ "default": "GridColumnHeaderFilterIconButton", "type": { "name": "elementType" } }, + "columnHeaders": { "default": "DataGridColumnHeaders", "type": { "name": "elementType" } }, "columnMenu": { "default": "GridColumnMenu", "type": { "name": "elementType" } }, "columnMenuAggregationIcon": { "default": "GridFunctionsIcon", 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 49f7f3d22f1ab..16a0c4d6f1221 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -248,6 +248,7 @@ "default": "GridColumnHeaderFilterIconButton", "type": { "name": "elementType" } }, + "columnHeaders": { "default": "DataGridColumnHeaders", "type": { "name": "elementType" } }, "columnMenu": { "default": "GridColumnMenu", "type": { "name": "elementType" } }, "columnMenuClearIcon": { "default": "GridClearIcon", "type": { "name": "elementType" } }, "columnMenuFilterIcon": { "default": "GridFilterAltIcon", "type": { "name": "elementType" } }, diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index b443f67f829e7..135de93d0feb7 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -193,6 +193,7 @@ "default": "GridColumnHeaderFilterIconButton", "type": { "name": "elementType" } }, + "columnHeaders": { "default": "DataGridColumnHeaders", "type": { "name": "elementType" } }, "columnMenu": { "default": "GridColumnMenu", "type": { "name": "elementType" } }, "columnMenuClearIcon": { "default": "GridClearIcon", "type": { "name": "elementType" } }, "columnMenuFilterIcon": { "default": "GridFilterAltIcon", "type": { "name": "elementType" } }, diff --git a/docs/pages/x/react-data-grid/performance.js b/docs/pages/x/react-data-grid/performance.js new file mode 100644 index 0000000000000..c3600d16c9d56 --- /dev/null +++ b/docs/pages/x/react-data-grid/performance.js @@ -0,0 +1,7 @@ +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'; + +export default function Page() { + return ; +} 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 fb1f19cc024f1..8548e40a52f79 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium.json @@ -701,6 +701,7 @@ "cell": "Component rendered for each cell.", "columnFilteredIcon": "Icon displayed on the column header menu to show that a filter has been applied to the column.", "columnHeaderFilterIconButton": "Filter icon component rendered in each column header.", + "columnHeaders": "Component responsible for rendering the column headers.", "columnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.", "columnMenuAggregationIcon": "Icon displayed in column menu for aggregation", "columnMenuClearIcon": "Icon displayed in column menu for clearing values", 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 a78fc02c52118..048c470d2edb3 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro.json @@ -687,6 +687,7 @@ "cell": "Component rendered for each cell.", "columnFilteredIcon": "Icon displayed on the column header menu to show that a filter has been applied to the column.", "columnHeaderFilterIconButton": "Filter icon component rendered in each column header.", + "columnHeaders": "Component responsible for rendering the column headers.", "columnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.", "columnMenuClearIcon": "Icon displayed in column menu for clearing values", "columnMenuFilterIcon": "Icon displayed in column menu for filter", diff --git a/docs/translations/api-docs/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid.json index 74fcab0d959b1..8ff9dfd4e4c9f 100644 --- a/docs/translations/api-docs/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid.json @@ -655,6 +655,7 @@ "cell": "Component rendered for each cell.", "columnFilteredIcon": "Icon displayed on the column header menu to show that a filter has been applied to the column.", "columnHeaderFilterIconButton": "Filter icon component rendered in each column header.", + "columnHeaders": "Component responsible for rendering the column headers.", "columnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.", "columnMenuClearIcon": "Icon displayed in column menu for clearing values", "columnMenuFilterIcon": "Icon displayed in column menu for filter", 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 5f1e6f4f93936..95c269f79f4c6 100644 --- a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -9,11 +9,10 @@ import { GridRoot, GridContextProvider, GridValidRowModel, + useGridSelector, + gridPinnedColumnsSelector, } from '@mui/x-data-grid-pro'; -import { - DataGridProVirtualScroller, - DataGridProColumnHeaders, -} from '@mui/x-data-grid-pro/internals'; +import { DataGridProVirtualScroller } from '@mui/x-data-grid-pro/internals'; import { useDataGridPremiumComponent } from './useDataGridPremiumComponent'; import { DataGridPremiumProps } from '../models/dataGridPremiumProps'; import { useDataGridPremiumProps } from './useDataGridPremiumProps'; @@ -30,13 +29,15 @@ const DataGridPremiumRaw = React.forwardRef(function DataGridPremium diff --git a/packages/grid/x-data-grid-premium/src/index.ts b/packages/grid/x-data-grid-premium/src/index.ts index d134ceb28bd6d..73c064d0d8f33 100644 --- a/packages/grid/x-data-grid-premium/src/index.ts +++ b/packages/grid/x-data-grid-premium/src/index.ts @@ -19,6 +19,8 @@ export * from './hooks'; export * from './models'; export * from './components'; +export { GridColumnHeaders } from '@mui/x-data-grid-pro'; + export type { DataGridPremiumProps, GridExperimentalPremiumFeatures, 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 2b9e08e07518d..118bb4995784b 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -9,13 +9,14 @@ import { GridRoot, GridContextProvider, GridValidRowModel, + useGridSelector, } from '@mui/x-data-grid'; import { useDataGridProComponent } from './useDataGridProComponent'; import { DataGridProProps } from '../models/dataGridProProps'; import { useDataGridProProps } from './useDataGridProProps'; import { DataGridProVirtualScroller } from '../components/DataGridProVirtualScroller'; -import { DataGridProColumnHeaders } from '../components/DataGridProColumnHeaders'; import { getReleaseInfo } from '../utils/releaseInfo'; +import { gridPinnedColumnsSelector } from '../hooks/features/columnPinning/gridColumnPinningSelector'; const releaseInfo = getReleaseInfo(); @@ -27,13 +28,15 @@ const DataGridProRaw = React.forwardRef(function DataGridPro diff --git a/packages/grid/x-data-grid-pro/src/components/DataGridProColumnHeaders.tsx b/packages/grid/x-data-grid-pro/src/components/DataGridProColumnHeaders.tsx deleted file mode 100644 index ea3c4364958b3..0000000000000 --- a/packages/grid/x-data-grid-pro/src/components/DataGridProColumnHeaders.tsx +++ /dev/null @@ -1,256 +0,0 @@ -import * as React from 'react'; -import { - unstable_composeClasses as composeClasses, - unstable_useEventCallback as useEventCallback, -} from '@mui/utils'; -import { styled, alpha, useTheme } from '@mui/material/styles'; -import { - getDataGridUtilityClass, - gridClasses, - useGridSelector, - useGridApiEventHandler, - gridVisibleColumnFieldsSelector, - GridColumnHeaderSeparatorSides, -} from '@mui/x-data-grid'; -import { - GridColumnHeaders, - GridColumnHeadersInner, - useGridColumnHeaders, -} from '@mui/x-data-grid/internals'; -import { useGridRootProps } from '../hooks/utils/useGridRootProps'; -import { useGridApiContext } from '../hooks/utils/useGridApiContext'; -import { DataGridProProcessedProps } from '../models/dataGridProProps'; -import { - gridPinnedColumnsSelector, - GridPinnedPosition, - GridPinnedColumns, -} from '../hooks/features/columnPinning'; -import { filterColumns } from './DataGridProVirtualScroller'; - -type OwnerState = DataGridProProcessedProps & { - leftPinnedColumns: GridPinnedColumns['left']; - rightPinnedColumns: GridPinnedColumns['right']; -}; - -const useUtilityClasses = (ownerState: OwnerState) => { - const { leftPinnedColumns, rightPinnedColumns, classes } = ownerState; - - const slots = { - leftPinnedColumns: [ - 'pinnedColumnHeaders', - leftPinnedColumns && leftPinnedColumns.length > 0 && `pinnedColumnHeaders--left`, - ], - rightPinnedColumns: [ - 'pinnedColumnHeaders', - rightPinnedColumns && rightPinnedColumns.length > 0 && `pinnedColumnHeaders--right`, - 'withBorderColor', - ], - }; - - return composeClasses(slots, getDataGridUtilityClass, classes); -}; - -interface GridColumnHeadersPinnedColumnHeadersProps { - side: GridPinnedPosition; - showCellVerticalBorder: boolean; -} - -// Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61 -const getOverlayAlpha = (elevation: number) => { - let alphaValue; - if (elevation < 1) { - alphaValue = 5.11916 * elevation ** 2; - } else { - alphaValue = 4.5 * Math.log(elevation + 1) + 2; - } - return alphaValue / 100; -}; - -const GridColumnHeadersPinnedColumnHeaders = styled('div', { - name: 'MuiDataGrid', - slot: 'PinnedColumnHeaders', - overridesResolver: (props, styles) => [ - { [`&.${gridClasses['pinnedColumnHeaders--left']}`]: styles['pinnedColumnHeaders--left'] }, - { [`&.${gridClasses['pinnedColumnHeaders--right']}`]: styles['pinnedColumnHeaders--right'] }, - styles.pinnedColumnHeaders, - ], -})<{ ownerState: OwnerState & GridColumnHeadersPinnedColumnHeadersProps }>( - ({ theme, ownerState }) => ({ - position: 'absolute', - top: 0, - overflow: 'hidden', - zIndex: 1, - display: 'flex', - flexDirection: 'column', - boxShadow: theme.shadows[2], - backgroundColor: (theme.vars || theme).palette.background.default, - ...(theme.vars - ? { - backgroundImage: theme.vars.overlays?.[2], - } - : { - ...(theme.palette.mode === 'dark' && { - backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha(2))}, ${alpha( - '#fff', - getOverlayAlpha(2), - )})`, - }), - }), - ...(ownerState.side === GridPinnedPosition.left && { left: 0 }), - ...(ownerState.side === GridPinnedPosition.right && { right: 0 }), - ...(ownerState.side === GridPinnedPosition.right && - ownerState.showCellVerticalBorder && { - borderLeftWidth: '1px', - borderLeftStyle: 'solid', - }), - }), -); - -interface DataGridProColumnHeadersProps extends React.HTMLAttributes { - innerRef?: React.Ref; -} - -export const DataGridProColumnHeaders = React.forwardRef< - HTMLDivElement, - DataGridProColumnHeadersProps ->(function DataGridProColumnHeaders(props, ref) { - const { style, className, innerRef, ...other } = props; - const rootProps = useGridRootProps(); - const apiRef = useGridApiContext(); - const visibleColumnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector); - const [scrollbarSize, setScrollbarSize] = React.useState(0); - const theme = useTheme(); - - const handleContentSizeChange = useEventCallback(() => { - const rootDimensions = apiRef.current.getRootDimensions(); - if (!rootDimensions) { - return; - } - - const newScrollbarSize = rootDimensions.hasScrollY ? rootDimensions.scrollBarSize : 0; - if (scrollbarSize !== newScrollbarSize) { - setScrollbarSize(newScrollbarSize); - } - }); - - useGridApiEventHandler(apiRef, 'virtualScrollerContentSizeChange', handleContentSizeChange); - - const pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector); - const [leftPinnedColumns, rightPinnedColumns] = filterColumns( - pinnedColumns, - visibleColumnFields, - theme.direction === 'rtl', - ); - - const { - isDragging, - renderContext, - getRootProps, - getInnerProps, - getColumnHeaders, - getColumnGroupHeaders, - } = useGridColumnHeaders({ - innerRef, - minColumnIndex: leftPinnedColumns.length, - }); - - const ownerState = { - ...rootProps, - leftPinnedColumns, - rightPinnedColumns, - classes: rootProps.classes, - }; - const classes = useUtilityClasses(ownerState); - - const leftRenderContext = - renderContext && leftPinnedColumns.length - ? { - ...renderContext, - firstColumnIndex: 0, - lastColumnIndex: leftPinnedColumns.length, - } - : null; - - const rightRenderContext = - renderContext && rightPinnedColumns.length - ? { - ...renderContext, - firstColumnIndex: visibleColumnFields.length - rightPinnedColumns.length, - lastColumnIndex: visibleColumnFields.length, - } - : null; - - const innerProps = getInnerProps(); - - const pinnedColumnHeadersProps = { - role: innerProps.role, - }; - - return ( - - {leftRenderContext && ( - - {getColumnGroupHeaders({ - renderContext: leftRenderContext, - minFirstColumn: leftRenderContext.firstColumnIndex, - maxLastColumn: leftRenderContext.lastColumnIndex, - })} - {getColumnHeaders( - { - renderContext: leftRenderContext, - minFirstColumn: leftRenderContext.firstColumnIndex, - maxLastColumn: leftRenderContext.lastColumnIndex, - }, - { disableReorder: true }, - )} - - )} - - {getColumnGroupHeaders({ - renderContext, - minFirstColumn: leftPinnedColumns.length, - maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length, - })} - {getColumnHeaders({ - renderContext, - minFirstColumn: leftPinnedColumns.length, - maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length, - })} - - {rightRenderContext && ( - - {getColumnGroupHeaders({ - renderContext: rightRenderContext, - minFirstColumn: rightRenderContext.firstColumnIndex, - maxLastColumn: rightRenderContext.lastColumnIndex, - })} - {getColumnHeaders( - { - renderContext: rightRenderContext, - minFirstColumn: rightRenderContext.firstColumnIndex, - maxLastColumn: rightRenderContext.lastColumnIndex, - }, - { disableReorder: true, separatorSide: GridColumnHeaderSeparatorSides.Left }, - )} - - )} - - ); -}); diff --git a/packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx b/packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx index a61f67914ea09..b076e9671d4d3 100644 --- a/packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx +++ b/packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx @@ -236,13 +236,16 @@ const DataGridProVirtualScroller = React.forwardRef< [], ); - const getRowProps = (id: GridRowId) => { - if (!expandedRowIds.includes(id)) { - return null; - } - const height = detailPanelsHeights[id]; - return { style: { marginBottom: height } }; - }; + const getRowProps = React.useCallback( + (id: GridRowId) => { + if (!expandedRowIds.includes(id)) { + return null; + } + const height = detailPanelsHeights[id]; + return { style: { marginBottom: height } }; + }, + [detailPanelsHeights, expandedRowIds], + ); const pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector); const [leftPinnedColumns, rightPinnedColumns] = filterColumns( diff --git a/packages/grid/x-data-grid-pro/src/components/GridColumnHeaders.tsx b/packages/grid/x-data-grid-pro/src/components/GridColumnHeaders.tsx new file mode 100644 index 0000000000000..30b2beb3e579a --- /dev/null +++ b/packages/grid/x-data-grid-pro/src/components/GridColumnHeaders.tsx @@ -0,0 +1,354 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { + unstable_composeClasses as composeClasses, + unstable_useEventCallback as useEventCallback, +} from '@mui/utils'; +import { styled, alpha, useTheme } from '@mui/material/styles'; +import { + getDataGridUtilityClass, + gridClasses, + useGridApiEventHandler, + GridColumnHeaderSeparatorSides, +} from '@mui/x-data-grid'; +import { + GridBaseColumnHeaders, + GridColumnHeadersInner, + useGridColumnHeaders, + UseGridColumnHeadersProps, +} from '@mui/x-data-grid/internals'; +import { useGridRootProps } from '../hooks/utils/useGridRootProps'; +import { useGridApiContext } from '../hooks/utils/useGridApiContext'; +import { DataGridProProcessedProps } from '../models/dataGridProProps'; +import { GridPinnedPosition, GridPinnedColumns } from '../hooks/features/columnPinning'; +import { filterColumns } from './DataGridProVirtualScroller'; + +type OwnerState = DataGridProProcessedProps & { + leftPinnedColumns: GridPinnedColumns['left']; + rightPinnedColumns: GridPinnedColumns['right']; +}; + +const useUtilityClasses = (ownerState: OwnerState) => { + const { leftPinnedColumns, rightPinnedColumns, classes } = ownerState; + + const slots = { + leftPinnedColumns: [ + 'pinnedColumnHeaders', + leftPinnedColumns && leftPinnedColumns.length > 0 && `pinnedColumnHeaders--left`, + ], + rightPinnedColumns: [ + 'pinnedColumnHeaders', + rightPinnedColumns && rightPinnedColumns.length > 0 && `pinnedColumnHeaders--right`, + 'withBorderColor', + ], + }; + + return composeClasses(slots, getDataGridUtilityClass, classes); +}; + +interface GridColumnHeadersPinnedColumnHeadersProps { + side: GridPinnedPosition; + showCellVerticalBorder: boolean; +} + +// Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61 +const getOverlayAlpha = (elevation: number) => { + let alphaValue; + if (elevation < 1) { + alphaValue = 5.11916 * elevation ** 2; + } else { + alphaValue = 4.5 * Math.log(elevation + 1) + 2; + } + return alphaValue / 100; +}; + +const GridColumnHeadersPinnedColumnHeaders = styled('div', { + name: 'MuiDataGrid', + slot: 'PinnedColumnHeaders', + overridesResolver: (props, styles) => [ + { [`&.${gridClasses['pinnedColumnHeaders--left']}`]: styles['pinnedColumnHeaders--left'] }, + { [`&.${gridClasses['pinnedColumnHeaders--right']}`]: styles['pinnedColumnHeaders--right'] }, + styles.pinnedColumnHeaders, + ], +})<{ ownerState: OwnerState & GridColumnHeadersPinnedColumnHeadersProps }>( + ({ theme, ownerState }) => ({ + position: 'absolute', + top: 0, + overflow: 'hidden', + zIndex: 1, + display: 'flex', + flexDirection: 'column', + boxShadow: theme.shadows[2], + backgroundColor: (theme.vars || theme).palette.background.default, + ...(theme.vars + ? { + backgroundImage: theme.vars.overlays?.[2], + } + : { + ...(theme.palette.mode === 'dark' && { + backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha(2))}, ${alpha( + '#fff', + getOverlayAlpha(2), + )})`, + }), + }), + ...(ownerState.side === GridPinnedPosition.left && { left: 0 }), + ...(ownerState.side === GridPinnedPosition.right && { right: 0 }), + ...(ownerState.side === GridPinnedPosition.right && + ownerState.showCellVerticalBorder && { + borderLeftWidth: '1px', + borderLeftStyle: 'solid', + }), + }), +); + +GridColumnHeadersPinnedColumnHeaders.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + ownerState: PropTypes.object.isRequired, +} as any; + +interface DataGridProColumnHeadersProps + extends React.HTMLAttributes, + Omit { + innerRef?: React.Ref; + pinnedColumns: GridPinnedColumns; +} + +const GridColumnHeaders = React.forwardRef( + function GridColumnHeaders(props, ref) { + const { + style, + className, + innerRef, + visibleColumns, + sortColumnLookup, + filterColumnLookup, + columnPositions, + columnHeaderTabIndexState, + columnGroupHeaderTabIndexState, + columnHeaderFocus, + columnGroupHeaderFocus, + densityFactor, + headerGroupingMaxDepth, + columnMenuState, + columnVisibility, + columnGroupsHeaderStructure, + hasOtherElementInTabSequence, + pinnedColumns, + ...other + } = props; + const rootProps = useGridRootProps(); + const apiRef = useGridApiContext(); + const [scrollbarSize, setScrollbarSize] = React.useState(0); + const theme = useTheme(); + + const handleContentSizeChange = useEventCallback(() => { + const rootDimensions = apiRef.current.getRootDimensions(); + if (!rootDimensions) { + return; + } + + const newScrollbarSize = rootDimensions.hasScrollY ? rootDimensions.scrollBarSize : 0; + if (scrollbarSize !== newScrollbarSize) { + setScrollbarSize(newScrollbarSize); + } + }); + + useGridApiEventHandler(apiRef, 'virtualScrollerContentSizeChange', handleContentSizeChange); + + const visibleColumnFields = React.useMemo( + () => visibleColumns.map(({ field }) => field), + [visibleColumns], + ); + + const [leftPinnedColumns, rightPinnedColumns] = filterColumns( + pinnedColumns, + visibleColumnFields, + theme.direction === 'rtl', + ); + + const { + isDragging, + renderContext, + getRootProps, + getInnerProps, + getColumnHeaders, + getColumnGroupHeaders, + } = useGridColumnHeaders({ + innerRef, + visibleColumns, + sortColumnLookup, + filterColumnLookup, + columnPositions, + columnHeaderTabIndexState, + hasOtherElementInTabSequence, + columnGroupHeaderTabIndexState, + columnHeaderFocus, + columnGroupHeaderFocus, + densityFactor, + headerGroupingMaxDepth, + columnMenuState, + columnVisibility, + columnGroupsHeaderStructure, + minColumnIndex: leftPinnedColumns.length, + }); + + const ownerState = { + ...rootProps, + leftPinnedColumns, + rightPinnedColumns, + classes: rootProps.classes, + }; + const classes = useUtilityClasses(ownerState); + + const leftRenderContext = + renderContext && leftPinnedColumns.length + ? { + ...renderContext, + firstColumnIndex: 0, + lastColumnIndex: leftPinnedColumns.length, + } + : null; + + const rightRenderContext = + renderContext && rightPinnedColumns.length + ? { + ...renderContext, + firstColumnIndex: visibleColumnFields.length - rightPinnedColumns.length, + lastColumnIndex: visibleColumnFields.length, + } + : null; + + const innerProps = getInnerProps(); + + const pinnedColumnHeadersProps = { + role: innerProps.role, + }; + + return ( + + {leftRenderContext && ( + + {getColumnGroupHeaders({ + renderContext: leftRenderContext, + minFirstColumn: leftRenderContext.firstColumnIndex, + maxLastColumn: leftRenderContext.lastColumnIndex, + })} + {getColumnHeaders( + { + renderContext: leftRenderContext, + minFirstColumn: leftRenderContext.firstColumnIndex, + maxLastColumn: leftRenderContext.lastColumnIndex, + }, + { disableReorder: true }, + )} + + )} + + + {getColumnGroupHeaders({ + renderContext, + minFirstColumn: leftPinnedColumns.length, + maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length, + })} + {getColumnHeaders({ + renderContext, + minFirstColumn: leftPinnedColumns.length, + maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length, + })} + + {rightRenderContext && ( + + {getColumnGroupHeaders({ + renderContext: rightRenderContext, + minFirstColumn: rightRenderContext.firstColumnIndex, + maxLastColumn: rightRenderContext.lastColumnIndex, + })} + {getColumnHeaders( + { + renderContext: rightRenderContext, + minFirstColumn: rightRenderContext.firstColumnIndex, + maxLastColumn: rightRenderContext.lastColumnIndex, + }, + { disableReorder: true, separatorSide: GridColumnHeaderSeparatorSides.Left }, + )} + + )} + + ); + }, +); + +GridColumnHeaders.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + columnGroupHeaderFocus: PropTypes.shape({ + depth: PropTypes.number.isRequired, + field: PropTypes.string.isRequired, + }), + columnGroupHeaderTabIndexState: PropTypes.shape({ + depth: PropTypes.number.isRequired, + field: PropTypes.string.isRequired, + }), + columnGroupsHeaderStructure: PropTypes.arrayOf( + PropTypes.arrayOf( + PropTypes.shape({ + columnFields: PropTypes.arrayOf(PropTypes.string).isRequired, + groupId: PropTypes.string, + }), + ), + ).isRequired, + columnHeaderFocus: PropTypes.shape({ + field: PropTypes.string.isRequired, + }), + columnHeaderTabIndexState: PropTypes.shape({ + field: PropTypes.string.isRequired, + }), + columnMenuState: PropTypes.shape({ + field: PropTypes.string, + open: PropTypes.bool.isRequired, + }).isRequired, + columnPositions: PropTypes.arrayOf(PropTypes.number).isRequired, + columnVisibility: PropTypes.object.isRequired, + densityFactor: PropTypes.number.isRequired, + filterColumnLookup: PropTypes.object.isRequired, + hasOtherElementInTabSequence: PropTypes.bool.isRequired, + headerGroupingMaxDepth: PropTypes.number.isRequired, + innerRef: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.shape({ + current: PropTypes.object, + }), + ]), + minColumnIndex: PropTypes.number, + pinnedColumns: PropTypes.shape({ + left: PropTypes.arrayOf(PropTypes.string), + right: PropTypes.arrayOf(PropTypes.string), + }).isRequired, + sortColumnLookup: PropTypes.object.isRequired, + visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired, +} as any; + +export { GridColumnHeaders }; diff --git a/packages/grid/x-data-grid-pro/src/constants/dataGridProDefaultSlotsComponents.ts b/packages/grid/x-data-grid-pro/src/constants/dataGridProDefaultSlotsComponents.ts index 9f48894e56bad..322635ffffaa8 100644 --- a/packages/grid/x-data-grid-pro/src/constants/dataGridProDefaultSlotsComponents.ts +++ b/packages/grid/x-data-grid-pro/src/constants/dataGridProDefaultSlotsComponents.ts @@ -2,6 +2,7 @@ import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '@mui/x-data-grid/internals'; import { GridProSlotsComponent, GridProIconSlotsComponent } from '../models'; import { GridPushPinRightIcon, GridPushPinLeftIcon } from '../components'; import { GridProColumnMenu } from '../components/GridProColumnMenu'; +import { GridColumnHeaders } from '../components/GridColumnHeaders'; export const DEFAULT_GRID_PRO_ICON_SLOTS_COMPONENTS: GridProIconSlotsComponent = { ColumnMenuPinRightIcon: GridPushPinRightIcon, @@ -12,4 +13,5 @@ export const DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS: GridProSlotsComponent = { ...DATA_GRID_DEFAULT_SLOTS_COMPONENTS, ...DEFAULT_GRID_PRO_ICON_SLOTS_COMPONENTS, ColumnMenu: GridProColumnMenu, + ColumnHeaders: GridColumnHeaders, }; diff --git a/packages/grid/x-data-grid-pro/src/index.ts b/packages/grid/x-data-grid-pro/src/index.ts index 4e445d67ce86a..851dd8d5ebcfb 100644 --- a/packages/grid/x-data-grid-pro/src/index.ts +++ b/packages/grid/x-data-grid-pro/src/index.ts @@ -31,3 +31,5 @@ export { GRID_COLUMN_MENU_COMPONENTS, GRID_COLUMN_MENU_COMPONENTS_PROPS, } from './components/reexports'; + +export { GridColumnHeaders } from './components/GridColumnHeaders'; diff --git a/packages/grid/x-data-grid-pro/src/internals/index.ts b/packages/grid/x-data-grid-pro/src/internals/index.ts index 1a4ff446992cd..7c62bd5352239 100644 --- a/packages/grid/x-data-grid-pro/src/internals/index.ts +++ b/packages/grid/x-data-grid-pro/src/internals/index.ts @@ -1,7 +1,7 @@ export * from '@mui/x-data-grid/internals'; export { DataGridProVirtualScroller } from '../components/DataGridProVirtualScroller'; -export { DataGridProColumnHeaders } from '../components/DataGridProColumnHeaders'; +export { GridColumnHeaders } from '../components/GridColumnHeaders'; export { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from '../constants/dataGridProDefaultSlotsComponents'; export { diff --git a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx index 5d1a40faed9c4..af8c7ae8945b8 100644 --- a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx +++ b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx @@ -7,7 +7,6 @@ import { GridContextProvider } from '../context/GridContextProvider'; import { useDataGridComponent } from './useDataGridComponent'; import { useDataGridProps } from './useDataGridProps'; import { DataGridVirtualScroller } from '../components/DataGridVirtualScroller'; -import { DataGridColumnHeaders } from '../components/DataGridColumnHeaders'; import { GridValidRowModel } from '../models/gridRows'; const DataGridRaw = React.forwardRef(function DataGrid( @@ -21,10 +20,7 @@ const DataGridRaw = React.forwardRef(function DataGrid - + diff --git a/packages/grid/x-data-grid/src/components/DataGridColumnHeaders.tsx b/packages/grid/x-data-grid/src/components/DataGridColumnHeaders.tsx deleted file mode 100644 index 0888cb7a3d165..0000000000000 --- a/packages/grid/x-data-grid/src/components/DataGridColumnHeaders.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import * as React from 'react'; -import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders'; -import { GridScrollArea } from './GridScrollArea'; -import { GridColumnHeaders } from './columnHeaders/GridColumnHeaders'; -import { GridColumnHeadersInner } from './columnHeaders/GridColumnHeadersInner'; - -interface DataGridColumnHeadersProps extends React.HTMLAttributes { - innerRef?: React.Ref; -} - -export const DataGridColumnHeaders = React.forwardRef( - function GridColumnsHeader(props, ref) { - const { innerRef, className, ...other } = props; - - const { isDragging, getRootProps, getInnerProps, getColumnHeaders, getColumnGroupHeaders } = - useGridColumnHeaders({ - innerRef, - }); - - return ( - - - - {getColumnGroupHeaders()} - {getColumnHeaders()} - - - - ); - }, -); diff --git a/packages/grid/x-data-grid/src/components/GridColumnHeaders.tsx b/packages/grid/x-data-grid/src/components/GridColumnHeaders.tsx new file mode 100644 index 0000000000000..c2df1d6c2b83f --- /dev/null +++ b/packages/grid/x-data-grid/src/components/GridColumnHeaders.tsx @@ -0,0 +1,119 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { + useGridColumnHeaders, + UseGridColumnHeadersProps, +} from '../hooks/features/columnHeaders/useGridColumnHeaders'; +import { GridScrollArea } from './GridScrollArea'; +import { GridBaseColumnHeaders } from './columnHeaders/GridBaseColumnHeaders'; +import { GridColumnHeadersInner } from './columnHeaders/GridColumnHeadersInner'; + +interface GridColumnHeadersProps + extends React.HTMLAttributes, + Omit { + innerRef?: React.Ref; +} + +const GridColumnHeaders = React.forwardRef( + function GridColumnsHeaders(props, ref) { + const { + innerRef, + className, + visibleColumns, + sortColumnLookup, + filterColumnLookup, + columnPositions, + columnHeaderTabIndexState, + columnGroupHeaderTabIndexState, + columnHeaderFocus, + columnGroupHeaderFocus, + densityFactor, + headerGroupingMaxDepth, + columnMenuState, + columnVisibility, + columnGroupsHeaderStructure, + hasOtherElementInTabSequence, + ...other + } = props; + + const { isDragging, getRootProps, getInnerProps, getColumnHeaders, getColumnGroupHeaders } = + useGridColumnHeaders({ + innerRef, + visibleColumns, + sortColumnLookup, + filterColumnLookup, + columnPositions, + columnHeaderTabIndexState, + columnGroupHeaderTabIndexState, + columnHeaderFocus, + columnGroupHeaderFocus, + densityFactor, + headerGroupingMaxDepth, + columnMenuState, + columnVisibility, + columnGroupsHeaderStructure, + hasOtherElementInTabSequence, + }); + + return ( + + + + {getColumnGroupHeaders()} + {getColumnHeaders()} + + + + ); + }, +); + +GridColumnHeaders.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + columnGroupHeaderFocus: PropTypes.shape({ + depth: PropTypes.number.isRequired, + field: PropTypes.string.isRequired, + }), + columnGroupHeaderTabIndexState: PropTypes.shape({ + depth: PropTypes.number.isRequired, + field: PropTypes.string.isRequired, + }), + columnGroupsHeaderStructure: PropTypes.arrayOf( + PropTypes.arrayOf( + PropTypes.shape({ + columnFields: PropTypes.arrayOf(PropTypes.string).isRequired, + groupId: PropTypes.string, + }), + ), + ).isRequired, + columnHeaderFocus: PropTypes.shape({ + field: PropTypes.string.isRequired, + }), + columnHeaderTabIndexState: PropTypes.shape({ + field: PropTypes.string.isRequired, + }), + columnMenuState: PropTypes.shape({ + field: PropTypes.string, + open: PropTypes.bool.isRequired, + }).isRequired, + columnPositions: PropTypes.arrayOf(PropTypes.number).isRequired, + columnVisibility: PropTypes.object.isRequired, + densityFactor: PropTypes.number.isRequired, + filterColumnLookup: PropTypes.object.isRequired, + hasOtherElementInTabSequence: PropTypes.bool.isRequired, + headerGroupingMaxDepth: PropTypes.number.isRequired, + innerRef: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.shape({ + current: PropTypes.object, + }), + ]), + minColumnIndex: PropTypes.number, + sortColumnLookup: PropTypes.object.isRequired, + visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired, +} as any; + +export { GridColumnHeaders }; diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 5114efa7604e8..33ce82d08e431 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -7,18 +7,12 @@ import { } from '@mui/utils'; import { GridRowEventLookup } from '../models/events'; import { GridRowId, GridRowModel, GridTreeNodeWithRender } from '../models/gridRows'; -import { - GridEditModes, - GridRowModes, - GridEditingState, - GridCellModes, -} from '../models/gridEditRowModel'; +import { GridEditModes, GridRowModes, GridCellModes } from '../models/gridEditRowModel'; import { useGridApiContext } from '../hooks/utils/useGridApiContext'; import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses'; import { useGridRootProps } from '../hooks/utils/useGridRootProps'; import { DataGridProcessedProps } from '../models/props/DataGridProps'; import { GridStateColDef } from '../models/colDef/gridColDef'; -import { GridCellCoordinates } from '../models/gridCell'; import { gridColumnsTotalWidthSelector } from '../hooks/features/columns/gridColumnsSelector'; import { useGridSelector } from '../hooks/utils/useGridSelector'; import { GridRowClassNameParams } from '../models/params/gridRowParams'; @@ -33,6 +27,7 @@ import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRows import { gridColumnGroupsHeaderMaxDepthSelector } from '../hooks/features/columnGrouping/gridColumnGroupsSelector'; import { randomNumberBetween } from '../utils/utils'; import { GridCellProps } from './cell/GridCell'; +import { gridEditRowsStateSelector } from '../hooks/features/editing/gridEditingSelectors'; export interface GridRowProps { rowId: GridRowId; @@ -48,10 +43,17 @@ export interface GridRowProps { lastColumnToRender: number; visibleColumns: GridStateColDef[]; renderedColumns: GridStateColDef[]; - cellFocus: GridCellCoordinates | null; - cellTabIndex: GridCellCoordinates | null; - editRowsState: GridEditingState; position: 'left' | 'center' | 'right'; + /** + * Determines which cell has focus. + * If `null`, no cell in this row has focus. + */ + focusedCell: string | null; + /** + * Determines which cell should be tabbable by having tabIndex=0. + * If `null`, no cell in this row is in the tab sequence. + */ + tabbableCell: string | null; row?: GridRowModel; isLastVisible?: boolean; onClick?: React.MouseEventHandler; @@ -112,10 +114,9 @@ const GridRow = React.forwardRef< containerWidth, firstColumnToRender, lastColumnToRender, - cellFocus, - cellTabIndex, - editRowsState, isLastVisible = false, + focusedCell, + tabbableCell, onClick, onDoubleClick, onMouseEnter, @@ -130,6 +131,7 @@ const GridRow = React.forwardRef< const sortModel = useGridSelector(apiRef, gridSortModelSelector); const treeDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector); const headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector); + const editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector); const handleRef = useForkRef(ref, refProp); const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based @@ -256,6 +258,18 @@ const GridRow = React.forwardRef< [apiRef, onClick, publish, rowId], ); + const { + slots, + slotProps, + classes: rootClasses, + disableColumnReorder, + getCellClassName, + } = rootProps; + + const rowReordering = (rootProps as any).rowReordering as boolean; + + const CellComponent = slots.cell; + const getCell = React.useCallback( ( column: GridStateColDef, @@ -275,8 +289,8 @@ const GridRow = React.forwardRef< }); const disableDragEvents = - (rootProps.disableColumnReorder && column.disableReorder) || - (!(rootProps as any).rowReordering && + (disableColumnReorder && column.disableReorder) || + (!rowReordering && !!sortModel.length && treeDepth > 1 && Object.keys(editRowsState).length > 0); @@ -298,7 +312,7 @@ const GridRow = React.forwardRef< content = column.renderCell({ ...cellParams, api: apiRef.current }); // TODO move to GridCell classNames.push( - clsx(gridClasses['cell--withRenderer'], rootProps.classes?.['cell--withRenderer']), + clsx(gridClasses['cell--withRenderer'], rootClasses?.['cell--withRenderer']), ); } @@ -316,24 +330,16 @@ const GridRow = React.forwardRef< content = column.renderEditCell(params); // TODO move to GridCell - classNames.push(clsx(gridClasses['cell--editing'], rootProps.classes?.['cell--editing'])); + classNames.push(clsx(gridClasses['cell--editing'], rootClasses?.['cell--editing'])); } - if (rootProps.getCellClassName) { + if (getCellClassName) { // TODO move to GridCell - classNames.push(rootProps.getCellClassName(cellParams)); + classNames.push(getCellClassName(cellParams)); } - const hasFocus = - cellFocus !== null && cellFocus.id === rowId && cellFocus.field === column.field; - - const tabIndex = - cellTabIndex !== null && - cellTabIndex.id === rowId && - cellTabIndex.field === column.field && - cellParams.cellMode === 'view' - ? 0 - : -1; + const hasFocus = focusedCell === column.field; + const tabIndex = tabbableCell === column.field ? 0 : -1; const isSelected = apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, { id: rowId, @@ -341,7 +347,7 @@ const GridRow = React.forwardRef< }); return ( - {content} - + ); }, [ apiRef, - cellTabIndex, - editRowsState, - cellFocus, - rootProps, - rowHeight, rowId, - treeDepth, + disableColumnReorder, + rowReordering, sortModel.length, + treeDepth, + editRowsState, + getCellClassName, + focusedCell, + tabbableCell, + CellComponent, + rowHeight, + slotProps?.cell, + rootClasses, ], ); @@ -512,11 +523,13 @@ GridRow.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- - cellFocus: PropTypes.object, - cellTabIndex: PropTypes.object, containerWidth: PropTypes.number.isRequired, - editRowsState: PropTypes.object.isRequired, firstColumnToRender: PropTypes.number.isRequired, + /** + * Determines which cell has focus. + * If `null`, no cell in this row has focus. + */ + focusedCell: PropTypes.string, /** * Index of the row in the whole sorted and filtered dataset. * If some rows above have expanded children, this index also take those children into account. @@ -530,6 +543,11 @@ GridRow.propTypes = { rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired, rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, selected: PropTypes.bool.isRequired, + /** + * Determines which cell should be tabbable by having tabIndex=0. + * If `null`, no cell in this row is in the tab sequence. + */ + tabbableCell: PropTypes.string, visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired, } as any; diff --git a/packages/grid/x-data-grid/src/components/base/GridBody.tsx b/packages/grid/x-data-grid/src/components/base/GridBody.tsx index 67c2cb9470eb7..0b4f4b125b2e9 100644 --- a/packages/grid/x-data-grid/src/components/base/GridBody.tsx +++ b/packages/grid/x-data-grid/src/components/base/GridBody.tsx @@ -1,32 +1,81 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext'; +import { useGridSelector } from '../../hooks/utils/useGridSelector'; import { ElementSize } from '../../models/elementSize'; import { GridMainContainer } from '../containers/GridMainContainer'; import { GridAutoSizer } from '../GridAutoSizer'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; +import { + gridColumnPositionsSelector, + gridColumnVisibilityModelSelector, + gridVisibleColumnDefinitionsSelector, +} from '../../hooks/features/columns/gridColumnsSelector'; +import { gridFilterActiveItemsLookupSelector } from '../../hooks/features/filter/gridFilterSelector'; +import { gridSortColumnLookupSelector } from '../../hooks/features/sorting/gridSortingSelector'; +import { + gridTabIndexColumnHeaderSelector, + gridTabIndexCellSelector, + gridFocusColumnHeaderSelector, + unstable_gridTabIndexColumnGroupHeaderSelector, + unstable_gridFocusColumnGroupHeaderSelector, +} from '../../hooks/features/focus/gridFocusStateSelector'; +import { gridDensityFactorSelector } from '../../hooks/features/density/densitySelector'; +import { + gridColumnGroupsHeaderMaxDepthSelector, + gridColumnGroupsHeaderStructureSelector, +} from '../../hooks/features/columnGrouping/gridColumnGroupsSelector'; +import { gridColumnMenuSelector } from '../../hooks/features/columnMenu/columnMenuSelector'; interface GridBodyProps { children?: React.ReactNode; + ColumnHeadersProps?: Record; VirtualScrollerComponent: React.JSXElementConstructor< React.HTMLAttributes & { ref: React.Ref; disableVirtualization: boolean; } >; - - ColumnHeadersComponent: React.JSXElementConstructor< - React.HTMLAttributes & { - ref: React.Ref; - innerRef: React.Ref; - } - >; } function GridBody(props: GridBodyProps) { - const { children, VirtualScrollerComponent, ColumnHeadersComponent } = props; + const { children, VirtualScrollerComponent, ColumnHeadersProps } = props; const apiRef = useGridPrivateApiContext(); const rootProps = useGridRootProps(); + + const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector); + const filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector); + const sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector); + const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector); + const columnHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector); + const cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector); + const columnGroupHeaderTabIndexState = useGridSelector( + apiRef, + unstable_gridTabIndexColumnGroupHeaderSelector, + ); + + const columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector); + const columnGroupHeaderFocus = useGridSelector( + apiRef, + unstable_gridFocusColumnGroupHeaderSelector, + ); + + const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector); + const headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector); + + const columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector); + const columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector); + const columnGroupsHeaderStructure = useGridSelector( + apiRef, + gridColumnGroupsHeaderStructureSelector, + ); + + const hasOtherElementInTabSequence = !( + columnGroupHeaderTabIndexState === null && + columnHeaderTabIndexState === null && + cellTabIndexState === null + ); + const [isVirtualizationDisabled, setIsVirtualizationDisabled] = React.useState( rootProps.disableVirtualization, ); @@ -71,7 +120,25 @@ function GridBody(props: GridBodyProps) { return ( - + { let warnedOnce = false; -function GridCell(props: GridCellProps) { +const GridCell = React.forwardRef((props, ref) => { const { align, children, @@ -126,6 +127,7 @@ function GridCell(props: GridCellProps) { const valueToRender = formattedValue == null ? value : formattedValue; const cellRef = React.useRef(null); + const handleRef = useForkRef(ref, cellRef); const focusElementRef = React.useRef(null); const apiRef = useGridApiContext(); @@ -262,7 +264,7 @@ function GridCell(props: GridCellProps) { return (
); -} +}); + +const MemoizedCell = React.memo(GridCell); GridCell.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- - align: PropTypes.oneOf(['center', 'left', 'right']).isRequired, + align: PropTypes.oneOf(['center', 'left', 'right']), cellMode: PropTypes.oneOf(['edit', 'view']), children: PropTypes.node, className: PropTypes.string, - colIndex: PropTypes.number.isRequired, + colIndex: PropTypes.number, colSpan: PropTypes.number, disableDragEvents: PropTypes.bool, - field: PropTypes.string.isRequired, + field: PropTypes.string, formattedValue: PropTypes.any, hasFocus: PropTypes.bool, - height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired, + height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]), isEditable: PropTypes.bool, isSelected: PropTypes.bool, onClick: PropTypes.func, @@ -312,11 +316,11 @@ GridCell.propTypes = { onKeyDown: PropTypes.func, onMouseDown: PropTypes.func, onMouseUp: PropTypes.func, - rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, + rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), showRightBorder: PropTypes.bool, - tabIndex: PropTypes.oneOf([-1, 0]).isRequired, + tabIndex: PropTypes.oneOf([-1, 0]), value: PropTypes.any, - width: PropTypes.number.isRequired, + width: PropTypes.number, } as any; -export { GridCell }; +export { MemoizedCell as GridCell }; diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaders.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/GridBaseColumnHeaders.tsx similarity index 89% rename from packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaders.tsx rename to packages/grid/x-data-grid/src/components/columnHeaders/GridBaseColumnHeaders.tsx index 40d2de736e755..105fd7c8f3447 100644 --- a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaders.tsx +++ b/packages/grid/x-data-grid/src/components/columnHeaders/GridBaseColumnHeaders.tsx @@ -35,11 +35,11 @@ const GridColumnHeadersRoot = styled('div', { }; }); -interface GridColumnHeadersProps extends React.HTMLAttributes { +interface GridBaseColumnHeadersProps extends React.HTMLAttributes { sx?: SxProps; } -export const GridColumnHeaders = React.forwardRef( +export const GridBaseColumnHeaders = React.forwardRef( function GridColumnHeaders(props, ref) { const { className, ...other } = props; const rootProps = useGridRootProps(); diff --git a/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts b/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts index 41bbac9713bbf..c200da02f5d5d 100644 --- a/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts +++ b/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts @@ -47,6 +47,7 @@ import { GridDeleteIcon, GridDeleteForeverIcon, } from '../components'; +import { GridColumnHeaders } from '../components/GridColumnHeaders'; import { GridColumnMenu } from '../components/menu/columnMenu/GridColumnMenu'; import { GridColumnUnsortedIcon } from '../components/columnHeaders/GridColumnUnsortedIcon'; import { GridNoResultsOverlay } from '../components/GridNoResultsOverlay'; @@ -102,6 +103,7 @@ export const DATA_GRID_DEFAULT_SLOTS_COMPONENTS: GridSlotsComponent = { SkeletonCell: GridSkeletonCell, ColumnHeaderFilterIconButton: GridColumnHeaderFilterIconButton, ColumnMenu: GridColumnMenu, + ColumnHeaders: GridColumnHeaders, Footer: GridFooter, Toolbar: null, PreferencesPanel: GridPreferencesPanel, diff --git a/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx index 0c35a54aab2d1..7305be7fc1f38 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx @@ -4,23 +4,6 @@ import { unstable_useForkRef as useForkRef } from '@mui/utils'; import { styled, useTheme } from '@mui/material/styles'; import { defaultMemoize } from 'reselect'; import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext'; -import { useGridSelector } from '../../utils/useGridSelector'; -import { - gridVisibleColumnDefinitionsSelector, - gridColumnPositionsSelector, - gridColumnVisibilityModelSelector, -} from '../columns/gridColumnsSelector'; -import { - gridTabIndexColumnHeaderSelector, - gridTabIndexCellSelector, - gridFocusColumnHeaderSelector, - unstable_gridFocusColumnGroupHeaderSelector, - unstable_gridTabIndexColumnGroupHeaderSelector, -} from '../focus/gridFocusStateSelector'; -import { gridDensityFactorSelector } from '../density/densitySelector'; -import { gridFilterActiveItemsLookupSelector } from '../filter/gridFilterSelector'; -import { gridSortColumnLookupSelector } from '../sorting/gridSortingSelector'; -import { gridColumnMenuSelector } from '../columnMenu/columnMenuSelector'; import { useGridRootProps } from '../../utils/useGridRootProps'; import { GridRenderContext } from '../../../models/params/gridScrollParams'; import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler'; @@ -31,10 +14,13 @@ import { useGridVisibleRows } from '../../utils/useGridVisibleRows'; import { getRenderableIndexes } from '../virtualization/useGridVirtualScroller'; import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader'; import { GridColumnGroup } from '../../../models/gridColumnGrouping'; -import { - gridColumnGroupsHeaderMaxDepthSelector, - gridColumnGroupsHeaderStructureSelector, -} from '../columnGrouping/gridColumnGroupsSelector'; +import { GridStateColDef } from '../../../models/colDef/gridColDef'; +import { GridSortColumnLookup } from '../sorting'; +import { GridFilterActiveItemsLookup } from '../filter'; +import { GridColumnGroupIdentifier, GridColumnIdentifier } from '../focus'; +import { GridColumnMenuState } from '../columnMenu'; +import { GridColumnVisibilityModel } from '../columns'; +import { GridGroupingStructure } from '../columnGrouping/gridColumnGroupsInterfaces'; import { DataGridProcessedProps } from '../../../models/props/DataGridProps'; type OwnerState = DataGridProcessedProps; @@ -57,9 +43,23 @@ interface HeaderInfo { description?: string; } -interface UseGridColumnHeadersProps { +export interface UseGridColumnHeadersProps { innerRef?: React.Ref; minColumnIndex?: number; + visibleColumns: GridStateColDef[]; + sortColumnLookup: GridSortColumnLookup; + filterColumnLookup: GridFilterActiveItemsLookup; + columnPositions: number[]; + columnHeaderTabIndexState: GridColumnIdentifier | null; + columnGroupHeaderTabIndexState: GridColumnGroupIdentifier | null; + columnHeaderFocus: GridColumnIdentifier | null; + columnGroupHeaderFocus: GridColumnGroupIdentifier | null; + densityFactor: number; + headerGroupingMaxDepth: number; + columnMenuState: GridColumnMenuState; + columnVisibility: GridColumnVisibilityModel; + columnGroupsHeaderStructure: GridGroupingStructure[][]; + hasOtherElementInTabSequence: boolean; } interface GetHeadersParams { @@ -73,36 +73,31 @@ function isUIEvent(event: any): event is React.UIEvent { } export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { - const { innerRef: innerRefProp, minColumnIndex = 0 } = props; + const { + innerRef: innerRefProp, + minColumnIndex = 0, + visibleColumns, + sortColumnLookup, + filterColumnLookup, + columnPositions, + columnHeaderTabIndexState, + columnGroupHeaderTabIndexState, + columnHeaderFocus, + columnGroupHeaderFocus, + densityFactor, + headerGroupingMaxDepth, + columnMenuState, + columnVisibility, + columnGroupsHeaderStructure, + hasOtherElementInTabSequence, + } = props; const theme = useTheme(); const [dragCol, setDragCol] = React.useState(''); const [resizeCol, setResizeCol] = React.useState(''); const apiRef = useGridPrivateApiContext(); - const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector); - const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector); - const columnHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector); - const cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector); - const columnGroupHeaderTabIndexState = useGridSelector( - apiRef, - unstable_gridTabIndexColumnGroupHeaderSelector, - ); - const columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector); - const columnGroupHeaderFocus = useGridSelector( - apiRef, - unstable_gridFocusColumnGroupHeaderSelector, - ); - const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector); - const headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector); - const filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector); - const sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector); - const columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector); - const columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector); - const columnGroupsHeaderStructure = useGridSelector( - apiRef, - gridColumnGroupsHeaderStructureSelector, - ); + const rootProps = useGridRootProps(); const innerRef = React.useRef(null); const handleInnerRef = useForkRef(innerRefProp, innerRef); @@ -305,14 +300,9 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { const columnIndex = firstColumnToRender + i; const isFirstColumn = columnIndex === 0; - const hasTabbableElement = !( - columnGroupHeaderTabIndexState === null && - columnHeaderTabIndexState === null && - cellTabIndexState === null - ); const tabIndex = (columnHeaderTabIndexState !== null && columnHeaderTabIndexState.field === colDef.field) || - (isFirstColumn && !hasTabbableElement) + (isFirstColumn && !hasOtherElementInTabSequence) ? 0 : -1; const hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === colDef.field; diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 3963403def4d7..07de08ae95e59 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -5,6 +5,7 @@ import { unstable_useEnhancedEffect as useEnhancedEffect, } from '@mui/utils'; import { useTheme } from '@mui/material/styles'; +import { defaultMemoize } from 'reselect'; import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext'; import { useGridRootProps } from '../../utils/useGridRootProps'; import { useGridSelector } from '../../utils/useGridSelector'; @@ -14,17 +15,19 @@ import { gridColumnPositionsSelector, } from '../columns/gridColumnsSelector'; import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector'; -import { gridEditRowsStateSelector } from '../editing/gridEditingSelectors'; import { useGridVisibleRows } from '../../utils/useGridVisibleRows'; import { GridEventListener } from '../../../models/events'; +import { GridSlotsComponentsProps } from '../../../models/gridSlotsComponentsProps'; import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler'; import { clamp } from '../../../utils/utils'; import { GridRenderContext, GridRowEntry } from '../../../models'; import { selectedIdsLookupSelector } from '../rowSelection/gridRowSelectionSelector'; import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector'; import { GridRowId, GridRowModel } from '../../../models/gridRows'; +import { GridStateColDef } from '../../../models/colDef/gridColDef'; import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils'; import { getMinimalContentHeight } from '../rows/gridRowsUtils'; +import { GridRowProps } from '../../../components/GridRow'; // Uses binary search to avoid looping through all possible positions export function binarySearch( @@ -124,7 +127,6 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { const cellFocus = useGridSelector(apiRef, gridFocusCellSelector); const cellTabIndex = useGridSelector(apiRef, gridTabIndexCellSelector); const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector); - const editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector); const selectedRowsLookup = useGridSelector(apiRef, selectedIdsLookupSelector); const currentPage = useGridVisibleRows(apiRef, rootProps); const renderZoneRef = React.useRef(null); @@ -139,6 +141,18 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { }); const prevTotalWidth = React.useRef(columnsTotalWidth); + const rowStyleCache = React.useRef>({}); + const prevGetRowProps = React.useRef(); + const prevRootRowStyle = React.useRef(); + + const getRenderedColumnsRef = React.useRef( + defaultMemoize( + (columns: GridStateColDef[], firstColumnToRender: number, lastColumnToRender: number) => { + return columns.slice(firstColumnToRender, lastColumnToRender); + }, + ), + ); + const getNearestIndexToRender = React.useCallback( (offset: number) => { const lastMeasuredIndexRelativeToAllRows = apiRef.current.getLastMeasuredRowIndex(); @@ -507,7 +521,20 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { visibleRows: currentPage.rows, }); - const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender); + const renderedColumns = getRenderedColumnsRef.current( + visibleColumns, + firstColumnToRender, + lastColumnToRender, + ); + + const { style: rootRowStyle, ...rootRowProps } = rootProps.slotProps?.row || {}; + + const invalidatesCachedRowStyle = + prevGetRowProps.current !== getRowProps || prevRootRowStyle.current !== rootRowStyle; + + if (invalidatesCachedRowStyle) { + rowStyleCache.current = {}; + } const rows: JSX.Element[] = []; @@ -525,19 +552,33 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { isSelected = apiRef.current.isRowSelectable(id); } - const { style: rootRowStyle, ...rootRowProps } = rootProps.slotProps?.row || {}; + const focusedCell = cellFocus !== null && cellFocus.id === id ? cellFocus.field : null; + + let tabbableCell: GridRowProps['tabbableCell'] = null; + if (cellTabIndex !== null && cellTabIndex.id === id) { + const cellParams = apiRef.current.getCellParams(id, cellTabIndex.field); + tabbableCell = cellParams.cellMode === 'view' ? cellTabIndex.field : null; + } + const { style: rowStyle, ...rowProps } = (typeof getRowProps === 'function' && getRowProps(id, model)) || {}; + if (!rowStyleCache.current[id]) { + const style = { + ...rowStyle, + ...rootRowStyle, + }; + rowStyleCache.current[id] = style; + } + rows.push( { position={position} {...rowProps} {...rootRowProps} - style={{ - ...rowStyle, - ...rootRowStyle, - }} + style={rowStyleCache.current[id]} />, ); } + prevGetRowProps.current = getRowProps; + prevRootRowStyle.current = rootRowStyle; + return rows; }; diff --git a/packages/grid/x-data-grid/src/index.ts b/packages/grid/x-data-grid/src/index.ts index a27b060807942..c1f297c323d23 100644 --- a/packages/grid/x-data-grid/src/index.ts +++ b/packages/grid/x-data-grid/src/index.ts @@ -20,6 +20,8 @@ export type { DataGridProps, GridExperimentalFeatures } from './models/props/Dat export type { GridToolbarExportProps } from './components/toolbar/GridToolbarExport'; export type { GridExportFormat, GridExportExtension } from './models/gridExport'; +export { GridColumnHeaders } from './components/GridColumnHeaders'; + /** * Reexportable components. */ diff --git a/packages/grid/x-data-grid/src/internals/index.ts b/packages/grid/x-data-grid/src/internals/index.ts index 42408356c4a12..e6eced40c8cc9 100644 --- a/packages/grid/x-data-grid/src/internals/index.ts +++ b/packages/grid/x-data-grid/src/internals/index.ts @@ -6,7 +6,7 @@ export type { export { GridVirtualScroller } from '../components/virtualization/GridVirtualScroller'; export { GridVirtualScrollerContent } from '../components/virtualization/GridVirtualScrollerContent'; export { GridVirtualScrollerRenderZone } from '../components/virtualization/GridVirtualScrollerRenderZone'; -export { GridColumnHeaders } from '../components/columnHeaders/GridColumnHeaders'; +export { GridBaseColumnHeaders } from '../components/columnHeaders/GridBaseColumnHeaders'; export { GridColumnHeadersInner } from '../components/columnHeaders/GridColumnHeadersInner'; export { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '../constants/defaultGridSlotsComponents'; @@ -21,6 +21,7 @@ export { useGridInitialization } from '../hooks/core/useGridInitialization'; export { useGridClipboard } from '../hooks/features/clipboard/useGridClipboard'; export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders'; +export type { UseGridColumnHeadersProps } from '../hooks/features/columnHeaders/useGridColumnHeaders'; export { useGridColumnMenu, columnMenuStateInitializer, diff --git a/packages/grid/x-data-grid/src/models/gridSlotsComponent.ts b/packages/grid/x-data-grid/src/models/gridSlotsComponent.ts index a413bfadbcd35..b031aaee7c5db 100644 --- a/packages/grid/x-data-grid/src/models/gridSlotsComponent.ts +++ b/packages/grid/x-data-grid/src/models/gridSlotsComponent.ts @@ -71,6 +71,11 @@ export interface GridSlotsComponent extends GridIconSlotsComponent { * @default GridColumnMenu */ ColumnMenu: React.JSXElementConstructor; + /** + * Component responsible for rendering the column headers. + * @default DataGridColumnHeaders + */ + ColumnHeaders: React.JSXElementConstructor; /** * Footer component rendered at the bottom of the grid viewport. * @default GridFooter diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index 5c4daa178514b..083e823e4c4c3 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -97,7 +97,7 @@ { "name": "GridBody", "kind": "Function" }, { "name": "GridBooleanCell", "kind": "Variable" }, { "name": "GridCallbackDetails", "kind": "Interface" }, - { "name": "GridCell", "kind": "Function" }, + { "name": "GridCell", "kind": "Variable" }, { "name": "GridCellCheckboxForwardRef", "kind": "Variable" }, { "name": "GridCellCheckboxRenderer", "kind": "Variable" }, { "name": "GridCellClassFn", "kind": "TypeAlias" }, @@ -152,6 +152,7 @@ { "name": "GridColumnHeaderMenu", "kind": "Function" }, { "name": "GridColumnHeaderMenuProps", "kind": "Interface" }, { "name": "GridColumnHeaderParams", "kind": "Interface" }, + { "name": "GridColumnHeaders", "kind": "Variable" }, { "name": "GridColumnHeaderSeparator", "kind": "Variable" }, { "name": "GridColumnHeaderSeparatorProps", "kind": "Interface" }, { "name": "GridColumnHeaderSeparatorSides", "kind": "Enum" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index ca6fb4e31f1f7..f84a847da5a49 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -75,7 +75,7 @@ { "name": "GridBody", "kind": "Function" }, { "name": "GridBooleanCell", "kind": "Variable" }, { "name": "GridCallbackDetails", "kind": "Interface" }, - { "name": "GridCell", "kind": "Function" }, + { "name": "GridCell", "kind": "Variable" }, { "name": "GridCellCheckboxForwardRef", "kind": "Variable" }, { "name": "GridCellCheckboxRenderer", "kind": "Variable" }, { "name": "GridCellClassFn", "kind": "TypeAlias" }, @@ -128,6 +128,7 @@ { "name": "GridColumnHeaderMenu", "kind": "Function" }, { "name": "GridColumnHeaderMenuProps", "kind": "Interface" }, { "name": "GridColumnHeaderParams", "kind": "Interface" }, + { "name": "GridColumnHeaders", "kind": "Variable" }, { "name": "GridColumnHeaderSeparator", "kind": "Variable" }, { "name": "GridColumnHeaderSeparatorProps", "kind": "Interface" }, { "name": "GridColumnHeaderSeparatorSides", "kind": "Enum" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index 41dc5faaaab1d..003acd9f0e1bf 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -68,7 +68,7 @@ { "name": "GridBody", "kind": "Function" }, { "name": "GridBooleanCell", "kind": "Variable" }, { "name": "GridCallbackDetails", "kind": "Interface" }, - { "name": "GridCell", "kind": "Function" }, + { "name": "GridCell", "kind": "Variable" }, { "name": "GridCellCheckboxForwardRef", "kind": "Variable" }, { "name": "GridCellCheckboxRenderer", "kind": "Variable" }, { "name": "GridCellClassFn", "kind": "TypeAlias" }, @@ -121,6 +121,7 @@ { "name": "GridColumnHeaderMenu", "kind": "Function" }, { "name": "GridColumnHeaderMenuProps", "kind": "Interface" }, { "name": "GridColumnHeaderParams", "kind": "Interface" }, + { "name": "GridColumnHeaders", "kind": "Variable" }, { "name": "GridColumnHeaderSeparator", "kind": "Variable" }, { "name": "GridColumnHeaderSeparatorProps", "kind": "Interface" }, { "name": "GridColumnHeaderSeparatorSides", "kind": "Enum" }, From 3149c0a3526598e7ae17d0ec915bdf16813d93f1 Mon Sep 17 00:00:00 2001 From: Matheus Wichman Date: Mon, 27 Feb 2023 19:49:36 -0300 Subject: [PATCH 12/24] [DataGrid] Register `getLocaleText` synchronously (#8029) --- .../src/hooks/core/useGridLocaleText.tsx | 7 ++---- .../src/tests/layout.DataGrid.test.tsx | 22 +++++++++++++++++++ 2 files changed, 24 insertions(+), 5 deletions(-) diff --git a/packages/grid/x-data-grid/src/hooks/core/useGridLocaleText.tsx b/packages/grid/x-data-grid/src/hooks/core/useGridLocaleText.tsx index 516816d88317b..7a1605e0c665c 100644 --- a/packages/grid/x-data-grid/src/hooks/core/useGridLocaleText.tsx +++ b/packages/grid/x-data-grid/src/hooks/core/useGridLocaleText.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { GridPrivateApiCommon } from '../../models/api/gridApiCommon'; import { GridLocaleTextApi } from '../../models/api/gridLocaleTextApi'; -import { useGridApiMethod } from '../utils/useGridApiMethod'; import { DataGridProcessedProps } from '../../models/props/DataGridProps'; export const useGridLocaleText = ( @@ -18,9 +17,7 @@ export const useGridLocaleText = ( [props.localeText], ); - const localeTextApi: GridLocaleTextApi = { + apiRef.current.register('public', { getLocaleText, - }; - - useGridApiMethod(apiRef, localeTextApi, 'public'); + }); }; diff --git a/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx index bfb0ad346475f..baff7449f49ce 100644 --- a/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx @@ -892,6 +892,28 @@ describe(' - Layout & Warnings', () => { ); expect(document.querySelector('[title="Ordenar"]')).not.to.equal(null); }); + + it('should allow to change localeText on the fly', () => { + function TestCase(props: Partial) { + return ( +
+ +
+ ); + } + const { setProps, getByText } = render( + , + ); + expect(getByText('Density')).not.to.equal(null); + setProps({ localeText: { toolbarDensity: 'Densidade' } }); + expect(getByText('Densidade')).not.to.equal(null); + }); }); it('should allow style customization using the theme', function test() { From 7a73e8adc2602e8bd2145d3bce819b55288bedb2 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Tue, 28 Feb 2023 11:36:39 +0100 Subject: [PATCH 13/24] [pickers] Add support for UTC on moment adapter (#8031) --- .../date-pickers/adapters-locale/UTCMoment.js | 20 ++++++++++++++ .../adapters-locale/UTCMoment.tsx | 20 ++++++++++++++ .../adapters-locale/UTCMoment.tsx.preview | 2 ++ .../adapters-locale/adapters-locale.md | 27 +++++++++++++++++++ .../x-date-pickers/src/AdapterMoment/index.ts | 14 +++++++++- 5 files changed, 82 insertions(+), 1 deletion(-) create mode 100644 docs/data/date-pickers/adapters-locale/UTCMoment.js create mode 100644 docs/data/date-pickers/adapters-locale/UTCMoment.tsx create mode 100644 docs/data/date-pickers/adapters-locale/UTCMoment.tsx.preview diff --git a/docs/data/date-pickers/adapters-locale/UTCMoment.js b/docs/data/date-pickers/adapters-locale/UTCMoment.js new file mode 100644 index 0000000000000..99bc8ad88fb67 --- /dev/null +++ b/docs/data/date-pickers/adapters-locale/UTCMoment.js @@ -0,0 +1,20 @@ +import * as React from 'react'; +import moment from 'moment'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; +import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; + +export default function UTCMoment() { + const [value, setValue] = React.useState(null); + + return ( + + + setValue(newValue)} /> + Value: {value == null ? 'null' : value.format()} + + + ); +} diff --git a/docs/data/date-pickers/adapters-locale/UTCMoment.tsx b/docs/data/date-pickers/adapters-locale/UTCMoment.tsx new file mode 100644 index 0000000000000..7f3b686e0d151 --- /dev/null +++ b/docs/data/date-pickers/adapters-locale/UTCMoment.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import moment, { Moment } from 'moment'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; +import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; + +export default function UTCMoment() { + const [value, setValue] = React.useState(null); + + return ( + + + setValue(newValue)} /> + Value: {value == null ? 'null' : value.format()} + + + ); +} diff --git a/docs/data/date-pickers/adapters-locale/UTCMoment.tsx.preview b/docs/data/date-pickers/adapters-locale/UTCMoment.tsx.preview new file mode 100644 index 0000000000000..1bd40a8d05d80 --- /dev/null +++ b/docs/data/date-pickers/adapters-locale/UTCMoment.tsx.preview @@ -0,0 +1,2 @@ + setValue(newValue)} /> +Value: {value == null ? 'null' : value.format()} \ No newline at end of file diff --git a/docs/data/date-pickers/adapters-locale/adapters-locale.md b/docs/data/date-pickers/adapters-locale/adapters-locale.md index 3dc18d099eff7..ef1c3282f0edb 100644 --- a/docs/data/date-pickers/adapters-locale/adapters-locale.md +++ b/docs/data/date-pickers/adapters-locale/adapters-locale.md @@ -215,6 +215,33 @@ To use UTC dates with `dayjs`, you have to: {{"demo": "UTCDayjs.js", "defaultCodeOpen": false}} +### With moment + +To use UTC dates with `moment`, you have to: + +1. Pass `moment.utc` to `LocalizationProvider` `dateLibInstance` prop: + + ```tsx + + {children} + + ``` + +2. Always pass dates created with `moment.utc`: + + ```tsx + + ``` + +{{"demo": "UTCMoment.js", "defaultCodeOpen": false}} + ### Other libraries UTC support is an ongoing topic. diff --git a/packages/x-date-pickers/src/AdapterMoment/index.ts b/packages/x-date-pickers/src/AdapterMoment/index.ts index 8b1c5b3113da2..ea2fea8ffa398 100644 --- a/packages/x-date-pickers/src/AdapterMoment/index.ts +++ b/packages/x-date-pickers/src/AdapterMoment/index.ts @@ -72,7 +72,7 @@ export class AdapterMoment .map((token) => { const firstCharacter = token[0]; if (firstCharacter === 'L' || firstCharacter === ';') { - return this.moment + return defaultMoment .localeData(this.getCurrentLocaleCode()) .longDateFormat(token as LongDateFormatKey); } @@ -82,6 +82,10 @@ export class AdapterMoment .join(''); }; + public getCurrentLocaleCode = () => { + return this.locale || defaultMoment.locale(); + }; + // Redefined here just to show how it can be written using expandFormat public getFormatHelperText = (format: string) => { return this.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase(); @@ -90,4 +94,12 @@ export class AdapterMoment public getWeekNumber = (date: defaultMoment.Moment) => { return date.week(); }; + + public getWeekdays = () => { + return defaultMoment.weekdaysShort(true); + }; + + public is12HourCycleInCurrentLocale = () => { + return /A|a/.test(defaultMoment.localeData(this.getCurrentLocaleCode()).longDateFormat('LT')); + }; } From b5cb70df6110263dc9b2f19a8f5a8c7b3003147d Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Tue, 28 Feb 2023 18:05:20 +0500 Subject: [PATCH 14/24] [DataGrid] Add typing for `componentsProps` (#7968) Signed-off-by: Bilal Shafi Co-authored-by: Matheus Wichman --- .../data/data-grid/components/CustomFooter.js | 9 +- .../data-grid/components/CustomFooter.tsx | 18 +++- docs/data/data-grid/components/components.md | 78 ++++++++++---- .../x/api/data-grid/grid-filter-panel.json | 2 +- .../x-data-grid/src/components/GridRow.tsx | 36 ++++--- .../src/components/cell/GridCell.tsx | 4 +- .../GridColumnHeaderFilterIconButton.tsx | 2 +- .../columnHeaders/GridIconButtonContainer.tsx | 2 +- .../containers/GridFooterContainer.tsx | 2 +- .../src/components/containers/GridOverlay.tsx | 2 +- .../containers/GridToolbarContainer.tsx | 2 +- .../src/components/menu/GridMenu.tsx | 2 +- .../src/components/panel/GridColumnsPanel.tsx | 2 +- .../src/components/panel/GridPanel.tsx | 2 +- .../src/components/panel/GridPanelContent.tsx | 2 +- .../src/components/panel/GridPanelFooter.tsx | 2 +- .../src/components/panel/GridPanelHeader.tsx | 2 +- .../src/components/panel/GridPanelWrapper.tsx | 2 +- .../panel/filterPanel/GridFilterForm.tsx | 2 +- .../panel/filterPanel/GridFilterPanel.tsx | 2 + .../toolbar/GridToolbarFilterButton.tsx | 2 +- .../toolbar/GridToolbarQuickFilter.tsx | 2 +- .../virtualization/useGridVirtualScroller.tsx | 3 +- .../src/models/gridSlotsComponentsProps.ts | 101 ++++++++++++++---- scripts/x-data-grid-premium.exports.json | 23 ++++ scripts/x-data-grid-pro.exports.json | 23 ++++ scripts/x-data-grid.exports.json | 23 ++++ 27 files changed, 259 insertions(+), 93 deletions(-) diff --git a/docs/data/data-grid/components/CustomFooter.js b/docs/data/data-grid/components/CustomFooter.js index 22731059da0d0..dfe05ba70c444 100644 --- a/docs/data/data-grid/components/CustomFooter.js +++ b/docs/data/data-grid/components/CustomFooter.js @@ -1,12 +1,11 @@ import * as React from 'react'; -import PropTypes from 'prop-types'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import { useDemoData } from '@mui/x-data-grid-generator'; import { DataGrid } from '@mui/x-data-grid'; import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'; -function CustomFooterStatusComponent(props) { +export function CustomFooterStatusComponent(props) { return ( , +) { return ( ('connected'); const { data } = useDemoData({ dataSet: 'Employee', rowLength: 4, diff --git a/docs/data/data-grid/components/components.md b/docs/data/data-grid/components/components.md index 78424e6fac830..42fe3482c2529 100644 --- a/docs/data/data-grid/components/components.md +++ b/docs/data/data-grid/components/components.md @@ -62,7 +62,7 @@ function CustomPagination() { } ``` -## Components +## Component slots The full list of overridable components slots can be found on the [`GridSlotsComponent`](/x/api/data-grid/data-grid/#slots) API page. @@ -72,25 +72,6 @@ As mentioned above, the column menu is a component slot that can be recomposed e {{"demo": "CustomColumnMenu.js", "bg": "inline"}} -Below is the default `GridColumnMenu`. - -```tsx -export const GridColumnMenu = React.forwardRef< - HTMLUListElement, - GridColumnMenuProps ->(function GridColumnMenu(props: GridColumnMenuProps, ref) { - const { hideMenu, colDef } = props; - - return ( - - - - - - ); -}); -``` - ### Toolbar To enable the toolbar you need to add the `toolbar: GridToolbar` to the grid `slots` prop. @@ -174,6 +155,63 @@ As any component slot, every icon can be customized. However, it is not yet poss {{"demo": "CustomSortIcons.js", "bg": "inline"}} +## Slot props + +To override default props or pass custom props to slot components, use the `slotProps` prop. + +```tsx + +``` + +### Custom slot props with TypeScript + +If the custom component requires additional props to work properly, TypeScript may throw type errors. To prevent, use [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation) to enhance the props interface. + +The naming of overridable interfaces uses a pattern like this: + +```js +`${slotNameInPascalCase}PropsOverrides`; +``` + +For example, for `columnMenu` slot, the interface name would be `ColumnMenuPropsOverrides`. + +This [file](https://github.com/mui/mui-x/blob/-/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts) lists all the interfaces for each slot which could be used for augmentation. + +```tsx +// augment the props for `toolbar` slot +declare module '@mui/x-data-grid' { + interface ToolbarPropsOverrides { + someCustomString: string; + someCustomNumber: number; + } +} + + +``` + +This demo below shows how to use the `slotProps` prop and module augmentation to pass a new prop `status` to the `footer` slot. + +{{"demo": "CustomFooter.js", "bg": "inline"}} + ## API - [DataGrid](/x/api/data-grid/data-grid/) diff --git a/docs/pages/x/api/data-grid/grid-filter-panel.json b/docs/pages/x/api/data-grid/grid-filter-panel.json index 89e2dfb7fa85c..9d51eaf76f0bc 100644 --- a/docs/pages/x/api/data-grid/grid-filter-panel.json +++ b/docs/pages/x/api/data-grid/grid-filter-panel.json @@ -4,7 +4,7 @@ "filterFormProps": { "type": { "name": "shape", - "description": "{ columnInputProps?: any, columnsSort?: 'asc'
| 'desc', deleteIconProps?: any, logicOperatorInputProps?: any, operatorInputProps?: any, valueInputProps?: any }" + "description": "{ columnInputProps?: any, columnsSort?: 'asc'
| 'desc', deleteIconProps?: any, filterColumns?: func, logicOperatorInputProps?: any, operatorInputProps?: any, valueInputProps?: any }" } }, "getColumnForNewFilter": { "type": { "name": "func" } }, diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 33ce82d08e431..a3d21ef5443eb 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -11,7 +11,7 @@ import { GridEditModes, GridRowModes, GridCellModes } from '../models/gridEditRo import { useGridApiContext } from '../hooks/utils/useGridApiContext'; import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses'; import { useGridRootProps } from '../hooks/utils/useGridRootProps'; -import { DataGridProcessedProps } from '../models/props/DataGridProps'; +import type { DataGridProcessedProps } from '../models/props/DataGridProps'; import { GridStateColDef } from '../models/colDef/gridColDef'; import { gridColumnsTotalWidthSelector } from '../hooks/features/columns/gridColumnsSelector'; import { useGridSelector } from '../hooks/utils/useGridSelector'; @@ -26,10 +26,10 @@ import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSele import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector'; import { gridColumnGroupsHeaderMaxDepthSelector } from '../hooks/features/columnGrouping/gridColumnGroupsSelector'; import { randomNumberBetween } from '../utils/utils'; -import { GridCellProps } from './cell/GridCell'; +import type { GridCellProps } from './cell/GridCell'; import { gridEditRowsStateSelector } from '../hooks/features/editing/gridEditingSelectors'; -export interface GridRowProps { +export interface GridRowProps extends React.HTMLAttributes { rowId: GridRowId; selected: boolean; /** @@ -60,6 +60,7 @@ export interface GridRowProps { onDoubleClick?: React.MouseEventHandler; onMouseEnter?: React.MouseEventHandler; onMouseLeave?: React.MouseEventHandler; + [x: string]: any; // Allow custom attributes like data-* and aria-* } type OwnerState = Pick & { @@ -96,10 +97,7 @@ function EmptyCell({ width }: { width: number }) { return
; // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller } -const GridRow = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes & GridRowProps ->(function GridRow(props, refProp) { +const GridRow = React.forwardRef(function GridRow(props, refProp) { const { selected, rowId, @@ -523,8 +521,8 @@ GridRow.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- - containerWidth: PropTypes.number.isRequired, - firstColumnToRender: PropTypes.number.isRequired, + containerWidth: PropTypes.number, + firstColumnToRender: PropTypes.number, /** * Determines which cell has focus. * If `null`, no cell in this row has focus. @@ -534,21 +532,25 @@ GridRow.propTypes = { * Index of the row in the whole sorted and filtered dataset. * If some rows above have expanded children, this index also take those children into account. */ - index: PropTypes.number.isRequired, + index: PropTypes.number, isLastVisible: PropTypes.bool, - lastColumnToRender: PropTypes.number.isRequired, - position: PropTypes.oneOf(['center', 'left', 'right']).isRequired, - renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired, + lastColumnToRender: PropTypes.number, + onClick: PropTypes.func, + onDoubleClick: PropTypes.func, + onMouseEnter: PropTypes.func, + onMouseLeave: PropTypes.func, + position: PropTypes.oneOf(['center', 'left', 'right']), + renderedColumns: PropTypes.arrayOf(PropTypes.object), row: PropTypes.object, - rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired, - rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, - selected: PropTypes.bool.isRequired, + rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]), + rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + selected: PropTypes.bool, /** * Determines which cell should be tabbable by having tabIndex=0. * If `null`, no cell in this row is in the tab sequence. */ tabbableCell: PropTypes.string, - visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired, + visibleColumns: PropTypes.arrayOf(PropTypes.object), } as any; export { GridRow }; diff --git a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx index bca8187b6e8c5..a5a355b362455 100644 --- a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx +++ b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx @@ -20,7 +20,7 @@ import { GridAlignment } from '../../models/colDef/gridColDef'; import { useGridApiContext } from '../../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; import { gridFocusCellSelector } from '../../hooks/features/focus/gridFocusStateSelector'; -import { DataGridProcessedProps } from '../../models/props/DataGridProps'; +import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { FocusElement } from '../../models/params/gridCellParams'; export interface GridCellProps { @@ -49,7 +49,7 @@ export interface GridCellProps { onKeyDown?: React.KeyboardEventHandler; onDragEnter?: React.DragEventHandler; onDragOver?: React.DragEventHandler; - [x: string]: any; // TODO it should not accept unspecified props + [x: string]: any; } // Based on https://stackoverflow.com/a/59518678 diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx index 0797dc8a67fda..e9c348f056725 100644 --- a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx +++ b/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx @@ -7,7 +7,7 @@ import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel import { useGridApiContext } from '../../hooks/utils/useGridApiContext'; import { getDataGridUtilityClass } from '../../constants/gridClasses'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; -import { DataGridProcessedProps } from '../../models/props/DataGridProps'; +import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { GridIconButtonContainer } from './GridIconButtonContainer'; import { GridColumnHeaderParams } from '../../models/params/gridColumnHeaderParams'; diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridIconButtonContainer.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/GridIconButtonContainer.tsx index 0dd8d56ceeb20..a40939492da66 100644 --- a/packages/grid/x-data-grid/src/components/columnHeaders/GridIconButtonContainer.tsx +++ b/packages/grid/x-data-grid/src/components/columnHeaders/GridIconButtonContainer.tsx @@ -4,7 +4,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/utils'; import { styled } from '@mui/material/styles'; import { getDataGridUtilityClass } from '../../constants/gridClasses'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; -import { DataGridProcessedProps } from '../../models/props/DataGridProps'; +import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; export type GridIconButtonContainerProps = React.HTMLAttributes; diff --git a/packages/grid/x-data-grid/src/components/containers/GridFooterContainer.tsx b/packages/grid/x-data-grid/src/components/containers/GridFooterContainer.tsx index 552d5399864e2..43eb8db0d5abf 100644 --- a/packages/grid/x-data-grid/src/components/containers/GridFooterContainer.tsx +++ b/packages/grid/x-data-grid/src/components/containers/GridFooterContainer.tsx @@ -5,7 +5,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/utils'; import { styled, SxProps, Theme } from '@mui/material/styles'; import { getDataGridUtilityClass } from '../../constants/gridClasses'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; -import { DataGridProcessedProps } from '../../models/props/DataGridProps'; +import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; export type GridFooterContainerProps = React.HTMLAttributes & { sx?: SxProps; diff --git a/packages/grid/x-data-grid/src/components/containers/GridOverlay.tsx b/packages/grid/x-data-grid/src/components/containers/GridOverlay.tsx index 9dc963340db60..b3949b8f92c11 100644 --- a/packages/grid/x-data-grid/src/components/containers/GridOverlay.tsx +++ b/packages/grid/x-data-grid/src/components/containers/GridOverlay.tsx @@ -4,9 +4,9 @@ import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@mui/utils'; import { SxProps } from '@mui/system'; import { Theme, alpha, styled } from '@mui/material/styles'; +import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { getDataGridUtilityClass } from '../../constants/gridClasses'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; -import { DataGridProcessedProps } from '../../models/props/DataGridProps'; export type GridOverlayProps = React.HTMLAttributes & { sx?: SxProps; diff --git a/packages/grid/x-data-grid/src/components/containers/GridToolbarContainer.tsx b/packages/grid/x-data-grid/src/components/containers/GridToolbarContainer.tsx index f1068bd1dc6cb..acb623e17c817 100644 --- a/packages/grid/x-data-grid/src/components/containers/GridToolbarContainer.tsx +++ b/packages/grid/x-data-grid/src/components/containers/GridToolbarContainer.tsx @@ -3,8 +3,8 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { styled, SxProps, Theme } from '@mui/material/styles'; import { unstable_composeClasses as composeClasses } from '@mui/utils'; -import { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { getDataGridUtilityClass } from '../../constants/gridClasses'; +import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; export type GridToolbarContainerProps = React.HTMLAttributes & { diff --git a/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx b/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx index 95520b084b9c6..6ea294286e633 100644 --- a/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx +++ b/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx @@ -8,7 +8,7 @@ import Paper from '@mui/material/Paper'; import Popper, { PopperProps } from '@mui/material/Popper'; import { styled } from '@mui/material/styles'; import { getDataGridUtilityClass, gridClasses } from '../../constants/gridClasses'; -import { DataGridProcessedProps } from '../../models/props/DataGridProps'; +import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; import { useGridApiContext } from '../../hooks/utils/useGridApiContext'; diff --git a/packages/grid/x-data-grid/src/components/panel/GridColumnsPanel.tsx b/packages/grid/x-data-grid/src/components/panel/GridColumnsPanel.tsx index d95d5ff1c89ac..da53c4d8d0035 100644 --- a/packages/grid/x-data-grid/src/components/panel/GridColumnsPanel.tsx +++ b/packages/grid/x-data-grid/src/components/panel/GridColumnsPanel.tsx @@ -18,7 +18,7 @@ import { GridPanelHeader } from './GridPanelHeader'; import { GridPanelWrapper, GridPanelWrapperProps } from './GridPanelWrapper'; import { GRID_EXPERIMENTAL_ENABLED } from '../../constants/envConstants'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; -import { DataGridProcessedProps } from '../../models/props/DataGridProps'; +import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; import type { GridColDef } from '../../models/colDef/gridColDef'; import { getDataGridUtilityClass } from '../../constants/gridClasses'; diff --git a/packages/grid/x-data-grid/src/components/panel/GridPanel.tsx b/packages/grid/x-data-grid/src/components/panel/GridPanel.tsx index eeecd8d821593..f07d4446d1e90 100644 --- a/packages/grid/x-data-grid/src/components/panel/GridPanel.tsx +++ b/packages/grid/x-data-grid/src/components/panel/GridPanel.tsx @@ -9,7 +9,7 @@ import Popper from '@mui/material/Popper'; import { useGridApiContext } from '../../hooks/utils/useGridApiContext'; import { isEscapeKey } from '../../utils/keyboardUtils'; import { gridClasses } from '../../constants/gridClasses'; -import { DataGridProcessedProps } from '../../models/props/DataGridProps'; +import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; type OwnerState = DataGridProcessedProps; diff --git a/packages/grid/x-data-grid/src/components/panel/GridPanelContent.tsx b/packages/grid/x-data-grid/src/components/panel/GridPanelContent.tsx index 1d6f2e339c353..1a9a9fb5dabd8 100644 --- a/packages/grid/x-data-grid/src/components/panel/GridPanelContent.tsx +++ b/packages/grid/x-data-grid/src/components/panel/GridPanelContent.tsx @@ -3,8 +3,8 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { styled, SxProps, Theme } from '@mui/material/styles'; import { unstable_composeClasses as composeClasses } from '@mui/utils'; +import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { getDataGridUtilityClass } from '../../constants/gridClasses'; -import { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; type OwnerState = DataGridProcessedProps; diff --git a/packages/grid/x-data-grid/src/components/panel/GridPanelFooter.tsx b/packages/grid/x-data-grid/src/components/panel/GridPanelFooter.tsx index 05cfdc0d2b258..e8f28d26f2beb 100644 --- a/packages/grid/x-data-grid/src/components/panel/GridPanelFooter.tsx +++ b/packages/grid/x-data-grid/src/components/panel/GridPanelFooter.tsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { styled, SxProps, Theme } from '@mui/material/styles'; import { unstable_composeClasses as composeClasses } from '@mui/utils'; -import { DataGridProcessedProps } from '../../models/props/DataGridProps'; +import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { getDataGridUtilityClass } from '../../constants/gridClasses'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; diff --git a/packages/grid/x-data-grid/src/components/panel/GridPanelHeader.tsx b/packages/grid/x-data-grid/src/components/panel/GridPanelHeader.tsx index b758e8c6e9a96..8dc6105e7c2b6 100644 --- a/packages/grid/x-data-grid/src/components/panel/GridPanelHeader.tsx +++ b/packages/grid/x-data-grid/src/components/panel/GridPanelHeader.tsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { styled, SxProps, Theme } from '@mui/material/styles'; import { unstable_composeClasses as composeClasses } from '@mui/utils'; -import { DataGridProcessedProps } from '../../models/props/DataGridProps'; +import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { getDataGridUtilityClass } from '../../constants/gridClasses'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; diff --git a/packages/grid/x-data-grid/src/components/panel/GridPanelWrapper.tsx b/packages/grid/x-data-grid/src/components/panel/GridPanelWrapper.tsx index 8a781e1029c34..fee14b3b10411 100644 --- a/packages/grid/x-data-grid/src/components/panel/GridPanelWrapper.tsx +++ b/packages/grid/x-data-grid/src/components/panel/GridPanelWrapper.tsx @@ -5,8 +5,8 @@ import TrapFocus, { TrapFocusProps } from '@mui/material/Unstable_TrapFocus'; import { styled, Theme } from '@mui/material/styles'; import { MUIStyledCommonProps } from '@mui/system'; import { unstable_composeClasses as composeClasses } from '@mui/utils'; +import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { getDataGridUtilityClass } from '../../constants/gridClasses'; -import { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; type OwnerState = DataGridProcessedProps; diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx index fa1b7c4a24730..434b1d1e46eec 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx @@ -17,7 +17,7 @@ import { useGridSelector } from '../../../hooks/utils/useGridSelector'; import { GridFilterItem, GridLogicOperator } from '../../../models/gridFilterItem'; import { useGridApiContext } from '../../../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; -import { DataGridProcessedProps } from '../../../models/props/DataGridProps'; +import type { DataGridProcessedProps } from '../../../models/props/DataGridProps'; import { getDataGridUtilityClass } from '../../../constants/gridClasses'; import { GridColDef, GridStateColDef } from '../../../models/colDef/gridColDef'; diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterPanel.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterPanel.tsx index 6091cf7686998..c2550484885ff 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterPanel.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterPanel.tsx @@ -41,6 +41,7 @@ export interface GridFilterPanelProps | 'operatorInputProps' | 'columnInputProps' | 'valueInputProps' + | 'filterColumns' >; /* @@ -285,6 +286,7 @@ GridFilterPanel.propTypes = { columnInputProps: PropTypes.any, columnsSort: PropTypes.oneOf(['asc', 'desc']), deleteIconProps: PropTypes.any, + filterColumns: PropTypes.func, logicOperatorInputProps: PropTypes.any, operatorInputProps: PropTypes.any, valueInputProps: PropTypes.any, diff --git a/packages/grid/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx b/packages/grid/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx index e07522146e6fa..ee35194e02609 100644 --- a/packages/grid/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx +++ b/packages/grid/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx @@ -17,7 +17,7 @@ import { GridTranslationKeys } from '../../models/api/gridLocaleTextApi'; import { GridFilterItem } from '../../models/gridFilterItem'; import { useGridApiContext } from '../../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; -import { DataGridProcessedProps } from '../../models/props/DataGridProps'; +import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { getDataGridUtilityClass } from '../../constants/gridClasses'; type OwnerState = DataGridProcessedProps; diff --git a/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx b/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx index 6b913a6ef818d..ef1513e19e100 100644 --- a/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx +++ b/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx @@ -8,7 +8,7 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; import { useGridSelector } from '../../hooks/utils/useGridSelector'; import { gridQuickFilterValuesSelector } from '../../hooks/features/filter'; import { GridFilterModel } from '../../models/gridFilterModel'; -import { DataGridProcessedProps } from '../../models/props/DataGridProps'; +import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { isDeepEqual } from '../../utils/utils'; type OwnerState = DataGridProcessedProps; diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 07de08ae95e59..fadc43294af81 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -17,7 +17,6 @@ import { import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector'; import { useGridVisibleRows } from '../../utils/useGridVisibleRows'; import { GridEventListener } from '../../../models/events'; -import { GridSlotsComponentsProps } from '../../../models/gridSlotsComponentsProps'; import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler'; import { clamp } from '../../../utils/utils'; import { GridRenderContext, GridRowEntry } from '../../../models'; @@ -143,7 +142,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { const rowStyleCache = React.useRef>({}); const prevGetRowProps = React.useRef(); - const prevRootRowStyle = React.useRef(); + const prevRootRowStyle = React.useRef(); const getRenderedColumnsRef = React.useRef( defaultMemoize( diff --git a/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts b/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts index 152b7ff834563..4810c7ddf499e 100644 --- a/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts +++ b/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts @@ -1,28 +1,83 @@ +import * as React from 'react'; +import { CheckboxProps } from '@mui/material/Checkbox'; +import { TextFieldProps } from '@mui/material/TextField'; +import { FormControlProps } from '@mui/material/FormControl'; +import { SelectProps } from '@mui/material/Select'; +import { SwitchProps } from '@mui/material/Switch'; +import { ButtonProps } from '@mui/material/Button'; +import { IconButtonProps } from '@mui/material/IconButton'; +import { TooltipProps } from '@mui/material/Tooltip'; +import { PopperProps } from '@mui/material/Popper'; +import { TablePaginationProps } from '@mui/material/TablePagination'; +import { GridToolbarProps } from '../components/toolbar/GridToolbar'; +import { ColumnHeaderFilterIconButtonProps } from '../components/columnHeaders/GridColumnHeaderFilterIconButton'; +import { GridColumnMenuProps } from '../components/menu/columnMenu/GridColumnMenuProps'; +import { GridColumnsPanelProps } from '../components/panel/GridColumnsPanel'; +import { GridFilterPanelProps } from '../components/panel/filterPanel/GridFilterPanel'; +import { GridFooterContainerProps } from '../components/containers/GridFooterContainer'; +import { GridOverlayProps } from '../components/containers/GridOverlay'; +import { GridPanelProps } from '../components/panel/GridPanel'; +import type { GridRowProps } from '../components/GridRow'; +import type { GridCellProps } from '../components/cell/GridCell'; + +// Overrides for module augmentation +export interface BaseCheckboxPropsOverrides {} +export interface BaseTextFieldPropsOverrides {} +export interface BaseFormControlPropsOverrides {} +export interface BaseSelectPropsOverrides {} +export interface BaseSwitchPropsOverrides {} +export interface BaseButtonPropsOverrides {} +export interface BaseIconButtonPropsOverrides {} +export interface BaseTooltipPropsOverrides {} +export interface BasePopperPropsOverrides {} +export interface CellPropsOverrides {} +export interface ToolbarPropsOverrides {} +export interface ColumnHeaderFilterIconButtonPropsOverrides {} +export interface ColumnMenuPropsOverrides {} +export interface ColumnsPanelPropsOverrides {} +export interface FilterPanelPropsOverrides {} +export interface FooterPropsOverrides {} +export interface PaginationPropsOverrides {} +export interface LoadingOverlayPropsOverrides {} +export interface NoResultsOverlayPropsOverrides {} +export interface NoRowsOverlayPropsOverrides {} +export interface PanelPropsOverrides {} +export interface PreferencesPanelPropsOverrides {} +export interface RowPropsOverrides {} + +type SlotProps = Partial & Overrides; + /** * Overrideable components props dynamically passed to the component at rendering. */ export interface GridSlotsComponentsProps { - baseCheckbox?: any; - baseTextField?: any; - baseFormControl?: any; - baseSelect?: any; - baseSwitch?: any; - baseButton?: any; - baseIconButton?: any; - basePopper?: any; - baseTooltip?: any; - cell?: any; - columnHeaderFilterIconButton?: any; - columnMenu?: any; - columnsPanel?: any; - filterPanel?: any; - footer?: any; - loadingOverlay?: any; - noResultsOverlay?: any; - noRowsOverlay?: any; - pagination?: any; - panel?: any; - preferencesPanel?: any; - row?: any; - toolbar?: any; + baseCheckbox?: SlotProps; + baseTextField?: SlotProps; + baseFormControl?: SlotProps; + baseSelect?: SlotProps; + baseSwitch?: SlotProps; + baseButton?: SlotProps; + baseIconButton?: SlotProps; + basePopper?: SlotProps; + baseTooltip?: SlotProps; + cell?: SlotProps; + columnHeaderFilterIconButton?: SlotProps< + ColumnHeaderFilterIconButtonProps, + ColumnHeaderFilterIconButtonPropsOverrides + >; + columnMenu?: SlotProps; + columnsPanel?: SlotProps; + filterPanel?: SlotProps; + footer?: SlotProps; + loadingOverlay?: SlotProps; + noResultsOverlay?: SlotProps; + noRowsOverlay?: SlotProps; + pagination?: SlotProps; + panel?: SlotProps; + preferencesPanel?: SlotProps< + React.HTMLAttributes, + PreferencesPanelPropsOverrides + >; + row?: SlotProps; + toolbar?: SlotProps; } diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index 083e823e4c4c3..8c4b2134a538a 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -2,10 +2,23 @@ { "name": "arSD", "kind": "Variable" }, { "name": "AutoSizerProps", "kind": "Interface" }, { "name": "AutoSizerSize", "kind": "Interface" }, + { "name": "BaseButtonPropsOverrides", "kind": "Interface" }, + { "name": "BaseCheckboxPropsOverrides", "kind": "Interface" }, + { "name": "BaseFormControlPropsOverrides", "kind": "Interface" }, + { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" }, + { "name": "BasePopperPropsOverrides", "kind": "Interface" }, + { "name": "BaseSelectPropsOverrides", "kind": "Interface" }, + { "name": "BaseSwitchPropsOverrides", "kind": "Interface" }, + { "name": "BaseTextFieldPropsOverrides", "kind": "Interface" }, + { "name": "BaseTooltipPropsOverrides", "kind": "Interface" }, { "name": "beBY", "kind": "Variable" }, { "name": "bgBG", "kind": "Variable" }, + { "name": "CellPropsOverrides", "kind": "Interface" }, { "name": "checkGridRowIdIsValid", "kind": "Function" }, { "name": "ColumnHeaderFilterIconButtonProps", "kind": "Interface" }, + { "name": "ColumnHeaderFilterIconButtonPropsOverrides", "kind": "Interface" }, + { "name": "ColumnMenuPropsOverrides", "kind": "Interface" }, + { "name": "ColumnsPanelPropsOverrides", "kind": "Interface" }, { "name": "ColumnsStylesInterface", "kind": "Interface" }, { "name": "createUseGridApiEventHandler", "kind": "Function" }, { "name": "csCZ", "kind": "Variable" }, @@ -25,7 +38,9 @@ { "name": "faIR", "kind": "Variable" }, { "name": "fiFI", "kind": "Variable" }, { "name": "FilterColumnsArgs", "kind": "Interface" }, + { "name": "FilterPanelPropsOverrides", "kind": "Interface" }, { "name": "FocusElement", "kind": "Interface" }, + { "name": "FooterPropsOverrides", "kind": "Interface" }, { "name": "frFR", "kind": "Variable" }, { "name": "getAggregationFooterRowIdFromGroupId", "kind": "Variable" }, { "name": "GetColumnForNewFilterArgs", "kind": "Interface" }, @@ -561,13 +576,19 @@ { "name": "jaJP", "kind": "Variable" }, { "name": "koKR", "kind": "Variable" }, { "name": "LicenseInfo", "kind": "Class" }, + { "name": "LoadingOverlayPropsOverrides", "kind": "Interface" }, { "name": "Logger", "kind": "Interface" }, { "name": "MuiBaseEvent", "kind": "TypeAlias" }, { "name": "MuiEvent", "kind": "TypeAlias" }, { "name": "nbNO", "kind": "Variable" }, { "name": "nlNL", "kind": "Variable" }, + { "name": "NoResultsOverlayPropsOverrides", "kind": "Interface" }, + { "name": "NoRowsOverlayPropsOverrides", "kind": "Interface" }, { "name": "OutputSelector", "kind": "Interface" }, + { "name": "PaginationPropsOverrides", "kind": "Interface" }, + { "name": "PanelPropsOverrides", "kind": "Interface" }, { "name": "plPL", "kind": "Variable" }, + { "name": "PreferencesPanelPropsOverrides", "kind": "Interface" }, { "name": "ptBR", "kind": "Variable" }, { "name": "renderActionsCell", "kind": "Variable" }, { "name": "renderBooleanCell", "kind": "Variable" }, @@ -576,6 +597,7 @@ { "name": "renderEditInputCell", "kind": "Variable" }, { "name": "renderEditSingleSelectCell", "kind": "Variable" }, { "name": "roRO", "kind": "Variable" }, + { "name": "RowPropsOverrides", "kind": "Interface" }, { "name": "ruRU", "kind": "Variable" }, { "name": "selectedGridRowsCountSelector", "kind": "Variable" }, { "name": "selectedGridRowsSelector", "kind": "Variable" }, @@ -585,6 +607,7 @@ { "name": "SUBMIT_FILTER_DATE_STROKE_TIME", "kind": "Variable" }, { "name": "SUBMIT_FILTER_STROKE_TIME", "kind": "Variable" }, { "name": "svSE", "kind": "Variable" }, + { "name": "ToolbarPropsOverrides", "kind": "Interface" }, { "name": "trTR", "kind": "Variable" }, { "name": "ukUA", "kind": "Variable" }, { "name": "UncapitalizedGridPremiumSlotsComponent", "kind": "Interface" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index f84a847da5a49..b6b481f86565a 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -2,10 +2,23 @@ { "name": "arSD", "kind": "Variable" }, { "name": "AutoSizerProps", "kind": "Interface" }, { "name": "AutoSizerSize", "kind": "Interface" }, + { "name": "BaseButtonPropsOverrides", "kind": "Interface" }, + { "name": "BaseCheckboxPropsOverrides", "kind": "Interface" }, + { "name": "BaseFormControlPropsOverrides", "kind": "Interface" }, + { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" }, + { "name": "BasePopperPropsOverrides", "kind": "Interface" }, + { "name": "BaseSelectPropsOverrides", "kind": "Interface" }, + { "name": "BaseSwitchPropsOverrides", "kind": "Interface" }, + { "name": "BaseTextFieldPropsOverrides", "kind": "Interface" }, + { "name": "BaseTooltipPropsOverrides", "kind": "Interface" }, { "name": "beBY", "kind": "Variable" }, { "name": "bgBG", "kind": "Variable" }, + { "name": "CellPropsOverrides", "kind": "Interface" }, { "name": "checkGridRowIdIsValid", "kind": "Function" }, { "name": "ColumnHeaderFilterIconButtonProps", "kind": "Interface" }, + { "name": "ColumnHeaderFilterIconButtonPropsOverrides", "kind": "Interface" }, + { "name": "ColumnMenuPropsOverrides", "kind": "Interface" }, + { "name": "ColumnsPanelPropsOverrides", "kind": "Interface" }, { "name": "createUseGridApiEventHandler", "kind": "Function" }, { "name": "csCZ", "kind": "Variable" }, { "name": "CursorCoordinates", "kind": "Interface" }, @@ -24,7 +37,9 @@ { "name": "faIR", "kind": "Variable" }, { "name": "fiFI", "kind": "Variable" }, { "name": "FilterColumnsArgs", "kind": "Interface" }, + { "name": "FilterPanelPropsOverrides", "kind": "Interface" }, { "name": "FocusElement", "kind": "Interface" }, + { "name": "FooterPropsOverrides", "kind": "Interface" }, { "name": "frFR", "kind": "Variable" }, { "name": "GetColumnForNewFilterArgs", "kind": "Interface" }, { "name": "getDataGridUtilityClass", "kind": "Function" }, @@ -514,13 +529,19 @@ { "name": "jaJP", "kind": "Variable" }, { "name": "koKR", "kind": "Variable" }, { "name": "LicenseInfo", "kind": "Class" }, + { "name": "LoadingOverlayPropsOverrides", "kind": "Interface" }, { "name": "Logger", "kind": "Interface" }, { "name": "MuiBaseEvent", "kind": "TypeAlias" }, { "name": "MuiEvent", "kind": "TypeAlias" }, { "name": "nbNO", "kind": "Variable" }, { "name": "nlNL", "kind": "Variable" }, + { "name": "NoResultsOverlayPropsOverrides", "kind": "Interface" }, + { "name": "NoRowsOverlayPropsOverrides", "kind": "Interface" }, { "name": "OutputSelector", "kind": "Interface" }, + { "name": "PaginationPropsOverrides", "kind": "Interface" }, + { "name": "PanelPropsOverrides", "kind": "Interface" }, { "name": "plPL", "kind": "Variable" }, + { "name": "PreferencesPanelPropsOverrides", "kind": "Interface" }, { "name": "ptBR", "kind": "Variable" }, { "name": "renderActionsCell", "kind": "Variable" }, { "name": "renderBooleanCell", "kind": "Variable" }, @@ -529,6 +550,7 @@ { "name": "renderEditInputCell", "kind": "Variable" }, { "name": "renderEditSingleSelectCell", "kind": "Variable" }, { "name": "roRO", "kind": "Variable" }, + { "name": "RowPropsOverrides", "kind": "Interface" }, { "name": "ruRU", "kind": "Variable" }, { "name": "selectedGridRowsCountSelector", "kind": "Variable" }, { "name": "selectedGridRowsSelector", "kind": "Variable" }, @@ -537,6 +559,7 @@ { "name": "SUBMIT_FILTER_DATE_STROKE_TIME", "kind": "Variable" }, { "name": "SUBMIT_FILTER_STROKE_TIME", "kind": "Variable" }, { "name": "svSE", "kind": "Variable" }, + { "name": "ToolbarPropsOverrides", "kind": "Interface" }, { "name": "trTR", "kind": "Variable" }, { "name": "ukUA", "kind": "Variable" }, { "name": "UncapitalizedGridProSlotsComponent", "kind": "Interface" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index 003acd9f0e1bf..053c4a4633d96 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -2,10 +2,23 @@ { "name": "arSD", "kind": "Variable" }, { "name": "AutoSizerProps", "kind": "Interface" }, { "name": "AutoSizerSize", "kind": "Interface" }, + { "name": "BaseButtonPropsOverrides", "kind": "Interface" }, + { "name": "BaseCheckboxPropsOverrides", "kind": "Interface" }, + { "name": "BaseFormControlPropsOverrides", "kind": "Interface" }, + { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" }, + { "name": "BasePopperPropsOverrides", "kind": "Interface" }, + { "name": "BaseSelectPropsOverrides", "kind": "Interface" }, + { "name": "BaseSwitchPropsOverrides", "kind": "Interface" }, + { "name": "BaseTextFieldPropsOverrides", "kind": "Interface" }, + { "name": "BaseTooltipPropsOverrides", "kind": "Interface" }, { "name": "beBY", "kind": "Variable" }, { "name": "bgBG", "kind": "Variable" }, + { "name": "CellPropsOverrides", "kind": "Interface" }, { "name": "checkGridRowIdIsValid", "kind": "Function" }, { "name": "ColumnHeaderFilterIconButtonProps", "kind": "Interface" }, + { "name": "ColumnHeaderFilterIconButtonPropsOverrides", "kind": "Interface" }, + { "name": "ColumnMenuPropsOverrides", "kind": "Interface" }, + { "name": "ColumnsPanelPropsOverrides", "kind": "Interface" }, { "name": "createUseGridApiEventHandler", "kind": "Function" }, { "name": "csCZ", "kind": "Variable" }, { "name": "CursorCoordinates", "kind": "Interface" }, @@ -22,7 +35,9 @@ { "name": "faIR", "kind": "Variable" }, { "name": "fiFI", "kind": "Variable" }, { "name": "FilterColumnsArgs", "kind": "Interface" }, + { "name": "FilterPanelPropsOverrides", "kind": "Interface" }, { "name": "FocusElement", "kind": "Interface" }, + { "name": "FooterPropsOverrides", "kind": "Interface" }, { "name": "frFR", "kind": "Variable" }, { "name": "GetColumnForNewFilterArgs", "kind": "Interface" }, { "name": "getDataGridUtilityClass", "kind": "Function" }, @@ -472,13 +487,19 @@ { "name": "itIT", "kind": "Variable" }, { "name": "jaJP", "kind": "Variable" }, { "name": "koKR", "kind": "Variable" }, + { "name": "LoadingOverlayPropsOverrides", "kind": "Interface" }, { "name": "Logger", "kind": "Interface" }, { "name": "MuiBaseEvent", "kind": "TypeAlias" }, { "name": "MuiEvent", "kind": "TypeAlias" }, { "name": "nbNO", "kind": "Variable" }, { "name": "nlNL", "kind": "Variable" }, + { "name": "NoResultsOverlayPropsOverrides", "kind": "Interface" }, + { "name": "NoRowsOverlayPropsOverrides", "kind": "Interface" }, { "name": "OutputSelector", "kind": "Interface" }, + { "name": "PaginationPropsOverrides", "kind": "Interface" }, + { "name": "PanelPropsOverrides", "kind": "Interface" }, { "name": "plPL", "kind": "Variable" }, + { "name": "PreferencesPanelPropsOverrides", "kind": "Interface" }, { "name": "ptBR", "kind": "Variable" }, { "name": "renderActionsCell", "kind": "Variable" }, { "name": "renderBooleanCell", "kind": "Variable" }, @@ -487,6 +508,7 @@ { "name": "renderEditInputCell", "kind": "Variable" }, { "name": "renderEditSingleSelectCell", "kind": "Variable" }, { "name": "roRO", "kind": "Variable" }, + { "name": "RowPropsOverrides", "kind": "Interface" }, { "name": "ruRU", "kind": "Variable" }, { "name": "selectedGridRowsCountSelector", "kind": "Variable" }, { "name": "selectedGridRowsSelector", "kind": "Variable" }, @@ -495,6 +517,7 @@ { "name": "SUBMIT_FILTER_DATE_STROKE_TIME", "kind": "Variable" }, { "name": "SUBMIT_FILTER_STROKE_TIME", "kind": "Variable" }, { "name": "svSE", "kind": "Variable" }, + { "name": "ToolbarPropsOverrides", "kind": "Interface" }, { "name": "trTR", "kind": "Variable" }, { "name": "ukUA", "kind": "Variable" }, { "name": "UncapitalizedGridSlotsComponent", "kind": "Interface" }, From f28bc1989c267241b24a05b675bcafdc7862b22e Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Tue, 28 Feb 2023 14:30:16 +0100 Subject: [PATCH 15/24] [pickers] Fix layout `sx` propagation (#8064) --- .../hooks/useStaticRangePicker/useStaticRangePicker.tsx | 7 ++++++- .../internals/hooks/useStaticPicker/useStaticPicker.tsx | 7 ++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useStaticRangePicker/useStaticRangePicker.tsx b/packages/x-date-pickers-pro/src/internal/hooks/useStaticRangePicker/useStaticRangePicker.tsx index 3056d98afaeed..b4b2d096a99b7 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useStaticRangePicker/useStaticRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/internal/hooks/useStaticRangePicker/useStaticRangePicker.tsx @@ -80,7 +80,12 @@ export const useStaticRangePicker = < {...slotProps?.layout} slots={slots} slotProps={slotPropsForLayout} - sx={sx} + sx={[ + ...(Array.isArray(sx) ? sx : [sx]), + ...(Array.isArray(slotProps?.layout?.sx) + ? slotProps!.layout!.sx + : [slotProps?.layout?.sx]), + ]} className={clsx(className, slotProps?.layout?.className)} ref={ref} > diff --git a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx index 5b8c6fdf3c072..b9938b5296f31 100644 --- a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx @@ -58,7 +58,12 @@ export const useStaticPicker = < {...slotProps?.layout} slots={slots} slotProps={slotProps} - sx={sx} + sx={[ + ...(Array.isArray(sx) ? sx : [sx]), + ...(Array.isArray(slotProps?.layout?.sx) + ? slotProps!.layout!.sx + : [slotProps?.layout?.sx]), + ]} className={clsx(className, slotProps?.layout?.className)} ref={ref} > From 222051444fdb4e1424f46b588156c914fb8b328a Mon Sep 17 00:00:00 2001 From: Lukas Date: Tue, 28 Feb 2023 17:38:02 +0200 Subject: [PATCH 16/24] [core] Bump monorepo (#8006) Signed-off-by: Lukas --- CHANGELOG.md | 6 +-- babel.config.js | 1 + docs/babel.config.js | 1 + docs/pages/_app.js | 8 ++- package.json | 1 + .../aggregation.DataGridPremium.test.tsx | 3 +- .../cellSelection.DataGridPremium.test.tsx | 1 - .../exportExcel.DataGridPremium.test.tsx | 13 +++-- .../tests/license.DataGridPremium.test.tsx | 1 - .../rowGrouping.DataGridPremium.test.tsx | 13 +++-- .../tests/rowPinning.DataGridPremium.test.tsx | 5 +- .../statePersistence.DataGridPremium.test.tsx | 1 - .../tests/accessibility.DataGridPro.test.tsx | 1 - .../tests/cellEditing.DataGridPro.test.tsx | 1 - .../src/tests/clipboard.DataGridPro.test.tsx | 1 - .../tests/columnHeaders.DataGridPro.test.tsx | 33 ++++++------- .../tests/columnPinning.DataGridPro.test.tsx | 29 ++++++----- .../tests/columnReorder.DataGridPro.test.tsx | 7 ++- .../tests/columnSpanning.DataGridPro.test.tsx | 3 +- .../src/tests/columns.DataGridPro.test.tsx | 19 ++++--- .../columnsVisibility.DataGridPro.test.tsx | 5 +- .../src/tests/components.DataGridPro.test.tsx | 11 +++-- .../tests/detailPanel.DataGridPro.test.tsx | 13 ++--- .../tests/editComponents.DataGridPro.test.tsx | 3 +- .../src/tests/events.DataGridPro.test.tsx | 9 ++-- .../src/tests/export.DataGridPro.test.tsx | 1 - .../tests/filterPanel.DataGridPro.test.tsx | 1 - .../src/tests/filtering.DataGridPro.test.tsx | 13 ++--- .../src/tests/layout.DataGridPro.test.tsx | 7 ++- .../src/tests/lazyLoader.DataGridPro.test.tsx | 1 - .../src/tests/pagination.DataGridPro.test.tsx | 4 +- .../src/tests/printExport.DataGrid.test.tsx | 5 +- .../src/tests/rowEditing.DataGridPro.test.tsx | 25 +++++----- .../src/tests/rowPinning.DataGridPro.test.tsx | 13 ++--- .../src/tests/rowReorder.DataGridPro.test.tsx | 1 - .../tests/rowSelection.DataGridPro.test.tsx | 23 +++++---- .../src/tests/rows.DataGridPro.test.tsx | 1 - .../src/tests/sorting.DataGridPro.test.tsx | 1 - .../src/tests/state.DataGridPro.test.tsx | 1 - .../statePersistence.DataGridPro.test.tsx | 1 - .../src/tests/treeData.DataGridPro.test.tsx | 13 +++-- .../src/components/panel/GridPanel.test.tsx | 8 +-- .../utils/useGridApiEventHandler.test.tsx | 1 - .../src/tests/cells.DataGrid.test.tsx | 1 - .../src/tests/columnHeaders.DataGrid.test.tsx | 3 +- .../tests/columnSpanning.DataGrid.test.tsx | 11 ++--- .../src/tests/columns.DataGrid.test.tsx | 1 - .../tests/columnsGrouping.DataGrid.test.tsx | 3 +- .../tests/columnsVisibility.DataGrid.test.tsx | 1 - .../src/tests/components.DataGrid.test.tsx | 10 +--- .../src/tests/export.DataGrid.test.tsx | 21 ++++---- .../src/tests/filterPanel.DataGrid.test.tsx | 49 ++++++++++++------- .../src/tests/filtering.DataGrid.test.tsx | 5 +- .../src/tests/keyboard.DataGrid.test.tsx | 3 +- .../src/tests/layout.DataGrid.test.tsx | 15 +++--- .../src/tests/pagination.DataGrid.test.tsx | 18 +++---- .../tests/quickFiltering.DataGrid.test.tsx | 13 +++-- .../src/tests/rowSelection.DataGrid.test.tsx | 49 +++++++++---------- .../src/tests/rows.DataGrid.test.tsx | 9 ++-- .../src/tests/sorting.DataGrid.test.tsx | 7 ++- .../src/tests/toolbar.DataGrid.test.tsx | 7 ++- .../DateRangeCalendar.test.tsx | 27 +++++----- .../describes.DateRangePicker.test.tsx | 7 ++- .../DesktopDateRangePicker.test.tsx | 7 +-- .../describes.DesktopDateRangePicker.test.tsx | 6 +-- .../MobileDateRangePicker.test.tsx | 3 +- .../describes.MobileDateRangePicker.test.tsx | 7 ++- ...tiInputDateRangeField.conformance.test.tsx | 2 +- ...putDateTimeRangeField.conformance.test.tsx | 2 +- ...tiInputTimeRangeField.conformance.test.tsx | 2 +- ...scribes.SingleInputDateRangeField.test.tsx | 2 +- ...editing.SingleInputDateRangeField.test.tsx | 10 ++-- ...lection.SingleInputDateRangeField.test.tsx | 19 +++---- ...bes.SingleInputDateTimeRangeField.test.tsx | 2 +- ...scribes.SingleInputTimeRangeField.test.tsx | 2 +- .../StaticDateRangePicker.test.tsx | 3 +- .../tests/describes.DateCalendar.test.tsx | 4 +- .../tests/describes.DateField.test.tsx | 5 +- .../tests/editing.DateField.test.tsx | 48 +++++++++--------- .../DateField/tests/format.DateField.test.tsx | 11 ++--- .../tests/selection.DateField.test.tsx | 35 ++++++------- .../tests/describes.DateTimeField.test.tsx | 3 +- .../tests/timezone.DateTimeField.test.tsx | 5 +- .../DesktopDatePicker.test.tsx | 3 +- .../describes.DesktopDatePicker.test.tsx | 5 +- .../describes.DesktopDateTimePicker.test.tsx | 5 +- .../field.DesktopDateTimePicker.test.tsx | 5 +- .../describes.DesktopTimePicker.test.tsx | 6 ++- .../tests/field.DesktopTimePicker.test.tsx | 5 +- .../tests/describes.MobileDatePicker.test.tsx | 4 +- .../tests/field.MobileDateTimePicker.test.tsx | 5 +- .../tests/describes.MobileTimePicker.test.tsx | 3 +- .../tests/field.MobileTimePicker.test.tsx | 5 +- .../StaticTimePicker.test.tsx | 3 +- .../tests/describes.TimeField.test.tsx | 3 +- .../tests/editing.TimeField.test.tsx | 14 +++--- .../tests/describes.YearCalendar.test.tsx | 4 +- .../tests/fieldKeyboardInteraction.test.tsx | 2 +- .../useLicenseVerifier.test.tsx | 1 - test/utils/pickers-utils.tsx | 14 ++++-- yarn.lock | 11 ++++- 101 files changed, 417 insertions(+), 428 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 48544bb5a95ba..76da5d9ff2df8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1518,7 +1518,7 @@ We'd like to offer a big thanks to the 9 contributors who made this release poss The renamed props are the following: | Old name | New name | - | -------------------------- | ----------------------------- | + | :------------------------- | :---------------------------- | | `selectionModel` | `rowSelectionModel` | | `onSelectionModelChange` | `onRowSelectionModelChange` | | `disableSelectionOnClick` | `disableRowSelectionOnClick` | @@ -2105,7 +2105,7 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos You can now use the `localText` prop available on all picker components: | Removed prop | Property in the new `localText` prop | - | ---------------------------- | --------------------------------------------------------------------------------- | + | :--------------------------- | :-------------------------------------------------------------------------------- | | `endText` | `end` | | `getClockLabelText` | `clockLabelText` | | `getHoursClockNumberText` | `hoursClockNumberText` | @@ -4190,7 +4190,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos Here are the new names and the modifications needed to get the same information with the new selectors. | Old name | New name | - | ------------------------------- | ----------------------------------------- | + | :------------------------------ | :---------------------------------------- | | `allGridColumnsFieldsSelector` | `gridColumnFieldsSelector` | | `allGridColumnsSelector` | `gridColumnDefinitionsSelector` | | `visibleGridColumnsSelector` | `gridVisibleColumnDefinitionsSelector` | diff --git a/babel.config.js b/babel.config.js index 5779ff856acb7..5696f47bba614 100644 --- a/babel.config.js +++ b/babel.config.js @@ -15,6 +15,7 @@ const defaultAlias = { '@mui/x-date-pickers': resolveAliasPath('./packages/x-date-pickers/src'), '@mui/x-date-pickers-pro': resolveAliasPath('./packages/x-date-pickers-pro/src'), '@mui/markdown': '@mui/monorepo/packages/markdown', + '@mui-internal/docs-utilities': '@mui/monorepo/packages/docs-utilities', 'typescript-to-proptypes': '@mui/monorepo/packages/typescript-to-proptypes/src', docs: resolveAliasPath('./node_modules/@mui/monorepo/docs'), test: resolveAliasPath('./test'), diff --git a/docs/babel.config.js b/docs/babel.config.js index 179d6d94faefd..82a7019229b75 100644 --- a/docs/babel.config.js +++ b/docs/babel.config.js @@ -11,6 +11,7 @@ const alias = { '@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-internal/docs-utilities': '../node_modules/@mui/monorepo/packages/docs-utilities', '@mui/joy': '../node_modules/@mui/monorepo/packages/mui-joy/src', docs: '../node_modules/@mui/monorepo/docs', docsx: './', diff --git a/docs/pages/_app.js b/docs/pages/_app.js index 62f596805027d..a58fb5cfb7075 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -215,6 +215,10 @@ function AppWrapper(props) { return { activePage, activePageParents, pages }; }, [router.pathname]); + // Replicate change reverted in https://github.com/mui/material-ui/pull/35969/files#r1089572951 + // Fixes playground styles in dark mode. + const ThemeWrapper = router.pathname.startsWith('/playground') ? React.Fragment : ThemeProvider; + return ( @@ -226,12 +230,12 @@ function AppWrapper(props) { - + {children} - + diff --git a/package.json b/package.json index 1afeca72e09a7..6d4bf1191c2ca 100644 --- a/package.json +++ b/package.json @@ -102,6 +102,7 @@ "@types/prettier": "^2.7.2", "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", + "@types/react-test-renderer": "^18.0.0", "@types/requestidlecallback": "^0.3.5", "@types/sinon": "^10.0.13", "@types/yargs": "^17.0.22", diff --git a/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx index fb70bed31e0fb..3c64e8514fb3a 100644 --- a/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, screen, userEvent, within, act } from '@mui/monorepo/test/utils'; import { expect } from 'chai'; import { getColumnHeaderCell, getColumnValues } from 'test/utils/helperFn'; @@ -373,7 +372,7 @@ describe(' - Aggregation', () => { act(() => apiRef.current.showColumnMenu('id')); clock.runToLast(); - userEvent.mousePress(screen.queryByLabelText('Aggregation')); + userEvent.mousePress(screen.getByLabelText('Aggregation')); userEvent.mousePress( within( screen.getByRole('listbox', { diff --git a/packages/grid/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx index fbe99c2284ca1..6b2331f75378f 100644 --- a/packages/grid/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { spy } from 'sinon'; import { expect } from 'chai'; import { getCell } from 'test/utils/helperFn'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, act, userEvent } from '@mui/monorepo/test/utils'; import { DataGridPremium, diff --git a/packages/grid/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx index c1c0d11328acd..795fd66a3d0c7 100644 --- a/packages/grid/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx @@ -8,7 +8,6 @@ import { DataGridPremiumProps, GridActionsCellItem, } from '@mui/x-data-grid-premium'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, screen, fireEvent, act } from '@mui/monorepo/test/utils'; import { spy, SinonSpy } from 'sinon'; import { expect } from 'chai'; @@ -60,7 +59,7 @@ describe(' - Export Excel', () => { it('should display export option', () => { render(); - fireEvent.click(screen.queryByRole('button', { name: 'Export' })); + fireEvent.click(screen.getByRole('button', { name: 'Export' })); expect(screen.queryByRole('menu')).not.to.equal(null); expect(screen.queryByRole('menuitem', { name: 'Download as Excel' })).not.to.equal(null); }); @@ -99,7 +98,7 @@ describe(' - Export Excel', () => { } render(); - const workbook = await act(() => apiRef.current.getDataAsExcel()); + const workbook = await apiRef.current.getDataAsExcel(); const worksheet = workbook!.worksheets[0]; expect(worksheet.getCell('A1').value).to.equal('str'); @@ -143,7 +142,7 @@ describe(' - Export Excel', () => { } render(); - const workbook = await act(() => apiRef.current.getDataAsExcel()); + const workbook = await apiRef.current.getDataAsExcel(); const worksheet = workbook!.worksheets[0]; expect(worksheet.getCell('A1').value).to.equal('option'); @@ -183,7 +182,7 @@ describe(' - Export Excel', () => { } render(); - const workbook = await act(() => apiRef.current.getDataAsExcel()); + const workbook = await apiRef.current.getDataAsExcel(); const worksheet = workbook!.worksheets[0]; expect(worksheet.getCell('A1').value).to.equal('str'); @@ -221,7 +220,7 @@ describe(' - Export Excel', () => { } render(); - const workbook = await act(() => apiRef.current.getDataAsExcel()); + const workbook = await apiRef.current.getDataAsExcel(); const worksheet = workbook!.worksheets[0]; // 1-based index + 1 for column header row @@ -323,7 +322,7 @@ describe(' - Export Excel', () => { } render(); - const workbook = await act(() => apiRef.current.getDataAsExcel()); + const workbook = await apiRef.current.getDataAsExcel(); const worksheet = workbook!.worksheets[0]; // line 1: | group1 | group23 | diff --git a/packages/grid/x-data-grid-premium/src/tests/license.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/license.DataGridPremium.test.tsx index 0f3b861df0391..058b4cad53116 100644 --- a/packages/grid/x-data-grid-premium/src/tests/license.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/license.DataGridPremium.test.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import addYears from 'date-fns/addYears'; import { expect } from 'chai'; -// @ts-ignore Remove once the test utils are typed import { createRenderer } from '@mui/monorepo/test/utils'; import { DataGridPremium } from '@mui/x-data-grid-premium'; import { generateLicense, LicenseInfo } from '@mui/x-license-pro'; diff --git a/packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx index 7872e823dec0d..48aa7f3d89c02 100644 --- a/packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, screen, act, userEvent } from '@mui/monorepo/test/utils'; import { getColumnHeaderCell, @@ -1592,7 +1591,7 @@ describe(' - Row Grouping', () => { act(() => apiRef.current.showColumnMenu('category1')); clock.runToLast(); expect(screen.queryByRole('menu')).not.to.equal(null); - const menuItem = screen.queryByRole('menuitem', { name: 'Group by category1' }); + const menuItem = screen.getByRole('menuitem', { name: 'Group by category1' }); fireEvent.click(menuItem); expect(apiRef.current.state.rowGrouping.model).to.deep.equal(['category1']); }); @@ -1638,7 +1637,7 @@ describe(' - Row Grouping', () => { act(() => apiRef.current.showColumnMenu('category1')); clock.runToLast(); expect(screen.queryByRole('menu')).not.to.equal(null); - const menuItem = screen.queryByRole('menuitem', { name: 'Stop grouping by category1' }); + const menuItem = screen.getByRole('menuitem', { name: 'Stop grouping by category1' }); fireEvent.click(menuItem); expect(apiRef.current.state.rowGrouping.model).to.deep.equal([]); }); @@ -1669,7 +1668,7 @@ describe(' - Row Grouping', () => { act(() => apiRef.current.showColumnMenu('__row_group_by_columns_group_category1__')); clock.runToLast(); expect(screen.queryByRole('menu')).not.to.equal(null); - const menuItemCategory1 = screen.queryByRole('menuitem', { + const menuItemCategory1 = screen.getByRole('menuitem', { name: 'Stop grouping by category1', }); fireEvent.click(menuItemCategory1); @@ -1682,7 +1681,7 @@ describe(' - Row Grouping', () => { act(() => apiRef.current.showColumnMenu('__row_group_by_columns_group_category2__')); clock.runToLast(); expect(screen.queryByRole('menu')).not.to.equal(null); - const menuItemCategory2 = screen.queryByRole('menuitem', { + const menuItemCategory2 = screen.getByRole('menuitem', { name: 'Stop grouping by category2', }); fireEvent.click(menuItemCategory2); @@ -1714,12 +1713,12 @@ describe(' - Row Grouping', () => { act(() => apiRef.current.showColumnMenu('__row_group_by_columns_group__')); clock.runToLast(); expect(screen.queryByRole('menu')).not.to.equal(null); - const menuItemCategory1 = screen.queryByRole('menuitem', { + const menuItemCategory1 = screen.getByRole('menuitem', { name: 'Stop grouping by category1', }); fireEvent.click(menuItemCategory1); expect(apiRef.current.state.rowGrouping.model).to.deep.equal(['category2']); - const menuItemCategory2 = screen.queryByRole('menuitem', { + const menuItemCategory2 = screen.getByRole('menuitem', { name: 'Stop grouping by category2', }); fireEvent.click(menuItemCategory2); diff --git a/packages/grid/x-data-grid-premium/src/tests/rowPinning.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/rowPinning.DataGridPremium.test.tsx index e2c250ea2e606..acca8e87e40d3 100644 --- a/packages/grid/x-data-grid-premium/src/tests/rowPinning.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/rowPinning.DataGridPremium.test.tsx @@ -1,4 +1,3 @@ -// @ts-ignore Remove once the test utils are typed import { createRenderer } from '@mui/monorepo/test/utils'; import * as React from 'react'; import { expect } from 'chai'; @@ -45,10 +44,10 @@ describe(' - Row pinning', () => { } function getTopPinnedRowsContainer() { - return document.querySelector(`.${gridClasses['pinnedRows--top']}`) as HTMLElement; + return document.querySelector(`.${gridClasses['pinnedRows--top']}`); } function getBottomPinnedRowsContainer() { - return document.querySelector(`.${gridClasses['pinnedRows--bottom']}`) as HTMLElement; + return document.querySelector(`.${gridClasses['pinnedRows--bottom']}`); } function isRowPinned(row: Element | null, section: 'top' | 'bottom') { diff --git a/packages/grid/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx index 99db4001de09c..fe8725088f4a9 100644 --- a/packages/grid/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx @@ -8,7 +8,6 @@ import { GridRowsProp, useGridApiRef, } from '@mui/x-data-grid-premium'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, act } from '@mui/monorepo/test/utils'; import { expect } from 'chai'; import { getColumnValues } from '../../../../../test/utils/helperFn'; diff --git a/packages/grid/x-data-grid-pro/src/tests/accessibility.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/accessibility.DataGridPro.test.tsx index 702a6af090717..18bc9828f4307 100644 --- a/packages/grid/x-data-grid-pro/src/tests/accessibility.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/accessibility.DataGridPro.test.tsx @@ -3,7 +3,6 @@ import { expect } from 'chai'; import axe from 'axe-core'; import { DataGridPro } from '@mui/x-data-grid-pro'; import { useBasicDemoData } from '@mui/x-data-grid-generator'; -// @ts-ignore Remove once the test utils are typed import { createRenderer } from '@mui/monorepo/test/utils'; function logViolations(violations: any) { diff --git a/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx index cde4a4126d940..3f4279208a3e2 100644 --- a/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx @@ -13,7 +13,6 @@ import { GridCellModes, } from '@mui/x-data-grid-pro'; import { getBasicGridData } from '@mui/x-data-grid-generator'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, act, userEvent } from '@mui/monorepo/test/utils'; import { getCell } from 'test/utils/helperFn'; diff --git a/packages/grid/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx index bfe7974ecee16..713074b5d8faa 100644 --- a/packages/grid/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { GridApi, useGridApiRef, DataGridPro, DataGridProProps } from '@mui/x-data-grid-pro'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, act, userEvent } from '@mui/monorepo/test/utils'; import { expect } from 'chai'; import { stub, SinonStub } from 'sinon'; diff --git a/packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx index 663053cf652fb..d40189b6e4924 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, screen } from '@mui/monorepo/test/utils'; import { expect } from 'chai'; import { gridClasses, DataGridPro, DataGridProProps } from '@mui/x-data-grid-pro'; @@ -60,7 +59,7 @@ describe(' - Column Headers', () => {
, ); const columnCell = getColumnHeaderCell(0); - const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]'); + const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!; fireEvent.click(menuIconButton); clock.runToLast(); expect(screen.queryByRole('menu')).not.to.equal(null); @@ -80,7 +79,7 @@ describe(' - Column Headers', () => { } const { setProps } = render(); const columnCell = getColumnHeaderCell(0); - const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]'); + const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!; fireEvent.click(menuIconButton); clock.runToLast(); expect(screen.queryByRole('menu')).not.to.equal(null); @@ -97,11 +96,11 @@ describe(' - Column Headers', () => { ); expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); const columnCell = getColumnHeaderCell(0); - const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]'); + const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!; fireEvent.click(menuIconButton); clock.runToLast(); expect(screen.queryByRole('menu')).not.to.equal(null); - fireEvent.click(screen.queryByRole('menu')); + fireEvent.click(screen.getByRole('menu')); expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); }); @@ -112,7 +111,7 @@ describe(' - Column Headers', () => {
, ); const columnCell = getColumnHeaderCell(0); - const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]'); + const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!; expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); fireEvent.click(menuIconButton); clock.runToLast(); @@ -135,13 +134,13 @@ describe(' - Column Headers', () => { ); const columnCell = getColumnHeaderCell(0); - const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]'); + const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!; fireEvent.click(menuIconButton); clock.runToLast(); expect(screen.queryByRole('menu')).not.to.equal(null); - const separator = columnCell.querySelector('.MuiDataGrid-iconSeparator'); + const separator = columnCell.querySelector('.MuiDataGrid-iconSeparator')!; fireEvent.mouseDown(separator); // TODO remove mouseUp once useGridColumnReorder will handle cleanup properly fireEvent.mouseUp(separator); @@ -165,7 +164,7 @@ describe(' - Column Headers', () => { const columnWithMenuCell = getColumnHeaderCell(0); const columnToResizeCell = getColumnHeaderCell(1); - const menuIconButton = columnWithMenuCell.querySelector('button[aria-label="Menu"]'); + const menuIconButton = columnWithMenuCell.querySelector('button[aria-label="Menu"]')!; fireEvent.click(menuIconButton); clock.runToLast(); @@ -173,7 +172,7 @@ describe(' - Column Headers', () => { const separator = columnToResizeCell.querySelector( `.${gridClasses['columnSeparator--resizable']}`, - ); + )!; fireEvent.mouseDown(separator); clock.runToLast(); expect(screen.queryByRole('menu')).to.equal(null); @@ -187,7 +186,7 @@ describe(' - Column Headers', () => { ); const columnCell = getColumnHeaderCell(0); - const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]'); + const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!; fireEvent.click(menuIconButton); clock.runToLast(); @@ -205,7 +204,7 @@ describe(' - Column Headers', () => { , ); const columnCell = getColumnHeaderCell(0); - const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]'); + const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!; fireEvent.click(menuIconButton); expect(menuIconButton?.parentElement).to.have.class(gridClasses.menuOpen); clock.runToLast(); // Wait for the transition to run @@ -230,12 +229,12 @@ describe(' - Column Headers', () => { } render(); const columnCell = getColumnHeaderCell(0); - const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]'); + const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!; fireEvent.click(menuIconButton); clock.runToLast(); - const menu = screen.queryByRole('menu'); - const descMenuitem = screen.queryByRole('menuitem', { name: /sort by desc/i }); + const menu = screen.getByRole('menu'); + const descMenuitem = screen.getByRole('menuitem', { name: /sort by desc/i }); expect(menu).toHaveFocus(); fireEvent.keyDown(menu, { key: 'ArrowDown' }); @@ -254,11 +253,11 @@ describe(' - Column Headers', () => { } render(); const columnCell = getColumnHeaderCell(0); - const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]'); + const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!; fireEvent.click(menuIconButton); clock.runToLast(); - const menu = screen.queryByRole('menu'); + const menu = screen.getByRole('menu'); expect(menu).toHaveFocus(); fireEvent.keyDown(menu, { key: 'Escape' }); diff --git a/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx index f4fbe20274e55..57a1a02ef3e94 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx @@ -17,7 +17,6 @@ import { createEvent, act, userEvent, - // @ts-ignore Remove once the test utils are typed } from '@mui/monorepo/test/utils'; import { getCell, getColumnHeaderCell, getColumnHeadersTextContent } from 'test/utils/helperFn'; @@ -154,7 +153,7 @@ describe(' - Column pinning', () => { )!; expect(renderZone).toHaveInlineStyle({ transform: 'translate3d(100px, 0px, 0px)' }); const columnHeader = getColumnHeaderCell(0); - const separator = columnHeader.querySelector(`.${gridClasses['columnSeparator--resizable']}`); + const separator = columnHeader.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!; fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 }); fireEvent.mouseUp(separator); @@ -173,7 +172,7 @@ describe(' - Column pinning', () => { )!; expect(columnHeadersInner).toHaveInlineStyle({ transform: 'translate3d(100px, 0px, 0px)' }); const columnHeader = getColumnHeaderCell(0); - const separator = columnHeader.querySelector(`.${gridClasses['columnSeparator--resizable']}`); + const separator = columnHeader.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!; fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 }); fireEvent.mouseUp(separator); @@ -188,7 +187,7 @@ describe(' - Column pinning', () => { expect(renderZone).toHaveInlineStyle({ transform: 'translate3d(0px, 0px, 0px)' }); const columnCell = document.querySelector('[role="columnheader"][data-field="id"]')!; - const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]'); + const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!; fireEvent.click(menuIconButton); fireEvent.click(screen.getByRole('menuitem', { name: 'Pin to left' })); @@ -204,7 +203,7 @@ describe(' - Column pinning', () => { const columnHeader = getColumnHeaderCell(2); expect(columnHeader).toHaveInlineStyle({ width: '100px' }); - const separator = columnHeader.querySelector(`.${gridClasses['columnSeparator--resizable']}`); + const separator = columnHeader.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!; fireEvent.mouseDown(separator, { clientX: 200 }); fireEvent.mouseMove(separator, { clientX: 190, buttons: 1 }); fireEvent.mouseUp(separator); @@ -222,7 +221,7 @@ describe(' - Column pinning', () => { const columnHeader = getColumnHeaderCell(2); expect(columnHeader).toHaveInlineStyle({ width: '100px' }); - const separator = columnHeader.querySelector(`.${gridClasses['columnSeparator--resizable']}`); + const separator = columnHeader.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!; fireEvent.mouseDown(separator, { clientX: 200 }); fireEvent.mouseMove(separator, { clientX: 210, buttons: 1 }); fireEvent.mouseUp(separator); @@ -388,7 +387,7 @@ describe(' - Column pinning', () => { ); const computedStyle = window.getComputedStyle( - document.querySelector('.MuiDataGrid-pinnedColumns--right') as HTMLElement, + document.querySelector('.MuiDataGrid-pinnedColumns--right')!, ); const borderLeftColor = computedStyle.getPropertyValue('border-left-color'); const borderLeftWidth = computedStyle.getPropertyValue('border-left-width'); @@ -473,7 +472,7 @@ describe(' - Column pinning', () => { it('should not add any button to the column menu', () => { render(); const columnCell = document.querySelector('[role="columnheader"][data-field="id"]')!; - const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]'); + const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!; fireEvent.click(menuIconButton); expect(screen.queryByRole('menuitem', { name: 'Pin to left' })).to.equal(null); expect(screen.queryByRole('menuitem', { name: 'Pin to right' })).to.equal(null); @@ -632,7 +631,7 @@ describe(' - Column pinning', () => { it('should pin the column to the left when clicking the "Pin to left" pinning button', () => { render(); const columnCell = document.querySelector('[role="columnheader"][data-field="id"]')!; - const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]'); + const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!; fireEvent.click(menuIconButton); fireEvent.click(screen.getByRole('menuitem', { name: 'Pin to left' })); expect( @@ -643,7 +642,7 @@ describe(' - Column pinning', () => { it('should pin the column to the right when clicking the "Pin to right" pinning button', () => { render(); const columnCell = document.querySelector('[role="columnheader"][data-field="id"]')!; - const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]'); + const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!; fireEvent.click(menuIconButton); fireEvent.click(screen.getByRole('menuitem', { name: 'Pin to right' })); expect( @@ -654,7 +653,7 @@ describe(' - Column pinning', () => { it('should allow to invert the side when clicking on "Pin to right" pinning button on a left pinned column', () => { render(); const columnCell = document.querySelector('[role="columnheader"][data-field="id"]')!; - const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]'); + const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!; fireEvent.click(menuIconButton); fireEvent.click(screen.getByRole('menuitem', { name: 'Pin to right' })); expect( @@ -668,7 +667,7 @@ describe(' - Column pinning', () => { it('should allow to invert the side when clicking on "Pin to left" pinning button on a right pinned column', () => { render(); const columnCell = document.querySelector('[role="columnheader"][data-field="id"]')!; - const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]'); + const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!; fireEvent.click(menuIconButton); fireEvent.click(screen.getByRole('menuitem', { name: 'Pin to left' })); expect( @@ -682,7 +681,7 @@ describe(' - Column pinning', () => { it('should allow to unpin a pinned left column when clicking "Unpin" pinning button', () => { render(); const columnCell = document.querySelector('[role="columnheader"][data-field="id"]')!; - const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]'); + const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!; fireEvent.click(menuIconButton); fireEvent.click(screen.getByRole('menuitem', { name: 'Unpin' })); expect( @@ -702,7 +701,7 @@ describe(' - Column pinning', () => { ); const brandHeader = document.querySelector('[role="columnheader"][data-field="brand"]')!; - fireEvent.click(brandHeader.querySelector('button[aria-label="Menu"]')); + fireEvent.click(brandHeader.querySelector('button[aria-label="Menu"]')!); expect(screen.queryByRole('menuitem', { name: 'Pin to left' })).not.to.equal(null); fireEvent.keyDown(screen.getByRole('menu'), { key: 'Escape' }); @@ -711,7 +710,7 @@ describe(' - Column pinning', () => { expect(screen.queryByRole('menuitem', { name: 'Pin to left' })).to.equal(null); const yearHeader = document.querySelector('[role="columnheader"][data-field="year"]')!; - fireEvent.click(yearHeader.querySelector('button[aria-label="Menu"]')); + fireEvent.click(yearHeader.querySelector('button[aria-label="Menu"]')!); expect(screen.queryByRole('menuitem', { name: 'Pin to left' })).to.equal(null); }); }); diff --git a/packages/grid/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx index fdda66abe73ba..d566f208b09d1 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { expect } from 'chai'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, createEvent, act } from '@mui/monorepo/test/utils'; import { getColumnHeadersTextContent, @@ -176,8 +175,8 @@ describe(' - Columns reorder', () => { render(); expect(getColumnHeadersTextContent()).to.deep.equal(['brand', 'desc', 'type']); const columnHeader = getColumnHeaderCell(0); - const columnHeaderDraggableContainer = columnHeader.firstChild as HTMLElement; - fireEvent.dragStart(columnHeaderDraggableContainer.firstChild); + const columnHeaderDraggableContainer = columnHeader.firstChild!; + fireEvent.dragStart(columnHeaderDraggableContainer.firstChild!); expect(columnHeaderDraggableContainer).not.to.have.class(gridClasses['columnHeader--dragging']); }); @@ -260,7 +259,7 @@ describe(' - Columns reorder', () => { render(); expect(getColumnHeadersTextContent()).to.deep.equal(['brand', 'desc', 'type']); - const dragCol = getColumnHeaderCell(1).firstChild! as HTMLElement; + const dragCol = getColumnHeaderCell(1).firstChild!; const targetCol = getColumnHeaderCell(0).firstChild!; fireEvent.dragStart(dragCol); diff --git a/packages/grid/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx index 3e784f1f51838..e9454dca917f3 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, act, userEvent } from '@mui/monorepo/test/utils'; import { expect } from 'chai'; import { DataGridPro, GridApi, useGridApiRef, GridColDef, gridClasses } from '@mui/x-data-grid-pro'; @@ -173,7 +172,7 @@ describe(' - Column Spanning', () => { expect(getColumnHeaderCell(1).offsetWidth).to.equal(100); expect(getCell(0, 0).offsetWidth).to.equal(200); - const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`); + const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!; fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 200, buttons: 1 }); fireEvent.mouseUp(separator); diff --git a/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx index d92e3660ffcc5..a8b0cdfa7517f 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, screen, act } from '@mui/monorepo/test/utils'; import { expect } from 'chai'; import { spy } from 'sinon'; @@ -63,7 +62,7 @@ describe(' - Columns', () => { expect(screen.queryByRole('menu')).to.equal(null); act(() => apiRef.current.showColumnMenu('brand')); clock.runToLast(); - const menu = screen.queryByRole('menu'); + const menu = screen.getByRole('menu'); expect(menu.id).to.match(/:r[0-9a-z]+:/); expect(menu.getAttribute('aria-labelledby')).to.match(/:r[0-9a-z]+:/); }); @@ -94,7 +93,7 @@ describe(' - Columns', () => { it('should allow to resize columns with the mouse', () => { render(); - const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`); + const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!; fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 }); fireEvent.mouseUp(separator); @@ -126,7 +125,7 @@ describe(' - Columns', () => { it('should call onColumnResize during resizing', () => { const onColumnResize = spy(); render(); - const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`); + const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!; fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 }); fireEvent.mouseMove(separator, { clientX: 120, buttons: 1 }); @@ -139,7 +138,7 @@ describe(' - Columns', () => { it('should call onColumnWidthChange after resizing', () => { const onColumnWidthChange = spy(); render(); - const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`); + const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!; fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 }); fireEvent.mouseMove(separator, { clientX: 120, buttons: 1 }); @@ -188,7 +187,7 @@ describe(' - Columns', () => { const separator = getColumnHeaderCell(1).querySelector( `.${gridClasses['columnSeparator--resizable']}`, - ); + )!; fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 150, buttons: 1 }); @@ -245,7 +244,7 @@ describe(' - Columns', () => { const separator = getColumnHeaderCell(1).querySelector( `.${gridClasses['columnSeparator--resizable']}`, - ); + )!; fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 150, buttons: 1 }); @@ -268,7 +267,7 @@ describe(' - Columns', () => { const separator = getColumnHeaderCell(1).querySelector( `.${gridClasses['columnSeparator--resizable']}`, - ); + )!; fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 50, buttons: 1 }); @@ -308,7 +307,7 @@ describe(' - Columns', () => { const separator = getColumnHeaderCell(1).querySelector( `.${gridClasses['columnSeparator--resizable']}`, - ); + )!; fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 150, buttons: 1 }); @@ -330,7 +329,7 @@ describe(' - Columns', () => { const separator = getColumnHeaderCell(0).querySelector( `.${gridClasses['columnSeparator--resizable']}`, - ); + )!; fireEvent.mouseDown(separator, { clientX: 200 }); fireEvent.mouseMove(separator, { clientX: 100, buttons: 1 }); diff --git a/packages/grid/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx index d5caac48037f6..824cdbe06c807 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { spy } from 'sinon'; import { expect } from 'chai'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, act } from '@mui/monorepo/test/utils'; import { DataGridPro, @@ -133,10 +132,10 @@ describe(' - Columns Visibility', () => { fireEvent.click(getByText('Hide all')); expect(getColumnHeadersTextContent()).to.deep.equal([]); - fireEvent.click(document.querySelector('[role="tooltip"] [name="id"]')); + fireEvent.click(document.querySelector('[role="tooltip"] [name="id"]')!); expect(getColumnHeadersTextContent()).to.deep.equal(['id']); - const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`); + const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!; fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 }); fireEvent.mouseUp(separator); diff --git a/packages/grid/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx index 7a2a609d0e1f1..b443a67fb19ea 100644 --- a/packages/grid/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -// @ts-ignore Remove once the test utils are typed -import { createRenderer, fireEvent, userEvent } from '@mui/monorepo/test/utils'; +import { createRenderer, EventType, fireEvent, userEvent } from '@mui/monorepo/test/utils'; import { spy } from 'sinon'; import { expect } from 'chai'; import { @@ -61,7 +60,9 @@ describe(' - Components', () => { expect(propHandler.callCount).to.equal(0); expect(eventHandler.callCount).to.equal(0); - const eventToFire = prop.replace(/^on([A-Z])/, (match) => match.slice(2).toLowerCase()); // e.g. onDoubleClick -> doubleClick + const eventToFire = prop.replace(/^on([A-Z])/, (match) => + match.slice(2).toLowerCase(), + ) as EventType; // e.g. onDoubleClick -> doubleClick const cell = getCell(0, 0); if (event !== 'cellMouseUp') { @@ -108,7 +109,9 @@ describe(' - Components', () => { expect(propHandler.callCount).to.equal(0); expect(eventHandler.callCount).to.equal(0); - const eventToFire = prop.replace(/^on([A-Z])/, (match) => match.slice(2).toLowerCase()); // e.g. onDoubleClick -> doubleClick + const eventToFire = prop.replace(/^on([A-Z])/, (match) => + match.slice(2).toLowerCase(), + ) as EventType; // e.g. onDoubleClick -> doubleClick fireEvent[eventToFire](getRow(0)); expect(propHandler.callCount).to.equal(1); diff --git a/packages/grid/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx index 8e95bc550a6b8..6ece19faeb20e 100644 --- a/packages/grid/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx @@ -11,14 +11,7 @@ import { GRID_DETAIL_PANEL_TOGGLE_FIELD, } from '@mui/x-data-grid-pro'; import { useBasicDemoData } from '@mui/x-data-grid-generator'; -import { - createRenderer, - fireEvent, - screen, - act, - userEvent, - // @ts-ignore Remove once the test utils are typed -} from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, screen, act, userEvent } from '@mui/monorepo/test/utils'; import { getRow, getCell, getColumnValues } from 'test/utils/helperFn'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); @@ -468,8 +461,8 @@ describe(' - Detail panel', () => { columns={[{ field: 'id', width: 400 }]} />, ); - fireEvent.click(getCell(1, 0).querySelector('button')); - expect(screen.queryByText('Detail').offsetWidth).to.equal(50 + 400); + fireEvent.click(getCell(1, 0).querySelector('button')!); + expect(screen.getByText('Detail').offsetWidth).to.equal(50 + 400); }); it('should add an accessible name to the toggle column', () => { diff --git a/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx index 1c2ecc9fc14a4..cb5e8157eb2f9 100644 --- a/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx @@ -10,7 +10,6 @@ import { renderEditInputCell, renderEditSingleSelectCell, } from '@mui/x-data-grid-pro'; -// @ts-ignore Remove once the test utils are typed import { act, createRenderer, fireEvent, screen, userEvent } from '@mui/monorepo/test/utils'; import { expect } from 'chai'; import { getCell } from 'test/utils/helperFn'; @@ -592,7 +591,7 @@ describe(' - Edit Components', () => { userEvent.mousePress(screen.queryAllByRole('option')[1]); clock.runToLast(); expect(screen.queryByRole('listbox')).to.equal(null); - fireEvent.keyDown(screen.queryByRole('button', { name: 'Adidas' }), { key: 'Enter' }); + fireEvent.keyDown(screen.getByRole('button', { name: 'Adidas' }), { key: 'Enter' }); expect(screen.queryByRole('listbox')).to.equal(null); resolveCallback!(); diff --git a/packages/grid/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx index 22915a7e3f1d7..9190215e67b51 100644 --- a/packages/grid/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, screen, act } from '@mui/monorepo/test/utils'; import { expect } from 'chai'; import { @@ -134,7 +133,7 @@ describe(' - Events Params', () => { render(); const header = screen .getByRole('columnheader', { name: 'first' }) - .querySelector('.MuiDataGrid-columnHeaderTitleContainer'); + .querySelector('.MuiDataGrid-columnHeaderTitleContainer')!; fireEvent.click(header); const cell01 = getCell(0, 1); @@ -276,7 +275,7 @@ describe(' - Events Params', () => { it('should not be called when clicking the checkbox added by checkboxSelection', () => { render(); - const cell11 = getCell(1, 0).querySelector('input'); + const cell11 = getCell(1, 0).querySelector('input')!; fireEvent.click(cell11); expect(eventStack).to.deep.equal([]); }); @@ -325,7 +324,7 @@ describe(' - Events Params', () => { render(); const cell = getCell(0, 1); fireEvent.doubleClick(cell); - fireEvent.click(cell.querySelector('input')); + fireEvent.click(cell.querySelector('input')!); expect(eventStack).to.deep.equal([]); }); }); @@ -380,7 +379,7 @@ describe(' - Events Params', () => { ); } const { container, setProps } = render(); - const virtualScroller = container.querySelector('.MuiDataGrid-virtualScroller'); + const virtualScroller = container.querySelector('.MuiDataGrid-virtualScroller')!; // arbitrary number to make sure that the bottom of the grid window is reached. virtualScroller.scrollTop = 12345; virtualScroller.dispatchEvent(new Event('scroll')); diff --git a/packages/grid/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx index 97d0398cded94..7a92d07d6eed7 100644 --- a/packages/grid/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx @@ -1,5 +1,4 @@ import { GridColDef, useGridApiRef, DataGridPro, GridApi } from '@mui/x-data-grid-pro'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, act } from '@mui/monorepo/test/utils'; import { expect } from 'chai'; import * as React from 'react'; diff --git a/packages/grid/x-data-grid-pro/src/tests/filterPanel.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/filterPanel.DataGridPro.test.tsx index 947e21acceebb..0477796e293e3 100644 --- a/packages/grid/x-data-grid-pro/src/tests/filterPanel.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/filterPanel.DataGridPro.test.tsx @@ -7,7 +7,6 @@ import { GridApi, useGridApiRef, } from '@mui/x-data-grid-pro'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, act } from '@mui/monorepo/test/utils'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); diff --git a/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx index 17004d37f3c93..3434a75e959b9 100644 --- a/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx @@ -14,7 +14,6 @@ import { GridToolbar, gridExpandedSortedRowEntriesSelector, } from '@mui/x-data-grid-pro'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, screen, act, within } from '@mui/monorepo/test/utils'; import { expect } from 'chai'; import * as React from 'react'; @@ -168,7 +167,9 @@ describe(' - Filter', () => { />, ); - const selectListOfColumns = document.querySelectorAll('.MuiDataGrid-filterFormColumnInput')[0]; + const selectListOfColumns = document.querySelectorAll( + '.MuiDataGrid-filterFormColumnInput', + )[0]; const availableColumns = within(selectListOfColumns).getAllByRole('option'); expect(availableColumns.length).to.equal(1); }); @@ -461,7 +462,7 @@ describe(' - Filter', () => { />, ); expect(onFilterModelChange.callCount).to.equal(0); - fireEvent.change(screen.queryByRole('textbox', { name: 'Value' }), { target: { value: '' } }); + fireEvent.change(screen.getByRole('textbox', { name: 'Value' }), { target: { value: '' } }); clock.tick(500); expect(onFilterModelChange.callCount).to.equal(1); expect(onFilterModelChange.lastCall.args[1].reason).to.equal('upsertFilterItem'); @@ -513,7 +514,7 @@ describe(' - Filter', () => { />, ); expect(onFilterModelChange.callCount).to.equal(0); - fireEvent.click(screen.queryByRole('button', { name: 'Add filter' })); + fireEvent.click(screen.getByRole('button', { name: 'Add filter' })); expect(onFilterModelChange.callCount).to.equal(1); expect(onFilterModelChange.lastCall.args[1].reason).to.equal('upsertFilterItems'); }); @@ -529,7 +530,7 @@ describe(' - Filter', () => { ); apiRef.current.subscribeEvent('filterModelChange', listener); expect(listener.callCount).to.equal(0); - fireEvent.click(screen.queryByRole('button', { name: 'Add filter' })); + fireEvent.click(screen.getByRole('button', { name: 'Add filter' })); expect(listener.callCount).to.equal(1); expect(listener.lastCall.args[1].reason).to.equal('upsertFilterItems'); }); @@ -546,7 +547,7 @@ describe(' - Filter', () => { logicOperator: GridLogicOperator.Or, }; render(); - const checkAllCell = getColumnHeaderCell(0).querySelector('input'); + const checkAllCell = getColumnHeaderCell(0).querySelector('input')!; fireEvent.click(checkAllCell); expect(apiRef.current.state.rowSelection).to.deep.equal([1]); }); diff --git a/packages/grid/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx index e5adf18aba334..d43165fce0c81 100644 --- a/packages/grid/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, screen, act } from '@mui/monorepo/test/utils'; import { expect } from 'chai'; import { createTheme, ThemeProvider } from '@mui/material/styles'; @@ -43,7 +42,7 @@ describe(' - Layout', () => { , ); expect(ref.current).to.be.instanceof(window.HTMLDivElement); - expect(ref.current).to.equal(container.firstChild.firstChild); + expect(ref.current).to.equal(container.firstChild?.firstChild); }); function randomStringValue() { @@ -59,8 +58,8 @@ describe(' - Layout', () => { , ); - expect(container.firstChild.firstChild).to.have.class(className); - expect(container.firstChild.firstChild).to.have.class('MuiDataGrid-root'); + expect(container.firstChild?.firstChild).to.have.class(className); + expect(container.firstChild?.firstChild).to.have.class('MuiDataGrid-root'); }); it('applies the style to the root component', () => { diff --git a/packages/grid/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx index 2eb66f746bfca..b782cd3bc34e9 100644 --- a/packages/grid/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, act } from '@mui/monorepo/test/utils'; import { getColumnHeaderCell, getColumnValues, getRow } from 'test/utils/helperFn'; import { expect } from 'chai'; diff --git a/packages/grid/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx index 112c6b868584e..745fc9d5fc3c1 100644 --- a/packages/grid/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx @@ -1,10 +1,10 @@ -// @ts-ignore Remove once the test utils are typed -import { createRenderer, act, GridApiPro } from '@mui/monorepo/test/utils'; +import { createRenderer, act } from '@mui/monorepo/test/utils'; import { getColumnValues } from 'test/utils/helperFn'; import * as React from 'react'; import { expect } from 'chai'; import { DataGridPro, GridApi, useGridApiRef } from '@mui/x-data-grid-pro'; import { useBasicDemoData } from '@mui/x-data-grid-generator'; +import { GridApiPro } from '../models/gridApiPro'; describe(' - Pagination', () => { const { render, clock } = createRenderer({ clock: 'fake' }); diff --git a/packages/grid/x-data-grid-pro/src/tests/printExport.DataGrid.test.tsx b/packages/grid/x-data-grid-pro/src/tests/printExport.DataGrid.test.tsx index 4cf3c8df98530..df29903e459f2 100644 --- a/packages/grid/x-data-grid-pro/src/tests/printExport.DataGrid.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/printExport.DataGrid.test.tsx @@ -9,7 +9,6 @@ import { DataGridProProps, } from '@mui/x-data-grid-pro'; import { getBasicGridData } from '@mui/x-data-grid-generator'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, screen, fireEvent, act } from '@mui/monorepo/test/utils'; describe(' - Print export', () => { @@ -59,7 +58,7 @@ describe(' - Print export', () => { it('should display print button by default', () => { render(); - fireEvent.click(screen.queryByRole('button', { name: 'Export' })); + fireEvent.click(screen.getByRole('button', { name: 'Export' })); expect(screen.queryByRole('menu')).not.to.equal(null); expect(screen.queryByRole('menuitem', { name: 'Print' })).not.to.equal(null); }); @@ -71,7 +70,7 @@ describe(' - Print export', () => { componentsProps={{ toolbar: { printOptions: { disableToolbarButton: true } } }} />, ); - fireEvent.click(screen.queryByRole('button', { name: 'Export' })); + fireEvent.click(screen.getByRole('button', { name: 'Export' })); expect(screen.queryByRole('menu')).not.to.equal(null); expect(screen.queryByRole('menuitem', { name: 'Print' })).to.equal(null); }); diff --git a/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx index 3adc6626ffcb1..2814eba32a3f6 100644 --- a/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx @@ -13,7 +13,6 @@ import { } from '@mui/x-data-grid-pro'; import Portal from '@mui/material/Portal'; import { getBasicGridData } from '@mui/x-data-grid-generator'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, act, userEvent, screen } from '@mui/monorepo/test/utils'; import { getCell, getRow } from 'test/utils/helperFn'; @@ -992,7 +991,7 @@ describe(' - Row Editing', () => { userEvent.mousePress(cell); fireEvent.doubleClick(cell); expect(listener.callCount).to.equal(0); - fireEvent.keyDown(cell.querySelector('input'), { key: 'Escape' }); + fireEvent.keyDown(cell.querySelector('input')!, { key: 'Escape' }); expect(listener.lastCall.args[0].reason).to.equal('escapeKeyDown'); }); @@ -1002,7 +1001,7 @@ describe(' - Row Editing', () => { const cell = getCell(0, 1); userEvent.mousePress(cell); fireEvent.doubleClick(cell); - fireEvent.keyDown(cell.querySelector('input'), { key: 'Escape' }); + fireEvent.keyDown(cell.querySelector('input')!, { key: 'Escape' }); expect(spiedStopRowEditMode.callCount).to.equal(1); expect(spiedStopRowEditMode.lastCall.args[0]).to.deep.equal({ id: 0, @@ -1022,7 +1021,7 @@ describe(' - Row Editing', () => { userEvent.mousePress(cell); fireEvent.doubleClick(cell); expect(listener.callCount).to.equal(0); - fireEvent.keyDown(cell.querySelector('input'), { key: 'Enter' }); + fireEvent.keyDown(cell.querySelector('input')!, { key: 'Enter' }); expect(listener.lastCall.args[0].reason).to.equal('enterKeyDown'); }); @@ -1032,7 +1031,7 @@ describe(' - Row Editing', () => { const cell = getCell(0, 1); userEvent.mousePress(cell); fireEvent.doubleClick(cell); - fireEvent.keyDown(cell.querySelector('input'), { key: 'Enter' }); + fireEvent.keyDown(cell.querySelector('input')!, { key: 'Enter' }); expect(spiedStopRowEditMode.callCount).to.equal(1); expect(spiedStopRowEditMode.lastCall.args[0]).to.deep.equal({ id: 0, @@ -1052,7 +1051,7 @@ describe(' - Row Editing', () => { act(() => { apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }); }); - fireEvent.keyDown(cell.querySelector('input'), { key: 'Enter' }); + fireEvent.keyDown(cell.querySelector('input')!, { key: 'Enter' }); expect(spiedStopRowEditMode.callCount).to.equal(1); expect(spiedStopRowEditMode.lastCall.args[0].ignoreModifications).to.equal(false); }); @@ -1067,7 +1066,7 @@ describe(' - Row Editing', () => { userEvent.mousePress(cell); fireEvent.doubleClick(cell); expect(listener.callCount).to.equal(0); - fireEvent.keyDown(cell.querySelector('input'), { key: 'Tab' }); + fireEvent.keyDown(cell.querySelector('input')!, { key: 'Tab' }); expect(listener.lastCall.args[0].reason).to.equal('tabKeyDown'); }); @@ -1079,7 +1078,7 @@ describe(' - Row Editing', () => { userEvent.mousePress(cell); fireEvent.doubleClick(cell); expect(listener.callCount).to.equal(0); - fireEvent.keyDown(cell.querySelector('input'), { key: 'Tab', shiftKey: true }); + fireEvent.keyDown(cell.querySelector('input')!, { key: 'Tab', shiftKey: true }); expect(listener.lastCall.args[0].reason).to.equal('shiftTabKeyDown'); }); @@ -1089,7 +1088,7 @@ describe(' - Row Editing', () => { const cell = getCell(0, 2); userEvent.mousePress(cell); fireEvent.doubleClick(cell); - fireEvent.keyDown(cell.querySelector('input'), { key: 'Tab' }); + fireEvent.keyDown(cell.querySelector('input')!, { key: 'Tab' }); expect(spiedStopRowEditMode.callCount).to.equal(1); expect(spiedStopRowEditMode.lastCall.args[0]).to.deep.equal({ id: 0, @@ -1105,7 +1104,7 @@ describe(' - Row Editing', () => { const cell = getCell(0, 1); userEvent.mousePress(cell); fireEvent.doubleClick(cell); - fireEvent.keyDown(cell.querySelector('input'), { key: 'Tab', shiftKey: true }); + fireEvent.keyDown(cell.querySelector('input')!, { key: 'Tab', shiftKey: true }); expect(spiedStopRowEditMode.callCount).to.equal(1); expect(spiedStopRowEditMode.lastCall.args[0]).to.deep.equal({ id: 0, @@ -1125,7 +1124,7 @@ describe(' - Row Editing', () => { await act(() => { apiRef.current.setEditCellValue({ id: 0, field: 'price1M', value: 'USD GBP' }); }); - fireEvent.keyDown(cell.querySelector('input'), { key: 'Tab' }); + fireEvent.keyDown(cell.querySelector('input')!, { key: 'Tab' }); expect(spiedStopRowEditMode.callCount).to.equal(1); expect(spiedStopRowEditMode.lastCall.args[0].ignoreModifications).to.equal(false); }); @@ -1142,7 +1141,7 @@ describe(' - Row Editing', () => { const cell = getCell(2, 0); fireEvent.doubleClick(cell); expect(cell.querySelector('input')).toHaveFocus(); - fireEvent.keyDown(cell.querySelector('input'), { key: 'Tab', shiftKey: true }); + fireEvent.keyDown(cell.querySelector('input')!, { key: 'Tab', shiftKey: true }); expect(getCell(2, 0)).toHaveFocus(); }); @@ -1158,7 +1157,7 @@ describe(' - Row Editing', () => { const cell = getCell(3, 2); fireEvent.doubleClick(cell); expect(cell.querySelector('input')).toHaveFocus(); - fireEvent.keyDown(cell.querySelector('input'), { key: 'Tab' }); + fireEvent.keyDown(cell.querySelector('input')!, { key: 'Tab' }); expect(getCell(3, 2)).toHaveFocus(); }); }); diff --git a/packages/grid/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx index 9052f425c6c2e..aec94be7c800e 100644 --- a/packages/grid/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx @@ -9,14 +9,7 @@ import { DataGridProProps, } from '@mui/x-data-grid-pro'; import { getBasicGridData } from '@mui/x-data-grid-generator'; -import { - createRenderer, - fireEvent, - screen, - act, - userEvent, - // @ts-expect-error Remove once the test utils are typed -} from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, screen, act, userEvent } from '@mui/monorepo/test/utils'; import { getActiveCell, getActiveColumnHeader, @@ -36,10 +29,10 @@ describe(' - Row pinning', () => { } function getTopPinnedRowsContainer() { - return document.querySelector(`.${gridClasses['pinnedRows--top']}`) as HTMLElement; + return document.querySelector(`.${gridClasses['pinnedRows--top']}`); } function getBottomPinnedRowsContainer() { - return document.querySelector(`.${gridClasses['pinnedRows--bottom']}`) as HTMLElement; + return document.querySelector(`.${gridClasses['pinnedRows--bottom']}`); } function isRowPinned(row: Element | null, section: 'top' | 'bottom') { diff --git a/packages/grid/x-data-grid-pro/src/tests/rowReorder.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rowReorder.DataGridPro.test.tsx index 8958f6c95e8d9..7aee64b05493c 100644 --- a/packages/grid/x-data-grid-pro/src/tests/rowReorder.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/rowReorder.DataGridPro.test.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, createEvent } from '@mui/monorepo/test/utils'; import { getCell, getRowsFieldContent } from 'test/utils/helperFn'; import { useGridApiRef, DataGridPro, gridClasses, GridApi } from '@mui/x-data-grid-pro'; diff --git a/packages/grid/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx index 5eda8325ea5ad..6acec83dc9a85 100644 --- a/packages/grid/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; import { getCell, getColumnValues, getRows } from 'test/utils/helperFn'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, screen, act } from '@mui/monorepo/test/utils'; import { GridApi, @@ -55,7 +54,7 @@ describe(' - Row Selection', () => { pageSizeOptions={[2]} />, ); - const selectAllCheckbox = screen.getByRole('checkbox', { + const selectAllCheckbox: HTMLInputElement = screen.getByRole('checkbox', { name: /select all rows/i, }); fireEvent.click(selectAllCheckbox); @@ -72,10 +71,10 @@ describe(' - Row Selection', () => { pageSizeOptions={[2]} />, ); - fireEvent.click(getCell(0, 0).querySelector('input')); + fireEvent.click(getCell(0, 0).querySelector('input')!); expect(apiRef.current.getSelectedRows()).to.have.keys([0]); fireEvent.click(screen.getByRole('button', { name: /next page/i })); - const selectAllCheckbox = screen.getByRole('checkbox', { + const selectAllCheckbox: HTMLInputElement = screen.getByRole('checkbox', { name: /select all rows/i, }); fireEvent.click(selectAllCheckbox); @@ -94,7 +93,7 @@ describe(' - Row Selection', () => { />, ); - const selectAllCheckbox = screen.getByRole('checkbox', { + const selectAllCheckbox: HTMLInputElement = screen.getByRole('checkbox', { name: /select all rows/i, }); fireEvent.click(selectAllCheckbox); @@ -117,8 +116,8 @@ describe(' - Row Selection', () => { name: /select all rows/i, }); - fireEvent.click(getCell(0, 0).querySelector('input')); - fireEvent.click(getCell(1, 0).querySelector('input')); + fireEvent.click(getCell(0, 0).querySelector('input')!); + fireEvent.click(getCell(1, 0).querySelector('input')!); fireEvent.click(screen.getByRole('button', { name: /next page/i })); expect(selectAllCheckbox).to.have.attr('data-indeterminate', 'true'); }); @@ -146,10 +145,10 @@ describe(' - Row Selection', () => { />, ); - fireEvent.click(getCell(0, 0).querySelector('input')); + fireEvent.click(getCell(0, 0).querySelector('input')!); expect(apiRef.current.getSelectedRows()).to.have.keys([0]); fireEvent.click(screen.getByRole('button', { name: /next page/i })); - const selectAllCheckbox = screen.getByRole('checkbox', { + const selectAllCheckbox: HTMLInputElement = screen.getByRole('checkbox', { name: /select all rows/i, }); fireEvent.click(selectAllCheckbox); @@ -168,12 +167,12 @@ describe(' - Row Selection', () => { />, ); - fireEvent.click(getCell(0, 0).querySelector('input')); + fireEvent.click(getCell(0, 0).querySelector('input')!); expect(apiRef.current.getSelectedRows()).to.have.keys([0]); fireEvent.click(screen.getByRole('button', { name: /next page/i })); - fireEvent.click(getCell(2, 0).querySelector('input')); + fireEvent.click(getCell(2, 0).querySelector('input')!); expect(apiRef.current.getSelectedRows()).to.have.keys([0, 2]); - const selectAllCheckbox = screen.getByRole('checkbox', { + const selectAllCheckbox: HTMLInputElement = screen.getByRole('checkbox', { name: /select all rows/i, }); fireEvent.click(selectAllCheckbox); diff --git a/packages/grid/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx index 27445e2fe9f32..93a97fa666577 100644 --- a/packages/grid/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, act, userEvent } from '@mui/monorepo/test/utils'; import { spy } from 'sinon'; import { expect } from 'chai'; diff --git a/packages/grid/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx index 6d34c3cd4b134..cd77c3eb27eef 100644 --- a/packages/grid/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx @@ -7,7 +7,6 @@ import { useGridApiRef, GridColDef, } from '@mui/x-data-grid-pro'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, act } from '@mui/monorepo/test/utils'; import { expect } from 'chai'; import { spy } from 'sinon'; diff --git a/packages/grid/x-data-grid-pro/src/tests/state.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/state.DataGridPro.test.tsx index ecd33483a3f84..266afb032ca1f 100644 --- a/packages/grid/x-data-grid-pro/src/tests/state.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/state.DataGridPro.test.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, screen } from '@mui/monorepo/test/utils'; import { getColumnValues } from 'test/utils/helperFn'; import { expect } from 'chai'; diff --git a/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx index 8879e54cec419..b228fdfe3e723 100644 --- a/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx @@ -10,7 +10,6 @@ import { GridRowsProp, useGridApiRef, } from '@mui/x-data-grid-pro'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, screen, act } from '@mui/monorepo/test/utils'; import { expect } from 'chai'; import { diff --git a/packages/grid/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx index c8a7e6a97fb2d..0dc533164747c 100644 --- a/packages/grid/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx @@ -1,4 +1,3 @@ -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, screen, act, userEvent } from '@mui/monorepo/test/utils'; import { getCell, @@ -369,9 +368,9 @@ describe(' - Tree Data', () => { it('should toggle expansion when clicking on grouping column icon', () => { render(); expect(getColumnValues(1)).to.deep.equal(['A', 'B', 'C']); - fireEvent.click(getCell(0, 0).querySelector('button')); + fireEvent.click(getCell(0, 0).querySelector('button')!); expect(getColumnValues(1)).to.deep.equal(['A', 'A.A', 'A.B', 'B', 'C']); - fireEvent.click(getCell(0, 0).querySelector('button')); + fireEvent.click(getCell(0, 0).querySelector('button')!); expect(getColumnValues(1)).to.deep.equal(['A', 'B', 'C']); }); @@ -425,7 +424,7 @@ describe(' - Tree Data', () => { it('should respect the pageSize for the top level rows when toggling children expansion', () => { render(); expect(getColumnValues(1)).to.deep.equal(['A', 'B']); - fireEvent.click(getCell(0, 0).querySelector('button')); + fireEvent.click(getCell(0, 0).querySelector('button')!); expect(getColumnValues(1)).to.deep.equal(['A', 'A.A', 'A.B', 'B']); fireEvent.click(screen.getByRole('button', { name: /next page/i })); expect(getColumnValues(1)).to.deep.equal(['C']); @@ -434,15 +433,15 @@ describe(' - Tree Data', () => { it('should keep the row expansion when switching page', () => { render(); expect(getColumnValues(1)).to.deep.equal(['A']); - fireEvent.click(getCell(0, 0).querySelector('button')); + fireEvent.click(getCell(0, 0).querySelector('button')!); expect(getColumnValues(1)).to.deep.equal(['A', 'A.A', 'A.B']); fireEvent.click(screen.getByRole('button', { name: /next page/i })); expect(getColumnValues(1)).to.deep.equal(['B']); - fireEvent.click(getCell(3, 0).querySelector('button')); + fireEvent.click(getCell(3, 0).querySelector('button')!); expect(getColumnValues(1)).to.deep.equal(['B', 'B.A', 'B.B']); fireEvent.click(screen.getByRole('button', { name: /previous page/i })); expect(getColumnValues(1)).to.deep.equal(['A', 'A.A', 'A.B']); - fireEvent.click(getCell(0, 0).querySelector('button')); + fireEvent.click(getCell(0, 0).querySelector('button')!); expect(getColumnValues(1)).to.deep.equal(['A']); fireEvent.click(screen.getByRole('button', { name: /next page/i })); expect(getColumnValues(1)).to.deep.equal(['B', 'B.A', 'B.B']); diff --git a/packages/grid/x-data-grid/src/components/panel/GridPanel.test.tsx b/packages/grid/x-data-grid/src/components/panel/GridPanel.test.tsx index b53b085cc41f4..e201e19b16dce 100644 --- a/packages/grid/x-data-grid/src/components/panel/GridPanel.test.tsx +++ b/packages/grid/x-data-grid/src/components/panel/GridPanel.test.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, describeConformance } from '@mui/monorepo/test/utils'; import { GridPanel, @@ -31,11 +30,12 @@ describe('', () => { } describeConformance(, () => ({ - classes, + classes: classes as any, inheritComponent: Popper, - render: (node: React.ReactNode) => render({node}), + muiName: 'MuiGridPanel', + render: (node: React.ReactElement) => render({node}), wrapMount: - (baseMount: (node: React.ReactNode) => import('enzyme').ReactWrapper) => + (baseMount: (node: React.ReactElement) => import('enzyme').ReactWrapper) => (node: React.ReactNode) => { const wrapper = baseMount( diff --git a/packages/grid/x-data-grid/src/hooks/utils/useGridApiEventHandler.test.tsx b/packages/grid/x-data-grid/src/hooks/utils/useGridApiEventHandler.test.tsx index 1bee67891e959..1d022dd848dea 100644 --- a/packages/grid/x-data-grid/src/hooks/utils/useGridApiEventHandler.test.tsx +++ b/packages/grid/x-data-grid/src/hooks/utils/useGridApiEventHandler.test.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { spy } from 'sinon'; import { expect } from 'chai'; -// @ts-ignore Remove once the test utils are typed import { createRenderer } from '@mui/monorepo/test/utils'; import { createUseGridApiEventHandler } from './useGridApiEventHandler'; import { FinalizationRegistryBasedCleanupTracking } from '../../utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking'; diff --git a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx index fcd468171f4d9..6faa3c7270c84 100644 --- a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { spy } from 'sinon'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, userEvent } from '@mui/monorepo/test/utils'; import { expect } from 'chai'; import { DataGrid } from '@mui/x-data-grid'; diff --git a/packages/grid/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx index 5a4ce7cb466af..16517952adbee 100644 --- a/packages/grid/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, screen, within } from '@mui/monorepo/test/utils'; import { expect } from 'chai'; import { DataGrid } from '@mui/x-data-grid'; @@ -129,7 +128,7 @@ describe(' - Column Headers', () => { , ); const columnCell = getColumnHeaderCell(0); - const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]'); + const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!; fireEvent.click(menuIconButton); clock.runToLast(); diff --git a/packages/grid/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx index 11aa2cd8f3432..449c975019c0a 100644 --- a/packages/grid/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, screen, within, userEvent } from '@mui/monorepo/test/utils'; import { expect } from 'chai'; import { DataGrid, gridClasses, GridColDef } from '@mui/x-data-grid'; @@ -228,7 +227,7 @@ describe(' - Column Spanning', () => { fireEvent.keyDown(getCell(1, 3), { key: 'Enter' }); // commit - fireEvent.keyDown(getCell(1, 3).querySelector('input'), { key: 'Enter' }); + fireEvent.keyDown(getCell(1, 3).querySelector('input')!, { key: 'Enter' }); expect(getActiveCell()).to.equal('2-2'); }); @@ -246,7 +245,7 @@ describe(' - Column Spanning', () => { // start editing fireEvent.keyDown(getCell(1, 1), { key: 'Enter' }); - fireEvent.keyDown(getCell(1, 1).querySelector('input'), { key: 'Tab' }); + fireEvent.keyDown(getCell(1, 1).querySelector('input')!, { key: 'Tab' }); expect(getActiveCell()).to.equal('1-3'); }); @@ -264,7 +263,7 @@ describe(' - Column Spanning', () => { // start editing fireEvent.keyDown(getCell(0, 2), { key: 'Enter' }); - fireEvent.keyDown(getCell(0, 2).querySelector('input'), { key: 'Tab', shiftKey: true }); + fireEvent.keyDown(getCell(0, 2).querySelector('input')!, { key: 'Tab', shiftKey: true }); expect(getActiveCell()).to.equal('0-0'); }); @@ -465,9 +464,9 @@ describe(' - Column Spanning', () => { userEvent.mousePress(getCell(0, 0)); - const virtualScroller = document.querySelector( + const virtualScroller = document.querySelector( `.${gridClasses.virtualScroller}`, - )! as HTMLElement; + )!; fireEvent.keyDown(getCell(0, 0), { key: 'ArrowRight' }); virtualScroller.dispatchEvent(new Event('scroll')); diff --git a/packages/grid/x-data-grid/src/tests/columns.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/columns.DataGrid.test.tsx index 45ee11c94e1d4..ed190096f1a09 100644 --- a/packages/grid/x-data-grid/src/tests/columns.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/columns.DataGrid.test.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { expect } from 'chai'; -// @ts-ignore Remove once the test utils are typed import { createRenderer } from '@mui/monorepo/test/utils'; import { DataGrid, DataGridProps, GridRowsProp, GridColDef } from '@mui/x-data-grid'; import { diff --git a/packages/grid/x-data-grid/src/tests/columnsGrouping.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/columnsGrouping.DataGrid.test.tsx index 29f8df0feb8b0..838ae420eed89 100644 --- a/packages/grid/x-data-grid/src/tests/columnsGrouping.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/columnsGrouping.DataGrid.test.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { expect } from 'chai'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, ErrorBoundary, screen } from '@mui/monorepo/test/utils'; import { DataGrid, DataGridProps, GridRowModel, GridColDef } from '@mui/x-data-grid'; @@ -293,7 +292,7 @@ describe(' - Column grouping', () => { describe.skip('error messages', () => { function TestWithError(props: TestDataGridProps) { return ( - + ); diff --git a/packages/grid/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx index fc1dc31d236b1..9bc9de4488992 100644 --- a/packages/grid/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, screen } from '@mui/monorepo/test/utils'; import { DataGrid, DataGridProps, GridRowsProp, GridColDef, GridToolbar } from '@mui/x-data-grid'; import { getColumnHeadersTextContent } from '../../../../../test/utils/helperFn'; diff --git a/packages/grid/x-data-grid/src/tests/components.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/components.DataGrid.test.tsx index 9cab764fa7b87..b34915df5b861 100644 --- a/packages/grid/x-data-grid/src/tests/components.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/components.DataGrid.test.tsx @@ -1,11 +1,5 @@ import * as React from 'react'; -import { - createRenderer, - ErrorBoundary, - fireEvent, - screen, - // @ts-ignore Remove once the test utils are typed -} from '@mui/monorepo/test/utils'; +import { createRenderer, ErrorBoundary, fireEvent, screen } from '@mui/monorepo/test/utils'; import { expect } from 'chai'; import { spy } from 'sinon'; import { DataGrid, GridOverlay } from '@mui/x-data-grid'; @@ -100,7 +94,7 @@ describe(' - Components', () => { , ); expect(onClick.callCount).to.equal(0); - const button = screen.queryByRole('button', { name: /show filters/i }); + const button = screen.getByRole('button', { name: /show filters/i }); fireEvent.click(button); expect(onClick.lastCall.args[0]).to.have.property('field', 'brand'); expect(onClick.lastCall.args[1]).to.have.property('target', button); diff --git a/packages/grid/x-data-grid/src/tests/export.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/export.DataGrid.test.tsx index 37d361fdc6bb9..89021247df41b 100644 --- a/packages/grid/x-data-grid/src/tests/export.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/export.DataGrid.test.tsx @@ -3,7 +3,6 @@ import { expect } from 'chai'; import { spy, SinonSpy } from 'sinon'; import { DataGrid, DataGridProps, GridToolbar, GridToolbarExport } from '@mui/x-data-grid'; import { useBasicDemoData } from '@mui/x-data-grid-generator'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, screen, fireEvent } from '@mui/monorepo/test/utils'; describe(' - Export', () => { @@ -39,10 +38,10 @@ describe(' - Export', () => { describe('component: GridToolbar', () => { it('should export with the default csvOptions', async () => { render(); - fireEvent.click(screen.queryByRole('button', { name: 'Export' })); + fireEvent.click(screen.getByRole('button', { name: 'Export' })); clock.runToLast(); expect(screen.queryByRole('menu')).not.to.equal(null); - fireEvent.click(screen.queryByRole('menuitem', { name: 'Download as CSV' })); + fireEvent.click(screen.getByRole('menuitem', { name: 'Download as CSV' })); expect(spyCreateObjectURL.callCount).to.equal(1); const csv = await spyCreateObjectURL.lastCall.firstArg.text(); expect(csv).to.equal(['id,Currency Pair', '0,USDGBP', '1,USDEUR', '2,GBPEUR'].join('\r\n')); @@ -55,10 +54,10 @@ describe(' - Export', () => { componentsProps={{ toolbar: { csvOptions: { delimiter: ';' } } }} />, ); - fireEvent.click(screen.queryByRole('button', { name: 'Export' })); + fireEvent.click(screen.getByRole('button', { name: 'Export' })); clock.runToLast(); expect(screen.queryByRole('menu')).not.to.equal(null); - fireEvent.click(screen.queryByRole('menuitem', { name: 'Download as CSV' })); + fireEvent.click(screen.getByRole('menuitem', { name: 'Download as CSV' })); expect(spyCreateObjectURL.callCount).to.equal(1); const csv = await spyCreateObjectURL.lastCall.firstArg.text(); expect(csv).to.equal(['id;Currency Pair', '0;USDGBP', '1;USDEUR', '2;GBPEUR'].join('\r\n')); @@ -71,7 +70,7 @@ describe(' - Export', () => { componentsProps={{ toolbar: { csvOptions: { disableToolbarButton: true } } }} />, ); - fireEvent.click(screen.queryByRole('button', { name: 'Export' })); + fireEvent.click(screen.getByRole('button', { name: 'Export' })); clock.runToLast(); expect(screen.queryByRole('menu')).not.to.equal(null); expect(screen.queryByRole('menuitem', { name: 'Download as CSV' })).to.equal(null); @@ -81,10 +80,10 @@ describe(' - Export', () => { describe('component: GridToolbarExport', () => { it('should export with the default csvOptions', async () => { render( }} />); - fireEvent.click(screen.queryByRole('button', { name: 'Export' })); + fireEvent.click(screen.getByRole('button', { name: 'Export' })); clock.runToLast(); expect(screen.queryByRole('menu')).not.to.equal(null); - fireEvent.click(screen.queryByRole('menuitem', { name: 'Download as CSV' })); + fireEvent.click(screen.getByRole('menuitem', { name: 'Download as CSV' })); expect(spyCreateObjectURL.callCount).to.equal(1); const csv = await spyCreateObjectURL.lastCall.firstArg.text(); expect(csv).to.equal(['id,Currency Pair', '0,USDGBP', '1,USDEUR', '2,GBPEUR'].join('\r\n')); @@ -96,10 +95,10 @@ describe(' - Export', () => { components={{ Toolbar: () => }} />, ); - fireEvent.click(screen.queryByRole('button', { name: 'Export' })); + fireEvent.click(screen.getByRole('button', { name: 'Export' })); clock.runToLast(); expect(screen.queryByRole('menu')).not.to.equal(null); - fireEvent.click(screen.queryByRole('menuitem', { name: 'Download as CSV' })); + fireEvent.click(screen.getByRole('menuitem', { name: 'Download as CSV' })); expect(spyCreateObjectURL.callCount).to.equal(1); const csv = await spyCreateObjectURL.lastCall.firstArg.text(); expect(csv).to.equal(['id;Currency Pair', '0;USDGBP', '1;USDEUR', '2;GBPEUR'].join('\r\n')); @@ -113,7 +112,7 @@ describe(' - Export', () => { }} />, ); - fireEvent.click(screen.queryByRole('button', { name: 'Export' })); + fireEvent.click(screen.getByRole('button', { name: 'Export' })); clock.runToLast(); expect(screen.queryByRole('menu')).not.to.equal(null); expect(screen.queryByRole('menuitem', { name: 'Download as CSV' })).to.equal(null); diff --git a/packages/grid/x-data-grid/src/tests/filterPanel.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/filterPanel.DataGrid.test.tsx index 66e7cd3b8367c..a4aff18addb45 100644 --- a/packages/grid/x-data-grid/src/tests/filterPanel.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/filterPanel.DataGrid.test.tsx @@ -8,7 +8,6 @@ import { GridFilterInputValueProps, GridPreferencePanelsValue, } from '@mui/x-data-grid'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, screen } from '@mui/monorepo/test/utils'; import { getColumnHeaderCell, getColumnValues } from 'test/utils/helperFn'; @@ -149,7 +148,7 @@ describe(' - Filter panel', () => { filterModel={{ items: [{ field: 'brand', operator: 'contains' }] }} />, ); - expect(screen.getByRole('textbox', { name: 'Value' }).value).to.equal(''); + expect(screen.getByRole('textbox', { name: 'Value' }).value).to.equal(''); }); it('should keep filter operator and value if available', () => { @@ -174,15 +173,19 @@ describe(' - Filter panel', () => { }} />, ); - expect(screen.getByRole('textbox', { name: 'Value' }).value).to.equal('Puma'); - expect(screen.getByRole('combobox', { name: 'Operator' }).value).to.equal('equals'); + expect(screen.getByRole('textbox', { name: 'Value' }).value).to.equal('Puma'); + expect(screen.getByRole('combobox', { name: 'Operator' }).value).to.equal( + 'equals', + ); expect(getColumnValues(0)).to.deep.equal(['Puma']); setColumnValue('slogan'); expect(getColumnValues(0)).to.deep.equal([]); - expect(screen.getByRole('combobox', { name: 'Operator' }).value).to.equal('equals'); - expect(screen.getByRole('textbox', { name: 'Value' }).value).to.equal('Puma'); + expect(screen.getByRole('combobox', { name: 'Operator' }).value).to.equal( + 'equals', + ); + expect(screen.getByRole('textbox', { name: 'Value' }).value).to.equal('Puma'); }); it('should reset value if operator is not available for the new column', () => { @@ -207,15 +210,19 @@ describe(' - Filter panel', () => { }} />, ); - expect(screen.getByRole('textbox', { name: 'Value' }).value).to.equal('Pu'); - expect(screen.getByRole('combobox', { name: 'Operator' }).value).to.equal('contains'); + expect(screen.getByRole('textbox', { name: 'Value' }).value).to.equal('Pu'); + expect(screen.getByRole('combobox', { name: 'Operator' }).value).to.equal( + 'contains', + ); expect(getColumnValues(0)).to.deep.equal(['Puma']); setColumnValue('slogan'); expect(getColumnValues(0)).to.deep.equal([]); - expect(screen.getByRole('combobox', { name: 'Operator' }).value).to.equal('from'); - expect(screen.getByTestId('customInput').value).to.equal(''); + expect(screen.getByRole('combobox', { name: 'Operator' }).value).to.equal( + 'from', + ); + expect(screen.getByTestId('customInput').value).to.equal(''); }); it('should reset value if the new operator has no input component', () => { @@ -243,8 +250,10 @@ describe(' - Filter panel', () => { onFilterModelChange={onFilterModelChange} />, ); - expect(screen.getByRole('textbox', { name: 'Value' }).value).to.equal('Pu'); - expect(screen.getByRole('combobox', { name: 'Operator' }).value).to.equal('contains'); + expect(screen.getByRole('textbox', { name: 'Value' }).value).to.equal('Pu'); + expect(screen.getByRole('combobox', { name: 'Operator' }).value).to.equal( + 'contains', + ); expect(getColumnValues(0)).to.deep.equal(['Puma']); expect(onFilterModelChange.callCount).to.equal(0); @@ -254,7 +263,9 @@ describe(' - Filter panel', () => { expect(onFilterModelChange.callCount).to.equal(1); expect(onFilterModelChange.lastCall.args[0].items[0].value).to.equal(undefined); - expect(screen.getByRole('combobox', { name: 'Operator' }).value).to.equal('isEmpty'); + expect(screen.getByRole('combobox', { name: 'Operator' }).value).to.equal( + 'isEmpty', + ); }); it('should reset filter value if not available in the new valueOptions', () => { @@ -491,12 +502,16 @@ describe(' - Filter panel', () => { // open filter panel const columnCell = getColumnHeaderCell(0); - const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]'); + const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!; fireEvent.click(menuIconButton); - fireEvent.click(screen.queryByRole('menuitem', { name: 'Filter' })); + fireEvent.click(screen.getByRole('menuitem', { name: 'Filter' })); // check that the filter is still in the model - expect(screen.getByRole('combobox', { name: 'Columns' }).value).to.equal('brand'); - expect(screen.getByRole('combobox', { name: 'Operator' }).value).to.equal('isEmpty'); + expect(screen.getByRole('combobox', { name: 'Columns' }).value).to.equal( + 'brand', + ); + expect(screen.getByRole('combobox', { name: 'Operator' }).value).to.equal( + 'isEmpty', + ); }); }); diff --git a/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx index 33b3dc9b0d1d8..8a96937738ccb 100644 --- a/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, screen } from '@mui/monorepo/test/utils'; import { expect } from 'chai'; import { @@ -207,7 +206,7 @@ describe(' - Filter', () => { ); expect(getColumnValues(0)).to.deep.equal(['Adidas']); - fireEvent.change(screen.queryByRole('textbox', { name: 'Value' }), { + fireEvent.change(screen.getByRole('textbox', { name: 'Value' }), { target: { value: 'Puma' }, }); clock.runToLast(); @@ -1155,7 +1154,7 @@ describe(' - Filter', () => { , ); - const filterButton = document.querySelector('button[aria-label="Show filters"]'); + const filterButton = document.querySelector('button[aria-label="Show filters"]')!; expect(screen.queryByRole('tooltip')).to.equal(null); fireEvent.mouseOver(filterButton); diff --git a/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx index 8e12078589585..38a7cfaaba715 100644 --- a/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, screen, act, userEvent } from '@mui/monorepo/test/utils'; import { spy } from 'sinon'; import { expect } from 'chai'; @@ -91,7 +90,7 @@ describe(' - Keyboard', () => { const cell = getCell(0, 0); userEvent.mousePress(cell); expect(getActiveCell()).to.equal('0-0'); - fireEvent.keyDown(cell.querySelector('input'), { key: 'ArrowDown' }); + fireEvent.keyDown(cell.querySelector('input')!, { key: 'ArrowDown' }); expect(getActiveCell()).to.equal('1-0'); fireEvent.keyDown(document.activeElement!, { key: 'ArrowDown' }); expect(getActiveCell()).to.equal('2-0'); diff --git a/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx index baff7449f49ce..54722958b94ce 100644 --- a/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, screen, ErrorBoundary, waitFor } from '@mui/monorepo/test/utils'; import { stub, spy } from 'sinon'; import { expect } from 'chai'; @@ -94,13 +93,13 @@ describe(' - Layout & Warnings', () => { const { container, setProps } = render(); let rect; - rect = container.querySelector('[role="row"][data-rowindex="0"]').getBoundingClientRect(); + rect = container.querySelector('[role="row"][data-rowindex="0"]')!.getBoundingClientRect(); expect(rect.width).to.equal(300 - 2); setProps({ width: 400 }); await waitFor(() => { - rect = container.querySelector('[role="row"][data-rowindex="0"]').getBoundingClientRect(); + rect = container.querySelector('[role="row"][data-rowindex="0"]')!.getBoundingClientRect(); expect(rect.width).to.equal(400 - 2); }); }); @@ -115,7 +114,7 @@ describe(' - Layout & Warnings', () => { , ); expect(ref.current).to.be.instanceof(window.HTMLDivElement); - expect(ref.current).to.equal(container.firstChild.firstChild); + expect(ref.current).to.equal(container.firstChild?.firstChild); }); describe('`classes` prop', () => { @@ -130,7 +129,7 @@ describe(' - Layout & Warnings', () => { , ); - expect(container.firstChild.firstChild).to.have.class(classes.root); + expect(container.firstChild?.firstChild).to.have.class(classes.root); }); it('should support class names with underscores', () => { @@ -156,7 +155,7 @@ describe(' - Layout & Warnings', () => { , ); - expect(document.querySelector(`.${className}`)).to.equal(container.firstChild.firstChild); + expect(document.querySelector(`.${className}`)).to.equal(container.firstChild?.firstChild); }); it('should support columns.valueGetter using direct row access', () => { @@ -605,7 +604,7 @@ describe(' - Layout & Warnings', () => { } const { setProps } = render(); - setProps(); + setProps({}); const firstColumn = getColumnHeaderCell(0); expect(firstColumn).toHaveInlineStyle({ @@ -846,7 +845,7 @@ describe(' - Layout & Warnings', () => { }, ]; - const errorRef = React.createRef(); + const errorRef = React.createRef(); expect(() => { render( diff --git a/packages/grid/x-data-grid/src/tests/pagination.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/pagination.DataGrid.test.tsx index b97b7180f11ca..b62fa14716593 100644 --- a/packages/grid/x-data-grid/src/tests/pagination.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/pagination.DataGrid.test.tsx @@ -1,13 +1,7 @@ import * as React from 'react'; import { spy, stub, SinonStub, SinonSpy } from 'sinon'; import { expect } from 'chai'; -import { - createRenderer, - fireEvent, - screen, - act, - // @ts-ignore Remove once the test utils are typed -} from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, screen, act } from '@mui/monorepo/test/utils'; import { DataGrid, DataGridProps, @@ -106,7 +100,7 @@ describe(' - Pagination', () => { it('should apply the new pageSize when clicking on a page size option and onPaginationModelChange is not defined and paginationModel is not controlled', () => { render(); - fireEvent.mouseDown(screen.queryByLabelText('Rows per page:')); + fireEvent.mouseDown(screen.getByLabelText('Rows per page:')); expect(screen.queryAllByRole('option').length).to.equal(4); fireEvent.click(screen.queryAllByRole('option')[1]); @@ -122,7 +116,7 @@ describe(' - Pagination', () => { pageSizeOptions={[1, 2, 3, 100]} />, ); - fireEvent.mouseDown(screen.queryByLabelText('Rows per page:')); + fireEvent.mouseDown(screen.getByLabelText('Rows per page:')); expect(screen.queryAllByRole('option').length).to.equal(4); fireEvent.click(screen.queryAllByRole('option')[1]); @@ -297,7 +291,7 @@ describe(' - Pagination', () => { />, ); - fireEvent.mouseDown(screen.queryByLabelText('Rows per page:')); + fireEvent.mouseDown(screen.getByLabelText('Rows per page:')); expect(screen.queryAllByRole('option').length).to.equal(3); fireEvent.click(screen.queryAllByRole('option')[1]); @@ -310,7 +304,7 @@ describe(' - Pagination', () => { , ); - fireEvent.mouseDown(screen.queryByLabelText('Rows per page:')); + fireEvent.mouseDown(screen.getByLabelText('Rows per page:')); expect(screen.queryAllByRole('option').length).to.equal(3); fireEvent.click(screen.queryAllByRole('option')[1]); @@ -655,7 +649,7 @@ describe(' - Pagination', () => { expect(getColumnValues(0)).to.deep.equal(['0', '1']); - fireEvent.mouseDown(screen.queryByLabelText('Rows per page:')); + fireEvent.mouseDown(screen.getByLabelText('Rows per page:')); expect(screen.queryAllByRole('option').length).to.equal(2); fireEvent.click(screen.queryAllByRole('option')[1]); expect(getColumnValues(0)).to.deep.equal(['0', '1', '2', '3', '4']); diff --git a/packages/grid/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx index de02148f57f4e..cd7a929be7f9e 100644 --- a/packages/grid/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, screen, fireEvent } from '@mui/monorepo/test/utils'; import { expect } from 'chai'; import { spy } from 'sinon'; @@ -95,13 +94,13 @@ describe(' - Quick Filter', () => { }); clock.runToLast(); - expect(screen.getByRole('searchbox').value).to.equal('adidas nike'); + expect(screen.getByRole('searchbox').value).to.equal('adidas nike'); }); it('should update input when the state is modified', () => { const { setProps } = render(); - expect(screen.getByRole('searchbox').value).to.equal(''); + expect(screen.getByRole('searchbox').value).to.equal(''); setProps({ filterModel: { @@ -109,7 +108,7 @@ describe(' - Quick Filter', () => { quickFilterValues: ['adidas', 'nike'], }, }); - expect(screen.getByRole('searchbox').value).to.equal('adidas nike'); + expect(screen.getByRole('searchbox').value).to.equal('adidas nike'); setProps({ filterModel: { @@ -117,7 +116,7 @@ describe(' - Quick Filter', () => { quickFilterValues: [], }, }); - expect(screen.getByRole('searchbox').value).to.equal(''); + expect(screen.getByRole('searchbox').value).to.equal(''); }); it('should allow to customize input formatting', () => { @@ -131,14 +130,14 @@ describe(' - Quick Filter', () => { />, ); - expect(screen.getByRole('searchbox').value).to.equal(''); + expect(screen.getByRole('searchbox').value).to.equal(''); setProps({ filterModel: { items: [], quickFilterValues: ['adidas', 'nike'], }, }); - expect(screen.getByRole('searchbox').value).to.equal('adidas, nike'); + expect(screen.getByRole('searchbox').value).to.equal('adidas, nike'); }); }); diff --git a/packages/grid/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx index 9f540476c84c3..1daaada198838 100644 --- a/packages/grid/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -// @ts-expect-error Remove once the test utils are typed import { createRenderer, fireEvent, screen, act, userEvent } from '@mui/monorepo/test/utils'; import { DataGrid, @@ -210,11 +209,11 @@ describe(' - Row Selection', () => { expect(getSelectedRowIds()).to.deep.equal([]); expect(getRow(0).querySelector('input')).to.have.property('checked', false); - fireEvent.click(getCell(0, 0).querySelector('input')); + fireEvent.click(getCell(0, 0).querySelector('input')!); expect(getSelectedRowIds()).to.deep.equal([0]); expect(getRow(0).querySelector('input')).to.have.property('checked', true); - fireEvent.click(getCell(0, 0).querySelector('input')); + fireEvent.click(getCell(0, 0).querySelector('input')!); expect(getSelectedRowIds()).to.deep.equal([]); expect(getRow(0).querySelector('input')).to.have.property('checked', false); }); @@ -239,7 +238,7 @@ describe(' - Row Selection', () => { pageSizeOptions={[1]} />, ); - const selectAllCheckbox = document.querySelector('input[type="checkbox"]'); + const selectAllCheckbox = screen.getByRole('checkbox', { name: 'Select all rows' }); fireEvent.click(selectAllCheckbox); expect(getSelectedRowIds()).to.deep.equal([0]); fireEvent.click(screen.getByRole('button', { name: /next page/i })); @@ -272,36 +271,36 @@ describe(' - Row Selection', () => { it('should select a range with shift pressed when clicking the checkbox', () => { render(); - fireEvent.click(getCell(0, 0).querySelector('input')); + fireEvent.click(getCell(0, 0).querySelector('input')!); expect(getSelectedRowIds()).to.deep.equal([0]); - fireEvent.click(getCell(2, 0).querySelector('input'), { shiftKey: true }); + fireEvent.click(getCell(2, 0).querySelector('input')!, { shiftKey: true }); expect(getSelectedRowIds()).to.deep.equal([0, 1, 2]); }); it('should unselect from last clicked cell to cell after clicked cell if clicking inside a selected range', () => { render(); - fireEvent.click(getCell(0, 0).querySelector('input')); + fireEvent.click(getCell(0, 0).querySelector('input')!); expect(getSelectedRowIds()).to.deep.equal([0]); - fireEvent.click(getCell(3, 0).querySelector('input'), { shiftKey: true }); + fireEvent.click(getCell(3, 0).querySelector('input')!, { shiftKey: true }); expect(getSelectedRowIds()).to.deep.equal([0, 1, 2, 3]); - fireEvent.click(getCell(1, 0).querySelector('input'), { shiftKey: true }); + fireEvent.click(getCell(1, 0).querySelector('input')!, { shiftKey: true }); expect(getSelectedRowIds()).to.deep.equal([0, 1]); }); it('should not change the selection with shift pressed when clicking on the last row of the selection', () => { render(); - fireEvent.click(getCell(0, 0).querySelector('input')); + fireEvent.click(getCell(0, 0).querySelector('input')!); expect(getSelectedRowIds()).to.deep.equal([0]); - fireEvent.click(getCell(2, 0).querySelector('input'), { shiftKey: true }); + fireEvent.click(getCell(2, 0).querySelector('input')!, { shiftKey: true }); expect(getSelectedRowIds()).to.deep.equal([0, 1, 2]); - fireEvent.click(getCell(2, 0).querySelector('input'), { shiftKey: true }); + fireEvent.click(getCell(2, 0).querySelector('input')!, { shiftKey: true }); expect(getSelectedRowIds()).to.deep.equal([0, 1, 2]); }); it('should keep only one selected row when turning off checkboxSelection', () => { const { setProps } = render(); - fireEvent.click(getCell(0, 0).querySelector('input')); - fireEvent.click(getCell(1, 0).querySelector('input')); + fireEvent.click(getCell(0, 0).querySelector('input')!); + fireEvent.click(getCell(1, 0).querySelector('input')!); expect(getSelectedRowIds()).to.deep.equal([0, 1]); setProps({ checkboxSelection: false }); expect(getSelectedRowIds()).to.deep.equal([0]); @@ -309,8 +308,8 @@ describe(' - Row Selection', () => { it('should keep only one selectable row as selected when turning off checkboxSelection', () => { const { setProps } = render(); - fireEvent.click(getCell(0, 0).querySelector('input')); - fireEvent.click(getCell(1, 0).querySelector('input')); + fireEvent.click(getCell(0, 0).querySelector('input')!); + fireEvent.click(getCell(1, 0).querySelector('input')!); expect(getSelectedRowIds()).to.deep.equal([0, 1]); setProps({ checkboxSelection: false, @@ -328,10 +327,10 @@ describe(' - Row Selection', () => { pageSizeOptions={[2]} />, ); - fireEvent.click(getCell(0, 0).querySelector('input')); + fireEvent.click(getCell(0, 0).querySelector('input')!); expect(getSelectedRowIds()).to.deep.equal([0]); fireEvent.click(screen.getByRole('button', { name: /next page/i })); - fireEvent.click(getCell(2, 0).querySelector('input')); + fireEvent.click(getCell(2, 0).querySelector('input')!); expect(screen.getByText('2 rows selected')).not.to.equal(null); setProps({ checkboxSelection: false }); expect(getSelectedRowIds()).to.deep.equal([2]); @@ -494,7 +493,7 @@ describe(' - Row Selection', () => { const cell = getCell(1, 1); userEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'ArrowLeft' }); - fireEvent.keyDown(getCell(1, 0).querySelector('input'), { key: 'ArrowUp' }); + fireEvent.keyDown(getCell(1, 0).querySelector('input')!, { key: 'ArrowUp' }); clock.runToLast(); // Wait for transition expect(document.querySelectorAll('.MuiTouchRipple-rippleVisible')).to.have.length(1); }); @@ -507,8 +506,8 @@ describe(' - Row Selection', () => { true} checkboxSelection />, ); - fireEvent.click(getCell(0, 0).querySelector('input')); - fireEvent.click(getCell(1, 0).querySelector('input')); + fireEvent.click(getCell(0, 0).querySelector('input')!); + fireEvent.click(getCell(1, 0).querySelector('input')!); expect(getSelectedRowIds()).to.deep.equal([0, 1]); @@ -651,10 +650,10 @@ describe(' - Row Selection', () => { onRowSelectionModelChange={onRowSelectionModelChange} />, ); - fireEvent.click(getCell(0, 0).querySelector('input')); + fireEvent.click(getCell(0, 0).querySelector('input')!); expect(onRowSelectionModelChange.lastCall.args[0]).to.deep.equal([0]); fireEvent.click(screen.getByRole('button', { name: /next page/i })); - fireEvent.click(getCell(2, 0).querySelector('input')); + fireEvent.click(getCell(2, 0).querySelector('input')!); expect(onRowSelectionModelChange.lastCall.args[0]).to.deep.equal([0, 2]); setProps({ checkboxSelection: false, isRowSelectable: () => false }); expect(onRowSelectionModelChange.lastCall.args[0]).to.deep.equal([]); @@ -670,8 +669,8 @@ describe(' - Row Selection', () => { onRowSelectionModelChange={onRowSelectionModelChange} />, ); - fireEvent.click(getCell(0, 0).querySelector('input')); - fireEvent.click(getCell(1, 0).querySelector('input')); + fireEvent.click(getCell(0, 0).querySelector('input')!); + fireEvent.click(getCell(1, 0).querySelector('input')!); expect(onRowSelectionModelChange.lastCall.args[0]).to.deep.equal([0, 1]); fireEvent.click(screen.getByRole('button', { name: /next page/i })); setProps({ checkboxSelection: false }); diff --git a/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx index c0f3b64287960..5a66805537759 100644 --- a/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx @@ -6,7 +6,6 @@ import { act, userEvent, ErrorBoundary, - // @ts-ignore Remove once the test utils are typed } from '@mui/monorepo/test/utils'; import clsx from 'clsx'; import { expect } from 'chai'; @@ -116,9 +115,9 @@ describe(' - Rows', () => { /> , ); - fireEvent.click(document.querySelector('input[name="portal-input"]')); + fireEvent.click(document.querySelector('input[name="portal-input"]')!); expect(handleRowClick.callCount).to.equal(0); - fireEvent.click(document.querySelector('input[name="input"]')); + fireEvent.click(document.querySelector('input[name="input"]')!); expect(handleRowClick.callCount).to.equal(1); }); @@ -251,7 +250,7 @@ describe(' - Rows', () => { expect(getRow(0)).not.to.have.class('Mui-selected'); fireEvent.click(screen.getByRole('menuitem', { name: 'more' })); expect(screen.queryByText('print')).not.to.equal(null); - fireEvent.click(screen.queryByText('print')); + fireEvent.click(screen.getByText('print')); expect(getRow(0)).not.to.have.class('Mui-selected'); }); @@ -293,7 +292,7 @@ describe(' - Rows', () => { expect(getActiveCell()).to.equal('0-0'); fireEvent.keyDown(firstCell, { key: 'ArrowRight' }); - const printButton = screen.queryByRole('menuitem', { name: 'print' }); + const printButton = screen.getByRole('menuitem', { name: 'print' }); expect(printButton).toHaveFocus(); fireEvent.keyDown(printButton, { key: 'ArrowLeft' }); diff --git a/packages/grid/x-data-grid/src/tests/sorting.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/sorting.DataGrid.test.tsx index 4281d15ee261f..c10f6568c574f 100644 --- a/packages/grid/x-data-grid/src/tests/sorting.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/sorting.DataGrid.test.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, screen, act } from '@mui/monorepo/test/utils'; import { expect } from 'chai'; import { DataGrid, DataGridProps, GridSortModel, useGridApiRef, GridApi } from '@mui/x-data-grid'; @@ -103,7 +102,7 @@ describe(' - Sorting', () => { ); const header = screen .getByRole('columnheader', { name: 'isPublished' }) - .querySelector('.MuiDataGrid-columnHeaderTitleContainer'); + .querySelector('.MuiDataGrid-columnHeaderTitleContainer')!; expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); fireEvent.click(header); expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); @@ -279,7 +278,7 @@ describe(' - Sorting', () => { const header = screen .getByRole('columnheader', { name: 'brand' }) - .querySelector('.MuiDataGrid-columnHeaderTitleContainer'); + .querySelector('.MuiDataGrid-columnHeaderTitleContainer')!; expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); fireEvent.click(header); expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Nike', 'Puma']); @@ -326,7 +325,7 @@ describe(' - Sorting', () => { const header = screen .getByRole('columnheader', { name: 'brand' }) - .querySelector('.MuiDataGrid-columnHeaderTitleContainer'); + .querySelector('.MuiDataGrid-columnHeaderTitleContainer')!; expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); fireEvent.click(header); expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Nike', 'Puma']); diff --git a/packages/grid/x-data-grid/src/tests/toolbar.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/toolbar.DataGrid.test.tsx index f4226c6a06633..7260822b8bbbf 100644 --- a/packages/grid/x-data-grid/src/tests/toolbar.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/toolbar.DataGrid.test.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -// @ts-ignore Remove once the test utils are typed import { createRenderer, fireEvent, screen, act } from '@mui/monorepo/test/utils'; import { getColumnHeadersTextContent } from 'test/utils/helperFn'; import { expect } from 'chai'; @@ -167,7 +166,7 @@ describe(' - Toolbar', () => { expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'brand']); fireEvent.click(getByText('Columns')); - fireEvent.click(document.querySelector('[role="tooltip"] [name="id"]')); + fireEvent.click(screen.getByRole('tooltip').querySelector('[name="id"]')!); expect(getColumnHeadersTextContent()).to.deep.equal(['brand']); }); @@ -241,8 +240,8 @@ describe(' - Toolbar', () => { act(() => button.focus()); fireEvent.click(button); - const column: HTMLElement | null = document.querySelector('[role="tooltip"] [name="id"]'); - act(() => column!.focus()); + const column: HTMLElement = screen.getByRole('tooltip').querySelector('[name="id"]')!; + act(() => column.focus()); fireEvent.click(column); expect(column).toHaveFocus(); diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.test.tsx b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.test.tsx index 1a8036b0c4b13..594d4f195a56c 100644 --- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.test.tsx +++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.test.tsx @@ -25,7 +25,7 @@ import { DateRangePickerDay } from '@mui/x-date-pickers-pro/DateRangePickerDay'; import { DateRangePosition } from './DateRangeCalendar.types'; const getPickerDay = (name: string, picker = 'January 2018') => - getByRole(screen.getByText(picker)?.parentElement?.parentElement, 'gridcell', { name }); + getByRole(screen.getByText(picker)?.parentElement?.parentElement!, 'gridcell', { name }); const dynamicShouldDisableDate = (date, position: DateRangePosition) => { if (position === 'end') { @@ -149,23 +149,20 @@ describe('', () => { const fireTouchEvent = ( type: 'touchstart' | 'touchmove' | 'touchend', - target: ChildNode, + target: Element, touch: TouchTarget, ) => { fireTouchChangedEvent(target, type, { changedTouches: [touch] }); }; - const executeDateTouchDragWithoutEnd = ( - target: ChildNode, - ...touchTargets: TouchTarget[] - ) => { + const executeDateTouchDragWithoutEnd = (target: Element, ...touchTargets: TouchTarget[]) => { fireTouchEvent('touchstart', target, touchTargets[0]); touchTargets.slice(0, touchTargets.length - 1).forEach((touch) => { fireTouchEvent('touchmove', target, touch); }); }; - const executeDateTouchDrag = (target: ChildNode, ...touchTargets: TouchTarget[]) => { + const executeDateTouchDrag = (target: Element, ...touchTargets: TouchTarget[]) => { const endTouchTarget = touchTargets[touchTargets.length - 1]; executeDateTouchDragWithoutEnd(target, ...touchTargets); fireTouchEvent('touchend', target, endTouchTarget); @@ -408,7 +405,9 @@ describe('', () => { ); expect(screen.getByRole('gridcell', { name: '5' })).to.have.attribute('disabled'); - expect(screen.getAllByRole('gridcell').filter((c) => c.disabled)).to.have.lengthOf(6); + expect( + screen.getAllByRole('gridcell').filter((c) => c.disabled), + ).to.have.lengthOf(6); // flip date range executeDateDragWithoutDrop( screen.getByRole('gridcell', { name: '1' }), @@ -417,7 +416,9 @@ describe('', () => { ); expect(screen.getByRole('gridcell', { name: '9' })).to.have.attribute('disabled'); - expect(screen.getAllByRole('gridcell').filter((c) => c.disabled)).to.have.lengthOf(10); + expect( + screen.getAllByRole('gridcell').filter((c) => c.disabled), + ).to.have.lengthOf(10); }); it('should dynamically update "shouldDisableDate" when flip touch dragging', function test() { @@ -437,7 +438,9 @@ describe('', () => { ); expect(screen.getByRole('gridcell', { name: '5' })).to.have.attribute('disabled'); - expect(screen.getAllByRole('gridcell').filter((c) => c.disabled)).to.have.lengthOf(6); + expect( + screen.getAllByRole('gridcell').filter((c) => c.disabled), + ).to.have.lengthOf(6); // flip date range executeDateTouchDragWithoutEnd( screen.getByRole('gridcell', { name: '1' }), @@ -447,7 +450,9 @@ describe('', () => { ); expect(screen.getByRole('gridcell', { name: '9' })).to.have.attribute('disabled'); - expect(screen.getAllByRole('gridcell').filter((c) => c.disabled)).to.have.lengthOf(10); + expect( + screen.getAllByRole('gridcell').filter((c) => c.disabled), + ).to.have.lengthOf(10); }); }); }); diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/describes.DateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/describes.DateRangePicker.test.tsx index 3bcd6cfb45f97..7c15242966e88 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/describes.DateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/describes.DateRangePicker.test.tsx @@ -1,11 +1,14 @@ import * as React from 'react'; import { describeConformance } from '@mui/monorepo/test/utils'; import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker'; -import { wrapPickerMount } from 'test/utils/pickers-utils'; +import { createPickerRenderer, wrapPickerMount } from 'test/utils/pickers-utils'; describe(' - Describes', () => { + const { render } = createPickerRenderer({ clock: 'fake' }); + describeConformance(, () => ({ - classes: {}, + classes: {} as any, + render, muiName: 'MuiDateRangePicker', wrapMount: wrapPickerMount, refInstanceof: window.HTMLDivElement, diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.test.tsx index f02c0af8defb8..d887bc63f5aef 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.test.tsx @@ -21,8 +21,8 @@ import { openPicker, } from 'test/utils/pickers-utils'; -const getPickerDay = (name: string, picker = 'January 2018') => - getByRole(screen.getByText(picker)?.parentElement?.parentElement, 'gridcell', { name }); +const getPickerDay = (name: string, picker = 'January 2018'): HTMLButtonElement => + getByRole(screen.getByText(picker)?.parentElement?.parentElement!, 'gridcell', { name }); describe('', () => { const { render, clock } = createPickerRenderer({ @@ -31,7 +31,8 @@ describe('', () => { }); describeConformance(, () => ({ - classes: {}, + classes: {} as any, + render, muiName: 'MuiDesktopDateRangePicker', wrapMount: wrapPickerMount, refInstanceof: window.HTMLDivElement, diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/describes.DesktopDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/describes.DesktopDateRangePicker.test.tsx index 6e52bb2ef797c..568a1b49078b6 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/describes.DesktopDateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/describes.DesktopDateRangePicker.test.tsx @@ -43,7 +43,7 @@ describe(' - Describes', () => { ], emptyValue: [null, null], assertRenderedValue: (expectedValues: any[]) => { - const textBoxes = screen.getAllByRole('textbox'); + const textBoxes: HTMLInputElement[] = screen.getAllByRole('textbox'); expectedValues.forEach((value, index) => { const expectedValueStr = value == null ? 'MM/DD/YYYY' : adapterToUse.format(value, 'keyboardDate'); @@ -64,11 +64,11 @@ describe(' - Describes', () => { if (isOpened) { userEvent.mousePress( screen.getAllByRole('gridcell', { - name: adapterToUse.getDate(newValue[setEndDate ? 1 : 0]), + name: adapterToUse.getDate(newValue[setEndDate ? 1 : 0]).toString(), })[0], ); } else { - const input = screen.getAllByRole('textbox')[0]; + const input = screen.getAllByRole('textbox')[0]; clickOnInput(input, 9, 11); // Update the day userEvent.keyPress(input, { key: 'ArrowUp' }); } diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.test.tsx index aa91847bd4b4a..a682fba7543b3 100644 --- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.test.tsx @@ -19,7 +19,8 @@ describe('', () => { }); describeConformance(, () => ({ - classes: {}, + classes: {} as any, + render, muiName: 'MuiMobileDateRangePicker', wrapMount: wrapPickerMount, refInstanceof: window.HTMLDivElement, diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/describes.MobileDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/describes.MobileDateRangePicker.test.tsx index c4aeed77d3686..68401fa8bfe91 100644 --- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/describes.MobileDateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/describes.MobileDateRangePicker.test.tsx @@ -39,7 +39,10 @@ describe(' - Describes', () => { emptyValue: [null, null], assertRenderedValue: (expectedValues: any[]) => { // `getAllByRole('textbox')` does not work here, because inputs are `readonly` - const textBoxes = [screen.getByLabelText('Start'), screen.getByLabelText('End')]; + const textBoxes: HTMLInputElement[] = [ + screen.getByLabelText('Start'), + screen.getByLabelText('End'), + ]; expectedValues.forEach((value, index) => { const expectedValueStr = value == null ? 'MM/DD/YYYY' : adapterToUse.format(value, 'keyboardDate'); @@ -63,7 +66,7 @@ describe(' - Describes', () => { userEvent.mousePress( screen.getAllByRole('gridcell', { - name: adapterToUse.getDate(newValue[setEndDate ? 1 : 0]), + name: adapterToUse.getDate(newValue[setEndDate ? 1 : 0]).toString(), })[0], ); diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/tests/MultiInputDateRangeField.conformance.test.tsx b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/tests/MultiInputDateRangeField.conformance.test.tsx index a7c7c9ce24c95..c352132d3343a 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/tests/MultiInputDateRangeField.conformance.test.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/tests/MultiInputDateRangeField.conformance.test.tsx @@ -7,7 +7,7 @@ describe('', () => { const { render } = createPickerRenderer(); describeConformance(, () => ({ - classes: {}, + classes: {} as any, inheritComponent: 'div', render, muiName: 'MuiMultiInputDateRangeField', diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/tests/MultiInputDateTimeRangeField.conformance.test.tsx b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/tests/MultiInputDateTimeRangeField.conformance.test.tsx index 7fdfd7da1faf2..8d511e5544965 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/tests/MultiInputDateTimeRangeField.conformance.test.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/tests/MultiInputDateTimeRangeField.conformance.test.tsx @@ -7,7 +7,7 @@ describe('', () => { const { render } = createPickerRenderer(); describeConformance(, () => ({ - classes: {}, + classes: {} as any, inheritComponent: 'div', render, muiName: 'MuiMultiInputDateTimeRangeField', diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/tests/MultiInputTimeRangeField.conformance.test.tsx b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/tests/MultiInputTimeRangeField.conformance.test.tsx index c66711100a3a7..0857485f75aae 100644 --- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/tests/MultiInputTimeRangeField.conformance.test.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/tests/MultiInputTimeRangeField.conformance.test.tsx @@ -7,7 +7,7 @@ describe('', () => { const { render } = createPickerRenderer(); describeConformance(, () => ({ - classes: {}, + classes: {} as any, inheritComponent: 'div', render, muiName: 'MuiMultiInputTimeRangeField', diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/describes.SingleInputDateRangeField.test.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/describes.SingleInputDateRangeField.test.tsx index 8e4bfa77e1014..346673c542434 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/describes.SingleInputDateRangeField.test.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/describes.SingleInputDateRangeField.test.tsx @@ -9,7 +9,7 @@ describe(' - Describes', () => { const { render, clock } = createPickerRenderer({ clock: 'fake' }); describeConformance(, () => ({ - classes: {}, + classes: {} as any, inheritComponent: TextField, render, muiName: 'MuiSingleInputDateRangeField', diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/editing.SingleInputDateRangeField.test.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/editing.SingleInputDateRangeField.test.tsx index 5da366535b61e..8c3b1431df6bb 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/editing.SingleInputDateRangeField.test.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/editing.SingleInputDateRangeField.test.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; -import { screen, userEvent, fireEvent } from '@mui/monorepo/test/utils'; -import { expectInputValue } from 'test/utils/pickers-utils'; +import { userEvent, fireEvent } from '@mui/monorepo/test/utils'; +import { expectInputValue, getTextbox } from 'test/utils/pickers-utils'; import { describeAdapters } from '@mui/x-date-pickers/tests/describeAdapters'; describe(' - Editing', () => { @@ -19,7 +19,7 @@ describe(' - Editing', () => { defaultValue={[adapter.date(), adapter.addYears(adapter.date(), 1)]} />, ); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); // Select all sections @@ -31,7 +31,7 @@ describe(' - Editing', () => { it('should clear all the sections when all sections are selected and not all sections are completed', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); // Set a value for the "month" section @@ -58,7 +58,7 @@ describe(' - Editing', () => { />, ); - const input = screen.getByRole('textbox'); + const input = getTextbox(); selectSection(input, 0); // Start date diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/selection.SingleInputDateRangeField.test.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/selection.SingleInputDateRangeField.test.tsx index 1d554180d00e1..7503a5bff7863 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/selection.SingleInputDateRangeField.test.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/selection.SingleInputDateRangeField.test.tsx @@ -1,12 +1,13 @@ import * as React from 'react'; import { expect } from 'chai'; import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; -import { screen, act, userEvent, fireEvent } from '@mui/monorepo/test/utils'; +import { act, userEvent, fireEvent } from '@mui/monorepo/test/utils'; import { adapterToUse, createPickerRenderer, expectInputValue, getCleanedSelectedContent, + getTextbox, } from 'test/utils/pickers-utils'; describe(' - Selection', () => { @@ -42,7 +43,7 @@ describe(' - Selection', () => { describe('Focus', () => { it('should select all on mount focus (`autoFocus = true`)', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); expectInputValue(input, 'MM / DD / YYYY – MM / DD / YYYY'); expect(getCleanedSelectedContent(input)).to.equal('MM / DD / YYYY – MM / DD / YYYY'); @@ -50,7 +51,7 @@ describe(' - Selection', () => { it('should select all on focus', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); // Simulate a focus interaction on desktop act(() => { input.focus(); @@ -67,7 +68,7 @@ describe(' - Selection', () => { render( , ); - const input = screen.getByRole('textbox'); + const input = getTextbox(); // Start date clickOnInput(input, 'DD'); expect(getCleanedSelectedContent(input)).to.equal('DD'); @@ -87,7 +88,7 @@ describe(' - Selection', () => { render( , ); - const input = screen.getByRole('textbox'); + const input = getTextbox(); // Start date clickOnInput(input, 'DD'); expect(getCleanedSelectedContent(input)).to.equal('DD'); @@ -107,7 +108,7 @@ describe(' - Selection', () => { describe('key: ArrowRight', () => { it('should allows to move from left to right with ArrowRight', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 'MM'); expect(getCleanedSelectedContent(input)).to.equal('MM'); @@ -129,7 +130,7 @@ describe(' - Selection', () => { it('should stay on the current section when the last section is selected', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 'YYYY', true); expect(getCleanedSelectedContent(input)).to.equal('YYYY'); userEvent.keyPress(input, { key: 'ArrowRight' }); @@ -140,7 +141,7 @@ describe(' - Selection', () => { describe('key: ArrowLeft', () => { it('should allows to move from right to left with ArrowLeft', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 'YYYY', true); expect(getCleanedSelectedContent(input)).to.equal('YYYY'); userEvent.keyPress(input, { key: 'ArrowLeft' }); @@ -161,7 +162,7 @@ describe(' - Selection', () => { it('should stay on the current section when the first section is selected', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 'MM'); expect(getCleanedSelectedContent(input)).to.equal('MM'); userEvent.keyPress(input, { key: 'ArrowLeft' }); diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/tests/describes.SingleInputDateTimeRangeField.test.tsx b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/tests/describes.SingleInputDateTimeRangeField.test.tsx index 916e3f7b8b9ae..0aa6b7505811e 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/tests/describes.SingleInputDateTimeRangeField.test.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/tests/describes.SingleInputDateTimeRangeField.test.tsx @@ -8,7 +8,7 @@ describe(' - Describes', () => { const { render, clock } = createPickerRenderer({ clock: 'fake' }); describeConformance(, () => ({ - classes: {}, + classes: {} as any, inheritComponent: 'div', render, muiName: 'MuiSingleInputDateTimeRangeField', diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/tests/describes.SingleInputTimeRangeField.test.tsx b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/tests/describes.SingleInputTimeRangeField.test.tsx index ac8cfe776efbf..e68560a5ac644 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/tests/describes.SingleInputTimeRangeField.test.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/tests/describes.SingleInputTimeRangeField.test.tsx @@ -8,7 +8,7 @@ describe(' - Describes', () => { const { render, clock } = createPickerRenderer({ clock: 'fake' }); describeConformance(, () => ({ - classes: {}, + classes: {} as any, inheritComponent: 'div', render, muiName: 'MuiSingleInputTimeRangeField', diff --git a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.test.tsx index 787578f994f39..198257a05d881 100644 --- a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.test.tsx @@ -13,7 +13,8 @@ describe('', () => { }); describeConformance(, () => ({ - classes: {}, + classes: {} as any, + render, muiName: 'MuiStaticDateRangePicker', wrapMount: wrapPickerMount, refInstanceof: undefined, diff --git a/packages/x-date-pickers/src/DateCalendar/tests/describes.DateCalendar.test.tsx b/packages/x-date-pickers/src/DateCalendar/tests/describes.DateCalendar.test.tsx index c222548c11715..642aa463ae73f 100644 --- a/packages/x-date-pickers/src/DateCalendar/tests/describes.DateCalendar.test.tsx +++ b/packages/x-date-pickers/src/DateCalendar/tests/describes.DateCalendar.test.tsx @@ -45,7 +45,9 @@ describe(' - Describes', () => { }, setNewValue: (value) => { const newValue = adapterToUse.addDays(value, 1); - userEvent.mousePress(screen.getByRole('gridcell', { name: adapterToUse.getDate(newValue) })); + userEvent.mousePress( + screen.getByRole('gridcell', { name: adapterToUse.getDate(newValue).toString() }), + ); return newValue; }, diff --git a/packages/x-date-pickers/src/DateField/tests/describes.DateField.test.tsx b/packages/x-date-pickers/src/DateField/tests/describes.DateField.test.tsx index cadaab26ac127..102d874905fa1 100644 --- a/packages/x-date-pickers/src/DateField/tests/describes.DateField.test.tsx +++ b/packages/x-date-pickers/src/DateField/tests/describes.DateField.test.tsx @@ -10,6 +10,7 @@ import { adapterToUse, expectInputValue, buildFieldInteractions, + getTextbox, } from 'test/utils/pickers-utils'; describe(' - Describes', () => { @@ -18,7 +19,7 @@ describe(' - Describes', () => { const { clickOnInput } = buildFieldInteractions({ clock, render, Component: DateField }); describeConformance(, () => ({ - classes: {}, + classes: {} as any, inheritComponent: TextField, render, muiName: 'MuiDateField', @@ -55,7 +56,7 @@ describe(' - Describes', () => { }, setNewValue: (value) => { const newValue = adapterToUse.addDays(value, 1); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 10); // Update the day userEvent.keyPress(input, { key: 'ArrowUp' }); return newValue; diff --git a/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx b/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx index 3156f92f8cd0c..aecce60814a78 100644 --- a/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx +++ b/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; import { DateField } from '@mui/x-date-pickers/DateField'; -import { screen, act, userEvent, fireEvent } from '@mui/monorepo/test/utils'; -import { expectInputValue } from 'test/utils/pickers-utils'; +import { act, userEvent, fireEvent } from '@mui/monorepo/test/utils'; +import { expectInputValue, getTextbox } from 'test/utils/pickers-utils'; import { describeAdapters } from '@mui/x-date-pickers/tests/describeAdapters'; describe(' - Editing', () => { @@ -198,7 +198,7 @@ describe(' - Editing', () => { ({ render, adapter, adapterName, clickOnInput, testFieldKeyPress, selectSection }) => { it('should clear the selected section when only this section is completed', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); // Set a value for the "month" section @@ -222,7 +222,7 @@ describe(' - Editing', () => { it('should clear all the sections when all sections are selected and all sections are completed', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); // Select all sections @@ -234,7 +234,7 @@ describe(' - Editing', () => { it('should clear all the sections when all sections are selected and not all sections are completed', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); // Set a value for the "month" section @@ -252,7 +252,7 @@ describe(' - Editing', () => { it('should not keep query after typing again on a cleared section', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); fireEvent.change(input, { target: { value: '2' } }); // press "2" @@ -286,7 +286,7 @@ describe(' - Editing', () => { />, ); - const input = screen.getByRole('textbox'); + const input = getTextbox(); selectSection(input, 0); userEvent.keyPress(input, { key: keyToClearValue }); @@ -532,7 +532,7 @@ describe(' - Editing', () => { const onChange = spy(); render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); fireEvent.change(input, { target: { value: '1 / DD / YYYY' } }); // Press "1" @@ -597,7 +597,7 @@ describe(' - Editing', () => { it('should set the date when all sections are selected, the pasted value is valid and a value is provided', () => { const onChange = spy(); render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); // Select all sections @@ -612,7 +612,7 @@ describe(' - Editing', () => { it('should set the date when all sections are selected, the pasted value is valid and no value is provided', () => { const onChange = spy(); render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); // Select all sections @@ -627,7 +627,7 @@ describe(' - Editing', () => { it('should not set the date when all sections are selected and the pasted value is not valid', () => { const onChange = spy(); render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); // Select all sections @@ -646,7 +646,7 @@ describe(' - Editing', () => { format={`${startChar}Escaped${endChar} ${adapter.formats.year}`} />, ); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); // Select all sections @@ -660,7 +660,7 @@ describe(' - Editing', () => { it('should not set the date when all sections are selected and props.readOnly = true', () => { const onChange = spy(); render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); // Select all sections @@ -673,7 +673,7 @@ describe(' - Editing', () => { it('should set the section when one section is selected, the pasted value has the correct type and no value is provided', () => { const onChange = spy(); render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); expectInputValue(input, 'MM / DD / YYYY'); @@ -686,7 +686,7 @@ describe(' - Editing', () => { it('should set the section when one section is selected, the pasted value has the correct type and value is provided', () => { const onChange = spy(); render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); expectInputValue(input, adapterName === 'luxon' ? '1 / 13 / 2018' : '01 / 13 / 2018'); @@ -699,7 +699,7 @@ describe(' - Editing', () => { it('should not update the section when one section is selected and the pasted value has incorrect type', () => { const onChange = spy(); render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); expectInputValue(input, adapterName === 'luxon' ? '1 / 13 / 2018' : '01 / 13 / 2018'); @@ -722,7 +722,7 @@ describe(' - Editing', () => { onChange={onChange} />, ); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, input.value.indexOf('2010')); userEvent.keyPress(input, { key: 'ArrowDown' }); @@ -738,7 +738,7 @@ describe(' - Editing', () => { onChange={onChange} />, ); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); userEvent.keyPress(input, { key: 'a', ctrlKey: true }); @@ -772,7 +772,7 @@ describe(' - Editing', () => { onChange={onChange} />, ); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); userEvent.keyPress(input, { key: 'ArrowDown' }); @@ -789,7 +789,7 @@ describe(' - Editing', () => { onChange={onChange} />, ); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); userEvent.keyPress(input, { key: 'ArrowDown' }); @@ -805,7 +805,7 @@ describe(' - Editing', () => { it('should set the date when the change value is valid and no value is provided', () => { const onChange = spy(); render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); fireEvent.change(input, { target: { value: '09/16/2022' } }); expect(onChange.callCount).to.equal(1); @@ -820,7 +820,7 @@ describe(' - Editing', () => { onChange={onChange} />, ); - const input = screen.getByRole('textbox'); + const input = getTextbox(); fireEvent.change(input, { target: { value: '09/16/2022' } }); expect(onChange.callCount).to.equal(1); @@ -852,7 +852,7 @@ describe(' - Editing', () => { it('should support digit editing', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); const initialValueStr = input.value; const sectionStart = initialValueStr.indexOf('2'); @@ -885,7 +885,7 @@ describe(' - Editing', () => { />, ); - const input = screen.getByRole('textbox'); + const input = getTextbox(); const initialValueStr = input.value; const sectionStart = initialValueStr.indexOf('M'); 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 ad4d0a63d3fb8..70108da321a17 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 @@ -1,6 +1,5 @@ import * as React from 'react'; -import { screen } from '@mui/monorepo/test/utils'; -import { expectInputValue } from 'test/utils/pickers-utils'; +import { expectInputValue, getTextbox } from 'test/utils/pickers-utils'; import { DateField } from '@mui/x-date-pickers/DateField'; import { describeAdapters } from '@mui/x-date-pickers/tests/describeAdapters'; @@ -11,7 +10,7 @@ describeAdapters(' - Format', DateField, ({ render, adapter }) => { const { setProps } = render( , ); - const input = screen.getByRole('textbox'); + const input = getTextbox(); expectInputValue(input, 'Escaped YYYY'); setProps({ value: adapter.date(new Date(2019, 0, 1)) }); @@ -26,7 +25,7 @@ describeAdapters(' - Format', DateField, ({ render, adapter }) => { format={`${adapter.formats.month} ${startChar}Escaped${endChar} ${adapter.formats.year}`} />, ); - const input = screen.getByRole('textbox'); + const input = getTextbox(); expectInputValue(input, 'MMMM Escaped YYYY'); setProps({ value: adapter.date(new Date(2019, 0, 1)) }); @@ -47,7 +46,7 @@ describeAdapters(' - Format', DateField, ({ render, adapter }) => { format={`${adapter.formats.month} ${startChar}Escaped ${startChar}${endChar} ${adapter.formats.year}`} />, ); - const input = screen.getByRole('textbox'); + const input = getTextbox(); expectInputValue(input, 'MMMM Escaped [ YYYY'); setProps({ value: adapter.date(new Date(2019, 0, 1)) }); @@ -63,7 +62,7 @@ describeAdapters(' - Format', DateField, ({ render, adapter }) => { format={`${startChar}Escaped${endChar} ${adapter.formats.month} ${startChar}Escaped${endChar} ${adapter.formats.year}`} />, ); - const input = screen.getByRole('textbox'); + const input = getTextbox(); expectInputValue(input, 'Escaped MMMM Escaped YYYY'); setProps({ value: adapter.date(new Date(2019, 0, 1)) }); diff --git a/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx b/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx index 0f05ea465cb90..c966abfa9c927 100644 --- a/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx +++ b/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx @@ -1,12 +1,13 @@ import * as React from 'react'; import { expect } from 'chai'; import { DateField } from '@mui/x-date-pickers/DateField'; -import { screen, act, userEvent, fireEvent } from '@mui/monorepo/test/utils'; +import { act, userEvent, fireEvent } from '@mui/monorepo/test/utils'; import { createPickerRenderer, expectInputValue, getCleanedSelectedContent, adapterToUse, + getTextbox, } from 'test/utils/pickers-utils'; describe(' - Selection', () => { @@ -35,7 +36,7 @@ describe(' - Selection', () => { describe('Focus', () => { it('should select all on mount focus (`autoFocus = true`)', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); expectInputValue(input, 'MM / DD / YYYY'); expect(getCleanedSelectedContent(input)).to.equal('MM / DD / YYYY'); @@ -43,7 +44,7 @@ describe(' - Selection', () => { it('should select all on mount focus (`autoFocus = true`) with start separator', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); expectInputValue(input, '- YYYY'); expect(getCleanedSelectedContent(input)).to.equal('- YYYY'); @@ -51,7 +52,7 @@ describe(' - Selection', () => { it('should select all on focus', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); // Simulate a focus interaction on desktop act(() => { input.focus(); @@ -64,7 +65,7 @@ describe(' - Selection', () => { it('should select all on focus with start separator', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); // Simulate a focus interaction on desktop act(() => { input.focus(); @@ -77,7 +78,7 @@ describe(' - Selection', () => { it('should select day on mobile', () => { render(); - const input: HTMLInputElement = screen.getByRole('textbox'); + const input = getTextbox(); // Simulate a touch focus interaction on mobile act(() => { input.focus(); @@ -92,7 +93,7 @@ describe(' - Selection', () => { it('should select day on desktop', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 'DD'); expectInputValue(input, 'MM / DD / YYYY'); @@ -103,7 +104,7 @@ describe(' - Selection', () => { describe('Click', () => { it('should select the clicked selection when the input is already focused', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 'DD'); expect(getCleanedSelectedContent(input)).to.equal('DD'); @@ -113,7 +114,7 @@ describe(' - Selection', () => { it('should not change the selection when clicking on the only already selected section', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 'DD'); expect(getCleanedSelectedContent(input)).to.equal('DD'); @@ -125,7 +126,7 @@ describe(' - Selection', () => { describe('key: Ctrl + A', () => { it('should select all sections', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); userEvent.keyPress(input, { key: 'a', ctrlKey: true }); @@ -134,7 +135,7 @@ describe(' - Selection', () => { it('should select all sections with start separator', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); userEvent.keyPress(input, { key: 'a', ctrlKey: true }); @@ -145,7 +146,7 @@ describe(' - Selection', () => { describe('key: ArrowRight', () => { it('should move selection to the next section when one section is selected', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 'DD'); expect(getCleanedSelectedContent(input)).to.equal('DD'); userEvent.keyPress(input, { key: 'ArrowRight' }); @@ -154,7 +155,7 @@ describe(' - Selection', () => { it('should stay on the current section when the last section is selected', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 'YYYY'); expect(getCleanedSelectedContent(input)).to.equal('YYYY'); userEvent.keyPress(input, { key: 'ArrowRight' }); @@ -163,7 +164,7 @@ describe(' - Selection', () => { it('should select the last section when all the sections are selected', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); // Select all sections @@ -178,7 +179,7 @@ describe(' - Selection', () => { describe('key: ArrowLeft', () => { it('should move selection to the previous section when one section is selected', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 'DD'); expect(getCleanedSelectedContent(input)).to.equal('DD'); userEvent.keyPress(input, { key: 'ArrowLeft' }); @@ -187,7 +188,7 @@ describe(' - Selection', () => { it('should stay on the current section when the first section is selected', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); expect(getCleanedSelectedContent(input)).to.equal('MM'); userEvent.keyPress(input, { key: 'ArrowLeft' }); @@ -196,7 +197,7 @@ describe(' - Selection', () => { it('should select the first section when all the sections are selected', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); // Select all sections diff --git a/packages/x-date-pickers/src/DateTimeField/tests/describes.DateTimeField.test.tsx b/packages/x-date-pickers/src/DateTimeField/tests/describes.DateTimeField.test.tsx index f510e623c8c35..7e2b3eac38181 100644 --- a/packages/x-date-pickers/src/DateTimeField/tests/describes.DateTimeField.test.tsx +++ b/packages/x-date-pickers/src/DateTimeField/tests/describes.DateTimeField.test.tsx @@ -6,6 +6,7 @@ import { buildFieldInteractions, createPickerRenderer, expectInputValue, + getTextbox, } from 'test/utils/pickers-utils'; import { describeValue } from '@mui/x-date-pickers/tests/describeValue'; @@ -43,7 +44,7 @@ describe(' - Describes', () => { }, setNewValue: (value) => { const newValue = adapterToUse.addDays(value, 1); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 10); // Update the day userEvent.keyPress(input, { key: 'ArrowUp' }); return newValue; diff --git a/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx b/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx index 7edfd48ebdb26..508b6b9b12a5d 100644 --- a/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx +++ b/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx @@ -1,14 +1,13 @@ import * as React from 'react'; import { DateTimeField } from '@mui/x-date-pickers/DateTimeField'; -import { screen } from '@mui/monorepo/test/utils'; -import { createPickerRenderer, expectInputValue } from 'test/utils/pickers-utils'; +import { createPickerRenderer, expectInputValue, getTextbox } from 'test/utils/pickers-utils'; describe(' - TimeZone', () => { describe('Value time-zone modification - Luxon', () => { const { render, adapter } = createPickerRenderer({ clock: 'fake', adapterName: 'luxon' }); it('should update the field when time zone changes (timestamp remains the same)', () => { const { setProps } = render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); const date = adapter.date(new Date('2020-06-18T14:30:10.000Z')).setZone('UTC'); setProps({ value: date }); diff --git a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.test.tsx b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.test.tsx index 77bea6ead0c59..78a1b48e16bc7 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.test.tsx @@ -11,6 +11,7 @@ import { adapterToUse, openPicker, expectInputValue, + getTextbox, } from 'test/utils/pickers-utils'; describe('', () => { @@ -66,7 +67,7 @@ describe('', () => { const handleChange = spy(); render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); fireEvent.change(input, { target: { diff --git a/packages/x-date-pickers/src/DesktopDatePicker/tests/describes.DesktopDatePicker.test.tsx b/packages/x-date-pickers/src/DesktopDatePicker/tests/describes.DesktopDatePicker.test.tsx index 89059444608d0..bfbd1c28ad919 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/tests/describes.DesktopDatePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/tests/describes.DesktopDatePicker.test.tsx @@ -6,6 +6,7 @@ import { adapterToUse, expectInputValue, buildFieldInteractions, + getTextbox, } from 'test/utils/pickers-utils'; import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker'; @@ -39,10 +40,10 @@ describe(' - Describes', () => { if (isOpened) { userEvent.mousePress( - screen.getByRole('gridcell', { name: adapterToUse.getDate(newValue) }), + screen.getByRole('gridcell', { name: adapterToUse.getDate(newValue).toString() }), ); } else { - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 10); // Update the day userEvent.keyPress(input, { key: 'ArrowUp' }); } diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/describes.DesktopDateTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/describes.DesktopDateTimePicker.test.tsx index 2965ed64b3821..e5963df4766db 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/describes.DesktopDateTimePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/describes.DesktopDateTimePicker.test.tsx @@ -6,6 +6,7 @@ import { adapterToUse, expectInputValue, buildFieldInteractions, + getTextbox, } from 'test/utils/pickers-utils'; import { DesktopDateTimePicker } from '@mui/x-date-pickers/DesktopDateTimePicker'; @@ -56,10 +57,10 @@ describe(' - Describes', () => { if (isOpened) { userEvent.mousePress( - screen.getByRole('gridcell', { name: adapterToUse.getDate(newValue) }), + screen.getByRole('gridcell', { name: adapterToUse.getDate(newValue).toString() }), ); } else { - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 10); // Update the day userEvent.keyPress(input, { key: 'ArrowUp' }); } diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/field.DesktopDateTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/field.DesktopDateTimePicker.test.tsx index 528be9f571e0b..fa5478b105092 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/field.DesktopDateTimePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/field.DesktopDateTimePicker.test.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { screen } from '@mui/monorepo/test/utils'; -import { createPickerRenderer, expectInputValue } from 'test/utils/pickers-utils'; +import { createPickerRenderer, expectInputValue, getTextbox } from 'test/utils/pickers-utils'; import { DesktopDateTimePicker } from '@mui/x-date-pickers/DesktopDateTimePicker'; describe(' - Field', () => { @@ -9,7 +8,7 @@ describe(' - Field', () => { it('should pass the ampm prop to the field', () => { const { setProps } = render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); expectInputValue(input, 'MM / DD / YYYY hh:mm aa'); setProps({ ampm: false }); diff --git a/packages/x-date-pickers/src/DesktopTimePicker/tests/describes.DesktopTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopTimePicker/tests/describes.DesktopTimePicker.test.tsx index 7dcfdd9391952..e219101333bd5 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/tests/describes.DesktopTimePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopTimePicker/tests/describes.DesktopTimePicker.test.tsx @@ -8,6 +8,7 @@ import { expectInputValue, buildFieldInteractions, wrapPickerMount, + getTextbox, } from 'test/utils/pickers-utils'; import { DesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker'; @@ -24,7 +25,8 @@ describe(' - Describes', () => { })); describeConformance(, () => ({ - classes: {}, + classes: {} as any, + render, muiName: 'MuiDesktopTimePicker', wrapMount: wrapPickerMount, refInstanceof: window.HTMLDivElement, @@ -72,7 +74,7 @@ describe(' - Describes', () => { throw new Error("Can't test UI views on DesktopTimePicker"); } - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); // Update the hour userEvent.keyPress(input, { key: 'ArrowUp' }); diff --git a/packages/x-date-pickers/src/DesktopTimePicker/tests/field.DesktopTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopTimePicker/tests/field.DesktopTimePicker.test.tsx index c7acf287e1ec5..ee603e326dca4 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/tests/field.DesktopTimePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopTimePicker/tests/field.DesktopTimePicker.test.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { screen } from '@mui/monorepo/test/utils'; -import { createPickerRenderer, expectInputValue } from 'test/utils/pickers-utils'; +import { createPickerRenderer, expectInputValue, getTextbox } from 'test/utils/pickers-utils'; import { DesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker'; describe(' - Field', () => { @@ -9,7 +8,7 @@ describe(' - Field', () => { it('should pass the ampm prop to the field', () => { const { setProps } = render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); expectInputValue(input, 'hh:mm aa'); setProps({ ampm: false }); diff --git a/packages/x-date-pickers/src/MobileDatePicker/tests/describes.MobileDatePicker.test.tsx b/packages/x-date-pickers/src/MobileDatePicker/tests/describes.MobileDatePicker.test.tsx index 3d7045525eed7..c3602bb7757ad 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/tests/describes.MobileDatePicker.test.tsx +++ b/packages/x-date-pickers/src/MobileDatePicker/tests/describes.MobileDatePicker.test.tsx @@ -38,7 +38,9 @@ describe(' - Describes', () => { } const newValue = applySameValue ? value : adapterToUse.addDays(value, 1); - userEvent.mousePress(screen.getByRole('gridcell', { name: adapterToUse.getDate(newValue) })); + userEvent.mousePress( + screen.getByRole('gridcell', { name: adapterToUse.getDate(newValue).toString() }), + ); // Close the picker to return to the initial state if (!isOpened) { diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/tests/field.MobileDateTimePicker.test.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/tests/field.MobileDateTimePicker.test.tsx index 26db599ace9a6..b872179a04af9 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/tests/field.MobileDateTimePicker.test.tsx +++ b/packages/x-date-pickers/src/MobileDateTimePicker/tests/field.MobileDateTimePicker.test.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { screen } from '@mui/monorepo/test/utils'; -import { createPickerRenderer, expectInputValue } from 'test/utils/pickers-utils'; +import { createPickerRenderer, expectInputValue, getTextbox } from 'test/utils/pickers-utils'; import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker'; describe(' - Field', () => { @@ -9,7 +8,7 @@ describe(' - Field', () => { it('should pass the ampm prop to the field', () => { const { setProps } = render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); expectInputValue(input, 'MM / DD / YYYY hh:mm aa'); setProps({ ampm: false }); diff --git a/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx b/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx index 6f571925eaa8b..ff59e23e88b49 100644 --- a/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx +++ b/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx @@ -28,7 +28,8 @@ describe(' - Describes', () => { })); describeConformance(, () => ({ - classes: {}, + classes: {} as any, + render, muiName: 'MuiMobileTimePicker', wrapMount: wrapPickerMount, refInstanceof: window.HTMLDivElement, diff --git a/packages/x-date-pickers/src/MobileTimePicker/tests/field.MobileTimePicker.test.tsx b/packages/x-date-pickers/src/MobileTimePicker/tests/field.MobileTimePicker.test.tsx index b0e02d780de44..10ea43152b1f1 100644 --- a/packages/x-date-pickers/src/MobileTimePicker/tests/field.MobileTimePicker.test.tsx +++ b/packages/x-date-pickers/src/MobileTimePicker/tests/field.MobileTimePicker.test.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { screen } from '@mui/monorepo/test/utils'; -import { createPickerRenderer, expectInputValue } from 'test/utils/pickers-utils'; +import { createPickerRenderer, expectInputValue, getTextbox } from 'test/utils/pickers-utils'; import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker'; describe(' - Field', () => { @@ -9,7 +8,7 @@ describe(' - Field', () => { it('should pass the ampm prop to the field', () => { const { setProps } = render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); expectInputValue(input, 'hh:mm aa'); setProps({ ampm: false }); diff --git a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.test.tsx b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.test.tsx index 07644b0a67a2d..32ae3359bc7d8 100644 --- a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.test.tsx +++ b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.test.tsx @@ -23,7 +23,8 @@ describe('', () => { })); describeConformance(, () => ({ - classes: {}, + classes: {} as any, + render, muiName: 'MuiStaticTimePicker', wrapMount: wrapPickerMount, refInstanceof: undefined, diff --git a/packages/x-date-pickers/src/TimeField/tests/describes.TimeField.test.tsx b/packages/x-date-pickers/src/TimeField/tests/describes.TimeField.test.tsx index 5903fa2d81ce7..015b36a80beb8 100644 --- a/packages/x-date-pickers/src/TimeField/tests/describes.TimeField.test.tsx +++ b/packages/x-date-pickers/src/TimeField/tests/describes.TimeField.test.tsx @@ -5,6 +5,7 @@ import { buildFieldInteractions, createPickerRenderer, expectInputValue, + getTextbox, } from 'test/utils/pickers-utils'; import { describeValue } from '@mui/x-date-pickers/tests/describeValue'; import { TimeField } from '@mui/x-date-pickers/TimeField'; @@ -43,7 +44,7 @@ describe(' - Describes', () => { setNewValue: (value) => { const newValue = adapterToUse.addHours(value, 1); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); // Update the hour userEvent.keyPress(input, { key: 'ArrowUp' }); diff --git a/packages/x-date-pickers/src/TimeField/tests/editing.TimeField.test.tsx b/packages/x-date-pickers/src/TimeField/tests/editing.TimeField.test.tsx index 9f14e958814d5..c4ddba1d9eb28 100644 --- a/packages/x-date-pickers/src/TimeField/tests/editing.TimeField.test.tsx +++ b/packages/x-date-pickers/src/TimeField/tests/editing.TimeField.test.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; import { TimeField } from '@mui/x-date-pickers/TimeField'; -import { screen, userEvent, fireEvent } from '@mui/monorepo/test/utils'; -import { expectInputValue, getCleanedSelectedContent } from 'test/utils/pickers-utils'; +import { userEvent, fireEvent } from '@mui/monorepo/test/utils'; +import { expectInputValue, getCleanedSelectedContent, getTextbox } from 'test/utils/pickers-utils'; import { describeAdapters } from '@mui/x-date-pickers/tests/describeAdapters'; describe(' - Editing', () => { @@ -253,7 +253,7 @@ describe(' - Editing', () => { it('should go to the next section when pressing `2` in a 12-hours format', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 0); // Press "2" @@ -265,7 +265,7 @@ describe(' - Editing', () => { it('should go to the next section when pressing `1` then `3` in a 12-hours format', () => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 0); // Press "1" @@ -363,7 +363,7 @@ describe(' - Editing', () => { onChange={onChange} />, ); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); userEvent.keyPress(input, { key: 'ArrowDown' }); @@ -380,7 +380,7 @@ describe(' - Editing', () => { onChange={onChange} />, ); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); userEvent.keyPress(input, { key: 'a', ctrlKey: true }); @@ -405,7 +405,7 @@ describe(' - Editing', () => { onChange={onChange} />, ); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, 1); userEvent.keyPress(input, { key: 'ArrowDown' }); diff --git a/packages/x-date-pickers/src/YearCalendar/tests/describes.YearCalendar.test.tsx b/packages/x-date-pickers/src/YearCalendar/tests/describes.YearCalendar.test.tsx index a6a724c3974ef..2258bc4b75fe5 100644 --- a/packages/x-date-pickers/src/YearCalendar/tests/describes.YearCalendar.test.tsx +++ b/packages/x-date-pickers/src/YearCalendar/tests/describes.YearCalendar.test.tsx @@ -51,7 +51,9 @@ describe(' - Describes', () => { }, setNewValue: (value) => { const newValue = adapterToUse.addYears(value, 1); - userEvent.mousePress(screen.getByRole('button', { name: adapterToUse.getYear(newValue) })); + userEvent.mousePress( + screen.getByRole('button', { name: adapterToUse.getYear(newValue).toString() }), + ); return newValue; }, diff --git a/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx b/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx index 69281f5c5a13e..d713a36fa57cd 100644 --- a/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx +++ b/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx @@ -86,7 +86,7 @@ adapterToTest.forEach((adapterName) => { cursorPosition?: number; }) => { render(); - const input = screen.getByRole('textbox') as HTMLInputElement; + const input = screen.getByRole('textbox'); clickOnInput(input, cursorPosition); userEvent.keyPress(input, { key }); diff --git a/packages/x-license-pro/src/useLicenseVerifier/useLicenseVerifier.test.tsx b/packages/x-license-pro/src/useLicenseVerifier/useLicenseVerifier.test.tsx index 13852a841e891..05fa7fb86c08e 100644 --- a/packages/x-license-pro/src/useLicenseVerifier/useLicenseVerifier.test.tsx +++ b/packages/x-license-pro/src/useLicenseVerifier/useLicenseVerifier.test.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { expect } from 'chai'; -// @ts-ignore Remove once the test utils are typed import { createRenderer } from '@mui/monorepo/test/utils'; import { useLicenseVerifier, LicenseInfo } from '@mui/x-license-pro'; import { sharedLicenseStatuses } from './useLicenseVerifier'; diff --git a/test/utils/pickers-utils.tsx b/test/utils/pickers-utils.tsx index 65bbb9c178e58..f7aae1f5f1024 100644 --- a/test/utils/pickers-utils.tsx +++ b/test/utils/pickers-utils.tsx @@ -94,8 +94,10 @@ interface CreatePickerRendererOptions extends CreateRendererOptions { adapterName?: AdapterName; } -export function wrapPickerMount(mount: (node: React.ReactNode) => import('enzyme').ReactWrapper) { - return (node: React.ReactNode) => +export function wrapPickerMount( + mount: (node: React.ReactElement) => import('enzyme').ReactWrapper, +) { + return (node: React.ReactElement) => mount({node}); } @@ -294,7 +296,7 @@ export const stubMatchMedia = (matches = true) => removeListener: () => {}, }); export const getPickerDay = (name: string, picker = 'January 2018') => - getByRole(screen.getByText(picker)?.parentElement?.parentElement, 'gridcell', { name }); + getByRole(screen.getByText(picker)?.parentElement?.parentElement!, 'gridcell', { name }); export const cleanText = (text) => text.replace(/\u200e|\u2066|\u2067|\u2068|\u2069/g, ''); @@ -344,6 +346,8 @@ export interface BuildFieldInteractionsResponse

{ ) => void; } +export const getTextbox = (): HTMLInputElement => screen.getByRole('textbox'); + export const buildFieldInteractions =

({ clock, render, @@ -395,7 +399,7 @@ export const buildFieldInteractions =

({ ...props }) => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); const clickPosition = valueToSelect ? input.value.indexOf(valueToSelect) : cursorPosition; if (clickPosition === -1) { throw new Error( @@ -413,7 +417,7 @@ export const buildFieldInteractions =

({ ...props }) => { render(); - const input = screen.getByRole('textbox'); + const input = getTextbox(); clickOnInput(input, cursorPosition); keyStrokes.forEach((keyStroke) => { diff --git a/yarn.lock b/yarn.lock index eecba2c8cbecf..77fbdecbab3f0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1781,8 +1781,8 @@ react-transition-group "^4.4.5" "@mui/monorepo@https://github.com/mui/material-ui.git#master": - version "5.11.8" - resolved "https://github.com/mui/material-ui.git#f800c835562da9cc8fa3f7615b32a8e6cc8b31d8" + version "5.11.11" + resolved "https://github.com/mui/material-ui.git#3ca7a1b042038448ab6a3f69fe4cb3c1532e93b6" "@mui/private-theming@^5.11.7", "@mui/private-theming@^5.11.9": version "5.11.9" @@ -2965,6 +2965,13 @@ "@types/history" "*" "@types/react" "*" +"@types/react-test-renderer@^18.0.0": + version "18.0.0" + resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-18.0.0.tgz#7b7f69ca98821ea5501b21ba24ea7b6139da2243" + integrity sha512-C7/5FBJ3g3sqUahguGi03O79b8afNeSD6T8/GU50oQrJCU0bVCCGQHaGKUbg2Ce8VQEEqTw8/HiS6lXHHdgkdQ== + dependencies: + "@types/react" "*" + "@types/react-transition-group@^4.2.0", "@types/react-transition-group@^4.4.5": version "4.4.5" resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416" From 944dcaaf0d2efab6992d94e788e31ea8608fc344 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Tue, 28 Feb 2023 23:20:51 +0100 Subject: [PATCH 17/24] [data grid] Start extracting material slots to a separate directory (#8004) --- .../x/api/data-grid/data-grid-premium.json | 2 + docs/pages/x/api/data-grid/data-grid-pro.json | 2 + docs/pages/x/api/data-grid/data-grid.json | 2 + .../api-docs/data-grid/data-grid-premium.json | 2 + .../api-docs/data-grid/data-grid-pro.json | 2 + .../api-docs/data-grid/data-grid.json | 2 + .../src/components/index.ts | 2 +- .../dataGridPremiumDefaultSlotsComponents.ts | 12 +-- .../src/{components => material}/icons.tsx | 0 .../x-data-grid-premium/src/material/index.ts | 14 +++ .../x-data-grid-pro/src/components/index.ts | 2 +- .../dataGridProDefaultSlotsComponents.ts | 11 +-- .../src/{components => material}/icons.tsx | 0 .../x-data-grid-pro/src/material/index.ts | 13 +++ .../src/components/cell/GridEditInputCell.tsx | 3 +- .../grid/x-data-grid/src/components/index.ts | 2 +- .../src/components/panel/GridColumnsPanel.tsx | 3 +- .../panel/filterPanel/GridFilterInputDate.tsx | 3 +- .../filterPanel/GridFilterInputValue.tsx | 3 +- .../constants/defaultGridSlotsComponents.ts | 85 +---------------- .../icons}/GridColumnUnsortedIcon.tsx | 0 .../{components => material}/icons/index.tsx | 0 .../grid/x-data-grid/src/material/index.ts | 91 +++++++++++++++++++ .../src/models/gridIconSlotsComponent.ts | 10 ++ 24 files changed, 156 insertions(+), 110 deletions(-) rename packages/grid/x-data-grid-premium/src/{components => material}/icons.tsx (100%) create mode 100644 packages/grid/x-data-grid-premium/src/material/index.ts rename packages/grid/x-data-grid-pro/src/{components => material}/icons.tsx (100%) create mode 100644 packages/grid/x-data-grid-pro/src/material/index.ts rename packages/grid/x-data-grid/src/{components/columnHeaders => material/icons}/GridColumnUnsortedIcon.tsx (100%) rename packages/grid/x-data-grid/src/{components => material}/icons/index.tsx (100%) create mode 100644 packages/grid/x-data-grid/src/material/index.ts 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 3cf1001d4bf44..7519a015a6691 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -309,6 +309,7 @@ "type": { "name": "elementType" } }, "columnMenuUngroupIcon": { "default": "GridWorkspacesIcon", "type": { "name": "elementType" } }, + "columnReorderIcon": { "default": "GridDragIcon", "type": { "name": "elementType" } }, "columnResizeIcon": { "default": "GridSeparatorIcon", "type": { "name": "elementType" } }, "columnSelectorIcon": { "default": "GridColumnIcon", "type": { "name": "elementType" } }, "columnSortedAscendingIcon": { @@ -349,6 +350,7 @@ "default": "GridKeyboardArrowRight", "type": { "name": "elementType" } }, + "loadIcon": { "default": "GridLoadIcon", "type": { "name": "elementType" } }, "loadingOverlay": { "default": "GridLoadingOverlay", "type": { "name": "elementType" } }, "moreActionsIcon": { "default": "GridMoreVertIcon", "type": { "name": "elementType" } }, "noResultsOverlay": { "default": "GridNoResultsOverlay", "type": { "name": "elementType" } }, 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 16a0c4d6f1221..1cb9a4ab9d01d 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -277,6 +277,7 @@ "default": "GridArrowDownwardIcon", "type": { "name": "elementType" } }, + "columnReorderIcon": { "default": "GridDragIcon", "type": { "name": "elementType" } }, "columnResizeIcon": { "default": "GridSeparatorIcon", "type": { "name": "elementType" } }, "columnSelectorIcon": { "default": "GridColumnIcon", "type": { "name": "elementType" } }, "columnSortedAscendingIcon": { @@ -317,6 +318,7 @@ "default": "GridKeyboardArrowRight", "type": { "name": "elementType" } }, + "loadIcon": { "default": "GridLoadIcon", "type": { "name": "elementType" } }, "loadingOverlay": { "default": "GridLoadingOverlay", "type": { "name": "elementType" } }, "moreActionsIcon": { "default": "GridMoreVertIcon", "type": { "name": "elementType" } }, "noResultsOverlay": { "default": "GridNoResultsOverlay", "type": { "name": "elementType" } }, diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index 135de93d0feb7..80846d786df62 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -214,6 +214,7 @@ "default": "GridArrowDownwardIcon", "type": { "name": "elementType" } }, + "columnReorderIcon": { "default": "GridDragIcon", "type": { "name": "elementType" } }, "columnResizeIcon": { "default": "GridSeparatorIcon", "type": { "name": "elementType" } }, "columnSelectorIcon": { "default": "GridColumnIcon", "type": { "name": "elementType" } }, "columnSortedAscendingIcon": { @@ -254,6 +255,7 @@ "default": "GridKeyboardArrowRight", "type": { "name": "elementType" } }, + "loadIcon": { "default": "GridLoadIcon", "type": { "name": "elementType" } }, "loadingOverlay": { "default": "GridLoadingOverlay", "type": { "name": "elementType" } }, "moreActionsIcon": { "default": "GridMoreVertIcon", "type": { "name": "elementType" } }, "noResultsOverlay": { "default": "GridNoResultsOverlay", "type": { "name": "elementType" } }, 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 8548e40a52f79..4593063f6c700 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium.json @@ -715,6 +715,7 @@ "columnMenuSortAscendingIcon": "Icon displayed in column menu for ascending sort", "columnMenuSortDescendingIcon": "Icon displayed in column menu for descending sort", "columnMenuUngroupIcon": "Icon displayed in column menu for ungrouping", + "columnReorderIcon": "Icon displayed on the column reorder button.", "columnResizeIcon": "Icon displayed in between two column headers that allows to resize the column header.", "columnSelectorIcon": "Icon displayed on the column menu selector tab.", "columnSortedAscendingIcon": "Icon displayed on the side of the column header title when sorted in ascending order.", @@ -734,6 +735,7 @@ "footer": "Footer component rendered at the bottom of the grid viewport.", "groupingCriteriaCollapseIcon": "Icon displayed on the grouping column when the children are expanded", "groupingCriteriaExpandIcon": "Icon displayed on the grouping column when the children are collapsed", + "loadIcon": "Icon displayed on the input while processing.", "loadingOverlay": "Loading overlay component rendered when the grid is in a loading state.", "moreActionsIcon": "Icon displayed on the actions column type to open the menu.", "noResultsOverlay": "No results overlay component rendered when the grid has no results after filtering.", 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 048c470d2edb3..e17401388c121 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro.json @@ -698,6 +698,7 @@ "columnMenuPinRightIcon": "Icon displayed in column menu for right pinning", "columnMenuSortAscendingIcon": "Icon displayed in column menu for ascending sort", "columnMenuSortDescendingIcon": "Icon displayed in column menu for descending sort", + "columnReorderIcon": "Icon displayed on the column reorder button.", "columnResizeIcon": "Icon displayed in between two column headers that allows to resize the column header.", "columnSelectorIcon": "Icon displayed on the column menu selector tab.", "columnSortedAscendingIcon": "Icon displayed on the side of the column header title when sorted in ascending order.", @@ -717,6 +718,7 @@ "footer": "Footer component rendered at the bottom of the grid viewport.", "groupingCriteriaCollapseIcon": "Icon displayed on the grouping column when the children are expanded", "groupingCriteriaExpandIcon": "Icon displayed on the grouping column when the children are collapsed", + "loadIcon": "Icon displayed on the input while processing.", "loadingOverlay": "Loading overlay component rendered when the grid is in a loading state.", "moreActionsIcon": "Icon displayed on the actions column type to open the menu.", "noResultsOverlay": "No results overlay component rendered when the grid has no results after filtering.", diff --git a/docs/translations/api-docs/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid.json index 8ff9dfd4e4c9f..f62b404911c7b 100644 --- a/docs/translations/api-docs/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid.json @@ -664,6 +664,7 @@ "columnMenuManageColumnsIcon": "Icon displayed in column menu for showing all columns", "columnMenuSortAscendingIcon": "Icon displayed in column menu for ascending sort", "columnMenuSortDescendingIcon": "Icon displayed in column menu for descending sort", + "columnReorderIcon": "Icon displayed on the column reorder button.", "columnResizeIcon": "Icon displayed in between two column headers that allows to resize the column header.", "columnSelectorIcon": "Icon displayed on the column menu selector tab.", "columnSortedAscendingIcon": "Icon displayed on the side of the column header title when sorted in ascending order.", @@ -683,6 +684,7 @@ "footer": "Footer component rendered at the bottom of the grid viewport.", "groupingCriteriaCollapseIcon": "Icon displayed on the grouping column when the children are expanded", "groupingCriteriaExpandIcon": "Icon displayed on the grouping column when the children are collapsed", + "loadIcon": "Icon displayed on the input while processing.", "loadingOverlay": "Loading overlay component rendered when the grid is in a loading state.", "moreActionsIcon": "Icon displayed on the actions column type to open the menu.", "noResultsOverlay": "No results overlay component rendered when the grid has no results after filtering.", diff --git a/packages/grid/x-data-grid-premium/src/components/index.ts b/packages/grid/x-data-grid-premium/src/components/index.ts index 8f90ed2753f6b..1204ebc04638a 100644 --- a/packages/grid/x-data-grid-premium/src/components/index.ts +++ b/packages/grid/x-data-grid-premium/src/components/index.ts @@ -1,4 +1,4 @@ export * from './GridExcelExportMenuItem'; -export * from './icons'; +export * from '../material/icons'; export * from './GridColumnMenuAggregationItem'; export { GridColumnMenuGroupingItem } from './GridPremiumColumnMenu'; diff --git a/packages/grid/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts b/packages/grid/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts index 2d06a03f59128..7e30dd8f341f3 100644 --- a/packages/grid/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts +++ b/packages/grid/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts @@ -1,16 +1,10 @@ import { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from '@mui/x-data-grid-pro/internals'; -import { GridPremiumSlotsComponent, GridPremiumIconSlotsComponent } from '../models'; -import { GridWorkspacesIcon, GridGroupWorkIcon, GridFunctionsIcon } from '../components'; +import type { GridPremiumSlotsComponent } from '../models'; import { GridPremiumColumnMenu } from '../components/GridPremiumColumnMenu'; - -export const DEFAULT_GRID_PREMIUM_ICON_SLOTS_COMPONENTS: GridPremiumIconSlotsComponent = { - ColumnMenuUngroupIcon: GridWorkspacesIcon, - ColumnMenuGroupIcon: GridGroupWorkIcon, - ColumnMenuAggregationIcon: GridFunctionsIcon, -}; +import materialSlots from '../material'; export const DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS: GridPremiumSlotsComponent = { ...DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS, - ...DEFAULT_GRID_PREMIUM_ICON_SLOTS_COMPONENTS, + ...materialSlots, ColumnMenu: GridPremiumColumnMenu, }; diff --git a/packages/grid/x-data-grid-premium/src/components/icons.tsx b/packages/grid/x-data-grid-premium/src/material/icons.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/components/icons.tsx rename to packages/grid/x-data-grid-premium/src/material/icons.tsx diff --git a/packages/grid/x-data-grid-premium/src/material/index.ts b/packages/grid/x-data-grid-premium/src/material/index.ts new file mode 100644 index 0000000000000..26572aeaeb74d --- /dev/null +++ b/packages/grid/x-data-grid-premium/src/material/index.ts @@ -0,0 +1,14 @@ +import type { GridPremiumIconSlotsComponent } from '../models'; +import { GridWorkspacesIcon, GridGroupWorkIcon, GridFunctionsIcon } from './icons'; + +const iconsSlots: GridPremiumIconSlotsComponent = { + ColumnMenuUngroupIcon: GridWorkspacesIcon, + ColumnMenuGroupIcon: GridGroupWorkIcon, + ColumnMenuAggregationIcon: GridFunctionsIcon, +}; + +const materialSlots = { + ...iconsSlots, +}; + +export default materialSlots; diff --git a/packages/grid/x-data-grid-pro/src/components/index.ts b/packages/grid/x-data-grid-pro/src/components/index.ts index de99e186c04ab..a5a833f916ba9 100644 --- a/packages/grid/x-data-grid-pro/src/components/index.ts +++ b/packages/grid/x-data-grid-pro/src/components/index.ts @@ -2,4 +2,4 @@ export * from './GridTreeDataGroupingCell'; export * from './GridColumnMenuPinningItem'; export * from './GridDetailPanelToggleCell'; -export * from './icons'; +export * from '../material/icons'; diff --git a/packages/grid/x-data-grid-pro/src/constants/dataGridProDefaultSlotsComponents.ts b/packages/grid/x-data-grid-pro/src/constants/dataGridProDefaultSlotsComponents.ts index 322635ffffaa8..affb475b3c17d 100644 --- a/packages/grid/x-data-grid-pro/src/constants/dataGridProDefaultSlotsComponents.ts +++ b/packages/grid/x-data-grid-pro/src/constants/dataGridProDefaultSlotsComponents.ts @@ -1,17 +1,12 @@ import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '@mui/x-data-grid/internals'; -import { GridProSlotsComponent, GridProIconSlotsComponent } from '../models'; -import { GridPushPinRightIcon, GridPushPinLeftIcon } from '../components'; +import type { GridProSlotsComponent } from '../models'; import { GridProColumnMenu } from '../components/GridProColumnMenu'; import { GridColumnHeaders } from '../components/GridColumnHeaders'; - -export const DEFAULT_GRID_PRO_ICON_SLOTS_COMPONENTS: GridProIconSlotsComponent = { - ColumnMenuPinRightIcon: GridPushPinRightIcon, - ColumnMenuPinLeftIcon: GridPushPinLeftIcon, -}; +import materialSlots from '../material'; export const DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS: GridProSlotsComponent = { ...DATA_GRID_DEFAULT_SLOTS_COMPONENTS, - ...DEFAULT_GRID_PRO_ICON_SLOTS_COMPONENTS, + ...materialSlots, ColumnMenu: GridProColumnMenu, ColumnHeaders: GridColumnHeaders, }; diff --git a/packages/grid/x-data-grid-pro/src/components/icons.tsx b/packages/grid/x-data-grid-pro/src/material/icons.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/components/icons.tsx rename to packages/grid/x-data-grid-pro/src/material/icons.tsx diff --git a/packages/grid/x-data-grid-pro/src/material/index.ts b/packages/grid/x-data-grid-pro/src/material/index.ts new file mode 100644 index 0000000000000..28b3d08f2bcc7 --- /dev/null +++ b/packages/grid/x-data-grid-pro/src/material/index.ts @@ -0,0 +1,13 @@ +import type { GridProIconSlotsComponent } from '../models'; +import { GridPushPinRightIcon, GridPushPinLeftIcon } from './icons'; + +const iconSlots: GridProIconSlotsComponent = { + ColumnMenuPinRightIcon: GridPushPinRightIcon, + ColumnMenuPinLeftIcon: GridPushPinLeftIcon, +}; + +const materialSlots = { + ...iconSlots, +}; + +export default materialSlots; diff --git a/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx index c7367e042e223..43de448032ee1 100644 --- a/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx +++ b/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx @@ -10,7 +10,6 @@ import { GridRenderEditCellParams } from '../../models/params/gridCellParams'; import { getDataGridUtilityClass } from '../../constants/gridClasses'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; import { DataGridProcessedProps } from '../../models/props/DataGridProps'; -import { GridLoadIcon } from '../icons/index'; import { useGridApiContext } from '../../hooks/utils/useGridApiContext'; type OwnerState = DataGridProcessedProps; @@ -133,7 +132,7 @@ const GridEditInputCell = React.forwardRef : undefined} + endAdornment={isProcessingProps ? : undefined} {...other} /> ); diff --git a/packages/grid/x-data-grid/src/components/index.ts b/packages/grid/x-data-grid/src/components/index.ts index 44acbafd27418..c1c13e67bf1b9 100644 --- a/packages/grid/x-data-grid/src/components/index.ts +++ b/packages/grid/x-data-grid/src/components/index.ts @@ -3,7 +3,7 @@ export * from './cell'; export * from './containers'; export * from './columnHeaders'; export * from './columnSelection'; -export * from './icons'; +export * from '../material/icons'; export * from './menu'; export * from './panel'; export * from './toolbar'; diff --git a/packages/grid/x-data-grid/src/components/panel/GridColumnsPanel.tsx b/packages/grid/x-data-grid/src/components/panel/GridColumnsPanel.tsx index da53c4d8d0035..5274cba8352a6 100644 --- a/packages/grid/x-data-grid/src/components/panel/GridColumnsPanel.tsx +++ b/packages/grid/x-data-grid/src/components/panel/GridColumnsPanel.tsx @@ -11,7 +11,6 @@ import { } from '../../hooks/features/columns/gridColumnsSelector'; import { useGridSelector } from '../../hooks/utils/useGridSelector'; import { useGridApiContext } from '../../hooks/utils/useGridApiContext'; -import { GridDragIcon } from '../icons'; import { GridPanelContent } from './GridPanelContent'; import { GridPanelFooter } from './GridPanelFooter'; import { GridPanelHeader } from './GridPanelHeader'; @@ -234,7 +233,7 @@ function GridColumnsPanel(props: GridColumnsPanelProps) { size="small" disabled > - + )} diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx index 2f56db12a950b..d14f519a58da8 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { TextFieldProps } from '@mui/material/TextField'; import { unstable_useId as useId } from '@mui/utils'; -import { GridLoadIcon } from '../../icons'; import { GridFilterInputValueProps } from './GridFilterInputValueProps'; import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; @@ -60,7 +59,7 @@ function GridFilterInputDate(props: GridFilterInputDateProps) { }} inputRef={focusElementRef} InputProps={{ - ...(applying ? { endAdornment: } : {}), + ...(applying ? { endAdornment: } : {}), ...InputProps, inputProps: { max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31', diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx index e5a998b8dd120..fdcf42d0239dc 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { TextFieldProps } from '@mui/material/TextField'; import { unstable_useId as useId } from '@mui/utils'; -import { GridLoadIcon } from '../../icons'; import { GridFilterInputValueProps } from './GridFilterInputValueProps'; import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; @@ -46,7 +45,7 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps & TextFieldPr setFilterValueState(String(itemValue)); }, [item.value]); - const InputProps = applying ? { endAdornment: } : others.InputProps; + const InputProps = applying ? { endAdornment: } : others.InputProps; return ( ; + /** + * Icon displayed on the input while processing. + * @default GridLoadIcon + */ + LoadIcon: React.JSXElementConstructor; + /** + * Icon displayed on the column reorder button. + * @default GridDragIcon + */ + ColumnReorderIcon: React.JSXElementConstructor; } From c36efbbd38bab31d9e9482475ac26dd1ebe141c9 Mon Sep 17 00:00:00 2001 From: Lukas Date: Wed, 1 Mar 2023 15:39:15 +0200 Subject: [PATCH 18/24] [pickers] Stop using `WrapperVariantContext` in `Clock` (#8083) --- docs/pages/x/api/date-pickers/date-time-picker.json | 2 +- .../x/api/date-pickers/desktop-date-time-picker.json | 2 +- docs/pages/x/api/date-pickers/desktop-time-picker.json | 2 +- .../pages/x/api/date-pickers/mobile-date-time-picker.json | 2 +- docs/pages/x/api/date-pickers/mobile-time-picker.json | 2 +- .../pages/x/api/date-pickers/static-date-time-picker.json | 2 +- docs/pages/x/api/date-pickers/static-time-picker.json | 2 +- docs/pages/x/api/date-pickers/time-picker.json | 2 +- .../x-date-pickers/src/DateTimePicker/DateTimePicker.tsx | 2 +- packages/x-date-pickers/src/DateTimePicker/shared.tsx | 8 +++++--- .../src/DesktopDateTimePicker/DesktopDateTimePicker.tsx | 5 ++++- .../src/DesktopTimePicker/DesktopTimePicker.tsx | 6 +++++- .../src/MobileDateTimePicker/MobileDateTimePicker.tsx | 5 ++++- .../src/MobileTimePicker/MobileTimePicker.tsx | 5 ++++- .../src/StaticDateTimePicker/StaticDateTimePicker.tsx | 5 ++++- .../src/StaticTimePicker/StaticTimePicker.tsx | 5 ++++- packages/x-date-pickers/src/TimeClock/Clock.tsx | 4 +--- packages/x-date-pickers/src/TimePicker/TimePicker.tsx | 2 +- packages/x-date-pickers/src/TimePicker/shared.tsx | 6 +++--- 19 files changed, 44 insertions(+), 25 deletions(-) diff --git a/docs/pages/x/api/date-pickers/date-time-picker.json b/docs/pages/x/api/date-pickers/date-time-picker.json index 01f7e0d42bf8e..3b334fbc75d60 100644 --- a/docs/pages/x/api/date-pickers/date-time-picker.json +++ b/docs/pages/x/api/date-pickers/date-time-picker.json @@ -1,7 +1,7 @@ { "props": { "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, - "ampmInClock": { "type": { "name": "bool" } }, + "ampmInClock": { "type": { "name": "bool" }, "default": "true" }, "autoFocus": { "type": { "name": "bool" } }, "className": { "type": { "name": "string" } }, "closeOnSelect": { diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json index 8c05556a01659..dd9a3ede7ad22 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json @@ -1,7 +1,7 @@ { "props": { "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, - "ampmInClock": { "type": { "name": "bool" } }, + "ampmInClock": { "type": { "name": "bool" }, "default": "true" }, "autoFocus": { "type": { "name": "bool" } }, "className": { "type": { "name": "string" } }, "closeOnSelect": { diff --git a/docs/pages/x/api/date-pickers/desktop-time-picker.json b/docs/pages/x/api/date-pickers/desktop-time-picker.json index c4f7078c10ceb..c899669f66bd4 100644 --- a/docs/pages/x/api/date-pickers/desktop-time-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-time-picker.json @@ -1,7 +1,7 @@ { "props": { "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, - "ampmInClock": { "type": { "name": "bool" } }, + "ampmInClock": { "type": { "name": "bool" }, "default": "true on desktop, false on mobile" }, "autoFocus": { "type": { "name": "bool" } }, "className": { "type": { "name": "string" } }, "closeOnSelect": { diff --git a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json index d88140b64974d..0ab52bb6fe180 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json @@ -1,7 +1,7 @@ { "props": { "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, - "ampmInClock": { "type": { "name": "bool" } }, + "ampmInClock": { "type": { "name": "bool" }, "default": "true" }, "autoFocus": { "type": { "name": "bool" } }, "className": { "type": { "name": "string" } }, "closeOnSelect": { diff --git a/docs/pages/x/api/date-pickers/mobile-time-picker.json b/docs/pages/x/api/date-pickers/mobile-time-picker.json index 1895b58f44326..c8fad52194643 100644 --- a/docs/pages/x/api/date-pickers/mobile-time-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-time-picker.json @@ -1,7 +1,7 @@ { "props": { "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, - "ampmInClock": { "type": { "name": "bool" } }, + "ampmInClock": { "type": { "name": "bool" }, "default": "true on desktop, false on mobile" }, "autoFocus": { "type": { "name": "bool" } }, "className": { "type": { "name": "string" } }, "closeOnSelect": { diff --git a/docs/pages/x/api/date-pickers/static-date-time-picker.json b/docs/pages/x/api/date-pickers/static-date-time-picker.json index 00bc94cc06a24..451b466216861 100644 --- a/docs/pages/x/api/date-pickers/static-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-time-picker.json @@ -1,7 +1,7 @@ { "props": { "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, - "ampmInClock": { "type": { "name": "bool" } }, + "ampmInClock": { "type": { "name": "bool" }, "default": "true" }, "autoFocus": { "type": { "name": "bool" } }, "className": { "type": { "name": "string" } }, "components": { diff --git a/docs/pages/x/api/date-pickers/static-time-picker.json b/docs/pages/x/api/date-pickers/static-time-picker.json index 62317e7a06e17..084c178d5ac63 100644 --- a/docs/pages/x/api/date-pickers/static-time-picker.json +++ b/docs/pages/x/api/date-pickers/static-time-picker.json @@ -1,7 +1,7 @@ { "props": { "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, - "ampmInClock": { "type": { "name": "bool" } }, + "ampmInClock": { "type": { "name": "bool" }, "default": "true on desktop, false on mobile" }, "autoFocus": { "type": { "name": "bool" } }, "className": { "type": { "name": "string" } }, "components": { diff --git a/docs/pages/x/api/date-pickers/time-picker.json b/docs/pages/x/api/date-pickers/time-picker.json index 9af304463122b..38bc3138f3363 100644 --- a/docs/pages/x/api/date-pickers/time-picker.json +++ b/docs/pages/x/api/date-pickers/time-picker.json @@ -1,7 +1,7 @@ { "props": { "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, - "ampmInClock": { "type": { "name": "bool" } }, + "ampmInClock": { "type": { "name": "bool" }, "default": "true on desktop, false on mobile" }, "autoFocus": { "type": { "name": "bool" } }, "className": { "type": { "name": "string" } }, "closeOnSelect": { diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx index 65532ed89f43e..4fbfd595f05c4 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx @@ -41,7 +41,7 @@ DateTimePicker.propTypes = { ampm: PropTypes.bool, /** * Display ampm controls under the clock (instead of in the toolbar). - * @default false + * @default true */ ampmInClock: PropTypes.bool, /** diff --git a/packages/x-date-pickers/src/DateTimePicker/shared.tsx b/packages/x-date-pickers/src/DateTimePicker/shared.tsx index 51047ad305945..ae9a3626cf66a 100644 --- a/packages/x-date-pickers/src/DateTimePicker/shared.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/shared.tsx @@ -69,11 +69,13 @@ export interface BaseDateTimePickerProps extends BasePickerInputProps, Omit, 'onViewChange'>, ExportedTimeClockProps { + // TODO: Change default to be false on mobile, when `DateTimePickerToolbar` will support `ampm` buttons + // https://github.com/mui/mui-x/issues/7279 /** - * 12h/24h view for hour selection clock. - * @default `utils.is12HourCycleInCurrentLocale()` + * Display ampm controls under the clock (instead of in the toolbar). + * @default true */ - ampm?: boolean; + ampmInClock?: boolean; /** * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */ diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx index b29dbd702f27e..79e04c18183df 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx @@ -37,12 +37,14 @@ const DesktopDateTimePicker = React.forwardRef(function DesktopDateTimePicker( ...defaultizedProps.viewRenderers, }; + const ampmInClock = defaultizedProps.ampmInClock ?? true; + // Props with the default values specific to the desktop variant const props = { ...defaultizedProps, + ampmInClock, viewRenderers, slots: { field: TimeField, @@ -53,6 +56,7 @@ const DesktopTimePicker = React.forwardRef(function DesktopTimePicker( }), toolbar: { hidden: true, + ampmInClock, ...defaultizedProps.slotProps?.toolbar, }, }, @@ -80,7 +84,7 @@ DesktopTimePicker.propTypes = { ampm: PropTypes.bool, /** * Display ampm controls under the clock (instead of in the toolbar). - * @default false + * @default true on desktop, false on mobile */ ampmInClock: PropTypes.bool, /** diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx index f1d37e806e04b..203b90ceb6617 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx @@ -41,11 +41,13 @@ const MobileDateTimePicker = React.forwardRef(function MobileDateTimePicker( seconds: renderTimeViewClock, ...defaultizedProps.viewRenderers, }; + const ampmInClock = defaultizedProps.ampmInClock ?? false; // Props with the default values specific to the mobile variant const props = { ...defaultizedProps, + ampmInClock, viewRenderers, slots: { field: TimeField, @@ -51,6 +53,7 @@ const MobileTimePicker = React.forwardRef(function MobileTimePicker( }), toolbar: { hidden: false, + ampmInClock, ...defaultizedProps.slotProps?.toolbar, }, }, @@ -78,7 +81,7 @@ MobileTimePicker.propTypes = { ampm: PropTypes.bool, /** * Display ampm controls under the clock (instead of in the toolbar). - * @default false + * @default true on desktop, false on mobile */ ampmInClock: PropTypes.bool, /** diff --git a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx index 618ba6df30cf1..eb0c9d3c174e7 100644 --- a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx +++ b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx @@ -24,6 +24,7 @@ const StaticDateTimePicker = React.forwardRef(function StaticDateTimePicker(inProps, 'MuiStaticDateTimePicker'); const displayStaticWrapperAs = defaultizedProps.displayStaticWrapperAs ?? 'mobile'; + const ampmInClock = defaultizedProps.ampmInClock ?? displayStaticWrapperAs === 'desktop'; const viewRenderers: PickerViewRendererLookup = { day: renderDateViewCalendar, @@ -40,6 +41,7 @@ const StaticDateTimePicker = React.forwardRef(function StaticDateTimePicker( ); const displayStaticWrapperAs = defaultizedProps.displayStaticWrapperAs ?? 'mobile'; + const ampmInClock = defaultizedProps.ampmInClock ?? displayStaticWrapperAs === 'desktop'; const viewRenderers: PickerViewRendererLookup = { hours: renderTimeViewClock, @@ -36,10 +37,12 @@ const StaticTimePicker = React.forwardRef(function StaticTimePicker( ...defaultizedProps, viewRenderers, displayStaticWrapperAs, + ampmInClock, slotProps: { ...defaultizedProps.slotProps, toolbar: { hidden: displayStaticWrapperAs === 'desktop', + ampmInClock, ...defaultizedProps.slotProps?.toolbar, }, }, @@ -67,7 +70,7 @@ StaticTimePicker.propTypes = { ampm: PropTypes.bool, /** * Display ampm controls under the clock (instead of in the toolbar). - * @default false + * @default true on desktop, false on mobile */ ampmInClock: PropTypes.bool, /** diff --git a/packages/x-date-pickers/src/TimeClock/Clock.tsx b/packages/x-date-pickers/src/TimeClock/Clock.tsx index 7358c655060fc..85a648a14c918 100644 --- a/packages/x-date-pickers/src/TimeClock/Clock.tsx +++ b/packages/x-date-pickers/src/TimeClock/Clock.tsx @@ -9,7 +9,6 @@ import { } from '@mui/utils'; import { ClockPointer } from './ClockPointer'; import { useLocaleText, useUtils } from '../internals/hooks/useUtils'; -import { WrapperVariantContext } from '../internals/components/wrappers/WrapperVariantContext'; import type { PickerSelectionState } from '../internals/hooks/usePicker'; import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks'; import { getHours, getMinutes } from './shared'; @@ -203,7 +202,6 @@ export function Clock(inProps: ClockProps) { const utils = useUtils(); const localeText = useLocaleText(); - const wrapperVariant = React.useContext(WrapperVariantContext); const isMoving = React.useRef(false); const classes = useUtilityClasses(ownerState); @@ -352,7 +350,7 @@ export function Clock(inProps: ClockProps) { {children} - {ampm && (wrapperVariant === 'desktop' || ampmInClock) && ( + {ampm && ampmInClock && ( extends BasePickerInputProps, ExportedTimeClockProps { /** - * 12h/24h view for hour selection clock. - * @default `utils.is12HourCycleInCurrentLocale()` + * Display ampm controls under the clock (instead of in the toolbar). + * @default true on desktop, false on mobile */ - ampm?: boolean; + ampmInClock?: boolean; /** * Overrideable components. * @default {} From 389a853aa2e7a91dad66bc18a4385b96da3629db Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Wed, 1 Mar 2023 15:27:39 +0100 Subject: [PATCH 19/24] [docs] Link to demos in the interfaces API docs (#8028) --- docs/data/pages.ts | 90 ++++++++++++------- .../x/api/data-grid/grid-actions-col-def.md | 9 ++ .../data-grid/grid-aggregation-function.md | 9 ++ docs/pages/x/api/data-grid/grid-api.md | 9 ++ docs/pages/x/api/data-grid/grid-col-def.md | 9 ++ .../api/data-grid/grid-csv-export-options.md | 9 ++ .../data-grid/grid-excel-export-options.md | 9 ++ .../api/data-grid/grid-export-state-params.md | 9 ++ .../pages/x/api/data-grid/grid-filter-item.md | 9 ++ .../x/api/data-grid/grid-filter-model.md | 9 ++ .../x/api/data-grid/grid-filter-operator.md | 9 ++ .../data-grid/grid-print-export-options.md | 9 ++ .../data-grid/grid-row-class-name-params.md | 9 ++ docs/pages/x/api/data-grid/grid-row-params.md | 9 ++ .../api/data-grid/grid-row-spacing-params.md | 9 ++ .../data-grid/grid-single-select-col-def.md | 9 ++ docs/pages/x/api/data-grid/index.md | 9 +- .../api/buildInterfacesDocumentation.ts | 12 +++ .../aggregation/gridAggregationInterfaces.ts | 2 + .../export/gridExcelExportInterface.ts | 2 + .../gridStatePersistenceInterface.ts | 2 + packages/grid/x-data-grid/src/index.ts | 2 + .../src/models/colDef/gridColDef.ts | 6 ++ .../grid/x-data-grid/src/models/gridExport.ts | 4 + .../x-data-grid/src/models/gridFilterItem.ts | 2 + .../x-data-grid/src/models/gridFilterModel.ts | 2 + .../src/models/gridFilterOperator.ts | 2 + .../src/models/params/gridRowParams.ts | 6 ++ 28 files changed, 240 insertions(+), 36 deletions(-) diff --git a/docs/data/pages.ts b/docs/data/pages.ts index b5dedfeaa5c6d..baca65eb5e757 100644 --- a/docs/data/pages.ts +++ b/docs/data/pages.ts @@ -104,41 +104,63 @@ const pages: MuiPage[] = [ title: 'API Reference', children: [ { pathname: '/x/api/data-grid', title: 'Index' }, - { pathname: '/x/api/data-grid/data-grid', title: 'DataGrid' }, - { pathname: '/x/api/data-grid/data-grid-pro', title: 'DataGridPro' }, - { pathname: '/x/api/data-grid/data-grid-premium', title: 'DataGridPremium' }, - { pathname: '/x/api/data-grid/grid-api', title: 'GridApi' }, - { pathname: '/x/api/data-grid/grid-cell-params', title: 'GridCellParams' }, - { pathname: '/x/api/data-grid/grid-col-def', title: 'GridColDef' }, { - pathname: '/x/api/data-grid/grid-single-select-col-def', - title: 'GridSingleSelectColDef', - }, - { pathname: '/x/api/data-grid/grid-actions-col-def', title: 'GridActionsColDef' }, - { pathname: '/x/api/data-grid/grid-export-state-params', title: 'GridExportStateParams' }, - { pathname: '/x/api/data-grid/grid-filter-form', title: 'GridFilterForm' }, - { pathname: '/x/api/data-grid/grid-filter-item', title: 'GridFilterItem' }, - { pathname: '/x/api/data-grid/grid-filter-model', title: 'GridFilterModel' }, - { pathname: '/x/api/data-grid/grid-filter-operator', title: 'GridFilterOperator' }, - { pathname: '/x/api/data-grid/grid-filter-panel', title: 'GridFilterPanel' }, - { - pathname: '/x/api/data-grid/grid-row-class-name-params', - title: 'GridRowClassNameParams', - }, - { pathname: '/x/api/data-grid/grid-row-params', title: 'GridRowParams' }, - { pathname: '/x/api/data-grid/grid-row-spacing-params', title: 'GridRowSpacingParams' }, - { - pathname: '/x/api/data-grid/grid-aggregation-function', - title: 'GridAggregationFunction', - }, - { pathname: '/x/api/data-grid/grid-csv-export-options', title: 'GridCsvExportOptions' }, - { - pathname: '/x/api/data-grid/grid-print-export-options', - title: 'GridPrintExportOptions', - }, - { - pathname: '/x/api/data-grid/grid-excel-export-options', - title: 'GridExcelExportOptions', + pathname: '/x/api/data-grid-components-group', + subheader: 'Components', + children: [ + { pathname: '/x/api/data-grid/data-grid', title: 'DataGrid' }, + { pathname: '/x/api/data-grid/data-grid-pro', title: 'DataGridPro' }, + { pathname: '/x/api/data-grid/data-grid-premium', title: 'DataGridPremium' }, + { pathname: '/x/api/data-grid/grid-filter-form', title: 'GridFilterForm' }, + { pathname: '/x/api/data-grid/grid-filter-panel', title: 'GridFilterPanel' }, + ], + }, + { + pathname: '/x/api/data-grid-interfaces-group', + subheader: 'Interfaces', + children: [ + { pathname: '/x/api/data-grid/grid-api', title: 'GridApi' }, + { pathname: '/x/api/data-grid/grid-cell-params', title: 'GridCellParams' }, + { pathname: '/x/api/data-grid/grid-col-def', title: 'GridColDef' }, + { + pathname: '/x/api/data-grid/grid-single-select-col-def', + title: 'GridSingleSelectColDef', + }, + + { pathname: '/x/api/data-grid/grid-actions-col-def', title: 'GridActionsColDef' }, + { + pathname: '/x/api/data-grid/grid-export-state-params', + title: 'GridExportStateParams', + }, + { pathname: '/x/api/data-grid/grid-filter-item', title: 'GridFilterItem' }, + { pathname: '/x/api/data-grid/grid-filter-model', title: 'GridFilterModel' }, + { pathname: '/x/api/data-grid/grid-filter-operator', title: 'GridFilterOperator' }, + { + pathname: '/x/api/data-grid/grid-row-class-name-params', + title: 'GridRowClassNameParams', + }, + { pathname: '/x/api/data-grid/grid-row-params', title: 'GridRowParams' }, + { + pathname: '/x/api/data-grid/grid-row-spacing-params', + title: 'GridRowSpacingParams', + }, + { + pathname: '/x/api/data-grid/grid-aggregation-function', + title: 'GridAggregationFunction', + }, + { + pathname: '/x/api/data-grid/grid-csv-export-options', + title: 'GridCsvExportOptions', + }, + { + pathname: '/x/api/data-grid/grid-print-export-options', + title: 'GridPrintExportOptions', + }, + { + pathname: '/x/api/data-grid/grid-excel-export-options', + title: 'GridExcelExportOptions', + }, + ], }, ], }, diff --git a/docs/pages/x/api/data-grid/grid-actions-col-def.md b/docs/pages/x/api/data-grid/grid-actions-col-def.md index bc1a584d38402..675f13f8b46b2 100644 --- a/docs/pages/x/api/data-grid/grid-actions-col-def.md +++ b/docs/pages/x/api/data-grid/grid-actions-col-def.md @@ -2,6 +2,15 @@

Column Definition interface used for columns with the `actions` type.

+## Demos + +:::info +For examples and details on the usage, check the following pages: + +- [Special column properties](/x/react-data-grid/column-definition/#special-properties) + +::: + ## Import ```js diff --git a/docs/pages/x/api/data-grid/grid-aggregation-function.md b/docs/pages/x/api/data-grid/grid-aggregation-function.md index d2a2cbb89708c..6500040e6ddaf 100644 --- a/docs/pages/x/api/data-grid/grid-aggregation-function.md +++ b/docs/pages/x/api/data-grid/grid-aggregation-function.md @@ -2,6 +2,15 @@

Grid aggregation function definition interface.

+## Demos + +:::info +For examples and details on the usage, check the following pages: + +- [Aggregation functions](/x/react-data-grid/aggregation/#aggregation-functions) + +::: + ## Import ```js diff --git a/docs/pages/x/api/data-grid/grid-api.md b/docs/pages/x/api/data-grid/grid-api.md index 482f1126911e1..957e6a8df9014 100644 --- a/docs/pages/x/api/data-grid/grid-api.md +++ b/docs/pages/x/api/data-grid/grid-api.md @@ -2,6 +2,15 @@

The full grid API.

+## Demos + +:::info +For examples and details on the usage, check the following pages: + +- [API object](/x/react-data-grid/api-object/) + +::: + ## Import ```js diff --git a/docs/pages/x/api/data-grid/grid-col-def.md b/docs/pages/x/api/data-grid/grid-col-def.md index b5df5ecd3d97a..2e003c9034de1 100644 --- a/docs/pages/x/api/data-grid/grid-col-def.md +++ b/docs/pages/x/api/data-grid/grid-col-def.md @@ -2,6 +2,15 @@

Column Definition interface.

+## Demos + +:::info +For examples and details on the usage, check the following pages: + +- [Column definition](/x/react-data-grid/column-definition/) + +::: + ## Import ```js diff --git a/docs/pages/x/api/data-grid/grid-csv-export-options.md b/docs/pages/x/api/data-grid/grid-csv-export-options.md index 197d9356e4e41..8f5556ea30ac7 100644 --- a/docs/pages/x/api/data-grid/grid-csv-export-options.md +++ b/docs/pages/x/api/data-grid/grid-csv-export-options.md @@ -2,6 +2,15 @@

The options to apply on the CSV export.

+## Demos + +:::info +For examples and details on the usage, check the following pages: + +- [CSV export](/x/react-data-grid/export/#csv-export) + +::: + ## Import ```js diff --git a/docs/pages/x/api/data-grid/grid-excel-export-options.md b/docs/pages/x/api/data-grid/grid-excel-export-options.md index 9cbea79355e7b..a289f4fce2160 100644 --- a/docs/pages/x/api/data-grid/grid-excel-export-options.md +++ b/docs/pages/x/api/data-grid/grid-excel-export-options.md @@ -2,6 +2,15 @@

The options to apply on the Excel export.

+## Demos + +:::info +For examples and details on the usage, check the following pages: + +- [Excel export](/x/react-data-grid/export/#excel-export) + +::: + ## Import ```js diff --git a/docs/pages/x/api/data-grid/grid-export-state-params.md b/docs/pages/x/api/data-grid/grid-export-state-params.md index a5ff689fcdc42..7ac92feb158df 100644 --- a/docs/pages/x/api/data-grid/grid-export-state-params.md +++ b/docs/pages/x/api/data-grid/grid-export-state-params.md @@ -2,6 +2,15 @@

Object passed as parameter in the `exportState()` grid API method.

+## Demos + +:::info +For examples and details on the usage, check the following pages: + +- [Restore state with `apiRef`](/x/react-data-grid/state/#restore-the-state-with-apiref) + +::: + ## Import ```js diff --git a/docs/pages/x/api/data-grid/grid-filter-item.md b/docs/pages/x/api/data-grid/grid-filter-item.md index ab500e9782844..198e8ff3916ff 100644 --- a/docs/pages/x/api/data-grid/grid-filter-item.md +++ b/docs/pages/x/api/data-grid/grid-filter-item.md @@ -2,6 +2,15 @@

Filter item definition interface.

+## Demos + +:::info +For examples and details on the usage, check the following pages: + +- [Custom filter operator](/x/react-data-grid/filtering/#create-a-custom-operator) + +::: + ## Import ```js diff --git a/docs/pages/x/api/data-grid/grid-filter-model.md b/docs/pages/x/api/data-grid/grid-filter-model.md index 036d9f97ecce8..0583ab29f59d7 100644 --- a/docs/pages/x/api/data-grid/grid-filter-model.md +++ b/docs/pages/x/api/data-grid/grid-filter-model.md @@ -2,6 +2,15 @@

Model describing the filters to apply to the grid.

+## Demos + +:::info +For examples and details on the usage, check the following pages: + +- [Pass filters to the grid](/x/react-data-grid/filtering/#pass-filters-to-the-grid) + +::: + ## Import ```js diff --git a/docs/pages/x/api/data-grid/grid-filter-operator.md b/docs/pages/x/api/data-grid/grid-filter-operator.md index f4e8b4e2bd20b..5f90ecfcd9e98 100644 --- a/docs/pages/x/api/data-grid/grid-filter-operator.md +++ b/docs/pages/x/api/data-grid/grid-filter-operator.md @@ -2,6 +2,15 @@

Filter operator definition interface.

+## Demos + +:::info +For examples and details on the usage, check the following pages: + +- [Custom filter operator](/x/react-data-grid/filtering/#create-a-custom-operator) + +::: + ## Import ```js diff --git a/docs/pages/x/api/data-grid/grid-print-export-options.md b/docs/pages/x/api/data-grid/grid-print-export-options.md index 7698821ce5dc5..ea8b8b8c42422 100644 --- a/docs/pages/x/api/data-grid/grid-print-export-options.md +++ b/docs/pages/x/api/data-grid/grid-print-export-options.md @@ -2,6 +2,15 @@

The options to apply on the Print export.

+## Demos + +:::info +For examples and details on the usage, check the following pages: + +- [Print export](/x/react-data-grid/export/#print-export) + +::: + ## Import ```js diff --git a/docs/pages/x/api/data-grid/grid-row-class-name-params.md b/docs/pages/x/api/data-grid/grid-row-class-name-params.md index a285c0b3c1082..9016971bce36d 100644 --- a/docs/pages/x/api/data-grid/grid-row-class-name-params.md +++ b/docs/pages/x/api/data-grid/grid-row-class-name-params.md @@ -2,6 +2,15 @@

Object passed as parameter in the row `getRowClassName` callback prop.

+## Demos + +:::info +For examples and details on the usage, check the following pages: + +- [Styling rows](/x/react-data-grid/style/#styling-rows) + +::: + ## Import ```js diff --git a/docs/pages/x/api/data-grid/grid-row-params.md b/docs/pages/x/api/data-grid/grid-row-params.md index 8e445faa2cf96..f6ed198f4ae25 100644 --- a/docs/pages/x/api/data-grid/grid-row-params.md +++ b/docs/pages/x/api/data-grid/grid-row-params.md @@ -2,6 +2,15 @@

Object passed as parameter in the row callbacks.

+## Demos + +:::info +For examples and details on the usage, check the following pages: + +- [Master detail](/x/react-data-grid/master-detail/) + +::: + ## Import ```js diff --git a/docs/pages/x/api/data-grid/grid-row-spacing-params.md b/docs/pages/x/api/data-grid/grid-row-spacing-params.md index c295af9b1ed5f..e62d1975949ae 100644 --- a/docs/pages/x/api/data-grid/grid-row-spacing-params.md +++ b/docs/pages/x/api/data-grid/grid-row-spacing-params.md @@ -2,6 +2,15 @@

Object passed as parameter in the row `getRowSpacing` callback prop.

+## Demos + +:::info +For examples and details on the usage, check the following pages: + +- [Row spacing](/x/react-data-grid/row-height/#row-spacing) + +::: + ## Import ```js diff --git a/docs/pages/x/api/data-grid/grid-single-select-col-def.md b/docs/pages/x/api/data-grid/grid-single-select-col-def.md index 44bd9c064f7f7..136c642e4e8f9 100644 --- a/docs/pages/x/api/data-grid/grid-single-select-col-def.md +++ b/docs/pages/x/api/data-grid/grid-single-select-col-def.md @@ -2,6 +2,15 @@

Column Definition interface used for columns with the `singleSelect` type.

+## Demos + +:::info +For examples and details on the usage, check the following pages: + +- [Special column properties](/x/react-data-grid/column-definition/#special-properties) + +::: + ## Import ```js diff --git a/docs/pages/x/api/data-grid/index.md b/docs/pages/x/api/data-grid/index.md index 0da8231d411bf..c7ca384217c1d 100644 --- a/docs/pages/x/api/data-grid/index.md +++ b/docs/pages/x/api/data-grid/index.md @@ -15,14 +15,19 @@ - [GridApi](/x/api/data-grid/grid-api/) - [GridCellParams](/x/api/data-grid/grid-cell-params/) - [GridColDef](/x/api/data-grid/grid-col-def/) -- [GridCsvExportOptions](/x/api/data-grid/grid-csv-export-options/) +- [GridSingleSelectColDef](/x/api/data-grid/grid-single-select-col-def/) +- [GriActionsColDef](/x/api/data-grid/grid-actions-col-def/) +- [GridExportStateParams](/x/api/data-grid/grid-export-state-params/) - [GridFilterItem](/x/api/data-grid/grid-filter-item/) - [GridFilterModel](/x/api/data-grid/grid-filter-model/) - [GridFilterOperator](/x/api/data-grid/grid-filter-operator/) -- [GridPrintExportOptions](/x/api/data-grid/grid-print-export-options/) - [GridRowClassNameParams](/x/api/data-grid/grid-row-class-name-params/) - [GridRowParams](/x/api/data-grid/grid-row-params/) - [GridRowSpacingParams](/x/api/data-grid/grid-row-spacing-params/) +- [GridAggregationFunction](/x/api/data-grid/grid-aggregation-function/) +- [GridCsvExportOptions](/x/api/data-grid/grid-csv-export-options/) +- [GridPrintExportOptions](/x/api/data-grid/grid-print-export-options/) +- [GridExcelExportOptions](/x/api/data-grid/grid-excel-export-options/) ## Events diff --git a/docs/scripts/api/buildInterfacesDocumentation.ts b/docs/scripts/api/buildInterfacesDocumentation.ts index c4957bc29d428..931974317b136 100644 --- a/docs/scripts/api/buildInterfacesDocumentation.ts +++ b/docs/scripts/api/buildInterfacesDocumentation.ts @@ -256,11 +256,23 @@ function generateMarkdown( projects: Projects, documentedInterfaces: DocumentedInterfaces, ) { + const demos = object.tags.demos; const description = linkify(object.description, documentedInterfaces, 'html'); const imports = generateImportStatement([object], projects); let text = `# ${object.name} Interface\n`; text += `

${description}

\n\n`; + + if (demos && demos.text && demos.text.length > 0) { + text += '## Demos\n\n'; + text += ':::info\n'; + text += 'For examples and details on the usage, check the following pages:\n\n'; + demos.text.forEach((demoLink) => { + text += demoLink.text; + }); + text += '\n\n:::\n\n'; + } + text += '## Import\n\n'; text += `${imports}\n\n`; text += '## Properties\n\n'; diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationInterfaces.ts b/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationInterfaces.ts index 3b8ccce5909b3..1abf73791fd6a 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationInterfaces.ts +++ b/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationInterfaces.ts @@ -36,6 +36,8 @@ export interface GridAggregationGetCellValueParams { /** * Grid aggregation function definition interface. + * @demos + * - [Aggregation functions](/x/react-data-grid/aggregation/#aggregation-functions) */ export interface GridAggregationFunction { /** diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/export/gridExcelExportInterface.ts b/packages/grid/x-data-grid-premium/src/hooks/features/export/gridExcelExportInterface.ts index 4c77fdf4b6117..4a3559e273f79 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/export/gridExcelExportInterface.ts +++ b/packages/grid/x-data-grid-premium/src/hooks/features/export/gridExcelExportInterface.ts @@ -21,6 +21,8 @@ export interface ColumnsStylesInterface { /** * The options to apply on the Excel export. + * @demos + * - [Excel export](/x/react-data-grid/export/#excel-export) */ export interface GridExcelExportOptions extends GridFileExportOptions { /** diff --git a/packages/grid/x-data-grid/src/hooks/features/statePersistence/gridStatePersistenceInterface.ts b/packages/grid/x-data-grid/src/hooks/features/statePersistence/gridStatePersistenceInterface.ts index 4af345f232960..dda8bc8c18830 100644 --- a/packages/grid/x-data-grid/src/hooks/features/statePersistence/gridStatePersistenceInterface.ts +++ b/packages/grid/x-data-grid/src/hooks/features/statePersistence/gridStatePersistenceInterface.ts @@ -25,6 +25,8 @@ export interface GridRestoreStatePreProcessingValue { /** * Object passed as parameter in the `exportState()` grid API method. + * @demos + * - [Restore state with `apiRef`](/x/react-data-grid/state/#restore-the-state-with-apiref) */ export interface GridExportStateParams { /** diff --git a/packages/grid/x-data-grid/src/index.ts b/packages/grid/x-data-grid/src/index.ts index c1f297c323d23..baffcef773ef7 100644 --- a/packages/grid/x-data-grid/src/index.ts +++ b/packages/grid/x-data-grid/src/index.ts @@ -33,6 +33,8 @@ export { /** * The full grid API. + * @demos + * - [API object](/x/react-data-grid/api-object/) */ export type GridApi = GridApiCommunity; diff --git a/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts b/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts index cdea807119b3a..aebe9767a0458 100644 --- a/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts +++ b/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts @@ -240,6 +240,8 @@ export interface GridBaseColDef extends GridBaseColDef { @@ -258,6 +260,8 @@ export interface GridActionsColDef extends GridBaseColDef { @@ -286,6 +290,8 @@ export interface GridSingleSelectColDef = | GridBaseColDef diff --git a/packages/grid/x-data-grid/src/models/gridExport.ts b/packages/grid/x-data-grid/src/models/gridExport.ts index f26f382f91789..9685345d9863d 100644 --- a/packages/grid/x-data-grid/src/models/gridExport.ts +++ b/packages/grid/x-data-grid/src/models/gridExport.ts @@ -54,6 +54,8 @@ export interface GridCsvGetRowsToExportParams { /** diff --git a/packages/grid/x-data-grid/src/models/params/gridRowParams.ts b/packages/grid/x-data-grid/src/models/params/gridRowParams.ts index 36b93e20834be..b2e55113b901a 100644 --- a/packages/grid/x-data-grid/src/models/params/gridRowParams.ts +++ b/packages/grid/x-data-grid/src/models/params/gridRowParams.ts @@ -3,6 +3,8 @@ import type { GridColDef } from '../colDef/gridColDef'; /** * Object passed as parameter in the row callbacks. + * @demos + * - [Master detail](/x/react-data-grid/master-detail/) */ export interface GridRowParams { /** @@ -37,6 +39,8 @@ interface GridRowVisibilityParams { /** * Object passed as parameter in the row `getRowClassName` callback prop. + * @demos + * - [Styling rows](/x/react-data-grid/style/#styling-rows) */ export interface GridRowClassNameParams extends GridRowParams, @@ -104,6 +108,8 @@ export interface GridRowEditStopParams extend /** * Object passed as parameter in the row `getRowSpacing` callback prop. + * @demos + * - [Row spacing](/x/react-data-grid/row-height/#row-spacing) */ export interface GridRowSpacingParams extends GridRowEntry, GridRowVisibilityParams {} From 67ab5093795f51c579fdd63e228d8fd72f7e2e23 Mon Sep 17 00:00:00 2001 From: Lukas Date: Wed, 1 Mar 2023 17:32:10 +0200 Subject: [PATCH 20/24] [pickers] Remove `WrapperVariantContext` (#8088) --- .../useDesktopRangePicker.tsx | 41 ++++++++---------- .../useMobileRangePicker.tsx | 25 +++++------ .../useStaticRangePicker.tsx | 35 +++++++-------- .../wrappers/WrapperVariantContext.tsx | 8 ---- .../useDesktopPicker/useDesktopPicker.tsx | 43 +++++++++---------- .../hooks/useMobilePicker/useMobilePicker.tsx | 25 +++++------ .../hooks/useStaticPicker/useStaticPicker.tsx | 35 +++++++-------- .../x-date-pickers/src/internals/index.ts | 1 - 8 files changed, 93 insertions(+), 120 deletions(-) delete mode 100644 packages/x-date-pickers/src/internals/components/wrappers/WrapperVariantContext.tsx diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx b/packages/x-date-pickers-pro/src/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx index 811f7b2317eff..92a13c564b50d 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx @@ -11,7 +11,6 @@ import { executeInTheNextEventLoopTick, getActiveElement, usePicker, - WrapperVariantContext, PickersPopper, InferError, ExportedBaseToolbarProps, @@ -169,29 +168,27 @@ export const useDesktopRangePicker = < const renderPicker = () => ( - - - + + - - {renderCurrentView()} - - - + {renderCurrentView()} + + ); diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useMobileRangePicker/useMobileRangePicker.tsx b/packages/x-date-pickers-pro/src/internal/hooks/useMobileRangePicker/useMobileRangePicker.tsx index 6231d066a5bac..c65be31db6597 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useMobileRangePicker/useMobileRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/internal/hooks/useMobileRangePicker/useMobileRangePicker.tsx @@ -9,7 +9,6 @@ import { import { DateOrTimeView, usePicker, - WrapperVariantContext, PickersModalDialog, InferError, ExportedBaseToolbarProps, @@ -176,19 +175,17 @@ export const useMobileRangePicker = < const renderPicker = () => ( - - - - - {renderCurrentView()} - - - + + + + {renderCurrentView()} + + ); diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useStaticRangePicker/useStaticRangePicker.tsx b/packages/x-date-pickers-pro/src/internal/hooks/useStaticRangePicker/useStaticRangePicker.tsx index b4b2d096a99b7..4fc097488419b 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useStaticRangePicker/useStaticRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/internal/hooks/useStaticRangePicker/useStaticRangePicker.tsx @@ -9,7 +9,6 @@ import { import { DateOrTimeView, usePicker, - WrapperVariantContext, DIALOG_WIDTH, ExportedBaseToolbarProps, } from '@mui/x-date-pickers/internals'; @@ -74,24 +73,22 @@ export const useStaticRangePicker = < const renderPicker = () => ( - - - {renderCurrentView()} - - + + {renderCurrentView()} + ); diff --git a/packages/x-date-pickers/src/internals/components/wrappers/WrapperVariantContext.tsx b/packages/x-date-pickers/src/internals/components/wrappers/WrapperVariantContext.tsx deleted file mode 100644 index 9360a00e25cfd..0000000000000 --- a/packages/x-date-pickers/src/internals/components/wrappers/WrapperVariantContext.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -import { WrapperVariant } from '../../models/common'; - -/** - * TODO consider getting rid from wrapper variant - * @ignore - internal component. - */ -export const WrapperVariantContext = React.createContext(null); diff --git a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx index 857cb242dbe4c..abe598f98d8a4 100644 --- a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx @@ -10,7 +10,6 @@ import { UseDesktopPickerParams, UseDesktopPickerProps } from './useDesktopPicke import { useUtils } from '../useUtils'; import { usePicker } from '../usePicker'; import { LocalizationProvider } from '../../../LocalizationProvider'; -import { WrapperVariantContext } from '../../components/wrappers/WrapperVariantContext'; import { BaseSingleInputFieldProps } from '../../models/fields'; import { PickersLayout } from '../../../PickersLayout'; import { InferError } from '../validation/useValidation'; @@ -161,28 +160,26 @@ export const useDesktopPicker = < const renderPicker = () => ( - - - - - {renderCurrentView()} - - - + + + + {renderCurrentView()} + + ); diff --git a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx index 3f15c9b7c24fe..6eefcb43c4432 100644 --- a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx @@ -9,7 +9,6 @@ import { usePicker } from '../usePicker'; import { onSpaceOrEnter } from '../../utils/utils'; import { useUtils } from '../useUtils'; import { LocalizationProvider } from '../../../LocalizationProvider'; -import { WrapperVariantContext } from '../../components/wrappers/WrapperVariantContext'; import { BaseSingleInputFieldProps } from '../../models/fields'; import { PickersLayout } from '../../../PickersLayout'; import { InferError } from '../validation/useValidation'; @@ -125,19 +124,17 @@ export const useMobilePicker = < const renderPicker = () => ( - - - - - {renderCurrentView()} - - - + + + + {renderCurrentView()} + + ); diff --git a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx index b9938b5296f31..9d9e92d0a5c56 100644 --- a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx @@ -5,7 +5,6 @@ import { DateOrTimeView } from '../../models/views'; import { UseStaticPickerParams, UseStaticPickerProps } from './useStaticPicker.types'; import { usePicker } from '../usePicker'; import { LocalizationProvider } from '../../../LocalizationProvider'; -import { WrapperVariantContext } from '../../components/wrappers/WrapperVariantContext'; import { PickersLayout } from '../../../PickersLayout'; import { DIALOG_WIDTH } from '../../constants/dimensions'; @@ -52,24 +51,22 @@ export const useStaticPicker = < const renderPicker = () => ( - - - {renderCurrentView()} - - + + {renderCurrentView()} + ); diff --git a/packages/x-date-pickers/src/internals/index.ts b/packages/x-date-pickers/src/internals/index.ts index 204e236c49ff6..d7644f3c629b0 100644 --- a/packages/x-date-pickers/src/internals/index.ts +++ b/packages/x-date-pickers/src/internals/index.ts @@ -48,7 +48,6 @@ export type { PickersPopperClasses, } from './components/pickersPopperClasses'; export { PickersToolbarButton } from './components/PickersToolbarButton'; -export { WrapperVariantContext } from './components/wrappers/WrapperVariantContext'; export { DAY_MARGIN, DIALOG_WIDTH } from './constants/dimensions'; From d1e8a8d5509e0ffdcfd1f138930658ddd13401ea Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Wed, 1 Mar 2023 17:37:57 +0100 Subject: [PATCH 21/24] [data grid] Extract `BaseInputLabel` slot (#8068) --- .../x/api/data-grid/data-grid-premium.json | 1 + docs/pages/x/api/data-grid/data-grid-pro.json | 1 + docs/pages/x/api/data-grid/data-grid.json | 1 + .../api-docs/data-grid/data-grid-premium.json | 1 + .../api-docs/data-grid/data-grid-pro.json | 1 + .../api-docs/data-grid/data-grid.json | 1 + .../panel/filterPanel/GridFilterForm.tsx | 30 ++++++++++++------- .../grid/x-data-grid/src/material/index.ts | 2 ++ .../src/models/gridSlotsComponent.ts | 5 ++++ .../src/models/gridSlotsComponentsProps.ts | 3 ++ scripts/x-data-grid-premium.exports.json | 1 + scripts/x-data-grid-pro.exports.json | 1 + scripts/x-data-grid.exports.json | 1 + 13 files changed, 38 insertions(+), 11 deletions(-) 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 7519a015a6691..3a50ee35b0b13 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -261,6 +261,7 @@ "baseCheckbox": { "default": "Checkbox", "type": { "name": "elementType" } }, "baseFormControl": { "default": "FormControl", "type": { "name": "elementType" } }, "baseIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, + "baseInputLabel": { "default": "InputLabel", "type": { "name": "elementType" } }, "basePopper": { "default": "Popper", "type": { "name": "elementType" } }, "baseSelect": { "default": "Select", "type": { "name": "elementType" } }, "baseSwitch": { "default": "Switch", "type": { "name": "elementType" } }, 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 1cb9a4ab9d01d..574e634540537 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -235,6 +235,7 @@ "baseCheckbox": { "default": "Checkbox", "type": { "name": "elementType" } }, "baseFormControl": { "default": "FormControl", "type": { "name": "elementType" } }, "baseIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, + "baseInputLabel": { "default": "InputLabel", "type": { "name": "elementType" } }, "basePopper": { "default": "Popper", "type": { "name": "elementType" } }, "baseSelect": { "default": "Select", "type": { "name": "elementType" } }, "baseSwitch": { "default": "Switch", "type": { "name": "elementType" } }, diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index 80846d786df62..c96d014c940ff 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -180,6 +180,7 @@ "baseCheckbox": { "default": "Checkbox", "type": { "name": "elementType" } }, "baseFormControl": { "default": "FormControl", "type": { "name": "elementType" } }, "baseIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, + "baseInputLabel": { "default": "InputLabel", "type": { "name": "elementType" } }, "basePopper": { "default": "Popper", "type": { "name": "elementType" } }, "baseSelect": { "default": "Select", "type": { "name": "elementType" } }, "baseSwitch": { "default": "Switch", "type": { "name": "elementType" } }, 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 4593063f6c700..740bb5ef326de 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium.json @@ -691,6 +691,7 @@ "baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", "baseFormControl": "The custom FormControl component used in the grid.", "baseIconButton": "The custom IconButton component used in the grid.", + "baseInputLabel": "The custom InputLabel component used in the grid.", "basePopper": "The custom Popper component used in the grid.", "baseSelect": "The custom Select component used in the grid.", "baseSwitch": "The custom Switch component used in the grid.", 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 e17401388c121..78ba76f71f637 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro.json @@ -677,6 +677,7 @@ "baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", "baseFormControl": "The custom FormControl component used in the grid.", "baseIconButton": "The custom IconButton component used in the grid.", + "baseInputLabel": "The custom InputLabel component used in the grid.", "basePopper": "The custom Popper component used in the grid.", "baseSelect": "The custom Select component used in the grid.", "baseSwitch": "The custom Switch component used in the grid.", diff --git a/docs/translations/api-docs/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid.json index f62b404911c7b..d325a3aa86f86 100644 --- a/docs/translations/api-docs/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid.json @@ -645,6 +645,7 @@ "baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", "baseFormControl": "The custom FormControl component used in the grid.", "baseIconButton": "The custom IconButton component used in the grid.", + "baseInputLabel": "The custom InputLabel component used in the grid.", "basePopper": "The custom Popper component used in the grid.", "baseSelect": "The custom Select component used in the grid.", "baseSwitch": "The custom Switch component used in the grid.", diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx index 434b1d1e46eec..1e69d93c32458 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx @@ -6,8 +6,6 @@ import { unstable_capitalize as capitalize, } from '@mui/utils'; import MenuItem from '@mui/material/MenuItem'; -import InputLabel from '@mui/material/InputLabel'; -import FormControl from '@mui/material/FormControl'; import { SelectChangeEvent } from '@mui/material/Select'; import { styled } from '@mui/material/styles'; import clsx from 'clsx'; @@ -142,7 +140,7 @@ const GridFilterFormRoot = styled('div', { padding: theme.spacing(1), })); -const FilterFormDeleteIcon = styled(FormControl, { +const FilterFormDeleteIcon = styled('div', { name: 'MuiDataGrid', slot: 'FilterFormDeleteIcon', overridesResolver: (_, styles) => styles.filterFormDeleteIcon, @@ -153,7 +151,7 @@ const FilterFormDeleteIcon = styled(FormControl, { marginBottom: theme.spacing(0.2), })); -const FilterFormLogicOperatorInput = styled(FormControl, { +const FilterFormLogicOperatorInput = styled('div', { name: 'MuiDataGrid', slot: 'FilterFormLogicOperatorInput', overridesResolver: (_, styles) => styles.filterFormLogicOperatorInput, @@ -163,19 +161,19 @@ const FilterFormLogicOperatorInput = styled(FormControl, { justifyContent: 'end', }); -const FilterFormColumnInput = styled(FormControl, { +const FilterFormColumnInput = styled('div', { name: 'MuiDataGrid', slot: 'FilterFormColumnInput', overridesResolver: (_, styles) => styles.filterFormColumnInput, })<{ ownerState: OwnerState }>({ width: 150 }); -const FilterFormOperatorInput = styled(FormControl, { +const FilterFormOperatorInput = styled('div', { name: 'MuiDataGrid', slot: 'FilterFormOperatorInput', overridesResolver: (_, styles) => styles.filterFormOperatorInput, })<{ ownerState: OwnerState }>({ width: 120 }); -const FilterFormValueInput = styled(FormControl, { +const FilterFormValueInput = styled('div', { name: 'MuiDataGrid', slot: 'FilterFormValueInput', overridesResolver: (_, styles) => styles.filterFormValueInput, @@ -239,6 +237,8 @@ const GridFilterForm = React.forwardRef( const isBaseSelectNative = baseSelectProps.native ?? true; const OptionComponent = isBaseSelectNative ? 'option' : MenuItem; + const baseInputLabelProps = rootProps.slotProps?.baseInputLabel || {}; + const { InputComponentProps, ...valueInputPropsOther } = valueInputProps; const filteredColumns = React.useMemo(() => { @@ -446,9 +446,13 @@ const GridFilterForm = React.forwardRef( )} ownerState={rootProps} > - + {apiRef.current.getLocaleText('filterPanelColumns')} - + ( )} ownerState={rootProps} > - + {apiRef.current.getLocaleText('filterPanelOperator')} - + ; + /** + * The custom InputLabel component used in the grid. + * @default InputLabel + */ + BaseInputLabel: React.JSXElementConstructor; /** * Component rendered for each cell. * @default GridCell diff --git a/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts b/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts index 4810c7ddf499e..d631a6d17ff58 100644 --- a/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts +++ b/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts @@ -7,6 +7,7 @@ import { SwitchProps } from '@mui/material/Switch'; import { ButtonProps } from '@mui/material/Button'; import { IconButtonProps } from '@mui/material/IconButton'; import { TooltipProps } from '@mui/material/Tooltip'; +import type { InputLabelProps } from '@mui/material/InputLabel'; import { PopperProps } from '@mui/material/Popper'; import { TablePaginationProps } from '@mui/material/TablePagination'; import { GridToolbarProps } from '../components/toolbar/GridToolbar'; @@ -30,6 +31,7 @@ export interface BaseButtonPropsOverrides {} export interface BaseIconButtonPropsOverrides {} export interface BaseTooltipPropsOverrides {} export interface BasePopperPropsOverrides {} +export interface BaseInputLabelPropsOverrides {} export interface CellPropsOverrides {} export interface ToolbarPropsOverrides {} export interface ColumnHeaderFilterIconButtonPropsOverrides {} @@ -60,6 +62,7 @@ export interface GridSlotsComponentsProps { baseIconButton?: SlotProps; basePopper?: SlotProps; baseTooltip?: SlotProps; + baseInputLabel?: SlotProps; cell?: SlotProps; columnHeaderFilterIconButton?: SlotProps< ColumnHeaderFilterIconButtonProps, diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index 8c4b2134a538a..f8a60a21315b8 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -6,6 +6,7 @@ { "name": "BaseCheckboxPropsOverrides", "kind": "Interface" }, { "name": "BaseFormControlPropsOverrides", "kind": "Interface" }, { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" }, + { "name": "BaseInputLabelPropsOverrides", "kind": "Interface" }, { "name": "BasePopperPropsOverrides", "kind": "Interface" }, { "name": "BaseSelectPropsOverrides", "kind": "Interface" }, { "name": "BaseSwitchPropsOverrides", "kind": "Interface" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index b6b481f86565a..c7908d19a16d1 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -6,6 +6,7 @@ { "name": "BaseCheckboxPropsOverrides", "kind": "Interface" }, { "name": "BaseFormControlPropsOverrides", "kind": "Interface" }, { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" }, + { "name": "BaseInputLabelPropsOverrides", "kind": "Interface" }, { "name": "BasePopperPropsOverrides", "kind": "Interface" }, { "name": "BaseSelectPropsOverrides", "kind": "Interface" }, { "name": "BaseSwitchPropsOverrides", "kind": "Interface" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index 053c4a4633d96..b0e63f39329e4 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -6,6 +6,7 @@ { "name": "BaseCheckboxPropsOverrides", "kind": "Interface" }, { "name": "BaseFormControlPropsOverrides", "kind": "Interface" }, { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" }, + { "name": "BaseInputLabelPropsOverrides", "kind": "Interface" }, { "name": "BasePopperPropsOverrides", "kind": "Interface" }, { "name": "BaseSelectPropsOverrides", "kind": "Interface" }, { "name": "BaseSwitchPropsOverrides", "kind": "Interface" }, From 49b2d2075a2d3dbc6a6171e42c121643bbc98a8e Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Wed, 1 Mar 2023 17:40:05 +0100 Subject: [PATCH 22/24] [fields] Replace `sectionOrder` state with a memoized variable (#8090) --- .../src/internals/hooks/useField/useFieldState.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts index f1451d0bce9b9..34a5adb51cf60 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts @@ -74,12 +74,10 @@ export const useFieldState = < const sectionsValueBoundaries = React.useMemo(() => getSectionsBoundaries(utils), [utils]); - const [sectionOrder, setSectionOrder] = React.useState(() => - fieldValueManager.getSectionOrder(utils, localeText, format, isRTL), + const sectionOrder = React.useMemo( + () => fieldValueManager.getSectionOrder(utils, localeText, format, isRTL), + [fieldValueManager, format, isRTL, localeText, utils], ); - React.useEffect(() => { - setSectionOrder(fieldValueManager.getSectionOrder(utils, localeText, format, isRTL)); - }, [fieldValueManager, format, isRTL, localeText, utils]); const [state, setState] = React.useState>(() => { const sections = fieldValueManager.getSectionsFromValue( From c793742e64a4b0736da1bbfc23eee90bd178df76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Rodolfo=20Freitas?= Date: Wed, 1 Mar 2023 20:11:12 +0100 Subject: [PATCH 23/24] [docs] Update Data Grid demo to v6-beta (#7863) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: José Rodolfo Freitas Co-authored-by: Matheus Wichman --- .../data-grid/demo/PopularFeaturesDemo.js | 40 ++++++++++++++----- .../data-grid/demo/PopularFeaturesDemo.tsx | 40 ++++++++++++++----- 2 files changed, 58 insertions(+), 22 deletions(-) diff --git a/docs/data/data-grid/demo/PopularFeaturesDemo.js b/docs/data/data-grid/demo/PopularFeaturesDemo.js index d5d9a8c6d7980..b06e3b809d28f 100644 --- a/docs/data/data-grid/demo/PopularFeaturesDemo.js +++ b/docs/data/data-grid/demo/PopularFeaturesDemo.js @@ -31,6 +31,8 @@ import FullFeaturedDemo from './FullFeaturedDemo'; import LazyLoadingGrid from '../row-updates/LazyLoadingGrid'; import BasicGroupingDemo from '../column-groups/BasicGroupingDemo'; import EditingWithDatePickers from '../recipes-editing/EditingWithDatePickers'; +import CellSelectionGrid from '../cell-selection/CellSelectionRangeStyling'; +import AddNewColumnMenuGrid from '../column-menu/AddNewColumnMenuGrid'; export const featuresSet = [ { @@ -61,11 +63,10 @@ export const featuresSet = [ }, { id: 4, - name: 'Lazy Loading', + name: 'Lazy loading', description: 'Easily paginate your rows and only fetch what you need', plan: 'Pro', detailPage: '/pagination/', - newBadge: true, demo: , }, { @@ -79,7 +80,7 @@ export const featuresSet = [ }, { id: 6, - name: 'Row Grouping', + name: 'Row grouping', description: 'Group rows with repeating column values', plan: 'Premium', detailPage: '/row-grouping/', @@ -120,25 +121,23 @@ export const featuresSet = [ }, { id: 11, - name: 'Row Pinning', + name: 'Row pinning', description: 'Pin your rows up or down', plan: 'Pro', detailPage: '/row-pinning/', demo: , - newBadge: true, }, { id: 12, - name: 'Aggretation and Summary rows', + name: 'Aggregation and Summary rows', description: 'Set summary footer rows or inline summaries with row grouping', plan: 'Premium', detailPage: '/aggregation/', demo: , - newBadge: true, }, { id: 13, - name: 'Column Visibility', + name: 'Column visibility', description: 'Display different columns in different use cases by defining which columns are visible', plan: 'Community', @@ -147,7 +146,7 @@ export const featuresSet = [ }, { id: 14, - name: 'Column Virtualization', + name: 'Column virtualization', description: 'High performance support for thousands of columns', plan: 'Community', detailPage: '/virtualization/#column-virtualization', @@ -155,7 +154,7 @@ export const featuresSet = [ }, { id: 15, - name: 'Row Virtualization', + name: 'Row virtualization', description: 'High performance support for vast volume of data', plan: 'Pro', detailPage: '/virtualization/#row-virtualization', @@ -169,6 +168,25 @@ export const featuresSet = [ detailPage: '/tree-data/', demo: , }, + { + id: 17, + name: 'Cell Selection', + description: + 'Allow users to select individual and multiple cells with mouse dragging and/or keyboard (using shift key)', + plan: 'Premium', + detailPage: '/cell-selection/', + demo: , + newBadge: true, + }, + { + id: 18, + name: 'Column menu', + description: 'More customization and improved design on v6', + plan: 'Community', + detailPage: '/column-menu/', + demo: , + newBadge: true, + }, ]; const getChipProperties = (plan) => { @@ -232,7 +250,7 @@ const columns = [ { field: 'name', headerName: 'Feature name', - maxWidth: 160, + maxWidth: 172, flex: 0.2, minWidth: 100, groupable: false, diff --git a/docs/data/data-grid/demo/PopularFeaturesDemo.tsx b/docs/data/data-grid/demo/PopularFeaturesDemo.tsx index 3d7176fe8526f..68570e874a929 100644 --- a/docs/data/data-grid/demo/PopularFeaturesDemo.tsx +++ b/docs/data/data-grid/demo/PopularFeaturesDemo.tsx @@ -35,6 +35,8 @@ import FullFeaturedDemo from './FullFeaturedDemo'; import LazyLoadingGrid from '../row-updates/LazyLoadingGrid'; import BasicGroupingDemo from '../column-groups/BasicGroupingDemo'; import EditingWithDatePickers from '../recipes-editing/EditingWithDatePickers'; +import CellSelectionGrid from '../cell-selection/CellSelectionRangeStyling'; +import AddNewColumnMenuGrid from '../column-menu/AddNewColumnMenuGrid'; type Row = { id: number; @@ -75,11 +77,10 @@ export const featuresSet: Row[] = [ }, { id: 4, - name: 'Lazy Loading', + name: 'Lazy loading', description: 'Easily paginate your rows and only fetch what you need', plan: 'Pro', detailPage: '/pagination/', - newBadge: true, demo: , }, { @@ -93,7 +94,7 @@ export const featuresSet: Row[] = [ }, { id: 6, - name: 'Row Grouping', + name: 'Row grouping', description: 'Group rows with repeating column values', plan: 'Premium', detailPage: '/row-grouping/', @@ -134,25 +135,23 @@ export const featuresSet: Row[] = [ }, { id: 11, - name: 'Row Pinning', + name: 'Row pinning', description: 'Pin your rows up or down', plan: 'Pro', detailPage: '/row-pinning/', demo: , - newBadge: true, }, { id: 12, - name: 'Aggretation and Summary rows', + name: 'Aggregation and Summary rows', description: 'Set summary footer rows or inline summaries with row grouping', plan: 'Premium', detailPage: '/aggregation/', demo: , - newBadge: true, }, { id: 13, - name: 'Column Visibility', + name: 'Column visibility', description: 'Display different columns in different use cases by defining which columns are visible', plan: 'Community', @@ -161,7 +160,7 @@ export const featuresSet: Row[] = [ }, { id: 14, - name: 'Column Virtualization', + name: 'Column virtualization', description: 'High performance support for thousands of columns', plan: 'Community', detailPage: '/virtualization/#column-virtualization', @@ -169,7 +168,7 @@ export const featuresSet: Row[] = [ }, { id: 15, - name: 'Row Virtualization', + name: 'Row virtualization', description: 'High performance support for vast volume of data', plan: 'Pro', detailPage: '/virtualization/#row-virtualization', @@ -183,6 +182,25 @@ export const featuresSet: Row[] = [ detailPage: '/tree-data/', demo: , }, + { + id: 17, + name: 'Cell Selection', + description: + 'Allow users to select individual and multiple cells with mouse dragging and/or keyboard (using shift key)', + plan: 'Premium', + detailPage: '/cell-selection/', + demo: , + newBadge: true, + }, + { + id: 18, + name: 'Column menu', + description: 'More customization and improved design on v6', + plan: 'Community', + detailPage: '/column-menu/', + demo: , + newBadge: true, + }, ]; const getChipProperties = (plan: string) => { @@ -237,7 +255,7 @@ const columns: GridColDef[] = [ { field: 'name', headerName: 'Feature name', - maxWidth: 160, + maxWidth: 172, flex: 0.2, minWidth: 100, groupable: false, From be44a24e16b1aceb5c12d50a48644c4e3d8caf02 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Rodolfo=20Freitas?= Date: Wed, 1 Mar 2023 21:19:21 +0100 Subject: [PATCH 24/24] Mention the use of Support key as an alternative to the OrderID (#6968) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: José Rodolfo Freitas Co-authored-by: Olivier Tassinari --- .github/ISSUE_TEMPLATE/1.bug.yml | 4 ++-- .github/ISSUE_TEMPLATE/3.pro-support.yml | 2 +- .github/ISSUE_TEMPLATE/4.premium-support.yml | 2 +- docs/data/introduction/support/support.md | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/1.bug.yml b/.github/ISSUE_TEMPLATE/1.bug.yml index 00e2e01882f2e..2a8b32b1dce92 100644 --- a/.github/ISSUE_TEMPLATE/1.bug.yml +++ b/.github/ISSUE_TEMPLATE/1.bug.yml @@ -64,6 +64,6 @@ body: - type: input id: contact attributes: - label: Order ID 💳 (optional) - description: The [Pro plan](https://mui.com/pricing/) comes with priority over the Community plan. Providing your order ID might give your problem more attention. + label: Order ID or Support key 💳 (optional) + description: The [Pro plan](https://mui.com/pricing/) comes with priority over the Community plan. Providing your order ID (or support key) gives your problem more attention. placeholder: 'e.g. 11111' diff --git a/.github/ISSUE_TEMPLATE/3.pro-support.yml b/.github/ISSUE_TEMPLATE/3.pro-support.yml index 4468312219162..d78b1f202a16d 100644 --- a/.github/ISSUE_TEMPLATE/3.pro-support.yml +++ b/.github/ISSUE_TEMPLATE/3.pro-support.yml @@ -12,7 +12,7 @@ body: - type: input id: contact attributes: - label: Order ID 💳 + label: Order ID or Support key 💳 (optional) description: The order ID of the purchased Pro plan. Community users can [learn more about support](https://mui.com/getting-started/support/) in the documentation. placeholder: 'e.g. 11111' validations: diff --git a/.github/ISSUE_TEMPLATE/4.premium-support.yml b/.github/ISSUE_TEMPLATE/4.premium-support.yml index 495a380661cc4..82e56d648cec4 100644 --- a/.github/ISSUE_TEMPLATE/4.premium-support.yml +++ b/.github/ISSUE_TEMPLATE/4.premium-support.yml @@ -12,7 +12,7 @@ body: - type: input id: contact attributes: - label: Order ID 💳 + label: Order ID or Support key 💳 (optional) description: The order ID of the purchased Premium plan. Community users can [learn more about support](https://mui.com/getting-started/support/) in the documentation. placeholder: 'e.g. 11111' validations: diff --git a/docs/data/introduction/support/support.md b/docs/data/introduction/support/support.md index b9bb90384d46f..da829f9d03d9a 100644 --- a/docs/data/introduction/support/support.md +++ b/docs/data/introduction/support/support.md @@ -25,10 +25,10 @@ The technical support covers only MUI X components. When purchasing a MUI X Pro or Premium license you get access to technical support until the end of your subscription. Support is available on multiple channels, but the recommended channels are: -- GitHub: You can [open a new issue](https://github.com/mui/mui-x/issues/new/choose) and leave your Order ID, so we can prioritize accordingly. +- GitHub: You can [open a new issue](https://github.com/mui/mui-x/issues/new/choose) and leave your Order ID (or Support key), so we can prioritize accordingly. - Email: If you need to share **private information** you can [submit a request](https://support.mui.com/hc/en-us/requests/new?tf_360023797420=mui_x) or send an email to [x@mui.com](mailto:x@mui.com). -Including your Order ID in the issue helps us prioritize the issues based on the following support levels: +Including your Order ID (or Support key) in the issue helps us prioritize the issues based on the following support levels: 1. MUI X Pro: maintainers give these issues more attention than the ones from the community. 2. MUI X Premium: The same as MUI X Pro, but with higher priority.