diff --git a/.circleci/config.yml b/.circleci/config.yml index 7c86ac5d08a22..75d18f04b5514 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -193,7 +193,7 @@ jobs: test_browser: <<: *defaults docker: - - image: mcr.microsoft.com/playwright:v1.41.1-focal + - image: mcr.microsoft.com/playwright:v1.41.2-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -226,7 +226,7 @@ jobs: test_e2e: <<: *defaults docker: - - image: mcr.microsoft.com/playwright:v1.41.1-focal + - image: mcr.microsoft.com/playwright:v1.41.2-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -239,7 +239,7 @@ jobs: test_e2e_website: <<: *defaults docker: - - image: mcr.microsoft.com/playwright:v1.41.1-focal + - image: mcr.microsoft.com/playwright:v1.41.2-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -254,7 +254,7 @@ jobs: test_regressions: <<: *defaults docker: - - image: mcr.microsoft.com/playwright:v1.41.1-focal + - image: mcr.microsoft.com/playwright:v1.41.2-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -270,7 +270,7 @@ jobs: run_danger: <<: *defaults docker: - - image: mcr.microsoft.com/playwright:v1.41.1-focal + - image: mcr.microsoft.com/playwright:v1.41.2-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index f067fef9c95ec..3990a65673943 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -3,31 +3,29 @@ "installCommand": "install:codesandbox", "node": "18", "packages": [ - "packages/x-license-pro", - "packages/grid/x-data-grid", - "packages/grid/x-data-grid-pro", - "packages/grid/x-data-grid-premium", - "packages/grid/x-data-grid-generator", + "packages/x-license", + "packages/x-data-grid", + "packages/x-data-grid-pro", + "packages/x-data-grid-premium", + "packages/x-data-grid-generator", "packages/x-date-pickers", "packages/x-date-pickers-pro", "packages/x-charts", "packages/x-tree-view" ], "publishDirectory": { - "@mui/x-license-pro": "packages/x-license-pro/build", - "@mui/x-data-grid": "packages/grid/x-data-grid/build", - "@mui/x-data-grid-pro": "packages/grid/x-data-grid-pro/build", - "@mui/x-data-grid-premium": "packages/grid/x-data-grid-premium/build", - "@mui/x-data-grid-generator": "packages/grid/x-data-grid-generator/build", + "@mui/x-license": "packages/x-license/build", + "@mui/x-data-grid": "packages/x-data-grid/build", + "@mui/x-data-grid-pro": "packages/x-data-grid-pro/build", + "@mui/x-data-grid-premium": "packages/x-data-grid-premium/build", + "@mui/x-data-grid-generator": "packages/x-data-grid-generator/build", "@mui/x-date-pickers": "packages/x-date-pickers/build", "@mui/x-date-pickers-pro": "packages/x-date-pickers-pro/build", "@mui/x-charts": "packages/x-charts/build", "@mui/x-tree-view": "packages/x-tree-view/build" }, "sandboxes": [ - "new", - "github/mui/material-ui/tree/master/examples/create-react-app", - "github/mui/material-ui/tree/master/examples/create-react-app-with-typescript" + "/bug-reproductions/x-data-grid" ], "silent": true } diff --git a/.eslintignore b/.eslintignore index 332d95470b5e1..828357acf4a92 100644 --- a/.eslintignore +++ b/.eslintignore @@ -3,7 +3,6 @@ /docs/export /docs/pages/playground/ /lerna.json -/packages/grid/x-data-grid/src/lib /packages/x-codemod/src/**/*.spec.js build CHANGELOG.md diff --git a/.eslintrc.js b/.eslintrc.js index 823e51ac43da9..cfd1113f822de 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -98,11 +98,16 @@ module.exports = { }, }, { - files: ['packages/grid/**/*.ts', 'packages/grid/**/*.js', 'docs/src/pages/**/*.tsx'], + files: [ + 'packages/x-data-grid/**/*{.tsx,.ts,.js}', + 'packages/x-data-grid-pro/**/*{.tsx,.ts,.js}', + 'packages/x-data-grid-premium/**/*{.tsx,.ts,.js}', + 'docs/src/pages/**/*.tsx', + ], excludedFiles: [ - 'packages/grid/x-data-grid/src/themeAugmentation/index.js', // TypeScript ignores JS files with the same name as the TS file - 'packages/grid/x-data-grid-pro/src/themeAugmentation/index.js', - 'packages/grid/x-data-grid-premium/src/themeAugmentation/index.js', + 'packages/x-data-grid/src/themeAugmentation/index.js', // TypeScript ignores JS files with the same name as the TS file + 'packages/x-data-grid-pro/src/themeAugmentation/index.js', + 'packages/x-data-grid-premium/src/themeAugmentation/index.js', ], rules: { 'material-ui/no-direct-state-access': 'error', @@ -158,6 +163,6 @@ module.exports = { buildPackageRestrictedImports('@mui/x-data-grid-generator', 'grid/x-data-grid-generator'), buildPackageRestrictedImports('@mui/x-pickers', 'x-pickers'), buildPackageRestrictedImports('@mui/x-pickers-pro', 'x-pickers-pro'), - buildPackageRestrictedImports('@mui/x-license-pro', 'x-license-pro'), + buildPackageRestrictedImports('@mui/x-license', 'x-license'), ], }; diff --git a/.github/ISSUE_TEMPLATE/1.bug.yml b/.github/ISSUE_TEMPLATE/1.bug.yml index 61517d69ed6e6..24e3b54a8b5a3 100644 --- a/.github/ISSUE_TEMPLATE/1.bug.yml +++ b/.github/ISSUE_TEMPLATE/1.bug.yml @@ -26,9 +26,7 @@ body: description: | **⚠️ Issues that we can't reproduce can't be fixed.** - If you don't have one, you can use one of these options: - - [DataGrid codesandbox template](https://codesandbox.io/s/github/mui/mui-x/tree/master/templates/x-data-grid?file=/src/demo.tsx) - - Fork any of the examples in our [documentation](https://mui.com/x/introduction/) by [clicking on the codesandbox or stackblitz icon](https://mui.com/static/docs/forking-an-example.png) + Please provide a link to a live example and an unambiguous set of steps to reproduce this bug. See our [documentation](https://mui.com/x/introduction/support/#bug-reproductions) on how to build a reproduction case. value: | Link to live example: (required) diff --git a/.github/ISSUE_TEMPLATE/3.pro-support.yml b/.github/ISSUE_TEMPLATE/3.pro-support.yml index 3e20ea94fc921..c3ef5d1a3e07c 100644 --- a/.github/ISSUE_TEMPLATE/3.pro-support.yml +++ b/.github/ISSUE_TEMPLATE/3.pro-support.yml @@ -36,10 +36,7 @@ body: attributes: label: The problem in depth description: | - **If applicable, please provide a live example to explain your problem.** - If you don't have one, you can use one of these options: - - [DataGrid codesandbox template](https://codesandbox.io/s/github/mui/mui-x/tree/master/templates/x-data-grid?file=/src/demo.tsx) - - Fork any of the examples in our [documentation](https://mui.com/x/introduction/) by [clicking on the codesandbox or stackblitz icon](https://mui.com/static/docs/forking-an-example.png) + Please provide a link to a live example and an unambiguous set of steps to reproduce this bug. See our [documentation](https://mui.com/x/introduction/support/#bug-reproductions) on how to build a reproduction case. - type: textarea attributes: label: Your environment diff --git a/.github/ISSUE_TEMPLATE/4.premium-support.yml b/.github/ISSUE_TEMPLATE/4.premium-support.yml index 106fabecf04d0..fb927c7619ebc 100644 --- a/.github/ISSUE_TEMPLATE/4.premium-support.yml +++ b/.github/ISSUE_TEMPLATE/4.premium-support.yml @@ -36,10 +36,7 @@ body: attributes: label: The problem in depth description: | - **If applicable, please provide a live example to explain your problem.** - If you don't have one, you can use one of these options: - - [DataGrid codesandbox template](https://codesandbox.io/s/github/mui/mui-x/tree/master/templates/x-data-grid?file=/src/demo.tsx) - - Fork any of the examples in our [documentation](https://mui.com/x/introduction/) by [clicking on the codesandbox or stackblitz icon](https://mui.com/static/docs/forking-an-example.png) + Please provide a link to a live example and an unambiguous set of steps to reproduce this bug. See our [documentation](https://mui.com/x/introduction/support/#bug-reproductions) on how to build a reproduction case. - type: textarea attributes: label: Your environment diff --git a/.github/ISSUE_TEMPLATE/5.priority-support.yml b/.github/ISSUE_TEMPLATE/5.priority-support.yml index d7f67770bd6c5..f902b8ed2f407 100644 --- a/.github/ISSUE_TEMPLATE/5.priority-support.yml +++ b/.github/ISSUE_TEMPLATE/5.priority-support.yml @@ -26,10 +26,7 @@ body: attributes: label: The problem in depth description: | - **If you're reporting a bug, please provide a live example for your report.** - If you don't have one, you can use one of these options: - - [DataGrid codesandbox template](https://codesandbox.io/s/github/mui/mui-x/tree/master/templates/x-data-grid?file=/src/demo.tsx) - - Fork any of the examples in our [documentation](https://mui.com/x/introduction/) by [clicking on the codesandbox or stackblitz icon](https://mui.com/static/docs/forking-an-example.png) + Please provide a link to a live example and an unambiguous set of steps to reproduce this bug. See our [documentation](https://mui.com/x/introduction/support/#bug-reproductions) on how to build a reproduction case. - type: textarea attributes: label: Your environment diff --git a/.github/styles/Blog/ComposedWords.yml b/.github/styles/Blog/ComposedWords.yml index 149dc0bd6ab30..1d931388bee34 100644 --- a/.github/styles/Blog/ComposedWords.yml +++ b/.github/styles/Blog/ComposedWords.yml @@ -11,3 +11,5 @@ swap: 'sub components': subcomponents 'use-case': 'use case' 'usecase': 'use case' + "can't": 'cannot' + 'can not': 'cannot' diff --git a/.github/workflows/closed-issue-message.yaml b/.github/workflows/closed-issue-message.yaml new file mode 100644 index 0000000000000..a14afd879f116 --- /dev/null +++ b/.github/workflows/closed-issue-message.yaml @@ -0,0 +1,31 @@ +name: Add comment +on: + issues: + types: + - closed +env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + GH_REPO: ${{ github.repository }} + NUMBER: ${{ github.event.issue.number }} + BODY: | + :warning: **This issue has been closed.** + If you have a similar problem, please open a [new issue](https://github.com/mui/mui-x/issues/new/choose) and provide details about your specific problem. + If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment. + APPENDIX: | + + **How did we do @${{ github.event.issue.user.login }}?** + Your experience with our support team matters to us. If you have a moment, please share your thoughts through our [brief survey](https://tally.so/r/w4r5Mk?issue=${{ github.event.issue.number }}). + +jobs: + add-comment: + if: github.event.issue.state_reason != 'inactivity' + runs-on: ubuntu-latest + permissions: + issues: write + steps: + - name: Add comment for outside contributors + if: github.event.issue.author_association != 'MEMBER' && github.event.issue.author_association != 'OWNER' + run: gh issue comment "$NUMBER" --body "$BODY $APPENDIX" + - name: Add comment for maintainers + if: github.event.issue.author_association == 'MEMBER' || github.event.issue.author_association == 'OWNER' + run: gh issue comment "$NUMBER" --body "$BODY" diff --git a/.github/workflows/no-response.yml b/.github/workflows/no-response.yml index aabc9edc6f073..a12c61a4a79ed 100644 --- a/.github/workflows/no-response.yml +++ b/.github/workflows/no-response.yml @@ -32,4 +32,3 @@ jobs: # Comment to post when closing an Issue for lack of response. Set to `false` to disable closeComment: > The issue has been inactive for 7 days and has been automatically closed. - If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion. diff --git a/CHANGELOG.md b/CHANGELOG.md index 9a1706e2d9d50..beb6954c41b6d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,108 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## v7.0.0-beta.2 + +_Feb 9, 2024_ + +We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨: + +- πŸš€ Add slot typings on the Data Grid components (#11795) @romgrk +- 🎁 Support UTC date formatting in Charts tooltip (#11943) @shaharyar-shamshi +- 🌍 Improve Danish (da-DK) locale Data Grid (#11877) @ShahrazH +- 🐞 Bugfixes +- πŸ“š Documentation improvements + +### Data Grid + +#### `@mui/x-data-grid@v7.0.0-beta.2` + +- [DataGrid] Add `removeAllFilterItems` as a reason of `onFilterModelChange` callback (#11911) @shaharyar-shamshi +- [DataGrid] Add slot typings (#11795) @romgrk +- [DataGrid] Add support for dialogs in menu actions (#11909) @cherniavskii +- [DataGrid] Allow passing readonly arrays to `pageSizeOptions` prop (#11609) @pcorpet +- [DataGrid] Fix incorrect computation of `lastPage` in `GridPagination` (#11958) @MBilalShafi +- [DataGrid] Improve vertical scrolling performance (#11924) @romgrk +- [l10n] Improve Danish (da-DK) locale (#11877) @ShahrazH + +#### `@mui/x-data-grid-pro@v7.0.0-beta.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') + +Same changes as in `@mui/x-data-grid@v7.0.0-beta.2`. + +#### `@mui/x-data-grid-premium@v7.0.0-beta.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan') + +Same changes as in `@mui/x-data-grid-pro@v7.0.0-beta.2`, plus: + +- [DataGridPremium] Fix autosize grouping cell (#11870) @romgrk +- [DataGridPremium] Fix clipboard paste not working with Caps Lock enabled (#11965) @shaharyar-shamshi + +### Date Pickers + +#### `@mui/x-date-pickers@v7.0.0-beta.2` + +- [pickers] Avoid relying on locale in Luxon `isWithinRange` method (#11936) @LukasTy +- [pickers] Limit the valid values of `TDate` (#11791) @flaviendelangle + +#### `@mui/x-date-pickers-pro@v7.0.0-beta.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') + +Same changes as in `@mui/x-date-pickers@v7.0.0-beta.2`. + +### Charts / `@mui/x-charts@v7.0.0-beta.2` + +- [charts] Add `reverse` property to axes (#11899) @alexfauquette +- [charts] Allow series ids to be numbers (#11941) @alexfauquette +- [charts] Support UTC date formatting in tooltip (#11943) @shaharyar-shamshi + +### Tree View / `@mui/x-tree-view@v7.0.0-beta.2` + +- [TreeView] Correctly detect if an item is expandable (#11963) @swalker326 +- [TreeView] Polish the default design & revise the simple version pages (#11529) @danilo-leal + +### License + +#### Breaking changes + +- If you're using the [commercial license](https://next.mui.com/x/introduction/licensing), you need to update the import path: + + ```diff + -import { LicenseInfo } from '@mui/x-license-pro'; + +import { LicenseInfo } from '@mui/x-license'; + ``` + +`@mui/x-license@v7.0.0-beta.2` + +- [license] Rename `@mui/x-license-pro` to `@mui/x-license` (#11938) @cherniavskii + +### Docs + +- [docs] Add a note about `AdapterDateFnsV3` on the Getting Started page (#11985) @flaviendelangle +- [docs] Add missing `Charts` breaking change steps (#11971) @alexfauquette +- [docs] Fix `ChartsTooltip` typo (#11961) @thisisharsh7 +- [docs] Refactor `Localization` documentation sections (#11989) @LukasTy +- [docs] Use "cannot" instead of "can't" or "can not" (#11986) @flaviendelangle +- [docs] Add quick fixes to the migration guide (#11806) @danilo-leal +- [docs] Avoid use of shorthand (#12000) @oliviertassinari +- [docs] Avoid the use of MUIΒ Core @oliviertassinari +- [docs] Fix image size and dark mode @oliviertassinari +- [docs] Follow blank line convention with use client @oliviertassinari +- [docs] Stable layout between light and dark mode @oliviertassinari + +### Core + +- [core] Add `docs:serve` script (#11935) @cherniavskii +- [core] Bump monorepo (#12001) @cherniavskii +- [core] Deprecate `LicenseInfo` re-exports (#11956) @cherniavskii +- [core] Fix `test_types` failing on the `next` branch (#11944) @cherniavskii +- [core] Fix failing `test_static` on the next branch (#11977) @cherniavskii +- [core] Flatten grid packages folder (#11946) @cherniavskii +- [core] Improve license info deprecation message (#11974) @cherniavskii +- [core] Integrate changes from Core #40842 PR (#11801) @michaldudak +- [core] Move next config to ESM (#11882) @Janpot +- [core] Add auto-message on closed issues (#11805) @michelengelen +- [core] Simplify bug reproduction (#11849) @oliviertassinari +- [core] Fix npm reference @oliviertassinari +- [core] Normalize issue template @oliviertassinari + ## 7.0.0-beta.1 _Feb 1, 2024_ @@ -2036,6 +2138,62 @@ Here is an example of the renaming for the `` component. - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi - [license] Correctly throw errors (#10924) @oliviertassinari +## v6.19.4 + +_Feb 9, 2024_ + +We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨: + +- 🌍 Improve Danish (da-DK) locale on the Data Grid (#11972) @ShahrazH +- 🐞 Bugfixes +- πŸ“š Documentation improvements + +### Data Grid + +#### `@mui/x-data-grid@v6.19.4` + +- [DataGrid] Add support for dialogs in menu actions (#11937) @cherniavskii +- [DataGrid] Allow passing readonly arrays to `pageSizeOptions` prop (#11992) @pcorpet +- [DataGrid] Fix row reorder with cell selection (#11878) @PEsteves8 +- [DataGrid] Replace `eval` with `new Function` (#11962) @cherniavskii +- [l10n] Improve Danish (da-DK) locale (#11972) @ShahrazH + +#### `@mui/x-data-grid-pro@v6.19.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') + +Same changes as in `@mui/x-data-grid@v6.19.4`. + +#### `@mui/x-data-grid-premium@v6.19.4` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan') + +Same changes as in `@mui/x-data-grid-pro@v6.19.4`, plus: + +- [DataGridPremium] Fix autosize grouping cell (#11990) @romgrk +- [DataGridPremium] Fix error after closing print export (#11889) @cherniavskii + +### Date Pickers + +#### `@mui/x-date-pickers@v6.19.4` + +- [pickers] Avoid relying on locale in Luxon `isWithinRange` method (#11940) @LukasTy + +#### `@mui/x-date-pickers-pro@v6.19.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') + +Same changes as in `@mui/x-date-pickers@v6.19.4`. + +### Charts / `@mui/x-charts@v6.19.4` + +- [charts] Add `reverse` property to axes (#11959) @alexfauquette +- [charts] Allow series ids to be numbers (#11960) @alexfauquette +- [charts] Fix Proptypes error by supporting string values for axes (#11953) @alexfauquette + +### Docs + +- [docs] Add a note about `AdapterDateFnsV3` on the Getting Started page (#11987) @flaviendelangle +- [docs] Avoid the use of MUI Core @oliviertassinari +- [docs] Fix API links (#11930) @alexfauquette +- [docs] Fix `ChartsTooltip` typo (#11967) @thisisharsh7 +- [docs] Refactor `Localization` documentation sections (#11997) @LukasTy +- [code] Simplify bug reproduction (#11932) @alexfauquette + ## 6.19.3 _Feb 1, 2024_ @@ -7123,7 +7281,7 @@ You can find more information about the new api, including how to set those tran - [core] Add link to the security page on the `README` (#6073) @oliviertassinari - [core] Fix scroll restoration in the docs (#5938) @oliviertassinari - [core] Remove the Storybook (#6099) @flaviendelangle -- [core] Tag release as `next` in NPM (#6256) @m4theushw +- [core] Tag release as `next` in npm (#6256) @m4theushw - [core] Update monorepo (#6180) @flaviendelangle - [core] Use the `next` branch for Prettier (#6097) @flaviendelangle - [core] Use the official repository for `@mui/monorepo` instead of a fork (#6189) @oliviertassinari diff --git a/babel.config.js b/babel.config.js index 45a9cc8bb34ff..901553e569693 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,5 +1,5 @@ const path = require('path'); -const generateReleaseInfo = require('./packages/x-license-pro/generateReleaseInfo'); +const generateReleaseInfo = require('./packages/x-license/generateReleaseInfo'); function resolveAliasPath(relativeToBabelConf) { const resolvedPath = path.relative(process.cwd(), path.resolve(__dirname, relativeToBabelConf)); @@ -7,11 +7,11 @@ function resolveAliasPath(relativeToBabelConf) { } const defaultAlias = { - '@mui/x-data-grid': resolveAliasPath('./packages/grid/x-data-grid/src'), - '@mui/x-data-grid-generator': resolveAliasPath('./packages/grid/x-data-grid-generator/src'), - '@mui/x-data-grid-pro': resolveAliasPath('./packages/grid/x-data-grid-pro/src'), - '@mui/x-data-grid-premium': resolveAliasPath('./packages/grid/x-data-grid-premium/src'), - '@mui/x-license-pro': resolveAliasPath('./packages/x-license-pro/src'), + '@mui/x-data-grid': resolveAliasPath('./packages/x-data-grid/src'), + '@mui/x-data-grid-generator': resolveAliasPath('./packages/x-data-grid-generator/src'), + '@mui/x-data-grid-pro': resolveAliasPath('./packages/x-data-grid-pro/src'), + '@mui/x-data-grid-premium': resolveAliasPath('./packages/x-data-grid-premium/src'), + '@mui/x-license': resolveAliasPath('./packages/x-license/src'), '@mui/x-date-pickers': resolveAliasPath('./packages/x-date-pickers/src'), '@mui/x-date-pickers-pro': resolveAliasPath('./packages/x-date-pickers-pro/src'), '@mui/x-charts': resolveAliasPath('./packages/x-charts/src'), diff --git a/templates/x-data-grid/package.json b/bug-reproductions/x-data-grid/package.json similarity index 80% rename from templates/x-data-grid/package.json rename to bug-reproductions/x-data-grid/package.json index 569a43b6fb606..8178d76e1228b 100644 --- a/templates/x-data-grid/package.json +++ b/bug-reproductions/x-data-grid/package.json @@ -19,6 +19,9 @@ }, "main": "src/index.tsx", "scripts": { - "start": "react-scripts start" + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" } } diff --git a/bug-reproductions/x-data-grid/public/index.html b/bug-reproductions/x-data-grid/public/index.html new file mode 100644 index 0000000000000..9befde78ff8b2 --- /dev/null +++ b/bug-reproductions/x-data-grid/public/index.html @@ -0,0 +1,19 @@ + + + + DataGrid β€” MUI X + + + + + + + + + +
+ + diff --git a/templates/x-data-grid/src/demo.tsx b/bug-reproductions/x-data-grid/src/demo.tsx similarity index 80% rename from templates/x-data-grid/src/demo.tsx rename to bug-reproductions/x-data-grid/src/demo.tsx index 10cc6a348fe17..5417a65f93e8b 100644 --- a/templates/x-data-grid/src/demo.tsx +++ b/bug-reproductions/x-data-grid/src/demo.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import { DataGridPro } from '@mui/x-data-grid-pro'; import { useDemoData } from '@mui/x-data-grid-generator'; +import { DataGrid } from '@mui/x-data-grid'; -export default function DataGridProDemo() { +export default function Demo() { const { data } = useDemoData({ dataSet: 'Commodity', rowLength: 100000, @@ -12,7 +12,7 @@ export default function DataGridProDemo() { return ( - diff --git a/templates/x-data-grid/template.json b/bug-reproductions/x-data-grid/template.json similarity index 100% rename from templates/x-data-grid/template.json rename to bug-reproductions/x-data-grid/template.json diff --git a/templates/x-data-grid/tsconfig.json b/bug-reproductions/x-data-grid/tsconfig.json similarity index 100% rename from templates/x-data-grid/tsconfig.json rename to bug-reproductions/x-data-grid/tsconfig.json diff --git a/changelogOld/CHANGELOG.v5.md b/changelogOld/CHANGELOG.v5.md index 90e58e28abf42..dc300290b139f 100644 --- a/changelogOld/CHANGELOG.v5.md +++ b/changelogOld/CHANGELOG.v5.md @@ -2386,7 +2386,7 @@ A big thanks to the 9 contributors who made this release possible. Here are some - [DataGrid] Close other actions menus when opening a new one (#3492) @m4theushw - [DataGrid] Deprecate `getValue` param from the cell and row params (#3369) @flaviendelangle - [DataGrid] Fix value parsing in date input (#3307) @alexfauquette -- [DataGrid] Fix can't enter 0 on numeric column (#3491) @m4theushw +- [DataGrid] Fix cannot enter 0 on numeric column (#3491) @m4theushw - [DataGrid] Fix scrolling bug when an action is focused (#3483) @alexfauquette - [DataGrid] Remove `line-height` from `GridCell` (#3446) @DanailH - [DataGridPro] Block edition for auto-generated rows (#3547) @flaviendelangle diff --git a/docs/babel.config.js b/docs/babel.config.js index 44face6ddf1ae..2ec7799d61593 100644 --- a/docs/babel.config.js +++ b/docs/babel.config.js @@ -2,15 +2,15 @@ const fse = require('fs-extra'); const getBaseConfig = require('../babel.config'); const alias = { - '@mui/x-data-grid': '../packages/grid/x-data-grid/src', - '@mui/x-data-grid-generator': '../packages/grid/x-data-grid-generator/src', - '@mui/x-data-grid-pro': '../packages/grid/x-data-grid-pro/src', - '@mui/x-data-grid-premium': '../packages/grid/x-data-grid-premium/src', + '@mui/x-data-grid': '../packages/x-data-grid/src', + '@mui/x-data-grid-generator': '../packages/x-data-grid-generator/src', + '@mui/x-data-grid-pro': '../packages/x-data-grid-pro/src', + '@mui/x-data-grid-premium': '../packages/x-data-grid-premium/src', '@mui/x-date-pickers': '../packages/x-date-pickers/src', '@mui/x-date-pickers-pro': '../packages/x-date-pickers-pro/src', '@mui/x-charts': '../packages/x-charts/src', '@mui/x-tree-view': '../packages/x-tree-view/src', - '@mui/x-license-pro': '../packages/x-license-pro/src', + '@mui/x-license': '../packages/x-license/src', '@mui/docs': '../node_modules/@mui/monorepo/packages/mui-docs/src', '@mui/markdown': '../node_modules/@mui/monorepo/packages/markdown', '@mui/monorepo': '../node_modules/@mui/monorepo', diff --git a/docs/data/charts-component-api-pages.ts b/docs/data/charts-component-api-pages.ts index b3b304429fd1a..76bc2512caa06 100644 --- a/docs/data/charts-component-api-pages.ts +++ b/docs/data/charts-component-api-pages.ts @@ -89,6 +89,10 @@ const apiPages: MuiPage[] = [ pathname: '/x/api/charts/default-charts-item-tooltip-content', title: 'DefaultChartsItemTooltipContent', }, + { + pathname: '/x/api/charts/default-charts-legend', + title: 'DefaultChartsLegend', + }, { pathname: '/x/api/charts/line-chart', title: 'LineChart', diff --git a/docs/data/charts/axis/ReverseExampleNoSnap.js b/docs/data/charts/axis/ReverseExampleNoSnap.js new file mode 100644 index 0000000000000..7d80dd08131e5 --- /dev/null +++ b/docs/data/charts/axis/ReverseExampleNoSnap.js @@ -0,0 +1,100 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Checkbox from '@mui/material/Checkbox'; + +import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer'; +import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart'; +import { BarPlot } from '@mui/x-charts/BarChart'; +import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; +import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; + +const dataset = [ + { min: -12, max: -4, precip: 79, month: 'Jan' }, + { min: -11, max: -3, precip: 66, month: 'Feb' }, + { min: -6, max: 2, precip: 76, month: 'Mar' }, + { min: 1, max: 9, precip: 106, month: 'Apr' }, + { min: 8, max: 17, precip: 105, month: 'Mai' }, + { min: 15, max: 24, precip: 114, month: 'Jun' }, + { min: 18, max: 26, precip: 106, month: 'Jul' }, + { min: 17, max: 26, precip: 105, month: 'Aug' }, + { min: 13, max: 21, precip: 100, month: 'Sept' }, + { min: 6, max: 13, precip: 116, month: 'Oct' }, + { min: 0, max: 6, precip: 93, month: 'Nov' }, + { min: -8, max: -1, precip: 93, month: 'Dec' }, +]; + +const series = [ + { type: 'line', dataKey: 'min', color: '#577399' }, + { type: 'line', dataKey: 'max', color: '#fe5f55' }, + { type: 'bar', dataKey: 'precip', color: '#bfdbf7', yAxisKey: 'rightAxis' }, +]; + +export default function ReverseExampleNoSnap() { + const [reverseX, setReverseX] = React.useState(false); + const [reverseLeft, setReverseLeft] = React.useState(false); + const [reverseRight, setReverseRight] = React.useState(false); + + return ( + + + setReverseX(event.target.checked)} /> + } + label="reverse x-axis" + labelPlacement="end" + /> + setReverseLeft(event.target.checked)} /> + } + label="reverse left axis" + labelPlacement="end" + /> + setReverseRight(event.target.checked)} /> + } + label="reverse right axis" + labelPlacement="end" + /> + + + + + + + + + + + + + + ); +} diff --git a/docs/data/charts/axis/axis.md b/docs/data/charts/axis/axis.md index a86cb8622a273..4eab6e89f7c5c 100644 --- a/docs/data/charts/axis/axis.md +++ b/docs/data/charts/axis/axis.md @@ -74,6 +74,13 @@ xAxis={[ {{"demo": "MinMaxExample.js"}} +### Axis direction + +By default, the axes' directions are left to right and bottom to top. +You can change this behavior with the property `reverse`. + +{{"demo": "ReverseExampleNoSnap.js"}} + ## Tick position ### Automatic tick position diff --git a/docs/data/charts/getting-started/getting-started.md b/docs/data/charts/getting-started/getting-started.md index df422ab76da86..45880b4fe07b2 100644 --- a/docs/data/charts/getting-started/getting-started.md +++ b/docs/data/charts/getting-started/getting-started.md @@ -78,7 +78,7 @@ pnpm add @mui/styled-engine-sc styled-components -Take a look at the [Styled engine guide](/material-ui/guides/styled-components/) for more information about how to configure `styled-components` as the style engine. +Take a look at the [Styled engine guide](/material-ui/integrations/styled-components/) for more information about how to configure `styled-components` as the style engine. ### Usage with Next.js diff --git a/docs/data/charts/legend/legend.md b/docs/data/charts/legend/legend.md index edecb80ab591c..5c560a3f85928 100644 --- a/docs/data/charts/legend/legend.md +++ b/docs/data/charts/legend/legend.md @@ -1,7 +1,7 @@ --- title: Charts - Legend productId: x-charts -components: ChartsLegend, ChartsText +components: ChartsLegend, DefaultChartsLegend, ChartsText --- # Charts - Legend diff --git a/docs/data/charts/lines/LineDataset.js b/docs/data/charts/lines/LineDataset.js index 0e05117c04945..34f6f21b7bb37 100644 --- a/docs/data/charts/lines/LineDataset.js +++ b/docs/data/charts/lines/LineDataset.js @@ -541,7 +541,7 @@ export default function LineDataset() { xAxis={[ { dataKey: 'year', - valueFormatter: (v) => v.toString(), + valueFormatter: (value) => value.toString(), min: 1985, max: 2022, }, diff --git a/docs/data/charts/lines/LineDataset.tsx b/docs/data/charts/lines/LineDataset.tsx index 00588a9035f93..4efe4d2281e42 100644 --- a/docs/data/charts/lines/LineDataset.tsx +++ b/docs/data/charts/lines/LineDataset.tsx @@ -542,7 +542,7 @@ export default function LineDataset() { xAxis={[ { dataKey: 'year', - valueFormatter: (v) => v.toString(), + valueFormatter: (value) => value.toString(), min: 1985, max: 2022, }, diff --git a/docs/data/charts/tooltip/Formatting.js b/docs/data/charts/tooltip/Formatting.js index 10dc1544a795f..e9ff77e252545 100644 --- a/docs/data/charts/tooltip/Formatting.js +++ b/docs/data/charts/tooltip/Formatting.js @@ -87,8 +87,8 @@ export default function Formatting() { ({ - ...s, + series={lineChartsParams.series.map((serie) => ({ + ...serie, valueFormatter: currencyFormatter, }))} /> diff --git a/docs/data/charts/tooltip/Formatting.tsx b/docs/data/charts/tooltip/Formatting.tsx index 91c2e822604a1..6384957f71a68 100644 --- a/docs/data/charts/tooltip/Formatting.tsx +++ b/docs/data/charts/tooltip/Formatting.tsx @@ -87,8 +87,8 @@ export default function Formatting() { ({ - ...s, + series={lineChartsParams.series.map((serie) => ({ + ...serie, valueFormatter: currencyFormatter, }))} /> diff --git a/docs/data/charts/tooltip/Formatting.tsx.preview b/docs/data/charts/tooltip/Formatting.tsx.preview index 78b79ddf0b6b6..0c659b2551fbf 100644 --- a/docs/data/charts/tooltip/Formatting.tsx.preview +++ b/docs/data/charts/tooltip/Formatting.tsx.preview @@ -1,8 +1,8 @@ ({ - ...s, + series={lineChartsParams.series.map((serie) => ({ + ...serie, valueFormatter: currencyFormatter, }))} /> \ No newline at end of file diff --git a/docs/data/charts/tooltip/tooltip.md b/docs/data/charts/tooltip/tooltip.md index 3837e7e8196ef..43ba5b298d15f 100644 --- a/docs/data/charts/tooltip/tooltip.md +++ b/docs/data/charts/tooltip/tooltip.md @@ -9,7 +9,7 @@ components: ChartsAxisTooltipContent, ChartsItemTooltipContent, ChartsTooltip, D

Tooltip provides extra data on charts item.

In all charts components, you can pass props to the tooltip by using `tooltip={{...}}`. -If you are using composition, you can add the `` component and pass props directly. +If you are using composition, you can add the `` component and pass props directly. ## Tooltip trigger diff --git a/docs/data/data-grid/column-definition/ActionsWithModalGrid.js b/docs/data/data-grid/column-definition/ActionsWithModalGrid.js new file mode 100644 index 0000000000000..7a29da11924c4 --- /dev/null +++ b/docs/data/data-grid/column-definition/ActionsWithModalGrid.js @@ -0,0 +1,92 @@ +import * as React from 'react'; +import { DataGrid, GridActionsCellItem } from '@mui/x-data-grid'; +import DeleteIcon from '@mui/icons-material/Delete'; +import { randomUserName } from '@mui/x-data-grid-generator'; +import Dialog from '@mui/material/Dialog'; +import DialogTitle from '@mui/material/DialogTitle'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import DialogActions from '@mui/material/DialogActions'; +import Button from '@mui/material/Button'; + +const initialRows = [ + { id: 1, name: randomUserName() }, + { id: 2, name: randomUserName() }, + { id: 3, name: randomUserName() }, +]; + +function DeleteUserActionItem({ deleteUser, ...props }) { + const [open, setOpen] = React.useState(false); + + return ( + + setOpen(true)} /> + setOpen(false)} + aria-labelledby="alert-dialog-title" + aria-describedby="alert-dialog-description" + > + Delete this user? + + + This action cannot be undone. + + + + + + + + + ); +} + +export default function ActionsWithModalGrid() { + const [rows, setRows] = React.useState(initialRows); + + const deleteUser = React.useCallback( + (id) => () => { + setTimeout(() => { + setRows((prevRows) => prevRows.filter((row) => row.id !== id)); + }); + }, + [], + ); + + const columns = React.useMemo( + () => [ + { field: 'name', type: 'string' }, + { + field: 'actions', + type: 'actions', + width: 80, + getActions: (params) => [ + } + deleteUser={deleteUser(params.id)} + closeMenuOnClick={false} + />, + ], + }, + ], + [deleteUser], + ); + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/column-definition/ActionsWithModalGrid.tsx b/docs/data/data-grid/column-definition/ActionsWithModalGrid.tsx new file mode 100644 index 0000000000000..e32fd666d9b75 --- /dev/null +++ b/docs/data/data-grid/column-definition/ActionsWithModalGrid.tsx @@ -0,0 +1,103 @@ +import * as React from 'react'; +import { + DataGrid, + GridActionsCellItem, + GridRowId, + GridColDef, + GridActionsCellItemProps, +} from '@mui/x-data-grid'; +import DeleteIcon from '@mui/icons-material/Delete'; +import { randomUserName } from '@mui/x-data-grid-generator'; +import Dialog from '@mui/material/Dialog'; +import DialogTitle from '@mui/material/DialogTitle'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import DialogActions from '@mui/material/DialogActions'; +import Button from '@mui/material/Button'; + +const initialRows = [ + { id: 1, name: randomUserName() }, + { id: 2, name: randomUserName() }, + { id: 3, name: randomUserName() }, +]; + +function DeleteUserActionItem({ + deleteUser, + ...props +}: GridActionsCellItemProps & { deleteUser: () => void }) { + const [open, setOpen] = React.useState(false); + + return ( + + setOpen(true)} /> + setOpen(false)} + aria-labelledby="alert-dialog-title" + aria-describedby="alert-dialog-description" + > + Delete this user? + + + This action cannot be undone. + + + + + + + + + ); +} + +type Row = (typeof initialRows)[number]; + +export default function ActionsWithModalGrid() { + const [rows, setRows] = React.useState(initialRows); + + const deleteUser = React.useCallback( + (id: GridRowId) => () => { + setTimeout(() => { + setRows((prevRows) => prevRows.filter((row) => row.id !== id)); + }); + }, + [], + ); + + const columns = React.useMemo[]>( + () => [ + { field: 'name', type: 'string' }, + { + field: 'actions', + type: 'actions', + width: 80, + getActions: (params) => [ + } + deleteUser={deleteUser(params.id)} + closeMenuOnClick={false} + />, + ], + }, + ], + [deleteUser], + ); + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/column-definition/ActionsWithModalGrid.tsx.preview b/docs/data/data-grid/column-definition/ActionsWithModalGrid.tsx.preview new file mode 100644 index 0000000000000..6f326f7a9cd17 --- /dev/null +++ b/docs/data/data-grid/column-definition/ActionsWithModalGrid.tsx.preview @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/data/data-grid/column-definition/column-definition.md b/docs/data/data-grid/column-definition/column-definition.md index dc73721a1e571..0c1ae990eea6f 100644 --- a/docs/data/data-grid/column-definition/column-definition.md +++ b/docs/data/data-grid/column-definition/column-definition.md @@ -230,6 +230,8 @@ The following are the native column types with their required value types: | `'singleSelect'` | A value in `.valueOptions` | | `'actions'` | Not applicable | +{{"demo": "ColumnTypesGrid.js", "bg": "inline"}} + ### Converting types Default methods, such as filtering and sorting, assume that the type of the values will match the type of the column specified in `type`. @@ -249,57 +251,67 @@ If for any reason, your data type is not the correct one, you can use `valueGett To use most of the column types, you only need to define the `type` property in your column definition. However, some types require additional properties to be set to make them work correctly: -- If the column type is `'singleSelect'`, you also need to set the `valueOptions` property in the respective column definition. These values are options used for filtering and editing. +#### Single select - ```tsx - { - field: 'country', - type: 'singleSelect', - valueOptions: ['United Kingdom', 'Spain', 'Brazil'] - } - ``` - - :::warning - When using objects values for `valueOptions` you need to provide the `value` and `label` attributes for each option. - However, you can customize which attribute is used as value and label by using `getOptionValue` and `getOptionLabel`, respectively. - - ```tsx - // Without getOptionValue and getOptionLabel - { - valueOptions: [ - { value: 'BR', label: 'Brazil' }, - { value: 'FR', label: 'France' } - ] - } +If the column type is `'singleSelect'`, you also need to set the `valueOptions` property in the respective column definition. These values are options used for filtering and editing. - // With getOptionValue and getOptionLabel - { - getOptionValue: (value: any) => value.code, - getOptionLabel: (value: any) => value.name, - valueOptions: [ - { code: 'BR', name: 'Brazil' }, - { code: 'FR', name: 'France' } - ] - } - ``` +```tsx +{ + field: 'country', + type: 'singleSelect', + valueOptions: ['United Kingdom', 'Spain', 'Brazil'] +} +``` - ::: +:::warning +When using objects values for `valueOptions` you need to provide the `value` and `label` attributes for each option. +However, you can customize which attribute is used as value and label by using `getOptionValue` and `getOptionLabel`, respectively. -- If the column type is `'actions'`, you need to provide a `getActions` function that returns an array of actions available for each row (React elements). - You can add the `showInMenu` prop on the returned React elements to signal the data grid to group these actions inside a row menu. +```tsx +// Without getOptionValue and getOptionLabel +{ + valueOptions: [ + { value: 'BR', label: 'Brazil' }, + { value: 'FR', label: 'France' } + ] +} - ```tsx - { - field: 'actions', - type: 'actions', - getActions: (params: GridRowParams) => [ - , - , - ] - } - ``` +// With getOptionValue and getOptionLabel +{ + getOptionValue: (value: any) => value.code, + getOptionLabel: (value: any) => value.name, + valueOptions: [ + { code: 'BR', name: 'Brazil' }, + { code: 'FR', name: 'France' } + ] +} +``` -{{"demo": "ColumnTypesGrid.js", "bg": "inline"}} +::: + +#### Actions + +If the column type is `'actions'`, you need to provide a `getActions` function that returns an array of actions available for each row (React elements). +You can add the `showInMenu` prop on the returned React elements to signal the data grid to group these actions inside a row menu. + +```tsx +{ + field: 'actions', + type: 'actions', + getActions: (params: GridRowParams) => [ + , + , + ] +} +``` + +By default, actions shown in the menu will close the menu on click. +But in some cases, you might want to keep the menu open after clicking an action. +You can achieve this by setting the `closeMenuOnClick` prop to `false`. + +In the following example, the "Delete" action opens a confirmation dialog and therefore needs to keep the menu mounted: + +{{"demo": "ActionsWithModalGrid.js", "bg": "inline"}} ### Custom column types diff --git a/docs/data/data-grid/column-pinning/column-pinning.md b/docs/data/data-grid/column-pinning/column-pinning.md index ed27f0ae3c1b1..462a666c6a832 100644 --- a/docs/data/data-grid/column-pinning/column-pinning.md +++ b/docs/data/data-grid/column-pinning/column-pinning.md @@ -73,7 +73,7 @@ To disable the pinning of a single column, set the `pinnable` property in `GridC ### Pin non-pinnable columns programmatically -It may be desirable to allow one or more columns to be pinned or unpinned programmatically that can not be pinned or unpinned on the UI (i.e. columns for which prop `disableColumnPinning = true` or `colDef.pinnable = false`). +It may be desirable to allow one or more columns to be pinned or unpinned programmatically that cannot be pinned or unpinned on the UI (i.e. columns for which prop `disableColumnPinning = true` or `colDef.pinnable = false`). This can be done in one of the following ways. - (A) Initializing the pinned columns diff --git a/docs/data/data-grid/components/CustomColumnMenu.tsx b/docs/data/data-grid/components/CustomColumnMenu.tsx index 70275eb92d007..9a0a7fa8d4f3e 100644 --- a/docs/data/data-grid/components/CustomColumnMenu.tsx +++ b/docs/data/data-grid/components/CustomColumnMenu.tsx @@ -10,6 +10,7 @@ import { GridColumnMenuSortItem, useGridApiRef, DataGridPro, + GridSlots, } from '@mui/x-data-grid-pro'; import StarOutlineIcon from '@mui/icons-material/StarOutline'; @@ -119,7 +120,7 @@ export default function CustomColumnMenu() { }, ]} slots={{ - columnMenu: CustomColumnMenuComponent, + columnMenu: CustomColumnMenuComponent as GridSlots['columnMenu'], }} slotProps={{ columnMenu: { color }, diff --git a/docs/data/data-grid/components/CustomLoadingOverlayGrid.tsx b/docs/data/data-grid/components/CustomLoadingOverlayGrid.tsx index fef9a8145a76c..c278f02c68a45 100644 --- a/docs/data/data-grid/components/CustomLoadingOverlayGrid.tsx +++ b/docs/data/data-grid/components/CustomLoadingOverlayGrid.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { DataGrid } from '@mui/x-data-grid'; +import { DataGrid, GridSlots } from '@mui/x-data-grid'; import LinearProgress from '@mui/material/LinearProgress'; import { useDemoData } from '@mui/x-data-grid-generator'; @@ -14,7 +14,7 @@ export default function CustomLoadingOverlayGrid() {
``` +If you want to ensure type safety, you can declare your component using the slot props typings: + +```tsx +import { GridSlotProps } from '@mui/x-data-grid'; + +function MyCustomColumnMenu( + props: GridSlotProps['columnMenu'] & { background: string; counter: number }, +) { + // ... +} +``` + ### Interacting with the data grid The grid exposes two hooks to help you to access the data grid data while overriding component slots. @@ -180,7 +192,7 @@ The naming of overridable interfaces uses a pattern like this: 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. +This [file](https://github.com/mui/mui-x/blob/-/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts) lists all the interfaces for each slot which could be used for augmentation. diff --git a/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx b/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx index 4f8f4803dd6c5..5942bbb3c31c6 100644 --- a/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx +++ b/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx @@ -70,7 +70,7 @@ function GridEditDateCell({ field, value, colDef, -}: GridRenderEditCellParams) { +}: GridRenderEditCellParams) { const apiRef = useGridApiContext(); const Component = colDef.type === 'dateTime' ? DateTimePicker : DatePicker; diff --git a/docs/data/data-grid/editing/AskConfirmationBeforeSave.js b/docs/data/data-grid/editing/AskConfirmationBeforeSave.js index 0ef962fe2744e..82806abcca1c9 100644 --- a/docs/data/data-grid/editing/AskConfirmationBeforeSave.js +++ b/docs/data/data-grid/editing/AskConfirmationBeforeSave.js @@ -78,7 +78,7 @@ export default function AskConfirmationBeforeSave() { resolve(response); setPromiseArguments(null); } catch (error) { - setSnackbar({ children: "Name can't be empty", severity: 'error' }); + setSnackbar({ children: 'Name cannot be empty', severity: 'error' }); reject(oldRow); setPromiseArguments(null); } diff --git a/docs/data/data-grid/editing/AskConfirmationBeforeSave.tsx b/docs/data/data-grid/editing/AskConfirmationBeforeSave.tsx index 669db71ae1afd..618f7fc071789 100644 --- a/docs/data/data-grid/editing/AskConfirmationBeforeSave.tsx +++ b/docs/data/data-grid/editing/AskConfirmationBeforeSave.tsx @@ -95,7 +95,7 @@ export default function AskConfirmationBeforeSave() { resolve(response); setPromiseArguments(null); } catch (error) { - setSnackbar({ children: "Name can't be empty", severity: 'error' }); + setSnackbar({ children: 'Name cannot be empty', severity: 'error' }); reject(oldRow); setPromiseArguments(null); } diff --git a/docs/data/data-grid/editing/FullFeaturedCrudGrid.tsx b/docs/data/data-grid/editing/FullFeaturedCrudGrid.tsx index a3f845377b155..ea0680357f04a 100644 --- a/docs/data/data-grid/editing/FullFeaturedCrudGrid.tsx +++ b/docs/data/data-grid/editing/FullFeaturedCrudGrid.tsx @@ -18,6 +18,7 @@ import { GridRowId, GridRowModel, GridRowEditStopReasons, + GridSlots, } from '@mui/x-data-grid'; import { randomCreatedDate, @@ -237,7 +238,7 @@ export default function FullFeaturedCrudGrid() { onRowEditStop={handleRowEditStop} processRowUpdate={processRowUpdate} slots={{ - toolbar: EditToolbar, + toolbar: EditToolbar as GridSlots['toolbar'], }} slotProps={{ toolbar: { setRows, setRowModesModel }, diff --git a/docs/data/data-grid/editing/FullFeaturedCrudGrid.tsx.preview b/docs/data/data-grid/editing/FullFeaturedCrudGrid.tsx.preview index b060ee3cfc323..2693093092106 100644 --- a/docs/data/data-grid/editing/FullFeaturedCrudGrid.tsx.preview +++ b/docs/data/data-grid/editing/FullFeaturedCrudGrid.tsx.preview @@ -7,7 +7,7 @@ onRowEditStop={handleRowEditStop} processRowUpdate={processRowUpdate} slots={{ - toolbar: EditToolbar, + toolbar: EditToolbar as GridSlots['toolbar'], }} slotProps={{ toolbar: { setRows, setRowModesModel }, diff --git a/docs/data/data-grid/editing/ServerSidePersistence.js b/docs/data/data-grid/editing/ServerSidePersistence.js index 55490d8b23a71..5bd968a078d3c 100644 --- a/docs/data/data-grid/editing/ServerSidePersistence.js +++ b/docs/data/data-grid/editing/ServerSidePersistence.js @@ -14,7 +14,7 @@ const useFakeMutation = () => { new Promise((resolve, reject) => { setTimeout(() => { if (user.name?.trim() === '') { - reject(new Error("Error while saving user: name can't be empty.")); + reject(new Error('Error while saving user: name cannot be empty.')); } else { resolve({ ...user, name: user.name?.toUpperCase() }); } diff --git a/docs/data/data-grid/editing/ServerSidePersistence.tsx b/docs/data/data-grid/editing/ServerSidePersistence.tsx index fe16dc37194ab..22be81606f615 100644 --- a/docs/data/data-grid/editing/ServerSidePersistence.tsx +++ b/docs/data/data-grid/editing/ServerSidePersistence.tsx @@ -28,7 +28,7 @@ const useFakeMutation = () => { new Promise>((resolve, reject) => { setTimeout(() => { if (user.name?.trim() === '') { - reject(new Error("Error while saving user: name can't be empty.")); + reject(new Error('Error while saving user: name cannot be empty.')); } else { resolve({ ...user, name: user.name?.toUpperCase() }); } diff --git a/docs/data/data-grid/editing/StartEditButtonGrid.tsx b/docs/data/data-grid/editing/StartEditButtonGrid.tsx index 6397547acaac8..98f848fd4e14e 100644 --- a/docs/data/data-grid/editing/StartEditButtonGrid.tsx +++ b/docs/data/data-grid/editing/StartEditButtonGrid.tsx @@ -9,6 +9,7 @@ import { GridCellModes, GridEventListener, GridCellModesModel, + GridSlots, } from '@mui/x-data-grid'; import { randomCreatedDate, @@ -147,7 +148,7 @@ export default function StartEditButtonGrid() { onCellEditStop={handleCellEditStop} onCellModesModelChange={(model) => setCellModesModel(model)} slots={{ - toolbar: EditToolbar, + toolbar: EditToolbar as GridSlots['toolbar'], }} slotProps={{ toolbar: { diff --git a/docs/data/data-grid/filtering/CustomFilterPanelPosition.tsx b/docs/data/data-grid/filtering/CustomFilterPanelPosition.tsx index 65f85ed661714..2f686357b240a 100644 --- a/docs/data/data-grid/filtering/CustomFilterPanelPosition.tsx +++ b/docs/data/data-grid/filtering/CustomFilterPanelPosition.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { DataGrid, + GridSlots, GridToolbarContainer, GridToolbarFilterButton, } from '@mui/x-data-grid'; @@ -35,7 +36,7 @@ export default function CustomFilterPanelPosition() { { if (!value || value.length !== 4 || !/\d{4}/.test(value)) { - // If the value is not a 4 digit string, it can not be a year so applying this filter is useless + // If the value is not a 4-digit string, it cannot be a year so applying this filter is useless return null; } return (cellValue) => { diff --git a/docs/data/data-grid/filtering/QuickFilteringCustomLogic.tsx b/docs/data/data-grid/filtering/QuickFilteringCustomLogic.tsx index 930e29b1c161c..5baf7a7ab05d1 100644 --- a/docs/data/data-grid/filtering/QuickFilteringCustomLogic.tsx +++ b/docs/data/data-grid/filtering/QuickFilteringCustomLogic.tsx @@ -26,7 +26,7 @@ const getApplyQuickFilterFnSameYear: GetApplyQuickFilterFn = ( value, ) => { if (!value || value.length !== 4 || !/\d{4}/.test(value)) { - // If the value is not a 4 digit string, it can not be a year so applying this filter is useless + // If the value is not a 4-digit string, it cannot be a year so applying this filter is useless return null; } return (cellValue) => { diff --git a/docs/data/data-grid/filtering/index.md b/docs/data/data-grid/filtering/index.md index 5fbdc9077dca7..c0787c6afdfae 100644 --- a/docs/data/data-grid/filtering/index.md +++ b/docs/data/data-grid/filtering/index.md @@ -119,7 +119,7 @@ Filters are enabled by default, but you can easily disable this feature by setti To disable the filter of a single column, set the `filterable` property in `GridColDef` to `false`. -In the example below, the _rating_ column can not be filtered. +In the example below, the _rating_ column cannot be filtered. ```js diff --git a/docs/data/data-grid/filtering/quick-filter.md b/docs/data/data-grid/filtering/quick-filter.md index 280cd5a3e32db..fb43ebab0de8a 100644 --- a/docs/data/data-grid/filtering/quick-filter.md +++ b/docs/data/data-grid/filtering/quick-filter.md @@ -82,7 +82,7 @@ In the example below, a custom filter is created for the `date` column to check ```ts const getApplyQuickFilterFn: GetApplyQuickFilterFn = (value) => { if (!value || value.length !== 4 || !/\d{4}/.test(value)) { - // If the value is not a 4 digit string, it can not be a year so applying this filter is useless + // If the value is not a 4 digit string, it cannot be a year so applying this filter is useless return null; } return (cellValue) => { diff --git a/docs/data/data-grid/getting-started/getting-started.md b/docs/data/data-grid/getting-started/getting-started.md index 1a14adb1b3473..4d9fbcef475ba 100644 --- a/docs/data/data-grid/getting-started/getting-started.md +++ b/docs/data/data-grid/getting-started/getting-started.md @@ -63,7 +63,7 @@ pnpm add @mui/styled-engine-sc styled-components :::info -Take a look at the [Styled Components guide](/material-ui/guides/styled-components/) for more information about how to configure `styled-components` as the style engine. +Take a look at the [Styled Components guide](/material-ui/integrations/styled-components/) for more information about how to configure `styled-components` as the style engine. ::: ## Quickstart diff --git a/docs/data/data-grid/localization/data.json b/docs/data/data-grid/localization/data.json index 343c850852798..65b342c980adc 100644 --- a/docs/data/data-grid/localization/data.json +++ b/docs/data/data-grid/localization/data.json @@ -5,7 +5,7 @@ "localeName": "Arabic (Sudan)", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/arSD.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/arSD.ts" }, { "languageTag": "be-BY", @@ -13,7 +13,7 @@ "localeName": "Belarusian", "missingKeysCount": 29, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/beBY.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/beBY.ts" }, { "languageTag": "bg-BG", @@ -21,7 +21,7 @@ "localeName": "Bulgarian", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/bgBG.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/bgBG.ts" }, { "languageTag": "zh-HK", @@ -29,7 +29,7 @@ "localeName": "Chinese (Hong Kong)", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/zhHK.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/zhHK.ts" }, { "languageTag": "zh-CN", @@ -37,7 +37,7 @@ "localeName": "Chinese (Simplified)", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/zhCN.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/zhCN.ts" }, { "languageTag": "zh-TW", @@ -45,7 +45,7 @@ "localeName": "Chinese (Taiwan)", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/zhTW.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/zhTW.ts" }, { "languageTag": "hr-HR", @@ -53,7 +53,7 @@ "localeName": "Croatian", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/hrHR.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/hrHR.ts" }, { "languageTag": "cs-CZ", @@ -61,7 +61,7 @@ "localeName": "Czech", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/csCZ.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/csCZ.ts" }, { "languageTag": "da-DK", @@ -69,7 +69,7 @@ "localeName": "Danish", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/daDK.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/daDK.ts" }, { "languageTag": "nl-NL", @@ -77,7 +77,7 @@ "localeName": "Dutch", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/nlNL.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/nlNL.ts" }, { "languageTag": "fi-FI", @@ -85,7 +85,7 @@ "localeName": "Finnish", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/fiFI.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/fiFI.ts" }, { "languageTag": "fr-FR", @@ -93,7 +93,7 @@ "localeName": "French", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/frFR.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/frFR.ts" }, { "languageTag": "de-DE", @@ -101,7 +101,7 @@ "localeName": "German", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/deDE.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/deDE.ts" }, { "languageTag": "el-GR", @@ -109,7 +109,7 @@ "localeName": "Greek", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/elGR.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/elGR.ts" }, { "languageTag": "he-IL", @@ -117,7 +117,7 @@ "localeName": "Hebrew", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/heIL.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/heIL.ts" }, { "languageTag": "hu-HU", @@ -125,7 +125,7 @@ "localeName": "Hungarian", "missingKeysCount": 5, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/huHU.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/huHU.ts" }, { "languageTag": "it-IT", @@ -133,7 +133,7 @@ "localeName": "Italian", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/itIT.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/itIT.ts" }, { "languageTag": "ja-JP", @@ -141,7 +141,7 @@ "localeName": "Japanese", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/jaJP.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/jaJP.ts" }, { "languageTag": "ko-KR", @@ -149,7 +149,7 @@ "localeName": "Korean", "missingKeysCount": 30, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/koKR.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/koKR.ts" }, { "languageTag": "nb-NO", @@ -157,7 +157,7 @@ "localeName": "Norwegian (BokmΓ₯l)", "missingKeysCount": 28, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/nbNO.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/nbNO.ts" }, { "languageTag": "fa-IR", @@ -165,7 +165,7 @@ "localeName": "Persian", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/faIR.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/faIR.ts" }, { "languageTag": "pl-PL", @@ -173,7 +173,7 @@ "localeName": "Polish", "missingKeysCount": 30, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/plPL.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/plPL.ts" }, { "languageTag": "pt-PT", @@ -181,7 +181,7 @@ "localeName": "Portuguese", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/ptPT.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/ptPT.ts" }, { "languageTag": "pt-BR", @@ -189,7 +189,7 @@ "localeName": "Portuguese (Brazil)", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/ptBR.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/ptBR.ts" }, { "languageTag": "ro-RO", @@ -197,7 +197,7 @@ "localeName": "Romanian", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/roRO.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/roRO.ts" }, { "languageTag": "ru-RU", @@ -205,7 +205,7 @@ "localeName": "Russian", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/ruRU.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/ruRU.ts" }, { "languageTag": "sk-SK", @@ -213,7 +213,7 @@ "localeName": "Slovak", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/skSK.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/skSK.ts" }, { "languageTag": "es-ES", @@ -221,7 +221,7 @@ "localeName": "Spanish", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/esES.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/esES.ts" }, { "languageTag": "sv-SE", @@ -229,7 +229,7 @@ "localeName": "Swedish", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/svSE.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/svSE.ts" }, { "languageTag": "tr-TR", @@ -237,7 +237,7 @@ "localeName": "Turkish", "missingKeysCount": 18, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/trTR.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/trTR.ts" }, { "languageTag": "uk-UA", @@ -245,7 +245,7 @@ "localeName": "Ukrainian", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/ukUA.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/ukUA.ts" }, { "languageTag": "ur-PK", @@ -253,7 +253,7 @@ "localeName": "Urdu (Pakistan)", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/urPK.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/urPK.ts" }, { "languageTag": "vi-VN", @@ -261,6 +261,6 @@ "localeName": "Vietnamese", "missingKeysCount": 3, "totalKeysCount": 117, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/locales/viVN.ts" + "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-data-grid/src/locales/viVN.ts" } ] diff --git a/docs/data/data-grid/localization/localization.md b/docs/data/data-grid/localization/localization.md index 0a2aa44e67537..117d8792a96d3 100644 --- a/docs/data/data-grid/localization/localization.md +++ b/docs/data/data-grid/localization/localization.md @@ -7,7 +7,7 @@ The default locale of MUIΒ X is English (United States). If you want to use othe ## Translation keys You can use the `localeText` prop to pass in your own text and translations. -You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/-/packages/grid/x-data-grid/src/constants/localeTextConstants.ts) +You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/-/packages/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository. In the following example, the labels of the density selector are customized. @@ -99,7 +99,7 @@ import { nlNL } from '@mui/x-data-grid/locales'; {{"demo": "DataGridLocalisationTableNoSnap.js", "hideToolbar": true, "bg": "inline"}} -You can [find the source](https://github.com/mui/mui-x/tree/HEAD/packages/grid/x-data-grid/src/locales) in the GitHub repository. +You can [find the source](https://github.com/mui/mui-x/tree/HEAD/packages/x-data-grid/src/locales) in the GitHub repository. To create your own translation or to customize the English text, copy this file to your project, make any changes needed and import the locale from there. Note that these translations of the Data Grid component depend on the [Localization strategy](/material-ui/guides/localization/) of the whole library. @@ -107,7 +107,7 @@ Note that these translations of the Data Grid component depend on the [Localizat ## RTL Support Right-to-left languages such as Arabic, Persian, or Hebrew are supported. -Follow [this guide](/material-ui/guides/right-to-left/) to use them. +Follow [this guide](/material-ui/customization/right-to-left/) to use them. The example below demonstrates how to use an RTL language (Arabic) with the data grid. diff --git a/docs/data/data-grid/overview/overview.md b/docs/data/data-grid/overview/overview.md index f25f826b0a48b..8f6051360e5f7 100644 --- a/docs/data/data-grid/overview/overview.md +++ b/docs/data/data-grid/overview/overview.md @@ -109,7 +109,7 @@ You can find more details on, the [feature comparison](/x/react-data-grid/gettin Here are some resources you might be interested in to learn more about the data grid: -- The [source on GitHub](https://github.com/mui/mui-x/blob/-/packages/) +- The [source on GitHub](https://github.com/mui/mui-x/tree/HEAD/packages/) - The [Material Design specification](https://m2.material.io/components/data-tables) specification - The accessibility [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) - The Figma, Adobe XD, and Sketch [design kits](https://mui.com/design-kits/). diff --git a/docs/data/data-grid/pagination/pagination.md b/docs/data/data-grid/pagination/pagination.md index 397fdf04ce411..eebea559626f3 100644 --- a/docs/data/data-grid/pagination/pagination.md +++ b/docs/data/data-grid/pagination/pagination.md @@ -33,7 +33,7 @@ You should provide an array of items, each item should be one of these types: Use the `autoPageSize` prop to auto-scale the `pageSize` to match the container height and the max number of rows that can be displayed without a vertical scroll bar. :::warning -You can't use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`. +You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`. ::: {{"demo": "PageSizeAuto.js", "bg": "inline"}} @@ -42,7 +42,7 @@ You can't use both the `autoPageSize` and `autoHeight` props at the same time be The default pagination behavior depends on your plan. -- On the `DataGrid`, pagination is enabled by default and can't be disabled. +- On the `DataGrid`, pagination is enabled by default and cannot be disabled. - On the `DataGridPro` and `DataGridPremium`, pagination is disabled by default; use the `pagination` prop to enable it. The following example activates pagination on a `DataGridPremium` component. diff --git a/docs/data/data-grid/row-grouping/row-grouping.md b/docs/data/data-grid/row-grouping/row-grouping.md index 2935b2ad9861b..a8a5c8ae0b23a 100644 --- a/docs/data/data-grid/row-grouping/row-grouping.md +++ b/docs/data/data-grid/row-grouping/row-grouping.md @@ -187,7 +187,7 @@ It will disable all the features related to the row grouping, even if a model is ### For some columns In case you need to disable grouping on specific column(s), set the `groupable` property on the respective column definition (`GridColDef`) to `false`. -In the example below, the `director` column can not be grouped. And in all example, the `title` and `gross` columns can not be grouped. +In the example below, the `director` column cannot be grouped. In all examples, the `title` and `gross` columns cannot be grouped. {{"demo": "RowGroupingColDefCanBeGrouped.js", "bg": "inline", "defaultCodeOpen": false}} diff --git a/docs/data/data-grid/row-updates/InfiniteLoadingGrid.tsx b/docs/data/data-grid/row-updates/InfiniteLoadingGrid.tsx index f25f0c832f9b2..7ab60d8647492 100644 --- a/docs/data/data-grid/row-updates/InfiniteLoadingGrid.tsx +++ b/docs/data/data-grid/row-updates/InfiniteLoadingGrid.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { DataGridPro, DataGridProProps } from '@mui/x-data-grid-pro'; +import { DataGridPro, DataGridProProps, GridSlots } from '@mui/x-data-grid-pro'; import { useDemoData, getRealGridData, @@ -61,7 +61,7 @@ export default function InfiniteLoadingGrid() { hideFooterPagination onRowsScrollEnd={handleOnRowsScrollEnd} slots={{ - loadingOverlay: LinearProgress, + loadingOverlay: LinearProgress as GridSlots['loadingOverlay'], }} />
diff --git a/docs/data/data-grid/row-updates/InfiniteLoadingGrid.tsx.preview b/docs/data/data-grid/row-updates/InfiniteLoadingGrid.tsx.preview index db0cc47aa7911..d8a614229f5c7 100644 --- a/docs/data/data-grid/row-updates/InfiniteLoadingGrid.tsx.preview +++ b/docs/data/data-grid/row-updates/InfiniteLoadingGrid.tsx.preview @@ -5,6 +5,6 @@ hideFooterPagination onRowsScrollEnd={handleOnRowsScrollEnd} slots={{ - loadingOverlay: LinearProgress, + loadingOverlay: LinearProgress as GridSlots['loadingOverlay'], }} /> \ No newline at end of file diff --git a/docs/data/data-grid/state/RestoreStateInitialState.tsx b/docs/data/data-grid/state/RestoreStateInitialState.tsx index 7e576cec4eb9b..d953a4a8e5a50 100644 --- a/docs/data/data-grid/state/RestoreStateInitialState.tsx +++ b/docs/data/data-grid/state/RestoreStateInitialState.tsx @@ -5,6 +5,7 @@ import Stack from '@mui/material/Stack'; import { DataGridPro, GridInitialState, + GridSlots, GridToolbarContainer, GridToolbarDensitySelector, GridToolbarFilterButton, @@ -62,7 +63,7 @@ export default function RestoreStateInitialState() {
diff --git a/docs/data/data-grid/state/RestoreStateInitialState.tsx.preview b/docs/data/data-grid/state/RestoreStateInitialState.tsx.preview index cb7e99c92deb1..a02338eabb0bb 100644 --- a/docs/data/data-grid/state/RestoreStateInitialState.tsx.preview +++ b/docs/data/data-grid/state/RestoreStateInitialState.tsx.preview @@ -2,7 +2,7 @@ diff --git a/docs/data/date-pickers/adapters-locale/adapters-locale.md b/docs/data/date-pickers/adapters-locale/adapters-locale.md index 5bb45bacae465..8d08042c202ba 100644 --- a/docs/data/date-pickers/adapters-locale/adapters-locale.md +++ b/docs/data/date-pickers/adapters-locale/adapters-locale.md @@ -43,7 +43,7 @@ For `date-fns`, import the locale and pass it to `LocalizationProvider`: :::info Both `date-fns` major versions (v2.x and v3.x) are supported. -A single adapter can not work for both `date-fns` v2.x and v3.x, because the way functions are exported has been changed in v3.x. +A single adapter cannot work for both `date-fns` v2.x and v3.x, because the way functions are exported has been changed in v3.x. To use `date-fns` v3.x, you will have to import the adapter from `@mui/x-date-pickers/AdapterDateFnsV3` instead of `@mui/x-date-pickers/AdapterDateFns`. ::: diff --git a/docs/data/date-pickers/custom-field/WrappedSingleInputDateRangePicker.tsx b/docs/data/date-pickers/custom-field/WrappedSingleInputDateRangePicker.tsx index 6e104e4b67779..a7f000683fc7c 100644 --- a/docs/data/date-pickers/custom-field/WrappedSingleInputDateRangePicker.tsx +++ b/docs/data/date-pickers/custom-field/WrappedSingleInputDateRangePicker.tsx @@ -8,8 +8,9 @@ import { SingleInputDateRangeFieldProps, } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; -type FieldComponent = (( +type FieldComponent = (( props: SingleInputDateRangeFieldProps & React.RefAttributes, ) => React.JSX.Element) & { fieldType?: string }; diff --git a/docs/data/date-pickers/date-calendar/date-calendar.md b/docs/data/date-pickers/date-calendar/date-calendar.md index c4c43811e4a3e..f8dfa6e61c3aa 100644 --- a/docs/data/date-pickers/date-calendar/date-calendar.md +++ b/docs/data/date-pickers/date-calendar/date-calendar.md @@ -95,10 +95,10 @@ The following demo shows how to add a badge on some day based on server side dat {{"demo": "DateCalendarServerRequest.js"}} -## Validation +## Localization -You can find the documentation in the [Validation page](/x/react-date-pickers/validation/). +See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details. -## Localization +## Validation -You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/). +See the [Validation](/x/react-date-pickers/validation/) documentation page for more details. diff --git a/docs/data/date-pickers/date-field/CustomDateFormat.js b/docs/data/date-pickers/date-field/CustomDateFormat.js index 44a9ce3fd9034..1e0e073f8eb4f 100644 --- a/docs/data/date-pickers/date-field/CustomDateFormat.js +++ b/docs/data/date-pickers/date-field/CustomDateFormat.js @@ -6,21 +6,17 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { DateField } from '@mui/x-date-pickers/DateField'; export default function CustomDateFormat() { - const [value, setValue] = React.useState(dayjs('2022-04-17')); - return ( setValue(newValue)} + defaultValue={dayjs('2022-04-17')} format="MM-DD-YYYY" /> setValue(newValue)} + defaultValue={dayjs('2022-04-17')} format="LL" /> diff --git a/docs/data/date-pickers/date-field/CustomDateFormat.tsx b/docs/data/date-pickers/date-field/CustomDateFormat.tsx index d4da1d646da77..1e0e073f8eb4f 100644 --- a/docs/data/date-pickers/date-field/CustomDateFormat.tsx +++ b/docs/data/date-pickers/date-field/CustomDateFormat.tsx @@ -1,26 +1,22 @@ import * as React from 'react'; import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; -import dayjs, { Dayjs } from 'dayjs'; +import dayjs from 'dayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { DateField } from '@mui/x-date-pickers/DateField'; export default function CustomDateFormat() { - const [value, setValue] = React.useState(dayjs('2022-04-17')); - return ( setValue(newValue)} + defaultValue={dayjs('2022-04-17')} format="MM-DD-YYYY" /> setValue(newValue)} + defaultValue={dayjs('2022-04-17')} format="LL" /> diff --git a/docs/data/date-pickers/date-field/CustomDateFormat.tsx.preview b/docs/data/date-pickers/date-field/CustomDateFormat.tsx.preview index eaf19d92caf1d..11be65ef4fcf0 100644 --- a/docs/data/date-pickers/date-field/CustomDateFormat.tsx.preview +++ b/docs/data/date-pickers/date-field/CustomDateFormat.tsx.preview @@ -1,12 +1,10 @@ setValue(newValue)} + defaultValue={dayjs('2022-04-17')} format="MM-DD-YYYY" /> setValue(newValue)} + defaultValue={dayjs('2022-04-17')} format="LL" /> \ No newline at end of file diff --git a/docs/data/date-pickers/date-field/date-field.md b/docs/data/date-pickers/date-field/date-field.md index 9c7db8b60ebfe..39c4f51b8a5fb 100644 --- a/docs/data/date-pickers/date-field/date-field.md +++ b/docs/data/date-pickers/date-field/date-field.md @@ -28,15 +28,18 @@ The value of the component can be uncontrolled or controlled. Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). ::: -## Customize the date format +## Localization -{{"demo": "CustomDateFormat.js"}} +See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details. -## Localization +### Customize the date format -Use the `LocalizationProvider` to change the date-library locale used in the time field. -See the [localization documentation page](/x/react-date-pickers/localization/) for more details. +{{"demo": "CustomDateFormat.js"}} + +:::info +See [Date format and localizationβ€”Custom formats](/x/react-date-pickers/adapters-locale/#custom-formats) for more details. +::: ## Validation -See the documentation page [validation documentation page](/x/react-date-pickers/validation/) for more details. +See the [Validation](/x/react-date-pickers/validation/) documentation page for more details. diff --git a/docs/data/date-pickers/date-picker/date-picker.md b/docs/data/date-pickers/date-picker/date-picker.md index 85018f5efc0bb..e371e8afcf7a0 100644 --- a/docs/data/date-pickers/date-picker/date-picker.md +++ b/docs/data/date-pickers/date-picker/date-picker.md @@ -112,13 +112,13 @@ You can enable the clearable behavior: {{"demo": "ClearableProp.js"}} -## Validation +## Localization -You can find the documentation in the [Validation page](/x/react-date-pickers/validation/). +See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details. -## Localization +## Validation -You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/). +See the [Validation](/x/react-date-pickers/validation/) documentation page for more details. ## Customization diff --git a/docs/data/date-pickers/date-range-calendar/date-range-calendar.md b/docs/data/date-pickers/date-range-calendar/date-range-calendar.md index 361358446f613..06f3f0d8d7cab 100644 --- a/docs/data/date-pickers/date-range-calendar/date-range-calendar.md +++ b/docs/data/date-pickers/date-range-calendar/date-range-calendar.md @@ -54,10 +54,10 @@ You can take advantage of the [DateRangePickerDay](/x/api/date-pickers/date-rang {{"demo": "CustomDateRangePickerDay.js"}} -## Validation +## Localization -You can find the documentation in the [Validation page](/x/react-date-pickers/validation/). +See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details. -## Localization +## Validation -You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/). +See the [Validation](/x/react-date-pickers/validation/) documentation page for more details. diff --git a/docs/data/date-pickers/date-range-field/date-range-field.md b/docs/data/date-pickers/date-range-field/date-range-field.md index 1ffd35d53c541..d81bf367ba37a 100644 --- a/docs/data/date-pickers/date-range-field/date-range-field.md +++ b/docs/data/date-pickers/date-range-field/date-range-field.md @@ -34,3 +34,11 @@ The value of the component can be uncontrolled or controlled. Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). ::: + +## Localization + +See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details. + +## Validation + +See the [Validation](/x/react-date-pickers/validation/) documentation page for more details. diff --git a/docs/data/date-pickers/date-range-picker/date-range-picker.md b/docs/data/date-pickers/date-range-picker/date-range-picker.md index 55f7b8c7a6546..b9662a672402c 100644 --- a/docs/data/date-pickers/date-range-picker/date-range-picker.md +++ b/docs/data/date-pickers/date-range-picker/date-range-picker.md @@ -102,9 +102,13 @@ To simplify range selection, you can add [shortcuts](/x/react-date-pickers/short You can find the documentation in the [Custom field page](/x/react-date-pickers/custom-field/). +## Localization + +See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details. + ## Validation -You can find the documentation in the [Validation page](/x/react-date-pickers/validation/). +See the [Validation](/x/react-date-pickers/validation/) documentation page for more details. ## Month Range Picker 🚧 diff --git a/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.js b/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.js index d133317abc68f..c1a035f613efc 100644 --- a/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.js +++ b/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.js @@ -6,8 +6,6 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { DateTimeField } from '@mui/x-date-pickers/DateTimeField'; export default function CustomDateTimeFormat() { - const [value, setValue] = React.useState(dayjs('2022-04-17T15:30')); - return ( setValue(newValue)} + defaultValue={dayjs('2022-04-17T15:30')} format="L hh:mm a" /> setValue(newValue)} + defaultValue={dayjs('2022-04-17T15:30')} format="L HH:mm" /> setValue(newValue)} + defaultValue={dayjs('2022-04-17T15:30')} format="LLL" /> diff --git a/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.tsx b/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.tsx index 3cda7812ec614..c1a035f613efc 100644 --- a/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.tsx +++ b/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.tsx @@ -1,13 +1,11 @@ import * as React from 'react'; -import dayjs, { Dayjs } from 'dayjs'; +import dayjs from 'dayjs'; import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { DateTimeField } from '@mui/x-date-pickers/DateTimeField'; export default function CustomDateTimeFormat() { - const [value, setValue] = React.useState(dayjs('2022-04-17T15:30')); - return ( setValue(newValue)} + defaultValue={dayjs('2022-04-17T15:30')} format="L hh:mm a" /> setValue(newValue)} + defaultValue={dayjs('2022-04-17T15:30')} format="L HH:mm" /> setValue(newValue)} + defaultValue={dayjs('2022-04-17T15:30')} format="LLL" /> diff --git a/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.tsx.preview b/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.tsx.preview new file mode 100644 index 0000000000000..311732f62ee9b --- /dev/null +++ b/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.tsx.preview @@ -0,0 +1,15 @@ + + + \ No newline at end of file diff --git a/docs/data/date-pickers/date-time-field/date-time-field.md b/docs/data/date-pickers/date-time-field/date-time-field.md index 33fb877cc5efb..f6efa09212a81 100644 --- a/docs/data/date-pickers/date-time-field/date-time-field.md +++ b/docs/data/date-pickers/date-time-field/date-time-field.md @@ -28,15 +28,18 @@ The value of the component can be uncontrolled or controlled. Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). ::: -## Customize the date time format +## Localization -{{"demo": "CustomDateTimeFormat.js"}} +See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details. -## Localization +### Customize the date time format -Use the `LocalizationProvider` to change the date-library locale used in the date time field. -See the [localization documentation page](/x/react-date-pickers/localization/) for more details. +{{"demo": "CustomDateTimeFormat.js"}} + +:::info +See [Date format and localizationβ€”Custom formats](/x/react-date-pickers/adapters-locale/#custom-formats) for more details. +::: ## Validation -See the documentation page [validation documentation page](/x/react-date-pickers/validation/) for more details. +See the [Validation](/x/react-date-pickers/validation/) documentation page for more details. diff --git a/docs/data/date-pickers/date-time-picker/date-time-picker.md b/docs/data/date-pickers/date-time-picker/date-time-picker.md index 15f6c45a5a151..c2ba925d76bc6 100644 --- a/docs/data/date-pickers/date-time-picker/date-time-picker.md +++ b/docs/data/date-pickers/date-time-picker/date-time-picker.md @@ -110,10 +110,10 @@ You might be interested in using the [Time Clock](/x/react-date-pickers/time-clo {{"demo": "DateTimePickerViewRenderers.js"}} -## Validation +## Localization -You can find the documentation in the [Validation page](/x/react-date-pickers/validation/). +See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details. -## Localization +## Validation -You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/). +See the [Validation](/x/react-date-pickers/validation/) documentation page for more details. diff --git a/docs/data/date-pickers/date-time-range-field/date-time-range-field.md b/docs/data/date-pickers/date-time-range-field/date-time-range-field.md index 98a5a0c459f04..378abff09ee83 100644 --- a/docs/data/date-pickers/date-time-range-field/date-time-range-field.md +++ b/docs/data/date-pickers/date-time-range-field/date-time-range-field.md @@ -34,3 +34,11 @@ The value of the component can be uncontrolled or controlled. Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). ::: + +## Localization + +See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details. + +## Validation + +See the [Validation](/x/react-date-pickers/validation/) documentation page for more details. diff --git a/docs/data/date-pickers/date-time-range-picker/date-time-range-picker.md b/docs/data/date-pickers/date-time-range-picker/date-time-range-picker.md index 277748cf49177..68121e182a38e 100644 --- a/docs/data/date-pickers/date-time-range-picker/date-time-range-picker.md +++ b/docs/data/date-pickers/date-time-range-picker/date-time-range-picker.md @@ -100,6 +100,10 @@ You can pass a different view renderer to the Date Time Range Picker to customiz {{"demo": "DateTimeRangePickerViewRenderer.js"}} +## Localization + +See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details. + ## Validation -You can find the documentation in the [Validation page](/x/react-date-pickers/validation/). +See the [Validation](/x/react-date-pickers/validation/) documentation page for more details. diff --git a/docs/data/date-pickers/digital-clock/digital-clock.md b/docs/data/date-pickers/digital-clock/digital-clock.md index d545babc4e7ad..535650aecf9c7 100644 --- a/docs/data/date-pickers/digital-clock/digital-clock.md +++ b/docs/data/date-pickers/digital-clock/digital-clock.md @@ -86,6 +86,10 @@ The following example combines these properties to customize which options are r {{"demo": "DigitalClockSkipDisabled.js"}} +## Localization + +See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details. + ## Validation -You can find the documentation in the [Validation page](/x/react-date-pickers/validation/). +See the [Validation](/x/react-date-pickers/validation/) documentation page for more details. diff --git a/docs/data/date-pickers/faq/faq.md b/docs/data/date-pickers/faq/faq.md index 14fc9192067e9..761a8e798b823 100644 --- a/docs/data/date-pickers/faq/faq.md +++ b/docs/data/date-pickers/faq/faq.md @@ -23,7 +23,7 @@ You should never use these components in your application. ## Why is the KeyboardDatePicker not supported anymore? -It has been replaced with the `DatePicker` component, please refer to the [migration documentation](/material-ui/guides/pickers-migration/#imports) for more information. +It has been replaced with the `DatePicker` component, please refer to the [migration documentation](/material-ui/migration/pickers-migration/#imports) for more information. All versions of the date and time pickers implement keyboard input for accessibility and also allow editing through the UI. Depending on your use case, you may only need keyboard editing, in which case you can use the date and time field components. diff --git a/docs/data/date-pickers/getting-started/getting-started.md b/docs/data/date-pickers/getting-started/getting-started.md index 7a42400ed76ef..ce67d380a66f1 100644 --- a/docs/data/date-pickers/getting-started/getting-started.md +++ b/docs/data/date-pickers/getting-started/getting-started.md @@ -76,7 +76,7 @@ pnpm add @mui/styled-engine-sc styled-components -Take a look at the [Styled engine guide](/material-ui/guides/styled-components/) for more information about how to configure `styled-components` as the style engine. +Take a look at the [Styled engine guide](/material-ui/integrations/styled-components/) for more information about how to configure `styled-components` as the style engine. ## Setup your date library adapter diff --git a/docs/data/date-pickers/lifecycle/LifeCycleDateFieldEmpty.js b/docs/data/date-pickers/lifecycle/LifeCycleDateFieldEmpty.js index ff6c9544090e2..3ed120732789b 100644 --- a/docs/data/date-pickers/lifecycle/LifeCycleDateFieldEmpty.js +++ b/docs/data/date-pickers/lifecycle/LifeCycleDateFieldEmpty.js @@ -12,7 +12,7 @@ export default function LifeCycleDateFieldEmpty() { return ( - setValue(newValue)} /> + Value: {value == null ? 'null' : value.format('L')} diff --git a/docs/data/date-pickers/lifecycle/LifeCycleDateFieldEmpty.tsx b/docs/data/date-pickers/lifecycle/LifeCycleDateFieldEmpty.tsx index 22fafe61283b9..6444023122b6b 100644 --- a/docs/data/date-pickers/lifecycle/LifeCycleDateFieldEmpty.tsx +++ b/docs/data/date-pickers/lifecycle/LifeCycleDateFieldEmpty.tsx @@ -12,7 +12,7 @@ export default function LifeCycleDateFieldEmpty() { return ( - setValue(newValue)} /> + Value: {value == null ? 'null' : value.format('L')} diff --git a/docs/data/date-pickers/lifecycle/LifeCycleDateFieldEmpty.tsx.preview b/docs/data/date-pickers/lifecycle/LifeCycleDateFieldEmpty.tsx.preview index 7f22674742a9f..1746e78fd888d 100644 --- a/docs/data/date-pickers/lifecycle/LifeCycleDateFieldEmpty.tsx.preview +++ b/docs/data/date-pickers/lifecycle/LifeCycleDateFieldEmpty.tsx.preview @@ -1,4 +1,4 @@ - setValue(newValue)} /> + Value: {value == null ? 'null' : value.format('L')} \ No newline at end of file diff --git a/docs/data/date-pickers/lifecycle/LifeCycleDateRangeField.js b/docs/data/date-pickers/lifecycle/LifeCycleDateRangeField.js index a77c9d6d5abf8..ff34833efbb6a 100644 --- a/docs/data/date-pickers/lifecycle/LifeCycleDateRangeField.js +++ b/docs/data/date-pickers/lifecycle/LifeCycleDateRangeField.js @@ -14,10 +14,7 @@ export default function LifeCycleDateRangeField() { - setValue(newValue)} - /> + diff --git a/docs/data/date-pickers/lifecycle/LifeCycleDateRangeField.tsx b/docs/data/date-pickers/lifecycle/LifeCycleDateRangeField.tsx index f6cae364e97b8..8bab9a5ad4607 100644 --- a/docs/data/date-pickers/lifecycle/LifeCycleDateRangeField.tsx +++ b/docs/data/date-pickers/lifecycle/LifeCycleDateRangeField.tsx @@ -9,7 +9,7 @@ import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDa import { DateRange } from '@mui/x-date-pickers-pro/models'; export default function LifeCycleDateRangeField() { - const [value, setValue] = React.useState>([ + const [value, setValue] = React.useState>([ dayjs('2022-04-17'), null, ]); @@ -18,10 +18,7 @@ export default function LifeCycleDateRangeField() { - setValue(newValue)} - /> + diff --git a/docs/data/date-pickers/lifecycle/LifeCycleDateRangeField.tsx.preview b/docs/data/date-pickers/lifecycle/LifeCycleDateRangeField.tsx.preview index 90f4a115ac5da..4cce05110e86b 100644 --- a/docs/data/date-pickers/lifecycle/LifeCycleDateRangeField.tsx.preview +++ b/docs/data/date-pickers/lifecycle/LifeCycleDateRangeField.tsx.preview @@ -1,9 +1,6 @@ - setValue(newValue)} - /> + diff --git a/docs/data/date-pickers/time-clock/time-clock.md b/docs/data/date-pickers/time-clock/time-clock.md index 4e7a100a7579f..042a32a60af5a 100644 --- a/docs/data/date-pickers/time-clock/time-clock.md +++ b/docs/data/date-pickers/time-clock/time-clock.md @@ -54,6 +54,10 @@ You can find more information about 12h/24h format in the [Date localization pag {{"demo": "TimeClockAmPm.js"}} +## Localization + +See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details. + ## Validation -You can find the documentation in the [Validation page](/x/react-date-pickers/validation/). +See the [Validation](/x/react-date-pickers/validation/) documentation page for more details. diff --git a/docs/data/date-pickers/time-field/CustomTimeFormat.js b/docs/data/date-pickers/time-field/CustomTimeFormat.js index eb0ce966cc0b7..abd0fea47a3a4 100644 --- a/docs/data/date-pickers/time-field/CustomTimeFormat.js +++ b/docs/data/date-pickers/time-field/CustomTimeFormat.js @@ -6,27 +6,22 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { TimeField } from '@mui/x-date-pickers/TimeField'; export default function CustomTimeFormat() { - const [value, setValue] = React.useState(dayjs('2022-04-17T15:30')); - return ( setValue(newValue)} + defaultValue={dayjs('2022-04-17T15:30')} format="hh:mm a" /> setValue(newValue)} + defaultValue={dayjs('2022-04-17T15:30')} format="HH:mm" /> setValue(newValue)} + defaultValue={dayjs('2022-04-17T15:30')} format="HH:mm:ss" /> diff --git a/docs/data/date-pickers/time-field/CustomTimeFormat.tsx b/docs/data/date-pickers/time-field/CustomTimeFormat.tsx index 8928647c5b3ca..abd0fea47a3a4 100644 --- a/docs/data/date-pickers/time-field/CustomTimeFormat.tsx +++ b/docs/data/date-pickers/time-field/CustomTimeFormat.tsx @@ -1,32 +1,27 @@ import * as React from 'react'; -import dayjs, { Dayjs } from 'dayjs'; +import dayjs from 'dayjs'; import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { TimeField } from '@mui/x-date-pickers/TimeField'; export default function CustomTimeFormat() { - const [value, setValue] = React.useState(dayjs('2022-04-17T15:30')); - return ( setValue(newValue)} + defaultValue={dayjs('2022-04-17T15:30')} format="hh:mm a" /> setValue(newValue)} + defaultValue={dayjs('2022-04-17T15:30')} format="HH:mm" /> setValue(newValue)} + defaultValue={dayjs('2022-04-17T15:30')} format="HH:mm:ss" /> diff --git a/docs/data/date-pickers/time-field/CustomTimeFormat.tsx.preview b/docs/data/date-pickers/time-field/CustomTimeFormat.tsx.preview new file mode 100644 index 0000000000000..d82a4aeb479bb --- /dev/null +++ b/docs/data/date-pickers/time-field/CustomTimeFormat.tsx.preview @@ -0,0 +1,15 @@ + + + \ No newline at end of file diff --git a/docs/data/date-pickers/time-field/time-field.md b/docs/data/date-pickers/time-field/time-field.md index 9521a56f84990..8aa989cb60119 100644 --- a/docs/data/date-pickers/time-field/time-field.md +++ b/docs/data/date-pickers/time-field/time-field.md @@ -28,15 +28,18 @@ The value of the component can be uncontrolled or controlled. Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). ::: -## Customize the time format +## Localization -{{"demo": "CustomTimeFormat.js"}} +See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details. -## Localization +### Customize the time format -Use the `LocalizationProvider` to change the date-library locale used in the date field. -See the [localization documentation page](/x/react-date-pickers/localization/) for more details. +{{"demo": "CustomTimeFormat.js"}} + +:::info +See [Date format and localizationβ€”Custom formats](/x/react-date-pickers/adapters-locale/#custom-formats) for more details. +::: ## Validation -See the documentation page [validation documentation page](/x/react-date-pickers/validation/) for more details. +See the [Validation](/x/react-date-pickers/validation/) documentation page for more details. diff --git a/docs/data/date-pickers/time-picker/time-picker.md b/docs/data/date-pickers/time-picker/time-picker.md index ed5d6492e8e2b..f936642668ff9 100644 --- a/docs/data/date-pickers/time-picker/time-picker.md +++ b/docs/data/date-pickers/time-picker/time-picker.md @@ -108,6 +108,10 @@ You might be interested in using the [Time Clock](/x/react-date-pickers/time-clo {{"demo": "TimePickerViewRenderers.js"}} +## Localization + +See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details. + ## Validation -You can find the documentation in the [Validation page](/x/react-date-pickers/validation/). +See the [Validation](/x/react-date-pickers/validation/) documentation page for more details. diff --git a/docs/data/date-pickers/time-range-field/time-range-field.md b/docs/data/date-pickers/time-range-field/time-range-field.md index 2ca2beb1a1658..8ba850ecfd50c 100644 --- a/docs/data/date-pickers/time-range-field/time-range-field.md +++ b/docs/data/date-pickers/time-range-field/time-range-field.md @@ -34,3 +34,11 @@ The value of the component can be uncontrolled or controlled. Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). ::: + +## Localization + +See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details. + +## Validation + +See the [Validation](/x/react-date-pickers/validation/) documentation page for more details. diff --git a/docs/data/date-pickers/validation/validation.md b/docs/data/date-pickers/validation/validation.md index 4dbbe7f5467cd..427ae2bfa1df1 100644 --- a/docs/data/date-pickers/validation/validation.md +++ b/docs/data/date-pickers/validation/validation.md @@ -118,7 +118,7 @@ Please note that `shouldDisableDate` will execute on every date rendered in the For components supporting date range edition (`DateRangePicker`, `DateTimeRangePicker`)β€”the `shouldDisableDate` prop receives a second argument to differentiate the start and the end date. -In the example belowβ€”the start date can't be in the weekend but the end date can. +In the example belowβ€”the start date cannot be in the weekend but the end date can. {{"demo": "DateRangeValidationShouldDisableDate.js", "defaultCodeOpen": false}} diff --git a/docs/data/introduction/licensing/licensing.md b/docs/data/introduction/licensing/licensing.md index 2176ffb9e7b2a..97436b7302853 100644 --- a/docs/data/introduction/licensing/licensing.md +++ b/docs/data/introduction/licensing/licensing.md @@ -137,11 +137,11 @@ If this isn't possible, please contact sales@mui.com to request a compatible lic ### How to install the key -The license key depends on a package called `@mui/x-license-{plan}` that validates whether or not it's active. +The license key depends on a package called `@mui/x-license` that validates whether or not it's active. Once you have your license key, import the `LicenseInfo` method from that package and call the `setLicenseKey()` function: ```jsx -import { LicenseInfo } from '@mui/x-license-pro'; +import { LicenseInfo } from '@mui/x-license'; LicenseInfo.setLicenseKey('YOUR_LICENSE_KEY'); ``` @@ -164,8 +164,7 @@ When using Next.js App Router, you have multiple options to install the license ```tsx 'use client'; - -import { LicenseInfo } from '@mui/x-license-pro'; +import { LicenseInfo } from '@mui/x-license'; LicenseInfo.setLicenseKey('YOUR_LICENSE_KEY'); ``` @@ -174,8 +173,7 @@ LicenseInfo.setLicenseKey('YOUR_LICENSE_KEY'); ```tsx 'use client'; - -import { LicenseInfo } from '@mui/x-license-pro'; +import { LicenseInfo } from '@mui/x-license'; LicenseInfo.setLicenseKey('YOUR_LICENSE_KEY'); @@ -206,7 +204,7 @@ export default function RootLayout(props: { children: React.ReactNode }) { When using Next.js pages, a great place to call `setLicenseKey` is in [`_app.js`](https://nextjs.org/docs/pages/building-your-application/routing/custom-app). ```tsx -import { LicenseInfo } from '@mui/x-license-pro'; +import { LicenseInfo } from '@mui/x-license'; LicenseInfo.setLicenseKey('YOUR_LICENSE_KEY'); @@ -227,7 +225,7 @@ The license key is validated on the server and client side so you must expose th To do this, you need to prefix the environment variables with `NEXT_PUBLIC_` as explained in the [Next.js documentation](https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser): ```tsx -import { LicenseInfo } from '@mui/x-license-pro'; +import { LicenseInfo } from '@mui/x-license'; LicenseInfo.setLicenseKey(process.env.NEXT_PUBLIC_MUI_X_LICENSE_KEY); ``` @@ -256,10 +254,10 @@ This error indicates that your license key is missing. You might not be allowed The component will look something like this:
- +
- +
To solve the issue, you can check the [free trial conditions](#evaluation-trial-licenses), if you are eligible no actions are required. diff --git a/docs/data/introduction/support/support.md b/docs/data/introduction/support/support.md index 5c1d49e2875b5..e69ae612519fa 100644 --- a/docs/data/introduction/support/support.md +++ b/docs/data/introduction/support/support.md @@ -21,6 +21,32 @@ If you think you've found a bug, or you have a new feature idea: - Please don't group multiple topics in one issue. - Please don't comment "+1" on an issue. It spams the maintainers and doesn't help move the issue forward. Use GitHub reactions instead (πŸ‘). +### Bug reproductions + +We require bug reports to be accompanied by a **minimal reproduction**. +It significantly increases the odds of fixing the problem. +You have a few possible options to provide it: + +- You can browse the documentation, find an example close to your use case, and then open it in a live editor: + + + Forking an example + + + Forking an example + + + + - [Data Grid](/x/react-data-grid/#mit-version-free-forever) + - [Date Pickers](/x/react-date-pickers/getting-started/#render-your-first-component) + - [Charts](/x/react-charts/getting-started/#single-charts) + - [Tree View](/x/react-tree-view/#simple-tree-view) + +- You can use a starter template to build a reproduction case with: + + - A minimal Data Grid [TypeScript template](https://stackblitz.com/github/mui/mui-x/tree/next/bug-reproductions/x-data-grid?file=src/index.tsx) + - A plain React [JavaScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react) or [TypeScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react-ts) template + ## Stack Overflow We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the MUIΒ X community as well as MUIΒ X maintainers. @@ -32,7 +58,7 @@ You can search through existing questions and answers to see if someone has aske - mui-x-date-picker - mui-x-charts -If you can't find your answer, [ask a new question](https://stackoverflow.com/questions/ask?tags=reactjs%20mui-x) using the relevant tags. +If you cannot find your answer, [ask a new question](https://stackoverflow.com/questions/ask?tags=reactjs%20mui-x) using the relevant tags. ## Technical support diff --git a/docs/data/migration/migration-charts-v6/migration-charts-v6.md b/docs/data/migration/migration-charts-v6/migration-charts-v6.md index e46e62858af1c..4586825ccc825 100644 --- a/docs/data/migration/migration-charts-v6/migration-charts-v6.md +++ b/docs/data/migration/migration-charts-v6/migration-charts-v6.md @@ -34,9 +34,22 @@ These changes were done for consistency, improved stability and to make room for ### Renaming +#### Types + Some types got renamed for coherence: | v6 | v7 | | :-------------------------------- | :----------------------- | | `ChartsTooltipSlotComponentProps` | `ChartsTooltipSlotProps` | | `ChartsTooltipSlotsComponent` | `ChartsTooltipSlots` | + +#### Props + +The Pie Chart `onClick` prop has been renamed `onItemClick` for consistency with other components. +The behavior of this prop remains the same. + +### Animation + +The Line Chart now have animation by default. +You can disable it with `skipAnimation` prop. +See [animation documentation](/x/react-charts/lines/#animation) for more information. diff --git a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md index 907ccdf3398a3..80cd8e7208217 100644 --- a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md +++ b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md @@ -19,6 +19,10 @@ In `package.json`, change the version of the data grid package to `next`. ```diff -"@mui/x-data-grid": "6.x.x", +"@mui/x-data-grid": "next", +-"@mui/x-data-grid-pro": "6.x.x", ++"@mui/x-data-grid-pro": "next", +-"@mui/x-data-grid-premium": "6.x.x", ++"@mui/x-data-grid-premium": "next", ``` Since v7 is a major release, it contains changes that affect the public API. @@ -31,6 +35,22 @@ To have the option of using the latest API from `@mui/material`, the package pee It is a change in minor version only, so it should not cause any breaking changes. Please update your `@mui/material` package to this or a newer version. +## Update the license package + +If you're using the commercial version of the Data Grid ([Pro](/x/introduction/licensing/#pro-plan) and [Premium](/x/introduction/licensing/#premium-plan) plans), you need to update the import path: + +```diff +-import { LicenseInfo } from '@mui/x-license-pro'; ++import { LicenseInfo } from '@mui/x-license'; +``` + +If you have `@mui/x-license-pro` in the `dependencies` section of your `package.json`, rename and update the license package to the latest version: + +```diff +-"@mui/x-license-pro": "6.x.x", ++"@mui/x-license": "next", +``` + ## Run codemods The `preset-safe` codemod will automatically adjust the bulk of your code to account for breaking changes in v7. @@ -41,12 +61,13 @@ You can either run it on a specific file, folder, or your entire codebase when c ```bash // Data Grid specific npx @mui/x-codemod@next v7.0.0/data-grid/preset-safe + // Target other MUIΒ X components as well npx @mui/x-codemod@next v7.0.0/preset-safe ``` :::info -If you want to run the codemods one by one, check out the codemods included in the [preset-safe codemod for data grid](https://github.com/mui/mui-x/blob/HEAD/packages/x-codemod/README.md#preset-safe-for-data-grid-v700) for more details. +If you want to run the codemods one by one, check out the codemods included in the [preset-safe codemod for the Data Grid](https://github.com/mui/mui-x/blob/HEAD/packages/x-codemod/README.md#preset-safe-for-data-grid-v700) for more details. ::: Breaking changes that are handled by `preset-safe` codemod are denoted by a βœ… emoji in the table of contents on the right side of the screen or next to the specific point that is handled by it. @@ -77,7 +98,8 @@ Below are described the steps you need to make to migrate from v6 to v7. ### DOM changes -The layout of the grid has been substantially altered to use CSS sticky positioned elements. As a result, the following changes have been made: +The Data Grid's layout has been substantially altered to use CSS sticky positioned elements. +As a result, the following changes have been made: - The main element now corresponds to the virtal scroller element. - Headers are now contained in the virtual scroller. @@ -114,24 +136,28 @@ The layout of the grid has been substantially altered to use CSS sticky position ### Behavioral changes -- The disabled column specific features like `hiding`, `sorting`, `filtering`, `pinning`, `row grouping`, etc could now be controlled programmatically using `initialState`, respective controlled models, or the [API object](/x/react-data-grid/api-object/). +The disabled column specific features like `hiding`, `sorting`, `filtering`, `pinning`, `row grouping`, etc., can now be controlled programmatically using `initialState`, respective controlled models, or the [API object](/x/react-data-grid/api-object/). -Here's the list of affected features, colDef flags and props to disable them and the related props and API methods to control them programmatically. +Here's the list of affected features, column definition flags and props to disable them, and the related props and API methods to control them programmatically. {{"demo": "ColDefChangesGridNoSnap.js", "bg": "inline", "hideToolbar": true}} ### State access -- Some selectors now require passing `instanceId` as a second argument: - ```diff - - gridColumnFieldsSelector(apiRef.current.state); - + gridColumnFieldsSelector(apiRef.current.state, apiRef.current.instanceId); - ``` - However, it's preferable to pass the `apiRef` as the first argument instead: - ```js - gridColumnFieldsSelector(apiRef); - ``` - See [Direct state access](/x/react-data-grid/state/#direct-selector-access) for more info. +Some selectors now require passing `instanceId` as a second argument: + +```diff +- gridColumnFieldsSelector(apiRef.current.state); ++ gridColumnFieldsSelector(apiRef.current.state, apiRef.current.instanceId); +``` + +However, it's preferable to pass the `apiRef` as the first argument instead: + +```js +gridColumnFieldsSelector(apiRef); +``` + +See the [Direct state access](/x/react-data-grid/state/#direct-selector-access) page for more info. | +- You can now style a row's hover state using just `:hover` instead of `.Mui-hovered`. +- The `.MuiDataGrid--pinnedColumns-(left\|right)` class for pinned columns has been removed. ### Changes to the public API @@ -457,5 +479,6 @@ Here's the list of affected features, colDef flags and props to disable them and - The slot `row` has had these props removed: `containerWidth`, `position`. - The slot `row` has typed props now. - The slot `headerFilterCell` has had these props removed: `filterOperators`. +- All slots are now strongly typed, previously were `React.JSXElementConstructor`. diff --git a/docs/data/migration/migration-pickers-v5/migration-pickers-v5.md b/docs/data/migration/migration-pickers-v5/migration-pickers-v5.md index 969f2b58acb91..67cdb7dab1d1c 100644 --- a/docs/data/migration/migration-pickers-v5/migration-pickers-v5.md +++ b/docs/data/migration/migration-pickers-v5/migration-pickers-v5.md @@ -268,7 +268,7 @@ The codemod will take care of renaming the prop to keep the existing functionali In v5, it was possible to import adapters either from either `@date-io` or `@mui/x-date-pickers` which were the same. In v6, the adapters are extended by `@mui/x-date-pickers` to support [fields components](/x/react-date-pickers/fields/). -Which means adapters can not be imported from `@date-io` anymore. They need to be imported from `@mui/x-date-pickers` or `@mui/x-date-pickers-pro`. +Which means adapters cannot be imported from `@date-io` anymore. They need to be imported from `@mui/x-date-pickers` or `@mui/x-date-pickers-pro`. Otherwise, some methods will be missing. If you do not find the adapter you were usingβ€”there probably was a reason for it, but you can raise an issue expressing interest in it. diff --git a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md index f2e4b8386a3fc..794dd85eb3684 100644 --- a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md +++ b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md @@ -31,6 +31,22 @@ To have the option of using the latest API from `@mui/material`, the package pee It is a change in minor version only, so it should not cause any breaking changes. Please update your `@mui/material` package to this or a newer version. +## Update the license package + +If you're using the commercial version of the Pickers ([Pro](/x/introduction/licensing/#pro-plan) plan), you need to update the import path: + +```diff +-import { LicenseInfo } from '@mui/x-license-pro'; ++import { LicenseInfo } from '@mui/x-license'; +``` + +If you have `@mui/x-license-pro` in the `dependencies` section of your `package.json`, rename and update the license package to the latest version: + +```diff +-"@mui/x-license-pro": "6.x.x", ++"@mui/x-license": "next", +``` + ## Run codemods The `preset-safe` codemod will automatically adjust the bulk of your code to account for breaking changes in v7. You can run `v7.0.0/pickers/preset-safe` targeting only Date and Time Pickers or `v7.0.0/preset-safe` to target Data Grid as well. diff --git a/docs/data/tree-view/getting-started/getting-started.md b/docs/data/tree-view/getting-started/getting-started.md index 5a6b9790c03df..9c1f3403a46ce 100644 --- a/docs/data/tree-view/getting-started/getting-started.md +++ b/docs/data/tree-view/getting-started/getting-started.md @@ -81,7 +81,7 @@ pnpm add @mui/styled-engine-sc styled-components -Take a look at the [Styled engine guide](/material-ui/guides/styled-components/) for more information about how to configure `styled-components` as the style engine. +Take a look at the [Styled engine guide](/material-ui/integrations/styled-components/) for more information about how to configure `styled-components` as the style engine. ## Render your first component diff --git a/docs/data/tree-view/overview/overview.md b/docs/data/tree-view/overview/overview.md index 0954679d90fc2..75a9f75fa7862 100644 --- a/docs/data/tree-view/overview/overview.md +++ b/docs/data/tree-view/overview/overview.md @@ -8,31 +8,36 @@ packageName: '@mui/x-tree-view' # MUIΒ X Tree View -

A Tree View widget presents a hierarchical list.

- -Tree views can be used to represent a file system navigator displaying folders and files, an item representing a folder can be expanded to reveal the contents of the folder, which may be files, folders, or both. +

The Tree View component lets users navigate hierarchical lists of data with nested levels that can be expanded and collapsed.

{{"component": "modules/components/ComponentLinkHeader.js"}} ## Available components -There are two versions of the Tree View available. +The MUI X Tree View package exposes two different versions of the component: + +### Simple Tree View -### SimpleTreeView +```jsx +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; +``` -The `SimpleTreeView` component receives its items as JSX children. -It is designed for simple use-cases where the items are hardcoded. +The simple version of the Tree View component receives its items as JSX children. +This is the recommended version for hardcoded items. {{"demo": "BasicSimpleTreeView.js"}} -:::warning -Most new advanced features won't be available on this component. -If you are waiting for features like editing or virtualization, you should use `RichTreeView` instead. -::: +### Rich Tree View -### RichTreeView +```jsx +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; +``` -The `RichTreeView` component receives its items through the `items` prop. -It is designed for more advanced use-cases where the items are dynamically loaded from a data source. +The rich version of the Tree View component receives its items dynamically from an external data source. +This is the recommended version for larger trees, as well as those that require more advanced features like editing and virtualization. {{"demo": "BasicRichTreeView.js"}} + +:::info +At the moment, the Simple and Rich Tree Views are similar in terms of feature support. But as the component grows, you can expect to see the more advanced ones appear primarily on the Rich Tree View. +::: diff --git a/docs/data/tree-view/rich-tree-view/items/items.md b/docs/data/tree-view/rich-tree-view/items/items.md index 04469b2a06dec..e85d35328c698 100644 --- a/docs/data/tree-view/rich-tree-view/items/items.md +++ b/docs/data/tree-view/rich-tree-view/items/items.md @@ -95,12 +95,12 @@ It could be achieved by either defining the prop outside the component scope or ::: :::warning -Unlike the `SimpleTreeView` component, the `RichTreeView` component only supports string labels, you can't pass React nodes to it. +Unlike the `SimpleTreeView` component, the `RichTreeView` component only supports string labels, you cannot pass React nodes to it. ::: ## Disabled items -You can disable some of the items using the `isItemDisabled` prop on the `RichTreeView` component: +Use the `isItemDisabled` prop on the Rich Tree View to disable interaction and focus on a Tree Item: ```tsx function isItemDisabled(item) { @@ -116,29 +116,27 @@ function isItemDisabled(item) { Just like the `items` prop, the `isItemDisabled` function should keep the same JavaScript reference between two renders. Otherwise, the Tree View will re-generate its entire structure. -It could be achieved by either defining the prop outside the component scope or by memoizing using the `React.useCallback` hook if the function reuses something from the component scope. +This can be achieved by either defining the prop outside the component scope or by memoizing using the `React.useCallback` hook if the function reuses something from the component scope. ::: -### Interact with disabled items +### The disabledItemsFocusable prop -The behavior of disabled tree items depends on the `disabledItemsFocusable` prop. +Use the `disabledItemsFocusable` prop to control whether or not a disabled Tree Item can be focused. -If it is false: +When this prop is set to false: -- Arrow keys will not focus disabled items, and the next non-disabled item will be focused. -- Typing the first character of a disabled item's label will not focus the item. +- Navigating with keyboard arrow keys will not focus the disabled items, and the next non-disabled item will be focused instead. +- Typing the first character of a disabled item's label will not move the focus to it. - Mouse or keyboard interaction will not expand/collapse disabled items. - Mouse or keyboard interaction will not select disabled items. -- Shift + arrow keys will skip disabled items, and the next non-disabled item will be selected. +- Shift + arrow keys will skip disabled items, and the next non-disabled item will be selected instead. - Programmatic focus will not focus disabled items. -If it is true: +When it's set to true: -- Arrow keys will focus disabled items. -- Typing the first character of a disabled item's label will focus the item. +- Navigating with keyboard arrow keys will focus disabled items. +- Typing the first character of a disabled item's label will move focus to it. - Mouse or keyboard interaction will not expand/collapse disabled items. - Mouse or keyboard interaction will not select disabled items. -- Shift + arrow keys will not skip disabled items but, the disabled item will not be selected. +- Shift + arrow keys will not skip disabled items, but the disabled item will not be selected. - Programmatic focus will focus disabled items. - -{{"demo": "DisabledItemsFocusable.js", "defaultCodeOpen": false}} diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.js b/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.js index bb582b7ff1176..c0286f0f82529 100644 --- a/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.js +++ b/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.js @@ -56,7 +56,7 @@ const CustomContent = React.forwardRef(function CustomContent(props, ref) { ref={ref} >
{icon}
- + ({ background: theme.palette.primary.main, diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.tsx b/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.tsx index 9c4a435d6f00c..25406d06419f6 100644 --- a/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.tsx +++ b/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.tsx @@ -64,7 +64,7 @@ const CustomContent = React.forwardRef(function CustomContent( ref={ref as React.Ref} >
{icon}
- + ({ background: theme.palette.primary.main, diff --git a/docs/data/tree-view/simple-tree-view/customization/customization.md b/docs/data/tree-view/simple-tree-view/customization/customization.md index d1e3341d80565..304c7d0d6ab1d 100644 --- a/docs/data/tree-view/simple-tree-view/customization/customization.md +++ b/docs/data/tree-view/simple-tree-view/customization/customization.md @@ -66,4 +66,7 @@ The demo below shows many of the previous customization examples brought togethe Google's Gmail side nav is potentially one of the web's most famous tree view components. The demo below shows how to replicate it. +The Gmail sidebar is one of the most well known examples of a tree view. +The demo below shows how to recreate it with the Tree View component: + {{"demo": "GmailTreeView.js"}} diff --git a/docs/data/tree-view/simple-tree-view/expansion/expansion.md b/docs/data/tree-view/simple-tree-view/expansion/expansion.md index e41a5a8d9b38a..f85949aa2b062 100644 --- a/docs/data/tree-view/simple-tree-view/expansion/expansion.md +++ b/docs/data/tree-view/simple-tree-view/expansion/expansion.md @@ -9,13 +9,12 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/ # Simple Tree View - Expansion -

Handle how users can expand items.

+

Learn how to handle expanding and collapsing Tree View items.

## Controlled expansion Use the `expandedNodes` prop to control the expanded items. - -You can use the `onExpandedNodesChange` prop to listen to changes in the expanded items and update the prop accordingly. +You can also use the `onExpandedNodesChange` prop to listen to changes in the expanded items and update the prop accordingly. {{"demo": "ControlledExpansion.js"}} @@ -29,6 +28,6 @@ Learn more about the _Controlled and uncontrolled_ pattern in the [React documen ## Track node expansion change -Use the `onNodeExpansionToggle` prop if you want to react to a node expansion change: +Use the `onNodeExpansionToggle` prop to trigger an action upon a node being expanded. {{"demo": "TrackNodeExpansionToggle.js"}} diff --git a/docs/data/tree-view/simple-tree-view/items/items.md b/docs/data/tree-view/simple-tree-view/items/items.md index b30d217b9b19e..a8b34551b20fe 100644 --- a/docs/data/tree-view/simple-tree-view/items/items.md +++ b/docs/data/tree-view/simple-tree-view/items/items.md @@ -9,68 +9,65 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/ # Simple Tree View - Items -

Pass data to your Tree View.

+

Learn how to add simple data to the Tree View component.

-## Basic usage +## Basics -The items can be defined as JSX children of the `SimpleTreeView` component: +```jsx +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; +import { TreeItem } from '@mui/x-tree-view/TreeItem'; +``` -{{"demo": "BasicSimpleTreeView.js"}} +The Simple Tree View component receives its items directly as JSX children. -## Item identifier +{{"demo": "BasicSimpleTreeView.js"}} -Each `TreeItem` must have a unique `nodeId`. +### Item identifier -This identifier is used internally to identify the item in the various models and to track the item across updates. +Each Tree Item must have a unique `nodeId`. +This is used internally to identify the item in the various models, and to track it across updates. ```tsx - + ``` -## Item label +### Item label -You must pass a `label` prop to each `TreeItem` component: +You must pass a `label` prop to each Tree Item component, as shown below: ```tsx - + ``` -## Disabled items +### Disabled items -You can disable some of the items using the `disabled` prop on the `TreeItem` component: +Use the `disabled` prop on the Tree Item component to disable interaction and focus: -```tsx - - - -``` - -{{"demo": "DisabledJSXItem.js", "defaultCodeOpen": false}} +{{"demo": "DisabledItemsFocusable.js", "defaultCodeOpen": false}} -### Interact with disabled items +#### The disabledItemsFocusable prop -The behavior of disabled tree items depends on the `disabledItemsFocusable` prop. +Note that the demo above also includes a switch. +This toggles the `disabledItemsFocusable` prop, which controls whether or not a disabled Tree Item can be focused. -If it is false: +When this prop is set to false: -- Arrow keys will not focus disabled items, and the next non-disabled item will be focused. -- Typing the first character of a disabled item's label will not focus the item. +- Navigating with keyboard arrow keys will not focus the disabled items, and the next non-disabled item will be focused instead. +- Typing the first character of a disabled item's label will not move the focus to it. - Mouse or keyboard interaction will not expand/collapse disabled items. - Mouse or keyboard interaction will not select disabled items. -- Shift + arrow keys will skip disabled items, and the next non-disabled item will be selected. +- Shift + arrow keys will skip disabled items, and the next non-disabled item will be selected instead. - Programmatic focus will not focus disabled items. -If it is true: +When it's set to true: -- Arrow keys will focus disabled items. -- Typing the first character of a disabled item's label will focus the item. +- Navigating with keyboard arrow keys will focus disabled items. +- Typing the first character of a disabled item's label will move focus to it. - Mouse or keyboard interaction will not expand/collapse disabled items. - Mouse or keyboard interaction will not select disabled items. -- Shift + arrow keys will not skip disabled items but, the disabled item will not be selected. +- Shift + arrow keys will not skip disabled items, but the disabled item will not be selected. - Programmatic focus will focus disabled items. - -{{"demo": "DisabledItemsFocusable.js", "defaultCodeOpen": false}} diff --git a/docs/data/tree-view/simple-tree-view/selection/selection.md b/docs/data/tree-view/simple-tree-view/selection/selection.md index 11f758b2629a7..62201e5bb6473 100644 --- a/docs/data/tree-view/simple-tree-view/selection/selection.md +++ b/docs/data/tree-view/simple-tree-view/selection/selection.md @@ -9,11 +9,11 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/ # Simple Tree View - Selection -

Handle how users can select items.

+

Learn how to enable item selection for the Tree View component.

## Multi selection -The Tree View also supports multi-selection: +Apply the `multiSelect` prop on the Tree View to let users select multiple items. {{"demo": "MultiSelectTreeView.js"}} @@ -25,9 +25,8 @@ Use the `disableSelection` prop if you don't want your items to be selectable: ## Controlled selection -Use the `selectedNodes` prop to control the selected items. - -You can use the `onSelectedNodesChange` prop to listen to changes in the selected items and update the prop accordingly. +Use the `selectedNodes` prop to control selected Tree View items. +You can also use the `onSelectedNodesChange` prop to listen to changes in the selected items and update the prop accordingly. {{"demo": "ControlledSelection.js"}} diff --git a/docs/next.config.mjs b/docs/next.config.mjs index a613274fae7dd..f2c9f2e325d05 100644 --- a/docs/next.config.mjs +++ b/docs/next.config.mjs @@ -26,7 +26,7 @@ function loadPkg(pkgPath) { } const pkg = loadPkg('.'); -const dataGridPkg = loadPkg('./packages/grid/x-data-grid'); +const dataGridPkg = loadPkg('./packages/x-data-grid'); const datePickersPkg = loadPkg('./packages/x-date-pickers'); const chartsPkg = loadPkg('./packages/x-charts'); const treeViewPkg = loadPkg('./packages/x-tree-view'); diff --git a/docs/package.json b/docs/package.json index baa9269d03f51..5571de6fa8cb2 100644 --- a/docs/package.json +++ b/docs/package.json @@ -5,13 +5,13 @@ "author": "MUI Team", "license": "MIT", "scripts": { - "build": "rimraf docs/export && cross-env NODE_ENV=production next build --profile && yarn build-sw", + "build": "rimraf ./export && cross-env NODE_ENV=production next build --profile && yarn build-sw", "build:clean": "rimraf .next && yarn build", "build-sw": "node ./scripts/buildServiceWorker.js", "dev": "next dev --port 3001", "deploy": "git push -f upstream next:docs-next", "icons": "rimraf public/static/icons/* && node ./scripts/buildIcons.js", - "start": "next start", + "serve": "serve ./export -l 3010", "create-playground": "cpy --cwd=scripts playground.template.tsx ../../pages/playground --rename=index.tsx", "typescript": "tsc -p tsconfig.json", "typescript:transpile": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" scripts/formattedTSDemos", @@ -27,17 +27,17 @@ "@emotion/react": "^11.11.3", "@emotion/server": "^11.11.0", "@emotion/styled": "^11.11.0", - "@mui/icons-material": "^5.15.7", - "@mui/joy": "^5.0.0-beta.25", - "@mui/lab": "^5.0.0-alpha.163", - "@mui/material": "^5.15.7", - "@mui/styles": "^5.15.7", - "@mui/utils": "^5.15.7", + "@mui/icons-material": "^5.15.9", + "@mui/joy": "^5.0.0-beta.27", + "@mui/lab": "^5.0.0-alpha.165", + "@mui/material": "^5.15.9", + "@mui/styles": "^5.15.9", + "@mui/utils": "^5.15.9", "@react-spring/web": "^9.7.3", "@trendmicro/react-interpolate": "^0.5.5", "@types/lodash": "^4.14.202", "@types/moment-hijri": "^2.1.4", - "@types/react-dom": "^18.2.18", + "@types/react-dom": "^18.2.19", "@types/react-router-dom": "^5.3.3", "ast-types": "^0.14.2", "autoprefixer": "^10.4.17", @@ -52,8 +52,8 @@ "core-js": "^2.6.12", "cross-env": "^7.0.3", "date-fns": "^2.30.0", - "date-fns-v3": "https://registry.npmjs.org/date-fns/-/date-fns-3.2.0.tgz", "date-fns-jalali": "^2.21.3-1", + "date-fns-v3": "https://registry.npmjs.org/date-fns/-/date-fns-3.2.0.tgz", "dayjs": "^1.11.10", "doctrine": "^3.0.0", "exceljs": "^4.4.0", @@ -67,20 +67,20 @@ "marked": "^5.1.2", "moment": "^2.30.1", "moment-hijri": "^2.1.2", - "moment-timezone": "^0.5.44", + "moment-timezone": "^0.5.45", "next": "^14.1.0", "nprogress": "^0.2.0", - "postcss": "^8.4.33", + "postcss": "^8.4.35", "prismjs": "^1.29.0", "prop-types": "^15.8.1", "raw-loader": "^1.0.0", "react": "^18.2.0", "react-docgen": "^5.4.3", "react-dom": "^18.2.0", - "react-hook-form": "^7.49.3", + "react-hook-form": "^7.50.1", "react-is": "^18.2.0", - "react-router": "^6.21.3", - "react-router-dom": "^6.21.3", + "react-router": "^6.22.0", + "react-router-dom": "^6.22.0", "react-runner": "^1.0.3", "react-simple-code-editor": "^0.13.1", "recast": "^0.23.4", @@ -98,6 +98,7 @@ "@types/stylis": "^4.2.5", "@types/webpack-bundle-analyzer": "^4.6.3", "cpy-cli": "^5.0.0", - "gm": "^1.25.0" + "gm": "^1.25.0", + "serve": "^14.2.1" } } diff --git a/docs/pages/_app.js b/docs/pages/_app.js index 56aaa444f278f..514da6bb6e2f1 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -18,7 +18,7 @@ import DocsStyledEngineProvider from 'docs/src/modules/utils/StyledEngineProvide import { pathnameToLanguage } from 'docs/src/modules/utils/helpers'; import createEmotionCache from 'docs/src/createEmotionCache'; import findActivePage from 'docs/src/modules/utils/findActivePage'; -import { LicenseInfo } from '@mui/x-license-pro'; +import { LicenseInfo } from '@mui/x-license'; import getProductInfoFromUrl from 'docs/src/modules/utils/getProductInfoFromUrl'; // Remove the license warning from demonstration purposes diff --git a/docs/pages/x/api/charts/bar-chart.json b/docs/pages/x/api/charts/bar-chart.json index ee0ee516ffb94..99c7c29a8f49a 100644 --- a/docs/pages/x/api/charts/bar-chart.json +++ b/docs/pages/x/api/charts/bar-chart.json @@ -9,7 +9,7 @@ "bottomAxis": { "type": { "name": "union", - "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId?: number
| string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "xAxisIds[0] The id of the first provided axis" }, @@ -23,7 +23,7 @@ "leftAxis": { "type": { "name": "union", - "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId?: number
| string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "yAxisIds[0] The id of the first provided axis" }, @@ -51,7 +51,7 @@ "rightAxis": { "type": { "name": "union", - "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId?: number
| string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" }, @@ -65,7 +65,7 @@ "topAxis": { "type": { "name": "union", - "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId?: number
| string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" }, @@ -73,13 +73,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ axisId?: string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ axisId?: number
| string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ axisId?: string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ axisId?: number
| string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }>" } } }, @@ -93,8 +93,18 @@ { "name": "axisTick", "description": "", "class": null }, { "name": "axisTickLabel", "description": "", "class": null }, { "name": "axisLabel", "description": "", "class": null }, - { "name": "bar", "description": "", "class": null }, - { "name": "legend", "description": "", "class": null }, + { + "name": "bar", + "description": "The component that renders the bar.", + "default": "BarElementPath", + "class": null + }, + { + "name": "legend", + "description": "Custom rendering of the legend.", + "default": "DefaultChartsLegend", + "class": null + }, { "name": "popper", "description": "", "class": null }, { "name": "axisContent", "description": "", "class": null }, { "name": "itemContent", "description": "", "class": null } diff --git a/docs/pages/x/api/charts/bar-element.json b/docs/pages/x/api/charts/bar-element.json index 31b55695c62db..f9b2bb5c2d721 100644 --- a/docs/pages/x/api/charts/bar-element.json +++ b/docs/pages/x/api/charts/bar-element.json @@ -12,6 +12,14 @@ "import { BarElement } from '@mui/x-charts/BarChart';", "import { BarElement } from '@mui/x-charts';" ], + "slots": [ + { + "name": "bar", + "description": "The component that renders the bar.", + "default": "BarElementPath", + "class": null + } + ], "classes": [ { "key": "root", diff --git a/docs/pages/x/api/charts/bar-plot.json b/docs/pages/x/api/charts/bar-plot.json index 200f09808221c..a5f557a11a209 100644 --- a/docs/pages/x/api/charts/bar-plot.json +++ b/docs/pages/x/api/charts/bar-plot.json @@ -20,7 +20,14 @@ "import { BarPlot } from '@mui/x-charts/BarChart';", "import { BarPlot } from '@mui/x-charts';" ], - "slots": [{ "name": "bar", "description": "", "class": null }], + "slots": [ + { + "name": "bar", + "description": "The component that renders the bar.", + "default": "BarElementPath", + "class": null + } + ], "classes": [], "muiName": "MuiBarPlot", "filename": "/packages/x-charts/src/BarChart/BarPlot.tsx", diff --git a/docs/pages/x/api/charts/chart-container.json b/docs/pages/x/api/charts/chart-container.json index 8319bfa4bb11b..46d245c739233 100644 --- a/docs/pages/x/api/charts/chart-container.json +++ b/docs/pages/x/api/charts/chart-container.json @@ -22,13 +22,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ axisId?: string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ axisId?: number
| string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ axisId?: string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ axisId?: number
| string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }>" } } }, diff --git a/docs/pages/x/api/charts/charts-axis.json b/docs/pages/x/api/charts/charts-axis.json index 697f66b2f4ee7..0f8af50089b95 100644 --- a/docs/pages/x/api/charts/charts-axis.json +++ b/docs/pages/x/api/charts/charts-axis.json @@ -3,21 +3,21 @@ "bottomAxis": { "type": { "name": "union", - "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId?: number
| string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "xAxisIds[0] The id of the first provided axis" }, "leftAxis": { "type": { "name": "union", - "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId?: number
| string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "yAxisIds[0] The id of the first provided axis" }, "rightAxis": { "type": { "name": "union", - "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId?: number
| string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" }, @@ -30,7 +30,7 @@ "topAxis": { "type": { "name": "union", - "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId?: number
| string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" } diff --git a/docs/pages/x/api/charts/charts-legend.json b/docs/pages/x/api/charts/charts-legend.json index b3c18b42ad597..8125365e03f8a 100644 --- a/docs/pages/x/api/charts/charts-legend.json +++ b/docs/pages/x/api/charts/charts-legend.json @@ -15,7 +15,14 @@ "import { ChartsLegend } from '@mui/x-charts/ChartsLegend';", "import { ChartsLegend } from '@mui/x-charts';" ], - "slots": [{ "name": "legend", "description": "", "class": null }], + "slots": [ + { + "name": "legend", + "description": "Custom rendering of the legend.", + "default": "DefaultChartsLegend", + "class": null + } + ], "classes": [ { "key": "column", diff --git a/docs/pages/x/api/charts/charts-reference-line.json b/docs/pages/x/api/charts/charts-reference-line.json index 5a3d163769439..424ca89ad2ca0 100644 --- a/docs/pages/x/api/charts/charts-reference-line.json +++ b/docs/pages/x/api/charts/charts-reference-line.json @@ -1,6 +1,9 @@ { "props": { - "axisId": { "type": { "name": "string" }, "default": "The `id` of the first defined axis." }, + "axisId": { + "type": { "name": "union", "description": "number
| string" }, + "default": "The `id` of the first defined axis." + }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "label": { "type": { "name": "string" } }, "labelAlign": { diff --git a/docs/pages/x/api/charts/default-charts-item-tooltip-content.json b/docs/pages/x/api/charts/default-charts-item-tooltip-content.json index 0720c413a2ee0..b97bee2e777d5 100644 --- a/docs/pages/x/api/charts/default-charts-item-tooltip-content.json +++ b/docs/pages/x/api/charts/default-charts-item-tooltip-content.json @@ -8,7 +8,7 @@ "itemData": { "type": { "name": "shape", - "description": "{ dataIndex?: number, seriesId: string, type: 'bar'
| 'line'
| 'pie'
| 'scatter' }" + "description": "{ dataIndex?: number, seriesId: number
| string, type: 'bar'
| 'line'
| 'pie'
| 'scatter' }" }, "required": true }, diff --git a/docs/pages/x/api/charts/default-charts-legend.js b/docs/pages/x/api/charts/default-charts-legend.js new file mode 100644 index 0000000000000..e29bddc9b5742 --- /dev/null +++ b/docs/pages/x/api/charts/default-charts-legend.js @@ -0,0 +1,23 @@ +import * as React from 'react'; +import ApiPage from 'docs/src/modules/components/ApiPage'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './default-charts-legend.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context( + 'docsx/translations/api-docs/charts/default-charts-legend', + false, + /\.\/default-charts-legend.*.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/x/api/charts/default-charts-legend.json b/docs/pages/x/api/charts/default-charts-legend.json new file mode 100644 index 0000000000000..dd17c5d8d3bf3 --- /dev/null +++ b/docs/pages/x/api/charts/default-charts-legend.json @@ -0,0 +1,56 @@ +{ + "props": { + "classes": { + "type": { "name": "object" }, + "required": true, + "additionalInfo": { "cssApi": true } + }, + "direction": { + "type": { "name": "enum", "description": "'column'
| 'row'" }, + "required": true + }, + "hidden": { "type": { "name": "bool" }, "default": "false" }, + "itemGap": { "type": { "name": "number" }, "default": "10" }, + "itemMarkHeight": { "type": { "name": "number" }, "default": "20" }, + "itemMarkWidth": { "type": { "name": "number" }, "default": "20" }, + "labelStyle": { "type": { "name": "object" }, "default": "theme.typography.subtitle1" }, + "markGap": { "type": { "name": "number" }, "default": "5" }, + "padding": { + "type": { + "name": "union", + "description": "number
| { bottom?: number, left?: number, right?: number, top?: number }" + }, + "default": "10" + } + }, + "name": "DefaultChartsLegend", + "imports": [ + "import { DefaultChartsLegend } from '@mui/x-charts/ChartsLegend';", + "import { DefaultChartsLegend } from '@mui/x-charts';" + ], + "classes": [ + { + "key": "mark", + "className": "MuiDefaultChartsLegend-mark", + "description": "", + "isGlobal": false + }, + { + "key": "root", + "className": "MuiDefaultChartsLegend-root", + "description": "", + "isGlobal": false + }, + { + "key": "series", + "className": "MuiDefaultChartsLegend-series", + "description": "", + "isGlobal": false + } + ], + "muiName": "MuiDefaultChartsLegend", + "filename": "/packages/x-charts/src/ChartsLegend/DefaultChartsLegend.tsx", + "inheritance": null, + "demos": "", + "cssComponent": false +} diff --git a/docs/pages/x/api/charts/line-chart.json b/docs/pages/x/api/charts/line-chart.json index b8fc2abd5917d..2ffb19305c079 100644 --- a/docs/pages/x/api/charts/line-chart.json +++ b/docs/pages/x/api/charts/line-chart.json @@ -10,7 +10,7 @@ "bottomAxis": { "type": { "name": "union", - "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId?: number
| string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "xAxisIds[0] The id of the first provided axis" }, @@ -25,7 +25,7 @@ "leftAxis": { "type": { "name": "union", - "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId?: number
| string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "yAxisIds[0] The id of the first provided axis" }, @@ -46,7 +46,7 @@ "rightAxis": { "type": { "name": "union", - "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId?: number
| string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" }, @@ -60,7 +60,7 @@ "topAxis": { "type": { "name": "union", - "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId?: number
| string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" }, @@ -68,13 +68,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ axisId?: string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ axisId?: number
| string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ axisId?: string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ axisId?: number
| string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }>" } } }, @@ -102,7 +102,12 @@ }, { "name": "mark", "description": "", "class": null }, { "name": "lineHighlight", "description": "", "class": null }, - { "name": "legend", "description": "", "class": null }, + { + "name": "legend", + "description": "Custom rendering of the legend.", + "default": "DefaultChartsLegend", + "class": null + }, { "name": "popper", "description": "", "class": null }, { "name": "axisContent", "description": "", "class": null }, { "name": "itemContent", "description": "", "class": null } diff --git a/docs/pages/x/api/charts/pie-chart.json b/docs/pages/x/api/charts/pie-chart.json index da19d23d60117..b3a95d9c307fa 100644 --- a/docs/pages/x/api/charts/pie-chart.json +++ b/docs/pages/x/api/charts/pie-chart.json @@ -3,7 +3,7 @@ "bottomAxis": { "type": { "name": "union", - "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId?: number
| string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" }, @@ -17,7 +17,7 @@ "leftAxis": { "type": { "name": "union", - "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId?: number
| string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" }, @@ -31,7 +31,7 @@ "rightAxis": { "type": { "name": "union", - "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId?: number
| string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" }, @@ -40,7 +40,7 @@ "topAxis": { "type": { "name": "union", - "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId?: number
| string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" }, @@ -48,13 +48,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ axisId?: string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ axisId?: number
| string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ axisId?: string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ axisId?: number
| string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }>" } } }, @@ -70,7 +70,12 @@ { "name": "axisLabel", "description": "", "class": null }, { "name": "pieArc", "description": "", "class": null }, { "name": "pieArcLabel", "description": "", "class": null }, - { "name": "legend", "description": "", "class": null }, + { + "name": "legend", + "description": "Custom rendering of the legend.", + "default": "DefaultChartsLegend", + "class": null + }, { "name": "popper", "description": "", "class": null }, { "name": "axisContent", "description": "", "class": null }, { "name": "itemContent", "description": "", "class": null } diff --git a/docs/pages/x/api/charts/responsive-chart-container.json b/docs/pages/x/api/charts/responsive-chart-container.json index b32d7652af2e8..ddc4d24576fcd 100644 --- a/docs/pages/x/api/charts/responsive-chart-container.json +++ b/docs/pages/x/api/charts/responsive-chart-container.json @@ -22,13 +22,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ axisId?: string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ axisId?: number
| string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ axisId?: string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ axisId?: number
| string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }>" } } }, diff --git a/docs/pages/x/api/charts/scatter-chart.json b/docs/pages/x/api/charts/scatter-chart.json index d223d3f4c85bb..eee3cd3bd833c 100644 --- a/docs/pages/x/api/charts/scatter-chart.json +++ b/docs/pages/x/api/charts/scatter-chart.json @@ -3,7 +3,7 @@ "bottomAxis": { "type": { "name": "union", - "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId?: number
| string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "xAxisIds[0] The id of the first provided axis" }, @@ -18,7 +18,7 @@ "leftAxis": { "type": { "name": "union", - "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId?: number
| string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "yAxisIds[0] The id of the first provided axis" }, @@ -39,7 +39,7 @@ "rightAxis": { "type": { "name": "union", - "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId?: number
| string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" }, @@ -52,7 +52,7 @@ "topAxis": { "type": { "name": "union", - "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId?: number
| string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" }, @@ -61,13 +61,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ axisId?: string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ axisId?: number
| string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ axisId?: string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ axisId?: number
| string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }>" } } }, @@ -82,7 +82,12 @@ { "name": "axisTickLabel", "description": "", "class": null }, { "name": "axisLabel", "description": "", "class": null }, { "name": "scatter", "description": "", "class": null }, - { "name": "legend", "description": "", "class": null }, + { + "name": "legend", + "description": "Custom rendering of the legend.", + "default": "DefaultChartsLegend", + "class": null + }, { "name": "popper", "description": "", "class": null }, { "name": "axisContent", "description": "", "class": null }, { "name": "itemContent", "description": "", "class": null } diff --git a/docs/pages/x/api/charts/spark-line-chart.json b/docs/pages/x/api/charts/spark-line-chart.json index 6ac9a094ae81f..e98af23cd828b 100644 --- a/docs/pages/x/api/charts/spark-line-chart.json +++ b/docs/pages/x/api/charts/spark-line-chart.json @@ -33,7 +33,7 @@ }, "valueFormatter": { "type": { "name": "func" }, - "default": "(v: number | null) => (v === null ? '' : v.toString())", + "default": "(value: number | null) => (value === null ? '' : value.toString())", "signature": { "type": "function(value: number) => string", "describedArgs": ["value"], @@ -44,7 +44,7 @@ "xAxis": { "type": { "name": "shape", - "description": "{ axisId?: string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }" + "description": "{ axisId?: number
| string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }" } } }, @@ -68,7 +68,12 @@ }, { "name": "mark", "description": "", "class": null }, { "name": "lineHighlight", "description": "", "class": null }, - { "name": "bar", "description": "", "class": null }, + { + "name": "bar", + "description": "The component that renders the bar.", + "default": "BarElementPath", + "class": null + }, { "name": "popper", "description": "", "class": null }, { "name": "axisContent", "description": "", "class": null }, { "name": "itemContent", "description": "", "class": null } 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 2b4860d709f1a..90e048ac17a97 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -1505,7 +1505,7 @@ ], "muiName": "MuiDataGridPremium", "forwardsRefTo": "GridRoot", - "filename": "/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx", + "filename": "/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx", "inheritance": null, "demos": "", "cssComponent": false diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json index 8a4e76d64e1c9..7b3e2e89f0d4b 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -1444,7 +1444,7 @@ ], "muiName": "MuiDataGridPro", "forwardsRefTo": "GridRoot", - "filename": "/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx", + "filename": "/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx", "inheritance": null, "demos": "", "cssComponent": false diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index 24989d3962c76..35526160a411b 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -1329,7 +1329,7 @@ ], "muiName": "MuiDataGrid", "forwardsRefTo": "GridRoot", - "filename": "/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx", + "filename": "/packages/x-data-grid/src/DataGrid/DataGrid.tsx", "inheritance": null, "demos": "", "cssComponent": false diff --git a/docs/pages/x/api/data-grid/grid-filter-form.json b/docs/pages/x/api/data-grid/grid-filter-form.json index d7615441eb937..8c9176f37e49d 100644 --- a/docs/pages/x/api/data-grid/grid-filter-form.json +++ b/docs/pages/x/api/data-grid/grid-filter-form.json @@ -58,7 +58,7 @@ "classes": [], "muiName": "MuiGridFilterForm", "forwardsRefTo": "GridRoot", - "filename": "/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx", + "filename": "/packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx", "inheritance": null, "demos": "", "cssComponent": false 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 94392094ef5b1..4afba52a62528 100644 --- a/docs/pages/x/api/data-grid/grid-filter-panel.json +++ b/docs/pages/x/api/data-grid/grid-filter-panel.json @@ -38,7 +38,7 @@ "classes": [], "muiName": "MuiGridFilterPanel", "forwardsRefTo": "GridRoot", - "filename": "/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterPanel.tsx", + "filename": "/packages/x-data-grid/src/components/panel/filterPanel/GridFilterPanel.tsx", "inheritance": null, "demos": "", "cssComponent": false diff --git a/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json b/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json index 83c51a1932ba8..ae73f843b26b9 100644 --- a/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json +++ b/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json @@ -37,7 +37,7 @@ ], "muiName": "MuiGridToolbarQuickFilter", "forwardsRefTo": "GridRoot", - "filename": "/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx", + "filename": "/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx", "inheritance": null, "demos": "", "cssComponent": false diff --git a/docs/pages/x/api/date-pickers/date-calendar.json b/docs/pages/x/api/date-pickers/date-calendar.json index f0031bb5be3de..e7b9b342558f2 100644 --- a/docs/pages/x/api/date-pickers/date-calendar.json +++ b/docs/pages/x/api/date-pickers/date-calendar.json @@ -10,7 +10,7 @@ "returned": "string" } }, - "defaultValue": { "type": { "name": "any" } }, + "defaultValue": { "type": { "name": "object" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableFuture": { "type": { "name": "bool" }, "default": "false" }, "disableHighlightToday": { "type": { "name": "bool" }, "default": "false" }, @@ -24,8 +24,8 @@ } }, "loading": { "type": { "name": "bool" }, "default": "false" }, - "maxDate": { "type": { "name": "any" } }, - "minDate": { "type": { "name": "any" } }, + "maxDate": { "type": { "name": "object" } }, + "minDate": { "type": { "name": "object" } }, "monthsPerRow": { "type": { "name": "enum", "description": "3
| 4" }, "default": "3" @@ -68,7 +68,7 @@ "default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date using the validation props, except callbacks such as `shouldDisableDate`." }, "renderLoading": { @@ -126,7 +126,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "view": { "type": { "name": "enum", diff --git a/docs/pages/x/api/date-pickers/date-field.json b/docs/pages/x/api/date-pickers/date-field.json index 46e896fb433f9..ac12fc860e072 100644 --- a/docs/pages/x/api/date-pickers/date-field.json +++ b/docs/pages/x/api/date-pickers/date-field.json @@ -9,7 +9,7 @@ }, "default": "'primary'" }, - "defaultValue": { "type": { "name": "any" } }, + "defaultValue": { "type": { "name": "object" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableFuture": { "type": { "name": "bool" }, "default": "false" }, "disablePast": { "type": { "name": "bool" }, "default": "false" }, @@ -36,8 +36,8 @@ }, "default": "'none'" }, - "maxDate": { "type": { "name": "any" } }, - "minDate": { "type": { "name": "any" } }, + "maxDate": { "type": { "name": "object" } }, + "minDate": { "type": { "name": "object" } }, "name": { "type": { "name": "string" } }, "onChange": { "type": { "name": "func" }, @@ -63,7 +63,7 @@ }, "readOnly": { "type": { "name": "bool" }, "default": "false" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used." }, "required": { "type": { "name": "bool" }, "default": "false" }, @@ -123,7 +123,7 @@ "unstableFieldRef": { "type": { "name": "union", "description": "func
| object" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "variant": { "type": { "name": "enum", diff --git a/docs/pages/x/api/date-pickers/date-picker.json b/docs/pages/x/api/date-pickers/date-picker.json index 76b6407274a7d..b4a4bd93ed6e2 100644 --- a/docs/pages/x/api/date-pickers/date-picker.json +++ b/docs/pages/x/api/date-pickers/date-picker.json @@ -14,7 +14,7 @@ "returned": "string" } }, - "defaultValue": { "type": { "name": "any" } }, + "defaultValue": { "type": { "name": "object" } }, "desktopModeMediaQuery": { "type": { "name": "string" }, "default": "'@media (pointer: fine)'" @@ -35,8 +35,8 @@ "label": { "type": { "name": "node" } }, "loading": { "type": { "name": "bool" }, "default": "false" }, "localeText": { "type": { "name": "object" } }, - "maxDate": { "type": { "name": "any" } }, - "minDate": { "type": { "name": "any" } }, + "maxDate": { "type": { "name": "object" } }, + "minDate": { "type": { "name": "object" } }, "monthsPerRow": { "type": { "name": "enum", "description": "3
| 4" }, "default": "3" @@ -96,7 +96,7 @@ "default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { @@ -160,7 +160,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "view": { "type": { "name": "enum", diff --git a/docs/pages/x/api/date-pickers/date-range-calendar.json b/docs/pages/x/api/date-pickers/date-range-calendar.json index afa6e86ecdf77..bc7330a92d879 100644 --- a/docs/pages/x/api/date-pickers/date-range-calendar.json +++ b/docs/pages/x/api/date-pickers/date-range-calendar.json @@ -26,7 +26,7 @@ "type": { "name": "enum", "description": "'end'
| 'start'" }, "default": "'start'" }, - "defaultValue": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "disableAutoMonthSwitching": { "type": { "name": "bool" }, "default": "false" }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableDragEditing": { "type": { "name": "bool" }, "default": "false" }, @@ -37,8 +37,8 @@ "fixedWeekNumber": { "type": { "name": "number" }, "default": "undefined" }, "focusedView": { "type": { "name": "enum", "description": "'day'" } }, "loading": { "type": { "name": "bool" }, "default": "false" }, - "maxDate": { "type": { "name": "any" } }, - "minDate": { "type": { "name": "any" } }, + "maxDate": { "type": { "name": "object" } }, + "minDate": { "type": { "name": "object" } }, "onChange": { "type": { "name": "func" }, "signature": { @@ -76,7 +76,7 @@ "default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date using the validation props, except callbacks such as `shouldDisableDate`." }, "renderLoading": { @@ -118,7 +118,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "value": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "view": { "type": { "name": "enum", "description": "'day'" } }, "views": { "type": { "name": "arrayOf", "description": "Array<'day'>" } } }, diff --git a/docs/pages/x/api/date-pickers/date-range-picker-day.json b/docs/pages/x/api/date-pickers/date-range-picker-day.json index 03725816fc5ab..fc19b9e50ec6d 100644 --- a/docs/pages/x/api/date-pickers/date-range-picker-day.json +++ b/docs/pages/x/api/date-pickers/date-range-picker-day.json @@ -1,6 +1,6 @@ { "props": { - "day": { "type": { "name": "any" }, "required": true }, + "day": { "type": { "name": "object" }, "required": true }, "isEndOfHighlighting": { "type": { "name": "bool" }, "required": true }, "isEndOfPreviewing": { "type": { "name": "bool" }, "required": true }, "isFirstVisibleCell": { "type": { "name": "bool" }, "required": true }, diff --git a/docs/pages/x/api/date-pickers/date-range-picker.json b/docs/pages/x/api/date-pickers/date-range-picker.json index 09c5a61c90075..e880dfb8e391d 100644 --- a/docs/pages/x/api/date-pickers/date-range-picker.json +++ b/docs/pages/x/api/date-pickers/date-range-picker.json @@ -26,7 +26,7 @@ "type": { "name": "enum", "description": "'end'
| 'start'" }, "default": "'start'" }, - "defaultValue": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "desktopModeMediaQuery": { "type": { "name": "string" }, "default": "'@media (pointer: fine)'" @@ -49,8 +49,8 @@ "label": { "type": { "name": "node" } }, "loading": { "type": { "name": "bool" }, "default": "false" }, "localeText": { "type": { "name": "object" } }, - "maxDate": { "type": { "name": "any" } }, - "minDate": { "type": { "name": "any" } }, + "maxDate": { "type": { "name": "object" } }, + "minDate": { "type": { "name": "object" } }, "name": { "type": { "name": "string" } }, "onAccept": { "type": { "name": "func" }, @@ -97,7 +97,7 @@ "default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { @@ -145,7 +145,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "value": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "viewRenderers": { "type": { "name": "shape", "description": "{ day?: func }" } } }, "name": "DateRangePicker", diff --git a/docs/pages/x/api/date-pickers/date-time-field.json b/docs/pages/x/api/date-pickers/date-time-field.json index 2ccfcbcc7dd5e..6c12c32f7960c 100644 --- a/docs/pages/x/api/date-pickers/date-time-field.json +++ b/docs/pages/x/api/date-pickers/date-time-field.json @@ -10,7 +10,7 @@ }, "default": "'primary'" }, - "defaultValue": { "type": { "name": "any" } }, + "defaultValue": { "type": { "name": "object" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableFuture": { "type": { "name": "bool" }, "default": "false" }, "disableIgnoringDatePartForTimeValidation": { "type": { "name": "bool" }, "default": "false" }, @@ -38,12 +38,12 @@ }, "default": "'none'" }, - "maxDate": { "type": { "name": "any" } }, - "maxDateTime": { "type": { "name": "any" } }, - "maxTime": { "type": { "name": "any" } }, - "minDate": { "type": { "name": "any" } }, - "minDateTime": { "type": { "name": "any" } }, - "minTime": { "type": { "name": "any" } }, + "maxDate": { "type": { "name": "object" } }, + "maxDateTime": { "type": { "name": "object" } }, + "maxTime": { "type": { "name": "object" } }, + "minDate": { "type": { "name": "object" } }, + "minDateTime": { "type": { "name": "object" } }, + "minTime": { "type": { "name": "object" } }, "minutesStep": { "type": { "name": "number" }, "default": "1" }, "name": { "type": { "name": "string" } }, "onChange": { @@ -70,7 +70,7 @@ }, "readOnly": { "type": { "name": "bool" }, "default": "false" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used." }, "required": { "type": { "name": "bool" }, "default": "false" }, @@ -138,7 +138,7 @@ "unstableFieldRef": { "type": { "name": "union", "description": "func
| object" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "variant": { "type": { "name": "enum", 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 5416d121b8774..1c10d4ccfcdee 100644 --- a/docs/pages/x/api/date-pickers/date-time-picker.json +++ b/docs/pages/x/api/date-pickers/date-time-picker.json @@ -16,7 +16,7 @@ "returned": "string" } }, - "defaultValue": { "type": { "name": "any" } }, + "defaultValue": { "type": { "name": "object" } }, "desktopModeMediaQuery": { "type": { "name": "string" }, "default": "'@media (pointer: fine)'" @@ -38,12 +38,12 @@ "label": { "type": { "name": "node" } }, "loading": { "type": { "name": "bool" }, "default": "false" }, "localeText": { "type": { "name": "object" } }, - "maxDate": { "type": { "name": "any" } }, - "maxDateTime": { "type": { "name": "any" } }, - "maxTime": { "type": { "name": "any" } }, - "minDate": { "type": { "name": "any" } }, - "minDateTime": { "type": { "name": "any" } }, - "minTime": { "type": { "name": "any" } }, + "maxDate": { "type": { "name": "object" } }, + "maxDateTime": { "type": { "name": "object" } }, + "maxTime": { "type": { "name": "object" } }, + "minDate": { "type": { "name": "object" } }, + "minDateTime": { "type": { "name": "object" } }, + "minTime": { "type": { "name": "object" } }, "minutesStep": { "type": { "name": "number" }, "default": "1" }, "monthsPerRow": { "type": { "name": "enum", "description": "3
| 4" }, @@ -104,7 +104,7 @@ "default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { @@ -185,7 +185,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "view": { "type": { "name": "enum", diff --git a/docs/pages/x/api/date-pickers/date-time-range-picker.json b/docs/pages/x/api/date-pickers/date-time-range-picker.json index 55d6d1ee2f796..ce588b76b7efb 100644 --- a/docs/pages/x/api/date-pickers/date-time-range-picker.json +++ b/docs/pages/x/api/date-pickers/date-time-range-picker.json @@ -27,7 +27,7 @@ "type": { "name": "enum", "description": "'end'
| 'start'" }, "default": "'start'" }, - "defaultValue": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "desktopModeMediaQuery": { "type": { "name": "string" }, "default": "'@media (pointer: fine)'" @@ -53,12 +53,12 @@ "label": { "type": { "name": "node" } }, "loading": { "type": { "name": "bool" }, "default": "false" }, "localeText": { "type": { "name": "object" } }, - "maxDate": { "type": { "name": "any" } }, - "maxDateTime": { "type": { "name": "any" } }, - "maxTime": { "type": { "name": "any" } }, - "minDate": { "type": { "name": "any" } }, - "minDateTime": { "type": { "name": "any" } }, - "minTime": { "type": { "name": "any" } }, + "maxDate": { "type": { "name": "object" } }, + "maxDateTime": { "type": { "name": "object" } }, + "maxTime": { "type": { "name": "object" } }, + "minDate": { "type": { "name": "object" } }, + "minDateTime": { "type": { "name": "object" } }, + "minTime": { "type": { "name": "object" } }, "minutesStep": { "type": { "name": "number" }, "default": "1" }, "name": { "type": { "name": "string" } }, "onAccept": { @@ -116,7 +116,7 @@ "default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { @@ -181,7 +181,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "value": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "view": { "type": { "name": "enum", diff --git a/docs/pages/x/api/date-pickers/desktop-date-picker.json b/docs/pages/x/api/date-pickers/desktop-date-picker.json index 69ab72f56f8b9..af6728769c595 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-picker.json @@ -14,7 +14,7 @@ "returned": "string" } }, - "defaultValue": { "type": { "name": "any" } }, + "defaultValue": { "type": { "name": "object" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableFuture": { "type": { "name": "bool" }, "default": "false" }, "disableHighlightToday": { "type": { "name": "bool" }, "default": "false" }, @@ -31,8 +31,8 @@ "label": { "type": { "name": "node" } }, "loading": { "type": { "name": "bool" }, "default": "false" }, "localeText": { "type": { "name": "object" } }, - "maxDate": { "type": { "name": "any" } }, - "minDate": { "type": { "name": "any" } }, + "maxDate": { "type": { "name": "object" } }, + "minDate": { "type": { "name": "object" } }, "monthsPerRow": { "type": { "name": "enum", "description": "3
| 4" }, "default": "3" @@ -92,7 +92,7 @@ "default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { @@ -156,7 +156,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "view": { "type": { "name": "enum", diff --git a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json b/docs/pages/x/api/date-pickers/desktop-date-range-picker.json index f846abac5f697..6803cc3627dbf 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-range-picker.json @@ -26,7 +26,7 @@ "type": { "name": "enum", "description": "'end'
| 'start'" }, "default": "'start'" }, - "defaultValue": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "disableAutoMonthSwitching": { "type": { "name": "bool" }, "default": "false" }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableDragEditing": { "type": { "name": "bool" }, "default": "false" }, @@ -45,8 +45,8 @@ "label": { "type": { "name": "node" } }, "loading": { "type": { "name": "bool" }, "default": "false" }, "localeText": { "type": { "name": "object" } }, - "maxDate": { "type": { "name": "any" } }, - "minDate": { "type": { "name": "any" } }, + "maxDate": { "type": { "name": "object" } }, + "minDate": { "type": { "name": "object" } }, "name": { "type": { "name": "string" } }, "onAccept": { "type": { "name": "func" }, @@ -93,7 +93,7 @@ "default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { @@ -141,7 +141,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "value": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "viewRenderers": { "type": { "name": "shape", "description": "{ day?: func }" } } }, "name": "DesktopDateRangePicker", 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 854019a2a091b..737c15cbb3e37 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 @@ -16,7 +16,7 @@ "returned": "string" } }, - "defaultValue": { "type": { "name": "any" } }, + "defaultValue": { "type": { "name": "object" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableFuture": { "type": { "name": "bool" }, "default": "false" }, "disableHighlightToday": { "type": { "name": "bool" }, "default": "false" }, @@ -34,12 +34,12 @@ "label": { "type": { "name": "node" } }, "loading": { "type": { "name": "bool" }, "default": "false" }, "localeText": { "type": { "name": "object" } }, - "maxDate": { "type": { "name": "any" } }, - "maxDateTime": { "type": { "name": "any" } }, - "maxTime": { "type": { "name": "any" } }, - "minDate": { "type": { "name": "any" } }, - "minDateTime": { "type": { "name": "any" } }, - "minTime": { "type": { "name": "any" } }, + "maxDate": { "type": { "name": "object" } }, + "maxDateTime": { "type": { "name": "object" } }, + "maxTime": { "type": { "name": "object" } }, + "minDate": { "type": { "name": "object" } }, + "minDateTime": { "type": { "name": "object" } }, + "minTime": { "type": { "name": "object" } }, "minutesStep": { "type": { "name": "number" }, "default": "1" }, "monthsPerRow": { "type": { "name": "enum", "description": "3
| 4" }, @@ -100,7 +100,7 @@ "default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { @@ -181,7 +181,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "view": { "type": { "name": "enum", diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json b/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json index 90357b9228f5f..b083f9ceeb1e0 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json @@ -27,7 +27,7 @@ "type": { "name": "enum", "description": "'end'
| 'start'" }, "default": "'start'" }, - "defaultValue": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "disableAutoMonthSwitching": { "type": { "name": "bool" }, "default": "false" }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableDragEditing": { "type": { "name": "bool" }, "default": "false" }, @@ -49,12 +49,12 @@ "label": { "type": { "name": "node" } }, "loading": { "type": { "name": "bool" }, "default": "false" }, "localeText": { "type": { "name": "object" } }, - "maxDate": { "type": { "name": "any" } }, - "maxDateTime": { "type": { "name": "any" } }, - "maxTime": { "type": { "name": "any" } }, - "minDate": { "type": { "name": "any" } }, - "minDateTime": { "type": { "name": "any" } }, - "minTime": { "type": { "name": "any" } }, + "maxDate": { "type": { "name": "object" } }, + "maxDateTime": { "type": { "name": "object" } }, + "maxTime": { "type": { "name": "object" } }, + "minDate": { "type": { "name": "object" } }, + "minDateTime": { "type": { "name": "object" } }, + "minTime": { "type": { "name": "object" } }, "minutesStep": { "type": { "name": "number" }, "default": "1" }, "name": { "type": { "name": "string" } }, "onAccept": { @@ -112,7 +112,7 @@ "default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { @@ -177,7 +177,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "value": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "view": { "type": { "name": "enum", 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 1b91794a34ccb..8273e26e92d90 100644 --- a/docs/pages/x/api/date-pickers/desktop-time-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-time-picker.json @@ -7,7 +7,7 @@ "type": { "name": "bool" }, "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)." }, - "defaultValue": { "type": { "name": "any" } }, + "defaultValue": { "type": { "name": "object" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableFuture": { "type": { "name": "bool" }, "default": "false" }, "disableIgnoringDatePartForTimeValidation": { "type": { "name": "bool" }, "default": "false" }, @@ -21,8 +21,8 @@ "inputRef": { "type": { "name": "custom", "description": "ref" } }, "label": { "type": { "name": "node" } }, "localeText": { "type": { "name": "object" } }, - "maxTime": { "type": { "name": "any" } }, - "minTime": { "type": { "name": "any" } }, + "maxTime": { "type": { "name": "object" } }, + "minTime": { "type": { "name": "object" } }, "minutesStep": { "type": { "name": "number" }, "default": "1" }, "name": { "type": { "name": "string" } }, "onAccept": { @@ -71,7 +71,7 @@ "default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "selectedSections": { @@ -118,7 +118,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "view": { "type": { "name": "enum", diff --git a/docs/pages/x/api/date-pickers/digital-clock.json b/docs/pages/x/api/date-pickers/digital-clock.json index 8f3d3af0be1c9..ab41bb11244ee 100644 --- a/docs/pages/x/api/date-pickers/digital-clock.json +++ b/docs/pages/x/api/date-pickers/digital-clock.json @@ -3,14 +3,14 @@ "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, "autoFocus": { "type": { "name": "bool" } }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, - "defaultValue": { "type": { "name": "any" } }, + "defaultValue": { "type": { "name": "object" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableFuture": { "type": { "name": "bool" }, "default": "false" }, "disableIgnoringDatePartForTimeValidation": { "type": { "name": "bool" }, "default": "false" }, "disablePast": { "type": { "name": "bool" }, "default": "false" }, "focusedView": { "type": { "name": "enum", "description": "'hours'" } }, - "maxTime": { "type": { "name": "any" } }, - "minTime": { "type": { "name": "any" } }, + "maxTime": { "type": { "name": "object" } }, + "minTime": { "type": { "name": "object" } }, "minutesStep": { "type": { "name": "number" }, "default": "1" }, "onChange": { "type": { "name": "func" }, @@ -33,7 +33,7 @@ "openTo": { "type": { "name": "enum", "description": "'hours'" } }, "readOnly": { "type": { "name": "bool" }, "default": "false" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid time using the validation props, except callbacks such as `shouldDisableTime`." }, "shouldDisableTime": { @@ -67,7 +67,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "view": { "type": { "name": "enum", "description": "'hours'" } }, "views": { "type": { "name": "arrayOf", "description": "Array<'hours'>" }, diff --git a/docs/pages/x/api/date-pickers/mobile-date-picker.json b/docs/pages/x/api/date-pickers/mobile-date-picker.json index d519138df7f8d..54682e73a7af4 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-picker.json @@ -14,7 +14,7 @@ "returned": "string" } }, - "defaultValue": { "type": { "name": "any" } }, + "defaultValue": { "type": { "name": "object" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableFuture": { "type": { "name": "bool" }, "default": "false" }, "disableHighlightToday": { "type": { "name": "bool" }, "default": "false" }, @@ -31,8 +31,8 @@ "label": { "type": { "name": "node" } }, "loading": { "type": { "name": "bool" }, "default": "false" }, "localeText": { "type": { "name": "object" } }, - "maxDate": { "type": { "name": "any" } }, - "minDate": { "type": { "name": "any" } }, + "maxDate": { "type": { "name": "object" } }, + "minDate": { "type": { "name": "object" } }, "monthsPerRow": { "type": { "name": "enum", "description": "3
| 4" }, "default": "3" @@ -92,7 +92,7 @@ "default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { @@ -156,7 +156,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "view": { "type": { "name": "enum", diff --git a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json index 88e6f7786dc1b..a4e7fd4f0ee02 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json @@ -22,7 +22,7 @@ "type": { "name": "enum", "description": "'end'
| 'start'" }, "default": "'start'" }, - "defaultValue": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "disableAutoMonthSwitching": { "type": { "name": "bool" }, "default": "false" }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableDragEditing": { "type": { "name": "bool" }, "default": "false" }, @@ -41,8 +41,8 @@ "label": { "type": { "name": "node" } }, "loading": { "type": { "name": "bool" }, "default": "false" }, "localeText": { "type": { "name": "object" } }, - "maxDate": { "type": { "name": "any" } }, - "minDate": { "type": { "name": "any" } }, + "maxDate": { "type": { "name": "object" } }, + "minDate": { "type": { "name": "object" } }, "name": { "type": { "name": "string" } }, "onAccept": { "type": { "name": "func" }, @@ -89,7 +89,7 @@ "default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { @@ -137,7 +137,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "value": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "viewRenderers": { "type": { "name": "shape", "description": "{ day?: func }" } } }, "name": "MobileDateRangePicker", 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 df40abdc0f886..dfc374df13ffd 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 @@ -16,7 +16,7 @@ "returned": "string" } }, - "defaultValue": { "type": { "name": "any" } }, + "defaultValue": { "type": { "name": "object" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableFuture": { "type": { "name": "bool" }, "default": "false" }, "disableHighlightToday": { "type": { "name": "bool" }, "default": "false" }, @@ -34,12 +34,12 @@ "label": { "type": { "name": "node" } }, "loading": { "type": { "name": "bool" }, "default": "false" }, "localeText": { "type": { "name": "object" } }, - "maxDate": { "type": { "name": "any" } }, - "maxDateTime": { "type": { "name": "any" } }, - "maxTime": { "type": { "name": "any" } }, - "minDate": { "type": { "name": "any" } }, - "minDateTime": { "type": { "name": "any" } }, - "minTime": { "type": { "name": "any" } }, + "maxDate": { "type": { "name": "object" } }, + "maxDateTime": { "type": { "name": "object" } }, + "maxTime": { "type": { "name": "object" } }, + "minDate": { "type": { "name": "object" } }, + "minDateTime": { "type": { "name": "object" } }, + "minTime": { "type": { "name": "object" } }, "minutesStep": { "type": { "name": "number" }, "default": "1" }, "monthsPerRow": { "type": { "name": "enum", "description": "3
| 4" }, @@ -100,7 +100,7 @@ "default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { @@ -172,7 +172,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "view": { "type": { "name": "enum", diff --git a/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json b/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json index 688f24d49b0d3..fdbfb01fa0753 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json @@ -23,7 +23,7 @@ "type": { "name": "enum", "description": "'end'
| 'start'" }, "default": "'start'" }, - "defaultValue": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "disableAutoMonthSwitching": { "type": { "name": "bool" }, "default": "false" }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableDragEditing": { "type": { "name": "bool" }, "default": "false" }, @@ -45,12 +45,12 @@ "label": { "type": { "name": "node" } }, "loading": { "type": { "name": "bool" }, "default": "false" }, "localeText": { "type": { "name": "object" } }, - "maxDate": { "type": { "name": "any" } }, - "maxDateTime": { "type": { "name": "any" } }, - "maxTime": { "type": { "name": "any" } }, - "minDate": { "type": { "name": "any" } }, - "minDateTime": { "type": { "name": "any" } }, - "minTime": { "type": { "name": "any" } }, + "maxDate": { "type": { "name": "object" } }, + "maxDateTime": { "type": { "name": "object" } }, + "maxTime": { "type": { "name": "object" } }, + "minDate": { "type": { "name": "object" } }, + "minDateTime": { "type": { "name": "object" } }, + "minTime": { "type": { "name": "object" } }, "minutesStep": { "type": { "name": "number" }, "default": "1" }, "name": { "type": { "name": "string" } }, "onAccept": { @@ -108,7 +108,7 @@ "default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { @@ -173,7 +173,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "value": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "view": { "type": { "name": "enum", 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 59748eba26059..ff478590ca5df 100644 --- a/docs/pages/x/api/date-pickers/mobile-time-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-time-picker.json @@ -7,7 +7,7 @@ "type": { "name": "bool" }, "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)." }, - "defaultValue": { "type": { "name": "any" } }, + "defaultValue": { "type": { "name": "object" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableFuture": { "type": { "name": "bool" }, "default": "false" }, "disableIgnoringDatePartForTimeValidation": { "type": { "name": "bool" }, "default": "false" }, @@ -21,8 +21,8 @@ "inputRef": { "type": { "name": "custom", "description": "ref" } }, "label": { "type": { "name": "node" } }, "localeText": { "type": { "name": "object" } }, - "maxTime": { "type": { "name": "any" } }, - "minTime": { "type": { "name": "any" } }, + "maxTime": { "type": { "name": "object" } }, + "minTime": { "type": { "name": "object" } }, "minutesStep": { "type": { "name": "number" }, "default": "1" }, "name": { "type": { "name": "string" } }, "onAccept": { @@ -71,7 +71,7 @@ "default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "selectedSections": { @@ -109,7 +109,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "view": { "type": { "name": "enum", diff --git a/docs/pages/x/api/date-pickers/month-calendar.json b/docs/pages/x/api/date-pickers/month-calendar.json index 55c00405e6710..2fe02db3fe453 100644 --- a/docs/pages/x/api/date-pickers/month-calendar.json +++ b/docs/pages/x/api/date-pickers/month-calendar.json @@ -1,13 +1,13 @@ { "props": { "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, - "defaultValue": { "type": { "name": "any" } }, + "defaultValue": { "type": { "name": "object" } }, "disabled": { "type": { "name": "bool" } }, "disableFuture": { "type": { "name": "bool" }, "default": "false" }, "disableHighlightToday": { "type": { "name": "bool" }, "default": "false" }, "disablePast": { "type": { "name": "bool" }, "default": "false" }, - "maxDate": { "type": { "name": "any" } }, - "minDate": { "type": { "name": "any" } }, + "maxDate": { "type": { "name": "object" } }, + "minDate": { "type": { "name": "object" } }, "monthsPerRow": { "type": { "name": "enum", "description": "3
| 4" }, "default": "3" @@ -18,7 +18,7 @@ }, "readOnly": { "type": { "name": "bool" } }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid month using the validation props, except callbacks such as `shouldDisableMonth`." }, "shouldDisableMonth": { @@ -44,7 +44,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } } + "value": { "type": { "name": "object" } } }, "name": "MonthCalendar", "imports": [ diff --git a/docs/pages/x/api/date-pickers/multi-input-date-range-field.json b/docs/pages/x/api/date-pickers/multi-input-date-range-field.json index 43fa71b3f73fd..ab581f1f6f69f 100644 --- a/docs/pages/x/api/date-pickers/multi-input-date-range-field.json +++ b/docs/pages/x/api/date-pickers/multi-input-date-range-field.json @@ -1,7 +1,7 @@ { "props": { "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, - "defaultValue": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "direction": { "type": { "name": "union", @@ -18,8 +18,8 @@ "type": { "name": "enum", "description": "'dense'
| 'spacious'" }, "default": "\"dense\"" }, - "maxDate": { "type": { "name": "any" } }, - "minDate": { "type": { "name": "any" } }, + "maxDate": { "type": { "name": "object" } }, + "minDate": { "type": { "name": "object" } }, "onChange": { "type": { "name": "func" }, "signature": { @@ -43,7 +43,7 @@ }, "readOnly": { "type": { "name": "bool" }, "default": "false" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used." }, "selectedSections": { @@ -90,7 +90,7 @@ } }, "useFlexGap": { "type": { "name": "bool" }, "default": "false" }, - "value": { "type": { "name": "arrayOf", "description": "Array<any>" } } + "value": { "type": { "name": "arrayOf", "description": "Array<object>" } } }, "name": "MultiInputDateRangeField", "imports": [ diff --git a/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json b/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json index 481f133235df6..3ad6a4c4bc6bc 100644 --- a/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json +++ b/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json @@ -2,7 +2,7 @@ "props": { "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, - "defaultValue": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "direction": { "type": { "name": "union", @@ -20,12 +20,12 @@ "type": { "name": "enum", "description": "'dense'
| 'spacious'" }, "default": "\"dense\"" }, - "maxDate": { "type": { "name": "any" } }, - "maxDateTime": { "type": { "name": "any" } }, - "maxTime": { "type": { "name": "any" } }, - "minDate": { "type": { "name": "any" } }, - "minDateTime": { "type": { "name": "any" } }, - "minTime": { "type": { "name": "any" } }, + "maxDate": { "type": { "name": "object" } }, + "maxDateTime": { "type": { "name": "object" } }, + "maxTime": { "type": { "name": "object" } }, + "minDate": { "type": { "name": "object" } }, + "minDateTime": { "type": { "name": "object" } }, + "minTime": { "type": { "name": "object" } }, "minutesStep": { "type": { "name": "number" }, "default": "1" }, "onChange": { "type": { "name": "func" }, @@ -50,7 +50,7 @@ }, "readOnly": { "type": { "name": "bool" }, "default": "false" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used." }, "selectedSections": { @@ -105,7 +105,7 @@ } }, "useFlexGap": { "type": { "name": "bool" }, "default": "false" }, - "value": { "type": { "name": "arrayOf", "description": "Array<any>" } } + "value": { "type": { "name": "arrayOf", "description": "Array<object>" } } }, "name": "MultiInputDateTimeRangeField", "imports": [ diff --git a/docs/pages/x/api/date-pickers/multi-input-time-range-field.json b/docs/pages/x/api/date-pickers/multi-input-time-range-field.json index 9ea14b1bd7785..230921861f532 100644 --- a/docs/pages/x/api/date-pickers/multi-input-time-range-field.json +++ b/docs/pages/x/api/date-pickers/multi-input-time-range-field.json @@ -2,7 +2,7 @@ "props": { "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, - "defaultValue": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "direction": { "type": { "name": "union", @@ -20,8 +20,8 @@ "type": { "name": "enum", "description": "'dense'
| 'spacious'" }, "default": "\"dense\"" }, - "maxTime": { "type": { "name": "any" } }, - "minTime": { "type": { "name": "any" } }, + "maxTime": { "type": { "name": "object" } }, + "minTime": { "type": { "name": "object" } }, "minutesStep": { "type": { "name": "number" }, "default": "1" }, "onChange": { "type": { "name": "func" }, @@ -46,7 +46,7 @@ }, "readOnly": { "type": { "name": "bool" }, "default": "false" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used." }, "selectedSections": { @@ -93,7 +93,7 @@ } }, "useFlexGap": { "type": { "name": "bool" }, "default": "false" }, - "value": { "type": { "name": "arrayOf", "description": "Array<any>" } } + "value": { "type": { "name": "arrayOf", "description": "Array<object>" } } }, "name": "MultiInputTimeRangeField", "imports": [ diff --git a/docs/pages/x/api/date-pickers/multi-section-digital-clock.json b/docs/pages/x/api/date-pickers/multi-section-digital-clock.json index f87b4cc0e5445..792a65ce1208b 100644 --- a/docs/pages/x/api/date-pickers/multi-section-digital-clock.json +++ b/docs/pages/x/api/date-pickers/multi-section-digital-clock.json @@ -3,7 +3,7 @@ "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, "autoFocus": { "type": { "name": "bool" } }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, - "defaultValue": { "type": { "name": "any" } }, + "defaultValue": { "type": { "name": "object" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableFuture": { "type": { "name": "bool" }, "default": "false" }, "disableIgnoringDatePartForTimeValidation": { "type": { "name": "bool" }, "default": "false" }, @@ -14,8 +14,8 @@ "description": "'hours'
| 'meridiem'
| 'minutes'
| 'seconds'" } }, - "maxTime": { "type": { "name": "any" } }, - "minTime": { "type": { "name": "any" } }, + "maxTime": { "type": { "name": "object" } }, + "minTime": { "type": { "name": "object" } }, "minutesStep": { "type": { "name": "number" }, "default": "1" }, "onChange": { "type": { "name": "func" }, @@ -43,7 +43,7 @@ }, "readOnly": { "type": { "name": "bool" }, "default": "false" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid time using the validation props, except callbacks such as `shouldDisableTime`." }, "shouldDisableTime": { @@ -83,7 +83,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "view": { "type": { "name": "enum", diff --git a/docs/pages/x/api/date-pickers/pickers-day.json b/docs/pages/x/api/date-pickers/pickers-day.json index 42e74730e2908..1380c63391db3 100644 --- a/docs/pages/x/api/date-pickers/pickers-day.json +++ b/docs/pages/x/api/date-pickers/pickers-day.json @@ -1,6 +1,6 @@ { "props": { - "day": { "type": { "name": "any" }, "required": true }, + "day": { "type": { "name": "object" }, "required": true }, "isFirstVisibleCell": { "type": { "name": "bool" }, "required": true }, "isLastVisibleCell": { "type": { "name": "bool" }, "required": true }, "outsideCurrentMonth": { "type": { "name": "bool" }, "required": true }, diff --git a/docs/pages/x/api/date-pickers/single-input-date-range-field.json b/docs/pages/x/api/date-pickers/single-input-date-range-field.json index bf3556552fea7..0b8a151594e24 100644 --- a/docs/pages/x/api/date-pickers/single-input-date-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-date-range-field.json @@ -9,7 +9,7 @@ }, "default": "'primary'" }, - "defaultValue": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableFuture": { "type": { "name": "bool" }, "default": "false" }, "disablePast": { "type": { "name": "bool" }, "default": "false" }, @@ -36,8 +36,8 @@ }, "default": "'none'" }, - "maxDate": { "type": { "name": "any" } }, - "minDate": { "type": { "name": "any" } }, + "maxDate": { "type": { "name": "object" } }, + "minDate": { "type": { "name": "object" } }, "name": { "type": { "name": "string" } }, "onChange": { "type": { "name": "func" }, @@ -63,7 +63,7 @@ }, "readOnly": { "type": { "name": "bool" }, "default": "false" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used." }, "required": { "type": { "name": "bool" }, "default": "false" }, @@ -107,7 +107,7 @@ "unstableFieldRef": { "type": { "name": "union", "description": "func
| object" } }, - "value": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "value": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "variant": { "type": { "name": "enum", diff --git a/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json b/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json index 2e611014ece1d..5ea7d709048a7 100644 --- a/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json @@ -10,7 +10,7 @@ }, "default": "'primary'" }, - "defaultValue": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableFuture": { "type": { "name": "bool" }, "default": "false" }, "disableIgnoringDatePartForTimeValidation": { "type": { "name": "bool" }, "default": "false" }, @@ -38,12 +38,12 @@ }, "default": "'none'" }, - "maxDate": { "type": { "name": "any" } }, - "maxDateTime": { "type": { "name": "any" } }, - "maxTime": { "type": { "name": "any" } }, - "minDate": { "type": { "name": "any" } }, - "minDateTime": { "type": { "name": "any" } }, - "minTime": { "type": { "name": "any" } }, + "maxDate": { "type": { "name": "object" } }, + "maxDateTime": { "type": { "name": "object" } }, + "maxTime": { "type": { "name": "object" } }, + "minDate": { "type": { "name": "object" } }, + "minDateTime": { "type": { "name": "object" } }, + "minTime": { "type": { "name": "object" } }, "minutesStep": { "type": { "name": "number" }, "default": "1" }, "name": { "type": { "name": "string" } }, "onChange": { @@ -70,7 +70,7 @@ }, "readOnly": { "type": { "name": "bool" }, "default": "false" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used." }, "required": { "type": { "name": "bool" }, "default": "false" }, @@ -122,7 +122,7 @@ "unstableFieldRef": { "type": { "name": "union", "description": "func
| object" } }, - "value": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "value": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "variant": { "type": { "name": "enum", diff --git a/docs/pages/x/api/date-pickers/single-input-time-range-field.json b/docs/pages/x/api/date-pickers/single-input-time-range-field.json index 4e6f7c5e11346..3c00fc18fb75d 100644 --- a/docs/pages/x/api/date-pickers/single-input-time-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-time-range-field.json @@ -10,7 +10,7 @@ }, "default": "'primary'" }, - "defaultValue": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableFuture": { "type": { "name": "bool" }, "default": "false" }, "disableIgnoringDatePartForTimeValidation": { "type": { "name": "bool" }, "default": "false" }, @@ -38,8 +38,8 @@ }, "default": "'none'" }, - "maxTime": { "type": { "name": "any" } }, - "minTime": { "type": { "name": "any" } }, + "maxTime": { "type": { "name": "object" } }, + "minTime": { "type": { "name": "object" } }, "minutesStep": { "type": { "name": "number" }, "default": "1" }, "name": { "type": { "name": "string" } }, "onChange": { @@ -66,7 +66,7 @@ }, "readOnly": { "type": { "name": "bool" }, "default": "false" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used." }, "required": { "type": { "name": "bool" }, "default": "false" }, @@ -110,7 +110,7 @@ "unstableFieldRef": { "type": { "name": "union", "description": "func
| object" } }, - "value": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "value": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "variant": { "type": { "name": "enum", 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 32cf7df69729f..169d9df97f5b2 100644 --- a/docs/pages/x/api/date-pickers/static-date-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-picker.json @@ -10,7 +10,7 @@ "returned": "string" } }, - "defaultValue": { "type": { "name": "any" } }, + "defaultValue": { "type": { "name": "object" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableFuture": { "type": { "name": "bool" }, "default": "false" }, "disableHighlightToday": { "type": { "name": "bool" }, "default": "false" }, @@ -23,8 +23,8 @@ "fixedWeekNumber": { "type": { "name": "number" }, "default": "undefined" }, "loading": { "type": { "name": "bool" }, "default": "false" }, "localeText": { "type": { "name": "object" } }, - "maxDate": { "type": { "name": "any" } }, - "minDate": { "type": { "name": "any" } }, + "maxDate": { "type": { "name": "object" } }, + "minDate": { "type": { "name": "object" } }, "monthsPerRow": { "type": { "name": "enum", "description": "3
| 4" }, "default": "3" @@ -78,7 +78,7 @@ "default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { @@ -136,7 +136,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "view": { "type": { "name": "enum", 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 13df18576c7c3..7147a6a57dd4b 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 @@ -22,7 +22,7 @@ "type": { "name": "enum", "description": "'end'
| 'start'" }, "default": "'start'" }, - "defaultValue": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "disableAutoMonthSwitching": { "type": { "name": "bool" }, "default": "false" }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableDragEditing": { "type": { "name": "bool" }, "default": "false" }, @@ -37,8 +37,8 @@ "fixedWeekNumber": { "type": { "name": "number" }, "default": "undefined" }, "loading": { "type": { "name": "bool" }, "default": "false" }, "localeText": { "type": { "name": "object" } }, - "maxDate": { "type": { "name": "any" } }, - "minDate": { "type": { "name": "any" } }, + "maxDate": { "type": { "name": "object" } }, + "minDate": { "type": { "name": "object" } }, "onAccept": { "type": { "name": "func" }, "signature": { "type": "function(value: TValue) => void", "describedArgs": ["value"] } @@ -79,7 +79,7 @@ "default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { @@ -121,7 +121,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "value": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "viewRenderers": { "type": { "name": "shape", "description": "{ day?: func }" } } }, "name": "StaticDateRangePicker", 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 de69515b02677..49608fc99029e 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 @@ -12,7 +12,7 @@ "returned": "string" } }, - "defaultValue": { "type": { "name": "any" } }, + "defaultValue": { "type": { "name": "object" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableFuture": { "type": { "name": "bool" }, "default": "false" }, "disableHighlightToday": { "type": { "name": "bool" }, "default": "false" }, @@ -26,12 +26,12 @@ "fixedWeekNumber": { "type": { "name": "number" }, "default": "undefined" }, "loading": { "type": { "name": "bool" }, "default": "false" }, "localeText": { "type": { "name": "object" } }, - "maxDate": { "type": { "name": "any" } }, - "maxDateTime": { "type": { "name": "any" } }, - "maxTime": { "type": { "name": "any" } }, - "minDate": { "type": { "name": "any" } }, - "minDateTime": { "type": { "name": "any" } }, - "minTime": { "type": { "name": "any" } }, + "maxDate": { "type": { "name": "object" } }, + "maxDateTime": { "type": { "name": "object" } }, + "maxTime": { "type": { "name": "object" } }, + "minDate": { "type": { "name": "object" } }, + "minDateTime": { "type": { "name": "object" } }, + "minTime": { "type": { "name": "object" } }, "minutesStep": { "type": { "name": "number" }, "default": "1" }, "monthsPerRow": { "type": { "name": "enum", "description": "3
| 4" }, @@ -86,7 +86,7 @@ "default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { @@ -152,7 +152,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "view": { "type": { "name": "enum", 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 d0995c15ec712..5cf72df9cbf49 100644 --- a/docs/pages/x/api/date-pickers/static-time-picker.json +++ b/docs/pages/x/api/date-pickers/static-time-picker.json @@ -3,7 +3,7 @@ "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, "ampmInClock": { "type": { "name": "bool" }, "default": "true on desktop, false on mobile" }, "autoFocus": { "type": { "name": "bool" } }, - "defaultValue": { "type": { "name": "any" } }, + "defaultValue": { "type": { "name": "object" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableFuture": { "type": { "name": "bool" }, "default": "false" }, "disableIgnoringDatePartForTimeValidation": { "type": { "name": "bool" }, "default": "false" }, @@ -13,8 +13,8 @@ "default": "\"mobile\"" }, "localeText": { "type": { "name": "object" } }, - "maxTime": { "type": { "name": "any" } }, - "minTime": { "type": { "name": "any" } }, + "maxTime": { "type": { "name": "object" } }, + "minTime": { "type": { "name": "object" } }, "minutesStep": { "type": { "name": "number" }, "default": "1" }, "onAccept": { "type": { "name": "func" }, @@ -57,7 +57,7 @@ "default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "shouldDisableTime": { @@ -89,7 +89,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "view": { "type": { "name": "enum", diff --git a/docs/pages/x/api/date-pickers/time-clock.json b/docs/pages/x/api/date-pickers/time-clock.json index 86d8ec9214f7c..f569a5c964f98 100644 --- a/docs/pages/x/api/date-pickers/time-clock.json +++ b/docs/pages/x/api/date-pickers/time-clock.json @@ -4,7 +4,7 @@ "ampmInClock": { "type": { "name": "bool" }, "default": "false" }, "autoFocus": { "type": { "name": "bool" } }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, - "defaultValue": { "type": { "name": "any" } }, + "defaultValue": { "type": { "name": "object" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableFuture": { "type": { "name": "bool" }, "default": "false" }, "disableIgnoringDatePartForTimeValidation": { "type": { "name": "bool" }, "default": "false" }, @@ -15,8 +15,8 @@ "description": "'hours'
| 'minutes'
| 'seconds'" } }, - "maxTime": { "type": { "name": "any" } }, - "minTime": { "type": { "name": "any" } }, + "maxTime": { "type": { "name": "object" } }, + "minTime": { "type": { "name": "object" } }, "minutesStep": { "type": { "name": "number" }, "default": "1" }, "onChange": { "type": { "name": "func" }, @@ -44,7 +44,7 @@ }, "readOnly": { "type": { "name": "bool" }, "default": "false" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid time using the validation props, except callbacks such as `shouldDisableTime`." }, "shouldDisableTime": { @@ -76,7 +76,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "view": { "type": { "name": "enum", diff --git a/docs/pages/x/api/date-pickers/time-field.json b/docs/pages/x/api/date-pickers/time-field.json index ad24b2bd2a52c..8f87d61b8c3ad 100644 --- a/docs/pages/x/api/date-pickers/time-field.json +++ b/docs/pages/x/api/date-pickers/time-field.json @@ -10,7 +10,7 @@ }, "default": "'primary'" }, - "defaultValue": { "type": { "name": "any" } }, + "defaultValue": { "type": { "name": "object" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableFuture": { "type": { "name": "bool" }, "default": "false" }, "disableIgnoringDatePartForTimeValidation": { "type": { "name": "bool" }, "default": "false" }, @@ -38,8 +38,8 @@ }, "default": "'none'" }, - "maxTime": { "type": { "name": "any" } }, - "minTime": { "type": { "name": "any" } }, + "maxTime": { "type": { "name": "object" } }, + "minTime": { "type": { "name": "object" } }, "minutesStep": { "type": { "name": "number" }, "default": "1" }, "name": { "type": { "name": "string" } }, "onChange": { @@ -66,7 +66,7 @@ }, "readOnly": { "type": { "name": "bool" }, "default": "false" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used." }, "required": { "type": { "name": "bool" }, "default": "false" }, @@ -110,7 +110,7 @@ "unstableFieldRef": { "type": { "name": "union", "description": "func
| object" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "variant": { "type": { "name": "enum", diff --git a/docs/pages/x/api/date-pickers/time-picker.json b/docs/pages/x/api/date-pickers/time-picker.json index 071c5ad8f4c25..d3386734875f2 100644 --- a/docs/pages/x/api/date-pickers/time-picker.json +++ b/docs/pages/x/api/date-pickers/time-picker.json @@ -7,7 +7,7 @@ "type": { "name": "bool" }, "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)." }, - "defaultValue": { "type": { "name": "any" } }, + "defaultValue": { "type": { "name": "object" } }, "desktopModeMediaQuery": { "type": { "name": "string" }, "default": "'@media (pointer: fine)'" @@ -25,8 +25,8 @@ "inputRef": { "type": { "name": "custom", "description": "ref" } }, "label": { "type": { "name": "node" } }, "localeText": { "type": { "name": "object" } }, - "maxTime": { "type": { "name": "any" } }, - "minTime": { "type": { "name": "any" } }, + "maxTime": { "type": { "name": "object" } }, + "minTime": { "type": { "name": "object" } }, "minutesStep": { "type": { "name": "number" }, "default": "1" }, "name": { "type": { "name": "string" } }, "onAccept": { @@ -75,7 +75,7 @@ "default": "`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13" }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "selectedSections": { @@ -122,7 +122,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "view": { "type": { "name": "enum", diff --git a/docs/pages/x/api/date-pickers/year-calendar.json b/docs/pages/x/api/date-pickers/year-calendar.json index 2d97dfcb66042..cd8b9dc24feb7 100644 --- a/docs/pages/x/api/date-pickers/year-calendar.json +++ b/docs/pages/x/api/date-pickers/year-calendar.json @@ -1,20 +1,20 @@ { "props": { "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, - "defaultValue": { "type": { "name": "any" } }, + "defaultValue": { "type": { "name": "object" } }, "disabled": { "type": { "name": "bool" } }, "disableFuture": { "type": { "name": "bool" }, "default": "false" }, "disableHighlightToday": { "type": { "name": "bool" }, "default": "false" }, "disablePast": { "type": { "name": "bool" }, "default": "false" }, - "maxDate": { "type": { "name": "any" } }, - "minDate": { "type": { "name": "any" } }, + "maxDate": { "type": { "name": "object" } }, + "minDate": { "type": { "name": "object" } }, "onChange": { "type": { "name": "func" }, "signature": { "type": "function(value: TDate) => void", "describedArgs": ["value"] } }, "readOnly": { "type": { "name": "bool" } }, "referenceDate": { - "type": { "name": "any" }, + "type": { "name": "object" }, "default": "The closest valid year using the validation props, except callbacks such as `shouldDisableYear`." }, "shouldDisableYear": { @@ -40,7 +40,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "yearsPerRow": { "type": { "name": "enum", "description": "3
| 4" }, "default": "3" diff --git a/docs/public/static/docs-infra/forking-an-example-dark.png b/docs/public/static/docs-infra/forking-an-example-dark.png new file mode 100644 index 0000000000000..1e388c6ec7603 Binary files /dev/null and b/docs/public/static/docs-infra/forking-an-example-dark.png differ diff --git a/docs/public/static/docs-infra/forking-an-example.png b/docs/public/static/docs-infra/forking-an-example.png new file mode 100644 index 0000000000000..d1a46bb379590 Binary files /dev/null and b/docs/public/static/docs-infra/forking-an-example.png differ diff --git a/docs/public/static/x/watermark-dark.png b/docs/public/static/x/watermark-dark.png index 09c5dd851364c..2275f8c25aa68 100644 Binary files a/docs/public/static/x/watermark-dark.png and b/docs/public/static/x/watermark-dark.png differ diff --git a/docs/public/static/x/watermark-light.png b/docs/public/static/x/watermark-light.png index 49cc374b73390..53e19304d1e1f 100644 Binary files a/docs/public/static/x/watermark-light.png and b/docs/public/static/x/watermark-light.png differ diff --git a/docs/scripts/createXTypeScriptProjects.ts b/docs/scripts/createXTypeScriptProjects.ts index 94239b95fe9a1..43d10d66f14b5 100644 --- a/docs/scripts/createXTypeScriptProjects.ts +++ b/docs/scripts/createXTypeScriptProjects.ts @@ -29,7 +29,7 @@ export interface XTypeScriptProject extends Omit { } export type XProjectNames = - | 'x-license-pro' + | 'x-license' | 'x-data-grid' | 'x-data-grid-pro' | 'x-data-grid-premium' @@ -117,10 +117,10 @@ export const createXTypeScriptProjects = () => { const projects: XTypeScriptProjects = new Map(); projects.set( - 'x-license-pro', + 'x-license', createXTypeScriptProject({ - name: 'x-license-pro', - rootPath: path.join(workspaceRoot, 'packages/x-license-pro'), + name: 'x-license', + rootPath: path.join(workspaceRoot, 'packages/x-license'), entryPointPath: 'src/index.ts', documentationFolderName: 'license', }), @@ -130,7 +130,7 @@ export const createXTypeScriptProjects = () => { 'x-data-grid', createXTypeScriptProject({ name: 'x-data-grid', - rootPath: path.join(workspaceRoot, 'packages/grid/x-data-grid'), + rootPath: path.join(workspaceRoot, 'packages/x-data-grid'), entryPointPath: 'src/index.ts', documentationFolderName: 'data-grid', getComponentsWithPropTypes: getComponentPaths({ @@ -152,7 +152,7 @@ export const createXTypeScriptProjects = () => { 'x-data-grid-pro', createXTypeScriptProject({ name: 'x-data-grid-pro', - rootPath: path.join(workspaceRoot, 'packages/grid/x-data-grid-pro'), + rootPath: path.join(workspaceRoot, 'packages/x-data-grid-pro'), entryPointPath: 'src/index.ts', documentationFolderName: 'data-grid', getComponentsWithPropTypes: getComponentPaths({ @@ -169,7 +169,7 @@ export const createXTypeScriptProjects = () => { 'x-data-grid-premium', createXTypeScriptProject({ name: 'x-data-grid-premium', - rootPath: path.join(workspaceRoot, 'packages/grid/x-data-grid-premium'), + rootPath: path.join(workspaceRoot, 'packages/x-data-grid-premium'), entryPointPath: 'src/index.ts', documentationFolderName: 'data-grid', getComponentsWithPropTypes: getComponentPaths({ @@ -186,7 +186,7 @@ export const createXTypeScriptProjects = () => { 'x-data-grid-generator', createXTypeScriptProject({ name: 'x-data-grid-generator', - rootPath: path.join(workspaceRoot, 'packages/grid/x-data-grid-generator'), + rootPath: path.join(workspaceRoot, 'packages/x-data-grid-generator'), entryPointPath: 'src/index.ts', documentationFolderName: 'data-grid', }), diff --git a/docs/scripts/generateProptypes.ts b/docs/scripts/generateProptypes.ts index 63620878303cb..4a4473dad12b6 100644 --- a/docs/scripts/generateProptypes.ts +++ b/docs/scripts/generateProptypes.ts @@ -7,6 +7,30 @@ import { fixBabelGeneratorIssues, fixLineEndings } from '@mui-internal/docs-util import { createXTypeScriptProjects, XTypeScriptProject } from './createXTypeScriptProjects'; async function generateProptypes(project: XTypeScriptProject, sourceFile: string) { + const isTDate = (name: string) => { + if (['x-date-pickers', 'x-date-pickers-pro'].includes(project.name)) { + const T_DATE_PROPS = [ + 'value', + 'defaultValue', + 'minDate', + 'maxDate', + 'minDateTime', + 'maxDateTime', + 'minTime', + 'maxTime', + 'referenceDate', + 'day', + 'currentMonth', + ]; + + if (T_DATE_PROPS.includes(name)) { + return true; + } + } + + return false; + }; + const components = getPropTypesFromFile({ filePath: sourceFile, project, @@ -44,8 +68,13 @@ async function generateProptypes(project: XTypeScriptProject, sourceFile: string return false; } + if (isTDate(name)) { + return false; + } + return undefined; }, + shouldUseObjectForDate: ({ name }) => isTDate(name), }); if (components.length === 0) { diff --git a/docs/scripts/reportBrokenLinks.js b/docs/scripts/reportBrokenLinks.js index b63814708e958..d1dffe84647b6 100644 --- a/docs/scripts/reportBrokenLinks.js +++ b/docs/scripts/reportBrokenLinks.js @@ -54,7 +54,7 @@ write('Broken links found by `yarn docs:link-check` that exist:\n'); Object.keys(usedLinks) .filter((link) => link.startsWith('/')) .filter((link) => !availableLinks[removeUnsupportedHash(link)]) - // unstyled sections are added by scripts (can not be found in markdown) + // unstyled sections are added by scripts (cannot be found in markdown) .filter((link) => !link.includes('#unstyled')) .filter((link) => UNSUPPORTED_PATHS.every((unsupportedPath) => !link.includes(unsupportedPath))) .sort() diff --git a/docs/src/modules/components/PickersRenderingInstructions.js b/docs/src/modules/components/PickersRenderingInstructions.js index c5fe8c848b3d6..c42d8104486cb 100644 --- a/docs/src/modules/components/PickersRenderingInstructions.js +++ b/docs/src/modules/components/PickersRenderingInstructions.js @@ -21,7 +21,16 @@ export default function PickersRenderingInstructions() { const commandLines = [ `import { LocalizationProvider } from '${componentPackage}';`, + ...(libraryUsed === 'date-fns' + ? ['// If you are using date-fns v2.x, please import `AdapterDateFns`'] + : []), `import { ${adapterName} } from '${componentPackage}/${adapterName}'`, + ...(libraryUsed === 'date-fns' + ? [ + '// If you are using date-fns v3.x, please import the v3 adapter', + `import { ${adapterName} } from '${componentPackage}/AdapterDateFnsV3'`, + ] + : []), '', 'function App({ children }) {', ' return (', diff --git a/docs/translations/api-docs/charts/bar-chart/bar-chart.json b/docs/translations/api-docs/charts/bar-chart/bar-chart.json index 82d7351d03891..2cad135e80714 100644 --- a/docs/translations/api-docs/charts/bar-chart/bar-chart.json +++ b/docs/translations/api-docs/charts/bar-chart/bar-chart.json @@ -63,9 +63,9 @@ "axisLine": "", "axisTick": "", "axisTickLabel": "", - "bar": "", + "bar": "The component that renders the bar.", "itemContent": "", - "legend": "", + "legend": "Custom rendering of the legend.", "popper": "" } } diff --git a/docs/translations/api-docs/charts/bar-element/bar-element.json b/docs/translations/api-docs/charts/bar-element/bar-element.json index a19987e3c9880..af7c71ba194bc 100644 --- a/docs/translations/api-docs/charts/bar-element/bar-element.json +++ b/docs/translations/api-docs/charts/bar-element/bar-element.json @@ -4,5 +4,6 @@ "slotProps": { "description": "The props used for each component slot." }, "slots": { "description": "Overridable component slots." } }, - "classDescriptions": { "root": { "description": "Styles applied to the root element." } } + "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, + "slotDescriptions": { "bar": "The component that renders the bar." } } diff --git a/docs/translations/api-docs/charts/bar-plot/bar-plot.json b/docs/translations/api-docs/charts/bar-plot/bar-plot.json index 509120eaefd28..73f953ae93154 100644 --- a/docs/translations/api-docs/charts/bar-plot/bar-plot.json +++ b/docs/translations/api-docs/charts/bar-plot/bar-plot.json @@ -13,5 +13,5 @@ "slots": { "description": "Overridable component slots." } }, "classDescriptions": {}, - "slotDescriptions": { "bar": "" } + "slotDescriptions": { "bar": "The component that renders the bar." } } diff --git a/docs/translations/api-docs/charts/charts-legend/charts-legend.json b/docs/translations/api-docs/charts/charts-legend/charts-legend.json index b4c860e2598c4..eea7aaf8c2b2c 100644 --- a/docs/translations/api-docs/charts/charts-legend/charts-legend.json +++ b/docs/translations/api-docs/charts/charts-legend/charts-legend.json @@ -23,5 +23,5 @@ }, "series": { "description": "Styles applied to {{nodeName}}.", "nodeName": "a series element" } }, - "slotDescriptions": { "legend": "" } + "slotDescriptions": { "legend": "Custom rendering of the legend." } } diff --git a/docs/translations/api-docs/charts/default-charts-legend/default-charts-legend.json b/docs/translations/api-docs/charts/default-charts-legend/default-charts-legend.json new file mode 100644 index 0000000000000..d39cdf7e37368 --- /dev/null +++ b/docs/translations/api-docs/charts/default-charts-legend/default-charts-legend.json @@ -0,0 +1,23 @@ +{ + "componentDescription": "", + "propDescriptions": { + "classes": { "description": "Override or extend the styles applied to the component." }, + "direction": { + "description": "The direction of the legend layout. The default depends on the chart." + }, + "hidden": { "description": "Set to true to hide the legend." }, + "itemGap": { "description": "Space between two legend items (in px)." }, + "itemMarkHeight": { "description": "Height of the item mark (in px)." }, + "itemMarkWidth": { "description": "Width of the item mark (in px)." }, + "labelStyle": { "description": "Style applied to legend labels." }, + "markGap": { "description": "Space between the mark and the label (in px)." }, + "padding": { + "description": "Legend padding (in px). Can either be a single number, or an object with top, left, bottom, right properties." + } + }, + "classDescriptions": { + "mark": { "description": "" }, + "root": { "description": "" }, + "series": { "description": "" } + } +} diff --git a/docs/translations/api-docs/charts/line-chart/line-chart.json b/docs/translations/api-docs/charts/line-chart/line-chart.json index 444ba852a39c8..2091846411120 100644 --- a/docs/translations/api-docs/charts/line-chart/line-chart.json +++ b/docs/translations/api-docs/charts/line-chart/line-chart.json @@ -61,7 +61,7 @@ "axisTick": "", "axisTickLabel": "", "itemContent": "", - "legend": "", + "legend": "Custom rendering of the legend.", "line": "The component that renders the line.", "lineHighlight": "", "mark": "", diff --git a/docs/translations/api-docs/charts/pie-chart/pie-chart.json b/docs/translations/api-docs/charts/pie-chart/pie-chart.json index c9c6863b0053a..b61f2c6346e7e 100644 --- a/docs/translations/api-docs/charts/pie-chart/pie-chart.json +++ b/docs/translations/api-docs/charts/pie-chart/pie-chart.json @@ -46,7 +46,7 @@ "axisTick": "", "axisTickLabel": "", "itemContent": "", - "legend": "", + "legend": "Custom rendering of the legend.", "pieArc": "", "pieArcLabel": "", "popper": "" diff --git a/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json b/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json index 0922311d29506..7cd50ba39a31e 100644 --- a/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json +++ b/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json @@ -59,7 +59,7 @@ "axisTick": "", "axisTickLabel": "", "itemContent": "", - "legend": "", + "legend": "Custom rendering of the legend.", "popper": "", "scatter": "" } diff --git a/docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json b/docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json index 6e43932009df6..30ad9ccf5fb9f 100644 --- a/docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json +++ b/docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json @@ -42,7 +42,7 @@ "slotDescriptions": { "area": "The component that renders the area.", "axisContent": "", - "bar": "", + "bar": "The component that renders the bar.", "itemContent": "", "line": "The component that renders the line.", "lineHighlight": "", diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json index 212ba37fe1a68..1cff481853a86 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json @@ -233,7 +233,7 @@ }, "loading": { "description": "If true, a loading overlay is displayed." }, "localeText": { - "description": "Set the locale text of the Data Grid. You can find all the translation keys supported in the source in the GitHub repository." + "description": "Set the locale text of the Data Grid. You can find all the translation keys supported in the source in the GitHub repository." }, "logger": { "description": "Pass a custom logger in the components that implements the Logger interface." diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json index d16d75277d3dc..80d95b46ddb16 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json @@ -214,7 +214,7 @@ }, "loading": { "description": "If true, a loading overlay is displayed." }, "localeText": { - "description": "Set the locale text of the Data Grid. You can find all the translation keys supported in the source in the GitHub repository." + "description": "Set the locale text of the Data Grid. You can find all the translation keys supported in the source in the GitHub repository." }, "logger": { "description": "Pass a custom logger in the components that implements the Logger interface." diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json index feed9462a9c07..e39db6e5df53a 100644 --- a/docs/translations/api-docs/data-grid/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid/data-grid.json @@ -150,7 +150,7 @@ }, "loading": { "description": "If true, a loading overlay is displayed." }, "localeText": { - "description": "Set the locale text of the Data Grid. You can find all the translation keys supported in the source in the GitHub repository." + "description": "Set the locale text of the Data Grid. You can find all the translation keys supported in the source in the GitHub repository." }, "logger": { "description": "Pass a custom logger in the components that implements the Logger interface." diff --git a/package.json b/package.json index f5a396e92adae..c7538e6268933 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { - "version": "7.0.0-beta.1", + "version": "7.0.0-beta.2", "private": true, "scripts": { "start": "yarn && yarn docs:dev", "docs:dev": "yarn workspace docs dev", - "docs:start": "yarn workspace docs start", + "docs:serve": "yarn workspace docs serve", "docs:create-playground": "yarn workspace docs create-playground", "docs:api": "NODE_OPTIONS=--max-old-space-size=4096 yarn docs:api:build && yarn docs:api:buildX", "docs:api:build": "cross-env BABEL_ENV=development babel-node -i \"/node_modules/(?!@mui)/\" -x .ts,.tsx,.js ./scripts/buildApiDocs/index.ts", @@ -84,14 +84,14 @@ "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@mnajdova/enzyme-adapter-react-18": "^0.2.0", - "@mui/icons-material": "^5.15.7", - "@mui/material": "^5.15.7", + "@mui/icons-material": "^5.15.9", + "@mui/material": "^5.15.9", "@mui/monorepo": "https://github.com/mui/material-ui.git#master", - "@mui/utils": "^5.15.7", + "@mui/utils": "^5.15.9", "@next/eslint-plugin-next": "14.0.4", "@octokit/plugin-retry": "^6.0.1", "@octokit/rest": "^20.0.2", - "@playwright/test": "1.41.1", + "@playwright/test": "1.41.2", "@testing-library/react": "^14.2.1", "@types/babel__core": "^7.20.5", "@types/chai": "^4.3.11", @@ -100,8 +100,8 @@ "@types/mocha": "^10.0.6", "@types/node": "^18.19.10", "@types/prettier": "^2.7.3", - "@types/react": "^18.2.48", - "@types/react-dom": "^18.2.18", + "@types/react": "^18.2.55", + "@types/react-dom": "^18.2.19", "@types/react-test-renderer": "^18.0.7", "@types/requestidlecallback": "^0.3.7", "@types/sinon": "^10.0.20", @@ -109,7 +109,7 @@ "@typescript-eslint/eslint-plugin": "^6.20.0", "@typescript-eslint/parser": "^6.20.0", "autoprefixer": "^10.4.17", - "axe-core": "4.8.3", + "axe-core": "4.8.4", "babel-loader": "^9.1.3", "babel-plugin-istanbul": "^6.1.1", "babel-plugin-module-resolver": "^5.0.0", @@ -171,7 +171,7 @@ "typescript": "^5.3.3", "unist-util-visit": "^2.0.3", "util": "^0.12.5", - "webpack": "^5.90.0", + "webpack": "^5.90.1", "webpack-cli": "^5.1.4", "yargs": "^17.7.2", "yarn-deduplicate": "^6.0.2" @@ -182,8 +182,6 @@ "workspaces": { "packages": [ "packages/*", - "!packages/grid", - "packages/grid/*", "docs" ], "nohoist": [ diff --git a/packages/grid/x-data-grid-generator/tsconfig.json b/packages/grid/x-data-grid-generator/tsconfig.json deleted file mode 100644 index 4477ca841852a..0000000000000 --- a/packages/grid/x-data-grid-generator/tsconfig.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": "../../../tsconfig.json", - "compilerOptions": { - "types": ["react", "mocha", "node"] - }, - "include": ["src/**/*", "../../../node_modules/@mui/material/themeCssVarsAugmentation"] -} diff --git a/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts b/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts deleted file mode 100644 index b22b600d1c4cc..0000000000000 --- a/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts +++ /dev/null @@ -1,95 +0,0 @@ -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 type { InputLabelProps } from '@mui/material/InputLabel'; -import { PopperProps } from '@mui/material/Popper'; -import { TablePaginationProps } from '@mui/material/TablePagination'; -import { ChipProps } from '@mui/material/Chip'; -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'; -import type { GridColumnsManagementProps } from '../components/columnsManagement/GridColumnsManagement'; -import type { GridRowCountProps } from '../components'; - -// 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 BaseInputLabelPropsOverrides {} -export interface BaseSelectOptionPropsOverrides {} -export interface BaseChipPropsOverrides {} -export interface CellPropsOverrides {} -export interface ToolbarPropsOverrides {} -export interface ColumnHeaderFilterIconButtonPropsOverrides {} -export interface ColumnMenuPropsOverrides {} -export interface ColumnsPanelPropsOverrides {} -export interface ColumnsManagementPropsOverrides {} -export interface FilterPanelPropsOverrides {} -export interface FooterPropsOverrides {} -export interface FooterRowCountOverrides {} -export interface PaginationPropsOverrides {} -export interface LoadingOverlayPropsOverrides {} -export interface NoResultsOverlayPropsOverrides {} -export interface NoRowsOverlayPropsOverrides {} -export interface PanelPropsOverrides {} -export interface RowPropsOverrides {} - -type SlotProps = Partial; - -/** - * Overridable components props dynamically passed to the component at rendering. - */ -export interface GridSlotsComponentsProps { - baseCheckbox?: SlotProps; - baseTextField?: SlotProps; - baseFormControl?: SlotProps; - baseSelect?: SlotProps; - baseSwitch?: SlotProps; - baseButton?: SlotProps; - baseIconButton?: SlotProps; - basePopper?: SlotProps; - baseTooltip?: SlotProps; - baseInputLabel?: SlotProps; - baseSelectOption?: SlotProps< - { native: boolean; value: any; children?: React.ReactNode }, - BaseSelectOptionPropsOverrides - >; - baseChip?: SlotProps; - cell?: SlotProps; - columnHeaderFilterIconButton?: SlotProps< - ColumnHeaderFilterIconButtonProps, - ColumnHeaderFilterIconButtonPropsOverrides - >; - columnMenu?: SlotProps; - columnsPanel?: SlotProps; - columnsManagement?: SlotProps; - filterPanel?: SlotProps; - footer?: SlotProps; - footerRowCount?: SlotProps; - loadingOverlay?: SlotProps; - noResultsOverlay?: SlotProps; - noRowsOverlay?: SlotProps; - pagination?: SlotProps; - panel?: SlotProps; - row?: SlotProps; - toolbar?: SlotProps; -} diff --git a/packages/x-charts/package.json b/packages/x-charts/package.json index 37678d8850cdc..f530ee2309c9e 100644 --- a/packages/x-charts/package.json +++ b/packages/x-charts/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-charts", - "version": "7.0.0-beta.1", + "version": "7.0.0-beta.2", "description": "The community edition of the charts components (MUI X).", "author": "MUI Team", "main": "./src/index.js", @@ -40,9 +40,9 @@ }, "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/base": "^5.0.0-beta.34", - "@mui/system": "^5.15.7", - "@mui/utils": "^5.15.7", + "@mui/base": "^5.0.0-beta.36", + "@mui/system": "^5.15.9", + "@mui/utils": "^5.15.9", "@react-spring/rafz": "^9.7.3", "@react-spring/web": "^9.7.3", "clsx": "^2.1.0", diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx index 3a1756447225c..8cdf235babe7d 100644 --- a/packages/x-charts/src/BarChart/BarChart.tsx +++ b/packages/x-charts/src/BarChart/BarChart.tsx @@ -208,7 +208,7 @@ BarChart.propTypes = { */ bottomAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -266,7 +266,7 @@ BarChart.propTypes = { */ leftAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -339,7 +339,7 @@ BarChart.propTypes = { */ rightAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -403,7 +403,7 @@ BarChart.propTypes = { */ topAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -447,7 +447,7 @@ BarChart.propTypes = { */ xAxis: PropTypes.arrayOf( PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, data: PropTypes.array, dataKey: PropTypes.string, @@ -455,13 +455,14 @@ BarChart.propTypes = { disableTicks: PropTypes.bool, fill: PropTypes.string, hideTooltip: PropTypes.bool, - id: PropTypes.string, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), label: PropTypes.string, labelFontSize: PropTypes.number, labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), + reverse: PropTypes.bool, scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), slotProps: PropTypes.object, slots: PropTypes.object, @@ -487,7 +488,7 @@ BarChart.propTypes = { */ yAxis: PropTypes.arrayOf( PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, data: PropTypes.array, dataKey: PropTypes.string, @@ -495,13 +496,14 @@ BarChart.propTypes = { disableTicks: PropTypes.bool, fill: PropTypes.string, hideTooltip: PropTypes.bool, - id: PropTypes.string, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), label: PropTypes.string, labelFontSize: PropTypes.number, labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), + reverse: PropTypes.bool, scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), slotProps: PropTypes.object, slots: PropTypes.object, diff --git a/packages/x-charts/src/BarChart/BarElement.tsx b/packages/x-charts/src/BarChart/BarElement.tsx index be10fbc3f29f4..1eeaef8c2135f 100644 --- a/packages/x-charts/src/BarChart/BarElement.tsx +++ b/packages/x-charts/src/BarChart/BarElement.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import composeClasses from '@mui/utils/composeClasses'; -import { useSlotProps, SlotComponentProps } from '@mui/base/utils'; +import { useSlotProps } from '@mui/base/utils'; import generateUtilityClass from '@mui/utils/generateUtilityClass'; import { styled } from '@mui/material/styles'; import { color as d3Color } from 'd3-color'; @@ -14,6 +14,7 @@ import { } from '../hooks/useInteractionItemProps'; import { InteractionContext } from '../context/InteractionProvider'; import { HighlightScope } from '../context/HighlightProvider'; +import { SeriesId } from '../models/seriesType/common'; export interface BarElementClasses { /** Styles applied to the root element. */ @@ -23,7 +24,7 @@ export interface BarElementClasses { export type BarElementClassKey = keyof BarElementClasses; export interface BarElementOwnerState { - id: string; + id: SeriesId; dataIndex: number; color: string; isFaded: boolean; @@ -62,27 +63,37 @@ export const BarElementPath = styled(animated.rect, { opacity: (ownerState.isFaded && 0.3) || 1, })); +interface BarProps extends Omit, 'id' | 'color'> { + highlightScope?: Partial; + onClick?: (event: React.MouseEvent) => void; + ownerState: BarElementOwnerState; +} + +export interface BarElementSlots { + /** + * The component that renders the bar. + * @default BarElementPath + */ + bar?: React.JSXElementConstructor; +} + +export interface BarElementSlotProps { + bar?: Partial; +} + export type BarElementProps = Omit & - React.ComponentPropsWithoutRef<'path'> & { + Omit, 'id'> & { highlightScope?: Partial; /** * The props used for each component slot. * @default {} */ - slotProps?: { - bar?: SlotComponentProps<'path', {}, BarElementOwnerState>; - }; + slotProps?: BarElementSlotProps; /** * Overridable component slots. * @default {} */ - slots?: { - /** - * The component that renders the bar. - * @default BarElementPath - */ - bar?: React.ElementType; - }; + slots?: BarElementSlots; }; function BarElement(props: BarElementProps) { @@ -148,6 +159,7 @@ BarElement.propTypes = { faded: PropTypes.oneOf(['global', 'none', 'series']), highlighted: PropTypes.oneOf(['item', 'none', 'series']), }), + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, /** * The props used for each component slot. * @default {} diff --git a/packages/x-charts/src/BarChart/BarPlot.tsx b/packages/x-charts/src/BarChart/BarPlot.tsx index 304d6f1dd45bc..ed56665c69ad2 100644 --- a/packages/x-charts/src/BarChart/BarPlot.tsx +++ b/packages/x-charts/src/BarChart/BarPlot.tsx @@ -3,12 +3,13 @@ import PropTypes from 'prop-types'; import { useTransition } from '@react-spring/web'; import { SeriesContext } from '../context/SeriesContextProvider'; import { CartesianContext } from '../context/CartesianContextProvider'; -import { BarElement, BarElementProps } from './BarElement'; +import { BarElement, BarElementProps, BarElementSlotProps, BarElementSlots } from './BarElement'; import { isBandScaleConfig } from '../models/axis'; import { FormatterResult } from '../models/seriesType/config'; import { HighlightScope } from '../context/HighlightProvider'; import { BarItemIdentifier, BarSeriesType } from '../models'; import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants'; +import { SeriesId } from '../models/seriesType/common'; /** * Solution of the equations @@ -42,13 +43,9 @@ function getBandSize({ }; } -export interface BarPlotSlots { - bar?: React.JSXElementConstructor; -} +export interface BarPlotSlots extends BarElementSlots {} -export interface BarPlotSlotProps { - bar?: Partial; -} +export interface BarPlotSlotProps extends BarElementSlotProps {} export interface BarPlotProps extends Pick { /** @@ -68,9 +65,7 @@ export interface BarPlotProps extends Pick { const { stackedData, color } = series[seriesId]; return stackedData.map((values, dataIndex: number) => { - const bottom = Math.min(...values); - const top = Math.max(...values); + const valueCoordinates = values.map((v) => (verticalLayout ? yScale(v)! : xScale(v)!)); + + const minValueCoord = Math.min(...valueCoordinates); + const maxValueCoord = Math.max(...valueCoordinates); return { - bottom, - top, seriesId, dataIndex, layout: series[seriesId].layout, x: verticalLayout ? xScale(xAxis[xAxisKey].data?.[dataIndex])! + barOffset - : xScale(bottom)!, - y: verticalLayout ? yScale(top)! : yScale(yAxis[yAxisKey].data?.[dataIndex])! + barOffset, + : minValueCoord!, + y: verticalLayout + ? minValueCoord + : yScale(yAxis[yAxisKey].data?.[dataIndex])! + barOffset, xOrigin: xScale(0)!, yOrigin: yScale(0)!, - height: verticalLayout ? Math.abs(yScale(bottom)! - yScale(top)!) : barWidth, - width: verticalLayout ? barWidth : Math.abs(xScale(bottom)! - xScale(top)!), + height: verticalLayout ? maxValueCoord - minValueCoord : barWidth, + width: verticalLayout ? barWidth : maxValueCoord - minValueCoord, color, highlightScope: series[seriesId].highlightScope, }; diff --git a/packages/x-charts/src/BarChart/formatter.ts b/packages/x-charts/src/BarChart/formatter.ts index e7cc322ad8142..548f363c30106 100644 --- a/packages/x-charts/src/BarChart/formatter.ts +++ b/packages/x-charts/src/BarChart/formatter.ts @@ -8,6 +8,7 @@ import { } from '../models/seriesType/config'; import defaultizeValueFormatter from '../internals/defaultizeValueFormatter'; import { DefaultizedProps } from '../models/helpers'; +import { SeriesId } from '../models/seriesType/common'; let warnOnce = false; @@ -45,7 +46,7 @@ const formatter: Formatter<'bar'> = (params, dataset) => { stackingGroups.forEach((stackingGroup) => { const { ids, stackingOffset, stackingOrder } = stackingGroup; // Get stacked values, and derive the domain - const stackedSeries = d3Stack, string>() + const stackedSeries = d3Stack, SeriesId>() .keys( ids.map((id) => { // Use dataKey if needed and available diff --git a/packages/x-charts/src/ChartContainer/ChartContainer.tsx b/packages/x-charts/src/ChartContainer/ChartContainer.tsx index 6db4a0226c5bb..748552c3d10eb 100644 --- a/packages/x-charts/src/ChartContainer/ChartContainer.tsx +++ b/packages/x-charts/src/ChartContainer/ChartContainer.tsx @@ -138,7 +138,7 @@ ChartContainer.propTypes = { */ xAxis: PropTypes.arrayOf( PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, data: PropTypes.array, dataKey: PropTypes.string, @@ -146,13 +146,14 @@ ChartContainer.propTypes = { disableTicks: PropTypes.bool, fill: PropTypes.string, hideTooltip: PropTypes.bool, - id: PropTypes.string, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), label: PropTypes.string, labelFontSize: PropTypes.number, labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), + reverse: PropTypes.bool, scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), slotProps: PropTypes.object, slots: PropTypes.object, @@ -178,7 +179,7 @@ ChartContainer.propTypes = { */ yAxis: PropTypes.arrayOf( PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, data: PropTypes.array, dataKey: PropTypes.string, @@ -186,13 +187,14 @@ ChartContainer.propTypes = { disableTicks: PropTypes.bool, fill: PropTypes.string, hideTooltip: PropTypes.bool, - id: PropTypes.string, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), label: PropTypes.string, labelFontSize: PropTypes.number, labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), + reverse: PropTypes.bool, scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), slotProps: PropTypes.object, slots: PropTypes.object, diff --git a/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx b/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx index 7efd0dad09201..070f0c67d7107 100644 --- a/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx +++ b/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx @@ -4,6 +4,7 @@ import { CartesianContext } from '../context/CartesianContextProvider'; import { ChartsXAxis } from '../ChartsXAxis'; import { ChartsYAxis } from '../ChartsYAxis'; import { + AxisId, ChartsAxisSlotProps, ChartsAxisSlots, ChartsXAxisProps, @@ -49,7 +50,7 @@ export interface ChartsAxisProps { const getAxisId = ( propsValue: undefined | null | string | ChartsXAxisProps | ChartsYAxisProps, -): string | null => { +): AxisId | null => { if (propsValue == null) { return null; } @@ -153,7 +154,7 @@ ChartsAxis.propTypes = { */ bottomAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -187,7 +188,7 @@ ChartsAxis.propTypes = { */ leftAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -221,7 +222,7 @@ ChartsAxis.propTypes = { */ rightAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -265,7 +266,7 @@ ChartsAxis.propTypes = { */ topAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, diff --git a/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx b/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx index 7ab77fe2f4f98..e29e1f1cfcb3b 100644 --- a/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx +++ b/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx @@ -1,20 +1,20 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { useSlotProps } from '@mui/base/utils'; -import { NoSsr } from '@mui/base/NoSsr'; import { unstable_composeClasses as composeClasses } from '@mui/utils'; -import { useThemeProps, useTheme, Theme, styled } from '@mui/material/styles'; -import { DrawingArea, DrawingContext } from '../context/DrawingProvider'; +import { useThemeProps, useTheme, Theme } from '@mui/material/styles'; +import { DrawingContext } from '../context/DrawingProvider'; import { AnchorPosition, Direction, getSeriesToDisplay } from './utils'; -import { FormattedSeries, SeriesContext } from '../context/SeriesContextProvider'; +import { SeriesContext } from '../context/SeriesContextProvider'; import { ChartsLegendClasses, getLegendUtilityClass } from './chartsLegendClasses'; import { DefaultizedProps } from '../models/helpers'; -import { LegendParams } from '../models/seriesType/config'; -import { ChartsText, ChartsTextStyle } from '../ChartsText'; -import { CardinalDirections } from '../models/layout'; -import { getWordsByLines } from '../internals/getWordsByLines'; +import { DefaultChartsLegend, LegendRendererProps } from './DefaultChartsLegend'; export interface ChartsLegendSlots { + /** + * Custom rendering of the legend. + * @default DefaultChartsLegend + */ legend?: React.JSXElementConstructor; } @@ -64,399 +64,11 @@ const useUtilityClasses = (ownerState: DefaultizedChartsLegendProps & { theme: T return composeClasses(slots, getLegendUtilityClass, classes); }; -export type ChartsLegendRootOwnerState = { - position: AnchorPosition; - direction: Direction; - drawingArea: DrawingArea; - offsetX?: number; - offsetY?: number; - seriesNumber: number; -}; - -export const ChartsLegendRoot = styled('g', { - name: 'MuiChartsLegend', - slot: 'Root', - overridesResolver: (props, styles) => styles.root, -})({}); - const defaultProps = { position: { horizontal: 'middle', vertical: 'top' }, direction: 'row', } as const; -export interface LegendRendererProps - extends Omit { - series: FormattedSeries; - seriesToDisplay: LegendParams[]; - drawingArea: DrawingArea; - classes: Record<'mark' | 'series' | 'root', string>; - /** - * Style applied to legend labels. - * @default theme.typography.subtitle1 - */ - labelStyle?: ChartsTextStyle; - /** - * Width of the item mark (in px). - * @default 20 - */ - itemMarkWidth?: number; - /** - * Height of the item mark (in px). - * @default 20 - */ - itemMarkHeight?: number; - /** - * Space between the mark and the label (in px). - * @default 5 - */ - markGap?: number; - /** - * Space between two legend items (in px). - * @default 10 - */ - itemGap?: number; - /** - * Legend padding (in px). - * Can either be a single number, or an object with top, left, bottom, right properties. - * @default 0 - */ - padding?: number | Partial>; -} - -/** - * Transforms number or partial padding object to a defaultized padding object. - */ -const getStandardizedPadding = (padding: LegendRendererProps['padding']) => { - if (typeof padding === 'number') { - return { - left: padding, - right: padding, - top: padding, - bottom: padding, - }; - } - return { - left: 0, - right: 0, - top: 0, - bottom: 0, - ...padding, - }; -}; - -function DefaultChartsLegend(props: LegendRendererProps) { - const { - hidden, - position, - direction, - seriesToDisplay, - drawingArea, - classes, - itemMarkWidth = 20, - itemMarkHeight = 20, - markGap = 5, - itemGap = 10, - padding: paddingProps = 10, - labelStyle: inLabelStyle, - } = props; - const theme = useTheme(); - - const labelStyle = React.useMemo( - () => - ({ - ...theme.typography.subtitle1, - color: 'inherit', - dominantBaseline: 'central', - textAnchor: 'start', - fill: (theme.vars || theme).palette.text.primary, - lineHeight: 1, - ...inLabelStyle, - }) as ChartsTextStyle, // To say to TS that the dominantBaseline and textAnchor are correct - [inLabelStyle, theme], - ); - - const padding = React.useMemo(() => getStandardizedPadding(paddingProps), [paddingProps]); - - const getItemSpace = React.useCallback( - (label: string, inStyle: ChartsTextStyle = {}) => { - const { rotate, dominantBaseline, ...style } = inStyle; - const linesSize = getWordsByLines({ style, needsComputation: true, text: label }); - const innerSize = { - innerWidth: itemMarkWidth + markGap + Math.max(...linesSize.map((size) => size.width)), - innerHeight: Math.max(itemMarkHeight, linesSize.length * linesSize[0].height), - }; - - return { - ...innerSize, - outerWidth: innerSize.innerWidth + itemGap, - outerHeight: innerSize.innerHeight + itemGap, - }; - }, - [itemGap, itemMarkHeight, itemMarkWidth, markGap], - ); - - const totalWidth = drawingArea.left + drawingArea.width + drawingArea.right; - const totalHeight = drawingArea.top + drawingArea.height + drawingArea.bottom; - const availableWidth = totalWidth - padding.left - padding.right; - const availableHeight = totalHeight - padding.top - padding.bottom; - - const seriesWithPosition = React.useMemo(() => { - // Start at 0, 0. Will be modified later by padding and position. - let x = 0; - let y = 0; - - // total values used to align legend later. - let totalWidthUsed = 0; - let totalHeightUsed = 0; - let rowIndex = 0; - const rowMaxHeight = [0]; - - const seriesWithRawPosition = seriesToDisplay.map(({ label, ...other }) => { - const itemSpace = getItemSpace(label, labelStyle); - const rep = { - ...other, - label, - positionX: x, - positionY: y, - innerHeight: itemSpace.innerHeight, - innerWidth: itemSpace.innerWidth, - outerHeight: itemSpace.outerHeight, - outerWidth: itemSpace.outerWidth, - rowIndex, - }; - - if (direction === 'row') { - if (x + itemSpace.innerWidth > availableWidth) { - // This legend item would create overflow along the x-axis, so we start a new row. - x = 0; - y += rowMaxHeight[rowIndex]; - rowIndex += 1; - if (rowMaxHeight.length <= rowIndex) { - rowMaxHeight.push(0); - } - rep.positionX = x; - rep.positionY = y; - rep.rowIndex = rowIndex; - } - totalWidthUsed = Math.max(totalWidthUsed, x + itemSpace.outerWidth); - totalHeightUsed = Math.max(totalHeightUsed, y + itemSpace.outerHeight); - rowMaxHeight[rowIndex] = Math.max(rowMaxHeight[rowIndex], itemSpace.outerHeight); - - x += itemSpace.outerWidth; - } - - if (direction === 'column') { - if (y + itemSpace.innerHeight > availableHeight) { - // This legend item would create overflow along the y-axis, so we start a new column. - x = totalWidthUsed + itemGap; - y = 0; - rowIndex = 0; - rep.positionX = x; - rep.positionY = y; - rep.rowIndex = rowIndex; - } - if (rowMaxHeight.length <= rowIndex) { - rowMaxHeight.push(0); - } - totalWidthUsed = Math.max(totalWidthUsed, x + itemSpace.outerWidth); - totalHeightUsed = Math.max(totalHeightUsed, y + itemSpace.outerHeight); - - rowIndex += 1; - y += itemSpace.outerHeight; - } - - return rep; - }); - - // Move the legend according to padding and position - let gapX = 0; - let gapY = 0; - switch (position.horizontal) { - case 'left': - gapX = padding.left; - break; - case 'right': - gapX = totalWidth - padding.right - totalWidthUsed; - break; - default: - gapX = (totalWidth - totalWidthUsed) / 2; - break; - } - switch (position.vertical) { - case 'top': - gapY = padding.top; - break; - case 'bottom': - gapY = totalHeight - padding.bottom - totalHeightUsed; - break; - default: - gapY = (totalHeight - totalHeightUsed) / 2; - break; - } - return seriesWithRawPosition.map((item) => ({ - ...item, - // Add the gap due to the position - positionX: item.positionX + gapX, - // Add the gap due to the position - positionY: - item.positionY + - gapY + - (direction === 'row' - ? rowMaxHeight[item.rowIndex] / 2 // Get the center of the entire row - : item.outerHeight / 2), // Get the center of the item - })); - }, [ - seriesToDisplay, - position.horizontal, - position.vertical, - getItemSpace, - labelStyle, - direction, - availableWidth, - availableHeight, - itemGap, - padding.left, - padding.right, - padding.top, - padding.bottom, - totalWidth, - totalHeight, - ]); - - if (hidden) { - return null; - } - - return ( - - - {seriesWithPosition.map(({ id, label, color, positionX, positionY }) => ( - - - - - ))} - - - ); -} - -DefaultChartsLegend.propTypes = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the TypeScript types and run "yarn proptypes" | - // ---------------------------------------------------------------------- - /** - * Override or extend the styles applied to the component. - */ - classes: PropTypes.object.isRequired, - /** - * The direction of the legend layout. - * The default depends on the chart. - */ - direction: PropTypes.oneOf(['column', 'row']).isRequired, - drawingArea: PropTypes.shape({ - bottom: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - left: PropTypes.number.isRequired, - right: PropTypes.number.isRequired, - top: PropTypes.number.isRequired, - width: PropTypes.number.isRequired, - }).isRequired, - /** - * Set to true to hide the legend. - */ - hidden: PropTypes.bool, - /** - * Space between two legend items (in px). - * @default 10 - */ - itemGap: PropTypes.number, - /** - * Height of the item mark (in px). - * @default 20 - */ - itemMarkHeight: PropTypes.number, - /** - * Width of the item mark (in px). - * @default 20 - */ - itemMarkWidth: PropTypes.number, - /** - * Style applied to legend labels. - * @default theme.typography.subtitle1 - */ - labelStyle: PropTypes.object, - /** - * Space between the mark and the label (in px). - * @default 5 - */ - markGap: PropTypes.number, - /** - * Legend padding (in px). - * Can either be a single number, or an object with top, left, bottom, right properties. - * @default 0 - */ - padding: PropTypes.oneOfType([ - PropTypes.number, - PropTypes.shape({ - bottom: PropTypes.number, - left: PropTypes.number, - right: PropTypes.number, - top: PropTypes.number, - }), - ]), - position: PropTypes.shape({ - horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired, - vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired, - }).isRequired, - series: PropTypes.shape({ - bar: PropTypes.shape({ - series: PropTypes.object.isRequired, - seriesOrder: PropTypes.arrayOf(PropTypes.string).isRequired, - stackingGroups: PropTypes.arrayOf( - PropTypes.shape({ - ids: PropTypes.arrayOf(PropTypes.string).isRequired, - stackingOffset: PropTypes.func.isRequired, - stackingOrder: PropTypes.func.isRequired, - }), - ).isRequired, - }), - line: PropTypes.shape({ - series: PropTypes.object.isRequired, - seriesOrder: PropTypes.arrayOf(PropTypes.string).isRequired, - stackingGroups: PropTypes.arrayOf( - PropTypes.shape({ - ids: PropTypes.arrayOf(PropTypes.string).isRequired, - stackingOffset: PropTypes.func.isRequired, - stackingOrder: PropTypes.func.isRequired, - }), - ).isRequired, - }), - pie: PropTypes.shape({ - series: PropTypes.object.isRequired, - seriesOrder: PropTypes.arrayOf(PropTypes.string).isRequired, - }), - scatter: PropTypes.shape({ - series: PropTypes.object.isRequired, - seriesOrder: PropTypes.arrayOf(PropTypes.string).isRequired, - }), - }).isRequired, - seriesToDisplay: PropTypes.arrayOf( - PropTypes.shape({ - color: PropTypes.string.isRequired, - id: PropTypes.string.isRequired, - label: PropTypes.string.isRequired, - }), - ).isRequired, -} as any; - function ChartsLegend(inProps: ChartsLegendProps) { const props: DefaultizedChartsLegendProps = useThemeProps({ props: { ...defaultProps, ...inProps }, diff --git a/packages/x-charts/src/ChartsLegend/DefaultChartsLegend.tsx b/packages/x-charts/src/ChartsLegend/DefaultChartsLegend.tsx new file mode 100644 index 0000000000000..5aa0e10e21f7b --- /dev/null +++ b/packages/x-charts/src/ChartsLegend/DefaultChartsLegend.tsx @@ -0,0 +1,376 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { NoSsr } from '@mui/base/NoSsr'; +import { useTheme, styled } from '@mui/material/styles'; +import { DrawingArea } from '../context/DrawingProvider'; +import { AnchorPosition, Direction } from './utils'; +import { FormattedSeries } from '../context/SeriesContextProvider'; +import { LegendParams } from '../models/seriesType/config'; +import { DefaultizedProps } from '../models/helpers'; +import { ChartsText, ChartsTextStyle } from '../ChartsText'; +import { CardinalDirections } from '../models/layout'; +import { getWordsByLines } from '../internals/getWordsByLines'; +import type { ChartsLegendProps } from './ChartsLegend'; + +export type ChartsLegendRootOwnerState = { + position: AnchorPosition; + direction: Direction; + drawingArea: DrawingArea; + offsetX?: number; + offsetY?: number; + seriesNumber: number; +}; + +export const ChartsLegendRoot = styled('g', { + name: 'MuiChartsLegend', + slot: 'Root', + overridesResolver: (props, styles) => styles.root, +})({}); + +export interface LegendRendererProps + extends DefaultizedProps< + Omit, + 'direction' | 'position' + > { + series: FormattedSeries; + seriesToDisplay: LegendParams[]; + drawingArea: DrawingArea; + classes: Record<'mark' | 'series' | 'root', string>; + /** + * Style applied to legend labels. + * @default theme.typography.subtitle1 + */ + labelStyle?: ChartsTextStyle; + /** + * Width of the item mark (in px). + * @default 20 + */ + itemMarkWidth?: number; + /** + * Height of the item mark (in px). + * @default 20 + */ + itemMarkHeight?: number; + /** + * Space between the mark and the label (in px). + * @default 5 + */ + markGap?: number; + /** + * Space between two legend items (in px). + * @default 10 + */ + itemGap?: number; + /** + * Legend padding (in px). + * Can either be a single number, or an object with top, left, bottom, right properties. + * @default 10 + */ + padding?: number | Partial>; +} + +/** + * Transforms number or partial padding object to a defaultized padding object. + */ +const getStandardizedPadding = (padding: LegendRendererProps['padding']) => { + if (typeof padding === 'number') { + return { + left: padding, + right: padding, + top: padding, + bottom: padding, + }; + } + return { + left: 0, + right: 0, + top: 0, + bottom: 0, + ...padding, + }; +}; + +function DefaultChartsLegend(props: LegendRendererProps) { + const { + hidden, + position, + direction, + seriesToDisplay, + drawingArea, + classes, + itemMarkWidth = 20, + itemMarkHeight = 20, + markGap = 5, + itemGap = 10, + padding: paddingProps = 10, + labelStyle: inLabelStyle, + } = props; + const theme = useTheme(); + + const labelStyle = React.useMemo( + () => + ({ + ...theme.typography.subtitle1, + color: 'inherit', + dominantBaseline: 'central', + textAnchor: 'start', + fill: (theme.vars || theme).palette.text.primary, + lineHeight: 1, + ...inLabelStyle, + }) as ChartsTextStyle, // To say to TS that the dominantBaseline and textAnchor are correct + [inLabelStyle, theme], + ); + + const padding = React.useMemo(() => getStandardizedPadding(paddingProps), [paddingProps]); + + const getItemSpace = React.useCallback( + (label: string, inStyle: ChartsTextStyle = {}) => { + const { rotate, dominantBaseline, ...style } = inStyle; + const linesSize = getWordsByLines({ style, needsComputation: true, text: label }); + const innerSize = { + innerWidth: itemMarkWidth + markGap + Math.max(...linesSize.map((size) => size.width)), + innerHeight: Math.max(itemMarkHeight, linesSize.length * linesSize[0].height), + }; + + return { + ...innerSize, + outerWidth: innerSize.innerWidth + itemGap, + outerHeight: innerSize.innerHeight + itemGap, + }; + }, + [itemGap, itemMarkHeight, itemMarkWidth, markGap], + ); + + const totalWidth = drawingArea.left + drawingArea.width + drawingArea.right; + const totalHeight = drawingArea.top + drawingArea.height + drawingArea.bottom; + const availableWidth = totalWidth - padding.left - padding.right; + const availableHeight = totalHeight - padding.top - padding.bottom; + + const seriesWithPosition = React.useMemo(() => { + // Start at 0, 0. Will be modified later by padding and position. + let x = 0; + let y = 0; + + // total values used to align legend later. + let totalWidthUsed = 0; + let totalHeightUsed = 0; + let rowIndex = 0; + const rowMaxHeight = [0]; + + const seriesWithRawPosition = seriesToDisplay.map(({ label, ...other }) => { + const itemSpace = getItemSpace(label, labelStyle); + const rep = { + ...other, + label, + positionX: x, + positionY: y, + innerHeight: itemSpace.innerHeight, + innerWidth: itemSpace.innerWidth, + outerHeight: itemSpace.outerHeight, + outerWidth: itemSpace.outerWidth, + rowIndex, + }; + + if (direction === 'row') { + if (x + itemSpace.innerWidth > availableWidth) { + // This legend item would create overflow along the x-axis, so we start a new row. + x = 0; + y += rowMaxHeight[rowIndex]; + rowIndex += 1; + if (rowMaxHeight.length <= rowIndex) { + rowMaxHeight.push(0); + } + rep.positionX = x; + rep.positionY = y; + rep.rowIndex = rowIndex; + } + totalWidthUsed = Math.max(totalWidthUsed, x + itemSpace.outerWidth); + totalHeightUsed = Math.max(totalHeightUsed, y + itemSpace.outerHeight); + rowMaxHeight[rowIndex] = Math.max(rowMaxHeight[rowIndex], itemSpace.outerHeight); + + x += itemSpace.outerWidth; + } + + if (direction === 'column') { + if (y + itemSpace.innerHeight > availableHeight) { + // This legend item would create overflow along the y-axis, so we start a new column. + x = totalWidthUsed + itemGap; + y = 0; + rowIndex = 0; + rep.positionX = x; + rep.positionY = y; + rep.rowIndex = rowIndex; + } + if (rowMaxHeight.length <= rowIndex) { + rowMaxHeight.push(0); + } + totalWidthUsed = Math.max(totalWidthUsed, x + itemSpace.outerWidth); + totalHeightUsed = Math.max(totalHeightUsed, y + itemSpace.outerHeight); + + rowIndex += 1; + y += itemSpace.outerHeight; + } + + return rep; + }); + + // Move the legend according to padding and position + let gapX = 0; + let gapY = 0; + switch (position.horizontal) { + case 'left': + gapX = padding.left; + break; + case 'right': + gapX = totalWidth - padding.right - totalWidthUsed; + break; + default: + gapX = (totalWidth - totalWidthUsed) / 2; + break; + } + switch (position.vertical) { + case 'top': + gapY = padding.top; + break; + case 'bottom': + gapY = totalHeight - padding.bottom - totalHeightUsed; + break; + default: + gapY = (totalHeight - totalHeightUsed) / 2; + break; + } + return seriesWithRawPosition.map((item) => ({ + ...item, + // Add the gap due to the position + positionX: item.positionX + gapX, + // Add the gap due to the position + positionY: + item.positionY + + gapY + + (direction === 'row' + ? rowMaxHeight[item.rowIndex] / 2 // Get the center of the entire row + : item.outerHeight / 2), // Get the center of the item + })); + }, [ + seriesToDisplay, + position.horizontal, + position.vertical, + getItemSpace, + labelStyle, + direction, + availableWidth, + availableHeight, + itemGap, + padding.left, + padding.right, + padding.top, + padding.bottom, + totalWidth, + totalHeight, + ]); + + if (hidden) { + return null; + } + + return ( + + + {seriesWithPosition.map(({ id, label, color, positionX, positionY }) => ( + + + + + ))} + + + ); +} + +DefaultChartsLegend.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + /** + * Override or extend the styles applied to the component. + */ + classes: PropTypes.object.isRequired, + /** + * The direction of the legend layout. + * The default depends on the chart. + */ + direction: PropTypes.oneOf(['column', 'row']).isRequired, + drawingArea: PropTypes.shape({ + bottom: PropTypes.number.isRequired, + height: PropTypes.number.isRequired, + left: PropTypes.number.isRequired, + right: PropTypes.number.isRequired, + top: PropTypes.number.isRequired, + width: PropTypes.number.isRequired, + }).isRequired, + /** + * Set to true to hide the legend. + * @default false + */ + hidden: PropTypes.bool, + /** + * Space between two legend items (in px). + * @default 10 + */ + itemGap: PropTypes.number, + /** + * Height of the item mark (in px). + * @default 20 + */ + itemMarkHeight: PropTypes.number, + /** + * Width of the item mark (in px). + * @default 20 + */ + itemMarkWidth: PropTypes.number, + /** + * Style applied to legend labels. + * @default theme.typography.subtitle1 + */ + labelStyle: PropTypes.object, + /** + * Space between the mark and the label (in px). + * @default 5 + */ + markGap: PropTypes.number, + /** + * Legend padding (in px). + * Can either be a single number, or an object with top, left, bottom, right properties. + * @default 10 + */ + padding: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.shape({ + bottom: PropTypes.number, + left: PropTypes.number, + right: PropTypes.number, + top: PropTypes.number, + }), + ]), + position: PropTypes.shape({ + horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired, + vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired, + }).isRequired, + series: PropTypes.object.isRequired, + seriesToDisplay: PropTypes.arrayOf( + PropTypes.shape({ + color: PropTypes.string.isRequired, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, + label: PropTypes.string.isRequired, + }), + ).isRequired, +} as any; + +export { DefaultChartsLegend }; diff --git a/packages/x-charts/src/ChartsLegend/index.ts b/packages/x-charts/src/ChartsLegend/index.ts index 5ea7898eec2f6..503384cecaf1a 100644 --- a/packages/x-charts/src/ChartsLegend/index.ts +++ b/packages/x-charts/src/ChartsLegend/index.ts @@ -1,4 +1,5 @@ export * from './ChartsLegend'; +export * from './DefaultChartsLegend'; export * from './chartsLegendClasses'; export * from './utils'; diff --git a/packages/x-charts/src/ChartsReferenceLine/ChartsReferenceLine.tsx b/packages/x-charts/src/ChartsReferenceLine/ChartsReferenceLine.tsx index 0050830d96f6b..c58f28fe85386 100644 --- a/packages/x-charts/src/ChartsReferenceLine/ChartsReferenceLine.tsx +++ b/packages/x-charts/src/ChartsReferenceLine/ChartsReferenceLine.tsx @@ -13,7 +13,7 @@ function ChartsReferenceLine(props: ChartsReferenceLineProps) { const { x, y } = props; if (x !== undefined && y !== undefined) { throw new Error( - 'MUI X Charts: The ChartsReferenceLine can not have both `x` and `y` props set.', + 'MUI X Charts: The ChartsReferenceLine cannot have both `x` and `y` props set.', ); } @@ -38,7 +38,7 @@ ChartsReferenceLine.propTypes = { * The id of the axis used for the reference value. * @default The `id` of the first defined axis. */ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * Override or extend the styles applied to the component. */ diff --git a/packages/x-charts/src/ChartsReferenceLine/common.tsx b/packages/x-charts/src/ChartsReferenceLine/common.tsx index 222fd618c63b7..0459ae20e0bbf 100644 --- a/packages/x-charts/src/ChartsReferenceLine/common.tsx +++ b/packages/x-charts/src/ChartsReferenceLine/common.tsx @@ -1,6 +1,7 @@ import { styled } from '@mui/material/styles'; import { referenceLineClasses, ChartsReferenceLineClasses } from './chartsReferenceLineClasses'; import { ChartsTextStyle } from '../ChartsText'; +import { AxisId } from '../models/axis'; export type CommonChartsReferenceLineProps = { /** @@ -22,7 +23,7 @@ export type CommonChartsReferenceLineProps = { * The id of the axis used for the reference value. * @default The `id` of the first defined axis. */ - axisId?: string; + axisId?: AxisId; /** * The style applied to the label. */ diff --git a/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx index 81a5daeb3b01f..aa01fc563374d 100644 --- a/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx +++ b/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx @@ -63,7 +63,7 @@ ChartsItemTooltipContent.propTypes = { classes: PropTypes.object, itemData: PropTypes.shape({ dataIndex: PropTypes.number, - seriesId: PropTypes.string.isRequired, + seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, type: PropTypes.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired, }), series: PropTypes.object, @@ -75,7 +75,7 @@ ChartsItemTooltipContent.propTypes = { }), itemData: PropTypes.shape({ dataIndex: PropTypes.number, - seriesId: PropTypes.string.isRequired, + seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, type: PropTypes.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired, }).isRequired, sx: PropTypes.oneOfType([ diff --git a/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx index e02e09e773cf7..c53f431311fcb 100644 --- a/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx +++ b/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx @@ -10,7 +10,7 @@ import { ChartsTooltipRow, } from './ChartsTooltipTable'; import type { ChartsAxisContentProps } from './ChartsAxisTooltipContent'; -import { isCartesianSeries } from './utils'; +import { isCartesianSeries, utcFormatter } from './utils'; function DefaultChartsAxisTooltipContent(props: ChartsAxisContentProps) { const { series, axis, dataIndex, axisValue, sx, classes } = props; @@ -18,7 +18,12 @@ function DefaultChartsAxisTooltipContent(props: ChartsAxisContentProps) { if (dataIndex == null) { return null; } - const axisFormatter = axis.valueFormatter ?? ((v) => v.toLocaleString()); + + const axisFormatter = + axis.valueFormatter ?? + ((v: string | number | Date) => + axis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString()); + return ( diff --git a/packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx index 72efb4149bb89..a2587dc0bbba2 100644 --- a/packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx +++ b/packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx @@ -72,7 +72,7 @@ DefaultChartsItemTooltipContent.propTypes = { */ itemData: PropTypes.shape({ dataIndex: PropTypes.number, - seriesId: PropTypes.string.isRequired, + seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, type: PropTypes.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired, }).isRequired, /** diff --git a/packages/x-charts/src/ChartsTooltip/utils.tsx b/packages/x-charts/src/ChartsTooltip/utils.tsx index 0b59e3106002c..2045440db9b10 100644 --- a/packages/x-charts/src/ChartsTooltip/utils.tsx +++ b/packages/x-charts/src/ChartsTooltip/utils.tsx @@ -99,3 +99,10 @@ export function isCartesianSeries( ): series is ChartSeriesDefaultized { return isCartesianSeriesType(series.type); } + +export function utcFormatter(v: string | number | Date): string { + if (v instanceof Date) { + return v.toUTCString(); + } + return v.toLocaleString(); +} diff --git a/packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx b/packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx index 73225bce43c7b..663447bfbae4c 100644 --- a/packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx +++ b/packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx @@ -9,6 +9,7 @@ import { SeriesContext } from '../context/SeriesContextProvider'; import { getValueToPositionMapper } from '../hooks/useScale'; import { getSVGPoint } from '../internals/utils'; import { ScatterItemIdentifier } from '../models'; +import { SeriesId } from '../models/seriesType/common'; export type ChartsVoronoiHandlerProps = { /** @@ -87,7 +88,7 @@ function ChartsVoronoiHandler(props: ChartsVoronoiHandlerProps) { function getClosestPoint( event: MouseEvent, ): - | { seriesId: string; dataIndex: number } + | { seriesId: SeriesId; dataIndex: number } | 'outside-chart' | 'outside-voronoi-max-radius' | 'no-point-found' { diff --git a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx index c14b16c915f92..579cf75f94c06 100644 --- a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx +++ b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx @@ -6,7 +6,7 @@ import { useThemeProps, useTheme, Theme } from '@mui/material/styles'; import { CartesianContext } from '../context/CartesianContextProvider'; import { DrawingContext } from '../context/DrawingProvider'; import useTicks, { TickItemType } from '../hooks/useTicks'; -import { ChartsXAxisProps } from '../models/axis'; +import { AxisDefaultized, ChartsXAxisProps } from '../models/axis'; import { getAxisUtilityClass } from '../ChartsAxis/axisClasses'; import { AxisRoot } from '../internals/components/AxisSharedComponents'; import { ChartsText, ChartsTextProps } from '../ChartsText'; @@ -35,8 +35,10 @@ function addLabelDimension( { tickLabelStyle: style, tickLabelInterval, + reverse, isMounted, - }: Pick & { isMounted: boolean }, + }: Pick & + Pick & { isMounted: boolean }, ): (TickItemType & LabelExtraData)[] { const withDimension = xTicks.map((tick) => { if (!isMounted || tick.formattedValue === undefined) { @@ -58,9 +60,9 @@ function addLabelDimension( } // Filter label to avoid overlap - let textStart = 0; - let textEnd = 0; - + let currentTextLimit = 0; + let previouseTextLimit = 0; + const direction = reverse ? -1 : 1; return withDimension.map((item, labelIndex) => { const { width, offset, labelOffset, height } = item; @@ -68,13 +70,13 @@ function addLabelDimension( const textPosition = offset + labelOffset; const gapRatio = 1.2; // Ratio applied to the minimal distance to add some margin. - textStart = textPosition - (gapRatio * distance) / 2; - if (labelIndex > 0 && textStart < textEnd) { + currentTextLimit = textPosition - (direction * (gapRatio * distance)) / 2; + if (labelIndex > 0 && direction * currentTextLimit < direction * previouseTextLimit) { // Except for the first label, we skip all label that overlap with the last accepted. - // Notice that the early return prevents `textEnd` from being updated. + // Notice that the early return prevents `previouseTextLimit` from being updated. return { ...item, skipLabel: true }; } - textEnd = textPosition + (gapRatio * distance) / 2; + previouseTextLimit = textPosition + (direction * (gapRatio * distance)) / 2; return item; }); } @@ -100,7 +102,7 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { const { xAxisIds } = React.useContext(CartesianContext); const { xAxis: { - [props.axisId ?? xAxisIds[0]]: { scale: xScale, tickNumber, ...settings }, + [props.axisId ?? xAxisIds[0]]: { scale: xScale, tickNumber, reverse, ...settings }, }, } = React.useContext(CartesianContext); @@ -159,6 +161,7 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { const xTicksWithDimension = addLabelDimension(xTicks, { tickLabelStyle: axisTickLabelProps.style, tickLabelInterval, + reverse, isMounted, }); @@ -238,7 +241,7 @@ ChartsXAxis.propTypes = { * The id of the axis to render. * If undefined, it will be the first defined axis. */ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * Override or extend the styles applied to the component. */ diff --git a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx index 9ef95f896356f..1cdeecaf12008 100644 --- a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx +++ b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx @@ -175,7 +175,7 @@ ChartsYAxis.propTypes = { * The id of the axis to render. * If undefined, it will be the first defined axis. */ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * Override or extend the styles applied to the component. */ diff --git a/packages/x-charts/src/LineChart/AnimatedArea.tsx b/packages/x-charts/src/LineChart/AnimatedArea.tsx index 12d27c96c17cd..1be817047a480 100644 --- a/packages/x-charts/src/LineChart/AnimatedArea.tsx +++ b/packages/x-charts/src/LineChart/AnimatedArea.tsx @@ -76,7 +76,7 @@ AnimatedArea.propTypes = { ownerState: PropTypes.shape({ classes: PropTypes.object, color: PropTypes.string.isRequired, - id: PropTypes.string.isRequired, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, isFaded: PropTypes.bool.isRequired, isHighlighted: PropTypes.bool.isRequired, }).isRequired, diff --git a/packages/x-charts/src/LineChart/AnimatedLine.tsx b/packages/x-charts/src/LineChart/AnimatedLine.tsx index 593ff6a9d2fe8..411e31142a76c 100644 --- a/packages/x-charts/src/LineChart/AnimatedLine.tsx +++ b/packages/x-charts/src/LineChart/AnimatedLine.tsx @@ -78,7 +78,7 @@ AnimatedLine.propTypes = { ownerState: PropTypes.shape({ classes: PropTypes.object, color: PropTypes.string.isRequired, - id: PropTypes.string.isRequired, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, isFaded: PropTypes.bool.isRequired, isHighlighted: PropTypes.bool.isRequired, }).isRequired, diff --git a/packages/x-charts/src/LineChart/AreaElement.tsx b/packages/x-charts/src/LineChart/AreaElement.tsx index 1c9ed001bfac4..8536941dd8860 100644 --- a/packages/x-charts/src/LineChart/AreaElement.tsx +++ b/packages/x-charts/src/LineChart/AreaElement.tsx @@ -12,6 +12,7 @@ import { import { InteractionContext } from '../context/InteractionProvider'; import { HighlightScope } from '../context/HighlightProvider'; import { AnimatedArea, AnimatedAreaProps } from './AnimatedArea'; +import { SeriesId } from '../models/seriesType/common'; export interface AreaElementClasses { /** Styles applied to the root element. */ @@ -25,7 +26,7 @@ export interface AreaElementClasses { export type AreaElementClassKey = keyof AreaElementClasses; export interface AreaElementOwnerState { - id: string; + id: SeriesId; color: string; isFaded: boolean; isHighlighted: boolean; @@ -149,7 +150,7 @@ AreaElement.propTypes = { faded: PropTypes.oneOf(['global', 'none', 'series']), highlighted: PropTypes.oneOf(['item', 'none', 'series']), }), - id: PropTypes.string.isRequired, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, /** * If `true`, animations are skipped. * @default false diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index b6b4558689417..5554a34f2b525 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -236,7 +236,7 @@ LineChart.propTypes = { */ bottomAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -297,7 +297,7 @@ LineChart.propTypes = { */ leftAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -367,7 +367,7 @@ LineChart.propTypes = { */ rightAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -431,7 +431,7 @@ LineChart.propTypes = { */ topAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -475,7 +475,7 @@ LineChart.propTypes = { */ xAxis: PropTypes.arrayOf( PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, data: PropTypes.array, dataKey: PropTypes.string, @@ -483,13 +483,14 @@ LineChart.propTypes = { disableTicks: PropTypes.bool, fill: PropTypes.string, hideTooltip: PropTypes.bool, - id: PropTypes.string, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), label: PropTypes.string, labelFontSize: PropTypes.number, labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), + reverse: PropTypes.bool, scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), slotProps: PropTypes.object, slots: PropTypes.object, @@ -515,7 +516,7 @@ LineChart.propTypes = { */ yAxis: PropTypes.arrayOf( PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, data: PropTypes.array, dataKey: PropTypes.string, @@ -523,13 +524,14 @@ LineChart.propTypes = { disableTicks: PropTypes.bool, fill: PropTypes.string, hideTooltip: PropTypes.bool, - id: PropTypes.string, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), label: PropTypes.string, labelFontSize: PropTypes.number, labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), + reverse: PropTypes.bool, scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), slotProps: PropTypes.object, slots: PropTypes.object, diff --git a/packages/x-charts/src/LineChart/LineElement.tsx b/packages/x-charts/src/LineChart/LineElement.tsx index e5d2e21c6ecd5..ad40da6599f68 100644 --- a/packages/x-charts/src/LineChart/LineElement.tsx +++ b/packages/x-charts/src/LineChart/LineElement.tsx @@ -12,6 +12,7 @@ import { } from '../hooks/useInteractionItemProps'; import { HighlightScope } from '../context/HighlightProvider'; import { AnimatedLine, AnimatedLineProps } from './AnimatedLine'; +import { SeriesId } from '../models/seriesType/common'; export interface LineElementClasses { /** Styles applied to the root element. */ @@ -25,7 +26,7 @@ export interface LineElementClasses { export type LineElementClassKey = keyof LineElementClasses; export interface LineElementOwnerState { - id: string; + id: SeriesId; color: string; isFaded: boolean; isHighlighted: boolean; @@ -148,7 +149,7 @@ LineElement.propTypes = { faded: PropTypes.oneOf(['global', 'none', 'series']), highlighted: PropTypes.oneOf(['item', 'none', 'series']), }), - id: PropTypes.string.isRequired, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, /** * If `true`, animations are skipped. * @default false diff --git a/packages/x-charts/src/LineChart/LineHighlightElement.tsx b/packages/x-charts/src/LineChart/LineHighlightElement.tsx index 0fb858781aa14..973ba6e7d5f28 100644 --- a/packages/x-charts/src/LineChart/LineHighlightElement.tsx +++ b/packages/x-charts/src/LineChart/LineHighlightElement.tsx @@ -4,6 +4,7 @@ import composeClasses from '@mui/utils/composeClasses'; import generateUtilityClass from '@mui/utils/generateUtilityClass'; import { styled } from '@mui/material/styles'; import generateUtilityClasses from '@mui/utils/generateUtilityClasses'; +import { SeriesId } from '../models/seriesType/common'; export interface LineHighlightElementClasses { /** Styles applied to the root element. */ @@ -13,7 +14,7 @@ export interface LineHighlightElementClasses { export type HighlightElementClassKey = keyof LineHighlightElementClasses; interface LineHighlightElementOwnerState { - id: string; + id: SeriesId; color: string; x: number; y: number; @@ -49,7 +50,7 @@ const HighlightElement = styled('circle', { })); export type LineHighlightElementProps = LineHighlightElementOwnerState & - React.ComponentPropsWithoutRef<'circle'> & {}; + Omit, 'id'> & {}; /** * Demos: @@ -92,6 +93,7 @@ LineHighlightElement.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- classes: PropTypes.object, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, } as any; export { LineHighlightElement }; diff --git a/packages/x-charts/src/LineChart/MarkElement.tsx b/packages/x-charts/src/LineChart/MarkElement.tsx index 81a1dc09afaf8..f78aac65b7216 100644 --- a/packages/x-charts/src/LineChart/MarkElement.tsx +++ b/packages/x-charts/src/LineChart/MarkElement.tsx @@ -14,6 +14,7 @@ import { getIsHighlighted, useInteractionItemProps, } from '../hooks/useInteractionItemProps'; +import { SeriesId } from '../models/seriesType/common'; export interface MarkElementClasses { /** Styles applied to the root element. */ @@ -27,7 +28,7 @@ export interface MarkElementClasses { export type MarkElementClassKey = keyof MarkElementClasses; interface MarkElementOwnerState { - id: string; + id: SeriesId; color: string; isFaded: boolean; isHighlighted: boolean; @@ -84,7 +85,7 @@ MarkElementPath.propTypes = { } as any; export type MarkElementProps = Omit & - React.ComponentPropsWithoutRef<'path'> & { + Omit, 'id'> & { /** * If `true`, animations are skipped. * @default false @@ -177,6 +178,7 @@ MarkElement.propTypes = { faded: PropTypes.oneOf(['global', 'none', 'series']), highlighted: PropTypes.oneOf(['item', 'none', 'series']), }), + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, /** * The shape of the marker. */ diff --git a/packages/x-charts/src/LineChart/formatter.ts b/packages/x-charts/src/LineChart/formatter.ts index d041eff126794..8a7cb0f645894 100644 --- a/packages/x-charts/src/LineChart/formatter.ts +++ b/packages/x-charts/src/LineChart/formatter.ts @@ -8,6 +8,7 @@ import { } from '../models/seriesType/config'; import defaultizeValueFormatter from '../internals/defaultizeValueFormatter'; import { DefaultizedProps } from '../models/helpers'; +import { SeriesId } from '../models/seriesType/common'; let warnedOnce = false; @@ -38,12 +39,12 @@ const formatter: Formatter<'line'> = (params, dataset) => { } }); - const completedSeries: { [id: string]: DefaultizedProps, 'data'> } = {}; + const completedSeries: Record, 'data'>> = {}; stackingGroups.forEach((stackingGroup) => { // Get stacked values, and derive the domain const { ids, stackingOrder, stackingOffset } = stackingGroup; - const stackedSeries = d3Stack, string>() + const stackedSeries = d3Stack, SeriesId>() .keys( ids.map((id) => { // Use dataKey if needed and available diff --git a/packages/x-charts/src/PieChart/PieArc.tsx b/packages/x-charts/src/PieChart/PieArc.tsx index 540352613fc73..8b0717359e167 100644 --- a/packages/x-charts/src/PieChart/PieArc.tsx +++ b/packages/x-charts/src/PieChart/PieArc.tsx @@ -8,6 +8,7 @@ import { styled } from '@mui/material/styles'; import generateUtilityClasses from '@mui/utils/generateUtilityClasses'; import { HighlightScope } from '../context/HighlightProvider'; import { useInteractionItemProps } from '../hooks/useInteractionItemProps'; +import { PieItemId } from '../models'; export interface PieArcClasses { /** Styles applied to the root element. */ @@ -21,7 +22,7 @@ export interface PieArcClasses { export type PieArcClassKey = keyof PieArcClasses; interface PieArcOwnerState { - id: string; + id: PieItemId; dataIndex: number; color: string; isFaded: boolean; @@ -58,34 +59,34 @@ const PieArcRoot = styled(animated.path, { strokeLinejoin: 'round', })); -export type PieArcProps = PieArcOwnerState & - React.ComponentPropsWithoutRef<'path'> & { - startAngle: SpringValue; +export type PieArcProps = Omit, 'id'> & + PieArcOwnerState & { + cornerRadius: SpringValue; endAngle: SpringValue; + highlightScope?: Partial; innerRadius: SpringValue; + onClick?: (event: React.MouseEvent) => void; outerRadius: SpringValue; - cornerRadius: SpringValue; paddingAngle: SpringValue; - highlightScope?: Partial; - onClick?: (event: React.MouseEvent) => void; + startAngle: SpringValue; }; function PieArc(props: PieArcProps) { const { - id, - dataIndex, classes: innerClasses, color, + cornerRadius, + dataIndex, + endAngle, highlightScope, - onClick, + id, + innerRadius, isFaded, isHighlighted, - startAngle, - endAngle, - paddingAngle, - innerRadius, + onClick, outerRadius, - cornerRadius, + paddingAngle, + startAngle, ...other } = props; @@ -135,6 +136,7 @@ PieArc.propTypes = { faded: PropTypes.oneOf(['global', 'none', 'series']), highlighted: PropTypes.oneOf(['item', 'none', 'series']), }), + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, isFaded: PropTypes.bool.isRequired, isHighlighted: PropTypes.bool.isRequired, } as any; diff --git a/packages/x-charts/src/PieChart/PieArcLabel.tsx b/packages/x-charts/src/PieChart/PieArcLabel.tsx index e371b30f4f556..4896e623a2a5a 100644 --- a/packages/x-charts/src/PieChart/PieArcLabel.tsx +++ b/packages/x-charts/src/PieChart/PieArcLabel.tsx @@ -6,6 +6,7 @@ import composeClasses from '@mui/utils/composeClasses'; import generateUtilityClass from '@mui/utils/generateUtilityClass'; import { styled } from '@mui/material/styles'; import generateUtilityClasses from '@mui/utils/generateUtilityClasses'; +import { PieItemId } from '../models/seriesType/pie'; export interface PieArcLabelClasses { /** Styles applied to the root element. */ @@ -19,7 +20,7 @@ export interface PieArcLabelClasses { export type PieArcLabelClassKey = keyof PieArcLabelClasses; interface PieArcLabelOwnerState { - id: string; + id: PieItemId; color: string; isFaded: boolean; isHighlighted: boolean; @@ -56,7 +57,7 @@ const PieArcLabelRoot = styled(animated.text, { })); export type PieArcLabelProps = PieArcLabelOwnerState & - React.ComponentPropsWithoutRef<'text'> & { + Omit, 'id'> & { startAngle: SpringValue; endAngle: SpringValue; innerRadius: SpringValue; @@ -153,6 +154,7 @@ PieArcLabel.propTypes = { // ---------------------------------------------------------------------- classes: PropTypes.object, formattedArcLabel: PropTypes.string, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, isFaded: PropTypes.bool.isRequired, isHighlighted: PropTypes.bool.isRequired, } as any; diff --git a/packages/x-charts/src/PieChart/PieArcLabelPlot.tsx b/packages/x-charts/src/PieChart/PieArcLabelPlot.tsx index 831369e981057..eb1d9c627f5b4 100644 --- a/packages/x-charts/src/PieChart/PieArcLabelPlot.tsx +++ b/packages/x-charts/src/PieChart/PieArcLabelPlot.tsx @@ -83,21 +83,21 @@ export interface PieArcLabelPlotProps function PieArcLabelPlot(props: PieArcLabelPlotProps) { const { - slots, - slotProps, - innerRadius, - outerRadius, + arcLabel, + arcLabelMinAngle = 0, arcLabelRadius, cornerRadius = 0, - paddingAngle = 0, - id, - highlightScope, - highlighted, - faded = { additionalRadius: -5 }, data, - arcLabel, - arcLabelMinAngle = 0, + faded = { additionalRadius: -5 }, + highlighted, + highlightScope, + id, + innerRadius, + outerRadius, + paddingAngle = 0, skipAnimation, + slotProps, + slots, ...other } = props; @@ -233,7 +233,7 @@ PieArcLabelPlot.propTypes = { faded: PropTypes.oneOf(['global', 'none', 'series']), highlighted: PropTypes.oneOf(['item', 'none', 'series']), }), - id: PropTypes.string.isRequired, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, /** * The radius between circle center and the begining of the arc. * @default 0 diff --git a/packages/x-charts/src/PieChart/PieArcPlot.tsx b/packages/x-charts/src/PieChart/PieArcPlot.tsx index b8c29b427bb81..0e3e072ddb89b 100644 --- a/packages/x-charts/src/PieChart/PieArcPlot.tsx +++ b/packages/x-charts/src/PieChart/PieArcPlot.tsx @@ -207,7 +207,7 @@ PieArcPlot.propTypes = { faded: PropTypes.oneOf(['global', 'none', 'series']), highlighted: PropTypes.oneOf(['item', 'none', 'series']), }), - id: PropTypes.string.isRequired, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, /** * The radius between circle center and the begining of the arc. * @default 0 diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx index c3b5946b003b0..30104f724d94c 100644 --- a/packages/x-charts/src/PieChart/PieChart.tsx +++ b/packages/x-charts/src/PieChart/PieChart.tsx @@ -173,7 +173,7 @@ PieChart.propTypes = { */ bottomAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -230,7 +230,7 @@ PieChart.propTypes = { */ leftAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -291,7 +291,7 @@ PieChart.propTypes = { */ rightAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -351,7 +351,7 @@ PieChart.propTypes = { */ topAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -395,7 +395,7 @@ PieChart.propTypes = { */ xAxis: PropTypes.arrayOf( PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, data: PropTypes.array, dataKey: PropTypes.string, @@ -403,13 +403,14 @@ PieChart.propTypes = { disableTicks: PropTypes.bool, fill: PropTypes.string, hideTooltip: PropTypes.bool, - id: PropTypes.string, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), label: PropTypes.string, labelFontSize: PropTypes.number, labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), + reverse: PropTypes.bool, scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), slotProps: PropTypes.object, slots: PropTypes.object, @@ -435,7 +436,7 @@ PieChart.propTypes = { */ yAxis: PropTypes.arrayOf( PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, data: PropTypes.array, dataKey: PropTypes.string, @@ -443,13 +444,14 @@ PieChart.propTypes = { disableTicks: PropTypes.bool, fill: PropTypes.string, hideTooltip: PropTypes.bool, - id: PropTypes.string, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), label: PropTypes.string, labelFontSize: PropTypes.number, labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), + reverse: PropTypes.bool, scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), slotProps: PropTypes.object, slots: PropTypes.object, diff --git a/packages/x-charts/src/PieChart/formatter.ts b/packages/x-charts/src/PieChart/formatter.ts index bc7792701e0bd..6df6aa01072b1 100644 --- a/packages/x-charts/src/PieChart/formatter.ts +++ b/packages/x-charts/src/PieChart/formatter.ts @@ -1,6 +1,7 @@ import { pie as d3Pie } from 'd3-shape'; import { ChartSeriesDefaultized, Formatter } from '../models/seriesType/config'; import { ChartsPieSorting, PieValueType } from '../models/seriesType/pie'; +import { SeriesId } from '../models/seriesType/common'; const getSortingComparator = (comparator: ChartsPieSorting = 'none') => { if (typeof comparator === 'function') { @@ -21,7 +22,7 @@ const getSortingComparator = (comparator: ChartsPieSorting = 'none') => { const formatter: Formatter<'pie'> = (params) => { const { seriesOrder, series } = params; - const defaultizedSeries: { [seriesId: string]: ChartSeriesDefaultized<'pie'> } = {}; + const defaultizedSeries: Record> = {}; seriesOrder.forEach((seriesId) => { const arcs = d3Pie() .startAngle((2 * Math.PI * (series[seriesId].startAngle ?? 0)) / 360) diff --git a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx index 65e61d1ffc3af..a3928044c04ea 100644 --- a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx +++ b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx @@ -208,7 +208,7 @@ ResponsiveChartContainer.propTypes = { */ xAxis: PropTypes.arrayOf( PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, data: PropTypes.array, dataKey: PropTypes.string, @@ -216,13 +216,14 @@ ResponsiveChartContainer.propTypes = { disableTicks: PropTypes.bool, fill: PropTypes.string, hideTooltip: PropTypes.bool, - id: PropTypes.string, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), label: PropTypes.string, labelFontSize: PropTypes.number, labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), + reverse: PropTypes.bool, scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), slotProps: PropTypes.object, slots: PropTypes.object, @@ -248,7 +249,7 @@ ResponsiveChartContainer.propTypes = { */ yAxis: PropTypes.arrayOf( PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, data: PropTypes.array, dataKey: PropTypes.string, @@ -256,13 +257,14 @@ ResponsiveChartContainer.propTypes = { disableTicks: PropTypes.bool, fill: PropTypes.string, hideTooltip: PropTypes.bool, - id: PropTypes.string, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), label: PropTypes.string, labelFontSize: PropTypes.number, labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), + reverse: PropTypes.bool, scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), slotProps: PropTypes.object, slots: PropTypes.object, diff --git a/packages/x-charts/src/ScatterChart/Scatter.tsx b/packages/x-charts/src/ScatterChart/Scatter.tsx index 0b5fdd0689337..a931e81c14065 100644 --- a/packages/x-charts/src/ScatterChart/Scatter.tsx +++ b/packages/x-charts/src/ScatterChart/Scatter.tsx @@ -1,6 +1,10 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { DefaultizedScatterSeriesType, ScatterItemIdentifier } from '../models/seriesType/scatter'; +import { + DefaultizedScatterSeriesType, + ScatterItemIdentifier, + ScatterValueType, +} from '../models/seriesType/scatter'; import { getValueToPositionMapper } from '../hooks/useScale'; import { getIsFaded, @@ -62,15 +66,12 @@ function Scatter(props: ScatterProps) { const minYRange = Math.min(...yRange); const maxYRange = Math.max(...yRange); - const temp: { - x: number; - y: number; - id: string | number; + const temp: (ScatterValueType & { dataIndex: number; isHighlighted: boolean; isFaded: boolean; interactionProps: ReturnType; - }[] = []; + })[] = []; for (let i = 0; i < series.data.length; i += 1) { const scatterPoint = series.data[i]; diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx index 5b59407db17c7..b68b1fb3bc54a 100644 --- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx @@ -167,7 +167,7 @@ ScatterChart.propTypes = { */ bottomAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -229,7 +229,7 @@ ScatterChart.propTypes = { */ leftAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -295,7 +295,7 @@ ScatterChart.propTypes = { */ rightAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -354,7 +354,7 @@ ScatterChart.propTypes = { */ topAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -404,7 +404,7 @@ ScatterChart.propTypes = { */ xAxis: PropTypes.arrayOf( PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, data: PropTypes.array, dataKey: PropTypes.string, @@ -412,13 +412,14 @@ ScatterChart.propTypes = { disableTicks: PropTypes.bool, fill: PropTypes.string, hideTooltip: PropTypes.bool, - id: PropTypes.string, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), label: PropTypes.string, labelFontSize: PropTypes.number, labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), + reverse: PropTypes.bool, scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), slotProps: PropTypes.object, slots: PropTypes.object, @@ -444,7 +445,7 @@ ScatterChart.propTypes = { */ yAxis: PropTypes.arrayOf( PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, data: PropTypes.array, dataKey: PropTypes.string, @@ -452,13 +453,14 @@ ScatterChart.propTypes = { disableTicks: PropTypes.bool, fill: PropTypes.string, hideTooltip: PropTypes.bool, - id: PropTypes.string, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), label: PropTypes.string, labelFontSize: PropTypes.number, labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), + reverse: PropTypes.bool, scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), slotProps: PropTypes.object, slots: PropTypes.object, diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx index 8214bec2e2fe0..9a3d8e1089588 100644 --- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx +++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx @@ -61,7 +61,7 @@ export interface SparkLineChartProps * Formatter used by the tooltip. * @param {number} value The value to format. * @returns {string} the formatted value. - * @default (v: number | null) => (v === null ? '' : v.toString()) + * @default (value: number | null) => (value === null ? '' : value.toString()) */ valueFormatter?: (value: number | null) => string; /** @@ -143,7 +143,7 @@ const SparkLineChart = React.forwardRef(function SparkLineChart(props: SparkLine slotProps, data, plotType = 'line', - valueFormatter = (v: number | null) => (v === null ? '' : v.toString()), + valueFormatter = (value: number | null) => (value === null ? '' : value.toString()), area, curve = 'linear', } = props; @@ -328,7 +328,7 @@ SparkLineChart.propTypes = { * Formatter used by the tooltip. * @param {number} value The value to format. * @returns {string} the formatted value. - * @default (v: number | null) => (v === null ? '' : v.toString()) + * @default (value: number | null) => (value === null ? '' : value.toString()) */ valueFormatter: PropTypes.func, viewBox: PropTypes.shape({ @@ -347,7 +347,7 @@ SparkLineChart.propTypes = { * Notice it is a single configuration object, not an array of configuration. */ xAxis: PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, data: PropTypes.array, dataKey: PropTypes.string, @@ -355,13 +355,14 @@ SparkLineChart.propTypes = { disableTicks: PropTypes.bool, fill: PropTypes.string, hideTooltip: PropTypes.bool, - id: PropTypes.string, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), label: PropTypes.string, labelFontSize: PropTypes.number, labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), + reverse: PropTypes.bool, scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), slotProps: PropTypes.object, slots: PropTypes.object, diff --git a/packages/x-charts/src/context/CartesianContextProvider.tsx b/packages/x-charts/src/context/CartesianContextProvider.tsx index 4ebc9a4088388..9b6556f1a2171 100644 --- a/packages/x-charts/src/context/CartesianContextProvider.tsx +++ b/packages/x-charts/src/context/CartesianContextProvider.tsx @@ -27,6 +27,7 @@ import { } from '../models/seriesType/config'; import { MakeOptional } from '../models/helpers'; import { getTickNumber } from '../hooks/useTicks'; +import { SeriesId } from '../models/seriesType/common'; export type CartesianContextProviderProps = { /** @@ -145,7 +146,7 @@ function CartesianContextProvider(props: CartesianContextProviderProps) { isDefaultAxis: boolean, ): ExtremumGetterResult => { const getter = getters[chartType]; - const series = (formattedSeries[chartType]?.series as { [id: string]: ChartSeries }) ?? {}; + const series = (formattedSeries[chartType]?.series as Record>) ?? {}; const [minChartTypeData, maxChartTypeData] = getter({ series, @@ -192,7 +193,9 @@ function CartesianContextProvider(props: CartesianContextProviderProps) { const isDefaultAxis = axisIndex === 0; const [minData, maxData] = getAxisExtremum(axis, xExtremumGetters, isDefaultAxis); - const range = [drawingArea.left, drawingArea.left + drawingArea.width]; + const range = axis.reverse + ? [drawingArea.left + drawingArea.width, drawingArea.left] + : [drawingArea.left, drawingArea.left + drawingArea.width]; if (isBandScaleConfig(axis)) { const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO; @@ -247,7 +250,9 @@ function CartesianContextProvider(props: CartesianContextProviderProps) { allYAxis.forEach((axis, axisIndex) => { const isDefaultAxis = axisIndex === 0; const [minData, maxData] = getAxisExtremum(axis, yExtremumGetters, isDefaultAxis); - const range = [drawingArea.top + drawingArea.height, drawingArea.top]; + const range = axis.reverse + ? [drawingArea.top, drawingArea.top + drawingArea.height] + : [drawingArea.top + drawingArea.height, drawingArea.top]; if (isBandScaleConfig(axis)) { const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO; @@ -326,7 +331,7 @@ CartesianContextProvider.propTypes = { */ xAxis: PropTypes.arrayOf( PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, data: PropTypes.array, dataKey: PropTypes.string, @@ -334,13 +339,14 @@ CartesianContextProvider.propTypes = { disableTicks: PropTypes.bool, fill: PropTypes.string, hideTooltip: PropTypes.bool, - id: PropTypes.string, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), label: PropTypes.string, labelFontSize: PropTypes.number, labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), + reverse: PropTypes.bool, scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), slotProps: PropTypes.object, slots: PropTypes.object, @@ -366,7 +372,7 @@ CartesianContextProvider.propTypes = { */ yAxis: PropTypes.arrayOf( PropTypes.shape({ - axisId: PropTypes.string, + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), classes: PropTypes.object, data: PropTypes.array, dataKey: PropTypes.string, @@ -374,13 +380,14 @@ CartesianContextProvider.propTypes = { disableTicks: PropTypes.bool, fill: PropTypes.string, hideTooltip: PropTypes.bool, - id: PropTypes.string, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), label: PropTypes.string, labelFontSize: PropTypes.number, labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), + reverse: PropTypes.bool, scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), slotProps: PropTypes.object, slots: PropTypes.object, diff --git a/packages/x-charts/src/internals/defaultizeValueFormatter.ts b/packages/x-charts/src/internals/defaultizeValueFormatter.ts index eeb5d4fb7c804..b3ce7c4e71968 100644 --- a/packages/x-charts/src/internals/defaultizeValueFormatter.ts +++ b/packages/x-charts/src/internals/defaultizeValueFormatter.ts @@ -1,21 +1,13 @@ +import { SeriesId } from '../models/seriesType/common'; + function defaultizeValueFormatter< ISeries extends { valueFormatter?: IFormatter }, IFormatter extends (v: any) => string, >( - series: { - [id: string]: ISeries; - }, + series: Record, defaultValueFormatter: IFormatter, -): { - [id: string]: ISeries & { - valueFormatter: IFormatter; - }; -} { - const defaultizedSeries: { - [id: string]: ISeries & { - valueFormatter: IFormatter; - }; - } = {}; +): Record { + const defaultizedSeries: Record = {}; Object.keys(series).forEach((seriesId) => { defaultizedSeries[seriesId] = { ...series[seriesId], diff --git a/packages/x-charts/src/internals/stackSeries.ts b/packages/x-charts/src/internals/stackSeries.ts index 367a770514601..84a49749808d5 100644 --- a/packages/x-charts/src/internals/stackSeries.ts +++ b/packages/x-charts/src/internals/stackSeries.ts @@ -14,12 +14,13 @@ import { } from 'd3-shape'; import type { BarSeriesType, LineSeriesType } from '../models/seriesType'; import type { StackOffsetType, StackOrderType } from '../models/stacking'; +import { SeriesId } from '../models/seriesType/common'; -type StackableSeries = { [id: string]: BarSeriesType } | { [id: string]: LineSeriesType }; +type StackableSeries = Record | Record; type FormatterParams = { series: StackableSeries; - seriesOrder: string[]; + seriesOrder: SeriesId[]; defaultStrategy?: { stackOrder?: StackOrderType; stackOffset?: StackOffsetType; @@ -27,7 +28,7 @@ type FormatterParams = { }; export type StackingGroupsType = { - ids: string[]; + ids: SeriesId[]; stackingOrder: (series: Series) => number[]; stackingOffset: (series: Series, order: Iterable) => void; }[]; @@ -95,7 +96,7 @@ export const getStackingGroups = (params: FormatterParams) => { const { series, seriesOrder, defaultStrategy } = params; const stackingGroups: StackingGroupsType = []; - const stackIndex: { [id: string]: number } = {}; + const stackIndex: Record = {}; seriesOrder.forEach((id) => { const { stack, stackOrder, stackOffset } = series[id]; diff --git a/packages/x-charts/src/models/axis.ts b/packages/x-charts/src/models/axis.ts index 4b14c5c7ddf3d..9f49ac4749f1b 100644 --- a/packages/x-charts/src/models/axis.ts +++ b/packages/x-charts/src/models/axis.ts @@ -10,6 +10,8 @@ import { ChartsAxisClasses } from '../ChartsAxis/axisClasses'; import type { TickParams } from '../hooks/useTicks'; import { ChartsTextProps } from '../ChartsText'; +export type AxisId = string | number; + export type D3Scale< Domain extends { toString(): string } = number | Date | string, Range = number, @@ -47,7 +49,7 @@ export interface ChartsAxisProps extends TickParams { * The id of the axis to render. * If undefined, it will be the first defined axis. */ - axisId?: string; + axisId?: AxisId; /** * If true, the axis line is disabled. * @default false @@ -188,7 +190,7 @@ export type AxisConfig = { /** * Id used to identify the axis. */ - id: string; + id: AxisId; /** * The minimal value of the domain. * If not provided, it gets computed to display the entire chart data. @@ -212,6 +214,10 @@ export type AxisConfig = { * If `true`, hide this value in the tooltip */ hideTooltip?: boolean; + /** + * If `true`, Reverse the axis scaleBand. + */ + reverse?: boolean; } & Partial & Partial> & TickParams; diff --git a/packages/x-charts/src/models/seriesType/common.ts b/packages/x-charts/src/models/seriesType/common.ts index 0e604de11ed50..97a51b2047928 100644 --- a/packages/x-charts/src/models/seriesType/common.ts +++ b/packages/x-charts/src/models/seriesType/common.ts @@ -1,8 +1,10 @@ import type { HighlightScope } from '../../context/HighlightProvider'; import type { StackOffsetType, StackOrderType } from '../stacking'; +export type SeriesId = number | string; + export type CommonSeriesType = { - id?: string; + id?: SeriesId; color?: string; /** * Formatter used to render values in tooltip or other data display. diff --git a/packages/x-charts/src/models/seriesType/config.ts b/packages/x-charts/src/models/seriesType/config.ts index f2745a4a56058..608962f6af702 100644 --- a/packages/x-charts/src/models/seriesType/config.ts +++ b/packages/x-charts/src/models/seriesType/config.ts @@ -5,6 +5,7 @@ import { PieSeriesType, DefaultizedPieSeriesType, PieItemIdentifier, PieValueTyp import { AxisConfig } from '../axis'; import { DefaultizedProps, MakeOptional } from '../helpers'; import { StackingGroupsType } from '../../internals/stackSeries'; +import { SeriesId } from './common'; interface ChartsSeriesConfig { bar: { @@ -52,7 +53,7 @@ export type ChartItemIdentifier = ChartsSeriesConfig[T]['itemIdentifier']; type ExtremumGetterParams = { - series: { [id: string]: ChartSeries }; + series: Record>; axis: AxisConfig; isDefaultAxis: boolean; }; @@ -64,13 +65,13 @@ export type ExtremumGetter = ( ) => ExtremumGetterResult; export type FormatterParams = { - series: { [id: string]: ChartsSeriesConfig[T]['seriesInput'] }; - seriesOrder: string[]; + series: Record; + seriesOrder: SeriesId[]; }; export type FormatterResult = { - series: { [id: string]: ChartSeriesDefaultized }; - seriesOrder: string[]; + series: Record>; + seriesOrder: SeriesId[]; } & (ChartsSeriesConfig[T] extends { canBeStacked: true; } @@ -100,7 +101,7 @@ export type LegendParams = { * The identifier of the legend element. * Used for internal purpose such as `key` props */ - id: string; + id: SeriesId; }; export type LegendGetter = ( diff --git a/packages/x-charts/src/models/seriesType/line.ts b/packages/x-charts/src/models/seriesType/line.ts index 0f1cde8b17516..43f22233db29f 100644 --- a/packages/x-charts/src/models/seriesType/line.ts +++ b/packages/x-charts/src/models/seriesType/line.ts @@ -4,6 +4,7 @@ import { CartesianSeriesType, CommonDefaultizedProps, CommonSeriesType, + SeriesId, StackableSeriesType, } from './common'; @@ -86,7 +87,7 @@ export interface LineSeriesType */ export type LineItemIdentifier = { type: 'line'; - seriesId: DefaultizedLineSeriesType['id']; + seriesId: SeriesId; /** * `dataIndex` can be `undefined` if the mouse is over the area and not a specific item. */ diff --git a/packages/x-charts/src/models/seriesType/pie.ts b/packages/x-charts/src/models/seriesType/pie.ts index a9a9decdba78a..5fea25a4f6c6e 100644 --- a/packages/x-charts/src/models/seriesType/pie.ts +++ b/packages/x-charts/src/models/seriesType/pie.ts @@ -1,9 +1,14 @@ import { PieArcDatum as D3PieArcDatum } from 'd3-shape'; import { DefaultizedProps } from '../helpers'; -import { CommonDefaultizedProps, CommonSeriesType } from './common'; +import { CommonDefaultizedProps, CommonSeriesType, SeriesId } from './common'; + +export type PieItemId = string | number; export type PieValueType = { - id: string | number; + /** + * A unique identifier of the pie slice. + */ + id: PieItemId; value: number; label?: string; color?: string; @@ -122,7 +127,7 @@ export interface PieSeriesType extends CommonSeriesType, CartesianSeriesType { type: 'scatter'; @@ -21,7 +28,7 @@ export interface ScatterSeriesType extends CommonSeriesType, C */ export type ScatterItemIdentifier = { type: 'scatter'; - seriesId: DefaultizedScatterSeriesType['id']; + seriesId: SeriesId; dataIndex: number; }; diff --git a/packages/x-charts/tsconfig.build.json b/packages/x-charts/tsconfig.build.json index 9a57c648d7749..019fe2e46dfe7 100644 --- a/packages/x-charts/tsconfig.build.json +++ b/packages/x-charts/tsconfig.build.json @@ -10,7 +10,7 @@ "outDir": "build", "rootDir": "./src" }, - "references": [{ "path": "../x-license-pro/tsconfig.build.json" }], + "references": [{ "path": "../x-license/tsconfig.build.json" }], "include": ["src/**/*.ts*", "../../node_modules/@mui/material/themeCssVarsAugmentation"], "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*", "src/tests/**/*"] } diff --git a/packages/grid/x-data-grid-generator/README.md b/packages/x-data-grid-generator/README.md similarity index 100% rename from packages/grid/x-data-grid-generator/README.md rename to packages/x-data-grid-generator/README.md diff --git a/packages/grid/x-data-grid-generator/package.json b/packages/x-data-grid-generator/package.json similarity index 68% rename from packages/grid/x-data-grid-generator/package.json rename to packages/x-data-grid-generator/package.json index a6bec07d2e311..41c6acb18f043 100644 --- a/packages/grid/x-data-grid-generator/package.json +++ b/packages/x-data-grid-generator/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid-generator", - "version": "7.0.0-beta.1", + "version": "7.0.0-beta.2", "description": "Generate fake data for demo purposes only.", "author": "MUI Team", "main": "src/index.ts", @@ -8,7 +8,7 @@ "bugs": { "url": "https://github.com/mui/mui-x/issues" }, - "homepage": "https://github.com/mui/mui-x/tree/master/packages/grid/x-data-grid-generator", + "homepage": "https://github.com/mui/mui-x/tree/master/packages/x-data-grid-generator", "sideEffects": false, "publishConfig": { "access": "public" @@ -19,23 +19,23 @@ "scripts": { "typescript": "tsc -p tsconfig.json", "build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:types && yarn build:copy-files ", - "build:legacy": "node ../../../scripts/build.mjs legacy", - "build:modern": "node ../../../scripts/build.mjs modern", - "build:node": "node ../../../scripts/build.mjs node", - "build:stable": "node ../../../scripts/build.mjs stable", - "build:copy-files": "node ../../../scripts/copyFiles.mjs", - "build:types": "node ../../../scripts/buildTypes.mjs", + "build:legacy": "node ../../scripts/build.mjs legacy", + "build:modern": "node ../../scripts/build.mjs modern", + "build:node": "node ../../scripts/build.mjs node", + "build:stable": "node ../../scripts/build.mjs stable", + "build:copy-files": "node ../../scripts/copyFiles.mjs", + "build:types": "node ../../scripts/buildTypes.mjs", "prebuild": "rimraf build tsconfig.build.tsbuildinfo" }, "repository": { "type": "git", "url": "https://github.com/mui/mui-x.git", - "directory": "packages/grid/x-data-grid-generator" + "directory": "packages/x-data-grid-generator" }, "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/base": "^5.0.0-beta.34", - "@mui/x-data-grid-premium": "7.0.0-beta.1", + "@mui/base": "^5.0.0-beta.36", + "@mui/x-data-grid-premium": "7.0.0-beta.2", "chance": "^1.1.11", "clsx": "^2.1.0", "lru-cache": "^7.18.3" diff --git a/packages/grid/x-data-grid-generator/src/columns/commodities.columns.tsx b/packages/x-data-grid-generator/src/columns/commodities.columns.tsx similarity index 100% rename from packages/grid/x-data-grid-generator/src/columns/commodities.columns.tsx rename to packages/x-data-grid-generator/src/columns/commodities.columns.tsx diff --git a/packages/grid/x-data-grid-generator/src/columns/employees.columns.tsx b/packages/x-data-grid-generator/src/columns/employees.columns.tsx similarity index 100% rename from packages/grid/x-data-grid-generator/src/columns/employees.columns.tsx rename to packages/x-data-grid-generator/src/columns/employees.columns.tsx diff --git a/packages/grid/x-data-grid-generator/src/columns/index.ts b/packages/x-data-grid-generator/src/columns/index.ts similarity index 100% rename from packages/grid/x-data-grid-generator/src/columns/index.ts rename to packages/x-data-grid-generator/src/columns/index.ts diff --git a/packages/grid/x-data-grid-generator/src/hooks/index.ts b/packages/x-data-grid-generator/src/hooks/index.ts similarity index 100% rename from packages/grid/x-data-grid-generator/src/hooks/index.ts rename to packages/x-data-grid-generator/src/hooks/index.ts diff --git a/packages/grid/x-data-grid-generator/src/hooks/useBasicDemoData.ts b/packages/x-data-grid-generator/src/hooks/useBasicDemoData.ts similarity index 100% rename from packages/grid/x-data-grid-generator/src/hooks/useBasicDemoData.ts rename to packages/x-data-grid-generator/src/hooks/useBasicDemoData.ts diff --git a/packages/grid/x-data-grid-generator/src/hooks/useDemoData.ts b/packages/x-data-grid-generator/src/hooks/useDemoData.ts similarity index 100% rename from packages/grid/x-data-grid-generator/src/hooks/useDemoData.ts rename to packages/x-data-grid-generator/src/hooks/useDemoData.ts diff --git a/packages/grid/x-data-grid-generator/src/hooks/useMovieData.ts b/packages/x-data-grid-generator/src/hooks/useMovieData.ts similarity index 100% rename from packages/grid/x-data-grid-generator/src/hooks/useMovieData.ts rename to packages/x-data-grid-generator/src/hooks/useMovieData.ts diff --git a/packages/grid/x-data-grid-generator/src/hooks/useQuery.ts b/packages/x-data-grid-generator/src/hooks/useQuery.ts similarity index 100% rename from packages/grid/x-data-grid-generator/src/hooks/useQuery.ts rename to packages/x-data-grid-generator/src/hooks/useQuery.ts diff --git a/packages/grid/x-data-grid-generator/src/index.ts b/packages/x-data-grid-generator/src/index.ts similarity index 100% rename from packages/grid/x-data-grid-generator/src/index.ts rename to packages/x-data-grid-generator/src/index.ts diff --git a/packages/grid/x-data-grid-generator/src/renderer/index.ts b/packages/x-data-grid-generator/src/renderer/index.ts similarity index 100% rename from packages/grid/x-data-grid-generator/src/renderer/index.ts rename to packages/x-data-grid-generator/src/renderer/index.ts diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderAvatar.tsx b/packages/x-data-grid-generator/src/renderer/renderAvatar.tsx similarity index 100% rename from packages/grid/x-data-grid-generator/src/renderer/renderAvatar.tsx rename to packages/x-data-grid-generator/src/renderer/renderAvatar.tsx diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderCountry.tsx b/packages/x-data-grid-generator/src/renderer/renderCountry.tsx similarity index 100% rename from packages/grid/x-data-grid-generator/src/renderer/renderCountry.tsx rename to packages/x-data-grid-generator/src/renderer/renderCountry.tsx diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderEditCountry.tsx b/packages/x-data-grid-generator/src/renderer/renderEditCountry.tsx similarity index 100% rename from packages/grid/x-data-grid-generator/src/renderer/renderEditCountry.tsx rename to packages/x-data-grid-generator/src/renderer/renderEditCountry.tsx diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderEditCurrency.tsx b/packages/x-data-grid-generator/src/renderer/renderEditCurrency.tsx similarity index 100% rename from packages/grid/x-data-grid-generator/src/renderer/renderEditCurrency.tsx rename to packages/x-data-grid-generator/src/renderer/renderEditCurrency.tsx diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderEditIncoterm.tsx b/packages/x-data-grid-generator/src/renderer/renderEditIncoterm.tsx similarity index 100% rename from packages/grid/x-data-grid-generator/src/renderer/renderEditIncoterm.tsx rename to packages/x-data-grid-generator/src/renderer/renderEditIncoterm.tsx diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderEditProgress.tsx b/packages/x-data-grid-generator/src/renderer/renderEditProgress.tsx similarity index 100% rename from packages/grid/x-data-grid-generator/src/renderer/renderEditProgress.tsx rename to packages/x-data-grid-generator/src/renderer/renderEditProgress.tsx diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderEditRating.tsx b/packages/x-data-grid-generator/src/renderer/renderEditRating.tsx similarity index 100% rename from packages/grid/x-data-grid-generator/src/renderer/renderEditRating.tsx rename to packages/x-data-grid-generator/src/renderer/renderEditRating.tsx diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderEditStatus.tsx b/packages/x-data-grid-generator/src/renderer/renderEditStatus.tsx similarity index 100% rename from packages/grid/x-data-grid-generator/src/renderer/renderEditStatus.tsx rename to packages/x-data-grid-generator/src/renderer/renderEditStatus.tsx diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderEmail.tsx b/packages/x-data-grid-generator/src/renderer/renderEmail.tsx similarity index 100% rename from packages/grid/x-data-grid-generator/src/renderer/renderEmail.tsx rename to packages/x-data-grid-generator/src/renderer/renderEmail.tsx diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderIncoterm.tsx b/packages/x-data-grid-generator/src/renderer/renderIncoterm.tsx similarity index 100% rename from packages/grid/x-data-grid-generator/src/renderer/renderIncoterm.tsx rename to packages/x-data-grid-generator/src/renderer/renderIncoterm.tsx diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderLink.tsx b/packages/x-data-grid-generator/src/renderer/renderLink.tsx similarity index 100% rename from packages/grid/x-data-grid-generator/src/renderer/renderLink.tsx rename to packages/x-data-grid-generator/src/renderer/renderLink.tsx diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderPnl.tsx b/packages/x-data-grid-generator/src/renderer/renderPnl.tsx similarity index 100% rename from packages/grid/x-data-grid-generator/src/renderer/renderPnl.tsx rename to packages/x-data-grid-generator/src/renderer/renderPnl.tsx diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderProgress.tsx b/packages/x-data-grid-generator/src/renderer/renderProgress.tsx similarity index 100% rename from packages/grid/x-data-grid-generator/src/renderer/renderProgress.tsx rename to packages/x-data-grid-generator/src/renderer/renderProgress.tsx diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderRating.tsx b/packages/x-data-grid-generator/src/renderer/renderRating.tsx similarity index 100% rename from packages/grid/x-data-grid-generator/src/renderer/renderRating.tsx rename to packages/x-data-grid-generator/src/renderer/renderRating.tsx diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderStatus.tsx b/packages/x-data-grid-generator/src/renderer/renderStatus.tsx similarity index 100% rename from packages/grid/x-data-grid-generator/src/renderer/renderStatus.tsx rename to packages/x-data-grid-generator/src/renderer/renderStatus.tsx diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderTotalPrice.tsx b/packages/x-data-grid-generator/src/renderer/renderTotalPrice.tsx similarity index 100% rename from packages/grid/x-data-grid-generator/src/renderer/renderTotalPrice.tsx rename to packages/x-data-grid-generator/src/renderer/renderTotalPrice.tsx diff --git a/packages/grid/x-data-grid-generator/src/services/asyncWorker.ts b/packages/x-data-grid-generator/src/services/asyncWorker.ts similarity index 100% rename from packages/grid/x-data-grid-generator/src/services/asyncWorker.ts rename to packages/x-data-grid-generator/src/services/asyncWorker.ts diff --git a/packages/grid/x-data-grid-generator/src/services/basic-data-service.ts b/packages/x-data-grid-generator/src/services/basic-data-service.ts similarity index 100% rename from packages/grid/x-data-grid-generator/src/services/basic-data-service.ts rename to packages/x-data-grid-generator/src/services/basic-data-service.ts diff --git a/packages/grid/x-data-grid-generator/src/services/gridColDefGenerator.ts b/packages/x-data-grid-generator/src/services/gridColDefGenerator.ts similarity index 100% rename from packages/grid/x-data-grid-generator/src/services/gridColDefGenerator.ts rename to packages/x-data-grid-generator/src/services/gridColDefGenerator.ts diff --git a/packages/grid/x-data-grid-generator/src/services/index.ts b/packages/x-data-grid-generator/src/services/index.ts similarity index 100% rename from packages/grid/x-data-grid-generator/src/services/index.ts rename to packages/x-data-grid-generator/src/services/index.ts diff --git a/packages/grid/x-data-grid-generator/src/services/random-generator.ts b/packages/x-data-grid-generator/src/services/random-generator.ts similarity index 100% rename from packages/grid/x-data-grid-generator/src/services/random-generator.ts rename to packages/x-data-grid-generator/src/services/random-generator.ts diff --git a/packages/grid/x-data-grid-generator/src/services/real-data-service.ts b/packages/x-data-grid-generator/src/services/real-data-service.ts similarity index 100% rename from packages/grid/x-data-grid-generator/src/services/real-data-service.ts rename to packages/x-data-grid-generator/src/services/real-data-service.ts diff --git a/packages/grid/x-data-grid-generator/src/services/static-data.ts b/packages/x-data-grid-generator/src/services/static-data.ts similarity index 100% rename from packages/grid/x-data-grid-generator/src/services/static-data.ts rename to packages/x-data-grid-generator/src/services/static-data.ts diff --git a/packages/grid/x-data-grid-generator/src/services/tree-data-generator.ts b/packages/x-data-grid-generator/src/services/tree-data-generator.ts similarity index 100% rename from packages/grid/x-data-grid-generator/src/services/tree-data-generator.ts rename to packages/x-data-grid-generator/src/services/tree-data-generator.ts diff --git a/packages/grid/x-data-grid-generator/tsconfig.build.json b/packages/x-data-grid-generator/tsconfig.build.json similarity index 82% rename from packages/grid/x-data-grid-generator/tsconfig.build.json rename to packages/x-data-grid-generator/tsconfig.build.json index 308195899c26c..9a58225313918 100644 --- a/packages/grid/x-data-grid-generator/tsconfig.build.json +++ b/packages/x-data-grid-generator/tsconfig.build.json @@ -11,6 +11,6 @@ "rootDir": "./src" }, "references": [{ "path": "../x-data-grid-premium/tsconfig.build.json" }], - "include": ["src/**/*.ts*", "../../../node_modules/@mui/material/themeCssVarsAugmentation"], + "include": ["src/**/*.ts*", "../../node_modules/@mui/material/themeCssVarsAugmentation"], "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"] } diff --git a/packages/x-data-grid-generator/tsconfig.json b/packages/x-data-grid-generator/tsconfig.json new file mode 100644 index 0000000000000..cbaf4e9b20e9a --- /dev/null +++ b/packages/x-data-grid-generator/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "types": ["react", "mocha", "node"] + }, + "include": ["src/**/*", "../../node_modules/@mui/material/themeCssVarsAugmentation"] +} diff --git a/packages/grid/x-data-grid-premium/LICENSE b/packages/x-data-grid-premium/LICENSE similarity index 100% rename from packages/grid/x-data-grid-premium/LICENSE rename to packages/x-data-grid-premium/LICENSE diff --git a/packages/grid/x-data-grid-premium/README.md b/packages/x-data-grid-premium/README.md similarity index 100% rename from packages/grid/x-data-grid-premium/README.md rename to packages/x-data-grid-premium/README.md diff --git a/packages/grid/x-data-grid-premium/package.json b/packages/x-data-grid-premium/package.json similarity index 68% rename from packages/grid/x-data-grid-premium/package.json rename to packages/x-data-grid-premium/package.json index f73cb63df8184..4ffd29b45acf2 100644 --- a/packages/grid/x-data-grid-premium/package.json +++ b/packages/x-data-grid-premium/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid-premium", - "version": "7.0.0-beta.1", + "version": "7.0.0-beta.2", "description": "The Premium plan edition of the data grid component (MUI X).", "author": "MUI Team", "main": "src/index.ts", @@ -29,26 +29,26 @@ "scripts": { "typescript": "tsc -p tsconfig.json", "build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:types && yarn build:copy-files ", - "build:legacy": "node ../../../scripts/build.mjs legacy", - "build:modern": "node ../../../scripts/build.mjs modern", - "build:node": "node ../../../scripts/build.mjs node", - "build:stable": "node ../../../scripts/build.mjs stable", - "build:copy-files": "node ../../../scripts/copyFiles.mjs", - "build:types": "node ../../../scripts/buildTypes.mjs", + "build:legacy": "node ../../scripts/build.mjs legacy", + "build:modern": "node ../../scripts/build.mjs modern", + "build:node": "node ../../scripts/build.mjs node", + "build:stable": "node ../../scripts/build.mjs stable", + "build:copy-files": "node ../../scripts/copyFiles.mjs", + "build:types": "node ../../scripts/buildTypes.mjs", "prebuild": "rimraf build tsconfig.build.tsbuildinfo" }, "repository": { "type": "git", "url": "https://github.com/mui/mui-x.git", - "directory": "packages/grid/x-data-grid-premium" + "directory": "packages/x-data-grid-premium" }, "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/system": "^5.15.7", - "@mui/utils": "^5.15.7", - "@mui/x-data-grid": "7.0.0-beta.1", - "@mui/x-data-grid-pro": "7.0.0-beta.1", - "@mui/x-license-pro": "7.0.0-beta.0", + "@mui/system": "^5.15.9", + "@mui/utils": "^5.15.9", + "@mui/x-data-grid": "7.0.0-beta.2", + "@mui/x-data-grid-pro": "7.0.0-beta.2", + "@mui/x-license": "7.0.0-beta.2", "@types/format-util": "^1.0.4", "clsx": "^2.1.0", "exceljs": "^4.4.0", diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGrid.tsx b/packages/x-data-grid-premium/src/DataGridPremium/DataGrid.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/DataGridPremium/DataGrid.tsx rename to packages/x-data-grid-premium/src/DataGridPremium/DataGrid.tsx diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx similarity index 99% rename from packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx rename to packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index e4958093925cb..bd22bc5b2f730 100644 --- a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { useLicenseVerifier, Watermark } from '@mui/x-license-pro'; +import { useLicenseVerifier, Watermark } from '@mui/x-license'; import { GridBody, GridFooterPlaceholder, @@ -23,6 +23,8 @@ import { import { useDataGridPremiumProps } from './useDataGridPremiumProps'; import { getReleaseInfo } from '../utils/releaseInfo'; +export type { GridPremiumSlotsComponent as GridSlots } from '../models'; + const releaseInfo = getReleaseInfo(); const dataGridPremiumPropValidators: PropValidator[] = [ @@ -513,7 +515,7 @@ DataGridPremiumRaw.propTypes = { loading: PropTypes.bool, /** * Set the locale text of the Data Grid. - * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/grid/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository. + * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository. */ localeText: PropTypes.object, /** diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/index.ts b/packages/x-data-grid-premium/src/DataGridPremium/index.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/DataGridPremium/index.ts rename to packages/x-data-grid-premium/src/DataGridPremium/index.ts diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx b/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx rename to packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumProps.ts b/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumProps.ts similarity index 96% rename from packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumProps.ts rename to packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumProps.ts index ca1c799c21019..c77bc51f8c997 100644 --- a/packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumProps.ts +++ b/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumProps.ts @@ -36,6 +36,7 @@ const defaultSlots = DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS; export const useDataGridPremiumProps = (inProps: DataGridPremiumProps) => { const themedProps = useProps( + // eslint-disable-next-line material-ui/mui-name-matches-component-name useThemeProps({ props: inProps, name: 'MuiDataGrid', diff --git a/packages/grid/x-data-grid-premium/src/components/GridAggregationHeader.tsx b/packages/x-data-grid-premium/src/components/GridAggregationHeader.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/components/GridAggregationHeader.tsx rename to packages/x-data-grid-premium/src/components/GridAggregationHeader.tsx diff --git a/packages/grid/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx b/packages/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx rename to packages/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx diff --git a/packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowGroupItem.tsx b/packages/x-data-grid-premium/src/components/GridColumnMenuRowGroupItem.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowGroupItem.tsx rename to packages/x-data-grid-premium/src/components/GridColumnMenuRowGroupItem.tsx diff --git a/packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItem.tsx b/packages/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItem.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItem.tsx rename to packages/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItem.tsx diff --git a/packages/grid/x-data-grid-premium/src/components/GridExcelExportMenuItem.tsx b/packages/x-data-grid-premium/src/components/GridExcelExportMenuItem.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/components/GridExcelExportMenuItem.tsx rename to packages/x-data-grid-premium/src/components/GridExcelExportMenuItem.tsx diff --git a/packages/grid/x-data-grid-premium/src/components/GridFooterCell.tsx b/packages/x-data-grid-premium/src/components/GridFooterCell.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/components/GridFooterCell.tsx rename to packages/x-data-grid-premium/src/components/GridFooterCell.tsx diff --git a/packages/grid/x-data-grid-premium/src/components/GridGroupingColumnFooterCell.tsx b/packages/x-data-grid-premium/src/components/GridGroupingColumnFooterCell.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/components/GridGroupingColumnFooterCell.tsx rename to packages/x-data-grid-premium/src/components/GridGroupingColumnFooterCell.tsx diff --git a/packages/grid/x-data-grid-premium/src/components/GridGroupingColumnLeafCell.tsx b/packages/x-data-grid-premium/src/components/GridGroupingColumnLeafCell.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/components/GridGroupingColumnLeafCell.tsx rename to packages/x-data-grid-premium/src/components/GridGroupingColumnLeafCell.tsx diff --git a/packages/grid/x-data-grid-premium/src/components/GridGroupingCriteriaCell.tsx b/packages/x-data-grid-premium/src/components/GridGroupingCriteriaCell.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/components/GridGroupingCriteriaCell.tsx rename to packages/x-data-grid-premium/src/components/GridGroupingCriteriaCell.tsx diff --git a/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenu.tsx b/packages/x-data-grid-premium/src/components/GridPremiumColumnMenu.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenu.tsx rename to packages/x-data-grid-premium/src/components/GridPremiumColumnMenu.tsx diff --git a/packages/grid/x-data-grid-premium/src/components/index.ts b/packages/x-data-grid-premium/src/components/index.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/components/index.ts rename to packages/x-data-grid-premium/src/components/index.ts diff --git a/packages/grid/x-data-grid-premium/src/components/reexports.ts b/packages/x-data-grid-premium/src/components/reexports.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/components/reexports.ts rename to packages/x-data-grid-premium/src/components/reexports.ts diff --git a/packages/grid/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts b/packages/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts rename to packages/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/createAggregationLookup.ts b/packages/x-data-grid-premium/src/hooks/features/aggregation/createAggregationLookup.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/features/aggregation/createAggregationLookup.ts rename to packages/x-data-grid-premium/src/hooks/features/aggregation/createAggregationLookup.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationFunctions.ts b/packages/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationFunctions.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationFunctions.ts rename to packages/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationFunctions.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationInterfaces.ts b/packages/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationInterfaces.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationInterfaces.ts rename to packages/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationInterfaces.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationSelectors.ts b/packages/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationSelectors.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationSelectors.ts rename to packages/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationSelectors.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationUtils.ts b/packages/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationUtils.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationUtils.ts rename to packages/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationUtils.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/index.ts b/packages/x-data-grid-premium/src/hooks/features/aggregation/index.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/features/aggregation/index.ts rename to packages/x-data-grid-premium/src/hooks/features/aggregation/index.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregation.ts b/packages/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregation.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregation.ts rename to packages/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregation.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx b/packages/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx rename to packages/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/wrapColumnWithAggregation.tsx b/packages/x-data-grid-premium/src/hooks/features/aggregation/wrapColumnWithAggregation.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/features/aggregation/wrapColumnWithAggregation.tsx rename to packages/x-data-grid-premium/src/hooks/features/aggregation/wrapColumnWithAggregation.tsx diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/gridCellSelectionInterfaces.ts b/packages/x-data-grid-premium/src/hooks/features/cellSelection/gridCellSelectionInterfaces.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/gridCellSelectionInterfaces.ts rename to packages/x-data-grid-premium/src/hooks/features/cellSelection/gridCellSelectionInterfaces.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/gridCellSelectionSelector.ts b/packages/x-data-grid-premium/src/hooks/features/cellSelection/gridCellSelectionSelector.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/gridCellSelectionSelector.ts rename to packages/x-data-grid-premium/src/hooks/features/cellSelection/gridCellSelectionSelector.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/index.ts b/packages/x-data-grid-premium/src/hooks/features/cellSelection/index.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/index.ts rename to packages/x-data-grid-premium/src/hooks/features/cellSelection/index.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts b/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts rename to packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts b/packages/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts similarity index 98% rename from packages/grid/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts rename to packages/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts index d42de85dd864f..6506078b20ad6 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts +++ b/packages/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts @@ -304,9 +304,15 @@ function defaultPasteResolver({ }); } -function isPasteShortcut(event: React.KeyboardEvent) { - return (event.ctrlKey || event.metaKey) && event.key === 'v'; -} +const isPasteShortcut = (event: React.KeyboardEvent) => { + if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'v') { + if (event.shiftKey || event.altKey) { + return false; + } + return true; + } + return false; +}; export const useGridClipboardImport = ( apiRef: React.MutableRefObject, diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/export/gridExcelExportInterface.ts b/packages/x-data-grid-premium/src/hooks/features/export/gridExcelExportInterface.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/features/export/gridExcelExportInterface.ts rename to packages/x-data-grid-premium/src/hooks/features/export/gridExcelExportInterface.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/export/index.ts b/packages/x-data-grid-premium/src/hooks/features/export/index.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/features/export/index.ts rename to packages/x-data-grid-premium/src/hooks/features/export/index.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/export/serializer/excelSerializer.ts b/packages/x-data-grid-premium/src/hooks/features/export/serializer/excelSerializer.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/features/export/serializer/excelSerializer.ts rename to packages/x-data-grid-premium/src/hooks/features/export/serializer/excelSerializer.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/export/useGridExcelExport.tsx b/packages/x-data-grid-premium/src/hooks/features/export/useGridExcelExport.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/features/export/useGridExcelExport.tsx rename to packages/x-data-grid-premium/src/hooks/features/export/useGridExcelExport.tsx diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/index.ts b/packages/x-data-grid-premium/src/hooks/features/index.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/features/index.ts rename to packages/x-data-grid-premium/src/hooks/features/index.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx rename to packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingInterfaces.ts b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingInterfaces.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingInterfaces.ts rename to packages/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingInterfaces.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingSelector.ts b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingSelector.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingSelector.ts rename to packages/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingSelector.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingUtils.ts b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingUtils.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingUtils.ts rename to packages/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingUtils.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/index.ts b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/index.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/index.ts rename to packages/x-data-grid-premium/src/hooks/features/rowGrouping/index.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx rename to packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts rename to packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/index.ts b/packages/x-data-grid-premium/src/hooks/index.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/index.ts rename to packages/x-data-grid-premium/src/hooks/index.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/utils/index.ts b/packages/x-data-grid-premium/src/hooks/utils/index.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/utils/index.ts rename to packages/x-data-grid-premium/src/hooks/utils/index.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/utils/useGridApiContext.ts b/packages/x-data-grid-premium/src/hooks/utils/useGridApiContext.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/utils/useGridApiContext.ts rename to packages/x-data-grid-premium/src/hooks/utils/useGridApiContext.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/utils/useGridApiRef.ts b/packages/x-data-grid-premium/src/hooks/utils/useGridApiRef.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/utils/useGridApiRef.ts rename to packages/x-data-grid-premium/src/hooks/utils/useGridApiRef.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/utils/useGridPrivateApiContext.ts b/packages/x-data-grid-premium/src/hooks/utils/useGridPrivateApiContext.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/utils/useGridPrivateApiContext.ts rename to packages/x-data-grid-premium/src/hooks/utils/useGridPrivateApiContext.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/utils/useGridRootProps.ts b/packages/x-data-grid-premium/src/hooks/utils/useGridRootProps.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/utils/useGridRootProps.ts rename to packages/x-data-grid-premium/src/hooks/utils/useGridRootProps.ts diff --git a/packages/grid/x-data-grid-premium/src/hooks/utils/useKeepGroupedColumnsHidden.ts b/packages/x-data-grid-premium/src/hooks/utils/useKeepGroupedColumnsHidden.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/hooks/utils/useKeepGroupedColumnsHidden.ts rename to packages/x-data-grid-premium/src/hooks/utils/useKeepGroupedColumnsHidden.ts diff --git a/packages/grid/x-data-grid-premium/src/index.ts b/packages/x-data-grid-premium/src/index.ts similarity index 81% rename from packages/grid/x-data-grid-premium/src/index.ts rename to packages/x-data-grid-premium/src/index.ts index f1a22a200ad24..5e9f3e0c5334b 100644 --- a/packages/grid/x-data-grid-premium/src/index.ts +++ b/packages/x-data-grid-premium/src/index.ts @@ -1,6 +1,12 @@ import './typeOverloads'; -export { LicenseInfo } from '@mui/x-license-pro'; +import { LicenseInfo as LicenseInfoExport } from '@mui/x-license'; +/** + * @deprecated Use `@mui/x-license` package instead: + * @example import { LicenseInfo } from '@mui/x-license'; + */ +export class LicenseInfo extends LicenseInfoExport {} + export * from '@mui/x-data-grid/components'; export * from '@mui/x-data-grid-pro/components'; export * from '@mui/x-data-grid/constants'; diff --git a/packages/grid/x-data-grid-premium/src/locales.ts b/packages/x-data-grid-premium/src/locales.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/locales.ts rename to packages/x-data-grid-premium/src/locales.ts diff --git a/packages/grid/x-data-grid-premium/src/material/icons.tsx b/packages/x-data-grid-premium/src/material/icons.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/material/icons.tsx rename to packages/x-data-grid-premium/src/material/icons.tsx diff --git a/packages/grid/x-data-grid-premium/src/material/index.ts b/packages/x-data-grid-premium/src/material/index.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/material/index.ts rename to packages/x-data-grid-premium/src/material/index.ts diff --git a/packages/grid/x-data-grid-premium/src/models/dataGridPremiumProps.ts b/packages/x-data-grid-premium/src/models/dataGridPremiumProps.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/models/dataGridPremiumProps.ts rename to packages/x-data-grid-premium/src/models/dataGridPremiumProps.ts diff --git a/packages/grid/x-data-grid-premium/src/models/gridApiPremium.ts b/packages/x-data-grid-premium/src/models/gridApiPremium.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/models/gridApiPremium.ts rename to packages/x-data-grid-premium/src/models/gridApiPremium.ts diff --git a/packages/grid/x-data-grid-premium/src/models/gridGroupingValueGetter.ts b/packages/x-data-grid-premium/src/models/gridGroupingValueGetter.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/models/gridGroupingValueGetter.ts rename to packages/x-data-grid-premium/src/models/gridGroupingValueGetter.ts diff --git a/packages/grid/x-data-grid-premium/src/models/gridPastedValueParser.ts b/packages/x-data-grid-premium/src/models/gridPastedValueParser.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/models/gridPastedValueParser.ts rename to packages/x-data-grid-premium/src/models/gridPastedValueParser.ts diff --git a/packages/grid/x-data-grid-premium/src/models/gridPremiumIconSlotsComponent.ts b/packages/x-data-grid-premium/src/models/gridPremiumIconSlotsComponent.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/models/gridPremiumIconSlotsComponent.ts rename to packages/x-data-grid-premium/src/models/gridPremiumIconSlotsComponent.ts diff --git a/packages/grid/x-data-grid-premium/src/models/gridPremiumSlotsComponent.ts b/packages/x-data-grid-premium/src/models/gridPremiumSlotsComponent.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/models/gridPremiumSlotsComponent.ts rename to packages/x-data-grid-premium/src/models/gridPremiumSlotsComponent.ts diff --git a/packages/grid/x-data-grid-premium/src/models/gridStatePremium.ts b/packages/x-data-grid-premium/src/models/gridStatePremium.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/models/gridStatePremium.ts rename to packages/x-data-grid-premium/src/models/gridStatePremium.ts diff --git a/packages/grid/x-data-grid-premium/src/models/index.ts b/packages/x-data-grid-premium/src/models/index.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/models/index.ts rename to packages/x-data-grid-premium/src/models/index.ts diff --git a/packages/grid/x-data-grid-premium/src/tests/DataGridPremium.spec.tsx b/packages/x-data-grid-premium/src/tests/DataGridPremium.spec.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/tests/DataGridPremium.spec.tsx rename to packages/x-data-grid-premium/src/tests/DataGridPremium.spec.tsx diff --git a/packages/grid/x-data-grid-premium/src/tests/DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/DataGridPremium.test.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/tests/DataGridPremium.test.tsx rename to packages/x-data-grid-premium/src/tests/DataGridPremium.test.tsx diff --git a/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx rename to packages/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx diff --git a/packages/grid/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx rename to packages/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx diff --git a/packages/grid/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx rename to packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx diff --git a/packages/grid/x-data-grid-premium/src/tests/columns.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/columns.DataGridPremium.test.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/tests/columns.DataGridPremium.test.tsx rename to packages/x-data-grid-premium/src/tests/columns.DataGridPremium.test.tsx diff --git a/packages/grid/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx rename to packages/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx diff --git a/packages/grid/x-data-grid-premium/src/tests/license.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/license.DataGridPremium.test.tsx similarity index 94% rename from packages/grid/x-data-grid-premium/src/tests/license.DataGridPremium.test.tsx rename to packages/x-data-grid-premium/src/tests/license.DataGridPremium.test.tsx index f1b698277677a..52bd05723a498 100644 --- a/packages/grid/x-data-grid-premium/src/tests/license.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/license.DataGridPremium.test.tsx @@ -3,7 +3,7 @@ import addYears from 'date-fns/addYears'; import { expect } from 'chai'; import { createRenderer, screen, waitFor } from '@mui-internal/test-utils'; import { DataGridPremium } from '@mui/x-data-grid-premium'; -import { generateLicense, LicenseInfo } from '@mui/x-license-pro'; +import { generateLicense, LicenseInfo } from '@mui/x-license'; describe(' - License', () => { const { render } = createRenderer(); diff --git a/packages/grid/x-data-grid-premium/src/tests/localization.DataGridPremium.spec.tsx b/packages/x-data-grid-premium/src/tests/localization.DataGridPremium.spec.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/tests/localization.DataGridPremium.spec.tsx rename to packages/x-data-grid-premium/src/tests/localization.DataGridPremium.spec.tsx diff --git a/packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx rename to packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx diff --git a/packages/grid/x-data-grid-premium/src/tests/rowPinning.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/rowPinning.DataGridPremium.test.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/tests/rowPinning.DataGridPremium.test.tsx rename to packages/x-data-grid-premium/src/tests/rowPinning.DataGridPremium.test.tsx diff --git a/packages/grid/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx similarity index 100% rename from packages/grid/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx rename to packages/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx diff --git a/packages/grid/x-data-grid-premium/src/themeAugmentation/index.js b/packages/x-data-grid-premium/src/themeAugmentation/index.js similarity index 100% rename from packages/grid/x-data-grid-premium/src/themeAugmentation/index.js rename to packages/x-data-grid-premium/src/themeAugmentation/index.js diff --git a/packages/grid/x-data-grid-premium/src/themeAugmentation/index.ts b/packages/x-data-grid-premium/src/themeAugmentation/index.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/themeAugmentation/index.ts rename to packages/x-data-grid-premium/src/themeAugmentation/index.ts diff --git a/packages/grid/x-data-grid-premium/src/themeAugmentation/overrides.ts b/packages/x-data-grid-premium/src/themeAugmentation/overrides.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/themeAugmentation/overrides.ts rename to packages/x-data-grid-premium/src/themeAugmentation/overrides.ts diff --git a/packages/grid/x-data-grid-premium/src/themeAugmentation/props.ts b/packages/x-data-grid-premium/src/themeAugmentation/props.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/themeAugmentation/props.ts rename to packages/x-data-grid-premium/src/themeAugmentation/props.ts diff --git a/packages/grid/x-data-grid-premium/src/typeOverloads/index.ts b/packages/x-data-grid-premium/src/typeOverloads/index.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/typeOverloads/index.ts rename to packages/x-data-grid-premium/src/typeOverloads/index.ts diff --git a/packages/grid/x-data-grid-premium/src/typeOverloads/modules.ts b/packages/x-data-grid-premium/src/typeOverloads/modules.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/typeOverloads/modules.ts rename to packages/x-data-grid-premium/src/typeOverloads/modules.ts diff --git a/packages/grid/x-data-grid-premium/src/typeOverloads/reexports.ts b/packages/x-data-grid-premium/src/typeOverloads/reexports.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/typeOverloads/reexports.ts rename to packages/x-data-grid-premium/src/typeOverloads/reexports.ts diff --git a/packages/grid/x-data-grid-premium/src/utils/releaseInfo.ts b/packages/x-data-grid-premium/src/utils/releaseInfo.ts similarity index 100% rename from packages/grid/x-data-grid-premium/src/utils/releaseInfo.ts rename to packages/x-data-grid-premium/src/utils/releaseInfo.ts diff --git a/packages/grid/x-data-grid-premium/tsconfig.build.json b/packages/x-data-grid-premium/tsconfig.build.json similarity index 77% rename from packages/grid/x-data-grid-premium/tsconfig.build.json rename to packages/x-data-grid-premium/tsconfig.build.json index 7ce260c259230..ebaf4a171fa61 100644 --- a/packages/grid/x-data-grid-premium/tsconfig.build.json +++ b/packages/x-data-grid-premium/tsconfig.build.json @@ -13,8 +13,8 @@ "references": [ { "path": "../x-data-grid/tsconfig.build.json" }, { "path": "../x-data-grid-pro/tsconfig.build.json" }, - { "path": "../../x-license-pro/tsconfig.build.json" } + { "path": "../x-license/tsconfig.build.json" } ], - "include": ["src/**/*.ts*", "../../../node_modules/@mui/material/themeCssVarsAugmentation"], + "include": ["src/**/*.ts*", "../../node_modules/@mui/material/themeCssVarsAugmentation"], "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"] } diff --git a/packages/x-license-pro/tsconfig.json b/packages/x-data-grid-premium/tsconfig.json similarity index 100% rename from packages/x-license-pro/tsconfig.json rename to packages/x-data-grid-premium/tsconfig.json diff --git a/packages/grid/x-data-grid-pro/LICENSE b/packages/x-data-grid-pro/LICENSE similarity index 100% rename from packages/grid/x-data-grid-pro/LICENSE rename to packages/x-data-grid-pro/LICENSE diff --git a/packages/grid/x-data-grid-pro/README.md b/packages/x-data-grid-pro/README.md similarity index 100% rename from packages/grid/x-data-grid-pro/README.md rename to packages/x-data-grid-pro/README.md diff --git a/packages/grid/x-data-grid-pro/package.json b/packages/x-data-grid-pro/package.json similarity index 69% rename from packages/grid/x-data-grid-pro/package.json rename to packages/x-data-grid-pro/package.json index acb1211be650e..a5186c5e85d93 100644 --- a/packages/grid/x-data-grid-pro/package.json +++ b/packages/x-data-grid-pro/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid-pro", - "version": "7.0.0-beta.1", + "version": "7.0.0-beta.2", "description": "The Pro plan edition of the data grid component (MUI X).", "author": "MUI Team", "main": "src/index.ts", @@ -29,25 +29,25 @@ "scripts": { "typescript": "tsc -p tsconfig.json", "build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:types && yarn build:copy-files ", - "build:legacy": "node ../../../scripts/build.mjs legacy", - "build:modern": "node ../../../scripts/build.mjs modern", - "build:node": "node ../../../scripts/build.mjs node", - "build:stable": "node ../../../scripts/build.mjs stable", - "build:copy-files": "node ../../../scripts/copyFiles.mjs", - "build:types": "node ../../../scripts/buildTypes.mjs", + "build:legacy": "node ../../scripts/build.mjs legacy", + "build:modern": "node ../../scripts/build.mjs modern", + "build:node": "node ../../scripts/build.mjs node", + "build:stable": "node ../../scripts/build.mjs stable", + "build:copy-files": "node ../../scripts/copyFiles.mjs", + "build:types": "node ../../scripts/buildTypes.mjs", "prebuild": "rimraf build tsconfig.build.tsbuildinfo" }, "repository": { "type": "git", "url": "https://github.com/mui/mui-x.git", - "directory": "packages/grid/x-data-grid-pro" + "directory": "packages/x-data-grid-pro" }, "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/system": "^5.15.7", - "@mui/utils": "^5.15.7", - "@mui/x-data-grid": "7.0.0-beta.1", - "@mui/x-license-pro": "7.0.0-beta.0", + "@mui/system": "^5.15.9", + "@mui/utils": "^5.15.9", + "@mui/x-data-grid": "7.0.0-beta.2", + "@mui/x-license": "7.0.0-beta.2", "@types/format-util": "^1.0.4", "clsx": "^2.1.0", "prop-types": "^15.8.1", diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGrid.tsx b/packages/x-data-grid-pro/src/DataGridPro/DataGrid.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/DataGridPro/DataGrid.tsx rename to packages/x-data-grid-pro/src/DataGridPro/DataGrid.tsx diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx similarity index 99% rename from packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx rename to packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx index b6623f1c4d26e..5e1fdf51f09f5 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { useLicenseVerifier, Watermark } from '@mui/x-license-pro'; +import { useLicenseVerifier, Watermark } from '@mui/x-license'; import { GridBody, GridFooterPlaceholder, @@ -16,6 +16,8 @@ import { useDataGridProProps } from './useDataGridProProps'; import { getReleaseInfo } from '../utils/releaseInfo'; import { propValidatorsDataGridPro } from '../internals/propValidation'; +export type { GridProSlotsComponent as GridSlots } from '../models'; + const releaseInfo = getReleaseInfo(); const DataGridProRaw = React.forwardRef(function DataGridPro( @@ -454,7 +456,7 @@ DataGridProRaw.propTypes = { loading: PropTypes.bool, /** * Set the locale text of the Data Grid. - * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/grid/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository. + * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository. */ localeText: PropTypes.object, /** diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/index.ts b/packages/x-data-grid-pro/src/DataGridPro/index.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/DataGridPro/index.ts rename to packages/x-data-grid-pro/src/DataGridPro/index.ts diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx b/packages/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx rename to packages/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts b/packages/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts similarity index 96% rename from packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts rename to packages/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts index df8ec99b7d041..33791fca9b48d 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts +++ b/packages/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts @@ -38,6 +38,7 @@ const defaultSlots = DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS; export const useDataGridProProps = (inProps: DataGridProProps) => { const themedProps = useProps( + // eslint-disable-next-line material-ui/mui-name-matches-component-name useThemeProps({ props: inProps, name: 'MuiDataGrid', diff --git a/packages/grid/x-data-grid-pro/src/components/GridColumnHeaders.tsx b/packages/x-data-grid-pro/src/components/GridColumnHeaders.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/components/GridColumnHeaders.tsx rename to packages/x-data-grid-pro/src/components/GridColumnHeaders.tsx diff --git a/packages/grid/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx b/packages/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx rename to packages/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx diff --git a/packages/grid/x-data-grid-pro/src/components/GridDetailPanel.tsx b/packages/x-data-grid-pro/src/components/GridDetailPanel.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/components/GridDetailPanel.tsx rename to packages/x-data-grid-pro/src/components/GridDetailPanel.tsx diff --git a/packages/grid/x-data-grid-pro/src/components/GridDetailPanelToggleCell.tsx b/packages/x-data-grid-pro/src/components/GridDetailPanelToggleCell.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/components/GridDetailPanelToggleCell.tsx rename to packages/x-data-grid-pro/src/components/GridDetailPanelToggleCell.tsx diff --git a/packages/grid/x-data-grid-pro/src/components/GridDetailPanels.tsx b/packages/x-data-grid-pro/src/components/GridDetailPanels.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/components/GridDetailPanels.tsx rename to packages/x-data-grid-pro/src/components/GridDetailPanels.tsx diff --git a/packages/grid/x-data-grid-pro/src/components/GridPinnedRows.tsx b/packages/x-data-grid-pro/src/components/GridPinnedRows.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/components/GridPinnedRows.tsx rename to packages/x-data-grid-pro/src/components/GridPinnedRows.tsx diff --git a/packages/grid/x-data-grid-pro/src/components/GridProColumnMenu.tsx b/packages/x-data-grid-pro/src/components/GridProColumnMenu.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/components/GridProColumnMenu.tsx rename to packages/x-data-grid-pro/src/components/GridProColumnMenu.tsx diff --git a/packages/grid/x-data-grid-pro/src/components/GridRowReorderCell.tsx b/packages/x-data-grid-pro/src/components/GridRowReorderCell.tsx similarity index 97% rename from packages/grid/x-data-grid-pro/src/components/GridRowReorderCell.tsx rename to packages/x-data-grid-pro/src/components/GridRowReorderCell.tsx index 36b9ff0e1439c..42a11ff403dad 100644 --- a/packages/grid/x-data-grid-pro/src/components/GridRowReorderCell.tsx +++ b/packages/x-data-grid-pro/src/components/GridRowReorderCell.tsx @@ -10,7 +10,7 @@ import { getDataGridUtilityClass, } from '@mui/x-data-grid'; import { gridEditRowsStateSelector, isEventTargetInPortal } from '@mui/x-data-grid/internals'; -import { DataGridProProcessedProps } from '../models/dataGridProProps'; +import type { DataGridProProcessedProps } from '../models/dataGridProProps'; import { useGridRootProps } from '../hooks/utils/useGridRootProps'; type OwnerState = { diff --git a/packages/grid/x-data-grid-pro/src/components/GridScrollArea.tsx b/packages/x-data-grid-pro/src/components/GridScrollArea.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/components/GridScrollArea.tsx rename to packages/x-data-grid-pro/src/components/GridScrollArea.tsx diff --git a/packages/grid/x-data-grid-pro/src/components/GridTreeDataGroupingCell.tsx b/packages/x-data-grid-pro/src/components/GridTreeDataGroupingCell.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/components/GridTreeDataGroupingCell.tsx rename to packages/x-data-grid-pro/src/components/GridTreeDataGroupingCell.tsx diff --git a/packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx rename to packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx diff --git a/packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx rename to packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx diff --git a/packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx rename to packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx diff --git a/packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx similarity index 94% rename from packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx rename to packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx index 4e89cdfd4d6cd..ac8188dd7226f 100644 --- a/packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx +++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx @@ -53,13 +53,16 @@ function GridHeaderFilterMenuContainer(props: { return null; } + const label = apiRef.current.getLocaleText('filterPanelOperator'); + const labelString = label ? String(label) : undefined; + return ( DataGridProProcessedProps; diff --git a/packages/grid/x-data-grid-pro/src/index.ts b/packages/x-data-grid-pro/src/index.ts similarity index 81% rename from packages/grid/x-data-grid-pro/src/index.ts rename to packages/x-data-grid-pro/src/index.ts index 42a811cf261f1..3a47149e47069 100644 --- a/packages/grid/x-data-grid-pro/src/index.ts +++ b/packages/x-data-grid-pro/src/index.ts @@ -1,6 +1,12 @@ import './typeOverloads'; -export { LicenseInfo } from '@mui/x-license-pro'; +import { LicenseInfo as LicenseInfoExport } from '@mui/x-license'; +/** + * @deprecated Use `@mui/x-license` package instead: + * @example import { LicenseInfo } from '@mui/x-license'; + */ +export class LicenseInfo extends LicenseInfoExport {} + export * from '@mui/x-data-grid/components'; export * from '@mui/x-data-grid/constants'; export * from '@mui/x-data-grid/hooks'; diff --git a/packages/grid/x-data-grid-pro/src/internals/index.ts b/packages/x-data-grid-pro/src/internals/index.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/internals/index.ts rename to packages/x-data-grid-pro/src/internals/index.ts diff --git a/packages/grid/x-data-grid-pro/src/internals/propValidation.ts b/packages/x-data-grid-pro/src/internals/propValidation.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/internals/propValidation.ts rename to packages/x-data-grid-pro/src/internals/propValidation.ts diff --git a/packages/grid/x-data-grid-pro/src/locales.ts b/packages/x-data-grid-pro/src/locales.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/locales.ts rename to packages/x-data-grid-pro/src/locales.ts diff --git a/packages/grid/x-data-grid-pro/src/material/icons.tsx b/packages/x-data-grid-pro/src/material/icons.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/material/icons.tsx rename to packages/x-data-grid-pro/src/material/icons.tsx diff --git a/packages/grid/x-data-grid-pro/src/material/index.ts b/packages/x-data-grid-pro/src/material/index.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/material/index.ts rename to packages/x-data-grid-pro/src/material/index.ts diff --git a/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts b/packages/x-data-grid-pro/src/models/dataGridProProps.ts similarity index 99% rename from packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts rename to packages/x-data-grid-pro/src/models/dataGridProProps.ts index aed84a135e0a7..ee279741b9ce0 100644 --- a/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts +++ b/packages/x-data-grid-pro/src/models/dataGridProProps.ts @@ -25,7 +25,7 @@ import { import { GridInitialStatePro } from './gridStatePro'; import { GridProSlotsComponent } from './gridProSlotsComponent'; import type { GridProSlotProps } from './gridProSlotProps'; -import { GridAutosizeOptions } from '../hooks'; +import type { GridAutosizeOptions } from '../hooks'; export interface GridExperimentalProFeatures extends GridExperimentalFeatures { /** diff --git a/packages/grid/x-data-grid-pro/src/models/dataSource.ts b/packages/x-data-grid-pro/src/models/dataSource.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/models/dataSource.ts rename to packages/x-data-grid-pro/src/models/dataSource.ts diff --git a/packages/grid/x-data-grid-pro/src/models/gridApiPro.ts b/packages/x-data-grid-pro/src/models/gridApiPro.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/models/gridApiPro.ts rename to packages/x-data-grid-pro/src/models/gridApiPro.ts diff --git a/packages/grid/x-data-grid-pro/src/models/gridFetchRowsParams.ts b/packages/x-data-grid-pro/src/models/gridFetchRowsParams.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/models/gridFetchRowsParams.ts rename to packages/x-data-grid-pro/src/models/gridFetchRowsParams.ts diff --git a/packages/grid/x-data-grid-pro/src/models/gridGroupingColDefOverride.ts b/packages/x-data-grid-pro/src/models/gridGroupingColDefOverride.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/models/gridGroupingColDefOverride.ts rename to packages/x-data-grid-pro/src/models/gridGroupingColDefOverride.ts diff --git a/packages/grid/x-data-grid-pro/src/models/gridProIconSlotsComponent.ts b/packages/x-data-grid-pro/src/models/gridProIconSlotsComponent.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/models/gridProIconSlotsComponent.ts rename to packages/x-data-grid-pro/src/models/gridProIconSlotsComponent.ts diff --git a/packages/grid/x-data-grid-pro/src/models/gridProSlotProps.ts b/packages/x-data-grid-pro/src/models/gridProSlotProps.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/models/gridProSlotProps.ts rename to packages/x-data-grid-pro/src/models/gridProSlotProps.ts diff --git a/packages/grid/x-data-grid-pro/src/models/gridProSlotsComponent.ts b/packages/x-data-grid-pro/src/models/gridProSlotsComponent.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/models/gridProSlotsComponent.ts rename to packages/x-data-grid-pro/src/models/gridProSlotsComponent.ts diff --git a/packages/grid/x-data-grid-pro/src/models/gridRowOrderChangeParams.ts b/packages/x-data-grid-pro/src/models/gridRowOrderChangeParams.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/models/gridRowOrderChangeParams.ts rename to packages/x-data-grid-pro/src/models/gridRowOrderChangeParams.ts diff --git a/packages/grid/x-data-grid-pro/src/models/gridRowScrollEndParams.ts b/packages/x-data-grid-pro/src/models/gridRowScrollEndParams.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/models/gridRowScrollEndParams.ts rename to packages/x-data-grid-pro/src/models/gridRowScrollEndParams.ts diff --git a/packages/grid/x-data-grid-pro/src/models/gridStatePro.ts b/packages/x-data-grid-pro/src/models/gridStatePro.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/models/gridStatePro.ts rename to packages/x-data-grid-pro/src/models/gridStatePro.ts diff --git a/packages/grid/x-data-grid-pro/src/models/index.ts b/packages/x-data-grid-pro/src/models/index.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/models/index.ts rename to packages/x-data-grid-pro/src/models/index.ts diff --git a/packages/grid/x-data-grid-pro/src/tests/DataGridPro.spec.tsx b/packages/x-data-grid-pro/src/tests/DataGridPro.spec.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/DataGridPro.spec.tsx rename to packages/x-data-grid-pro/src/tests/DataGridPro.spec.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/accessibility.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/accessibility.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/accessibility.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/accessibility.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/events.DataGridPro.spec.ts b/packages/x-data-grid-pro/src/tests/events.DataGridPro.spec.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/events.DataGridPro.spec.ts rename to packages/x-data-grid-pro/src/tests/events.DataGridPro.spec.ts diff --git a/packages/grid/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/filterPanel.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/filterPanel.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/filterPanel.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/filterPanel.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/license.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/license.DataGridPro.test.tsx similarity index 92% rename from packages/grid/x-data-grid-pro/src/tests/license.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/license.DataGridPro.test.tsx index 66e8ea2677ace..73fe3acb94451 100644 --- a/packages/grid/x-data-grid-pro/src/tests/license.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/license.DataGridPro.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { createRenderer, screen, waitFor } from '@mui-internal/test-utils'; import { DataGridPro } from '@mui/x-data-grid-pro'; -import { LicenseInfo } from '@mui/x-license-pro'; +import { LicenseInfo } from '@mui/x-license'; describe(' - License', () => { const { render } = createRenderer(); diff --git a/packages/grid/x-data-grid-pro/src/tests/localization.DataGridPro.spec.tsx b/packages/x-data-grid-pro/src/tests/localization.DataGridPro.spec.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/localization.DataGridPro.spec.tsx rename to packages/x-data-grid-pro/src/tests/localization.DataGridPro.spec.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/printExport.DataGrid.test.tsx b/packages/x-data-grid-pro/src/tests/printExport.DataGrid.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/printExport.DataGrid.test.tsx rename to packages/x-data-grid-pro/src/tests/printExport.DataGrid.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/rowReorder.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowReorder.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/rowReorder.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/rowReorder.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx similarity index 95% rename from packages/grid/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx index a84c1f5378f08..1d686619688f0 100644 --- a/packages/grid/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx @@ -4,6 +4,7 @@ import { spy } from 'sinon'; import { expect } from 'chai'; import { $, + $$, grid, getCell, getRow, @@ -450,7 +451,7 @@ describe(' - Rows', () => { virtualScroller.scrollTop = 10e6; // scroll to the bottom act(() => virtualScroller.dispatchEvent(new Event('scroll'))); - const lastCell = $('[role="row"]:last-child [role="gridcell"]:first-child')!; + const lastCell = $$('[role="row"]:last-child [role="gridcell"]')[0]; expect(lastCell).to.have.text('995'); expect(renderingZone.children.length).to.equal( Math.floor((height - 1) / rowHeight) + rowBuffer, @@ -486,11 +487,13 @@ describe(' - Rows', () => { />, ); const firstRow = getRow(0); - expect(firstRow.children).to.have.length(Math.floor(width / columnWidth) + columnBuffer); + expect($$(firstRow, '[role="gridcell"]')).to.have.length( + Math.floor(width / columnWidth) + columnBuffer, + ); const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; virtualScroller.scrollLeft = 301; act(() => virtualScroller.dispatchEvent(new Event('scroll'))); - expect(firstRow.children).to.have.length( + expect($$(firstRow, '[role="gridcell"]')).to.have.length( columnBuffer + 1 + Math.floor(width / columnWidth) + columnBuffer, ); }); @@ -517,15 +520,14 @@ describe(' - Rows', () => { render( , ); - const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; - const renderingZone = document.querySelector('.MuiDataGrid-virtualScrollerRenderZone')!; - let firstRow = renderingZone.querySelector('[role="row"]:first-child')!; - let firstColumn = firstRow.firstChild!; + const virtualScroller = grid('virtualScroller')!; + const renderingZone = grid('virtualScrollerRenderZone')!; + const firstRow = $(renderingZone, '[role="row"]:first-child')!; + let firstColumn = $$(firstRow, '[role="gridcell"]')[0]; expect(firstColumn).to.have.attr('data-colindex', '0'); virtualScroller.scrollLeft = columnThreshold * columnWidth; act(() => virtualScroller.dispatchEvent(new Event('scroll'))); - firstRow = renderingZone.querySelector('[role="row"]:first-child')!; - firstColumn = firstRow.firstChild!; + firstColumn = $(renderingZone, '[role="row"] > [role="gridcell"]')!; expect(firstColumn).to.have.attr('data-colindex', '3'); }); @@ -546,16 +548,14 @@ describe(' - Rows', () => { act(() => virtualScroller.dispatchEvent(new Event('scroll'))); const dimensions = apiRef.current.state.dimensions; - const lastCell = document.querySelector( - '[role="row"]:last-child [role="gridcell"]:first-child', - )!; + const lastCell = $$('[role="row"]:last-child [role="gridcell"]')[0]; expect(lastCell).to.have.text('31'); expect(virtualScroller.scrollHeight).to.equal( dimensions.headerHeight + nbRows * rowHeight + dimensions.scrollbarSize, ); }); - it('should not virtualized the last page if smaller than viewport', () => { + it('should not virtualize the last page if smaller than viewport', () => { render( - Rows', () => { height={500} />, ); - const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; + const virtualScroller = grid('virtualScroller')!; virtualScroller.scrollTop = 10e6; // scroll to the bottom virtualScroller.dispatchEvent(new Event('scroll')); - const lastCell = document.querySelector( - '[role="row"]:last-child [role="gridcell"]:first-child', - )!; + const lastCell = $$('[role="row"]:last-child [role="gridcell"]')[0]; expect(lastCell).to.have.text('99'); expect(virtualScroller.scrollTop).to.equal(0); expect(virtualScroller.scrollHeight).to.equal(virtualScroller.clientHeight); - expect( - document.querySelector('.MuiDataGrid-virtualScrollerRenderZone')!.children, - ).to.have.length(4); + expect(grid('virtualScrollerRenderZone')!.children).to.have.length(4); }); it('should paginate small dataset in auto page-size #1492', () => { @@ -585,18 +581,14 @@ describe(' - Rows', () => { ); const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; - const lastCell = document.querySelector( - '[role="row"]:last-child [role="gridcell"]:first-child', - )!; + const lastCell = $$('[role="row"]:last-child [role="gridcell"]')[0]; expect(lastCell).to.have.text('6'); const rows = document.querySelectorAll('.MuiDataGrid-row[role="row"]')!; expect(rows.length).to.equal(7); expect(virtualScroller.scrollTop).to.equal(0); expect(virtualScroller.scrollHeight).to.equal(virtualScroller.clientHeight); - expect( - document.querySelector('.MuiDataGrid-virtualScrollerRenderZone')!.children, - ).to.have.length(7); + expect(grid('virtualScrollerRenderZone')!.children).to.have.length(7); }); }); diff --git a/packages/grid/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/state.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/state.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/state.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/state.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/tests/themeAugmentation.spec.ts b/packages/x-data-grid-pro/src/tests/themeAugmentation.spec.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/themeAugmentation.spec.ts rename to packages/x-data-grid-pro/src/tests/themeAugmentation.spec.ts diff --git a/packages/grid/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx rename to packages/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx diff --git a/packages/grid/x-data-grid-pro/src/themeAugmentation/index.js b/packages/x-data-grid-pro/src/themeAugmentation/index.js similarity index 100% rename from packages/grid/x-data-grid-pro/src/themeAugmentation/index.js rename to packages/x-data-grid-pro/src/themeAugmentation/index.js diff --git a/packages/grid/x-data-grid-pro/src/themeAugmentation/index.ts b/packages/x-data-grid-pro/src/themeAugmentation/index.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/themeAugmentation/index.ts rename to packages/x-data-grid-pro/src/themeAugmentation/index.ts diff --git a/packages/grid/x-data-grid-pro/src/themeAugmentation/overrides.ts b/packages/x-data-grid-pro/src/themeAugmentation/overrides.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/themeAugmentation/overrides.ts rename to packages/x-data-grid-pro/src/themeAugmentation/overrides.ts diff --git a/packages/grid/x-data-grid-pro/src/themeAugmentation/props.ts b/packages/x-data-grid-pro/src/themeAugmentation/props.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/themeAugmentation/props.ts rename to packages/x-data-grid-pro/src/themeAugmentation/props.ts diff --git a/packages/grid/x-data-grid-pro/src/typeOverloads/index.ts b/packages/x-data-grid-pro/src/typeOverloads/index.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/typeOverloads/index.ts rename to packages/x-data-grid-pro/src/typeOverloads/index.ts diff --git a/packages/grid/x-data-grid-pro/src/typeOverloads/modules.ts b/packages/x-data-grid-pro/src/typeOverloads/modules.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/typeOverloads/modules.ts rename to packages/x-data-grid-pro/src/typeOverloads/modules.ts diff --git a/packages/grid/x-data-grid-pro/src/typeOverloads/reexports.ts b/packages/x-data-grid-pro/src/typeOverloads/reexports.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/typeOverloads/reexports.ts rename to packages/x-data-grid-pro/src/typeOverloads/reexports.ts diff --git a/packages/grid/x-data-grid-pro/src/utils/domUtils.ts b/packages/x-data-grid-pro/src/utils/domUtils.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/utils/domUtils.ts rename to packages/x-data-grid-pro/src/utils/domUtils.ts diff --git a/packages/grid/x-data-grid-pro/src/utils/index.ts b/packages/x-data-grid-pro/src/utils/index.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/utils/index.ts rename to packages/x-data-grid-pro/src/utils/index.ts diff --git a/packages/grid/x-data-grid-pro/src/utils/releaseInfo.ts b/packages/x-data-grid-pro/src/utils/releaseInfo.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/utils/releaseInfo.ts rename to packages/x-data-grid-pro/src/utils/releaseInfo.ts diff --git a/packages/grid/x-data-grid-pro/src/utils/tree/createRowTree.test.ts b/packages/x-data-grid-pro/src/utils/tree/createRowTree.test.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/utils/tree/createRowTree.test.ts rename to packages/x-data-grid-pro/src/utils/tree/createRowTree.test.ts diff --git a/packages/grid/x-data-grid-pro/src/utils/tree/createRowTree.ts b/packages/x-data-grid-pro/src/utils/tree/createRowTree.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/utils/tree/createRowTree.ts rename to packages/x-data-grid-pro/src/utils/tree/createRowTree.ts diff --git a/packages/grid/x-data-grid-pro/src/utils/tree/index.ts b/packages/x-data-grid-pro/src/utils/tree/index.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/utils/tree/index.ts rename to packages/x-data-grid-pro/src/utils/tree/index.ts diff --git a/packages/grid/x-data-grid-pro/src/utils/tree/insertDataRowInTree.ts b/packages/x-data-grid-pro/src/utils/tree/insertDataRowInTree.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/utils/tree/insertDataRowInTree.ts rename to packages/x-data-grid-pro/src/utils/tree/insertDataRowInTree.ts diff --git a/packages/grid/x-data-grid-pro/src/utils/tree/models.ts b/packages/x-data-grid-pro/src/utils/tree/models.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/utils/tree/models.ts rename to packages/x-data-grid-pro/src/utils/tree/models.ts diff --git a/packages/grid/x-data-grid-pro/src/utils/tree/removeDataRowFromTree.ts b/packages/x-data-grid-pro/src/utils/tree/removeDataRowFromTree.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/utils/tree/removeDataRowFromTree.ts rename to packages/x-data-grid-pro/src/utils/tree/removeDataRowFromTree.ts diff --git a/packages/grid/x-data-grid-pro/src/utils/tree/sortRowTree.ts b/packages/x-data-grid-pro/src/utils/tree/sortRowTree.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/utils/tree/sortRowTree.ts rename to packages/x-data-grid-pro/src/utils/tree/sortRowTree.ts diff --git a/packages/grid/x-data-grid-pro/src/utils/tree/updateRowTree.ts b/packages/x-data-grid-pro/src/utils/tree/updateRowTree.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/utils/tree/updateRowTree.ts rename to packages/x-data-grid-pro/src/utils/tree/updateRowTree.ts diff --git a/packages/grid/x-data-grid-pro/src/utils/tree/utils.ts b/packages/x-data-grid-pro/src/utils/tree/utils.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/utils/tree/utils.ts rename to packages/x-data-grid-pro/src/utils/tree/utils.ts diff --git a/packages/grid/x-data-grid-pro/tsconfig.build.json b/packages/x-data-grid-pro/tsconfig.build.json similarity index 74% rename from packages/grid/x-data-grid-pro/tsconfig.build.json rename to packages/x-data-grid-pro/tsconfig.build.json index 2f16f7689a735..d940cbf8d263d 100644 --- a/packages/grid/x-data-grid-pro/tsconfig.build.json +++ b/packages/x-data-grid-pro/tsconfig.build.json @@ -12,8 +12,8 @@ }, "references": [ { "path": "../x-data-grid/tsconfig.build.json" }, - { "path": "../../x-license-pro/tsconfig.build.json" } + { "path": "../x-license/tsconfig.build.json" } ], - "include": ["src/**/*.ts*", "../../../node_modules/@mui/material/themeCssVarsAugmentation"], + "include": ["src/**/*.ts*", "../../node_modules/@mui/material/themeCssVarsAugmentation"], "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"] } diff --git a/packages/grid/x-data-grid-premium/tsconfig.json b/packages/x-data-grid-pro/tsconfig.json similarity index 68% rename from packages/grid/x-data-grid-premium/tsconfig.json rename to packages/x-data-grid-pro/tsconfig.json index 79824ab245468..6a8e1ed5b14fc 100644 --- a/packages/grid/x-data-grid-premium/tsconfig.json +++ b/packages/x-data-grid-pro/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "../../../tsconfig.json", + "extends": "../../tsconfig.json", "compilerOptions": { "types": ["react", "mocha", "node"] }, @@ -7,6 +7,6 @@ "src/**/*", "../../test/utils/addChaiAssertions.ts", "../../node_modules/@mui/monorepo/packages/test-utils/src/initMatchers.ts", - "../../../node_modules/@mui/material/themeCssVarsAugmentation" + "../../node_modules/@mui/material/themeCssVarsAugmentation" ] } diff --git a/packages/grid/x-data-grid/LICENSE b/packages/x-data-grid/LICENSE similarity index 100% rename from packages/grid/x-data-grid/LICENSE rename to packages/x-data-grid/LICENSE diff --git a/packages/grid/x-data-grid/README.md b/packages/x-data-grid/README.md similarity index 100% rename from packages/grid/x-data-grid/README.md rename to packages/x-data-grid/README.md diff --git a/packages/grid/x-data-grid/package.json b/packages/x-data-grid/package.json similarity index 73% rename from packages/grid/x-data-grid/package.json rename to packages/x-data-grid/package.json index 9e3ea51103bd8..7200f966aa45f 100644 --- a/packages/grid/x-data-grid/package.json +++ b/packages/x-data-grid/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid", - "version": "7.0.0-beta.1", + "version": "7.0.0-beta.2", "description": "The community edition of the data grid component (MUI X).", "author": "MUI Team", "main": "src/index.ts", @@ -33,23 +33,23 @@ "scripts": { "typescript": "tsc -p tsconfig.json", "build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:types && yarn build:copy-files ", - "build:legacy": "node ../../../scripts/build.mjs legacy", - "build:modern": "node ../../../scripts/build.mjs modern", - "build:node": "node ../../../scripts/build.mjs node", - "build:stable": "node ../../../scripts/build.mjs stable", - "build:copy-files": "node ../../../scripts/copyFiles.mjs", - "build:types": "node ../../../scripts/buildTypes.mjs", + "build:legacy": "node ../../scripts/build.mjs legacy", + "build:modern": "node ../../scripts/build.mjs modern", + "build:node": "node ../../scripts/build.mjs node", + "build:stable": "node ../../scripts/build.mjs stable", + "build:copy-files": "node ../../scripts/copyFiles.mjs", + "build:types": "node ../../scripts/buildTypes.mjs", "prebuild": "rimraf build tsconfig.build.tsbuildinfo" }, "repository": { "type": "git", "url": "https://github.com/mui/mui-x.git", - "directory": "packages/grid/x-data-grid" + "directory": "packages/x-data-grid" }, "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/system": "^5.15.7", - "@mui/utils": "^5.15.7", + "@mui/system": "^5.15.9", + "@mui/utils": "^5.15.9", "clsx": "^2.1.0", "prop-types": "^15.8.1", "reselect": "^4.1.8" diff --git a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/x-data-grid/src/DataGrid/DataGrid.tsx similarity index 99% rename from packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx rename to packages/x-data-grid/src/DataGrid/DataGrid.tsx index 45be6056de0aa..2ddc1e9b3dd46 100644 --- a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx +++ b/packages/x-data-grid/src/DataGrid/DataGrid.tsx @@ -12,6 +12,8 @@ import { validateProps, } from '../internals/utils/propValidation'; +export type { GridSlotsComponent as GridSlots } from '../models'; + const propValidators: PropValidator[] = [ ...propValidatorsDataGrid, // Only validate in MIT version @@ -343,7 +345,7 @@ DataGridRaw.propTypes = { loading: PropTypes.bool, /** * Set the locale text of the Data Grid. - * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/grid/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository. + * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository. */ localeText: PropTypes.object, /** diff --git a/packages/grid/x-data-grid/src/DataGrid/index.ts b/packages/x-data-grid/src/DataGrid/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/DataGrid/index.ts rename to packages/x-data-grid/src/DataGrid/index.ts diff --git a/packages/grid/x-data-grid/src/DataGrid/useDataGridComponent.tsx b/packages/x-data-grid/src/DataGrid/useDataGridComponent.tsx similarity index 100% rename from packages/grid/x-data-grid/src/DataGrid/useDataGridComponent.tsx rename to packages/x-data-grid/src/DataGrid/useDataGridComponent.tsx diff --git a/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts b/packages/x-data-grid/src/DataGrid/useDataGridProps.ts similarity index 97% rename from packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts rename to packages/x-data-grid/src/DataGrid/useDataGridProps.ts index fbc6005055266..139c6151f83f4 100644 --- a/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts +++ b/packages/x-data-grid/src/DataGrid/useDataGridProps.ts @@ -83,6 +83,7 @@ const defaultSlots = DATA_GRID_DEFAULT_SLOTS_COMPONENTS; export const useDataGridProps = (inProps: DataGridProps) => { const themedProps = useProps( + // eslint-disable-next-line material-ui/mui-name-matches-component-name useThemeProps({ props: inProps, name: 'MuiDataGrid', diff --git a/packages/grid/x-data-grid/src/colDef/gridActionsColDef.tsx b/packages/x-data-grid/src/colDef/gridActionsColDef.tsx similarity index 100% rename from packages/grid/x-data-grid/src/colDef/gridActionsColDef.tsx rename to packages/x-data-grid/src/colDef/gridActionsColDef.tsx diff --git a/packages/grid/x-data-grid/src/colDef/gridBooleanColDef.tsx b/packages/x-data-grid/src/colDef/gridBooleanColDef.tsx similarity index 100% rename from packages/grid/x-data-grid/src/colDef/gridBooleanColDef.tsx rename to packages/x-data-grid/src/colDef/gridBooleanColDef.tsx diff --git a/packages/grid/x-data-grid/src/colDef/gridBooleanOperators.ts b/packages/x-data-grid/src/colDef/gridBooleanOperators.ts similarity index 100% rename from packages/grid/x-data-grid/src/colDef/gridBooleanOperators.ts rename to packages/x-data-grid/src/colDef/gridBooleanOperators.ts diff --git a/packages/grid/x-data-grid/src/colDef/gridCheckboxSelectionColDef.tsx b/packages/x-data-grid/src/colDef/gridCheckboxSelectionColDef.tsx similarity index 100% rename from packages/grid/x-data-grid/src/colDef/gridCheckboxSelectionColDef.tsx rename to packages/x-data-grid/src/colDef/gridCheckboxSelectionColDef.tsx diff --git a/packages/grid/x-data-grid/src/colDef/gridDateColDef.ts b/packages/x-data-grid/src/colDef/gridDateColDef.ts similarity index 100% rename from packages/grid/x-data-grid/src/colDef/gridDateColDef.ts rename to packages/x-data-grid/src/colDef/gridDateColDef.ts diff --git a/packages/grid/x-data-grid/src/colDef/gridDateOperators.ts b/packages/x-data-grid/src/colDef/gridDateOperators.ts similarity index 100% rename from packages/grid/x-data-grid/src/colDef/gridDateOperators.ts rename to packages/x-data-grid/src/colDef/gridDateOperators.ts diff --git a/packages/grid/x-data-grid/src/colDef/gridDefaultColumnTypes.ts b/packages/x-data-grid/src/colDef/gridDefaultColumnTypes.ts similarity index 100% rename from packages/grid/x-data-grid/src/colDef/gridDefaultColumnTypes.ts rename to packages/x-data-grid/src/colDef/gridDefaultColumnTypes.ts diff --git a/packages/grid/x-data-grid/src/colDef/gridNumericColDef.ts b/packages/x-data-grid/src/colDef/gridNumericColDef.ts similarity index 100% rename from packages/grid/x-data-grid/src/colDef/gridNumericColDef.ts rename to packages/x-data-grid/src/colDef/gridNumericColDef.ts diff --git a/packages/grid/x-data-grid/src/colDef/gridNumericOperators.ts b/packages/x-data-grid/src/colDef/gridNumericOperators.ts similarity index 100% rename from packages/grid/x-data-grid/src/colDef/gridNumericOperators.ts rename to packages/x-data-grid/src/colDef/gridNumericOperators.ts diff --git a/packages/grid/x-data-grid/src/colDef/gridSingleSelectColDef.tsx b/packages/x-data-grid/src/colDef/gridSingleSelectColDef.tsx similarity index 100% rename from packages/grid/x-data-grid/src/colDef/gridSingleSelectColDef.tsx rename to packages/x-data-grid/src/colDef/gridSingleSelectColDef.tsx diff --git a/packages/grid/x-data-grid/src/colDef/gridSingleSelectOperators.ts b/packages/x-data-grid/src/colDef/gridSingleSelectOperators.ts similarity index 100% rename from packages/grid/x-data-grid/src/colDef/gridSingleSelectOperators.ts rename to packages/x-data-grid/src/colDef/gridSingleSelectOperators.ts diff --git a/packages/grid/x-data-grid/src/colDef/gridStringColDef.ts b/packages/x-data-grid/src/colDef/gridStringColDef.ts similarity index 100% rename from packages/grid/x-data-grid/src/colDef/gridStringColDef.ts rename to packages/x-data-grid/src/colDef/gridStringColDef.ts diff --git a/packages/grid/x-data-grid/src/colDef/gridStringOperators.ts b/packages/x-data-grid/src/colDef/gridStringOperators.ts similarity index 100% rename from packages/grid/x-data-grid/src/colDef/gridStringOperators.ts rename to packages/x-data-grid/src/colDef/gridStringOperators.ts diff --git a/packages/grid/x-data-grid/src/colDef/index.ts b/packages/x-data-grid/src/colDef/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/colDef/index.ts rename to packages/x-data-grid/src/colDef/index.ts diff --git a/packages/grid/x-data-grid/src/components/GridApiContext.ts b/packages/x-data-grid/src/components/GridApiContext.ts similarity index 100% rename from packages/grid/x-data-grid/src/components/GridApiContext.ts rename to packages/x-data-grid/src/components/GridApiContext.ts diff --git a/packages/grid/x-data-grid/src/components/GridColumnHeaders.tsx b/packages/x-data-grid/src/components/GridColumnHeaders.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/GridColumnHeaders.tsx rename to packages/x-data-grid/src/components/GridColumnHeaders.tsx diff --git a/packages/grid/x-data-grid/src/components/GridDetailPanels.tsx b/packages/x-data-grid/src/components/GridDetailPanels.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/GridDetailPanels.tsx rename to packages/x-data-grid/src/components/GridDetailPanels.tsx diff --git a/packages/grid/x-data-grid/src/components/GridFooter.tsx b/packages/x-data-grid/src/components/GridFooter.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/GridFooter.tsx rename to packages/x-data-grid/src/components/GridFooter.tsx diff --git a/packages/grid/x-data-grid/src/components/GridHeader.tsx b/packages/x-data-grid/src/components/GridHeader.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/GridHeader.tsx rename to packages/x-data-grid/src/components/GridHeader.tsx diff --git a/packages/grid/x-data-grid/src/components/GridHeaders.tsx b/packages/x-data-grid/src/components/GridHeaders.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/GridHeaders.tsx rename to packages/x-data-grid/src/components/GridHeaders.tsx diff --git a/packages/grid/x-data-grid/src/components/GridLoadingOverlay.tsx b/packages/x-data-grid/src/components/GridLoadingOverlay.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/GridLoadingOverlay.tsx rename to packages/x-data-grid/src/components/GridLoadingOverlay.tsx diff --git a/packages/grid/x-data-grid/src/components/GridNoResultsOverlay.tsx b/packages/x-data-grid/src/components/GridNoResultsOverlay.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/GridNoResultsOverlay.tsx rename to packages/x-data-grid/src/components/GridNoResultsOverlay.tsx diff --git a/packages/grid/x-data-grid/src/components/GridNoRowsOverlay.tsx b/packages/x-data-grid/src/components/GridNoRowsOverlay.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/GridNoRowsOverlay.tsx rename to packages/x-data-grid/src/components/GridNoRowsOverlay.tsx diff --git a/packages/grid/x-data-grid/src/components/GridPagination.tsx b/packages/x-data-grid/src/components/GridPagination.tsx similarity index 83% rename from packages/grid/x-data-grid/src/components/GridPagination.tsx rename to packages/x-data-grid/src/components/GridPagination.tsx index 92c2717b2eae8..5b6e3f184ae8e 100644 --- a/packages/grid/x-data-grid/src/components/GridPagination.tsx +++ b/packages/x-data-grid/src/components/GridPagination.tsx @@ -26,7 +26,11 @@ const GridPaginationRoot = styled(TablePagination)(({ theme }) => ({ }, })) as typeof TablePagination; -export const GridPagination = React.forwardRef>( +// A mutable version of a readonly array. + +type MutableArray = A extends readonly (infer T)[] ? T[] : never; + +export const GridPagination = React.forwardRef>( function GridPagination(props, ref) { const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -38,10 +42,10 @@ export const GridPagination = React.forwardRef Math.floor(rowCount / (paginationModel.pageSize || 1)), - [rowCount, paginationModel.pageSize], - ); + const lastPage = React.useMemo(() => { + const calculatedValue = Math.ceil(rowCount / (paginationModel.pageSize || 1)) - 1; + return Math.max(0, calculatedValue); + }, [rowCount, paginationModel.pageSize]); const handlePageSizeChange = React.useCallback( (event: React.ChangeEvent) => { @@ -103,7 +107,10 @@ export const GridPagination = React.forwardRef} rowsPerPage={paginationModel.pageSize} onPageChange={handlePageChange} onRowsPerPageChange={handlePageSizeChange} diff --git a/packages/grid/x-data-grid/src/components/GridPinnedRows.tsx b/packages/x-data-grid/src/components/GridPinnedRows.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/GridPinnedRows.tsx rename to packages/x-data-grid/src/components/GridPinnedRows.tsx diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/x-data-grid/src/components/GridRow.tsx similarity index 99% rename from packages/grid/x-data-grid/src/components/GridRow.tsx rename to packages/x-data-grid/src/components/GridRow.tsx index c66b72793ff3e..3e5ab5adc2ae1 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/x-data-grid/src/components/GridRow.tsx @@ -91,8 +91,6 @@ const useUtilityClasses = (ownerState: OwnerState) => { isLastVisible && 'row--lastVisible', rowHeight === 'auto' && 'row--dynamicHeight', ], - pinnedLeft: ['pinnedLeft'], - pinnedRight: ['pinnedRight'], }; return composeClasses(slots, getDataGridUtilityClass, classes); @@ -389,7 +387,7 @@ const GridRow = React.forwardRef(function GridRow( width={width} contentWidth={contentWidth} field={column.field} - align={column.align} + align={column.align ?? 'left'} /> ); } @@ -517,6 +515,7 @@ const GridRow = React.forwardRef(function GridRow( {...other} > {leftCells} +
{cells} {emptyCellWidth > 0 && } {rightCells.length > 0 &&
} diff --git a/packages/grid/x-data-grid/src/components/GridRowCount.tsx b/packages/x-data-grid/src/components/GridRowCount.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/GridRowCount.tsx rename to packages/x-data-grid/src/components/GridRowCount.tsx diff --git a/packages/grid/x-data-grid/src/components/GridScrollbarFillerCell.tsx b/packages/x-data-grid/src/components/GridScrollbarFillerCell.tsx similarity index 90% rename from packages/grid/x-data-grid/src/components/GridScrollbarFillerCell.tsx rename to packages/x-data-grid/src/components/GridScrollbarFillerCell.tsx index 8be0cf5eb44b5..188a9d78c13bc 100644 --- a/packages/grid/x-data-grid/src/components/GridScrollbarFillerCell.tsx +++ b/packages/x-data-grid/src/components/GridScrollbarFillerCell.tsx @@ -23,9 +23,6 @@ const Style = styled('div')({ position: 'sticky', right: 0, }, - [`&:not(.${classes.header}):not(.${classes.pinnedRight})`]: { - transform: 'translate3d(var(--DataGrid-offsetLeft), 0, 0)', - }, }); function GridScrollbarFillerCell({ diff --git a/packages/grid/x-data-grid/src/components/GridSelectedRowCount.tsx b/packages/x-data-grid/src/components/GridSelectedRowCount.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/GridSelectedRowCount.tsx rename to packages/x-data-grid/src/components/GridSelectedRowCount.tsx diff --git a/packages/grid/x-data-grid/src/components/base/GridBody.tsx b/packages/x-data-grid/src/components/base/GridBody.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/base/GridBody.tsx rename to packages/x-data-grid/src/components/base/GridBody.tsx diff --git a/packages/grid/x-data-grid/src/components/base/GridFooterPlaceholder.tsx b/packages/x-data-grid/src/components/base/GridFooterPlaceholder.tsx similarity index 67% rename from packages/grid/x-data-grid/src/components/base/GridFooterPlaceholder.tsx rename to packages/x-data-grid/src/components/base/GridFooterPlaceholder.tsx index 5974991f1bf83..d27336afc8653 100644 --- a/packages/grid/x-data-grid/src/components/base/GridFooterPlaceholder.tsx +++ b/packages/x-data-grid/src/components/base/GridFooterPlaceholder.tsx @@ -8,5 +8,7 @@ export function GridFooterPlaceholder() { return null; } - return ; + return ( + + ); } diff --git a/packages/grid/x-data-grid/src/components/base/GridOverlays.tsx b/packages/x-data-grid/src/components/base/GridOverlays.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/base/GridOverlays.tsx rename to packages/x-data-grid/src/components/base/GridOverlays.tsx diff --git a/packages/grid/x-data-grid/src/components/base/index.ts b/packages/x-data-grid/src/components/base/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/components/base/index.ts rename to packages/x-data-grid/src/components/base/index.ts diff --git a/packages/grid/x-data-grid/src/components/cell/GridActionsCell.tsx b/packages/x-data-grid/src/components/cell/GridActionsCell.tsx similarity index 96% rename from packages/grid/x-data-grid/src/components/cell/GridActionsCell.tsx rename to packages/x-data-grid/src/components/cell/GridActionsCell.tsx index 08083eab542e8..c3a64881b58a0 100644 --- a/packages/grid/x-data-grid/src/components/cell/GridActionsCell.tsx +++ b/packages/x-data-grid/src/components/cell/GridActionsCell.tsx @@ -180,7 +180,7 @@ function GridActionsCell(props: GridActionsCellProps) { if (event.key === 'Tab') { event.preventDefault(); } - if (['Tab', 'Enter', 'Escape'].includes(event.key)) { + if (['Tab', 'Escape'].includes(event.key)) { hideMenu(); } }; @@ -223,13 +223,7 @@ function GridActionsCell(props: GridActionsCellProps) { )} {menuButtons.length > 0 && ( - + - {menuButtons.map((button, index) => React.cloneElement(button, { key: index }))} + {menuButtons.map((button, index) => + React.cloneElement(button, { key: index, closeMenu: hideMenu }), + )} )} diff --git a/packages/grid/x-data-grid/src/components/cell/GridActionsCellItem.tsx b/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx similarity index 62% rename from packages/grid/x-data-grid/src/components/cell/GridActionsCellItem.tsx rename to packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx index 2d3d5c5307a09..642d410d54ed9 100644 --- a/packages/grid/x-data-grid/src/components/cell/GridActionsCellItem.tsx +++ b/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx @@ -12,29 +12,35 @@ export type GridActionsCellItemProps = { component?: React.ElementType; } & ( | ({ showInMenu?: false; icon: React.ReactElement } & IconButtonProps) - | ({ showInMenu: true } & MenuItemProps) + | ({ + showInMenu: true; + /** + * If false, the menu will not close when this item is clicked. + * @default true + */ + closeMenuOnClick?: boolean; + closeMenu?: () => void; + } & MenuItemProps) ); -const GridActionsCellItem = React.forwardRef( +const GridActionsCellItem = React.forwardRef( (props, ref) => { - const { label, icon, showInMenu, onClick, ...other } = props; - const rootProps = useGridRootProps(); - const handleClick = (event: any) => { - if (onClick) { - onClick(event); - } - }; + if (!props.showInMenu) { + const { label, icon, showInMenu, onClick, ...other } = props; + + const handleClick = (event: React.MouseEvent) => { + onClick?.(event); + }; - if (!showInMenu) { return ( } size="small" role="menuitem" aria-label={label} - {...(other as any)} + {...other} onClick={handleClick} {...rootProps.slotProps?.baseIconButton} > @@ -43,8 +49,25 @@ const GridActionsCellItem = React.forwardRef) => { + onClick?.(event); + if (closeMenuOnClick) { + closeMenu?.(); + } + }; + return ( - + {icon && {icon}} {label} diff --git a/packages/grid/x-data-grid/src/components/cell/GridBooleanCell.tsx b/packages/x-data-grid/src/components/cell/GridBooleanCell.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/cell/GridBooleanCell.tsx rename to packages/x-data-grid/src/components/cell/GridBooleanCell.tsx diff --git a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx b/packages/x-data-grid/src/components/cell/GridCell.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/cell/GridCell.tsx rename to packages/x-data-grid/src/components/cell/GridCell.tsx diff --git a/packages/grid/x-data-grid/src/components/cell/GridEditBooleanCell.tsx b/packages/x-data-grid/src/components/cell/GridEditBooleanCell.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/cell/GridEditBooleanCell.tsx rename to packages/x-data-grid/src/components/cell/GridEditBooleanCell.tsx diff --git a/packages/grid/x-data-grid/src/components/cell/GridEditDateCell.tsx b/packages/x-data-grid/src/components/cell/GridEditDateCell.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/cell/GridEditDateCell.tsx rename to packages/x-data-grid/src/components/cell/GridEditDateCell.tsx diff --git a/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx b/packages/x-data-grid/src/components/cell/GridEditInputCell.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx rename to packages/x-data-grid/src/components/cell/GridEditInputCell.tsx diff --git a/packages/grid/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx b/packages/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx rename to packages/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx diff --git a/packages/grid/x-data-grid/src/components/cell/GridSkeletonCell.tsx b/packages/x-data-grid/src/components/cell/GridSkeletonCell.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/cell/GridSkeletonCell.tsx rename to packages/x-data-grid/src/components/cell/GridSkeletonCell.tsx diff --git a/packages/grid/x-data-grid/src/components/cell/index.ts b/packages/x-data-grid/src/components/cell/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/components/cell/index.ts rename to packages/x-data-grid/src/components/cell/index.ts diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/ColumnHeaderMenuIcon.tsx b/packages/x-data-grid/src/components/columnHeaders/ColumnHeaderMenuIcon.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/columnHeaders/ColumnHeaderMenuIcon.tsx rename to packages/x-data-grid/src/components/columnHeaders/ColumnHeaderMenuIcon.tsx diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridBaseColumnHeaders.tsx b/packages/x-data-grid/src/components/columnHeaders/GridBaseColumnHeaders.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/columnHeaders/GridBaseColumnHeaders.tsx rename to packages/x-data-grid/src/components/columnHeaders/GridBaseColumnHeaders.tsx diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnGroupHeader.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnGroupHeader.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/columnHeaders/GridColumnGroupHeader.tsx rename to packages/x-data-grid/src/components/columnHeaders/GridColumnGroupHeader.tsx diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx rename to packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx rename to packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderSeparator.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSeparator.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderSeparator.tsx rename to packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSeparator.tsx diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx rename to packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderTitle.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderTitle.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderTitle.tsx rename to packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderTitle.tsx diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeadersInner.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeadersInner.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeadersInner.tsx rename to packages/x-data-grid/src/components/columnHeaders/GridColumnHeadersInner.tsx diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridGenericColumnHeaderItem.tsx b/packages/x-data-grid/src/components/columnHeaders/GridGenericColumnHeaderItem.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/columnHeaders/GridGenericColumnHeaderItem.tsx rename to packages/x-data-grid/src/components/columnHeaders/GridGenericColumnHeaderItem.tsx diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridIconButtonContainer.tsx b/packages/x-data-grid/src/components/columnHeaders/GridIconButtonContainer.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/columnHeaders/GridIconButtonContainer.tsx rename to packages/x-data-grid/src/components/columnHeaders/GridIconButtonContainer.tsx diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/index.ts b/packages/x-data-grid/src/components/columnHeaders/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/components/columnHeaders/index.ts rename to packages/x-data-grid/src/components/columnHeaders/index.ts diff --git a/packages/grid/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx b/packages/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx similarity index 97% rename from packages/grid/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx rename to packages/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx index 7353974fabb98..db1ea9d1d3eb6 100644 --- a/packages/grid/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx +++ b/packages/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx @@ -49,7 +49,7 @@ const GridCellCheckboxForwardRef = React.forwardRef(null); + const checkboxElement = React.useRef(null); const rippleRef = React.useRef(null); const handleRef = useForkRef(checkboxElement, ref); @@ -104,7 +104,7 @@ const GridCellCheckboxForwardRef = React.forwardRef diff --git a/packages/grid/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx b/packages/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx similarity index 98% rename from packages/grid/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx rename to packages/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx index b62cc90fed944..215608379c39a 100644 --- a/packages/grid/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx +++ b/packages/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx @@ -27,7 +27,7 @@ const useUtilityClasses = (ownerState: OwnerState) => { return composeClasses(slots, getDataGridUtilityClass, classes); }; -const GridHeaderCheckbox = React.forwardRef( +const GridHeaderCheckbox = React.forwardRef( function GridHeaderCheckbox(props, ref) { const { field, colDef, ...other } = props; const [, forceUpdate] = React.useState(false); diff --git a/packages/grid/x-data-grid/src/components/columnSelection/index.ts b/packages/x-data-grid/src/components/columnSelection/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/components/columnSelection/index.ts rename to packages/x-data-grid/src/components/columnSelection/index.ts diff --git a/packages/grid/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx b/packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx rename to packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx diff --git a/packages/grid/x-data-grid/src/components/columnsManagement/index.ts b/packages/x-data-grid/src/components/columnsManagement/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/components/columnsManagement/index.ts rename to packages/x-data-grid/src/components/columnsManagement/index.ts diff --git a/packages/grid/x-data-grid/src/components/columnsManagement/utils.ts b/packages/x-data-grid/src/components/columnsManagement/utils.ts similarity index 92% rename from packages/grid/x-data-grid/src/components/columnsManagement/utils.ts rename to packages/x-data-grid/src/components/columnsManagement/utils.ts index c30a0d63b8c3c..8bbd3193f0cc5 100644 --- a/packages/grid/x-data-grid/src/components/columnsManagement/utils.ts +++ b/packages/x-data-grid/src/components/columnsManagement/utils.ts @@ -1,5 +1,5 @@ import { GridColumnVisibilityModel } from '../../hooks/features/columns/gridColumnsInterfaces'; -import { GridColumnsManagementProps } from './GridColumnsManagement'; +import type { GridColumnsManagementProps } from './GridColumnsManagement'; export const checkColumnVisibilityModelsSame = ( a: GridColumnVisibilityModel, diff --git a/packages/grid/x-data-grid/src/components/containers/GridFooterContainer.tsx b/packages/x-data-grid/src/components/containers/GridFooterContainer.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/containers/GridFooterContainer.tsx rename to packages/x-data-grid/src/components/containers/GridFooterContainer.tsx diff --git a/packages/grid/x-data-grid/src/components/containers/GridOverlay.tsx b/packages/x-data-grid/src/components/containers/GridOverlay.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/containers/GridOverlay.tsx rename to packages/x-data-grid/src/components/containers/GridOverlay.tsx diff --git a/packages/grid/x-data-grid/src/components/containers/GridRoot.tsx b/packages/x-data-grid/src/components/containers/GridRoot.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/containers/GridRoot.tsx rename to packages/x-data-grid/src/components/containers/GridRoot.tsx diff --git a/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/x-data-grid/src/components/containers/GridRootStyles.ts similarity index 98% rename from packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts rename to packages/x-data-grid/src/components/containers/GridRootStyles.ts index 549ffc92698b0..b5f81dbc7b7c2 100644 --- a/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts +++ b/packages/x-data-grid/src/components/containers/GridRootStyles.ts @@ -237,6 +237,12 @@ export const GridRootStyles = styled('div', { overflow: 'visible !important', whiteSpace: 'nowrap', }, + [`& .${c.groupingCriteriaCell}`]: { + width: 'unset', + }, + [`& .${c.treeDataGroupingCell}`]: { + width: 'unset', + }, }, [`& .${c.columnHeader}, & .${c.cell}`]: { WebkitTapHighlightColor: 'transparent', @@ -566,8 +572,10 @@ export const GridRootStyles = styled('div', { }, }, }, - [`& .${c.cell}:not(.${c['cell--pinnedLeft']}):not(.${c['cell--pinnedRight']})`]: { - transform: 'translate3d(var(--DataGrid-offsetLeft), 0, 0)', + [`& .${c.cellOffsetLeft}`]: { + flex: '0 0 auto', + display: 'inline-block', + width: 'var(--DataGrid-offsetLeft)', }, [`& .${c.columnHeaderDraggableContainer}`]: { display: 'flex', diff --git a/packages/grid/x-data-grid/src/components/containers/GridToolbarContainer.tsx b/packages/x-data-grid/src/components/containers/GridToolbarContainer.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/containers/GridToolbarContainer.tsx rename to packages/x-data-grid/src/components/containers/GridToolbarContainer.tsx diff --git a/packages/grid/x-data-grid/src/components/containers/index.ts b/packages/x-data-grid/src/components/containers/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/components/containers/index.ts rename to packages/x-data-grid/src/components/containers/index.ts diff --git a/packages/grid/x-data-grid/src/components/index.ts b/packages/x-data-grid/src/components/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/components/index.ts rename to packages/x-data-grid/src/components/index.ts diff --git a/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx b/packages/x-data-grid/src/components/menu/GridMenu.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/menu/GridMenu.tsx rename to packages/x-data-grid/src/components/menu/GridMenu.tsx diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnHeaderMenu.tsx b/packages/x-data-grid/src/components/menu/columnMenu/GridColumnHeaderMenu.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnHeaderMenu.tsx rename to packages/x-data-grid/src/components/menu/columnMenu/GridColumnHeaderMenu.tsx diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx b/packages/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx rename to packages/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx b/packages/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx rename to packages/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuItemProps.ts b/packages/x-data-grid/src/components/menu/columnMenu/GridColumnMenuItemProps.ts similarity index 100% rename from packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuItemProps.ts rename to packages/x-data-grid/src/components/menu/columnMenu/GridColumnMenuItemProps.ts diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts b/packages/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts similarity index 100% rename from packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts rename to packages/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/index.ts b/packages/x-data-grid/src/components/menu/columnMenu/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/components/menu/columnMenu/index.ts rename to packages/x-data-grid/src/components/menu/columnMenu/index.ts diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuColumnsItem.tsx b/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuColumnsItem.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuColumnsItem.tsx rename to packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuColumnsItem.tsx diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.tsx b/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.tsx rename to packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.tsx diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.tsx b/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.tsx rename to packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.tsx diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.tsx b/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.tsx rename to packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.tsx diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.tsx b/packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.tsx rename to packages/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.tsx diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/menuItems/index.ts b/packages/x-data-grid/src/components/menu/columnMenu/menuItems/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/components/menu/columnMenu/menuItems/index.ts rename to packages/x-data-grid/src/components/menu/columnMenu/menuItems/index.ts diff --git a/packages/grid/x-data-grid/src/components/menu/index.ts b/packages/x-data-grid/src/components/menu/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/components/menu/index.ts rename to packages/x-data-grid/src/components/menu/index.ts diff --git a/packages/grid/x-data-grid/src/components/panel/GridColumnsPanel.tsx b/packages/x-data-grid/src/components/panel/GridColumnsPanel.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/panel/GridColumnsPanel.tsx rename to packages/x-data-grid/src/components/panel/GridColumnsPanel.tsx diff --git a/packages/grid/x-data-grid/src/components/panel/GridPanel.spec.tsx b/packages/x-data-grid/src/components/panel/GridPanel.spec.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/panel/GridPanel.spec.tsx rename to packages/x-data-grid/src/components/panel/GridPanel.spec.tsx diff --git a/packages/grid/x-data-grid/src/components/panel/GridPanel.test.tsx b/packages/x-data-grid/src/components/panel/GridPanel.test.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/panel/GridPanel.test.tsx rename to packages/x-data-grid/src/components/panel/GridPanel.test.tsx diff --git a/packages/grid/x-data-grid/src/components/panel/GridPanel.tsx b/packages/x-data-grid/src/components/panel/GridPanel.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/panel/GridPanel.tsx rename to packages/x-data-grid/src/components/panel/GridPanel.tsx diff --git a/packages/grid/x-data-grid/src/components/panel/GridPanelContent.tsx b/packages/x-data-grid/src/components/panel/GridPanelContent.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/panel/GridPanelContent.tsx rename to packages/x-data-grid/src/components/panel/GridPanelContent.tsx diff --git a/packages/grid/x-data-grid/src/components/panel/GridPanelFooter.tsx b/packages/x-data-grid/src/components/panel/GridPanelFooter.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/panel/GridPanelFooter.tsx rename to packages/x-data-grid/src/components/panel/GridPanelFooter.tsx diff --git a/packages/grid/x-data-grid/src/components/panel/GridPanelHeader.tsx b/packages/x-data-grid/src/components/panel/GridPanelHeader.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/panel/GridPanelHeader.tsx rename to packages/x-data-grid/src/components/panel/GridPanelHeader.tsx diff --git a/packages/grid/x-data-grid/src/components/panel/GridPanelWrapper.tsx b/packages/x-data-grid/src/components/panel/GridPanelWrapper.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/panel/GridPanelWrapper.tsx rename to packages/x-data-grid/src/components/panel/GridPanelWrapper.tsx diff --git a/packages/grid/x-data-grid/src/components/panel/GridPreferencesPanel.tsx b/packages/x-data-grid/src/components/panel/GridPreferencesPanel.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/panel/GridPreferencesPanel.tsx rename to packages/x-data-grid/src/components/panel/GridPreferencesPanel.tsx diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx similarity index 99% rename from packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx rename to packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx index bc6bfdc1c3549..9ff36187ec42c 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx +++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx @@ -316,7 +316,7 @@ const GridFilterForm = React.forwardRef( }, [item, currentColumn]); const changeColumn = React.useCallback( - (event: SelectChangeEvent) => { + (event: SelectChangeEvent) => { const field = event.target.value as string; const column = apiRef.current.getColumn(field)!; @@ -369,7 +369,7 @@ const GridFilterForm = React.forwardRef( ); const changeOperator = React.useCallback( - (event: SelectChangeEvent) => { + (event: SelectChangeEvent) => { const operator = event.target.value as string; const newOperator = currentColumn?.filterOperators!.find((op) => op.value === operator); @@ -388,7 +388,7 @@ const GridFilterForm = React.forwardRef( ); const changeLogicOperator = React.useCallback( - (event: SelectChangeEvent) => { + (event: SelectChangeEvent) => { const logicOperator = (event.target.value as string) === GridLogicOperator.And.toString() ? GridLogicOperator.And diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx similarity index 98% rename from packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx rename to packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx index 32c79a69e6b76..f8dc457521aa1 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx +++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx @@ -85,7 +85,9 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) { native={isSelectNative} displayEmpty inputProps={{ ref: focusElementRef, tabIndex }} - {...others} + { + ...(others as any) /* FIXME: typing error */ + } {...baseSelectProps} > { + (event: SelectChangeEvent) => { let value = event.target.value; // NativeSelect casts the value to a string. @@ -146,7 +146,9 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) { placeholder: placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder'), }} native={isSelectNative} - {...others} + { + ...(others as any) /* FIXME: typing error */ + } {...rootProps.slotProps?.baseSelect} > {renderSingleSelectOptions({ diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx rename to packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValueProps.ts b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValueProps.ts similarity index 100% rename from packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValueProps.ts rename to packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValueProps.ts diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterPanel.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterPanel.tsx similarity index 98% rename from packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterPanel.tsx rename to packages/x-data-grid/src/components/panel/filterPanel/GridFilterPanel.tsx index 6560dd9d16cce..dfd90cdc867e0 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterPanel.tsx +++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterPanel.tsx @@ -212,7 +212,10 @@ const GridFilterPanel = React.forwardRef( apiRef.current.deleteFilterItem(validFilters[0]); return apiRef.current.hideFilterPanel(); } - return apiRef.current.setFilterModel({ ...filterModel, items: readOnlyFilters }); + return apiRef.current.setFilterModel( + { ...filterModel, items: readOnlyFilters }, + 'removeAllFilterItems', + ); }, [apiRef, readOnlyFilters, filterModel, validFilters]); React.useEffect(() => { diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/filterPanelUtils.ts b/packages/x-data-grid/src/components/panel/filterPanel/filterPanelUtils.ts similarity index 100% rename from packages/grid/x-data-grid/src/components/panel/filterPanel/filterPanelUtils.ts rename to packages/x-data-grid/src/components/panel/filterPanel/filterPanelUtils.ts diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/index.ts b/packages/x-data-grid/src/components/panel/filterPanel/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/components/panel/filterPanel/index.ts rename to packages/x-data-grid/src/components/panel/filterPanel/index.ts diff --git a/packages/grid/x-data-grid/src/components/panel/index.ts b/packages/x-data-grid/src/components/panel/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/components/panel/index.ts rename to packages/x-data-grid/src/components/panel/index.ts diff --git a/packages/grid/x-data-grid/src/components/reexportable.ts b/packages/x-data-grid/src/components/reexportable.ts similarity index 100% rename from packages/grid/x-data-grid/src/components/reexportable.ts rename to packages/x-data-grid/src/components/reexportable.ts diff --git a/packages/grid/x-data-grid/src/components/toolbar/GridToolbar.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbar.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/toolbar/GridToolbar.tsx rename to packages/x-data-grid/src/components/toolbar/GridToolbar.tsx diff --git a/packages/grid/x-data-grid/src/components/toolbar/GridToolbarColumnsButton.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarColumnsButton.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/toolbar/GridToolbarColumnsButton.tsx rename to packages/x-data-grid/src/components/toolbar/GridToolbarColumnsButton.tsx diff --git a/packages/grid/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx rename to packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx diff --git a/packages/grid/x-data-grid/src/components/toolbar/GridToolbarExport.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarExport.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/toolbar/GridToolbarExport.tsx rename to packages/x-data-grid/src/components/toolbar/GridToolbarExport.tsx diff --git a/packages/grid/x-data-grid/src/components/toolbar/GridToolbarExportContainer.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarExportContainer.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/toolbar/GridToolbarExportContainer.tsx rename to packages/x-data-grid/src/components/toolbar/GridToolbarExportContainer.tsx diff --git a/packages/grid/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx rename to packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx diff --git a/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx rename to packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx diff --git a/packages/grid/x-data-grid/src/components/toolbar/index.ts b/packages/x-data-grid/src/components/toolbar/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/components/toolbar/index.ts rename to packages/x-data-grid/src/components/toolbar/index.ts diff --git a/packages/grid/x-data-grid/src/components/virtualization/GridBottomContainer.tsx b/packages/x-data-grid/src/components/virtualization/GridBottomContainer.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/virtualization/GridBottomContainer.tsx rename to packages/x-data-grid/src/components/virtualization/GridBottomContainer.tsx diff --git a/packages/grid/x-data-grid/src/components/virtualization/GridMainContainer.tsx b/packages/x-data-grid/src/components/virtualization/GridMainContainer.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/virtualization/GridMainContainer.tsx rename to packages/x-data-grid/src/components/virtualization/GridMainContainer.tsx diff --git a/packages/grid/x-data-grid/src/components/virtualization/GridTopContainer.tsx b/packages/x-data-grid/src/components/virtualization/GridTopContainer.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/virtualization/GridTopContainer.tsx rename to packages/x-data-grid/src/components/virtualization/GridTopContainer.tsx diff --git a/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx rename to packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx diff --git a/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx b/packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx rename to packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx diff --git a/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScrollerContent.tsx b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerContent.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/virtualization/GridVirtualScrollerContent.tsx rename to packages/x-data-grid/src/components/virtualization/GridVirtualScrollerContent.tsx diff --git a/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx rename to packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx diff --git a/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScrollerRenderZone.tsx b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerRenderZone.tsx similarity index 100% rename from packages/grid/x-data-grid/src/components/virtualization/GridVirtualScrollerRenderZone.tsx rename to packages/x-data-grid/src/components/virtualization/GridVirtualScrollerRenderZone.tsx diff --git a/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts b/packages/x-data-grid/src/constants/defaultGridSlotsComponents.ts similarity index 100% rename from packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts rename to packages/x-data-grid/src/constants/defaultGridSlotsComponents.ts diff --git a/packages/grid/x-data-grid/src/constants/envConstants.ts b/packages/x-data-grid/src/constants/envConstants.ts similarity index 100% rename from packages/grid/x-data-grid/src/constants/envConstants.ts rename to packages/x-data-grid/src/constants/envConstants.ts diff --git a/packages/grid/x-data-grid/src/constants/gridClasses.ts b/packages/x-data-grid/src/constants/gridClasses.ts similarity index 99% rename from packages/grid/x-data-grid/src/constants/gridClasses.ts rename to packages/x-data-grid/src/constants/gridClasses.ts index a54196c2cf97b..f83194a44d634 100644 --- a/packages/grid/x-data-grid/src/constants/gridClasses.ts +++ b/packages/x-data-grid/src/constants/gridClasses.ts @@ -112,6 +112,11 @@ export interface GridClasses { * Styles applied to the skeleton cell element. */ cellSkeleton: string; + /** + * @ignore - do not document. + * Styles applied to the left offset cell element. + */ + cellOffsetLeft: string; /** * Styles applied to the selection checkbox element. */ @@ -634,6 +639,7 @@ export const gridClasses = generateUtilityClasses('MuiDataGrid', [ 'cellCheckbox', 'cellEmpty', 'cellSkeleton', + 'cellOffsetLeft', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', diff --git a/packages/grid/x-data-grid/src/constants/gridDetailPanelToggleField.ts b/packages/x-data-grid/src/constants/gridDetailPanelToggleField.ts similarity index 100% rename from packages/grid/x-data-grid/src/constants/gridDetailPanelToggleField.ts rename to packages/x-data-grid/src/constants/gridDetailPanelToggleField.ts diff --git a/packages/grid/x-data-grid/src/constants/index.ts b/packages/x-data-grid/src/constants/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/constants/index.ts rename to packages/x-data-grid/src/constants/index.ts diff --git a/packages/grid/x-data-grid/src/constants/localeTextConstants.ts b/packages/x-data-grid/src/constants/localeTextConstants.ts similarity index 100% rename from packages/grid/x-data-grid/src/constants/localeTextConstants.ts rename to packages/x-data-grid/src/constants/localeTextConstants.ts diff --git a/packages/grid/x-data-grid/src/context/GridContextProvider.tsx b/packages/x-data-grid/src/context/GridContextProvider.tsx similarity index 100% rename from packages/grid/x-data-grid/src/context/GridContextProvider.tsx rename to packages/x-data-grid/src/context/GridContextProvider.tsx diff --git a/packages/grid/x-data-grid/src/context/GridRootPropsContext.ts b/packages/x-data-grid/src/context/GridRootPropsContext.ts similarity index 100% rename from packages/grid/x-data-grid/src/context/GridRootPropsContext.ts rename to packages/x-data-grid/src/context/GridRootPropsContext.ts diff --git a/packages/grid/x-data-grid/src/context/index.ts b/packages/x-data-grid/src/context/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/context/index.ts rename to packages/x-data-grid/src/context/index.ts diff --git a/packages/grid/x-data-grid/src/hooks/core/gridCoreSelector.ts b/packages/x-data-grid/src/hooks/core/gridCoreSelector.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/core/gridCoreSelector.ts rename to packages/x-data-grid/src/hooks/core/gridCoreSelector.ts diff --git a/packages/grid/x-data-grid/src/hooks/core/index.ts b/packages/x-data-grid/src/hooks/core/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/core/index.ts rename to packages/x-data-grid/src/hooks/core/index.ts diff --git a/packages/grid/x-data-grid/src/hooks/core/pipeProcessing/gridPipeProcessingApi.ts b/packages/x-data-grid/src/hooks/core/pipeProcessing/gridPipeProcessingApi.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/core/pipeProcessing/gridPipeProcessingApi.ts rename to packages/x-data-grid/src/hooks/core/pipeProcessing/gridPipeProcessingApi.ts diff --git a/packages/grid/x-data-grid/src/hooks/core/pipeProcessing/index.ts b/packages/x-data-grid/src/hooks/core/pipeProcessing/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/core/pipeProcessing/index.ts rename to packages/x-data-grid/src/hooks/core/pipeProcessing/index.ts diff --git a/packages/grid/x-data-grid/src/hooks/core/pipeProcessing/useGridPipeProcessing.ts b/packages/x-data-grid/src/hooks/core/pipeProcessing/useGridPipeProcessing.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/core/pipeProcessing/useGridPipeProcessing.ts rename to packages/x-data-grid/src/hooks/core/pipeProcessing/useGridPipeProcessing.ts diff --git a/packages/grid/x-data-grid/src/hooks/core/pipeProcessing/useGridRegisterPipeApplier.ts b/packages/x-data-grid/src/hooks/core/pipeProcessing/useGridRegisterPipeApplier.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/core/pipeProcessing/useGridRegisterPipeApplier.ts rename to packages/x-data-grid/src/hooks/core/pipeProcessing/useGridRegisterPipeApplier.ts diff --git a/packages/grid/x-data-grid/src/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.ts b/packages/x-data-grid/src/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.ts rename to packages/x-data-grid/src/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.ts diff --git a/packages/grid/x-data-grid/src/hooks/core/strategyProcessing/gridStrategyProcessingApi.ts b/packages/x-data-grid/src/hooks/core/strategyProcessing/gridStrategyProcessingApi.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/core/strategyProcessing/gridStrategyProcessingApi.ts rename to packages/x-data-grid/src/hooks/core/strategyProcessing/gridStrategyProcessingApi.ts diff --git a/packages/grid/x-data-grid/src/hooks/core/strategyProcessing/index.ts b/packages/x-data-grid/src/hooks/core/strategyProcessing/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/core/strategyProcessing/index.ts rename to packages/x-data-grid/src/hooks/core/strategyProcessing/index.ts diff --git a/packages/grid/x-data-grid/src/hooks/core/strategyProcessing/useGridRegisterStrategyProcessor.ts b/packages/x-data-grid/src/hooks/core/strategyProcessing/useGridRegisterStrategyProcessor.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/core/strategyProcessing/useGridRegisterStrategyProcessor.ts rename to packages/x-data-grid/src/hooks/core/strategyProcessing/useGridRegisterStrategyProcessor.ts diff --git a/packages/grid/x-data-grid/src/hooks/core/strategyProcessing/useGridStrategyProcessing.ts b/packages/x-data-grid/src/hooks/core/strategyProcessing/useGridStrategyProcessing.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/core/strategyProcessing/useGridStrategyProcessing.ts rename to packages/x-data-grid/src/hooks/core/strategyProcessing/useGridStrategyProcessing.ts diff --git a/packages/grid/x-data-grid/src/hooks/core/useGridApiInitialization.ts b/packages/x-data-grid/src/hooks/core/useGridApiInitialization.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/core/useGridApiInitialization.ts rename to packages/x-data-grid/src/hooks/core/useGridApiInitialization.ts diff --git a/packages/grid/x-data-grid/src/hooks/core/useGridInitialization.ts b/packages/x-data-grid/src/hooks/core/useGridInitialization.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/core/useGridInitialization.ts rename to packages/x-data-grid/src/hooks/core/useGridInitialization.ts diff --git a/packages/grid/x-data-grid/src/hooks/core/useGridLocaleText.tsx b/packages/x-data-grid/src/hooks/core/useGridLocaleText.tsx similarity index 100% rename from packages/grid/x-data-grid/src/hooks/core/useGridLocaleText.tsx rename to packages/x-data-grid/src/hooks/core/useGridLocaleText.tsx diff --git a/packages/grid/x-data-grid/src/hooks/core/useGridLoggerFactory.ts b/packages/x-data-grid/src/hooks/core/useGridLoggerFactory.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/core/useGridLoggerFactory.ts rename to packages/x-data-grid/src/hooks/core/useGridLoggerFactory.ts diff --git a/packages/grid/x-data-grid/src/hooks/core/useGridRefs.ts b/packages/x-data-grid/src/hooks/core/useGridRefs.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/core/useGridRefs.ts rename to packages/x-data-grid/src/hooks/core/useGridRefs.ts diff --git a/packages/grid/x-data-grid/src/hooks/core/useGridStateInitialization.ts b/packages/x-data-grid/src/hooks/core/useGridStateInitialization.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/core/useGridStateInitialization.ts rename to packages/x-data-grid/src/hooks/core/useGridStateInitialization.ts diff --git a/packages/grid/x-data-grid/src/hooks/core/useGridTheme.tsx b/packages/x-data-grid/src/hooks/core/useGridTheme.tsx similarity index 100% rename from packages/grid/x-data-grid/src/hooks/core/useGridTheme.tsx rename to packages/x-data-grid/src/hooks/core/useGridTheme.tsx diff --git a/packages/grid/x-data-grid/src/hooks/features/clipboard/useGridClipboard.ts b/packages/x-data-grid/src/hooks/features/clipboard/useGridClipboard.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/clipboard/useGridClipboard.ts rename to packages/x-data-grid/src/hooks/features/clipboard/useGridClipboard.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/columnGrouping/gridColumnGroupsInterfaces.ts b/packages/x-data-grid/src/hooks/features/columnGrouping/gridColumnGroupsInterfaces.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/columnGrouping/gridColumnGroupsInterfaces.ts rename to packages/x-data-grid/src/hooks/features/columnGrouping/gridColumnGroupsInterfaces.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/columnGrouping/gridColumnGroupsSelector.ts b/packages/x-data-grid/src/hooks/features/columnGrouping/gridColumnGroupsSelector.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/columnGrouping/gridColumnGroupsSelector.ts rename to packages/x-data-grid/src/hooks/features/columnGrouping/gridColumnGroupsSelector.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/columnGrouping/gridColumnGroupsUtils.ts b/packages/x-data-grid/src/hooks/features/columnGrouping/gridColumnGroupsUtils.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/columnGrouping/gridColumnGroupsUtils.ts rename to packages/x-data-grid/src/hooks/features/columnGrouping/gridColumnGroupsUtils.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/columnGrouping/index.ts b/packages/x-data-grid/src/hooks/features/columnGrouping/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/columnGrouping/index.ts rename to packages/x-data-grid/src/hooks/features/columnGrouping/index.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/columnGrouping/useGridColumnGrouping.ts b/packages/x-data-grid/src/hooks/features/columnGrouping/useGridColumnGrouping.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/columnGrouping/useGridColumnGrouping.ts rename to packages/x-data-grid/src/hooks/features/columnGrouping/useGridColumnGrouping.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx rename to packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx diff --git a/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts b/packages/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts rename to packages/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuSelector.ts b/packages/x-data-grid/src/hooks/features/columnMenu/columnMenuSelector.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuSelector.ts rename to packages/x-data-grid/src/hooks/features/columnMenu/columnMenuSelector.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/columnMenu/index.ts b/packages/x-data-grid/src/hooks/features/columnMenu/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/columnMenu/index.ts rename to packages/x-data-grid/src/hooks/features/columnMenu/index.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenu.ts b/packages/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenu.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenu.ts rename to packages/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenu.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuSlots.ts b/packages/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuSlots.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuSlots.ts rename to packages/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuSlots.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsInterfaces.ts b/packages/x-data-grid/src/hooks/features/columns/gridColumnsInterfaces.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsInterfaces.ts rename to packages/x-data-grid/src/hooks/features/columns/gridColumnsInterfaces.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsSelector.ts b/packages/x-data-grid/src/hooks/features/columns/gridColumnsSelector.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsSelector.ts rename to packages/x-data-grid/src/hooks/features/columns/gridColumnsSelector.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.test.tsx b/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.test.tsx similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.test.tsx rename to packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.test.tsx diff --git a/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts b/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts rename to packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/columns/index.ts b/packages/x-data-grid/src/hooks/features/columns/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/columns/index.ts rename to packages/x-data-grid/src/hooks/features/columns/index.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/columns/useGridColumnSpanning.ts b/packages/x-data-grid/src/hooks/features/columns/useGridColumnSpanning.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/columns/useGridColumnSpanning.ts rename to packages/x-data-grid/src/hooks/features/columns/useGridColumnSpanning.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/columns/useGridColumns.tsx b/packages/x-data-grid/src/hooks/features/columns/useGridColumns.tsx similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/columns/useGridColumns.tsx rename to packages/x-data-grid/src/hooks/features/columns/useGridColumns.tsx diff --git a/packages/grid/x-data-grid/src/hooks/features/density/densitySelector.ts b/packages/x-data-grid/src/hooks/features/density/densitySelector.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/density/densitySelector.ts rename to packages/x-data-grid/src/hooks/features/density/densitySelector.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/density/densityState.ts b/packages/x-data-grid/src/hooks/features/density/densityState.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/density/densityState.ts rename to packages/x-data-grid/src/hooks/features/density/densityState.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/density/index.ts b/packages/x-data-grid/src/hooks/features/density/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/density/index.ts rename to packages/x-data-grid/src/hooks/features/density/index.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/density/useGridDensity.tsx b/packages/x-data-grid/src/hooks/features/density/useGridDensity.tsx similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/density/useGridDensity.tsx rename to packages/x-data-grid/src/hooks/features/density/useGridDensity.tsx diff --git a/packages/grid/x-data-grid/src/hooks/features/dimensions/gridDimensionsApi.ts b/packages/x-data-grid/src/hooks/features/dimensions/gridDimensionsApi.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/dimensions/gridDimensionsApi.ts rename to packages/x-data-grid/src/hooks/features/dimensions/gridDimensionsApi.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/dimensions/gridDimensionsSelectors.ts b/packages/x-data-grid/src/hooks/features/dimensions/gridDimensionsSelectors.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/dimensions/gridDimensionsSelectors.ts rename to packages/x-data-grid/src/hooks/features/dimensions/gridDimensionsSelectors.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/dimensions/index.ts b/packages/x-data-grid/src/hooks/features/dimensions/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/dimensions/index.ts rename to packages/x-data-grid/src/hooks/features/dimensions/index.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts b/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts rename to packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/editing/gridEditingSelectors.ts b/packages/x-data-grid/src/hooks/features/editing/gridEditingSelectors.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/editing/gridEditingSelectors.ts rename to packages/x-data-grid/src/hooks/features/editing/gridEditingSelectors.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts b/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts rename to packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/editing/useGridEditing.ts b/packages/x-data-grid/src/hooks/features/editing/useGridEditing.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/editing/useGridEditing.ts rename to packages/x-data-grid/src/hooks/features/editing/useGridEditing.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts b/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts rename to packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/events/useGridEvents.ts b/packages/x-data-grid/src/hooks/features/events/useGridEvents.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/events/useGridEvents.ts rename to packages/x-data-grid/src/hooks/features/events/useGridEvents.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/export/serializers/csvSerializer.ts b/packages/x-data-grid/src/hooks/features/export/serializers/csvSerializer.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/export/serializers/csvSerializer.ts rename to packages/x-data-grid/src/hooks/features/export/serializers/csvSerializer.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/export/useGridCsvExport.tsx b/packages/x-data-grid/src/hooks/features/export/useGridCsvExport.tsx similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/export/useGridCsvExport.tsx rename to packages/x-data-grid/src/hooks/features/export/useGridCsvExport.tsx diff --git a/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx b/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx rename to packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx diff --git a/packages/grid/x-data-grid/src/hooks/features/export/utils.ts b/packages/x-data-grid/src/hooks/features/export/utils.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/export/utils.ts rename to packages/x-data-grid/src/hooks/features/export/utils.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/filter/gridFilterSelector.ts b/packages/x-data-grid/src/hooks/features/filter/gridFilterSelector.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/filter/gridFilterSelector.ts rename to packages/x-data-grid/src/hooks/features/filter/gridFilterSelector.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/filter/gridFilterState.ts b/packages/x-data-grid/src/hooks/features/filter/gridFilterState.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/filter/gridFilterState.ts rename to packages/x-data-grid/src/hooks/features/filter/gridFilterState.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts b/packages/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts rename to packages/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/filter/index.ts b/packages/x-data-grid/src/hooks/features/filter/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/filter/index.ts rename to packages/x-data-grid/src/hooks/features/filter/index.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/filter/useGridFilter.tsx b/packages/x-data-grid/src/hooks/features/filter/useGridFilter.tsx similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/filter/useGridFilter.tsx rename to packages/x-data-grid/src/hooks/features/filter/useGridFilter.tsx diff --git a/packages/grid/x-data-grid/src/hooks/features/focus/gridFocusState.ts b/packages/x-data-grid/src/hooks/features/focus/gridFocusState.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/focus/gridFocusState.ts rename to packages/x-data-grid/src/hooks/features/focus/gridFocusState.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/focus/gridFocusStateSelector.ts b/packages/x-data-grid/src/hooks/features/focus/gridFocusStateSelector.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/focus/gridFocusStateSelector.ts rename to packages/x-data-grid/src/hooks/features/focus/gridFocusStateSelector.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/focus/index.ts b/packages/x-data-grid/src/hooks/features/focus/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/focus/index.ts rename to packages/x-data-grid/src/hooks/features/focus/index.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/focus/useGridFocus.ts b/packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/focus/useGridFocus.ts rename to packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/headerFiltering/gridHeaderFilteringSelectors.ts b/packages/x-data-grid/src/hooks/features/headerFiltering/gridHeaderFilteringSelectors.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/headerFiltering/gridHeaderFilteringSelectors.ts rename to packages/x-data-grid/src/hooks/features/headerFiltering/gridHeaderFilteringSelectors.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/headerFiltering/index.ts b/packages/x-data-grid/src/hooks/features/headerFiltering/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/headerFiltering/index.ts rename to packages/x-data-grid/src/hooks/features/headerFiltering/index.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/headerFiltering/useGridHeaderFiltering.ts b/packages/x-data-grid/src/hooks/features/headerFiltering/useGridHeaderFiltering.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/headerFiltering/useGridHeaderFiltering.ts rename to packages/x-data-grid/src/hooks/features/headerFiltering/useGridHeaderFiltering.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/index.ts b/packages/x-data-grid/src/hooks/features/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/index.ts rename to packages/x-data-grid/src/hooks/features/index.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts b/packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts rename to packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/pagination/gridPaginationInterfaces.ts b/packages/x-data-grid/src/hooks/features/pagination/gridPaginationInterfaces.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/pagination/gridPaginationInterfaces.ts rename to packages/x-data-grid/src/hooks/features/pagination/gridPaginationInterfaces.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/pagination/gridPaginationSelector.ts b/packages/x-data-grid/src/hooks/features/pagination/gridPaginationSelector.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/pagination/gridPaginationSelector.ts rename to packages/x-data-grid/src/hooks/features/pagination/gridPaginationSelector.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/pagination/gridPaginationUtils.ts b/packages/x-data-grid/src/hooks/features/pagination/gridPaginationUtils.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/pagination/gridPaginationUtils.ts rename to packages/x-data-grid/src/hooks/features/pagination/gridPaginationUtils.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/pagination/index.ts b/packages/x-data-grid/src/hooks/features/pagination/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/pagination/index.ts rename to packages/x-data-grid/src/hooks/features/pagination/index.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/pagination/useGridPagination.ts b/packages/x-data-grid/src/hooks/features/pagination/useGridPagination.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/pagination/useGridPagination.ts rename to packages/x-data-grid/src/hooks/features/pagination/useGridPagination.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/preferencesPanel/gridPreferencePanelSelector.ts b/packages/x-data-grid/src/hooks/features/preferencesPanel/gridPreferencePanelSelector.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/preferencesPanel/gridPreferencePanelSelector.ts rename to packages/x-data-grid/src/hooks/features/preferencesPanel/gridPreferencePanelSelector.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/preferencesPanel/gridPreferencePanelState.ts b/packages/x-data-grid/src/hooks/features/preferencesPanel/gridPreferencePanelState.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/preferencesPanel/gridPreferencePanelState.ts rename to packages/x-data-grid/src/hooks/features/preferencesPanel/gridPreferencePanelState.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/preferencesPanel/gridPreferencePanelsValue.ts b/packages/x-data-grid/src/hooks/features/preferencesPanel/gridPreferencePanelsValue.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/preferencesPanel/gridPreferencePanelsValue.ts rename to packages/x-data-grid/src/hooks/features/preferencesPanel/gridPreferencePanelsValue.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/preferencesPanel/index.ts b/packages/x-data-grid/src/hooks/features/preferencesPanel/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/preferencesPanel/index.ts rename to packages/x-data-grid/src/hooks/features/preferencesPanel/index.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/preferencesPanel/useGridPreferencesPanel.ts b/packages/x-data-grid/src/hooks/features/preferencesPanel/useGridPreferencesPanel.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/preferencesPanel/useGridPreferencesPanel.ts rename to packages/x-data-grid/src/hooks/features/preferencesPanel/useGridPreferencesPanel.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/rowSelection/gridRowSelectionSelector.ts b/packages/x-data-grid/src/hooks/features/rowSelection/gridRowSelectionSelector.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/rowSelection/gridRowSelectionSelector.ts rename to packages/x-data-grid/src/hooks/features/rowSelection/gridRowSelectionSelector.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/rowSelection/index.ts b/packages/x-data-grid/src/hooks/features/rowSelection/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/rowSelection/index.ts rename to packages/x-data-grid/src/hooks/features/rowSelection/index.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts b/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts rename to packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/rowSelection/useGridRowSelectionPreProcessors.ts b/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelectionPreProcessors.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/rowSelection/useGridRowSelectionPreProcessors.ts rename to packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelectionPreProcessors.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/rowSelection/utils.ts b/packages/x-data-grid/src/hooks/features/rowSelection/utils.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/rowSelection/utils.ts rename to packages/x-data-grid/src/hooks/features/rowSelection/utils.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/rows/gridRowsInterfaces.ts b/packages/x-data-grid/src/hooks/features/rows/gridRowsInterfaces.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/rows/gridRowsInterfaces.ts rename to packages/x-data-grid/src/hooks/features/rows/gridRowsInterfaces.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/rows/gridRowsMetaSelector.ts b/packages/x-data-grid/src/hooks/features/rows/gridRowsMetaSelector.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/rows/gridRowsMetaSelector.ts rename to packages/x-data-grid/src/hooks/features/rows/gridRowsMetaSelector.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/rows/gridRowsMetaState.ts b/packages/x-data-grid/src/hooks/features/rows/gridRowsMetaState.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/rows/gridRowsMetaState.ts rename to packages/x-data-grid/src/hooks/features/rows/gridRowsMetaState.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/rows/gridRowsSelector.ts b/packages/x-data-grid/src/hooks/features/rows/gridRowsSelector.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/rows/gridRowsSelector.ts rename to packages/x-data-grid/src/hooks/features/rows/gridRowsSelector.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts b/packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts similarity index 99% rename from packages/grid/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts rename to packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts index 1ed2ecaeda91b..a2704b611c8ec 100644 --- a/packages/grid/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts +++ b/packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts @@ -25,7 +25,7 @@ import { GridRowsPartialUpdateAction, } from './gridRowsInterfaces'; import { gridPinnedRowsSelector } from './gridRowsSelector'; -import { gridDimensionsSelector } from '../dimensions'; +import { gridDimensionsSelector } from '../dimensions/gridDimensionsSelectors'; export const GRID_ROOT_GROUP_ID: GridRowId = `auto-generated-group-node-root`; export const GRID_ID_AUTOGENERATED = Symbol('mui.id_autogenerated'); diff --git a/packages/grid/x-data-grid/src/hooks/features/rows/index.ts b/packages/x-data-grid/src/hooks/features/rows/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/rows/index.ts rename to packages/x-data-grid/src/hooks/features/rows/index.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/rows/useGridParamsApi.ts b/packages/x-data-grid/src/hooks/features/rows/useGridParamsApi.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/rows/useGridParamsApi.ts rename to packages/x-data-grid/src/hooks/features/rows/useGridParamsApi.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts b/packages/x-data-grid/src/hooks/features/rows/useGridRows.ts similarity index 98% rename from packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts rename to packages/x-data-grid/src/hooks/features/rows/useGridRows.ts index 90c846f460233..1bdc10b76eab6 100644 --- a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts +++ b/packages/x-data-grid/src/hooks/features/rows/useGridRows.ts @@ -196,7 +196,7 @@ export const useGridRows = ( if (props.signature === GridSignature.DataGrid && updates.length > 1) { throw new Error( [ - "MUI X: You can't update several rows at once in `apiRef.current.updateRows` on the DataGrid.", + 'MUI X: You cannot update several rows at once in `apiRef.current.updateRows` on the DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.', ].join('\n'), ); @@ -387,7 +387,7 @@ export const useGridRows = ( if (props.signature === GridSignature.DataGrid && newRows.length > 1) { throw new Error( [ - "MUI X: You can't replace rows using `apiRef.current.unstable_replaceRows` on the DataGrid.", + 'MUI X: You cannot replace rows using `apiRef.current.unstable_replaceRows` on the DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.', ].join('\n'), ); diff --git a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts b/packages/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts rename to packages/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsPreProcessors.tsx b/packages/x-data-grid/src/hooks/features/rows/useGridRowsPreProcessors.tsx similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsPreProcessors.tsx rename to packages/x-data-grid/src/hooks/features/rows/useGridRowsPreProcessors.tsx diff --git a/packages/grid/x-data-grid/src/hooks/features/scroll/useGridScroll.ts b/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/scroll/useGridScroll.ts rename to packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/sorting/gridSortingSelector.ts b/packages/x-data-grid/src/hooks/features/sorting/gridSortingSelector.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/sorting/gridSortingSelector.ts rename to packages/x-data-grid/src/hooks/features/sorting/gridSortingSelector.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/sorting/gridSortingState.ts b/packages/x-data-grid/src/hooks/features/sorting/gridSortingState.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/sorting/gridSortingState.ts rename to packages/x-data-grid/src/hooks/features/sorting/gridSortingState.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/sorting/gridSortingUtils.ts b/packages/x-data-grid/src/hooks/features/sorting/gridSortingUtils.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/sorting/gridSortingUtils.ts rename to packages/x-data-grid/src/hooks/features/sorting/gridSortingUtils.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/sorting/index.ts b/packages/x-data-grid/src/hooks/features/sorting/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/sorting/index.ts rename to packages/x-data-grid/src/hooks/features/sorting/index.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/sorting/useGridSorting.ts b/packages/x-data-grid/src/hooks/features/sorting/useGridSorting.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/sorting/useGridSorting.ts rename to packages/x-data-grid/src/hooks/features/sorting/useGridSorting.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/statePersistence/gridStatePersistenceInterface.ts b/packages/x-data-grid/src/hooks/features/statePersistence/gridStatePersistenceInterface.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/statePersistence/gridStatePersistenceInterface.ts rename to packages/x-data-grid/src/hooks/features/statePersistence/gridStatePersistenceInterface.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/statePersistence/index.ts b/packages/x-data-grid/src/hooks/features/statePersistence/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/statePersistence/index.ts rename to packages/x-data-grid/src/hooks/features/statePersistence/index.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/statePersistence/useGridStatePersistence.ts b/packages/x-data-grid/src/hooks/features/statePersistence/useGridStatePersistence.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/statePersistence/useGridStatePersistence.ts rename to packages/x-data-grid/src/hooks/features/statePersistence/useGridStatePersistence.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/gridVirtualizationSelectors.ts b/packages/x-data-grid/src/hooks/features/virtualization/gridVirtualizationSelectors.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/virtualization/gridVirtualizationSelectors.ts rename to packages/x-data-grid/src/hooks/features/virtualization/gridVirtualizationSelectors.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/index.ts b/packages/x-data-grid/src/hooks/features/virtualization/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/virtualization/index.ts rename to packages/x-data-grid/src/hooks/features/virtualization/index.ts diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx similarity index 99% rename from packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx rename to packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index f84849ac0f60a..7718470f4155b 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -65,7 +65,6 @@ export const useGridVirtualScroller = () => { const gridRootRef = apiRef.current.rootElementRef; const mainRef = apiRef.current.mainElementRef; const scrollerRef = apiRef.current.virtualScrollerRef; - const renderZoneRef = React.useRef(null); const scrollbarVerticalRef = React.useRef(null); const scrollbarHorizontalRef = React.useRef(null); const contentHeight = dimensions.contentSize.height; @@ -343,6 +342,16 @@ export const useGridVirtualScroller = () => { for (let i = 0; i < renderedRows.length; i += 1) { const { id, model } = renderedRows[i]; + + const rowIndexInPage = (currentPage?.range?.firstRowIndex || 0) + firstRowToRender + i; + let index = rowIndexOffset + rowIndexInPage; + if (isRowWithFocusedCellNotInRange && cellFocus?.id === id) { + index = indexOfRowWithFocusedCell; + isRowWithFocusedCellRendered = true; + } else if (isRowWithFocusedCellRendered) { + index -= 1; + } + const isRowNotVisible = isRowWithFocusedCellNotInRange && cellFocus!.id === id; const baseRowHeight = !apiRef.current.rowHasAutoHeight(id) @@ -358,7 +367,7 @@ export const useGridVirtualScroller = () => { let isFirstVisible = false; if (params.position === undefined) { - isFirstVisible = i === 0; + isFirstVisible = rowIndexInPage === 0; } let isLastVisible = false; @@ -394,14 +403,6 @@ export const useGridVirtualScroller = () => { tabbableCell = cellParams.cellMode === 'view' ? cellTabIndex.field : null; } - let index = rowIndexOffset + (currentPage?.range?.firstRowIndex || 0) + firstRowToRender + i; - if (isRowWithFocusedCellNotInRange && cellFocus?.id === id) { - index = indexOfRowWithFocusedCell; - isRowWithFocusedCellRendered = true; - } else if (isRowWithFocusedCellRendered) { - index -= 1; - } - rows.push( { style: contentSize, role: 'presentation', }), - getRenderZoneProps: () => ({ ref: renderZoneRef, role: 'rowgroup' }), + getRenderZoneProps: () => ({ role: 'rowgroup' }), getScrollbarVerticalProps: () => ({ ref: scrollbarVerticalRef, role: 'presentation' }), getScrollbarHorizontalProps: () => ({ ref: scrollbarHorizontalRef, role: 'presentation' }), }; diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualization.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualization.tsx similarity index 100% rename from packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualization.tsx rename to packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualization.tsx diff --git a/packages/grid/x-data-grid/src/hooks/index.ts b/packages/x-data-grid/src/hooks/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/index.ts rename to packages/x-data-grid/src/hooks/index.ts diff --git a/packages/grid/x-data-grid/src/hooks/utils/index.ts b/packages/x-data-grid/src/hooks/utils/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/utils/index.ts rename to packages/x-data-grid/src/hooks/utils/index.ts diff --git a/packages/grid/x-data-grid/src/hooks/utils/useFirstRender.ts b/packages/x-data-grid/src/hooks/utils/useFirstRender.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/utils/useFirstRender.ts rename to packages/x-data-grid/src/hooks/utils/useFirstRender.ts diff --git a/packages/grid/x-data-grid/src/hooks/utils/useGridApiContext.ts b/packages/x-data-grid/src/hooks/utils/useGridApiContext.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/utils/useGridApiContext.ts rename to packages/x-data-grid/src/hooks/utils/useGridApiContext.ts diff --git a/packages/grid/x-data-grid/src/hooks/utils/useGridApiEventHandler.test.tsx b/packages/x-data-grid/src/hooks/utils/useGridApiEventHandler.test.tsx similarity index 100% rename from packages/grid/x-data-grid/src/hooks/utils/useGridApiEventHandler.test.tsx rename to packages/x-data-grid/src/hooks/utils/useGridApiEventHandler.test.tsx diff --git a/packages/grid/x-data-grid/src/hooks/utils/useGridApiEventHandler.ts b/packages/x-data-grid/src/hooks/utils/useGridApiEventHandler.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/utils/useGridApiEventHandler.ts rename to packages/x-data-grid/src/hooks/utils/useGridApiEventHandler.ts diff --git a/packages/grid/x-data-grid/src/hooks/utils/useGridApiMethod.ts b/packages/x-data-grid/src/hooks/utils/useGridApiMethod.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/utils/useGridApiMethod.ts rename to packages/x-data-grid/src/hooks/utils/useGridApiMethod.ts diff --git a/packages/grid/x-data-grid/src/hooks/utils/useGridApiRef.ts b/packages/x-data-grid/src/hooks/utils/useGridApiRef.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/utils/useGridApiRef.ts rename to packages/x-data-grid/src/hooks/utils/useGridApiRef.ts diff --git a/packages/grid/x-data-grid/src/hooks/utils/useGridAriaAttributes.tsx b/packages/x-data-grid/src/hooks/utils/useGridAriaAttributes.tsx similarity index 100% rename from packages/grid/x-data-grid/src/hooks/utils/useGridAriaAttributes.tsx rename to packages/x-data-grid/src/hooks/utils/useGridAriaAttributes.tsx diff --git a/packages/grid/x-data-grid/src/hooks/utils/useGridInitializeState.ts b/packages/x-data-grid/src/hooks/utils/useGridInitializeState.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/utils/useGridInitializeState.ts rename to packages/x-data-grid/src/hooks/utils/useGridInitializeState.ts diff --git a/packages/grid/x-data-grid/src/hooks/utils/useGridLogger.ts b/packages/x-data-grid/src/hooks/utils/useGridLogger.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/utils/useGridLogger.ts rename to packages/x-data-grid/src/hooks/utils/useGridLogger.ts diff --git a/packages/grid/x-data-grid/src/hooks/utils/useGridNativeEventListener.ts b/packages/x-data-grid/src/hooks/utils/useGridNativeEventListener.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/utils/useGridNativeEventListener.ts rename to packages/x-data-grid/src/hooks/utils/useGridNativeEventListener.ts diff --git a/packages/grid/x-data-grid/src/hooks/utils/useGridPrivateApiContext.ts b/packages/x-data-grid/src/hooks/utils/useGridPrivateApiContext.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/utils/useGridPrivateApiContext.ts rename to packages/x-data-grid/src/hooks/utils/useGridPrivateApiContext.ts diff --git a/packages/grid/x-data-grid/src/hooks/utils/useGridRootProps.ts b/packages/x-data-grid/src/hooks/utils/useGridRootProps.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/utils/useGridRootProps.ts rename to packages/x-data-grid/src/hooks/utils/useGridRootProps.ts diff --git a/packages/grid/x-data-grid/src/hooks/utils/useGridSelector.ts b/packages/x-data-grid/src/hooks/utils/useGridSelector.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/utils/useGridSelector.ts rename to packages/x-data-grid/src/hooks/utils/useGridSelector.ts diff --git a/packages/grid/x-data-grid/src/hooks/utils/useGridVisibleRows.ts b/packages/x-data-grid/src/hooks/utils/useGridVisibleRows.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/utils/useGridVisibleRows.ts rename to packages/x-data-grid/src/hooks/utils/useGridVisibleRows.ts diff --git a/packages/grid/x-data-grid/src/hooks/utils/useLazyRef.ts b/packages/x-data-grid/src/hooks/utils/useLazyRef.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/utils/useLazyRef.ts rename to packages/x-data-grid/src/hooks/utils/useLazyRef.ts diff --git a/packages/grid/x-data-grid/src/hooks/utils/useOnMount.ts b/packages/x-data-grid/src/hooks/utils/useOnMount.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/utils/useOnMount.ts rename to packages/x-data-grid/src/hooks/utils/useOnMount.ts diff --git a/packages/grid/x-data-grid/src/hooks/utils/useResizeObserver.ts b/packages/x-data-grid/src/hooks/utils/useResizeObserver.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/utils/useResizeObserver.ts rename to packages/x-data-grid/src/hooks/utils/useResizeObserver.ts diff --git a/packages/grid/x-data-grid/src/hooks/utils/useRunOnce.ts b/packages/x-data-grid/src/hooks/utils/useRunOnce.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/utils/useRunOnce.ts rename to packages/x-data-grid/src/hooks/utils/useRunOnce.ts diff --git a/packages/grid/x-data-grid/src/hooks/utils/useTimeout.ts b/packages/x-data-grid/src/hooks/utils/useTimeout.ts similarity index 100% rename from packages/grid/x-data-grid/src/hooks/utils/useTimeout.ts rename to packages/x-data-grid/src/hooks/utils/useTimeout.ts diff --git a/packages/grid/x-data-grid/src/index.ts b/packages/x-data-grid/src/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/index.ts rename to packages/x-data-grid/src/index.ts diff --git a/packages/grid/x-data-grid/src/internals/index.ts b/packages/x-data-grid/src/internals/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/internals/index.ts rename to packages/x-data-grid/src/internals/index.ts diff --git a/packages/grid/x-data-grid/src/internals/utils/computeSlots.ts b/packages/x-data-grid/src/internals/utils/computeSlots.ts similarity index 100% rename from packages/grid/x-data-grid/src/internals/utils/computeSlots.ts rename to packages/x-data-grid/src/internals/utils/computeSlots.ts diff --git a/packages/grid/x-data-grid/src/internals/utils/index.ts b/packages/x-data-grid/src/internals/utils/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/internals/utils/index.ts rename to packages/x-data-grid/src/internals/utils/index.ts diff --git a/packages/grid/x-data-grid/src/internals/utils/propValidation.ts b/packages/x-data-grid/src/internals/utils/propValidation.ts similarity index 84% rename from packages/grid/x-data-grid/src/internals/utils/propValidation.ts rename to packages/x-data-grid/src/internals/utils/propValidation.ts index 3323c4a8950a6..b86261d3ca8c1 100644 --- a/packages/grid/x-data-grid/src/internals/utils/propValidation.ts +++ b/packages/x-data-grid/src/internals/utils/propValidation.ts @@ -8,7 +8,7 @@ export const propValidatorsDataGrid: PropValidator[] = [ props.autoHeight && [ 'MUI X: `` are not valid props.', - 'You can not use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', + 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.', ].join('\n')) || diff --git a/packages/grid/x-data-grid/src/internals/utils/useProps.ts b/packages/x-data-grid/src/internals/utils/useProps.ts similarity index 100% rename from packages/grid/x-data-grid/src/internals/utils/useProps.ts rename to packages/x-data-grid/src/internals/utils/useProps.ts diff --git a/packages/grid/x-data-grid/src/joy/icons.tsx b/packages/x-data-grid/src/joy/icons.tsx similarity index 100% rename from packages/grid/x-data-grid/src/joy/icons.tsx rename to packages/x-data-grid/src/joy/icons.tsx diff --git a/packages/grid/x-data-grid/src/joy/index.ts b/packages/x-data-grid/src/joy/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/joy/index.ts rename to packages/x-data-grid/src/joy/index.ts diff --git a/packages/grid/x-data-grid/src/joy/joySlots.tsx b/packages/x-data-grid/src/joy/joySlots.tsx similarity index 94% rename from packages/grid/x-data-grid/src/joy/joySlots.tsx rename to packages/x-data-grid/src/joy/joySlots.tsx index 7e245b9180657..7c5819657da0f 100644 --- a/packages/grid/x-data-grid/src/joy/joySlots.tsx +++ b/packages/x-data-grid/src/joy/joySlots.tsx @@ -16,7 +16,7 @@ import JoyCircularProgress from '@mui/joy/CircularProgress'; import JoyTooltip from '@mui/joy/Tooltip'; import { unstable_useForkRef as useForkRef } from '@mui/utils'; import joyIconSlots, { GridKeyboardArrowRight, GridKeyboardArrowLeft } from './icons'; -import type { GridSlotsComponent, GridSlotsComponentsProps } from '../models'; +import type { GridSlotProps, GridSlotsComponent, GridSlotsComponentsProps } from '../models'; import { useGridApiContext } from '../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../hooks/utils/useGridRootProps'; import { gridFilteredTopLevelRowCountSelector, gridPaginationModelSelector } from '../hooks'; @@ -116,10 +116,10 @@ const TextField = React.forwardRef< ); }); -const Button = React.forwardRef< - HTMLButtonElement, - NonNullable ->(function Button({ startIcon, color, endIcon, size, sx, variant, ...props }, ref) { +const Button = React.forwardRef(function Button( + { startIcon, color, endIcon, size, sx, variant, ...props }, + ref, +) { return ( ->(function Switch( +const Switch = React.forwardRef(function Switch( { name, checkedIcon, @@ -204,10 +201,7 @@ const Switch = React.forwardRef< ); }); -const Select = React.forwardRef< - HTMLButtonElement, - NonNullable ->( +const Select = React.forwardRef( ( { open, @@ -314,10 +308,7 @@ const getLabelDisplayedRowsTo = ({ return pageSize === -1 ? rowCount : Math.min(rowCount, (page + 1) * pageSize); }; -const Pagination = React.forwardRef< - HTMLDivElement, - NonNullable ->((props, ref) => { +const Pagination = React.forwardRef((props, ref) => { const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); const paginationModel = gridPaginationModelSelector(apiRef); @@ -443,8 +434,8 @@ const joySlots: Partial = { baseSelect: Select, baseSelectOption: Option, baseInputLabel: InputLabel, - baseFormControl: JoyFormControl, - baseTooltip: JoyTooltip, + baseFormControl: JoyFormControl as any /* FIXME: typing error */, + baseTooltip: JoyTooltip as any /* FIXME: typing error */, pagination: Pagination, loadingOverlay: LoadingOverlay, }; diff --git a/packages/grid/x-data-grid/src/locales/arSD.ts b/packages/x-data-grid/src/locales/arSD.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/arSD.ts rename to packages/x-data-grid/src/locales/arSD.ts diff --git a/packages/grid/x-data-grid/src/locales/beBY.ts b/packages/x-data-grid/src/locales/beBY.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/beBY.ts rename to packages/x-data-grid/src/locales/beBY.ts diff --git a/packages/grid/x-data-grid/src/locales/bgBG.ts b/packages/x-data-grid/src/locales/bgBG.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/bgBG.ts rename to packages/x-data-grid/src/locales/bgBG.ts diff --git a/packages/grid/x-data-grid/src/locales/coreLocales.ts b/packages/x-data-grid/src/locales/coreLocales.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/coreLocales.ts rename to packages/x-data-grid/src/locales/coreLocales.ts diff --git a/packages/grid/x-data-grid/src/locales/csCZ.ts b/packages/x-data-grid/src/locales/csCZ.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/csCZ.ts rename to packages/x-data-grid/src/locales/csCZ.ts diff --git a/packages/grid/x-data-grid/src/locales/daDK.ts b/packages/x-data-grid/src/locales/daDK.ts similarity index 92% rename from packages/grid/x-data-grid/src/locales/daDK.ts rename to packages/x-data-grid/src/locales/daDK.ts index 95bf2c4d67d79..2632d030210dc 100644 --- a/packages/grid/x-data-grid/src/locales/daDK.ts +++ b/packages/x-data-grid/src/locales/daDK.ts @@ -15,8 +15,8 @@ const daDKGrid: Partial = { toolbarDensityComfortable: 'Luftig', // Columns selector toolbar button text - toolbarColumns: 'Kolonne', - toolbarColumnsLabel: 'Vælg kolonne', + toolbarColumns: 'Kolonner', + toolbarColumnsLabel: 'Vælg kolonner', // Filters toolbar button text toolbarFilters: 'Filtre', @@ -48,12 +48,12 @@ const daDKGrid: Partial = { filterPanelRemoveAll: 'Fjern alle', filterPanelDeleteIconLabel: 'Slet', filterPanelLogicOperator: 'Logisk operator', - filterPanelOperator: 'Operatorer', + filterPanelOperator: 'Operator', filterPanelOperatorAnd: 'Og', filterPanelOperatorOr: 'Eller', - filterPanelColumns: 'Kolonne', + filterPanelColumns: 'Kolonner', filterPanelInputLabel: 'Værdi', - filterPanelInputPlaceholder: 'Filter værdi', + filterPanelInputPlaceholder: 'Filterværdi', // Filter operators text filterOperatorContains: 'indeholder', @@ -104,10 +104,10 @@ const daDKGrid: Partial = { // Column menu text columnMenuLabel: 'Menu', - columnMenuShowColumns: 'Vis Kolonner', + columnMenuShowColumns: 'Vis kolonner', columnMenuManageColumns: 'Administrer kolonner', - columnMenuFilter: 'Filtre', - columnMenuHideColumn: 'Skjul', + columnMenuFilter: 'Filtrer', + columnMenuHideColumn: 'Skjul kolonne', columnMenuUnsort: 'Fjern sortering', columnMenuSortAsc: 'Sorter stigende', columnMenuSortDesc: 'Sorter faldende', @@ -149,14 +149,14 @@ const daDKGrid: Partial = { unpin: 'Frigiv', // Tree Data - treeDataGroupingHeaderName: 'Gruppering', + treeDataGroupingHeaderName: 'Gruppe', treeDataExpand: 'Vis underelementer', treeDataCollapse: 'Skjul underelementer', // Grouping columns - groupingColumnHeaderName: 'Gruppér', + groupingColumnHeaderName: 'Gruppe', groupColumn: (name) => `Gruppér efter ${name}`, - unGroupColumn: (name) => `Fjern gruppéring efter ${name}`, + unGroupColumn: (name) => `Fjern gruppering efter ${name}`, // Master/detail detailPanelToggle: 'Udvid/kollaps detaljepanel', @@ -167,7 +167,7 @@ const daDKGrid: Partial = { rowReorderingHeaderName: 'Omarrangering af rækker', // Aggregation - aggregationMenuItemHeader: 'Aggregation', + aggregationMenuItemHeader: 'Aggregering', aggregationFunctionLabelSum: 'sum', aggregationFunctionLabelAvg: 'gns', aggregationFunctionLabelMin: 'min', diff --git a/packages/grid/x-data-grid/src/locales/deDE.ts b/packages/x-data-grid/src/locales/deDE.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/deDE.ts rename to packages/x-data-grid/src/locales/deDE.ts diff --git a/packages/grid/x-data-grid/src/locales/elGR.ts b/packages/x-data-grid/src/locales/elGR.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/elGR.ts rename to packages/x-data-grid/src/locales/elGR.ts diff --git a/packages/grid/x-data-grid/src/locales/enUS.ts b/packages/x-data-grid/src/locales/enUS.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/enUS.ts rename to packages/x-data-grid/src/locales/enUS.ts diff --git a/packages/grid/x-data-grid/src/locales/esES.ts b/packages/x-data-grid/src/locales/esES.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/esES.ts rename to packages/x-data-grid/src/locales/esES.ts diff --git a/packages/grid/x-data-grid/src/locales/faIR.ts b/packages/x-data-grid/src/locales/faIR.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/faIR.ts rename to packages/x-data-grid/src/locales/faIR.ts diff --git a/packages/grid/x-data-grid/src/locales/fiFI.ts b/packages/x-data-grid/src/locales/fiFI.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/fiFI.ts rename to packages/x-data-grid/src/locales/fiFI.ts diff --git a/packages/grid/x-data-grid/src/locales/frFR.ts b/packages/x-data-grid/src/locales/frFR.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/frFR.ts rename to packages/x-data-grid/src/locales/frFR.ts diff --git a/packages/grid/x-data-grid/src/locales/heIL.ts b/packages/x-data-grid/src/locales/heIL.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/heIL.ts rename to packages/x-data-grid/src/locales/heIL.ts diff --git a/packages/grid/x-data-grid/src/locales/hrHR.ts b/packages/x-data-grid/src/locales/hrHR.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/hrHR.ts rename to packages/x-data-grid/src/locales/hrHR.ts diff --git a/packages/grid/x-data-grid/src/locales/huHU.ts b/packages/x-data-grid/src/locales/huHU.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/huHU.ts rename to packages/x-data-grid/src/locales/huHU.ts diff --git a/packages/grid/x-data-grid/src/locales/index.ts b/packages/x-data-grid/src/locales/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/index.ts rename to packages/x-data-grid/src/locales/index.ts diff --git a/packages/grid/x-data-grid/src/locales/itIT.ts b/packages/x-data-grid/src/locales/itIT.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/itIT.ts rename to packages/x-data-grid/src/locales/itIT.ts diff --git a/packages/grid/x-data-grid/src/locales/jaJP.ts b/packages/x-data-grid/src/locales/jaJP.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/jaJP.ts rename to packages/x-data-grid/src/locales/jaJP.ts diff --git a/packages/grid/x-data-grid/src/locales/koKR.ts b/packages/x-data-grid/src/locales/koKR.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/koKR.ts rename to packages/x-data-grid/src/locales/koKR.ts diff --git a/packages/grid/x-data-grid/src/locales/nbNO.ts b/packages/x-data-grid/src/locales/nbNO.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/nbNO.ts rename to packages/x-data-grid/src/locales/nbNO.ts diff --git a/packages/grid/x-data-grid/src/locales/nlNL.ts b/packages/x-data-grid/src/locales/nlNL.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/nlNL.ts rename to packages/x-data-grid/src/locales/nlNL.ts diff --git a/packages/grid/x-data-grid/src/locales/plPL.ts b/packages/x-data-grid/src/locales/plPL.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/plPL.ts rename to packages/x-data-grid/src/locales/plPL.ts diff --git a/packages/grid/x-data-grid/src/locales/ptBR.ts b/packages/x-data-grid/src/locales/ptBR.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/ptBR.ts rename to packages/x-data-grid/src/locales/ptBR.ts diff --git a/packages/grid/x-data-grid/src/locales/ptPT.ts b/packages/x-data-grid/src/locales/ptPT.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/ptPT.ts rename to packages/x-data-grid/src/locales/ptPT.ts diff --git a/packages/grid/x-data-grid/src/locales/roRO.ts b/packages/x-data-grid/src/locales/roRO.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/roRO.ts rename to packages/x-data-grid/src/locales/roRO.ts diff --git a/packages/grid/x-data-grid/src/locales/ruRU.ts b/packages/x-data-grid/src/locales/ruRU.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/ruRU.ts rename to packages/x-data-grid/src/locales/ruRU.ts diff --git a/packages/grid/x-data-grid/src/locales/skSK.ts b/packages/x-data-grid/src/locales/skSK.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/skSK.ts rename to packages/x-data-grid/src/locales/skSK.ts diff --git a/packages/grid/x-data-grid/src/locales/svSE.ts b/packages/x-data-grid/src/locales/svSE.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/svSE.ts rename to packages/x-data-grid/src/locales/svSE.ts diff --git a/packages/grid/x-data-grid/src/locales/trTR.ts b/packages/x-data-grid/src/locales/trTR.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/trTR.ts rename to packages/x-data-grid/src/locales/trTR.ts diff --git a/packages/grid/x-data-grid/src/locales/ukUA.ts b/packages/x-data-grid/src/locales/ukUA.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/ukUA.ts rename to packages/x-data-grid/src/locales/ukUA.ts diff --git a/packages/grid/x-data-grid/src/locales/urPK.ts b/packages/x-data-grid/src/locales/urPK.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/urPK.ts rename to packages/x-data-grid/src/locales/urPK.ts diff --git a/packages/grid/x-data-grid/src/locales/viVN.ts b/packages/x-data-grid/src/locales/viVN.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/viVN.ts rename to packages/x-data-grid/src/locales/viVN.ts diff --git a/packages/grid/x-data-grid/src/locales/zhCN.ts b/packages/x-data-grid/src/locales/zhCN.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/zhCN.ts rename to packages/x-data-grid/src/locales/zhCN.ts diff --git a/packages/grid/x-data-grid/src/locales/zhHK.ts b/packages/x-data-grid/src/locales/zhHK.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/zhHK.ts rename to packages/x-data-grid/src/locales/zhHK.ts diff --git a/packages/grid/x-data-grid/src/locales/zhTW.ts b/packages/x-data-grid/src/locales/zhTW.ts similarity index 100% rename from packages/grid/x-data-grid/src/locales/zhTW.ts rename to packages/x-data-grid/src/locales/zhTW.ts diff --git a/packages/grid/x-data-grid/src/material/components/MUISelectOption.tsx b/packages/x-data-grid/src/material/components/MUISelectOption.tsx similarity index 100% rename from packages/grid/x-data-grid/src/material/components/MUISelectOption.tsx rename to packages/x-data-grid/src/material/components/MUISelectOption.tsx diff --git a/packages/grid/x-data-grid/src/material/icons/GridColumnUnsortedIcon.tsx b/packages/x-data-grid/src/material/icons/GridColumnUnsortedIcon.tsx similarity index 100% rename from packages/grid/x-data-grid/src/material/icons/GridColumnUnsortedIcon.tsx rename to packages/x-data-grid/src/material/icons/GridColumnUnsortedIcon.tsx diff --git a/packages/grid/x-data-grid/src/material/icons/index.tsx b/packages/x-data-grid/src/material/icons/index.tsx similarity index 100% rename from packages/grid/x-data-grid/src/material/icons/index.tsx rename to packages/x-data-grid/src/material/icons/index.tsx diff --git a/packages/grid/x-data-grid/src/material/index.ts b/packages/x-data-grid/src/material/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/material/index.ts rename to packages/x-data-grid/src/material/index.ts diff --git a/packages/grid/x-data-grid/src/models/api/gridApiCommon.ts b/packages/x-data-grid/src/models/api/gridApiCommon.ts similarity index 98% rename from packages/grid/x-data-grid/src/models/api/gridApiCommon.ts rename to packages/x-data-grid/src/models/api/gridApiCommon.ts index 091732aeb64fb..fc87a36a4d8b6 100644 --- a/packages/grid/x-data-grid/src/models/api/gridApiCommon.ts +++ b/packages/x-data-grid/src/models/api/gridApiCommon.ts @@ -4,7 +4,7 @@ import { GridCoreApi, GridCorePrivateApi } from './gridCoreApi'; import { GridCsvExportApi } from './gridCsvExportApi'; import { GridDensityApi } from './gridDensityApi'; import { GridEditingApi, GridEditingPrivateApi } from './gridEditingApi'; -import { GridFilterApi } from './gridFilterApi'; +import type { GridFilterApi } from './gridFilterApi'; import { GridFocusApi, GridFocusPrivateApi } from './gridFocusApi'; import { GridLocaleTextApi } from './gridLocaleTextApi'; import type { GridParamsApi } from './gridParamsApi'; diff --git a/packages/grid/x-data-grid/src/models/api/gridApiCommunity.ts b/packages/x-data-grid/src/models/api/gridApiCommunity.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/api/gridApiCommunity.ts rename to packages/x-data-grid/src/models/api/gridApiCommunity.ts diff --git a/packages/grid/x-data-grid/src/models/api/gridCallbackDetails.ts b/packages/x-data-grid/src/models/api/gridCallbackDetails.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/api/gridCallbackDetails.ts rename to packages/x-data-grid/src/models/api/gridCallbackDetails.ts diff --git a/packages/grid/x-data-grid/src/models/api/gridColumnApi.ts b/packages/x-data-grid/src/models/api/gridColumnApi.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/api/gridColumnApi.ts rename to packages/x-data-grid/src/models/api/gridColumnApi.ts diff --git a/packages/grid/x-data-grid/src/models/api/gridColumnGroupingApi.ts b/packages/x-data-grid/src/models/api/gridColumnGroupingApi.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/api/gridColumnGroupingApi.ts rename to packages/x-data-grid/src/models/api/gridColumnGroupingApi.ts diff --git a/packages/grid/x-data-grid/src/models/api/gridColumnMenuApi.ts b/packages/x-data-grid/src/models/api/gridColumnMenuApi.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/api/gridColumnMenuApi.ts rename to packages/x-data-grid/src/models/api/gridColumnMenuApi.ts diff --git a/packages/grid/x-data-grid/src/models/api/gridColumnSpanning.ts b/packages/x-data-grid/src/models/api/gridColumnSpanning.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/api/gridColumnSpanning.ts rename to packages/x-data-grid/src/models/api/gridColumnSpanning.ts diff --git a/packages/grid/x-data-grid/src/models/api/gridCoreApi.ts b/packages/x-data-grid/src/models/api/gridCoreApi.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/api/gridCoreApi.ts rename to packages/x-data-grid/src/models/api/gridCoreApi.ts diff --git a/packages/grid/x-data-grid/src/models/api/gridCsvExportApi.ts b/packages/x-data-grid/src/models/api/gridCsvExportApi.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/api/gridCsvExportApi.ts rename to packages/x-data-grid/src/models/api/gridCsvExportApi.ts diff --git a/packages/grid/x-data-grid/src/models/api/gridDensityApi.ts b/packages/x-data-grid/src/models/api/gridDensityApi.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/api/gridDensityApi.ts rename to packages/x-data-grid/src/models/api/gridDensityApi.ts diff --git a/packages/grid/x-data-grid/src/models/api/gridEditingApi.ts b/packages/x-data-grid/src/models/api/gridEditingApi.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/api/gridEditingApi.ts rename to packages/x-data-grid/src/models/api/gridEditingApi.ts diff --git a/packages/grid/x-data-grid/src/models/api/gridFilterApi.ts b/packages/x-data-grid/src/models/api/gridFilterApi.ts similarity index 96% rename from packages/grid/x-data-grid/src/models/api/gridFilterApi.ts rename to packages/x-data-grid/src/models/api/gridFilterApi.ts index 16f3b6194f991..d1c3ceadadc35 100644 --- a/packages/grid/x-data-grid/src/models/api/gridFilterApi.ts +++ b/packages/x-data-grid/src/models/api/gridFilterApi.ts @@ -1,7 +1,7 @@ import { GridFilterModel } from '../gridFilterModel'; import { GridFilterItem, GridLogicOperator } from '../gridFilterItem'; import { GridControlledStateReasonLookup } from '../events'; -import { DataGridProcessedProps } from '../props/DataGridProps'; +import type { DataGridProcessedProps } from '../props/DataGridProps'; /** * The filter API interface that is available in the grid [[apiRef]]. diff --git a/packages/grid/x-data-grid/src/models/api/gridFocusApi.ts b/packages/x-data-grid/src/models/api/gridFocusApi.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/api/gridFocusApi.ts rename to packages/x-data-grid/src/models/api/gridFocusApi.ts diff --git a/packages/grid/x-data-grid/src/models/api/gridHeaderFilteringApi.ts b/packages/x-data-grid/src/models/api/gridHeaderFilteringApi.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/api/gridHeaderFilteringApi.ts rename to packages/x-data-grid/src/models/api/gridHeaderFilteringApi.ts diff --git a/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts b/packages/x-data-grid/src/models/api/gridLocaleTextApi.ts similarity index 97% rename from packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts rename to packages/x-data-grid/src/models/api/gridLocaleTextApi.ts index c77fe2f388f9a..b25858988c0a4 100644 --- a/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts +++ b/packages/x-data-grid/src/models/api/gridLocaleTextApi.ts @@ -41,9 +41,9 @@ export interface GridLocaleText { toolbarExportExcel: string; // Columns management text - columnsManagementSearchTitle: React.ReactNode; - columnsManagementNoColumns: React.ReactNode; - columnsManagementShowHideAllText: React.ReactNode; + columnsManagementSearchTitle: string; + columnsManagementNoColumns: string; + columnsManagementShowHideAllText: string; // Filter panel text filterPanelAddFilter: React.ReactNode; diff --git a/packages/grid/x-data-grid/src/models/api/gridLoggerApi.ts b/packages/x-data-grid/src/models/api/gridLoggerApi.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/api/gridLoggerApi.ts rename to packages/x-data-grid/src/models/api/gridLoggerApi.ts diff --git a/packages/grid/x-data-grid/src/models/api/gridParamsApi.ts b/packages/x-data-grid/src/models/api/gridParamsApi.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/api/gridParamsApi.ts rename to packages/x-data-grid/src/models/api/gridParamsApi.ts diff --git a/packages/grid/x-data-grid/src/models/api/gridPreferencesPanelApi.ts b/packages/x-data-grid/src/models/api/gridPreferencesPanelApi.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/api/gridPreferencesPanelApi.ts rename to packages/x-data-grid/src/models/api/gridPreferencesPanelApi.ts diff --git a/packages/grid/x-data-grid/src/models/api/gridPrintExportApi.ts b/packages/x-data-grid/src/models/api/gridPrintExportApi.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/api/gridPrintExportApi.ts rename to packages/x-data-grid/src/models/api/gridPrintExportApi.ts diff --git a/packages/grid/x-data-grid/src/models/api/gridRowApi.ts b/packages/x-data-grid/src/models/api/gridRowApi.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/api/gridRowApi.ts rename to packages/x-data-grid/src/models/api/gridRowApi.ts diff --git a/packages/grid/x-data-grid/src/models/api/gridRowSelectionApi.ts b/packages/x-data-grid/src/models/api/gridRowSelectionApi.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/api/gridRowSelectionApi.ts rename to packages/x-data-grid/src/models/api/gridRowSelectionApi.ts diff --git a/packages/grid/x-data-grid/src/models/api/gridRowsMetaApi.ts b/packages/x-data-grid/src/models/api/gridRowsMetaApi.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/api/gridRowsMetaApi.ts rename to packages/x-data-grid/src/models/api/gridRowsMetaApi.ts diff --git a/packages/grid/x-data-grid/src/models/api/gridScrollApi.ts b/packages/x-data-grid/src/models/api/gridScrollApi.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/api/gridScrollApi.ts rename to packages/x-data-grid/src/models/api/gridScrollApi.ts diff --git a/packages/grid/x-data-grid/src/models/api/gridSortApi.ts b/packages/x-data-grid/src/models/api/gridSortApi.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/api/gridSortApi.ts rename to packages/x-data-grid/src/models/api/gridSortApi.ts diff --git a/packages/grid/x-data-grid/src/models/api/gridStateApi.ts b/packages/x-data-grid/src/models/api/gridStateApi.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/api/gridStateApi.ts rename to packages/x-data-grid/src/models/api/gridStateApi.ts diff --git a/packages/grid/x-data-grid/src/models/api/gridVirtualizationApi.ts b/packages/x-data-grid/src/models/api/gridVirtualizationApi.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/api/gridVirtualizationApi.ts rename to packages/x-data-grid/src/models/api/gridVirtualizationApi.ts diff --git a/packages/grid/x-data-grid/src/models/api/index.ts b/packages/x-data-grid/src/models/api/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/api/index.ts rename to packages/x-data-grid/src/models/api/index.ts diff --git a/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts b/packages/x-data-grid/src/models/colDef/gridColDef.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/colDef/gridColDef.ts rename to packages/x-data-grid/src/models/colDef/gridColDef.ts diff --git a/packages/grid/x-data-grid/src/models/colDef/gridColType.ts b/packages/x-data-grid/src/models/colDef/gridColType.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/colDef/gridColType.ts rename to packages/x-data-grid/src/models/colDef/gridColType.ts diff --git a/packages/grid/x-data-grid/src/models/colDef/gridColumnTypesRecord.ts b/packages/x-data-grid/src/models/colDef/gridColumnTypesRecord.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/colDef/gridColumnTypesRecord.ts rename to packages/x-data-grid/src/models/colDef/gridColumnTypesRecord.ts diff --git a/packages/grid/x-data-grid/src/models/colDef/index.ts b/packages/x-data-grid/src/models/colDef/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/colDef/index.ts rename to packages/x-data-grid/src/models/colDef/index.ts diff --git a/packages/grid/x-data-grid/src/models/controlStateItem.ts b/packages/x-data-grid/src/models/controlStateItem.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/controlStateItem.ts rename to packages/x-data-grid/src/models/controlStateItem.ts diff --git a/packages/grid/x-data-grid/src/models/cursorCoordinates.ts b/packages/x-data-grid/src/models/cursorCoordinates.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/cursorCoordinates.ts rename to packages/x-data-grid/src/models/cursorCoordinates.ts diff --git a/packages/grid/x-data-grid/src/models/elementSize.ts b/packages/x-data-grid/src/models/elementSize.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/elementSize.ts rename to packages/x-data-grid/src/models/elementSize.ts diff --git a/packages/grid/x-data-grid/src/models/events/gridEventListener.ts b/packages/x-data-grid/src/models/events/gridEventListener.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/events/gridEventListener.ts rename to packages/x-data-grid/src/models/events/gridEventListener.ts diff --git a/packages/grid/x-data-grid/src/models/events/gridEventLookup.ts b/packages/x-data-grid/src/models/events/gridEventLookup.ts similarity index 99% rename from packages/grid/x-data-grid/src/models/events/gridEventLookup.ts rename to packages/x-data-grid/src/models/events/gridEventLookup.ts index 9b26b4a944de8..7a107f4c7cf1c 100644 --- a/packages/grid/x-data-grid/src/models/events/gridEventLookup.ts +++ b/packages/x-data-grid/src/models/events/gridEventLookup.ts @@ -366,7 +366,8 @@ export interface GridControlledStateReasonLookup { | 'upsertFilterItems' | 'deleteFilterItem' | 'changeLogicOperator' - | 'restoreState'; + | 'restoreState' + | 'removeAllFilterItems'; pagination: 'setPaginationModel' | 'stateRestorePreProcessing'; } diff --git a/packages/grid/x-data-grid/src/models/events/gridEventPublisher.ts b/packages/x-data-grid/src/models/events/gridEventPublisher.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/events/gridEventPublisher.ts rename to packages/x-data-grid/src/models/events/gridEventPublisher.ts diff --git a/packages/grid/x-data-grid/src/models/events/index.ts b/packages/x-data-grid/src/models/events/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/events/index.ts rename to packages/x-data-grid/src/models/events/index.ts diff --git a/packages/grid/x-data-grid/src/models/gridApiCaches.ts b/packages/x-data-grid/src/models/gridApiCaches.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/gridApiCaches.ts rename to packages/x-data-grid/src/models/gridApiCaches.ts diff --git a/packages/grid/x-data-grid/src/models/gridCell.ts b/packages/x-data-grid/src/models/gridCell.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/gridCell.ts rename to packages/x-data-grid/src/models/gridCell.ts diff --git a/packages/grid/x-data-grid/src/models/gridCellClass.ts b/packages/x-data-grid/src/models/gridCellClass.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/gridCellClass.ts rename to packages/x-data-grid/src/models/gridCellClass.ts diff --git a/packages/grid/x-data-grid/src/models/gridColumnGrouping.ts b/packages/x-data-grid/src/models/gridColumnGrouping.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/gridColumnGrouping.ts rename to packages/x-data-grid/src/models/gridColumnGrouping.ts diff --git a/packages/grid/x-data-grid/src/models/gridColumnHeaderClass.ts b/packages/x-data-grid/src/models/gridColumnHeaderClass.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/gridColumnHeaderClass.ts rename to packages/x-data-grid/src/models/gridColumnHeaderClass.ts diff --git a/packages/grid/x-data-grid/src/models/gridColumnSpanning.ts b/packages/x-data-grid/src/models/gridColumnSpanning.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/gridColumnSpanning.ts rename to packages/x-data-grid/src/models/gridColumnSpanning.ts diff --git a/packages/grid/x-data-grid/src/models/gridDensity.ts b/packages/x-data-grid/src/models/gridDensity.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/gridDensity.ts rename to packages/x-data-grid/src/models/gridDensity.ts diff --git a/packages/grid/x-data-grid/src/models/gridEditRowModel.ts b/packages/x-data-grid/src/models/gridEditRowModel.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/gridEditRowModel.ts rename to packages/x-data-grid/src/models/gridEditRowModel.ts diff --git a/packages/grid/x-data-grid/src/models/gridExport.ts b/packages/x-data-grid/src/models/gridExport.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/gridExport.ts rename to packages/x-data-grid/src/models/gridExport.ts diff --git a/packages/grid/x-data-grid/src/models/gridFeatureMode.ts b/packages/x-data-grid/src/models/gridFeatureMode.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/gridFeatureMode.ts rename to packages/x-data-grid/src/models/gridFeatureMode.ts diff --git a/packages/grid/x-data-grid/src/models/gridFilterItem.ts b/packages/x-data-grid/src/models/gridFilterItem.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/gridFilterItem.ts rename to packages/x-data-grid/src/models/gridFilterItem.ts diff --git a/packages/grid/x-data-grid/src/models/gridFilterModel.ts b/packages/x-data-grid/src/models/gridFilterModel.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/gridFilterModel.ts rename to packages/x-data-grid/src/models/gridFilterModel.ts diff --git a/packages/grid/x-data-grid/src/models/gridFilterOperator.ts b/packages/x-data-grid/src/models/gridFilterOperator.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/gridFilterOperator.ts rename to packages/x-data-grid/src/models/gridFilterOperator.ts diff --git a/packages/grid/x-data-grid/src/models/gridHeaderFilteringModel.ts b/packages/x-data-grid/src/models/gridHeaderFilteringModel.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/gridHeaderFilteringModel.ts rename to packages/x-data-grid/src/models/gridHeaderFilteringModel.ts diff --git a/packages/grid/x-data-grid/src/models/gridIconSlotsComponent.ts b/packages/x-data-grid/src/models/gridIconSlotsComponent.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/gridIconSlotsComponent.ts rename to packages/x-data-grid/src/models/gridIconSlotsComponent.ts diff --git a/packages/grid/x-data-grid/src/models/gridPaginationProps.ts b/packages/x-data-grid/src/models/gridPaginationProps.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/gridPaginationProps.ts rename to packages/x-data-grid/src/models/gridPaginationProps.ts diff --git a/packages/grid/x-data-grid/src/models/gridRenderContextProps.ts b/packages/x-data-grid/src/models/gridRenderContextProps.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/gridRenderContextProps.ts rename to packages/x-data-grid/src/models/gridRenderContextProps.ts diff --git a/packages/grid/x-data-grid/src/models/gridRowSelectionModel.ts b/packages/x-data-grid/src/models/gridRowSelectionModel.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/gridRowSelectionModel.ts rename to packages/x-data-grid/src/models/gridRowSelectionModel.ts diff --git a/packages/grid/x-data-grid/src/models/gridRows.ts b/packages/x-data-grid/src/models/gridRows.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/gridRows.ts rename to packages/x-data-grid/src/models/gridRows.ts diff --git a/packages/grid/x-data-grid/src/models/gridSlotsComponent.ts b/packages/x-data-grid/src/models/gridSlotsComponent.ts similarity index 58% rename from packages/grid/x-data-grid/src/models/gridSlotsComponent.ts rename to packages/x-data-grid/src/models/gridSlotsComponent.ts index 2fec34e839a47..aedf8ceb29a95 100644 --- a/packages/grid/x-data-grid/src/models/gridSlotsComponent.ts +++ b/packages/x-data-grid/src/models/gridSlotsComponent.ts @@ -1,77 +1,75 @@ import * as React from 'react'; +import type { GridSlotProps } from './gridSlotsComponentsProps'; import type { GridIconSlotsComponent } from './gridIconSlotsComponent'; -import type { GridRowProps } from '../components/GridRow'; -import type { GridDetailPanelsProps } from '../components/GridDetailPanels'; -import type { GridPinnedRowsProps } from '../components/GridPinnedRows'; -import type { GridColumnHeadersProps } from '../components/GridColumnHeaders'; -// TODO: Convert all `any` to `Props & PropsOverrides` +export type { GridSlotProps } from './gridSlotsComponentsProps'; + export interface GridBaseSlots { /** * The custom Checkbox component used in the grid for both header and cells. * @default Checkbox */ - baseCheckbox: React.JSXElementConstructor; + baseCheckbox: React.JSXElementConstructor; /** * The custom Chip component used in the grid. * @default Chip */ - baseChip: React.JSXElementConstructor; + baseChip: React.JSXElementConstructor; /** * The custom InputAdornment component used in the grid. * @default InputAdornment */ - baseInputAdornment: React.JSXElementConstructor; + baseInputAdornment: React.JSXElementConstructor; /** * The custom TextField component used in the grid. * @default TextField */ - baseTextField: React.JSXElementConstructor; + baseTextField: React.JSXElementConstructor; /** * The custom FormControl component used in the grid. * @default FormControl */ - baseFormControl: React.JSXElementConstructor; + baseFormControl: React.JSXElementConstructor; /** * The custom Select component used in the grid. * @default Select */ - baseSelect: React.JSXElementConstructor; + baseSelect: React.JSXElementConstructor; /** * The custom Switch component used in the grid. * @default Switch */ - baseSwitch: React.JSXElementConstructor; + baseSwitch: React.JSXElementConstructor; /** * The custom Button component used in the grid. * @default Button */ - baseButton: React.JSXElementConstructor; + baseButton: React.JSXElementConstructor; /** * The custom IconButton component used in the grid. * @default IconButton */ - baseIconButton: React.JSXElementConstructor; + baseIconButton: React.JSXElementConstructor; /** * The custom Tooltip component used in the grid. * @default Tooltip */ - baseTooltip: React.JSXElementConstructor; + baseTooltip: React.JSXElementConstructor; /** * The custom Popper component used in the grid. * @default Popper */ - basePopper: React.JSXElementConstructor; + basePopper: React.JSXElementConstructor; /** * The custom InputLabel component used in the grid. * @default InputLabel */ - baseInputLabel: React.JSXElementConstructor; + baseInputLabel: React.JSXElementConstructor; /** * The custom SelectOption component used in the grid. * @default MenuItem */ - baseSelectOption: React.JSXElementConstructor; + baseSelectOption: React.JSXElementConstructor; } /** @@ -82,87 +80,89 @@ export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponen * The custom Chip component used in the grid. * @default Chip */ - baseChip: React.JSXElementConstructor; + baseChip: React.JSXElementConstructor; /** * Component rendered for each cell. * @default GridCell */ - cell: React.JSXElementConstructor; + cell: React.JSXElementConstructor; /** * Component rendered for each skeleton cell. * @default GridSkeletonCell */ - skeletonCell: React.JSXElementConstructor; + skeletonCell: React.JSXElementConstructor; /** * Filter icon component rendered in each column header. * @default GridColumnHeaderFilterIconButton */ - columnHeaderFilterIconButton: React.JSXElementConstructor; + columnHeaderFilterIconButton: React.JSXElementConstructor< + GridSlotProps['columnHeaderFilterIconButton'] + >; /** * Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers. * @default GridColumnMenu */ - columnMenu: React.JSXElementConstructor; + columnMenu: React.JSXElementConstructor; /** * Component responsible for rendering the column headers. * @default DataGridColumnHeaders */ - columnHeaders: React.JSXElementConstructor; + columnHeaders: React.JSXElementConstructor; /** * Component responsible for rendering the detail panels. * @default GridDetailPanels */ - detailPanels: React.JSXElementConstructor; + detailPanels: React.JSXElementConstructor; /** * Footer component rendered at the bottom of the grid viewport. * @default GridFooter */ - footer: React.JSXElementConstructor; + footer: React.JSXElementConstructor; /** * Row count component rendered in the footer * @default GridRowCount */ - footerRowCount: React.JSXElementConstructor; + footerRowCount: React.JSXElementConstructor; /** * Toolbar component rendered inside the Header component. * @default null */ - toolbar: React.JSXElementConstructor | null; + toolbar: React.JSXElementConstructor | null; /** * Pinned rows container. * @ignore - do not document */ - pinnedRows: React.JSXElementConstructor; + pinnedRows: React.JSXElementConstructor; /** * Loading overlay component rendered when the grid is in a loading state. * @default GridLoadingOverlay */ - loadingOverlay: React.JSXElementConstructor; + loadingOverlay: React.JSXElementConstructor; /** * No results overlay component rendered when the grid has no results after filtering. * @default GridNoResultsOverlay */ - noResultsOverlay: React.JSXElementConstructor; + noResultsOverlay: React.JSXElementConstructor; /** * No rows overlay component rendered when the grid has no rows. * @default GridNoRowsOverlay */ - noRowsOverlay: React.JSXElementConstructor; + noRowsOverlay: React.JSXElementConstructor; /** * Pagination component rendered in the grid footer by default. * @default Pagination */ - pagination: React.JSXElementConstructor | null; + pagination: React.JSXElementConstructor | null; /** * Filter panel component rendered when clicking the filter button. * @default GridFilterPanel */ - filterPanel: React.JSXElementConstructor; + filterPanel: React.JSXElementConstructor; /** * GridColumns panel component rendered when clicking the columns button. * @default GridColumnsPanel */ - columnsPanel: React.JSXElementConstructor; + columnsPanel: React.JSXElementConstructor; /** * Component used inside Grid Columns panel to manage columns. * @default GridColumnsManagement @@ -172,10 +172,10 @@ export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponen * Panel component wrapping the filters and columns panels. * @default GridPanel */ - panel: React.JSXElementConstructor; + panel: React.JSXElementConstructor; /** * Component rendered for each row. * @default GridRow */ - row: React.JSXElementConstructor; + row: React.JSXElementConstructor; } diff --git a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts new file mode 100644 index 0000000000000..6623ae5d4483e --- /dev/null +++ b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts @@ -0,0 +1,110 @@ +import * as React from 'react'; +import type { CheckboxProps } from '@mui/material/Checkbox'; +import type { TextFieldProps } from '@mui/material/TextField'; +import type { FormControlProps } from '@mui/material/FormControl'; +import type { SelectProps } from '@mui/material/Select'; +import type { SwitchProps } from '@mui/material/Switch'; +import type { ButtonProps } from '@mui/material/Button'; +import type { IconButtonProps } from '@mui/material/IconButton'; +import type { InputAdornmentProps } from '@mui/material/InputAdornment'; +import type { TooltipProps } from '@mui/material/Tooltip'; +import type { InputLabelProps } from '@mui/material/InputLabel'; +import type { PopperProps } from '@mui/material/Popper'; +import type { TablePaginationProps } from '@mui/material/TablePagination'; +import type { ChipProps } from '@mui/material/Chip'; +import type { GridToolbarProps } from '../components/toolbar/GridToolbar'; +import type { ColumnHeaderFilterIconButtonProps } from '../components/columnHeaders/GridColumnHeaderFilterIconButton'; +import type { GridColumnMenuProps } from '../components/menu/columnMenu/GridColumnMenuProps'; +import type { GridColumnsPanelProps } from '../components/panel/GridColumnsPanel'; +import type { GridFilterPanelProps } from '../components/panel/filterPanel/GridFilterPanel'; +import type { GridFooterContainerProps } from '../components/containers/GridFooterContainer'; +import type { GridOverlayProps } from '../components/containers/GridOverlay'; +import type { GridPanelProps } from '../components/panel/GridPanel'; +import type { GridSkeletonCellProps } from '../components/cell/GridSkeletonCell'; +import type { GridRowProps } from '../components/GridRow'; +import type { GridCellProps } from '../components/cell/GridCell'; +import type { GridColumnHeadersProps } from '../components/GridColumnHeaders'; +import type { GridDetailPanelsProps } from '../components/GridDetailPanels'; +import type { GridPinnedRowsProps } from '../components/GridPinnedRows'; +import type { GridColumnsManagementProps } from '../components/columnsManagement/GridColumnsManagement'; +import type { GridRowCountProps } from '../components'; + +// 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 BaseInputAdornmentPropsOverrides {} +export interface BaseTooltipPropsOverrides {} +export interface BasePopperPropsOverrides {} +export interface BaseInputLabelPropsOverrides {} +export interface BaseSelectOptionPropsOverrides {} +export interface BaseChipPropsOverrides {} +export interface CellPropsOverrides {} +export interface ToolbarPropsOverrides {} +export interface ColumnHeaderFilterIconButtonPropsOverrides {} +export interface ColumnMenuPropsOverrides {} +export interface ColumnsPanelPropsOverrides {} +export interface DetailPanelsPropsOverrides {} +export interface ColumnsManagementPropsOverrides {} +export interface FilterPanelPropsOverrides {} +export interface FooterPropsOverrides {} +export interface FooterRowCountOverrides {} +export interface PaginationPropsOverrides {} +export interface LoadingOverlayPropsOverrides {} +export interface NoResultsOverlayPropsOverrides {} +export interface NoRowsOverlayPropsOverrides {} +export interface PanelPropsOverrides {} +export interface PinnedRowsPropsOverrides {} +export interface SkeletonCellPropsOverrides {} +export interface RowPropsOverrides {} + +export interface GridSlotProps { + baseCheckbox: CheckboxProps & BaseCheckboxPropsOverrides; + baseTextField: TextFieldProps & BaseTextFieldPropsOverrides; + baseFormControl: FormControlProps & BaseFormControlPropsOverrides; + baseSelect: SelectProps & BaseSelectPropsOverrides; + baseSwitch: SwitchProps & BaseSwitchPropsOverrides; + baseButton: ButtonProps & BaseButtonPropsOverrides; + baseIconButton: IconButtonProps & BaseIconButtonPropsOverrides; + basePopper: PopperProps & BasePopperPropsOverrides; + baseTooltip: TooltipProps & BaseTooltipPropsOverrides; + baseInputLabel: InputLabelProps & BaseInputLabelPropsOverrides; + baseInputAdornment: InputAdornmentProps & BaseInputAdornmentPropsOverrides; + baseSelectOption: { + native: boolean; + value: any; + children?: React.ReactNode; + } & BaseSelectOptionPropsOverrides; + baseChip: ChipProps & BaseChipPropsOverrides; + cell: GridCellProps & CellPropsOverrides; + columnHeaders: GridColumnHeadersProps; + columnHeaderFilterIconButton: ColumnHeaderFilterIconButtonProps & + ColumnHeaderFilterIconButtonPropsOverrides; + columnMenu: GridColumnMenuProps & ColumnMenuPropsOverrides; + columnsPanel: GridColumnsPanelProps & ColumnsPanelPropsOverrides; + columnsManagement: GridColumnsManagementProps & ColumnsManagementPropsOverrides; + detailPanels: GridDetailPanelsProps & DetailPanelsPropsOverrides; + filterPanel: GridFilterPanelProps & FilterPanelPropsOverrides; + footer: GridFooterContainerProps & FooterPropsOverrides; + footerRowCount: GridRowCountProps & FooterRowCountOverrides; + loadingOverlay: GridOverlayProps & LoadingOverlayPropsOverrides; + noResultsOverlay: GridOverlayProps & NoResultsOverlayPropsOverrides; + noRowsOverlay: GridOverlayProps & NoRowsOverlayPropsOverrides; + pagination: Partial & PaginationPropsOverrides; + panel: GridPanelProps & PanelPropsOverrides; + pinnedRows: GridPinnedRowsProps & PinnedRowsPropsOverrides; + row: GridRowProps & RowPropsOverrides; + skeletonCell: GridSkeletonCellProps & SkeletonCellPropsOverrides; + toolbar: GridToolbarProps & ToolbarPropsOverrides; +} + +/** + * Overridable components props dynamically passed to the component at rendering. + */ +export type GridSlotsComponentsProps = Partial<{ + [K in keyof GridSlotProps]: Partial; +}>; diff --git a/packages/grid/x-data-grid/src/models/gridSortModel.ts b/packages/x-data-grid/src/models/gridSortModel.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/gridSortModel.ts rename to packages/x-data-grid/src/models/gridSortModel.ts diff --git a/packages/grid/x-data-grid/src/models/gridStateCommunity.ts b/packages/x-data-grid/src/models/gridStateCommunity.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/gridStateCommunity.ts rename to packages/x-data-grid/src/models/gridStateCommunity.ts diff --git a/packages/grid/x-data-grid/src/models/index.ts b/packages/x-data-grid/src/models/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/index.ts rename to packages/x-data-grid/src/models/index.ts diff --git a/packages/grid/x-data-grid/src/models/logger.ts b/packages/x-data-grid/src/models/logger.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/logger.ts rename to packages/x-data-grid/src/models/logger.ts diff --git a/packages/grid/x-data-grid/src/models/muiEvent.ts b/packages/x-data-grid/src/models/muiEvent.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/muiEvent.ts rename to packages/x-data-grid/src/models/muiEvent.ts diff --git a/packages/grid/x-data-grid/src/models/params/gridCellParams.ts b/packages/x-data-grid/src/models/params/gridCellParams.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/params/gridCellParams.ts rename to packages/x-data-grid/src/models/params/gridCellParams.ts diff --git a/packages/grid/x-data-grid/src/models/params/gridColumnGroupHeaderParams.ts b/packages/x-data-grid/src/models/params/gridColumnGroupHeaderParams.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/params/gridColumnGroupHeaderParams.ts rename to packages/x-data-grid/src/models/params/gridColumnGroupHeaderParams.ts diff --git a/packages/grid/x-data-grid/src/models/params/gridColumnHeaderParams.ts b/packages/x-data-grid/src/models/params/gridColumnHeaderParams.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/params/gridColumnHeaderParams.ts rename to packages/x-data-grid/src/models/params/gridColumnHeaderParams.ts diff --git a/packages/grid/x-data-grid/src/models/params/gridColumnOrderChangeParams.ts b/packages/x-data-grid/src/models/params/gridColumnOrderChangeParams.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/params/gridColumnOrderChangeParams.ts rename to packages/x-data-grid/src/models/params/gridColumnOrderChangeParams.ts diff --git a/packages/grid/x-data-grid/src/models/params/gridColumnResizeParams.ts b/packages/x-data-grid/src/models/params/gridColumnResizeParams.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/params/gridColumnResizeParams.ts rename to packages/x-data-grid/src/models/params/gridColumnResizeParams.ts diff --git a/packages/grid/x-data-grid/src/models/params/gridEditCellParams.ts b/packages/x-data-grid/src/models/params/gridEditCellParams.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/params/gridEditCellParams.ts rename to packages/x-data-grid/src/models/params/gridEditCellParams.ts diff --git a/packages/grid/x-data-grid/src/models/params/gridHeaderSelectionCheckboxParams.ts b/packages/x-data-grid/src/models/params/gridHeaderSelectionCheckboxParams.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/params/gridHeaderSelectionCheckboxParams.ts rename to packages/x-data-grid/src/models/params/gridHeaderSelectionCheckboxParams.ts diff --git a/packages/grid/x-data-grid/src/models/params/gridMenuParams.ts b/packages/x-data-grid/src/models/params/gridMenuParams.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/params/gridMenuParams.ts rename to packages/x-data-grid/src/models/params/gridMenuParams.ts diff --git a/packages/grid/x-data-grid/src/models/params/gridPreferencePanelParams.ts b/packages/x-data-grid/src/models/params/gridPreferencePanelParams.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/params/gridPreferencePanelParams.ts rename to packages/x-data-grid/src/models/params/gridPreferencePanelParams.ts diff --git a/packages/grid/x-data-grid/src/models/params/gridRowParams.ts b/packages/x-data-grid/src/models/params/gridRowParams.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/params/gridRowParams.ts rename to packages/x-data-grid/src/models/params/gridRowParams.ts diff --git a/packages/grid/x-data-grid/src/models/params/gridRowSelectionCheckboxParams.ts b/packages/x-data-grid/src/models/params/gridRowSelectionCheckboxParams.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/params/gridRowSelectionCheckboxParams.ts rename to packages/x-data-grid/src/models/params/gridRowSelectionCheckboxParams.ts diff --git a/packages/grid/x-data-grid/src/models/params/gridScrollParams.ts b/packages/x-data-grid/src/models/params/gridScrollParams.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/params/gridScrollParams.ts rename to packages/x-data-grid/src/models/params/gridScrollParams.ts diff --git a/packages/grid/x-data-grid/src/models/params/gridValueOptionsParams.ts b/packages/x-data-grid/src/models/params/gridValueOptionsParams.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/params/gridValueOptionsParams.ts rename to packages/x-data-grid/src/models/params/gridValueOptionsParams.ts diff --git a/packages/grid/x-data-grid/src/models/params/index.ts b/packages/x-data-grid/src/models/params/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/models/params/index.ts rename to packages/x-data-grid/src/models/params/index.ts diff --git a/packages/grid/x-data-grid/src/models/props/DataGridProps.ts b/packages/x-data-grid/src/models/props/DataGridProps.ts similarity index 99% rename from packages/grid/x-data-grid/src/models/props/DataGridProps.ts rename to packages/x-data-grid/src/models/props/DataGridProps.ts index f764a112aeb5c..01cb8bcd8e1bf 100644 --- a/packages/grid/x-data-grid/src/models/props/DataGridProps.ts +++ b/packages/x-data-grid/src/models/props/DataGridProps.ts @@ -94,7 +94,7 @@ export interface DataGridPropsWithComplexDefaultValueBeforeProcessing { slots?: Partial; /** * Set the locale text of the Data Grid. - * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/grid/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository. + * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository. */ localeText?: Partial; } @@ -299,7 +299,7 @@ export interface DataGridPropsWithDefaultValues { * Select the pageSize dynamically using the component UI. * @default [25, 50, 100] */ - pageSizeOptions: Array; + pageSizeOptions: ReadonlyArray; /** * Sets the type of space between rows added by `getRowSpacing`. * @default "margin" diff --git a/packages/grid/x-data-grid/src/tests/DataGrid.spec.tsx b/packages/x-data-grid/src/tests/DataGrid.spec.tsx similarity index 100% rename from packages/grid/x-data-grid/src/tests/DataGrid.spec.tsx rename to packages/x-data-grid/src/tests/DataGrid.spec.tsx diff --git a/packages/grid/x-data-grid/src/tests/DataGrid.test.tsx b/packages/x-data-grid/src/tests/DataGrid.test.tsx similarity index 100% rename from packages/grid/x-data-grid/src/tests/DataGrid.test.tsx rename to packages/x-data-grid/src/tests/DataGrid.test.tsx diff --git a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx b/packages/x-data-grid/src/tests/cells.DataGrid.test.tsx similarity index 100% rename from packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx rename to packages/x-data-grid/src/tests/cells.DataGrid.test.tsx diff --git a/packages/grid/x-data-grid/src/tests/columnGrouping.DataGrid.test.tsx b/packages/x-data-grid/src/tests/columnGrouping.DataGrid.test.tsx similarity index 100% rename from packages/grid/x-data-grid/src/tests/columnGrouping.DataGrid.test.tsx rename to packages/x-data-grid/src/tests/columnGrouping.DataGrid.test.tsx diff --git a/packages/grid/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx b/packages/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx similarity index 100% rename from packages/grid/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx rename to packages/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx diff --git a/packages/grid/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx b/packages/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx similarity index 100% rename from packages/grid/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx rename to packages/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx diff --git a/packages/grid/x-data-grid/src/tests/columns.DataGrid.test.tsx b/packages/x-data-grid/src/tests/columns.DataGrid.test.tsx similarity index 100% rename from packages/grid/x-data-grid/src/tests/columns.DataGrid.test.tsx rename to packages/x-data-grid/src/tests/columns.DataGrid.test.tsx diff --git a/packages/grid/x-data-grid/src/tests/columns.spec.tsx b/packages/x-data-grid/src/tests/columns.spec.tsx similarity index 100% rename from packages/grid/x-data-grid/src/tests/columns.spec.tsx rename to packages/x-data-grid/src/tests/columns.spec.tsx diff --git a/packages/grid/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx b/packages/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx similarity index 100% rename from packages/grid/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx rename to packages/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx diff --git a/packages/grid/x-data-grid/src/tests/export.DataGrid.test.tsx b/packages/x-data-grid/src/tests/export.DataGrid.test.tsx similarity index 100% rename from packages/grid/x-data-grid/src/tests/export.DataGrid.test.tsx rename to packages/x-data-grid/src/tests/export.DataGrid.test.tsx diff --git a/packages/grid/x-data-grid/src/tests/filterPanel.DataGrid.test.tsx b/packages/x-data-grid/src/tests/filterPanel.DataGrid.test.tsx similarity index 100% rename from packages/grid/x-data-grid/src/tests/filterPanel.DataGrid.test.tsx rename to packages/x-data-grid/src/tests/filterPanel.DataGrid.test.tsx diff --git a/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx b/packages/x-data-grid/src/tests/filtering.DataGrid.test.tsx similarity index 99% rename from packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx rename to packages/x-data-grid/src/tests/filtering.DataGrid.test.tsx index c69bb7331eca5..1c0e44a39cbf9 100644 --- a/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/filtering.DataGrid.test.tsx @@ -8,6 +8,7 @@ import { GridColDef, GridFilterItem, GridPreferencePanelsValue, + GridSlots, GridToolbar, GridFilterOperator, } from '@mui/x-data-grid'; @@ -1305,7 +1306,7 @@ describe(' - Filter', () => { type: 'number', }, ]} - slots={{ toolbar: GridToolbarFilterButton }} + slots={{ toolbar: GridToolbarFilterButton as GridSlots['toolbar'] }} />, ); @@ -1369,7 +1370,7 @@ describe(' - Filter', () => { ] as GridFilterOperator[], }, ]} - slots={{ toolbar: GridToolbarFilterButton }} + slots={{ toolbar: GridToolbarFilterButton as GridSlots['toolbar'] }} />
, ); diff --git a/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx b/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx similarity index 100% rename from packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx rename to packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx diff --git a/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx b/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx similarity index 100% rename from packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx rename to packages/x-data-grid/src/tests/layout.DataGrid.test.tsx diff --git a/packages/grid/x-data-grid/src/tests/localization.DataGrid.spec.tsx b/packages/x-data-grid/src/tests/localization.DataGrid.spec.tsx similarity index 100% rename from packages/grid/x-data-grid/src/tests/localization.DataGrid.spec.tsx rename to packages/x-data-grid/src/tests/localization.DataGrid.spec.tsx diff --git a/packages/grid/x-data-grid/src/tests/pagination.DataGrid.test.tsx b/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx similarity index 97% rename from packages/grid/x-data-grid/src/tests/pagination.DataGrid.test.tsx rename to packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx index 5c459de5c771d..5b1d400a09503 100644 --- a/packages/grid/x-data-grid/src/tests/pagination.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx @@ -685,4 +685,26 @@ describe(' - Pagination', () => { expect(getColumnValues(0)).to.deep.equal(['0', '1', '2', '3', '4']); }); }); + + // See https://github.com/mui/mui-x/issues/11247 + it('should not throw on deleting the last row of a page > 0', () => { + const columns = [{ field: 'name' }]; + const rows = [ + { id: 0, name: 'a' }, + { id: 1, name: 'b' }, + { id: 2, name: 'c' }, + { id: 3, name: 'd' }, + ]; + expect(() => { + const { setProps } = render( + , + ); + setProps({ rows: rows.slice(0, 2) }); + }).not.to.throw(); + }); }); diff --git a/packages/grid/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx b/packages/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx similarity index 100% rename from packages/grid/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx rename to packages/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx diff --git a/packages/grid/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx similarity index 100% rename from packages/grid/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx rename to packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx diff --git a/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx similarity index 99% rename from packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx rename to packages/x-data-grid/src/tests/rows.DataGrid.test.tsx index 3dcb768db66ef..5a26392c02576 100644 --- a/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx @@ -1082,7 +1082,7 @@ describe(' - Rows', () => { { id: 2, brand: 'Pum' }, { id: 3, brand: 'Jordan' }, ]), - ).to.throw(/You can't update several rows at once/); + ).to.throw(/You cannot update several rows at once/); }); it('should allow to update one row at the time', () => { @@ -1117,7 +1117,7 @@ describe(' - Rows', () => { }).toErrorDev( [ 'MUI X: `` are not valid props.', - 'You can not use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', + 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.', ].join('\n'), diff --git a/packages/grid/x-data-grid/src/tests/slots.DataGrid.test.tsx b/packages/x-data-grid/src/tests/slots.DataGrid.test.tsx similarity index 100% rename from packages/grid/x-data-grid/src/tests/slots.DataGrid.test.tsx rename to packages/x-data-grid/src/tests/slots.DataGrid.test.tsx diff --git a/packages/grid/x-data-grid/src/tests/sorting.DataGrid.test.tsx b/packages/x-data-grid/src/tests/sorting.DataGrid.test.tsx similarity index 100% rename from packages/grid/x-data-grid/src/tests/sorting.DataGrid.test.tsx rename to packages/x-data-grid/src/tests/sorting.DataGrid.test.tsx diff --git a/packages/grid/x-data-grid/src/tests/themeAugmentation.spec.ts b/packages/x-data-grid/src/tests/themeAugmentation.spec.ts similarity index 100% rename from packages/grid/x-data-grid/src/tests/themeAugmentation.spec.ts rename to packages/x-data-grid/src/tests/themeAugmentation.spec.ts diff --git a/packages/grid/x-data-grid/src/tests/toolbar.DataGrid.test.tsx b/packages/x-data-grid/src/tests/toolbar.DataGrid.test.tsx similarity index 100% rename from packages/grid/x-data-grid/src/tests/toolbar.DataGrid.test.tsx rename to packages/x-data-grid/src/tests/toolbar.DataGrid.test.tsx diff --git a/packages/grid/x-data-grid/src/themeAugmentation/index.js b/packages/x-data-grid/src/themeAugmentation/index.js similarity index 100% rename from packages/grid/x-data-grid/src/themeAugmentation/index.js rename to packages/x-data-grid/src/themeAugmentation/index.js diff --git a/packages/grid/x-data-grid/src/themeAugmentation/index.ts b/packages/x-data-grid/src/themeAugmentation/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/themeAugmentation/index.ts rename to packages/x-data-grid/src/themeAugmentation/index.ts diff --git a/packages/grid/x-data-grid/src/themeAugmentation/overrides.ts b/packages/x-data-grid/src/themeAugmentation/overrides.ts similarity index 100% rename from packages/grid/x-data-grid/src/themeAugmentation/overrides.ts rename to packages/x-data-grid/src/themeAugmentation/overrides.ts diff --git a/packages/grid/x-data-grid/src/themeAugmentation/props.ts b/packages/x-data-grid/src/themeAugmentation/props.ts similarity index 100% rename from packages/grid/x-data-grid/src/themeAugmentation/props.ts rename to packages/x-data-grid/src/themeAugmentation/props.ts diff --git a/packages/grid/x-data-grid/src/utils/EventManager.test.ts b/packages/x-data-grid/src/utils/EventManager.test.ts similarity index 100% rename from packages/grid/x-data-grid/src/utils/EventManager.test.ts rename to packages/x-data-grid/src/utils/EventManager.test.ts diff --git a/packages/grid/x-data-grid/src/utils/EventManager.ts b/packages/x-data-grid/src/utils/EventManager.ts similarity index 100% rename from packages/grid/x-data-grid/src/utils/EventManager.ts rename to packages/x-data-grid/src/utils/EventManager.ts diff --git a/packages/grid/x-data-grid/src/utils/Store.ts b/packages/x-data-grid/src/utils/Store.ts similarity index 100% rename from packages/grid/x-data-grid/src/utils/Store.ts rename to packages/x-data-grid/src/utils/Store.ts diff --git a/packages/grid/x-data-grid/src/utils/cleanupTracking/CleanupTracking.ts b/packages/x-data-grid/src/utils/cleanupTracking/CleanupTracking.ts similarity index 100% rename from packages/grid/x-data-grid/src/utils/cleanupTracking/CleanupTracking.ts rename to packages/x-data-grid/src/utils/cleanupTracking/CleanupTracking.ts diff --git a/packages/grid/x-data-grid/src/utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking.ts b/packages/x-data-grid/src/utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking.ts similarity index 100% rename from packages/grid/x-data-grid/src/utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking.ts rename to packages/x-data-grid/src/utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking.ts diff --git a/packages/grid/x-data-grid/src/utils/cleanupTracking/TimerBasedCleanupTracking.ts b/packages/x-data-grid/src/utils/cleanupTracking/TimerBasedCleanupTracking.ts similarity index 100% rename from packages/grid/x-data-grid/src/utils/cleanupTracking/TimerBasedCleanupTracking.ts rename to packages/x-data-grid/src/utils/cleanupTracking/TimerBasedCleanupTracking.ts diff --git a/packages/grid/x-data-grid/src/utils/createControllablePromise.ts b/packages/x-data-grid/src/utils/createControllablePromise.ts similarity index 100% rename from packages/grid/x-data-grid/src/utils/createControllablePromise.ts rename to packages/x-data-grid/src/utils/createControllablePromise.ts diff --git a/packages/grid/x-data-grid/src/utils/createSelector.spec.ts b/packages/x-data-grid/src/utils/createSelector.spec.ts similarity index 100% rename from packages/grid/x-data-grid/src/utils/createSelector.spec.ts rename to packages/x-data-grid/src/utils/createSelector.spec.ts diff --git a/packages/grid/x-data-grid/src/utils/createSelector.test.ts b/packages/x-data-grid/src/utils/createSelector.test.ts similarity index 100% rename from packages/grid/x-data-grid/src/utils/createSelector.test.ts rename to packages/x-data-grid/src/utils/createSelector.test.ts diff --git a/packages/grid/x-data-grid/src/utils/createSelector.ts b/packages/x-data-grid/src/utils/createSelector.ts similarity index 100% rename from packages/grid/x-data-grid/src/utils/createSelector.ts rename to packages/x-data-grid/src/utils/createSelector.ts diff --git a/packages/grid/x-data-grid/src/utils/doesSupportPreventScroll.ts b/packages/x-data-grid/src/utils/doesSupportPreventScroll.ts similarity index 100% rename from packages/grid/x-data-grid/src/utils/doesSupportPreventScroll.ts rename to packages/x-data-grid/src/utils/doesSupportPreventScroll.ts diff --git a/packages/grid/x-data-grid/src/utils/domUtils.ts b/packages/x-data-grid/src/utils/domUtils.ts similarity index 100% rename from packages/grid/x-data-grid/src/utils/domUtils.ts rename to packages/x-data-grid/src/utils/domUtils.ts diff --git a/packages/grid/x-data-grid/src/utils/exportAs.ts b/packages/x-data-grid/src/utils/exportAs.ts similarity index 100% rename from packages/grid/x-data-grid/src/utils/exportAs.ts rename to packages/x-data-grid/src/utils/exportAs.ts diff --git a/packages/grid/x-data-grid/src/utils/fastMemo.ts b/packages/x-data-grid/src/utils/fastMemo.ts similarity index 100% rename from packages/grid/x-data-grid/src/utils/fastMemo.ts rename to packages/x-data-grid/src/utils/fastMemo.ts diff --git a/packages/grid/x-data-grid/src/utils/fastObjectShallowCompare.ts b/packages/x-data-grid/src/utils/fastObjectShallowCompare.ts similarity index 100% rename from packages/grid/x-data-grid/src/utils/fastObjectShallowCompare.ts rename to packages/x-data-grid/src/utils/fastObjectShallowCompare.ts diff --git a/packages/grid/x-data-grid/src/utils/getGridLocalization.ts b/packages/x-data-grid/src/utils/getGridLocalization.ts similarity index 100% rename from packages/grid/x-data-grid/src/utils/getGridLocalization.ts rename to packages/x-data-grid/src/utils/getGridLocalization.ts diff --git a/packages/grid/x-data-grid/src/utils/getPublicApiRef.ts b/packages/x-data-grid/src/utils/getPublicApiRef.ts similarity index 100% rename from packages/grid/x-data-grid/src/utils/getPublicApiRef.ts rename to packages/x-data-grid/src/utils/getPublicApiRef.ts diff --git a/packages/grid/x-data-grid/src/utils/index.ts b/packages/x-data-grid/src/utils/index.ts similarity index 100% rename from packages/grid/x-data-grid/src/utils/index.ts rename to packages/x-data-grid/src/utils/index.ts diff --git a/packages/grid/x-data-grid/src/utils/keyboardUtils.ts b/packages/x-data-grid/src/utils/keyboardUtils.ts similarity index 100% rename from packages/grid/x-data-grid/src/utils/keyboardUtils.ts rename to packages/x-data-grid/src/utils/keyboardUtils.ts diff --git a/packages/grid/x-data-grid/src/utils/utils.ts b/packages/x-data-grid/src/utils/utils.ts similarity index 100% rename from packages/grid/x-data-grid/src/utils/utils.ts rename to packages/x-data-grid/src/utils/utils.ts diff --git a/packages/grid/x-data-grid/src/utils/warning.ts b/packages/x-data-grid/src/utils/warning.ts similarity index 100% rename from packages/grid/x-data-grid/src/utils/warning.ts rename to packages/x-data-grid/src/utils/warning.ts diff --git a/packages/grid/x-data-grid/tsconfig.build.json b/packages/x-data-grid/tsconfig.build.json similarity index 87% rename from packages/grid/x-data-grid/tsconfig.build.json rename to packages/x-data-grid/tsconfig.build.json index aff4badb23493..90fdeac9e16a9 100644 --- a/packages/grid/x-data-grid/tsconfig.build.json +++ b/packages/x-data-grid/tsconfig.build.json @@ -13,7 +13,7 @@ "include": [ "src/**/*.ts*", "src/lib/**/*.js", - "../../../node_modules/@mui/material/themeCssVarsAugmentation" + "../../node_modules/@mui/material/themeCssVarsAugmentation" ], // TODO: Remove JS files "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"] } diff --git a/packages/grid/x-data-grid/tsconfig.json b/packages/x-data-grid/tsconfig.json similarity index 68% rename from packages/grid/x-data-grid/tsconfig.json rename to packages/x-data-grid/tsconfig.json index 79824ab245468..6a8e1ed5b14fc 100644 --- a/packages/grid/x-data-grid/tsconfig.json +++ b/packages/x-data-grid/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "../../../tsconfig.json", + "extends": "../../tsconfig.json", "compilerOptions": { "types": ["react", "mocha", "node"] }, @@ -7,6 +7,6 @@ "src/**/*", "../../test/utils/addChaiAssertions.ts", "../../node_modules/@mui/monorepo/packages/test-utils/src/initMatchers.ts", - "../../../node_modules/@mui/material/themeCssVarsAugmentation" + "../../node_modules/@mui/material/themeCssVarsAugmentation" ] } diff --git a/packages/x-date-pickers-pro/package.json b/packages/x-date-pickers-pro/package.json index c0bbca565a567..81db8f8615e4d 100644 --- a/packages/x-date-pickers-pro/package.json +++ b/packages/x-date-pickers-pro/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-date-pickers-pro", - "version": "7.0.0-beta.1", + "version": "7.0.0-beta.2", "description": "The commercial edition of the date picker components (MUI X).", "author": "MUI Team", "main": "src/index.ts", @@ -43,11 +43,11 @@ }, "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/base": "^5.0.0-beta.34", - "@mui/system": "^5.15.7", - "@mui/utils": "^5.15.7", - "@mui/x-date-pickers": "7.0.0-beta.1", - "@mui/x-license-pro": "7.0.0-beta.0", + "@mui/base": "^5.0.0-beta.36", + "@mui/system": "^5.15.9", + "@mui/utils": "^5.15.9", + "@mui/x-date-pickers": "7.0.0-beta.2", + "@mui/x-license": "7.0.0-beta.2", "clsx": "^2.1.0", "prop-types": "^15.8.1", "react-transition-group": "^4.4.5" diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx index f0a2b77125434..ec2f22372bd90 100644 --- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx +++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx @@ -6,7 +6,7 @@ import useMediaQuery from '@mui/material/useMediaQuery'; import { resolveComponentProps, useSlotProps } from '@mui/base/utils'; import { styled, useThemeProps } from '@mui/material/styles'; import { unstable_composeClasses as composeClasses } from '@mui/utils'; -import { Watermark } from '@mui/x-license-pro'; +import { Watermark } from '@mui/x-license'; import { PickersCalendarHeader, PickersCalendarHeaderProps, @@ -32,6 +32,7 @@ import { useControlledValueWithTimezone, useViews, } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { getReleaseInfo } from '../internals/utils/releaseInfo'; import { dateRangeCalendarClasses, @@ -114,7 +115,7 @@ const DayCalendarForRange = styled(DayCalendar)(({ theme }) => ({ }, })) as typeof DayCalendar; -function useDateRangeCalendarDefaultizedProps( +function useDateRangeCalendarDefaultizedProps( props: DateRangeCalendarProps, name: string, ): DateRangeCalendarDefaultizedProps { @@ -155,7 +156,7 @@ const useUtilityClasses = (ownerState: DateRangeCalendarOwnerState) => { return composeClasses(slots, getDateRangeCalendarUtilityClass, classes); }; -type DateRangeCalendarComponent = (( +type DateRangeCalendarComponent = (( props: DateRangeCalendarProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -169,10 +170,9 @@ type DateRangeCalendarComponent = (( * * - [DateRangeCalendar API](https://mui.com/x/api/date-pickers/date-range-calendar/) */ -const DateRangeCalendar = React.forwardRef(function DateRangeCalendar( - inProps: DateRangeCalendarProps, - ref: React.Ref, -) { +const DateRangeCalendar = React.forwardRef(function DateRangeCalendar< + TDate extends PickerValidDate, +>(inProps: DateRangeCalendarProps, ref: React.Ref) { const props = useDateRangeCalendarDefaultizedProps(inProps, 'MuiDateRangeCalendar'); const shouldHavePreview = useMediaQuery(DEFAULT_DESKTOP_MODE_MEDIA_QUERY, { defaultMatches: false, @@ -683,7 +683,7 @@ DateRangeCalendar.propTypes = { * The default selected value. * Used when the component is not controlled. */ - defaultValue: PropTypes.arrayOf(PropTypes.any), + defaultValue: PropTypes.arrayOf(PropTypes.object), /** * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date. * @default false @@ -737,11 +737,11 @@ DateRangeCalendar.propTypes = { /** * Maximal selectable date. */ - maxDate: PropTypes.any, + maxDate: PropTypes.object, /** * Minimal selectable date. */ - minDate: PropTypes.any, + minDate: PropTypes.object, /** * Callback fired when the value changes. * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value. @@ -800,7 +800,7 @@ DateRangeCalendar.propTypes = { * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * Component rendered on the "day" view when `props.loading` is true. * @returns {React.ReactNode} The node to render when loading. @@ -859,7 +859,7 @@ DateRangeCalendar.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.arrayOf(PropTypes.any), + value: PropTypes.arrayOf(PropTypes.object), /** * The visible view. * Used when the component view is controlled. diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts index 3752678575acb..b79cbe3a8a570 100644 --- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts +++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { SlotComponentProps } from '@mui/base/utils'; import { Theme } from '@mui/material/styles'; -import { TimezoneProps } from '@mui/x-date-pickers/models'; +import { PickerValidDate, TimezoneProps } from '@mui/x-date-pickers/models'; import { PickersCalendarHeader, PickersCalendarHeaderProps, @@ -28,7 +28,7 @@ import { UseRangePositionProps } from '../internals/hooks/useRangePosition'; export type DateRangePosition = 'start' | 'end'; -export interface DateRangeCalendarSlots +export interface DateRangeCalendarSlots extends PickersArrowSwitcherSlots, Omit, 'day'>, PickersCalendarHeaderSlots { @@ -46,7 +46,7 @@ export interface DateRangeCalendarSlots day?: React.ElementType>; } -export interface DateRangeCalendarSlotProps +export interface DateRangeCalendarSlotProps extends PickersArrowSwitcherSlotProps, Omit, 'day'>, PickersCalendarHeaderSlotProps { @@ -62,7 +62,7 @@ export interface DateRangeCalendarSlotProps >; } -export interface ExportedDateRangeCalendarProps +export interface ExportedDateRangeCalendarProps extends ExportedDayCalendarProps, BaseDateValidationProps, DayRangeValidationProps, @@ -105,7 +105,7 @@ export interface ExportedDateRangeCalendarProps disableDragEditing?: boolean; } -export interface DateRangeCalendarProps +export interface DateRangeCalendarProps extends ExportedDateRangeCalendarProps, UseRangePositionProps, ExportedUseViewsOptions<'day'> { @@ -155,11 +155,12 @@ export interface DateRangeCalendarProps availableRangePositions?: DateRangePosition[]; } -export interface DateRangeCalendarOwnerState extends DateRangeCalendarProps { +export interface DateRangeCalendarOwnerState + extends DateRangeCalendarProps { isDragging: boolean; } -export type DateRangeCalendarDefaultizedProps = DefaultizedProps< +export type DateRangeCalendarDefaultizedProps = DefaultizedProps< DateRangeCalendarProps, | 'views' | 'openTo' diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/useDragRange.ts b/packages/x-date-pickers-pro/src/DateRangeCalendar/useDragRange.ts index 32a85ed3aeef8..5ac9cdc668000 100644 --- a/packages/x-date-pickers-pro/src/DateRangeCalendar/useDragRange.ts +++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/useDragRange.ts @@ -1,11 +1,11 @@ import * as React from 'react'; import useEventCallback from '@mui/utils/useEventCallback'; -import { MuiPickersAdapter, PickersTimezone } from '@mui/x-date-pickers/models'; +import { MuiPickersAdapter, PickersTimezone, PickerValidDate } from '@mui/x-date-pickers/models'; import { DateRangePosition } from './DateRangeCalendar.types'; import { DateRange } from '../models'; import { isEndOfRange, isStartOfRange } from '../internals/utils/date-utils'; -interface UseDragRangeParams { +interface UseDragRangeParams { disableDragEditing?: boolean; utils: MuiPickersAdapter; setRangeDragDay: (value: TDate | null) => void; @@ -29,13 +29,13 @@ interface UseDragRangeEvents { onTouchEnd?: React.TouchEventHandler; } -interface UseDragRangeResponse extends UseDragRangeEvents { +interface UseDragRangeResponse extends UseDragRangeEvents { isDragging: boolean; rangeDragDay: TDate | null; draggingDatePosition: DateRangePosition | null; } -const resolveDateFromTarget = ( +const resolveDateFromTarget = ( target: EventTarget, utils: MuiPickersAdapter, timezone: PickersTimezone, @@ -87,7 +87,7 @@ const resolveElementFromTouch = ( return null; }; -const useDragRangeEvents = ({ +const useDragRangeEvents = ({ utils, setRangeDragDay, setIsDragging, @@ -276,7 +276,7 @@ const useDragRangeEvents = ({ }; }; -export const useDragRange = ({ +export const useDragRange = ({ disableDragEditing, utils, onDatePositionChange, diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx index d05c30cdbde64..221f24079569b 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx @@ -3,11 +3,12 @@ import PropTypes from 'prop-types'; import useMediaQuery from '@mui/material/useMediaQuery'; import { useThemeProps } from '@mui/material/styles'; import { refType } from '@mui/utils'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { DesktopDateRangePicker } from '../DesktopDateRangePicker'; import { MobileDateRangePicker } from '../MobileDateRangePicker'; import { DateRangePickerProps } from './DateRangePicker.types'; -type DatePickerComponent = (( +type DatePickerComponent = (( props: DateRangePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -21,7 +22,7 @@ type DatePickerComponent = (( * * - [DateRangePicker API](https://mui.com/x/api/date-pickers/date-range-picker/) */ -const DateRangePicker = React.forwardRef(function DateRangePicker( +const DateRangePicker = React.forwardRef(function DateRangePicker( inProps: DateRangePickerProps, ref: React.Ref, ) { @@ -84,7 +85,7 @@ DateRangePicker.propTypes = { * The default value. * Used when the component is not controlled. */ - defaultValue: PropTypes.arrayOf(PropTypes.any), + defaultValue: PropTypes.arrayOf(PropTypes.object), /** * CSS media query when `Mobile` mode will be changed to `Desktop`. * @default '@media (pointer: fine)' @@ -171,11 +172,11 @@ DateRangePicker.propTypes = { /** * Maximal selectable date. */ - maxDate: PropTypes.any, + maxDate: PropTypes.object, /** * Minimal selectable date. */ - minDate: PropTypes.any, + minDate: PropTypes.object, /** * Name attribute used by the `input` element in the Field. * Ignored if the field has several inputs. @@ -251,7 +252,7 @@ DateRangePicker.propTypes = { * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * Component rendered on the "day" view when `props.loading` is true. * @returns {React.ReactNode} The node to render when loading. @@ -338,7 +339,7 @@ DateRangePicker.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.arrayOf(PropTypes.any), + value: PropTypes.arrayOf(PropTypes.object), /** * Define custom view renderers for each section. * If `null`, the section will only have field editing. diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts index 7b1bfae34e522..619d929549386 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts @@ -1,3 +1,4 @@ +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { DesktopDateRangePickerProps, DesktopDateRangePickerSlots, @@ -9,15 +10,15 @@ import { MobileDateRangePickerSlotProps, } from '../MobileDateRangePicker'; -export interface DateRangePickerSlots +export interface DateRangePickerSlots extends DesktopDateRangePickerSlots, MobileDateRangePickerSlots {} -export interface DateRangePickerSlotProps +export interface DateRangePickerSlotProps extends DesktopDateRangePickerSlotProps, MobileDateRangePickerSlotProps {} -export interface DateRangePickerProps +export interface DateRangePickerProps extends DesktopDateRangePickerProps, MobileDateRangePickerProps { /** diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx index 7e83059f084b1..149bc4c9bf069 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx @@ -12,6 +12,7 @@ import { useLocaleText, ExportedBaseToolbarProps, } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { DateRange } from '../models'; import { UseRangePositionResponse } from '../internals/hooks/useRangePosition'; import { @@ -29,7 +30,7 @@ const useUtilityClasses = (ownerState: DateRangePickerToolbarProps) => { return composeClasses(slots, getDateRangePickerToolbarUtilityClass, classes); }; -export interface DateRangePickerToolbarProps +export interface DateRangePickerToolbarProps extends Omit< BaseToolbarProps, 'day'>, 'views' | 'view' | 'onViewChange' | 'onChange' | 'isLandscape' @@ -67,7 +68,7 @@ const DateRangePickerToolbarContainer = styled('div', { * - [DateRangePickerToolbar API](https://mui.com/x/api/date-pickers/date-range-picker-toolbar/) */ const DateRangePickerToolbar = React.forwardRef(function DateRangePickerToolbar< - TDate extends unknown, + TDate extends PickerValidDate, >(inProps: DateRangePickerToolbarProps, ref: React.Ref) { const utils = useUtils(); const props = useThemeProps({ props: inProps, name: 'MuiDateRangePickerToolbar' }); @@ -153,7 +154,7 @@ DateRangePickerToolbar.propTypes = { * @default "––" */ toolbarPlaceholder: PropTypes.node, - value: PropTypes.arrayOf(PropTypes.any).isRequired, + value: PropTypes.arrayOf(PropTypes.object).isRequired, } as any; export { DateRangePickerToolbar }; diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/shared.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/shared.tsx index 652ad32094229..5a0b72b9bdd09 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/shared.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/shared.tsx @@ -10,6 +10,7 @@ import { BasePickerInputProps, PickerViewRendererLookup, } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { DateRangeValidationError, DateRange } from '../models'; import { DateRangeCalendarSlots, @@ -23,7 +24,8 @@ import { } from './DateRangePickerToolbar'; import { DateRangeViewRendererProps } from '../dateRangeViewRenderers'; -export interface BaseDateRangePickerSlots extends DateRangeCalendarSlots { +export interface BaseDateRangePickerSlots + extends DateRangeCalendarSlots { /** * Custom component for the toolbar rendered above the views. * @default DateTimePickerToolbar @@ -31,11 +33,12 @@ export interface BaseDateRangePickerSlots extends DateRangeCalendarSlots< toolbar?: React.JSXElementConstructor>; } -export interface BaseDateRangePickerSlotProps extends DateRangeCalendarSlotProps { +export interface BaseDateRangePickerSlotProps + extends DateRangeCalendarSlotProps { toolbar?: ExportedDateRangePickerToolbarProps; } -export interface BaseDateRangePickerProps +export interface BaseDateRangePickerProps extends Omit< BasePickerInputProps, TDate, 'day', DateRangeValidationError>, 'view' | 'views' | 'openTo' | 'onViewChange' | 'orientation' @@ -63,12 +66,12 @@ export interface BaseDateRangePickerProps } type UseDateRangePickerDefaultizedProps< - TDate, + TDate extends PickerValidDate, Props extends BaseDateRangePickerProps, > = LocalizedComponent>>; export function useDateRangePickerDefaultizedProps< - TDate, + TDate extends PickerValidDate, Props extends BaseDateRangePickerProps, >(props: Props, name: string): UseDateRangePickerDefaultizedProps { const utils = useUtils(); diff --git a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx index 9647c304b1628..29c0be8863b86 100644 --- a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { useLicenseVerifier } from '@mui/x-license-pro'; +import { useLicenseVerifier } from '@mui/x-license'; import { alpha, styled, useThemeProps } from '@mui/material/styles'; import { unstable_composeClasses as composeClasses } from '@mui/utils'; import { useUtils } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { PickersDay, PickersDayProps } from '@mui/x-date-pickers/PickersDay'; import { DateRangePickerDayClasses, @@ -15,7 +16,7 @@ import { getReleaseInfo } from '../internals/utils/releaseInfo'; const releaseInfo = getReleaseInfo(); -export interface DateRangePickerDayProps +export interface DateRangePickerDayProps extends Omit, 'classes' | 'onBlur' | 'onFocus' | 'onKeyDown'> { /** * Set to `true` if the `day` is in a highlighted date range. @@ -259,18 +260,17 @@ const DateRangePickerDayDay = styled(PickersDay, { ...(ownerState.draggable && { touchAction: 'none', }), -})) as unknown as ( +})) as unknown as ( props: PickersDayProps & { ownerState: OwnerState }, ) => React.JSX.Element; -type DateRangePickerDayComponent = ( +type DateRangePickerDayComponent = ( props: DateRangePickerDayProps & React.RefAttributes, ) => React.JSX.Element; -const DateRangePickerDayRaw = React.forwardRef(function DateRangePickerDay( - inProps: DateRangePickerDayProps, - ref: React.Ref, -) { +const DateRangePickerDayRaw = React.forwardRef(function DateRangePickerDay< + TDate extends PickerValidDate, +>(inProps: DateRangePickerDayProps, ref: React.Ref) { const props = useThemeProps({ props: inProps, name: 'MuiDateRangePickerDay' }); const { className, @@ -376,7 +376,7 @@ DateRangePickerDayRaw.propTypes = { /** * The date to show. */ - day: PropTypes.any.isRequired, + day: PropTypes.object.isRequired, /** * If `true`, renders as disabled. * @default false diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx index 63d70c656b7c9..7b55b94cca536 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx @@ -2,18 +2,18 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import useMediaQuery from '@mui/material/useMediaQuery'; import { useThemeProps } from '@mui/material/styles'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { DateTimeRangePickerProps } from './DateTimeRangePicker.types'; import { DesktopDateTimeRangePicker } from '../DesktopDateTimeRangePicker'; import { MobileDateTimeRangePicker } from '../MobileDateTimeRangePicker'; -type DateTimeRangePickerComponent = (( +type DateTimeRangePickerComponent = (( props: DateTimeRangePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; -const DateTimeRangePicker = React.forwardRef(function DateTimeRangePicker( - inProps: DateTimeRangePickerProps, - ref: React.Ref, -) { +const DateTimeRangePicker = React.forwardRef(function DateTimeRangePicker< + TDate extends PickerValidDate, +>(inProps: DateTimeRangePickerProps, ref: React.Ref) { const props = useThemeProps({ props: inProps, name: 'MuiDateTimeRangePicker' }); const { desktopModeMediaQuery = '@media (pointer: fine)', ...other } = props; @@ -78,7 +78,7 @@ DateTimeRangePicker.propTypes = { * The default value. * Used when the component is not controlled. */ - defaultValue: PropTypes.arrayOf(PropTypes.any), + defaultValue: PropTypes.arrayOf(PropTypes.object), /** * CSS media query when `Mobile` mode will be changed to `Desktop`. * @default '@media (pointer: fine)' @@ -175,29 +175,29 @@ DateTimeRangePicker.propTypes = { /** * Maximal selectable date. */ - maxDate: PropTypes.any, + maxDate: PropTypes.object, /** * Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */ - maxDateTime: PropTypes.any, + maxDateTime: PropTypes.object, /** * Maximal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - maxTime: PropTypes.any, + maxTime: PropTypes.object, /** * Minimal selectable date. */ - minDate: PropTypes.any, + minDate: PropTypes.object, /** * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */ - minDateTime: PropTypes.any, + minDateTime: PropTypes.object, /** * Minimal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - minTime: PropTypes.any, + minTime: PropTypes.object, /** * Step over minutes. * @default 1 @@ -290,7 +290,7 @@ DateTimeRangePicker.propTypes = { * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * Component rendered on the "day" view when `props.loading` is true. * @returns {React.ReactNode} The node to render when loading. @@ -406,7 +406,7 @@ DateTimeRangePicker.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.arrayOf(PropTypes.any), + value: PropTypes.arrayOf(PropTypes.object), /** * The visible view. * Used when the component view is controlled. diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.types.ts b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.types.ts index 1e755b824bda2..ef4308ee99016 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.types.ts @@ -1,3 +1,4 @@ +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { DesktopDateTimeRangePickerProps, DesktopDateTimeRangePickerSlots, @@ -9,15 +10,15 @@ import { MobileDateTimeRangePickerSlotProps, } from '../MobileDateTimeRangePicker'; -export interface DateTimeRangePickerSlots +export interface DateTimeRangePickerSlots extends DesktopDateTimeRangePickerSlots, MobileDateTimeRangePickerSlots {} -export interface DateTimeRangePickerSlotProps +export interface DateTimeRangePickerSlotProps extends DesktopDateTimeRangePickerSlotProps, MobileDateTimeRangePickerSlotProps {} -export interface DateTimeRangePickerProps +export interface DateTimeRangePickerProps extends DesktopDateTimeRangePickerProps, MobileDateTimeRangePickerProps { /** diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.tsx index 465bcc3f6e1de..9bc3597b7927e 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.tsx +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.tsx @@ -7,6 +7,7 @@ import { TimeViewWithMeridiem, BaseClockProps, } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { DateTimeRangePickerView } from '../internals/models'; import { DateRange } from '../models'; import { UseRangePositionResponse } from '../internals/hooks/useRangePosition'; @@ -14,7 +15,7 @@ import { isRangeValid } from '../internals/utils/date-utils'; import { calculateRangeChange } from '../internals/utils/date-range-manager'; export type DateTimeRangePickerTimeWrapperProps< - TDate, + TDate extends PickerValidDate, TView extends DateTimeRangePickerView, TComponentProps extends Omit< BaseClockProps, @@ -43,7 +44,7 @@ export type DateTimeRangePickerTimeWrapperProps< * @ignore - internal component. */ function DateTimeRangePickerTimeWrapper< - TDate, + TDate extends PickerValidDate, TView extends DateTimeRangePickerView, TComponentProps extends Omit< BaseClockProps, diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx index 5b384ac900ab6..1af69fa551241 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx @@ -11,6 +11,7 @@ import { DateOrTimeViewWithMeridiem, WrapperVariant, } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { DateTimePickerToolbarProps, DateTimePickerToolbar, @@ -36,7 +37,7 @@ const useUtilityClasses = (ownerState: DateTimeRangePickerToolbarProps) => type DateTimeRangeViews = Exclude; -export interface DateTimeRangePickerToolbarProps +export interface DateTimeRangePickerToolbarProps extends BaseToolbarProps, DateTimeRangeViews>, Pick, ExportedDateTimeRangePickerToolbarProps { @@ -59,11 +60,12 @@ const DateTimeRangePickerToolbarRoot = styled('div', { flexDirection: 'column', }); -type DateTimeRangePickerStartOrEndToolbarProps = DateTimePickerToolbarProps & { - ownerState?: DateTimeRangePickerToolbarProps; -}; +type DateTimeRangePickerStartOrEndToolbarProps = + DateTimePickerToolbarProps & { + ownerState?: DateTimeRangePickerToolbarProps; + }; -type DateTimeRangePickerStartOrEndToolbarComponent = ( +type DateTimeRangePickerStartOrEndToolbarComponent = ( props: DateTimeRangePickerStartOrEndToolbarProps, ) => React.JSX.Element; @@ -91,7 +93,7 @@ const DateTimeRangePickerToolbarEnd = styled(DateTimePickerToolbar, { })) as DateTimeRangePickerStartOrEndToolbarComponent; const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePickerToolbar< - TDate extends unknown, + TDate extends PickerValidDate, >(inProps: DateTimeRangePickerToolbarProps, ref: React.Ref) { const props = useThemeProps({ props: inProps, name: 'MuiDateTimeRangePickerToolbar' }); const utils = useUtils(); @@ -228,7 +230,7 @@ DateTimeRangePickerToolbar.propTypes = { */ toolbarPlaceholder: PropTypes.node, toolbarVariant: PropTypes.oneOf(['desktop', 'mobile']), - value: PropTypes.arrayOf(PropTypes.any).isRequired, + value: PropTypes.arrayOf(PropTypes.object).isRequired, /** * Currently visible picker view. */ diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/shared.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/shared.tsx index d893dbe01b40d..cba6a59a1aa25 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/shared.tsx +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/shared.tsx @@ -17,6 +17,7 @@ import { UseViewsOptions, DateTimeValidationProps, } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { TimeViewRendererProps } from '@mui/x-date-pickers/timeViewRenderers'; import { DigitalClockSlots, DigitalClockSlotProps } from '@mui/x-date-pickers/DigitalClock'; import { @@ -42,7 +43,7 @@ import { ExportedDateTimeRangePickerTabsProps, } from './DateTimeRangePickerTabs'; -export interface BaseDateTimeRangePickerSlots +export interface BaseDateTimeRangePickerSlots extends DateRangeCalendarSlots, DigitalClockSlots, MultiSectionDigitalClockSlots { @@ -58,7 +59,7 @@ export interface BaseDateTimeRangePickerSlots toolbar?: React.JSXElementConstructor>; } -export interface BaseDateTimeRangePickerSlotProps +export interface BaseDateTimeRangePickerSlotProps extends DateRangeCalendarSlotProps, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps { @@ -72,7 +73,7 @@ export interface BaseDateTimeRangePickerSlotProps toolbar?: ExportedDateTimeRangePickerToolbarProps; } -export interface BaseDateTimeRangePickerProps +export interface BaseDateTimeRangePickerProps extends Omit< BasePickerInputProps< DateRange, @@ -119,7 +120,7 @@ export interface BaseDateTimeRangePickerProps } type UseDateTimeRangePickerDefaultizedProps< - TDate, + TDate extends PickerValidDate, Props extends BaseDateTimeRangePickerProps, > = LocalizedComponent< TDate, @@ -130,7 +131,7 @@ type UseDateTimeRangePickerDefaultizedProps< }; export function useDateTimeRangePickerDefaultizedProps< - TDate, + TDate extends PickerValidDate, Props extends BaseDateTimeRangePickerProps, >(props: Props, name: string): UseDateTimeRangePickerDefaultizedProps { const utils = useUtils(); diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx index 09532eee819d3..fd25ff438f808 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { extractValidationProps, PickerViewRendererLookup } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { resolveComponentProps } from '@mui/base/utils'; import { refType } from '@mui/utils'; import { rangeValueManager } from '../internals/utils/valueManagers'; @@ -12,7 +13,7 @@ import { useDesktopRangePicker } from '../internals/hooks/useDesktopRangePicker' import { validateDateRange } from '../internals/utils/validation/validateDateRange'; import { DateRange } from '../models'; -type DesktopDateRangePickerComponent = (( +type DesktopDateRangePickerComponent = (( props: DesktopDateRangePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -26,10 +27,9 @@ type DesktopDateRangePickerComponent = (( * * - [DesktopDateRangePicker API](https://mui.com/x/api/date-pickers/desktop-date-range-picker/) */ -const DesktopDateRangePicker = React.forwardRef(function DesktopDateRangePicker( - inProps: DesktopDateRangePickerProps, - ref: React.Ref, -) { +const DesktopDateRangePicker = React.forwardRef(function DesktopDateRangePicker< + TDate extends PickerValidDate, +>(inProps: DesktopDateRangePickerProps, ref: React.Ref) { // Props with the default values common to all date time pickers const defaultizedProps = useDateRangePickerDefaultizedProps< TDate, @@ -120,7 +120,7 @@ DesktopDateRangePicker.propTypes = { * The default value. * Used when the component is not controlled. */ - defaultValue: PropTypes.arrayOf(PropTypes.any), + defaultValue: PropTypes.arrayOf(PropTypes.object), /** * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date. * @default false @@ -201,11 +201,11 @@ DesktopDateRangePicker.propTypes = { /** * Maximal selectable date. */ - maxDate: PropTypes.any, + maxDate: PropTypes.object, /** * Minimal selectable date. */ - minDate: PropTypes.any, + minDate: PropTypes.object, /** * Name attribute used by the `input` element in the Field. * Ignored if the field has several inputs. @@ -281,7 +281,7 @@ DesktopDateRangePicker.propTypes = { * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * Component rendered on the "day" view when `props.loading` is true. * @returns {React.ReactNode} The node to render when loading. @@ -368,7 +368,7 @@ DesktopDateRangePicker.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.arrayOf(PropTypes.any), + value: PropTypes.arrayOf(PropTypes.object), /** * Define custom view renderers for each section. * If `null`, the section will only have field editing. diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.types.ts b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.types.ts index 4f83197bad5ca..364776776e06d 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.types.ts @@ -1,4 +1,5 @@ import { MakeOptional } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseDesktopRangePickerSlots, UseDesktopRangePickerSlotProps, @@ -10,15 +11,15 @@ import { BaseDateRangePickerSlotProps, } from '../DateRangePicker/shared'; -export interface DesktopDateRangePickerSlots +export interface DesktopDateRangePickerSlots extends BaseDateRangePickerSlots, MakeOptional, 'field'> {} -export interface DesktopDateRangePickerSlotProps +export interface DesktopDateRangePickerSlotProps extends BaseDateRangePickerSlotProps, Omit, 'tabs'> {} -export interface DesktopDateRangePickerProps +export interface DesktopDateRangePickerProps extends BaseDateRangePickerProps, DesktopRangeOnlyPickerProps { /** diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx index b0c6b36d18cd2..74f358cae9dce 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx @@ -8,6 +8,7 @@ import { PickerViewRenderer, PickerViewRendererLookup, } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { resolveComponentProps } from '@mui/base/utils'; import { renderDigitalClockTimeView, @@ -36,7 +37,7 @@ import { DateTimeRangePickerTimeWrapper } from '../DateTimeRangePicker/DateTimeR import { RANGE_VIEW_HEIGHT } from '../internals/constants/dimensions'; import { DesktopDateTimeRangePickerLayout } from './DesktopDateTimeRangePickerLayout'; -const rendererInterceptor = function rendererInterceptor( +const rendererInterceptor = function rendererInterceptor( inViewRenderers: PickerViewRendererLookup, DateTimeRangePickerView, any, any>, popperView: DateTimeRangePickerView, rendererProps: DefaultizedProps< @@ -88,14 +89,13 @@ const rendererInterceptor = function rendererInterceptor( ); }; -type DesktopDateRangePickerComponent = (( +type DesktopDateRangePickerComponent = (( props: DesktopDateTimeRangePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; -const DesktopDateTimeRangePicker = React.forwardRef(function DesktopDateTimeRangePicker( - inProps: DesktopDateTimeRangePickerProps, - ref: React.Ref, -) { +const DesktopDateTimeRangePicker = React.forwardRef(function DesktopDateTimeRangePicker< + TDate extends PickerValidDate, +>(inProps: DesktopDateTimeRangePickerProps, ref: React.Ref) { // Props with the default values common to all date time range pickers const defaultizedProps = useDateTimeRangePickerDefaultizedProps< TDate, @@ -225,7 +225,7 @@ DesktopDateTimeRangePicker.propTypes = { * The default value. * Used when the component is not controlled. */ - defaultValue: PropTypes.arrayOf(PropTypes.any), + defaultValue: PropTypes.arrayOf(PropTypes.object), /** * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date. * @default false @@ -316,29 +316,29 @@ DesktopDateTimeRangePicker.propTypes = { /** * Maximal selectable date. */ - maxDate: PropTypes.any, + maxDate: PropTypes.object, /** * Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */ - maxDateTime: PropTypes.any, + maxDateTime: PropTypes.object, /** * Maximal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - maxTime: PropTypes.any, + maxTime: PropTypes.object, /** * Minimal selectable date. */ - minDate: PropTypes.any, + minDate: PropTypes.object, /** * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */ - minDateTime: PropTypes.any, + minDateTime: PropTypes.object, /** * Minimal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - minTime: PropTypes.any, + minTime: PropTypes.object, /** * Step over minutes. * @default 1 @@ -431,7 +431,7 @@ DesktopDateTimeRangePicker.propTypes = { * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * Component rendered on the "day" view when `props.loading` is true. * @returns {React.ReactNode} The node to render when loading. @@ -547,7 +547,7 @@ DesktopDateTimeRangePicker.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.arrayOf(PropTypes.any), + value: PropTypes.arrayOf(PropTypes.object), /** * The visible view. * Used when the component view is controlled. diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.types.ts b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.types.ts index 3f956449fba72..a692b4307fe44 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.types.ts @@ -1,4 +1,5 @@ import { MakeOptional } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseDesktopRangePickerSlots, UseDesktopRangePickerSlotProps, @@ -11,15 +12,15 @@ import { } from '../DateTimeRangePicker/shared'; import { DateTimeRangePickerView } from '../internals/models'; -export interface DesktopDateTimeRangePickerSlots +export interface DesktopDateTimeRangePickerSlots extends BaseDateTimeRangePickerSlots, MakeOptional, 'field'> {} -export interface DesktopDateTimeRangePickerSlotProps +export interface DesktopDateTimeRangePickerSlotProps extends BaseDateTimeRangePickerSlotProps, Omit, 'tabs' | 'toolbar'> {} -export interface DesktopDateTimeRangePickerProps +export interface DesktopDateTimeRangePickerProps extends BaseDateTimeRangePickerProps, DesktopRangeOnlyPickerProps { /** diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePickerLayout.tsx b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePickerLayout.tsx index 3bb22d7026339..37d9dc97df208 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePickerLayout.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePickerLayout.tsx @@ -8,13 +8,14 @@ import { pickersLayoutClasses, usePickerLayout, } from '@mui/x-date-pickers/PickersLayout'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { DateRange } from '../models'; import { DateTimeRangePickerView } from '../internals/models/dateTimeRange'; /** * @ignore - internal component. */ -export function DesktopDateTimeRangePickerLayout( +export function DesktopDateTimeRangePickerLayout( props: PickersLayoutProps, TDate, DateTimeRangePickerView>, ) { const { toolbar, tabs, content, actionBar, shortcuts } = usePickerLayout(props); diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx index c4464ff216a80..bd01168d00536 100644 --- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { extractValidationProps, PickerViewRendererLookup } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { resolveComponentProps } from '@mui/base/utils'; import { refType } from '@mui/utils'; import { rangeValueManager } from '../internals/utils/valueManagers'; @@ -12,7 +13,7 @@ import { useMobileRangePicker } from '../internals/hooks/useMobileRangePicker'; import { validateDateRange } from '../internals/utils/validation/validateDateRange'; import { DateRange } from '../models'; -type MobileDateRangePickerComponent = (( +type MobileDateRangePickerComponent = (( props: MobileDateRangePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -26,10 +27,9 @@ type MobileDateRangePickerComponent = (( * * - [MobileDateRangePicker API](https://mui.com/x/api/date-pickers/mobile-date-range-picker/) */ -const MobileDateRangePicker = React.forwardRef(function MobileDateRangePicker( - inProps: MobileDateRangePickerProps, - ref: React.Ref, -) { +const MobileDateRangePicker = React.forwardRef(function MobileDateRangePicker< + TDate extends PickerValidDate, +>(inProps: MobileDateRangePickerProps, ref: React.Ref) { // Props with the default values common to all date time pickers const defaultizedProps = useDateRangePickerDefaultizedProps< TDate, @@ -116,7 +116,7 @@ MobileDateRangePicker.propTypes = { * The default value. * Used when the component is not controlled. */ - defaultValue: PropTypes.arrayOf(PropTypes.any), + defaultValue: PropTypes.arrayOf(PropTypes.object), /** * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date. * @default false @@ -197,11 +197,11 @@ MobileDateRangePicker.propTypes = { /** * Maximal selectable date. */ - maxDate: PropTypes.any, + maxDate: PropTypes.object, /** * Minimal selectable date. */ - minDate: PropTypes.any, + minDate: PropTypes.object, /** * Name attribute used by the `input` element in the Field. * Ignored if the field has several inputs. @@ -277,7 +277,7 @@ MobileDateRangePicker.propTypes = { * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * Component rendered on the "day" view when `props.loading` is true. * @returns {React.ReactNode} The node to render when loading. @@ -364,7 +364,7 @@ MobileDateRangePicker.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.arrayOf(PropTypes.any), + value: PropTypes.arrayOf(PropTypes.object), /** * Define custom view renderers for each section. * If `null`, the section will only have field editing. diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.types.ts b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.types.ts index a5e6cc05419cd..9bb677638253b 100644 --- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.types.ts @@ -1,4 +1,5 @@ import { MakeOptional } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseMobileRangePickerSlots, UseMobileRangePickerSlotProps, @@ -10,15 +11,15 @@ import { BaseDateRangePickerSlotProps, } from '../DateRangePicker/shared'; -export interface MobileDateRangePickerSlots +export interface MobileDateRangePickerSlots extends BaseDateRangePickerSlots, MakeOptional, 'field'> {} -export interface MobileDateRangePickerSlotProps +export interface MobileDateRangePickerSlotProps extends BaseDateRangePickerSlotProps, Omit, 'tabs'> {} -export interface MobileDateRangePickerProps +export interface MobileDateRangePickerProps extends BaseDateRangePickerProps, MobileRangeOnlyPickerProps { /** diff --git a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx index 5799916f98367..3a1878ce53655 100644 --- a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx @@ -10,6 +10,7 @@ import { PickerViewRenderer, DefaultizedProps, } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { resolveComponentProps } from '@mui/base/utils'; import { renderDigitalClockTimeView, @@ -35,7 +36,7 @@ import { MultiInputDateTimeRangeField } from '../MultiInputDateTimeRangeField'; import { DateTimeRangePickerTimeWrapper } from '../DateTimeRangePicker/DateTimeRangePickerTimeWrapper'; import { RANGE_VIEW_HEIGHT } from '../internals/constants/dimensions'; -const rendererInterceptor = function rendererInterceptor( +const rendererInterceptor = function rendererInterceptor( inViewRenderers: PickerViewRendererLookup, DateTimeRangePickerView, any, any>, popperView: DateTimeRangePickerView, rendererProps: DefaultizedProps< @@ -102,14 +103,13 @@ const rendererInterceptor = function rendererInterceptor( }); }; -type MobileDateRangePickerComponent = (( +type MobileDateRangePickerComponent = (( props: MobileDateTimeRangePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; -const MobileDateTimeRangePicker = React.forwardRef(function MobileDateTimeRangePicker( - inProps: MobileDateTimeRangePickerProps, - ref: React.Ref, -) { +const MobileDateTimeRangePicker = React.forwardRef(function MobileDateTimeRangePicker< + TDate extends PickerValidDate, +>(inProps: MobileDateTimeRangePickerProps, ref: React.Ref) { // Props with the default values common to all date time range pickers const defaultizedProps = useDateTimeRangePickerDefaultizedProps< TDate, @@ -220,7 +220,7 @@ MobileDateTimeRangePicker.propTypes = { * The default value. * Used when the component is not controlled. */ - defaultValue: PropTypes.arrayOf(PropTypes.any), + defaultValue: PropTypes.arrayOf(PropTypes.object), /** * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date. * @default false @@ -311,29 +311,29 @@ MobileDateTimeRangePicker.propTypes = { /** * Maximal selectable date. */ - maxDate: PropTypes.any, + maxDate: PropTypes.object, /** * Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */ - maxDateTime: PropTypes.any, + maxDateTime: PropTypes.object, /** * Maximal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - maxTime: PropTypes.any, + maxTime: PropTypes.object, /** * Minimal selectable date. */ - minDate: PropTypes.any, + minDate: PropTypes.object, /** * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */ - minDateTime: PropTypes.any, + minDateTime: PropTypes.object, /** * Minimal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - minTime: PropTypes.any, + minTime: PropTypes.object, /** * Step over minutes. * @default 1 @@ -426,7 +426,7 @@ MobileDateTimeRangePicker.propTypes = { * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * Component rendered on the "day" view when `props.loading` is true. * @returns {React.ReactNode} The node to render when loading. @@ -542,7 +542,7 @@ MobileDateTimeRangePicker.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.arrayOf(PropTypes.any), + value: PropTypes.arrayOf(PropTypes.object), /** * The visible view. * Used when the component view is controlled. diff --git a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.types.ts b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.types.ts index e7d18f3c649b9..de00d8476319d 100644 --- a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.types.ts @@ -1,4 +1,5 @@ import { MakeOptional } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseMobileRangePickerSlots, UseMobileRangePickerSlotProps, @@ -11,15 +12,15 @@ import { } from '../DateTimeRangePicker/shared'; import { DateTimeRangePickerView } from '../internals/models'; -export interface MobileDateTimeRangePickerSlots +export interface MobileDateTimeRangePickerSlots extends BaseDateTimeRangePickerSlots, MakeOptional, 'field'> {} -export interface MobileDateTimeRangePickerSlotProps +export interface MobileDateTimeRangePickerSlotProps extends BaseDateTimeRangePickerSlotProps, Omit, 'tabs' | 'toolbar'> {} -export interface MobileDateTimeRangePickerProps +export interface MobileDateTimeRangePickerProps extends BaseDateTimeRangePickerProps, MobileRangeOnlyPickerProps { /** diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx index 31242ffb5927a..6cc3b8d20e970 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx @@ -16,6 +16,7 @@ import { FieldsTextFieldProps, convertFieldResponseIntoMuiTextFieldProps, } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { MultiInputDateRangeFieldProps } from './MultiInputDateRangeField.types'; import { useMultiInputDateRangeField } from '../internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField'; import { UseDateRangeFieldProps } from '../internals/models/dateRange'; @@ -59,7 +60,7 @@ const MultiInputDateRangeFieldSeparator = styled( }, )({}); -type MultiInputDateRangeFieldComponent = (( +type MultiInputDateRangeFieldComponent = (( props: MultiInputDateRangeFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -73,10 +74,9 @@ type MultiInputDateRangeFieldComponent = (( * * - [MultiInputDateRangeField API](https://mui.com/x/api/multi-input-date-range-field/) */ -const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeField( - inProps: MultiInputDateRangeFieldProps, - ref: React.Ref, -) { +const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeField< + TDate extends PickerValidDate, +>(inProps: MultiInputDateRangeFieldProps, ref: React.Ref) { const themeProps = useThemeProps({ props: inProps, name: 'MuiMultiInputDateRangeField', @@ -173,7 +173,7 @@ MultiInputDateRangeField.propTypes = { /** * The default value. Use when the component is not controlled. */ - defaultValue: PropTypes.arrayOf(PropTypes.any), + defaultValue: PropTypes.arrayOf(PropTypes.object), /** * Defines the `flex-direction` style property. * It is applied for all screen sizes. @@ -216,11 +216,11 @@ MultiInputDateRangeField.propTypes = { /** * Maximal selectable date. */ - maxDate: PropTypes.any, + maxDate: PropTypes.object, /** * Minimal selectable date. */ - minDate: PropTypes.any, + minDate: PropTypes.object, /** * Callback fired when the value changes. * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value. @@ -253,7 +253,7 @@ MultiInputDateRangeField.propTypes = { * For example, on time fields it will be used to determine the date to set. * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * The currently selected sections. * This prop accept four formats: @@ -361,7 +361,7 @@ MultiInputDateRangeField.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.arrayOf(PropTypes.any), + value: PropTypes.arrayOf(PropTypes.object), } as any; export { MultiInputDateRangeField }; diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts index 9638f73727ac5..8b741a80e9201 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { SlotComponentProps } from '@mui/base/utils'; import Typography from '@mui/material/Typography'; import Stack, { StackProps } from '@mui/material/Stack'; @@ -9,21 +10,21 @@ import { MultiInputFieldRefs } from '../internals/models/fields'; import { MultiInputRangeFieldClasses, RangePosition } from '../models'; export type UseMultiInputDateRangeFieldParams< - TDate, + TDate extends PickerValidDate, TTextFieldSlotProps extends {}, > = UseMultiInputRangeFieldParams, TTextFieldSlotProps>; -export interface UseMultiInputDateRangeFieldProps +export interface UseMultiInputDateRangeFieldProps extends Omit, 'unstableFieldRef' | 'clearable' | 'onClear'>, MultiInputFieldRefs {} -export type UseMultiInputDateRangeFieldComponentProps = Omit< - TChildProps, - keyof UseMultiInputDateRangeFieldProps -> & +export type UseMultiInputDateRangeFieldComponentProps< + TDate extends PickerValidDate, + TChildProps extends {}, +> = Omit> & UseMultiInputDateRangeFieldProps; -export interface MultiInputDateRangeFieldProps +export interface MultiInputDateRangeFieldProps extends UseMultiInputDateRangeFieldComponentProps> { autoFocus?: boolean; /** @@ -42,7 +43,8 @@ export interface MultiInputDateRangeFieldProps slotProps?: MultiInputDateRangeFieldSlotProps; } -export type MultiInputDateRangeFieldOwnerState = MultiInputDateRangeFieldProps; +export type MultiInputDateRangeFieldOwnerState = + MultiInputDateRangeFieldProps; export interface MultiInputDateRangeFieldSlots { /** @@ -64,7 +66,7 @@ export interface MultiInputDateRangeFieldSlots { separator?: React.ElementType; } -export interface MultiInputDateRangeFieldSlotProps { +export interface MultiInputDateRangeFieldSlotProps { root?: SlotComponentProps>; textField?: SlotComponentProps< typeof TextField, diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx index 3820e3f57814c..64ec39d23c327 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx @@ -16,6 +16,7 @@ import { FieldsTextFieldProps, convertFieldResponseIntoMuiTextFieldProps, } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { MultiInputDateTimeRangeFieldProps } from './MultiInputDateTimeRangeField.types'; import { useMultiInputDateTimeRangeField } from '../internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField'; import { UseDateTimeRangeFieldProps } from '../internals/models/dateTimeRange'; @@ -57,7 +58,7 @@ const MultiInputDateTimeRangeFieldSeparator = styled( }, )({}); -type MultiInputDateTimeRangeFieldComponent = (( +type MultiInputDateTimeRangeFieldComponent = (( props: MultiInputDateTimeRangeFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -71,10 +72,9 @@ type MultiInputDateTimeRangeFieldComponent = (( * * - [MultiInputDateTimeRangeField API](https://mui.com/x/api/multi-input-date-time-range-field/) */ -const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTimeRangeField( - inProps: MultiInputDateTimeRangeFieldProps, - ref: React.Ref, -) { +const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTimeRangeField< + TDate extends PickerValidDate, +>(inProps: MultiInputDateTimeRangeFieldProps, ref: React.Ref) { const themeProps = useThemeProps({ props: inProps, name: 'MuiMultiInputDateTimeRangeField', @@ -176,7 +176,7 @@ MultiInputDateTimeRangeField.propTypes = { /** * The default value. Use when the component is not controlled. */ - defaultValue: PropTypes.arrayOf(PropTypes.any), + defaultValue: PropTypes.arrayOf(PropTypes.object), /** * Defines the `flex-direction` style property. * It is applied for all screen sizes. @@ -224,29 +224,29 @@ MultiInputDateTimeRangeField.propTypes = { /** * Maximal selectable date. */ - maxDate: PropTypes.any, + maxDate: PropTypes.object, /** * Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */ - maxDateTime: PropTypes.any, + maxDateTime: PropTypes.object, /** * Maximal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - maxTime: PropTypes.any, + maxTime: PropTypes.object, /** * Minimal selectable date. */ - minDate: PropTypes.any, + minDate: PropTypes.object, /** * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */ - minDateTime: PropTypes.any, + minDateTime: PropTypes.object, /** * Minimal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - minTime: PropTypes.any, + minTime: PropTypes.object, /** * Step over minutes. * @default 1 @@ -284,7 +284,7 @@ MultiInputDateTimeRangeField.propTypes = { * For example, on time fields it will be used to determine the date to set. * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * The currently selected sections. * This prop accept four formats: @@ -400,7 +400,7 @@ MultiInputDateTimeRangeField.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.arrayOf(PropTypes.any), + value: PropTypes.arrayOf(PropTypes.object), } as any; export { MultiInputDateTimeRangeField }; diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts index 3189bf67c2b7c..f83594e58fb1f 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts @@ -3,6 +3,7 @@ import { SlotComponentProps } from '@mui/base/utils'; import Typography from '@mui/material/Typography'; import Stack, { StackProps } from '@mui/material/Stack'; import TextField from '@mui/material/TextField'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseDateTimeRangeFieldDefaultizedProps, UseDateTimeRangeFieldProps, @@ -12,21 +13,21 @@ import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputR import { MultiInputRangeFieldClasses, RangePosition } from '../models'; export type UseMultiInputDateTimeRangeFieldParams< - TDate, + TDate extends PickerValidDate, TTextFieldSlotProps extends {}, > = UseMultiInputRangeFieldParams, TTextFieldSlotProps>; -export interface UseMultiInputDateTimeRangeFieldProps +export interface UseMultiInputDateTimeRangeFieldProps extends Omit, 'unstableFieldRef' | 'clearable' | 'onClear'>, MultiInputFieldRefs {} -export type UseMultiInputDateTimeRangeFieldComponentProps = Omit< - TChildProps, - keyof UseMultiInputDateTimeRangeFieldProps -> & +export type UseMultiInputDateTimeRangeFieldComponentProps< + TDate extends PickerValidDate, + TChildProps extends {}, +> = Omit> & UseMultiInputDateTimeRangeFieldProps; -export interface MultiInputDateTimeRangeFieldProps +export interface MultiInputDateTimeRangeFieldProps extends UseMultiInputDateTimeRangeFieldComponentProps> { autoFocus?: boolean; /** @@ -45,7 +46,7 @@ export interface MultiInputDateTimeRangeFieldProps slotProps?: MultiInputDateTimeRangeFieldSlotProps; } -export type MultiInputDateTimeRangeFieldOwnerState = +export type MultiInputDateTimeRangeFieldOwnerState = MultiInputDateTimeRangeFieldProps; export interface MultiInputDateTimeRangeFieldSlots { @@ -68,7 +69,7 @@ export interface MultiInputDateTimeRangeFieldSlots { separator?: React.ElementType; } -export interface MultiInputDateTimeRangeFieldSlotProps { +export interface MultiInputDateTimeRangeFieldSlotProps { root?: SlotComponentProps>; textField?: SlotComponentProps< typeof TextField, @@ -83,7 +84,7 @@ export interface MultiInputDateTimeRangeFieldSlotProps { } export type UseMultiInputDateTimeRangeFieldDefaultizedProps< - TDate, + TDate extends PickerValidDate, AdditionalProps extends {}, > = UseDateTimeRangeFieldDefaultizedProps & Omit; diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx index 0cc0564271325..03ad3860bce26 100644 --- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx @@ -16,6 +16,7 @@ import { FieldsTextFieldProps, convertFieldResponseIntoMuiTextFieldProps, } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { MultiInputTimeRangeFieldProps } from './MultiInputTimeRangeField.types'; import { useMultiInputTimeRangeField } from '../internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField'; import { UseTimeRangeFieldProps } from '../internals/models/timeRange'; @@ -59,7 +60,7 @@ const MultiInputTimeRangeFieldSeparator = styled( }, )({}); -type MultiInputTimeRangeFieldComponent = (( +type MultiInputTimeRangeFieldComponent = (( props: MultiInputTimeRangeFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -73,10 +74,9 @@ type MultiInputTimeRangeFieldComponent = (( * * - [MultiInputTimeRangeField API](https://mui.com/x/api/multi-input-time-range-field/) */ -const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeField( - inProps: MultiInputTimeRangeFieldProps, - ref: React.Ref, -) { +const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeField< + TDate extends PickerValidDate, +>(inProps: MultiInputTimeRangeFieldProps, ref: React.Ref) { const themeProps = useThemeProps({ props: inProps, name: 'MuiMultiInputTimeRangeField', @@ -179,7 +179,7 @@ MultiInputTimeRangeField.propTypes = { /** * The default value. Use when the component is not controlled. */ - defaultValue: PropTypes.arrayOf(PropTypes.any), + defaultValue: PropTypes.arrayOf(PropTypes.object), /** * Defines the `flex-direction` style property. * It is applied for all screen sizes. @@ -228,12 +228,12 @@ MultiInputTimeRangeField.propTypes = { * Maximal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - maxTime: PropTypes.any, + maxTime: PropTypes.object, /** * Minimal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - minTime: PropTypes.any, + minTime: PropTypes.object, /** * Step over minutes. * @default 1 @@ -271,7 +271,7 @@ MultiInputTimeRangeField.propTypes = { * For example, on time fields it will be used to determine the date to set. * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * The currently selected sections. * This prop accept four formats: @@ -376,7 +376,7 @@ MultiInputTimeRangeField.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.arrayOf(PropTypes.any), + value: PropTypes.arrayOf(PropTypes.object), } as any; export { MultiInputTimeRangeField }; diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts index 8cd1cb9682d5e..3dde1f4009337 100644 --- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts @@ -3,6 +3,7 @@ import { SlotComponentProps } from '@mui/base/utils'; import Typography from '@mui/material/Typography'; import Stack, { StackProps } from '@mui/material/Stack'; import TextField from '@mui/material/TextField'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseTimeRangeFieldDefaultizedProps, UseTimeRangeFieldProps, @@ -12,21 +13,21 @@ import { MultiInputFieldRefs } from '../internals/models/fields'; import { MultiInputRangeFieldClasses, RangePosition } from '../models'; export type UseMultiInputTimeRangeFieldParams< - TDate, + TDate extends PickerValidDate, TTextFieldSlotProps extends {}, > = UseMultiInputRangeFieldParams, TTextFieldSlotProps>; -export interface UseMultiInputTimeRangeFieldProps +export interface UseMultiInputTimeRangeFieldProps extends Omit, 'unstableFieldRef' | 'clearable' | 'onClear'>, MultiInputFieldRefs {} -export type UseMultiInputTimeRangeFieldComponentProps = Omit< - TChildProps, - keyof UseMultiInputTimeRangeFieldProps -> & +export type UseMultiInputTimeRangeFieldComponentProps< + TDate extends PickerValidDate, + TChildProps extends {}, +> = Omit> & UseMultiInputTimeRangeFieldProps; -export interface MultiInputTimeRangeFieldProps +export interface MultiInputTimeRangeFieldProps extends UseMultiInputTimeRangeFieldComponentProps> { autoFocus?: boolean; /** @@ -45,7 +46,8 @@ export interface MultiInputTimeRangeFieldProps slotProps?: MultiInputTimeRangeFieldSlotProps; } -export type MultiInputTimeRangeFieldOwnerState = MultiInputTimeRangeFieldProps; +export type MultiInputTimeRangeFieldOwnerState = + MultiInputTimeRangeFieldProps; export interface MultiInputTimeRangeFieldSlots { /** @@ -67,7 +69,7 @@ export interface MultiInputTimeRangeFieldSlots { separator?: React.ElementType; } -export interface MultiInputTimeRangeFieldSlotProps { +export interface MultiInputTimeRangeFieldSlotProps { root?: SlotComponentProps>; textField?: SlotComponentProps< typeof TextField, @@ -78,7 +80,7 @@ export interface MultiInputTimeRangeFieldSlotProps { } export type UseMultiInputTimeRangeFieldDefaultizedProps< - TDate, + TDate extends PickerValidDate, AdditionalProps extends {}, > = UseTimeRangeFieldDefaultizedProps & Omit; diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx index 79fdcbfcb1ff8..ca3db91f8151f 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx @@ -5,6 +5,7 @@ import { useThemeProps } from '@mui/material/styles'; import { useSlotProps } from '@mui/base/utils'; import { useClearableField } from '@mui/x-date-pickers/hooks'; import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { refType } from '@mui/utils'; import { SingleInputDateRangeFieldProps, @@ -13,7 +14,7 @@ import { import { useSingleInputDateRangeField } from './useSingleInputDateRangeField'; import { FieldType } from '../internals/models'; -type DateRangeFieldComponent = (( +type DateRangeFieldComponent = (( props: SingleInputDateRangeFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any; fieldType?: FieldType }; @@ -27,10 +28,9 @@ type DateRangeFieldComponent = (( * * - [SingleInputDateRangeField API](https://mui.com/x/api/single-input-date-range-field/) */ -const SingleInputDateRangeField = React.forwardRef(function SingleInputDateRangeField( - inProps: SingleInputDateRangeFieldProps, - inRef: React.Ref, -) { +const SingleInputDateRangeField = React.forwardRef(function SingleInputDateRangeField< + TDate extends PickerValidDate, +>(inProps: SingleInputDateRangeFieldProps, inRef: React.Ref) { const themeProps = useThemeProps({ props: inProps, name: 'MuiSingleInputDateRangeField', @@ -101,7 +101,7 @@ SingleInputDateRangeField.propTypes = { /** * The default value. Use when the component is not controlled. */ - defaultValue: PropTypes.arrayOf(PropTypes.any), + defaultValue: PropTypes.arrayOf(PropTypes.object), /** * If `true`, the component is disabled. * @default false @@ -188,11 +188,11 @@ SingleInputDateRangeField.propTypes = { /** * Maximal selectable date. */ - maxDate: PropTypes.any, + maxDate: PropTypes.object, /** * Minimal selectable date. */ - minDate: PropTypes.any, + minDate: PropTypes.object, /** * Name attribute of the `input` element. */ @@ -235,7 +235,7 @@ SingleInputDateRangeField.propTypes = { * For example, on time fields it will be used to determine the date to set. * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * If `true`, the label is displayed as required and the `input` element is required. * @default false @@ -334,7 +334,7 @@ SingleInputDateRangeField.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.arrayOf(PropTypes.any), + value: PropTypes.arrayOf(PropTypes.object), /** * The variant to use. * @default 'outlined' diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts index 82aab457b364c..8e022305bf596 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts @@ -2,25 +2,27 @@ import * as React from 'react'; import { SlotComponentProps } from '@mui/base/utils'; import TextField from '@mui/material/TextField'; import { FieldsTextFieldProps } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseClearableFieldSlots, UseClearableFieldSlotProps } from '@mui/x-date-pickers/hooks'; import { UseDateRangeFieldDefaultizedProps, UseDateRangeFieldProps } from '../internals/models'; -export interface UseSingleInputDateRangeFieldProps extends UseDateRangeFieldProps {} +export interface UseSingleInputDateRangeFieldProps + extends UseDateRangeFieldProps {} export type UseSingleInputDateRangeFieldDefaultizedProps< - TDate, + TDate extends PickerValidDate, AdditionalProps extends {}, > = UseDateRangeFieldDefaultizedProps & Omit; -export type UseSingleInputDateRangeFieldComponentProps = Omit< - TChildProps, - keyof UseSingleInputDateRangeFieldProps -> & +export type UseSingleInputDateRangeFieldComponentProps< + TDate extends PickerValidDate, + TChildProps extends {}, +> = Omit> & UseSingleInputDateRangeFieldProps; export type SingleInputDateRangeFieldProps< - TDate, + TDate extends PickerValidDate, TChildProps extends {} = FieldsTextFieldProps, > = UseSingleInputDateRangeFieldComponentProps & { /** @@ -35,7 +37,8 @@ export type SingleInputDateRangeFieldProps< slotProps?: SingleInputDateRangeFieldSlotProps; }; -export type SingleInputDateRangeFieldOwnerState = SingleInputDateRangeFieldProps; +export type SingleInputDateRangeFieldOwnerState = + SingleInputDateRangeFieldProps; export interface SingleInputDateRangeFieldSlots extends UseClearableFieldSlots { /** @@ -46,6 +49,7 @@ export interface SingleInputDateRangeFieldSlots extends UseClearableFieldSlots { textField?: React.ElementType; } -export interface SingleInputDateRangeFieldSlotProps extends UseClearableFieldSlotProps { +export interface SingleInputDateRangeFieldSlotProps + extends UseClearableFieldSlotProps { textField?: SlotComponentProps>; } diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts index e4fd9f760d11a..267533708dcb5 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts @@ -5,6 +5,7 @@ import { useField, splitFieldInternalAndForwardedProps, } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseSingleInputDateRangeFieldComponentProps, UseSingleInputDateRangeFieldDefaultizedProps, @@ -13,7 +14,10 @@ import { import { rangeValueManager, rangeFieldValueManager } from '../internals/utils/valueManagers'; import { validateDateRange } from '../internals/utils/validation/validateDateRange'; -export const useDefaultizedDateRangeFieldProps = ( +export const useDefaultizedDateRangeFieldProps = < + TDate extends PickerValidDate, + AdditionalProps extends {}, +>( props: UseSingleInputDateRangeFieldProps, ): UseSingleInputDateRangeFieldDefaultizedProps => { const utils = useUtils(); @@ -29,7 +33,7 @@ export const useDefaultizedDateRangeFieldProps = ( +export const useSingleInputDateRangeField = ( inProps: UseSingleInputDateRangeFieldComponentProps, ) => { const props = useDefaultizedDateRangeFieldProps(inProps); diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx index 1afa9c2ddc87d..f2635d79d128a 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx @@ -5,6 +5,7 @@ import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/i import { useThemeProps } from '@mui/material/styles'; import { useSlotProps } from '@mui/base/utils'; import { useClearableField } from '@mui/x-date-pickers/hooks'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { refType } from '@mui/utils'; import { SingleInputDateTimeRangeFieldProps, @@ -13,7 +14,7 @@ import { import { useSingleInputDateTimeRangeField } from './useSingleInputDateTimeRangeField'; import { FieldType } from '../internals/models'; -type DateRangeFieldComponent = (( +type DateRangeFieldComponent = (( props: SingleInputDateTimeRangeFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any; fieldType?: FieldType }; @@ -28,7 +29,7 @@ type DateRangeFieldComponent = (( * - [SingleInputDateTimeRangeField API](https://mui.com/x/api/single-input-date-time-range-field/) */ const SingleInputDateTimeRangeField = React.forwardRef(function SingleInputDateTimeRangeField< - TDate, + TDate extends PickerValidDate, >(inProps: SingleInputDateTimeRangeFieldProps, inRef: React.Ref) { const themeProps = useThemeProps({ props: inProps, @@ -107,7 +108,7 @@ SingleInputDateTimeRangeField.propTypes = { /** * The default value. Use when the component is not controlled. */ - defaultValue: PropTypes.arrayOf(PropTypes.any), + defaultValue: PropTypes.arrayOf(PropTypes.object), /** * If `true`, the component is disabled. * @default false @@ -199,29 +200,29 @@ SingleInputDateTimeRangeField.propTypes = { /** * Maximal selectable date. */ - maxDate: PropTypes.any, + maxDate: PropTypes.object, /** * Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */ - maxDateTime: PropTypes.any, + maxDateTime: PropTypes.object, /** * Maximal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - maxTime: PropTypes.any, + maxTime: PropTypes.object, /** * Minimal selectable date. */ - minDate: PropTypes.any, + minDate: PropTypes.object, /** * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */ - minDateTime: PropTypes.any, + minDateTime: PropTypes.object, /** * Minimal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - minTime: PropTypes.any, + minTime: PropTypes.object, /** * Step over minutes. * @default 1 @@ -269,7 +270,7 @@ SingleInputDateTimeRangeField.propTypes = { * For example, on time fields it will be used to determine the date to set. * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * If `true`, the label is displayed as required and the `input` element is required. * @default false @@ -376,7 +377,7 @@ SingleInputDateTimeRangeField.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.arrayOf(PropTypes.any), + value: PropTypes.arrayOf(PropTypes.object), /** * The variant to use. * @default 'outlined' diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts index 1dfb93aeeec09..9a6b6b88d7fc0 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts @@ -3,26 +3,27 @@ import { SlotComponentProps } from '@mui/base/utils'; import TextField from '@mui/material/TextField'; import { FieldsTextFieldProps } from '@mui/x-date-pickers/internals'; import { UseClearableFieldSlots, UseClearableFieldSlotProps } from '@mui/x-date-pickers/hooks'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseDateTimeRangeFieldDefaultizedProps, UseDateTimeRangeFieldProps, } from '../internals/models'; -export interface UseSingleInputDateTimeRangeFieldProps +export interface UseSingleInputDateTimeRangeFieldProps extends UseDateTimeRangeFieldProps {} export type UseSingleInputDateTimeRangeFieldDefaultizedProps< - TDate, + TDate extends PickerValidDate, AdditionalProps extends {}, > = UseDateTimeRangeFieldDefaultizedProps & AdditionalProps; -export type UseSingleInputDateTimeRangeFieldComponentProps = Omit< - TChildProps, - keyof UseSingleInputDateTimeRangeFieldProps -> & +export type UseSingleInputDateTimeRangeFieldComponentProps< + TDate extends PickerValidDate, + TChildProps extends {}, +> = Omit> & UseSingleInputDateTimeRangeFieldProps; -export interface SingleInputDateTimeRangeFieldProps +export interface SingleInputDateTimeRangeFieldProps extends UseSingleInputDateTimeRangeFieldComponentProps { /** * Overridable component slots. @@ -36,7 +37,7 @@ export interface SingleInputDateTimeRangeFieldProps slotProps?: SingleInputDateTimeRangeFieldSlotProps; } -export type SingleInputDateTimeRangeFieldOwnerState = +export type SingleInputDateTimeRangeFieldOwnerState = SingleInputDateTimeRangeFieldProps; export interface SingleInputDateTimeRangeFieldSlots extends UseClearableFieldSlots { @@ -48,7 +49,8 @@ export interface SingleInputDateTimeRangeFieldSlots extends UseClearableFieldSlo textField?: React.ElementType; } -export interface SingleInputDateTimeRangeFieldSlotProps extends UseClearableFieldSlotProps { +export interface SingleInputDateTimeRangeFieldSlotProps + extends UseClearableFieldSlotProps { textField?: SlotComponentProps< typeof TextField, {}, diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts index 815b8f7ae74f0..d6afd05119409 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts @@ -5,6 +5,7 @@ import { useDefaultDates, splitFieldInternalAndForwardedProps, } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseSingleInputDateTimeRangeFieldComponentProps, UseSingleInputDateTimeRangeFieldDefaultizedProps, @@ -13,7 +14,10 @@ import { import { rangeValueManager, rangeFieldValueManager } from '../internals/utils/valueManagers'; import { validateDateTimeRange } from '../internals/utils/validation/validateDateTimeRange'; -export const useDefaultizedTimeRangeFieldProps = ( +export const useDefaultizedTimeRangeFieldProps = < + TDate extends PickerValidDate, + AdditionalProps extends {}, +>( props: UseSingleInputDateTimeRangeFieldProps, ): UseSingleInputDateTimeRangeFieldDefaultizedProps => { const utils = useUtils(); @@ -37,7 +41,10 @@ export const useDefaultizedTimeRangeFieldProps = ( +export const useSingleInputDateTimeRangeField = < + TDate extends PickerValidDate, + TChildProps extends {}, +>( inProps: UseSingleInputDateTimeRangeFieldComponentProps, ) => { const props = useDefaultizedTimeRangeFieldProps(inProps); diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx index 64050ad98d9a9..c719820f233f7 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import MuiTextField from '@mui/material/TextField'; import { useClearableField } from '@mui/x-date-pickers/hooks'; import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { useThemeProps } from '@mui/material/styles'; import { useSlotProps } from '@mui/base/utils'; import { refType } from '@mui/utils'; @@ -13,7 +14,7 @@ import { import { useSingleInputTimeRangeField } from './useSingleInputTimeRangeField'; import { FieldType } from '../internals/models'; -type DateRangeFieldComponent = (( +type DateRangeFieldComponent = (( props: SingleInputTimeRangeFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any; fieldType?: FieldType }; @@ -27,10 +28,9 @@ type DateRangeFieldComponent = (( * * - [SingleInputTimeRangeField API](https://mui.com/x/api/single-input-time-range-field/) */ -const SingleInputTimeRangeField = React.forwardRef(function SingleInputTimeRangeField( - inProps: SingleInputTimeRangeFieldProps, - inRef: React.Ref, -) { +const SingleInputTimeRangeField = React.forwardRef(function SingleInputTimeRangeField< + TDate extends PickerValidDate, +>(inProps: SingleInputTimeRangeFieldProps, inRef: React.Ref) { const themeProps = useThemeProps({ props: inProps, name: 'MuiSingleInputTimeRangeField', @@ -106,7 +106,7 @@ SingleInputTimeRangeField.propTypes = { /** * The default value. Use when the component is not controlled. */ - defaultValue: PropTypes.arrayOf(PropTypes.any), + defaultValue: PropTypes.arrayOf(PropTypes.object), /** * If `true`, the component is disabled. * @default false @@ -199,12 +199,12 @@ SingleInputTimeRangeField.propTypes = { * Maximal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - maxTime: PropTypes.any, + maxTime: PropTypes.object, /** * Minimal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - minTime: PropTypes.any, + minTime: PropTypes.object, /** * Step over minutes. * @default 1 @@ -252,7 +252,7 @@ SingleInputTimeRangeField.propTypes = { * For example, on time fields it will be used to determine the date to set. * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * If `true`, the label is displayed as required and the `input` element is required. * @default false @@ -348,7 +348,7 @@ SingleInputTimeRangeField.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.arrayOf(PropTypes.any), + value: PropTypes.arrayOf(PropTypes.object), /** * The variant to use. * @default 'outlined' diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts index aee8a1558ebcc..2145337104a91 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts @@ -2,23 +2,25 @@ import * as React from 'react'; import { SlotComponentProps } from '@mui/base/utils'; import TextField from '@mui/material/TextField'; import { FieldsTextFieldProps } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseClearableFieldSlots, UseClearableFieldSlotProps } from '@mui/x-date-pickers/hooks'; import { UseTimeRangeFieldDefaultizedProps, UseTimeRangeFieldProps } from '../internals/models'; -export interface UseSingleInputTimeRangeFieldProps extends UseTimeRangeFieldProps {} +export interface UseSingleInputTimeRangeFieldProps + extends UseTimeRangeFieldProps {} export type UseSingleInputTimeRangeFieldDefaultizedProps< - TDate, + TDate extends PickerValidDate, AdditionalProps extends {}, > = UseTimeRangeFieldDefaultizedProps & AdditionalProps; -export type UseSingleInputTimeRangeFieldComponentProps = Omit< - TChildProps, - keyof UseSingleInputTimeRangeFieldProps -> & +export type UseSingleInputTimeRangeFieldComponentProps< + TDate extends PickerValidDate, + TChildProps extends {}, +> = Omit> & UseSingleInputTimeRangeFieldProps; -export interface SingleInputTimeRangeFieldProps +export interface SingleInputTimeRangeFieldProps extends UseSingleInputTimeRangeFieldComponentProps { /** * Overridable component slots. @@ -32,7 +34,8 @@ export interface SingleInputTimeRangeFieldProps slotProps?: SingleInputTimeRangeFieldSlotProps; } -export type SingleInputTimeRangeFieldOwnerState = SingleInputTimeRangeFieldProps; +export type SingleInputTimeRangeFieldOwnerState = + SingleInputTimeRangeFieldProps; export interface SingleInputTimeRangeFieldSlots extends UseClearableFieldSlots { /** @@ -43,6 +46,7 @@ export interface SingleInputTimeRangeFieldSlots extends UseClearableFieldSlots { textField?: React.ElementType; } -export interface SingleInputTimeRangeFieldSlotProps extends UseClearableFieldSlotProps { +export interface SingleInputTimeRangeFieldSlotProps + extends UseClearableFieldSlotProps { textField?: SlotComponentProps>; } diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts index dc016b777afe6..92de900e89e66 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts @@ -3,6 +3,7 @@ import { useField, splitFieldInternalAndForwardedProps, } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseSingleInputTimeRangeFieldComponentProps, UseSingleInputTimeRangeFieldDefaultizedProps, @@ -11,7 +12,10 @@ import { import { rangeValueManager, rangeFieldValueManager } from '../internals/utils/valueManagers'; import { validateTimeRange } from '../internals/utils/validation/validateTimeRange'; -export const useDefaultizedTimeRangeFieldProps = ( +export const useDefaultizedTimeRangeFieldProps = < + TDate extends PickerValidDate, + AdditionalProps extends {}, +>( props: UseSingleInputTimeRangeFieldProps, ): UseSingleInputTimeRangeFieldDefaultizedProps => { const utils = useUtils(); @@ -27,7 +31,7 @@ export const useDefaultizedTimeRangeFieldProps = ( +export const useSingleInputTimeRangeField = ( inProps: UseSingleInputTimeRangeFieldComponentProps, ) => { const props = useDefaultizedTimeRangeFieldProps(inProps); diff --git a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx index a77cd758fdd81..58ac192fe5c84 100644 --- a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { PickerViewRendererLookup } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { useStaticRangePicker } from '../internals/hooks/useStaticRangePicker'; import { StaticDateRangePickerProps } from './StaticDateRangePicker.types'; import { useDateRangePickerDefaultizedProps } from '../DateRangePicker/shared'; @@ -9,7 +10,7 @@ import { rangeValueManager } from '../internals/utils/valueManagers'; import { validateDateRange } from '../internals/utils/validation/validateDateRange'; import { DateRange } from '../models'; -type StaticDateRangePickerComponent = (( +type StaticDateRangePickerComponent = (( props: StaticDateRangePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -23,10 +24,9 @@ type StaticDateRangePickerComponent = (( * * - [StaticDateRangePicker API](https://mui.com/x/api/date-pickers/static-date-range-picker/) */ -const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker( - inProps: StaticDateRangePickerProps, - ref: React.Ref, -) { +const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker< + TDate extends PickerValidDate, +>(inProps: StaticDateRangePickerProps, ref: React.Ref) { const defaultizedProps = useDateRangePickerDefaultizedProps< TDate, StaticDateRangePickerProps @@ -107,7 +107,7 @@ StaticDateRangePicker.propTypes = { * The default value. * Used when the component is not controlled. */ - defaultValue: PropTypes.arrayOf(PropTypes.any), + defaultValue: PropTypes.arrayOf(PropTypes.object), /** * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date. * @default false @@ -167,11 +167,11 @@ StaticDateRangePicker.propTypes = { /** * Maximal selectable date. */ - maxDate: PropTypes.any, + maxDate: PropTypes.object, /** * Minimal selectable date. */ - minDate: PropTypes.any, + minDate: PropTypes.object, /** * Callback fired when the value is accepted. * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value. @@ -228,7 +228,7 @@ StaticDateRangePicker.propTypes = { * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * Component rendered on the "day" view when `props.loading` is true. * @returns {React.ReactNode} The node to render when loading. @@ -287,7 +287,7 @@ StaticDateRangePicker.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.arrayOf(PropTypes.any), + value: PropTypes.arrayOf(PropTypes.object), /** * Define custom view renderers for each section. * If `null`, the section will only have field editing. diff --git a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.types.ts b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.types.ts index 1f4c529a9ac1e..78406f30dc31c 100644 --- a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.types.ts @@ -1,4 +1,5 @@ import { MakeOptional } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { StaticRangeOnlyPickerProps, UseStaticRangePickerSlots, @@ -10,15 +11,15 @@ import { BaseDateRangePickerSlotProps, } from '../DateRangePicker/shared'; -export interface StaticDateRangePickerSlots +export interface StaticDateRangePickerSlots extends BaseDateRangePickerSlots, UseStaticRangePickerSlots {} -export interface StaticDateRangePickerSlotProps +export interface StaticDateRangePickerSlotProps extends BaseDateRangePickerSlotProps, UseStaticRangePickerSlotProps {} -export interface StaticDateRangePickerProps +export interface StaticDateRangePickerProps extends BaseDateRangePickerProps, MakeOptional { /** diff --git a/packages/x-date-pickers-pro/src/dateRangeViewRenderers/dateRangeViewRenderers.tsx b/packages/x-date-pickers-pro/src/dateRangeViewRenderers/dateRangeViewRenderers.tsx index 5f557b87785ee..7253a0cd14c85 100644 --- a/packages/x-date-pickers-pro/src/dateRangeViewRenderers/dateRangeViewRenderers.tsx +++ b/packages/x-date-pickers-pro/src/dateRangeViewRenderers/dateRangeViewRenderers.tsx @@ -1,9 +1,12 @@ import * as React from 'react'; import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { DateRangeCalendar, DateRangeCalendarProps } from '../DateRangeCalendar'; -export interface DateRangeViewRendererProps - extends Omit, 'views'> { +export interface DateRangeViewRendererProps< + TDate extends PickerValidDate, + TView extends DateOrTimeViewWithMeridiem, +> extends Omit, 'views'> { views: readonly TView[]; } @@ -11,7 +14,7 @@ export interface DateRangeViewRendererProps({ +export const renderDateRangeViewCalendar = ({ value, defaultValue, referenceDate, diff --git a/packages/x-date-pickers-pro/src/index.ts b/packages/x-date-pickers-pro/src/index.ts index 84bd43757e4fd..b38a8da338127 100644 --- a/packages/x-date-pickers-pro/src/index.ts +++ b/packages/x-date-pickers-pro/src/index.ts @@ -1,4 +1,10 @@ -export { LicenseInfo } from '@mui/x-license-pro'; +import { LicenseInfo as LicenseInfoExport } from '@mui/x-license'; +/** + * @deprecated Use `@mui/x-license` package instead: + * @example import { LicenseInfo } from '@mui/x-license'; + */ +export class LicenseInfo extends LicenseInfoExport {} + export * from '@mui/x-date-pickers'; export * from './DateRangePickerDay'; diff --git a/packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts b/packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts index a4239295a40e2..9c78331a02851 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts @@ -9,6 +9,7 @@ import { DateOrTimeViewWithMeridiem, ExportedBaseTabsProps, } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, @@ -21,26 +22,30 @@ import { } from '../useEnrichedRangePickerFieldProps'; import { DateRange } from '../../../models'; -export interface UseRangePickerSlots - extends ExportedPickersLayoutSlots, TDate, TView>, +export interface UseRangePickerSlots< + TDate extends PickerValidDate, + TView extends DateOrTimeViewWithMeridiem, +> extends ExportedPickersLayoutSlots, TDate, TView>, RangePickerFieldSlots {} -export interface UseRangePickerSlotProps - extends ExportedPickersLayoutSlotProps, TDate, TView>, +export interface UseRangePickerSlotProps< + TDate extends PickerValidDate, + TView extends DateOrTimeViewWithMeridiem, +> extends ExportedPickersLayoutSlotProps, TDate, TView>, RangePickerFieldSlotProps { tabs?: ExportedBaseTabsProps; toolbar?: ExportedBaseToolbarProps; } -export interface RangeOnlyPickerProps +export interface RangeOnlyPickerProps extends BaseNonStaticPickerProps, - UsePickerValueNonStaticProps, + UsePickerValueNonStaticProps, RangeFieldSection>, UsePickerViewsNonStaticProps, BaseRangeNonStaticPickerProps, UseRangePositionProps {} export interface UseRangePickerProps< - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps, @@ -52,7 +57,7 @@ export interface RangePickerAdditionalViewProps extends Pick {} export interface UseRangePickerParams< - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseRangePickerProps< TDate, diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx b/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx index d52fe387b6e7e..52bf5c8e3e0d5 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { useSlotProps } from '@mui/base/utils'; -import { useLicenseVerifier } from '@mui/x-license-pro'; +import { useLicenseVerifier } from '@mui/x-license'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { PickersLayout, PickersLayoutSlotProps } from '@mui/x-date-pickers/PickersLayout'; import { @@ -15,6 +15,7 @@ import { UsePickerValueFieldResponse, ExportedBaseTabsProps, } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { DesktopRangePickerAdditionalViewProps, UseDesktopRangePickerParams, @@ -30,7 +31,7 @@ import { useRangePosition } from '../useRangePosition'; const releaseInfo = getReleaseInfo(); export const useDesktopRangePicker = < - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseDesktopRangePickerProps, >({ diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.ts b/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.ts index b2fa4f0681e0c..a98872b25d9eb 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.ts @@ -4,6 +4,7 @@ import { UsePickerViewsProps, DateOrTimeViewWithMeridiem, } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { RangeOnlyPickerProps, RangePickerAdditionalViewProps, @@ -13,15 +14,20 @@ import { UseRangePickerSlots, } from '../models/useRangePicker'; -export interface UseDesktopRangePickerSlots - extends UseRangePickerSlots, +export interface UseDesktopRangePickerSlots< + TDate extends PickerValidDate, + TView extends DateOrTimeViewWithMeridiem, +> extends UseRangePickerSlots, PickersPopperSlots {} -export interface UseDesktopRangePickerSlotProps - extends UseRangePickerSlotProps, +export interface UseDesktopRangePickerSlotProps< + TDate extends PickerValidDate, + TView extends DateOrTimeViewWithMeridiem, +> extends UseRangePickerSlotProps, PickersPopperSlotProps {} -export interface DesktopRangeOnlyPickerProps extends RangeOnlyPickerProps { +export interface DesktopRangeOnlyPickerProps + extends RangeOnlyPickerProps { /** * If `true`, the start `input` element is focused during the first mount. */ @@ -29,7 +35,7 @@ export interface DesktopRangeOnlyPickerProps extends RangeOnlyPickerProps } export interface UseDesktopRangePickerProps< - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps, @@ -55,7 +61,7 @@ export interface UseDesktopRangePickerProps< export interface DesktopRangePickerAdditionalViewProps extends RangePickerAdditionalViewProps {} export interface UseDesktopRangePickerParams< - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseDesktopRangePickerProps, > extends UseRangePickerParams< diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts index b0b28d35faf27..9fb579a2e3af9 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts @@ -9,6 +9,7 @@ import { BaseSingleInputFieldProps, FieldSelectedSections, FieldRef, + PickerValidDate, } from '@mui/x-date-pickers/models'; import { UseClearableFieldSlots, UseClearableFieldSlotProps } from '@mui/x-date-pickers/hooks'; import { PickersInputLocaleText } from '@mui/x-date-pickers/locales'; @@ -54,7 +55,8 @@ export interface RangePickerFieldSlots extends UseClearableFieldSlots { textField?: React.ElementType; } -export interface RangePickerFieldSlotProps extends UseClearableFieldSlotProps { +export interface RangePickerFieldSlotProps + extends UseClearableFieldSlotProps { field?: SlotComponentProps< React.ElementType< BaseMultiInputFieldProps, TDate, RangeFieldSection, unknown> @@ -73,7 +75,7 @@ export interface RangePickerFieldSlotProps extends UseClearableFieldSlotP } export interface UseEnrichedRangePickerFieldPropsParams< - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError, FieldProps extends BaseFieldProps< @@ -105,7 +107,11 @@ export interface UseEnrichedRangePickerFieldPropsParams< onViewChange?: (view: TView) => void; } -const useMultiInputFieldSlotProps = ({ +const useMultiInputFieldSlotProps = < + TDate extends PickerValidDate, + TView extends DateOrTimeViewWithMeridiem, + TError, +>({ wrapperVariant, open, actions, @@ -281,7 +287,11 @@ const useMultiInputFieldSlotProps = ({ +const useSingleInputFieldSlotProps = < + TDate extends PickerValidDate, + TView extends DateOrTimeViewWithMeridiem, + TError, +>({ wrapperVariant, open, actions, @@ -398,7 +408,7 @@ const useSingleInputFieldSlotProps = ( diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx b/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx index 7bb0d98f26d12..7acf65d0aa523 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { useSlotProps } from '@mui/base/utils'; -import { useLicenseVerifier } from '@mui/x-license-pro'; +import { useLicenseVerifier } from '@mui/x-license'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { PickersLayout, PickersLayoutSlotProps } from '@mui/x-date-pickers/PickersLayout'; import { @@ -13,6 +13,7 @@ import { UsePickerValueFieldResponse, ExportedBaseTabsProps, } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import useId from '@mui/utils/useId'; import { MobileRangePickerAdditionalViewProps, @@ -29,7 +30,7 @@ import { useRangePosition } from '../useRangePosition'; const releaseInfo = getReleaseInfo(); export const useMobileRangePicker = < - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseMobileRangePickerProps, >({ diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.ts index b89b4733e2e26..39235ce0b0d5a 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.ts @@ -4,6 +4,7 @@ import { UsePickerViewsProps, DateOrTimeViewWithMeridiem, } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { RangeOnlyPickerProps, RangePickerAdditionalViewProps, @@ -13,18 +14,23 @@ import { UseRangePickerSlots, } from '../models/useRangePicker'; -export interface UseMobileRangePickerSlots - extends UseRangePickerSlots, +export interface UseMobileRangePickerSlots< + TDate extends PickerValidDate, + TView extends DateOrTimeViewWithMeridiem, +> extends UseRangePickerSlots, PickersModalDialogSlots {} -export interface UseMobileRangePickerSlotProps - extends UseRangePickerSlotProps, +export interface UseMobileRangePickerSlotProps< + TDate extends PickerValidDate, + TView extends DateOrTimeViewWithMeridiem, +> extends UseRangePickerSlotProps, PickersModalDialogSlotProps {} -export interface MobileRangeOnlyPickerProps extends RangeOnlyPickerProps {} +export interface MobileRangeOnlyPickerProps + extends RangeOnlyPickerProps {} export interface UseMobileRangePickerProps< - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps, @@ -50,7 +56,7 @@ export interface UseMobileRangePickerProps< export interface MobileRangePickerAdditionalViewProps extends RangePickerAdditionalViewProps {} export interface UseMobileRangePickerParams< - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseMobileRangePickerProps, > extends UseRangePickerParams< diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts index 082676318eb8b..47088f346682e 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts @@ -13,7 +13,7 @@ import { UseFieldResponse, useControlledValueWithTimezone, } from '@mui/x-date-pickers/internals'; -import { DateValidationError } from '@mui/x-date-pickers/models'; +import { DateValidationError, PickerValidDate } from '@mui/x-date-pickers/models'; import { useDefaultizedDateRangeFieldProps } from '../../../SingleInputDateRangeField/useSingleInputDateRangeField'; import { UseMultiInputDateRangeFieldParams } from '../../../MultiInputDateRangeField/MultiInputDateRangeField.types'; import { @@ -25,7 +25,10 @@ import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField. import { DateRangeValidationError, DateRange } from '../../../models'; import { excludeProps } from './shared'; -export const useMultiInputDateRangeField = ({ +export const useMultiInputDateRangeField = < + TDate extends PickerValidDate, + TTextFieldSlotProps extends {}, +>({ sharedProps: inSharedProps, startTextFieldProps, unstableStartFieldRef, @@ -99,10 +102,7 @@ export const useMultiInputDateRangeField = - > = { + const startFieldProps: UseDateFieldComponentProps> = { error: !!validationError[0], ...startTextFieldProps, disabled, @@ -119,10 +119,7 @@ export const useMultiInputDateRangeField = - > = { + const endFieldProps: UseDateFieldComponentProps> = { error: !!validationError[1], ...endTextFieldProps, format, diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts index 9c182c1d2523d..d398a8b5e1ab5 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts @@ -16,7 +16,7 @@ import { UseFieldResponse, useControlledValueWithTimezone, } from '@mui/x-date-pickers/internals'; -import { DateTimeValidationError } from '@mui/x-date-pickers/models'; +import { DateTimeValidationError, PickerValidDate } from '@mui/x-date-pickers/models'; import type { UseMultiInputDateTimeRangeFieldDefaultizedProps, UseMultiInputDateTimeRangeFieldParams, @@ -31,7 +31,10 @@ import { rangeValueManager } from '../../utils/valueManagers'; import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types'; import { excludeProps } from './shared'; -export const useDefaultizedDateTimeRangeFieldProps = ( +export const useDefaultizedDateTimeRangeFieldProps = < + TDate extends PickerValidDate, + AdditionalProps extends {}, +>( props: UseMultiInputDateTimeRangeFieldProps, ): UseMultiInputDateTimeRangeFieldDefaultizedProps => { const utils = useUtils(); @@ -55,7 +58,10 @@ export const useDefaultizedDateTimeRangeFieldProps = ({ +export const useMultiInputDateTimeRangeField = < + TDate extends PickerValidDate, + TTextFieldSlotProps extends {}, +>({ sharedProps: inSharedProps, startTextFieldProps, unstableStartFieldRef, @@ -130,7 +136,7 @@ export const useMultiInputDateTimeRangeField = + UseDateTimeFieldDefaultizedProps > = { error: !!validationError[0], ...startTextFieldProps, @@ -149,7 +155,7 @@ export const useMultiInputDateTimeRangeField = + UseDateTimeFieldDefaultizedProps > = { error: !!validationError[1], ...endTextFieldProps, diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts index eab2cd035f40a..8656009ce3f2e 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts @@ -14,7 +14,7 @@ import { UseFieldResponse, useControlledValueWithTimezone, } from '@mui/x-date-pickers/internals'; -import { TimeValidationError } from '@mui/x-date-pickers/models'; +import { PickerValidDate, TimeValidationError } from '@mui/x-date-pickers/models'; import { validateTimeRange, TimeRangeComponentValidationProps, @@ -29,7 +29,10 @@ import { rangeValueManager } from '../../utils/valueManagers'; import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types'; import { excludeProps } from './shared'; -export const useDefaultizedTimeRangeFieldProps = ( +export const useDefaultizedTimeRangeFieldProps = < + TDate extends PickerValidDate, + AdditionalProps extends {}, +>( props: UseMultiInputTimeRangeFieldProps, ): UseMultiInputTimeRangeFieldDefaultizedProps => { const utils = useUtils(); @@ -45,7 +48,10 @@ export const useDefaultizedTimeRangeFieldProps = ({ +export const useMultiInputTimeRangeField = < + TDate extends PickerValidDate, + TTextFieldSlotProps extends {}, +>({ sharedProps: inSharedProps, startTextFieldProps, unstableStartFieldRef, @@ -118,10 +124,7 @@ export const useMultiInputTimeRangeField = - > = { + const startFieldProps: UseTimeFieldComponentProps> = { error: !!validationError[0], ...startTextFieldProps, format, @@ -137,10 +140,7 @@ export const useMultiInputTimeRangeField = - > = { + const endFieldProps: UseTimeFieldComponentProps> = { error: !!validationError[1], ...endTextFieldProps, format, diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.tsx b/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.tsx index f947943079791..75b4ec220d76b 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.tsx @@ -9,6 +9,7 @@ import { ExportedBaseToolbarProps, DateOrTimeViewWithMeridiem, } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseStaticRangePickerParams, UseStaticRangePickerProps, @@ -28,7 +29,7 @@ const PickerStaticLayout = styled(PickersLayout)(({ theme }) => ({ * - StaticDateRangePicker */ export const useStaticRangePicker = < - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticRangePickerProps, >({ diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.types.ts b/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.types.ts index 51b5459780883..2ff34eabfa9ca 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.types.ts @@ -6,6 +6,7 @@ import { StaticOnlyPickerProps, DateOrTimeViewWithMeridiem, } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, @@ -14,18 +15,22 @@ import { DateRange } from '../../../models'; import { UseRangePositionProps } from '../useRangePosition'; import { RangeFieldSection } from '../../models/fields'; -export interface UseStaticRangePickerSlots - extends ExportedPickersLayoutSlots, TDate, TView> {} +export interface UseStaticRangePickerSlots< + TDate extends PickerValidDate, + TView extends DateOrTimeViewWithMeridiem, +> extends ExportedPickersLayoutSlots, TDate, TView> {} -export interface UseStaticRangePickerSlotProps - extends ExportedPickersLayoutSlotProps, TDate, TView> { +export interface UseStaticRangePickerSlotProps< + TDate extends PickerValidDate, + TView extends DateOrTimeViewWithMeridiem, +> extends ExportedPickersLayoutSlotProps, TDate, TView> { toolbar?: ExportedBaseToolbarProps; } export interface StaticRangeOnlyPickerProps extends StaticOnlyPickerProps, UseRangePositionProps {} export interface UseStaticRangePickerProps< - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UseStaticRangePickerProps, @@ -44,7 +49,7 @@ export interface UseStaticRangePickerProps< } export interface UseStaticRangePickerParams< - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticRangePickerProps, > extends Pick< diff --git a/packages/x-date-pickers-pro/src/internals/models/dateRange.ts b/packages/x-date-pickers-pro/src/internals/models/dateRange.ts index 1a31e90846619..422d777db1251 100644 --- a/packages/x-date-pickers-pro/src/internals/models/dateRange.ts +++ b/packages/x-date-pickers-pro/src/internals/models/dateRange.ts @@ -4,13 +4,14 @@ import { MakeOptional, UseFieldInternalProps, } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import type { DateRangeValidationError, DateRange } from '../../models'; import { RangeFieldSection } from './fields'; /** * Props used to validate a day value in range pickers. */ -export interface DayRangeValidationProps { +export interface DayRangeValidationProps { /** * Disable specific date. * @@ -35,7 +36,7 @@ export interface BaseRangeProps { disabled?: boolean; } -export interface UseDateRangeFieldProps +export interface UseDateRangeFieldProps extends MakeOptional< UseFieldInternalProps, TDate, RangeFieldSection, DateRangeValidationError>, 'format' @@ -44,7 +45,7 @@ export interface UseDateRangeFieldProps BaseDateValidationProps, BaseRangeProps {} -export type UseDateRangeFieldDefaultizedProps = DefaultizedProps< +export type UseDateRangeFieldDefaultizedProps = DefaultizedProps< UseDateRangeFieldProps, keyof BaseDateValidationProps | 'format' >; diff --git a/packages/x-date-pickers-pro/src/internals/models/dateTimeRange.ts b/packages/x-date-pickers-pro/src/internals/models/dateTimeRange.ts index 25903be03bd72..3ed96dab9e6bd 100644 --- a/packages/x-date-pickers-pro/src/internals/models/dateTimeRange.ts +++ b/packages/x-date-pickers-pro/src/internals/models/dateTimeRange.ts @@ -7,11 +7,12 @@ import { DateTimeValidationProps, DateOrTimeViewWithMeridiem, } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { BaseRangeProps, DayRangeValidationProps } from './dateRange'; import { DateTimeRangeValidationError, DateRange } from '../../models'; import { RangeFieldSection } from './fields'; -export interface UseDateTimeRangeFieldProps +export interface UseDateTimeRangeFieldProps extends MakeOptional< UseFieldInternalProps< DateRange, @@ -33,7 +34,7 @@ export interface UseDateTimeRangeFieldProps ampm?: boolean; } -export type UseDateTimeRangeFieldDefaultizedProps = DefaultizedProps< +export type UseDateTimeRangeFieldDefaultizedProps = DefaultizedProps< UseDateTimeRangeFieldProps, keyof BaseDateValidationProps | 'format' | 'disableIgnoringDatePartForTimeValidation' >; diff --git a/packages/x-date-pickers-pro/src/internals/models/fields.ts b/packages/x-date-pickers-pro/src/internals/models/fields.ts index 2810560c95174..893c4484c6da9 100644 --- a/packages/x-date-pickers-pro/src/internals/models/fields.ts +++ b/packages/x-date-pickers-pro/src/internals/models/fields.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { SlotComponentProps } from '@mui/base/utils'; import { BaseFieldProps, FieldsTextFieldProps } from '@mui/x-date-pickers/internals'; -import { FieldSection, FieldRef } from '@mui/x-date-pickers/models'; +import { FieldSection, FieldRef, PickerValidDate } from '@mui/x-date-pickers/models'; export interface RangeFieldSection extends FieldSection { dateName: 'start' | 'end'; @@ -40,8 +40,12 @@ export interface MultiInputFieldRefs { * Props the multi input field can receive when used inside a picker. * Only contains what the MUI component are passing to the field, not what users can pass using the `props.slotProps.field`. */ -export interface BaseMultiInputFieldProps - extends BaseFieldProps, +export interface BaseMultiInputFieldProps< + TValue, + TDate extends PickerValidDate, + TSection extends FieldSection, + TError, +> extends BaseFieldProps, MultiInputFieldRefs { slots?: { root?: React.ElementType; diff --git a/packages/x-date-pickers-pro/src/internals/models/timeRange.ts b/packages/x-date-pickers-pro/src/internals/models/timeRange.ts index fa99290d503a3..9ec9db5c39232 100644 --- a/packages/x-date-pickers-pro/src/internals/models/timeRange.ts +++ b/packages/x-date-pickers-pro/src/internals/models/timeRange.ts @@ -5,11 +5,12 @@ import { MakeOptional, UseFieldInternalProps, } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { TimeRangeValidationError, DateRange } from '../../models'; import { BaseRangeProps } from './dateRange'; import { RangeFieldSection } from './fields'; -export interface UseTimeRangeFieldProps +export interface UseTimeRangeFieldProps extends MakeOptional< UseFieldInternalProps, TDate, RangeFieldSection, TimeRangeValidationError>, 'format' @@ -24,7 +25,7 @@ export interface UseTimeRangeFieldProps ampm?: boolean; } -export type UseTimeRangeFieldDefaultizedProps = DefaultizedProps< +export type UseTimeRangeFieldDefaultizedProps = DefaultizedProps< UseTimeRangeFieldProps, keyof BaseTimeValidationProps | 'format' >; diff --git a/packages/x-date-pickers-pro/src/internals/utils/date-range-manager.ts b/packages/x-date-pickers-pro/src/internals/utils/date-range-manager.ts index 8470c59ccb44d..bc3eb99ca75cc 100644 --- a/packages/x-date-pickers-pro/src/internals/utils/date-range-manager.ts +++ b/packages/x-date-pickers-pro/src/internals/utils/date-range-manager.ts @@ -1,8 +1,8 @@ -import { MuiPickersAdapter } from '@mui/x-date-pickers/models'; +import { MuiPickersAdapter, PickerValidDate } from '@mui/x-date-pickers/models'; import { mergeDateAndTime } from '@mui/x-date-pickers/internals'; import { DateRange, RangePosition } from '../../models'; -interface CalculateRangeChangeOptions { +interface CalculateRangeChangeOptions { utils: MuiPickersAdapter; range: DateRange; newDate: TDate | null; @@ -16,12 +16,12 @@ interface CalculateRangeChangeOptions { shouldMergeDateAndTime?: boolean; } -interface CalculateRangeChangeResponse { +interface CalculateRangeChangeResponse { nextSelection: RangePosition; newRange: DateRange; } -export function calculateRangeChange({ +export function calculateRangeChange({ utils, range, newDate: selectedDate, @@ -58,7 +58,7 @@ export function calculateRangeChange({ : { nextSelection: 'start', newRange: [start, selectedDate] }; } -export function calculateRangePreview( +export function calculateRangePreview( options: CalculateRangeChangeOptions, ): DateRange { if (options.newDate == null) { diff --git a/packages/x-date-pickers-pro/src/internals/utils/date-utils.ts b/packages/x-date-pickers-pro/src/internals/utils/date-utils.ts index e69cea142837b..1d35d15cf6676 100644 --- a/packages/x-date-pickers-pro/src/internals/utils/date-utils.ts +++ b/packages/x-date-pickers-pro/src/internals/utils/date-utils.ts @@ -1,14 +1,14 @@ -import { MuiPickersAdapter } from '@mui/x-date-pickers/models'; +import { MuiPickersAdapter, PickerValidDate } from '@mui/x-date-pickers/models'; import { DateRange, NonEmptyDateRange } from '../../models'; -export const isRangeValid = ( +export const isRangeValid = ( utils: MuiPickersAdapter, range: DateRange | null, ): range is NonEmptyDateRange => { return Boolean(range && range[0] && range[1] && !utils.isBefore(range[1], range[0])); }; -export const isWithinRange = ( +export const isWithinRange = ( utils: MuiPickersAdapter, day: TDate, range: DateRange | null, @@ -16,7 +16,7 @@ export const isWithinRange = ( return isRangeValid(utils, range) && utils.isWithinRange(day, range); }; -export const isStartOfRange = ( +export const isStartOfRange = ( utils: MuiPickersAdapter, day: TDate, range: DateRange | null, @@ -24,7 +24,7 @@ export const isStartOfRange = ( return isRangeValid(utils, range) && utils.isSameDay(day, range[0]!); }; -export const isEndOfRange = ( +export const isEndOfRange = ( utils: MuiPickersAdapter, day: TDate, range: DateRange | null, diff --git a/packages/x-date-pickers-pro/src/internals/utils/validation/validateDateRange.ts b/packages/x-date-pickers-pro/src/internals/utils/validation/validateDateRange.ts index 6609ced6e8bfb..c0304ff0b9de8 100644 --- a/packages/x-date-pickers-pro/src/internals/utils/validation/validateDateRange.ts +++ b/packages/x-date-pickers-pro/src/internals/utils/validation/validateDateRange.ts @@ -1,4 +1,4 @@ -import { TimezoneProps } from '@mui/x-date-pickers/models'; +import { PickerValidDate, TimezoneProps } from '@mui/x-date-pickers/models'; import { Validator, validateDate, @@ -9,7 +9,7 @@ import { isRangeValid } from '../date-utils'; import { DayRangeValidationProps } from '../../models'; import { DateRangeValidationError, DateRange } from '../../../models'; -export interface DateRangeComponentValidationProps +export interface DateRangeComponentValidationProps extends DayRangeValidationProps, Required>, DefaultizedProps {} diff --git a/packages/x-date-pickers-pro/src/internals/utils/validation/validateDateTimeRange.ts b/packages/x-date-pickers-pro/src/internals/utils/validation/validateDateTimeRange.ts index ec00ad04da6d9..2eae3041a2e4a 100644 --- a/packages/x-date-pickers-pro/src/internals/utils/validation/validateDateTimeRange.ts +++ b/packages/x-date-pickers-pro/src/internals/utils/validation/validateDateTimeRange.ts @@ -1,4 +1,4 @@ -import { TimezoneProps } from '@mui/x-date-pickers/models'; +import { PickerValidDate, TimezoneProps } from '@mui/x-date-pickers/models'; import { Validator, validateDateTime, @@ -10,7 +10,7 @@ import { isRangeValid } from '../date-utils'; import { DayRangeValidationProps } from '../../models/dateRange'; import { DateTimeRangeValidationError, DateRange } from '../../../models'; -export interface DateTimeRangeComponentValidationProps +export interface DateTimeRangeComponentValidationProps extends DayRangeValidationProps, TimeValidationProps, Required>, diff --git a/packages/x-date-pickers-pro/src/internals/utils/valueManagers.ts b/packages/x-date-pickers-pro/src/internals/utils/valueManagers.ts index daddcdee38e91..82649345b5d47 100644 --- a/packages/x-date-pickers-pro/src/internals/utils/valueManagers.ts +++ b/packages/x-date-pickers-pro/src/internals/utils/valueManagers.ts @@ -8,6 +8,7 @@ import { getTodayDate, getDefaultReferenceDate, } from '@mui/x-date-pickers/internals'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { splitDateRangeSections, removeLastSeparator } from './date-fields-utils'; import type { DateRangeValidationError, @@ -20,7 +21,7 @@ import { RangeFieldSection } from '../models/fields'; export type RangePickerValueManager< TValue = [any, any], - TDate = any, + TDate extends PickerValidDate = any, TError extends | DateRangeValidationError | TimeRangeValidationError diff --git a/packages/x-date-pickers-pro/src/models/range.ts b/packages/x-date-pickers-pro/src/models/range.ts index 3fefdb333b221..92bbff21e1d17 100644 --- a/packages/x-date-pickers-pro/src/models/range.ts +++ b/packages/x-date-pickers-pro/src/models/range.ts @@ -1,5 +1,7 @@ -export type DateRange = [TDate | null, TDate | null]; +import { PickerValidDate } from '@mui/x-date-pickers/models'; -export type NonEmptyDateRange = [TDate, TDate]; +export type DateRange = [TDate | null, TDate | null]; + +export type NonEmptyDateRange = [TDate, TDate]; export type RangePosition = 'start' | 'end'; diff --git a/packages/x-date-pickers-pro/src/themeAugmentation/props.d.ts b/packages/x-date-pickers-pro/src/themeAugmentation/props.d.ts index 00e1c345620b3..c43cf07e5baa0 100644 --- a/packages/x-date-pickers-pro/src/themeAugmentation/props.d.ts +++ b/packages/x-date-pickers-pro/src/themeAugmentation/props.d.ts @@ -1,8 +1,8 @@ +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { DateRangePickerDayProps } from '../DateRangePickerDay'; import { MultiInputDateRangeFieldProps } from '../MultiInputDateRangeField/MultiInputDateRangeField.types'; import { SingleInputDateRangeFieldProps } from '../SingleInputDateRangeField/SingleInputDateRangeField.types'; import { DateRangeCalendarProps } from '../DateRangeCalendar'; - import { DateRangePickerProps, DateRangePickerToolbarProps } from '../DateRangePicker'; import { DesktopDateRangePickerProps } from '../DesktopDateRangePicker'; import { MobileDateRangePickerProps } from '../MobileDateRangePicker'; @@ -18,32 +18,32 @@ import { ExportedDateTimeRangePickerTabsProps } from '../DateTimeRangePicker/Dat import { ExportedDateTimeRangePickerToolbarProps } from '../DateTimeRangePicker/DateTimeRangePickerToolbar'; export interface PickersProComponentsPropsList { - MuiDateRangeCalendar: DateRangeCalendarProps; - MuiDateRangePickerDay: DateRangePickerDayProps; + MuiDateRangeCalendar: DateRangeCalendarProps; + MuiDateRangePickerDay: DateRangePickerDayProps; MuiDateTimeRangePickerTabs: ExportedDateTimeRangePickerTabsProps; - MuiDateRangePickerToolbar: DateRangePickerToolbarProps; + MuiDateRangePickerToolbar: DateRangePickerToolbarProps; MuiDateTimeRangePickerToolbar: ExportedDateTimeRangePickerToolbarProps; // Multi input range fields - MuiMultiInputDateRangeField: MultiInputDateRangeFieldProps; - MuiMultiInputDateTimeRangeField: MultiInputDateTimeRangeFieldProps; - MuiMultiInputTimeRangeField: MultiInputTimeRangeFieldProps; + MuiMultiInputDateRangeField: MultiInputDateRangeFieldProps; + MuiMultiInputDateTimeRangeField: MultiInputDateTimeRangeFieldProps; + MuiMultiInputTimeRangeField: MultiInputTimeRangeFieldProps; // Single input range fields - MuiSingleInputDateRangeField: SingleInputDateRangeFieldProps; - MuiSingleInputDateTimeRangeField: SingleInputDateTimeRangeFieldProps; - MuiSingleInputTimeRangeField: SingleInputTimeRangeFieldProps; + MuiSingleInputDateRangeField: SingleInputDateRangeFieldProps; + MuiSingleInputDateTimeRangeField: SingleInputDateTimeRangeFieldProps; + MuiSingleInputTimeRangeField: SingleInputTimeRangeFieldProps; // Date Range Pickers - MuiDateRangePicker: DateRangePickerProps; - MuiDesktopDateRangePicker: DesktopDateRangePickerProps; - MuiMobileDateRangePicker: MobileDateRangePickerProps; - MuiStaticDateRangePicker: StaticDateRangePickerProps; + MuiDateRangePicker: DateRangePickerProps; + MuiDesktopDateRangePicker: DesktopDateRangePickerProps; + MuiMobileDateRangePicker: MobileDateRangePickerProps; + MuiStaticDateRangePicker: StaticDateRangePickerProps; // Date Time Range Pickers - MuiDateTimeRangePicker: DateTimeRangePickerProps; - MuiDesktopDateTimeRangePicker: DesktopDateTimeRangePickerProps; - MuiMobileDateTimeRangePicker: MobileDateTimeRangePickerProps; + MuiDateTimeRangePicker: DateTimeRangePickerProps; + MuiDesktopDateTimeRangePicker: DesktopDateTimeRangePickerProps; + MuiMobileDateTimeRangePicker: MobileDateTimeRangePickerProps; } declare module '@mui/material/styles' { diff --git a/packages/x-date-pickers-pro/tsconfig.build.json b/packages/x-date-pickers-pro/tsconfig.build.json index 0f80aaf556fe2..ae3fe2fae517f 100644 --- a/packages/x-date-pickers-pro/tsconfig.build.json +++ b/packages/x-date-pickers-pro/tsconfig.build.json @@ -12,7 +12,7 @@ }, "references": [ { "path": "../x-date-pickers/tsconfig.build.json" }, - { "path": "../x-license-pro/tsconfig.build.json" } + { "path": "../x-license/tsconfig.build.json" } ], "include": [ "./src/**/*.ts*", diff --git a/packages/x-date-pickers/package.json b/packages/x-date-pickers/package.json index 3052bea9aaac9..43830912ecdb7 100644 --- a/packages/x-date-pickers/package.json +++ b/packages/x-date-pickers/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-date-pickers", - "version": "7.0.0-beta.1", + "version": "7.0.0-beta.2", "description": "The community edition of the date picker components (MUI X).", "author": "MUI Team", "main": "src/index.ts", @@ -46,9 +46,9 @@ }, "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/base": "^5.0.0-beta.34", - "@mui/system": "^5.15.7", - "@mui/utils": "^5.15.7", + "@mui/base": "^5.0.0-beta.36", + "@mui/system": "^5.15.9", + "@mui/utils": "^5.15.9", "@types/react-transition-group": "^4.4.10", "clsx": "^2.1.0", "prop-types": "^15.8.1", diff --git a/packages/x-date-pickers/src/AdapterDateFnsBase/AdapterDateFnsBase.ts b/packages/x-date-pickers/src/AdapterDateFnsBase/AdapterDateFnsBase.ts index 2207845c9cf38..a24b3a69e7d14 100644 --- a/packages/x-date-pickers/src/AdapterDateFnsBase/AdapterDateFnsBase.ts +++ b/packages/x-date-pickers/src/AdapterDateFnsBase/AdapterDateFnsBase.ts @@ -117,6 +117,12 @@ type DateFnsAdapterBaseOptions = MakeRe longFormatters: Record<'p' | 'P', (token: string, formatLong: any) => string>; }; +declare module '@mui/x-date-pickers/models' { + interface PickerValidDateLookup { + 'date-fns': Date; + } +} + /** * Based on `@date-io/date-fns` * diff --git a/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts b/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts index c8526d7bfeaed..7b1e651d6c5d2 100644 --- a/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts +++ b/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts @@ -159,6 +159,12 @@ const NUMBER_SYMBOL_MAP = { '0': 'Ϋ°', }; +declare module '@mui/x-date-pickers/models' { + interface PickerValidDateLookup { + 'date-fns-jalali': Date; + } +} + /** * Based on `@date-io/date-fns-jalali` * diff --git a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts index 853b72d4edf1a..667b7eb3ea642 100644 --- a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts +++ b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts @@ -111,6 +111,12 @@ const MISSING_TIMEZONE_PLUGIN = [ const withLocale = (dayjs: any, locale?: string): Constructor => !locale ? dayjs : (...args) => dayjs(...args).locale(locale); +declare module '@mui/x-date-pickers/models' { + interface PickerValidDateLookup { + dayjs: Dayjs; + } +} + /** * Based on `@date-io/dayjs` * diff --git a/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts b/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts index ee8f9a56ac027..0118a0025be80 100644 --- a/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts +++ b/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts @@ -83,6 +83,12 @@ const defaultFormats: AdapterFormats = { keyboardDateTime24h: 'D T', }; +declare module '@mui/x-date-pickers/models' { + interface PickerValidDateLookup { + luxon: DateTime; + } +} + /** * Based on `@date-io/luxon` * @@ -318,8 +324,8 @@ export class AdapterLuxon implements MuiPickersAdapter { public isWithinRange = (value: DateTime, [start, end]: [DateTime, DateTime]) => { return ( - value.equals(start) || - value.equals(end) || + this.isEqual(value, start) || + this.isEqual(value, end) || (this.isAfter(value, start) && this.isBefore(value, end)) ); }; diff --git a/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts b/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts index 0a1cca168e1d1..e7b610d466b65 100644 --- a/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts +++ b/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts @@ -88,6 +88,12 @@ const MISSING_TIMEZONE_PLUGIN = [ 'Find more information on https://mui.com/x/react-date-pickers/timezone/#moment-and-timezone', ].join('\n'); +declare module '@mui/x-date-pickers/models' { + interface PickerValidDateLookup { + moment: Moment; + } +} + /** * Based on `@date-io/moment` * diff --git a/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.ts b/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.ts index f11f166c6b104..a9f102f755b20 100644 --- a/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.ts +++ b/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.ts @@ -86,6 +86,12 @@ const NUMBER_SYMBOL_MAP = { '0': 'Ω ', }; +declare module '@mui/x-date-pickers/models' { + interface PickerValidDateLookup { + 'moment-hijri': Moment; + } +} + /** * Based on `@date-io/hijri` * diff --git a/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.ts b/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.ts index ca6cc0ed5301b..3ec4415dcb04f 100644 --- a/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.ts +++ b/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.ts @@ -85,6 +85,12 @@ const NUMBER_SYMBOL_MAP = { '0': 'Ϋ°', }; +declare module '@mui/x-date-pickers/models' { + interface PickerValidDateLookup { + 'moment-jalaali': Moment; + } +} + /** * Based on `@date-io/jalaali` * diff --git a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx index 11d8feecdbccc..65371086ad17a 100644 --- a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx +++ b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx @@ -29,6 +29,7 @@ import { BaseDateValidationProps } from '../internals/models/validation'; import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone'; import { singleItemValueManager } from '../internals/utils/valueManagers'; import { VIEW_HEIGHT } from '../internals/constants/dimensions'; +import { PickerValidDate } from '../models'; const useUtilityClasses = (ownerState: DateCalendarProps) => { const { classes } = ownerState; @@ -40,7 +41,7 @@ const useUtilityClasses = (ownerState: DateCalendarProps) => { return composeClasses(slots, getDateCalendarUtilityClass, classes); }; -function useDateCalendarDefaultizedProps( +function useDateCalendarDefaultizedProps( props: DateCalendarProps, name: string, ): DateCalendarDefaultizedProps { @@ -83,7 +84,7 @@ const DateCalendarViewTransitionContainer = styled(PickersFadeTransitionGroup, { overridesResolver: (props, styles) => styles.viewTransitionContainer, })<{ ownerState: DateCalendarProps }>({}); -type DateCalendarComponent = (( +type DateCalendarComponent = (( props: DateCalendarProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -98,7 +99,7 @@ type DateCalendarComponent = (( * * - [DateCalendar API](https://mui.com/x/api/date-pickers/date-calendar/) */ -export const DateCalendar = React.forwardRef(function DateCalendar( +export const DateCalendar = React.forwardRef(function DateCalendar( inProps: DateCalendarProps, ref: React.Ref, ) { @@ -428,7 +429,7 @@ DateCalendar.propTypes = { * The default selected value. * Used when the component is not controlled. */ - defaultValue: PropTypes.any, + defaultValue: PropTypes.object, /** * If `true`, the picker and text field are disabled. * @default false @@ -472,11 +473,11 @@ DateCalendar.propTypes = { /** * Maximal selectable date. */ - maxDate: PropTypes.any, + maxDate: PropTypes.object, /** * Minimal selectable date. */ - minDate: PropTypes.any, + minDate: PropTypes.object, /** * Months rendered per row. * @default 3 @@ -536,7 +537,7 @@ DateCalendar.propTypes = { * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * Component displaying when passed `loading` true. * @returns {React.ReactNode} The node to render when loading. @@ -608,7 +609,7 @@ DateCalendar.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.any, + value: PropTypes.object, /** * The visible view. * Used when the component view is controlled. diff --git a/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts b/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts index b02d1ffc027b4..fec30c35f9302 100644 --- a/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts +++ b/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts @@ -17,12 +17,12 @@ import { DayValidationProps, } from '../internals/models/validation'; import { ExportedUseViewsOptions } from '../internals/hooks/useViews'; -import { DateView, TimezoneProps } from '../models'; +import { DateView, PickerValidDate, TimezoneProps } from '../models'; import { DefaultizedProps } from '../internals/models/helpers'; import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types'; import { ExportedMonthCalendarProps } from '../MonthCalendar/MonthCalendar.types'; -export interface DateCalendarSlots +export interface DateCalendarSlots extends PickersCalendarHeaderSlots, DayCalendarSlots { /** @@ -33,13 +33,13 @@ export interface DateCalendarSlots calendarHeader?: React.ElementType>; } -export interface DateCalendarSlotProps +export interface DateCalendarSlotProps extends PickersCalendarHeaderSlotProps, DayCalendarSlotProps { calendarHeader?: SlotComponentProps>; } -export interface ExportedDateCalendarProps +export interface ExportedDateCalendarProps extends ExportedDayCalendarProps, ExportedMonthCalendarProps, ExportedYearCalendarProps, @@ -83,7 +83,7 @@ export interface ExportedDateCalendarProps onMonthChange?: (month: TDate) => void; } -export interface DateCalendarProps +export interface DateCalendarProps extends ExportedDateCalendarProps, ExportedUseViewsOptions { /** @@ -119,7 +119,7 @@ export interface DateCalendarProps slotProps?: DateCalendarSlotProps; } -export type DateCalendarDefaultizedProps = DefaultizedProps< +export type DateCalendarDefaultizedProps = DefaultizedProps< DateCalendarProps, | 'views' | 'openTo' diff --git a/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx b/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx index 45b1a8fe727c3..e388c1590632b 100644 --- a/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx +++ b/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx @@ -26,10 +26,10 @@ import { import { useIsDateDisabled } from './useIsDateDisabled'; import { findClosestEnabledDate, getWeekdays } from '../internals/utils/date-utils'; import { DayCalendarClasses, getDayCalendarUtilityClass } from './dayCalendarClasses'; -import { TimezoneProps } from '../models'; +import { PickerValidDate, TimezoneProps } from '../models'; import { DefaultizedProps } from '../internals/models/helpers'; -export interface DayCalendarSlots { +export interface DayCalendarSlots { /** * Custom component for day. * Check the [PickersDay](https://mui.com/x/api/date-pickers/pickers-day/) component. @@ -38,7 +38,7 @@ export interface DayCalendarSlots { day?: React.ElementType>; } -export interface DayCalendarSlotProps { +export interface DayCalendarSlotProps { day?: SlotComponentProps< typeof PickersDay, {}, @@ -46,7 +46,8 @@ export interface DayCalendarSlotProps { >; } -export interface ExportedDayCalendarProps extends ExportedPickersDayProps { +export interface ExportedDayCalendarProps + extends ExportedPickersDayProps { /** * If `true`, calls `renderLoading` instead of rendering the day calendar. * Can be used to preload information and show it in calendar. @@ -78,7 +79,7 @@ export interface ExportedDayCalendarProps extends ExportedPickersDayProps fixedWeekNumber?: number; } -export interface DayCalendarProps +export interface DayCalendarProps extends ExportedDayCalendarProps, DayValidationProps, MonthValidationProps, @@ -232,7 +233,7 @@ const PickersCalendarWeek = styled('div', { justifyContent: 'center', }); -function WrappedDay({ +function WrappedDay({ parentProps, day, focusableDay, @@ -331,7 +332,7 @@ function WrappedDay({ /** * @ignore - do not document. */ -export function DayCalendar(inProps: DayCalendarProps) { +export function DayCalendar(inProps: DayCalendarProps) { const props = useThemeProps({ props: inProps, name: 'MuiDayCalendar' }); const utils = useUtils(); diff --git a/packages/x-date-pickers/src/DateCalendar/tests/validation.DateCalendar.test.tsx b/packages/x-date-pickers/src/DateCalendar/tests/validation.DateCalendar.test.tsx index 9940b97e3d9d4..74eaafe5cfaa3 100644 --- a/packages/x-date-pickers/src/DateCalendar/tests/validation.DateCalendar.test.tsx +++ b/packages/x-date-pickers/src/DateCalendar/tests/validation.DateCalendar.test.tsx @@ -2,9 +2,10 @@ import * as React from 'react'; import { expect } from 'chai'; import { screen, fireEvent } from '@mui-internal/test-utils'; import { DateCalendar, DateCalendarProps } from '@mui/x-date-pickers/DateCalendar'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { createPickerRenderer, adapterToUse } from 'test/utils/pickers'; -function WrappedDateCalendar( +function WrappedDateCalendar( props: Omit, 'value' | 'onChange'> & { initialValue: TDate }, ) { const { initialValue, ...other } = props; diff --git a/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx b/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx index eebe2fede5ad9..5da5597f0f0c8 100644 --- a/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx +++ b/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx @@ -3,12 +3,12 @@ import useEventCallback from '@mui/utils/useEventCallback'; import { SlideDirection } from './PickersSlideTransition'; import { useIsDateDisabled } from './useIsDateDisabled'; import { useUtils } from '../internals/hooks/useUtils'; -import { MuiPickersAdapter, PickersTimezone } from '../models'; +import { MuiPickersAdapter, PickersTimezone, PickerValidDate } from '../models'; import { DateCalendarDefaultizedProps } from './DateCalendar.types'; import { singleItemValueManager } from '../internals/utils/valueManagers'; import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate'; -interface CalendarState { +interface CalendarState { currentMonth: TDate; focusedDay: TDate | null; isMonthSwitchingAnimating: boolean; @@ -17,12 +17,12 @@ interface CalendarState { type ReducerAction = { type: TType } & TAdditional; -interface ChangeMonthPayload { +interface ChangeMonthPayload { direction: SlideDirection; newMonth: TDate; } -interface ChangeFocusedDayPayload { +interface ChangeFocusedDayPayload { focusedDay: TDate | null; /** * The update does not trigger month switching animation. @@ -32,7 +32,7 @@ interface ChangeFocusedDayPayload { } export const createCalendarStateReducer = - ( + ( reduceAnimations: boolean, disableSwitchToMonthOnDayFocus: boolean, utils: MuiPickersAdapter, @@ -93,7 +93,7 @@ export const createCalendarStateReducer = } }; -interface UseCalendarStateParams +interface UseCalendarStateParams extends Pick< DateCalendarDefaultizedProps, | 'value' @@ -110,7 +110,9 @@ interface UseCalendarStateParams timezone: PickersTimezone; } -export const useCalendarState = (params: UseCalendarStateParams) => { +export const useCalendarState = ( + params: UseCalendarStateParams, +) => { const { value, referenceDate: referenceDateProp, diff --git a/packages/x-date-pickers/src/DateCalendar/useIsDateDisabled.ts b/packages/x-date-pickers/src/DateCalendar/useIsDateDisabled.ts index 0375516f4e953..7fbde8e847724 100644 --- a/packages/x-date-pickers/src/DateCalendar/useIsDateDisabled.ts +++ b/packages/x-date-pickers/src/DateCalendar/useIsDateDisabled.ts @@ -4,8 +4,9 @@ import { validateDate, } from '../internals/utils/validation/validateDate'; import { useLocalizationContext } from '../internals/hooks/useUtils'; +import { PickerValidDate } from '../models'; -export const useIsDateDisabled = ({ +export const useIsDateDisabled = ({ shouldDisableDate, shouldDisableMonth, shouldDisableYear, diff --git a/packages/x-date-pickers/src/DateField/DateField.tsx b/packages/x-date-pickers/src/DateField/DateField.tsx index f654d9db925b1..cf4218512439d 100644 --- a/packages/x-date-pickers/src/DateField/DateField.tsx +++ b/packages/x-date-pickers/src/DateField/DateField.tsx @@ -8,8 +8,9 @@ import { DateFieldProps, DateFieldSlotProps } from './DateField.types'; import { useDateField } from './useDateField'; import { useClearableField } from '../hooks'; import { convertFieldResponseIntoMuiTextFieldProps } from '../internals/utils/convertFieldResponseIntoMuiTextFieldProps'; +import { PickerValidDate } from '../models'; -type DateFieldComponent = (( +type DateFieldComponent = (( props: DateFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -23,7 +24,7 @@ type DateFieldComponent = (( * * - [DateField API](https://mui.com/x/api/date-pickers/date-field/) */ -const DateField = React.forwardRef(function DateField( +const DateField = React.forwardRef(function DateField( inProps: DateFieldProps, inRef: React.Ref, ) { @@ -95,7 +96,7 @@ DateField.propTypes = { /** * The default value. Use when the component is not controlled. */ - defaultValue: PropTypes.any, + defaultValue: PropTypes.object, /** * If `true`, the component is disabled. * @default false @@ -182,11 +183,11 @@ DateField.propTypes = { /** * Maximal selectable date. */ - maxDate: PropTypes.any, + maxDate: PropTypes.object, /** * Minimal selectable date. */ - minDate: PropTypes.any, + minDate: PropTypes.object, /** * Name attribute of the `input` element. */ @@ -229,7 +230,7 @@ DateField.propTypes = { * For example, on time fields it will be used to determine the date to set. * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * If `true`, the label is displayed as required and the `input` element is required. * @default false @@ -341,7 +342,7 @@ DateField.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.any, + value: PropTypes.object, /** * The variant to use. * @default 'outlined' diff --git a/packages/x-date-pickers/src/DateField/DateField.types.ts b/packages/x-date-pickers/src/DateField/DateField.types.ts index 2b358fd2cb153..51a00deb3a8ab 100644 --- a/packages/x-date-pickers/src/DateField/DateField.types.ts +++ b/packages/x-date-pickers/src/DateField/DateField.types.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { SlotComponentProps } from '@mui/base/utils'; import TextField from '@mui/material/TextField'; import { UseClearableFieldSlots, UseClearableFieldSlotProps } from '../hooks/useClearableField'; -import { DateValidationError, FieldSection } from '../models'; +import { DateValidationError, FieldSection, PickerValidDate } from '../models'; import { UseFieldInternalProps } from '../internals/hooks/useField'; import { DefaultizedProps, MakeOptional } from '../internals/models/helpers'; import { @@ -13,7 +13,7 @@ import { } from '../internals/models/validation'; import { FieldsTextFieldProps } from '../internals/models/fields'; -export interface UseDateFieldProps +export interface UseDateFieldProps extends MakeOptional< UseFieldInternalProps, 'format' @@ -23,18 +23,17 @@ export interface UseDateFieldProps YearValidationProps, BaseDateValidationProps {} -export type UseDateFieldDefaultizedProps = DefaultizedProps< +export type UseDateFieldDefaultizedProps = DefaultizedProps< UseDateFieldProps, keyof BaseDateValidationProps | 'format' >; -export type UseDateFieldComponentProps = Omit< - TChildProps, - keyof UseDateFieldProps -> & - UseDateFieldProps; +export type UseDateFieldComponentProps< + TDate extends PickerValidDate, + TChildProps extends {}, +> = Omit> & UseDateFieldProps; -export interface DateFieldProps +export interface DateFieldProps extends UseDateFieldComponentProps { /** * Overridable component slots. @@ -48,7 +47,7 @@ export interface DateFieldProps slotProps?: DateFieldSlotProps; } -export type DateFieldOwnerState = DateFieldProps; +export type DateFieldOwnerState = DateFieldProps; export interface DateFieldSlots extends UseClearableFieldSlots { /** @@ -59,6 +58,7 @@ export interface DateFieldSlots extends UseClearableFieldSlots { textField?: React.ElementType; } -export interface DateFieldSlotProps extends UseClearableFieldSlotProps { +export interface DateFieldSlotProps + extends UseClearableFieldSlotProps { textField?: SlotComponentProps>; } diff --git a/packages/x-date-pickers/src/DateField/useDateField.ts b/packages/x-date-pickers/src/DateField/useDateField.ts index 1a7e9c4795687..2d5b495c652d2 100644 --- a/packages/x-date-pickers/src/DateField/useDateField.ts +++ b/packages/x-date-pickers/src/DateField/useDateField.ts @@ -12,8 +12,9 @@ import { validateDate } from '../internals/utils/validation/validateDate'; import { applyDefaultDate } from '../internals/utils/date-utils'; import { useUtils, useDefaultDates } from '../internals/hooks/useUtils'; import { splitFieldInternalAndForwardedProps } from '../internals/utils/fields'; +import { PickerValidDate } from '../models'; -const useDefaultizedDateField = ( +const useDefaultizedDateField = ( props: UseDateFieldProps, ): AdditionalProps & UseDateFieldDefaultizedProps => { const utils = useUtils(); @@ -29,7 +30,7 @@ const useDefaultizedDateField = ( } as any; }; -export const useDateField = ( +export const useDateField = ( inProps: UseDateFieldComponentProps, ) => { const props = useDefaultizedDateField(inProps); diff --git a/packages/x-date-pickers/src/DatePicker/DatePicker.tsx b/packages/x-date-pickers/src/DatePicker/DatePicker.tsx index 31068c055fd4d..0a6ecc56822c7 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePicker.tsx +++ b/packages/x-date-pickers/src/DatePicker/DatePicker.tsx @@ -7,8 +7,9 @@ import { DesktopDatePicker } from '../DesktopDatePicker'; import { MobileDatePicker } from '../MobileDatePicker'; import { DatePickerProps } from './DatePicker.types'; import { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from '../internals/utils/utils'; +import { PickerValidDate } from '../models'; -type DatePickerComponent = (( +type DatePickerComponent = (( props: DatePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -22,7 +23,7 @@ type DatePickerComponent = (( * * - [DatePicker API](https://mui.com/x/api/date-pickers/date-picker/) */ -const DatePicker = React.forwardRef(function DatePicker( +const DatePicker = React.forwardRef(function DatePicker( inProps: DatePickerProps, ref: React.Ref, ) { @@ -69,7 +70,7 @@ DatePicker.propTypes = { * The default value. * Used when the component is not controlled. */ - defaultValue: PropTypes.any, + defaultValue: PropTypes.object, /** * CSS media query when `Mobile` mode will be changed to `Desktop`. * @default '@media (pointer: fine)' @@ -144,11 +145,11 @@ DatePicker.propTypes = { /** * Maximal selectable date. */ - maxDate: PropTypes.any, + maxDate: PropTypes.object, /** * Minimal selectable date. */ - minDate: PropTypes.any, + minDate: PropTypes.object, /** * Months rendered per row. * @default 3 @@ -240,7 +241,7 @@ DatePicker.propTypes = { * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * Component displaying when passed `loading` true. * @returns {React.ReactNode} The node to render when loading. @@ -340,7 +341,7 @@ DatePicker.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.any, + value: PropTypes.object, /** * The visible view. * Used when the component view is controlled. diff --git a/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts b/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts index 9c3c09d712cea..a287263829adc 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts +++ b/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts @@ -8,16 +8,17 @@ import { MobileDatePickerSlots, MobileDatePickerSlotProps, } from '../MobileDatePicker'; +import { PickerValidDate } from '../models'; -export interface DatePickerSlots +export interface DatePickerSlots extends DesktopDatePickerSlots, MobileDatePickerSlots {} -export interface DatePickerSlotProps +export interface DatePickerSlotProps extends DesktopDatePickerSlotProps, MobileDatePickerSlotProps {} -export interface DatePickerProps +export interface DatePickerProps extends DesktopDatePickerProps, MobileDatePickerProps { /** diff --git a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx index 6ab7b05fbc5ee..aaaaeb64d01cc 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx +++ b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx @@ -6,14 +6,15 @@ import { unstable_composeClasses as composeClasses } from '@mui/utils'; import { PickersToolbar } from '../internals/components/PickersToolbar'; import { useLocaleText, useUtils } from '../internals/hooks/useUtils'; import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar'; -import { DateView } from '../models'; +import { DateView, PickerValidDate } from '../models'; import { DatePickerToolbarClasses, getDatePickerToolbarUtilityClass, } from './datePickerToolbarClasses'; import { resolveDateFormat } from '../internals/utils/date-utils'; -export interface DatePickerToolbarProps extends BaseToolbarProps { +export interface DatePickerToolbarProps + extends BaseToolbarProps { classes?: Partial; sx?: SxProps; } @@ -46,7 +47,7 @@ const DatePickerToolbarTitle = styled(Typography, { }), })); -type DatePickerToolbarComponent = (( +type DatePickerToolbarComponent = (( props: DatePickerToolbarProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -60,10 +61,9 @@ type DatePickerToolbarComponent = (( * * - [DatePickerToolbar API](https://mui.com/x/api/date-pickers/date-picker-toolbar/) */ -export const DatePickerToolbar = React.forwardRef(function DatePickerToolbar( - inProps: DatePickerToolbarProps, - ref: React.Ref, -) { +export const DatePickerToolbar = React.forwardRef(function DatePickerToolbar< + TDate extends PickerValidDate, +>(inProps: DatePickerToolbarProps, ref: React.Ref) { const props = useThemeProps({ props: inProps, name: 'MuiDatePickerToolbar' }); const { value, @@ -148,7 +148,7 @@ DatePickerToolbar.propTypes = { * @default "––" */ toolbarPlaceholder: PropTypes.node, - value: PropTypes.any, + value: PropTypes.object, /** * Currently visible picker view. */ diff --git a/packages/x-date-pickers/src/DatePicker/shared.tsx b/packages/x-date-pickers/src/DatePicker/shared.tsx index f770435368dc4..6618e5b31c731 100644 --- a/packages/x-date-pickers/src/DatePicker/shared.tsx +++ b/packages/x-date-pickers/src/DatePicker/shared.tsx @@ -8,7 +8,7 @@ import { } from '../DateCalendar/DateCalendar.types'; import { useDefaultDates, useUtils } from '../internals/hooks/useUtils'; import { applyDefaultViewProps } from '../internals/utils/views'; -import { DateValidationError, DateView } from '../models'; +import { DateValidationError, DateView, PickerValidDate } from '../models'; import { BasePickerInputProps } from '../internals/models/props/basePickerProps'; import { applyDefaultDate } from '../internals/utils/date-utils'; import { BaseDateValidationProps } from '../internals/models/validation'; @@ -21,7 +21,8 @@ import { import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews'; import { DateViewRendererProps } from '../dateViewRenderers'; -export interface BaseDatePickerSlots extends DateCalendarSlots { +export interface BaseDatePickerSlots + extends DateCalendarSlots { /** * Custom component for the toolbar rendered above the views. * @default DatePickerToolbar @@ -29,11 +30,12 @@ export interface BaseDatePickerSlots extends DateCalendarSlots { toolbar?: React.JSXElementConstructor>; } -export interface BaseDatePickerSlotProps extends DateCalendarSlotProps { +export interface BaseDatePickerSlotProps + extends DateCalendarSlotProps { toolbar?: ExportedDatePickerToolbarProps; } -export interface BaseDatePickerProps +export interface BaseDatePickerProps extends BasePickerInputProps, ExportedDateCalendarProps { /** @@ -57,17 +59,17 @@ export interface BaseDatePickerProps } type UseDatePickerDefaultizedProps< - TDate, + TDate extends PickerValidDate, Props extends BaseDatePickerProps, > = LocalizedComponent< TDate, DefaultizedProps> >; -export function useDatePickerDefaultizedProps>( - props: Props, - name: string, -): UseDatePickerDefaultizedProps { +export function useDatePickerDefaultizedProps< + TDate extends PickerValidDate, + Props extends BaseDatePickerProps, +>(props: Props, name: string): UseDatePickerDefaultizedProps { const utils = useUtils(); const defaultDates = useDefaultDates(); const themeProps = useThemeProps({ diff --git a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx index 21a90d5d8e238..118da3db5daf4 100644 --- a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx +++ b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx @@ -8,8 +8,9 @@ import { DateTimeFieldProps, DateTimeFieldSlotProps } from './DateTimeField.type import { useDateTimeField } from './useDateTimeField'; import { useClearableField } from '../hooks'; import { convertFieldResponseIntoMuiTextFieldProps } from '../internals/utils/convertFieldResponseIntoMuiTextFieldProps'; +import { PickerValidDate } from '../models'; -type DateTimeFieldComponent = (( +type DateTimeFieldComponent = (( props: DateTimeFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -23,7 +24,7 @@ type DateTimeFieldComponent = (( * * - [DateTimeField API](https://mui.com/x/api/date-pickers/date-time-field/) */ -const DateTimeField = React.forwardRef(function DateTimeField( +const DateTimeField = React.forwardRef(function DateTimeField( inProps: DateTimeFieldProps, inRef: React.Ref, ) { @@ -100,7 +101,7 @@ DateTimeField.propTypes = { /** * The default value. Use when the component is not controlled. */ - defaultValue: PropTypes.any, + defaultValue: PropTypes.object, /** * If `true`, the component is disabled. * @default false @@ -192,29 +193,29 @@ DateTimeField.propTypes = { /** * Maximal selectable date. */ - maxDate: PropTypes.any, + maxDate: PropTypes.object, /** * Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */ - maxDateTime: PropTypes.any, + maxDateTime: PropTypes.object, /** * Maximal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - maxTime: PropTypes.any, + maxTime: PropTypes.object, /** * Minimal selectable date. */ - minDate: PropTypes.any, + minDate: PropTypes.object, /** * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */ - minDateTime: PropTypes.any, + minDateTime: PropTypes.object, /** * Minimal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - minTime: PropTypes.any, + minTime: PropTypes.object, /** * Step over minutes. * @default 1 @@ -262,7 +263,7 @@ DateTimeField.propTypes = { * For example, on time fields it will be used to determine the date to set. * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * If `true`, the label is displayed as required and the `input` element is required. * @default false @@ -382,7 +383,7 @@ DateTimeField.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.any, + value: PropTypes.object, /** * The variant to use. * @default 'outlined' diff --git a/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts b/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts index 98e0973d76514..984e6cf62b910 100644 --- a/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts +++ b/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { SlotComponentProps } from '@mui/base/utils'; import TextField from '@mui/material/TextField'; -import { DateTimeValidationError, FieldSection } from '../models'; +import { DateTimeValidationError, FieldSection, PickerValidDate } from '../models'; import { UseFieldInternalProps } from '../internals/hooks/useField'; import { DefaultizedProps, MakeOptional } from '../internals/models/helpers'; import { @@ -16,7 +16,7 @@ import { import { FieldsTextFieldProps } from '../internals/models/fields'; import { UseClearableFieldSlots, UseClearableFieldSlotProps } from '../hooks/useClearableField'; -export interface UseDateTimeFieldProps +export interface UseDateTimeFieldProps extends MakeOptional< UseFieldInternalProps, 'format' @@ -35,18 +35,17 @@ export interface UseDateTimeFieldProps ampm?: boolean; } -export type UseDateTimeFieldDefaultizedProps = DefaultizedProps< +export type UseDateTimeFieldDefaultizedProps = DefaultizedProps< UseDateTimeFieldProps, keyof BaseDateValidationProps | keyof BaseTimeValidationProps | 'format' >; -export type UseDateTimeFieldComponentProps = Omit< - TChildProps, - keyof UseDateTimeFieldProps -> & - UseDateTimeFieldProps; +export type UseDateTimeFieldComponentProps< + TDate extends PickerValidDate, + TChildProps extends {}, +> = Omit> & UseDateTimeFieldProps; -export interface DateTimeFieldProps +export interface DateTimeFieldProps extends UseDateTimeFieldComponentProps { /** * Overridable component slots. @@ -60,7 +59,7 @@ export interface DateTimeFieldProps slotProps?: DateTimeFieldSlotProps; } -export type DateTimeFieldOwnerState = DateTimeFieldProps; +export type DateTimeFieldOwnerState = DateTimeFieldProps; export interface DateTimeFieldSlots extends UseClearableFieldSlots { /** @@ -71,6 +70,7 @@ export interface DateTimeFieldSlots extends UseClearableFieldSlots { textField?: React.ElementType; } -export interface DateTimeFieldSlotProps extends UseClearableFieldSlotProps { +export interface DateTimeFieldSlotProps + extends UseClearableFieldSlotProps { textField?: SlotComponentProps>; } diff --git a/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts b/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts index 7e8236f12b3ab..021ea1cc3baa8 100644 --- a/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts +++ b/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts @@ -12,8 +12,9 @@ import { validateDateTime } from '../internals/utils/validation/validateDateTime import { applyDefaultDate } from '../internals/utils/date-utils'; import { useUtils, useDefaultDates } from '../internals/hooks/useUtils'; import { splitFieldInternalAndForwardedProps } from '../internals/utils/fields'; +import { PickerValidDate } from '../models'; -const useDefaultizedDateTimeField = ( +const useDefaultizedDateTimeField = ( props: UseDateTimeFieldProps, ): AdditionalProps & UseDateTimeFieldDefaultizedProps => { const utils = useUtils(); @@ -37,7 +38,7 @@ const useDefaultizedDateTimeField = ( } as any; }; -export const useDateTimeField = ( +export const useDateTimeField = ( inProps: UseDateTimeFieldComponentProps, ) => { const props = useDefaultizedDateTimeField(inProps); diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx index d00a9598a5756..f8a709895ef37 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx @@ -7,8 +7,9 @@ import { DesktopDateTimePicker } from '../DesktopDateTimePicker'; import { MobileDateTimePicker, MobileDateTimePickerProps } from '../MobileDateTimePicker'; import { DateTimePickerProps } from './DateTimePicker.types'; import { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from '../internals/utils/utils'; +import { PickerValidDate } from '../models'; -type DateTimePickerComponent = (( +type DateTimePickerComponent = (( props: DateTimePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -22,7 +23,7 @@ type DateTimePickerComponent = (( * * - [DateTimePicker API](https://mui.com/x/api/date-pickers/date-time-picker/) */ -const DateTimePicker = React.forwardRef(function DateTimePicker( +const DateTimePicker = React.forwardRef(function DateTimePicker( inProps: DateTimePickerProps, ref: React.Ref, ) { @@ -79,7 +80,7 @@ DateTimePicker.propTypes = { * The default value. * Used when the component is not controlled. */ - defaultValue: PropTypes.any, + defaultValue: PropTypes.object, /** * CSS media query when `Mobile` mode will be changed to `Desktop`. * @default '@media (pointer: fine)' @@ -159,29 +160,29 @@ DateTimePicker.propTypes = { /** * Maximal selectable date. */ - maxDate: PropTypes.any, + maxDate: PropTypes.object, /** * Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */ - maxDateTime: PropTypes.any, + maxDateTime: PropTypes.object, /** * Maximal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - maxTime: PropTypes.any, + maxTime: PropTypes.object, /** * Minimal selectable date. */ - minDate: PropTypes.any, + minDate: PropTypes.object, /** * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */ - minDateTime: PropTypes.any, + minDateTime: PropTypes.object, /** * Minimal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - minTime: PropTypes.any, + minTime: PropTypes.object, /** * Step over minutes. * @default 1 @@ -278,7 +279,7 @@ DateTimePicker.propTypes = { * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * Component displaying when passed `loading` true. * @returns {React.ReactNode} The node to render when loading. @@ -407,7 +408,7 @@ DateTimePicker.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.any, + value: PropTypes.object, /** * The visible view. * Used when the component view is controlled. diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts index 11c592b43e4fe..261c0907f258e 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts @@ -9,16 +9,17 @@ import { MobileDateTimePickerSlots, MobileDateTimePickerSlotProps, } from '../MobileDateTimePicker'; +import { PickerValidDate } from '../models'; -export interface DateTimePickerSlots +export interface DateTimePickerSlots extends DesktopDateTimePickerSlots, MobileDateTimePickerSlots {} -export interface DateTimePickerSlotProps +export interface DateTimePickerSlotProps extends DesktopDateTimePickerSlotProps, MobileDateTimePickerSlotProps {} -export interface DateTimePickerProps +export interface DateTimePickerProps extends DesktopDateTimePickerProps, Omit, 'views'> { /** diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx index d817ba20003a7..b622fa791f990 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx @@ -20,13 +20,14 @@ import { formatMeridiem } from '../internals/utils/date-utils'; import { MakeOptional } from '../internals/models/helpers'; import { pickersToolbarTextClasses } from '../internals/components/pickersToolbarTextClasses'; import { pickersToolbarClasses } from '../internals'; +import { PickerValidDate } from '../models'; export interface ExportedDateTimePickerToolbarProps extends ExportedBaseToolbarProps { ampm?: boolean; ampmInClock?: boolean; } -export interface DateTimePickerToolbarProps +export interface DateTimePickerToolbarProps extends ExportedDateTimePickerToolbarProps, MakeOptional, 'view'> { /** @@ -209,7 +210,9 @@ const DateTimePickerToolbarAmPmSelection = styled('div', { * * - [DateTimePickerToolbar API](https://mui.com/x/api/date-pickers/date-time-picker-toolbar/) */ -function DateTimePickerToolbar(inProps: DateTimePickerToolbarProps) { +function DateTimePickerToolbar( + inProps: DateTimePickerToolbarProps, +) { const props = useThemeProps({ props: inProps, name: 'MuiDateTimePickerToolbar' }); const { ampm, @@ -425,7 +428,7 @@ DateTimePickerToolbar.propTypes = { */ toolbarTitle: PropTypes.node, toolbarVariant: PropTypes.oneOf(['desktop', 'mobile']), - value: PropTypes.any, + value: PropTypes.object, /** * Currently visible picker view. */ diff --git a/packages/x-date-pickers/src/DateTimePicker/shared.tsx b/packages/x-date-pickers/src/DateTimePicker/shared.tsx index ff7ef45d18728..feb1531a67877 100644 --- a/packages/x-date-pickers/src/DateTimePicker/shared.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/shared.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useThemeProps } from '@mui/material/styles'; import { DefaultizedProps } from '../internals/models/helpers'; -import { DateTimeValidationError } from '../models'; +import { DateTimeValidationError, PickerValidDate } from '../models'; import { useDefaultDates, useUtils } from '../internals/hooks/useUtils'; import { DateCalendarSlots, @@ -34,7 +34,9 @@ import { applyDefaultViewProps } from '../internals/utils/views'; import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/clock'; import { DateOrTimeViewWithMeridiem, TimeViewWithMeridiem } from '../internals/models'; -export interface BaseDateTimePickerSlots extends DateCalendarSlots, TimeClockSlots { +export interface BaseDateTimePickerSlots + extends DateCalendarSlots, + TimeClockSlots { /** * Tabs enabling toggling between date and time pickers. * @default DateTimePickerTabs @@ -47,7 +49,7 @@ export interface BaseDateTimePickerSlots extends DateCalendarSlots toolbar?: React.JSXElementConstructor>; } -export interface BaseDateTimePickerSlotProps +export interface BaseDateTimePickerSlotProps extends DateCalendarSlotProps, TimeClockSlotProps { /** @@ -60,8 +62,10 @@ export interface BaseDateTimePickerSlotProps toolbar?: ExportedDateTimePickerToolbarProps; } -export interface BaseDateTimePickerProps - extends BasePickerInputProps, +export interface BaseDateTimePickerProps< + TDate extends PickerValidDate, + TView extends DateOrTimeViewWithMeridiem, +> extends BasePickerInputProps, Omit, 'onViewChange'>, ExportedBaseClockProps, DateTimeValidationProps { @@ -97,7 +101,7 @@ export interface BaseDateTimePickerProps, > = LocalizedComponent< @@ -114,7 +118,7 @@ type UseDateTimePickerDefaultizedProps< >; export function useDateTimePickerDefaultizedProps< - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, Props extends BaseDateTimePickerProps, >(props: Props, name: string): UseDateTimePickerDefaultizedProps { diff --git a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx index c338f20d131bc..dcf4c673fc86e 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx @@ -7,7 +7,7 @@ import { DesktopDatePickerProps } from './DesktopDatePicker.types'; import { useDatePickerDefaultizedProps } from '../DatePicker/shared'; import { useLocaleText, useUtils } from '../internals/hooks/useUtils'; import { validateDate } from '../internals/utils/validation/validateDate'; -import { DateView } from '../models'; +import { DateView, PickerValidDate } from '../models'; import { useDesktopPicker } from '../internals/hooks/useDesktopPicker'; import { CalendarIcon } from '../icons'; import { DateField } from '../DateField'; @@ -16,7 +16,7 @@ import { renderDateViewCalendar } from '../dateViewRenderers'; import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews'; import { resolveDateFormat } from '../internals/utils/date-utils'; -type DesktopDatePickerComponent = (( +type DesktopDatePickerComponent = (( props: DesktopDatePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -30,10 +30,9 @@ type DesktopDatePickerComponent = (( * * - [DesktopDatePicker API](https://mui.com/x/api/date-pickers/desktop-date-picker/) */ -const DesktopDatePicker = React.forwardRef(function DesktopDatePicker( - inProps: DesktopDatePickerProps, - ref: React.Ref, -) { +const DesktopDatePicker = React.forwardRef(function DesktopDatePicker< + TDate extends PickerValidDate, +>(inProps: DesktopDatePickerProps, ref: React.Ref) { const localeText = useLocaleText(); const utils = useUtils(); @@ -116,7 +115,7 @@ DesktopDatePicker.propTypes = { * The default value. * Used when the component is not controlled. */ - defaultValue: PropTypes.any, + defaultValue: PropTypes.object, /** * If `true`, the picker and text field are disabled. * @default false @@ -185,11 +184,11 @@ DesktopDatePicker.propTypes = { /** * Maximal selectable date. */ - maxDate: PropTypes.any, + maxDate: PropTypes.object, /** * Minimal selectable date. */ - minDate: PropTypes.any, + minDate: PropTypes.object, /** * Months rendered per row. * @default 3 @@ -281,7 +280,7 @@ DesktopDatePicker.propTypes = { * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * Component displaying when passed `loading` true. * @returns {React.ReactNode} The node to render when loading. @@ -381,7 +380,7 @@ DesktopDatePicker.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.any, + value: PropTypes.object, /** * The visible view. * Used when the component view is controlled. diff --git a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts index 8c423832fa0da..ef33cb389df47 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts +++ b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts @@ -9,17 +9,17 @@ import { BaseDatePickerSlotProps, } from '../DatePicker/shared'; import { MakeOptional } from '../internals/models/helpers'; -import { DateView } from '../models'; +import { DateView, PickerValidDate } from '../models'; -export interface DesktopDatePickerSlots +export interface DesktopDatePickerSlots extends BaseDatePickerSlots, MakeOptional, 'field' | 'openPickerIcon'> {} -export interface DesktopDatePickerSlotProps +export interface DesktopDatePickerSlotProps extends BaseDatePickerSlotProps, ExportedUseDesktopPickerSlotProps {} -export interface DesktopDatePickerProps +export interface DesktopDatePickerProps extends BaseDatePickerProps, DesktopOnlyPickerProps { /** diff --git a/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx b/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx index 5f89b74ea0290..7c64c8832c42a 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx @@ -307,15 +307,6 @@ describe('', () => { expect(screen.getByLabelText('Next month')).not.to.have.attribute('disabled'); }); - - it('should allow to navigate to previous and next month if props.minDate == null', () => { - render(); - - openPicker({ type: 'date', variant: 'desktop' }); - - expect(screen.getByLabelText('Previous month')).not.to.have.attribute('disabled'); - expect(screen.getByLabelText('Next month')).not.to.have.attribute('disabled'); - }); }); describe('Validation', () => { diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx index 64775b786702f..dd39ba02e7794 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx @@ -20,8 +20,9 @@ import { resolveTimeViewsResponse, } from '../internals/utils/date-time-utils'; import { PickersActionBarAction } from '../PickersActionBar'; +import { PickerValidDate } from '../models'; -type DesktopDateTimePickerComponent = (( +type DesktopDateTimePickerComponent = (( props: DesktopDateTimePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -35,10 +36,9 @@ type DesktopDateTimePickerComponent = (( * * - [DesktopDateTimePicker API](https://mui.com/x/api/date-pickers/desktop-date-time-picker/) */ -const DesktopDateTimePicker = React.forwardRef(function DesktopDateTimePicker( - inProps: DesktopDateTimePickerProps, - ref: React.Ref, -) { +const DesktopDateTimePicker = React.forwardRef(function DesktopDateTimePicker< + TDate extends PickerValidDate, +>(inProps: DesktopDateTimePickerProps, ref: React.Ref) { const localeText = useLocaleText(); const utils = useUtils(); @@ -175,7 +175,7 @@ DesktopDateTimePicker.propTypes = { * The default value. * Used when the component is not controlled. */ - defaultValue: PropTypes.any, + defaultValue: PropTypes.object, /** * If `true`, the picker and text field are disabled. * @default false @@ -249,29 +249,29 @@ DesktopDateTimePicker.propTypes = { /** * Maximal selectable date. */ - maxDate: PropTypes.any, + maxDate: PropTypes.object, /** * Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */ - maxDateTime: PropTypes.any, + maxDateTime: PropTypes.object, /** * Maximal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - maxTime: PropTypes.any, + maxTime: PropTypes.object, /** * Minimal selectable date. */ - minDate: PropTypes.any, + minDate: PropTypes.object, /** * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */ - minDateTime: PropTypes.any, + minDateTime: PropTypes.object, /** * Minimal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - minTime: PropTypes.any, + minTime: PropTypes.object, /** * Step over minutes. * @default 1 @@ -368,7 +368,7 @@ DesktopDateTimePicker.propTypes = { * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * Component displaying when passed `loading` true. * @returns {React.ReactNode} The node to render when loading. @@ -497,7 +497,7 @@ DesktopDateTimePicker.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.any, + value: PropTypes.object, /** * The visible view. * Used when the component view is controlled. diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts index d36ce2b031455..4848a1477317f 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts @@ -9,7 +9,7 @@ import { BaseDateTimePickerSlotProps, } from '../DateTimePicker/shared'; import { MakeOptional } from '../internals/models/helpers'; -import { DateOrTimeView } from '../models'; +import { DateOrTimeView, PickerValidDate } from '../models'; import { DesktopOnlyTimePickerProps } from '../internals/models/props/clock'; import { DateOrTimeViewWithMeridiem } from '../internals/models'; import { @@ -18,7 +18,7 @@ import { } from '../MultiSectionDigitalClock'; import { DigitalClockSlots, DigitalClockSlotProps } from '../DigitalClock'; -export interface DesktopDateTimePickerSlots +export interface DesktopDateTimePickerSlots extends BaseDateTimePickerSlots, MakeOptional< UseDesktopPickerSlots, @@ -27,13 +27,13 @@ export interface DesktopDateTimePickerSlots DigitalClockSlots, MultiSectionDigitalClockSlots {} -export interface DesktopDateTimePickerSlotProps +export interface DesktopDateTimePickerSlotProps extends BaseDateTimePickerSlotProps, ExportedUseDesktopPickerSlotProps, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {} -export interface DesktopDateTimePickerProps +export interface DesktopDateTimePickerProps extends BaseDateTimePickerProps, DesktopOnlyPickerProps, DesktopOnlyTimePickerProps { diff --git a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx index de810cb47552b..659c364afb4e9 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx @@ -20,9 +20,9 @@ import { PickersActionBarAction } from '../PickersActionBar'; import { TimeViewWithMeridiem } from '../internals/models'; import { resolveTimeFormat } from '../internals/utils/time-utils'; import { resolveTimeViewsResponse } from '../internals/utils/date-time-utils'; -import { TimeView } from '../models/views'; +import { TimeView, PickerValidDate } from '../models'; -type DesktopTimePickerComponent = (( +type DesktopTimePickerComponent = (( props: DesktopTimePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -36,10 +36,9 @@ type DesktopTimePickerComponent = (( * * - [DesktopTimePicker API](https://mui.com/x/api/date-pickers/desktop-time-picker/) */ -const DesktopTimePicker = React.forwardRef(function DesktopTimePicker( - inProps: DesktopTimePickerProps, - ref: React.Ref, -) { +const DesktopTimePicker = React.forwardRef(function DesktopTimePicker< + TDate extends PickerValidDate, +>(inProps: DesktopTimePickerProps, ref: React.Ref) { const localeText = useLocaleText(); const utils = useUtils(); @@ -157,7 +156,7 @@ DesktopTimePicker.propTypes = { * The default value. * Used when the component is not controlled. */ - defaultValue: PropTypes.any, + defaultValue: PropTypes.object, /** * If `true`, the picker and text field are disabled. * @default false @@ -211,12 +210,12 @@ DesktopTimePicker.propTypes = { * Maximal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - maxTime: PropTypes.any, + maxTime: PropTypes.object, /** * Minimal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - minTime: PropTypes.any, + minTime: PropTypes.object, /** * Step over minutes. * @default 1 @@ -296,7 +295,7 @@ DesktopTimePicker.propTypes = { * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * The currently selected sections. * This prop accept four formats: @@ -384,7 +383,7 @@ DesktopTimePicker.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.any, + value: PropTypes.object, /** * The visible view. * Used when the component view is controlled. diff --git a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.types.ts b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.types.ts index 6f3735460d58e..ec9a50c0c2c48 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.types.ts +++ b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.types.ts @@ -16,21 +16,21 @@ import { MultiSectionDigitalClockSlots, MultiSectionDigitalClockSlotProps, } from '../MultiSectionDigitalClock'; -import { TimeView } from '../models'; +import { PickerValidDate, TimeView } from '../models'; -export interface DesktopTimePickerSlots +export interface DesktopTimePickerSlots extends BaseTimePickerSlots, MakeOptional, 'field' | 'openPickerIcon'>, DigitalClockSlots, MultiSectionDigitalClockSlots {} -export interface DesktopTimePickerSlotProps +export interface DesktopTimePickerSlotProps extends BaseTimePickerSlotProps, ExportedUseDesktopPickerSlotProps, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {} -export interface DesktopTimePickerProps +export interface DesktopTimePickerProps extends BaseTimePickerProps, DesktopOnlyPickerProps, DesktopOnlyTimePickerProps { diff --git a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx b/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx index 94fcdb8d9f895..e3824be369071 100644 --- a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx +++ b/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx @@ -14,7 +14,7 @@ import { PickerViewRoot } from '../internals/components/PickerViewRoot'; import { getDigitalClockUtilityClass } from './digitalClockClasses'; import { DigitalClockProps } from './DigitalClock.types'; import { useViews } from '../internals/hooks/useViews'; -import { TimeView } from '../models'; +import { PickerValidDate, TimeView } from '../models'; import { DIGITAL_CLOCK_VIEW_HEIGHT } from '../internals/constants/dimensions'; import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone'; import { singleItemValueManager } from '../internals/utils/valueManagers'; @@ -81,7 +81,7 @@ const DigitalClockItem = styled(MenuItem, { }, })); -type DigitalClockComponent = (( +type DigitalClockComponent = (( props: DigitalClockProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -95,7 +95,7 @@ type DigitalClockComponent = (( * * - [DigitalClock API](https://mui.com/x/api/date-pickers/digital-clock/) */ -export const DigitalClock = React.forwardRef(function DigitalClock( +export const DigitalClock = React.forwardRef(function DigitalClock( inProps: DigitalClockProps, ref: React.Ref, ) { @@ -352,7 +352,7 @@ DigitalClock.propTypes = { * The default selected value. * Used when the component is not controlled. */ - defaultValue: PropTypes.any, + defaultValue: PropTypes.object, /** * If `true`, the picker views and text field are disabled. * @default false @@ -381,12 +381,12 @@ DigitalClock.propTypes = { * Maximal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - maxTime: PropTypes.any, + maxTime: PropTypes.object, /** * Minimal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - minTime: PropTypes.any, + minTime: PropTypes.object, /** * Step over minutes. * @default 1 @@ -429,7 +429,7 @@ DigitalClock.propTypes = { * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid time using the validation props, except callbacks such as `shouldDisableTime`. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * Disable specific time. * @template TDate @@ -479,7 +479,7 @@ DigitalClock.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.any, + value: PropTypes.object, /** * The visible view. * Used when the component view is controlled. diff --git a/packages/x-date-pickers/src/DigitalClock/DigitalClock.types.ts b/packages/x-date-pickers/src/DigitalClock/DigitalClock.types.ts index 35b88400f1a92..7b98c84670d60 100644 --- a/packages/x-date-pickers/src/DigitalClock/DigitalClock.types.ts +++ b/packages/x-date-pickers/src/DigitalClock/DigitalClock.types.ts @@ -1,3 +1,4 @@ +import * as React from 'react'; import { SlotComponentProps } from '@mui/base/utils'; import MenuItem from '@mui/material/MenuItem'; import { DigitalClockClasses } from './digitalClockClasses'; @@ -6,9 +7,9 @@ import { DigitalClockOnlyProps, ExportedBaseClockProps, } from '../internals/models/props/clock'; -import { TimeView } from '../models'; +import { PickerValidDate, TimeView } from '../models'; -export interface ExportedDigitalClockProps +export interface ExportedDigitalClockProps extends ExportedBaseClockProps, DigitalClockOnlyProps {} @@ -24,7 +25,7 @@ export interface DigitalClockSlotProps { digitalClockItem?: SlotComponentProps>; } -export interface DigitalClockProps +export interface DigitalClockProps extends ExportedDigitalClockProps, BaseClockProps> { /** diff --git a/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx b/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx index 956bf452ccb75..e7f74202614ad 100644 --- a/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx +++ b/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { useThemeProps } from '@mui/material/styles'; -import { AdapterFormats, MuiPickersAdapter } from '../models'; +import { AdapterFormats, MuiPickersAdapter, PickerValidDate } from '../models'; import { PickersInputLocaleText } from '../locales'; -export interface MuiPickersAdapterContextValue { +export interface MuiPickersAdapterContextValue { defaultDates: { minDate: TDate; maxDate: TDate; @@ -14,7 +14,7 @@ export interface MuiPickersAdapterContextValue { localeText: PickersInputLocaleText | undefined; } -export type MuiPickersAdapterContextNullableValue = { +export type MuiPickersAdapterContextNullableValue = { [K in keyof MuiPickersAdapterContextValue]: MuiPickersAdapterContextValue[K] | null; }; @@ -25,7 +25,7 @@ if (process.env.NODE_ENV !== 'production') { MuiPickersAdapterContext.displayName = 'MuiPickersAdapterContext'; } -export interface LocalizationProviderProps { +export interface LocalizationProviderProps { children?: React.ReactNode; /** * Date library adapter class function. @@ -51,7 +51,7 @@ export interface LocalizationProviderProps { localeText?: PickersInputLocaleText; } -type LocalizationProviderComponent = (( +type LocalizationProviderComponent = (( props: LocalizationProviderProps, ) => React.JSX.Element) & { propTypes?: any }; @@ -67,9 +67,10 @@ type LocalizationProviderComponent = (( * * - [LocalizationProvider API](https://mui.com/x/api/date-pickers/localization-provider/) */ -export const LocalizationProvider = function LocalizationProvider( - inProps: LocalizationProviderProps, -) { +export const LocalizationProvider = function LocalizationProvider< + TDate extends PickerValidDate, + TLocale, +>(inProps: LocalizationProviderProps) { const { localeText: inLocaleText, ...otherInProps } = inProps; const { utils: parentUtils, localeText: parentLocaleText } = React.useContext( diff --git a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx index 33d54782889fa..6453a80e40a31 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx +++ b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx @@ -8,14 +8,14 @@ import { useDatePickerDefaultizedProps } from '../DatePicker/shared'; import { useUtils, useLocaleText } from '../internals/hooks/useUtils'; import { validateDate } from '../internals/utils/validation/validateDate'; import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews'; -import { DateView } from '../models'; +import { DateView, PickerValidDate } from '../models'; import { DateField } from '../DateField'; import { extractValidationProps } from '../internals/utils/validation/extractValidationProps'; import { singleItemValueManager } from '../internals/utils/valueManagers'; import { renderDateViewCalendar } from '../dateViewRenderers'; import { resolveDateFormat } from '../internals/utils/date-utils'; -type MobileDatePickerComponent = (( +type MobileDatePickerComponent = (( props: MobileDatePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -29,7 +29,7 @@ type MobileDatePickerComponent = (( * * - [MobileDatePicker API](https://mui.com/x/api/date-pickers/mobile-date-picker/) */ -const MobileDatePicker = React.forwardRef(function MobileDatePicker( +const MobileDatePicker = React.forwardRef(function MobileDatePicker( inProps: MobileDatePickerProps, ref: React.Ref, ) { @@ -113,7 +113,7 @@ MobileDatePicker.propTypes = { * The default value. * Used when the component is not controlled. */ - defaultValue: PropTypes.any, + defaultValue: PropTypes.object, /** * If `true`, the picker and text field are disabled. * @default false @@ -182,11 +182,11 @@ MobileDatePicker.propTypes = { /** * Maximal selectable date. */ - maxDate: PropTypes.any, + maxDate: PropTypes.object, /** * Minimal selectable date. */ - minDate: PropTypes.any, + minDate: PropTypes.object, /** * Months rendered per row. * @default 3 @@ -278,7 +278,7 @@ MobileDatePicker.propTypes = { * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * Component displaying when passed `loading` true. * @returns {React.ReactNode} The node to render when loading. @@ -378,7 +378,7 @@ MobileDatePicker.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.any, + value: PropTypes.object, /** * The visible view. * Used when the component view is controlled. diff --git a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts index 31fb295dbfd76..d6371b06907e5 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts +++ b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts @@ -9,17 +9,17 @@ import { BaseDatePickerSlotProps, } from '../DatePicker/shared'; import { MakeOptional } from '../internals/models/helpers'; -import { DateView } from '../models'; +import { DateView, PickerValidDate } from '../models'; -export interface MobileDatePickerSlots +export interface MobileDatePickerSlots extends BaseDatePickerSlots, MakeOptional, 'field'> {} -export interface MobileDatePickerSlotProps +export interface MobileDatePickerSlotProps extends BaseDatePickerSlotProps, ExportedUseMobilePickerSlotProps {} -export interface MobileDatePickerProps +export interface MobileDatePickerProps extends BaseDatePickerProps, MobileOnlyPickerProps { /** diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx index 4718f0832e3aa..3d4ec9a943da0 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx @@ -9,14 +9,14 @@ import { useDateTimePickerDefaultizedProps } from '../DateTimePicker/shared'; import { useLocaleText, useUtils } from '../internals/hooks/useUtils'; import { validateDateTime } from '../internals/utils/validation/validateDateTime'; import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews'; -import { DateOrTimeView } from '../models'; +import { DateOrTimeView, PickerValidDate } from '../models'; import { useMobilePicker } from '../internals/hooks/useMobilePicker'; import { extractValidationProps } from '../internals/utils/validation/extractValidationProps'; import { renderDateViewCalendar } from '../dateViewRenderers'; import { renderTimeViewClock } from '../timeViewRenderers'; import { resolveDateTimeFormat } from '../internals/utils/date-time-utils'; -type MobileDateTimePickerComponent = (( +type MobileDateTimePickerComponent = (( props: MobileDateTimePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -30,10 +30,9 @@ type MobileDateTimePickerComponent = (( * * - [MobileDateTimePicker API](https://mui.com/x/api/date-pickers/mobile-date-time-picker/) */ -const MobileDateTimePicker = React.forwardRef(function MobileDateTimePicker( - inProps: MobileDateTimePickerProps, - ref: React.Ref, -) { +const MobileDateTimePicker = React.forwardRef(function MobileDateTimePicker< + TDate extends PickerValidDate, +>(inProps: MobileDateTimePickerProps, ref: React.Ref) { const localeText = useLocaleText(); const utils = useUtils(); @@ -135,7 +134,7 @@ MobileDateTimePicker.propTypes = { * The default value. * Used when the component is not controlled. */ - defaultValue: PropTypes.any, + defaultValue: PropTypes.object, /** * If `true`, the picker and text field are disabled. * @default false @@ -209,29 +208,29 @@ MobileDateTimePicker.propTypes = { /** * Maximal selectable date. */ - maxDate: PropTypes.any, + maxDate: PropTypes.object, /** * Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */ - maxDateTime: PropTypes.any, + maxDateTime: PropTypes.object, /** * Maximal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - maxTime: PropTypes.any, + maxTime: PropTypes.object, /** * Minimal selectable date. */ - minDate: PropTypes.any, + minDate: PropTypes.object, /** * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */ - minDateTime: PropTypes.any, + minDateTime: PropTypes.object, /** * Minimal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - minTime: PropTypes.any, + minTime: PropTypes.object, /** * Step over minutes. * @default 1 @@ -328,7 +327,7 @@ MobileDateTimePicker.propTypes = { * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * Component displaying when passed `loading` true. * @returns {React.ReactNode} The node to render when loading. @@ -436,7 +435,7 @@ MobileDateTimePicker.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.any, + value: PropTypes.object, /** * The visible view. * Used when the component view is controlled. diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.types.ts b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.types.ts index 29bb903432789..d8b6a4c1d9621 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.types.ts +++ b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.types.ts @@ -9,23 +9,23 @@ import { BaseDateTimePickerSlotProps, } from '../DateTimePicker/shared'; import { MakeOptional } from '../internals/models/helpers'; -import { DateOrTimeView } from '../models'; +import { DateOrTimeView, PickerValidDate } from '../models'; import { DateOrTimeViewWithMeridiem } from '../internals/models'; export interface MobileDateTimePickerSlots< - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem = DateOrTimeView, > extends BaseDateTimePickerSlots, MakeOptional, 'field'> {} export interface MobileDateTimePickerSlotProps< - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem = DateOrTimeView, > extends BaseDateTimePickerSlotProps, ExportedUseMobilePickerSlotProps {} export interface MobileDateTimePickerProps< - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem = DateOrTimeView, > extends BaseDateTimePickerProps, MobileOnlyPickerProps { diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/tests/MobileDateTimePicker.test.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/tests/MobileDateTimePicker.test.tsx index df67f29c014c1..e796cd42c98a5 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/tests/MobileDateTimePicker.test.tsx +++ b/packages/x-date-pickers/src/MobileDateTimePicker/tests/MobileDateTimePicker.test.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import TextField from '@mui/material/TextField'; import { expect } from 'chai'; import { spy } from 'sinon'; import { fireTouchChangedEvent, screen, userEvent } from '@mui-internal/test-utils'; @@ -31,13 +30,7 @@ describe('', () => { }); it('should render toolbar and tabs by default', () => { - render( - } - />, - ); + render(); expect(screen.queryByMuiTest('picker-toolbar-title')).not.to.equal(null); expect(screen.getByRole('tab', { name: 'pick date' })).not.to.equal(null); diff --git a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx index 242983fde78c7..fc8d5747ef0ea 100644 --- a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx @@ -9,13 +9,13 @@ import { useTimePickerDefaultizedProps } from '../TimePicker/shared'; import { useLocaleText, useUtils } from '../internals/hooks/useUtils'; import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews'; import { validateTime } from '../internals/utils/validation/validateTime'; -import { TimeView } from '../models'; +import { PickerValidDate, TimeView } from '../models'; import { useMobilePicker } from '../internals/hooks/useMobilePicker'; import { extractValidationProps } from '../internals/utils/validation/extractValidationProps'; import { renderTimeViewClock } from '../timeViewRenderers'; import { resolveTimeFormat } from '../internals/utils/time-utils'; -type MobileTimePickerComponent = (( +type MobileTimePickerComponent = (( props: MobileTimePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -29,7 +29,7 @@ type MobileTimePickerComponent = (( * * - [MobileTimePicker API](https://mui.com/x/api/date-pickers/mobile-time-picker/) */ -const MobileTimePicker = React.forwardRef(function MobileTimePicker( +const MobileTimePicker = React.forwardRef(function MobileTimePicker( inProps: MobileTimePickerProps, ref: React.Ref, ) { @@ -120,7 +120,7 @@ MobileTimePicker.propTypes = { * The default value. * Used when the component is not controlled. */ - defaultValue: PropTypes.any, + defaultValue: PropTypes.object, /** * If `true`, the picker and text field are disabled. * @default false @@ -174,12 +174,12 @@ MobileTimePicker.propTypes = { * Maximal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - maxTime: PropTypes.any, + maxTime: PropTypes.object, /** * Minimal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - minTime: PropTypes.any, + minTime: PropTypes.object, /** * Step over minutes. * @default 1 @@ -259,7 +259,7 @@ MobileTimePicker.propTypes = { * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * The currently selected sections. * This prop accept four formats: @@ -326,7 +326,7 @@ MobileTimePicker.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.any, + value: PropTypes.object, /** * The visible view. * Used when the component view is controlled. diff --git a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.types.ts b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.types.ts index 130e42e7a6b5c..152f1f2402ddf 100644 --- a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.types.ts +++ b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.types.ts @@ -9,19 +9,25 @@ import { BaseTimePickerSlotProps, } from '../TimePicker/shared'; import { MakeOptional } from '../internals/models/helpers'; -import { TimeView } from '../models'; +import { PickerValidDate, TimeView } from '../models'; import { TimeViewWithMeridiem } from '../internals/models'; -export interface MobileTimePickerSlots - extends BaseTimePickerSlots, +export interface MobileTimePickerSlots< + TDate extends PickerValidDate, + TView extends TimeViewWithMeridiem = TimeView, +> extends BaseTimePickerSlots, MakeOptional, 'field'> {} -export interface MobileTimePickerSlotProps - extends BaseTimePickerSlotProps, +export interface MobileTimePickerSlotProps< + TDate extends PickerValidDate, + TView extends TimeViewWithMeridiem = TimeView, +> extends BaseTimePickerSlotProps, ExportedUseMobilePickerSlotProps {} -export interface MobileTimePickerProps - extends BaseTimePickerProps, +export interface MobileTimePickerProps< + TDate extends PickerValidDate, + TView extends TimeViewWithMeridiem = TimeView, +> extends BaseTimePickerProps, MobileOnlyPickerProps { /** * Overridable component slots. diff --git a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx index d6d5cc1dcb230..a537531d94885 100644 --- a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx +++ b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx @@ -18,6 +18,7 @@ import { singleItemValueManager } from '../internals/utils/valueManagers'; import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate'; import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone'; import { DIALOG_WIDTH } from '../internals/constants/dimensions'; +import { PickerValidDate } from '../models'; const useUtilityClasses = (ownerState: MonthCalendarProps) => { const { classes } = ownerState; @@ -29,7 +30,7 @@ const useUtilityClasses = (ownerState: MonthCalendarProps) => { return composeClasses(slots, getMonthCalendarUtilityClass, classes); }; -export function useMonthCalendarDefaultizedProps( +export function useMonthCalendarDefaultizedProps( props: MonthCalendarProps, name: string, ): DefaultizedProps< @@ -66,7 +67,7 @@ const MonthCalendarRoot = styled('div', { boxSizing: 'border-box', }); -type MonthCalendarComponent = (( +type MonthCalendarComponent = (( props: MonthCalendarProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -79,7 +80,7 @@ type MonthCalendarComponent = (( * * - [MonthCalendar API](https://mui.com/x/api/date-pickers/month-calendar/) */ -export const MonthCalendar = React.forwardRef(function MonthCalendar( +export const MonthCalendar = React.forwardRef(function MonthCalendar( inProps: MonthCalendarProps, ref: React.Ref, ) { @@ -314,7 +315,7 @@ MonthCalendar.propTypes = { * The default selected value. * Used when the component is not controlled. */ - defaultValue: PropTypes.any, + defaultValue: PropTypes.object, /** * If `true` picker is disabled */ @@ -339,11 +340,11 @@ MonthCalendar.propTypes = { /** * Maximal selectable date. */ - maxDate: PropTypes.any, + maxDate: PropTypes.object, /** * Minimal selectable date. */ - minDate: PropTypes.any, + minDate: PropTypes.object, /** * Months rendered per row. * @default 3 @@ -365,7 +366,7 @@ MonthCalendar.propTypes = { * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid month using the validation props, except callbacks such as `shouldDisableMonth`. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * Disable specific month. * @template TDate @@ -393,5 +394,5 @@ MonthCalendar.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.any, + value: PropTypes.object, } as any; diff --git a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts index c621ee167c9db..c7a8a148c6f8d 100644 --- a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts +++ b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts @@ -2,7 +2,7 @@ import { SxProps } from '@mui/system'; import { Theme } from '@mui/material/styles'; import { MonthCalendarClasses } from './monthCalendarClasses'; import { BaseDateValidationProps, MonthValidationProps } from '../internals/models/validation'; -import { TimezoneProps } from '../models'; +import { PickerValidDate, TimezoneProps } from '../models'; export interface ExportedMonthCalendarProps { /** @@ -11,7 +11,7 @@ export interface ExportedMonthCalendarProps { */ monthsPerRow?: 3 | 4; } -export interface MonthCalendarProps +export interface MonthCalendarProps extends ExportedMonthCalendarProps, MonthValidationProps, BaseDateValidationProps, diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx index 0f4fbe64df7ba..3aae2c8dcb262 100644 --- a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx +++ b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx @@ -17,7 +17,7 @@ import { MultiSectionDigitalClockViewProps, } from './MultiSectionDigitalClock.types'; import { getHourSectionOptions, getTimeSectionOptions } from './MultiSectionDigitalClock.utils'; -import { TimeStepOptions, TimeView } from '../models'; +import { PickerValidDate, TimeStepOptions, TimeView } from '../models'; import { TimeViewWithMeridiem } from '../internals/models'; import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone'; import { singleItemValueManager } from '../internals/utils/valueManagers'; @@ -44,7 +44,7 @@ const MultiSectionDigitalClockRoot = styled(PickerViewRoot, { borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`, })); -type MultiSectionDigitalClockComponent = (( +type MultiSectionDigitalClockComponent = (( props: MultiSectionDigitalClockProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -59,7 +59,7 @@ type MultiSectionDigitalClockComponent = (( * - [MultiSectionDigitalClock API](https://mui.com/x/api/date-pickers/multi-section-digital-clock/) */ export const MultiSectionDigitalClock = React.forwardRef(function MultiSectionDigitalClock< - TDate extends unknown, + TDate extends PickerValidDate, >(inProps: MultiSectionDigitalClockProps, ref: React.Ref) { const utils = useUtils(); @@ -455,7 +455,7 @@ MultiSectionDigitalClock.propTypes = { * The default selected value. * Used when the component is not controlled. */ - defaultValue: PropTypes.any, + defaultValue: PropTypes.object, /** * If `true`, the picker views and text field are disabled. * @default false @@ -484,12 +484,12 @@ MultiSectionDigitalClock.propTypes = { * Maximal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - maxTime: PropTypes.any, + maxTime: PropTypes.object, /** * Minimal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - minTime: PropTypes.any, + minTime: PropTypes.object, /** * Step over minutes. * @default 1 @@ -532,7 +532,7 @@ MultiSectionDigitalClock.propTypes = { * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid time using the validation props, except callbacks such as `shouldDisableTime`. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * Disable specific time. * @template TDate @@ -586,7 +586,7 @@ MultiSectionDigitalClock.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.any, + value: PropTypes.object, /** * The visible view. * Used when the component view is controlled. diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.types.ts b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.types.ts index 13fe496fa09fd..31f2ac1d1d73e 100644 --- a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.types.ts +++ b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.types.ts @@ -1,3 +1,4 @@ +import * as React from 'react'; import { SlotComponentProps } from '@mui/base/utils'; import MenuItem from '@mui/material/MenuItem'; import { MultiSectionDigitalClockClasses } from './multiSectionDigitalClockClasses'; @@ -8,6 +9,7 @@ import { } from '../internals/models/props/clock'; import { MultiSectionDigitalClockSectionProps } from './MultiSectionDigitalClockSection'; import { TimeViewWithMeridiem } from '../internals/models'; +import { PickerValidDate } from '../models'; export interface MultiSectionDigitalClockOption { isDisabled?: (value: TValue) => boolean; @@ -18,7 +20,7 @@ export interface MultiSectionDigitalClockOption { ariaLabel: string; } -export interface ExportedMultiSectionDigitalClockProps +export interface ExportedMultiSectionDigitalClockProps extends ExportedBaseClockProps, MultiSectionDigitalClockOnlyProps {} @@ -37,7 +39,7 @@ export interface MultiSectionDigitalClockSlotProps { digitalClockSectionItem?: SlotComponentProps>; } -export interface MultiSectionDigitalClockProps +export interface MultiSectionDigitalClockProps extends ExportedMultiSectionDigitalClockProps, BaseClockProps { /** diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.ts b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.ts index 660f2a7cf9dff..643fcb5e0c180 100644 --- a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.ts +++ b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.ts @@ -1,7 +1,7 @@ -import { MuiPickersAdapter } from '../models'; +import { MuiPickersAdapter, PickerValidDate } from '../models'; import { MultiSectionDigitalClockOption } from './MultiSectionDigitalClock.types'; -interface IGetHoursSectionOptions { +interface IGetHoursSectionOptions { now: TDate; value: TDate | null; utils: MuiPickersAdapter; @@ -12,7 +12,7 @@ interface IGetHoursSectionOptions { valueOrReferenceDate: TDate; } -export const getHourSectionOptions = ({ +export const getHourSectionOptions = ({ now, value, utils, @@ -66,7 +66,7 @@ export const getHourSectionOptions = ({ return result; }; -interface IGetTimeSectionOptions { +interface IGetTimeSectionOptions { value: number | null; utils: MuiPickersAdapter; isDisabled: (value: number) => boolean; @@ -76,7 +76,7 @@ interface IGetTimeSectionOptions { resolveAriaLabel: (value: string) => string; } -export const getTimeSectionOptions = ({ +export const getTimeSectionOptions = ({ value, utils, isDisabled, diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx index d3367326fca6f..4edc2507e7390 100644 --- a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx +++ b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx @@ -22,6 +22,7 @@ import { PickersCalendarHeaderOwnerState, PickersCalendarHeaderProps, } from './PickersCalendarHeader.types'; +import { PickerValidDate } from '../models'; const useUtilityClasses = (ownerState: PickersCalendarHeaderOwnerState) => { const { classes } = ownerState; @@ -105,7 +106,7 @@ const PickersCalendarHeaderSwitchViewIcon = styled(ArrowDropDownIcon, { transform: 'rotate(0deg)', })); -type PickersCalendarHeaderComponent = (( +type PickersCalendarHeaderComponent = (( props: PickersCalendarHeaderProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -120,10 +121,9 @@ type PickersCalendarHeaderComponent = (( * * - [PickersCalendarHeader API](https://mui.com/x/api/date-pickers/pickers-calendar-header/) */ -const PickersCalendarHeader = React.forwardRef(function PickersCalendarHeader( - inProps: PickersCalendarHeaderProps, - ref: React.Ref, -) { +const PickersCalendarHeader = React.forwardRef(function PickersCalendarHeader< + TDate extends PickerValidDate, +>(inProps: PickersCalendarHeaderProps, ref: React.Ref) { const localeText = useLocaleText(); const utils = useUtils(); @@ -267,7 +267,7 @@ PickersCalendarHeader.propTypes = { */ classes: PropTypes.object, className: PropTypes.string, - currentMonth: PropTypes.any.isRequired, + currentMonth: PropTypes.object.isRequired, disabled: PropTypes.bool, disableFuture: PropTypes.bool, disablePast: PropTypes.bool, @@ -277,8 +277,8 @@ PickersCalendarHeader.propTypes = { */ format: PropTypes.string, labelId: PropTypes.string, - maxDate: PropTypes.any.isRequired, - minDate: PropTypes.any.isRequired, + maxDate: PropTypes.object.isRequired, + minDate: PropTypes.object.isRequired, onMonthChange: PropTypes.func.isRequired, onViewChange: PropTypes.func, reduceAnimations: PropTypes.bool.isRequired, diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts index 506e6d4ce821f..c2270d128f8e8 100644 --- a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts +++ b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts @@ -1,3 +1,4 @@ +import * as React from 'react'; import { SlotComponentProps } from '@mui/base/utils'; import IconButton from '@mui/material/IconButton'; import SvgIcon from '@mui/material/SvgIcon'; @@ -8,7 +9,7 @@ import { PickersArrowSwitcherSlotProps, } from '../internals/components/PickersArrowSwitcher'; import { MonthValidationOptions } from '../internals/hooks/date-helpers-hooks'; -import { DateView } from '../models/views'; +import { PickerValidDate, DateView } from '../models'; import { SlideDirection } from '../DateCalendar/PickersSlideTransition'; import { PickersCalendarHeaderClasses } from './pickersCalendarHeaderClasses'; @@ -28,9 +29,11 @@ export interface PickersCalendarHeaderSlots extends PickersArrowSwitcherSlots { // We keep the interface to allow module augmentation export interface PickersCalendarHeaderSlotPropsOverrides {} -export type PickersCalendarHeaderOwnerState = PickersCalendarHeaderProps; +export type PickersCalendarHeaderOwnerState = + PickersCalendarHeaderProps; -export interface PickersCalendarHeaderSlotProps extends PickersArrowSwitcherSlotProps { +export interface PickersCalendarHeaderSlotProps + extends PickersArrowSwitcherSlotProps { switchViewButton?: SlotComponentProps< typeof IconButton, PickersCalendarHeaderSlotPropsOverrides, @@ -44,7 +47,7 @@ export interface PickersCalendarHeaderSlotProps extends PickersArrowSwitc >; } -export interface PickersCalendarHeaderProps +export interface PickersCalendarHeaderProps extends ExportedPickersArrowSwitcherProps, MonthValidationOptions { /** @@ -76,7 +79,7 @@ export interface PickersCalendarHeaderProps sx?: SxProps; } -export type ExportedPickersCalendarHeaderProps = Pick< +export type ExportedPickersCalendarHeaderProps = Pick< PickersCalendarHeaderProps, 'classes' | 'slots' | 'slotProps' >; diff --git a/packages/x-date-pickers/src/PickersDay/PickersDay.tsx b/packages/x-date-pickers/src/PickersDay/PickersDay.tsx index b226938bc31d7..b0ed7b3ac0eb7 100644 --- a/packages/x-date-pickers/src/PickersDay/PickersDay.tsx +++ b/packages/x-date-pickers/src/PickersDay/PickersDay.tsx @@ -18,6 +18,7 @@ import { getPickersDayUtilityClass, pickersDayClasses, } from './pickersDayClasses'; +import { PickerValidDate } from '../models'; export interface ExportedPickersDayProps { /** @@ -38,7 +39,7 @@ export interface ExportedPickersDayProps { showDaysOutsideCurrentMonth?: boolean; } -export interface PickersDayProps +export interface PickersDayProps extends ExportedPickersDayProps, Omit< ExtendMui, @@ -221,11 +222,11 @@ const PickersDayFiller = styled('div', { const noop = () => {}; -type PickersDayComponent = (( +type PickersDayComponent = (( props: PickersDayProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; -const PickersDayRaw = React.forwardRef(function PickersDay( +const PickersDayRaw = React.forwardRef(function PickersDay( inProps: PickersDayProps, forwardedRef: React.Ref, ) { @@ -373,7 +374,7 @@ PickersDayRaw.propTypes = { /** * The date to show. */ - day: PropTypes.any.isRequired, + day: PropTypes.object.isRequired, /** * If `true`, renders as disabled. * @default false diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx index 4247d58b2f8ab..c76b350f092fb 100644 --- a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx +++ b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx @@ -7,6 +7,7 @@ import { PickersLayoutProps } from './PickersLayout.types'; import { pickersLayoutClasses, getPickersLayoutUtilityClass } from './pickersLayoutClasses'; import usePickerLayout from './usePickerLayout'; import { DateOrTimeViewWithMeridiem } from '../internals/models'; +import { PickerValidDate } from '../models'; const useUtilityClasses = (ownerState: PickersLayoutProps) => { const { isLandscape, classes } = ownerState; @@ -81,7 +82,7 @@ export const PickersLayoutContentWrapper = styled('div', { */ const PickersLayout = function PickersLayout< TValue, - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, >(inProps: PickersLayoutProps) { const props = useThemeProps({ props: inProps, name: 'MuiPickersLayout' }); diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts b/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts index 40e699fc58dc0..27b0b042aae56 100644 --- a/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts +++ b/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts @@ -9,10 +9,11 @@ import { PickersLayoutClasses } from './pickersLayoutClasses'; import { DateOrTimeViewWithMeridiem, WrapperVariant } from '../internals/models/common'; import { PickersShortcutsProps } from '../PickersShortcuts'; import { ExportedPickersShortcutProps } from '../PickersShortcuts/PickersShortcuts'; +import { PickerValidDate } from '../models'; export interface ExportedPickersLayoutSlots< TValue, - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, > { /** @@ -34,8 +35,11 @@ export interface ExportedPickersLayoutSlots< >; } -interface PickersLayoutActionBarOwnerState - extends PickersLayoutProps { +interface PickersLayoutActionBarOwnerState< + TValue, + TDate extends PickerValidDate, + TView extends DateOrTimeViewWithMeridiem, +> extends PickersLayoutProps { wrapperVariant: WrapperVariant; } @@ -45,7 +49,7 @@ interface PickersShortcutsOwnerState extends PickersShortcutsProps { /** @@ -72,8 +76,11 @@ export interface ExportedPickersLayoutSlotProps< layout?: Partial>; } -export interface PickersLayoutSlots - extends ExportedPickersLayoutSlots { +export interface PickersLayoutSlots< + TValue, + TDate extends PickerValidDate, + TView extends DateOrTimeViewWithMeridiem, +> extends ExportedPickersLayoutSlots { /** * Tabs enabling toggling between views. */ @@ -85,8 +92,11 @@ export interface PickersLayoutSlots>; } -export interface PickersLayoutSlotProps - extends ExportedPickersLayoutSlotProps { +export interface PickersLayoutSlotProps< + TValue, + TDate extends PickerValidDate, + TView extends DateOrTimeViewWithMeridiem, +> extends ExportedPickersLayoutSlotProps { /** * Props passed down to the tabs component. */ @@ -97,8 +107,11 @@ export interface PickersLayoutSlotProps - extends Omit, 'value'> { +export interface PickersLayoutProps< + TValue, + TDate extends PickerValidDate, + TView extends DateOrTimeViewWithMeridiem, +> extends Omit, 'value'> { value?: TValue; className?: string; children?: React.ReactNode; diff --git a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx index 8ba6c1afa4f5e..186649d43cd7d 100644 --- a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx +++ b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx @@ -7,6 +7,7 @@ import { getPickersLayoutUtilityClass } from './pickersLayoutClasses'; import { PickersShortcuts } from '../PickersShortcuts'; import { BaseToolbarProps } from '../internals/models/props/toolbar'; import { DateOrTimeViewWithMeridiem } from '../internals/models'; +import { PickerValidDate } from '../models'; function toolbarHasView( toolbarProps: BaseToolbarProps | any, @@ -31,14 +32,18 @@ const useUtilityClasses = (ownerState: PickersLayoutProps) => { interface PickersLayoutPropsWithValueRequired< TValue, - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, > extends PickersLayoutProps { value: TValue; } interface UsePickerLayoutResponse extends SubComponents {} -const usePickerLayout = ( +const usePickerLayout = < + TValue, + TDate extends PickerValidDate, + TView extends DateOrTimeViewWithMeridiem, +>( props: PickersLayoutProps, ): UsePickerLayoutResponse => { const { diff --git a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx index f15751cb36d15..fe7afbb4b72fc 100644 --- a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx +++ b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx @@ -5,11 +5,11 @@ import { useDatePickerDefaultizedProps } from '../DatePicker/shared'; import { renderDateViewCalendar } from '../dateViewRenderers'; import { useStaticPicker } from '../internals/hooks/useStaticPicker'; import { validateDate } from '../internals/utils/validation/validateDate'; -import { DateView } from '../models'; +import { DateView, PickerValidDate } from '../models'; import { singleItemValueManager } from '../internals/utils/valueManagers'; import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews'; -type StaticDatePickerComponent = (( +type StaticDatePickerComponent = (( props: StaticDatePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -23,7 +23,7 @@ type StaticDatePickerComponent = (( * * - [StaticDatePicker API](https://mui.com/x/api/date-pickers/static-date-picker/) */ -const StaticDatePicker = React.forwardRef(function StaticDatePicker( +const StaticDatePicker = React.forwardRef(function StaticDatePicker( inProps: StaticDatePickerProps, ref: React.Ref, ) { @@ -91,7 +91,7 @@ StaticDatePicker.propTypes = { * The default value. * Used when the component is not controlled. */ - defaultValue: PropTypes.any, + defaultValue: PropTypes.object, /** * If `true`, the picker and text field are disabled. * @default false @@ -141,11 +141,11 @@ StaticDatePicker.propTypes = { /** * Maximal selectable date. */ - maxDate: PropTypes.any, + maxDate: PropTypes.object, /** * Minimal selectable date. */ - minDate: PropTypes.any, + minDate: PropTypes.object, /** * Months rendered per row. * @default 3 @@ -219,7 +219,7 @@ StaticDatePicker.propTypes = { * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * Component displaying when passed `loading` true. * @returns {React.ReactNode} The node to render when loading. @@ -291,7 +291,7 @@ StaticDatePicker.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.any, + value: PropTypes.object, /** * The visible view. * Used when the component view is controlled. diff --git a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.types.ts b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.types.ts index de183ec323e96..64a84459d9b4e 100644 --- a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.types.ts +++ b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.types.ts @@ -9,17 +9,17 @@ import { UseStaticPickerSlotProps, } from '../internals/hooks/useStaticPicker'; import { MakeOptional } from '../internals/models/helpers'; -import { DateView } from '../models'; +import { DateView, PickerValidDate } from '../models'; -export interface StaticDatePickerSlots +export interface StaticDatePickerSlots extends BaseDatePickerSlots, UseStaticPickerSlots {} -export interface StaticDatePickerSlotProps +export interface StaticDatePickerSlotProps extends BaseDatePickerSlotProps, UseStaticPickerSlotProps {} -export interface StaticDatePickerProps +export interface StaticDatePickerProps extends BaseDatePickerProps, MakeOptional { /** diff --git a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx index 7e60ab686782c..e47845d169c97 100644 --- a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx +++ b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx @@ -6,11 +6,11 @@ import { renderTimeViewClock } from '../timeViewRenderers'; import { renderDateViewCalendar } from '../dateViewRenderers'; import { singleItemValueManager } from '../internals/utils/valueManagers'; import { useStaticPicker } from '../internals/hooks/useStaticPicker'; -import { DateOrTimeView } from '../models'; +import { DateOrTimeView, PickerValidDate } from '../models'; import { validateDateTime } from '../internals/utils/validation/validateDateTime'; import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews'; -type StaticDateTimePickerComponent = (( +type StaticDateTimePickerComponent = (( props: StaticDateTimePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -24,10 +24,9 @@ type StaticDateTimePickerComponent = (( * * - [StaticDateTimePicker API](https://mui.com/x/api/date-pickers/static-date-time-picker/) */ -const StaticDateTimePicker = React.forwardRef(function StaticDateTimePicker( - inProps: StaticDateTimePickerProps, - ref: React.Ref, -) { +const StaticDateTimePicker = React.forwardRef(function StaticDateTimePicker< + TDate extends PickerValidDate, +>(inProps: StaticDateTimePickerProps, ref: React.Ref) { const defaultizedProps = useDateTimePickerDefaultizedProps< TDate, DateOrTimeView, @@ -113,7 +112,7 @@ StaticDateTimePicker.propTypes = { * The default value. * Used when the component is not controlled. */ - defaultValue: PropTypes.any, + defaultValue: PropTypes.object, /** * If `true`, the picker and text field are disabled. * @default false @@ -168,29 +167,29 @@ StaticDateTimePicker.propTypes = { /** * Maximal selectable date. */ - maxDate: PropTypes.any, + maxDate: PropTypes.object, /** * Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */ - maxDateTime: PropTypes.any, + maxDateTime: PropTypes.object, /** * Maximal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - maxTime: PropTypes.any, + maxTime: PropTypes.object, /** * Minimal selectable date. */ - minDate: PropTypes.any, + minDate: PropTypes.object, /** * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */ - minDateTime: PropTypes.any, + minDateTime: PropTypes.object, /** * Minimal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - minTime: PropTypes.any, + minTime: PropTypes.object, /** * Step over minutes. * @default 1 @@ -269,7 +268,7 @@ StaticDateTimePicker.propTypes = { * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * Component displaying when passed `loading` true. * @returns {React.ReactNode} The node to render when loading. @@ -349,7 +348,7 @@ StaticDateTimePicker.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.any, + value: PropTypes.object, /** * The visible view. * Used when the component view is controlled. diff --git a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts index ead81f65a0387..e154e31b80982 100644 --- a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts +++ b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts @@ -9,17 +9,17 @@ import { UseStaticPickerSlotProps, } from '../internals/hooks/useStaticPicker'; import { MakeOptional } from '../internals/models/helpers'; -import { DateOrTimeView } from '../models'; +import { DateOrTimeView, PickerValidDate } from '../models'; -export interface StaticDateTimePickerSlots +export interface StaticDateTimePickerSlots extends BaseDateTimePickerSlots, UseStaticPickerSlots {} -export interface StaticDateTimePickerSlotProps +export interface StaticDateTimePickerSlotProps extends BaseDateTimePickerSlotProps, UseStaticPickerSlotProps {} -export interface StaticDateTimePickerProps +export interface StaticDateTimePickerProps extends BaseDateTimePickerProps, MakeOptional { /** diff --git a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx index a5b99754c2eaf..aaf03d7301f18 100644 --- a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx +++ b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { TimeView } from '../models'; +import { PickerValidDate, TimeView } from '../models'; import { StaticTimePickerProps } from './StaticTimePicker.types'; import { useTimePickerDefaultizedProps } from '../TimePicker/shared'; import { renderTimeViewClock } from '../timeViewRenderers'; @@ -9,7 +9,7 @@ import { useStaticPicker } from '../internals/hooks/useStaticPicker'; import { validateTime } from '../internals/utils/validation/validateTime'; import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews'; -type StaticTimePickerComponent = (( +type StaticTimePickerComponent = (( props: StaticTimePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -23,7 +23,7 @@ type StaticTimePickerComponent = (( * * - [StaticTimePicker API](https://mui.com/x/api/date-pickers/static-time-picker/) */ -const StaticTimePicker = React.forwardRef(function StaticTimePicker( +const StaticTimePicker = React.forwardRef(function StaticTimePicker( inProps: StaticTimePickerProps, ref: React.Ref, ) { @@ -97,7 +97,7 @@ StaticTimePicker.propTypes = { * The default value. * Used when the component is not controlled. */ - defaultValue: PropTypes.any, + defaultValue: PropTypes.object, /** * If `true`, the picker and text field are disabled. * @default false @@ -132,12 +132,12 @@ StaticTimePicker.propTypes = { * Maximal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - maxTime: PropTypes.any, + maxTime: PropTypes.object, /** * Minimal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - minTime: PropTypes.any, + minTime: PropTypes.object, /** * Step over minutes. * @default 1 @@ -199,7 +199,7 @@ StaticTimePicker.propTypes = { * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * Disable specific time. * @template TDate @@ -238,7 +238,7 @@ StaticTimePicker.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.any, + value: PropTypes.object, /** * The visible view. * Used when the component view is controlled. diff --git a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.types.ts b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.types.ts index b55a15bd0714a..70d04cbe841af 100644 --- a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.types.ts +++ b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.types.ts @@ -9,17 +9,17 @@ import { UseStaticPickerSlotProps, } from '../internals/hooks/useStaticPicker'; import { MakeOptional } from '../internals/models/helpers'; -import { TimeView } from '../models'; +import { PickerValidDate, TimeView } from '../models'; -export interface StaticTimePickerSlots +export interface StaticTimePickerSlots extends BaseTimePickerSlots, UseStaticPickerSlots {} -export interface StaticTimePickerSlotProps +export interface StaticTimePickerSlotProps extends BaseTimePickerSlotProps, UseStaticPickerSlotProps {} -export interface StaticTimePickerProps +export interface StaticTimePickerProps extends BaseTimePickerProps, MakeOptional { /** diff --git a/packages/x-date-pickers/src/TimeClock/Clock.tsx b/packages/x-date-pickers/src/TimeClock/Clock.tsx index b4080f100f6d3..8b15624405619 100644 --- a/packages/x-date-pickers/src/TimeClock/Clock.tsx +++ b/packages/x-date-pickers/src/TimeClock/Clock.tsx @@ -12,11 +12,12 @@ import { useLocaleText, useUtils } from '../internals/hooks/useUtils'; import type { PickerSelectionState } from '../internals/hooks/usePicker'; import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks'; import { CLOCK_HOUR_WIDTH, getHours, getMinutes } from './shared'; -import { TimeView } from '../models'; +import { PickerValidDate, TimeView } from '../models'; import { ClockClasses, getClockUtilityClass } from './clockClasses'; import { formatMeridiem } from '../internals/utils/date-utils'; -export interface ClockProps extends ReturnType { +export interface ClockProps + extends ReturnType { ampm: boolean; ampmInClock: boolean; autoFocus?: boolean; @@ -195,7 +196,7 @@ const ClockMeridiemText = styled(Typography, { /** * @ignore - internal component. */ -export function Clock(inProps: ClockProps) { +export function Clock(inProps: ClockProps) { const props = useThemeProps({ props: inProps, name: 'MuiClock' }); const { ampm, diff --git a/packages/x-date-pickers/src/TimeClock/ClockNumbers.tsx b/packages/x-date-pickers/src/TimeClock/ClockNumbers.tsx index 19188dad42796..28c34d15caf5b 100644 --- a/packages/x-date-pickers/src/TimeClock/ClockNumbers.tsx +++ b/packages/x-date-pickers/src/TimeClock/ClockNumbers.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { ClockNumber } from './ClockNumber'; -import { MuiPickersAdapter } from '../models'; +import { MuiPickersAdapter, PickerValidDate } from '../models'; import type { PickerSelectionState } from '../internals/hooks/usePicker'; -interface GetHourNumbersOptions { +interface GetHourNumbersOptions { ampm: boolean; value: TDate | null; getClockNumberText: (hour: string) => string; @@ -20,7 +20,7 @@ interface GetHourNumbersOptions { /** * @ignore - internal component. */ -export const getHourNumbers = ({ +export const getHourNumbers = ({ ampm, value, getClockNumberText, @@ -79,7 +79,7 @@ export const getHourNumbers = ({ return hourNumbers; }; -export const getMinutesNumbers = ({ +export const getMinutesNumbers = ({ utils, value, isDisabled, diff --git a/packages/x-date-pickers/src/TimeClock/TimeClock.tsx b/packages/x-date-pickers/src/TimeClock/TimeClock.tsx index 93b8e6625af79..2e2e4186fe2da 100644 --- a/packages/x-date-pickers/src/TimeClock/TimeClock.tsx +++ b/packages/x-date-pickers/src/TimeClock/TimeClock.tsx @@ -9,7 +9,7 @@ import { convertValueToMeridiem, createIsAfterIgnoreDatePart } from '../internal import { useViews } from '../internals/hooks/useViews'; import type { PickerSelectionState } from '../internals/hooks/usePicker'; import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks'; -import { TimeView } from '../models'; +import { PickerValidDate, TimeView } from '../models'; import { PickerViewRoot } from '../internals/components/PickerViewRoot'; import { getTimeClockUtilityClass } from './timeClockClasses'; import { Clock, ClockProps } from './Clock'; @@ -49,7 +49,7 @@ const TimeClockArrowSwitcher = styled(PickersArrowSwitcher, { top: 15, }); -type TimeClockComponent = (( +type TimeClockComponent = (( props: TimeClockProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -65,7 +65,7 @@ const TIME_CLOCK_DEFAULT_VIEWS: TimeView[] = ['hours', 'minutes']; * * - [TimeClock API](https://mui.com/x/api/date-pickers/time-clock/) */ -export const TimeClock = React.forwardRef(function TimeClock( +export const TimeClock = React.forwardRef(function TimeClock( inProps: TimeClockProps, ref: React.Ref, ) { @@ -417,7 +417,7 @@ TimeClock.propTypes = { * The default selected value. * Used when the component is not controlled. */ - defaultValue: PropTypes.any, + defaultValue: PropTypes.object, /** * If `true`, the picker views and text field are disabled. * @default false @@ -446,12 +446,12 @@ TimeClock.propTypes = { * Maximal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - maxTime: PropTypes.any, + maxTime: PropTypes.object, /** * Minimal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - minTime: PropTypes.any, + minTime: PropTypes.object, /** * Step over minutes. * @default 1 @@ -494,7 +494,7 @@ TimeClock.propTypes = { * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid time using the validation props, except callbacks such as `shouldDisableTime`. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * Disable specific time. * @template TDate @@ -534,7 +534,7 @@ TimeClock.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.any, + value: PropTypes.object, /** * The visible view. * Used when the component view is controlled. diff --git a/packages/x-date-pickers/src/TimeClock/TimeClock.types.ts b/packages/x-date-pickers/src/TimeClock/TimeClock.types.ts index afb3a935e5531..fda54930f817a 100644 --- a/packages/x-date-pickers/src/TimeClock/TimeClock.types.ts +++ b/packages/x-date-pickers/src/TimeClock/TimeClock.types.ts @@ -4,10 +4,11 @@ import { PickersArrowSwitcherSlotProps, } from '../internals/components/PickersArrowSwitcher'; import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/clock'; -import { TimeView } from '../models'; +import { PickerValidDate, TimeView } from '../models'; import { TimeViewWithMeridiem } from '../internals/models'; -export interface ExportedTimeClockProps extends ExportedBaseClockProps { +export interface ExportedTimeClockProps + extends ExportedBaseClockProps { /** * Display ampm controls under the clock (instead of in the toolbar). * @default false @@ -19,8 +20,10 @@ export interface TimeClockSlots extends PickersArrowSwitcherSlots {} export interface TimeClockSlotProps extends PickersArrowSwitcherSlotProps {} -export interface TimeClockProps - extends ExportedTimeClockProps, +export interface TimeClockProps< + TDate extends PickerValidDate, + TView extends TimeViewWithMeridiem = TimeView, +> extends ExportedTimeClockProps, BaseClockProps { /** * Available views. diff --git a/packages/x-date-pickers/src/TimeField/TimeField.tsx b/packages/x-date-pickers/src/TimeField/TimeField.tsx index 495ae41d528ec..612df5b2f35a2 100644 --- a/packages/x-date-pickers/src/TimeField/TimeField.tsx +++ b/packages/x-date-pickers/src/TimeField/TimeField.tsx @@ -8,8 +8,9 @@ import { TimeFieldProps, TimeFieldSlotProps } from './TimeField.types'; import { useTimeField } from './useTimeField'; import { useClearableField } from '../hooks'; import { convertFieldResponseIntoMuiTextFieldProps } from '../internals/utils/convertFieldResponseIntoMuiTextFieldProps'; +import { PickerValidDate } from '../models'; -type TimeFieldComponent = (( +type TimeFieldComponent = (( props: TimeFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -23,7 +24,7 @@ type TimeFieldComponent = (( * * - [TimeField API](https://mui.com/x/api/date-pickers/time-field/) */ -const TimeField = React.forwardRef(function TimeField( +const TimeField = React.forwardRef(function TimeField( inProps: TimeFieldProps, inRef: React.Ref, ) { @@ -100,7 +101,7 @@ TimeField.propTypes = { /** * The default value. Use when the component is not controlled. */ - defaultValue: PropTypes.any, + defaultValue: PropTypes.object, /** * If `true`, the component is disabled. * @default false @@ -193,12 +194,12 @@ TimeField.propTypes = { * Maximal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - maxTime: PropTypes.any, + maxTime: PropTypes.object, /** * Minimal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - minTime: PropTypes.any, + minTime: PropTypes.object, /** * Step over minutes. * @default 1 @@ -246,7 +247,7 @@ TimeField.propTypes = { * For example, on time fields it will be used to determine the date to set. * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * If `true`, the label is displayed as required and the `input` element is required. * @default false @@ -342,7 +343,7 @@ TimeField.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.any, + value: PropTypes.object, /** * The variant to use. * @default 'outlined' diff --git a/packages/x-date-pickers/src/TimeField/TimeField.types.ts b/packages/x-date-pickers/src/TimeField/TimeField.types.ts index 46c7b4659e5b2..b78ed842f6f30 100644 --- a/packages/x-date-pickers/src/TimeField/TimeField.types.ts +++ b/packages/x-date-pickers/src/TimeField/TimeField.types.ts @@ -5,10 +5,10 @@ import { UseFieldInternalProps } from '../internals/hooks/useField'; import { DefaultizedProps, MakeOptional } from '../internals/models/helpers'; import { BaseTimeValidationProps, TimeValidationProps } from '../internals/models/validation'; import { FieldsTextFieldProps } from '../internals/models/fields'; -import { FieldSection, TimeValidationError } from '../models'; +import { FieldSection, PickerValidDate, TimeValidationError } from '../models'; import { UseClearableFieldSlots, UseClearableFieldSlotProps } from '../hooks/useClearableField'; -export interface UseTimeFieldProps +export interface UseTimeFieldProps extends MakeOptional< UseFieldInternalProps, 'format' @@ -22,18 +22,17 @@ export interface UseTimeFieldProps ampm?: boolean; } -export type UseTimeFieldDefaultizedProps = DefaultizedProps< +export type UseTimeFieldDefaultizedProps = DefaultizedProps< UseTimeFieldProps, keyof BaseTimeValidationProps | 'format' >; -export type UseTimeFieldComponentProps = Omit< - TChildProps, - keyof UseTimeFieldProps -> & - UseTimeFieldProps; +export type UseTimeFieldComponentProps< + TDate extends PickerValidDate, + TChildProps extends {}, +> = Omit> & UseTimeFieldProps; -export interface TimeFieldProps +export interface TimeFieldProps extends UseTimeFieldComponentProps { /** * Overridable component slots. @@ -47,7 +46,7 @@ export interface TimeFieldProps slotProps?: TimeFieldSlotProps; } -export type TimeFieldOwnerState = TimeFieldProps; +export type TimeFieldOwnerState = TimeFieldProps; export interface TimeFieldSlots extends UseClearableFieldSlots { /** @@ -58,6 +57,7 @@ export interface TimeFieldSlots extends UseClearableFieldSlots { textField?: React.ElementType; } -export interface TimeFieldSlotProps extends UseClearableFieldSlotProps { +export interface TimeFieldSlotProps + extends UseClearableFieldSlotProps { textField?: SlotComponentProps>; } diff --git a/packages/x-date-pickers/src/TimeField/useTimeField.ts b/packages/x-date-pickers/src/TimeField/useTimeField.ts index fdaf7485cbf8a..1c6cf0089253e 100644 --- a/packages/x-date-pickers/src/TimeField/useTimeField.ts +++ b/packages/x-date-pickers/src/TimeField/useTimeField.ts @@ -11,8 +11,9 @@ import { import { validateTime } from '../internals/utils/validation/validateTime'; import { useUtils } from '../internals/hooks/useUtils'; import { splitFieldInternalAndForwardedProps } from '../internals/utils/fields'; +import { PickerValidDate } from '../models'; -const useDefaultizedTimeField = ( +const useDefaultizedTimeField = ( props: UseTimeFieldProps, ): AdditionalProps & UseTimeFieldDefaultizedProps => { const utils = useUtils(); @@ -28,7 +29,7 @@ const useDefaultizedTimeField = ( } as any; }; -export const useTimeField = ( +export const useTimeField = ( inProps: UseTimeFieldComponentProps, ) => { const props = useDefaultizedTimeField(inProps); diff --git a/packages/x-date-pickers/src/TimePicker/TimePicker.tsx b/packages/x-date-pickers/src/TimePicker/TimePicker.tsx index b78288e0e7872..0928d469cc9c8 100644 --- a/packages/x-date-pickers/src/TimePicker/TimePicker.tsx +++ b/packages/x-date-pickers/src/TimePicker/TimePicker.tsx @@ -7,8 +7,9 @@ import { DesktopTimePicker } from '../DesktopTimePicker'; import { MobileTimePicker, MobileTimePickerProps } from '../MobileTimePicker'; import { TimePickerProps } from './TimePicker.types'; import { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from '../internals/utils/utils'; +import { PickerValidDate } from '../models'; -type TimePickerComponent = (( +type TimePickerComponent = (( props: TimePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -22,7 +23,7 @@ type TimePickerComponent = (( * * - [TimePicker API](https://mui.com/x/api/date-pickers/time-picker/) */ -const TimePicker = React.forwardRef(function TimePicker( +const TimePicker = React.forwardRef(function TimePicker( inProps: TimePickerProps, ref: React.Ref, ) { @@ -72,7 +73,7 @@ TimePicker.propTypes = { * The default value. * Used when the component is not controlled. */ - defaultValue: PropTypes.any, + defaultValue: PropTypes.object, /** * CSS media query when `Mobile` mode will be changed to `Desktop`. * @default '@media (pointer: fine)' @@ -132,12 +133,12 @@ TimePicker.propTypes = { * Maximal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - maxTime: PropTypes.any, + maxTime: PropTypes.object, /** * Minimal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - minTime: PropTypes.any, + minTime: PropTypes.object, /** * Step over minutes. * @default 1 @@ -217,7 +218,7 @@ TimePicker.propTypes = { * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * The currently selected sections. * This prop accept four formats: @@ -305,7 +306,7 @@ TimePicker.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.any, + value: PropTypes.object, /** * The visible view. * Used when the component view is controlled. diff --git a/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts b/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts index 3bf24d7725e1b..5561198004888 100644 --- a/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts +++ b/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts @@ -9,16 +9,17 @@ import { MobileTimePickerSlots, MobileTimePickerSlotProps, } from '../MobileTimePicker'; +import { PickerValidDate } from '../models'; -export interface TimePickerSlots +export interface TimePickerSlots extends DesktopTimePickerSlots, MobileTimePickerSlots {} -export interface TimePickerSlotProps +export interface TimePickerSlotProps extends DesktopTimePickerSlotProps, MobileTimePickerSlotProps {} -export interface TimePickerProps +export interface TimePickerProps extends DesktopTimePickerProps, Omit, 'views'> { /** diff --git a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx index 89151a022a9e5..78614cdb22f21 100644 --- a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx +++ b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx @@ -16,8 +16,9 @@ import { } from './timePickerToolbarClasses'; import { TimeViewWithMeridiem } from '../internals/models'; import { formatMeridiem } from '../internals/utils/date-utils'; +import { PickerValidDate } from '../models'; -export interface TimePickerToolbarProps +export interface TimePickerToolbarProps extends BaseToolbarProps { ampm?: boolean; ampmInClock?: boolean; @@ -153,7 +154,7 @@ TimePickerToolbarAmPmSelection.propTypes = { * * - [TimePickerToolbar API](https://mui.com/x/api/date-pickers/time-picker-toolbar/) */ -function TimePickerToolbar(inProps: TimePickerToolbarProps) { +function TimePickerToolbar(inProps: TimePickerToolbarProps) { const props = useThemeProps({ props: inProps, name: 'MuiTimePickerToolbar' }); const { ampm, @@ -302,7 +303,7 @@ TimePickerToolbar.propTypes = { * @default "––" */ toolbarPlaceholder: PropTypes.node, - value: PropTypes.any, + value: PropTypes.object, /** * Currently visible picker view. */ diff --git a/packages/x-date-pickers/src/TimePicker/shared.tsx b/packages/x-date-pickers/src/TimePicker/shared.tsx index b1812f13fb69e..763948a3398ad 100644 --- a/packages/x-date-pickers/src/TimePicker/shared.tsx +++ b/packages/x-date-pickers/src/TimePicker/shared.tsx @@ -11,14 +11,14 @@ import { ExportedTimePickerToolbarProps, TimePickerToolbar, } from './TimePickerToolbar'; -import { TimeValidationError } from '../models'; +import { PickerValidDate, TimeValidationError } from '../models'; import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews'; import { TimeViewRendererProps } from '../timeViewRenderers'; import { applyDefaultViewProps } from '../internals/utils/views'; import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/clock'; import { TimeViewWithMeridiem } from '../internals/models'; -export interface BaseTimePickerSlots extends TimeClockSlots { +export interface BaseTimePickerSlots extends TimeClockSlots { /** * Custom component for the toolbar rendered above the views. * @default TimePickerToolbar @@ -30,8 +30,10 @@ export interface BaseTimePickerSlotProps extends TimeClockSlotProps { toolbar?: ExportedTimePickerToolbarProps; } -export interface BaseTimePickerProps - extends BasePickerInputProps, +export interface BaseTimePickerProps< + TDate extends PickerValidDate, + TView extends TimeViewWithMeridiem, +> extends BasePickerInputProps, ExportedBaseClockProps { /** * Display ampm controls under the clock (instead of in the toolbar). @@ -64,7 +66,7 @@ export interface BaseTimePickerProps } type UseTimePickerDefaultizedProps< - TDate, + TDate extends PickerValidDate, TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps, > = LocalizedComponent< @@ -73,7 +75,7 @@ type UseTimePickerDefaultizedProps< >; export function useTimePickerDefaultizedProps< - TDate, + TDate extends PickerValidDate, TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps, >(props: Props, name: string): UseTimePickerDefaultizedProps { diff --git a/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx b/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx index d7e5ef3dfaa82..678c512bad34e 100644 --- a/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx +++ b/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx @@ -19,6 +19,7 @@ import { singleItemValueManager } from '../internals/utils/valueManagers'; import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate'; import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone'; import { DIALOG_WIDTH, MAX_CALENDAR_HEIGHT } from '../internals/constants/dimensions'; +import { PickerValidDate } from '../models'; const useUtilityClasses = (ownerState: YearCalendarProps) => { const { classes } = ownerState; @@ -30,7 +31,7 @@ const useUtilityClasses = (ownerState: YearCalendarProps) => { return composeClasses(slots, getYearCalendarUtilityClass, classes); }; -function useYearCalendarDefaultizedProps( +function useYearCalendarDefaultizedProps( props: YearCalendarProps, name: string, ): DefaultizedProps< @@ -72,7 +73,9 @@ const YearCalendarRoot = styled('div', { position: 'relative', }); -type YearCalendarComponent = ((props: YearCalendarProps) => React.JSX.Element) & { +type YearCalendarComponent = (( + props: YearCalendarProps, +) => React.JSX.Element) & { propTypes?: any; }; @@ -85,7 +88,7 @@ type YearCalendarComponent = ((props: YearCalendarProps) => React. * * - [YearCalendar API](https://mui.com/x/api/date-pickers/year-calendar/) */ -export const YearCalendar = React.forwardRef(function YearCalendar( +export const YearCalendar = React.forwardRef(function YearCalendar( inProps: YearCalendarProps, ref: React.Ref, ) { @@ -331,7 +334,7 @@ YearCalendar.propTypes = { * The default selected value. * Used when the component is not controlled. */ - defaultValue: PropTypes.any, + defaultValue: PropTypes.object, /** * If `true` picker is disabled */ @@ -356,11 +359,11 @@ YearCalendar.propTypes = { /** * Maximal selectable date. */ - maxDate: PropTypes.any, + maxDate: PropTypes.object, /** * Minimal selectable date. */ - minDate: PropTypes.any, + minDate: PropTypes.object, /** * Callback fired when the value changes. * @template TDate @@ -377,7 +380,7 @@ YearCalendar.propTypes = { * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid year using the validation props, except callbacks such as `shouldDisableYear`. */ - referenceDate: PropTypes.any, + referenceDate: PropTypes.object, /** * Disable specific year. * @template TDate @@ -405,7 +408,7 @@ YearCalendar.propTypes = { * The selected value. * Used when the component is controlled. */ - value: PropTypes.any, + value: PropTypes.object, /** * Years rendered per row. * @default 3 diff --git a/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts b/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts index 6b2cd9de038a9..ae45c7a04f960 100644 --- a/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts +++ b/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts @@ -2,7 +2,7 @@ import { SxProps } from '@mui/system'; import { Theme } from '@mui/material/styles'; import { YearCalendarClasses } from './yearCalendarClasses'; import { BaseDateValidationProps, YearValidationProps } from '../internals/models/validation'; -import { TimezoneProps } from '../models'; +import { PickerValidDate, TimezoneProps } from '../models'; export interface ExportedYearCalendarProps { /** @@ -12,7 +12,7 @@ export interface ExportedYearCalendarProps { yearsPerRow?: 3 | 4; } -export interface YearCalendarProps +export interface YearCalendarProps extends ExportedYearCalendarProps, YearValidationProps, BaseDateValidationProps, diff --git a/packages/x-date-pickers/src/dateTimeViewRenderers/dateTimeViewRenderers.tsx b/packages/x-date-pickers/src/dateTimeViewRenderers/dateTimeViewRenderers.tsx index 7e9d4340e0571..80ea74129e606 100644 --- a/packages/x-date-pickers/src/dateTimeViewRenderers/dateTimeViewRenderers.tsx +++ b/packages/x-date-pickers/src/dateTimeViewRenderers/dateTimeViewRenderers.tsx @@ -17,8 +17,9 @@ import { } from '../timeViewRenderers'; import { digitalClockClasses } from '../DigitalClock'; import { VIEW_HEIGHT } from '../internals/constants/dimensions'; +import { PickerValidDate } from '../models'; -export interface DateTimeViewRendererProps +export interface DateTimeViewRendererProps extends Omit< DateCalendarProps & MultiSectionDigitalClockProps, 'views' | 'openTo' | 'view' | 'onViewChange' | 'focusedView' | 'slots' | 'slotProps' @@ -32,7 +33,7 @@ export interface DateTimeViewRendererProps shouldRenderTimeInASingleColumn: boolean; } -export const renderDesktopDateTimeView = ({ +export const renderDesktopDateTimeView = ({ view, onViewChange, views, diff --git a/packages/x-date-pickers/src/dateViewRenderers/dateViewRenderers.tsx b/packages/x-date-pickers/src/dateViewRenderers/dateViewRenderers.tsx index a2014f4bc8cd8..fa043429c5999 100644 --- a/packages/x-date-pickers/src/dateViewRenderers/dateViewRenderers.tsx +++ b/packages/x-date-pickers/src/dateViewRenderers/dateViewRenderers.tsx @@ -1,11 +1,13 @@ import * as React from 'react'; import { DateCalendar, DateCalendarProps } from '../DateCalendar'; -import { DateView } from '../models'; +import { DateView, PickerValidDate } from '../models'; import { DateOrTimeViewWithMeridiem } from '../internals/models'; import { isDatePickerView } from '../internals/utils/date-utils'; -export interface DateViewRendererProps - extends Omit< +export interface DateViewRendererProps< + TDate extends PickerValidDate, + TView extends DateOrTimeViewWithMeridiem, +> extends Omit< DateCalendarProps, 'views' | 'openTo' | 'view' | 'onViewChange' | 'focusedView' > { @@ -15,7 +17,7 @@ export interface DateViewRendererProps({ +export const renderDateViewCalendar = ({ view, onViewChange, views, diff --git a/packages/x-date-pickers/src/internals/hooks/date-helpers-hooks.tsx b/packages/x-date-pickers/src/internals/hooks/date-helpers-hooks.tsx index e4f299d8ae139..7fcdcba1b2c97 100644 --- a/packages/x-date-pickers/src/internals/hooks/date-helpers-hooks.tsx +++ b/packages/x-date-pickers/src/internals/hooks/date-helpers-hooks.tsx @@ -3,9 +3,9 @@ import { useUtils } from './useUtils'; import { PickerOnChangeFn } from './useViews'; import { getMeridiem, convertToMeridiem } from '../utils/time-utils'; import { PickerSelectionState } from './usePicker'; -import { PickersTimezone } from '../../models'; +import { PickersTimezone, PickerValidDate } from '../../models'; -export interface MonthValidationOptions { +export interface MonthValidationOptions { disablePast?: boolean; disableFuture?: boolean; minDate: TDate; @@ -13,7 +13,7 @@ export interface MonthValidationOptions { timezone: PickersTimezone; } -export function useNextMonthDisabled( +export function useNextMonthDisabled( month: TDate, { disableFuture, @@ -31,7 +31,7 @@ export function useNextMonthDisabled( }, [disableFuture, maxDate, month, utils, timezone]); } -export function usePreviousMonthDisabled( +export function usePreviousMonthDisabled( month: TDate, { disablePast, @@ -50,7 +50,7 @@ export function usePreviousMonthDisabled( }, [disablePast, minDate, month, utils, timezone]); } -export function useMeridiemMode( +export function useMeridiemMode( date: TDate | null, ampm: boolean | undefined, onChange: PickerOnChangeFn, diff --git a/packages/x-date-pickers/src/internals/hooks/useClockReferenceDate.ts b/packages/x-date-pickers/src/internals/hooks/useClockReferenceDate.ts index f7f4062bad211..03afe046d50c6 100644 --- a/packages/x-date-pickers/src/internals/hooks/useClockReferenceDate.ts +++ b/packages/x-date-pickers/src/internals/hooks/useClockReferenceDate.ts @@ -1,10 +1,10 @@ import * as React from 'react'; -import { MuiPickersAdapter, PickersTimezone } from '../../models'; +import { MuiPickersAdapter, PickersTimezone, PickerValidDate } from '../../models'; import { singleItemValueManager } from '../utils/valueManagers'; import { getTodayDate } from '../utils/date-utils'; import { SECTION_TYPE_GRANULARITY } from '../utils/getDefaultReferenceDate'; -export const useClockReferenceDate = ({ +export const useClockReferenceDate = ({ value, referenceDate: referenceDateProp, utils, 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 7c6a84ddec528..52418e14d0ac6 100644 --- a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx @@ -15,7 +15,7 @@ import { usePicker } from '../usePicker'; import { LocalizationProvider } from '../../../LocalizationProvider'; import { PickersLayout } from '../../../PickersLayout'; import { InferError } from '../useValidation'; -import { FieldSection, BaseSingleInputFieldProps } from '../../../models'; +import { FieldSection, BaseSingleInputFieldProps, PickerValidDate } from '../../../models'; import { DateOrTimeViewWithMeridiem } from '../../models'; import { UsePickerValueFieldResponse } from '../usePicker/usePickerValue.types'; @@ -26,7 +26,7 @@ import { UsePickerValueFieldResponse } from '../usePicker/usePickerValue.types'; * - DesktopTimePicker */ export const useDesktopPicker = < - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseDesktopPickerProps, >({ diff --git a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts index 3c661b0c11f52..64118161d17d8 100644 --- a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts @@ -10,7 +10,12 @@ import { } from '../../models/props/basePickerProps'; import { PickersPopperSlots, PickersPopperSlotProps } from '../../components/PickersPopper'; import { UsePickerParams, UsePickerProps } from '../usePicker'; -import { BaseSingleInputFieldProps, FieldSection, MuiPickersAdapter } from '../../../models'; +import { + BaseSingleInputFieldProps, + FieldSection, + MuiPickersAdapter, + PickerValidDate, +} from '../../../models'; import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, @@ -24,8 +29,10 @@ import { UseClearableFieldSlotProps, } from '../../../hooks/useClearableField'; -export interface UseDesktopPickerSlots - extends Pick< +export interface UseDesktopPickerSlots< + TDate extends PickerValidDate, + TView extends DateOrTimeViewWithMeridiem, +> extends Pick< PickersPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper' >, @@ -57,12 +64,16 @@ export interface UseDesktopPickerSlots - extends ExportedUseDesktopPickerSlotProps, +export interface UseDesktopPickerSlotProps< + TDate extends PickerValidDate, + TView extends DateOrTimeViewWithMeridiem, +> extends ExportedUseDesktopPickerSlotProps, Pick, 'toolbar'> {} -export interface ExportedUseDesktopPickerSlotProps - extends PickersPopperSlotProps, +export interface ExportedUseDesktopPickerSlotProps< + TDate extends PickerValidDate, + TView extends DateOrTimeViewWithMeridiem, +> extends PickersPopperSlotProps, ExportedPickersLayoutSlotProps, UseClearableFieldSlotProps { field?: SlotComponentProps< @@ -80,7 +91,7 @@ export interface ExportedUseDesktopPickerSlotProps; } -export interface DesktopOnlyPickerProps +export interface DesktopOnlyPickerProps extends BaseNonStaticPickerProps, BaseNonRangeNonStaticPickerProps, UsePickerValueNonStaticProps, @@ -92,7 +103,7 @@ export interface DesktopOnlyPickerProps } export interface UseDesktopPickerProps< - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps, @@ -111,7 +122,7 @@ export interface UseDesktopPickerProps< } export interface UseDesktopPickerParams< - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseDesktopPickerProps, > extends Pick< diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts index 6afb33b07eb22..740054ce131d7 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -16,11 +16,11 @@ import { adjustSectionValue, isAndroid, cleanString, getSectionOrder } from './u import { useFieldState } from './useFieldState'; import { useFieldCharacterEditing } from './useFieldCharacterEditing'; import { getActiveElement } from '../../utils/utils'; -import { FieldSection } from '../../../models'; +import { FieldSection, PickerValidDate } from '../../../models'; export const useField = < TValue, - TDate, + TDate extends PickerValidDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps & { minutesStep?: number }, diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts index cf0e3de7ea40c..6bfc7d3580935 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts @@ -8,13 +8,14 @@ import { FieldSectionContentType, FieldValueType, PickersTimezone, + PickerValidDate, } from '../../../models'; import type { PickerValueManager } from '../usePicker'; import { InferError, Validator } from '../useValidation'; export interface UseFieldParams< TValue, - TDate, + TDate extends PickerValidDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps, @@ -32,8 +33,12 @@ export interface UseFieldParams< valueType: FieldValueType; } -export interface UseFieldInternalProps - extends TimezoneProps { +export interface UseFieldInternalProps< + TValue, + TDate extends PickerValidDate, + TSection extends FieldSection, + TError, +> extends TimezoneProps { /** * The selected value. * Used when the component is controlled. @@ -183,12 +188,15 @@ export type FieldSectionWithoutPosition; -export type FieldSectionValueBoundaries = { +export type FieldSectionValueBoundaries< + TDate extends PickerValidDate, + SectionType extends FieldSectionType, +> = { minimum: number; maximum: number; } & (SectionType extends 'day' ? { longestMonth: TDate } : {}); -export type FieldSectionsValueBoundaries = { +export type FieldSectionsValueBoundaries = { [SectionType in FieldSectionType]: (params: { currentDate: TDate | null; format: string; @@ -209,7 +217,11 @@ export interface FieldChangeHandlerContext { * Object used to access and update the active date (i.e: the date containing the active section). * Mainly useful in the range fields where we need to update the date containing the active section without impacting the other one. */ -interface FieldActiveDateManager { +interface FieldActiveDateManager< + TValue, + TDate extends PickerValidDate, + TSection extends FieldSection, +> { /** * Active date from `state.value`. */ @@ -245,7 +257,11 @@ export type FieldSelectedSectionsIndexes = { shouldSelectBoundarySelectors: boolean; }; -export interface FieldValueManager { +export interface FieldValueManager< + TValue, + TDate extends PickerValidDate, + TSection extends FieldSection, +> { /** * Creates the section list from the current value. * The `prevSections` are used on the range fields to avoid losing the sections of a partially filled date when editing the other date. diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts index cfbea21b8f719..2f6ad0ab5b404 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts @@ -13,11 +13,12 @@ import { MuiPickersAdapter, FieldSectionContentType, PickersTimezone, + PickerValidDate, } from '../../../models'; import { PickersLocaleText } from '../../../locales/utils/pickersLocaleTextApi'; import { getMonthsInYear } from '../../utils/date-utils'; -export const getDateSectionConfigFromFormatToken = ( +export const getDateSectionConfigFromFormatToken = ( utils: MuiPickersAdapter, formatToken: string, ): Pick & { maxLength: number | undefined } => { @@ -62,7 +63,7 @@ const getDeltaFromKeyCode = (keyCode: Omit( +export const getDaysInWeekStr = ( utils: MuiPickersAdapter, timezone: PickersTimezone, format: string, @@ -82,7 +83,7 @@ export const getDaysInWeekStr = ( return elements.map((weekDay) => utils.formatByString(weekDay, format)); }; -export const getLetterEditingOptions = ( +export const getLetterEditingOptions = ( utils: MuiPickersAdapter, timezone: PickersTimezone, sectionType: FieldSectionType, @@ -118,7 +119,9 @@ export const FORMAT_SECONDS_NO_LEADING_ZEROS = 's'; const NON_LOCALIZED_DIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; -export const getLocalizedDigits = (utils: MuiPickersAdapter) => { +export const getLocalizedDigits = ( + utils: MuiPickersAdapter, +) => { const today = utils.date(undefined); const formattedZero = utils.formatByString( utils.setSeconds(today, 0), @@ -188,7 +191,7 @@ export const cleanLeadingZeros = (valueStr: string, size: number) => { return cleanValueStr; }; -export const cleanDigitSectionValue = ( +export const cleanDigitSectionValue = ( utils: MuiPickersAdapter, value: number, sectionBoundaries: FieldSectionValueBoundaries, @@ -231,7 +234,7 @@ export const cleanDigitSectionValue = ( return applyLocalizedDigits(valueStr, localizedDigits); }; -export const adjustSectionValue = ( +export const adjustSectionValue = ( utils: MuiPickersAdapter, timezone: PickersTimezone, section: TSection, @@ -417,7 +420,7 @@ export const addPositionPropertiesToSections = ( return newSections; }; -const getSectionPlaceholder = ( +const getSectionPlaceholder = ( utils: MuiPickersAdapter, timezone: PickersTimezone, localeText: PickersLocaleText, @@ -472,7 +475,7 @@ const getSectionPlaceholder = ( } }; -export const changeSectionValueFormat = ( +export const changeSectionValueFormat = ( utils: MuiPickersAdapter, valueStr: string, currentFormat: string, @@ -487,13 +490,13 @@ export const changeSectionValueFormat = ( return utils.formatByString(utils.parse(valueStr, currentFormat)!, newFormat); }; -const isFourDigitYearFormat = ( +const isFourDigitYearFormat = ( utils: MuiPickersAdapter, timezone: PickersTimezone, format: string, ) => utils.formatByString(utils.date(undefined, timezone), format).length === 4; -export const doesSectionFormatHaveLeadingZeros = ( +export const doesSectionFormatHaveLeadingZeros = ( utils: MuiPickersAdapter, timezone: PickersTimezone, contentType: FieldSectionContentType, @@ -548,7 +551,10 @@ export const doesSectionFormatHaveLeadingZeros = ( } }; -const getEscapedPartsFromFormat = (utils: MuiPickersAdapter, format: string) => { +const getEscapedPartsFromFormat = ( + utils: MuiPickersAdapter, + format: string, +) => { const escapedParts: { start: number; end: number }[] = []; const { start: startChar, end: endChar } = utils.escapedCharacters; const regExp = new RegExp(`(\\${startChar}[^\\${endChar}]*\\${endChar})+`, 'g'); @@ -562,7 +568,7 @@ const getEscapedPartsFromFormat = (utils: MuiPickersAdapter, forma return escapedParts; }; -export const splitFormatIntoSections = ( +export const splitFormatIntoSections = ( utils: MuiPickersAdapter, timezone: PickersTimezone, localeText: PickersLocaleText, @@ -743,7 +749,7 @@ export const splitFormatIntoSections = ( * Some date libraries like `dayjs` don't support parsing from date with escaped characters. * To make sure that the parsing works, we are building a format and a date without any separator. */ -export const getDateFromDateSections = ( +export const getDateFromDateSections = ( utils: MuiPickersAdapter, sections: FieldSection[], localizedDigits: string[], @@ -800,7 +806,7 @@ export const createDateStrForInputFromSections = ( return `\u2066${dateStr}\u2069`; }; -export const getSectionsBoundaries = ( +export const getSectionsBoundaries = ( utils: MuiPickersAdapter, localizedDigits: string[], timezone: PickersTimezone, @@ -929,7 +935,7 @@ export const validateSections = ( } }; -const transferDateSectionValue = ( +const transferDateSectionValue = ( utils: MuiPickersAdapter, timezone: PickersTimezone, section: FieldSectionWithoutPosition, @@ -1004,7 +1010,7 @@ const reliableSectionModificationOrder: Record = { empty: 9, }; -export const mergeDateIntoReferenceDate = ( +export const mergeDateIntoReferenceDate = ( utils: MuiPickersAdapter, timezone: PickersTimezone, dateToTransferFrom: TDate, diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldCharacterEditing.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldCharacterEditing.ts index 13f7247bdf780..2fc78b739d0d0 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldCharacterEditing.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldCharacterEditing.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import useEventCallback from '@mui/utils/useEventCallback'; -import { FieldSectionType, FieldSection, PickersTimezone } from '../../../models'; +import { FieldSectionType, FieldSection, PickersTimezone, PickerValidDate } from '../../../models'; import { useUtils } from '../useUtils'; import { FieldSectionsValueBoundaries } from './useField.types'; import { @@ -27,7 +27,7 @@ interface ApplyCharacterEditingParams { sectionIndex: number; } -interface UseFieldEditingParams { +interface UseFieldEditingParams { sections: TSection[]; updateSectionValue: (params: UpdateSectionValueParams) => void; sectionsValueBoundaries: FieldSectionsValueBoundaries; @@ -78,7 +78,10 @@ const isQueryResponseWithoutValue = ( * 1. The numeric editing when the user presses a digit * 2. The letter editing when the user presses another key */ -export const useFieldCharacterEditing = ({ +export const useFieldCharacterEditing = < + TDate extends PickerValidDate, + TSection extends FieldSection, +>({ sections, updateSectionValue, sectionsValueBoundaries, 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 102bac4d7f7a6..0731be627b7ed 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts @@ -20,7 +20,7 @@ import { getLocalizedDigits, } from './useField.utils'; import { InferError } from '../useValidation'; -import { FieldSection, FieldSelectedSections } from '../../../models'; +import { FieldSection, FieldSelectedSections, PickerValidDate } from '../../../models'; import { useValueWithTimezone } from '../useValueWithTimezone'; import { GetDefaultReferenceDateProps, @@ -44,7 +44,7 @@ export interface UpdateSectionValueParams { export const useFieldState = < TValue, - TDate, + TDate extends PickerValidDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps, 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 a34d914b30449..f39bda9d098bb 100644 --- a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx @@ -10,7 +10,7 @@ import { useUtils } from '../useUtils'; import { LocalizationProvider } from '../../../LocalizationProvider'; import { PickersLayout } from '../../../PickersLayout'; import { InferError } from '../useValidation'; -import { FieldSection, BaseSingleInputFieldProps } from '../../../models'; +import { FieldSection, BaseSingleInputFieldProps, PickerValidDate } from '../../../models'; import { DateOrTimeViewWithMeridiem } from '../../models'; /** @@ -20,7 +20,7 @@ import { DateOrTimeViewWithMeridiem } from '../../models'; * - MobileTimePicker */ export const useMobilePicker = < - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseMobilePickerProps, >({ diff --git a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts index 91c310fab3859..bbbe33d8521ef 100644 --- a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts @@ -11,7 +11,12 @@ import { PickersModalDialogSlotProps, } from '../../components/PickersModalDialog'; import { UsePickerParams, UsePickerProps } from '../usePicker'; -import { BaseSingleInputFieldProps, FieldSection, MuiPickersAdapter } from '../../../models'; +import { + BaseSingleInputFieldProps, + FieldSection, + MuiPickersAdapter, + PickerValidDate, +} from '../../../models'; import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, @@ -21,8 +26,10 @@ import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue.types' import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews'; import { DateOrTimeViewWithMeridiem } from '../../models'; -export interface UseMobilePickerSlots - extends PickersModalDialogSlots, +export interface UseMobilePickerSlots< + TDate extends PickerValidDate, + TView extends DateOrTimeViewWithMeridiem, +> extends PickersModalDialogSlots, ExportedPickersLayoutSlots { /** * Component used to enter the date with the keyboard. @@ -36,8 +43,10 @@ export interface UseMobilePickerSlots; } -export interface ExportedUseMobilePickerSlotProps - extends PickersModalDialogSlotProps, +export interface ExportedUseMobilePickerSlotProps< + TDate extends PickerValidDate, + TView extends DateOrTimeViewWithMeridiem, +> extends PickersModalDialogSlotProps, ExportedPickersLayoutSlotProps { field?: SlotComponentProps< React.ElementType>, @@ -47,18 +56,20 @@ export interface ExportedUseMobilePickerSlotProps>; } -export interface UseMobilePickerSlotProps - extends ExportedUseMobilePickerSlotProps, +export interface UseMobilePickerSlotProps< + TDate extends PickerValidDate, + TView extends DateOrTimeViewWithMeridiem, +> extends ExportedUseMobilePickerSlotProps, Pick, 'toolbar'> {} -export interface MobileOnlyPickerProps +export interface MobileOnlyPickerProps extends BaseNonStaticPickerProps, BaseNonRangeNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerViewsNonStaticProps {} export interface UseMobilePickerProps< - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps, @@ -77,7 +88,7 @@ export interface UseMobilePickerProps< } export interface UseMobilePickerParams< - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseMobilePickerProps, > extends Pick< diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts index 4e60cf201427f..889aa0eb101b1 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts @@ -4,7 +4,7 @@ import { usePickerViews } from './usePickerViews'; import { usePickerLayoutProps } from './usePickerLayoutProps'; import { InferError } from '../useValidation'; import { buildWarning } from '../../utils/warning'; -import { FieldSection } from '../../../models'; +import { FieldSection, PickerValidDate } from '../../../models'; import { DateOrTimeViewWithMeridiem } from '../../models'; const warnRenderInputIsDefined = buildWarning([ @@ -15,7 +15,7 @@ const warnRenderInputIsDefined = buildWarning([ export const usePicker = < TValue, - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerProps, diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts index 5b7e4aeb4ded8..0827fe08cd995 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts @@ -11,7 +11,7 @@ import { UsePickerViewsBaseProps, } from './usePickerViews'; import { UsePickerLayoutProps, UsePickerLayoutPropsResponse } from './usePickerLayoutProps'; -import { FieldSection } from '../../../models'; +import { FieldSection, PickerValidDate } from '../../../models'; import { DateOrTimeViewWithMeridiem } from '../../models'; /** @@ -19,7 +19,7 @@ import { DateOrTimeViewWithMeridiem } from '../../models'; */ export interface UsePickerBaseProps< TValue, - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps, @@ -30,7 +30,7 @@ export interface UsePickerBaseProps< export interface UsePickerProps< TValue, - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TError, @@ -42,7 +42,7 @@ export interface UsePickerProps< export interface UsePickerParams< TValue, - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerProps, diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts index 98863c4ebea8b..1e2c0947eef1d 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts @@ -5,7 +5,12 @@ import { useOpenState } from '../useOpenState'; import { useLocalizationContext, useUtils } from '../useUtils'; import { FieldChangeHandlerContext } from '../useField'; import { InferError, useValidation } from '../useValidation'; -import { FieldSection, FieldSelectedSections, PickerChangeHandlerContext } from '../../../models'; +import { + FieldSection, + FieldSelectedSections, + PickerChangeHandlerContext, + PickerValidDate, +} from '../../../models'; import { PickerShortcutChangeImportance, PickersShortcutsItemContext, @@ -147,7 +152,7 @@ const shouldClosePicker = ( */ export const usePickerValue = < TValue, - TDate, + TDate extends PickerValidDate, TSection extends FieldSection, TExternalProps extends UsePickerValueProps, >({ diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.types.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.types.ts index 959b45b70a337..3546b56d9f51c 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.types.ts @@ -10,6 +10,7 @@ import { MuiPickersAdapter, PickersTimezone, PickerChangeHandlerContext, + PickerValidDate, } from '../../../models'; import { GetDefaultReferenceDateProps } from '../../utils/getDefaultReferenceDate'; import { @@ -17,7 +18,7 @@ import { PickersShortcutsItemContext, } from '../../../PickersShortcuts'; -export interface PickerValueManager { +export interface PickerValueManager { /** * Determines if two values are equal. * @template TDate, TValue @@ -249,7 +250,7 @@ export interface UsePickerValueBaseProps { */ export interface UsePickerValueNonStaticProps extends Pick< - UseFieldInternalProps, + UseFieldInternalProps, 'selectedSections' | 'onSelectedSectionsChange' > { /** @@ -284,7 +285,7 @@ export interface UsePickerValueProps, > { @@ -312,7 +313,7 @@ export interface UsePickerValueActions { export type UsePickerValueFieldResponse = Required< Pick< - UseFieldInternalProps, + UseFieldInternalProps, 'value' | 'onChange' | 'selectedSections' | 'onSelectedSectionsChange' > >; diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts index d70dbe1cdeb58..58768a3877b35 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts @@ -7,7 +7,7 @@ import { useViews, UseViewsOptions } from '../useViews'; import type { UsePickerValueViewsResponse } from './usePickerValue.types'; import { isTimeView } from '../../utils/time-utils'; import { DateOrTimeViewWithMeridiem } from '../../models'; -import { TimezoneProps } from '../../../models'; +import { PickerValidDate, TimezoneProps } from '../../../models'; interface PickerViewsRendererBaseExternalProps extends Omit, 'openTo' | 'viewRenderers'> {} @@ -49,7 +49,7 @@ export type PickerViewRendererLookup< */ export interface UsePickerViewsBaseProps< TValue, - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, @@ -93,7 +93,7 @@ export interface UsePickerViewsNonStaticProps { */ export interface UsePickerViewsProps< TValue, - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, @@ -105,7 +105,7 @@ export interface UsePickerViewsProps< export interface UsePickerViewParams< TValue, - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps< TValue, @@ -163,7 +163,7 @@ export interface UsePickerViewsLayoutResponse, TAdditionalProps extends {}, 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 7bd800892bc20..7c6f79c2914d1 100644 --- a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx @@ -6,7 +6,7 @@ import { usePicker } from '../usePicker'; import { LocalizationProvider } from '../../../LocalizationProvider'; import { PickersLayout } from '../../../PickersLayout'; import { DIALOG_WIDTH } from '../../constants/dimensions'; -import { FieldSection } from '../../../models'; +import { FieldSection, PickerValidDate } from '../../../models'; import { DateOrTimeViewWithMeridiem } from '../../models'; const PickerStaticLayout = styled(PickersLayout)(({ theme }) => ({ @@ -22,7 +22,7 @@ const PickerStaticLayout = styled(PickersLayout)(({ theme }) => ({ * - StaticTimePicker */ export const useStaticPicker = < - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticPickerProps, >({ 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 3938bfcdf7187..3ac7db4269d1c 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 @@ -6,14 +6,18 @@ import { import { BasePickerProps } from '../../models/props/basePickerProps'; import { UsePickerParams } from '../usePicker'; import { UsePickerViewsProps } from '../usePicker/usePickerViews'; -import { FieldSection } from '../../../models'; +import { FieldSection, PickerValidDate } from '../../../models'; import { DateOrTimeViewWithMeridiem } from '../../models'; -export interface UseStaticPickerSlots - extends ExportedPickersLayoutSlots {} +export interface UseStaticPickerSlots< + TDate extends PickerValidDate, + TView extends DateOrTimeViewWithMeridiem, +> extends ExportedPickersLayoutSlots {} -export interface UseStaticPickerSlotProps - extends ExportedPickersLayoutSlotProps {} +export interface UseStaticPickerSlotProps< + TDate extends PickerValidDate, + TView extends DateOrTimeViewWithMeridiem, +> extends ExportedPickersLayoutSlotProps {} export interface StaticOnlyPickerProps { /** @@ -34,7 +38,7 @@ export interface StaticOnlyPickerProps { } export interface UseStaticPickerProps< - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps, @@ -44,7 +48,7 @@ export interface UseStaticPickerProps< * Overridable component slots. * @default {} */ - slots?: UseStaticPickerSlots; + slots?: UseStaticPickerSlots; /** * The props used for each component slot. * @default {} @@ -53,7 +57,7 @@ export interface UseStaticPickerProps< } export interface UseStaticPickerParams< - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticPickerProps, > extends Pick< diff --git a/packages/x-date-pickers/src/internals/hooks/useUtils.ts b/packages/x-date-pickers/src/internals/hooks/useUtils.ts index 9ce0b0102bcdb..2759b1b050785 100644 --- a/packages/x-date-pickers/src/internals/hooks/useUtils.ts +++ b/packages/x-date-pickers/src/internals/hooks/useUtils.ts @@ -5,9 +5,9 @@ import { } from '../../LocalizationProvider/LocalizationProvider'; import { DEFAULT_LOCALE } from '../../locales/enUS'; import { PickersLocaleText } from '../../locales/utils/pickersLocaleTextApi'; -import { PickersTimezone } from '../../models'; +import { PickersTimezone, PickerValidDate } from '../../models'; -export const useLocalizationContext = () => { +export const useLocalizationContext = () => { const localization = React.useContext(MuiPickersAdapterContext); if (localization === null) { throw new Error( @@ -45,13 +45,15 @@ export const useLocalizationContext = () => { ); }; -export const useUtils = () => useLocalizationContext().utils; +export const useUtils = () => useLocalizationContext().utils; -export const useDefaultDates = () => useLocalizationContext().defaultDates; +export const useDefaultDates = () => + useLocalizationContext().defaultDates; -export const useLocaleText = () => useLocalizationContext().localeText; +export const useLocaleText = () => + useLocalizationContext().localeText; -export const useNow = (timezone: PickersTimezone): TDate => { +export const useNow = (timezone: PickersTimezone): TDate => { const utils = useUtils(); const now = React.useRef() as React.MutableRefObject; diff --git a/packages/x-date-pickers/src/internals/hooks/useValidation.ts b/packages/x-date-pickers/src/internals/hooks/useValidation.ts index 1742634d63b5b..406dcf61d0db8 100644 --- a/packages/x-date-pickers/src/internals/hooks/useValidation.ts +++ b/packages/x-date-pickers/src/internals/hooks/useValidation.ts @@ -1,6 +1,7 @@ import * as React from 'react'; import { useLocalizationContext } from './useUtils'; import { MuiPickersAdapterContextValue } from '../../LocalizationProvider/LocalizationProvider'; +import { PickerValidDate } from '../../models'; interface ValidationCommonProps { /** @@ -27,13 +28,18 @@ export type InferError = ? Parameters>[0] : never; -export type Validator = (params: { +export type Validator = (params: { adapter: MuiPickersAdapterContextValue; value: TValue; props: Omit; }) => TError; -export function useValidation( +export function useValidation< + TValue, + TDate extends PickerValidDate, + TError, + TValidationProps extends {}, +>( props: ValidationProps, validate: Validator, isSameError: (a: TError, b: TError | null) => boolean, diff --git a/packages/x-date-pickers/src/internals/hooks/useValueWithTimezone.ts b/packages/x-date-pickers/src/internals/hooks/useValueWithTimezone.ts index 3bac13012c37f..dd892c5d1c9da 100644 --- a/packages/x-date-pickers/src/internals/hooks/useValueWithTimezone.ts +++ b/packages/x-date-pickers/src/internals/hooks/useValueWithTimezone.ts @@ -3,14 +3,18 @@ import useEventCallback from '@mui/utils/useEventCallback'; import useControlled from '@mui/utils/useControlled'; import { useUtils } from './useUtils'; import type { PickerValueManager } from './usePicker'; -import { PickersTimezone } from '../../models'; +import { PickersTimezone, PickerValidDate } from '../../models'; /** * Hooks making sure that: * - The value returned by `onChange` always have the timezone of `props.value` or `props.defaultValue` if defined * - The value rendered is always the one from `props.timezone` if defined */ -export const useValueWithTimezone = void>({ +export const useValueWithTimezone = < + TDate extends PickerValidDate, + TValue, + TChange extends (...params: any[]) => void, +>({ timezone: timezoneProp, value: valueProp, defaultValue, @@ -60,7 +64,7 @@ export const useValueWithTimezone = void, >({ diff --git a/packages/x-date-pickers/src/internals/hooks/useViews.tsx b/packages/x-date-pickers/src/internals/hooks/useViews.tsx index 8f120dde32635..c5c25387d2bf5 100644 --- a/packages/x-date-pickers/src/internals/hooks/useViews.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useViews.tsx @@ -4,8 +4,9 @@ import { unstable_useControlled as useControlled } from '@mui/utils'; import type { PickerSelectionState } from './usePicker'; import { MakeOptional } from '../models/helpers'; import { DateOrTimeViewWithMeridiem } from '../models'; +import { PickerValidDate } from '../../models'; -export type PickerOnChangeFn = ( +export type PickerOnChangeFn = ( date: TDate | null, selectionState?: PickerSelectionState, ) => void; diff --git a/packages/x-date-pickers/src/internals/models/fields.ts b/packages/x-date-pickers/src/internals/models/fields.ts index 552dfb3bef9d3..f46af981ad9ac 100644 --- a/packages/x-date-pickers/src/internals/models/fields.ts +++ b/packages/x-date-pickers/src/internals/models/fields.ts @@ -1,10 +1,14 @@ import * as React from 'react'; import { TextFieldProps } from '@mui/material/TextField'; import type { UseFieldInternalProps } from '../hooks/useField'; -import type { FieldSection } from '../../models'; +import { FieldSection, PickerValidDate } from '../../models'; -export interface BaseFieldProps - extends Omit, 'format'> { +export interface BaseFieldProps< + TValue, + TDate extends PickerValidDate, + TSection extends FieldSection, + TError, +> extends Omit, 'format'> { className?: string; format?: string; disabled?: boolean; diff --git a/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx b/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx index ae4f8a9b8d7f9..9d0b473af2dd8 100644 --- a/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx +++ b/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx @@ -6,13 +6,14 @@ import { PickersInputComponentLocaleText } from '../../../locales/utils/pickersL import type { UsePickerViewsProps } from '../../hooks/usePicker/usePickerViews'; import { MakeOptional } from '../helpers'; import { DateOrTimeViewWithMeridiem } from '../common'; +import { PickerValidDate } from '../../../models'; /** * Props common to all pickers after applying the default props on each picker. */ export interface BasePickerProps< TValue, - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps, @@ -35,7 +36,7 @@ export interface BasePickerProps< */ export interface BasePickerInputProps< TValue, - TDate, + TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError, > extends Omit< diff --git a/packages/x-date-pickers/src/internals/models/props/clock.ts b/packages/x-date-pickers/src/internals/models/props/clock.ts index 8c783c1ac3e67..ff5fa599f6cdb 100644 --- a/packages/x-date-pickers/src/internals/models/props/clock.ts +++ b/packages/x-date-pickers/src/internals/models/props/clock.ts @@ -1,12 +1,12 @@ import { SxProps, Theme } from '@mui/material/styles'; import { BaseTimeValidationProps, TimeValidationProps } from '../validation'; -import { TimeStepOptions, TimezoneProps } from '../../../models'; +import { PickerValidDate, TimeStepOptions, TimezoneProps } from '../../../models'; import type { ExportedDigitalClockProps } from '../../../DigitalClock/DigitalClock.types'; import type { ExportedMultiSectionDigitalClockProps } from '../../../MultiSectionDigitalClock/MultiSectionDigitalClock.types'; import type { ExportedUseViewsOptions } from '../../hooks/useViews'; import { TimeViewWithMeridiem } from '../common'; -export interface ExportedBaseClockProps +export interface ExportedBaseClockProps extends TimeValidationProps, BaseTimeValidationProps, TimezoneProps { @@ -17,7 +17,7 @@ export interface ExportedBaseClockProps ampm?: boolean; } -export interface BaseClockProps +export interface BaseClockProps extends ExportedUseViewsOptions, ExportedBaseClockProps { className?: string; @@ -52,7 +52,7 @@ export interface BaseClockProps referenceDate?: TDate; } -export interface DesktopOnlyTimePickerProps +export interface DesktopOnlyTimePickerProps extends Omit, 'timeStep'>, Omit, 'timeSteps'> { /** diff --git a/packages/x-date-pickers/src/internals/models/validation.ts b/packages/x-date-pickers/src/internals/models/validation.ts index d933b83ecb628..aee8f2a3833e9 100644 --- a/packages/x-date-pickers/src/internals/models/validation.ts +++ b/packages/x-date-pickers/src/internals/models/validation.ts @@ -1,4 +1,4 @@ -import { TimeView } from '../../models'; +import { PickerValidDate, TimeView } from '../../models'; interface FutureAndPastValidationProps { /** @@ -22,7 +22,7 @@ export interface BaseTimeValidationProps extends FutureAndPastValidationProps {} /** * Props used to validate a time value. */ -export interface TimeValidationProps { +export interface TimeValidationProps { /** * Minimal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. @@ -57,7 +57,8 @@ export interface TimeValidationProps { * Validation props common to all the date views. * All these props have a default value when used inside a field / picker / calendar. */ -export interface BaseDateValidationProps extends FutureAndPastValidationProps { +export interface BaseDateValidationProps + extends FutureAndPastValidationProps { /** * Maximal selectable date. */ @@ -71,7 +72,7 @@ export interface BaseDateValidationProps extends FutureAndPastValidationP /** * Props used to validate a date value (validates day + month + year). */ -export interface DayValidationProps { +export interface DayValidationProps { /** * Disable specific date. * @@ -87,7 +88,7 @@ export interface DayValidationProps { /** * Props used to validate a month value */ -export interface MonthValidationProps { +export interface MonthValidationProps { /** * Disable specific month. * @template TDate @@ -100,7 +101,7 @@ export interface MonthValidationProps { /** * Props used to validate a year value */ -export interface YearValidationProps { +export interface YearValidationProps { /** * Disable specific year. * @template TDate @@ -113,7 +114,7 @@ export interface YearValidationProps { /** * Props used to validate a date time value. */ -export interface DateTimeValidationProps { +export interface DateTimeValidationProps { /** * 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/internals/utils/date-time-utils.ts b/packages/x-date-pickers/src/internals/utils/date-time-utils.ts index 61f4daa693c15..0be0869483c4b 100644 --- a/packages/x-date-pickers/src/internals/utils/date-time-utils.ts +++ b/packages/x-date-pickers/src/internals/utils/date-time-utils.ts @@ -2,6 +2,7 @@ import { DateOrTimeView, DateView, MuiPickersAdapter, + PickerValidDate, TimeStepOptions, TimeView, } from '../../models'; @@ -11,8 +12,8 @@ import { DateOrTimeViewWithMeridiem } from '../models'; import { DesktopOnlyTimePickerProps } from '../models/props/clock'; import { DefaultizedProps } from '../models/helpers'; -export const resolveDateTimeFormat = ( - utils: MuiPickersAdapter, +export const resolveDateTimeFormat = ( + utils: MuiPickersAdapter, { views, format, ...other }: { format?: string; views: readonly DateOrTimeView[]; ampm: boolean }, ) => { if (format) { @@ -58,13 +59,15 @@ const resolveViews = (24 * 60) / ((timeSteps.hours ?? 1) * (timeSteps.minutes ?? 5)) <= threshold; -interface DefaultizedTimeViewsProps +interface DefaultizedTimeViewsProps extends DefaultizedProps, 'ampm'> { views: readonly TView[]; } -interface DefaultizedTimeViewsResponse - extends Required< +interface DefaultizedTimeViewsResponse< + TDate extends PickerValidDate, + TView = DateOrTimeViewWithMeridiem, +> extends Required< Pick< DefaultizedTimeViewsProps, 'thresholdToRenderTimeInASingleColumn' | 'timeSteps' | 'views' @@ -74,7 +77,7 @@ interface DefaultizedTimeViewsResponse({ diff --git a/packages/x-date-pickers/src/internals/utils/date-utils.ts b/packages/x-date-pickers/src/internals/utils/date-utils.ts index ea444ec19736a..639332f7dc49e 100644 --- a/packages/x-date-pickers/src/internals/utils/date-utils.ts +++ b/packages/x-date-pickers/src/internals/utils/date-utils.ts @@ -1,8 +1,14 @@ -import { DateView, FieldValueType, MuiPickersAdapter, PickersTimezone } from '../../models'; +import { + DateView, + FieldValueType, + MuiPickersAdapter, + PickersTimezone, + PickerValidDate, +} from '../../models'; import { DateOrTimeViewWithMeridiem } from '../models'; import { areViewsEqual } from './views'; -interface FindClosestDateParams { +interface FindClosestDateParams { date: TDate; disableFuture?: boolean; disablePast?: boolean; @@ -13,7 +19,7 @@ interface FindClosestDateParams { timezone: PickersTimezone; } -export const findClosestEnabledDate = ({ +export const findClosestEnabledDate = ({ date, disableFuture, disablePast, @@ -74,12 +80,12 @@ export const findClosestEnabledDate = ({ return null; }; -export const replaceInvalidDateByNull = ( +export const replaceInvalidDateByNull = ( utils: MuiPickersAdapter, value: TDate | null, ) => (value == null || !utils.isValid(value) ? null : value); -export const applyDefaultDate = ( +export const applyDefaultDate = ( utils: MuiPickersAdapter, value: TDate | null | undefined, defaultValue: TDate, @@ -91,7 +97,11 @@ export const applyDefaultDate = ( return value; }; -export const areDatesEqual = (utils: MuiPickersAdapter, a: TDate, b: TDate) => { +export const areDatesEqual = ( + utils: MuiPickersAdapter, + a: TDate, + b: TDate, +) => { if (!utils.isValid(a) && a != null && !utils.isValid(b) && b != null) { return true; } @@ -99,7 +109,10 @@ export const areDatesEqual = (utils: MuiPickersAdapter, a: TDate, return utils.isEqual(a, b); }; -export const getMonthsInYear = (utils: MuiPickersAdapter, year: TDate) => { +export const getMonthsInYear = ( + utils: MuiPickersAdapter, + year: TDate, +) => { const firstMonth = utils.startOfYear(year); const months = [firstMonth]; @@ -111,7 +124,7 @@ export const getMonthsInYear = (utils: MuiPickersAdapter, year: TD return months; }; -export const mergeDateAndTime = ( +export const mergeDateAndTime = ( utils: MuiPickersAdapter, dateParam: TDate, timeParam: TDate, @@ -124,7 +137,7 @@ export const mergeDateAndTime = ( return mergedDate; }; -export const getTodayDate = ( +export const getTodayDate = ( utils: MuiPickersAdapter, timezone: PickersTimezone, valueType?: FieldValueType, @@ -133,7 +146,10 @@ export const getTodayDate = ( ? utils.startOfDay(utils.date(undefined, timezone)) : utils.date(undefined, timezone); -export const formatMeridiem = (utils: MuiPickersAdapter, meridiem: 'am' | 'pm') => { +export const formatMeridiem = ( + utils: MuiPickersAdapter, + meridiem: 'am' | 'pm', +) => { const date = utils.setHours(utils.date()!, meridiem === 'am' ? 2 : 14); return utils.format(date, 'meridiem'); }; @@ -142,8 +158,8 @@ const dateViews = ['year', 'month', 'day']; export const isDatePickerView = (view: DateOrTimeViewWithMeridiem): view is DateView => dateViews.includes(view); -export const resolveDateFormat = ( - utils: MuiPickersAdapter, +export const resolveDateFormat = ( + utils: MuiPickersAdapter, { format, views }: { format?: string; views: readonly DateView[] }, isInToolbar: boolean, ) => { @@ -184,7 +200,10 @@ export const resolveDateFormat = ( return formats.keyboardDate; }; -export const getWeekdays = (utils: MuiPickersAdapter, date: TDate) => { +export const getWeekdays = ( + utils: MuiPickersAdapter, + date: TDate, +) => { const start = utils.startOfWeek(date); return [0, 1, 2, 3, 4, 5, 6].map((diff) => utils.addDays(start, diff)); }; diff --git a/packages/x-date-pickers/src/internals/utils/getDefaultReferenceDate.ts b/packages/x-date-pickers/src/internals/utils/getDefaultReferenceDate.ts index c93f2fda56dae..7d31ee708ee08 100644 --- a/packages/x-date-pickers/src/internals/utils/getDefaultReferenceDate.ts +++ b/packages/x-date-pickers/src/internals/utils/getDefaultReferenceDate.ts @@ -1,8 +1,8 @@ import { createIsAfterIgnoreDatePart } from './time-utils'; import { mergeDateAndTime, getTodayDate } from './date-utils'; -import { FieldSection, MuiPickersAdapter, PickersTimezone } from '../../models'; +import { FieldSection, MuiPickersAdapter, PickersTimezone, PickerValidDate } from '../../models'; -export interface GetDefaultReferenceDateProps { +export interface GetDefaultReferenceDateProps { maxDate?: TDate; minDate?: TDate; minTime?: TDate; @@ -28,7 +28,11 @@ export const getSectionTypeGranularity = (sections: FieldSection[]) => ), ); -const roundDate = (utils: MuiPickersAdapter, granularity: number, date: TDate) => { +const roundDate = ( + utils: MuiPickersAdapter, + granularity: number, + date: TDate, +) => { if (granularity === SECTION_TYPE_GRANULARITY.year) { return utils.startOfYear(date); } @@ -54,7 +58,7 @@ const roundDate = (utils: MuiPickersAdapter, granularity: number, return roundedDate; }; -export const getDefaultReferenceDate = ({ +export const getDefaultReferenceDate = ({ props, utils, granularity, diff --git a/packages/x-date-pickers/src/internals/utils/time-utils.ts b/packages/x-date-pickers/src/internals/utils/time-utils.ts index 133ce1080c6a6..01faa1cf78626 100644 --- a/packages/x-date-pickers/src/internals/utils/time-utils.ts +++ b/packages/x-date-pickers/src/internals/utils/time-utils.ts @@ -1,4 +1,4 @@ -import { MuiPickersAdapter, TimeView } from '../../models'; +import { MuiPickersAdapter, PickerValidDate, TimeView } from '../../models'; import { DateOrTimeViewWithMeridiem, TimeViewWithMeridiem } from '../models'; import { areViewsEqual } from './views'; @@ -11,7 +11,7 @@ export const isInternalTimeView = ( export type Meridiem = 'am' | 'pm'; -export const getMeridiem = ( +export const getMeridiem = ( date: TDate | null, utils: MuiPickersAdapter, ): Meridiem | null => { @@ -33,7 +33,7 @@ export const convertValueToMeridiem = (value: number, meridiem: Meridiem | null, return value; }; -export const convertToMeridiem = ( +export const convertToMeridiem = ( time: TDate, meridiem: Meridiem, ampm: boolean, @@ -43,12 +43,18 @@ export const convertToMeridiem = ( return utils.setHours(time, newHoursAmount); }; -export const getSecondsInDay = (date: TDate, utils: MuiPickersAdapter) => { +export const getSecondsInDay = ( + date: TDate, + utils: MuiPickersAdapter, +) => { return utils.getHours(date) * 3600 + utils.getMinutes(date) * 60 + utils.getSeconds(date); }; export const createIsAfterIgnoreDatePart = - (disableIgnoringDatePartForTimeValidation: boolean, utils: MuiPickersAdapter) => + ( + disableIgnoringDatePartForTimeValidation: boolean, + utils: MuiPickersAdapter, + ) => (dateLeft: TDate, dateRight: TDate) => { if (disableIgnoringDatePartForTimeValidation) { return utils.isAfter(dateLeft, dateRight); @@ -57,8 +63,8 @@ export const createIsAfterIgnoreDatePart = return getSecondsInDay(dateLeft, utils) > getSecondsInDay(dateRight, utils); }; -export const resolveTimeFormat = ( - utils: MuiPickersAdapter, +export const resolveTimeFormat = ( + utils: MuiPickersAdapter, { format, views, ampm }: { format?: string; views: readonly TimeView[]; ampm: boolean }, ) => { if (format != null) { diff --git a/packages/x-date-pickers/src/internals/utils/validation/validateDate.ts b/packages/x-date-pickers/src/internals/utils/validation/validateDate.ts index 6cd8b41ff7c63..363b13a96f70c 100644 --- a/packages/x-date-pickers/src/internals/utils/validation/validateDate.ts +++ b/packages/x-date-pickers/src/internals/utils/validation/validateDate.ts @@ -5,11 +5,11 @@ import { MonthValidationProps, YearValidationProps, } from '../../models/validation'; -import { DateValidationError, TimezoneProps } from '../../../models'; +import { DateValidationError, PickerValidDate, TimezoneProps } from '../../../models'; import { applyDefaultDate } from '../date-utils'; import { DefaultizedProps } from '../../models/helpers'; -export interface DateComponentValidationProps +export interface DateComponentValidationProps extends DayValidationProps, MonthValidationProps, YearValidationProps, diff --git a/packages/x-date-pickers/src/internals/utils/validation/validateDateTime.ts b/packages/x-date-pickers/src/internals/utils/validation/validateDateTime.ts index 30a39602fb47b..ff14f93ac1eb4 100644 --- a/packages/x-date-pickers/src/internals/utils/validation/validateDateTime.ts +++ b/packages/x-date-pickers/src/internals/utils/validation/validateDateTime.ts @@ -1,9 +1,9 @@ import { Validator } from '../../hooks/useValidation'; import { validateDate, DateComponentValidationProps } from './validateDate'; import { validateTime, TimeComponentValidationProps } from './validateTime'; -import { DateTimeValidationError } from '../../../models'; +import { DateTimeValidationError, PickerValidDate } from '../../../models'; -export interface DateTimeComponentValidationProps +export interface DateTimeComponentValidationProps extends DateComponentValidationProps, TimeComponentValidationProps {} diff --git a/packages/x-date-pickers/src/internals/utils/validation/validateTime.ts b/packages/x-date-pickers/src/internals/utils/validation/validateTime.ts index e21efee801c33..c3d109e7ec0f9 100644 --- a/packages/x-date-pickers/src/internals/utils/validation/validateTime.ts +++ b/packages/x-date-pickers/src/internals/utils/validation/validateTime.ts @@ -1,10 +1,10 @@ import { createIsAfterIgnoreDatePart } from '../time-utils'; import { Validator } from '../../hooks/useValidation'; import { BaseTimeValidationProps, TimeValidationProps } from '../../models/validation'; -import { TimeValidationError, TimezoneProps } from '../../../models'; +import { PickerValidDate, TimeValidationError, TimezoneProps } from '../../../models'; import { DefaultizedProps } from '../../models/helpers'; -export interface TimeComponentValidationProps +export interface TimeComponentValidationProps extends Required, TimeValidationProps, DefaultizedProps {} diff --git a/packages/x-date-pickers/src/internals/utils/valueManagers.ts b/packages/x-date-pickers/src/internals/utils/valueManagers.ts index 02efbeafe40e3..e00437056044e 100644 --- a/packages/x-date-pickers/src/internals/utils/valueManagers.ts +++ b/packages/x-date-pickers/src/internals/utils/valueManagers.ts @@ -4,6 +4,7 @@ import { TimeValidationError, DateTimeValidationError, FieldSection, + PickerValidDate, } from '../../models'; import type { FieldValueManager } from '../hooks/useField'; import { areDatesEqual, getTodayDate, replaceInvalidDateByNull } from './date-utils'; @@ -15,7 +16,7 @@ import { export type SingleItemPickerValueManager< TValue = any, - TDate = any, + TDate extends PickerValidDate = any, TError extends DateValidationError | TimeValidationError | DateTimeValidationError = any, > = PickerValueManager; diff --git a/packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts b/packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts index cb738d79bb873..6e0aca44083b1 100644 --- a/packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts +++ b/packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts @@ -1,5 +1,11 @@ import { TimeViewWithMeridiem } from '../../internals/models'; -import { DateView, TimeView, MuiPickersAdapter, FieldSectionContentType } from '../../models'; +import { + DateView, + TimeView, + MuiPickersAdapter, + FieldSectionContentType, + PickerValidDate, +} from '../../models'; export interface PickersComponentSpecificLocaleText { /** @@ -24,7 +30,7 @@ export interface PickersComponentSpecificLocaleText { dateRangePickerToolbarTitle: string; } -export interface PickersComponentAgnosticLocaleText { +export interface PickersComponentAgnosticLocaleText { // Calendar navigation previousMonth: string; nextMonth: string; @@ -91,18 +97,20 @@ export interface PickersComponentAgnosticLocaleText { fieldMeridiemPlaceholder: (params: { format: string }) => string; } -export interface PickersLocaleText +export interface PickersLocaleText extends PickersComponentAgnosticLocaleText, PickersComponentSpecificLocaleText {} -export type PickersInputLocaleText = Partial>; +export type PickersInputLocaleText = Partial< + PickersLocaleText +>; /** * Translations that can be provided directly to the picker components. * It contains some generic translations like `toolbarTitle` * which will be dispatched to various translations keys in `PickersLocaleText`, depending on the pickers received them. */ -export interface PickersInputComponentLocaleText +export interface PickersInputComponentLocaleText extends Partial> { /** * Title displayed in the toolbar of this picker. @@ -114,6 +122,6 @@ export interface PickersInputComponentLocaleText export type PickersTranslationKeys = keyof PickersLocaleText; export type LocalizedComponent< - TDate, + TDate extends PickerValidDate, Props extends { localeText?: PickersInputComponentLocaleText }, > = Omit & { localeText?: PickersInputLocaleText }; diff --git a/packages/x-date-pickers/src/models/adapters.ts b/packages/x-date-pickers/src/models/adapters.ts index 199ec3bd03811..ae4cf04ddff23 100644 --- a/packages/x-date-pickers/src/models/adapters.ts +++ b/packages/x-date-pickers/src/models/adapters.ts @@ -1,5 +1,6 @@ import { FieldSectionContentType, FieldSectionType } from './fields'; import { PickersTimezone } from './timezone'; +import { PickerValidDate } from './pickers'; export interface AdapterFormats { // Token formats @@ -153,7 +154,7 @@ export type DateBuilderReturnType = ? null : TDate; -export interface MuiPickersAdapter { +export interface MuiPickersAdapter { /** * A boolean confirming that the adapter used is an MUI adapter. */ diff --git a/packages/x-date-pickers/src/models/fields.ts b/packages/x-date-pickers/src/models/fields.ts index a49895354f1ec..8f88dc742f3b9 100644 --- a/packages/x-date-pickers/src/models/fields.ts +++ b/packages/x-date-pickers/src/models/fields.ts @@ -1,5 +1,6 @@ import * as React from 'react'; import type { BaseFieldProps } from '../internals/models/fields'; +import { PickerValidDate } from './pickers'; export type FieldSectionType = | 'year' @@ -125,10 +126,14 @@ export type FieldSelectedSections = /** * Props the single input field can receive when used inside a picker. - * Only contains what the MUI component are passing to the field, not what users can pass using the `props.slotProps.field`. + * Only contains what the MUI components are passing to the field, not what users can pass using the `props.slotProps.field`. */ -export interface BaseSingleInputFieldProps - extends BaseFieldProps { +export interface BaseSingleInputFieldProps< + TValue, + TDate extends PickerValidDate, + TSection extends FieldSection, + TError, +> extends BaseFieldProps { label?: React.ReactNode; id?: string; name?: string; diff --git a/packages/x-date-pickers/src/models/pickers.ts b/packages/x-date-pickers/src/models/pickers.ts index a51d9b1bff8ac..f093acb08b6f9 100644 --- a/packages/x-date-pickers/src/models/pickers.ts +++ b/packages/x-date-pickers/src/models/pickers.ts @@ -8,3 +8,7 @@ export interface PickerChangeHandlerContext { */ shortcut?: PickersShortcutsItemContext; } + +export interface PickerValidDateLookup {} + +export type PickerValidDate = PickerValidDateLookup[keyof PickerValidDateLookup]; diff --git a/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx b/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx index 948853ed504fd..b2fdefc1e22d9 100644 --- a/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx +++ b/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx @@ -12,7 +12,7 @@ import { expectInputValue, } from 'test/utils/pickers'; import { DateTimeField } from '@mui/x-date-pickers/DateTimeField'; -import { FieldSectionType, MuiPickersAdapter } from '@mui/x-date-pickers/models'; +import { FieldSectionType, MuiPickersAdapter, PickerValidDate } from '@mui/x-date-pickers/models'; import { getDateSectionConfigFromFormatToken, cleanLeadingZeros, @@ -20,7 +20,7 @@ import { const testDate = '2018-05-15T09:35:10'; -function updateDate( +function updateDate( date: TDate, adapter: MuiPickersAdapter, sectionType: FieldSectionType, @@ -182,7 +182,7 @@ adapterToTest.forEach((adapterName) => { return valueStr; }; - const testKeyPress = ({ + const testKeyPress = ({ key, format, initialValue, diff --git a/packages/x-date-pickers/src/themeAugmentation/props.d.ts b/packages/x-date-pickers/src/themeAugmentation/props.d.ts index 84feaf48aab51..066a1d694b3ec 100644 --- a/packages/x-date-pickers/src/themeAugmentation/props.d.ts +++ b/packages/x-date-pickers/src/themeAugmentation/props.d.ts @@ -17,7 +17,7 @@ import { PickerPopperProps } from '../internals/components/PickersPopper'; import { PickersToolbarProps } from '../internals/components/PickersToolbar'; import { PickersToolbarButtonProps } from '../internals/components/PickersToolbarButton'; import { ExportedPickersToolbarTextProps } from '../internals/components/PickersToolbarText'; -import { DateOrTimeView } from '../models'; +import { DateOrTimeView, PickerValidDate } from '../models'; import { DatePickerProps, DatePickerToolbarProps } from '../DatePicker'; import { DesktopDatePickerProps } from '../DesktopDatePicker'; @@ -55,25 +55,25 @@ import { import { PickersSectionListProps } from '../PickersSectionList'; export interface PickersComponentsPropsList { - MuiClock: ClockProps; + MuiClock: ClockProps; MuiClockNumber: ClockNumberProps; MuiClockPointer: ClockPointerProps; - MuiDateCalendar: DateCalendarProps; - MuiDateField: DateFieldProps; - MuiDatePickerToolbar: DatePickerToolbarProps; - MuiDateTimeField: DateTimeFieldProps; + MuiDateCalendar: DateCalendarProps; + MuiDateField: DateFieldProps; + MuiDatePickerToolbar: DatePickerToolbarProps; + MuiDateTimeField: DateTimeFieldProps; MuiDateTimePickerTabs: DateTimePickerTabsProps; - MuiDateTimePickerToolbar: DateTimePickerToolbarProps; - MuiDayCalendar: DayCalendarProps; + MuiDateTimePickerToolbar: DateTimePickerToolbarProps; + MuiDayCalendar: DayCalendarProps; MuiDayCalendarSkeleton: DayCalendarSkeletonProps; - MuiDigitalClock: ExportedDigitalClockProps; - MuiLocalizationProvider: LocalizationProviderProps; - MuiMonthCalendar: MonthCalendarProps; - MuiMultiSectionDigitalClock: MultiSectionDigitalClockProps; + MuiDigitalClock: ExportedDigitalClockProps; + MuiLocalizationProvider: LocalizationProviderProps; + MuiMonthCalendar: MonthCalendarProps; + MuiMultiSectionDigitalClock: MultiSectionDigitalClockProps; MuiMultiSectionDigitalClockSection: ExportedMultiSectionDigitalClockSectionProps; MuiPickersArrowSwitcher: ExportedPickersArrowSwitcherProps; - MuiPickersCalendarHeader: ExportedPickersCalendarHeaderProps; - MuiPickersDay: PickersDayProps; + MuiPickersCalendarHeader: ExportedPickersCalendarHeaderProps; + MuiPickersDay: PickersDayProps; MuiPickersFadeTransitionGroup: PickersFadeTransitionGroupProps; MuiPickersMonth: ExportedPickersMonthProps; MuiPickersPopper: PickerPopperProps; @@ -81,30 +81,30 @@ export interface PickersComponentsPropsList { MuiPickersToolbar: PickersToolbarProps; MuiPickersToolbarButton: PickersToolbarButtonProps; MuiPickersToolbarText: ExportedPickersToolbarTextProps; - MuiPickersLayout: PickersLayoutProps; + MuiPickersLayout: PickersLayoutProps; MuiPickersYear: ExportedPickersYearProps; - MuiTimeClock: TimeClockProps; - MuiTimeField: TimeFieldProps; - MuiTimePickerToolbar: TimePickerToolbarProps; - MuiYearCalendar: YearCalendarProps; + MuiTimeClock: TimeClockProps; + MuiTimeField: TimeFieldProps; + MuiTimePickerToolbar: TimePickerToolbarProps; + MuiYearCalendar: YearCalendarProps; // Date Pickers - MuiDatePicker: DatePickerProps; - MuiDesktopDatePicker: DesktopDatePickerProps; - MuiMobileDatePicker: MobileDatePickerProps; - MuiStaticDatePicker: StaticDatePickerProps; + MuiDatePicker: DatePickerProps; + MuiDesktopDatePicker: DesktopDatePickerProps; + MuiMobileDatePicker: MobileDatePickerProps; + MuiStaticDatePicker: StaticDatePickerProps; // Time Pickers - MuiTimePicker: TimePickerProps; - MuiDesktopTimePicker: DesktopTimePickerProps; - MuiMobileTimePicker: MobileTimePickerProps; - MuiStaticTimePicker: StaticTimePickerProps; + MuiTimePicker: TimePickerProps; + MuiDesktopTimePicker: DesktopTimePickerProps; + MuiMobileTimePicker: MobileTimePickerProps; + MuiStaticTimePicker: StaticTimePickerProps; // Date Time Pickers - MuiDateTimePicker: DateTimePickerProps; - MuiDesktopDateTimePicker: DesktopDateTimePickerProps; - MuiMobileDateTimePicker: MobileDateTimePickerProps; - MuiStaticDateTimePicker: StaticDateTimePickerProps; + MuiDateTimePicker: DateTimePickerProps; + MuiDesktopDateTimePicker: DesktopDateTimePickerProps; + MuiMobileDateTimePicker: MobileDateTimePickerProps; + MuiStaticDateTimePicker: StaticDateTimePickerProps; // V7 Picker's TextField MuiPickersTextField: PickersTextFieldProps; diff --git a/packages/x-date-pickers/src/timeViewRenderers/timeViewRenderers.tsx b/packages/x-date-pickers/src/timeViewRenderers/timeViewRenderers.tsx index 568a09abaf841..6d9d631c6d0df 100644 --- a/packages/x-date-pickers/src/timeViewRenderers/timeViewRenderers.tsx +++ b/packages/x-date-pickers/src/timeViewRenderers/timeViewRenderers.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { TimeClock, TimeClockProps } from '../TimeClock'; -import { TimeView } from '../models'; +import { PickerValidDate, TimeView } from '../models'; import { DigitalClock, DigitalClockProps } from '../DigitalClock'; import { BaseClockProps } from '../internals/models/props/clock'; import { @@ -20,7 +20,7 @@ export type TimeViewRendererProps< views: readonly TView[]; }; -export const renderTimeViewClock = ({ +export const renderTimeViewClock = ({ view, onViewChange, focusedView, @@ -82,7 +82,7 @@ export const renderTimeViewClock = ({ /> ); -export const renderDigitalClockTimeView = ({ +export const renderDigitalClockTimeView = ({ view, onViewChange, focusedView, @@ -147,7 +147,7 @@ export const renderDigitalClockTimeView = ({ /> ); -export const renderMultiSectionDigitalClockTimeView = ({ +export const renderMultiSectionDigitalClockTimeView = ({ view, onViewChange, focusedView, diff --git a/packages/x-license-pro/LICENSE b/packages/x-license/LICENSE similarity index 100% rename from packages/x-license-pro/LICENSE rename to packages/x-license/LICENSE diff --git a/packages/x-license-pro/README.md b/packages/x-license/README.md similarity index 70% rename from packages/x-license-pro/README.md rename to packages/x-license/README.md index 50637606a8362..da852b345392e 100644 --- a/packages/x-license-pro/README.md +++ b/packages/x-license/README.md @@ -1,3 +1,3 @@ -# @mui/x-license-pro +# @mui/x-license Package used by all MUIΒ X to validate license. diff --git a/packages/x-license-pro/generateReleaseInfo.js b/packages/x-license/generateReleaseInfo.js similarity index 100% rename from packages/x-license-pro/generateReleaseInfo.js rename to packages/x-license/generateReleaseInfo.js diff --git a/packages/x-license-pro/package.json b/packages/x-license/package.json similarity index 91% rename from packages/x-license-pro/package.json rename to packages/x-license/package.json index a5af0141425c0..2248ae3669b22 100644 --- a/packages/x-license-pro/package.json +++ b/packages/x-license/package.json @@ -1,6 +1,6 @@ { - "name": "@mui/x-license-pro", - "version": "7.0.0-beta.0", + "name": "@mui/x-license", + "version": "7.0.0-beta.2", "description": "MUI X License verification", "author": "MUI Team", "main": "src/index.ts", @@ -32,11 +32,11 @@ "repository": { "type": "git", "url": "https://github.com/mui/mui-x.git", - "directory": "packages/x-license-pro" + "directory": "packages/x-license" }, "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/utils": "^5.15.7" + "@mui/utils": "^5.15.9" }, "peerDependencies": { "react": "^17.0.0 || ^18.0.0" diff --git a/packages/x-license-pro/src/Unstable_LicenseInfoProvider/LicenseInfoContext.ts b/packages/x-license/src/Unstable_LicenseInfoProvider/LicenseInfoContext.ts similarity index 100% rename from packages/x-license-pro/src/Unstable_LicenseInfoProvider/LicenseInfoContext.ts rename to packages/x-license/src/Unstable_LicenseInfoProvider/LicenseInfoContext.ts diff --git a/packages/x-license-pro/src/Unstable_LicenseInfoProvider/LicenseInfoProvider.tsx b/packages/x-license/src/Unstable_LicenseInfoProvider/LicenseInfoProvider.tsx similarity index 100% rename from packages/x-license-pro/src/Unstable_LicenseInfoProvider/LicenseInfoProvider.tsx rename to packages/x-license/src/Unstable_LicenseInfoProvider/LicenseInfoProvider.tsx diff --git a/packages/x-license-pro/src/Unstable_LicenseInfoProvider/index.ts b/packages/x-license/src/Unstable_LicenseInfoProvider/index.ts similarity index 100% rename from packages/x-license-pro/src/Unstable_LicenseInfoProvider/index.ts rename to packages/x-license/src/Unstable_LicenseInfoProvider/index.ts diff --git a/packages/x-license-pro/src/Watermark/Watermark.tsx b/packages/x-license/src/Watermark/Watermark.tsx similarity index 100% rename from packages/x-license-pro/src/Watermark/Watermark.tsx rename to packages/x-license/src/Watermark/Watermark.tsx diff --git a/packages/x-license-pro/src/Watermark/index.ts b/packages/x-license/src/Watermark/index.ts similarity index 100% rename from packages/x-license-pro/src/Watermark/index.ts rename to packages/x-license/src/Watermark/index.ts diff --git a/packages/x-license-pro/src/encoding/base64.test.ts b/packages/x-license/src/encoding/base64.test.ts similarity index 100% rename from packages/x-license-pro/src/encoding/base64.test.ts rename to packages/x-license/src/encoding/base64.test.ts diff --git a/packages/x-license-pro/src/encoding/base64.ts b/packages/x-license/src/encoding/base64.ts similarity index 100% rename from packages/x-license-pro/src/encoding/base64.ts rename to packages/x-license/src/encoding/base64.ts diff --git a/packages/x-license-pro/src/encoding/md5.test.ts b/packages/x-license/src/encoding/md5.test.ts similarity index 100% rename from packages/x-license-pro/src/encoding/md5.test.ts rename to packages/x-license/src/encoding/md5.test.ts diff --git a/packages/x-license-pro/src/encoding/md5.ts b/packages/x-license/src/encoding/md5.ts similarity index 100% rename from packages/x-license-pro/src/encoding/md5.ts rename to packages/x-license/src/encoding/md5.ts diff --git a/packages/x-license-pro/src/generateLicense/generateLicense.test.ts b/packages/x-license/src/generateLicense/generateLicense.test.ts similarity index 100% rename from packages/x-license-pro/src/generateLicense/generateLicense.test.ts rename to packages/x-license/src/generateLicense/generateLicense.test.ts diff --git a/packages/x-license-pro/src/generateLicense/generateLicense.ts b/packages/x-license/src/generateLicense/generateLicense.ts similarity index 100% rename from packages/x-license-pro/src/generateLicense/generateLicense.ts rename to packages/x-license/src/generateLicense/generateLicense.ts diff --git a/packages/x-license-pro/src/generateLicense/index.ts b/packages/x-license/src/generateLicense/index.ts similarity index 100% rename from packages/x-license-pro/src/generateLicense/index.ts rename to packages/x-license/src/generateLicense/index.ts diff --git a/packages/x-license-pro/src/index.ts b/packages/x-license/src/index.ts similarity index 100% rename from packages/x-license-pro/src/index.ts rename to packages/x-license/src/index.ts diff --git a/packages/x-license-pro/src/useLicenseVerifier/index.ts b/packages/x-license/src/useLicenseVerifier/index.ts similarity index 100% rename from packages/x-license-pro/src/useLicenseVerifier/index.ts rename to packages/x-license/src/useLicenseVerifier/index.ts diff --git a/packages/x-license-pro/src/useLicenseVerifier/useLicenseVerifier.test.tsx b/packages/x-license/src/useLicenseVerifier/useLicenseVerifier.test.tsx similarity index 99% rename from packages/x-license-pro/src/useLicenseVerifier/useLicenseVerifier.test.tsx rename to packages/x-license/src/useLicenseVerifier/useLicenseVerifier.test.tsx index 903041728166c..9aaa3bfc713b0 100644 --- a/packages/x-license-pro/src/useLicenseVerifier/useLicenseVerifier.test.tsx +++ b/packages/x-license/src/useLicenseVerifier/useLicenseVerifier.test.tsx @@ -6,7 +6,7 @@ import { LicenseInfo, generateLicense, Unstable_LicenseInfoProvider as LicenseInfoProvider, -} from '@mui/x-license-pro'; +} from '@mui/x-license'; import { sharedLicenseStatuses } from './useLicenseVerifier'; import { generateReleaseInfo } from '../verifyLicense'; diff --git a/packages/x-license-pro/src/useLicenseVerifier/useLicenseVerifier.ts b/packages/x-license/src/useLicenseVerifier/useLicenseVerifier.ts similarity index 100% rename from packages/x-license-pro/src/useLicenseVerifier/useLicenseVerifier.ts rename to packages/x-license/src/useLicenseVerifier/useLicenseVerifier.ts diff --git a/packages/x-license-pro/src/utils/index.ts b/packages/x-license/src/utils/index.ts similarity index 100% rename from packages/x-license-pro/src/utils/index.ts rename to packages/x-license/src/utils/index.ts diff --git a/packages/x-license-pro/src/utils/licenseErrorMessageUtils.ts b/packages/x-license/src/utils/licenseErrorMessageUtils.ts similarity index 100% rename from packages/x-license-pro/src/utils/licenseErrorMessageUtils.ts rename to packages/x-license/src/utils/licenseErrorMessageUtils.ts diff --git a/packages/x-license-pro/src/utils/licenseInfo.ts b/packages/x-license/src/utils/licenseInfo.ts similarity index 100% rename from packages/x-license-pro/src/utils/licenseInfo.ts rename to packages/x-license/src/utils/licenseInfo.ts diff --git a/packages/x-license-pro/src/utils/licenseScope.ts b/packages/x-license/src/utils/licenseScope.ts similarity index 100% rename from packages/x-license-pro/src/utils/licenseScope.ts rename to packages/x-license/src/utils/licenseScope.ts diff --git a/packages/x-license-pro/src/utils/licenseStatus.ts b/packages/x-license/src/utils/licenseStatus.ts similarity index 100% rename from packages/x-license-pro/src/utils/licenseStatus.ts rename to packages/x-license/src/utils/licenseStatus.ts diff --git a/packages/x-license-pro/src/utils/licensingModel.ts b/packages/x-license/src/utils/licensingModel.ts similarity index 100% rename from packages/x-license-pro/src/utils/licensingModel.ts rename to packages/x-license/src/utils/licensingModel.ts diff --git a/packages/x-license-pro/src/verifyLicense/index.ts b/packages/x-license/src/verifyLicense/index.ts similarity index 100% rename from packages/x-license-pro/src/verifyLicense/index.ts rename to packages/x-license/src/verifyLicense/index.ts diff --git a/packages/x-license-pro/src/verifyLicense/verifyLicense.test.ts b/packages/x-license/src/verifyLicense/verifyLicense.test.ts similarity index 100% rename from packages/x-license-pro/src/verifyLicense/verifyLicense.test.ts rename to packages/x-license/src/verifyLicense/verifyLicense.test.ts diff --git a/packages/x-license-pro/src/verifyLicense/verifyLicense.ts b/packages/x-license/src/verifyLicense/verifyLicense.ts similarity index 100% rename from packages/x-license-pro/src/verifyLicense/verifyLicense.ts rename to packages/x-license/src/verifyLicense/verifyLicense.ts diff --git a/packages/x-license-pro/tsconfig.build.json b/packages/x-license/tsconfig.build.json similarity index 100% rename from packages/x-license-pro/tsconfig.build.json rename to packages/x-license/tsconfig.build.json diff --git a/packages/grid/x-data-grid-pro/tsconfig.json b/packages/x-license/tsconfig.json similarity index 68% rename from packages/grid/x-data-grid-pro/tsconfig.json rename to packages/x-license/tsconfig.json index 79824ab245468..6a8e1ed5b14fc 100644 --- a/packages/grid/x-data-grid-pro/tsconfig.json +++ b/packages/x-license/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "../../../tsconfig.json", + "extends": "../../tsconfig.json", "compilerOptions": { "types": ["react", "mocha", "node"] }, @@ -7,6 +7,6 @@ "src/**/*", "../../test/utils/addChaiAssertions.ts", "../../node_modules/@mui/monorepo/packages/test-utils/src/initMatchers.ts", - "../../../node_modules/@mui/material/themeCssVarsAugmentation" + "../../node_modules/@mui/material/themeCssVarsAugmentation" ] } diff --git a/packages/x-tree-view/package.json b/packages/x-tree-view/package.json index be02940081368..675ab077c8cbf 100644 --- a/packages/x-tree-view/package.json +++ b/packages/x-tree-view/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-tree-view", - "version": "7.0.0-beta.0", + "version": "7.0.0-beta.2", "description": "The community edition of the tree view components (MUI X).", "author": "MUI Team", "main": "src/index.ts", @@ -44,9 +44,9 @@ }, "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/base": "^5.0.0-beta.34", - "@mui/system": "^5.15.7", - "@mui/utils": "^5.15.7", + "@mui/base": "^5.0.0-beta.36", + "@mui/system": "^5.15.9", + "@mui/utils": "^5.15.9", "@types/react-transition-group": "^4.4.10", "clsx": "^2.1.0", "prop-types": "^15.8.1", diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx b/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx index c138839efb5bc..11f216686b7b8 100644 --- a/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx +++ b/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx @@ -184,6 +184,53 @@ describe('', () => { expect(getByTestId('2')).not.to.have.attribute('aria-expanded'); }); + it('should treat multiple empty conditional arrays as empty', () => { + const { getByTestId } = render( + + + + {[].map((_, index) => ( + a child + ))} + {[].map((_, index) => ( + a child + ))} + + + , + ); + + expect(getByTestId('2')).not.to.have.attribute('aria-expanded'); + }); + it('should treat one conditional empty and one conditional with results as expandable', () => { + const { getByTestId } = render( + + + + {[]} + {[1].map((_, index) => ( + a child + ))} + + + , + ); + + expect(getByTestId('2')).to.have.attribute('aria-expanded', 'true'); + }); + it('should handle edge case of nested array of array', () => { + const { getByTestId } = render( + + + + {[[]]} + + + , + ); + + expect(getByTestId('2')).not.to.have.attribute('aria-expanded'); + }); it('should not call onClick when children are clicked', () => { const handleClick = spy(); diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.tsx b/packages/x-tree-view/src/TreeItem/TreeItem.tsx index 83ac00cc87c17..c057e886343dd 100644 --- a/packages/x-tree-view/src/TreeItem/TreeItem.tsx +++ b/packages/x-tree-view/src/TreeItem/TreeItem.tsx @@ -58,11 +58,13 @@ const StyledTreeItemContent = styled(TreeItemContent, { ]; }, })<{ ownerState: TreeItemOwnerState }>(({ theme }) => ({ - padding: '0 8px', + padding: theme.spacing(0.5, 1), + borderRadius: theme.shape.borderRadius, width: '100%', boxSizing: 'border-box', // prevent width + padding to overflow display: 'flex', alignItems: 'center', + gap: theme.spacing(1), cursor: 'pointer', WebkitTapHighlightColor: 'transparent', '&:hover': { @@ -107,8 +109,7 @@ const StyledTreeItemContent = styled(TreeItemContent, { }, }, [`& .${treeItemClasses.iconContainer}`]: { - marginRight: 4, - width: 15, + width: 16, display: 'flex', flexShrink: 0, justifyContent: 'center', @@ -117,7 +118,6 @@ const StyledTreeItemContent = styled(TreeItemContent, { }, }, [`& .${treeItemClasses.label}`]: { - paddingLeft: 4, width: '100%', boxSizing: 'border-box', // prevent width + padding to overflow // fixes overflow - see https://github.com/mui/material-ui/issues/27372 @@ -134,7 +134,7 @@ const TreeItemGroup = styled(Collapse, { })({ margin: 0, padding: 0, - marginLeft: 17, + paddingLeft: 12, }); /** @@ -187,7 +187,13 @@ export const TreeItem = React.forwardRef(function TreeItem( icon: inSlots?.icon, }; - const expandable = Boolean(Array.isArray(children) ? children.length : children); + const isExpandable = (reactChildren: React.ReactNode) => { + if (Array.isArray(reactChildren)) { + return reactChildren.length > 0 && reactChildren.some(isExpandable); + } + return Boolean(reactChildren); + }; + const expandable = isExpandable(children); const expanded = instance.isNodeExpanded(nodeId); const focused = instance.isNodeFocused(nodeId); const selected = instance.isNodeSelected(nodeId); diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.tsx index 34b68bc1f3140..2d95b881b3bc7 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.tsx +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.tsx @@ -71,7 +71,14 @@ const useTreeViewJSXNodesItemPlugin: TreeViewItemPlugin = ({ props, ref }) => { const { instance } = useTreeViewContext<[UseTreeViewJSXNodesSignature]>(); - const expandable = Boolean(Array.isArray(children) ? children.length : children); + const isExpandable = (reactChildren: React.ReactNode) => { + if (Array.isArray(reactChildren)) { + return reactChildren.length > 0 && reactChildren.some(isExpandable); + } + return Boolean(reactChildren); + }; + + const expandable = isExpandable(children); const [treeItemElement, setTreeItemElement] = React.useState(null); const contentRef = React.useRef(null); diff --git a/scripts/README.md b/scripts/README.md index 3c48aee3391fe..3af2512675780 100644 --- a/scripts/README.md +++ b/scripts/README.md @@ -2,7 +2,7 @@ ## Release -> Tip: For people who are doing the release for the first time, make sure you sign in to NPM from the command line using security-key flow as well as have two-factor authentication enabled. +> Tip: For people who are doing the release for the first time, make sure you sign in to npm from the command line using security-key flow as well as have two-factor authentication enabled. > You can follow [this guide](https://docs.npmjs.com/accessing-npm-using-2fa) for more information on how to set it up. > Tip: You can copy raw markdown checklist below to the release Pull Request and follow it step by step marking completed items. diff --git a/scripts/buildApiDocs/gridSettings/index.ts b/scripts/buildApiDocs/gridSettings/index.ts index 4291cdda64c5b..0bcd4c9eedf92 100644 --- a/scripts/buildApiDocs/gridSettings/index.ts +++ b/scripts/buildApiDocs/gridSettings/index.ts @@ -45,18 +45,18 @@ export default apiPages; typeScriptProjects: [ { name: 'data-grid', - rootPath: path.join(process.cwd(), 'packages/grid/x-data-grid'), + rootPath: path.join(process.cwd(), 'packages/x-data-grid'), entryPointPath: 'src/index.ts', }, { name: 'data-grid-pro', - rootPath: path.join(process.cwd(), 'packages/grid/x-data-grid-pro'), + rootPath: path.join(process.cwd(), 'packages/x-data-grid-pro'), entryPointPath: 'src/index.ts', }, { name: 'data-grid-premium', - rootPath: path.join(process.cwd(), 'packages/grid/x-data-grid-premium'), + rootPath: path.join(process.cwd(), 'packages/x-data-grid-premium'), entryPointPath: 'src/index.ts', }, ], diff --git a/scripts/copyFiles.mjs b/scripts/copyFiles.mjs index 965d3b32b3602..6d0199ee1c6bd 100644 --- a/scripts/copyFiles.mjs +++ b/scripts/copyFiles.mjs @@ -3,118 +3,17 @@ /* eslint-disable no-console */ import path from 'path'; import fse from 'fs-extra'; -import glob from 'fast-glob'; +import { + includeFileInBuild, + createModulePackages, + typescriptCopy, + createPackageFile, +} from '@mui/monorepo/scripts/copyFilesUtils.mjs'; const packagePath = process.cwd(); const buildPath = path.join(packagePath, './build'); const srcPath = path.join(packagePath, './src'); -async function includeFileInBuild(file) { - const sourcePath = path.resolve(packagePath, file); - const targetPath = path.resolve(buildPath, path.basename(file)); - await fse.copy(sourcePath, targetPath); - console.log(`Copied ${sourcePath} to ${targetPath}`); -} - -/** - * Puts a package.json into every immediate child directory of rootDir. - * That package.json contains information about esm for bundlers so that imports - * like import Typography from '@mui/material/Typography' are tree-shakeable. - * - * It also tests that this import can be used in TypeScript by checking - * if an index.d.ts is present at that path. - * @param {object} param0 - * @param {string} param0.from - * @param {string} param0.to - */ -async function createModulePackages({ from, to }) { - const directoryPackages = glob.sync('*/index.{js,ts,tsx}', { cwd: from }).map(path.dirname); - - await Promise.all( - directoryPackages.map(async (directoryPackage) => { - const packageJsonPath = path.join(to, directoryPackage, 'package.json'); - const topLevelPathImportsAreCommonJSModules = await fse.pathExists( - path.resolve(path.dirname(packageJsonPath), '../esm'), - ); - - const packageJson = { - sideEffects: false, - module: topLevelPathImportsAreCommonJSModules - ? path.posix.join('../esm', directoryPackage, 'index.js') - : './index.js', - main: topLevelPathImportsAreCommonJSModules - ? './index.js' - : path.posix.join('../node', directoryPackage, 'index.js'), - types: './index.d.ts', - }; - - const [typingsEntryExist, moduleEntryExists, mainEntryExists] = await Promise.all([ - fse.pathExists(path.resolve(path.dirname(packageJsonPath), packageJson.types)), - fse.pathExists(path.resolve(path.dirname(packageJsonPath), packageJson.module)), - fse.pathExists(path.resolve(path.dirname(packageJsonPath), packageJson.main)), - fse.writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2)), - ]); - - const manifestErrorMessages = []; - if (!typingsEntryExist) { - manifestErrorMessages.push(`'types' entry '${packageJson.types}' does not exist`); - } - if (!moduleEntryExists) { - manifestErrorMessages.push(`'module' entry '${packageJson.module}' does not exist`); - } - if (!mainEntryExists) { - manifestErrorMessages.push(`'main' entry '${packageJson.main}' does not exist`); - } - if (manifestErrorMessages.length > 0) { - // TODO: AggregateError - throw new Error(`${packageJsonPath}:\n${manifestErrorMessages.join('\n')}`); - } - - return packageJsonPath; - }), - ); -} - -async function typescriptCopy({ from, to }) { - if (!(await fse.pathExists(to))) { - console.warn(`path ${to} does not exists`); - return []; - } - - const files = await glob('**/*.d.ts', { cwd: from }); - const cmds = files.map((file) => fse.copy(path.resolve(from, file), path.resolve(to, file))); - return Promise.all(cmds); -} - -async function createPackageFile() { - const packageData = await fse.readFile(path.resolve(packagePath, './package.json'), 'utf8'); - const { nyc, scripts, devDependencies, workspaces, ...packageDataOther } = - JSON.parse(packageData); - - const newPackageData = { - ...packageDataOther, - private: false, - ...(packageDataOther.main - ? { - main: fse.existsSync(path.resolve(buildPath, './node/index.js')) - ? './node/index.js' - : './index.js', - module: fse.existsSync(path.resolve(buildPath, './esm/index.js')) - ? './esm/index.js' - : './index.js', - } - : {}), - types: './index.d.ts', - }; - - const targetPath = path.resolve(buildPath, './package.json'); - - await fse.writeFile(targetPath, JSON.stringify(newPackageData, null, 2), 'utf8'); - console.log(`Created package.json in ${targetPath}`); - - return newPackageData; -} - async function prepend(file, string) { const data = await fse.readFile(file, 'utf8'); await fse.writeFile(file, string + data, 'utf8'); @@ -157,12 +56,7 @@ async function run() { try { const packageData = await createPackageFile(); - const filesToCopy = [ - './README.md', - - // TODO: Remove `grid` folder to flatten the structure - packageData.name.includes('grid') ? '../../../CHANGELOG.md' : '../../CHANGELOG.md', - ]; + const filesToCopy = ['./README.md', '../../CHANGELOG.md']; const hasLicenseFileInPackage = await fse.exists(path.join(packagePath, 'LICENSE')); if (hasLicenseFileInPackage) { diff --git a/scripts/l10n.ts b/scripts/l10n.ts index 94b2bbb98803c..bd21115264581 100644 --- a/scripts/l10n.ts +++ b/scripts/l10n.ts @@ -26,8 +26,8 @@ const packagesWithL10n = [ { key: 'data-grid', reportName: 'πŸ§‘β€πŸ’Ό DataGrid, DataGridPro, DataGridPremium', - constantsRelativePath: 'packages/grid/x-data-grid/src/constants/localeTextConstants.ts', - localesRelativePath: 'packages/grid/x-data-grid/src/locales', + constantsRelativePath: 'packages/x-data-grid/src/constants/localeTextConstants.ts', + localesRelativePath: 'packages/x-data-grid/src/locales', documentationReportPath: 'docs/data/data-grid/localization/data.json', }, { diff --git a/scripts/sizeSnapshot/webpack.config.js b/scripts/sizeSnapshot/webpack.config.js index b2a07570ad87c..978665129a655 100644 --- a/scripts/sizeSnapshot/webpack.config.js +++ b/scripts/sizeSnapshot/webpack.config.js @@ -9,19 +9,19 @@ async function getWebpackEntries() { return [ { name: '@mui/x-data-grid-premium', - path: 'packages/grid/x-data-grid-premium/build/index-esm.js', + path: 'packages/x-data-grid-premium/build/index-esm.js', }, { name: '@mui/x-data-grid-pro', - path: 'packages/grid/x-data-grid-pro/build/index-esm.js', + path: 'packages/x-data-grid-pro/build/index-esm.js', }, { name: '@mui/x-data-grid', - path: 'packages/grid/x-data-grid/build/index-esm.js', + path: 'packages/x-data-grid/build/index-esm.js', }, { - name: '@mui/x-license-pro', - path: 'packages/x-license-pro/build/esm/index.js', + name: '@mui/x-license', + path: 'packages/x-license/build/esm/index.js', }, ]; } @@ -62,22 +62,16 @@ module.exports = async function webpackConfig(webpack, environment) { ], resolve: { alias: { - '@mui/x-data-grid': path.join( - workspaceRoot, - 'packages/grid/x-data-grid/build/index-esm.js', - ), + '@mui/x-data-grid': path.join(workspaceRoot, 'packages/x-data-grid/build/index-esm.js'), '@mui/x-data-grid-pro': path.join( workspaceRoot, - 'packages/grid/x-data-grid-pro/build/index-esm.js', + 'packages/x-data-grid-pro/build/index-esm.js', ), '@mui/x-data-grid-premium': path.join( workspaceRoot, - 'packages/grid/x-data-grid-premium/build/index-esm.js', - ), - '@mui/x-license-pro': path.join( - workspaceRoot, - 'packages/x-license-pro/build/esm/index.js', + 'packages/x-data-grid-premium/build/index-esm.js', ), + '@mui/x-license': path.join(workspaceRoot, 'packages/x-license/build/esm/index.js'), }, }, entry: { [entry.name]: path.join(workspaceRoot, entry.path) }, diff --git a/scripts/x-charts.exports.json b/scripts/x-charts.exports.json index e22243740e686..f89d9267c0540 100644 --- a/scripts/x-charts.exports.json +++ b/scripts/x-charts.exports.json @@ -33,6 +33,8 @@ { "name": "BarElementOwnerState", "kind": "Interface" }, { "name": "BarElementPath", "kind": "Variable" }, { "name": "BarElementProps", "kind": "TypeAlias" }, + { "name": "BarElementSlotProps", "kind": "Interface" }, + { "name": "BarElementSlots", "kind": "Interface" }, { "name": "BarItemIdentifier", "kind": "TypeAlias" }, { "name": "BarPlot", "kind": "Function" }, { "name": "BarPlotProps", "kind": "Interface" }, @@ -108,6 +110,7 @@ { "name": "DEFAULT_Y_AXIS_KEY", "kind": "Variable" }, { "name": "DefaultChartsAxisTooltipContent", "kind": "Function" }, { "name": "DefaultChartsItemTooltipContent", "kind": "Function" }, + { "name": "DefaultChartsLegend", "kind": "Function" }, { "name": "DefaultizedBarSeriesType", "kind": "Interface" }, { "name": "DefaultizedCartesianSeriesType", "kind": "TypeAlias" }, { "name": "DefaultizedLineSeriesType", "kind": "Interface" }, @@ -199,6 +202,7 @@ { "name": "PieChartProps", "kind": "Interface" }, { "name": "PieChartSlotProps", "kind": "Interface" }, { "name": "PieChartSlots", "kind": "Interface" }, + { "name": "PieItemId", "kind": "TypeAlias" }, { "name": "PieItemIdentifier", "kind": "TypeAlias" }, { "name": "PiePlot", "kind": "Function" }, { "name": "PiePlotProps", "kind": "Interface" }, diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index 287b954cc35ce..7093d6eac2ad7 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -4,6 +4,7 @@ { "name": "BaseChipPropsOverrides", "kind": "Interface" }, { "name": "BaseFormControlPropsOverrides", "kind": "Interface" }, { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" }, + { "name": "BaseInputAdornmentPropsOverrides", "kind": "Interface" }, { "name": "BaseInputLabelPropsOverrides", "kind": "Interface" }, { "name": "BasePopperPropsOverrides", "kind": "Interface" }, { "name": "BaseSelectOptionPropsOverrides", "kind": "Interface" }, @@ -28,6 +29,7 @@ { "name": "DataGridPro", "kind": "Function" }, { "name": "DEFAULT_GRID_AUTOSIZE_OPTIONS", "kind": "Variable" }, { "name": "DEFAULT_GRID_COL_TYPE_KEY", "kind": "Variable" }, + { "name": "DetailPanelsPropsOverrides", "kind": "Interface" }, { "name": "ElementSize", "kind": "Interface" }, { "name": "EMPTY_PINNED_COLUMN_FIELDS", "kind": "Variable" }, { "name": "EMPTY_RENDER_CONTEXT", "kind": "Variable" }, @@ -529,8 +531,10 @@ { "name": "GridSkeletonCell", "kind": "Function" }, { "name": "GridSkeletonCellProps", "kind": "Interface" }, { "name": "GridSkeletonRowNode", "kind": "Interface" }, + { "name": "GridSlotProps", "kind": "Interface" }, + { "name": "GridSlots", "kind": "Interface" }, { "name": "GridSlotsComponent", "kind": "Interface" }, - { "name": "GridSlotsComponentsProps", "kind": "Interface" }, + { "name": "GridSlotsComponentsProps", "kind": "TypeAlias" }, { "name": "GridSortApi", "kind": "Interface" }, { "name": "GridSortCellParams", "kind": "Interface" }, { "name": "GridSortColumnLookup", "kind": "TypeAlias" }, @@ -610,6 +614,7 @@ { "name": "OutputSelector", "kind": "Interface" }, { "name": "PaginationPropsOverrides", "kind": "Interface" }, { "name": "PanelPropsOverrides", "kind": "Interface" }, + { "name": "PinnedRowsPropsOverrides", "kind": "Interface" }, { "name": "renderActionsCell", "kind": "Variable" }, { "name": "renderBooleanCell", "kind": "Variable" }, { "name": "renderEditBooleanCell", "kind": "Variable" }, @@ -621,6 +626,7 @@ { "name": "selectedGridRowsSelector", "kind": "Variable" }, { "name": "selectedIdsLookupSelector", "kind": "Variable" }, { "name": "setupExcelExportWebWorker", "kind": "Function" }, + { "name": "SkeletonCellPropsOverrides", "kind": "Interface" }, { "name": "ToolbarPropsOverrides", "kind": "Interface" }, { "name": "unstable_resetCleanupTracking", "kind": "Variable" }, { "name": "useFirstRender", "kind": "Variable" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index 6e1bffb88d86e..7a9543c73818f 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -4,6 +4,7 @@ { "name": "BaseChipPropsOverrides", "kind": "Interface" }, { "name": "BaseFormControlPropsOverrides", "kind": "Interface" }, { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" }, + { "name": "BaseInputAdornmentPropsOverrides", "kind": "Interface" }, { "name": "BaseInputLabelPropsOverrides", "kind": "Interface" }, { "name": "BasePopperPropsOverrides", "kind": "Interface" }, { "name": "BaseSelectOptionPropsOverrides", "kind": "Interface" }, @@ -27,6 +28,7 @@ { "name": "DataGridProProps", "kind": "Interface" }, { "name": "DEFAULT_GRID_AUTOSIZE_OPTIONS", "kind": "Variable" }, { "name": "DEFAULT_GRID_COL_TYPE_KEY", "kind": "Variable" }, + { "name": "DetailPanelsPropsOverrides", "kind": "Interface" }, { "name": "ElementSize", "kind": "Interface" }, { "name": "EMPTY_PINNED_COLUMN_FIELDS", "kind": "Variable" }, { "name": "EMPTY_RENDER_CONTEXT", "kind": "Variable" }, @@ -483,8 +485,10 @@ { "name": "GridSkeletonCell", "kind": "Function" }, { "name": "GridSkeletonCellProps", "kind": "Interface" }, { "name": "GridSkeletonRowNode", "kind": "Interface" }, + { "name": "GridSlotProps", "kind": "Interface" }, + { "name": "GridSlots", "kind": "Interface" }, { "name": "GridSlotsComponent", "kind": "Interface" }, - { "name": "GridSlotsComponentsProps", "kind": "Interface" }, + { "name": "GridSlotsComponentsProps", "kind": "TypeAlias" }, { "name": "GridSortApi", "kind": "Interface" }, { "name": "GridSortCellParams", "kind": "Interface" }, { "name": "GridSortColumnLookup", "kind": "TypeAlias" }, @@ -562,6 +566,7 @@ { "name": "OutputSelector", "kind": "Interface" }, { "name": "PaginationPropsOverrides", "kind": "Interface" }, { "name": "PanelPropsOverrides", "kind": "Interface" }, + { "name": "PinnedRowsPropsOverrides", "kind": "Interface" }, { "name": "renderActionsCell", "kind": "Variable" }, { "name": "renderBooleanCell", "kind": "Variable" }, { "name": "renderEditBooleanCell", "kind": "Variable" }, @@ -572,6 +577,7 @@ { "name": "selectedGridRowsCountSelector", "kind": "Variable" }, { "name": "selectedGridRowsSelector", "kind": "Variable" }, { "name": "selectedIdsLookupSelector", "kind": "Variable" }, + { "name": "SkeletonCellPropsOverrides", "kind": "Interface" }, { "name": "ToolbarPropsOverrides", "kind": "Interface" }, { "name": "unstable_resetCleanupTracking", "kind": "Variable" }, { "name": "useFirstRender", "kind": "Variable" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index a14da1163acf4..f55ecfd6630cc 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -4,6 +4,7 @@ { "name": "BaseChipPropsOverrides", "kind": "Interface" }, { "name": "BaseFormControlPropsOverrides", "kind": "Interface" }, { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" }, + { "name": "BaseInputAdornmentPropsOverrides", "kind": "Interface" }, { "name": "BaseInputLabelPropsOverrides", "kind": "Interface" }, { "name": "BasePopperPropsOverrides", "kind": "Interface" }, { "name": "BaseSelectOptionPropsOverrides", "kind": "Interface" }, @@ -24,6 +25,7 @@ { "name": "DataGrid", "kind": "Variable" }, { "name": "DataGridProps", "kind": "TypeAlias" }, { "name": "DEFAULT_GRID_COL_TYPE_KEY", "kind": "Variable" }, + { "name": "DetailPanelsPropsOverrides", "kind": "Interface" }, { "name": "ElementSize", "kind": "Interface" }, { "name": "EMPTY_PINNED_COLUMN_FIELDS", "kind": "Variable" }, { "name": "EMPTY_RENDER_CONTEXT", "kind": "Variable" }, @@ -438,8 +440,10 @@ { "name": "GridSkeletonCell", "kind": "Function" }, { "name": "GridSkeletonCellProps", "kind": "Interface" }, { "name": "GridSkeletonRowNode", "kind": "Interface" }, + { "name": "GridSlotProps", "kind": "Interface" }, + { "name": "GridSlots", "kind": "Interface" }, { "name": "GridSlotsComponent", "kind": "Interface" }, - { "name": "GridSlotsComponentsProps", "kind": "Interface" }, + { "name": "GridSlotsComponentsProps", "kind": "TypeAlias" }, { "name": "GridSortApi", "kind": "Interface" }, { "name": "GridSortCellParams", "kind": "Interface" }, { "name": "GridSortColumnLookup", "kind": "TypeAlias" }, @@ -515,6 +519,7 @@ { "name": "OutputSelector", "kind": "Interface" }, { "name": "PaginationPropsOverrides", "kind": "Interface" }, { "name": "PanelPropsOverrides", "kind": "Interface" }, + { "name": "PinnedRowsPropsOverrides", "kind": "Interface" }, { "name": "renderActionsCell", "kind": "Variable" }, { "name": "renderBooleanCell", "kind": "Variable" }, { "name": "renderEditBooleanCell", "kind": "Variable" }, @@ -525,6 +530,7 @@ { "name": "selectedGridRowsCountSelector", "kind": "Variable" }, { "name": "selectedGridRowsSelector", "kind": "Variable" }, { "name": "selectedIdsLookupSelector", "kind": "Variable" }, + { "name": "SkeletonCellPropsOverrides", "kind": "Interface" }, { "name": "ToolbarPropsOverrides", "kind": "Interface" }, { "name": "unstable_resetCleanupTracking", "kind": "Variable" }, { "name": "useFirstRender", "kind": "Variable" }, diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index 5343b4cafe9bf..e56672a9a27df 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -312,6 +312,8 @@ { "name": "pickersYearClasses", "kind": "Variable" }, { "name": "PickersYearClasses", "kind": "Interface" }, { "name": "PickersYearClassKey", "kind": "TypeAlias" }, + { "name": "PickerValidDate", "kind": "TypeAlias" }, + { "name": "PickerValidDateLookup", "kind": "Interface" }, { "name": "RangeFieldSection", "kind": "Interface" }, { "name": "RangePosition", "kind": "TypeAlias" }, { "name": "renderDateRangeViewCalendar", "kind": "Variable" }, diff --git a/scripts/x-date-pickers.exports.json b/scripts/x-date-pickers.exports.json index e7f8314be788d..db0a05484f4f3 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -233,6 +233,8 @@ { "name": "pickersYearClasses", "kind": "Variable" }, { "name": "PickersYearClasses", "kind": "Interface" }, { "name": "PickersYearClassKey", "kind": "TypeAlias" }, + { "name": "PickerValidDate", "kind": "TypeAlias" }, + { "name": "PickerValidDateLookup", "kind": "Interface" }, { "name": "renderDateViewCalendar", "kind": "Variable" }, { "name": "renderDigitalClockTimeView", "kind": "Variable" }, { "name": "renderMultiSectionDigitalClockTimeView", "kind": "Variable" }, diff --git a/scripts/x-license-pro.exports.json b/scripts/x-license.exports.json similarity index 100% rename from scripts/x-license-pro.exports.json rename to scripts/x-license.exports.json diff --git a/templates/x-data-grid/public/index.html b/templates/x-data-grid/public/index.html deleted file mode 100644 index 0a7ab2d3bbbca..0000000000000 --- a/templates/x-data-grid/public/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - DataGridProDemo demo β€” MUI X - - - - - - -
- - diff --git a/test/e2e/template.html b/test/e2e/template.html index 081f21ed377a0..7d84cc7643adb 100644 --- a/test/e2e/template.html +++ b/test/e2e/template.html @@ -1,9 +1,9 @@ - + Playwright end-to-end test - +